@openkfw/design-tokens 0.1.1 → 0.1.3

package/README.md

@@ -4,9 +4,9 @@ KfW Design Tokens is the source of truth for designing KfW-branded digital produ
 The tokens follow a template that complies with the <a href="https://tr.designtokens.org/">W3C DTCG format</a>.
 The documentation for how to using design tokens is accessible only <a href="https://brand-guide.kfw.de/document/85/de#/user-interface/user-interface">internally</a>.
 
-![Design Tokens badge](https://img.shields.io/badge/openkfw-design--tokens-005a8c) [![License: MPL-2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen)](./LICENSE)
+![Design Tokens badge](https://img.shields.io/badge/openkfw-design--tokens-005a8c) [![License: MPL-2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen)](./LICENSE) ![GitHub repo size](https://img.shields.io/github/repo-size/openkfw/design-tokens.svg?style=flat-square) ![GitHub package.json version ](https://img.shields.io/github/package-json/v/openkfw/design-tokens) [![NPM package](https://img.shields.io/npm/v/@openkfw/design-tokens.svg)](https://www.npmjs.com/package/@openkfw/design-tokens)
 
-# Customizing KfW Design Tokens for open source
+## Customizing KfW Design Tokens for open source
 
 Although the source code for KfW Design Tokens is free and available under the MPL 2.0 License, KfW fully reserves all rights to the KfW brand. To prevent users from getting confused about the source of a digital product or experience, there are strict restrictions on using the KfW brand and design, even when built into code that we provide. For any customization other than explicitly for the KfW, you must replace the KfW theme. To use KfW Design Tokens as open source software and customize it, please follow the instructions.
 
@@ -14,7 +14,7 @@ Although the source code for KfW Design Tokens is free and available under the M
 
 Run the following command to install the Design Tokens:
 
-```
+```bash
 npm install @openkfw/design-tokens
 ```
 
@@ -24,16 +24,18 @@ Import or use files inside the `output` folder, e.g.:
 @import url("@openkfw/design-tokens/output/web_stable_10px/css/kfw-design-tokens.light.css");
 ```
 
-# Contributing
+## ❤️ Contributing
 
 Our commitment to open source means that we are enabling - even encouraging - all interested parties to contribute.
 
-# Licensing
+## 📒 Licensing
 
 Copyright (c) 2025 KfW
 
-Licensed under the **Mozilla Public License 2.0 (MPL-2.0)** (the "License"); you may not use this file except in compliance with the License.
+Licensed under the **Mozilla Public License 2.0 (MPL-2.0)** (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License by reviewing the file [LICENSE](./LICENSE) in the repository. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the [LICENSE](./LICENSE) for the specific language governing permissions and limitations under the License.
+
+## 💁 FAQ
 
-You may obtain a copy of the License by reviewing the file [LICENSE](./LICENSE) in the repository.
+### How can I use breakpoint design tokens in Tailwind CSS?
 
-Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the [LICENSE](./LICENSE) for the specific language governing permissions and limitations under the License.
+In Tailwind CSS v3, you can easily add breakpoints by defining them in your tailwind.config.js file using JavaScript. In Tailwind CSS v4, if you want to use CSS variables with breakpoints, you may need to utilize a preprocessor like <a href="https://v3.tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus">Sass</a>, as CSS variables and breakpoints do not work seamlessly together in that version.

package/output/README.md

@@ -13,20 +13,10 @@ This document describes the structure of the `/output` directory and provides an
 ├── /web_stable_10px
 └── /web_next_16px
 ```
+In the /output directory, you will find all available output formats for Figma, Penpot, JSON, and Web (CSS, SCSS, JS).
 
-### /figma and /penpot
-
-These folders contain design specifications for Figma and Penpot, respectively. All tokens are specified with pixel values.
-
-### /json
-
-This folder contains specifications for documentation. All tokens are specified with pixel values.
-
-### /web_stable_10px
-
-This folder contains styles (CSS, SCSS, JS) for applications that adhere to the KfW standard of 10px = 1rem, such as MeineKfW, KfW.de, and the Online Credit Portal.
-
-
-### /web_next_16px
-
-This folder contains styles for applications that use 16px = 1rem (the default browser font size), such as third-party systems like Storybook and Frontify.
+In the Web, we differentiate between `/web_stable_10px` and `/web_next_16px`, which use different REM root values. 
+For KfW.de, MeineKfW, education, and other KfW applications, we use 62.5% (16px = 1.6rem) by default for readability 
+reasons, meaning that 1rem equals 10px. In third-party systems where we cannot influence the REM root value and it 
+corresponds to the standard browser font size of 16px (100%), /web_next_16px should be used instead. 
+Please note that a font size of 10px should never be used. Therefore, it is advisable to set the font size in the to 1.6rem.

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

@@ -491,10 +491,6 @@
           "$type": "color"
         }
       },
-      "Accent": {
-        "$value": "#b7f9aa",
-        "$type": "color"
-      },
       "Opaque": {
         "White-90": {
           "$value": "#ffffffe6",
@@ -706,7 +702,7 @@
         "$type": "dimension"
       },
       "Heading-6": {
-        "$value": "20px",
+        "$value": "10px",
         "$type": "dimension"
       }
     },

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

@@ -5059,37 +5059,6 @@
           ]
         }
       },
-      "accent": {
-        "key": "{semantic.color.accent}",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [
-            0.7176,
-            0.9765,
-            0.6667
-          ],
-          "hex": "#b7f9aa"
-        },
-        "filePath": "tokens/tokens.json",
-        "isSource": true,
-        "$type": "color",
-        "original": {
-          "$value": "{base.color.green.300}",
-          "$type": "color",
-          "key": "{semantic.color.accent}"
-        },
-        "name": "kfw-color-accent",
-        "attributes": {
-          "category": "semantic",
-          "type": "color",
-          "item": "accent"
-        },
-        "path": [
-          "semantic",
-          "color",
-          "accent"
-        ]
-      },
       "opaque": {
         "white-90": {
           "key": "{semantic.color.opaque.white-90}",
@@ -6460,13 +6429,13 @@
         "key": "{semantic.fontspace.heading-6}",
         "$value": {
           "unit": "px",
-          "value": 20
+          "value": 10
         },
         "filePath": "tokens/tokens.json",
         "isSource": true,
         "$type": "dimension",
         "original": {
-          "$value": "{base.space.static.20}",
+          "$value": "{base.space.static.10}",
           "$type": "dimension",
           "key": "{semantic.fontspace.heading-6}"
         },

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

@@ -491,10 +491,6 @@
           "$type": "color"
         }
       },
-      "Accent": {
-        "$value": "#b7f9aa",
-        "$type": "color"
-      },
       "Opaque": {
         "White-90": {
           "$value": "#ffffffe6",
@@ -706,7 +702,7 @@
         "$type": "dimension"
       },
       "Heading-6": {
-        "$value": "20px",
+        "$value": "10px",
         "$type": "dimension"
       }
     },

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.1.1
+ * KfW Design Tokens v0.1.3
  * 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;
@@ -222,7 +221,7 @@
   --kfw-fontspace-heading-3: 0.625rem;
   --kfw-fontspace-heading-4: 0.625rem;
   --kfw-fontspace-heading-5: 0.625rem;
-  --kfw-fontspace-heading-6: 1.25rem;
+  --kfw-fontspace-heading-6: 0.625rem;
   --kfw-fontsize: 1rem;
   --kfw-fontsize-introduction: 1.25rem;
   --kfw-fontsize-small: 0.875rem;

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.1.1
+ * KfW Design Tokens v0.1.3
  * 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[];

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.1.3
  * 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],
@@ -521,7 +516,7 @@ export const KfwFontspaceHeading2 = "1.25rem";
 export const KfwFontspaceHeading3 = "0.625rem";
 export const KfwFontspaceHeading4 = "0.625rem";
 export const KfwFontspaceHeading5 = "0.625rem";
-export const KfwFontspaceHeading6 = "1.25rem";
+export const KfwFontspaceHeading6 = "0.625rem";
 export const KfwFontsize = "1rem";
 export const KfwFontsizeIntroduction = "1.25rem";
 export const KfwFontsizeSmall = "0.875rem";

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.1.3
 // 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;
@@ -218,7 +217,7 @@ $kfw-fontspace-heading-2: 1.25rem;
 $kfw-fontspace-heading-3: 0.625rem;
 $kfw-fontspace-heading-4: 0.625rem;
 $kfw-fontspace-heading-5: 0.625rem;
-$kfw-fontspace-heading-6: 1.25rem;
+$kfw-fontspace-heading-6: 0.625rem;
 $kfw-fontsize: 1rem;
 $kfw-fontsize-introduction: 1.25rem;
 $kfw-fontsize-small: 0.875rem;

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.1.3
  * 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;
@@ -222,7 +221,7 @@
   --kfw-fontspace-heading-3: 1rem;
   --kfw-fontspace-heading-4: 1rem;
   --kfw-fontspace-heading-5: 1rem;
-  --kfw-fontspace-heading-6: 2rem;
+  --kfw-fontspace-heading-6: 1rem;
   --kfw-fontsize: 1.6rem;
   --kfw-fontsize-introduction: 2rem;
   --kfw-fontsize-small: 1.4rem;

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.1.3
  * 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[];

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.1.3
  * 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],
@@ -521,7 +516,7 @@ export const KfwFontspaceHeading2 = "2rem";
 export const KfwFontspaceHeading3 = "1rem";
 export const KfwFontspaceHeading4 = "1rem";
 export const KfwFontspaceHeading5 = "1rem";
-export const KfwFontspaceHeading6 = "2rem";
+export const KfwFontspaceHeading6 = "1rem";
 export const KfwFontsize = "1.6rem";
 export const KfwFontsizeIntroduction = "2rem";
 export const KfwFontsizeSmall = "1.4rem";

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.1.3
 // 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;
@@ -218,7 +217,7 @@ $kfw-fontspace-heading-2: 2rem;
 $kfw-fontspace-heading-3: 1rem;
 $kfw-fontspace-heading-4: 1rem;
 $kfw-fontspace-heading-5: 1rem;
-$kfw-fontspace-heading-6: 2rem;
+$kfw-fontspace-heading-6: 1rem;
 $kfw-fontsize: 1.6rem;
 $kfw-fontsize-introduction: 2rem;
 $kfw-fontsize-small: 1.4rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openkfw/design-tokens",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "The source of truth for KfW-branded digital products.",
   "files": [
     "output",
@@ -41,17 +41,17 @@
     "npm-check-updates": "^18.0.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.33.0",
+    "@eslint/js": "^9.34.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.34.0",
     "json5": "^2.2.3",
     "jsoneditor-cli": "^1.1.0",
     "lodash": "4.17.21",
     "prettier": "^3.6.2",
-    "style-dictionary": "^5.0.1",
-    "tsx": "^4.20.4",
+    "style-dictionary": "^5.0.2",
+    "tsx": "^4.20.5",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.40.0"
   }

package/tokens/gen-tokens.dark.json5

@@ -1142,9 +1142,6 @@
           $value: "{base.color.green.700}",
         },
       },
-      accent: {
-        $value: "{base.color.green.300}",
-      },
       opaque: {
         "white-90": {
           $value: "{base.color.white.90}",
@@ -1313,7 +1310,7 @@
         $value: "{base.space.static.10}",
       },
       "heading-6": {
-        $value: "{base.space.static.20}",
+        $value: "{base.space.static.10}",
       },
     },
     fontsize: {

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}" },
@@ -370,7 +369,7 @@
       "heading-3": { "$value": "{base.space.static.10}" },
       "heading-4": { "$value": "{base.space.static.10}" },
       "heading-5": { "$value": "{base.space.static.10}" },
-      "heading-6": { "$value": "{base.space.static.20}" }
+      "heading-6": { "$value": "{base.space.static.10}" }
     },
     "fontsize": {
       "$type": "dimension",