From 297346682e586e92ba6536a9ce8bceb53828a00f Mon Sep 17 00:00:00 2001
From: whdgur5717 <whdgur5717@gmail.com>
Date: Fri, 21 Nov 2025 17:11:38 +0900
Subject: [PATCH 01/15] =?UTF-8?q?feat:=20=ED=86=A0=ED=81=B0=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=83=9D=EC=84=B1?=
 =?UTF-8?q?=20-=20stroke-weight=EC=97=90=EB=8F=84=20px=EC=9D=B4=20?=
 =?UTF-8?q?=EB=B6=99=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95=20-=20prettier?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/tokens/globalStyles.ts | 4406 +++++++++----------
 packages/jds/src/tokens/schema.ts       |    1 +
 packages/jds/src/tokens/theme.ts        |    2 +-
 packages/jds/src/tokens/tokens.ts       | 5382 +++++++++++------------
 4 files changed, 4896 insertions(+), 4895 deletions(-)

diff --git a/packages/jds/src/tokens/globalStyles.ts b/packages/jds/src/tokens/globalStyles.ts
index e822f5479..f6de6016c 100644
--- a/packages/jds/src/tokens/globalStyles.ts
+++ b/packages/jds/src/tokens/globalStyles.ts
@@ -1,2244 +1,2244 @@
 // 자동 생성된 globalStyles - 수정 금지
-// 생성 시간: 11/14/2025, 5:10:13 PM
+// 생성 시간: 11/21/2025, 5:05:04 PM
 
 export const globalStyles = {
-  ":root": {
-    "--primitive-flow-20": "#faf8ff",
-    "--primitive-flow-40": "#f2f3ff",
-    "--primitive-flow-80": "#e7e7f3",
-    "--primitive-flow-150": "#d3d4df",
-    "--primitive-flow-200": "#c5c6d1",
-    "--primitive-flow-250": "#b7b8c3",
-    "--primitive-flow-300": "#a9aab6",
-    "--primitive-flow-350": "#9c9da8",
-    "--primitive-flow-400": "#8f909b",
-    "--primitive-flow-500": "#757681",
-    "--primitive-flow-550": "#686a74",
-    "--primitive-red-20": "#fff8f7",
-    "--primitive-red-40": "#fff0ef",
-    "--primitive-red-80": "#ffe2df",
-    "--primitive-red-150": "#ffc7c2",
-    "--primitive-red-250": "#ff9f97",
-    "--primitive-red-350": "#ff7169",
-    "--primitive-red-450": "#ef4442",
-    "--primitive-red-550": "#cb292d",
-    "--primitive-red-650": "#a80618",
-    "--primitive-red-750": "#7d000d",
-    "--primitive-red-800": "#680009",
-    "--primitive-flow-650": "#50525c",
-    "--primitive-flow-450": "#81838e",
-    "--primitive-flow-750": "#393b44",
-    "--primitive-flow-60": "#ecedf9",
-    "--primitive-flow-100": "#e1e2ee",
-    "--primitive-shade-2": "#191b2405",
-    "--primitive-shade-4": "#191b240a",
-    "--primitive-shade-6": "#191b240f",
-    "--primitive-shade-8": "#191b2414",
-    "--primitive-shade-12": "#191b241e",
-    "--primitive-base-0": "#ffffff",
-    "--primitive-base-1000": "#000000",
-    "--primitive-flow-600": "#5c5e68",
-    "--primitive-flow-700": "#444650",
-    "--primitive-flow-800": "#2e3039",
-    "--primitive-red-60": "#ffe9e7",
-    "--primitive-red-100": "#ffdad6",
-    "--primitive-red-200": "#ffb3ad",
-    "--primitive-red-300": "#ff8981",
-    "--primitive-red-400": "#ff5450",
-    "--primitive-red-500": "#dd3737",
-    "--primitive-red-600": "#ba1a22",
-    "--primitive-red-700": "#930012",
-    "--primitive-flow-dark-alpha-20": "#fbf9ff",
-    "--primitive-flow-dark-alpha-40": "#f4f5ff",
-    "--primitive-flow-dark-alpha-400": "#f2f2fc8c",
-    "--primitive-flow-dark-alpha-450": "#edeffc7c",
-    "--primitive-flow-dark-alpha-500": "#ededfb6d",
-    "--primitive-flow-dark-alpha-550": "#edeffb5e",
-    "--primitive-flow-dark-alpha-600": "#ebedf851",
-    "--primitive-flow-dark-alpha-650": "#eef0fb42",
-    "--primitive-flow-dark-alpha-700": "#e4e6f535",
-    "--primitive-flow-dark-alpha-750": "#eff1f926",
-    "--primitive-flow-dark-alpha-800": "#e9ecf519",
-    "--primitive-flow-dark-alpha-60": "#f1f2fdf9",
-    "--primitive-flow-dark-alpha-80": "#f0f0fdf2",
-    "--primitive-flow-dark-alpha-100": "#f1f2fded",
-    "--primitive-flow-dark-alpha-150": "#f1f2fddb",
-    "--primitive-flow-dark-alpha-200": "#f4f4ffc9",
-    "--primitive-flow-dark-alpha-250": "#f0f1feba",
-    "--primitive-flow-dark-alpha-300": "#f0f0feaa",
-    "--primitive-flow-dark-alpha-350": "#f2f2fc9b",
-    "--primitive-flow-light-alpha-20": "#5614ff07",
-    "--primitive-flow-light-alpha-40": "#283aff0f",
-    "--primitive-flow-light-alpha-60": "#111cb414",
-    "--primitive-flow-light-alpha-80": "#0e0e8519",
-    "--primitive-flow-light-alpha-100": "#040b701e",
-    "--primitive-flow-light-alpha-150": "#0a104b2d",
-    "--primitive-flow-light-alpha-200": "#0207353a",
-    "--primitive-flow-light-alpha-250": "#07093149",
-    "--primitive-flow-light-alpha-300": "#01042656",
-    "--primitive-flow-light-alpha-350": "#01042263",
-    "--primitive-flow-light-alpha-400": "#00031e70",
-    "--primitive-flow-light-alpha-450": "#02061b7f",
-    "--primitive-flow-light-alpha-500": "#04051a8c",
-    "--primitive-flow-light-alpha-550": "#02061699",
-    "--primitive-flow-light-alpha-600": "#000314a3",
-    "--primitive-flow-light-alpha-650": "#010413af",
-    "--primitive-flow-light-alpha-700": "#010412bc",
-    "--primitive-flow-light-alpha-750": "#00030ec6",
-    "--primitive-flow-light-alpha-800": "#00030fd1",
-    "--primitive-orange-20": "#fff8f6",
-    "--primitive-orange-40": "#fff1eb",
-    "--primitive-orange-60": "#ffeae0",
-    "--primitive-orange-80": "#ffe2d6",
-    "--primitive-orange-100": "#ffdbcb",
-    "--primitive-orange-150": "#ffc9ae",
-    "--primitive-orange-200": "#ffb691",
-    "--primitive-orange-250": "#ffa271",
-    "--primitive-orange-300": "#ff8d4c",
-    "--primitive-orange-350": "#fe761c",
-    "--primitive-orange-400": "#ec690a",
-    "--primitive-orange-450": "#d95f00",
-    "--primitive-orange-500": "#c55500",
-    "--primitive-orange-550": "#b14c00",
-    "--primitive-orange-600": "#9e4300",
-    "--primitive-orange-650": "#8b3a00",
-    "--primitive-orange-700": "#783100",
-    "--primitive-orange-750": "#662900",
-    "--primitive-orange-800": "#552100",
-    "--primitive-yellow-20": "#fff8f2",
-    "--primitive-yellow-40": "#fff2dd",
-    "--primitive-yellow-60": "#ffecc8",
-    "--primitive-yellow-80": "#ffe5b2",
-    "--primitive-yellow-100": "#ffdf9b",
-    "--primitive-yellow-150": "#ffce58",
-    "--primitive-yellow-200": "#f7be20",
-    "--primitive-yellow-250": "#e7b007",
-    "--primitive-yellow-300": "#d7a300",
-    "--primitive-yellow-350": "#c69700",
-    "--primitive-yellow-400": "#b68a00",
-    "--primitive-yellow-450": "#a67e00",
-    "--primitive-yellow-500": "#967100",
-    "--primitive-yellow-550": "#876500",
-    "--primitive-yellow-600": "#785a00",
-    "--primitive-yellow-650": "#694e00",
-    "--primitive-yellow-700": "#5b4300",
-    "--primitive-yellow-750": "#4d3800",
-    "--primitive-yellow-800": "#3f2e00",
-    "--primitive-lime-20": "#f0ffd6",
-    "--primitive-lime-40": "#ddffae",
-    "--primitive-lime-60": "#c8ff7f",
-    "--primitive-lime-80": "#b2fe4a",
-    "--primitive-lime-100": "#adf844",
-    "--primitive-lime-150": "#a0e936",
-    "--primitive-lime-200": "#92da26",
-    "--primitive-lime-250": "#85cc10",
-    "--primitive-lime-300": "#7abd00",
-    "--primitive-lime-350": "#70af00",
-    "--primitive-lime-400": "#67a000",
-    "--primitive-lime-450": "#5d9200",
-    "--primitive-lime-500": "#548400",
-    "--primitive-lime-550": "#4b7600",
-    "--primitive-lime-600": "#426900",
-    "--primitive-lime-650": "#395c00",
-    "--primitive-lime-700": "#304f00",
-    "--primitive-lime-750": "#284300",
-    "--primitive-lime-800": "#203600",
-    "--primitive-green-20": "#ebffe8",
-    "--primitive-green-40": "#d2ffd3",
-    "--primitive-green-60": "#b7ffbe",
-    "--primitive-green-80": "#95ffa6",
-    "--primitive-green-100": "#6bff8f",
-    "--primitive-green-150": "#5bf082",
-    "--primitive-green-200": "#4ae176",
-    "--primitive-green-250": "#38d369",
-    "--primitive-green-300": "#21c45d",
-    "--primitive-green-350": "#00b652",
-    "--primitive-green-400": "#00a74b",
-    "--primitive-green-450": "#009843",
-    "--primitive-green-500": "#008a3c",
-    "--primitive-green-550": "#007b35",
-    "--primitive-green-600": "#006e2f",
-    "--primitive-green-650": "#006028",
-    "--primitive-green-700": "#005321",
-    "--primitive-green-750": "#00461b",
-    "--primitive-green-800": "#003915",
-    "--primitive-cyan-20": "#f0fbff",
-    "--primitive-cyan-40": "#e0f8ff",
-    "--primitive-cyan-60": "#d0f4ff",
-    "--primitive-cyan-80": "#bef0ff",
-    "--primitive-cyan-100": "#acedff",
-    "--primitive-cyan-150": "#74e3ff",
-    "--primitive-cyan-200": "#49d7f6",
-    "--primitive-cyan-250": "#34c9e8",
-    "--primitive-cyan-300": "#13bbda",
-    "--primitive-cyan-350": "#00adca",
-    "--primitive-cyan-400": "#009eb9",
-    "--primitive-cyan-450": "#0090a9",
-    "--primitive-cyan-500": "#008399",
-    "--primitive-cyan-550": "#007589",
-    "--primitive-cyan-600": "#00687a",
-    "--primitive-cyan-650": "#005b6b",
-    "--primitive-cyan-700": "#004e5c",
-    "--primitive-cyan-750": "#00424e",
-    "--primitive-cyan-800": "#003640",
-    "--primitive-sky-20": "#f6faff",
-    "--primitive-sky-40": "#ebf5ff",
-    "--primitive-sky-60": "#e0f0ff",
-    "--primitive-sky-80": "#d4ebff",
-    "--primitive-sky-100": "#c9e6ff",
-    "--primitive-sky-150": "#abdaff",
-    "--primitive-sky-200": "#8aceff",
-    "--primitive-sky-250": "#62c2ff",
-    "--primitive-sky-300": "#35b5fb",
-    "--primitive-sky-350": "#19a7ec",
-    "--primitive-sky-400": "#009adb",
-    "--primitive-sky-450": "#008cc8",
-    "--primitive-sky-500": "#007fb5",
-    "--primitive-sky-550": "#0071a3",
-    "--primitive-sky-600": "#006491",
-    "--primitive-sky-650": "#00587f",
-    "--primitive-sky-700": "#004c6e",
-    "--primitive-sky-750": "#00405e",
-    "--primitive-sky-800": "#00344d",
-    "--primitive-blue-20": "#f9f9ff",
-    "--primitive-blue-40": "#f1f3ff",
-    "--primitive-blue-60": "#e9edff",
-    "--primitive-blue-80": "#e0e8ff",
-    "--primitive-blue-100": "#d8e2ff",
-    "--primitive-blue-150": "#c3d4ff",
-    "--primitive-blue-200": "#adc6ff",
-    "--primitive-blue-250": "#97b8ff",
-    "--primitive-blue-300": "#80aaff",
-    "--primitive-blue-350": "#689cff",
-    "--primitive-blue-400": "#4c8eff",
-    "--primitive-blue-450": "#3881f4",
-    "--primitive-blue-500": "#2473e6",
-    "--primitive-blue-550": "#0166d8",
-    "--primitive-blue-600": "#005ac1",
-    "--primitive-blue-650": "#004faa",
-    "--primitive-blue-700": "#004494",
-    "--primitive-blue-750": "#00397e",
-    "--primitive-blue-800": "#002e69",
-    "--primitive-cerulean-blue-20": "#fbf8ff",
-    "--primitive-cerulean-blue-40": "#f4f2ff",
-    "--primitive-cerulean-blue-60": "#ececff",
-    "--primitive-cerulean-blue-80": "#e5e6ff",
-    "--primitive-cerulean-blue-100": "#dee1ff",
-    "--primitive-cerulean-blue-150": "#ccd2ff",
-    "--primitive-cerulean-blue-200": "#bac3ff",
-    "--primitive-cerulean-blue-250": "#a8b4ff",
-    "--primitive-cerulean-blue-300": "#95a6ff",
-    "--primitive-cerulean-blue-350": "#8397ff",
-    "--primitive-cerulean-blue-400": "#7087ff",
-    "--primitive-cerulean-blue-450": "#5d78ff",
-    "--primitive-cerulean-blue-500": "#4a68fc",
-    "--primitive-cerulean-blue-550": "#3b5aef",
-    "--primitive-cerulean-blue-600": "#2a4de2",
-    "--primitive-cerulean-blue-650": "#163ed6",
-    "--primitive-cerulean-blue-700": "#0031c5",
-    "--primitive-cerulean-blue-750": "#0029a9",
-    "--primitive-cerulean-blue-800": "#00208d",
-    "--primitive-violet-20": "#fef7ff",
-    "--primitive-violet-40": "#f8f1ff",
-    "--primitive-violet-60": "#f3eaff",
-    "--primitive-violet-80": "#eee4ff",
-    "--primitive-violet-100": "#e9ddff",
-    "--primitive-violet-150": "#ddcdff",
-    "--primitive-violet-200": "#d0bcff",
-    "--primitive-violet-250": "#c4acff",
-    "--primitive-violet-300": "#b89bff",
-    "--primitive-violet-350": "#ac8aff",
-    "--primitive-violet-400": "#a078ff",
-    "--primitive-violet-450": "#9466ff",
-    "--primitive-violet-500": "#8758f1",
-    "--primitive-violet-550": "#7a4ae3",
-    "--primitive-violet-600": "#6d3bd6",
-    "--primitive-violet-650": "#612bc9",
-    "--primitive-violet-700": "#5517bd",
-    "--primitive-violet-750": "#4900ad",
-    "--primitive-violet-800": "#3c0091",
-    "--primitive-purple-20": "#fff7fe",
-    "--primitive-purple-40": "#fcf0ff",
-    "--primitive-purple-60": "#f8e9ff",
-    "--primitive-purple-80": "#f4e2ff",
-    "--primitive-purple-100": "#f0dbff",
-    "--primitive-purple-150": "#e7c9ff",
-    "--primitive-purple-200": "#deb7ff",
-    "--primitive-purple-250": "#d4a5ff",
-    "--primitive-purple-300": "#cb93ff",
-    "--primitive-purple-350": "#c180ff",
-    "--primitive-purple-400": "#b76cff",
-    "--primitive-purple-450": "#ad59fb",
-    "--primitive-purple-500": "#9f4aed",
-    "--primitive-purple-550": "#923be0",
-    "--primitive-purple-600": "#842ad2",
-    "--primitive-purple-650": "#7714c5",
-    "--primitive-purple-700": "#6900b2",
-    "--primitive-purple-750": "#590099",
-    "--primitive-purple-800": "#4a0080",
-    "--primitive-fuchsia-20": "#fff7fa",
-    "--primitive-fuchsia-40": "#ffeffb",
-    "--primitive-fuchsia-60": "#ffe7fb",
-    "--primitive-fuchsia-80": "#ffdefc",
-    "--primitive-fuchsia-100": "#ffd6fd",
-    "--primitive-fuchsia-150": "#fec0ff",
-    "--primitive-fuchsia-200": "#faabff",
-    "--primitive-fuchsia-250": "#f695ff",
-    "--primitive-fuchsia-300": "#f17eff",
-    "--primitive-fuchsia-350": "#eb64ff",
-    "--primitive-fuchsia-400": "#e14ef8",
-    "--primitive-fuchsia-450": "#d13ee9",
-    "--primitive-fuchsia-500": "#c22cdb",
-    "--primitive-fuchsia-550": "#b315cd",
-    "--primitive-fuchsia-600": "#a200bb",
-    "--primitive-fuchsia-650": "#8f00a4",
-    "--primitive-fuchsia-700": "#7c008f",
-    "--primitive-fuchsia-750": "#69007a",
-    "--primitive-fuchsia-800": "#570065",
-    "--primitive-pink-20": "#fff8f8",
-    "--primitive-pink-40": "#fff0f3",
-    "--primitive-pink-60": "#ffe8ee",
-    "--primitive-pink-80": "#ffe0e9",
-    "--primitive-pink-100": "#ffd9e4",
-    "--primitive-pink-150": "#ffc5d9",
-    "--primitive-pink-200": "#ffb0cd",
-    "--primitive-pink-250": "#ff9ac2",
-    "--primitive-pink-300": "#ff82b7",
-    "--primitive-pink-350": "#ff67ad",
-    "--primitive-pink-400": "#f651a1",
-    "--primitive-pink-450": "#e64394",
-    "--primitive-pink-500": "#d53587",
-    "--primitive-pink-550": "#c4267a",
-    "--primitive-pink-600": "#b4146d",
-    "--primitive-pink-650": "#a20060",
-    "--primitive-pink-700": "#8c0053",
-    "--primitive-pink-750": "#780046",
-    "--primitive-pink-800": "#640039",
-    "--primitive-rose-20": "#fff8f7",
-    "--primitive-rose-40": "#fff0f0",
-    "--primitive-rose-60": "#ffe9e9",
-    "--primitive-rose-80": "#ffe1e2",
-    "--primitive-rose-100": "#ffdadb",
-    "--primitive-rose-150": "#ffc6c9",
-    "--primitive-rose-200": "#ffb2b7",
-    "--primitive-rose-250": "#ff9ea5",
-    "--primitive-rose-300": "#ff8792",
-    "--primitive-rose-350": "#ff6e7f",
-    "--primitive-rose-400": "#ff506b",
-    "--primitive-rose-450": "#f13d5d",
-    "--primitive-rose-500": "#e02f52",
-    "--primitive-rose-550": "#ce2046",
-    "--primitive-rose-600": "#bc0b3b",
-    "--primitive-rose-650": "#a70032",
-    "--primitive-rose-700": "#91002b",
-    "--primitive-rose-750": "#7c0023",
-    "--primitive-rose-800": "#67001c",
-    "--primitive-shade-16": "#191b2428",
-    "--primitive-engross-20": "#fbf8ff",
-    "--primitive-engross-40": "#f4f2ff",
-    "--primitive-engross-60": "#edecff",
-    "--primitive-engross-80": "#e6e6ff",
-    "--primitive-engross-100": "#dfe0ff",
-    "--primitive-engross-150": "#cfd2f7",
-    "--primitive-engross-200": "#c1c4e9",
-    "--primitive-engross-250": "#b3b6db",
-    "--primitive-engross-300": "#a6a9cd",
-    "--primitive-engross-350": "#989bbf",
-    "--primitive-engross-400": "#8b8eb1",
-    "--primitive-engross-450": "#7e81a3",
-    "--primitive-engross-500": "#717596",
-    "--primitive-engross-550": "#656889",
-    "--primitive-engross-600": "#595c7c",
-    "--primitive-engross-650": "#4d5070",
-    "--primitive-engross-700": "#414563",
-    "--primitive-engross-750": "#353957",
-    "--primitive-emerald-20": "#e8ffef",
-    "--primitive-emerald-40": "#cdffe2",
-    "--primitive-emerald-60": "#aeffd5",
-    "--primitive-emerald-80": "#86ffc7",
-    "--primitive-emerald-100": "#6dfcbe",
-    "--primitive-emerald-150": "#5dedb0",
-    "--primitive-emerald-200": "#4cdfa3",
-    "--primitive-emerald-250": "#39d096",
-    "--primitive-emerald-300": "#21c289",
-    "--primitive-emerald-350": "#00b47d",
-    "--primitive-emerald-400": "#00a572",
-    "--primitive-emerald-450": "#009668",
-    "--primitive-emerald-500": "#00885e",
-    "--primitive-emerald-550": "#007a54",
-    "--primitive-emerald-600": "#006c4a",
-    "--primitive-emerald-650": "#005f40",
-    "--primitive-emerald-700": "#005237",
-    "--primitive-emerald-750": "#00452d",
-    "--primitive-emerald-800": "#003824",
-    "--primitive-teal-20": "#e5fff9",
-    "--primitive-teal-40": "#c6fff4",
-    "--primitive-teal-60": "#a0ffef",
-    "--primitive-teal-80": "#76feea",
-    "--primitive-teal-100": "#70f8e5",
-    "--primitive-teal-150": "#5fead7",
-    "--primitive-teal-200": "#4edbc9",
-    "--primitive-teal-250": "#3bcdbb",
-    "--primitive-teal-300": "#23bfad",
-    "--primitive-teal-350": "#00b1a0",
-    "--primitive-teal-400": "#00a393",
-    "--primitive-teal-450": "#009486",
-    "--primitive-teal-500": "#008679",
-    "--primitive-teal-550": "#00786c",
-    "--primitive-teal-600": "#006a60",
-    "--primitive-teal-650": "#005d54",
-    "--primitive-teal-700": "#005048",
-    "--primitive-teal-750": "#00443c",
-    "--primitive-teal-800": "#003731",
-    "--primitive-amber-20": "#fff8f4",
-    "--primitive-amber-40": "#fff1e5",
-    "--primitive-amber-60": "#ffebd6",
-    "--primitive-amber-80": "#ffe4c7",
-    "--primitive-amber-100": "#ffddb7",
-    "--primitive-amber-150": "#ffcb8d",
-    "--primitive-amber-200": "#ffb95d",
-    "--primitive-amber-250": "#fda61a",
-    "--primitive-amber-300": "#ed9900",
-    "--primitive-amber-350": "#db8d00",
-    "--primitive-amber-400": "#c98100",
-    "--primitive-amber-450": "#b87500",
-    "--primitive-amber-500": "#a66a00",
-    "--primitive-amber-550": "#955f00",
-    "--primitive-amber-600": "#855400",
-    "--primitive-amber-650": "#754900",
-    "--primitive-amber-700": "#653e00",
-    "--primitive-amber-750": "#553400",
-    "--primitive-amber-800": "#462a00",
-    "--primitive-engross-800": "#2a2e4c",
-    "--primitive-engross-820": "#262a47",
-    "--primitive-flow-820": "#292c35",
-    "--primitive-flow-840": "#252830",
-    "--primitive-red-820": "#600008",
-    "--primitive-red-840": "#580006",
-    "--primitive-orange-820": "#4e1d00",
-    "--primitive-orange-840": "#471a00",
-    "--primitive-amber-820": "#412600",
-    "--primitive-amber-840": "#3b2300",
-    "--primitive-yellow-820": "#3a2a00",
-    "--primitive-yellow-840": "#342600",
-    "--primitive-lime-820": "#1d3200",
-    "--primitive-lime-840": "#1a2d00",
-    "--primitive-green-820": "#003412",
-    "--primitive-green-840": "#002f10",
-    "--primitive-emerald-820": "#003321",
-    "--primitive-emerald-840": "#002f1e",
-    "--primitive-teal-820": "#00332d",
-    "--primitive-teal-840": "#002e29",
-    "--primitive-cyan-820": "#00313b",
-    "--primitive-cyan-840": "#002c35",
-    "--primitive-sky-820": "#002f47",
-    "--primitive-sky-840": "#002b41",
-    "--primitive-blue-820": "#002a61",
-    "--primitive-blue-840": "#002659",
-    "--primitive-cerulean-blue-820": "#001d83",
-    "--primitive-cerulean-blue-840": "#001a78",
-    "--primitive-violet-820": "#370086",
-    "--primitive-violet-840": "#32007b",
-    "--primitive-purple-820": "#440076",
-    "--primitive-purple-840": "#3e006c",
-    "--primitive-fuchsia-820": "#50005d",
-    "--primitive-fuchsia-840": "#490056",
-    "--primitive-pink-820": "#5c0034",
-    "--primitive-pink-840": "#540030",
-    "--primitive-rose-820": "#5f0019",
-    "--primitive-rose-840": "#570016",
-    "--primitive-flow-light-alpha-820": "#00040fd6",
-    "--primitive-flow-light-alpha-840": "#01040ddb",
-    "--primitive-flow-dark-alpha-820": "#e2f0f814",
-    "--primitive-flow-dark-alpha-860": "#dfe1eb0a",
-    "--primitive-flow-860": "#21232c",
-    "--primitive-flow-light-alpha-860": "#030511e0",
-    "--primitive-flow-dark-alpha-880": "#dfe1eb05",
-    "--primitive-engross-840": "#222642",
-    "--primitive-red-860": "#500005",
-    "--primitive-orange-860": "#411700",
-    "--primitive-amber-860": "#351f00",
-    "--primitive-yellow-860": "#2f2200",
-    "--primitive-lime-860": "#172900",
-    "--primitive-green-860": "#002b0e",
-    "--primitive-emerald-860": "#002a1a",
-    "--primitive-teal-860": "#002924",
-    "--primitive-cyan-860": "#002830",
-    "--primitive-sky-860": "#00263b",
-    "--primitive-blue-860": "#002251",
-    "--primitive-cerulean-blue-860": "#00176e",
-    "--primitive-violet-860": "#2d0070",
-    "--primitive-purple-860": "#380063",
-    "--primitive-fuchsia-860": "#43004e",
-    "--primitive-pink-860": "#4c002b",
-    "--primitive-rose-860": "#4f0013",
-    "--primitive-engross-860": "#1e213e",
-    "--primitive-engross-880": "#191d3a",
-    "--primitive-engross-900": "#151935",
-    "--primitive-immerse-20": "#faf8ff",
-    "--primitive-immerse-40": "#f3f2ff",
-    "--primitive-immerse-60": "#ebedff",
-    "--primitive-immerse-80": "#e5e7fc",
-    "--primitive-immerse-100": "#dfe1f6",
-    "--primitive-immerse-150": "#d1d3e8",
-    "--primitive-immerse-200": "#c3c5d9",
-    "--primitive-immerse-250": "#b5b8cb",
-    "--primitive-immerse-300": "#a8aabe",
-    "--primitive-immerse-350": "#9a9db0",
-    "--primitive-immerse-400": "#8d90a2",
-    "--primitive-immerse-450": "#808395",
-    "--primitive-immerse-500": "#737688",
-    "--primitive-immerse-550": "#676a7b",
-    "--primitive-immerse-600": "#5a5e6f",
-    "--primitive-immerse-650": "#4e5262",
-    "--primitive-immerse-700": "#434656",
-    "--primitive-immerse-750": "#373b4b",
-    "--primitive-immerse-800": "#2c303f",
-    "--primitive-immerse-820": "#282b3b",
-    "--primitive-immerse-840": "#242736",
-    "--primitive-immerse-860": "#202332",
-    "--primitive-immerse-880": "#1b1f2e",
-    "--primitive-immerse-900": "#171b29",
-    "--primitive-flow-880": "#1d1f28",
-    "--primitive-flow-900": "#191b24",
-    "--primitive-flow-light-alpha-880": "#01030ee2",
-    "--primitive-flow-light-alpha-900": "#01030de8",
-    "--primitive-flow-dark-alpha-840": "#e1f3ec0f",
-    "--primitive-flow-dark-alpha-900": "#191b24",
-    "--primitive-red-880": "#480004",
-    "--primitive-red-900": "#410003",
-    "--primitive-orange-880": "#3a1400",
-    "--primitive-orange-900": "#341100",
-    "--primitive-amber-880": "#301b00",
-    "--primitive-amber-900": "#2a1700",
-    "--primitive-yellow-880": "#2a1e00",
-    "--primitive-yellow-900": "#251a00",
-    "--primitive-lime-880": "#142400",
-    "--primitive-lime-900": "#112000",
-    "--primitive-green-880": "#00260b",
-    "--primitive-green-900": "#002109",
-    "--primitive-emerald-880": "#002517",
-    "--primitive-emerald-900": "#002114",
-    "--primitive-teal-880": "#002520",
-    "--primitive-teal-900": "#00201c",
-    "--primitive-cyan-880": "#00232b",
-    "--primitive-cyan-900": "#001f26",
-    "--primitive-sky-880": "#002235",
-    "--primitive-sky-900": "#001e2f",
-    "--primitive-blue-880": "#001e49",
-    "--primitive-blue-900": "#001a41",
-    "--primitive-cerulean-blue-880": "#001463",
-    "--primitive-cerulean-blue-900": "#001159",
-    "--primitive-violet-880": "#280066",
-    "--primitive-violet-900": "#23005c",
-    "--primitive-purple-880": "#320059",
-    "--primitive-purple-900": "#2c0050",
-    "--primitive-fuchsia-880": "#3c0046",
-    "--primitive-fuchsia-900": "#35003f",
-    "--primitive-pink-880": "#450026",
-    "--primitive-pink-900": "#3e0022",
-    "--primitive-rose-880": "#480010",
-    "--primitive-rose-900": "#40000e",
-    "--semantic-duration-200": "200ms",
-    "--semantic-duration-250": "250ms",
-    "--semantic-duration-300": "300ms",
-    "--semantic-duration-350": "350ms",
-    "--semantic-duration-150": "150ms",
-    "--semantic-duration-100": "100ms",
-    "--semantic-duration-50": "50ms",
-    "--semantic-motion-bouncy": "cubic-bezier(0.25, 1.57, 0.75, 0.9)",
-    "--semantic-motion-fluent": "cubic-bezier(0.25, 0.1, 0.25, 1)",
-    "--primitive-time-300": "300",
-    "--primitive-time-200": "200",
-    "--primitive-time-250": "250",
-    "--primitive-time-150": "150",
-    "--primitive-time-350": "350",
-    "--primitive-time-100": "100",
-    "--primitive-time-50": "50",
-    "--semantic-motion-leave": "cubic-bezier(0.42, 0, 0.1, 1)\t",
-    "--semantic-motion-entrance": "cubic-bezier(0.19, 0.91, 0.38, 1)\t",
-    "--primitive-time-400": "400",
-    "--primitive-time-450": "450",
-    "--primitive-time-500": "500",
-    "--semantic-duration-400": "400ms",
-    "--semantic-duration-450": "450ms",
-    "--semantic-duration-500": "500ms",
-    "--semantic-accent-alpha-assistive": "#3b5aef89",
-    "--semantic-object-neutral": "#04051a8c",
-    "--semantic-object-alternative": "#00031e70",
-    "--semantic-object-assistive": "#01042656",
-    "--semantic-object-subtle": "#0207353a",
-    "--semantic-object-inverse-neutral": "#edeffc7c",
-    "--semantic-object-inverse-alternative": "#edeffb5e",
-    "--semantic-object-inverse-assistive": "#eef0fb42",
-    "--semantic-object-inverse-subtle": "#e4e6f535",
-    "--semantic-accent-bold": "#0031c5",
-    "--semantic-accent-normal": "#2a4de2",
-    "--semantic-object-boldest": "#191b24",
-    "--semantic-object-bold": "#444650",
-    "--semantic-object-inverse-boldest": "#ffffff",
-    "--semantic-object-inverse-bold": "#c5c6d1",
-    "--semantic-surface-standard": "#ffffff",
-    "--semantic-surface-deep": "#faf8ff",
-    "--semantic-surface-deeper": "#f2f3ff",
-    "--semantic-surface-deepest": "#ecedf9",
-    "--semantic-interaction-bold": "#191b24",
-    "--semantic-interaction-normal": "#50525c",
-    "--semantic-interaction-inverse-focus": "#4a68fc",
-    "--semantic-stroke-neutral": "#9c9da8",
-    "--semantic-stroke-alternative": "#b7b8c3",
-    "--semantic-stroke-assistive": "#d3d4df",
-    "--semantic-fill-boldest": "#191b24",
-    "--semantic-fill-bold": "#444650",
-    "--semantic-fill-neutral": "#04051a8c",
-    "--semantic-fill-alternative": "#00031e70",
-    "--semantic-fill-assistive": "#01042656",
-    "--semantic-system-white": "#ffffff",
-    "--semantic-system-black": "#000000",
-    "--semantic-object-static-boldest": "#191b24",
-    "--semantic-object-static-bold": "#444650",
-    "--semantic-object-static-neutral": "#04051a8c",
-    "--semantic-object-static-alternative": "#00031e70",
-    "--semantic-object-static-assistive": "#01042656",
-    "--semantic-object-static-subtle": "#0207353a",
-    "--semantic-object-static-inverse-boldest": "#ffffff",
-    "--semantic-object-static-inverse-bold": "#c5c6d1",
-    "--semantic-object-static-inverse-neutral": "#edeffc7c",
-    "--semantic-object-static-inverse-alternative": "#edeffb5e",
-    "--semantic-object-static-inverse-assistive": "#eef0fb42",
-    "--semantic-object-static-inverse-subtle": "#e4e6f535",
-    "--semantic-interaction-inverse-bold": "#ffffff",
-    "--semantic-interaction-inverse-normal": "#a9aab6",
-    "--semantic-interaction-focus": "#7087ff",
-    "--semantic-stroke-normal": "#757681",
-    "--semantic-stroke-bold": "#50525c",
-    "--semantic-fill-inverse-boldest": "#ffffff",
-    "--semantic-fill-inverse-bold": "#c5c6d1",
-    "--semantic-fill-inverse-neutral": "#edeffc7c",
-    "--semantic-fill-inverse-alternative": "#edeffb5e",
-    "--semantic-fill-inverse-assistive": "#eef0fb42",
-    "--semantic-accent-neutral": "#4a68fc",
-    "--semantic-accent-alpha-subtle": "#3b5aef5b",
-    "--semantic-fill-subtle": "#0207353a",
-    "--semantic-fill-inverse-subtle": "#e4e6f535",
-    "--semantic-stroke-alpha-bold": "#010413af",
-    "--semantic-stroke-alpha-normal": "#04051a8c",
-    "--semantic-stroke-alpha-neutral": "#01042263",
-    "--semantic-stroke-alpha-alternative": "#07093149",
-    "--semantic-stroke-alpha-assistive": "#0a104b2d",
-    "--semantic-accent-inverse-bold": "#bac3ff",
-    "--semantic-accent-inverse-normal": "#8397ff",
-    "--semantic-accent-inverse-neutral": "#5d78ff",
-    "--semantic-accent-alternative": "#7087ff",
-    "--semantic-accent-inverse-alternative": "#3b5aef",
-    "--semantic-accent-alpha-subtler": "#3b5aef28",
-    "--semantic-accent-alpha-inverse-subtle": "#7087ff5b",
-    "--semantic-accent-alpha-inverse-subtler": "#7087ff28",
-    "--semantic-accent-alpha-inverse-subtlest": "#7087ff0c",
-    "--semantic-stroke-subtle": "#e1e2ee",
-    "--semantic-stroke-alpha-subtle": "#040b701e",
-    "--semantic-stroke-inverse-bold": "#a9aab6",
-    "--semantic-stroke-inverse-normal": "#81838e",
-    "--semantic-stroke-inverse-neutral": "#5c5e68",
-    "--semantic-stroke-inverse-alternative": "#444650",
-    "--semantic-stroke-inverse-assistive": "#393b44",
-    "--semantic-stroke-inverse-subtle": "#2e3039",
-    "--semantic-stroke-alpha-inverse-bold": "#f0f0feaa",
-    "--semantic-stroke-alpha-inverse-normal": "#edeffc7c",
-    "--semantic-stroke-alpha-inverse-neutral": "#ebedf851",
-    "--semantic-stroke-alpha-inverse-alternative": "#e4e6f535",
-    "--semantic-stroke-alpha-inverse-assistive": "#eff1f926",
-    "--semantic-stroke-alpha-inverse-subtle": "#e9ecf519",
-    "--semantic-theme-red-bold": "#930012",
-    "--semantic-theme-red-normal": "#ba1a22",
-    "--semantic-theme-red-neutral": "#dd3737",
-    "--semantic-theme-red-alternative": "#ff5450",
-    "--semantic-accent-assistive": "#95a6ff",
-    "--semantic-accent-inverse-assistive": "#163ed6",
-    "--semantic-accent-alpha-subtlest": "#3b5aef0c",
-    "--semantic-surface-inverse-standard": "#191b24",
-    "--semantic-surface-inverse-deep": "#1d1f28",
-    "--semantic-surface-inverse-deeper": "#21232c",
-    "--semantic-surface-inverse-deepest": "#252830",
-    "--semantic-curtain-bright": "#ffffff3a",
-    "--semantic-curtain-dim": "#191b243a",
-    "--semantic-curtain-dimmer": "#191b2470",
-    "--semantic-fill-subtler": "#0e0e8519",
-    "--semantic-fill-inverse-subtler": "#e2f0f814",
-    "--semantic-fill-subtlest": "#5614ff07",
-    "--semantic-fill-inverse-subtlest": "#dfe1eb05",
-    "--semantic-theme-red-assistive": "#ff8981",
-    "--semantic-theme-red-subtle": "#ffb3ad",
-    "--semantic-theme-red-subtler": "#ffe2df",
-    "--semantic-feedback-positive-alpha-subtle": "#007b355b",
-    "--semantic-feedback-positive-alpha-assistive": "#007b3589",
-    "--semantic-feedback-positive-normal": "#006e2f",
-    "--semantic-feedback-positive-alpha-subtler": "#007b3528",
-    "--semantic-feedback-positive-bold": "#005321",
-    "--semantic-accent-subtle": "#bac3ff",
-    "--semantic-accent-inverse-subtle": "#0031c5",
-    "--semantic-interaction-assistive": "#8f909b",
-    "--semantic-interaction-inverse-assistive": "#686a74",
-    "--semantic-feedback-positive-inverse-bold": "#4ae176",
-    "--semantic-feedback-positive-inverse-normal": "#00b652",
-    "--semantic-feedback-positive-inverse-neutral": "#009843",
-    "--semantic-feedback-positive-inverse-alternative": "#007b35",
-    "--semantic-feedback-positive-inverse-assistive": "#006028",
-    "--semantic-feedback-positive-inverse-subtle": "#005321",
-    "--semantic-feedback-positive-inverse-subtler": "#003412",
-    "--semantic-surface-shallow": "#ffffff",
-    "--semantic-surface-inverse-shallow": "#21232c",
-    "--semantic-surface-inverse-shallower": "#292c35",
-    "--semantic-surface-shallower": "#ffffff",
-    "--semantic-surface-shallowest": "#ffffff",
-    "--semantic-surface-inverse-shallowest": "#393b44",
-    "--semantic-accent-subtler": "#e5e6ff",
-    "--semantic-accent-bolder": "#001d83",
-    "--semantic-accent-inverse-bolder": "#e5e6ff",
-    "--semantic-accent-inverse-subtler": "#001d83",
-    "--semantic-theme-red-alpha-assistive": "#cb292d89",
-    "--semantic-theme-red-alpha-subtle": "#cb292d5b",
-    "--semantic-theme-red-alpha-subtler": "#cb292d28",
-    "--semantic-theme-orange-bold": "#783100",
-    "--semantic-theme-orange-normal": "#9e4300",
-    "--semantic-theme-orange-neutral": "#c55500",
-    "--semantic-theme-orange-alternative": "#ec690a",
-    "--semantic-theme-orange-assistive": "#ff8d4c",
-    "--semantic-theme-orange-subtle": "#ffb691",
-    "--semantic-theme-orange-subtler": "#ffe2d6",
-    "--semantic-theme-orange-alpha-assistive": "#b14c0089",
-    "--semantic-theme-orange-alpha-subtle": "#b14c005b",
-    "--semantic-theme-orange-alpha-subtler": "#b14c0028",
-    "--semantic-theme-amber-bold": "#653e00",
-    "--semantic-theme-amber-normal": "#855400",
-    "--semantic-theme-amber-neutral": "#a66a00",
-    "--semantic-theme-amber-alternative": "#c98100",
-    "--semantic-theme-amber-assistive": "#ed9900",
-    "--semantic-theme-amber-subtle": "#ffb95d",
-    "--semantic-theme-amber-subtler": "#ffe4c7",
-    "--semantic-theme-amber-alpha-assistive": "#955f0089",
-    "--semantic-theme-amber-alpha-subtle": "#955f005b",
-    "--semantic-theme-amber-alpha-subtler": "#955f0028",
-    "--semantic-theme-yellow-bold": "#5b4300",
-    "--semantic-theme-yellow-normal": "#785a00",
-    "--semantic-theme-yellow-neutral": "#967100",
-    "--semantic-theme-yellow-alternative": "#b68a00",
-    "--semantic-theme-yellow-assistive": "#d7a300",
-    "--semantic-theme-yellow-subtle": "#f7be20",
-    "--semantic-theme-yellow-subtler": "#ffe5b2",
-    "--semantic-theme-yellow-alpha-assistive": "#87650089",
-    "--semantic-theme-yellow-alpha-subtle": "#8765005b",
-    "--semantic-theme-yellow-alpha-subtler": "#87650028",
-    "--semantic-theme-lime-bold": "#304f00",
-    "--semantic-theme-lime-normal": "#426900",
-    "--semantic-theme-lime-neutral": "#548400",
-    "--semantic-theme-lime-alternative": "#67a000",
-    "--semantic-theme-lime-assistive": "#7abd00",
-    "--semantic-theme-lime-subtle": "#92da26",
-    "--semantic-theme-lime-subtler": "#b2fe4a",
-    "--semantic-theme-lime-alpha-assistive": "#4b760089",
-    "--semantic-theme-lime-alpha-subtle": "#4b76005b",
-    "--semantic-theme-lime-alpha-subtler": "#4b760028",
-    "--semantic-theme-green-bold": "#005321",
-    "--semantic-theme-green-normal": "#006e2f",
-    "--semantic-theme-green-neutral": "#008a3c",
-    "--semantic-theme-green-alternative": "#00a74b",
-    "--semantic-theme-green-assistive": "#21c45d",
-    "--semantic-theme-green-subtle": "#4ae176",
-    "--semantic-theme-green-subtler": "#95ffa6",
-    "--semantic-theme-green-alpha-assistive": "#007b3589",
-    "--semantic-theme-green-alpha-subtle": "#007b355b",
-    "--semantic-theme-green-alpha-subtler": "#007b3528",
-    "--semantic-theme-emerald-bold": "#005237",
-    "--semantic-theme-emerald-normal": "#006c4a",
-    "--semantic-theme-emerald-neutral": "#00885e",
-    "--semantic-theme-emerald-alternative": "#00a572",
-    "--semantic-theme-emerald-assistive": "#21c289",
-    "--semantic-theme-emerald-subtle": "#4cdfa3",
-    "--semantic-theme-emerald-subtler": "#86ffc7",
-    "--semantic-theme-emerald-alpha-assistive": "#007a5489",
-    "--semantic-theme-emerald-alpha-subtle": "#007a545b",
-    "--semantic-theme-emerald-alpha-subtler": "#007a5428",
-    "--semantic-theme-teal-bold": "#005048",
-    "--semantic-theme-teal-normal": "#006a60",
-    "--semantic-theme-teal-neutral": "#008679",
-    "--semantic-theme-teal-alternative": "#00a393",
-    "--semantic-theme-teal-assistive": "#23bfad",
-    "--semantic-theme-teal-subtle": "#4edbc9",
-    "--semantic-theme-teal-subtler": "#76feea",
-    "--semantic-theme-teal-alpha-assistive": "#00786c89",
-    "--semantic-theme-teal-alpha-subtle": "#00786c5b",
-    "--semantic-theme-teal-alpha-subtler": "#00786c28",
-    "--semantic-theme-cyan-bold": "#004e5c",
-    "--semantic-theme-cyan-normal": "#00687a",
-    "--semantic-theme-cyan-neutral": "#008399",
-    "--semantic-theme-cyan-alternative": "#009eb9",
-    "--semantic-theme-cyan-assistive": "#13bbda",
-    "--semantic-theme-cyan-subtle": "#49d7f6",
-    "--semantic-theme-cyan-subtler": "#bef0ff",
-    "--semantic-theme-cyan-alpha-assistive": "#00758989",
-    "--semantic-theme-cyan-alpha-subtle": "#0075895b",
-    "--semantic-theme-cyan-alpha-subtler": "#00758928",
-    "--semantic-theme-sky-bold": "#004c6e",
-    "--semantic-theme-sky-normal": "#006491",
-    "--semantic-theme-sky-neutral": "#007fb5",
-    "--semantic-theme-sky-alternative": "#009adb",
-    "--semantic-theme-sky-assistive": "#35b5fb",
-    "--semantic-theme-sky-subtle": "#8aceff",
-    "--semantic-theme-sky-subtler": "#d4ebff",
-    "--semantic-theme-sky-alpha-assistive": "#0071a389",
-    "--semantic-theme-sky-alpha-subtle": "#0071a35b",
-    "--semantic-theme-sky-alpha-subtler": "#0071a328",
-    "--semantic-theme-blue-bold": "#004494",
-    "--semantic-theme-blue-normal": "#005ac1",
-    "--semantic-theme-blue-neutral": "#2473e6",
-    "--semantic-theme-blue-alternative": "#4c8eff",
-    "--semantic-theme-blue-assistive": "#80aaff",
-    "--semantic-theme-blue-subtle": "#adc6ff",
-    "--semantic-theme-blue-subtler": "#e0e8ff",
-    "--semantic-theme-blue-alpha-assistive": "#0166d889",
-    "--semantic-theme-blue-alpha-subtle": "#0166d85b",
-    "--semantic-theme-blue-alpha-subtler": "#0166d828",
-    "--semantic-theme-violet-bold": "#5517bd",
-    "--semantic-theme-violet-normal": "#6d3bd6",
-    "--semantic-theme-violet-neutral": "#8758f1",
-    "--semantic-theme-violet-alternative": "#a078ff",
-    "--semantic-theme-violet-assistive": "#b89bff",
-    "--semantic-theme-violet-subtle": "#d0bcff",
-    "--semantic-theme-violet-subtler": "#eee4ff",
-    "--semantic-theme-violet-alpha-assistive": "#7a4ae389",
-    "--semantic-theme-violet-alpha-subtle": "#7a4ae35b",
-    "--semantic-theme-violet-alpha-subtler": "#7a4ae328",
-    "--semantic-theme-purple-bold": "#6900b2",
-    "--semantic-theme-purple-normal": "#842ad2",
-    "--semantic-theme-purple-neutral": "#9f4aed",
-    "--semantic-theme-purple-alternative": "#b76cff",
-    "--semantic-theme-purple-assistive": "#cb93ff",
-    "--semantic-theme-purple-subtle": "#deb7ff",
-    "--semantic-theme-purple-subtler": "#f4e2ff",
-    "--semantic-theme-purple-alpha-assistive": "#923be089",
-    "--semantic-theme-purple-alpha-subtle": "#923be05b",
-    "--semantic-theme-purple-alpha-subtler": "#923be028",
-    "--semantic-theme-fuchsia-bold": "#7c008f",
-    "--semantic-theme-fuchsia-normal": "#a200bb",
-    "--semantic-theme-fuchsia-neutral": "#c22cdb",
-    "--semantic-theme-fuchsia-alternative": "#e14ef8",
-    "--semantic-theme-fuchsia-assistive": "#f17eff",
-    "--semantic-theme-fuchsia-subtle": "#faabff",
-    "--semantic-theme-fuchsia-subtler": "#ffdefc",
-    "--semantic-theme-fuchsia-alpha-assistive": "#b315cd89",
-    "--semantic-theme-fuchsia-alpha-subtle": "#b315cd5b",
-    "--semantic-theme-fuchsia-alpha-subtler": "#b315cd28",
-    "--semantic-theme-pink-bold": "#8c0053",
-    "--semantic-theme-pink-normal": "#b4146d",
-    "--semantic-theme-pink-neutral": "#d53587",
-    "--semantic-theme-pink-alternative": "#f651a1",
-    "--semantic-theme-pink-assistive": "#ff82b7",
-    "--semantic-theme-pink-subtle": "#ffb0cd",
-    "--semantic-theme-pink-subtler": "#ffe0e9",
-    "--semantic-theme-pink-alpha-assistive": "#c4267a89",
-    "--semantic-theme-pink-alpha-subtle": "#c4267a5b",
-    "--semantic-theme-pink-alpha-subtler": "#c4267a28",
-    "--semantic-theme-rose-bold": "#91002b",
-    "--semantic-theme-rose-normal": "#bc0b3b",
-    "--semantic-theme-rose-neutral": "#e02f52",
-    "--semantic-theme-rose-alternative": "#ff506b",
-    "--semantic-theme-rose-assistive": "#ff8792",
-    "--semantic-theme-rose-subtle": "#ffb2b7",
-    "--semantic-theme-rose-subtler": "#ffe1e2",
-    "--semantic-theme-rose-alpha-assistive": "#ce204689",
-    "--semantic-theme-rose-alpha-subtle": "#ce20465b",
-    "--semantic-theme-rose-alpha-subtler": "#ce204628",
-    "--semantic-feedback-positive-assistive": "#21c45d",
-    "--semantic-feedback-positive-subtler": "#95ffa6",
-    "--semantic-feedback-positive-neutral": "#008a3c",
-    "--semantic-feedback-positive-alternative": "#00a74b",
-    "--semantic-feedback-positive-subtle": "#4ae176",
-    "--semantic-feedback-positive-alpha-inverse-assistive": "#00a74b89",
-    "--semantic-feedback-positive-alpha-inverse-subtle": "#00a74b5b",
-    "--semantic-feedback-positive-alpha-inverse-subtler": "#00a74b28",
-    "--semantic-feedback-destructive-bold": "#930012",
-    "--semantic-feedback-destructive-inverse-bold": "#ffb3ad",
-    "--semantic-feedback-destructive-inverse-normal": "#ff7169",
-    "--semantic-feedback-destructive-inverse-neutral": "#ef4442",
-    "--semantic-feedback-destructive-inverse-alternative": "#cb292d",
-    "--semantic-feedback-destructive-inverse-assistive": "#a80618",
-    "--semantic-feedback-destructive-inverse-subtle": "#930012",
-    "--semantic-feedback-destructive-inverse-subtler": "#600008",
-    "--semantic-feedback-destructive-normal": "#ba1a22",
-    "--semantic-feedback-destructive-alpha-assistive": "#cb292d89",
-    "--semantic-feedback-destructive-alpha-subtle": "#cb292d5b",
-    "--semantic-feedback-destructive-alpha-subtler": "#cb292d28",
-    "--semantic-feedback-destructive-neutral": "#dd3737",
-    "--semantic-feedback-destructive-alternative": "#ff5450",
-    "--semantic-feedback-destructive-assistive": "#ff8981",
-    "--semantic-feedback-destructive-subtle": "#ffb3ad",
-    "--semantic-feedback-destructive-subtler": "#ffe2df",
-    "--semantic-feedback-destructive-alpha-inverse-assistive": "#ff545089",
-    "--semantic-feedback-destructive-alpha-inverse-subtle": "#ff54505b",
-    "--semantic-feedback-destructive-alpha-inverse-subtler": "#ff545028",
-    "--semantic-feedback-notifying-bold": "#783100",
-    "--semantic-feedback-notifying-normal": "#9e4300",
-    "--semantic-feedback-notifying-neutral": "#c55500",
-    "--semantic-feedback-notifying-alternative": "#ec690a",
-    "--semantic-feedback-notifying-assistive": "#ff8d4c",
-    "--semantic-feedback-notifying-subtle": "#ffb691",
-    "--semantic-feedback-notifying-subtler": "#ffe2d6",
-    "--semantic-feedback-notifying-inverse-bold": "#ffb691",
-    "--semantic-feedback-notifying-inverse-normal": "#fe761c",
-    "--semantic-feedback-notifying-inverse-neutral": "#d95f00",
-    "--semantic-feedback-notifying-inverse-alternative": "#b14c00",
-    "--semantic-feedback-notifying-inverse-assistive": "#8b3a00",
-    "--semantic-feedback-notifying-inverse-subtle": "#783100",
-    "--semantic-feedback-notifying-inverse-subtler": "#4e1d00",
-    "--semantic-feedback-notifying-alpha-assistive": "#b14c0089",
-    "--semantic-feedback-notifying-alpha-subtle": "#b14c005b",
-    "--semantic-feedback-notifying-alpha-subtler": "#b14c0028",
-    "--semantic-feedback-notifying-alpha-inverse-assistive": "#ec690a89",
-    "--semantic-feedback-notifying-alpha-inverse-subtle": "#ec690a5b",
-    "--semantic-feedback-notifying-alpha-inverse-subtler": "#ec690a28",
-    "--semantic-feedback-positive-alpha-subtlest": "#007b350c",
-    "--semantic-feedback-positive-alpha-inverse-subtlest": "#00a74b0c",
-    "--semantic-feedback-destructive-alpha-subtlest": "#cb292d0c",
-    "--semantic-feedback-destructive-alpha-inverse-subtlest": "#ff54500c",
-    "--semantic-feedback-notifying-alpha-subtlest": "#b14c000c",
-    "--semantic-feedback-notifying-alpha-inverse-subtlest": "#ec690a0c",
-    "--semantic-fill-bolder": "#292c35",
-    "--semantic-fill-normal": "#5c5e68",
-    "--semantic-fill-inverse-bolder": "#e7e7f3",
-    "--semantic-fill-inverse-normal": "#9c9da8",
-    "--semantic-object-bolder": "#292c35",
-    "--semantic-object-normal": "#5c5e68",
-    "--semantic-object-subtler": "#0e0e8519",
-    "--semantic-object-subtlest": "#5614ff07",
-    "--semantic-object-inverse-bolder": "#e7e7f3",
-    "--semantic-object-inverse-normal": "#9c9da8",
-    "--semantic-object-inverse-subtler": "#e2f0f814",
-    "--semantic-object-inverse-subtlest": "#dfe1eb05",
-    "--semantic-object-static-bolder": "#292c35",
-    "--semantic-object-static-normal": "#5c5e68",
-    "--semantic-object-static-subtler": "#0e0e8519",
-    "--semantic-object-static-subtlest": "#5614ff07",
-    "--semantic-object-static-inverse-bolder": "#e7e7f3",
-    "--semantic-object-static-inverse-normal": "#9c9da8",
-    "--semantic-object-static-inverse-subtler": "#e2f0f814",
-    "--semantic-object-static-inverse-subtlest": "#dfe1eb05",
-    "--semantic-surface-static-shallowest": "#ffffff",
-    "--semantic-surface-static-shallower": "#ffffff",
-    "--semantic-surface-static-shallow": "#ffffff",
-    "--semantic-surface-static-standard": "#ffffff",
-    "--semantic-surface-static-deep": "#faf8ff",
-    "--semantic-surface-static-deeper": "#f2f3ff",
-    "--semantic-surface-static-deepest": "#ecedf9",
-    "--semantic-surface-static-inverse-shallowest": "#393b44",
-    "--semantic-surface-static-inverse-shallower": "#292c35",
-    "--semantic-surface-static-inverse-shallow": "#21232c",
-    "--semantic-surface-static-inverse-standard": "#191b24",
-    "--semantic-surface-static-inverse-deep": "#1d1f28",
-    "--semantic-surface-static-inverse-deeper": "#21232c",
-    "--semantic-surface-static-inverse-deepest": "#252830",
-    "--semantic-accent-alpha-inverse-assistive": "#7087ff89",
-    "--semantic-theme-red-alpha-subtlest": "#cb292d0c",
-    "--semantic-theme-red-bolder": "#600008",
-    "--semantic-theme-orange-bolder": "#4e1d00",
-    "--semantic-theme-orange-alpha-subtlest": "#b14c000c",
-    "--semantic-theme-amber-bolder": "#412600",
-    "--semantic-theme-amber-alpha-subtlest": "#955f000c",
-    "--semantic-theme-yellow-bolder": "#3a2a00",
-    "--semantic-theme-yellow-alpha-subtlest": "#8765000c",
-    "--semantic-theme-lime-bolder": "#1d3200",
-    "--semantic-theme-lime-alpha-subtlest": "#4b76000c",
-    "--semantic-theme-green-bolder": "#003412",
-    "--semantic-theme-green-alpha-subtlest": "#007b350c",
-    "--semantic-theme-emerald-bolder": "#003321",
-    "--semantic-theme-emerald-alpha-subtlest": "#007a540c",
-    "--semantic-theme-teal-bolder": "#00332d",
-    "--semantic-theme-teal-alpha-subtlest": "#00786c0c",
-    "--semantic-theme-cyan-alpha-subtlest": "#0075890c",
-    "--semantic-theme-cyan-bolder": "#00313b",
-    "--semantic-theme-sky-alpha-subtlest": "#0071a30c",
-    "--semantic-theme-sky-bolder": "#002f47",
-    "--semantic-theme-blue-bolder": "#002a61",
-    "--semantic-theme-blue-alpha-subtlest": "#0166d80c",
-    "--semantic-theme-violet-bolder": "#370086",
-    "--semantic-theme-violet-alpha-subtlest": "#7a4ae30c",
-    "--semantic-theme-purple-alpha-subtlest": "#923be00c",
-    "--semantic-theme-purple-bolder": "#440076",
-    "--semantic-theme-fuchsia-alpha-subtlest": "#b315cd0c",
-    "--semantic-theme-fuchsia-bolder": "#50005d",
-    "--semantic-theme-pink-bolder": "#5c0034",
-    "--semantic-theme-pink-alpha-subtlest": "#c4267a0c",
-    "--semantic-theme-rose-bolder": "#5f0019",
-    "--semantic-theme-rose-alpha-subtlest": "#ce20460c",
-    "--semantic-feedback-destructive-bolder": "#600008",
-    "--semantic-feedback-destructive-inverse-bolder": "#ffe2df",
-    "--semantic-feedback-positive-bolder": "#003412",
-    "--semantic-feedback-positive-inverse-bolder": "#95ffa6",
-    "--semantic-feedback-notifying-bolder": "#4e1d00",
-    "--semantic-feedback-notifying-inverse-bolder": "#ffe2d6",
-    "--semantic-interaction-subtle": "#b7b8c3",
-    "--semantic-interaction-inverse-subtle": "#444650",
-    "--semantic-stroke-subtler": "#ecedf9",
-    "--semantic-stroke-inverse-subtler": "#252830",
-    "--semantic-stroke-alpha-subtler": "#111cb414",
-    "--semantic-stroke-alpha-inverse-subtler": "#e1f3ec0f",
-    "--semantic-accent-subtlest": "#fbf8ff",
-    "--semantic-accent-inverse-subtlest": "#001463",
-    "--semantic-spacing-1": "1px",
-    "--semantic-spacing-2": "2px",
-    "--semantic-spacing-4": "4px",
-    "--semantic-spacing-6": "6px",
-    "--semantic-spacing-8": "8px",
-    "--semantic-spacing-10": "10px",
-    "--semantic-spacing-12": "12px",
-    "--semantic-spacing-16": "16px",
-    "--semantic-spacing-20": "20px",
-    "--semantic-spacing-24": "24px",
-    "--semantic-spacing-32": "32px",
-    "--semantic-spacing-40": "40px",
-    "--semantic-spacing-48": "48px",
-    "--semantic-spacing-56": "56px",
-    "--semantic-radius-4": "4px",
-    "--semantic-radius-8": "8px",
-    "--semantic-radius-10": "10px",
-    "--semantic-radius-16": "16px",
-    "--semantic-radius-24": "24px",
-    "--semantic-radius-max": "9999px",
-    "--semantic-stroke-weight-1": "1",
-    "--semantic-stroke-weight-2": "2",
-    "--semantic-stroke-weight-4": "4",
-    "--semantic-stroke-weight-6": "6",
-    "--semantic-opacity-0": "0",
-    "--semantic-opacity-5": "5",
-    "--semantic-opacity-8": "8",
-    "--semantic-opacity-12": "12",
-    "--semantic-opacity-16": "16",
-    "--semantic-opacity-23": "23",
-    "--semantic-opacity-29": "29",
-    "--semantic-opacity-36": "36",
-    "--semantic-opacity-44": "44",
-    "--semantic-opacity-54": "54",
-    "--semantic-opacity-63": "63",
-    "--semantic-opacity-76": "76",
-    "--semantic-opacity-100": "100",
-    "--semantic-radius-6": "6px",
-    "--semantic-spacing-0": "0px",
-    "--semantic-radius-2": "2px",
-    "--semantic-opacity-91": "91",
-    "--semantic-breakpoint-min": "1200",
-    "--semantic-breakpoint-max": "2560",
-    "--semantic-margin-lg": "28px",
-    "--semantic-margin-md": "24px",
-    "--semantic-radius-12": "12px",
-    "--semantic-radius-0": "0px",
-    "--semantic-margin-sm": "20px",
-    "--semantic-margin-xl": "32px",
-    "--semantic-spacing-64": "64px",
-    "--semantic-spacing-72": "72px",
-    "--semantic-margin-2xl": "40px",
-    "--primitive-unit-16": "16",
-    "--primitive-unit-20": "20",
-    "--primitive-unit-12": "12",
-    "--primitive-unit-72": "72",
-    "--primitive-unit-6": "6",
-    "--primitive-unit-144": "144",
-    "--primitive-unit-112": "112",
-    "--primitive-unit-96": "96",
-    "--primitive-unit-128": "128",
-    "--primitive-unit-2": "2",
-    "--primitive-unit-4": "4",
-    "--primitive-unit-80": "80",
-    "--primitive-unit-64": "64",
-    "--primitive-unit-56": "56",
-    "--primitive-unit-48": "48",
-    "--primitive-unit-24": "24",
-    "--primitive-unit-40": "40",
-    "--primitive-unit-10": "10",
-    "--primitive-unit-32": "32",
-    "--primitive-unit-1": "1",
-    "--primitive-unit-8": "8",
-    "--primitive-unit-28": "28",
-    "--primitive-unit-0": "0",
-    "--semantic-spacing-80": "80px",
-    "--semantic-spacing-96": "96px",
-    "--semantic-spacing-112": "112px",
-    "--semantic-spacing-128": "128px",
-    "--semantic-spacing-144": "144px",
-    "--semantic-margin-3xl": "48px",
-    "--semantic-margin-xs": "16px",
-    "--primitive-unit-3": "3",
-    "--semantic-spacing-3": "3px",
-    "--semantic-stroke-weight-3": "3",
-    "--semantic-margin-2xs": "12px",
-    "--semantic-spacing-28": "28px",
-    "--semantic-position-24": "24",
-    "--semantic-position-16": "16",
-    "--semantic-position-8": "8",
-    "--semantic-position-4": "4",
-    "--semantic-position-0": "0",
-    "--semantic-position-6": "6",
-    "--semantic-position-2": "2",
-    "--semantic-position-1": "1",
-    "--semantic-position-3": "3",
-    "--semantic-position-12": "12",
-    "--primitive-unit-5": "5",
-    "--semantic-stroke-weight-5": "5",
-    "--primitive-typeface-hero": "Pretendard Variable",
-    "--primitive-typeface-syntax": "D2Coding",
-    "--primitive-font-size-hero-4": "64px",
-    "--primitive-font-size-hero-3": "56px",
-    "--primitive-font-size-hero-2": "48px",
-    "--primitive-font-size-hero-1": "40px",
-    "--primitive-font-size-title-3": "28px",
-    "--primitive-font-size-title-2": "24px",
-    "--primitive-font-size-title-1": "20px",
-    "--primitive-font-size-title-4": "32px",
-    "--primitive-font-size-body-lg": "17px",
-    "--primitive-font-size-body-md": "16px",
-    "--primitive-font-size-body-sm": "15px",
-    "--primitive-font-size-body-xs": "14px",
-    "--primitive-font-size-body-2xs": "13px",
-    "--primitive-font-size-label-lg": "16px",
-    "--primitive-font-size-label-md": "15px",
-    "--primitive-font-size-label-sm": "13px",
-    "--primitive-font-line-height-hero-4": "80px",
-    "--primitive-font-line-height-hero-3": "70px",
-    "--primitive-font-line-height-hero-2": "60px",
-    "--primitive-font-line-height-hero-1": "50px",
-    "--primitive-font-line-height-title-4": "41.599998474121094px",
-    "--primitive-font-line-height-title-3": "36.400001525878906px",
-    "--primitive-font-line-height-title-2": "31.200000762939453px",
-    "--primitive-font-line-height-title-1": "26px",
-    "--primitive-font-line-height-label-lg": "24px",
-    "--primitive-font-line-height-label-md": "22.5px",
-    "--primitive-font-line-height-label-sm": "19.5px",
-    "--primitive-font-line-height-body-lg": "27.200000762939453px",
-    "--primitive-font-line-height-body-md": "25.600000381469727px",
-    "--primitive-font-line-height-body-sm": "24px",
-    "--primitive-font-line-height-body-xs": "22.399999618530273px",
-    "--primitive-font-line-height-body-2xs": "20.799999237060547px",
-    "--primitive-font-letter-spacing-hero-4": "-1.9800000190734863px",
-    "--primitive-font-letter-spacing-hero-3": "-1.5700000524520874px",
-    "--primitive-font-letter-spacing-hero-2": "-1.2000000476837158px",
-    "--primitive-font-letter-spacing-hero-1": "-0.8799999952316284px",
-    "--primitive-font-letter-spacing-title-4": "-0.6399999856948853px",
-    "--primitive-font-letter-spacing-title-3": "-0.47999998927116394px",
-    "--primitive-font-letter-spacing-title-2": "-0.3400000035762787px",
-    "--primitive-font-letter-spacing-title-1": "-0.2199999988079071px",
-    "--primitive-font-letter-spacing-label-lg": "-0.1599999964237213px",
-    "--primitive-font-letter-spacing-label-md": "-0.11999999731779099px",
-    "--primitive-font-letter-spacing-label-sm": "-0.07999999821186066px",
-    "--primitive-font-letter-spacing-body-lg": "0.017000000923871994px",
-    "--primitive-font-letter-spacing-body-md": "0.04500000178813934px",
-    "--primitive-font-letter-spacing-body-sm": "0.0560000017285347px",
-    "--primitive-font-letter-spacing-body-xs": "0.07000000029802322px",
-    "--primitive-font-letter-spacing-body-2xs": "0.07999999821186066px",
-    "--primitive-font-weight-hero-normal": "660",
-    "--primitive-font-weight-title-normal": "570",
-    "--primitive-font-weight-label-normal": "450",
-    "--primitive-font-weight-body-normal": "400",
-    "--primitive-font-weight-hero-bold": "700",
-    "--primitive-font-weight-title-bold": "620",
-    "--primitive-font-weight-label-bold": "500",
-    "--primitive-font-weight-label-subtle": "400",
-    "--primitive-font-weight-body-bold": "430",
-    "--primitive-font-size-syntax-lg": "16px",
-    "--primitive-font-size-syntax-md": "15px",
-    "--primitive-font-size-syntax-sm": "13px",
-    "--primitive-font-weight-syntax-normal": "400",
-    "--primitive-font-line-height-syntax-lg": "27.200000762939453px",
-    "--primitive-font-line-height-syntax-md": "25.5px",
-    "--primitive-font-line-height-syntax-sm": "22.100000381469727px",
-    "--primitive-typeface-title": "Pretendard Variable",
-    "--primitive-typeface-label": "Pretendard Variable",
-    "--primitive-typeface-body": "Pretendard Variable",
-    "--primitive-font-size-label-xs": "12px",
-    "--primitive-font-line-height-label-xs": "18px",
-    "--primitive-font-letter-spacing-label-xs": "-0.05000000074505806px",
-    "--primitive-font-size-syntax-xs": "12px",
-    "--primitive-font-line-height-syntax-xs": "20.399999618530273px"
+  ':root': {
+    '--primitive-flow-20': '#faf8ff',
+    '--primitive-flow-40': '#f2f3ff',
+    '--primitive-flow-80': '#e7e7f3',
+    '--primitive-flow-150': '#d3d4df',
+    '--primitive-flow-200': '#c5c6d1',
+    '--primitive-flow-250': '#b7b8c3',
+    '--primitive-flow-300': '#a9aab6',
+    '--primitive-flow-350': '#9c9da8',
+    '--primitive-flow-400': '#8f909b',
+    '--primitive-flow-500': '#757681',
+    '--primitive-flow-550': '#686a74',
+    '--primitive-red-20': '#fff8f7',
+    '--primitive-red-40': '#fff0ef',
+    '--primitive-red-80': '#ffe2df',
+    '--primitive-red-150': '#ffc7c2',
+    '--primitive-red-250': '#ff9f97',
+    '--primitive-red-350': '#ff7169',
+    '--primitive-red-450': '#ef4442',
+    '--primitive-red-550': '#cb292d',
+    '--primitive-red-650': '#a80618',
+    '--primitive-red-750': '#7d000d',
+    '--primitive-red-800': '#680009',
+    '--primitive-flow-650': '#50525c',
+    '--primitive-flow-450': '#81838e',
+    '--primitive-flow-750': '#393b44',
+    '--primitive-flow-60': '#ecedf9',
+    '--primitive-flow-100': '#e1e2ee',
+    '--primitive-shade-2': '#191b2405',
+    '--primitive-shade-4': '#191b240a',
+    '--primitive-shade-6': '#191b240f',
+    '--primitive-shade-8': '#191b2414',
+    '--primitive-shade-12': '#191b241e',
+    '--primitive-base-0': '#ffffff',
+    '--primitive-base-1000': '#000000',
+    '--primitive-flow-600': '#5c5e68',
+    '--primitive-flow-700': '#444650',
+    '--primitive-flow-800': '#2e3039',
+    '--primitive-red-60': '#ffe9e7',
+    '--primitive-red-100': '#ffdad6',
+    '--primitive-red-200': '#ffb3ad',
+    '--primitive-red-300': '#ff8981',
+    '--primitive-red-400': '#ff5450',
+    '--primitive-red-500': '#dd3737',
+    '--primitive-red-600': '#ba1a22',
+    '--primitive-red-700': '#930012',
+    '--primitive-flow-dark-alpha-20': '#fbf9ff',
+    '--primitive-flow-dark-alpha-40': '#f4f5ff',
+    '--primitive-flow-dark-alpha-400': '#f2f2fc8c',
+    '--primitive-flow-dark-alpha-450': '#edeffc7c',
+    '--primitive-flow-dark-alpha-500': '#ededfb6d',
+    '--primitive-flow-dark-alpha-550': '#edeffb5e',
+    '--primitive-flow-dark-alpha-600': '#ebedf851',
+    '--primitive-flow-dark-alpha-650': '#eef0fb42',
+    '--primitive-flow-dark-alpha-700': '#e4e6f535',
+    '--primitive-flow-dark-alpha-750': '#eff1f926',
+    '--primitive-flow-dark-alpha-800': '#e9ecf519',
+    '--primitive-flow-dark-alpha-60': '#f1f2fdf9',
+    '--primitive-flow-dark-alpha-80': '#f0f0fdf2',
+    '--primitive-flow-dark-alpha-100': '#f1f2fded',
+    '--primitive-flow-dark-alpha-150': '#f1f2fddb',
+    '--primitive-flow-dark-alpha-200': '#f4f4ffc9',
+    '--primitive-flow-dark-alpha-250': '#f0f1feba',
+    '--primitive-flow-dark-alpha-300': '#f0f0feaa',
+    '--primitive-flow-dark-alpha-350': '#f2f2fc9b',
+    '--primitive-flow-light-alpha-20': '#5614ff07',
+    '--primitive-flow-light-alpha-40': '#283aff0f',
+    '--primitive-flow-light-alpha-60': '#111cb414',
+    '--primitive-flow-light-alpha-80': '#0e0e8519',
+    '--primitive-flow-light-alpha-100': '#040b701e',
+    '--primitive-flow-light-alpha-150': '#0a104b2d',
+    '--primitive-flow-light-alpha-200': '#0207353a',
+    '--primitive-flow-light-alpha-250': '#07093149',
+    '--primitive-flow-light-alpha-300': '#01042656',
+    '--primitive-flow-light-alpha-350': '#01042263',
+    '--primitive-flow-light-alpha-400': '#00031e70',
+    '--primitive-flow-light-alpha-450': '#02061b7f',
+    '--primitive-flow-light-alpha-500': '#04051a8c',
+    '--primitive-flow-light-alpha-550': '#02061699',
+    '--primitive-flow-light-alpha-600': '#000314a3',
+    '--primitive-flow-light-alpha-650': '#010413af',
+    '--primitive-flow-light-alpha-700': '#010412bc',
+    '--primitive-flow-light-alpha-750': '#00030ec6',
+    '--primitive-flow-light-alpha-800': '#00030fd1',
+    '--primitive-orange-20': '#fff8f6',
+    '--primitive-orange-40': '#fff1eb',
+    '--primitive-orange-60': '#ffeae0',
+    '--primitive-orange-80': '#ffe2d6',
+    '--primitive-orange-100': '#ffdbcb',
+    '--primitive-orange-150': '#ffc9ae',
+    '--primitive-orange-200': '#ffb691',
+    '--primitive-orange-250': '#ffa271',
+    '--primitive-orange-300': '#ff8d4c',
+    '--primitive-orange-350': '#fe761c',
+    '--primitive-orange-400': '#ec690a',
+    '--primitive-orange-450': '#d95f00',
+    '--primitive-orange-500': '#c55500',
+    '--primitive-orange-550': '#b14c00',
+    '--primitive-orange-600': '#9e4300',
+    '--primitive-orange-650': '#8b3a00',
+    '--primitive-orange-700': '#783100',
+    '--primitive-orange-750': '#662900',
+    '--primitive-orange-800': '#552100',
+    '--primitive-yellow-20': '#fff8f2',
+    '--primitive-yellow-40': '#fff2dd',
+    '--primitive-yellow-60': '#ffecc8',
+    '--primitive-yellow-80': '#ffe5b2',
+    '--primitive-yellow-100': '#ffdf9b',
+    '--primitive-yellow-150': '#ffce58',
+    '--primitive-yellow-200': '#f7be20',
+    '--primitive-yellow-250': '#e7b007',
+    '--primitive-yellow-300': '#d7a300',
+    '--primitive-yellow-350': '#c69700',
+    '--primitive-yellow-400': '#b68a00',
+    '--primitive-yellow-450': '#a67e00',
+    '--primitive-yellow-500': '#967100',
+    '--primitive-yellow-550': '#876500',
+    '--primitive-yellow-600': '#785a00',
+    '--primitive-yellow-650': '#694e00',
+    '--primitive-yellow-700': '#5b4300',
+    '--primitive-yellow-750': '#4d3800',
+    '--primitive-yellow-800': '#3f2e00',
+    '--primitive-lime-20': '#f0ffd6',
+    '--primitive-lime-40': '#ddffae',
+    '--primitive-lime-60': '#c8ff7f',
+    '--primitive-lime-80': '#b2fe4a',
+    '--primitive-lime-100': '#adf844',
+    '--primitive-lime-150': '#a0e936',
+    '--primitive-lime-200': '#92da26',
+    '--primitive-lime-250': '#85cc10',
+    '--primitive-lime-300': '#7abd00',
+    '--primitive-lime-350': '#70af00',
+    '--primitive-lime-400': '#67a000',
+    '--primitive-lime-450': '#5d9200',
+    '--primitive-lime-500': '#548400',
+    '--primitive-lime-550': '#4b7600',
+    '--primitive-lime-600': '#426900',
+    '--primitive-lime-650': '#395c00',
+    '--primitive-lime-700': '#304f00',
+    '--primitive-lime-750': '#284300',
+    '--primitive-lime-800': '#203600',
+    '--primitive-green-20': '#ebffe8',
+    '--primitive-green-40': '#d2ffd3',
+    '--primitive-green-60': '#b7ffbe',
+    '--primitive-green-80': '#95ffa6',
+    '--primitive-green-100': '#6bff8f',
+    '--primitive-green-150': '#5bf082',
+    '--primitive-green-200': '#4ae176',
+    '--primitive-green-250': '#38d369',
+    '--primitive-green-300': '#21c45d',
+    '--primitive-green-350': '#00b652',
+    '--primitive-green-400': '#00a74b',
+    '--primitive-green-450': '#009843',
+    '--primitive-green-500': '#008a3c',
+    '--primitive-green-550': '#007b35',
+    '--primitive-green-600': '#006e2f',
+    '--primitive-green-650': '#006028',
+    '--primitive-green-700': '#005321',
+    '--primitive-green-750': '#00461b',
+    '--primitive-green-800': '#003915',
+    '--primitive-cyan-20': '#f0fbff',
+    '--primitive-cyan-40': '#e0f8ff',
+    '--primitive-cyan-60': '#d0f4ff',
+    '--primitive-cyan-80': '#bef0ff',
+    '--primitive-cyan-100': '#acedff',
+    '--primitive-cyan-150': '#74e3ff',
+    '--primitive-cyan-200': '#49d7f6',
+    '--primitive-cyan-250': '#34c9e8',
+    '--primitive-cyan-300': '#13bbda',
+    '--primitive-cyan-350': '#00adca',
+    '--primitive-cyan-400': '#009eb9',
+    '--primitive-cyan-450': '#0090a9',
+    '--primitive-cyan-500': '#008399',
+    '--primitive-cyan-550': '#007589',
+    '--primitive-cyan-600': '#00687a',
+    '--primitive-cyan-650': '#005b6b',
+    '--primitive-cyan-700': '#004e5c',
+    '--primitive-cyan-750': '#00424e',
+    '--primitive-cyan-800': '#003640',
+    '--primitive-sky-20': '#f6faff',
+    '--primitive-sky-40': '#ebf5ff',
+    '--primitive-sky-60': '#e0f0ff',
+    '--primitive-sky-80': '#d4ebff',
+    '--primitive-sky-100': '#c9e6ff',
+    '--primitive-sky-150': '#abdaff',
+    '--primitive-sky-200': '#8aceff',
+    '--primitive-sky-250': '#62c2ff',
+    '--primitive-sky-300': '#35b5fb',
+    '--primitive-sky-350': '#19a7ec',
+    '--primitive-sky-400': '#009adb',
+    '--primitive-sky-450': '#008cc8',
+    '--primitive-sky-500': '#007fb5',
+    '--primitive-sky-550': '#0071a3',
+    '--primitive-sky-600': '#006491',
+    '--primitive-sky-650': '#00587f',
+    '--primitive-sky-700': '#004c6e',
+    '--primitive-sky-750': '#00405e',
+    '--primitive-sky-800': '#00344d',
+    '--primitive-blue-20': '#f9f9ff',
+    '--primitive-blue-40': '#f1f3ff',
+    '--primitive-blue-60': '#e9edff',
+    '--primitive-blue-80': '#e0e8ff',
+    '--primitive-blue-100': '#d8e2ff',
+    '--primitive-blue-150': '#c3d4ff',
+    '--primitive-blue-200': '#adc6ff',
+    '--primitive-blue-250': '#97b8ff',
+    '--primitive-blue-300': '#80aaff',
+    '--primitive-blue-350': '#689cff',
+    '--primitive-blue-400': '#4c8eff',
+    '--primitive-blue-450': '#3881f4',
+    '--primitive-blue-500': '#2473e6',
+    '--primitive-blue-550': '#0166d8',
+    '--primitive-blue-600': '#005ac1',
+    '--primitive-blue-650': '#004faa',
+    '--primitive-blue-700': '#004494',
+    '--primitive-blue-750': '#00397e',
+    '--primitive-blue-800': '#002e69',
+    '--primitive-cerulean-blue-20': '#fbf8ff',
+    '--primitive-cerulean-blue-40': '#f4f2ff',
+    '--primitive-cerulean-blue-60': '#ececff',
+    '--primitive-cerulean-blue-80': '#e5e6ff',
+    '--primitive-cerulean-blue-100': '#dee1ff',
+    '--primitive-cerulean-blue-150': '#ccd2ff',
+    '--primitive-cerulean-blue-200': '#bac3ff',
+    '--primitive-cerulean-blue-250': '#a8b4ff',
+    '--primitive-cerulean-blue-300': '#95a6ff',
+    '--primitive-cerulean-blue-350': '#8397ff',
+    '--primitive-cerulean-blue-400': '#7087ff',
+    '--primitive-cerulean-blue-450': '#5d78ff',
+    '--primitive-cerulean-blue-500': '#4a68fc',
+    '--primitive-cerulean-blue-550': '#3b5aef',
+    '--primitive-cerulean-blue-600': '#2a4de2',
+    '--primitive-cerulean-blue-650': '#163ed6',
+    '--primitive-cerulean-blue-700': '#0031c5',
+    '--primitive-cerulean-blue-750': '#0029a9',
+    '--primitive-cerulean-blue-800': '#00208d',
+    '--primitive-violet-20': '#fef7ff',
+    '--primitive-violet-40': '#f8f1ff',
+    '--primitive-violet-60': '#f3eaff',
+    '--primitive-violet-80': '#eee4ff',
+    '--primitive-violet-100': '#e9ddff',
+    '--primitive-violet-150': '#ddcdff',
+    '--primitive-violet-200': '#d0bcff',
+    '--primitive-violet-250': '#c4acff',
+    '--primitive-violet-300': '#b89bff',
+    '--primitive-violet-350': '#ac8aff',
+    '--primitive-violet-400': '#a078ff',
+    '--primitive-violet-450': '#9466ff',
+    '--primitive-violet-500': '#8758f1',
+    '--primitive-violet-550': '#7a4ae3',
+    '--primitive-violet-600': '#6d3bd6',
+    '--primitive-violet-650': '#612bc9',
+    '--primitive-violet-700': '#5517bd',
+    '--primitive-violet-750': '#4900ad',
+    '--primitive-violet-800': '#3c0091',
+    '--primitive-purple-20': '#fff7fe',
+    '--primitive-purple-40': '#fcf0ff',
+    '--primitive-purple-60': '#f8e9ff',
+    '--primitive-purple-80': '#f4e2ff',
+    '--primitive-purple-100': '#f0dbff',
+    '--primitive-purple-150': '#e7c9ff',
+    '--primitive-purple-200': '#deb7ff',
+    '--primitive-purple-250': '#d4a5ff',
+    '--primitive-purple-300': '#cb93ff',
+    '--primitive-purple-350': '#c180ff',
+    '--primitive-purple-400': '#b76cff',
+    '--primitive-purple-450': '#ad59fb',
+    '--primitive-purple-500': '#9f4aed',
+    '--primitive-purple-550': '#923be0',
+    '--primitive-purple-600': '#842ad2',
+    '--primitive-purple-650': '#7714c5',
+    '--primitive-purple-700': '#6900b2',
+    '--primitive-purple-750': '#590099',
+    '--primitive-purple-800': '#4a0080',
+    '--primitive-fuchsia-20': '#fff7fa',
+    '--primitive-fuchsia-40': '#ffeffb',
+    '--primitive-fuchsia-60': '#ffe7fb',
+    '--primitive-fuchsia-80': '#ffdefc',
+    '--primitive-fuchsia-100': '#ffd6fd',
+    '--primitive-fuchsia-150': '#fec0ff',
+    '--primitive-fuchsia-200': '#faabff',
+    '--primitive-fuchsia-250': '#f695ff',
+    '--primitive-fuchsia-300': '#f17eff',
+    '--primitive-fuchsia-350': '#eb64ff',
+    '--primitive-fuchsia-400': '#e14ef8',
+    '--primitive-fuchsia-450': '#d13ee9',
+    '--primitive-fuchsia-500': '#c22cdb',
+    '--primitive-fuchsia-550': '#b315cd',
+    '--primitive-fuchsia-600': '#a200bb',
+    '--primitive-fuchsia-650': '#8f00a4',
+    '--primitive-fuchsia-700': '#7c008f',
+    '--primitive-fuchsia-750': '#69007a',
+    '--primitive-fuchsia-800': '#570065',
+    '--primitive-pink-20': '#fff8f8',
+    '--primitive-pink-40': '#fff0f3',
+    '--primitive-pink-60': '#ffe8ee',
+    '--primitive-pink-80': '#ffe0e9',
+    '--primitive-pink-100': '#ffd9e4',
+    '--primitive-pink-150': '#ffc5d9',
+    '--primitive-pink-200': '#ffb0cd',
+    '--primitive-pink-250': '#ff9ac2',
+    '--primitive-pink-300': '#ff82b7',
+    '--primitive-pink-350': '#ff67ad',
+    '--primitive-pink-400': '#f651a1',
+    '--primitive-pink-450': '#e64394',
+    '--primitive-pink-500': '#d53587',
+    '--primitive-pink-550': '#c4267a',
+    '--primitive-pink-600': '#b4146d',
+    '--primitive-pink-650': '#a20060',
+    '--primitive-pink-700': '#8c0053',
+    '--primitive-pink-750': '#780046',
+    '--primitive-pink-800': '#640039',
+    '--primitive-rose-20': '#fff8f7',
+    '--primitive-rose-40': '#fff0f0',
+    '--primitive-rose-60': '#ffe9e9',
+    '--primitive-rose-80': '#ffe1e2',
+    '--primitive-rose-100': '#ffdadb',
+    '--primitive-rose-150': '#ffc6c9',
+    '--primitive-rose-200': '#ffb2b7',
+    '--primitive-rose-250': '#ff9ea5',
+    '--primitive-rose-300': '#ff8792',
+    '--primitive-rose-350': '#ff6e7f',
+    '--primitive-rose-400': '#ff506b',
+    '--primitive-rose-450': '#f13d5d',
+    '--primitive-rose-500': '#e02f52',
+    '--primitive-rose-550': '#ce2046',
+    '--primitive-rose-600': '#bc0b3b',
+    '--primitive-rose-650': '#a70032',
+    '--primitive-rose-700': '#91002b',
+    '--primitive-rose-750': '#7c0023',
+    '--primitive-rose-800': '#67001c',
+    '--primitive-shade-16': '#191b2428',
+    '--primitive-engross-20': '#fbf8ff',
+    '--primitive-engross-40': '#f4f2ff',
+    '--primitive-engross-60': '#edecff',
+    '--primitive-engross-80': '#e6e6ff',
+    '--primitive-engross-100': '#dfe0ff',
+    '--primitive-engross-150': '#cfd2f7',
+    '--primitive-engross-200': '#c1c4e9',
+    '--primitive-engross-250': '#b3b6db',
+    '--primitive-engross-300': '#a6a9cd',
+    '--primitive-engross-350': '#989bbf',
+    '--primitive-engross-400': '#8b8eb1',
+    '--primitive-engross-450': '#7e81a3',
+    '--primitive-engross-500': '#717596',
+    '--primitive-engross-550': '#656889',
+    '--primitive-engross-600': '#595c7c',
+    '--primitive-engross-650': '#4d5070',
+    '--primitive-engross-700': '#414563',
+    '--primitive-engross-750': '#353957',
+    '--primitive-emerald-20': '#e8ffef',
+    '--primitive-emerald-40': '#cdffe2',
+    '--primitive-emerald-60': '#aeffd5',
+    '--primitive-emerald-80': '#86ffc7',
+    '--primitive-emerald-100': '#6dfcbe',
+    '--primitive-emerald-150': '#5dedb0',
+    '--primitive-emerald-200': '#4cdfa3',
+    '--primitive-emerald-250': '#39d096',
+    '--primitive-emerald-300': '#21c289',
+    '--primitive-emerald-350': '#00b47d',
+    '--primitive-emerald-400': '#00a572',
+    '--primitive-emerald-450': '#009668',
+    '--primitive-emerald-500': '#00885e',
+    '--primitive-emerald-550': '#007a54',
+    '--primitive-emerald-600': '#006c4a',
+    '--primitive-emerald-650': '#005f40',
+    '--primitive-emerald-700': '#005237',
+    '--primitive-emerald-750': '#00452d',
+    '--primitive-emerald-800': '#003824',
+    '--primitive-teal-20': '#e5fff9',
+    '--primitive-teal-40': '#c6fff4',
+    '--primitive-teal-60': '#a0ffef',
+    '--primitive-teal-80': '#76feea',
+    '--primitive-teal-100': '#70f8e5',
+    '--primitive-teal-150': '#5fead7',
+    '--primitive-teal-200': '#4edbc9',
+    '--primitive-teal-250': '#3bcdbb',
+    '--primitive-teal-300': '#23bfad',
+    '--primitive-teal-350': '#00b1a0',
+    '--primitive-teal-400': '#00a393',
+    '--primitive-teal-450': '#009486',
+    '--primitive-teal-500': '#008679',
+    '--primitive-teal-550': '#00786c',
+    '--primitive-teal-600': '#006a60',
+    '--primitive-teal-650': '#005d54',
+    '--primitive-teal-700': '#005048',
+    '--primitive-teal-750': '#00443c',
+    '--primitive-teal-800': '#003731',
+    '--primitive-amber-20': '#fff8f4',
+    '--primitive-amber-40': '#fff1e5',
+    '--primitive-amber-60': '#ffebd6',
+    '--primitive-amber-80': '#ffe4c7',
+    '--primitive-amber-100': '#ffddb7',
+    '--primitive-amber-150': '#ffcb8d',
+    '--primitive-amber-200': '#ffb95d',
+    '--primitive-amber-250': '#fda61a',
+    '--primitive-amber-300': '#ed9900',
+    '--primitive-amber-350': '#db8d00',
+    '--primitive-amber-400': '#c98100',
+    '--primitive-amber-450': '#b87500',
+    '--primitive-amber-500': '#a66a00',
+    '--primitive-amber-550': '#955f00',
+    '--primitive-amber-600': '#855400',
+    '--primitive-amber-650': '#754900',
+    '--primitive-amber-700': '#653e00',
+    '--primitive-amber-750': '#553400',
+    '--primitive-amber-800': '#462a00',
+    '--primitive-engross-800': '#2a2e4c',
+    '--primitive-engross-820': '#262a47',
+    '--primitive-flow-820': '#292c35',
+    '--primitive-flow-840': '#252830',
+    '--primitive-red-820': '#600008',
+    '--primitive-red-840': '#580006',
+    '--primitive-orange-820': '#4e1d00',
+    '--primitive-orange-840': '#471a00',
+    '--primitive-amber-820': '#412600',
+    '--primitive-amber-840': '#3b2300',
+    '--primitive-yellow-820': '#3a2a00',
+    '--primitive-yellow-840': '#342600',
+    '--primitive-lime-820': '#1d3200',
+    '--primitive-lime-840': '#1a2d00',
+    '--primitive-green-820': '#003412',
+    '--primitive-green-840': '#002f10',
+    '--primitive-emerald-820': '#003321',
+    '--primitive-emerald-840': '#002f1e',
+    '--primitive-teal-820': '#00332d',
+    '--primitive-teal-840': '#002e29',
+    '--primitive-cyan-820': '#00313b',
+    '--primitive-cyan-840': '#002c35',
+    '--primitive-sky-820': '#002f47',
+    '--primitive-sky-840': '#002b41',
+    '--primitive-blue-820': '#002a61',
+    '--primitive-blue-840': '#002659',
+    '--primitive-cerulean-blue-820': '#001d83',
+    '--primitive-cerulean-blue-840': '#001a78',
+    '--primitive-violet-820': '#370086',
+    '--primitive-violet-840': '#32007b',
+    '--primitive-purple-820': '#440076',
+    '--primitive-purple-840': '#3e006c',
+    '--primitive-fuchsia-820': '#50005d',
+    '--primitive-fuchsia-840': '#490056',
+    '--primitive-pink-820': '#5c0034',
+    '--primitive-pink-840': '#540030',
+    '--primitive-rose-820': '#5f0019',
+    '--primitive-rose-840': '#570016',
+    '--primitive-flow-light-alpha-820': '#00040fd6',
+    '--primitive-flow-light-alpha-840': '#01040ddb',
+    '--primitive-flow-dark-alpha-820': '#e2f0f814',
+    '--primitive-flow-dark-alpha-860': '#dfe1eb0a',
+    '--primitive-flow-860': '#21232c',
+    '--primitive-flow-light-alpha-860': '#030511e0',
+    '--primitive-flow-dark-alpha-880': '#dfe1eb05',
+    '--primitive-engross-840': '#222642',
+    '--primitive-red-860': '#500005',
+    '--primitive-orange-860': '#411700',
+    '--primitive-amber-860': '#351f00',
+    '--primitive-yellow-860': '#2f2200',
+    '--primitive-lime-860': '#172900',
+    '--primitive-green-860': '#002b0e',
+    '--primitive-emerald-860': '#002a1a',
+    '--primitive-teal-860': '#002924',
+    '--primitive-cyan-860': '#002830',
+    '--primitive-sky-860': '#00263b',
+    '--primitive-blue-860': '#002251',
+    '--primitive-cerulean-blue-860': '#00176e',
+    '--primitive-violet-860': '#2d0070',
+    '--primitive-purple-860': '#380063',
+    '--primitive-fuchsia-860': '#43004e',
+    '--primitive-pink-860': '#4c002b',
+    '--primitive-rose-860': '#4f0013',
+    '--primitive-engross-860': '#1e213e',
+    '--primitive-engross-880': '#191d3a',
+    '--primitive-engross-900': '#151935',
+    '--primitive-immerse-20': '#faf8ff',
+    '--primitive-immerse-40': '#f3f2ff',
+    '--primitive-immerse-60': '#ebedff',
+    '--primitive-immerse-80': '#e5e7fc',
+    '--primitive-immerse-100': '#dfe1f6',
+    '--primitive-immerse-150': '#d1d3e8',
+    '--primitive-immerse-200': '#c3c5d9',
+    '--primitive-immerse-250': '#b5b8cb',
+    '--primitive-immerse-300': '#a8aabe',
+    '--primitive-immerse-350': '#9a9db0',
+    '--primitive-immerse-400': '#8d90a2',
+    '--primitive-immerse-450': '#808395',
+    '--primitive-immerse-500': '#737688',
+    '--primitive-immerse-550': '#676a7b',
+    '--primitive-immerse-600': '#5a5e6f',
+    '--primitive-immerse-650': '#4e5262',
+    '--primitive-immerse-700': '#434656',
+    '--primitive-immerse-750': '#373b4b',
+    '--primitive-immerse-800': '#2c303f',
+    '--primitive-immerse-820': '#282b3b',
+    '--primitive-immerse-840': '#242736',
+    '--primitive-immerse-860': '#202332',
+    '--primitive-immerse-880': '#1b1f2e',
+    '--primitive-immerse-900': '#171b29',
+    '--primitive-flow-880': '#1d1f28',
+    '--primitive-flow-900': '#191b24',
+    '--primitive-flow-light-alpha-880': '#01030ee2',
+    '--primitive-flow-light-alpha-900': '#01030de8',
+    '--primitive-flow-dark-alpha-840': '#e1f3ec0f',
+    '--primitive-flow-dark-alpha-900': '#191b24',
+    '--primitive-red-880': '#480004',
+    '--primitive-red-900': '#410003',
+    '--primitive-orange-880': '#3a1400',
+    '--primitive-orange-900': '#341100',
+    '--primitive-amber-880': '#301b00',
+    '--primitive-amber-900': '#2a1700',
+    '--primitive-yellow-880': '#2a1e00',
+    '--primitive-yellow-900': '#251a00',
+    '--primitive-lime-880': '#142400',
+    '--primitive-lime-900': '#112000',
+    '--primitive-green-880': '#00260b',
+    '--primitive-green-900': '#002109',
+    '--primitive-emerald-880': '#002517',
+    '--primitive-emerald-900': '#002114',
+    '--primitive-teal-880': '#002520',
+    '--primitive-teal-900': '#00201c',
+    '--primitive-cyan-880': '#00232b',
+    '--primitive-cyan-900': '#001f26',
+    '--primitive-sky-880': '#002235',
+    '--primitive-sky-900': '#001e2f',
+    '--primitive-blue-880': '#001e49',
+    '--primitive-blue-900': '#001a41',
+    '--primitive-cerulean-blue-880': '#001463',
+    '--primitive-cerulean-blue-900': '#001159',
+    '--primitive-violet-880': '#280066',
+    '--primitive-violet-900': '#23005c',
+    '--primitive-purple-880': '#320059',
+    '--primitive-purple-900': '#2c0050',
+    '--primitive-fuchsia-880': '#3c0046',
+    '--primitive-fuchsia-900': '#35003f',
+    '--primitive-pink-880': '#450026',
+    '--primitive-pink-900': '#3e0022',
+    '--primitive-rose-880': '#480010',
+    '--primitive-rose-900': '#40000e',
+    '--semantic-duration-200': '200ms',
+    '--semantic-duration-250': '250ms',
+    '--semantic-duration-300': '300ms',
+    '--semantic-duration-350': '350ms',
+    '--semantic-duration-150': '150ms',
+    '--semantic-duration-100': '100ms',
+    '--semantic-duration-50': '50ms',
+    '--semantic-motion-bouncy': 'cubic-bezier(0.25, 1.57, 0.75, 0.9)',
+    '--semantic-motion-fluent': 'cubic-bezier(0.25, 0.1, 0.25, 1)',
+    '--primitive-time-300': '300',
+    '--primitive-time-200': '200',
+    '--primitive-time-250': '250',
+    '--primitive-time-150': '150',
+    '--primitive-time-350': '350',
+    '--primitive-time-100': '100',
+    '--primitive-time-50': '50',
+    '--semantic-motion-leave': 'cubic-bezier(0.42, 0, 0.1, 1)\t',
+    '--semantic-motion-entrance': 'cubic-bezier(0.19, 0.91, 0.38, 1)\t',
+    '--primitive-time-400': '400',
+    '--primitive-time-450': '450',
+    '--primitive-time-500': '500',
+    '--semantic-duration-400': '400ms',
+    '--semantic-duration-450': '450ms',
+    '--semantic-duration-500': '500ms',
+    '--semantic-accent-alpha-assistive': '#3b5aef89',
+    '--semantic-object-neutral': '#04051a8c',
+    '--semantic-object-alternative': '#00031e70',
+    '--semantic-object-assistive': '#01042656',
+    '--semantic-object-subtle': '#0207353a',
+    '--semantic-object-inverse-neutral': '#edeffc7c',
+    '--semantic-object-inverse-alternative': '#edeffb5e',
+    '--semantic-object-inverse-assistive': '#eef0fb42',
+    '--semantic-object-inverse-subtle': '#e4e6f535',
+    '--semantic-accent-bold': '#0031c5',
+    '--semantic-accent-normal': '#2a4de2',
+    '--semantic-object-boldest': '#191b24',
+    '--semantic-object-bold': '#444650',
+    '--semantic-object-inverse-boldest': '#ffffff',
+    '--semantic-object-inverse-bold': '#c5c6d1',
+    '--semantic-surface-standard': '#ffffff',
+    '--semantic-surface-deep': '#faf8ff',
+    '--semantic-surface-deeper': '#f2f3ff',
+    '--semantic-surface-deepest': '#ecedf9',
+    '--semantic-interaction-bold': '#191b24',
+    '--semantic-interaction-normal': '#50525c',
+    '--semantic-interaction-inverse-focus': '#4a68fc',
+    '--semantic-stroke-neutral': '#9c9da8',
+    '--semantic-stroke-alternative': '#b7b8c3',
+    '--semantic-stroke-assistive': '#d3d4df',
+    '--semantic-fill-boldest': '#191b24',
+    '--semantic-fill-bold': '#444650',
+    '--semantic-fill-neutral': '#04051a8c',
+    '--semantic-fill-alternative': '#00031e70',
+    '--semantic-fill-assistive': '#01042656',
+    '--semantic-system-white': '#ffffff',
+    '--semantic-system-black': '#000000',
+    '--semantic-object-static-boldest': '#191b24',
+    '--semantic-object-static-bold': '#444650',
+    '--semantic-object-static-neutral': '#04051a8c',
+    '--semantic-object-static-alternative': '#00031e70',
+    '--semantic-object-static-assistive': '#01042656',
+    '--semantic-object-static-subtle': '#0207353a',
+    '--semantic-object-static-inverse-boldest': '#ffffff',
+    '--semantic-object-static-inverse-bold': '#c5c6d1',
+    '--semantic-object-static-inverse-neutral': '#edeffc7c',
+    '--semantic-object-static-inverse-alternative': '#edeffb5e',
+    '--semantic-object-static-inverse-assistive': '#eef0fb42',
+    '--semantic-object-static-inverse-subtle': '#e4e6f535',
+    '--semantic-interaction-inverse-bold': '#ffffff',
+    '--semantic-interaction-inverse-normal': '#a9aab6',
+    '--semantic-interaction-focus': '#7087ff',
+    '--semantic-stroke-normal': '#757681',
+    '--semantic-stroke-bold': '#50525c',
+    '--semantic-fill-inverse-boldest': '#ffffff',
+    '--semantic-fill-inverse-bold': '#c5c6d1',
+    '--semantic-fill-inverse-neutral': '#edeffc7c',
+    '--semantic-fill-inverse-alternative': '#edeffb5e',
+    '--semantic-fill-inverse-assistive': '#eef0fb42',
+    '--semantic-accent-neutral': '#4a68fc',
+    '--semantic-accent-alpha-subtle': '#3b5aef5b',
+    '--semantic-fill-subtle': '#0207353a',
+    '--semantic-fill-inverse-subtle': '#e4e6f535',
+    '--semantic-stroke-alpha-bold': '#010413af',
+    '--semantic-stroke-alpha-normal': '#04051a8c',
+    '--semantic-stroke-alpha-neutral': '#01042263',
+    '--semantic-stroke-alpha-alternative': '#07093149',
+    '--semantic-stroke-alpha-assistive': '#0a104b2d',
+    '--semantic-accent-inverse-bold': '#bac3ff',
+    '--semantic-accent-inverse-normal': '#8397ff',
+    '--semantic-accent-inverse-neutral': '#5d78ff',
+    '--semantic-accent-alternative': '#7087ff',
+    '--semantic-accent-inverse-alternative': '#3b5aef',
+    '--semantic-accent-alpha-subtler': '#3b5aef28',
+    '--semantic-accent-alpha-inverse-subtle': '#7087ff5b',
+    '--semantic-accent-alpha-inverse-subtler': '#7087ff28',
+    '--semantic-accent-alpha-inverse-subtlest': '#7087ff0c',
+    '--semantic-stroke-subtle': '#e1e2ee',
+    '--semantic-stroke-alpha-subtle': '#040b701e',
+    '--semantic-stroke-inverse-bold': '#a9aab6',
+    '--semantic-stroke-inverse-normal': '#81838e',
+    '--semantic-stroke-inverse-neutral': '#5c5e68',
+    '--semantic-stroke-inverse-alternative': '#444650',
+    '--semantic-stroke-inverse-assistive': '#393b44',
+    '--semantic-stroke-inverse-subtle': '#2e3039',
+    '--semantic-stroke-alpha-inverse-bold': '#f0f0feaa',
+    '--semantic-stroke-alpha-inverse-normal': '#edeffc7c',
+    '--semantic-stroke-alpha-inverse-neutral': '#ebedf851',
+    '--semantic-stroke-alpha-inverse-alternative': '#e4e6f535',
+    '--semantic-stroke-alpha-inverse-assistive': '#eff1f926',
+    '--semantic-stroke-alpha-inverse-subtle': '#e9ecf519',
+    '--semantic-theme-red-bold': '#930012',
+    '--semantic-theme-red-normal': '#ba1a22',
+    '--semantic-theme-red-neutral': '#dd3737',
+    '--semantic-theme-red-alternative': '#ff5450',
+    '--semantic-accent-assistive': '#95a6ff',
+    '--semantic-accent-inverse-assistive': '#163ed6',
+    '--semantic-accent-alpha-subtlest': '#3b5aef0c',
+    '--semantic-surface-inverse-standard': '#191b24',
+    '--semantic-surface-inverse-deep': '#1d1f28',
+    '--semantic-surface-inverse-deeper': '#21232c',
+    '--semantic-surface-inverse-deepest': '#252830',
+    '--semantic-curtain-bright': '#ffffff3a',
+    '--semantic-curtain-dim': '#191b243a',
+    '--semantic-curtain-dimmer': '#191b2470',
+    '--semantic-fill-subtler': '#0e0e8519',
+    '--semantic-fill-inverse-subtler': '#e2f0f814',
+    '--semantic-fill-subtlest': '#5614ff07',
+    '--semantic-fill-inverse-subtlest': '#dfe1eb05',
+    '--semantic-theme-red-assistive': '#ff8981',
+    '--semantic-theme-red-subtle': '#ffb3ad',
+    '--semantic-theme-red-subtler': '#ffe2df',
+    '--semantic-feedback-positive-alpha-subtle': '#007b355b',
+    '--semantic-feedback-positive-alpha-assistive': '#007b3589',
+    '--semantic-feedback-positive-normal': '#006e2f',
+    '--semantic-feedback-positive-alpha-subtler': '#007b3528',
+    '--semantic-feedback-positive-bold': '#005321',
+    '--semantic-accent-subtle': '#bac3ff',
+    '--semantic-accent-inverse-subtle': '#0031c5',
+    '--semantic-interaction-assistive': '#8f909b',
+    '--semantic-interaction-inverse-assistive': '#686a74',
+    '--semantic-feedback-positive-inverse-bold': '#4ae176',
+    '--semantic-feedback-positive-inverse-normal': '#00b652',
+    '--semantic-feedback-positive-inverse-neutral': '#009843',
+    '--semantic-feedback-positive-inverse-alternative': '#007b35',
+    '--semantic-feedback-positive-inverse-assistive': '#006028',
+    '--semantic-feedback-positive-inverse-subtle': '#005321',
+    '--semantic-feedback-positive-inverse-subtler': '#003412',
+    '--semantic-surface-shallow': '#ffffff',
+    '--semantic-surface-inverse-shallow': '#21232c',
+    '--semantic-surface-inverse-shallower': '#292c35',
+    '--semantic-surface-shallower': '#ffffff',
+    '--semantic-surface-shallowest': '#ffffff',
+    '--semantic-surface-inverse-shallowest': '#393b44',
+    '--semantic-accent-subtler': '#e5e6ff',
+    '--semantic-accent-bolder': '#001d83',
+    '--semantic-accent-inverse-bolder': '#e5e6ff',
+    '--semantic-accent-inverse-subtler': '#001d83',
+    '--semantic-theme-red-alpha-assistive': '#cb292d89',
+    '--semantic-theme-red-alpha-subtle': '#cb292d5b',
+    '--semantic-theme-red-alpha-subtler': '#cb292d28',
+    '--semantic-theme-orange-bold': '#783100',
+    '--semantic-theme-orange-normal': '#9e4300',
+    '--semantic-theme-orange-neutral': '#c55500',
+    '--semantic-theme-orange-alternative': '#ec690a',
+    '--semantic-theme-orange-assistive': '#ff8d4c',
+    '--semantic-theme-orange-subtle': '#ffb691',
+    '--semantic-theme-orange-subtler': '#ffe2d6',
+    '--semantic-theme-orange-alpha-assistive': '#b14c0089',
+    '--semantic-theme-orange-alpha-subtle': '#b14c005b',
+    '--semantic-theme-orange-alpha-subtler': '#b14c0028',
+    '--semantic-theme-amber-bold': '#653e00',
+    '--semantic-theme-amber-normal': '#855400',
+    '--semantic-theme-amber-neutral': '#a66a00',
+    '--semantic-theme-amber-alternative': '#c98100',
+    '--semantic-theme-amber-assistive': '#ed9900',
+    '--semantic-theme-amber-subtle': '#ffb95d',
+    '--semantic-theme-amber-subtler': '#ffe4c7',
+    '--semantic-theme-amber-alpha-assistive': '#955f0089',
+    '--semantic-theme-amber-alpha-subtle': '#955f005b',
+    '--semantic-theme-amber-alpha-subtler': '#955f0028',
+    '--semantic-theme-yellow-bold': '#5b4300',
+    '--semantic-theme-yellow-normal': '#785a00',
+    '--semantic-theme-yellow-neutral': '#967100',
+    '--semantic-theme-yellow-alternative': '#b68a00',
+    '--semantic-theme-yellow-assistive': '#d7a300',
+    '--semantic-theme-yellow-subtle': '#f7be20',
+    '--semantic-theme-yellow-subtler': '#ffe5b2',
+    '--semantic-theme-yellow-alpha-assistive': '#87650089',
+    '--semantic-theme-yellow-alpha-subtle': '#8765005b',
+    '--semantic-theme-yellow-alpha-subtler': '#87650028',
+    '--semantic-theme-lime-bold': '#304f00',
+    '--semantic-theme-lime-normal': '#426900',
+    '--semantic-theme-lime-neutral': '#548400',
+    '--semantic-theme-lime-alternative': '#67a000',
+    '--semantic-theme-lime-assistive': '#7abd00',
+    '--semantic-theme-lime-subtle': '#92da26',
+    '--semantic-theme-lime-subtler': '#b2fe4a',
+    '--semantic-theme-lime-alpha-assistive': '#4b760089',
+    '--semantic-theme-lime-alpha-subtle': '#4b76005b',
+    '--semantic-theme-lime-alpha-subtler': '#4b760028',
+    '--semantic-theme-green-bold': '#005321',
+    '--semantic-theme-green-normal': '#006e2f',
+    '--semantic-theme-green-neutral': '#008a3c',
+    '--semantic-theme-green-alternative': '#00a74b',
+    '--semantic-theme-green-assistive': '#21c45d',
+    '--semantic-theme-green-subtle': '#4ae176',
+    '--semantic-theme-green-subtler': '#95ffa6',
+    '--semantic-theme-green-alpha-assistive': '#007b3589',
+    '--semantic-theme-green-alpha-subtle': '#007b355b',
+    '--semantic-theme-green-alpha-subtler': '#007b3528',
+    '--semantic-theme-emerald-bold': '#005237',
+    '--semantic-theme-emerald-normal': '#006c4a',
+    '--semantic-theme-emerald-neutral': '#00885e',
+    '--semantic-theme-emerald-alternative': '#00a572',
+    '--semantic-theme-emerald-assistive': '#21c289',
+    '--semantic-theme-emerald-subtle': '#4cdfa3',
+    '--semantic-theme-emerald-subtler': '#86ffc7',
+    '--semantic-theme-emerald-alpha-assistive': '#007a5489',
+    '--semantic-theme-emerald-alpha-subtle': '#007a545b',
+    '--semantic-theme-emerald-alpha-subtler': '#007a5428',
+    '--semantic-theme-teal-bold': '#005048',
+    '--semantic-theme-teal-normal': '#006a60',
+    '--semantic-theme-teal-neutral': '#008679',
+    '--semantic-theme-teal-alternative': '#00a393',
+    '--semantic-theme-teal-assistive': '#23bfad',
+    '--semantic-theme-teal-subtle': '#4edbc9',
+    '--semantic-theme-teal-subtler': '#76feea',
+    '--semantic-theme-teal-alpha-assistive': '#00786c89',
+    '--semantic-theme-teal-alpha-subtle': '#00786c5b',
+    '--semantic-theme-teal-alpha-subtler': '#00786c28',
+    '--semantic-theme-cyan-bold': '#004e5c',
+    '--semantic-theme-cyan-normal': '#00687a',
+    '--semantic-theme-cyan-neutral': '#008399',
+    '--semantic-theme-cyan-alternative': '#009eb9',
+    '--semantic-theme-cyan-assistive': '#13bbda',
+    '--semantic-theme-cyan-subtle': '#49d7f6',
+    '--semantic-theme-cyan-subtler': '#bef0ff',
+    '--semantic-theme-cyan-alpha-assistive': '#00758989',
+    '--semantic-theme-cyan-alpha-subtle': '#0075895b',
+    '--semantic-theme-cyan-alpha-subtler': '#00758928',
+    '--semantic-theme-sky-bold': '#004c6e',
+    '--semantic-theme-sky-normal': '#006491',
+    '--semantic-theme-sky-neutral': '#007fb5',
+    '--semantic-theme-sky-alternative': '#009adb',
+    '--semantic-theme-sky-assistive': '#35b5fb',
+    '--semantic-theme-sky-subtle': '#8aceff',
+    '--semantic-theme-sky-subtler': '#d4ebff',
+    '--semantic-theme-sky-alpha-assistive': '#0071a389',
+    '--semantic-theme-sky-alpha-subtle': '#0071a35b',
+    '--semantic-theme-sky-alpha-subtler': '#0071a328',
+    '--semantic-theme-blue-bold': '#004494',
+    '--semantic-theme-blue-normal': '#005ac1',
+    '--semantic-theme-blue-neutral': '#2473e6',
+    '--semantic-theme-blue-alternative': '#4c8eff',
+    '--semantic-theme-blue-assistive': '#80aaff',
+    '--semantic-theme-blue-subtle': '#adc6ff',
+    '--semantic-theme-blue-subtler': '#e0e8ff',
+    '--semantic-theme-blue-alpha-assistive': '#0166d889',
+    '--semantic-theme-blue-alpha-subtle': '#0166d85b',
+    '--semantic-theme-blue-alpha-subtler': '#0166d828',
+    '--semantic-theme-violet-bold': '#5517bd',
+    '--semantic-theme-violet-normal': '#6d3bd6',
+    '--semantic-theme-violet-neutral': '#8758f1',
+    '--semantic-theme-violet-alternative': '#a078ff',
+    '--semantic-theme-violet-assistive': '#b89bff',
+    '--semantic-theme-violet-subtle': '#d0bcff',
+    '--semantic-theme-violet-subtler': '#eee4ff',
+    '--semantic-theme-violet-alpha-assistive': '#7a4ae389',
+    '--semantic-theme-violet-alpha-subtle': '#7a4ae35b',
+    '--semantic-theme-violet-alpha-subtler': '#7a4ae328',
+    '--semantic-theme-purple-bold': '#6900b2',
+    '--semantic-theme-purple-normal': '#842ad2',
+    '--semantic-theme-purple-neutral': '#9f4aed',
+    '--semantic-theme-purple-alternative': '#b76cff',
+    '--semantic-theme-purple-assistive': '#cb93ff',
+    '--semantic-theme-purple-subtle': '#deb7ff',
+    '--semantic-theme-purple-subtler': '#f4e2ff',
+    '--semantic-theme-purple-alpha-assistive': '#923be089',
+    '--semantic-theme-purple-alpha-subtle': '#923be05b',
+    '--semantic-theme-purple-alpha-subtler': '#923be028',
+    '--semantic-theme-fuchsia-bold': '#7c008f',
+    '--semantic-theme-fuchsia-normal': '#a200bb',
+    '--semantic-theme-fuchsia-neutral': '#c22cdb',
+    '--semantic-theme-fuchsia-alternative': '#e14ef8',
+    '--semantic-theme-fuchsia-assistive': '#f17eff',
+    '--semantic-theme-fuchsia-subtle': '#faabff',
+    '--semantic-theme-fuchsia-subtler': '#ffdefc',
+    '--semantic-theme-fuchsia-alpha-assistive': '#b315cd89',
+    '--semantic-theme-fuchsia-alpha-subtle': '#b315cd5b',
+    '--semantic-theme-fuchsia-alpha-subtler': '#b315cd28',
+    '--semantic-theme-pink-bold': '#8c0053',
+    '--semantic-theme-pink-normal': '#b4146d',
+    '--semantic-theme-pink-neutral': '#d53587',
+    '--semantic-theme-pink-alternative': '#f651a1',
+    '--semantic-theme-pink-assistive': '#ff82b7',
+    '--semantic-theme-pink-subtle': '#ffb0cd',
+    '--semantic-theme-pink-subtler': '#ffe0e9',
+    '--semantic-theme-pink-alpha-assistive': '#c4267a89',
+    '--semantic-theme-pink-alpha-subtle': '#c4267a5b',
+    '--semantic-theme-pink-alpha-subtler': '#c4267a28',
+    '--semantic-theme-rose-bold': '#91002b',
+    '--semantic-theme-rose-normal': '#bc0b3b',
+    '--semantic-theme-rose-neutral': '#e02f52',
+    '--semantic-theme-rose-alternative': '#ff506b',
+    '--semantic-theme-rose-assistive': '#ff8792',
+    '--semantic-theme-rose-subtle': '#ffb2b7',
+    '--semantic-theme-rose-subtler': '#ffe1e2',
+    '--semantic-theme-rose-alpha-assistive': '#ce204689',
+    '--semantic-theme-rose-alpha-subtle': '#ce20465b',
+    '--semantic-theme-rose-alpha-subtler': '#ce204628',
+    '--semantic-feedback-positive-assistive': '#21c45d',
+    '--semantic-feedback-positive-subtler': '#95ffa6',
+    '--semantic-feedback-positive-neutral': '#008a3c',
+    '--semantic-feedback-positive-alternative': '#00a74b',
+    '--semantic-feedback-positive-subtle': '#4ae176',
+    '--semantic-feedback-positive-alpha-inverse-assistive': '#00a74b89',
+    '--semantic-feedback-positive-alpha-inverse-subtle': '#00a74b5b',
+    '--semantic-feedback-positive-alpha-inverse-subtler': '#00a74b28',
+    '--semantic-feedback-destructive-bold': '#930012',
+    '--semantic-feedback-destructive-inverse-bold': '#ffb3ad',
+    '--semantic-feedback-destructive-inverse-normal': '#ff7169',
+    '--semantic-feedback-destructive-inverse-neutral': '#ef4442',
+    '--semantic-feedback-destructive-inverse-alternative': '#cb292d',
+    '--semantic-feedback-destructive-inverse-assistive': '#a80618',
+    '--semantic-feedback-destructive-inverse-subtle': '#930012',
+    '--semantic-feedback-destructive-inverse-subtler': '#600008',
+    '--semantic-feedback-destructive-normal': '#ba1a22',
+    '--semantic-feedback-destructive-alpha-assistive': '#cb292d89',
+    '--semantic-feedback-destructive-alpha-subtle': '#cb292d5b',
+    '--semantic-feedback-destructive-alpha-subtler': '#cb292d28',
+    '--semantic-feedback-destructive-neutral': '#dd3737',
+    '--semantic-feedback-destructive-alternative': '#ff5450',
+    '--semantic-feedback-destructive-assistive': '#ff8981',
+    '--semantic-feedback-destructive-subtle': '#ffb3ad',
+    '--semantic-feedback-destructive-subtler': '#ffe2df',
+    '--semantic-feedback-destructive-alpha-inverse-assistive': '#ff545089',
+    '--semantic-feedback-destructive-alpha-inverse-subtle': '#ff54505b',
+    '--semantic-feedback-destructive-alpha-inverse-subtler': '#ff545028',
+    '--semantic-feedback-notifying-bold': '#783100',
+    '--semantic-feedback-notifying-normal': '#9e4300',
+    '--semantic-feedback-notifying-neutral': '#c55500',
+    '--semantic-feedback-notifying-alternative': '#ec690a',
+    '--semantic-feedback-notifying-assistive': '#ff8d4c',
+    '--semantic-feedback-notifying-subtle': '#ffb691',
+    '--semantic-feedback-notifying-subtler': '#ffe2d6',
+    '--semantic-feedback-notifying-inverse-bold': '#ffb691',
+    '--semantic-feedback-notifying-inverse-normal': '#fe761c',
+    '--semantic-feedback-notifying-inverse-neutral': '#d95f00',
+    '--semantic-feedback-notifying-inverse-alternative': '#b14c00',
+    '--semantic-feedback-notifying-inverse-assistive': '#8b3a00',
+    '--semantic-feedback-notifying-inverse-subtle': '#783100',
+    '--semantic-feedback-notifying-inverse-subtler': '#4e1d00',
+    '--semantic-feedback-notifying-alpha-assistive': '#b14c0089',
+    '--semantic-feedback-notifying-alpha-subtle': '#b14c005b',
+    '--semantic-feedback-notifying-alpha-subtler': '#b14c0028',
+    '--semantic-feedback-notifying-alpha-inverse-assistive': '#ec690a89',
+    '--semantic-feedback-notifying-alpha-inverse-subtle': '#ec690a5b',
+    '--semantic-feedback-notifying-alpha-inverse-subtler': '#ec690a28',
+    '--semantic-feedback-positive-alpha-subtlest': '#007b350c',
+    '--semantic-feedback-positive-alpha-inverse-subtlest': '#00a74b0c',
+    '--semantic-feedback-destructive-alpha-subtlest': '#cb292d0c',
+    '--semantic-feedback-destructive-alpha-inverse-subtlest': '#ff54500c',
+    '--semantic-feedback-notifying-alpha-subtlest': '#b14c000c',
+    '--semantic-feedback-notifying-alpha-inverse-subtlest': '#ec690a0c',
+    '--semantic-fill-bolder': '#292c35',
+    '--semantic-fill-normal': '#5c5e68',
+    '--semantic-fill-inverse-bolder': '#e7e7f3',
+    '--semantic-fill-inverse-normal': '#9c9da8',
+    '--semantic-object-bolder': '#292c35',
+    '--semantic-object-normal': '#5c5e68',
+    '--semantic-object-subtler': '#0e0e8519',
+    '--semantic-object-subtlest': '#5614ff07',
+    '--semantic-object-inverse-bolder': '#e7e7f3',
+    '--semantic-object-inverse-normal': '#9c9da8',
+    '--semantic-object-inverse-subtler': '#e2f0f814',
+    '--semantic-object-inverse-subtlest': '#dfe1eb05',
+    '--semantic-object-static-bolder': '#292c35',
+    '--semantic-object-static-normal': '#5c5e68',
+    '--semantic-object-static-subtler': '#0e0e8519',
+    '--semantic-object-static-subtlest': '#5614ff07',
+    '--semantic-object-static-inverse-bolder': '#e7e7f3',
+    '--semantic-object-static-inverse-normal': '#9c9da8',
+    '--semantic-object-static-inverse-subtler': '#e2f0f814',
+    '--semantic-object-static-inverse-subtlest': '#dfe1eb05',
+    '--semantic-surface-static-shallowest': '#ffffff',
+    '--semantic-surface-static-shallower': '#ffffff',
+    '--semantic-surface-static-shallow': '#ffffff',
+    '--semantic-surface-static-standard': '#ffffff',
+    '--semantic-surface-static-deep': '#faf8ff',
+    '--semantic-surface-static-deeper': '#f2f3ff',
+    '--semantic-surface-static-deepest': '#ecedf9',
+    '--semantic-surface-static-inverse-shallowest': '#393b44',
+    '--semantic-surface-static-inverse-shallower': '#292c35',
+    '--semantic-surface-static-inverse-shallow': '#21232c',
+    '--semantic-surface-static-inverse-standard': '#191b24',
+    '--semantic-surface-static-inverse-deep': '#1d1f28',
+    '--semantic-surface-static-inverse-deeper': '#21232c',
+    '--semantic-surface-static-inverse-deepest': '#252830',
+    '--semantic-accent-alpha-inverse-assistive': '#7087ff89',
+    '--semantic-theme-red-alpha-subtlest': '#cb292d0c',
+    '--semantic-theme-red-bolder': '#600008',
+    '--semantic-theme-orange-bolder': '#4e1d00',
+    '--semantic-theme-orange-alpha-subtlest': '#b14c000c',
+    '--semantic-theme-amber-bolder': '#412600',
+    '--semantic-theme-amber-alpha-subtlest': '#955f000c',
+    '--semantic-theme-yellow-bolder': '#3a2a00',
+    '--semantic-theme-yellow-alpha-subtlest': '#8765000c',
+    '--semantic-theme-lime-bolder': '#1d3200',
+    '--semantic-theme-lime-alpha-subtlest': '#4b76000c',
+    '--semantic-theme-green-bolder': '#003412',
+    '--semantic-theme-green-alpha-subtlest': '#007b350c',
+    '--semantic-theme-emerald-bolder': '#003321',
+    '--semantic-theme-emerald-alpha-subtlest': '#007a540c',
+    '--semantic-theme-teal-bolder': '#00332d',
+    '--semantic-theme-teal-alpha-subtlest': '#00786c0c',
+    '--semantic-theme-cyan-alpha-subtlest': '#0075890c',
+    '--semantic-theme-cyan-bolder': '#00313b',
+    '--semantic-theme-sky-alpha-subtlest': '#0071a30c',
+    '--semantic-theme-sky-bolder': '#002f47',
+    '--semantic-theme-blue-bolder': '#002a61',
+    '--semantic-theme-blue-alpha-subtlest': '#0166d80c',
+    '--semantic-theme-violet-bolder': '#370086',
+    '--semantic-theme-violet-alpha-subtlest': '#7a4ae30c',
+    '--semantic-theme-purple-alpha-subtlest': '#923be00c',
+    '--semantic-theme-purple-bolder': '#440076',
+    '--semantic-theme-fuchsia-alpha-subtlest': '#b315cd0c',
+    '--semantic-theme-fuchsia-bolder': '#50005d',
+    '--semantic-theme-pink-bolder': '#5c0034',
+    '--semantic-theme-pink-alpha-subtlest': '#c4267a0c',
+    '--semantic-theme-rose-bolder': '#5f0019',
+    '--semantic-theme-rose-alpha-subtlest': '#ce20460c',
+    '--semantic-feedback-destructive-bolder': '#600008',
+    '--semantic-feedback-destructive-inverse-bolder': '#ffe2df',
+    '--semantic-feedback-positive-bolder': '#003412',
+    '--semantic-feedback-positive-inverse-bolder': '#95ffa6',
+    '--semantic-feedback-notifying-bolder': '#4e1d00',
+    '--semantic-feedback-notifying-inverse-bolder': '#ffe2d6',
+    '--semantic-interaction-subtle': '#b7b8c3',
+    '--semantic-interaction-inverse-subtle': '#444650',
+    '--semantic-stroke-subtler': '#ecedf9',
+    '--semantic-stroke-inverse-subtler': '#252830',
+    '--semantic-stroke-alpha-subtler': '#111cb414',
+    '--semantic-stroke-alpha-inverse-subtler': '#e1f3ec0f',
+    '--semantic-accent-subtlest': '#fbf8ff',
+    '--semantic-accent-inverse-subtlest': '#001463',
+    '--semantic-spacing-1': '1px',
+    '--semantic-spacing-2': '2px',
+    '--semantic-spacing-4': '4px',
+    '--semantic-spacing-6': '6px',
+    '--semantic-spacing-8': '8px',
+    '--semantic-spacing-10': '10px',
+    '--semantic-spacing-12': '12px',
+    '--semantic-spacing-16': '16px',
+    '--semantic-spacing-20': '20px',
+    '--semantic-spacing-24': '24px',
+    '--semantic-spacing-32': '32px',
+    '--semantic-spacing-40': '40px',
+    '--semantic-spacing-48': '48px',
+    '--semantic-spacing-56': '56px',
+    '--semantic-radius-4': '4px',
+    '--semantic-radius-8': '8px',
+    '--semantic-radius-10': '10px',
+    '--semantic-radius-16': '16px',
+    '--semantic-radius-24': '24px',
+    '--semantic-radius-max': '9999px',
+    '--semantic-stroke-weight-1': '1px',
+    '--semantic-stroke-weight-2': '2px',
+    '--semantic-stroke-weight-4': '4px',
+    '--semantic-stroke-weight-6': '6px',
+    '--semantic-opacity-0': '0',
+    '--semantic-opacity-5': '5',
+    '--semantic-opacity-8': '8',
+    '--semantic-opacity-12': '12',
+    '--semantic-opacity-16': '16',
+    '--semantic-opacity-23': '23',
+    '--semantic-opacity-29': '29',
+    '--semantic-opacity-36': '36',
+    '--semantic-opacity-44': '44',
+    '--semantic-opacity-54': '54',
+    '--semantic-opacity-63': '63',
+    '--semantic-opacity-76': '76',
+    '--semantic-opacity-100': '100',
+    '--semantic-radius-6': '6px',
+    '--semantic-spacing-0': '0px',
+    '--semantic-radius-2': '2px',
+    '--semantic-opacity-91': '91',
+    '--semantic-breakpoint-min': '1200',
+    '--semantic-breakpoint-max': '2560',
+    '--semantic-margin-lg': '28px',
+    '--semantic-margin-md': '24px',
+    '--semantic-radius-12': '12px',
+    '--semantic-radius-0': '0px',
+    '--semantic-margin-sm': '20px',
+    '--semantic-margin-xl': '32px',
+    '--semantic-spacing-64': '64px',
+    '--semantic-spacing-72': '72px',
+    '--semantic-margin-2xl': '40px',
+    '--primitive-unit-16': '16',
+    '--primitive-unit-20': '20',
+    '--primitive-unit-12': '12',
+    '--primitive-unit-72': '72',
+    '--primitive-unit-6': '6',
+    '--primitive-unit-144': '144',
+    '--primitive-unit-112': '112',
+    '--primitive-unit-96': '96',
+    '--primitive-unit-128': '128',
+    '--primitive-unit-2': '2',
+    '--primitive-unit-4': '4',
+    '--primitive-unit-80': '80',
+    '--primitive-unit-64': '64',
+    '--primitive-unit-56': '56',
+    '--primitive-unit-48': '48',
+    '--primitive-unit-24': '24',
+    '--primitive-unit-40': '40',
+    '--primitive-unit-10': '10',
+    '--primitive-unit-32': '32',
+    '--primitive-unit-1': '1',
+    '--primitive-unit-8': '8',
+    '--primitive-unit-28': '28',
+    '--primitive-unit-0': '0',
+    '--semantic-spacing-80': '80px',
+    '--semantic-spacing-96': '96px',
+    '--semantic-spacing-112': '112px',
+    '--semantic-spacing-128': '128px',
+    '--semantic-spacing-144': '144px',
+    '--semantic-margin-3xl': '48px',
+    '--semantic-margin-xs': '16px',
+    '--primitive-unit-3': '3',
+    '--semantic-spacing-3': '3px',
+    '--semantic-stroke-weight-3': '3px',
+    '--semantic-margin-2xs': '12px',
+    '--semantic-spacing-28': '28px',
+    '--semantic-position-24': '24',
+    '--semantic-position-16': '16',
+    '--semantic-position-8': '8',
+    '--semantic-position-4': '4',
+    '--semantic-position-0': '0',
+    '--semantic-position-6': '6',
+    '--semantic-position-2': '2',
+    '--semantic-position-1': '1',
+    '--semantic-position-3': '3',
+    '--semantic-position-12': '12',
+    '--primitive-unit-5': '5',
+    '--semantic-stroke-weight-5': '5px',
+    '--primitive-typeface-hero': 'Pretendard Variable',
+    '--primitive-typeface-syntax': 'D2Coding',
+    '--primitive-font-size-hero-4': '64px',
+    '--primitive-font-size-hero-3': '56px',
+    '--primitive-font-size-hero-2': '48px',
+    '--primitive-font-size-hero-1': '40px',
+    '--primitive-font-size-title-3': '28px',
+    '--primitive-font-size-title-2': '24px',
+    '--primitive-font-size-title-1': '20px',
+    '--primitive-font-size-title-4': '32px',
+    '--primitive-font-size-body-lg': '17px',
+    '--primitive-font-size-body-md': '16px',
+    '--primitive-font-size-body-sm': '15px',
+    '--primitive-font-size-body-xs': '14px',
+    '--primitive-font-size-body-2xs': '13px',
+    '--primitive-font-size-label-lg': '16px',
+    '--primitive-font-size-label-md': '15px',
+    '--primitive-font-size-label-sm': '13px',
+    '--primitive-font-line-height-hero-4': '80px',
+    '--primitive-font-line-height-hero-3': '70px',
+    '--primitive-font-line-height-hero-2': '60px',
+    '--primitive-font-line-height-hero-1': '50px',
+    '--primitive-font-line-height-title-4': '41.599998474121094px',
+    '--primitive-font-line-height-title-3': '36.400001525878906px',
+    '--primitive-font-line-height-title-2': '31.200000762939453px',
+    '--primitive-font-line-height-title-1': '26px',
+    '--primitive-font-line-height-label-lg': '24px',
+    '--primitive-font-line-height-label-md': '22.5px',
+    '--primitive-font-line-height-label-sm': '19.5px',
+    '--primitive-font-line-height-body-lg': '27.200000762939453px',
+    '--primitive-font-line-height-body-md': '25.600000381469727px',
+    '--primitive-font-line-height-body-sm': '24px',
+    '--primitive-font-line-height-body-xs': '22.399999618530273px',
+    '--primitive-font-line-height-body-2xs': '20.799999237060547px',
+    '--primitive-font-letter-spacing-hero-4': '-1.9800000190734863px',
+    '--primitive-font-letter-spacing-hero-3': '-1.5700000524520874px',
+    '--primitive-font-letter-spacing-hero-2': '-1.2000000476837158px',
+    '--primitive-font-letter-spacing-hero-1': '-0.8799999952316284px',
+    '--primitive-font-letter-spacing-title-4': '-0.6399999856948853px',
+    '--primitive-font-letter-spacing-title-3': '-0.47999998927116394px',
+    '--primitive-font-letter-spacing-title-2': '-0.3400000035762787px',
+    '--primitive-font-letter-spacing-title-1': '-0.2199999988079071px',
+    '--primitive-font-letter-spacing-label-lg': '-0.1599999964237213px',
+    '--primitive-font-letter-spacing-label-md': '-0.11999999731779099px',
+    '--primitive-font-letter-spacing-label-sm': '-0.07999999821186066px',
+    '--primitive-font-letter-spacing-body-lg': '0.017000000923871994px',
+    '--primitive-font-letter-spacing-body-md': '0.04500000178813934px',
+    '--primitive-font-letter-spacing-body-sm': '0.0560000017285347px',
+    '--primitive-font-letter-spacing-body-xs': '0.07000000029802322px',
+    '--primitive-font-letter-spacing-body-2xs': '0.07999999821186066px',
+    '--primitive-font-weight-hero-normal': '660',
+    '--primitive-font-weight-title-normal': '570',
+    '--primitive-font-weight-label-normal': '450',
+    '--primitive-font-weight-body-normal': '400',
+    '--primitive-font-weight-hero-bold': '700',
+    '--primitive-font-weight-title-bold': '620',
+    '--primitive-font-weight-label-bold': '500',
+    '--primitive-font-weight-label-subtle': '400',
+    '--primitive-font-weight-body-bold': '430',
+    '--primitive-font-size-syntax-lg': '16px',
+    '--primitive-font-size-syntax-md': '15px',
+    '--primitive-font-size-syntax-sm': '13px',
+    '--primitive-font-weight-syntax-normal': '400',
+    '--primitive-font-line-height-syntax-lg': '27.200000762939453px',
+    '--primitive-font-line-height-syntax-md': '25.5px',
+    '--primitive-font-line-height-syntax-sm': '22.100000381469727px',
+    '--primitive-typeface-title': 'Pretendard Variable',
+    '--primitive-typeface-label': 'Pretendard Variable',
+    '--primitive-typeface-body': 'Pretendard Variable',
+    '--primitive-font-size-label-xs': '12px',
+    '--primitive-font-line-height-label-xs': '18px',
+    '--primitive-font-letter-spacing-label-xs': '-0.05000000074505806px',
+    '--primitive-font-size-syntax-xs': '12px',
+    '--primitive-font-line-height-syntax-xs': '20.399999618530273px',
   },
-  "semantic-textStyle-hero-4": {
-    "fontSize": "var(--primitive-font-size-hero-4)",
-    "lineHeight": "var(--primitive-font-line-height-hero-4)",
-    "fontFamily": "var(--primitive-typeface-hero)",
-    "fontWeight": "var(--primitive-font-weight-hero-bold)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-hero-4)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-hero-4': {
+    fontSize: 'var(--primitive-font-size-hero-4)',
+    lineHeight: 'var(--primitive-font-line-height-hero-4)',
+    fontFamily: 'var(--primitive-typeface-hero)',
+    fontWeight: 'var(--primitive-font-weight-hero-bold)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-hero-4)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-hero-3": {
-    "fontSize": "var(--primitive-font-size-hero-3)",
-    "lineHeight": "var(--primitive-font-line-height-hero-3)",
-    "fontFamily": "var(--primitive-typeface-hero)",
-    "fontWeight": "var(--primitive-font-weight-hero-bold)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-hero-3)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-hero-3': {
+    fontSize: 'var(--primitive-font-size-hero-3)',
+    lineHeight: 'var(--primitive-font-line-height-hero-3)',
+    fontFamily: 'var(--primitive-typeface-hero)',
+    fontWeight: 'var(--primitive-font-weight-hero-bold)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-hero-3)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-hero-2": {
-    "fontSize": "var(--primitive-font-size-hero-2)",
-    "lineHeight": "var(--primitive-font-line-height-hero-2)",
-    "fontFamily": "var(--primitive-typeface-hero)",
-    "fontWeight": "var(--primitive-font-weight-hero-normal)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-hero-2)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-hero-2': {
+    fontSize: 'var(--primitive-font-size-hero-2)',
+    lineHeight: 'var(--primitive-font-line-height-hero-2)',
+    fontFamily: 'var(--primitive-typeface-hero)',
+    fontWeight: 'var(--primitive-font-weight-hero-normal)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-hero-2)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-hero-1": {
-    "fontSize": "var(--primitive-font-size-hero-1)",
-    "lineHeight": "var(--primitive-font-line-height-hero-1)",
-    "fontFamily": "var(--primitive-typeface-hero)",
-    "fontWeight": "var(--primitive-font-weight-hero-normal)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-hero-1)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-hero-1': {
+    fontSize: 'var(--primitive-font-size-hero-1)',
+    lineHeight: 'var(--primitive-font-line-height-hero-1)',
+    fontFamily: 'var(--primitive-typeface-hero)',
+    fontWeight: 'var(--primitive-font-weight-hero-normal)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-hero-1)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-title-4": {
-    "fontSize": "var(--primitive-font-size-title-4)",
-    "lineHeight": "var(--primitive-font-line-height-title-4)",
-    "fontFamily": "var(--primitive-typeface-title)",
-    "fontWeight": "var(--primitive-font-weight-title-bold)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-title-4)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-title-4': {
+    fontSize: 'var(--primitive-font-size-title-4)',
+    lineHeight: 'var(--primitive-font-line-height-title-4)',
+    fontFamily: 'var(--primitive-typeface-title)',
+    fontWeight: 'var(--primitive-font-weight-title-bold)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-title-4)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-title-3": {
-    "fontSize": "var(--primitive-font-size-title-3)",
-    "lineHeight": "var(--primitive-font-line-height-title-3)",
-    "fontFamily": "var(--primitive-typeface-title)",
-    "fontWeight": "var(--primitive-font-weight-title-bold)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-title-3)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-title-3': {
+    fontSize: 'var(--primitive-font-size-title-3)',
+    lineHeight: 'var(--primitive-font-line-height-title-3)',
+    fontFamily: 'var(--primitive-typeface-title)',
+    fontWeight: 'var(--primitive-font-weight-title-bold)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-title-3)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-title-2": {
-    "fontSize": "var(--primitive-font-size-title-2)",
-    "lineHeight": "var(--primitive-font-line-height-title-2)",
-    "fontFamily": "var(--primitive-typeface-title)",
-    "fontWeight": "var(--primitive-font-weight-title-normal)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-title-2)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-title-2': {
+    fontSize: 'var(--primitive-font-size-title-2)',
+    lineHeight: 'var(--primitive-font-line-height-title-2)',
+    fontFamily: 'var(--primitive-typeface-title)',
+    fontWeight: 'var(--primitive-font-weight-title-normal)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-title-2)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-title-1": {
-    "fontSize": "var(--primitive-font-size-title-1)",
-    "lineHeight": "var(--primitive-font-line-height-title-1)",
-    "fontFamily": "var(--primitive-typeface-title)",
-    "fontWeight": "var(--primitive-font-weight-title-normal)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-title-1)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-title-1': {
+    fontSize: 'var(--primitive-font-size-title-1)',
+    lineHeight: 'var(--primitive-font-line-height-title-1)',
+    fontFamily: 'var(--primitive-typeface-title)',
+    fontWeight: 'var(--primitive-font-weight-title-normal)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-title-1)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-label-lg-bold": {
-    "fontSize": "var(--primitive-font-size-label-lg)",
-    "lineHeight": "var(--primitive-font-line-height-label-lg)",
-    "fontFamily": "var(--primitive-typeface-label)",
-    "fontWeight": "var(--primitive-font-weight-label-bold)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-label-lg)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-label-lg-bold': {
+    fontSize: 'var(--primitive-font-size-label-lg)',
+    lineHeight: 'var(--primitive-font-line-height-label-lg)',
+    fontFamily: 'var(--primitive-typeface-label)',
+    fontWeight: 'var(--primitive-font-weight-label-bold)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-label-lg)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-label-lg-normal": {
-    "fontSize": "var(--primitive-font-size-label-lg)",
-    "lineHeight": "var(--primitive-font-line-height-label-lg)",
-    "fontFamily": "var(--primitive-typeface-label)",
-    "fontWeight": "var(--primitive-font-weight-label-normal)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-label-lg)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-label-lg-normal': {
+    fontSize: 'var(--primitive-font-size-label-lg)',
+    lineHeight: 'var(--primitive-font-line-height-label-lg)',
+    fontFamily: 'var(--primitive-typeface-label)',
+    fontWeight: 'var(--primitive-font-weight-label-normal)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-label-lg)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-label-lg-subtle": {
-    "fontSize": "var(--primitive-font-size-label-lg)",
-    "lineHeight": "var(--primitive-font-line-height-label-lg)",
-    "fontFamily": "var(--primitive-typeface-label)",
-    "fontWeight": "var(--primitive-font-weight-label-subtle)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-label-lg)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-label-lg-subtle': {
+    fontSize: 'var(--primitive-font-size-label-lg)',
+    lineHeight: 'var(--primitive-font-line-height-label-lg)',
+    fontFamily: 'var(--primitive-typeface-label)',
+    fontWeight: 'var(--primitive-font-weight-label-subtle)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-label-lg)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-label-md-bold": {
-    "fontSize": "var(--primitive-font-size-label-md)",
-    "lineHeight": "var(--primitive-font-line-height-label-md)",
-    "fontFamily": "var(--primitive-typeface-label)",
-    "fontWeight": "var(--primitive-font-weight-label-bold)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-label-md)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-label-md-bold': {
+    fontSize: 'var(--primitive-font-size-label-md)',
+    lineHeight: 'var(--primitive-font-line-height-label-md)',
+    fontFamily: 'var(--primitive-typeface-label)',
+    fontWeight: 'var(--primitive-font-weight-label-bold)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-label-md)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-label-md-normal": {
-    "fontSize": "var(--primitive-font-size-label-md)",
-    "lineHeight": "var(--primitive-font-line-height-label-md)",
-    "fontFamily": "var(--primitive-typeface-label)",
-    "fontWeight": "var(--primitive-font-weight-label-normal)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-label-md)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-label-md-normal': {
+    fontSize: 'var(--primitive-font-size-label-md)',
+    lineHeight: 'var(--primitive-font-line-height-label-md)',
+    fontFamily: 'var(--primitive-typeface-label)',
+    fontWeight: 'var(--primitive-font-weight-label-normal)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-label-md)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-label-md-subtle": {
-    "fontSize": "var(--primitive-font-size-label-md)",
-    "lineHeight": "var(--primitive-font-line-height-label-md)",
-    "fontFamily": "var(--primitive-typeface-label)",
-    "fontWeight": "var(--primitive-font-weight-label-subtle)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-label-md)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-label-md-subtle': {
+    fontSize: 'var(--primitive-font-size-label-md)',
+    lineHeight: 'var(--primitive-font-line-height-label-md)',
+    fontFamily: 'var(--primitive-typeface-label)',
+    fontWeight: 'var(--primitive-font-weight-label-subtle)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-label-md)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-label-sm-bold": {
-    "fontSize": "var(--primitive-font-size-label-sm)",
-    "lineHeight": "var(--primitive-font-line-height-label-sm)",
-    "fontFamily": "var(--primitive-typeface-label)",
-    "fontWeight": "var(--primitive-font-weight-label-bold)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-label-sm)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-label-sm-bold': {
+    fontSize: 'var(--primitive-font-size-label-sm)',
+    lineHeight: 'var(--primitive-font-line-height-label-sm)',
+    fontFamily: 'var(--primitive-typeface-label)',
+    fontWeight: 'var(--primitive-font-weight-label-bold)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-label-sm)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-label-sm-normal": {
-    "fontSize": "var(--primitive-font-size-label-sm)",
-    "lineHeight": "var(--primitive-font-line-height-label-sm)",
-    "fontFamily": "var(--primitive-typeface-label)",
-    "fontWeight": "var(--primitive-font-weight-label-normal)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-label-sm)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-label-sm-normal': {
+    fontSize: 'var(--primitive-font-size-label-sm)',
+    lineHeight: 'var(--primitive-font-line-height-label-sm)',
+    fontFamily: 'var(--primitive-typeface-label)',
+    fontWeight: 'var(--primitive-font-weight-label-normal)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-label-sm)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-label-sm-subtle": {
-    "fontSize": "var(--primitive-font-size-label-sm)",
-    "lineHeight": "var(--primitive-font-line-height-label-sm)",
-    "fontFamily": "var(--primitive-typeface-label)",
-    "fontWeight": "var(--primitive-font-weight-label-subtle)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-label-sm)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-label-sm-subtle': {
+    fontSize: 'var(--primitive-font-size-label-sm)',
+    lineHeight: 'var(--primitive-font-line-height-label-sm)',
+    fontFamily: 'var(--primitive-typeface-label)',
+    fontWeight: 'var(--primitive-font-weight-label-subtle)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-label-sm)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-label-xs-bold": {
-    "fontSize": "var(--primitive-font-size-label-xs)",
-    "lineHeight": "var(--primitive-font-line-height-label-xs)",
-    "fontFamily": "var(--primitive-typeface-label)",
-    "fontWeight": "var(--primitive-font-weight-label-bold)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-label-xs)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-label-xs-bold': {
+    fontSize: 'var(--primitive-font-size-label-xs)',
+    lineHeight: 'var(--primitive-font-line-height-label-xs)',
+    fontFamily: 'var(--primitive-typeface-label)',
+    fontWeight: 'var(--primitive-font-weight-label-bold)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-label-xs)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-label-xs-normal": {
-    "fontSize": "var(--primitive-font-size-label-xs)",
-    "lineHeight": "var(--primitive-font-line-height-label-xs)",
-    "fontFamily": "var(--primitive-typeface-label)",
-    "fontWeight": "var(--primitive-font-weight-label-normal)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-label-xs)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-label-xs-normal': {
+    fontSize: 'var(--primitive-font-size-label-xs)',
+    lineHeight: 'var(--primitive-font-line-height-label-xs)',
+    fontFamily: 'var(--primitive-typeface-label)',
+    fontWeight: 'var(--primitive-font-weight-label-normal)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-label-xs)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-label-xs-subtle": {
-    "fontSize": "var(--primitive-font-size-label-xs)",
-    "lineHeight": "var(--primitive-font-line-height-label-xs)",
-    "fontFamily": "var(--primitive-typeface-label)",
-    "fontWeight": "var(--primitive-font-weight-label-subtle)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-label-xs)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-label-xs-subtle': {
+    fontSize: 'var(--primitive-font-size-label-xs)',
+    lineHeight: 'var(--primitive-font-line-height-label-xs)',
+    fontFamily: 'var(--primitive-typeface-label)',
+    fontWeight: 'var(--primitive-font-weight-label-subtle)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-label-xs)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-body-lg-bold": {
-    "fontSize": "var(--primitive-font-size-body-lg)",
-    "lineHeight": "var(--primitive-font-line-height-body-lg)",
-    "fontFamily": "var(--primitive-typeface-body)",
-    "fontWeight": "var(--primitive-font-weight-body-bold)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-body-lg)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-body-lg-bold': {
+    fontSize: 'var(--primitive-font-size-body-lg)',
+    lineHeight: 'var(--primitive-font-line-height-body-lg)',
+    fontFamily: 'var(--primitive-typeface-body)',
+    fontWeight: 'var(--primitive-font-weight-body-bold)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-body-lg)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-body-lg-normal": {
-    "fontSize": "var(--primitive-font-size-body-lg)",
-    "lineHeight": "var(--primitive-font-line-height-body-lg)",
-    "fontFamily": "var(--primitive-typeface-body)",
-    "fontWeight": "var(--primitive-font-weight-body-normal)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-body-lg)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-body-lg-normal': {
+    fontSize: 'var(--primitive-font-size-body-lg)',
+    lineHeight: 'var(--primitive-font-line-height-body-lg)',
+    fontFamily: 'var(--primitive-typeface-body)',
+    fontWeight: 'var(--primitive-font-weight-body-normal)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-body-lg)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-body-md-bold": {
-    "fontSize": "var(--primitive-font-size-body-md)",
-    "lineHeight": "var(--primitive-font-line-height-body-md)",
-    "fontFamily": "var(--primitive-typeface-body)",
-    "fontWeight": "var(--primitive-font-weight-body-bold)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-body-md)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-body-md-bold': {
+    fontSize: 'var(--primitive-font-size-body-md)',
+    lineHeight: 'var(--primitive-font-line-height-body-md)',
+    fontFamily: 'var(--primitive-typeface-body)',
+    fontWeight: 'var(--primitive-font-weight-body-bold)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-body-md)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-body-md-normal": {
-    "fontSize": "var(--primitive-font-size-body-md)",
-    "lineHeight": "var(--primitive-font-line-height-body-md)",
-    "fontFamily": "var(--primitive-typeface-body)",
-    "fontWeight": "var(--primitive-font-weight-body-normal)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-body-md)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-body-md-normal': {
+    fontSize: 'var(--primitive-font-size-body-md)',
+    lineHeight: 'var(--primitive-font-line-height-body-md)',
+    fontFamily: 'var(--primitive-typeface-body)',
+    fontWeight: 'var(--primitive-font-weight-body-normal)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-body-md)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-body-sm-bold": {
-    "fontSize": "var(--primitive-font-size-body-sm)",
-    "lineHeight": "var(--primitive-font-line-height-body-sm)",
-    "fontFamily": "var(--primitive-typeface-body)",
-    "fontWeight": "var(--primitive-font-weight-body-bold)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-body-sm)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-body-sm-bold': {
+    fontSize: 'var(--primitive-font-size-body-sm)',
+    lineHeight: 'var(--primitive-font-line-height-body-sm)',
+    fontFamily: 'var(--primitive-typeface-body)',
+    fontWeight: 'var(--primitive-font-weight-body-bold)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-body-sm)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-body-sm-normal": {
-    "fontSize": "var(--primitive-font-size-body-sm)",
-    "lineHeight": "var(--primitive-font-line-height-body-sm)",
-    "fontFamily": "var(--primitive-typeface-body)",
-    "fontWeight": "var(--primitive-font-weight-body-normal)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-body-sm)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-body-sm-normal': {
+    fontSize: 'var(--primitive-font-size-body-sm)',
+    lineHeight: 'var(--primitive-font-line-height-body-sm)',
+    fontFamily: 'var(--primitive-typeface-body)',
+    fontWeight: 'var(--primitive-font-weight-body-normal)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-body-sm)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-body-xs-bold": {
-    "fontSize": "var(--primitive-font-size-body-xs)",
-    "lineHeight": "var(--primitive-font-line-height-body-xs)",
-    "fontFamily": "var(--primitive-typeface-body)",
-    "fontWeight": "var(--primitive-font-weight-body-bold)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-body-xs)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-body-xs-bold': {
+    fontSize: 'var(--primitive-font-size-body-xs)',
+    lineHeight: 'var(--primitive-font-line-height-body-xs)',
+    fontFamily: 'var(--primitive-typeface-body)',
+    fontWeight: 'var(--primitive-font-weight-body-bold)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-body-xs)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-body-xs-normal": {
-    "fontSize": "var(--primitive-font-size-body-xs)",
-    "lineHeight": "var(--primitive-font-line-height-body-xs)",
-    "fontFamily": "var(--primitive-typeface-body)",
-    "fontWeight": "var(--primitive-font-weight-body-normal)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-body-xs)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-body-xs-normal': {
+    fontSize: 'var(--primitive-font-size-body-xs)',
+    lineHeight: 'var(--primitive-font-line-height-body-xs)',
+    fontFamily: 'var(--primitive-typeface-body)',
+    fontWeight: 'var(--primitive-font-weight-body-normal)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-body-xs)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-body-2xs-bold": {
-    "fontSize": "var(--primitive-font-size-body-2xs)",
-    "lineHeight": "var(--primitive-font-line-height-body-2xs)",
-    "fontFamily": "var(--primitive-typeface-body)",
-    "fontWeight": "var(--primitive-font-weight-body-bold)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-body-2xs)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-body-2xs-bold': {
+    fontSize: 'var(--primitive-font-size-body-2xs)',
+    lineHeight: 'var(--primitive-font-line-height-body-2xs)',
+    fontFamily: 'var(--primitive-typeface-body)',
+    fontWeight: 'var(--primitive-font-weight-body-bold)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-body-2xs)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-body-2xs-normal": {
-    "fontSize": "var(--primitive-font-size-body-2xs)",
-    "lineHeight": "var(--primitive-font-line-height-body-2xs)",
-    "fontFamily": "var(--primitive-typeface-body)",
-    "fontWeight": "var(--primitive-font-weight-body-normal)",
-    "letterSpacing": "var(--primitive-font-letter-spacing-body-2xs)",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-body-2xs-normal': {
+    fontSize: 'var(--primitive-font-size-body-2xs)',
+    lineHeight: 'var(--primitive-font-line-height-body-2xs)',
+    fontFamily: 'var(--primitive-typeface-body)',
+    fontWeight: 'var(--primitive-font-weight-body-normal)',
+    letterSpacing: 'var(--primitive-font-letter-spacing-body-2xs)',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-syntax-lg": {
-    "fontSize": "var(--primitive-font-size-syntax-lg)",
-    "lineHeight": "var(--primitive-font-line-height-syntax-lg)",
-    "fontFamily": "var(--primitive-typeface-syntax)",
-    "fontWeight": "var(--primitive-font-weight-syntax-normal)",
-    "letterSpacing": "0%",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-syntax-lg': {
+    fontSize: 'var(--primitive-font-size-syntax-lg)',
+    lineHeight: 'var(--primitive-font-line-height-syntax-lg)',
+    fontFamily: 'var(--primitive-typeface-syntax)',
+    fontWeight: 'var(--primitive-font-weight-syntax-normal)',
+    letterSpacing: '0%',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-syntax-md": {
-    "fontSize": "var(--primitive-font-size-syntax-md)",
-    "lineHeight": "var(--primitive-font-line-height-syntax-md)",
-    "fontFamily": "var(--primitive-typeface-syntax)",
-    "fontWeight": "var(--primitive-font-weight-syntax-normal)",
-    "letterSpacing": "0%",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-syntax-md': {
+    fontSize: 'var(--primitive-font-size-syntax-md)',
+    lineHeight: 'var(--primitive-font-line-height-syntax-md)',
+    fontFamily: 'var(--primitive-typeface-syntax)',
+    fontWeight: 'var(--primitive-font-weight-syntax-normal)',
+    letterSpacing: '0%',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-syntax-sm": {
-    "fontSize": "var(--primitive-font-size-syntax-sm)",
-    "lineHeight": "var(--primitive-font-line-height-syntax-sm)",
-    "fontFamily": "var(--primitive-typeface-syntax)",
-    "fontWeight": "var(--primitive-font-weight-syntax-normal)",
-    "letterSpacing": "0%",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-syntax-sm': {
+    fontSize: 'var(--primitive-font-size-syntax-sm)',
+    lineHeight: 'var(--primitive-font-line-height-syntax-sm)',
+    fontFamily: 'var(--primitive-typeface-syntax)',
+    fontWeight: 'var(--primitive-font-weight-syntax-normal)',
+    letterSpacing: '0%',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "semantic-textStyle-syntax-xs": {
-    "fontSize": "var(--primitive-font-size-syntax-xs)",
-    "lineHeight": "var(--primitive-font-line-height-syntax-xs)",
-    "fontFamily": "var(--primitive-typeface-syntax)",
-    "fontWeight": "var(--primitive-font-weight-syntax-normal)",
-    "letterSpacing": "0%",
-    "paragraphSpacing": "0px",
-    "paragraphIndent": "0px"
+  'semantic-textStyle-syntax-xs': {
+    fontSize: 'var(--primitive-font-size-syntax-xs)',
+    lineHeight: 'var(--primitive-font-line-height-syntax-xs)',
+    fontFamily: 'var(--primitive-typeface-syntax)',
+    fontWeight: 'var(--primitive-font-weight-syntax-normal)',
+    letterSpacing: '0%',
+    paragraphSpacing: '0px',
+    paragraphIndent: '0px',
   },
-  "[data-theme=\"dark\"]": {
-    "--semantic-accent-alpha-assistive": "#7087ff89",
-    "--semantic-object-neutral": "#edeffc7c",
-    "--semantic-object-alternative": "#edeffb5e",
-    "--semantic-object-assistive": "#eef0fb42",
-    "--semantic-object-subtle": "#e4e6f535",
-    "--semantic-object-inverse-neutral": "#04051a8c",
-    "--semantic-object-inverse-alternative": "#00031e70",
-    "--semantic-object-inverse-assistive": "#01042656",
-    "--semantic-object-inverse-subtle": "#0207353a",
-    "--semantic-accent-bold": "#bac3ff",
-    "--semantic-accent-normal": "#8397ff",
-    "--semantic-object-boldest": "#ffffff",
-    "--semantic-object-bold": "#c5c6d1",
-    "--semantic-object-inverse-boldest": "#191b24",
-    "--semantic-object-inverse-bold": "#444650",
-    "--semantic-surface-standard": "#191b24",
-    "--semantic-surface-deep": "#1d1f28",
-    "--semantic-surface-deeper": "#21232c",
-    "--semantic-surface-deepest": "#252830",
-    "--semantic-interaction-bold": "#ffffff",
-    "--semantic-interaction-normal": "#a9aab6",
-    "--semantic-interaction-inverse-focus": "#7087ff",
-    "--semantic-stroke-neutral": "#5c5e68",
-    "--semantic-stroke-alternative": "#444650",
-    "--semantic-stroke-assistive": "#393b44",
-    "--semantic-fill-boldest": "#ffffff",
-    "--semantic-fill-bold": "#c5c6d1",
-    "--semantic-fill-neutral": "#edeffc7c",
-    "--semantic-fill-alternative": "#edeffb5e",
-    "--semantic-fill-assistive": "#eef0fb42",
-    "--semantic-system-white": "#ffffff",
-    "--semantic-system-black": "#000000",
-    "--semantic-object-static-boldest": "#191b24",
-    "--semantic-object-static-bold": "#444650",
-    "--semantic-object-static-neutral": "#04051a8c",
-    "--semantic-object-static-alternative": "#00031e70",
-    "--semantic-object-static-assistive": "#01042656",
-    "--semantic-object-static-subtle": "#0207353a",
-    "--semantic-object-static-inverse-boldest": "#ffffff",
-    "--semantic-object-static-inverse-bold": "#c5c6d1",
-    "--semantic-object-static-inverse-neutral": "#edeffc7c",
-    "--semantic-object-static-inverse-alternative": "#edeffb5e",
-    "--semantic-object-static-inverse-assistive": "#eef0fb42",
-    "--semantic-object-static-inverse-subtle": "#e4e6f535",
-    "--semantic-interaction-inverse-bold": "#191b24",
-    "--semantic-interaction-inverse-normal": "#50525c",
-    "--semantic-interaction-focus": "#4a68fc",
-    "--semantic-stroke-normal": "#81838e",
-    "--semantic-stroke-bold": "#a9aab6",
-    "--semantic-fill-inverse-boldest": "#191b24",
-    "--semantic-fill-inverse-bold": "#444650",
-    "--semantic-fill-inverse-neutral": "#04051a8c",
-    "--semantic-fill-inverse-alternative": "#00031e70",
-    "--semantic-fill-inverse-assistive": "#01042656",
-    "--semantic-accent-neutral": "#5d78ff",
-    "--semantic-accent-alpha-subtle": "#7087ff5b",
-    "--semantic-fill-subtle": "#e4e6f535",
-    "--semantic-fill-inverse-subtle": "#0207353a",
-    "--semantic-stroke-alpha-bold": "#f0f0feaa",
-    "--semantic-stroke-alpha-normal": "#edeffc7c",
-    "--semantic-stroke-alpha-neutral": "#ebedf851",
-    "--semantic-stroke-alpha-alternative": "#e4e6f535",
-    "--semantic-stroke-alpha-assistive": "#eff1f926",
-    "--semantic-accent-inverse-bold": "#0031c5",
-    "--semantic-accent-inverse-normal": "#2a4de2",
-    "--semantic-accent-inverse-neutral": "#4a68fc",
-    "--semantic-accent-alternative": "#3b5aef",
-    "--semantic-accent-inverse-alternative": "#7087ff",
-    "--semantic-accent-alpha-subtler": "#7087ff28",
-    "--semantic-accent-alpha-inverse-subtle": "#3b5aef5b",
-    "--semantic-accent-alpha-inverse-subtler": "#3b5aef28",
-    "--semantic-accent-alpha-inverse-subtlest": "#3b5aef0c",
-    "--semantic-stroke-subtle": "#2e3039",
-    "--semantic-stroke-alpha-subtle": "#e9ecf519",
-    "--semantic-stroke-inverse-bold": "#50525c",
-    "--semantic-stroke-inverse-normal": "#757681",
-    "--semantic-stroke-inverse-neutral": "#9c9da8",
-    "--semantic-stroke-inverse-alternative": "#b7b8c3",
-    "--semantic-stroke-inverse-assistive": "#d3d4df",
-    "--semantic-stroke-inverse-subtle": "#e1e2ee",
-    "--semantic-stroke-alpha-inverse-bold": "#010413af",
-    "--semantic-stroke-alpha-inverse-normal": "#04051a8c",
-    "--semantic-stroke-alpha-inverse-neutral": "#01042263",
-    "--semantic-stroke-alpha-inverse-alternative": "#07093149",
-    "--semantic-stroke-alpha-inverse-assistive": "#0a104b2d",
-    "--semantic-stroke-alpha-inverse-subtle": "#040b701e",
-    "--semantic-theme-red-bold": "#ffb3ad",
-    "--semantic-theme-red-normal": "#ff7169",
-    "--semantic-theme-red-neutral": "#ef4442",
-    "--semantic-theme-red-alternative": "#cb292d",
-    "--semantic-accent-assistive": "#163ed6",
-    "--semantic-accent-inverse-assistive": "#95a6ff",
-    "--semantic-accent-alpha-subtlest": "#7087ff0c",
-    "--semantic-surface-inverse-standard": "#ffffff",
-    "--semantic-surface-inverse-deep": "#faf8ff",
-    "--semantic-surface-inverse-deeper": "#f2f3ff",
-    "--semantic-surface-inverse-deepest": "#ecedf9",
-    "--semantic-curtain-bright": "#ffffff3a",
-    "--semantic-curtain-dim": "#191b24a0",
-    "--semantic-curtain-dimmer": "#191b24c1",
-    "--semantic-fill-subtler": "#e2f0f814",
-    "--semantic-fill-inverse-subtler": "#0e0e8519",
-    "--semantic-fill-subtlest": "#dfe1eb05",
-    "--semantic-fill-inverse-subtlest": "#5614ff07",
-    "--semantic-theme-red-assistive": "#a80618",
-    "--semantic-theme-red-subtle": "#930012",
-    "--semantic-theme-red-subtler": "#600008",
-    "--semantic-feedback-positive-alpha-subtle": "#00a74b5b",
-    "--semantic-feedback-positive-alpha-assistive": "#00a74b89",
-    "--semantic-feedback-positive-normal": "#00b652",
-    "--semantic-feedback-positive-alpha-subtler": "#00a74b28",
-    "--semantic-feedback-positive-bold": "#4ae176",
-    "--semantic-accent-subtle": "#0031c5",
-    "--semantic-accent-inverse-subtle": "#bac3ff",
-    "--semantic-interaction-assistive": "#686a74",
-    "--semantic-interaction-inverse-assistive": "#8f909b",
-    "--semantic-feedback-positive-inverse-bold": "#005321",
-    "--semantic-feedback-positive-inverse-normal": "#006e2f",
-    "--semantic-feedback-positive-inverse-neutral": "#008a3c",
-    "--semantic-feedback-positive-inverse-alternative": "#00a74b",
-    "--semantic-feedback-positive-inverse-assistive": "#21c45d",
-    "--semantic-feedback-positive-inverse-subtle": "#4ae176",
-    "--semantic-feedback-positive-inverse-subtler": "#95ffa6",
-    "--semantic-surface-shallow": "#21232c",
-    "--semantic-surface-inverse-shallow": "#ffffff",
-    "--semantic-surface-inverse-shallower": "#ffffff",
-    "--semantic-surface-shallower": "#292c35",
-    "--semantic-surface-shallowest": "#393b44",
-    "--semantic-surface-inverse-shallowest": "#ffffff",
-    "--semantic-accent-subtler": "#001d83",
-    "--semantic-accent-bolder": "#e5e6ff",
-    "--semantic-accent-inverse-bolder": "#001d83",
-    "--semantic-accent-inverse-subtler": "#e5e6ff",
-    "--semantic-theme-red-alpha-assistive": "#ff545089",
-    "--semantic-theme-red-alpha-subtle": "#ff54505b",
-    "--semantic-theme-red-alpha-subtler": "#ff545028",
-    "--semantic-theme-orange-bold": "#ffb691",
-    "--semantic-theme-orange-normal": "#fe761c",
-    "--semantic-theme-orange-neutral": "#d95f00",
-    "--semantic-theme-orange-alternative": "#b14c00",
-    "--semantic-theme-orange-assistive": "#8b3a00",
-    "--semantic-theme-orange-subtle": "#783100",
-    "--semantic-theme-orange-subtler": "#4e1d00",
-    "--semantic-theme-orange-alpha-assistive": "#ec690a89",
-    "--semantic-theme-orange-alpha-subtle": "#ec690a5b",
-    "--semantic-theme-orange-alpha-subtler": "#ec690a28",
-    "--semantic-theme-amber-bold": "#ffb95d",
-    "--semantic-theme-amber-normal": "#db8d00",
-    "--semantic-theme-amber-neutral": "#b87500",
-    "--semantic-theme-amber-alternative": "#955f00",
-    "--semantic-theme-amber-assistive": "#754900",
-    "--semantic-theme-amber-subtle": "#653e00",
-    "--semantic-theme-amber-subtler": "#412600",
-    "--semantic-theme-amber-alpha-assistive": "#c9810089",
-    "--semantic-theme-amber-alpha-subtle": "#c981005b",
-    "--semantic-theme-amber-alpha-subtler": "#c9810028",
-    "--semantic-theme-yellow-bold": "#f7be20",
-    "--semantic-theme-yellow-normal": "#c69700",
-    "--semantic-theme-yellow-neutral": "#a67e00",
-    "--semantic-theme-yellow-alternative": "#876500",
-    "--semantic-theme-yellow-assistive": "#694e00",
-    "--semantic-theme-yellow-subtle": "#5b4300",
-    "--semantic-theme-yellow-subtler": "#3a2a00",
-    "--semantic-theme-yellow-alpha-assistive": "#b68a0089",
-    "--semantic-theme-yellow-alpha-subtle": "#b68a005b",
-    "--semantic-theme-yellow-alpha-subtler": "#b68a0028",
-    "--semantic-theme-lime-bold": "#92da26",
-    "--semantic-theme-lime-normal": "#70af00",
-    "--semantic-theme-lime-neutral": "#5d9200",
-    "--semantic-theme-lime-alternative": "#4b7600",
-    "--semantic-theme-lime-assistive": "#395c00",
-    "--semantic-theme-lime-subtle": "#304f00",
-    "--semantic-theme-lime-subtler": "#1d3200",
-    "--semantic-theme-lime-alpha-assistive": "#67a00089",
-    "--semantic-theme-lime-alpha-subtle": "#67a0005b",
-    "--semantic-theme-lime-alpha-subtler": "#67a00028",
-    "--semantic-theme-green-bold": "#4ae176",
-    "--semantic-theme-green-normal": "#00b652",
-    "--semantic-theme-green-neutral": "#009843",
-    "--semantic-theme-green-alternative": "#007b35",
-    "--semantic-theme-green-assistive": "#006028",
-    "--semantic-theme-green-subtle": "#005321",
-    "--semantic-theme-green-subtler": "#003412",
-    "--semantic-theme-green-alpha-assistive": "#00a74b89",
-    "--semantic-theme-green-alpha-subtle": "#00a74b5b",
-    "--semantic-theme-green-alpha-subtler": "#00a74b28",
-    "--semantic-theme-emerald-bold": "#4cdfa3",
-    "--semantic-theme-emerald-normal": "#00b47d",
-    "--semantic-theme-emerald-neutral": "#009668",
-    "--semantic-theme-emerald-alternative": "#007a54",
-    "--semantic-theme-emerald-assistive": "#005f40",
-    "--semantic-theme-emerald-subtle": "#005237",
-    "--semantic-theme-emerald-subtler": "#003321",
-    "--semantic-theme-emerald-alpha-assistive": "#00a57289",
-    "--semantic-theme-emerald-alpha-subtle": "#00a5725b",
-    "--semantic-theme-emerald-alpha-subtler": "#00a57228",
-    "--semantic-theme-teal-bold": "#4edbc9",
-    "--semantic-theme-teal-normal": "#00b1a0",
-    "--semantic-theme-teal-neutral": "#009486",
-    "--semantic-theme-teal-alternative": "#00786c",
-    "--semantic-theme-teal-assistive": "#005d54",
-    "--semantic-theme-teal-subtle": "#005048",
-    "--semantic-theme-teal-subtler": "#00332d",
-    "--semantic-theme-teal-alpha-assistive": "#00a39389",
-    "--semantic-theme-teal-alpha-subtle": "#00a3935b",
-    "--semantic-theme-teal-alpha-subtler": "#00a39328",
-    "--semantic-theme-cyan-bold": "#49d7f6",
-    "--semantic-theme-cyan-normal": "#00adca",
-    "--semantic-theme-cyan-neutral": "#0090a9",
-    "--semantic-theme-cyan-alternative": "#007589",
-    "--semantic-theme-cyan-assistive": "#005b6b",
-    "--semantic-theme-cyan-subtle": "#004e5c",
-    "--semantic-theme-cyan-subtler": "#00313b",
-    "--semantic-theme-cyan-alpha-assistive": "#009eb989",
-    "--semantic-theme-cyan-alpha-subtle": "#009eb95b",
-    "--semantic-theme-cyan-alpha-subtler": "#009eb928",
-    "--semantic-theme-sky-bold": "#8aceff",
-    "--semantic-theme-sky-normal": "#19a7ec",
-    "--semantic-theme-sky-neutral": "#008cc8",
-    "--semantic-theme-sky-alternative": "#0071a3",
-    "--semantic-theme-sky-assistive": "#00587f",
-    "--semantic-theme-sky-subtle": "#004c6e",
-    "--semantic-theme-sky-subtler": "#002f47",
-    "--semantic-theme-sky-alpha-assistive": "#009adb89",
-    "--semantic-theme-sky-alpha-subtle": "#009adb5b",
-    "--semantic-theme-sky-alpha-subtler": "#009adb28",
-    "--semantic-theme-blue-bold": "#adc6ff",
-    "--semantic-theme-blue-normal": "#689cff",
-    "--semantic-theme-blue-neutral": "#3881f4",
-    "--semantic-theme-blue-alternative": "#0166d8",
-    "--semantic-theme-blue-assistive": "#004faa",
-    "--semantic-theme-blue-subtle": "#004494",
-    "--semantic-theme-blue-subtler": "#002a61",
-    "--semantic-theme-blue-alpha-assistive": "#4c8eff89",
-    "--semantic-theme-blue-alpha-subtle": "#4c8eff5b",
-    "--semantic-theme-blue-alpha-subtler": "#4c8eff28",
-    "--semantic-theme-violet-bold": "#d0bcff",
-    "--semantic-theme-violet-normal": "#ac8aff",
-    "--semantic-theme-violet-neutral": "#9466ff",
-    "--semantic-theme-violet-alternative": "#7a4ae3",
-    "--semantic-theme-violet-assistive": "#612bc9",
-    "--semantic-theme-violet-subtle": "#5517bd",
-    "--semantic-theme-violet-subtler": "#370086",
-    "--semantic-theme-violet-alpha-assistive": "#a078ff89",
-    "--semantic-theme-violet-alpha-subtle": "#a078ff5b",
-    "--semantic-theme-violet-alpha-subtler": "#a078ff28",
-    "--semantic-theme-purple-bold": "#deb7ff",
-    "--semantic-theme-purple-normal": "#c180ff",
-    "--semantic-theme-purple-neutral": "#ad59fb",
-    "--semantic-theme-purple-alternative": "#923be0",
-    "--semantic-theme-purple-assistive": "#7714c5",
-    "--semantic-theme-purple-subtle": "#6900b2",
-    "--semantic-theme-purple-subtler": "#440076",
-    "--semantic-theme-purple-alpha-assistive": "#b76cff89",
-    "--semantic-theme-purple-alpha-subtle": "#b76cff5b",
-    "--semantic-theme-purple-alpha-subtler": "#b76cff28",
-    "--semantic-theme-fuchsia-bold": "#faabff",
-    "--semantic-theme-fuchsia-normal": "#eb64ff",
-    "--semantic-theme-fuchsia-neutral": "#d13ee9",
-    "--semantic-theme-fuchsia-alternative": "#b315cd",
-    "--semantic-theme-fuchsia-assistive": "#8f00a4",
-    "--semantic-theme-fuchsia-subtle": "#7c008f",
-    "--semantic-theme-fuchsia-subtler": "#50005d",
-    "--semantic-theme-fuchsia-alpha-assistive": "#e14ef889",
-    "--semantic-theme-fuchsia-alpha-subtle": "#e14ef85b",
-    "--semantic-theme-fuchsia-alpha-subtler": "#e14ef828",
-    "--semantic-theme-pink-bold": "#ffb0cd",
-    "--semantic-theme-pink-normal": "#ff67ad",
-    "--semantic-theme-pink-neutral": "#e64394",
-    "--semantic-theme-pink-alternative": "#c4267a",
-    "--semantic-theme-pink-assistive": "#a20060",
-    "--semantic-theme-pink-subtle": "#8c0053",
-    "--semantic-theme-pink-subtler": "#5c0034",
-    "--semantic-theme-pink-alpha-assistive": "#f651a189",
-    "--semantic-theme-pink-alpha-subtle": "#f651a15b",
-    "--semantic-theme-pink-alpha-subtler": "#f651a128",
-    "--semantic-theme-rose-bold": "#ffb2b7",
-    "--semantic-theme-rose-normal": "#ff6e7f",
-    "--semantic-theme-rose-neutral": "#f13d5d",
-    "--semantic-theme-rose-alternative": "#ce2046",
-    "--semantic-theme-rose-assistive": "#a70032",
-    "--semantic-theme-rose-subtle": "#91002b",
-    "--semantic-theme-rose-subtler": "#5f0019",
-    "--semantic-theme-rose-alpha-assistive": "#ff506b89",
-    "--semantic-theme-rose-alpha-subtle": "#ff506b5b",
-    "--semantic-theme-rose-alpha-subtler": "#ff506b28",
-    "--semantic-feedback-positive-assistive": "#006028",
-    "--semantic-feedback-positive-subtler": "#003412",
-    "--semantic-feedback-positive-neutral": "#009843",
-    "--semantic-feedback-positive-alternative": "#007b35",
-    "--semantic-feedback-positive-subtle": "#005321",
-    "--semantic-feedback-positive-alpha-inverse-assistive": "#007b3589",
-    "--semantic-feedback-positive-alpha-inverse-subtle": "#007b355b",
-    "--semantic-feedback-positive-alpha-inverse-subtler": "#007b3528",
-    "--semantic-feedback-destructive-bold": "#ffb3ad",
-    "--semantic-feedback-destructive-inverse-bold": "#930012",
-    "--semantic-feedback-destructive-inverse-normal": "#ba1a22",
-    "--semantic-feedback-destructive-inverse-neutral": "#dd3737",
-    "--semantic-feedback-destructive-inverse-alternative": "#ff5450",
-    "--semantic-feedback-destructive-inverse-assistive": "#ff8981",
-    "--semantic-feedback-destructive-inverse-subtle": "#ffb3ad",
-    "--semantic-feedback-destructive-inverse-subtler": "#ffe2df",
-    "--semantic-feedback-destructive-normal": "#ff7169",
-    "--semantic-feedback-destructive-alpha-assistive": "#ff545089",
-    "--semantic-feedback-destructive-alpha-subtle": "#ff54505b",
-    "--semantic-feedback-destructive-alpha-subtler": "#ff545028",
-    "--semantic-feedback-destructive-neutral": "#ef4442",
-    "--semantic-feedback-destructive-alternative": "#cb292d",
-    "--semantic-feedback-destructive-assistive": "#a80618",
-    "--semantic-feedback-destructive-subtle": "#930012",
-    "--semantic-feedback-destructive-subtler": "#600008",
-    "--semantic-feedback-destructive-alpha-inverse-assistive": "#cb292d89",
-    "--semantic-feedback-destructive-alpha-inverse-subtle": "#cb292d5b",
-    "--semantic-feedback-destructive-alpha-inverse-subtler": "#cb292d28",
-    "--semantic-feedback-notifying-bold": "#ffb691",
-    "--semantic-feedback-notifying-normal": "#fe761c",
-    "--semantic-feedback-notifying-neutral": "#d95f00",
-    "--semantic-feedback-notifying-alternative": "#b14c00",
-    "--semantic-feedback-notifying-assistive": "#8b3a00",
-    "--semantic-feedback-notifying-subtle": "#783100",
-    "--semantic-feedback-notifying-subtler": "#4e1d00",
-    "--semantic-feedback-notifying-inverse-bold": "#783100",
-    "--semantic-feedback-notifying-inverse-normal": "#9e4300",
-    "--semantic-feedback-notifying-inverse-neutral": "#c55500",
-    "--semantic-feedback-notifying-inverse-alternative": "#ec690a",
-    "--semantic-feedback-notifying-inverse-assistive": "#ff8d4c",
-    "--semantic-feedback-notifying-inverse-subtle": "#ffb691",
-    "--semantic-feedback-notifying-inverse-subtler": "#ffe2d6",
-    "--semantic-feedback-notifying-alpha-assistive": "#ec690a89",
-    "--semantic-feedback-notifying-alpha-subtle": "#ec690a5b",
-    "--semantic-feedback-notifying-alpha-subtler": "#ec690a28",
-    "--semantic-feedback-notifying-alpha-inverse-assistive": "#b14c0089",
-    "--semantic-feedback-notifying-alpha-inverse-subtle": "#b14c005b",
-    "--semantic-feedback-notifying-alpha-inverse-subtler": "#b14c0028",
-    "--semantic-feedback-positive-alpha-subtlest": "#00a74b0c",
-    "--semantic-feedback-positive-alpha-inverse-subtlest": "#007b350c",
-    "--semantic-feedback-destructive-alpha-subtlest": "#ff54500c",
-    "--semantic-feedback-destructive-alpha-inverse-subtlest": "#cb292d0c",
-    "--semantic-feedback-notifying-alpha-subtlest": "#ec690a0c",
-    "--semantic-feedback-notifying-alpha-inverse-subtlest": "#b14c000c",
-    "--semantic-fill-bolder": "#e7e7f3",
-    "--semantic-fill-normal": "#9c9da8",
-    "--semantic-fill-inverse-bolder": "#292c35",
-    "--semantic-fill-inverse-normal": "#5c5e68",
-    "--semantic-object-bolder": "#e7e7f3",
-    "--semantic-object-normal": "#9c9da8",
-    "--semantic-object-subtler": "#e2f0f814",
-    "--semantic-object-subtlest": "#dfe1eb05",
-    "--semantic-object-inverse-bolder": "#292c35",
-    "--semantic-object-inverse-normal": "#5c5e68",
-    "--semantic-object-inverse-subtler": "#0e0e8519",
-    "--semantic-object-inverse-subtlest": "#5614ff07",
-    "--semantic-object-static-bolder": "#292c35",
-    "--semantic-object-static-normal": "#5c5e68",
-    "--semantic-object-static-subtler": "#0e0e8519",
-    "--semantic-object-static-subtlest": "#5614ff07",
-    "--semantic-object-static-inverse-bolder": "#e7e7f3",
-    "--semantic-object-static-inverse-normal": "#9c9da8",
-    "--semantic-object-static-inverse-subtler": "#e2f0f814",
-    "--semantic-object-static-inverse-subtlest": "#dfe1eb05",
-    "--semantic-surface-static-shallowest": "#ffffff",
-    "--semantic-surface-static-shallower": "#ffffff",
-    "--semantic-surface-static-shallow": "#ffffff",
-    "--semantic-surface-static-standard": "#ffffff",
-    "--semantic-surface-static-deep": "#faf8ff",
-    "--semantic-surface-static-deeper": "#f2f3ff",
-    "--semantic-surface-static-deepest": "#ecedf9",
-    "--semantic-surface-static-inverse-shallowest": "#393b44",
-    "--semantic-surface-static-inverse-shallower": "#292c35",
-    "--semantic-surface-static-inverse-shallow": "#21232c",
-    "--semantic-surface-static-inverse-standard": "#191b24",
-    "--semantic-surface-static-inverse-deep": "#1d1f28",
-    "--semantic-surface-static-inverse-deeper": "#21232c",
-    "--semantic-surface-static-inverse-deepest": "#252830",
-    "--semantic-accent-alpha-inverse-assistive": "#3b5aef89",
-    "--semantic-theme-red-alpha-subtlest": "#ff54500c",
-    "--semantic-theme-red-bolder": "#ffe2df",
-    "--semantic-theme-orange-bolder": "#ffe2d6",
-    "--semantic-theme-orange-alpha-subtlest": "#ec690a0c",
-    "--semantic-theme-amber-bolder": "#ffe4c7",
-    "--semantic-theme-amber-alpha-subtlest": "#c981000c",
-    "--semantic-theme-yellow-bolder": "#ffe5b2",
-    "--semantic-theme-yellow-alpha-subtlest": "#b68a000c",
-    "--semantic-theme-lime-bolder": "#b2fe4a",
-    "--semantic-theme-lime-alpha-subtlest": "#67a0000c",
-    "--semantic-theme-green-bolder": "#95ffa6",
-    "--semantic-theme-green-alpha-subtlest": "#00a74b0c",
-    "--semantic-theme-emerald-bolder": "#86ffc7",
-    "--semantic-theme-emerald-alpha-subtlest": "#00a5720c",
-    "--semantic-theme-teal-bolder": "#76feea",
-    "--semantic-theme-teal-alpha-subtlest": "#00a3930c",
-    "--semantic-theme-cyan-alpha-subtlest": "#009eb90c",
-    "--semantic-theme-cyan-bolder": "#bef0ff",
-    "--semantic-theme-sky-alpha-subtlest": "#009adb0c",
-    "--semantic-theme-sky-bolder": "#d4ebff",
-    "--semantic-theme-blue-bolder": "#e0e8ff",
-    "--semantic-theme-blue-alpha-subtlest": "#4c8eff0c",
-    "--semantic-theme-violet-bolder": "#eee4ff",
-    "--semantic-theme-violet-alpha-subtlest": "#a078ff0c",
-    "--semantic-theme-purple-alpha-subtlest": "#b76cff0c",
-    "--semantic-theme-purple-bolder": "#f4e2ff",
-    "--semantic-theme-fuchsia-alpha-subtlest": "#e14ef80c",
-    "--semantic-theme-fuchsia-bolder": "#ffdefc",
-    "--semantic-theme-pink-bolder": "#ffe0e9",
-    "--semantic-theme-pink-alpha-subtlest": "#f651a10c",
-    "--semantic-theme-rose-bolder": "#ffe1e2",
-    "--semantic-theme-rose-alpha-subtlest": "#ff506b0c",
-    "--semantic-feedback-destructive-bolder": "#ffe2df",
-    "--semantic-feedback-destructive-inverse-bolder": "#600008",
-    "--semantic-feedback-positive-bolder": "#95ffa6",
-    "--semantic-feedback-positive-inverse-bolder": "#003412",
-    "--semantic-feedback-notifying-bolder": "#ffe2d6",
-    "--semantic-feedback-notifying-inverse-bolder": "#4e1d00",
-    "--semantic-interaction-subtle": "#444650",
-    "--semantic-interaction-inverse-subtle": "#b7b8c3",
-    "--semantic-stroke-subtler": "#252830",
-    "--semantic-stroke-inverse-subtler": "#ecedf9",
-    "--semantic-stroke-alpha-subtler": "#e1f3ec0f",
-    "--semantic-stroke-alpha-inverse-subtler": "#111cb414",
-    "--semantic-accent-subtlest": "#001463",
-    "--semantic-accent-inverse-subtlest": "#fbf8ff"
+  '[data-theme="dark"]': {
+    '--semantic-accent-alpha-assistive': '#7087ff89',
+    '--semantic-object-neutral': '#edeffc7c',
+    '--semantic-object-alternative': '#edeffb5e',
+    '--semantic-object-assistive': '#eef0fb42',
+    '--semantic-object-subtle': '#e4e6f535',
+    '--semantic-object-inverse-neutral': '#04051a8c',
+    '--semantic-object-inverse-alternative': '#00031e70',
+    '--semantic-object-inverse-assistive': '#01042656',
+    '--semantic-object-inverse-subtle': '#0207353a',
+    '--semantic-accent-bold': '#bac3ff',
+    '--semantic-accent-normal': '#8397ff',
+    '--semantic-object-boldest': '#ffffff',
+    '--semantic-object-bold': '#c5c6d1',
+    '--semantic-object-inverse-boldest': '#191b24',
+    '--semantic-object-inverse-bold': '#444650',
+    '--semantic-surface-standard': '#191b24',
+    '--semantic-surface-deep': '#1d1f28',
+    '--semantic-surface-deeper': '#21232c',
+    '--semantic-surface-deepest': '#252830',
+    '--semantic-interaction-bold': '#ffffff',
+    '--semantic-interaction-normal': '#a9aab6',
+    '--semantic-interaction-inverse-focus': '#7087ff',
+    '--semantic-stroke-neutral': '#5c5e68',
+    '--semantic-stroke-alternative': '#444650',
+    '--semantic-stroke-assistive': '#393b44',
+    '--semantic-fill-boldest': '#ffffff',
+    '--semantic-fill-bold': '#c5c6d1',
+    '--semantic-fill-neutral': '#edeffc7c',
+    '--semantic-fill-alternative': '#edeffb5e',
+    '--semantic-fill-assistive': '#eef0fb42',
+    '--semantic-system-white': '#ffffff',
+    '--semantic-system-black': '#000000',
+    '--semantic-object-static-boldest': '#191b24',
+    '--semantic-object-static-bold': '#444650',
+    '--semantic-object-static-neutral': '#04051a8c',
+    '--semantic-object-static-alternative': '#00031e70',
+    '--semantic-object-static-assistive': '#01042656',
+    '--semantic-object-static-subtle': '#0207353a',
+    '--semantic-object-static-inverse-boldest': '#ffffff',
+    '--semantic-object-static-inverse-bold': '#c5c6d1',
+    '--semantic-object-static-inverse-neutral': '#edeffc7c',
+    '--semantic-object-static-inverse-alternative': '#edeffb5e',
+    '--semantic-object-static-inverse-assistive': '#eef0fb42',
+    '--semantic-object-static-inverse-subtle': '#e4e6f535',
+    '--semantic-interaction-inverse-bold': '#191b24',
+    '--semantic-interaction-inverse-normal': '#50525c',
+    '--semantic-interaction-focus': '#4a68fc',
+    '--semantic-stroke-normal': '#81838e',
+    '--semantic-stroke-bold': '#a9aab6',
+    '--semantic-fill-inverse-boldest': '#191b24',
+    '--semantic-fill-inverse-bold': '#444650',
+    '--semantic-fill-inverse-neutral': '#04051a8c',
+    '--semantic-fill-inverse-alternative': '#00031e70',
+    '--semantic-fill-inverse-assistive': '#01042656',
+    '--semantic-accent-neutral': '#5d78ff',
+    '--semantic-accent-alpha-subtle': '#7087ff5b',
+    '--semantic-fill-subtle': '#e4e6f535',
+    '--semantic-fill-inverse-subtle': '#0207353a',
+    '--semantic-stroke-alpha-bold': '#f0f0feaa',
+    '--semantic-stroke-alpha-normal': '#edeffc7c',
+    '--semantic-stroke-alpha-neutral': '#ebedf851',
+    '--semantic-stroke-alpha-alternative': '#e4e6f535',
+    '--semantic-stroke-alpha-assistive': '#eff1f926',
+    '--semantic-accent-inverse-bold': '#0031c5',
+    '--semantic-accent-inverse-normal': '#2a4de2',
+    '--semantic-accent-inverse-neutral': '#4a68fc',
+    '--semantic-accent-alternative': '#3b5aef',
+    '--semantic-accent-inverse-alternative': '#7087ff',
+    '--semantic-accent-alpha-subtler': '#7087ff28',
+    '--semantic-accent-alpha-inverse-subtle': '#3b5aef5b',
+    '--semantic-accent-alpha-inverse-subtler': '#3b5aef28',
+    '--semantic-accent-alpha-inverse-subtlest': '#3b5aef0c',
+    '--semantic-stroke-subtle': '#2e3039',
+    '--semantic-stroke-alpha-subtle': '#e9ecf519',
+    '--semantic-stroke-inverse-bold': '#50525c',
+    '--semantic-stroke-inverse-normal': '#757681',
+    '--semantic-stroke-inverse-neutral': '#9c9da8',
+    '--semantic-stroke-inverse-alternative': '#b7b8c3',
+    '--semantic-stroke-inverse-assistive': '#d3d4df',
+    '--semantic-stroke-inverse-subtle': '#e1e2ee',
+    '--semantic-stroke-alpha-inverse-bold': '#010413af',
+    '--semantic-stroke-alpha-inverse-normal': '#04051a8c',
+    '--semantic-stroke-alpha-inverse-neutral': '#01042263',
+    '--semantic-stroke-alpha-inverse-alternative': '#07093149',
+    '--semantic-stroke-alpha-inverse-assistive': '#0a104b2d',
+    '--semantic-stroke-alpha-inverse-subtle': '#040b701e',
+    '--semantic-theme-red-bold': '#ffb3ad',
+    '--semantic-theme-red-normal': '#ff7169',
+    '--semantic-theme-red-neutral': '#ef4442',
+    '--semantic-theme-red-alternative': '#cb292d',
+    '--semantic-accent-assistive': '#163ed6',
+    '--semantic-accent-inverse-assistive': '#95a6ff',
+    '--semantic-accent-alpha-subtlest': '#7087ff0c',
+    '--semantic-surface-inverse-standard': '#ffffff',
+    '--semantic-surface-inverse-deep': '#faf8ff',
+    '--semantic-surface-inverse-deeper': '#f2f3ff',
+    '--semantic-surface-inverse-deepest': '#ecedf9',
+    '--semantic-curtain-bright': '#ffffff3a',
+    '--semantic-curtain-dim': '#191b24a0',
+    '--semantic-curtain-dimmer': '#191b24c1',
+    '--semantic-fill-subtler': '#e2f0f814',
+    '--semantic-fill-inverse-subtler': '#0e0e8519',
+    '--semantic-fill-subtlest': '#dfe1eb05',
+    '--semantic-fill-inverse-subtlest': '#5614ff07',
+    '--semantic-theme-red-assistive': '#a80618',
+    '--semantic-theme-red-subtle': '#930012',
+    '--semantic-theme-red-subtler': '#600008',
+    '--semantic-feedback-positive-alpha-subtle': '#00a74b5b',
+    '--semantic-feedback-positive-alpha-assistive': '#00a74b89',
+    '--semantic-feedback-positive-normal': '#00b652',
+    '--semantic-feedback-positive-alpha-subtler': '#00a74b28',
+    '--semantic-feedback-positive-bold': '#4ae176',
+    '--semantic-accent-subtle': '#0031c5',
+    '--semantic-accent-inverse-subtle': '#bac3ff',
+    '--semantic-interaction-assistive': '#686a74',
+    '--semantic-interaction-inverse-assistive': '#8f909b',
+    '--semantic-feedback-positive-inverse-bold': '#005321',
+    '--semantic-feedback-positive-inverse-normal': '#006e2f',
+    '--semantic-feedback-positive-inverse-neutral': '#008a3c',
+    '--semantic-feedback-positive-inverse-alternative': '#00a74b',
+    '--semantic-feedback-positive-inverse-assistive': '#21c45d',
+    '--semantic-feedback-positive-inverse-subtle': '#4ae176',
+    '--semantic-feedback-positive-inverse-subtler': '#95ffa6',
+    '--semantic-surface-shallow': '#21232c',
+    '--semantic-surface-inverse-shallow': '#ffffff',
+    '--semantic-surface-inverse-shallower': '#ffffff',
+    '--semantic-surface-shallower': '#292c35',
+    '--semantic-surface-shallowest': '#393b44',
+    '--semantic-surface-inverse-shallowest': '#ffffff',
+    '--semantic-accent-subtler': '#001d83',
+    '--semantic-accent-bolder': '#e5e6ff',
+    '--semantic-accent-inverse-bolder': '#001d83',
+    '--semantic-accent-inverse-subtler': '#e5e6ff',
+    '--semantic-theme-red-alpha-assistive': '#ff545089',
+    '--semantic-theme-red-alpha-subtle': '#ff54505b',
+    '--semantic-theme-red-alpha-subtler': '#ff545028',
+    '--semantic-theme-orange-bold': '#ffb691',
+    '--semantic-theme-orange-normal': '#fe761c',
+    '--semantic-theme-orange-neutral': '#d95f00',
+    '--semantic-theme-orange-alternative': '#b14c00',
+    '--semantic-theme-orange-assistive': '#8b3a00',
+    '--semantic-theme-orange-subtle': '#783100',
+    '--semantic-theme-orange-subtler': '#4e1d00',
+    '--semantic-theme-orange-alpha-assistive': '#ec690a89',
+    '--semantic-theme-orange-alpha-subtle': '#ec690a5b',
+    '--semantic-theme-orange-alpha-subtler': '#ec690a28',
+    '--semantic-theme-amber-bold': '#ffb95d',
+    '--semantic-theme-amber-normal': '#db8d00',
+    '--semantic-theme-amber-neutral': '#b87500',
+    '--semantic-theme-amber-alternative': '#955f00',
+    '--semantic-theme-amber-assistive': '#754900',
+    '--semantic-theme-amber-subtle': '#653e00',
+    '--semantic-theme-amber-subtler': '#412600',
+    '--semantic-theme-amber-alpha-assistive': '#c9810089',
+    '--semantic-theme-amber-alpha-subtle': '#c981005b',
+    '--semantic-theme-amber-alpha-subtler': '#c9810028',
+    '--semantic-theme-yellow-bold': '#f7be20',
+    '--semantic-theme-yellow-normal': '#c69700',
+    '--semantic-theme-yellow-neutral': '#a67e00',
+    '--semantic-theme-yellow-alternative': '#876500',
+    '--semantic-theme-yellow-assistive': '#694e00',
+    '--semantic-theme-yellow-subtle': '#5b4300',
+    '--semantic-theme-yellow-subtler': '#3a2a00',
+    '--semantic-theme-yellow-alpha-assistive': '#b68a0089',
+    '--semantic-theme-yellow-alpha-subtle': '#b68a005b',
+    '--semantic-theme-yellow-alpha-subtler': '#b68a0028',
+    '--semantic-theme-lime-bold': '#92da26',
+    '--semantic-theme-lime-normal': '#70af00',
+    '--semantic-theme-lime-neutral': '#5d9200',
+    '--semantic-theme-lime-alternative': '#4b7600',
+    '--semantic-theme-lime-assistive': '#395c00',
+    '--semantic-theme-lime-subtle': '#304f00',
+    '--semantic-theme-lime-subtler': '#1d3200',
+    '--semantic-theme-lime-alpha-assistive': '#67a00089',
+    '--semantic-theme-lime-alpha-subtle': '#67a0005b',
+    '--semantic-theme-lime-alpha-subtler': '#67a00028',
+    '--semantic-theme-green-bold': '#4ae176',
+    '--semantic-theme-green-normal': '#00b652',
+    '--semantic-theme-green-neutral': '#009843',
+    '--semantic-theme-green-alternative': '#007b35',
+    '--semantic-theme-green-assistive': '#006028',
+    '--semantic-theme-green-subtle': '#005321',
+    '--semantic-theme-green-subtler': '#003412',
+    '--semantic-theme-green-alpha-assistive': '#00a74b89',
+    '--semantic-theme-green-alpha-subtle': '#00a74b5b',
+    '--semantic-theme-green-alpha-subtler': '#00a74b28',
+    '--semantic-theme-emerald-bold': '#4cdfa3',
+    '--semantic-theme-emerald-normal': '#00b47d',
+    '--semantic-theme-emerald-neutral': '#009668',
+    '--semantic-theme-emerald-alternative': '#007a54',
+    '--semantic-theme-emerald-assistive': '#005f40',
+    '--semantic-theme-emerald-subtle': '#005237',
+    '--semantic-theme-emerald-subtler': '#003321',
+    '--semantic-theme-emerald-alpha-assistive': '#00a57289',
+    '--semantic-theme-emerald-alpha-subtle': '#00a5725b',
+    '--semantic-theme-emerald-alpha-subtler': '#00a57228',
+    '--semantic-theme-teal-bold': '#4edbc9',
+    '--semantic-theme-teal-normal': '#00b1a0',
+    '--semantic-theme-teal-neutral': '#009486',
+    '--semantic-theme-teal-alternative': '#00786c',
+    '--semantic-theme-teal-assistive': '#005d54',
+    '--semantic-theme-teal-subtle': '#005048',
+    '--semantic-theme-teal-subtler': '#00332d',
+    '--semantic-theme-teal-alpha-assistive': '#00a39389',
+    '--semantic-theme-teal-alpha-subtle': '#00a3935b',
+    '--semantic-theme-teal-alpha-subtler': '#00a39328',
+    '--semantic-theme-cyan-bold': '#49d7f6',
+    '--semantic-theme-cyan-normal': '#00adca',
+    '--semantic-theme-cyan-neutral': '#0090a9',
+    '--semantic-theme-cyan-alternative': '#007589',
+    '--semantic-theme-cyan-assistive': '#005b6b',
+    '--semantic-theme-cyan-subtle': '#004e5c',
+    '--semantic-theme-cyan-subtler': '#00313b',
+    '--semantic-theme-cyan-alpha-assistive': '#009eb989',
+    '--semantic-theme-cyan-alpha-subtle': '#009eb95b',
+    '--semantic-theme-cyan-alpha-subtler': '#009eb928',
+    '--semantic-theme-sky-bold': '#8aceff',
+    '--semantic-theme-sky-normal': '#19a7ec',
+    '--semantic-theme-sky-neutral': '#008cc8',
+    '--semantic-theme-sky-alternative': '#0071a3',
+    '--semantic-theme-sky-assistive': '#00587f',
+    '--semantic-theme-sky-subtle': '#004c6e',
+    '--semantic-theme-sky-subtler': '#002f47',
+    '--semantic-theme-sky-alpha-assistive': '#009adb89',
+    '--semantic-theme-sky-alpha-subtle': '#009adb5b',
+    '--semantic-theme-sky-alpha-subtler': '#009adb28',
+    '--semantic-theme-blue-bold': '#adc6ff',
+    '--semantic-theme-blue-normal': '#689cff',
+    '--semantic-theme-blue-neutral': '#3881f4',
+    '--semantic-theme-blue-alternative': '#0166d8',
+    '--semantic-theme-blue-assistive': '#004faa',
+    '--semantic-theme-blue-subtle': '#004494',
+    '--semantic-theme-blue-subtler': '#002a61',
+    '--semantic-theme-blue-alpha-assistive': '#4c8eff89',
+    '--semantic-theme-blue-alpha-subtle': '#4c8eff5b',
+    '--semantic-theme-blue-alpha-subtler': '#4c8eff28',
+    '--semantic-theme-violet-bold': '#d0bcff',
+    '--semantic-theme-violet-normal': '#ac8aff',
+    '--semantic-theme-violet-neutral': '#9466ff',
+    '--semantic-theme-violet-alternative': '#7a4ae3',
+    '--semantic-theme-violet-assistive': '#612bc9',
+    '--semantic-theme-violet-subtle': '#5517bd',
+    '--semantic-theme-violet-subtler': '#370086',
+    '--semantic-theme-violet-alpha-assistive': '#a078ff89',
+    '--semantic-theme-violet-alpha-subtle': '#a078ff5b',
+    '--semantic-theme-violet-alpha-subtler': '#a078ff28',
+    '--semantic-theme-purple-bold': '#deb7ff',
+    '--semantic-theme-purple-normal': '#c180ff',
+    '--semantic-theme-purple-neutral': '#ad59fb',
+    '--semantic-theme-purple-alternative': '#923be0',
+    '--semantic-theme-purple-assistive': '#7714c5',
+    '--semantic-theme-purple-subtle': '#6900b2',
+    '--semantic-theme-purple-subtler': '#440076',
+    '--semantic-theme-purple-alpha-assistive': '#b76cff89',
+    '--semantic-theme-purple-alpha-subtle': '#b76cff5b',
+    '--semantic-theme-purple-alpha-subtler': '#b76cff28',
+    '--semantic-theme-fuchsia-bold': '#faabff',
+    '--semantic-theme-fuchsia-normal': '#eb64ff',
+    '--semantic-theme-fuchsia-neutral': '#d13ee9',
+    '--semantic-theme-fuchsia-alternative': '#b315cd',
+    '--semantic-theme-fuchsia-assistive': '#8f00a4',
+    '--semantic-theme-fuchsia-subtle': '#7c008f',
+    '--semantic-theme-fuchsia-subtler': '#50005d',
+    '--semantic-theme-fuchsia-alpha-assistive': '#e14ef889',
+    '--semantic-theme-fuchsia-alpha-subtle': '#e14ef85b',
+    '--semantic-theme-fuchsia-alpha-subtler': '#e14ef828',
+    '--semantic-theme-pink-bold': '#ffb0cd',
+    '--semantic-theme-pink-normal': '#ff67ad',
+    '--semantic-theme-pink-neutral': '#e64394',
+    '--semantic-theme-pink-alternative': '#c4267a',
+    '--semantic-theme-pink-assistive': '#a20060',
+    '--semantic-theme-pink-subtle': '#8c0053',
+    '--semantic-theme-pink-subtler': '#5c0034',
+    '--semantic-theme-pink-alpha-assistive': '#f651a189',
+    '--semantic-theme-pink-alpha-subtle': '#f651a15b',
+    '--semantic-theme-pink-alpha-subtler': '#f651a128',
+    '--semantic-theme-rose-bold': '#ffb2b7',
+    '--semantic-theme-rose-normal': '#ff6e7f',
+    '--semantic-theme-rose-neutral': '#f13d5d',
+    '--semantic-theme-rose-alternative': '#ce2046',
+    '--semantic-theme-rose-assistive': '#a70032',
+    '--semantic-theme-rose-subtle': '#91002b',
+    '--semantic-theme-rose-subtler': '#5f0019',
+    '--semantic-theme-rose-alpha-assistive': '#ff506b89',
+    '--semantic-theme-rose-alpha-subtle': '#ff506b5b',
+    '--semantic-theme-rose-alpha-subtler': '#ff506b28',
+    '--semantic-feedback-positive-assistive': '#006028',
+    '--semantic-feedback-positive-subtler': '#003412',
+    '--semantic-feedback-positive-neutral': '#009843',
+    '--semantic-feedback-positive-alternative': '#007b35',
+    '--semantic-feedback-positive-subtle': '#005321',
+    '--semantic-feedback-positive-alpha-inverse-assistive': '#007b3589',
+    '--semantic-feedback-positive-alpha-inverse-subtle': '#007b355b',
+    '--semantic-feedback-positive-alpha-inverse-subtler': '#007b3528',
+    '--semantic-feedback-destructive-bold': '#ffb3ad',
+    '--semantic-feedback-destructive-inverse-bold': '#930012',
+    '--semantic-feedback-destructive-inverse-normal': '#ba1a22',
+    '--semantic-feedback-destructive-inverse-neutral': '#dd3737',
+    '--semantic-feedback-destructive-inverse-alternative': '#ff5450',
+    '--semantic-feedback-destructive-inverse-assistive': '#ff8981',
+    '--semantic-feedback-destructive-inverse-subtle': '#ffb3ad',
+    '--semantic-feedback-destructive-inverse-subtler': '#ffe2df',
+    '--semantic-feedback-destructive-normal': '#ff7169',
+    '--semantic-feedback-destructive-alpha-assistive': '#ff545089',
+    '--semantic-feedback-destructive-alpha-subtle': '#ff54505b',
+    '--semantic-feedback-destructive-alpha-subtler': '#ff545028',
+    '--semantic-feedback-destructive-neutral': '#ef4442',
+    '--semantic-feedback-destructive-alternative': '#cb292d',
+    '--semantic-feedback-destructive-assistive': '#a80618',
+    '--semantic-feedback-destructive-subtle': '#930012',
+    '--semantic-feedback-destructive-subtler': '#600008',
+    '--semantic-feedback-destructive-alpha-inverse-assistive': '#cb292d89',
+    '--semantic-feedback-destructive-alpha-inverse-subtle': '#cb292d5b',
+    '--semantic-feedback-destructive-alpha-inverse-subtler': '#cb292d28',
+    '--semantic-feedback-notifying-bold': '#ffb691',
+    '--semantic-feedback-notifying-normal': '#fe761c',
+    '--semantic-feedback-notifying-neutral': '#d95f00',
+    '--semantic-feedback-notifying-alternative': '#b14c00',
+    '--semantic-feedback-notifying-assistive': '#8b3a00',
+    '--semantic-feedback-notifying-subtle': '#783100',
+    '--semantic-feedback-notifying-subtler': '#4e1d00',
+    '--semantic-feedback-notifying-inverse-bold': '#783100',
+    '--semantic-feedback-notifying-inverse-normal': '#9e4300',
+    '--semantic-feedback-notifying-inverse-neutral': '#c55500',
+    '--semantic-feedback-notifying-inverse-alternative': '#ec690a',
+    '--semantic-feedback-notifying-inverse-assistive': '#ff8d4c',
+    '--semantic-feedback-notifying-inverse-subtle': '#ffb691',
+    '--semantic-feedback-notifying-inverse-subtler': '#ffe2d6',
+    '--semantic-feedback-notifying-alpha-assistive': '#ec690a89',
+    '--semantic-feedback-notifying-alpha-subtle': '#ec690a5b',
+    '--semantic-feedback-notifying-alpha-subtler': '#ec690a28',
+    '--semantic-feedback-notifying-alpha-inverse-assistive': '#b14c0089',
+    '--semantic-feedback-notifying-alpha-inverse-subtle': '#b14c005b',
+    '--semantic-feedback-notifying-alpha-inverse-subtler': '#b14c0028',
+    '--semantic-feedback-positive-alpha-subtlest': '#00a74b0c',
+    '--semantic-feedback-positive-alpha-inverse-subtlest': '#007b350c',
+    '--semantic-feedback-destructive-alpha-subtlest': '#ff54500c',
+    '--semantic-feedback-destructive-alpha-inverse-subtlest': '#cb292d0c',
+    '--semantic-feedback-notifying-alpha-subtlest': '#ec690a0c',
+    '--semantic-feedback-notifying-alpha-inverse-subtlest': '#b14c000c',
+    '--semantic-fill-bolder': '#e7e7f3',
+    '--semantic-fill-normal': '#9c9da8',
+    '--semantic-fill-inverse-bolder': '#292c35',
+    '--semantic-fill-inverse-normal': '#5c5e68',
+    '--semantic-object-bolder': '#e7e7f3',
+    '--semantic-object-normal': '#9c9da8',
+    '--semantic-object-subtler': '#e2f0f814',
+    '--semantic-object-subtlest': '#dfe1eb05',
+    '--semantic-object-inverse-bolder': '#292c35',
+    '--semantic-object-inverse-normal': '#5c5e68',
+    '--semantic-object-inverse-subtler': '#0e0e8519',
+    '--semantic-object-inverse-subtlest': '#5614ff07',
+    '--semantic-object-static-bolder': '#292c35',
+    '--semantic-object-static-normal': '#5c5e68',
+    '--semantic-object-static-subtler': '#0e0e8519',
+    '--semantic-object-static-subtlest': '#5614ff07',
+    '--semantic-object-static-inverse-bolder': '#e7e7f3',
+    '--semantic-object-static-inverse-normal': '#9c9da8',
+    '--semantic-object-static-inverse-subtler': '#e2f0f814',
+    '--semantic-object-static-inverse-subtlest': '#dfe1eb05',
+    '--semantic-surface-static-shallowest': '#ffffff',
+    '--semantic-surface-static-shallower': '#ffffff',
+    '--semantic-surface-static-shallow': '#ffffff',
+    '--semantic-surface-static-standard': '#ffffff',
+    '--semantic-surface-static-deep': '#faf8ff',
+    '--semantic-surface-static-deeper': '#f2f3ff',
+    '--semantic-surface-static-deepest': '#ecedf9',
+    '--semantic-surface-static-inverse-shallowest': '#393b44',
+    '--semantic-surface-static-inverse-shallower': '#292c35',
+    '--semantic-surface-static-inverse-shallow': '#21232c',
+    '--semantic-surface-static-inverse-standard': '#191b24',
+    '--semantic-surface-static-inverse-deep': '#1d1f28',
+    '--semantic-surface-static-inverse-deeper': '#21232c',
+    '--semantic-surface-static-inverse-deepest': '#252830',
+    '--semantic-accent-alpha-inverse-assistive': '#3b5aef89',
+    '--semantic-theme-red-alpha-subtlest': '#ff54500c',
+    '--semantic-theme-red-bolder': '#ffe2df',
+    '--semantic-theme-orange-bolder': '#ffe2d6',
+    '--semantic-theme-orange-alpha-subtlest': '#ec690a0c',
+    '--semantic-theme-amber-bolder': '#ffe4c7',
+    '--semantic-theme-amber-alpha-subtlest': '#c981000c',
+    '--semantic-theme-yellow-bolder': '#ffe5b2',
+    '--semantic-theme-yellow-alpha-subtlest': '#b68a000c',
+    '--semantic-theme-lime-bolder': '#b2fe4a',
+    '--semantic-theme-lime-alpha-subtlest': '#67a0000c',
+    '--semantic-theme-green-bolder': '#95ffa6',
+    '--semantic-theme-green-alpha-subtlest': '#00a74b0c',
+    '--semantic-theme-emerald-bolder': '#86ffc7',
+    '--semantic-theme-emerald-alpha-subtlest': '#00a5720c',
+    '--semantic-theme-teal-bolder': '#76feea',
+    '--semantic-theme-teal-alpha-subtlest': '#00a3930c',
+    '--semantic-theme-cyan-alpha-subtlest': '#009eb90c',
+    '--semantic-theme-cyan-bolder': '#bef0ff',
+    '--semantic-theme-sky-alpha-subtlest': '#009adb0c',
+    '--semantic-theme-sky-bolder': '#d4ebff',
+    '--semantic-theme-blue-bolder': '#e0e8ff',
+    '--semantic-theme-blue-alpha-subtlest': '#4c8eff0c',
+    '--semantic-theme-violet-bolder': '#eee4ff',
+    '--semantic-theme-violet-alpha-subtlest': '#a078ff0c',
+    '--semantic-theme-purple-alpha-subtlest': '#b76cff0c',
+    '--semantic-theme-purple-bolder': '#f4e2ff',
+    '--semantic-theme-fuchsia-alpha-subtlest': '#e14ef80c',
+    '--semantic-theme-fuchsia-bolder': '#ffdefc',
+    '--semantic-theme-pink-bolder': '#ffe0e9',
+    '--semantic-theme-pink-alpha-subtlest': '#f651a10c',
+    '--semantic-theme-rose-bolder': '#ffe1e2',
+    '--semantic-theme-rose-alpha-subtlest': '#ff506b0c',
+    '--semantic-feedback-destructive-bolder': '#ffe2df',
+    '--semantic-feedback-destructive-inverse-bolder': '#600008',
+    '--semantic-feedback-positive-bolder': '#95ffa6',
+    '--semantic-feedback-positive-inverse-bolder': '#003412',
+    '--semantic-feedback-notifying-bolder': '#ffe2d6',
+    '--semantic-feedback-notifying-inverse-bolder': '#4e1d00',
+    '--semantic-interaction-subtle': '#444650',
+    '--semantic-interaction-inverse-subtle': '#b7b8c3',
+    '--semantic-stroke-subtler': '#252830',
+    '--semantic-stroke-inverse-subtler': '#ecedf9',
+    '--semantic-stroke-alpha-subtler': '#e1f3ec0f',
+    '--semantic-stroke-alpha-inverse-subtler': '#111cb414',
+    '--semantic-accent-subtlest': '#001463',
+    '--semantic-accent-inverse-subtlest': '#fbf8ff',
   },
-  "@media (min-width: 768px) and (max-width: 1199px)": {
-    ":root": {
-      "--semantic-spacing-1": "1px",
-      "--semantic-spacing-2": "2px",
-      "--semantic-spacing-4": "4px",
-      "--semantic-spacing-6": "6px",
-      "--semantic-spacing-8": "8px",
-      "--semantic-spacing-10": "10px",
-      "--semantic-spacing-12": "12px",
-      "--semantic-spacing-16": "16px",
-      "--semantic-spacing-20": "20px",
-      "--semantic-spacing-24": "24px",
-      "--semantic-spacing-32": "32px",
-      "--semantic-spacing-40": "40px",
-      "--semantic-spacing-48": "48px",
-      "--semantic-spacing-56": "56px",
-      "--semantic-radius-4": "4px",
-      "--semantic-radius-8": "8px",
-      "--semantic-radius-10": "10px",
-      "--semantic-radius-16": "16px",
-      "--semantic-radius-24": "24px",
-      "--semantic-radius-max": "9999px",
-      "--semantic-stroke-weight-1": "1",
-      "--semantic-stroke-weight-2": "2",
-      "--semantic-stroke-weight-4": "4",
-      "--semantic-stroke-weight-6": "6",
-      "--semantic-opacity-0": "0",
-      "--semantic-opacity-5": "5",
-      "--semantic-opacity-8": "8",
-      "--semantic-opacity-12": "12",
-      "--semantic-opacity-16": "16",
-      "--semantic-opacity-23": "23",
-      "--semantic-opacity-29": "29",
-      "--semantic-opacity-36": "36",
-      "--semantic-opacity-44": "44",
-      "--semantic-opacity-54": "54",
-      "--semantic-opacity-63": "63",
-      "--semantic-opacity-76": "76",
-      "--semantic-opacity-100": "100",
-      "--semantic-radius-6": "6px",
-      "--semantic-spacing-0": "0px",
-      "--semantic-radius-2": "2px",
-      "--semantic-opacity-91": "91",
-      "--semantic-breakpoint-min": "768",
-      "--semantic-breakpoint-max": "1199",
-      "--semantic-margin-lg": "24px",
-      "--semantic-margin-md": "20px",
-      "--semantic-radius-12": "12px",
-      "--semantic-radius-0": "0px",
-      "--semantic-margin-sm": "16px",
-      "--semantic-margin-xl": "28px",
-      "--semantic-spacing-64": "64px",
-      "--semantic-spacing-72": "72px",
-      "--semantic-margin-2xl": "32px",
-      "--primitive-unit-16": "16",
-      "--primitive-unit-20": "20",
-      "--primitive-unit-12": "12",
-      "--primitive-unit-72": "72",
-      "--primitive-unit-6": "6",
-      "--primitive-unit-144": "144",
-      "--primitive-unit-112": "112",
-      "--primitive-unit-96": "96",
-      "--primitive-unit-128": "128",
-      "--primitive-unit-2": "2",
-      "--primitive-unit-4": "4",
-      "--primitive-unit-80": "80",
-      "--primitive-unit-64": "64",
-      "--primitive-unit-56": "56",
-      "--primitive-unit-48": "48",
-      "--primitive-unit-24": "24",
-      "--primitive-unit-40": "40",
-      "--primitive-unit-10": "10",
-      "--primitive-unit-32": "32",
-      "--primitive-unit-1": "1",
-      "--primitive-unit-8": "8",
-      "--primitive-unit-28": "28",
-      "--primitive-unit-0": "0",
-      "--semantic-spacing-80": "80px",
-      "--semantic-spacing-96": "96px",
-      "--semantic-spacing-112": "112px",
-      "--semantic-spacing-128": "128px",
-      "--semantic-spacing-144": "144px",
-      "--semantic-margin-3xl": "40px",
-      "--semantic-margin-xs": "12px",
-      "--primitive-unit-3": "3",
-      "--semantic-spacing-3": "3px",
-      "--semantic-stroke-weight-3": "3",
-      "--semantic-margin-2xs": "8px",
-      "--semantic-spacing-28": "28px",
-      "--semantic-position-24": "24",
-      "--semantic-position-16": "16",
-      "--semantic-position-8": "8",
-      "--semantic-position-4": "4",
-      "--semantic-position-0": "0",
-      "--semantic-position-6": "6",
-      "--semantic-position-2": "2",
-      "--semantic-position-1": "1",
-      "--semantic-position-3": "3",
-      "--semantic-position-12": "12",
-      "--primitive-unit-5": "5",
-      "--semantic-stroke-weight-5": "5",
-      "--primitive-typeface-hero": "Pretendard Variable",
-      "--primitive-typeface-syntax": "D2Coding",
-      "--primitive-font-size-hero-4": "64px",
-      "--primitive-font-size-hero-3": "56px",
-      "--primitive-font-size-hero-2": "48px",
-      "--primitive-font-size-hero-1": "40px",
-      "--primitive-font-size-title-3": "28px",
-      "--primitive-font-size-title-2": "24px",
-      "--primitive-font-size-title-1": "20px",
-      "--primitive-font-size-title-4": "32px",
-      "--primitive-font-size-body-lg": "17px",
-      "--primitive-font-size-body-md": "16px",
-      "--primitive-font-size-body-sm": "15px",
-      "--primitive-font-size-body-xs": "14px",
-      "--primitive-font-size-body-2xs": "13px",
-      "--primitive-font-size-label-lg": "16px",
-      "--primitive-font-size-label-md": "15px",
-      "--primitive-font-size-label-sm": "13px",
-      "--primitive-font-line-height-hero-4": "80px",
-      "--primitive-font-line-height-hero-3": "70px",
-      "--primitive-font-line-height-hero-2": "60px",
-      "--primitive-font-line-height-hero-1": "50px",
-      "--primitive-font-line-height-title-4": "41.599998474121094px",
-      "--primitive-font-line-height-title-3": "36.400001525878906px",
-      "--primitive-font-line-height-title-2": "31.200000762939453px",
-      "--primitive-font-line-height-title-1": "26px",
-      "--primitive-font-line-height-label-lg": "24px",
-      "--primitive-font-line-height-label-md": "22.5px",
-      "--primitive-font-line-height-label-sm": "19.5px",
-      "--primitive-font-line-height-body-lg": "27.200000762939453px",
-      "--primitive-font-line-height-body-md": "25.600000381469727px",
-      "--primitive-font-line-height-body-sm": "24px",
-      "--primitive-font-line-height-body-xs": "22.399999618530273px",
-      "--primitive-font-line-height-body-2xs": "20.799999237060547px",
-      "--primitive-font-letter-spacing-hero-4": "-1.9800000190734863px",
-      "--primitive-font-letter-spacing-hero-3": "-1.5700000524520874px",
-      "--primitive-font-letter-spacing-hero-2": "-1.2000000476837158px",
-      "--primitive-font-letter-spacing-hero-1": "-0.8799999952316284px",
-      "--primitive-font-letter-spacing-title-4": "-0.6399999856948853px",
-      "--primitive-font-letter-spacing-title-3": "-0.47999998927116394px",
-      "--primitive-font-letter-spacing-title-2": "-0.3400000035762787px",
-      "--primitive-font-letter-spacing-title-1": "-0.2199999988079071px",
-      "--primitive-font-letter-spacing-label-lg": "-0.1599999964237213px",
-      "--primitive-font-letter-spacing-label-md": "-0.11999999731779099px",
-      "--primitive-font-letter-spacing-label-sm": "-0.07999999821186066px",
-      "--primitive-font-letter-spacing-body-lg": "0.017000000923871994px",
-      "--primitive-font-letter-spacing-body-md": "0.04500000178813934px",
-      "--primitive-font-letter-spacing-body-sm": "0.05999999865889549px",
-      "--primitive-font-letter-spacing-body-xs": "0.07000000029802322px",
-      "--primitive-font-letter-spacing-body-2xs": "0.07999999821186066px",
-      "--primitive-font-weight-hero-normal": "630",
-      "--primitive-font-weight-title-normal": "550",
-      "--primitive-font-weight-label-normal": "450",
-      "--primitive-font-weight-body-normal": "400",
-      "--primitive-font-weight-hero-bold": "670",
-      "--primitive-font-weight-title-bold": "600",
-      "--primitive-font-weight-label-bold": "500",
-      "--primitive-font-weight-label-subtle": "400",
-      "--primitive-font-weight-body-bold": "430",
-      "--primitive-font-size-syntax-lg": "16px",
-      "--primitive-font-size-syntax-md": "15px",
-      "--primitive-font-size-syntax-sm": "13px",
-      "--primitive-font-weight-syntax-normal": "400",
-      "--primitive-font-line-height-syntax-lg": "27.200000762939453px",
-      "--primitive-font-line-height-syntax-md": "25.5px",
-      "--primitive-font-line-height-syntax-sm": "22.100000381469727px",
-      "--primitive-typeface-title": "Pretendard Variable",
-      "--primitive-typeface-label": "Pretendard Variable",
-      "--primitive-typeface-body": "Pretendard Variable",
-      "--primitive-font-size-label-xs": "12px",
-      "--primitive-font-line-height-label-xs": "18px",
-      "--primitive-font-letter-spacing-label-xs": "-0.05000000074505806px",
-      "--primitive-font-size-syntax-xs": "12px",
-      "--primitive-font-line-height-syntax-xs": "20.399999618530273px"
-    }
+  '@media (min-width: 768px) and (max-width: 1199px)': {
+    ':root': {
+      '--semantic-spacing-1': '1px',
+      '--semantic-spacing-2': '2px',
+      '--semantic-spacing-4': '4px',
+      '--semantic-spacing-6': '6px',
+      '--semantic-spacing-8': '8px',
+      '--semantic-spacing-10': '10px',
+      '--semantic-spacing-12': '12px',
+      '--semantic-spacing-16': '16px',
+      '--semantic-spacing-20': '20px',
+      '--semantic-spacing-24': '24px',
+      '--semantic-spacing-32': '32px',
+      '--semantic-spacing-40': '40px',
+      '--semantic-spacing-48': '48px',
+      '--semantic-spacing-56': '56px',
+      '--semantic-radius-4': '4px',
+      '--semantic-radius-8': '8px',
+      '--semantic-radius-10': '10px',
+      '--semantic-radius-16': '16px',
+      '--semantic-radius-24': '24px',
+      '--semantic-radius-max': '9999px',
+      '--semantic-stroke-weight-1': '1px',
+      '--semantic-stroke-weight-2': '2px',
+      '--semantic-stroke-weight-4': '4px',
+      '--semantic-stroke-weight-6': '6px',
+      '--semantic-opacity-0': '0',
+      '--semantic-opacity-5': '5',
+      '--semantic-opacity-8': '8',
+      '--semantic-opacity-12': '12',
+      '--semantic-opacity-16': '16',
+      '--semantic-opacity-23': '23',
+      '--semantic-opacity-29': '29',
+      '--semantic-opacity-36': '36',
+      '--semantic-opacity-44': '44',
+      '--semantic-opacity-54': '54',
+      '--semantic-opacity-63': '63',
+      '--semantic-opacity-76': '76',
+      '--semantic-opacity-100': '100',
+      '--semantic-radius-6': '6px',
+      '--semantic-spacing-0': '0px',
+      '--semantic-radius-2': '2px',
+      '--semantic-opacity-91': '91',
+      '--semantic-breakpoint-min': '768',
+      '--semantic-breakpoint-max': '1199',
+      '--semantic-margin-lg': '24px',
+      '--semantic-margin-md': '20px',
+      '--semantic-radius-12': '12px',
+      '--semantic-radius-0': '0px',
+      '--semantic-margin-sm': '16px',
+      '--semantic-margin-xl': '28px',
+      '--semantic-spacing-64': '64px',
+      '--semantic-spacing-72': '72px',
+      '--semantic-margin-2xl': '32px',
+      '--primitive-unit-16': '16',
+      '--primitive-unit-20': '20',
+      '--primitive-unit-12': '12',
+      '--primitive-unit-72': '72',
+      '--primitive-unit-6': '6',
+      '--primitive-unit-144': '144',
+      '--primitive-unit-112': '112',
+      '--primitive-unit-96': '96',
+      '--primitive-unit-128': '128',
+      '--primitive-unit-2': '2',
+      '--primitive-unit-4': '4',
+      '--primitive-unit-80': '80',
+      '--primitive-unit-64': '64',
+      '--primitive-unit-56': '56',
+      '--primitive-unit-48': '48',
+      '--primitive-unit-24': '24',
+      '--primitive-unit-40': '40',
+      '--primitive-unit-10': '10',
+      '--primitive-unit-32': '32',
+      '--primitive-unit-1': '1',
+      '--primitive-unit-8': '8',
+      '--primitive-unit-28': '28',
+      '--primitive-unit-0': '0',
+      '--semantic-spacing-80': '80px',
+      '--semantic-spacing-96': '96px',
+      '--semantic-spacing-112': '112px',
+      '--semantic-spacing-128': '128px',
+      '--semantic-spacing-144': '144px',
+      '--semantic-margin-3xl': '40px',
+      '--semantic-margin-xs': '12px',
+      '--primitive-unit-3': '3',
+      '--semantic-spacing-3': '3px',
+      '--semantic-stroke-weight-3': '3px',
+      '--semantic-margin-2xs': '8px',
+      '--semantic-spacing-28': '28px',
+      '--semantic-position-24': '24',
+      '--semantic-position-16': '16',
+      '--semantic-position-8': '8',
+      '--semantic-position-4': '4',
+      '--semantic-position-0': '0',
+      '--semantic-position-6': '6',
+      '--semantic-position-2': '2',
+      '--semantic-position-1': '1',
+      '--semantic-position-3': '3',
+      '--semantic-position-12': '12',
+      '--primitive-unit-5': '5',
+      '--semantic-stroke-weight-5': '5px',
+      '--primitive-typeface-hero': 'Pretendard Variable',
+      '--primitive-typeface-syntax': 'D2Coding',
+      '--primitive-font-size-hero-4': '64px',
+      '--primitive-font-size-hero-3': '56px',
+      '--primitive-font-size-hero-2': '48px',
+      '--primitive-font-size-hero-1': '40px',
+      '--primitive-font-size-title-3': '28px',
+      '--primitive-font-size-title-2': '24px',
+      '--primitive-font-size-title-1': '20px',
+      '--primitive-font-size-title-4': '32px',
+      '--primitive-font-size-body-lg': '17px',
+      '--primitive-font-size-body-md': '16px',
+      '--primitive-font-size-body-sm': '15px',
+      '--primitive-font-size-body-xs': '14px',
+      '--primitive-font-size-body-2xs': '13px',
+      '--primitive-font-size-label-lg': '16px',
+      '--primitive-font-size-label-md': '15px',
+      '--primitive-font-size-label-sm': '13px',
+      '--primitive-font-line-height-hero-4': '80px',
+      '--primitive-font-line-height-hero-3': '70px',
+      '--primitive-font-line-height-hero-2': '60px',
+      '--primitive-font-line-height-hero-1': '50px',
+      '--primitive-font-line-height-title-4': '41.599998474121094px',
+      '--primitive-font-line-height-title-3': '36.400001525878906px',
+      '--primitive-font-line-height-title-2': '31.200000762939453px',
+      '--primitive-font-line-height-title-1': '26px',
+      '--primitive-font-line-height-label-lg': '24px',
+      '--primitive-font-line-height-label-md': '22.5px',
+      '--primitive-font-line-height-label-sm': '19.5px',
+      '--primitive-font-line-height-body-lg': '27.200000762939453px',
+      '--primitive-font-line-height-body-md': '25.600000381469727px',
+      '--primitive-font-line-height-body-sm': '24px',
+      '--primitive-font-line-height-body-xs': '22.399999618530273px',
+      '--primitive-font-line-height-body-2xs': '20.799999237060547px',
+      '--primitive-font-letter-spacing-hero-4': '-1.9800000190734863px',
+      '--primitive-font-letter-spacing-hero-3': '-1.5700000524520874px',
+      '--primitive-font-letter-spacing-hero-2': '-1.2000000476837158px',
+      '--primitive-font-letter-spacing-hero-1': '-0.8799999952316284px',
+      '--primitive-font-letter-spacing-title-4': '-0.6399999856948853px',
+      '--primitive-font-letter-spacing-title-3': '-0.47999998927116394px',
+      '--primitive-font-letter-spacing-title-2': '-0.3400000035762787px',
+      '--primitive-font-letter-spacing-title-1': '-0.2199999988079071px',
+      '--primitive-font-letter-spacing-label-lg': '-0.1599999964237213px',
+      '--primitive-font-letter-spacing-label-md': '-0.11999999731779099px',
+      '--primitive-font-letter-spacing-label-sm': '-0.07999999821186066px',
+      '--primitive-font-letter-spacing-body-lg': '0.017000000923871994px',
+      '--primitive-font-letter-spacing-body-md': '0.04500000178813934px',
+      '--primitive-font-letter-spacing-body-sm': '0.05999999865889549px',
+      '--primitive-font-letter-spacing-body-xs': '0.07000000029802322px',
+      '--primitive-font-letter-spacing-body-2xs': '0.07999999821186066px',
+      '--primitive-font-weight-hero-normal': '630',
+      '--primitive-font-weight-title-normal': '550',
+      '--primitive-font-weight-label-normal': '450',
+      '--primitive-font-weight-body-normal': '400',
+      '--primitive-font-weight-hero-bold': '670',
+      '--primitive-font-weight-title-bold': '600',
+      '--primitive-font-weight-label-bold': '500',
+      '--primitive-font-weight-label-subtle': '400',
+      '--primitive-font-weight-body-bold': '430',
+      '--primitive-font-size-syntax-lg': '16px',
+      '--primitive-font-size-syntax-md': '15px',
+      '--primitive-font-size-syntax-sm': '13px',
+      '--primitive-font-weight-syntax-normal': '400',
+      '--primitive-font-line-height-syntax-lg': '27.200000762939453px',
+      '--primitive-font-line-height-syntax-md': '25.5px',
+      '--primitive-font-line-height-syntax-sm': '22.100000381469727px',
+      '--primitive-typeface-title': 'Pretendard Variable',
+      '--primitive-typeface-label': 'Pretendard Variable',
+      '--primitive-typeface-body': 'Pretendard Variable',
+      '--primitive-font-size-label-xs': '12px',
+      '--primitive-font-line-height-label-xs': '18px',
+      '--primitive-font-letter-spacing-label-xs': '-0.05000000074505806px',
+      '--primitive-font-size-syntax-xs': '12px',
+      '--primitive-font-line-height-syntax-xs': '20.399999618530273px',
+    },
+  },
+  '@media (min-width: 320px) and (max-width: 767px)': {
+    ':root': {
+      '--semantic-spacing-1': '1px',
+      '--semantic-spacing-2': '2px',
+      '--semantic-spacing-4': '4px',
+      '--semantic-spacing-6': '6px',
+      '--semantic-spacing-8': '8px',
+      '--semantic-spacing-10': '10px',
+      '--semantic-spacing-12': '12px',
+      '--semantic-spacing-16': '16px',
+      '--semantic-spacing-20': '20px',
+      '--semantic-spacing-24': '24px',
+      '--semantic-spacing-32': '32px',
+      '--semantic-spacing-40': '40px',
+      '--semantic-spacing-48': '48px',
+      '--semantic-spacing-56': '56px',
+      '--semantic-radius-4': '4px',
+      '--semantic-radius-8': '8px',
+      '--semantic-radius-10': '10px',
+      '--semantic-radius-16': '16px',
+      '--semantic-radius-24': '24px',
+      '--semantic-radius-max': '9999px',
+      '--semantic-stroke-weight-1': '1px',
+      '--semantic-stroke-weight-2': '2px',
+      '--semantic-stroke-weight-4': '4px',
+      '--semantic-stroke-weight-6': '6px',
+      '--semantic-opacity-0': '0',
+      '--semantic-opacity-5': '5',
+      '--semantic-opacity-8': '8',
+      '--semantic-opacity-12': '12',
+      '--semantic-opacity-16': '16',
+      '--semantic-opacity-23': '23',
+      '--semantic-opacity-29': '29',
+      '--semantic-opacity-36': '36',
+      '--semantic-opacity-44': '44',
+      '--semantic-opacity-54': '54',
+      '--semantic-opacity-63': '63',
+      '--semantic-opacity-76': '76',
+      '--semantic-opacity-100': '100',
+      '--semantic-radius-6': '6px',
+      '--semantic-spacing-0': '0px',
+      '--semantic-radius-2': '2px',
+      '--semantic-opacity-91': '91',
+      '--semantic-breakpoint-min': '320',
+      '--semantic-breakpoint-max': '767',
+      '--semantic-margin-lg': '20px',
+      '--semantic-margin-md': '16px',
+      '--semantic-radius-12': '12px',
+      '--semantic-radius-0': '0px',
+      '--semantic-margin-sm': '12px',
+      '--semantic-margin-xl': '24px',
+      '--semantic-spacing-64': '64px',
+      '--semantic-spacing-72': '72px',
+      '--semantic-margin-2xl': '28px',
+      '--primitive-unit-16': '16',
+      '--primitive-unit-20': '20',
+      '--primitive-unit-12': '12',
+      '--primitive-unit-72': '72',
+      '--primitive-unit-6': '6',
+      '--primitive-unit-144': '144',
+      '--primitive-unit-112': '112',
+      '--primitive-unit-96': '96',
+      '--primitive-unit-128': '128',
+      '--primitive-unit-2': '2',
+      '--primitive-unit-4': '4',
+      '--primitive-unit-80': '80',
+      '--primitive-unit-64': '64',
+      '--primitive-unit-56': '56',
+      '--primitive-unit-48': '48',
+      '--primitive-unit-24': '24',
+      '--primitive-unit-40': '40',
+      '--primitive-unit-10': '10',
+      '--primitive-unit-32': '32',
+      '--primitive-unit-1': '1',
+      '--primitive-unit-8': '8',
+      '--primitive-unit-28': '28',
+      '--primitive-unit-0': '0',
+      '--semantic-spacing-80': '80px',
+      '--semantic-spacing-96': '96px',
+      '--semantic-spacing-112': '112px',
+      '--semantic-spacing-128': '128px',
+      '--semantic-spacing-144': '144px',
+      '--semantic-margin-3xl': '32px',
+      '--semantic-margin-xs': '8px',
+      '--primitive-unit-3': '3',
+      '--semantic-spacing-3': '3px',
+      '--semantic-stroke-weight-3': '3px',
+      '--semantic-margin-2xs': '4px',
+      '--semantic-spacing-28': '28px',
+      '--semantic-position-24': '24',
+      '--semantic-position-16': '16',
+      '--semantic-position-8': '8',
+      '--semantic-position-4': '4',
+      '--semantic-position-0': '0',
+      '--semantic-position-6': '6',
+      '--semantic-position-2': '2',
+      '--semantic-position-1': '1',
+      '--semantic-position-3': '3',
+      '--semantic-position-12': '12',
+      '--primitive-unit-5': '5',
+      '--semantic-stroke-weight-5': '5px',
+      '--primitive-typeface-hero': 'Pretendard Variable',
+      '--primitive-typeface-syntax': 'D2Coding',
+      '--primitive-font-size-hero-4': '56px',
+      '--primitive-font-size-hero-3': '48px',
+      '--primitive-font-size-hero-2': '40px',
+      '--primitive-font-size-hero-1': '32px',
+      '--primitive-font-size-title-3': '24px',
+      '--primitive-font-size-title-2': '20px',
+      '--primitive-font-size-title-1': '17px',
+      '--primitive-font-size-title-4': '28px',
+      '--primitive-font-size-body-lg': '16px',
+      '--primitive-font-size-body-md': '15px',
+      '--primitive-font-size-body-sm': '14px',
+      '--primitive-font-size-body-xs': '13px',
+      '--primitive-font-size-body-2xs': '12px',
+      '--primitive-font-size-label-lg': '15px',
+      '--primitive-font-size-label-md': '14px',
+      '--primitive-font-size-label-sm': '12px',
+      '--primitive-font-line-height-hero-4': '70px',
+      '--primitive-font-line-height-hero-3': '60px',
+      '--primitive-font-line-height-hero-2': '50px',
+      '--primitive-font-line-height-hero-1': '40px',
+      '--primitive-font-line-height-title-4': '36.400001525878906px',
+      '--primitive-font-line-height-title-3': '31.200000762939453px',
+      '--primitive-font-line-height-title-2': '26px',
+      '--primitive-font-line-height-title-1': '22.100000381469727px',
+      '--primitive-font-line-height-label-lg': '22.5px',
+      '--primitive-font-line-height-label-md': '21px',
+      '--primitive-font-line-height-label-sm': '18px',
+      '--primitive-font-line-height-body-lg': '25.600000381469727px',
+      '--primitive-font-line-height-body-md': '24px',
+      '--primitive-font-line-height-body-sm': '22.399999618530273px',
+      '--primitive-font-line-height-body-xs': '20.799999237060547px',
+      '--primitive-font-line-height-body-2xs': '19.200000762939453px',
+      '--primitive-font-letter-spacing-hero-4': '-1.7400000095367432px',
+      '--primitive-font-letter-spacing-hero-3': '-1.340000033378601px',
+      '--primitive-font-letter-spacing-hero-2': '-1px',
+      '--primitive-font-letter-spacing-hero-1': '-0.699999988079071px',
+      '--primitive-font-letter-spacing-title-4': '-0.5600000023841858px',
+      '--primitive-font-letter-spacing-title-3': '-0.4099999964237213px',
+      '--primitive-font-letter-spacing-title-2': '-0.2800000011920929px',
+      '--primitive-font-letter-spacing-title-1': '-0.1899999976158142px',
+      '--primitive-font-letter-spacing-label-lg': '-0.15000000596046448px',
+      '--primitive-font-letter-spacing-label-md': '-0.10999999940395355px',
+      '--primitive-font-letter-spacing-label-sm': '-0.07000000029802322px',
+      '--primitive-font-letter-spacing-body-lg': '0.017000000923871994px',
+      '--primitive-font-letter-spacing-body-md': '0.04500000178813934px',
+      '--primitive-font-letter-spacing-body-sm': '0.05999999865889549px',
+      '--primitive-font-letter-spacing-body-xs': '0.07000000029802322px',
+      '--primitive-font-letter-spacing-body-2xs': '0.07000000029802322px',
+      '--primitive-font-weight-hero-normal': '600',
+      '--primitive-font-weight-title-normal': '530',
+      '--primitive-font-weight-label-normal': '450',
+      '--primitive-font-weight-body-normal': '400',
+      '--primitive-font-weight-hero-bold': '640',
+      '--primitive-font-weight-title-bold': '580',
+      '--primitive-font-weight-label-bold': '500',
+      '--primitive-font-weight-label-subtle': '400',
+      '--primitive-font-weight-body-bold': '430',
+      '--primitive-font-size-syntax-lg': '16px',
+      '--primitive-font-size-syntax-md': '15px',
+      '--primitive-font-size-syntax-sm': '13px',
+      '--primitive-font-weight-syntax-normal': '400',
+      '--primitive-font-line-height-syntax-lg': '27.200000762939453px',
+      '--primitive-font-line-height-syntax-md': '25.5px',
+      '--primitive-font-line-height-syntax-sm': '22.100000381469727px',
+      '--primitive-typeface-title': 'Pretendard Variable',
+      '--primitive-typeface-label': 'Pretendard Variable',
+      '--primitive-typeface-body': 'Pretendard Variable',
+      '--primitive-font-size-label-xs': '11px',
+      '--primitive-font-line-height-label-xs': '16.5px',
+      '--primitive-font-letter-spacing-label-xs': '-0.03999999910593033px',
+      '--primitive-font-size-syntax-xs': '12px',
+      '--primitive-font-line-height-syntax-xs': '20.399999618530273px',
+    },
   },
-  "@media (min-width: 320px) and (max-width: 767px)": {
-    ":root": {
-      "--semantic-spacing-1": "1px",
-      "--semantic-spacing-2": "2px",
-      "--semantic-spacing-4": "4px",
-      "--semantic-spacing-6": "6px",
-      "--semantic-spacing-8": "8px",
-      "--semantic-spacing-10": "10px",
-      "--semantic-spacing-12": "12px",
-      "--semantic-spacing-16": "16px",
-      "--semantic-spacing-20": "20px",
-      "--semantic-spacing-24": "24px",
-      "--semantic-spacing-32": "32px",
-      "--semantic-spacing-40": "40px",
-      "--semantic-spacing-48": "48px",
-      "--semantic-spacing-56": "56px",
-      "--semantic-radius-4": "4px",
-      "--semantic-radius-8": "8px",
-      "--semantic-radius-10": "10px",
-      "--semantic-radius-16": "16px",
-      "--semantic-radius-24": "24px",
-      "--semantic-radius-max": "9999px",
-      "--semantic-stroke-weight-1": "1",
-      "--semantic-stroke-weight-2": "2",
-      "--semantic-stroke-weight-4": "4",
-      "--semantic-stroke-weight-6": "6",
-      "--semantic-opacity-0": "0",
-      "--semantic-opacity-5": "5",
-      "--semantic-opacity-8": "8",
-      "--semantic-opacity-12": "12",
-      "--semantic-opacity-16": "16",
-      "--semantic-opacity-23": "23",
-      "--semantic-opacity-29": "29",
-      "--semantic-opacity-36": "36",
-      "--semantic-opacity-44": "44",
-      "--semantic-opacity-54": "54",
-      "--semantic-opacity-63": "63",
-      "--semantic-opacity-76": "76",
-      "--semantic-opacity-100": "100",
-      "--semantic-radius-6": "6px",
-      "--semantic-spacing-0": "0px",
-      "--semantic-radius-2": "2px",
-      "--semantic-opacity-91": "91",
-      "--semantic-breakpoint-min": "320",
-      "--semantic-breakpoint-max": "767",
-      "--semantic-margin-lg": "20px",
-      "--semantic-margin-md": "16px",
-      "--semantic-radius-12": "12px",
-      "--semantic-radius-0": "0px",
-      "--semantic-margin-sm": "12px",
-      "--semantic-margin-xl": "24px",
-      "--semantic-spacing-64": "64px",
-      "--semantic-spacing-72": "72px",
-      "--semantic-margin-2xl": "28px",
-      "--primitive-unit-16": "16",
-      "--primitive-unit-20": "20",
-      "--primitive-unit-12": "12",
-      "--primitive-unit-72": "72",
-      "--primitive-unit-6": "6",
-      "--primitive-unit-144": "144",
-      "--primitive-unit-112": "112",
-      "--primitive-unit-96": "96",
-      "--primitive-unit-128": "128",
-      "--primitive-unit-2": "2",
-      "--primitive-unit-4": "4",
-      "--primitive-unit-80": "80",
-      "--primitive-unit-64": "64",
-      "--primitive-unit-56": "56",
-      "--primitive-unit-48": "48",
-      "--primitive-unit-24": "24",
-      "--primitive-unit-40": "40",
-      "--primitive-unit-10": "10",
-      "--primitive-unit-32": "32",
-      "--primitive-unit-1": "1",
-      "--primitive-unit-8": "8",
-      "--primitive-unit-28": "28",
-      "--primitive-unit-0": "0",
-      "--semantic-spacing-80": "80px",
-      "--semantic-spacing-96": "96px",
-      "--semantic-spacing-112": "112px",
-      "--semantic-spacing-128": "128px",
-      "--semantic-spacing-144": "144px",
-      "--semantic-margin-3xl": "32px",
-      "--semantic-margin-xs": "8px",
-      "--primitive-unit-3": "3",
-      "--semantic-spacing-3": "3px",
-      "--semantic-stroke-weight-3": "3",
-      "--semantic-margin-2xs": "4px",
-      "--semantic-spacing-28": "28px",
-      "--semantic-position-24": "24",
-      "--semantic-position-16": "16",
-      "--semantic-position-8": "8",
-      "--semantic-position-4": "4",
-      "--semantic-position-0": "0",
-      "--semantic-position-6": "6",
-      "--semantic-position-2": "2",
-      "--semantic-position-1": "1",
-      "--semantic-position-3": "3",
-      "--semantic-position-12": "12",
-      "--primitive-unit-5": "5",
-      "--semantic-stroke-weight-5": "5",
-      "--primitive-typeface-hero": "Pretendard Variable",
-      "--primitive-typeface-syntax": "D2Coding",
-      "--primitive-font-size-hero-4": "56px",
-      "--primitive-font-size-hero-3": "48px",
-      "--primitive-font-size-hero-2": "40px",
-      "--primitive-font-size-hero-1": "32px",
-      "--primitive-font-size-title-3": "24px",
-      "--primitive-font-size-title-2": "20px",
-      "--primitive-font-size-title-1": "17px",
-      "--primitive-font-size-title-4": "28px",
-      "--primitive-font-size-body-lg": "16px",
-      "--primitive-font-size-body-md": "15px",
-      "--primitive-font-size-body-sm": "14px",
-      "--primitive-font-size-body-xs": "13px",
-      "--primitive-font-size-body-2xs": "12px",
-      "--primitive-font-size-label-lg": "15px",
-      "--primitive-font-size-label-md": "14px",
-      "--primitive-font-size-label-sm": "12px",
-      "--primitive-font-line-height-hero-4": "70px",
-      "--primitive-font-line-height-hero-3": "60px",
-      "--primitive-font-line-height-hero-2": "50px",
-      "--primitive-font-line-height-hero-1": "40px",
-      "--primitive-font-line-height-title-4": "36.400001525878906px",
-      "--primitive-font-line-height-title-3": "31.200000762939453px",
-      "--primitive-font-line-height-title-2": "26px",
-      "--primitive-font-line-height-title-1": "22.100000381469727px",
-      "--primitive-font-line-height-label-lg": "22.5px",
-      "--primitive-font-line-height-label-md": "21px",
-      "--primitive-font-line-height-label-sm": "18px",
-      "--primitive-font-line-height-body-lg": "25.600000381469727px",
-      "--primitive-font-line-height-body-md": "24px",
-      "--primitive-font-line-height-body-sm": "22.399999618530273px",
-      "--primitive-font-line-height-body-xs": "20.799999237060547px",
-      "--primitive-font-line-height-body-2xs": "19.200000762939453px",
-      "--primitive-font-letter-spacing-hero-4": "-1.7400000095367432px",
-      "--primitive-font-letter-spacing-hero-3": "-1.340000033378601px",
-      "--primitive-font-letter-spacing-hero-2": "-1px",
-      "--primitive-font-letter-spacing-hero-1": "-0.699999988079071px",
-      "--primitive-font-letter-spacing-title-4": "-0.5600000023841858px",
-      "--primitive-font-letter-spacing-title-3": "-0.4099999964237213px",
-      "--primitive-font-letter-spacing-title-2": "-0.2800000011920929px",
-      "--primitive-font-letter-spacing-title-1": "-0.1899999976158142px",
-      "--primitive-font-letter-spacing-label-lg": "-0.15000000596046448px",
-      "--primitive-font-letter-spacing-label-md": "-0.10999999940395355px",
-      "--primitive-font-letter-spacing-label-sm": "-0.07000000029802322px",
-      "--primitive-font-letter-spacing-body-lg": "0.017000000923871994px",
-      "--primitive-font-letter-spacing-body-md": "0.04500000178813934px",
-      "--primitive-font-letter-spacing-body-sm": "0.05999999865889549px",
-      "--primitive-font-letter-spacing-body-xs": "0.07000000029802322px",
-      "--primitive-font-letter-spacing-body-2xs": "0.07000000029802322px",
-      "--primitive-font-weight-hero-normal": "600",
-      "--primitive-font-weight-title-normal": "530",
-      "--primitive-font-weight-label-normal": "450",
-      "--primitive-font-weight-body-normal": "400",
-      "--primitive-font-weight-hero-bold": "640",
-      "--primitive-font-weight-title-bold": "580",
-      "--primitive-font-weight-label-bold": "500",
-      "--primitive-font-weight-label-subtle": "400",
-      "--primitive-font-weight-body-bold": "430",
-      "--primitive-font-size-syntax-lg": "16px",
-      "--primitive-font-size-syntax-md": "15px",
-      "--primitive-font-size-syntax-sm": "13px",
-      "--primitive-font-weight-syntax-normal": "400",
-      "--primitive-font-line-height-syntax-lg": "27.200000762939453px",
-      "--primitive-font-line-height-syntax-md": "25.5px",
-      "--primitive-font-line-height-syntax-sm": "22.100000381469727px",
-      "--primitive-typeface-title": "Pretendard Variable",
-      "--primitive-typeface-label": "Pretendard Variable",
-      "--primitive-typeface-body": "Pretendard Variable",
-      "--primitive-font-size-label-xs": "11px",
-      "--primitive-font-line-height-label-xs": "16.5px",
-      "--primitive-font-letter-spacing-label-xs": "-0.03999999910593033px",
-      "--primitive-font-size-syntax-xs": "12px",
-      "--primitive-font-line-height-syntax-xs": "20.399999618530273px"
-    }
-  }
 } as const;
diff --git a/packages/jds/src/tokens/schema.ts b/packages/jds/src/tokens/schema.ts
index bd23396e8..e90181ac9 100644
--- a/packages/jds/src/tokens/schema.ts
+++ b/packages/jds/src/tokens/schema.ts
@@ -46,6 +46,7 @@ const pxProperties = [
   'paragraph-indent',
   'border-radius',
   'radius',
+  'stroke-weight',
   'spacing',
   'width',
   'height',
diff --git a/packages/jds/src/tokens/theme.ts b/packages/jds/src/tokens/theme.ts
index 020a24dd6..ce40dc3ef 100644
--- a/packages/jds/src/tokens/theme.ts
+++ b/packages/jds/src/tokens/theme.ts
@@ -1,5 +1,5 @@
 // 자동 생성된 theme - 수정 금지
-// 생성 시간: 11/14/2025, 5:10:13 PM
+// 생성 시간: 11/21/2025, 5:05:04 PM
 
 export const theme = {
   colorPrimitive: {
diff --git a/packages/jds/src/tokens/tokens.ts b/packages/jds/src/tokens/tokens.ts
index 6c620e59c..2ec4f87b4 100644
--- a/packages/jds/src/tokens/tokens.ts
+++ b/packages/jds/src/tokens/tokens.ts
@@ -1,2818 +1,2818 @@
 // 자동 생성된 디자인 토큰 - 수정 금지
-// 생성 시간: 11/14/2025, 5:10:13 PM
+// 생성 시간: 11/21/2025, 5:05:04 PM
 
 export const designTokens = {
-  "colorPrimitive": {
-    "primitive": {
-      "flow": {
-        "20": "var(--primitive-flow-20)",
-        "40": "var(--primitive-flow-40)",
-        "60": "var(--primitive-flow-60)",
-        "80": "var(--primitive-flow-80)",
-        "100": "var(--primitive-flow-100)",
-        "150": "var(--primitive-flow-150)",
-        "200": "var(--primitive-flow-200)",
-        "250": "var(--primitive-flow-250)",
-        "300": "var(--primitive-flow-300)",
-        "350": "var(--primitive-flow-350)",
-        "400": "var(--primitive-flow-400)",
-        "450": "var(--primitive-flow-450)",
-        "500": "var(--primitive-flow-500)",
-        "550": "var(--primitive-flow-550)",
-        "600": "var(--primitive-flow-600)",
-        "650": "var(--primitive-flow-650)",
-        "700": "var(--primitive-flow-700)",
-        "750": "var(--primitive-flow-750)",
-        "800": "var(--primitive-flow-800)",
-        "820": "var(--primitive-flow-820)",
-        "840": "var(--primitive-flow-840)",
-        "860": "var(--primitive-flow-860)",
-        "880": "var(--primitive-flow-880)",
-        "900": "var(--primitive-flow-900)",
-        "dark": {
-          "alpha": {
-            "20": "var(--primitive-flow-dark-alpha-20)",
-            "40": "var(--primitive-flow-dark-alpha-40)",
-            "60": "var(--primitive-flow-dark-alpha-60)",
-            "80": "var(--primitive-flow-dark-alpha-80)",
-            "100": "var(--primitive-flow-dark-alpha-100)",
-            "150": "var(--primitive-flow-dark-alpha-150)",
-            "200": "var(--primitive-flow-dark-alpha-200)",
-            "250": "var(--primitive-flow-dark-alpha-250)",
-            "300": "var(--primitive-flow-dark-alpha-300)",
-            "350": "var(--primitive-flow-dark-alpha-350)",
-            "400": "var(--primitive-flow-dark-alpha-400)",
-            "450": "var(--primitive-flow-dark-alpha-450)",
-            "500": "var(--primitive-flow-dark-alpha-500)",
-            "550": "var(--primitive-flow-dark-alpha-550)",
-            "600": "var(--primitive-flow-dark-alpha-600)",
-            "650": "var(--primitive-flow-dark-alpha-650)",
-            "700": "var(--primitive-flow-dark-alpha-700)",
-            "750": "var(--primitive-flow-dark-alpha-750)",
-            "800": "var(--primitive-flow-dark-alpha-800)",
-            "820": "var(--primitive-flow-dark-alpha-820)",
-            "840": "var(--primitive-flow-dark-alpha-840)",
-            "860": "var(--primitive-flow-dark-alpha-860)",
-            "880": "var(--primitive-flow-dark-alpha-880)",
-            "900": "var(--primitive-flow-dark-alpha-900)"
-          }
+  colorPrimitive: {
+    primitive: {
+      flow: {
+        '20': 'var(--primitive-flow-20)',
+        '40': 'var(--primitive-flow-40)',
+        '60': 'var(--primitive-flow-60)',
+        '80': 'var(--primitive-flow-80)',
+        '100': 'var(--primitive-flow-100)',
+        '150': 'var(--primitive-flow-150)',
+        '200': 'var(--primitive-flow-200)',
+        '250': 'var(--primitive-flow-250)',
+        '300': 'var(--primitive-flow-300)',
+        '350': 'var(--primitive-flow-350)',
+        '400': 'var(--primitive-flow-400)',
+        '450': 'var(--primitive-flow-450)',
+        '500': 'var(--primitive-flow-500)',
+        '550': 'var(--primitive-flow-550)',
+        '600': 'var(--primitive-flow-600)',
+        '650': 'var(--primitive-flow-650)',
+        '700': 'var(--primitive-flow-700)',
+        '750': 'var(--primitive-flow-750)',
+        '800': 'var(--primitive-flow-800)',
+        '820': 'var(--primitive-flow-820)',
+        '840': 'var(--primitive-flow-840)',
+        '860': 'var(--primitive-flow-860)',
+        '880': 'var(--primitive-flow-880)',
+        '900': 'var(--primitive-flow-900)',
+        dark: {
+          alpha: {
+            '20': 'var(--primitive-flow-dark-alpha-20)',
+            '40': 'var(--primitive-flow-dark-alpha-40)',
+            '60': 'var(--primitive-flow-dark-alpha-60)',
+            '80': 'var(--primitive-flow-dark-alpha-80)',
+            '100': 'var(--primitive-flow-dark-alpha-100)',
+            '150': 'var(--primitive-flow-dark-alpha-150)',
+            '200': 'var(--primitive-flow-dark-alpha-200)',
+            '250': 'var(--primitive-flow-dark-alpha-250)',
+            '300': 'var(--primitive-flow-dark-alpha-300)',
+            '350': 'var(--primitive-flow-dark-alpha-350)',
+            '400': 'var(--primitive-flow-dark-alpha-400)',
+            '450': 'var(--primitive-flow-dark-alpha-450)',
+            '500': 'var(--primitive-flow-dark-alpha-500)',
+            '550': 'var(--primitive-flow-dark-alpha-550)',
+            '600': 'var(--primitive-flow-dark-alpha-600)',
+            '650': 'var(--primitive-flow-dark-alpha-650)',
+            '700': 'var(--primitive-flow-dark-alpha-700)',
+            '750': 'var(--primitive-flow-dark-alpha-750)',
+            '800': 'var(--primitive-flow-dark-alpha-800)',
+            '820': 'var(--primitive-flow-dark-alpha-820)',
+            '840': 'var(--primitive-flow-dark-alpha-840)',
+            '860': 'var(--primitive-flow-dark-alpha-860)',
+            '880': 'var(--primitive-flow-dark-alpha-880)',
+            '900': 'var(--primitive-flow-dark-alpha-900)',
+          },
+        },
+        light: {
+          alpha: {
+            '20': 'var(--primitive-flow-light-alpha-20)',
+            '40': 'var(--primitive-flow-light-alpha-40)',
+            '60': 'var(--primitive-flow-light-alpha-60)',
+            '80': 'var(--primitive-flow-light-alpha-80)',
+            '100': 'var(--primitive-flow-light-alpha-100)',
+            '150': 'var(--primitive-flow-light-alpha-150)',
+            '200': 'var(--primitive-flow-light-alpha-200)',
+            '250': 'var(--primitive-flow-light-alpha-250)',
+            '300': 'var(--primitive-flow-light-alpha-300)',
+            '350': 'var(--primitive-flow-light-alpha-350)',
+            '400': 'var(--primitive-flow-light-alpha-400)',
+            '450': 'var(--primitive-flow-light-alpha-450)',
+            '500': 'var(--primitive-flow-light-alpha-500)',
+            '550': 'var(--primitive-flow-light-alpha-550)',
+            '600': 'var(--primitive-flow-light-alpha-600)',
+            '650': 'var(--primitive-flow-light-alpha-650)',
+            '700': 'var(--primitive-flow-light-alpha-700)',
+            '750': 'var(--primitive-flow-light-alpha-750)',
+            '800': 'var(--primitive-flow-light-alpha-800)',
+            '820': 'var(--primitive-flow-light-alpha-820)',
+            '840': 'var(--primitive-flow-light-alpha-840)',
+            '860': 'var(--primitive-flow-light-alpha-860)',
+            '880': 'var(--primitive-flow-light-alpha-880)',
+            '900': 'var(--primitive-flow-light-alpha-900)',
+          },
         },
-        "light": {
-          "alpha": {
-            "20": "var(--primitive-flow-light-alpha-20)",
-            "40": "var(--primitive-flow-light-alpha-40)",
-            "60": "var(--primitive-flow-light-alpha-60)",
-            "80": "var(--primitive-flow-light-alpha-80)",
-            "100": "var(--primitive-flow-light-alpha-100)",
-            "150": "var(--primitive-flow-light-alpha-150)",
-            "200": "var(--primitive-flow-light-alpha-200)",
-            "250": "var(--primitive-flow-light-alpha-250)",
-            "300": "var(--primitive-flow-light-alpha-300)",
-            "350": "var(--primitive-flow-light-alpha-350)",
-            "400": "var(--primitive-flow-light-alpha-400)",
-            "450": "var(--primitive-flow-light-alpha-450)",
-            "500": "var(--primitive-flow-light-alpha-500)",
-            "550": "var(--primitive-flow-light-alpha-550)",
-            "600": "var(--primitive-flow-light-alpha-600)",
-            "650": "var(--primitive-flow-light-alpha-650)",
-            "700": "var(--primitive-flow-light-alpha-700)",
-            "750": "var(--primitive-flow-light-alpha-750)",
-            "800": "var(--primitive-flow-light-alpha-800)",
-            "820": "var(--primitive-flow-light-alpha-820)",
-            "840": "var(--primitive-flow-light-alpha-840)",
-            "860": "var(--primitive-flow-light-alpha-860)",
-            "880": "var(--primitive-flow-light-alpha-880)",
-            "900": "var(--primitive-flow-light-alpha-900)"
-          }
-        }
       },
-      "red": {
-        "20": "var(--primitive-red-20)",
-        "40": "var(--primitive-red-40)",
-        "60": "var(--primitive-red-60)",
-        "80": "var(--primitive-red-80)",
-        "100": "var(--primitive-red-100)",
-        "150": "var(--primitive-red-150)",
-        "200": "var(--primitive-red-200)",
-        "250": "var(--primitive-red-250)",
-        "300": "var(--primitive-red-300)",
-        "350": "var(--primitive-red-350)",
-        "400": "var(--primitive-red-400)",
-        "450": "var(--primitive-red-450)",
-        "500": "var(--primitive-red-500)",
-        "550": "var(--primitive-red-550)",
-        "600": "var(--primitive-red-600)",
-        "650": "var(--primitive-red-650)",
-        "700": "var(--primitive-red-700)",
-        "750": "var(--primitive-red-750)",
-        "800": "var(--primitive-red-800)",
-        "820": "var(--primitive-red-820)",
-        "840": "var(--primitive-red-840)",
-        "860": "var(--primitive-red-860)",
-        "880": "var(--primitive-red-880)",
-        "900": "var(--primitive-red-900)"
+      red: {
+        '20': 'var(--primitive-red-20)',
+        '40': 'var(--primitive-red-40)',
+        '60': 'var(--primitive-red-60)',
+        '80': 'var(--primitive-red-80)',
+        '100': 'var(--primitive-red-100)',
+        '150': 'var(--primitive-red-150)',
+        '200': 'var(--primitive-red-200)',
+        '250': 'var(--primitive-red-250)',
+        '300': 'var(--primitive-red-300)',
+        '350': 'var(--primitive-red-350)',
+        '400': 'var(--primitive-red-400)',
+        '450': 'var(--primitive-red-450)',
+        '500': 'var(--primitive-red-500)',
+        '550': 'var(--primitive-red-550)',
+        '600': 'var(--primitive-red-600)',
+        '650': 'var(--primitive-red-650)',
+        '700': 'var(--primitive-red-700)',
+        '750': 'var(--primitive-red-750)',
+        '800': 'var(--primitive-red-800)',
+        '820': 'var(--primitive-red-820)',
+        '840': 'var(--primitive-red-840)',
+        '860': 'var(--primitive-red-860)',
+        '880': 'var(--primitive-red-880)',
+        '900': 'var(--primitive-red-900)',
       },
-      "shade": {
-        "2": "var(--primitive-shade-2)",
-        "4": "var(--primitive-shade-4)",
-        "6": "var(--primitive-shade-6)",
-        "8": "var(--primitive-shade-8)",
-        "12": "var(--primitive-shade-12)",
-        "16": "var(--primitive-shade-16)"
+      shade: {
+        '2': 'var(--primitive-shade-2)',
+        '4': 'var(--primitive-shade-4)',
+        '6': 'var(--primitive-shade-6)',
+        '8': 'var(--primitive-shade-8)',
+        '12': 'var(--primitive-shade-12)',
+        '16': 'var(--primitive-shade-16)',
       },
-      "base": {
-        "0": "var(--primitive-base-0)",
-        "1000": "var(--primitive-base-1000)"
+      base: {
+        '0': 'var(--primitive-base-0)',
+        '1000': 'var(--primitive-base-1000)',
       },
-      "orange": {
-        "20": "var(--primitive-orange-20)",
-        "40": "var(--primitive-orange-40)",
-        "60": "var(--primitive-orange-60)",
-        "80": "var(--primitive-orange-80)",
-        "100": "var(--primitive-orange-100)",
-        "150": "var(--primitive-orange-150)",
-        "200": "var(--primitive-orange-200)",
-        "250": "var(--primitive-orange-250)",
-        "300": "var(--primitive-orange-300)",
-        "350": "var(--primitive-orange-350)",
-        "400": "var(--primitive-orange-400)",
-        "450": "var(--primitive-orange-450)",
-        "500": "var(--primitive-orange-500)",
-        "550": "var(--primitive-orange-550)",
-        "600": "var(--primitive-orange-600)",
-        "650": "var(--primitive-orange-650)",
-        "700": "var(--primitive-orange-700)",
-        "750": "var(--primitive-orange-750)",
-        "800": "var(--primitive-orange-800)",
-        "820": "var(--primitive-orange-820)",
-        "840": "var(--primitive-orange-840)",
-        "860": "var(--primitive-orange-860)",
-        "880": "var(--primitive-orange-880)",
-        "900": "var(--primitive-orange-900)"
+      orange: {
+        '20': 'var(--primitive-orange-20)',
+        '40': 'var(--primitive-orange-40)',
+        '60': 'var(--primitive-orange-60)',
+        '80': 'var(--primitive-orange-80)',
+        '100': 'var(--primitive-orange-100)',
+        '150': 'var(--primitive-orange-150)',
+        '200': 'var(--primitive-orange-200)',
+        '250': 'var(--primitive-orange-250)',
+        '300': 'var(--primitive-orange-300)',
+        '350': 'var(--primitive-orange-350)',
+        '400': 'var(--primitive-orange-400)',
+        '450': 'var(--primitive-orange-450)',
+        '500': 'var(--primitive-orange-500)',
+        '550': 'var(--primitive-orange-550)',
+        '600': 'var(--primitive-orange-600)',
+        '650': 'var(--primitive-orange-650)',
+        '700': 'var(--primitive-orange-700)',
+        '750': 'var(--primitive-orange-750)',
+        '800': 'var(--primitive-orange-800)',
+        '820': 'var(--primitive-orange-820)',
+        '840': 'var(--primitive-orange-840)',
+        '860': 'var(--primitive-orange-860)',
+        '880': 'var(--primitive-orange-880)',
+        '900': 'var(--primitive-orange-900)',
       },
-      "yellow": {
-        "20": "var(--primitive-yellow-20)",
-        "40": "var(--primitive-yellow-40)",
-        "60": "var(--primitive-yellow-60)",
-        "80": "var(--primitive-yellow-80)",
-        "100": "var(--primitive-yellow-100)",
-        "150": "var(--primitive-yellow-150)",
-        "200": "var(--primitive-yellow-200)",
-        "250": "var(--primitive-yellow-250)",
-        "300": "var(--primitive-yellow-300)",
-        "350": "var(--primitive-yellow-350)",
-        "400": "var(--primitive-yellow-400)",
-        "450": "var(--primitive-yellow-450)",
-        "500": "var(--primitive-yellow-500)",
-        "550": "var(--primitive-yellow-550)",
-        "600": "var(--primitive-yellow-600)",
-        "650": "var(--primitive-yellow-650)",
-        "700": "var(--primitive-yellow-700)",
-        "750": "var(--primitive-yellow-750)",
-        "800": "var(--primitive-yellow-800)",
-        "820": "var(--primitive-yellow-820)",
-        "840": "var(--primitive-yellow-840)",
-        "860": "var(--primitive-yellow-860)",
-        "880": "var(--primitive-yellow-880)",
-        "900": "var(--primitive-yellow-900)"
+      yellow: {
+        '20': 'var(--primitive-yellow-20)',
+        '40': 'var(--primitive-yellow-40)',
+        '60': 'var(--primitive-yellow-60)',
+        '80': 'var(--primitive-yellow-80)',
+        '100': 'var(--primitive-yellow-100)',
+        '150': 'var(--primitive-yellow-150)',
+        '200': 'var(--primitive-yellow-200)',
+        '250': 'var(--primitive-yellow-250)',
+        '300': 'var(--primitive-yellow-300)',
+        '350': 'var(--primitive-yellow-350)',
+        '400': 'var(--primitive-yellow-400)',
+        '450': 'var(--primitive-yellow-450)',
+        '500': 'var(--primitive-yellow-500)',
+        '550': 'var(--primitive-yellow-550)',
+        '600': 'var(--primitive-yellow-600)',
+        '650': 'var(--primitive-yellow-650)',
+        '700': 'var(--primitive-yellow-700)',
+        '750': 'var(--primitive-yellow-750)',
+        '800': 'var(--primitive-yellow-800)',
+        '820': 'var(--primitive-yellow-820)',
+        '840': 'var(--primitive-yellow-840)',
+        '860': 'var(--primitive-yellow-860)',
+        '880': 'var(--primitive-yellow-880)',
+        '900': 'var(--primitive-yellow-900)',
       },
-      "lime": {
-        "20": "var(--primitive-lime-20)",
-        "40": "var(--primitive-lime-40)",
-        "60": "var(--primitive-lime-60)",
-        "80": "var(--primitive-lime-80)",
-        "100": "var(--primitive-lime-100)",
-        "150": "var(--primitive-lime-150)",
-        "200": "var(--primitive-lime-200)",
-        "250": "var(--primitive-lime-250)",
-        "300": "var(--primitive-lime-300)",
-        "350": "var(--primitive-lime-350)",
-        "400": "var(--primitive-lime-400)",
-        "450": "var(--primitive-lime-450)",
-        "500": "var(--primitive-lime-500)",
-        "550": "var(--primitive-lime-550)",
-        "600": "var(--primitive-lime-600)",
-        "650": "var(--primitive-lime-650)",
-        "700": "var(--primitive-lime-700)",
-        "750": "var(--primitive-lime-750)",
-        "800": "var(--primitive-lime-800)",
-        "820": "var(--primitive-lime-820)",
-        "840": "var(--primitive-lime-840)",
-        "860": "var(--primitive-lime-860)",
-        "880": "var(--primitive-lime-880)",
-        "900": "var(--primitive-lime-900)"
+      lime: {
+        '20': 'var(--primitive-lime-20)',
+        '40': 'var(--primitive-lime-40)',
+        '60': 'var(--primitive-lime-60)',
+        '80': 'var(--primitive-lime-80)',
+        '100': 'var(--primitive-lime-100)',
+        '150': 'var(--primitive-lime-150)',
+        '200': 'var(--primitive-lime-200)',
+        '250': 'var(--primitive-lime-250)',
+        '300': 'var(--primitive-lime-300)',
+        '350': 'var(--primitive-lime-350)',
+        '400': 'var(--primitive-lime-400)',
+        '450': 'var(--primitive-lime-450)',
+        '500': 'var(--primitive-lime-500)',
+        '550': 'var(--primitive-lime-550)',
+        '600': 'var(--primitive-lime-600)',
+        '650': 'var(--primitive-lime-650)',
+        '700': 'var(--primitive-lime-700)',
+        '750': 'var(--primitive-lime-750)',
+        '800': 'var(--primitive-lime-800)',
+        '820': 'var(--primitive-lime-820)',
+        '840': 'var(--primitive-lime-840)',
+        '860': 'var(--primitive-lime-860)',
+        '880': 'var(--primitive-lime-880)',
+        '900': 'var(--primitive-lime-900)',
       },
-      "green": {
-        "20": "var(--primitive-green-20)",
-        "40": "var(--primitive-green-40)",
-        "60": "var(--primitive-green-60)",
-        "80": "var(--primitive-green-80)",
-        "100": "var(--primitive-green-100)",
-        "150": "var(--primitive-green-150)",
-        "200": "var(--primitive-green-200)",
-        "250": "var(--primitive-green-250)",
-        "300": "var(--primitive-green-300)",
-        "350": "var(--primitive-green-350)",
-        "400": "var(--primitive-green-400)",
-        "450": "var(--primitive-green-450)",
-        "500": "var(--primitive-green-500)",
-        "550": "var(--primitive-green-550)",
-        "600": "var(--primitive-green-600)",
-        "650": "var(--primitive-green-650)",
-        "700": "var(--primitive-green-700)",
-        "750": "var(--primitive-green-750)",
-        "800": "var(--primitive-green-800)",
-        "820": "var(--primitive-green-820)",
-        "840": "var(--primitive-green-840)",
-        "860": "var(--primitive-green-860)",
-        "880": "var(--primitive-green-880)",
-        "900": "var(--primitive-green-900)"
+      green: {
+        '20': 'var(--primitive-green-20)',
+        '40': 'var(--primitive-green-40)',
+        '60': 'var(--primitive-green-60)',
+        '80': 'var(--primitive-green-80)',
+        '100': 'var(--primitive-green-100)',
+        '150': 'var(--primitive-green-150)',
+        '200': 'var(--primitive-green-200)',
+        '250': 'var(--primitive-green-250)',
+        '300': 'var(--primitive-green-300)',
+        '350': 'var(--primitive-green-350)',
+        '400': 'var(--primitive-green-400)',
+        '450': 'var(--primitive-green-450)',
+        '500': 'var(--primitive-green-500)',
+        '550': 'var(--primitive-green-550)',
+        '600': 'var(--primitive-green-600)',
+        '650': 'var(--primitive-green-650)',
+        '700': 'var(--primitive-green-700)',
+        '750': 'var(--primitive-green-750)',
+        '800': 'var(--primitive-green-800)',
+        '820': 'var(--primitive-green-820)',
+        '840': 'var(--primitive-green-840)',
+        '860': 'var(--primitive-green-860)',
+        '880': 'var(--primitive-green-880)',
+        '900': 'var(--primitive-green-900)',
       },
-      "cyan": {
-        "20": "var(--primitive-cyan-20)",
-        "40": "var(--primitive-cyan-40)",
-        "60": "var(--primitive-cyan-60)",
-        "80": "var(--primitive-cyan-80)",
-        "100": "var(--primitive-cyan-100)",
-        "150": "var(--primitive-cyan-150)",
-        "200": "var(--primitive-cyan-200)",
-        "250": "var(--primitive-cyan-250)",
-        "300": "var(--primitive-cyan-300)",
-        "350": "var(--primitive-cyan-350)",
-        "400": "var(--primitive-cyan-400)",
-        "450": "var(--primitive-cyan-450)",
-        "500": "var(--primitive-cyan-500)",
-        "550": "var(--primitive-cyan-550)",
-        "600": "var(--primitive-cyan-600)",
-        "650": "var(--primitive-cyan-650)",
-        "700": "var(--primitive-cyan-700)",
-        "750": "var(--primitive-cyan-750)",
-        "800": "var(--primitive-cyan-800)",
-        "820": "var(--primitive-cyan-820)",
-        "840": "var(--primitive-cyan-840)",
-        "860": "var(--primitive-cyan-860)",
-        "880": "var(--primitive-cyan-880)",
-        "900": "var(--primitive-cyan-900)"
+      cyan: {
+        '20': 'var(--primitive-cyan-20)',
+        '40': 'var(--primitive-cyan-40)',
+        '60': 'var(--primitive-cyan-60)',
+        '80': 'var(--primitive-cyan-80)',
+        '100': 'var(--primitive-cyan-100)',
+        '150': 'var(--primitive-cyan-150)',
+        '200': 'var(--primitive-cyan-200)',
+        '250': 'var(--primitive-cyan-250)',
+        '300': 'var(--primitive-cyan-300)',
+        '350': 'var(--primitive-cyan-350)',
+        '400': 'var(--primitive-cyan-400)',
+        '450': 'var(--primitive-cyan-450)',
+        '500': 'var(--primitive-cyan-500)',
+        '550': 'var(--primitive-cyan-550)',
+        '600': 'var(--primitive-cyan-600)',
+        '650': 'var(--primitive-cyan-650)',
+        '700': 'var(--primitive-cyan-700)',
+        '750': 'var(--primitive-cyan-750)',
+        '800': 'var(--primitive-cyan-800)',
+        '820': 'var(--primitive-cyan-820)',
+        '840': 'var(--primitive-cyan-840)',
+        '860': 'var(--primitive-cyan-860)',
+        '880': 'var(--primitive-cyan-880)',
+        '900': 'var(--primitive-cyan-900)',
       },
-      "sky": {
-        "20": "var(--primitive-sky-20)",
-        "40": "var(--primitive-sky-40)",
-        "60": "var(--primitive-sky-60)",
-        "80": "var(--primitive-sky-80)",
-        "100": "var(--primitive-sky-100)",
-        "150": "var(--primitive-sky-150)",
-        "200": "var(--primitive-sky-200)",
-        "250": "var(--primitive-sky-250)",
-        "300": "var(--primitive-sky-300)",
-        "350": "var(--primitive-sky-350)",
-        "400": "var(--primitive-sky-400)",
-        "450": "var(--primitive-sky-450)",
-        "500": "var(--primitive-sky-500)",
-        "550": "var(--primitive-sky-550)",
-        "600": "var(--primitive-sky-600)",
-        "650": "var(--primitive-sky-650)",
-        "700": "var(--primitive-sky-700)",
-        "750": "var(--primitive-sky-750)",
-        "800": "var(--primitive-sky-800)",
-        "820": "var(--primitive-sky-820)",
-        "840": "var(--primitive-sky-840)",
-        "860": "var(--primitive-sky-860)",
-        "880": "var(--primitive-sky-880)",
-        "900": "var(--primitive-sky-900)"
+      sky: {
+        '20': 'var(--primitive-sky-20)',
+        '40': 'var(--primitive-sky-40)',
+        '60': 'var(--primitive-sky-60)',
+        '80': 'var(--primitive-sky-80)',
+        '100': 'var(--primitive-sky-100)',
+        '150': 'var(--primitive-sky-150)',
+        '200': 'var(--primitive-sky-200)',
+        '250': 'var(--primitive-sky-250)',
+        '300': 'var(--primitive-sky-300)',
+        '350': 'var(--primitive-sky-350)',
+        '400': 'var(--primitive-sky-400)',
+        '450': 'var(--primitive-sky-450)',
+        '500': 'var(--primitive-sky-500)',
+        '550': 'var(--primitive-sky-550)',
+        '600': 'var(--primitive-sky-600)',
+        '650': 'var(--primitive-sky-650)',
+        '700': 'var(--primitive-sky-700)',
+        '750': 'var(--primitive-sky-750)',
+        '800': 'var(--primitive-sky-800)',
+        '820': 'var(--primitive-sky-820)',
+        '840': 'var(--primitive-sky-840)',
+        '860': 'var(--primitive-sky-860)',
+        '880': 'var(--primitive-sky-880)',
+        '900': 'var(--primitive-sky-900)',
       },
-      "blue": {
-        "20": "var(--primitive-blue-20)",
-        "40": "var(--primitive-blue-40)",
-        "60": "var(--primitive-blue-60)",
-        "80": "var(--primitive-blue-80)",
-        "100": "var(--primitive-blue-100)",
-        "150": "var(--primitive-blue-150)",
-        "200": "var(--primitive-blue-200)",
-        "250": "var(--primitive-blue-250)",
-        "300": "var(--primitive-blue-300)",
-        "350": "var(--primitive-blue-350)",
-        "400": "var(--primitive-blue-400)",
-        "450": "var(--primitive-blue-450)",
-        "500": "var(--primitive-blue-500)",
-        "550": "var(--primitive-blue-550)",
-        "600": "var(--primitive-blue-600)",
-        "650": "var(--primitive-blue-650)",
-        "700": "var(--primitive-blue-700)",
-        "750": "var(--primitive-blue-750)",
-        "800": "var(--primitive-blue-800)",
-        "820": "var(--primitive-blue-820)",
-        "840": "var(--primitive-blue-840)",
-        "860": "var(--primitive-blue-860)",
-        "880": "var(--primitive-blue-880)",
-        "900": "var(--primitive-blue-900)"
+      blue: {
+        '20': 'var(--primitive-blue-20)',
+        '40': 'var(--primitive-blue-40)',
+        '60': 'var(--primitive-blue-60)',
+        '80': 'var(--primitive-blue-80)',
+        '100': 'var(--primitive-blue-100)',
+        '150': 'var(--primitive-blue-150)',
+        '200': 'var(--primitive-blue-200)',
+        '250': 'var(--primitive-blue-250)',
+        '300': 'var(--primitive-blue-300)',
+        '350': 'var(--primitive-blue-350)',
+        '400': 'var(--primitive-blue-400)',
+        '450': 'var(--primitive-blue-450)',
+        '500': 'var(--primitive-blue-500)',
+        '550': 'var(--primitive-blue-550)',
+        '600': 'var(--primitive-blue-600)',
+        '650': 'var(--primitive-blue-650)',
+        '700': 'var(--primitive-blue-700)',
+        '750': 'var(--primitive-blue-750)',
+        '800': 'var(--primitive-blue-800)',
+        '820': 'var(--primitive-blue-820)',
+        '840': 'var(--primitive-blue-840)',
+        '860': 'var(--primitive-blue-860)',
+        '880': 'var(--primitive-blue-880)',
+        '900': 'var(--primitive-blue-900)',
+      },
+      cerulean: {
+        blue: {
+          '20': 'var(--primitive-cerulean-blue-20)',
+          '40': 'var(--primitive-cerulean-blue-40)',
+          '60': 'var(--primitive-cerulean-blue-60)',
+          '80': 'var(--primitive-cerulean-blue-80)',
+          '100': 'var(--primitive-cerulean-blue-100)',
+          '150': 'var(--primitive-cerulean-blue-150)',
+          '200': 'var(--primitive-cerulean-blue-200)',
+          '250': 'var(--primitive-cerulean-blue-250)',
+          '300': 'var(--primitive-cerulean-blue-300)',
+          '350': 'var(--primitive-cerulean-blue-350)',
+          '400': 'var(--primitive-cerulean-blue-400)',
+          '450': 'var(--primitive-cerulean-blue-450)',
+          '500': 'var(--primitive-cerulean-blue-500)',
+          '550': 'var(--primitive-cerulean-blue-550)',
+          '600': 'var(--primitive-cerulean-blue-600)',
+          '650': 'var(--primitive-cerulean-blue-650)',
+          '700': 'var(--primitive-cerulean-blue-700)',
+          '750': 'var(--primitive-cerulean-blue-750)',
+          '800': 'var(--primitive-cerulean-blue-800)',
+          '820': 'var(--primitive-cerulean-blue-820)',
+          '840': 'var(--primitive-cerulean-blue-840)',
+          '860': 'var(--primitive-cerulean-blue-860)',
+          '880': 'var(--primitive-cerulean-blue-880)',
+          '900': 'var(--primitive-cerulean-blue-900)',
+        },
       },
-      "cerulean": {
-        "blue": {
-          "20": "var(--primitive-cerulean-blue-20)",
-          "40": "var(--primitive-cerulean-blue-40)",
-          "60": "var(--primitive-cerulean-blue-60)",
-          "80": "var(--primitive-cerulean-blue-80)",
-          "100": "var(--primitive-cerulean-blue-100)",
-          "150": "var(--primitive-cerulean-blue-150)",
-          "200": "var(--primitive-cerulean-blue-200)",
-          "250": "var(--primitive-cerulean-blue-250)",
-          "300": "var(--primitive-cerulean-blue-300)",
-          "350": "var(--primitive-cerulean-blue-350)",
-          "400": "var(--primitive-cerulean-blue-400)",
-          "450": "var(--primitive-cerulean-blue-450)",
-          "500": "var(--primitive-cerulean-blue-500)",
-          "550": "var(--primitive-cerulean-blue-550)",
-          "600": "var(--primitive-cerulean-blue-600)",
-          "650": "var(--primitive-cerulean-blue-650)",
-          "700": "var(--primitive-cerulean-blue-700)",
-          "750": "var(--primitive-cerulean-blue-750)",
-          "800": "var(--primitive-cerulean-blue-800)",
-          "820": "var(--primitive-cerulean-blue-820)",
-          "840": "var(--primitive-cerulean-blue-840)",
-          "860": "var(--primitive-cerulean-blue-860)",
-          "880": "var(--primitive-cerulean-blue-880)",
-          "900": "var(--primitive-cerulean-blue-900)"
-        }
+      violet: {
+        '20': 'var(--primitive-violet-20)',
+        '40': 'var(--primitive-violet-40)',
+        '60': 'var(--primitive-violet-60)',
+        '80': 'var(--primitive-violet-80)',
+        '100': 'var(--primitive-violet-100)',
+        '150': 'var(--primitive-violet-150)',
+        '200': 'var(--primitive-violet-200)',
+        '250': 'var(--primitive-violet-250)',
+        '300': 'var(--primitive-violet-300)',
+        '350': 'var(--primitive-violet-350)',
+        '400': 'var(--primitive-violet-400)',
+        '450': 'var(--primitive-violet-450)',
+        '500': 'var(--primitive-violet-500)',
+        '550': 'var(--primitive-violet-550)',
+        '600': 'var(--primitive-violet-600)',
+        '650': 'var(--primitive-violet-650)',
+        '700': 'var(--primitive-violet-700)',
+        '750': 'var(--primitive-violet-750)',
+        '800': 'var(--primitive-violet-800)',
+        '820': 'var(--primitive-violet-820)',
+        '840': 'var(--primitive-violet-840)',
+        '860': 'var(--primitive-violet-860)',
+        '880': 'var(--primitive-violet-880)',
+        '900': 'var(--primitive-violet-900)',
       },
-      "violet": {
-        "20": "var(--primitive-violet-20)",
-        "40": "var(--primitive-violet-40)",
-        "60": "var(--primitive-violet-60)",
-        "80": "var(--primitive-violet-80)",
-        "100": "var(--primitive-violet-100)",
-        "150": "var(--primitive-violet-150)",
-        "200": "var(--primitive-violet-200)",
-        "250": "var(--primitive-violet-250)",
-        "300": "var(--primitive-violet-300)",
-        "350": "var(--primitive-violet-350)",
-        "400": "var(--primitive-violet-400)",
-        "450": "var(--primitive-violet-450)",
-        "500": "var(--primitive-violet-500)",
-        "550": "var(--primitive-violet-550)",
-        "600": "var(--primitive-violet-600)",
-        "650": "var(--primitive-violet-650)",
-        "700": "var(--primitive-violet-700)",
-        "750": "var(--primitive-violet-750)",
-        "800": "var(--primitive-violet-800)",
-        "820": "var(--primitive-violet-820)",
-        "840": "var(--primitive-violet-840)",
-        "860": "var(--primitive-violet-860)",
-        "880": "var(--primitive-violet-880)",
-        "900": "var(--primitive-violet-900)"
+      purple: {
+        '20': 'var(--primitive-purple-20)',
+        '40': 'var(--primitive-purple-40)',
+        '60': 'var(--primitive-purple-60)',
+        '80': 'var(--primitive-purple-80)',
+        '100': 'var(--primitive-purple-100)',
+        '150': 'var(--primitive-purple-150)',
+        '200': 'var(--primitive-purple-200)',
+        '250': 'var(--primitive-purple-250)',
+        '300': 'var(--primitive-purple-300)',
+        '350': 'var(--primitive-purple-350)',
+        '400': 'var(--primitive-purple-400)',
+        '450': 'var(--primitive-purple-450)',
+        '500': 'var(--primitive-purple-500)',
+        '550': 'var(--primitive-purple-550)',
+        '600': 'var(--primitive-purple-600)',
+        '650': 'var(--primitive-purple-650)',
+        '700': 'var(--primitive-purple-700)',
+        '750': 'var(--primitive-purple-750)',
+        '800': 'var(--primitive-purple-800)',
+        '820': 'var(--primitive-purple-820)',
+        '840': 'var(--primitive-purple-840)',
+        '860': 'var(--primitive-purple-860)',
+        '880': 'var(--primitive-purple-880)',
+        '900': 'var(--primitive-purple-900)',
       },
-      "purple": {
-        "20": "var(--primitive-purple-20)",
-        "40": "var(--primitive-purple-40)",
-        "60": "var(--primitive-purple-60)",
-        "80": "var(--primitive-purple-80)",
-        "100": "var(--primitive-purple-100)",
-        "150": "var(--primitive-purple-150)",
-        "200": "var(--primitive-purple-200)",
-        "250": "var(--primitive-purple-250)",
-        "300": "var(--primitive-purple-300)",
-        "350": "var(--primitive-purple-350)",
-        "400": "var(--primitive-purple-400)",
-        "450": "var(--primitive-purple-450)",
-        "500": "var(--primitive-purple-500)",
-        "550": "var(--primitive-purple-550)",
-        "600": "var(--primitive-purple-600)",
-        "650": "var(--primitive-purple-650)",
-        "700": "var(--primitive-purple-700)",
-        "750": "var(--primitive-purple-750)",
-        "800": "var(--primitive-purple-800)",
-        "820": "var(--primitive-purple-820)",
-        "840": "var(--primitive-purple-840)",
-        "860": "var(--primitive-purple-860)",
-        "880": "var(--primitive-purple-880)",
-        "900": "var(--primitive-purple-900)"
+      fuchsia: {
+        '20': 'var(--primitive-fuchsia-20)',
+        '40': 'var(--primitive-fuchsia-40)',
+        '60': 'var(--primitive-fuchsia-60)',
+        '80': 'var(--primitive-fuchsia-80)',
+        '100': 'var(--primitive-fuchsia-100)',
+        '150': 'var(--primitive-fuchsia-150)',
+        '200': 'var(--primitive-fuchsia-200)',
+        '250': 'var(--primitive-fuchsia-250)',
+        '300': 'var(--primitive-fuchsia-300)',
+        '350': 'var(--primitive-fuchsia-350)',
+        '400': 'var(--primitive-fuchsia-400)',
+        '450': 'var(--primitive-fuchsia-450)',
+        '500': 'var(--primitive-fuchsia-500)',
+        '550': 'var(--primitive-fuchsia-550)',
+        '600': 'var(--primitive-fuchsia-600)',
+        '650': 'var(--primitive-fuchsia-650)',
+        '700': 'var(--primitive-fuchsia-700)',
+        '750': 'var(--primitive-fuchsia-750)',
+        '800': 'var(--primitive-fuchsia-800)',
+        '820': 'var(--primitive-fuchsia-820)',
+        '840': 'var(--primitive-fuchsia-840)',
+        '860': 'var(--primitive-fuchsia-860)',
+        '880': 'var(--primitive-fuchsia-880)',
+        '900': 'var(--primitive-fuchsia-900)',
       },
-      "fuchsia": {
-        "20": "var(--primitive-fuchsia-20)",
-        "40": "var(--primitive-fuchsia-40)",
-        "60": "var(--primitive-fuchsia-60)",
-        "80": "var(--primitive-fuchsia-80)",
-        "100": "var(--primitive-fuchsia-100)",
-        "150": "var(--primitive-fuchsia-150)",
-        "200": "var(--primitive-fuchsia-200)",
-        "250": "var(--primitive-fuchsia-250)",
-        "300": "var(--primitive-fuchsia-300)",
-        "350": "var(--primitive-fuchsia-350)",
-        "400": "var(--primitive-fuchsia-400)",
-        "450": "var(--primitive-fuchsia-450)",
-        "500": "var(--primitive-fuchsia-500)",
-        "550": "var(--primitive-fuchsia-550)",
-        "600": "var(--primitive-fuchsia-600)",
-        "650": "var(--primitive-fuchsia-650)",
-        "700": "var(--primitive-fuchsia-700)",
-        "750": "var(--primitive-fuchsia-750)",
-        "800": "var(--primitive-fuchsia-800)",
-        "820": "var(--primitive-fuchsia-820)",
-        "840": "var(--primitive-fuchsia-840)",
-        "860": "var(--primitive-fuchsia-860)",
-        "880": "var(--primitive-fuchsia-880)",
-        "900": "var(--primitive-fuchsia-900)"
+      pink: {
+        '20': 'var(--primitive-pink-20)',
+        '40': 'var(--primitive-pink-40)',
+        '60': 'var(--primitive-pink-60)',
+        '80': 'var(--primitive-pink-80)',
+        '100': 'var(--primitive-pink-100)',
+        '150': 'var(--primitive-pink-150)',
+        '200': 'var(--primitive-pink-200)',
+        '250': 'var(--primitive-pink-250)',
+        '300': 'var(--primitive-pink-300)',
+        '350': 'var(--primitive-pink-350)',
+        '400': 'var(--primitive-pink-400)',
+        '450': 'var(--primitive-pink-450)',
+        '500': 'var(--primitive-pink-500)',
+        '550': 'var(--primitive-pink-550)',
+        '600': 'var(--primitive-pink-600)',
+        '650': 'var(--primitive-pink-650)',
+        '700': 'var(--primitive-pink-700)',
+        '750': 'var(--primitive-pink-750)',
+        '800': 'var(--primitive-pink-800)',
+        '820': 'var(--primitive-pink-820)',
+        '840': 'var(--primitive-pink-840)',
+        '860': 'var(--primitive-pink-860)',
+        '880': 'var(--primitive-pink-880)',
+        '900': 'var(--primitive-pink-900)',
       },
-      "pink": {
-        "20": "var(--primitive-pink-20)",
-        "40": "var(--primitive-pink-40)",
-        "60": "var(--primitive-pink-60)",
-        "80": "var(--primitive-pink-80)",
-        "100": "var(--primitive-pink-100)",
-        "150": "var(--primitive-pink-150)",
-        "200": "var(--primitive-pink-200)",
-        "250": "var(--primitive-pink-250)",
-        "300": "var(--primitive-pink-300)",
-        "350": "var(--primitive-pink-350)",
-        "400": "var(--primitive-pink-400)",
-        "450": "var(--primitive-pink-450)",
-        "500": "var(--primitive-pink-500)",
-        "550": "var(--primitive-pink-550)",
-        "600": "var(--primitive-pink-600)",
-        "650": "var(--primitive-pink-650)",
-        "700": "var(--primitive-pink-700)",
-        "750": "var(--primitive-pink-750)",
-        "800": "var(--primitive-pink-800)",
-        "820": "var(--primitive-pink-820)",
-        "840": "var(--primitive-pink-840)",
-        "860": "var(--primitive-pink-860)",
-        "880": "var(--primitive-pink-880)",
-        "900": "var(--primitive-pink-900)"
+      rose: {
+        '20': 'var(--primitive-rose-20)',
+        '40': 'var(--primitive-rose-40)',
+        '60': 'var(--primitive-rose-60)',
+        '80': 'var(--primitive-rose-80)',
+        '100': 'var(--primitive-rose-100)',
+        '150': 'var(--primitive-rose-150)',
+        '200': 'var(--primitive-rose-200)',
+        '250': 'var(--primitive-rose-250)',
+        '300': 'var(--primitive-rose-300)',
+        '350': 'var(--primitive-rose-350)',
+        '400': 'var(--primitive-rose-400)',
+        '450': 'var(--primitive-rose-450)',
+        '500': 'var(--primitive-rose-500)',
+        '550': 'var(--primitive-rose-550)',
+        '600': 'var(--primitive-rose-600)',
+        '650': 'var(--primitive-rose-650)',
+        '700': 'var(--primitive-rose-700)',
+        '750': 'var(--primitive-rose-750)',
+        '800': 'var(--primitive-rose-800)',
+        '820': 'var(--primitive-rose-820)',
+        '840': 'var(--primitive-rose-840)',
+        '860': 'var(--primitive-rose-860)',
+        '880': 'var(--primitive-rose-880)',
+        '900': 'var(--primitive-rose-900)',
       },
-      "rose": {
-        "20": "var(--primitive-rose-20)",
-        "40": "var(--primitive-rose-40)",
-        "60": "var(--primitive-rose-60)",
-        "80": "var(--primitive-rose-80)",
-        "100": "var(--primitive-rose-100)",
-        "150": "var(--primitive-rose-150)",
-        "200": "var(--primitive-rose-200)",
-        "250": "var(--primitive-rose-250)",
-        "300": "var(--primitive-rose-300)",
-        "350": "var(--primitive-rose-350)",
-        "400": "var(--primitive-rose-400)",
-        "450": "var(--primitive-rose-450)",
-        "500": "var(--primitive-rose-500)",
-        "550": "var(--primitive-rose-550)",
-        "600": "var(--primitive-rose-600)",
-        "650": "var(--primitive-rose-650)",
-        "700": "var(--primitive-rose-700)",
-        "750": "var(--primitive-rose-750)",
-        "800": "var(--primitive-rose-800)",
-        "820": "var(--primitive-rose-820)",
-        "840": "var(--primitive-rose-840)",
-        "860": "var(--primitive-rose-860)",
-        "880": "var(--primitive-rose-880)",
-        "900": "var(--primitive-rose-900)"
+      engross: {
+        '20': 'var(--primitive-engross-20)',
+        '40': 'var(--primitive-engross-40)',
+        '60': 'var(--primitive-engross-60)',
+        '80': 'var(--primitive-engross-80)',
+        '100': 'var(--primitive-engross-100)',
+        '150': 'var(--primitive-engross-150)',
+        '200': 'var(--primitive-engross-200)',
+        '250': 'var(--primitive-engross-250)',
+        '300': 'var(--primitive-engross-300)',
+        '350': 'var(--primitive-engross-350)',
+        '400': 'var(--primitive-engross-400)',
+        '450': 'var(--primitive-engross-450)',
+        '500': 'var(--primitive-engross-500)',
+        '550': 'var(--primitive-engross-550)',
+        '600': 'var(--primitive-engross-600)',
+        '650': 'var(--primitive-engross-650)',
+        '700': 'var(--primitive-engross-700)',
+        '750': 'var(--primitive-engross-750)',
+        '800': 'var(--primitive-engross-800)',
+        '820': 'var(--primitive-engross-820)',
+        '840': 'var(--primitive-engross-840)',
+        '860': 'var(--primitive-engross-860)',
+        '880': 'var(--primitive-engross-880)',
+        '900': 'var(--primitive-engross-900)',
       },
-      "engross": {
-        "20": "var(--primitive-engross-20)",
-        "40": "var(--primitive-engross-40)",
-        "60": "var(--primitive-engross-60)",
-        "80": "var(--primitive-engross-80)",
-        "100": "var(--primitive-engross-100)",
-        "150": "var(--primitive-engross-150)",
-        "200": "var(--primitive-engross-200)",
-        "250": "var(--primitive-engross-250)",
-        "300": "var(--primitive-engross-300)",
-        "350": "var(--primitive-engross-350)",
-        "400": "var(--primitive-engross-400)",
-        "450": "var(--primitive-engross-450)",
-        "500": "var(--primitive-engross-500)",
-        "550": "var(--primitive-engross-550)",
-        "600": "var(--primitive-engross-600)",
-        "650": "var(--primitive-engross-650)",
-        "700": "var(--primitive-engross-700)",
-        "750": "var(--primitive-engross-750)",
-        "800": "var(--primitive-engross-800)",
-        "820": "var(--primitive-engross-820)",
-        "840": "var(--primitive-engross-840)",
-        "860": "var(--primitive-engross-860)",
-        "880": "var(--primitive-engross-880)",
-        "900": "var(--primitive-engross-900)"
+      emerald: {
+        '20': 'var(--primitive-emerald-20)',
+        '40': 'var(--primitive-emerald-40)',
+        '60': 'var(--primitive-emerald-60)',
+        '80': 'var(--primitive-emerald-80)',
+        '100': 'var(--primitive-emerald-100)',
+        '150': 'var(--primitive-emerald-150)',
+        '200': 'var(--primitive-emerald-200)',
+        '250': 'var(--primitive-emerald-250)',
+        '300': 'var(--primitive-emerald-300)',
+        '350': 'var(--primitive-emerald-350)',
+        '400': 'var(--primitive-emerald-400)',
+        '450': 'var(--primitive-emerald-450)',
+        '500': 'var(--primitive-emerald-500)',
+        '550': 'var(--primitive-emerald-550)',
+        '600': 'var(--primitive-emerald-600)',
+        '650': 'var(--primitive-emerald-650)',
+        '700': 'var(--primitive-emerald-700)',
+        '750': 'var(--primitive-emerald-750)',
+        '800': 'var(--primitive-emerald-800)',
+        '820': 'var(--primitive-emerald-820)',
+        '840': 'var(--primitive-emerald-840)',
+        '860': 'var(--primitive-emerald-860)',
+        '880': 'var(--primitive-emerald-880)',
+        '900': 'var(--primitive-emerald-900)',
       },
-      "emerald": {
-        "20": "var(--primitive-emerald-20)",
-        "40": "var(--primitive-emerald-40)",
-        "60": "var(--primitive-emerald-60)",
-        "80": "var(--primitive-emerald-80)",
-        "100": "var(--primitive-emerald-100)",
-        "150": "var(--primitive-emerald-150)",
-        "200": "var(--primitive-emerald-200)",
-        "250": "var(--primitive-emerald-250)",
-        "300": "var(--primitive-emerald-300)",
-        "350": "var(--primitive-emerald-350)",
-        "400": "var(--primitive-emerald-400)",
-        "450": "var(--primitive-emerald-450)",
-        "500": "var(--primitive-emerald-500)",
-        "550": "var(--primitive-emerald-550)",
-        "600": "var(--primitive-emerald-600)",
-        "650": "var(--primitive-emerald-650)",
-        "700": "var(--primitive-emerald-700)",
-        "750": "var(--primitive-emerald-750)",
-        "800": "var(--primitive-emerald-800)",
-        "820": "var(--primitive-emerald-820)",
-        "840": "var(--primitive-emerald-840)",
-        "860": "var(--primitive-emerald-860)",
-        "880": "var(--primitive-emerald-880)",
-        "900": "var(--primitive-emerald-900)"
+      teal: {
+        '20': 'var(--primitive-teal-20)',
+        '40': 'var(--primitive-teal-40)',
+        '60': 'var(--primitive-teal-60)',
+        '80': 'var(--primitive-teal-80)',
+        '100': 'var(--primitive-teal-100)',
+        '150': 'var(--primitive-teal-150)',
+        '200': 'var(--primitive-teal-200)',
+        '250': 'var(--primitive-teal-250)',
+        '300': 'var(--primitive-teal-300)',
+        '350': 'var(--primitive-teal-350)',
+        '400': 'var(--primitive-teal-400)',
+        '450': 'var(--primitive-teal-450)',
+        '500': 'var(--primitive-teal-500)',
+        '550': 'var(--primitive-teal-550)',
+        '600': 'var(--primitive-teal-600)',
+        '650': 'var(--primitive-teal-650)',
+        '700': 'var(--primitive-teal-700)',
+        '750': 'var(--primitive-teal-750)',
+        '800': 'var(--primitive-teal-800)',
+        '820': 'var(--primitive-teal-820)',
+        '840': 'var(--primitive-teal-840)',
+        '860': 'var(--primitive-teal-860)',
+        '880': 'var(--primitive-teal-880)',
+        '900': 'var(--primitive-teal-900)',
       },
-      "teal": {
-        "20": "var(--primitive-teal-20)",
-        "40": "var(--primitive-teal-40)",
-        "60": "var(--primitive-teal-60)",
-        "80": "var(--primitive-teal-80)",
-        "100": "var(--primitive-teal-100)",
-        "150": "var(--primitive-teal-150)",
-        "200": "var(--primitive-teal-200)",
-        "250": "var(--primitive-teal-250)",
-        "300": "var(--primitive-teal-300)",
-        "350": "var(--primitive-teal-350)",
-        "400": "var(--primitive-teal-400)",
-        "450": "var(--primitive-teal-450)",
-        "500": "var(--primitive-teal-500)",
-        "550": "var(--primitive-teal-550)",
-        "600": "var(--primitive-teal-600)",
-        "650": "var(--primitive-teal-650)",
-        "700": "var(--primitive-teal-700)",
-        "750": "var(--primitive-teal-750)",
-        "800": "var(--primitive-teal-800)",
-        "820": "var(--primitive-teal-820)",
-        "840": "var(--primitive-teal-840)",
-        "860": "var(--primitive-teal-860)",
-        "880": "var(--primitive-teal-880)",
-        "900": "var(--primitive-teal-900)"
+      amber: {
+        '20': 'var(--primitive-amber-20)',
+        '40': 'var(--primitive-amber-40)',
+        '60': 'var(--primitive-amber-60)',
+        '80': 'var(--primitive-amber-80)',
+        '100': 'var(--primitive-amber-100)',
+        '150': 'var(--primitive-amber-150)',
+        '200': 'var(--primitive-amber-200)',
+        '250': 'var(--primitive-amber-250)',
+        '300': 'var(--primitive-amber-300)',
+        '350': 'var(--primitive-amber-350)',
+        '400': 'var(--primitive-amber-400)',
+        '450': 'var(--primitive-amber-450)',
+        '500': 'var(--primitive-amber-500)',
+        '550': 'var(--primitive-amber-550)',
+        '600': 'var(--primitive-amber-600)',
+        '650': 'var(--primitive-amber-650)',
+        '700': 'var(--primitive-amber-700)',
+        '750': 'var(--primitive-amber-750)',
+        '800': 'var(--primitive-amber-800)',
+        '820': 'var(--primitive-amber-820)',
+        '840': 'var(--primitive-amber-840)',
+        '860': 'var(--primitive-amber-860)',
+        '880': 'var(--primitive-amber-880)',
+        '900': 'var(--primitive-amber-900)',
       },
-      "amber": {
-        "20": "var(--primitive-amber-20)",
-        "40": "var(--primitive-amber-40)",
-        "60": "var(--primitive-amber-60)",
-        "80": "var(--primitive-amber-80)",
-        "100": "var(--primitive-amber-100)",
-        "150": "var(--primitive-amber-150)",
-        "200": "var(--primitive-amber-200)",
-        "250": "var(--primitive-amber-250)",
-        "300": "var(--primitive-amber-300)",
-        "350": "var(--primitive-amber-350)",
-        "400": "var(--primitive-amber-400)",
-        "450": "var(--primitive-amber-450)",
-        "500": "var(--primitive-amber-500)",
-        "550": "var(--primitive-amber-550)",
-        "600": "var(--primitive-amber-600)",
-        "650": "var(--primitive-amber-650)",
-        "700": "var(--primitive-amber-700)",
-        "750": "var(--primitive-amber-750)",
-        "800": "var(--primitive-amber-800)",
-        "820": "var(--primitive-amber-820)",
-        "840": "var(--primitive-amber-840)",
-        "860": "var(--primitive-amber-860)",
-        "880": "var(--primitive-amber-880)",
-        "900": "var(--primitive-amber-900)"
+      immerse: {
+        '20': 'var(--primitive-immerse-20)',
+        '40': 'var(--primitive-immerse-40)',
+        '60': 'var(--primitive-immerse-60)',
+        '80': 'var(--primitive-immerse-80)',
+        '100': 'var(--primitive-immerse-100)',
+        '150': 'var(--primitive-immerse-150)',
+        '200': 'var(--primitive-immerse-200)',
+        '250': 'var(--primitive-immerse-250)',
+        '300': 'var(--primitive-immerse-300)',
+        '350': 'var(--primitive-immerse-350)',
+        '400': 'var(--primitive-immerse-400)',
+        '450': 'var(--primitive-immerse-450)',
+        '500': 'var(--primitive-immerse-500)',
+        '550': 'var(--primitive-immerse-550)',
+        '600': 'var(--primitive-immerse-600)',
+        '650': 'var(--primitive-immerse-650)',
+        '700': 'var(--primitive-immerse-700)',
+        '750': 'var(--primitive-immerse-750)',
+        '800': 'var(--primitive-immerse-800)',
+        '820': 'var(--primitive-immerse-820)',
+        '840': 'var(--primitive-immerse-840)',
+        '860': 'var(--primitive-immerse-860)',
+        '880': 'var(--primitive-immerse-880)',
+        '900': 'var(--primitive-immerse-900)',
       },
-      "immerse": {
-        "20": "var(--primitive-immerse-20)",
-        "40": "var(--primitive-immerse-40)",
-        "60": "var(--primitive-immerse-60)",
-        "80": "var(--primitive-immerse-80)",
-        "100": "var(--primitive-immerse-100)",
-        "150": "var(--primitive-immerse-150)",
-        "200": "var(--primitive-immerse-200)",
-        "250": "var(--primitive-immerse-250)",
-        "300": "var(--primitive-immerse-300)",
-        "350": "var(--primitive-immerse-350)",
-        "400": "var(--primitive-immerse-400)",
-        "450": "var(--primitive-immerse-450)",
-        "500": "var(--primitive-immerse-500)",
-        "550": "var(--primitive-immerse-550)",
-        "600": "var(--primitive-immerse-600)",
-        "650": "var(--primitive-immerse-650)",
-        "700": "var(--primitive-immerse-700)",
-        "750": "var(--primitive-immerse-750)",
-        "800": "var(--primitive-immerse-800)",
-        "820": "var(--primitive-immerse-820)",
-        "840": "var(--primitive-immerse-840)",
-        "860": "var(--primitive-immerse-860)",
-        "880": "var(--primitive-immerse-880)",
-        "900": "var(--primitive-immerse-900)"
-      }
-    }
+    },
   },
-  "colorSemantic": {
-    "light": {
-      "semantic": {
-        "accent": {
-          "alpha": {
-            "assistive": "var(--semantic-accent-alpha-assistive)",
-            "subtle": "var(--semantic-accent-alpha-subtle)",
-            "subtler": "var(--semantic-accent-alpha-subtler)",
-            "inverse": {
-              "subtle": "var(--semantic-accent-alpha-inverse-subtle)",
-              "subtler": "var(--semantic-accent-alpha-inverse-subtler)",
-              "subtlest": "var(--semantic-accent-alpha-inverse-subtlest)",
-              "assistive": "var(--semantic-accent-alpha-inverse-assistive)"
-            },
-            "subtlest": "var(--semantic-accent-alpha-subtlest)"
-          },
-          "bold": "var(--semantic-accent-bold)",
-          "normal": "var(--semantic-accent-normal)",
-          "neutral": "var(--semantic-accent-neutral)",
-          "inverse": {
-            "bold": "var(--semantic-accent-inverse-bold)",
-            "normal": "var(--semantic-accent-inverse-normal)",
-            "neutral": "var(--semantic-accent-inverse-neutral)",
-            "alternative": "var(--semantic-accent-inverse-alternative)",
-            "assistive": "var(--semantic-accent-inverse-assistive)",
-            "subtle": "var(--semantic-accent-inverse-subtle)",
-            "bolder": "var(--semantic-accent-inverse-bolder)",
-            "subtler": "var(--semantic-accent-inverse-subtler)",
-            "subtlest": "var(--semantic-accent-inverse-subtlest)"
-          },
-          "alternative": "var(--semantic-accent-alternative)",
-          "assistive": "var(--semantic-accent-assistive)",
-          "subtle": "var(--semantic-accent-subtle)",
-          "subtler": "var(--semantic-accent-subtler)",
-          "bolder": "var(--semantic-accent-bolder)",
-          "subtlest": "var(--semantic-accent-subtlest)"
+  colorSemantic: {
+    light: {
+      semantic: {
+        accent: {
+          alpha: {
+            assistive: 'var(--semantic-accent-alpha-assistive)',
+            subtle: 'var(--semantic-accent-alpha-subtle)',
+            subtler: 'var(--semantic-accent-alpha-subtler)',
+            inverse: {
+              subtle: 'var(--semantic-accent-alpha-inverse-subtle)',
+              subtler: 'var(--semantic-accent-alpha-inverse-subtler)',
+              subtlest: 'var(--semantic-accent-alpha-inverse-subtlest)',
+              assistive: 'var(--semantic-accent-alpha-inverse-assistive)',
+            },
+            subtlest: 'var(--semantic-accent-alpha-subtlest)',
+          },
+          bold: 'var(--semantic-accent-bold)',
+          normal: 'var(--semantic-accent-normal)',
+          neutral: 'var(--semantic-accent-neutral)',
+          inverse: {
+            bold: 'var(--semantic-accent-inverse-bold)',
+            normal: 'var(--semantic-accent-inverse-normal)',
+            neutral: 'var(--semantic-accent-inverse-neutral)',
+            alternative: 'var(--semantic-accent-inverse-alternative)',
+            assistive: 'var(--semantic-accent-inverse-assistive)',
+            subtle: 'var(--semantic-accent-inverse-subtle)',
+            bolder: 'var(--semantic-accent-inverse-bolder)',
+            subtler: 'var(--semantic-accent-inverse-subtler)',
+            subtlest: 'var(--semantic-accent-inverse-subtlest)',
+          },
+          alternative: 'var(--semantic-accent-alternative)',
+          assistive: 'var(--semantic-accent-assistive)',
+          subtle: 'var(--semantic-accent-subtle)',
+          subtler: 'var(--semantic-accent-subtler)',
+          bolder: 'var(--semantic-accent-bolder)',
+          subtlest: 'var(--semantic-accent-subtlest)',
         },
-        "object": {
-          "neutral": "var(--semantic-object-neutral)",
-          "alternative": "var(--semantic-object-alternative)",
-          "assistive": "var(--semantic-object-assistive)",
-          "subtle": "var(--semantic-object-subtle)",
-          "inverse": {
-            "neutral": "var(--semantic-object-inverse-neutral)",
-            "alternative": "var(--semantic-object-inverse-alternative)",
-            "assistive": "var(--semantic-object-inverse-assistive)",
-            "subtle": "var(--semantic-object-inverse-subtle)",
-            "boldest": "var(--semantic-object-inverse-boldest)",
-            "bold": "var(--semantic-object-inverse-bold)",
-            "bolder": "var(--semantic-object-inverse-bolder)",
-            "normal": "var(--semantic-object-inverse-normal)",
-            "subtler": "var(--semantic-object-inverse-subtler)",
-            "subtlest": "var(--semantic-object-inverse-subtlest)"
-          },
-          "boldest": "var(--semantic-object-boldest)",
-          "bold": "var(--semantic-object-bold)",
-          "static": {
-            "boldest": "var(--semantic-object-static-boldest)",
-            "bold": "var(--semantic-object-static-bold)",
-            "neutral": "var(--semantic-object-static-neutral)",
-            "alternative": "var(--semantic-object-static-alternative)",
-            "assistive": "var(--semantic-object-static-assistive)",
-            "subtle": "var(--semantic-object-static-subtle)",
-            "inverse": {
-              "boldest": "var(--semantic-object-static-inverse-boldest)",
-              "bold": "var(--semantic-object-static-inverse-bold)",
-              "neutral": "var(--semantic-object-static-inverse-neutral)",
-              "alternative": "var(--semantic-object-static-inverse-alternative)",
-              "assistive": "var(--semantic-object-static-inverse-assistive)",
-              "subtle": "var(--semantic-object-static-inverse-subtle)",
-              "bolder": "var(--semantic-object-static-inverse-bolder)",
-              "normal": "var(--semantic-object-static-inverse-normal)",
-              "subtler": "var(--semantic-object-static-inverse-subtler)",
-              "subtlest": "var(--semantic-object-static-inverse-subtlest)"
-            },
-            "bolder": "var(--semantic-object-static-bolder)",
-            "normal": "var(--semantic-object-static-normal)",
-            "subtler": "var(--semantic-object-static-subtler)",
-            "subtlest": "var(--semantic-object-static-subtlest)"
-          },
-          "bolder": "var(--semantic-object-bolder)",
-          "normal": "var(--semantic-object-normal)",
-          "subtler": "var(--semantic-object-subtler)",
-          "subtlest": "var(--semantic-object-subtlest)"
+        object: {
+          neutral: 'var(--semantic-object-neutral)',
+          alternative: 'var(--semantic-object-alternative)',
+          assistive: 'var(--semantic-object-assistive)',
+          subtle: 'var(--semantic-object-subtle)',
+          inverse: {
+            neutral: 'var(--semantic-object-inverse-neutral)',
+            alternative: 'var(--semantic-object-inverse-alternative)',
+            assistive: 'var(--semantic-object-inverse-assistive)',
+            subtle: 'var(--semantic-object-inverse-subtle)',
+            boldest: 'var(--semantic-object-inverse-boldest)',
+            bold: 'var(--semantic-object-inverse-bold)',
+            bolder: 'var(--semantic-object-inverse-bolder)',
+            normal: 'var(--semantic-object-inverse-normal)',
+            subtler: 'var(--semantic-object-inverse-subtler)',
+            subtlest: 'var(--semantic-object-inverse-subtlest)',
+          },
+          boldest: 'var(--semantic-object-boldest)',
+          bold: 'var(--semantic-object-bold)',
+          static: {
+            boldest: 'var(--semantic-object-static-boldest)',
+            bold: 'var(--semantic-object-static-bold)',
+            neutral: 'var(--semantic-object-static-neutral)',
+            alternative: 'var(--semantic-object-static-alternative)',
+            assistive: 'var(--semantic-object-static-assistive)',
+            subtle: 'var(--semantic-object-static-subtle)',
+            inverse: {
+              boldest: 'var(--semantic-object-static-inverse-boldest)',
+              bold: 'var(--semantic-object-static-inverse-bold)',
+              neutral: 'var(--semantic-object-static-inverse-neutral)',
+              alternative: 'var(--semantic-object-static-inverse-alternative)',
+              assistive: 'var(--semantic-object-static-inverse-assistive)',
+              subtle: 'var(--semantic-object-static-inverse-subtle)',
+              bolder: 'var(--semantic-object-static-inverse-bolder)',
+              normal: 'var(--semantic-object-static-inverse-normal)',
+              subtler: 'var(--semantic-object-static-inverse-subtler)',
+              subtlest: 'var(--semantic-object-static-inverse-subtlest)',
+            },
+            bolder: 'var(--semantic-object-static-bolder)',
+            normal: 'var(--semantic-object-static-normal)',
+            subtler: 'var(--semantic-object-static-subtler)',
+            subtlest: 'var(--semantic-object-static-subtlest)',
+          },
+          bolder: 'var(--semantic-object-bolder)',
+          normal: 'var(--semantic-object-normal)',
+          subtler: 'var(--semantic-object-subtler)',
+          subtlest: 'var(--semantic-object-subtlest)',
         },
-        "surface": {
-          "standard": "var(--semantic-surface-standard)",
-          "deep": "var(--semantic-surface-deep)",
-          "deeper": "var(--semantic-surface-deeper)",
-          "deepest": "var(--semantic-surface-deepest)",
-          "inverse": {
-            "standard": "var(--semantic-surface-inverse-standard)",
-            "deep": "var(--semantic-surface-inverse-deep)",
-            "deeper": "var(--semantic-surface-inverse-deeper)",
-            "deepest": "var(--semantic-surface-inverse-deepest)",
-            "shallow": "var(--semantic-surface-inverse-shallow)",
-            "shallower": "var(--semantic-surface-inverse-shallower)",
-            "shallowest": "var(--semantic-surface-inverse-shallowest)"
-          },
-          "shallow": "var(--semantic-surface-shallow)",
-          "shallower": "var(--semantic-surface-shallower)",
-          "shallowest": "var(--semantic-surface-shallowest)",
-          "static": {
-            "shallowest": "var(--semantic-surface-static-shallowest)",
-            "shallower": "var(--semantic-surface-static-shallower)",
-            "shallow": "var(--semantic-surface-static-shallow)",
-            "standard": "var(--semantic-surface-static-standard)",
-            "deep": "var(--semantic-surface-static-deep)",
-            "deeper": "var(--semantic-surface-static-deeper)",
-            "deepest": "var(--semantic-surface-static-deepest)",
-            "inverse": {
-              "shallowest": "var(--semantic-surface-static-inverse-shallowest)",
-              "shallower": "var(--semantic-surface-static-inverse-shallower)",
-              "shallow": "var(--semantic-surface-static-inverse-shallow)",
-              "standard": "var(--semantic-surface-static-inverse-standard)",
-              "deep": "var(--semantic-surface-static-inverse-deep)",
-              "deeper": "var(--semantic-surface-static-inverse-deeper)",
-              "deepest": "var(--semantic-surface-static-inverse-deepest)"
-            }
-          }
+        surface: {
+          standard: 'var(--semantic-surface-standard)',
+          deep: 'var(--semantic-surface-deep)',
+          deeper: 'var(--semantic-surface-deeper)',
+          deepest: 'var(--semantic-surface-deepest)',
+          inverse: {
+            standard: 'var(--semantic-surface-inverse-standard)',
+            deep: 'var(--semantic-surface-inverse-deep)',
+            deeper: 'var(--semantic-surface-inverse-deeper)',
+            deepest: 'var(--semantic-surface-inverse-deepest)',
+            shallow: 'var(--semantic-surface-inverse-shallow)',
+            shallower: 'var(--semantic-surface-inverse-shallower)',
+            shallowest: 'var(--semantic-surface-inverse-shallowest)',
+          },
+          shallow: 'var(--semantic-surface-shallow)',
+          shallower: 'var(--semantic-surface-shallower)',
+          shallowest: 'var(--semantic-surface-shallowest)',
+          static: {
+            shallowest: 'var(--semantic-surface-static-shallowest)',
+            shallower: 'var(--semantic-surface-static-shallower)',
+            shallow: 'var(--semantic-surface-static-shallow)',
+            standard: 'var(--semantic-surface-static-standard)',
+            deep: 'var(--semantic-surface-static-deep)',
+            deeper: 'var(--semantic-surface-static-deeper)',
+            deepest: 'var(--semantic-surface-static-deepest)',
+            inverse: {
+              shallowest: 'var(--semantic-surface-static-inverse-shallowest)',
+              shallower: 'var(--semantic-surface-static-inverse-shallower)',
+              shallow: 'var(--semantic-surface-static-inverse-shallow)',
+              standard: 'var(--semantic-surface-static-inverse-standard)',
+              deep: 'var(--semantic-surface-static-inverse-deep)',
+              deeper: 'var(--semantic-surface-static-inverse-deeper)',
+              deepest: 'var(--semantic-surface-static-inverse-deepest)',
+            },
+          },
         },
-        "interaction": {
-          "bold": "var(--semantic-interaction-bold)",
-          "normal": "var(--semantic-interaction-normal)",
-          "inverse": {
-            "focus": "var(--semantic-interaction-inverse-focus)",
-            "bold": "var(--semantic-interaction-inverse-bold)",
-            "normal": "var(--semantic-interaction-inverse-normal)",
-            "assistive": "var(--semantic-interaction-inverse-assistive)",
-            "subtle": "var(--semantic-interaction-inverse-subtle)"
-          },
-          "focus": "var(--semantic-interaction-focus)",
-          "assistive": "var(--semantic-interaction-assistive)",
-          "subtle": "var(--semantic-interaction-subtle)"
+        interaction: {
+          bold: 'var(--semantic-interaction-bold)',
+          normal: 'var(--semantic-interaction-normal)',
+          inverse: {
+            focus: 'var(--semantic-interaction-inverse-focus)',
+            bold: 'var(--semantic-interaction-inverse-bold)',
+            normal: 'var(--semantic-interaction-inverse-normal)',
+            assistive: 'var(--semantic-interaction-inverse-assistive)',
+            subtle: 'var(--semantic-interaction-inverse-subtle)',
+          },
+          focus: 'var(--semantic-interaction-focus)',
+          assistive: 'var(--semantic-interaction-assistive)',
+          subtle: 'var(--semantic-interaction-subtle)',
         },
-        "stroke": {
-          "neutral": "var(--semantic-stroke-neutral)",
-          "alternative": "var(--semantic-stroke-alternative)",
-          "assistive": "var(--semantic-stroke-assistive)",
-          "normal": "var(--semantic-stroke-normal)",
-          "bold": "var(--semantic-stroke-bold)",
-          "alpha": {
-            "bold": "var(--semantic-stroke-alpha-bold)",
-            "normal": "var(--semantic-stroke-alpha-normal)",
-            "neutral": "var(--semantic-stroke-alpha-neutral)",
-            "alternative": "var(--semantic-stroke-alpha-alternative)",
-            "assistive": "var(--semantic-stroke-alpha-assistive)",
-            "subtle": "var(--semantic-stroke-alpha-subtle)",
-            "inverse": {
-              "bold": "var(--semantic-stroke-alpha-inverse-bold)",
-              "normal": "var(--semantic-stroke-alpha-inverse-normal)",
-              "neutral": "var(--semantic-stroke-alpha-inverse-neutral)",
-              "alternative": "var(--semantic-stroke-alpha-inverse-alternative)",
-              "assistive": "var(--semantic-stroke-alpha-inverse-assistive)",
-              "subtle": "var(--semantic-stroke-alpha-inverse-subtle)",
-              "subtler": "var(--semantic-stroke-alpha-inverse-subtler)"
-            },
-            "subtler": "var(--semantic-stroke-alpha-subtler)"
-          },
-          "subtle": "var(--semantic-stroke-subtle)",
-          "inverse": {
-            "bold": "var(--semantic-stroke-inverse-bold)",
-            "normal": "var(--semantic-stroke-inverse-normal)",
-            "neutral": "var(--semantic-stroke-inverse-neutral)",
-            "alternative": "var(--semantic-stroke-inverse-alternative)",
-            "assistive": "var(--semantic-stroke-inverse-assistive)",
-            "subtle": "var(--semantic-stroke-inverse-subtle)",
-            "subtler": "var(--semantic-stroke-inverse-subtler)"
-          },
-          "subtler": "var(--semantic-stroke-subtler)"
+        stroke: {
+          neutral: 'var(--semantic-stroke-neutral)',
+          alternative: 'var(--semantic-stroke-alternative)',
+          assistive: 'var(--semantic-stroke-assistive)',
+          normal: 'var(--semantic-stroke-normal)',
+          bold: 'var(--semantic-stroke-bold)',
+          alpha: {
+            bold: 'var(--semantic-stroke-alpha-bold)',
+            normal: 'var(--semantic-stroke-alpha-normal)',
+            neutral: 'var(--semantic-stroke-alpha-neutral)',
+            alternative: 'var(--semantic-stroke-alpha-alternative)',
+            assistive: 'var(--semantic-stroke-alpha-assistive)',
+            subtle: 'var(--semantic-stroke-alpha-subtle)',
+            inverse: {
+              bold: 'var(--semantic-stroke-alpha-inverse-bold)',
+              normal: 'var(--semantic-stroke-alpha-inverse-normal)',
+              neutral: 'var(--semantic-stroke-alpha-inverse-neutral)',
+              alternative: 'var(--semantic-stroke-alpha-inverse-alternative)',
+              assistive: 'var(--semantic-stroke-alpha-inverse-assistive)',
+              subtle: 'var(--semantic-stroke-alpha-inverse-subtle)',
+              subtler: 'var(--semantic-stroke-alpha-inverse-subtler)',
+            },
+            subtler: 'var(--semantic-stroke-alpha-subtler)',
+          },
+          subtle: 'var(--semantic-stroke-subtle)',
+          inverse: {
+            bold: 'var(--semantic-stroke-inverse-bold)',
+            normal: 'var(--semantic-stroke-inverse-normal)',
+            neutral: 'var(--semantic-stroke-inverse-neutral)',
+            alternative: 'var(--semantic-stroke-inverse-alternative)',
+            assistive: 'var(--semantic-stroke-inverse-assistive)',
+            subtle: 'var(--semantic-stroke-inverse-subtle)',
+            subtler: 'var(--semantic-stroke-inverse-subtler)',
+          },
+          subtler: 'var(--semantic-stroke-subtler)',
         },
-        "fill": {
-          "boldest": "var(--semantic-fill-boldest)",
-          "bold": "var(--semantic-fill-bold)",
-          "neutral": "var(--semantic-fill-neutral)",
-          "alternative": "var(--semantic-fill-alternative)",
-          "assistive": "var(--semantic-fill-assistive)",
-          "inverse": {
-            "boldest": "var(--semantic-fill-inverse-boldest)",
-            "bold": "var(--semantic-fill-inverse-bold)",
-            "neutral": "var(--semantic-fill-inverse-neutral)",
-            "alternative": "var(--semantic-fill-inverse-alternative)",
-            "assistive": "var(--semantic-fill-inverse-assistive)",
-            "subtle": "var(--semantic-fill-inverse-subtle)",
-            "subtler": "var(--semantic-fill-inverse-subtler)",
-            "subtlest": "var(--semantic-fill-inverse-subtlest)",
-            "bolder": "var(--semantic-fill-inverse-bolder)",
-            "normal": "var(--semantic-fill-inverse-normal)"
-          },
-          "subtle": "var(--semantic-fill-subtle)",
-          "subtler": "var(--semantic-fill-subtler)",
-          "subtlest": "var(--semantic-fill-subtlest)",
-          "bolder": "var(--semantic-fill-bolder)",
-          "normal": "var(--semantic-fill-normal)"
+        fill: {
+          boldest: 'var(--semantic-fill-boldest)',
+          bold: 'var(--semantic-fill-bold)',
+          neutral: 'var(--semantic-fill-neutral)',
+          alternative: 'var(--semantic-fill-alternative)',
+          assistive: 'var(--semantic-fill-assistive)',
+          inverse: {
+            boldest: 'var(--semantic-fill-inverse-boldest)',
+            bold: 'var(--semantic-fill-inverse-bold)',
+            neutral: 'var(--semantic-fill-inverse-neutral)',
+            alternative: 'var(--semantic-fill-inverse-alternative)',
+            assistive: 'var(--semantic-fill-inverse-assistive)',
+            subtle: 'var(--semantic-fill-inverse-subtle)',
+            subtler: 'var(--semantic-fill-inverse-subtler)',
+            subtlest: 'var(--semantic-fill-inverse-subtlest)',
+            bolder: 'var(--semantic-fill-inverse-bolder)',
+            normal: 'var(--semantic-fill-inverse-normal)',
+          },
+          subtle: 'var(--semantic-fill-subtle)',
+          subtler: 'var(--semantic-fill-subtler)',
+          subtlest: 'var(--semantic-fill-subtlest)',
+          bolder: 'var(--semantic-fill-bolder)',
+          normal: 'var(--semantic-fill-normal)',
         },
-        "system": {
-          "white": "var(--semantic-system-white)",
-          "black": "var(--semantic-system-black)"
+        system: {
+          white: 'var(--semantic-system-white)',
+          black: 'var(--semantic-system-black)',
         },
-        "theme": {
-          "red": {
-            "bold": "var(--semantic-theme-red-bold)",
-            "normal": "var(--semantic-theme-red-normal)",
-            "neutral": "var(--semantic-theme-red-neutral)",
-            "alternative": "var(--semantic-theme-red-alternative)",
-            "assistive": "var(--semantic-theme-red-assistive)",
-            "subtle": "var(--semantic-theme-red-subtle)",
-            "subtler": "var(--semantic-theme-red-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-red-alpha-assistive)",
-              "subtle": "var(--semantic-theme-red-alpha-subtle)",
-              "subtler": "var(--semantic-theme-red-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-red-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-red-bolder)"
-          },
-          "orange": {
-            "bold": "var(--semantic-theme-orange-bold)",
-            "normal": "var(--semantic-theme-orange-normal)",
-            "neutral": "var(--semantic-theme-orange-neutral)",
-            "alternative": "var(--semantic-theme-orange-alternative)",
-            "assistive": "var(--semantic-theme-orange-assistive)",
-            "subtle": "var(--semantic-theme-orange-subtle)",
-            "subtler": "var(--semantic-theme-orange-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-orange-alpha-assistive)",
-              "subtle": "var(--semantic-theme-orange-alpha-subtle)",
-              "subtler": "var(--semantic-theme-orange-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-orange-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-orange-bolder)"
-          },
-          "amber": {
-            "bold": "var(--semantic-theme-amber-bold)",
-            "normal": "var(--semantic-theme-amber-normal)",
-            "neutral": "var(--semantic-theme-amber-neutral)",
-            "alternative": "var(--semantic-theme-amber-alternative)",
-            "assistive": "var(--semantic-theme-amber-assistive)",
-            "subtle": "var(--semantic-theme-amber-subtle)",
-            "subtler": "var(--semantic-theme-amber-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-amber-alpha-assistive)",
-              "subtle": "var(--semantic-theme-amber-alpha-subtle)",
-              "subtler": "var(--semantic-theme-amber-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-amber-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-amber-bolder)"
-          },
-          "yellow": {
-            "bold": "var(--semantic-theme-yellow-bold)",
-            "normal": "var(--semantic-theme-yellow-normal)",
-            "neutral": "var(--semantic-theme-yellow-neutral)",
-            "alternative": "var(--semantic-theme-yellow-alternative)",
-            "assistive": "var(--semantic-theme-yellow-assistive)",
-            "subtle": "var(--semantic-theme-yellow-subtle)",
-            "subtler": "var(--semantic-theme-yellow-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-yellow-alpha-assistive)",
-              "subtle": "var(--semantic-theme-yellow-alpha-subtle)",
-              "subtler": "var(--semantic-theme-yellow-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-yellow-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-yellow-bolder)"
-          },
-          "lime": {
-            "bold": "var(--semantic-theme-lime-bold)",
-            "normal": "var(--semantic-theme-lime-normal)",
-            "neutral": "var(--semantic-theme-lime-neutral)",
-            "alternative": "var(--semantic-theme-lime-alternative)",
-            "assistive": "var(--semantic-theme-lime-assistive)",
-            "subtle": "var(--semantic-theme-lime-subtle)",
-            "subtler": "var(--semantic-theme-lime-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-lime-alpha-assistive)",
-              "subtle": "var(--semantic-theme-lime-alpha-subtle)",
-              "subtler": "var(--semantic-theme-lime-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-lime-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-lime-bolder)"
-          },
-          "green": {
-            "bold": "var(--semantic-theme-green-bold)",
-            "normal": "var(--semantic-theme-green-normal)",
-            "neutral": "var(--semantic-theme-green-neutral)",
-            "alternative": "var(--semantic-theme-green-alternative)",
-            "assistive": "var(--semantic-theme-green-assistive)",
-            "subtle": "var(--semantic-theme-green-subtle)",
-            "subtler": "var(--semantic-theme-green-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-green-alpha-assistive)",
-              "subtle": "var(--semantic-theme-green-alpha-subtle)",
-              "subtler": "var(--semantic-theme-green-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-green-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-green-bolder)"
-          },
-          "emerald": {
-            "bold": "var(--semantic-theme-emerald-bold)",
-            "normal": "var(--semantic-theme-emerald-normal)",
-            "neutral": "var(--semantic-theme-emerald-neutral)",
-            "alternative": "var(--semantic-theme-emerald-alternative)",
-            "assistive": "var(--semantic-theme-emerald-assistive)",
-            "subtle": "var(--semantic-theme-emerald-subtle)",
-            "subtler": "var(--semantic-theme-emerald-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-emerald-alpha-assistive)",
-              "subtle": "var(--semantic-theme-emerald-alpha-subtle)",
-              "subtler": "var(--semantic-theme-emerald-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-emerald-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-emerald-bolder)"
-          },
-          "teal": {
-            "bold": "var(--semantic-theme-teal-bold)",
-            "normal": "var(--semantic-theme-teal-normal)",
-            "neutral": "var(--semantic-theme-teal-neutral)",
-            "alternative": "var(--semantic-theme-teal-alternative)",
-            "assistive": "var(--semantic-theme-teal-assistive)",
-            "subtle": "var(--semantic-theme-teal-subtle)",
-            "subtler": "var(--semantic-theme-teal-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-teal-alpha-assistive)",
-              "subtle": "var(--semantic-theme-teal-alpha-subtle)",
-              "subtler": "var(--semantic-theme-teal-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-teal-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-teal-bolder)"
-          },
-          "cyan": {
-            "bold": "var(--semantic-theme-cyan-bold)",
-            "normal": "var(--semantic-theme-cyan-normal)",
-            "neutral": "var(--semantic-theme-cyan-neutral)",
-            "alternative": "var(--semantic-theme-cyan-alternative)",
-            "assistive": "var(--semantic-theme-cyan-assistive)",
-            "subtle": "var(--semantic-theme-cyan-subtle)",
-            "subtler": "var(--semantic-theme-cyan-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-cyan-alpha-assistive)",
-              "subtle": "var(--semantic-theme-cyan-alpha-subtle)",
-              "subtler": "var(--semantic-theme-cyan-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-cyan-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-cyan-bolder)"
-          },
-          "sky": {
-            "bold": "var(--semantic-theme-sky-bold)",
-            "normal": "var(--semantic-theme-sky-normal)",
-            "neutral": "var(--semantic-theme-sky-neutral)",
-            "alternative": "var(--semantic-theme-sky-alternative)",
-            "assistive": "var(--semantic-theme-sky-assistive)",
-            "subtle": "var(--semantic-theme-sky-subtle)",
-            "subtler": "var(--semantic-theme-sky-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-sky-alpha-assistive)",
-              "subtle": "var(--semantic-theme-sky-alpha-subtle)",
-              "subtler": "var(--semantic-theme-sky-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-sky-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-sky-bolder)"
-          },
-          "blue": {
-            "bold": "var(--semantic-theme-blue-bold)",
-            "normal": "var(--semantic-theme-blue-normal)",
-            "neutral": "var(--semantic-theme-blue-neutral)",
-            "alternative": "var(--semantic-theme-blue-alternative)",
-            "assistive": "var(--semantic-theme-blue-assistive)",
-            "subtle": "var(--semantic-theme-blue-subtle)",
-            "subtler": "var(--semantic-theme-blue-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-blue-alpha-assistive)",
-              "subtle": "var(--semantic-theme-blue-alpha-subtle)",
-              "subtler": "var(--semantic-theme-blue-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-blue-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-blue-bolder)"
-          },
-          "violet": {
-            "bold": "var(--semantic-theme-violet-bold)",
-            "normal": "var(--semantic-theme-violet-normal)",
-            "neutral": "var(--semantic-theme-violet-neutral)",
-            "alternative": "var(--semantic-theme-violet-alternative)",
-            "assistive": "var(--semantic-theme-violet-assistive)",
-            "subtle": "var(--semantic-theme-violet-subtle)",
-            "subtler": "var(--semantic-theme-violet-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-violet-alpha-assistive)",
-              "subtle": "var(--semantic-theme-violet-alpha-subtle)",
-              "subtler": "var(--semantic-theme-violet-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-violet-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-violet-bolder)"
-          },
-          "purple": {
-            "bold": "var(--semantic-theme-purple-bold)",
-            "normal": "var(--semantic-theme-purple-normal)",
-            "neutral": "var(--semantic-theme-purple-neutral)",
-            "alternative": "var(--semantic-theme-purple-alternative)",
-            "assistive": "var(--semantic-theme-purple-assistive)",
-            "subtle": "var(--semantic-theme-purple-subtle)",
-            "subtler": "var(--semantic-theme-purple-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-purple-alpha-assistive)",
-              "subtle": "var(--semantic-theme-purple-alpha-subtle)",
-              "subtler": "var(--semantic-theme-purple-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-purple-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-purple-bolder)"
-          },
-          "fuchsia": {
-            "bold": "var(--semantic-theme-fuchsia-bold)",
-            "normal": "var(--semantic-theme-fuchsia-normal)",
-            "neutral": "var(--semantic-theme-fuchsia-neutral)",
-            "alternative": "var(--semantic-theme-fuchsia-alternative)",
-            "assistive": "var(--semantic-theme-fuchsia-assistive)",
-            "subtle": "var(--semantic-theme-fuchsia-subtle)",
-            "subtler": "var(--semantic-theme-fuchsia-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-fuchsia-alpha-assistive)",
-              "subtle": "var(--semantic-theme-fuchsia-alpha-subtle)",
-              "subtler": "var(--semantic-theme-fuchsia-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-fuchsia-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-fuchsia-bolder)"
-          },
-          "pink": {
-            "bold": "var(--semantic-theme-pink-bold)",
-            "normal": "var(--semantic-theme-pink-normal)",
-            "neutral": "var(--semantic-theme-pink-neutral)",
-            "alternative": "var(--semantic-theme-pink-alternative)",
-            "assistive": "var(--semantic-theme-pink-assistive)",
-            "subtle": "var(--semantic-theme-pink-subtle)",
-            "subtler": "var(--semantic-theme-pink-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-pink-alpha-assistive)",
-              "subtle": "var(--semantic-theme-pink-alpha-subtle)",
-              "subtler": "var(--semantic-theme-pink-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-pink-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-pink-bolder)"
-          },
-          "rose": {
-            "bold": "var(--semantic-theme-rose-bold)",
-            "normal": "var(--semantic-theme-rose-normal)",
-            "neutral": "var(--semantic-theme-rose-neutral)",
-            "alternative": "var(--semantic-theme-rose-alternative)",
-            "assistive": "var(--semantic-theme-rose-assistive)",
-            "subtle": "var(--semantic-theme-rose-subtle)",
-            "subtler": "var(--semantic-theme-rose-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-rose-alpha-assistive)",
-              "subtle": "var(--semantic-theme-rose-alpha-subtle)",
-              "subtler": "var(--semantic-theme-rose-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-rose-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-rose-bolder)"
-          }
+        theme: {
+          red: {
+            bold: 'var(--semantic-theme-red-bold)',
+            normal: 'var(--semantic-theme-red-normal)',
+            neutral: 'var(--semantic-theme-red-neutral)',
+            alternative: 'var(--semantic-theme-red-alternative)',
+            assistive: 'var(--semantic-theme-red-assistive)',
+            subtle: 'var(--semantic-theme-red-subtle)',
+            subtler: 'var(--semantic-theme-red-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-red-alpha-assistive)',
+              subtle: 'var(--semantic-theme-red-alpha-subtle)',
+              subtler: 'var(--semantic-theme-red-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-red-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-red-bolder)',
+          },
+          orange: {
+            bold: 'var(--semantic-theme-orange-bold)',
+            normal: 'var(--semantic-theme-orange-normal)',
+            neutral: 'var(--semantic-theme-orange-neutral)',
+            alternative: 'var(--semantic-theme-orange-alternative)',
+            assistive: 'var(--semantic-theme-orange-assistive)',
+            subtle: 'var(--semantic-theme-orange-subtle)',
+            subtler: 'var(--semantic-theme-orange-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-orange-alpha-assistive)',
+              subtle: 'var(--semantic-theme-orange-alpha-subtle)',
+              subtler: 'var(--semantic-theme-orange-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-orange-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-orange-bolder)',
+          },
+          amber: {
+            bold: 'var(--semantic-theme-amber-bold)',
+            normal: 'var(--semantic-theme-amber-normal)',
+            neutral: 'var(--semantic-theme-amber-neutral)',
+            alternative: 'var(--semantic-theme-amber-alternative)',
+            assistive: 'var(--semantic-theme-amber-assistive)',
+            subtle: 'var(--semantic-theme-amber-subtle)',
+            subtler: 'var(--semantic-theme-amber-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-amber-alpha-assistive)',
+              subtle: 'var(--semantic-theme-amber-alpha-subtle)',
+              subtler: 'var(--semantic-theme-amber-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-amber-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-amber-bolder)',
+          },
+          yellow: {
+            bold: 'var(--semantic-theme-yellow-bold)',
+            normal: 'var(--semantic-theme-yellow-normal)',
+            neutral: 'var(--semantic-theme-yellow-neutral)',
+            alternative: 'var(--semantic-theme-yellow-alternative)',
+            assistive: 'var(--semantic-theme-yellow-assistive)',
+            subtle: 'var(--semantic-theme-yellow-subtle)',
+            subtler: 'var(--semantic-theme-yellow-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-yellow-alpha-assistive)',
+              subtle: 'var(--semantic-theme-yellow-alpha-subtle)',
+              subtler: 'var(--semantic-theme-yellow-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-yellow-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-yellow-bolder)',
+          },
+          lime: {
+            bold: 'var(--semantic-theme-lime-bold)',
+            normal: 'var(--semantic-theme-lime-normal)',
+            neutral: 'var(--semantic-theme-lime-neutral)',
+            alternative: 'var(--semantic-theme-lime-alternative)',
+            assistive: 'var(--semantic-theme-lime-assistive)',
+            subtle: 'var(--semantic-theme-lime-subtle)',
+            subtler: 'var(--semantic-theme-lime-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-lime-alpha-assistive)',
+              subtle: 'var(--semantic-theme-lime-alpha-subtle)',
+              subtler: 'var(--semantic-theme-lime-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-lime-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-lime-bolder)',
+          },
+          green: {
+            bold: 'var(--semantic-theme-green-bold)',
+            normal: 'var(--semantic-theme-green-normal)',
+            neutral: 'var(--semantic-theme-green-neutral)',
+            alternative: 'var(--semantic-theme-green-alternative)',
+            assistive: 'var(--semantic-theme-green-assistive)',
+            subtle: 'var(--semantic-theme-green-subtle)',
+            subtler: 'var(--semantic-theme-green-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-green-alpha-assistive)',
+              subtle: 'var(--semantic-theme-green-alpha-subtle)',
+              subtler: 'var(--semantic-theme-green-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-green-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-green-bolder)',
+          },
+          emerald: {
+            bold: 'var(--semantic-theme-emerald-bold)',
+            normal: 'var(--semantic-theme-emerald-normal)',
+            neutral: 'var(--semantic-theme-emerald-neutral)',
+            alternative: 'var(--semantic-theme-emerald-alternative)',
+            assistive: 'var(--semantic-theme-emerald-assistive)',
+            subtle: 'var(--semantic-theme-emerald-subtle)',
+            subtler: 'var(--semantic-theme-emerald-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-emerald-alpha-assistive)',
+              subtle: 'var(--semantic-theme-emerald-alpha-subtle)',
+              subtler: 'var(--semantic-theme-emerald-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-emerald-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-emerald-bolder)',
+          },
+          teal: {
+            bold: 'var(--semantic-theme-teal-bold)',
+            normal: 'var(--semantic-theme-teal-normal)',
+            neutral: 'var(--semantic-theme-teal-neutral)',
+            alternative: 'var(--semantic-theme-teal-alternative)',
+            assistive: 'var(--semantic-theme-teal-assistive)',
+            subtle: 'var(--semantic-theme-teal-subtle)',
+            subtler: 'var(--semantic-theme-teal-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-teal-alpha-assistive)',
+              subtle: 'var(--semantic-theme-teal-alpha-subtle)',
+              subtler: 'var(--semantic-theme-teal-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-teal-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-teal-bolder)',
+          },
+          cyan: {
+            bold: 'var(--semantic-theme-cyan-bold)',
+            normal: 'var(--semantic-theme-cyan-normal)',
+            neutral: 'var(--semantic-theme-cyan-neutral)',
+            alternative: 'var(--semantic-theme-cyan-alternative)',
+            assistive: 'var(--semantic-theme-cyan-assistive)',
+            subtle: 'var(--semantic-theme-cyan-subtle)',
+            subtler: 'var(--semantic-theme-cyan-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-cyan-alpha-assistive)',
+              subtle: 'var(--semantic-theme-cyan-alpha-subtle)',
+              subtler: 'var(--semantic-theme-cyan-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-cyan-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-cyan-bolder)',
+          },
+          sky: {
+            bold: 'var(--semantic-theme-sky-bold)',
+            normal: 'var(--semantic-theme-sky-normal)',
+            neutral: 'var(--semantic-theme-sky-neutral)',
+            alternative: 'var(--semantic-theme-sky-alternative)',
+            assistive: 'var(--semantic-theme-sky-assistive)',
+            subtle: 'var(--semantic-theme-sky-subtle)',
+            subtler: 'var(--semantic-theme-sky-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-sky-alpha-assistive)',
+              subtle: 'var(--semantic-theme-sky-alpha-subtle)',
+              subtler: 'var(--semantic-theme-sky-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-sky-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-sky-bolder)',
+          },
+          blue: {
+            bold: 'var(--semantic-theme-blue-bold)',
+            normal: 'var(--semantic-theme-blue-normal)',
+            neutral: 'var(--semantic-theme-blue-neutral)',
+            alternative: 'var(--semantic-theme-blue-alternative)',
+            assistive: 'var(--semantic-theme-blue-assistive)',
+            subtle: 'var(--semantic-theme-blue-subtle)',
+            subtler: 'var(--semantic-theme-blue-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-blue-alpha-assistive)',
+              subtle: 'var(--semantic-theme-blue-alpha-subtle)',
+              subtler: 'var(--semantic-theme-blue-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-blue-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-blue-bolder)',
+          },
+          violet: {
+            bold: 'var(--semantic-theme-violet-bold)',
+            normal: 'var(--semantic-theme-violet-normal)',
+            neutral: 'var(--semantic-theme-violet-neutral)',
+            alternative: 'var(--semantic-theme-violet-alternative)',
+            assistive: 'var(--semantic-theme-violet-assistive)',
+            subtle: 'var(--semantic-theme-violet-subtle)',
+            subtler: 'var(--semantic-theme-violet-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-violet-alpha-assistive)',
+              subtle: 'var(--semantic-theme-violet-alpha-subtle)',
+              subtler: 'var(--semantic-theme-violet-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-violet-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-violet-bolder)',
+          },
+          purple: {
+            bold: 'var(--semantic-theme-purple-bold)',
+            normal: 'var(--semantic-theme-purple-normal)',
+            neutral: 'var(--semantic-theme-purple-neutral)',
+            alternative: 'var(--semantic-theme-purple-alternative)',
+            assistive: 'var(--semantic-theme-purple-assistive)',
+            subtle: 'var(--semantic-theme-purple-subtle)',
+            subtler: 'var(--semantic-theme-purple-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-purple-alpha-assistive)',
+              subtle: 'var(--semantic-theme-purple-alpha-subtle)',
+              subtler: 'var(--semantic-theme-purple-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-purple-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-purple-bolder)',
+          },
+          fuchsia: {
+            bold: 'var(--semantic-theme-fuchsia-bold)',
+            normal: 'var(--semantic-theme-fuchsia-normal)',
+            neutral: 'var(--semantic-theme-fuchsia-neutral)',
+            alternative: 'var(--semantic-theme-fuchsia-alternative)',
+            assistive: 'var(--semantic-theme-fuchsia-assistive)',
+            subtle: 'var(--semantic-theme-fuchsia-subtle)',
+            subtler: 'var(--semantic-theme-fuchsia-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-fuchsia-alpha-assistive)',
+              subtle: 'var(--semantic-theme-fuchsia-alpha-subtle)',
+              subtler: 'var(--semantic-theme-fuchsia-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-fuchsia-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-fuchsia-bolder)',
+          },
+          pink: {
+            bold: 'var(--semantic-theme-pink-bold)',
+            normal: 'var(--semantic-theme-pink-normal)',
+            neutral: 'var(--semantic-theme-pink-neutral)',
+            alternative: 'var(--semantic-theme-pink-alternative)',
+            assistive: 'var(--semantic-theme-pink-assistive)',
+            subtle: 'var(--semantic-theme-pink-subtle)',
+            subtler: 'var(--semantic-theme-pink-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-pink-alpha-assistive)',
+              subtle: 'var(--semantic-theme-pink-alpha-subtle)',
+              subtler: 'var(--semantic-theme-pink-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-pink-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-pink-bolder)',
+          },
+          rose: {
+            bold: 'var(--semantic-theme-rose-bold)',
+            normal: 'var(--semantic-theme-rose-normal)',
+            neutral: 'var(--semantic-theme-rose-neutral)',
+            alternative: 'var(--semantic-theme-rose-alternative)',
+            assistive: 'var(--semantic-theme-rose-assistive)',
+            subtle: 'var(--semantic-theme-rose-subtle)',
+            subtler: 'var(--semantic-theme-rose-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-rose-alpha-assistive)',
+              subtle: 'var(--semantic-theme-rose-alpha-subtle)',
+              subtler: 'var(--semantic-theme-rose-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-rose-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-rose-bolder)',
+          },
         },
-        "curtain": {
-          "bright": "var(--semantic-curtain-bright)",
-          "dim": "var(--semantic-curtain-dim)",
-          "dimmer": "var(--semantic-curtain-dimmer)"
+        curtain: {
+          bright: 'var(--semantic-curtain-bright)',
+          dim: 'var(--semantic-curtain-dim)',
+          dimmer: 'var(--semantic-curtain-dimmer)',
         },
-        "feedback": {
-          "positive": {
-            "alpha": {
-              "subtle": "var(--semantic-feedback-positive-alpha-subtle)",
-              "assistive": "var(--semantic-feedback-positive-alpha-assistive)",
-              "subtler": "var(--semantic-feedback-positive-alpha-subtler)",
-              "inverse": {
-                "assistive": "var(--semantic-feedback-positive-alpha-inverse-assistive)",
-                "subtle": "var(--semantic-feedback-positive-alpha-inverse-subtle)",
-                "subtler": "var(--semantic-feedback-positive-alpha-inverse-subtler)",
-                "subtlest": "var(--semantic-feedback-positive-alpha-inverse-subtlest)"
+        feedback: {
+          positive: {
+            alpha: {
+              subtle: 'var(--semantic-feedback-positive-alpha-subtle)',
+              assistive: 'var(--semantic-feedback-positive-alpha-assistive)',
+              subtler: 'var(--semantic-feedback-positive-alpha-subtler)',
+              inverse: {
+                assistive: 'var(--semantic-feedback-positive-alpha-inverse-assistive)',
+                subtle: 'var(--semantic-feedback-positive-alpha-inverse-subtle)',
+                subtler: 'var(--semantic-feedback-positive-alpha-inverse-subtler)',
+                subtlest: 'var(--semantic-feedback-positive-alpha-inverse-subtlest)',
               },
-              "subtlest": "var(--semantic-feedback-positive-alpha-subtlest)"
-            },
-            "normal": "var(--semantic-feedback-positive-normal)",
-            "bold": "var(--semantic-feedback-positive-bold)",
-            "inverse": {
-              "bold": "var(--semantic-feedback-positive-inverse-bold)",
-              "normal": "var(--semantic-feedback-positive-inverse-normal)",
-              "neutral": "var(--semantic-feedback-positive-inverse-neutral)",
-              "alternative": "var(--semantic-feedback-positive-inverse-alternative)",
-              "assistive": "var(--semantic-feedback-positive-inverse-assistive)",
-              "subtle": "var(--semantic-feedback-positive-inverse-subtle)",
-              "subtler": "var(--semantic-feedback-positive-inverse-subtler)",
-              "bolder": "var(--semantic-feedback-positive-inverse-bolder)"
-            },
-            "assistive": "var(--semantic-feedback-positive-assistive)",
-            "subtler": "var(--semantic-feedback-positive-subtler)",
-            "neutral": "var(--semantic-feedback-positive-neutral)",
-            "alternative": "var(--semantic-feedback-positive-alternative)",
-            "subtle": "var(--semantic-feedback-positive-subtle)",
-            "bolder": "var(--semantic-feedback-positive-bolder)"
-          },
-          "destructive": {
-            "bold": "var(--semantic-feedback-destructive-bold)",
-            "inverse": {
-              "bold": "var(--semantic-feedback-destructive-inverse-bold)",
-              "normal": "var(--semantic-feedback-destructive-inverse-normal)",
-              "neutral": "var(--semantic-feedback-destructive-inverse-neutral)",
-              "alternative": "var(--semantic-feedback-destructive-inverse-alternative)",
-              "assistive": "var(--semantic-feedback-destructive-inverse-assistive)",
-              "subtle": "var(--semantic-feedback-destructive-inverse-subtle)",
-              "subtler": "var(--semantic-feedback-destructive-inverse-subtler)",
-              "bolder": "var(--semantic-feedback-destructive-inverse-bolder)"
-            },
-            "normal": "var(--semantic-feedback-destructive-normal)",
-            "alpha": {
-              "assistive": "var(--semantic-feedback-destructive-alpha-assistive)",
-              "subtle": "var(--semantic-feedback-destructive-alpha-subtle)",
-              "subtler": "var(--semantic-feedback-destructive-alpha-subtler)",
-              "inverse": {
-                "assistive": "var(--semantic-feedback-destructive-alpha-inverse-assistive)",
-                "subtle": "var(--semantic-feedback-destructive-alpha-inverse-subtle)",
-                "subtler": "var(--semantic-feedback-destructive-alpha-inverse-subtler)",
-                "subtlest": "var(--semantic-feedback-destructive-alpha-inverse-subtlest)"
+              subtlest: 'var(--semantic-feedback-positive-alpha-subtlest)',
+            },
+            normal: 'var(--semantic-feedback-positive-normal)',
+            bold: 'var(--semantic-feedback-positive-bold)',
+            inverse: {
+              bold: 'var(--semantic-feedback-positive-inverse-bold)',
+              normal: 'var(--semantic-feedback-positive-inverse-normal)',
+              neutral: 'var(--semantic-feedback-positive-inverse-neutral)',
+              alternative: 'var(--semantic-feedback-positive-inverse-alternative)',
+              assistive: 'var(--semantic-feedback-positive-inverse-assistive)',
+              subtle: 'var(--semantic-feedback-positive-inverse-subtle)',
+              subtler: 'var(--semantic-feedback-positive-inverse-subtler)',
+              bolder: 'var(--semantic-feedback-positive-inverse-bolder)',
+            },
+            assistive: 'var(--semantic-feedback-positive-assistive)',
+            subtler: 'var(--semantic-feedback-positive-subtler)',
+            neutral: 'var(--semantic-feedback-positive-neutral)',
+            alternative: 'var(--semantic-feedback-positive-alternative)',
+            subtle: 'var(--semantic-feedback-positive-subtle)',
+            bolder: 'var(--semantic-feedback-positive-bolder)',
+          },
+          destructive: {
+            bold: 'var(--semantic-feedback-destructive-bold)',
+            inverse: {
+              bold: 'var(--semantic-feedback-destructive-inverse-bold)',
+              normal: 'var(--semantic-feedback-destructive-inverse-normal)',
+              neutral: 'var(--semantic-feedback-destructive-inverse-neutral)',
+              alternative: 'var(--semantic-feedback-destructive-inverse-alternative)',
+              assistive: 'var(--semantic-feedback-destructive-inverse-assistive)',
+              subtle: 'var(--semantic-feedback-destructive-inverse-subtle)',
+              subtler: 'var(--semantic-feedback-destructive-inverse-subtler)',
+              bolder: 'var(--semantic-feedback-destructive-inverse-bolder)',
+            },
+            normal: 'var(--semantic-feedback-destructive-normal)',
+            alpha: {
+              assistive: 'var(--semantic-feedback-destructive-alpha-assistive)',
+              subtle: 'var(--semantic-feedback-destructive-alpha-subtle)',
+              subtler: 'var(--semantic-feedback-destructive-alpha-subtler)',
+              inverse: {
+                assistive: 'var(--semantic-feedback-destructive-alpha-inverse-assistive)',
+                subtle: 'var(--semantic-feedback-destructive-alpha-inverse-subtle)',
+                subtler: 'var(--semantic-feedback-destructive-alpha-inverse-subtler)',
+                subtlest: 'var(--semantic-feedback-destructive-alpha-inverse-subtlest)',
               },
-              "subtlest": "var(--semantic-feedback-destructive-alpha-subtlest)"
-            },
-            "neutral": "var(--semantic-feedback-destructive-neutral)",
-            "alternative": "var(--semantic-feedback-destructive-alternative)",
-            "assistive": "var(--semantic-feedback-destructive-assistive)",
-            "subtle": "var(--semantic-feedback-destructive-subtle)",
-            "subtler": "var(--semantic-feedback-destructive-subtler)",
-            "bolder": "var(--semantic-feedback-destructive-bolder)"
-          },
-          "notifying": {
-            "bold": "var(--semantic-feedback-notifying-bold)",
-            "normal": "var(--semantic-feedback-notifying-normal)",
-            "neutral": "var(--semantic-feedback-notifying-neutral)",
-            "alternative": "var(--semantic-feedback-notifying-alternative)",
-            "assistive": "var(--semantic-feedback-notifying-assistive)",
-            "subtle": "var(--semantic-feedback-notifying-subtle)",
-            "subtler": "var(--semantic-feedback-notifying-subtler)",
-            "inverse": {
-              "bold": "var(--semantic-feedback-notifying-inverse-bold)",
-              "normal": "var(--semantic-feedback-notifying-inverse-normal)",
-              "neutral": "var(--semantic-feedback-notifying-inverse-neutral)",
-              "alternative": "var(--semantic-feedback-notifying-inverse-alternative)",
-              "assistive": "var(--semantic-feedback-notifying-inverse-assistive)",
-              "subtle": "var(--semantic-feedback-notifying-inverse-subtle)",
-              "subtler": "var(--semantic-feedback-notifying-inverse-subtler)",
-              "bolder": "var(--semantic-feedback-notifying-inverse-bolder)"
-            },
-            "alpha": {
-              "assistive": "var(--semantic-feedback-notifying-alpha-assistive)",
-              "subtle": "var(--semantic-feedback-notifying-alpha-subtle)",
-              "subtler": "var(--semantic-feedback-notifying-alpha-subtler)",
-              "inverse": {
-                "assistive": "var(--semantic-feedback-notifying-alpha-inverse-assistive)",
-                "subtle": "var(--semantic-feedback-notifying-alpha-inverse-subtle)",
-                "subtler": "var(--semantic-feedback-notifying-alpha-inverse-subtler)",
-                "subtlest": "var(--semantic-feedback-notifying-alpha-inverse-subtlest)"
+              subtlest: 'var(--semantic-feedback-destructive-alpha-subtlest)',
+            },
+            neutral: 'var(--semantic-feedback-destructive-neutral)',
+            alternative: 'var(--semantic-feedback-destructive-alternative)',
+            assistive: 'var(--semantic-feedback-destructive-assistive)',
+            subtle: 'var(--semantic-feedback-destructive-subtle)',
+            subtler: 'var(--semantic-feedback-destructive-subtler)',
+            bolder: 'var(--semantic-feedback-destructive-bolder)',
+          },
+          notifying: {
+            bold: 'var(--semantic-feedback-notifying-bold)',
+            normal: 'var(--semantic-feedback-notifying-normal)',
+            neutral: 'var(--semantic-feedback-notifying-neutral)',
+            alternative: 'var(--semantic-feedback-notifying-alternative)',
+            assistive: 'var(--semantic-feedback-notifying-assistive)',
+            subtle: 'var(--semantic-feedback-notifying-subtle)',
+            subtler: 'var(--semantic-feedback-notifying-subtler)',
+            inverse: {
+              bold: 'var(--semantic-feedback-notifying-inverse-bold)',
+              normal: 'var(--semantic-feedback-notifying-inverse-normal)',
+              neutral: 'var(--semantic-feedback-notifying-inverse-neutral)',
+              alternative: 'var(--semantic-feedback-notifying-inverse-alternative)',
+              assistive: 'var(--semantic-feedback-notifying-inverse-assistive)',
+              subtle: 'var(--semantic-feedback-notifying-inverse-subtle)',
+              subtler: 'var(--semantic-feedback-notifying-inverse-subtler)',
+              bolder: 'var(--semantic-feedback-notifying-inverse-bolder)',
+            },
+            alpha: {
+              assistive: 'var(--semantic-feedback-notifying-alpha-assistive)',
+              subtle: 'var(--semantic-feedback-notifying-alpha-subtle)',
+              subtler: 'var(--semantic-feedback-notifying-alpha-subtler)',
+              inverse: {
+                assistive: 'var(--semantic-feedback-notifying-alpha-inverse-assistive)',
+                subtle: 'var(--semantic-feedback-notifying-alpha-inverse-subtle)',
+                subtler: 'var(--semantic-feedback-notifying-alpha-inverse-subtler)',
+                subtlest: 'var(--semantic-feedback-notifying-alpha-inverse-subtlest)',
               },
-              "subtlest": "var(--semantic-feedback-notifying-alpha-subtlest)"
+              subtlest: 'var(--semantic-feedback-notifying-alpha-subtlest)',
             },
-            "bolder": "var(--semantic-feedback-notifying-bolder)"
-          }
-        }
-      }
+            bolder: 'var(--semantic-feedback-notifying-bolder)',
+          },
+        },
+      },
     },
-    "dark": {
-      "semantic": {
-        "accent": {
-          "alpha": {
-            "assistive": "var(--semantic-accent-alpha-assistive)",
-            "subtle": "var(--semantic-accent-alpha-subtle)",
-            "subtler": "var(--semantic-accent-alpha-subtler)",
-            "inverse": {
-              "subtle": "var(--semantic-accent-alpha-inverse-subtle)",
-              "subtler": "var(--semantic-accent-alpha-inverse-subtler)",
-              "subtlest": "var(--semantic-accent-alpha-inverse-subtlest)",
-              "assistive": "var(--semantic-accent-alpha-inverse-assistive)"
-            },
-            "subtlest": "var(--semantic-accent-alpha-subtlest)"
-          },
-          "bold": "var(--semantic-accent-bold)",
-          "normal": "var(--semantic-accent-normal)",
-          "neutral": "var(--semantic-accent-neutral)",
-          "inverse": {
-            "bold": "var(--semantic-accent-inverse-bold)",
-            "normal": "var(--semantic-accent-inverse-normal)",
-            "neutral": "var(--semantic-accent-inverse-neutral)",
-            "alternative": "var(--semantic-accent-inverse-alternative)",
-            "assistive": "var(--semantic-accent-inverse-assistive)",
-            "subtle": "var(--semantic-accent-inverse-subtle)",
-            "bolder": "var(--semantic-accent-inverse-bolder)",
-            "subtler": "var(--semantic-accent-inverse-subtler)",
-            "subtlest": "var(--semantic-accent-inverse-subtlest)"
-          },
-          "alternative": "var(--semantic-accent-alternative)",
-          "assistive": "var(--semantic-accent-assistive)",
-          "subtle": "var(--semantic-accent-subtle)",
-          "subtler": "var(--semantic-accent-subtler)",
-          "bolder": "var(--semantic-accent-bolder)",
-          "subtlest": "var(--semantic-accent-subtlest)"
+    dark: {
+      semantic: {
+        accent: {
+          alpha: {
+            assistive: 'var(--semantic-accent-alpha-assistive)',
+            subtle: 'var(--semantic-accent-alpha-subtle)',
+            subtler: 'var(--semantic-accent-alpha-subtler)',
+            inverse: {
+              subtle: 'var(--semantic-accent-alpha-inverse-subtle)',
+              subtler: 'var(--semantic-accent-alpha-inverse-subtler)',
+              subtlest: 'var(--semantic-accent-alpha-inverse-subtlest)',
+              assistive: 'var(--semantic-accent-alpha-inverse-assistive)',
+            },
+            subtlest: 'var(--semantic-accent-alpha-subtlest)',
+          },
+          bold: 'var(--semantic-accent-bold)',
+          normal: 'var(--semantic-accent-normal)',
+          neutral: 'var(--semantic-accent-neutral)',
+          inverse: {
+            bold: 'var(--semantic-accent-inverse-bold)',
+            normal: 'var(--semantic-accent-inverse-normal)',
+            neutral: 'var(--semantic-accent-inverse-neutral)',
+            alternative: 'var(--semantic-accent-inverse-alternative)',
+            assistive: 'var(--semantic-accent-inverse-assistive)',
+            subtle: 'var(--semantic-accent-inverse-subtle)',
+            bolder: 'var(--semantic-accent-inverse-bolder)',
+            subtler: 'var(--semantic-accent-inverse-subtler)',
+            subtlest: 'var(--semantic-accent-inverse-subtlest)',
+          },
+          alternative: 'var(--semantic-accent-alternative)',
+          assistive: 'var(--semantic-accent-assistive)',
+          subtle: 'var(--semantic-accent-subtle)',
+          subtler: 'var(--semantic-accent-subtler)',
+          bolder: 'var(--semantic-accent-bolder)',
+          subtlest: 'var(--semantic-accent-subtlest)',
         },
-        "object": {
-          "neutral": "var(--semantic-object-neutral)",
-          "alternative": "var(--semantic-object-alternative)",
-          "assistive": "var(--semantic-object-assistive)",
-          "subtle": "var(--semantic-object-subtle)",
-          "inverse": {
-            "neutral": "var(--semantic-object-inverse-neutral)",
-            "alternative": "var(--semantic-object-inverse-alternative)",
-            "assistive": "var(--semantic-object-inverse-assistive)",
-            "subtle": "var(--semantic-object-inverse-subtle)",
-            "boldest": "var(--semantic-object-inverse-boldest)",
-            "bold": "var(--semantic-object-inverse-bold)",
-            "bolder": "var(--semantic-object-inverse-bolder)",
-            "normal": "var(--semantic-object-inverse-normal)",
-            "subtler": "var(--semantic-object-inverse-subtler)",
-            "subtlest": "var(--semantic-object-inverse-subtlest)"
-          },
-          "boldest": "var(--semantic-object-boldest)",
-          "bold": "var(--semantic-object-bold)",
-          "static": {
-            "boldest": "var(--semantic-object-static-boldest)",
-            "bold": "var(--semantic-object-static-bold)",
-            "neutral": "var(--semantic-object-static-neutral)",
-            "alternative": "var(--semantic-object-static-alternative)",
-            "assistive": "var(--semantic-object-static-assistive)",
-            "subtle": "var(--semantic-object-static-subtle)",
-            "inverse": {
-              "boldest": "var(--semantic-object-static-inverse-boldest)",
-              "bold": "var(--semantic-object-static-inverse-bold)",
-              "neutral": "var(--semantic-object-static-inverse-neutral)",
-              "alternative": "var(--semantic-object-static-inverse-alternative)",
-              "assistive": "var(--semantic-object-static-inverse-assistive)",
-              "subtle": "var(--semantic-object-static-inverse-subtle)",
-              "bolder": "var(--semantic-object-static-inverse-bolder)",
-              "normal": "var(--semantic-object-static-inverse-normal)",
-              "subtler": "var(--semantic-object-static-inverse-subtler)",
-              "subtlest": "var(--semantic-object-static-inverse-subtlest)"
-            },
-            "bolder": "var(--semantic-object-static-bolder)",
-            "normal": "var(--semantic-object-static-normal)",
-            "subtler": "var(--semantic-object-static-subtler)",
-            "subtlest": "var(--semantic-object-static-subtlest)"
-          },
-          "bolder": "var(--semantic-object-bolder)",
-          "normal": "var(--semantic-object-normal)",
-          "subtler": "var(--semantic-object-subtler)",
-          "subtlest": "var(--semantic-object-subtlest)"
+        object: {
+          neutral: 'var(--semantic-object-neutral)',
+          alternative: 'var(--semantic-object-alternative)',
+          assistive: 'var(--semantic-object-assistive)',
+          subtle: 'var(--semantic-object-subtle)',
+          inverse: {
+            neutral: 'var(--semantic-object-inverse-neutral)',
+            alternative: 'var(--semantic-object-inverse-alternative)',
+            assistive: 'var(--semantic-object-inverse-assistive)',
+            subtle: 'var(--semantic-object-inverse-subtle)',
+            boldest: 'var(--semantic-object-inverse-boldest)',
+            bold: 'var(--semantic-object-inverse-bold)',
+            bolder: 'var(--semantic-object-inverse-bolder)',
+            normal: 'var(--semantic-object-inverse-normal)',
+            subtler: 'var(--semantic-object-inverse-subtler)',
+            subtlest: 'var(--semantic-object-inverse-subtlest)',
+          },
+          boldest: 'var(--semantic-object-boldest)',
+          bold: 'var(--semantic-object-bold)',
+          static: {
+            boldest: 'var(--semantic-object-static-boldest)',
+            bold: 'var(--semantic-object-static-bold)',
+            neutral: 'var(--semantic-object-static-neutral)',
+            alternative: 'var(--semantic-object-static-alternative)',
+            assistive: 'var(--semantic-object-static-assistive)',
+            subtle: 'var(--semantic-object-static-subtle)',
+            inverse: {
+              boldest: 'var(--semantic-object-static-inverse-boldest)',
+              bold: 'var(--semantic-object-static-inverse-bold)',
+              neutral: 'var(--semantic-object-static-inverse-neutral)',
+              alternative: 'var(--semantic-object-static-inverse-alternative)',
+              assistive: 'var(--semantic-object-static-inverse-assistive)',
+              subtle: 'var(--semantic-object-static-inverse-subtle)',
+              bolder: 'var(--semantic-object-static-inverse-bolder)',
+              normal: 'var(--semantic-object-static-inverse-normal)',
+              subtler: 'var(--semantic-object-static-inverse-subtler)',
+              subtlest: 'var(--semantic-object-static-inverse-subtlest)',
+            },
+            bolder: 'var(--semantic-object-static-bolder)',
+            normal: 'var(--semantic-object-static-normal)',
+            subtler: 'var(--semantic-object-static-subtler)',
+            subtlest: 'var(--semantic-object-static-subtlest)',
+          },
+          bolder: 'var(--semantic-object-bolder)',
+          normal: 'var(--semantic-object-normal)',
+          subtler: 'var(--semantic-object-subtler)',
+          subtlest: 'var(--semantic-object-subtlest)',
         },
-        "surface": {
-          "standard": "var(--semantic-surface-standard)",
-          "deep": "var(--semantic-surface-deep)",
-          "deeper": "var(--semantic-surface-deeper)",
-          "deepest": "var(--semantic-surface-deepest)",
-          "inverse": {
-            "standard": "var(--semantic-surface-inverse-standard)",
-            "deep": "var(--semantic-surface-inverse-deep)",
-            "deeper": "var(--semantic-surface-inverse-deeper)",
-            "deepest": "var(--semantic-surface-inverse-deepest)",
-            "shallow": "var(--semantic-surface-inverse-shallow)",
-            "shallower": "var(--semantic-surface-inverse-shallower)",
-            "shallowest": "var(--semantic-surface-inverse-shallowest)"
-          },
-          "shallow": "var(--semantic-surface-shallow)",
-          "shallower": "var(--semantic-surface-shallower)",
-          "shallowest": "var(--semantic-surface-shallowest)",
-          "static": {
-            "shallowest": "var(--semantic-surface-static-shallowest)",
-            "shallower": "var(--semantic-surface-static-shallower)",
-            "shallow": "var(--semantic-surface-static-shallow)",
-            "standard": "var(--semantic-surface-static-standard)",
-            "deep": "var(--semantic-surface-static-deep)",
-            "deeper": "var(--semantic-surface-static-deeper)",
-            "deepest": "var(--semantic-surface-static-deepest)",
-            "inverse": {
-              "shallowest": "var(--semantic-surface-static-inverse-shallowest)",
-              "shallower": "var(--semantic-surface-static-inverse-shallower)",
-              "shallow": "var(--semantic-surface-static-inverse-shallow)",
-              "standard": "var(--semantic-surface-static-inverse-standard)",
-              "deep": "var(--semantic-surface-static-inverse-deep)",
-              "deeper": "var(--semantic-surface-static-inverse-deeper)",
-              "deepest": "var(--semantic-surface-static-inverse-deepest)"
-            }
-          }
+        surface: {
+          standard: 'var(--semantic-surface-standard)',
+          deep: 'var(--semantic-surface-deep)',
+          deeper: 'var(--semantic-surface-deeper)',
+          deepest: 'var(--semantic-surface-deepest)',
+          inverse: {
+            standard: 'var(--semantic-surface-inverse-standard)',
+            deep: 'var(--semantic-surface-inverse-deep)',
+            deeper: 'var(--semantic-surface-inverse-deeper)',
+            deepest: 'var(--semantic-surface-inverse-deepest)',
+            shallow: 'var(--semantic-surface-inverse-shallow)',
+            shallower: 'var(--semantic-surface-inverse-shallower)',
+            shallowest: 'var(--semantic-surface-inverse-shallowest)',
+          },
+          shallow: 'var(--semantic-surface-shallow)',
+          shallower: 'var(--semantic-surface-shallower)',
+          shallowest: 'var(--semantic-surface-shallowest)',
+          static: {
+            shallowest: 'var(--semantic-surface-static-shallowest)',
+            shallower: 'var(--semantic-surface-static-shallower)',
+            shallow: 'var(--semantic-surface-static-shallow)',
+            standard: 'var(--semantic-surface-static-standard)',
+            deep: 'var(--semantic-surface-static-deep)',
+            deeper: 'var(--semantic-surface-static-deeper)',
+            deepest: 'var(--semantic-surface-static-deepest)',
+            inverse: {
+              shallowest: 'var(--semantic-surface-static-inverse-shallowest)',
+              shallower: 'var(--semantic-surface-static-inverse-shallower)',
+              shallow: 'var(--semantic-surface-static-inverse-shallow)',
+              standard: 'var(--semantic-surface-static-inverse-standard)',
+              deep: 'var(--semantic-surface-static-inverse-deep)',
+              deeper: 'var(--semantic-surface-static-inverse-deeper)',
+              deepest: 'var(--semantic-surface-static-inverse-deepest)',
+            },
+          },
         },
-        "interaction": {
-          "bold": "var(--semantic-interaction-bold)",
-          "normal": "var(--semantic-interaction-normal)",
-          "inverse": {
-            "focus": "var(--semantic-interaction-inverse-focus)",
-            "bold": "var(--semantic-interaction-inverse-bold)",
-            "normal": "var(--semantic-interaction-inverse-normal)",
-            "assistive": "var(--semantic-interaction-inverse-assistive)",
-            "subtle": "var(--semantic-interaction-inverse-subtle)"
-          },
-          "focus": "var(--semantic-interaction-focus)",
-          "assistive": "var(--semantic-interaction-assistive)",
-          "subtle": "var(--semantic-interaction-subtle)"
+        interaction: {
+          bold: 'var(--semantic-interaction-bold)',
+          normal: 'var(--semantic-interaction-normal)',
+          inverse: {
+            focus: 'var(--semantic-interaction-inverse-focus)',
+            bold: 'var(--semantic-interaction-inverse-bold)',
+            normal: 'var(--semantic-interaction-inverse-normal)',
+            assistive: 'var(--semantic-interaction-inverse-assistive)',
+            subtle: 'var(--semantic-interaction-inverse-subtle)',
+          },
+          focus: 'var(--semantic-interaction-focus)',
+          assistive: 'var(--semantic-interaction-assistive)',
+          subtle: 'var(--semantic-interaction-subtle)',
         },
-        "stroke": {
-          "neutral": "var(--semantic-stroke-neutral)",
-          "alternative": "var(--semantic-stroke-alternative)",
-          "assistive": "var(--semantic-stroke-assistive)",
-          "normal": "var(--semantic-stroke-normal)",
-          "bold": "var(--semantic-stroke-bold)",
-          "alpha": {
-            "bold": "var(--semantic-stroke-alpha-bold)",
-            "normal": "var(--semantic-stroke-alpha-normal)",
-            "neutral": "var(--semantic-stroke-alpha-neutral)",
-            "alternative": "var(--semantic-stroke-alpha-alternative)",
-            "assistive": "var(--semantic-stroke-alpha-assistive)",
-            "subtle": "var(--semantic-stroke-alpha-subtle)",
-            "inverse": {
-              "bold": "var(--semantic-stroke-alpha-inverse-bold)",
-              "normal": "var(--semantic-stroke-alpha-inverse-normal)",
-              "neutral": "var(--semantic-stroke-alpha-inverse-neutral)",
-              "alternative": "var(--semantic-stroke-alpha-inverse-alternative)",
-              "assistive": "var(--semantic-stroke-alpha-inverse-assistive)",
-              "subtle": "var(--semantic-stroke-alpha-inverse-subtle)",
-              "subtler": "var(--semantic-stroke-alpha-inverse-subtler)"
-            },
-            "subtler": "var(--semantic-stroke-alpha-subtler)"
-          },
-          "subtle": "var(--semantic-stroke-subtle)",
-          "inverse": {
-            "bold": "var(--semantic-stroke-inverse-bold)",
-            "normal": "var(--semantic-stroke-inverse-normal)",
-            "neutral": "var(--semantic-stroke-inverse-neutral)",
-            "alternative": "var(--semantic-stroke-inverse-alternative)",
-            "assistive": "var(--semantic-stroke-inverse-assistive)",
-            "subtle": "var(--semantic-stroke-inverse-subtle)",
-            "subtler": "var(--semantic-stroke-inverse-subtler)"
-          },
-          "subtler": "var(--semantic-stroke-subtler)"
+        stroke: {
+          neutral: 'var(--semantic-stroke-neutral)',
+          alternative: 'var(--semantic-stroke-alternative)',
+          assistive: 'var(--semantic-stroke-assistive)',
+          normal: 'var(--semantic-stroke-normal)',
+          bold: 'var(--semantic-stroke-bold)',
+          alpha: {
+            bold: 'var(--semantic-stroke-alpha-bold)',
+            normal: 'var(--semantic-stroke-alpha-normal)',
+            neutral: 'var(--semantic-stroke-alpha-neutral)',
+            alternative: 'var(--semantic-stroke-alpha-alternative)',
+            assistive: 'var(--semantic-stroke-alpha-assistive)',
+            subtle: 'var(--semantic-stroke-alpha-subtle)',
+            inverse: {
+              bold: 'var(--semantic-stroke-alpha-inverse-bold)',
+              normal: 'var(--semantic-stroke-alpha-inverse-normal)',
+              neutral: 'var(--semantic-stroke-alpha-inverse-neutral)',
+              alternative: 'var(--semantic-stroke-alpha-inverse-alternative)',
+              assistive: 'var(--semantic-stroke-alpha-inverse-assistive)',
+              subtle: 'var(--semantic-stroke-alpha-inverse-subtle)',
+              subtler: 'var(--semantic-stroke-alpha-inverse-subtler)',
+            },
+            subtler: 'var(--semantic-stroke-alpha-subtler)',
+          },
+          subtle: 'var(--semantic-stroke-subtle)',
+          inverse: {
+            bold: 'var(--semantic-stroke-inverse-bold)',
+            normal: 'var(--semantic-stroke-inverse-normal)',
+            neutral: 'var(--semantic-stroke-inverse-neutral)',
+            alternative: 'var(--semantic-stroke-inverse-alternative)',
+            assistive: 'var(--semantic-stroke-inverse-assistive)',
+            subtle: 'var(--semantic-stroke-inverse-subtle)',
+            subtler: 'var(--semantic-stroke-inverse-subtler)',
+          },
+          subtler: 'var(--semantic-stroke-subtler)',
         },
-        "fill": {
-          "boldest": "var(--semantic-fill-boldest)",
-          "bold": "var(--semantic-fill-bold)",
-          "neutral": "var(--semantic-fill-neutral)",
-          "alternative": "var(--semantic-fill-alternative)",
-          "assistive": "var(--semantic-fill-assistive)",
-          "inverse": {
-            "boldest": "var(--semantic-fill-inverse-boldest)",
-            "bold": "var(--semantic-fill-inverse-bold)",
-            "neutral": "var(--semantic-fill-inverse-neutral)",
-            "alternative": "var(--semantic-fill-inverse-alternative)",
-            "assistive": "var(--semantic-fill-inverse-assistive)",
-            "subtle": "var(--semantic-fill-inverse-subtle)",
-            "subtler": "var(--semantic-fill-inverse-subtler)",
-            "subtlest": "var(--semantic-fill-inverse-subtlest)",
-            "bolder": "var(--semantic-fill-inverse-bolder)",
-            "normal": "var(--semantic-fill-inverse-normal)"
-          },
-          "subtle": "var(--semantic-fill-subtle)",
-          "subtler": "var(--semantic-fill-subtler)",
-          "subtlest": "var(--semantic-fill-subtlest)",
-          "bolder": "var(--semantic-fill-bolder)",
-          "normal": "var(--semantic-fill-normal)"
+        fill: {
+          boldest: 'var(--semantic-fill-boldest)',
+          bold: 'var(--semantic-fill-bold)',
+          neutral: 'var(--semantic-fill-neutral)',
+          alternative: 'var(--semantic-fill-alternative)',
+          assistive: 'var(--semantic-fill-assistive)',
+          inverse: {
+            boldest: 'var(--semantic-fill-inverse-boldest)',
+            bold: 'var(--semantic-fill-inverse-bold)',
+            neutral: 'var(--semantic-fill-inverse-neutral)',
+            alternative: 'var(--semantic-fill-inverse-alternative)',
+            assistive: 'var(--semantic-fill-inverse-assistive)',
+            subtle: 'var(--semantic-fill-inverse-subtle)',
+            subtler: 'var(--semantic-fill-inverse-subtler)',
+            subtlest: 'var(--semantic-fill-inverse-subtlest)',
+            bolder: 'var(--semantic-fill-inverse-bolder)',
+            normal: 'var(--semantic-fill-inverse-normal)',
+          },
+          subtle: 'var(--semantic-fill-subtle)',
+          subtler: 'var(--semantic-fill-subtler)',
+          subtlest: 'var(--semantic-fill-subtlest)',
+          bolder: 'var(--semantic-fill-bolder)',
+          normal: 'var(--semantic-fill-normal)',
         },
-        "system": {
-          "white": "var(--semantic-system-white)",
-          "black": "var(--semantic-system-black)"
+        system: {
+          white: 'var(--semantic-system-white)',
+          black: 'var(--semantic-system-black)',
         },
-        "theme": {
-          "red": {
-            "bold": "var(--semantic-theme-red-bold)",
-            "normal": "var(--semantic-theme-red-normal)",
-            "neutral": "var(--semantic-theme-red-neutral)",
-            "alternative": "var(--semantic-theme-red-alternative)",
-            "assistive": "var(--semantic-theme-red-assistive)",
-            "subtle": "var(--semantic-theme-red-subtle)",
-            "subtler": "var(--semantic-theme-red-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-red-alpha-assistive)",
-              "subtle": "var(--semantic-theme-red-alpha-subtle)",
-              "subtler": "var(--semantic-theme-red-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-red-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-red-bolder)"
-          },
-          "orange": {
-            "bold": "var(--semantic-theme-orange-bold)",
-            "normal": "var(--semantic-theme-orange-normal)",
-            "neutral": "var(--semantic-theme-orange-neutral)",
-            "alternative": "var(--semantic-theme-orange-alternative)",
-            "assistive": "var(--semantic-theme-orange-assistive)",
-            "subtle": "var(--semantic-theme-orange-subtle)",
-            "subtler": "var(--semantic-theme-orange-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-orange-alpha-assistive)",
-              "subtle": "var(--semantic-theme-orange-alpha-subtle)",
-              "subtler": "var(--semantic-theme-orange-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-orange-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-orange-bolder)"
-          },
-          "amber": {
-            "bold": "var(--semantic-theme-amber-bold)",
-            "normal": "var(--semantic-theme-amber-normal)",
-            "neutral": "var(--semantic-theme-amber-neutral)",
-            "alternative": "var(--semantic-theme-amber-alternative)",
-            "assistive": "var(--semantic-theme-amber-assistive)",
-            "subtle": "var(--semantic-theme-amber-subtle)",
-            "subtler": "var(--semantic-theme-amber-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-amber-alpha-assistive)",
-              "subtle": "var(--semantic-theme-amber-alpha-subtle)",
-              "subtler": "var(--semantic-theme-amber-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-amber-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-amber-bolder)"
-          },
-          "yellow": {
-            "bold": "var(--semantic-theme-yellow-bold)",
-            "normal": "var(--semantic-theme-yellow-normal)",
-            "neutral": "var(--semantic-theme-yellow-neutral)",
-            "alternative": "var(--semantic-theme-yellow-alternative)",
-            "assistive": "var(--semantic-theme-yellow-assistive)",
-            "subtle": "var(--semantic-theme-yellow-subtle)",
-            "subtler": "var(--semantic-theme-yellow-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-yellow-alpha-assistive)",
-              "subtle": "var(--semantic-theme-yellow-alpha-subtle)",
-              "subtler": "var(--semantic-theme-yellow-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-yellow-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-yellow-bolder)"
-          },
-          "lime": {
-            "bold": "var(--semantic-theme-lime-bold)",
-            "normal": "var(--semantic-theme-lime-normal)",
-            "neutral": "var(--semantic-theme-lime-neutral)",
-            "alternative": "var(--semantic-theme-lime-alternative)",
-            "assistive": "var(--semantic-theme-lime-assistive)",
-            "subtle": "var(--semantic-theme-lime-subtle)",
-            "subtler": "var(--semantic-theme-lime-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-lime-alpha-assistive)",
-              "subtle": "var(--semantic-theme-lime-alpha-subtle)",
-              "subtler": "var(--semantic-theme-lime-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-lime-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-lime-bolder)"
-          },
-          "green": {
-            "bold": "var(--semantic-theme-green-bold)",
-            "normal": "var(--semantic-theme-green-normal)",
-            "neutral": "var(--semantic-theme-green-neutral)",
-            "alternative": "var(--semantic-theme-green-alternative)",
-            "assistive": "var(--semantic-theme-green-assistive)",
-            "subtle": "var(--semantic-theme-green-subtle)",
-            "subtler": "var(--semantic-theme-green-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-green-alpha-assistive)",
-              "subtle": "var(--semantic-theme-green-alpha-subtle)",
-              "subtler": "var(--semantic-theme-green-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-green-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-green-bolder)"
-          },
-          "emerald": {
-            "bold": "var(--semantic-theme-emerald-bold)",
-            "normal": "var(--semantic-theme-emerald-normal)",
-            "neutral": "var(--semantic-theme-emerald-neutral)",
-            "alternative": "var(--semantic-theme-emerald-alternative)",
-            "assistive": "var(--semantic-theme-emerald-assistive)",
-            "subtle": "var(--semantic-theme-emerald-subtle)",
-            "subtler": "var(--semantic-theme-emerald-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-emerald-alpha-assistive)",
-              "subtle": "var(--semantic-theme-emerald-alpha-subtle)",
-              "subtler": "var(--semantic-theme-emerald-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-emerald-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-emerald-bolder)"
-          },
-          "teal": {
-            "bold": "var(--semantic-theme-teal-bold)",
-            "normal": "var(--semantic-theme-teal-normal)",
-            "neutral": "var(--semantic-theme-teal-neutral)",
-            "alternative": "var(--semantic-theme-teal-alternative)",
-            "assistive": "var(--semantic-theme-teal-assistive)",
-            "subtle": "var(--semantic-theme-teal-subtle)",
-            "subtler": "var(--semantic-theme-teal-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-teal-alpha-assistive)",
-              "subtle": "var(--semantic-theme-teal-alpha-subtle)",
-              "subtler": "var(--semantic-theme-teal-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-teal-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-teal-bolder)"
-          },
-          "cyan": {
-            "bold": "var(--semantic-theme-cyan-bold)",
-            "normal": "var(--semantic-theme-cyan-normal)",
-            "neutral": "var(--semantic-theme-cyan-neutral)",
-            "alternative": "var(--semantic-theme-cyan-alternative)",
-            "assistive": "var(--semantic-theme-cyan-assistive)",
-            "subtle": "var(--semantic-theme-cyan-subtle)",
-            "subtler": "var(--semantic-theme-cyan-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-cyan-alpha-assistive)",
-              "subtle": "var(--semantic-theme-cyan-alpha-subtle)",
-              "subtler": "var(--semantic-theme-cyan-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-cyan-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-cyan-bolder)"
-          },
-          "sky": {
-            "bold": "var(--semantic-theme-sky-bold)",
-            "normal": "var(--semantic-theme-sky-normal)",
-            "neutral": "var(--semantic-theme-sky-neutral)",
-            "alternative": "var(--semantic-theme-sky-alternative)",
-            "assistive": "var(--semantic-theme-sky-assistive)",
-            "subtle": "var(--semantic-theme-sky-subtle)",
-            "subtler": "var(--semantic-theme-sky-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-sky-alpha-assistive)",
-              "subtle": "var(--semantic-theme-sky-alpha-subtle)",
-              "subtler": "var(--semantic-theme-sky-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-sky-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-sky-bolder)"
-          },
-          "blue": {
-            "bold": "var(--semantic-theme-blue-bold)",
-            "normal": "var(--semantic-theme-blue-normal)",
-            "neutral": "var(--semantic-theme-blue-neutral)",
-            "alternative": "var(--semantic-theme-blue-alternative)",
-            "assistive": "var(--semantic-theme-blue-assistive)",
-            "subtle": "var(--semantic-theme-blue-subtle)",
-            "subtler": "var(--semantic-theme-blue-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-blue-alpha-assistive)",
-              "subtle": "var(--semantic-theme-blue-alpha-subtle)",
-              "subtler": "var(--semantic-theme-blue-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-blue-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-blue-bolder)"
-          },
-          "violet": {
-            "bold": "var(--semantic-theme-violet-bold)",
-            "normal": "var(--semantic-theme-violet-normal)",
-            "neutral": "var(--semantic-theme-violet-neutral)",
-            "alternative": "var(--semantic-theme-violet-alternative)",
-            "assistive": "var(--semantic-theme-violet-assistive)",
-            "subtle": "var(--semantic-theme-violet-subtle)",
-            "subtler": "var(--semantic-theme-violet-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-violet-alpha-assistive)",
-              "subtle": "var(--semantic-theme-violet-alpha-subtle)",
-              "subtler": "var(--semantic-theme-violet-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-violet-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-violet-bolder)"
-          },
-          "purple": {
-            "bold": "var(--semantic-theme-purple-bold)",
-            "normal": "var(--semantic-theme-purple-normal)",
-            "neutral": "var(--semantic-theme-purple-neutral)",
-            "alternative": "var(--semantic-theme-purple-alternative)",
-            "assistive": "var(--semantic-theme-purple-assistive)",
-            "subtle": "var(--semantic-theme-purple-subtle)",
-            "subtler": "var(--semantic-theme-purple-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-purple-alpha-assistive)",
-              "subtle": "var(--semantic-theme-purple-alpha-subtle)",
-              "subtler": "var(--semantic-theme-purple-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-purple-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-purple-bolder)"
-          },
-          "fuchsia": {
-            "bold": "var(--semantic-theme-fuchsia-bold)",
-            "normal": "var(--semantic-theme-fuchsia-normal)",
-            "neutral": "var(--semantic-theme-fuchsia-neutral)",
-            "alternative": "var(--semantic-theme-fuchsia-alternative)",
-            "assistive": "var(--semantic-theme-fuchsia-assistive)",
-            "subtle": "var(--semantic-theme-fuchsia-subtle)",
-            "subtler": "var(--semantic-theme-fuchsia-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-fuchsia-alpha-assistive)",
-              "subtle": "var(--semantic-theme-fuchsia-alpha-subtle)",
-              "subtler": "var(--semantic-theme-fuchsia-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-fuchsia-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-fuchsia-bolder)"
-          },
-          "pink": {
-            "bold": "var(--semantic-theme-pink-bold)",
-            "normal": "var(--semantic-theme-pink-normal)",
-            "neutral": "var(--semantic-theme-pink-neutral)",
-            "alternative": "var(--semantic-theme-pink-alternative)",
-            "assistive": "var(--semantic-theme-pink-assistive)",
-            "subtle": "var(--semantic-theme-pink-subtle)",
-            "subtler": "var(--semantic-theme-pink-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-pink-alpha-assistive)",
-              "subtle": "var(--semantic-theme-pink-alpha-subtle)",
-              "subtler": "var(--semantic-theme-pink-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-pink-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-pink-bolder)"
-          },
-          "rose": {
-            "bold": "var(--semantic-theme-rose-bold)",
-            "normal": "var(--semantic-theme-rose-normal)",
-            "neutral": "var(--semantic-theme-rose-neutral)",
-            "alternative": "var(--semantic-theme-rose-alternative)",
-            "assistive": "var(--semantic-theme-rose-assistive)",
-            "subtle": "var(--semantic-theme-rose-subtle)",
-            "subtler": "var(--semantic-theme-rose-subtler)",
-            "alpha": {
-              "assistive": "var(--semantic-theme-rose-alpha-assistive)",
-              "subtle": "var(--semantic-theme-rose-alpha-subtle)",
-              "subtler": "var(--semantic-theme-rose-alpha-subtler)",
-              "subtlest": "var(--semantic-theme-rose-alpha-subtlest)"
-            },
-            "bolder": "var(--semantic-theme-rose-bolder)"
-          }
+        theme: {
+          red: {
+            bold: 'var(--semantic-theme-red-bold)',
+            normal: 'var(--semantic-theme-red-normal)',
+            neutral: 'var(--semantic-theme-red-neutral)',
+            alternative: 'var(--semantic-theme-red-alternative)',
+            assistive: 'var(--semantic-theme-red-assistive)',
+            subtle: 'var(--semantic-theme-red-subtle)',
+            subtler: 'var(--semantic-theme-red-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-red-alpha-assistive)',
+              subtle: 'var(--semantic-theme-red-alpha-subtle)',
+              subtler: 'var(--semantic-theme-red-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-red-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-red-bolder)',
+          },
+          orange: {
+            bold: 'var(--semantic-theme-orange-bold)',
+            normal: 'var(--semantic-theme-orange-normal)',
+            neutral: 'var(--semantic-theme-orange-neutral)',
+            alternative: 'var(--semantic-theme-orange-alternative)',
+            assistive: 'var(--semantic-theme-orange-assistive)',
+            subtle: 'var(--semantic-theme-orange-subtle)',
+            subtler: 'var(--semantic-theme-orange-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-orange-alpha-assistive)',
+              subtle: 'var(--semantic-theme-orange-alpha-subtle)',
+              subtler: 'var(--semantic-theme-orange-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-orange-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-orange-bolder)',
+          },
+          amber: {
+            bold: 'var(--semantic-theme-amber-bold)',
+            normal: 'var(--semantic-theme-amber-normal)',
+            neutral: 'var(--semantic-theme-amber-neutral)',
+            alternative: 'var(--semantic-theme-amber-alternative)',
+            assistive: 'var(--semantic-theme-amber-assistive)',
+            subtle: 'var(--semantic-theme-amber-subtle)',
+            subtler: 'var(--semantic-theme-amber-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-amber-alpha-assistive)',
+              subtle: 'var(--semantic-theme-amber-alpha-subtle)',
+              subtler: 'var(--semantic-theme-amber-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-amber-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-amber-bolder)',
+          },
+          yellow: {
+            bold: 'var(--semantic-theme-yellow-bold)',
+            normal: 'var(--semantic-theme-yellow-normal)',
+            neutral: 'var(--semantic-theme-yellow-neutral)',
+            alternative: 'var(--semantic-theme-yellow-alternative)',
+            assistive: 'var(--semantic-theme-yellow-assistive)',
+            subtle: 'var(--semantic-theme-yellow-subtle)',
+            subtler: 'var(--semantic-theme-yellow-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-yellow-alpha-assistive)',
+              subtle: 'var(--semantic-theme-yellow-alpha-subtle)',
+              subtler: 'var(--semantic-theme-yellow-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-yellow-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-yellow-bolder)',
+          },
+          lime: {
+            bold: 'var(--semantic-theme-lime-bold)',
+            normal: 'var(--semantic-theme-lime-normal)',
+            neutral: 'var(--semantic-theme-lime-neutral)',
+            alternative: 'var(--semantic-theme-lime-alternative)',
+            assistive: 'var(--semantic-theme-lime-assistive)',
+            subtle: 'var(--semantic-theme-lime-subtle)',
+            subtler: 'var(--semantic-theme-lime-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-lime-alpha-assistive)',
+              subtle: 'var(--semantic-theme-lime-alpha-subtle)',
+              subtler: 'var(--semantic-theme-lime-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-lime-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-lime-bolder)',
+          },
+          green: {
+            bold: 'var(--semantic-theme-green-bold)',
+            normal: 'var(--semantic-theme-green-normal)',
+            neutral: 'var(--semantic-theme-green-neutral)',
+            alternative: 'var(--semantic-theme-green-alternative)',
+            assistive: 'var(--semantic-theme-green-assistive)',
+            subtle: 'var(--semantic-theme-green-subtle)',
+            subtler: 'var(--semantic-theme-green-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-green-alpha-assistive)',
+              subtle: 'var(--semantic-theme-green-alpha-subtle)',
+              subtler: 'var(--semantic-theme-green-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-green-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-green-bolder)',
+          },
+          emerald: {
+            bold: 'var(--semantic-theme-emerald-bold)',
+            normal: 'var(--semantic-theme-emerald-normal)',
+            neutral: 'var(--semantic-theme-emerald-neutral)',
+            alternative: 'var(--semantic-theme-emerald-alternative)',
+            assistive: 'var(--semantic-theme-emerald-assistive)',
+            subtle: 'var(--semantic-theme-emerald-subtle)',
+            subtler: 'var(--semantic-theme-emerald-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-emerald-alpha-assistive)',
+              subtle: 'var(--semantic-theme-emerald-alpha-subtle)',
+              subtler: 'var(--semantic-theme-emerald-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-emerald-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-emerald-bolder)',
+          },
+          teal: {
+            bold: 'var(--semantic-theme-teal-bold)',
+            normal: 'var(--semantic-theme-teal-normal)',
+            neutral: 'var(--semantic-theme-teal-neutral)',
+            alternative: 'var(--semantic-theme-teal-alternative)',
+            assistive: 'var(--semantic-theme-teal-assistive)',
+            subtle: 'var(--semantic-theme-teal-subtle)',
+            subtler: 'var(--semantic-theme-teal-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-teal-alpha-assistive)',
+              subtle: 'var(--semantic-theme-teal-alpha-subtle)',
+              subtler: 'var(--semantic-theme-teal-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-teal-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-teal-bolder)',
+          },
+          cyan: {
+            bold: 'var(--semantic-theme-cyan-bold)',
+            normal: 'var(--semantic-theme-cyan-normal)',
+            neutral: 'var(--semantic-theme-cyan-neutral)',
+            alternative: 'var(--semantic-theme-cyan-alternative)',
+            assistive: 'var(--semantic-theme-cyan-assistive)',
+            subtle: 'var(--semantic-theme-cyan-subtle)',
+            subtler: 'var(--semantic-theme-cyan-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-cyan-alpha-assistive)',
+              subtle: 'var(--semantic-theme-cyan-alpha-subtle)',
+              subtler: 'var(--semantic-theme-cyan-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-cyan-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-cyan-bolder)',
+          },
+          sky: {
+            bold: 'var(--semantic-theme-sky-bold)',
+            normal: 'var(--semantic-theme-sky-normal)',
+            neutral: 'var(--semantic-theme-sky-neutral)',
+            alternative: 'var(--semantic-theme-sky-alternative)',
+            assistive: 'var(--semantic-theme-sky-assistive)',
+            subtle: 'var(--semantic-theme-sky-subtle)',
+            subtler: 'var(--semantic-theme-sky-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-sky-alpha-assistive)',
+              subtle: 'var(--semantic-theme-sky-alpha-subtle)',
+              subtler: 'var(--semantic-theme-sky-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-sky-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-sky-bolder)',
+          },
+          blue: {
+            bold: 'var(--semantic-theme-blue-bold)',
+            normal: 'var(--semantic-theme-blue-normal)',
+            neutral: 'var(--semantic-theme-blue-neutral)',
+            alternative: 'var(--semantic-theme-blue-alternative)',
+            assistive: 'var(--semantic-theme-blue-assistive)',
+            subtle: 'var(--semantic-theme-blue-subtle)',
+            subtler: 'var(--semantic-theme-blue-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-blue-alpha-assistive)',
+              subtle: 'var(--semantic-theme-blue-alpha-subtle)',
+              subtler: 'var(--semantic-theme-blue-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-blue-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-blue-bolder)',
+          },
+          violet: {
+            bold: 'var(--semantic-theme-violet-bold)',
+            normal: 'var(--semantic-theme-violet-normal)',
+            neutral: 'var(--semantic-theme-violet-neutral)',
+            alternative: 'var(--semantic-theme-violet-alternative)',
+            assistive: 'var(--semantic-theme-violet-assistive)',
+            subtle: 'var(--semantic-theme-violet-subtle)',
+            subtler: 'var(--semantic-theme-violet-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-violet-alpha-assistive)',
+              subtle: 'var(--semantic-theme-violet-alpha-subtle)',
+              subtler: 'var(--semantic-theme-violet-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-violet-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-violet-bolder)',
+          },
+          purple: {
+            bold: 'var(--semantic-theme-purple-bold)',
+            normal: 'var(--semantic-theme-purple-normal)',
+            neutral: 'var(--semantic-theme-purple-neutral)',
+            alternative: 'var(--semantic-theme-purple-alternative)',
+            assistive: 'var(--semantic-theme-purple-assistive)',
+            subtle: 'var(--semantic-theme-purple-subtle)',
+            subtler: 'var(--semantic-theme-purple-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-purple-alpha-assistive)',
+              subtle: 'var(--semantic-theme-purple-alpha-subtle)',
+              subtler: 'var(--semantic-theme-purple-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-purple-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-purple-bolder)',
+          },
+          fuchsia: {
+            bold: 'var(--semantic-theme-fuchsia-bold)',
+            normal: 'var(--semantic-theme-fuchsia-normal)',
+            neutral: 'var(--semantic-theme-fuchsia-neutral)',
+            alternative: 'var(--semantic-theme-fuchsia-alternative)',
+            assistive: 'var(--semantic-theme-fuchsia-assistive)',
+            subtle: 'var(--semantic-theme-fuchsia-subtle)',
+            subtler: 'var(--semantic-theme-fuchsia-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-fuchsia-alpha-assistive)',
+              subtle: 'var(--semantic-theme-fuchsia-alpha-subtle)',
+              subtler: 'var(--semantic-theme-fuchsia-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-fuchsia-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-fuchsia-bolder)',
+          },
+          pink: {
+            bold: 'var(--semantic-theme-pink-bold)',
+            normal: 'var(--semantic-theme-pink-normal)',
+            neutral: 'var(--semantic-theme-pink-neutral)',
+            alternative: 'var(--semantic-theme-pink-alternative)',
+            assistive: 'var(--semantic-theme-pink-assistive)',
+            subtle: 'var(--semantic-theme-pink-subtle)',
+            subtler: 'var(--semantic-theme-pink-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-pink-alpha-assistive)',
+              subtle: 'var(--semantic-theme-pink-alpha-subtle)',
+              subtler: 'var(--semantic-theme-pink-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-pink-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-pink-bolder)',
+          },
+          rose: {
+            bold: 'var(--semantic-theme-rose-bold)',
+            normal: 'var(--semantic-theme-rose-normal)',
+            neutral: 'var(--semantic-theme-rose-neutral)',
+            alternative: 'var(--semantic-theme-rose-alternative)',
+            assistive: 'var(--semantic-theme-rose-assistive)',
+            subtle: 'var(--semantic-theme-rose-subtle)',
+            subtler: 'var(--semantic-theme-rose-subtler)',
+            alpha: {
+              assistive: 'var(--semantic-theme-rose-alpha-assistive)',
+              subtle: 'var(--semantic-theme-rose-alpha-subtle)',
+              subtler: 'var(--semantic-theme-rose-alpha-subtler)',
+              subtlest: 'var(--semantic-theme-rose-alpha-subtlest)',
+            },
+            bolder: 'var(--semantic-theme-rose-bolder)',
+          },
         },
-        "curtain": {
-          "bright": "var(--semantic-curtain-bright)",
-          "dim": "var(--semantic-curtain-dim)",
-          "dimmer": "var(--semantic-curtain-dimmer)"
+        curtain: {
+          bright: 'var(--semantic-curtain-bright)',
+          dim: 'var(--semantic-curtain-dim)',
+          dimmer: 'var(--semantic-curtain-dimmer)',
         },
-        "feedback": {
-          "positive": {
-            "alpha": {
-              "subtle": "var(--semantic-feedback-positive-alpha-subtle)",
-              "assistive": "var(--semantic-feedback-positive-alpha-assistive)",
-              "subtler": "var(--semantic-feedback-positive-alpha-subtler)",
-              "inverse": {
-                "assistive": "var(--semantic-feedback-positive-alpha-inverse-assistive)",
-                "subtle": "var(--semantic-feedback-positive-alpha-inverse-subtle)",
-                "subtler": "var(--semantic-feedback-positive-alpha-inverse-subtler)",
-                "subtlest": "var(--semantic-feedback-positive-alpha-inverse-subtlest)"
+        feedback: {
+          positive: {
+            alpha: {
+              subtle: 'var(--semantic-feedback-positive-alpha-subtle)',
+              assistive: 'var(--semantic-feedback-positive-alpha-assistive)',
+              subtler: 'var(--semantic-feedback-positive-alpha-subtler)',
+              inverse: {
+                assistive: 'var(--semantic-feedback-positive-alpha-inverse-assistive)',
+                subtle: 'var(--semantic-feedback-positive-alpha-inverse-subtle)',
+                subtler: 'var(--semantic-feedback-positive-alpha-inverse-subtler)',
+                subtlest: 'var(--semantic-feedback-positive-alpha-inverse-subtlest)',
               },
-              "subtlest": "var(--semantic-feedback-positive-alpha-subtlest)"
-            },
-            "normal": "var(--semantic-feedback-positive-normal)",
-            "bold": "var(--semantic-feedback-positive-bold)",
-            "inverse": {
-              "bold": "var(--semantic-feedback-positive-inverse-bold)",
-              "normal": "var(--semantic-feedback-positive-inverse-normal)",
-              "neutral": "var(--semantic-feedback-positive-inverse-neutral)",
-              "alternative": "var(--semantic-feedback-positive-inverse-alternative)",
-              "assistive": "var(--semantic-feedback-positive-inverse-assistive)",
-              "subtle": "var(--semantic-feedback-positive-inverse-subtle)",
-              "subtler": "var(--semantic-feedback-positive-inverse-subtler)",
-              "bolder": "var(--semantic-feedback-positive-inverse-bolder)"
-            },
-            "assistive": "var(--semantic-feedback-positive-assistive)",
-            "subtler": "var(--semantic-feedback-positive-subtler)",
-            "neutral": "var(--semantic-feedback-positive-neutral)",
-            "alternative": "var(--semantic-feedback-positive-alternative)",
-            "subtle": "var(--semantic-feedback-positive-subtle)",
-            "bolder": "var(--semantic-feedback-positive-bolder)"
-          },
-          "destructive": {
-            "bold": "var(--semantic-feedback-destructive-bold)",
-            "inverse": {
-              "bold": "var(--semantic-feedback-destructive-inverse-bold)",
-              "normal": "var(--semantic-feedback-destructive-inverse-normal)",
-              "neutral": "var(--semantic-feedback-destructive-inverse-neutral)",
-              "alternative": "var(--semantic-feedback-destructive-inverse-alternative)",
-              "assistive": "var(--semantic-feedback-destructive-inverse-assistive)",
-              "subtle": "var(--semantic-feedback-destructive-inverse-subtle)",
-              "subtler": "var(--semantic-feedback-destructive-inverse-subtler)",
-              "bolder": "var(--semantic-feedback-destructive-inverse-bolder)"
-            },
-            "normal": "var(--semantic-feedback-destructive-normal)",
-            "alpha": {
-              "assistive": "var(--semantic-feedback-destructive-alpha-assistive)",
-              "subtle": "var(--semantic-feedback-destructive-alpha-subtle)",
-              "subtler": "var(--semantic-feedback-destructive-alpha-subtler)",
-              "inverse": {
-                "assistive": "var(--semantic-feedback-destructive-alpha-inverse-assistive)",
-                "subtle": "var(--semantic-feedback-destructive-alpha-inverse-subtle)",
-                "subtler": "var(--semantic-feedback-destructive-alpha-inverse-subtler)",
-                "subtlest": "var(--semantic-feedback-destructive-alpha-inverse-subtlest)"
+              subtlest: 'var(--semantic-feedback-positive-alpha-subtlest)',
+            },
+            normal: 'var(--semantic-feedback-positive-normal)',
+            bold: 'var(--semantic-feedback-positive-bold)',
+            inverse: {
+              bold: 'var(--semantic-feedback-positive-inverse-bold)',
+              normal: 'var(--semantic-feedback-positive-inverse-normal)',
+              neutral: 'var(--semantic-feedback-positive-inverse-neutral)',
+              alternative: 'var(--semantic-feedback-positive-inverse-alternative)',
+              assistive: 'var(--semantic-feedback-positive-inverse-assistive)',
+              subtle: 'var(--semantic-feedback-positive-inverse-subtle)',
+              subtler: 'var(--semantic-feedback-positive-inverse-subtler)',
+              bolder: 'var(--semantic-feedback-positive-inverse-bolder)',
+            },
+            assistive: 'var(--semantic-feedback-positive-assistive)',
+            subtler: 'var(--semantic-feedback-positive-subtler)',
+            neutral: 'var(--semantic-feedback-positive-neutral)',
+            alternative: 'var(--semantic-feedback-positive-alternative)',
+            subtle: 'var(--semantic-feedback-positive-subtle)',
+            bolder: 'var(--semantic-feedback-positive-bolder)',
+          },
+          destructive: {
+            bold: 'var(--semantic-feedback-destructive-bold)',
+            inverse: {
+              bold: 'var(--semantic-feedback-destructive-inverse-bold)',
+              normal: 'var(--semantic-feedback-destructive-inverse-normal)',
+              neutral: 'var(--semantic-feedback-destructive-inverse-neutral)',
+              alternative: 'var(--semantic-feedback-destructive-inverse-alternative)',
+              assistive: 'var(--semantic-feedback-destructive-inverse-assistive)',
+              subtle: 'var(--semantic-feedback-destructive-inverse-subtle)',
+              subtler: 'var(--semantic-feedback-destructive-inverse-subtler)',
+              bolder: 'var(--semantic-feedback-destructive-inverse-bolder)',
+            },
+            normal: 'var(--semantic-feedback-destructive-normal)',
+            alpha: {
+              assistive: 'var(--semantic-feedback-destructive-alpha-assistive)',
+              subtle: 'var(--semantic-feedback-destructive-alpha-subtle)',
+              subtler: 'var(--semantic-feedback-destructive-alpha-subtler)',
+              inverse: {
+                assistive: 'var(--semantic-feedback-destructive-alpha-inverse-assistive)',
+                subtle: 'var(--semantic-feedback-destructive-alpha-inverse-subtle)',
+                subtler: 'var(--semantic-feedback-destructive-alpha-inverse-subtler)',
+                subtlest: 'var(--semantic-feedback-destructive-alpha-inverse-subtlest)',
               },
-              "subtlest": "var(--semantic-feedback-destructive-alpha-subtlest)"
-            },
-            "neutral": "var(--semantic-feedback-destructive-neutral)",
-            "alternative": "var(--semantic-feedback-destructive-alternative)",
-            "assistive": "var(--semantic-feedback-destructive-assistive)",
-            "subtle": "var(--semantic-feedback-destructive-subtle)",
-            "subtler": "var(--semantic-feedback-destructive-subtler)",
-            "bolder": "var(--semantic-feedback-destructive-bolder)"
-          },
-          "notifying": {
-            "bold": "var(--semantic-feedback-notifying-bold)",
-            "normal": "var(--semantic-feedback-notifying-normal)",
-            "neutral": "var(--semantic-feedback-notifying-neutral)",
-            "alternative": "var(--semantic-feedback-notifying-alternative)",
-            "assistive": "var(--semantic-feedback-notifying-assistive)",
-            "subtle": "var(--semantic-feedback-notifying-subtle)",
-            "subtler": "var(--semantic-feedback-notifying-subtler)",
-            "inverse": {
-              "bold": "var(--semantic-feedback-notifying-inverse-bold)",
-              "normal": "var(--semantic-feedback-notifying-inverse-normal)",
-              "neutral": "var(--semantic-feedback-notifying-inverse-neutral)",
-              "alternative": "var(--semantic-feedback-notifying-inverse-alternative)",
-              "assistive": "var(--semantic-feedback-notifying-inverse-assistive)",
-              "subtle": "var(--semantic-feedback-notifying-inverse-subtle)",
-              "subtler": "var(--semantic-feedback-notifying-inverse-subtler)",
-              "bolder": "var(--semantic-feedback-notifying-inverse-bolder)"
-            },
-            "alpha": {
-              "assistive": "var(--semantic-feedback-notifying-alpha-assistive)",
-              "subtle": "var(--semantic-feedback-notifying-alpha-subtle)",
-              "subtler": "var(--semantic-feedback-notifying-alpha-subtler)",
-              "inverse": {
-                "assistive": "var(--semantic-feedback-notifying-alpha-inverse-assistive)",
-                "subtle": "var(--semantic-feedback-notifying-alpha-inverse-subtle)",
-                "subtler": "var(--semantic-feedback-notifying-alpha-inverse-subtler)",
-                "subtlest": "var(--semantic-feedback-notifying-alpha-inverse-subtlest)"
+              subtlest: 'var(--semantic-feedback-destructive-alpha-subtlest)',
+            },
+            neutral: 'var(--semantic-feedback-destructive-neutral)',
+            alternative: 'var(--semantic-feedback-destructive-alternative)',
+            assistive: 'var(--semantic-feedback-destructive-assistive)',
+            subtle: 'var(--semantic-feedback-destructive-subtle)',
+            subtler: 'var(--semantic-feedback-destructive-subtler)',
+            bolder: 'var(--semantic-feedback-destructive-bolder)',
+          },
+          notifying: {
+            bold: 'var(--semantic-feedback-notifying-bold)',
+            normal: 'var(--semantic-feedback-notifying-normal)',
+            neutral: 'var(--semantic-feedback-notifying-neutral)',
+            alternative: 'var(--semantic-feedback-notifying-alternative)',
+            assistive: 'var(--semantic-feedback-notifying-assistive)',
+            subtle: 'var(--semantic-feedback-notifying-subtle)',
+            subtler: 'var(--semantic-feedback-notifying-subtler)',
+            inverse: {
+              bold: 'var(--semantic-feedback-notifying-inverse-bold)',
+              normal: 'var(--semantic-feedback-notifying-inverse-normal)',
+              neutral: 'var(--semantic-feedback-notifying-inverse-neutral)',
+              alternative: 'var(--semantic-feedback-notifying-inverse-alternative)',
+              assistive: 'var(--semantic-feedback-notifying-inverse-assistive)',
+              subtle: 'var(--semantic-feedback-notifying-inverse-subtle)',
+              subtler: 'var(--semantic-feedback-notifying-inverse-subtler)',
+              bolder: 'var(--semantic-feedback-notifying-inverse-bolder)',
+            },
+            alpha: {
+              assistive: 'var(--semantic-feedback-notifying-alpha-assistive)',
+              subtle: 'var(--semantic-feedback-notifying-alpha-subtle)',
+              subtler: 'var(--semantic-feedback-notifying-alpha-subtler)',
+              inverse: {
+                assistive: 'var(--semantic-feedback-notifying-alpha-inverse-assistive)',
+                subtle: 'var(--semantic-feedback-notifying-alpha-inverse-subtle)',
+                subtler: 'var(--semantic-feedback-notifying-alpha-inverse-subtler)',
+                subtlest: 'var(--semantic-feedback-notifying-alpha-inverse-subtlest)',
               },
-              "subtlest": "var(--semantic-feedback-notifying-alpha-subtlest)"
+              subtlest: 'var(--semantic-feedback-notifying-alpha-subtlest)',
             },
-            "bolder": "var(--semantic-feedback-notifying-bolder)"
-          }
-        }
-      }
-    }
+            bolder: 'var(--semantic-feedback-notifying-bolder)',
+          },
+        },
+      },
+    },
   },
-  "scheme": {
-    "desktop": {
-      "semantic": {
-        "spacing": {
-          "0": "var(--semantic-spacing-0)",
-          "1": "var(--semantic-spacing-1)",
-          "2": "var(--semantic-spacing-2)",
-          "3": "var(--semantic-spacing-3)",
-          "4": "var(--semantic-spacing-4)",
-          "6": "var(--semantic-spacing-6)",
-          "8": "var(--semantic-spacing-8)",
-          "10": "var(--semantic-spacing-10)",
-          "12": "var(--semantic-spacing-12)",
-          "16": "var(--semantic-spacing-16)",
-          "20": "var(--semantic-spacing-20)",
-          "24": "var(--semantic-spacing-24)",
-          "28": "var(--semantic-spacing-28)",
-          "32": "var(--semantic-spacing-32)",
-          "40": "var(--semantic-spacing-40)",
-          "48": "var(--semantic-spacing-48)",
-          "56": "var(--semantic-spacing-56)",
-          "64": "var(--semantic-spacing-64)",
-          "72": "var(--semantic-spacing-72)",
-          "80": "var(--semantic-spacing-80)",
-          "96": "var(--semantic-spacing-96)",
-          "112": "var(--semantic-spacing-112)",
-          "128": "var(--semantic-spacing-128)",
-          "144": "var(--semantic-spacing-144)"
+  scheme: {
+    desktop: {
+      semantic: {
+        spacing: {
+          '0': 'var(--semantic-spacing-0)',
+          '1': 'var(--semantic-spacing-1)',
+          '2': 'var(--semantic-spacing-2)',
+          '3': 'var(--semantic-spacing-3)',
+          '4': 'var(--semantic-spacing-4)',
+          '6': 'var(--semantic-spacing-6)',
+          '8': 'var(--semantic-spacing-8)',
+          '10': 'var(--semantic-spacing-10)',
+          '12': 'var(--semantic-spacing-12)',
+          '16': 'var(--semantic-spacing-16)',
+          '20': 'var(--semantic-spacing-20)',
+          '24': 'var(--semantic-spacing-24)',
+          '28': 'var(--semantic-spacing-28)',
+          '32': 'var(--semantic-spacing-32)',
+          '40': 'var(--semantic-spacing-40)',
+          '48': 'var(--semantic-spacing-48)',
+          '56': 'var(--semantic-spacing-56)',
+          '64': 'var(--semantic-spacing-64)',
+          '72': 'var(--semantic-spacing-72)',
+          '80': 'var(--semantic-spacing-80)',
+          '96': 'var(--semantic-spacing-96)',
+          '112': 'var(--semantic-spacing-112)',
+          '128': 'var(--semantic-spacing-128)',
+          '144': 'var(--semantic-spacing-144)',
+        },
+        radius: {
+          '0': 'var(--semantic-radius-0)',
+          '2': 'var(--semantic-radius-2)',
+          '4': 'var(--semantic-radius-4)',
+          '6': 'var(--semantic-radius-6)',
+          '8': 'var(--semantic-radius-8)',
+          '10': 'var(--semantic-radius-10)',
+          '12': 'var(--semantic-radius-12)',
+          '16': 'var(--semantic-radius-16)',
+          '24': 'var(--semantic-radius-24)',
+          max: 'var(--semantic-radius-max)',
+        },
+        strokeWeight: {
+          '1': 'var(--semantic-stroke-weight-1)',
+          '2': 'var(--semantic-stroke-weight-2)',
+          '3': 'var(--semantic-stroke-weight-3)',
+          '4': 'var(--semantic-stroke-weight-4)',
+          '5': 'var(--semantic-stroke-weight-5)',
+          '6': 'var(--semantic-stroke-weight-6)',
         },
-        "radius": {
-          "0": "var(--semantic-radius-0)",
-          "2": "var(--semantic-radius-2)",
-          "4": "var(--semantic-radius-4)",
-          "6": "var(--semantic-radius-6)",
-          "8": "var(--semantic-radius-8)",
-          "10": "var(--semantic-radius-10)",
-          "12": "var(--semantic-radius-12)",
-          "16": "var(--semantic-radius-16)",
-          "24": "var(--semantic-radius-24)",
-          "max": "var(--semantic-radius-max)"
+        opacity: {
+          '0': 'var(--semantic-opacity-0)',
+          '5': 'var(--semantic-opacity-5)',
+          '8': 'var(--semantic-opacity-8)',
+          '12': 'var(--semantic-opacity-12)',
+          '16': 'var(--semantic-opacity-16)',
+          '23': 'var(--semantic-opacity-23)',
+          '29': 'var(--semantic-opacity-29)',
+          '36': 'var(--semantic-opacity-36)',
+          '44': 'var(--semantic-opacity-44)',
+          '54': 'var(--semantic-opacity-54)',
+          '63': 'var(--semantic-opacity-63)',
+          '76': 'var(--semantic-opacity-76)',
+          '91': 'var(--semantic-opacity-91)',
+          '100': 'var(--semantic-opacity-100)',
         },
-        "strokeWeight": {
-          "1": "var(--semantic-stroke-weight-1)",
-          "2": "var(--semantic-stroke-weight-2)",
-          "3": "var(--semantic-stroke-weight-3)",
-          "4": "var(--semantic-stroke-weight-4)",
-          "5": "var(--semantic-stroke-weight-5)",
-          "6": "var(--semantic-stroke-weight-6)"
+        breakpoint: {
+          min: 'var(--semantic-breakpoint-min)',
+          max: 'var(--semantic-breakpoint-max)',
         },
-        "opacity": {
-          "0": "var(--semantic-opacity-0)",
-          "5": "var(--semantic-opacity-5)",
-          "8": "var(--semantic-opacity-8)",
-          "12": "var(--semantic-opacity-12)",
-          "16": "var(--semantic-opacity-16)",
-          "23": "var(--semantic-opacity-23)",
-          "29": "var(--semantic-opacity-29)",
-          "36": "var(--semantic-opacity-36)",
-          "44": "var(--semantic-opacity-44)",
-          "54": "var(--semantic-opacity-54)",
-          "63": "var(--semantic-opacity-63)",
-          "76": "var(--semantic-opacity-76)",
-          "91": "var(--semantic-opacity-91)",
-          "100": "var(--semantic-opacity-100)"
+        margin: {
+          lg: 'var(--semantic-margin-lg)',
+          md: 'var(--semantic-margin-md)',
+          sm: 'var(--semantic-margin-sm)',
+          xl: 'var(--semantic-margin-xl)',
+          '2xl': 'var(--semantic-margin-2xl)',
+          '3xl': 'var(--semantic-margin-3xl)',
+          xs: 'var(--semantic-margin-xs)',
+          '2xs': 'var(--semantic-margin-2xs)',
         },
-        "breakpoint": {
-          "min": "var(--semantic-breakpoint-min)",
-          "max": "var(--semantic-breakpoint-max)"
+        position: {
+          '0': 'var(--semantic-position-0)',
+          '1': 'var(--semantic-position-1)',
+          '2': 'var(--semantic-position-2)',
+          '3': 'var(--semantic-position-3)',
+          '4': 'var(--semantic-position-4)',
+          '6': 'var(--semantic-position-6)',
+          '8': 'var(--semantic-position-8)',
+          '12': 'var(--semantic-position-12)',
+          '16': 'var(--semantic-position-16)',
+          '24': 'var(--semantic-position-24)',
         },
-        "margin": {
-          "lg": "var(--semantic-margin-lg)",
-          "md": "var(--semantic-margin-md)",
-          "sm": "var(--semantic-margin-sm)",
-          "xl": "var(--semantic-margin-xl)",
-          "2xl": "var(--semantic-margin-2xl)",
-          "3xl": "var(--semantic-margin-3xl)",
-          "xs": "var(--semantic-margin-xs)",
-          "2xs": "var(--semantic-margin-2xs)"
+      },
+      primitive: {
+        unit: {
+          '0': 'var(--primitive-unit-0)',
+          '1': 'var(--primitive-unit-1)',
+          '2': 'var(--primitive-unit-2)',
+          '3': 'var(--primitive-unit-3)',
+          '4': 'var(--primitive-unit-4)',
+          '5': 'var(--primitive-unit-5)',
+          '6': 'var(--primitive-unit-6)',
+          '8': 'var(--primitive-unit-8)',
+          '10': 'var(--primitive-unit-10)',
+          '12': 'var(--primitive-unit-12)',
+          '16': 'var(--primitive-unit-16)',
+          '20': 'var(--primitive-unit-20)',
+          '24': 'var(--primitive-unit-24)',
+          '28': 'var(--primitive-unit-28)',
+          '32': 'var(--primitive-unit-32)',
+          '40': 'var(--primitive-unit-40)',
+          '48': 'var(--primitive-unit-48)',
+          '56': 'var(--primitive-unit-56)',
+          '64': 'var(--primitive-unit-64)',
+          '72': 'var(--primitive-unit-72)',
+          '80': 'var(--primitive-unit-80)',
+          '96': 'var(--primitive-unit-96)',
+          '112': 'var(--primitive-unit-112)',
+          '128': 'var(--primitive-unit-128)',
+          '144': 'var(--primitive-unit-144)',
         },
-        "position": {
-          "0": "var(--semantic-position-0)",
-          "1": "var(--semantic-position-1)",
-          "2": "var(--semantic-position-2)",
-          "3": "var(--semantic-position-3)",
-          "4": "var(--semantic-position-4)",
-          "6": "var(--semantic-position-6)",
-          "8": "var(--semantic-position-8)",
-          "12": "var(--semantic-position-12)",
-          "16": "var(--semantic-position-16)",
-          "24": "var(--semantic-position-24)"
-        }
       },
-      "primitive": {
-        "unit": {
-          "0": "var(--primitive-unit-0)",
-          "1": "var(--primitive-unit-1)",
-          "2": "var(--primitive-unit-2)",
-          "3": "var(--primitive-unit-3)",
-          "4": "var(--primitive-unit-4)",
-          "5": "var(--primitive-unit-5)",
-          "6": "var(--primitive-unit-6)",
-          "8": "var(--primitive-unit-8)",
-          "10": "var(--primitive-unit-10)",
-          "12": "var(--primitive-unit-12)",
-          "16": "var(--primitive-unit-16)",
-          "20": "var(--primitive-unit-20)",
-          "24": "var(--primitive-unit-24)",
-          "28": "var(--primitive-unit-28)",
-          "32": "var(--primitive-unit-32)",
-          "40": "var(--primitive-unit-40)",
-          "48": "var(--primitive-unit-48)",
-          "56": "var(--primitive-unit-56)",
-          "64": "var(--primitive-unit-64)",
-          "72": "var(--primitive-unit-72)",
-          "80": "var(--primitive-unit-80)",
-          "96": "var(--primitive-unit-96)",
-          "112": "var(--primitive-unit-112)",
-          "128": "var(--primitive-unit-128)",
-          "144": "var(--primitive-unit-144)"
-        }
-      }
     },
-    "tablet": {
-      "semantic": {
-        "spacing": {
-          "0": "var(--semantic-spacing-0)",
-          "1": "var(--semantic-spacing-1)",
-          "2": "var(--semantic-spacing-2)",
-          "3": "var(--semantic-spacing-3)",
-          "4": "var(--semantic-spacing-4)",
-          "6": "var(--semantic-spacing-6)",
-          "8": "var(--semantic-spacing-8)",
-          "10": "var(--semantic-spacing-10)",
-          "12": "var(--semantic-spacing-12)",
-          "16": "var(--semantic-spacing-16)",
-          "20": "var(--semantic-spacing-20)",
-          "24": "var(--semantic-spacing-24)",
-          "28": "var(--semantic-spacing-28)",
-          "32": "var(--semantic-spacing-32)",
-          "40": "var(--semantic-spacing-40)",
-          "48": "var(--semantic-spacing-48)",
-          "56": "var(--semantic-spacing-56)",
-          "64": "var(--semantic-spacing-64)",
-          "72": "var(--semantic-spacing-72)",
-          "80": "var(--semantic-spacing-80)",
-          "96": "var(--semantic-spacing-96)",
-          "112": "var(--semantic-spacing-112)",
-          "128": "var(--semantic-spacing-128)",
-          "144": "var(--semantic-spacing-144)"
+    tablet: {
+      semantic: {
+        spacing: {
+          '0': 'var(--semantic-spacing-0)',
+          '1': 'var(--semantic-spacing-1)',
+          '2': 'var(--semantic-spacing-2)',
+          '3': 'var(--semantic-spacing-3)',
+          '4': 'var(--semantic-spacing-4)',
+          '6': 'var(--semantic-spacing-6)',
+          '8': 'var(--semantic-spacing-8)',
+          '10': 'var(--semantic-spacing-10)',
+          '12': 'var(--semantic-spacing-12)',
+          '16': 'var(--semantic-spacing-16)',
+          '20': 'var(--semantic-spacing-20)',
+          '24': 'var(--semantic-spacing-24)',
+          '28': 'var(--semantic-spacing-28)',
+          '32': 'var(--semantic-spacing-32)',
+          '40': 'var(--semantic-spacing-40)',
+          '48': 'var(--semantic-spacing-48)',
+          '56': 'var(--semantic-spacing-56)',
+          '64': 'var(--semantic-spacing-64)',
+          '72': 'var(--semantic-spacing-72)',
+          '80': 'var(--semantic-spacing-80)',
+          '96': 'var(--semantic-spacing-96)',
+          '112': 'var(--semantic-spacing-112)',
+          '128': 'var(--semantic-spacing-128)',
+          '144': 'var(--semantic-spacing-144)',
+        },
+        radius: {
+          '0': 'var(--semantic-radius-0)',
+          '2': 'var(--semantic-radius-2)',
+          '4': 'var(--semantic-radius-4)',
+          '6': 'var(--semantic-radius-6)',
+          '8': 'var(--semantic-radius-8)',
+          '10': 'var(--semantic-radius-10)',
+          '12': 'var(--semantic-radius-12)',
+          '16': 'var(--semantic-radius-16)',
+          '24': 'var(--semantic-radius-24)',
+          max: 'var(--semantic-radius-max)',
         },
-        "radius": {
-          "0": "var(--semantic-radius-0)",
-          "2": "var(--semantic-radius-2)",
-          "4": "var(--semantic-radius-4)",
-          "6": "var(--semantic-radius-6)",
-          "8": "var(--semantic-radius-8)",
-          "10": "var(--semantic-radius-10)",
-          "12": "var(--semantic-radius-12)",
-          "16": "var(--semantic-radius-16)",
-          "24": "var(--semantic-radius-24)",
-          "max": "var(--semantic-radius-max)"
+        strokeWeight: {
+          '1': 'var(--semantic-stroke-weight-1)',
+          '2': 'var(--semantic-stroke-weight-2)',
+          '3': 'var(--semantic-stroke-weight-3)',
+          '4': 'var(--semantic-stroke-weight-4)',
+          '5': 'var(--semantic-stroke-weight-5)',
+          '6': 'var(--semantic-stroke-weight-6)',
         },
-        "strokeWeight": {
-          "1": "var(--semantic-stroke-weight-1)",
-          "2": "var(--semantic-stroke-weight-2)",
-          "3": "var(--semantic-stroke-weight-3)",
-          "4": "var(--semantic-stroke-weight-4)",
-          "5": "var(--semantic-stroke-weight-5)",
-          "6": "var(--semantic-stroke-weight-6)"
+        opacity: {
+          '0': 'var(--semantic-opacity-0)',
+          '5': 'var(--semantic-opacity-5)',
+          '8': 'var(--semantic-opacity-8)',
+          '12': 'var(--semantic-opacity-12)',
+          '16': 'var(--semantic-opacity-16)',
+          '23': 'var(--semantic-opacity-23)',
+          '29': 'var(--semantic-opacity-29)',
+          '36': 'var(--semantic-opacity-36)',
+          '44': 'var(--semantic-opacity-44)',
+          '54': 'var(--semantic-opacity-54)',
+          '63': 'var(--semantic-opacity-63)',
+          '76': 'var(--semantic-opacity-76)',
+          '91': 'var(--semantic-opacity-91)',
+          '100': 'var(--semantic-opacity-100)',
         },
-        "opacity": {
-          "0": "var(--semantic-opacity-0)",
-          "5": "var(--semantic-opacity-5)",
-          "8": "var(--semantic-opacity-8)",
-          "12": "var(--semantic-opacity-12)",
-          "16": "var(--semantic-opacity-16)",
-          "23": "var(--semantic-opacity-23)",
-          "29": "var(--semantic-opacity-29)",
-          "36": "var(--semantic-opacity-36)",
-          "44": "var(--semantic-opacity-44)",
-          "54": "var(--semantic-opacity-54)",
-          "63": "var(--semantic-opacity-63)",
-          "76": "var(--semantic-opacity-76)",
-          "91": "var(--semantic-opacity-91)",
-          "100": "var(--semantic-opacity-100)"
+        breakpoint: {
+          min: 'var(--semantic-breakpoint-min)',
+          max: 'var(--semantic-breakpoint-max)',
         },
-        "breakpoint": {
-          "min": "var(--semantic-breakpoint-min)",
-          "max": "var(--semantic-breakpoint-max)"
+        margin: {
+          lg: 'var(--semantic-margin-lg)',
+          md: 'var(--semantic-margin-md)',
+          sm: 'var(--semantic-margin-sm)',
+          xl: 'var(--semantic-margin-xl)',
+          '2xl': 'var(--semantic-margin-2xl)',
+          '3xl': 'var(--semantic-margin-3xl)',
+          xs: 'var(--semantic-margin-xs)',
+          '2xs': 'var(--semantic-margin-2xs)',
         },
-        "margin": {
-          "lg": "var(--semantic-margin-lg)",
-          "md": "var(--semantic-margin-md)",
-          "sm": "var(--semantic-margin-sm)",
-          "xl": "var(--semantic-margin-xl)",
-          "2xl": "var(--semantic-margin-2xl)",
-          "3xl": "var(--semantic-margin-3xl)",
-          "xs": "var(--semantic-margin-xs)",
-          "2xs": "var(--semantic-margin-2xs)"
+        position: {
+          '0': 'var(--semantic-position-0)',
+          '1': 'var(--semantic-position-1)',
+          '2': 'var(--semantic-position-2)',
+          '3': 'var(--semantic-position-3)',
+          '4': 'var(--semantic-position-4)',
+          '6': 'var(--semantic-position-6)',
+          '8': 'var(--semantic-position-8)',
+          '12': 'var(--semantic-position-12)',
+          '16': 'var(--semantic-position-16)',
+          '24': 'var(--semantic-position-24)',
+        },
+      },
+      primitive: {
+        unit: {
+          '0': 'var(--primitive-unit-0)',
+          '1': 'var(--primitive-unit-1)',
+          '2': 'var(--primitive-unit-2)',
+          '3': 'var(--primitive-unit-3)',
+          '4': 'var(--primitive-unit-4)',
+          '5': 'var(--primitive-unit-5)',
+          '6': 'var(--primitive-unit-6)',
+          '8': 'var(--primitive-unit-8)',
+          '10': 'var(--primitive-unit-10)',
+          '12': 'var(--primitive-unit-12)',
+          '16': 'var(--primitive-unit-16)',
+          '20': 'var(--primitive-unit-20)',
+          '24': 'var(--primitive-unit-24)',
+          '28': 'var(--primitive-unit-28)',
+          '32': 'var(--primitive-unit-32)',
+          '40': 'var(--primitive-unit-40)',
+          '48': 'var(--primitive-unit-48)',
+          '56': 'var(--primitive-unit-56)',
+          '64': 'var(--primitive-unit-64)',
+          '72': 'var(--primitive-unit-72)',
+          '80': 'var(--primitive-unit-80)',
+          '96': 'var(--primitive-unit-96)',
+          '112': 'var(--primitive-unit-112)',
+          '128': 'var(--primitive-unit-128)',
+          '144': 'var(--primitive-unit-144)',
         },
-        "position": {
-          "0": "var(--semantic-position-0)",
-          "1": "var(--semantic-position-1)",
-          "2": "var(--semantic-position-2)",
-          "3": "var(--semantic-position-3)",
-          "4": "var(--semantic-position-4)",
-          "6": "var(--semantic-position-6)",
-          "8": "var(--semantic-position-8)",
-          "12": "var(--semantic-position-12)",
-          "16": "var(--semantic-position-16)",
-          "24": "var(--semantic-position-24)"
-        }
       },
-      "primitive": {
-        "unit": {
-          "0": "var(--primitive-unit-0)",
-          "1": "var(--primitive-unit-1)",
-          "2": "var(--primitive-unit-2)",
-          "3": "var(--primitive-unit-3)",
-          "4": "var(--primitive-unit-4)",
-          "5": "var(--primitive-unit-5)",
-          "6": "var(--primitive-unit-6)",
-          "8": "var(--primitive-unit-8)",
-          "10": "var(--primitive-unit-10)",
-          "12": "var(--primitive-unit-12)",
-          "16": "var(--primitive-unit-16)",
-          "20": "var(--primitive-unit-20)",
-          "24": "var(--primitive-unit-24)",
-          "28": "var(--primitive-unit-28)",
-          "32": "var(--primitive-unit-32)",
-          "40": "var(--primitive-unit-40)",
-          "48": "var(--primitive-unit-48)",
-          "56": "var(--primitive-unit-56)",
-          "64": "var(--primitive-unit-64)",
-          "72": "var(--primitive-unit-72)",
-          "80": "var(--primitive-unit-80)",
-          "96": "var(--primitive-unit-96)",
-          "112": "var(--primitive-unit-112)",
-          "128": "var(--primitive-unit-128)",
-          "144": "var(--primitive-unit-144)"
-        }
-      }
     },
-    "mobile": {
-      "semantic": {
-        "spacing": {
-          "0": "var(--semantic-spacing-0)",
-          "1": "var(--semantic-spacing-1)",
-          "2": "var(--semantic-spacing-2)",
-          "3": "var(--semantic-spacing-3)",
-          "4": "var(--semantic-spacing-4)",
-          "6": "var(--semantic-spacing-6)",
-          "8": "var(--semantic-spacing-8)",
-          "10": "var(--semantic-spacing-10)",
-          "12": "var(--semantic-spacing-12)",
-          "16": "var(--semantic-spacing-16)",
-          "20": "var(--semantic-spacing-20)",
-          "24": "var(--semantic-spacing-24)",
-          "28": "var(--semantic-spacing-28)",
-          "32": "var(--semantic-spacing-32)",
-          "40": "var(--semantic-spacing-40)",
-          "48": "var(--semantic-spacing-48)",
-          "56": "var(--semantic-spacing-56)",
-          "64": "var(--semantic-spacing-64)",
-          "72": "var(--semantic-spacing-72)",
-          "80": "var(--semantic-spacing-80)",
-          "96": "var(--semantic-spacing-96)",
-          "112": "var(--semantic-spacing-112)",
-          "128": "var(--semantic-spacing-128)",
-          "144": "var(--semantic-spacing-144)"
+    mobile: {
+      semantic: {
+        spacing: {
+          '0': 'var(--semantic-spacing-0)',
+          '1': 'var(--semantic-spacing-1)',
+          '2': 'var(--semantic-spacing-2)',
+          '3': 'var(--semantic-spacing-3)',
+          '4': 'var(--semantic-spacing-4)',
+          '6': 'var(--semantic-spacing-6)',
+          '8': 'var(--semantic-spacing-8)',
+          '10': 'var(--semantic-spacing-10)',
+          '12': 'var(--semantic-spacing-12)',
+          '16': 'var(--semantic-spacing-16)',
+          '20': 'var(--semantic-spacing-20)',
+          '24': 'var(--semantic-spacing-24)',
+          '28': 'var(--semantic-spacing-28)',
+          '32': 'var(--semantic-spacing-32)',
+          '40': 'var(--semantic-spacing-40)',
+          '48': 'var(--semantic-spacing-48)',
+          '56': 'var(--semantic-spacing-56)',
+          '64': 'var(--semantic-spacing-64)',
+          '72': 'var(--semantic-spacing-72)',
+          '80': 'var(--semantic-spacing-80)',
+          '96': 'var(--semantic-spacing-96)',
+          '112': 'var(--semantic-spacing-112)',
+          '128': 'var(--semantic-spacing-128)',
+          '144': 'var(--semantic-spacing-144)',
         },
-        "radius": {
-          "0": "var(--semantic-radius-0)",
-          "2": "var(--semantic-radius-2)",
-          "4": "var(--semantic-radius-4)",
-          "6": "var(--semantic-radius-6)",
-          "8": "var(--semantic-radius-8)",
-          "10": "var(--semantic-radius-10)",
-          "12": "var(--semantic-radius-12)",
-          "16": "var(--semantic-radius-16)",
-          "24": "var(--semantic-radius-24)",
-          "max": "var(--semantic-radius-max)"
+        radius: {
+          '0': 'var(--semantic-radius-0)',
+          '2': 'var(--semantic-radius-2)',
+          '4': 'var(--semantic-radius-4)',
+          '6': 'var(--semantic-radius-6)',
+          '8': 'var(--semantic-radius-8)',
+          '10': 'var(--semantic-radius-10)',
+          '12': 'var(--semantic-radius-12)',
+          '16': 'var(--semantic-radius-16)',
+          '24': 'var(--semantic-radius-24)',
+          max: 'var(--semantic-radius-max)',
         },
-        "strokeWeight": {
-          "1": "var(--semantic-stroke-weight-1)",
-          "2": "var(--semantic-stroke-weight-2)",
-          "3": "var(--semantic-stroke-weight-3)",
-          "4": "var(--semantic-stroke-weight-4)",
-          "5": "var(--semantic-stroke-weight-5)",
-          "6": "var(--semantic-stroke-weight-6)"
+        strokeWeight: {
+          '1': 'var(--semantic-stroke-weight-1)',
+          '2': 'var(--semantic-stroke-weight-2)',
+          '3': 'var(--semantic-stroke-weight-3)',
+          '4': 'var(--semantic-stroke-weight-4)',
+          '5': 'var(--semantic-stroke-weight-5)',
+          '6': 'var(--semantic-stroke-weight-6)',
         },
-        "opacity": {
-          "0": "var(--semantic-opacity-0)",
-          "5": "var(--semantic-opacity-5)",
-          "8": "var(--semantic-opacity-8)",
-          "12": "var(--semantic-opacity-12)",
-          "16": "var(--semantic-opacity-16)",
-          "23": "var(--semantic-opacity-23)",
-          "29": "var(--semantic-opacity-29)",
-          "36": "var(--semantic-opacity-36)",
-          "44": "var(--semantic-opacity-44)",
-          "54": "var(--semantic-opacity-54)",
-          "63": "var(--semantic-opacity-63)",
-          "76": "var(--semantic-opacity-76)",
-          "91": "var(--semantic-opacity-91)",
-          "100": "var(--semantic-opacity-100)"
+        opacity: {
+          '0': 'var(--semantic-opacity-0)',
+          '5': 'var(--semantic-opacity-5)',
+          '8': 'var(--semantic-opacity-8)',
+          '12': 'var(--semantic-opacity-12)',
+          '16': 'var(--semantic-opacity-16)',
+          '23': 'var(--semantic-opacity-23)',
+          '29': 'var(--semantic-opacity-29)',
+          '36': 'var(--semantic-opacity-36)',
+          '44': 'var(--semantic-opacity-44)',
+          '54': 'var(--semantic-opacity-54)',
+          '63': 'var(--semantic-opacity-63)',
+          '76': 'var(--semantic-opacity-76)',
+          '91': 'var(--semantic-opacity-91)',
+          '100': 'var(--semantic-opacity-100)',
         },
-        "breakpoint": {
-          "min": "var(--semantic-breakpoint-min)",
-          "max": "var(--semantic-breakpoint-max)"
+        breakpoint: {
+          min: 'var(--semantic-breakpoint-min)',
+          max: 'var(--semantic-breakpoint-max)',
         },
-        "margin": {
-          "lg": "var(--semantic-margin-lg)",
-          "md": "var(--semantic-margin-md)",
-          "sm": "var(--semantic-margin-sm)",
-          "xl": "var(--semantic-margin-xl)",
-          "2xl": "var(--semantic-margin-2xl)",
-          "3xl": "var(--semantic-margin-3xl)",
-          "xs": "var(--semantic-margin-xs)",
-          "2xs": "var(--semantic-margin-2xs)"
+        margin: {
+          lg: 'var(--semantic-margin-lg)',
+          md: 'var(--semantic-margin-md)',
+          sm: 'var(--semantic-margin-sm)',
+          xl: 'var(--semantic-margin-xl)',
+          '2xl': 'var(--semantic-margin-2xl)',
+          '3xl': 'var(--semantic-margin-3xl)',
+          xs: 'var(--semantic-margin-xs)',
+          '2xs': 'var(--semantic-margin-2xs)',
+        },
+        position: {
+          '0': 'var(--semantic-position-0)',
+          '1': 'var(--semantic-position-1)',
+          '2': 'var(--semantic-position-2)',
+          '3': 'var(--semantic-position-3)',
+          '4': 'var(--semantic-position-4)',
+          '6': 'var(--semantic-position-6)',
+          '8': 'var(--semantic-position-8)',
+          '12': 'var(--semantic-position-12)',
+          '16': 'var(--semantic-position-16)',
+          '24': 'var(--semantic-position-24)',
+        },
+      },
+      primitive: {
+        unit: {
+          '0': 'var(--primitive-unit-0)',
+          '1': 'var(--primitive-unit-1)',
+          '2': 'var(--primitive-unit-2)',
+          '3': 'var(--primitive-unit-3)',
+          '4': 'var(--primitive-unit-4)',
+          '5': 'var(--primitive-unit-5)',
+          '6': 'var(--primitive-unit-6)',
+          '8': 'var(--primitive-unit-8)',
+          '10': 'var(--primitive-unit-10)',
+          '12': 'var(--primitive-unit-12)',
+          '16': 'var(--primitive-unit-16)',
+          '20': 'var(--primitive-unit-20)',
+          '24': 'var(--primitive-unit-24)',
+          '28': 'var(--primitive-unit-28)',
+          '32': 'var(--primitive-unit-32)',
+          '40': 'var(--primitive-unit-40)',
+          '48': 'var(--primitive-unit-48)',
+          '56': 'var(--primitive-unit-56)',
+          '64': 'var(--primitive-unit-64)',
+          '72': 'var(--primitive-unit-72)',
+          '80': 'var(--primitive-unit-80)',
+          '96': 'var(--primitive-unit-96)',
+          '112': 'var(--primitive-unit-112)',
+          '128': 'var(--primitive-unit-128)',
+          '144': 'var(--primitive-unit-144)',
         },
-        "position": {
-          "0": "var(--semantic-position-0)",
-          "1": "var(--semantic-position-1)",
-          "2": "var(--semantic-position-2)",
-          "3": "var(--semantic-position-3)",
-          "4": "var(--semantic-position-4)",
-          "6": "var(--semantic-position-6)",
-          "8": "var(--semantic-position-8)",
-          "12": "var(--semantic-position-12)",
-          "16": "var(--semantic-position-16)",
-          "24": "var(--semantic-position-24)"
-        }
       },
-      "primitive": {
-        "unit": {
-          "0": "var(--primitive-unit-0)",
-          "1": "var(--primitive-unit-1)",
-          "2": "var(--primitive-unit-2)",
-          "3": "var(--primitive-unit-3)",
-          "4": "var(--primitive-unit-4)",
-          "5": "var(--primitive-unit-5)",
-          "6": "var(--primitive-unit-6)",
-          "8": "var(--primitive-unit-8)",
-          "10": "var(--primitive-unit-10)",
-          "12": "var(--primitive-unit-12)",
-          "16": "var(--primitive-unit-16)",
-          "20": "var(--primitive-unit-20)",
-          "24": "var(--primitive-unit-24)",
-          "28": "var(--primitive-unit-28)",
-          "32": "var(--primitive-unit-32)",
-          "40": "var(--primitive-unit-40)",
-          "48": "var(--primitive-unit-48)",
-          "56": "var(--primitive-unit-56)",
-          "64": "var(--primitive-unit-64)",
-          "72": "var(--primitive-unit-72)",
-          "80": "var(--primitive-unit-80)",
-          "96": "var(--primitive-unit-96)",
-          "112": "var(--primitive-unit-112)",
-          "128": "var(--primitive-unit-128)",
-          "144": "var(--primitive-unit-144)"
-        }
-      }
-    }
+    },
   },
-  "typography": {
-    "desktop": {
-      "primitive": {
-        "typeface": {
-          "hero": "var(--primitive-typeface-hero)",
-          "syntax": "var(--primitive-typeface-syntax)",
-          "title": "var(--primitive-typeface-title)",
-          "label": "var(--primitive-typeface-label)",
-          "body": "var(--primitive-typeface-body)"
+  typography: {
+    desktop: {
+      primitive: {
+        typeface: {
+          hero: 'var(--primitive-typeface-hero)',
+          syntax: 'var(--primitive-typeface-syntax)',
+          title: 'var(--primitive-typeface-title)',
+          label: 'var(--primitive-typeface-label)',
+          body: 'var(--primitive-typeface-body)',
         },
-        "fontSize": {
-          "hero": {
-            "1": "var(--primitive-font-size-hero-1)",
-            "2": "var(--primitive-font-size-hero-2)",
-            "3": "var(--primitive-font-size-hero-3)",
-            "4": "var(--primitive-font-size-hero-4)"
-          },
-          "title": {
-            "1": "var(--primitive-font-size-title-1)",
-            "2": "var(--primitive-font-size-title-2)",
-            "3": "var(--primitive-font-size-title-3)",
-            "4": "var(--primitive-font-size-title-4)"
-          },
-          "body": {
-            "lg": "var(--primitive-font-size-body-lg)",
-            "md": "var(--primitive-font-size-body-md)",
-            "sm": "var(--primitive-font-size-body-sm)",
-            "xs": "var(--primitive-font-size-body-xs)",
-            "2xs": "var(--primitive-font-size-body-2xs)"
-          },
-          "label": {
-            "lg": "var(--primitive-font-size-label-lg)",
-            "md": "var(--primitive-font-size-label-md)",
-            "sm": "var(--primitive-font-size-label-sm)",
-            "xs": "var(--primitive-font-size-label-xs)"
-          },
-          "syntax": {
-            "lg": "var(--primitive-font-size-syntax-lg)",
-            "md": "var(--primitive-font-size-syntax-md)",
-            "sm": "var(--primitive-font-size-syntax-sm)",
-            "xs": "var(--primitive-font-size-syntax-xs)"
-          }
+        fontSize: {
+          hero: {
+            '1': 'var(--primitive-font-size-hero-1)',
+            '2': 'var(--primitive-font-size-hero-2)',
+            '3': 'var(--primitive-font-size-hero-3)',
+            '4': 'var(--primitive-font-size-hero-4)',
+          },
+          title: {
+            '1': 'var(--primitive-font-size-title-1)',
+            '2': 'var(--primitive-font-size-title-2)',
+            '3': 'var(--primitive-font-size-title-3)',
+            '4': 'var(--primitive-font-size-title-4)',
+          },
+          body: {
+            lg: 'var(--primitive-font-size-body-lg)',
+            md: 'var(--primitive-font-size-body-md)',
+            sm: 'var(--primitive-font-size-body-sm)',
+            xs: 'var(--primitive-font-size-body-xs)',
+            '2xs': 'var(--primitive-font-size-body-2xs)',
+          },
+          label: {
+            lg: 'var(--primitive-font-size-label-lg)',
+            md: 'var(--primitive-font-size-label-md)',
+            sm: 'var(--primitive-font-size-label-sm)',
+            xs: 'var(--primitive-font-size-label-xs)',
+          },
+          syntax: {
+            lg: 'var(--primitive-font-size-syntax-lg)',
+            md: 'var(--primitive-font-size-syntax-md)',
+            sm: 'var(--primitive-font-size-syntax-sm)',
+            xs: 'var(--primitive-font-size-syntax-xs)',
+          },
         },
-        "font": {
-          "lineHeight": {
-            "hero": {
-              "1": "var(--primitive-font-line-height-hero-1)",
-              "2": "var(--primitive-font-line-height-hero-2)",
-              "3": "var(--primitive-font-line-height-hero-3)",
-              "4": "var(--primitive-font-line-height-hero-4)"
-            },
-            "title": {
-              "1": "var(--primitive-font-line-height-title-1)",
-              "2": "var(--primitive-font-line-height-title-2)",
-              "3": "var(--primitive-font-line-height-title-3)",
-              "4": "var(--primitive-font-line-height-title-4)"
-            },
-            "label": {
-              "lg": "var(--primitive-font-line-height-label-lg)",
-              "md": "var(--primitive-font-line-height-label-md)",
-              "sm": "var(--primitive-font-line-height-label-sm)",
-              "xs": "var(--primitive-font-line-height-label-xs)"
-            },
-            "body": {
-              "lg": "var(--primitive-font-line-height-body-lg)",
-              "md": "var(--primitive-font-line-height-body-md)",
-              "sm": "var(--primitive-font-line-height-body-sm)",
-              "xs": "var(--primitive-font-line-height-body-xs)",
-              "2xs": "var(--primitive-font-line-height-body-2xs)"
-            },
-            "syntax": {
-              "lg": "var(--primitive-font-line-height-syntax-lg)",
-              "md": "var(--primitive-font-line-height-syntax-md)",
-              "sm": "var(--primitive-font-line-height-syntax-sm)",
-              "xs": "var(--primitive-font-line-height-syntax-xs)"
-            }
-          },
-          "letterSpacing": {
-            "hero": {
-              "1": "var(--primitive-font-letter-spacing-hero-1)",
-              "2": "var(--primitive-font-letter-spacing-hero-2)",
-              "3": "var(--primitive-font-letter-spacing-hero-3)",
-              "4": "var(--primitive-font-letter-spacing-hero-4)"
-            },
-            "title": {
-              "1": "var(--primitive-font-letter-spacing-title-1)",
-              "2": "var(--primitive-font-letter-spacing-title-2)",
-              "3": "var(--primitive-font-letter-spacing-title-3)",
-              "4": "var(--primitive-font-letter-spacing-title-4)"
-            },
-            "label": {
-              "lg": "var(--primitive-font-letter-spacing-label-lg)",
-              "md": "var(--primitive-font-letter-spacing-label-md)",
-              "sm": "var(--primitive-font-letter-spacing-label-sm)",
-              "xs": "var(--primitive-font-letter-spacing-label-xs)"
-            },
-            "body": {
-              "lg": "var(--primitive-font-letter-spacing-body-lg)",
-              "md": "var(--primitive-font-letter-spacing-body-md)",
-              "sm": "var(--primitive-font-letter-spacing-body-sm)",
-              "xs": "var(--primitive-font-letter-spacing-body-xs)",
-              "2xs": "var(--primitive-font-letter-spacing-body-2xs)"
-            }
-          }
+        font: {
+          lineHeight: {
+            hero: {
+              '1': 'var(--primitive-font-line-height-hero-1)',
+              '2': 'var(--primitive-font-line-height-hero-2)',
+              '3': 'var(--primitive-font-line-height-hero-3)',
+              '4': 'var(--primitive-font-line-height-hero-4)',
+            },
+            title: {
+              '1': 'var(--primitive-font-line-height-title-1)',
+              '2': 'var(--primitive-font-line-height-title-2)',
+              '3': 'var(--primitive-font-line-height-title-3)',
+              '4': 'var(--primitive-font-line-height-title-4)',
+            },
+            label: {
+              lg: 'var(--primitive-font-line-height-label-lg)',
+              md: 'var(--primitive-font-line-height-label-md)',
+              sm: 'var(--primitive-font-line-height-label-sm)',
+              xs: 'var(--primitive-font-line-height-label-xs)',
+            },
+            body: {
+              lg: 'var(--primitive-font-line-height-body-lg)',
+              md: 'var(--primitive-font-line-height-body-md)',
+              sm: 'var(--primitive-font-line-height-body-sm)',
+              xs: 'var(--primitive-font-line-height-body-xs)',
+              '2xs': 'var(--primitive-font-line-height-body-2xs)',
+            },
+            syntax: {
+              lg: 'var(--primitive-font-line-height-syntax-lg)',
+              md: 'var(--primitive-font-line-height-syntax-md)',
+              sm: 'var(--primitive-font-line-height-syntax-sm)',
+              xs: 'var(--primitive-font-line-height-syntax-xs)',
+            },
+          },
+          letterSpacing: {
+            hero: {
+              '1': 'var(--primitive-font-letter-spacing-hero-1)',
+              '2': 'var(--primitive-font-letter-spacing-hero-2)',
+              '3': 'var(--primitive-font-letter-spacing-hero-3)',
+              '4': 'var(--primitive-font-letter-spacing-hero-4)',
+            },
+            title: {
+              '1': 'var(--primitive-font-letter-spacing-title-1)',
+              '2': 'var(--primitive-font-letter-spacing-title-2)',
+              '3': 'var(--primitive-font-letter-spacing-title-3)',
+              '4': 'var(--primitive-font-letter-spacing-title-4)',
+            },
+            label: {
+              lg: 'var(--primitive-font-letter-spacing-label-lg)',
+              md: 'var(--primitive-font-letter-spacing-label-md)',
+              sm: 'var(--primitive-font-letter-spacing-label-sm)',
+              xs: 'var(--primitive-font-letter-spacing-label-xs)',
+            },
+            body: {
+              lg: 'var(--primitive-font-letter-spacing-body-lg)',
+              md: 'var(--primitive-font-letter-spacing-body-md)',
+              sm: 'var(--primitive-font-letter-spacing-body-sm)',
+              xs: 'var(--primitive-font-letter-spacing-body-xs)',
+              '2xs': 'var(--primitive-font-letter-spacing-body-2xs)',
+            },
+          },
         },
-        "fontWeight": {
-          "hero": {
-            "normal": "var(--primitive-font-weight-hero-normal)",
-            "bold": "var(--primitive-font-weight-hero-bold)"
-          },
-          "title": {
-            "normal": "var(--primitive-font-weight-title-normal)",
-            "bold": "var(--primitive-font-weight-title-bold)"
-          },
-          "label": {
-            "normal": "var(--primitive-font-weight-label-normal)",
-            "bold": "var(--primitive-font-weight-label-bold)",
-            "subtle": "var(--primitive-font-weight-label-subtle)"
-          },
-          "body": {
-            "normal": "var(--primitive-font-weight-body-normal)",
-            "bold": "var(--primitive-font-weight-body-bold)"
-          },
-          "syntax": {
-            "normal": "var(--primitive-font-weight-syntax-normal)"
-          }
-        }
-      }
+        fontWeight: {
+          hero: {
+            normal: 'var(--primitive-font-weight-hero-normal)',
+            bold: 'var(--primitive-font-weight-hero-bold)',
+          },
+          title: {
+            normal: 'var(--primitive-font-weight-title-normal)',
+            bold: 'var(--primitive-font-weight-title-bold)',
+          },
+          label: {
+            normal: 'var(--primitive-font-weight-label-normal)',
+            bold: 'var(--primitive-font-weight-label-bold)',
+            subtle: 'var(--primitive-font-weight-label-subtle)',
+          },
+          body: {
+            normal: 'var(--primitive-font-weight-body-normal)',
+            bold: 'var(--primitive-font-weight-body-bold)',
+          },
+          syntax: {
+            normal: 'var(--primitive-font-weight-syntax-normal)',
+          },
+        },
+      },
     },
-    "tablet": {
-      "primitive": {
-        "typeface": {
-          "hero": "var(--primitive-typeface-hero)",
-          "syntax": "var(--primitive-typeface-syntax)",
-          "title": "var(--primitive-typeface-title)",
-          "label": "var(--primitive-typeface-label)",
-          "body": "var(--primitive-typeface-body)"
+    tablet: {
+      primitive: {
+        typeface: {
+          hero: 'var(--primitive-typeface-hero)',
+          syntax: 'var(--primitive-typeface-syntax)',
+          title: 'var(--primitive-typeface-title)',
+          label: 'var(--primitive-typeface-label)',
+          body: 'var(--primitive-typeface-body)',
+        },
+        fontSize: {
+          hero: {
+            '1': 'var(--primitive-font-size-hero-1)',
+            '2': 'var(--primitive-font-size-hero-2)',
+            '3': 'var(--primitive-font-size-hero-3)',
+            '4': 'var(--primitive-font-size-hero-4)',
+          },
+          title: {
+            '1': 'var(--primitive-font-size-title-1)',
+            '2': 'var(--primitive-font-size-title-2)',
+            '3': 'var(--primitive-font-size-title-3)',
+            '4': 'var(--primitive-font-size-title-4)',
+          },
+          body: {
+            lg: 'var(--primitive-font-size-body-lg)',
+            md: 'var(--primitive-font-size-body-md)',
+            sm: 'var(--primitive-font-size-body-sm)',
+            xs: 'var(--primitive-font-size-body-xs)',
+            '2xs': 'var(--primitive-font-size-body-2xs)',
+          },
+          label: {
+            lg: 'var(--primitive-font-size-label-lg)',
+            md: 'var(--primitive-font-size-label-md)',
+            sm: 'var(--primitive-font-size-label-sm)',
+            xs: 'var(--primitive-font-size-label-xs)',
+          },
+          syntax: {
+            lg: 'var(--primitive-font-size-syntax-lg)',
+            md: 'var(--primitive-font-size-syntax-md)',
+            sm: 'var(--primitive-font-size-syntax-sm)',
+            xs: 'var(--primitive-font-size-syntax-xs)',
+          },
         },
-        "fontSize": {
-          "hero": {
-            "1": "var(--primitive-font-size-hero-1)",
-            "2": "var(--primitive-font-size-hero-2)",
-            "3": "var(--primitive-font-size-hero-3)",
-            "4": "var(--primitive-font-size-hero-4)"
-          },
-          "title": {
-            "1": "var(--primitive-font-size-title-1)",
-            "2": "var(--primitive-font-size-title-2)",
-            "3": "var(--primitive-font-size-title-3)",
-            "4": "var(--primitive-font-size-title-4)"
-          },
-          "body": {
-            "lg": "var(--primitive-font-size-body-lg)",
-            "md": "var(--primitive-font-size-body-md)",
-            "sm": "var(--primitive-font-size-body-sm)",
-            "xs": "var(--primitive-font-size-body-xs)",
-            "2xs": "var(--primitive-font-size-body-2xs)"
-          },
-          "label": {
-            "lg": "var(--primitive-font-size-label-lg)",
-            "md": "var(--primitive-font-size-label-md)",
-            "sm": "var(--primitive-font-size-label-sm)",
-            "xs": "var(--primitive-font-size-label-xs)"
-          },
-          "syntax": {
-            "lg": "var(--primitive-font-size-syntax-lg)",
-            "md": "var(--primitive-font-size-syntax-md)",
-            "sm": "var(--primitive-font-size-syntax-sm)",
-            "xs": "var(--primitive-font-size-syntax-xs)"
-          }
+        font: {
+          lineHeight: {
+            hero: {
+              '1': 'var(--primitive-font-line-height-hero-1)',
+              '2': 'var(--primitive-font-line-height-hero-2)',
+              '3': 'var(--primitive-font-line-height-hero-3)',
+              '4': 'var(--primitive-font-line-height-hero-4)',
+            },
+            title: {
+              '1': 'var(--primitive-font-line-height-title-1)',
+              '2': 'var(--primitive-font-line-height-title-2)',
+              '3': 'var(--primitive-font-line-height-title-3)',
+              '4': 'var(--primitive-font-line-height-title-4)',
+            },
+            label: {
+              lg: 'var(--primitive-font-line-height-label-lg)',
+              md: 'var(--primitive-font-line-height-label-md)',
+              sm: 'var(--primitive-font-line-height-label-sm)',
+              xs: 'var(--primitive-font-line-height-label-xs)',
+            },
+            body: {
+              lg: 'var(--primitive-font-line-height-body-lg)',
+              md: 'var(--primitive-font-line-height-body-md)',
+              sm: 'var(--primitive-font-line-height-body-sm)',
+              xs: 'var(--primitive-font-line-height-body-xs)',
+              '2xs': 'var(--primitive-font-line-height-body-2xs)',
+            },
+            syntax: {
+              lg: 'var(--primitive-font-line-height-syntax-lg)',
+              md: 'var(--primitive-font-line-height-syntax-md)',
+              sm: 'var(--primitive-font-line-height-syntax-sm)',
+              xs: 'var(--primitive-font-line-height-syntax-xs)',
+            },
+          },
+          letterSpacing: {
+            hero: {
+              '1': 'var(--primitive-font-letter-spacing-hero-1)',
+              '2': 'var(--primitive-font-letter-spacing-hero-2)',
+              '3': 'var(--primitive-font-letter-spacing-hero-3)',
+              '4': 'var(--primitive-font-letter-spacing-hero-4)',
+            },
+            title: {
+              '1': 'var(--primitive-font-letter-spacing-title-1)',
+              '2': 'var(--primitive-font-letter-spacing-title-2)',
+              '3': 'var(--primitive-font-letter-spacing-title-3)',
+              '4': 'var(--primitive-font-letter-spacing-title-4)',
+            },
+            label: {
+              lg: 'var(--primitive-font-letter-spacing-label-lg)',
+              md: 'var(--primitive-font-letter-spacing-label-md)',
+              sm: 'var(--primitive-font-letter-spacing-label-sm)',
+              xs: 'var(--primitive-font-letter-spacing-label-xs)',
+            },
+            body: {
+              lg: 'var(--primitive-font-letter-spacing-body-lg)',
+              md: 'var(--primitive-font-letter-spacing-body-md)',
+              sm: 'var(--primitive-font-letter-spacing-body-sm)',
+              xs: 'var(--primitive-font-letter-spacing-body-xs)',
+              '2xs': 'var(--primitive-font-letter-spacing-body-2xs)',
+            },
+          },
         },
-        "font": {
-          "lineHeight": {
-            "hero": {
-              "1": "var(--primitive-font-line-height-hero-1)",
-              "2": "var(--primitive-font-line-height-hero-2)",
-              "3": "var(--primitive-font-line-height-hero-3)",
-              "4": "var(--primitive-font-line-height-hero-4)"
-            },
-            "title": {
-              "1": "var(--primitive-font-line-height-title-1)",
-              "2": "var(--primitive-font-line-height-title-2)",
-              "3": "var(--primitive-font-line-height-title-3)",
-              "4": "var(--primitive-font-line-height-title-4)"
-            },
-            "label": {
-              "lg": "var(--primitive-font-line-height-label-lg)",
-              "md": "var(--primitive-font-line-height-label-md)",
-              "sm": "var(--primitive-font-line-height-label-sm)",
-              "xs": "var(--primitive-font-line-height-label-xs)"
-            },
-            "body": {
-              "lg": "var(--primitive-font-line-height-body-lg)",
-              "md": "var(--primitive-font-line-height-body-md)",
-              "sm": "var(--primitive-font-line-height-body-sm)",
-              "xs": "var(--primitive-font-line-height-body-xs)",
-              "2xs": "var(--primitive-font-line-height-body-2xs)"
-            },
-            "syntax": {
-              "lg": "var(--primitive-font-line-height-syntax-lg)",
-              "md": "var(--primitive-font-line-height-syntax-md)",
-              "sm": "var(--primitive-font-line-height-syntax-sm)",
-              "xs": "var(--primitive-font-line-height-syntax-xs)"
-            }
-          },
-          "letterSpacing": {
-            "hero": {
-              "1": "var(--primitive-font-letter-spacing-hero-1)",
-              "2": "var(--primitive-font-letter-spacing-hero-2)",
-              "3": "var(--primitive-font-letter-spacing-hero-3)",
-              "4": "var(--primitive-font-letter-spacing-hero-4)"
-            },
-            "title": {
-              "1": "var(--primitive-font-letter-spacing-title-1)",
-              "2": "var(--primitive-font-letter-spacing-title-2)",
-              "3": "var(--primitive-font-letter-spacing-title-3)",
-              "4": "var(--primitive-font-letter-spacing-title-4)"
-            },
-            "label": {
-              "lg": "var(--primitive-font-letter-spacing-label-lg)",
-              "md": "var(--primitive-font-letter-spacing-label-md)",
-              "sm": "var(--primitive-font-letter-spacing-label-sm)",
-              "xs": "var(--primitive-font-letter-spacing-label-xs)"
-            },
-            "body": {
-              "lg": "var(--primitive-font-letter-spacing-body-lg)",
-              "md": "var(--primitive-font-letter-spacing-body-md)",
-              "sm": "var(--primitive-font-letter-spacing-body-sm)",
-              "xs": "var(--primitive-font-letter-spacing-body-xs)",
-              "2xs": "var(--primitive-font-letter-spacing-body-2xs)"
-            }
-          }
+        fontWeight: {
+          hero: {
+            normal: 'var(--primitive-font-weight-hero-normal)',
+            bold: 'var(--primitive-font-weight-hero-bold)',
+          },
+          title: {
+            normal: 'var(--primitive-font-weight-title-normal)',
+            bold: 'var(--primitive-font-weight-title-bold)',
+          },
+          label: {
+            normal: 'var(--primitive-font-weight-label-normal)',
+            bold: 'var(--primitive-font-weight-label-bold)',
+            subtle: 'var(--primitive-font-weight-label-subtle)',
+          },
+          body: {
+            normal: 'var(--primitive-font-weight-body-normal)',
+            bold: 'var(--primitive-font-weight-body-bold)',
+          },
+          syntax: {
+            normal: 'var(--primitive-font-weight-syntax-normal)',
+          },
         },
-        "fontWeight": {
-          "hero": {
-            "normal": "var(--primitive-font-weight-hero-normal)",
-            "bold": "var(--primitive-font-weight-hero-bold)"
-          },
-          "title": {
-            "normal": "var(--primitive-font-weight-title-normal)",
-            "bold": "var(--primitive-font-weight-title-bold)"
-          },
-          "label": {
-            "normal": "var(--primitive-font-weight-label-normal)",
-            "bold": "var(--primitive-font-weight-label-bold)",
-            "subtle": "var(--primitive-font-weight-label-subtle)"
-          },
-          "body": {
-            "normal": "var(--primitive-font-weight-body-normal)",
-            "bold": "var(--primitive-font-weight-body-bold)"
-          },
-          "syntax": {
-            "normal": "var(--primitive-font-weight-syntax-normal)"
-          }
-        }
-      }
+      },
     },
-    "mobile": {
-      "primitive": {
-        "typeface": {
-          "hero": "var(--primitive-typeface-hero)",
-          "syntax": "var(--primitive-typeface-syntax)",
-          "title": "var(--primitive-typeface-title)",
-          "label": "var(--primitive-typeface-label)",
-          "body": "var(--primitive-typeface-body)"
+    mobile: {
+      primitive: {
+        typeface: {
+          hero: 'var(--primitive-typeface-hero)',
+          syntax: 'var(--primitive-typeface-syntax)',
+          title: 'var(--primitive-typeface-title)',
+          label: 'var(--primitive-typeface-label)',
+          body: 'var(--primitive-typeface-body)',
         },
-        "fontSize": {
-          "hero": {
-            "1": "var(--primitive-font-size-hero-1)",
-            "2": "var(--primitive-font-size-hero-2)",
-            "3": "var(--primitive-font-size-hero-3)",
-            "4": "var(--primitive-font-size-hero-4)"
-          },
-          "title": {
-            "1": "var(--primitive-font-size-title-1)",
-            "2": "var(--primitive-font-size-title-2)",
-            "3": "var(--primitive-font-size-title-3)",
-            "4": "var(--primitive-font-size-title-4)"
-          },
-          "body": {
-            "lg": "var(--primitive-font-size-body-lg)",
-            "md": "var(--primitive-font-size-body-md)",
-            "sm": "var(--primitive-font-size-body-sm)",
-            "xs": "var(--primitive-font-size-body-xs)",
-            "2xs": "var(--primitive-font-size-body-2xs)"
-          },
-          "label": {
-            "lg": "var(--primitive-font-size-label-lg)",
-            "md": "var(--primitive-font-size-label-md)",
-            "sm": "var(--primitive-font-size-label-sm)",
-            "xs": "var(--primitive-font-size-label-xs)"
-          },
-          "syntax": {
-            "lg": "var(--primitive-font-size-syntax-lg)",
-            "md": "var(--primitive-font-size-syntax-md)",
-            "sm": "var(--primitive-font-size-syntax-sm)",
-            "xs": "var(--primitive-font-size-syntax-xs)"
-          }
+        fontSize: {
+          hero: {
+            '1': 'var(--primitive-font-size-hero-1)',
+            '2': 'var(--primitive-font-size-hero-2)',
+            '3': 'var(--primitive-font-size-hero-3)',
+            '4': 'var(--primitive-font-size-hero-4)',
+          },
+          title: {
+            '1': 'var(--primitive-font-size-title-1)',
+            '2': 'var(--primitive-font-size-title-2)',
+            '3': 'var(--primitive-font-size-title-3)',
+            '4': 'var(--primitive-font-size-title-4)',
+          },
+          body: {
+            lg: 'var(--primitive-font-size-body-lg)',
+            md: 'var(--primitive-font-size-body-md)',
+            sm: 'var(--primitive-font-size-body-sm)',
+            xs: 'var(--primitive-font-size-body-xs)',
+            '2xs': 'var(--primitive-font-size-body-2xs)',
+          },
+          label: {
+            lg: 'var(--primitive-font-size-label-lg)',
+            md: 'var(--primitive-font-size-label-md)',
+            sm: 'var(--primitive-font-size-label-sm)',
+            xs: 'var(--primitive-font-size-label-xs)',
+          },
+          syntax: {
+            lg: 'var(--primitive-font-size-syntax-lg)',
+            md: 'var(--primitive-font-size-syntax-md)',
+            sm: 'var(--primitive-font-size-syntax-sm)',
+            xs: 'var(--primitive-font-size-syntax-xs)',
+          },
+        },
+        font: {
+          lineHeight: {
+            hero: {
+              '1': 'var(--primitive-font-line-height-hero-1)',
+              '2': 'var(--primitive-font-line-height-hero-2)',
+              '3': 'var(--primitive-font-line-height-hero-3)',
+              '4': 'var(--primitive-font-line-height-hero-4)',
+            },
+            title: {
+              '1': 'var(--primitive-font-line-height-title-1)',
+              '2': 'var(--primitive-font-line-height-title-2)',
+              '3': 'var(--primitive-font-line-height-title-3)',
+              '4': 'var(--primitive-font-line-height-title-4)',
+            },
+            label: {
+              lg: 'var(--primitive-font-line-height-label-lg)',
+              md: 'var(--primitive-font-line-height-label-md)',
+              sm: 'var(--primitive-font-line-height-label-sm)',
+              xs: 'var(--primitive-font-line-height-label-xs)',
+            },
+            body: {
+              lg: 'var(--primitive-font-line-height-body-lg)',
+              md: 'var(--primitive-font-line-height-body-md)',
+              sm: 'var(--primitive-font-line-height-body-sm)',
+              xs: 'var(--primitive-font-line-height-body-xs)',
+              '2xs': 'var(--primitive-font-line-height-body-2xs)',
+            },
+            syntax: {
+              lg: 'var(--primitive-font-line-height-syntax-lg)',
+              md: 'var(--primitive-font-line-height-syntax-md)',
+              sm: 'var(--primitive-font-line-height-syntax-sm)',
+              xs: 'var(--primitive-font-line-height-syntax-xs)',
+            },
+          },
+          letterSpacing: {
+            hero: {
+              '1': 'var(--primitive-font-letter-spacing-hero-1)',
+              '2': 'var(--primitive-font-letter-spacing-hero-2)',
+              '3': 'var(--primitive-font-letter-spacing-hero-3)',
+              '4': 'var(--primitive-font-letter-spacing-hero-4)',
+            },
+            title: {
+              '1': 'var(--primitive-font-letter-spacing-title-1)',
+              '2': 'var(--primitive-font-letter-spacing-title-2)',
+              '3': 'var(--primitive-font-letter-spacing-title-3)',
+              '4': 'var(--primitive-font-letter-spacing-title-4)',
+            },
+            label: {
+              lg: 'var(--primitive-font-letter-spacing-label-lg)',
+              md: 'var(--primitive-font-letter-spacing-label-md)',
+              sm: 'var(--primitive-font-letter-spacing-label-sm)',
+              xs: 'var(--primitive-font-letter-spacing-label-xs)',
+            },
+            body: {
+              lg: 'var(--primitive-font-letter-spacing-body-lg)',
+              md: 'var(--primitive-font-letter-spacing-body-md)',
+              sm: 'var(--primitive-font-letter-spacing-body-sm)',
+              xs: 'var(--primitive-font-letter-spacing-body-xs)',
+              '2xs': 'var(--primitive-font-letter-spacing-body-2xs)',
+            },
+          },
         },
-        "font": {
-          "lineHeight": {
-            "hero": {
-              "1": "var(--primitive-font-line-height-hero-1)",
-              "2": "var(--primitive-font-line-height-hero-2)",
-              "3": "var(--primitive-font-line-height-hero-3)",
-              "4": "var(--primitive-font-line-height-hero-4)"
-            },
-            "title": {
-              "1": "var(--primitive-font-line-height-title-1)",
-              "2": "var(--primitive-font-line-height-title-2)",
-              "3": "var(--primitive-font-line-height-title-3)",
-              "4": "var(--primitive-font-line-height-title-4)"
-            },
-            "label": {
-              "lg": "var(--primitive-font-line-height-label-lg)",
-              "md": "var(--primitive-font-line-height-label-md)",
-              "sm": "var(--primitive-font-line-height-label-sm)",
-              "xs": "var(--primitive-font-line-height-label-xs)"
-            },
-            "body": {
-              "lg": "var(--primitive-font-line-height-body-lg)",
-              "md": "var(--primitive-font-line-height-body-md)",
-              "sm": "var(--primitive-font-line-height-body-sm)",
-              "xs": "var(--primitive-font-line-height-body-xs)",
-              "2xs": "var(--primitive-font-line-height-body-2xs)"
-            },
-            "syntax": {
-              "lg": "var(--primitive-font-line-height-syntax-lg)",
-              "md": "var(--primitive-font-line-height-syntax-md)",
-              "sm": "var(--primitive-font-line-height-syntax-sm)",
-              "xs": "var(--primitive-font-line-height-syntax-xs)"
-            }
-          },
-          "letterSpacing": {
-            "hero": {
-              "1": "var(--primitive-font-letter-spacing-hero-1)",
-              "2": "var(--primitive-font-letter-spacing-hero-2)",
-              "3": "var(--primitive-font-letter-spacing-hero-3)",
-              "4": "var(--primitive-font-letter-spacing-hero-4)"
-            },
-            "title": {
-              "1": "var(--primitive-font-letter-spacing-title-1)",
-              "2": "var(--primitive-font-letter-spacing-title-2)",
-              "3": "var(--primitive-font-letter-spacing-title-3)",
-              "4": "var(--primitive-font-letter-spacing-title-4)"
-            },
-            "label": {
-              "lg": "var(--primitive-font-letter-spacing-label-lg)",
-              "md": "var(--primitive-font-letter-spacing-label-md)",
-              "sm": "var(--primitive-font-letter-spacing-label-sm)",
-              "xs": "var(--primitive-font-letter-spacing-label-xs)"
-            },
-            "body": {
-              "lg": "var(--primitive-font-letter-spacing-body-lg)",
-              "md": "var(--primitive-font-letter-spacing-body-md)",
-              "sm": "var(--primitive-font-letter-spacing-body-sm)",
-              "xs": "var(--primitive-font-letter-spacing-body-xs)",
-              "2xs": "var(--primitive-font-letter-spacing-body-2xs)"
-            }
-          }
+        fontWeight: {
+          hero: {
+            normal: 'var(--primitive-font-weight-hero-normal)',
+            bold: 'var(--primitive-font-weight-hero-bold)',
+          },
+          title: {
+            normal: 'var(--primitive-font-weight-title-normal)',
+            bold: 'var(--primitive-font-weight-title-bold)',
+          },
+          label: {
+            normal: 'var(--primitive-font-weight-label-normal)',
+            bold: 'var(--primitive-font-weight-label-bold)',
+            subtle: 'var(--primitive-font-weight-label-subtle)',
+          },
+          body: {
+            normal: 'var(--primitive-font-weight-body-normal)',
+            bold: 'var(--primitive-font-weight-body-bold)',
+          },
+          syntax: {
+            normal: 'var(--primitive-font-weight-syntax-normal)',
+          },
         },
-        "fontWeight": {
-          "hero": {
-            "normal": "var(--primitive-font-weight-hero-normal)",
-            "bold": "var(--primitive-font-weight-hero-bold)"
-          },
-          "title": {
-            "normal": "var(--primitive-font-weight-title-normal)",
-            "bold": "var(--primitive-font-weight-title-bold)"
-          },
-          "label": {
-            "normal": "var(--primitive-font-weight-label-normal)",
-            "bold": "var(--primitive-font-weight-label-bold)",
-            "subtle": "var(--primitive-font-weight-label-subtle)"
-          },
-          "body": {
-            "normal": "var(--primitive-font-weight-body-normal)",
-            "bold": "var(--primitive-font-weight-body-bold)"
-          },
-          "syntax": {
-            "normal": "var(--primitive-font-weight-syntax-normal)"
-          }
-        }
-      }
-    }
+      },
+    },
   },
-  "environment": {
-    "semantic": {
-      "duration": {
-        "50": "var(--semantic-duration-50)",
-        "100": "var(--semantic-duration-100)",
-        "150": "var(--semantic-duration-150)",
-        "200": "var(--semantic-duration-200)",
-        "250": "var(--semantic-duration-250)",
-        "300": "var(--semantic-duration-300)",
-        "350": "var(--semantic-duration-350)",
-        "400": "var(--semantic-duration-400)",
-        "450": "var(--semantic-duration-450)",
-        "500": "var(--semantic-duration-500)"
+  environment: {
+    semantic: {
+      duration: {
+        '50': 'var(--semantic-duration-50)',
+        '100': 'var(--semantic-duration-100)',
+        '150': 'var(--semantic-duration-150)',
+        '200': 'var(--semantic-duration-200)',
+        '250': 'var(--semantic-duration-250)',
+        '300': 'var(--semantic-duration-300)',
+        '350': 'var(--semantic-duration-350)',
+        '400': 'var(--semantic-duration-400)',
+        '450': 'var(--semantic-duration-450)',
+        '500': 'var(--semantic-duration-500)',
+      },
+      motion: {
+        bouncy: 'var(--semantic-motion-bouncy)',
+        fluent: 'var(--semantic-motion-fluent)',
+        leave: 'var(--semantic-motion-leave)',
+        entrance: 'var(--semantic-motion-entrance)',
+      },
+    },
+    primitive: {
+      time: {
+        '50': 'var(--primitive-time-50)',
+        '100': 'var(--primitive-time-100)',
+        '150': 'var(--primitive-time-150)',
+        '200': 'var(--primitive-time-200)',
+        '250': 'var(--primitive-time-250)',
+        '300': 'var(--primitive-time-300)',
+        '350': 'var(--primitive-time-350)',
+        '400': 'var(--primitive-time-400)',
+        '450': 'var(--primitive-time-450)',
+        '500': 'var(--primitive-time-500)',
       },
-      "motion": {
-        "bouncy": "var(--semantic-motion-bouncy)",
-        "fluent": "var(--semantic-motion-fluent)",
-        "leave": "var(--semantic-motion-leave)",
-        "entrance": "var(--semantic-motion-entrance)"
-      }
     },
-    "primitive": {
-      "time": {
-        "50": "var(--primitive-time-50)",
-        "100": "var(--primitive-time-100)",
-        "150": "var(--primitive-time-150)",
-        "200": "var(--primitive-time-200)",
-        "250": "var(--primitive-time-250)",
-        "300": "var(--primitive-time-300)",
-        "350": "var(--primitive-time-350)",
-        "400": "var(--primitive-time-400)",
-        "450": "var(--primitive-time-450)",
-        "500": "var(--primitive-time-500)"
-      }
-    }
   },
-  "textStyle": {
-    "semantic-textStyle-hero-4": {
-      "fontSize": "var(--primitive-font-size-hero-4)",
-      "lineHeight": "var(--primitive-font-line-height-hero-4)",
-      "fontFamily": "var(--primitive-typeface-hero)",
-      "fontWeight": "var(--primitive-font-weight-hero-bold)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-hero-4)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+  textStyle: {
+    'semantic-textStyle-hero-4': {
+      fontSize: 'var(--primitive-font-size-hero-4)',
+      lineHeight: 'var(--primitive-font-line-height-hero-4)',
+      fontFamily: 'var(--primitive-typeface-hero)',
+      fontWeight: 'var(--primitive-font-weight-hero-bold)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-hero-4)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-hero-3": {
-      "fontSize": "var(--primitive-font-size-hero-3)",
-      "lineHeight": "var(--primitive-font-line-height-hero-3)",
-      "fontFamily": "var(--primitive-typeface-hero)",
-      "fontWeight": "var(--primitive-font-weight-hero-bold)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-hero-3)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-hero-3': {
+      fontSize: 'var(--primitive-font-size-hero-3)',
+      lineHeight: 'var(--primitive-font-line-height-hero-3)',
+      fontFamily: 'var(--primitive-typeface-hero)',
+      fontWeight: 'var(--primitive-font-weight-hero-bold)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-hero-3)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-hero-2": {
-      "fontSize": "var(--primitive-font-size-hero-2)",
-      "lineHeight": "var(--primitive-font-line-height-hero-2)",
-      "fontFamily": "var(--primitive-typeface-hero)",
-      "fontWeight": "var(--primitive-font-weight-hero-normal)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-hero-2)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-hero-2': {
+      fontSize: 'var(--primitive-font-size-hero-2)',
+      lineHeight: 'var(--primitive-font-line-height-hero-2)',
+      fontFamily: 'var(--primitive-typeface-hero)',
+      fontWeight: 'var(--primitive-font-weight-hero-normal)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-hero-2)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-hero-1": {
-      "fontSize": "var(--primitive-font-size-hero-1)",
-      "lineHeight": "var(--primitive-font-line-height-hero-1)",
-      "fontFamily": "var(--primitive-typeface-hero)",
-      "fontWeight": "var(--primitive-font-weight-hero-normal)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-hero-1)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-hero-1': {
+      fontSize: 'var(--primitive-font-size-hero-1)',
+      lineHeight: 'var(--primitive-font-line-height-hero-1)',
+      fontFamily: 'var(--primitive-typeface-hero)',
+      fontWeight: 'var(--primitive-font-weight-hero-normal)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-hero-1)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-title-4": {
-      "fontSize": "var(--primitive-font-size-title-4)",
-      "lineHeight": "var(--primitive-font-line-height-title-4)",
-      "fontFamily": "var(--primitive-typeface-title)",
-      "fontWeight": "var(--primitive-font-weight-title-bold)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-title-4)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-title-4': {
+      fontSize: 'var(--primitive-font-size-title-4)',
+      lineHeight: 'var(--primitive-font-line-height-title-4)',
+      fontFamily: 'var(--primitive-typeface-title)',
+      fontWeight: 'var(--primitive-font-weight-title-bold)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-title-4)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-title-3": {
-      "fontSize": "var(--primitive-font-size-title-3)",
-      "lineHeight": "var(--primitive-font-line-height-title-3)",
-      "fontFamily": "var(--primitive-typeface-title)",
-      "fontWeight": "var(--primitive-font-weight-title-bold)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-title-3)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-title-3': {
+      fontSize: 'var(--primitive-font-size-title-3)',
+      lineHeight: 'var(--primitive-font-line-height-title-3)',
+      fontFamily: 'var(--primitive-typeface-title)',
+      fontWeight: 'var(--primitive-font-weight-title-bold)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-title-3)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-title-2": {
-      "fontSize": "var(--primitive-font-size-title-2)",
-      "lineHeight": "var(--primitive-font-line-height-title-2)",
-      "fontFamily": "var(--primitive-typeface-title)",
-      "fontWeight": "var(--primitive-font-weight-title-normal)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-title-2)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-title-2': {
+      fontSize: 'var(--primitive-font-size-title-2)',
+      lineHeight: 'var(--primitive-font-line-height-title-2)',
+      fontFamily: 'var(--primitive-typeface-title)',
+      fontWeight: 'var(--primitive-font-weight-title-normal)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-title-2)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-title-1": {
-      "fontSize": "var(--primitive-font-size-title-1)",
-      "lineHeight": "var(--primitive-font-line-height-title-1)",
-      "fontFamily": "var(--primitive-typeface-title)",
-      "fontWeight": "var(--primitive-font-weight-title-normal)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-title-1)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-title-1': {
+      fontSize: 'var(--primitive-font-size-title-1)',
+      lineHeight: 'var(--primitive-font-line-height-title-1)',
+      fontFamily: 'var(--primitive-typeface-title)',
+      fontWeight: 'var(--primitive-font-weight-title-normal)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-title-1)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-label-lg-bold": {
-      "fontSize": "var(--primitive-font-size-label-lg)",
-      "lineHeight": "var(--primitive-font-line-height-label-lg)",
-      "fontFamily": "var(--primitive-typeface-label)",
-      "fontWeight": "var(--primitive-font-weight-label-bold)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-label-lg)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-label-lg-bold': {
+      fontSize: 'var(--primitive-font-size-label-lg)',
+      lineHeight: 'var(--primitive-font-line-height-label-lg)',
+      fontFamily: 'var(--primitive-typeface-label)',
+      fontWeight: 'var(--primitive-font-weight-label-bold)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-label-lg)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-label-lg-normal": {
-      "fontSize": "var(--primitive-font-size-label-lg)",
-      "lineHeight": "var(--primitive-font-line-height-label-lg)",
-      "fontFamily": "var(--primitive-typeface-label)",
-      "fontWeight": "var(--primitive-font-weight-label-normal)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-label-lg)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-label-lg-normal': {
+      fontSize: 'var(--primitive-font-size-label-lg)',
+      lineHeight: 'var(--primitive-font-line-height-label-lg)',
+      fontFamily: 'var(--primitive-typeface-label)',
+      fontWeight: 'var(--primitive-font-weight-label-normal)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-label-lg)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-label-lg-subtle": {
-      "fontSize": "var(--primitive-font-size-label-lg)",
-      "lineHeight": "var(--primitive-font-line-height-label-lg)",
-      "fontFamily": "var(--primitive-typeface-label)",
-      "fontWeight": "var(--primitive-font-weight-label-subtle)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-label-lg)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-label-lg-subtle': {
+      fontSize: 'var(--primitive-font-size-label-lg)',
+      lineHeight: 'var(--primitive-font-line-height-label-lg)',
+      fontFamily: 'var(--primitive-typeface-label)',
+      fontWeight: 'var(--primitive-font-weight-label-subtle)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-label-lg)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-label-md-bold": {
-      "fontSize": "var(--primitive-font-size-label-md)",
-      "lineHeight": "var(--primitive-font-line-height-label-md)",
-      "fontFamily": "var(--primitive-typeface-label)",
-      "fontWeight": "var(--primitive-font-weight-label-bold)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-label-md)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-label-md-bold': {
+      fontSize: 'var(--primitive-font-size-label-md)',
+      lineHeight: 'var(--primitive-font-line-height-label-md)',
+      fontFamily: 'var(--primitive-typeface-label)',
+      fontWeight: 'var(--primitive-font-weight-label-bold)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-label-md)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-label-md-normal": {
-      "fontSize": "var(--primitive-font-size-label-md)",
-      "lineHeight": "var(--primitive-font-line-height-label-md)",
-      "fontFamily": "var(--primitive-typeface-label)",
-      "fontWeight": "var(--primitive-font-weight-label-normal)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-label-md)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-label-md-normal': {
+      fontSize: 'var(--primitive-font-size-label-md)',
+      lineHeight: 'var(--primitive-font-line-height-label-md)',
+      fontFamily: 'var(--primitive-typeface-label)',
+      fontWeight: 'var(--primitive-font-weight-label-normal)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-label-md)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-label-md-subtle": {
-      "fontSize": "var(--primitive-font-size-label-md)",
-      "lineHeight": "var(--primitive-font-line-height-label-md)",
-      "fontFamily": "var(--primitive-typeface-label)",
-      "fontWeight": "var(--primitive-font-weight-label-subtle)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-label-md)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-label-md-subtle': {
+      fontSize: 'var(--primitive-font-size-label-md)',
+      lineHeight: 'var(--primitive-font-line-height-label-md)',
+      fontFamily: 'var(--primitive-typeface-label)',
+      fontWeight: 'var(--primitive-font-weight-label-subtle)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-label-md)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-label-sm-bold": {
-      "fontSize": "var(--primitive-font-size-label-sm)",
-      "lineHeight": "var(--primitive-font-line-height-label-sm)",
-      "fontFamily": "var(--primitive-typeface-label)",
-      "fontWeight": "var(--primitive-font-weight-label-bold)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-label-sm)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-label-sm-bold': {
+      fontSize: 'var(--primitive-font-size-label-sm)',
+      lineHeight: 'var(--primitive-font-line-height-label-sm)',
+      fontFamily: 'var(--primitive-typeface-label)',
+      fontWeight: 'var(--primitive-font-weight-label-bold)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-label-sm)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-label-sm-normal": {
-      "fontSize": "var(--primitive-font-size-label-sm)",
-      "lineHeight": "var(--primitive-font-line-height-label-sm)",
-      "fontFamily": "var(--primitive-typeface-label)",
-      "fontWeight": "var(--primitive-font-weight-label-normal)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-label-sm)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-label-sm-normal': {
+      fontSize: 'var(--primitive-font-size-label-sm)',
+      lineHeight: 'var(--primitive-font-line-height-label-sm)',
+      fontFamily: 'var(--primitive-typeface-label)',
+      fontWeight: 'var(--primitive-font-weight-label-normal)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-label-sm)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-label-sm-subtle": {
-      "fontSize": "var(--primitive-font-size-label-sm)",
-      "lineHeight": "var(--primitive-font-line-height-label-sm)",
-      "fontFamily": "var(--primitive-typeface-label)",
-      "fontWeight": "var(--primitive-font-weight-label-subtle)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-label-sm)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-label-sm-subtle': {
+      fontSize: 'var(--primitive-font-size-label-sm)',
+      lineHeight: 'var(--primitive-font-line-height-label-sm)',
+      fontFamily: 'var(--primitive-typeface-label)',
+      fontWeight: 'var(--primitive-font-weight-label-subtle)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-label-sm)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-label-xs-bold": {
-      "fontSize": "var(--primitive-font-size-label-xs)",
-      "lineHeight": "var(--primitive-font-line-height-label-xs)",
-      "fontFamily": "var(--primitive-typeface-label)",
-      "fontWeight": "var(--primitive-font-weight-label-bold)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-label-xs)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-label-xs-bold': {
+      fontSize: 'var(--primitive-font-size-label-xs)',
+      lineHeight: 'var(--primitive-font-line-height-label-xs)',
+      fontFamily: 'var(--primitive-typeface-label)',
+      fontWeight: 'var(--primitive-font-weight-label-bold)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-label-xs)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-label-xs-normal": {
-      "fontSize": "var(--primitive-font-size-label-xs)",
-      "lineHeight": "var(--primitive-font-line-height-label-xs)",
-      "fontFamily": "var(--primitive-typeface-label)",
-      "fontWeight": "var(--primitive-font-weight-label-normal)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-label-xs)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-label-xs-normal': {
+      fontSize: 'var(--primitive-font-size-label-xs)',
+      lineHeight: 'var(--primitive-font-line-height-label-xs)',
+      fontFamily: 'var(--primitive-typeface-label)',
+      fontWeight: 'var(--primitive-font-weight-label-normal)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-label-xs)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-label-xs-subtle": {
-      "fontSize": "var(--primitive-font-size-label-xs)",
-      "lineHeight": "var(--primitive-font-line-height-label-xs)",
-      "fontFamily": "var(--primitive-typeface-label)",
-      "fontWeight": "var(--primitive-font-weight-label-subtle)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-label-xs)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-label-xs-subtle': {
+      fontSize: 'var(--primitive-font-size-label-xs)',
+      lineHeight: 'var(--primitive-font-line-height-label-xs)',
+      fontFamily: 'var(--primitive-typeface-label)',
+      fontWeight: 'var(--primitive-font-weight-label-subtle)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-label-xs)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-body-lg-bold": {
-      "fontSize": "var(--primitive-font-size-body-lg)",
-      "lineHeight": "var(--primitive-font-line-height-body-lg)",
-      "fontFamily": "var(--primitive-typeface-body)",
-      "fontWeight": "var(--primitive-font-weight-body-bold)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-body-lg)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-body-lg-bold': {
+      fontSize: 'var(--primitive-font-size-body-lg)',
+      lineHeight: 'var(--primitive-font-line-height-body-lg)',
+      fontFamily: 'var(--primitive-typeface-body)',
+      fontWeight: 'var(--primitive-font-weight-body-bold)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-body-lg)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-body-lg-normal": {
-      "fontSize": "var(--primitive-font-size-body-lg)",
-      "lineHeight": "var(--primitive-font-line-height-body-lg)",
-      "fontFamily": "var(--primitive-typeface-body)",
-      "fontWeight": "var(--primitive-font-weight-body-normal)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-body-lg)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-body-lg-normal': {
+      fontSize: 'var(--primitive-font-size-body-lg)',
+      lineHeight: 'var(--primitive-font-line-height-body-lg)',
+      fontFamily: 'var(--primitive-typeface-body)',
+      fontWeight: 'var(--primitive-font-weight-body-normal)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-body-lg)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-body-md-bold": {
-      "fontSize": "var(--primitive-font-size-body-md)",
-      "lineHeight": "var(--primitive-font-line-height-body-md)",
-      "fontFamily": "var(--primitive-typeface-body)",
-      "fontWeight": "var(--primitive-font-weight-body-bold)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-body-md)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-body-md-bold': {
+      fontSize: 'var(--primitive-font-size-body-md)',
+      lineHeight: 'var(--primitive-font-line-height-body-md)',
+      fontFamily: 'var(--primitive-typeface-body)',
+      fontWeight: 'var(--primitive-font-weight-body-bold)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-body-md)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-body-md-normal": {
-      "fontSize": "var(--primitive-font-size-body-md)",
-      "lineHeight": "var(--primitive-font-line-height-body-md)",
-      "fontFamily": "var(--primitive-typeface-body)",
-      "fontWeight": "var(--primitive-font-weight-body-normal)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-body-md)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-body-md-normal': {
+      fontSize: 'var(--primitive-font-size-body-md)',
+      lineHeight: 'var(--primitive-font-line-height-body-md)',
+      fontFamily: 'var(--primitive-typeface-body)',
+      fontWeight: 'var(--primitive-font-weight-body-normal)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-body-md)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-body-sm-bold": {
-      "fontSize": "var(--primitive-font-size-body-sm)",
-      "lineHeight": "var(--primitive-font-line-height-body-sm)",
-      "fontFamily": "var(--primitive-typeface-body)",
-      "fontWeight": "var(--primitive-font-weight-body-bold)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-body-sm)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-body-sm-bold': {
+      fontSize: 'var(--primitive-font-size-body-sm)',
+      lineHeight: 'var(--primitive-font-line-height-body-sm)',
+      fontFamily: 'var(--primitive-typeface-body)',
+      fontWeight: 'var(--primitive-font-weight-body-bold)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-body-sm)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-body-sm-normal": {
-      "fontSize": "var(--primitive-font-size-body-sm)",
-      "lineHeight": "var(--primitive-font-line-height-body-sm)",
-      "fontFamily": "var(--primitive-typeface-body)",
-      "fontWeight": "var(--primitive-font-weight-body-normal)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-body-sm)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-body-sm-normal': {
+      fontSize: 'var(--primitive-font-size-body-sm)',
+      lineHeight: 'var(--primitive-font-line-height-body-sm)',
+      fontFamily: 'var(--primitive-typeface-body)',
+      fontWeight: 'var(--primitive-font-weight-body-normal)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-body-sm)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-body-xs-bold": {
-      "fontSize": "var(--primitive-font-size-body-xs)",
-      "lineHeight": "var(--primitive-font-line-height-body-xs)",
-      "fontFamily": "var(--primitive-typeface-body)",
-      "fontWeight": "var(--primitive-font-weight-body-bold)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-body-xs)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-body-xs-bold': {
+      fontSize: 'var(--primitive-font-size-body-xs)',
+      lineHeight: 'var(--primitive-font-line-height-body-xs)',
+      fontFamily: 'var(--primitive-typeface-body)',
+      fontWeight: 'var(--primitive-font-weight-body-bold)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-body-xs)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-body-xs-normal": {
-      "fontSize": "var(--primitive-font-size-body-xs)",
-      "lineHeight": "var(--primitive-font-line-height-body-xs)",
-      "fontFamily": "var(--primitive-typeface-body)",
-      "fontWeight": "var(--primitive-font-weight-body-normal)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-body-xs)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-body-xs-normal': {
+      fontSize: 'var(--primitive-font-size-body-xs)',
+      lineHeight: 'var(--primitive-font-line-height-body-xs)',
+      fontFamily: 'var(--primitive-typeface-body)',
+      fontWeight: 'var(--primitive-font-weight-body-normal)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-body-xs)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-body-2xs-bold": {
-      "fontSize": "var(--primitive-font-size-body-2xs)",
-      "lineHeight": "var(--primitive-font-line-height-body-2xs)",
-      "fontFamily": "var(--primitive-typeface-body)",
-      "fontWeight": "var(--primitive-font-weight-body-bold)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-body-2xs)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-body-2xs-bold': {
+      fontSize: 'var(--primitive-font-size-body-2xs)',
+      lineHeight: 'var(--primitive-font-line-height-body-2xs)',
+      fontFamily: 'var(--primitive-typeface-body)',
+      fontWeight: 'var(--primitive-font-weight-body-bold)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-body-2xs)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-body-2xs-normal": {
-      "fontSize": "var(--primitive-font-size-body-2xs)",
-      "lineHeight": "var(--primitive-font-line-height-body-2xs)",
-      "fontFamily": "var(--primitive-typeface-body)",
-      "fontWeight": "var(--primitive-font-weight-body-normal)",
-      "letterSpacing": "var(--primitive-font-letter-spacing-body-2xs)",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-body-2xs-normal': {
+      fontSize: 'var(--primitive-font-size-body-2xs)',
+      lineHeight: 'var(--primitive-font-line-height-body-2xs)',
+      fontFamily: 'var(--primitive-typeface-body)',
+      fontWeight: 'var(--primitive-font-weight-body-normal)',
+      letterSpacing: 'var(--primitive-font-letter-spacing-body-2xs)',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-syntax-lg": {
-      "fontSize": "var(--primitive-font-size-syntax-lg)",
-      "lineHeight": "var(--primitive-font-line-height-syntax-lg)",
-      "fontFamily": "var(--primitive-typeface-syntax)",
-      "fontWeight": "var(--primitive-font-weight-syntax-normal)",
-      "letterSpacing": "0%",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-syntax-lg': {
+      fontSize: 'var(--primitive-font-size-syntax-lg)',
+      lineHeight: 'var(--primitive-font-line-height-syntax-lg)',
+      fontFamily: 'var(--primitive-typeface-syntax)',
+      fontWeight: 'var(--primitive-font-weight-syntax-normal)',
+      letterSpacing: '0%',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-syntax-md": {
-      "fontSize": "var(--primitive-font-size-syntax-md)",
-      "lineHeight": "var(--primitive-font-line-height-syntax-md)",
-      "fontFamily": "var(--primitive-typeface-syntax)",
-      "fontWeight": "var(--primitive-font-weight-syntax-normal)",
-      "letterSpacing": "0%",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-syntax-md': {
+      fontSize: 'var(--primitive-font-size-syntax-md)',
+      lineHeight: 'var(--primitive-font-line-height-syntax-md)',
+      fontFamily: 'var(--primitive-typeface-syntax)',
+      fontWeight: 'var(--primitive-font-weight-syntax-normal)',
+      letterSpacing: '0%',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-syntax-sm": {
-      "fontSize": "var(--primitive-font-size-syntax-sm)",
-      "lineHeight": "var(--primitive-font-line-height-syntax-sm)",
-      "fontFamily": "var(--primitive-typeface-syntax)",
-      "fontWeight": "var(--primitive-font-weight-syntax-normal)",
-      "letterSpacing": "0%",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
+    'semantic-textStyle-syntax-sm': {
+      fontSize: 'var(--primitive-font-size-syntax-sm)',
+      lineHeight: 'var(--primitive-font-line-height-syntax-sm)',
+      fontFamily: 'var(--primitive-typeface-syntax)',
+      fontWeight: 'var(--primitive-font-weight-syntax-normal)',
+      letterSpacing: '0%',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
     },
-    "semantic-textStyle-syntax-xs": {
-      "fontSize": "var(--primitive-font-size-syntax-xs)",
-      "lineHeight": "var(--primitive-font-line-height-syntax-xs)",
-      "fontFamily": "var(--primitive-typeface-syntax)",
-      "fontWeight": "var(--primitive-font-weight-syntax-normal)",
-      "letterSpacing": "0%",
-      "paragraphSpacing": "0px",
-      "paragraphIndent": "0px"
-    }
-  }
+    'semantic-textStyle-syntax-xs': {
+      fontSize: 'var(--primitive-font-size-syntax-xs)',
+      lineHeight: 'var(--primitive-font-line-height-syntax-xs)',
+      fontFamily: 'var(--primitive-typeface-syntax)',
+      fontWeight: 'var(--primitive-font-weight-syntax-normal)',
+      letterSpacing: '0%',
+      paragraphSpacing: '0px',
+      paragraphIndent: '0px',
+    },
+  },
 } as const;

From c95eab6fc806aa7c2c889d0db821044c212af03c Mon Sep 17 00:00:00 2001
From: whdgur5717 <whdgur5717@gmail.com>
Date: Fri, 21 Nov 2025 17:33:29 +0900
Subject: [PATCH 02/15] =?UTF-8?q?feat:=20sva=20=EC=9C=A0=ED=8B=B8=EB=A6=AC?=
 =?UTF-8?q?=ED=8B=B0=20=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84=20-=20?=
 =?UTF-8?q?=EC=B6=94=ED=9B=84=20=EA=B3=B5=ED=86=B5=20=EC=9C=A0=ED=8B=B8?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20=EC=98=88?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/components/Tab/sva.ts | 228 +++++++++++++++++++++++++
 1 file changed, 228 insertions(+)
 create mode 100644 packages/jds/src/components/Tab/sva.ts

diff --git a/packages/jds/src/components/Tab/sva.ts b/packages/jds/src/components/Tab/sva.ts
new file mode 100644
index 000000000..308e7613a
--- /dev/null
+++ b/packages/jds/src/components/Tab/sva.ts
@@ -0,0 +1,228 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+// emotion-variants.ts
+import { css, type CSSObject, type SerializedStyles } from '@emotion/react';
+
+/* ----------------- 공통 타입 ----------------- */
+
+type SlotName = string;
+
+// variants shape 공통 베이스
+export type VariantsConfigBase = {
+  [VariantKey: string]: {
+    [VariantValue: string]: unknown;
+  };
+};
+
+export type VariantProps<V extends VariantsConfigBase> = {
+  [K in keyof V]?: keyof V[K] & string;
+};
+
+export type VariantPropsOf<R> = R extends (props?: infer P) => unknown ? NonNullable<P> : never;
+
+/* ----------------- SVA (multi-slot) ----------------- */
+
+export type SlotStyles<S extends readonly SlotName[]> = {
+  [K in S[number]]?: CSSObject;
+};
+
+export type SvaVariants<S extends readonly SlotName[]> = {
+  [VariantKey: string]: {
+    [VariantValue: string]: SlotStyles<S>;
+  };
+};
+
+export interface SvaConfig<S extends readonly SlotName[], V extends SvaVariants<S>> {
+  slots: S;
+  base?: SlotStyles<S>;
+  variants: V;
+  defaultVariants?: Partial<VariantProps<V>>;
+  compoundVariants?: Array<{
+    variants: Partial<VariantProps<V>>;
+    style: SlotStyles<S>;
+  }>;
+}
+
+export interface SvaRecipe<S extends readonly SlotName[], V extends SvaVariants<S>> {
+  (props?: VariantProps<V>): { [K in S[number]]: SerializedStyles };
+  raw: (props?: VariantProps<V>) => { [K in S[number]]: CSSObject };
+}
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  value !== null && typeof value === 'object' && !Array.isArray(value);
+
+const mergeStyles = (target: CSSObject = {}, source: CSSObject = {}) => {
+  const out: CSSObject = { ...target };
+
+  for (const key of Object.keys(source)) {
+    const sourceValue = source[key];
+    const targetValue = out[key];
+
+    if (isPlainObject(sourceValue) && isPlainObject(targetValue)) {
+      out[key] = mergeStyles(targetValue as CSSObject, sourceValue as CSSObject);
+    } else {
+      out[key] = sourceValue;
+    }
+  }
+
+  return out;
+};
+
+export function sva<S extends readonly SlotName[], V extends SvaVariants<S>>(
+  config: SvaConfig<S, V>,
+): SvaRecipe<S, V> {
+  type Slots = S[number];
+  type Props = VariantProps<V>;
+
+  const variantKeys = Object.keys(config.variants) as (keyof V)[];
+
+  const resolve = (props?: Props): Props => ({
+    ...(config.defaultVariants ?? ({} as Props)),
+    ...(props ?? ({} as Props)),
+  });
+
+  const computeRaw = (props?: Props): Record<Slots, CSSObject> => {
+    const resolved = resolve(props);
+    const result = {} as Record<Slots, CSSObject>;
+
+    // base
+    for (const slot of config.slots) {
+      const key = slot as Slots;
+      result[key] = { ...(config.base?.[key] ?? {}) };
+    }
+
+    // variants
+    for (const variantName of variantKeys) {
+      const value = resolved[variantName];
+      if (!value) continue;
+
+      const group = config.variants[variantName];
+      const slotStyles = group[value as keyof typeof group];
+      if (!slotStyles) continue;
+
+      for (const slot in slotStyles) {
+        const slotKey = slot as Slots;
+        result[slotKey] = mergeStyles(result[slotKey], slotStyles[slotKey]);
+      }
+    }
+
+    // compoundVariants
+    if (config.compoundVariants) {
+      for (const cv of config.compoundVariants) {
+        let matched = true;
+
+        for (const key in cv.variants) {
+          const expected = cv.variants[key as keyof Props];
+          if (expected === undefined) continue;
+          if (resolved[key as keyof Props] !== expected) {
+            matched = false;
+            break;
+          }
+        }
+
+        if (!matched) continue;
+
+        for (const slot in cv.style) {
+          const slotKey = slot as Slots;
+          result[slotKey] = mergeStyles(result[slotKey], cv.style[slotKey]);
+        }
+      }
+    }
+
+    return result;
+  };
+
+  const recipe: SvaRecipe<S, V> = ((props?: Props) => {
+    const raw = computeRaw(props);
+    const out = {} as Record<Slots, SerializedStyles>;
+
+    for (const slot of config.slots) {
+      const key = slot as Slots;
+      out[key] = css(raw[key]);
+    }
+
+    return out;
+  }) as SvaRecipe<S, V>;
+
+  recipe.raw = computeRaw;
+
+  return recipe;
+}
+
+/* ----------------- CVA (single slot) ----------------- */
+
+export type CvaVariants = {
+  [VariantKey: string]: {
+    [VariantValue: string]: CSSObject;
+  };
+};
+
+export interface CvaConfig<V extends CvaVariants> {
+  base?: CSSObject;
+  variants: V;
+  defaultVariants?: Partial<VariantProps<V>>;
+  compoundVariants?: Array<{
+    variants: Partial<VariantProps<V>>;
+    style: CSSObject;
+  }>;
+}
+
+export interface CvaRecipe<V extends CvaVariants> {
+  (props?: VariantProps<V>): SerializedStyles;
+  raw: (props?: VariantProps<V>) => CSSObject;
+}
+
+export function cva<V extends CvaVariants>(config: CvaConfig<V>): CvaRecipe<V> {
+  type Props = VariantProps<V>;
+
+  const variantKeys = Object.keys(config.variants) as (keyof V)[];
+
+  const resolve = (props?: Props): Props => ({
+    ...(config.defaultVariants ?? ({} as Props)),
+    ...(props ?? ({} as Props)),
+  });
+
+  const computeRaw = (props?: Props): CSSObject => {
+    const resolved = resolve(props);
+    let result: CSSObject = { ...(config.base ?? {}) };
+
+    // variants
+    for (const variantName of variantKeys) {
+      const value = resolved[variantName];
+      if (!value) continue;
+
+      const group = config.variants[variantName];
+      const style = group[value as keyof typeof group];
+      if (!style) continue;
+
+      result = mergeStyles(result, style);
+    }
+
+    // compoundVariants
+    if (config.compoundVariants) {
+      for (const cv of config.compoundVariants) {
+        let matched = true;
+
+        for (const key in cv.variants) {
+          const expected = cv.variants[key as keyof Props];
+          if (expected === undefined) continue;
+          if (resolved[key as keyof Props] !== expected) {
+            matched = false;
+            break;
+          }
+        }
+
+        if (!matched) continue;
+
+        result = mergeStyles(result, cv.style);
+      }
+    }
+
+    return result;
+  };
+
+  const recipe: CvaRecipe<V> = ((props?: Props) => css(computeRaw(props))) as CvaRecipe<V>;
+
+  recipe.raw = computeRaw;
+
+  return recipe;
+}

From 8dcab6f1166ec466c45cf182caeaf11c3104106a Mon Sep 17 00:00:00 2001
From: whdgur5717 <whdgur5717@gmail.com>
Date: Fri, 21 Nov 2025 20:31:18 +0900
Subject: [PATCH 03/15] =?UTF-8?q?feat:=20mergeRefs=20=EA=B5=AC=ED=98=84=20?=
 =?UTF-8?q?-=20=EC=B6=94=ED=9B=84=20utils=ED=8F=B4=EB=8D=94=EB=A1=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99=20=EC=98=88=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/hooks/mergeRefs.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 packages/jds/src/hooks/mergeRefs.ts

diff --git a/packages/jds/src/hooks/mergeRefs.ts b/packages/jds/src/hooks/mergeRefs.ts
new file mode 100644
index 000000000..e88b3e91d
--- /dev/null
+++ b/packages/jds/src/hooks/mergeRefs.ts
@@ -0,0 +1,16 @@
+import type { MutableRefObject, Ref, RefCallback } from 'react';
+
+export function mergeRefs<T>(...refs: Array<Ref<T> | null | undefined>): RefCallback<T> {
+  return value => {
+    for (const ref of refs) {
+      if (!ref) {
+        continue;
+      }
+      if (typeof ref === 'function') {
+        ref(value);
+      } else {
+        (ref as MutableRefObject<T | null>).current = value;
+      }
+    }
+  };
+}

From 4a42c8786a3e4cb9e988c34b72143c5c99976318 Mon Sep 17 00:00:00 2001
From: whdgur5717 <whdgur5717@gmail.com>
Date: Fri, 21 Nov 2025 21:31:26 +0900
Subject: [PATCH 04/15] =?UTF-8?q?feat:=20RecipeVariant=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=84=A0=EC=96=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/components/Tab/sva.ts | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/packages/jds/src/components/Tab/sva.ts b/packages/jds/src/components/Tab/sva.ts
index 308e7613a..6c0bc54e2 100644
--- a/packages/jds/src/components/Tab/sva.ts
+++ b/packages/jds/src/components/Tab/sva.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/naming-convention */
 // emotion-variants.ts
 import { css, type CSSObject, type SerializedStyles } from '@emotion/react';
@@ -226,3 +227,25 @@ export function cva<V extends CvaVariants>(config: CvaConfig<V>): CvaRecipe<V> {
 
   return recipe;
 }
+
+// Matches vanilla-extract's RecipeVariants and PandaCSS's RecipeVariantProps
+export type RecipeVariants<R> = VariantPropsOf<R>;
+export type RecipeVariantProps<R> = VariantPropsOf<R>;
+
+// Extract slot union type from a recipe's raw() return type
+export type RecipeSlots<R> = R extends { raw: (props?: any) => Record<infer S extends string, any> }
+  ? S
+  : never;
+
+// Extract the raw style map type from a recipe
+export type RecipeStyles<R> = R extends { raw: (props?: any) => infer M } ? M : never;
+
+// Generic extraction that accepts either a recipe runtime or a factory returning a recipe runtime
+type RuntimeFrom<T> = T extends (...args: any[]) => infer R
+  ? R extends (...args: any[]) => any
+    ? R
+    : T
+  : never;
+
+// Single entry-point alias (usage: RecipeVariant<typeof tabRecipe>)
+export type RecipeVariant<T> = VariantPropsOf<RuntimeFrom<T>>;

From aa937aa523a18e45e995c522a063ede17ae74982 Mon Sep 17 00:00:00 2001
From: whdgur5717 <whdgur5717@gmail.com>
Date: Fri, 21 Nov 2025 21:31:51 +0900
Subject: [PATCH 05/15] =?UTF-8?q?feat:=20styleContext=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jds/src/components/Tab/styleContext.tsx   | 202 ++++++++++++++++++
 1 file changed, 202 insertions(+)
 create mode 100644 packages/jds/src/components/Tab/styleContext.tsx

diff --git a/packages/jds/src/components/Tab/styleContext.tsx b/packages/jds/src/components/Tab/styleContext.tsx
new file mode 100644
index 000000000..ab9a7f69d
--- /dev/null
+++ b/packages/jds/src/components/Tab/styleContext.tsx
@@ -0,0 +1,202 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Interpolation, Theme } from '@emotion/react';
+import { useTheme } from '@emotion/react';
+import { createContext, useContext, forwardRef } from 'react';
+import { useMemo } from 'react';
+import type { ElementType, ComponentPropsWithoutRef, ElementRef, ComponentType } from 'react';
+
+import type { RecipeVariant as RecipeVariantProps } from './sva';
+
+type EmotionStyle = Interpolation<Theme>;
+
+/**
+ * sva runtime:
+ *   recipe(variants?) => { root, list, trigger, ... }
+ *   각 값은 Emotion css prop에 넣을 수 있는 Interpolation<Theme>
+ */
+// Public helper type aliases (Panda-like)
+export type Assign<A, B> = Omit<A, keyof B> & B;
+export type JsxStyleProps = { css?: EmotionStyle };
+export type JsxHTMLProps<Base, Extra = {}> = Assign<Base, Extra>;
+export type UnstyledProps = { unstyled?: boolean };
+export type ComponentProps<T extends ElementType> = ComponentPropsWithoutRef<T>;
+export type JsxFactoryOptions<P = {}> = { defaultProps?: Partial<P> };
+
+// Slot recipe
+type AnySlotRecipeRuntime = (props?: any) => Record<string, EmotionStyle>;
+type AnySlotRecipeFactory = (...args: any[]) => AnySlotRecipeRuntime;
+type AnyRecipeInput = AnySlotRecipeRuntime | AnySlotRecipeFactory;
+
+type RuntimeOf<T> = T extends (...args: any[]) => infer R
+  ? R extends (...a: any[]) => any
+    ? R
+    : T
+  : never;
+type SlotsMapOf<T> = ReturnType<RuntimeOf<T>>;
+type SlotsOf<T> = keyof SlotsMapOf<T> & string;
+type VariantsOf<T> = RecipeVariantProps<RuntimeOf<T>>;
+
+export interface StyleContext<R extends AnyRecipeInput> {
+  withRootProvider: <T extends ElementType>(
+    Component: T,
+    options?: JsxFactoryOptions<ComponentProps<T>>,
+  ) => ComponentType<ComponentProps<T> & UnstyledProps & VariantsOf<R>>;
+  withProvider: <T extends ElementType>(
+    Component: T,
+    slot: SlotsOf<R>,
+    options?: JsxFactoryOptions<ComponentProps<T>>,
+  ) => ComponentType<
+    JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<VariantsOf<R>, JsxStyleProps>>
+  >;
+  withContext: <T extends ElementType>(
+    Component: T,
+    slot: SlotsOf<R>,
+    options?: JsxFactoryOptions<ComponentProps<T>>,
+  ) => ComponentType<JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>>;
+  useSlotStyles: () => SlotsMapOf<R>;
+  useSlotStyle: (slot: SlotsOf<R>) => EmotionStyle | undefined;
+}
+
+const getDisplayName = (Component: any) => Component?.displayName || Component?.name || 'Component';
+
+export function createStyleContext<R extends AnyRecipeInput>(recipeOrFactory: R): StyleContext<R> {
+  type Slots = SlotsOf<R>;
+  type Variants = VariantsOf<R>;
+  type StylesMap = SlotsMapOf<R>; // { root: EmotionStyle; list: EmotionStyle; ... }
+
+  const StylesContext = createContext<StylesMap | null>(null);
+
+  /* ---------- hooks ---------- */
+
+  const useSlotStyles = (): StylesMap => {
+    const value = useContext(StylesContext);
+    if (!value) {
+      throw new Error('StyleContext Provider 밖에서 useSlotStyles를 호출했습니다.');
+    }
+    return value;
+  };
+
+  const useSlotStyle = (slot: Slots): EmotionStyle | undefined => {
+    const styles = useSlotStyles();
+    return styles[slot];
+  };
+
+  /* ---------- Root Provider ---------- */
+
+  function withRootProvider<T extends ElementType>(
+    Component: T,
+    // _options?: JsxFactoryOptions<ComponentProps<T>>,
+  ) {
+    type BaseProps = ComponentProps<T>;
+    type Props = BaseProps & Variants & UnstyledProps & JsxStyleProps;
+
+    const Wrapped = forwardRef<ElementRef<T>, Props>((props, ref) => {
+      // recipe factory 또는 runtime을 처리합니다
+      const theme = useTheme();
+      const runtime = useMemo(() => {
+        try {
+          const maybe = (recipeOrFactory as AnySlotRecipeFactory)(theme);
+          return typeof maybe === 'function' ? maybe : (recipeOrFactory as AnySlotRecipeRuntime);
+        } catch {
+          return recipeOrFactory as AnySlotRecipeRuntime;
+        }
+      }, [theme]);
+
+      // variant props는 전부 runtime으로 넘깁니다
+      const styles = runtime(props as Variants) as StylesMap;
+      const rootStyle = props.unstyled ? undefined : styles.root;
+
+      return (
+        <StylesContext.Provider value={styles}>
+          <Component ref={ref} {...(props as any)} css={[rootStyle, (props as any).css]} />
+        </StylesContext.Provider>
+      );
+    });
+
+    Wrapped.displayName = `StyleContextRoot(${getDisplayName(Component)})`;
+    return Wrapped as unknown as ComponentType<ComponentProps<T> & UnstyledProps & Variants>;
+  }
+
+  /* ---------- Provider (slot + Provider 둘 다) ---------- */
+
+  function withProvider<T extends ElementType>(
+    Component: T,
+    slot: Slots,
+    // _options?: JsxFactoryOptions<ComponentProps<T>>,
+  ) {
+    type BaseProps = ComponentProps<T>;
+    type Props = BaseProps & Variants & UnstyledProps & JsxStyleProps;
+
+    const Wrapped = forwardRef<ElementRef<T>, Props>((props, ref) => {
+      const theme = useTheme();
+      const runtime = useMemo(() => {
+        try {
+          const maybe = (recipeOrFactory as AnySlotRecipeFactory)(theme);
+          return typeof maybe === 'function' ? maybe : (recipeOrFactory as AnySlotRecipeRuntime);
+        } catch {
+          return recipeOrFactory as AnySlotRecipeRuntime;
+        }
+      }, [theme]);
+
+      const styles = runtime(props as Variants) as StylesMap;
+      const slotStyle = props.unstyled ? undefined : styles[slot];
+
+      return (
+        <StylesContext.Provider value={styles}>
+          <Component ref={ref} {...(props as any)} css={[slotStyle, (props as any).css]} />
+        </StylesContext.Provider>
+      );
+    });
+
+    Wrapped.displayName = `StyleContextProvider(${getDisplayName(Component)}:${slot})`;
+    return Wrapped as unknown as ComponentType<
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<Variants, JsxStyleProps>>
+    >;
+  }
+
+  /* ---------- Consumer (Context만 사용하는 slot) ---------- */
+
+  function withContext<T extends ElementType>(
+    Component: T,
+    slot: Slots,
+    // _options?: JsxFactoryOptions<ComponentProps<T>>,
+  ) {
+    type BaseProps = ComponentProps<T>;
+    type Props = BaseProps & UnstyledProps & JsxStyleProps;
+
+    const Wrapped = forwardRef<ElementRef<T>, Props>((props, ref) => {
+      const styles = useContext(StylesContext);
+
+      if (!styles) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error(
+            `StyleContext: "${getDisplayName(
+              Component,
+            )}"가 Provider 밖에서 렌더링되었습니다. slot="${slot}".`,
+          );
+        }
+        // Provider 없으면 그냥 원래 css 그대로 내려보냅니다
+        return <Component ref={ref} {...(props as any)} css={(props as any).css} />;
+      }
+
+      const slotStyle = props.unstyled ? undefined : styles[slot];
+
+      return <Component ref={ref} {...(props as any)} css={[slotStyle, (props as any).css]} />;
+    });
+
+    Wrapped.displayName = `StyleContextConsumer(${getDisplayName(Component)}:${slot})`;
+    return Wrapped as unknown as ComponentType<
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
+    >;
+  }
+
+  return {
+    withRootProvider,
+    withProvider,
+    withContext,
+    useSlotStyles,
+    useSlotStyle,
+  } as unknown as StyleContext<R>;
+}

From 563b6934ed119ec0f755225821267b5dc33b3e01 Mon Sep 17 00:00:00 2001
From: whdgur5717 <whdgur5717@gmail.com>
Date: Fri, 21 Nov 2025 21:32:36 +0900
Subject: [PATCH 06/15] =?UTF-8?q?feat:=20sva=EB=A5=BC=20=ED=86=B5=ED=95=B4?=
 =?UTF-8?q?=20tab=20style=20=EC=84=A0=EC=96=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/components/Tab/tab.style.ts | 139 +++++++++++++++++++
 1 file changed, 139 insertions(+)
 create mode 100644 packages/jds/src/components/Tab/tab.style.ts

diff --git a/packages/jds/src/components/Tab/tab.style.ts b/packages/jds/src/components/Tab/tab.style.ts
new file mode 100644
index 000000000..1d945cc44
--- /dev/null
+++ b/packages/jds/src/components/Tab/tab.style.ts
@@ -0,0 +1,139 @@
+import { sva } from './sva';
+import { theme as t } from '../../tokens/theme';
+
+// TODO: 추후 공통화하기
+const interactiveSelector =
+  '&:not(:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]))';
+const disabledSelector = '&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])';
+
+export const tabRecipe = sva({
+  slots: ['root', 'list', 'trigger', 'content', 'indicator'] as const,
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+    },
+    list: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: t.scheme.semantic.spacing[0],
+      position: 'relative',
+    },
+    trigger: {
+      position: 'relative',
+      isolation: 'isolate',
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: t.scheme.semantic.spacing[4],
+      color: t.color.semantic.object.alternative,
+      cursor: 'pointer',
+      '&[data-state="active"]': {
+        color: t.color.semantic.object.bolder,
+      },
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        inset: 0,
+        borderRadius: 'inherit',
+        backgroundColor: t.color.semantic.interaction.assistive,
+        opacity: 0,
+        transition: `opacity ${t.environment.semantic.duration[100]} ${t.environment.semantic.motion.fluent}
+          `,
+        zIndex: -1,
+      },
+      [`${interactiveSelector}:hover::after`]: {
+        opacity: 0.08,
+      },
+      [`${interactiveSelector}:active::after`]: {
+        opacity: 0.12,
+      },
+      [`${interactiveSelector}[data-state="active"]::after`]: {
+        opacity: 0.12,
+      },
+      '&:focus': {
+        outline: 'none',
+        boxShadow: 'none',
+      },
+      '&:focus-visible': {
+        outline: 'none',
+        boxShadow: `inset 0 0 0 ${t.scheme.semantic.strokeWeight[3]} ${t.color.semantic.interaction.focus}`,
+        opacity: t.scheme.semantic.opacity[100],
+      },
+      [disabledSelector]: {
+        cursor: 'not-allowed',
+      },
+      [`${disabledSelector}::after`]: {
+        opacity: 0.05,
+      },
+    },
+    content: {},
+    indicator: {
+      position: 'absolute',
+      borderWidth: 0,
+      borderBottomWidth: t.scheme.semantic.strokeWeight[2],
+      borderBottomStyle: 'solid',
+      borderBottomColor: t.color.semantic.stroke.bold,
+      zIndex: 0,
+    },
+  },
+  variants: {
+    variant: {
+      header: {
+        list: {
+          borderRadius: t.scheme.semantic.radius[0],
+          borderBottomWidth: t.scheme.semantic.strokeWeight[1],
+          borderBottomStyle: 'solid',
+          borderBottomColor: t.color.semantic.stroke.assistive,
+          opacity: t.scheme.semantic.opacity[100],
+        },
+        trigger: {
+          padding: `${t.scheme.semantic.spacing[6]} ${t.scheme.semantic.spacing[12]}`,
+          minHeight: '39px',
+        },
+      },
+      content: {
+        list: {
+          gap: t.scheme.semantic.spacing[8],
+        },
+        trigger: {
+          padding: `${t.scheme.semantic.spacing[8]} ${t.scheme.semantic.spacing[12]}`,
+          border: '1px solid',
+          borderColor: t.color.semantic.stroke.alpha.subtle,
+          borderRadius: t.scheme.semantic.radius[6],
+          minHeight: '35px',
+        },
+        indicator: {
+          display: 'none',
+        },
+      },
+    },
+    isItemStretched: {
+      false: {
+        list: {
+          width: 'auto',
+          justifyContent: 'flex-start',
+        },
+        trigger: {
+          flex: 'initial',
+        },
+      },
+      true: {
+        list: {
+          width: '100%',
+          alignItems: 'stretch',
+          justifyContent: 'space-around',
+        },
+        trigger: {
+          flex: 1,
+          width: '100%',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'header',
+    isItemStretched: 'false',
+  },
+});

From b27c2bf268aa146a84941cd72134579bcadcf356 Mon Sep 17 00:00:00 2001
From: whdgur5717 <whdgur5717@gmail.com>
Date: Fri, 21 Nov 2025 21:32:48 +0900
Subject: [PATCH 07/15] =?UTF-8?q?feat:=20Tab=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/components/Tab/tab.tsx | 92 +++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 packages/jds/src/components/Tab/tab.tsx

diff --git a/packages/jds/src/components/Tab/tab.tsx b/packages/jds/src/components/Tab/tab.tsx
new file mode 100644
index 000000000..41b1710e2
--- /dev/null
+++ b/packages/jds/src/components/Tab/tab.tsx
@@ -0,0 +1,92 @@
+import { Tabs as TabPrimitive } from 'radix-ui';
+import type { ComponentPropsWithoutRef, ElementRef } from 'react';
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+
+import { createStyleContext } from './styleContext';
+import { tabRecipe } from './tab.style';
+import { mergeRefs } from '../../hooks/mergeRefs';
+
+const { withRootProvider, withContext } = createStyleContext(tabRecipe);
+export const TabIndicator = withContext('div', 'indicator');
+
+export const Tab = withRootProvider(TabPrimitive.Root);
+
+type TabListProps = ComponentPropsWithoutRef<typeof TabPrimitive.List>;
+
+const ListBase = forwardRef<ElementRef<typeof TabPrimitive.List>, TabListProps>(
+  ({ children, ...rest }, ref) => {
+    const listRef = useRef<ElementRef<typeof TabPrimitive.List> | null>(null);
+
+    const [indicatorStyle, setIndicatorStyle] = useState({
+      left: 0,
+      width: 0,
+      bottom: 0,
+      height: 0,
+    });
+
+    const mergedRef = mergeRefs(listRef, ref);
+
+    //선택된 item([data-state="active"]')에 따라 indicator를 움직이는 로직
+    const updateIndicator = useCallback(() => {
+      if (!listRef.current) return;
+
+      const activeTab = listRef.current.querySelector<HTMLElement>('[data-state="active"]');
+      if (!activeTab) return;
+
+      const activeRect = activeTab.getBoundingClientRect();
+      const listEl = listRef.current;
+      const listRect = listEl.getBoundingClientRect();
+
+      requestAnimationFrame(() => {
+        setIndicatorStyle({
+          left: activeRect.left - listRect.left + listEl.scrollLeft,
+          width: activeRect.width,
+          bottom: 0,
+          height: 0,
+        });
+      });
+    }, []);
+
+    useEffect(() => {
+      const el = listRef.current;
+      if (!el) return;
+
+      const t = window.setTimeout(updateIndicator, 0);
+      window.addEventListener('resize', updateIndicator);
+
+      const observer = new MutationObserver(updateIndicator);
+      observer.observe(el, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+      });
+
+      const handleScroll = () => updateIndicator();
+      el.addEventListener('scroll', handleScroll, { passive: true });
+
+      return () => {
+        clearTimeout(t);
+        window.removeEventListener('resize', updateIndicator);
+        observer.disconnect();
+        el.removeEventListener('scroll', handleScroll);
+      };
+    }, [updateIndicator]);
+
+    return (
+      <TabPrimitive.List ref={mergedRef} {...rest}>
+        {children}
+        <TabIndicator style={indicatorStyle} />
+      </TabPrimitive.List>
+    );
+  },
+);
+ListBase.displayName = 'TabListBase';
+
+export const TabList = withContext(ListBase, 'list');
+TabList.displayName = TabPrimitive.List.displayName;
+
+export const TabTrigger = withContext(TabPrimitive.Trigger, 'trigger');
+TabTrigger.displayName = TabPrimitive.Trigger.displayName;
+
+export const TabContent = withContext(TabPrimitive.Content, 'content');
+TabContent.displayName = TabPrimitive.Content.displayName;

From 5664aaa31c1b37f274fe0fe22c06c2d12894063c Mon Sep 17 00:00:00 2001
From: whdgur5717 <whdgur5717@gmail.com>
Date: Fri, 21 Nov 2025 21:33:35 +0900
Subject: [PATCH 08/15] =?UTF-8?q?feat:=20Tab=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jds/src/components/Tab/tab.stories.tsx    | 361 ++++++++++++++++++
 1 file changed, 361 insertions(+)
 create mode 100644 packages/jds/src/components/Tab/tab.stories.tsx

diff --git a/packages/jds/src/components/Tab/tab.stories.tsx b/packages/jds/src/components/Tab/tab.stories.tsx
new file mode 100644
index 000000000..bcec2d24a
--- /dev/null
+++ b/packages/jds/src/components/Tab/tab.stories.tsx
@@ -0,0 +1,361 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Tab, TabContent, TabList, TabTrigger } from './tab';
+
+const tabItems = [
+  {
+    value: 'overview',
+    label: '개요',
+    content: '제품 소개와 핵심 정보를 보여주는 콘텐츠입니다.',
+  },
+  {
+    value: 'details',
+    label: '세부 정보',
+    content: '스펙, 정책 등 상세한 정보를 확인할 수 있습니다.',
+  },
+  {
+    value: 'reviews',
+    label: '리뷰',
+    content: '사용자 후기와 피드백을 모아 보여줍니다.',
+  },
+];
+//TODO: storybook 9버전 업데이트 이후 포맷변경
+const meta = {
+  title: 'Components/Tab',
+  component: Tab,
+  subcomponents: { TabList, TabTrigger, TabContent },
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: [
+          '구성(슬롯)과 역할',
+          '- Tab(Root): 탭의 루트 컨테이너. Radix UI Tabs Root와 동일한 props를 사용합니다. 제어/비제어 모드 모두 지원하며, value | defaultValue | onValueChange를 그대로 전달합니다.',
+          '- TabList(List): 트리거들을 감싸는 리스트 영역(aria-role=tablist). 키보드 내비게이션과 접근성 동작은 Radix UI와 동일합니다.',
+          '- TabTrigger(Trigger): 각 탭 버튼 요소(aria-role=tab). 활성화할 탭의 값을 value로 지정합니다. 포커스/선택 상태 로직은 Radix UI와 동일합니다.',
+          '- TabContent(Content): 각 탭의 콘텐츠 영역(aria-role=tabpanel). 연결할 트리거와 동일한 value를 지정합니다.',
+          '',
+          '스타일 변형(Variants)',
+          "- variant: 'header' | 'content' (스타일만 변경합니다. 동작/접근성은 동일)",
+          "- isItemStretched: 'true' | 'false' (트리거를 리스트 너비에 맞춰 균등 분할)",
+          '',
+          '제어/비제어: value + onValueChange(제어) 또는 defaultValue(비제어)를 동일하게 지원합니다.',
+          '',
+          '중요: 모든 props와 동작은 Radix UI Tabs의 각 Primitive와 완전히 동일합니다. (예: Tab → Root, TabList → List, TabTrigger → Trigger, TabContent → Content)',
+          '',
+          'Root에 고정 width가 필요합니다.\n',
+          'TabContent에는 스타일이 적용되어 있지 않습니다. 요구사항을 보고 적절한 스타일을 추가해야 합니다.',
+        ].join('\n'),
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['header', 'content'],
+      description: '시각적 레시피 전환만 담당합니다. 기능/접근성은 Radix UI Tabs와 동일합니다.',
+    },
+    isItemStretched: {
+      control: 'radio',
+      options: ['false', 'true'],
+      description: '트리거를 리스트 너비에 맞춰 균등 분할할지 여부(스타일 전용).',
+    },
+  },
+  args: {
+    variant: 'header',
+    isItemStretched: 'false',
+  },
+} satisfies Meta<typeof Tab>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '기본 사용 예시. Radix UI Tabs와 동일하게 Tab에 value/defaultValue, onValueChange를 전달하고, TabTrigger/TabContent는 동일한 value를 사용합니다.',
+      },
+    },
+  },
+  render: args => (
+    <Tab defaultValue={tabItems[0].value} {...args} css={{ width: 360 }}>
+      <TabList aria-label='제품 정보'>
+        {tabItems.map(item => (
+          <TabTrigger key={item.value} value={item.value} disabled={item.value === 'reviews'}>
+            {item.label}
+          </TabTrigger>
+        ))}
+      </TabList>
+
+      {tabItems.map(item => (
+        <TabContent key={item.value} value={item.value}>
+          {item.content}
+        </TabContent>
+      ))}
+    </Tab>
+  ),
+};
+
+export const Stretched: Story = {
+  args: {
+    isItemStretched: 'true',
+  },
+  parameters: {
+    docs: {
+      description: { story: '리스트 너비를 트리거가 균등 분할하도록 스타일만 변경합니다.' },
+    },
+  },
+  render: args => (
+    <Tab defaultValue={tabItems[0].value} {...args} css={{ width: 360 }}>
+      <TabList aria-label='제품 정보'>
+        {tabItems.map(item => (
+          <TabTrigger key={item.value} value={item.value}>
+            {item.label}
+          </TabTrigger>
+        ))}
+      </TabList>
+
+      {tabItems.map(item => (
+        <TabContent key={item.value} value={item.value}>
+          {item.content}
+        </TabContent>
+      ))}
+    </Tab>
+  ),
+};
+
+export const ContentVariant: Story = {
+  args: {
+    variant: 'content',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'content 변형은 리스트 하단 보더와 인디케이터 없이 독립된 카드형 트리거 스타일을 제공합니다. Radix UI Tabs API는 동일합니다.',
+      },
+    },
+  },
+  render: args => (
+    <Tab defaultValue={tabItems[0].value} {...args} css={{ width: 360 }}>
+      <TabList aria-label='제품 정보'>
+        {tabItems.map(item => (
+          <TabTrigger key={item.value} value={item.value}>
+            {item.label}
+          </TabTrigger>
+        ))}
+      </TabList>
+
+      {tabItems.map(item => (
+        <TabContent key={item.value} value={item.value}>
+          <div style={{ padding: '12px 8px' }}>{item.content}</div>
+        </TabContent>
+      ))}
+    </Tab>
+  ),
+};
+
+const overflowItems = Array.from({ length: 10 }).map((_, idx) => ({
+  value: `tab-${idx}`,
+  label: `섹션 ${idx + 1}`,
+  content: `콘텐츠 ${idx + 1}번 영역입니다. 길이를 늘려서 스크롤 동작을 확인합니다.`,
+}));
+
+export const OverflowScrollable: Story = {
+  args: {
+    isItemStretched: 'false',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '리스트가 수평 스크롤 가능한 경우. 키보드 포커스/인디케이터가 스크롤과 동기화되며 Radix Tabs API와 동일하게 제어/비제어 모드를 지원합니다.',
+      },
+    },
+  },
+  render: args => (
+    <Tab defaultValue={overflowItems[0].value} {...args} css={{ width: 320 }}>
+      <TabList
+        aria-label='스크롤 가능한 탭'
+        css={{
+          overflowX: 'auto',
+          whiteSpace: 'nowrap',
+          paddingInline: '4px',
+          msOverflowStyle: 'none',
+          scrollbarWidth: 'none',
+          '&::-webkit-scrollbar': {
+            display: 'none',
+          },
+        }}
+      >
+        {overflowItems.map(item => (
+          <TabTrigger key={item.value} value={item.value} css={{ borderRadius: 6 }}>
+            {item.label}
+          </TabTrigger>
+        ))}
+      </TabList>
+
+      {overflowItems.map(item => (
+        <TabContent key={item.value} value={item.value}>
+          <div style={{ padding: '12px 8px' }}>{item.content}</div>
+        </TabContent>
+      ))}
+    </Tab>
+  ),
+};
+
+export const Customize: Story = {
+  args: {
+    variant: 'header',
+    isItemStretched: 'false',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'css prop으로 스타일을 오버라이드할 수 있습니다',
+      },
+    },
+  },
+  render: args => (
+    <Tab {...args} css={{ width: 420 }}>
+      <TabList
+        aria-label='커스텀 탭'
+        css={{
+          background: '#f7f7ff',
+          boxShadow: 'inset 0 -1px rgba(0,0,0,0.08)',
+          paddingInline: 6,
+        }}
+      >
+        {tabItems.map(item => (
+          <TabTrigger
+            key={item.value}
+            value={item.value}
+            css={{ borderRadius: 6, padding: '10px 16px', fontWeight: 600, outlineOffset: -3 }}
+          >
+            {item.label}
+          </TabTrigger>
+        ))}
+      </TabList>
+
+      {tabItems.map(item => (
+        <TabContent key={item.value} value={item.value}>
+          <div style={{ padding: '12px 8px' }}>{item.content}</div>
+        </TabContent>
+      ))}
+    </Tab>
+  ),
+};
+
+export const Controlled: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '제어(Controlled) 모드 예시입니다. value와 onValueChange를 사용하여 외부 상태로 활성 탭을 관리합니다. Radix UI Tabs와 동일한 방식입니다.',
+      },
+    },
+  },
+  render: args => {
+    const [value, setValue] = useState(tabItems[0].value);
+    return (
+      <Tab value={value} onValueChange={setValue} {...args} css={{ width: 360 }}>
+        <TabList aria-label='제어 탭'>
+          {tabItems.map(item => (
+            <TabTrigger key={item.value} value={item.value}>
+              {item.label}
+            </TabTrigger>
+          ))}
+        </TabList>
+        {tabItems.map(item => (
+          <TabContent key={item.value} value={item.value}>
+            {item.content}
+          </TabContent>
+        ))}
+      </Tab>
+    );
+  },
+};
+
+export const Uncontrolled: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '비제어(Uncontrolled) 모드 예시입니다. defaultValue만 지정하고 내부 상태로 활성 탭을 관리합니다. Radix UI Tabs와 동일한 방식입니다.',
+      },
+    },
+  },
+  render: args => (
+    <Tab defaultValue={tabItems[0].value} {...args} css={{ width: 360 }}>
+      <TabList aria-label='비제어 탭'>
+        {tabItems.map(item => (
+          <TabTrigger key={item.value} value={item.value}>
+            {item.label}
+          </TabTrigger>
+        ))}
+      </TabList>
+      {tabItems.map(item => (
+        <TabContent key={item.value} value={item.value}>
+          {item.content}
+        </TabContent>
+      ))}
+    </Tab>
+  ),
+};
+
+export const ControlledVsUncontrolled: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: '한 화면에서 제어/비제어 사용법을 함께 비교합니다.',
+      },
+    },
+  },
+  render: args => {
+    const [value, setValue] = useState(tabItems[0].value);
+    return (
+      <div style={{ display: 'grid', gap: 24 }}>
+        <section>
+          <h4 style={{ margin: '0 0 8px' }}>제어(Controlled)</h4>
+          <Tab value={value} onValueChange={setValue} {...args} css={{ width: 360 }}>
+            <TabList aria-label='제어 탭'>
+              {tabItems.map(item => (
+                <TabTrigger key={item.value} value={item.value}>
+                  {item.label}
+                </TabTrigger>
+              ))}
+            </TabList>
+            {tabItems.map(item => (
+              <TabContent key={item.value} value={item.value}>
+                {item.content}
+              </TabContent>
+            ))}
+          </Tab>
+        </section>
+
+        <section>
+          <h4 style={{ margin: '0 0 8px' }}>비제어(Uncontrolled)</h4>
+          <Tab defaultValue={tabItems[0].value} {...args} css={{ width: 360 }}>
+            <TabList aria-label='비제어 탭'>
+              {tabItems.map(item => (
+                <TabTrigger key={item.value} value={item.value}>
+                  {item.label}
+                </TabTrigger>
+              ))}
+            </TabList>
+            {tabItems.map(item => (
+              <TabContent key={item.value} value={item.value}>
+                {item.content}
+              </TabContent>
+            ))}
+          </Tab>
+        </section>
+      </div>
+    );
+  },
+};

From 1dfae1bf468b45291075df1a34d2329c5c33aabe Mon Sep 17 00:00:00 2001
From: whdgur5717 <whdgur5717@gmail.com>
Date: Fri, 21 Nov 2025 21:46:08 +0900
Subject: [PATCH 09/15] =?UTF-8?q?chore:=20storybook=20reset=20style=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20-=20=EC=B6=94=ED=9B=84=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EC=98=88=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/.storybook/preview.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/jds/.storybook/preview.tsx b/packages/jds/.storybook/preview.tsx
index 4738622aa..482aabc12 100644
--- a/packages/jds/.storybook/preview.tsx
+++ b/packages/jds/.storybook/preview.tsx
@@ -1,8 +1,8 @@
 import type { Preview } from '@storybook/react';
-import { ThemeProvider } from '@emotion/react';
-import { Global } from '@emotion/react';
-import { globalStyles } from '../src/tokens/globalStyles';
+import { Global, ThemeProvider } from '@emotion/react';
 import { theme } from '../src/tokens/theme';
+import { globalStyles } from '../src/tokens/globalStyles';
+import { GlobalStyles } from '../src/style/globalStyle';
 
 const preview: Preview = {
   parameters: {
@@ -41,6 +41,7 @@ const preview: Preview = {
       return (
         <ThemeProvider theme={theme}>
           <Global styles={globalStyles} />
+          <GlobalStyles />
           <div data-theme={context.globals.theme}>
             <Story />
           </div>

From c1ac3b550fba22aca99bb76c0ed1aacc123f647c Mon Sep 17 00:00:00 2001
From: whdgur5717 <whdgur5717@gmail.com>
Date: Mon, 24 Nov 2025 19:50:40 +0900
Subject: [PATCH 10/15] =?UTF-8?q?fix:=20styleContext=EC=97=90=EC=84=9C=20r?=
 =?UTF-8?q?ecipeOrFactory=20=EB=B3=80=EC=88=98=EB=AA=85=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EB=B0=8F=20=EC=98=88=EC=99=B8=20=EC=B2=98=EB=A6=AC?=
 =?UTF-8?q?=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/components/Tab/styleContext.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/jds/src/components/Tab/styleContext.tsx b/packages/jds/src/components/Tab/styleContext.tsx
index ab9a7f69d..28a641827 100644
--- a/packages/jds/src/components/Tab/styleContext.tsx
+++ b/packages/jds/src/components/Tab/styleContext.tsx
@@ -97,8 +97,10 @@ export function createStyleContext<R extends AnyRecipeInput>(recipeOrFactory: R)
       const theme = useTheme();
       const runtime = useMemo(() => {
         try {
-          const maybe = (recipeOrFactory as AnySlotRecipeFactory)(theme);
-          return typeof maybe === 'function' ? maybe : (recipeOrFactory as AnySlotRecipeRuntime);
+          const factoryRuntime = (recipeOrFactory as AnySlotRecipeFactory)(theme);
+          return typeof factoryRuntime === 'function'
+            ? factoryRuntime
+            : (recipeOrFactory as AnySlotRecipeRuntime);
         } catch {
           return recipeOrFactory as AnySlotRecipeRuntime;
         }

From 54b84adafc160feb000b49cad25dbf3c546d9fdc Mon Sep 17 00:00:00 2001
From: whdgur5717 <whdgur5717@gmail.com>
Date: Mon, 24 Nov 2025 20:00:52 +0900
Subject: [PATCH 11/15] =?UTF-8?q?feat:=20cva/sva=20=ED=83=80=EC=9E=85=20?=
 =?UTF-8?q?=EB=B0=8F=20=ED=95=A8=EC=88=98=20=EA=B0=9C=EC=84=A0=20-=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=ED=97=AC=ED=8D=BC=20=ED=95=A8=EC=88=98?=
 =?UTF-8?q?=EB=A1=9C=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/components/Tab/sva.ts | 639 ++++++++++++++++---------
 1 file changed, 416 insertions(+), 223 deletions(-)

diff --git a/packages/jds/src/components/Tab/sva.ts b/packages/jds/src/components/Tab/sva.ts
index 6c0bc54e2..a4b5b4da7 100644
--- a/packages/jds/src/components/Tab/sva.ts
+++ b/packages/jds/src/components/Tab/sva.ts
@@ -1,251 +1,444 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/naming-convention */
-// emotion-variants.ts
-import { css, type CSSObject, type SerializedStyles } from '@emotion/react';
-
-/* ----------------- 공통 타입 ----------------- */
-
-type SlotName = string;
-
-// variants shape 공통 베이스
-export type VariantsConfigBase = {
-  [VariantKey: string]: {
-    [VariantValue: string]: unknown;
+import type { CSSObject } from '@emotion/react';
+
+/**
+ * 'true' | 'false' → boolean으로 매핑
+ * 그 외는 그대로 유지
+ */
+type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;
+
+/**
+ * A 또는 A 배열
+ */
+type OneOrMore<T> = T | readonly T[];
+
+/* -----------------------------------------------------------------------------
+ * 공통: variants 모양(스타일 타입 상관없이)
+ * -----------------------------------------------------------------------------*/
+
+/**
+ *
+ *   { [variantName]: { [variantValue]: unknown } }
+ *
+ */
+type VariantRecordLike = {
+  [VariantName in string]: {
+    [VariantValue in string]: unknown;
   };
 };
 
-export type VariantProps<V extends VariantsConfigBase> = {
-  [K in keyof V]?: keyof V[K] & string;
+/* -----------------------------------------------------------------------------
+ * cva(단일 컴포넌트)용 타입
+ * -----------------------------------------------------------------------------*/
+
+/**
+ * cva 스타일 variants:
+ *
+ * {
+ *   size:   { sm: CSSObject; md: CSSObject }
+ *   tone:   { primary: CSSObject; ghost: CSSObject }
+ * }
+ */
+export type RecipeVariantRecord = {
+  [VariantName in string]: {
+    [VariantValue in string]: CSSObject;
+  };
 };
 
-export type VariantPropsOf<R> = R extends (props?: infer P) => unknown ? NonNullable<P> : never;
-
-/* ----------------- SVA (multi-slot) ----------------- */
+/**
+ * variants 정의 → 컴포넌트에서 받는 variant props 타입
+ *
+ * TVariants = {
+ *   variant: { header: ..., content: ... }
+ *   isItemStretched: { false: ..., true: ... }
+ * }
+ *
+ * => {
+ *   variant?: 'header' | 'content';
+ *   isItemStretched?: boolean;
+ * }
+ */
+export type RecipeSelection<TVariants extends VariantRecordLike> = {
+  [K in keyof TVariants]?: StringToBoolean<keyof TVariants[K]>;
+};
 
-export type SlotStyles<S extends readonly SlotName[]> = {
-  [K in S[number]]?: CSSObject;
+/**
+ * compoundVariants 에서 사용하는 selection 타입
+ *
+ * TVariants = {
+ *   size: { sm: ..., md: ... }
+ *   tone: { primary: ..., ghost: ... }
+ * }
+ *
+ * => {
+ *   size?: 'sm' | readonly ('sm' | 'md')[];
+ *   tone?: 'primary' | readonly 'primary'[];
+ * }
+ */
+export type RecipeCompoundSelection<TVariants extends VariantRecordLike> = {
+  [K in keyof TVariants]?: OneOrMore<StringToBoolean<keyof TVariants[K]>>;
 };
 
-export type SvaVariants<S extends readonly SlotName[]> = {
-  [VariantKey: string]: {
-    [VariantValue: string]: SlotStyles<S>;
+/**
+ * compoundVariants 한 항목
+ *
+ * {
+ *   size?: 'sm' | ['sm', 'md'];
+ *   tone?: 'primary';
+ *   css: CSSObject;
+ * }
+ */
+export type RecipeCompoundVariant<TVariants extends RecipeVariantRecord> =
+  RecipeCompoundSelection<TVariants> & {
+    css: CSSObject;
   };
-};
 
-export interface SvaConfig<S extends readonly SlotName[], V extends SvaVariants<S>> {
-  slots: S;
-  base?: SlotStyles<S>;
-  variants: V;
-  defaultVariants?: Partial<VariantProps<V>>;
-  compoundVariants?: Array<{
-    variants: Partial<VariantProps<V>>;
-    style: SlotStyles<S>;
-  }>;
+/**
+ * cva용 recipe 정의 타입
+ *
+ * 예시 (정확한 형태):
+ * ```ts
+ * const buttonRecipe = cva({
+ *   base: { display: 'inline-flex' },
+ *   variants: {
+ *     size: {
+ *       sm: { fontSize: 12 },
+ *       md: { fontSize: 14 },
+ *     },
+ *     tone: {
+ *       primary: { color: 'royalblue' },
+ *       ghost: { color: 'gray' },
+ *     },
+ *   },
+ *   defaultVariants: { size: 'sm', tone: 'primary' },
+ *   compoundVariants: [
+ *     { size: 'md', tone: 'primary', css: { fontWeight: 600 } },
+ *   ],
+ * });
+ * // RecipeVariantProps<typeof buttonRecipe>
+ * // => { size?: 'sm' | 'md'; tone?: 'primary' | 'ghost' }
+ * ```
+ */
+export interface RecipeDefinition<TVariants extends RecipeVariantRecord> {
+  base: CSSObject;
+  variants: TVariants;
+  defaultVariants?: RecipeSelection<TVariants>;
+  //아직 compountVariants는 사용안함
+  compoundVariants?: readonly RecipeCompoundVariant<TVariants>[];
 }
 
-export interface SvaRecipe<S extends readonly SlotName[], V extends SvaVariants<S>> {
-  (props?: VariantProps<V>): { [K in S[number]]: SerializedStyles };
-  raw: (props?: VariantProps<V>) => { [K in S[number]]: CSSObject };
+/**
+ * cva: queryOptions 스타일 헬퍼
+ * - 타입만 체크하고 config 그대로 리턴
+ */
+/**
+ * cva: 단일 컴포넌트 스타일 레시피 정의 헬퍼 (타입 전용)
+ *
+ * 사용 예시
+ * ```ts
+ * // 1) 레시피 정의
+ * const buttonRecipe = cva({
+ *   base: { display: 'inline-flex', alignItems: 'center' },
+ *   variants: {
+ *     size: {
+ *       sm: { fontSize: 12, padding: '4px 8px' },
+ *       md: { fontSize: 14, padding: '6px 12px' },
+ *     },
+ *     tone: {
+ *       primary: { color: 'royalblue' },
+ *       ghost: { color: 'gray' },
+ *     },
+ *   },
+ *   defaultVariants: { size: 'sm', tone: 'primary' },
+ *   compoundVariants: [
+ *     { size: 'md', tone: 'primary', css: { fontWeight: 600 } },
+ *   ],
+ * });
+ *
+ * // 2) variant props 타입 추론
+ * type ButtonVariantProps = RecipeVariantProps<typeof buttonRecipe>;
+ * // => { size?: 'sm' | 'md'; tone?: 'primary' | 'ghost' }
+ *
+ * // 3) 컴포넌트에서 사용 (css prop 병합)
+ * function Button(props: ButtonVariantProps & { children: React.ReactNode }) {
+ *   const size = props.size ?? buttonRecipe.defaultVariants?.size ?? 'sm';
+ *   const tone = props.tone ?? buttonRecipe.defaultVariants?.tone ?? 'primary';
+ *   return (
+ *     <button
+ *       css={[
+ *         buttonRecipe.base,
+ *         buttonRecipe.variants.size[size],
+ *         buttonRecipe.variants.tone[tone],
+ *       ]}
+ *       {...props}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function recipe<const TVariants extends RecipeVariantRecord>(
+  config: RecipeDefinition<TVariants>,
+): RecipeDefinition<TVariants> {
+  return config;
 }
 
-const isPlainObject = (value: unknown): value is Record<string, unknown> =>
-  value !== null && typeof value === 'object' && !Array.isArray(value);
-
-const mergeStyles = (target: CSSObject = {}, source: CSSObject = {}) => {
-  const out: CSSObject = { ...target };
-
-  for (const key of Object.keys(source)) {
-    const sourceValue = source[key];
-    const targetValue = out[key];
-
-    if (isPlainObject(sourceValue) && isPlainObject(targetValue)) {
-      out[key] = mergeStyles(targetValue as CSSObject, sourceValue as CSSObject);
-    } else {
-      out[key] = sourceValue;
-    }
-  }
-
-  return out;
+/**
+ * cva 별칭 (recipe와 동일)
+ */
+/**
+ *
+ * 타입 헬퍼 함수
+ * ```ts
+ * const button = cva({
+ *   base: { display: 'inline-flex' },
+ *   variants: {
+ *     size: { sm: { fontSize: 12 }, md: { fontSize: 14 } },
+ *     tone: { primary: { color: 'royalblue' }, ghost: { color: 'gray' } },
+ *   },
+ *   defaultVariants: { size: 'sm', tone: 'primary' },
+ * });
+ *
+ * type ButtonVariantProps = RecipeVariantProps<typeof button>;
+ * // => { size?: 'sm' | 'md'; tone?: 'primary' | 'ghost' }
+ * ```
+ */
+export const cva = recipe;
+
+/* -----------------------------------------------------------------------------
+ * sva(slot recipe)용 타입
+ * -----------------------------------------------------------------------------*/
+
+/**
+ * slot별 스타일
+ *
+ * S = 'root' | 'icon' 이면
+ *   { root?: CSSObject; icon?: CSSObject }
+ */
+
+/**
+ * slot recipe variants:
+ *
+ * {
+ *   size: {
+ *     sm: { root: CSSObject; icon: CSSObject }
+ *     md: { ... }
+ *   }
+ *   tone: { ... }
+ * }
+ */
+
+export type SlotBaseStyleRecord<S extends string> = {
+  [Slot in S]: CSSObject; // required
 };
 
-export function sva<S extends readonly SlotName[], V extends SvaVariants<S>>(
-  config: SvaConfig<S, V>,
-): SvaRecipe<S, V> {
-  type Slots = S[number];
-  type Props = VariantProps<V>;
-
-  const variantKeys = Object.keys(config.variants) as (keyof V)[];
-
-  const resolve = (props?: Props): Props => ({
-    ...(config.defaultVariants ?? ({} as Props)),
-    ...(props ?? ({} as Props)),
-  });
-
-  const computeRaw = (props?: Props): Record<Slots, CSSObject> => {
-    const resolved = resolve(props);
-    const result = {} as Record<Slots, CSSObject>;
-
-    // base
-    for (const slot of config.slots) {
-      const key = slot as Slots;
-      result[key] = { ...(config.base?.[key] ?? {}) };
-    }
-
-    // variants
-    for (const variantName of variantKeys) {
-      const value = resolved[variantName];
-      if (!value) continue;
-
-      const group = config.variants[variantName];
-      const slotStyles = group[value as keyof typeof group];
-      if (!slotStyles) continue;
-
-      for (const slot in slotStyles) {
-        const slotKey = slot as Slots;
-        result[slotKey] = mergeStyles(result[slotKey], slotStyles[slotKey]);
-      }
-    }
-
-    // compoundVariants
-    if (config.compoundVariants) {
-      for (const cv of config.compoundVariants) {
-        let matched = true;
-
-        for (const key in cv.variants) {
-          const expected = cv.variants[key as keyof Props];
-          if (expected === undefined) continue;
-          if (resolved[key as keyof Props] !== expected) {
-            matched = false;
-            break;
-          }
-        }
-
-        if (!matched) continue;
-
-        for (const slot in cv.style) {
-          const slotKey = slot as Slots;
-          result[slotKey] = mergeStyles(result[slotKey], cv.style[slotKey]);
-        }
-      }
-    }
-
-    return result;
-  };
-
-  const recipe: SvaRecipe<S, V> = ((props?: Props) => {
-    const raw = computeRaw(props);
-    const out = {} as Record<Slots, SerializedStyles>;
-
-    for (const slot of config.slots) {
-      const key = slot as Slots;
-      out[key] = css(raw[key]);
-    }
-
-    return out;
-  }) as SvaRecipe<S, V>;
-
-  recipe.raw = computeRaw;
-
-  return recipe;
-}
-
-/* ----------------- CVA (single slot) ----------------- */
-
-export type CvaVariants = {
-  [VariantKey: string]: {
-    [VariantValue: string]: CSSObject;
+export type SlotVariantStyleRecord<S extends string> = {
+  [Slot in S]?: CSSObject; // optional
+};
+export type SlotRecipeVariantRecord<S extends string> = {
+  [VariantName in string]: {
+    [VariantValue in string]: SlotVariantStyleRecord<S>;
   };
 };
 
-export interface CvaConfig<V extends CvaVariants> {
-  base?: CSSObject;
-  variants: V;
-  defaultVariants?: Partial<VariantProps<V>>;
-  compoundVariants?: Array<{
-    variants: Partial<VariantProps<V>>;
-    style: CSSObject;
-  }>;
-}
+/**
+ * slot recipe용 compoundVariants
+ *
+ * {
+ *   size?: 'sm' | ['sm', 'md'];
+ *   tone?: 'primary';
+ *   css: { root?: CSSObject; icon?: CSSObject; ... }
+ * }
+ */
+export type SlotRecipeCompoundVariant<
+  S extends string,
+  TVariants extends SlotRecipeVariantRecord<S>,
+> = RecipeCompoundSelection<TVariants> & {
+  css: SlotVariantStyleRecord<S>;
+};
 
-export interface CvaRecipe<V extends CvaVariants> {
-  (props?: VariantProps<V>): SerializedStyles;
-  raw: (props?: VariantProps<V>) => CSSObject;
+/**
+ * sva용 recipe 정의 타입
+ *
+ * slotRecipe({
+ *   slots: ['root', 'list', 'trigger'] as const,
+ *   base: { root: {...}, list: {...}, ... },
+ *   variants: { ... },
+ *   defaultVariants: { ... },
+ *   compoundVariants: [...]
+ * })
+ */
+export interface SlotRecipeDefinition<
+  S extends string,
+  TVariants extends SlotRecipeVariantRecord<S>,
+> {
+  slots: readonly S[];
+  base: SlotBaseStyleRecord<S>;
+  deprecated?: boolean | string;
+  variants: TVariants;
+  defaultVariants?: RecipeSelection<TVariants>;
+  compoundVariants?: readonly SlotRecipeCompoundVariant<S, TVariants>[];
 }
 
-export function cva<V extends CvaVariants>(config: CvaConfig<V>): CvaRecipe<V> {
-  type Props = VariantProps<V>;
-
-  const variantKeys = Object.keys(config.variants) as (keyof V)[];
-
-  const resolve = (props?: Props): Props => ({
-    ...(config.defaultVariants ?? ({} as Props)),
-    ...(props ?? ({} as Props)),
-  });
-
-  const computeRaw = (props?: Props): CSSObject => {
-    const resolved = resolve(props);
-    let result: CSSObject = { ...(config.base ?? {}) };
-
-    // variants
-    for (const variantName of variantKeys) {
-      const value = resolved[variantName];
-      if (!value) continue;
-
-      const group = config.variants[variantName];
-      const style = group[value as keyof typeof group];
-      if (!style) continue;
-
-      result = mergeStyles(result, style);
-    }
-
-    // compoundVariants
-    if (config.compoundVariants) {
-      for (const cv of config.compoundVariants) {
-        let matched = true;
-
-        for (const key in cv.variants) {
-          const expected = cv.variants[key as keyof Props];
-          if (expected === undefined) continue;
-          if (resolved[key as keyof Props] !== expected) {
-            matched = false;
-            break;
-          }
-        }
+/**
+ * sva:
+ * -  타입만 체크하고 config 그대로 리턴
+ */
 
-        if (!matched) continue;
-
-        result = mergeStyles(result, cv.style);
-      }
-    }
-
-    return result;
+type NormalizeSlotVariants<S extends string, TVariants extends SlotRecipeVariantRecord<S>> = {
+  [VN in keyof TVariants]: {
+    [VV in keyof TVariants[VN]]: SlotVariantStyleRecord<S>;
   };
-
-  const recipe: CvaRecipe<V> = ((props?: Props) => css(computeRaw(props))) as CvaRecipe<V>;
-
-  recipe.raw = computeRaw;
-
-  return recipe;
+};
+/**
+ * sva: 멀티 슬롯 컴포넌트 스타일 레시피 정의 헬퍼 (타입 전용)
+ *
+ * 사용 예시
+ * ```ts
+ * // 1) 레시피 정의
+ * const tabsRecipe = sva({
+ *   slots: ['root', 'list', 'trigger', 'indicator'] as const,
+ *   base: {
+ *     root: { display: 'flex', flexDirection: 'column' },
+ *     list: { display: 'flex', position: 'relative' },
+ *     trigger: { display: 'inline-flex' },
+ *     indicator: { position: 'absolute', borderBottomWidth: 1, borderBottomStyle: 'solid' },
+ *   },
+ *   variants: {
+ *     variant: {
+ *       header: {
+ *         list: { borderBottomWidth: 1, borderBottomStyle: 'solid' },
+ *         trigger: { padding: '6px 12px' },
+ *       },
+ *       content: {
+ *         list: { gap: 8 },
+ *         trigger: { padding: '8px 12px', border: '1px solid', borderRadius: 6 },
+ *         indicator: { display: 'none' },
+ *       },
+ *     },
+ *     isItemStretched: {
+ *       false: { list: { justifyContent: 'flex-start' }, trigger: { flex: 'initial' } },
+ *       true: { list: { justifyContent: 'space-around' }, trigger: { flex: 1 } },
+ *     },
+ *   },
+ *   defaultVariants: { variant: 'header', isItemStretched: false },
+ * });
+ *
+ * // 2) variant props 타입 추론
+ * type TabsVariantProps = RecipeVariantProps<typeof tabsRecipe>;
+ * // => { variant?: 'header' | 'content'; isItemStretched?: boolean }
+ *
+ * // 3) 컴포넌트에서 사용 (css prop 병합)
+ * function TabList(props: TabsVariantProps & React.ComponentProps<'div'>) {
+ *   const variant = props.variant ?? tabsRecipe.defaultVariants?.variant ?? 'header';
+ *   const stretch = (props.isItemStretched ?? tabsRecipe.defaultVariants?.isItemStretched ?? false) ? 'true' : 'false';
+ *   return (
+ *     <div
+ *       css={[
+ *         tabsRecipe.base.list,
+ *         tabsRecipe.variants.variant[variant].list,
+ *         tabsRecipe.variants.isItemStretched[stretch].list,
+ *       ]}
+ *       {...props}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function slotRecipe<
+  const S extends string,
+  const TVariants extends SlotRecipeVariantRecord<S>,
+>(config: SlotRecipeDefinition<S, TVariants>) {
+  return config as unknown as SlotRecipeDefinition<S, NormalizeSlotVariants<S, TVariants>>;
 }
 
-// Matches vanilla-extract's RecipeVariants and PandaCSS's RecipeVariantProps
-export type RecipeVariants<R> = VariantPropsOf<R>;
-export type RecipeVariantProps<R> = VariantPropsOf<R>;
-
-// Extract slot union type from a recipe's raw() return type
-export type RecipeSlots<R> = R extends { raw: (props?: any) => Record<infer S extends string, any> }
-  ? S
-  : never;
-
-// Extract the raw style map type from a recipe
-export type RecipeStyles<R> = R extends { raw: (props?: any) => infer M } ? M : never;
-
-// Generic extraction that accepts either a recipe runtime or a factory returning a recipe runtime
-type RuntimeFrom<T> = T extends (...args: any[]) => infer R
-  ? R extends (...args: any[]) => any
-    ? R
-    : T
+/**
+ * sva: 멀티 슬롯 컴포넌트 스타일 레시피 헬퍼(별칭)
+ *
+ *
+ * 사용 예시
+ * ```ts
+ * const tabs = sva({
+ *   slots: ['root', 'list', 'trigger'] as const,
+ *   base: {
+ *     root: { display: 'flex' },
+ *     list: { display: 'flex', position: 'relative' },
+ *     trigger: { display: 'inline-flex' },
+ *   },
+ *   variants: {
+ *     variant: {
+ *       header: { list: { borderBottomWidth: 1 }, trigger: { padding: '6px 12px' } },
+ *       content: { list: { gap: 8 }, trigger: { padding: '8px 12px', borderRadius: 6 } },
+ *     },
+ *     isItemStretched: {
+ *       false: { list: { justifyContent: 'flex-start' }, trigger: { flex: 'initial' } },
+ *       true: { list: { justifyContent: 'space-around' }, trigger: { flex: 1 } },
+ *     },
+ *   },
+ *   defaultVariants: { variant: 'header', isItemStretched: false },
+ * });
+ *
+ * type TabsVariantProps = RecipeVariantProps<typeof tabs>;
+ * // => { variant?: 'header' | 'content'; isItemStretched?: boolean }
+ * ```
+ */
+export const sva = slotRecipe;
+
+/* -----------------------------------------------------------------------------
+ * 공통: variant props 추론 유틸 (cva / sva 둘 다 지원)
+ * -----------------------------------------------------------------------------*/
+
+/**
+ * RecipeVariantProps
+ *
+ * variants의 타입을 추론하는 유틸리티 타입
+ *
+ * 예시 1) cva (단일 컴포넌트)
+ * ```ts
+ * const buttonRecipe = cva({
+ *   base: {},
+ *   variants: {
+ *     size: { sm: {}, md: {} },
+ *     tone: { primary: {}, ghost: {} },
+ *   },
+ *   defaultVariants: { size: 'sm', tone: 'primary' },
+ * });
+ *
+ * type ButtonVariantProps = RecipeVariantProps<typeof buttonRecipe>;
+ * // => { size?: 'sm' | 'md'; tone?: 'primary' | 'ghost' }
+ * ```
+ *
+ * 예시 2) sva (멀티 슬롯)
+ * ```ts
+ * const tabsRecipe = sva({
+ *   slots: ['root', 'list', 'trigger'] as const,
+ *   base: { root: {}, list: {}, trigger: {} },
+ *   variants: {
+ *     variant: {
+ *       header: { list: {}, trigger: {} },
+ *       content: { list: {}, trigger: {} },
+ *     },
+ *     isItemStretched: {
+ *       false: { list: {} },
+ *       true: { list: {}, trigger: {} },
+ *     },
+ *   },
+ *   defaultVariants: { variant: 'header', isItemStretched: false },
+ * });
+ *
+ * type TabsVariantProps = RecipeVariantProps<typeof tabsRecipe>;
+ * // => { variant?: 'header' | 'content'; isItemStretched?: boolean }
+ * ```
+ */
+export type RecipeVariantProps<T> = T extends { variants: infer TVariants }
+  ? TVariants extends VariantRecordLike
+    ? RecipeSelection<TVariants>
+    : never
   : never;
 
-// Single entry-point alias (usage: RecipeVariant<typeof tabRecipe>)
-export type RecipeVariant<T> = VariantPropsOf<RuntimeFrom<T>>;
+/**
+ * 모든 variant를 required type으로 사용
+ *
+ * ```ts
+ * type ButtonVariant = RecipeVariant<typeof buttonRecipe>;
+ * ```
+ */
+export type RecipeVariant<T> = Required<RecipeVariantProps<T>>;

From 3ebb23755963c24342845c4bff5c20a6852b7c39 Mon Sep 17 00:00:00 2001
From: whdgur5717 <whdgur5717@gmail.com>
Date: Mon, 24 Nov 2025 20:01:50 +0900
Subject: [PATCH 12/15] =?UTF-8?q?feat:=20tab=20variant=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD(isItemStreched=20->=20layout)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/components/Tab/tab.style.ts | 63 ++++++++++----------
 1 file changed, 33 insertions(+), 30 deletions(-)

diff --git a/packages/jds/src/components/Tab/tab.style.ts b/packages/jds/src/components/Tab/tab.style.ts
index 1d945cc44..3bd055c1c 100644
--- a/packages/jds/src/components/Tab/tab.style.ts
+++ b/packages/jds/src/components/Tab/tab.style.ts
@@ -1,12 +1,12 @@
-import { sva } from './sva';
-import { theme as t } from '../../tokens/theme';
+import { sva, type RecipeVariantProps } from './sva';
+import { theme } from '../../tokens/theme';
 
 // TODO: 추후 공통화하기
 const interactiveSelector =
   '&:not(:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]))';
 const disabledSelector = '&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])';
 
-export const tabRecipe = sva({
+export const tabStyles = sva({
   slots: ['root', 'list', 'trigger', 'content', 'indicator'] as const,
   base: {
     root: {
@@ -17,7 +17,7 @@ export const tabRecipe = sva({
     list: {
       display: 'flex',
       alignItems: 'center',
-      gap: t.scheme.semantic.spacing[0],
+      gap: theme.scheme.semantic.spacing[0],
       position: 'relative',
     },
     trigger: {
@@ -26,21 +26,20 @@ export const tabRecipe = sva({
       display: 'inline-flex',
       justifyContent: 'center',
       alignItems: 'center',
-      gap: t.scheme.semantic.spacing[4],
-      color: t.color.semantic.object.alternative,
+      gap: theme.scheme.semantic.spacing[4],
+      color: theme.color.semantic.object.alternative,
       cursor: 'pointer',
       '&[data-state="active"]': {
-        color: t.color.semantic.object.bolder,
+        color: theme.color.semantic.object.bolder,
       },
       '&::after': {
         content: '""',
         position: 'absolute',
         inset: 0,
         borderRadius: 'inherit',
-        backgroundColor: t.color.semantic.interaction.assistive,
+        backgroundColor: theme.color.semantic.interaction.assistive,
         opacity: 0,
-        transition: `opacity ${t.environment.semantic.duration[100]} ${t.environment.semantic.motion.fluent}
-          `,
+        transition: `opacity ${theme.environment.semantic.duration[100]} ${theme.environment.semantic.motion.fluent}`,
         zIndex: -1,
       },
       [`${interactiveSelector}:hover::after`]: {
@@ -58,8 +57,8 @@ export const tabRecipe = sva({
       },
       '&:focus-visible': {
         outline: 'none',
-        boxShadow: `inset 0 0 0 ${t.scheme.semantic.strokeWeight[3]} ${t.color.semantic.interaction.focus}`,
-        opacity: t.scheme.semantic.opacity[100],
+        boxShadow: `inset 0 0 0 ${theme.scheme.semantic.strokeWeight[3]} ${theme.color.semantic.interaction.focus}`,
+        opacity: theme.scheme.semantic.opacity[100],
       },
       [disabledSelector]: {
         cursor: 'not-allowed',
@@ -71,46 +70,48 @@ export const tabRecipe = sva({
     content: {},
     indicator: {
       position: 'absolute',
-      borderWidth: 0,
-      borderBottomWidth: t.scheme.semantic.strokeWeight[2],
+      borderBottomWidth: theme.scheme.semantic.strokeWeight[1],
       borderBottomStyle: 'solid',
-      borderBottomColor: t.color.semantic.stroke.bold,
-      zIndex: 0,
+      borderBottomColor: theme.color.semantic.stroke.bold,
+      zIndex: 10,
     },
   },
   variants: {
     variant: {
       header: {
         list: {
-          borderRadius: t.scheme.semantic.radius[0],
-          borderBottomWidth: t.scheme.semantic.strokeWeight[1],
+          borderRadius: theme.scheme.semantic.radius[0],
+          borderBottomWidth: theme.scheme.semantic.strokeWeight[1],
           borderBottomStyle: 'solid',
-          borderBottomColor: t.color.semantic.stroke.assistive,
-          opacity: t.scheme.semantic.opacity[100],
+          borderBottomColor: theme.color.semantic.stroke.assistive,
+          opacity: theme.scheme.semantic.opacity[100],
         },
         trigger: {
-          padding: `${t.scheme.semantic.spacing[6]} ${t.scheme.semantic.spacing[12]}`,
+          padding: `${theme.scheme.semantic.spacing[6]} ${theme.scheme.semantic.spacing[12]}`,
           minHeight: '39px',
         },
+        indicator: {
+          display: 'block',
+        },
       },
       content: {
         list: {
-          gap: t.scheme.semantic.spacing[8],
+          gap: theme.scheme.semantic.spacing[8],
         },
         trigger: {
-          padding: `${t.scheme.semantic.spacing[8]} ${t.scheme.semantic.spacing[12]}`,
-          border: '1px solid',
-          borderColor: t.color.semantic.stroke.alpha.subtle,
-          borderRadius: t.scheme.semantic.radius[6],
+          padding: `${theme.scheme.semantic.spacing[8]} ${theme.scheme.semantic.spacing[12]}`,
+          border: `${theme.scheme.semantic.strokeWeight[1]} solid ${theme.color.semantic.stroke.alpha.subtle}`,
+          borderRadius: theme.scheme.semantic.radius[6],
           minHeight: '35px',
         },
         indicator: {
           display: 'none',
+          bottom: `calc(-1 * ${theme.scheme.semantic.strokeWeight[1]})`, //list의 borderBottom과 겹치도록 -1로 설정
         },
       },
     },
-    isItemStretched: {
-      false: {
+    layout: {
+      hug: {
         list: {
           width: 'auto',
           justifyContent: 'flex-start',
@@ -119,7 +120,7 @@ export const tabRecipe = sva({
           flex: 'initial',
         },
       },
-      true: {
+      fill: {
         list: {
           width: '100%',
           alignItems: 'stretch',
@@ -134,6 +135,8 @@ export const tabRecipe = sva({
   },
   defaultVariants: {
     variant: 'header',
-    isItemStretched: 'false',
+    layout: 'hug',
   },
 });
+
+export type TabVariantProps = RecipeVariantProps<typeof tabStyles>;

From dcb3e361c94d6511aefd85b15e7445684e41260d Mon Sep 17 00:00:00 2001
From: whdgur5717 <whdgur5717@gmail.com>
Date: Mon, 24 Nov 2025 20:02:09 +0900
Subject: [PATCH 13/15] =?UTF-8?q?feat:=20tab=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/components/Tab/tab.tsx | 116 ++++++++++++++++++------
 1 file changed, 88 insertions(+), 28 deletions(-)

diff --git a/packages/jds/src/components/Tab/tab.tsx b/packages/jds/src/components/Tab/tab.tsx
index 41b1710e2..62c4bec97 100644
--- a/packages/jds/src/components/Tab/tab.tsx
+++ b/packages/jds/src/components/Tab/tab.tsx
@@ -1,32 +1,63 @@
 import { Tabs as TabPrimitive } from 'radix-ui';
+import { Context } from 'radix-ui/internal';
 import type { ComponentPropsWithoutRef, ElementRef } from 'react';
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { createStyleContext } from './styleContext';
-import { tabRecipe } from './tab.style';
+import { tabStyles, type TabVariantProps } from './tab.style';
 import { mergeRefs } from '../../hooks/mergeRefs';
 
-const { withRootProvider, withContext } = createStyleContext(tabRecipe);
-export const TabIndicator = withContext('div', 'indicator');
-
-export const Tab = withRootProvider(TabPrimitive.Root);
-
+type StyleVariantContextValue = Required<TabVariantProps>;
+const [StyleVariantProvider, useStyleVariant] =
+  Context.createContext<StyleVariantContextValue>('TabStyleVariant');
+
+// ----- Root -----
+type TabRootProps = ComponentPropsWithoutRef<typeof TabPrimitive.Root> & TabVariantProps;
+
+export const Tab = forwardRef<ElementRef<typeof TabPrimitive.Root>, TabRootProps>((props, ref) => {
+  const {
+    variant = tabStyles.defaultVariants?.variant || 'content',
+    layout = tabStyles.defaultVariants?.layout || 'hug',
+    ...rest
+  } = props;
+
+  const value = useMemo(() => ({ variant, layout }), [variant, layout]);
+
+  return (
+    <StyleVariantProvider {...value}>
+      <TabPrimitive.Root ref={ref} {...rest} css={[tabStyles.base.root]} />
+    </StyleVariantProvider>
+  );
+});
+Tab.displayName = TabPrimitive.Root.displayName;
+
+// ----- Indicator -----
+type TabIndicatorProps = ComponentPropsWithoutRef<'div'>;
+
+const TabIndicator = (props: TabIndicatorProps) => {
+  return (
+    <div
+      css={[tabStyles.base.indicator, tabStyles.variants.variant.content.indicator]}
+      {...props}
+    />
+  );
+};
+
+// ----- List -----
 type TabListProps = ComponentPropsWithoutRef<typeof TabPrimitive.List>;
 
-const ListBase = forwardRef<ElementRef<typeof TabPrimitive.List>, TabListProps>(
-  ({ children, ...rest }, ref) => {
+export const TabList = forwardRef<ElementRef<typeof TabPrimitive.List>, TabListProps>(
+  (props, ref) => {
     const listRef = useRef<ElementRef<typeof TabPrimitive.List> | null>(null);
+    const { variant, layout } = useStyleVariant('TabList');
 
     const [indicatorStyle, setIndicatorStyle] = useState({
       left: 0,
       width: 0,
-      bottom: 0,
       height: 0,
     });
 
     const mergedRef = mergeRefs(listRef, ref);
 
-    //선택된 item([data-state="active"]')에 따라 indicator를 움직이는 로직
     const updateIndicator = useCallback(() => {
       if (!listRef.current) return;
 
@@ -41,7 +72,6 @@ const ListBase = forwardRef<ElementRef<typeof TabPrimitive.List>, TabListProps>(
         setIndicatorStyle({
           left: activeRect.left - listRect.left + listEl.scrollLeft,
           width: activeRect.width,
-          bottom: 0,
           height: 0,
         });
       });
@@ -49,17 +79,15 @@ const ListBase = forwardRef<ElementRef<typeof TabPrimitive.List>, TabListProps>(
 
     useEffect(() => {
       const el = listRef.current;
-      if (!el) return;
+      if (!el) {
+        return;
+      }
 
       const t = window.setTimeout(updateIndicator, 0);
       window.addEventListener('resize', updateIndicator);
 
       const observer = new MutationObserver(updateIndicator);
-      observer.observe(el, {
-        attributes: true,
-        childList: true,
-        subtree: true,
-      });
+      observer.observe(el, { attributes: true, childList: true, subtree: true });
 
       const handleScroll = () => updateIndicator();
       el.addEventListener('scroll', handleScroll, { passive: true });
@@ -71,22 +99,54 @@ const ListBase = forwardRef<ElementRef<typeof TabPrimitive.List>, TabListProps>(
         el.removeEventListener('scroll', handleScroll);
       };
     }, [updateIndicator]);
-
     return (
-      <TabPrimitive.List ref={mergedRef} {...rest}>
-        {children}
-        <TabIndicator style={indicatorStyle} />
+      <TabPrimitive.List
+        ref={mergedRef}
+        css={[
+          tabStyles.base.list,
+          tabStyles.variants.variant[variant].list,
+          tabStyles.variants.layout[layout].list,
+        ]}
+        {...props}
+      >
+        {props.children}
+        <TabIndicator
+          style={{ ...indicatorStyle }}
+          css={[tabStyles.variants.variant[variant].indicator]}
+        />
       </TabPrimitive.List>
     );
   },
 );
-ListBase.displayName = 'TabListBase';
-
-export const TabList = withContext(ListBase, 'list');
 TabList.displayName = TabPrimitive.List.displayName;
 
-export const TabTrigger = withContext(TabPrimitive.Trigger, 'trigger');
+// ----- Trigger -----
+type TabTriggerProps = ComponentPropsWithoutRef<typeof TabPrimitive.Trigger>;
+
+export const TabTrigger = forwardRef<ElementRef<typeof TabPrimitive.Trigger>, TabTriggerProps>(
+  (props, ref) => {
+    const { variant, layout } = useStyleVariant('TabTrigger');
+    return (
+      <TabPrimitive.Trigger
+        ref={ref}
+        css={[
+          tabStyles.base.trigger,
+          tabStyles.variants.variant[variant].trigger,
+          tabStyles.variants.layout[layout].trigger,
+        ]}
+        {...props}
+      />
+    );
+  },
+);
 TabTrigger.displayName = TabPrimitive.Trigger.displayName;
 
-export const TabContent = withContext(TabPrimitive.Content, 'content');
+// ----- Content -----
+type TabContentProps = ComponentPropsWithoutRef<typeof TabPrimitive.Content>;
+
+export const TabContent = forwardRef<ElementRef<typeof TabPrimitive.Content>, TabContentProps>(
+  (props, ref) => {
+    return <TabPrimitive.Content ref={ref} css={[tabStyles.base.content]} {...props} />;
+  },
+);
 TabContent.displayName = TabPrimitive.Content.displayName;

From 07fe8bd4d6504020150848466ecf8765921d880c Mon Sep 17 00:00:00 2001
From: whdgur5717 <whdgur5717@gmail.com>
Date: Mon, 24 Nov 2025 20:02:26 +0900
Subject: [PATCH 14/15] =?UTF-8?q?feat:=20tab=20story=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/components/Tab/tab.stories.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/jds/src/components/Tab/tab.stories.tsx b/packages/jds/src/components/Tab/tab.stories.tsx
index bcec2d24a..77907b515 100644
--- a/packages/jds/src/components/Tab/tab.stories.tsx
+++ b/packages/jds/src/components/Tab/tab.stories.tsx
@@ -40,7 +40,7 @@ const meta = {
           '',
           '스타일 변형(Variants)',
           "- variant: 'header' | 'content' (스타일만 변경합니다. 동작/접근성은 동일)",
-          "- isItemStretched: 'true' | 'false' (트리거를 리스트 너비에 맞춰 균등 분할)",
+          "- layout: 'true' | 'false' (트리거를 리스트 너비에 맞춰 균등 분할)",
           '',
           '제어/비제어: value + onValueChange(제어) 또는 defaultValue(비제어)를 동일하게 지원합니다.',
           '',
@@ -58,7 +58,7 @@ const meta = {
       options: ['header', 'content'],
       description: '시각적 레시피 전환만 담당합니다. 기능/접근성은 Radix UI Tabs와 동일합니다.',
     },
-    isItemStretched: {
+    layout: {
       control: 'radio',
       options: ['false', 'true'],
       description: '트리거를 리스트 너비에 맞춰 균등 분할할지 여부(스타일 전용).',
@@ -66,7 +66,7 @@ const meta = {
   },
   args: {
     variant: 'header',
-    isItemStretched: 'false',
+    layout: 'hug',
   },
 } satisfies Meta<typeof Tab>;
 
@@ -103,7 +103,7 @@ export const Playground: Story = {
 
 export const Stretched: Story = {
   args: {
-    isItemStretched: 'true',
+    layout: 'hug',
   },
   parameters: {
     docs: {
@@ -168,7 +168,7 @@ const overflowItems = Array.from({ length: 10 }).map((_, idx) => ({
 
 export const OverflowScrollable: Story = {
   args: {
-    isItemStretched: 'false',
+    layout: 'hug',
   },
   parameters: {
     docs: {
@@ -191,6 +191,8 @@ export const OverflowScrollable: Story = {
           '&::-webkit-scrollbar': {
             display: 'none',
           },
+          width: '100%',
+          color: 'red',
         }}
       >
         {overflowItems.map(item => (
@@ -212,7 +214,7 @@ export const OverflowScrollable: Story = {
 export const Customize: Story = {
   args: {
     variant: 'header',
-    isItemStretched: 'false',
+    layout: 'hug',
   },
   parameters: {
     docs: {

From bd57b4c2d15a591a5f1ff24ba8b67968092ea50b Mon Sep 17 00:00:00 2001
From: whdgur5717 <whdgur5717@gmail.com>
Date: Mon, 24 Nov 2025 20:04:52 +0900
Subject: [PATCH 15/15] =?UTF-8?q?chore:=20tab=20indicator=20width=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/components/Tab/tab.style.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/jds/src/components/Tab/tab.style.ts b/packages/jds/src/components/Tab/tab.style.ts
index 3bd055c1c..b10ab61f3 100644
--- a/packages/jds/src/components/Tab/tab.style.ts
+++ b/packages/jds/src/components/Tab/tab.style.ts
@@ -70,7 +70,7 @@ export const tabStyles = sva({
     content: {},
     indicator: {
       position: 'absolute',
-      borderBottomWidth: theme.scheme.semantic.strokeWeight[1],
+      borderBottomWidth: theme.scheme.semantic.strokeWeight[2],
       borderBottomStyle: 'solid',
       borderBottomColor: theme.color.semantic.stroke.bold,
       zIndex: 10,