From b4ac5524328ed01ada4757a1a73e75ecc71488e0 Mon Sep 17 00:00:00 2001 From: Tim Giles Jr <6314039+TGiles@users.noreply.github.com> Date: Tue, 23 Jan 2024 15:56:22 -0500 Subject: [PATCH 1/2] FIDEFE-4643 - Use value object in design-tokens.json By using the composite design token value structure, we gain flexibility in handling themed and non-themed tokens as well as other cases that we are not aware of. For example, this composite value structure can be used to handle prefers-contrast theming, forced-colors (HCM) theming, etc. We also add the ability to use "default" as the default value of tokens. This handles the case where a token has the same value in light and dark mode but has a different value in perfers-contrast or forced-colors mode. Currently "default" is the highest priority property of the value object. If you have "light", "dark" and "default" for a token's value, then the "default" property will be in the generated token and not the "light" or "dark" property values. --- toolkit/themes/shared/design-system/config.js | 23 ++++++++--- .../shared/design-system/design-tokens.json | 38 +++++++++++++------ 2 files changed, 44 insertions(+), 17 deletions(-) diff --git a/toolkit/themes/shared/design-system/config.js b/toolkit/themes/shared/design-system/config.js index 45ffe7f3550c9..aa42f0f1c3718 100644 --- a/toolkit/themes/shared/design-system/config.js +++ b/toolkit/themes/shared/design-system/config.js @@ -1,3 +1,4 @@ + /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ @@ -9,22 +10,34 @@ const StyleDictionary = require("style-dictionary"); module.exports = { source: ["design-tokens.json"], transform: { + defaultTransform: { + type: "value", + transitive: true, + name: "defaultTransform", + matcher: token => token.original.value.default, + transformer: token => token.original.value.default + }, lightDarkTransform: { type: "value", transitive: true, name: "lightDarkTransform", matcher: token => token.original.value && token.original.dark, transformer: token => { - let lightDarkValue = `light-dark(${token.original.value}, ${token.original.dark})`; - // modify the original value and everything works like magic - token.original.value = lightDarkValue; - return lightDarkValue; + return `light-dark(${token.original.value.light}, ${token.original.value.dark})`; }, }, }, platforms: { css: { - transforms: [...StyleDictionary.transformGroup.css, "lightDarkTransform"], + // The ordering of transforms matter, so if we encountered + // "light", "dark", and "default" in the value object then + // this ordering would ensure that the "default" value is + // used to generate the token's value. + transforms: [ + ...StyleDictionary.transformGroup.css, + "lightDarkTransform", + "defaultTransform", + ], buildPath: "build/css/", files: [ { diff --git a/toolkit/themes/shared/design-system/design-tokens.json b/toolkit/themes/shared/design-system/design-tokens.json index ecf7899800864..a875b559e34ca 100644 --- a/toolkit/themes/shared/design-system/design-tokens.json +++ b/toolkit/themes/shared/design-system/design-tokens.json @@ -106,20 +106,30 @@ }, "background": { "critical": { - "value": "{color.red.05}", - "dark": "{color.red.80}" + "value": { + "light": "{color.red.05}", + "dark": "{color.red.80}" + } }, "information": { - "value": "{color.blue.05}", - "dark": "{color.blue.80}" + "value": { + "light": "{color.blue.05}", + "dark": "{color.blue.80}" + } }, "success": { - "value": "{color.green.05}", - "dark": "{color.yellow.80}" + "value": { + "light": "{color.green.05}", + "dark": "{color.yellow.80}" + + } }, "warning": { - "value": "{color.yellow.05}", - "dark": "{color.blue.80}" + "value": { + "light": "{color.yellow.05}", + "dark": "{color.blue.80}" + + } } } }, @@ -128,15 +138,19 @@ "value": "CanvasText" }, "brand": { - "value": "{color.gray.100}", - "dark": "{color.gray.05}" + "value": { + "light": "{color.gray.100}", + "dark": "{color.gray.05}" + } }, "platform": { "value": "currentColor" }, "deemphasized": { - "value": "color-mix(in srgb, currentColor 60%, transparent)", - "prefersContrastValue": "inherit" + "value": { + "default": "color-mix(in srgb, currentColor 60%, transparent)", + "prefersContrast": "inherit" + } } } } From 1186e42127cbdf03b81541058e40b864ee471493 Mon Sep 17 00:00:00 2001 From: Tim Giles Jr <6314039+TGiles@users.noreply.github.com> Date: Thu, 25 Jan 2024 15:29:26 -0500 Subject: [PATCH 2/2] fix broken matcher function in lightDarkTransform --- toolkit/themes/shared/design-system/config.js | 2 +- toolkit/themes/shared/design-system/design-tokens.json | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/toolkit/themes/shared/design-system/config.js b/toolkit/themes/shared/design-system/config.js index aa42f0f1c3718..4bc3afd9ea187 100644 --- a/toolkit/themes/shared/design-system/config.js +++ b/toolkit/themes/shared/design-system/config.js @@ -21,7 +21,7 @@ module.exports = { type: "value", transitive: true, name: "lightDarkTransform", - matcher: token => token.original.value && token.original.dark, + matcher: token => token.original.value.light && token.original.value.dark, transformer: token => { return `light-dark(${token.original.value.light}, ${token.original.value.dark})`; }, diff --git a/toolkit/themes/shared/design-system/design-tokens.json b/toolkit/themes/shared/design-system/design-tokens.json index a875b559e34ca..aa58401118f7a 100644 --- a/toolkit/themes/shared/design-system/design-tokens.json +++ b/toolkit/themes/shared/design-system/design-tokens.json @@ -121,14 +121,12 @@ "value": { "light": "{color.green.05}", "dark": "{color.yellow.80}" - } }, "warning": { "value": { "light": "{color.yellow.05}", "dark": "{color.blue.80}" - } } }