Cleanup old Primitive imports (#2606)

* cleanup

* Create three-apples-beg.md

* add color imports to sb

* sb upgrades

.changeset/three-apples-beg.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Cleanup old Primitive imports

docs/.storybook/preview.css

@@ -1,9 +1,20 @@
-@import '@primer/primitives/tokens-next-private/css/base/size/size.css';
-@import '@primer/primitives/tokens-next-private/css/base/typography/typography.css';
-@import '@primer/primitives/tokens-next-private/css/functional/size/border.css';
-@import '@primer/primitives/tokens-next-private/css/functional/size/breakpoints.css';
-@import '@primer/primitives/tokens-next-private/css/functional/size/size-coarse.css';
-@import '@primer/primitives/tokens-next-private/css/functional/size/size-fine.css';
-@import '@primer/primitives/tokens-next-private/css/functional/size/size.css';
-@import '@primer/primitives/tokens-next-private/css/functional/size/viewport.css';
-@import '@primer/primitives/tokens-next-private/css/functional/typography/typography.css';
+@import '@primer/primitives/dist/css/base/size/size.css';
+@import '@primer/primitives/dist/css/base/typography/typography.css';
+@import '@primer/primitives/dist/css/functional/size/border.css';
+@import '@primer/primitives/dist/css/functional/size/breakpoints.css';
+@import '@primer/primitives/dist/css/functional/size/size-coarse.css';
+@import '@primer/primitives/dist/css/functional/size/size-fine.css';
+@import '@primer/primitives/dist/css/functional/size/size.css';
+@import '@primer/primitives/dist/css/functional/size/viewport.css';
+@import '@primer/primitives/dist/css/functional/typography/typography.css';
+
+/* color */
+@import '@primer/primitives/dist/css/functional/themes/light.css';
+@import '@primer/primitives/dist/css/functional/themes/light-tritanopia.css';
+@import '@primer/primitives/dist/css/functional/themes/light-high-contrast.css';
+@import '@primer/primitives/dist/css/functional/themes/light-colorblind.css';
+@import '@primer/primitives/dist/css/functional/themes/dark.css';
+@import '@primer/primitives/dist/css/functional/themes/dark-colorblind.css';
+@import '@primer/primitives/dist/css/functional/themes/dark-dimmed.css';
+@import '@primer/primitives/dist/css/functional/themes/dark-high-contrast.css';
+@import '@primer/primitives/dist/css/functional/themes/dark-tritanopia.css';

docs/package.json

@@ -24,6 +24,8 @@
     "babel-loader": "^8.2.5",
     "clsx": "^1.2.1",
     "eslint-plugin-storybook": "^0.6.12",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "storybook": "^7.0.26",
     "storybook-addon-pseudo-states": "^2.1.0"
   }

package.json

@@ -65,7 +65,6 @@
     "js-yaml": "^4.1.0",
     "postcss": "^8.4.35",
     "postcss-calc": "^9.0.1",
-    "postcss-custom-properties-fallback": "^1.0.2",
     "postcss-import": "^16.0.1",
     "postcss-load-config": "^5.0.3",
     "postcss-scss": "^4.0.5",

postcss.config.cjs

@@ -3,8 +3,6 @@ const sass = require('@csstools/postcss-sass')
 const scss = require('postcss-scss')
 const scssImport = require('postcss-import')
 const { join } = require('path')
-const path = require('path')
-const fs = require('fs')
 
 module.exports = {
   map: {
@@ -19,31 +17,6 @@ module.exports = {
       includePaths: [join(__dirname, 'node_modules')],
       outputStyle: process.env.CSS_MINIFY === '0' ? 'expanded' : 'compressed'
     }),
-    autoprefixer,
-    require('postcss-custom-properties-fallback')({
-      importFrom: [
-        () => {
-          const primitiveFallbacks = [
-            'color-fallbacks.json',
-            'base/size/size.json',
-            'base/typography/typography.json',
-            'functional/size/border.json',
-            'functional/size/breakpoints.json',
-            'functional/size/size-coarse.json',
-            'functional/size/size-fine.json',
-            'functional/size/size.json',
-            'functional/size/viewport.json',
-            'functional/typography/typography.json',
-          ]
-          let customProperties = {}
-          for (const filePath of primitiveFallbacks) {
-            const fileData = fs.readFileSync(path.join(__dirname, './node_modules/@primer/primitives/tokens-next-private/fallbacks/', filePath), 'utf8')
-            customProperties = {...customProperties, ...JSON.parse(fileData)}
-          }
-
-          return { customProperties: customProperties };
-        }
-      ]
-    }),
+    autoprefixer
   ]
 }

src/primitives/index.scss

@@ -1,10 +1,10 @@
-@import '@primer/primitives/tokens-next-private/css/base/size/size';
-@import '@primer/primitives/tokens-next-private/css/base/typography/typography';
-@import '@primer/primitives/tokens-next-private/css/functional/size/border';
-@import '@primer/primitives/tokens-next-private/css/functional/size/breakpoints';
-@import '@primer/primitives/tokens-next-private/css/functional/size/size-coarse';
-@import '@primer/primitives/tokens-next-private/css/functional/size/size-fine';
-@import '@primer/primitives/tokens-next-private/css/functional/size/size';
-@import '@primer/primitives/tokens-next-private/css/functional/size/viewport';
-@import '@primer/primitives/tokens-next-private/css/functional/typography/typography';
+@import '@primer/primitives/dist/css/base/size/size';
+@import '@primer/primitives/dist/css/base/typography/typography';
+@import '@primer/primitives/dist/css/functional/size/border';
+@import '@primer/primitives/dist/css/functional/size/breakpoints';
+@import '@primer/primitives/dist/css/functional/size/size-coarse';
+@import '@primer/primitives/dist/css/functional/size/size-fine';
+@import '@primer/primitives/dist/css/functional/size/size';
+@import '@primer/primitives/dist/css/functional/size/viewport';
+@import '@primer/primitives/dist/css/functional/typography/typography';
 @import './temp-typography-tokens.scss';