@openkfw/design-tokens 1.0.2 → 1.0.4

package/demo/scripts/postcss.svg-load-plugin.js

@@ -1,96 +0,0 @@
-import fs from "fs/promises"
-import path from "path"
-
-const svgCache = {}
-
-export default function postcssSvgLoadPlugin(options = {}) {
-  return {
-    postcssPlugin: "postcss-svg-load",
-    async Once(root, { result }) {
-      const cssFilePath = result.opts.from
-      const baseDir = options.baseDir ?? (cssFilePath ? path.dirname(cssFilePath) : process.cwd())
-      const cssVariables = {}
-
-      root.walkRules((rule) => {
-        if (rule.selector.startsWith(":root,")) {
-          rule.walkDecls((decl) => {
-            if (decl.prop.startsWith("--")) {
-              cssVariables[decl.prop] = decl.value.trim()
-            }
-          })
-        }
-      })
-
-      const svgLoadRegex = /svg-load\(\s*["']([^"']+)["'](?:\s*,\s*["']([^"']*)["'])?\s*\)/g
-      const processingPromises = []
-
-      root.walkDecls((decl) => {
-        let match
-        const matches = []
-
-        while ((match = svgLoadRegex.exec(decl.value)) !== null) {
-          matches.push(match)
-        }
-
-        for (const match of matches) {
-          const [fullMatch, svgRelativePath, colorParam] = match
-
-          let color = null
-
-          if (colorParam !== undefined && colorParam !== "") {
-            const varMatch = colorParam.match(/^var\((--[^)]+)\)$/)
-            if (varMatch) {
-              const varName = varMatch[1]
-              if (cssVariables[varName]) {
-                color = cssVariables[varName]
-              } else {
-                result.warn(`CSS variable ${varName} not found`, { node: decl })
-                continue
-              }
-            } else {
-              color = colorParam
-            }
-          }
-
-          const svgAbsolutePath = path.resolve(baseDir, svgRelativePath)
-          const cacheKey = `${svgAbsolutePath}::${color ?? ""}`
-
-          const promise = (async () => {
-            if (svgCache[cacheKey]) {
-              decl.value = decl.value.replace(fullMatch, svgCache[cacheKey])
-              return
-            }
-
-            try {
-              let svgContent = await fs.readFile(svgAbsolutePath, "utf8")
-
-              if (color !== null) {
-                if (/<svg[^>]*fill="[^"]*"[^>]*>/.test(svgContent)) {
-                  svgContent = svgContent.replace(/(<svg[^>]*?)fill="[^"]*"([^>]*>)/, `$1fill="${color}"$2`)
-                } else {
-                  svgContent = svgContent.replace(/(<svg[^>]*)>/, `$1 fill="${color}">`)
-                }
-              }
-
-              const encodedSvg = encodeURIComponent(svgContent).replace(/'/g, "%27").replace(/"/g, "%22")
-
-              const dataUrl = `url("data:image/svg+xml,${encodedSvg}")`
-
-              svgCache[cacheKey] = dataUrl
-
-              decl.value = decl.value.replace(fullMatch, dataUrl)
-            } catch {
-              result.warn(`SVG file not found: ${svgAbsolutePath}`, { node: decl })
-            }
-          })()
-
-          processingPromises.push(promise)
-        }
-      })
-
-      await Promise.all(processingPromises)
-    }
-  }
-}
-
-postcssSvgLoadPlugin.postcss = true

package/demo/src/App.ts

@@ -1,12 +0,0 @@
-import { initializeNavigation } from "./Navigation.js"
-import { initializeStickyHeader } from "./StickyHeader.js"
-import { initializeColorPalettes } from "./ColorPalette.js"
-
-// Initialize navigation (hamburger menu and offcanvas dialog)
-initializeNavigation()
-
-// Initialize sticky header behavior
-initializeStickyHeader()
-
-// Initialize color palette rendering
-initializeColorPalettes()

package/demo/src/ColorPalette.ts

@@ -1,84 +0,0 @@
-declare global {
-  interface Window {
-    allTokens: AllTokens
-  }
-}
-
-interface TokenValue {
-  $description?: string
-  $value?: string
-  name?: string
-}
-
-interface TokenGroup {
-  [key: string]: TokenValue | TokenGroup
-}
-
-interface AllTokens {
-  semantic?: {
-    color?: TokenGroup
-  }
-  base?: {
-    color?: TokenGroup
-  }
-}
-
-function getByPath(obj: TokenGroup, path: string): TokenValue | undefined {
-  return path.split(".").reduce<TokenGroup | TokenValue | undefined>((o, k) => {
-    if (!o || typeof o !== "object") return undefined
-    return o[k as keyof typeof o] as TokenGroup | TokenValue | undefined
-  }, obj)
-}
-
-function createColorPaletteItem(colorEl: HTMLElement, tokenGroup: string, tokenName: string | undefined): void {
-  colorEl.classList.add("color-palette__color")
-
-  const tokenKey = colorEl.dataset.token
-  if (!tokenKey) return
-
-  const wrapper = document.createElement("div")
-  wrapper.className = "color-palette__item"
-
-  const container = document.createElement("div")
-  container.className = "color-palette__container"
-
-  const desc = document.createElement("span")
-  desc.className = "color-palette__label form-label"
-
-  const btn = document.createElement("button")
-  btn.type = "button"
-  btn.role = "link"
-
-  btn.addEventListener("click", () => {
-    navigator.clipboard.writeText(`var(--${btn.textContent})`).catch((err) => {
-      console.error("Failed to copy to clipboard:", err)
-    })
-  })
-
-  const tokenColorPath =
-    tokenName !== undefined
-      ? window.allTokens[tokenGroup as keyof AllTokens]?.color?.[tokenName]
-      : window.allTokens[tokenGroup as keyof AllTokens]?.color
-  const token = tokenColorPath ? getByPath(tokenColorPath as TokenGroup, tokenKey) : undefined
-
-  desc.textContent = token?.$description || ""
-  btn.textContent = token?.name || "var(--kfw-color-fn)"
-
-  colorEl.style.backgroundColor = token?.$value || ""
-  colorEl.replaceWith(wrapper)
-  wrapper.appendChild(colorEl)
-  wrapper.appendChild(container)
-  container.appendChild(desc)
-  container.appendChild(btn)
-}
-
-export function initializeColorPalettes(): void {
-  document.querySelectorAll<HTMLElement>(".color-palette").forEach((palette) => {
-    const tokenGroup = palette.dataset.group || "semantic"
-    const tokenName = palette.dataset.name
-
-    palette.querySelectorAll<HTMLElement>("span[data-token]").forEach((colorEl) => {
-      createColorPaletteItem(colorEl, tokenGroup, tokenName)
-    })
-  })
-}

package/demo/src/Navigation.ts

@@ -1,55 +0,0 @@
-export function initializeNavigation(): void {
-  const body = document.body
-  const hamburger = document.querySelector<HTMLElement>(".header__hamburger")
-  const dialog = document.getElementById("main-nav") as HTMLDialogElement | null
-
-  if (!hamburger || !dialog) return
-
-  const dialogContent = dialog.querySelector<HTMLElement>("[data-dialog-content]")
-
-  const openNav = (): void => {
-    hamburger.setAttribute("aria-expanded", "true")
-    body.classList.add("no-scroll")
-    dialog.showModal()
-  }
-
-  const closeNav = (): void => {
-    body.classList.remove("no-scroll")
-    hamburger.setAttribute("aria-expanded", "false")
-    hamburger.focus()
-  }
-
-  hamburger.addEventListener("click", openNav)
-
-  dialog.addEventListener("close", closeNav)
-
-  dialog.addEventListener("click", (event) => {
-    const target = event.target as HTMLElement | null
-
-    if (!target) return
-
-    const anchor = target.closest("a")
-
-    if (anchor) {
-      event.preventDefault() // Prevent immediate navigation, so we can scroll only after closing (after removing overflow: hidden)
-      dialog.close()
-
-      const href = anchor.getAttribute("href")
-      if (!href) return
-
-      if (href.startsWith("#")) {
-        const scrollTarget = document.querySelector(href)
-        if (scrollTarget) {
-          scrollTarget.scrollIntoView({ behavior: "instant" })
-        }
-      } else {
-        window.location.href = href
-      }
-      return
-    }
-
-    if (!dialogContent?.contains(target)) {
-      dialog.close()
-    }
-  })
-}

package/demo/src/StickyHeader.ts

@@ -1,40 +0,0 @@
-const STICKY_CLASS = "header--sticky"
-const STICKY_THRESHOLD_APPLY = 128 // Scroll position to apply sticky header
-const STICKY_THRESHOLD_REMOVE = 64 // Scroll position to remove sticky header (hysteresis)
-
-export function initializeStickyHeader(): void {
-  const header = document.getElementById("sticky-header")
-
-  if (!header) return
-
-  let ticking = false
-
-  const updateSticky = (): void => {
-    const y = window.scrollY
-    const isSticky = header.classList.contains(STICKY_CLASS)
-
-    // Hysteresis to prevent flickering when scrolling near threshold
-    if (y >= STICKY_THRESHOLD_APPLY && !isSticky) {
-      header.classList.add(STICKY_CLASS)
-    } else if (y < STICKY_THRESHOLD_REMOVE && isSticky) {
-      header.classList.remove(STICKY_CLASS)
-    }
-  }
-
-  window.addEventListener(
-    "scroll",
-    () => {
-      if (!ticking) {
-        requestAnimationFrame(() => {
-          updateSticky()
-          ticking = false
-        })
-        ticking = true
-      }
-    },
-    { passive: true }
-  )
-
-  // Set initial state
-  updateSticky()
-}

package/demo/src/main.ts

@@ -1 +0,0 @@
-import "./App"

package/demo/src/vendor/gen-custom-media.css

@@ -1,12 +0,0 @@
-/* Custom Media Queries generated from KfW Design Tokens v0.6.3 */
-
-/* See: https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media */
-
-@custom-media --kfw-breakpoint-mobile (min-width: 600px);
-@custom-media --kfw-breakpoint-mobile-max (max-width: 600px);
-@custom-media --kfw-breakpoint-tablet (min-width: 840px);
-@custom-media --kfw-breakpoint-tablet-max (max-width: 840px);
-@custom-media --kfw-breakpoint-desktop (min-width: 960px);
-@custom-media --kfw-breakpoint-desktop-max (max-width: 960px);
-@custom-media --kfw-breakpoint-desktop-large (min-width: 1280px);
-@custom-media --kfw-breakpoint-desktop-large-max (max-width: 1280px);

package/output/README.md

@@ -1,38 +0,0 @@
-# README for the Folder Structure in /output
-
-This document outlines the structure of the /output directory and its contents.
-
-## Folder Structure
-
-```
-/output
-├── /figma
-├── /penpot
-├── /json
-├── /css
-├── /js
-├── /scss
-└── /web_thirdparty_16px   (third-party)
-```
-
-The `/output` directory contains all available export formats for design and development integration, including Figma, Penpot, JSON, CSS, SCSS, and JavaScript files.
-
-
-# 🧭 REM and Font Scaling Guidelines
-
-All KfW web applications (e.g., KfW.de, MeineKfW, OKP) use a root REM value of 62.5% to ensure optimal readability and consistent scaling. 
-This means that 1rem is equivalent to 10px. Never use a font size of 10px directly. Always rely on rem units for scalable and accessible typography.
-
-Example:
-
-```
-html {
-  font-size: 62.5%; /* 1rem = 10px */
-}
-
-body {
-  font-size: 1.6rem; /* 16px */
-}
-```
-
-For third-party systems where the REM root value cannot be modified (i.e., the default browser setting of 16px = 100%), use the assets provided in the `/web_thirdparty_16px` folder.

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

@@ -1,293 +0,0 @@
-/**
- * KfW Design Tokens v1.0.2 | MPL-2.0 | https://github.com/openkfw/design-tokens
- */
-
-:root, :host { color-scheme: light; }
-
-:root, :host {
-  --kfw-base-color-blue-100: #e9f5fb;
-  --kfw-base-color-blue-400: #54b3e2;
-  --kfw-base-color-blue-500: #007abc;
-  --kfw-base-color-blue-600: #005a8c;
-  --kfw-base-color-blue-700: #00446e;
-  --kfw-base-color-blue-800: #00375b;
-  --kfw-base-color-green-100: #ecfded;
-  --kfw-base-color-green-300: #b7f9aa;
-  --kfw-base-color-green-400: #94eb90;
-  --kfw-base-color-green-700: #398357;
-  --kfw-base-color-white-90: #ffffffe6;
-  --kfw-base-color-white-95: #fffffff2;
-  --kfw-base-color-white: #fff;
-  --kfw-base-color-gray-50: #f6f7f8;
-  --kfw-base-color-gray-100: #eef0f2;
-  --kfw-base-color-gray-200: #d8dfe3;
-  --kfw-base-color-gray-300: #a1adb5;
-  --kfw-base-color-gray-400: #6d767d;
-  --kfw-base-color-gray-500-10: #41484c1a;
-  --kfw-base-color-gray-500-30: #41484c4d;
-  --kfw-base-color-gray-500-90: #41484ce6;
-  --kfw-base-color-gray-500: #41484c;
-  --kfw-base-color-gray-600: #2d3134;
-  --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;
-  --kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-  --kfw-base-space-static-5: 0.5rem;
-  --kfw-base-space-static-10: 1rem;
-  --kfw-base-space-static-15: 1.5rem;
-  --kfw-base-space-static-20: 2rem;
-  --kfw-base-space-static-25: 2.5rem;
-  --kfw-base-space-static-30: 3rem;
-  --kfw-base-space-static-35: 3.5rem;
-  --kfw-base-space-static-40: 4rem;
-  --kfw-base-space-static-48: 4.8rem;
-  --kfw-base-space-static-50: 5rem;
-  --kfw-base-space-static-60: 6rem;
-  --kfw-base-space-fluid-5-min: 0.5rem;
-  --kfw-base-space-fluid-5-max: 1rem;
-  --kfw-base-space-fluid-5-val: 0.735vi + 0.588px;
-  --kfw-base-space-fluid-10-min: 1rem;
-  --kfw-base-space-fluid-10-max: 1.5rem;
-  --kfw-base-space-fluid-10-val: 0.735vi + 0.5588rem;
-  --kfw-base-space-fluid-15-min: 1.5rem;
-  --kfw-base-space-fluid-15-max: 2rem;
-  --kfw-base-space-fluid-15-val: 0.735vi + 1.0588rem;
-  --kfw-base-space-fluid-20-min: 2rem;
-  --kfw-base-space-fluid-20-max: 2.5rem;
-  --kfw-base-space-fluid-20-val: 0.735vi + 1.5588rem;
-  --kfw-base-space-fluid-25-min: 2.5rem;
-  --kfw-base-space-fluid-25-max: 3rem;
-  --kfw-base-space-fluid-25-val: 0.735vi + 2.0588rem;
-  --kfw-base-space-fluid-30-min: 3rem;
-  --kfw-base-space-fluid-30-max: 3.5rem;
-  --kfw-base-space-fluid-30-val: 0.735vi + 2.5588rem;
-  --kfw-base-space-fluid-35-min: 3.5rem;
-  --kfw-base-space-fluid-35-max: 4rem;
-  --kfw-base-space-fluid-35-val: 0.735vi + 3.0588rem;
-  --kfw-base-space-fluid-40-min: 4rem;
-  --kfw-base-space-fluid-40-max: 5rem;
-  --kfw-base-space-fluid-40-val: 1.471vi + 3.1176rem;
-  --kfw-base-space-fluid-50-min: 5rem;
-  --kfw-base-space-fluid-50-max: 6rem;
-  --kfw-base-space-fluid-50-val: 1.471vi + 4.1176rem;
-  --kfw-base-space-fluid-40-48-min: 4rem;
-  --kfw-base-space-fluid-40-48-max: 4.8rem;
-  --kfw-base-space-fluid-40-48-val: 1.471vi + 3.2941rem;
-  --kfw-base-fontsize-static-sm: 1.4rem;
-  --kfw-base-fontsize-static-md: 1.6rem;
-  --kfw-base-fontsize-static-lg: 1.8rem;
-  --kfw-base-fontsize-static-xl: 2rem;
-  --kfw-base-fontsize-static-2xl: 2.2rem;
-  --kfw-base-fontsize-static-3xl: 2.4rem;
-  --kfw-base-fontsize-static-4xl: 2.5rem;
-  --kfw-base-fontsize-static-5xl: 2.6rem;
-  --kfw-base-fontsize-static-6xl: 2.8rem;
-  --kfw-base-fontsize-static-7xl: 3rem;
-  --kfw-base-fontsize-static-8xl: 3.2rem;
-  --kfw-base-fontsize-static-9xl: 3.6rem;
-  --kfw-base-fontsize-fluid-sm-min: 1.4rem;
-  --kfw-base-fontsize-fluid-sm-max: 1.6rem;
-  --kfw-base-fontsize-fluid-sm-val: 0.294vi + 1.2235rem;
-  --kfw-base-fontsize-fluid-md-min: 1.6rem;
-  --kfw-base-fontsize-fluid-md-max: 1.8rem;
-  --kfw-base-fontsize-fluid-md-val: 0.294vi + 1.4235rem;
-  --kfw-base-fontsize-fluid-lg-min: 1.8rem;
-  --kfw-base-fontsize-fluid-lg-max: 2rem;
-  --kfw-base-fontsize-fluid-lg-val: 0.294vi + 1.6235rem;
-  --kfw-base-fontsize-fluid-xl-min: 2rem;
-  --kfw-base-fontsize-fluid-xl-max: 2.2rem;
-  --kfw-base-fontsize-fluid-xl-val: 0.294vi + 1.8235rem;
-  --kfw-base-fontsize-fluid-xl-3xl-min: 2rem;
-  --kfw-base-fontsize-fluid-xl-3xl-max: 2.4rem;
-  --kfw-base-fontsize-fluid-xl-3xl-val: 0.588vi + 1.6471rem;
-  --kfw-base-fontsize-fluid-2xl-min: 2.2rem;
-  --kfw-base-fontsize-fluid-2xl-max: 2.4rem;
-  --kfw-base-fontsize-fluid-2xl-val: 0.294vi + 2.0235rem;
-  --kfw-base-fontsize-fluid-3xl-min: 2.4rem;
-  --kfw-base-fontsize-fluid-3xl-max: 2.6rem;
-  --kfw-base-fontsize-fluid-3xl-val: 0.294vi + 2.2235rem;
-  --kfw-base-fontsize-fluid-4xl-min: 2.5rem;
-  --kfw-base-fontsize-fluid-4xl-max: 3rem;
-  --kfw-base-fontsize-fluid-4xl-val: 0.735vi + 2.0588rem;
-  --kfw-base-fontsize-fluid-5xl-min: 2.6rem;
-  --kfw-base-fontsize-fluid-5xl-max: 3rem;
-  --kfw-base-fontsize-fluid-5xl-val: 0.588vi + 2.2471rem;
-  --kfw-base-fontsize-fluid-6xl-min: 2.8rem;
-  --kfw-base-fontsize-fluid-6xl-max: 3.2rem;
-  --kfw-base-fontsize-fluid-6xl-val: 0.588vi + 2.4471rem;
-  --kfw-base-fontsize-fluid-7xl-min: 3rem;
-  --kfw-base-fontsize-fluid-7xl-max: 3.6rem;
-  --kfw-base-fontsize-fluid-7xl-val: 0.882vi + 2.4706rem;
-  --kfw-base-lineheight-2xs: 1.2;
-  --kfw-base-lineheight-xs: 1.3;
-  --kfw-base-lineheight-sm: 1.333;
-  --kfw-base-lineheight-md: 1.4;
-  --kfw-base-lineheight-lg: 1.45;
-  --kfw-base-lineheight-xl: 1.5;
-  --kfw-base-borderradius-sm: 2px;
-  --kfw-base-borderradius-md: 4px;
-  --kfw-base-borderradius-lg: 20px;
-  --kfw-base-borderradius-circle: 9999px;
-  --kfw-base-borderwidth-md: 1px;
-  --kfw-base-borderwidth-lg: 2px;
-  --kfw-base-fontweight-regular: 400;
-  --kfw-base-fontweight-medium: 500;
-  --kfw-base-wordspacing-normal: 0;
-  --kfw-base-wordspacing-wide: 1.6px;
-  --kfw-base-letterspacing-tight: -0.5px;
-  --kfw-base-letterspacing-normal: 0;
-  --kfw-base-letterspacing-wide: 0.5px;
-  --kfw-base-letterspacing-wider: 1px;
-  --kfw-base-offset: 2px;
-  --kfw-base-layout-breakpoint-xs: 320px;
-  --kfw-base-layout-breakpoint-sm: 600px;
-  --kfw-base-layout-breakpoint-md: 840px;
-  --kfw-base-layout-breakpoint-lg: 960px;
-  --kfw-base-layout-breakpoint-xl: 1280px;
-  --kfw-base-layout-container-sm: 89.6rem;
-  --kfw-base-layout-container-md: 108rem;
-  --kfw-base-layout-container-lg: 128rem;
-  --kfw-base-layout-safezone-sm: 5.625vi;
-  --kfw-base-layout-safezone-md: 6.667vi;
-  --kfw-base-layout-safezone-lg: 7.5vi;
-  --kfw-base-layout-safezone-xl: 0;
-  --kfw-base-layout-gridgap-static-xs: 1.2rem;
-  --kfw-base-layout-gridgap-static-sm: 1.8rem;
-  --kfw-base-layout-gridgap-static-md: 2rem;
-  --kfw-base-layout-gridgap-static-lg: 2.2rem;
-  --kfw-base-layout-gridgap-static-xl: 2.6rem;
-  --kfw-base-layout-gridgap-static-2xl: 3.6rem;
-  --kfw-base-layout-gridgap-static-3xl: 4rem;
-  --kfw-base-layout-gridgap-fluid-basic-min: 1.2rem;
-  --kfw-base-layout-gridgap-fluid-basic-max: 3.6rem;
-  --kfw-base-layout-gridgap-fluid-basic-val: 3.529vi - 0.9176rem;
-  --kfw-base-layout-gridgap-fluid-large-min: 2rem;
-  --kfw-base-layout-gridgap-fluid-large-max: 4rem;
-  --kfw-base-layout-gridgap-fluid-large-val: 2.941vi + 0.2353rem;
-  --kfw-base-layout-gridcolumn-1: 1;
-  --kfw-base-layout-gridcolumn-2: 2;
-  --kfw-base-layout-gridcolumn-3: 3;
-  --kfw-base-layout-gridcolumn-4: 4;
-  --kfw-base-layout-gridcolumn-6: 6;
-  --kfw-base-layout-gridcolumn-8: 8;
-  --kfw-base-layout-gridcolumn-10: 10;
-  --kfw-base-layout-gridcolumn-12: 12;
-  --kfw-color-fn: #005a8c; /** Main interaction color for buttons and links (Blue 600) */
-  --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-headline-on-dark-bg: #b7f9aa; /** Headline text color on dark background (Green 300) */
-  --kfw-color-text-on-disabled: #fff; /** Text color on disabled (White) */
-  --kfw-color-background: #fff; /** 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-medium-green: #b7f9aa; /** Green Medium (Green 300) */
-  --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: #a455c5;
-  --kfw-color-status-red: #c80538;
-  --kfw-color-status-yellow: #eac80b;
-  --kfw-color-status-green: #398357;
-  --kfw-color-line-6: #00446e;
-  --kfw-color-line-7: #2d3134;
-  --kfw-color-line-8: #a1adb5;
-  --kfw-color-line-9: #005a8c;
-  --kfw-color-line-10: #2d3134;
-  --kfw-color-line-11: #b7f9aa;
-  --kfw-color-line-12: #a1adb5;
-  --kfw-color-product-container: #f6f7f8;
-  --kfw-color-product-benefit: #007abc;
-  --kfw-color-product-credit: #398357;
-  --kfw-color-product-cooperation: #643179;
-  --kfw-color-product-credit-benefit: #41484c;
-  --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-space-tiny: 0.5rem;
-  --kfw-space-xsmall: 1rem;
-  --kfw-space-midSmall: 1.5rem;
-  --kfw-space-small: 2rem;
-  --kfw-space-medium: 3rem;
-  --kfw-space-large-min: 3.5rem;
-  --kfw-space-large-max: 4rem;
-  --kfw-space-large-val: 0.735vi + 3.0588rem;
-  --kfw-space-xlarge-min: 4rem;
-  --kfw-space-xlarge-max: 4.8rem;
-  --kfw-space-xlarge-val: 1.471vi + 3.2941rem;
-  --kfw-space-big-min: 5rem;
-  --kfw-space-big-max: 6rem;
-  --kfw-space-big-val: 1.471vi + 4.1176rem;
-  --kfw-fontsize: 1.6rem;
-  --kfw-fontsize-introduction: 2rem;
-  --kfw-fontsize-large: 1.8rem;
-  --kfw-fontsize-small: 1.4rem;
-  --kfw-fontsize-heading-1-min: 3rem;
-  --kfw-fontsize-heading-1-max: 3.6rem;
-  --kfw-fontsize-heading-1-val: 0.882vi + 2.4706rem;
-  --kfw-fontsize-heading-2-min: 2.8rem;
-  --kfw-fontsize-heading-2-max: 3.2rem;
-  --kfw-fontsize-heading-2-val: 0.588vi + 2.4471rem;
-  --kfw-fontsize-heading-3-min: 2.4rem;
-  --kfw-fontsize-heading-3-max: 2.6rem;
-  --kfw-fontsize-heading-3-val: 0.294vi + 2.2235rem;
-  --kfw-fontsize-heading-4-min: 2rem;
-  --kfw-fontsize-heading-4-max: 2.2rem;
-  --kfw-fontsize-heading-4-val: 0.294vi + 1.8235rem;
-  --kfw-fontsize-heading-5: 1.8rem;
-  --kfw-fontsize-heading-6: 1.6rem;
-  --kfw-lineheight: 1.4;
-  --kfw-lineheight-large: 1.45;
-  --kfw-lineheight-lightspeech: 1.5;
-  --kfw-lineheight-heading: 1.3;
-  --kfw-lineheight-heading-5: 1.333;
-  --kfw-lineheight-small: 1.2;
-  --kfw-borderradius: 4px;
-  --kfw-borderradius-small: 2px;
-  --kfw-borderradius-large: 20px;
-  --kfw-borderradius-circle: 9999px;
-  --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;
-  --kfw-focusring-outline-color: #00446e;
-  --kfw-focusring-outline-radius: 4px;
-  --kfw-fontweight: 400;
-  --kfw-fontweight-bold: 500;
-  --kfw-wordspacing-lightspeech: 1.6px;
-  --kfw-breakpoint-mobile: 600px;
-  --kfw-breakpoint-tablet: 840px;
-  --kfw-breakpoint-desktop: 960px;
-  --kfw-breakpoint-desktop-large: 1280px;
-  --kfw-contentwrapper-narrow: 89.6rem;
-  --kfw-contentwrapper-basic: 108rem;
-  --kfw-contentwrapper-extended: 128rem;
-  --kfw-safezone-mobile: 5.625vi;
-  --kfw-safezone-tablet: 6.667vi;
-  --kfw-safezone-desktop: 7.5vi;
-  --kfw-safezone-desktop-large: 0;
-  --kfw-gridgap-basic-min: 1.2rem;
-  --kfw-gridgap-basic-max: 3.6rem;
-  --kfw-gridgap-basic-val: 3.529vi - 0.9176rem;
-  --kfw-gridgap-large-min: 2rem;
-  --kfw-gridgap-large-max: 4rem;
-  --kfw-gridgap-large-val: 2.941vi + 0.2353rem;
-}