diff --git a/README.md b/README.md index 5d3a2e487..de7c168e2 100644 --- a/README.md +++ b/README.md @@ -80,27 +80,6 @@ You can create color tokens that inherit a color but have a different alpha valu } ``` -#### Mix - -In rare cases, you may need to create a color between two steps in the color scale, e.g. between `gray.4` and `gray.5`. A common example are interactive states, like `hover` where a full step on the color scale would be to much. For those cases you can use the `mix` property. - -The `mix` proeprty mixes the color it gets into the main color from the `$value` attribute. The amount added is controlled by the `weight`. A weight of `0.1` adds 10% of the color, and a weight of `0.75` adds 75%. - -A `mix` proprty must always have a `color` and a `weight` child. `color` can be a `hex` value or a reference to a valid color. The `weight` property must receive a value between `0.0` and `1`. - -```json5 -{ - control: { - $value: '{base.color.gray.4}', // main color - $type: 'color', - mix: { - color: '{base.color.gray.5}', // color to mix into the main color - weight: 0.2, // amount of the mix color that is added === 20% of gray.5 is mix into gray.4 - }, - }, -} -``` - #### Extensions property According to the [w3c design token specs](https://design-tokens.github.io/community-group/format/#design-token), the [`$extensions`](https://design-tokens.github.io/community-group/format/#extensions) property is used for additional meta data. diff --git a/integration/integration.test.ts b/integration/integration.test.ts index a8a6e82fb..e68ea0a59 100644 --- a/integration/integration.test.ts +++ b/integration/integration.test.ts @@ -15,7 +15,6 @@ describe('PrimerStyleDictionary', async () => { transforms: [ 'name/pathToKebabCase', 'color/hex', - 'color/hexMix', 'dimension/rem', 'duration/css', 'shadow/css', @@ -40,7 +39,6 @@ describe('PrimerStyleDictionary', async () => { usesDtcg: true, transforms: [ 'color/hex', - 'color/hexMix', 'dimension/rem', 'shadow/css', 'border/css', @@ -65,7 +63,6 @@ describe('PrimerStyleDictionary', async () => { buildPath: `${buildPath}/js/`, transforms: [ 'color/hex', - 'color/hexMix', 'dimension/rem', 'shadow/css', 'border/css', @@ -112,7 +109,6 @@ describe('PrimerStyleDictionary', async () => { buildPath: `${buildPath}/json/`, transforms: [ 'color/hex', - 'color/hexMix', 'dimension/rem', 'shadow/css', 'border/css', diff --git a/scripts/diffTokenProps.ts b/scripts/diffTokenProps.ts index 77896a90a..8104f6e08 100644 --- a/scripts/diffTokenProps.ts +++ b/scripts/diffTokenProps.ts @@ -11,7 +11,7 @@ type DiffItem = { const isToken = (obj: Record): boolean => Object.prototype.hasOwnProperty.call(obj, '$value') -const diffProps = (diffArray: DiffItem[], propsToCheck = ['mix', 'alpha']) => { +const diffProps = (diffArray: DiffItem[], propsToCheck = ['alpha']) => { const diff = [] // iterate over each theme for (const {mainThemeName, mainThemeDir, mainFiles, overridesDir} of diffArray) { diff --git a/src/filters/index.ts b/src/filters/index.ts index 186fd95b9..5f4baeb68 100644 --- a/src/filters/index.ts +++ b/src/filters/index.ts @@ -1,7 +1,6 @@ export {isBorder} from './isBorder.js' export {isColor} from './isColor.js' export {isColorWithAlpha} from './isColorWithAlpha.js' -export {isColorWithMix} from './isColorWithMix.js' export {isDimension} from './isDimension.js' export {isDeprecated} from './isDeprecated.js' export {isDuration} from './isDuration.js' diff --git a/src/filters/isColorWithMix.test.ts b/src/filters/isColorWithMix.test.ts deleted file mode 100644 index 6ab8832fb..000000000 --- a/src/filters/isColorWithMix.test.ts +++ /dev/null @@ -1,108 +0,0 @@ -import {getMockToken} from '../test-utilities/index.js' -import {isColorWithMix} from './isColorWithMix.js' - -describe('Filter: isColorWithMix', () => { - it('returns true if $type property is `color` and valid `mix` property exists', () => { - expect(isColorWithMix(getMockToken({$type: 'color', mix: {color: '#000', weight: 0.5}}))).toStrictEqual(true) - }) - - it('returns false if $type property is not `color`', () => { - expect(isColorWithMix(getMockToken({$type: 'pumpkin', mix: {color: '#000', weight: 0.5}}))).toStrictEqual(false) - }) - - it('returns false if $type property is missing', () => { - expect(isColorWithMix(getMockToken({value: '#000'}))).toStrictEqual(false) - }) - - it('returns false if $type property is missing', () => { - expect(isColorWithMix(getMockToken({value: '#000', mix: null}))).toStrictEqual(false) - }) - - it('returns false if $type `color` but mix is missing', () => { - expect(isColorWithMix(getMockToken({$type: 'color'}))).toStrictEqual(false) - }) - - it('throws error if $type `color` but mix is invalid', () => { - expect(() => isColorWithMix(getMockToken({$type: 'color', mix: true}))).toThrow() - expect(() => isColorWithMix(getMockToken({$type: 'color', mix: '#000'}))).toThrow() - }) - - it('throws error if $type `color` but mix has invalid properties', () => { - // missing weight - expect(() => - isColorWithMix( - getMockToken({ - $type: 'color', - mix: { - color: '#000', - }, - }), - ), - ).toThrow() - // missing color - expect(() => - isColorWithMix( - getMockToken({ - $type: 'color', - mix: { - weight: 0.5, - }, - }), - ), - ).toThrow() - // color is number - expect(() => - isColorWithMix( - getMockToken({ - $type: 'color', - mix: { - color: 1, - weight: 0.5, - }, - }), - ), - ).toThrow() - // color is undefined - expect(() => - isColorWithMix( - getMockToken({ - $type: 'color', - mix: { - color: undefined, - weight: 0.5, - }, - }), - ), - ).toThrow() - // weight is undefined - expect(() => - isColorWithMix( - getMockToken({ - $type: 'color', - mix: { - color: '#000', - weight: undefined, - }, - }), - ), - ).toThrow() - // weight is a string - expect(() => - isColorWithMix( - getMockToken({ - $type: 'color', - mix: { - color: '#000', - weight: '0.7', - }, - }), - ), - ).toThrow() - }) - - it('returns false if $type is falsy ', () => { - expect(isColorWithMix(getMockToken({$type: undefined, mix: {color: '#000', weight: 0.5}}))).toStrictEqual(false) - expect(isColorWithMix(getMockToken({$type: false, mix: {color: '#000', weight: 0.5}}))).toStrictEqual(false) - expect(isColorWithMix(getMockToken({$type: null, mix: {color: '#000', weight: 0.5}}))).toStrictEqual(false) - }) -}) diff --git a/src/filters/isColorWithMix.ts b/src/filters/isColorWithMix.ts deleted file mode 100644 index c4b7abbb4..000000000 --- a/src/filters/isColorWithMix.ts +++ /dev/null @@ -1,33 +0,0 @@ -import {isColor} from './isColor.js' -import type {TransformedToken} from 'style-dictionary/types' - -const throwError = (token: TransformedToken) => { - throw new Error( - `Invalid mix property on token: ${token.name}. "mix.color": ${token.mix.color}, "mix.weight": ${ - typeof token.mix.weight === 'string' ? `"${token.mix.weight}" (string)` : token.mix.weight - } must be a number between 0 and 1. In file: "${token.filePath}".`, - ) -} - -/** - * @description Checks if token is color and has a mix property - * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts) - * @returns boolean - */ -export const isColorWithMix = (token: TransformedToken): boolean => { - // no color or no mix property - if (!isColor(token) || token.mix === undefined || token.mix === null) { - return false - } - // invalid mix property - if ( - typeof token.mix.color !== 'string' || - typeof token.mix.weight !== 'number' || - token.mix.weight < 0 || - token.mix.weight > 1 - ) { - throwError(token) - } - // valid mix property - return true -} diff --git a/src/formats/jsonFigma.ts b/src/formats/jsonFigma.ts index 2805f4201..5a276a994 100644 --- a/src/formats/jsonFigma.ts +++ b/src/formats/jsonFigma.ts @@ -82,7 +82,7 @@ export const jsonFigma: FormatFn = async ({dictionary, file: _file, platform}: F // loop through tokens sorted by reference for (const token of sortedTokens) { // deconstruct token - const {attributes, $value: value, $type, $description: description, original, alpha, mix} = token + const {attributes, $value: value, $type, $description: description, original, alpha} = token const {mode, collection, scopes, group, codeSyntax} = attributes || {} // early escape if no type is present if (!$type) return @@ -115,7 +115,6 @@ export const jsonFigma: FormatFn = async ({dictionary, file: _file, platform}: F value, type: getFigmaType($type), alpha, - isMix: mix ? true : undefined, description, refId: [collection, token.name].filter(Boolean).join('/'), reference: getReference(dictionary, original.$value, platform), diff --git a/src/platforms/css.ts b/src/platforms/css.ts index 0d564dd22..f757415c7 100644 --- a/src/platforms/css.ts +++ b/src/platforms/css.ts @@ -28,7 +28,6 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options) transforms: [ 'name/pathToKebabCase', 'color/hex', - 'color/hexMix', 'cubicBezier/css', 'dimension/rem', 'duration/css', diff --git a/src/platforms/docJson.ts b/src/platforms/docJson.ts index 43dc06167..103997b31 100644 --- a/src/platforms/docJson.ts +++ b/src/platforms/docJson.ts @@ -9,7 +9,6 @@ export const docJson: PlatformInitializer = (outputFile, prefix, buildPath, opti transforms: [ 'name/pathToKebabCase', 'color/hex', - 'color/hexMix', 'dimension/rem', 'shadow/css', 'border/css', diff --git a/src/platforms/fallbacks.ts b/src/platforms/fallbacks.ts index 0934ae30b..8673d92a4 100644 --- a/src/platforms/fallbacks.ts +++ b/src/platforms/fallbacks.ts @@ -8,7 +8,6 @@ export const fallbacks: PlatformInitializer = (outputFile, prefix, buildPath): P transforms: [ 'name/pathToKebabCase', 'color/hex', - 'color/hexMix', 'dimension/rem', 'shadow/css', 'border/css', diff --git a/src/platforms/javascript.ts b/src/platforms/javascript.ts index 2e1a8c407..3d341b632 100644 --- a/src/platforms/javascript.ts +++ b/src/platforms/javascript.ts @@ -8,7 +8,6 @@ export const javascript: PlatformInitializer = (outputFile, prefix, buildPath, o preprocessors: ['themeOverrides'], transforms: [ 'color/hex', - 'color/hexMix', 'dimension/rem', 'shadow/css', 'border/css', diff --git a/src/platforms/json.ts b/src/platforms/json.ts index 62cb256e5..09a1b4615 100644 --- a/src/platforms/json.ts +++ b/src/platforms/json.ts @@ -8,7 +8,6 @@ export const json: PlatformInitializer = (outputFile, prefix, buildPath, options preprocessors: ['themeOverrides'], transforms: [ 'color/hex', - 'color/hexMix', 'dimension/rem', 'shadow/css', 'border/css', diff --git a/src/platforms/styleLint.ts b/src/platforms/styleLint.ts index 1d273bac6..212e3fa1d 100644 --- a/src/platforms/styleLint.ts +++ b/src/platforms/styleLint.ts @@ -9,7 +9,6 @@ export const styleLint: PlatformInitializer = (outputFile, prefix, buildPath, op transforms: [ 'name/pathToKebabCase', 'color/hex', - 'color/hexMix', 'dimension/remPxArray', 'shadow/css', 'border/css', diff --git a/src/platforms/typescript.ts b/src/platforms/typescript.ts index 97afff985..e0fe1cd4d 100644 --- a/src/platforms/typescript.ts +++ b/src/platforms/typescript.ts @@ -8,7 +8,6 @@ export const typescript: PlatformInitializer = (outputFile, prefix, buildPath, o preprocessors: ['themeOverrides'], transforms: [ 'color/hex', - 'color/hexMix', 'dimension/rem', 'shadow/css', 'border/css', diff --git a/src/primerStyleDictionary.ts b/src/primerStyleDictionary.ts index 6791ed7fc..439b3f939 100644 --- a/src/primerStyleDictionary.ts +++ b/src/primerStyleDictionary.ts @@ -3,7 +3,6 @@ import { borderToCss, colorToRgbAlpha, colorToHex, - colorToHexMix, colorToRgbaFloat, cubicBezierToCss, dimensionToRem, @@ -109,8 +108,6 @@ PrimerStyleDictionary.registerTransform(colorToRgbAlpha) PrimerStyleDictionary.registerTransform(colorToRgbaFloat) -PrimerStyleDictionary.registerTransform(colorToHexMix) - PrimerStyleDictionary.registerTransform(colorToHex) PrimerStyleDictionary.registerTransform(cubicBezierToCss) diff --git a/src/schemas/colorToken.ts b/src/schemas/colorToken.ts index 9de338619..c68969f8d 100644 --- a/src/schemas/colorToken.ts +++ b/src/schemas/colorToken.ts @@ -12,13 +12,6 @@ export const colorToken = baseToken $value: z.union([colorHexValue, referenceValue]), $type: tokenType('color'), alpha: alphaValue.optional().nullable(), - mix: z - .object({ - color: z.string(), - weight: z.number().min(0).max(1), - }) - .nullable() - .optional(), $extensions: z .object({ alpha: z.number().min(0).max(1).optional().nullable(), diff --git a/src/tokens/functional/color/dark/app-dark.json5 b/src/tokens/functional/color/dark/app-dark.json5 index 6a5c490e4..c4047aa8b 100644 --- a/src/tokens/functional/color/dark/app-dark.json5 +++ b/src/tokens/functional/color/dark/app-dark.json5 @@ -72,7 +72,6 @@ }, }, alpha: 0.15, - mix: null, }, }, additionWord: { @@ -153,7 +152,6 @@ scopes: ['bgColor'], }, }, - mix: null, }, }, deletionWord: { diff --git a/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 b/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 index 745caba12..24eda18a5 100644 --- a/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 @@ -42,6 +42,33 @@ $type: 'color', alpha: 1, }, + accent: { + $value: '#478be6', + $type: 'color', + }, + }, + borderColor: { + default: { + $value: '{base.color.neutral.7}', + $type: 'color', + }, + muted: { + $value: '{base.color.neutral.7}', + $type: 'color', + alpha: 0.7, + }, + disabled: { + $value: '{base.color.neutral.8}', + $type: 'color', + alpha: 0.1, + }, + neutral: { + muted: { + $value: '{base.color.neutral.7}', + $type: 'color', + alpha: 0.7, + }, + }, }, control: { bgColor: { @@ -60,9 +87,14 @@ }, borderColor: { rest: { - $value: '{borderColor.default}', + $value: '#3d444d', $type: 'color', }, + disabled: { + $value: '{base.color.neutral.8}', + $type: 'color', + alpha: 0.1, + }, }, transparent: { bgColor: { @@ -83,6 +115,28 @@ }, }, }, + checked: { + bgColor: { + hover: { + $value: '#3876d3', + $type: 'color', + }, + active: { + $value: '#3f7fdb', + $type: 'color', + }, + }, + borderColor: { + hover: { + $value: '#3876d3', + $type: 'color', + }, + active: { + $value: '#3f7fdb', + $type: 'color', + }, + }, + }, }, controlTrack: { bgColor: { @@ -99,6 +153,12 @@ $type: 'color', }, }, + borderColor: { + rest: { + $value: '{base.color.neutral.7}', + $type: 'color', + }, + }, }, controlKnob: { bgColor: { @@ -128,17 +188,32 @@ $value: '{base.color.neutral.5}', $type: 'color', }, + borderColor: { + $value: '{base.color.neutral.7}', + $type: 'color', + alpha: 0.7, + }, }, button: { primary: { bgColor: { + hover: { + $value: '#3b8640', + $type: 'color', + }, + active: { + $value: '#428f46', + $type: 'color', + }, disabled: { - $value: '{base.color.green.4}', + $value: '#50a254', + $type: 'color', + }, + }, + borderColor: { + disabled: { + $value: '#50a254', $type: 'color', - mix: { - color: '{base.color.green.3}', - weight: 0.6, - }, }, }, fgColor: { @@ -176,6 +251,34 @@ $type: 'color', }, }, + outline: { + fgColor: { + disabled: { + $value: '#478be680', + $type: 'color', + }, + }, + }, + danger: { + bgColor: { + active: { + $value: '#c33d38', + $type: 'color', + }, + }, + fgColor: { + rest: { + $value: '#ea5c53', + $type: 'color', + }, + }, + iconColor: { + rest: { + $value: '#ea5c53', + $type: 'color', + }, + }, + }, }, timelineBadge: { bgColor: { @@ -183,4 +286,15 @@ $type: 'color', }, }, + reactionButton: { + selected: { + bgColor: { + hover: { + $value: '#4285e5', + $type: 'color', + alpha: 0.36, + }, + }, + }, + }, } diff --git a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 index 69217a8a3..c75a17645 100644 --- a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 @@ -22,20 +22,12 @@ $type: 'color', }, accent: { - $value: '{base.color.blue.3}', + $value: '#74B9FF', $type: 'color', - mix: { - color: '{base.color.blue.2}', - weight: 0.08, - }, }, success: { - $value: '{base.color.green.3}', + $value: '#2BD853', $type: 'color', - mix: { - color: '{base.color.green.2}', - weight: 0.08, - }, }, danger: { $value: '{base.color.red.3}', @@ -46,20 +38,12 @@ $type: 'color', }, done: { - $value: '{base.color.purple.3}', + $value: '#D3ABFF', $type: 'color', - mix: { - color: '{base.color.purple.2}', - weight: 0.5, - }, }, sponsors: { - $value: '{base.color.pink.3}', + $value: '#FF90C8', $type: 'color', - mix: { - color: '{base.color.pink.2}', - weight: 0.08, - }, }, }, bgColor: { @@ -288,7 +272,6 @@ emphasis: { $value: '{borderColor.emphasis}', $type: 'color', - mix: null, }, }, transparent: { @@ -327,17 +310,23 @@ $type: 'color', }, active: { - $value: '{bgColor.danger.emphasis}', + $value: '#c51120', $type: 'color', alpha: 1, - mix: { - color: '{base.color.red.7}', - weight: 0.4, - }, }, }, }, checked: { + bgColor: { + hover: { + $value: '#2b64c1', + $type: 'color', + }, + active: { + $value: '#3c79d0', + $type: 'color', + }, + }, borderColor: { rest: { $value: '{base.color.blue.2}', @@ -384,6 +373,20 @@ }, button: { primary: { + bgColor: { + hover: { + $value: '#08792b', + $type: 'color', + }, + active: { + $value: '#109135', + $type: 'color', + }, + disabled: { + $value: '#048f2f', + $type: 'color', + }, + }, borderColor: { rest: { $value: '{base.color.green.2}', @@ -423,13 +426,11 @@ $value: '{base.color.neutral.2}', $type: 'color', alpha: null, - mix: null, }, active: { $value: '{base.color.neutral.3}', $type: 'color', alpha: null, - mix: null, }, }, }, @@ -468,7 +469,12 @@ active: { $value: '{bgColor.danger.emphasis}', $type: 'color', - mix: null, + }, + }, + iconColor: { + rest: { + $value: '#ffb1af', + $type: 'color', }, }, }, @@ -945,6 +951,17 @@ $type: 'color', }, }, + reactionButton: { + selected: { + bgColor: { + hover: { + $value: '#5dadff', + $type: 'color', + alpha: 0.36, + }, + }, + }, + }, skeletonLoader: { bgColor: { $value: '{base.color.neutral.5}', diff --git a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 index 9bcb33a75..ce02164e6 100644 --- a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 @@ -146,25 +146,22 @@ primary: { bgColor: { hover: { - $value: '{bgColor.success.emphasis}', + $value: '#2a7aef', $type: 'color', - mix: { - color: '{base.color.blue.3}', - weight: 0.2, - }, }, active: { - $value: '{bgColor.success.emphasis}', + $value: '#3685f3', $type: 'color', - mix: { - color: '{base.color.blue.3}', - weight: 0.4, - }, }, disabled: { $value: '{base.color.blue.6}', $type: 'color', - mix: null, + }, + }, + borderColor: { + disabled: { + $value: '#1158c7', + $type: 'color', }, }, }, @@ -181,12 +178,14 @@ $type: 'color', }, active: { - $value: '{base.color.orange.6}', + $value: '#b5531d', + $type: 'color', + }, + }, + iconColor: { + rest: { + $value: '#f0883e', $type: 'color', - mix: { - color: '{base.color.orange.4}', - weight: 0.4, - }, }, }, }, @@ -218,7 +217,6 @@ $value: '{base.color.orange.4}', $type: 'color', alpha: 0.15, - mix: null, }, }, deletionWord: { @@ -233,7 +231,6 @@ rest: { $value: '{base.color.neutral.6}', $type: 'color', - mix: null, $extensions: { alpha: 1, }, @@ -241,7 +238,6 @@ hover: { $value: '{base.color.neutral.8}', $type: 'color', - mix: null, $extensions: { alpha: 1, }, @@ -252,7 +248,6 @@ bgColor: { $value: '{base.color.neutral.3}', $type: 'color', - mix: null, $extensions: { alpha: 1, }, diff --git a/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 b/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 index 8b0c8579c..0148f45da 100644 --- a/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 @@ -67,6 +67,13 @@ $type: 'color', }, }, + sponsors: { + muted: { + $value: '#db61a2', + $type: 'color', + alpha: 0.1, + }, + }, }, borderColor: { success: { @@ -146,7 +153,6 @@ rest: { $value: '{base.color.neutral.6}', $type: 'color', - mix: null, $extensions: { alpha: 1, }, @@ -154,7 +160,6 @@ hover: { $value: '{base.color.neutral.8}', $type: 'color', - mix: null, $extensions: { alpha: 1, }, @@ -165,7 +170,6 @@ bgColor: { $value: '{base.color.neutral.3}', $type: 'color', - mix: null, $extensions: { alpha: 1, }, @@ -186,28 +190,38 @@ primary: { bgColor: { hover: { - $value: '{bgColor.success.emphasis}', + $value: '#2a7aef', $type: 'color', - mix: { - color: '{base.color.blue.3}', - weight: 0.2, - }, }, active: { - $value: '{bgColor.success.emphasis}', + $value: '#3685f3', $type: 'color', - mix: { - color: '{base.color.blue.3}', - weight: 0.4, - }, }, disabled: { - $value: '{base.color.blue.4}', + $value: '#5fabfe', + $type: 'color', + }, + }, + borderColor: { + disabled: { + $value: '#5fabfe', + $type: 'color', + }, + }, + }, + outline: { + bgColor: { + hover: { + $value: '#262c36', + $type: 'color', + }, + active: { + $value: '#0d419d', + $type: 'color', + }, + disabled: { + $value: '#212830', $type: 'color', - mix: { - color: '{base.color.blue.2}', - weight: 0.6, - }, }, }, }, diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5 index 18e9526c2..d8fb47228 100644 --- a/src/tokens/functional/color/dark/patterns-dark.json5 +++ b/src/tokens/functional/color/dark/patterns-dark.json5 @@ -399,7 +399,7 @@ }, }, hover: { - $value: '{bgColor.accent.emphasis}', + $value: '#2A7AEF', $type: 'color', $extensions: { 'org.primer.figma': { @@ -408,13 +408,9 @@ scopes: ['bgColor'], }, }, - mix: { - color: '{base.color.blue.3}', - weight: 0.2, - }, }, active: { - $value: '{bgColor.accent.emphasis}', + $value: '#3685F3', $type: 'color', $extensions: { 'org.primer.figma': { @@ -423,10 +419,6 @@ scopes: ['bgColor'], }, }, - mix: { - color: '{base.color.blue.3}', - weight: 0.4, - }, }, disabled: { $value: '{fgColor.disabled}', @@ -888,7 +880,7 @@ }, }, hover: { - $value: '{bgColor.success.emphasis}', + $value: '#29903B', $type: 'color', $extensions: { 'org.primer.figma': { @@ -897,13 +889,9 @@ scopes: ['bgColor'], }, }, - mix: { - color: '{base.color.green.3}', - weight: 0.2, - }, }, active: { - $value: '{bgColor.success.emphasis}', + $value: '#2E9A40', $type: 'color', $extensions: { 'org.primer.figma': { @@ -912,13 +900,9 @@ scopes: ['bgColor'], }, }, - mix: { - color: '{base.color.green.3}', - weight: 0.4, - }, }, disabled: { - $value: '{base.color.green.5}', + $value: '#105823', $type: 'color', $extensions: { 'org.primer.figma': { @@ -927,10 +911,6 @@ scopes: ['bgColor'], }, }, - mix: { - color: '{base.color.green.8}', - weight: 0.6, - }, }, }, borderColor: { @@ -969,7 +949,7 @@ }, }, disabled: { - $value: '{button.primary.bgColor.disabled}', + $value: '#105823', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1267,7 +1247,7 @@ danger: { fgColor: { rest: { - $value: '{base.color.red.4}', + $value: '#FA5E55', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1276,10 +1256,6 @@ scopes: ['fgColor'], }, }, - mix: { - color: '{base.color.red.3}', - weight: 0.3, - }, }, hover: { $value: '{base.color.neutral.13}', @@ -1318,7 +1294,7 @@ }, iconColor: { rest: { - $value: '{button.danger.fgColor.rest}', + $value: '#FA5E55', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1364,7 +1340,7 @@ }, }, active: { - $value: '{base.color.red.6}', + $value: '#D03533', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1373,10 +1349,6 @@ scopes: ['bgColor'], }, }, - mix: { - color: '{base.color.red.4}', - weight: 0.4, - }, }, disabled: { $value: '{control.bgColor.disabled}', @@ -1680,7 +1652,7 @@ alpha: 0.2, }, hover: { - $value: '{reactionButton.selected.bgColor.rest}', + $value: '#3a8cfd', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1689,11 +1661,7 @@ scopes: ['bgColor'], }, }, - mix: { - color: '{base.color.blue.2}', - weight: 0.2, - }, - alpha: 0.2, + alpha: 0.36, }, }, fgColor: { diff --git a/src/tokens/functional/color/dark/primitives-dark.json5 b/src/tokens/functional/color/dark/primitives-dark.json5 index 99f100d54..266cc71b4 100644 --- a/src/tokens/functional/color/dark/primitives-dark.json5 +++ b/src/tokens/functional/color/dark/primitives-dark.json5 @@ -122,7 +122,7 @@ }, }, accent: { - $value: '{base.color.blue.3}', + $value: '#4493F8', $type: 'color', $extensions: { 'org.primer.figma': { @@ -135,10 +135,6 @@ }, }, }, - mix: { - color: '{base.color.blue.5}', - weight: 0.35, - }, }, success: { $value: '{base.color.green.3}', diff --git a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 b/src/tokens/functional/color/light/overrides/light.high-contrast.json5 index d469dfbce..62ac2b611 100644 --- a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +++ b/src/tokens/functional/color/light/overrides/light.high-contrast.json5 @@ -78,7 +78,6 @@ emphasis: { $value: '{base.color.green.5}', $type: 'color', - mix: null, }, }, attention: { @@ -287,16 +286,32 @@ $value: '{bgColor.danger.emphasis}', $type: 'color', alpha: null, - mix: null, }, active: { - $value: '{bgColor.danger.emphasis}', + $value: '#8c0b1d', + $type: 'color', + }, + }, + }, + checked: { + bgColor: { + hover: { + $value: '#0344a8', + $type: 'color', + }, + active: { + $value: '#033f9d', + $type: 'color', + }, + }, + borderColor: { + hover: { + $value: '#0344a8', + $type: 'color', + }, + active: { + $value: '#033f9d', $type: 'color', - alpha: null, - mix: { - color: '{base.color.red.7}', - weight: 0.4, - }, }, }, }, @@ -331,20 +346,16 @@ $type: 'color', }, hover: { - $value: '{base.color.green.5}', + $value: '#04571e', $type: 'color', - mix: { - color: '{base.color.green.7}', - weight: 0.2, - }, }, active: { - $value: '{base.color.green.5}', + $value: '#03501b', + $type: 'color', + }, + disabled: { + $value: '#85cb97', $type: 'color', - mix: { - color: '{base.color.green.7}', - weight: 0.4, - }, }, }, borderColor: { @@ -363,6 +374,10 @@ $type: 'color', alpha: 1, }, + disabled: { + $value: '#85cb97', + $type: 'color', + }, }, }, inactive: { @@ -396,6 +411,22 @@ }, }, }, + outline: { + bgColor: { + active: { + $value: '#033f9d', + $type: 'color', + }, + }, + }, + danger: { + bgColor: { + active: { + $value: '#74041a', + $type: 'color', + }, + }, + }, }, buttonCounter: { default: { @@ -406,6 +437,14 @@ }, }, }, + danger: { + fgColor: { + rest: { + $value: '#980e1e', + $type: 'color', + }, + }, + }, }, diffBlob: { additionWord: { @@ -416,7 +455,6 @@ bgColor: { $value: '{base.color.green.5}', $type: 'color', - mix: null, alpha: 1, }, }, @@ -428,7 +466,6 @@ bgColor: { $value: '{base.color.red.5}', $type: 'color', - mix: null, alpha: 1, }, }, @@ -821,4 +858,14 @@ alpha: 1, }, }, + reactionButton: { + selected: { + bgColor: { + hover: { + $value: '#c7e9ff', + $type: 'color', + }, + }, + }, + }, } diff --git a/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 b/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 index 90cca1a99..c5ce46d55 100644 --- a/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 @@ -31,7 +31,6 @@ emphasis: { $value: '{base.color.blue.5}', $type: 'color', - mix: null, }, }, open: { @@ -202,28 +201,16 @@ primary: { bgColor: { hover: { - $value: '{bgColor.success.emphasis}', + $value: '#0864d1', $type: 'color', - mix: { - color: '{base.color.blue.6}', - weight: 0.2, - }, }, active: { - $value: '{bgColor.success.emphasis}', + $value: '#075fc8', $type: 'color', - mix: { - color: '{base.color.blue.6}', - weight: 0.4, - }, }, disabled: { - $value: '{base.color.blue.4}', + $value: '#92caff', $type: 'color', - mix: { - color: '{base.color.blue.0}', - weight: 0.6, - }, }, }, shadow: { @@ -250,12 +237,8 @@ $type: 'color', }, active: { - $value: '{base.color.orange.6}', + $value: '#7e2f00', $type: 'color', - mix: { - color: '{base.color.orange.8}', - weight: 0.4, - }, }, }, shadow: { diff --git a/src/tokens/functional/color/light/overrides/light.tritanopia.json5 b/src/tokens/functional/color/light/overrides/light.tritanopia.json5 index 51a8a2b9c..bb1dfb014 100644 --- a/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +++ b/src/tokens/functional/color/light/overrides/light.tritanopia.json5 @@ -31,7 +31,6 @@ emphasis: { $value: '{base.color.blue.5}', $type: 'color', - mix: null, }, }, open: { @@ -198,28 +197,16 @@ primary: { bgColor: { hover: { - $value: '{bgColor.success.emphasis}', + $value: '#0864d1', $type: 'color', - mix: { - color: '{base.color.blue.6}', - weight: 0.2, - }, }, active: { - $value: '{bgColor.success.emphasis}', + $value: '#075fc8', $type: 'color', - mix: { - color: '{base.color.blue.6}', - weight: 0.4, - }, }, disabled: { - $value: '{base.color.blue.4}', + $value: '#92caff', $type: 'color', - mix: { - color: '{base.color.blue.0}', - weight: 0.6, - }, }, }, shadow: { diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5 index 523be8a1d..0948fa2f5 100644 --- a/src/tokens/functional/color/light/patterns-light.json5 +++ b/src/tokens/functional/color/light/patterns-light.json5 @@ -398,7 +398,7 @@ }, }, hover: { - $value: '{bgColor.accent.emphasis}', + $value: '#0860ca', $type: 'color', $extensions: { 'org.primer.figma': { @@ -407,13 +407,9 @@ scopes: ['bgColor'], }, }, - mix: { - color: '{base.color.blue.7}', - weight: 0.2, - }, }, active: { - $value: '{bgColor.accent.emphasis}', + $value: '#0757ba', $type: 'color', $extensions: { 'org.primer.figma': { @@ -422,10 +418,6 @@ scopes: ['bgColor'], }, }, - mix: { - color: '{base.color.blue.7}', - weight: 0.4, - }, }, disabled: { $value: '{fgColor.disabled}', @@ -881,7 +873,7 @@ }, }, hover: { - $value: '{bgColor.success.emphasis}', + $value: '#1c8139', $type: 'color', $extensions: { 'org.primer.figma': { @@ -890,13 +882,9 @@ scopes: ['bgColor'], }, }, - mix: { - color: '{base.color.green.6}', - weight: 0.2, - }, }, active: { - $value: '{bgColor.success.emphasis}', + $value: '#197935', $type: 'color', $extensions: { 'org.primer.figma': { @@ -905,13 +893,9 @@ scopes: ['bgColor'], }, }, - mix: { - color: '{base.color.green.6}', - weight: 0.4, - }, }, disabled: { - $value: '{base.color.green.4}', + $value: '#95d8a6', $type: 'color', $extensions: { 'org.primer.figma': { @@ -920,10 +904,6 @@ scopes: ['bgColor'], }, }, - mix: { - color: '{base.color.green.0}', - weight: 0.6, - }, }, }, borderColor: { @@ -1210,7 +1190,7 @@ }, }, active: { - $value: '{bgColor.accent.emphasis}', + $value: '#0757ba', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1219,10 +1199,6 @@ scopes: ['bgColor'], }, }, - mix: { - color: '{base.color.blue.7}', - weight: 0.4, - }, }, disabled: { $value: '{control.bgColor.disabled}', @@ -1357,7 +1333,7 @@ }, }, active: { - $value: '{base.color.red.6}', + $value: '#8b0820', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1366,10 +1342,6 @@ scopes: ['bgColor'], }, }, - mix: { - color: '{base.color.red.8}', - weight: 0.4, - }, }, disabled: { $value: '{control.bgColor.disabled}', @@ -1621,7 +1593,7 @@ }, fgColor: { rest: { - $value: '{base.color.red.5}', + $value: '#c21c2c', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1630,10 +1602,6 @@ scopes: ['fgColor'], }, }, - mix: { - color: '{base.color.red.6}', - weight: 0.3, - }, }, hover: { $value: '{base.color.neutral.0}', @@ -1676,7 +1644,7 @@ }, }, hover: { - $value: '{reactionButton.selected.bgColor.rest}', + $value: '#caecff', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1685,10 +1653,6 @@ scopes: ['bgColor'], }, }, - mix: { - color: '{base.color.blue.2}', - weight: 0.2, - }, }, }, fgColor: { diff --git a/src/tokens/functional/color/light/primitives-light.json5 b/src/tokens/functional/color/light/primitives-light.json5 index 424ebf946..83952a126 100644 --- a/src/tokens/functional/color/light/primitives-light.json5 +++ b/src/tokens/functional/color/light/primitives-light.json5 @@ -182,7 +182,7 @@ }, }, danger: { - $value: '{base.color.red.5}', + $value: '#d1242f', $type: 'color', $extensions: { 'org.primer.figma': { @@ -194,10 +194,6 @@ }, }, }, - mix: { - color: '{base.color.red.4}', - weight: 0.05, - }, }, closed: { $value: '{fgColor.danger}', @@ -442,7 +438,7 @@ }, }, emphasis: { - $value: '{base.color.green.4}', + $value: '#1f883d', $type: 'color', $extensions: { 'org.primer.figma': { @@ -454,10 +450,6 @@ }, }, }, - mix: { - color: '{base.color.green.5}', - weight: 0.75, - }, }, }, open: { diff --git a/src/transformers/colorToHexMix.test.ts b/src/transformers/colorToHexMix.test.ts deleted file mode 100644 index d990e6bc1..000000000 --- a/src/transformers/colorToHexMix.test.ts +++ /dev/null @@ -1,83 +0,0 @@ -import {getMockToken} from '../test-utilities/index.js' -import {colorToHexMix} from './colorToHexMix.js' - -describe('Transformer: colorToHexMix', () => { - it('transforms hex3, hex6 `color` tokens with mix', () => { - const input = [ - getMockToken({ - $value: '#567', - mix: { - color: '#000', - weight: 0.5, - }, - }), - getMockToken({ - $value: '#556677', - mix: { - color: '#000', - weight: 0.5, - }, - }), - ] - const expectedOutput = ['#2b333c', '#2b333c'] - expect(input.map(item => colorToHexMix.transform(item, {}, {}))).toStrictEqual(expectedOutput) - }) - - it('transforms color with mix but ignores alpha property of token', () => { - const input = [ - getMockToken({ - $value: '#556677', - alpha: 0.4, - mix: { - color: '#000', - weight: 0.2, - }, - }), - ] - const expectedOutput = ['#44525f'] - expect(input.map(item => colorToHexMix.transform(item, {}, {}))).toStrictEqual(expectedOutput) - }) - - it('transforms color with mix and merges alpha from hex8', () => { - const input = [ - getMockToken({ - $value: '#55667755', - mix: { - color: '#000', - weight: 0.2, - }, - }), - getMockToken({ - $value: '#55667755', - mix: { - color: '#00000022', - weight: 0.2, - }, - }), - ] - const expectedOutput = ['#51617177', '#3e4a574b'] - expect(input.map(item => colorToHexMix.transform(item, {}, {}))).toStrictEqual(expectedOutput) - }) - - it('ignore mix if undefined or weight or color is undefined', () => { - const input = [ - getMockToken({ - $value: '#556677', - }), - getMockToken({ - $value: '#556677', - mix: { - weight: 0.2, - }, - }), - getMockToken({ - $value: '#556677', - mix: { - color: '#000000', - }, - }), - ] - const expectedOutput = ['#556677', '#556677', '#556677'] - expect(input.map(item => colorToHexMix.transform(item, {}, {}))).toStrictEqual(expectedOutput) - }) -}) diff --git a/src/transformers/colorToHexMix.ts b/src/transformers/colorToHexMix.ts deleted file mode 100644 index ff63a3656..000000000 --- a/src/transformers/colorToHexMix.ts +++ /dev/null @@ -1,20 +0,0 @@ -import {toHex} from 'color2k' -import {isColorWithMix} from '../filters/index.js' -import {getTokenValue} from './utilities/getTokenValue.js' -import mix from './utilities/mix.js' -import type {Transform, TransformedToken} from 'style-dictionary/types' -/** - * @description replaces tokens value with `hex8` color using the tokens `alpha` property to specify the value used for alpha - * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts) - * @matcher matches all tokens of $type `color` with an `alpha` property - * @transformer returns `hex8` string - */ -export const colorToHexMix: Transform = { - name: 'color/hexMix', - type: 'value', - transitive: true, - filter: isColorWithMix, - transform: (token: TransformedToken) => { - return toHex(mix(getTokenValue(token), token.mix?.color || getTokenValue(token), token.mix?.weight || 0)) - }, -} diff --git a/src/transformers/colorToRgbaFloat.test.ts b/src/transformers/colorToRgbaFloat.test.ts index 62fe5b73c..608778462 100644 --- a/src/transformers/colorToRgbaFloat.test.ts +++ b/src/transformers/colorToRgbaFloat.test.ts @@ -1,6 +1,5 @@ import {getMockToken} from '../test-utilities/index.js' import {colorToRgbaFloat} from './colorToRgbaFloat.js' -import {rgbaFloatToHex} from './utilities/rgbaFloatToHex.js' describe('Transformer: colorToRgbaFloat', () => { it('transforms `hex3`, `hex6`, and `hex8` tokens to rgb float value', () => { @@ -87,53 +86,6 @@ describe('Transformer: colorToRgbaFloat', () => { ]) }) - it('transforms `color` tokens including mix', () => { - expect( - [ - getMockToken({name: 'Mix of reds', $value: '#a40e26', mix: {color: '#660018', weight: 0.4}}), - getMockToken({$value: '#34343466', mix: {color: '#000000'}}), - getMockToken({$value: 'rgb(100,200,255)', mix: {weight: 0.5}}), - getMockToken({$value: 'rgba(100,200,255,0.8)', mix: {color: undefined, weight: undefined}}), - ].map(item => colorToRgbaFloat.transform(item, {}, {})), - ).toStrictEqual([ - { - b: 0.12549019607843137, - g: 0.03137254901960784, - r: 0.5450980392156862, - a: 1, - }, - { - r: 0.20392156862745098, - g: 0.20392156862745098, - b: 0.20392156862745098, - a: 0.4, - }, - { - r: 0.39215686274509803, - g: 0.7843137254901961, - b: 1, - a: 1, - }, - { - r: 0.39215686274509803, - g: 0.7843137254901961, - b: 1, - a: 0.8, - }, - ]) - - expect( - [ - getMockToken({name: 'Mix of reds', $value: '#a40e26', mix: {color: '#660018', weight: 0.4}}), - getMockToken({$value: '#34343466', mix: {color: '#000000'}}), - getMockToken({$value: 'rgb(100,200,255)', mix: {weight: 0.5}}), - getMockToken({$value: 'rgba(100,200,255,0.8)', mix: {color: undefined, weight: undefined}}), - ] - .map(item => colorToRgbaFloat.transform(item, {}, {}) as {r: number; g: number; b: number; a?: number}) - .map(item => rgbaFloatToHex(item)), - ).toStrictEqual(['#8b0820', '#34343466', '#64c8ff', '#64c8ffcc']) - }) - it('it forwards `rgb float` values', () => { const input = [ getMockToken({ diff --git a/src/transformers/colorToRgbaFloat.ts b/src/transformers/colorToRgbaFloat.ts index e87919f65..34107495e 100644 --- a/src/transformers/colorToRgbaFloat.ts +++ b/src/transformers/colorToRgbaFloat.ts @@ -2,26 +2,17 @@ import {toHex} from 'color2k' import {isColor} from '../filters/index.js' import {getTokenValue} from './utilities/getTokenValue.js' import {rgbaFloatToHex} from './utilities/rgbaFloatToHex.js' -import mix from './utilities/mix.js' import {hexToRgbaFloat} from './utilities/hexToRgbaFloat.js' import {isRgbaFloat} from './utilities/isRgbaFloat.js' import type {Transform, TransformedToken} from 'style-dictionary/types' const toRgbaFloat = (token: TransformedToken, alpha: undefined | number = undefined) => { let tokenValue = getTokenValue(token) - let tokenMixColor = token.mix?.color // get hex value from color string if (isRgbaFloat(tokenValue)) { tokenValue = rgbaFloatToHex(tokenValue, false) } - if (tokenMixColor && isRgbaFloat(tokenMixColor)) { - tokenMixColor = rgbaFloatToHex(tokenMixColor, false) - } - let hex = toHex(tokenValue) - // mix color with mix color and weight - if (token.mix && token.mix.color && token.mix.weight) { - hex = toHex(mix(tokenValue, tokenMixColor, token.mix.weight)) - } + const hex = toHex(tokenValue) // return color as RgbaFloat return hexToRgbaFloat(hex, alpha) } @@ -40,7 +31,7 @@ export const colorToRgbaFloat: Transform = { transform: (token: TransformedToken) => { const value = getTokenValue(token) // skip if value is already rgb float - if (isRgbaFloat(value) && !('mix' in token) && !('alpha' in token)) return value + if (isRgbaFloat(value) && !('alpha' in token)) return value // convert hex or rgb values to rgba float return toRgbaFloat(token, token.alpha) }, diff --git a/src/transformers/index.ts b/src/transformers/index.ts index 9225abddf..2f581164e 100644 --- a/src/transformers/index.ts +++ b/src/transformers/index.ts @@ -1,6 +1,5 @@ export {borderToCss} from './borderToCss.js' export {colorToHex} from './colorToHex.js' -export {colorToHexMix} from './colorToHexMix.js' export {colorToRgbAlpha} from './colorToRgbAlpha.js' export {colorToRgbaFloat} from './colorToRgbaFloat.js' export {cubicBezierToCss} from './cubicBezierToCss.js' diff --git a/src/transformers/utilities/mix.ts b/src/transformers/utilities/mix.ts deleted file mode 100644 index 80d14499d..000000000 --- a/src/transformers/utilities/mix.ts +++ /dev/null @@ -1,46 +0,0 @@ -import {rgba, parseToRgba} from 'color2k' - -/** - * Mixes two colors together. Taken from sass's implementation. - */ -function mix(color1: string, color2: string, weight: number): string { - const normalize = (n: number, index: number) => - // 3rd index is alpha channel which is already normalized - index === 3 ? n : n / 255 - - const [r1, g1, b1, a1] = parseToRgba(color1).map(normalize) - const [r2, g2, b2, a2] = parseToRgba(color2).map(normalize) - - // The formula is copied from the original Sass implementation: - // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method - const normalizedWeight = 2 * weight - 1 - const alphaDelta = a1 - a2 - - const combinedWeight = - normalizedWeight * alphaDelta === -1 - ? normalizedWeight - : (normalizedWeight + alphaDelta) / (1 + normalizedWeight * alphaDelta) - - const weight2 = (combinedWeight + 1) / 2 - const weight1 = 1 - weight2 - const r = Math.round((r1 * weight1 + r2 * weight2) * 255) - const g = Math.round((g1 * weight1 + g2 * weight2) * 255) - const b = Math.round((b1 * weight1 + b2 * weight2) * 255) - const a = a2 * weight + a1 * (1 - weight) - return rgba(r, g, b, a) -} - -export default mix -// Number* weight = ARGR("$weight", Number, 0, 100); -// double p = weight->value()/100; -// double w = 2*p - 1; -// double a = color1->a() - color2->a(); -// double nW = ((w * a == -1) ? w : (w + a)/(1 + w*a)) -// double w1 = (nW + 1)/2.0; -// double w2 = 1 - w1; - -// return new (ctx.mem) Color(pstate, -// std::round(w1*color1->r() + w2*color2->r()), -// std::round(w1*color1->g() + w2*color2->g()), -// std::round(w1*color1->b() + w2*color2->b()), -// color1->a()*p + color2->a()*(1-p));