@openkfw/design-tokens 0.5.0 → 0.5.1

package/README.md

@@ -28,7 +28,7 @@ npm i -D @openkfw/design-tokens
 Import or use files inside the `output` folder, e.g.:
 
 ```css
-@import url("@openkfw/design-tokens/output/web_stable_10px/css/kfw-design-tokens.light.css");
+@import url("@openkfw/design-tokens/output/css/kfw-design-tokens.light.css");
 ```
 
 ## ❤️ Contributing

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 :root, :host, .kfw-theme--light { color-scheme: light; }
@@ -118,7 +118,7 @@
   --kfw-base-borderradius-sm: 2px;
   --kfw-base-borderradius-md: 0.4rem;
   --kfw-base-borderradius-lg: 2rem;
-  --kfw-base-borderradius-full: 999.9rem;
+  --kfw-base-borderradius-circle: 999.9rem;
   --kfw-base-borderwidth-none: 0;
   --kfw-base-borderwidth-md: 1px;
   --kfw-base-borderwidth-lg: 2px;
@@ -246,6 +246,7 @@
   --kfw-borderradius: 0.4rem;
   --kfw-borderradius-large: 2rem;
   --kfw-borderradius-small: 2px;
+  --kfw-borderradius-circle: 999.9rem;
   --kfw-borderwidth: 1px;
   --kfw-borderwidth-large: 2px;
   --kfw-focusring-outline-width: 2px;

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

@@ -263,7 +263,7 @@
         "$value": "20px",
         "$type": "borderRadius"
       },
-      "Full": {
+      "Circle": {
         "$value": "9999px",
         "$type": "borderRadius"
       }
@@ -690,6 +690,10 @@
       "Small": {
         "$value": "2px",
         "$type": "borderRadius"
+      },
+      "Circle": {
+        "$value": "9999px",
+        "$type": "borderRadius"
       }
     },
     "Borderwidth": {

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 export const KfwBaseColorBlue100: {
@@ -232,7 +232,7 @@ export const KfwBaseLineheightLg: number;
 export const KfwBaseBorderradiusSm: string;
 export const KfwBaseBorderradiusMd: string;
 export const KfwBaseBorderradiusLg: string;
-export const KfwBaseBorderradiusFull: string;
+export const KfwBaseBorderradiusCircle: string;
 export const KfwBaseBorderwidthNone: string;
 export const KfwBaseBorderwidthMd: string;
 export const KfwBaseBorderwidthLg: string;
@@ -540,6 +540,7 @@ export const KfwLineheightHeading5: number;
 export const KfwBorderradius: string;
 export const KfwBorderradiusLarge: string;
 export const KfwBorderradiusSmall: string;
+export const KfwBorderradiusCircle: string;
 export const KfwBorderwidth: string;
 export const KfwBorderwidthLarge: string;
 export const KfwFocusringOutlineWidth: string;

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 export const KfwBaseColorBlue100 = {
@@ -234,7 +234,7 @@ export const KfwBaseLineheightLg = 1.5;
 export const KfwBaseBorderradiusSm = "2px";
 export const KfwBaseBorderradiusMd = "0.4rem";
 export const KfwBaseBorderradiusLg = "2rem";
-export const KfwBaseBorderradiusFull = "999.9rem";
+export const KfwBaseBorderradiusCircle = "999.9rem";
 export const KfwBaseBorderwidthNone = "0";
 export const KfwBaseBorderwidthMd = "1px";
 export const KfwBaseBorderwidthLg = "2px";
@@ -541,6 +541,7 @@ export const KfwLineheightHeading5 = 1.333;
 export const KfwBorderradius = "0.4rem";
 export const KfwBorderradiusLarge = "2rem";
 export const KfwBorderradiusSmall = "2px";
+export const KfwBorderradiusCircle = "999.9rem";
 export const KfwBorderwidth = "1px";
 export const KfwBorderwidthLarge = "2px";
 export const KfwFocusringOutlineWidth = "2px";

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

@@ -3511,8 +3511,8 @@
           "lg"
         ]
       },
-      "full": {
-        "key": "{base.borderradius.full}",
+      "circle": {
+        "key": "{base.borderradius.circle}",
         "$value": {
           "unit": "px",
           "value": 9999
@@ -3526,14 +3526,14 @@
             "value": 9999
           },
           "$type": "dimension",
-          "key": "{base.borderradius.full}"
+          "key": "{base.borderradius.circle}"
         },
-        "name": "full",
+        "name": "circle",
         "attributes": {},
         "path": [
           "base",
           "borderradius",
-          "full"
+          "circle"
         ]
       }
     },
@@ -7054,6 +7054,28 @@
           "borderradius",
           "small"
         ]
+      },
+      "circle": {
+        "key": "{semantic.borderradius.circle}",
+        "$value": {
+          "unit": "px",
+          "value": 9999
+        },
+        "filePath": "tokens/tokens.json",
+        "isSource": true,
+        "$type": "dimension",
+        "original": {
+          "$value": "{base.borderradius.circle}",
+          "$type": "dimension",
+          "key": "{semantic.borderradius.circle}"
+        },
+        "name": "circle",
+        "attributes": {},
+        "path": [
+          "semantic",
+          "borderradius",
+          "circle"
+        ]
       }
     },
     "borderwidth": {

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

@@ -263,7 +263,7 @@
         "$value": "20px",
         "$type": "borderRadius"
       },
-      "Full": {
+      "Circle": {
         "$value": "9999px",
         "$type": "borderRadius"
       }
@@ -690,6 +690,10 @@
       "Small": {
         "$value": "2px",
         "$type": "borderRadius"
+      },
+      "Circle": {
+        "$value": "9999px",
+        "$type": "borderRadius"
       }
     },
     "Borderwidth": {

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

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+// KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
 
 $kfw-base-color-blue-100: #e9f5fb;
 $kfw-base-color-blue-400: #54b3e2;
@@ -114,7 +114,7 @@ $kfw-base-lineheight-lg: 1.5;
 $kfw-base-borderradius-sm: 2px;
 $kfw-base-borderradius-md: 0.4rem;
 $kfw-base-borderradius-lg: 2rem;
-$kfw-base-borderradius-full: 999.9rem;
+$kfw-base-borderradius-circle: 999.9rem;
 $kfw-base-borderwidth-none: 0;
 $kfw-base-borderwidth-md: 1px;
 $kfw-base-borderwidth-lg: 2px;
@@ -242,6 +242,7 @@ $kfw-lineheight-heading-5: 1.333;
 $kfw-borderradius: 0.4rem;
 $kfw-borderradius-large: 2rem;
 $kfw-borderradius-small: 2px;
+$kfw-borderradius-circle: 999.9rem;
 $kfw-borderwidth: 1px;
 $kfw-borderwidth-large: 2px;
 $kfw-focusring-outline-width: 2px;

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 :root, :host, .kfw-theme--light { color-scheme: light; }
@@ -118,7 +118,7 @@
   --kfw-base-borderradius-sm: 2px;
   --kfw-base-borderradius-md: 0.25rem;
   --kfw-base-borderradius-lg: 1.25rem;
-  --kfw-base-borderradius-full: 624.9375rem;
+  --kfw-base-borderradius-circle: 624.9375rem;
   --kfw-base-borderwidth-none: 0;
   --kfw-base-borderwidth-md: 1px;
   --kfw-base-borderwidth-lg: 2px;
@@ -246,6 +246,7 @@
   --kfw-borderradius: 0.25rem;
   --kfw-borderradius-large: 1.25rem;
   --kfw-borderradius-small: 2px;
+  --kfw-borderradius-circle: 624.9375rem;
   --kfw-borderwidth: 1px;
   --kfw-borderwidth-large: 2px;
   --kfw-focusring-outline-width: 2px;

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

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 export const KfwBaseColorBlue100: {
@@ -232,7 +232,7 @@ export const KfwBaseLineheightLg: number;
 export const KfwBaseBorderradiusSm: string;
 export const KfwBaseBorderradiusMd: string;
 export const KfwBaseBorderradiusLg: string;
-export const KfwBaseBorderradiusFull: string;
+export const KfwBaseBorderradiusCircle: string;
 export const KfwBaseBorderwidthNone: string;
 export const KfwBaseBorderwidthMd: string;
 export const KfwBaseBorderwidthLg: string;
@@ -540,6 +540,7 @@ export const KfwLineheightHeading5: number;
 export const KfwBorderradius: string;
 export const KfwBorderradiusLarge: string;
 export const KfwBorderradiusSmall: string;
+export const KfwBorderradiusCircle: string;
 export const KfwBorderwidth: string;
 export const KfwBorderwidthLarge: string;
 export const KfwFocusringOutlineWidth: string;

package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 export const KfwBaseColorBlue100 = {
@@ -234,7 +234,7 @@ export const KfwBaseLineheightLg = 1.5;
 export const KfwBaseBorderradiusSm = "2px";
 export const KfwBaseBorderradiusMd = "0.25rem";
 export const KfwBaseBorderradiusLg = "1.25rem";
-export const KfwBaseBorderradiusFull = "624.9375rem";
+export const KfwBaseBorderradiusCircle = "624.9375rem";
 export const KfwBaseBorderwidthNone = "0";
 export const KfwBaseBorderwidthMd = "1px";
 export const KfwBaseBorderwidthLg = "2px";
@@ -541,6 +541,7 @@ export const KfwLineheightHeading5 = 1.333;
 export const KfwBorderradius = "0.25rem";
 export const KfwBorderradiusLarge = "1.25rem";
 export const KfwBorderradiusSmall = "2px";
+export const KfwBorderradiusCircle = "624.9375rem";
 export const KfwBorderwidth = "1px";
 export const KfwBorderwidthLarge = "2px";
 export const KfwFocusringOutlineWidth = "2px";

package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.5.0 | MPL-2.0 | https://github.com/openkfw/design-tokens
+// KfW Design Tokens v0.5.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
 
 $kfw-base-color-blue-100: #e9f5fb;
 $kfw-base-color-blue-400: #54b3e2;
@@ -114,7 +114,7 @@ $kfw-base-lineheight-lg: 1.5;
 $kfw-base-borderradius-sm: 2px;
 $kfw-base-borderradius-md: 0.25rem;
 $kfw-base-borderradius-lg: 1.25rem;
-$kfw-base-borderradius-full: 624.9375rem;
+$kfw-base-borderradius-circle: 624.9375rem;
 $kfw-base-borderwidth-none: 0;
 $kfw-base-borderwidth-md: 1px;
 $kfw-base-borderwidth-lg: 2px;
@@ -242,6 +242,7 @@ $kfw-lineheight-heading-5: 1.333;
 $kfw-borderradius: 0.25rem;
 $kfw-borderradius-large: 1.25rem;
 $kfw-borderradius-small: 2px;
+$kfw-borderradius-circle: 624.9375rem;
 $kfw-borderwidth: 1px;
 $kfw-borderwidth-large: 2px;
 $kfw-focusring-outline-width: 2px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openkfw/design-tokens",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "The source of truth for KfW-branded digital products.",
   "files": [
     "output",
@@ -38,7 +38,7 @@
     "@eslint/js": "^9.37.0",
     "@tsconfig/node22": "^22.0.2",
     "@types/lodash": "^4.17.20",
-    "@types/node": "^24.7.1",
+    "@types/node": "^22",
     "concurrently": "^9.2.1",
     "deep-get-set-ts": "^1.1.2",
     "eslint": "^9.37.0",

package/tokens/gen-tokens.dark.json5

@@ -852,7 +852,7 @@
           value: 20,
         },
       },
-      full: {
+      circle: {
         $value: {
           unit: "px",
           value: 9999,
@@ -1410,6 +1410,9 @@
       small: {
         $value: "{base.borderradius.sm}",
       },
+      circle: {
+        $value: "{base.borderradius.circle}",
+      },
     },
     borderwidth: {
       $type: "dimension",

package/tokens/tokens.json

@@ -193,7 +193,7 @@
       "sm": { "$value": { "unit": "px", "value": 2 } },
       "md": { "$value": { "unit": "px", "value": 4 } },
       "lg": { "$value": { "unit": "px", "value": 20 } },
-      "full": { "$value": { "unit": "px", "value": 9999 } }
+      "circle": { "$value": { "unit": "px", "value": 9999 } }
     },
     "borderwidth": {
       "$type": "dimension",
@@ -412,7 +412,8 @@
       "$type": "dimension",
       "default": { "$value": "{base.borderradius.md}" },
       "large": { "$value": "{base.borderradius.lg}" },
-      "small": { "$value": "{base.borderradius.sm}" }
+      "small": { "$value": "{base.borderradius.sm}" },
+      "circle": { "$value": "{base.borderradius.circle}" }
     },
     "borderwidth": {
       "$type": "dimension",