@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 +0 -14
- package/output/web_stable_10px/css/kfw-design-tokens.light.css +14 -14
- package/output/web_stable_10px/js/kfw-design-tokens.light.js +14 -14
- package/output/web_stable_10px/scss/kfw-design-tokens.light.scss +14 -14
- package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css +14 -14
- package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js +14 -14
- package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss +14 -14
- package/package.json +3 -3
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:
|
|
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:
|
|
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:
|
|
134
|
-
--kfw-base-layout-breakpoint-sm:
|
|
135
|
-
--kfw-base-layout-breakpoint-md:
|
|
136
|
-
--kfw-base-layout-breakpoint-lg:
|
|
137
|
-
--kfw-base-layout-breakpoint-xl:
|
|
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:
|
|
251
|
-
--kfw-focusring-outline-width:
|
|
252
|
-
--kfw-focusring-outline-offset:
|
|
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:
|
|
257
|
-
--kfw-breakpoint-tablet:
|
|
258
|
-
--kfw-breakpoint-desktop:
|
|
259
|
-
--kfw-breakpoint-desktop-large:
|
|
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 = "
|
|
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 = "
|
|
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 = "
|
|
250
|
-
export const KfwBaseLayoutBreakpointSm = "
|
|
251
|
-
export const KfwBaseLayoutBreakpointMd = "
|
|
252
|
-
export const KfwBaseLayoutBreakpointLg = "
|
|
253
|
-
export const KfwBaseLayoutBreakpointXl = "
|
|
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 = "
|
|
546
|
-
export const KfwFocusringOutlineWidth = "
|
|
547
|
-
export const KfwFocusringOutlineOffset = "
|
|
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 = "
|
|
552
|
-
export const KfwBreakpointTablet = "
|
|
553
|
-
export const KfwBreakpointDesktop = "
|
|
554
|
-
export const KfwBreakpointDesktopLarge = "
|
|
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:
|
|
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:
|
|
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:
|
|
130
|
-
$kfw-base-layout-breakpoint-sm:
|
|
131
|
-
$kfw-base-layout-breakpoint-md:
|
|
132
|
-
$kfw-base-layout-breakpoint-lg:
|
|
133
|
-
$kfw-base-layout-breakpoint-xl:
|
|
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:
|
|
247
|
-
$kfw-focusring-outline-width:
|
|
248
|
-
$kfw-focusring-outline-offset:
|
|
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:
|
|
253
|
-
$kfw-breakpoint-tablet:
|
|
254
|
-
$kfw-breakpoint-desktop:
|
|
255
|
-
$kfw-breakpoint-desktop-large:
|
|
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:
|
|
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:
|
|
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:
|
|
134
|
-
--kfw-base-layout-breakpoint-sm:
|
|
135
|
-
--kfw-base-layout-breakpoint-md:
|
|
136
|
-
--kfw-base-layout-breakpoint-lg:
|
|
137
|
-
--kfw-base-layout-breakpoint-xl:
|
|
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:
|
|
251
|
-
--kfw-focusring-outline-width:
|
|
252
|
-
--kfw-focusring-outline-offset:
|
|
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:
|
|
257
|
-
--kfw-breakpoint-tablet:
|
|
258
|
-
--kfw-breakpoint-desktop:
|
|
259
|
-
--kfw-breakpoint-desktop-large:
|
|
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 = "
|
|
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 = "
|
|
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 = "
|
|
250
|
-
export const KfwBaseLayoutBreakpointSm = "
|
|
251
|
-
export const KfwBaseLayoutBreakpointMd = "
|
|
252
|
-
export const KfwBaseLayoutBreakpointLg = "
|
|
253
|
-
export const KfwBaseLayoutBreakpointXl = "
|
|
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 = "
|
|
546
|
-
export const KfwFocusringOutlineWidth = "
|
|
547
|
-
export const KfwFocusringOutlineOffset = "
|
|
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 = "
|
|
552
|
-
export const KfwBreakpointTablet = "
|
|
553
|
-
export const KfwBreakpointDesktop = "
|
|
554
|
-
export const KfwBreakpointDesktopLarge = "
|
|
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:
|
|
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:
|
|
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:
|
|
130
|
-
$kfw-base-layout-breakpoint-sm:
|
|
131
|
-
$kfw-base-layout-breakpoint-md:
|
|
132
|
-
$kfw-base-layout-breakpoint-lg:
|
|
133
|
-
$kfw-base-layout-breakpoint-xl:
|
|
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:
|
|
247
|
-
$kfw-focusring-outline-width:
|
|
248
|
-
$kfw-focusring-outline-offset:
|
|
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:
|
|
253
|
-
$kfw-breakpoint-tablet:
|
|
254
|
-
$kfw-breakpoint-desktop:
|
|
255
|
-
$kfw-breakpoint-desktop-large:
|
|
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.
|
|
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.
|
|
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.
|
|
44
|
+
"eslint": "^9.37.0",
|
|
45
45
|
"json5": "^2.2.3",
|
|
46
46
|
"jsoneditor-cli": "^1.1.0",
|
|
47
47
|
"lodash": "4.17.21",
|