@openkfw/design-tokens 0.1.2 → 0.2.0

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

@@ -5059,37 +5059,6 @@
           ]
         }
       },
-      "accent": {
-        "key": "{semantic.color.accent}",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [
-            0.7176,
-            0.9765,
-            0.6667
-          ],
-          "hex": "#b7f9aa"
-        },
-        "filePath": "tokens/tokens.json",
-        "isSource": true,
-        "$type": "color",
-        "original": {
-          "$value": "{base.color.green.300}",
-          "$type": "color",
-          "key": "{semantic.color.accent}"
-        },
-        "name": "kfw-color-accent",
-        "attributes": {
-          "category": "semantic",
-          "type": "color",
-          "item": "accent"
-        },
-        "path": [
-          "semantic",
-          "color",
-          "accent"
-        ]
-      },
       "opaque": {
         "white-90": {
           "key": "{semantic.color.opaque.white-90}",
@@ -7013,42 +6982,26 @@
       ]
     },
     "focusring": {
-      "outline": {
-        "key": "{semantic.focusring.outline}",
-        "$type": "border",
+      "outline-width": {
+        "key": "{semantic.focusring.outline-width}",
+        "$type": "dimension",
         "$value": {
-          "color": {
-            "colorSpace": "srgb",
-            "components": [
-              0,
-              0.2667,
-              0.4314
-            ],
-            "hex": "#00446e"
-          },
-          "width": {
-            "unit": "px",
-            "value": 2
-          },
-          "style": "dashed"
+          "unit": "px",
+          "value": 2
         },
         "filePath": "tokens/tokens.json",
         "isSource": true,
         "original": {
-          "$type": "border",
-          "$value": {
-            "color": "{semantic.color.fn.active}",
-            "width": "{base.borderwidth.lg}",
-            "style": "dashed"
-          },
-          "key": "{semantic.focusring.outline}"
+          "$type": "dimension",
+          "$value": "{base.borderwidth.lg}",
+          "key": "{semantic.focusring.outline-width}"
         },
-        "name": "outline",
+        "name": "outline-width",
         "attributes": {},
         "path": [
           "semantic",
           "focusring",
-          "outline"
+          "outline-width"
         ]
       },
       "outline-offset": {
@@ -7072,6 +7025,29 @@
           "focusring",
           "outline-offset"
         ]
+      },
+      "outline-style": {
+        "key": "{semantic.focusring.outline-style}",
+        "$type": "strokeStyle",
+        "$value": "dashed",
+        "filePath": "tokens/tokens.json",
+        "isSource": true,
+        "original": {
+          "$type": "strokeStyle",
+          "$value": "dashed",
+          "key": "{semantic.focusring.outline-style}"
+        },
+        "name": "kfw-focusring-outline-style",
+        "attributes": {
+          "category": "semantic",
+          "type": "focusring",
+          "item": "outline-style"
+        },
+        "path": [
+          "semantic",
+          "focusring",
+          "outline-style"
+        ]
       }
     },
     "fontweight": {

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

@@ -141,95 +141,91 @@
       }
     },
     "Space": {
-      "Static": {
-        "5": {
-          "$value": "5px",
-          "$type": "spacing"
-        },
-        "10": {
-          "$value": "10px",
-          "$type": "spacing"
-        },
-        "15": {
-          "$value": "15px",
-          "$type": "spacing"
-        },
-        "20": {
-          "$value": "20px",
-          "$type": "spacing"
-        },
-        "25": {
-          "$value": "25px",
-          "$type": "spacing"
-        },
-        "30": {
-          "$value": "30px",
-          "$type": "spacing"
-        },
-        "35": {
-          "$value": "35px",
-          "$type": "spacing"
-        },
-        "40": {
-          "$value": "40px",
-          "$type": "spacing"
-        },
-        "50": {
-          "$value": "50px",
-          "$type": "spacing"
-        },
-        "60": {
-          "$value": "60px",
-          "$type": "spacing"
-        }
+      "5": {
+        "$value": "5px",
+        "$type": "spacing"
+      },
+      "10": {
+        "$value": "10px",
+        "$type": "spacing"
+      },
+      "15": {
+        "$value": "15px",
+        "$type": "spacing"
+      },
+      "20": {
+        "$value": "20px",
+        "$type": "spacing"
+      },
+      "25": {
+        "$value": "25px",
+        "$type": "spacing"
+      },
+      "30": {
+        "$value": "30px",
+        "$type": "spacing"
+      },
+      "35": {
+        "$value": "35px",
+        "$type": "spacing"
+      },
+      "40": {
+        "$value": "40px",
+        "$type": "spacing"
+      },
+      "50": {
+        "$value": "50px",
+        "$type": "spacing"
+      },
+      "60": {
+        "$value": "60px",
+        "$type": "spacing"
       }
     },
     "Fontsize": {
-      "Static": {
-        "Sm": {
-          "$value": "14px",
-          "$type": "fontSizes"
-        },
-        "Md": {
-          "$value": "16px",
-          "$type": "fontSizes"
-        },
-        "Lg": {
-          "$value": "18px",
-          "$type": "fontSizes"
-        },
-        "Xl": {
-          "$value": "20px",
-          "$type": "fontSizes"
-        },
-        "2xl": {
-          "$value": "22px",
-          "$type": "fontSizes"
-        },
-        "3xl": {
-          "$value": "24px",
-          "$type": "fontSizes"
-        },
-        "4xl": {
-          "$value": "26px",
-          "$type": "fontSizes"
-        },
-        "5xl": {
-          "$value": "28px",
-          "$type": "fontSizes"
-        },
-        "6xl": {
-          "$value": "30px",
-          "$type": "fontSizes"
-        },
-        "7xl": {
-          "$value": "32px",
-          "$type": "fontSizes"
-        },
-        "8xl": {
-          "$value": "36px",
-          "$type": "fontSizes"
-        }
+      "Sm": {
+        "$value": "14px",
+        "$type": "fontSizes"
+      },
+      "Md": {
+        "$value": "16px",
+        "$type": "fontSizes"
+      },
+      "Lg": {
+        "$value": "18px",
+        "$type": "fontSizes"
+      },
+      "Xl": {
+        "$value": "20px",
+        "$type": "fontSizes"
+      },
+      "2xl": {
+        "$value": "22px",
+        "$type": "fontSizes"
+      },
+      "3xl": {
+        "$value": "24px",
+        "$type": "fontSizes"
+      },
+      "4xl": {
+        "$value": "26px",
+        "$type": "fontSizes"
+      },
+      "5xl": {
+        "$value": "28px",
+        "$type": "fontSizes"
+      },
+      "6xl": {
+        "$value": "30px",
+        "$type": "fontSizes"
+      },
+      "7xl": {
+        "$value": "32px",
+        "$type": "fontSizes"
+      },
+      "8xl": {
+        "$value": "36px",
+        "$type": "fontSizes"
       }
     },
     "Lineheight": {
@@ -275,15 +271,15 @@
     "Borderwidth": {
       "None": {
         "$value": "0px",
-        "$type": "dimension"
+        "$type": "borderWidth"
       },
       "Md": {
         "$value": "1px",
-        "$type": "dimension"
+        "$type": "borderWidth"
       },
       "Lg": {
         "$value": "2px",
-        "$type": "dimension"
+        "$type": "borderWidth"
       }
     },
     "Fontweight": {
@@ -299,123 +295,19 @@
     "Letterspacing": {
       "Tight": {
         "$value": "-0.5px",
-        "$type": "dimension"
+        "$type": "letterSpacing"
       },
       "Normal": {
         "$value": "0px",
-        "$type": "dimension"
+        "$type": "letterSpacing"
       },
       "Wide": {
         "$value": "0.5px",
-        "$type": "dimension"
+        "$type": "letterSpacing"
       },
       "Wider": {
         "$value": "1px",
-        "$type": "dimension"
-      }
-    },
-    "Layout": {
-      "Breakpoint": {
-        "Xs": {
-          "$value": "320px",
-          "$type": "dimension"
-        },
-        "Sm": {
-          "$value": "600px",
-          "$type": "dimension"
-        },
-        "Md": {
-          "$value": "840px",
-          "$type": "dimension"
-        },
-        "Lg": {
-          "$value": "960px",
-          "$type": "dimension"
-        },
-        "Xl": {
-          "$value": "1280px",
-          "$type": "dimension"
-        }
-      },
-      "Container": {
-        "Sm": {
-          "$value": "896px",
-          "$type": "dimension"
-        },
-        "Md": {
-          "$value": "1080px",
-          "$type": "dimension"
-        },
-        "Lg": {
-          "$value": "1280px",
-          "$type": "dimension"
-        }
-      },
-      "Safezone": {
-        "Static": {
-          "Md": {
-            "$value": "20px",
-            "$type": "dimension"
-          },
-          "Lg": {
-            "$value": "40px",
-            "$type": "dimension"
-          }
-        }
-      },
-      "Gridcolumn": {
-        "1": {
-          "$value": 1,
-          "$type": "number"
-        },
-        "2": {
-          "$value": 2,
-          "$type": "number"
-        },
-        "3": {
-          "$value": 3,
-          "$type": "number"
-        },
-        "4": {
-          "$value": 4,
-          "$type": "number"
-        },
-        "6": {
-          "$value": 6,
-          "$type": "number"
-        },
-        "8": {
-          "$value": 8,
-          "$type": "number"
-        },
-        "12": {
-          "$value": 12,
-          "$type": "number"
-        }
-      },
-      "Gridgap": {
-        "Static": {
-          "Xs": {
-            "$value": "12px",
-            "$type": "dimension"
-          },
-          "Sm": {
-            "$value": "18px",
-            "$type": "dimension"
-          },
-          "Md": {
-            "$value": "22px",
-            "$type": "dimension"
-          },
-          "Lg": {
-            "$value": "26px",
-            "$type": "dimension"
-          },
-          "Xl": {
-            "$value": "36px",
-            "$type": "dimension"
-          }
-        }
+        "$type": "letterSpacing"
       }
     }
   },
@@ -491,10 +383,6 @@
           "$type": "color"
         }
       },
-      "Accent": {
-        "$value": "#b7f9aa",
-        "$type": "color"
-      },
       "Opaque": {
         "White-90": {
           "$value": "#ffffffe6",
@@ -640,31 +528,23 @@
         "$type": "spacing"
       },
       "Large": {
-        "Min": {
+        "Mobile": {
           "$value": "35px",
           "$type": "spacing"
         },
-        "Max": {
+        "Desktop": {
           "$value": "40px",
           "$type": "spacing"
-        },
-        "Val": {
-          "$value": "33.333px",
-          "$type": "spacing"
         }
       },
       "Big": {
-        "Min": {
+        "Mobile": {
           "$value": "50px",
           "$type": "spacing"
         },
-        "Max": {
+        "Desktop": {
           "$value": "60px",
           "$type": "spacing"
-        },
-        "Val": {
-          "$value": "46.666px",
-          "$type": "spacing"
         }
       }
     },
@@ -728,59 +608,43 @@
         "$type": "fontSizes"
       },
       "Heading-1": {
-        "Min": {
+        "Mobile": {
           "$value": "30px",
           "$type": "fontSizes"
         },
-        "Max": {
+        "Desktop": {
           "$value": "36px",
           "$type": "fontSizes"
-        },
-        "Val": {
-          "$value": "28px",
-          "$type": "fontSizes"
         }
       },
       "Heading-2": {
-        "Min": {
+        "Mobile": {
           "$value": "28px",
           "$type": "fontSizes"
         },
-        "Max": {
+        "Desktop": {
           "$value": "32px",
           "$type": "fontSizes"
-        },
-        "Val": {
-          "$value": "26.666px",
-          "$type": "fontSizes"
         }
       },
       "Heading-3": {
-        "Min": {
+        "Mobile": {
           "$value": "24px",
           "$type": "fontSizes"
         },
-        "Max": {
+        "Desktop": {
           "$value": "26px",
           "$type": "fontSizes"
-        },
-        "Val": {
-          "$value": "23.333px",
-          "$type": "fontSizes"
         }
       },
       "Heading-4": {
-        "Min": {
+        "Mobile": {
           "$value": "20px",
           "$type": "fontSizes"
         },
-        "Max": {
+        "Desktop": {
           "$value": "22px",
           "$type": "fontSizes"
-        },
-        "Val": {
-          "$value": "19.333px",
-          "$type": "fontSizes"
         }
       },
       "Heading-5": {
@@ -814,20 +678,6 @@
       "$value": "4px",
       "$type": "borderRadius"
     },
-    "Focusring": {
-      "Outline": {
-        "$value": {
-          "color": "#00446e",
-          "width": "2px",
-          "style": "dashed"
-        },
-        "$type": "border"
-      },
-      "Outline-offset": {
-        "$value": "2px",
-        "$type": "dimension"
-      }
-    },
     "Fontweight": {
       "Default": {
         "$value": 400,
@@ -837,48 +687,6 @@
         "$value": 500,
         "$type": "fontWeights"
       }
-    },
-    "Breakpoint": {
-      "Mobile": {
-        "$value": "600px",
-        "$type": "dimension"
-      },
-      "Tablet": {
-        "$value": "840px",
-        "$type": "dimension"
-      },
-      "Desktop": {
-        "$value": "960px",
-        "$type": "dimension"
-      }
-    },
-    "Contentwrapper": {
-      "Narrow": {
-        "$value": "896px",
-        "$type": "dimension"
-      },
-      "Basic": {
-        "$value": "1080px",
-        "$type": "dimension"
-      },
-      "Extended": {
-        "$value": "1280px",
-        "$type": "dimension"
-      }
-    },
-    "Safezone": {
-      "Min": {
-        "$value": "20px",
-        "$type": "dimension"
-      },
-      "Max": {
-        "$value": "40px",
-        "$type": "dimension"
-      },
-      "Val": {
-        "$value": "-13.333px",
-        "$type": "dimension"
-      }
     }
   },
   "$metadata": {

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.1.1
+ * KfW Design Tokens v0.2.0
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */
@@ -174,7 +174,6 @@
   --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;
@@ -246,8 +245,9 @@
   --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-width: 0.125rem;
   --kfw-focusring-outline-offset: 0.125rem;
+  --kfw-focusring-outline-style: dashed;
   --kfw-fontweight: 400;
   --kfw-fontweight-heading: 500;
   --kfw-breakpoint-mobile: 37.5rem;

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.1.1
+ * KfW Design Tokens v0.2.0
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */
@@ -352,11 +352,6 @@ export const KfwColorBackgroundDarkGreen: {
   components: number[];
   hex: string;
 };
-export const KfwColorAccent: {
-  colorSpace: string;
-  components: number[];
-  hex: string;
-};
 export const KfwColorOpaqueWhite90: {
   colorSpace: string;
   components: number[];
@@ -541,12 +536,9 @@ export const KfwLineheightList: number;
 export const KfwLineheightHeading: number;
 export const KfwLineheightHeading5: number;
 export const KfwBorderradius: string;
-export const KfwFocusringOutline: {
-  color: { colorSpace: string; components: number[]; hex: string };
-  width: string;
-  style: string;
-};
+export const KfwFocusringOutlineWidth: string;
 export const KfwFocusringOutlineOffset: string;
+export const KfwFocusringOutlineStyle: string;
 export const KfwFontweight: number;
 export const KfwFontweightHeading: number;
 export const KfwBreakpointMobile: string;