@openkfw/design-tokens 0.5.5 → 0.5.7

package/demo/src/style.css

@@ -62,7 +62,7 @@
       font-size: 80%;
     }
 
-    :is(sub, sup) {
+    :where(sub, sup) {
       position: relative;
       line-height: 0;
       vertical-align: baseline;
@@ -77,11 +77,11 @@
       top: -0.5em;
     }
 
-    :is(address, blockquote, dl, ol, p, pre, table, ul) {
+    :where(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 {
+    :where(address, blockquote, dl, ol, p, pre, table, ul):last-child {
       margin-block-end: 0;
     }
 
@@ -227,7 +227,7 @@
       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) {
+    :where(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;
@@ -305,6 +305,7 @@
       display: inline-block;
       flex-shrink: 0;
       vertical-align: top;
+      pointer-events: none;
       min-width: 1.6rem;
       min-height: 1.6rem;
       filter: color-to-filter(var(--kfw-color-text));
@@ -348,7 +349,7 @@
       box-shadow: 0 0 0 var(--kfw-borderwidth) var(--borderhover);
     }
 
-    :is([type="checkbox"], [type="radio"], select.form-control):not(:disabled) {
+    :where([type="checkbox"], [type="radio"], select.form-control):not(:disabled) {
       cursor: pointer;
     }
 
@@ -377,10 +378,15 @@
       box-shadow: 0 0 0 var(--kfw-borderwidth) var(--borderhover);
     }
 
-    :is(progress, [type="checkbox"], [type="radio"], [type="range"]) {
+    :where(progress, [type="checkbox"], [type="radio"], [type="range"]) {
       accent-color: var(--kfw-color-fn);
     }
 
+    [type="color"] {
+      padding-inline: 0.2rem;
+      padding-block: 0;
+    }
+
     textarea {
       display: block;
       resize: vertical;
@@ -392,8 +398,7 @@
       border: 0;
     }
 
-    [type="file"],
-    [type="range"] {
+    :where([type="file"], [type="range"]) {
       padding: 0;
       border: 0;
       width: 100%;
@@ -403,9 +408,7 @@
       margin-inline-end: var(--kfw-space-xsmall);
     }
 
-    :where(input, select, textarea, fieldset) + small,
-    .form-text,
-    .invalid-feedback {
+    :where(.form-text, .invalid-feedback, .valid-feedback) {
       display: block;
       width: 100%;
       margin-block-start: 0.8rem;
@@ -414,15 +417,23 @@
       letter-spacing: var(--kfw-base-letterspacing-normal);
     }
 
+    .valid-feedback {
+      color: var(--kfw-color-state-success);
+    }
+
+    .valid-feedback__icon {
+      filter: color-to-filter(var(--kfw-color-state-success));
+    }
+
     .invalid-feedback {
       color: var(--kfw-color-state-danger);
     }
 
     .invalid-feedback__icon {
-      filter: color-to-filter(var(--kfw-base-color-red-400));
+      filter: color-to-filter(var(--kfw-color-state-danger));
     }
 
-    :is(label, .form-label) {
+    :where(label, .form-label) {
       display: inline-block;
       margin-block-end: 0.8rem;
       font-weight: var(--kfw-fontweight-bold);
@@ -460,7 +471,7 @@
       padding-block-start: 0.4rem;
     }
 
-    .list-group-form :is([type="checkbox"], [type="radio"]) {
+    .list-group-form :where([type="checkbox"], [type="radio"]) {
       appearance: none;
       width: var(--field-size);
       height: var(--field-size);
@@ -476,7 +487,7 @@
       background-color: var(--kfw-color-background);
     }
 
-    .list-group-form :is([type="checkbox"], [type="radio"])[aria-invalid="true"] {
+    .list-group-form :where([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);
@@ -490,13 +501,13 @@
       border-radius: var(--kfw-borderradius);
     }
 
-    .list-group-form :is([type="checkbox"], [type="radio"]):disabled {
+    .list-group-form :where([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);
     }
 
-    .list-group-form :is([type="checkbox"], [type="radio"])::before {
+    .list-group-form :where([type="checkbox"], [type="radio"])::before {
       content: none;
       display: block;
       position: absolute;
@@ -525,12 +536,12 @@
       forced-color-adjust: none;
     }
 
-    .list-group-form :is([type="checkbox"], [type="radio"]):checked::before {
+    .list-group-form :where([type="checkbox"], [type="radio"]):checked::before {
       content: "";
     }
 
-    .list-group-form :is([type="radio"], [type="checkbox"]):hover:not(:disabled),
-    .list-group-form :is([type="radio"], [type="checkbox"]):focus:not(:disabled) {
+    .list-group-form :where([type="radio"], [type="checkbox"]):hover:not(:disabled),
+    .list-group-form :where([type="radio"], [type="checkbox"]):focus:not(:disabled) {
       border-width: var(--kfw-borderwidth-large);
     }
 
@@ -562,31 +573,18 @@
       }
     }
 
-    [type="date"],
-    [type="time"] {
-      appearance: none;
-      position: relative;
-      padding-right: 3.6rem;
+    :where([type="date"], [type="time"])::-webkit-calendar-picker-indicator {
+      background: transparent; /* rest native icon */
+      width: 1.8rem;
+      height: 1.8rem;
     }
 
-    [type="date"]::-webkit-calendar-picker-indicator,
-    [type="time"]::-webkit-calendar-picker-indicator,
-    [type="time"]::-webkit-inner-spin-button {
-      display: none;
+    [type="date"]::-webkit-calendar-picker-indicator {
+      content: var(--kfw-icon-calendar-fn);
     }
 
-    [type="date"] {
-      background-size: 1.8rem auto;
-      background-repeat: no-repeat;
-      background-position: right 1rem center;
-      background-image: var(--kfw-icon-calendar-fn);
-    }
-
-    [type="time"] {
-      background-size: 1.8rem auto;
-      background-repeat: no-repeat;
-      background-position: right 1rem center;
-      background-image: var(--kfw-icon-time-fn);
+    [type="time"]::-webkit-calendar-picker-indicator {
+      content: var(--kfw-icon-time-fn);
     }
 
     :where(a:not([role="button"]), [role="link"]) {
@@ -600,38 +598,37 @@
       vertical-align: top;
     }
 
-    :where(a:not([role="button"]), [role="link"]):is(:hover, :focus, :active) {
+    :where(a:not([role="button"]), [role="link"]):where(:hover, :focus, :active) {
       color: var(--link-color-hover);
       text-decoration: underline;
     }
 
     :where(a:not([role="button"]), [role="link"]):has(.icon) {
+      --space-between: 0.5rem;
+
       justify-content: flex-start;
       align-items: center;
-      gap: 0.5rem;
+      gap: var(--space-between);
     }
 
     :where(a, [role="link"], button, [type="button"]) .icon {
       filter: color-to-filter(var(--kfw-color-fn));
     }
 
-    :where(a, [role="link"], button, [type="button"]):is(:hover, :focus) .icon {
+    :where(a, [role="link"], button, [type="button"]):where(:hover, :focus) .icon {
       filter: color-to-filter(var(--kfw-color-fn-active));
     }
 
-    button,
-    [type="submit"],
-    [type="reset"],
-    [type="button"],
-    [role="button"],
-    [type="file"]::file-selector-button {
-      border: var(--kfw-borderwidth) solid transparent;
+    [type="file"]::file-selector-button,
+    :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
+      --space-between: 0.8rem;
+
       font-family: var(--kfw-fontfamily);
       font-size: var(--kfw-fontsize);
       font-weight: var(--kfw-fontweight);
       border-radius: var(--kfw-borderradius);
       display: inline-flex;
-      gap: 0.8rem;
+      gap: var(--space-between);
       text-align: center;
       text-decoration: none;
       line-height: var(--kfw-lineheight);
@@ -643,6 +640,9 @@
       white-space: nowrap;
       cursor: pointer;
       align-items: center;
+      border-width: var(--kfw-borderwidth);
+      border-style: solid;
+      border-color: transparent;
     }
 
     :where([type="submit"], .button--primary) {
@@ -658,7 +658,7 @@
       border-color: var(--button-border-color);
     }
 
-    :where([type="submit"], .button--primary):is(:hover, :focus) {
+    :where([type="submit"], .button--primary):where(:hover, :focus) {
       color: var(--button-color-hover);
       background-color: var(--button-bg-hover);
       border-color: var(--button-border-color-hover);
@@ -673,16 +673,16 @@
       filter: color-to-filter(var(--kfw-color-fn));
     }
 
-    .button--primary:is(:hover, :focus) .icon {
+    .button--primary:where(:hover, :focus) .icon {
       filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
     }
 
-    .button--secondary:is(:hover, :focus) .icon {
+    .button--secondary:where(:hover, :focus) .icon {
       filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
     }
 
     [type="file"]::file-selector-button,
-    :is([type="reset"], .button--secondary) {
+    :where([type="reset"], .button--secondary) {
       --button-border-color: var(--kfw-color-fn);
       --button-bg: transparent;
       --button-color: var(--kfw-color-fn);
@@ -695,8 +695,8 @@
       border-color: var(--button-border-color);
     }
 
-    [type="file"]::file-selector-button:is(:hover, :focus),
-    :is([type="reset"], .button--secondary):is(:hover, :focus) {
+    [type="file"]::file-selector-button:where(:hover, :focus),
+    :where([type="reset"], .button--secondary):where(:hover, :focus) {
       color: var(--button-color-hover);
       background-color: var(--button-bg-hover);
       border-color: var(--button-border-color-hover);
@@ -715,6 +715,7 @@
       --button-color: var(--kfw-color-fn);
       --button-bg: transparent;
       --button-color-hover: var(--kfw-color-fn-active);
+      --space-between: 0.5rem;
 
       background-color: var(--button-bg);
       color: var(--button-color);
@@ -723,7 +724,7 @@
       text-decoration: none;
     }
 
-    .button--tertiary:is(:hover, :focus) {
+    .button--tertiary:where(:hover, :focus) {
       color: var(--button-color-hover);
       text-decoration: underline;
     }
@@ -737,7 +738,7 @@
     select[disabled],
     textarea[disabled],
     label[aria-disabled="true"],
-    :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
+    :where(fieldset[disabled]) :where(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
       pointer-events: none;
     }
 
@@ -774,7 +775,7 @@
       border-radius: 1rem;
     }
 
-    .searchfield__button:is(:hover, :focus) {
+    .searchfield__button:where(:hover, :focus) {
       outline: 2px solid var(--kfw-color-fn-active);
     }
 
@@ -788,12 +789,16 @@
     * File-Upload
     */
     .file-upload {
+      display: grid;
+      row-gap: var(--kfw-space-medium);
+    }
+
+    .file-upload__inner {
       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);
     }
 
     .file-upload__title {
@@ -803,20 +808,12 @@
     }
 
     .file-upload__input {
-      width: auto;
-      max-width: 100%;
-    }
-
-    .file-upload--with-native-input .file-upload__input {
       display: none;
     }
 
-    .file-upload--with-native-input .file-upload__input--has-files {
-      display: block;
-    }
-
-    .file-upload--with-native-input:has(.file-upload__input--has-files) :is(button, [role="button"]) {
-      display: none;
+    .file-upload :where([type="file"], [type="range"]) {
+      width: auto;
+      max-width: 100%;
     }
 
     .file-upload__icon {
@@ -829,12 +826,12 @@
     /**
     * Containers
     */
-    :is(.container, .container-fluid, .container-narrow, .container-extended, .container-extended-fullwidth) {
+    :where(.container, .container-fluid, .container-narrow, .container-extended, .container-extended-fullwidth) {
       margin-inline: auto;
       width: 100%;
     }
 
-    :is(.container, .container-fluid, .container-narrow, .container-extended) {
+    :where(.container, .container-fluid, .container-narrow, .container-extended) {
       padding-inline: var(--kfw-safezone);
     }
 
@@ -868,16 +865,16 @@
 
   @layer variations {
     table.file-upload-table {
-      margin-top: var(--kfw-space-medium);
-    }
-
-    table.file-upload-table table {
       border-top: 0;
       min-height: 10px;
       min-width: 500px;
     }
 
-    table.file-upload-table .invalid-feedback {
+    table.file-upload-table :where(.file-upload-table__error, .file-upload-table__success, .file-upload-table__info) {
+      grid-column: 1 / span 3;
+    }
+
+    table.file-upload-table :where(.form-text, .invalid-feedback, .valid-feedback) {
       margin-block-start: 0;
     }
 
@@ -908,6 +905,10 @@
         --action: 20%;
       }
     }
+
+    table.file-upload-table .file-upload-table__filename {
+      overflow-wrap: break-word;
+    }
   }
 }
 
@@ -937,7 +938,7 @@
       margin: 1.2rem 0.8rem;
     }
 
-    :where(.header-logo-mobile, .header-logo-desktop) {
+    :where(.header-logo-mobile, .header-logo-desktop img) {
       width: auto;
     }
 
@@ -958,7 +959,7 @@
     }
 
     @media (--kfw-breakpoint-desktop) {
-      .header :is(button, a) {
+      .header :where(button, a) {
         font-size: var(--kfw-fontsize-large);
       }
 
@@ -1018,6 +1019,11 @@
       margin-block-end: var(--kfw-fontspace);
     }
 
+    .grid [type="file"]::file-selector-button,
+    .grid :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
+      white-space: normal;
+    }
+
     @media (--kfw-breakpoint-tablet) {
       .grid {
         grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
@@ -1091,6 +1097,30 @@
       height: auto;
       max-width: 128rem;
     }
+
+    .color-palette {
+      margin-block-end: var(--kfw-space-small);
+    }
+
+    .color-palette__color {
+      display: block;
+      width: 100%;
+      height: 3rem;
+      border-color: var(--kfw-color-fn-inactive);
+      border-width: var(--kfw-borderwidth);
+      border-style: solid; /* @todo add border-style token here later */
+    }
+
+    .color-palette__label {
+      text-wrap: balance;
+      display: block;
+      padding: 0.5rem 0.5rem 0;
+    }
+
+    .color-palette__container {
+      text-align: center;
+      padding-inline: 1rem;
+    }
   }
 
   @layer variations {
@@ -1109,7 +1139,7 @@
       text-decoration: underline;
     }
 
-    :where(.bg-dark, .footer) :where(a:not([role="button"]), [role="link"]):is(:hover, :focus, :active) {
+    :where(.bg-dark, .footer) :where(a:not([role="button"]), [role="link"]):where(:hover, :focus, :active) {
       text-decoration: none;
     }
 
@@ -1146,7 +1176,7 @@
       filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
     }
 
-    :where(.bg-dark, .footer) :where(.button--secondary, [type="reset"]):is(:hover, :focus) .icon {
+    :where(.bg-dark, .footer) :where(.button--secondary, [type="reset"]):where(:hover, :focus) .icon {
       filter: color-to-filter(var(--kfw-color-text));
     }
 
@@ -1223,6 +1253,10 @@
     margin-inline: auto;
   }
 
+  .p-0 {
+    padding: 0;
+  }
+
   .p-x {
     padding-inline: var(--kfw-safezone);
   }
@@ -1258,4 +1292,12 @@
   .mb-xl {
     margin-block-end: var(--kfw-space-big);
   }
+
+  .t-center {
+    text-align: center;
+  }
+
+  .gutter-0 {
+    column-gap: 0;
+  }
 }

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.5 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.7 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 :root, :host, .kfw-theme--light { color-scheme: light; }
@@ -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: #ffffff; /** Main text color on dark background (White) */
+  --kfw-color-text-on-disabled: #ffffff; /** 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: #ffffff; /** 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

@@ -109,11 +109,11 @@
       },
       "Violet": {
         "400": {
-          "$value": "#9598e0",
+          "$value": "#a455c5",
           "$type": "color"
         },
         "500": {
-          "$value": "#686fc8",
+          "$value": "#643179",
           "$type": "color"
         }
       },
@@ -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,