@openkfw/design-tokens 0.6.0 → 0.6.1

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.6.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.6.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 export const KfwBaseColorBlue100 = {
@@ -280,7 +280,7 @@ export const KfwColorFnActive = {
   colorSpace: "srgb",
   components: [0, 0.2667, 0.4314],
   hex: "#00446e",
-}; // Interaction color when active (e.g., hover, Blue 700)
+}; // Main interaction color when active (e.g., hover, Blue 700)
 export const KfwColorFnInactive = {
   colorSpace: "srgb",
   components: [0.6314, 0.6784, 0.7098],
@@ -306,11 +306,21 @@ export const KfwColorTextOnDarkBg = {
   components: [1, 1, 1],
   hex: "#ffffff",
 }; // Main text color on dark background (White)
+export const KfwColorTextOnWhiteBg = {
+  colorSpace: "srgb",
+  components: [0.7176, 0.9765, 0.6667],
+  hex: "#b7f9aa",
+}; // Text color on white background (Green 300)
+export const KfwColorTextOnColoredBg = {
+  colorSpace: "srgb",
+  components: [0, 0.2157, 0.3588],
+  hex: "#00375b",
+}; // Text color on colored background (Blue 800)
 export const KfwColorTextOnDisabled = {
   colorSpace: "srgb",
   components: [1, 1, 1],
   hex: "#ffffff",
-}; // Main text color on disabled (White)
+}; // Text color on disabled (White)
 export const KfwColorTextHeadlineOnDarkBg = {
   colorSpace: "srgb",
   components: [0.7176, 0.9765, 0.6667],

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

@@ -4547,13 +4547,13 @@
             ],
             "hex": "#00446e"
           },
-          "$description": "Interaction color when active (e.g., hover, Blue 700)",
+          "$description": "Main interaction color when active (e.g., hover, Blue 700)",
           "filePath": "tokens/tokens.json",
           "isSource": true,
           "$type": "color",
           "original": {
             "$value": "{base.color.blue.700}",
-            "$description": "Interaction color when active (e.g., hover, Blue 700)",
+            "$description": "Main interaction color when active (e.g., hover, Blue 700)",
             "$type": "color",
             "key": "{semantic.color.fn.active}"
           },
@@ -4748,6 +4748,76 @@
             "on-dark-bg"
           ]
         },
+        "on-white-bg": {
+          "key": "{semantic.color.text.on-white-bg}",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [
+              0.7176,
+              0.9765,
+              0.6667
+            ],
+            "hex": "#b7f9aa"
+          },
+          "$description": "Text color on white background (Green 300)",
+          "filePath": "tokens/tokens.json",
+          "isSource": true,
+          "$type": "color",
+          "original": {
+            "$value": "{base.color.green.300}",
+            "$description": "Text color on white background (Green 300)",
+            "$type": "color",
+            "key": "{semantic.color.text.on-white-bg}"
+          },
+          "name": "kfw-color-text-on-white-bg",
+          "attributes": {
+            "category": "semantic",
+            "type": "color",
+            "item": "text",
+            "subitem": "on-white-bg"
+          },
+          "path": [
+            "semantic",
+            "color",
+            "text",
+            "on-white-bg"
+          ]
+        },
+        "on-colored-bg": {
+          "key": "{semantic.color.text.on-colored-bg}",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [
+              0,
+              0.2157,
+              0.3588
+            ],
+            "hex": "#00375b"
+          },
+          "$description": "Text color on colored background (Blue 800)",
+          "filePath": "tokens/tokens.json",
+          "isSource": true,
+          "$type": "color",
+          "original": {
+            "$value": "{base.color.blue.800}",
+            "$description": "Text color on colored background (Blue 800)",
+            "$type": "color",
+            "key": "{semantic.color.text.on-colored-bg}"
+          },
+          "name": "kfw-color-text-on-colored-bg",
+          "attributes": {
+            "category": "semantic",
+            "type": "color",
+            "item": "text",
+            "subitem": "on-colored-bg"
+          },
+          "path": [
+            "semantic",
+            "color",
+            "text",
+            "on-colored-bg"
+          ]
+        },
         "on-disabled": {
           "key": "{semantic.color.text.on-disabled}",
           "$value": {
@@ -4759,13 +4829,13 @@
             ],
             "hex": "#ffffff"
           },
-          "$description": "Main text color on disabled (White)",
+          "$description": "Text color on disabled (White)",
           "filePath": "tokens/tokens.json",
           "isSource": true,
           "$type": "color",
           "original": {
             "$value": "{base.color.white.default}",
-            "$description": "Main text color on disabled (White)",
+            "$description": "Text color on disabled (White)",
             "$type": "color",
             "key": "{semantic.color.text.on-disabled}"
           },

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

@@ -340,6 +340,14 @@
           "$value": "#fff",
           "$type": "color"
         },
+        "On-white-bg": {
+          "$value": "#b7f9aa",
+          "$type": "color"
+        },
+        "On-colored-bg": {
+          "$value": "#00375b",
+          "$type": "color"
+        },
         "On-disabled": {
           "$value": "#fff",
           "$type": "color"

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

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.6.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+// KfW Design Tokens v0.6.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
 
 $kfw-base-color-blue-100: #e9f5fb;
 $kfw-base-color-blue-400: #54b3e2;
@@ -152,13 +152,15 @@ $kfw-base-layout-gridgap-fluid-min: 1.2rem;
 $kfw-base-layout-gridgap-fluid-max: 3.6rem;
 $kfw-base-layout-gridgap-fluid-val: 3.529vi - 0.9176rem;
 $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-active: #00446e; // Main 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: #fff; // Main text color on dark background (White)
-$kfw-color-text-on-disabled: #fff; // Main text color on disabled (White)
+$kfw-color-text-on-white-bg: #b7f9aa; // Text color on white background (Green 300)
+$kfw-color-text-on-colored-bg: #00375b; // Text color on colored background (Blue 800)
+$kfw-color-text-on-disabled: #fff; // Text color on disabled (White)
 $kfw-color-text-headline-on-dark-bg: #b7f9aa; // Headline text color on dark background (Green 300)
 $kfw-color-background: #fff; // Main background color for body (White)
 $kfw-color-background-subtle: #f6f7f8; // Neutral (Gray 50)

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.6.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.6.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 :root, :host { color-scheme: light; }
@@ -156,13 +156,15 @@
   --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 (Blue 600) */
-  --kfw-color-fn-active: #00446e; /** Interaction color when active (e.g., hover, Blue 700) */
+  --kfw-color-fn-active: #00446e; /** Main 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: #fff; /** Main text color on dark background (White) */
-  --kfw-color-text-on-disabled: #fff; /** Main text color on disabled (White) */
+  --kfw-color-text-on-white-bg: #b7f9aa; /** Text color on white background (Green 300) */
+  --kfw-color-text-on-colored-bg: #00375b; /** Text color on colored background (Blue 800) */
+  --kfw-color-text-on-disabled: #fff; /** Text color on disabled (White) */
   --kfw-color-text-headline-on-dark-bg: #b7f9aa; /** Headline text color on dark background (Green 300) */
   --kfw-color-background: #fff; /** Main background color for body (White) */
   --kfw-color-background-subtle: #f6f7f8; /** Neutral (Gray 50) */

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.6.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.6.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 export const KfwBaseColorBlue100 = {
@@ -280,7 +280,7 @@ export const KfwColorFnActive = {
   colorSpace: "srgb",
   components: [0, 0.2667, 0.4314],
   hex: "#00446e",
-}; // Interaction color when active (e.g., hover, Blue 700)
+}; // Main interaction color when active (e.g., hover, Blue 700)
 export const KfwColorFnInactive = {
   colorSpace: "srgb",
   components: [0.6314, 0.6784, 0.7098],
@@ -306,11 +306,21 @@ export const KfwColorTextOnDarkBg = {
   components: [1, 1, 1],
   hex: "#ffffff",
 }; // Main text color on dark background (White)
+export const KfwColorTextOnWhiteBg = {
+  colorSpace: "srgb",
+  components: [0.7176, 0.9765, 0.6667],
+  hex: "#b7f9aa",
+}; // Text color on white background (Green 300)
+export const KfwColorTextOnColoredBg = {
+  colorSpace: "srgb",
+  components: [0, 0.2157, 0.3588],
+  hex: "#00375b",
+}; // Text color on colored background (Blue 800)
 export const KfwColorTextOnDisabled = {
   colorSpace: "srgb",
   components: [1, 1, 1],
   hex: "#ffffff",
-}; // Main text color on disabled (White)
+}; // Text color on disabled (White)
 export const KfwColorTextHeadlineOnDarkBg = {
   colorSpace: "srgb",
   components: [0.7176, 0.9765, 0.6667],

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

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.6.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+// KfW Design Tokens v0.6.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
 
 $kfw-base-color-blue-100: #e9f5fb;
 $kfw-base-color-blue-400: #54b3e2;
@@ -152,13 +152,15 @@ $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 (Blue 600)
-$kfw-color-fn-active: #00446e; // Interaction color when active (e.g., hover, Blue 700)
+$kfw-color-fn-active: #00446e; // Main 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: #fff; // Main text color on dark background (White)
-$kfw-color-text-on-disabled: #fff; // Main text color on disabled (White)
+$kfw-color-text-on-white-bg: #b7f9aa; // Text color on white background (Green 300)
+$kfw-color-text-on-colored-bg: #00375b; // Text color on colored background (Blue 800)
+$kfw-color-text-on-disabled: #fff; // Text color on disabled (White)
 $kfw-color-text-headline-on-dark-bg: #b7f9aa; // Headline text color on dark background (Green 300)
 $kfw-color-background: #fff; // Main background color for body (White)
 $kfw-color-background-subtle: #f6f7f8; // Neutral (Gray 50)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openkfw/design-tokens",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "The source of truth for KfW-branded digital products.",
   "files": [
     "README.md",
@@ -44,19 +44,18 @@
     "@eslint/js": "^9.39.2",
     "@tsconfig/node24": "^24.0.3",
     "@types/lodash": "^4.17.21",
-    "@types/node": "^24.10.4",
+    "@types/node": "^24",
     "concurrently": "^9.2.1",
     "deep-get-set-ts": "^1.1.2",
     "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.50.0"
+    "typescript-eslint": "^8.52.0"
   }
 }

package/tokens/gen-tokens.dark.json5

@@ -1089,7 +1089,7 @@
         },
         active: {
           $value: "{base.color.white.default}",
-          $description: "Interaction color when active (e.g., hover, Blue 700)",
+          $description: "Main interaction color when active (e.g., hover, Blue 700)",
         },
         inactive: {
           $value: "{base.color.gray.300}",
@@ -1113,9 +1113,17 @@
           $value: "{base.color.white.default}",
           $description: "Main text color on dark background (White)",
         },
+        "on-white-bg": {
+          $value: "{base.color.green.300}",
+          $description: "Text color on white background (Green 300)",
+        },
+        "on-colored-bg": {
+          $value: "{base.color.blue.800}",
+          $description: "Text color on colored background (Blue 800)",
+        },
         "on-disabled": {
           $value: "{base.color.white.default}",
-          $description: "Main text color on disabled (White)",
+          $description: "Text color on disabled (White)",
         },
         "headline-on-dark-bg": {
           $value: "{base.color.green.300}",

package/tokens/tokens.json

@@ -271,7 +271,7 @@
       "$type": "color",
       "fn": {
         "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)" },
+        "active": { "$value": "{base.color.blue.700}", "$description": "Main 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)" }
@@ -279,7 +279,9 @@
       "text": {
         "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)" },
+        "on-white-bg": { "$value": "{base.color.green.300}", "$description": "Text color on white background (Green 300)" },
+        "on-colored-bg": { "$value": "{base.color.blue.800}", "$description": "Text color on colored background (Blue 800)" },
+        "on-disabled": { "$value": "{base.color.white.default}", "$description": "Text color on disabled (White)" },
         "headline-on-dark-bg": { "$value": "{base.color.green.300}", "$description": "Headline text color on dark background (Green 300)" }
       },
       "background": {

package/demo/scripts/postcss.color-to-filter.js

@@ -1,66 +0,0 @@
-import CssFilterConverter from "css-filter-converter"
-
-export default function postcssColorToFilterPlugin() {
-  return {
-    postcssPlugin: "postcss-color-to-filter",
-    async Once(root, { result }) {
-      const cssVariables = {}
-
-      // CSS-Variablen aus :root sammeln
-      root.walkRules((rule) => {
-        if (rule.selector === ":root" || rule.selector.startsWith(":root,")) {
-          rule.walkDecls((decl) => {
-            if (decl.prop.startsWith("--")) {
-              cssVariables[decl.prop] = decl.value.trim()
-            }
-          })
-        }
-      })
-
-      const colorToFilterRegex = /color-to-filter\(\s*(var\(\s*--[\w-]+\s*\))\s*\)/g
-
-      root.walkDecls(async (decl) => {
-        let match
-        const matches = []
-
-        while ((match = colorToFilterRegex.exec(decl.value)) !== null) {
-          matches.push(match)
-        }
-
-        let newValue = decl.value
-        let hasReplacements = false
-
-        for (const match of matches) {
-          const [fullMatch, paramRaw] = match
-          let param = paramRaw.trim()
-          const varMatch = param.match(/^var\((--[^)]+)\)$/)
-
-          if (varMatch) {
-            const varName = varMatch[1]
-            if (cssVariables[varName]) {
-              param = cssVariables[varName]
-            } else {
-              result.warn(`CSS variable ${varName} not found`, { node: decl })
-              continue
-            }
-          }
-
-          try {
-            const result = await CssFilterConverter.hexToFilter(param)
-            const filterString = result.color || param
-            newValue = newValue.replace(fullMatch, filterString)
-            hasReplacements = true
-          } catch (e) {
-            result.warn(`Error generating filter for color "${param}": ${e.message}`, { node: decl })
-          }
-        }
-
-        if (hasReplacements) {
-          decl.value = newValue
-        }
-      })
-    }
-  }
-}
-
-postcssColorToFilterPlugin.postcss = true