@oneli8/tokens 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/figma/variables.json

@@ -0,0 +1,3682 @@
+{
+  "generated": true,
+  "source": "@oneli8/tokens",
+  "version": "1.0.0-beta.3",
+  "figma": {
+    "fileKey": "0wRnp6ulIEA8PCV6wqGmAJ",
+    "name": "Oneli8 Design System — 1.0.0-beta.1",
+    "pages": {
+      "Foundations": "9:7",
+      "Iconography": "84:9",
+      "Button": {
+        "Button": "1034:9968",
+        "Icon Button": "1034:10546",
+        "Gem Button": "1034:9969"
+      }
+    }
+  },
+  "modeAxes": {
+    "colorScheme": [
+      "light",
+      "dark"
+    ],
+    "primaryFamily": [
+      "blue",
+      "orange",
+      "green"
+    ]
+  },
+  "collections": {
+    "primitive": [
+      {
+        "path": "color.blue.120",
+        "name": "Color / Blue / 120",
+        "variable": "--ol8-color-blue-120",
+        "value": "#9bb3ff",
+        "reference": null
+      },
+      {
+        "path": "color.blue.240",
+        "name": "Color / Blue / 240",
+        "variable": "--ol8-color-blue-240",
+        "value": "#6e8fef",
+        "reference": null
+      },
+      {
+        "path": "color.blue.360",
+        "name": "Color / Blue / 360",
+        "variable": "--ol8-color-blue-360",
+        "value": "#4d6dd1",
+        "reference": null
+      },
+      {
+        "path": "color.blue.480",
+        "name": "Color / Blue / 480",
+        "variable": "--ol8-color-blue-480",
+        "value": "#3854ae",
+        "reference": null
+      },
+      {
+        "path": "color.blue.600",
+        "name": "Color / Blue / 600",
+        "variable": "--ol8-color-blue-600",
+        "value": "#2c438b",
+        "reference": null
+      },
+      {
+        "path": "color.blue.720",
+        "name": "Color / Blue / 720",
+        "variable": "--ol8-color-blue-720",
+        "value": "#23366f",
+        "reference": null
+      },
+      {
+        "path": "color.blue.840",
+        "name": "Color / Blue / 840",
+        "variable": "--ol8-color-blue-840",
+        "value": "#1a2a59",
+        "reference": null
+      },
+      {
+        "path": "color.blue.930",
+        "name": "Color / Blue / 930",
+        "variable": "--ol8-color-blue-930",
+        "value": "#101b3a",
+        "reference": null
+      },
+      {
+        "path": "color.blue.030",
+        "name": "Color / Blue / 030",
+        "variable": "--ol8-color-blue-030",
+        "value": "#f2f5ff",
+        "reference": null
+      },
+      {
+        "path": "color.blue.060",
+        "name": "Color / Blue / 060",
+        "variable": "--ol8-color-blue-060",
+        "value": "#e2e9ff",
+        "reference": null
+      },
+      {
+        "path": "color.blue.090",
+        "name": "Color / Blue / 090",
+        "variable": "--ol8-color-blue-090",
+        "value": "#c4d2ff",
+        "reference": null
+      },
+      {
+        "path": "color.cyan.120",
+        "name": "Color / Cyan / 120",
+        "variable": "--ol8-color-cyan-120",
+        "value": "#75d3dd",
+        "reference": null
+      },
+      {
+        "path": "color.cyan.240",
+        "name": "Color / Cyan / 240",
+        "variable": "--ol8-color-cyan-240",
+        "value": "#3ab7c5",
+        "reference": null
+      },
+      {
+        "path": "color.cyan.360",
+        "name": "Color / Cyan / 360",
+        "variable": "--ol8-color-cyan-360",
+        "value": "#2096a7",
+        "reference": null
+      },
+      {
+        "path": "color.cyan.480",
+        "name": "Color / Cyan / 480",
+        "variable": "--ol8-color-cyan-480",
+        "value": "#187789",
+        "reference": null
+      },
+      {
+        "path": "color.cyan.600",
+        "name": "Color / Cyan / 600",
+        "variable": "--ol8-color-cyan-600",
+        "value": "#175f70",
+        "reference": null
+      },
+      {
+        "path": "color.cyan.720",
+        "name": "Color / Cyan / 720",
+        "variable": "--ol8-color-cyan-720",
+        "value": "#174d5b",
+        "reference": null
+      },
+      {
+        "path": "color.cyan.840",
+        "name": "Color / Cyan / 840",
+        "variable": "--ol8-color-cyan-840",
+        "value": "#163f4b",
+        "reference": null
+      },
+      {
+        "path": "color.cyan.930",
+        "name": "Color / Cyan / 930",
+        "variable": "--ol8-color-cyan-930",
+        "value": "#0a252d",
+        "reference": null
+      },
+      {
+        "path": "color.cyan.030",
+        "name": "Color / Cyan / 030",
+        "variable": "--ol8-color-cyan-030",
+        "value": "#effbfc",
+        "reference": null
+      },
+      {
+        "path": "color.cyan.060",
+        "name": "Color / Cyan / 060",
+        "variable": "--ol8-color-cyan-060",
+        "value": "#d5f4f6",
+        "reference": null
+      },
+      {
+        "path": "color.cyan.090",
+        "name": "Color / Cyan / 090",
+        "variable": "--ol8-color-cyan-090",
+        "value": "#aae7ec",
+        "reference": null
+      },
+      {
+        "path": "color.green.120",
+        "name": "Color / Green / 120",
+        "variable": "--ol8-color-green-120",
+        "value": "#8cd2aa",
+        "reference": null
+      },
+      {
+        "path": "color.green.240",
+        "name": "Color / Green / 240",
+        "variable": "--ol8-color-green-240",
+        "value": "#58b982",
+        "reference": null
+      },
+      {
+        "path": "color.green.360",
+        "name": "Color / Green / 360",
+        "variable": "--ol8-color-green-360",
+        "value": "#349a65",
+        "reference": null
+      },
+      {
+        "path": "color.green.480",
+        "name": "Color / Green / 480",
+        "variable": "--ol8-color-green-480",
+        "value": "#267b50",
+        "reference": null
+      },
+      {
+        "path": "color.green.600",
+        "name": "Color / Green / 600",
+        "variable": "--ol8-color-green-600",
+        "value": "#216240",
+        "reference": null
+      },
+      {
+        "path": "color.green.720",
+        "name": "Color / Green / 720",
+        "variable": "--ol8-color-green-720",
+        "value": "#1d4f35",
+        "reference": null
+      },
+      {
+        "path": "color.green.840",
+        "name": "Color / Green / 840",
+        "variable": "--ol8-color-green-840",
+        "value": "#193f2c",
+        "reference": null
+      },
+      {
+        "path": "color.green.930",
+        "name": "Color / Green / 930",
+        "variable": "--ol8-color-green-930",
+        "value": "#0c2418",
+        "reference": null
+      },
+      {
+        "path": "color.green.030",
+        "name": "Color / Green / 030",
+        "variable": "--ol8-color-green-030",
+        "value": "#f1faf5",
+        "reference": null
+      },
+      {
+        "path": "color.green.060",
+        "name": "Color / Green / 060",
+        "variable": "--ol8-color-green-060",
+        "value": "#dcf3e5",
+        "reference": null
+      },
+      {
+        "path": "color.green.090",
+        "name": "Color / Green / 090",
+        "variable": "--ol8-color-green-090",
+        "value": "#bce6ce",
+        "reference": null
+      },
+      {
+        "path": "color.yellow.120",
+        "name": "Color / Yellow / 120",
+        "variable": "--ol8-color-yellow-120",
+        "value": "#ffd13d",
+        "reference": null
+      },
+      {
+        "path": "color.yellow.240",
+        "name": "Color / Yellow / 240",
+        "variable": "--ol8-color-yellow-240",
+        "value": "#f0b90b",
+        "reference": null
+      },
+      {
+        "path": "color.yellow.360",
+        "name": "Color / Yellow / 360",
+        "variable": "--ol8-color-yellow-360",
+        "value": "#ce9500",
+        "reference": null
+      },
+      {
+        "path": "color.yellow.480",
+        "name": "Color / Yellow / 480",
+        "variable": "--ol8-color-yellow-480",
+        "value": "#a76f00",
+        "reference": null
+      },
+      {
+        "path": "color.yellow.600",
+        "name": "Color / Yellow / 600",
+        "variable": "--ol8-color-yellow-600",
+        "value": "#825100",
+        "reference": null
+      },
+      {
+        "path": "color.yellow.720",
+        "name": "Color / Yellow / 720",
+        "variable": "--ol8-color-yellow-720",
+        "value": "#613b09",
+        "reference": null
+      },
+      {
+        "path": "color.yellow.840",
+        "name": "Color / Yellow / 840",
+        "variable": "--ol8-color-yellow-840",
+        "value": "#4b2f0d",
+        "reference": null
+      },
+      {
+        "path": "color.yellow.930",
+        "name": "Color / Yellow / 930",
+        "variable": "--ol8-color-yellow-930",
+        "value": "#2b1a08",
+        "reference": null
+      },
+      {
+        "path": "color.yellow.030",
+        "name": "Color / Yellow / 030",
+        "variable": "--ol8-color-yellow-030",
+        "value": "#fff9e8",
+        "reference": null
+      },
+      {
+        "path": "color.yellow.060",
+        "name": "Color / Yellow / 060",
+        "variable": "--ol8-color-yellow-060",
+        "value": "#fff0be",
+        "reference": null
+      },
+      {
+        "path": "color.yellow.090",
+        "name": "Color / Yellow / 090",
+        "variable": "--ol8-color-yellow-090",
+        "value": "#ffe27d",
+        "reference": null
+      },
+      {
+        "path": "color.orange.120",
+        "name": "Color / Orange / 120",
+        "variable": "--ol8-color-orange-120",
+        "value": "#ffa54d",
+        "reference": null
+      },
+      {
+        "path": "color.orange.240",
+        "name": "Color / Orange / 240",
+        "variable": "--ol8-color-orange-240",
+        "value": "#f47b20",
+        "reference": null
+      },
+      {
+        "path": "color.orange.360",
+        "name": "Color / Orange / 360",
+        "variable": "--ol8-color-orange-360",
+        "value": "#d95c0b",
+        "reference": null
+      },
+      {
+        "path": "color.orange.480",
+        "name": "Color / Orange / 480",
+        "variable": "--ol8-color-orange-480",
+        "value": "#b74406",
+        "reference": null
+      },
+      {
+        "path": "color.orange.600",
+        "name": "Color / Orange / 600",
+        "variable": "--ol8-color-orange-600",
+        "value": "#913408",
+        "reference": null
+      },
+      {
+        "path": "color.orange.720",
+        "name": "Color / Orange / 720",
+        "variable": "--ol8-color-orange-720",
+        "value": "#70290d",
+        "reference": null
+      },
+      {
+        "path": "color.orange.840",
+        "name": "Color / Orange / 840",
+        "variable": "--ol8-color-orange-840",
+        "value": "#57230f",
+        "reference": null
+      },
+      {
+        "path": "color.orange.930",
+        "name": "Color / Orange / 930",
+        "variable": "--ol8-color-orange-930",
+        "value": "#321207",
+        "reference": null
+      },
+      {
+        "path": "color.orange.030",
+        "name": "Color / Orange / 030",
+        "variable": "--ol8-color-orange-030",
+        "value": "#fff5ea",
+        "reference": null
+      },
+      {
+        "path": "color.orange.060",
+        "name": "Color / Orange / 060",
+        "variable": "--ol8-color-orange-060",
+        "value": "#ffe7cb",
+        "reference": null
+      },
+      {
+        "path": "color.orange.090",
+        "name": "Color / Orange / 090",
+        "variable": "--ol8-color-orange-090",
+        "value": "#ffc98f",
+        "reference": null
+      },
+      {
+        "path": "color.pink.120",
+        "name": "Color / Pink / 120",
+        "variable": "--ol8-color-pink-120",
+        "value": "#ff94c4",
+        "reference": null
+      },
+      {
+        "path": "color.pink.240",
+        "name": "Color / Pink / 240",
+        "variable": "--ol8-color-pink-240",
+        "value": "#f45a9d",
+        "reference": null
+      },
+      {
+        "path": "color.pink.360",
+        "name": "Color / Pink / 360",
+        "variable": "--ol8-color-pink-360",
+        "value": "#d9367e",
+        "reference": null
+      },
+      {
+        "path": "color.pink.480",
+        "name": "Color / Pink / 480",
+        "variable": "--ol8-color-pink-480",
+        "value": "#b62364",
+        "reference": null
+      },
+      {
+        "path": "color.pink.600",
+        "name": "Color / Pink / 600",
+        "variable": "--ol8-color-pink-600",
+        "value": "#931d51",
+        "reference": null
+      },
+      {
+        "path": "color.pink.720",
+        "name": "Color / Pink / 720",
+        "variable": "--ol8-color-pink-720",
+        "value": "#771a43",
+        "reference": null
+      },
+      {
+        "path": "color.pink.840",
+        "name": "Color / Pink / 840",
+        "variable": "--ol8-color-pink-840",
+        "value": "#62183a",
+        "reference": null
+      },
+      {
+        "path": "color.pink.930",
+        "name": "Color / Pink / 930",
+        "variable": "--ol8-color-pink-930",
+        "value": "#3b0920",
+        "reference": null
+      },
+      {
+        "path": "color.pink.030",
+        "name": "Color / Pink / 030",
+        "variable": "--ol8-color-pink-030",
+        "value": "#fff1f8",
+        "reference": null
+      },
+      {
+        "path": "color.pink.060",
+        "name": "Color / Pink / 060",
+        "variable": "--ol8-color-pink-060",
+        "value": "#ffe1f0",
+        "reference": null
+      },
+      {
+        "path": "color.pink.090",
+        "name": "Color / Pink / 090",
+        "variable": "--ol8-color-pink-090",
+        "value": "#ffc3e0",
+        "reference": null
+      },
+      {
+        "path": "color.violet.120",
+        "name": "Color / Violet / 120",
+        "variable": "--ol8-color-violet-120",
+        "value": "#c5a4ff",
+        "reference": null
+      },
+      {
+        "path": "color.violet.240",
+        "name": "Color / Violet / 240",
+        "variable": "--ol8-color-violet-240",
+        "value": "#a574f2",
+        "reference": null
+      },
+      {
+        "path": "color.violet.360",
+        "name": "Color / Violet / 360",
+        "variable": "--ol8-color-violet-360",
+        "value": "#864fd6",
+        "reference": null
+      },
+      {
+        "path": "color.violet.480",
+        "name": "Color / Violet / 480",
+        "variable": "--ol8-color-violet-480",
+        "value": "#6c37b2",
+        "reference": null
+      },
+      {
+        "path": "color.violet.600",
+        "name": "Color / Violet / 600",
+        "variable": "--ol8-color-violet-600",
+        "value": "#572d8e",
+        "reference": null
+      },
+      {
+        "path": "color.violet.720",
+        "name": "Color / Violet / 720",
+        "variable": "--ol8-color-violet-720",
+        "value": "#472671",
+        "reference": null
+      },
+      {
+        "path": "color.violet.840",
+        "name": "Color / Violet / 840",
+        "variable": "--ol8-color-violet-840",
+        "value": "#3a225b",
+        "reference": null
+      },
+      {
+        "path": "color.violet.930",
+        "name": "Color / Violet / 930",
+        "variable": "--ol8-color-violet-930",
+        "value": "#241238",
+        "reference": null
+      },
+      {
+        "path": "color.violet.030",
+        "name": "Color / Violet / 030",
+        "variable": "--ol8-color-violet-030",
+        "value": "#f8f4ff",
+        "reference": null
+      },
+      {
+        "path": "color.violet.060",
+        "name": "Color / Violet / 060",
+        "variable": "--ol8-color-violet-060",
+        "value": "#efe6ff",
+        "reference": null
+      },
+      {
+        "path": "color.violet.090",
+        "name": "Color / Violet / 090",
+        "variable": "--ol8-color-violet-090",
+        "value": "#dfcdff",
+        "reference": null
+      },
+      {
+        "path": "color.red.120",
+        "name": "Color / Red / 120",
+        "variable": "--ol8-color-red-120",
+        "value": "#f99a92",
+        "reference": null
+      },
+      {
+        "path": "color.red.240",
+        "name": "Color / Red / 240",
+        "variable": "--ol8-color-red-240",
+        "value": "#ed6a61",
+        "reference": null
+      },
+      {
+        "path": "color.red.360",
+        "name": "Color / Red / 360",
+        "variable": "--ol8-color-red-360",
+        "value": "#d6473f",
+        "reference": null
+      },
+      {
+        "path": "color.red.480",
+        "name": "Color / Red / 480",
+        "variable": "--ol8-color-red-480",
+        "value": "#b6332e",
+        "reference": null
+      },
+      {
+        "path": "color.red.600",
+        "name": "Color / Red / 600",
+        "variable": "--ol8-color-red-600",
+        "value": "#922824",
+        "reference": null
+      },
+      {
+        "path": "color.red.720",
+        "name": "Color / Red / 720",
+        "variable": "--ol8-color-red-720",
+        "value": "#772421",
+        "reference": null
+      },
+      {
+        "path": "color.red.840",
+        "name": "Color / Red / 840",
+        "variable": "--ol8-color-red-840",
+        "value": "#64231f",
+        "reference": null
+      },
+      {
+        "path": "color.red.930",
+        "name": "Color / Red / 930",
+        "variable": "--ol8-color-red-930",
+        "value": "#380f0d",
+        "reference": null
+      },
+      {
+        "path": "color.red.030",
+        "name": "Color / Red / 030",
+        "variable": "--ol8-color-red-030",
+        "value": "#fff2f1",
+        "reference": null
+      },
+      {
+        "path": "color.red.060",
+        "name": "Color / Red / 060",
+        "variable": "--ol8-color-red-060",
+        "value": "#ffe2e0",
+        "reference": null
+      },
+      {
+        "path": "color.red.090",
+        "name": "Color / Red / 090",
+        "variable": "--ol8-color-red-090",
+        "value": "#ffc8c4",
+        "reference": null
+      },
+      {
+        "path": "color.neutral.120",
+        "name": "Color / Neutral / 120",
+        "variable": "--ol8-color-neutral-120",
+        "value": "#d2c8b6",
+        "reference": null
+      },
+      {
+        "path": "color.neutral.240",
+        "name": "Color / Neutral / 240",
+        "variable": "--ol8-color-neutral-240",
+        "value": "#b0a593",
+        "reference": null
+      },
+      {
+        "path": "color.neutral.360",
+        "name": "Color / Neutral / 360",
+        "variable": "--ol8-color-neutral-360",
+        "value": "#897f70",
+        "reference": null
+      },
+      {
+        "path": "color.neutral.480",
+        "name": "Color / Neutral / 480",
+        "variable": "--ol8-color-neutral-480",
+        "value": "#665e53",
+        "reference": null
+      },
+      {
+        "path": "color.neutral.600",
+        "name": "Color / Neutral / 600",
+        "variable": "--ol8-color-neutral-600",
+        "value": "#4a443d",
+        "reference": null
+      },
+      {
+        "path": "color.neutral.720",
+        "name": "Color / Neutral / 720",
+        "variable": "--ol8-color-neutral-720",
+        "value": "#302d29",
+        "reference": null
+      },
+      {
+        "path": "color.neutral.840",
+        "name": "Color / Neutral / 840",
+        "variable": "--ol8-color-neutral-840",
+        "value": "#20201e",
+        "reference": null
+      },
+      {
+        "path": "color.neutral.930",
+        "name": "Color / Neutral / 930",
+        "variable": "--ol8-color-neutral-930",
+        "value": "#151817",
+        "reference": null
+      },
+      {
+        "path": "color.neutral.030",
+        "name": "Color / Neutral / 030",
+        "variable": "--ol8-color-neutral-030",
+        "value": "#fcfaf3",
+        "reference": null
+      },
+      {
+        "path": "color.neutral.060",
+        "name": "Color / Neutral / 060",
+        "variable": "--ol8-color-neutral-060",
+        "value": "#f5f1e6",
+        "reference": null
+      },
+      {
+        "path": "color.neutral.090",
+        "name": "Color / Neutral / 090",
+        "variable": "--ol8-color-neutral-090",
+        "value": "#e7e0d1",
+        "reference": null
+      },
+      {
+        "path": "color.primary.120",
+        "name": "Color / Primary / 120",
+        "variable": "--ol8-color-primary-120",
+        "value": "#9bb3ff",
+        "reference": null
+      },
+      {
+        "path": "color.primary.240",
+        "name": "Color / Primary / 240",
+        "variable": "--ol8-color-primary-240",
+        "value": "#6e8fef",
+        "reference": null
+      },
+      {
+        "path": "color.primary.360",
+        "name": "Color / Primary / 360",
+        "variable": "--ol8-color-primary-360",
+        "value": "#4d6dd1",
+        "reference": null
+      },
+      {
+        "path": "color.primary.480",
+        "name": "Color / Primary / 480",
+        "variable": "--ol8-color-primary-480",
+        "value": "#3854ae",
+        "reference": null
+      },
+      {
+        "path": "color.primary.600",
+        "name": "Color / Primary / 600",
+        "variable": "--ol8-color-primary-600",
+        "value": "#2c438b",
+        "reference": null
+      },
+      {
+        "path": "color.primary.720",
+        "name": "Color / Primary / 720",
+        "variable": "--ol8-color-primary-720",
+        "value": "#23366f",
+        "reference": null
+      },
+      {
+        "path": "color.primary.840",
+        "name": "Color / Primary / 840",
+        "variable": "--ol8-color-primary-840",
+        "value": "#1a2a59",
+        "reference": null
+      },
+      {
+        "path": "color.primary.930",
+        "name": "Color / Primary / 930",
+        "variable": "--ol8-color-primary-930",
+        "value": "#101b3a",
+        "reference": null
+      },
+      {
+        "path": "color.primary.030",
+        "name": "Color / Primary / 030",
+        "variable": "--ol8-color-primary-030",
+        "value": "#f2f5ff",
+        "reference": null
+      },
+      {
+        "path": "color.primary.060",
+        "name": "Color / Primary / 060",
+        "variable": "--ol8-color-primary-060",
+        "value": "#e2e9ff",
+        "reference": null
+      },
+      {
+        "path": "color.primary.090",
+        "name": "Color / Primary / 090",
+        "variable": "--ol8-color-primary-090",
+        "value": "#c4d2ff",
+        "reference": null
+      }
+    ],
+    "semantic": [
+      {
+        "path": "color.background.canvas",
+        "name": "Color / Background / Canvas",
+        "variable": "--ol8-color-background-canvas",
+        "value": "#fcfaf3",
+        "reference": null
+      },
+      {
+        "path": "color.background.subtle",
+        "name": "Color / Background / Subtle",
+        "variable": "--ol8-color-background-subtle",
+        "value": "#f5f1e6",
+        "reference": null
+      },
+      {
+        "path": "color.background.inverse",
+        "name": "Color / Background / Inverse",
+        "variable": "--ol8-color-background-inverse",
+        "value": "#101b3a",
+        "reference": null
+      },
+      {
+        "path": "color.surface.default",
+        "name": "Color / Surface / Default",
+        "variable": "--ol8-color-surface-default",
+        "value": "#fcfaf3",
+        "reference": null
+      },
+      {
+        "path": "color.surface.raised",
+        "name": "Color / Surface / Raised",
+        "variable": "--ol8-color-surface-raised",
+        "value": "#fcfaf3",
+        "reference": null
+      },
+      {
+        "path": "color.surface.sunken",
+        "name": "Color / Surface / Sunken",
+        "variable": "--ol8-color-surface-sunken",
+        "value": "#f5f1e6",
+        "reference": null
+      },
+      {
+        "path": "color.surface.selected",
+        "name": "Color / Surface / Selected",
+        "variable": "--ol8-color-surface-selected",
+        "value": "#d5f4f6",
+        "reference": null
+      },
+      {
+        "path": "color.surface.disabled",
+        "name": "Color / Surface / Disabled",
+        "variable": "--ol8-color-surface-disabled",
+        "value": "#e7e0d1",
+        "reference": null
+      },
+      {
+        "path": "color.text.primary",
+        "name": "Color / Text / Primary",
+        "variable": "--ol8-color-text-primary",
+        "value": "#151817",
+        "reference": null
+      },
+      {
+        "path": "color.text.secondary",
+        "name": "Color / Text / Secondary",
+        "variable": "--ol8-color-text-secondary",
+        "value": "#302d29",
+        "reference": null
+      },
+      {
+        "path": "color.text.muted",
+        "name": "Color / Text / Muted",
+        "variable": "--ol8-color-text-muted",
+        "value": "#4a443d",
+        "reference": null
+      },
+      {
+        "path": "color.text.disabled",
+        "name": "Color / Text / Disabled",
+        "variable": "--ol8-color-text-disabled",
+        "value": "#665e53",
+        "reference": null
+      },
+      {
+        "path": "color.text.inverse",
+        "name": "Color / Text / Inverse",
+        "variable": "--ol8-color-text-inverse",
+        "value": "#fcfaf3",
+        "reference": null
+      },
+      {
+        "path": "color.text.link",
+        "name": "Color / Text / Link",
+        "variable": "--ol8-color-text-link",
+        "value": "#2c438b",
+        "reference": null
+      },
+      {
+        "path": "color.icon.primary",
+        "name": "Color / Icon / Primary",
+        "variable": "--ol8-color-icon-primary",
+        "value": "#151817",
+        "reference": null
+      },
+      {
+        "path": "color.icon.secondary",
+        "name": "Color / Icon / Secondary",
+        "variable": "--ol8-color-icon-secondary",
+        "value": "#665e53",
+        "reference": null
+      },
+      {
+        "path": "color.icon.muted",
+        "name": "Color / Icon / Muted",
+        "variable": "--ol8-color-icon-muted",
+        "value": "#897f70",
+        "reference": null
+      },
+      {
+        "path": "color.icon.disabled",
+        "name": "Color / Icon / Disabled",
+        "variable": "--ol8-color-icon-disabled",
+        "value": "#b0a593",
+        "reference": null
+      },
+      {
+        "path": "color.icon.inverse",
+        "name": "Color / Icon / Inverse",
+        "variable": "--ol8-color-icon-inverse",
+        "value": "#fcfaf3",
+        "reference": null
+      },
+      {
+        "path": "color.border.subtle",
+        "name": "Color / Border / Subtle",
+        "variable": "--ol8-color-border-subtle",
+        "value": "#e7e0d1",
+        "reference": null
+      },
+      {
+        "path": "color.border.default",
+        "name": "Color / Border / Default",
+        "variable": "--ol8-color-border-default",
+        "value": "#897f70",
+        "reference": null
+      },
+      {
+        "path": "color.border.strong",
+        "name": "Color / Border / Strong",
+        "variable": "--ol8-color-border-strong",
+        "value": "#665e53",
+        "reference": null
+      },
+      {
+        "path": "color.border.disabled",
+        "name": "Color / Border / Disabled",
+        "variable": "--ol8-color-border-disabled",
+        "value": "#665e53",
+        "reference": null
+      },
+      {
+        "path": "color.focus.inner",
+        "name": "Color / Focus / Inner",
+        "variable": "--ol8-color-focus-inner",
+        "value": "#f2f5ff",
+        "reference": null
+      },
+      {
+        "path": "color.focus.outer",
+        "name": "Color / Focus / Outer",
+        "variable": "--ol8-color-focus-outer",
+        "value": "#101b3a",
+        "reference": null
+      },
+      {
+        "path": "color.actionprimary.default",
+        "name": "Color / Actionprimary / Default",
+        "variable": "--ol8-color-actionprimary-default",
+        "value": "#2c438b",
+        "reference": null
+      },
+      {
+        "path": "color.actionprimary.hover",
+        "name": "Color / Actionprimary / Hover",
+        "variable": "--ol8-color-actionprimary-hover",
+        "value": "#23366f",
+        "reference": null
+      },
+      {
+        "path": "color.actionprimary.pressed",
+        "name": "Color / Actionprimary / Pressed",
+        "variable": "--ol8-color-actionprimary-pressed",
+        "value": "#1a2a59",
+        "reference": null
+      },
+      {
+        "path": "color.actionprimary.content",
+        "name": "Color / Actionprimary / Content",
+        "variable": "--ol8-color-actionprimary-content",
+        "value": "#fcfaf3",
+        "reference": null
+      },
+      {
+        "path": "color.actionprimary.disabled",
+        "name": "Color / Actionprimary / Disabled",
+        "variable": "--ol8-color-actionprimary-disabled",
+        "value": "#e7e0d1",
+        "reference": null
+      },
+      {
+        "path": "color.actionprimary.disabledcontent",
+        "name": "Color / Actionprimary / Disabledcontent",
+        "variable": "--ol8-color-actionprimary-disabledcontent",
+        "value": "#665e53",
+        "reference": null
+      },
+      {
+        "path": "color.actionsecondary.surfacedefault",
+        "name": "Color / Actionsecondary / Surfacedefault",
+        "variable": "--ol8-color-actionsecondary-surfacedefault",
+        "value": "#00000000",
+        "reference": null
+      },
+      {
+        "path": "color.actionsecondary.surfacehover",
+        "name": "Color / Actionsecondary / Surfacehover",
+        "variable": "--ol8-color-actionsecondary-surfacehover",
+        "value": "#f2f5ff",
+        "reference": null
+      },
+      {
+        "path": "color.actionsecondary.surfacepressed",
+        "name": "Color / Actionsecondary / Surfacepressed",
+        "variable": "--ol8-color-actionsecondary-surfacepressed",
+        "value": "#e2e9ff",
+        "reference": null
+      },
+      {
+        "path": "color.actionsecondary.surfacedisabled",
+        "name": "Color / Actionsecondary / Surfacedisabled",
+        "variable": "--ol8-color-actionsecondary-surfacedisabled",
+        "value": "#00000000",
+        "reference": null
+      },
+      {
+        "path": "color.actionsecondary.contentdefault",
+        "name": "Color / Actionsecondary / Contentdefault",
+        "variable": "--ol8-color-actionsecondary-contentdefault",
+        "value": "#2c438b",
+        "reference": null
+      },
+      {
+        "path": "color.actionsecondary.contenthover",
+        "name": "Color / Actionsecondary / Contenthover",
+        "variable": "--ol8-color-actionsecondary-contenthover",
+        "value": "#23366f",
+        "reference": null
+      },
+      {
+        "path": "color.actionsecondary.contentpressed",
+        "name": "Color / Actionsecondary / Contentpressed",
+        "variable": "--ol8-color-actionsecondary-contentpressed",
+        "value": "#1a2a59",
+        "reference": null
+      },
+      {
+        "path": "color.actionsecondary.contentdisabled",
+        "name": "Color / Actionsecondary / Contentdisabled",
+        "variable": "--ol8-color-actionsecondary-contentdisabled",
+        "value": "#665e53",
+        "reference": null
+      },
+      {
+        "path": "color.actionquiet.surfacedefault",
+        "name": "Color / Actionquiet / Surfacedefault",
+        "variable": "--ol8-color-actionquiet-surfacedefault",
+        "value": "#00000000",
+        "reference": null
+      },
+      {
+        "path": "color.actionquiet.surfacehover",
+        "name": "Color / Actionquiet / Surfacehover",
+        "variable": "--ol8-color-actionquiet-surfacehover",
+        "value": "#f2f5ff",
+        "reference": null
+      },
+      {
+        "path": "color.actionquiet.surfacepressed",
+        "name": "Color / Actionquiet / Surfacepressed",
+        "variable": "--ol8-color-actionquiet-surfacepressed",
+        "value": "#e2e9ff",
+        "reference": null
+      },
+      {
+        "path": "color.actionquiet.surfacedisabled",
+        "name": "Color / Actionquiet / Surfacedisabled",
+        "variable": "--ol8-color-actionquiet-surfacedisabled",
+        "value": "#00000000",
+        "reference": null
+      },
+      {
+        "path": "color.actionquiet.contentdefault",
+        "name": "Color / Actionquiet / Contentdefault",
+        "variable": "--ol8-color-actionquiet-contentdefault",
+        "value": "#2c438b",
+        "reference": null
+      },
+      {
+        "path": "color.actionquiet.contenthover",
+        "name": "Color / Actionquiet / Contenthover",
+        "variable": "--ol8-color-actionquiet-contenthover",
+        "value": "#23366f",
+        "reference": null
+      },
+      {
+        "path": "color.actionquiet.contentpressed",
+        "name": "Color / Actionquiet / Contentpressed",
+        "variable": "--ol8-color-actionquiet-contentpressed",
+        "value": "#1a2a59",
+        "reference": null
+      },
+      {
+        "path": "color.actionquiet.contentdisabled",
+        "name": "Color / Actionquiet / Contentdisabled",
+        "variable": "--ol8-color-actionquiet-contentdisabled",
+        "value": "#665e53",
+        "reference": null
+      },
+      {
+        "path": "color.actiondestructive.default",
+        "name": "Color / Actiondestructive / Default",
+        "variable": "--ol8-color-actiondestructive-default",
+        "value": "#922824",
+        "reference": null
+      },
+      {
+        "path": "color.actiondestructive.hover",
+        "name": "Color / Actiondestructive / Hover",
+        "variable": "--ol8-color-actiondestructive-hover",
+        "value": "#772421",
+        "reference": null
+      },
+      {
+        "path": "color.actiondestructive.pressed",
+        "name": "Color / Actiondestructive / Pressed",
+        "variable": "--ol8-color-actiondestructive-pressed",
+        "value": "#64231f",
+        "reference": null
+      },
+      {
+        "path": "color.actiondestructive.content",
+        "name": "Color / Actiondestructive / Content",
+        "variable": "--ol8-color-actiondestructive-content",
+        "value": "#fcfaf3",
+        "reference": null
+      },
+      {
+        "path": "color.actiondestructive.disabled",
+        "name": "Color / Actiondestructive / Disabled",
+        "variable": "--ol8-color-actiondestructive-disabled",
+        "value": "#e7e0d1",
+        "reference": null
+      },
+      {
+        "path": "color.actiondestructive.disabledcontent",
+        "name": "Color / Actiondestructive / Disabledcontent",
+        "variable": "--ol8-color-actiondestructive-disabledcontent",
+        "value": "#665e53",
+        "reference": null
+      },
+      {
+        "path": "color.feedbackinformative.surface",
+        "name": "Color / Feedbackinformative / Surface",
+        "variable": "--ol8-color-feedbackinformative-surface",
+        "value": "#174d5b",
+        "reference": null
+      },
+      {
+        "path": "color.feedbackinformative.content",
+        "name": "Color / Feedbackinformative / Content",
+        "variable": "--ol8-color-feedbackinformative-content",
+        "value": "#fcfaf3",
+        "reference": null
+      },
+      {
+        "path": "color.feedbackinformative.inlinecontent",
+        "name": "Color / Feedbackinformative / Inlinecontent",
+        "variable": "--ol8-color-feedbackinformative-inlinecontent",
+        "value": "#2c438b",
+        "reference": null
+      },
+      {
+        "path": "color.feedbackpositive.surface",
+        "name": "Color / Feedbackpositive / Surface",
+        "variable": "--ol8-color-feedbackpositive-surface",
+        "value": "#216240",
+        "reference": null
+      },
+      {
+        "path": "color.feedbackpositive.content",
+        "name": "Color / Feedbackpositive / Content",
+        "variable": "--ol8-color-feedbackpositive-content",
+        "value": "#fcfaf3",
+        "reference": null
+      },
+      {
+        "path": "color.feedbackpositive.inlinecontent",
+        "name": "Color / Feedbackpositive / Inlinecontent",
+        "variable": "--ol8-color-feedbackpositive-inlinecontent",
+        "value": "#216240",
+        "reference": null
+      },
+      {
+        "path": "color.feedbackcaution.surface",
+        "name": "Color / Feedbackcaution / Surface",
+        "variable": "--ol8-color-feedbackcaution-surface",
+        "value": "#ffe27d",
+        "reference": null
+      },
+      {
+        "path": "color.feedbackcaution.content",
+        "name": "Color / Feedbackcaution / Content",
+        "variable": "--ol8-color-feedbackcaution-content",
+        "value": "#20201e",
+        "reference": null
+      },
+      {
+        "path": "color.feedbackcaution.inlinecontent",
+        "name": "Color / Feedbackcaution / Inlinecontent",
+        "variable": "--ol8-color-feedbackcaution-inlinecontent",
+        "value": "#825100",
+        "reference": null
+      },
+      {
+        "path": "color.feedbackcritical.surface",
+        "name": "Color / Feedbackcritical / Surface",
+        "variable": "--ol8-color-feedbackcritical-surface",
+        "value": "#922824",
+        "reference": null
+      },
+      {
+        "path": "color.feedbackcritical.content",
+        "name": "Color / Feedbackcritical / Content",
+        "variable": "--ol8-color-feedbackcritical-content",
+        "value": "#fcfaf3",
+        "reference": null
+      },
+      {
+        "path": "color.feedbackcritical.inlinecontent",
+        "name": "Color / Feedbackcritical / Inlinecontent",
+        "variable": "--ol8-color-feedbackcritical-inlinecontent",
+        "value": "#b6332e",
+        "reference": null
+      },
+      {
+        "path": "color.selection.surface",
+        "name": "Color / Selection / Surface",
+        "variable": "--ol8-color-selection-surface",
+        "value": "#e2e9ff",
+        "reference": null
+      },
+      {
+        "path": "color.selection.content",
+        "name": "Color / Selection / Content",
+        "variable": "--ol8-color-selection-content",
+        "value": "#1a2a59",
+        "reference": null
+      },
+      {
+        "path": "color.control.thumb",
+        "name": "Color / Control / Thumb",
+        "variable": "--ol8-color-control-thumb",
+        "value": "#1a2a59",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.cutedge.outerhigh",
+        "name": "Material / Gem / Color / Cutedge / Outerhigh",
+        "variable": "--ol8-material-gem-color-cutedge-outerhigh",
+        "value": "#f5f1e6ed",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.cutedge.outermid",
+        "name": "Material / Gem / Color / Cutedge / Outermid",
+        "variable": "--ol8-material-gem-color-cutedge-outermid",
+        "value": "#9bb3ff7a",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.cutedge.outerlow",
+        "name": "Material / Gem / Color / Cutedge / Outerlow",
+        "variable": "--ol8-material-gem-color-cutedge-outerlow",
+        "value": "#f5f1e608",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.cutedge.outeraccent",
+        "name": "Material / Gem / Color / Cutedge / Outeraccent",
+        "variable": "--ol8-material-gem-color-cutedge-outeraccent",
+        "value": "#2096a75c",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.cutedge.high",
+        "name": "Material / Gem / Color / Cutedge / High",
+        "variable": "--ol8-material-gem-color-cutedge-high",
+        "value": "#f5f1e6b8",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.cutedge.mid",
+        "name": "Material / Gem / Color / Cutedge / Mid",
+        "variable": "--ol8-material-gem-color-cutedge-mid",
+        "value": "#e2e9ff5c",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.cutedge.low",
+        "name": "Material / Gem / Color / Cutedge / Low",
+        "variable": "--ol8-material-gem-color-cutedge-low",
+        "value": "#f5f1e608",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.cutedge.shadow",
+        "name": "Material / Gem / Color / Cutedge / Shadow",
+        "variable": "--ol8-material-gem-color-cutedge-shadow",
+        "value": "#101b3a29",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.quiet.environmentalface",
+        "name": "Material / Gem / Color / Quiet / Environmentalface",
+        "variable": "--ol8-material-gem-color-quiet-environmentalface",
+        "value": "#fcfaf37a",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.quiet.stabilizedface",
+        "name": "Material / Gem / Color / Quiet / Stabilizedface",
+        "variable": "--ol8-material-gem-color-quiet-stabilizedface",
+        "value": "#f5f1e6b8",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.quiet.opaqueequivalent",
+        "name": "Material / Gem / Color / Quiet / Opaqueequivalent",
+        "variable": "--ol8-material-gem-color-quiet-opaqueequivalent",
+        "value": "#fcfaf3",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.innerthincut.face",
+        "name": "Material / Gem / Color / Innerthincut / Face",
+        "variable": "--ol8-material-gem-color-innerthincut-face",
+        "value": "#f5f1e6b8",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.innerthincut.high",
+        "name": "Material / Gem / Color / Innerthincut / High",
+        "variable": "--ol8-material-gem-color-innerthincut-high",
+        "value": "#f5f1e68a",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.innerthincut.mid",
+        "name": "Material / Gem / Color / Innerthincut / Mid",
+        "variable": "--ol8-material-gem-color-innerthincut-mid",
+        "value": "#9bb3ff2e",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.innerthincut.low",
+        "name": "Material / Gem / Color / Innerthincut / Low",
+        "variable": "--ol8-material-gem-color-innerthincut-low",
+        "value": "#f5f1e608",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.facet.cool",
+        "name": "Material / Gem / Color / Facet / Cool",
+        "variable": "--ol8-material-gem-color-facet-cool",
+        "value": "#2c438b2e",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.facet.warm",
+        "name": "Material / Gem / Color / Facet / Warm",
+        "variable": "--ol8-material-gem-color-facet-warm",
+        "value": "#f47b201f",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.emerald.environmentalface",
+        "name": "Material / Gem / Color / Family / Emerald / Environmentalface",
+        "variable": "--ol8-material-gem-color-family-emerald-environmentalface",
+        "value": "#0c24187a",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.emerald.stabilizedface",
+        "name": "Material / Gem / Color / Family / Emerald / Stabilizedface",
+        "variable": "--ol8-material-gem-color-family-emerald-stabilizedface",
+        "value": "#0c241845",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.emerald.edge",
+        "name": "Material / Gem / Color / Family / Emerald / Edge",
+        "variable": "--ol8-material-gem-color-family-emerald-edge",
+        "value": "#58b982a8",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.emerald.innerhigh",
+        "name": "Material / Gem / Color / Family / Emerald / Innerhigh",
+        "variable": "--ol8-material-gem-color-family-emerald-innerhigh",
+        "value": "#bce6ce5c",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.emerald.innermid",
+        "name": "Material / Gem / Color / Family / Emerald / Innermid",
+        "variable": "--ol8-material-gem-color-family-emerald-innermid",
+        "value": "#58b9822e",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.emerald.innerlow",
+        "name": "Material / Gem / Color / Family / Emerald / Innerlow",
+        "variable": "--ol8-material-gem-color-family-emerald-innerlow",
+        "value": "#bce6ce08",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.emerald.opaqueequivalent",
+        "name": "Material / Gem / Color / Family / Emerald / Opaqueequivalent",
+        "variable": "--ol8-material-gem-color-family-emerald-opaqueequivalent",
+        "value": "#0c2418",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.ruby.environmentalface",
+        "name": "Material / Gem / Color / Family / Ruby / Environmentalface",
+        "variable": "--ol8-material-gem-color-family-ruby-environmentalface",
+        "value": "#380f0d7a",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.ruby.stabilizedface",
+        "name": "Material / Gem / Color / Family / Ruby / Stabilizedface",
+        "variable": "--ol8-material-gem-color-family-ruby-stabilizedface",
+        "value": "#380f0d45",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.ruby.edge",
+        "name": "Material / Gem / Color / Family / Ruby / Edge",
+        "variable": "--ol8-material-gem-color-family-ruby-edge",
+        "value": "#ed6a61a8",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.ruby.innerhigh",
+        "name": "Material / Gem / Color / Family / Ruby / Innerhigh",
+        "variable": "--ol8-material-gem-color-family-ruby-innerhigh",
+        "value": "#ffc8c45c",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.ruby.innermid",
+        "name": "Material / Gem / Color / Family / Ruby / Innermid",
+        "variable": "--ol8-material-gem-color-family-ruby-innermid",
+        "value": "#ed6a612e",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.ruby.innerlow",
+        "name": "Material / Gem / Color / Family / Ruby / Innerlow",
+        "variable": "--ol8-material-gem-color-family-ruby-innerlow",
+        "value": "#ffc8c408",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.ruby.opaqueequivalent",
+        "name": "Material / Gem / Color / Family / Ruby / Opaqueequivalent",
+        "variable": "--ol8-material-gem-color-family-ruby-opaqueequivalent",
+        "value": "#380f0d",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.sapphire.environmentalface",
+        "name": "Material / Gem / Color / Family / Sapphire / Environmentalface",
+        "variable": "--ol8-material-gem-color-family-sapphire-environmentalface",
+        "value": "#101b3a7a",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.sapphire.stabilizedface",
+        "name": "Material / Gem / Color / Family / Sapphire / Stabilizedface",
+        "variable": "--ol8-material-gem-color-family-sapphire-stabilizedface",
+        "value": "#101b3a4d",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.sapphire.edge",
+        "name": "Material / Gem / Color / Family / Sapphire / Edge",
+        "variable": "--ol8-material-gem-color-family-sapphire-edge",
+        "value": "#6e8fefa8",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.sapphire.innerhigh",
+        "name": "Material / Gem / Color / Family / Sapphire / Innerhigh",
+        "variable": "--ol8-material-gem-color-family-sapphire-innerhigh",
+        "value": "#e2e9ff63",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.sapphire.innermid",
+        "name": "Material / Gem / Color / Family / Sapphire / Innermid",
+        "variable": "--ol8-material-gem-color-family-sapphire-innermid",
+        "value": "#6e8fef2e",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.sapphire.innerlow",
+        "name": "Material / Gem / Color / Family / Sapphire / Innerlow",
+        "variable": "--ol8-material-gem-color-family-sapphire-innerlow",
+        "value": "#e2e9ff08",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.sapphire.opaqueequivalent",
+        "name": "Material / Gem / Color / Family / Sapphire / Opaqueequivalent",
+        "variable": "--ol8-material-gem-color-family-sapphire-opaqueequivalent",
+        "value": "#101b3a",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.amethyst.environmentalface",
+        "name": "Material / Gem / Color / Family / Amethyst / Environmentalface",
+        "variable": "--ol8-material-gem-color-family-amethyst-environmentalface",
+        "value": "#2412387a",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.amethyst.stabilizedface",
+        "name": "Material / Gem / Color / Family / Amethyst / Stabilizedface",
+        "variable": "--ol8-material-gem-color-family-amethyst-stabilizedface",
+        "value": "#24123845",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.amethyst.edge",
+        "name": "Material / Gem / Color / Family / Amethyst / Edge",
+        "variable": "--ol8-material-gem-color-family-amethyst-edge",
+        "value": "#a574f2a8",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.amethyst.innerhigh",
+        "name": "Material / Gem / Color / Family / Amethyst / Innerhigh",
+        "variable": "--ol8-material-gem-color-family-amethyst-innerhigh",
+        "value": "#dfcdff5c",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.amethyst.innermid",
+        "name": "Material / Gem / Color / Family / Amethyst / Innermid",
+        "variable": "--ol8-material-gem-color-family-amethyst-innermid",
+        "value": "#a574f22e",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.amethyst.innerlow",
+        "name": "Material / Gem / Color / Family / Amethyst / Innerlow",
+        "variable": "--ol8-material-gem-color-family-amethyst-innerlow",
+        "value": "#dfcdff08",
+        "reference": null
+      },
+      {
+        "path": "material.gem.color.family.amethyst.opaqueequivalent",
+        "name": "Material / Gem / Color / Family / Amethyst / Opaqueequivalent",
+        "variable": "--ol8-material-gem-color-family-amethyst-opaqueequivalent",
+        "value": "#241238",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..primary.start",
+        "name": "Material / Control / Gem / Primary / Start",
+        "variable": "--ol8-material-control-gem--primary-start",
+        "value": "#3854ae",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..primary.mid",
+        "name": "Material / Control / Gem / Primary / Mid",
+        "variable": "--ol8-material-control-gem--primary-mid",
+        "value": "#2c438b",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..primary.end",
+        "name": "Material / Control / Gem / Primary / End",
+        "variable": "--ol8-material-control-gem--primary-end",
+        "value": "#23366f",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..primary.hover.start",
+        "name": "Material / Control / Gem / Primary / Hover / Start",
+        "variable": "--ol8-material-control-gem--primary-hover-start",
+        "value": "#2c438b",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..primary.hover.mid",
+        "name": "Material / Control / Gem / Primary / Hover / Mid",
+        "variable": "--ol8-material-control-gem--primary-hover-mid",
+        "value": "#23366f",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..primary.hover.end",
+        "name": "Material / Control / Gem / Primary / Hover / End",
+        "variable": "--ol8-material-control-gem--primary-hover-end",
+        "value": "#1a2a59",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..primary.loading.start",
+        "name": "Material / Control / Gem / Primary / Loading / Start",
+        "variable": "--ol8-material-control-gem--primary-loading-start",
+        "value": "#23366f",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..primary.loading.mid",
+        "name": "Material / Control / Gem / Primary / Loading / Mid",
+        "variable": "--ol8-material-control-gem--primary-loading-mid",
+        "value": "#1a2a59",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..primary.loading.end",
+        "name": "Material / Control / Gem / Primary / Loading / End",
+        "variable": "--ol8-material-control-gem--primary-loading-end",
+        "value": "#101b3a",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..primary.content",
+        "name": "Material / Control / Gem / Primary / Content",
+        "variable": "--ol8-material-control-gem--primary-content",
+        "value": "#fcfaf3",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..secondary.high",
+        "name": "Material / Control / Gem / Secondary / High",
+        "variable": "--ol8-material-control-gem--secondary-high",
+        "value": "#fcfaf338",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..secondary.mid",
+        "name": "Material / Control / Gem / Secondary / Mid",
+        "variable": "--ol8-material-control-gem--secondary-mid",
+        "value": "#fcfaf30d",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..secondary.low",
+        "name": "Material / Control / Gem / Secondary / Low",
+        "variable": "--ol8-material-control-gem--secondary-low",
+        "value": "#fcfaf31f",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..secondary.hover.high",
+        "name": "Material / Control / Gem / Secondary / Hover / High",
+        "variable": "--ol8-material-control-gem--secondary-hover-high",
+        "value": "#fcfaf34d",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..secondary.hover.mid",
+        "name": "Material / Control / Gem / Secondary / Hover / Mid",
+        "variable": "--ol8-material-control-gem--secondary-hover-mid",
+        "value": "#fcfaf317",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..secondary.hover.low",
+        "name": "Material / Control / Gem / Secondary / Hover / Low",
+        "variable": "--ol8-material-control-gem--secondary-hover-low",
+        "value": "#fcfaf32e",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..secondary.loading.high",
+        "name": "Material / Control / Gem / Secondary / Loading / High",
+        "variable": "--ol8-material-control-gem--secondary-loading-high",
+        "value": "#fcfaf363",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..secondary.loading.mid",
+        "name": "Material / Control / Gem / Secondary / Loading / Mid",
+        "variable": "--ol8-material-control-gem--secondary-loading-mid",
+        "value": "#fcfaf31f",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..secondary.loading.low",
+        "name": "Material / Control / Gem / Secondary / Loading / Low",
+        "variable": "--ol8-material-control-gem--secondary-loading-low",
+        "value": "#fcfaf33d",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..secondary.content",
+        "name": "Material / Control / Gem / Secondary / Content",
+        "variable": "--ol8-material-control-gem--secondary-content",
+        "value": "#fcfaf3",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..rim.default",
+        "name": "Material / Control / Gem / Rim / Default",
+        "variable": "--ol8-material-control-gem--rim-default",
+        "value": "#fcfaf33d",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..rim.specular",
+        "name": "Material / Control / Gem / Rim / Specular",
+        "variable": "--ol8-material-control-gem--rim-specular",
+        "value": "#fcfaf38a",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..rim.hover",
+        "name": "Material / Control / Gem / Rim / Hover",
+        "variable": "--ol8-material-control-gem--rim-hover",
+        "value": "#fcfaf35c",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..blur",
+        "name": "Material / Control / Gem / Blur",
+        "variable": "--ol8-material-control-gem--blur",
+        "value": "12px",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..stop.1",
+        "name": "Material / Control / Gem / Stop / 1",
+        "variable": "--ol8-material-control-gem--stop-1",
+        "value": "14.639%",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..stop.2",
+        "name": "Material / Control / Gem / Stop / 2",
+        "variable": "--ol8-material-control-gem--stop-2",
+        "value": "48.586%",
+        "reference": null
+      },
+      {
+        "path": "material.control.gem..stop.3",
+        "name": "Material / Control / Gem / Stop / 3",
+        "variable": "--ol8-material-control-gem--stop-3",
+        "value": "85.361%",
+        "reference": null
+      },
+      {
+        "path": "dimension.scale.108",
+        "name": "Dimension / Scale / 108",
+        "variable": "--ol8-dimension-scale-108",
+        "value": "108px",
+        "reference": null
+      },
+      {
+        "path": "dimension.scale.000",
+        "name": "Dimension / Scale / 000",
+        "variable": "--ol8-dimension-scale-000",
+        "value": "0px",
+        "reference": null
+      },
+      {
+        "path": "dimension.scale.003",
+        "name": "Dimension / Scale / 003",
+        "variable": "--ol8-dimension-scale-003",
+        "value": "3px",
+        "reference": null
+      },
+      {
+        "path": "dimension.scale.006",
+        "name": "Dimension / Scale / 006",
+        "variable": "--ol8-dimension-scale-006",
+        "value": "6px",
+        "reference": null
+      },
+      {
+        "path": "dimension.scale.009",
+        "name": "Dimension / Scale / 009",
+        "variable": "--ol8-dimension-scale-009",
+        "value": "9px",
+        "reference": null
+      },
+      {
+        "path": "dimension.scale.012",
+        "name": "Dimension / Scale / 012",
+        "variable": "--ol8-dimension-scale-012",
+        "value": "12px",
+        "reference": null
+      },
+      {
+        "path": "dimension.scale.015",
+        "name": "Dimension / Scale / 015",
+        "variable": "--ol8-dimension-scale-015",
+        "value": "15px",
+        "reference": null
+      },
+      {
+        "path": "dimension.scale.018",
+        "name": "Dimension / Scale / 018",
+        "variable": "--ol8-dimension-scale-018",
+        "value": "18px",
+        "reference": null
+      },
+      {
+        "path": "dimension.scale.024",
+        "name": "Dimension / Scale / 024",
+        "variable": "--ol8-dimension-scale-024",
+        "value": "24px",
+        "reference": null
+      },
+      {
+        "path": "dimension.scale.030",
+        "name": "Dimension / Scale / 030",
+        "variable": "--ol8-dimension-scale-030",
+        "value": "30px",
+        "reference": null
+      },
+      {
+        "path": "dimension.scale.036",
+        "name": "Dimension / Scale / 036",
+        "variable": "--ol8-dimension-scale-036",
+        "value": "36px",
+        "reference": null
+      },
+      {
+        "path": "dimension.scale.042",
+        "name": "Dimension / Scale / 042",
+        "variable": "--ol8-dimension-scale-042",
+        "value": "42px",
+        "reference": null
+      },
+      {
+        "path": "dimension.scale.048",
+        "name": "Dimension / Scale / 048",
+        "variable": "--ol8-dimension-scale-048",
+        "value": "48px",
+        "reference": null
+      },
+      {
+        "path": "dimension.scale.060",
+        "name": "Dimension / Scale / 060",
+        "variable": "--ol8-dimension-scale-060",
+        "value": "60px",
+        "reference": null
+      },
+      {
+        "path": "dimension.scale.072",
+        "name": "Dimension / Scale / 072",
+        "variable": "--ol8-dimension-scale-072",
+        "value": "72px",
+        "reference": null
+      },
+      {
+        "path": "dimension.scale.084",
+        "name": "Dimension / Scale / 084",
+        "variable": "--ol8-dimension-scale-084",
+        "value": "84px",
+        "reference": null
+      },
+      {
+        "path": "dimension.scale.096",
+        "name": "Dimension / Scale / 096",
+        "variable": "--ol8-dimension-scale-096",
+        "value": "96px",
+        "reference": null
+      },
+      {
+        "path": "shape.radius.none",
+        "name": "Shape / Radius / None",
+        "variable": "--ol8-shape-radius-none",
+        "value": "0px",
+        "reference": null
+      },
+      {
+        "path": "shape.radius.subtle",
+        "name": "Shape / Radius / Subtle",
+        "variable": "--ol8-shape-radius-subtle",
+        "value": "3px",
+        "reference": null
+      },
+      {
+        "path": "shape.radius.compact",
+        "name": "Shape / Radius / Compact",
+        "variable": "--ol8-shape-radius-compact",
+        "value": "6px",
+        "reference": null
+      },
+      {
+        "path": "shape.radius.medium",
+        "name": "Shape / Radius / Medium",
+        "variable": "--ol8-shape-radius-medium",
+        "value": "9px",
+        "reference": null
+      },
+      {
+        "path": "shape.radius.standard",
+        "name": "Shape / Radius / Standard",
+        "variable": "--ol8-shape-radius-standard",
+        "value": "12px",
+        "reference": null
+      },
+      {
+        "path": "shape.radius.comfortable",
+        "name": "Shape / Radius / Comfortable",
+        "variable": "--ol8-shape-radius-comfortable",
+        "value": "18px",
+        "reference": null
+      },
+      {
+        "path": "shape.radius.container",
+        "name": "Shape / Radius / Container",
+        "variable": "--ol8-shape-radius-container",
+        "value": "24px",
+        "reference": null
+      },
+      {
+        "path": "shape.radius.display",
+        "name": "Shape / Radius / Display",
+        "variable": "--ol8-shape-radius-display",
+        "value": "36px",
+        "reference": null
+      },
+      {
+        "path": "shape.radius.full",
+        "name": "Shape / Radius / Full",
+        "variable": "--ol8-shape-radius-full",
+        "value": "999px",
+        "reference": null
+      },
+      {
+        "path": "font.family.display",
+        "name": "Font / Family / Display",
+        "variable": "--ol8-font-family-display",
+        "value": "\"Syne\", ui-sans-serif, system-ui, sans-serif",
+        "reference": null
+      },
+      {
+        "path": "font.family.functional",
+        "name": "Font / Family / Functional",
+        "variable": "--ol8-font-family-functional",
+        "value": "\"AR One Sans\", ui-sans-serif, system-ui, sans-serif",
+        "reference": null
+      },
+      {
+        "path": "font.size.012",
+        "name": "Font / Size / 012",
+        "variable": "--ol8-font-size-012",
+        "value": "12px",
+        "reference": null
+      },
+      {
+        "path": "font.size.016",
+        "name": "Font / Size / 016",
+        "variable": "--ol8-font-size-016",
+        "value": "16px",
+        "reference": null
+      },
+      {
+        "path": "font.size.021",
+        "name": "Font / Size / 021",
+        "variable": "--ol8-font-size-021",
+        "value": "21px",
+        "reference": null
+      },
+      {
+        "path": "font.size.030",
+        "name": "Font / Size / 030",
+        "variable": "--ol8-font-size-030",
+        "value": "30px",
+        "reference": null
+      },
+      {
+        "path": "font.size.039",
+        "name": "Font / Size / 039",
+        "variable": "--ol8-font-size-039",
+        "value": "39px",
+        "reference": null
+      },
+      {
+        "path": "font.size.051",
+        "name": "Font / Size / 051",
+        "variable": "--ol8-font-size-051",
+        "value": "51px",
+        "reference": null
+      },
+      {
+        "path": "font.size.066",
+        "name": "Font / Size / 066",
+        "variable": "--ol8-font-size-066",
+        "value": "66px",
+        "reference": null
+      },
+      {
+        "path": "font.line.018",
+        "name": "Font / Line / 018",
+        "variable": "--ol8-font-line-018",
+        "value": "18px",
+        "reference": null
+      },
+      {
+        "path": "font.line.024",
+        "name": "Font / Line / 024",
+        "variable": "--ol8-font-line-024",
+        "value": "24px",
+        "reference": null
+      },
+      {
+        "path": "font.line.030",
+        "name": "Font / Line / 030",
+        "variable": "--ol8-font-line-030",
+        "value": "30px",
+        "reference": null
+      },
+      {
+        "path": "font.line.039",
+        "name": "Font / Line / 039",
+        "variable": "--ol8-font-line-039",
+        "value": "39px",
+        "reference": null
+      },
+      {
+        "path": "font.line.048",
+        "name": "Font / Line / 048",
+        "variable": "--ol8-font-line-048",
+        "value": "48px",
+        "reference": null
+      },
+      {
+        "path": "font.line.060",
+        "name": "Font / Line / 060",
+        "variable": "--ol8-font-line-060",
+        "value": "60px",
+        "reference": null
+      },
+      {
+        "path": "font.line.072",
+        "name": "Font / Line / 072",
+        "variable": "--ol8-font-line-072",
+        "value": "72px",
+        "reference": null
+      },
+      {
+        "path": "font.weight.regular",
+        "name": "Font / Weight / Regular",
+        "variable": "--ol8-font-weight-regular",
+        "value": "450",
+        "reference": null
+      },
+      {
+        "path": "font.weight.semibold",
+        "name": "Font / Weight / Semibold",
+        "variable": "--ol8-font-weight-semibold",
+        "value": "600",
+        "reference": null
+      },
+      {
+        "path": "font.weight.bold",
+        "name": "Font / Weight / Bold",
+        "variable": "--ol8-font-weight-bold",
+        "value": "690",
+        "reference": null
+      },
+      {
+        "path": "font.variation.functional",
+        "name": "Font / Variation / Functional",
+        "variable": "--ol8-font-variation-functional",
+        "value": "\"ARRR\" 10",
+        "reference": null
+      },
+      {
+        "path": "border.width.standard",
+        "name": "Border / Width / Standard",
+        "variable": "--ol8-border-width-standard",
+        "value": "2px",
+        "reference": null
+      },
+      {
+        "path": "spacing.stack.grouped",
+        "name": "Spacing / Stack / Grouped",
+        "variable": "--ol8-spacing-stack-grouped",
+        "value": "18px",
+        "reference": null
+      },
+      {
+        "path": "spacing.stack.related",
+        "name": "Spacing / Stack / Related",
+        "variable": "--ol8-spacing-stack-related",
+        "value": "12px",
+        "reference": null
+      },
+      {
+        "path": "spacing.inset.standard",
+        "name": "Spacing / Inset / Standard",
+        "variable": "--ol8-spacing-inset-standard",
+        "value": "18px",
+        "reference": null
+      },
+      {
+        "path": "elevation.flat",
+        "name": "Elevation / Flat",
+        "variable": "--ol8-elevation-flat",
+        "value": "none",
+        "reference": null
+      },
+      {
+        "path": "elevation.raised",
+        "name": "Elevation / Raised",
+        "variable": "--ol8-elevation-raised",
+        "value": "0 3px 6px 0 rgba(22,63,75,0.12)",
+        "reference": null
+      },
+      {
+        "path": "elevation.floating",
+        "name": "Elevation / Floating",
+        "variable": "--ol8-elevation-floating",
+        "value": "0 3px 6px 0 rgba(22,63,75,0.12), 0 6px 18px -3px rgba(22,63,75,0.18)",
+        "reference": null
+      },
+      {
+        "path": "elevation.overlay",
+        "name": "Elevation / Overlay",
+        "variable": "--ol8-elevation-overlay",
+        "value": "0 6px 12px 0 rgba(22,63,75,0.18), 0 12px 36px -6px rgba(22,63,75,0.24)",
+        "reference": null
+      },
+      {
+        "path": "elevation.blocking",
+        "name": "Elevation / Blocking",
+        "variable": "--ol8-elevation-blocking",
+        "value": "0 12px 24px 0 rgba(22,63,75,0.24), 0 24px 72px -12px rgba(22,63,75,0.36)",
+        "reference": null
+      },
+      {
+        "path": "icon.source.size",
+        "name": "Icon / Source / Size",
+        "variable": "--ol8-icon-source-size",
+        "value": "24px",
+        "reference": null
+      },
+      {
+        "path": "icon.source.stroke",
+        "name": "Icon / Source / Stroke",
+        "variable": "--ol8-icon-source-stroke",
+        "value": "1.8",
+        "reference": null
+      },
+      {
+        "path": "icon.size.108",
+        "name": "Icon / Size / 108",
+        "variable": "--ol8-icon-size-108",
+        "value": "108px",
+        "reference": null
+      },
+      {
+        "path": "icon.size.009",
+        "name": "Icon / Size / 009",
+        "variable": "--ol8-icon-size-009",
+        "value": "9px",
+        "reference": null
+      },
+      {
+        "path": "icon.size.012",
+        "name": "Icon / Size / 012",
+        "variable": "--ol8-icon-size-012",
+        "value": "12px",
+        "reference": null
+      },
+      {
+        "path": "icon.size.018",
+        "name": "Icon / Size / 018",
+        "variable": "--ol8-icon-size-018",
+        "value": "18px",
+        "reference": null
+      },
+      {
+        "path": "icon.size.024",
+        "name": "Icon / Size / 024",
+        "variable": "--ol8-icon-size-024",
+        "value": "24px",
+        "reference": null
+      },
+      {
+        "path": "icon.size.030",
+        "name": "Icon / Size / 030",
+        "variable": "--ol8-icon-size-030",
+        "value": "30px",
+        "reference": null
+      },
+      {
+        "path": "icon.size.036",
+        "name": "Icon / Size / 036",
+        "variable": "--ol8-icon-size-036",
+        "value": "36px",
+        "reference": null
+      },
+      {
+        "path": "icon.size.048",
+        "name": "Icon / Size / 048",
+        "variable": "--ol8-icon-size-048",
+        "value": "48px",
+        "reference": null
+      },
+      {
+        "path": "icon.size.060",
+        "name": "Icon / Size / 060",
+        "variable": "--ol8-icon-size-060",
+        "value": "60px",
+        "reference": null
+      },
+      {
+        "path": "icon.size.072",
+        "name": "Icon / Size / 072",
+        "variable": "--ol8-icon-size-072",
+        "value": "72px",
+        "reference": null
+      },
+      {
+        "path": "icon.size.096",
+        "name": "Icon / Size / 096",
+        "variable": "--ol8-icon-size-096",
+        "value": "96px",
+        "reference": null
+      },
+      {
+        "path": "focus.ring.innerwidth",
+        "name": "Focus / Ring / Innerwidth",
+        "variable": "--ol8-focus-ring-innerwidth",
+        "value": "3px",
+        "reference": null
+      },
+      {
+        "path": "focus.ring.outerwidth",
+        "name": "Focus / Ring / Outerwidth",
+        "variable": "--ol8-focus-ring-outerwidth",
+        "value": "3px",
+        "reference": null
+      },
+      {
+        "path": "size.icon.small",
+        "name": "Size / Icon / Small",
+        "variable": "--ol8-size-icon-small",
+        "value": "18px",
+        "reference": null
+      },
+      {
+        "path": "size.icon.standard",
+        "name": "Size / Icon / Standard",
+        "variable": "--ol8-size-icon-standard",
+        "value": "24px",
+        "reference": null
+      },
+      {
+        "path": "size.icon.micro",
+        "name": "Size / Icon / Micro",
+        "variable": "--ol8-size-icon-micro",
+        "value": "9px",
+        "reference": null
+      },
+      {
+        "path": "size.icon.compact",
+        "name": "Size / Icon / Compact",
+        "variable": "--ol8-size-icon-compact",
+        "value": "12px",
+        "reference": null
+      }
+    ],
+    "component": [
+      {
+        "path": "component.choice.chip.terminal",
+        "name": "Component / Choice / Chip / Terminal",
+        "variable": "--ol8-component-choice-chip-terminal",
+        "value": "12px",
+        "reference": null
+      },
+      {
+        "path": "component.choice.chip.height.standard",
+        "name": "Component / Choice / Chip / Height / Standard",
+        "variable": "--ol8-component-choice-chip-height-standard",
+        "value": "36px",
+        "reference": null
+      },
+      {
+        "path": "component.choice.chip.target.standard",
+        "name": "Component / Choice / Chip / Target / Standard",
+        "variable": "--ol8-component-choice-chip-target-standard",
+        "value": "48px",
+        "reference": null
+      },
+      {
+        "path": "component.choice.chip.rail.inset.standard",
+        "name": "Component / Choice / Chip / Rail / Inset / Standard",
+        "variable": "--ol8-component-choice-chip-rail-inset-standard",
+        "value": "12px",
+        "reference": null
+      },
+      {
+        "path": "component.button.gap.compact",
+        "name": "Component / Button / Gap / Compact",
+        "variable": "--ol8-component-button-gap-compact",
+        "value": "6px",
+        "reference": null
+      },
+      {
+        "path": "component.button.gap.comfortable",
+        "name": "Component / Button / Gap / Comfortable",
+        "variable": "--ol8-component-button-gap-comfortable",
+        "value": "9px",
+        "reference": null
+      },
+      {
+        "path": "component.button.paddinginline.compact",
+        "name": "Component / Button / Paddinginline / Compact",
+        "variable": "--ol8-component-button-paddinginline-compact",
+        "value": "12px",
+        "reference": null
+      },
+      {
+        "path": "component.button.paddinginline.standard",
+        "name": "Component / Button / Paddinginline / Standard",
+        "variable": "--ol8-component-button-paddinginline-standard",
+        "value": "15px",
+        "reference": null
+      },
+      {
+        "path": "component.button.paddinginline.comfortable",
+        "name": "Component / Button / Paddinginline / Comfortable",
+        "variable": "--ol8-component-button-paddinginline-comfortable",
+        "value": "18px",
+        "reference": null
+      },
+      {
+        "path": "component.button.paddinginline.large",
+        "name": "Component / Button / Paddinginline / Large",
+        "variable": "--ol8-component-button-paddinginline-large",
+        "value": "24px",
+        "reference": null
+      },
+      {
+        "path": "component.button.height.compact",
+        "name": "Component / Button / Height / Compact",
+        "variable": "--ol8-component-button-height-compact",
+        "value": "36px",
+        "reference": null
+      },
+      {
+        "path": "component.button.height.standard",
+        "name": "Component / Button / Height / Standard",
+        "variable": "--ol8-component-button-height-standard",
+        "value": "42px",
+        "reference": null
+      },
+      {
+        "path": "component.button.height.comfortable",
+        "name": "Component / Button / Height / Comfortable",
+        "variable": "--ol8-component-button-height-comfortable",
+        "value": "48px",
+        "reference": null
+      },
+      {
+        "path": "component.button.height.large",
+        "name": "Component / Button / Height / Large",
+        "variable": "--ol8-component-button-height-large",
+        "value": "60px",
+        "reference": null
+      },
+      {
+        "path": "component.button.radius.compact",
+        "name": "Component / Button / Radius / Compact",
+        "variable": "--ol8-component-button-radius-compact",
+        "value": "6px",
+        "reference": null
+      },
+      {
+        "path": "component.button.radius.standard",
+        "name": "Component / Button / Radius / Standard",
+        "variable": "--ol8-component-button-radius-standard",
+        "value": "9px",
+        "reference": null
+      },
+      {
+        "path": "component.button.radius.comfortable",
+        "name": "Component / Button / Radius / Comfortable",
+        "variable": "--ol8-component-button-radius-comfortable",
+        "value": "12px",
+        "reference": null
+      },
+      {
+        "path": "component.button.radius.large",
+        "name": "Component / Button / Radius / Large",
+        "variable": "--ol8-component-button-radius-large",
+        "value": "12px",
+        "reference": null
+      },
+      {
+        "path": "component.button.secondaryboundary",
+        "name": "Component / Button / Secondaryboundary",
+        "variable": "--ol8-component-button-secondaryboundary",
+        "value": "2px",
+        "reference": null
+      },
+      {
+        "path": "component.icon.stroke",
+        "name": "Component / Icon / Stroke",
+        "variable": "--ol8-component-icon-stroke",
+        "value": "1.8",
+        "reference": null
+      },
+      {
+        "path": "component.iconbutton.box.compact",
+        "name": "Component / Iconbutton / Box / Compact",
+        "variable": "--ol8-component-iconbutton-box-compact",
+        "value": "36px",
+        "reference": null
+      },
+      {
+        "path": "component.iconbutton.box.standard",
+        "name": "Component / Iconbutton / Box / Standard",
+        "variable": "--ol8-component-iconbutton-box-standard",
+        "value": "42px",
+        "reference": null
+      },
+      {
+        "path": "component.iconbutton.box.comfortable",
+        "name": "Component / Iconbutton / Box / Comfortable",
+        "variable": "--ol8-component-iconbutton-box-comfortable",
+        "value": "48px",
+        "reference": null
+      },
+      {
+        "path": "component.iconbutton.box.large",
+        "name": "Component / Iconbutton / Box / Large",
+        "variable": "--ol8-component-iconbutton-box-large",
+        "value": "60px",
+        "reference": null
+      },
+      {
+        "path": "component.iconbutton.target.compact",
+        "name": "Component / Iconbutton / Target / Compact",
+        "variable": "--ol8-component-iconbutton-target-compact",
+        "value": "48px",
+        "reference": null
+      },
+      {
+        "path": "component.iconbutton.target.standard",
+        "name": "Component / Iconbutton / Target / Standard",
+        "variable": "--ol8-component-iconbutton-target-standard",
+        "value": "48px",
+        "reference": null
+      },
+      {
+        "path": "component.iconbutton.target.comfortable",
+        "name": "Component / Iconbutton / Target / Comfortable",
+        "variable": "--ol8-component-iconbutton-target-comfortable",
+        "value": "48px",
+        "reference": null
+      },
+      {
+        "path": "component.iconbutton.target.large",
+        "name": "Component / Iconbutton / Target / Large",
+        "variable": "--ol8-component-iconbutton-target-large",
+        "value": "60px",
+        "reference": null
+      },
+      {
+        "path": "component.iconbutton.radius.compact",
+        "name": "Component / Iconbutton / Radius / Compact",
+        "variable": "--ol8-component-iconbutton-radius-compact",
+        "value": "9px",
+        "reference": null
+      },
+      {
+        "path": "component.iconbutton.radius.standard",
+        "name": "Component / Iconbutton / Radius / Standard",
+        "variable": "--ol8-component-iconbutton-radius-standard",
+        "value": "12px",
+        "reference": null
+      },
+      {
+        "path": "component.iconbutton.radius.comfortable",
+        "name": "Component / Iconbutton / Radius / Comfortable",
+        "variable": "--ol8-component-iconbutton-radius-comfortable",
+        "value": "12px",
+        "reference": null
+      },
+      {
+        "path": "component.iconbutton.radius.large",
+        "name": "Component / Iconbutton / Radius / Large",
+        "variable": "--ol8-component-iconbutton-radius-large",
+        "value": "18px",
+        "reference": null
+      },
+      {
+        "path": "component.iconbutton.artwork.compact",
+        "name": "Component / Iconbutton / Artwork / Compact",
+        "variable": "--ol8-component-iconbutton-artwork-compact",
+        "value": "18px",
+        "reference": null
+      },
+      {
+        "path": "component.iconbutton.artwork.standard",
+        "name": "Component / Iconbutton / Artwork / Standard",
+        "variable": "--ol8-component-iconbutton-artwork-standard",
+        "value": "18px",
+        "reference": null
+      },
+      {
+        "path": "component.iconbutton.artwork.comfortable",
+        "name": "Component / Iconbutton / Artwork / Comfortable",
+        "variable": "--ol8-component-iconbutton-artwork-comfortable",
+        "value": "24px",
+        "reference": null
+      },
+      {
+        "path": "component.iconbutton.artwork.large",
+        "name": "Component / Iconbutton / Artwork / Large",
+        "variable": "--ol8-component-iconbutton-artwork-large",
+        "value": "24px",
+        "reference": null
+      },
+      {
+        "path": "component.iconbutton.pressedscrim",
+        "name": "Component / Iconbutton / Pressedscrim",
+        "variable": "--ol8-component-iconbutton-pressedscrim",
+        "value": "rgba(0,0,0,0.24)",
+        "reference": null
+      },
+      {
+        "path": "component.checkbox.radius.compact",
+        "name": "Component / Checkbox / Radius / Compact",
+        "variable": "--ol8-component-checkbox-radius-compact",
+        "value": "3px",
+        "reference": null
+      },
+      {
+        "path": "component.checkbox.radius.comfortable",
+        "name": "Component / Checkbox / Radius / Comfortable",
+        "variable": "--ol8-component-checkbox-radius-comfortable",
+        "value": "6px",
+        "reference": null
+      },
+      {
+        "path": "component.checkbox.boundary",
+        "name": "Component / Checkbox / Boundary",
+        "variable": "--ol8-component-checkbox-boundary",
+        "value": "1.8px",
+        "reference": null
+      },
+      {
+        "path": "component.radio.boundary",
+        "name": "Component / Radio / Boundary",
+        "variable": "--ol8-component-radio-boundary",
+        "value": "1.8px",
+        "reference": null
+      },
+      {
+        "path": "component.radio.dot.compact",
+        "name": "Component / Radio / Dot / Compact",
+        "variable": "--ol8-component-radio-dot-compact",
+        "value": "9px",
+        "reference": null
+      },
+      {
+        "path": "component.radio.dot.comfortable",
+        "name": "Component / Radio / Dot / Comfortable",
+        "variable": "--ol8-component-radio-dot-comfortable",
+        "value": "12px",
+        "reference": null
+      },
+      {
+        "path": "component.switch.trackwidth.compact",
+        "name": "Component / Switch / Trackwidth / Compact",
+        "variable": "--ol8-component-switch-trackwidth-compact",
+        "value": "36px",
+        "reference": null
+      },
+      {
+        "path": "component.switch.trackwidth.comfortable",
+        "name": "Component / Switch / Trackwidth / Comfortable",
+        "variable": "--ol8-component-switch-trackwidth-comfortable",
+        "value": "48px",
+        "reference": null
+      },
+      {
+        "path": "component.switch.trackheight.compact",
+        "name": "Component / Switch / Trackheight / Compact",
+        "variable": "--ol8-component-switch-trackheight-compact",
+        "value": "18px",
+        "reference": null
+      },
+      {
+        "path": "component.switch.trackheight.comfortable",
+        "name": "Component / Switch / Trackheight / Comfortable",
+        "variable": "--ol8-component-switch-trackheight-comfortable",
+        "value": "24px",
+        "reference": null
+      },
+      {
+        "path": "component.switch.thumb.compact",
+        "name": "Component / Switch / Thumb / Compact",
+        "variable": "--ol8-component-switch-thumb-compact",
+        "value": "12px",
+        "reference": null
+      },
+      {
+        "path": "component.switch.thumb.comfortable",
+        "name": "Component / Switch / Thumb / Comfortable",
+        "variable": "--ol8-component-switch-thumb-comfortable",
+        "value": "18px",
+        "reference": null
+      },
+      {
+        "path": "component.switch.inset",
+        "name": "Component / Switch / Inset",
+        "variable": "--ol8-component-switch-inset",
+        "value": "3px",
+        "reference": null
+      },
+      {
+        "path": "component.choice.optical.stroke",
+        "name": "Component / Choice / Optical / Stroke",
+        "variable": "--ol8-component-choice-optical-stroke",
+        "value": "1.8px",
+        "reference": null
+      },
+      {
+        "path": "component.choice.mixed.bar.width",
+        "name": "Component / Choice / Mixed / Bar / Width",
+        "variable": "--ol8-component-choice-mixed-bar-width",
+        "value": "9px",
+        "reference": null
+      },
+      {
+        "path": "component.choice.mixed.bar.height",
+        "name": "Component / Choice / Mixed / Bar / Height",
+        "variable": "--ol8-component-choice-mixed-bar-height",
+        "value": "1.8px",
+        "reference": null
+      },
+      {
+        "path": "component.choice.gap.compact",
+        "name": "Component / Choice / Gap / Compact",
+        "variable": "--ol8-component-choice-gap-compact",
+        "value": "6px",
+        "reference": null
+      },
+      {
+        "path": "component.choice.gap.standard",
+        "name": "Component / Choice / Gap / Standard",
+        "variable": "--ol8-component-choice-gap-standard",
+        "value": "9px",
+        "reference": null
+      },
+      {
+        "path": "component.choice.rowminimum",
+        "name": "Component / Choice / Rowminimum",
+        "variable": "--ol8-component-choice-rowminimum",
+        "value": "48px",
+        "reference": null
+      },
+      {
+        "path": "component.selectionoption.inset.standard",
+        "name": "Component / Selectionoption / Inset / Standard",
+        "variable": "--ol8-component-selectionoption-inset-standard",
+        "value": "12px",
+        "reference": null
+      },
+      {
+        "path": "component.selectionoption.inset.large",
+        "name": "Component / Selectionoption / Inset / Large",
+        "variable": "--ol8-component-selectionoption-inset-large",
+        "value": "15px",
+        "reference": null
+      },
+      {
+        "path": "component.selectionoption.minimum.standard",
+        "name": "Component / Selectionoption / Minimum / Standard",
+        "variable": "--ol8-component-selectionoption-minimum-standard",
+        "value": "48px",
+        "reference": null
+      },
+      {
+        "path": "component.selectionoption.minimum.large",
+        "name": "Component / Selectionoption / Minimum / Large",
+        "variable": "--ol8-component-selectionoption-minimum-large",
+        "value": "60px",
+        "reference": null
+      }
+    ]
+  },
+  "modes": {
+    "colorScheme": {
+      "dark": [
+        {
+          "path": "color.background.canvas",
+          "name": "Color / Background / Canvas",
+          "variable": "--ol8-color-background-canvas",
+          "value": "#151817",
+          "reference": "color.neutral.930"
+        },
+        {
+          "path": "color.background.subtle",
+          "name": "Color / Background / Subtle",
+          "variable": "--ol8-color-background-subtle",
+          "value": "#20201e",
+          "reference": "color.neutral.840"
+        },
+        {
+          "path": "color.background.inverse",
+          "name": "Color / Background / Inverse",
+          "variable": "--ol8-color-background-inverse",
+          "value": "#fcfaf3",
+          "reference": "color.neutral.030"
+        },
+        {
+          "path": "color.surface.default",
+          "name": "Color / Surface / Default",
+          "variable": "--ol8-color-surface-default",
+          "value": "#20201e",
+          "reference": "color.neutral.840"
+        },
+        {
+          "path": "color.surface.raised",
+          "name": "Color / Surface / Raised",
+          "variable": "--ol8-color-surface-raised",
+          "value": "#302d29",
+          "reference": "color.neutral.720"
+        },
+        {
+          "path": "color.surface.sunken",
+          "name": "Color / Surface / Sunken",
+          "variable": "--ol8-color-surface-sunken",
+          "value": "#151817",
+          "reference": "color.neutral.930"
+        },
+        {
+          "path": "color.surface.selected",
+          "name": "Color / Surface / Selected",
+          "variable": "--ol8-color-surface-selected",
+          "value": "#9bb3ff",
+          "reference": "color.primary.120"
+        },
+        {
+          "path": "color.surface.disabled",
+          "name": "Color / Surface / Disabled",
+          "variable": "--ol8-color-surface-disabled",
+          "value": "#1a2a59",
+          "reference": "color.blue.840"
+        },
+        {
+          "path": "color.text.primary",
+          "name": "Color / Text / Primary",
+          "variable": "--ol8-color-text-primary",
+          "value": "#fcfaf3",
+          "reference": "color.neutral.030"
+        },
+        {
+          "path": "color.text.secondary",
+          "name": "Color / Text / Secondary",
+          "variable": "--ol8-color-text-secondary",
+          "value": "#d2c8b6",
+          "reference": "color.neutral.120"
+        },
+        {
+          "path": "color.text.muted",
+          "name": "Color / Text / Muted",
+          "variable": "--ol8-color-text-muted",
+          "value": "#b0a593",
+          "reference": "color.neutral.240"
+        },
+        {
+          "path": "color.text.disabled",
+          "name": "Color / Text / Disabled",
+          "variable": "--ol8-color-text-disabled",
+          "value": "#b0a593",
+          "reference": "color.neutral.240"
+        },
+        {
+          "path": "color.text.inverse",
+          "name": "Color / Text / Inverse",
+          "variable": "--ol8-color-text-inverse",
+          "value": "#151817",
+          "reference": "color.neutral.930"
+        },
+        {
+          "path": "color.text.link",
+          "name": "Color / Text / Link",
+          "variable": "--ol8-color-text-link",
+          "value": "#9bb3ff",
+          "reference": "color.primary.120"
+        },
+        {
+          "path": "color.icon.primary",
+          "name": "Color / Icon / Primary",
+          "variable": "--ol8-color-icon-primary",
+          "value": "#fcfaf3",
+          "reference": "color.neutral.030"
+        },
+        {
+          "path": "color.icon.secondary",
+          "name": "Color / Icon / Secondary",
+          "variable": "--ol8-color-icon-secondary",
+          "value": "#d2c8b6",
+          "reference": "color.neutral.120"
+        },
+        {
+          "path": "color.icon.muted",
+          "name": "Color / Icon / Muted",
+          "variable": "--ol8-color-icon-muted",
+          "value": "#b0a593",
+          "reference": "color.neutral.240"
+        },
+        {
+          "path": "color.icon.disabled",
+          "name": "Color / Icon / Disabled",
+          "variable": "--ol8-color-icon-disabled",
+          "value": "#897f70",
+          "reference": "color.neutral.360"
+        },
+        {
+          "path": "color.icon.inverse",
+          "name": "Color / Icon / Inverse",
+          "variable": "--ol8-color-icon-inverse",
+          "value": "#151817",
+          "reference": "color.neutral.930"
+        },
+        {
+          "path": "color.border.subtle",
+          "name": "Color / Border / Subtle",
+          "variable": "--ol8-color-border-subtle",
+          "value": "#302d29",
+          "reference": "color.neutral.720"
+        },
+        {
+          "path": "color.border.default",
+          "name": "Color / Border / Default",
+          "variable": "--ol8-color-border-default",
+          "value": "#b0a593",
+          "reference": "color.neutral.240"
+        },
+        {
+          "path": "color.border.strong",
+          "name": "Color / Border / Strong",
+          "variable": "--ol8-color-border-strong",
+          "value": "#d2c8b6",
+          "reference": "color.neutral.120"
+        },
+        {
+          "path": "color.border.disabled",
+          "name": "Color / Border / Disabled",
+          "variable": "--ol8-color-border-disabled",
+          "value": "#b0a593",
+          "reference": "color.neutral.240"
+        },
+        {
+          "path": "color.focus.inner",
+          "name": "Color / Focus / Inner",
+          "variable": "--ol8-color-focus-inner",
+          "value": "#101b3a",
+          "reference": "color.primary.930"
+        },
+        {
+          "path": "color.focus.outer",
+          "name": "Color / Focus / Outer",
+          "variable": "--ol8-color-focus-outer",
+          "value": "#f2f5ff",
+          "reference": "color.primary.030"
+        },
+        {
+          "path": "color.actionprimary.default",
+          "name": "Color / Actionprimary / Default",
+          "variable": "--ol8-color-actionprimary-default",
+          "value": "#9bb3ff",
+          "reference": "color.primary.120"
+        },
+        {
+          "path": "color.actionprimary.hover",
+          "name": "Color / Actionprimary / Hover",
+          "variable": "--ol8-color-actionprimary-hover",
+          "value": "#c4d2ff",
+          "reference": "color.primary.090"
+        },
+        {
+          "path": "color.actionprimary.pressed",
+          "name": "Color / Actionprimary / Pressed",
+          "variable": "--ol8-color-actionprimary-pressed",
+          "value": "#e2e9ff",
+          "reference": "color.primary.060"
+        },
+        {
+          "path": "color.actionprimary.content",
+          "name": "Color / Actionprimary / Content",
+          "variable": "--ol8-color-actionprimary-content",
+          "value": "#101b3a",
+          "reference": "color.primary.930"
+        },
+        {
+          "path": "color.actionprimary.disabled",
+          "name": "Color / Actionprimary / Disabled",
+          "variable": "--ol8-color-actionprimary-disabled",
+          "value": "#1a2a59",
+          "reference": "color.blue.840"
+        },
+        {
+          "path": "color.actionprimary.disabledcontent",
+          "name": "Color / Actionprimary / Disabledcontent",
+          "variable": "--ol8-color-actionprimary-disabledcontent",
+          "value": "#b0a593",
+          "reference": "color.neutral.240"
+        },
+        {
+          "path": "color.actionsecondary.surfacedefault",
+          "name": "Color / Actionsecondary / Surfacedefault",
+          "variable": "--ol8-color-actionsecondary-surfacedefault",
+          "value": "#00000000",
+          "reference": null
+        },
+        {
+          "path": "color.actionsecondary.surfacehover",
+          "name": "Color / Actionsecondary / Surfacehover",
+          "variable": "--ol8-color-actionsecondary-surfacehover",
+          "value": "#101b3a",
+          "reference": "color.primary.930"
+        },
+        {
+          "path": "color.actionsecondary.surfacepressed",
+          "name": "Color / Actionsecondary / Surfacepressed",
+          "variable": "--ol8-color-actionsecondary-surfacepressed",
+          "value": "#1a2a59",
+          "reference": "color.primary.840"
+        },
+        {
+          "path": "color.actionsecondary.surfacedisabled",
+          "name": "Color / Actionsecondary / Surfacedisabled",
+          "variable": "--ol8-color-actionsecondary-surfacedisabled",
+          "value": "#00000000",
+          "reference": null
+        },
+        {
+          "path": "color.actionsecondary.contentdefault",
+          "name": "Color / Actionsecondary / Contentdefault",
+          "variable": "--ol8-color-actionsecondary-contentdefault",
+          "value": "#9bb3ff",
+          "reference": "color.primary.120"
+        },
+        {
+          "path": "color.actionsecondary.contenthover",
+          "name": "Color / Actionsecondary / Contenthover",
+          "variable": "--ol8-color-actionsecondary-contenthover",
+          "value": "#9bb3ff",
+          "reference": "color.primary.120"
+        },
+        {
+          "path": "color.actionsecondary.contentpressed",
+          "name": "Color / Actionsecondary / Contentpressed",
+          "variable": "--ol8-color-actionsecondary-contentpressed",
+          "value": "#c4d2ff",
+          "reference": "color.primary.090"
+        },
+        {
+          "path": "color.actionsecondary.contentdisabled",
+          "name": "Color / Actionsecondary / Contentdisabled",
+          "variable": "--ol8-color-actionsecondary-contentdisabled",
+          "value": "#b0a593",
+          "reference": "color.neutral.240"
+        },
+        {
+          "path": "color.actionquiet.surfacedefault",
+          "name": "Color / Actionquiet / Surfacedefault",
+          "variable": "--ol8-color-actionquiet-surfacedefault",
+          "value": "#00000000",
+          "reference": null
+        },
+        {
+          "path": "color.actionquiet.surfacehover",
+          "name": "Color / Actionquiet / Surfacehover",
+          "variable": "--ol8-color-actionquiet-surfacehover",
+          "value": "#101b3a",
+          "reference": "color.primary.930"
+        },
+        {
+          "path": "color.actionquiet.surfacepressed",
+          "name": "Color / Actionquiet / Surfacepressed",
+          "variable": "--ol8-color-actionquiet-surfacepressed",
+          "value": "#1a2a59",
+          "reference": "color.primary.840"
+        },
+        {
+          "path": "color.actionquiet.surfacedisabled",
+          "name": "Color / Actionquiet / Surfacedisabled",
+          "variable": "--ol8-color-actionquiet-surfacedisabled",
+          "value": "#00000000",
+          "reference": null
+        },
+        {
+          "path": "color.actionquiet.contentdefault",
+          "name": "Color / Actionquiet / Contentdefault",
+          "variable": "--ol8-color-actionquiet-contentdefault",
+          "value": "#9bb3ff",
+          "reference": "color.primary.120"
+        },
+        {
+          "path": "color.actionquiet.contenthover",
+          "name": "Color / Actionquiet / Contenthover",
+          "variable": "--ol8-color-actionquiet-contenthover",
+          "value": "#9bb3ff",
+          "reference": "color.primary.120"
+        },
+        {
+          "path": "color.actionquiet.contentpressed",
+          "name": "Color / Actionquiet / Contentpressed",
+          "variable": "--ol8-color-actionquiet-contentpressed",
+          "value": "#c4d2ff",
+          "reference": "color.primary.090"
+        },
+        {
+          "path": "color.actionquiet.contentdisabled",
+          "name": "Color / Actionquiet / Contentdisabled",
+          "variable": "--ol8-color-actionquiet-contentdisabled",
+          "value": "#b0a593",
+          "reference": "color.neutral.240"
+        },
+        {
+          "path": "color.actiondestructive.default",
+          "name": "Color / Actiondestructive / Default",
+          "variable": "--ol8-color-actiondestructive-default",
+          "value": "#f99a92",
+          "reference": "color.red.120"
+        },
+        {
+          "path": "color.actiondestructive.hover",
+          "name": "Color / Actiondestructive / Hover",
+          "variable": "--ol8-color-actiondestructive-hover",
+          "value": "#ffc8c4",
+          "reference": "color.red.090"
+        },
+        {
+          "path": "color.actiondestructive.pressed",
+          "name": "Color / Actiondestructive / Pressed",
+          "variable": "--ol8-color-actiondestructive-pressed",
+          "value": "#ffe2e0",
+          "reference": "color.red.060"
+        },
+        {
+          "path": "color.actiondestructive.content",
+          "name": "Color / Actiondestructive / Content",
+          "variable": "--ol8-color-actiondestructive-content",
+          "value": "#380f0d",
+          "reference": "color.red.930"
+        },
+        {
+          "path": "color.actiondestructive.disabled",
+          "name": "Color / Actiondestructive / Disabled",
+          "variable": "--ol8-color-actiondestructive-disabled",
+          "value": "#1a2a59",
+          "reference": "color.blue.840"
+        },
+        {
+          "path": "color.actiondestructive.disabledcontent",
+          "name": "Color / Actiondestructive / Disabledcontent",
+          "variable": "--ol8-color-actiondestructive-disabledcontent",
+          "value": "#b0a593",
+          "reference": "color.neutral.240"
+        },
+        {
+          "path": "color.feedbackinformative.surface",
+          "name": "Color / Feedbackinformative / Surface",
+          "variable": "--ol8-color-feedbackinformative-surface",
+          "value": "#75d3dd",
+          "reference": "color.cyan.120"
+        },
+        {
+          "path": "color.feedbackinformative.content",
+          "name": "Color / Feedbackinformative / Content",
+          "variable": "--ol8-color-feedbackinformative-content",
+          "value": "#0a252d",
+          "reference": "color.cyan.930"
+        },
+        {
+          "path": "color.feedbackinformative.inlinecontent",
+          "name": "Color / Feedbackinformative / Inlinecontent",
+          "variable": "--ol8-color-feedbackinformative-inlinecontent",
+          "value": "#9bb3ff",
+          "reference": "color.blue.120"
+        },
+        {
+          "path": "color.feedbackpositive.surface",
+          "name": "Color / Feedbackpositive / Surface",
+          "variable": "--ol8-color-feedbackpositive-surface",
+          "value": "#8cd2aa",
+          "reference": "color.green.120"
+        },
+        {
+          "path": "color.feedbackpositive.content",
+          "name": "Color / Feedbackpositive / Content",
+          "variable": "--ol8-color-feedbackpositive-content",
+          "value": "#0c2418",
+          "reference": "color.green.930"
+        },
+        {
+          "path": "color.feedbackpositive.inlinecontent",
+          "name": "Color / Feedbackpositive / Inlinecontent",
+          "variable": "--ol8-color-feedbackpositive-inlinecontent",
+          "value": "#8cd2aa",
+          "reference": "color.green.120"
+        },
+        {
+          "path": "color.feedbackcaution.surface",
+          "name": "Color / Feedbackcaution / Surface",
+          "variable": "--ol8-color-feedbackcaution-surface",
+          "value": "#ffd13d",
+          "reference": "color.yellow.120"
+        },
+        {
+          "path": "color.feedbackcaution.content",
+          "name": "Color / Feedbackcaution / Content",
+          "variable": "--ol8-color-feedbackcaution-content",
+          "value": "#2b1a08",
+          "reference": "color.yellow.930"
+        },
+        {
+          "path": "color.feedbackcaution.inlinecontent",
+          "name": "Color / Feedbackcaution / Inlinecontent",
+          "variable": "--ol8-color-feedbackcaution-inlinecontent",
+          "value": "#ffd13d",
+          "reference": "color.yellow.120"
+        },
+        {
+          "path": "color.feedbackcritical.surface",
+          "name": "Color / Feedbackcritical / Surface",
+          "variable": "--ol8-color-feedbackcritical-surface",
+          "value": "#f99a92",
+          "reference": "color.red.120"
+        },
+        {
+          "path": "color.feedbackcritical.content",
+          "name": "Color / Feedbackcritical / Content",
+          "variable": "--ol8-color-feedbackcritical-content",
+          "value": "#380f0d",
+          "reference": "color.red.930"
+        },
+        {
+          "path": "color.feedbackcritical.inlinecontent",
+          "name": "Color / Feedbackcritical / Inlinecontent",
+          "variable": "--ol8-color-feedbackcritical-inlinecontent",
+          "value": "#f99a92",
+          "reference": "color.red.120"
+        },
+        {
+          "path": "color.selection.surface",
+          "name": "Color / Selection / Surface",
+          "variable": "--ol8-color-selection-surface",
+          "value": "#9bb3ff",
+          "reference": "color.primary.120"
+        },
+        {
+          "path": "color.selection.content",
+          "name": "Color / Selection / Content",
+          "variable": "--ol8-color-selection-content",
+          "value": "#101b3a",
+          "reference": "color.primary.930"
+        },
+        {
+          "path": "material.control.gem..primary.start",
+          "name": "Material / Control / Gem / Primary / Start",
+          "variable": "--ol8-material-control-gem--primary-start",
+          "value": "#2c438b",
+          "reference": "color.primary.600"
+        },
+        {
+          "path": "material.control.gem..primary.mid",
+          "name": "Material / Control / Gem / Primary / Mid",
+          "variable": "--ol8-material-control-gem--primary-mid",
+          "value": "#23366f",
+          "reference": "color.primary.720"
+        },
+        {
+          "path": "material.control.gem..primary.end",
+          "name": "Material / Control / Gem / Primary / End",
+          "variable": "--ol8-material-control-gem--primary-end",
+          "value": "#1a2a59",
+          "reference": "color.primary.840"
+        },
+        {
+          "path": "material.control.gem..primary.hover.start",
+          "name": "Material / Control / Gem / Primary / Hover / Start",
+          "variable": "--ol8-material-control-gem--primary-hover-start",
+          "value": "#23366f",
+          "reference": "color.primary.720"
+        },
+        {
+          "path": "material.control.gem..primary.hover.mid",
+          "name": "Material / Control / Gem / Primary / Hover / Mid",
+          "variable": "--ol8-material-control-gem--primary-hover-mid",
+          "value": "#1a2a59",
+          "reference": "color.primary.840"
+        },
+        {
+          "path": "material.control.gem..primary.hover.end",
+          "name": "Material / Control / Gem / Primary / Hover / End",
+          "variable": "--ol8-material-control-gem--primary-hover-end",
+          "value": "#101b3a",
+          "reference": "color.primary.930"
+        },
+        {
+          "path": "material.gem.color.quiet.environmentalface",
+          "name": "Material / Gem / Color / Quiet / Environmentalface",
+          "variable": "--ol8-material-gem-color-quiet-environmentalface",
+          "value": "#1518177a",
+          "reference": null
+        },
+        {
+          "path": "material.gem.color.quiet.stabilizedface",
+          "name": "Material / Gem / Color / Quiet / Stabilizedface",
+          "variable": "--ol8-material-gem-color-quiet-stabilizedface",
+          "value": "#20201eb8",
+          "reference": null
+        },
+        {
+          "path": "material.gem.color.quiet.opaqueequivalent",
+          "name": "Material / Gem / Color / Quiet / Opaqueequivalent",
+          "variable": "--ol8-material-gem-color-quiet-opaqueequivalent",
+          "value": "#20201e",
+          "reference": "color.neutral.840"
+        },
+        {
+          "path": "material.gem.color.cutedge.high",
+          "name": "Material / Gem / Color / Cutedge / High",
+          "variable": "--ol8-material-gem-color-cutedge-high",
+          "value": "#d2c8b66b",
+          "reference": null
+        },
+        {
+          "path": "material.gem.color.cutedge.mid",
+          "name": "Material / Gem / Color / Cutedge / Mid",
+          "variable": "--ol8-material-gem-color-cutedge-mid",
+          "value": "#9bb3ff33",
+          "reference": null
+        },
+        {
+          "path": "material.gem.color.cutedge.low",
+          "name": "Material / Gem / Color / Cutedge / Low",
+          "variable": "--ol8-material-gem-color-cutedge-low",
+          "value": "#d2c8b608",
+          "reference": null
+        },
+        {
+          "path": "material.gem.color.cutedge.shadow",
+          "name": "Material / Gem / Color / Cutedge / Shadow",
+          "variable": "--ol8-material-gem-color-cutedge-shadow",
+          "value": "#0a252d5c",
+          "reference": null
+        },
+        {
+          "path": "material.gem.color.innerthincut.face",
+          "name": "Material / Gem / Color / Innerthincut / Face",
+          "variable": "--ol8-material-gem-color-innerthincut-face",
+          "value": "#20201eb8",
+          "reference": null
+        },
+        {
+          "path": "material.gem.color.innerthincut.high",
+          "name": "Material / Gem / Color / Innerthincut / High",
+          "variable": "--ol8-material-gem-color-innerthincut-high",
+          "value": "#d2c8b645",
+          "reference": null
+        },
+        {
+          "path": "material.gem.color.innerthincut.mid",
+          "name": "Material / Gem / Color / Innerthincut / Mid",
+          "variable": "--ol8-material-gem-color-innerthincut-mid",
+          "value": "#9bb3ff1f",
+          "reference": null
+        },
+        {
+          "path": "material.gem.color.innerthincut.low",
+          "name": "Material / Gem / Color / Innerthincut / Low",
+          "variable": "--ol8-material-gem-color-innerthincut-low",
+          "value": "#d2c8b608",
+          "reference": null
+        },
+        {
+          "path": "material.gem.color.facet.cool",
+          "name": "Material / Gem / Color / Facet / Cool",
+          "variable": "--ol8-material-gem-color-facet-cool",
+          "value": "#9bb3ff24",
+          "reference": null
+        },
+        {
+          "path": "material.gem.color.facet.warm",
+          "name": "Material / Gem / Color / Facet / Warm",
+          "variable": "--ol8-material-gem-color-facet-warm",
+          "value": "#ffa54d17",
+          "reference": null
+        }
+      ]
+    },
+    "primaryFamily": {
+      "blue": [
+        {
+          "path": "color.primary.030",
+          "name": "Color / Primary / 030",
+          "variable": "--ol8-color-primary-030",
+          "value": "#f2f5ff",
+          "reference": "color.blue.030"
+        },
+        {
+          "path": "color.primary.060",
+          "name": "Color / Primary / 060",
+          "variable": "--ol8-color-primary-060",
+          "value": "#e2e9ff",
+          "reference": "color.blue.060"
+        },
+        {
+          "path": "color.primary.090",
+          "name": "Color / Primary / 090",
+          "variable": "--ol8-color-primary-090",
+          "value": "#c4d2ff",
+          "reference": "color.blue.090"
+        },
+        {
+          "path": "color.primary.120",
+          "name": "Color / Primary / 120",
+          "variable": "--ol8-color-primary-120",
+          "value": "#9bb3ff",
+          "reference": "color.blue.120"
+        },
+        {
+          "path": "color.primary.240",
+          "name": "Color / Primary / 240",
+          "variable": "--ol8-color-primary-240",
+          "value": "#6e8fef",
+          "reference": "color.blue.240"
+        },
+        {
+          "path": "color.primary.360",
+          "name": "Color / Primary / 360",
+          "variable": "--ol8-color-primary-360",
+          "value": "#4d6dd1",
+          "reference": "color.blue.360"
+        },
+        {
+          "path": "color.primary.480",
+          "name": "Color / Primary / 480",
+          "variable": "--ol8-color-primary-480",
+          "value": "#3854ae",
+          "reference": "color.blue.480"
+        },
+        {
+          "path": "color.primary.600",
+          "name": "Color / Primary / 600",
+          "variable": "--ol8-color-primary-600",
+          "value": "#2c438b",
+          "reference": "color.blue.600"
+        },
+        {
+          "path": "color.primary.720",
+          "name": "Color / Primary / 720",
+          "variable": "--ol8-color-primary-720",
+          "value": "#23366f",
+          "reference": "color.blue.720"
+        },
+        {
+          "path": "color.primary.840",
+          "name": "Color / Primary / 840",
+          "variable": "--ol8-color-primary-840",
+          "value": "#1a2a59",
+          "reference": "color.blue.840"
+        },
+        {
+          "path": "color.primary.930",
+          "name": "Color / Primary / 930",
+          "variable": "--ol8-color-primary-930",
+          "value": "#101b3a",
+          "reference": "color.blue.930"
+        }
+      ],
+      "orange": [
+        {
+          "path": "color.primary.030",
+          "name": "Color / Primary / 030",
+          "variable": "--ol8-color-primary-030",
+          "value": "#fff5ea",
+          "reference": "color.orange.030"
+        },
+        {
+          "path": "color.primary.060",
+          "name": "Color / Primary / 060",
+          "variable": "--ol8-color-primary-060",
+          "value": "#ffe7cb",
+          "reference": "color.orange.060"
+        },
+        {
+          "path": "color.primary.090",
+          "name": "Color / Primary / 090",
+          "variable": "--ol8-color-primary-090",
+          "value": "#ffc98f",
+          "reference": "color.orange.090"
+        },
+        {
+          "path": "color.primary.120",
+          "name": "Color / Primary / 120",
+          "variable": "--ol8-color-primary-120",
+          "value": "#ffa54d",
+          "reference": "color.orange.120"
+        },
+        {
+          "path": "color.primary.240",
+          "name": "Color / Primary / 240",
+          "variable": "--ol8-color-primary-240",
+          "value": "#f47b20",
+          "reference": "color.orange.240"
+        },
+        {
+          "path": "color.primary.360",
+          "name": "Color / Primary / 360",
+          "variable": "--ol8-color-primary-360",
+          "value": "#d95c0b",
+          "reference": "color.orange.360"
+        },
+        {
+          "path": "color.primary.480",
+          "name": "Color / Primary / 480",
+          "variable": "--ol8-color-primary-480",
+          "value": "#b74406",
+          "reference": "color.orange.480"
+        },
+        {
+          "path": "color.primary.600",
+          "name": "Color / Primary / 600",
+          "variable": "--ol8-color-primary-600",
+          "value": "#913408",
+          "reference": "color.orange.600"
+        },
+        {
+          "path": "color.primary.720",
+          "name": "Color / Primary / 720",
+          "variable": "--ol8-color-primary-720",
+          "value": "#70290d",
+          "reference": "color.orange.720"
+        },
+        {
+          "path": "color.primary.840",
+          "name": "Color / Primary / 840",
+          "variable": "--ol8-color-primary-840",
+          "value": "#57230f",
+          "reference": "color.orange.840"
+        },
+        {
+          "path": "color.primary.930",
+          "name": "Color / Primary / 930",
+          "variable": "--ol8-color-primary-930",
+          "value": "#321207",
+          "reference": "color.orange.930"
+        }
+      ],
+      "green": [
+        {
+          "path": "color.primary.030",
+          "name": "Color / Primary / 030",
+          "variable": "--ol8-color-primary-030",
+          "value": "#f1faf5",
+          "reference": "color.green.030"
+        },
+        {
+          "path": "color.primary.060",
+          "name": "Color / Primary / 060",
+          "variable": "--ol8-color-primary-060",
+          "value": "#dcf3e5",
+          "reference": "color.green.060"
+        },
+        {
+          "path": "color.primary.090",
+          "name": "Color / Primary / 090",
+          "variable": "--ol8-color-primary-090",
+          "value": "#bce6ce",
+          "reference": "color.green.090"
+        },
+        {
+          "path": "color.primary.120",
+          "name": "Color / Primary / 120",
+          "variable": "--ol8-color-primary-120",
+          "value": "#8cd2aa",
+          "reference": "color.green.120"
+        },
+        {
+          "path": "color.primary.240",
+          "name": "Color / Primary / 240",
+          "variable": "--ol8-color-primary-240",
+          "value": "#58b982",
+          "reference": "color.green.240"
+        },
+        {
+          "path": "color.primary.360",
+          "name": "Color / Primary / 360",
+          "variable": "--ol8-color-primary-360",
+          "value": "#349a65",
+          "reference": "color.green.360"
+        },
+        {
+          "path": "color.primary.480",
+          "name": "Color / Primary / 480",
+          "variable": "--ol8-color-primary-480",
+          "value": "#267b50",
+          "reference": "color.green.480"
+        },
+        {
+          "path": "color.primary.600",
+          "name": "Color / Primary / 600",
+          "variable": "--ol8-color-primary-600",
+          "value": "#216240",
+          "reference": "color.green.600"
+        },
+        {
+          "path": "color.primary.720",
+          "name": "Color / Primary / 720",
+          "variable": "--ol8-color-primary-720",
+          "value": "#1d4f35",
+          "reference": "color.green.720"
+        },
+        {
+          "path": "color.primary.840",
+          "name": "Color / Primary / 840",
+          "variable": "--ol8-color-primary-840",
+          "value": "#193f2c",
+          "reference": "color.green.840"
+        },
+        {
+          "path": "color.primary.930",
+          "name": "Color / Primary / 930",
+          "variable": "--ol8-color-primary-930",
+          "value": "#0c2418",
+          "reference": "color.green.930"
+        }
+      ]
+    }
+  },
+  "typographyStyles": [
+    {
+      "role": "display-large",
+      "class": ".ol8-type-display-large",
+      "family": "display",
+      "size": "066",
+      "line": "072",
+      "weight": "bold",
+      "letterSpacing": "-2px"
+    },
+    {
+      "role": "display-medium",
+      "class": ".ol8-type-display-medium",
+      "family": "display",
+      "size": "051",
+      "line": "060",
+      "weight": "bold",
+      "letterSpacing": "-1.5px"
+    },
+    {
+      "role": "display-small",
+      "class": ".ol8-type-display-small",
+      "family": "display",
+      "size": "039",
+      "line": "048",
+      "weight": "semibold",
+      "letterSpacing": "-1px"
+    },
+    {
+      "role": "title-large",
+      "class": ".ol8-type-title-large",
+      "family": "functional",
+      "size": "039",
+      "line": "048",
+      "weight": "semibold",
+      "letterSpacing": "-0.5px"
+    },
+    {
+      "role": "title-medium",
+      "class": ".ol8-type-title-medium",
+      "family": "functional",
+      "size": "030",
+      "line": "039",
+      "weight": "semibold",
+      "letterSpacing": "0px"
+    },
+    {
+      "role": "title-small",
+      "class": ".ol8-type-title-small",
+      "family": "functional",
+      "size": "021",
+      "line": "030",
+      "weight": "semibold",
+      "letterSpacing": "0px"
+    },
+    {
+      "role": "body-large",
+      "class": ".ol8-type-body-large",
+      "family": "functional",
+      "size": "021",
+      "line": "030",
+      "weight": "regular",
+      "letterSpacing": "0px"
+    },
+    {
+      "role": "body-medium",
+      "class": ".ol8-type-body-medium",
+      "family": "functional",
+      "size": "016",
+      "line": "024",
+      "weight": "regular",
+      "letterSpacing": "0px"
+    },
+    {
+      "role": "body-small",
+      "class": ".ol8-type-body-small",
+      "family": "functional",
+      "size": "012",
+      "line": "018",
+      "weight": "regular",
+      "letterSpacing": "1px"
+    }
+  ],
+  "elevationStyles": [
+    {
+      "name": "flat",
+      "variable": "--ol8-elevation-flat",
+      "value": "none"
+    },
+    {
+      "name": "raised",
+      "variable": "--ol8-elevation-raised",
+      "value": "0 3px 6px 0 rgba(22,63,75,0.12)"
+    },
+    {
+      "name": "floating",
+      "variable": "--ol8-elevation-floating",
+      "value": "0 3px 6px 0 rgba(22,63,75,0.12), 0 6px 18px -3px rgba(22,63,75,0.18)"
+    },
+    {
+      "name": "overlay",
+      "variable": "--ol8-elevation-overlay",
+      "value": "0 6px 12px 0 rgba(22,63,75,0.18), 0 12px 36px -6px rgba(22,63,75,0.24)"
+    },
+    {
+      "name": "blocking",
+      "variable": "--ol8-elevation-blocking",
+      "value": "0 12px 24px 0 rgba(22,63,75,0.24), 0 24px 72px -12px rgba(22,63,75,0.36)"
+    }
+  ]
+}