@openkfw/design-tokens 0.3.0 → 0.4.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.
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.3.0
2
+ * KfW Design Tokens v0.4.0
3
3
  * Copyright 2025
4
4
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
  */
@@ -150,9 +150,9 @@ export const KfwBaseColorYellow500 = {
150
150
  hex: "#eac80b",
151
151
  };
152
152
  export const KfwBaseFontfamilySans =
153
- "'KfW Centro Sans', Arial, Helvetica Neue, Helvetica, sans-serif";
153
+ "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif";
154
154
  export const KfwBaseFontfamilyMono =
155
- 'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace';
155
+ "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
156
156
  export const KfwBaseSpaceStatic5 = "0.3125rem";
157
157
  export const KfwBaseSpaceStatic10 = "0.625rem";
158
158
  export const KfwBaseSpaceStatic15 = "0.9375rem";
@@ -165,31 +165,31 @@ export const KfwBaseSpaceStatic50 = "3.125rem";
165
165
  export const KfwBaseSpaceStatic60 = "3.75rem";
166
166
  export const KfwBaseSpaceFluid5Min = "0.3125rem";
167
167
  export const KfwBaseSpaceFluid5Max = "0.625rem";
168
- export const KfwBaseSpaceFluid5Val = "0.2083125rem";
168
+ export const KfwBaseSpaceFluid5Val = "0.588px";
169
169
  export const KfwBaseSpaceFluid10Min = "0.625rem";
170
170
  export const KfwBaseSpaceFluid10Max = "0.9375rem";
171
- export const KfwBaseSpaceFluid10Val = "0.5208125rem";
171
+ export const KfwBaseSpaceFluid10Val = "0.34925rem";
172
172
  export const KfwBaseSpaceFluid15Min = "0.9375rem";
173
173
  export const KfwBaseSpaceFluid15Max = "1.25rem";
174
- export const KfwBaseSpaceFluid15Val = "0.8333125rem";
174
+ export const KfwBaseSpaceFluid15Val = "0.66175rem";
175
175
  export const KfwBaseSpaceFluid20Min = "1.25rem";
176
176
  export const KfwBaseSpaceFluid20Max = "1.5625rem";
177
- export const KfwBaseSpaceFluid20Val = "1.1458125rem";
177
+ export const KfwBaseSpaceFluid20Val = "0.97425rem";
178
178
  export const KfwBaseSpaceFluid25Min = "1.5625rem";
179
179
  export const KfwBaseSpaceFluid25Max = "1.875rem";
180
- export const KfwBaseSpaceFluid25Val = "1.4583125rem";
180
+ export const KfwBaseSpaceFluid25Val = "1.28675rem";
181
181
  export const KfwBaseSpaceFluid30Min = "1.875rem";
182
182
  export const KfwBaseSpaceFluid30Max = "2.1875rem";
183
- export const KfwBaseSpaceFluid30Val = "1.7708125rem";
183
+ export const KfwBaseSpaceFluid30Val = "1.59925rem";
184
184
  export const KfwBaseSpaceFluid35Min = "2.1875rem";
185
185
  export const KfwBaseSpaceFluid35Max = "2.5rem";
186
- export const KfwBaseSpaceFluid35Val = "2.0833125rem";
186
+ export const KfwBaseSpaceFluid35Val = "1.91175rem";
187
187
  export const KfwBaseSpaceFluid40Min = "2.5rem";
188
188
  export const KfwBaseSpaceFluid40Max = "3.125rem";
189
- export const KfwBaseSpaceFluid40Val = "2.2916875rem";
189
+ export const KfwBaseSpaceFluid40Val = "1.9485rem";
190
190
  export const KfwBaseSpaceFluid50Min = "3.125rem";
191
191
  export const KfwBaseSpaceFluid50Max = "3.75rem";
192
- export const KfwBaseSpaceFluid50Val = "2.916625rem";
192
+ export const KfwBaseSpaceFluid50Val = "2.5735rem";
193
193
  export const KfwBaseFontsizeStaticSm = "0.875rem";
194
194
  export const KfwBaseFontsizeStaticMd = "1rem";
195
195
  export const KfwBaseFontsizeStaticLg = "1.125rem";
@@ -203,31 +203,31 @@ export const KfwBaseFontsizeStatic7xl = "2rem";
203
203
  export const KfwBaseFontsizeStatic8xl = "2.25rem";
204
204
  export const KfwBaseFontsizeFluidSmMin = "0.875rem";
205
205
  export const KfwBaseFontsizeFluidSmMax = "1rem";
206
- export const KfwBaseFontsizeFluidSmVal = "0.8333125rem";
206
+ export const KfwBaseFontsizeFluidSmVal = "0.7646875rem";
207
207
  export const KfwBaseFontsizeFluidMdMin = "1rem";
208
208
  export const KfwBaseFontsizeFluidMdMax = "1.125rem";
209
- export const KfwBaseFontsizeFluidMdVal = "0.9583125rem";
209
+ export const KfwBaseFontsizeFluidMdVal = "0.8896875rem";
210
210
  export const KfwBaseFontsizeFluidLgMin = "1.125rem";
211
211
  export const KfwBaseFontsizeFluidLgMax = "1.25rem";
212
- export const KfwBaseFontsizeFluidLgVal = "1.0833125rem";
212
+ export const KfwBaseFontsizeFluidLgVal = "1.0146875rem";
213
213
  export const KfwBaseFontsizeFluidXlMin = "1.25rem";
214
214
  export const KfwBaseFontsizeFluidXlMax = "1.375rem";
215
- export const KfwBaseFontsizeFluidXlVal = "1.2083125rem";
215
+ export const KfwBaseFontsizeFluidXlVal = "1.1396875rem";
216
216
  export const KfwBaseFontsizeFluid2xlMin = "1.375rem";
217
217
  export const KfwBaseFontsizeFluid2xlMax = "1.5rem";
218
- export const KfwBaseFontsizeFluid2xlVal = "1.3333125rem";
218
+ export const KfwBaseFontsizeFluid2xlVal = "1.2646875rem";
219
219
  export const KfwBaseFontsizeFluid3xlMin = "1.5rem";
220
220
  export const KfwBaseFontsizeFluid3xlMax = "1.625rem";
221
- export const KfwBaseFontsizeFluid3xlVal = "1.4583125rem";
221
+ export const KfwBaseFontsizeFluid3xlVal = "1.3896875rem";
222
222
  export const KfwBaseFontsizeFluid4xlMin = "1.625rem";
223
223
  export const KfwBaseFontsizeFluid4xlMax = "1.75rem";
224
- export const KfwBaseFontsizeFluid4xlVal = "1.5833125rem";
224
+ export const KfwBaseFontsizeFluid4xlVal = "1.5146875rem";
225
225
  export const KfwBaseFontsizeFluid5xlMin = "1.75rem";
226
226
  export const KfwBaseFontsizeFluid5xlMax = "2rem";
227
- export const KfwBaseFontsizeFluid5xlVal = "1.666625rem";
227
+ export const KfwBaseFontsizeFluid5xlVal = "1.5294375rem";
228
228
  export const KfwBaseFontsizeFluid6xlMin = "1.875rem";
229
229
  export const KfwBaseFontsizeFluid6xlMax = "2.25rem";
230
- export const KfwBaseFontsizeFluid6xlVal = "1.75rem";
230
+ export const KfwBaseFontsizeFluid6xlVal = "1.544125rem";
231
231
  export const KfwBaseLineheight2xs = 1.2;
232
232
  export const KfwBaseLineheightXs = 1.3;
233
233
  export const KfwBaseLineheightSm = 1.333;
@@ -258,7 +258,7 @@ export const KfwBaseLayoutSafezoneStaticMd = "1.25rem";
258
258
  export const KfwBaseLayoutSafezoneStaticLg = "2.5rem";
259
259
  export const KfwBaseLayoutSafezoneFluidMin = "1.25rem";
260
260
  export const KfwBaseLayoutSafezoneFluidMax = "2.5rem";
261
- export const KfwBaseLayoutSafezoneFluidVal = "-0.8333125rem";
261
+ export const KfwBaseLayoutSafezoneFluidVal = "0.1470625rem";
262
262
  export const KfwBaseLayoutGridcolumn1 = 1;
263
263
  export const KfwBaseLayoutGridcolumn2 = 2;
264
264
  export const KfwBaseLayoutGridcolumn3 = 3;
@@ -273,12 +273,12 @@ export const KfwBaseLayoutGridgapStaticLg = "1.625rem";
273
273
  export const KfwBaseLayoutGridgapStaticXl = "2.25rem";
274
274
  export const KfwBaseLayoutGridgapFluidMin = "0.75rem";
275
275
  export const KfwBaseLayoutGridgapFluidMax = "2.25rem";
276
- export const KfwBaseLayoutGridgapFluidVal = "0.25rem";
276
+ export const KfwBaseLayoutGridgapFluidVal = "-0.5735rem";
277
277
  export const KfwColorFn = {
278
278
  colorSpace: "srgb",
279
279
  components: [0, 0.3529, 0.549],
280
280
  hex: "#005a8c",
281
- };
281
+ }; // Main interaction color for buttons and links
282
282
  export const KfwColorFnActive = {
283
283
  colorSpace: "srgb",
284
284
  components: [0, 0.2667, 0.4314],
@@ -303,7 +303,7 @@ export const KfwColorText = {
303
303
  colorSpace: "srgb",
304
304
  components: [0.1765, 0.1922, 0.2039],
305
305
  hex: "#2d3134",
306
- };
306
+ }; // Main text color for body
307
307
  export const KfwColorTextOnDarkBg = {
308
308
  colorSpace: "srgb",
309
309
  components: [1, 1, 1],
@@ -323,7 +323,7 @@ export const KfwColorBackground = {
323
323
  colorSpace: "srgb",
324
324
  components: [1, 1, 1],
325
325
  hex: "#ffffff",
326
- };
326
+ }; // Main background color for body
327
327
  export const KfwColorBackgroundSubtle = {
328
328
  colorSpace: "srgb",
329
329
  components: [0.9647, 0.9686, 0.9725],
@@ -495,22 +495,23 @@ export const KfwColorIconDisabledSecondary = {
495
495
  hex: "#94eb90",
496
496
  };
497
497
  export const KfwFontfamily =
498
- "'KfW Centro Sans', Arial, Helvetica Neue, Helvetica, sans-serif";
498
+ "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif";
499
499
  export const KfwFontfamilyCode =
500
- 'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace';
500
+ "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
501
501
  export const KfwSpaceXsmall = "0.625rem";
502
502
  export const KfwSpaceSmall = "1.25rem";
503
503
  export const KfwSpaceMedium = "1.875rem";
504
504
  export const KfwSpaceLargeMin = "2.1875rem";
505
505
  export const KfwSpaceLargeMax = "2.5rem";
506
- export const KfwSpaceLargeVal = "2.0833125rem";
506
+ export const KfwSpaceLargeVal = "1.91175rem";
507
507
  export const KfwSpaceBigMin = "3.125rem";
508
508
  export const KfwSpaceBigMax = "3.75rem";
509
- export const KfwSpaceBigVal = "2.916625rem";
509
+ export const KfwSpaceBigVal = "2.5735rem";
510
510
  export const KfwFontspace = "1.25rem";
511
- export const KfwFontspaceIntroduction = "1.25rem";
512
- export const KfwFontspaceSmall = "0.3125rem";
513
- export const KfwFontspaceLarge = "0.9375rem";
511
+ export const KfwFontspace2xsmall = "0.3125rem";
512
+ export const KfwFontspaceXsmall = "0.625rem";
513
+ export const KfwFontspaceSmall = "0.9375rem";
514
+ export const KfwFontspaceLarge = "1.875rem";
514
515
  export const KfwFontspaceHeading1 = "1.25rem";
515
516
  export const KfwFontspaceHeading2 = "1.25rem";
516
517
  export const KfwFontspaceHeading3 = "0.625rem";
@@ -523,16 +524,16 @@ export const KfwFontsizeSmall = "0.875rem";
523
524
  export const KfwFontsizeLarge = "1.125rem";
524
525
  export const KfwFontsizeHeading1Min = "1.875rem";
525
526
  export const KfwFontsizeHeading1Max = "2.25rem";
526
- export const KfwFontsizeHeading1Val = "1.75rem";
527
+ export const KfwFontsizeHeading1Val = "1.544125rem";
527
528
  export const KfwFontsizeHeading2Min = "1.75rem";
528
529
  export const KfwFontsizeHeading2Max = "2rem";
529
- export const KfwFontsizeHeading2Val = "1.666625rem";
530
+ export const KfwFontsizeHeading2Val = "1.5294375rem";
530
531
  export const KfwFontsizeHeading3Min = "1.5rem";
531
532
  export const KfwFontsizeHeading3Max = "1.625rem";
532
- export const KfwFontsizeHeading3Val = "1.4583125rem";
533
+ export const KfwFontsizeHeading3Val = "1.3896875rem";
533
534
  export const KfwFontsizeHeading4Min = "1.25rem";
534
535
  export const KfwFontsizeHeading4Max = "1.375rem";
535
- export const KfwFontsizeHeading4Val = "1.2083125rem";
536
+ export const KfwFontsizeHeading4Val = "1.1396875rem";
536
537
  export const KfwFontsizeHeading5 = "1.125rem";
537
538
  export const KfwFontsizeHeading6 = "1rem";
538
539
  export const KfwLineheight = 1.4;
@@ -540,6 +541,8 @@ export const KfwLineheightList = 1.5;
540
541
  export const KfwLineheightHeading = 1.3;
541
542
  export const KfwLineheightHeading5 = 1.333;
542
543
  export const KfwBorderradius = "0.25rem";
544
+ export const KfwBorderwidth = "1px";
545
+ export const KfwBorderwidthLarge = "0.125rem";
543
546
  export const KfwFocusringOutlineWidth = "0.125rem";
544
547
  export const KfwFocusringOutlineOffset = "0.125rem";
545
548
  export const KfwFocusringOutlineStyle = "dashed";
@@ -548,9 +551,10 @@ export const KfwFontweightBold = 500;
548
551
  export const KfwBreakpointMobile = "37.5rem";
549
552
  export const KfwBreakpointTablet = "52.5rem";
550
553
  export const KfwBreakpointDesktop = "60rem";
554
+ export const KfwBreakpointDesktopLarge = "80rem";
551
555
  export const KfwContentwrapperNarrow = "56rem";
552
556
  export const KfwContentwrapperBasic = "67.5rem";
553
557
  export const KfwContentwrapperExtended = "80rem";
554
558
  export const KfwSafezoneMin = "1.25rem";
555
559
  export const KfwSafezoneMax = "2.5rem";
556
- export const KfwSafezoneVal = "-0.8333125rem";
560
+ export const KfwSafezoneVal = "0.1470625rem";
@@ -1,5 +1,5 @@
1
1
 
2
- // KfW Design Tokens v0.3.0
2
+ // KfW Design Tokens v0.4.0
3
3
  // Copyright 2025
4
4
  // Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
5
5
 
@@ -31,8 +31,8 @@ $kfw-base-color-violet-400: #9598e0;
31
31
  $kfw-base-color-violet-500: #686fc8;
32
32
  $kfw-base-color-red-400: #c80538;
33
33
  $kfw-base-color-yellow-500: #eac80b;
34
- $kfw-base-fontfamily-sans: 'KfW Centro Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
35
- $kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace;
34
+ $kfw-base-fontfamily-sans: 'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
35
+ $kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
36
36
  $kfw-base-space-static-5: 0.3125rem;
37
37
  $kfw-base-space-static-10: 0.625rem;
38
38
  $kfw-base-space-static-15: 0.9375rem;
@@ -45,31 +45,31 @@ $kfw-base-space-static-50: 3.125rem;
45
45
  $kfw-base-space-static-60: 3.75rem;
46
46
  $kfw-base-space-fluid-5-min: 0.3125rem;
47
47
  $kfw-base-space-fluid-5-max: 0.625rem;
48
- $kfw-base-space-fluid-5-val: 0.521vi + 0.2083125rem;
48
+ $kfw-base-space-fluid-5-val: 0.735vi + 0.588px;
49
49
  $kfw-base-space-fluid-10-min: 0.625rem;
50
50
  $kfw-base-space-fluid-10-max: 0.9375rem;
51
- $kfw-base-space-fluid-10-val: 0.521vi + 0.5208125rem;
51
+ $kfw-base-space-fluid-10-val: 0.735vi + 0.34925rem;
52
52
  $kfw-base-space-fluid-15-min: 0.9375rem;
53
53
  $kfw-base-space-fluid-15-max: 1.25rem;
54
- $kfw-base-space-fluid-15-val: 0.521vi + 0.8333125rem;
54
+ $kfw-base-space-fluid-15-val: 0.735vi + 0.66175rem;
55
55
  $kfw-base-space-fluid-20-min: 1.25rem;
56
56
  $kfw-base-space-fluid-20-max: 1.5625rem;
57
- $kfw-base-space-fluid-20-val: 0.521vi + 1.1458125rem;
57
+ $kfw-base-space-fluid-20-val: 0.735vi + 0.97425rem;
58
58
  $kfw-base-space-fluid-25-min: 1.5625rem;
59
59
  $kfw-base-space-fluid-25-max: 1.875rem;
60
- $kfw-base-space-fluid-25-val: 0.521vi + 1.4583125rem;
60
+ $kfw-base-space-fluid-25-val: 0.735vi + 1.28675rem;
61
61
  $kfw-base-space-fluid-30-min: 1.875rem;
62
62
  $kfw-base-space-fluid-30-max: 2.1875rem;
63
- $kfw-base-space-fluid-30-val: 0.521vi + 1.7708125rem;
63
+ $kfw-base-space-fluid-30-val: 0.735vi + 1.59925rem;
64
64
  $kfw-base-space-fluid-35-min: 2.1875rem;
65
65
  $kfw-base-space-fluid-35-max: 2.5rem;
66
- $kfw-base-space-fluid-35-val: 0.521vi + 2.0833125rem;
66
+ $kfw-base-space-fluid-35-val: 0.735vi + 1.91175rem;
67
67
  $kfw-base-space-fluid-40-min: 2.5rem;
68
68
  $kfw-base-space-fluid-40-max: 3.125rem;
69
- $kfw-base-space-fluid-40-val: 1.042vi + 2.2916875rem;
69
+ $kfw-base-space-fluid-40-val: 1.471vi + 1.9485rem;
70
70
  $kfw-base-space-fluid-50-min: 3.125rem;
71
71
  $kfw-base-space-fluid-50-max: 3.75rem;
72
- $kfw-base-space-fluid-50-val: 1.042vi + 2.916625rem;
72
+ $kfw-base-space-fluid-50-val: 1.471vi + 2.5735rem;
73
73
  $kfw-base-fontsize-static-sm: 0.875rem;
74
74
  $kfw-base-fontsize-static-md: 1rem;
75
75
  $kfw-base-fontsize-static-lg: 1.125rem;
@@ -83,31 +83,31 @@ $kfw-base-fontsize-static-7xl: 2rem;
83
83
  $kfw-base-fontsize-static-8xl: 2.25rem;
84
84
  $kfw-base-fontsize-fluid-sm-min: 0.875rem;
85
85
  $kfw-base-fontsize-fluid-sm-max: 1rem;
86
- $kfw-base-fontsize-fluid-sm-val: 0.208vi + 0.8333125rem;
86
+ $kfw-base-fontsize-fluid-sm-val: 0.294vi + 0.7646875rem;
87
87
  $kfw-base-fontsize-fluid-md-min: 1rem;
88
88
  $kfw-base-fontsize-fluid-md-max: 1.125rem;
89
- $kfw-base-fontsize-fluid-md-val: 0.208vi + 0.9583125rem;
89
+ $kfw-base-fontsize-fluid-md-val: 0.294vi + 0.8896875rem;
90
90
  $kfw-base-fontsize-fluid-lg-min: 1.125rem;
91
91
  $kfw-base-fontsize-fluid-lg-max: 1.25rem;
92
- $kfw-base-fontsize-fluid-lg-val: 0.208vi + 1.0833125rem;
92
+ $kfw-base-fontsize-fluid-lg-val: 0.294vi + 1.0146875rem;
93
93
  $kfw-base-fontsize-fluid-xl-min: 1.25rem;
94
94
  $kfw-base-fontsize-fluid-xl-max: 1.375rem;
95
- $kfw-base-fontsize-fluid-xl-val: 0.208vi + 1.2083125rem;
95
+ $kfw-base-fontsize-fluid-xl-val: 0.294vi + 1.1396875rem;
96
96
  $kfw-base-fontsize-fluid-2xl-min: 1.375rem;
97
97
  $kfw-base-fontsize-fluid-2xl-max: 1.5rem;
98
- $kfw-base-fontsize-fluid-2xl-val: 0.208vi + 1.3333125rem;
98
+ $kfw-base-fontsize-fluid-2xl-val: 0.294vi + 1.2646875rem;
99
99
  $kfw-base-fontsize-fluid-3xl-min: 1.5rem;
100
100
  $kfw-base-fontsize-fluid-3xl-max: 1.625rem;
101
- $kfw-base-fontsize-fluid-3xl-val: 0.208vi + 1.4583125rem;
101
+ $kfw-base-fontsize-fluid-3xl-val: 0.294vi + 1.3896875rem;
102
102
  $kfw-base-fontsize-fluid-4xl-min: 1.625rem;
103
103
  $kfw-base-fontsize-fluid-4xl-max: 1.75rem;
104
- $kfw-base-fontsize-fluid-4xl-val: 0.208vi + 1.5833125rem;
104
+ $kfw-base-fontsize-fluid-4xl-val: 0.294vi + 1.5146875rem;
105
105
  $kfw-base-fontsize-fluid-5xl-min: 1.75rem;
106
106
  $kfw-base-fontsize-fluid-5xl-max: 2rem;
107
- $kfw-base-fontsize-fluid-5xl-val: 0.417vi + 1.666625rem;
107
+ $kfw-base-fontsize-fluid-5xl-val: 0.588vi + 1.5294375rem;
108
108
  $kfw-base-fontsize-fluid-6xl-min: 1.875rem;
109
109
  $kfw-base-fontsize-fluid-6xl-max: 2.25rem;
110
- $kfw-base-fontsize-fluid-6xl-val: 0.625vi + 1.75rem;
110
+ $kfw-base-fontsize-fluid-6xl-val: 0.882vi + 1.544125rem;
111
111
  $kfw-base-lineheight-2xs: 1.2;
112
112
  $kfw-base-lineheight-xs: 1.3;
113
113
  $kfw-base-lineheight-sm: 1.333;
@@ -138,7 +138,7 @@ $kfw-base-layout-safezone-static-md: 1.25rem;
138
138
  $kfw-base-layout-safezone-static-lg: 2.5rem;
139
139
  $kfw-base-layout-safezone-fluid-min: 1.25rem;
140
140
  $kfw-base-layout-safezone-fluid-max: 2.5rem;
141
- $kfw-base-layout-safezone-fluid-val: 5.556vi - 0.8333125rem;
141
+ $kfw-base-layout-safezone-fluid-val: 2.941vi + 0.1470625rem;
142
142
  $kfw-base-layout-gridcolumn-1: 1;
143
143
  $kfw-base-layout-gridcolumn-2: 2;
144
144
  $kfw-base-layout-gridcolumn-3: 3;
@@ -153,17 +153,17 @@ $kfw-base-layout-gridgap-static-lg: 1.625rem;
153
153
  $kfw-base-layout-gridgap-static-xl: 2.25rem;
154
154
  $kfw-base-layout-gridgap-fluid-min: 0.75rem;
155
155
  $kfw-base-layout-gridgap-fluid-max: 2.25rem;
156
- $kfw-base-layout-gridgap-fluid-val: 2.5vi + 0.25rem;
157
- $kfw-color-fn: #005a8c;
156
+ $kfw-base-layout-gridgap-fluid-val: 3.529vi - 0.5735rem;
157
+ $kfw-color-fn: #005a8c; // Main interaction color for buttons and links
158
158
  $kfw-color-fn-active: #00446e;
159
159
  $kfw-color-fn-inactive: #a1adb5;
160
160
  $kfw-color-fn-border: #2d3134;
161
161
  $kfw-color-fn-label: #2d3134;
162
- $kfw-color-text: #2d3134;
162
+ $kfw-color-text: #2d3134; // Main text color for body
163
163
  $kfw-color-text-on-dark-bg: #ffffff;
164
164
  $kfw-color-text-on-disabled: #ffffff;
165
165
  $kfw-color-text-headline-on-dark-bg: #b7f9aa;
166
- $kfw-color-background: #ffffff;
166
+ $kfw-color-background: #ffffff; // Main background color for body
167
167
  $kfw-color-background-subtle: #f6f7f8;
168
168
  $kfw-color-background-disabled: #a1adb5;
169
169
  $kfw-color-background-light-blue: #e9f5fb;
@@ -197,21 +197,22 @@ $kfw-color-icon: #005a8c;
197
197
  $kfw-color-icon-secondary: #54b3e2;
198
198
  $kfw-color-icon-disabled: #398357;
199
199
  $kfw-color-icon-disabled-secondary: #94eb90;
200
- $kfw-fontfamily: 'KfW Centro Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
201
- $kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace;
200
+ $kfw-fontfamily: 'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
201
+ $kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
202
202
  $kfw-space-xsmall: 0.625rem;
203
203
  $kfw-space-small: 1.25rem;
204
204
  $kfw-space-medium: 1.875rem;
205
205
  $kfw-space-large-min: 2.1875rem;
206
206
  $kfw-space-large-max: 2.5rem;
207
- $kfw-space-large-val: 0.521vi + 2.0833125rem;
207
+ $kfw-space-large-val: 0.735vi + 1.91175rem;
208
208
  $kfw-space-big-min: 3.125rem;
209
209
  $kfw-space-big-max: 3.75rem;
210
- $kfw-space-big-val: 1.042vi + 2.916625rem;
210
+ $kfw-space-big-val: 1.471vi + 2.5735rem;
211
211
  $kfw-fontspace: 1.25rem;
212
- $kfw-fontspace-introduction: 1.25rem;
213
- $kfw-fontspace-small: 0.3125rem;
214
- $kfw-fontspace-large: 0.9375rem;
212
+ $kfw-fontspace-2xsmall: 0.3125rem;
213
+ $kfw-fontspace-xsmall: 0.625rem;
214
+ $kfw-fontspace-small: 0.9375rem;
215
+ $kfw-fontspace-large: 1.875rem;
215
216
  $kfw-fontspace-heading-1: 1.25rem;
216
217
  $kfw-fontspace-heading-2: 1.25rem;
217
218
  $kfw-fontspace-heading-3: 0.625rem;
@@ -224,16 +225,16 @@ $kfw-fontsize-small: 0.875rem;
224
225
  $kfw-fontsize-large: 1.125rem;
225
226
  $kfw-fontsize-heading-1-min: 1.875rem;
226
227
  $kfw-fontsize-heading-1-max: 2.25rem;
227
- $kfw-fontsize-heading-1-val: 0.625vi + 1.75rem;
228
+ $kfw-fontsize-heading-1-val: 0.882vi + 1.544125rem;
228
229
  $kfw-fontsize-heading-2-min: 1.75rem;
229
230
  $kfw-fontsize-heading-2-max: 2rem;
230
- $kfw-fontsize-heading-2-val: 0.417vi + 1.666625rem;
231
+ $kfw-fontsize-heading-2-val: 0.588vi + 1.5294375rem;
231
232
  $kfw-fontsize-heading-3-min: 1.5rem;
232
233
  $kfw-fontsize-heading-3-max: 1.625rem;
233
- $kfw-fontsize-heading-3-val: 0.208vi + 1.4583125rem;
234
+ $kfw-fontsize-heading-3-val: 0.294vi + 1.3896875rem;
234
235
  $kfw-fontsize-heading-4-min: 1.25rem;
235
236
  $kfw-fontsize-heading-4-max: 1.375rem;
236
- $kfw-fontsize-heading-4-val: 0.208vi + 1.2083125rem;
237
+ $kfw-fontsize-heading-4-val: 0.294vi + 1.1396875rem;
237
238
  $kfw-fontsize-heading-5: 1.125rem;
238
239
  $kfw-fontsize-heading-6: 1rem;
239
240
  $kfw-lineheight: 1.4;
@@ -241,6 +242,8 @@ $kfw-lineheight-list: 1.5;
241
242
  $kfw-lineheight-heading: 1.3;
242
243
  $kfw-lineheight-heading-5: 1.333;
243
244
  $kfw-borderradius: 0.25rem;
245
+ $kfw-borderwidth: 1px;
246
+ $kfw-borderwidth-large: 0.125rem;
244
247
  $kfw-focusring-outline-width: 0.125rem;
245
248
  $kfw-focusring-outline-offset: 0.125rem;
246
249
  $kfw-focusring-outline-style: dashed;
@@ -249,9 +252,10 @@ $kfw-fontweight-bold: 500;
249
252
  $kfw-breakpoint-mobile: 37.5rem;
250
253
  $kfw-breakpoint-tablet: 52.5rem;
251
254
  $kfw-breakpoint-desktop: 60rem;
255
+ $kfw-breakpoint-desktop-large: 80rem;
252
256
  $kfw-contentwrapper-narrow: 56rem;
253
257
  $kfw-contentwrapper-basic: 67.5rem;
254
258
  $kfw-contentwrapper-extended: 80rem;
255
259
  $kfw-safezone-min: 1.25rem;
256
260
  $kfw-safezone-max: 2.5rem;
257
- $kfw-safezone-val: 5.556vi - 0.8333125rem;
261
+ $kfw-safezone-val: 2.941vi + 0.1470625rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openkfw/design-tokens",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "The source of truth for KfW-branded digital products.",
5
5
  "files": [
6
6
  "output",
@@ -38,18 +38,18 @@
38
38
  "@eslint/js": "^9.36.0",
39
39
  "@tsconfig/node22": "^22.0.2",
40
40
  "@types/lodash": "^4.17.20",
41
- "@types/node": "^22.18.6",
41
+ "@types/node": "^22.18.7",
42
42
  "concurrently": "^9.2.1",
43
- "deep-get-set-ts": "^1.1.1",
43
+ "deep-get-set-ts": "^1.1.2",
44
44
  "eslint": "^9.36.0",
45
45
  "json5": "^2.2.3",
46
46
  "jsoneditor-cli": "^1.1.0",
47
47
  "lodash": "4.17.21",
48
48
  "prettier": "^3.6.2",
49
49
  "style-dictionary": "^5.0.4",
50
- "tsx": "^4.20.5",
50
+ "tsx": "^4.20.6",
51
51
  "typescript": "^5.9.2",
52
- "typescript-eslint": "^8.44.1",
53
- "npm-check-updates": "^18.3.0"
52
+ "typescript-eslint": "^8.45.0",
53
+ "npm-check-updates": "^19.0.0"
54
54
  }
55
55
  }