shadows with shadow colors defined in shadow.json so NOT changing per…

… color mode
primer · Oct 14, 2022 · 22c5e7f · 22c5e7f
1 parent e604b05
commit 22c5e7f
Show file tree

Hide file tree

Showing 13 changed files with 174 additions and 14 deletions.
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
+}
diff --git a/config/platforms/css.ts b/config/platforms/css.ts
@@ -10,7 +10,7 @@ export const platformCss: PlatformInitializer = (
 ): StyleDictionary.Platform => ({
   prefix,
   buildPath: `${buildPath}/css/`,
-  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/docJson.ts b/config/platforms/docJson.ts
@@ -4,7 +4,7 @@ import {PlatformInitializer} from '../../@types/PlatformInitializer'
 export const platformDocJson: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => ({
   prefix,
   buildPath: `${buildPath}/docs/`,
-  transforms: ['color/hex6', 'color/hexAlpha'],
+  transforms: ['color/hex6', '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: `${buildPath}/js/`,
-  transforms: ['name/cti/camel', 'color/hex6', 'color/rgbAlpha'],
+  transforms: ['name/cti/camel', 'color/hex6', 'color/hexAlpha', 'shadow/css'],
   options: {
     basePxFontSize: 16
   },
@@ -15,7 +15,7 @@ export const platformJs: PlatformInitializer = (outputFile, prefix, buildPath):
       destination: outputFile,
       filter: isSource,
       options: {
-        unwrapFirstLevel: true
+        unwrapFirstLevel: false
       }
     }
   ]

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: `${buildPath}/json/`,
-  transforms: ['color/hex6', 'color/hexAlpha'],
+  transforms: ['color/hex6', '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: `${buildPath}/scss/`,
-    transforms: ['name/cti/kebab', 'color/hex6', 'color/hexAlpha'],
+    transforms: ['name/cti/kebab', 'color/hex6', 'color/hexAlpha', 'shadow/css'],
     options: {
       basePxFontSize: 16
     },

diff --git a/config/platforms/typesDefinitions.ts b/config/platforms/typesDefinitions.ts
@@ -10,14 +10,14 @@ export const platformTypeDefinitions: PlatformInitializer = (
 ): StyleDictionary.Platform => ({
   prefix,
   buildPath: `${buildPath}/ts/@types/`,
-  transforms: ['name/cti/camel', 'color/hex6', 'color/hexAlpha'],
+  transforms: ['name/cti/camel', 'color/hex6', 'color/hexAlpha', 'shadow/css'],
   files: [
     {
       format: 'typescript/export-definition',
       destination: `${capitalize(outputFile)}DesignTokens.d.ts`,
       filter: isSource,
       options: {
-        unwrapFirstLevel: true,
+        unwrapFirstLevel: false,
         tokenTypesPath: './config/types/',
         moduleName: `${capitalize(outputFile)}DesignTokens`
       }

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: `${buildPath}/ts/`,
-  transforms: ['name/cti/camel', 'color/hex6', 'color/hexAlpha'],
+  transforms: ['name/cti/camel', 'color/hex6', 'color/hexAlpha', 'shadow/css'],
   options: {
     basePxFontSize: 16
   },
@@ -15,7 +15,7 @@ export const platformTs: PlatformInitializer = (outputFile, prefix, buildPath):
       destination: outputFile,
       filter: isSource,
       options: {
-        unwrapFirstLevel: true
+        unwrapFirstLevel: false
       }
     }
   ]

diff --git a/config/tranformers/shadow-to-css.ts b/config/tranformers/shadow-to-css.ts
@@ -0,0 +1,12 @@
+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',
+  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
@@ -11,6 +11,7 @@ import {platformDeprecatedJson} from '../config/platforms/deprecatedJson'
 import {colorToHexAlpha} from '../config/tranformers/color-to-hex-alpha'
 import {colorToRgbAlpha} from '../config/tranformers/color-to-rgb-alpha'
 import {colorToHex6} from '../config/tranformers/color-to-hex6'
+import {shadowToCss} from '../config/tranformers/shadow-to-css'
 import {jsonDeprecated} from '../config/tranformers/json-deprecated'
 import {scssMixinCssVariables} from '../config/formats/scss-mixin-css-variables'
 import {javascriptCommonJs} from '../config/formats/javascript-commonJs'
@@ -106,7 +107,8 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
     transform: {
       'color/rgbAlpha': colorToRgbAlpha,
       'color/hexAlpha': colorToHexAlpha,
-      'color/hex6': colorToHex6
+      'color/hex6': colorToHex6,
+      'shadow/css': shadowToCss
     },
     platforms: {
       css: platformCss(`${outputName}.css`, options.prefix, options.buildPath),
@@ -133,12 +135,21 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
   }
   // 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')
+  // console.log('⚠️ Shadows are not implemented in tokens correctly')
+  StyleDictionary.extend(
+    getStyleDictionaryConfig(
+      `shadow/shadow`,
+      [`./tokens/base/shadow/shadow.json`],
+      [`./tokens/functional/shadow/shadow.json`],
+      buildOptions
+    )
+  ).buildAllPlatforms()
   /**
    * build deprecated.json
    */
   const deprecatedBuilds: [string, string[], string[]][] = [
-    ['color', themes[0][1], themes[0][2]] // light mode
+    ['color', themes[0][1], themes[0][2]], // light mode
+    [`shadow`, [`./tokens/base/shadow/shadow.json`], [`./tokens/functional/shadow/shadow.json`]]
   ]
   // get config
   const deprecatedConfig: StyleDictionaryConfigGenerator = (outputName, source, include, options) => ({
@@ -152,7 +163,8 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
       'color/hexAlpha': colorToHexAlpha,
       'color/hex6': colorToHex6,
       'json/deprecated': jsonDeprecated,
-      'name/pathToDotNotation': namePathToDotNotation
+      'name/pathToDotNotation': namePathToDotNotation,
+      'shadow/css': shadowToCss
     },
     platforms: {
       deprecated: platformDeprecatedJson(`${outputName}.json`, options.prefix, options.buildPath),

diff --git a/tokens/base/shadow/shadow.json b/tokens/base/shadow/shadow.json
@@ -0,0 +1,66 @@
+{
+  "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": {
+        "$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/shadow/shadow.json b/tokens/functional/shadow/shadow.json
@@ -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}"}
+    //   }
+    // }
+  }
+}