@openkfw/design-tokens 0.5.1 → 0.5.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 +36 -18
- package/demo/dist/css/style.min.css +1 -0
- package/output/css/kfw-design-tokens.light.css +0 -1
- package/output/figma/kfw-design-tokens.light.json +0 -4
- package/output/js/kfw-design-tokens.light.d.ts +0 -1
- package/output/js/kfw-design-tokens.light.js +0 -1
- package/output/json/kfw-design-tokens.light.json +0 -25
- package/output/penpot/kfw-design-tokens.light.json +0 -4
- package/output/scss/kfw-design-tokens.light.scss +0 -1
- package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css +0 -1
- package/output/web_thirdparty_16px/js/kfw-design-tokens.light.d.ts +0 -1
- package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js +0 -1
- package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss +0 -1
- package/package.json +5 -2
- package/tokens/gen-tokens.dark.json5 +0 -6
- package/tokens/tokens.json +0 -1
package/README.md
CHANGED
|
@@ -7,39 +7,54 @@ The tokens follow a template that complies with the <a href="https://tr.designto
|
|
|
7
7
|
|
|
8
8
|
**Note: The Design Tokens are still in the pilot phase.** This means that they are currently being tested and evaluated for functionality and usability. Feedback from users during this phase is crucial for making improvements and ensuring that the tokens meet the needs of all stakeholders before a full stable release.
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
[](./LICENSE)
|
|
13
|
+
[](https://www.npmjs.com/package/@openkfw/design-tokens)
|
|
14
|
+
|
|
12
15
|
|
|
13
|
-
|
|
16
|
+
## 🎨 Customizing KfW Design Tokens for Open Source
|
|
14
17
|
|
|
15
|
-
|
|
18
|
+
KfW Design Tokens, along with all related documentation, components, support, and assets such as fonts, icons, and images, are intended for **internal use** only.
|
|
19
|
+
Although the source code for KfW Design Tokens is available under the MPL 2.0 License, this open-source release is provided solely as a **showcase**.
|
|
20
|
+
KfW fully reserves all rights to the KfW brand. The use of the KfW brand and design is subject to strict restrictions, even when built into code that we provide.
|
|
21
|
+
If you have any questions or need assistance, please reach out to our "Design System & Tokens Community" in the internal Webex channel or use the official [KfW Brand-Guide](https://brand-guide.kfw.de/document/85/de#/user-interface/user-interface).
|
|
16
22
|
|
|
17
|
-
|
|
23
|
+
## 🚀 Installation
|
|
18
24
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
Run the following command to install the Design Tokens:
|
|
25
|
+
Install via npm:
|
|
22
26
|
|
|
23
27
|
```bash
|
|
24
|
-
|
|
25
|
-
npm i -D @openkfw/design-tokens
|
|
28
|
+
npm install -D @openkfw/design-tokens
|
|
26
29
|
```
|
|
27
30
|
|
|
28
|
-
Import
|
|
31
|
+
Import tokens from the output directory, for example:
|
|
29
32
|
|
|
30
33
|
```css
|
|
31
34
|
@import url("@openkfw/design-tokens/output/css/kfw-design-tokens.light.css");
|
|
32
35
|
```
|
|
33
36
|
|
|
37
|
+
Or use the prebuilt `demo` (css-boilerplate) stylesheet:
|
|
38
|
+
|
|
39
|
+
```css
|
|
40
|
+
@import url("@openkfw/design-tokens/demo/dist/css/style.min.css");
|
|
41
|
+
```
|
|
42
|
+
|
|
34
43
|
## ❤️ Contributing
|
|
35
44
|
|
|
36
|
-
Our commitment to open source encourages contributions from everyone.
|
|
45
|
+
Considering supporting with your contribution? Whether you like to contribute new patterns, fix a bug, spotted a typo or have ideas for improvement - we'd love to hear from you. Our commitment to open source encourages contributions from everyone.
|
|
37
46
|
|
|
38
|
-
## 📒
|
|
47
|
+
## 📒 License
|
|
39
48
|
|
|
40
|
-
Copyright (c) 2025 KfW
|
|
49
|
+
Copyright (c) 2025 KfW Bankengruppe
|
|
41
50
|
|
|
42
|
-
Licensed under the **Mozilla Public License 2.0 (MPL-2.0)** (the "License"); you may not use this file except in compliance with the License.
|
|
51
|
+
Licensed under the **Mozilla Public License 2.0 (MPL-2.0)** (the "License"); you may not use this file except in compliance with the License.
|
|
52
|
+
You may obtain a copy of the License by reviewing the file [LICENSE](./LICENSE) in the repository. Unless required by applicable law or agreed to in writing,
|
|
53
|
+
software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the [LICENSE](./LICENSE) for
|
|
54
|
+
the specific language governing permissions and limitations under the License. KfW may update this licensing agreement at any time. This notice and permission must be
|
|
55
|
+
included in all copies or substantial portions of the Software.
|
|
56
|
+
|
|
57
|
+
Last updated: Nov 17, 2025
|
|
43
58
|
|
|
44
59
|
## 💁 FAQ
|
|
45
60
|
|
|
@@ -63,7 +78,10 @@ Currently, CSS variables cannot be used directly in media query declarations. Ho
|
|
|
63
78
|
As a workaround, you can extract your variables into @custom-media rules and generate your CSS using the PostCSS plugin `postcss-custom-media`. A sample integration can be found in the `/demo` directory.
|
|
64
79
|
Otherwise you can use the static `px` values provided in the design tokens.
|
|
65
80
|
|
|
66
|
-
### How to use breakpoint design tokens
|
|
81
|
+
### How to use breakpoint design tokens with @media in Tailwind CSS?
|
|
82
|
+
|
|
83
|
+
In Tailwind CSS v3, define breakpoints in your `tailwind.config.js` using JavaScript.
|
|
84
|
+
In Tailwind CSS v4, you can either:
|
|
67
85
|
|
|
68
|
-
|
|
69
|
-
|
|
86
|
+
- Use the [SCSS preprocessor](https://v3.tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus) and reference breakpoint variables, or
|
|
87
|
+
- Use the CSS version with the `postcss-custom-media` workaround described above.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer core,third-party,components,utility;@layer core.reset,core.tokens,core.base;@layer third-party.imports,third-party.overrides;@layer components.base,components.variations;@layer core.reset{*,*:after,*:before{box-sizing:border-box}:focus-visible{outline-offset:3px}:where(html){-webkit-text-size-adjust:none;text-size-adjust:none}:where(html){line-height:1.5}:where(html){scrollbar-gutter:stable}:where(h1){font-size:2em;margin-block:.67em}:where(abbr[title]){cursor:help;text-decoration-line:underline;text-decoration-style:dotted}@media(forced-colors:active){mark{color:HighlightText;background-color:Highlight}}:where(del,ins,s):before,:where(del,ins,s):after{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;position:absolute;white-space:nowrap;content:"test"}:where(s):before{content:"stricken text start "}:where(s):after{content:" stricken text end"}:where(del):before{content:"deletion start "}:where(del):after{content:" deletion end"}:where(ins):before{content:"insertion start "}:where(ins):after{content:" insertion end"}:where(audio,iframe,img,svg,video){max-block-size:100%;max-inline-size:100%}:where(fieldset){min-inline-size:0}:where(label):has(+:where(textarea,input,select)){display:block}:where(textarea:not([rows])){min-block-size:6em}:where(button,input,select,textarea){font-family:inherit;font-size:inherit}:where([type=search]){-webkit-appearance:textfield}@supports (-webkit-touch-callout: none){:where([type=search]){border:1px solid -apple-system-secondary-label;background-color:canvas}}:where([type=tel],[type=url],[type=email],[type=number]):not(:placeholder-shown){direction:ltr}:where(table){border-collapse:collapse;border:1px solid}:where(th,td){border:1px solid;padding:.25em .5em}:where(dialog)::backdrop{background:#0000004d}:where(dialog),:where(dialog)::backdrop{opacity:0;transition:opacity .3s ease-out,display .3s allow-discrete,overlay .3s allow-discrete}:where(dialog[open]),:where(dialog[open])::backdrop{opacity:1}@starting-style{:where(dialog[open]),:where(dialog[open])::backdrop{opacity:0}}[hidden]:not([hidden=until-found]){display:none!important}}@layer core.tokens{:root,:host,.kfw-theme--light{color-scheme:light}:root,:host,.kfw-theme--light{--kfw-base-color-blue-100: #e9f5fb;--kfw-base-color-blue-400: #54b3e2;--kfw-base-color-blue-500: #007abc;--kfw-base-color-blue-600: #005a8c;--kfw-base-color-blue-700: #00446e;--kfw-base-color-blue-800: #00375b;--kfw-base-color-green-100: #ecfded;--kfw-base-color-green-300: #b7f9aa;--kfw-base-color-green-400: #94eb90;--kfw-base-color-green-700: #398357;--kfw-base-color-white-90: #ffffffe6;--kfw-base-color-white-95: #fffffff2;--kfw-base-color-white: #ffffff;--kfw-base-color-black: #000000;--kfw-base-color-gray-50: #f6f7f8;--kfw-base-color-gray-100: #eef0f2;--kfw-base-color-gray-200: #d8dfe3;--kfw-base-color-gray-300: #a1adb5;--kfw-base-color-gray-400: #6d767d;--kfw-base-color-gray-500-10: #41484c1a;--kfw-base-color-gray-500-30: #41484c4d;--kfw-base-color-gray-500-90: #41484ce6;--kfw-base-color-gray-500: #41484c;--kfw-base-color-gray-600: #2d3134;--kfw-base-color-violet-400: #9598e0;--kfw-base-color-violet-500: #686fc8;--kfw-base-color-red-400: #c80538;--kfw-base-color-yellow-500: #eac80b;--kfw-base-fontfamily-sans: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;--kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--kfw-base-space-static-5: .5rem;--kfw-base-space-static-10: 1rem;--kfw-base-space-static-15: 1.5rem;--kfw-base-space-static-20: 2rem;--kfw-base-space-static-25: 2.5rem;--kfw-base-space-static-30: 3rem;--kfw-base-space-static-35: 3.5rem;--kfw-base-space-static-40: 4rem;--kfw-base-space-static-50: 5rem;--kfw-base-space-static-60: 6rem;--kfw-base-space-fluid-5-min: .5rem;--kfw-base-space-fluid-5-max: 1rem;--kfw-base-space-fluid-5-val: .735vi + .588px;--kfw-base-space-fluid-10-min: 1rem;--kfw-base-space-fluid-10-max: 1.5rem;--kfw-base-space-fluid-10-val: .735vi + .5588rem;--kfw-base-space-fluid-15-min: 1.5rem;--kfw-base-space-fluid-15-max: 2rem;--kfw-base-space-fluid-15-val: .735vi + 1.0588rem;--kfw-base-space-fluid-20-min: 2rem;--kfw-base-space-fluid-20-max: 2.5rem;--kfw-base-space-fluid-20-val: .735vi + 1.5588rem;--kfw-base-space-fluid-25-min: 2.5rem;--kfw-base-space-fluid-25-max: 3rem;--kfw-base-space-fluid-25-val: .735vi + 2.0588rem;--kfw-base-space-fluid-30-min: 3rem;--kfw-base-space-fluid-30-max: 3.5rem;--kfw-base-space-fluid-30-val: .735vi + 2.5588rem;--kfw-base-space-fluid-35-min: 3.5rem;--kfw-base-space-fluid-35-max: 4rem;--kfw-base-space-fluid-35-val: .735vi + 3.0588rem;--kfw-base-space-fluid-40-min: 4rem;--kfw-base-space-fluid-40-max: 5rem;--kfw-base-space-fluid-40-val: 1.471vi + 3.1176rem;--kfw-base-space-fluid-50-min: 5rem;--kfw-base-space-fluid-50-max: 6rem;--kfw-base-space-fluid-50-val: 1.471vi + 4.1176rem;--kfw-base-fontsize-static-sm: 1.4rem;--kfw-base-fontsize-static-md: 1.6rem;--kfw-base-fontsize-static-lg: 1.8rem;--kfw-base-fontsize-static-xl: 2rem;--kfw-base-fontsize-static-2xl: 2.2rem;--kfw-base-fontsize-static-3xl: 2.4rem;--kfw-base-fontsize-static-4xl: 2.6rem;--kfw-base-fontsize-static-5xl: 2.8rem;--kfw-base-fontsize-static-6xl: 3rem;--kfw-base-fontsize-static-7xl: 3.2rem;--kfw-base-fontsize-static-8xl: 3.6rem;--kfw-base-fontsize-fluid-sm-min: 1.4rem;--kfw-base-fontsize-fluid-sm-max: 1.6rem;--kfw-base-fontsize-fluid-sm-val: .294vi + 1.2235rem;--kfw-base-fontsize-fluid-md-min: 1.6rem;--kfw-base-fontsize-fluid-md-max: 1.8rem;--kfw-base-fontsize-fluid-md-val: .294vi + 1.4235rem;--kfw-base-fontsize-fluid-lg-min: 1.8rem;--kfw-base-fontsize-fluid-lg-max: 2rem;--kfw-base-fontsize-fluid-lg-val: .294vi + 1.6235rem;--kfw-base-fontsize-fluid-xl-min: 2rem;--kfw-base-fontsize-fluid-xl-max: 2.2rem;--kfw-base-fontsize-fluid-xl-val: .294vi + 1.8235rem;--kfw-base-fontsize-fluid-2xl-min: 2.2rem;--kfw-base-fontsize-fluid-2xl-max: 2.4rem;--kfw-base-fontsize-fluid-2xl-val: .294vi + 2.0235rem;--kfw-base-fontsize-fluid-3xl-min: 2.4rem;--kfw-base-fontsize-fluid-3xl-max: 2.6rem;--kfw-base-fontsize-fluid-3xl-val: .294vi + 2.2235rem;--kfw-base-fontsize-fluid-4xl-min: 2.6rem;--kfw-base-fontsize-fluid-4xl-max: 2.8rem;--kfw-base-fontsize-fluid-4xl-val: .294vi + 2.4234999999999998rem;--kfw-base-fontsize-fluid-5xl-min: 2.8rem;--kfw-base-fontsize-fluid-5xl-max: 3.2rem;--kfw-base-fontsize-fluid-5xl-val: .588vi + 2.4471rem;--kfw-base-fontsize-fluid-6xl-min: 3rem;--kfw-base-fontsize-fluid-6xl-max: 3.6rem;--kfw-base-fontsize-fluid-6xl-val: .882vi + 2.4706rem;--kfw-base-lineheight-2xs: 1.2;--kfw-base-lineheight-xs: 1.3;--kfw-base-lineheight-sm: 1.333;--kfw-base-lineheight-md: 1.4;--kfw-base-lineheight-lg: 1.5;--kfw-base-borderradius-sm: 2px;--kfw-base-borderradius-md: .4rem;--kfw-base-borderradius-lg: 2rem;--kfw-base-borderradius-circle: 999.9rem;--kfw-base-borderwidth-none: 0;--kfw-base-borderwidth-md: 1px;--kfw-base-borderwidth-lg: 2px;--kfw-base-fontweight-regular: 400;--kfw-base-fontweight-medium: 500;--kfw-base-letterspacing-tight: -.5px;--kfw-base-letterspacing-normal: 0;--kfw-base-letterspacing-wide: .5px;--kfw-base-letterspacing-wider: 1px;--kfw-base-layout-breakpoint-xs: 320px;--kfw-base-layout-breakpoint-sm: 600px;--kfw-base-layout-breakpoint-md: 840px;--kfw-base-layout-breakpoint-lg: 960px;--kfw-base-layout-breakpoint-xl: 1280px;--kfw-base-layout-container-sm: 89.6rem;--kfw-base-layout-container-md: 108rem;--kfw-base-layout-container-lg: 128rem;--kfw-base-layout-safezone-static-md: 2rem;--kfw-base-layout-safezone-static-lg: 4rem;--kfw-base-layout-safezone-fluid-min: 2rem;--kfw-base-layout-safezone-fluid-max: 4rem;--kfw-base-layout-safezone-fluid-val: 2.941vi + .2353rem;--kfw-base-layout-gridcolumn-1: 1;--kfw-base-layout-gridcolumn-2: 2;--kfw-base-layout-gridcolumn-3: 3;--kfw-base-layout-gridcolumn-4: 4;--kfw-base-layout-gridcolumn-6: 6;--kfw-base-layout-gridcolumn-8: 8;--kfw-base-layout-gridcolumn-12: 12;--kfw-base-layout-gridgap-static-xs: 1.2rem;--kfw-base-layout-gridgap-static-sm: 1.8rem;--kfw-base-layout-gridgap-static-md: 2.2rem;--kfw-base-layout-gridgap-static-lg: 2.6rem;--kfw-base-layout-gridgap-static-xl: 3.6rem;--kfw-base-layout-gridgap-fluid-min: 1.2rem;--kfw-base-layout-gridgap-fluid-max: 3.6rem;--kfw-base-layout-gridgap-fluid-val: 3.529vi - .9176rem;--kfw-color-fn: #005a8c;--kfw-color-fn-active: #00446e;--kfw-color-fn-inactive: #a1adb5;--kfw-color-fn-border: #2d3134;--kfw-color-fn-label: #2d3134;--kfw-color-text: #2d3134;--kfw-color-text-on-dark-bg: #ffffff;--kfw-color-text-on-disabled: #ffffff;--kfw-color-text-headline-on-dark-bg: #b7f9aa;--kfw-color-background: #ffffff;--kfw-color-background-subtle: #f6f7f8;--kfw-color-background-disabled: #a1adb5;--kfw-color-background-light-blue: #e9f5fb;--kfw-color-background-light-green: #ecfded;--kfw-color-background-dark-blue: #00375b;--kfw-color-background-dark-green: #398357;--kfw-color-opaque-white-90: #ffffffe6;--kfw-color-opaque-white-95: #fffffff2;--kfw-color-opaque-gray-500-10: #41484c1a;--kfw-color-opaque-gray-500-30: #41484c4d;--kfw-color-opaque-gray-500-90: #41484ce6;--kfw-color-state-danger: #c80538;--kfw-color-state-success: #398357;--kfw-color-state-warning: #9598e0;--kfw-color-status-red: #c80538;--kfw-color-status-yellow: #eac80b;--kfw-color-status-green: #398357;--kfw-color-line-6: #00446e;--kfw-color-line-7: #2d3134;--kfw-color-line-8: #a1adb5;--kfw-color-line-9: #005a8c;--kfw-color-line-10: #2d3134;--kfw-color-line-11: #b7f9aa;--kfw-color-line-12: #a1adb5;--kfw-color-product-container: #f6f7f8;--kfw-color-product-benefit: #007abc;--kfw-color-product-credit: #398357;--kfw-color-product-cooperation: #686fc8;--kfw-color-product-credit-benefit: #41484c;--kfw-color-icon: #005a8c;--kfw-color-icon-secondary: #54b3e2;--kfw-color-icon-disabled: #398357;--kfw-color-icon-disabled-secondary: #94eb90;--kfw-fontfamily: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;--kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--kfw-space-xsmall: 1rem;--kfw-space-small: 2rem;--kfw-space-medium: 3rem;--kfw-space-large-min: 3.5rem;--kfw-space-large-max: 4rem;--kfw-space-large-val: .735vi + 3.0588rem;--kfw-space-big-min: 5rem;--kfw-space-big-max: 6rem;--kfw-space-big-val: 1.471vi + 4.1176rem;--kfw-fontspace: 2rem;--kfw-fontspace-2xsmall: .5rem;--kfw-fontspace-xsmall: 1rem;--kfw-fontspace-small: 1.5rem;--kfw-fontspace-large: 3rem;--kfw-fontspace-heading-1: 2rem;--kfw-fontspace-heading-2: 2rem;--kfw-fontspace-heading-3: 1rem;--kfw-fontspace-heading-4: 1rem;--kfw-fontspace-heading-5: 1rem;--kfw-fontspace-heading-6: 1rem;--kfw-fontsize: 1.6rem;--kfw-fontsize-introduction: 2rem;--kfw-fontsize-large: 1.8rem;--kfw-fontsize-small: 1.4rem;--kfw-fontsize-heading-1-min: 3rem;--kfw-fontsize-heading-1-max: 3.6rem;--kfw-fontsize-heading-1-val: .882vi + 2.4706rem;--kfw-fontsize-heading-2-min: 2.8rem;--kfw-fontsize-heading-2-max: 3.2rem;--kfw-fontsize-heading-2-val: .588vi + 2.4471rem;--kfw-fontsize-heading-3-min: 2.4rem;--kfw-fontsize-heading-3-max: 2.6rem;--kfw-fontsize-heading-3-val: .294vi + 2.2235rem;--kfw-fontsize-heading-4-min: 2rem;--kfw-fontsize-heading-4-max: 2.2rem;--kfw-fontsize-heading-4-val: .294vi + 1.8235rem;--kfw-fontsize-heading-5: 1.8rem;--kfw-fontsize-heading-6: 1.6rem;--kfw-lineheight: 1.4;--kfw-lineheight-list: 1.5;--kfw-lineheight-heading: 1.3;--kfw-lineheight-heading-5: 1.333;--kfw-borderradius: .4rem;--kfw-borderradius-large: 2rem;--kfw-borderradius-small: 2px;--kfw-borderradius-circle: 999.9rem;--kfw-borderwidth: 1px;--kfw-borderwidth-large: 2px;--kfw-focusring-outline-width: 2px;--kfw-focusring-outline-offset: 2px;--kfw-focusring-outline-style: dashed;--kfw-fontweight: 400;--kfw-fontweight-bold: 500;--kfw-breakpoint-mobile: 600px;--kfw-breakpoint-tablet: 840px;--kfw-breakpoint-desktop: 960px;--kfw-breakpoint-desktop-large: 1280px;--kfw-contentwrapper-narrow: 89.6rem;--kfw-contentwrapper-basic: 108rem;--kfw-contentwrapper-extended: 128rem;--kfw-safezone-min: 2rem;--kfw-safezone-max: 4rem;--kfw-safezone-val: 2.941vi + .2353rem}}@layer core.tokens;@layer core{@layer tokens{:root{--kfw-safezone: clamp(var(--kfw-safezone-min), var(--kfw-safezone-val), var(--kfw-safezone-max));--kfw-space-large: clamp(var(--kfw-space-large-min), var(--kfw-space-large-val), var(--kfw-space-large-max));--kfw-space-big: clamp(var(--kfw-space-big-min), var(--kfw-space-big-val), var(--kfw-space-big-max));--headline-color: var(--kfw-color-text);--kfw-focusring-outline-color: var(--kfw-color-fn-active)}}@layer base{:root{font-size:62.5%;font-family:var(--kfw-fontfamily);background-color:var(--kfw-color-background);color:var(--kfw-color-text);line-height:var(--kfw-lineheight);font-weight:var(--kfw-fontweight);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*:focus-visible{outline:var(--kfw-focusring-outline-width) var(--kfw-focusring-outline-style) var(--kfw-focusring-outline-color);outline-offset:var(--kfw-focusring-outline-offset)}body{margin:0;font-size:1.6rem}strong,b{font-weight:var(--kfw-fontweight-bold)}small{font-size:80%}:is(sub,sup){position:relative;line-height:0;vertical-align:baseline;font-size:75%}sub{bottom:-.25em}sup{top:-.5em}:is(address,blockquote,dl,ol,p,pre,table,ul){margin-block:0 var(--kfw-fontspace)}:is(address,blockquote,dl,ol,p,pre,table,ul):last-child{margin-block-end:0}ul,ol,menu{list-style:none inside none;padding-inline-start:0}mark{padding:.125rem .25rem;vertical-align:baseline;background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg)}blockquote{margin-inline:0}blockquote footer{margin-block-start:var(--kfw-fontspace-2xsmall)}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}audio,video{display:inline-block}:where(iframe){border-style:none}img,video{max-width:100%;height:auto;border-style:none}figure{display:block;margin:0;padding:0}figure figcaption{padding:var(--kfw-space-xsmall)}code,kbd,samp,pre{font-family:var(--kfw-fontfamily-code);line-height:initial}pre{display:block;margin-block:0 var(--kfw-fontspace);overflow:auto;-ms-overflow-style:scrollbar}abbr[title]{text-decoration:underline dotted;cursor:help}ins{color:var(--kfw-color-state-success);text-decoration:none}del{color:var(--kfw-color-state-danger)}:is(h1,h2,h3,h4,h5,h6,.hl--1,.hl--2,.hl--3,.hl--4,.hl--5,.hl--6){font-weight:var(--kfw-fontweight-bold);line-height:var(--kfw-lineheight-heading);margin-block-start:0;color:var(--headline-color);display:block}h1,.hl--1{font-size:clamp(var(--kfw-fontsize-heading-1-min),var(--kfw-fontsize-heading-1-val),var(--kfw-fontsize-heading-1-max));margin-block-end:var(--kfw-fontspace-heading-1)}@media(min-width:1280px){h1,.hl--1{letter-spacing:var(--kfw-base-letterspacing-tight)}}h2,.hl--2{font-size:clamp(var(--kfw-fontsize-heading-2-min),var(--kfw-fontsize-heading-2-val),var(--kfw-fontsize-heading-2-max));margin-block-end:var(--kfw-fontspace-heading-2);letter-spacing:var(--kfw-base-letterspacing-tight)}h3,.hl--3{font-size:clamp(var(--kfw-fontsize-heading-3-min),var(--kfw-fontsize-heading-3-val),var(--kfw-fontsize-heading-3-max));margin-block-end:var(--kfw-fontspace-heading-3);letter-spacing:var(--kfw-base-letterspacing-tight)}@media(min-width:1280px){h3,.hl--3{letter-spacing:var(--kfw-base-letterspacing-normal)}}h4,.hl--4{font-size:clamp(var(--kfw-fontsize-heading-4-min),var(--kfw-fontsize-heading-4-val),var(--kfw-fontsize-heading-4-max));margin-block-end:var(--kfw-fontspace-heading-4)}h5,.hl--5{font-size:var(--kfw-fontsize-heading-5);margin-block-end:var(--kfw-fontspace-heading-5);line-height:var(--kfw-lineheight-heading-5);letter-spacing:var(--kfw-base-letterspacing-normal)}@media(min-width:1280px){h5,.hl--5{letter-spacing:var(--kfw-base-letterspacing-wide)}}h6,.hl--6{font-size:var(--kfw-fontsize-heading-6);margin-block-end:var(--kfw-fontspace-heading-6);letter-spacing:var(--kfw-base-letterspacing-wide);line-height:var(--kfw-lineheight)}:where(a:not([role=button])),[role=link]{--link-color: var(--kfw-color-fn);--link-color-hover: var(--kfw-color-fn-active);color:var(--link-color);text-decoration:none;border-radius:var(--kfw-borderradius)}a:not([role=button]):where(:hover,:focus,:active,[aria-current]:not([aria-current=false])),[role=link]:where(:hover,:focus,:active,[aria-current]:not([aria-current=false])){color:var(--link-color-hover);text-decoration:underline}a[role=button]{display:inline-block}.form-control{--borderhover: var(--kfw-color-fn-active);--placeholder-color: var(--kfw-color-fn);appearance:none;width:100%;height:4.3rem;font-size:var(--kfw-fontsize);font-family:inherit;line-height:var(--kfw-lineheight);color:var(--kfw-color-fn);border-radius:var(--kfw-borderradius);margin-block-start:0;border:var(--kfw-borderwidth) solid var(--kfw-base-color-gray-500);padding-inline:1.5rem;padding-block:1rem;background-color:var(--kfw-color-background)}.form-control::placeholder{color:var(--placeholder-color)}.form-control:disabled{--placeholder-color: var(--kfw-color-text);background-color:transparent;color:var(--kfw-color-text);border-color:var(--kfw-color-fn-inactive)}.form-control:hover:not(:disabled){box-shadow:0 0 0 var(--kfw-borderwidth) var(--borderhover)}:is([type=checkbox],[type=radio],select.form-control):not(:disabled){cursor:pointer}select.form-control{padding-block:0}textarea.form-control{height:auto}.form-control[aria-invalid=true]{--borderhover: var(--kfw-color-state-danger);--placeholder-color: var(--kfw-color-state-danger);border-color:var(--kfw-color-state-danger);color:var(--kfw-color-state-danger);box-shadow:0 0 0 var(--kfw-borderwidth) var(--borderhover)}:is(progress,[type=checkbox],[type=radio],[type=range]){accent-color:var(--kfw-color-fn)}textarea{display:block;resize:vertical}fieldset{margin:0;padding:0;border:0}[type=file],[type=range]{padding:0;border:0;width:100%}[type=file]::file-selector-button{margin-inline-end:var(--kfw-space-xsmall)}.file-upload{display:flex;flex-direction:column;align-items:center;padding:var(--kfw-space-small) var(--kfw-space-small) var(--kfw-space-medium);background-color:var(--kfw-color-background-light-green);margin-block-end:var(--kfw-space-medium);overflow:hidden}.file-upload__title{margin-block-end:var(--kfw-fontspace)}label.file-upload__title{margin-block-end:var(--kfw-fontspace);font-weight:var(--kfw-fontweight)}.file-upload__input{width:auto;max-width:100%;position:relative;left:0;transform:translate(20%);color:transparent}.file-upload__input--has-files{transform:none;color:inherit}.file-upload__icon{position:relative;display:block;transform:scale(1);width:2.8rem;height:1.3rem;border:.3rem solid var(--kfw-color-fn);border-top:0;margin-block:2.5rem 2rem}.file-upload__icon:before,.file-upload__icon:after{content:"";display:block;position:absolute}.file-upload__icon:before{left:1rem;bottom:.4rem;width:.3rem;height:1.9rem;background-color:var(--kfw-color-fn)}.file-upload__icon:after{bottom:.7rem;left:.35rem;width:1.6rem;height:1.6rem;transform:rotate(45deg);border-left:.3rem solid var(--kfw-color-fn);border-top:.3rem solid var(--kfw-color-fn)}:where(input,select,textarea,fieldset)+small,.invalid-feedback{display:block;width:100%;margin-block-start:.8rem;font-size:var(--kfw-fontsize-small);line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal)}.invalid-feedback{color:var(--kfw-color-state-danger)}:is(label,fieldset legend,.form-label){display:inline-block;margin-block-end:.8rem;font-weight:var(--kfw-fontweight-bold);color:var(--kfw-color-text)}:is([type=checkbox],[type=radio]){appearance:none;width:var(--field-size);height:var(--field-size);margin:0;border:var(--kfw-borderwidth) solid var(--kfw-color-fn-active);color:var(--kfw-color-fn-active);vertical-align:middle;position:relative;display:flex;align-items:center;flex-shrink:0;justify-content:center;background-color:var(--kfw-color-background)}:is([type=checkbox],[type=radio])[aria-invalid=true]{border-color:var(--kfw-color-state-danger);border-width:var(--kfw-borderwidth-large);color:var(--kfw-color-state-danger)}[type=radio]{border-radius:var(--kfw-borderradius-circle)}[type=checkbox]{border-radius:var(--kfw-borderradius)}:is([type=checkbox],[type=radio]):disabled{background-color:var(--kfw-base-color-gray-100);color:var(--kfw-color-fn-inactive);border-color:var(--kfw-color-fn-inactive)}:is([type=checkbox],[type=radio]):before{content:none;display:block;position:absolute;top:50%;left:50%;border-color:currentcolor;border-bottom-style:solid;border-left-style:solid}[type=checkbox]:before{width:1.6rem;height:.9rem;transform:translate(-50%,-50%) rotate(314deg);margin-top:-1px;border-bottom-width:.225rem;border-left-width:.225rem}[type=radio]:before{width:1.4rem;height:1.4rem;transform:translate(-50%,-50%);border-radius:var(--kfw-borderradius-circle);background-color:currentcolor;forced-color-adjust:none}:is([type=checkbox],[type=radio]):checked:before{content:""}:is([type=radio],[type=checkbox]):hover:not(:disabled),:is([type=radio],[type=checkbox]):focus:not(:disabled){border-width:var(--kfw-borderwidth-large)}.form-group{margin-block-end:var(--kfw-space-medium)}.list-group-form{--col-gap: 1.5rem;--field-size: 2.8rem;align-items:flex-start;display:flex;flex-direction:column;gap:var(--kfw-space-small) var(--kfw-space-medium)}.list-group-form>*{align-items:flex-start;display:flex;margin-bottom:0}.list-group-form--with-description label{font-weight:var(--kfw-fontweight-bold)}.list-group-form--with-description label>*{font-weight:var(--kfw-fontweight)}.list-group-form>*:has(.list-group-form--subgroup){flex-wrap:wrap}.list-group-form label{font-weight:var(--kfw-fontweight);padding-left:var(--col-gap);width:100%;margin-block-end:0;display:flex;flex:1 1;flex-direction:column;padding-block-start:.4rem}.list-group-form>*:has(input:not(:disabled)) label{cursor:pointer}.list-group-form--subgroup{flex-basis:100%;margin-block-start:var(--kfw-space-small);padding-left:calc(var(--field-size) + var(--col-gap))}@media(min-width:600px){.list-group-form--inline{flex-flow:row wrap}}button,[type=submit],[type=reset],[type=button],[type=file]::file-selector-button,[role=button]{border:var(--kfw-borderwidth) solid transparent;font-family:var(--kfw-fontfamily);font-size:var(--kfw-fontsize);border-radius:var(--kfw-borderradius);display:inline-flex;gap:.8rem;text-align:center;text-decoration:none;line-height:var(--kfw-lineheight);padding:1.2rem 2.5rem;justify-content:center;max-width:100%;vertical-align:middle;white-space:nowrap;cursor:pointer}.button--primary{--button-border-color: var(--kfw-color-fn);--button-bg: var(--kfw-color-fn);--button-color: var(--kfw-color-text-on-dark-bg);--button-border-color-hover: var(--kfw-color-fn-active);--button-bg-hover: var(--kfw-color-fn-active);--button-color-hover: var(--button-color);background-color:var(--button-bg);color:var(--button-color);border-color:var(--button-border-color)}.button--primary:is(:hover,:focus){color:var(--button-color-hover);background-color:var(--button-bg-hover);border-color:var(--button-border-color-hover);text-decoration:underline}[type=file]::file-selector-button,:is([type=reset],.button--secondary){--button-border-color: var(--kfw-color-fn);--button-bg: transparent;--button-color: var(--kfw-color-fn);--button-border-color-hover: var(--kfw-color-fn-active);--button-bg-hover: var(--kfw-color-fn-active);--button-color-hover: var(--kfw-color-text-on-dark-bg);background-color:var(--button-bg);color:var(--button-color);border-color:var(--button-border-color)}[type=file]::file-selector-button:is(:hover,:focus),:is([type=reset],.button--secondary):is(:hover,:focus){color:var(--button-color-hover);background-color:var(--button-bg-hover);border-color:var(--button-border-color-hover);text-decoration:underline}.button--tertiary{--button-color: var(--kfw-color-fn);--button-bg: transparent;--button-color-hover: var(--kfw-color-fn-active);background-color:var(--button-bg);color:var(--button-color);padding:0;border:0;text-decoration:none}.button--tertiary:is(:hover,:focus){color:var(--button-color-hover);text-decoration:underline}.button--small{padding:.8rem 1.6rem;font-size:var(--kfw-fontsize-small)}input:not([type=submit],[type=button],[type=reset])[disabled],select[disabled],textarea[disabled],label[aria-disabled=true],:where(fieldset[disabled]) :is(input:not([type=submit],[type=button],[type=reset]),select,textarea){pointer-events:none}:is(.container,.container-fluid,.container-narrow,.container-extended,.container-extended-fullwidth){margin-inline:auto;width:100%}:is(.container,.container-fluid,.container-narrow,.container-extended){padding-inline:var(--kfw-safezone)}.container{max-width:var(--kfw-contentwrapper-basic)}.container-narrow{max-width:var(--kfw-contentwrapper-narrow)}.container-extended,.container-extended-fullwidth{max-width:var(--kfw-contentwrapper-extended)}[class^=container]>section{margin-block:var(--kfw-space-large) var(--kfw-space-large)}.overflow-auto{overflow:auto}}}@layer components{@layer base{.header{background-color:var(--kfw-color-background);border-bottom:var(--kfw-borderwidth) solid var(--kfw-color-line-11);position:sticky;top:0;z-index:1000}.header>div{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:6.4rem;gap:var(--kfw-space-medium)}.header img{width:auto}.header__menu{text-align:right}.header-logo-mobile{height:2.8rem}.header-logo-desktop{display:none}.header--sticky .header-logo-mobile{display:block}.header--sticky .header-logo-desktop{display:none}@media(min-width:960px){.header :is(button,a){font-size:var(--kfw-fontsize-large)}.header-logo-mobile{display:none}.header-logo-desktop{display:block;height:6rem;margin-block:3rem}}.footer{--kfw-focusring-outline-color: var(--kfw-color-background);border-top:var(--kfw-base-borderwidth-md) solid var(--kfw-color-line-11);background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg);font-size:var(--kfw-fontsize-small);line-height:var(--kfw-lineheight);padding-block:var(--kfw-space-medium) var(--kfw-space-large)}.footer .button--secondary{--button-color: var(--kfw-color-text-on-dark-bg);--button-border-color: var(--kfw-color-text-on-dark-bg);--button-bg-hover: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--kfw-color-text);--button-border-color-hover: var(--kfw-color-text-on-dark-bg)}.footer :where(a:not([role=button])),.footer [role=link]{--link-color: var(--kfw-color-text-on-dark-bg);--link-color-hover: var(--kfw-color-text-on-dark-bg);text-decoration:underline}.footer a:not([role=button]):where(:hover,:focus,:active,[aria-current]:not([aria-current=false])),.footer [role=link]:where(:hover,:focus,:active,[aria-current]:not([aria-current=false])){text-decoration:none}.footer>*{align-items:baseline;display:flex;flex-direction:column;gap:var(--kfw-space-medium);justify-content:space-between}@media(min-width:960px){.footer>*{gap:3.6rem;flex-direction:row}}.footer__copyright{flex-shrink:0}.footer__list{list-style:none;padding:0;margin:0;display:flex;flex-flow:row wrap;max-width:100%;gap:1.6rem var(--kfw-space-large)}.grid{display:grid;grid-template-columns:1fr;column-gap:var(--kfw-safezone);margin-block-end:var(--kfw-fontspace)}@media(min-width:840px){.grid{grid-template-columns:repeat(auto-fit,minmax(0,1fr));margin-block-end:0}}.hero{--hero-content-desktop-width: 42.9rem}.hero>*{position:relative}.hero__bars{display:block;width:100%}@media(min-width:960px){.hero__bars{width:var(--hero-content-desktop-width);position:absolute;top:4rem;left:4rem;bottom:4rem}}.hero__title{width:100%;margin-block:0;align-items:center;display:flex;flex-direction:row;padding:2rem;background-color:var(--kfw-color-background-light-blue)}@media(min-width:960px){.hero__title{flex-direction:row;position:absolute;display:flex;width:var(--hero-content-desktop-width);background-color:var(--kfw-color-opaque-white-95);left:4rem;top:calc(5rem + 25px);border-radius:0 0 var(--kfw-borderradius-large) 0;padding:2rem 3rem 3rem}}.hero__image{width:100%;margin-inline:auto;display:block;object-fit:cover;height:auto;max-width:128rem}}@layer variations{.bg-dark{--headline-color: var(--kfw-color-text-headline-on-dark-bg);--kfw-focusring-outline-color: var(--kfw-color-background);background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg)}.bg-dark :where(a:not([role=button])),.bg-dark [role=link]{--link-color: var(--kfw-color-text-on-dark-bg);--link-color-hover: var(--kfw-color-text-on-dark-bg);text-decoration:underline}.bg-dark :where(a:not([role=button])):is([aria-current]:not([aria-current=false]),:hover,:active,:focus),.bg-dark [role=link]:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){text-decoration:none}.bg-dark .button--primary{--button-color: var(--kfw-color-fn);--button-bg: var(--kfw-color-text-on-dark-bg);--button-border-color: var(--kfw-color-text-on-dark-bg);--button-bg-hover: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--button-color);--button-border-color-hover: var(--kfw-color-text-on-dark-bg)}.bg-dark .button--secondary{--button-color: var(--kfw-color-text-on-dark-bg);--button-border-color: var(--kfw-color-text-on-dark-bg);--button-bg-hover: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--kfw-color-text);--button-border-color-hover: var(--kfw-color-text-on-dark-bg)}.bg-dark .button--tertiary{--button-color: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--kfw-color-text-on-dark-bg)}.bg-subtle{background-color:var(--kfw-color-background-subtle)}.hl--sb{line-height:var(--kfw-lineheight-heading);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize-introduction)}@media(min-width:1280px){.hl--sb{font-size:var(--kfw-base-fontsize-static-5xl)}}.smk--1{line-height:var(--kfw-lineheight-heading);letter-spacing:var(--kfw-base-letterspacing-wider);font-size:var(--kfw-fontsize-small)}.tx--1{line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize)}.tx--1-medium{line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-wide);font-size:var(--kfw-fontsize)}.tx--2{line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize-small)}.tx--4{line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize-introduction)}}}@layer utility{.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.d-block{display:block}.m-auto{margin-inline:auto}.p-x{padding-inline:var(--kfw-safezone)}.p-y{padding-block:var(--kfw-safezone)}.m-x{margin-inline:var(--kfw-safezone)}.m-y{margin-block:var(--kfw-safezone)}.mb-xs{margin-block-end:var(--kfw-space-xsmall)}.mb-sm{margin-block-end:var(--kfw-space-small)}.mb-md{margin-block-end:var(--kfw-space-medium)}.mb-lg{margin-block-end:var(--kfw-space-large)}.mb-xl{margin-block-end:var(--kfw-space-big)}}
|
|
@@ -119,7 +119,6 @@
|
|
|
119
119
|
--kfw-base-borderradius-md: 0.4rem;
|
|
120
120
|
--kfw-base-borderradius-lg: 2rem;
|
|
121
121
|
--kfw-base-borderradius-circle: 999.9rem;
|
|
122
|
-
--kfw-base-borderwidth-none: 0;
|
|
123
122
|
--kfw-base-borderwidth-md: 1px;
|
|
124
123
|
--kfw-base-borderwidth-lg: 2px;
|
|
125
124
|
--kfw-base-fontweight-regular: 400;
|
|
@@ -233,7 +233,6 @@ export const KfwBaseBorderradiusSm: string;
|
|
|
233
233
|
export const KfwBaseBorderradiusMd: string;
|
|
234
234
|
export const KfwBaseBorderradiusLg: string;
|
|
235
235
|
export const KfwBaseBorderradiusCircle: string;
|
|
236
|
-
export const KfwBaseBorderwidthNone: string;
|
|
237
236
|
export const KfwBaseBorderwidthMd: string;
|
|
238
237
|
export const KfwBaseBorderwidthLg: string;
|
|
239
238
|
export const KfwBaseFontweightRegular: number;
|
|
@@ -235,7 +235,6 @@ export const KfwBaseBorderradiusSm = "2px";
|
|
|
235
235
|
export const KfwBaseBorderradiusMd = "0.4rem";
|
|
236
236
|
export const KfwBaseBorderradiusLg = "2rem";
|
|
237
237
|
export const KfwBaseBorderradiusCircle = "999.9rem";
|
|
238
|
-
export const KfwBaseBorderwidthNone = "0";
|
|
239
238
|
export const KfwBaseBorderwidthMd = "1px";
|
|
240
239
|
export const KfwBaseBorderwidthLg = "2px";
|
|
241
240
|
export const KfwBaseFontweightRegular = 400;
|
|
@@ -3538,31 +3538,6 @@
|
|
|
3538
3538
|
}
|
|
3539
3539
|
},
|
|
3540
3540
|
"borderwidth": {
|
|
3541
|
-
"none": {
|
|
3542
|
-
"key": "{base.borderwidth.none}",
|
|
3543
|
-
"$value": {
|
|
3544
|
-
"unit": "px",
|
|
3545
|
-
"value": 0
|
|
3546
|
-
},
|
|
3547
|
-
"filePath": "tokens/tokens.json",
|
|
3548
|
-
"isSource": true,
|
|
3549
|
-
"$type": "dimension",
|
|
3550
|
-
"original": {
|
|
3551
|
-
"$value": {
|
|
3552
|
-
"unit": "px",
|
|
3553
|
-
"value": 0
|
|
3554
|
-
},
|
|
3555
|
-
"$type": "dimension",
|
|
3556
|
-
"key": "{base.borderwidth.none}"
|
|
3557
|
-
},
|
|
3558
|
-
"name": "none",
|
|
3559
|
-
"attributes": {},
|
|
3560
|
-
"path": [
|
|
3561
|
-
"base",
|
|
3562
|
-
"borderwidth",
|
|
3563
|
-
"none"
|
|
3564
|
-
]
|
|
3565
|
-
},
|
|
3566
3541
|
"md": {
|
|
3567
3542
|
"key": "{base.borderwidth.md}",
|
|
3568
3543
|
"$value": {
|
|
@@ -115,7 +115,6 @@ $kfw-base-borderradius-sm: 2px;
|
|
|
115
115
|
$kfw-base-borderradius-md: 0.4rem;
|
|
116
116
|
$kfw-base-borderradius-lg: 2rem;
|
|
117
117
|
$kfw-base-borderradius-circle: 999.9rem;
|
|
118
|
-
$kfw-base-borderwidth-none: 0;
|
|
119
118
|
$kfw-base-borderwidth-md: 1px;
|
|
120
119
|
$kfw-base-borderwidth-lg: 2px;
|
|
121
120
|
$kfw-base-fontweight-regular: 400;
|
|
@@ -119,7 +119,6 @@
|
|
|
119
119
|
--kfw-base-borderradius-md: 0.25rem;
|
|
120
120
|
--kfw-base-borderradius-lg: 1.25rem;
|
|
121
121
|
--kfw-base-borderradius-circle: 624.9375rem;
|
|
122
|
-
--kfw-base-borderwidth-none: 0;
|
|
123
122
|
--kfw-base-borderwidth-md: 1px;
|
|
124
123
|
--kfw-base-borderwidth-lg: 2px;
|
|
125
124
|
--kfw-base-fontweight-regular: 400;
|
|
@@ -233,7 +233,6 @@ export const KfwBaseBorderradiusSm: string;
|
|
|
233
233
|
export const KfwBaseBorderradiusMd: string;
|
|
234
234
|
export const KfwBaseBorderradiusLg: string;
|
|
235
235
|
export const KfwBaseBorderradiusCircle: string;
|
|
236
|
-
export const KfwBaseBorderwidthNone: string;
|
|
237
236
|
export const KfwBaseBorderwidthMd: string;
|
|
238
237
|
export const KfwBaseBorderwidthLg: string;
|
|
239
238
|
export const KfwBaseFontweightRegular: number;
|
|
@@ -235,7 +235,6 @@ export const KfwBaseBorderradiusSm = "2px";
|
|
|
235
235
|
export const KfwBaseBorderradiusMd = "0.25rem";
|
|
236
236
|
export const KfwBaseBorderradiusLg = "1.25rem";
|
|
237
237
|
export const KfwBaseBorderradiusCircle = "624.9375rem";
|
|
238
|
-
export const KfwBaseBorderwidthNone = "0";
|
|
239
238
|
export const KfwBaseBorderwidthMd = "1px";
|
|
240
239
|
export const KfwBaseBorderwidthLg = "2px";
|
|
241
240
|
export const KfwBaseFontweightRegular = 400;
|
|
@@ -115,7 +115,6 @@ $kfw-base-borderradius-sm: 2px;
|
|
|
115
115
|
$kfw-base-borderradius-md: 0.25rem;
|
|
116
116
|
$kfw-base-borderradius-lg: 1.25rem;
|
|
117
117
|
$kfw-base-borderradius-circle: 624.9375rem;
|
|
118
|
-
$kfw-base-borderwidth-none: 0;
|
|
119
118
|
$kfw-base-borderwidth-md: 1px;
|
|
120
119
|
$kfw-base-borderwidth-lg: 2px;
|
|
121
120
|
$kfw-base-fontweight-regular: 400;
|
package/package.json
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openkfw/design-tokens",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.2",
|
|
4
4
|
"description": "The source of truth for KfW-branded digital products.",
|
|
5
5
|
"files": [
|
|
6
6
|
"output",
|
|
7
7
|
"tokens/tokens.json",
|
|
8
|
-
"tokens/gen-tokens.dark.json5"
|
|
8
|
+
"tokens/gen-tokens.dark.json5",
|
|
9
|
+
"demo/src/styles/style.css",
|
|
10
|
+
"demo/src/styles/vendor/**.css",
|
|
11
|
+
"demo/dist/css/style.min.css"
|
|
9
12
|
],
|
|
10
13
|
"scripts": {
|
|
11
14
|
"start": "concurrently \"npm run watch:extended\" \"npm run watch\"",
|
package/tokens/tokens.json
CHANGED