[Darkside] Updated global colors config

feat: Avoid caching config for color-tokens feat: Remove use of leonardo, hardcode global config feat: Update 100-400 scale for darkmode feat: Update 500-1000 scale for global colors
navikt · Oct 4, 2024 · 4675857 · 4675857
1 parent 2a6e416
commit 4675857
Show file tree

Hide file tree

Showing 10 changed files with 274 additions and 381 deletions.
diff --git a/.github/workflows/figma-config.yml b/.github/workflows/figma-config.yml
@@ -44,6 +44,7 @@ jobs:
           project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
           identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
           source_keep_parent_name: false
+          no_cache_paths: "./@navikt/tokens/figma-config.json"
 
       - run: echo uploaded file ${{ steps.upload.outputs.uploaded }}
         shell: bash
diff --git a/@navikt/core/tokens/darkside/create-configuration.ts b/@navikt/core/tokens/darkside/create-configuration.ts
@@ -1,29 +1,11 @@
-import { getGlobalScaleForColor } from "./leonardo";
 import { contrastTokenConfig } from "./tokens/contrast";
-import { neutralTokenConfig } from "./tokens/neutral";
+import { globalColorDarkModeConfig } from "./tokens/global-dark";
+import { globalColorLightModeConfig } from "./tokens/global-light";
 import { radiusTokenConfig } from "./tokens/radius";
 import { semanticTokenConfig } from "./tokens/semantic";
 import { semanticTokensForAllRolesConfig } from "./tokens/semantic-roles";
 import { spacingTokenConfig } from "./tokens/spacing";
-import {
-  ColorTheme,
-  GlobalColorVariable,
-  globalColorRoles,
-  mergeConfigs,
-  tokensWithPrefix,
-} from "./util";
-
-export const globalScale = (
-  theme: ColorTheme,
-): Record<string, GlobalColorVariable> => {
-  return globalColorRoles.reduce(
-    (acc, role) => {
-      acc[role] = getGlobalScaleForColor(role, theme);
-      return acc;
-    },
-    {} as Record<string, GlobalColorVariable>,
-  );
-};
+import { mergeConfigs, tokensWithPrefix } from "./util";
 
 /**
  * Collection of configs for:
@@ -37,8 +19,7 @@ export const lightModeTokens = () => {
       semanticTokensForAllRolesConfig(),
       contrastTokenConfig(),
       semanticTokenConfig("light"),
-      neutralTokenConfig("light"),
-      globalScale("light"),
+      globalColorLightModeConfig,
     ]),
   );
 };
@@ -53,8 +34,7 @@ export const darkModeTokens = () => {
       semanticTokensForAllRolesConfig(),
       contrastTokenConfig(),
       semanticTokenConfig("dark"),
-      neutralTokenConfig("dark"),
-      globalScale("dark"),
+      globalColorDarkModeConfig,
     ]),
   );
 };

diff --git a/@navikt/core/tokens/darkside/leonardo.ts b/@navikt/core/tokens/darkside/leonardo.ts
diff --git a/@navikt/core/tokens/darkside/tokens/global-dark.ts b/@navikt/core/tokens/darkside/tokens/global-dark.ts
@@ -1,98 +1,142 @@
-import { BackgroundColor, Color, Theme } from "@adobe/leonardo-contrast-colors";
-import { GlobalColorConfig } from "../util";
+import { GlobalConfigT } from "../util";
 
-export const config: GlobalColorConfig = {
-  /* Core */
+export const globalColorDarkModeConfig: GlobalConfigT = {
   neutral: {
-    colorKeys: ["#838c9a"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
-    smooth: false,
+    "000": {
+      value: "black",
+      type: "global-color",
+      group: "neutral",
+    },
+    "100": { value: "#1a1d21", type: "global-color", group: "neutral" },
+    "200": { value: "#202327", type: "global-color", group: "neutral" },
+    "300": { value: "#282b2f", type: "global-color", group: "neutral" },
+    "400": { value: "#33363a", type: "global-color", group: "neutral" },
+    "500": { value: "#666d77", type: "global-color", group: "neutral" },
+    "600": { value: "#787e89", type: "global-color", group: "neutral" },
+    "700": { value: "#8c929d", type: "global-color", group: "neutral" },
+    "800": { value: "#959ca5", type: "global-color", group: "neutral" },
+    "900": { value: "#a6acb4", type: "global-color", group: "neutral" },
+    "1000": { value: "#c5c9ce", type: "global-color", group: "neutral" },
   },
   accent: {
-    colorKeys: ["#e6f0ff", "#0067c5"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
-    smooth: true,
+    "100": { value: "#101d2d", type: "global-color", group: "accent" },
+    "200": { value: "#152436", type: "global-color", group: "accent" },
+    "300": { value: "#1a2c41", type: "global-color", group: "accent" },
+    "400": { value: "#23374f", type: "global-color", group: "accent" },
+    "500": { value: "#2e6db8", type: "global-color", group: "accent" },
+    "600": { value: "#447fc9", type: "global-color", group: "accent" },
+    "700": { value: "#5f94d8", type: "global-color", group: "accent" },
+    "800": { value: "#6d9ddd", type: "global-color", group: "accent" },
+    "900": { value: "#84aee6", type: "global-color", group: "accent" },
+    "1000": { value: "#b0caf1", type: "global-color", group: "accent" },
   },
-  /* Status */
   success: {
-    colorKeys: ["#e6ffeb", "#2aa758"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
-    smooth: false,
-  },
-  /**
-   * TODO: This is currently just a copy of brandThree
-   * - Should info still exist as a global color?
-   * - If not, should the semantic colors be generated for info based on brandThree?
-   */
-  info: {
-    colorKeys: ["#005b82", "#e6f1f8", "#00243a"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
-    smooth: true,
+    "100": { value: "#00230b", type: "global-color", group: "success" },
+    "200": { value: "#032911", type: "global-color", group: "success" },
+    "300": { value: "#0b3118", type: "global-color", group: "success" },
+    "400": { value: "#183d24", type: "global-color", group: "success" },
+    "500": { value: "#207c41", type: "global-color", group: "success" },
+    "600": { value: "#368e52", type: "global-color", group: "success" },
+    "700": { value: "#4ca265", type: "global-color", group: "success" },
+    "800": { value: "#5eab72", type: "global-color", group: "success" },
+    "900": { value: "#78ba87", type: "global-color", group: "success" },
+    "1000": { value: "#a4d4ad", type: "global-color", group: "success" },
   },
   warning: {
-    colorKeys: ["#ffbe4d", "#f56e00", "#cc5200"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
-    smooth: false,
+    "100": { value: "#371100", type: "global-color", group: "warning" },
+    "200": { value: "#3e1704", type: "global-color", group: "warning" },
+    "300": { value: "#471f0c", type: "global-color", group: "warning" },
+    "400": { value: "#542b18", type: "global-color", group: "warning" },
+    "500": { value: "#af5122", type: "global-color", group: "warning" },
+    "600": { value: "#c46233", type: "global-color", group: "warning" },
+    "700": { value: "#de753c", type: "global-color", group: "warning" },
+    "800": { value: "#e78040", type: "global-color", group: "warning" },
+    "900": { value: "#ed974b", type: "global-color", group: "warning" },
+    "1000": { value: "#f5bf6d", type: "global-color", group: "warning" },
   },
   danger: {
-    colorKeys: ["#ffb3cd", "#f93448"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
-    smooth: false,
+    "100": { value: "#410409", type: "global-color", group: "danger" },
+    "200": { value: "#490b10", type: "global-color", group: "danger" },
+    "300": { value: "#521517", type: "global-color", group: "danger" },
+    "400": { value: "#5f2021", type: "global-color", group: "danger" },
+    "500": { value: "#c8343f", type: "global-color", group: "danger" },
+    "600": { value: "#dd4a50", type: "global-color", group: "danger" },
+    "700": { value: "#eb6772", type: "global-color", group: "danger" },
+    "800": { value: "#ee7685", type: "global-color", group: "danger" },
+    "900": { value: "#f28ea2", type: "global-color", group: "danger" },
+    "1000": { value: "#f6b7cd", type: "global-color", group: "danger" },
+  },
+  /* Info is currently just a copy of brandThree */
+  info: {
+    "100": { value: "#131e26", type: "global-color", group: "brandThree" },
+    "200": { value: "#18242c", type: "global-color", group: "brandThree" },
+    "300": { value: "#1e2c35", type: "global-color", group: "brandThree" },
+    "400": { value: "#273843", type: "global-color", group: "brandThree" },
+    "500": { value: "#43718d", type: "global-color", group: "brandThree" },
+    "600": { value: "#5a839b", type: "global-color", group: "brandThree" },
+    "700": { value: "#7396ab", type: "global-color", group: "brandThree" },
+    "800": { value: "#7f9fb3", type: "global-color", group: "brandThree" },
+    "900": { value: "#93afc0", type: "global-color", group: "brandThree" },
+    "1000": { value: "#b7cbd7", type: "global-color", group: "brandThree" },
   },
-  /* Brand */
   brandOne: {
-    colorKeys: ["#99185e", "#7a134b"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
-    smooth: false,
+    "100": { value: "#321220", type: "global-color", group: "brandOne" },
+    "200": { value: "#3a1827", type: "global-color", group: "brandOne" },
+    "300": { value: "#42202e", type: "global-color", group: "brandOne" },
+    "400": { value: "#4e2a39", type: "global-color", group: "brandOne" },
+    "500": { value: "#a35276", type: "global-color", group: "brandOne" },
+    "600": { value: "#b06886", type: "global-color", group: "brandOne" },
+    "700": { value: "#be7f99", type: "global-color", group: "brandOne" },
+    "800": { value: "#c58aa2", type: "global-color", group: "brandOne" },
+    "900": { value: "#cf9eb1", type: "global-color", group: "brandOne" },
+    "1000": { value: "#e1c0cc", type: "global-color", group: "brandOne" },
   },
   brandTwo: {
-    colorKeys: ["#fff3ec", "#cc8066"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
-    smooth: false,
+    "100": { value: "#2d160e", type: "global-color", group: "brandTwo" },
+    "200": { value: "#351d15", type: "global-color", group: "brandTwo" },
+    "300": { value: "#3d241c", type: "global-color", group: "brandTwo" },
+    "400": { value: "#493027", type: "global-color", group: "brandTwo" },
+    "500": { value: "#975e4a", type: "global-color", group: "brandTwo" },
+    "600": { value: "#ab6f5b", type: "global-color", group: "brandTwo" },
+    "700": { value: "#c0836e", type: "global-color", group: "brandTwo" },
+    "800": { value: "#c78e79", type: "global-color", group: "brandTwo" },
+    "900": { value: "#d1a08c", type: "global-color", group: "brandTwo" },
+    "1000": { value: "#e3c2b1", type: "global-color", group: "brandTwo" },
   },
   brandThree: {
-    colorKeys: ["#e6f1f8", "#005b82", "#00243a"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
-    smooth: false,
+    "100": { value: "#131e26", type: "global-color", group: "brandThree" },
+    "200": { value: "#18242c", type: "global-color", group: "brandThree" },
+    "300": { value: "#1e2c35", type: "global-color", group: "brandThree" },
+    "400": { value: "#273843", type: "global-color", group: "brandThree" },
+    "500": { value: "#43718d", type: "global-color", group: "brandThree" },
+    "600": { value: "#5a839b", type: "global-color", group: "brandThree" },
+    "700": { value: "#7396ab", type: "global-color", group: "brandThree" },
+    "800": { value: "#7f9fb3", type: "global-color", group: "brandThree" },
+    "900": { value: "#93afc0", type: "global-color", group: "brandThree" },
+    "1000": { value: "#b7cbd7", type: "global-color", group: "brandThree" },
   },
-  /* Data */
   dataOne: {
-    colorKeys: ["#8269a2"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
-    smooth: false,
+    "100": { value: "#221a2c", type: "global-color", group: "dataOne" },
+    "200": { value: "#272032", type: "global-color", group: "dataOne" },
+    "300": { value: "#2f273a", type: "global-color", group: "dataOne" },
+    "400": { value: "#3a3245", type: "global-color", group: "dataOne" },
+    "500": { value: "#776491", type: "global-color", group: "dataOne" },
+    "600": { value: "#8876a1", type: "global-color", group: "dataOne" },
+    "700": { value: "#9b8bb0", type: "global-color", group: "dataOne" },
+    "800": { value: "#a495b7", type: "global-color", group: "dataOne" },
+    "900": { value: "#b2a7c3", type: "global-color", group: "dataOne" },
+    "1000": { value: "#cdc5d9", type: "global-color", group: "dataOne" },
   },
   dataTwo: {
-    colorKeys: ["#d9e61e"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
-    smooth: false,
+    "100": { value: "#1c1f00", type: "global-color", group: "dataTwo" },
+    "200": { value: "#222500", type: "global-color", group: "dataTwo" },
+    "300": { value: "#292d00", type: "global-color", group: "dataTwo" },
+    "400": { value: "#343900", type: "global-color", group: "dataTwo" },
+    "500": { value: "#6a7200", type: "global-color", group: "dataTwo" },
+    "600": { value: "#7c8400", type: "global-color", group: "dataTwo" },
+    "700": { value: "#8f9800", type: "global-color", group: "dataTwo" },
+    "800": { value: "#99a200", type: "global-color", group: "dataTwo" },
+    "900": { value: "#a9b325", type: "global-color", group: "dataTwo" },
+    "1000": { value: "#c5d14c", type: "global-color", group: "dataTwo" },
   },
 };
-
-const colors = Object.entries(config).map(
-  ([role, color]) =>
-    new Color({
-      name: role,
-      colorKeys: color.colorKeys,
-      ratios: color.ratios,
-      colorspace: "OKLCH",
-      smooth: color.smooth,
-    }),
-);
-
-const background = new BackgroundColor({
-  name: "neutral",
-  colorKeys: config.neutral.colorKeys,
-  ratios: config.neutral.ratios,
-  colorspace: "OKLCH",
-  smooth: config.neutral.smooth,
-});
-
-export const globalDarkThemeConfig = new Theme({
-  colors,
-  backgroundColor: background,
-  lightness: 13,
-  contrast: 1,
-  saturation: 100,
-  output: "HEX",
-  formula: "wcag2",
-}).contrastColors;