shadows with with referenced color to support color modes

primer · Oct 31, 2022 · ae95e4c · ae95e4c
1 parent 56108a9
commit ae95e4c
Show file tree

Hide file tree

Showing 16 changed files with 200 additions and 13 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
@@ -10,7 +10,7 @@ export const platformCss: PlatformInitializer = (
 ): StyleDictionary.Platform => ({
   prefix,
   buildPath,
-  transforms: ['name/cti/kebab', 'color/hex', 'color/hexAlpha'],
+  transforms: ['name/cti/kebab', 'color/hex', 'color/hexAlpha', 'shadow/css'],
   options: {
     basePxFontSize: 16
   },
@@ -20,7 +20,7 @@ export const platformCss: PlatformInitializer = (
       format: `css/variables`,
       filter: isSource,
       options: {
-        outputReferences: false
+        outputReferences: true
       }
     }
   ]

diff --git a/config/platforms/docJson.ts b/config/platforms/docJson.ts
@@ -5,7 +5,7 @@ import {isSource} from '../filters/isSource'
 export const platformDocJson: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => ({
   prefix,
   buildPath,
-  transforms: ['color/hex', 'color/hexAlpha'],
+  transforms: ['color/hex', 'color/hexAlpha', 'shadow/css'],
   options: {
     basePxFontSize: 16
   },

diff --git a/config/platforms/javascript.ts b/config/platforms/javascript.ts
@@ -5,7 +5,7 @@ import {isSource} from '../filters/isSource'
 export const platformJs: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => ({
   prefix,
   buildPath,
-  transforms: ['name/cti/camel', 'color/hex', 'color/rgbAlpha'],
+  transforms: ['name/cti/camel', 'color/hex', 'color/rgbAlpha', 'shadow/css'],
   options: {
     basePxFontSize: 16
   },

diff --git a/config/platforms/json.ts b/config/platforms/json.ts
@@ -5,7 +5,7 @@ import {isSource} from '../filters/isSource'
 export const platformJson: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => ({
   prefix,
   buildPath,
-  transforms: ['color/hex', 'color/hexAlpha'],
+  transforms: ['color/hex', 'color/hexAlpha', 'shadow/css'],
   options: {
     basePxFontSize: 16
   },

diff --git a/config/platforms/scss.ts b/config/platforms/scss.ts
@@ -18,7 +18,7 @@ export const platformScss: PlatformInitializer = (outputFile, prefix, buildPath)
   return {
     prefix,
     buildPath,
-    transforms: ['name/cti/kebab', 'color/hex', 'color/hexAlpha'],
+    transforms: ['name/cti/kebab', 'color/hex', 'color/hexAlpha', 'shadow/css'],
     options: {
       basePxFontSize: 16
     },

diff --git a/config/platforms/typesDefinitions.ts b/config/platforms/typesDefinitions.ts
@@ -10,7 +10,7 @@ export const platformTypeDefinitions: PlatformInitializer = (
 ): StyleDictionary.Platform => ({
   prefix,
   buildPath,
-  transforms: ['name/cti/camel', 'color/hex', 'color/hexAlpha'],
+  transforms: ['name/cti/camel', 'color/hex', 'color/hexAlpha', 'shadow/css'],
   files: [
     {
       format: 'typescript/export-definition',

diff --git a/config/platforms/typescript.ts b/config/platforms/typescript.ts
@@ -5,7 +5,7 @@ import {isSource} from '../filters/isSource'
 export const platformTs: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => ({
   prefix,
   buildPath,
-  transforms: ['name/cti/camel', 'color/hex', 'color/hexAlpha'],
+  transforms: ['name/cti/camel', 'color/hex', 'color/hexAlpha', 'shadow/css'],
   options: {
     basePxFontSize: 16
   },

diff --git a/config/primer-style-dictionary.ts b/config/primer-style-dictionary.ts
@@ -5,6 +5,7 @@ import {colorToRgbAlpha} from './transformers/color-to-rgb-alpha'
 import {colorToHex} from './transformers/color-to-hex'
 import {jsonDeprecated} from './transformers/json-deprecated'
 import {namePathToDotNotation} from './transformers/name-path-to-dot-notation'
+import {shadowToCss} from './transformers/shadow-to-css'
 import {scssMixinCssVariables} from './formats/scss-mixin-css-variables'
 import {javascriptCommonJs} from './formats/javascript-commonJs'
 import {javascriptEsm} from './formats/javascript-esm'
@@ -75,6 +76,11 @@ StyleDictionary.registerTransform({
   ...namePathToDotNotation
 })
 
+StyleDictionary.registerTransform({
+  name: 'shadow/css',
+  ...shadowToCss
+})
+
 /**
  * @name {@link PrimerStyleDictionary}
  * @description Returns style dictionary object with primer preset that includes parsers, formats and transformers

diff --git a/config/transformers/shadow-to-css.ts b/config/transformers/shadow-to-css.ts
@@ -0,0 +1,14 @@
+import StyleDictionary from 'style-dictionary'
+import {TokenShadow} from '../../types/TokenShadow'
+
+export const shadowToCss: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  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
+    }`
+  }
+}
diff --git a/config/types/Shadow.d.ts b/config/types/Shadow.d.ts
@@ -0,0 +1,5 @@
+/**
+ * @description a css shadow
+ * @format inset? | offset-x | offset-y | blur-radius? | spread-radius? | color?
+ */
+type Shadow = string
diff --git a/script/tempColorTokenBuild.ts b/script/tempColorTokenBuild.ts
@@ -115,9 +115,18 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
       })
     ).buildAllPlatforms()
   }
-  // TODO: Remove once shadows that used to be in colors are implemented
-  // eslint-disable-next-line no-console
-  console.log('⚠️ Shadows are not implemented in tokens correctly')
+
+  /**
+   * build shadow tokens
+   */
+  PrimerStyleDictionary.extend(
+    getStyleDictionaryConfig(
+      `shadow/shadow`,
+      [`./tokens/functional/shadow/shadow.json5`, `./tokens/base/shadow/shadow.json5`],
+      [`./tokens/base/color/light/light.json5`, `./tokens/functional/color/shadow.json5`],
+      buildOptions
+    )
+  ).buildAllPlatforms()
 
   /**
    * build deprecated.json
@@ -128,6 +137,16 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
       filename: 'color',
       source: [...themes[0].source, ...themes[0].include],
       include: themes[0].include
+    },
+    {
+      // light mode
+      filename: 'shadow',
+      source: [`./tokens/functional/shadow/shadow.json`],
+      include: [
+        `./tokens/base/shadow/shadow.json`,
+        `./tokens/base/color/light.json`,
+        `./tokens/functional/color/shadow.json`
+      ]
     }
   ]
   //

diff --git a/tokens/base/shadow/shadow.json5 b/tokens/base/shadow/shadow.json5
@@ -0,0 +1,42 @@
+{
+  "base": {
+    "shadow": {
+      "small": {
+        "$value": {
+          "color": "{color.shadow.small}",
+          "x": "0px",
+          "y": "1px",
+          "blur": "0px"
+        },
+        "$type": "shadow"
+      },
+      "medium": {
+        "$value": {
+          "color": "{color.shadow.medium}",
+          "x": "0px",
+          "y": "3px",
+          "blur": "6px"
+        },
+        "$type": "shadow"
+      },
+      "large": {
+        "$value": {
+          "color": "{color.shadow.large}",
+          "x": "0px",
+          "y": "8px",
+          "blur": "24px"
+        },
+        "$type": "shadow"
+      },
+      "extraLarge": {
+        "$value": {
+          "color": "{color.shadow.extraLarge}",
+          "x": "0px",
+          "y": "12px",
+          "blur": "28px"
+        },
+        "$type": "shadow"
+      }
+    }
+  }
+}
diff --git a/tokens/functional/color/shadow.json5 b/tokens/functional/color/shadow.json5
@@ -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.json5 b/tokens/functional/shadow/shadow.json5
@@ -0,0 +1,57 @@
+{
+  "shadow": {
+    "small": {
+      "$value": "{base.shadow.small}",
+      "$type": "shadow"
+    },
+    "medium": {
+      "$value": "{base.shadow.medium}",
+      "$type": "shadow"
+    },
+    "large": {
+      "$value": "{base.shadow.large}",
+      "$type": "shadow"
+    },
+    "extraLarge": {
+      "$value": "{base.shadow.extraLarge}",
+      "$type": "shadow"
+    },
+    // "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/types/TokenShadow.d.ts b/types/TokenShadow.d.ts
@@ -0,0 +1,8 @@
+export type TokenShadow = {
+  color: string
+  x: string
+  y: string
+  blur: string
+  spread: string
+  inset?: boolean
+}