@openkfw/design-tokens 0.4.2 → 0.5.0

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 (15) hide show
  1. package/output/README.md +21 -7
  2. package/output/{web_stable_10px/css → css}/kfw-design-tokens.light.css +4 -4
  3. package/output/figma/kfw-design-tokens.light.json +16 -6
  4. package/output/{web_stable_10px/js → js}/kfw-design-tokens.light.d.ts +4 -4
  5. package/output/{web_stable_10px/js → js}/kfw-design-tokens.light.js +4 -4
  6. package/output/json/kfw-design-tokens.light.json +77 -30
  7. package/output/penpot/kfw-design-tokens.light.json +16 -6
  8. package/output/{web_stable_10px/scss → scss}/kfw-design-tokens.light.scss +4 -4
  9. package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css +4 -4
  10. package/output/web_thirdparty_16px/js/kfw-design-tokens.light.d.ts +4 -4
  11. package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js +4 -4
  12. package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss +4 -4
  13. package/package.json +4 -4
  14. package/tokens/gen-tokens.dark.json5 +12 -4
  15. package/tokens/tokens.json +4 -2
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.1
3
- * Copyright 2025
4
- * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
2
+ * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  :root, :host, .kfw-theme--light { color-scheme: light; }
@@ -225,8 +223,8 @@
225
223
  --kfw-fontspace-heading-6: 1rem;
226
224
  --kfw-fontsize: 1.6rem;
227
225
  --kfw-fontsize-introduction: 2rem;
228
- --kfw-fontsize-small: 1.4rem;
229
226
  --kfw-fontsize-large: 1.8rem;
227
+ --kfw-fontsize-small: 1.4rem;
230
228
  --kfw-fontsize-heading-1-min: 3rem;
231
229
  --kfw-fontsize-heading-1-max: 3.6rem;
232
230
  --kfw-fontsize-heading-1-val: 0.882vi + 2.4706rem;
@@ -246,6 +244,8 @@
246
244
  --kfw-lineheight-heading: 1.3;
247
245
  --kfw-lineheight-heading-5: 1.333;
248
246
  --kfw-borderradius: 0.4rem;
247
+ --kfw-borderradius-large: 2rem;
248
+ --kfw-borderradius-small: 2px;
249
249
  --kfw-borderwidth: 1px;
250
250
  --kfw-borderwidth-large: 2px;
251
251
  --kfw-focusring-outline-width: 2px;
package/output/figma/kfw-design-tokens.light.json CHANGED
@@ -603,14 +603,14 @@
603
603
  "$value": "20px",
604
604
  "$type": "fontSizes"
605
605
  },
606
- "Small": {
607
- "$value": "14px",
608
- "$type": "fontSizes"
609
- },
610
606
  "Large": {
611
607
  "$value": "18px",
612
608
  "$type": "fontSizes"
613
609
  },
610
+ "Small": {
611
+ "$value": "14px",
612
+ "$type": "fontSizes"
613
+ },
614
614
  "Heading-1": {
615
615
  "Mobile": {
616
616
  "$value": "30px",
@@ -679,8 +679,18 @@
679
679
  }
680
680
  },
681
681
  "Borderradius": {
682
- "$value": "4px",
683
- "$type": "borderRadius"
682
+ "Default": {
683
+ "$value": "4px",
684
+ "$type": "borderRadius"
685
+ },
686
+ "Large": {
687
+ "$value": "20px",
688
+ "$type": "borderRadius"
689
+ },
690
+ "Small": {
691
+ "$value": "2px",
692
+ "$type": "borderRadius"
693
+ }
684
694
  },
685
695
  "Borderwidth": {
686
696
  "Default": {
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.1
3
- * Copyright 2025
4
- * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
2
+ * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  export const KfwBaseColorBlue100: {
@@ -519,8 +517,8 @@ export const KfwFontspaceHeading5: string;
519
517
  export const KfwFontspaceHeading6: string;
520
518
  export const KfwFontsize: string;
521
519
  export const KfwFontsizeIntroduction: string;
522
- export const KfwFontsizeSmall: string;
523
520
  export const KfwFontsizeLarge: string;
521
+ export const KfwFontsizeSmall: string;
524
522
  export const KfwFontsizeHeading1Min: string;
525
523
  export const KfwFontsizeHeading1Max: string;
526
524
  export const KfwFontsizeHeading1Val: string;
@@ -540,6 +538,8 @@ export const KfwLineheightList: number;
540
538
  export const KfwLineheightHeading: number;
541
539
  export const KfwLineheightHeading5: number;
542
540
  export const KfwBorderradius: string;
541
+ export const KfwBorderradiusLarge: string;
542
+ export const KfwBorderradiusSmall: string;
543
543
  export const KfwBorderwidth: string;
544
544
  export const KfwBorderwidthLarge: string;
545
545
  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.1
3
- * Copyright 2025
4
- * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
2
+ * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  export const KfwBaseColorBlue100 = {
@@ -520,8 +518,8 @@ export const KfwFontspaceHeading5 = "1rem";
520
518
  export const KfwFontspaceHeading6 = "1rem";
521
519
  export const KfwFontsize = "1.6rem";
522
520
  export const KfwFontsizeIntroduction = "2rem";
523
- export const KfwFontsizeSmall = "1.4rem";
524
521
  export const KfwFontsizeLarge = "1.8rem";
522
+ export const KfwFontsizeSmall = "1.4rem";
525
523
  export const KfwFontsizeHeading1Min = "3rem";
526
524
  export const KfwFontsizeHeading1Max = "3.6rem";
527
525
  export const KfwFontsizeHeading1Val = "2.4706rem";
@@ -541,6 +539,8 @@ export const KfwLineheightList = 1.5;
541
539
  export const KfwLineheightHeading = 1.3;
542
540
  export const KfwLineheightHeading5 = 1.333;
543
541
  export const KfwBorderradius = "0.4rem";
542
+ export const KfwBorderradiusLarge = "2rem";
543
+ export const KfwBorderradiusSmall = "2px";
544
544
  export const KfwBorderwidth = "1px";
545
545
  export const KfwBorderwidthLarge = "2px";
546
546
  export const KfwFocusringOutlineWidth = "2px";
package/output/json/kfw-design-tokens.light.json CHANGED
@@ -6521,48 +6521,48 @@
6521
6521
  "introduction"
6522
6522
  ]
6523
6523
  },
6524
- "small": {
6525
- "key": "{semantic.fontsize.small}",
6524
+ "large": {
6525
+ "key": "{semantic.fontsize.large}",
6526
6526
  "$value": {
6527
6527
  "unit": "px",
6528
- "value": 14
6528
+ "value": 18
6529
6529
  },
6530
6530
  "filePath": "tokens/tokens.json",
6531
6531
  "isSource": true,
6532
6532
  "$type": "dimension",
6533
6533
  "original": {
6534
- "$value": "{base.fontsize.static.sm}",
6534
+ "$value": "{base.fontsize.static.lg}",
6535
6535
  "$type": "dimension",
6536
- "key": "{semantic.fontsize.small}"
6536
+ "key": "{semantic.fontsize.large}"
6537
6537
  },
6538
- "name": "small",
6538
+ "name": "large",
6539
6539
  "attributes": {},
6540
6540
  "path": [
6541
6541
  "semantic",
6542
6542
  "fontsize",
6543
- "small"
6543
+ "large"
6544
6544
  ]
6545
6545
  },
6546
- "large": {
6547
- "key": "{semantic.fontsize.large}",
6546
+ "small": {
6547
+ "key": "{semantic.fontsize.small}",
6548
6548
  "$value": {
6549
6549
  "unit": "px",
6550
- "value": 18
6550
+ "value": 14
6551
6551
  },
6552
6552
  "filePath": "tokens/tokens.json",
6553
6553
  "isSource": true,
6554
6554
  "$type": "dimension",
6555
6555
  "original": {
6556
- "$value": "{base.fontsize.static.lg}",
6556
+ "$value": "{base.fontsize.static.sm}",
6557
6557
  "$type": "dimension",
6558
- "key": "{semantic.fontsize.large}"
6558
+ "key": "{semantic.fontsize.small}"
6559
6559
  },
6560
- "name": "large",
6560
+ "name": "small",
6561
6561
  "attributes": {},
6562
6562
  "path": [
6563
6563
  "semantic",
6564
6564
  "fontsize",
6565
- "large"
6565
+ "small"
6566
6566
  ]
6567
6567
  },
6568
6568
  "heading-1": {
@@ -6989,25 +6989,72 @@
6989
6989
  }
6990
6990
  },
6991
6991
  "borderradius": {
6992
- "key": "{semantic.borderradius}",
6993
- "$type": "dimension",
6994
- "$value": {
6995
- "unit": "px",
6996
- "value": 4
6992
+ "default": {
6993
+ "key": "{semantic.borderradius.default}",
6994
+ "$value": {
6995
+ "unit": "px",
6996
+ "value": 4
6997
+ },
6998
+ "filePath": "tokens/tokens.json",
6999
+ "isSource": true,
7000
+ "$type": "dimension",
7001
+ "original": {
7002
+ "$value": "{base.borderradius.md}",
7003
+ "$type": "dimension",
7004
+ "key": "{semantic.borderradius.default}"
7005
+ },
7006
+ "name": "default",
7007
+ "attributes": {},
7008
+ "path": [
7009
+ "semantic",
7010
+ "borderradius",
7011
+ "default"
7012
+ ]
6997
7013
  },
6998
- "filePath": "tokens/tokens.json",
6999
- "isSource": true,
7000
- "original": {
7014
+ "large": {
7015
+ "key": "{semantic.borderradius.large}",
7016
+ "$value": {
7017
+ "unit": "px",
7018
+ "value": 20
7019
+ },
7020
+ "filePath": "tokens/tokens.json",
7021
+ "isSource": true,
7001
7022
  "$type": "dimension",
7002
- "$value": "{base.borderradius.md}",
7003
- "key": "{semantic.borderradius}"
7023
+ "original": {
7024
+ "$value": "{base.borderradius.lg}",
7025
+ "$type": "dimension",
7026
+ "key": "{semantic.borderradius.large}"
7027
+ },
7028
+ "name": "large",
7029
+ "attributes": {},
7030
+ "path": [
7031
+ "semantic",
7032
+ "borderradius",
7033
+ "large"
7034
+ ]
7004
7035
  },
7005
- "name": "borderradius",
7006
- "attributes": {},
7007
- "path": [
7008
- "semantic",
7009
- "borderradius"
7010
- ]
7036
+ "small": {
7037
+ "key": "{semantic.borderradius.small}",
7038
+ "$value": {
7039
+ "unit": "px",
7040
+ "value": 2
7041
+ },
7042
+ "filePath": "tokens/tokens.json",
7043
+ "isSource": true,
7044
+ "$type": "dimension",
7045
+ "original": {
7046
+ "$value": "{base.borderradius.sm}",
7047
+ "$type": "dimension",
7048
+ "key": "{semantic.borderradius.small}"
7049
+ },
7050
+ "name": "small",
7051
+ "attributes": {},
7052
+ "path": [
7053
+ "semantic",
7054
+ "borderradius",
7055
+ "small"
7056
+ ]
7057
+ }
7011
7058
  },
7012
7059
  "borderwidth": {
7013
7060
  "default": {
package/output/penpot/kfw-design-tokens.light.json CHANGED
@@ -603,14 +603,14 @@
603
603
  "$value": "20px",
604
604
  "$type": "fontSizes"
605
605
  },
606
- "Small": {
607
- "$value": "14px",
608
- "$type": "fontSizes"
609
- },
610
606
  "Large": {
611
607
  "$value": "18px",
612
608
  "$type": "fontSizes"
613
609
  },
610
+ "Small": {
611
+ "$value": "14px",
612
+ "$type": "fontSizes"
613
+ },
614
614
  "Heading-1": {
615
615
  "Mobile": {
616
616
  "$value": "30px",
@@ -679,8 +679,18 @@
679
679
  }
680
680
  },
681
681
  "Borderradius": {
682
- "$value": "4px",
683
- "$type": "borderRadius"
682
+ "Default": {
683
+ "$value": "4px",
684
+ "$type": "borderRadius"
685
+ },
686
+ "Large": {
687
+ "$value": "20px",
688
+ "$type": "borderRadius"
689
+ },
690
+ "Small": {
691
+ "$value": "2px",
692
+ "$type": "borderRadius"
693
+ }
684
694
  },
685
695
  "Borderwidth": {
686
696
  "Default": {
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.1
3
- // Copyright 2025
4
- // Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
2
+ // KfW Design Tokens v0.5.0 | 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;
@@ -221,8 +219,8 @@ $kfw-fontspace-heading-5: 1rem;
221
219
  $kfw-fontspace-heading-6: 1rem;
222
220
  $kfw-fontsize: 1.6rem;
223
221
  $kfw-fontsize-introduction: 2rem;
224
- $kfw-fontsize-small: 1.4rem;
225
222
  $kfw-fontsize-large: 1.8rem;
223
+ $kfw-fontsize-small: 1.4rem;
226
224
  $kfw-fontsize-heading-1-min: 3rem;
227
225
  $kfw-fontsize-heading-1-max: 3.6rem;
228
226
  $kfw-fontsize-heading-1-val: 0.882vi + 2.4706rem;
@@ -242,6 +240,8 @@ $kfw-lineheight-list: 1.5;
242
240
  $kfw-lineheight-heading: 1.3;
243
241
  $kfw-lineheight-heading-5: 1.333;
244
242
  $kfw-borderradius: 0.4rem;
243
+ $kfw-borderradius-large: 2rem;
244
+ $kfw-borderradius-small: 2px;
245
245
  $kfw-borderwidth: 1px;
246
246
  $kfw-borderwidth-large: 2px;
247
247
  $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.1
3
- * Copyright 2025
4
- * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
2
+ * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  :root, :host, .kfw-theme--light { color-scheme: light; }
@@ -225,8 +223,8 @@
225
223
  --kfw-fontspace-heading-6: 0.625rem;
226
224
  --kfw-fontsize: 1rem;
227
225
  --kfw-fontsize-introduction: 1.25rem;
228
- --kfw-fontsize-small: 0.875rem;
229
226
  --kfw-fontsize-large: 1.125rem;
227
+ --kfw-fontsize-small: 0.875rem;
230
228
  --kfw-fontsize-heading-1-min: 1.875rem;
231
229
  --kfw-fontsize-heading-1-max: 2.25rem;
232
230
  --kfw-fontsize-heading-1-val: 0.882vi + 1.544125rem;
@@ -246,6 +244,8 @@
246
244
  --kfw-lineheight-heading: 1.3;
247
245
  --kfw-lineheight-heading-5: 1.333;
248
246
  --kfw-borderradius: 0.25rem;
247
+ --kfw-borderradius-large: 1.25rem;
248
+ --kfw-borderradius-small: 2px;
249
249
  --kfw-borderwidth: 1px;
250
250
  --kfw-borderwidth-large: 2px;
251
251
  --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.1
3
- * Copyright 2025
4
- * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
2
+ * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  export const KfwBaseColorBlue100: {
@@ -519,8 +517,8 @@ export const KfwFontspaceHeading5: string;
519
517
  export const KfwFontspaceHeading6: string;
520
518
  export const KfwFontsize: string;
521
519
  export const KfwFontsizeIntroduction: string;
522
- export const KfwFontsizeSmall: string;
523
520
  export const KfwFontsizeLarge: string;
521
+ export const KfwFontsizeSmall: string;
524
522
  export const KfwFontsizeHeading1Min: string;
525
523
  export const KfwFontsizeHeading1Max: string;
526
524
  export const KfwFontsizeHeading1Val: string;
@@ -540,6 +538,8 @@ export const KfwLineheightList: number;
540
538
  export const KfwLineheightHeading: number;
541
539
  export const KfwLineheightHeading5: number;
542
540
  export const KfwBorderradius: string;
541
+ export const KfwBorderradiusLarge: string;
542
+ export const KfwBorderradiusSmall: string;
543
543
  export const KfwBorderwidth: string;
544
544
  export const KfwBorderwidthLarge: string;
545
545
  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.1
3
- * Copyright 2025
4
- * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
2
+ * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  export const KfwBaseColorBlue100 = {
@@ -520,8 +518,8 @@ export const KfwFontspaceHeading5 = "0.625rem";
520
518
  export const KfwFontspaceHeading6 = "0.625rem";
521
519
  export const KfwFontsize = "1rem";
522
520
  export const KfwFontsizeIntroduction = "1.25rem";
523
- export const KfwFontsizeSmall = "0.875rem";
524
521
  export const KfwFontsizeLarge = "1.125rem";
522
+ export const KfwFontsizeSmall = "0.875rem";
525
523
  export const KfwFontsizeHeading1Min = "1.875rem";
526
524
  export const KfwFontsizeHeading1Max = "2.25rem";
527
525
  export const KfwFontsizeHeading1Val = "1.544125rem";
@@ -541,6 +539,8 @@ export const KfwLineheightList = 1.5;
541
539
  export const KfwLineheightHeading = 1.3;
542
540
  export const KfwLineheightHeading5 = 1.333;
543
541
  export const KfwBorderradius = "0.25rem";
542
+ export const KfwBorderradiusLarge = "1.25rem";
543
+ export const KfwBorderradiusSmall = "2px";
544
544
  export const KfwBorderwidth = "1px";
545
545
  export const KfwBorderwidthLarge = "2px";
546
546
  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.1
3
- // Copyright 2025
4
- // Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
2
+ // KfW Design Tokens v0.5.0 | 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;
@@ -221,8 +219,8 @@ $kfw-fontspace-heading-5: 0.625rem;
221
219
  $kfw-fontspace-heading-6: 0.625rem;
222
220
  $kfw-fontsize: 1rem;
223
221
  $kfw-fontsize-introduction: 1.25rem;
224
- $kfw-fontsize-small: 0.875rem;
225
222
  $kfw-fontsize-large: 1.125rem;
223
+ $kfw-fontsize-small: 0.875rem;
226
224
  $kfw-fontsize-heading-1-min: 1.875rem;
227
225
  $kfw-fontsize-heading-1-max: 2.25rem;
228
226
  $kfw-fontsize-heading-1-val: 0.882vi + 1.544125rem;
@@ -242,6 +240,8 @@ $kfw-lineheight-list: 1.5;
242
240
  $kfw-lineheight-heading: 1.3;
243
241
  $kfw-lineheight-heading-5: 1.333;
244
242
  $kfw-borderradius: 0.25rem;
243
+ $kfw-borderradius-large: 1.25rem;
244
+ $kfw-borderradius-small: 2px;
245
245
  $kfw-borderwidth: 1px;
246
246
  $kfw-borderwidth-large: 2px;
247
247
  $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.2",
3
+ "version": "0.5.0",
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": "^24.7.1",
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
@@ -1327,12 +1327,12 @@
1327
1327
  introduction: {
1328
1328
  $value: "{base.fontsize.static.xl}",
1329
1329
  },
1330
- small: {
1331
- $value: "{base.fontsize.static.sm}",
1332
- },
1333
1330
  large: {
1334
1331
  $value: "{base.fontsize.static.lg}",
1335
1332
  },
1333
+ small: {
1334
+ $value: "{base.fontsize.static.sm}",
1335
+ },
1336
1336
  "heading-1": {
1337
1337
  min: {
1338
1338
  $value: "{base.fontsize.fluid.6xl.min}",
@@ -1401,7 +1401,15 @@
1401
1401
  },
1402
1402
  borderradius: {
1403
1403
  $type: "dimension",
1404
- $value: "{base.borderradius.md}",
1404
+ default: {
1405
+ $value: "{base.borderradius.md}",
1406
+ },
1407
+ large: {
1408
+ $value: "{base.borderradius.lg}",
1409
+ },
1410
+ small: {
1411
+ $value: "{base.borderradius.sm}",
1412
+ },
1405
1413
  },
1406
1414
  borderwidth: {
1407
1415
  $type: "dimension",
package/tokens/tokens.json CHANGED
@@ -376,8 +376,8 @@
376
376
  "$type": "dimension",
377
377
  "default": { "$value": "{base.fontsize.static.md}" },
378
378
  "introduction": { "$value": "{base.fontsize.static.xl}" },
379
- "small": { "$value": "{base.fontsize.static.sm}" },
380
379
  "large": { "$value": "{base.fontsize.static.lg}" },
380
+ "small": { "$value": "{base.fontsize.static.sm}" },
381
381
  "heading-1": {
382
382
  "min": { "$value": "{base.fontsize.fluid.6xl.min}" },
383
383
  "max": { "$value": "{base.fontsize.fluid.6xl.max}" },
@@ -410,7 +410,9 @@
410
410
  },
411
411
  "borderradius": {
412
412
  "$type": "dimension",
413
- "$value": "{base.borderradius.md}"
413
+ "default": { "$value": "{base.borderradius.md}" },
414
+ "large": { "$value": "{base.borderradius.lg}" },
415
+ "small": { "$value": "{base.borderradius.sm}" }
414
416
  },
415
417
  "borderwidth": {
416
418
  "$type": "dimension",