@openkfw/design-tokens 0.1.2 → 0.2.0

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.1.1
+ * KfW Design Tokens v0.2.0
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */
@@ -354,11 +354,6 @@ export const KfwColorBackgroundDarkGreen = {
   components: [0.2235, 0.5137, 0.3412],
   hex: "#398357",
 };
-export const KfwColorAccent = {
-  colorSpace: "srgb",
-  components: [0.7176, 0.9765, 0.6667],
-  hex: "#b7f9aa",
-};
 export const KfwColorOpaqueWhite90 = {
   colorSpace: "srgb",
   components: [1, 1, 1],
@@ -545,16 +540,9 @@ export const KfwLineheightList = 1.5;
 export const KfwLineheightHeading = 1.3;
 export const KfwLineheightHeading5 = 1.333;
 export const KfwBorderradius = "0.25rem";
-export const KfwFocusringOutline = {
-  color: {
-    colorSpace: "srgb",
-    components: [0, 0.2667, 0.4314],
-    hex: "#00446e",
-  },
-  width: "0.125rem",
-  style: "dashed",
-};
+export const KfwFocusringOutlineWidth = "0.125rem";
 export const KfwFocusringOutlineOffset = "0.125rem";
+export const KfwFocusringOutlineStyle = "dashed";
 export const KfwFontweight = 400;
 export const KfwFontweightHeading = 500;
 export const KfwBreakpointMobile = "37.5rem";

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

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.1.1
+// KfW Design Tokens v0.2.0
 // Copyright 2025
 // Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
 
@@ -170,7 +170,6 @@ $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-accent: #b7f9aa;
 $kfw-color-opaque-white-90: #ffffffe6;
 $kfw-color-opaque-white-95: #fffffff2;
 $kfw-color-opaque-gray-500-10: #41484c1a;
@@ -242,8 +241,9 @@ $kfw-lineheight-list: 1.5;
 $kfw-lineheight-heading: 1.3;
 $kfw-lineheight-heading-5: 1.333;
 $kfw-borderradius: 0.25rem;
-$kfw-focusring-outline: 0.125rem dashed #00446e;
+$kfw-focusring-outline-width: 0.125rem;
 $kfw-focusring-outline-offset: 0.125rem;
+$kfw-focusring-outline-style: dashed;
 $kfw-fontweight: 400;
 $kfw-fontweight-heading: 500;
 $kfw-breakpoint-mobile: 37.5rem;

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.1.1
+ * KfW Design Tokens v0.2.0
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */
@@ -174,7 +174,6 @@
   --kfw-color-background-light-green: #ecfded;
   --kfw-color-background-dark-blue: #00375b;
   --kfw-color-background-dark-green: #398357;
-  --kfw-color-accent: #b7f9aa;
   --kfw-color-opaque-white-90: #ffffffe6;
   --kfw-color-opaque-white-95: #fffffff2;
   --kfw-color-opaque-gray-500-10: #41484c1a;
@@ -246,8 +245,9 @@
   --kfw-lineheight-heading: 1.3;
   --kfw-lineheight-heading-5: 1.333;
   --kfw-borderradius: 0.4rem;
-  --kfw-focusring-outline: 0.2rem dashed #00446e;
+  --kfw-focusring-outline-width: 0.2rem;
   --kfw-focusring-outline-offset: 0.2rem;
+  --kfw-focusring-outline-style: dashed;
   --kfw-fontweight: 400;
   --kfw-fontweight-heading: 500;
   --kfw-breakpoint-mobile: 60rem;

package/output/web_stable_10px/js/kfw-design-tokens.light.d.ts

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.1.1
+ * KfW Design Tokens v0.2.0
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */
@@ -352,11 +352,6 @@ export const KfwColorBackgroundDarkGreen: {
   components: number[];
   hex: string;
 };
-export const KfwColorAccent: {
-  colorSpace: string;
-  components: number[];
-  hex: string;
-};
 export const KfwColorOpaqueWhite90: {
   colorSpace: string;
   components: number[];
@@ -541,12 +536,9 @@ export const KfwLineheightList: number;
 export const KfwLineheightHeading: number;
 export const KfwLineheightHeading5: number;
 export const KfwBorderradius: string;
-export const KfwFocusringOutline: {
-  color: { colorSpace: string; components: number[]; hex: string };
-  width: string;
-  style: string;
-};
+export const KfwFocusringOutlineWidth: string;
 export const KfwFocusringOutlineOffset: string;
+export const KfwFocusringOutlineStyle: string;
 export const KfwFontweight: number;
 export const KfwFontweightHeading: number;
 export const KfwBreakpointMobile: string;

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.1.1
+ * KfW Design Tokens v0.2.0
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */
@@ -354,11 +354,6 @@ export const KfwColorBackgroundDarkGreen = {
   components: [0.2235, 0.5137, 0.3412],
   hex: "#398357",
 };
-export const KfwColorAccent = {
-  colorSpace: "srgb",
-  components: [0.7176, 0.9765, 0.6667],
-  hex: "#b7f9aa",
-};
 export const KfwColorOpaqueWhite90 = {
   colorSpace: "srgb",
   components: [1, 1, 1],
@@ -545,16 +540,9 @@ export const KfwLineheightList = 1.5;
 export const KfwLineheightHeading = 1.3;
 export const KfwLineheightHeading5 = 1.333;
 export const KfwBorderradius = "0.4rem";
-export const KfwFocusringOutline = {
-  color: {
-    colorSpace: "srgb",
-    components: [0, 0.2667, 0.4314],
-    hex: "#00446e",
-  },
-  width: "0.2rem",
-  style: "dashed",
-};
+export const KfwFocusringOutlineWidth = "0.2rem";
 export const KfwFocusringOutlineOffset = "0.2rem";
+export const KfwFocusringOutlineStyle = "dashed";
 export const KfwFontweight = 400;
 export const KfwFontweightHeading = 500;
 export const KfwBreakpointMobile = "60rem";

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

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.1.1
+// KfW Design Tokens v0.2.0
 // Copyright 2025
 // Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
 
@@ -170,7 +170,6 @@ $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-accent: #b7f9aa;
 $kfw-color-opaque-white-90: #ffffffe6;
 $kfw-color-opaque-white-95: #fffffff2;
 $kfw-color-opaque-gray-500-10: #41484c1a;
@@ -242,8 +241,9 @@ $kfw-lineheight-list: 1.5;
 $kfw-lineheight-heading: 1.3;
 $kfw-lineheight-heading-5: 1.333;
 $kfw-borderradius: 0.4rem;
-$kfw-focusring-outline: 0.2rem dashed #00446e;
+$kfw-focusring-outline-width: 0.2rem;
 $kfw-focusring-outline-offset: 0.2rem;
+$kfw-focusring-outline-style: dashed;
 $kfw-fontweight: 400;
 $kfw-fontweight-heading: 500;
 $kfw-breakpoint-mobile: 60rem;

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@openkfw/design-tokens",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "The source of truth for KfW-branded digital products.",
   "files": [
     "output",
     "tokens/tokens.json",
-    "tokens/gen-tokens.dark.json5",
-    "README.md"
+    "tokens/gen-tokens.dark.json5"
   ],
   "scripts": {
     "start": "concurrently \"npm run watch:extended\" \"npm run watch\"",
@@ -41,18 +40,18 @@
     "npm-check-updates": "^18.0.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.33.0",
+    "@eslint/js": "^9.35.0",
     "@tsconfig/node22": "^22.0.2",
-    "concurrently": "^9.2.0",
+    "concurrently": "^9.2.1",
     "deep-get-set-ts": "^1.1.1",
-    "eslint": "^9.33.0",
+    "eslint": "^9.35.0",
     "json5": "^2.2.3",
     "jsoneditor-cli": "^1.1.0",
     "lodash": "4.17.21",
     "prettier": "^3.6.2",
-    "style-dictionary": "^5.0.2",
-    "tsx": "^4.20.4",
+    "style-dictionary": "^5.0.4",
+    "tsx": "^4.20.5",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.40.0"
+    "typescript-eslint": "^8.43.0"
   }
 }

package/tokens/gen-tokens.dark.json5

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * By /root/IdeaProjects/design-tokens/tokens/extended/tokens/tokens.dark.json
+ * By /extended/tokens/tokens.dark.json
  */
 
 {
@@ -1142,9 +1142,6 @@
           $value: "{base.color.green.700}",
         },
       },
-      accent: {
-        $value: "{base.color.green.300}",
-      },
       opaque: {
         "white-90": {
           $value: "{base.color.white.90}",
@@ -1401,18 +1398,18 @@
       $value: "{base.borderradius.md}",
     },
     focusring: {
-      outline: {
-        $type: "border",
-        $value: {
-          color: "{semantic.color.fn.active}",
-          width: "{base.borderwidth.lg}",
-          style: "dashed",
-        },
+      "outline-width": {
+        $type: "dimension",
+        $value: "{base.borderwidth.lg}",
       },
       "outline-offset": {
         $type: "dimension",
         $value: "{base.borderwidth.lg}",
       },
+      "outline-style": {
+        $type: "strokeStyle",
+        $value: "dashed",
+      },
     },
     fontweight: {
       $type: "fontWeight",

package/tokens/tokens.json

@@ -292,7 +292,6 @@
         "dark-blue": { "$value": "{base.color.blue.800}" },
         "dark-green": { "$value": "{base.color.green.700}" }
       },
-      "accent": { "$value": "{base.color.green.300}" },
       "opaque": {
         "white-90": { "$value": "{base.color.white.90}" },
         "white-95": { "$value": "{base.color.white.95}" },
@@ -413,11 +412,9 @@
       "$value": "{base.borderradius.md}"
     },
     "focusring": {
-      "outline": {
-        "$type": "border",
-        "$value": { "color": "{semantic.color.fn.active}", "width": "{base.borderwidth.lg}", "style": "dashed" }
-      },
-      "outline-offset": { "$type": "dimension", "$value": "{base.borderwidth.lg}" }
+      "outline-width": { "$type": "dimension", "$value": "{base.borderwidth.lg}" },
+      "outline-offset": { "$type": "dimension", "$value": "{base.borderwidth.lg}" },
+      "outline-style": { "$type": "strokeStyle", "$value": "dashed" }
     },
     "fontweight": {
       "$type": "fontWeight",