@openkfw/design-tokens 0.1.0

package/tokens/gen-tokens.dark.json5

@@ -0,0 +1,1463 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * By /root/IdeaProjects/design-tokens/tokens/extended/tokens/tokens.dark.json
+ */
+
+{
+  base: {
+    color: {
+      $type: "color",
+      blue: {
+        "100": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0.9137,
+              0.9608,
+              0.9843,
+            ],
+            hex: "#e9f5fb",
+          },
+        },
+        "400": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0.3294,
+              0.7039,
+              0.8863,
+            ],
+            hex: "#54b3e2",
+          },
+        },
+        "500": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0,
+              0.4784,
+              0.7373,
+            ],
+            hex: "#007abc",
+          },
+        },
+        "600": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0,
+              0.3529,
+              0.549,
+            ],
+            hex: "#005a8c",
+          },
+        },
+        "700": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0,
+              0.2667,
+              0.4314,
+            ],
+            hex: "#00446e",
+          },
+        },
+        "800": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0,
+              0.2157,
+              0.3588,
+            ],
+            hex: "#00375b",
+          },
+        },
+      },
+      green: {
+        "100": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0.9255,
+              0.9922,
+              0.9294,
+            ],
+            hex: "#ecfded",
+          },
+        },
+        "300": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0.7176,
+              0.9765,
+              0.6667,
+            ],
+            hex: "#b7f9aa",
+          },
+        },
+        "400": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0.5804,
+              0.9216,
+              0.5647,
+            ],
+            hex: "#94eb90",
+          },
+        },
+        "700": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0.2235,
+              0.5137,
+              0.3412,
+            ],
+            hex: "#398357",
+          },
+        },
+      },
+      white: {
+        "90": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              1,
+              1,
+              1,
+            ],
+            hex: "#ffffff",
+            alpha: 0.9,
+          },
+        },
+        "95": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              1,
+              1,
+              1,
+            ],
+            hex: "#ffffff",
+            alpha: 0.95,
+          },
+        },
+        default: {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              1,
+              1,
+              1,
+            ],
+            hex: "#ffffff",
+          },
+        },
+      },
+      black: {
+        $value: {
+          colorSpace: "srgb",
+          components: [
+            0,
+            0,
+            0,
+          ],
+          hex: "#000000",
+        },
+      },
+      gray: {
+        "50": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0.9647,
+              0.9686,
+              0.9725,
+            ],
+            hex: "#f6f7f8",
+          },
+        },
+        "100": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0.9333,
+              0.9412,
+              0.949,
+            ],
+            hex: "#eef0f2",
+          },
+        },
+        "200": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0.8471,
+              0.8755,
+              0.8902,
+            ],
+            hex: "#d8dfe3",
+          },
+        },
+        "300": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0.6314,
+              0.6784,
+              0.7098,
+            ],
+            hex: "#a1adb5",
+          },
+        },
+        "400": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0.4275,
+              0.4627,
+              0.4902,
+            ],
+            hex: "#6d767d",
+          },
+        },
+        "500": {
+          "10": {
+            $value: {
+              colorSpace: "srgb",
+              components: [
+                0.2549,
+                0.2784,
+                0.298,
+              ],
+              hex: "#41484c",
+              alpha: 0.1,
+            },
+          },
+          "30": {
+            $value: {
+              colorSpace: "srgb",
+              components: [
+                0.2549,
+                0.2784,
+                0.298,
+              ],
+              hex: "#41484c",
+              alpha: 0.3,
+            },
+          },
+          "90": {
+            $value: {
+              colorSpace: "srgb",
+              components: [
+                0.2549,
+                0.2784,
+                0.298,
+              ],
+              hex: "#41484c",
+              alpha: 0.9,
+            },
+          },
+          default: {
+            $value: {
+              colorSpace: "srgb",
+              components: [
+                0.2549,
+                0.2784,
+                0.298,
+              ],
+              hex: "#41484c",
+            },
+          },
+        },
+        "600": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0.1765,
+              0.1922,
+              0.2039,
+            ],
+            hex: "#2d3134",
+          },
+        },
+      },
+      violet: {
+        "400": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0.5765,
+              0.5961,
+              0.8784,
+            ],
+            hex: "#9598e0",
+          },
+        },
+        "500": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0.4,
+              0.4353,
+              0.7843,
+            ],
+            hex: "#686fc8",
+          },
+        },
+      },
+      red: {
+        "400": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0.7843,
+              0.0196,
+              0.2157,
+            ],
+            hex: "#c80538",
+          },
+        },
+      },
+      yellow: {
+        "500": {
+          $value: {
+            colorSpace: "srgb",
+            components: [
+              0.9176,
+              0.7843,
+              0.0431,
+            ],
+            hex: "#eac80b",
+          },
+        },
+      },
+    },
+    fontfamily: {
+      $type: "fontFamily",
+      sans: {
+        $value: "'KfW Centro Sans', Arial, Helvetica Neue, Helvetica, sans-serif",
+      },
+      mono: {
+        $value: "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace",
+      },
+    },
+    space: {
+      $type: "dimension",
+      static: {
+        "5": {
+          $value: {
+            unit: "px",
+            value: 5,
+          },
+        },
+        "10": {
+          $value: {
+            unit: "px",
+            value: 10,
+          },
+        },
+        "15": {
+          $value: {
+            unit: "px",
+            value: 15,
+          },
+        },
+        "20": {
+          $value: {
+            unit: "px",
+            value: 20,
+          },
+        },
+        "25": {
+          $value: {
+            unit: "px",
+            value: 25,
+          },
+        },
+        "30": {
+          $value: {
+            unit: "px",
+            value: 30,
+          },
+        },
+        "35": {
+          $value: {
+            unit: "px",
+            value: 35,
+          },
+        },
+        "40": {
+          $value: {
+            unit: "px",
+            value: 40,
+          },
+        },
+        "50": {
+          $value: {
+            unit: "px",
+            value: 50,
+          },
+        },
+        "60": {
+          $value: {
+            unit: "px",
+            value: 60,
+          },
+        },
+      },
+      fluid: {
+        "5": {
+          min: {
+            $value: "{base.space.static.5}",
+          },
+          max: {
+            $value: "{base.space.static.10}",
+          },
+          val: {
+            $value: {
+              value: 3.333,
+              unit: "px",
+            },
+            $fluid: {
+              unit: "vi",
+              value: 0.521,
+            },
+          },
+        },
+        "10": {
+          min: {
+            $value: "{base.space.static.10}",
+          },
+          max: {
+            $value: "{base.space.static.15}",
+          },
+          val: {
+            $value: {
+              value: 8.333,
+              unit: "px",
+            },
+            $fluid: {
+              unit: "vi",
+              value: 0.521,
+            },
+          },
+        },
+        "15": {
+          min: {
+            $value: "{base.space.static.15}",
+          },
+          max: {
+            $value: "{base.space.static.20}",
+          },
+          val: {
+            $value: {
+              value: 13.333,
+              unit: "px",
+            },
+            $fluid: {
+              unit: "vi",
+              value: 0.521,
+            },
+          },
+        },
+        "20": {
+          min: {
+            $value: "{base.space.static.20}",
+          },
+          max: {
+            $value: "{base.space.static.25}",
+          },
+          val: {
+            $value: {
+              value: 18.333,
+              unit: "px",
+            },
+            $fluid: {
+              unit: "vi",
+              value: 0.521,
+            },
+          },
+        },
+        "25": {
+          min: {
+            $value: "{base.space.static.25}",
+          },
+          max: {
+            $value: "{base.space.static.30}",
+          },
+          val: {
+            $value: {
+              value: 23.333,
+              unit: "px",
+            },
+            $fluid: {
+              unit: "vi",
+              value: 0.521,
+            },
+          },
+        },
+        "30": {
+          min: {
+            $value: "{base.space.static.30}",
+          },
+          max: {
+            $value: "{base.space.static.35}",
+          },
+          val: {
+            $value: {
+              value: 28.333,
+              unit: "px",
+            },
+            $fluid: {
+              unit: "vi",
+              value: 0.521,
+            },
+          },
+        },
+        "35": {
+          min: {
+            $value: "{base.space.static.35}",
+          },
+          max: {
+            $value: "{base.space.static.40}",
+          },
+          val: {
+            $value: {
+              value: 33.333,
+              unit: "px",
+            },
+            $fluid: {
+              unit: "vi",
+              value: 0.521,
+            },
+          },
+        },
+        "40": {
+          min: {
+            $value: "{base.space.static.40}",
+          },
+          max: {
+            $value: "{base.space.static.50}",
+          },
+          val: {
+            $value: {
+              value: 36.667,
+              unit: "px",
+            },
+            $fluid: {
+              unit: "vi",
+              value: 1.042,
+            },
+          },
+        },
+        "50": {
+          min: {
+            $value: "{base.space.static.50}",
+          },
+          max: {
+            $value: "{base.space.static.60}",
+          },
+          val: {
+            $value: {
+              value: 46.666,
+              unit: "px",
+            },
+            $fluid: {
+              unit: "vi",
+              value: 1.042,
+            },
+          },
+        },
+      },
+    },
+    fontsize: {
+      $type: "dimension",
+      static: {
+        sm: {
+          $value: {
+            unit: "px",
+            value: 14,
+          },
+        },
+        md: {
+          $value: {
+            unit: "px",
+            value: 16,
+          },
+        },
+        lg: {
+          $value: {
+            unit: "px",
+            value: 18,
+          },
+        },
+        xl: {
+          $value: {
+            unit: "px",
+            value: 20,
+          },
+        },
+        "2xl": {
+          $value: {
+            unit: "px",
+            value: 22,
+          },
+        },
+        "3xl": {
+          $value: {
+            unit: "px",
+            value: 24,
+          },
+        },
+        "4xl": {
+          $value: {
+            unit: "px",
+            value: 26,
+          },
+        },
+        "5xl": {
+          $value: {
+            unit: "px",
+            value: 28,
+          },
+        },
+        "6xl": {
+          $value: {
+            unit: "px",
+            value: 30,
+          },
+        },
+        "7xl": {
+          $value: {
+            unit: "px",
+            value: 32,
+          },
+        },
+        "8xl": {
+          $value: {
+            unit: "px",
+            value: 36,
+          },
+        },
+      },
+      fluid: {
+        sm: {
+          min: {
+            $value: "{base.fontsize.static.sm}",
+          },
+          max: {
+            $value: "{base.fontsize.static.md}",
+          },
+          val: {
+            $value: {
+              unit: "px",
+              value: 13.333,
+            },
+            $fluid: {
+              unit: "vi",
+              value: 0.208,
+            },
+          },
+        },
+        md: {
+          min: {
+            $value: "{base.fontsize.static.md}",
+          },
+          max: {
+            $value: "{base.fontsize.static.lg}",
+          },
+          val: {
+            $value: {
+              unit: "px",
+              value: 15.333,
+            },
+            $fluid: {
+              unit: "vi",
+              value: 0.208,
+            },
+          },
+        },
+        lg: {
+          min: {
+            $value: "{base.fontsize.static.lg}",
+          },
+          max: {
+            $value: "{base.fontsize.static.xl}",
+          },
+          val: {
+            $value: {
+              unit: "px",
+              value: 17.333,
+            },
+            $fluid: {
+              unit: "vi",
+              value: 0.208,
+            },
+          },
+        },
+        xl: {
+          min: {
+            $value: "{base.fontsize.static.xl}",
+          },
+          max: {
+            $value: "{base.fontsize.static.2xl}",
+          },
+          val: {
+            $value: {
+              unit: "px",
+              value: 19.333,
+            },
+            $fluid: {
+              unit: "vi",
+              value: 0.208,
+            },
+          },
+        },
+        "2xl": {
+          min: {
+            $value: "{base.fontsize.static.2xl}",
+          },
+          max: {
+            $value: "{base.fontsize.static.3xl}",
+          },
+          val: {
+            $value: {
+              unit: "px",
+              value: 21.333,
+            },
+            $fluid: {
+              unit: "vi",
+              value: 0.208,
+            },
+          },
+        },
+        "3xl": {
+          min: {
+            $value: "{base.fontsize.static.3xl}",
+          },
+          max: {
+            $value: "{base.fontsize.static.4xl}",
+          },
+          val: {
+            $value: {
+              unit: "px",
+              value: 23.333,
+            },
+            $fluid: {
+              unit: "vi",
+              value: 0.208,
+            },
+          },
+        },
+        "4xl": {
+          min: {
+            $value: "{base.fontsize.static.4xl}",
+          },
+          max: {
+            $value: "{base.fontsize.static.5xl}",
+          },
+          val: {
+            $value: {
+              unit: "px",
+              value: 25.333,
+            },
+            $fluid: {
+              unit: "vi",
+              value: 0.208,
+            },
+          },
+        },
+        "5xl": {
+          min: {
+            $value: "{base.fontsize.static.5xl}",
+          },
+          max: {
+            $value: "{base.fontsize.static.7xl}",
+          },
+          val: {
+            $value: {
+              unit: "px",
+              value: 26.666,
+            },
+            $fluid: {
+              unit: "vi",
+              value: 0.417,
+            },
+          },
+        },
+        "6xl": {
+          min: {
+            $value: "{base.fontsize.static.6xl}",
+          },
+          max: {
+            $value: "{base.fontsize.static.8xl}",
+          },
+          val: {
+            $value: {
+              unit: "px",
+              value: 28,
+            },
+            $fluid: {
+              unit: "vi",
+              value: 0.625,
+            },
+          },
+        },
+      },
+    },
+    lineheight: {
+      "2xs": {
+        $value: 1.2,
+        $type: "number",
+      },
+      xs: {
+        $value: 1.3,
+        $type: "number",
+      },
+      sm: {
+        $value: 1.333,
+        $type: "number",
+      },
+      md: {
+        $value: 1.4,
+        $type: "number",
+      },
+      lg: {
+        $value: 1.5,
+        $type: "number",
+      },
+    },
+    borderradius: {
+      $type: "dimension",
+      sm: {
+        $value: {
+          unit: "px",
+          value: 2,
+        },
+      },
+      md: {
+        $value: {
+          unit: "px",
+          value: 4,
+        },
+      },
+      lg: {
+        $value: {
+          unit: "px",
+          value: 20,
+        },
+      },
+      full: {
+        $value: {
+          unit: "px",
+          value: 9999,
+        },
+      },
+    },
+    borderwidth: {
+      $type: "dimension",
+      none: {
+        $value: {
+          unit: "px",
+          value: 0,
+        },
+      },
+      md: {
+        $value: {
+          unit: "px",
+          value: 1,
+        },
+      },
+      lg: {
+        $value: {
+          unit: "px",
+          value: 2,
+        },
+      },
+    },
+    fontweight: {
+      $type: "fontWeight",
+      regular: {
+        $value: 400,
+      },
+      medium: {
+        $value: 500,
+      },
+    },
+    letterspacing: {
+      $type: "dimension",
+      tight: {
+        $value: {
+          unit: "px",
+          value: -0.5,
+        },
+      },
+      normal: {
+        $value: {
+          unit: "px",
+          value: 0,
+        },
+      },
+      wide: {
+        $value: {
+          unit: "px",
+          value: 0.5,
+        },
+      },
+      wider: {
+        $value: {
+          unit: "px",
+          value: 1,
+        },
+      },
+    },
+    layout: {
+      breakpoint: {
+        $type: "dimension",
+        xs: {
+          $value: {
+            unit: "px",
+            value: 320,
+          },
+        },
+        sm: {
+          $value: {
+            unit: "px",
+            value: 600,
+          },
+        },
+        md: {
+          $value: {
+            unit: "px",
+            value: 840,
+          },
+        },
+        lg: {
+          $value: {
+            unit: "px",
+            value: 960,
+          },
+        },
+        xl: {
+          $value: {
+            unit: "px",
+            value: 1280,
+          },
+        },
+      },
+      container: {
+        $type: "dimension",
+        sm: {
+          $value: {
+            unit: "px",
+            value: 896,
+          },
+        },
+        md: {
+          $value: {
+            unit: "px",
+            value: 1080,
+          },
+        },
+        lg: {
+          $value: {
+            unit: "px",
+            value: 1280,
+          },
+        },
+      },
+      safezone: {
+        $type: "dimension",
+        static: {
+          md: {
+            $value: {
+              unit: "px",
+              value: 20,
+            },
+          },
+          lg: {
+            $value: {
+              unit: "px",
+              value: 40,
+            },
+          },
+        },
+        fluid: {
+          min: {
+            $value: "{base.layout.safezone.static.md}",
+          },
+          max: {
+            $value: "{base.layout.safezone.static.lg}",
+          },
+          val: {
+            $value: {
+              unit: "px",
+              value: -13.333,
+            },
+            $fluid: {
+              unit: "vi",
+              value: 5.556,
+            },
+          },
+        },
+      },
+      gridcolumn: {
+        "1": {
+          $value: 1,
+        },
+        "2": {
+          $value: 2,
+        },
+        "3": {
+          $value: 3,
+        },
+        "4": {
+          $value: 4,
+        },
+        "6": {
+          $value: 6,
+        },
+        "8": {
+          $value: 8,
+        },
+        "12": {
+          $value: 12,
+        },
+        $type: "number",
+      },
+      gridgap: {
+        $type: "dimension",
+        static: {
+          xs: {
+            $value: {
+              unit: "px",
+              value: 12,
+            },
+          },
+          sm: {
+            $value: {
+              unit: "px",
+              value: 18,
+            },
+          },
+          md: {
+            $value: {
+              unit: "px",
+              value: 22,
+            },
+          },
+          lg: {
+            $value: {
+              unit: "px",
+              value: 26,
+            },
+          },
+          xl: {
+            $value: {
+              unit: "px",
+              value: 36,
+            },
+          },
+        },
+        fluid: {
+          min: {
+            $value: "{base.layout.gridgap.static.xs}",
+          },
+          max: {
+            $value: "{base.layout.gridgap.static.xl}",
+          },
+          val: {
+            $value: {
+              unit: "px",
+              value: 4,
+            },
+            $fluid: {
+              unit: "vi",
+              value: 2.5,
+            },
+          },
+        },
+      },
+    },
+  },
+  semantic: {
+    color: {
+      $type: "color",
+      fn: {
+        default: {
+          $value: "{base.color.white.default}",
+        },
+        active: {
+          $value: "{base.color.white.default}",
+        },
+        inactive: {
+          $value: "{base.color.gray.300}",
+        },
+        border: {
+          $value: "{base.color.gray.100}",
+        },
+        label: {
+          $value: "{base.color.gray.100}",
+        },
+      },
+      text: {
+        default: {
+          $value: "{base.color.gray.100}",
+        },
+        "on-dark-bg": {
+          $value: "{base.color.blue.700}",
+        },
+        "on-disabled": {
+          $value: "{base.color.white.default}",
+        },
+        "headline-on-dark-bg": {
+          $value: "{base.color.green.300}",
+        },
+      },
+      background: {
+        default: {
+          $value: "{base.color.black}",
+        },
+        subtle: {
+          $value: "{base.color.gray.600}",
+        },
+        disabled: {
+          $value: "{base.color.gray.300}",
+        },
+        "light-blue": {
+          $value: "{base.color.blue.100}",
+        },
+        "light-green": {
+          $value: "{base.color.green.100}",
+        },
+        "dark-blue": {
+          $value: "{base.color.blue.800}",
+        },
+        "dark-green": {
+          $value: "{base.color.green.700}",
+        },
+      },
+      accent: {
+        $value: "{base.color.green.300}",
+      },
+      opaque: {
+        "white-90": {
+          $value: "{base.color.white.90}",
+        },
+        "white-95": {
+          $value: "{base.color.white.95}",
+        },
+        "gray-500-10": {
+          $value: "{base.color.gray.500.10}",
+        },
+        "gray-500-30": {
+          $value: "{base.color.gray.500.30}",
+        },
+        "gray-500-90": {
+          $value: "{base.color.gray.500.90}",
+        },
+      },
+      state: {
+        danger: {
+          $value: "{base.color.red.400}",
+        },
+        success: {
+          $value: "{base.color.green.700}",
+        },
+        warning: {
+          $value: "{base.color.violet.400}",
+        },
+      },
+      status: {
+        red: {
+          $value: "{base.color.red.400}",
+        },
+        yellow: {
+          $value: "{base.color.yellow.500}",
+        },
+        green: {
+          $value: "{base.color.green.700}",
+        },
+      },
+      line: {
+        "6": {
+          $value: "{base.color.blue.700}",
+        },
+        "7": {
+          $value: "{base.color.gray.600}",
+        },
+        "8": {
+          $value: "{base.color.gray.300}",
+        },
+        "9": {
+          $value: "{base.color.blue.600}",
+        },
+        "10": {
+          $value: "{base.color.gray.600}",
+        },
+        "11": {
+          $value: "{base.color.green.300}",
+        },
+        "12": {
+          $value: "{base.color.gray.300}",
+        },
+      },
+      product: {
+        container: {
+          $value: "{base.color.gray.50}",
+        },
+        benefit: {
+          $value: "{base.color.blue.500}",
+        },
+        credit: {
+          $value: "{base.color.green.700}",
+        },
+        cooperation: {
+          $value: "{base.color.violet.500}",
+        },
+        "credit-benefit": {
+          $value: "{base.color.gray.500.default}",
+        },
+      },
+      icon: {
+        default: {
+          $value: "{base.color.blue.600}",
+        },
+        secondary: {
+          $value: "{base.color.blue.400}",
+        },
+        disabled: {
+          $value: "{base.color.green.700}",
+        },
+        "disabled-secondary": {
+          $value: "{base.color.green.400}",
+        },
+      },
+    },
+    fontfamily: {
+      $type: "fontFamily",
+      default: {
+        $value: "{base.fontfamily.sans}",
+      },
+      code: {
+        $type: "fontFamily",
+        $value: "{base.fontfamily.mono}",
+      },
+    },
+    space: {
+      $type: "dimension",
+      xsmall: {
+        $value: "{base.space.static.10}",
+      },
+      small: {
+        $value: "{base.space.static.20}",
+      },
+      medium: {
+        $value: "{base.space.static.30}",
+      },
+      large: {
+        min: {
+          $value: "{base.space.fluid.35.min}",
+        },
+        max: {
+          $value: "{base.space.fluid.35.max}",
+        },
+        val: {
+          $value: "{base.space.fluid.35.val}",
+        },
+      },
+      big: {
+        min: {
+          $value: "{base.space.fluid.50.min}",
+        },
+        max: {
+          $value: "{base.space.fluid.50.max}",
+        },
+        val: {
+          $value: "{base.space.fluid.50.val}",
+        },
+      },
+    },
+    fontspace: {
+      $type: "dimension",
+      default: {
+        $value: "{base.space.static.20}",
+      },
+      introduction: {
+        $value: "{base.space.static.20}",
+      },
+      small: {
+        $value: "{base.space.static.5}",
+      },
+      large: {
+        $value: "{base.space.static.15}",
+      },
+      "heading-1": {
+        $value: "{base.space.static.20}",
+      },
+      "heading-2": {
+        $value: "{base.space.static.20}",
+      },
+      "heading-3": {
+        $value: "{base.space.static.10}",
+      },
+      "heading-4": {
+        $value: "{base.space.static.10}",
+      },
+      "heading-5": {
+        $value: "{base.space.static.10}",
+      },
+      "heading-6": {
+        $value: "{base.space.static.20}",
+      },
+    },
+    fontsize: {
+      $type: "dimension",
+      default: {
+        $value: "{base.fontsize.static.md}",
+      },
+      introduction: {
+        $value: "{base.fontsize.static.xl}",
+      },
+      small: {
+        $value: "{base.fontsize.static.sm}",
+      },
+      large: {
+        $value: "{base.fontsize.static.lg}",
+      },
+      "heading-1": {
+        min: {
+          $value: "{base.fontsize.fluid.6xl.min}",
+        },
+        max: {
+          $value: "{base.fontsize.fluid.6xl.max}",
+        },
+        val: {
+          $value: "{base.fontsize.fluid.6xl.val}",
+        },
+      },
+      "heading-2": {
+        min: {
+          $value: "{base.fontsize.fluid.5xl.min}",
+        },
+        max: {
+          $value: "{base.fontsize.fluid.5xl.max}",
+        },
+        val: {
+          $value: "{base.fontsize.fluid.5xl.val}",
+        },
+      },
+      "heading-3": {
+        min: {
+          $value: "{base.fontsize.fluid.3xl.min}",
+        },
+        max: {
+          $value: "{base.fontsize.fluid.3xl.max}",
+        },
+        val: {
+          $value: "{base.fontsize.fluid.3xl.val}",
+        },
+      },
+      "heading-4": {
+        min: {
+          $value: "{base.fontsize.fluid.xl.min}",
+        },
+        max: {
+          $value: "{base.fontsize.fluid.xl.max}",
+        },
+        val: {
+          $value: "{base.fontsize.fluid.xl.val}",
+        },
+      },
+      "heading-5": {
+        $value: "{base.fontsize.static.lg}",
+      },
+      "heading-6": {
+        $value: "{base.fontsize.static.md}",
+      },
+    },
+    lineheight: {
+      $type: "number",
+      default: {
+        $value: "{base.lineheight.md}",
+      },
+      list: {
+        $value: "{base.lineheight.lg}",
+      },
+      heading: {
+        $value: "{base.lineheight.xs}",
+      },
+      "heading-5": {
+        $value: "{base.lineheight.sm}",
+      },
+    },
+    borderradius: {
+      $type: "dimension",
+      $value: "{base.borderradius.md}",
+    },
+    focusring: {
+      outline: {
+        $type: "border",
+        $value: {
+          color: "{semantic.color.fn.active}",
+          width: "{base.borderwidth.lg}",
+          style: "dashed",
+        },
+      },
+      "outline-offset": {
+        $type: "dimension",
+        $value: "{base.borderwidth.lg}",
+      },
+    },
+    fontweight: {
+      $type: "fontWeight",
+      default: {
+        $value: "{base.fontweight.regular}",
+      },
+      heading: {
+        $value: "{base.fontweight.medium}",
+      },
+    },
+    breakpoint: {
+      $type: "dimension",
+      mobile: {
+        $value: "{base.layout.breakpoint.sm}",
+      },
+      tablet: {
+        $value: "{base.layout.breakpoint.md}",
+      },
+      desktop: {
+        $value: "{base.layout.breakpoint.lg}",
+      },
+    },
+    contentwrapper: {
+      $type: "dimension",
+      narrow: {
+        $value: "{base.layout.container.sm}",
+      },
+      basic: {
+        $value: "{base.layout.container.md}",
+      },
+      extended: {
+        $value: "{base.layout.container.lg}",
+      },
+    },
+    safezone: {
+      $type: "dimension",
+      min: {
+        $value: "{base.layout.safezone.fluid.min}",
+      },
+      max: {
+        $value: "{base.layout.safezone.fluid.max}",
+      },
+      val: {
+        $value: "{base.layout.safezone.fluid.val}",
+      },
+    },
+  },
+}