@openkfw/design-tokens 0.4.3 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +1 -1
  2. package/output/README.md +21 -7
  3. package/output/{web_stable_10px/css → css}/kfw-design-tokens.light.css +3 -4
  4. package/output/figma/kfw-design-tokens.light.json +5 -1
  5. package/output/{web_stable_10px/js → js}/kfw-design-tokens.light.d.ts +3 -4
  6. package/output/{web_stable_10px/js → js}/kfw-design-tokens.light.js +3 -4
  7. package/output/json/kfw-design-tokens.light.json +27 -5
  8. package/output/penpot/kfw-design-tokens.light.json +5 -1
  9. package/output/{web_stable_10px/scss → scss}/kfw-design-tokens.light.scss +3 -4
  10. package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css +3 -4
  11. package/output/web_thirdparty_16px/js/kfw-design-tokens.light.d.ts +3 -4
  12. package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js +3 -4
  13. package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss +3 -4
  14. package/package.json +4 -4
  15. package/tokens/gen-tokens.dark.json5 +4 -1
  16. package/tokens/tokens.json +3 -2
package/README.md CHANGED
@@ -28,7 +28,7 @@ npm i -D @openkfw/design-tokens
28
28
  Import or use files inside the `output` folder, e.g.:
29
29
 
30
30
  ```css
31
- @import url("@openkfw/design-tokens/output/web_stable_10px/css/kfw-design-tokens.light.css");
31
+ @import url("@openkfw/design-tokens/output/css/kfw-design-tokens.light.css");
32
32
  ```
33
33
 
34
34
  ## ❤️ Contributing
package/output/README.md CHANGED
@@ -9,16 +9,30 @@ This document outlines the structure of the /output directory and its contents.
9
9
  ├── /figma
10
10
  ├── /penpot
11
11
  ├── /json
12
- ├── /web_stable_10px (default)
13
- └── /web_next_16px (third-party)
12
+ ├── /css
13
+ ├── /js
14
+ ├── /scss
15
+ └── /web_thirdparty_16px (third-party)
14
16
  ```
15
17
 
16
- In the `/output` directory, you will find all available output formats for Figma, Penpot, JSON, and Web (CSS, SCSS, JS).
18
+ The `/output` directory contains all available export formats for design and development integration, including Figma, Penpot, JSON, CSS, SCSS, and JavaScript files.
17
19
 
18
- ## Web Folder Usage
19
20
 
20
- - `/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.
21
+ # 🧭 REM and Font Scaling Guidelines
21
22
 
22
- - `/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%)
23
+ All KfW web applications (e.g., KfW.de, MeineKfW, OKP) use a root REM value of 62.5% to ensure optimal readability and consistent scaling.
24
+ This means that 1rem is equivalent to 10px. Never use a font size of 10px directly. Always rely on rem units for scalable and accessible typography.
23
25
 
24
- Note: A font size of 10px should never be used. Therefore, it is advisable to set the font size in the `<html>` to `62.5%` and `<body>` to `1.6rem` (16px).
26
+ Example:
27
+
28
+ ```
29
+ html {
30
+ font-size: 62.5%; /* 1rem = 10px */
31
+ }
32
+
33
+ body {
34
+ font-size: 1.6rem; /* 16px */
35
+ }
36
+ ```
37
+
38
+ For third-party systems where the REM root value cannot be modified (i.e., the default browser setting of 16px = 100%), use the assets provided in the `/web_thirdparty_16px` folder.
package/output/{web_stable_10px/css → css}/kfw-design-tokens.light.css RENAMED
@@ -1,7 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.4.3
3
- * Copyright 2025
4
- * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
2
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  :root, :host, .kfw-theme--light { color-scheme: light; }
@@ -120,7 +118,7 @@
120
118
  --kfw-base-borderradius-sm: 2px;
121
119
  --kfw-base-borderradius-md: 0.4rem;
122
120
  --kfw-base-borderradius-lg: 2rem;
123
- --kfw-base-borderradius-full: 999.9rem;
121
+ --kfw-base-borderradius-circle: 999.9rem;
124
122
  --kfw-base-borderwidth-none: 0;
125
123
  --kfw-base-borderwidth-md: 1px;
126
124
  --kfw-base-borderwidth-lg: 2px;
@@ -248,6 +246,7 @@
248
246
  --kfw-borderradius: 0.4rem;
249
247
  --kfw-borderradius-large: 2rem;
250
248
  --kfw-borderradius-small: 2px;
249
+ --kfw-borderradius-circle: 999.9rem;
251
250
  --kfw-borderwidth: 1px;
252
251
  --kfw-borderwidth-large: 2px;
253
252
  --kfw-focusring-outline-width: 2px;
package/output/figma/kfw-design-tokens.light.json CHANGED
@@ -263,7 +263,7 @@
263
263
  "$value": "20px",
264
264
  "$type": "borderRadius"
265
265
  },
266
- "Full": {
266
+ "Circle": {
267
267
  "$value": "9999px",
268
268
  "$type": "borderRadius"
269
269
  }
@@ -690,6 +690,10 @@
690
690
  "Small": {
691
691
  "$value": "2px",
692
692
  "$type": "borderRadius"
693
+ },
694
+ "Circle": {
695
+ "$value": "9999px",
696
+ "$type": "borderRadius"
693
697
  }
694
698
  },
695
699
  "Borderwidth": {
package/output/{web_stable_10px/js → js}/kfw-design-tokens.light.d.ts RENAMED
@@ -1,7 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.4.3
3
- * Copyright 2025
4
- * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
2
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  export const KfwBaseColorBlue100: {
@@ -234,7 +232,7 @@ export const KfwBaseLineheightLg: number;
234
232
  export const KfwBaseBorderradiusSm: string;
235
233
  export const KfwBaseBorderradiusMd: string;
236
234
  export const KfwBaseBorderradiusLg: string;
237
- export const KfwBaseBorderradiusFull: string;
235
+ export const KfwBaseBorderradiusCircle: string;
238
236
  export const KfwBaseBorderwidthNone: string;
239
237
  export const KfwBaseBorderwidthMd: string;
240
238
  export const KfwBaseBorderwidthLg: string;
@@ -542,6 +540,7 @@ export const KfwLineheightHeading5: number;
542
540
  export const KfwBorderradius: string;
543
541
  export const KfwBorderradiusLarge: string;
544
542
  export const KfwBorderradiusSmall: string;
543
+ export const KfwBorderradiusCircle: string;
545
544
  export const KfwBorderwidth: string;
546
545
  export const KfwBorderwidthLarge: string;
547
546
  export const KfwFocusringOutlineWidth: string;
package/output/{web_stable_10px/js → js}/kfw-design-tokens.light.js RENAMED
@@ -1,7 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.4.3
3
- * Copyright 2025
4
- * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
2
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  export const KfwBaseColorBlue100 = {
@@ -236,7 +234,7 @@ export const KfwBaseLineheightLg = 1.5;
236
234
  export const KfwBaseBorderradiusSm = "2px";
237
235
  export const KfwBaseBorderradiusMd = "0.4rem";
238
236
  export const KfwBaseBorderradiusLg = "2rem";
239
- export const KfwBaseBorderradiusFull = "999.9rem";
237
+ export const KfwBaseBorderradiusCircle = "999.9rem";
240
238
  export const KfwBaseBorderwidthNone = "0";
241
239
  export const KfwBaseBorderwidthMd = "1px";
242
240
  export const KfwBaseBorderwidthLg = "2px";
@@ -543,6 +541,7 @@ export const KfwLineheightHeading5 = 1.333;
543
541
  export const KfwBorderradius = "0.4rem";
544
542
  export const KfwBorderradiusLarge = "2rem";
545
543
  export const KfwBorderradiusSmall = "2px";
544
+ export const KfwBorderradiusCircle = "999.9rem";
546
545
  export const KfwBorderwidth = "1px";
547
546
  export const KfwBorderwidthLarge = "2px";
548
547
  export const KfwFocusringOutlineWidth = "2px";
package/output/json/kfw-design-tokens.light.json CHANGED
@@ -3511,8 +3511,8 @@
3511
3511
  "lg"
3512
3512
  ]
3513
3513
  },
3514
- "full": {
3515
- "key": "{base.borderradius.full}",
3514
+ "circle": {
3515
+ "key": "{base.borderradius.circle}",
3516
3516
  "$value": {
3517
3517
  "unit": "px",
3518
3518
  "value": 9999
@@ -3526,14 +3526,14 @@
3526
3526
  "value": 9999
3527
3527
  },
3528
3528
  "$type": "dimension",
3529
- "key": "{base.borderradius.full}"
3529
+ "key": "{base.borderradius.circle}"
3530
3530
  },
3531
- "name": "full",
3531
+ "name": "circle",
3532
3532
  "attributes": {},
3533
3533
  "path": [
3534
3534
  "base",
3535
3535
  "borderradius",
3536
- "full"
3536
+ "circle"
3537
3537
  ]
3538
3538
  }
3539
3539
  },
@@ -7054,6 +7054,28 @@
7054
7054
  "borderradius",
7055
7055
  "small"
7056
7056
  ]
7057
+ },
7058
+ "circle": {
7059
+ "key": "{semantic.borderradius.circle}",
7060
+ "$value": {
7061
+ "unit": "px",
7062
+ "value": 9999
7063
+ },
7064
+ "filePath": "tokens/tokens.json",
7065
+ "isSource": true,
7066
+ "$type": "dimension",
7067
+ "original": {
7068
+ "$value": "{base.borderradius.circle}",
7069
+ "$type": "dimension",
7070
+ "key": "{semantic.borderradius.circle}"
7071
+ },
7072
+ "name": "circle",
7073
+ "attributes": {},
7074
+ "path": [
7075
+ "semantic",
7076
+ "borderradius",
7077
+ "circle"
7078
+ ]
7057
7079
  }
7058
7080
  },
7059
7081
  "borderwidth": {
package/output/penpot/kfw-design-tokens.light.json CHANGED
@@ -263,7 +263,7 @@
263
263
  "$value": "20px",
264
264
  "$type": "borderRadius"
265
265
  },
266
- "Full": {
266
+ "Circle": {
267
267
  "$value": "9999px",
268
268
  "$type": "borderRadius"
269
269
  }
@@ -690,6 +690,10 @@
690
690
  "Small": {
691
691
  "$value": "2px",
692
692
  "$type": "borderRadius"
693
+ },
694
+ "Circle": {
695
+ "$value": "9999px",
696
+ "$type": "borderRadius"
693
697
  }
694
698
  },
695
699
  "Borderwidth": {
package/output/{web_stable_10px/scss → scss}/kfw-design-tokens.light.scss RENAMED
@@ -1,7 +1,5 @@
1
1
 
2
- // KfW Design Tokens v0.4.3
3
- // Copyright 2025
4
- // Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
2
+ // KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
 
6
4
  $kfw-base-color-blue-100: #e9f5fb;
7
5
  $kfw-base-color-blue-400: #54b3e2;
@@ -116,7 +114,7 @@ $kfw-base-lineheight-lg: 1.5;
116
114
  $kfw-base-borderradius-sm: 2px;
117
115
  $kfw-base-borderradius-md: 0.4rem;
118
116
  $kfw-base-borderradius-lg: 2rem;
119
- $kfw-base-borderradius-full: 999.9rem;
117
+ $kfw-base-borderradius-circle: 999.9rem;
120
118
  $kfw-base-borderwidth-none: 0;
121
119
  $kfw-base-borderwidth-md: 1px;
122
120
  $kfw-base-borderwidth-lg: 2px;
@@ -244,6 +242,7 @@ $kfw-lineheight-heading-5: 1.333;
244
242
  $kfw-borderradius: 0.4rem;
245
243
  $kfw-borderradius-large: 2rem;
246
244
  $kfw-borderradius-small: 2px;
245
+ $kfw-borderradius-circle: 999.9rem;
247
246
  $kfw-borderwidth: 1px;
248
247
  $kfw-borderwidth-large: 2px;
249
248
  $kfw-focusring-outline-width: 2px;
package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css CHANGED
@@ -1,7 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.4.3
3
- * Copyright 2025
4
- * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
2
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  :root, :host, .kfw-theme--light { color-scheme: light; }
@@ -120,7 +118,7 @@
120
118
  --kfw-base-borderradius-sm: 2px;
121
119
  --kfw-base-borderradius-md: 0.25rem;
122
120
  --kfw-base-borderradius-lg: 1.25rem;
123
- --kfw-base-borderradius-full: 624.9375rem;
121
+ --kfw-base-borderradius-circle: 624.9375rem;
124
122
  --kfw-base-borderwidth-none: 0;
125
123
  --kfw-base-borderwidth-md: 1px;
126
124
  --kfw-base-borderwidth-lg: 2px;
@@ -248,6 +246,7 @@
248
246
  --kfw-borderradius: 0.25rem;
249
247
  --kfw-borderradius-large: 1.25rem;
250
248
  --kfw-borderradius-small: 2px;
249
+ --kfw-borderradius-circle: 624.9375rem;
251
250
  --kfw-borderwidth: 1px;
252
251
  --kfw-borderwidth-large: 2px;
253
252
  --kfw-focusring-outline-width: 2px;
package/output/web_thirdparty_16px/js/kfw-design-tokens.light.d.ts CHANGED
@@ -1,7 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.4.3
3
- * Copyright 2025
4
- * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
2
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  export const KfwBaseColorBlue100: {
@@ -234,7 +232,7 @@ export const KfwBaseLineheightLg: number;
234
232
  export const KfwBaseBorderradiusSm: string;
235
233
  export const KfwBaseBorderradiusMd: string;
236
234
  export const KfwBaseBorderradiusLg: string;
237
- export const KfwBaseBorderradiusFull: string;
235
+ export const KfwBaseBorderradiusCircle: string;
238
236
  export const KfwBaseBorderwidthNone: string;
239
237
  export const KfwBaseBorderwidthMd: string;
240
238
  export const KfwBaseBorderwidthLg: string;
@@ -542,6 +540,7 @@ export const KfwLineheightHeading5: number;
542
540
  export const KfwBorderradius: string;
543
541
  export const KfwBorderradiusLarge: string;
544
542
  export const KfwBorderradiusSmall: string;
543
+ export const KfwBorderradiusCircle: string;
545
544
  export const KfwBorderwidth: string;
546
545
  export const KfwBorderwidthLarge: string;
547
546
  export const KfwFocusringOutlineWidth: string;
package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js CHANGED
@@ -1,7 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.4.3
3
- * Copyright 2025
4
- * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
2
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  export const KfwBaseColorBlue100 = {
@@ -236,7 +234,7 @@ export const KfwBaseLineheightLg = 1.5;
236
234
  export const KfwBaseBorderradiusSm = "2px";
237
235
  export const KfwBaseBorderradiusMd = "0.25rem";
238
236
  export const KfwBaseBorderradiusLg = "1.25rem";
239
- export const KfwBaseBorderradiusFull = "624.9375rem";
237
+ export const KfwBaseBorderradiusCircle = "624.9375rem";
240
238
  export const KfwBaseBorderwidthNone = "0";
241
239
  export const KfwBaseBorderwidthMd = "1px";
242
240
  export const KfwBaseBorderwidthLg = "2px";
@@ -543,6 +541,7 @@ export const KfwLineheightHeading5 = 1.333;
543
541
  export const KfwBorderradius = "0.25rem";
544
542
  export const KfwBorderradiusLarge = "1.25rem";
545
543
  export const KfwBorderradiusSmall = "2px";
544
+ export const KfwBorderradiusCircle = "624.9375rem";
546
545
  export const KfwBorderwidth = "1px";
547
546
  export const KfwBorderwidthLarge = "2px";
548
547
  export const KfwFocusringOutlineWidth = "2px";
package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss CHANGED
@@ -1,7 +1,5 @@
1
1
 
2
- // KfW Design Tokens v0.4.3
3
- // Copyright 2025
4
- // Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
2
+ // KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
 
6
4
  $kfw-base-color-blue-100: #e9f5fb;
7
5
  $kfw-base-color-blue-400: #54b3e2;
@@ -116,7 +114,7 @@ $kfw-base-lineheight-lg: 1.5;
116
114
  $kfw-base-borderradius-sm: 2px;
117
115
  $kfw-base-borderradius-md: 0.25rem;
118
116
  $kfw-base-borderradius-lg: 1.25rem;
119
- $kfw-base-borderradius-full: 624.9375rem;
117
+ $kfw-base-borderradius-circle: 624.9375rem;
120
118
  $kfw-base-borderwidth-none: 0;
121
119
  $kfw-base-borderwidth-md: 1px;
122
120
  $kfw-base-borderwidth-lg: 2px;
@@ -244,6 +242,7 @@ $kfw-lineheight-heading-5: 1.333;
244
242
  $kfw-borderradius: 0.25rem;
245
243
  $kfw-borderradius-large: 1.25rem;
246
244
  $kfw-borderradius-small: 2px;
245
+ $kfw-borderradius-circle: 624.9375rem;
247
246
  $kfw-borderwidth: 1px;
248
247
  $kfw-borderwidth-large: 2px;
249
248
  $kfw-focusring-outline-width: 2px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openkfw/design-tokens",
3
- "version": "0.4.3",
3
+ "version": "0.5.1",
4
4
  "description": "The source of truth for KfW-branded digital products.",
5
5
  "files": [
6
6
  "output",
@@ -38,7 +38,7 @@
38
38
  "@eslint/js": "^9.37.0",
39
39
  "@tsconfig/node22": "^22.0.2",
40
40
  "@types/lodash": "^4.17.20",
41
- "@types/node": "^22.18.8",
41
+ "@types/node": "^22",
42
42
  "concurrently": "^9.2.1",
43
43
  "deep-get-set-ts": "^1.1.2",
44
44
  "eslint": "^9.37.0",
@@ -46,10 +46,10 @@
46
46
  "jsoneditor-cli": "^1.1.0",
47
47
  "lodash": "4.17.21",
48
48
  "prettier": "^3.6.2",
49
- "style-dictionary": "^5.1.0",
49
+ "style-dictionary": "^5.1.1",
50
50
  "tsx": "^4.20.6",
51
51
  "typescript": "^5.9.3",
52
- "typescript-eslint": "^8.45.0",
52
+ "typescript-eslint": "^8.46.0",
53
53
  "npm-check-updates": "^19.0.0"
54
54
  }
55
55
  }
package/tokens/gen-tokens.dark.json5 CHANGED
@@ -852,7 +852,7 @@
852
852
  value: 20,
853
853
  },
854
854
  },
855
- full: {
855
+ circle: {
856
856
  $value: {
857
857
  unit: "px",
858
858
  value: 9999,
@@ -1410,6 +1410,9 @@
1410
1410
  small: {
1411
1411
  $value: "{base.borderradius.sm}",
1412
1412
  },
1413
+ circle: {
1414
+ $value: "{base.borderradius.circle}",
1415
+ },
1413
1416
  },
1414
1417
  borderwidth: {
1415
1418
  $type: "dimension",
package/tokens/tokens.json CHANGED
@@ -193,7 +193,7 @@
193
193
  "sm": { "$value": { "unit": "px", "value": 2 } },
194
194
  "md": { "$value": { "unit": "px", "value": 4 } },
195
195
  "lg": { "$value": { "unit": "px", "value": 20 } },
196
- "full": { "$value": { "unit": "px", "value": 9999 } }
196
+ "circle": { "$value": { "unit": "px", "value": 9999 } }
197
197
  },
198
198
  "borderwidth": {
199
199
  "$type": "dimension",
@@ -412,7 +412,8 @@
412
412
  "$type": "dimension",
413
413
  "default": { "$value": "{base.borderradius.md}" },
414
414
  "large": { "$value": "{base.borderradius.lg}" },
415
- "small": { "$value": "{base.borderradius.sm}" }
415
+ "small": { "$value": "{base.borderradius.sm}" },
416
+ "circle": { "$value": "{base.borderradius.circle}" }
416
417
  },
417
418
  "borderwidth": {
418
419
  "$type": "dimension",