@openkfw/design-tokens 1.0.2 → 1.0.4

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 (29) hide show
  1. package/README.md +2 -148
  2. package/index.d.ts +1 -0
  3. package/index.js +1 -0
  4. package/package.json +29 -39
  5. package/LICENSE +0 -386
  6. package/demo/dist/css/style.min.css +0 -1
  7. package/demo/scripts/build-custom-media.js +0 -39
  8. package/demo/scripts/build-icons-css.js +0 -41
  9. package/demo/scripts/map-icons.js +0 -348
  10. package/demo/scripts/postcss.svg-load-plugin.js +0 -96
  11. package/demo/src/App.ts +0 -12
  12. package/demo/src/ColorPalette.ts +0 -84
  13. package/demo/src/Navigation.ts +0 -55
  14. package/demo/src/StickyHeader.ts +0 -40
  15. package/demo/src/main.ts +0 -1
  16. package/demo/src/vendor/gen-custom-media.css +0 -12
  17. package/output/README.md +0 -38
  18. package/output/css/kfw-design-tokens.light.css +0 -293
  19. package/output/figma/kfw-design-tokens.light.json +0 -736
  20. package/output/js/kfw-design-tokens.d.ts +0 -311
  21. package/output/js/kfw-design-tokens.light.js +0 -293
  22. package/output/json/kfw-design-tokens.json +0 -8016
  23. package/output/penpot/kfw-design-tokens.light.json +0 -736
  24. package/output/scss/kfw-design-tokens.light.scss +0 -288
  25. package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css +0 -293
  26. package/output/web_thirdparty_16px/js/kfw-design-tokens.light.d.ts +0 -559
  27. package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js +0 -293
  28. package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss +0 -288
  29. package/tokens/tokens.json +0 -506
package/output/scss/kfw-design-tokens.light.scss DELETED
@@ -1,288 +0,0 @@
1
-
2
- // KfW Design Tokens v1.0.2 | MPL-2.0 | https://github.com/openkfw/design-tokens
3
-
4
- $kfw-base-color-blue-100: #e9f5fb;
5
- $kfw-base-color-blue-400: #54b3e2;
6
- $kfw-base-color-blue-500: #007abc;
7
- $kfw-base-color-blue-600: #005a8c;
8
- $kfw-base-color-blue-700: #00446e;
9
- $kfw-base-color-blue-800: #00375b;
10
- $kfw-base-color-green-100: #ecfded;
11
- $kfw-base-color-green-300: #b7f9aa;
12
- $kfw-base-color-green-400: #94eb90;
13
- $kfw-base-color-green-700: #398357;
14
- $kfw-base-color-white-90: #ffffffe6;
15
- $kfw-base-color-white-95: #fffffff2;
16
- $kfw-base-color-white: #fff;
17
- $kfw-base-color-gray-50: #f6f7f8;
18
- $kfw-base-color-gray-100: #eef0f2;
19
- $kfw-base-color-gray-200: #d8dfe3;
20
- $kfw-base-color-gray-300: #a1adb5;
21
- $kfw-base-color-gray-400: #6d767d;
22
- $kfw-base-color-gray-500-10: #41484c1a;
23
- $kfw-base-color-gray-500-30: #41484c4d;
24
- $kfw-base-color-gray-500-90: #41484ce6;
25
- $kfw-base-color-gray-500: #41484c;
26
- $kfw-base-color-gray-600: #2d3134;
27
- $kfw-base-color-violet-400: #a455c5;
28
- $kfw-base-color-violet-500: #643179;
29
- $kfw-base-color-red-400: #c80538;
30
- $kfw-base-color-yellow-500: #eac80b;
31
- $kfw-base-fontfamily-sans: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
32
- $kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
33
- $kfw-base-space-static-5: 0.5rem;
34
- $kfw-base-space-static-10: 1rem;
35
- $kfw-base-space-static-15: 1.5rem;
36
- $kfw-base-space-static-20: 2rem;
37
- $kfw-base-space-static-25: 2.5rem;
38
- $kfw-base-space-static-30: 3rem;
39
- $kfw-base-space-static-35: 3.5rem;
40
- $kfw-base-space-static-40: 4rem;
41
- $kfw-base-space-static-48: 4.8rem;
42
- $kfw-base-space-static-50: 5rem;
43
- $kfw-base-space-static-60: 6rem;
44
- $kfw-base-space-fluid-5-min: 0.5rem;
45
- $kfw-base-space-fluid-5-max: 1rem;
46
- $kfw-base-space-fluid-5-val: 0.735vi + 0.588px;
47
- $kfw-base-space-fluid-10-min: 1rem;
48
- $kfw-base-space-fluid-10-max: 1.5rem;
49
- $kfw-base-space-fluid-10-val: 0.735vi + 0.5588rem;
50
- $kfw-base-space-fluid-15-min: 1.5rem;
51
- $kfw-base-space-fluid-15-max: 2rem;
52
- $kfw-base-space-fluid-15-val: 0.735vi + 1.0588rem;
53
- $kfw-base-space-fluid-20-min: 2rem;
54
- $kfw-base-space-fluid-20-max: 2.5rem;
55
- $kfw-base-space-fluid-20-val: 0.735vi + 1.5588rem;
56
- $kfw-base-space-fluid-25-min: 2.5rem;
57
- $kfw-base-space-fluid-25-max: 3rem;
58
- $kfw-base-space-fluid-25-val: 0.735vi + 2.0588rem;
59
- $kfw-base-space-fluid-30-min: 3rem;
60
- $kfw-base-space-fluid-30-max: 3.5rem;
61
- $kfw-base-space-fluid-30-val: 0.735vi + 2.5588rem;
62
- $kfw-base-space-fluid-35-min: 3.5rem;
63
- $kfw-base-space-fluid-35-max: 4rem;
64
- $kfw-base-space-fluid-35-val: 0.735vi + 3.0588rem;
65
- $kfw-base-space-fluid-40-min: 4rem;
66
- $kfw-base-space-fluid-40-max: 5rem;
67
- $kfw-base-space-fluid-40-val: 1.471vi + 3.1176rem;
68
- $kfw-base-space-fluid-50-min: 5rem;
69
- $kfw-base-space-fluid-50-max: 6rem;
70
- $kfw-base-space-fluid-50-val: 1.471vi + 4.1176rem;
71
- $kfw-base-space-fluid-40-48-min: 4rem;
72
- $kfw-base-space-fluid-40-48-max: 4.8rem;
73
- $kfw-base-space-fluid-40-48-val: 1.471vi + 3.2941rem;
74
- $kfw-base-fontsize-static-sm: 1.4rem;
75
- $kfw-base-fontsize-static-md: 1.6rem;
76
- $kfw-base-fontsize-static-lg: 1.8rem;
77
- $kfw-base-fontsize-static-xl: 2rem;
78
- $kfw-base-fontsize-static-2xl: 2.2rem;
79
- $kfw-base-fontsize-static-3xl: 2.4rem;
80
- $kfw-base-fontsize-static-4xl: 2.5rem;
81
- $kfw-base-fontsize-static-5xl: 2.6rem;
82
- $kfw-base-fontsize-static-6xl: 2.8rem;
83
- $kfw-base-fontsize-static-7xl: 3rem;
84
- $kfw-base-fontsize-static-8xl: 3.2rem;
85
- $kfw-base-fontsize-static-9xl: 3.6rem;
86
- $kfw-base-fontsize-fluid-sm-min: 1.4rem;
87
- $kfw-base-fontsize-fluid-sm-max: 1.6rem;
88
- $kfw-base-fontsize-fluid-sm-val: 0.294vi + 1.2235rem;
89
- $kfw-base-fontsize-fluid-md-min: 1.6rem;
90
- $kfw-base-fontsize-fluid-md-max: 1.8rem;
91
- $kfw-base-fontsize-fluid-md-val: 0.294vi + 1.4235rem;
92
- $kfw-base-fontsize-fluid-lg-min: 1.8rem;
93
- $kfw-base-fontsize-fluid-lg-max: 2rem;
94
- $kfw-base-fontsize-fluid-lg-val: 0.294vi + 1.6235rem;
95
- $kfw-base-fontsize-fluid-xl-min: 2rem;
96
- $kfw-base-fontsize-fluid-xl-max: 2.2rem;
97
- $kfw-base-fontsize-fluid-xl-val: 0.294vi + 1.8235rem;
98
- $kfw-base-fontsize-fluid-xl-3xl-min: 2rem;
99
- $kfw-base-fontsize-fluid-xl-3xl-max: 2.4rem;
100
- $kfw-base-fontsize-fluid-xl-3xl-val: 0.588vi + 1.6471rem;
101
- $kfw-base-fontsize-fluid-2xl-min: 2.2rem;
102
- $kfw-base-fontsize-fluid-2xl-max: 2.4rem;
103
- $kfw-base-fontsize-fluid-2xl-val: 0.294vi + 2.0235rem;
104
- $kfw-base-fontsize-fluid-3xl-min: 2.4rem;
105
- $kfw-base-fontsize-fluid-3xl-max: 2.6rem;
106
- $kfw-base-fontsize-fluid-3xl-val: 0.294vi + 2.2235rem;
107
- $kfw-base-fontsize-fluid-4xl-min: 2.5rem;
108
- $kfw-base-fontsize-fluid-4xl-max: 3rem;
109
- $kfw-base-fontsize-fluid-4xl-val: 0.735vi + 2.0588rem;
110
- $kfw-base-fontsize-fluid-5xl-min: 2.6rem;
111
- $kfw-base-fontsize-fluid-5xl-max: 3rem;
112
- $kfw-base-fontsize-fluid-5xl-val: 0.588vi + 2.2471rem;
113
- $kfw-base-fontsize-fluid-6xl-min: 2.8rem;
114
- $kfw-base-fontsize-fluid-6xl-max: 3.2rem;
115
- $kfw-base-fontsize-fluid-6xl-val: 0.588vi + 2.4471rem;
116
- $kfw-base-fontsize-fluid-7xl-min: 3rem;
117
- $kfw-base-fontsize-fluid-7xl-max: 3.6rem;
118
- $kfw-base-fontsize-fluid-7xl-val: 0.882vi + 2.4706rem;
119
- $kfw-base-lineheight-2xs: 1.2;
120
- $kfw-base-lineheight-xs: 1.3;
121
- $kfw-base-lineheight-sm: 1.333;
122
- $kfw-base-lineheight-md: 1.4;
123
- $kfw-base-lineheight-lg: 1.45;
124
- $kfw-base-lineheight-xl: 1.5;
125
- $kfw-base-borderradius-sm: 2px;
126
- $kfw-base-borderradius-md: 4px;
127
- $kfw-base-borderradius-lg: 20px;
128
- $kfw-base-borderradius-circle: 9999px;
129
- $kfw-base-borderwidth-md: 1px;
130
- $kfw-base-borderwidth-lg: 2px;
131
- $kfw-base-fontweight-regular: 400;
132
- $kfw-base-fontweight-medium: 500;
133
- $kfw-base-wordspacing-normal: 0;
134
- $kfw-base-wordspacing-wide: 1.6px;
135
- $kfw-base-letterspacing-tight: -0.5px;
136
- $kfw-base-letterspacing-normal: 0;
137
- $kfw-base-letterspacing-wide: 0.5px;
138
- $kfw-base-letterspacing-wider: 1px;
139
- $kfw-base-offset: 2px;
140
- $kfw-base-layout-breakpoint-xs: 320px;
141
- $kfw-base-layout-breakpoint-sm: 600px;
142
- $kfw-base-layout-breakpoint-md: 840px;
143
- $kfw-base-layout-breakpoint-lg: 960px;
144
- $kfw-base-layout-breakpoint-xl: 1280px;
145
- $kfw-base-layout-container-sm: 89.6rem;
146
- $kfw-base-layout-container-md: 108rem;
147
- $kfw-base-layout-container-lg: 128rem;
148
- $kfw-base-layout-safezone-sm: 5.625vi;
149
- $kfw-base-layout-safezone-md: 6.667vi;
150
- $kfw-base-layout-safezone-lg: 7.5vi;
151
- $kfw-base-layout-safezone-xl: 0;
152
- $kfw-base-layout-gridgap-static-xs: 1.2rem;
153
- $kfw-base-layout-gridgap-static-sm: 1.8rem;
154
- $kfw-base-layout-gridgap-static-md: 2rem;
155
- $kfw-base-layout-gridgap-static-lg: 2.2rem;
156
- $kfw-base-layout-gridgap-static-xl: 2.6rem;
157
- $kfw-base-layout-gridgap-static-2xl: 3.6rem;
158
- $kfw-base-layout-gridgap-static-3xl: 4rem;
159
- $kfw-base-layout-gridgap-fluid-basic-min: 1.2rem;
160
- $kfw-base-layout-gridgap-fluid-basic-max: 3.6rem;
161
- $kfw-base-layout-gridgap-fluid-basic-val: 3.529vi - 0.9176rem;
162
- $kfw-base-layout-gridgap-fluid-large-min: 2rem;
163
- $kfw-base-layout-gridgap-fluid-large-max: 4rem;
164
- $kfw-base-layout-gridgap-fluid-large-val: 2.941vi + 0.2353rem;
165
- $kfw-base-layout-gridcolumn-1: 1;
166
- $kfw-base-layout-gridcolumn-2: 2;
167
- $kfw-base-layout-gridcolumn-3: 3;
168
- $kfw-base-layout-gridcolumn-4: 4;
169
- $kfw-base-layout-gridcolumn-6: 6;
170
- $kfw-base-layout-gridcolumn-8: 8;
171
- $kfw-base-layout-gridcolumn-10: 10;
172
- $kfw-base-layout-gridcolumn-12: 12;
173
- $kfw-color-fn: #005a8c; // Main interaction color for buttons and links (Blue 600)
174
- $kfw-color-fn-active: #00446e; // Main interaction color when active (e.g., hover, Blue 700)
175
- $kfw-color-fn-inactive: #a1adb5; // Interaction color when inactive (Gray 300)
176
- $kfw-color-fn-border: #2d3134; // Interaction border color (Gray 600)
177
- $kfw-color-fn-label: #2d3134; // Interaction label color (Gray 600)
178
- $kfw-color-text: #2d3134; // Main text color for body (Gray 600)
179
- $kfw-color-text-on-dark-bg: #fff; // Main text color on dark background (White)
180
- $kfw-color-text-headline-on-dark-bg: #b7f9aa; // Headline text color on dark background (Green 300)
181
- $kfw-color-text-on-disabled: #fff; // Text color on disabled (White)
182
- $kfw-color-background: #fff; // Main background color for body (White)
183
- $kfw-color-background-subtle: #f6f7f8; // Neutral (Gray 50)
184
- $kfw-color-background-disabled: #a1adb5; // Disabled (Gray 300)
185
- $kfw-color-background-light-blue: #e9f5fb; // Light blue (Blue 100)
186
- $kfw-color-background-light-green: #ecfded; // Light green (Green 100)
187
- $kfw-color-background-medium-green: #b7f9aa; // Green Medium (Green 300)
188
- $kfw-color-background-dark-blue: #00375b; // Dark blue (Blue 800)
189
- $kfw-color-background-dark-green: #398357; // Dark green (Green 700)
190
- $kfw-color-opaque-white-90: #ffffffe6; // White 90%
191
- $kfw-color-opaque-white-95: #fffffff2; // White 95%
192
- $kfw-color-opaque-gray-500-10: #41484c1a; // Gray 500 10%
193
- $kfw-color-opaque-gray-500-30: #41484c4d; // Gray 500 30%
194
- $kfw-color-opaque-gray-500-90: #41484ce6; // Gray 500 90%
195
- $kfw-color-state-danger: #c80538;
196
- $kfw-color-state-success: #398357;
197
- $kfw-color-state-warning: #a455c5;
198
- $kfw-color-status-red: #c80538;
199
- $kfw-color-status-yellow: #eac80b;
200
- $kfw-color-status-green: #398357;
201
- $kfw-color-line-6: #00446e;
202
- $kfw-color-line-7: #2d3134;
203
- $kfw-color-line-8: #a1adb5;
204
- $kfw-color-line-9: #005a8c;
205
- $kfw-color-line-10: #2d3134;
206
- $kfw-color-line-11: #b7f9aa;
207
- $kfw-color-line-12: #a1adb5;
208
- $kfw-color-product-container: #f6f7f8;
209
- $kfw-color-product-benefit: #007abc;
210
- $kfw-color-product-credit: #398357;
211
- $kfw-color-product-cooperation: #643179;
212
- $kfw-color-product-credit-benefit: #41484c;
213
- $kfw-color-icon: #005a8c;
214
- $kfw-color-icon-secondary: #54b3e2;
215
- $kfw-color-icon-disabled: #398357;
216
- $kfw-color-icon-disabled-secondary: #94eb90;
217
- $kfw-fontfamily: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
218
- $kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
219
- $kfw-space-tiny: 0.5rem;
220
- $kfw-space-xsmall: 1rem;
221
- $kfw-space-midSmall: 1.5rem;
222
- $kfw-space-small: 2rem;
223
- $kfw-space-medium: 3rem;
224
- $kfw-space-large-min: 3.5rem;
225
- $kfw-space-large-max: 4rem;
226
- $kfw-space-large-val: 0.735vi + 3.0588rem;
227
- $kfw-space-xlarge-min: 4rem;
228
- $kfw-space-xlarge-max: 4.8rem;
229
- $kfw-space-xlarge-val: 1.471vi + 3.2941rem;
230
- $kfw-space-big-min: 5rem;
231
- $kfw-space-big-max: 6rem;
232
- $kfw-space-big-val: 1.471vi + 4.1176rem;
233
- $kfw-fontsize: 1.6rem;
234
- $kfw-fontsize-introduction: 2rem;
235
- $kfw-fontsize-large: 1.8rem;
236
- $kfw-fontsize-small: 1.4rem;
237
- $kfw-fontsize-heading-1-min: 3rem;
238
- $kfw-fontsize-heading-1-max: 3.6rem;
239
- $kfw-fontsize-heading-1-val: 0.882vi + 2.4706rem;
240
- $kfw-fontsize-heading-2-min: 2.8rem;
241
- $kfw-fontsize-heading-2-max: 3.2rem;
242
- $kfw-fontsize-heading-2-val: 0.588vi + 2.4471rem;
243
- $kfw-fontsize-heading-3-min: 2.4rem;
244
- $kfw-fontsize-heading-3-max: 2.6rem;
245
- $kfw-fontsize-heading-3-val: 0.294vi + 2.2235rem;
246
- $kfw-fontsize-heading-4-min: 2rem;
247
- $kfw-fontsize-heading-4-max: 2.2rem;
248
- $kfw-fontsize-heading-4-val: 0.294vi + 1.8235rem;
249
- $kfw-fontsize-heading-5: 1.8rem;
250
- $kfw-fontsize-heading-6: 1.6rem;
251
- $kfw-lineheight: 1.4;
252
- $kfw-lineheight-large: 1.45;
253
- $kfw-lineheight-lightspeech: 1.5;
254
- $kfw-lineheight-heading: 1.3;
255
- $kfw-lineheight-heading-5: 1.333;
256
- $kfw-lineheight-small: 1.2;
257
- $kfw-borderradius: 4px;
258
- $kfw-borderradius-small: 2px;
259
- $kfw-borderradius-large: 20px;
260
- $kfw-borderradius-circle: 9999px;
261
- $kfw-borderwidth: 1px;
262
- $kfw-borderwidth-large: 2px;
263
- $kfw-borderstyle: solid;
264
- $kfw-focusring-outline-width: 2px;
265
- $kfw-focusring-outline-offset: 2px;
266
- $kfw-focusring-outline-style: dashed;
267
- $kfw-focusring-outline-color: #00446e;
268
- $kfw-focusring-outline-radius: 4px;
269
- $kfw-fontweight: 400;
270
- $kfw-fontweight-bold: 500;
271
- $kfw-wordspacing-lightspeech: 1.6px;
272
- $kfw-breakpoint-mobile: 600px;
273
- $kfw-breakpoint-tablet: 840px;
274
- $kfw-breakpoint-desktop: 960px;
275
- $kfw-breakpoint-desktop-large: 1280px;
276
- $kfw-contentwrapper-narrow: 89.6rem;
277
- $kfw-contentwrapper-basic: 108rem;
278
- $kfw-contentwrapper-extended: 128rem;
279
- $kfw-safezone-mobile: 5.625vi;
280
- $kfw-safezone-tablet: 6.667vi;
281
- $kfw-safezone-desktop: 7.5vi;
282
- $kfw-safezone-desktop-large: 0;
283
- $kfw-gridgap-basic-min: 1.2rem;
284
- $kfw-gridgap-basic-max: 3.6rem;
285
- $kfw-gridgap-basic-val: 3.529vi - 0.9176rem;
286
- $kfw-gridgap-large-min: 2rem;
287
- $kfw-gridgap-large-max: 4rem;
288
- $kfw-gridgap-large-val: 2.941vi + 0.2353rem;
package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css DELETED
@@ -1,293 +0,0 @@
1
- /**
2
- * KfW Design Tokens v1.0.2 | MPL-2.0 | https://github.com/openkfw/design-tokens
3
- */
4
-
5
- :root, :host { color-scheme: light; }
6
-
7
- :root, :host {
8
- --kfw-base-color-blue-100: #e9f5fb;
9
- --kfw-base-color-blue-400: #54b3e2;
10
- --kfw-base-color-blue-500: #007abc;
11
- --kfw-base-color-blue-600: #005a8c;
12
- --kfw-base-color-blue-700: #00446e;
13
- --kfw-base-color-blue-800: #00375b;
14
- --kfw-base-color-green-100: #ecfded;
15
- --kfw-base-color-green-300: #b7f9aa;
16
- --kfw-base-color-green-400: #94eb90;
17
- --kfw-base-color-green-700: #398357;
18
- --kfw-base-color-white-90: #ffffffe6;
19
- --kfw-base-color-white-95: #fffffff2;
20
- --kfw-base-color-white: #fff;
21
- --kfw-base-color-gray-50: #f6f7f8;
22
- --kfw-base-color-gray-100: #eef0f2;
23
- --kfw-base-color-gray-200: #d8dfe3;
24
- --kfw-base-color-gray-300: #a1adb5;
25
- --kfw-base-color-gray-400: #6d767d;
26
- --kfw-base-color-gray-500-10: #41484c1a;
27
- --kfw-base-color-gray-500-30: #41484c4d;
28
- --kfw-base-color-gray-500-90: #41484ce6;
29
- --kfw-base-color-gray-500: #41484c;
30
- --kfw-base-color-gray-600: #2d3134;
31
- --kfw-base-color-violet-400: #a455c5;
32
- --kfw-base-color-violet-500: #643179;
33
- --kfw-base-color-red-400: #c80538;
34
- --kfw-base-color-yellow-500: #eac80b;
35
- --kfw-base-fontfamily-sans: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
36
- --kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
37
- --kfw-base-space-static-5: 0.3125rem;
38
- --kfw-base-space-static-10: 0.625rem;
39
- --kfw-base-space-static-15: 0.9375rem;
40
- --kfw-base-space-static-20: 1.25rem;
41
- --kfw-base-space-static-25: 1.5625rem;
42
- --kfw-base-space-static-30: 1.875rem;
43
- --kfw-base-space-static-35: 2.1875rem;
44
- --kfw-base-space-static-40: 2.5rem;
45
- --kfw-base-space-static-48: 3rem;
46
- --kfw-base-space-static-50: 3.125rem;
47
- --kfw-base-space-static-60: 3.75rem;
48
- --kfw-base-space-fluid-5-min: 0.3125rem;
49
- --kfw-base-space-fluid-5-max: 0.625rem;
50
- --kfw-base-space-fluid-5-val: 0.735vi + 0.588px;
51
- --kfw-base-space-fluid-10-min: 0.625rem;
52
- --kfw-base-space-fluid-10-max: 0.9375rem;
53
- --kfw-base-space-fluid-10-val: 0.735vi + 0.3493rem;
54
- --kfw-base-space-fluid-15-min: 0.9375rem;
55
- --kfw-base-space-fluid-15-max: 1.25rem;
56
- --kfw-base-space-fluid-15-val: 0.735vi + 0.6617rem;
57
- --kfw-base-space-fluid-20-min: 1.25rem;
58
- --kfw-base-space-fluid-20-max: 1.5625rem;
59
- --kfw-base-space-fluid-20-val: 0.735vi + 0.9742rem;
60
- --kfw-base-space-fluid-25-min: 1.5625rem;
61
- --kfw-base-space-fluid-25-max: 1.875rem;
62
- --kfw-base-space-fluid-25-val: 0.735vi + 1.2868rem;
63
- --kfw-base-space-fluid-30-min: 1.875rem;
64
- --kfw-base-space-fluid-30-max: 2.1875rem;
65
- --kfw-base-space-fluid-30-val: 0.735vi + 1.5993rem;
66
- --kfw-base-space-fluid-35-min: 2.1875rem;
67
- --kfw-base-space-fluid-35-max: 2.5rem;
68
- --kfw-base-space-fluid-35-val: 0.735vi + 1.9118rem;
69
- --kfw-base-space-fluid-40-min: 2.5rem;
70
- --kfw-base-space-fluid-40-max: 3.125rem;
71
- --kfw-base-space-fluid-40-val: 1.471vi + 1.9485rem;
72
- --kfw-base-space-fluid-50-min: 3.125rem;
73
- --kfw-base-space-fluid-50-max: 3.75rem;
74
- --kfw-base-space-fluid-50-val: 1.471vi + 2.5735rem;
75
- --kfw-base-space-fluid-40-48-min: 2.5rem;
76
- --kfw-base-space-fluid-40-48-max: 3rem;
77
- --kfw-base-space-fluid-40-48-val: 1.471vi + 2.0588rem;
78
- --kfw-base-fontsize-static-sm: 0.875rem;
79
- --kfw-base-fontsize-static-md: 1rem;
80
- --kfw-base-fontsize-static-lg: 1.125rem;
81
- --kfw-base-fontsize-static-xl: 1.25rem;
82
- --kfw-base-fontsize-static-2xl: 1.375rem;
83
- --kfw-base-fontsize-static-3xl: 1.5rem;
84
- --kfw-base-fontsize-static-4xl: 1.5625rem;
85
- --kfw-base-fontsize-static-5xl: 1.625rem;
86
- --kfw-base-fontsize-static-6xl: 1.75rem;
87
- --kfw-base-fontsize-static-7xl: 1.875rem;
88
- --kfw-base-fontsize-static-8xl: 2rem;
89
- --kfw-base-fontsize-static-9xl: 2.25rem;
90
- --kfw-base-fontsize-fluid-sm-min: 0.875rem;
91
- --kfw-base-fontsize-fluid-sm-max: 1rem;
92
- --kfw-base-fontsize-fluid-sm-val: 0.294vi + 0.7647rem;
93
- --kfw-base-fontsize-fluid-md-min: 1rem;
94
- --kfw-base-fontsize-fluid-md-max: 1.125rem;
95
- --kfw-base-fontsize-fluid-md-val: 0.294vi + 0.8897rem;
96
- --kfw-base-fontsize-fluid-lg-min: 1.125rem;
97
- --kfw-base-fontsize-fluid-lg-max: 1.25rem;
98
- --kfw-base-fontsize-fluid-lg-val: 0.294vi + 1.0147rem;
99
- --kfw-base-fontsize-fluid-xl-min: 1.25rem;
100
- --kfw-base-fontsize-fluid-xl-max: 1.375rem;
101
- --kfw-base-fontsize-fluid-xl-val: 0.294vi + 1.1397rem;
102
- --kfw-base-fontsize-fluid-xl-3xl-min: 1.25rem;
103
- --kfw-base-fontsize-fluid-xl-3xl-max: 1.5rem;
104
- --kfw-base-fontsize-fluid-xl-3xl-val: 0.588vi + 1.0294rem;
105
- --kfw-base-fontsize-fluid-2xl-min: 1.375rem;
106
- --kfw-base-fontsize-fluid-2xl-max: 1.5rem;
107
- --kfw-base-fontsize-fluid-2xl-val: 0.294vi + 1.2647rem;
108
- --kfw-base-fontsize-fluid-3xl-min: 1.5rem;
109
- --kfw-base-fontsize-fluid-3xl-max: 1.625rem;
110
- --kfw-base-fontsize-fluid-3xl-val: 0.294vi + 1.3897rem;
111
- --kfw-base-fontsize-fluid-4xl-min: 1.5625rem;
112
- --kfw-base-fontsize-fluid-4xl-max: 1.875rem;
113
- --kfw-base-fontsize-fluid-4xl-val: 0.735vi + 1.2868rem;
114
- --kfw-base-fontsize-fluid-5xl-min: 1.625rem;
115
- --kfw-base-fontsize-fluid-5xl-max: 1.875rem;
116
- --kfw-base-fontsize-fluid-5xl-val: 0.588vi + 1.4044rem;
117
- --kfw-base-fontsize-fluid-6xl-min: 1.75rem;
118
- --kfw-base-fontsize-fluid-6xl-max: 2rem;
119
- --kfw-base-fontsize-fluid-6xl-val: 0.588vi + 1.5294rem;
120
- --kfw-base-fontsize-fluid-7xl-min: 1.875rem;
121
- --kfw-base-fontsize-fluid-7xl-max: 2.25rem;
122
- --kfw-base-fontsize-fluid-7xl-val: 0.882vi + 1.5441rem;
123
- --kfw-base-lineheight-2xs: 1.2;
124
- --kfw-base-lineheight-xs: 1.3;
125
- --kfw-base-lineheight-sm: 1.333;
126
- --kfw-base-lineheight-md: 1.4;
127
- --kfw-base-lineheight-lg: 1.45;
128
- --kfw-base-lineheight-xl: 1.5;
129
- --kfw-base-borderradius-sm: 2px;
130
- --kfw-base-borderradius-md: 4px;
131
- --kfw-base-borderradius-lg: 20px;
132
- --kfw-base-borderradius-circle: 9999px;
133
- --kfw-base-borderwidth-md: 1px;
134
- --kfw-base-borderwidth-lg: 2px;
135
- --kfw-base-fontweight-regular: 400;
136
- --kfw-base-fontweight-medium: 500;
137
- --kfw-base-wordspacing-normal: 0;
138
- --kfw-base-wordspacing-wide: 1.6px;
139
- --kfw-base-letterspacing-tight: -0.5px;
140
- --kfw-base-letterspacing-normal: 0;
141
- --kfw-base-letterspacing-wide: 0.5px;
142
- --kfw-base-letterspacing-wider: 1px;
143
- --kfw-base-offset: 2px;
144
- --kfw-base-layout-breakpoint-xs: 320px;
145
- --kfw-base-layout-breakpoint-sm: 600px;
146
- --kfw-base-layout-breakpoint-md: 840px;
147
- --kfw-base-layout-breakpoint-lg: 960px;
148
- --kfw-base-layout-breakpoint-xl: 1280px;
149
- --kfw-base-layout-container-sm: 56rem;
150
- --kfw-base-layout-container-md: 67.5rem;
151
- --kfw-base-layout-container-lg: 80rem;
152
- --kfw-base-layout-safezone-sm: 5.625vi;
153
- --kfw-base-layout-safezone-md: 6.667vi;
154
- --kfw-base-layout-safezone-lg: 7.5vi;
155
- --kfw-base-layout-safezone-xl: 0;
156
- --kfw-base-layout-gridgap-static-xs: 0.75rem;
157
- --kfw-base-layout-gridgap-static-sm: 1.125rem;
158
- --kfw-base-layout-gridgap-static-md: 1.25rem;
159
- --kfw-base-layout-gridgap-static-lg: 1.375rem;
160
- --kfw-base-layout-gridgap-static-xl: 1.625rem;
161
- --kfw-base-layout-gridgap-static-2xl: 2.25rem;
162
- --kfw-base-layout-gridgap-static-3xl: 2.5rem;
163
- --kfw-base-layout-gridgap-fluid-basic-min: 0.75rem;
164
- --kfw-base-layout-gridgap-fluid-basic-max: 2.25rem;
165
- --kfw-base-layout-gridgap-fluid-basic-val: 3.529vi - 0.5735rem;
166
- --kfw-base-layout-gridgap-fluid-large-min: 1.25rem;
167
- --kfw-base-layout-gridgap-fluid-large-max: 2.5rem;
168
- --kfw-base-layout-gridgap-fluid-large-val: 2.941vi + 0.1471rem;
169
- --kfw-base-layout-gridcolumn-1: 1;
170
- --kfw-base-layout-gridcolumn-2: 2;
171
- --kfw-base-layout-gridcolumn-3: 3;
172
- --kfw-base-layout-gridcolumn-4: 4;
173
- --kfw-base-layout-gridcolumn-6: 6;
174
- --kfw-base-layout-gridcolumn-8: 8;
175
- --kfw-base-layout-gridcolumn-10: 10;
176
- --kfw-base-layout-gridcolumn-12: 12;
177
- --kfw-color-fn: #005a8c; /** Main interaction color for buttons and links (Blue 600) */
178
- --kfw-color-fn-active: #00446e; /** Main interaction color when active (e.g., hover, Blue 700) */
179
- --kfw-color-fn-inactive: #a1adb5; /** Interaction color when inactive (Gray 300) */
180
- --kfw-color-fn-border: #2d3134; /** Interaction border color (Gray 600) */
181
- --kfw-color-fn-label: #2d3134; /** Interaction label color (Gray 600) */
182
- --kfw-color-text: #2d3134; /** Main text color for body (Gray 600) */
183
- --kfw-color-text-on-dark-bg: #fff; /** Main text color on dark background (White) */
184
- --kfw-color-text-headline-on-dark-bg: #b7f9aa; /** Headline text color on dark background (Green 300) */
185
- --kfw-color-text-on-disabled: #fff; /** Text color on disabled (White) */
186
- --kfw-color-background: #fff; /** Main background color for body (White) */
187
- --kfw-color-background-subtle: #f6f7f8; /** Neutral (Gray 50) */
188
- --kfw-color-background-disabled: #a1adb5; /** Disabled (Gray 300) */
189
- --kfw-color-background-light-blue: #e9f5fb; /** Light blue (Blue 100) */
190
- --kfw-color-background-light-green: #ecfded; /** Light green (Green 100) */
191
- --kfw-color-background-medium-green: #b7f9aa; /** Green Medium (Green 300) */
192
- --kfw-color-background-dark-blue: #00375b; /** Dark blue (Blue 800) */
193
- --kfw-color-background-dark-green: #398357; /** Dark green (Green 700) */
194
- --kfw-color-opaque-white-90: #ffffffe6; /** White 90% */
195
- --kfw-color-opaque-white-95: #fffffff2; /** White 95% */
196
- --kfw-color-opaque-gray-500-10: #41484c1a; /** Gray 500 10% */
197
- --kfw-color-opaque-gray-500-30: #41484c4d; /** Gray 500 30% */
198
- --kfw-color-opaque-gray-500-90: #41484ce6; /** Gray 500 90% */
199
- --kfw-color-state-danger: #c80538;
200
- --kfw-color-state-success: #398357;
201
- --kfw-color-state-warning: #a455c5;
202
- --kfw-color-status-red: #c80538;
203
- --kfw-color-status-yellow: #eac80b;
204
- --kfw-color-status-green: #398357;
205
- --kfw-color-line-6: #00446e;
206
- --kfw-color-line-7: #2d3134;
207
- --kfw-color-line-8: #a1adb5;
208
- --kfw-color-line-9: #005a8c;
209
- --kfw-color-line-10: #2d3134;
210
- --kfw-color-line-11: #b7f9aa;
211
- --kfw-color-line-12: #a1adb5;
212
- --kfw-color-product-container: #f6f7f8;
213
- --kfw-color-product-benefit: #007abc;
214
- --kfw-color-product-credit: #398357;
215
- --kfw-color-product-cooperation: #643179;
216
- --kfw-color-product-credit-benefit: #41484c;
217
- --kfw-color-icon: #005a8c;
218
- --kfw-color-icon-secondary: #54b3e2;
219
- --kfw-color-icon-disabled: #398357;
220
- --kfw-color-icon-disabled-secondary: #94eb90;
221
- --kfw-fontfamily: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
222
- --kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
223
- --kfw-space-tiny: 0.3125rem;
224
- --kfw-space-xsmall: 0.625rem;
225
- --kfw-space-midSmall: 0.9375rem;
226
- --kfw-space-small: 1.25rem;
227
- --kfw-space-medium: 1.875rem;
228
- --kfw-space-large-min: 2.1875rem;
229
- --kfw-space-large-max: 2.5rem;
230
- --kfw-space-large-val: 0.735vi + 1.9118rem;
231
- --kfw-space-xlarge-min: 2.5rem;
232
- --kfw-space-xlarge-max: 3rem;
233
- --kfw-space-xlarge-val: 1.471vi + 2.0588rem;
234
- --kfw-space-big-min: 3.125rem;
235
- --kfw-space-big-max: 3.75rem;
236
- --kfw-space-big-val: 1.471vi + 2.5735rem;
237
- --kfw-fontsize: 1rem;
238
- --kfw-fontsize-introduction: 1.25rem;
239
- --kfw-fontsize-large: 1.125rem;
240
- --kfw-fontsize-small: 0.875rem;
241
- --kfw-fontsize-heading-1-min: 1.875rem;
242
- --kfw-fontsize-heading-1-max: 2.25rem;
243
- --kfw-fontsize-heading-1-val: 0.882vi + 1.5441rem;
244
- --kfw-fontsize-heading-2-min: 1.75rem;
245
- --kfw-fontsize-heading-2-max: 2rem;
246
- --kfw-fontsize-heading-2-val: 0.588vi + 1.5294rem;
247
- --kfw-fontsize-heading-3-min: 1.5rem;
248
- --kfw-fontsize-heading-3-max: 1.625rem;
249
- --kfw-fontsize-heading-3-val: 0.294vi + 1.3897rem;
250
- --kfw-fontsize-heading-4-min: 1.25rem;
251
- --kfw-fontsize-heading-4-max: 1.375rem;
252
- --kfw-fontsize-heading-4-val: 0.294vi + 1.1397rem;
253
- --kfw-fontsize-heading-5: 1.125rem;
254
- --kfw-fontsize-heading-6: 1rem;
255
- --kfw-lineheight: 1.4;
256
- --kfw-lineheight-large: 1.45;
257
- --kfw-lineheight-lightspeech: 1.5;
258
- --kfw-lineheight-heading: 1.3;
259
- --kfw-lineheight-heading-5: 1.333;
260
- --kfw-lineheight-small: 1.2;
261
- --kfw-borderradius: 4px;
262
- --kfw-borderradius-small: 2px;
263
- --kfw-borderradius-large: 20px;
264
- --kfw-borderradius-circle: 9999px;
265
- --kfw-borderwidth: 1px;
266
- --kfw-borderwidth-large: 2px;
267
- --kfw-borderstyle: solid;
268
- --kfw-focusring-outline-width: 2px;
269
- --kfw-focusring-outline-offset: 2px;
270
- --kfw-focusring-outline-style: dashed;
271
- --kfw-focusring-outline-color: #00446e;
272
- --kfw-focusring-outline-radius: 4px;
273
- --kfw-fontweight: 400;
274
- --kfw-fontweight-bold: 500;
275
- --kfw-wordspacing-lightspeech: 1.6px;
276
- --kfw-breakpoint-mobile: 600px;
277
- --kfw-breakpoint-tablet: 840px;
278
- --kfw-breakpoint-desktop: 960px;
279
- --kfw-breakpoint-desktop-large: 1280px;
280
- --kfw-contentwrapper-narrow: 56rem;
281
- --kfw-contentwrapper-basic: 67.5rem;
282
- --kfw-contentwrapper-extended: 80rem;
283
- --kfw-safezone-mobile: 5.625vi;
284
- --kfw-safezone-tablet: 6.667vi;
285
- --kfw-safezone-desktop: 7.5vi;
286
- --kfw-safezone-desktop-large: 0;
287
- --kfw-gridgap-basic-min: 0.75rem;
288
- --kfw-gridgap-basic-max: 2.25rem;
289
- --kfw-gridgap-basic-val: 3.529vi - 0.5735rem;
290
- --kfw-gridgap-large-min: 1.25rem;
291
- --kfw-gridgap-large-max: 2.5rem;
292
- --kfw-gridgap-large-val: 2.941vi + 0.1471rem;
293
- }