@openkfw/design-tokens 0.4.3 → 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 (10) hide show
  1. package/output/README.md +21 -7
  2. package/output/{web_stable_10px/css → css}/kfw-design-tokens.light.css +1 -3
  3. package/output/{web_stable_10px/js → js}/kfw-design-tokens.light.d.ts +1 -3
  4. package/output/{web_stable_10px/js → js}/kfw-design-tokens.light.js +1 -3
  5. package/output/{web_stable_10px/scss → scss}/kfw-design-tokens.light.scss +1 -3
  6. package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css +1 -3
  7. package/output/web_thirdparty_16px/js/kfw-design-tokens.light.d.ts +1 -3
  8. package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js +1 -3
  9. package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss +1 -3
  10. package/package.json +4 -4
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.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  :root, :host, .kfw-theme--light { color-scheme: light; }
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.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  export const KfwBaseColorBlue100: {
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.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  export const KfwBaseColorBlue100 = {
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.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;
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.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  :root, :host, .kfw-theme--light { color-scheme: light; }
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.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  export const KfwBaseColorBlue100: {
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.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
5
3
  */
6
4
 
7
5
  export const KfwBaseColorBlue100 = {
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.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;
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.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
  }