@openkfw/design-tokens 0.5.7 → 0.5.8

package/output/penpot/kfw-design-tokens.light.json

@@ -55,12 +55,12 @@
           "$type": "color"
         },
         "Default": {
-          "$value": "#ffffff",
+          "$value": "#fff",
           "$type": "color"
         }
       },
       "Black": {
-        "$value": "#000000",
+        "$value": "#000",
         "$type": "color"
       },
       "Gray": {
@@ -337,11 +337,11 @@
           "$type": "color"
         },
         "On-dark-bg": {
-          "$value": "#ffffff",
+          "$value": "#fff",
           "$type": "color"
         },
         "On-disabled": {
-          "$value": "#ffffff",
+          "$value": "#fff",
           "$type": "color"
         },
         "Headline-on-dark-bg": {
@@ -351,7 +351,7 @@
       },
       "Background": {
         "Default": {
-          "$value": "#ffffff",
+          "$value": "#fff",
           "$type": "color"
         },
         "Subtle": {

package/output/scss/kfw-design-tokens.light.scss

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.5.7 | MPL-2.0 | https://github.com/openkfw/design-tokens
+// KfW Design Tokens v0.5.8 | MPL-2.0 | https://github.com/openkfw/design-tokens
 
 $kfw-base-color-blue-100: #e9f5fb;
 $kfw-base-color-blue-400: #54b3e2;
@@ -13,8 +13,8 @@ $kfw-base-color-green-400: #94eb90;
 $kfw-base-color-green-700: #398357;
 $kfw-base-color-white-90: #ffffffe6;
 $kfw-base-color-white-95: #fffffff2;
-$kfw-base-color-white: #ffffff;
-$kfw-base-color-black: #000000;
+$kfw-base-color-white: #fff;
+$kfw-base-color-black: #000;
 $kfw-base-color-gray-50: #f6f7f8;
 $kfw-base-color-gray-100: #eef0f2;
 $kfw-base-color-gray-200: #d8dfe3;
@@ -157,10 +157,10 @@ $kfw-color-fn-inactive: #a1adb5; // Interaction color when inactive (Gray 300)
 $kfw-color-fn-border: #2d3134; // Interaction border color (Gray 600)
 $kfw-color-fn-label: #2d3134; // Interaction label color (Gray 600)
 $kfw-color-text: #2d3134; // Main text color for body (Gray 600)
-$kfw-color-text-on-dark-bg: #ffffff; // Main text color on dark background (White)
-$kfw-color-text-on-disabled: #ffffff; // Main text color on disabled (White)
+$kfw-color-text-on-dark-bg: #fff; // Main text color on dark background (White)
+$kfw-color-text-on-disabled: #fff; // Main text color on disabled (White)
 $kfw-color-text-headline-on-dark-bg: #b7f9aa; // Headline text color on dark background (Green 300)
-$kfw-color-background: #ffffff; // Main background color for body (White)
+$kfw-color-background: #fff; // Main background color for body (White)
 $kfw-color-background-subtle: #f6f7f8; // Neutral (Gray 50)
 $kfw-color-background-disabled: #a1adb5; // Disabled (Gray 300)
 $kfw-color-background-light-blue: #e9f5fb; // Light blue (Blue 100)

package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css

@@ -1,10 +1,10 @@
 /**
- * KfW Design Tokens v0.5.7 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.8 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
-:root, :host, .kfw-theme--light { color-scheme: light; }
+[data-theme=light], :root:not([data-theme=dark]), :host(:not([data-theme=dark])) { color-scheme: light; }
 
-:root, :host, .kfw-theme--light {
+[data-theme=light], :root:not([data-theme=dark]), :host(:not([data-theme=dark])) {
   --kfw-base-color-blue-100: #e9f5fb;
   --kfw-base-color-blue-400: #54b3e2;
   --kfw-base-color-blue-500: #007abc;
@@ -17,8 +17,8 @@
   --kfw-base-color-green-700: #398357;
   --kfw-base-color-white-90: #ffffffe6;
   --kfw-base-color-white-95: #fffffff2;
-  --kfw-base-color-white: #ffffff;
-  --kfw-base-color-black: #000000;
+  --kfw-base-color-white: #fff;
+  --kfw-base-color-black: #000;
   --kfw-base-color-gray-50: #f6f7f8;
   --kfw-base-color-gray-100: #eef0f2;
   --kfw-base-color-gray-200: #d8dfe3;
@@ -161,10 +161,10 @@
   --kfw-color-fn-border: #2d3134; /** Interaction border color (Gray 600) */
   --kfw-color-fn-label: #2d3134; /** Interaction label color (Gray 600) */
   --kfw-color-text: #2d3134; /** Main text color for body (Gray 600) */
-  --kfw-color-text-on-dark-bg: #ffffff; /** Main text color on dark background (White) */
-  --kfw-color-text-on-disabled: #ffffff; /** Main text color on disabled (White) */
+  --kfw-color-text-on-dark-bg: #fff; /** Main text color on dark background (White) */
+  --kfw-color-text-on-disabled: #fff; /** Main text color on disabled (White) */
   --kfw-color-text-headline-on-dark-bg: #b7f9aa; /** Headline text color on dark background (Green 300) */
-  --kfw-color-background: #ffffff; /** Main background color for body (White) */
+  --kfw-color-background: #fff; /** Main background color for body (White) */
   --kfw-color-background-subtle: #f6f7f8; /** Neutral (Gray 50) */
   --kfw-color-background-disabled: #a1adb5; /** Disabled (Gray 300) */
   --kfw-color-background-light-blue: #e9f5fb; /** Light blue (Blue 100) */

package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.7 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.8 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 export const KfwBaseColorBlue100 = {
@@ -101,25 +101,25 @@ export const KfwBaseColorGray400 = {
 };
 export const KfwBaseColorGray50010 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.1,
 };
 export const KfwBaseColorGray50030 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.3,
 };
 export const KfwBaseColorGray50090 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.9,
 };
 export const KfwBaseColorGray500 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
 };
 export const KfwBaseColorGray600 = {
@@ -139,7 +139,7 @@ export const KfwBaseColorViolet500 = {
 };
 export const KfwBaseColorRed400 = {
   colorSpace: "srgb",
-  components: [0.7843, 0.0196, 0.2157],
+  components: [0.7843, 0.0196, 0.2196],
   hex: "#c80538",
 };
 export const KfwBaseColorYellow500 = {
@@ -163,31 +163,31 @@ export const KfwBaseSpaceStatic50 = "3.125rem";
 export const KfwBaseSpaceStatic60 = "3.75rem";
 export const KfwBaseSpaceFluid5Min = "0.3125rem";
 export const KfwBaseSpaceFluid5Max = "0.625rem";
-export const KfwBaseSpaceFluid5Val = "0.588px";
+export const KfwBaseSpaceFluid5Val = "0.735vi + 0.588px";
 export const KfwBaseSpaceFluid10Min = "0.625rem";
 export const KfwBaseSpaceFluid10Max = "0.9375rem";
-export const KfwBaseSpaceFluid10Val = "0.34925rem";
+export const KfwBaseSpaceFluid10Val = "0.735vi + 0.34925rem";
 export const KfwBaseSpaceFluid15Min = "0.9375rem";
 export const KfwBaseSpaceFluid15Max = "1.25rem";
-export const KfwBaseSpaceFluid15Val = "0.66175rem";
+export const KfwBaseSpaceFluid15Val = "0.735vi + 0.66175rem";
 export const KfwBaseSpaceFluid20Min = "1.25rem";
 export const KfwBaseSpaceFluid20Max = "1.5625rem";
-export const KfwBaseSpaceFluid20Val = "0.97425rem";
+export const KfwBaseSpaceFluid20Val = "0.735vi + 0.97425rem";
 export const KfwBaseSpaceFluid25Min = "1.5625rem";
 export const KfwBaseSpaceFluid25Max = "1.875rem";
-export const KfwBaseSpaceFluid25Val = "1.28675rem";
+export const KfwBaseSpaceFluid25Val = "0.735vi + 1.28675rem";
 export const KfwBaseSpaceFluid30Min = "1.875rem";
 export const KfwBaseSpaceFluid30Max = "2.1875rem";
-export const KfwBaseSpaceFluid30Val = "1.59925rem";
+export const KfwBaseSpaceFluid30Val = "0.735vi + 1.59925rem";
 export const KfwBaseSpaceFluid35Min = "2.1875rem";
 export const KfwBaseSpaceFluid35Max = "2.5rem";
-export const KfwBaseSpaceFluid35Val = "1.91175rem";
+export const KfwBaseSpaceFluid35Val = "0.735vi + 1.91175rem";
 export const KfwBaseSpaceFluid40Min = "2.5rem";
 export const KfwBaseSpaceFluid40Max = "3.125rem";
-export const KfwBaseSpaceFluid40Val = "1.9485rem";
+export const KfwBaseSpaceFluid40Val = "1.471vi + 1.9485rem";
 export const KfwBaseSpaceFluid50Min = "3.125rem";
 export const KfwBaseSpaceFluid50Max = "3.75rem";
-export const KfwBaseSpaceFluid50Val = "2.5735rem";
+export const KfwBaseSpaceFluid50Val = "1.471vi + 2.5735rem";
 export const KfwBaseFontsizeStaticSm = "0.875rem";
 export const KfwBaseFontsizeStaticMd = "1rem";
 export const KfwBaseFontsizeStaticLg = "1.125rem";
@@ -201,31 +201,31 @@ export const KfwBaseFontsizeStatic7xl = "2rem";
 export const KfwBaseFontsizeStatic8xl = "2.25rem";
 export const KfwBaseFontsizeFluidSmMin = "0.875rem";
 export const KfwBaseFontsizeFluidSmMax = "1rem";
-export const KfwBaseFontsizeFluidSmVal = "0.7646875rem";
+export const KfwBaseFontsizeFluidSmVal = "0.294vi + 0.7646875rem";
 export const KfwBaseFontsizeFluidMdMin = "1rem";
 export const KfwBaseFontsizeFluidMdMax = "1.125rem";
-export const KfwBaseFontsizeFluidMdVal = "0.8896875rem";
+export const KfwBaseFontsizeFluidMdVal = "0.294vi + 0.8896875rem";
 export const KfwBaseFontsizeFluidLgMin = "1.125rem";
 export const KfwBaseFontsizeFluidLgMax = "1.25rem";
-export const KfwBaseFontsizeFluidLgVal = "1.0146875rem";
+export const KfwBaseFontsizeFluidLgVal = "0.294vi + 1.0146875rem";
 export const KfwBaseFontsizeFluidXlMin = "1.25rem";
 export const KfwBaseFontsizeFluidXlMax = "1.375rem";
-export const KfwBaseFontsizeFluidXlVal = "1.1396875rem";
+export const KfwBaseFontsizeFluidXlVal = "0.294vi + 1.1396875rem";
 export const KfwBaseFontsizeFluid2xlMin = "1.375rem";
 export const KfwBaseFontsizeFluid2xlMax = "1.5rem";
-export const KfwBaseFontsizeFluid2xlVal = "1.2646875rem";
+export const KfwBaseFontsizeFluid2xlVal = "0.294vi + 1.2646875rem";
 export const KfwBaseFontsizeFluid3xlMin = "1.5rem";
 export const KfwBaseFontsizeFluid3xlMax = "1.625rem";
-export const KfwBaseFontsizeFluid3xlVal = "1.3896875rem";
+export const KfwBaseFontsizeFluid3xlVal = "0.294vi + 1.3896875rem";
 export const KfwBaseFontsizeFluid4xlMin = "1.625rem";
 export const KfwBaseFontsizeFluid4xlMax = "1.75rem";
-export const KfwBaseFontsizeFluid4xlVal = "1.5146875rem";
+export const KfwBaseFontsizeFluid4xlVal = "0.294vi + 1.5146875rem";
 export const KfwBaseFontsizeFluid5xlMin = "1.75rem";
 export const KfwBaseFontsizeFluid5xlMax = "2rem";
-export const KfwBaseFontsizeFluid5xlVal = "1.5294375rem";
+export const KfwBaseFontsizeFluid5xlVal = "0.588vi + 1.5294375rem";
 export const KfwBaseFontsizeFluid6xlMin = "1.875rem";
 export const KfwBaseFontsizeFluid6xlMax = "2.25rem";
-export const KfwBaseFontsizeFluid6xlVal = "1.544125rem";
+export const KfwBaseFontsizeFluid6xlVal = "0.882vi + 1.544125rem";
 export const KfwBaseLineheight2xs = 1.2;
 export const KfwBaseLineheightXs = 1.3;
 export const KfwBaseLineheightSm = 1.333;
@@ -255,7 +255,7 @@ export const KfwBaseLayoutSafezoneStaticMd = "1.25rem";
 export const KfwBaseLayoutSafezoneStaticLg = "2.5rem";
 export const KfwBaseLayoutSafezoneFluidMin = "1.25rem";
 export const KfwBaseLayoutSafezoneFluidMax = "2.5rem";
-export const KfwBaseLayoutSafezoneFluidVal = "0.1470625rem";
+export const KfwBaseLayoutSafezoneFluidVal = "2.941vi + 0.1470625rem";
 export const KfwBaseLayoutGridcolumn1 = 1;
 export const KfwBaseLayoutGridcolumn2 = 2;
 export const KfwBaseLayoutGridcolumn3 = 3;
@@ -270,7 +270,7 @@ export const KfwBaseLayoutGridgapStaticLg = "1.625rem";
 export const KfwBaseLayoutGridgapStaticXl = "2.25rem";
 export const KfwBaseLayoutGridgapFluidMin = "0.75rem";
 export const KfwBaseLayoutGridgapFluidMax = "2.25rem";
-export const KfwBaseLayoutGridgapFluidVal = "-0.5735rem";
+export const KfwBaseLayoutGridgapFluidVal = "3.529vi - 0.5735rem";
 export const KfwColorFn = {
   colorSpace: "srgb",
   components: [0, 0.3529, 0.549],
@@ -365,25 +365,25 @@ export const KfwColorOpaqueWhite95 = {
 }; // White 95%
 export const KfwColorOpaqueGray50010 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.1,
 }; // Gray 500 10%
 export const KfwColorOpaqueGray50030 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.3,
 }; // Gray 500 30%
 export const KfwColorOpaqueGray50090 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.9,
 }; // Gray 500 90%
 export const KfwColorStateDanger = {
   colorSpace: "srgb",
-  components: [0.7843, 0.0196, 0.2157],
+  components: [0.7843, 0.0196, 0.2196],
   hex: "#c80538",
 };
 export const KfwColorStateSuccess = {
@@ -398,7 +398,7 @@ export const KfwColorStateWarning = {
 };
 export const KfwColorStatusRed = {
   colorSpace: "srgb",
-  components: [0.7843, 0.0196, 0.2157],
+  components: [0.7843, 0.0196, 0.2196],
   hex: "#c80538",
 };
 export const KfwColorStatusYellow = {
@@ -468,7 +468,7 @@ export const KfwColorProductCooperation = {
 };
 export const KfwColorProductCreditBenefit = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
 };
 export const KfwColorIcon = {
@@ -500,10 +500,10 @@ export const KfwSpaceSmall = "1.25rem";
 export const KfwSpaceMedium = "1.875rem";
 export const KfwSpaceLargeMin = "2.1875rem";
 export const KfwSpaceLargeMax = "2.5rem";
-export const KfwSpaceLargeVal = "1.91175rem";
+export const KfwSpaceLargeVal = "0.735vi + 1.91175rem";
 export const KfwSpaceBigMin = "3.125rem";
 export const KfwSpaceBigMax = "3.75rem";
-export const KfwSpaceBigVal = "2.5735rem";
+export const KfwSpaceBigVal = "1.471vi + 2.5735rem";
 export const KfwFontspace = "1.25rem";
 export const KfwFontspace2xsmall = "0.3125rem";
 export const KfwFontspaceXsmall = "0.625rem";
@@ -521,16 +521,16 @@ export const KfwFontsizeLarge = "1.125rem";
 export const KfwFontsizeSmall = "0.875rem";
 export const KfwFontsizeHeading1Min = "1.875rem";
 export const KfwFontsizeHeading1Max = "2.25rem";
-export const KfwFontsizeHeading1Val = "1.544125rem";
+export const KfwFontsizeHeading1Val = "0.882vi + 1.544125rem";
 export const KfwFontsizeHeading2Min = "1.75rem";
 export const KfwFontsizeHeading2Max = "2rem";
-export const KfwFontsizeHeading2Val = "1.5294375rem";
+export const KfwFontsizeHeading2Val = "0.588vi + 1.5294375rem";
 export const KfwFontsizeHeading3Min = "1.5rem";
 export const KfwFontsizeHeading3Max = "1.625rem";
-export const KfwFontsizeHeading3Val = "1.3896875rem";
+export const KfwFontsizeHeading3Val = "0.294vi + 1.3896875rem";
 export const KfwFontsizeHeading4Min = "1.25rem";
 export const KfwFontsizeHeading4Max = "1.375rem";
-export const KfwFontsizeHeading4Val = "1.1396875rem";
+export const KfwFontsizeHeading4Val = "0.294vi + 1.1396875rem";
 export const KfwFontsizeHeading5 = "1.125rem";
 export const KfwFontsizeHeading6 = "1rem";
 export const KfwLineheight = 1.4;
@@ -558,4 +558,4 @@ export const KfwContentwrapperBasic = "67.5rem";
 export const KfwContentwrapperExtended = "80rem";
 export const KfwSafezoneMin = "1.25rem";
 export const KfwSafezoneMax = "2.5rem";
-export const KfwSafezoneVal = "0.1470625rem";
+export const KfwSafezoneVal = "2.941vi + 0.1470625rem";

package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.5.7 | MPL-2.0 | https://github.com/openkfw/design-tokens
+// KfW Design Tokens v0.5.8 | MPL-2.0 | https://github.com/openkfw/design-tokens
 
 $kfw-base-color-blue-100: #e9f5fb;
 $kfw-base-color-blue-400: #54b3e2;
@@ -13,8 +13,8 @@ $kfw-base-color-green-400: #94eb90;
 $kfw-base-color-green-700: #398357;
 $kfw-base-color-white-90: #ffffffe6;
 $kfw-base-color-white-95: #fffffff2;
-$kfw-base-color-white: #ffffff;
-$kfw-base-color-black: #000000;
+$kfw-base-color-white: #fff;
+$kfw-base-color-black: #000;
 $kfw-base-color-gray-50: #f6f7f8;
 $kfw-base-color-gray-100: #eef0f2;
 $kfw-base-color-gray-200: #d8dfe3;
@@ -157,10 +157,10 @@ $kfw-color-fn-inactive: #a1adb5; // Interaction color when inactive (Gray 300)
 $kfw-color-fn-border: #2d3134; // Interaction border color (Gray 600)
 $kfw-color-fn-label: #2d3134; // Interaction label color (Gray 600)
 $kfw-color-text: #2d3134; // Main text color for body (Gray 600)
-$kfw-color-text-on-dark-bg: #ffffff; // Main text color on dark background (White)
-$kfw-color-text-on-disabled: #ffffff; // Main text color on disabled (White)
+$kfw-color-text-on-dark-bg: #fff; // Main text color on dark background (White)
+$kfw-color-text-on-disabled: #fff; // Main text color on disabled (White)
 $kfw-color-text-headline-on-dark-bg: #b7f9aa; // Headline text color on dark background (Green 300)
-$kfw-color-background: #ffffff; // Main background color for body (White)
+$kfw-color-background: #fff; // Main background color for body (White)
 $kfw-color-background-subtle: #f6f7f8; // Neutral (Gray 50)
 $kfw-color-background-disabled: #a1adb5; // Disabled (Gray 300)
 $kfw-color-background-light-blue: #e9f5fb; // Light blue (Blue 100)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openkfw/design-tokens",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "description": "The source of truth for KfW-branded digital products.",
   "files": [
     "README.md",
@@ -22,7 +22,7 @@
     "update": "npx npm-check-updates -u",
     "editor": "jsoneditor-cli --initialExpand false --engine svelte-jsoneditor load tokens/tokens.json",
     "editor:dark": "jsoneditor-cli --port 5054 --engine svelte-jsoneditor load tokens/extended/tokens/tokens.dark.json",
-    "lint": "eslint . --ignore-pattern output --fix",
+    "lint": "eslint --ignore-pattern demo . --fix",
     "format": "npx prettier ./ --write --config .prettierrc.json",
     "typecheck": "tsc --noEmit",
     "precommit": "npm run typecheck && npm run format && npm run lint"
@@ -41,21 +41,22 @@
     "node": ">= 22.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.2",
     "@tsconfig/node24": "^24.0.3",
     "@types/lodash": "^4.17.21",
-    "@types/node": "^25.0.1",
+    "@types/node": "^24.10.4",
     "concurrently": "^9.2.1",
     "deep-get-set-ts": "^1.1.2",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "json5": "^2.2.3",
     "jsoneditor-cli": "^1.1.0",
     "lodash": "4.17.21",
+    "npm-check-updates": "^19.2.0",
     "prettier": "^3.7.4",
     "style-dictionary": "^5.1.1",
+    "style-dictionary-utils": "^6.0.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.49.0",
-    "npm-check-updates": "^19.2.0"
+    "typescript-eslint": "^8.50.0"
   }
 }

package/tokens/gen-tokens.dark.json5

@@ -231,7 +231,7 @@
               colorSpace: "srgb",
               components: [
                 0.2549,
-                0.2784,
+                0.2824,
                 0.298,
               ],
               hex: "#41484c",
@@ -243,7 +243,7 @@
               colorSpace: "srgb",
               components: [
                 0.2549,
-                0.2784,
+                0.2824,
                 0.298,
               ],
               hex: "#41484c",
@@ -255,7 +255,7 @@
               colorSpace: "srgb",
               components: [
                 0.2549,
-                0.2784,
+                0.2824,
                 0.298,
               ],
               hex: "#41484c",
@@ -267,7 +267,7 @@
               colorSpace: "srgb",
               components: [
                 0.2549,
-                0.2784,
+                0.2824,
                 0.298,
               ],
               hex: "#41484c",
@@ -317,7 +317,7 @@
             components: [
               0.7843,
               0.0196,
-              0.2157,
+              0.2196,
             ],
             hex: "#c80538",
           },

package/tokens/tokens.json

@@ -29,10 +29,10 @@
         "300": { "$value": { "colorSpace": "srgb", "components": [0.6314, 0.6784, 0.7098], "hex": "#a1adb5" } },
         "400": { "$value": { "colorSpace": "srgb", "components": [0.4275, 0.4627, 0.4902], "hex": "#6d767d" } },
         "500": {
-          "default": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2784, 0.298], "hex": "#41484c" } },
-          "10": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2784, 0.298], "hex": "#41484c", "alpha": 0.1 } },
-          "30": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2784, 0.298], "hex": "#41484c", "alpha": 0.3 } },
-          "90": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2784, 0.298], "hex": "#41484c", "alpha": 0.9 } }
+          "default": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2824, 0.298], "hex": "#41484c" } },
+          "10": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2824, 0.298], "hex": "#41484c", "alpha": 0.1 } },
+          "30": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2824, 0.298], "hex": "#41484c", "alpha": 0.3 } },
+          "90": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2824, 0.298], "hex": "#41484c", "alpha": 0.9 } }
         },
         "600": { "$value": { "colorSpace": "srgb", "components": [0.1765, 0.1922, 0.2039], "hex": "#2d3134" } }
       },
@@ -41,7 +41,7 @@
         "500": { "$value": { "colorSpace": "srgb", "components": [0.3921, 0.1921, 0.4745], "hex": "#643179" } }
       },
       "red": {
-        "400": { "$value": { "colorSpace": "srgb", "components": [0.7843, 0.0196, 0.2157], "hex": "#c80538" } }
+        "400": { "$value": { "colorSpace": "srgb", "components": [0.7843, 0.0196, 0.2196], "hex": "#c80538" } }
       },
       "yellow": {
         "500": { "$value": { "colorSpace": "srgb", "components": [0.9176, 0.7843, 0.0431], "hex": "#eac80b" } }