From 22c5e7fb4ff0a8b0e391aa2c61629b74bd470e20 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Fri, 14 Oct 2022 13:59:53 +0200 Subject: [PATCH] shadows with shadow colors defined in shadow.json so NOT changing per color mode --- @types/TokenShadow.d.ts | 8 ++++ config/platforms/css.ts | 2 +- config/platforms/docJson.ts | 2 +- config/platforms/javascript.ts | 4 +- config/platforms/json.ts | 2 +- config/platforms/scss.ts | 2 +- config/platforms/typesDefinitions.ts | 4 +- config/platforms/typescript.ts | 4 +- config/tranformers/shadow-to-css.ts | 12 +++++ config/types/Shadow.d.ts | 5 +++ script/tempColorTokenBuild.ts | 20 +++++++-- tokens/base/shadow/shadow.json | 66 ++++++++++++++++++++++++++++ tokens/functional/shadow/shadow.json | 57 ++++++++++++++++++++++++ 13 files changed, 174 insertions(+), 14 deletions(-) create mode 100644 @types/TokenShadow.d.ts create mode 100644 config/tranformers/shadow-to-css.ts create mode 100644 config/types/Shadow.d.ts create mode 100644 tokens/base/shadow/shadow.json create mode 100644 tokens/functional/shadow/shadow.json diff --git a/@types/TokenShadow.d.ts b/@types/TokenShadow.d.ts new file mode 100644 index 000000000..644f85369 --- /dev/null +++ b/@types/TokenShadow.d.ts @@ -0,0 +1,8 @@ +export type TokenShadow = { + color: string + x: string + y: string + blur: string + spread: string + inset?: boolean +} \ No newline at end of file diff --git a/config/platforms/css.ts b/config/platforms/css.ts index 5f240ccfe..96ca6a757 100644 --- 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 index 04ebb67eb..ba5b0ac0c 100644 --- 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 index e5aaccbd0..5325de249 100644 --- 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 index bbac0dcdc..9a63d393d 100644 --- 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 index e30b20aac..efd9ed572 100644 --- 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 index 6f0de9b9f..3b010a7bc 100644 --- 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 index 329d45298..5edb11a8c 100644 --- 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 new file mode 100644 index 000000000..aef39da86 --- /dev/null +++ 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}` + } +} \ No newline at end of file diff --git a/config/types/Shadow.d.ts b/config/types/Shadow.d.ts new file mode 100644 index 000000000..2042349cd --- /dev/null +++ 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 index a46b9259a..a7335dbf7 100644 --- 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 new file mode 100644 index 000000000..e464af356 --- /dev/null +++ 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 new file mode 100644 index 000000000..1f9cb9892 --- /dev/null +++ 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}"} + // } + // } + } +}