@openkfw/design-tokens 0.5.5 → 0.5.7

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.4 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.7 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 export const KfwBaseColorBlue100 = {
@@ -129,13 +129,13 @@ export const KfwBaseColorGray600 = {
 };
 export const KfwBaseColorViolet400 = {
   colorSpace: "srgb",
-  components: [0.5765, 0.5961, 0.8784],
-  hex: "#9598e0",
+  components: [0.6431, 0.3333, 0.7725],
+  hex: "#a455c5",
 };
 export const KfwBaseColorViolet500 = {
   colorSpace: "srgb",
-  components: [0.4, 0.4353, 0.7843],
-  hex: "#686fc8",
+  components: [0.3921, 0.1921, 0.4745],
+  hex: "#643179",
 };
 export const KfwBaseColorRed400 = {
   colorSpace: "srgb",
@@ -275,112 +275,112 @@ export const KfwColorFn = {
   colorSpace: "srgb",
   components: [0, 0.3529, 0.549],
   hex: "#005a8c",
-}; // Main interaction color for buttons and links
+}; // Main interaction color for buttons and links (Blue 600)
 export const KfwColorFnActive = {
   colorSpace: "srgb",
   components: [0, 0.2667, 0.4314],
   hex: "#00446e",
-};
+}; // Interaction color when active (e.g., hover, Blue 700)
 export const KfwColorFnInactive = {
   colorSpace: "srgb",
   components: [0.6314, 0.6784, 0.7098],
   hex: "#a1adb5",
-};
+}; // Interaction color when inactive (Gray 300)
 export const KfwColorFnBorder = {
   colorSpace: "srgb",
   components: [0.1765, 0.1922, 0.2039],
   hex: "#2d3134",
-};
+}; // Interaction border color (Gray 600)
 export const KfwColorFnLabel = {
   colorSpace: "srgb",
   components: [0.1765, 0.1922, 0.2039],
   hex: "#2d3134",
-};
+}; // Interaction label color (Gray 600)
 export const KfwColorText = {
   colorSpace: "srgb",
   components: [0.1765, 0.1922, 0.2039],
   hex: "#2d3134",
-}; // Main text color for body
+}; // Main text color for body (Gray 600)
 export const KfwColorTextOnDarkBg = {
   colorSpace: "srgb",
   components: [1, 1, 1],
   hex: "#ffffff",
-};
+}; // Main text color on dark background (White)
 export const KfwColorTextOnDisabled = {
   colorSpace: "srgb",
   components: [1, 1, 1],
   hex: "#ffffff",
-};
+}; // Main text color on disabled (White)
 export const KfwColorTextHeadlineOnDarkBg = {
   colorSpace: "srgb",
   components: [0.7176, 0.9765, 0.6667],
   hex: "#b7f9aa",
-};
+}; // Headline text color on dark background (Green 300)
 export const KfwColorBackground = {
   colorSpace: "srgb",
   components: [1, 1, 1],
   hex: "#ffffff",
-}; // Main background color for body
+}; // Main background color for body (White)
 export const KfwColorBackgroundSubtle = {
   colorSpace: "srgb",
   components: [0.9647, 0.9686, 0.9725],
   hex: "#f6f7f8",
-};
+}; // Neutral (Gray 50)
 export const KfwColorBackgroundDisabled = {
   colorSpace: "srgb",
   components: [0.6314, 0.6784, 0.7098],
   hex: "#a1adb5",
-};
+}; // Disabled (Gray 300)
 export const KfwColorBackgroundLightBlue = {
   colorSpace: "srgb",
   components: [0.9137, 0.9608, 0.9843],
   hex: "#e9f5fb",
-};
+}; // Light blue (Blue 100)
 export const KfwColorBackgroundLightGreen = {
   colorSpace: "srgb",
   components: [0.9255, 0.9922, 0.9294],
   hex: "#ecfded",
-};
+}; // Light green (Green 100)
 export const KfwColorBackgroundDarkBlue = {
   colorSpace: "srgb",
   components: [0, 0.2157, 0.3588],
   hex: "#00375b",
-};
+}; // Dark blue (Blue 800)
 export const KfwColorBackgroundDarkGreen = {
   colorSpace: "srgb",
   components: [0.2235, 0.5137, 0.3412],
   hex: "#398357",
-};
+}; // Dark green (Green 700)
 export const KfwColorOpaqueWhite90 = {
   colorSpace: "srgb",
   components: [1, 1, 1],
   hex: "#ffffff",
   alpha: 0.9,
-};
+}; // White 90%
 export const KfwColorOpaqueWhite95 = {
   colorSpace: "srgb",
   components: [1, 1, 1],
   hex: "#ffffff",
   alpha: 0.95,
-};
+}; // White 95%
 export const KfwColorOpaqueGray50010 = {
   colorSpace: "srgb",
   components: [0.2549, 0.2784, 0.298],
   hex: "#41484c",
   alpha: 0.1,
-};
+}; // Gray 500 10%
 export const KfwColorOpaqueGray50030 = {
   colorSpace: "srgb",
   components: [0.2549, 0.2784, 0.298],
   hex: "#41484c",
   alpha: 0.3,
-};
+}; // Gray 500 30%
 export const KfwColorOpaqueGray50090 = {
   colorSpace: "srgb",
   components: [0.2549, 0.2784, 0.298],
   hex: "#41484c",
   alpha: 0.9,
-};
+}; // Gray 500 90%
 export const KfwColorStateDanger = {
   colorSpace: "srgb",
   components: [0.7843, 0.0196, 0.2157],
@@ -393,8 +393,8 @@ export const KfwColorStateSuccess = {
 };
 export const KfwColorStateWarning = {
   colorSpace: "srgb",
-  components: [0.5765, 0.5961, 0.8784],
-  hex: "#9598e0",
+  components: [0.6431, 0.3333, 0.7725],
+  hex: "#a455c5",
 };
 export const KfwColorStatusRed = {
   colorSpace: "srgb",
@@ -463,8 +463,8 @@ export const KfwColorProductCredit = {
 };
 export const KfwColorProductCooperation = {
   colorSpace: "srgb",
-  components: [0.4, 0.4353, 0.7843],
-  hex: "#686fc8",
+  components: [0.3921, 0.1921, 0.4745],
+  hex: "#643179",
 };
 export const KfwColorProductCreditBenefit = {
   colorSpace: "srgb",
@@ -543,6 +543,7 @@ export const KfwBorderradiusSmall = "2px";
 export const KfwBorderradiusCircle = "624.9375rem";
 export const KfwBorderwidth = "1px";
 export const KfwBorderwidthLarge = "2px";
+export const KfwBorderstyle = "solid";
 export const KfwFocusringOutlineWidth = "2px";
 export const KfwFocusringOutlineOffset = "2px";
 export const KfwFocusringOutlineStyle = "dashed";

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

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.5.4 | MPL-2.0 | https://github.com/openkfw/design-tokens
+// KfW Design Tokens v0.5.7 | MPL-2.0 | https://github.com/openkfw/design-tokens
 
 $kfw-base-color-blue-100: #e9f5fb;
 $kfw-base-color-blue-400: #54b3e2;
@@ -25,8 +25,8 @@ $kfw-base-color-gray-500-30: #41484c4d;
 $kfw-base-color-gray-500-90: #41484ce6;
 $kfw-base-color-gray-500: #41484c;
 $kfw-base-color-gray-600: #2d3134;
-$kfw-base-color-violet-400: #9598e0;
-$kfw-base-color-violet-500: #686fc8;
+$kfw-base-color-violet-400: #a455c5;
+$kfw-base-color-violet-500: #643179;
 $kfw-base-color-red-400: #c80538;
 $kfw-base-color-yellow-500: #eac80b;
 $kfw-base-fontfamily-sans: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
@@ -151,30 +151,30 @@ $kfw-base-layout-gridgap-static-xl: 2.25rem;
 $kfw-base-layout-gridgap-fluid-min: 0.75rem;
 $kfw-base-layout-gridgap-fluid-max: 2.25rem;
 $kfw-base-layout-gridgap-fluid-val: 3.529vi - 0.5735rem;
-$kfw-color-fn: #005a8c; // Main interaction color for buttons and links
-$kfw-color-fn-active: #00446e;
-$kfw-color-fn-inactive: #a1adb5;
-$kfw-color-fn-border: #2d3134;
-$kfw-color-fn-label: #2d3134;
-$kfw-color-text: #2d3134; // Main text color for body
-$kfw-color-text-on-dark-bg: #ffffff;
-$kfw-color-text-on-disabled: #ffffff;
-$kfw-color-text-headline-on-dark-bg: #b7f9aa;
-$kfw-color-background: #ffffff; // Main background color for body
-$kfw-color-background-subtle: #f6f7f8;
-$kfw-color-background-disabled: #a1adb5;
-$kfw-color-background-light-blue: #e9f5fb;
-$kfw-color-background-light-green: #ecfded;
-$kfw-color-background-dark-blue: #00375b;
-$kfw-color-background-dark-green: #398357;
-$kfw-color-opaque-white-90: #ffffffe6;
-$kfw-color-opaque-white-95: #fffffff2;
-$kfw-color-opaque-gray-500-10: #41484c1a;
-$kfw-color-opaque-gray-500-30: #41484c4d;
-$kfw-color-opaque-gray-500-90: #41484ce6;
+$kfw-color-fn: #005a8c; // Main interaction color for buttons and links (Blue 600)
+$kfw-color-fn-active: #00446e; // Interaction color when active (e.g., hover, Blue 700)
+$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-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-subtle: #f6f7f8; // Neutral (Gray 50)
+$kfw-color-background-disabled: #a1adb5; // Disabled (Gray 300)
+$kfw-color-background-light-blue: #e9f5fb; // Light blue (Blue 100)
+$kfw-color-background-light-green: #ecfded; // Light green (Green 100)
+$kfw-color-background-dark-blue: #00375b; // Dark blue (Blue 800)
+$kfw-color-background-dark-green: #398357; // Dark green (Green 700)
+$kfw-color-opaque-white-90: #ffffffe6; // White 90%
+$kfw-color-opaque-white-95: #fffffff2; // White 95%
+$kfw-color-opaque-gray-500-10: #41484c1a; // Gray 500 10%
+$kfw-color-opaque-gray-500-30: #41484c4d; // Gray 500 30%
+$kfw-color-opaque-gray-500-90: #41484ce6; // Gray 500 90%
 $kfw-color-state-danger: #c80538;
 $kfw-color-state-success: #398357;
-$kfw-color-state-warning: #9598e0;
+$kfw-color-state-warning: #a455c5;
 $kfw-color-status-red: #c80538;
 $kfw-color-status-yellow: #eac80b;
 $kfw-color-status-green: #398357;
@@ -188,7 +188,7 @@ $kfw-color-line-12: #a1adb5;
 $kfw-color-product-container: #f6f7f8;
 $kfw-color-product-benefit: #007abc;
 $kfw-color-product-credit: #398357;
-$kfw-color-product-cooperation: #686fc8;
+$kfw-color-product-cooperation: #643179;
 $kfw-color-product-credit-benefit: #41484c;
 $kfw-color-icon: #005a8c;
 $kfw-color-icon-secondary: #54b3e2;
@@ -244,6 +244,7 @@ $kfw-borderradius-small: 2px;
 $kfw-borderradius-circle: 624.9375rem;
 $kfw-borderwidth: 1px;
 $kfw-borderwidth-large: 2px;
+$kfw-borderstyle: solid;
 $kfw-focusring-outline-width: 2px;
 $kfw-focusring-outline-offset: 2px;
 $kfw-focusring-outline-style: dashed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openkfw/design-tokens",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "The source of truth for KfW-branded digital products.",
   "files": [
     "README.md",
@@ -11,7 +11,7 @@
     "demo/dist/css/style.min.css",
     "demo/src/style.css",
     "demo/src/vendor/**.css",
-    "demo/postcss.svg-load-plugin.ts"
+    "demo/scripts/**.js"
   ],
   "scripts": {
     "start": "concurrently \"npm run watch:extended\" \"npm run watch\"",
@@ -44,18 +44,18 @@
     "@eslint/js": "^9.39.1",
     "@tsconfig/node24": "^24.0.3",
     "@types/lodash": "^4.17.21",
-    "@types/node": "^24.10.1",
+    "@types/node": "^25.0.1",
     "concurrently": "^9.2.1",
     "deep-get-set-ts": "^1.1.2",
     "eslint": "^9.39.1",
     "json5": "^2.2.3",
     "jsoneditor-cli": "^1.1.0",
     "lodash": "4.17.21",
-    "prettier": "^3.7.3",
+    "prettier": "^3.7.4",
     "style-dictionary": "^5.1.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.0",
-    "npm-check-updates": "^19.1.2"
+    "typescript-eslint": "^8.49.0",
+    "npm-check-updates": "^19.2.0"
   }
 }

package/tokens/gen-tokens.dark.json5

@@ -291,22 +291,22 @@
           $value: {
             colorSpace: "srgb",
             components: [
-              0.5765,
-              0.5961,
-              0.8784,
+              0.6431,
+              0.3333,
+              0.7725,
             ],
-            hex: "#9598e0",
+            hex: "#a455c5",
           },
         },
         "500": {
           $value: {
             colorSpace: "srgb",
             components: [
-              0.4,
-              0.4353,
-              0.7843,
+              0.3921,
+              0.1921,
+              0.4745,
             ],
-            hex: "#686fc8",
+            hex: "#643179",
           },
         },
       },
@@ -1085,75 +1085,93 @@
       fn: {
         default: {
           $value: "{base.color.white.default}",
-          $description: "Main interaction color for buttons and links",
+          $description: "Main interaction color for buttons and links (Blue 600)",
         },
         active: {
           $value: "{base.color.white.default}",
+          $description: "Interaction color when active (e.g., hover, Blue 700)",
         },
         inactive: {
           $value: "{base.color.gray.300}",
+          $description: "Interaction color when inactive (Gray 300)",
         },
         border: {
           $value: "{base.color.gray.100}",
+          $description: "Interaction border color (Gray 600)",
         },
         label: {
           $value: "{base.color.gray.100}",
+          $description: "Interaction label color (Gray 600)",
         },
       },
       text: {
         default: {
           $value: "{base.color.gray.100}",
-          $description: "Main text color for body",
+          $description: "Main text color for body (Gray 600)",
         },
         "on-dark-bg": {
-          $value: "{base.color.blue.700}",
+          $value: "{base.color.white.default}",
+          $description: "Main text color on dark background (White)",
         },
         "on-disabled": {
           $value: "{base.color.white.default}",
+          $description: "Main text color on disabled (White)",
         },
         "headline-on-dark-bg": {
           $value: "{base.color.green.300}",
+          $description: "Headline text color on dark background (Green 300)",
         },
       },
       background: {
         default: {
           $value: "{base.color.black}",
-          $description: "Main background color for body",
+          $description: "Main background color for body (White)",
         },
         subtle: {
           $value: "{base.color.gray.600}",
+          $description: "Neutral (Gray 50)",
         },
         disabled: {
           $value: "{base.color.gray.300}",
+          $description: "Disabled (Gray 300)",
         },
         "light-blue": {
           $value: "{base.color.blue.100}",
+          $description: "Light blue (Blue 100)",
         },
         "light-green": {
           $value: "{base.color.green.100}",
+          $description: "Light green (Green 100)",
         },
         "dark-blue": {
           $value: "{base.color.blue.800}",
+          $description: "Dark blue (Blue 800)",
         },
         "dark-green": {
           $value: "{base.color.green.700}",
+          $description: "Dark green (Green 700)",
         },
       },
       opaque: {
         "white-90": {
           $value: "{base.color.white.90}",
+          $description: "White 90%",
         },
         "white-95": {
           $value: "{base.color.white.95}",
+          $description: "White 95%",
         },
         "gray-500-10": {
           $value: "{base.color.gray.500.10}",
+          $description: "Gray 500 10%",
         },
         "gray-500-30": {
           $value: "{base.color.gray.500.30}",
+          $description: "Gray 500 30%",
         },
         "gray-500-90": {
           $value: "{base.color.gray.500.90}",
+          $description: "Gray 500 90%",
         },
       },
       state: {
@@ -1417,6 +1435,10 @@
         $value: "{base.borderwidth.lg}",
       },
     },
+    borderstyle: {
+      $type: "strokeStyle",
+      $value: "solid",
+    },
     focusring: {
       "outline-width": {
         $type: "dimension",

package/tokens/tokens.json

@@ -37,8 +37,8 @@
         "600": { "$value": { "colorSpace": "srgb", "components": [0.1765, 0.1922, 0.2039], "hex": "#2d3134" } }
       },
       "violet": {
-        "400": { "$value": { "colorSpace": "srgb", "components": [0.5765, 0.5961, 0.8784], "hex": "#9598e0" } },
-        "500": { "$value": { "colorSpace": "srgb", "components": [0.4, 0.4353, 0.7843], "hex": "#686fc8" } }
+        "400": { "$value": { "colorSpace": "srgb", "components": [0.6431, 0.3333, 0.7725], "hex": "#a455c5" } },
+        "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" } }
@@ -270,33 +270,33 @@
     "color": {
       "$type": "color",
       "fn": {
-        "default": { "$value": "{base.color.blue.600}", "$description": "Main interaction color for buttons and links" },
-        "active": { "$value": "{base.color.blue.700}" },
-        "inactive": { "$value": "{base.color.gray.300}" },
-        "border": { "$value": "{base.color.gray.600}" },
-        "label": { "$value": "{base.color.gray.600}" }
+        "default": { "$value": "{base.color.blue.600}", "$description": "Main interaction color for buttons and links (Blue 600)" },
+        "active": { "$value": "{base.color.blue.700}", "$description": "Interaction color when active (e.g., hover, Blue 700)" },
+        "inactive": { "$value": "{base.color.gray.300}", "$description": "Interaction color when inactive (Gray 300)" },
+        "border": { "$value": "{base.color.gray.600}", "$description": "Interaction border color (Gray 600)" },
+        "label": { "$value": "{base.color.gray.600}", "$description": "Interaction label color (Gray 600)" }
       },
       "text": {
-        "default": { "$value": "{base.color.gray.600}", "$description": "Main text color for body" },
-        "on-dark-bg": { "$value": "{base.color.white.default}" },
-        "on-disabled": { "$value": "{base.color.white.default}" },
-        "headline-on-dark-bg": { "$value": "{base.color.green.300}" }
+        "default": { "$value": "{base.color.gray.600}", "$description": "Main text color for body (Gray 600)" },
+        "on-dark-bg": { "$value": "{base.color.white.default}", "$description": "Main text color on dark background (White)" },
+        "on-disabled": { "$value": "{base.color.white.default}", "$description": "Main text color on disabled (White)" },
+        "headline-on-dark-bg": { "$value": "{base.color.green.300}", "$description": "Headline text color on dark background (Green 300)" }
       },
       "background": {
-        "default": { "$value": "{base.color.white.default}", "$description": "Main background color for body" },
-        "subtle": { "$value": "{base.color.gray.50}" },
-        "disabled": { "$value": "{base.color.gray.300}" },
-        "light-blue": { "$value": "{base.color.blue.100}" },
-        "light-green": { "$value": "{base.color.green.100}" },
-        "dark-blue": { "$value": "{base.color.blue.800}" },
-        "dark-green": { "$value": "{base.color.green.700}" }
+        "default": { "$value": "{base.color.white.default}", "$description": "Main background color for body (White)" },
+        "subtle": { "$value": "{base.color.gray.50}", "$description": "Neutral (Gray 50)" },
+        "disabled": { "$value": "{base.color.gray.300}", "$description": "Disabled (Gray 300)" },
+        "light-blue": { "$value": "{base.color.blue.100}", "$description": "Light blue (Blue 100)" },
+        "light-green": { "$value": "{base.color.green.100}", "$description": "Light green (Green 100)" },
+        "dark-blue": { "$value": "{base.color.blue.800}", "$description": "Dark blue (Blue 800)" },
+        "dark-green": { "$value": "{base.color.green.700}", "$description": "Dark green (Green 700)" }
       },
       "opaque": {
-        "white-90": { "$value": "{base.color.white.90}" },
-        "white-95": { "$value": "{base.color.white.95}" },
-        "gray-500-10": { "$value": "{base.color.gray.500.10}" },
-        "gray-500-30": { "$value": "{base.color.gray.500.30}" },
-        "gray-500-90": { "$value": "{base.color.gray.500.90}" }
+        "white-90": { "$value": "{base.color.white.90}", "$description": "White 90%" },
+        "white-95": { "$value": "{base.color.white.95}", "$description": "White 95%" },
+        "gray-500-10": { "$value": "{base.color.gray.500.10}", "$description": "Gray 500 10%" },
+        "gray-500-30": { "$value": "{base.color.gray.500.30}", "$description": "Gray 500 30%" },
+        "gray-500-90": { "$value": "{base.color.gray.500.90}", "$description": "Gray 500 90%" }
       },
       "state": {
         "danger": { "$value": "{base.color.red.400}" },
@@ -419,6 +419,7 @@
       "default": { "$value": "{base.borderwidth.md}" },
       "large": { "$value": "{base.borderwidth.lg}" }
     },
+    "borderstyle": { "$type": "strokeStyle", "$value": "solid" },
     "focusring": {
       "outline-width": { "$type": "dimension", "$value": "{base.borderwidth.lg}" },
       "outline-offset": { "$type": "dimension", "$value": "{base.borderwidth.lg}" },