refactor: rename "Mode" to "Color scheme" and modes/colors to `mode…

…s/color-scheme` (#2808)

Closes #2799

Co-authored-by: Tobias Barsnes <[email protected]>

.changeset/fuzzy-needles-explode.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": minor
+---
+
+Changed name of Tokens Studio theme "Mode" to "Color scheme", and updated the path in the token structure from `primitives/modes/colors` to `primitives/modes/color-scheme`

design-tokens/$metadata.json

@@ -11,16 +11,16 @@
     "primitives/modes/typography/secondary/theme2",
     "primitives/modes/typography/secondary/theme3",
     "primitives/modes/typography/secondary/theme4",
-    "primitives/modes/colors/dark/global",
-    "primitives/modes/colors/dark/theme",
-    "primitives/modes/colors/dark/theme2",
-    "primitives/modes/colors/dark/theme3",
-    "primitives/modes/colors/dark/theme4",
-    "primitives/modes/colors/light/global",
-    "primitives/modes/colors/light/theme",
-    "primitives/modes/colors/light/theme2",
-    "primitives/modes/colors/light/theme3",
-    "primitives/modes/colors/light/theme4",
+    "primitives/modes/color-scheme/dark/global",
+    "primitives/modes/color-scheme/dark/theme",
+    "primitives/modes/color-scheme/dark/theme2",
+    "primitives/modes/color-scheme/dark/theme3",
+    "primitives/modes/color-scheme/dark/theme4",
+    "primitives/modes/color-scheme/light/global",
+    "primitives/modes/color-scheme/light/theme",
+    "primitives/modes/color-scheme/light/theme2",
+    "primitives/modes/color-scheme/light/theme3",
+    "primitives/modes/color-scheme/light/theme4",
     "themes/theme",
     "themes/theme2",
     "themes/theme3",
@@ -33,4 +33,4 @@
     "semantic/style",
     "Figma/components"
   ]
-}
+}

design-tokens/$themes.json

@@ -52,11 +52,11 @@
     "name": "Light",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "primitives/modes/colors/light/global": "enabled",
-      "primitives/modes/colors/light/theme": "enabled",
-      "primitives/modes/colors/light/theme2": "enabled",
-      "primitives/modes/colors/light/theme3": "enabled",
-      "primitives/modes/colors/light/theme4": "enabled"
+      "primitives/modes/color-scheme/light/global": "enabled",
+      "primitives/modes/color-scheme/light/theme": "enabled",
+      "primitives/modes/color-scheme/light/theme2": "enabled",
+      "primitives/modes/color-scheme/light/theme3": "enabled",
+      "primitives/modes/color-scheme/light/theme4": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:34811:5472",
     "$figmaModeId": "34811:0",
@@ -452,18 +452,18 @@
       "theme4.brand3.contrast-1": "61ffa3f921c9c346bc22448c458ba59a585be1cb",
       "theme4.brand3.contrast-2": "dcdfe1ec7245c3ee88fe149188d299456324b7a6"
     },
-    "group": "Mode"
+    "group": "Color scheme"
   },
   {
     "id": "9ebd8aed52afbffc17e2666e8b4653a53498b257",
     "name": "Dark",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "primitives/modes/colors/dark/global": "enabled",
-      "primitives/modes/colors/dark/theme": "enabled",
-      "primitives/modes/colors/dark/theme2": "enabled",
-      "primitives/modes/colors/dark/theme3": "enabled",
-      "primitives/modes/colors/dark/theme4": "enabled"
+      "primitives/modes/color-scheme/dark/global": "enabled",
+      "primitives/modes/color-scheme/dark/theme": "enabled",
+      "primitives/modes/color-scheme/dark/theme2": "enabled",
+      "primitives/modes/color-scheme/dark/theme3": "enabled",
+      "primitives/modes/color-scheme/dark/theme4": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:34811:5472",
     "$figmaModeId": "34811:1",
@@ -859,7 +859,7 @@
       "theme4.brand3.contrast-1": "61ffa3f921c9c346bc22448c458ba59a585be1cb",
       "theme4.brand3.contrast-2": "dcdfe1ec7245c3ee88fe149188d299456324b7a6"
     },
-    "group": "Mode"
+    "group": "Color scheme"
   },
   {
     "id": "368d753fcac4455f289500eaa42e70dc0a03522f",
@@ -2012,4 +2012,4 @@
       "color.support.contrast-subtle": "8877c9d01a93b1beb827a49de54766fca3b46198"
     }
   }
-]
+]

packages/cli/src/colors/theme.ts

@@ -32,18 +32,18 @@ type ThemeGenType = {
  * Generates a Leonardo theme color that is used to create a Leonardo Theme
  *
  * @param color CssColor
- * @param mode Light, Dark or Contrastmode
+ * @param colorScheme Light, Dark or Contrast
  * @param contrastMode Contrast mode
  * @returns
  */
-const generateThemeColor = (color: CssColor, mode: ColorMode, contrastMode: 'aa' | 'aaa' = 'aa') => {
+const generateThemeColor = (color: CssColor, colorScheme: ColorMode, contrastMode: 'aa' | 'aaa' = 'aa') => {
   const leoBackgroundColor = new BackgroundColor({
     name: 'backgroundColor',
     colorKeys: ['#ffffff'],
     ratios: [1],
   });
   let colorLightness = getLightnessFromHex(color);
-  if (mode === 'dark' || mode === 'contrast') {
+  if (colorScheme === 'dark' || colorScheme === 'contrast') {
     color = getBaseColor(color);
     colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
   }
@@ -76,9 +76,9 @@ const generateThemeColor = (color: CssColor, mode: ColorMode, contrastMode: 'aa'
 
   let lightnessScale: number[] = [];
 
-  if (mode === 'light') {
+  if (colorScheme === 'light') {
     lightnessScale = [100, 96, 90, 84, 78, 76, 54, 33, textSubLightLightness, textDefLightLightness];
-  } else if (mode === 'dark') {
+  } else if (colorScheme === 'dark') {
     lightnessScale = [10, 14, 20, 26, 32, 35, 47, 77, textSubDarkLightness, textDefDarkLightness];
   } else {
     lightnessScale = [1, 6, 14, 20, 26, 58, 70, 82, 80, 95];
@@ -106,14 +106,14 @@ const generateThemeColor = (color: CssColor, mode: ColorMode, contrastMode: 'aa'
  * Generates a color scale based on a base color and a mode.
  *
  * @param color The base color that is used to generate the color scale
- * @param mode The mode of the theme
+ * @param colorScheme The color scheme to generate a scale for
  */
 export const generateScaleForColor = (
   color: CssColor,
-  mode: ColorMode,
+  colorScheme: ColorMode,
   contrastMode: 'aa' | 'aaa' = 'aa',
 ): ColorInfo[] => {
-  const themeColor = generateThemeColor(color, mode, contrastMode);
+  const themeColor = generateThemeColor(color, colorScheme, contrastMode);
 
   const leoBackgroundColor = new BackgroundColor({
     name: 'backgroundColor',
@@ -146,7 +146,7 @@ export const generateScaleForColor = (
     name: getColorNameFromNumber(15),
   });
 
-  if (mode === 'light') {
+  if (colorScheme === 'light') {
     outputArray[8].hex = color;
   }
 

packages/cli/src/init/createTokensPackage.ts

@@ -234,17 +234,17 @@ Will now create the following:
     for (const mode of modes.map(normalizeTokenSetName)) {
       // Copy the global file for the color mode
       await fs.cp(
-        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/colors/${mode}/global.json`),
-        path.join(TOKENS_TARGET_DIR, `primitives/modes/colors/${mode}/global.json`),
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/color-scheme/${mode}/global.json`),
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/color-scheme/${mode}/global.json`),
         { recursive: true },
       );
 
       // Create theme primitives for the color mode
       const template = await fs.readFile(
-        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/colors/${mode}/theme-template.json`),
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/color-scheme/${mode}/theme-template.json`),
       );
       await fs.writeFile(
-        path.join(TOKENS_TARGET_DIR, `primitives/modes/colors/${mode}/${theme}.json`),
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/color-scheme/${mode}/${theme}.json`),
         template.toString('utf-8').replaceAll('<theme>', theme),
       );
 

packages/cli/src/init/generateMetadataJson.ts

@@ -12,9 +12,9 @@ export default function generateMetadataJson(modes: Array<'Light' | 'Dark' | 'Co
       'primitives/modes/typography/primary/theme',
       'primitives/modes/typography/secondary/theme',
       ...modes.flatMap((mode) => [
-        `primitives/modes/colors/${normalizeTokenSetName(mode)}/global`,
+        `primitives/modes/color-scheme/${normalizeTokenSetName(mode)}/global`,
         ...themes.map(
-          (theme) => `primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
+          (theme) => `primitives/modes/color-scheme/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
         ),
       ]),
       ...themes.map((theme) => `themes/${normalizeTokenSetName(theme)}`),

packages/cli/src/init/generateThemesJson.ts

@@ -44,11 +44,11 @@ function generateModesGroup(modes: Array<'Light' | 'Dark' | 'Contrast'>, themes:
       id: randomUUID(),
       name: mode,
       selectedTokenSets: Object.fromEntries([
-        [`primitives/modes/colors/${normalizeTokenSetName(mode)}/global`, TokenSetStatus.ENABLED],
+        [`primitives/modes/color-scheme/${normalizeTokenSetName(mode)}/global`, TokenSetStatus.ENABLED],
         ...themes.map(
           (theme) =>
             [
-              `primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
+              `primitives/modes/color-scheme/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
               TokenSetStatus.ENABLED,
             ] as const,
         ),

packages/cli/src/init/nextStepsMarkdown.ts

@@ -3,7 +3,7 @@ import { normalizeTokenSetName, toGeneratedCssFileName } from './utils.js';
 
 export function nextStepsMarkdown(themes: string[], modes: Mode[], tokensTargetDir: string, packageName: string) {
   const themeModeCombinations = themes.flatMap((theme) =>
-    modes.map((mode): [theme: string, mode: string] => [theme, mode]),
+    modes.map((colorScheme): [theme: string, colorScheme: string] => [theme, colorScheme]),
   );
   const themeOrThemes = `theme${themes.length > 1 ? 's' : ''}`;
   const isOrAre = themes.length > 1 ? 'are' : 'is';
@@ -27,7 +27,7 @@ export function nextStepsMarkdown(themes: string[], modes: Mode[], tokensTargetD
 2. Press "Kopier tema"
 3. Under "Json til Figma", copy the contents under ${modes.join(' / ')} to
    the corresponding file under \`${tokensTargetDir}\`:
-${themeModeCombinations.map(([theme, mode]) => `     **${theme}, ${mode}**: \`primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}.json\`  `).join('\n')}
+${themeModeCombinations.map(([theme, mode]) => `     **${theme}, ${mode}**: \`primitives/modes/color-scheme/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}.json\`  `).join('\n')}
    This can also be done in Tokens Studio for Figma.
 4. **IMPORTANT!** In the JSON data you copied, replace \`theme\` on line 2
    with the correct theme identifier, depending on the theme you're customizing.

packages/cli/src/tokens/build.ts

@@ -35,14 +35,14 @@ const sd = new StyleDictionary();
  */
 const buildConfigs = {
   typography: { getConfig: configs.typographyVariables, dimensions: ['typography'] },
-  'color-scheme': { getConfig: configs.colorSchemeVariables, dimensions: ['mode'] },
+  'color-scheme': { getConfig: configs.colorSchemeVariables, dimensions: ['color-scheme'] },
   'main-color': { getConfig: configs.mainColorVariables, dimensions: ['main-color'] },
   'support-color': { getConfig: configs.supportColorVariables, dimensions: ['support-color'] },
   semantic: { getConfig: configs.semanticVariables, dimensions: ['semantic'] },
   storefront: {
     name: 'Storefront preview tokens',
     getConfig: configs.typescriptTokens,
-    dimensions: ['mode'],
+    dimensions: ['color-scheme'],
     options: { outPath: path.resolve('../../apps/storefront/tokens') },
     enabled: () => buildOptions?.preview ?? false,
   },

packages/cli/src/tokens/build/configs.ts

@@ -72,9 +72,12 @@ export type GetStyleDictionaryConfig = (
   },
 ) => StyleDictionaryConfig | { config: StyleDictionaryConfig; permutationOverrides?: Partial<ThemePermutation> }[];
 
-const colorSchemeVariables: GetStyleDictionaryConfig = ({ mode = 'light', theme }, { outPath }) => {
-  const selector = `${mode === 'light' ? ':root, ' : ''}[data-color-scheme="${mode}"]`;
-  const layer = `ds.theme.color-scheme.${mode}`;
+const colorSchemeVariables: GetStyleDictionaryConfig = (
+  { 'color-scheme': colorScheme = 'light', theme },
+  { outPath },
+) => {
+  const selector = `${colorScheme === 'light' ? ':root, ' : ''}[data-color-scheme="${colorScheme}"]`;
+  const layer = `ds.theme.color-scheme.${colorScheme}`;
 
   return {
     usesDtcg,
@@ -83,7 +86,7 @@ const colorSchemeVariables: GetStyleDictionaryConfig = ({ mode = 'light', theme
       css: {
         // custom
         outPath,
-        mode,
+        colorScheme,
         theme,
         selector,
         layer,
@@ -93,8 +96,8 @@ const colorSchemeVariables: GetStyleDictionaryConfig = ({ mode = 'light', theme
         transforms: dsTransformers,
         files: [
           {
-            destination: `color-scheme/${mode}.css`,
-            format: formats.colormode.name,
+            destination: `color-scheme/${colorScheme}.css`,
+            format: formats.colorScheme.name,
             filter: (token) => !token.isSource && typeEquals('color', token),
           },
         ],
@@ -109,7 +112,7 @@ const colorSchemeVariables: GetStyleDictionaryConfig = ({ mode = 'light', theme
 
 const colorCategoryVariables =
   (category: ColorCategories): GetStyleDictionaryConfig =>
-  ({ mode, theme, [`${category}-color` as const]: color }, { outPath }) => {
+  ({ 'color-scheme': colorScheme, theme, [`${category}-color` as const]: color }, { outPath }) => {
     const layer = `ds.theme.color`;
     const isDefault = color === buildOptions?.accentColor;
     const selector = `${isDefault ? ':root, ' : ''}[data-color="${color}"]`;
@@ -121,7 +124,7 @@ const colorCategoryVariables =
         css: {
           // custom
           outPath,
-          mode,
+          colorScheme,
           theme,
           selector,
           layer,
@@ -132,7 +135,7 @@ const colorCategoryVariables =
           files: [
             {
               destination: `color/${color}.css`,
-              format: formats.colorcategory.name,
+              format: formats.colorCategory.name,
               filter: (token) => isColorCategoryToken(token, category),
             },
           ],
@@ -221,7 +224,7 @@ const semanticVariables: GetStyleDictionaryConfig = ({ theme }, { outPath }) =>
   };
 };
 
-const typescriptTokens: GetStyleDictionaryConfig = ({ mode, theme }, { outPath }) => {
+const typescriptTokens: GetStyleDictionaryConfig = ({ 'color-scheme': colorScheme, theme }, { outPath }) => {
   return {
     usesDtcg,
     preprocessors: ['tokens-studio'],
@@ -233,7 +236,7 @@ const typescriptTokens: GetStyleDictionaryConfig = ({ mode, theme }, { outPath }
         buildPath: `${outPath}/${theme}/`,
         files: [
           {
-            destination: `${mode}.ts`,
+            destination: `${colorScheme}.ts`,
             format: jsTokens.name,
             outputReferences: outputColorReferences,
             filter: (token: TransformedToken) => {

packages/cli/src/tokens/build/formats/css.ts

@@ -6,20 +6,20 @@ import { createPropertyFormatter, fileHeader, usesReferences } from 'style-dicti
 import { type IsCalculatedToken, colorCategories } from '../types.js';
 import { getValue, isColorCategoryToken, isGlobalColorToken, isSemanticToken } from '../utils/utils.js';
 
-const prefersColorScheme = (mode: string, content: string) => `
-@media (prefers-color-scheme: ${mode}) {
+const prefersColorScheme = (colorScheme: string, content: string) => `
+@media (prefers-color-scheme: ${colorScheme}) {
   [data-color-scheme="auto"] ${content}
 }
 `;
 
-const colormode: Format = {
-  name: 'ds/css-colormode',
+const colorScheme: Format = {
+  name: 'ds/css-colorscheme',
   format: async ({ dictionary, file, options, platform }) => {
     const { allTokens } = dictionary;
     const { outputReferences, usesDtcg } = options;
-    const { selector, mode, layer } = platform;
+    const { selector, colorScheme, layer } = platform;
 
-    const mode_ = mode as string;
+    const colorScheme_ = colorScheme as string;
 
     const header = await fileHeader({ file });
 
@@ -30,7 +30,8 @@ const colormode: Format = {
       usesDtcg,
     });
 
-    const colorSchemeProperty = mode_ === 'dark' || mode_ === 'light' ? `\n  color-scheme: ${mode_};\n` : '';
+    const colorSchemeProperty =
+      colorScheme_ === 'dark' || colorScheme_ === 'light' ? `\n  color-scheme: ${colorScheme_};\n` : '';
 
     const filteredAllTokens = allTokens.filter(
       R.allPass([
@@ -46,7 +47,9 @@ const colormode: Format = {
     );
     const formattedTokens = filteredAllTokens.map(format).join('\n');
     const content = `{\n${formattedTokens}\n${colorSchemeProperty}}\n`;
-    const autoSelectorContent = ['light', 'dark'].includes(mode_) ? prefersColorScheme(mode_, content) : '';
+    const autoSelectorContent = ['light', 'dark'].includes(colorScheme_)
+      ? prefersColorScheme(colorScheme_, content)
+      : '';
     const body = R.isNotNil(layer)
       ? `@layer ${layer} {\n${selector} ${content} ${autoSelectorContent}\n}\n`
       : `${selector} ${content} ${autoSelectorContent}\n`;
@@ -61,7 +64,7 @@ declare module 'style-dictionary/types' {
   }
 }
 
-const colorcategory: Format = {
+const colorCategory: Format = {
   name: 'ds/css-colorcategory',
   format: async ({ dictionary, file, options, platform }) => {
     const { outputReferences, usesDtcg, replaceCategoryWith = '' } = options;
@@ -167,8 +170,8 @@ const typography: Format = {
 };
 
 export const formats = {
-  colormode,
-  colorcategory,
+  colorScheme,
+  colorCategory,
   semantic,
   typography,
 } satisfies Record<string, Format>;

packages/cli/src/tokens/build/types.ts

@@ -11,7 +11,7 @@ export type ColorCategories = keyof typeof colorCategories;
  * A multi-dimensional theme is a concrete permutation of the possible theme dimensions
  */
 export type ThemePermutation = {
-  mode: string;
+  'color-scheme': string;
   'main-color': string;
   'support-color': string;
   semantic: string;