@openkfw/design-tokens 0.6.0 → 0.6.1

package/demo/src/style.css

@@ -1,24 +1,73 @@
 /* Establish the order of layers upfront */
-@layer reset, core, third-party, components, utility;
+@layer reset, core, icons, third-party, components, utility;
 @layer core.tokens, core.base, core.variations;
+@layer icons.base, icons.classes;
 @layer third-party.imports, third-party.overrides;
 @layer components.base, components.variations;
 
+/* Custom Media Queries */
+@import url("vendor/gen-custom-media.css");
+
 /* Reset, normalize, etc. */
 @import url("vendor/uaplus.css") layer(reset);
 
-/* KfW Design Tokens with Custom Media Queries */
+/* KfW Design Tokens */
 @import url("@openkfw/design-tokens/output/css/kfw-design-tokens.light.css") layer(core.tokens);
-@import url("vendor/gen-custom-media.css");
+
+/* Icons */
+@import url("vendor/gen-icons.css") layer(icons.classes);
+
+@layer icons.base {
+  :root {
+    --icon-size: 1.6rem;
+    --icon-size-lg: 2.4rem;
+    --icon-size-xl: 2.8rem;
+    --icon-size-2xl: 3.2rem;
+    --icon-size-3xl: 4rem;
+  }
+
+  .icon {
+    --size: var(--icon-size);
+
+    display: inline-block;
+    flex-shrink: 0;
+    vertical-align: top;
+    pointer-events: none;
+    mask-size: contain;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    background-color: currentcolor;
+    mask-image: var(--icon);
+    min-width: var(--size);
+    min-height: var(--size);
+  }
+
+  .icon--large {
+    --size: var(--icon-size-lg);
+  }
+
+  .icon--xlarge {
+    --size: var(--icon-size-xl);
+  }
+
+  .icon--2xl {
+    --size: var(--icon-size-2xl);
+  }
+
+  .icon--3xl {
+    --size: var(--icon-size-3xl);
+  }
+}
 
 @layer core {
   @layer tokens {
-    :root {
-      /* icons */
-      --kfw-icon-arrow-down: svg-load("icons/arrow-down.svg", "var(--kfw-color-text)");
-      --kfw-icon-arrow-down-fn: svg-load("icons/arrow-down.svg", "var(--kfw-color-fn)");
-      --kfw-icon-calendar-fn: svg-load("icons/calendar.svg", "var(--kfw-color-fn)");
-      --kfw-icon-time-fn: svg-load("icons/time.svg", "var(--kfw-color-fn)");
+    :root,
+    :host {
+      /* Base64 icons, used for elements without their own element or pseudo-elements (::before, ::after) like <select>, <input> */
+      --kfw-icon-base64-arrow-down: svg-load("icons/arrow-down.svg", "var(--kfw-color-text)");
+      --kfw-icon-base64-arrow-down-fn: svg-load("icons/arrow-down.svg", "var(--kfw-color-fn)");
+      --kfw-icon-base64-calendar-fn: svg-load("icons/calendar.svg", "var(--kfw-color-fn)");
+      --kfw-icon-base64-time-fn: svg-load("icons/time.svg", "var(--kfw-color-fn)");
 
       /* fluid shorthands */
       --kfw-safezone: clamp(var(--kfw-safezone-min), var(--kfw-safezone-val), var(--kfw-safezone-max));
@@ -85,13 +134,6 @@
       margin-block-end: 0;
     }
 
-    ul,
-    ol,
-    menu {
-      list-style: none inside none;
-      padding-inline-start: 0;
-    }
-
     mark {
       padding: 0.125rem 0.25rem;
       vertical-align: baseline;
@@ -107,6 +149,158 @@
       margin-block-start: var(--kfw-fontspace-2xsmall);
     }
 
+    /**
+    * Lists
+    */
+    ul,
+    ol,
+    menu {
+      list-style: none;
+      padding-inline-start: 0;
+      font-weight: var(--kfw-fontweight);
+    }
+
+    ul li ul,
+    ul li ol,
+    ol li ul,
+    ol li ol {
+      margin-block-start: var(--kfw-space-xsmall);
+      padding-inline-start: var(--kfw-space-small);
+    }
+
+    .list-item {
+      position: relative;
+      margin-block-end: var(--kfw-space-xsmall);
+    }
+
+    .list-item::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      mask-size: contain;
+      mask-position: center;
+      mask-repeat: no-repeat;
+      background-repeat: no-repeat;
+    }
+
+    :where(.list--numbers, .list--letters, .list--caps, .list--icon, .list--big-checks, .list--checks, .list--bullets) > .list-item {
+      padding-inline-start: 2rem;
+    }
+
+    :where(.list--numbers, .list--letters, .list--caps, .list--icon, .list--big-checks, .list--checks, .list--bullets) > .list-item::before {
+      content: "";
+    }
+
+    :where(.list--numbers, .list--letters, .list--caps, .list--icon, .list--big-checks, .list--checks, .list--bullets) > .list-item :where(ul, ol) {
+      padding-inline-start: 0;
+    }
+
+    /* Numbered and Lettered Lists */
+    :where(.list--letters, .list--caps) {
+      counter-reset: item;
+    }
+
+    :where(.list--letters, .list--caps) .list-item::before {
+      content: counter(item, lower-latin) ".";
+      counter-increment: item;
+      font-weight: var(--kfw-fontweight-bold);
+    }
+
+    .list--caps .list-item::before {
+      content: counter(item, upper-latin) ".";
+    }
+
+    .list--numbers {
+      counter-reset: item-counter;
+    }
+
+    .list--numbers > .list-item::before {
+      content: counter(item-counter) ".";
+      counter-increment: item-counter;
+      font-weight: var(--kfw-fontweight-bold);
+    }
+
+    /* Check and Big Check Lists */
+    :where(.list--checks, .list--big-checks) > .list-item {
+      --icon: var(--kfw-icon-checked);
+    }
+
+    .list--checks > .list-item::before {
+      min-width: var(--icon-size);
+      min-height: var(--icon-size);
+      top: 0.3rem;
+      mask-image: var(--icon);
+      background-color: var(--kfw-color-background-dark-green);
+    }
+
+    .list--big-checks > .list-item {
+      --size: var(--icon-size-xl);
+      --space: 1.5rem;
+
+      padding-inline-start: calc(var(--size) + var(--space));
+    }
+
+    .list--big-checks > .list-item::before {
+      min-width: var(--size);
+      min-height: var(--size);
+      top: -0.1rem;
+      mask-image: var(--icon);
+      background-color: var(--kfw-color-background-dark-green);
+    }
+
+    @media (--kfw-breakpoint-desktop-large) {
+      .list--big-checks > .list-item {
+        --size: var(--icon-size-2xl);
+        --space: 1rem;
+      }
+
+      .list--big-checks > .list-item::before {
+        top: -0.3rem;
+      }
+    }
+
+    /* Icon Lists */
+    .list--icon > .list-item {
+      --size: var(--icon-size-lg);
+      --space: 1.5rem;
+      --icon: var(--kfw-icon-checked);
+
+      margin-block-end: var(--kfw-space-small);
+      font-weight: var(--kfw-fontweight-bold);
+      padding-inline-start: calc(var(--size) + var(--space));
+    }
+
+    .list--icon > .list-item::before {
+      --icon-color: var(--kfw-color-background-dark-green);
+
+      min-width: var(--size);
+      min-height: var(--size);
+      mask-image: var(--icon);
+      background-color: var(--icon-color);
+      top: -0.1rem;
+    }
+
+    /* Bullet Lists */
+    .list--bullets > .list-item {
+      --icon-size: 0.5rem;
+
+      padding-inline-start: calc(var(--icon-size) + 10px);
+    }
+
+    .list--bullets > .list-item::before {
+      min-width: var(--icon-size);
+      min-height: var(--icon-size);
+      top: 0.8rem;
+      mask-image: var(--kfw-icon-bullet-point);
+      background-color: currentcolor;
+    }
+
+    .list--bullets-empty > .list-item::before {
+      mask-image: var(--kfw-icon-bullet-point-empty);
+      background-color: currentcolor;
+    }
+
     /**
     * Table
     */
@@ -298,19 +492,6 @@
       line-height: var(--kfw-lineheight);
     }
 
-    /**
-    * Icon
-    */
-    .icon {
-      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));
-    }
-
     /**
     * Form
     */
@@ -331,6 +512,7 @@
       padding-inline: 1.5rem;
       padding-block: 1rem;
       background-color: var(--kfw-color-background);
+      background-repeat: no-repeat;
     }
 
     .form-control::placeholder {
@@ -357,12 +539,11 @@
       padding-block: 0;
       background-position: center right 1.5rem;
       background-size: 2.4rem auto;
-      background-repeat: no-repeat;
-      background-image: var(--kfw-icon-arrow-down-fn);
+      background-image: var(--kfw-icon-base64-arrow-down-fn);
     }
 
     select.form-control:disabled {
-      background-image: var(--kfw-icon-arrow-down);
+      background-image: var(--kfw-icon-base64-arrow-down);
     }
 
     textarea.form-control {
@@ -382,11 +563,6 @@
       accent-color: var(--kfw-color-fn);
     }
 
-    [type="color"] {
-      padding-inline: 0.2rem;
-      padding-block: 0;
-    }
-
     textarea {
       display: block;
       resize: vertical;
@@ -409,7 +585,10 @@
     }
 
     :where(.form-text, .invalid-feedback, .valid-feedback) {
-      display: block;
+      --space-between: 0.8rem;
+
+      gap: var(--space-between);
+      display: flex;
       width: 100%;
       margin-block-start: 0.8rem;
       font-size: var(--kfw-fontsize-small);
@@ -421,18 +600,10 @@
       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-color-state-danger));
-    }
-
     :where(label, .form-label) {
       display: inline-block;
       margin-block-end: 0.8rem;
@@ -580,11 +751,11 @@
     }
 
     [type="date"]::-webkit-calendar-picker-indicator {
-      content: var(--kfw-icon-calendar-fn);
+      content: var(--kfw-icon-base64-calendar-fn);
     }
 
     [type="time"]::-webkit-calendar-picker-indicator {
-      content: var(--kfw-icon-time-fn);
+      content: var(--kfw-icon-base64-time-fn);
     }
 
     :where(a:not([role="button"]), [role="link"]) {
@@ -611,14 +782,6 @@
       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"]):where(:hover, :focus) .icon {
-      filter: color-to-filter(var(--kfw-color-fn-active));
-    }
-
     [type="file"]::file-selector-button,
     :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
       --space-between: 0.8rem;
@@ -643,6 +806,7 @@
       border-width: var(--kfw-borderwidth);
       border-style: solid;
       border-color: transparent;
+      color: var(--kfw-color-fn);
     }
 
     :where([type="submit"], .button--primary) {
@@ -665,22 +829,6 @@
       text-decoration: underline;
     }
 
-    .button--primary .icon {
-      filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
-    }
-
-    .button--secondary .icon {
-      filter: color-to-filter(var(--kfw-color-fn));
-    }
-
-    .button--primary:where(:hover, :focus) .icon {
-      filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
-    }
-
-    .button--secondary:where(:hover, :focus) .icon {
-      filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
-    }
-
     [type="file"]::file-selector-button,
     :where([type="reset"], .button--secondary) {
       --button-border-color: var(--kfw-color-fn);
@@ -772,19 +920,13 @@
       padding: 0.25rem;
       margin: 0;
       cursor: pointer;
-      border-radius: var(--kfw-borderradius); /* @todo check 1rem? */
+      border-radius: var(--kfw-borderradius);
     }
 
     .searchfield__button:where(:hover, :focus) {
       outline: 2px solid var(--kfw-color-fn-active);
     }
 
-    .searchfield__icon {
-      width: 2.4rem;
-      height: 2.4rem;
-      filter: color-to-filter(var(--kfw-color-fn));
-    }
-
     /**
     * File-Upload
     */
@@ -817,10 +959,8 @@
     }
 
     .file-upload__icon {
-      width: 4rem;
-      height: 4rem;
+      color: var(--kfw-color-fn);
       margin: 2rem;
-      filter: color-to-filter(var(--kfw-color-fn));
     }
 
     /**
@@ -1113,6 +1253,18 @@
       margin-block-end: var(--kfw-space-small);
     }
 
+    .color-palette__label {
+      text-wrap: balance;
+      display: block;
+      padding: 0.5rem;
+      margin-block-end: 0;
+    }
+
+    .color-palette__container {
+      text-align: center;
+      padding-inline: var(--kfw-space-xsmall);
+    }
+
     .color-palette__color {
       display: block;
       width: 100%;
@@ -1138,18 +1290,6 @@
         border-inline-end: var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive);
       }
     }
-
-    .color-palette__label {
-      text-wrap: balance;
-      display: block;
-      padding: 0.5rem;
-      margin-block-end: 0;
-    }
-
-    .color-palette__container {
-      text-align: center;
-      padding-inline: var(--kfw-space-xsmall);
-    }
   }
 
   @layer variations {
@@ -1172,14 +1312,6 @@
       text-decoration: none;
     }
 
-    :where(.bg-dark, .footer) :where([role="link"], a:not([role="button"])) .icon {
-      filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
-    }
-
-    :where(.bg-dark, .footer) :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) .icon {
-      filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
-    }
-
     :where(.bg-dark, .footer) :where(.button--primary, [type="submit"]) {
       --button-color: var(--kfw-color-fn);
       --button-bg: var(--kfw-color-text-on-dark-bg);
@@ -1189,10 +1321,6 @@
       --button-border-color-hover: var(--kfw-color-text-on-dark-bg);
     }
 
-    :where(.bg-dark, .footer) :where(.button--primary, [type="submit"]) .icon {
-      filter: color-to-filter(var(--kfw-color-fn));
-    }
-
     :where(.bg-dark, .footer) :where(.button--secondary, [type="reset"]) {
       --button-color: var(--kfw-color-text-on-dark-bg);
       --button-border-color: var(--kfw-color-text-on-dark-bg);
@@ -1201,14 +1329,6 @@
       --button-border-color-hover: var(--kfw-color-text-on-dark-bg);
     }
 
-    :where(.bg-dark, .footer) :where(.button--secondary, [type="reset"]) .icon {
-      filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
-    }
-
-    :where(.bg-dark, .footer) :where(.button--secondary, [type="reset"]):where(:hover, :focus) .icon {
-      filter: color-to-filter(var(--kfw-color-text));
-    }
-
     :where(.bg-dark, .footer) .button--tertiary {
       --button-color: var(--kfw-color-text-on-dark-bg);
       --button-color-hover: var(--kfw-color-text-on-dark-bg);

package/demo/src/vendor/gen-icons.css

@@ -0,0 +1,105 @@
+/* Auto-generated icon classes */
+
+:root,
+:host {
+  --kfw-icon-alert: url("../icons/alert.svg");
+  --kfw-icon-arrow-down: url("../icons/arrow-down.svg");
+  --kfw-icon-arrow-left: url("../icons/arrow-left.svg");
+  --kfw-icon-arrow-right: url("../icons/arrow-right.svg");
+  --kfw-icon-arrow-up: url("../icons/arrow-up.svg");
+  --kfw-icon-bullet-point-empty: url("../icons/bullet-point-empty.svg");
+  --kfw-icon-bullet-point: url("../icons/bullet-point.svg");
+  --kfw-icon-calendar: url("../icons/calendar.svg");
+  --kfw-icon-checked: url("../icons/checked.svg");
+  --kfw-icon-delete: url("../icons/delete.svg");
+  --kfw-icon-dialogue: url("../icons/dialogue.svg");
+  --kfw-icon-exclamation-mark-filled: url("../icons/exclamation-mark-filled.svg");
+  --kfw-icon-home: url("../icons/home.svg");
+  --kfw-icon-lock: url("../icons/lock.svg");
+  --kfw-icon-login: url("../icons/login.svg");
+  --kfw-icon-personal-settings: url("../icons/personal-settings.svg");
+  --kfw-icon-plus: url("../icons/plus.svg");
+  --kfw-icon-search: url("../icons/search.svg");
+  --kfw-icon-time: url("../icons/time.svg");
+  --kfw-icon-upload: url("../icons/upload.svg");
+}
+
+.icon--alert {
+  --icon: var(--kfw-icon-alert);
+}
+
+.icon--arrow-down {
+  --icon: var(--kfw-icon-arrow-down);
+}
+
+.icon--arrow-left {
+  --icon: var(--kfw-icon-arrow-left);
+}
+
+.icon--arrow-right {
+  --icon: var(--kfw-icon-arrow-right);
+}
+
+.icon--arrow-up {
+  --icon: var(--kfw-icon-arrow-up);
+}
+
+.icon--bullet-point-empty {
+  --icon: var(--kfw-icon-bullet-point-empty);
+}
+
+.icon--bullet-point {
+  --icon: var(--kfw-icon-bullet-point);
+}
+
+.icon--calendar {
+  --icon: var(--kfw-icon-calendar);
+}
+
+.icon--checked {
+  --icon: var(--kfw-icon-checked);
+}
+
+.icon--delete {
+  --icon: var(--kfw-icon-delete);
+}
+
+.icon--dialogue {
+  --icon: var(--kfw-icon-dialogue);
+}
+
+.icon--exclamation-mark-filled {
+  --icon: var(--kfw-icon-exclamation-mark-filled);
+}
+
+.icon--home {
+  --icon: var(--kfw-icon-home);
+}
+
+.icon--lock {
+  --icon: var(--kfw-icon-lock);
+}
+
+.icon--login {
+  --icon: var(--kfw-icon-login);
+}
+
+.icon--personal-settings {
+  --icon: var(--kfw-icon-personal-settings);
+}
+
+.icon--plus {
+  --icon: var(--kfw-icon-plus);
+}
+
+.icon--search {
+  --icon: var(--kfw-icon-search);
+}
+
+.icon--time {
+  --icon: var(--kfw-icon-time);
+}
+
+.icon--upload {
+  --icon: var(--kfw-icon-upload);
+}

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.6.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.6.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 :root, :host { color-scheme: light; }
@@ -156,13 +156,15 @@
   --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 (Blue 600) */
-  --kfw-color-fn-active: #00446e; /** Interaction color when active (e.g., hover, Blue 700) */
+  --kfw-color-fn-active: #00446e; /** Main 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-on-white-bg: #b7f9aa; /** Text color on white background (Green 300) */
+  --kfw-color-text-on-colored-bg: #00375b; /** Text color on colored background (Blue 800) */
+  --kfw-color-text-on-disabled: #fff; /** 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) */

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

@@ -340,6 +340,14 @@
           "$value": "#fff",
           "$type": "color"
         },
+        "On-white-bg": {
+          "$value": "#b7f9aa",
+          "$type": "color"
+        },
+        "On-colored-bg": {
+          "$value": "#00375b",
+          "$type": "color"
+        },
         "On-disabled": {
           "$value": "#fff",
           "$type": "color"

package/output/js/kfw-design-tokens.d.ts

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.6.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.6.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 export const KfwBaseColorBlue100: {
@@ -275,7 +275,7 @@ export const KfwColorFn: {
   components: number[];
   hex: string;
 };
-/** Interaction color when active (e.g., hover, Blue 700) */
+/** Main interaction color when active (e.g., hover, Blue 700) */
 export const KfwColorFnActive: {
   colorSpace: string;
   components: number[];
@@ -311,7 +311,19 @@ export const KfwColorTextOnDarkBg: {
   components: number[];
   hex: string;
 };
-/** Main text color on disabled (White) */
+/** Text color on white background (Green 300) */
+export const KfwColorTextOnWhiteBg: {
+  colorSpace: string;
+  components: number[];
+  hex: string;
+};
+/** Text color on colored background (Blue 800) */
+export const KfwColorTextOnColoredBg: {
+  colorSpace: string;
+  components: number[];
+  hex: string;
+};
+/** Text color on disabled (White) */
 export const KfwColorTextOnDisabled: {
   colorSpace: string;
   components: number[];