Update fallback plugin to inline hex colors from light

primer · Jul 10, 2024 · 42ebf4d · 42ebf4d
1 parent fa29d99
commit 42ebf4d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/packages/react/rollup.config.mjs b/packages/react/rollup.config.mjs
@@ -134,19 +134,35 @@ const baseConfig = {
           importFrom: [
             () => {
               let customProperties = {}
-              const filePaths = glob.sync(['**/*.json'], {
-                cwd: path.join(__dirname, '../../node_modules/@primer/primitives/dist/fallbacks/'),
-                ignore: ['color-fallbacks.json'],
+              const filePaths = glob.sync(['fallbacks/**/*.json', 'docs/functional/themes/light.json'], {
+                cwd: path.join(__dirname, '../../node_modules/@primer/primitives/dist/'),
+                ignore: ['fallbacks/color-fallbacks.json'],
               })
 
               for (const filePath of filePaths) {
                 const fileData = fs.readFileSync(
-                  path.join(__dirname, '../../node_modules/@primer/primitives/dist/fallbacks/', filePath),
+                  path.join(__dirname, '../../node_modules/@primer/primitives/dist/', filePath),
                   'utf8',
                 )
+
+                if (fileData.includes('--color-border-default')) {
+                  console.log(filePath)
+                }
+
+                const jsonData = JSON.parse(fileData)
+                let result = {}
+
+                if (filePath === 'docs/functional/themes/light.json') {
+                  for (const variable of Object.keys(jsonData)) {
+                    result[`--${variable}`] = jsonData[variable].value
+                  }
+                } else {
+                  result = jsonData
+                }
+
                 customProperties = {
                   ...customProperties,
-                  ...JSON.parse(fileData),
+                  ...result,
                 }
               }
 

diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css
@@ -2,7 +2,7 @@
 .ButtonBase {
   border-radius: var(--borderRadius-medium);
   border: var(--borderWidth-thin) solid;
-  border-color: var(--button-default-borderColor-rest, var(--borderColor-default));
+  border-color: var(--button-default-borderColor-rest);
   font-family: inherit;
   font-weight: var(--base-text-weight-medium);
   font-size: var(--text-body-size-medium);