integrated shadow colors prototype for #359

primer · Oct 11, 2022 · 58c5979 · 58c5979
1 parent ba89ab5
commit 58c5979
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 111 deletions.
diff --git a/config/platforms/css.ts b/config/platforms/css.ts
@@ -15,7 +15,7 @@ export const platformCss: PlatformInitializer = (outputFile, prefix, buildPath,
       format: `css/variables`,
       filter: isSource,
       options: {
-        outputReferences: false,
+        outputReferences: options.outputReferences || false,
       }
     }
   ]

diff --git a/tempColorTokenBuild.ts b/tempColorTokenBuild.ts
@@ -45,6 +45,7 @@ const functionalColorFiles = {
     `tokens/functional/color/diff-light.json`,
     `tokens/functional/color/checks-light.json`,
     `tokens/functional/color/ansi-light.json`,
+    `tokens/functional/color/shadow.json`,
     `tokens/functional/color/scales.json`,
   ],
   dark: [
@@ -56,6 +57,7 @@ const functionalColorFiles = {
     `tokens/functional/color/diff-dark.json`,
     `tokens/functional/color/checks-dark.json`,
     `tokens/functional/color/ansi-dark.json`,
+    `tokens/functional/color/shadow.json`,
     `tokens/functional/color/scales.json`,
   ]
 }
@@ -133,7 +135,8 @@ getInputFiles(inputPath, ignoreDirs, { baseDir, functionalDir }).then(inputFiles
 //  convert shadows
 console.log("⚠️ Shadows are not implemented in tokens correctly")
 StyleDictionary
-  .extend(getStyleDictionaryConfig(`shadow/shadow`, [`${inputPath}/${baseDir}/shadow/shadow.json`, `${inputPath}/${functionalDir}/shadow/shadow.json`], [`${inputPath}/${baseDir}/shadow/shadow.json`, `${inputPath}/${baseDir}/color/light.json`, `${inputPath}/${functionalDir}/color/primitives-light.json`], { outputReferences: true }))
+  // .extend(getStyleDictionaryConfig(`shadow/shadow`, [`${inputPath}/${baseDir}/shadow/shadow.json`, `${inputPath}/${functionalDir}/shadow/shadow.json`], [`${inputPath}/${baseDir}/shadow/shadow.json`, `${inputPath}/${baseDir}/color/light.json`, `${inputPath}/${functionalDir}/color/shadow.json`], { outputReferences: true }))
+  .extend(getStyleDictionaryConfig(`shadow/shadow`, [`${inputPath}/${functionalDir}/shadow/shadow.json`], [`${inputPath}/${baseDir}/shadow/shadow.json`], { outputReferences: false }))
   .buildAllPlatforms()
 
 /**
@@ -143,7 +146,7 @@ const deprecatedBuilds = [
   ['color', themes[0][1], themes[0][2]], // light mode
   ['size', [`${inputPath}/${functionalDir}/size/*.json`], [`${inputPath}/${baseDir}/size/*.json`]],
   ['typography', [`${inputPath}/${functionalDir}/typography/*.json`], [`${inputPath}/${baseDir}/typography/*.json`]],
-  ['shadow', [`${inputPath}/${functionalDir}/shadow/*.json`], [`${inputPath}/${baseDir}/shadow/*.json`, ...themes[0][1], ...themes[0][2]]],
+  ['shadow', [`${inputPath}/${functionalDir}/shadow/*.json`], [`${inputPath}/${baseDir}/shadow/*.json`, `${inputPath}/${functionalDir}/color/shadow.json`, ...themes[0][1], ...themes[0][2]]],
 ]
 // get config
 const deprecatedConfig = (outputName, source, include, buildPath) => ({
@@ -201,7 +204,7 @@ const figmaBuilds = [
   ...themes,
   ['size', [`${inputPath}/${functionalDir}/size/*.json`], [`${inputPath}/${baseDir}/size/*.json`]],
   ['typography', [`${inputPath}/${functionalDir}/typography/*.json`], [`${inputPath}/${baseDir}/typography/*.json`]],
-  ['shadow', [`${inputPath}/${functionalDir}/shadow/*.json`], [`${inputPath}/${baseDir}/shadow/*.json`, ...themes[0][1], ...themes[0][2]]],
+  ['shadow', [`${inputPath}/${functionalDir}/shadow/*.json`], [`${inputPath}/${baseDir}/shadow/*.json`, `${inputPath}/${functionalDir}/color/shadow.json`, ...themes[0][1], ...themes[0][2]]],
 ]
 for (const [name, source, include] of figmaBuilds) {
   //

diff --git a/tokens/base/shadow/shadow.json b/tokens/base/shadow/shadow.json
@@ -1,4 +1,28 @@
 {
+  "color": {
+    "shadow": {
+      "small": {
+        "$value": "#010409",
+        "$type": "color",
+        "alpha": 0.5
+      },
+      "medium": {
+        "$value": "#010409",
+        "$type": "color",
+        "alpha": 0.5
+      },
+      "large": {
+        "$value": "#010409",
+        "$type": "color",
+        "alpha": 0.5
+      },
+      "extraLarge": {
+        "$value": "#010409",
+        "$type": "color",
+        "alpha": 0.5
+      }
+    }
+  },
   "base": {
     "shadow": {
       "small": {

diff --git a/tokens/functional/color/primitives-dark.json b/tokens/functional/color/primitives-dark.json
@@ -251,38 +251,6 @@
         "alpha": 0.15
       }
     },
-    "shadow": {
-      "small": {
-        "$value": "{base.color.scale.black}",
-        "alpha": 0.96,
-        "$type": "color"
-      },
-      "medium": {
-        "$value": "{base.color.scale.gray.4}",
-        "alpha": 0.85,
-        "$type": "color"
-      },
-      "large": {
-        "$value": "{base.color.scale.gray.4}",
-        "alpha": 0.8,
-        "$type": "color"
-      },
-      "extraLarge": {
-        "$value": "{base.color.scale.gray.4}",
-        "alpha": 0.7,
-        "$type": "color"
-      },
-      "highlight": {
-        "$value": "{base.color.scale.white}",
-        "alpha": 0.25,
-        "$type": "color"
-      },
-      "inset": {
-        "$value": "{base.color.scale.gray.2}",
-        "alpha": 0,
-        "$type": "color"
-      }
-    },
     "focus": {
       "$value": "{base.color.scale.blue.5}",
       "$type": "color"

diff --git a/tokens/functional/color/primitives-light.json b/tokens/functional/color/primitives-light.json
@@ -242,38 +242,38 @@
         "$type": "color"
       }
     },
-    "shadow": {
-      "small": {
-        "$value": "{base.color.scale.black}",
-        "alpha": 0.96,
-        "$type": "color"
-      },
-      "medium": {
-        "$value": "{base.color.scale.gray.4}",
-        "alpha": 0.85,
-        "$type": "color"
-      },
-      "large": {
-        "$value": "{base.color.scale.gray.4}",
-        "alpha": 0.8,
-        "$type": "color"
-      },
-      "extraLarge": {
-        "$value": "{base.color.scale.gray.4}",
-        "alpha": 0.7,
-        "$type": "color"
-      },
-      "highlight": {
-        "$value": "{base.color.scale.white}",
-        "alpha": 0.75,
-        "$type": "color"
-      },
-      "inset": {
-        "$value": "{base.color.scale.gray.2}",
-        "alpha": 0.8,
-        "$type": "color"
-      }
-    },
+    // "shadow": {
+    //   "small": {
+    //     "$value": "{base.color.scale.black}",
+    //     "alpha": 0.96,
+    //     "$type": "color"
+    //   },
+    //   "medium": {
+    //     "$value": "{base.color.scale.gray.4}",
+    //     "alpha": 0.85,
+    //     "$type": "color"
+    //   },
+    //   "large": {
+    //     "$value": "{base.color.scale.gray.4}",
+    //     "alpha": 0.8,
+    //     "$type": "color"
+    //   },
+    //   "extraLarge": {
+    //     "$value": "{base.color.scale.gray.4}",
+    //     "alpha": 0.7,
+    //     "$type": "color"
+    //   },
+    //   "highlight": {
+    //     "$value": "{base.color.scale.white}",
+    //     "alpha": 0.75,
+    //     "$type": "color"
+    //   },
+    //   "inset": {
+    //     "$value": "{base.color.scale.gray.2}",
+    //     "alpha": 0.8,
+    //     "$type": "color"
+    //   }
+    // },
     "focus": {
       "$value": "{base.color.scale.blue.5}",
       "$type": "color"

diff --git a/tokens/functional/color/shadow.json b/tokens/functional/color/shadow.json
@@ -0,0 +1,36 @@
+{
+  "color": {
+    "shadow": {
+      "small": {
+        "$value": "{base.color.scale.black}",
+        "alpha": 0.96,
+        "$type": "color"
+      },
+      "medium": {
+        "$value": "{base.color.scale.gray.4}",
+        "alpha": 0.85,
+        "$type": "color"
+      },
+      "large": {
+        "$value": "{base.color.scale.gray.4}",
+        "alpha": 0.8,
+        "$type": "color"
+      },
+      "extraLarge": {
+        "$value": "{base.color.scale.gray.4}",
+        "alpha": 0.7,
+        "$type": "color"
+      },
+      "highlight": {
+        "$value": "{base.color.scale.white}",
+        "alpha": 0.25,
+        "$type": "color"
+      },
+      "inset": {
+        "$value": "{base.color.scale.gray.2}",
+        "alpha": 0,
+        "$type": "color"
+      }
+    }
+  }
+}
diff --git a/tokens/functional/shadow/shadow.json b/tokens/functional/shadow/shadow.json
@@ -12,42 +12,42 @@
     "extraLarge": {
       "$value": "{base.shadow.extraLarge}"
     },
-    "focus": {
-      "$value": {
-        "color": "{color.focus}",
-        "x": "0px",
-        "y": "0px",
-        "blur": "0px",
-        "spread": "3px"
-      },
-      "$type": "shadow"
-    },
-    "primer": {
-      "shadow": {
-        "highlight": {
-          "$value": {
-            "color": "{color.shadow.highlight}",
-            "x": "0px",
-            "y": "1px",
-            "blur": "0px",
-            "spread": "3px",
-            "inset": true
-          },
-          "$type": "shadow"
-        },
-        "inset": {
-          "$value": {
-            "color": "{color.shadow.inset}",
-            "x": "0px",
-            "y": "1px",
-            "blur": "0px",
-            "spread": "3px",
-            "inset": true
-          },
-          "$type": "shadow"
-        },
-        "focus": {"$value": "{shadow.focus}"}
-      }
-    }
+    // "focus": {
+    //   "$value": {
+    //     "color": "{color.focus}",
+    //     "x": "0px",
+    //     "y": "0px",
+    //     "blur": "0px",
+    //     "spread": "3px"
+    //   },
+    //   "$type": "shadow"
+    // },
+    // "primer": {
+    //   "shadow": {
+    //     "highlight": {
+    //       "$value": {
+    //         "color": "{color.shadow.highlight}",
+    //         "x": "0px",
+    //         "y": "1px",
+    //         "blur": "0px",
+    //         "spread": "3px",
+    //         "inset": true
+    //       },
+    //       "$type": "shadow"
+    //     },
+    //     "inset": {
+    //       "$value": {
+    //         "color": "{color.shadow.inset}",
+    //         "x": "0px",
+    //         "y": "1px",
+    //         "blur": "0px",
+    //         "spread": "3px",
+    //         "inset": true
+    //       },
+    //       "$type": "shadow"
+    //     },
+    //     "focus": {"$value": "{shadow.focus}"}
+    //   }
+    // }
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -283,9 +283,9 @@
     "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/runtime@^7.10.4", "@babel/runtime@^7.5.5":
-  "integrity" "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg=="
-  "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz"
-  "version" "7.17.9"
+  "integrity" "sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA=="
+  "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.4.tgz"
+  "version" "7.19.4"
   dependencies:
     "regenerator-runtime" "^0.13.4"
 
@@ -2469,9 +2469,9 @@
     "ci-info" "^3.2.0"
 
 "is-core-module@^2.5.0", "is-core-module@^2.8.1":
-  "integrity" "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA=="
-  "resolved" "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz"
-  "version" "2.8.1"
+  "integrity" "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg=="
+  "resolved" "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz"
+  "version" "2.10.0"
   dependencies:
     "has" "^1.0.3"