@openkfw/design-tokens 0.2.0 → 0.3.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 (16) hide show
  1. package/README.md +2 -1
  2. package/output/README.md +1 -1
  3. package/output/figma/kfw-design-tokens.light.json +1 -1
  4. package/output/json/kfw-design-tokens.light.json +6 -6
  5. package/output/penpot/kfw-design-tokens.light.json +1 -1
  6. package/output/web_next_16px/css/kfw-design-tokens.light.css +4 -4
  7. package/output/web_next_16px/js/kfw-design-tokens.light.d.ts +2 -2
  8. package/output/web_next_16px/js/kfw-design-tokens.light.js +4 -4
  9. package/output/web_next_16px/scss/kfw-design-tokens.light.scss +4 -4
  10. package/output/web_stable_10px/css/kfw-design-tokens.light.css +4 -4
  11. package/output/web_stable_10px/js/kfw-design-tokens.light.d.ts +2 -2
  12. package/output/web_stable_10px/js/kfw-design-tokens.light.js +4 -4
  13. package/output/web_stable_10px/scss/kfw-design-tokens.light.scss +4 -4
  14. package/package.json +7 -9
  15. package/tokens/gen-tokens.dark.json5 +1 -1
  16. package/tokens/tokens.json +1 -1
package/README.md CHANGED
@@ -21,7 +21,8 @@ Although the source code for KfW Design Tokens is free and available under the M
21
21
  Run the following command to install the Design Tokens:
22
22
 
23
23
  ```bash
24
- npm install @openkfw/design-tokens
24
+
25
+ npm i -D @openkfw/design-tokens
25
26
  ```
26
27
 
27
28
  Import or use files inside the `output` folder, e.g.:
package/output/README.md CHANGED
@@ -21,4 +21,4 @@ In the `/output` directory, you will find all available output formats for Figma
21
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
23
 
24
- 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.
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).
package/output/figma/kfw-design-tokens.light.json CHANGED
@@ -683,7 +683,7 @@
683
683
  "$value": 400,
684
684
  "$type": "fontWeights"
685
685
  },
686
- "Heading": {
686
+ "Bold": {
687
687
  "$value": 500,
688
688
  "$type": "fontWeights"
689
689
  }
package/output/json/kfw-design-tokens.light.json CHANGED
@@ -7074,8 +7074,8 @@
7074
7074
  "default"
7075
7075
  ]
7076
7076
  },
7077
- "heading": {
7078
- "key": "{semantic.fontweight.heading}",
7077
+ "bold": {
7078
+ "key": "{semantic.fontweight.bold}",
7079
7079
  "$value": 500,
7080
7080
  "filePath": "tokens/tokens.json",
7081
7081
  "isSource": true,
@@ -7083,18 +7083,18 @@
7083
7083
  "original": {
7084
7084
  "$value": "{base.fontweight.medium}",
7085
7085
  "$type": "fontWeight",
7086
- "key": "{semantic.fontweight.heading}"
7086
+ "key": "{semantic.fontweight.bold}"
7087
7087
  },
7088
- "name": "kfw-fontweight-heading",
7088
+ "name": "kfw-fontweight-bold",
7089
7089
  "attributes": {
7090
7090
  "category": "semantic",
7091
7091
  "type": "fontweight",
7092
- "item": "heading"
7092
+ "item": "bold"
7093
7093
  },
7094
7094
  "path": [
7095
7095
  "semantic",
7096
7096
  "fontweight",
7097
- "heading"
7097
+ "bold"
7098
7098
  ]
7099
7099
  }
7100
7100
  },
package/output/penpot/kfw-design-tokens.light.json CHANGED
@@ -683,7 +683,7 @@
683
683
  "$value": 400,
684
684
  "$type": "fontWeights"
685
685
  },
686
- "Heading": {
686
+ "Bold": {
687
687
  "$value": 500,
688
688
  "$type": "fontWeights"
689
689
  }
package/output/web_next_16px/css/kfw-design-tokens.light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.2.0
2
+ * KfW Design Tokens v0.3.0
3
3
  * Copyright 2025
4
4
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
  */
@@ -126,9 +126,9 @@
126
126
  --kfw-base-borderwidth-lg: 0.125rem;
127
127
  --kfw-base-fontweight-regular: 400;
128
128
  --kfw-base-fontweight-medium: 500;
129
- --kfw-base-letterspacing-tight: -0.03125rem;
129
+ --kfw-base-letterspacing-tight: -0.5px;
130
130
  --kfw-base-letterspacing-normal: 0;
131
- --kfw-base-letterspacing-wide: 0.03125rem;
131
+ --kfw-base-letterspacing-wide: 0.5px;
132
132
  --kfw-base-letterspacing-wider: 1px;
133
133
  --kfw-base-layout-breakpoint-xs: 20rem;
134
134
  --kfw-base-layout-breakpoint-sm: 37.5rem;
@@ -249,7 +249,7 @@
249
249
  --kfw-focusring-outline-offset: 0.125rem;
250
250
  --kfw-focusring-outline-style: dashed;
251
251
  --kfw-fontweight: 400;
252
- --kfw-fontweight-heading: 500;
252
+ --kfw-fontweight-bold: 500;
253
253
  --kfw-breakpoint-mobile: 37.5rem;
254
254
  --kfw-breakpoint-tablet: 52.5rem;
255
255
  --kfw-breakpoint-desktop: 60rem;
package/output/web_next_16px/js/kfw-design-tokens.light.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.2.0
2
+ * KfW Design Tokens v0.3.0
3
3
  * Copyright 2025
4
4
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
  */
@@ -540,7 +540,7 @@ export const KfwFocusringOutlineWidth: string;
540
540
  export const KfwFocusringOutlineOffset: string;
541
541
  export const KfwFocusringOutlineStyle: string;
542
542
  export const KfwFontweight: number;
543
- export const KfwFontweightHeading: number;
543
+ export const KfwFontweightBold: number;
544
544
  export const KfwBreakpointMobile: string;
545
545
  export const KfwBreakpointTablet: string;
546
546
  export const KfwBreakpointDesktop: string;
package/output/web_next_16px/js/kfw-design-tokens.light.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.2.0
2
+ * KfW Design Tokens v0.3.0
3
3
  * Copyright 2025
4
4
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
  */
@@ -242,9 +242,9 @@ export const KfwBaseBorderwidthMd = "1px";
242
242
  export const KfwBaseBorderwidthLg = "0.125rem";
243
243
  export const KfwBaseFontweightRegular = 400;
244
244
  export const KfwBaseFontweightMedium = 500;
245
- export const KfwBaseLetterspacingTight = "-0.03125rem";
245
+ export const KfwBaseLetterspacingTight = "-0.5px";
246
246
  export const KfwBaseLetterspacingNormal = "0";
247
- export const KfwBaseLetterspacingWide = "0.03125rem";
247
+ export const KfwBaseLetterspacingWide = "0.5px";
248
248
  export const KfwBaseLetterspacingWider = "1px";
249
249
  export const KfwBaseLayoutBreakpointXs = "20rem";
250
250
  export const KfwBaseLayoutBreakpointSm = "37.5rem";
@@ -544,7 +544,7 @@ export const KfwFocusringOutlineWidth = "0.125rem";
544
544
  export const KfwFocusringOutlineOffset = "0.125rem";
545
545
  export const KfwFocusringOutlineStyle = "dashed";
546
546
  export const KfwFontweight = 400;
547
- export const KfwFontweightHeading = 500;
547
+ export const KfwFontweightBold = 500;
548
548
  export const KfwBreakpointMobile = "37.5rem";
549
549
  export const KfwBreakpointTablet = "52.5rem";
550
550
  export const KfwBreakpointDesktop = "60rem";
package/output/web_next_16px/scss/kfw-design-tokens.light.scss CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- // KfW Design Tokens v0.2.0
2
+ // KfW Design Tokens v0.3.0
3
3
  // Copyright 2025
4
4
  // Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
 
@@ -122,9 +122,9 @@ $kfw-base-borderwidth-md: 1px;
122
122
  $kfw-base-borderwidth-lg: 0.125rem;
123
123
  $kfw-base-fontweight-regular: 400;
124
124
  $kfw-base-fontweight-medium: 500;
125
- $kfw-base-letterspacing-tight: -0.03125rem;
125
+ $kfw-base-letterspacing-tight: -0.5px;
126
126
  $kfw-base-letterspacing-normal: 0;
127
- $kfw-base-letterspacing-wide: 0.03125rem;
127
+ $kfw-base-letterspacing-wide: 0.5px;
128
128
  $kfw-base-letterspacing-wider: 1px;
129
129
  $kfw-base-layout-breakpoint-xs: 20rem;
130
130
  $kfw-base-layout-breakpoint-sm: 37.5rem;
@@ -245,7 +245,7 @@ $kfw-focusring-outline-width: 0.125rem;
245
245
  $kfw-focusring-outline-offset: 0.125rem;
246
246
  $kfw-focusring-outline-style: dashed;
247
247
  $kfw-fontweight: 400;
248
- $kfw-fontweight-heading: 500;
248
+ $kfw-fontweight-bold: 500;
249
249
  $kfw-breakpoint-mobile: 37.5rem;
250
250
  $kfw-breakpoint-tablet: 52.5rem;
251
251
  $kfw-breakpoint-desktop: 60rem;
package/output/web_stable_10px/css/kfw-design-tokens.light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.2.0
2
+ * KfW Design Tokens v0.3.0
3
3
  * Copyright 2025
4
4
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
  */
@@ -126,9 +126,9 @@
126
126
  --kfw-base-borderwidth-lg: 0.2rem;
127
127
  --kfw-base-fontweight-regular: 400;
128
128
  --kfw-base-fontweight-medium: 500;
129
- --kfw-base-letterspacing-tight: -0.05rem;
129
+ --kfw-base-letterspacing-tight: -0.5px;
130
130
  --kfw-base-letterspacing-normal: 0;
131
- --kfw-base-letterspacing-wide: 0.05rem;
131
+ --kfw-base-letterspacing-wide: 0.5px;
132
132
  --kfw-base-letterspacing-wider: 1px;
133
133
  --kfw-base-layout-breakpoint-xs: 32rem;
134
134
  --kfw-base-layout-breakpoint-sm: 60rem;
@@ -249,7 +249,7 @@
249
249
  --kfw-focusring-outline-offset: 0.2rem;
250
250
  --kfw-focusring-outline-style: dashed;
251
251
  --kfw-fontweight: 400;
252
- --kfw-fontweight-heading: 500;
252
+ --kfw-fontweight-bold: 500;
253
253
  --kfw-breakpoint-mobile: 60rem;
254
254
  --kfw-breakpoint-tablet: 84rem;
255
255
  --kfw-breakpoint-desktop: 96rem;
package/output/web_stable_10px/js/kfw-design-tokens.light.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.2.0
2
+ * KfW Design Tokens v0.3.0
3
3
  * Copyright 2025
4
4
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
  */
@@ -540,7 +540,7 @@ export const KfwFocusringOutlineWidth: string;
540
540
  export const KfwFocusringOutlineOffset: string;
541
541
  export const KfwFocusringOutlineStyle: string;
542
542
  export const KfwFontweight: number;
543
- export const KfwFontweightHeading: number;
543
+ export const KfwFontweightBold: number;
544
544
  export const KfwBreakpointMobile: string;
545
545
  export const KfwBreakpointTablet: string;
546
546
  export const KfwBreakpointDesktop: string;
package/output/web_stable_10px/js/kfw-design-tokens.light.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.2.0
2
+ * KfW Design Tokens v0.3.0
3
3
  * Copyright 2025
4
4
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
  */
@@ -242,9 +242,9 @@ export const KfwBaseBorderwidthMd = "1px";
242
242
  export const KfwBaseBorderwidthLg = "0.2rem";
243
243
  export const KfwBaseFontweightRegular = 400;
244
244
  export const KfwBaseFontweightMedium = 500;
245
- export const KfwBaseLetterspacingTight = "-0.05rem";
245
+ export const KfwBaseLetterspacingTight = "-0.5px";
246
246
  export const KfwBaseLetterspacingNormal = "0";
247
- export const KfwBaseLetterspacingWide = "0.05rem";
247
+ export const KfwBaseLetterspacingWide = "0.5px";
248
248
  export const KfwBaseLetterspacingWider = "1px";
249
249
  export const KfwBaseLayoutBreakpointXs = "32rem";
250
250
  export const KfwBaseLayoutBreakpointSm = "60rem";
@@ -544,7 +544,7 @@ export const KfwFocusringOutlineWidth = "0.2rem";
544
544
  export const KfwFocusringOutlineOffset = "0.2rem";
545
545
  export const KfwFocusringOutlineStyle = "dashed";
546
546
  export const KfwFontweight = 400;
547
- export const KfwFontweightHeading = 500;
547
+ export const KfwFontweightBold = 500;
548
548
  export const KfwBreakpointMobile = "60rem";
549
549
  export const KfwBreakpointTablet = "84rem";
550
550
  export const KfwBreakpointDesktop = "96rem";
package/output/web_stable_10px/scss/kfw-design-tokens.light.scss CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- // KfW Design Tokens v0.2.0
2
+ // KfW Design Tokens v0.3.0
3
3
  // Copyright 2025
4
4
  // Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
 
@@ -122,9 +122,9 @@ $kfw-base-borderwidth-md: 1px;
122
122
  $kfw-base-borderwidth-lg: 0.2rem;
123
123
  $kfw-base-fontweight-regular: 400;
124
124
  $kfw-base-fontweight-medium: 500;
125
- $kfw-base-letterspacing-tight: -0.05rem;
125
+ $kfw-base-letterspacing-tight: -0.5px;
126
126
  $kfw-base-letterspacing-normal: 0;
127
- $kfw-base-letterspacing-wide: 0.05rem;
127
+ $kfw-base-letterspacing-wide: 0.5px;
128
128
  $kfw-base-letterspacing-wider: 1px;
129
129
  $kfw-base-layout-breakpoint-xs: 32rem;
130
130
  $kfw-base-layout-breakpoint-sm: 60rem;
@@ -245,7 +245,7 @@ $kfw-focusring-outline-width: 0.2rem;
245
245
  $kfw-focusring-outline-offset: 0.2rem;
246
246
  $kfw-focusring-outline-style: dashed;
247
247
  $kfw-fontweight: 400;
248
- $kfw-fontweight-heading: 500;
248
+ $kfw-fontweight-bold: 500;
249
249
  $kfw-breakpoint-mobile: 60rem;
250
250
  $kfw-breakpoint-tablet: 84rem;
251
251
  $kfw-breakpoint-desktop: 96rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openkfw/design-tokens",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "The source of truth for KfW-branded digital products.",
5
5
  "files": [
6
6
  "output",
@@ -34,17 +34,14 @@
34
34
  "engines": {
35
35
  "node": ">= 22.0.0"
36
36
  },
37
- "peerDependencies": {
38
- "@types/lodash": "^4.17.17",
39
- "@types/node": "^22.9.3",
40
- "npm-check-updates": "^18.0.1"
41
- },
42
37
  "devDependencies": {
43
- "@eslint/js": "^9.35.0",
38
+ "@eslint/js": "^9.36.0",
44
39
  "@tsconfig/node22": "^22.0.2",
40
+ "@types/lodash": "^4.17.20",
41
+ "@types/node": "^22.18.6",
45
42
  "concurrently": "^9.2.1",
46
43
  "deep-get-set-ts": "^1.1.1",
47
- "eslint": "^9.35.0",
44
+ "eslint": "^9.36.0",
48
45
  "json5": "^2.2.3",
49
46
  "jsoneditor-cli": "^1.1.0",
50
47
  "lodash": "4.17.21",
@@ -52,6 +49,7 @@
52
49
  "style-dictionary": "^5.0.4",
53
50
  "tsx": "^4.20.5",
54
51
  "typescript": "^5.9.2",
55
- "typescript-eslint": "^8.43.0"
52
+ "typescript-eslint": "^8.44.1",
53
+ "npm-check-updates": "^18.3.0"
56
54
  }
57
55
  }
package/tokens/gen-tokens.dark.json5 CHANGED
@@ -1416,7 +1416,7 @@
1416
1416
  default: {
1417
1417
  $value: "{base.fontweight.regular}",
1418
1418
  },
1419
- heading: {
1419
+ bold: {
1420
1420
  $value: "{base.fontweight.medium}",
1421
1421
  },
1422
1422
  },
package/tokens/tokens.json CHANGED
@@ -421,7 +421,7 @@
421
421
  "default": {
422
422
  "$value": "{base.fontweight.regular}"
423
423
  },
424
- "heading": {
424
+ "bold": {
425
425
  "$value": "{base.fontweight.medium}"
426
426
  }
427
427
  },