protoype with referenced color to support color modes

primer · Oct 24, 2022 · 580e036 · 580e036
1 parent 22c5e7f
commit 580e036
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 34 deletions.
diff --git a/build.js b/build.js
@@ -488,7 +488,7 @@ function _init() {
   const outputPath = 'tokens-v2-private'
   //build all tokens
   buildPrimitives({
-    source: [`tokens/**/*.json`, `!tokens/**/size-*.json`, `!tokens/**/color/*.json`],
+    source: [`tokens/**/*.json`, `!tokens/**/size-*.json`, `!tokens/**/color/*.json`, `!tokens/**/shadow/*.json`],
     outputPath
   })
 
@@ -547,7 +547,7 @@ function _init() {
 
   //build docs data
   buildPrimitives({
-    source: [`tokens/**/*.json`, `!tokens/**/color/*.json`],
+    source: [`tokens/**/*.json`, `!tokens/**/color/*.json`, `!tokens/**/shadow/*.json`],
     outputPath,
     platforms: {
       docs: {

diff --git a/config/platforms/css.ts b/config/platforms/css.ts
@@ -20,7 +20,7 @@ export const platformCss: PlatformInitializer = (
       format: `css/variables`,
       filter: isSource,
       options: {
-        outputReferences: false
+        outputReferences: true
       }
     }
   ]

diff --git a/config/tranformers/shadow-to-css.ts b/config/tranformers/shadow-to-css.ts
@@ -1,12 +1,14 @@
 import StyleDictionary from 'style-dictionary'
-import { TokenShadow } from '../../@types/TokenShadow'
+import {TokenShadow} from '../../@types/TokenShadow'
 
 export const shadowToCss: StyleDictionary.Transform = {
   type: `value`,
   transitive: true,
-  matcher: (token: StyleDictionary.TransformedToken) => token.$type === 'shadow',
+  matcher: (token: StyleDictionary.TransformedToken) => token.$type === 'shadow' && typeof token.value !== 'string',
   transformer: ({value}: {value: TokenShadow}) => {
     /* inset? | offset-x | offset-y | blur-radius | spread-radius | color */
-    return `${value.inset ? "inset " : ""}${value.x || 0} ${value.y || 0} ${value.blur || 0} ${value.spread || 0} ${value.color}`
+    return `${value.inset ? 'inset ' : ''}${value.x || 0} ${value.y || 0} ${value.blur || 0} ${value.spread || 0} ${
+      value.color
+    }`
   }
-}
+}
diff --git a/script/tempColorTokenBuild.ts b/script/tempColorTokenBuild.ts
@@ -32,6 +32,7 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
       `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: [
@@ -43,6 +44,7 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
       `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`
     ]
   }
@@ -139,8 +141,8 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
   StyleDictionary.extend(
     getStyleDictionaryConfig(
       `shadow/shadow`,
-      [`./tokens/base/shadow/shadow.json`],
-      [`./tokens/functional/shadow/shadow.json`],
+      [`./tokens/functional/shadow/shadow.json`, `./tokens/base/shadow/shadow.json`],
+      [`./tokens/base/color/light.json`, `./tokens/functional/color/shadow.json`],
       buildOptions
     )
   ).buildAllPlatforms()
@@ -149,7 +151,11 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
    */
   const deprecatedBuilds: [string, string[], string[]][] = [
     ['color', themes[0][1], themes[0][2]], // light mode
-    [`shadow`, [`./tokens/base/shadow/shadow.json`], [`./tokens/functional/shadow/shadow.json`]]
+    [
+      `shadow`,
+      [`./tokens/functional/shadow/shadow.json`],
+      [`./tokens/base/shadow/shadow.json`, `./tokens/base/color/light.json`, `./tokens/functional/color/shadow.json`]
+    ]
   ]
   // get config
   const deprecatedConfig: StyleDictionaryConfigGenerator = (outputName, source, include, options) => ({

diff --git a/tokens/base/shadow/shadow.json b/tokens/base/shadow/shadow.json
@@ -1,28 +1,4 @@
 {
-  "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/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"
+      }
+    }
+  }
+}