@openkfw/design-tokens 0.5.0 → 0.5.2

package/README.md

@@ -7,39 +7,54 @@ The tokens follow a template that complies with the <a href="https://tr.designto
 
 **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)
+![Status: Pilot](https://img.shields.io/badge/status-pilot-yellow)
+[![License: MPL-2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen)](./LICENSE)
+[![NPM package](https://img.shields.io/npm/v/@openkfw/design-tokens.svg)](https://www.npmjs.com/package/@openkfw/design-tokens)
+![GitHub repo size](https://img.shields.io/github/repo-size/openkfw/design-tokens)
 
-![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
+KfW Design Tokens, along with all related documentation, components, support, and assets such as fonts, icons, and images, are intended for **internal use** only.
+Although the source code for KfW Design Tokens is available under the MPL 2.0 License, this open-source release is provided solely as a **showcase**.
+KfW fully reserves all rights to the KfW brand. The use of the KfW brand and design is subject to strict restrictions, even when built into code that we provide.
+If you have any questions or need assistance, please reach out to our "Design System & Tokens Community" in the internal Webex channel or use the official [KfW Brand-Guide](https://brand-guide.kfw.de/document/85/de#/user-interface/user-interface).
 
-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.
+## 🚀 Installation
 
-## 🚀 Installation with NPM
-
-Run the following command to install the Design Tokens:
+Install via npm:
 
 ```bash
+npm install -D @openkfw/design-tokens
+```
+
+Import tokens from the output directory, for example:
 
-npm i -D @openkfw/design-tokens
+```css
+@import url("@openkfw/design-tokens/output/css/kfw-design-tokens.light.css");
 ```
 
-Import or use files inside the `output` folder, e.g.:
+Or use the prebuilt `demo` (css-boilerplate) stylesheet:
 
 ```css
-@import url("@openkfw/design-tokens/output/web_stable_10px/css/kfw-design-tokens.light.css");
+@import url("@openkfw/design-tokens/demo/dist/css/style.min.css");
 ```
 
 ## ❤️ Contributing
 
-Our commitment to open source encourages contributions from everyone.
+Considering supporting with your contribution? Whether you like to contribute new patterns, fix a bug, spotted a typo or have ideas for improvement - we'd love to hear from you. Our commitment to open source encourages contributions from everyone.
+
+## 📒 License
 
-## 📒 Licensing
+Copyright (c) 2025 KfW Bankengruppe
 
-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.
+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. KfW may update this licensing agreement at any time. This notice and permission must be
+included in all copies or substantial portions of the Software.
 
-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.
+Last updated: Nov 17, 2025
 
 ## 💁 FAQ
 
@@ -63,7 +78,10 @@ Currently, CSS variables cannot be used directly in media query declarations. Ho
 As a workaround, you can extract your variables into @custom-media rules and generate your CSS using the PostCSS plugin `postcss-custom-media`. A sample integration can be found in the `/demo` directory.
 Otherwise you can use the static `px` values provided in the design tokens.
 
-### How to use breakpoint design tokens width @media and Tailwind CSS?
+### How to use breakpoint design tokens with @media in Tailwind CSS?
+
+In Tailwind CSS v3, define breakpoints in your `tailwind.config.js` using JavaScript.  
+In Tailwind CSS v4, you can either:
 
-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 with the workaround described above.
+- Use the [SCSS preprocessor](https://v3.tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus) and reference breakpoint variables, or
+- Use the CSS version with the `postcss-custom-media` workaround described above.

package/demo/dist/css/style.min.css

@@ -0,0 +1 @@
+@layer core,third-party,components,utility;@layer core.reset,core.tokens,core.base;@layer third-party.imports,third-party.overrides;@layer components.base,components.variations;@layer core.reset{*,*:after,*:before{box-sizing:border-box}:focus-visible{outline-offset:3px}:where(html){-webkit-text-size-adjust:none;text-size-adjust:none}:where(html){line-height:1.5}:where(html){scrollbar-gutter:stable}:where(h1){font-size:2em;margin-block:.67em}:where(abbr[title]){cursor:help;text-decoration-line:underline;text-decoration-style:dotted}@media(forced-colors:active){mark{color:HighlightText;background-color:Highlight}}:where(del,ins,s):before,:where(del,ins,s):after{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;position:absolute;white-space:nowrap;content:"test"}:where(s):before{content:"stricken text start "}:where(s):after{content:" stricken text end"}:where(del):before{content:"deletion start "}:where(del):after{content:" deletion end"}:where(ins):before{content:"insertion start "}:where(ins):after{content:" insertion end"}:where(audio,iframe,img,svg,video){max-block-size:100%;max-inline-size:100%}:where(fieldset){min-inline-size:0}:where(label):has(+:where(textarea,input,select)){display:block}:where(textarea:not([rows])){min-block-size:6em}:where(button,input,select,textarea){font-family:inherit;font-size:inherit}:where([type=search]){-webkit-appearance:textfield}@supports (-webkit-touch-callout: none){:where([type=search]){border:1px solid -apple-system-secondary-label;background-color:canvas}}:where([type=tel],[type=url],[type=email],[type=number]):not(:placeholder-shown){direction:ltr}:where(table){border-collapse:collapse;border:1px solid}:where(th,td){border:1px solid;padding:.25em .5em}:where(dialog)::backdrop{background:#0000004d}:where(dialog),:where(dialog)::backdrop{opacity:0;transition:opacity .3s ease-out,display .3s allow-discrete,overlay .3s allow-discrete}:where(dialog[open]),:where(dialog[open])::backdrop{opacity:1}@starting-style{:where(dialog[open]),:where(dialog[open])::backdrop{opacity:0}}[hidden]:not([hidden=until-found]){display:none!important}}@layer core.tokens{:root,:host,.kfw-theme--light{color-scheme:light}:root,:host,.kfw-theme--light{--kfw-base-color-blue-100: #e9f5fb;--kfw-base-color-blue-400: #54b3e2;--kfw-base-color-blue-500: #007abc;--kfw-base-color-blue-600: #005a8c;--kfw-base-color-blue-700: #00446e;--kfw-base-color-blue-800: #00375b;--kfw-base-color-green-100: #ecfded;--kfw-base-color-green-300: #b7f9aa;--kfw-base-color-green-400: #94eb90;--kfw-base-color-green-700: #398357;--kfw-base-color-white-90: #ffffffe6;--kfw-base-color-white-95: #fffffff2;--kfw-base-color-white: #ffffff;--kfw-base-color-black: #000000;--kfw-base-color-gray-50: #f6f7f8;--kfw-base-color-gray-100: #eef0f2;--kfw-base-color-gray-200: #d8dfe3;--kfw-base-color-gray-300: #a1adb5;--kfw-base-color-gray-400: #6d767d;--kfw-base-color-gray-500-10: #41484c1a;--kfw-base-color-gray-500-30: #41484c4d;--kfw-base-color-gray-500-90: #41484ce6;--kfw-base-color-gray-500: #41484c;--kfw-base-color-gray-600: #2d3134;--kfw-base-color-violet-400: #9598e0;--kfw-base-color-violet-500: #686fc8;--kfw-base-color-red-400: #c80538;--kfw-base-color-yellow-500: #eac80b;--kfw-base-fontfamily-sans: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;--kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--kfw-base-space-static-5: .5rem;--kfw-base-space-static-10: 1rem;--kfw-base-space-static-15: 1.5rem;--kfw-base-space-static-20: 2rem;--kfw-base-space-static-25: 2.5rem;--kfw-base-space-static-30: 3rem;--kfw-base-space-static-35: 3.5rem;--kfw-base-space-static-40: 4rem;--kfw-base-space-static-50: 5rem;--kfw-base-space-static-60: 6rem;--kfw-base-space-fluid-5-min: .5rem;--kfw-base-space-fluid-5-max: 1rem;--kfw-base-space-fluid-5-val: .735vi + .588px;--kfw-base-space-fluid-10-min: 1rem;--kfw-base-space-fluid-10-max: 1.5rem;--kfw-base-space-fluid-10-val: .735vi + .5588rem;--kfw-base-space-fluid-15-min: 1.5rem;--kfw-base-space-fluid-15-max: 2rem;--kfw-base-space-fluid-15-val: .735vi + 1.0588rem;--kfw-base-space-fluid-20-min: 2rem;--kfw-base-space-fluid-20-max: 2.5rem;--kfw-base-space-fluid-20-val: .735vi + 1.5588rem;--kfw-base-space-fluid-25-min: 2.5rem;--kfw-base-space-fluid-25-max: 3rem;--kfw-base-space-fluid-25-val: .735vi + 2.0588rem;--kfw-base-space-fluid-30-min: 3rem;--kfw-base-space-fluid-30-max: 3.5rem;--kfw-base-space-fluid-30-val: .735vi + 2.5588rem;--kfw-base-space-fluid-35-min: 3.5rem;--kfw-base-space-fluid-35-max: 4rem;--kfw-base-space-fluid-35-val: .735vi + 3.0588rem;--kfw-base-space-fluid-40-min: 4rem;--kfw-base-space-fluid-40-max: 5rem;--kfw-base-space-fluid-40-val: 1.471vi + 3.1176rem;--kfw-base-space-fluid-50-min: 5rem;--kfw-base-space-fluid-50-max: 6rem;--kfw-base-space-fluid-50-val: 1.471vi + 4.1176rem;--kfw-base-fontsize-static-sm: 1.4rem;--kfw-base-fontsize-static-md: 1.6rem;--kfw-base-fontsize-static-lg: 1.8rem;--kfw-base-fontsize-static-xl: 2rem;--kfw-base-fontsize-static-2xl: 2.2rem;--kfw-base-fontsize-static-3xl: 2.4rem;--kfw-base-fontsize-static-4xl: 2.6rem;--kfw-base-fontsize-static-5xl: 2.8rem;--kfw-base-fontsize-static-6xl: 3rem;--kfw-base-fontsize-static-7xl: 3.2rem;--kfw-base-fontsize-static-8xl: 3.6rem;--kfw-base-fontsize-fluid-sm-min: 1.4rem;--kfw-base-fontsize-fluid-sm-max: 1.6rem;--kfw-base-fontsize-fluid-sm-val: .294vi + 1.2235rem;--kfw-base-fontsize-fluid-md-min: 1.6rem;--kfw-base-fontsize-fluid-md-max: 1.8rem;--kfw-base-fontsize-fluid-md-val: .294vi + 1.4235rem;--kfw-base-fontsize-fluid-lg-min: 1.8rem;--kfw-base-fontsize-fluid-lg-max: 2rem;--kfw-base-fontsize-fluid-lg-val: .294vi + 1.6235rem;--kfw-base-fontsize-fluid-xl-min: 2rem;--kfw-base-fontsize-fluid-xl-max: 2.2rem;--kfw-base-fontsize-fluid-xl-val: .294vi + 1.8235rem;--kfw-base-fontsize-fluid-2xl-min: 2.2rem;--kfw-base-fontsize-fluid-2xl-max: 2.4rem;--kfw-base-fontsize-fluid-2xl-val: .294vi + 2.0235rem;--kfw-base-fontsize-fluid-3xl-min: 2.4rem;--kfw-base-fontsize-fluid-3xl-max: 2.6rem;--kfw-base-fontsize-fluid-3xl-val: .294vi + 2.2235rem;--kfw-base-fontsize-fluid-4xl-min: 2.6rem;--kfw-base-fontsize-fluid-4xl-max: 2.8rem;--kfw-base-fontsize-fluid-4xl-val: .294vi + 2.4234999999999998rem;--kfw-base-fontsize-fluid-5xl-min: 2.8rem;--kfw-base-fontsize-fluid-5xl-max: 3.2rem;--kfw-base-fontsize-fluid-5xl-val: .588vi + 2.4471rem;--kfw-base-fontsize-fluid-6xl-min: 3rem;--kfw-base-fontsize-fluid-6xl-max: 3.6rem;--kfw-base-fontsize-fluid-6xl-val: .882vi + 2.4706rem;--kfw-base-lineheight-2xs: 1.2;--kfw-base-lineheight-xs: 1.3;--kfw-base-lineheight-sm: 1.333;--kfw-base-lineheight-md: 1.4;--kfw-base-lineheight-lg: 1.5;--kfw-base-borderradius-sm: 2px;--kfw-base-borderradius-md: .4rem;--kfw-base-borderradius-lg: 2rem;--kfw-base-borderradius-circle: 999.9rem;--kfw-base-borderwidth-none: 0;--kfw-base-borderwidth-md: 1px;--kfw-base-borderwidth-lg: 2px;--kfw-base-fontweight-regular: 400;--kfw-base-fontweight-medium: 500;--kfw-base-letterspacing-tight: -.5px;--kfw-base-letterspacing-normal: 0;--kfw-base-letterspacing-wide: .5px;--kfw-base-letterspacing-wider: 1px;--kfw-base-layout-breakpoint-xs: 320px;--kfw-base-layout-breakpoint-sm: 600px;--kfw-base-layout-breakpoint-md: 840px;--kfw-base-layout-breakpoint-lg: 960px;--kfw-base-layout-breakpoint-xl: 1280px;--kfw-base-layout-container-sm: 89.6rem;--kfw-base-layout-container-md: 108rem;--kfw-base-layout-container-lg: 128rem;--kfw-base-layout-safezone-static-md: 2rem;--kfw-base-layout-safezone-static-lg: 4rem;--kfw-base-layout-safezone-fluid-min: 2rem;--kfw-base-layout-safezone-fluid-max: 4rem;--kfw-base-layout-safezone-fluid-val: 2.941vi + .2353rem;--kfw-base-layout-gridcolumn-1: 1;--kfw-base-layout-gridcolumn-2: 2;--kfw-base-layout-gridcolumn-3: 3;--kfw-base-layout-gridcolumn-4: 4;--kfw-base-layout-gridcolumn-6: 6;--kfw-base-layout-gridcolumn-8: 8;--kfw-base-layout-gridcolumn-12: 12;--kfw-base-layout-gridgap-static-xs: 1.2rem;--kfw-base-layout-gridgap-static-sm: 1.8rem;--kfw-base-layout-gridgap-static-md: 2.2rem;--kfw-base-layout-gridgap-static-lg: 2.6rem;--kfw-base-layout-gridgap-static-xl: 3.6rem;--kfw-base-layout-gridgap-fluid-min: 1.2rem;--kfw-base-layout-gridgap-fluid-max: 3.6rem;--kfw-base-layout-gridgap-fluid-val: 3.529vi - .9176rem;--kfw-color-fn: #005a8c;--kfw-color-fn-active: #00446e;--kfw-color-fn-inactive: #a1adb5;--kfw-color-fn-border: #2d3134;--kfw-color-fn-label: #2d3134;--kfw-color-text: #2d3134;--kfw-color-text-on-dark-bg: #ffffff;--kfw-color-text-on-disabled: #ffffff;--kfw-color-text-headline-on-dark-bg: #b7f9aa;--kfw-color-background: #ffffff;--kfw-color-background-subtle: #f6f7f8;--kfw-color-background-disabled: #a1adb5;--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-opaque-white-90: #ffffffe6;--kfw-color-opaque-white-95: #fffffff2;--kfw-color-opaque-gray-500-10: #41484c1a;--kfw-color-opaque-gray-500-30: #41484c4d;--kfw-color-opaque-gray-500-90: #41484ce6;--kfw-color-state-danger: #c80538;--kfw-color-state-success: #398357;--kfw-color-state-warning: #9598e0;--kfw-color-status-red: #c80538;--kfw-color-status-yellow: #eac80b;--kfw-color-status-green: #398357;--kfw-color-line-6: #00446e;--kfw-color-line-7: #2d3134;--kfw-color-line-8: #a1adb5;--kfw-color-line-9: #005a8c;--kfw-color-line-10: #2d3134;--kfw-color-line-11: #b7f9aa;--kfw-color-line-12: #a1adb5;--kfw-color-product-container: #f6f7f8;--kfw-color-product-benefit: #007abc;--kfw-color-product-credit: #398357;--kfw-color-product-cooperation: #686fc8;--kfw-color-product-credit-benefit: #41484c;--kfw-color-icon: #005a8c;--kfw-color-icon-secondary: #54b3e2;--kfw-color-icon-disabled: #398357;--kfw-color-icon-disabled-secondary: #94eb90;--kfw-fontfamily: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;--kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--kfw-space-xsmall: 1rem;--kfw-space-small: 2rem;--kfw-space-medium: 3rem;--kfw-space-large-min: 3.5rem;--kfw-space-large-max: 4rem;--kfw-space-large-val: .735vi + 3.0588rem;--kfw-space-big-min: 5rem;--kfw-space-big-max: 6rem;--kfw-space-big-val: 1.471vi + 4.1176rem;--kfw-fontspace: 2rem;--kfw-fontspace-2xsmall: .5rem;--kfw-fontspace-xsmall: 1rem;--kfw-fontspace-small: 1.5rem;--kfw-fontspace-large: 3rem;--kfw-fontspace-heading-1: 2rem;--kfw-fontspace-heading-2: 2rem;--kfw-fontspace-heading-3: 1rem;--kfw-fontspace-heading-4: 1rem;--kfw-fontspace-heading-5: 1rem;--kfw-fontspace-heading-6: 1rem;--kfw-fontsize: 1.6rem;--kfw-fontsize-introduction: 2rem;--kfw-fontsize-large: 1.8rem;--kfw-fontsize-small: 1.4rem;--kfw-fontsize-heading-1-min: 3rem;--kfw-fontsize-heading-1-max: 3.6rem;--kfw-fontsize-heading-1-val: .882vi + 2.4706rem;--kfw-fontsize-heading-2-min: 2.8rem;--kfw-fontsize-heading-2-max: 3.2rem;--kfw-fontsize-heading-2-val: .588vi + 2.4471rem;--kfw-fontsize-heading-3-min: 2.4rem;--kfw-fontsize-heading-3-max: 2.6rem;--kfw-fontsize-heading-3-val: .294vi + 2.2235rem;--kfw-fontsize-heading-4-min: 2rem;--kfw-fontsize-heading-4-max: 2.2rem;--kfw-fontsize-heading-4-val: .294vi + 1.8235rem;--kfw-fontsize-heading-5: 1.8rem;--kfw-fontsize-heading-6: 1.6rem;--kfw-lineheight: 1.4;--kfw-lineheight-list: 1.5;--kfw-lineheight-heading: 1.3;--kfw-lineheight-heading-5: 1.333;--kfw-borderradius: .4rem;--kfw-borderradius-large: 2rem;--kfw-borderradius-small: 2px;--kfw-borderradius-circle: 999.9rem;--kfw-borderwidth: 1px;--kfw-borderwidth-large: 2px;--kfw-focusring-outline-width: 2px;--kfw-focusring-outline-offset: 2px;--kfw-focusring-outline-style: dashed;--kfw-fontweight: 400;--kfw-fontweight-bold: 500;--kfw-breakpoint-mobile: 600px;--kfw-breakpoint-tablet: 840px;--kfw-breakpoint-desktop: 960px;--kfw-breakpoint-desktop-large: 1280px;--kfw-contentwrapper-narrow: 89.6rem;--kfw-contentwrapper-basic: 108rem;--kfw-contentwrapper-extended: 128rem;--kfw-safezone-min: 2rem;--kfw-safezone-max: 4rem;--kfw-safezone-val: 2.941vi + .2353rem}}@layer core.tokens;@layer core{@layer tokens{:root{--kfw-safezone: clamp(var(--kfw-safezone-min), var(--kfw-safezone-val), var(--kfw-safezone-max));--kfw-space-large: clamp(var(--kfw-space-large-min), var(--kfw-space-large-val), var(--kfw-space-large-max));--kfw-space-big: clamp(var(--kfw-space-big-min), var(--kfw-space-big-val), var(--kfw-space-big-max));--headline-color: var(--kfw-color-text);--kfw-focusring-outline-color: var(--kfw-color-fn-active)}}@layer base{:root{font-size:62.5%;font-family:var(--kfw-fontfamily);background-color:var(--kfw-color-background);color:var(--kfw-color-text);line-height:var(--kfw-lineheight);font-weight:var(--kfw-fontweight);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*:focus-visible{outline:var(--kfw-focusring-outline-width) var(--kfw-focusring-outline-style) var(--kfw-focusring-outline-color);outline-offset:var(--kfw-focusring-outline-offset)}body{margin:0;font-size:1.6rem}strong,b{font-weight:var(--kfw-fontweight-bold)}small{font-size:80%}:is(sub,sup){position:relative;line-height:0;vertical-align:baseline;font-size:75%}sub{bottom:-.25em}sup{top:-.5em}:is(address,blockquote,dl,ol,p,pre,table,ul){margin-block:0 var(--kfw-fontspace)}:is(address,blockquote,dl,ol,p,pre,table,ul):last-child{margin-block-end:0}ul,ol,menu{list-style:none inside none;padding-inline-start:0}mark{padding:.125rem .25rem;vertical-align:baseline;background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg)}blockquote{margin-inline:0}blockquote footer{margin-block-start:var(--kfw-fontspace-2xsmall)}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}audio,video{display:inline-block}:where(iframe){border-style:none}img,video{max-width:100%;height:auto;border-style:none}figure{display:block;margin:0;padding:0}figure figcaption{padding:var(--kfw-space-xsmall)}code,kbd,samp,pre{font-family:var(--kfw-fontfamily-code);line-height:initial}pre{display:block;margin-block:0 var(--kfw-fontspace);overflow:auto;-ms-overflow-style:scrollbar}abbr[title]{text-decoration:underline dotted;cursor:help}ins{color:var(--kfw-color-state-success);text-decoration:none}del{color:var(--kfw-color-state-danger)}:is(h1,h2,h3,h4,h5,h6,.hl--1,.hl--2,.hl--3,.hl--4,.hl--5,.hl--6){font-weight:var(--kfw-fontweight-bold);line-height:var(--kfw-lineheight-heading);margin-block-start:0;color:var(--headline-color);display:block}h1,.hl--1{font-size:clamp(var(--kfw-fontsize-heading-1-min),var(--kfw-fontsize-heading-1-val),var(--kfw-fontsize-heading-1-max));margin-block-end:var(--kfw-fontspace-heading-1)}@media(min-width:1280px){h1,.hl--1{letter-spacing:var(--kfw-base-letterspacing-tight)}}h2,.hl--2{font-size:clamp(var(--kfw-fontsize-heading-2-min),var(--kfw-fontsize-heading-2-val),var(--kfw-fontsize-heading-2-max));margin-block-end:var(--kfw-fontspace-heading-2);letter-spacing:var(--kfw-base-letterspacing-tight)}h3,.hl--3{font-size:clamp(var(--kfw-fontsize-heading-3-min),var(--kfw-fontsize-heading-3-val),var(--kfw-fontsize-heading-3-max));margin-block-end:var(--kfw-fontspace-heading-3);letter-spacing:var(--kfw-base-letterspacing-tight)}@media(min-width:1280px){h3,.hl--3{letter-spacing:var(--kfw-base-letterspacing-normal)}}h4,.hl--4{font-size:clamp(var(--kfw-fontsize-heading-4-min),var(--kfw-fontsize-heading-4-val),var(--kfw-fontsize-heading-4-max));margin-block-end:var(--kfw-fontspace-heading-4)}h5,.hl--5{font-size:var(--kfw-fontsize-heading-5);margin-block-end:var(--kfw-fontspace-heading-5);line-height:var(--kfw-lineheight-heading-5);letter-spacing:var(--kfw-base-letterspacing-normal)}@media(min-width:1280px){h5,.hl--5{letter-spacing:var(--kfw-base-letterspacing-wide)}}h6,.hl--6{font-size:var(--kfw-fontsize-heading-6);margin-block-end:var(--kfw-fontspace-heading-6);letter-spacing:var(--kfw-base-letterspacing-wide);line-height:var(--kfw-lineheight)}:where(a:not([role=button])),[role=link]{--link-color: var(--kfw-color-fn);--link-color-hover: var(--kfw-color-fn-active);color:var(--link-color);text-decoration:none;border-radius:var(--kfw-borderradius)}a:not([role=button]):where(:hover,:focus,:active,[aria-current]:not([aria-current=false])),[role=link]:where(:hover,:focus,:active,[aria-current]:not([aria-current=false])){color:var(--link-color-hover);text-decoration:underline}a[role=button]{display:inline-block}.form-control{--borderhover: var(--kfw-color-fn-active);--placeholder-color: var(--kfw-color-fn);appearance:none;width:100%;height:4.3rem;font-size:var(--kfw-fontsize);font-family:inherit;line-height:var(--kfw-lineheight);color:var(--kfw-color-fn);border-radius:var(--kfw-borderradius);margin-block-start:0;border:var(--kfw-borderwidth) solid var(--kfw-base-color-gray-500);padding-inline:1.5rem;padding-block:1rem;background-color:var(--kfw-color-background)}.form-control::placeholder{color:var(--placeholder-color)}.form-control:disabled{--placeholder-color: var(--kfw-color-text);background-color:transparent;color:var(--kfw-color-text);border-color:var(--kfw-color-fn-inactive)}.form-control:hover:not(:disabled){box-shadow:0 0 0 var(--kfw-borderwidth) var(--borderhover)}:is([type=checkbox],[type=radio],select.form-control):not(:disabled){cursor:pointer}select.form-control{padding-block:0}textarea.form-control{height:auto}.form-control[aria-invalid=true]{--borderhover: var(--kfw-color-state-danger);--placeholder-color: var(--kfw-color-state-danger);border-color:var(--kfw-color-state-danger);color:var(--kfw-color-state-danger);box-shadow:0 0 0 var(--kfw-borderwidth) var(--borderhover)}:is(progress,[type=checkbox],[type=radio],[type=range]){accent-color:var(--kfw-color-fn)}textarea{display:block;resize:vertical}fieldset{margin:0;padding:0;border:0}[type=file],[type=range]{padding:0;border:0;width:100%}[type=file]::file-selector-button{margin-inline-end:var(--kfw-space-xsmall)}.file-upload{display:flex;flex-direction:column;align-items:center;padding:var(--kfw-space-small) var(--kfw-space-small) var(--kfw-space-medium);background-color:var(--kfw-color-background-light-green);margin-block-end:var(--kfw-space-medium);overflow:hidden}.file-upload__title{margin-block-end:var(--kfw-fontspace)}label.file-upload__title{margin-block-end:var(--kfw-fontspace);font-weight:var(--kfw-fontweight)}.file-upload__input{width:auto;max-width:100%;position:relative;left:0;transform:translate(20%);color:transparent}.file-upload__input--has-files{transform:none;color:inherit}.file-upload__icon{position:relative;display:block;transform:scale(1);width:2.8rem;height:1.3rem;border:.3rem solid var(--kfw-color-fn);border-top:0;margin-block:2.5rem 2rem}.file-upload__icon:before,.file-upload__icon:after{content:"";display:block;position:absolute}.file-upload__icon:before{left:1rem;bottom:.4rem;width:.3rem;height:1.9rem;background-color:var(--kfw-color-fn)}.file-upload__icon:after{bottom:.7rem;left:.35rem;width:1.6rem;height:1.6rem;transform:rotate(45deg);border-left:.3rem solid var(--kfw-color-fn);border-top:.3rem solid var(--kfw-color-fn)}:where(input,select,textarea,fieldset)+small,.invalid-feedback{display:block;width:100%;margin-block-start:.8rem;font-size:var(--kfw-fontsize-small);line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal)}.invalid-feedback{color:var(--kfw-color-state-danger)}:is(label,fieldset legend,.form-label){display:inline-block;margin-block-end:.8rem;font-weight:var(--kfw-fontweight-bold);color:var(--kfw-color-text)}:is([type=checkbox],[type=radio]){appearance:none;width:var(--field-size);height:var(--field-size);margin:0;border:var(--kfw-borderwidth) solid var(--kfw-color-fn-active);color:var(--kfw-color-fn-active);vertical-align:middle;position:relative;display:flex;align-items:center;flex-shrink:0;justify-content:center;background-color:var(--kfw-color-background)}:is([type=checkbox],[type=radio])[aria-invalid=true]{border-color:var(--kfw-color-state-danger);border-width:var(--kfw-borderwidth-large);color:var(--kfw-color-state-danger)}[type=radio]{border-radius:var(--kfw-borderradius-circle)}[type=checkbox]{border-radius:var(--kfw-borderradius)}:is([type=checkbox],[type=radio]):disabled{background-color:var(--kfw-base-color-gray-100);color:var(--kfw-color-fn-inactive);border-color:var(--kfw-color-fn-inactive)}:is([type=checkbox],[type=radio]):before{content:none;display:block;position:absolute;top:50%;left:50%;border-color:currentcolor;border-bottom-style:solid;border-left-style:solid}[type=checkbox]:before{width:1.6rem;height:.9rem;transform:translate(-50%,-50%) rotate(314deg);margin-top:-1px;border-bottom-width:.225rem;border-left-width:.225rem}[type=radio]:before{width:1.4rem;height:1.4rem;transform:translate(-50%,-50%);border-radius:var(--kfw-borderradius-circle);background-color:currentcolor;forced-color-adjust:none}:is([type=checkbox],[type=radio]):checked:before{content:""}:is([type=radio],[type=checkbox]):hover:not(:disabled),:is([type=radio],[type=checkbox]):focus:not(:disabled){border-width:var(--kfw-borderwidth-large)}.form-group{margin-block-end:var(--kfw-space-medium)}.list-group-form{--col-gap: 1.5rem;--field-size: 2.8rem;align-items:flex-start;display:flex;flex-direction:column;gap:var(--kfw-space-small) var(--kfw-space-medium)}.list-group-form>*{align-items:flex-start;display:flex;margin-bottom:0}.list-group-form--with-description label{font-weight:var(--kfw-fontweight-bold)}.list-group-form--with-description label>*{font-weight:var(--kfw-fontweight)}.list-group-form>*:has(.list-group-form--subgroup){flex-wrap:wrap}.list-group-form label{font-weight:var(--kfw-fontweight);padding-left:var(--col-gap);width:100%;margin-block-end:0;display:flex;flex:1 1;flex-direction:column;padding-block-start:.4rem}.list-group-form>*:has(input:not(:disabled)) label{cursor:pointer}.list-group-form--subgroup{flex-basis:100%;margin-block-start:var(--kfw-space-small);padding-left:calc(var(--field-size) + var(--col-gap))}@media(min-width:600px){.list-group-form--inline{flex-flow:row wrap}}button,[type=submit],[type=reset],[type=button],[type=file]::file-selector-button,[role=button]{border:var(--kfw-borderwidth) solid transparent;font-family:var(--kfw-fontfamily);font-size:var(--kfw-fontsize);border-radius:var(--kfw-borderradius);display:inline-flex;gap:.8rem;text-align:center;text-decoration:none;line-height:var(--kfw-lineheight);padding:1.2rem 2.5rem;justify-content:center;max-width:100%;vertical-align:middle;white-space:nowrap;cursor:pointer}.button--primary{--button-border-color: var(--kfw-color-fn);--button-bg: var(--kfw-color-fn);--button-color: var(--kfw-color-text-on-dark-bg);--button-border-color-hover: var(--kfw-color-fn-active);--button-bg-hover: var(--kfw-color-fn-active);--button-color-hover: var(--button-color);background-color:var(--button-bg);color:var(--button-color);border-color:var(--button-border-color)}.button--primary:is(:hover,:focus){color:var(--button-color-hover);background-color:var(--button-bg-hover);border-color:var(--button-border-color-hover);text-decoration:underline}[type=file]::file-selector-button,:is([type=reset],.button--secondary){--button-border-color: var(--kfw-color-fn);--button-bg: transparent;--button-color: var(--kfw-color-fn);--button-border-color-hover: var(--kfw-color-fn-active);--button-bg-hover: var(--kfw-color-fn-active);--button-color-hover: var(--kfw-color-text-on-dark-bg);background-color:var(--button-bg);color:var(--button-color);border-color:var(--button-border-color)}[type=file]::file-selector-button:is(:hover,:focus),:is([type=reset],.button--secondary):is(:hover,:focus){color:var(--button-color-hover);background-color:var(--button-bg-hover);border-color:var(--button-border-color-hover);text-decoration:underline}.button--tertiary{--button-color: var(--kfw-color-fn);--button-bg: transparent;--button-color-hover: var(--kfw-color-fn-active);background-color:var(--button-bg);color:var(--button-color);padding:0;border:0;text-decoration:none}.button--tertiary:is(:hover,:focus){color:var(--button-color-hover);text-decoration:underline}.button--small{padding:.8rem 1.6rem;font-size:var(--kfw-fontsize-small)}input:not([type=submit],[type=button],[type=reset])[disabled],select[disabled],textarea[disabled],label[aria-disabled=true],:where(fieldset[disabled]) :is(input:not([type=submit],[type=button],[type=reset]),select,textarea){pointer-events:none}:is(.container,.container-fluid,.container-narrow,.container-extended,.container-extended-fullwidth){margin-inline:auto;width:100%}:is(.container,.container-fluid,.container-narrow,.container-extended){padding-inline:var(--kfw-safezone)}.container{max-width:var(--kfw-contentwrapper-basic)}.container-narrow{max-width:var(--kfw-contentwrapper-narrow)}.container-extended,.container-extended-fullwidth{max-width:var(--kfw-contentwrapper-extended)}[class^=container]>section{margin-block:var(--kfw-space-large) var(--kfw-space-large)}.overflow-auto{overflow:auto}}}@layer components{@layer base{.header{background-color:var(--kfw-color-background);border-bottom:var(--kfw-borderwidth) solid var(--kfw-color-line-11);position:sticky;top:0;z-index:1000}.header>div{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:6.4rem;gap:var(--kfw-space-medium)}.header img{width:auto}.header__menu{text-align:right}.header-logo-mobile{height:2.8rem}.header-logo-desktop{display:none}.header--sticky .header-logo-mobile{display:block}.header--sticky .header-logo-desktop{display:none}@media(min-width:960px){.header :is(button,a){font-size:var(--kfw-fontsize-large)}.header-logo-mobile{display:none}.header-logo-desktop{display:block;height:6rem;margin-block:3rem}}.footer{--kfw-focusring-outline-color: var(--kfw-color-background);border-top:var(--kfw-base-borderwidth-md) solid var(--kfw-color-line-11);background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg);font-size:var(--kfw-fontsize-small);line-height:var(--kfw-lineheight);padding-block:var(--kfw-space-medium) var(--kfw-space-large)}.footer .button--secondary{--button-color: var(--kfw-color-text-on-dark-bg);--button-border-color: var(--kfw-color-text-on-dark-bg);--button-bg-hover: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--kfw-color-text);--button-border-color-hover: var(--kfw-color-text-on-dark-bg)}.footer :where(a:not([role=button])),.footer [role=link]{--link-color: var(--kfw-color-text-on-dark-bg);--link-color-hover: var(--kfw-color-text-on-dark-bg);text-decoration:underline}.footer a:not([role=button]):where(:hover,:focus,:active,[aria-current]:not([aria-current=false])),.footer [role=link]:where(:hover,:focus,:active,[aria-current]:not([aria-current=false])){text-decoration:none}.footer>*{align-items:baseline;display:flex;flex-direction:column;gap:var(--kfw-space-medium);justify-content:space-between}@media(min-width:960px){.footer>*{gap:3.6rem;flex-direction:row}}.footer__copyright{flex-shrink:0}.footer__list{list-style:none;padding:0;margin:0;display:flex;flex-flow:row wrap;max-width:100%;gap:1.6rem var(--kfw-space-large)}.grid{display:grid;grid-template-columns:1fr;column-gap:var(--kfw-safezone);margin-block-end:var(--kfw-fontspace)}@media(min-width:840px){.grid{grid-template-columns:repeat(auto-fit,minmax(0,1fr));margin-block-end:0}}.hero{--hero-content-desktop-width: 42.9rem}.hero>*{position:relative}.hero__bars{display:block;width:100%}@media(min-width:960px){.hero__bars{width:var(--hero-content-desktop-width);position:absolute;top:4rem;left:4rem;bottom:4rem}}.hero__title{width:100%;margin-block:0;align-items:center;display:flex;flex-direction:row;padding:2rem;background-color:var(--kfw-color-background-light-blue)}@media(min-width:960px){.hero__title{flex-direction:row;position:absolute;display:flex;width:var(--hero-content-desktop-width);background-color:var(--kfw-color-opaque-white-95);left:4rem;top:calc(5rem + 25px);border-radius:0 0 var(--kfw-borderradius-large) 0;padding:2rem 3rem 3rem}}.hero__image{width:100%;margin-inline:auto;display:block;object-fit:cover;height:auto;max-width:128rem}}@layer variations{.bg-dark{--headline-color: var(--kfw-color-text-headline-on-dark-bg);--kfw-focusring-outline-color: var(--kfw-color-background);background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg)}.bg-dark :where(a:not([role=button])),.bg-dark [role=link]{--link-color: var(--kfw-color-text-on-dark-bg);--link-color-hover: var(--kfw-color-text-on-dark-bg);text-decoration:underline}.bg-dark :where(a:not([role=button])):is([aria-current]:not([aria-current=false]),:hover,:active,:focus),.bg-dark [role=link]:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){text-decoration:none}.bg-dark .button--primary{--button-color: var(--kfw-color-fn);--button-bg: var(--kfw-color-text-on-dark-bg);--button-border-color: var(--kfw-color-text-on-dark-bg);--button-bg-hover: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--button-color);--button-border-color-hover: var(--kfw-color-text-on-dark-bg)}.bg-dark .button--secondary{--button-color: var(--kfw-color-text-on-dark-bg);--button-border-color: var(--kfw-color-text-on-dark-bg);--button-bg-hover: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--kfw-color-text);--button-border-color-hover: var(--kfw-color-text-on-dark-bg)}.bg-dark .button--tertiary{--button-color: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--kfw-color-text-on-dark-bg)}.bg-subtle{background-color:var(--kfw-color-background-subtle)}.hl--sb{line-height:var(--kfw-lineheight-heading);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize-introduction)}@media(min-width:1280px){.hl--sb{font-size:var(--kfw-base-fontsize-static-5xl)}}.smk--1{line-height:var(--kfw-lineheight-heading);letter-spacing:var(--kfw-base-letterspacing-wider);font-size:var(--kfw-fontsize-small)}.tx--1{line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize)}.tx--1-medium{line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-wide);font-size:var(--kfw-fontsize)}.tx--2{line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize-small)}.tx--4{line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize-introduction)}}}@layer utility{.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.d-block{display:block}.m-auto{margin-inline:auto}.p-x{padding-inline:var(--kfw-safezone)}.p-y{padding-block:var(--kfw-safezone)}.m-x{margin-inline:var(--kfw-safezone)}.m-y{margin-block:var(--kfw-safezone)}.mb-xs{margin-block-end:var(--kfw-space-xsmall)}.mb-sm{margin-block-end:var(--kfw-space-small)}.mb-md{margin-block-end:var(--kfw-space-medium)}.mb-lg{margin-block-end:var(--kfw-space-large)}.mb-xl{margin-block-end:var(--kfw-space-big)}}

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 :root, :host, .kfw-theme--light { color-scheme: light; }
@@ -118,8 +118,7 @@
   --kfw-base-borderradius-sm: 2px;
   --kfw-base-borderradius-md: 0.4rem;
   --kfw-base-borderradius-lg: 2rem;
-  --kfw-base-borderradius-full: 999.9rem;
-  --kfw-base-borderwidth-none: 0;
+  --kfw-base-borderradius-circle: 999.9rem;
   --kfw-base-borderwidth-md: 1px;
   --kfw-base-borderwidth-lg: 2px;
   --kfw-base-fontweight-regular: 400;
@@ -246,6 +245,7 @@
   --kfw-borderradius: 0.4rem;
   --kfw-borderradius-large: 2rem;
   --kfw-borderradius-small: 2px;
+  --kfw-borderradius-circle: 999.9rem;
   --kfw-borderwidth: 1px;
   --kfw-borderwidth-large: 2px;
   --kfw-focusring-outline-width: 2px;

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

@@ -263,16 +263,12 @@
         "$value": "20px",
         "$type": "borderRadius"
       },
-      "Full": {
+      "Circle": {
         "$value": "9999px",
         "$type": "borderRadius"
       }
     },
     "Borderwidth": {
-      "None": {
-        "$value": "0px",
-        "$type": "borderWidth"
-      },
       "Md": {
         "$value": "1px",
         "$type": "borderWidth"
@@ -690,6 +686,10 @@
       "Small": {
         "$value": "2px",
         "$type": "borderRadius"
+      },
+      "Circle": {
+        "$value": "9999px",
+        "$type": "borderRadius"
       }
     },
     "Borderwidth": {

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 export const KfwBaseColorBlue100: {
@@ -232,8 +232,7 @@ export const KfwBaseLineheightLg: number;
 export const KfwBaseBorderradiusSm: string;
 export const KfwBaseBorderradiusMd: string;
 export const KfwBaseBorderradiusLg: string;
-export const KfwBaseBorderradiusFull: string;
-export const KfwBaseBorderwidthNone: string;
+export const KfwBaseBorderradiusCircle: string;
 export const KfwBaseBorderwidthMd: string;
 export const KfwBaseBorderwidthLg: string;
 export const KfwBaseFontweightRegular: number;
@@ -540,6 +539,7 @@ export const KfwLineheightHeading5: number;
 export const KfwBorderradius: string;
 export const KfwBorderradiusLarge: string;
 export const KfwBorderradiusSmall: string;
+export const KfwBorderradiusCircle: string;
 export const KfwBorderwidth: string;
 export const KfwBorderwidthLarge: string;
 export const KfwFocusringOutlineWidth: string;

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 export const KfwBaseColorBlue100 = {
@@ -234,8 +234,7 @@ export const KfwBaseLineheightLg = 1.5;
 export const KfwBaseBorderradiusSm = "2px";
 export const KfwBaseBorderradiusMd = "0.4rem";
 export const KfwBaseBorderradiusLg = "2rem";
-export const KfwBaseBorderradiusFull = "999.9rem";
-export const KfwBaseBorderwidthNone = "0";
+export const KfwBaseBorderradiusCircle = "999.9rem";
 export const KfwBaseBorderwidthMd = "1px";
 export const KfwBaseBorderwidthLg = "2px";
 export const KfwBaseFontweightRegular = 400;
@@ -541,6 +540,7 @@ export const KfwLineheightHeading5 = 1.333;
 export const KfwBorderradius = "0.4rem";
 export const KfwBorderradiusLarge = "2rem";
 export const KfwBorderradiusSmall = "2px";
+export const KfwBorderradiusCircle = "999.9rem";
 export const KfwBorderwidth = "1px";
 export const KfwBorderwidthLarge = "2px";
 export const KfwFocusringOutlineWidth = "2px";

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

@@ -3511,8 +3511,8 @@
           "lg"
         ]
       },
-      "full": {
-        "key": "{base.borderradius.full}",
+      "circle": {
+        "key": "{base.borderradius.circle}",
         "$value": {
           "unit": "px",
           "value": 9999
@@ -3526,43 +3526,18 @@
             "value": 9999
           },
           "$type": "dimension",
-          "key": "{base.borderradius.full}"
+          "key": "{base.borderradius.circle}"
         },
-        "name": "full",
+        "name": "circle",
         "attributes": {},
         "path": [
           "base",
           "borderradius",
-          "full"
+          "circle"
         ]
       }
     },
     "borderwidth": {
-      "none": {
-        "key": "{base.borderwidth.none}",
-        "$value": {
-          "unit": "px",
-          "value": 0
-        },
-        "filePath": "tokens/tokens.json",
-        "isSource": true,
-        "$type": "dimension",
-        "original": {
-          "$value": {
-            "unit": "px",
-            "value": 0
-          },
-          "$type": "dimension",
-          "key": "{base.borderwidth.none}"
-        },
-        "name": "none",
-        "attributes": {},
-        "path": [
-          "base",
-          "borderwidth",
-          "none"
-        ]
-      },
       "md": {
         "key": "{base.borderwidth.md}",
         "$value": {
@@ -7054,6 +7029,28 @@
           "borderradius",
           "small"
         ]
+      },
+      "circle": {
+        "key": "{semantic.borderradius.circle}",
+        "$value": {
+          "unit": "px",
+          "value": 9999
+        },
+        "filePath": "tokens/tokens.json",
+        "isSource": true,
+        "$type": "dimension",
+        "original": {
+          "$value": "{base.borderradius.circle}",
+          "$type": "dimension",
+          "key": "{semantic.borderradius.circle}"
+        },
+        "name": "circle",
+        "attributes": {},
+        "path": [
+          "semantic",
+          "borderradius",
+          "circle"
+        ]
       }
     },
     "borderwidth": {

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

@@ -263,16 +263,12 @@
         "$value": "20px",
         "$type": "borderRadius"
       },
-      "Full": {
+      "Circle": {
         "$value": "9999px",
         "$type": "borderRadius"
       }
     },
     "Borderwidth": {
-      "None": {
-        "$value": "0px",
-        "$type": "borderWidth"
-      },
       "Md": {
         "$value": "1px",
         "$type": "borderWidth"
@@ -690,6 +686,10 @@
       "Small": {
         "$value": "2px",
         "$type": "borderRadius"
+      },
+      "Circle": {
+        "$value": "9999px",
+        "$type": "borderRadius"
       }
     },
     "Borderwidth": {

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

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+// KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
 
 $kfw-base-color-blue-100: #e9f5fb;
 $kfw-base-color-blue-400: #54b3e2;
@@ -114,8 +114,7 @@ $kfw-base-lineheight-lg: 1.5;
 $kfw-base-borderradius-sm: 2px;
 $kfw-base-borderradius-md: 0.4rem;
 $kfw-base-borderradius-lg: 2rem;
-$kfw-base-borderradius-full: 999.9rem;
-$kfw-base-borderwidth-none: 0;
+$kfw-base-borderradius-circle: 999.9rem;
 $kfw-base-borderwidth-md: 1px;
 $kfw-base-borderwidth-lg: 2px;
 $kfw-base-fontweight-regular: 400;
@@ -242,6 +241,7 @@ $kfw-lineheight-heading-5: 1.333;
 $kfw-borderradius: 0.4rem;
 $kfw-borderradius-large: 2rem;
 $kfw-borderradius-small: 2px;
+$kfw-borderradius-circle: 999.9rem;
 $kfw-borderwidth: 1px;
 $kfw-borderwidth-large: 2px;
 $kfw-focusring-outline-width: 2px;

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 :root, :host, .kfw-theme--light { color-scheme: light; }
@@ -118,8 +118,7 @@
   --kfw-base-borderradius-sm: 2px;
   --kfw-base-borderradius-md: 0.25rem;
   --kfw-base-borderradius-lg: 1.25rem;
-  --kfw-base-borderradius-full: 624.9375rem;
-  --kfw-base-borderwidth-none: 0;
+  --kfw-base-borderradius-circle: 624.9375rem;
   --kfw-base-borderwidth-md: 1px;
   --kfw-base-borderwidth-lg: 2px;
   --kfw-base-fontweight-regular: 400;
@@ -246,6 +245,7 @@
   --kfw-borderradius: 0.25rem;
   --kfw-borderradius-large: 1.25rem;
   --kfw-borderradius-small: 2px;
+  --kfw-borderradius-circle: 624.9375rem;
   --kfw-borderwidth: 1px;
   --kfw-borderwidth-large: 2px;
   --kfw-focusring-outline-width: 2px;

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 export const KfwBaseColorBlue100: {
@@ -232,8 +232,7 @@ export const KfwBaseLineheightLg: number;
 export const KfwBaseBorderradiusSm: string;
 export const KfwBaseBorderradiusMd: string;
 export const KfwBaseBorderradiusLg: string;
-export const KfwBaseBorderradiusFull: string;
-export const KfwBaseBorderwidthNone: string;
+export const KfwBaseBorderradiusCircle: string;
 export const KfwBaseBorderwidthMd: string;
 export const KfwBaseBorderwidthLg: string;
 export const KfwBaseFontweightRegular: number;
@@ -540,6 +539,7 @@ export const KfwLineheightHeading5: number;
 export const KfwBorderradius: string;
 export const KfwBorderradiusLarge: string;
 export const KfwBorderradiusSmall: string;
+export const KfwBorderradiusCircle: string;
 export const KfwBorderwidth: string;
 export const KfwBorderwidthLarge: string;
 export const KfwFocusringOutlineWidth: string;

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 export const KfwBaseColorBlue100 = {
@@ -234,8 +234,7 @@ export const KfwBaseLineheightLg = 1.5;
 export const KfwBaseBorderradiusSm = "2px";
 export const KfwBaseBorderradiusMd = "0.25rem";
 export const KfwBaseBorderradiusLg = "1.25rem";
-export const KfwBaseBorderradiusFull = "624.9375rem";
-export const KfwBaseBorderwidthNone = "0";
+export const KfwBaseBorderradiusCircle = "624.9375rem";
 export const KfwBaseBorderwidthMd = "1px";
 export const KfwBaseBorderwidthLg = "2px";
 export const KfwBaseFontweightRegular = 400;
@@ -541,6 +540,7 @@ export const KfwLineheightHeading5 = 1.333;
 export const KfwBorderradius = "0.25rem";
 export const KfwBorderradiusLarge = "1.25rem";
 export const KfwBorderradiusSmall = "2px";
+export const KfwBorderradiusCircle = "624.9375rem";
 export const KfwBorderwidth = "1px";
 export const KfwBorderwidthLarge = "2px";
 export const KfwFocusringOutlineWidth = "2px";

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

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+// KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
 
 $kfw-base-color-blue-100: #e9f5fb;
 $kfw-base-color-blue-400: #54b3e2;
@@ -114,8 +114,7 @@ $kfw-base-lineheight-lg: 1.5;
 $kfw-base-borderradius-sm: 2px;
 $kfw-base-borderradius-md: 0.25rem;
 $kfw-base-borderradius-lg: 1.25rem;
-$kfw-base-borderradius-full: 624.9375rem;
-$kfw-base-borderwidth-none: 0;
+$kfw-base-borderradius-circle: 624.9375rem;
 $kfw-base-borderwidth-md: 1px;
 $kfw-base-borderwidth-lg: 2px;
 $kfw-base-fontweight-regular: 400;
@@ -242,6 +241,7 @@ $kfw-lineheight-heading-5: 1.333;
 $kfw-borderradius: 0.25rem;
 $kfw-borderradius-large: 1.25rem;
 $kfw-borderradius-small: 2px;
+$kfw-borderradius-circle: 624.9375rem;
 $kfw-borderwidth: 1px;
 $kfw-borderwidth-large: 2px;
 $kfw-focusring-outline-width: 2px;

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@openkfw/design-tokens",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "The source of truth for KfW-branded digital products.",
   "files": [
     "output",
     "tokens/tokens.json",
-    "tokens/gen-tokens.dark.json5"
+    "tokens/gen-tokens.dark.json5",
+    "demo/src/styles/style.css",
+    "demo/src/styles/vendor/**.css",
+    "demo/dist/css/style.min.css"
   ],
   "scripts": {
     "start": "concurrently \"npm run watch:extended\" \"npm run watch\"",
@@ -38,7 +41,7 @@
     "@eslint/js": "^9.37.0",
     "@tsconfig/node22": "^22.0.2",
     "@types/lodash": "^4.17.20",
-    "@types/node": "^24.7.1",
+    "@types/node": "^22",
     "concurrently": "^9.2.1",
     "deep-get-set-ts": "^1.1.2",
     "eslint": "^9.37.0",

package/tokens/gen-tokens.dark.json5

@@ -852,7 +852,7 @@
           value: 20,
         },
       },
-      full: {
+      circle: {
         $value: {
           unit: "px",
           value: 9999,
@@ -861,12 +861,6 @@
     },
     borderwidth: {
       $type: "dimension",
-      none: {
-        $value: {
-          unit: "px",
-          value: 0,
-        },
-      },
       md: {
         $value: {
           unit: "px",
@@ -1410,6 +1404,9 @@
       small: {
         $value: "{base.borderradius.sm}",
       },
+      circle: {
+        $value: "{base.borderradius.circle}",
+      },
     },
     borderwidth: {
       $type: "dimension",

package/tokens/tokens.json

@@ -193,11 +193,10 @@
       "sm": { "$value": { "unit": "px", "value": 2 } },
       "md": { "$value": { "unit": "px", "value": 4 } },
       "lg": { "$value": { "unit": "px", "value": 20 } },
-      "full": { "$value": { "unit": "px", "value": 9999 } }
+      "circle": { "$value": { "unit": "px", "value": 9999 } }
     },
     "borderwidth": {
       "$type": "dimension",
-      "none": { "$value": { "unit": "px", "value": 0 } },
       "md": { "$value": { "unit": "px", "value": 1 } },
       "lg": { "$value": { "unit": "px", "value": 2 } }
     },
@@ -412,7 +411,8 @@
       "$type": "dimension",
       "default": { "$value": "{base.borderradius.md}" },
       "large": { "$value": "{base.borderradius.lg}" },
-      "small": { "$value": "{base.borderradius.sm}" }
+      "small": { "$value": "{base.borderradius.sm}" },
+      "circle": { "$value": "{base.borderradius.circle}" }
     },
     "borderwidth": {
       "$type": "dimension",