diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 9a194060..48f070e0 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -5,7 +5,7 @@ export const Button = () => {
   const [clicked, setClicked] = useState(false);
   return (
     <tet.button
-      color="$a-color-action-destructive-active"
+      color="action-destructive-active"
       onClick={() => setClicked(true)}
       disabled={clicked}
     >
diff --git a/src/tetrisly/tetrisly.test.tsx b/src/tetrisly/tetrisly.test.tsx
index 29fc988c..2395f736 100644
--- a/src/tetrisly/tetrisly.test.tsx
+++ b/src/tetrisly/tetrisly.test.tsx
@@ -7,11 +7,11 @@ describe("check tetrisly provider, and correct styling", () => {
   it("with no theme provided should use default theme", () => {
     render(
       <TetrislyProvider>
-        <tet.button color="$g-color-blue-+1">Click me</tet.button>
+        <tet.button color="blue-+1">Click me</tet.button>
       </TetrislyProvider>
     );
     const button = screen.getByText("Click me");
-    expect(button).toHaveStyle(`color: ${theme.colors["$g-color-blue-+1"]}`);
+    expect(button).toHaveStyle(`color: ${theme.colors["blue-+1"]}`);
   });
   it("with theme provided should use theme", () => {
     const customColor = "rgb(255, 0, 0)";
@@ -19,11 +19,11 @@ describe("check tetrisly provider, and correct styling", () => {
       <TetrislyProvider
         theme={{
           colors: {
-            "$g-color-blue-+1": customColor,
+            "blue-+1": customColor,
           },
         }}
       >
-        <tet.button color="$g-color-blue-+1" backgroundColor="$g-color-blue-+2">
+        <tet.button color="blue-+1" backgroundColor="blue-+2">
           Click me
         </tet.button>
       </TetrislyProvider>
@@ -37,11 +37,11 @@ describe("check tetrisly provider, and correct styling", () => {
       <TetrislyProvider
         theme={{
           colors: {
-            "$g-color-blue-+1": customColor,
+            "blue-+1": customColor,
           },
         }}
       >
-        <tet.button color="$g-color-blue-+1" backgroundColor="$g-color-blue-+2">
+        <tet.button color="blue-+1" backgroundColor="blue-+2">
           Click me
         </tet.button>
       </TetrislyProvider>
@@ -49,7 +49,7 @@ describe("check tetrisly provider, and correct styling", () => {
     const button = screen.getByText("Click me");
     expect(button).toHaveStyle(`color: ${customColor}`);
     expect(button).toHaveStyle(
-      `background-color: ${theme.colors["$g-color-blue-+2"]}`
+      `background-color: ${theme.colors["blue-+2"]}`
     );
   });
 });
diff --git a/src/theme/Theme.interface.ts b/src/theme/Theme.interface.ts
index d721a76a..f58fe6d2 100644
--- a/src/theme/Theme.interface.ts
+++ b/src/theme/Theme.interface.ts
@@ -17,997 +17,1158 @@ export type Theme = {
   texts: Texts;
   shadows: Shadows;
   opacity: Opacity;
+  screens: Screens;
+  states: States;
+  ringWidths: BorderWidths;
 };
 
-export type CustomTheme = Record<
-  keyof Theme,
-  Record<string, string | ReturnType<typeof th>>
->;
-
 export type Colors = {
-  "$g-color-coolGrey--4": string | RefferenceType;
-  "$g-color-coolGrey--3": string | RefferenceType;
-  "$g-color-coolGrey--2": string | RefferenceType;
-  "$g-color-coolGrey--1": string | RefferenceType;
-  "$g-color-coolGrey-0": string | RefferenceType;
-  "$g-color-coolGrey-+1": string | RefferenceType;
-  "$g-color-coolGrey-+2": string | RefferenceType;
-  "$g-color-coolGrey-+3": string | RefferenceType;
-  "$g-color-coolGrey-+4": string | RefferenceType;
-  "$g-color-coolGrey-+5": string | RefferenceType;
-  "$g-color-coolGrey-+6": string | RefferenceType;
-  "$g-color-coolGrey-+7": string | RefferenceType;
-  "$g-color-coolGrey-+8": string | RefferenceType;
-  "$g-color-coolGreyA--4": string | RefferenceType;
-  "$g-color-coolGreyA--3": string | RefferenceType;
-  "$g-color-coolGreyA--2": string | RefferenceType;
-  "$g-color-coolGreyA--1": string | RefferenceType;
-  "$g-color-coolGreyA-0": string | RefferenceType;
-  "$g-color-coolGreyA-+1": string | RefferenceType;
-  "$g-color-coolGreyA-+2": string | RefferenceType;
-  "$g-color-coolGreyA-+3": string | RefferenceType;
-  "$g-color-coolGreyA-+4": string | RefferenceType;
-  "$g-color-coolGreyA-+5": string | RefferenceType;
-  "$g-color-coolGreyA-+6": string | RefferenceType;
-  "$g-color-coolGreyA-+7": string | RefferenceType;
-  "$g-color-coolGreyA-+8": string | RefferenceType;
-  "$g-color-neutralGrey--4": string | RefferenceType;
-  "$g-color-neutralGrey--3": string | RefferenceType;
-  "$g-color-neutralGrey--2": string | RefferenceType;
-  "$g-color-neutralGrey--1": string | RefferenceType;
-  "$g-color-neutralGrey-0": string | RefferenceType;
-  "$g-color-neutralGrey-+1": string | RefferenceType;
-  "$g-color-neutralGrey-+2": string | RefferenceType;
-  "$g-color-neutralGrey-+3": string | RefferenceType;
-  "$g-color-neutralGrey-+4": string | RefferenceType;
-  "$g-color-neutralGrey-+5": string | RefferenceType;
-  "$g-color-neutralGrey-+6": string | RefferenceType;
-  "$g-color-neutralGrey-+7": string | RefferenceType;
-  "$g-color-neutralGrey-+8": string | RefferenceType;
-  "$g-color-neutralGreyA--4": string | RefferenceType;
-  "$g-color-neutralGreyA--3": string | RefferenceType;
-  "$g-color-neutralGreyA--2": string | RefferenceType;
-  "$g-color-neutralGreyA--1": string | RefferenceType;
-  "$g-color-neutralGreyA-0": string | RefferenceType;
-  "$g-color-neutralGreyA-+1": string | RefferenceType;
-  "$g-color-neutralGreyA-+2": string | RefferenceType;
-  "$g-color-neutralGreyA-+3": string | RefferenceType;
-  "$g-color-neutralGreyA-+4": string | RefferenceType;
-  "$g-color-neutralGreyA-+5": string | RefferenceType;
-  "$g-color-neutralGreyA-+6": string | RefferenceType;
-  "$g-color-neutralGreyA-+7": string | RefferenceType;
-  "$g-color-neutralGreyA-+8": string | RefferenceType;
-  "$g-color-warmGrey--4": string | RefferenceType;
-  "$g-color-warmGrey--3": string | RefferenceType;
-  "$g-color-warmGrey--2": string | RefferenceType;
-  "$g-color-warmGrey--1": string | RefferenceType;
-  "$g-color-warmGrey-0": string | RefferenceType;
-  "$g-color-warmGrey-+1": string | RefferenceType;
-  "$g-color-warmGrey-+2": string | RefferenceType;
-  "$g-color-warmGrey-+3": string | RefferenceType;
-  "$g-color-warmGrey-+4": string | RefferenceType;
-  "$g-color-warmGrey-+5": string | RefferenceType;
-  "$g-color-warmGrey-+6": string | RefferenceType;
-  "$g-color-warmGrey-+7": string | RefferenceType;
-  "$g-color-warmGrey-+8": string | RefferenceType;
-  "$g-color-warmGreyA--4": string | RefferenceType;
-  "$g-color-warmGreyA--3": string | RefferenceType;
-  "$g-color-warmGreyA--2": string | RefferenceType;
-  "$g-color-warmGreyA--1": string | RefferenceType;
-  "$g-color-warmGreyA-0": string | RefferenceType;
-  "$g-color-warmGreyA-+1": string | RefferenceType;
-  "$g-color-warmGreyA-+2": string | RefferenceType;
-  "$g-color-warmGreyA-+3": string | RefferenceType;
-  "$g-color-warmGreyA-+4": string | RefferenceType;
-  "$g-color-warmGreyA-+5": string | RefferenceType;
-  "$g-color-warmGreyA-+6": string | RefferenceType;
-  "$g-color-warmGreyA-+7": string | RefferenceType;
-  "$g-color-warmGreyA-+8": string | RefferenceType;
-  "$g-color-whiteA--12": string | RefferenceType;
-  "$g-color-whiteA--11": string | RefferenceType;
-  "$g-color-whiteA--10": string | RefferenceType;
-  "$g-color-whiteA--9": string | RefferenceType;
-  "$g-color-whiteA--8": string | RefferenceType;
-  "$g-color-whiteA--7": string | RefferenceType;
-  "$g-color-whiteA--6": string | RefferenceType;
-  "$g-color-whiteA--5": string | RefferenceType;
-  "$g-color-whiteA--4": string | RefferenceType;
-  "$g-color-whiteA--3": string | RefferenceType;
-  "$g-color-whiteA--2": string | RefferenceType;
-  "$g-color-whiteA--1": string | RefferenceType;
-  "$g-color-whiteA-0": string | RefferenceType;
-  "$g-color-red--4": string | RefferenceType;
-  "$g-color-red--3": string | RefferenceType;
-  "$g-color-red--2": string | RefferenceType;
-  "$g-color-red--1": string | RefferenceType;
-  "$g-color-red-0": string | RefferenceType;
-  "$g-color-red-+1": string | RefferenceType;
-  "$g-color-red-+2": string | RefferenceType;
-  "$g-color-red-+3": string | RefferenceType;
-  "$g-color-red-+4": string | RefferenceType;
-  "$g-color-red-+5": string | RefferenceType;
-  "$g-color-red-+6": string | RefferenceType;
-  "$g-color-red-+7": string | RefferenceType;
-  "$g-color-red-+8": string | RefferenceType;
-  "$g-color-raspberry--4": string | RefferenceType;
-  "$g-color-raspberry--3": string | RefferenceType;
-  "$g-color-raspberry--2": string | RefferenceType;
-  "$g-color-raspberry--1": string | RefferenceType;
-  "$g-color-raspberry-0": string | RefferenceType;
-  "$g-color-raspberry-+1": string | RefferenceType;
-  "$g-color-raspberry-+2": string | RefferenceType;
-  "$g-color-raspberry-+3": string | RefferenceType;
-  "$g-color-raspberry-+4": string | RefferenceType;
-  "$g-color-raspberry-+5": string | RefferenceType;
-  "$g-color-raspberry-+6": string | RefferenceType;
-  "$g-color-raspberry-+7": string | RefferenceType;
-  "$g-color-raspberry-+8": string | RefferenceType;
-  "$g-color-magenta--4": string | RefferenceType;
-  "$g-color-magenta--3": string | RefferenceType;
-  "$g-color-magenta--2": string | RefferenceType;
-  "$g-color-magenta--1": string | RefferenceType;
-  "$g-color-magenta-0": string | RefferenceType;
-  "$g-color-magenta-+1": string | RefferenceType;
-  "$g-color-magenta-+2": string | RefferenceType;
-  "$g-color-magenta-+3": string | RefferenceType;
-  "$g-color-magenta-+4": string | RefferenceType;
-  "$g-color-magenta-+5": string | RefferenceType;
-  "$g-color-magenta-+6": string | RefferenceType;
-  "$g-color-magenta-+7": string | RefferenceType;
-  "$g-color-magenta-+8": string | RefferenceType;
-  "$g-color-purple--4": string | RefferenceType;
-  "$g-color-purple--3": string | RefferenceType;
-  "$g-color-purple--2": string | RefferenceType;
-  "$g-color-purple--1": string | RefferenceType;
-  "$g-color-purple-0": string | RefferenceType;
-  "$g-color-purple-+1": string | RefferenceType;
-  "$g-color-purple-+2": string | RefferenceType;
-  "$g-color-purple-+3": string | RefferenceType;
-  "$g-color-purple-+4": string | RefferenceType;
-  "$g-color-purple-+5": string | RefferenceType;
-  "$g-color-purple-+6": string | RefferenceType;
-  "$g-color-purple-+7": string | RefferenceType;
-  "$g-color-purple-+8": string | RefferenceType;
-  "$g-color-grape--4": string | RefferenceType;
-  "$g-color-grape--3": string | RefferenceType;
-  "$g-color-grape--2": string | RefferenceType;
-  "$g-color-grape--1": string | RefferenceType;
-  "$g-color-grape-0": string | RefferenceType;
-  "$g-color-grape-+1": string | RefferenceType;
-  "$g-color-grape-+2": string | RefferenceType;
-  "$g-color-grape-+3": string | RefferenceType;
-  "$g-color-grape-+4": string | RefferenceType;
-  "$g-color-grape-+5": string | RefferenceType;
-  "$g-color-grape-+6": string | RefferenceType;
-  "$g-color-grape-+7": string | RefferenceType;
-  "$g-color-grape-+8": string | RefferenceType;
-  "$g-color-violet--4": string | RefferenceType;
-  "$g-color-violet--3": string | RefferenceType;
-  "$g-color-violet--2": string | RefferenceType;
-  "$g-color-violet--1": string | RefferenceType;
-  "$g-color-violet-0": string | RefferenceType;
-  "$g-color-violet-+1": string | RefferenceType;
-  "$g-color-violet-+2": string | RefferenceType;
-  "$g-color-violet-+3": string | RefferenceType;
-  "$g-color-violet-+4": string | RefferenceType;
-  "$g-color-violet-+5": string | RefferenceType;
-  "$g-color-violet-+6": string | RefferenceType;
-  "$g-color-violet-+7": string | RefferenceType;
-  "$g-color-violet-+8": string | RefferenceType;
-  "$g-color-blue--4": string | RefferenceType;
-  "$g-color-blue--3": string | RefferenceType;
-  "$g-color-blue--2": string | RefferenceType;
-  "$g-color-blue--1": string | RefferenceType;
-  "$g-color-blue-0": string | RefferenceType;
-  "$g-color-blue-+1": string | RefferenceType;
-  "$g-color-blue-+2": string | RefferenceType;
-  "$g-color-blue-+3": string | RefferenceType;
-  "$g-color-blue-+4": string | RefferenceType;
-  "$g-color-blue-+5": string | RefferenceType;
-  "$g-color-blue-+6": string | RefferenceType;
-  "$g-color-blue-+7": string | RefferenceType;
-  "$g-color-blue-+8": string | RefferenceType;
-  "$g-color-cyan--4": string | RefferenceType;
-  "$g-color-cyan--3": string | RefferenceType;
-  "$g-color-cyan--2": string | RefferenceType;
-  "$g-color-cyan--1": string | RefferenceType;
-  "$g-color-cyan-0": string | RefferenceType;
-  "$g-color-cyan-+1": string | RefferenceType;
-  "$g-color-cyan-+2": string | RefferenceType;
-  "$g-color-cyan-+3": string | RefferenceType;
-  "$g-color-cyan-+4": string | RefferenceType;
-  "$g-color-cyan-+5": string | RefferenceType;
-  "$g-color-cyan-+6": string | RefferenceType;
-  "$g-color-cyan-+7": string | RefferenceType;
-  "$g-color-cyan-+8": string | RefferenceType;
-  "$g-color-teal--4": string | RefferenceType;
-  "$g-color-teal--3": string | RefferenceType;
-  "$g-color-teal--2": string | RefferenceType;
-  "$g-color-teal--1": string | RefferenceType;
-  "$g-color-teal-0": string | RefferenceType;
-  "$g-color-teal-+1": string | RefferenceType;
-  "$g-color-teal-+2": string | RefferenceType;
-  "$g-color-teal-+3": string | RefferenceType;
-  "$g-color-teal-+4": string | RefferenceType;
-  "$g-color-teal-+5": string | RefferenceType;
-  "$g-color-teal-+6": string | RefferenceType;
-  "$g-color-teal-+7": string | RefferenceType;
-  "$g-color-teal-+8": string | RefferenceType;
-  "$g-color-aquamarine--4": string | RefferenceType;
-  "$g-color-aquamarine--3": string | RefferenceType;
-  "$g-color-aquamarine--2": string | RefferenceType;
-  "$g-color-aquamarine--1": string | RefferenceType;
-  "$g-color-aquamarine-0": string | RefferenceType;
-  "$g-color-aquamarine-+1": string | RefferenceType;
-  "$g-color-aquamarine-+2": string | RefferenceType;
-  "$g-color-aquamarine-+3": string | RefferenceType;
-  "$g-color-aquamarine-+4": string | RefferenceType;
-  "$g-color-aquamarine-+5": string | RefferenceType;
-  "$g-color-aquamarine-+6": string | RefferenceType;
-  "$g-color-aquamarine-+7": string | RefferenceType;
-  "$g-color-aquamarine-+8": string | RefferenceType;
-  "$g-color-green--4": string | RefferenceType;
-  "$g-color-green--3": string | RefferenceType;
-  "$g-color-green--2": string | RefferenceType;
-  "$g-color-green--1": string | RefferenceType;
-  "$g-color-green-0": string | RefferenceType;
-  "$g-color-green-+1": string | RefferenceType;
-  "$g-color-green-+2": string | RefferenceType;
-  "$g-color-green-+3": string | RefferenceType;
-  "$g-color-green-+4": string | RefferenceType;
-  "$g-color-green-+5": string | RefferenceType;
-  "$g-color-green-+6": string | RefferenceType;
-  "$g-color-green-+7": string | RefferenceType;
-  "$g-color-green-+8": string | RefferenceType;
-  "$g-color-emerald--4": string | RefferenceType;
-  "$g-color-emerald--3": string | RefferenceType;
-  "$g-color-emerald--2": string | RefferenceType;
-  "$g-color-emerald--1": string | RefferenceType;
-  "$g-color-emerald-0": string | RefferenceType;
-  "$g-color-emerald-+1": string | RefferenceType;
-  "$g-color-emerald-+2": string | RefferenceType;
-  "$g-color-emerald-+3": string | RefferenceType;
-  "$g-color-emerald-+4": string | RefferenceType;
-  "$g-color-emerald-+5": string | RefferenceType;
-  "$g-color-emerald-+6": string | RefferenceType;
-  "$g-color-emerald-+7": string | RefferenceType;
-  "$g-color-emerald-+8": string | RefferenceType;
-  "$g-color-orange--4": string | RefferenceType;
-  "$g-color-orange--3": string | RefferenceType;
-  "$g-color-orange--2": string | RefferenceType;
-  "$g-color-orange--1": string | RefferenceType;
-  "$g-color-orange-0": string | RefferenceType;
-  "$g-color-orange-+1": string | RefferenceType;
-  "$g-color-orange-+2": string | RefferenceType;
-  "$g-color-orange-+3": string | RefferenceType;
-  "$g-color-orange-+4": string | RefferenceType;
-  "$g-color-orange-+5": string | RefferenceType;
-  "$g-color-orange-+6": string | RefferenceType;
-  "$g-color-orange-+7": string | RefferenceType;
-  "$g-color-orange-+8": string | RefferenceType;
-  "$g-color-transparent": string | RefferenceType;
-  "$a-color-semantic-brand--4": string | RefferenceType;
-  "$a-color-semantic-brand--3": string | RefferenceType;
-  "$a-color-semantic-brand--2": string | RefferenceType;
-  "$a-color-semantic-brand--1": string | RefferenceType;
-  "$a-color-semantic-brand-0": string | RefferenceType;
-  "$a-color-semantic-brand-+1": string | RefferenceType;
-  "$a-color-semantic-brand-+2": string | RefferenceType;
-  "$a-color-semantic-brand-+3": string | RefferenceType;
-  "$a-color-semantic-brand-+4": string | RefferenceType;
-  "$a-color-semantic-brand-+5": string | RefferenceType;
-  "$a-color-semantic-brand-+6": string | RefferenceType;
-  "$a-color-semantic-brand-+7": string | RefferenceType;
-  "$a-color-semantic-brand-+8": string | RefferenceType;
-  "$a-color-semantic-informative--4": string | RefferenceType;
-  "$a-color-semantic-informative--3": string | RefferenceType;
-  "$a-color-semantic-informative--2": string | RefferenceType;
-  "$a-color-semantic-informative--1": string | RefferenceType;
-  "$a-color-semantic-informative-0": string | RefferenceType;
-  "$a-color-semantic-informative-+1": string | RefferenceType;
-  "$a-color-semantic-informative-+2": string | RefferenceType;
-  "$a-color-semantic-informative-+3": string | RefferenceType;
-  "$a-color-semantic-informative-+4": string | RefferenceType;
-  "$a-color-semantic-informative-+5": string | RefferenceType;
-  "$a-color-semantic-informative-+6": string | RefferenceType;
-  "$a-color-semantic-informative-+7": string | RefferenceType;
-  "$a-color-semantic-informative-+8": string | RefferenceType;
-  "$a-color-semantic-neutral--4": string | RefferenceType;
-  "$a-color-semantic-neutral--3": string | RefferenceType;
-  "$a-color-semantic-neutral--2": string | RefferenceType;
-  "$a-color-semantic-neutral--1": string | RefferenceType;
-  "$a-color-semantic-neutral-0": string | RefferenceType;
-  "$a-color-semantic-neutral-+1": string | RefferenceType;
-  "$a-color-semantic-neutral-+2": string | RefferenceType;
-  "$a-color-semantic-neutral-+3": string | RefferenceType;
-  "$a-color-semantic-neutral-+4": string | RefferenceType;
-  "$a-color-semantic-neutral-+5": string | RefferenceType;
-  "$a-color-semantic-neutral-+6": string | RefferenceType;
-  "$a-color-semantic-neutral-+7": string | RefferenceType;
-  "$a-color-semantic-neutral-+8": string | RefferenceType;
-  "$a-color-semantic-neutralA--4": string | RefferenceType;
-  "$a-color-semantic-neutralA--3": string | RefferenceType;
-  "$a-color-semantic-neutralA--2": string | RefferenceType;
-  "$a-color-semantic-neutralA--1": string | RefferenceType;
-  "$a-color-semantic-neutralA-0": string | RefferenceType;
-  "$a-color-semantic-neutralA-+1": string | RefferenceType;
-  "$a-color-semantic-neutralA-+2": string | RefferenceType;
-  "$a-color-semantic-neutralA-+3": string | RefferenceType;
-  "$a-color-semantic-neutralA-+4": string | RefferenceType;
-  "$a-color-semantic-neutralA-+5": string | RefferenceType;
-  "$a-color-semantic-neutralA-+6": string | RefferenceType;
-  "$a-color-semantic-neutralA-+7": string | RefferenceType;
-  "$a-color-semantic-neutralA-+8": string | RefferenceType;
-  "$a-color-semantic-positive--4": string | RefferenceType;
-  "$a-color-semantic-positive--3": string | RefferenceType;
-  "$a-color-semantic-positive--2": string | RefferenceType;
-  "$a-color-semantic-positive--1": string | RefferenceType;
-  "$a-color-semantic-positive-0": string | RefferenceType;
-  "$a-color-semantic-positive-+1": string | RefferenceType;
-  "$a-color-semantic-positive-+2": string | RefferenceType;
-  "$a-color-semantic-positive-+3": string | RefferenceType;
-  "$a-color-semantic-positive-+4": string | RefferenceType;
-  "$a-color-semantic-positive-+5": string | RefferenceType;
-  "$a-color-semantic-positive-+6": string | RefferenceType;
-  "$a-color-semantic-positive-+7": string | RefferenceType;
-  "$a-color-semantic-positive-+8": string | RefferenceType;
-  "$a-color-semantic-warning--4": string | RefferenceType;
-  "$a-color-semantic-warning--3": string | RefferenceType;
-  "$a-color-semantic-warning--2": string | RefferenceType;
-  "$a-color-semantic-warning--1": string | RefferenceType;
-  "$a-color-semantic-warning-0": string | RefferenceType;
-  "$a-color-semantic-warning-+1": string | RefferenceType;
-  "$a-color-semantic-warning-+2": string | RefferenceType;
-  "$a-color-semantic-warning-+3": string | RefferenceType;
-  "$a-color-semantic-warning-+4": string | RefferenceType;
-  "$a-color-semantic-warning-+5": string | RefferenceType;
-  "$a-color-semantic-warning-+6": string | RefferenceType;
-  "$a-color-semantic-warning-+7": string | RefferenceType;
-  "$a-color-semantic-warning-+8": string | RefferenceType;
-  "$a-color-semantic-negative--4": string | RefferenceType;
-  "$a-color-semantic-negative--3": string | RefferenceType;
-  "$a-color-semantic-negative--2": string | RefferenceType;
-  "$a-color-semantic-negative--1": string | RefferenceType;
-  "$a-color-semantic-negative-0": string | RefferenceType;
-  "$a-color-semantic-negative-+1": string | RefferenceType;
-  "$a-color-semantic-negative-+2": string | RefferenceType;
-  "$a-color-semantic-negative-+3": string | RefferenceType;
-  "$a-color-semantic-negative-+4": string | RefferenceType;
-  "$a-color-semantic-negative-+5": string | RefferenceType;
-  "$a-color-semantic-negative-+6": string | RefferenceType;
-  "$a-color-semantic-negative-+7": string | RefferenceType;
-  "$a-color-semantic-negative-+8": string | RefferenceType;
-  "$a-color-content-primary": string | RefferenceType;
-  "$a-color-content-secondary": string | RefferenceType;
-  "$a-color-content-tertiary": string | RefferenceType;
-  "$a-color-content-disabled": string | RefferenceType;
-  "$a-color-content-primary-inverted": string | RefferenceType;
-  "$a-color-content-secondary-inverted": string | RefferenceType;
-  "$a-color-content-tertiary-inverted": string | RefferenceType;
-  "$a-color-content-disabled-inverted": string | RefferenceType;
-  "$a-color-content-informative": string | RefferenceType;
-  "$a-color-content-positive": string | RefferenceType;
-  "$a-color-content-warning": string | RefferenceType;
-  "$a-color-content-negative": string | RefferenceType;
-  "$a-color-content-brand": string | RefferenceType;
-  "$a-color-border-neutral": string | RefferenceType;
-  "$a-color-border-informative": string | RefferenceType;
-  "$a-color-border-positive": string | RefferenceType;
-  "$a-color-border-warning": string | RefferenceType;
-  "$a-color-border-negative": string | RefferenceType;
-  "$a-color-border-brand": string | RefferenceType;
-  "$a-color-border-neutral-subtle": string | RefferenceType;
-  "$a-color-border-informative-subtle": string | RefferenceType;
-  "$a-color-border-positive-subtle": string | RefferenceType;
-  "$a-color-border-warning-subtle": string | RefferenceType;
-  "$a-color-border-negative-subtle": string | RefferenceType;
-  "$a-color-border-brand-subtle": string | RefferenceType;
-  "$a-color-border-inverted": string | RefferenceType;
-  "$a-color-border-default": string | RefferenceType;
-  "$a-color-background-default": string | RefferenceType;
-  "$a-color-background-inverted": string | RefferenceType;
-  "$a-color-background-neutral": string | RefferenceType;
-  "$a-color-background-informative": string | RefferenceType;
-  "$a-color-background-positive": string | RefferenceType;
-  "$a-color-background-warning": string | RefferenceType;
-  "$a-color-background-negative": string | RefferenceType;
-  "$a-color-background-brand": string | RefferenceType;
-  "$a-color-background-neutral-subtle": string | RefferenceType;
-  "$a-color-background-informative-subtle": string | RefferenceType;
-  "$a-color-background-positive-subtle": string | RefferenceType;
-  "$a-color-background-warning-subtle": string | RefferenceType;
-  "$a-color-background-negative-subtle": string | RefferenceType;
-  "$a-color-background-brand-subtle": string | RefferenceType;
-  "$a-color-background-neutral-surface": string | RefferenceType;
-  "$a-color-background-informative-surface": string | RefferenceType;
-  "$a-color-background-positive-surface": string | RefferenceType;
-  "$a-color-background-warning-surface": string | RefferenceType;
-  "$a-color-background-negative-surface": string | RefferenceType;
-  "$a-color-background-brand-surface": string | RefferenceType;
-  "$a-color-background-dimmer": string | RefferenceType;
-  "$a-color-action-primary-normal": string | RefferenceType;
-  "$a-color-action-primary-hover": string | RefferenceType;
-  "$a-color-action-primary-active": string | RefferenceType;
-  "$a-color-action-primary-selected": string | RefferenceType;
-  "$a-color-action-primary-subtle-normal": string | RefferenceType;
-  "$a-color-action-primary-subtle-hover": string | RefferenceType;
-  "$a-color-action-primary-subtle-active": string | RefferenceType;
-  "$a-color-action-primary-subtle-selected": string | RefferenceType;
-  "$a-color-action-neutral-normal": string | RefferenceType;
-  "$a-color-action-neutral-hover": string | RefferenceType;
-  "$a-color-action-neutral-active": string | RefferenceType;
-  "$a-color-action-neutral-selected": string | RefferenceType;
-  "$a-color-action-neutral-subtle-normal": string | RefferenceType;
-  "$a-color-action-neutral-subtle-hover": string | RefferenceType;
-  "$a-color-action-neutral-subtle-active": string | RefferenceType;
-  "$a-color-action-neutral-subtle-selected": string | RefferenceType;
-  "$a-color-action-success-normal": string | RefferenceType;
-  "$a-color-action-success-hover": string | RefferenceType;
-  "$a-color-action-success-active": string | RefferenceType;
-  "$a-color-action-success-selected": string | RefferenceType;
-  "$a-color-action-success-subtle-normal": string | RefferenceType;
-  "$a-color-action-success-subtle-hover": string | RefferenceType;
-  "$a-color-action-success-subtle-active": string | RefferenceType;
-  "$a-color-action-success-subtle-selected": string | RefferenceType;
-  "$a-color-action-destructive-normal": string | RefferenceType;
-  "$a-color-action-destructive-hover": string | RefferenceType;
-  "$a-color-action-destructive-active": string | RefferenceType;
-  "$a-color-action-destructive-selected": string | RefferenceType;
-  "$a-color-action-destructive-subtle-normal": string | RefferenceType;
-  "$a-color-action-destructive-subtle-hover": string | RefferenceType;
-  "$a-color-action-destructive-subtle-active": string | RefferenceType;
-  "$a-color-action-destructive-subtle-selected": string | RefferenceType;
-  "$a-color-action-ghost-normal": string | RefferenceType;
-  "$a-color-action-ghost-hover": string | RefferenceType;
-  "$a-color-action-ghost-active": string | RefferenceType;
-  "$a-color-action-ghost-selected": string | RefferenceType;
-  "$a-color-action-ghost-inverted-hover": string | RefferenceType;
-  "$a-color-action-ghost-inverted-active": string | RefferenceType;
-  "$a-color-action-ghost-inverted-selected": string | RefferenceType;
-  "$a-color-action-ghost-destructive-hover": string | RefferenceType;
-  "$a-color-action-ghost-destructive-active": string | RefferenceType;
-  "$a-color-action-ghost-destructive-selected": string | RefferenceType;
-  "$a-color-action-outline-normal": string | RefferenceType;
-  "$a-color-action-outline-hover": string | RefferenceType;
-  "$a-color-action-outline-active": string | RefferenceType;
-  "$a-color-action-outline-selected": string | RefferenceType;
-  "$a-color-action-inverted-normal": string | RefferenceType;
-  "$a-color-action-inverted-hover": string | RefferenceType;
-  "$a-color-action-inverted-active": string | RefferenceType;
-  "$a-color-action-inverted-selected": string | RefferenceType;
-  "$a-color-action-reverseInverted-normal": string | RefferenceType;
-  "$a-color-action-reverseInverted-hover": string | RefferenceType;
-  "$a-color-action-reverseInverted-active": string | RefferenceType;
-  "$a-color-action-reverseInverted-selected": string | RefferenceType;
-  "$a-color-interaction-default-normal": string | RefferenceType;
-  "$a-color-interaction-default-hover": string | RefferenceType;
-  "$a-color-interaction-default-active": string | RefferenceType;
-  "$a-color-interaction-default-selected": string | RefferenceType;
-  "$a-color-interaction-default-subtle-normal": string | RefferenceType;
-  "$a-color-interaction-default-subtle-hover": string | RefferenceType;
-  "$a-color-interaction-default-subtle-active": string | RefferenceType;
-  "$a-color-interaction-default-subtle-selected": string | RefferenceType;
-  "$a-color-interaction-neutral-normal": string | RefferenceType;
-  "$a-color-interaction-neutral-hover": string | RefferenceType;
-  "$a-color-interaction-neutral-active": string | RefferenceType;
-  "$a-color-interaction-neutral-selected": string | RefferenceType;
-  "$a-color-interaction-neutral-subtle-normal": string | RefferenceType;
-  "$a-color-interaction-neutral-subtle-hover": string | RefferenceType;
-  "$a-color-interaction-neutral-subtle-active": string | RefferenceType;
-  "$a-color-interaction-neutral-subtle-selected": string | RefferenceType;
-  "$a-color-interaction-alert-normal": string | RefferenceType;
-  "$a-color-interaction-alert-hover": string | RefferenceType;
-  "$a-color-interaction-alert-active": string | RefferenceType;
-  "$a-color-interaction-alert-selected": string | RefferenceType;
-  "$a-color-interaction-alert-subtle-normal": string | RefferenceType;
-  "$a-color-interaction-alert-subtle-hover": string | RefferenceType;
-  "$a-color-interaction-alert-subtle-active": string | RefferenceType;
-  "$a-color-interaction-alert-subtle-selected": string | RefferenceType;
-  "$a-color-interaction-ghost-normal": string | RefferenceType;
-  "$a-color-interaction-ghost-hover": string | RefferenceType;
-  "$a-color-interaction-ghost-active": string | RefferenceType;
-  "$a-color-interaction-ghost-selected": string | RefferenceType;
-  "$a-color-interaction-ghost-inverted-hover": string | RefferenceType;
-  "$a-color-interaction-ghost-inverted-normal": string | RefferenceType;
-  "$a-color-interaction-ghost-inverted-selected": string | RefferenceType;
-  "$a-color-interaction-ghost-destructive-hover": string | RefferenceType;
-  "$a-color-interaction-ghost-destructive-normal": string | RefferenceType;
-  "$a-color-interaction-ghost-destructive-selected": string | RefferenceType;
-  "$a-color-interaction-disabled-normal": string | RefferenceType;
-  "$a-color-interaction-disabled-hover": string | RefferenceType;
-  "$a-color-interaction-disabled-active": string | RefferenceType;
-  "$a-color-interaction-disabled-subtle-normal": string | RefferenceType;
-  "$a-color-interaction-disabled-subtle-hover": string | RefferenceType;
-  "$a-color-interaction-disabled-subtle-active": string | RefferenceType;
-  "$a-color-interaction-border-normal": string | RefferenceType;
-  "$a-color-interaction-border-hover": string | RefferenceType;
-  "$a-color-interaction-border-active": string | RefferenceType;
-  "$a-color-interaction-border-selected": string | RefferenceType;
-  "$a-color-interaction-border-neutral-normal": string | RefferenceType;
-  "$a-color-interaction-border-neutral-hover": string | RefferenceType;
-  "$a-color-interaction-border-neutral-active": string | RefferenceType;
-  "$a-color-interaction-border-neutral-selected": string | RefferenceType;
-  "$a-color-interaction-border-alert": string | RefferenceType;
-  "$a-color-interaction-background-modal": string | RefferenceType;
-  "$a-color-interaction-background-modeless": string | RefferenceType;
-  "$a-color-interaction-background-modeless-inverted": string | RefferenceType;
-  "$a-color-interaction-background-sidepanel": string | RefferenceType;
-  "$a-color-interaction-background-formField": string | RefferenceType;
-  "$a-color-interaction-inverted-normal": string | RefferenceType;
-  "$a-color-interaction-inverted-hover": string | RefferenceType;
-  "$a-color-interaction-inverted-active": string | RefferenceType;
-  "$a-color-interaction-inverted-selected": string | RefferenceType;
-  "$a-color-interaction-focus-default": string | RefferenceType;
-  "$a-color-nonContextual-grey-onMuted": string | RefferenceType;
-  "$a-color-nonContextual-grey-default": string | RefferenceType;
-  "$a-color-nonContextual-grey-muted": string | RefferenceType;
-  "$a-color-nonContextual-grey-subtle": string | RefferenceType;
-  "$a-color-nonContextual-grey-surface": string | RefferenceType;
-  "$a-color-nonContextual-red-onMuted": string | RefferenceType;
-  "$a-color-nonContextual-red-default": string | RefferenceType;
-  "$a-color-nonContextual-red-muted": string | RefferenceType;
-  "$a-color-nonContextual-red-subtle": string | RefferenceType;
-  "$a-color-nonContextual-red-surface": string | RefferenceType;
-  "$a-color-nonContextual-raspberry-onMuted": string | RefferenceType;
-  "$a-color-nonContextual-raspberry-default": string | RefferenceType;
-  "$a-color-nonContextual-raspberry-muted": string | RefferenceType;
-  "$a-color-nonContextual-raspberry-subtle": string | RefferenceType;
-  "$a-color-nonContextual-raspberry-surface": string | RefferenceType;
-  "$a-color-nonContextual-magenta-onMuted": string | RefferenceType;
-  "$a-color-nonContextual-magenta-default": string | RefferenceType;
-  "$a-color-nonContextual-magenta-muted": string | RefferenceType;
-  "$a-color-nonContextual-magenta-subtle": string | RefferenceType;
-  "$a-color-nonContextual-magenta-surface": string | RefferenceType;
-  "$a-color-nonContextual-purple-onMuted": string | RefferenceType;
-  "$a-color-nonContextual-purple-default": string | RefferenceType;
-  "$a-color-nonContextual-purple-muted": string | RefferenceType;
-  "$a-color-nonContextual-purple-subtle": string | RefferenceType;
-  "$a-color-nonContextual-purple-surface": string | RefferenceType;
-  "$a-color-nonContextual-grape-onMuted": string | RefferenceType;
-  "$a-color-nonContextual-grape-default": string | RefferenceType;
-  "$a-color-nonContextual-grape-muted": string | RefferenceType;
-  "$a-color-nonContextual-grape-subtle": string | RefferenceType;
-  "$a-color-nonContextual-grape-surface": string | RefferenceType;
-  "$a-color-nonContextual-violet-onMuted": string | RefferenceType;
-  "$a-color-nonContextual-violet-default": string | RefferenceType;
-  "$a-color-nonContextual-violet-muted": string | RefferenceType;
-  "$a-color-nonContextual-violet-subtle": string | RefferenceType;
-  "$a-color-nonContextual-violet-surface": string | RefferenceType;
-  "$a-color-nonContextual-blue-onMuted": string | RefferenceType;
-  "$a-color-nonContextual-blue-default": string | RefferenceType;
-  "$a-color-nonContextual-blue-muted": string | RefferenceType;
-  "$a-color-nonContextual-blue-subtle": string | RefferenceType;
-  "$a-color-nonContextual-blue-surface": string | RefferenceType;
-  "$a-color-nonContextual-cyan-onMuted": string | RefferenceType;
-  "$a-color-nonContextual-cyan-default": string | RefferenceType;
-  "$a-color-nonContextual-cyan-muted": string | RefferenceType;
-  "$a-color-nonContextual-cyan-subtle": string | RefferenceType;
-  "$a-color-nonContextual-cyan-surface": string | RefferenceType;
-  "$a-color-nonContextual-teal-onMuted": string | RefferenceType;
-  "$a-color-nonContextual-teal-default": string | RefferenceType;
-  "$a-color-nonContextual-teal-muted": string | RefferenceType;
-  "$a-color-nonContextual-teal-subtle": string | RefferenceType;
-  "$a-color-nonContextual-teal-surface": string | RefferenceType;
-  "$a-color-nonContextual-aquamarine-onMuted": string | RefferenceType;
-  "$a-color-nonContextual-aquamarine-default": string | RefferenceType;
-  "$a-color-nonContextual-aquamarine-muted": string | RefferenceType;
-  "$a-color-nonContextual-aquamarine-subtle": string | RefferenceType;
-  "$a-color-nonContextual-aquamarine-surface": string | RefferenceType;
-  "$a-color-nonContextual-green-onMuted": string | RefferenceType;
-  "$a-color-nonContextual-green-default": string | RefferenceType;
-  "$a-color-nonContextual-green-muted": string | RefferenceType;
-  "$a-color-nonContextual-green-subtle": string | RefferenceType;
-  "$a-color-nonContextual-green-surface": string | RefferenceType;
-  "$a-color-nonContextual-emerald-onMuted": string | RefferenceType;
-  "$a-color-nonContextual-emerald-default": string | RefferenceType;
-  "$a-color-nonContextual-emerald-muted": string | RefferenceType;
-  "$a-color-nonContextual-emerald-subtle": string | RefferenceType;
-  "$a-color-nonContextual-emerald-surface": string | RefferenceType;
-  "$a-color-border-defaultA": string | RefferenceType;
-  "$a-color-nonContextual-orange-onMuted": string | RefferenceType;
-  "$a-color-nonContextual-orange-default": string | RefferenceType;
-  "$a-color-nonContextual-orange-muted": string | RefferenceType;
-  "$a-color-nonContextual-orange-subtle": string | RefferenceType;
-  "$a-color-nonContextual-orange-surface": string | RefferenceType;
+  "coolGrey--4": string | RefferenceType;
+  "coolGrey--3": string | RefferenceType;
+  "coolGrey--2": string | RefferenceType;
+  "coolGrey--1": string | RefferenceType;
+  "coolGrey-0": string | RefferenceType;
+  "coolGrey-+1": string | RefferenceType;
+  "coolGrey-+2": string | RefferenceType;
+  "coolGrey-+3": string | RefferenceType;
+  "coolGrey-+4": string | RefferenceType;
+  "coolGrey-+5": string | RefferenceType;
+  "coolGrey-+6": string | RefferenceType;
+  "coolGrey-+7": string | RefferenceType;
+  "coolGrey-+8": string | RefferenceType;
+  "coolGreyA--4": string | RefferenceType;
+  "coolGreyA--3": string | RefferenceType;
+  "coolGreyA--2": string | RefferenceType;
+  "coolGreyA--1": string | RefferenceType;
+  "coolGreyA-0": string | RefferenceType;
+  "coolGreyA-+1": string | RefferenceType;
+  "coolGreyA-+2": string | RefferenceType;
+  "coolGreyA-+3": string | RefferenceType;
+  "coolGreyA-+4": string | RefferenceType;
+  "coolGreyA-+5": string | RefferenceType;
+  "coolGreyA-+6": string | RefferenceType;
+  "coolGreyA-+7": string | RefferenceType;
+  "coolGreyA-+8": string | RefferenceType;
+  "neutralGrey--4": string | RefferenceType;
+  "neutralGrey--3": string | RefferenceType;
+  "neutralGrey--2": string | RefferenceType;
+  "neutralGrey--1": string | RefferenceType;
+  "neutralGrey-0": string | RefferenceType;
+  "neutralGrey-+1": string | RefferenceType;
+  "neutralGrey-+2": string | RefferenceType;
+  "neutralGrey-+3": string | RefferenceType;
+  "neutralGrey-+4": string | RefferenceType;
+  "neutralGrey-+5": string | RefferenceType;
+  "neutralGrey-+6": string | RefferenceType;
+  "neutralGrey-+7": string | RefferenceType;
+  "neutralGrey-+8": string | RefferenceType;
+  "neutralGreyA--4": string | RefferenceType;
+  "neutralGreyA--3": string | RefferenceType;
+  "neutralGreyA--2": string | RefferenceType;
+  "neutralGreyA--1": string | RefferenceType;
+  "neutralGreyA-0": string | RefferenceType;
+  "neutralGreyA-+1": string | RefferenceType;
+  "neutralGreyA-+2": string | RefferenceType;
+  "neutralGreyA-+3": string | RefferenceType;
+  "neutralGreyA-+4": string | RefferenceType;
+  "neutralGreyA-+5": string | RefferenceType;
+  "neutralGreyA-+6": string | RefferenceType;
+  "neutralGreyA-+7": string | RefferenceType;
+  "neutralGreyA-+8": string | RefferenceType;
+  "warmGrey--4": string | RefferenceType;
+  "warmGrey--3": string | RefferenceType;
+  "warmGrey--2": string | RefferenceType;
+  "warmGrey--1": string | RefferenceType;
+  "warmGrey-0": string | RefferenceType;
+  "warmGrey-+1": string | RefferenceType;
+  "warmGrey-+2": string | RefferenceType;
+  "warmGrey-+3": string | RefferenceType;
+  "warmGrey-+4": string | RefferenceType;
+  "warmGrey-+5": string | RefferenceType;
+  "warmGrey-+6": string | RefferenceType;
+  "warmGrey-+7": string | RefferenceType;
+  "warmGrey-+8": string | RefferenceType;
+  "warmGreyA--4": string | RefferenceType;
+  "warmGreyA--3": string | RefferenceType;
+  "warmGreyA--2": string | RefferenceType;
+  "warmGreyA--1": string | RefferenceType;
+  "warmGreyA-0": string | RefferenceType;
+  "warmGreyA-+1": string | RefferenceType;
+  "warmGreyA-+2": string | RefferenceType;
+  "warmGreyA-+3": string | RefferenceType;
+  "warmGreyA-+4": string | RefferenceType;
+  "warmGreyA-+5": string | RefferenceType;
+  "warmGreyA-+6": string | RefferenceType;
+  "warmGreyA-+7": string | RefferenceType;
+  "warmGreyA-+8": string | RefferenceType;
+  "whiteA--12": string | RefferenceType;
+  "whiteA--11": string | RefferenceType;
+  "whiteA--10": string | RefferenceType;
+  "whiteA--9": string | RefferenceType;
+  "whiteA--8": string | RefferenceType;
+  "whiteA--7": string | RefferenceType;
+  "whiteA--6": string | RefferenceType;
+  "whiteA--5": string | RefferenceType;
+  "whiteA--4": string | RefferenceType;
+  "whiteA--3": string | RefferenceType;
+  "whiteA--2": string | RefferenceType;
+  "whiteA--1": string | RefferenceType;
+  "whiteA-0": string | RefferenceType;
+  "red--4": string | RefferenceType;
+  "red--3": string | RefferenceType;
+  "red--2": string | RefferenceType;
+  "red--1": string | RefferenceType;
+  "red-0": string | RefferenceType;
+  "red-+1": string | RefferenceType;
+  "red-+2": string | RefferenceType;
+  "red-+3": string | RefferenceType;
+  "red-+4": string | RefferenceType;
+  "red-+5": string | RefferenceType;
+  "red-+6": string | RefferenceType;
+  "red-+7": string | RefferenceType;
+  "red-+8": string | RefferenceType;
+  "raspberry--4": string | RefferenceType;
+  "raspberry--3": string | RefferenceType;
+  "raspberry--2": string | RefferenceType;
+  "raspberry--1": string | RefferenceType;
+  "raspberry-0": string | RefferenceType;
+  "raspberry-+1": string | RefferenceType;
+  "raspberry-+2": string | RefferenceType;
+  "raspberry-+3": string | RefferenceType;
+  "raspberry-+4": string | RefferenceType;
+  "raspberry-+5": string | RefferenceType;
+  "raspberry-+6": string | RefferenceType;
+  "raspberry-+7": string | RefferenceType;
+  "raspberry-+8": string | RefferenceType;
+  "magenta--4": string | RefferenceType;
+  "magenta--3": string | RefferenceType;
+  "magenta--2": string | RefferenceType;
+  "magenta--1": string | RefferenceType;
+  "magenta-0": string | RefferenceType;
+  "magenta-+1": string | RefferenceType;
+  "magenta-+2": string | RefferenceType;
+  "magenta-+3": string | RefferenceType;
+  "magenta-+4": string | RefferenceType;
+  "magenta-+5": string | RefferenceType;
+  "magenta-+6": string | RefferenceType;
+  "magenta-+7": string | RefferenceType;
+  "magenta-+8": string | RefferenceType;
+  "purple--4": string | RefferenceType;
+  "purple--3": string | RefferenceType;
+  "purple--2": string | RefferenceType;
+  "purple--1": string | RefferenceType;
+  "purple-0": string | RefferenceType;
+  "purple-+1": string | RefferenceType;
+  "purple-+2": string | RefferenceType;
+  "purple-+3": string | RefferenceType;
+  "purple-+4": string | RefferenceType;
+  "purple-+5": string | RefferenceType;
+  "purple-+6": string | RefferenceType;
+  "purple-+7": string | RefferenceType;
+  "purple-+8": string | RefferenceType;
+  "grape--4": string | RefferenceType;
+  "grape--3": string | RefferenceType;
+  "grape--2": string | RefferenceType;
+  "grape--1": string | RefferenceType;
+  "grape-0": string | RefferenceType;
+  "grape-+1": string | RefferenceType;
+  "grape-+2": string | RefferenceType;
+  "grape-+3": string | RefferenceType;
+  "grape-+4": string | RefferenceType;
+  "grape-+5": string | RefferenceType;
+  "grape-+6": string | RefferenceType;
+  "grape-+7": string | RefferenceType;
+  "grape-+8": string | RefferenceType;
+  "violet--4": string | RefferenceType;
+  "violet--3": string | RefferenceType;
+  "violet--2": string | RefferenceType;
+  "violet--1": string | RefferenceType;
+  "violet-0": string | RefferenceType;
+  "violet-+1": string | RefferenceType;
+  "violet-+2": string | RefferenceType;
+  "violet-+3": string | RefferenceType;
+  "violet-+4": string | RefferenceType;
+  "violet-+5": string | RefferenceType;
+  "violet-+6": string | RefferenceType;
+  "violet-+7": string | RefferenceType;
+  "violet-+8": string | RefferenceType;
+  "blue--4": string | RefferenceType;
+  "blue--3": string | RefferenceType;
+  "blue--2": string | RefferenceType;
+  "blue--1": string | RefferenceType;
+  "blue-0": string | RefferenceType;
+  "blue-+1": string | RefferenceType;
+  "blue-+2": string | RefferenceType;
+  "blue-+3": string | RefferenceType;
+  "blue-+4": string | RefferenceType;
+  "blue-+5": string | RefferenceType;
+  "blue-+6": string | RefferenceType;
+  "blue-+7": string | RefferenceType;
+  "blue-+8": string | RefferenceType;
+  "cyan--4": string | RefferenceType;
+  "cyan--3": string | RefferenceType;
+  "cyan--2": string | RefferenceType;
+  "cyan--1": string | RefferenceType;
+  "cyan-0": string | RefferenceType;
+  "cyan-+1": string | RefferenceType;
+  "cyan-+2": string | RefferenceType;
+  "cyan-+3": string | RefferenceType;
+  "cyan-+4": string | RefferenceType;
+  "cyan-+5": string | RefferenceType;
+  "cyan-+6": string | RefferenceType;
+  "cyan-+7": string | RefferenceType;
+  "cyan-+8": string | RefferenceType;
+  "teal--4": string | RefferenceType;
+  "teal--3": string | RefferenceType;
+  "teal--2": string | RefferenceType;
+  "teal--1": string | RefferenceType;
+  "teal-0": string | RefferenceType;
+  "teal-+1": string | RefferenceType;
+  "teal-+2": string | RefferenceType;
+  "teal-+3": string | RefferenceType;
+  "teal-+4": string | RefferenceType;
+  "teal-+5": string | RefferenceType;
+  "teal-+6": string | RefferenceType;
+  "teal-+7": string | RefferenceType;
+  "teal-+8": string | RefferenceType;
+  "aquamarine--4": string | RefferenceType;
+  "aquamarine--3": string | RefferenceType;
+  "aquamarine--2": string | RefferenceType;
+  "aquamarine--1": string | RefferenceType;
+  "aquamarine-0": string | RefferenceType;
+  "aquamarine-+1": string | RefferenceType;
+  "aquamarine-+2": string | RefferenceType;
+  "aquamarine-+3": string | RefferenceType;
+  "aquamarine-+4": string | RefferenceType;
+  "aquamarine-+5": string | RefferenceType;
+  "aquamarine-+6": string | RefferenceType;
+  "aquamarine-+7": string | RefferenceType;
+  "aquamarine-+8": string | RefferenceType;
+  "green--4": string | RefferenceType;
+  "green--3": string | RefferenceType;
+  "green--2": string | RefferenceType;
+  "green--1": string | RefferenceType;
+  "green-0": string | RefferenceType;
+  "green-+1": string | RefferenceType;
+  "green-+2": string | RefferenceType;
+  "green-+3": string | RefferenceType;
+  "green-+4": string | RefferenceType;
+  "green-+5": string | RefferenceType;
+  "green-+6": string | RefferenceType;
+  "green-+7": string | RefferenceType;
+  "green-+8": string | RefferenceType;
+  "emerald--4": string | RefferenceType;
+  "emerald--3": string | RefferenceType;
+  "emerald--2": string | RefferenceType;
+  "emerald--1": string | RefferenceType;
+  "emerald-0": string | RefferenceType;
+  "emerald-+1": string | RefferenceType;
+  "emerald-+2": string | RefferenceType;
+  "emerald-+3": string | RefferenceType;
+  "emerald-+4": string | RefferenceType;
+  "emerald-+5": string | RefferenceType;
+  "emerald-+6": string | RefferenceType;
+  "emerald-+7": string | RefferenceType;
+  "emerald-+8": string | RefferenceType;
+  "orange--4": string | RefferenceType;
+  "orange--3": string | RefferenceType;
+  "orange--2": string | RefferenceType;
+  "orange--1": string | RefferenceType;
+  "orange-0": string | RefferenceType;
+  "orange-+1": string | RefferenceType;
+  "orange-+2": string | RefferenceType;
+  "orange-+3": string | RefferenceType;
+  "orange-+4": string | RefferenceType;
+  "orange-+5": string | RefferenceType;
+  "orange-+6": string | RefferenceType;
+  "orange-+7": string | RefferenceType;
+  "orange-+8": string | RefferenceType;
+  transparent: string | RefferenceType;
+  "semantic-brand--4": string | RefferenceType;
+  "semantic-brand--3": string | RefferenceType;
+  "semantic-brand--2": string | RefferenceType;
+  "semantic-brand--1": string | RefferenceType;
+  "semantic-brand-0": string | RefferenceType;
+  "semantic-brand-+1": string | RefferenceType;
+  "semantic-brand-+2": string | RefferenceType;
+  "semantic-brand-+3": string | RefferenceType;
+  "semantic-brand-+4": string | RefferenceType;
+  "semantic-brand-+5": string | RefferenceType;
+  "semantic-brand-+6": string | RefferenceType;
+  "semantic-brand-+7": string | RefferenceType;
+  "semantic-brand-+8": string | RefferenceType;
+  "semantic-informative--4": string | RefferenceType;
+  "semantic-informative--3": string | RefferenceType;
+  "semantic-informative--2": string | RefferenceType;
+  "semantic-informative--1": string | RefferenceType;
+  "semantic-informative-0": string | RefferenceType;
+  "semantic-informative-+1": string | RefferenceType;
+  "semantic-informative-+2": string | RefferenceType;
+  "semantic-informative-+3": string | RefferenceType;
+  "semantic-informative-+4": string | RefferenceType;
+  "semantic-informative-+5": string | RefferenceType;
+  "semantic-informative-+6": string | RefferenceType;
+  "semantic-informative-+7": string | RefferenceType;
+  "semantic-informative-+8": string | RefferenceType;
+  "semantic-neutral--4": string | RefferenceType;
+  "semantic-neutral--3": string | RefferenceType;
+  "semantic-neutral--2": string | RefferenceType;
+  "semantic-neutral--1": string | RefferenceType;
+  "semantic-neutral-0": string | RefferenceType;
+  "semantic-neutral-+1": string | RefferenceType;
+  "semantic-neutral-+2": string | RefferenceType;
+  "semantic-neutral-+3": string | RefferenceType;
+  "semantic-neutral-+4": string | RefferenceType;
+  "semantic-neutral-+5": string | RefferenceType;
+  "semantic-neutral-+6": string | RefferenceType;
+  "semantic-neutral-+7": string | RefferenceType;
+  "semantic-neutral-+8": string | RefferenceType;
+  "semantic-neutralA--4": string | RefferenceType;
+  "semantic-neutralA--3": string | RefferenceType;
+  "semantic-neutralA--2": string | RefferenceType;
+  "semantic-neutralA--1": string | RefferenceType;
+  "semantic-neutralA-0": string | RefferenceType;
+  "semantic-neutralA-+1": string | RefferenceType;
+  "semantic-neutralA-+2": string | RefferenceType;
+  "semantic-neutralA-+3": string | RefferenceType;
+  "semantic-neutralA-+4": string | RefferenceType;
+  "semantic-neutralA-+5": string | RefferenceType;
+  "semantic-neutralA-+6": string | RefferenceType;
+  "semantic-neutralA-+7": string | RefferenceType;
+  "semantic-neutralA-+8": string | RefferenceType;
+  "semantic-positive--4": string | RefferenceType;
+  "semantic-positive--3": string | RefferenceType;
+  "semantic-positive--2": string | RefferenceType;
+  "semantic-positive--1": string | RefferenceType;
+  "semantic-positive-0": string | RefferenceType;
+  "semantic-positive-+1": string | RefferenceType;
+  "semantic-positive-+2": string | RefferenceType;
+  "semantic-positive-+3": string | RefferenceType;
+  "semantic-positive-+4": string | RefferenceType;
+  "semantic-positive-+5": string | RefferenceType;
+  "semantic-positive-+6": string | RefferenceType;
+  "semantic-positive-+7": string | RefferenceType;
+  "semantic-positive-+8": string | RefferenceType;
+  "semantic-warning--4": string | RefferenceType;
+  "semantic-warning--3": string | RefferenceType;
+  "semantic-warning--2": string | RefferenceType;
+  "semantic-warning--1": string | RefferenceType;
+  "semantic-warning-0": string | RefferenceType;
+  "semantic-warning-+1": string | RefferenceType;
+  "semantic-warning-+2": string | RefferenceType;
+  "semantic-warning-+3": string | RefferenceType;
+  "semantic-warning-+4": string | RefferenceType;
+  "semantic-warning-+5": string | RefferenceType;
+  "semantic-warning-+6": string | RefferenceType;
+  "semantic-warning-+7": string | RefferenceType;
+  "semantic-warning-+8": string | RefferenceType;
+  "semantic-negative--4": string | RefferenceType;
+  "semantic-negative--3": string | RefferenceType;
+  "semantic-negative--2": string | RefferenceType;
+  "semantic-negative--1": string | RefferenceType;
+  "semantic-negative-0": string | RefferenceType;
+  "semantic-negative-+1": string | RefferenceType;
+  "semantic-negative-+2": string | RefferenceType;
+  "semantic-negative-+3": string | RefferenceType;
+  "semantic-negative-+4": string | RefferenceType;
+  "semantic-negative-+5": string | RefferenceType;
+  "semantic-negative-+6": string | RefferenceType;
+  "semantic-negative-+7": string | RefferenceType;
+  "semantic-negative-+8": string | RefferenceType;
+  "content-primary": string | RefferenceType;
+  "content-secondary": string | RefferenceType;
+  "content-tertiary": string | RefferenceType;
+  "content-disabled": string | RefferenceType;
+  "content-primary-inverted": string | RefferenceType;
+  "content-secondary-inverted": string | RefferenceType;
+  "content-tertiary-inverted": string | RefferenceType;
+  "content-disabled-inverted": string | RefferenceType;
+  "content-informative-secondary": string | RefferenceType;
+  "content-positive-secondary": string | RefferenceType;
+  "content-warning-secondary": string | RefferenceType;
+  "content-negative-secondary": string | RefferenceType;
+  "content-brand-secondary": string | RefferenceType;
+  "border-neutral-strong": string | RefferenceType;
+  "border-informative-strong": string | RefferenceType;
+  "border-positive-strong": string | RefferenceType;
+  "border-warning-strong": string | RefferenceType;
+  "border-negative-strong": string | RefferenceType;
+  "border-brand-strong": string | RefferenceType;
+  "border-neutral-subtle": string | RefferenceType;
+  "border-informative-subtle": string | RefferenceType;
+  "border-positive-subtle": string | RefferenceType;
+  "border-warning-subtle": string | RefferenceType;
+  "border-negative-subtle": string | RefferenceType;
+  "border-brand-subtle": string | RefferenceType;
+  "border-inverted": string | RefferenceType;
+  "border-default": string | RefferenceType;
+  "background-default": string | RefferenceType;
+  "background-inverted": string | RefferenceType;
+  "background-neutral-strong": string | RefferenceType;
+  "background-informative-strong": string | RefferenceType;
+  "background-positive-strong": string | RefferenceType;
+  "background-warning-strong": string | RefferenceType;
+  "background-negative-strong": string | RefferenceType;
+  "background-brand-strong": string | RefferenceType;
+  "background-neutral-subtle": string | RefferenceType;
+  "background-informative-subtle": string | RefferenceType;
+  "background-positive-subtle": string | RefferenceType;
+  "background-warning-subtle": string | RefferenceType;
+  "background-negative-subtle": string | RefferenceType;
+  "background-brand-subtle": string | RefferenceType;
+  "background-neutral-surface": string | RefferenceType;
+  "background-informative-surface": string | RefferenceType;
+  "background-positive-surface": string | RefferenceType;
+  "background-warning-surface": string | RefferenceType;
+  "background-negative-surface": string | RefferenceType;
+  "background-brand-surface": string | RefferenceType;
+  "interaction-background-dimmer": string | RefferenceType;
+  "action-primary-normal": string | RefferenceType;
+  "action-primary-hover": string | RefferenceType;
+  "action-primary-active": string | RefferenceType;
+  "action-primary-selected": string | RefferenceType;
+  "action-primary-subtle-normal": string | RefferenceType;
+  "action-primary-subtle-hover": string | RefferenceType;
+  "action-primary-subtle-active": string | RefferenceType;
+  "action-primary-subtle-selected": string | RefferenceType;
+  "action-neutral-normal": string | RefferenceType;
+  "action-neutral-hover": string | RefferenceType;
+  "action-neutral-active": string | RefferenceType;
+  "action-neutral-selected": string | RefferenceType;
+  "action-neutral-subtle-normal": string | RefferenceType;
+  "action-neutral-subtle-hover": string | RefferenceType;
+  "action-neutral-subtle-active": string | RefferenceType;
+  "action-neutral-subtle-selected": string | RefferenceType;
+  "action-success-normal": string | RefferenceType;
+  "action-success-hover": string | RefferenceType;
+  "action-success-active": string | RefferenceType;
+  "action-success-selected": string | RefferenceType;
+  "action-success-subtle-normal": string | RefferenceType;
+  "action-success-subtle-hover": string | RefferenceType;
+  "action-success-subtle-active": string | RefferenceType;
+  "action-success-subtle-selected": string | RefferenceType;
+  "action-destructive-normal": string | RefferenceType;
+  "action-destructive-hover": string | RefferenceType;
+  "action-destructive-active": string | RefferenceType;
+  "action-destructive-selected": string | RefferenceType;
+  "action-destructive-subtle-normal": string | RefferenceType;
+  "action-destructive-subtle-hover": string | RefferenceType;
+  "action-destructive-subtle-active": string | RefferenceType;
+  "action-destructive-subtle-selected": string | RefferenceType;
+  "action-ghost-normal": string | RefferenceType;
+  "action-ghost-hover": string | RefferenceType;
+  "action-ghost-active": string | RefferenceType;
+  "action-ghost-selected": string | RefferenceType;
+  "action-ghost-inverted-hover": string | RefferenceType;
+  "action-ghost-inverted-active": string | RefferenceType;
+  "action-ghost-inverted-selected": string | RefferenceType;
+  "action-ghost-destructive-hover": string | RefferenceType;
+  "action-ghost-destructive-active": string | RefferenceType;
+  "action-ghost-destructive-selected": string | RefferenceType;
+  "action-outline-normal": string | RefferenceType;
+  "action-outline-hover": string | RefferenceType;
+  "action-outline-active": string | RefferenceType;
+  "action-outline-selected": string | RefferenceType;
+  "action-inverted-normal": string | RefferenceType;
+  "action-inverted-hover": string | RefferenceType;
+  "action-inverted-active": string | RefferenceType;
+  "action-inverted-selected": string | RefferenceType;
+  "action-reverseInverted-normal": string | RefferenceType;
+  "action-reverseInverted-hover": string | RefferenceType;
+  "action-reverseInverted-active": string | RefferenceType;
+  "action-reverseInverted-selected": string | RefferenceType;
+  "interaction-default-normal": string | RefferenceType;
+  "interaction-default-hover": string | RefferenceType;
+  "interaction-default-active": string | RefferenceType;
+  "interaction-default-selected": string | RefferenceType;
+  "interaction-default-subtle-normal": string | RefferenceType;
+  "interaction-default-subtle-hover": string | RefferenceType;
+  "interaction-default-subtle-active": string | RefferenceType;
+  "interaction-default-subtle-selected": string | RefferenceType;
+  "interaction-neutral-normal": string | RefferenceType;
+  "interaction-neutral-hover": string | RefferenceType;
+  "interaction-neutral-active": string | RefferenceType;
+  "interaction-neutral-selected": string | RefferenceType;
+  "interaction-neutral-subtle-normal": string | RefferenceType;
+  "interaction-neutral-subtle-hover": string | RefferenceType;
+  "interaction-neutral-subtle-active": string | RefferenceType;
+  "interaction-neutral-subtle-selected": string | RefferenceType;
+  "interaction-alert-normal": string | RefferenceType;
+  "interaction-alert-hover": string | RefferenceType;
+  "interaction-alert-active": string | RefferenceType;
+  "interaction-alert-selected": string | RefferenceType;
+  "interaction-alert-subtle-normal": string | RefferenceType;
+  "interaction-alert-subtle-hover": string | RefferenceType;
+  "interaction-alert-subtle-active": string | RefferenceType;
+  "interaction-alert-subtle-selected": string | RefferenceType;
+  "interaction-ghost-normal": string | RefferenceType;
+  "interaction-ghost-hover": string | RefferenceType;
+  "interaction-ghost-active": string | RefferenceType;
+  "interaction-ghost-selected": string | RefferenceType;
+  "interaction-ghost-inverted-hover": string | RefferenceType;
+  "interaction-ghost-inverted-normal": string | RefferenceType;
+  "interaction-ghost-inverted-selected": string | RefferenceType;
+  "interaction-ghost-destructive-hover": string | RefferenceType;
+  "interaction-ghost-destructive-normal": string | RefferenceType;
+  "interaction-ghost-destructive-selected": string | RefferenceType;
+  "interaction-disabled-normal": string | RefferenceType;
+  "interaction-disabled-hover": string | RefferenceType;
+  "interaction-disabled-active": string | RefferenceType;
+  "interaction-disabled-subtle-normal": string | RefferenceType;
+  "interaction-disabled-subtle-hover": string | RefferenceType;
+  "interaction-disabled-subtle-active": string | RefferenceType;
+  "interaction-border-normal": string | RefferenceType;
+  "interaction-border-hover": string | RefferenceType;
+  "interaction-border-active": string | RefferenceType;
+  "interaction-border-selected": string | RefferenceType;
+  "interaction-border-neutral-normal": string | RefferenceType;
+  "interaction-border-neutral-hover": string | RefferenceType;
+  "interaction-border-neutral-active": string | RefferenceType;
+  "interaction-border-neutral-selected": string | RefferenceType;
+  "interaction-border-alert": string | RefferenceType;
+  "interaction-background-modal": string | RefferenceType;
+  "interaction-background-modeless": string | RefferenceType;
+  "interaction-background-modeless-inverted": string | RefferenceType;
+  "interaction-background-sidepanel": string | RefferenceType;
+  "interaction-background-formField": string | RefferenceType;
+  "interaction-inverted-normal": string | RefferenceType;
+  "interaction-inverted-hover": string | RefferenceType;
+  "interaction-inverted-active": string | RefferenceType;
+  "interaction-inverted-selected": string | RefferenceType;
+  "interaction-focus-default": string | RefferenceType;
+  "nonSemantic-grey-content-primary": string | RefferenceType;
+  "nonSemantic-grey-background-strong": string | RefferenceType;
+  "nonSemantic-grey-background-muted": string | RefferenceType;
+  "nonSemantic-grey-background-onSubtle": string | RefferenceType;
+  "nonSemantic-grey-background-surface": string | RefferenceType;
+  "nonSemantic-red-content-primary": string | RefferenceType;
+  "nonSemantic-red-background-strong": string | RefferenceType;
+  "nonSemantic-red-background-muted": string | RefferenceType;
+  "nonSemantic-red-background-onSubtle": string | RefferenceType;
+  "nonSemantic-red-background-surface": string | RefferenceType;
+  "nonSemantic-raspberry-content-primary": string | RefferenceType;
+  "nonSemantic-raspberry-background-strong": string | RefferenceType;
+  "nonSemantic-raspberry-background-muted": string | RefferenceType;
+  "nonSemantic-raspberry-background-onSubtle": string | RefferenceType;
+  "nonSemantic-raspberry-background-surface": string | RefferenceType;
+  "nonSemantic-magenta-content-primary": string | RefferenceType;
+  "nonSemantic-magenta-background-strong": string | RefferenceType;
+  "nonSemantic-magenta-background-muted": string | RefferenceType;
+  "nonSemantic-magenta-background-onSubtle": string | RefferenceType;
+  "nonSemantic-magenta-background-surface": string | RefferenceType;
+  "nonSemantic-purple-content-primary": string | RefferenceType;
+  "nonSemantic-purple-background-strong": string | RefferenceType;
+  "nonSemantic-purple-background-muted": string | RefferenceType;
+  "nonSemantic-purple-background-onSubtle": string | RefferenceType;
+  "nonSemantic-purple-background-surface": string | RefferenceType;
+  "nonSemantic-grape-content-primary": string | RefferenceType;
+  "nonSemantic-grape-background-strong": string | RefferenceType;
+  "nonSemantic-grape-background-muted": string | RefferenceType;
+  "nonSemantic-grape-background-onSubtle": string | RefferenceType;
+  "nonSemantic-grape-background-surface": string | RefferenceType;
+  "nonSemantic-violet-content-primary": string | RefferenceType;
+  "nonSemantic-violet-background-strong": string | RefferenceType;
+  "nonSemantic-violet-background-muted": string | RefferenceType;
+  "nonSemantic-violet-background-onSubtle": string | RefferenceType;
+  "nonSemantic-violet-background-surface": string | RefferenceType;
+  "nonSemantic-blue-content-primary": string | RefferenceType;
+  "nonSemantic-blue-background-strong": string | RefferenceType;
+  "nonSemantic-blue-background-muted": string | RefferenceType;
+  "nonSemantic-blue-background-onSubtle": string | RefferenceType;
+  "nonSemantic-blue-background-surface": string | RefferenceType;
+  "nonSemantic-cyan-content-primary": string | RefferenceType;
+  "nonSemantic-cyan-background-strong": string | RefferenceType;
+  "nonSemantic-cyan-background-muted": string | RefferenceType;
+  "nonSemantic-cyan-background-onSubtle": string | RefferenceType;
+  "nonSemantic-cyan-background-surface": string | RefferenceType;
+  "nonSemantic-teal-content-primary": string | RefferenceType;
+  "nonSemantic-teal-background-strong": string | RefferenceType;
+  "nonSemantic-teal-background-muted": string | RefferenceType;
+  "nonSemantic-teal-background-onSubtle": string | RefferenceType;
+  "nonSemantic-teal-background-surface": string | RefferenceType;
+  "nonSemantic-aquamarine-content-primary": string | RefferenceType;
+  "nonSemantic-aquamarine-background-strong": string | RefferenceType;
+  "nonSemantic-aquamarine-background-muted": string | RefferenceType;
+  "nonSemantic-aquamarine-background-onSubtle": string | RefferenceType;
+  "nonSemantic-aquamarine-background-surface": string | RefferenceType;
+  "nonSemantic-green-content-primary": string | RefferenceType;
+  "nonSemantic-green-background-strong": string | RefferenceType;
+  "nonSemantic-green-background-muted": string | RefferenceType;
+  "nonSemantic-green-background-onSubtle": string | RefferenceType;
+  "nonSemantic-green-background-surface": string | RefferenceType;
+  "nonSemantic-emerald-content-primary": string | RefferenceType;
+  "nonSemantic-emerald-background-strong": string | RefferenceType;
+  "nonSemantic-emerald-background-muted": string | RefferenceType;
+  "nonSemantic-emerald-background-onSubtle": string | RefferenceType;
+  "nonSemantic-emerald-background-surface": string | RefferenceType;
+  "border-defaultA": string | RefferenceType;
+  "nonSemantic-orange-content-primary": string | RefferenceType;
+  "nonSemantic-orange-background-strong": string | RefferenceType;
+  "nonSemantic-orange-background-muted": string | RefferenceType;
+  "nonSemantic-orange-background-onSubtle": string | RefferenceType;
+  "nonSemantic-orange-background-surface": string | RefferenceType;
+  "content-informative-primary": string | RefferenceType;
+  "content-positive-primary": string | RefferenceType;
+  "content-warning-primary": string | RefferenceType;
+  "content-negative-primary": string | RefferenceType;
+  "content-brand-primary": string | RefferenceType;
+  "background-neutral-muted": string | RefferenceType;
+  "background-neutral-onSubtle": string | RefferenceType;
+  "background-informative-muted": string | RefferenceType;
+  "background-informative-onSubtle": string | RefferenceType;
+  "background-positive-muted": string | RefferenceType;
+  "background-positive-onSubtle": string | RefferenceType;
+  "background-warning-muted": string | RefferenceType;
+  "background-warning-onSubtle": string | RefferenceType;
+  "background-negative-muted": string | RefferenceType;
+  "background-negative-onSubtle": string | RefferenceType;
+  "background-brand-muted": string | RefferenceType;
+  "background-brand-onSubtle": string | RefferenceType;
+  "nonSemantic-grey-content-secondary": string | RefferenceType;
+  "nonSemantic-red-content-secondary": string | RefferenceType;
+  "nonSemantic-raspberry-content-secondary": string | RefferenceType;
+  "nonSemantic-magenta-content-secondary": string | RefferenceType;
+  "nonSemantic-purple-content-secondary": string | RefferenceType;
+  "nonSemantic-grape-content-secondary": string | RefferenceType;
+  "nonSemantic-violet-content-secondary": string | RefferenceType;
+  "nonSemantic-blue-content-secondary": string | RefferenceType;
+  "nonSemantic-cyan-content-secondary": string | RefferenceType;
+  "nonSemantic-teal-content-secondary": string | RefferenceType;
+  "nonSemantic-aquamarine-content-secondary": string | RefferenceType;
+  "nonSemantic-green-content-secondary": string | RefferenceType;
+  "nonSemantic-emerald-content-secondary": string | RefferenceType;
+  "nonSemantic-orange-content-secondary": string | RefferenceType;
+  "nonSemantic-grey-background-subtle": string | RefferenceType;
+  "nonSemantic-red-background-subtle": string | RefferenceType;
+  "nonSemantic-raspberry-background-subtle": string | RefferenceType;
+  "nonSemantic-magenta-background-subtle": string | RefferenceType;
+  "nonSemantic-purple-background-subtle": string | RefferenceType;
+  "nonSemantic-grape-background-subtle": string | RefferenceType;
+  "nonSemantic-violet-background-subtle": string | RefferenceType;
+  "nonSemantic-blue-background-subtle": string | RefferenceType;
+  "nonSemantic-cyan-background-subtle": string | RefferenceType;
+  "nonSemantic-teal-background-subtle": string | RefferenceType;
+  "nonSemantic-aquamarine-background-subtle": string | RefferenceType;
+  "nonSemantic-green-background-subtle": string | RefferenceType;
+  "nonSemantic-emerald-background-subtle": string | RefferenceType;
+  "nonSemantic-orange-background-subtle": string | RefferenceType;
+  "nonSemantic-grey-border-default": string | RefferenceType;
+  "nonSemantic-grey-border-strong": string | RefferenceType;
+  "nonSemantic-grey-border-subtle": string | RefferenceType;
+  "nonSemantic-red-border-default": string | RefferenceType;
+  "nonSemantic-red-border-strong": string | RefferenceType;
+  "nonSemantic-red-border-subtle": string | RefferenceType;
+  "nonSemantic-raspberry-border-default": string | RefferenceType;
+  "nonSemantic-raspberry-border-strong": string | RefferenceType;
+  "nonSemantic-raspberry-border-subtle": string | RefferenceType;
+  "nonSemantic-magenta-border-default": string | RefferenceType;
+  "nonSemantic-magenta-border-strong": string | RefferenceType;
+  "nonSemantic-magenta-border-subtle": string | RefferenceType;
+  "nonSemantic-purple-border-default": string | RefferenceType;
+  "nonSemantic-purple-border-strong": string | RefferenceType;
+  "nonSemantic-purple-border-subtle": string | RefferenceType;
+  "nonSemantic-grape-border-default": string | RefferenceType;
+  "nonSemantic-grape-border-strong": string | RefferenceType;
+  "nonSemantic-grape-border-subtle": string | RefferenceType;
+  "nonSemantic-violet-border-default": string | RefferenceType;
+  "nonSemantic-violet-border-strong": string | RefferenceType;
+  "nonSemantic-violet-border-subtle": string | RefferenceType;
+  "nonSemantic-blue-border-default": string | RefferenceType;
+  "nonSemantic-blue-border-strong": string | RefferenceType;
+  "nonSemantic-blue-border-subtle": string | RefferenceType;
+  "nonSemantic-cyan-border-default": string | RefferenceType;
+  "nonSemantic-cyan-border-strong": string | RefferenceType;
+  "nonSemantic-cyan-border-subtle": string | RefferenceType;
+  "nonSemantic-teal-border-default": string | RefferenceType;
+  "nonSemantic-teal-border-strong": string | RefferenceType;
+  "nonSemantic-teal-border-subtle": string | RefferenceType;
+  "nonSemantic-aquamarine-border-default": string | RefferenceType;
+  "nonSemantic-aquamarine-border-strong": string | RefferenceType;
+  "nonSemantic-aquamarine-border-subtle": string | RefferenceType;
+  "nonSemantic-green-border-default": string | RefferenceType;
+  "nonSemantic-green-border-strong": string | RefferenceType;
+  "nonSemantic-green-border-subtle": string | RefferenceType;
+  "nonSemantic-emerald-border-default": string | RefferenceType;
+  "nonSemantic-emerald-border-strong": string | RefferenceType;
+  "nonSemantic-emerald-border-subtle": string | RefferenceType;
+  "nonSemantic-orange-border-default": string | RefferenceType;
+  "nonSemantic-orange-border-strong": string | RefferenceType;
+  "nonSemantic-orange-border-subtle": string | RefferenceType;
+  "nonSemantic-white-content-primary": string | RefferenceType;
+  "nonSemantic-white-content-secondary": string | RefferenceType;
+  "nonSemantic-white-border-default": string | RefferenceType;
+  "nonSemantic-white-border-strong": string | RefferenceType;
+  "nonSemantic-white-border-subtle": string | RefferenceType;
+  "nonSemantic-white-background-strong": string | RefferenceType;
+  "nonSemantic-white-background-muted": string | RefferenceType;
+  "nonSemantic-white-background-onSubtle": string | RefferenceType;
+  "nonSemantic-white-background-subtle": string | RefferenceType;
+  "nonSemantic-white-background-surface": string | RefferenceType;
 };
+
 export type Radii = {
-  "$g-border-radius-0": string | RefferenceType;
-  "$g-border-radius-100": string | RefferenceType;
-  "$g-border-radius-200": string | RefferenceType;
-  "$g-border-radius-300": string | RefferenceType;
-  "$g-border-radius-full": string | RefferenceType;
-  "$a-border-radius-small": string | RefferenceType;
-  "$a-border-radius-medium": string | RefferenceType;
-  "$a-border-radius-large": string | RefferenceType;
+  "0": string | RefferenceType;
+  "25": string | RefferenceType;
+  "50": string | RefferenceType;
+  "100": string | RefferenceType;
+  "999": string | RefferenceType;
+  "150": string | RefferenceType;
+  small: string | RefferenceType;
+  medium: string | RefferenceType;
+  large: string | RefferenceType;
+  xLarge: string | RefferenceType;
+  full: string | RefferenceType;
 };
+
 export type BorderWidths = {
-  "$g-border-width-0": string | RefferenceType;
-  "$g-border-width-100": string | RefferenceType;
-  "$g-border-width-200": string | RefferenceType;
-  "$a-border-width-small": string | RefferenceType;
-  "$a-border-width-focus": string | RefferenceType;
-  "$a-border-width-medium": string | RefferenceType;
+  "0": string | RefferenceType;
+  "100": string | RefferenceType;
+  "200": string | RefferenceType;
+  small: string | RefferenceType;
+  focus: string | RefferenceType;
+  medium: string | RefferenceType;
 };
+
 export type BorderStyles = {
-  "$g-border-style-none": string | RefferenceType;
-  "$g-border-style-solid": string | RefferenceType;
-  "$g-border-style-dashed": string | RefferenceType;
+  none: string | RefferenceType;
+  solid: string | RefferenceType;
+  dashed: string | RefferenceType;
 };
+
 export type Sizes = {
-  "$g-size-0": string | RefferenceType;
-  "$g-size-25": string | RefferenceType;
-  "$g-size-50": string | RefferenceType;
-  "$g-size-100": string | RefferenceType;
-  "$g-size-150": string | RefferenceType;
-  "$g-size-200": string | RefferenceType;
-  "$g-size-250": string | RefferenceType;
-  "$g-size-300": string | RefferenceType;
-  "$g-size-350": string | RefferenceType;
+  xLarge: string | RefferenceType;
+  large: string | RefferenceType;
+  medium: string | RefferenceType;
+  small: string | RefferenceType;
+  xSmall: string | RefferenceType;
+  "2xSmall": string | RefferenceType;
+  "3xSmall": string | RefferenceType;
 };
+
 export type Space = {
-  "$g-space-0": string | RefferenceType;
-  "$g-space-25": string | RefferenceType;
-  "$g-space-50": string | RefferenceType;
-  "$g-space-75": string | RefferenceType;
-  "$g-space-100": string | RefferenceType;
-  "$g-space-150": string | RefferenceType;
-  "$g-space-200": string | RefferenceType;
-  "$g-space-300": string | RefferenceType;
-  "$g-space-400": string | RefferenceType;
-  "$g-space-500": string | RefferenceType;
-  "$g-space-125": string | RefferenceType;
-  "$g-space-175": string | RefferenceType;
-  "$a-space-component-gap-xSmall": string | RefferenceType;
-  "$a-space-component-gap-small": string | RefferenceType;
-  "$a-space-component-gap-medium": string | RefferenceType;
-  "$a-space-component-gap-large": string | RefferenceType;
-  "$a-space-component-gap-xLarge": string | RefferenceType;
-  "$a-space-component-gap-2xLarge": string | RefferenceType;
-  "$a-space-component-gap-3xLarge": string | RefferenceType;
-  "$a-space-component-padding-xSmall": string | RefferenceType;
-  "$a-space-component-padding-small": string | RefferenceType;
-  "$a-space-component-padding-medium": string | RefferenceType;
-  "$a-space-component-padding-large": string | RefferenceType;
-  "$a-space-component-padding-xLarge": string | RefferenceType;
-  "$a-space-component-padding-2xLarge": string | RefferenceType;
-  "$a-space-component-padding-3xLarge": string | RefferenceType;
-  "$a-space-component-padding-4xLarge": string | RefferenceType;
+  "0": string | RefferenceType;
+  "25": string | RefferenceType;
+  "50": string | RefferenceType;
+  "100": string | RefferenceType;
+  "150": string | RefferenceType;
+  "200": string | RefferenceType;
+  "300": string | RefferenceType;
+  "400": string | RefferenceType;
+  "600": string | RefferenceType;
+  "500": string | RefferenceType;
+  "250": string | RefferenceType;
+  "700": string | RefferenceType;
+  "800": string | RefferenceType;
+  "1000": string | RefferenceType;
+  "1200": string | RefferenceType;
+  "1500": string | RefferenceType;
+  "1600": string | RefferenceType;
+  "550": string | RefferenceType;
+  "component-gap-2xSmall": string | RefferenceType;
+  "component-gap-xSmall": string | RefferenceType;
+  "component-gap-small": string | RefferenceType;
+  "component-gap-large": string | RefferenceType;
+  "component-gap-2xLarge": string | RefferenceType;
+  "component-padding-xSmall": string | RefferenceType;
+  "component-padding-small": string | RefferenceType;
+  "component-padding-medium": string | RefferenceType;
+  "component-padding-large": string | RefferenceType;
+  "component-padding-2xLarge": string | RefferenceType;
+  "component-gap-medium": string | RefferenceType;
+  "component-gap-null": string | RefferenceType;
+  "component-gap-xLarge": string | RefferenceType;
+  "component-padding-3xLarge": string | RefferenceType;
+  "component-padding-4xLarge": string | RefferenceType;
+  "component-padding-6xLarge": string | RefferenceType;
+  "component-padding-2xSmall": string | RefferenceType;
+  "component-padding-xLarge": string | RefferenceType;
+  "component-padding-5xLarge": string | RefferenceType;
+  "component-gap-3xLarge": string | RefferenceType;
+  "component-padding-null": string | RefferenceType;
 };
+
 export type Fonts = {
-  "$g-font-family-primary": string | RefferenceType;
+  primary: string | RefferenceType;
 };
+
 export type FontSizes = {
-  "$g-font-size-25": string | RefferenceType;
-  "$g-font-size-50": string | RefferenceType;
-  "$g-font-size-75": string | RefferenceType;
-  "$g-font-size-100": string | RefferenceType;
-  "$g-font-size-200": string | RefferenceType;
-  "$g-font-size-300": string | RefferenceType;
-  "$g-font-size-400": string | RefferenceType;
-  "$g-font-size-500": string | RefferenceType;
-  "$g-font-size-600": string | RefferenceType;
+  "125": string | RefferenceType;
+  "150": string | RefferenceType;
+  "175": string | RefferenceType;
+  "200": string | RefferenceType;
+  "225": string | RefferenceType;
+  "300": string | RefferenceType;
+  "400": string | RefferenceType;
+  "500": string | RefferenceType;
+  "600": string | RefferenceType;
 };
+
 export type FontWeights = {
-  "$g-font-weight-400": string | RefferenceType;
-  "$g-font-weight-450": string | RefferenceType;
-  "$g-font-weight-600": string | RefferenceType;
+  "400": string | RefferenceType;
+  "450": string | RefferenceType;
+  "600": string | RefferenceType;
 };
+
 export type LetterSpacings = {
-  "$g-font-letterSpacing-0": string | RefferenceType;
-  "$g-font-letterSpacing-100": string | RefferenceType;
-  "$g-font-letterSpacing-200": string | RefferenceType;
+  "0": string | RefferenceType;
+  "100": string | RefferenceType;
+  "200": string | RefferenceType;
 };
+
 export type LineHeights = {
-  "$g-font-lineHeight-scale-100": string | RefferenceType;
-  "$g-font-lineHeight-scale-150": string | RefferenceType;
-  "$g-font-lineHeight-scale-166": string | RefferenceType;
-  "$g-font-lineHeight-scale-200": string | RefferenceType;
-  "$g-font-lineHeight-value-100": string | RefferenceType;
-  "$g-font-lineHeight-value-150": string | RefferenceType;
-  "$g-font-lineHeight-value-200": string | RefferenceType;
-  "$g-font-lineHeight-value-250": string | RefferenceType;
-  "$g-font-lineHeight-value-300": string | RefferenceType;
-  "$g-font-lineHeight-value-350": string | RefferenceType;
-  "$g-font-lineHeight-value-450": string | RefferenceType;
-  "$g-font-lineHeight-value-600": string | RefferenceType;
-  "$g-font-lineHeight-value-700": string | RefferenceType;
+  "scale-100": string | RefferenceType;
+  "scale-150": string | RefferenceType;
+  "scale-166": string | RefferenceType;
+  "scale-200": string | RefferenceType;
+  "value-200": string | RefferenceType;
+  "value-250": string | RefferenceType;
+  "value-300": string | RefferenceType;
+  "value-350": string | RefferenceType;
+  "value-400": string | RefferenceType;
+  "value-450": string | RefferenceType;
+  "value-550": string | RefferenceType;
+  "value-700": string | RefferenceType;
+  "value-800": string | RefferenceType;
 };
+
 export type Texts = {
-  "$g-typo-normal-25": {
+  "normal-125": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-normal-50": {
+
+  "normal-150": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-normal-75": {
+
+  "normal-175": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-normal-100": {
+
+  "normal-200": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-normal-200": {
+
+  "normal-225": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-normal-300": {
+
+  "normal-300": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-normal-400": {
+
+  "normal-400": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-normal-500": {
+
+  "normal-500": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-normal-600": {
+
+  "normal-600": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-medium-25": {
+
+  "medium-125": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-medium-50": {
+
+  "medium-150": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-medium-75": {
+
+  "medium-175": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-medium-100": {
+
+  "medium-200": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-medium-200": {
+
+  "medium-225": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-medium-300": {
+
+  "medium-300": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-medium-400": {
+
+  "medium-400": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-medium-500": {
+
+  "medium-500": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-medium-600": {
+
+  "medium-600": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-strong-25": {
+
+  "strong-125": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-strong-50": {
+
+  "strong-150": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-strong-75": {
+
+  "strong-175": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-strong-100": {
+
+  "strong-200": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-strong-200": {
+
+  "strong-225": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-strong-300": {
+
+  "strong-300": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-strong-400": {
+
+  "strong-400": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-strong-500": {
+
+  "strong-500": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$g-typo-strong-600": {
+
+  "strong-600": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$a-typo-body-large": {
+
+  "body-large": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$a-typo-body-medium": {
+
+  "body-medium": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$a-typo-body-small": {
+
+  "body-small": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$a-typo-body-xSmall": {
+
+  "body-xSmall": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$a-typo-body-strong-large": {
+
+  "body-strong-large": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$a-typo-body-strong-medium": {
+
+  "body-strong-medium": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$a-typo-body-strong-small": {
+
+  "body-strong-small": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$a-typo-body-strong-xSmall": {
+
+  "body-strong-xSmall": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$a-typo-hero-large": {
+
+  "hero-large": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$a-typo-hero-medium": {
+
+  "hero-medium": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$a-typo-header-4xLarge": {
+
+  "header-4xLarge": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$a-typo-header-3xLarge": {
+
+  "header-3xLarge": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$a-typo-header-xLarge": {
+
+  "header-xLarge": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$a-typo-header-large": {
+
+  "header-large": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$a-typo-header-medium": {
+
+  "header-medium": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
     fontWeight: string | RefferenceType;
     letterSpacing: string | RefferenceType;
   };
-  "$a-typo-header-small": {
+
+  "header-small": {
     fontFamily: string | RefferenceType;
     fontSize: string | RefferenceType;
     lineHeight: string | RefferenceType;
@@ -1015,19 +1176,53 @@ export type Texts = {
     letterSpacing: string | RefferenceType;
   };
 };
+
 export type Shadows = {
-  "$g-elevation-bottom-100": string | RefferenceType;
-  "$g-elevation-bottom-200": string | RefferenceType;
-  "$g-elevation-bottom-300": string | RefferenceType;
-  "$g-elevation-bottom-400": string | RefferenceType;
-  "$g-elevation-top-100": string | RefferenceType;
-  "$g-elevation-top-200": string | RefferenceType;
-  "$g-elevation-top-300": string | RefferenceType;
-  "$g-elevation-top-400": string | RefferenceType;
+  "bottom-100": string | RefferenceType;
+  "bottom-200": string | RefferenceType;
+  "bottom-300": string | RefferenceType;
+  "bottom-400": string | RefferenceType;
+  "top-100": string | RefferenceType;
+  "top-200": string | RefferenceType;
+  "top-300": string | RefferenceType;
+  "top-400": string | RefferenceType;
 };
+
 export type Opacity = {
-  "$g-opacity-0": string | RefferenceType;
-  "$g-opacity-50": string | RefferenceType;
-  "$g-opacity-100": string | RefferenceType;
-  "$a-opacity-disabled": string | RefferenceType;
+  "0": string | RefferenceType;
+  "50": string | RefferenceType;
+  "100": string | RefferenceType;
+  disabled: string | RefferenceType;
+};
+
+export type Screens = {
+  _: number;
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  "2xl": number;
+};
+
+export type States = {
+  _: null;
+  motionSafe: string;
+  motionReduce: string;
+  first: string;
+  last: string;
+  odd: string;
+  even: string;
+  visited: string;
+  checked: string;
+  focusWithin: string;
+  hover: string;
+  focus: string;
+  focusVisible: string;
+  active: string;
+  placeholder: string;
+  disabled: string;
+  selected: string;
+  loading: string;
+  alert: string;
 };
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 77f1bb3c..a51fd2a2 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,26 +1,2 @@
-import { defaultTheme as xDefaultTheme } from "@xstyled/system";
-
-import { theme as defaultTheme } from "./theme";
-
-const { screens, states } = xDefaultTheme;
-
-const ringWidths = defaultTheme.borderWidths;
-
-const themeExtension = {
-  screens,
-  states: {
-    ...states,
-    disabled: '&:disabled, &[aria-disabled=true], &[data-state="disabled"]',
-    selected: '&[data-state="selected"]',
-    loading: '&[data-state="loading"]',
-    alert: '&:invalid, &[data-state="alert"]',
-  },
-  ringWidths,
-};
-
-export const theme = {
-  ...themeExtension,
-  ...defaultTheme,
-};
-
-export type Theme = typeof theme;
+export { theme } from "./theme";
+export type { Theme } from "./Theme.interface";
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index e3eee169..31dc75ab 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -1,1212 +1,1163 @@
-import { th } from "@xstyled/styled-components";
+import { th } from "@xstyled/system";
 
 import { Theme } from "./Theme.interface";
 
-export const theme: Theme = {
+const tempTheme: Omit<Theme, "ringWidths"> = {
   colors: {
-    "$g-color-coolGrey--4": "hsla(208, 24%, 14%, 1)",
-    "$g-color-coolGrey--3": "hsla(208, 15%, 18%, 1)",
-    "$g-color-coolGrey--2": "hsla(210, 12%, 26%, 1)",
-    "$g-color-coolGrey--1": "hsla(210, 12%, 33%, 1)",
-    "$g-color-coolGrey-0": "hsla(215, 12%, 38%, 1)",
-    "$g-color-coolGrey-+1": "hsla(211, 12%, 55%, 1)",
-    "$g-color-coolGrey-+2": "hsla(211, 12%, 66%, 1)",
-    "$g-color-coolGrey-+3": "hsla(210, 17%, 84%, 1)",
-    "$g-color-coolGrey-+4": "hsla(207, 16%, 89%, 1)",
-    "$g-color-coolGrey-+5": "hsla(210, 16%, 93%, 1)",
-    "$g-color-coolGrey-+6": "hsla(204, 20%, 95%, 1)",
-    "$g-color-coolGrey-+7": "hsla(210, 25%, 97%, 1)",
-    "$g-color-coolGrey-+8": "hsla(210, 33%, 99%, 1)",
-    "$g-color-coolGreyA--4": "hsla(207, 47%, 7%, 0.93)",
-    "$g-color-coolGreyA--3": "hsla(208, 43%, 7%, 0.88)",
-    "$g-color-coolGreyA--2": "hsla(212, 27%, 14%, 0.86)",
-    "$g-color-coolGreyA--1": "hsla(211, 30%, 16%, 0.8)",
-    "$g-color-coolGreyA-0": "hsla(215, 40%, 16%, 0.74)",
-    "$g-color-coolGreyA-+1": "hsla(210, 50%, 19%, 0.56)",
-    "$g-color-coolGreyA-+2": "hsla(211, 66%, 15%, 0.4)",
-    "$g-color-coolGreyA-+3": "hsla(212, 68%, 20%, 0.2)",
-    "$g-color-coolGreyA-+4": "hsla(205, 89%, 14%, 0.13)",
-    "$g-color-coolGreyA-+5": "hsla(214, 64%, 17%, 0.09)",
-    "$g-color-coolGreyA-+6": "hsla(206, 95%, 16%, 0.06)",
-    "$g-color-coolGreyA-+7": "hsla(213, 100%, 18%, 0.04)",
-    "$g-color-coolGreyA-+8": "hsla(216, 67%, 37%, 0.02)",
-    "$g-color-neutralGrey--4": "hsla(0, 0%, 13%, 1)",
-    "$g-color-neutralGrey--3": "hsla(0, 0%, 18%, 1)",
-    "$g-color-neutralGrey--2": "hsla(0, 0%, 25%, 1)",
-    "$g-color-neutralGrey--1": "hsla(0, 0%, 32%, 1)",
-    "$g-color-neutralGrey-0": "hsla(0, 0%, 37%, 1)",
-    "$g-color-neutralGrey-+1": "hsla(0, 0%, 54%, 1)",
-    "$g-color-neutralGrey-+2": "hsla(0, 0%, 65%, 1)",
-    "$g-color-neutralGrey-+3": "hsla(0, 0%, 84%, 1)",
-    "$g-color-neutralGrey-+4": "hsla(0, 0%, 89%, 1)",
-    "$g-color-neutralGrey-+5": "hsla(0, 0%, 92%, 1)",
-    "$g-color-neutralGrey-+6": "hsla(0, 0%, 95%, 1)",
-    "$g-color-neutralGrey-+7": "hsla(0, 0%, 97%, 1)",
-    "$g-color-neutralGrey-+8": "hsla(0, 0%, 99%, 1)",
-    "$g-color-neutralGreyA--4": "hsla(0, 0%, 7%, 0.93)",
-    "$g-color-neutralGreyA--3": "hsla(0, 0%, 6%, 0.88)",
-    "$g-color-neutralGreyA--2": "hsla(0, 0%, 13%, 0.86)",
-    "$g-color-neutralGreyA--1": "hsla(0, 0%, 15%, 0.8)",
-    "$g-color-neutralGreyA-0": "hsla(240, 1%, 15%, 0.74)",
-    "$g-color-neutralGreyA-+1": "hsla(0, 0%, 17%, 0.56)",
-    "$g-color-neutralGreyA-+2": "hsla(0, 0%, 13%, 0.4)",
-    "$g-color-neutralGreyA-+3": "hsla(0, 0%, 18%, 0.2)",
-    "$g-color-neutralGreyA-+4": "hsla(0, 0%, 12%, 0.13)",
-    "$g-color-neutralGreyA-+5": "hsla(0, 0%, 11%, 0.09)",
-    "$g-color-neutralGreyA-+6": "hsla(0, 0%, 13%, 0.06)",
-    "$g-color-neutralGreyA-+7": "hsla(0, 0%, 18%, 0.04)",
-    "$g-color-neutralGreyA-+8": "hsla(0, 0%, 32%, 0.02)",
-    "$g-color-warmGrey--4": "hsla(60, 4%, 13%, 1)",
-    "$g-color-warmGrey--3": "hsla(60, 4%, 18%, 1)",
-    "$g-color-warmGrey--2": "hsla(60, 5%, 24%, 1)",
-    "$g-color-warmGrey--1": "hsla(60, 4%, 31%, 1)",
-    "$g-color-warmGrey-0": "hsla(60, 4%, 36%, 1)",
-    "$g-color-warmGrey-+1": "hsla(60, 3%, 53%, 1)",
-    "$g-color-warmGrey-+2": "hsla(60, 5%, 64%, 1)",
-    "$g-color-warmGrey-+3": "hsla(60, 8%, 84%, 1)",
-    "$g-color-warmGrey-+4": "hsla(60, 8%, 89%, 1)",
-    "$g-color-warmGrey-+5": "hsla(60, 9%, 91%, 1)",
-    "$g-color-warmGrey-+6": "hsla(60, 6%, 95%, 1)",
-    "$g-color-warmGrey-+7": "hsla(60, 6%, 97%, 1)",
-    "$g-color-warmGrey-+8": "hsla(60, 4%, 99%, 1)",
-    "$g-color-warmGreyA--4": "hsla(60, 6%, 7%, 0.93)",
-    "$g-color-warmGreyA--3": "hsla(60, 15%, 6%, 0.88)",
-    "$g-color-warmGreyA--2": "hsla(60, 12%, 12%, 0.86)",
-    "$g-color-warmGreyA--1": "hsla(60, 10%, 14%, 0.8)",
-    "$g-color-warmGreyA-0": "hsla(60, 15%, 13%, 0.74)",
-    "$g-color-warmGreyA-+1": "hsla(60, 15%, 16%, 0.56)",
-    "$g-color-warmGreyA-+2": "hsla(60, 41%, 11%, 0.4)",
-    "$g-color-warmGreyA-+3": "hsla(60, 36%, 18%, 0.2)",
-    "$g-color-warmGreyA-+4": "hsla(60, 43%, 14%, 0.13)",
-    "$g-color-warmGreyA-+5": "hsla(60, 89%, 7%, 0.09)",
-    "$g-color-warmGreyA-+6": "hsla(60, 54%, 12%, 0.06)",
-    "$g-color-warmGreyA-+7": "hsla(60, 3%, 18%, 0.04)",
-    "$g-color-warmGreyA-+8": "hsla(0, 0%, 32%, 0.02)",
-    "$g-color-whiteA--12": "hsla(0, 0%, 100%, 0.02)",
-    "$g-color-whiteA--11": "hsla(0, 0%, 100%, 0.03)",
-    "$g-color-whiteA--10": "hsla(0, 0%, 100%, 0.05)",
-    "$g-color-whiteA--9": "hsla(0, 0%, 100%, 0.08)",
-    "$g-color-whiteA--8": "hsla(0, 0%, 100%, 0.1)",
-    "$g-color-whiteA--7": "hsla(0, 0%, 100%, 0.12)",
-    "$g-color-whiteA--6": "hsla(0, 0%, 100%, 0.24)",
-    "$g-color-whiteA--5": "hsla(0, 0%, 100%, 0.4)",
-    "$g-color-whiteA--4": "hsla(0, 0%, 100%, 0.64)",
-    "$g-color-whiteA--3": "hsla(0, 0%, 100%, 0.68)",
-    "$g-color-whiteA--2": "hsla(0, 0%, 100%, 0.72)",
-    "$g-color-whiteA--1": "hsla(0, 0%, 100%, 0.82)",
-    "$g-color-whiteA-0": "hsla(0, 0%, 100%, 1)",
-    "$g-color-red--4": "hsla(0, 70%, 17%, 1)",
-    "$g-color-red--3": "hsla(0, 55%, 28%, 1)",
-    "$g-color-red--2": "hsla(0, 54%, 38%, 1)",
-    "$g-color-red--1": "hsla(0, 50%, 42%, 1)",
-    "$g-color-red-0": "hsla(0, 58%, 49%, 1)",
-    "$g-color-red-+1": "hsla(0, 85%, 67%, 1)",
-    "$g-color-red-+2": "hsla(0, 82%, 76%, 1)",
-    "$g-color-red-+3": "hsla(0, 88%, 90%, 1)",
-    "$g-color-red-+4": "hsla(0, 85%, 92%, 1)",
-    "$g-color-red-+5": "hsla(0, 92%, 95%, 1)",
-    "$g-color-red-+6": "hsla(0, 100%, 96%, 1)",
-    "$g-color-red-+7": "hsla(0, 88%, 98%, 1)",
-    "$g-color-red-+8": "hsla(0, 100%, 99%, 1)",
-    "$g-color-raspberry--4": "hsla(340, 70%, 16%, 1)",
-    "$g-color-raspberry--3": "hsla(340, 55%, 26%, 1)",
-    "$g-color-raspberry--2": "hsla(340, 54%, 37%, 1)",
-    "$g-color-raspberry--1": "hsla(340, 50%, 41%, 1)",
-    "$g-color-raspberry-0": "hsla(340, 60%, 47%, 1)",
-    "$g-color-raspberry-+1": "hsla(340, 71%, 64%, 1)",
-    "$g-color-raspberry-+2": "hsla(340, 71%, 74%, 1)",
-    "$g-color-raspberry-+3": "hsla(340, 75%, 89%, 1)",
-    "$g-color-raspberry-+4": "hsla(339, 83%, 91%, 1)",
-    "$g-color-raspberry-+5": "hsla(342, 87%, 94%, 1)",
-    "$g-color-raspberry-+6": "hsla(341, 80%, 96%, 1)",
-    "$g-color-raspberry-+7": "hsla(340, 82%, 98%, 1)",
-    "$g-color-raspberry-+8": "hsla(336, 100%, 99%, 1)",
-    "$g-color-magenta--4": "hsla(320, 71%, 15%, 1)",
-    "$g-color-magenta--3": "hsla(321, 55%, 26%, 1)",
-    "$g-color-magenta--2": "hsla(320, 54%, 35%, 1)",
-    "$g-color-magenta--1": "hsla(320, 50%, 39%, 1)",
-    "$g-color-magenta-0": "hsla(320, 58%, 44%, 1)",
-    "$g-color-magenta-+1": "hsla(320, 66%, 62%, 1)",
-    "$g-color-magenta-+2": "hsla(320, 72%, 73%, 1)",
-    "$g-color-magenta-+3": "hsla(320, 74%, 88%, 1)",
-    "$g-color-magenta-+4": "hsla(321, 83%, 91%, 1)",
-    "$g-color-magenta-+5": "hsla(321, 87%, 94%, 1)",
-    "$g-color-magenta-+6": "hsla(319, 80%, 96%, 1)",
-    "$g-color-magenta-+7": "hsla(320, 82%, 98%, 1)",
-    "$g-color-magenta-+8": "hsla(324, 100%, 99%, 1)",
-    "$g-color-purple--4": "hsla(320, 71%, 15%, 1)",
-    "$g-color-purple--3": "hsla(290, 55%, 26%, 1)",
-    "$g-color-purple--2": "hsla(290, 54%, 35%, 1)",
-    "$g-color-purple--1": "hsla(290, 50%, 39%, 1)",
-    "$g-color-purple-0": "hsla(290, 50%, 45%, 1)",
-    "$g-color-purple-+1": "hsla(288, 62%, 63%, 1)",
-    "$g-color-purple-+2": "hsla(288, 71%, 74%, 1)",
-    "$g-color-purple-+3": "hsla(296, 74%, 88%, 1)",
-    "$g-color-purple-+4": "hsla(291, 83%, 91%, 1)",
-    "$g-color-purple-+5": "hsla(288, 87%, 94%, 1)",
-    "$g-color-purple-+6": "hsla(289, 80%, 96%, 1)",
-    "$g-color-purple-+7": "hsla(288, 100%, 98%, 1)",
-    "$g-color-purple-+8": "hsla(288, 100%, 99%, 1)",
-    "$g-color-grape--4": "hsla(270, 70%, 18%, 1)",
-    "$g-color-grape--3": "hsla(270, 56%, 30%, 1)",
-    "$g-color-grape--2": "hsla(270, 54%, 40%, 1)",
-    "$g-color-grape--1": "hsla(270, 50%, 45%, 1)",
-    "$g-color-grape-0": "hsla(270, 50%, 50%, 1)",
-    "$g-color-grape-+1": "hsla(270, 74%, 68%, 1)",
-    "$g-color-grape-+2": "hsla(270, 81%, 77%, 1)",
-    "$g-color-grape-+3": "hsla(269, 84%, 90%, 1)",
-    "$g-color-grape-+4": "hsla(270, 100%, 93%, 1)",
-    "$g-color-grape-+5": "hsla(270, 100%, 95%, 1)",
-    "$g-color-grape-+6": "hsla(264, 100%, 97%, 1)",
-    "$g-color-grape-+7": "hsla(270, 100%, 98%, 1)",
-    "$g-color-grape-+8": "hsla(264, 100%, 99%, 1)",
-    "$g-color-violet--4": "hsla(250, 69%, 23%, 1)",
-    "$g-color-violet--3": "hsla(250, 55%, 35%, 1)",
-    "$g-color-violet--2": "hsla(250, 54%, 48%, 1)",
-    "$g-color-violet--1": "hsla(250, 60%, 53%, 1)",
-    "$g-color-violet-0": "hsla(250, 54%, 55%, 1)",
-    "$g-color-violet-+1": "hsla(250, 80%, 72%, 1)",
-    "$g-color-violet-+2": "hsla(246, 92%, 81%, 1)",
-    "$g-color-violet-+3": "hsla(249, 100%, 92%, 1)",
-    "$g-color-violet-+4": "hsla(246, 100%, 94%, 1)",
-    "$g-color-violet-+5": "hsla(249, 100%, 96%, 1)",
-    "$g-color-violet-+6": "hsla(252, 100%, 97%, 1)",
-    "$g-color-violet-+7": "hsla(252, 100%, 98%, 1)",
-    "$g-color-violet-+8": "hsla(252, 100%, 99%, 1)",
-    "$g-color-blue--4": "hsla(222, 91%, 19%, 1)",
-    "$g-color-blue--3": "hsla(222, 80%, 33%, 1)",
-    "$g-color-blue--2": "hsla(222, 73%, 44%, 1)",
-    "$g-color-blue--1": "hsla(222, 68%, 48%, 1)",
-    "$g-color-blue-0": "hsla(222, 66%, 51%, 1)",
-    "$g-color-blue-+1": "hsla(222, 87%, 68%, 1)",
-    "$g-color-blue-+2": "hsla(221, 93%, 77%, 1)",
-    "$g-color-blue-+3": "hsla(221, 100%, 90%, 1)",
-    "$g-color-blue-+4": "hsla(221, 100%, 92%, 1)",
-    "$g-color-blue-+5": "hsla(220, 100%, 95%, 1)",
-    "$g-color-blue-+6": "hsla(223, 100%, 96%, 1)",
-    "$g-color-blue-+7": "hsla(223, 100%, 98%, 1)",
-    "$g-color-blue-+8": "hsla(227, 100%, 99%, 1)",
-    "$g-color-cyan--4": "hsla(205, 100%, 13%, 1)",
-    "$g-color-cyan--3": "hsla(205, 80%, 24%, 1)",
-    "$g-color-cyan--2": "hsla(205, 73%, 32%, 1)",
-    "$g-color-cyan--1": "hsla(205, 71%, 36%, 1)",
-    "$g-color-cyan-0": "hsla(205, 92%, 38%, 1)",
-    "$g-color-cyan-+1": "hsla(210, 66%, 60%, 1)",
-    "$g-color-cyan-+2": "hsla(208, 87%, 72%, 1)",
-    "$g-color-cyan-+3": "hsla(208, 100%, 88%, 1)",
-    "$g-color-cyan-+4": "hsla(208, 100%, 90%, 1)",
-    "$g-color-cyan-+5": "hsla(207, 100%, 94%, 1)",
-    "$g-color-cyan-+6": "hsla(210, 100%, 96%, 1)",
-    "$g-color-cyan-+7": "hsla(204, 100%, 97%, 1)",
-    "$g-color-cyan-+8": "hsla(204, 100%, 99%, 1)",
-    "$g-color-teal--4": "hsla(194, 96%, 11%, 1)",
-    "$g-color-teal--3": "hsla(194, 80%, 20%, 1)",
-    "$g-color-teal--2": "hsla(194, 65%, 28%, 1)",
-    "$g-color-teal--1": "hsla(194, 68%, 31%, 1)",
-    "$g-color-teal-0": "hsla(194, 91%, 31%, 1)",
-    "$g-color-teal-+1": "hsla(196, 44%, 52%, 1)",
-    "$g-color-teal-+2": "hsla(197, 58%, 67%, 1)",
-    "$g-color-teal-+3": "hsla(193, 75%, 84%, 1)",
-    "$g-color-teal-+4": "hsla(193, 76%, 87%, 1)",
-    "$g-color-teal-+5": "hsla(196, 72%, 93%, 1)",
-    "$g-color-teal-+6": "hsla(195, 77%, 95%, 1)",
-    "$g-color-teal-+7": "hsla(196, 100%, 97%, 1)",
-    "$g-color-teal-+8": "hsla(192, 100%, 99%, 1)",
-    "$g-color-aquamarine--4": "hsla(170, 96%, 9%, 1)",
-    "$g-color-aquamarine--3": "hsla(172, 70%, 17%, 1)",
-    "$g-color-aquamarine--2": "hsla(172, 66%, 24%, 1)",
-    "$g-color-aquamarine--1": "hsla(170, 62%, 27%, 1)",
-    "$g-color-aquamarine-0": "hsla(170, 86%, 26%, 1)",
-    "$g-color-aquamarine-+1": "hsla(172, 46%, 44%, 1)",
-    "$g-color-aquamarine-+2": "hsla(173, 46%, 61%, 1)",
-    "$g-color-aquamarine-+3": "hsla(173, 49%, 83%, 1)",
-    "$g-color-aquamarine-+4": "hsla(172, 63%, 86%, 1)",
-    "$g-color-aquamarine-+5": "hsla(174, 61%, 91%, 1)",
-    "$g-color-aquamarine-+6": "hsla(172, 61%, 93%, 1)",
-    "$g-color-aquamarine-+7": "hsla(174, 50%, 96%, 1)",
-    "$g-color-aquamarine-+8": "hsla(180, 60%, 99%, 1)",
-    "$g-color-green--4": "hsla(152, 76%, 10%, 1)",
-    "$g-color-green--3": "hsla(152, 70%, 18%, 1)",
-    "$g-color-green--2": "hsla(152, 61%, 25%, 1)",
-    "$g-color-green--1": "hsla(152, 58%, 28%, 1)",
-    "$g-color-green-0": "hsla(150, 62%, 30%, 1)",
-    "$g-color-green-+1": "hsla(150, 38%, 47%, 1)",
-    "$g-color-green-+2": "hsla(148, 46%, 63%, 1)",
-    "$g-color-green-+3": "hsla(148, 51%, 84%, 1)",
-    "$g-color-green-+4": "hsla(148, 61%, 86%, 1)",
-    "$g-color-green-+5": "hsla(148, 70%, 91%, 1)",
-    "$g-color-green-+6": "hsla(148, 61%, 94%, 1)",
-    "$g-color-green-+7": "hsla(146, 47%, 97%, 1)",
-    "$g-color-green-+8": "hsla(140, 60%, 99%, 1)",
-    "$g-color-emerald--4": "hsla(122, 64%, 11%, 1)",
-    "$g-color-emerald--3": "hsla(122, 63%, 20%, 1)",
-    "$g-color-emerald--2": "hsla(122, 48%, 27%, 1)",
-    "$g-color-emerald--1": "hsla(120, 41%, 31%, 1)",
-    "$g-color-emerald-0": "hsla(120, 38%, 33%, 1)",
-    "$g-color-emerald-+1": "hsla(120, 32%, 49%, 1)",
-    "$g-color-emerald-+2": "hsla(120, 38%, 66%, 1)",
-    "$g-color-emerald-+3": "hsla(120, 50%, 85%, 1)",
-    "$g-color-emerald-+4": "hsla(120, 57%, 88%, 1)",
-    "$g-color-emerald-+5": "hsla(120, 56%, 92%, 1)",
-    "$g-color-emerald-+6": "hsla(120, 61%, 94%, 1)",
-    "$g-color-emerald-+7": "hsla(120, 47%, 97%, 1)",
-    "$g-color-emerald-+8": "hsla(120, 60%, 99%, 1)",
-    "$g-color-orange--4": "hsla(30, 78%, 16%, 1)",
-    "$g-color-orange--3": "hsla(30, 77%, 27%, 1)",
-    "$g-color-orange--2": "hsla(29, 70%, 37%, 1)",
-    "$g-color-orange--1": "hsla(30, 86%, 38%, 1)",
-    "$g-color-orange-0": "hsla(30, 90%, 59%, 1)",
-    "$g-color-orange-+1": "hsla(30, 90%, 64%, 1)",
-    "$g-color-orange-+2": "hsla(30, 99%, 72%, 1)",
-    "$g-color-orange-+3": "hsla(30, 100%, 83%, 1)",
-    "$g-color-orange-+4": "hsla(30, 91%, 87%, 1)",
-    "$g-color-orange-+5": "hsla(30, 100%, 91%, 1)",
-    "$g-color-orange-+6": "hsla(31, 100%, 94%, 1)",
-    "$g-color-orange-+7": "hsla(30, 100%, 96%, 1)",
-    "$g-color-orange-+8": "hsla(24, 100%, 99%, 1)",
-    "$g-color-transparent": "hsla(0, 0%, 100%, 0)",
-    "$a-color-semantic-brand--4": th.color("$g-color-blue--4"),
-    "$a-color-semantic-brand--3": th.color("$g-color-blue--3"),
-    "$a-color-semantic-brand--2": th.color("$g-color-blue--2"),
-    "$a-color-semantic-brand--1": th.color("$g-color-blue--1"),
-    "$a-color-semantic-brand-0": th.color("$g-color-blue-0"),
-    "$a-color-semantic-brand-+1": th.color("$g-color-blue-+1"),
-    "$a-color-semantic-brand-+2": th.color("$g-color-blue-+2"),
-    "$a-color-semantic-brand-+3": th.color("$g-color-blue-+3"),
-    "$a-color-semantic-brand-+4": th.color("$g-color-blue-+4"),
-    "$a-color-semantic-brand-+5": th.color("$g-color-blue-+5"),
-    "$a-color-semantic-brand-+6": th.color("$g-color-blue-+6"),
-    "$a-color-semantic-brand-+7": th.color("$g-color-blue-+7"),
-    "$a-color-semantic-brand-+8": th.color("$g-color-blue-+8"),
-    "$a-color-semantic-informative--4": th.color("$g-color-blue--4"),
-    "$a-color-semantic-informative--3": th.color("$g-color-blue--3"),
-    "$a-color-semantic-informative--2": th.color("$g-color-blue--2"),
-    "$a-color-semantic-informative--1": th.color("$g-color-blue--1"),
-    "$a-color-semantic-informative-0": th.color("$g-color-blue-0"),
-    "$a-color-semantic-informative-+1": th.color("$g-color-blue-+1"),
-    "$a-color-semantic-informative-+2": th.color("$g-color-blue-+2"),
-    "$a-color-semantic-informative-+3": th.color("$g-color-blue-+3"),
-    "$a-color-semantic-informative-+4": th.color("$g-color-blue-+4"),
-    "$a-color-semantic-informative-+5": th.color("$g-color-blue-+5"),
-    "$a-color-semantic-informative-+6": th.color("$g-color-blue-+6"),
-    "$a-color-semantic-informative-+7": th.color("$g-color-blue-+7"),
-    "$a-color-semantic-informative-+8": th.color("$g-color-blue-+8"),
-    "$a-color-semantic-neutral--4": th.color("$g-color-coolGrey--4"),
-    "$a-color-semantic-neutral--3": th.color("$g-color-coolGrey--3"),
-    "$a-color-semantic-neutral--2": th.color("$g-color-coolGrey--2"),
-    "$a-color-semantic-neutral--1": th.color("$g-color-coolGrey--1"),
-    "$a-color-semantic-neutral-0": th.color("$g-color-coolGrey-0"),
-    "$a-color-semantic-neutral-+1": th.color("$g-color-coolGrey-+1"),
-    "$a-color-semantic-neutral-+2": th.color("$g-color-coolGrey-+2"),
-    "$a-color-semantic-neutral-+3": th.color("$g-color-coolGrey-+3"),
-    "$a-color-semantic-neutral-+4": th.color("$g-color-coolGrey-+4"),
-    "$a-color-semantic-neutral-+5": th.color("$g-color-coolGrey-+5"),
-    "$a-color-semantic-neutral-+6": th.color("$g-color-coolGrey-+6"),
-    "$a-color-semantic-neutral-+7": th.color("$g-color-coolGrey-+7"),
-    "$a-color-semantic-neutral-+8": th.color("$g-color-coolGrey-+8"),
-    "$a-color-semantic-neutralA--4": th.color("$g-color-coolGreyA--4"),
-    "$a-color-semantic-neutralA--3": th.color("$g-color-coolGreyA--3"),
-    "$a-color-semantic-neutralA--2": th.color("$g-color-coolGreyA--2"),
-    "$a-color-semantic-neutralA--1": th.color("$g-color-coolGreyA--1"),
-    "$a-color-semantic-neutralA-0": th.color("$g-color-coolGreyA-0"),
-    "$a-color-semantic-neutralA-+1": th.color("$g-color-coolGreyA-+1"),
-    "$a-color-semantic-neutralA-+2": th.color("$g-color-coolGreyA-+2"),
-    "$a-color-semantic-neutralA-+3": th.color("$g-color-coolGreyA-+3"),
-    "$a-color-semantic-neutralA-+4": th.color("$g-color-coolGreyA-+4"),
-    "$a-color-semantic-neutralA-+5": th.color("$g-color-coolGreyA-+5"),
-    "$a-color-semantic-neutralA-+6": th.color("$g-color-coolGreyA-+6"),
-    "$a-color-semantic-neutralA-+7": th.color("$g-color-coolGreyA-+7"),
-    "$a-color-semantic-neutralA-+8": th.color("$g-color-coolGreyA-+8"),
-    "$a-color-semantic-positive--4": th.color("$g-color-green--4"),
-    "$a-color-semantic-positive--3": th.color("$g-color-green--3"),
-    "$a-color-semantic-positive--2": th.color("$g-color-green--2"),
-    "$a-color-semantic-positive--1": th.color("$g-color-green--1"),
-    "$a-color-semantic-positive-0": th.color("$g-color-green-0"),
-    "$a-color-semantic-positive-+1": th.color("$g-color-green-+1"),
-    "$a-color-semantic-positive-+2": th.color("$g-color-green-+2"),
-    "$a-color-semantic-positive-+3": th.color("$g-color-green-+3"),
-    "$a-color-semantic-positive-+4": th.color("$g-color-green-+4"),
-    "$a-color-semantic-positive-+5": th.color("$g-color-green-+5"),
-    "$a-color-semantic-positive-+6": th.color("$g-color-green-+6"),
-    "$a-color-semantic-positive-+7": th.color("$g-color-green-+7"),
-    "$a-color-semantic-positive-+8": th.color("$g-color-green-+8"),
-    "$a-color-semantic-warning--4": th.color("$g-color-orange--4"),
-    "$a-color-semantic-warning--3": th.color("$g-color-orange--3"),
-    "$a-color-semantic-warning--2": th.color("$g-color-orange--2"),
-    "$a-color-semantic-warning--1": th.color("$g-color-orange--1"),
-    "$a-color-semantic-warning-0": th.color("$g-color-orange-0"),
-    "$a-color-semantic-warning-+1": th.color("$g-color-orange-+1"),
-    "$a-color-semantic-warning-+2": th.color("$g-color-orange-+2"),
-    "$a-color-semantic-warning-+3": th.color("$g-color-orange-+3"),
-    "$a-color-semantic-warning-+4": th.color("$g-color-orange-+4"),
-    "$a-color-semantic-warning-+5": th.color("$g-color-orange-+5"),
-    "$a-color-semantic-warning-+6": th.color("$g-color-orange-+6"),
-    "$a-color-semantic-warning-+7": th.color("$g-color-orange-+7"),
-    "$a-color-semantic-warning-+8": th.color("$g-color-orange-+8"),
-    "$a-color-semantic-negative--4": th.color("$g-color-red--4"),
-    "$a-color-semantic-negative--3": th.color("$g-color-red--3"),
-    "$a-color-semantic-negative--2": th.color("$g-color-red--2"),
-    "$a-color-semantic-negative--1": th.color("$g-color-red--1"),
-    "$a-color-semantic-negative-0": th.color("$g-color-red-0"),
-    "$a-color-semantic-negative-+1": th.color("$g-color-red-+1"),
-    "$a-color-semantic-negative-+2": th.color("$g-color-red-+2"),
-    "$a-color-semantic-negative-+3": th.color("$g-color-red-+3"),
-    "$a-color-semantic-negative-+4": th.color("$g-color-red-+4"),
-    "$a-color-semantic-negative-+5": th.color("$g-color-red-+5"),
-    "$a-color-semantic-negative-+6": th.color("$g-color-red-+6"),
-    "$a-color-semantic-negative-+7": th.color("$g-color-red-+7"),
-    "$a-color-semantic-negative-+8": th.color("$g-color-red-+8"),
-    "$a-color-content-primary": th.color("$a-color-semantic-neutral--3"),
-    "$a-color-content-secondary": th.color("$a-color-semantic-neutral-0"),
-    "$a-color-content-tertiary": th.color("$a-color-semantic-neutral-+1"),
-    "$a-color-content-disabled": th.color("$a-color-semantic-neutral-+2"),
-    "$a-color-content-primary-inverted": th.color("$g-color-whiteA-0"),
-    "$a-color-content-secondary-inverted": th.color("$g-color-whiteA--4"),
-    "$a-color-content-tertiary-inverted": th.color("$g-color-whiteA--5"),
-    "$a-color-content-disabled-inverted": th.color("$g-color-whiteA--6"),
-    "$a-color-content-informative": th.color("$a-color-semantic-informative-0"),
-    "$a-color-content-positive": th.color("$a-color-semantic-positive-0"),
-    "$a-color-content-warning": th.color("$a-color-semantic-warning-0"),
-    "$a-color-content-negative": th.color("$a-color-semantic-negative-0"),
-    "$a-color-content-brand": th.color("$a-color-semantic-brand-0"),
-    "$a-color-border-neutral": th.color("$a-color-semantic-neutral-0"),
-    "$a-color-border-informative": th.color("$a-color-semantic-informative-0"),
-    "$a-color-border-positive": th.color("$a-color-semantic-positive-0"),
-    "$a-color-border-warning": th.color("$a-color-semantic-warning-0"),
-    "$a-color-border-negative": th.color("$a-color-semantic-negative-0"),
-    "$a-color-border-brand": th.color("$a-color-semantic-brand-0"),
-    "$a-color-border-neutral-subtle": th.color("$a-color-semantic-neutral-+3"),
-    "$a-color-border-informative-subtle": th.color(
-      "$a-color-semantic-informative-+3"
-    ),
-    "$a-color-border-positive-subtle": th.color(
-      "$a-color-semantic-positive-+3"
-    ),
-    "$a-color-border-warning-subtle": th.color("$a-color-semantic-warning-+3"),
-    "$a-color-border-negative-subtle": th.color(
-      "$a-color-semantic-negative-+3"
-    ),
-    "$a-color-border-brand-subtle": th.color("$a-color-semantic-brand-+3"),
-    "$a-color-border-inverted": th.color("$g-color-whiteA-0"),
-    "$a-color-border-default": th.color("$a-color-semantic-neutral-+5"),
-    "$a-color-background-default": th.color("$g-color-whiteA-0"),
-    "$a-color-background-inverted": th.color("$a-color-semantic-neutral--3"),
-    "$a-color-background-neutral": th.color("$a-color-semantic-neutral-0"),
-    "$a-color-background-informative": th.color(
-      "$a-color-semantic-informative-0"
-    ),
-    "$a-color-background-positive": th.color("$a-color-semantic-positive-0"),
-    "$a-color-background-warning": th.color("$a-color-semantic-warning-0"),
-    "$a-color-background-negative": th.color("$a-color-semantic-negative-0"),
-    "$a-color-background-brand": th.color("$a-color-semantic-brand-0"),
-    "$a-color-background-neutral-subtle": th.color(
-      "$a-color-semantic-neutral-+7"
-    ),
-    "$a-color-background-informative-subtle": th.color(
-      "$a-color-semantic-informative-+7"
-    ),
-    "$a-color-background-positive-subtle": th.color(
-      "$a-color-semantic-positive-+7"
-    ),
-    "$a-color-background-warning-subtle": th.color(
-      "$a-color-semantic-warning-+7"
-    ),
-    "$a-color-background-negative-subtle": th.color(
-      "$a-color-semantic-negative-+7"
-    ),
-    "$a-color-background-brand-subtle": th.color("$a-color-semantic-brand-+7"),
-    "$a-color-background-neutral-surface": th.color(
-      "$a-color-semantic-neutral-+8"
-    ),
-    "$a-color-background-informative-surface": th.color(
-      "$a-color-semantic-informative-+8"
-    ),
-    "$a-color-background-positive-surface": th.color(
-      "$a-color-semantic-positive-+8"
-    ),
-    "$a-color-background-warning-surface": th.color(
-      "$a-color-semantic-warning-+8"
-    ),
-    "$a-color-background-negative-surface": th.color(
-      "$a-color-semantic-negative-+8"
-    ),
-    "$a-color-background-brand-surface": th.color("$a-color-semantic-brand-+8"),
-    "$a-color-background-dimmer": th.color("$a-color-semantic-neutralA-0"),
-    "$a-color-action-primary-normal": th.color("$a-color-semantic-brand-0"),
-    "$a-color-action-primary-hover": th.color("$a-color-semantic-brand--2"),
-    "$a-color-action-primary-active": th.color("$a-color-semantic-brand--3"),
-    "$a-color-action-primary-selected": th.color("$a-color-semantic-brand--2"),
-    "$a-color-action-primary-subtle-normal": th.color(
-      "$a-color-semantic-brand-+6"
-    ),
-    "$a-color-action-primary-subtle-hover": th.color(
-      "$a-color-semantic-brand-+5"
-    ),
-    "$a-color-action-primary-subtle-active": th.color(
-      "$a-color-semantic-brand-+3"
-    ),
-    "$a-color-action-primary-subtle-selected": th.color(
-      "$a-color-semantic-brand-+5"
-    ),
-    "$a-color-action-neutral-normal": th.color("$a-color-semantic-neutral--1"),
-    "$a-color-action-neutral-hover": th.color("$a-color-semantic-neutral--2"),
-    "$a-color-action-neutral-active": th.color("$a-color-semantic-neutral--3"),
-    "$a-color-action-neutral-selected": th.color(
-      "$a-color-semantic-neutral--2"
-    ),
-    "$a-color-action-neutral-subtle-normal": th.color(
-      "$a-color-semantic-neutral-+6"
-    ),
-    "$a-color-action-neutral-subtle-hover": th.color(
-      "$a-color-semantic-neutral-+5"
-    ),
-    "$a-color-action-neutral-subtle-active": th.color(
-      "$a-color-semantic-neutral-+3"
-    ),
-    "$a-color-action-neutral-subtle-selected": th.color(
-      "$a-color-semantic-neutral-+5"
-    ),
-    "$a-color-action-success-normal": th.color("$a-color-semantic-positive-0"),
-    "$a-color-action-success-hover": th.color("$a-color-semantic-positive--2"),
-    "$a-color-action-success-active": th.color("$a-color-semantic-positive--3"),
-    "$a-color-action-success-selected": th.color(
-      "$a-color-semantic-positive--2"
-    ),
-    "$a-color-action-success-subtle-normal": th.color(
-      "$a-color-semantic-positive-+6"
-    ),
-    "$a-color-action-success-subtle-hover": th.color(
-      "$a-color-semantic-positive-+5"
-    ),
-    "$a-color-action-success-subtle-active": th.color(
-      "$a-color-semantic-positive-+3"
-    ),
-    "$a-color-action-success-subtle-selected": th.color(
-      "$a-color-semantic-positive-+5"
-    ),
-    "$a-color-action-destructive-normal": th.color(
-      "$a-color-semantic-negative-0"
-    ),
-    "$a-color-action-destructive-hover": th.color(
-      "$a-color-semantic-negative--2"
-    ),
-    "$a-color-action-destructive-active": th.color(
-      "$a-color-semantic-negative--3"
-    ),
-    "$a-color-action-destructive-selected": th.color(
-      "$a-color-semantic-negative--2"
-    ),
-    "$a-color-action-destructive-subtle-normal": th.color(
-      "$a-color-semantic-negative-+6"
-    ),
-    "$a-color-action-destructive-subtle-hover": th.color(
-      "$a-color-semantic-negative-+5"
-    ),
-    "$a-color-action-destructive-subtle-active": th.color(
-      "$a-color-semantic-negative-+3"
-    ),
-    "$a-color-action-destructive-subtle-selected": th.color(
-      "$a-color-semantic-negative-+5"
-    ),
-    "$a-color-action-ghost-normal": th.color("$g-color-transparent"),
-    "$a-color-action-ghost-hover": th.color("$a-color-semantic-neutralA-+6"),
-    "$a-color-action-ghost-active": th.color("$a-color-semantic-neutralA-+5"),
-    "$a-color-action-ghost-selected": th.color("$a-color-semantic-neutralA-+6"),
-    "$a-color-action-ghost-inverted-hover": th.color("$g-color-whiteA--8"),
-    "$a-color-action-ghost-inverted-active": th.color("$g-color-whiteA--7"),
-    "$a-color-action-ghost-inverted-selected": th.color("$g-color-whiteA--8"),
-    "$a-color-action-ghost-destructive-hover": th.color(
-      "$a-color-semantic-negative-+6"
-    ),
-    "$a-color-action-ghost-destructive-active": th.color(
-      "$a-color-semantic-negative-+5"
-    ),
-    "$a-color-action-ghost-destructive-selected": th.color(
-      "$a-color-semantic-negative-+6"
-    ),
-    "$a-color-action-outline-normal": th.color("$a-color-semantic-neutral-+3"),
-    "$a-color-action-outline-hover": th.color("$a-color-semantic-neutral-+2"),
-    "$a-color-action-outline-active": th.color("$a-color-semantic-neutral-+1"),
-    "$a-color-action-outline-selected": th.color(
-      "$a-color-semantic-neutral-+2"
-    ),
-    "$a-color-action-inverted-normal": th.color("$g-color-whiteA-0"),
-    "$a-color-action-inverted-hover": th.color("$g-color-whiteA--1"),
-    "$a-color-action-inverted-active": th.color("$g-color-whiteA--2"),
-    "$a-color-action-inverted-selected": th.color("$g-color-whiteA--1"),
-    "$a-color-action-reverseInverted-normal": th.color(
-      "$a-color-semantic-neutralA--3"
-    ),
-    "$a-color-action-reverseInverted-hover": th.color(
-      "$a-color-semantic-neutralA--1"
-    ),
-    "$a-color-action-reverseInverted-active": th.color(
-      "$a-color-semantic-neutralA-0"
-    ),
-    "$a-color-action-reverseInverted-selected": th.color(
-      "$a-color-semantic-neutralA--1"
-    ),
-    "$a-color-interaction-default-normal": th.color("$g-color-blue-0"),
-    "$a-color-interaction-default-hover": th.color("$g-color-blue--2"),
-    "$a-color-interaction-default-active": th.color("$g-color-blue--3"),
-    "$a-color-interaction-default-selected": th.color("$g-color-blue--2"),
-    "$a-color-interaction-default-subtle-normal": th.color("$g-color-blue-+6"),
-    "$a-color-interaction-default-subtle-hover": th.color("$g-color-blue-+5"),
-    "$a-color-interaction-default-subtle-active": th.color("$g-color-blue-+3"),
-    "$a-color-interaction-default-subtle-selected":
-      th.color("$g-color-blue-+5"),
-    "$a-color-interaction-neutral-normal": th.color(
-      "$a-color-semantic-neutral--1"
-    ),
-    "$a-color-interaction-neutral-hover": th.color(
-      "$a-color-semantic-neutral--2"
-    ),
-    "$a-color-interaction-neutral-active": th.color(
-      "$a-color-semantic-neutral--3"
-    ),
-    "$a-color-interaction-neutral-selected": th.color(
-      "$a-color-semantic-neutral--2"
-    ),
-    "$a-color-interaction-neutral-subtle-normal": th.color(
-      "$a-color-semantic-neutral-+6"
-    ),
-    "$a-color-interaction-neutral-subtle-hover": th.color(
-      "$a-color-semantic-neutral-+5"
-    ),
-    "$a-color-interaction-neutral-subtle-active": th.color(
-      "$a-color-semantic-neutral-+3"
-    ),
-    "$a-color-interaction-neutral-subtle-selected": th.color(
-      "$a-color-semantic-neutral-+5"
-    ),
-    "$a-color-interaction-alert-normal": th.color(
-      "$a-color-semantic-negative-0"
-    ),
-    "$a-color-interaction-alert-hover": th.color(
-      "$a-color-semantic-negative--2"
-    ),
-    "$a-color-interaction-alert-active": th.color(
-      "$a-color-semantic-negative--3"
-    ),
-    "$a-color-interaction-alert-selected": th.color(
-      "$a-color-semantic-negative--2"
-    ),
-    "$a-color-interaction-alert-subtle-normal": th.color(
-      "$a-color-semantic-negative-+6"
-    ),
-    "$a-color-interaction-alert-subtle-hover": th.color(
-      "$a-color-semantic-negative-+5"
-    ),
-    "$a-color-interaction-alert-subtle-active": th.color(
-      "$a-color-semantic-negative-+3"
-    ),
-    "$a-color-interaction-alert-subtle-selected": th.color(
-      "$a-color-semantic-negative-+5"
-    ),
-    "$a-color-interaction-ghost-normal": th.color("$g-color-transparent"),
-    "$a-color-interaction-ghost-hover": th.color(
-      "$a-color-semantic-neutralA-+6"
-    ),
-    "$a-color-interaction-ghost-active": th.color(
-      "$a-color-semantic-neutralA-+5"
-    ),
-    "$a-color-interaction-ghost-selected": th.color(
-      "$a-color-semantic-neutralA-+6"
-    ),
-    "$a-color-interaction-ghost-inverted-hover": th.color("$g-color-whiteA--8"),
-    "$a-color-interaction-ghost-inverted-normal":
-      th.color("$g-color-whiteA--7"),
-    "$a-color-interaction-ghost-inverted-selected":
-      th.color("$g-color-whiteA--8"),
-    "$a-color-interaction-ghost-destructive-hover": th.color(
-      "$a-color-semantic-negative-+6"
-    ),
-    "$a-color-interaction-ghost-destructive-normal": th.color(
-      "$a-color-semantic-negative-+5"
-    ),
-    "$a-color-interaction-ghost-destructive-selected": th.color(
-      "$a-color-semantic-negative-+6"
-    ),
-    "$a-color-interaction-disabled-normal": th.color(
-      "$a-color-semantic-neutral-+2"
-    ),
-    "$a-color-interaction-disabled-hover": th.color(
-      "$a-color-semantic-neutral-+1"
-    ),
-    "$a-color-interaction-disabled-active": th.color(
-      "$a-color-semantic-neutral-0"
-    ),
-    "$a-color-interaction-disabled-subtle-normal": th.color(
-      "$a-color-semantic-neutral-+5"
-    ),
-    "$a-color-interaction-disabled-subtle-hover": th.color(
-      "$a-color-semantic-neutral-+4"
-    ),
-    "$a-color-interaction-disabled-subtle-active": th.color(
-      "$a-color-semantic-neutral-+3"
-    ),
-    "$a-color-interaction-border-normal": th.color("$g-color-blue-+2"),
-    "$a-color-interaction-border-hover": th.color("$g-color-blue-+1"),
-    "$a-color-interaction-border-active": th.color("$g-color-blue--1"),
-    "$a-color-interaction-border-selected": th.color("$g-color-blue-0"),
-    "$a-color-interaction-border-neutral-normal": th.color(
-      "$a-color-semantic-neutral-+3"
-    ),
-    "$a-color-interaction-border-neutral-hover": th.color(
-      "$a-color-semantic-neutral-+2"
-    ),
-    "$a-color-interaction-border-neutral-active": th.color(
-      "$a-color-semantic-neutral-+1"
-    ),
-    "$a-color-interaction-border-neutral-selected": th.color(
-      "$a-color-semantic-neutral-+2"
-    ),
-    "$a-color-interaction-border-alert": th.color(
-      "$a-color-semantic-negative-+1"
-    ),
-    "$a-color-interaction-background-modal": th.color(
-      "$a-color-background-default"
-    ),
-    "$a-color-interaction-background-modeless": th.color(
-      "$a-color-background-default"
-    ),
-    "$a-color-interaction-background-modeless-inverted": th.color(
-      "$a-color-background-inverted"
-    ),
-    "$a-color-interaction-background-sidepanel": th.color(
-      "$a-color-background-default"
-    ),
-    "$a-color-interaction-background-formField": th.color(
-      "$a-color-background-default"
-    ),
-    "$a-color-interaction-inverted-normal": th.color("$g-color-whiteA-0"),
-    "$a-color-interaction-inverted-hover": th.color("$g-color-whiteA--1"),
-    "$a-color-interaction-inverted-active": th.color("$g-color-whiteA--2"),
-    "$a-color-interaction-inverted-selected": th.color("$g-color-whiteA--1"),
-    "$a-color-interaction-focus-default": th.color("$g-color-blue-+1"),
-    "$a-color-nonContextual-grey-onMuted": th.color(
-      "$a-color-semantic-neutral--4"
-    ),
-    "$a-color-nonContextual-grey-default": th.color(
-      "$a-color-semantic-neutral-0"
-    ),
-    "$a-color-nonContextual-grey-muted": th.color(
-      "$a-color-semantic-neutral-+4"
-    ),
-    "$a-color-nonContextual-grey-subtle": th.color(
-      "$a-color-semantic-neutral-+5"
-    ),
-    "$a-color-nonContextual-grey-surface": th.color(
-      "$a-color-semantic-neutral-+8"
-    ),
-    "$a-color-nonContextual-red-onMuted": th.color("$g-color-red--4"),
-    "$a-color-nonContextual-red-default": th.color("$g-color-red-0"),
-    "$a-color-nonContextual-red-muted": th.color("$g-color-red-+4"),
-    "$a-color-nonContextual-red-subtle": th.color("$g-color-red-+5"),
-    "$a-color-nonContextual-red-surface": th.color("$g-color-red-+8"),
-    "$a-color-nonContextual-raspberry-onMuted": th.color(
-      "$g-color-raspberry--4"
-    ),
-    "$a-color-nonContextual-raspberry-default": th.color(
-      "$g-color-raspberry-0"
-    ),
-    "$a-color-nonContextual-raspberry-muted": th.color("$g-color-raspberry-+4"),
-    "$a-color-nonContextual-raspberry-subtle": th.color(
-      "$g-color-raspberry-+5"
-    ),
-    "$a-color-nonContextual-raspberry-surface": th.color(
-      "$g-color-raspberry-+8"
-    ),
-    "$a-color-nonContextual-magenta-onMuted": th.color("$g-color-magenta--4"),
-    "$a-color-nonContextual-magenta-default": th.color("$g-color-magenta-0"),
-    "$a-color-nonContextual-magenta-muted": th.color("$g-color-magenta-+4"),
-    "$a-color-nonContextual-magenta-subtle": th.color("$g-color-magenta-+5"),
-    "$a-color-nonContextual-magenta-surface": th.color("$g-color-magenta-+8"),
-    "$a-color-nonContextual-purple-onMuted": th.color("$g-color-purple--4"),
-    "$a-color-nonContextual-purple-default": th.color("$g-color-purple-0"),
-    "$a-color-nonContextual-purple-muted": th.color("$g-color-purple-+4"),
-    "$a-color-nonContextual-purple-subtle": th.color("$g-color-purple-+5"),
-    "$a-color-nonContextual-purple-surface": th.color("$g-color-purple-+8"),
-    "$a-color-nonContextual-grape-onMuted": th.color("$g-color-grape--4"),
-    "$a-color-nonContextual-grape-default": th.color("$g-color-grape-0"),
-    "$a-color-nonContextual-grape-muted": th.color("$g-color-grape-+4"),
-    "$a-color-nonContextual-grape-subtle": th.color("$g-color-grape-+5"),
-    "$a-color-nonContextual-grape-surface": th.color("$g-color-grape-+8"),
-    "$a-color-nonContextual-violet-onMuted": th.color("$g-color-violet--4"),
-    "$a-color-nonContextual-violet-default": th.color("$g-color-violet-0"),
-    "$a-color-nonContextual-violet-muted": th.color("$g-color-violet-+4"),
-    "$a-color-nonContextual-violet-subtle": th.color("$g-color-violet-+5"),
-    "$a-color-nonContextual-violet-surface": th.color("$g-color-violet-+8"),
-    "$a-color-nonContextual-blue-onMuted": th.color("$g-color-blue--4"),
-    "$a-color-nonContextual-blue-default": th.color("$g-color-blue-0"),
-    "$a-color-nonContextual-blue-muted": th.color("$g-color-blue-+4"),
-    "$a-color-nonContextual-blue-subtle": th.color("$g-color-blue-+5"),
-    "$a-color-nonContextual-blue-surface": th.color("$g-color-blue-+8"),
-    "$a-color-nonContextual-cyan-onMuted": th.color("$g-color-cyan--4"),
-    "$a-color-nonContextual-cyan-default": th.color("$g-color-cyan-0"),
-    "$a-color-nonContextual-cyan-muted": th.color("$g-color-cyan-+4"),
-    "$a-color-nonContextual-cyan-subtle": th.color("$g-color-cyan-+5"),
-    "$a-color-nonContextual-cyan-surface": th.color("$g-color-cyan-+8"),
-    "$a-color-nonContextual-teal-onMuted": th.color("$g-color-teal--4"),
-    "$a-color-nonContextual-teal-default": th.color("$g-color-teal-0"),
-    "$a-color-nonContextual-teal-muted": th.color("$g-color-teal-+4"),
-    "$a-color-nonContextual-teal-subtle": th.color("$g-color-teal-+5"),
-    "$a-color-nonContextual-teal-surface": th.color("$g-color-teal-+8"),
-    "$a-color-nonContextual-aquamarine-onMuted": th.color(
-      "$g-color-aquamarine--4"
-    ),
-    "$a-color-nonContextual-aquamarine-default": th.color(
-      "$g-color-aquamarine-0"
-    ),
-    "$a-color-nonContextual-aquamarine-muted": th.color(
-      "$g-color-aquamarine-+4"
-    ),
-    "$a-color-nonContextual-aquamarine-subtle": th.color(
-      "$g-color-aquamarine-+5"
-    ),
-    "$a-color-nonContextual-aquamarine-surface": th.color(
-      "$g-color-aquamarine-+8"
-    ),
-    "$a-color-nonContextual-green-onMuted": th.color("$g-color-green--4"),
-    "$a-color-nonContextual-green-default": th.color("$g-color-green-0"),
-    "$a-color-nonContextual-green-muted": th.color("$g-color-green-+4"),
-    "$a-color-nonContextual-green-subtle": th.color("$g-color-green-+5"),
-    "$a-color-nonContextual-green-surface": th.color("$g-color-green-+8"),
-    "$a-color-nonContextual-emerald-onMuted": th.color("$g-color-emerald--4"),
-    "$a-color-nonContextual-emerald-default": th.color("$g-color-emerald-0"),
-    "$a-color-nonContextual-emerald-muted": th.color("$g-color-emerald-+4"),
-    "$a-color-nonContextual-emerald-subtle": th.color("$g-color-emerald-+5"),
-    "$a-color-nonContextual-emerald-surface": th.color("$g-color-emerald-+8"),
-    "$a-color-border-defaultA": th.color("$a-color-semantic-neutralA-+5"),
-    "$a-color-nonContextual-orange-onMuted": th.color("$g-color-orange--4"),
-    "$a-color-nonContextual-orange-default": th.color("$g-color-orange-0"),
-    "$a-color-nonContextual-orange-muted": th.color("$g-color-orange-+4"),
-    "$a-color-nonContextual-orange-subtle": th.color("$g-color-orange-+5"),
-    "$a-color-nonContextual-orange-surface": th.color("$g-color-orange-+8"),
+    "coolGrey--4": "hsla(208, 24%, 14%, 1)",
+    "coolGrey--3": "hsla(208, 15%, 18%, 1)",
+    "coolGrey--2": "hsla(210, 12%, 26%, 1)",
+    "coolGrey--1": "hsla(210, 12%, 33%, 1)",
+    "coolGrey-0": "hsla(215, 12%, 38%, 1)",
+    "coolGrey-+1": "hsla(211, 12%, 55%, 1)",
+    "coolGrey-+2": "hsla(211, 12%, 66%, 1)",
+    "coolGrey-+3": "hsla(210, 17%, 84%, 1)",
+    "coolGrey-+4": "hsla(207, 16%, 89%, 1)",
+    "coolGrey-+5": "hsla(210, 16%, 93%, 1)",
+    "coolGrey-+6": "hsla(204, 20%, 95%, 1)",
+    "coolGrey-+7": "hsla(210, 25%, 97%, 1)",
+    "coolGrey-+8": "hsla(210, 33%, 99%, 1)",
+    "coolGreyA--4": "hsla(207, 47%, 7%, 0.93)",
+    "coolGreyA--3": "hsla(208, 43%, 7%, 0.88)",
+    "coolGreyA--2": "hsla(212, 27%, 14%, 0.86)",
+    "coolGreyA--1": "hsla(211, 30%, 16%, 0.8)",
+    "coolGreyA-0": "hsla(215, 40%, 16%, 0.74)",
+    "coolGreyA-+1": "hsla(210, 50%, 19%, 0.56)",
+    "coolGreyA-+2": "hsla(211, 66%, 15%, 0.4)",
+    "coolGreyA-+3": "hsla(212, 68%, 20%, 0.2)",
+    "coolGreyA-+4": "hsla(205, 89%, 14%, 0.13)",
+    "coolGreyA-+5": "hsla(214, 64%, 17%, 0.09)",
+    "coolGreyA-+6": "hsla(206, 95%, 16%, 0.06)",
+    "coolGreyA-+7": "hsla(213, 100%, 18%, 0.04)",
+    "coolGreyA-+8": "hsla(216, 67%, 37%, 0.02)",
+    "neutralGrey--4": "hsla(0, 0%, 13%, 1)",
+    "neutralGrey--3": "hsla(0, 0%, 18%, 1)",
+    "neutralGrey--2": "hsla(0, 0%, 25%, 1)",
+    "neutralGrey--1": "hsla(0, 0%, 32%, 1)",
+    "neutralGrey-0": "hsla(0, 0%, 37%, 1)",
+    "neutralGrey-+1": "hsla(0, 0%, 54%, 1)",
+    "neutralGrey-+2": "hsla(0, 0%, 65%, 1)",
+    "neutralGrey-+3": "hsla(0, 0%, 84%, 1)",
+    "neutralGrey-+4": "hsla(0, 0%, 89%, 1)",
+    "neutralGrey-+5": "hsla(0, 0%, 92%, 1)",
+    "neutralGrey-+6": "hsla(0, 0%, 95%, 1)",
+    "neutralGrey-+7": "hsla(0, 0%, 97%, 1)",
+    "neutralGrey-+8": "hsla(0, 0%, 99%, 1)",
+    "neutralGreyA--4": "hsla(0, 0%, 7%, 0.93)",
+    "neutralGreyA--3": "hsla(0, 0%, 6%, 0.88)",
+    "neutralGreyA--2": "hsla(0, 0%, 13%, 0.86)",
+    "neutralGreyA--1": "hsla(0, 0%, 15%, 0.8)",
+    "neutralGreyA-0": "hsla(240, 1%, 15%, 0.74)",
+    "neutralGreyA-+1": "hsla(0, 0%, 17%, 0.56)",
+    "neutralGreyA-+2": "hsla(0, 0%, 13%, 0.4)",
+    "neutralGreyA-+3": "hsla(0, 0%, 18%, 0.2)",
+    "neutralGreyA-+4": "hsla(0, 0%, 12%, 0.13)",
+    "neutralGreyA-+5": "hsla(0, 0%, 11%, 0.09)",
+    "neutralGreyA-+6": "hsla(0, 0%, 13%, 0.06)",
+    "neutralGreyA-+7": "hsla(0, 0%, 18%, 0.04)",
+    "neutralGreyA-+8": "hsla(0, 0%, 32%, 0.02)",
+    "warmGrey--4": "hsla(60, 4%, 13%, 1)",
+    "warmGrey--3": "hsla(60, 4%, 18%, 1)",
+    "warmGrey--2": "hsla(60, 5%, 24%, 1)",
+    "warmGrey--1": "hsla(60, 4%, 31%, 1)",
+    "warmGrey-0": "hsla(60, 4%, 36%, 1)",
+    "warmGrey-+1": "hsla(60, 3%, 53%, 1)",
+    "warmGrey-+2": "hsla(60, 5%, 64%, 1)",
+    "warmGrey-+3": "hsla(60, 8%, 84%, 1)",
+    "warmGrey-+4": "hsla(60, 8%, 89%, 1)",
+    "warmGrey-+5": "hsla(60, 9%, 91%, 1)",
+    "warmGrey-+6": "hsla(60, 6%, 95%, 1)",
+    "warmGrey-+7": "hsla(60, 6%, 97%, 1)",
+    "warmGrey-+8": "hsla(60, 4%, 99%, 1)",
+    "warmGreyA--4": "hsla(60, 6%, 7%, 0.93)",
+    "warmGreyA--3": "hsla(60, 15%, 6%, 0.88)",
+    "warmGreyA--2": "hsla(60, 12%, 12%, 0.86)",
+    "warmGreyA--1": "hsla(60, 10%, 14%, 0.8)",
+    "warmGreyA-0": "hsla(60, 15%, 13%, 0.74)",
+    "warmGreyA-+1": "hsla(60, 15%, 16%, 0.56)",
+    "warmGreyA-+2": "hsla(60, 41%, 11%, 0.4)",
+    "warmGreyA-+3": "hsla(60, 36%, 18%, 0.2)",
+    "warmGreyA-+4": "hsla(60, 43%, 14%, 0.13)",
+    "warmGreyA-+5": "hsla(60, 89%, 7%, 0.09)",
+    "warmGreyA-+6": "hsla(60, 54%, 12%, 0.06)",
+    "warmGreyA-+7": "hsla(60, 3%, 18%, 0.04)",
+    "warmGreyA-+8": "hsla(0, 0%, 32%, 0.02)",
+    "whiteA--12": "hsla(0, 0%, 100%, 0.02)",
+    "whiteA--11": "hsla(0, 0%, 100%, 0.03)",
+    "whiteA--10": "hsla(0, 0%, 100%, 0.05)",
+    "whiteA--9": "hsla(0, 0%, 100%, 0.08)",
+    "whiteA--8": "hsla(0, 0%, 100%, 0.1)",
+    "whiteA--7": "hsla(0, 0%, 100%, 0.12)",
+    "whiteA--6": "hsla(0, 0%, 100%, 0.24)",
+    "whiteA--5": "hsla(0, 0%, 100%, 0.4)",
+    "whiteA--4": "hsla(0, 0%, 100%, 0.64)",
+    "whiteA--3": "hsla(0, 0%, 100%, 0.68)",
+    "whiteA--2": "hsla(0, 0%, 100%, 0.72)",
+    "whiteA--1": "hsla(0, 0%, 100%, 0.82)",
+    "whiteA-0": "hsla(0, 0%, 100%, 1)",
+    "red--4": "hsla(0, 70%, 17%, 1)",
+    "red--3": "hsla(0, 55%, 28%, 1)",
+    "red--2": "hsla(0, 54%, 38%, 1)",
+    "red--1": "hsla(0, 50%, 42%, 1)",
+    "red-0": "hsla(0, 58%, 49%, 1)",
+    "red-+1": "hsla(0, 85%, 67%, 1)",
+    "red-+2": "hsla(0, 82%, 76%, 1)",
+    "red-+3": "hsla(0, 88%, 90%, 1)",
+    "red-+4": "hsla(0, 85%, 92%, 1)",
+    "red-+5": "hsla(0, 92%, 95%, 1)",
+    "red-+6": "hsla(0, 100%, 96%, 1)",
+    "red-+7": "hsla(0, 88%, 98%, 1)",
+    "red-+8": "hsla(0, 100%, 99%, 1)",
+    "raspberry--4": "hsla(340, 70%, 16%, 1)",
+    "raspberry--3": "hsla(340, 55%, 26%, 1)",
+    "raspberry--2": "hsla(340, 54%, 37%, 1)",
+    "raspberry--1": "hsla(340, 50%, 41%, 1)",
+    "raspberry-0": "hsla(340, 60%, 47%, 1)",
+    "raspberry-+1": "hsla(340, 71%, 64%, 1)",
+    "raspberry-+2": "hsla(340, 71%, 74%, 1)",
+    "raspberry-+3": "hsla(340, 75%, 89%, 1)",
+    "raspberry-+4": "hsla(339, 83%, 91%, 1)",
+    "raspberry-+5": "hsla(342, 87%, 94%, 1)",
+    "raspberry-+6": "hsla(341, 80%, 96%, 1)",
+    "raspberry-+7": "hsla(340, 82%, 98%, 1)",
+    "raspberry-+8": "hsla(336, 100%, 99%, 1)",
+    "magenta--4": "hsla(320, 71%, 15%, 1)",
+    "magenta--3": "hsla(321, 55%, 26%, 1)",
+    "magenta--2": "hsla(320, 54%, 35%, 1)",
+    "magenta--1": "hsla(320, 50%, 39%, 1)",
+    "magenta-0": "hsla(320, 58%, 44%, 1)",
+    "magenta-+1": "hsla(320, 66%, 62%, 1)",
+    "magenta-+2": "hsla(320, 72%, 73%, 1)",
+    "magenta-+3": "hsla(320, 74%, 88%, 1)",
+    "magenta-+4": "hsla(321, 83%, 91%, 1)",
+    "magenta-+5": "hsla(321, 87%, 94%, 1)",
+    "magenta-+6": "hsla(319, 80%, 96%, 1)",
+    "magenta-+7": "hsla(320, 82%, 98%, 1)",
+    "magenta-+8": "hsla(324, 100%, 99%, 1)",
+    "purple--4": "hsla(320, 71%, 15%, 1)",
+    "purple--3": "hsla(290, 55%, 26%, 1)",
+    "purple--2": "hsla(290, 54%, 35%, 1)",
+    "purple--1": "hsla(290, 50%, 39%, 1)",
+    "purple-0": "hsla(290, 50%, 45%, 1)",
+    "purple-+1": "hsla(288, 62%, 63%, 1)",
+    "purple-+2": "hsla(288, 71%, 74%, 1)",
+    "purple-+3": "hsla(296, 74%, 88%, 1)",
+    "purple-+4": "hsla(291, 83%, 91%, 1)",
+    "purple-+5": "hsla(288, 87%, 94%, 1)",
+    "purple-+6": "hsla(289, 80%, 96%, 1)",
+    "purple-+7": "hsla(288, 100%, 98%, 1)",
+    "purple-+8": "hsla(288, 100%, 99%, 1)",
+    "grape--4": "hsla(270, 70%, 18%, 1)",
+    "grape--3": "hsla(270, 56%, 30%, 1)",
+    "grape--2": "hsla(270, 54%, 40%, 1)",
+    "grape--1": "hsla(270, 50%, 45%, 1)",
+    "grape-0": "hsla(270, 50%, 50%, 1)",
+    "grape-+1": "hsla(270, 74%, 68%, 1)",
+    "grape-+2": "hsla(270, 81%, 77%, 1)",
+    "grape-+3": "hsla(269, 84%, 90%, 1)",
+    "grape-+4": "hsla(270, 100%, 93%, 1)",
+    "grape-+5": "hsla(270, 100%, 95%, 1)",
+    "grape-+6": "hsla(264, 100%, 97%, 1)",
+    "grape-+7": "hsla(270, 100%, 98%, 1)",
+    "grape-+8": "hsla(264, 100%, 99%, 1)",
+    "violet--4": "hsla(250, 69%, 23%, 1)",
+    "violet--3": "hsla(250, 55%, 35%, 1)",
+    "violet--2": "hsla(250, 54%, 48%, 1)",
+    "violet--1": "hsla(250, 60%, 53%, 1)",
+    "violet-0": "hsla(250, 54%, 55%, 1)",
+    "violet-+1": "hsla(250, 80%, 72%, 1)",
+    "violet-+2": "hsla(246, 92%, 81%, 1)",
+    "violet-+3": "hsla(249, 100%, 92%, 1)",
+    "violet-+4": "hsla(246, 100%, 94%, 1)",
+    "violet-+5": "hsla(249, 100%, 96%, 1)",
+    "violet-+6": "hsla(252, 100%, 97%, 1)",
+    "violet-+7": "hsla(252, 100%, 98%, 1)",
+    "violet-+8": "hsla(252, 100%, 99%, 1)",
+    "blue--4": "hsla(222, 91%, 19%, 1)",
+    "blue--3": "hsla(222, 80%, 33%, 1)",
+    "blue--2": "hsla(222, 73%, 44%, 1)",
+    "blue--1": "hsla(222, 68%, 48%, 1)",
+    "blue-0": "hsla(222, 66%, 51%, 1)",
+    "blue-+1": "hsla(222, 87%, 68%, 1)",
+    "blue-+2": "hsla(221, 93%, 77%, 1)",
+    "blue-+3": "hsla(221, 100%, 90%, 1)",
+    "blue-+4": "hsla(221, 100%, 92%, 1)",
+    "blue-+5": "hsla(220, 100%, 95%, 1)",
+    "blue-+6": "hsla(223, 100%, 96%, 1)",
+    "blue-+7": "hsla(223, 100%, 98%, 1)",
+    "blue-+8": "hsla(227, 100%, 99%, 1)",
+    "cyan--4": "hsla(205, 100%, 13%, 1)",
+    "cyan--3": "hsla(205, 80%, 24%, 1)",
+    "cyan--2": "hsla(205, 73%, 32%, 1)",
+    "cyan--1": "hsla(205, 71%, 36%, 1)",
+    "cyan-0": "hsla(205, 92%, 38%, 1)",
+    "cyan-+1": "hsla(210, 66%, 60%, 1)",
+    "cyan-+2": "hsla(208, 87%, 72%, 1)",
+    "cyan-+3": "hsla(208, 100%, 88%, 1)",
+    "cyan-+4": "hsla(208, 100%, 90%, 1)",
+    "cyan-+5": "hsla(207, 100%, 94%, 1)",
+    "cyan-+6": "hsla(210, 100%, 96%, 1)",
+    "cyan-+7": "hsla(204, 100%, 97%, 1)",
+    "cyan-+8": "hsla(204, 100%, 99%, 1)",
+    "teal--4": "hsla(194, 96%, 11%, 1)",
+    "teal--3": "hsla(194, 80%, 20%, 1)",
+    "teal--2": "hsla(194, 65%, 28%, 1)",
+    "teal--1": "hsla(194, 68%, 31%, 1)",
+    "teal-0": "hsla(194, 91%, 31%, 1)",
+    "teal-+1": "hsla(196, 44%, 52%, 1)",
+    "teal-+2": "hsla(197, 58%, 67%, 1)",
+    "teal-+3": "hsla(193, 75%, 84%, 1)",
+    "teal-+4": "hsla(193, 76%, 87%, 1)",
+    "teal-+5": "hsla(196, 72%, 93%, 1)",
+    "teal-+6": "hsla(195, 77%, 95%, 1)",
+    "teal-+7": "hsla(196, 100%, 97%, 1)",
+    "teal-+8": "hsla(192, 100%, 99%, 1)",
+    "aquamarine--4": "hsla(170, 96%, 9%, 1)",
+    "aquamarine--3": "hsla(172, 70%, 17%, 1)",
+    "aquamarine--2": "hsla(172, 66%, 24%, 1)",
+    "aquamarine--1": "hsla(170, 62%, 27%, 1)",
+    "aquamarine-0": "hsla(170, 86%, 26%, 1)",
+    "aquamarine-+1": "hsla(172, 46%, 44%, 1)",
+    "aquamarine-+2": "hsla(173, 46%, 61%, 1)",
+    "aquamarine-+3": "hsla(173, 49%, 83%, 1)",
+    "aquamarine-+4": "hsla(172, 63%, 86%, 1)",
+    "aquamarine-+5": "hsla(174, 61%, 91%, 1)",
+    "aquamarine-+6": "hsla(172, 61%, 93%, 1)",
+    "aquamarine-+7": "hsla(174, 50%, 96%, 1)",
+    "aquamarine-+8": "hsla(180, 60%, 99%, 1)",
+    "green--4": "hsla(152, 76%, 10%, 1)",
+    "green--3": "hsla(152, 70%, 18%, 1)",
+    "green--2": "hsla(152, 61%, 25%, 1)",
+    "green--1": "hsla(152, 58%, 28%, 1)",
+    "green-0": "hsla(150, 62%, 30%, 1)",
+    "green-+1": "hsla(150, 38%, 47%, 1)",
+    "green-+2": "hsla(148, 46%, 63%, 1)",
+    "green-+3": "hsla(148, 51%, 84%, 1)",
+    "green-+4": "hsla(148, 61%, 86%, 1)",
+    "green-+5": "hsla(148, 70%, 91%, 1)",
+    "green-+6": "hsla(148, 61%, 94%, 1)",
+    "green-+7": "hsla(146, 47%, 97%, 1)",
+    "green-+8": "hsla(140, 60%, 99%, 1)",
+    "emerald--4": "hsla(122, 64%, 11%, 1)",
+    "emerald--3": "hsla(122, 63%, 20%, 1)",
+    "emerald--2": "hsla(122, 48%, 27%, 1)",
+    "emerald--1": "hsla(120, 41%, 31%, 1)",
+    "emerald-0": "hsla(120, 38%, 33%, 1)",
+    "emerald-+1": "hsla(120, 32%, 49%, 1)",
+    "emerald-+2": "hsla(120, 38%, 66%, 1)",
+    "emerald-+3": "hsla(120, 50%, 85%, 1)",
+    "emerald-+4": "hsla(120, 57%, 88%, 1)",
+    "emerald-+5": "hsla(120, 56%, 92%, 1)",
+    "emerald-+6": "hsla(120, 61%, 94%, 1)",
+    "emerald-+7": "hsla(120, 47%, 97%, 1)",
+    "emerald-+8": "hsla(120, 60%, 99%, 1)",
+    "orange--4": "hsla(30, 78%, 16%, 1)",
+    "orange--3": "hsla(30, 77%, 27%, 1)",
+    "orange--2": "hsla(29, 70%, 37%, 1)",
+    "orange--1": "hsla(30, 86%, 38%, 1)",
+    "orange-0": "hsla(30, 90%, 59%, 1)",
+    "orange-+1": "hsla(30, 90%, 64%, 1)",
+    "orange-+2": "hsla(30, 99%, 72%, 1)",
+    "orange-+3": "hsla(30, 100%, 83%, 1)",
+    "orange-+4": "hsla(30, 91%, 87%, 1)",
+    "orange-+5": "hsla(30, 100%, 91%, 1)",
+    "orange-+6": "hsla(31, 100%, 94%, 1)",
+    "orange-+7": "hsla(30, 100%, 96%, 1)",
+    "orange-+8": "hsla(24, 100%, 99%, 1)",
+    transparent: "hsla(0, 0%, 100%, 0)",
+    "semantic-brand--4": th.color("blue--4"),
+    "semantic-brand--3": th.color("blue--3"),
+    "semantic-brand--2": th.color("blue--2"),
+    "semantic-brand--1": th.color("blue--1"),
+    "semantic-brand-0": th.color("blue-0"),
+    "semantic-brand-+1": th.color("blue-+1"),
+    "semantic-brand-+2": th.color("blue-+2"),
+    "semantic-brand-+3": th.color("blue-+3"),
+    "semantic-brand-+4": th.color("blue-+4"),
+    "semantic-brand-+5": th.color("blue-+5"),
+    "semantic-brand-+6": th.color("blue-+6"),
+    "semantic-brand-+7": th.color("blue-+7"),
+    "semantic-brand-+8": th.color("blue-+8"),
+    "semantic-informative--4": th.color("blue--4"),
+    "semantic-informative--3": th.color("blue--3"),
+    "semantic-informative--2": th.color("blue--2"),
+    "semantic-informative--1": th.color("blue--1"),
+    "semantic-informative-0": th.color("blue-0"),
+    "semantic-informative-+1": th.color("blue-+1"),
+    "semantic-informative-+2": th.color("blue-+2"),
+    "semantic-informative-+3": th.color("blue-+3"),
+    "semantic-informative-+4": th.color("blue-+4"),
+    "semantic-informative-+5": th.color("blue-+5"),
+    "semantic-informative-+6": th.color("blue-+6"),
+    "semantic-informative-+7": th.color("blue-+7"),
+    "semantic-informative-+8": th.color("blue-+8"),
+    "semantic-neutral--4": th.color("coolGrey--4"),
+    "semantic-neutral--3": th.color("coolGrey--3"),
+    "semantic-neutral--2": th.color("coolGrey--2"),
+    "semantic-neutral--1": th.color("coolGrey--1"),
+    "semantic-neutral-0": th.color("coolGrey-0"),
+    "semantic-neutral-+1": th.color("coolGrey-+1"),
+    "semantic-neutral-+2": th.color("coolGrey-+2"),
+    "semantic-neutral-+3": th.color("coolGrey-+3"),
+    "semantic-neutral-+4": th.color("coolGrey-+4"),
+    "semantic-neutral-+5": th.color("coolGrey-+5"),
+    "semantic-neutral-+6": th.color("coolGrey-+6"),
+    "semantic-neutral-+7": th.color("coolGrey-+7"),
+    "semantic-neutral-+8": th.color("coolGrey-+8"),
+    "semantic-neutralA--4": th.color("coolGreyA--4"),
+    "semantic-neutralA--3": th.color("coolGreyA--3"),
+    "semantic-neutralA--2": th.color("coolGreyA--2"),
+    "semantic-neutralA--1": th.color("coolGreyA--1"),
+    "semantic-neutralA-0": th.color("coolGreyA-0"),
+    "semantic-neutralA-+1": th.color("coolGreyA-+1"),
+    "semantic-neutralA-+2": th.color("coolGreyA-+2"),
+    "semantic-neutralA-+3": th.color("coolGreyA-+3"),
+    "semantic-neutralA-+4": th.color("coolGreyA-+4"),
+    "semantic-neutralA-+5": th.color("coolGreyA-+5"),
+    "semantic-neutralA-+6": th.color("coolGreyA-+6"),
+    "semantic-neutralA-+7": th.color("coolGreyA-+7"),
+    "semantic-neutralA-+8": th.color("coolGreyA-+8"),
+    "semantic-positive--4": th.color("green--4"),
+    "semantic-positive--3": th.color("green--3"),
+    "semantic-positive--2": th.color("green--2"),
+    "semantic-positive--1": th.color("green--1"),
+    "semantic-positive-0": th.color("green-0"),
+    "semantic-positive-+1": th.color("green-+1"),
+    "semantic-positive-+2": th.color("green-+2"),
+    "semantic-positive-+3": th.color("green-+3"),
+    "semantic-positive-+4": th.color("green-+4"),
+    "semantic-positive-+5": th.color("green-+5"),
+    "semantic-positive-+6": th.color("green-+6"),
+    "semantic-positive-+7": th.color("green-+7"),
+    "semantic-positive-+8": th.color("green-+8"),
+    "semantic-warning--4": th.color("orange--4"),
+    "semantic-warning--3": th.color("orange--3"),
+    "semantic-warning--2": th.color("orange--2"),
+    "semantic-warning--1": th.color("orange--1"),
+    "semantic-warning-0": th.color("orange-0"),
+    "semantic-warning-+1": th.color("orange-+1"),
+    "semantic-warning-+2": th.color("orange-+2"),
+    "semantic-warning-+3": th.color("orange-+3"),
+    "semantic-warning-+4": th.color("orange-+4"),
+    "semantic-warning-+5": th.color("orange-+5"),
+    "semantic-warning-+6": th.color("orange-+6"),
+    "semantic-warning-+7": th.color("orange-+7"),
+    "semantic-warning-+8": th.color("orange-+8"),
+    "semantic-negative--4": th.color("red--4"),
+    "semantic-negative--3": th.color("red--3"),
+    "semantic-negative--2": th.color("red--2"),
+    "semantic-negative--1": th.color("red--1"),
+    "semantic-negative-0": th.color("red-0"),
+    "semantic-negative-+1": th.color("red-+1"),
+    "semantic-negative-+2": th.color("red-+2"),
+    "semantic-negative-+3": th.color("red-+3"),
+    "semantic-negative-+4": th.color("red-+4"),
+    "semantic-negative-+5": th.color("red-+5"),
+    "semantic-negative-+6": th.color("red-+6"),
+    "semantic-negative-+7": th.color("red-+7"),
+    "semantic-negative-+8": th.color("red-+8"),
+    "content-primary": th.color("semantic-neutral--3"),
+    "content-secondary": th.color("semantic-neutral-0"),
+    "content-tertiary": th.color("semantic-neutral-+1"),
+    "content-disabled": th.color("semantic-neutral-+2"),
+    "content-primary-inverted": th.color("whiteA-0"),
+    "content-secondary-inverted": th.color("whiteA--4"),
+    "content-tertiary-inverted": th.color("whiteA--5"),
+    "content-disabled-inverted": th.color("whiteA--6"),
+    "content-informative-secondary": th.color("semantic-informative-0"),
+    "content-positive-secondary": th.color("semantic-positive-0"),
+    "content-warning-secondary": th.color("semantic-warning-0"),
+    "content-negative-secondary": th.color("semantic-negative-0"),
+    "content-brand-secondary": th.color("semantic-brand-0"),
+    "border-neutral-strong": th.color("semantic-neutral-0"),
+    "border-informative-strong": th.color("semantic-informative-0"),
+    "border-positive-strong": th.color("semantic-positive-0"),
+    "border-warning-strong": th.color("semantic-warning-0"),
+    "border-negative-strong": th.color("semantic-negative-0"),
+    "border-brand-strong": th.color("semantic-brand-0"),
+    "border-neutral-subtle": th.color("semantic-neutral-+3"),
+    "border-informative-subtle": th.color("semantic-informative-+3"),
+    "border-positive-subtle": th.color("semantic-positive-+3"),
+    "border-warning-subtle": th.color("semantic-warning-+3"),
+    "border-negative-subtle": th.color("semantic-negative-+3"),
+    "border-brand-subtle": th.color("semantic-brand-+3"),
+    "border-inverted": th.color("whiteA-0"),
+    "border-default": th.color("semantic-neutral-+5"),
+    "background-default": th.color("whiteA-0"),
+    "background-inverted": th.color("semantic-neutral--3"),
+    "background-neutral-strong": th.color("semantic-neutral-0"),
+    "background-informative-strong": th.color("semantic-informative-0"),
+    "background-positive-strong": th.color("semantic-positive-0"),
+    "background-warning-strong": th.color("semantic-warning-0"),
+    "background-negative-strong": th.color("semantic-negative-0"),
+    "background-brand-strong": th.color("semantic-brand-0"),
+    "background-neutral-subtle": th.color("semantic-neutral-+7"),
+    "background-informative-subtle": th.color("semantic-informative-+7"),
+    "background-positive-subtle": th.color("semantic-positive-+7"),
+    "background-warning-subtle": th.color("semantic-warning-+7"),
+    "background-negative-subtle": th.color("semantic-negative-+7"),
+    "background-brand-subtle": th.color("semantic-brand-+7"),
+    "background-neutral-surface": th.color("semantic-neutral-+8"),
+    "background-informative-surface": th.color("semantic-informative-+8"),
+    "background-positive-surface": th.color("semantic-positive-+8"),
+    "background-warning-surface": th.color("semantic-warning-+8"),
+    "background-negative-surface": th.color("semantic-negative-+8"),
+    "background-brand-surface": th.color("semantic-brand-+8"),
+    "interaction-background-dimmer": th.color("semantic-neutralA-0"),
+    "action-primary-normal": th.color("semantic-brand-0"),
+    "action-primary-hover": th.color("semantic-brand--2"),
+    "action-primary-active": th.color("semantic-brand--3"),
+    "action-primary-selected": th.color("semantic-brand--2"),
+    "action-primary-subtle-normal": th.color("semantic-brand-+6"),
+    "action-primary-subtle-hover": th.color("semantic-brand-+5"),
+    "action-primary-subtle-active": th.color("semantic-brand-+3"),
+    "action-primary-subtle-selected": th.color("semantic-brand-+5"),
+    "action-neutral-normal": th.color("semantic-neutral--1"),
+    "action-neutral-hover": th.color("semantic-neutral--2"),
+    "action-neutral-active": th.color("semantic-neutral--3"),
+    "action-neutral-selected": th.color("semantic-neutral--2"),
+    "action-neutral-subtle-normal": th.color("semantic-neutral-+6"),
+    "action-neutral-subtle-hover": th.color("semantic-neutral-+5"),
+    "action-neutral-subtle-active": th.color("semantic-neutral-+3"),
+    "action-neutral-subtle-selected": th.color("semantic-neutral-+5"),
+    "action-success-normal": th.color("semantic-positive-0"),
+    "action-success-hover": th.color("semantic-positive--2"),
+    "action-success-active": th.color("semantic-positive--3"),
+    "action-success-selected": th.color("semantic-positive--2"),
+    "action-success-subtle-normal": th.color("semantic-positive-+6"),
+    "action-success-subtle-hover": th.color("semantic-positive-+5"),
+    "action-success-subtle-active": th.color("semantic-positive-+3"),
+    "action-success-subtle-selected": th.color("semantic-positive-+5"),
+    "action-destructive-normal": th.color("semantic-negative-0"),
+    "action-destructive-hover": th.color("semantic-negative--2"),
+    "action-destructive-active": th.color("semantic-negative--3"),
+    "action-destructive-selected": th.color("semantic-negative--2"),
+    "action-destructive-subtle-normal": th.color("semantic-negative-+6"),
+    "action-destructive-subtle-hover": th.color("semantic-negative-+5"),
+    "action-destructive-subtle-active": th.color("semantic-negative-+3"),
+    "action-destructive-subtle-selected": th.color("semantic-negative-+5"),
+    "action-ghost-normal": th.color("transparent"),
+    "action-ghost-hover": th.color("semantic-neutralA-+6"),
+    "action-ghost-active": th.color("semantic-neutralA-+5"),
+    "action-ghost-selected": th.color("semantic-neutralA-+6"),
+    "action-ghost-inverted-hover": th.color("whiteA--8"),
+    "action-ghost-inverted-active": th.color("whiteA--7"),
+    "action-ghost-inverted-selected": th.color("whiteA--8"),
+    "action-ghost-destructive-hover": th.color("semantic-negative-+6"),
+    "action-ghost-destructive-active": th.color("semantic-negative-+5"),
+    "action-ghost-destructive-selected": th.color("semantic-negative-+6"),
+    "action-outline-normal": th.color("semantic-neutral-+3"),
+    "action-outline-hover": th.color("semantic-neutral-+2"),
+    "action-outline-active": th.color("semantic-neutral-+1"),
+    "action-outline-selected": th.color("semantic-neutral-+2"),
+    "action-inverted-normal": th.color("whiteA-0"),
+    "action-inverted-hover": th.color("whiteA--1"),
+    "action-inverted-active": th.color("whiteA--2"),
+    "action-inverted-selected": th.color("whiteA--1"),
+    "action-reverseInverted-normal": th.color("semantic-neutralA--3"),
+    "action-reverseInverted-hover": th.color("semantic-neutralA--1"),
+    "action-reverseInverted-active": th.color("semantic-neutralA-0"),
+    "action-reverseInverted-selected": th.color("semantic-neutralA--1"),
+    "interaction-default-normal": th.color("blue-0"),
+    "interaction-default-hover": th.color("blue--2"),
+    "interaction-default-active": th.color("blue--3"),
+    "interaction-default-selected": th.color("blue--2"),
+    "interaction-default-subtle-normal": th.color("blue-+6"),
+    "interaction-default-subtle-hover": th.color("blue-+5"),
+    "interaction-default-subtle-active": th.color("blue-+3"),
+    "interaction-default-subtle-selected": th.color("blue-+5"),
+    "interaction-neutral-normal": th.color("semantic-neutral--1"),
+    "interaction-neutral-hover": th.color("semantic-neutral--2"),
+    "interaction-neutral-active": th.color("semantic-neutral--3"),
+    "interaction-neutral-selected": th.color("semantic-neutral--2"),
+    "interaction-neutral-subtle-normal": th.color("semantic-neutral-+6"),
+    "interaction-neutral-subtle-hover": th.color("semantic-neutral-+5"),
+    "interaction-neutral-subtle-active": th.color("semantic-neutral-+3"),
+    "interaction-neutral-subtle-selected": th.color("semantic-neutral-+5"),
+    "interaction-alert-normal": th.color("semantic-negative-0"),
+    "interaction-alert-hover": th.color("semantic-negative--2"),
+    "interaction-alert-active": th.color("semantic-negative--3"),
+    "interaction-alert-selected": th.color("semantic-negative--2"),
+    "interaction-alert-subtle-normal": th.color("semantic-negative-+6"),
+    "interaction-alert-subtle-hover": th.color("semantic-negative-+5"),
+    "interaction-alert-subtle-active": th.color("semantic-negative-+3"),
+    "interaction-alert-subtle-selected": th.color("semantic-negative-+5"),
+    "interaction-ghost-normal": th.color("transparent"),
+    "interaction-ghost-hover": th.color("semantic-neutralA-+6"),
+    "interaction-ghost-active": th.color("semantic-neutralA-+5"),
+    "interaction-ghost-selected": th.color("semantic-neutralA-+6"),
+    "interaction-ghost-inverted-hover": th.color("whiteA--8"),
+    "interaction-ghost-inverted-normal": th.color("whiteA--7"),
+    "interaction-ghost-inverted-selected": th.color("whiteA--8"),
+    "interaction-ghost-destructive-hover": th.color("semantic-negative-+6"),
+    "interaction-ghost-destructive-normal": th.color("semantic-negative-+5"),
+    "interaction-ghost-destructive-selected": th.color("semantic-negative-+6"),
+    "interaction-disabled-normal": th.color("semantic-neutral-+2"),
+    "interaction-disabled-hover": th.color("semantic-neutral-+1"),
+    "interaction-disabled-active": th.color("semantic-neutral-0"),
+    "interaction-disabled-subtle-normal": th.color("semantic-neutral-+5"),
+    "interaction-disabled-subtle-hover": th.color("semantic-neutral-+4"),
+    "interaction-disabled-subtle-active": th.color("semantic-neutral-+3"),
+    "interaction-border-normal": th.color("blue-+2"),
+    "interaction-border-hover": th.color("blue-+1"),
+    "interaction-border-active": th.color("blue--1"),
+    "interaction-border-selected": th.color("blue-0"),
+    "interaction-border-neutral-normal": th.color("semantic-neutral-+3"),
+    "interaction-border-neutral-hover": th.color("semantic-neutral-+2"),
+    "interaction-border-neutral-active": th.color("semantic-neutral-+1"),
+    "interaction-border-neutral-selected": th.color("semantic-neutral-+2"),
+    "interaction-border-alert": th.color("semantic-negative-+1"),
+    "interaction-background-modal": th.color("background-default"),
+    "interaction-background-modeless": th.color("background-default"),
+    "interaction-background-modeless-inverted": th.color("background-inverted"),
+    "interaction-background-sidepanel": th.color("background-default"),
+    "interaction-background-formField": th.color("background-default"),
+    "interaction-inverted-normal": th.color("whiteA-0"),
+    "interaction-inverted-hover": th.color("whiteA--1"),
+    "interaction-inverted-active": th.color("whiteA--2"),
+    "interaction-inverted-selected": th.color("whiteA--1"),
+    "interaction-focus-default": th.color("blue-+1"),
+    "nonSemantic-grey-content-primary": th.color("semantic-neutral--3"),
+    "nonSemantic-grey-background-strong": th.color("semantic-neutral-0"),
+    "nonSemantic-grey-background-muted": th.color("semantic-neutral-+4"),
+    "nonSemantic-grey-background-onSubtle": th.color("semantic-neutral-+5"),
+    "nonSemantic-grey-background-surface": th.color("semantic-neutral-+8"),
+    "nonSemantic-red-content-primary": th.color("red--3"),
+    "nonSemantic-red-background-strong": th.color("red-0"),
+    "nonSemantic-red-background-muted": th.color("red-+4"),
+    "nonSemantic-red-background-onSubtle": th.color("red-+5"),
+    "nonSemantic-red-background-surface": th.color("red-+8"),
+    "nonSemantic-raspberry-content-primary": th.color("raspberry--3"),
+    "nonSemantic-raspberry-background-strong": th.color("raspberry-0"),
+    "nonSemantic-raspberry-background-muted": th.color("raspberry-+4"),
+    "nonSemantic-raspberry-background-onSubtle": th.color("raspberry-+5"),
+    "nonSemantic-raspberry-background-surface": th.color("raspberry-+8"),
+    "nonSemantic-magenta-content-primary": th.color("magenta--3"),
+    "nonSemantic-magenta-background-strong": th.color("magenta-0"),
+    "nonSemantic-magenta-background-muted": th.color("magenta-+4"),
+    "nonSemantic-magenta-background-onSubtle": th.color("magenta-+5"),
+    "nonSemantic-magenta-background-surface": th.color("magenta-+8"),
+    "nonSemantic-purple-content-primary": th.color("purple--3"),
+    "nonSemantic-purple-background-strong": th.color("purple-0"),
+    "nonSemantic-purple-background-muted": th.color("purple-+4"),
+    "nonSemantic-purple-background-onSubtle": th.color("purple-+5"),
+    "nonSemantic-purple-background-surface": th.color("purple-+8"),
+    "nonSemantic-grape-content-primary": th.color("grape--3"),
+    "nonSemantic-grape-background-strong": th.color("grape-0"),
+    "nonSemantic-grape-background-muted": th.color("grape-+4"),
+    "nonSemantic-grape-background-onSubtle": th.color("grape-+5"),
+    "nonSemantic-grape-background-surface": th.color("grape-+8"),
+    "nonSemantic-violet-content-primary": th.color("violet--3"),
+    "nonSemantic-violet-background-strong": th.color("violet-0"),
+    "nonSemantic-violet-background-muted": th.color("violet-+4"),
+    "nonSemantic-violet-background-onSubtle": th.color("violet-+5"),
+    "nonSemantic-violet-background-surface": th.color("violet-+8"),
+    "nonSemantic-blue-content-primary": th.color("blue--3"),
+    "nonSemantic-blue-background-strong": th.color("blue-0"),
+    "nonSemantic-blue-background-muted": th.color("blue-+4"),
+    "nonSemantic-blue-background-onSubtle": th.color("blue-+5"),
+    "nonSemantic-blue-background-surface": th.color("blue-+8"),
+    "nonSemantic-cyan-content-primary": th.color("cyan--3"),
+    "nonSemantic-cyan-background-strong": th.color("cyan-0"),
+    "nonSemantic-cyan-background-muted": th.color("cyan-+4"),
+    "nonSemantic-cyan-background-onSubtle": th.color("cyan-+5"),
+    "nonSemantic-cyan-background-surface": th.color("cyan-+8"),
+    "nonSemantic-teal-content-primary": th.color("teal--3"),
+    "nonSemantic-teal-background-strong": th.color("teal-0"),
+    "nonSemantic-teal-background-muted": th.color("teal-+4"),
+    "nonSemantic-teal-background-onSubtle": th.color("teal-+5"),
+    "nonSemantic-teal-background-surface": th.color("teal-+8"),
+    "nonSemantic-aquamarine-content-primary": th.color("aquamarine--3"),
+    "nonSemantic-aquamarine-background-strong": th.color("aquamarine-0"),
+    "nonSemantic-aquamarine-background-muted": th.color("aquamarine-+4"),
+    "nonSemantic-aquamarine-background-onSubtle": th.color("aquamarine-+5"),
+    "nonSemantic-aquamarine-background-surface": th.color("aquamarine-+8"),
+    "nonSemantic-green-content-primary": th.color("green--3"),
+    "nonSemantic-green-background-strong": th.color("green-0"),
+    "nonSemantic-green-background-muted": th.color("green-+4"),
+    "nonSemantic-green-background-onSubtle": th.color("green-+5"),
+    "nonSemantic-green-background-surface": th.color("green-+8"),
+    "nonSemantic-emerald-content-primary": th.color("emerald--3"),
+    "nonSemantic-emerald-background-strong": th.color("emerald-0"),
+    "nonSemantic-emerald-background-muted": th.color("emerald-+4"),
+    "nonSemantic-emerald-background-onSubtle": th.color("emerald-+5"),
+    "nonSemantic-emerald-background-surface": th.color("emerald-+8"),
+    "border-defaultA": th.color("semantic-neutralA-+5"),
+    "nonSemantic-orange-content-primary": th.color("orange--3"),
+    "nonSemantic-orange-background-strong": th.color("orange-0"),
+    "nonSemantic-orange-background-muted": th.color("orange-+4"),
+    "nonSemantic-orange-background-onSubtle": th.color("orange-+5"),
+    "nonSemantic-orange-background-surface": th.color("orange-+8"),
+    "content-informative-primary": th.color("semantic-informative--3"),
+    "content-positive-primary": th.color("semantic-positive--3"),
+    "content-warning-primary": th.color("semantic-warning--3"),
+    "content-negative-primary": th.color("semantic-negative--3"),
+    "content-brand-primary": th.color("semantic-brand--3"),
+    "background-neutral-muted": th.color("semantic-neutral-+4"),
+    "background-neutral-onSubtle": th.color("semantic-neutral-+5"),
+    "background-informative-muted": th.color("semantic-informative-+4"),
+    "background-informative-onSubtle": th.color("semantic-informative-+5"),
+    "background-positive-muted": th.color("semantic-positive-+4"),
+    "background-positive-onSubtle": th.color("semantic-positive-+5"),
+    "background-warning-muted": th.color("semantic-warning-+4"),
+    "background-warning-onSubtle": th.color("semantic-warning-+5"),
+    "background-negative-muted": th.color("semantic-negative-+4"),
+    "background-negative-onSubtle": th.color("semantic-negative-+5"),
+    "background-brand-muted": th.color("semantic-brand-+4"),
+    "background-brand-onSubtle": th.color("semantic-brand-+5"),
+    "nonSemantic-grey-content-secondary": th.color("semantic-neutral-0"),
+    "nonSemantic-red-content-secondary": th.color("red-0"),
+    "nonSemantic-raspberry-content-secondary": th.color("raspberry-0"),
+    "nonSemantic-magenta-content-secondary": th.color("magenta-0"),
+    "nonSemantic-purple-content-secondary": th.color("purple-0"),
+    "nonSemantic-grape-content-secondary": th.color("grape-0"),
+    "nonSemantic-violet-content-secondary": th.color("violet-0"),
+    "nonSemantic-blue-content-secondary": th.color("blue-0"),
+    "nonSemantic-cyan-content-secondary": th.color("cyan-0"),
+    "nonSemantic-teal-content-secondary": th.color("teal-0"),
+    "nonSemantic-aquamarine-content-secondary": th.color("aquamarine-0"),
+    "nonSemantic-green-content-secondary": th.color("green-0"),
+    "nonSemantic-emerald-content-secondary": th.color("emerald-0"),
+    "nonSemantic-orange-content-secondary": th.color("orange-0"),
+    "nonSemantic-grey-background-subtle": th.color("semantic-neutral-+7"),
+    "nonSemantic-red-background-subtle": th.color("red-+7"),
+    "nonSemantic-raspberry-background-subtle": th.color("raspberry-+7"),
+    "nonSemantic-magenta-background-subtle": th.color("magenta-+7"),
+    "nonSemantic-purple-background-subtle": th.color("purple-+7"),
+    "nonSemantic-grape-background-subtle": th.color("grape-+7"),
+    "nonSemantic-violet-background-subtle": th.color("violet-+7"),
+    "nonSemantic-blue-background-subtle": th.color("blue-+7"),
+    "nonSemantic-cyan-background-subtle": th.color("cyan-+7"),
+    "nonSemantic-teal-background-subtle": th.color("teal-+7"),
+    "nonSemantic-aquamarine-background-subtle": th.color("aquamarine-+7"),
+    "nonSemantic-green-background-subtle": th.color("green-+7"),
+    "nonSemantic-emerald-background-subtle": th.color("emerald-+7"),
+    "nonSemantic-orange-background-subtle": th.color("orange-+7"),
+    "nonSemantic-grey-border-default": th.color("semantic-neutral-+5"),
+    "nonSemantic-grey-border-strong": th.color("semantic-neutral-0"),
+    "nonSemantic-grey-border-subtle": th.color("semantic-neutral-+3"),
+    "nonSemantic-red-border-default": th.color("red-+5"),
+    "nonSemantic-red-border-strong": th.color("red-0"),
+    "nonSemantic-red-border-subtle": th.color("red-+3"),
+    "nonSemantic-raspberry-border-default": th.color("raspberry-+5"),
+    "nonSemantic-raspberry-border-strong": th.color("raspberry-0"),
+    "nonSemantic-raspberry-border-subtle": th.color("raspberry-+3"),
+    "nonSemantic-magenta-border-default": th.color("magenta-+5"),
+    "nonSemantic-magenta-border-strong": th.color("magenta-0"),
+    "nonSemantic-magenta-border-subtle": th.color("magenta-+3"),
+    "nonSemantic-purple-border-default": th.color("purple-+5"),
+    "nonSemantic-purple-border-strong": th.color("purple-0"),
+    "nonSemantic-purple-border-subtle": th.color("purple-+3"),
+    "nonSemantic-grape-border-default": th.color("grape-+5"),
+    "nonSemantic-grape-border-strong": th.color("grape-0"),
+    "nonSemantic-grape-border-subtle": th.color("grape-+3"),
+    "nonSemantic-violet-border-default": th.color("violet-+5"),
+    "nonSemantic-violet-border-strong": th.color("violet-0"),
+    "nonSemantic-violet-border-subtle": th.color("violet-+3"),
+    "nonSemantic-blue-border-default": th.color("blue-+5"),
+    "nonSemantic-blue-border-strong": th.color("blue-0"),
+    "nonSemantic-blue-border-subtle": th.color("blue-+3"),
+    "nonSemantic-cyan-border-default": th.color("cyan-+5"),
+    "nonSemantic-cyan-border-strong": th.color("cyan-0"),
+    "nonSemantic-cyan-border-subtle": th.color("cyan-+3"),
+    "nonSemantic-teal-border-default": th.color("teal-+5"),
+    "nonSemantic-teal-border-strong": th.color("teal-0"),
+    "nonSemantic-teal-border-subtle": th.color("teal-+3"),
+    "nonSemantic-aquamarine-border-default": th.color("aquamarine-+5"),
+    "nonSemantic-aquamarine-border-strong": th.color("aquamarine-0"),
+    "nonSemantic-aquamarine-border-subtle": th.color("aquamarine-+3"),
+    "nonSemantic-green-border-default": th.color("green-+5"),
+    "nonSemantic-green-border-strong": th.color("green-0"),
+    "nonSemantic-green-border-subtle": th.color("green-+3"),
+    "nonSemantic-emerald-border-default": th.color("emerald-+5"),
+    "nonSemantic-emerald-border-strong": th.color("emerald-0"),
+    "nonSemantic-emerald-border-subtle": th.color("emerald-+3"),
+    "nonSemantic-orange-border-default": th.color("orange-+5"),
+    "nonSemantic-orange-border-strong": th.color("orange-0"),
+    "nonSemantic-orange-border-subtle": th.color("orange-+3"),
+    "nonSemantic-white-content-primary": th.color("whiteA-0"),
+    "nonSemantic-white-content-secondary": th.color("whiteA--4"),
+    "nonSemantic-white-border-default": th.color("whiteA--5"),
+    "nonSemantic-white-border-strong": th.color("whiteA-0"),
+    "nonSemantic-white-border-subtle": th.color("whiteA--3"),
+    "nonSemantic-white-background-strong": th.color("whiteA-0"),
+    "nonSemantic-white-background-muted": th.color("whiteA--4"),
+    "nonSemantic-white-background-onSubtle": th.color("whiteA--5"),
+    "nonSemantic-white-background-subtle": th.color("whiteA--7"),
+    "nonSemantic-white-background-surface": th.color("whiteA--8"),
   },
   radii: {
-    "$g-border-radius-0": "0px",
-    "$g-border-radius-100": "2px",
-    "$g-border-radius-200": "4px",
-    "$g-border-radius-300": "6px",
-    "$g-border-radius-full": "50%",
-    "$a-border-radius-small": th.radius("$g-border-radius-100"),
-    "$a-border-radius-medium": th.radius("$g-border-radius-200"),
-    "$a-border-radius-large": th.radius("$g-border-radius-300"),
+    "0": "0px",
+    "25": "2px",
+    "50": "4px",
+    "100": "8px",
+    "999": "50%",
+    "150": "12px",
+    small: th.radius("25"),
+    medium: th.radius("50"),
+    large: th.radius("100"),
+    xLarge: th.radius("150"),
+    full: th.radius("999"),
   },
   borderWidths: {
-    "$g-border-width-0": "0px",
-    "$g-border-width-100": "1px",
-    "$g-border-width-200": "2px",
-    "$a-border-width-small": th.borderWidth("$g-border-width-100"),
-    "$a-border-width-focus": th.borderWidth("$g-border-width-200"),
-    "$a-border-width-medium": th.borderWidth("$g-border-width-200"),
+    "0": "0px",
+    "100": "1px",
+    "200": "2px",
+    small: th.borderWidth("100"),
+    focus: th.borderWidth("200"),
+    medium: th.borderWidth("200"),
   },
   borderStyles: {
-    "$g-border-style-none": "none",
-    "$g-border-style-solid": "solid",
-    "$g-border-style-dashed": "dashed solid",
+    none: "none",
+    solid: "solid",
+    dashed: "dashed solid",
   },
   sizes: {
-    "$g-size-0": "0px",
-    "$g-size-25": "4px",
-    "$g-size-50": "8px",
-    "$g-size-100": "16px",
-    "$g-size-150": "20px",
-    "$g-size-200": "24px",
-    "$g-size-250": "32px",
-    "$g-size-300": "40px",
-    "$g-size-350": "48px",
+    xLarge: th.space("800"),
+    large: th.space("600"),
+    medium: th.space("500, 550"),
+    small: th.space("400"),
+    xSmall: th.space("300"),
+    "2xSmall": th.space("250"),
+    "3xSmall": th.space("200"),
   },
   space: {
-    "$g-space-0": "0px",
-    "$g-space-25": "2px",
-    "$g-space-50": "4px",
-    "$g-space-75": "6px",
-    "$g-space-100": "8px",
-    "$g-space-150": "12px",
-    "$g-space-200": "16px",
-    "$g-space-300": "24px",
-    "$g-space-400": "32px",
-    "$g-space-500": "64px",
-    "$g-space-125": "10px",
-    "$g-space-175": "14px",
-    "$a-space-component-gap-xSmall": th.space("$g-space-25"),
-    "$a-space-component-gap-small": th.space("$g-space-50"),
-    "$a-space-component-gap-medium": th.space("$g-space-75"),
-    "$a-space-component-gap-large": th.space("$g-space-100"),
-    "$a-space-component-gap-xLarge": th.space("$g-space-125"),
-    "$a-space-component-gap-2xLarge": th.space("$g-space-200"),
-    "$a-space-component-gap-3xLarge": th.space("$g-space-400"),
-    "$a-space-component-padding-xSmall": th.space("$g-space-50"),
-    "$a-space-component-padding-small": th.space("$g-space-75"),
-    "$a-space-component-padding-medium": th.space("$g-space-100"),
-    "$a-space-component-padding-large": th.space("$g-space-125"),
-    "$a-space-component-padding-xLarge": th.space("$g-space-150"),
-    "$a-space-component-padding-2xLarge": th.space("$g-space-175"),
-    "$a-space-component-padding-3xLarge": th.space("$g-space-200"),
-    "$a-space-component-padding-4xLarge": th.space("$g-space-300"),
+    "0": "0px",
+    "25": "2px",
+    "50": "4px",
+    "100": "8px",
+    "150": "12px",
+    "200": "16px",
+    "300": "24px",
+    "400": "32px",
+    "600": "48px",
+    "500": "40px",
+    "250": "20px",
+    "700": "56px",
+    "800": "64px",
+    "1000": "80px",
+    "1200": "96px",
+    "1500": "120px",
+    "1600": "128px",
+    "550": "44px",
+    "component-gap-2xSmall": th.space("25"),
+    "component-gap-xSmall": th.space("50"),
+    "component-gap-small": th.space("100"),
+    "component-gap-large": th.space("200"),
+    "component-gap-2xLarge": th.space("400"),
+    "component-padding-xSmall": th.space("50"),
+    "component-padding-small": th.space("100"),
+    "component-padding-medium": th.space("150"),
+    "component-padding-large": th.space("200"),
+    "component-padding-2xLarge": th.space("300"),
+    "component-gap-medium": th.space("150"),
+    "component-gap-null": th.space("0"),
+    "component-gap-xLarge": th.space("300"),
+    "component-padding-3xLarge": th.space("400"),
+    "component-padding-4xLarge": th.space("500"),
+    "component-padding-6xLarge": th.space("800"),
+    "component-padding-2xSmall": th.space("25"),
+    "component-padding-xLarge": th.space("250"),
+    "component-padding-5xLarge": th.space("550"),
+    "component-gap-3xLarge": th.space("550"),
+    "component-padding-null": th.space("0"),
   },
-  fonts: { "$g-font-family-primary": "Inter" },
+  fonts: { primary: "Inter" },
   fontSizes: {
-    "$g-font-size-25": "10px",
-    "$g-font-size-50": "12px",
-    "$g-font-size-75": "14px",
-    "$g-font-size-100": "16px",
-    "$g-font-size-200": "18px",
-    "$g-font-size-300": "24px",
-    "$g-font-size-400": "32px",
-    "$g-font-size-500": "40px",
-    "$g-font-size-600": "48px",
+    "125": "10px",
+    "150": "12px",
+    "175": "14px",
+    "200": "16px",
+    "225": "18px",
+    "300": "24px",
+    "400": "32px",
+    "500": "40px",
+    "600": "48px",
   },
   fontWeights: {
-    "$g-font-weight-400": "400",
-    "$g-font-weight-450": "450",
-    "$g-font-weight-600": "600",
+    "400": "400",
+    "450": "450",
+    "600": "600",
   },
   letterSpacings: {
-    "$g-font-letterSpacing-0": "0px",
-    "$g-font-letterSpacing-100": "0.1px",
-    "$g-font-letterSpacing-200": "0.2px",
+    "0": "0px",
+    "100": "0.1px",
+    "200": "0.2px",
   },
   lineHeights: {
-    "$g-font-lineHeight-scale-100": "1",
-    "$g-font-lineHeight-scale-150": "1.5",
-    "$g-font-lineHeight-scale-166": "1.66",
-    "$g-font-lineHeight-scale-200": "2",
-    "$g-font-lineHeight-value-100": "16px",
-    "$g-font-lineHeight-value-150": "20px",
-    "$g-font-lineHeight-value-200": "24px",
-    "$g-font-lineHeight-value-250": "28px",
-    "$g-font-lineHeight-value-300": "32px",
-    "$g-font-lineHeight-value-350": "36px",
-    "$g-font-lineHeight-value-450": "44px",
-    "$g-font-lineHeight-value-600": "56px",
-    "$g-font-lineHeight-value-700": "64px",
+    "scale-100": "1",
+    "scale-150": "1.5",
+    "scale-166": "1.66",
+    "scale-200": "2",
+    "value-200": "16px",
+    "value-250": "20px",
+    "value-300": "24px",
+    "value-350": "28px",
+    "value-400": "32px",
+    "value-450": "36px",
+    "value-550": "44px",
+    "value-700": "56px",
+    "value-800": "64px",
   },
   texts: {
-    "$g-typo-normal-25": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-25",
-      lineHeight: "$g-font-lineHeight-value-100",
-      fontWeight: "$g-font-weight-400",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "normal-125": {
+      fontFamily: "primary",
+      fontSize: "125",
+      lineHeight: "value-200",
+      fontWeight: "400",
+      letterSpacing: "200",
     },
-    "$g-typo-normal-50": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-50",
-      lineHeight: "$g-font-lineHeight-value-150",
-      fontWeight: "$g-font-weight-400",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "normal-150": {
+      fontFamily: "primary",
+      fontSize: "150",
+      lineHeight: "value-250",
+      fontWeight: "400",
+      letterSpacing: "200",
     },
-    "$g-typo-normal-75": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-75",
-      lineHeight: "$g-font-lineHeight-value-200",
-      fontWeight: "$g-font-weight-400",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "normal-175": {
+      fontFamily: "primary",
+      fontSize: "175",
+      lineHeight: "value-300",
+      fontWeight: "400",
+      letterSpacing: "200",
     },
-    "$g-typo-normal-100": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-100",
-      lineHeight: "$g-font-lineHeight-value-250",
-      fontWeight: "$g-font-weight-400",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "normal-200": {
+      fontFamily: "primary",
+      fontSize: "200",
+      lineHeight: "value-350",
+      fontWeight: "400",
+      letterSpacing: "200",
     },
-    "$g-typo-normal-200": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-200",
-      lineHeight: "$g-font-lineHeight-value-300",
-      fontWeight: "$g-font-weight-400",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "normal-225": {
+      fontFamily: "primary",
+      fontSize: "225",
+      lineHeight: "value-400",
+      fontWeight: "400",
+      letterSpacing: "200",
     },
-    "$g-typo-normal-300": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-300",
-      lineHeight: "$g-font-lineHeight-value-350",
-      fontWeight: "$g-font-weight-400",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "normal-300": {
+      fontFamily: "primary",
+      fontSize: "300",
+      lineHeight: "value-450",
+      fontWeight: "400",
+      letterSpacing: "200",
     },
-    "$g-typo-normal-400": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-400",
-      lineHeight: "$g-font-lineHeight-value-450",
-      fontWeight: "$g-font-weight-400",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "normal-400": {
+      fontFamily: "primary",
+      fontSize: "400",
+      lineHeight: "value-550",
+      fontWeight: "400",
+      letterSpacing: "200",
     },
-    "$g-typo-normal-500": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-500",
-      lineHeight: "$g-font-lineHeight-value-600",
-      fontWeight: "$g-font-weight-400",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "normal-500": {
+      fontFamily: "primary",
+      fontSize: "500",
+      lineHeight: "value-700",
+      fontWeight: "400",
+      letterSpacing: "200",
     },
-    "$g-typo-normal-600": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-600",
-      lineHeight: "$g-font-lineHeight-value-700",
-      fontWeight: "$g-font-weight-400",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "normal-600": {
+      fontFamily: "primary",
+      fontSize: "600",
+      lineHeight: "value-800",
+      fontWeight: "400",
+      letterSpacing: "200",
     },
-    "$g-typo-medium-25": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-25",
-      lineHeight: "$g-font-lineHeight-value-100",
-      fontWeight: "$g-font-weight-450",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "medium-125": {
+      fontFamily: "primary",
+      fontSize: "125",
+      lineHeight: "value-200",
+      fontWeight: "450",
+      letterSpacing: "200",
     },
-    "$g-typo-medium-50": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-50",
-      lineHeight: "$g-font-lineHeight-value-150",
-      fontWeight: "$g-font-weight-450",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "medium-150": {
+      fontFamily: "primary",
+      fontSize: "150",
+      lineHeight: "value-250",
+      fontWeight: "450",
+      letterSpacing: "200",
     },
-    "$g-typo-medium-75": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-75",
-      lineHeight: "$g-font-lineHeight-value-200",
-      fontWeight: "$g-font-weight-450",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "medium-175": {
+      fontFamily: "primary",
+      fontSize: "175",
+      lineHeight: "value-300",
+      fontWeight: "450",
+      letterSpacing: "200",
     },
-    "$g-typo-medium-100": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-100",
-      lineHeight: "$g-font-lineHeight-value-250",
-      fontWeight: "$g-font-weight-450",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "medium-200": {
+      fontFamily: "primary",
+      fontSize: "200",
+      lineHeight: "value-350",
+      fontWeight: "450",
+      letterSpacing: "200",
     },
-    "$g-typo-medium-200": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-200",
-      lineHeight: "$g-font-lineHeight-value-300",
-      fontWeight: "$g-font-weight-450",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "medium-225": {
+      fontFamily: "primary",
+      fontSize: "225",
+      lineHeight: "value-400",
+      fontWeight: "450",
+      letterSpacing: "200",
     },
-    "$g-typo-medium-300": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-300",
-      lineHeight: "$g-font-lineHeight-value-350",
-      fontWeight: "$g-font-weight-450",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "medium-300": {
+      fontFamily: "primary",
+      fontSize: "300",
+      lineHeight: "value-450",
+      fontWeight: "450",
+      letterSpacing: "200",
     },
-    "$g-typo-medium-400": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-400",
-      lineHeight: "$g-font-lineHeight-value-450",
-      fontWeight: "$g-font-weight-450",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "medium-400": {
+      fontFamily: "primary",
+      fontSize: "400",
+      lineHeight: "value-550",
+      fontWeight: "450",
+      letterSpacing: "200",
     },
-    "$g-typo-medium-500": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-500",
-      lineHeight: "$g-font-lineHeight-value-600",
-      fontWeight: "$g-font-weight-450",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "medium-500": {
+      fontFamily: "primary",
+      fontSize: "500",
+      lineHeight: "value-700",
+      fontWeight: "450",
+      letterSpacing: "200",
     },
-    "$g-typo-medium-600": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-600",
-      lineHeight: "$g-font-lineHeight-value-700",
-      fontWeight: "$g-font-weight-450",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "medium-600": {
+      fontFamily: "primary",
+      fontSize: "600",
+      lineHeight: "value-800",
+      fontWeight: "450",
+      letterSpacing: "200",
     },
-    "$g-typo-strong-25": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-25",
-      lineHeight: "$g-font-lineHeight-value-100",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "strong-125": {
+      fontFamily: "primary",
+      fontSize: "125",
+      lineHeight: "value-200",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$g-typo-strong-50": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-50",
-      lineHeight: "$g-font-lineHeight-value-150",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "strong-150": {
+      fontFamily: "primary",
+      fontSize: "150",
+      lineHeight: "value-250",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$g-typo-strong-75": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-75",
-      lineHeight: "$g-font-lineHeight-value-200",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "strong-175": {
+      fontFamily: "primary",
+      fontSize: "175",
+      lineHeight: "value-300",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$g-typo-strong-100": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-100",
-      lineHeight: "$g-font-lineHeight-value-250",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "strong-200": {
+      fontFamily: "primary",
+      fontSize: "200",
+      lineHeight: "value-350",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$g-typo-strong-200": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-200",
-      lineHeight: "$g-font-lineHeight-value-300",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "strong-225": {
+      fontFamily: "primary",
+      fontSize: "225",
+      lineHeight: "value-400",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$g-typo-strong-300": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-300",
-      lineHeight: "$g-font-lineHeight-value-350",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "strong-300": {
+      fontFamily: "primary",
+      fontSize: "300",
+      lineHeight: "value-450",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$g-typo-strong-400": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-400",
-      lineHeight: "$g-font-lineHeight-value-450",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "strong-400": {
+      fontFamily: "primary",
+      fontSize: "400",
+      lineHeight: "value-550",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$g-typo-strong-500": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-500",
-      lineHeight: "$g-font-lineHeight-value-600",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "strong-500": {
+      fontFamily: "primary",
+      fontSize: "500",
+      lineHeight: "value-700",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$g-typo-strong-600": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-600",
-      lineHeight: "$g-font-lineHeight-value-700",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "strong-600": {
+      fontFamily: "primary",
+      fontSize: "600",
+      lineHeight: "value-800",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$a-typo-body-large": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-100",
-      lineHeight: "$g-font-lineHeight-value-250",
-      fontWeight: "$g-font-weight-450",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "body-large": {
+      fontFamily: "primary",
+      fontSize: "200",
+      lineHeight: "value-350",
+      fontWeight: "450",
+      letterSpacing: "200",
     },
-    "$a-typo-body-medium": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-75",
-      lineHeight: "$g-font-lineHeight-value-200",
-      fontWeight: "$g-font-weight-450",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "body-medium": {
+      fontFamily: "primary",
+      fontSize: "175",
+      lineHeight: "value-300",
+      fontWeight: "450",
+      letterSpacing: "200",
     },
-    "$a-typo-body-small": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-50",
-      lineHeight: "$g-font-lineHeight-value-150",
-      fontWeight: "$g-font-weight-450",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "body-small": {
+      fontFamily: "primary",
+      fontSize: "150",
+      lineHeight: "value-250",
+      fontWeight: "450",
+      letterSpacing: "200",
     },
-    "$a-typo-body-xSmall": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-25",
-      lineHeight: "$g-font-lineHeight-value-100",
-      fontWeight: "$g-font-weight-450",
-      letterSpacing: "$g-font-letterSpacing-200",
+    "body-xSmall": {
+      fontFamily: "primary",
+      fontSize: "125",
+      lineHeight: "value-200",
+      fontWeight: "450",
+      letterSpacing: "200",
     },
-    "$a-typo-body-strong-large": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-100",
-      lineHeight: "$g-font-lineHeight-value-250",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "body-strong-large": {
+      fontFamily: "primary",
+      fontSize: "200",
+      lineHeight: "value-350",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$a-typo-body-strong-medium": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-75",
-      lineHeight: "$g-font-lineHeight-value-200",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "body-strong-medium": {
+      fontFamily: "primary",
+      fontSize: "175",
+      lineHeight: "value-300",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$a-typo-body-strong-small": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-50",
-      lineHeight: "$g-font-lineHeight-value-150",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "body-strong-small": {
+      fontFamily: "primary",
+      fontSize: "150",
+      lineHeight: "value-250",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$a-typo-body-strong-xSmall": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-25",
-      lineHeight: "$g-font-lineHeight-value-100",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "body-strong-xSmall": {
+      fontFamily: "primary",
+      fontSize: "125",
+      lineHeight: "value-200",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$a-typo-hero-large": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-500",
-      lineHeight: "$g-font-lineHeight-value-600",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "hero-large": {
+      fontFamily: "primary",
+      fontSize: "500",
+      lineHeight: "value-700",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$a-typo-hero-medium": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-600",
-      lineHeight: "$g-font-lineHeight-value-700",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "hero-medium": {
+      fontFamily: "primary",
+      fontSize: "600",
+      lineHeight: "value-800",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$a-typo-header-4xLarge": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-400",
-      lineHeight: "$g-font-lineHeight-value-450",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "header-4xLarge": {
+      fontFamily: "primary",
+      fontSize: "400",
+      lineHeight: "value-550",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$a-typo-header-3xLarge": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-300",
-      lineHeight: "$g-font-lineHeight-value-350",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "header-3xLarge": {
+      fontFamily: "primary",
+      fontSize: "300",
+      lineHeight: "value-450",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$a-typo-header-xLarge": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-200",
-      lineHeight: "$g-font-lineHeight-value-300",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "header-xLarge": {
+      fontFamily: "primary",
+      fontSize: "225",
+      lineHeight: "value-400",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$a-typo-header-large": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-100",
-      lineHeight: "$g-font-lineHeight-value-250",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "header-large": {
+      fontFamily: "primary",
+      fontSize: "200",
+      lineHeight: "value-350",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$a-typo-header-medium": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-75",
-      lineHeight: "$g-font-lineHeight-value-200",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "header-medium": {
+      fontFamily: "primary",
+      fontSize: "175",
+      lineHeight: "value-300",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
-    "$a-typo-header-small": {
-      fontFamily: "$g-font-family-primary",
-      fontSize: "$g-font-size-50",
-      lineHeight: "$g-font-lineHeight-value-150",
-      fontWeight: "$g-font-weight-600",
-      letterSpacing: "$g-font-letterSpacing-100",
+    "header-small": {
+      fontFamily: "primary",
+      fontSize: "150",
+      lineHeight: "value-250",
+      fontWeight: "600",
+      letterSpacing: "100",
     },
   },
+  // TO DO: utility for xstyled to gather color of shadow and generate rgba based on opacity
   shadows: {
-    "$g-elevation-bottom-100": "0px 1px 2px 0px rgba(27, 36, 44, 0.12)",
-    "$g-elevation-bottom-200":
+    "bottom-100": "0px 1px 2px 0px rgba(27, 36, 44, 0.12)",
+    "bottom-200":
       "0px 2px 2px -1px rgba(27, 36, 44, 0.04), 0px 2px 8px -1px rgba(27, 36, 44, 0.08)",
-    "$g-elevation-bottom-300":
+    "bottom-300":
       "0px 2px 2px -1px rgba(27, 36, 44, 0.04), 0px 8px 16px -2px rgba(27, 36, 44, 0.12)",
-    "$g-elevation-bottom-400":
+    "bottom-400":
       "0px 2px 2px -1px rgba(27, 36, 44, 0.04), 0px 16px 24px -6px rgba(27, 36, 44, 0.16)",
-    "$g-elevation-top-100": "0px -1px 2px 0px rgba(27, 36, 44, 0.12)",
-    "$g-elevation-top-200":
+    "top-100": "0px -1px 2px 0px rgba(27, 36, 44, 0.12)",
+    "top-200":
       "0px -2px 2px -1px rgba(27, 36, 44, 0.04), 0px -2px 8px -1px rgba(27, 36, 44, 0.08)",
-    "$g-elevation-top-300":
+    "top-300":
       "0px -2px 2px -1px rgba(27, 36, 44, 0.04), 0px -8px 16px -2px rgba(27, 36, 44, 0.12)",
-    "$g-elevation-top-400":
+    "top-400":
       "0px -2px 2px -1px rgba(27, 36, 44, 0.04), 0px -16px 24px -6px rgba(27, 36, 44, 0.16)",
   },
   opacity: {
-    "$g-opacity-0": "0",
-    "$g-opacity-50": "0.5",
-    "$g-opacity-100": "1",
-    "$a-opacity-disabled": "0.5",
+    "0": "0",
+    "50": "0.5",
+    "100": "1",
+    disabled: "0.5",
+  },
+  screens: {
+    _: 0,
+    xs: 0,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536,
+  },
+  states: {
+    _: null,
+    motionSafe: "@media (prefers-reduced-motion: no-preference)",
+    motionReduce: "@media (prefers-reduced-motion: reduce)",
+    first: "&:first-child",
+    last: "&:last-child",
+    odd: "&:odd",
+    even: "&:even",
+    visited: "&:visited",
+    checked: "&:checked",
+    focusWithin: "&:focus-within",
+    hover: "&:hover",
+    focus: "&:focus",
+    focusVisible: "&:focus-visible",
+    active: "&:active",
+    placeholder: "&::placeholder",
+    disabled: '&:disabled, &[aria-disabled=true], &[data-state="disabled"]',
+    selected: '&[data-state="selected"]',
+    loading: '&[data-state="loading"]',
+    alert: '&:invalid, &[data-state="alert"]',
   },
 };
+
+export const theme: Theme = {
+  ...tempTheme,
+  ringWidths: tempTheme.borderWidths,
+};