@openkfw/design-tokens 0.5.6 → 0.5.8

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

@@ -1,10 +1,10 @@
 /**
- * KfW Design Tokens v0.5.6 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.8 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
-:root, :host, .kfw-theme--light { color-scheme: light; }
+[data-theme=light], :root:not([data-theme=dark]), :host(:not([data-theme=dark])) { color-scheme: light; }
 
-:root, :host, .kfw-theme--light {
+[data-theme=light], :root:not([data-theme=dark]), :host(:not([data-theme=dark])) {
   --kfw-base-color-blue-100: #e9f5fb;
   --kfw-base-color-blue-400: #54b3e2;
   --kfw-base-color-blue-500: #007abc;
@@ -17,8 +17,8 @@
   --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-white: #fff;
+  --kfw-base-color-black: #000;
   --kfw-base-color-gray-50: #f6f7f8;
   --kfw-base-color-gray-100: #eef0f2;
   --kfw-base-color-gray-200: #d8dfe3;
@@ -29,8 +29,8 @@
   --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-violet-400: #a455c5;
+  --kfw-base-color-violet-500: #643179;
   --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;
@@ -155,30 +155,30 @@
   --kfw-base-layout-gridgap-fluid-min: 1.2rem;
   --kfw-base-layout-gridgap-fluid-max: 3.6rem;
   --kfw-base-layout-gridgap-fluid-val: 3.529vi - 0.9176rem;
-  --kfw-color-fn: #005a8c; /** Main interaction color for buttons and links */
-  --kfw-color-fn-active: #00446e;
-  --kfw-color-fn-inactive: #a1adb5;
-  --kfw-color-fn-border: #2d3134;
-  --kfw-color-fn-label: #2d3134;
-  --kfw-color-text: #2d3134; /** Main text color for body */
-  --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; /** Main background color for body */
-  --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-fn: #005a8c; /** Main interaction color for buttons and links (Blue 600) */
+  --kfw-color-fn-active: #00446e; /** Interaction color when active (e.g., hover, Blue 700) */
+  --kfw-color-fn-inactive: #a1adb5; /** Interaction color when inactive (Gray 300) */
+  --kfw-color-fn-border: #2d3134; /** Interaction border color (Gray 600) */
+  --kfw-color-fn-label: #2d3134; /** Interaction label color (Gray 600) */
+  --kfw-color-text: #2d3134; /** Main text color for body (Gray 600) */
+  --kfw-color-text-on-dark-bg: #fff; /** Main text color on dark background (White) */
+  --kfw-color-text-on-disabled: #fff; /** Main text color on disabled (White) */
+  --kfw-color-text-headline-on-dark-bg: #b7f9aa; /** Headline text color on dark background (Green 300) */
+  --kfw-color-background: #fff; /** Main background color for body (White) */
+  --kfw-color-background-subtle: #f6f7f8; /** Neutral (Gray 50) */
+  --kfw-color-background-disabled: #a1adb5; /** Disabled (Gray 300) */
+  --kfw-color-background-light-blue: #e9f5fb; /** Light blue (Blue 100) */
+  --kfw-color-background-light-green: #ecfded; /** Light green (Green 100) */
+  --kfw-color-background-dark-blue: #00375b; /** Dark blue (Blue 800) */
+  --kfw-color-background-dark-green: #398357; /** Dark green (Green 700) */
+  --kfw-color-opaque-white-90: #ffffffe6; /** White 90% */
+  --kfw-color-opaque-white-95: #fffffff2; /** White 95% */
+  --kfw-color-opaque-gray-500-10: #41484c1a; /** Gray 500 10% */
+  --kfw-color-opaque-gray-500-30: #41484c4d; /** Gray 500 30% */
+  --kfw-color-opaque-gray-500-90: #41484ce6; /** Gray 500 90% */
   --kfw-color-state-danger: #c80538;
   --kfw-color-state-success: #398357;
-  --kfw-color-state-warning: #9598e0;
+  --kfw-color-state-warning: #a455c5;
   --kfw-color-status-red: #c80538;
   --kfw-color-status-yellow: #eac80b;
   --kfw-color-status-green: #398357;
@@ -192,7 +192,7 @@
   --kfw-color-product-container: #f6f7f8;
   --kfw-color-product-benefit: #007abc;
   --kfw-color-product-credit: #398357;
-  --kfw-color-product-cooperation: #686fc8;
+  --kfw-color-product-cooperation: #643179;
   --kfw-color-product-credit-benefit: #41484c;
   --kfw-color-icon: #005a8c;
   --kfw-color-icon-secondary: #54b3e2;
@@ -248,6 +248,7 @@
   --kfw-borderradius-circle: 999.9rem;
   --kfw-borderwidth: 1px;
   --kfw-borderwidth-large: 2px;
+  --kfw-borderstyle: solid;
   --kfw-focusring-outline-width: 2px;
   --kfw-focusring-outline-offset: 2px;
   --kfw-focusring-outline-style: dashed;

package/output/figma/kfw-design-tokens.light.json

@@ -55,12 +55,12 @@
           "$type": "color"
         },
         "Default": {
-          "$value": "#ffffff",
+          "$value": "#fff",
           "$type": "color"
         }
       },
       "Black": {
-        "$value": "#000000",
+        "$value": "#000",
         "$type": "color"
       },
       "Gray": {
@@ -109,11 +109,11 @@
       },
       "Violet": {
         "400": {
-          "$value": "#9598e0",
+          "$value": "#a455c5",
           "$type": "color"
         },
         "500": {
-          "$value": "#686fc8",
+          "$value": "#643179",
           "$type": "color"
         }
       },
@@ -337,11 +337,11 @@
           "$type": "color"
         },
         "On-dark-bg": {
-          "$value": "#ffffff",
+          "$value": "#fff",
           "$type": "color"
         },
         "On-disabled": {
-          "$value": "#ffffff",
+          "$value": "#fff",
           "$type": "color"
         },
         "Headline-on-dark-bg": {
@@ -351,7 +351,7 @@
       },
       "Background": {
         "Default": {
-          "$value": "#ffffff",
+          "$value": "#fff",
           "$type": "color"
         },
         "Subtle": {
@@ -411,7 +411,7 @@
           "$type": "color"
         },
         "Warning": {
-          "$value": "#9598e0",
+          "$value": "#a455c5",
           "$type": "color"
         }
       },
@@ -473,7 +473,7 @@
           "$type": "color"
         },
         "Cooperation": {
-          "$value": "#686fc8",
+          "$value": "#643179",
           "$type": "color"
         },
         "Credit-benefit": {
@@ -702,6 +702,10 @@
         "$type": "borderWidth"
       }
     },
+    "Borderstyle": {
+      "$value": "solid",
+      "$type": "strokeStyle"
+    },
     "Fontweight": {
       "Default": {
         "$value": 400,

package/output/js/{kfw-design-tokens.light.d.ts → kfw-design-tokens.d.ts}

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.6 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.8 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 export const KfwBaseColorBlue100: {
@@ -269,113 +269,131 @@ export const KfwBaseLayoutGridgapStaticXl: string;
 export const KfwBaseLayoutGridgapFluidMin: string;
 export const KfwBaseLayoutGridgapFluidMax: string;
 export const KfwBaseLayoutGridgapFluidVal: string;
-/** Main interaction color for buttons and links */
+/** Main interaction color for buttons and links (Blue 600) */
 export const KfwColorFn: {
   colorSpace: string;
   components: number[];
   hex: string;
 };
+/** Interaction color when active (e.g., hover, Blue 700) */
 export const KfwColorFnActive: {
   colorSpace: string;
   components: number[];
   hex: string;
 };
+/** Interaction color when inactive (Gray 300) */
 export const KfwColorFnInactive: {
   colorSpace: string;
   components: number[];
   hex: string;
 };
+/** Interaction border color (Gray 600) */
 export const KfwColorFnBorder: {
   colorSpace: string;
   components: number[];
   hex: string;
 };
+/** Interaction label color (Gray 600) */
 export const KfwColorFnLabel: {
   colorSpace: string;
   components: number[];
   hex: string;
 };
-/** Main text color for body */
+/** Main text color for body (Gray 600) */
 export const KfwColorText: {
   colorSpace: string;
   components: number[];
   hex: string;
 };
+/** Main text color on dark background (White) */
 export const KfwColorTextOnDarkBg: {
   colorSpace: string;
   components: number[];
   hex: string;
 };
+/** Main text color on disabled (White) */
 export const KfwColorTextOnDisabled: {
   colorSpace: string;
   components: number[];
   hex: string;
 };
+/** Headline text color on dark background (Green 300) */
 export const KfwColorTextHeadlineOnDarkBg: {
   colorSpace: string;
   components: number[];
   hex: string;
 };
-/** Main background color for body */
+/** Main background color for body (White) */
 export const KfwColorBackground: {
   colorSpace: string;
   components: number[];
   hex: string;
 };
+/** Neutral (Gray 50) */
 export const KfwColorBackgroundSubtle: {
   colorSpace: string;
   components: number[];
   hex: string;
 };
+/** Disabled (Gray 300) */
 export const KfwColorBackgroundDisabled: {
   colorSpace: string;
   components: number[];
   hex: string;
 };
+/** Light blue (Blue 100) */
 export const KfwColorBackgroundLightBlue: {
   colorSpace: string;
   components: number[];
   hex: string;
 };
+/** Light green (Green 100) */
 export const KfwColorBackgroundLightGreen: {
   colorSpace: string;
   components: number[];
   hex: string;
 };
+/** Dark blue (Blue 800) */
 export const KfwColorBackgroundDarkBlue: {
   colorSpace: string;
   components: number[];
   hex: string;
 };
+/** Dark green (Green 700) */
 export const KfwColorBackgroundDarkGreen: {
   colorSpace: string;
   components: number[];
   hex: string;
 };
+/** White 90% */
 export const KfwColorOpaqueWhite90: {
   colorSpace: string;
   components: number[];
   hex: string;
   alpha: number;
 };
+/** White 95% */
 export const KfwColorOpaqueWhite95: {
   colorSpace: string;
   components: number[];
   hex: string;
   alpha: number;
 };
+/** Gray 500 10% */
 export const KfwColorOpaqueGray50010: {
   colorSpace: string;
   components: number[];
   hex: string;
   alpha: number;
 };
+/** Gray 500 30% */
 export const KfwColorOpaqueGray50030: {
   colorSpace: string;
   components: number[];
   hex: string;
   alpha: number;
 };
+/** Gray 500 90% */
 export const KfwColorOpaqueGray50090: {
   colorSpace: string;
   components: number[];
@@ -542,6 +560,7 @@ export const KfwBorderradiusSmall: string;
 export const KfwBorderradiusCircle: string;
 export const KfwBorderwidth: string;
 export const KfwBorderwidthLarge: string;
+export const KfwBorderstyle: string;
 export const KfwFocusringOutlineWidth: string;
 export const KfwFocusringOutlineOffset: string;
 export const KfwFocusringOutlineStyle: string;