From e619ca9562d825748b7f51023cfeddc8b63322ce Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Mon, 14 Nov 2022 14:46:07 +0100 Subject: [PATCH] Style dictionary shadow build (#370) * shadows with with referenced color to support color modes Co-authored-by: Rez --- build.js | 4 +- config/PrimerStyleDictionary.ts | 14 +- config/filters/isShadow.test.ts | 18 + config/filters/isShadow.ts | 10 + config/platforms/css.ts | 2 +- config/platforms/docJson.ts | 2 +- config/platforms/javascript.ts | 2 +- config/platforms/json.ts | 2 +- config/platforms/scss.ts | 2 +- config/platforms/typeDefinitions.ts | 2 +- config/platforms/typescript.ts | 2 +- config/transformers/index.ts | 1 + config/transformers/shadowToCss.test.ts | 170 ++++++++ config/transformers/shadowToCss.ts | 46 +++ config/types/Shadow.d.ts | 5 + script/tempColorTokenBuild.ts | 48 ++- tokens/functional/color/scales.json5 | 493 ++++++++++++++++++++++++ tokens/functional/shadow/dark.json5 | 93 +++++ tokens/functional/shadow/light.json5 | 100 +++++ types/ShadowTokenValue.d.ts | 14 + 20 files changed, 1002 insertions(+), 28 deletions(-) create mode 100644 config/filters/isShadow.test.ts create mode 100644 config/filters/isShadow.ts create mode 100644 config/transformers/shadowToCss.test.ts create mode 100644 config/transformers/shadowToCss.ts create mode 100644 config/types/Shadow.d.ts create mode 100644 tokens/functional/color/scales.json5 create mode 100644 tokens/functional/shadow/dark.json5 create mode 100644 tokens/functional/shadow/light.json5 create mode 100644 types/ShadowTokenValue.d.ts diff --git a/build.js b/build.js index 6afeaa5cd..ce29c7a7c 100644 --- 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/PrimerStyleDictionary.ts b/config/PrimerStyleDictionary.ts index 3f9961d42..4ced6ade1 100644 --- a/config/PrimerStyleDictionary.ts +++ b/config/PrimerStyleDictionary.ts @@ -1,6 +1,13 @@ import StyleDictionary from 'style-dictionary' import {w3cJsonParser} from './parsers' -import {colorToHexAlpha, colorToRgbAlpha, colorToHex, jsonDeprecated, namePathToDotNotation} from './transformers' +import { + colorToHexAlpha, + colorToRgbAlpha, + colorToHex, + jsonDeprecated, + shadowToCss, + namePathToDotNotation +} from './transformers' import { scssMixinCssVariables, javascriptCommonJs, @@ -73,6 +80,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/filters/isShadow.test.ts b/config/filters/isShadow.test.ts new file mode 100644 index 000000000..4eaebc69b --- /dev/null +++ b/config/filters/isShadow.test.ts @@ -0,0 +1,18 @@ +import {getMockToken} from '~/src/test-utilities' +import {isShadow} from './isShadow' + +describe('Filter: isShadow', () => { + it('returns true if $type property is `shadow`', () => { + expect(isShadow(getMockToken({$type: 'shadow'}))).toStrictEqual(true) + }) + + it('returns false if $type property is not `shadow`', () => { + expect(isShadow(getMockToken({$type: 'pumpkin'}))).toStrictEqual(false) + }) + + it('returns false if $type property is falsy', () => { + expect(isShadow(getMockToken({$type: false}))).toStrictEqual(false) + expect(isShadow(getMockToken({$type: undefined}))).toStrictEqual(false) + expect(isShadow(getMockToken({$type: null}))).toStrictEqual(false) + }) +}) diff --git a/config/filters/isShadow.ts b/config/filters/isShadow.ts new file mode 100644 index 000000000..c72a67c86 --- /dev/null +++ b/config/filters/isShadow.ts @@ -0,0 +1,10 @@ +import StyleDictionary from 'style-dictionary' + +/** + * @description Checks if token is of $type `shadow` + * @param arguments [StyleDictionary.TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts) + * @returns boolean + */ +export const isShadow = (token: StyleDictionary.TransformedToken): boolean => { + return token.$type === 'shadow' +} diff --git a/config/platforms/css.ts b/config/platforms/css.ts index 09fc45053..1181b4fbf 100644 --- a/config/platforms/css.ts +++ b/config/platforms/css.ts @@ -5,7 +5,7 @@ import {isSource} from '~/config/filters' export const css: PlatformInitializer = (outputFile, prefix, buildPath, _options): 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 }, diff --git a/config/platforms/docJson.ts b/config/platforms/docJson.ts index 41f8d9df5..835772aa1 100644 --- a/config/platforms/docJson.ts +++ b/config/platforms/docJson.ts @@ -5,7 +5,7 @@ import {isSource} from '~/config/filters' export const docJson: 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 index fe665918f..2e7d9a5f2 100644 --- a/config/platforms/javascript.ts +++ b/config/platforms/javascript.ts @@ -5,7 +5,7 @@ import {isSource} from '~/config/filters' export const javascript: 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 index fe5ea5d8a..9a63019f1 100644 --- a/config/platforms/json.ts +++ b/config/platforms/json.ts @@ -5,7 +5,7 @@ import {isSource} from '~/config/filters' export const json: 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 index d72e96759..5fc098277 100644 --- a/config/platforms/scss.ts +++ b/config/platforms/scss.ts @@ -18,7 +18,7 @@ export const scss: PlatformInitializer = (outputFile, prefix, buildPath): StyleD 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/typeDefinitions.ts b/config/platforms/typeDefinitions.ts index 123e73e0d..26c7faa39 100644 --- a/config/platforms/typeDefinitions.ts +++ b/config/platforms/typeDefinitions.ts @@ -6,7 +6,7 @@ import {upperCaseFirstCharacter} from '~/config/utilities' export const typeDefinitions: 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'], files: [ { format: 'typescript/export-definition', diff --git a/config/platforms/typescript.ts b/config/platforms/typescript.ts index 735097f00..882cbcd26 100644 --- a/config/platforms/typescript.ts +++ b/config/platforms/typescript.ts @@ -5,7 +5,7 @@ import {isSource} from '~/config/filters' export const typescript: 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/transformers/index.ts b/config/transformers/index.ts index ff5603c6a..3ecbc8d3c 100644 --- a/config/transformers/index.ts +++ b/config/transformers/index.ts @@ -1,3 +1,4 @@ +export {shadowToCss} from './shadowToCss' export {colorToHex} from './colorToHex' export {colorToHexAlpha} from './colorToHexAlpha' export {colorToRgbAlpha} from './colorToRgbAlpha' diff --git a/config/transformers/shadowToCss.test.ts b/config/transformers/shadowToCss.test.ts new file mode 100644 index 000000000..170334dd3 --- /dev/null +++ b/config/transformers/shadowToCss.test.ts @@ -0,0 +1,170 @@ +import {getMockToken} from '~/src/test-utilities' +import {shadowToCss} from './shadowToCss' + +describe('Transformer: shadowToCss', () => { + it('transforms `shadow` token to css shadow string', () => { + const input = [ + getMockToken({ + value: { + color: '#000000', + offsetX: '0px', + offsetY: '2px', + blur: '1px', + spread: '0' + } + }) + ] + const expectedOutput = ['0px 2px 1px 0 #000000'] + expect(input.map(item => shadowToCss.transformer(item))).toStrictEqual(expectedOutput) + }) + + it('transforms inset `shadow` token to css shadow string', () => { + const input = [ + getMockToken({ + value: { + color: '#000000', + offsetX: '0px', + offsetY: '2px', + blur: '1px', + spread: '0px', + inset: true + } + }), + getMockToken({ + value: { + color: '#000000', + offsetX: '0px', + offsetY: '2px', + blur: '1px', + spread: '0px', + inset: false + } + }) + ] + const expectedOutput = ['inset 0px 2px 1px 0px #000000', '0px 2px 1px 0px #000000'] + expect(input.map(item => shadowToCss.transformer(item))).toStrictEqual(expectedOutput) + }) + + it('throws an error when required values are missing', () => { + // missing blur + expect(() => + shadowToCss.transformer( + getMockToken({ + value: { + color: '#000000', + offsetX: '2px', + offsetY: '2px', + blur: '1px' + } + }) + ) + ).toThrowError() + + // missing spread + expect(() => + shadowToCss.transformer( + getMockToken({ + value: { + color: '#000000', + offsetX: '2px', + offsetY: '2px', + blur: '1px' + } + }) + ) + ).toThrowError() + + // missing offsets + expect(() => + shadowToCss.transformer( + getMockToken({ + value: { + color: '#000000', + offsetX: '2px', + spread: '0px', + blur: '1px' + } + }) + ) + ).toThrowError() + + expect(() => + shadowToCss.transformer( + getMockToken({ + value: { + color: '#000000', + offsetY: '2px', + spread: '0px', + blur: '1px' + } + }) + ) + ).toThrowError() + // missing color + expect(() => + shadowToCss.transformer( + getMockToken({ + value: { + offsetX: '0px', + offsetY: '2px', + spread: '0px', + blur: '1px' + } + }) + ) + ).toThrowError() + }) + + it('transforms `shadow` token alpha value to css shadow string', () => { + const input = [ + getMockToken({ + value: { + color: '#000000', + offsetX: '0px', + offsetY: '2px', + blur: '1px', + spread: '0', + alpha: 0.5 + } + }), + getMockToken({ + value: { + color: '#22222266', + offsetX: '0px', + offsetY: '2px', + blur: '1px', + spread: '0', + alpha: 0.5 + } + }) + ] + const expectedOutput = ['0px 2px 1px 0 #00000080', '0px 2px 1px 0 #22222280'] + expect(input.map(item => shadowToCss.transformer(item))).toStrictEqual(expectedOutput) + }) + + it('transforms multi-layer `shadow` token to css shadow string', () => { + const input = getMockToken({ + value: [ + { + color: '#000000', + offsetX: '0px', + offsetY: '2px', + blur: '1px', + spread: '0', + alpha: 0.5 + }, + { + color: '#22222266', + offsetX: '0px', + offsetY: '8px', + blur: '16px', + spread: '0', + alpha: 0.2 + } + ] + }) + + const expectedOutput = '0px 2px 1px 0 #00000080, 0px 8px 16px 0 #22222233' + expect(shadowToCss.transformer(input)).toStrictEqual(expectedOutput) + }) +}) diff --git a/config/transformers/shadowToCss.ts b/config/transformers/shadowToCss.ts new file mode 100644 index 000000000..39bf3f807 --- /dev/null +++ b/config/transformers/shadowToCss.ts @@ -0,0 +1,46 @@ +import {toHex} from 'color2k' +import StyleDictionary from 'style-dictionary' +import {ShadowTokenValue} from '../../types/ShadowTokenValue' +import {isShadow} from '../filters/isShadow' +import {alpha} from '../utilities' + +/** + * checks if all required properties exist on shadow token + * @param object - ShadowTokenValue + * @returns void or throws error + */ +const checkForShadowTokenProperties = (shadow: ShadowTokenValue) => { + const requiredShadowProperties = ['color', 'offsetX', 'offsetY', 'blur', 'spread'] + for (const prop of requiredShadowProperties) { + if (prop in shadow === false) { + throw new Error(`Missing propery: ${prop} on shadow token ${JSON.stringify(shadow)}`) + } + } +} +/** + * @description converts w3c shadow tokens in css shadow string + * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts) + * @matcher matches all tokens of $type `shadow` + * @transformer returns css shadow `string` + */ +export const shadowToCss: StyleDictionary.Transform = { + type: `value`, + transitive: true, + matcher: isShadow, + transformer: ({value}: {value: ShadowTokenValue | ShadowTokenValue[]}) => { + // turn value into array + const shadowValues = !Array.isArray(value) ? [value] : value + return shadowValues + .map((shadow: ShadowTokenValue) => { + // if value === string it was probably already transformed + if (typeof shadow === 'string') return shadow + + checkForShadowTokenProperties(shadow) + /*css box shadow: inset? | offset-x | offset-y | blur-radius | spread-radius | color */ + return `${shadow.inset === true ? 'inset ' : ''}${shadow.offsetX} ${shadow.offsetY} ${shadow.blur} ${ + shadow.spread + } ${toHex(alpha(shadow.color, shadow.alpha || 1))}` + }) + .join(', ') + } +} 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 a931a3789..faa9a9d9d 100644 --- a/script/tempColorTokenBuild.ts +++ b/script/tempColorTokenBuild.ts @@ -9,14 +9,15 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void => const themes: TokenBuildInput[] = [ { filename: 'light', - source: [`tokens/functional/color/light/*.json5`], + source: [`tokens/functional/color/light/*.json5`, `tokens/functional/shadow/light.json5`], include: [`tokens/base/color/light/light.json5`] }, { filename: 'light-tritanopia', source: [ `tokens/functional/color/light/*.json5`, - `tokens/functional/color/light/overrides/light.tritanopia.json5` + `tokens/functional/color/light/overrides/light.tritanopia.json5`, + `tokens/functional/shadow/light.json5` ], include: [`tokens/base/color/light/light.json5`, `tokens/base/color/light/light.tritanopia.json5`] }, @@ -24,7 +25,8 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void => filename: 'light-colorblind', source: [ `tokens/functional/color/light/*.json5`, - `tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5` + `tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`, + `tokens/functional/shadow/light.json5` ], include: [`tokens/base/color/light/light.json5`, `tokens/base/color/light/light.protanopia-deuteranopia.json5`] }, @@ -32,30 +34,40 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void => filename: 'light-high-contrast', source: [ `tokens/functional/color/light/*.json5`, - `tokens/functional/color/light/overrides/light.high-contrast.json5` + `tokens/functional/color/light/overrides/light.high-contrast.json5`, + `tokens/functional/shadow/light.json5` ], include: [`tokens/base/color/light/light.json5`, `tokens/base/color/light/light.high-contrast.json5`] }, { filename: 'dark', - source: [`tokens/functional/color/dark/*.json5`], + source: [`tokens/functional/color/dark/*.json5`, `tokens/functional/shadow/dark.json5`], include: [`tokens/base/color/dark/dark.json5`] }, { filename: 'dark-dimmed', - source: [`tokens/functional/color/dark/*.json5`, `tokens/functional/color/dark/overrides/dark.dimmed.json5`], + source: [ + `tokens/functional/color/dark/*.json5`, + `tokens/functional/color/dark/overrides/dark.dimmed.json5`, + `tokens/functional/shadow/dark.json5` + ], include: [`tokens/base/color/dark/dark.json5`, `tokens/base/color/dark/dark.dimmed.json5`] }, { filename: 'dark-tritanopia', - source: [`tokens/functional/color/dark/*.json5`, `tokens/functional/color/dark/overrides/dark.tritanopia.json5`], + source: [ + `tokens/functional/color/dark/*.json5`, + `tokens/functional/color/dark/overrides/dark.tritanopia.json5`, + `tokens/functional/shadow/dark.json5` + ], include: [`tokens/base/color/dark/dark.json5`, `tokens/base/color/dark/dark.tritanopia.json5`] }, { filename: 'dark-colorblind', source: [ `tokens/functional/color/dark/*.json5`, - `tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5` + `tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5`, + `tokens/functional/shadow/dark.json5` ], include: [`tokens/base/color/dark/dark.json5`, `tokens/base/color/dark/dark.protanopia-deuteranopia.json5`] }, @@ -63,7 +75,8 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void => filename: 'dark-high-contrast', source: [ `tokens/functional/color/dark/*.json5`, - `tokens/functional/color/dark/overrides/dark.high-contrast.json5` + `tokens/functional/color/dark/overrides/dark.high-contrast.json5`, + `tokens/functional/shadow/dark.json5` ], include: [`tokens/base/color/dark/dark.json5`, `tokens/base/color/dark/dark.high-contrast.json5`] } @@ -98,19 +111,17 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void => for (const {filename, source, include} of themes) { // build functional scales PrimerStyleDictionary.extend( - getStyleDictionaryConfig(`functional/color/${filename}`, source, include, buildOptions) + getStyleDictionaryConfig(`functional/themes/${filename}`, source, include, buildOptions) ).buildAllPlatforms() // build base scales PrimerStyleDictionary.extend( - getStyleDictionaryConfig(`base/color/${filename}`, include, [], { + // using includes as source + getStyleDictionaryConfig(`base/color/${filename}`, [`tokens/functional/color/scales.json5`], include, { buildPath: buildOptions.buildPath, - prefix: undefined + prefix: 'base' }) ).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 deprecated.json @@ -118,7 +129,7 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void => const deprecatedBuilds: TokenBuildInput[] = [ { // light mode - filename: 'color', + filename: 'theme', source: [...themes[0].source, ...themes[0].include], include: themes[0].include } @@ -140,7 +151,7 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void => const typeBuilds: TokenBuildInput[] = [ { // light mode - filename: 'color', + filename: 'theme', source: themes[0].source, include: themes[0].include } @@ -158,7 +169,8 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void => // build types for base scale PrimerStyleDictionary.extend({ - source: themes[0].include, + source: [`tokens/functional/color/scales.json5`], + include: themes[0].include, platforms: { types: typeDefinitions(`baseColor`, undefined, `${buildOptions.buildPath}ts/types/`) } diff --git a/tokens/functional/color/scales.json5 b/tokens/functional/color/scales.json5 new file mode 100644 index 000000000..600e9acec --- /dev/null +++ b/tokens/functional/color/scales.json5 @@ -0,0 +1,493 @@ +/** + * Color scales + * @description This is used to export base scales + */ +{ + color: { + scale: { + black: { + $value: '{base.color.scale.black}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + transparent: { + $value: '{base.color.scale.transparent}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + white: { + $value: '{base.color.scale.white}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + gray: { + '0': { + $value: '{base.color.scale.gray.0}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '1': { + $value: '{base.color.scale.gray.1}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '2': { + $value: '{base.color.scale.gray.2}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '3': { + $value: '{base.color.scale.gray.3}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '4': { + $value: '{base.color.scale.gray.4}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '5': { + $value: '{base.color.scale.gray.5}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '6': { + $value: '{base.color.scale.gray.6}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '7': { + $value: '{base.color.scale.gray.7}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '8': { + $value: '{base.color.scale.gray.8}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '9': { + $value: '{base.color.scale.gray.9}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + } + }, + blue: { + '0': { + $value: '{base.color.scale.blue.0}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '1': { + $value: '{base.color.scale.blue.1}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '2': { + $value: '{base.color.scale.blue.2}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '3': { + $value: '{base.color.scale.blue.3}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '4': { + $value: '{base.color.scale.blue.4}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '5': { + $value: '{base.color.scale.blue.5}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '6': { + $value: '{base.color.scale.blue.6}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '7': { + $value: '{base.color.scale.blue.7}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '8': { + $value: '{base.color.scale.blue.8}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '9': { + $value: '{base.color.scale.blue.9}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + } + }, + green: { + '0': { + $value: '{base.color.scale.green.0}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '1': { + $value: '{base.color.scale.green.1}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '2': { + $value: '{base.color.scale.green.2}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '3': { + $value: '{base.color.scale.green.3}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '4': { + $value: '{base.color.scale.green.4}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '5': { + $value: '{base.color.scale.green.5}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '6': { + $value: '{base.color.scale.green.6}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '7': { + $value: '{base.color.scale.green.7}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '8': { + $value: '{base.color.scale.green.8}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '9': { + $value: '{base.color.scale.green.9}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + } + }, + yellow: { + '0': { + $value: '{base.color.scale.yellow.0}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '1': { + $value: '{base.color.scale.yellow.1}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '2': { + $value: '{base.color.scale.yellow.2}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '3': { + $value: '{base.color.scale.yellow.3}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '4': { + $value: '{base.color.scale.yellow.4}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '5': { + $value: '{base.color.scale.yellow.5}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '6': { + $value: '{base.color.scale.yellow.6}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '7': { + $value: '{base.color.scale.yellow.7}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '8': { + $value: '{base.color.scale.yellow.8}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '9': { + $value: '{base.color.scale.yellow.9}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + } + }, + orange: { + '0': { + $value: '{base.color.scale.orange.0}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '1': { + $value: '{base.color.scale.orange.1}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '2': { + $value: '{base.color.scale.orange.2}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '3': { + $value: '{base.color.scale.orange.3}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '4': { + $value: '{base.color.scale.orange.4}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '5': { + $value: '{base.color.scale.orange.5}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '6': { + $value: '{base.color.scale.orange.6}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '7': { + $value: '{base.color.scale.orange.7}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '8': { + $value: '{base.color.scale.orange.8}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '9': { + $value: '{base.color.scale.orange.9}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + } + }, + red: { + '0': { + $value: '{base.color.scale.red.0}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '1': { + $value: '{base.color.scale.red.1}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '2': { + $value: '{base.color.scale.red.2}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '3': { + $value: '{base.color.scale.red.3}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '4': { + $value: '{base.color.scale.red.4}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '5': { + $value: '{base.color.scale.red.5}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '6': { + $value: '{base.color.scale.red.6}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '7': { + $value: '{base.color.scale.red.7}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '8': { + $value: '{base.color.scale.red.8}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '9': { + $value: '{base.color.scale.red.9}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + } + }, + purple: { + '0': { + $value: '{base.color.scale.purple.0}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '1': { + $value: '{base.color.scale.purple.1}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '2': { + $value: '{base.color.scale.purple.2}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '3': { + $value: '{base.color.scale.purple.3}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '4': { + $value: '{base.color.scale.purple.4}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '5': { + $value: '{base.color.scale.purple.5}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '6': { + $value: '{base.color.scale.purple.6}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '7': { + $value: '{base.color.scale.purple.7}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '8': { + $value: '{base.color.scale.purple.8}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '9': { + $value: '{base.color.scale.purple.9}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + } + }, + pink: { + '0': { + $value: '{base.color.scale.pink.0}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '1': { + $value: '{base.color.scale.pink.1}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '2': { + $value: '{base.color.scale.pink.2}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '3': { + $value: '{base.color.scale.pink.3}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '4': { + $value: '{base.color.scale.pink.4}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '5': { + $value: '{base.color.scale.pink.5}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '6': { + $value: '{base.color.scale.pink.6}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '7': { + $value: '{base.color.scale.pink.7}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '8': { + $value: '{base.color.scale.pink.8}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '9': { + $value: '{base.color.scale.pink.9}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + } + }, + coral: { + '0': { + $value: '{base.color.scale.coral.0}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '1': { + $value: '{base.color.scale.coral.1}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '2': { + $value: '{base.color.scale.coral.2}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '3': { + $value: '{base.color.scale.coral.3}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '4': { + $value: '{base.color.scale.coral.4}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '5': { + $value: '{base.color.scale.coral.5}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '6': { + $value: '{base.color.scale.coral.6}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '7': { + $value: '{base.color.scale.coral.7}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '8': { + $value: '{base.color.scale.coral.8}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + }, + '9': { + $value: '{base.color.scale.coral.9}', + $type: 'color', + description: 'Avoid using scales, use other functional tokens instead' + } + } + } + } +} diff --git a/tokens/functional/shadow/dark.json5 b/tokens/functional/shadow/dark.json5 new file mode 100644 index 000000000..203f44d2b --- /dev/null +++ b/tokens/functional/shadow/dark.json5 @@ -0,0 +1,93 @@ +{ + shadow: { + color: { + 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' + } + }, + small: { + $value: { + color: '{shadow.color.small}', + offsetX: '0px', + offsetY: '1px', + blur: '0px', + spread: "0px" + }, + $type: 'shadow' + }, + medium: { + $value: { + color: '{shadow.color.medium}', + offsetX: '0px', + offsetY: '3px', + blur: '6px', + spread: "0px" + }, + $type: 'shadow' + }, + large: { + $value: { + color: '{shadow.color.large}', + offsetX: '0px', + offsetY: '8px', + blur: '24px', + spread: "0px" + }, + $type: 'shadow' + }, + extraLarge: { + $value: { + color: '{shadow.color.extraLarge}', + offsetX: '0px', + offsetY: '12px', + blur: '28px', + spread: "0px" + }, + $type: 'shadow' + }, + // components + overlay: { + $value: [{ + color: '{base.color.scale.gray.6}', + offsetX: '0px', + offsetY: '0px', + blur: '0px', + spread: "1px" + },{ + color: '{shadow.color.medium}', + offsetX: '0px', + offsetY: '16px', + blur: '32px', + spread: "0px" + }], + $type: 'shadow' + } + } +} diff --git a/tokens/functional/shadow/light.json5 b/tokens/functional/shadow/light.json5 new file mode 100644 index 000000000..dede31ba0 --- /dev/null +++ b/tokens/functional/shadow/light.json5 @@ -0,0 +1,100 @@ +{ + shadow: { + color: { + 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' + }, + semiBlack: { + "12": { + $value: '{base.color.scale.black}', + alpha: 0.12, + $type: 'color' + } + } + }, + small: { + $value: { + color: '{shadow.color.small}', + offsetX: '0px', + offsetY: '1px', + blur: '0px', + spread: "0px" + }, + $type: 'shadow' + }, + medium: { + $value: { + color: '{shadow.color.medium}', + offsetX: '0px', + offsetY: '3px', + blur: '6px', + spread: "0px" + }, + $type: 'shadow' + }, + large: { + $value: { + color: '{shadow.color.large}', + offsetX: '0px', + offsetY: '8px', + blur: '24px', + spread: "0px" + }, + $type: 'shadow' + }, + extraLarge: { + $value: { + color: '{shadow.color.extraLarge}', + offsetX: '0px', + offsetY: '12px', + blur: '28px', + spread: "0px" + }, + $type: 'shadow' + }, + // components + overlay: { + $value: [{ + color: '{shadow.color.semiBlack.12}', + offsetX: '0px', + offsetY: '1px', + blur: '3px', + spread: "0px" + },{ + color: '{shadow.color.semiBlack}', + offsetX: '0px', + offsetY: '8px', + blur: '24px', + spread: "0px" + }], + $type: 'shadow' + } + } +} \ No newline at end of file diff --git a/types/ShadowTokenValue.d.ts b/types/ShadowTokenValue.d.ts new file mode 100644 index 000000000..89dbb5a57 --- /dev/null +++ b/types/ShadowTokenValue.d.ts @@ -0,0 +1,14 @@ +/** + * Type definition for w3c shadow composite token value + * @link https://design-tokens.github.io/community-group/format/#shadow + */ +export type ShadowTokenValue = { + color: string + offsetX: string + offsetY: string + blur: string + spread: string + // custom non w3c values + inset?: boolean + alpha?: number +}