@openkfw/design-tokens 0.1.3 → 0.2.1

package/README.md

@@ -1,8 +1,14 @@
 # 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)
 
@@ -15,7 +21,8 @@ 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
+
+npm i -D @openkfw/design-tokens
 ```
 
 Import or use files inside the `output` folder, e.g.:
@@ -26,7 +33,7 @@ Import or use files inside the `output` folder, e.g.:
 
 ## ❤️ 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
 
@@ -38,4 +45,5 @@ Licensed under the **Mozilla Public License 2.0 (MPL-2.0)** (the "License"); you
 
 ### How can I use breakpoint design tokens in Tailwind CSS?
 
-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.
+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"
       }
     }
   },
@@ -636,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"
         }
       }
     },
@@ -724,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": {
@@ -810,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,
@@ -833,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": {

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

@@ -6982,42 +6982,26 @@
       ]
     },
     "focusring": {
-      "outline": {
-        "key": "{semantic.focusring.outline}",
-        "$type": "border",
+      "outline-width": {
+        "key": "{semantic.focusring.outline-width}",
+        "$type": "dimension",
         "$value": {
-          "color": {
-            "colorSpace": "srgb",
-            "components": [
-              0,
-              0.2667,
-              0.4314
-            ],
-            "hex": "#00446e"
-          },
-          "width": {
-            "unit": "px",
-            "value": 2
-          },
-          "style": "dashed"
+          "unit": "px",
+          "value": 2
         },
         "filePath": "tokens/tokens.json",
         "isSource": true,
         "original": {
-          "$type": "border",
-          "$value": {
-            "color": "{semantic.color.fn.active}",
-            "width": "{base.borderwidth.lg}",
-            "style": "dashed"
-          },
-          "key": "{semantic.focusring.outline}"
+          "$type": "dimension",
+          "$value": "{base.borderwidth.lg}",
+          "key": "{semantic.focusring.outline-width}"
         },
-        "name": "outline",
+        "name": "outline-width",
         "attributes": {},
         "path": [
           "semantic",
           "focusring",
-          "outline"
+          "outline-width"
         ]
       },
       "outline-offset": {
@@ -7041,6 +7025,29 @@
           "focusring",
           "outline-offset"
         ]
+      },
+      "outline-style": {
+        "key": "{semantic.focusring.outline-style}",
+        "$type": "strokeStyle",
+        "$value": "dashed",
+        "filePath": "tokens/tokens.json",
+        "isSource": true,
+        "original": {
+          "$type": "strokeStyle",
+          "$value": "dashed",
+          "key": "{semantic.focusring.outline-style}"
+        },
+        "name": "kfw-focusring-outline-style",
+        "attributes": {
+          "category": "semantic",
+          "type": "focusring",
+          "item": "outline-style"
+        },
+        "path": [
+          "semantic",
+          "focusring",
+          "outline-style"
+        ]
       }
     },
     "fontweight": {