@openkfw/design-tokens 1.0.1 → 1.0.2
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.
- package/LICENSE +1 -1
- package/README.md +53 -27
- package/demo/src/App.ts +3 -3
- package/output/css/kfw-design-tokens.light.css +1 -1
- package/output/js/kfw-design-tokens.d.ts +1 -1
- package/output/js/kfw-design-tokens.light.js +1 -1
- package/output/scss/kfw-design-tokens.light.scss +1 -1
- package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css +1 -1
- package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js +1 -1
- package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss +1 -1
- package/package.json +1 -5
package/LICENSE
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Copyright (c)
|
|
1
|
+
Copyright (c) 2026 KfW Bankengruppe
|
|
2
2
|
|
|
3
3
|
The source code in this repository is licensed under the Mozilla Public License 2.0 (MPL-2.0).
|
|
4
4
|
All KfW brand assets, including logos, icons, images, fonts, and design documentation, are excluded and remain the property of KfW Bankengruppe.
|
package/README.md
CHANGED
|
@@ -9,55 +9,60 @@
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
KfW Design Tokens is the source of truth for designing KfW-branded digital products.
|
|
13
|
-
|
|
12
|
+
KfW Design Tokens is the source of truth for designing KfW-branded digital products.
|
|
13
|
+
|
|
14
|
+
The tokens follow the <a href="https://www.designtokens.org/tr/2025.10/">W3C DTCG format</a>.
|
|
14
15
|
|
|
15
16
|
|
|
16
17
|
[](./LICENSE)
|
|
17
18
|
[](https://www.npmjs.com/package/@openkfw/design-tokens)
|
|
18
19
|
|
|
19
20
|
|
|
20
|
-
##
|
|
21
|
+
## Table of Contents
|
|
22
|
+
|
|
23
|
+
- [Getting Started](#-getting-started)
|
|
24
|
+
- [FAQ](#-faq)
|
|
25
|
+
- [Contributing](#️-contributing)
|
|
26
|
+
- [License](#-license)
|
|
27
|
+
|
|
28
|
+
## 🚀 Getting Started
|
|
29
|
+
|
|
30
|
+
### For designers
|
|
21
31
|
|
|
22
|
-
|
|
32
|
+
- Download the **prebuilt CSS** or **Figma/Penpot-compatible token files** from the `/output` directory.
|
|
33
|
+
- Import them directly into your project or design tool. For Figma use [Token Forge](https://www.figma.com/files/team/917113827271362612/resources/community/plugin/1566133735926608173/token-forge-variables-tokens-builder?fuid=917113818148995313)
|
|
34
|
+
|
|
35
|
+
### For developers
|
|
36
|
+
|
|
37
|
+
**1. Install the package**
|
|
23
38
|
|
|
24
39
|
```bash
|
|
25
40
|
npm install -D @openkfw/design-tokens
|
|
26
41
|
```
|
|
27
42
|
|
|
28
|
-
Import tokens
|
|
43
|
+
**2. Import tokens in your CSS**
|
|
29
44
|
|
|
30
45
|
```css
|
|
31
46
|
@import url("@openkfw/design-tokens/output/css/kfw-design-tokens.light.css");
|
|
32
47
|
```
|
|
33
48
|
|
|
34
|
-
|
|
49
|
+
**3. Use design tokens**
|
|
35
50
|
|
|
36
51
|
```css
|
|
37
|
-
|
|
38
|
-
|
|
52
|
+
.cta {
|
|
53
|
+
background-color: var(--kfw-color-fn);
|
|
54
|
+
font-size: var(--kfw-fontsize);
|
|
55
|
+
border-radius: var(--kfw-borderradius-small);
|
|
56
|
+
padding-block: var(--kfw-base-space-static-20); /* use base tokens (primitives) only for a new functional case */
|
|
57
|
+
}
|
|
39
58
|
```
|
|
40
59
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
Considering supporting with your contribution? Whether you like to contribute new patterns, fix a bug, spotted a typo or have ideas for improvement - we'd love to hear from you. Our commitment to open source encourages contributions from everyone.
|
|
44
|
-
|
|
45
|
-
## 📒 License
|
|
46
|
-
|
|
47
|
-
Copyright (c) 2025 KfW Bankengruppe
|
|
48
|
-
|
|
49
|
-
The source code in this repository is licensed under the **Mozilla Public License 2.0 (MPL-2.0)**.
|
|
50
|
-
All KfW brand assets, including logos, icons, images, fonts, and design documentation, are **excluded** and remain the property of KfW Bankengruppe.
|
|
51
|
-
These materials may not be used, copied, or redistributed without prior written permission.
|
|
52
|
-
|
|
53
|
-
Excluded brand-related materials include:
|
|
54
|
-
|
|
55
|
-
- trademarks, wordmarks, logos
|
|
56
|
-
- icons, images, fonts, and other design assets
|
|
57
|
-
- brand and design documentation
|
|
58
|
-
- all files under `/demo` directory
|
|
60
|
+
**4. Use the prebuilt `demo` (CSS boilerplate) (optional):**
|
|
59
61
|
|
|
60
|
-
|
|
62
|
+
```css
|
|
63
|
+
/* Make sure to import fonts.css yourself before */
|
|
64
|
+
@import url("@openkfw/design-tokens/demo/dist/css/style.min.css");
|
|
65
|
+
```
|
|
61
66
|
|
|
62
67
|
## 💁 FAQ
|
|
63
68
|
|
|
@@ -121,3 +126,24 @@ Therefore, we export our design tokens into a Figma-compatible format, inspired
|
|
|
121
126
|
|
|
122
127
|
Although the Token Studio plugin offers various features, it is not required and some of its functionality comes with a cost.
|
|
123
128
|
As an alternative, you can use the free plugin [Token Forge](https://www.figma.com/files/team/917113827271362612/resources/community/plugin/1566133735926608173/token-forge-variables-tokens-builder?fuid=917113818148995313), which allows you to easily import our design tokens in the Figma-compatible format and use them as Figma variables.
|
|
129
|
+
|
|
130
|
+
## ❤️ Contributing
|
|
131
|
+
|
|
132
|
+
Considering supporting with your contribution? Whether you like to contribute new patterns, fix a bug, spotted a typo or have ideas for improvement - we'd love to hear from you. Our commitment to open source encourages contributions from everyone.
|
|
133
|
+
|
|
134
|
+
## 📒 License
|
|
135
|
+
|
|
136
|
+
Copyright (c) 2026 KfW Bankengruppe
|
|
137
|
+
|
|
138
|
+
The source code in this repository is licensed under the **Mozilla Public License 2.0 (MPL-2.0)**.
|
|
139
|
+
All KfW brand assets, including logos, icons, images, fonts, and design documentation, are **excluded** and remain the property of KfW Bankengruppe.
|
|
140
|
+
These materials may not be used, copied, or redistributed without prior written permission.
|
|
141
|
+
|
|
142
|
+
Excluded brand-related materials include:
|
|
143
|
+
|
|
144
|
+
- trademarks, wordmarks, logos
|
|
145
|
+
- icons, images, fonts, and other design assets
|
|
146
|
+
- brand and design documentation
|
|
147
|
+
- all files under `/demo` directory
|
|
148
|
+
|
|
149
|
+
See the full MPL-2.0 license in [LICENSE](./LICENSE).
|
package/demo/src/App.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { initializeNavigation } from "./Navigation"
|
|
2
|
-
import { initializeStickyHeader } from "./StickyHeader"
|
|
3
|
-
import { initializeColorPalettes } from "./ColorPalette"
|
|
1
|
+
import { initializeNavigation } from "./Navigation.js"
|
|
2
|
+
import { initializeStickyHeader } from "./StickyHeader.js"
|
|
3
|
+
import { initializeColorPalettes } from "./ColorPalette.js"
|
|
4
4
|
|
|
5
5
|
// Initialize navigation (hamburger menu and offcanvas dialog)
|
|
6
6
|
initializeNavigation()
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openkfw/design-tokens",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "The source of truth for KfW-branded digital products.",
|
|
5
5
|
"files": [
|
|
6
6
|
"README.md",
|
|
@@ -38,13 +38,9 @@
|
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@eslint/js": "^9",
|
|
40
40
|
"@tsconfig/node24": "^24",
|
|
41
|
-
"@types/lodash": "^4.17.23",
|
|
42
41
|
"@types/node": "^24",
|
|
43
42
|
"concurrently": "^9.2.1",
|
|
44
|
-
"deep-get-set-ts": "^1.1.2",
|
|
45
43
|
"eslint": "^9",
|
|
46
|
-
"json5": "^2.2.3",
|
|
47
|
-
"lodash": "4.17.23",
|
|
48
44
|
"prettier": "^3.8.1",
|
|
49
45
|
"style-dictionary": "^5.3.1",
|
|
50
46
|
"style-dictionary-utils": "^6.0.1",
|