@openkfw/design-tokens 0.1.2 → 0.1.3

package/README.md

@@ -6,7 +6,7 @@ The documentation for how to using design tokens is accessible only <a href="htt
 
 ![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/figma/kfw-design-tokens.light.json

@@ -491,10 +491,6 @@
           "$type": "color"
         }
       },
-      "Accent": {
-        "$value": "#b7f9aa",
-        "$type": "color"
-      },
       "Opaque": {
         "White-90": {
           "$value": "#ffffffe6",

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}",

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

@@ -491,10 +491,6 @@
           "$type": "color"
         }
       },
-      "Accent": {
-        "$value": "#b7f9aa",
-        "$type": "color"
-      },
       "Opaque": {
         "White-90": {
           "$value": "#ffffffe6",

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;

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],

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;

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;

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],

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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openkfw/design-tokens",
-  "version": "0.1.2",
+  "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.2",
-    "tsx": "^4.20.4",
+    "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}",

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}" },