@openkfw/design-tokens 0.1.2 → 0.2.0

package/README.md

@@ -1,12 +1,18 @@
 # KfW Design Tokens
 
+![KfW Design Tokens](/kfw-design-tokens.png)
+
 KfW Design Tokens is the source of truth for designing KfW-branded digital products. By default, it's built to align with our corporate brand and design but allows for customization to fit your particular product.
 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>.
+
+**Note: The Design Tokens are still in the pilot phase.** This means that they are currently being tested and evaluated for functionality and usability. Feedback from users during this phase is crucial for making improvements and ensuring that the tokens meet the needs of all stakeholders before a full stable release.
+
+The documentation on how to use design tokens is available [internally only](https://brand-guide.kfw.de/document/85/de#/user-interface/user-interface).
+If you have any questions or need assistance, please reach out to our "Design System & Tokens Community" in the internal Webex channel.
 
 ![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 +20,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 +30,19 @@ 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.
+Our commitment to open source encourages contributions from everyone.
 
-# 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 define breakpoints directly in your `tailwind.config.js` using JavaScript.  
+In Tailwind CSS v4, you can either use the <a href="https://v3.tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus">SCSS preprocessor</a> with variables for breakpoints, or use the standard CSS version and define your breakpoints statically in `px` (without variables), since this only affects breakpoints.

package/output/README.md

@@ -1,7 +1,6 @@
 # README for the Folder Structure in /output
 
-This document describes the structure of the `/output` directory and provides an overview of the files and folders contained within.
-
+This document outlines the structure of the /output directory and its contents.
 
 ## Folder Structure
 
@@ -10,13 +9,16 @@ This document describes the structure of the `/output` directory and provides an
 ├── /figma
 ├── /penpot
 ├── /json
-├── /web_stable_10px
-└── /web_next_16px
+├── /web_stable_10px (default)
+└── /web_next_16px (third-party)
 ```
-In the /output directory, you will find all available output formats for Figma, Penpot, JSON, and Web (CSS, SCSS, JS).
 
-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.
+In the `/output` directory, you will find all available output formats for Figma, Penpot, JSON, and Web (CSS, SCSS, JS).
+
+## Web Folder Usage
+
+- `/web_stable_10px`: This folder should be used by default. We use it already for KfW.de, MeineKfW, OKP and other KfW applications. It uses a REM root value of 62.5% (1rem = 10px) for optimal readability.
+
+- `/web_next_16px`: Use this folder for third-party systems where we cannot influence the REM root value and it corresponds to the standard browser font size of 16px (100%)
+
+Note: A font size of 10px should never be used. Therefore, it is advisable to set the font size in the `<body>` to 1.6rem.

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

@@ -141,95 +141,91 @@
       }
     },
     "Space": {
-      "Static": {
-        "5": {
-          "$value": "5px",
-          "$type": "spacing"
-        },
-        "10": {
-          "$value": "10px",
-          "$type": "spacing"
-        },
-        "15": {
-          "$value": "15px",
-          "$type": "spacing"
-        },
-        "20": {
-          "$value": "20px",
-          "$type": "spacing"
-        },
-        "25": {
-          "$value": "25px",
-          "$type": "spacing"
-        },
-        "30": {
-          "$value": "30px",
-          "$type": "spacing"
-        },
-        "35": {
-          "$value": "35px",
-          "$type": "spacing"
-        },
-        "40": {
-          "$value": "40px",
-          "$type": "spacing"
-        },
-        "50": {
-          "$value": "50px",
-          "$type": "spacing"
-        },
-        "60": {
-          "$value": "60px",
-          "$type": "spacing"
-        }
+      "5": {
+        "$value": "5px",
+        "$type": "spacing"
+      },
+      "10": {
+        "$value": "10px",
+        "$type": "spacing"
+      },
+      "15": {
+        "$value": "15px",
+        "$type": "spacing"
+      },
+      "20": {
+        "$value": "20px",
+        "$type": "spacing"
+      },
+      "25": {
+        "$value": "25px",
+        "$type": "spacing"
+      },
+      "30": {
+        "$value": "30px",
+        "$type": "spacing"
+      },
+      "35": {
+        "$value": "35px",
+        "$type": "spacing"
+      },
+      "40": {
+        "$value": "40px",
+        "$type": "spacing"
+      },
+      "50": {
+        "$value": "50px",
+        "$type": "spacing"
+      },
+      "60": {
+        "$value": "60px",
+        "$type": "spacing"
       }
     },
     "Fontsize": {
-      "Static": {
-        "Sm": {
-          "$value": "14px",
-          "$type": "fontSizes"
-        },
-        "Md": {
-          "$value": "16px",
-          "$type": "fontSizes"
-        },
-        "Lg": {
-          "$value": "18px",
-          "$type": "fontSizes"
-        },
-        "Xl": {
-          "$value": "20px",
-          "$type": "fontSizes"
-        },
-        "2xl": {
-          "$value": "22px",
-          "$type": "fontSizes"
-        },
-        "3xl": {
-          "$value": "24px",
-          "$type": "fontSizes"
-        },
-        "4xl": {
-          "$value": "26px",
-          "$type": "fontSizes"
-        },
-        "5xl": {
-          "$value": "28px",
-          "$type": "fontSizes"
-        },
-        "6xl": {
-          "$value": "30px",
-          "$type": "fontSizes"
-        },
-        "7xl": {
-          "$value": "32px",
-          "$type": "fontSizes"
-        },
-        "8xl": {
-          "$value": "36px",
-          "$type": "fontSizes"
-        }
+      "Sm": {
+        "$value": "14px",
+        "$type": "fontSizes"
+      },
+      "Md": {
+        "$value": "16px",
+        "$type": "fontSizes"
+      },
+      "Lg": {
+        "$value": "18px",
+        "$type": "fontSizes"
+      },
+      "Xl": {
+        "$value": "20px",
+        "$type": "fontSizes"
+      },
+      "2xl": {
+        "$value": "22px",
+        "$type": "fontSizes"
+      },
+      "3xl": {
+        "$value": "24px",
+        "$type": "fontSizes"
+      },
+      "4xl": {
+        "$value": "26px",
+        "$type": "fontSizes"
+      },
+      "5xl": {
+        "$value": "28px",
+        "$type": "fontSizes"
+      },
+      "6xl": {
+        "$value": "30px",
+        "$type": "fontSizes"
+      },
+      "7xl": {
+        "$value": "32px",
+        "$type": "fontSizes"
+      },
+      "8xl": {
+        "$value": "36px",
+        "$type": "fontSizes"
       }
     },
     "Lineheight": {
@@ -275,15 +271,15 @@
     "Borderwidth": {
       "None": {
         "$value": "0px",
-        "$type": "dimension"
+        "$type": "borderWidth"
       },
       "Md": {
         "$value": "1px",
-        "$type": "dimension"
+        "$type": "borderWidth"
       },
       "Lg": {
         "$value": "2px",
-        "$type": "dimension"
+        "$type": "borderWidth"
       }
     },
     "Fontweight": {
@@ -299,123 +295,19 @@
     "Letterspacing": {
       "Tight": {
         "$value": "-0.5px",
-        "$type": "dimension"
+        "$type": "letterSpacing"
       },
       "Normal": {
         "$value": "0px",
-        "$type": "dimension"
+        "$type": "letterSpacing"
       },
       "Wide": {
         "$value": "0.5px",
-        "$type": "dimension"
+        "$type": "letterSpacing"
       },
       "Wider": {
         "$value": "1px",
-        "$type": "dimension"
-      }
-    },
-    "Layout": {
-      "Breakpoint": {
-        "Xs": {
-          "$value": "320px",
-          "$type": "dimension"
-        },
-        "Sm": {
-          "$value": "600px",
-          "$type": "dimension"
-        },
-        "Md": {
-          "$value": "840px",
-          "$type": "dimension"
-        },
-        "Lg": {
-          "$value": "960px",
-          "$type": "dimension"
-        },
-        "Xl": {
-          "$value": "1280px",
-          "$type": "dimension"
-        }
-      },
-      "Container": {
-        "Sm": {
-          "$value": "896px",
-          "$type": "dimension"
-        },
-        "Md": {
-          "$value": "1080px",
-          "$type": "dimension"
-        },
-        "Lg": {
-          "$value": "1280px",
-          "$type": "dimension"
-        }
-      },
-      "Safezone": {
-        "Static": {
-          "Md": {
-            "$value": "20px",
-            "$type": "dimension"
-          },
-          "Lg": {
-            "$value": "40px",
-            "$type": "dimension"
-          }
-        }
-      },
-      "Gridcolumn": {
-        "1": {
-          "$value": 1,
-          "$type": "number"
-        },
-        "2": {
-          "$value": 2,
-          "$type": "number"
-        },
-        "3": {
-          "$value": 3,
-          "$type": "number"
-        },
-        "4": {
-          "$value": 4,
-          "$type": "number"
-        },
-        "6": {
-          "$value": 6,
-          "$type": "number"
-        },
-        "8": {
-          "$value": 8,
-          "$type": "number"
-        },
-        "12": {
-          "$value": 12,
-          "$type": "number"
-        }
-      },
-      "Gridgap": {
-        "Static": {
-          "Xs": {
-            "$value": "12px",
-            "$type": "dimension"
-          },
-          "Sm": {
-            "$value": "18px",
-            "$type": "dimension"
-          },
-          "Md": {
-            "$value": "22px",
-            "$type": "dimension"
-          },
-          "Lg": {
-            "$value": "26px",
-            "$type": "dimension"
-          },
-          "Xl": {
-            "$value": "36px",
-            "$type": "dimension"
-          }
-        }
+        "$type": "letterSpacing"
       }
     }
   },
@@ -491,10 +383,6 @@
           "$type": "color"
         }
       },
-      "Accent": {
-        "$value": "#b7f9aa",
-        "$type": "color"
-      },
       "Opaque": {
         "White-90": {
           "$value": "#ffffffe6",
@@ -640,31 +528,23 @@
         "$type": "spacing"
       },
       "Large": {
-        "Min": {
+        "Mobile": {
           "$value": "35px",
           "$type": "spacing"
         },
-        "Max": {
+        "Desktop": {
           "$value": "40px",
           "$type": "spacing"
-        },
-        "Val": {
-          "$value": "33.333px",
-          "$type": "spacing"
         }
       },
       "Big": {
-        "Min": {
+        "Mobile": {
           "$value": "50px",
           "$type": "spacing"
         },
-        "Max": {
+        "Desktop": {
           "$value": "60px",
           "$type": "spacing"
-        },
-        "Val": {
-          "$value": "46.666px",
-          "$type": "spacing"
         }
       }
     },
@@ -728,59 +608,43 @@
         "$type": "fontSizes"
       },
       "Heading-1": {
-        "Min": {
+        "Mobile": {
           "$value": "30px",
           "$type": "fontSizes"
         },
-        "Max": {
+        "Desktop": {
           "$value": "36px",
           "$type": "fontSizes"
-        },
-        "Val": {
-          "$value": "28px",
-          "$type": "fontSizes"
         }
       },
       "Heading-2": {
-        "Min": {
+        "Mobile": {
           "$value": "28px",
           "$type": "fontSizes"
         },
-        "Max": {
+        "Desktop": {
           "$value": "32px",
           "$type": "fontSizes"
-        },
-        "Val": {
-          "$value": "26.666px",
-          "$type": "fontSizes"
         }
       },
       "Heading-3": {
-        "Min": {
+        "Mobile": {
           "$value": "24px",
           "$type": "fontSizes"
         },
-        "Max": {
+        "Desktop": {
           "$value": "26px",
           "$type": "fontSizes"
-        },
-        "Val": {
-          "$value": "23.333px",
-          "$type": "fontSizes"
         }
       },
       "Heading-4": {
-        "Min": {
+        "Mobile": {
           "$value": "20px",
           "$type": "fontSizes"
         },
-        "Max": {
+        "Desktop": {
           "$value": "22px",
           "$type": "fontSizes"
-        },
-        "Val": {
-          "$value": "19.333px",
-          "$type": "fontSizes"
         }
       },
       "Heading-5": {
@@ -814,20 +678,6 @@
       "$value": "4px",
       "$type": "borderRadius"
     },
-    "Focusring": {
-      "Outline": {
-        "$value": {
-          "color": "#00446e",
-          "width": "2px",
-          "style": "dashed"
-        },
-        "$type": "border"
-      },
-      "Outline-offset": {
-        "$value": "2px",
-        "$type": "dimension"
-      }
-    },
     "Fontweight": {
       "Default": {
         "$value": 400,
@@ -837,48 +687,6 @@
         "$value": 500,
         "$type": "fontWeights"
       }
-    },
-    "Breakpoint": {
-      "Mobile": {
-        "$value": "600px",
-        "$type": "dimension"
-      },
-      "Tablet": {
-        "$value": "840px",
-        "$type": "dimension"
-      },
-      "Desktop": {
-        "$value": "960px",
-        "$type": "dimension"
-      }
-    },
-    "Contentwrapper": {
-      "Narrow": {
-        "$value": "896px",
-        "$type": "dimension"
-      },
-      "Basic": {
-        "$value": "1080px",
-        "$type": "dimension"
-      },
-      "Extended": {
-        "$value": "1280px",
-        "$type": "dimension"
-      }
-    },
-    "Safezone": {
-      "Min": {
-        "$value": "20px",
-        "$type": "dimension"
-      },
-      "Max": {
-        "$value": "40px",
-        "$type": "dimension"
-      },
-      "Val": {
-        "$value": "-13.333px",
-        "$type": "dimension"
-      }
     }
   },
   "$metadata": {