@openkfw/design-tokens 0.2.1 → 0.4.0

package/output/{web_next_16px → web_thirdparty_16px}/js/kfw-design-tokens.light.js

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.2.1
+ * KfW Design Tokens v0.4.0
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */
@@ -150,9 +150,9 @@ export const KfwBaseColorYellow500 = {
   hex: "#eac80b",
 };
 export const KfwBaseFontfamilySans =
-  "'KfW Centro Sans', Arial, Helvetica Neue, Helvetica, sans-serif";
+  "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif";
 export const KfwBaseFontfamilyMono =
-  'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace';
+  "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
 export const KfwBaseSpaceStatic5 = "0.3125rem";
 export const KfwBaseSpaceStatic10 = "0.625rem";
 export const KfwBaseSpaceStatic15 = "0.9375rem";
@@ -165,31 +165,31 @@ export const KfwBaseSpaceStatic50 = "3.125rem";
 export const KfwBaseSpaceStatic60 = "3.75rem";
 export const KfwBaseSpaceFluid5Min = "0.3125rem";
 export const KfwBaseSpaceFluid5Max = "0.625rem";
-export const KfwBaseSpaceFluid5Val = "0.2083125rem";
+export const KfwBaseSpaceFluid5Val = "0.588px";
 export const KfwBaseSpaceFluid10Min = "0.625rem";
 export const KfwBaseSpaceFluid10Max = "0.9375rem";
-export const KfwBaseSpaceFluid10Val = "0.5208125rem";
+export const KfwBaseSpaceFluid10Val = "0.34925rem";
 export const KfwBaseSpaceFluid15Min = "0.9375rem";
 export const KfwBaseSpaceFluid15Max = "1.25rem";
-export const KfwBaseSpaceFluid15Val = "0.8333125rem";
+export const KfwBaseSpaceFluid15Val = "0.66175rem";
 export const KfwBaseSpaceFluid20Min = "1.25rem";
 export const KfwBaseSpaceFluid20Max = "1.5625rem";
-export const KfwBaseSpaceFluid20Val = "1.1458125rem";
+export const KfwBaseSpaceFluid20Val = "0.97425rem";
 export const KfwBaseSpaceFluid25Min = "1.5625rem";
 export const KfwBaseSpaceFluid25Max = "1.875rem";
-export const KfwBaseSpaceFluid25Val = "1.4583125rem";
+export const KfwBaseSpaceFluid25Val = "1.28675rem";
 export const KfwBaseSpaceFluid30Min = "1.875rem";
 export const KfwBaseSpaceFluid30Max = "2.1875rem";
-export const KfwBaseSpaceFluid30Val = "1.7708125rem";
+export const KfwBaseSpaceFluid30Val = "1.59925rem";
 export const KfwBaseSpaceFluid35Min = "2.1875rem";
 export const KfwBaseSpaceFluid35Max = "2.5rem";
-export const KfwBaseSpaceFluid35Val = "2.0833125rem";
+export const KfwBaseSpaceFluid35Val = "1.91175rem";
 export const KfwBaseSpaceFluid40Min = "2.5rem";
 export const KfwBaseSpaceFluid40Max = "3.125rem";
-export const KfwBaseSpaceFluid40Val = "2.2916875rem";
+export const KfwBaseSpaceFluid40Val = "1.9485rem";
 export const KfwBaseSpaceFluid50Min = "3.125rem";
 export const KfwBaseSpaceFluid50Max = "3.75rem";
-export const KfwBaseSpaceFluid50Val = "2.916625rem";
+export const KfwBaseSpaceFluid50Val = "2.5735rem";
 export const KfwBaseFontsizeStaticSm = "0.875rem";
 export const KfwBaseFontsizeStaticMd = "1rem";
 export const KfwBaseFontsizeStaticLg = "1.125rem";
@@ -203,31 +203,31 @@ export const KfwBaseFontsizeStatic7xl = "2rem";
 export const KfwBaseFontsizeStatic8xl = "2.25rem";
 export const KfwBaseFontsizeFluidSmMin = "0.875rem";
 export const KfwBaseFontsizeFluidSmMax = "1rem";
-export const KfwBaseFontsizeFluidSmVal = "0.8333125rem";
+export const KfwBaseFontsizeFluidSmVal = "0.7646875rem";
 export const KfwBaseFontsizeFluidMdMin = "1rem";
 export const KfwBaseFontsizeFluidMdMax = "1.125rem";
-export const KfwBaseFontsizeFluidMdVal = "0.9583125rem";
+export const KfwBaseFontsizeFluidMdVal = "0.8896875rem";
 export const KfwBaseFontsizeFluidLgMin = "1.125rem";
 export const KfwBaseFontsizeFluidLgMax = "1.25rem";
-export const KfwBaseFontsizeFluidLgVal = "1.0833125rem";
+export const KfwBaseFontsizeFluidLgVal = "1.0146875rem";
 export const KfwBaseFontsizeFluidXlMin = "1.25rem";
 export const KfwBaseFontsizeFluidXlMax = "1.375rem";
-export const KfwBaseFontsizeFluidXlVal = "1.2083125rem";
+export const KfwBaseFontsizeFluidXlVal = "1.1396875rem";
 export const KfwBaseFontsizeFluid2xlMin = "1.375rem";
 export const KfwBaseFontsizeFluid2xlMax = "1.5rem";
-export const KfwBaseFontsizeFluid2xlVal = "1.3333125rem";
+export const KfwBaseFontsizeFluid2xlVal = "1.2646875rem";
 export const KfwBaseFontsizeFluid3xlMin = "1.5rem";
 export const KfwBaseFontsizeFluid3xlMax = "1.625rem";
-export const KfwBaseFontsizeFluid3xlVal = "1.4583125rem";
+export const KfwBaseFontsizeFluid3xlVal = "1.3896875rem";
 export const KfwBaseFontsizeFluid4xlMin = "1.625rem";
 export const KfwBaseFontsizeFluid4xlMax = "1.75rem";
-export const KfwBaseFontsizeFluid4xlVal = "1.5833125rem";
+export const KfwBaseFontsizeFluid4xlVal = "1.5146875rem";
 export const KfwBaseFontsizeFluid5xlMin = "1.75rem";
 export const KfwBaseFontsizeFluid5xlMax = "2rem";
-export const KfwBaseFontsizeFluid5xlVal = "1.666625rem";
+export const KfwBaseFontsizeFluid5xlVal = "1.5294375rem";
 export const KfwBaseFontsizeFluid6xlMin = "1.875rem";
 export const KfwBaseFontsizeFluid6xlMax = "2.25rem";
-export const KfwBaseFontsizeFluid6xlVal = "1.75rem";
+export const KfwBaseFontsizeFluid6xlVal = "1.544125rem";
 export const KfwBaseLineheight2xs = 1.2;
 export const KfwBaseLineheightXs = 1.3;
 export const KfwBaseLineheightSm = 1.333;
@@ -242,9 +242,9 @@ export const KfwBaseBorderwidthMd = "1px";
 export const KfwBaseBorderwidthLg = "0.125rem";
 export const KfwBaseFontweightRegular = 400;
 export const KfwBaseFontweightMedium = 500;
-export const KfwBaseLetterspacingTight = "-0.03125rem";
+export const KfwBaseLetterspacingTight = "-0.5px";
 export const KfwBaseLetterspacingNormal = "0";
-export const KfwBaseLetterspacingWide = "0.03125rem";
+export const KfwBaseLetterspacingWide = "0.5px";
 export const KfwBaseLetterspacingWider = "1px";
 export const KfwBaseLayoutBreakpointXs = "20rem";
 export const KfwBaseLayoutBreakpointSm = "37.5rem";
@@ -258,7 +258,7 @@ export const KfwBaseLayoutSafezoneStaticMd = "1.25rem";
 export const KfwBaseLayoutSafezoneStaticLg = "2.5rem";
 export const KfwBaseLayoutSafezoneFluidMin = "1.25rem";
 export const KfwBaseLayoutSafezoneFluidMax = "2.5rem";
-export const KfwBaseLayoutSafezoneFluidVal = "-0.8333125rem";
+export const KfwBaseLayoutSafezoneFluidVal = "0.1470625rem";
 export const KfwBaseLayoutGridcolumn1 = 1;
 export const KfwBaseLayoutGridcolumn2 = 2;
 export const KfwBaseLayoutGridcolumn3 = 3;
@@ -273,12 +273,12 @@ export const KfwBaseLayoutGridgapStaticLg = "1.625rem";
 export const KfwBaseLayoutGridgapStaticXl = "2.25rem";
 export const KfwBaseLayoutGridgapFluidMin = "0.75rem";
 export const KfwBaseLayoutGridgapFluidMax = "2.25rem";
-export const KfwBaseLayoutGridgapFluidVal = "0.25rem";
+export const KfwBaseLayoutGridgapFluidVal = "-0.5735rem";
 export const KfwColorFn = {
   colorSpace: "srgb",
   components: [0, 0.3529, 0.549],
   hex: "#005a8c",
-};
+}; // Main interaction color for buttons and links
 export const KfwColorFnActive = {
   colorSpace: "srgb",
   components: [0, 0.2667, 0.4314],
@@ -303,7 +303,7 @@ export const KfwColorText = {
   colorSpace: "srgb",
   components: [0.1765, 0.1922, 0.2039],
   hex: "#2d3134",
-};
+}; // Main text color for body
 export const KfwColorTextOnDarkBg = {
   colorSpace: "srgb",
   components: [1, 1, 1],
@@ -323,7 +323,7 @@ export const KfwColorBackground = {
   colorSpace: "srgb",
   components: [1, 1, 1],
   hex: "#ffffff",
-};
+}; // Main background color for body
 export const KfwColorBackgroundSubtle = {
   colorSpace: "srgb",
   components: [0.9647, 0.9686, 0.9725],
@@ -495,22 +495,23 @@ export const KfwColorIconDisabledSecondary = {
   hex: "#94eb90",
 };
 export const KfwFontfamily =
-  "'KfW Centro Sans', Arial, Helvetica Neue, Helvetica, sans-serif";
+  "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif";
 export const KfwFontfamilyCode =
-  'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace';
+  "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
 export const KfwSpaceXsmall = "0.625rem";
 export const KfwSpaceSmall = "1.25rem";
 export const KfwSpaceMedium = "1.875rem";
 export const KfwSpaceLargeMin = "2.1875rem";
 export const KfwSpaceLargeMax = "2.5rem";
-export const KfwSpaceLargeVal = "2.0833125rem";
+export const KfwSpaceLargeVal = "1.91175rem";
 export const KfwSpaceBigMin = "3.125rem";
 export const KfwSpaceBigMax = "3.75rem";
-export const KfwSpaceBigVal = "2.916625rem";
+export const KfwSpaceBigVal = "2.5735rem";
 export const KfwFontspace = "1.25rem";
-export const KfwFontspaceIntroduction = "1.25rem";
-export const KfwFontspaceSmall = "0.3125rem";
-export const KfwFontspaceLarge = "0.9375rem";
+export const KfwFontspace2xsmall = "0.3125rem";
+export const KfwFontspaceXsmall = "0.625rem";
+export const KfwFontspaceSmall = "0.9375rem";
+export const KfwFontspaceLarge = "1.875rem";
 export const KfwFontspaceHeading1 = "1.25rem";
 export const KfwFontspaceHeading2 = "1.25rem";
 export const KfwFontspaceHeading3 = "0.625rem";
@@ -523,16 +524,16 @@ export const KfwFontsizeSmall = "0.875rem";
 export const KfwFontsizeLarge = "1.125rem";
 export const KfwFontsizeHeading1Min = "1.875rem";
 export const KfwFontsizeHeading1Max = "2.25rem";
-export const KfwFontsizeHeading1Val = "1.75rem";
+export const KfwFontsizeHeading1Val = "1.544125rem";
 export const KfwFontsizeHeading2Min = "1.75rem";
 export const KfwFontsizeHeading2Max = "2rem";
-export const KfwFontsizeHeading2Val = "1.666625rem";
+export const KfwFontsizeHeading2Val = "1.5294375rem";
 export const KfwFontsizeHeading3Min = "1.5rem";
 export const KfwFontsizeHeading3Max = "1.625rem";
-export const KfwFontsizeHeading3Val = "1.4583125rem";
+export const KfwFontsizeHeading3Val = "1.3896875rem";
 export const KfwFontsizeHeading4Min = "1.25rem";
 export const KfwFontsizeHeading4Max = "1.375rem";
-export const KfwFontsizeHeading4Val = "1.2083125rem";
+export const KfwFontsizeHeading4Val = "1.1396875rem";
 export const KfwFontsizeHeading5 = "1.125rem";
 export const KfwFontsizeHeading6 = "1rem";
 export const KfwLineheight = 1.4;
@@ -540,17 +541,20 @@ export const KfwLineheightList = 1.5;
 export const KfwLineheightHeading = 1.3;
 export const KfwLineheightHeading5 = 1.333;
 export const KfwBorderradius = "0.25rem";
+export const KfwBorderwidth = "1px";
+export const KfwBorderwidthLarge = "0.125rem";
 export const KfwFocusringOutlineWidth = "0.125rem";
 export const KfwFocusringOutlineOffset = "0.125rem";
 export const KfwFocusringOutlineStyle = "dashed";
 export const KfwFontweight = 400;
-export const KfwFontweightHeading = 500;
+export const KfwFontweightBold = 500;
 export const KfwBreakpointMobile = "37.5rem";
 export const KfwBreakpointTablet = "52.5rem";
 export const KfwBreakpointDesktop = "60rem";
+export const KfwBreakpointDesktopLarge = "80rem";
 export const KfwContentwrapperNarrow = "56rem";
 export const KfwContentwrapperBasic = "67.5rem";
 export const KfwContentwrapperExtended = "80rem";
 export const KfwSafezoneMin = "1.25rem";
 export const KfwSafezoneMax = "2.5rem";
-export const KfwSafezoneVal = "-0.8333125rem";
+export const KfwSafezoneVal = "0.1470625rem";

package/output/{web_next_16px → web_thirdparty_16px}/scss/kfw-design-tokens.light.scss

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.2.1
+// KfW Design Tokens v0.4.0
 // Copyright 2025
 // Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
 
@@ -31,8 +31,8 @@ $kfw-base-color-violet-400: #9598e0;
 $kfw-base-color-violet-500: #686fc8;
 $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;
-$kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace;
+$kfw-base-fontfamily-sans: 'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 $kfw-base-space-static-5: 0.3125rem;
 $kfw-base-space-static-10: 0.625rem;
 $kfw-base-space-static-15: 0.9375rem;
@@ -45,31 +45,31 @@ $kfw-base-space-static-50: 3.125rem;
 $kfw-base-space-static-60: 3.75rem;
 $kfw-base-space-fluid-5-min: 0.3125rem;
 $kfw-base-space-fluid-5-max: 0.625rem;
-$kfw-base-space-fluid-5-val: 0.521vi + 0.2083125rem;
+$kfw-base-space-fluid-5-val: 0.735vi + 0.588px;
 $kfw-base-space-fluid-10-min: 0.625rem;
 $kfw-base-space-fluid-10-max: 0.9375rem;
-$kfw-base-space-fluid-10-val: 0.521vi + 0.5208125rem;
+$kfw-base-space-fluid-10-val: 0.735vi + 0.34925rem;
 $kfw-base-space-fluid-15-min: 0.9375rem;
 $kfw-base-space-fluid-15-max: 1.25rem;
-$kfw-base-space-fluid-15-val: 0.521vi + 0.8333125rem;
+$kfw-base-space-fluid-15-val: 0.735vi + 0.66175rem;
 $kfw-base-space-fluid-20-min: 1.25rem;
 $kfw-base-space-fluid-20-max: 1.5625rem;
-$kfw-base-space-fluid-20-val: 0.521vi + 1.1458125rem;
+$kfw-base-space-fluid-20-val: 0.735vi + 0.97425rem;
 $kfw-base-space-fluid-25-min: 1.5625rem;
 $kfw-base-space-fluid-25-max: 1.875rem;
-$kfw-base-space-fluid-25-val: 0.521vi + 1.4583125rem;
+$kfw-base-space-fluid-25-val: 0.735vi + 1.28675rem;
 $kfw-base-space-fluid-30-min: 1.875rem;
 $kfw-base-space-fluid-30-max: 2.1875rem;
-$kfw-base-space-fluid-30-val: 0.521vi + 1.7708125rem;
+$kfw-base-space-fluid-30-val: 0.735vi + 1.59925rem;
 $kfw-base-space-fluid-35-min: 2.1875rem;
 $kfw-base-space-fluid-35-max: 2.5rem;
-$kfw-base-space-fluid-35-val: 0.521vi + 2.0833125rem;
+$kfw-base-space-fluid-35-val: 0.735vi + 1.91175rem;
 $kfw-base-space-fluid-40-min: 2.5rem;
 $kfw-base-space-fluid-40-max: 3.125rem;
-$kfw-base-space-fluid-40-val: 1.042vi + 2.2916875rem;
+$kfw-base-space-fluid-40-val: 1.471vi + 1.9485rem;
 $kfw-base-space-fluid-50-min: 3.125rem;
 $kfw-base-space-fluid-50-max: 3.75rem;
-$kfw-base-space-fluid-50-val: 1.042vi + 2.916625rem;
+$kfw-base-space-fluid-50-val: 1.471vi + 2.5735rem;
 $kfw-base-fontsize-static-sm: 0.875rem;
 $kfw-base-fontsize-static-md: 1rem;
 $kfw-base-fontsize-static-lg: 1.125rem;
@@ -83,31 +83,31 @@ $kfw-base-fontsize-static-7xl: 2rem;
 $kfw-base-fontsize-static-8xl: 2.25rem;
 $kfw-base-fontsize-fluid-sm-min: 0.875rem;
 $kfw-base-fontsize-fluid-sm-max: 1rem;
-$kfw-base-fontsize-fluid-sm-val: 0.208vi + 0.8333125rem;
+$kfw-base-fontsize-fluid-sm-val: 0.294vi + 0.7646875rem;
 $kfw-base-fontsize-fluid-md-min: 1rem;
 $kfw-base-fontsize-fluid-md-max: 1.125rem;
-$kfw-base-fontsize-fluid-md-val: 0.208vi + 0.9583125rem;
+$kfw-base-fontsize-fluid-md-val: 0.294vi + 0.8896875rem;
 $kfw-base-fontsize-fluid-lg-min: 1.125rem;
 $kfw-base-fontsize-fluid-lg-max: 1.25rem;
-$kfw-base-fontsize-fluid-lg-val: 0.208vi + 1.0833125rem;
+$kfw-base-fontsize-fluid-lg-val: 0.294vi + 1.0146875rem;
 $kfw-base-fontsize-fluid-xl-min: 1.25rem;
 $kfw-base-fontsize-fluid-xl-max: 1.375rem;
-$kfw-base-fontsize-fluid-xl-val: 0.208vi + 1.2083125rem;
+$kfw-base-fontsize-fluid-xl-val: 0.294vi + 1.1396875rem;
 $kfw-base-fontsize-fluid-2xl-min: 1.375rem;
 $kfw-base-fontsize-fluid-2xl-max: 1.5rem;
-$kfw-base-fontsize-fluid-2xl-val: 0.208vi + 1.3333125rem;
+$kfw-base-fontsize-fluid-2xl-val: 0.294vi + 1.2646875rem;
 $kfw-base-fontsize-fluid-3xl-min: 1.5rem;
 $kfw-base-fontsize-fluid-3xl-max: 1.625rem;
-$kfw-base-fontsize-fluid-3xl-val: 0.208vi + 1.4583125rem;
+$kfw-base-fontsize-fluid-3xl-val: 0.294vi + 1.3896875rem;
 $kfw-base-fontsize-fluid-4xl-min: 1.625rem;
 $kfw-base-fontsize-fluid-4xl-max: 1.75rem;
-$kfw-base-fontsize-fluid-4xl-val: 0.208vi + 1.5833125rem;
+$kfw-base-fontsize-fluid-4xl-val: 0.294vi + 1.5146875rem;
 $kfw-base-fontsize-fluid-5xl-min: 1.75rem;
 $kfw-base-fontsize-fluid-5xl-max: 2rem;
-$kfw-base-fontsize-fluid-5xl-val: 0.417vi + 1.666625rem;
+$kfw-base-fontsize-fluid-5xl-val: 0.588vi + 1.5294375rem;
 $kfw-base-fontsize-fluid-6xl-min: 1.875rem;
 $kfw-base-fontsize-fluid-6xl-max: 2.25rem;
-$kfw-base-fontsize-fluid-6xl-val: 0.625vi + 1.75rem;
+$kfw-base-fontsize-fluid-6xl-val: 0.882vi + 1.544125rem;
 $kfw-base-lineheight-2xs: 1.2;
 $kfw-base-lineheight-xs: 1.3;
 $kfw-base-lineheight-sm: 1.333;
@@ -122,9 +122,9 @@ $kfw-base-borderwidth-md: 1px;
 $kfw-base-borderwidth-lg: 0.125rem;
 $kfw-base-fontweight-regular: 400;
 $kfw-base-fontweight-medium: 500;
-$kfw-base-letterspacing-tight: -0.03125rem;
+$kfw-base-letterspacing-tight: -0.5px;
 $kfw-base-letterspacing-normal: 0;
-$kfw-base-letterspacing-wide: 0.03125rem;
+$kfw-base-letterspacing-wide: 0.5px;
 $kfw-base-letterspacing-wider: 1px;
 $kfw-base-layout-breakpoint-xs: 20rem;
 $kfw-base-layout-breakpoint-sm: 37.5rem;
@@ -138,7 +138,7 @@ $kfw-base-layout-safezone-static-md: 1.25rem;
 $kfw-base-layout-safezone-static-lg: 2.5rem;
 $kfw-base-layout-safezone-fluid-min: 1.25rem;
 $kfw-base-layout-safezone-fluid-max: 2.5rem;
-$kfw-base-layout-safezone-fluid-val: 5.556vi - 0.8333125rem;
+$kfw-base-layout-safezone-fluid-val: 2.941vi + 0.1470625rem;
 $kfw-base-layout-gridcolumn-1: 1;
 $kfw-base-layout-gridcolumn-2: 2;
 $kfw-base-layout-gridcolumn-3: 3;
@@ -153,17 +153,17 @@ $kfw-base-layout-gridgap-static-lg: 1.625rem;
 $kfw-base-layout-gridgap-static-xl: 2.25rem;
 $kfw-base-layout-gridgap-fluid-min: 0.75rem;
 $kfw-base-layout-gridgap-fluid-max: 2.25rem;
-$kfw-base-layout-gridgap-fluid-val: 2.5vi + 0.25rem;
-$kfw-color-fn: #005a8c;
+$kfw-base-layout-gridgap-fluid-val: 3.529vi - 0.5735rem;
+$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;
+$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;
+$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;
@@ -197,21 +197,22 @@ $kfw-color-icon: #005a8c;
 $kfw-color-icon-secondary: #54b3e2;
 $kfw-color-icon-disabled: #398357;
 $kfw-color-icon-disabled-secondary: #94eb90;
-$kfw-fontfamily: 'KfW Centro Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
-$kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace;
+$kfw-fontfamily: 'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 $kfw-space-xsmall: 0.625rem;
 $kfw-space-small: 1.25rem;
 $kfw-space-medium: 1.875rem;
 $kfw-space-large-min: 2.1875rem;
 $kfw-space-large-max: 2.5rem;
-$kfw-space-large-val: 0.521vi + 2.0833125rem;
+$kfw-space-large-val: 0.735vi + 1.91175rem;
 $kfw-space-big-min: 3.125rem;
 $kfw-space-big-max: 3.75rem;
-$kfw-space-big-val: 1.042vi + 2.916625rem;
+$kfw-space-big-val: 1.471vi + 2.5735rem;
 $kfw-fontspace: 1.25rem;
-$kfw-fontspace-introduction: 1.25rem;
-$kfw-fontspace-small: 0.3125rem;
-$kfw-fontspace-large: 0.9375rem;
+$kfw-fontspace-2xsmall: 0.3125rem;
+$kfw-fontspace-xsmall: 0.625rem;
+$kfw-fontspace-small: 0.9375rem;
+$kfw-fontspace-large: 1.875rem;
 $kfw-fontspace-heading-1: 1.25rem;
 $kfw-fontspace-heading-2: 1.25rem;
 $kfw-fontspace-heading-3: 0.625rem;
@@ -224,16 +225,16 @@ $kfw-fontsize-small: 0.875rem;
 $kfw-fontsize-large: 1.125rem;
 $kfw-fontsize-heading-1-min: 1.875rem;
 $kfw-fontsize-heading-1-max: 2.25rem;
-$kfw-fontsize-heading-1-val: 0.625vi + 1.75rem;
+$kfw-fontsize-heading-1-val: 0.882vi + 1.544125rem;
 $kfw-fontsize-heading-2-min: 1.75rem;
 $kfw-fontsize-heading-2-max: 2rem;
-$kfw-fontsize-heading-2-val: 0.417vi + 1.666625rem;
+$kfw-fontsize-heading-2-val: 0.588vi + 1.5294375rem;
 $kfw-fontsize-heading-3-min: 1.5rem;
 $kfw-fontsize-heading-3-max: 1.625rem;
-$kfw-fontsize-heading-3-val: 0.208vi + 1.4583125rem;
+$kfw-fontsize-heading-3-val: 0.294vi + 1.3896875rem;
 $kfw-fontsize-heading-4-min: 1.25rem;
 $kfw-fontsize-heading-4-max: 1.375rem;
-$kfw-fontsize-heading-4-val: 0.208vi + 1.2083125rem;
+$kfw-fontsize-heading-4-val: 0.294vi + 1.1396875rem;
 $kfw-fontsize-heading-5: 1.125rem;
 $kfw-fontsize-heading-6: 1rem;
 $kfw-lineheight: 1.4;
@@ -241,17 +242,20 @@ $kfw-lineheight-list: 1.5;
 $kfw-lineheight-heading: 1.3;
 $kfw-lineheight-heading-5: 1.333;
 $kfw-borderradius: 0.25rem;
+$kfw-borderwidth: 1px;
+$kfw-borderwidth-large: 0.125rem;
 $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-fontweight-bold: 500;
 $kfw-breakpoint-mobile: 37.5rem;
 $kfw-breakpoint-tablet: 52.5rem;
 $kfw-breakpoint-desktop: 60rem;
+$kfw-breakpoint-desktop-large: 80rem;
 $kfw-contentwrapper-narrow: 56rem;
 $kfw-contentwrapper-basic: 67.5rem;
 $kfw-contentwrapper-extended: 80rem;
 $kfw-safezone-min: 1.25rem;
 $kfw-safezone-max: 2.5rem;
-$kfw-safezone-val: 5.556vi - 0.8333125rem;
+$kfw-safezone-val: 2.941vi + 0.1470625rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openkfw/design-tokens",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "The source of truth for KfW-branded digital products.",
   "files": [
     "output",
@@ -38,18 +38,18 @@
     "@eslint/js": "^9.36.0",
     "@tsconfig/node22": "^22.0.2",
     "@types/lodash": "^4.17.20",
-    "@types/node": "^22.18.6",
+    "@types/node": "^22.18.7",
     "concurrently": "^9.2.1",
-    "deep-get-set-ts": "^1.1.1",
+    "deep-get-set-ts": "^1.1.2",
     "eslint": "^9.36.0",
     "json5": "^2.2.3",
     "jsoneditor-cli": "^1.1.0",
     "lodash": "4.17.21",
     "prettier": "^3.6.2",
     "style-dictionary": "^5.0.4",
-    "tsx": "^4.20.5",
+    "tsx": "^4.20.6",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.44.0",
-    "npm-check-updates": "^18.3.0"
+    "typescript-eslint": "^8.45.0",
+    "npm-check-updates": "^19.0.0"
   }
 }