@openkfw/design-tokens 0.1.1 → 0.1.2

package/README.md

@@ -4,7 +4,7 @@ KfW Design Tokens is the source of truth for designing KfW-branded digital produ
 The tokens follow a template that complies with the <a href="https://tr.designtokens.org/">W3C DTCG format</a>.
 The documentation for how to using design tokens is accessible only <a href="https://brand-guide.kfw.de/document/85/de#/user-interface/user-interface">internally</a>.
 
-![Design Tokens badge](https://img.shields.io/badge/openkfw-design--tokens-005a8c) [![License: MPL-2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen)](./LICENSE)
+![Design Tokens badge](https://img.shields.io/badge/openkfw-design--tokens-005a8c) [![License: MPL-2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen)](./LICENSE) ![GitHub repo size](https://img.shields.io/github/repo-size/openkfw/design-tokens.svg?style=flat-square) ![GitHub package.json version ](https://img.shields.io/github/package-json/v/openkfw/design-tokens) [![NPM package](https://img.shields.io/npm/v/@openkfw/design-tokens.svg)](https://www.npmjs.com/package/@openkfw/design-tokens)
 
 # Customizing KfW Design Tokens for open source
 

package/output/README.md

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

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

@@ -706,7 +706,7 @@
         "$type": "dimension"
       },
       "Heading-6": {
-        "$value": "20px",
+        "$value": "10px",
         "$type": "dimension"
       }
     },

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

@@ -6460,13 +6460,13 @@
         "key": "{semantic.fontspace.heading-6}",
         "$value": {
           "unit": "px",
-          "value": 20
+          "value": 10
         },
         "filePath": "tokens/tokens.json",
         "isSource": true,
         "$type": "dimension",
         "original": {
-          "$value": "{base.space.static.20}",
+          "$value": "{base.space.static.10}",
           "$type": "dimension",
           "key": "{semantic.fontspace.heading-6}"
         },

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

@@ -706,7 +706,7 @@
         "$type": "dimension"
       },
       "Heading-6": {
-        "$value": "20px",
+        "$value": "10px",
         "$type": "dimension"
       }
     },

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

@@ -222,7 +222,7 @@
   --kfw-fontspace-heading-3: 0.625rem;
   --kfw-fontspace-heading-4: 0.625rem;
   --kfw-fontspace-heading-5: 0.625rem;
-  --kfw-fontspace-heading-6: 1.25rem;
+  --kfw-fontspace-heading-6: 0.625rem;
   --kfw-fontsize: 1rem;
   --kfw-fontsize-introduction: 1.25rem;
   --kfw-fontsize-small: 0.875rem;

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

@@ -521,7 +521,7 @@ export const KfwFontspaceHeading2 = "1.25rem";
 export const KfwFontspaceHeading3 = "0.625rem";
 export const KfwFontspaceHeading4 = "0.625rem";
 export const KfwFontspaceHeading5 = "0.625rem";
-export const KfwFontspaceHeading6 = "1.25rem";
+export const KfwFontspaceHeading6 = "0.625rem";
 export const KfwFontsize = "1rem";
 export const KfwFontsizeIntroduction = "1.25rem";
 export const KfwFontsizeSmall = "0.875rem";

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

@@ -218,7 +218,7 @@ $kfw-fontspace-heading-2: 1.25rem;
 $kfw-fontspace-heading-3: 0.625rem;
 $kfw-fontspace-heading-4: 0.625rem;
 $kfw-fontspace-heading-5: 0.625rem;
-$kfw-fontspace-heading-6: 1.25rem;
+$kfw-fontspace-heading-6: 0.625rem;
 $kfw-fontsize: 1rem;
 $kfw-fontsize-introduction: 1.25rem;
 $kfw-fontsize-small: 0.875rem;

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

@@ -222,7 +222,7 @@
   --kfw-fontspace-heading-3: 1rem;
   --kfw-fontspace-heading-4: 1rem;
   --kfw-fontspace-heading-5: 1rem;
-  --kfw-fontspace-heading-6: 2rem;
+  --kfw-fontspace-heading-6: 1rem;
   --kfw-fontsize: 1.6rem;
   --kfw-fontsize-introduction: 2rem;
   --kfw-fontsize-small: 1.4rem;

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

@@ -521,7 +521,7 @@ export const KfwFontspaceHeading2 = "2rem";
 export const KfwFontspaceHeading3 = "1rem";
 export const KfwFontspaceHeading4 = "1rem";
 export const KfwFontspaceHeading5 = "1rem";
-export const KfwFontspaceHeading6 = "2rem";
+export const KfwFontspaceHeading6 = "1rem";
 export const KfwFontsize = "1.6rem";
 export const KfwFontsizeIntroduction = "2rem";
 export const KfwFontsizeSmall = "1.4rem";

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

@@ -218,7 +218,7 @@ $kfw-fontspace-heading-2: 2rem;
 $kfw-fontspace-heading-3: 1rem;
 $kfw-fontspace-heading-4: 1rem;
 $kfw-fontspace-heading-5: 1rem;
-$kfw-fontspace-heading-6: 2rem;
+$kfw-fontspace-heading-6: 1rem;
 $kfw-fontsize: 1.6rem;
 $kfw-fontsize-introduction: 2rem;
 $kfw-fontsize-small: 1.4rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openkfw/design-tokens",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "The source of truth for KfW-branded digital products.",
   "files": [
     "output",
@@ -50,7 +50,7 @@
     "jsoneditor-cli": "^1.1.0",
     "lodash": "4.17.21",
     "prettier": "^3.6.2",
-    "style-dictionary": "^5.0.1",
+    "style-dictionary": "^5.0.2",
     "tsx": "^4.20.4",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.40.0"

package/tokens/gen-tokens.dark.json5

@@ -1313,7 +1313,7 @@
         $value: "{base.space.static.10}",
       },
       "heading-6": {
-        $value: "{base.space.static.20}",
+        $value: "{base.space.static.10}",
       },
     },
     fontsize: {

package/tokens/tokens.json

@@ -370,7 +370,7 @@
       "heading-3": { "$value": "{base.space.static.10}" },
       "heading-4": { "$value": "{base.space.static.10}" },
       "heading-5": { "$value": "{base.space.static.10}" },
-      "heading-6": { "$value": "{base.space.static.20}" }
+      "heading-6": { "$value": "{base.space.static.10}" }
     },
     "fontsize": {
       "$type": "dimension",