@openkfw/design-tokens 0.4.1 → 0.4.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/README.md CHANGED
@@ -67,17 +67,3 @@ Otherwise you can use the static `px` values provided in the design tokens.
67
67
 
68
68
  In Tailwind CSS v3, you can define breakpoints directly in your `tailwind.config.js` using JavaScript.
69
69
  In Tailwind CSS v4, you can either use the <a href="https://v3.tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus">SCSS preprocessor</a> with variables for breakpoints, or use the standard CSS version with the workaround described above.
70
-
71
- ### How to use KfW Design Tokens with AI?
72
-
73
- You can integrate `KfW Design Tokens` with AI tools like [Google Stitch](https://stitch.withgoogle.com/)
74
- by providing prompts that include specific token values. This helps generate designs aligned with KfW's branding, including colors, typography, and spacing.
75
-
76
- Example prompt:
77
-
78
- ```
79
- Create a modern website design that aligns with the KfW brand provided by KfW Design Tokens:
80
-
81
- https://github.com/openkfw/design-tokens/blob/main/output/web_stable_10px/css/kfw-design-tokens.light.css
82
- (Copy the CSS from the link above and paste it here)
83
- ```
@@ -117,24 +117,24 @@
117
117
  --kfw-base-lineheight-sm: 1.333;
118
118
  --kfw-base-lineheight-md: 1.4;
119
119
  --kfw-base-lineheight-lg: 1.5;
120
- --kfw-base-borderradius-sm: 0.2rem;
120
+ --kfw-base-borderradius-sm: 2px;
121
121
  --kfw-base-borderradius-md: 0.4rem;
122
122
  --kfw-base-borderradius-lg: 2rem;
123
123
  --kfw-base-borderradius-full: 999.9rem;
124
124
  --kfw-base-borderwidth-none: 0;
125
125
  --kfw-base-borderwidth-md: 1px;
126
- --kfw-base-borderwidth-lg: 0.2rem;
126
+ --kfw-base-borderwidth-lg: 2px;
127
127
  --kfw-base-fontweight-regular: 400;
128
128
  --kfw-base-fontweight-medium: 500;
129
129
  --kfw-base-letterspacing-tight: -0.5px;
130
130
  --kfw-base-letterspacing-normal: 0;
131
131
  --kfw-base-letterspacing-wide: 0.5px;
132
132
  --kfw-base-letterspacing-wider: 1px;
133
- --kfw-base-layout-breakpoint-xs: 32rem;
134
- --kfw-base-layout-breakpoint-sm: 60rem;
135
- --kfw-base-layout-breakpoint-md: 84rem;
136
- --kfw-base-layout-breakpoint-lg: 96rem;
137
- --kfw-base-layout-breakpoint-xl: 128rem;
133
+ --kfw-base-layout-breakpoint-xs: 320px;
134
+ --kfw-base-layout-breakpoint-sm: 600px;
135
+ --kfw-base-layout-breakpoint-md: 840px;
136
+ --kfw-base-layout-breakpoint-lg: 960px;
137
+ --kfw-base-layout-breakpoint-xl: 1280px;
138
138
  --kfw-base-layout-container-sm: 89.6rem;
139
139
  --kfw-base-layout-container-md: 108rem;
140
140
  --kfw-base-layout-container-lg: 128rem;
@@ -247,16 +247,16 @@
247
247
  --kfw-lineheight-heading-5: 1.333;
248
248
  --kfw-borderradius: 0.4rem;
249
249
  --kfw-borderwidth: 1px;
250
- --kfw-borderwidth-large: 0.2rem;
251
- --kfw-focusring-outline-width: 0.2rem;
252
- --kfw-focusring-outline-offset: 0.2rem;
250
+ --kfw-borderwidth-large: 2px;
251
+ --kfw-focusring-outline-width: 2px;
252
+ --kfw-focusring-outline-offset: 2px;
253
253
  --kfw-focusring-outline-style: dashed;
254
254
  --kfw-fontweight: 400;
255
255
  --kfw-fontweight-bold: 500;
256
- --kfw-breakpoint-mobile: 60rem;
257
- --kfw-breakpoint-tablet: 84rem;
258
- --kfw-breakpoint-desktop: 96rem;
259
- --kfw-breakpoint-desktop-large: 128rem;
256
+ --kfw-breakpoint-mobile: 600px;
257
+ --kfw-breakpoint-tablet: 840px;
258
+ --kfw-breakpoint-desktop: 960px;
259
+ --kfw-breakpoint-desktop-large: 1280px;
260
260
  --kfw-contentwrapper-narrow: 89.6rem;
261
261
  --kfw-contentwrapper-basic: 108rem;
262
262
  --kfw-contentwrapper-extended: 128rem;
@@ -233,24 +233,24 @@ export const KfwBaseLineheightXs = 1.3;
233
233
  export const KfwBaseLineheightSm = 1.333;
234
234
  export const KfwBaseLineheightMd = 1.4;
235
235
  export const KfwBaseLineheightLg = 1.5;
236
- export const KfwBaseBorderradiusSm = "0.2rem";
236
+ export const KfwBaseBorderradiusSm = "2px";
237
237
  export const KfwBaseBorderradiusMd = "0.4rem";
238
238
  export const KfwBaseBorderradiusLg = "2rem";
239
239
  export const KfwBaseBorderradiusFull = "999.9rem";
240
240
  export const KfwBaseBorderwidthNone = "0";
241
241
  export const KfwBaseBorderwidthMd = "1px";
242
- export const KfwBaseBorderwidthLg = "0.2rem";
242
+ export const KfwBaseBorderwidthLg = "2px";
243
243
  export const KfwBaseFontweightRegular = 400;
244
244
  export const KfwBaseFontweightMedium = 500;
245
245
  export const KfwBaseLetterspacingTight = "-0.5px";
246
246
  export const KfwBaseLetterspacingNormal = "0";
247
247
  export const KfwBaseLetterspacingWide = "0.5px";
248
248
  export const KfwBaseLetterspacingWider = "1px";
249
- export const KfwBaseLayoutBreakpointXs = "32rem";
250
- export const KfwBaseLayoutBreakpointSm = "60rem";
251
- export const KfwBaseLayoutBreakpointMd = "84rem";
252
- export const KfwBaseLayoutBreakpointLg = "96rem";
253
- export const KfwBaseLayoutBreakpointXl = "128rem";
249
+ export const KfwBaseLayoutBreakpointXs = "320px";
250
+ export const KfwBaseLayoutBreakpointSm = "600px";
251
+ export const KfwBaseLayoutBreakpointMd = "840px";
252
+ export const KfwBaseLayoutBreakpointLg = "960px";
253
+ export const KfwBaseLayoutBreakpointXl = "1280px";
254
254
  export const KfwBaseLayoutContainerSm = "89.6rem";
255
255
  export const KfwBaseLayoutContainerMd = "108rem";
256
256
  export const KfwBaseLayoutContainerLg = "128rem";
@@ -542,16 +542,16 @@ export const KfwLineheightHeading = 1.3;
542
542
  export const KfwLineheightHeading5 = 1.333;
543
543
  export const KfwBorderradius = "0.4rem";
544
544
  export const KfwBorderwidth = "1px";
545
- export const KfwBorderwidthLarge = "0.2rem";
546
- export const KfwFocusringOutlineWidth = "0.2rem";
547
- export const KfwFocusringOutlineOffset = "0.2rem";
545
+ export const KfwBorderwidthLarge = "2px";
546
+ export const KfwFocusringOutlineWidth = "2px";
547
+ export const KfwFocusringOutlineOffset = "2px";
548
548
  export const KfwFocusringOutlineStyle = "dashed";
549
549
  export const KfwFontweight = 400;
550
550
  export const KfwFontweightBold = 500;
551
- export const KfwBreakpointMobile = "60rem";
552
- export const KfwBreakpointTablet = "84rem";
553
- export const KfwBreakpointDesktop = "96rem";
554
- export const KfwBreakpointDesktopLarge = "128rem";
551
+ export const KfwBreakpointMobile = "600px";
552
+ export const KfwBreakpointTablet = "840px";
553
+ export const KfwBreakpointDesktop = "960px";
554
+ export const KfwBreakpointDesktopLarge = "1280px";
555
555
  export const KfwContentwrapperNarrow = "89.6rem";
556
556
  export const KfwContentwrapperBasic = "108rem";
557
557
  export const KfwContentwrapperExtended = "128rem";
@@ -113,24 +113,24 @@ $kfw-base-lineheight-xs: 1.3;
113
113
  $kfw-base-lineheight-sm: 1.333;
114
114
  $kfw-base-lineheight-md: 1.4;
115
115
  $kfw-base-lineheight-lg: 1.5;
116
- $kfw-base-borderradius-sm: 0.2rem;
116
+ $kfw-base-borderradius-sm: 2px;
117
117
  $kfw-base-borderradius-md: 0.4rem;
118
118
  $kfw-base-borderradius-lg: 2rem;
119
119
  $kfw-base-borderradius-full: 999.9rem;
120
120
  $kfw-base-borderwidth-none: 0;
121
121
  $kfw-base-borderwidth-md: 1px;
122
- $kfw-base-borderwidth-lg: 0.2rem;
122
+ $kfw-base-borderwidth-lg: 2px;
123
123
  $kfw-base-fontweight-regular: 400;
124
124
  $kfw-base-fontweight-medium: 500;
125
125
  $kfw-base-letterspacing-tight: -0.5px;
126
126
  $kfw-base-letterspacing-normal: 0;
127
127
  $kfw-base-letterspacing-wide: 0.5px;
128
128
  $kfw-base-letterspacing-wider: 1px;
129
- $kfw-base-layout-breakpoint-xs: 32rem;
130
- $kfw-base-layout-breakpoint-sm: 60rem;
131
- $kfw-base-layout-breakpoint-md: 84rem;
132
- $kfw-base-layout-breakpoint-lg: 96rem;
133
- $kfw-base-layout-breakpoint-xl: 128rem;
129
+ $kfw-base-layout-breakpoint-xs: 320px;
130
+ $kfw-base-layout-breakpoint-sm: 600px;
131
+ $kfw-base-layout-breakpoint-md: 840px;
132
+ $kfw-base-layout-breakpoint-lg: 960px;
133
+ $kfw-base-layout-breakpoint-xl: 1280px;
134
134
  $kfw-base-layout-container-sm: 89.6rem;
135
135
  $kfw-base-layout-container-md: 108rem;
136
136
  $kfw-base-layout-container-lg: 128rem;
@@ -243,16 +243,16 @@ $kfw-lineheight-heading: 1.3;
243
243
  $kfw-lineheight-heading-5: 1.333;
244
244
  $kfw-borderradius: 0.4rem;
245
245
  $kfw-borderwidth: 1px;
246
- $kfw-borderwidth-large: 0.2rem;
247
- $kfw-focusring-outline-width: 0.2rem;
248
- $kfw-focusring-outline-offset: 0.2rem;
246
+ $kfw-borderwidth-large: 2px;
247
+ $kfw-focusring-outline-width: 2px;
248
+ $kfw-focusring-outline-offset: 2px;
249
249
  $kfw-focusring-outline-style: dashed;
250
250
  $kfw-fontweight: 400;
251
251
  $kfw-fontweight-bold: 500;
252
- $kfw-breakpoint-mobile: 60rem;
253
- $kfw-breakpoint-tablet: 84rem;
254
- $kfw-breakpoint-desktop: 96rem;
255
- $kfw-breakpoint-desktop-large: 128rem;
252
+ $kfw-breakpoint-mobile: 600px;
253
+ $kfw-breakpoint-tablet: 840px;
254
+ $kfw-breakpoint-desktop: 960px;
255
+ $kfw-breakpoint-desktop-large: 1280px;
256
256
  $kfw-contentwrapper-narrow: 89.6rem;
257
257
  $kfw-contentwrapper-basic: 108rem;
258
258
  $kfw-contentwrapper-extended: 128rem;
@@ -117,24 +117,24 @@
117
117
  --kfw-base-lineheight-sm: 1.333;
118
118
  --kfw-base-lineheight-md: 1.4;
119
119
  --kfw-base-lineheight-lg: 1.5;
120
- --kfw-base-borderradius-sm: 0.125rem;
120
+ --kfw-base-borderradius-sm: 2px;
121
121
  --kfw-base-borderradius-md: 0.25rem;
122
122
  --kfw-base-borderradius-lg: 1.25rem;
123
123
  --kfw-base-borderradius-full: 624.9375rem;
124
124
  --kfw-base-borderwidth-none: 0;
125
125
  --kfw-base-borderwidth-md: 1px;
126
- --kfw-base-borderwidth-lg: 0.125rem;
126
+ --kfw-base-borderwidth-lg: 2px;
127
127
  --kfw-base-fontweight-regular: 400;
128
128
  --kfw-base-fontweight-medium: 500;
129
129
  --kfw-base-letterspacing-tight: -0.5px;
130
130
  --kfw-base-letterspacing-normal: 0;
131
131
  --kfw-base-letterspacing-wide: 0.5px;
132
132
  --kfw-base-letterspacing-wider: 1px;
133
- --kfw-base-layout-breakpoint-xs: 20rem;
134
- --kfw-base-layout-breakpoint-sm: 37.5rem;
135
- --kfw-base-layout-breakpoint-md: 52.5rem;
136
- --kfw-base-layout-breakpoint-lg: 60rem;
137
- --kfw-base-layout-breakpoint-xl: 80rem;
133
+ --kfw-base-layout-breakpoint-xs: 320px;
134
+ --kfw-base-layout-breakpoint-sm: 600px;
135
+ --kfw-base-layout-breakpoint-md: 840px;
136
+ --kfw-base-layout-breakpoint-lg: 960px;
137
+ --kfw-base-layout-breakpoint-xl: 1280px;
138
138
  --kfw-base-layout-container-sm: 56rem;
139
139
  --kfw-base-layout-container-md: 67.5rem;
140
140
  --kfw-base-layout-container-lg: 80rem;
@@ -247,16 +247,16 @@
247
247
  --kfw-lineheight-heading-5: 1.333;
248
248
  --kfw-borderradius: 0.25rem;
249
249
  --kfw-borderwidth: 1px;
250
- --kfw-borderwidth-large: 0.125rem;
251
- --kfw-focusring-outline-width: 0.125rem;
252
- --kfw-focusring-outline-offset: 0.125rem;
250
+ --kfw-borderwidth-large: 2px;
251
+ --kfw-focusring-outline-width: 2px;
252
+ --kfw-focusring-outline-offset: 2px;
253
253
  --kfw-focusring-outline-style: dashed;
254
254
  --kfw-fontweight: 400;
255
255
  --kfw-fontweight-bold: 500;
256
- --kfw-breakpoint-mobile: 37.5rem;
257
- --kfw-breakpoint-tablet: 52.5rem;
258
- --kfw-breakpoint-desktop: 60rem;
259
- --kfw-breakpoint-desktop-large: 80rem;
256
+ --kfw-breakpoint-mobile: 600px;
257
+ --kfw-breakpoint-tablet: 840px;
258
+ --kfw-breakpoint-desktop: 960px;
259
+ --kfw-breakpoint-desktop-large: 1280px;
260
260
  --kfw-contentwrapper-narrow: 56rem;
261
261
  --kfw-contentwrapper-basic: 67.5rem;
262
262
  --kfw-contentwrapper-extended: 80rem;
@@ -233,24 +233,24 @@ export const KfwBaseLineheightXs = 1.3;
233
233
  export const KfwBaseLineheightSm = 1.333;
234
234
  export const KfwBaseLineheightMd = 1.4;
235
235
  export const KfwBaseLineheightLg = 1.5;
236
- export const KfwBaseBorderradiusSm = "0.125rem";
236
+ export const KfwBaseBorderradiusSm = "2px";
237
237
  export const KfwBaseBorderradiusMd = "0.25rem";
238
238
  export const KfwBaseBorderradiusLg = "1.25rem";
239
239
  export const KfwBaseBorderradiusFull = "624.9375rem";
240
240
  export const KfwBaseBorderwidthNone = "0";
241
241
  export const KfwBaseBorderwidthMd = "1px";
242
- export const KfwBaseBorderwidthLg = "0.125rem";
242
+ export const KfwBaseBorderwidthLg = "2px";
243
243
  export const KfwBaseFontweightRegular = 400;
244
244
  export const KfwBaseFontweightMedium = 500;
245
245
  export const KfwBaseLetterspacingTight = "-0.5px";
246
246
  export const KfwBaseLetterspacingNormal = "0";
247
247
  export const KfwBaseLetterspacingWide = "0.5px";
248
248
  export const KfwBaseLetterspacingWider = "1px";
249
- export const KfwBaseLayoutBreakpointXs = "20rem";
250
- export const KfwBaseLayoutBreakpointSm = "37.5rem";
251
- export const KfwBaseLayoutBreakpointMd = "52.5rem";
252
- export const KfwBaseLayoutBreakpointLg = "60rem";
253
- export const KfwBaseLayoutBreakpointXl = "80rem";
249
+ export const KfwBaseLayoutBreakpointXs = "320px";
250
+ export const KfwBaseLayoutBreakpointSm = "600px";
251
+ export const KfwBaseLayoutBreakpointMd = "840px";
252
+ export const KfwBaseLayoutBreakpointLg = "960px";
253
+ export const KfwBaseLayoutBreakpointXl = "1280px";
254
254
  export const KfwBaseLayoutContainerSm = "56rem";
255
255
  export const KfwBaseLayoutContainerMd = "67.5rem";
256
256
  export const KfwBaseLayoutContainerLg = "80rem";
@@ -542,16 +542,16 @@ export const KfwLineheightHeading = 1.3;
542
542
  export const KfwLineheightHeading5 = 1.333;
543
543
  export const KfwBorderradius = "0.25rem";
544
544
  export const KfwBorderwidth = "1px";
545
- export const KfwBorderwidthLarge = "0.125rem";
546
- export const KfwFocusringOutlineWidth = "0.125rem";
547
- export const KfwFocusringOutlineOffset = "0.125rem";
545
+ export const KfwBorderwidthLarge = "2px";
546
+ export const KfwFocusringOutlineWidth = "2px";
547
+ export const KfwFocusringOutlineOffset = "2px";
548
548
  export const KfwFocusringOutlineStyle = "dashed";
549
549
  export const KfwFontweight = 400;
550
550
  export const KfwFontweightBold = 500;
551
- export const KfwBreakpointMobile = "37.5rem";
552
- export const KfwBreakpointTablet = "52.5rem";
553
- export const KfwBreakpointDesktop = "60rem";
554
- export const KfwBreakpointDesktopLarge = "80rem";
551
+ export const KfwBreakpointMobile = "600px";
552
+ export const KfwBreakpointTablet = "840px";
553
+ export const KfwBreakpointDesktop = "960px";
554
+ export const KfwBreakpointDesktopLarge = "1280px";
555
555
  export const KfwContentwrapperNarrow = "56rem";
556
556
  export const KfwContentwrapperBasic = "67.5rem";
557
557
  export const KfwContentwrapperExtended = "80rem";
@@ -113,24 +113,24 @@ $kfw-base-lineheight-xs: 1.3;
113
113
  $kfw-base-lineheight-sm: 1.333;
114
114
  $kfw-base-lineheight-md: 1.4;
115
115
  $kfw-base-lineheight-lg: 1.5;
116
- $kfw-base-borderradius-sm: 0.125rem;
116
+ $kfw-base-borderradius-sm: 2px;
117
117
  $kfw-base-borderradius-md: 0.25rem;
118
118
  $kfw-base-borderradius-lg: 1.25rem;
119
119
  $kfw-base-borderradius-full: 624.9375rem;
120
120
  $kfw-base-borderwidth-none: 0;
121
121
  $kfw-base-borderwidth-md: 1px;
122
- $kfw-base-borderwidth-lg: 0.125rem;
122
+ $kfw-base-borderwidth-lg: 2px;
123
123
  $kfw-base-fontweight-regular: 400;
124
124
  $kfw-base-fontweight-medium: 500;
125
125
  $kfw-base-letterspacing-tight: -0.5px;
126
126
  $kfw-base-letterspacing-normal: 0;
127
127
  $kfw-base-letterspacing-wide: 0.5px;
128
128
  $kfw-base-letterspacing-wider: 1px;
129
- $kfw-base-layout-breakpoint-xs: 20rem;
130
- $kfw-base-layout-breakpoint-sm: 37.5rem;
131
- $kfw-base-layout-breakpoint-md: 52.5rem;
132
- $kfw-base-layout-breakpoint-lg: 60rem;
133
- $kfw-base-layout-breakpoint-xl: 80rem;
129
+ $kfw-base-layout-breakpoint-xs: 320px;
130
+ $kfw-base-layout-breakpoint-sm: 600px;
131
+ $kfw-base-layout-breakpoint-md: 840px;
132
+ $kfw-base-layout-breakpoint-lg: 960px;
133
+ $kfw-base-layout-breakpoint-xl: 1280px;
134
134
  $kfw-base-layout-container-sm: 56rem;
135
135
  $kfw-base-layout-container-md: 67.5rem;
136
136
  $kfw-base-layout-container-lg: 80rem;
@@ -243,16 +243,16 @@ $kfw-lineheight-heading: 1.3;
243
243
  $kfw-lineheight-heading-5: 1.333;
244
244
  $kfw-borderradius: 0.25rem;
245
245
  $kfw-borderwidth: 1px;
246
- $kfw-borderwidth-large: 0.125rem;
247
- $kfw-focusring-outline-width: 0.125rem;
248
- $kfw-focusring-outline-offset: 0.125rem;
246
+ $kfw-borderwidth-large: 2px;
247
+ $kfw-focusring-outline-width: 2px;
248
+ $kfw-focusring-outline-offset: 2px;
249
249
  $kfw-focusring-outline-style: dashed;
250
250
  $kfw-fontweight: 400;
251
251
  $kfw-fontweight-bold: 500;
252
- $kfw-breakpoint-mobile: 37.5rem;
253
- $kfw-breakpoint-tablet: 52.5rem;
254
- $kfw-breakpoint-desktop: 60rem;
255
- $kfw-breakpoint-desktop-large: 80rem;
252
+ $kfw-breakpoint-mobile: 600px;
253
+ $kfw-breakpoint-tablet: 840px;
254
+ $kfw-breakpoint-desktop: 960px;
255
+ $kfw-breakpoint-desktop-large: 1280px;
256
256
  $kfw-contentwrapper-narrow: 56rem;
257
257
  $kfw-contentwrapper-basic: 67.5rem;
258
258
  $kfw-contentwrapper-extended: 80rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openkfw/design-tokens",
3
- "version": "0.4.1",
3
+ "version": "0.4.2",
4
4
  "description": "The source of truth for KfW-branded digital products.",
5
5
  "files": [
6
6
  "output",
@@ -35,13 +35,13 @@
35
35
  "node": ">= 22.0.0"
36
36
  },
37
37
  "devDependencies": {
38
- "@eslint/js": "^9.36.0",
38
+ "@eslint/js": "^9.37.0",
39
39
  "@tsconfig/node22": "^22.0.2",
40
40
  "@types/lodash": "^4.17.20",
41
41
  "@types/node": "^22.18.8",
42
42
  "concurrently": "^9.2.1",
43
43
  "deep-get-set-ts": "^1.1.2",
44
- "eslint": "^9.36.0",
44
+ "eslint": "^9.37.0",
45
45
  "json5": "^2.2.3",
46
46
  "jsoneditor-cli": "^1.1.0",
47
47
  "lodash": "4.17.21",