From 4675857e8f41b39376d07cbeed5373b86a0b66e1 Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 4 Oct 2024 14:30:08 +0200 Subject: [PATCH] [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 --- .github/workflows/figma-config.yml | 1 + .../tokens/darkside/create-configuration.ts | 30 +-- @navikt/core/tokens/darkside/leonardo.ts | 84 -------- .../tokens/darkside/tokens/global-dark.ts | 196 +++++++++++------- .../tokens/darkside/tokens/global-light.ts | 193 ++++++++++------- .../core/tokens/darkside/tokens/neutral.ts | 27 --- .../core/tokens/darkside/tokens/semantic.ts | 2 +- @navikt/core/tokens/darkside/util.ts | 17 +- @navikt/core/tokens/package.json | 1 - yarn.lock | 104 ++-------- 10 files changed, 274 insertions(+), 381 deletions(-) delete mode 100644 @navikt/core/tokens/darkside/leonardo.ts delete mode 100644 @navikt/core/tokens/darkside/tokens/neutral.ts diff --git a/.github/workflows/figma-config.yml b/.github/workflows/figma-config.yml index 2f76efe8d0..12b3188a39 100644 --- 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 index d66b5bd3ad..2fa924fa88 100644 --- 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 => { - return globalColorRoles.reduce( - (acc, role) => { - acc[role] = getGlobalScaleForColor(role, theme); - return acc; - }, - {} as Record, - ); -}; +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 deleted file mode 100644 index d974f5d7b5..0000000000 --- a/@navikt/core/tokens/darkside/leonardo.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { ContrastColor, CssColor } from "@adobe/leonardo-contrast-colors"; -import { globalDarkThemeConfig } from "./tokens/global-dark"; -import { globalLightThemeConfig } from "./tokens/global-light"; -import { - ColorTheme, - GlobalColorRoles, - GlobalColorScale, - GlobalColorVariable, - globalColorRoles, - globalColorScales, -} from "./util"; - -const getColorScaleFromLeonardo = ( - role: GlobalColorRoles, - scale: GlobalColorScale, - theme: ColorTheme, -): CssColor => { - /* We have to remove 'ContrastColorBackground' from first position */ - const leonardoTheme = ( - theme === "light" ? globalLightThemeConfig : globalDarkThemeConfig - ).slice(1) as ContrastColor[]; - - const colorContrastRole = leonardoTheme.find((c) => c.name === role); - - if (!colorContrastRole) { - throw new Error(`Color ${role} not found in leonardo config`); - } - - /** - * @example colorContrastRole format - * { - * name: 'dataTwo', - * values: [ - * { name: 'dataTwo100', contrast: 1.08, value: '#200500' }, - * { name: 'dataTwo200', contrast: 1.16, value: '#2b0f00' }, - * ... - * ] - *} - */ - const color = colorContrastRole.values.find( - (value) => value.name === `${role}${scale}`, - ); - - if (!color || !color.value) { - throw new Error(`Color ${role}.${scale} not found in leonardo config`); - } - - return color.value; -}; - -type GlobalColor = { - value: string; - type: "global-color"; - group: GlobalColorRoles; -}; - -export const getGlobalScaleForColor = ( - role: GlobalColorRoles, - theme: ColorTheme, -): Record => { - return globalColorScales.reduce( - (acc, scale) => { - acc[scale] = { - value: getColorScaleFromLeonardo(role, scale, theme), - type: "global-color", - group: role, - }; - return acc; - }, - {} as Record, - ); -}; - -export const globalScale = ( - theme: ColorTheme, -): Record => { - return globalColorRoles.reduce( - (acc, role) => { - acc[role] = getGlobalScaleForColor(role, theme); - return acc; - }, - {} as Record, - ); -}; diff --git a/@navikt/core/tokens/darkside/tokens/global-dark.ts b/@navikt/core/tokens/darkside/tokens/global-dark.ts index 5e2def3600..33ccd64149 100644 --- 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; diff --git a/@navikt/core/tokens/darkside/tokens/global-light.ts b/@navikt/core/tokens/darkside/tokens/global-light.ts index 224c917f88..7ea50ceb52 100644 --- a/@navikt/core/tokens/darkside/tokens/global-light.ts +++ b/@navikt/core/tokens/darkside/tokens/global-light.ts @@ -1,96 +1,141 @@ -import { BackgroundColor, Color, Theme } from "@adobe/leonardo-contrast-colors"; -import { GlobalColorConfig } from "../util"; +import { GlobalConfigT } from "../util"; -export const config: GlobalColorConfig = { - /* Core */ +export const globalColorLightModeConfig: 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: "white", + type: "global-color", + group: "neutral", + }, + "100": { value: "#f5f6f7", type: "global-color", group: "neutral" }, + "200": { value: "#ecedef", type: "global-color", group: "neutral" }, + "300": { value: "#e1e3e7", type: "global-color", group: "neutral" }, + "400": { value: "#cfd3d8", type: "global-color", group: "neutral" }, + "500": { value: "#818997", type: "global-color", group: "neutral" }, + "600": { value: "#6f7785", type: "global-color", group: "neutral" }, + "700": { value: "#5d6573", type: "global-color", group: "neutral" }, + "800": { value: "#555d6a", type: "global-color", group: "neutral" }, + "900": { value: "#49515e", type: "global-color", group: "neutral" }, + "1000": { value: "#202733", 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: "#f1f7ff", type: "global-color", group: "accent" }, + "200": { value: "#e4eeff", type: "global-color", group: "accent" }, + "300": { value: "#d4e5fd", type: "global-color", group: "accent" }, + "400": { value: "#bad5fb", type: "global-color", group: "accent" }, + "500": { value: "#428ae3", type: "global-color", group: "accent" }, + "600": { value: "#2277d5", type: "global-color", group: "accent" }, + "700": { value: "#0063c1", type: "global-color", group: "accent" }, + "800": { value: "#005bb6", type: "global-color", group: "accent" }, + "900": { value: "#004ea3", type: "global-color", group: "accent" }, + "1000": { value: "#002459", type: "global-color", group: "accent" }, }, - /* Status */ success: { - colorKeys: ["#2aa758", "#e6ffeb"], - 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: "#e2fde8", type: "global-color", group: "success" }, + "200": { value: "#d5f6db", type: "global-color", group: "success" }, + "300": { value: "#c4edcd", type: "global-color", group: "success" }, + "400": { value: "#a8dfb4", type: "global-color", group: "success" }, + "500": { value: "#199d4f", type: "global-color", group: "success" }, + "600": { value: "#00893c", type: "global-color", group: "success" }, + "700": { value: "#007629", type: "global-color", group: "success" }, + "800": { value: "#006c1f", type: "global-color", group: "success" }, + "900": { value: "#005e0f", type: "global-color", group: "success" }, + "1000": { value: "#002e00", 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: true, + "100": { value: "#fff5e4", type: "global-color", group: "warning" }, + "200": { value: "#ffebc7", type: "global-color", group: "warning" }, + "300": { value: "#ffdea5", type: "global-color", group: "warning" }, + "400": { value: "#ffcb6f", type: "global-color", group: "warning" }, + "500": { value: "#e75e01", type: "global-color", group: "warning" }, + "600": { value: "#c95100", type: "global-color", group: "warning" }, + "700": { value: "#ac4400", type: "global-color", group: "warning" }, + "800": { value: "#a03e00", type: "global-color", group: "warning" }, + "900": { value: "#8c3500", type: "global-color", group: "warning" }, + "1000": { value: "#481700", type: "global-color", group: "warning" }, }, danger: { - colorKeys: ["#f93448", "#ffb3cd"], - ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15], - smooth: false, + "100": { value: "#fff3f7", type: "global-color", group: "danger" }, + "200": { value: "#ffe9f0", type: "global-color", group: "danger" }, + "300": { value: "#ffdae6", type: "global-color", group: "danger" }, + "400": { value: "#ffc2d7", type: "global-color", group: "danger" }, + "500": { value: "#fa4256", type: "global-color", group: "danger" }, + "600": { value: "#e81c3b", type: "global-color", group: "danger" }, + "700": { value: "#cc0023", type: "global-color", group: "danger" }, + "800": { value: "#bd0015", type: "global-color", group: "danger" }, + "900": { value: "#a60000", type: "global-color", group: "danger" }, + "1000": { value: "#560000", type: "global-color", group: "danger" }, + }, + info: { + "100": { value: "#eef6fc", type: "global-color", group: "info" }, + "200": { value: "#e3eff7", type: "global-color", group: "info" }, + "300": { value: "#d7e6f0", type: "global-color", group: "info" }, + "400": { value: "#c0d6e4", type: "global-color", group: "info" }, + "500": { value: "#5a8fae", type: "global-color", group: "info" }, + "600": { value: "#417da0", type: "global-color", group: "info" }, + "700": { value: "#246b91", type: "global-color", group: "info" }, + "800": { value: "#156389", type: "global-color", group: "info" }, + "900": { value: "#00557d", type: "global-color", group: "info" }, + "1000": { value: "#002942", type: "global-color", group: "info" }, }, - /* 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: "#fbf3f6", type: "global-color", group: "brandOne" }, + "200": { value: "#f8eaef", type: "global-color", group: "brandOne" }, + "300": { value: "#f3dde5", type: "global-color", group: "brandOne" }, + "400": { value: "#eccad6", type: "global-color", group: "brandOne" }, + "500": { value: "#c26f92", type: "global-color", group: "brandOne" }, + "600": { value: "#b65781", type: "global-color", group: "brandOne" }, + "700": { value: "#a93d70", type: "global-color", group: "brandOne" }, + "800": { value: "#a33069", type: "global-color", group: "brandOne" }, + "900": { value: "#98185d", type: "global-color", group: "brandOne" }, + "1000": { value: "#52002b", type: "global-color", group: "brandOne" }, }, brandTwo: { - colorKeys: ["#cc8066", "#fff3ec"], - ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15], - smooth: true, + "100": { value: "#fff4ee", type: "global-color", group: "brandTwo" }, + "200": { value: "#fdebe0", type: "global-color", group: "brandTwo" }, + "300": { value: "#fcddcd", type: "global-color", group: "brandTwo" }, + "400": { value: "#f8c8b1", type: "global-color", group: "brandTwo" }, + "500": { value: "#c0765d", type: "global-color", group: "brandTwo" }, + "600": { value: "#a9654e", type: "global-color", group: "brandTwo" }, + "700": { value: "#915541", type: "global-color", group: "brandTwo" }, + "800": { value: "#874e3b", type: "global-color", group: "brandTwo" }, + "900": { value: "#764332", type: "global-color", group: "brandTwo" }, + "1000": { value: "#3c1f15", type: "global-color", group: "brandTwo" }, }, brandThree: { - 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: "#eef6fc", type: "global-color", group: "brandThree" }, + "200": { value: "#e3eff7", type: "global-color", group: "brandThree" }, + "300": { value: "#d7e6f0", type: "global-color", group: "brandThree" }, + "400": { value: "#c0d6e4", type: "global-color", group: "brandThree" }, + "500": { value: "#5a8fae", type: "global-color", group: "brandThree" }, + "600": { value: "#417da0", type: "global-color", group: "brandThree" }, + "700": { value: "#246b91", type: "global-color", group: "brandThree" }, + "800": { value: "#156389", type: "global-color", group: "brandThree" }, + "900": { value: "#00557d", type: "global-color", group: "brandThree" }, + "1000": { value: "#002942", 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: "#f7f5f9", type: "global-color", group: "dataOne" }, + "200": { value: "#f0edf4", type: "global-color", group: "dataOne" }, + "300": { value: "#e6e1ed", type: "global-color", group: "dataOne" }, + "400": { value: "#d7cfe3", type: "global-color", group: "dataOne" }, + "500": { value: "#9580b1", type: "global-color", group: "dataOne" }, + "600": { value: "#846ca4", type: "global-color", group: "dataOne" }, + "700": { value: "#725a91", type: "global-color", group: "dataOne" }, + "800": { value: "#6a5289", type: "global-color", group: "dataOne" }, + "900": { value: "#5e467c", type: "global-color", group: "dataOne" }, + "1000": { value: "#331a4d", 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: "#f4f9d1", type: "global-color", group: "dataTwo" }, + "200": { value: "#ebf4a9", type: "global-color", group: "dataTwo" }, + "300": { value: "#e0ec6b", type: "global-color", group: "dataTwo" }, + "400": { value: "#d0dc00", type: "global-color", group: "dataTwo" }, + "500": { value: "#878f00", type: "global-color", group: "dataTwo" }, + "600": { value: "#757c00", type: "global-color", group: "dataTwo" }, + "700": { value: "#646900", type: "global-color", group: "dataTwo" }, + "800": { value: "#5c6100", type: "global-color", group: "dataTwo" }, + "900": { value: "#515400", type: "global-color", group: "dataTwo" }, + "1000": { value: "#2a2800", type: "global-color", group: "dataTwo" }, }, }; - -const background = new BackgroundColor({ - name: "white", - colorKeys: ["#fff"], - ratios: [1], -}); - -const colors = Object.entries(config).map( - ([role, color]) => - new Color({ - name: role, - colorKeys: color.colorKeys, - ratios: color.ratios, - colorspace: "OKLCH", - smooth: color.smooth, - }), -); - -export const globalLightThemeConfig = new Theme({ - colors, - backgroundColor: background, - lightness: 100, - contrast: 1, - saturation: 100, - output: "HEX", - formula: "wcag2", -}).contrastColors; diff --git a/@navikt/core/tokens/darkside/tokens/neutral.ts b/@navikt/core/tokens/darkside/tokens/neutral.ts deleted file mode 100644 index 4e7115b15d..0000000000 --- a/@navikt/core/tokens/darkside/tokens/neutral.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { ColorTheme, StyleDictionaryTokenConfig } from "../util"; - -const NeutralScaleLight = { - neutral: { - "000": { - value: "white", - type: "global-color", - group: "neutral", - }, - }, -} as const; - -const NeutralScaleDark = { - neutral: { - "000": { - value: "black", - type: "global-color", - group: "neutral", - }, - }, -} as const; - -export const neutralTokenConfig = ( - theme: ColorTheme, -): StyleDictionaryTokenConfig<"global-color"> => { - return theme === "light" ? NeutralScaleLight : NeutralScaleDark; -}; diff --git a/@navikt/core/tokens/darkside/tokens/semantic.ts b/@navikt/core/tokens/darkside/tokens/semantic.ts index 3b61d11826..55ef3b5f92 100644 --- a/@navikt/core/tokens/darkside/tokens/semantic.ts +++ b/@navikt/core/tokens/darkside/tokens/semantic.ts @@ -11,7 +11,7 @@ function semanticTokensDark(): StyleDictionaryTokenConfig<"color"> { bg: { ...baseline.bg, default: { - value: "#141b26", + value: "#0E151F", type: "color", group: "background", }, diff --git a/@navikt/core/tokens/darkside/util.ts b/@navikt/core/tokens/darkside/util.ts index 6d5822b589..ea5e1d2520 100644 --- a/@navikt/core/tokens/darkside/util.ts +++ b/@navikt/core/tokens/darkside/util.ts @@ -1,6 +1,16 @@ -import { CssColor } from "@adobe/leonardo-contrast-colors"; import _ from "lodash"; +type GlobalColorEntryT = { + value: string; + type: "global-color"; + group: GlobalColorRoles; +}; + +export type GlobalConfigT = Record< + GlobalColorRoles, + Record & { "000"?: GlobalColorEntryT } +>; + export const colorThemes = ["light", "dark"] as const; export type ColorTheme = (typeof colorThemes)[number]; @@ -49,11 +59,6 @@ export type TokenGroup = | SemanticTokenGroups | `${SemanticTokenGroupsWithRoles}.${GlobalColorRoles}`; -export type GlobalColorConfig = Record< - GlobalColorRoles, - { colorKeys: CssColor[]; ratios: number[]; smooth: boolean } ->; - export type StyleDictionaryToken = { value: string; type: T; diff --git a/@navikt/core/tokens/package.json b/@navikt/core/tokens/package.json index 8685742422..d8984a293f 100644 --- a/@navikt/core/tokens/package.json +++ b/@navikt/core/tokens/package.json @@ -32,7 +32,6 @@ "directory": "@navikt/core/tokens" }, "devDependencies": { - "@adobe/leonardo-contrast-colors": "^1.0.0", "@figma/plugin-typings": "^1.100.2", "color": "4.2.3", "esbuild": "^0.24.0", diff --git a/yarn.lock b/yarn.lock index 2a0d32a9e3..9c876db687 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12,19 +12,6 @@ __metadata: languageName: node linkType: hard -"@adobe/leonardo-contrast-colors@npm:^1.0.0": - version: 1.0.0 - resolution: "@adobe/leonardo-contrast-colors@npm:1.0.0" - dependencies: - apca-w3: "npm:^0.1.9" - chroma-js: "npm:^2.4.2" - ciebase: "npm:^0.1.1" - ciecam02: "npm:^0.4.6" - hsluv: "npm:^0.1.0" - checksum: 10/786bfa6dfc4a74df8dd761b7909ef15e074b84b55e3070eee7003f9b9a768fe69f758970b3ce7a6ddbae6a8acdf4f8da8fc0b31895d534e99aa089a320432631 - languageName: node - linkType: hard - "@alloc/quick-lru@npm:^5.2.0": version: 5.2.0 resolution: "@alloc/quick-lru@npm:5.2.0" @@ -3893,7 +3880,7 @@ __metadata: languageName: node linkType: hard -"@navikt/aksel-icons@npm:^7.1.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons": +"@navikt/aksel-icons@npm:^7.1.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons": version: 0.0.0-use.local resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons" dependencies: @@ -3922,8 +3909,8 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint" dependencies: - "@navikt/ds-css": "npm:^7.1.0" - "@navikt/ds-tokens": "npm:^7.1.0" + "@navikt/ds-css": "npm:^7.1.1" + "@navikt/ds-tokens": "npm:^7.1.1" concurrently: "npm:7.2.1" postcss-selector-parser: "npm:^6.0.13" postcss-value-parser: "npm:^4.2.0" @@ -3938,7 +3925,7 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel@workspace:@navikt/aksel" dependencies: - "@navikt/ds-css": "npm:7.1.0" + "@navikt/ds-css": "npm:7.1.1" axios: "npm:1.7.4" chalk: "npm:4.1.0" clipboardy: "npm:^2.3.0" @@ -3959,11 +3946,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-css@npm:*, @navikt/ds-css@npm:7.1.0, @navikt/ds-css@npm:^7.1.0, @navikt/ds-css@workspace:@navikt/core/css": +"@navikt/ds-css@npm:*, @navikt/ds-css@npm:7.1.1, @navikt/ds-css@npm:^7.1.1, @navikt/ds-css@workspace:@navikt/core/css": version: 0.0.0-use.local resolution: "@navikt/ds-css@workspace:@navikt/core/css" dependencies: - "@navikt/ds-tokens": "npm:^7.1.0" + "@navikt/ds-tokens": "npm:^7.1.1" cssnano: "npm:6.0.0" fast-glob: "npm:3.2.11" lodash: "npm:4.17.21" @@ -3976,14 +3963,14 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-react@npm:*, @navikt/ds-react@npm:^7.1.0, @navikt/ds-react@workspace:@navikt/core/react": +"@navikt/ds-react@npm:*, @navikt/ds-react@npm:^7.1.1, @navikt/ds-react@workspace:@navikt/core/react": version: 0.0.0-use.local resolution: "@navikt/ds-react@workspace:@navikt/core/react" dependencies: "@floating-ui/react": "npm:0.25.4" "@floating-ui/react-dom": "npm:^2.0.9" - "@navikt/aksel-icons": "npm:^7.1.0" - "@navikt/ds-tokens": "npm:^7.1.0" + "@navikt/aksel-icons": "npm:^7.1.1" + "@navikt/ds-tokens": "npm:^7.1.1" "@testing-library/dom": "npm:9.3.4" "@testing-library/jest-dom": "npm:^5.16.0" "@testing-library/react": "npm:^15.0.7" @@ -4013,11 +4000,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tailwind@npm:^7.1.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": +"@navikt/ds-tailwind@npm:^7.1.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": version: 0.0.0-use.local resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind" dependencies: - "@navikt/ds-tokens": "npm:^7.1.0" + "@navikt/ds-tokens": "npm:^7.1.1" color: "npm:4.2.3" lodash: "npm:^4.17.21" tailwindcss: "npm:^3.3.3" @@ -4027,11 +4014,10 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tokens@npm:^7.1.0, @navikt/ds-tokens@workspace:@navikt/core/tokens": +"@navikt/ds-tokens@npm:^7.1.1, @navikt/ds-tokens@workspace:@navikt/core/tokens": version: 0.0.0-use.local resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens" dependencies: - "@adobe/leonardo-contrast-colors": "npm:^1.0.0" "@figma/plugin-typings": "npm:^1.100.2" color: "npm:4.2.3" esbuild: "npm:^0.24.0" @@ -7928,11 +7914,11 @@ __metadata: version: 0.0.0-use.local resolution: "aksel.nav.no@workspace:aksel.nav.no" dependencies: - "@navikt/aksel-icons": "npm:^7.1.0" - "@navikt/ds-css": "npm:^7.1.0" - "@navikt/ds-react": "npm:^7.1.0" - "@navikt/ds-tailwind": "npm:^7.1.0" - "@navikt/ds-tokens": "npm:^7.1.0" + "@navikt/aksel-icons": "npm:^7.1.1" + "@navikt/ds-css": "npm:^7.1.1" + "@navikt/ds-react": "npm:^7.1.1" + "@navikt/ds-tailwind": "npm:^7.1.1" + "@navikt/ds-tokens": "npm:^7.1.1" languageName: unknown linkType: soft @@ -8082,15 +8068,6 @@ __metadata: languageName: node linkType: hard -"apca-w3@npm:^0.1.9": - version: 0.1.9 - resolution: "apca-w3@npm:0.1.9" - dependencies: - colorparsley: "npm:^0.1.8" - checksum: 10/df2b109aa6c08655c4699b4a4b8eb9c823fc3563f93c70a2bcfabd8cd8aa6a7501fb6d4b289d3befa05e0b772a6725167704cb28fbec4c5cf85f4780c9f314f3 - languageName: node - linkType: hard - "arch@npm:^2.1.1": version: 2.2.0 resolution: "arch@npm:2.2.0" @@ -9358,13 +9335,6 @@ __metadata: languageName: node linkType: hard -"chroma-js@npm:^2.4.2": - version: 2.6.0 - resolution: "chroma-js@npm:2.6.0" - checksum: 10/245f0a0b1da7c4cedf30e490db9ab4e9e71fde207cbe1ca05e25ef5ba517df2509b96b29d2c168786237c8162a03dccea38721c4927249cd1d5c5fe0184fc13c - languageName: node - linkType: hard - "chromatic@npm:11.5.4": version: 11.5.4 resolution: "chromatic@npm:11.5.4" @@ -9398,25 +9368,6 @@ __metadata: languageName: node linkType: hard -"ciebase@npm:^0.1.1": - version: 0.1.1 - resolution: "ciebase@npm:0.1.1" - dependencies: - mout: "npm:^0.11.1" - checksum: 10/3a14e590daa37b5d90dae195af1f0bc386d747353c141b0969a20bc2774b9431f2315a1730e6636f85b5a863a6d07b6fe9dfae9bce5208b92cef718c0b857cdf - languageName: node - linkType: hard - -"ciecam02@npm:^0.4.6": - version: 0.4.6 - resolution: "ciecam02@npm:0.4.6" - dependencies: - ciebase: "npm:^0.1.1" - mout: "npm:^0.11.1" - checksum: 10/4826c9e98b69a611db981d8a81ca4c6e7016d5562e9454b7a9565617541cb182674ae88ad3bca46a86faa9e57e7e1455954adc2045db07498c69d2724c09e8d0 - languageName: node - linkType: hard - "classnames@npm:^2.2.5, classnames@npm:^2.3.2": version: 2.5.1 resolution: "classnames@npm:2.5.1" @@ -9672,13 +9623,6 @@ __metadata: languageName: node linkType: hard -"colorparsley@npm:^0.1.8": - version: 0.1.8 - resolution: "colorparsley@npm:0.1.8" - checksum: 10/f4ece36583c6837c111dd8ca0e9316505be93d03f6f8c8880a3c93a6d1103cbe6071aad54fc7e48c4b0e2026a4276d988dd271760da9c1ad856b1ec5f3282b83 - languageName: node - linkType: hard - "combined-stream@npm:^1.0.8": version: 1.0.8 resolution: "combined-stream@npm:1.0.8" @@ -14019,13 +13963,6 @@ __metadata: languageName: node linkType: hard -"hsluv@npm:^0.1.0": - version: 0.1.0 - resolution: "hsluv@npm:0.1.0" - checksum: 10/d9abd2ce5f6a85c0c35eeed6bdcbd275d7cc9e6c3615c0b7ce19a4e1783f67b86cc1bedb4b55bbecbef746719d8c7119e4649d7a5a11100ccd110ddb27719682 - languageName: node - linkType: hard - "html-encoding-sniffer@npm:^3.0.0": version: 3.0.0 resolution: "html-encoding-sniffer@npm:3.0.0" @@ -17568,13 +17505,6 @@ __metadata: languageName: node linkType: hard -"mout@npm:^0.11.1": - version: 0.11.1 - resolution: "mout@npm:0.11.1" - checksum: 10/f5af9eb414dd01c491d20d671bcd5044dc35a42012234f21b500fe70604c3cadbc3cd42ed3bd68617921b3a8d33ecb7249b9b21a5baa689d5ae5eb35599bddf2 - languageName: node - linkType: hard - "mri@npm:^1.1.0": version: 1.2.0 resolution: "mri@npm:1.2.0"