@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.
- package/README.md +2 -148
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/package.json +29 -39
- package/LICENSE +0 -386
- package/demo/dist/css/style.min.css +0 -1
- package/demo/scripts/build-custom-media.js +0 -39
- package/demo/scripts/build-icons-css.js +0 -41
- package/demo/scripts/map-icons.js +0 -348
- package/demo/scripts/postcss.svg-load-plugin.js +0 -96
- package/demo/src/App.ts +0 -12
- package/demo/src/ColorPalette.ts +0 -84
- package/demo/src/Navigation.ts +0 -55
- package/demo/src/StickyHeader.ts +0 -40
- package/demo/src/main.ts +0 -1
- package/demo/src/vendor/gen-custom-media.css +0 -12
- package/output/README.md +0 -38
- package/output/css/kfw-design-tokens.light.css +0 -293
- package/output/figma/kfw-design-tokens.light.json +0 -736
- package/output/js/kfw-design-tokens.d.ts +0 -311
- package/output/js/kfw-design-tokens.light.js +0 -293
- package/output/json/kfw-design-tokens.json +0 -8016
- package/output/penpot/kfw-design-tokens.light.json +0 -736
- package/output/scss/kfw-design-tokens.light.scss +0 -288
- package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css +0 -293
- package/output/web_thirdparty_16px/js/kfw-design-tokens.light.d.ts +0 -559
- package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js +0 -293
- package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss +0 -288
- package/tokens/tokens.json +0 -506
|
@@ -1,293 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* KfW Design Tokens v1.0.2 | MPL-2.0 | https://github.com/openkfw/design-tokens
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
export const KfwBaseColorBlue100 = "#e9f5fb";
|
|
6
|
-
export const KfwBaseColorBlue400 = "#54b3e2";
|
|
7
|
-
export const KfwBaseColorBlue500 = "#007abc";
|
|
8
|
-
export const KfwBaseColorBlue600 = "#005a8c";
|
|
9
|
-
export const KfwBaseColorBlue700 = "#00446e";
|
|
10
|
-
export const KfwBaseColorBlue800 = "#00375b";
|
|
11
|
-
export const KfwBaseColorGreen100 = "#ecfded";
|
|
12
|
-
export const KfwBaseColorGreen300 = "#b7f9aa";
|
|
13
|
-
export const KfwBaseColorGreen400 = "#94eb90";
|
|
14
|
-
export const KfwBaseColorGreen700 = "#398357";
|
|
15
|
-
export const KfwBaseColorWhite90 = "#ffffffe6";
|
|
16
|
-
export const KfwBaseColorWhite95 = "#fffffff2";
|
|
17
|
-
export const KfwBaseColorWhite = "#ffffff";
|
|
18
|
-
export const KfwBaseColorGray50 = "#f6f7f8";
|
|
19
|
-
export const KfwBaseColorGray100 = "#eef0f2";
|
|
20
|
-
export const KfwBaseColorGray200 = "#d8dfe3";
|
|
21
|
-
export const KfwBaseColorGray300 = "#a1adb5";
|
|
22
|
-
export const KfwBaseColorGray400 = "#6d767d";
|
|
23
|
-
export const KfwBaseColorGray50010 = "#41484c1a";
|
|
24
|
-
export const KfwBaseColorGray50030 = "#41484c4d";
|
|
25
|
-
export const KfwBaseColorGray50090 = "#41484ce6";
|
|
26
|
-
export const KfwBaseColorGray500 = "#41484c";
|
|
27
|
-
export const KfwBaseColorGray600 = "#2d3134";
|
|
28
|
-
export const KfwBaseColorViolet400 = "#a455c5";
|
|
29
|
-
export const KfwBaseColorViolet500 = "#643179";
|
|
30
|
-
export const KfwBaseColorRed400 = "#c80538";
|
|
31
|
-
export const KfwBaseColorYellow500 = "#eac80b";
|
|
32
|
-
export const KfwBaseFontfamilySans =
|
|
33
|
-
'"KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif';
|
|
34
|
-
export const KfwBaseFontfamilyMono =
|
|
35
|
-
"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
|
|
36
|
-
export const KfwBaseSpaceStatic5 = "0.3125rem";
|
|
37
|
-
export const KfwBaseSpaceStatic10 = "0.625rem";
|
|
38
|
-
export const KfwBaseSpaceStatic15 = "0.9375rem";
|
|
39
|
-
export const KfwBaseSpaceStatic20 = "1.25rem";
|
|
40
|
-
export const KfwBaseSpaceStatic25 = "1.5625rem";
|
|
41
|
-
export const KfwBaseSpaceStatic30 = "1.875rem";
|
|
42
|
-
export const KfwBaseSpaceStatic35 = "2.1875rem";
|
|
43
|
-
export const KfwBaseSpaceStatic40 = "2.5rem";
|
|
44
|
-
export const KfwBaseSpaceStatic48 = "3rem";
|
|
45
|
-
export const KfwBaseSpaceStatic50 = "3.125rem";
|
|
46
|
-
export const KfwBaseSpaceStatic60 = "3.75rem";
|
|
47
|
-
export const KfwBaseSpaceFluid5Min = "0.3125rem";
|
|
48
|
-
export const KfwBaseSpaceFluid5Max = "0.625rem";
|
|
49
|
-
export const KfwBaseSpaceFluid5Val = "0.735vi + 0.588px";
|
|
50
|
-
export const KfwBaseSpaceFluid10Min = "0.625rem";
|
|
51
|
-
export const KfwBaseSpaceFluid10Max = "0.9375rem";
|
|
52
|
-
export const KfwBaseSpaceFluid10Val = "0.735vi + 0.3493rem";
|
|
53
|
-
export const KfwBaseSpaceFluid15Min = "0.9375rem";
|
|
54
|
-
export const KfwBaseSpaceFluid15Max = "1.25rem";
|
|
55
|
-
export const KfwBaseSpaceFluid15Val = "0.735vi + 0.6617rem";
|
|
56
|
-
export const KfwBaseSpaceFluid20Min = "1.25rem";
|
|
57
|
-
export const KfwBaseSpaceFluid20Max = "1.5625rem";
|
|
58
|
-
export const KfwBaseSpaceFluid20Val = "0.735vi + 0.9742rem";
|
|
59
|
-
export const KfwBaseSpaceFluid25Min = "1.5625rem";
|
|
60
|
-
export const KfwBaseSpaceFluid25Max = "1.875rem";
|
|
61
|
-
export const KfwBaseSpaceFluid25Val = "0.735vi + 1.2868rem";
|
|
62
|
-
export const KfwBaseSpaceFluid30Min = "1.875rem";
|
|
63
|
-
export const KfwBaseSpaceFluid30Max = "2.1875rem";
|
|
64
|
-
export const KfwBaseSpaceFluid30Val = "0.735vi + 1.5993rem";
|
|
65
|
-
export const KfwBaseSpaceFluid35Min = "2.1875rem";
|
|
66
|
-
export const KfwBaseSpaceFluid35Max = "2.5rem";
|
|
67
|
-
export const KfwBaseSpaceFluid35Val = "0.735vi + 1.9118rem";
|
|
68
|
-
export const KfwBaseSpaceFluid40Min = "2.5rem";
|
|
69
|
-
export const KfwBaseSpaceFluid40Max = "3.125rem";
|
|
70
|
-
export const KfwBaseSpaceFluid40Val = "1.471vi + 1.9485rem";
|
|
71
|
-
export const KfwBaseSpaceFluid50Min = "3.125rem";
|
|
72
|
-
export const KfwBaseSpaceFluid50Max = "3.75rem";
|
|
73
|
-
export const KfwBaseSpaceFluid50Val = "1.471vi + 2.5735rem";
|
|
74
|
-
export const KfwBaseSpaceFluid4048Min = "2.5rem";
|
|
75
|
-
export const KfwBaseSpaceFluid4048Max = "3rem";
|
|
76
|
-
export const KfwBaseSpaceFluid4048Val = "1.471vi + 2.0588rem";
|
|
77
|
-
export const KfwBaseFontsizeStaticSm = "0.875rem";
|
|
78
|
-
export const KfwBaseFontsizeStaticMd = "1rem";
|
|
79
|
-
export const KfwBaseFontsizeStaticLg = "1.125rem";
|
|
80
|
-
export const KfwBaseFontsizeStaticXl = "1.25rem";
|
|
81
|
-
export const KfwBaseFontsizeStatic2xl = "1.375rem";
|
|
82
|
-
export const KfwBaseFontsizeStatic3xl = "1.5rem";
|
|
83
|
-
export const KfwBaseFontsizeStatic4xl = "1.5625rem";
|
|
84
|
-
export const KfwBaseFontsizeStatic5xl = "1.625rem";
|
|
85
|
-
export const KfwBaseFontsizeStatic6xl = "1.75rem";
|
|
86
|
-
export const KfwBaseFontsizeStatic7xl = "1.875rem";
|
|
87
|
-
export const KfwBaseFontsizeStatic8xl = "2rem";
|
|
88
|
-
export const KfwBaseFontsizeStatic9xl = "2.25rem";
|
|
89
|
-
export const KfwBaseFontsizeFluidSmMin = "0.875rem";
|
|
90
|
-
export const KfwBaseFontsizeFluidSmMax = "1rem";
|
|
91
|
-
export const KfwBaseFontsizeFluidSmVal = "0.294vi + 0.7647rem";
|
|
92
|
-
export const KfwBaseFontsizeFluidMdMin = "1rem";
|
|
93
|
-
export const KfwBaseFontsizeFluidMdMax = "1.125rem";
|
|
94
|
-
export const KfwBaseFontsizeFluidMdVal = "0.294vi + 0.8897rem";
|
|
95
|
-
export const KfwBaseFontsizeFluidLgMin = "1.125rem";
|
|
96
|
-
export const KfwBaseFontsizeFluidLgMax = "1.25rem";
|
|
97
|
-
export const KfwBaseFontsizeFluidLgVal = "0.294vi + 1.0147rem";
|
|
98
|
-
export const KfwBaseFontsizeFluidXlMin = "1.25rem";
|
|
99
|
-
export const KfwBaseFontsizeFluidXlMax = "1.375rem";
|
|
100
|
-
export const KfwBaseFontsizeFluidXlVal = "0.294vi + 1.1397rem";
|
|
101
|
-
export const KfwBaseFontsizeFluidXl3xlMin = "1.25rem";
|
|
102
|
-
export const KfwBaseFontsizeFluidXl3xlMax = "1.5rem";
|
|
103
|
-
export const KfwBaseFontsizeFluidXl3xlVal = "0.588vi + 1.0294rem";
|
|
104
|
-
export const KfwBaseFontsizeFluid2xlMin = "1.375rem";
|
|
105
|
-
export const KfwBaseFontsizeFluid2xlMax = "1.5rem";
|
|
106
|
-
export const KfwBaseFontsizeFluid2xlVal = "0.294vi + 1.2647rem";
|
|
107
|
-
export const KfwBaseFontsizeFluid3xlMin = "1.5rem";
|
|
108
|
-
export const KfwBaseFontsizeFluid3xlMax = "1.625rem";
|
|
109
|
-
export const KfwBaseFontsizeFluid3xlVal = "0.294vi + 1.3897rem";
|
|
110
|
-
export const KfwBaseFontsizeFluid4xlMin = "1.5625rem";
|
|
111
|
-
export const KfwBaseFontsizeFluid4xlMax = "1.875rem";
|
|
112
|
-
export const KfwBaseFontsizeFluid4xlVal = "0.735vi + 1.2868rem";
|
|
113
|
-
export const KfwBaseFontsizeFluid5xlMin = "1.625rem";
|
|
114
|
-
export const KfwBaseFontsizeFluid5xlMax = "1.875rem";
|
|
115
|
-
export const KfwBaseFontsizeFluid5xlVal = "0.588vi + 1.4044rem";
|
|
116
|
-
export const KfwBaseFontsizeFluid6xlMin = "1.75rem";
|
|
117
|
-
export const KfwBaseFontsizeFluid6xlMax = "2rem";
|
|
118
|
-
export const KfwBaseFontsizeFluid6xlVal = "0.588vi + 1.5294rem";
|
|
119
|
-
export const KfwBaseFontsizeFluid7xlMin = "1.875rem";
|
|
120
|
-
export const KfwBaseFontsizeFluid7xlMax = "2.25rem";
|
|
121
|
-
export const KfwBaseFontsizeFluid7xlVal = "0.882vi + 1.5441rem";
|
|
122
|
-
export const KfwBaseLineheight2xs = 1.2;
|
|
123
|
-
export const KfwBaseLineheightXs = 1.3;
|
|
124
|
-
export const KfwBaseLineheightSm = 1.333;
|
|
125
|
-
export const KfwBaseLineheightMd = 1.4;
|
|
126
|
-
export const KfwBaseLineheightLg = 1.45;
|
|
127
|
-
export const KfwBaseLineheightXl = 1.5;
|
|
128
|
-
export const KfwBaseBorderradiusSm = "2px";
|
|
129
|
-
export const KfwBaseBorderradiusMd = "4px";
|
|
130
|
-
export const KfwBaseBorderradiusLg = "20px";
|
|
131
|
-
export const KfwBaseBorderradiusCircle = "9999px";
|
|
132
|
-
export const KfwBaseBorderwidthMd = "1px";
|
|
133
|
-
export const KfwBaseBorderwidthLg = "2px";
|
|
134
|
-
export const KfwBaseFontweightRegular = 400;
|
|
135
|
-
export const KfwBaseFontweightMedium = 500;
|
|
136
|
-
export const KfwBaseWordspacingNormal = "0";
|
|
137
|
-
export const KfwBaseWordspacingWide = "1.6px";
|
|
138
|
-
export const KfwBaseLetterspacingTight = "-0.5px";
|
|
139
|
-
export const KfwBaseLetterspacingNormal = "0";
|
|
140
|
-
export const KfwBaseLetterspacingWide = "0.5px";
|
|
141
|
-
export const KfwBaseLetterspacingWider = "1px";
|
|
142
|
-
export const KfwBaseOffset = "2px";
|
|
143
|
-
export const KfwBaseLayoutBreakpointXs = "320px";
|
|
144
|
-
export const KfwBaseLayoutBreakpointSm = "600px";
|
|
145
|
-
export const KfwBaseLayoutBreakpointMd = "840px";
|
|
146
|
-
export const KfwBaseLayoutBreakpointLg = "960px";
|
|
147
|
-
export const KfwBaseLayoutBreakpointXl = "1280px";
|
|
148
|
-
export const KfwBaseLayoutContainerSm = "56rem";
|
|
149
|
-
export const KfwBaseLayoutContainerMd = "67.5rem";
|
|
150
|
-
export const KfwBaseLayoutContainerLg = "80rem";
|
|
151
|
-
export const KfwBaseLayoutSafezoneSm = "5.625vi";
|
|
152
|
-
export const KfwBaseLayoutSafezoneMd = "6.667vi";
|
|
153
|
-
export const KfwBaseLayoutSafezoneLg = "7.5vi";
|
|
154
|
-
export const KfwBaseLayoutSafezoneXl = 0;
|
|
155
|
-
export const KfwBaseLayoutGridgapStaticXs = "0.75rem";
|
|
156
|
-
export const KfwBaseLayoutGridgapStaticSm = "1.125rem";
|
|
157
|
-
export const KfwBaseLayoutGridgapStaticMd = "1.25rem";
|
|
158
|
-
export const KfwBaseLayoutGridgapStaticLg = "1.375rem";
|
|
159
|
-
export const KfwBaseLayoutGridgapStaticXl = "1.625rem";
|
|
160
|
-
export const KfwBaseLayoutGridgapStatic2xl = "2.25rem";
|
|
161
|
-
export const KfwBaseLayoutGridgapStatic3xl = "2.5rem";
|
|
162
|
-
export const KfwBaseLayoutGridgapFluidBasicMin = "0.75rem";
|
|
163
|
-
export const KfwBaseLayoutGridgapFluidBasicMax = "2.25rem";
|
|
164
|
-
export const KfwBaseLayoutGridgapFluidBasicVal = "3.529vi - 0.5735rem";
|
|
165
|
-
export const KfwBaseLayoutGridgapFluidLargeMin = "1.25rem";
|
|
166
|
-
export const KfwBaseLayoutGridgapFluidLargeMax = "2.5rem";
|
|
167
|
-
export const KfwBaseLayoutGridgapFluidLargeVal = "2.941vi + 0.1471rem";
|
|
168
|
-
export const KfwBaseLayoutGridcolumn1 = 1;
|
|
169
|
-
export const KfwBaseLayoutGridcolumn2 = 2;
|
|
170
|
-
export const KfwBaseLayoutGridcolumn3 = 3;
|
|
171
|
-
export const KfwBaseLayoutGridcolumn4 = 4;
|
|
172
|
-
export const KfwBaseLayoutGridcolumn6 = 6;
|
|
173
|
-
export const KfwBaseLayoutGridcolumn8 = 8;
|
|
174
|
-
export const KfwBaseLayoutGridcolumn10 = 10;
|
|
175
|
-
export const KfwBaseLayoutGridcolumn12 = 12;
|
|
176
|
-
export const KfwColorFn = "#005a8c"; // Main interaction color for buttons and links (Blue 600)
|
|
177
|
-
export const KfwColorFnActive = "#00446e"; // Main interaction color when active (e.g., hover, Blue 700)
|
|
178
|
-
export const KfwColorFnInactive = "#a1adb5"; // Interaction color when inactive (Gray 300)
|
|
179
|
-
export const KfwColorFnBorder = "#2d3134"; // Interaction border color (Gray 600)
|
|
180
|
-
export const KfwColorFnLabel = "#2d3134"; // Interaction label color (Gray 600)
|
|
181
|
-
export const KfwColorText = "#2d3134"; // Main text color for body (Gray 600)
|
|
182
|
-
export const KfwColorTextOnDarkBg = "#ffffff"; // Main text color on dark background (White)
|
|
183
|
-
export const KfwColorTextHeadlineOnDarkBg = "#b7f9aa"; // Headline text color on dark background (Green 300)
|
|
184
|
-
export const KfwColorTextOnDisabled = "#ffffff"; // Text color on disabled (White)
|
|
185
|
-
export const KfwColorBackground = "#ffffff"; // Main background color for body (White)
|
|
186
|
-
export const KfwColorBackgroundSubtle = "#f6f7f8"; // Neutral (Gray 50)
|
|
187
|
-
export const KfwColorBackgroundDisabled = "#a1adb5"; // Disabled (Gray 300)
|
|
188
|
-
export const KfwColorBackgroundLightBlue = "#e9f5fb"; // Light blue (Blue 100)
|
|
189
|
-
export const KfwColorBackgroundLightGreen = "#ecfded"; // Light green (Green 100)
|
|
190
|
-
export const KfwColorBackgroundMediumGreen = "#b7f9aa"; // Green Medium (Green 300)
|
|
191
|
-
export const KfwColorBackgroundDarkBlue = "#00375b"; // Dark blue (Blue 800)
|
|
192
|
-
export const KfwColorBackgroundDarkGreen = "#398357"; // Dark green (Green 700)
|
|
193
|
-
export const KfwColorOpaqueWhite90 = "#ffffffe6"; // White 90%
|
|
194
|
-
export const KfwColorOpaqueWhite95 = "#fffffff2"; // White 95%
|
|
195
|
-
export const KfwColorOpaqueGray50010 = "#41484c1a"; // Gray 500 10%
|
|
196
|
-
export const KfwColorOpaqueGray50030 = "#41484c4d"; // Gray 500 30%
|
|
197
|
-
export const KfwColorOpaqueGray50090 = "#41484ce6"; // Gray 500 90%
|
|
198
|
-
export const KfwColorStateDanger = "#c80538";
|
|
199
|
-
export const KfwColorStateSuccess = "#398357";
|
|
200
|
-
export const KfwColorStateWarning = "#a455c5";
|
|
201
|
-
export const KfwColorStatusRed = "#c80538";
|
|
202
|
-
export const KfwColorStatusYellow = "#eac80b";
|
|
203
|
-
export const KfwColorStatusGreen = "#398357";
|
|
204
|
-
export const KfwColorLine6 = "#00446e";
|
|
205
|
-
export const KfwColorLine7 = "#2d3134";
|
|
206
|
-
export const KfwColorLine8 = "#a1adb5";
|
|
207
|
-
export const KfwColorLine9 = "#005a8c";
|
|
208
|
-
export const KfwColorLine10 = "#2d3134";
|
|
209
|
-
export const KfwColorLine11 = "#b7f9aa";
|
|
210
|
-
export const KfwColorLine12 = "#a1adb5";
|
|
211
|
-
export const KfwColorProductContainer = "#f6f7f8";
|
|
212
|
-
export const KfwColorProductBenefit = "#007abc";
|
|
213
|
-
export const KfwColorProductCredit = "#398357";
|
|
214
|
-
export const KfwColorProductCooperation = "#643179";
|
|
215
|
-
export const KfwColorProductCreditBenefit = "#41484c";
|
|
216
|
-
export const KfwColorIcon = "#005a8c";
|
|
217
|
-
export const KfwColorIconSecondary = "#54b3e2";
|
|
218
|
-
export const KfwColorIconDisabled = "#398357";
|
|
219
|
-
export const KfwColorIconDisabledSecondary = "#94eb90";
|
|
220
|
-
export const KfwFontfamily =
|
|
221
|
-
'"KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif';
|
|
222
|
-
export const KfwFontfamilyCode =
|
|
223
|
-
"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
|
|
224
|
-
export const KfwSpaceTiny = "0.3125rem";
|
|
225
|
-
export const KfwSpaceXsmall = "0.625rem";
|
|
226
|
-
export const KfwSpaceMidsmall = "0.9375rem";
|
|
227
|
-
export const KfwSpaceSmall = "1.25rem";
|
|
228
|
-
export const KfwSpaceMedium = "1.875rem";
|
|
229
|
-
export const KfwSpaceLargeMin = "2.1875rem";
|
|
230
|
-
export const KfwSpaceLargeMax = "2.5rem";
|
|
231
|
-
export const KfwSpaceLargeVal = "0.735vi + 1.9118rem";
|
|
232
|
-
export const KfwSpaceXlargeMin = "2.5rem";
|
|
233
|
-
export const KfwSpaceXlargeMax = "3rem";
|
|
234
|
-
export const KfwSpaceXlargeVal = "1.471vi + 2.0588rem";
|
|
235
|
-
export const KfwSpaceBigMin = "3.125rem";
|
|
236
|
-
export const KfwSpaceBigMax = "3.75rem";
|
|
237
|
-
export const KfwSpaceBigVal = "1.471vi + 2.5735rem";
|
|
238
|
-
export const KfwFontsize = "1rem";
|
|
239
|
-
export const KfwFontsizeIntroduction = "1.25rem";
|
|
240
|
-
export const KfwFontsizeLarge = "1.125rem";
|
|
241
|
-
export const KfwFontsizeSmall = "0.875rem";
|
|
242
|
-
export const KfwFontsizeHeading1Min = "1.875rem";
|
|
243
|
-
export const KfwFontsizeHeading1Max = "2.25rem";
|
|
244
|
-
export const KfwFontsizeHeading1Val = "0.882vi + 1.5441rem";
|
|
245
|
-
export const KfwFontsizeHeading2Min = "1.75rem";
|
|
246
|
-
export const KfwFontsizeHeading2Max = "2rem";
|
|
247
|
-
export const KfwFontsizeHeading2Val = "0.588vi + 1.5294rem";
|
|
248
|
-
export const KfwFontsizeHeading3Min = "1.5rem";
|
|
249
|
-
export const KfwFontsizeHeading3Max = "1.625rem";
|
|
250
|
-
export const KfwFontsizeHeading3Val = "0.294vi + 1.3897rem";
|
|
251
|
-
export const KfwFontsizeHeading4Min = "1.25rem";
|
|
252
|
-
export const KfwFontsizeHeading4Max = "1.375rem";
|
|
253
|
-
export const KfwFontsizeHeading4Val = "0.294vi + 1.1397rem";
|
|
254
|
-
export const KfwFontsizeHeading5 = "1.125rem";
|
|
255
|
-
export const KfwFontsizeHeading6 = "1rem";
|
|
256
|
-
export const KfwLineheight = 1.4;
|
|
257
|
-
export const KfwLineheightLarge = 1.45;
|
|
258
|
-
export const KfwLineheightLightspeech = 1.5;
|
|
259
|
-
export const KfwLineheightHeading = 1.3;
|
|
260
|
-
export const KfwLineheightHeading5 = 1.333;
|
|
261
|
-
export const KfwLineheightSmall = 1.2;
|
|
262
|
-
export const KfwBorderradius = "4px";
|
|
263
|
-
export const KfwBorderradiusSmall = "2px";
|
|
264
|
-
export const KfwBorderradiusLarge = "20px";
|
|
265
|
-
export const KfwBorderradiusCircle = "9999px";
|
|
266
|
-
export const KfwBorderwidth = "1px";
|
|
267
|
-
export const KfwBorderwidthLarge = "2px";
|
|
268
|
-
export const KfwBorderstyle = "solid";
|
|
269
|
-
export const KfwFocusringOutlineWidth = "2px";
|
|
270
|
-
export const KfwFocusringOutlineOffset = "2px";
|
|
271
|
-
export const KfwFocusringOutlineStyle = "dashed";
|
|
272
|
-
export const KfwFocusringOutlineColor = "#00446e";
|
|
273
|
-
export const KfwFocusringOutlineRadius = "4px";
|
|
274
|
-
export const KfwFontweight = 400;
|
|
275
|
-
export const KfwFontweightBold = 500;
|
|
276
|
-
export const KfwWordspacingLightspeech = "1.6px";
|
|
277
|
-
export const KfwBreakpointMobile = "600px";
|
|
278
|
-
export const KfwBreakpointTablet = "840px";
|
|
279
|
-
export const KfwBreakpointDesktop = "960px";
|
|
280
|
-
export const KfwBreakpointDesktopLarge = "1280px";
|
|
281
|
-
export const KfwContentwrapperNarrow = "56rem";
|
|
282
|
-
export const KfwContentwrapperBasic = "67.5rem";
|
|
283
|
-
export const KfwContentwrapperExtended = "80rem";
|
|
284
|
-
export const KfwSafezoneMobile = "5.625vi";
|
|
285
|
-
export const KfwSafezoneTablet = "6.667vi";
|
|
286
|
-
export const KfwSafezoneDesktop = "7.5vi";
|
|
287
|
-
export const KfwSafezoneDesktopLarge = 0;
|
|
288
|
-
export const KfwGridgapBasicMin = "0.75rem";
|
|
289
|
-
export const KfwGridgapBasicMax = "2.25rem";
|
|
290
|
-
export const KfwGridgapBasicVal = "3.529vi - 0.5735rem";
|
|
291
|
-
export const KfwGridgapLargeMin = "1.25rem";
|
|
292
|
-
export const KfwGridgapLargeMax = "2.5rem";
|
|
293
|
-
export const KfwGridgapLargeVal = "2.941vi + 0.1471rem";
|
|
@@ -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.3125rem;
|
|
34
|
-
$kfw-base-space-static-10: 0.625rem;
|
|
35
|
-
$kfw-base-space-static-15: 0.9375rem;
|
|
36
|
-
$kfw-base-space-static-20: 1.25rem;
|
|
37
|
-
$kfw-base-space-static-25: 1.5625rem;
|
|
38
|
-
$kfw-base-space-static-30: 1.875rem;
|
|
39
|
-
$kfw-base-space-static-35: 2.1875rem;
|
|
40
|
-
$kfw-base-space-static-40: 2.5rem;
|
|
41
|
-
$kfw-base-space-static-48: 3rem;
|
|
42
|
-
$kfw-base-space-static-50: 3.125rem;
|
|
43
|
-
$kfw-base-space-static-60: 3.75rem;
|
|
44
|
-
$kfw-base-space-fluid-5-min: 0.3125rem;
|
|
45
|
-
$kfw-base-space-fluid-5-max: 0.625rem;
|
|
46
|
-
$kfw-base-space-fluid-5-val: 0.735vi + 0.588px;
|
|
47
|
-
$kfw-base-space-fluid-10-min: 0.625rem;
|
|
48
|
-
$kfw-base-space-fluid-10-max: 0.9375rem;
|
|
49
|
-
$kfw-base-space-fluid-10-val: 0.735vi + 0.3493rem;
|
|
50
|
-
$kfw-base-space-fluid-15-min: 0.9375rem;
|
|
51
|
-
$kfw-base-space-fluid-15-max: 1.25rem;
|
|
52
|
-
$kfw-base-space-fluid-15-val: 0.735vi + 0.6617rem;
|
|
53
|
-
$kfw-base-space-fluid-20-min: 1.25rem;
|
|
54
|
-
$kfw-base-space-fluid-20-max: 1.5625rem;
|
|
55
|
-
$kfw-base-space-fluid-20-val: 0.735vi + 0.9742rem;
|
|
56
|
-
$kfw-base-space-fluid-25-min: 1.5625rem;
|
|
57
|
-
$kfw-base-space-fluid-25-max: 1.875rem;
|
|
58
|
-
$kfw-base-space-fluid-25-val: 0.735vi + 1.2868rem;
|
|
59
|
-
$kfw-base-space-fluid-30-min: 1.875rem;
|
|
60
|
-
$kfw-base-space-fluid-30-max: 2.1875rem;
|
|
61
|
-
$kfw-base-space-fluid-30-val: 0.735vi + 1.5993rem;
|
|
62
|
-
$kfw-base-space-fluid-35-min: 2.1875rem;
|
|
63
|
-
$kfw-base-space-fluid-35-max: 2.5rem;
|
|
64
|
-
$kfw-base-space-fluid-35-val: 0.735vi + 1.9118rem;
|
|
65
|
-
$kfw-base-space-fluid-40-min: 2.5rem;
|
|
66
|
-
$kfw-base-space-fluid-40-max: 3.125rem;
|
|
67
|
-
$kfw-base-space-fluid-40-val: 1.471vi + 1.9485rem;
|
|
68
|
-
$kfw-base-space-fluid-50-min: 3.125rem;
|
|
69
|
-
$kfw-base-space-fluid-50-max: 3.75rem;
|
|
70
|
-
$kfw-base-space-fluid-50-val: 1.471vi + 2.5735rem;
|
|
71
|
-
$kfw-base-space-fluid-40-48-min: 2.5rem;
|
|
72
|
-
$kfw-base-space-fluid-40-48-max: 3rem;
|
|
73
|
-
$kfw-base-space-fluid-40-48-val: 1.471vi + 2.0588rem;
|
|
74
|
-
$kfw-base-fontsize-static-sm: 0.875rem;
|
|
75
|
-
$kfw-base-fontsize-static-md: 1rem;
|
|
76
|
-
$kfw-base-fontsize-static-lg: 1.125rem;
|
|
77
|
-
$kfw-base-fontsize-static-xl: 1.25rem;
|
|
78
|
-
$kfw-base-fontsize-static-2xl: 1.375rem;
|
|
79
|
-
$kfw-base-fontsize-static-3xl: 1.5rem;
|
|
80
|
-
$kfw-base-fontsize-static-4xl: 1.5625rem;
|
|
81
|
-
$kfw-base-fontsize-static-5xl: 1.625rem;
|
|
82
|
-
$kfw-base-fontsize-static-6xl: 1.75rem;
|
|
83
|
-
$kfw-base-fontsize-static-7xl: 1.875rem;
|
|
84
|
-
$kfw-base-fontsize-static-8xl: 2rem;
|
|
85
|
-
$kfw-base-fontsize-static-9xl: 2.25rem;
|
|
86
|
-
$kfw-base-fontsize-fluid-sm-min: 0.875rem;
|
|
87
|
-
$kfw-base-fontsize-fluid-sm-max: 1rem;
|
|
88
|
-
$kfw-base-fontsize-fluid-sm-val: 0.294vi + 0.7647rem;
|
|
89
|
-
$kfw-base-fontsize-fluid-md-min: 1rem;
|
|
90
|
-
$kfw-base-fontsize-fluid-md-max: 1.125rem;
|
|
91
|
-
$kfw-base-fontsize-fluid-md-val: 0.294vi + 0.8897rem;
|
|
92
|
-
$kfw-base-fontsize-fluid-lg-min: 1.125rem;
|
|
93
|
-
$kfw-base-fontsize-fluid-lg-max: 1.25rem;
|
|
94
|
-
$kfw-base-fontsize-fluid-lg-val: 0.294vi + 1.0147rem;
|
|
95
|
-
$kfw-base-fontsize-fluid-xl-min: 1.25rem;
|
|
96
|
-
$kfw-base-fontsize-fluid-xl-max: 1.375rem;
|
|
97
|
-
$kfw-base-fontsize-fluid-xl-val: 0.294vi + 1.1397rem;
|
|
98
|
-
$kfw-base-fontsize-fluid-xl-3xl-min: 1.25rem;
|
|
99
|
-
$kfw-base-fontsize-fluid-xl-3xl-max: 1.5rem;
|
|
100
|
-
$kfw-base-fontsize-fluid-xl-3xl-val: 0.588vi + 1.0294rem;
|
|
101
|
-
$kfw-base-fontsize-fluid-2xl-min: 1.375rem;
|
|
102
|
-
$kfw-base-fontsize-fluid-2xl-max: 1.5rem;
|
|
103
|
-
$kfw-base-fontsize-fluid-2xl-val: 0.294vi + 1.2647rem;
|
|
104
|
-
$kfw-base-fontsize-fluid-3xl-min: 1.5rem;
|
|
105
|
-
$kfw-base-fontsize-fluid-3xl-max: 1.625rem;
|
|
106
|
-
$kfw-base-fontsize-fluid-3xl-val: 0.294vi + 1.3897rem;
|
|
107
|
-
$kfw-base-fontsize-fluid-4xl-min: 1.5625rem;
|
|
108
|
-
$kfw-base-fontsize-fluid-4xl-max: 1.875rem;
|
|
109
|
-
$kfw-base-fontsize-fluid-4xl-val: 0.735vi + 1.2868rem;
|
|
110
|
-
$kfw-base-fontsize-fluid-5xl-min: 1.625rem;
|
|
111
|
-
$kfw-base-fontsize-fluid-5xl-max: 1.875rem;
|
|
112
|
-
$kfw-base-fontsize-fluid-5xl-val: 0.588vi + 1.4044rem;
|
|
113
|
-
$kfw-base-fontsize-fluid-6xl-min: 1.75rem;
|
|
114
|
-
$kfw-base-fontsize-fluid-6xl-max: 2rem;
|
|
115
|
-
$kfw-base-fontsize-fluid-6xl-val: 0.588vi + 1.5294rem;
|
|
116
|
-
$kfw-base-fontsize-fluid-7xl-min: 1.875rem;
|
|
117
|
-
$kfw-base-fontsize-fluid-7xl-max: 2.25rem;
|
|
118
|
-
$kfw-base-fontsize-fluid-7xl-val: 0.882vi + 1.5441rem;
|
|
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: 56rem;
|
|
146
|
-
$kfw-base-layout-container-md: 67.5rem;
|
|
147
|
-
$kfw-base-layout-container-lg: 80rem;
|
|
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: 0.75rem;
|
|
153
|
-
$kfw-base-layout-gridgap-static-sm: 1.125rem;
|
|
154
|
-
$kfw-base-layout-gridgap-static-md: 1.25rem;
|
|
155
|
-
$kfw-base-layout-gridgap-static-lg: 1.375rem;
|
|
156
|
-
$kfw-base-layout-gridgap-static-xl: 1.625rem;
|
|
157
|
-
$kfw-base-layout-gridgap-static-2xl: 2.25rem;
|
|
158
|
-
$kfw-base-layout-gridgap-static-3xl: 2.5rem;
|
|
159
|
-
$kfw-base-layout-gridgap-fluid-basic-min: 0.75rem;
|
|
160
|
-
$kfw-base-layout-gridgap-fluid-basic-max: 2.25rem;
|
|
161
|
-
$kfw-base-layout-gridgap-fluid-basic-val: 3.529vi - 0.5735rem;
|
|
162
|
-
$kfw-base-layout-gridgap-fluid-large-min: 1.25rem;
|
|
163
|
-
$kfw-base-layout-gridgap-fluid-large-max: 2.5rem;
|
|
164
|
-
$kfw-base-layout-gridgap-fluid-large-val: 2.941vi + 0.1471rem;
|
|
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.3125rem;
|
|
220
|
-
$kfw-space-xsmall: 0.625rem;
|
|
221
|
-
$kfw-space-midSmall: 0.9375rem;
|
|
222
|
-
$kfw-space-small: 1.25rem;
|
|
223
|
-
$kfw-space-medium: 1.875rem;
|
|
224
|
-
$kfw-space-large-min: 2.1875rem;
|
|
225
|
-
$kfw-space-large-max: 2.5rem;
|
|
226
|
-
$kfw-space-large-val: 0.735vi + 1.9118rem;
|
|
227
|
-
$kfw-space-xlarge-min: 2.5rem;
|
|
228
|
-
$kfw-space-xlarge-max: 3rem;
|
|
229
|
-
$kfw-space-xlarge-val: 1.471vi + 2.0588rem;
|
|
230
|
-
$kfw-space-big-min: 3.125rem;
|
|
231
|
-
$kfw-space-big-max: 3.75rem;
|
|
232
|
-
$kfw-space-big-val: 1.471vi + 2.5735rem;
|
|
233
|
-
$kfw-fontsize: 1rem;
|
|
234
|
-
$kfw-fontsize-introduction: 1.25rem;
|
|
235
|
-
$kfw-fontsize-large: 1.125rem;
|
|
236
|
-
$kfw-fontsize-small: 0.875rem;
|
|
237
|
-
$kfw-fontsize-heading-1-min: 1.875rem;
|
|
238
|
-
$kfw-fontsize-heading-1-max: 2.25rem;
|
|
239
|
-
$kfw-fontsize-heading-1-val: 0.882vi + 1.5441rem;
|
|
240
|
-
$kfw-fontsize-heading-2-min: 1.75rem;
|
|
241
|
-
$kfw-fontsize-heading-2-max: 2rem;
|
|
242
|
-
$kfw-fontsize-heading-2-val: 0.588vi + 1.5294rem;
|
|
243
|
-
$kfw-fontsize-heading-3-min: 1.5rem;
|
|
244
|
-
$kfw-fontsize-heading-3-max: 1.625rem;
|
|
245
|
-
$kfw-fontsize-heading-3-val: 0.294vi + 1.3897rem;
|
|
246
|
-
$kfw-fontsize-heading-4-min: 1.25rem;
|
|
247
|
-
$kfw-fontsize-heading-4-max: 1.375rem;
|
|
248
|
-
$kfw-fontsize-heading-4-val: 0.294vi + 1.1397rem;
|
|
249
|
-
$kfw-fontsize-heading-5: 1.125rem;
|
|
250
|
-
$kfw-fontsize-heading-6: 1rem;
|
|
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: 56rem;
|
|
277
|
-
$kfw-contentwrapper-basic: 67.5rem;
|
|
278
|
-
$kfw-contentwrapper-extended: 80rem;
|
|
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: 0.75rem;
|
|
284
|
-
$kfw-gridgap-basic-max: 2.25rem;
|
|
285
|
-
$kfw-gridgap-basic-val: 3.529vi - 0.5735rem;
|
|
286
|
-
$kfw-gridgap-large-min: 1.25rem;
|
|
287
|
-
$kfw-gridgap-large-max: 2.5rem;
|
|
288
|
-
$kfw-gridgap-large-val: 2.941vi + 0.1471rem;
|