@openkfw/design-tokens 0.1.0

package/output/web_next_16px/css/kfw-design-tokens.light.css

@@ -0,0 +1,262 @@
+/**
+ * KfW Design Tokens v0.1.0
+ * Copyright 2025
+ * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
+ */
+
+: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: 0.3125rem;
+  --kfw-base-space-static-10: 0.625rem;
+  --kfw-base-space-static-15: 0.9375rem;
+  --kfw-base-space-static-20: 1.25rem;
+  --kfw-base-space-static-25: 1.5625rem;
+  --kfw-base-space-static-30: 1.875rem;
+  --kfw-base-space-static-35: 2.1875rem;
+  --kfw-base-space-static-40: 2.5rem;
+  --kfw-base-space-static-50: 3.125rem;
+  --kfw-base-space-static-60: 3.75rem;
+  --kfw-base-space-fluid-5-min: 0.3125rem;
+  --kfw-base-space-fluid-5-max: 0.625rem;
+  --kfw-base-space-fluid-5-val: 0.521vi + 0.2083125rem;
+  --kfw-base-space-fluid-10-min: 0.625rem;
+  --kfw-base-space-fluid-10-max: 0.9375rem;
+  --kfw-base-space-fluid-10-val: 0.521vi + 0.5208125rem;
+  --kfw-base-space-fluid-15-min: 0.9375rem;
+  --kfw-base-space-fluid-15-max: 1.25rem;
+  --kfw-base-space-fluid-15-val: 0.521vi + 0.8333125rem;
+  --kfw-base-space-fluid-20-min: 1.25rem;
+  --kfw-base-space-fluid-20-max: 1.5625rem;
+  --kfw-base-space-fluid-20-val: 0.521vi + 1.1458125rem;
+  --kfw-base-space-fluid-25-min: 1.5625rem;
+  --kfw-base-space-fluid-25-max: 1.875rem;
+  --kfw-base-space-fluid-25-val: 0.521vi + 1.4583125rem;
+  --kfw-base-space-fluid-30-min: 1.875rem;
+  --kfw-base-space-fluid-30-max: 2.1875rem;
+  --kfw-base-space-fluid-30-val: 0.521vi + 1.7708125rem;
+  --kfw-base-space-fluid-35-min: 2.1875rem;
+  --kfw-base-space-fluid-35-max: 2.5rem;
+  --kfw-base-space-fluid-35-val: 0.521vi + 2.0833125rem;
+  --kfw-base-space-fluid-40-min: 2.5rem;
+  --kfw-base-space-fluid-40-max: 3.125rem;
+  --kfw-base-space-fluid-40-val: 1.042vi + 2.2916875rem;
+  --kfw-base-space-fluid-50-min: 3.125rem;
+  --kfw-base-space-fluid-50-max: 3.75rem;
+  --kfw-base-space-fluid-50-val: 1.042vi + 2.916625rem;
+  --kfw-base-fontsize-static-sm: 0.875rem;
+  --kfw-base-fontsize-static-md: 1rem;
+  --kfw-base-fontsize-static-lg: 1.125rem;
+  --kfw-base-fontsize-static-xl: 1.25rem;
+  --kfw-base-fontsize-static-2xl: 1.375rem;
+  --kfw-base-fontsize-static-3xl: 1.5rem;
+  --kfw-base-fontsize-static-4xl: 1.625rem;
+  --kfw-base-fontsize-static-5xl: 1.75rem;
+  --kfw-base-fontsize-static-6xl: 1.875rem;
+  --kfw-base-fontsize-static-7xl: 2rem;
+  --kfw-base-fontsize-static-8xl: 2.25rem;
+  --kfw-base-fontsize-fluid-sm-min: 0.875rem;
+  --kfw-base-fontsize-fluid-sm-max: 1rem;
+  --kfw-base-fontsize-fluid-sm-val: 0.208vi + 0.8333125rem;
+  --kfw-base-fontsize-fluid-md-min: 1rem;
+  --kfw-base-fontsize-fluid-md-max: 1.125rem;
+  --kfw-base-fontsize-fluid-md-val: 0.208vi + 0.9583125rem;
+  --kfw-base-fontsize-fluid-lg-min: 1.125rem;
+  --kfw-base-fontsize-fluid-lg-max: 1.25rem;
+  --kfw-base-fontsize-fluid-lg-val: 0.208vi + 1.0833125rem;
+  --kfw-base-fontsize-fluid-xl-min: 1.25rem;
+  --kfw-base-fontsize-fluid-xl-max: 1.375rem;
+  --kfw-base-fontsize-fluid-xl-val: 0.208vi + 1.2083125rem;
+  --kfw-base-fontsize-fluid-2xl-min: 1.375rem;
+  --kfw-base-fontsize-fluid-2xl-max: 1.5rem;
+  --kfw-base-fontsize-fluid-2xl-val: 0.208vi + 1.3333125rem;
+  --kfw-base-fontsize-fluid-3xl-min: 1.5rem;
+  --kfw-base-fontsize-fluid-3xl-max: 1.625rem;
+  --kfw-base-fontsize-fluid-3xl-val: 0.208vi + 1.4583125rem;
+  --kfw-base-fontsize-fluid-4xl-min: 1.625rem;
+  --kfw-base-fontsize-fluid-4xl-max: 1.75rem;
+  --kfw-base-fontsize-fluid-4xl-val: 0.208vi + 1.5833125rem;
+  --kfw-base-fontsize-fluid-5xl-min: 1.75rem;
+  --kfw-base-fontsize-fluid-5xl-max: 2rem;
+  --kfw-base-fontsize-fluid-5xl-val: 0.417vi + 1.666625rem;
+  --kfw-base-fontsize-fluid-6xl-min: 1.875rem;
+  --kfw-base-fontsize-fluid-6xl-max: 2.25rem;
+  --kfw-base-fontsize-fluid-6xl-val: 0.625vi + 1.75rem;
+  --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: 0.125rem;
+  --kfw-base-borderradius-md: 0.25rem;
+  --kfw-base-borderradius-lg: 1.25rem;
+  --kfw-base-borderradius-full: 624.9375rem;
+  --kfw-base-borderwidth-none: 0;
+  --kfw-base-borderwidth-md: 1px;
+  --kfw-base-borderwidth-lg: 0.125rem;
+  --kfw-base-fontweight-regular: 400;
+  --kfw-base-fontweight-medium: 500;
+  --kfw-base-letterspacing-tight: -0.03125rem;
+  --kfw-base-letterspacing-normal: 0;
+  --kfw-base-letterspacing-wide: 0.03125rem;
+  --kfw-base-letterspacing-wider: 1px;
+  --kfw-base-layout-breakpoint-xs: 20rem;
+  --kfw-base-layout-breakpoint-sm: 37.5rem;
+  --kfw-base-layout-breakpoint-md: 52.5rem;
+  --kfw-base-layout-breakpoint-lg: 60rem;
+  --kfw-base-layout-breakpoint-xl: 80rem;
+  --kfw-base-layout-container-sm: 56rem;
+  --kfw-base-layout-container-md: 67.5rem;
+  --kfw-base-layout-container-lg: 80rem;
+  --kfw-base-layout-safezone-static-md: 1.25rem;
+  --kfw-base-layout-safezone-static-lg: 2.5rem;
+  --kfw-base-layout-safezone-fluid-min: 1.25rem;
+  --kfw-base-layout-safezone-fluid-max: 2.5rem;
+  --kfw-base-layout-safezone-fluid-val: 5.556vi - 0.8333125rem;
+  --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: 0.75rem;
+  --kfw-base-layout-gridgap-static-sm: 1.125rem;
+  --kfw-base-layout-gridgap-static-md: 1.375rem;
+  --kfw-base-layout-gridgap-static-lg: 1.625rem;
+  --kfw-base-layout-gridgap-static-xl: 2.25rem;
+  --kfw-base-layout-gridgap-fluid-min: 0.75rem;
+  --kfw-base-layout-gridgap-fluid-max: 2.25rem;
+  --kfw-base-layout-gridgap-fluid-val: 2.5vi + 0.25rem;
+  --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-accent: #b7f9aa;
+  --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: 0.625rem;
+  --kfw-space-small: 1.25rem;
+  --kfw-space-medium: 1.875rem;
+  --kfw-space-large-min: 2.1875rem;
+  --kfw-space-large-max: 2.5rem;
+  --kfw-space-large-val: 0.521vi + 2.0833125rem;
+  --kfw-space-big-min: 3.125rem;
+  --kfw-space-big-max: 3.75rem;
+  --kfw-space-big-val: 1.042vi + 2.916625rem;
+  --kfw-fontspace: 1.25rem;
+  --kfw-fontspace-introduction: 1.25rem;
+  --kfw-fontspace-small: 0.3125rem;
+  --kfw-fontspace-large: 0.9375rem;
+  --kfw-fontspace-heading-1: 1.25rem;
+  --kfw-fontspace-heading-2: 1.25rem;
+  --kfw-fontspace-heading-3: 0.625rem;
+  --kfw-fontspace-heading-4: 0.625rem;
+  --kfw-fontspace-heading-5: 0.625rem;
+  --kfw-fontspace-heading-6: 1.25rem;
+  --kfw-fontsize: 1rem;
+  --kfw-fontsize-introduction: 1.25rem;
+  --kfw-fontsize-small: 0.875rem;
+  --kfw-fontsize-large: 1.125rem;
+  --kfw-fontsize-heading-1-min: 1.875rem;
+  --kfw-fontsize-heading-1-max: 2.25rem;
+  --kfw-fontsize-heading-1-val: 0.625vi + 1.75rem;
+  --kfw-fontsize-heading-2-min: 1.75rem;
+  --kfw-fontsize-heading-2-max: 2rem;
+  --kfw-fontsize-heading-2-val: 0.417vi + 1.666625rem;
+  --kfw-fontsize-heading-3-min: 1.5rem;
+  --kfw-fontsize-heading-3-max: 1.625rem;
+  --kfw-fontsize-heading-3-val: 0.208vi + 1.4583125rem;
+  --kfw-fontsize-heading-4-min: 1.25rem;
+  --kfw-fontsize-heading-4-max: 1.375rem;
+  --kfw-fontsize-heading-4-val: 0.208vi + 1.2083125rem;
+  --kfw-fontsize-heading-5: 1.125rem;
+  --kfw-fontsize-heading-6: 1rem;
+  --kfw-lineheight: 1.4;
+  --kfw-lineheight-list: 1.5;
+  --kfw-lineheight-heading: 1.3;
+  --kfw-lineheight-heading-5: 1.333;
+  --kfw-borderradius: 0.25rem;
+  --kfw-focusring-outline: 0.125rem dashed #00446e;
+  --kfw-focusring-outline-offset: 0.125rem;
+  --kfw-fontweight: 400;
+  --kfw-fontweight-heading: 500;
+  --kfw-breakpoint-mobile: 37.5rem;
+  --kfw-breakpoint-tablet: 52.5rem;
+  --kfw-breakpoint-desktop: 60rem;
+  --kfw-contentwrapper-narrow: 56rem;
+  --kfw-contentwrapper-basic: 67.5rem;
+  --kfw-contentwrapper-extended: 80rem;
+  --kfw-safezone-min: 1.25rem;
+  --kfw-safezone-max: 2.5rem;
+  --kfw-safezone-val: 5.556vi - 0.8333125rem;
+}