From 4ac12c4b0d2dcf062a0ac673145a4b5fabf3b18a Mon Sep 17 00:00:00 2001
From: yue <yue@pixiv.co.jp>
Date: Fri, 22 Nov 2024 11:10:00 +0900
Subject: [PATCH 1/3] feat: token v2 demo styled

---
 .storybook/preview.js                         |   1 +
 .../__snapshots__/token-v2.story.storyshot    | 327 ++++++++++++++++++
 packages/react/docs/token-v2.story.tsx        | 214 ++++++++++++
 packages/react/tsconfig.json                  |   2 +-
 tsconfig.base.json                            |   1 +
 5 files changed, 544 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/docs/__snapshots__/token-v2.story.storyshot
 create mode 100644 packages/react/docs/token-v2.story.tsx

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 63de06047..d6e5b0111 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -3,6 +3,7 @@ import themeDecorator from './theme-decorator'
 import { DocsContainer } from './docs-container'
 
 import './global.css'
+import '../packages/react/dist/index.css'
 
 /** @type  */
 export const parameters = {
diff --git a/packages/react/docs/__snapshots__/token-v2.story.storyshot b/packages/react/docs/__snapshots__/token-v2.story.storyshot
new file mode 100644
index 000000000..fb88cfd11
--- /dev/null
+++ b/packages/react/docs/__snapshots__/token-v2.story.storyshot
@@ -0,0 +1,327 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storybook Tests > react/docs/Token-v2-demo > Styled 1`] = `
+.c0 {
+  -webkit-transition: 0.3s color ease-in-out;
+  transition: 0.3s color ease-in-out;
+  display: grid;
+  gap: 24px;
+  max-width: -webkit-fit-content;
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
+
+.c2 {
+  color: var(--charcoal-color-text-secondary-default);
+  font-size: calc(var(--charcoal-text-font-size-heading-xs) * 1px);
+  line-height: calc(var(--charcoal-text-line-height-heading-xs) * 1px);
+}
+
+.c1 {
+  cursor: pointer;
+  font-weight: bold;
+  font-size: calc(var(--charcoal-text-font-size-body) * 1px);
+  line-height: calc(var(--charcoal-text-line-height-body) * 1px);
+  padding: 13px calc(var(--charcoal-space-layout-30) * 1px);
+  border-top: 2px transparent;
+  color: var(--charcoal-color-text-tertiary-default);
+}
+
+.c1:hover {
+  color: var(--charcoal-color-text-tertiary-hover);
+}
+
+.c1:active {
+  color: var(--charcoal-color-text-tertiary-press);
+}
+
+.c1[aria-selected='true'] {
+  color: var(--charcoal-color-text-default);
+  border-top: 2px solid var(--charcoal-color-border-selected);
+}
+
+.c1[aria-selected='true']:hover {
+  color: var(--charcoal-color-text-hover);
+}
+
+.c1[aria-selected='true']:active {
+  color: var(--charcoal-color-text-press);
+}
+
+.c3 {
+  display: grid;
+  grid-template-areas: 'UserInfo     .           ShowAll' 'ArtworkList  ArtworkList ArtworkList';
+}
+
+.c4 {
+  grid-area: UserInfo;
+  display: grid;
+  grid-auto-flow: column;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: calc(var(--charcoal-space-layout-20) * 1px);
+}
+
+.c5 {
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border-radius: calc(var(--charcoal-radius-oval) * 1px);
+  cursor: pointer;
+  color: var(--charcoal-color-icon-default);
+  background-color: var(--charcoal-color-container-secondary-default);
+}
+
+.c5:hover {
+  color: var(--charcoal-color-icon-hover);
+  background-color: var(--charcoal-color-container-secondary-hover);
+}
+
+.c5:active {
+  color: var(--charcoal-color-icon-press);
+  background-color: var(--charcoal-color-container-secondary-press);
+}
+
+.c6 {
+  color: var(--charcoal-color-text-default);
+  font-size: calc(var(--charcoal-text-font-size-caption-m) * 1px);
+  line-height: calc(var(--charcoal-text-line-height-caption-m) * 1px);
+  font-weight: bold;
+}
+
+.c7 {
+  grid-area: ShowAll;
+  cursor: pointer;
+  color: var(--charcoal-color-text-tertiary-default);
+  text-align: right;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  font-size: calc(var(--charcoal-text-font-size-caption-m) * 1px);
+  line-height: calc(var(--charcoal-text-line-height-caption-m) * 1px);
+}
+
+.c7:hover {
+  color: var(--charcoal-color-text-tertiary-hover);
+}
+
+.c7:active {
+  color: var(--charcoal-color-text-tertiary-press);
+}
+
+.c8 {
+  grid-area: ArtworkList;
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  gap: calc(var(--charcoal-space-layout-20) * 1px);
+  list-style: none;
+  padding: 0;
+  max-width: 424px;
+}
+
+.c9 {
+  display: grid;
+  gap: calc(var(--charcoal-space-layout-10) * 1px);
+}
+
+.c10 {
+  width: 100%;
+  aspect-ratio: 3 / 2;
+  border-radius: calc(var(--charcoal-radius-m) * 1px);
+}
+
+.c11 {
+  color: var(--charcoal-color-text-default);
+  font-size: calc(var(--charcoal-text-font-size-caption-m) * 1px);
+  line-height: calc(var(--charcoal-text-line-height-caption-m) * 1px);
+  margin: 0;
+}
+
+.c12 {
+  margin: 0;
+  color: var(--charcoal-color-text-tertiary-default);
+  font-size: calc(var(--charcoal-text-font-size-caption-s) * 1px);
+  line-height: calc(var(--charcoal-text-line-height-caption-s) * 1px);
+}
+
+<div
+  data-dark={false}
+>
+  <section
+    className="c0"
+  >
+    <nav>
+      <div
+        aria-label="Categories"
+        role="tablist"
+      >
+        <a
+          aria-controls="panel-Illustration"
+          aria-selected={true}
+          className="c1"
+          id="category-Illustration"
+          onClick={[Function]}
+          role="tab"
+        >
+          Illustration
+        </a>
+        <a
+          aria-controls="panel-Comic"
+          aria-selected={false}
+          className="c1"
+          id="category-Comic"
+          onClick={[Function]}
+          role="tab"
+        >
+          Comic
+        </a>
+        <a
+          aria-controls="panel-Novel"
+          aria-selected={false}
+          className="c1"
+          id="category-Novel"
+          onClick={[Function]}
+          role="tab"
+        >
+          Novel
+        </a>
+        <a
+          aria-controls="panel-3D"
+          aria-selected={false}
+          className="c1"
+          id="category-3D"
+          onClick={[Function]}
+          role="tab"
+        >
+          3D
+        </a>
+        <a
+          aria-controls="panel-Shopping"
+          aria-selected={false}
+          className="c1"
+          id="category-Shopping"
+          onClick={[Function]}
+          role="tab"
+        >
+          Shopping
+        </a>
+      </div>
+    </nav>
+    <h2
+      className="c2"
+    >
+      Works from users you follow
+    </h2>
+    <div
+      aria-labelledby="category-Illustration"
+      className="c3"
+      id="panel-Illustration"
+      role="tabpanel"
+    >
+      <div
+        className="c4"
+      >
+        <a
+          aria-label="UserIcon"
+          className="c5"
+        >
+          <pixiv-icon
+            name="24/FaceEdit"
+          />
+        </a>
+        <span
+          className="c6"
+        >
+          UserName
+        </span>
+        <button
+          className="charcoal-button"
+          data-size="S"
+          data-variant="Primary"
+        >
+          Follow
+        </button>
+      </div>
+      <a
+        className="c7"
+      >
+        Show all
+      </a>
+      <ul
+        className="c8"
+      >
+        <li>
+          <article
+            className="c9"
+          >
+            <img
+              alt="Title"
+              className="c10"
+              src="https://loremflickr.com/150/100/animals?random=0"
+            />
+            <h3
+              className="c11"
+            >
+              Title
+            </h3>
+            <p
+              className="c12"
+            >
+              Description
+            </p>
+          </article>
+        </li>
+        <li>
+          <article
+            className="c9"
+          >
+            <img
+              alt="Title"
+              className="c10"
+              src="https://loremflickr.com/150/100/animals?random=1"
+            />
+            <h3
+              className="c11"
+            >
+              Title
+            </h3>
+            <p
+              className="c12"
+            >
+              Description
+            </p>
+          </article>
+        </li>
+        <li>
+          <article
+            className="c9"
+          >
+            <img
+              alt="Title"
+              className="c10"
+              src="https://loremflickr.com/150/100/animals?random=2"
+            />
+            <h3
+              className="c11"
+            >
+              Title
+            </h3>
+            <p
+              className="c12"
+            >
+              Description
+            </p>
+          </article>
+        </li>
+      </ul>
+    </div>
+  </section>
+</div>
+`;
diff --git a/packages/react/docs/token-v2.story.tsx b/packages/react/docs/token-v2.story.tsx
new file mode 100644
index 000000000..f895a9f48
--- /dev/null
+++ b/packages/react/docs/token-v2.story.tsx
@@ -0,0 +1,214 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* lint runs before build so json does not exist */
+
+import { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import styled from 'styled-components'
+// This does not work :(
+// import tokens from '@charcoal-ui/theme/tokens/camel/css-variables.json'
+import tokens from '../../theme/dist/tokens/camel/css-variables.json'
+import { Button, Icon } from '@charcoal-ui/react'
+
+export default {
+  title: 'react/docs/Token-v2-demo',
+  component: Demo,
+} as Meta<typeof Demo>
+
+export const Styled: StoryObj<typeof Demo> = {
+  render: Demo,
+}
+
+const categories = ['Illustration', 'Comic', 'Novel', '3D', 'Shopping']
+const artworks = Array.from({ length: 3 }, (_, id) => ({
+  id,
+  title: 'Title',
+  thumbnail: `https://loremflickr.com/150/100/animals?random=${id}`,
+  description: 'Description',
+}))
+
+function Demo() {
+  const [selected, setSelected] = useState(categories[0])
+  return (
+    <Container>
+      <nav>
+        <div aria-label="Categories" role="tablist">
+          {categories.map((category) => (
+            <Tab
+              id={`category-${category}`}
+              role="tab"
+              aria-selected={category === selected}
+              aria-controls={`panel-${category}`}
+              key={category}
+              onClick={() => {
+                setSelected(category)
+              }}
+            >
+              {category}
+            </Tab>
+          ))}
+        </div>
+      </nav>
+      <H2>Works from users you follow</H2>
+      <UserCard
+        id={`panel-${selected}`}
+        role="tabpanel"
+        aria-labelledby={`category-${selected}`}
+      >
+        <UserInfo>
+          <User aria-label="UserIcon">
+            <Icon name="24/FaceEdit" />
+          </User>
+          <UserName>UserName</UserName>
+          <Button variant="Primary" size="S">
+            Follow
+          </Button>
+        </UserInfo>
+        <ShowAll>Show all</ShowAll>
+        <ArtworkList key={selected}>
+          {artworks.map((a) => (
+            <li key={a.id}>
+              <Artwork>
+                <ArtworkThumbnail src={a.thumbnail} alt={a.title} />
+                <ArtworkTitle>{a.title}</ArtworkTitle>
+                <ArtworkDescription>{a.description}</ArtworkDescription>
+              </Artwork>
+            </li>
+          ))}
+        </ArtworkList>
+      </UserCard>
+    </Container>
+  )
+}
+
+const Container = styled.section`
+  transition: 0.3s color ease-in-out;
+  display: grid;
+  gap: 24px;
+  max-width: fit-content;
+`
+
+const H2 = styled.h2`
+  color: ${tokens.color.text.secondary.default};
+  font-size: calc(${tokens.text.fontSize.heading.xs} * 1px);
+  line-height: calc(${tokens.text.lineHeight.heading.xs} * 1px);
+`
+
+const Tab = styled.a`
+  cursor: pointer;
+  font-weight: bold;
+  font-size: calc(${tokens.text.fontSize.body} * 1px);
+  line-height: calc(${tokens.text.lineHeight.body} * 1px);
+  padding: 13px calc(${tokens.space.layout[30]} * 1px);
+  border-top: 2px transparent;
+
+  color: ${tokens.color.text.tertiary.default};
+  &:hover {
+    color: ${tokens.color.text.tertiary.hover};
+  }
+  &:active {
+    color: ${tokens.color.text.tertiary.press};
+  }
+
+  &[aria-selected='true'] {
+    color: ${tokens.color.text.default};
+    border-top: 2px solid ${tokens.color.border.selected};
+    &:hover {
+      color: ${tokens.color.text.hover};
+    }
+    &:active {
+      color: ${tokens.color.text.press};
+    }
+  }
+`
+
+const UserCard = styled.div`
+  display: grid;
+  grid-template-areas:
+    'UserInfo     .           ShowAll'
+    'ArtworkList  ArtworkList ArtworkList';
+`
+
+const UserInfo = styled.div`
+  grid-area: UserInfo;
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: left;
+  align-items: center;
+  gap: calc(${tokens.space.layout[20]} * 1px);
+`
+
+const User = styled.a`
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border-radius: calc(${tokens.radius.oval} * 1px);
+  cursor: pointer;
+
+  color: ${tokens.color.icon.default};
+  background-color: ${tokens.color.container.secondary.default};
+  &:hover {
+    color: ${tokens.color.icon.hover};
+    background-color: ${tokens.color.container.secondary.hover};
+  }
+  &:active {
+    color: ${tokens.color.icon.press};
+    background-color: ${tokens.color.container.secondary.press};
+  }
+`
+
+const UserName = styled.span`
+  color: ${tokens.color.text.default};
+  font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
+  line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
+  font-weight: bold;
+`
+
+const ShowAll = styled.a`
+  grid-area: ShowAll;
+  cursor: pointer;
+  color: ${tokens.color.text.tertiary.default};
+  &:hover {
+    color: ${tokens.color.text.tertiary.hover};
+  }
+  &:active {
+    color: ${tokens.color.text.tertiary.press};
+  }
+  text-align: right;
+  align-content: center;
+  font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
+  line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
+`
+
+const ArtworkList = styled.ul`
+  grid-area: ArtworkList;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: calc(${tokens.space.layout[20]} * 1px);
+  list-style: none;
+  padding: 0;
+  max-width: 424px;
+`
+
+const Artwork = styled.article`
+  display: grid;
+  gap: calc(${tokens.space.layout[10]} * 1px);
+`
+const ArtworkThumbnail = styled.img`
+  width: 100%;
+  aspect-ratio: 3 / 2;
+  border-radius: calc(${tokens.radius.m} * 1px);
+`
+const ArtworkTitle = styled.h3`
+  color: ${tokens.color.text.default};
+  font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
+  line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
+  margin: 0;
+`
+const ArtworkDescription = styled.p`
+  margin: 0;
+  color: ${tokens.color.text.tertiary.default};
+  font-size: calc(${tokens.text.fontSize.caption.s} * 1px);
+  line-height: calc(${tokens.text.lineHeight.caption.s} * 1px);
+`
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index ce897777d..9470a4e3e 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["./src"]
+  "include": ["./src", "./docs"]
 }
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 60119b0e9..d09a83f1d 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -13,6 +13,7 @@
     "jsx": "react-jsx",
     "declaration": true,
     "declarationMap": true,
+    "resolveJsonModule": true,
     "paths": {
       "@charcoal-ui/*": ["./packages/*/src"]
     }

From 1fa1fd77212ebb2383e6c1b9b982da8f0045a99b Mon Sep 17 00:00:00 2001
From: yue <yue@pixiv.co.jp>
Date: Thu, 31 Oct 2024 16:24:25 +0900
Subject: [PATCH 2/3] feat(@charcoal-ui/tailwind-config): allow design token v2
 in tailwind config

---
 .../src/__snapshots__/v2.test.ts.snap         | 6461 +++++++++++++++++
 packages/tailwind-config/src/util.ts          |   28 +
 packages/tailwind-config/src/v2.test.ts       |   60 +
 packages/tailwind-config/tsconfig.json        |    5 +-
 packages/tailwind-config/vitest.config.ts     |   14 +-
 5 files changed, 6560 insertions(+), 8 deletions(-)
 create mode 100644 packages/tailwind-config/src/__snapshots__/v2.test.ts.snap
 create mode 100644 packages/tailwind-config/src/v2.test.ts

diff --git a/packages/tailwind-config/src/__snapshots__/v2.test.ts.snap b/packages/tailwind-config/src/__snapshots__/v2.test.ts.snap
new file mode 100644
index 000000000..66015d6e7
--- /dev/null
+++ b/packages/tailwind-config/src/__snapshots__/v2.test.ts.snap
@@ -0,0 +1,6461 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`v2 > config object 1`] = `
+{
+  "theme": {
+    "borderRadius": {
+      "0": "var(--charcoal-radius-0)",
+      "l": "var(--charcoal-radius-l)",
+      "m": "var(--charcoal-radius-m)",
+      "oval": "var(--charcoal-radius-oval)",
+      "s": "var(--charcoal-radius-s)",
+      "xl": "var(--charcoal-radius-xl)",
+      "xs": "var(--charcoal-radius-xs)",
+      "xxl": "var(--charcoal-radius-xxl)",
+    },
+    "borderWidth": {
+      "focus-1": "var(--charcoal-border-width-focus-1)",
+      "focus-2": "var(--charcoal-border-width-focus-2)",
+      "l": "var(--charcoal-border-width-l)",
+      "m": "var(--charcoal-border-width-m)",
+    },
+    "colors": {
+      "background": {
+        "DEFAULT": "var(--charcoal-color-background-default)",
+        "secondary": "var(--charcoal-color-background-secondary)",
+        "tertiary": "var(--charcoal-color-background-tertiary)",
+      },
+      "border": {
+        "DEFAULT": "var(--charcoal-color-border-default)",
+        "disable": "var(--charcoal-color-border-disable)",
+        "focus": {
+          "1": "var(--charcoal-color-border-focus-1)",
+          "2": "var(--charcoal-color-border-focus-2)",
+          "legacy": "var(--charcoal-color-border-focus-legacy)",
+        },
+        "hover": "var(--charcoal-color-border-hover)",
+        "hud": "var(--charcoal-color-border-hud)",
+        "negative": "var(--charcoal-color-border-negative)",
+        "press": "var(--charcoal-color-border-press)",
+        "secondary": "var(--charcoal-color-border-secondary)",
+        "selected": "var(--charcoal-color-border-selected)",
+      },
+      "container": {
+        "DEFAULT": "var(--charcoal-color-container-default)",
+        "default-a": "var(--charcoal-color-container-default-a)",
+        "disable": "var(--charcoal-color-container-disable)",
+        "discovery": {
+          "DEFAULT": "var(--charcoal-color-container-discovery-default)",
+          "hover": "var(--charcoal-color-container-discovery-hover)",
+          "press": "var(--charcoal-color-container-discovery-press)",
+        },
+        "hover": "var(--charcoal-color-container-hover)",
+        "hover-a": "var(--charcoal-color-container-hover-a)",
+        "hud": {
+          "DEFAULT": "var(--charcoal-color-container-hud-default)",
+          "hover": "var(--charcoal-color-container-hud-hover)",
+          "press": "var(--charcoal-color-container-hud-press)",
+        },
+        "negative": {
+          "DEFAULT": "var(--charcoal-color-container-negative-default)",
+          "hover": "var(--charcoal-color-container-negative-hover)",
+          "press": "var(--charcoal-color-container-negative-press)",
+        },
+        "neutral": {
+          "DEFAULT": "var(--charcoal-color-container-neutral-default)",
+          "hover": "var(--charcoal-color-container-neutral-hover)",
+          "press": "var(--charcoal-color-container-neutral-press)",
+        },
+        "notice": {
+          "DEFAULT": "var(--charcoal-color-container-notice-default)",
+          "hover": "var(--charcoal-color-container-notice-hover)",
+          "press": "var(--charcoal-color-container-notice-press)",
+        },
+        "on-img": {
+          "DEFAULT": "var(--charcoal-color-container-on-img-default)",
+          "hover": "var(--charcoal-color-container-on-img-hover)",
+          "press": "var(--charcoal-color-container-on-img-press)",
+        },
+        "positive": {
+          "DEFAULT": "var(--charcoal-color-container-positive-default)",
+          "hover": "var(--charcoal-color-container-positive-hover)",
+          "press": "var(--charcoal-color-container-positive-press)",
+        },
+        "press": "var(--charcoal-color-container-press)",
+        "press-a": "var(--charcoal-color-container-press-a)",
+        "primary": {
+          "DEFAULT": "var(--charcoal-color-container-primary-default)",
+          "hover": "var(--charcoal-color-container-primary-hover)",
+          "press": "var(--charcoal-color-container-primary-press)",
+        },
+        "secondary": {
+          "DEFAULT": "var(--charcoal-color-container-secondary-default)",
+          "default-a": "var(--charcoal-color-container-secondary-default-a)",
+          "hover": "var(--charcoal-color-container-secondary-hover)",
+          "hover-a": "var(--charcoal-color-container-secondary-hover-a)",
+          "press": "var(--charcoal-color-container-secondary-press)",
+          "press-a": "var(--charcoal-color-container-secondary-press-a)",
+        },
+        "skeleton": "var(--charcoal-color-container-skeleton)",
+        "subtle": "var(--charcoal-color-container-subtle)",
+        "tertiary": {
+          "DEFAULT": "var(--charcoal-color-container-tertiary-default)",
+          "default-a": "var(--charcoal-color-container-tertiary-default-a)",
+          "hover": "var(--charcoal-color-container-tertiary-hover)",
+          "hover-a": "var(--charcoal-color-container-tertiary-hover-a)",
+          "press": "var(--charcoal-color-container-tertiary-press)",
+          "pressA": "var(--charcoal-color-container-tertiary-press-a)",
+        },
+      },
+      "icon": {
+        "DEFAULT": "var(--charcoal-color-icon-default)",
+        "disable": "var(--charcoal-color-icon-disable)",
+        "hover": "var(--charcoal-color-icon-hover)",
+        "negative": {
+          "DEFAULT": "var(--charcoal-color-icon-negative-default)",
+          "hover": "var(--charcoal-color-icon-negative-hover)",
+          "press": "var(--charcoal-color-icon-negative-press)",
+        },
+        "notice": {
+          "DEFAULT": "var(--charcoal-color-icon-notice-default)",
+          "hover": "var(--charcoal-color-icon-notice-hover)",
+          "press": "var(--charcoal-color-icon-notice-press)",
+        },
+        "on-negative": {
+          "DEFAULT": "var(--charcoal-color-icon-on-negative-default)",
+          "hover": "var(--charcoal-color-icon-on-negative-hover)",
+          "press": "var(--charcoal-color-icon-on-negative-press)",
+        },
+        "on-neutral": {
+          "DEFAULT": "var(--charcoal-color-icon-on-neutral-default)",
+          "hover": "var(--charcoal-color-icon-on-neutral-hover)",
+          "press": "var(--charcoal-color-icon-on-neutral-press)",
+        },
+        "on-notice": {
+          "DEFAULT": "var(--charcoal-color-icon-on-notice-default)",
+          "hover": "var(--charcoal-color-icon-on-notice-hover)",
+          "press": "var(--charcoal-color-icon-on-notice-press)",
+        },
+        "on-on-img": {
+          "DEFAULT": "var(--charcoal-color-icon-on-on-img-default)",
+          "hover": "var(--charcoal-color-icon-on-on-img-hover)",
+          "press": "var(--charcoal-color-icon-on-on-img-press)",
+        },
+        "on-positive": {
+          "DEFAULT": "var(--charcoal-color-icon-on-positive-default)",
+          "hover": "var(--charcoal-color-icon-on-positive-hover)",
+          "press": "var(--charcoal-color-icon-on-positive-press)",
+        },
+        "on-primary": {
+          "DEFAULT": "var(--charcoal-color-icon-on-primary-default)",
+          "hover": "var(--charcoal-color-icon-on-primary-hover)",
+          "press": "var(--charcoal-color-icon-on-primary-press)",
+        },
+        "positive": {
+          "DEFAULT": "var(--charcoal-color-icon-positive-default)",
+          "hover": "var(--charcoal-color-icon-positive-hover)",
+          "press": "var(--charcoal-color-icon-positive-press)",
+        },
+        "press": "var(--charcoal-color-icon-press)",
+        "secondary": {
+          "DEFAULT": "var(--charcoal-color-icon-secondary-default)",
+          "hover": "var(--charcoal-color-icon-secondary-hover)",
+          "press": "var(--charcoal-color-icon-secondary-press)",
+        },
+        "tertiary": {
+          "DEFAULT": "var(--charcoal-color-icon-tertiary-default)",
+          "hover": "var(--charcoal-color-icon-tertiary-hover)",
+          "press": "var(--charcoal-color-icon-tertiary-press)",
+        },
+      },
+      "text": {
+        "DEFAULT": "var(--charcoal-color-text-default)",
+        "brand-premium": {
+          "DEFAULT": "var(--charcoal-color-text-brand-premium-default)",
+          "hover": "var(--charcoal-color-text-brand-premium-hover)",
+          "press": "var(--charcoal-color-text-brand-premium-press)",
+        },
+        "disable": "var(--charcoal-color-text-disable)",
+        "hover": "var(--charcoal-color-text-hover)",
+        "info": {
+          "DEFAULT": "var(--charcoal-color-text-info-default)",
+          "hover": "var(--charcoal-color-text-info-hover)",
+          "press": "var(--charcoal-color-text-info-press)",
+        },
+        "negative": {
+          "DEFAULT": "var(--charcoal-color-text-negative-default)",
+          "hover": "var(--charcoal-color-text-negative-hover)",
+          "press": "var(--charcoal-color-text-negative-press)",
+        },
+        "notice": {
+          "DEFAULT": "var(--charcoal-color-text-notice-default)",
+          "hover": "var(--charcoal-color-text-notice-hover)",
+          "press": "var(--charcoal-color-text-notice-press)",
+        },
+        "on-discovery": {
+          "DEFAULT": "var(--charcoal-color-text-on-discovery-default)",
+          "hover": "var(--charcoal-color-text-on-discovery-hover)",
+          "press": "var(--charcoal-color-text-on-discovery-press)",
+        },
+        "on-hud": {
+          "DEFAULT": "var(--charcoal-color-text-on-hud-default)",
+          "hover": "var(--charcoal-color-text-on-hud-hover)",
+          "press": "var(--charcoal-color-text-on-hud-press)",
+        },
+        "on-negative": {
+          "DEFAULT": "var(--charcoal-color-text-on-negative-default)",
+          "hover": "var(--charcoal-color-text-on-negative-hover)",
+          "press": "var(--charcoal-color-text-on-negative-press)",
+        },
+        "on-notice": {
+          "DEFAULT": "var(--charcoal-color-text-on-notice-default)",
+          "hover": "var(--charcoal-color-text-on-notice-hover)",
+          "press": "var(--charcoal-color-text-on-notice-press)",
+        },
+        "on-on-img": {
+          "DEFAULT": "var(--charcoal-color-text-on-on-img-default)",
+          "hover": "var(--charcoal-color-text-on-on-img-hover)",
+          "press": "var(--charcoal-color-text-on-on-img-press)",
+        },
+        "on-positive": {
+          "DEFAULT": "var(--charcoal-color-text-on-positive-default)",
+          "hover": "var(--charcoal-color-text-on-positive-hover)",
+          "press": "var(--charcoal-color-text-on-positive-press)",
+        },
+        "on-primary": {
+          "DEFAULT": "var(--charcoal-color-text-on-primary-default)",
+          "hover": "var(--charcoal-color-text-on-primary-hover)",
+          "press": "var(--charcoal-color-text-on-primary-press)",
+        },
+        "placeholder": {
+          "DEFAULT": "var(--charcoal-color-text-placeholder-default)",
+          "hover": "var(--charcoal-color-text-placeholder-hover)",
+          "press": "var(--charcoal-color-text-placeholder-press)",
+        },
+        "positive": {
+          "DEFAULT": "var(--charcoal-color-text-positive-default)",
+          "hover": "var(--charcoal-color-text-positive-hover)",
+          "press": "var(--charcoal-color-text-positive-press)",
+        },
+        "press": "var(--charcoal-color-text-press)",
+        "secondary": {
+          "DEFAULT": "var(--charcoal-color-text-secondary-default)",
+          "hover": "var(--charcoal-color-text-secondary-hover)",
+          "press": "var(--charcoal-color-text-secondary-press)",
+        },
+        "tertiary": {
+          "DEFAULT": "var(--charcoal-color-text-tertiary-default)",
+          "hover": "var(--charcoal-color-text-tertiary-hover)",
+          "press": "var(--charcoal-color-text-tertiary-press)",
+        },
+        "visited": {
+          "DEFAULT": "var(--charcoal-color-text-visited-default)",
+          "hover": "var(--charcoal-color-text-visited-hover)",
+          "press": "var(--charcoal-color-text-visited-press)",
+        },
+      },
+    },
+    "darkMode": false,
+    "fontSize": {
+      "body": [
+        "var(--charcoal-text-font-size-body)",
+        {
+          "lineHeight": "var(--charcoal-text-line-height-body)",
+        },
+      ],
+      "caption-m": [
+        "var(--charcoal-text-font-size-caption-m)",
+        {
+          "lineHeight": "var(--charcoal-text-line-height-caption-m)",
+        },
+      ],
+      "caption-s": [
+        "var(--charcoal-text-font-size-caption-s)",
+        {
+          "lineHeight": "var(--charcoal-text-line-height-caption-s)",
+        },
+      ],
+      "heading-l": [
+        "var(--charcoal-text-font-size-heading-l)",
+        {
+          "lineHeight": "var(--charcoal-text-line-height-heading-l)",
+        },
+      ],
+      "heading-m": [
+        "var(--charcoal-text-font-size-heading-m)",
+        {
+          "lineHeight": "var(--charcoal-text-line-height-heading-m)",
+        },
+      ],
+      "heading-s": [
+        "var(--charcoal-text-font-size-heading-s)",
+        {
+          "lineHeight": "var(--charcoal-text-line-height-heading-s)",
+        },
+      ],
+      "heading-xl": [
+        "var(--charcoal-text-font-size-heading-xl)",
+        {
+          "lineHeight": "var(--charcoal-text-line-height-heading-xl)",
+        },
+      ],
+      "heading-xs": [
+        "var(--charcoal-text-font-size-heading-xs)",
+        {
+          "lineHeight": "var(--charcoal-text-line-height-heading-xs)",
+        },
+      ],
+      "heading-xxl": [
+        "var(--charcoal-text-font-size-heading-xxl)",
+        {
+          "lineHeight": "var(--charcoal-text-line-height-heading-xxl)",
+        },
+      ],
+      "heading-xxs": [
+        "var(--charcoal-text-font-size-heading-xxs)",
+        {
+          "lineHeight": "var(--charcoal-text-line-height-heading-xxs)",
+        },
+      ],
+      "heading-xxxl": [
+        "var(--charcoal-text-font-size-heading-xxxl)",
+        {
+          "lineHeight": "var(--charcoal-text-line-height-heading-xxxl)",
+        },
+      ],
+      "heading-xxxs": [
+        "var(--charcoal-text-font-size-heading-xxxs)",
+        {
+          "lineHeight": "var(--charcoal-text-line-height-heading-xxxs)",
+        },
+      ],
+      "paragraph": [
+        "var(--charcoal-text-font-size-paragraph)",
+        {
+          "lineHeight": "var(--charcoal-text-line-height-paragraph)",
+        },
+      ],
+    },
+    "fontWeight": {
+      "bold": "var(--charcoal-text-font-weight-bold)",
+      "regular": "var(--charcoal-text-font-weight-regular)",
+    },
+    "spacing": {
+      "0": "var(--charcoal-space-layout-0)",
+      "10": "var(--charcoal-space-layout-10)",
+      "100": "var(--charcoal-space-layout-100)",
+      "20": "var(--charcoal-space-layout-20)",
+      "25": "var(--charcoal-space-layout-25)",
+      "30": "var(--charcoal-space-layout-30)",
+      "40": "var(--charcoal-space-layout-40)",
+      "50": "var(--charcoal-space-layout-50)",
+      "60": "var(--charcoal-space-layout-60)",
+      "70": "var(--charcoal-space-layout-70)",
+      "80": "var(--charcoal-space-layout-80)",
+      "90": "var(--charcoal-space-layout-90)",
+      "between-checkboxes-horizontal": "var(--charcoal-space-between-checkboxes-horizontal)",
+      "between-checkboxes-vertical": "var(--charcoal-space-between-checkboxes-vertical)",
+      "l": "var(--charcoal-space-target-l)",
+      "m": "var(--charcoal-space-target-m)",
+      "s": "var(--charcoal-space-target-s)",
+      "xs": "var(--charcoal-space-target-xs)",
+    },
+    "width": {
+      "l": "var(--charcoal-paragraph-width-l)",
+      "l-compact": "var(--charcoal-paragraph-width-l-compact)",
+      "l-cozy": "var(--charcoal-paragraph-width-l-cozy)",
+      "m": "var(--charcoal-paragraph-width-m)",
+      "m-compact": "var(--charcoal-paragraph-width-m-compact)",
+      "m-cozy": "var(--charcoal-paragraph-width-m-cozy)",
+      "s": "var(--charcoal-paragraph-width-s)",
+      "s-compact": "var(--charcoal-paragraph-width-s-compact)",
+      "s-cozy": "var(--charcoal-paragraph-width-s-cozy)",
+    },
+  },
+}
+`;
+
+exports[`v2 > list of classes 1`] = `
+[
+  "sr-only",
+  "not-sr-only",
+  "pointer-events-none",
+  "pointer-events-auto",
+  "visible",
+  "invisible",
+  "static",
+  "fixed",
+  "absolute",
+  "relative",
+  "sticky",
+  "inset-0",
+  "inset-10",
+  "inset-20",
+  "inset-25",
+  "inset-30",
+  "inset-40",
+  "inset-50",
+  "inset-60",
+  "inset-70",
+  "inset-80",
+  "inset-90",
+  "inset-100",
+  "inset-auto",
+  "inset-xs",
+  "inset-s",
+  "inset-m",
+  "inset-l",
+  "inset-between-checkboxes-vertical",
+  "inset-between-checkboxes-horizontal",
+  "inset-1/2",
+  "inset-1/3",
+  "inset-2/3",
+  "inset-1/4",
+  "inset-2/4",
+  "inset-3/4",
+  "inset-full",
+  "-inset-0",
+  "-inset-10",
+  "-inset-20",
+  "-inset-25",
+  "-inset-30",
+  "-inset-40",
+  "-inset-50",
+  "-inset-60",
+  "-inset-70",
+  "-inset-80",
+  "-inset-90",
+  "-inset-100",
+  "-inset-xs",
+  "-inset-s",
+  "-inset-m",
+  "-inset-l",
+  "-inset-between-checkboxes-vertical",
+  "-inset-between-checkboxes-horizontal",
+  "-inset-1/2",
+  "-inset-1/3",
+  "-inset-2/3",
+  "-inset-1/4",
+  "-inset-2/4",
+  "-inset-3/4",
+  "-inset-full",
+  "inset-x-0",
+  "inset-x-10",
+  "inset-x-20",
+  "inset-x-25",
+  "inset-x-30",
+  "inset-x-40",
+  "inset-x-50",
+  "inset-x-60",
+  "inset-x-70",
+  "inset-x-80",
+  "inset-x-90",
+  "inset-x-100",
+  "inset-x-auto",
+  "inset-x-xs",
+  "inset-x-s",
+  "inset-x-m",
+  "inset-x-l",
+  "inset-x-between-checkboxes-vertical",
+  "inset-x-between-checkboxes-horizontal",
+  "inset-x-1/2",
+  "inset-x-1/3",
+  "inset-x-2/3",
+  "inset-x-1/4",
+  "inset-x-2/4",
+  "inset-x-3/4",
+  "inset-x-full",
+  "-inset-x-0",
+  "-inset-x-10",
+  "-inset-x-20",
+  "-inset-x-25",
+  "-inset-x-30",
+  "-inset-x-40",
+  "-inset-x-50",
+  "-inset-x-60",
+  "-inset-x-70",
+  "-inset-x-80",
+  "-inset-x-90",
+  "-inset-x-100",
+  "-inset-x-xs",
+  "-inset-x-s",
+  "-inset-x-m",
+  "-inset-x-l",
+  "-inset-x-between-checkboxes-vertical",
+  "-inset-x-between-checkboxes-horizontal",
+  "-inset-x-1/2",
+  "-inset-x-1/3",
+  "-inset-x-2/3",
+  "-inset-x-1/4",
+  "-inset-x-2/4",
+  "-inset-x-3/4",
+  "-inset-x-full",
+  "inset-y-0",
+  "inset-y-10",
+  "inset-y-20",
+  "inset-y-25",
+  "inset-y-30",
+  "inset-y-40",
+  "inset-y-50",
+  "inset-y-60",
+  "inset-y-70",
+  "inset-y-80",
+  "inset-y-90",
+  "inset-y-100",
+  "inset-y-auto",
+  "inset-y-xs",
+  "inset-y-s",
+  "inset-y-m",
+  "inset-y-l",
+  "inset-y-between-checkboxes-vertical",
+  "inset-y-between-checkboxes-horizontal",
+  "inset-y-1/2",
+  "inset-y-1/3",
+  "inset-y-2/3",
+  "inset-y-1/4",
+  "inset-y-2/4",
+  "inset-y-3/4",
+  "inset-y-full",
+  "-inset-y-0",
+  "-inset-y-10",
+  "-inset-y-20",
+  "-inset-y-25",
+  "-inset-y-30",
+  "-inset-y-40",
+  "-inset-y-50",
+  "-inset-y-60",
+  "-inset-y-70",
+  "-inset-y-80",
+  "-inset-y-90",
+  "-inset-y-100",
+  "-inset-y-xs",
+  "-inset-y-s",
+  "-inset-y-m",
+  "-inset-y-l",
+  "-inset-y-between-checkboxes-vertical",
+  "-inset-y-between-checkboxes-horizontal",
+  "-inset-y-1/2",
+  "-inset-y-1/3",
+  "-inset-y-2/3",
+  "-inset-y-1/4",
+  "-inset-y-2/4",
+  "-inset-y-3/4",
+  "-inset-y-full",
+  "top-0",
+  "top-10",
+  "top-20",
+  "top-25",
+  "top-30",
+  "top-40",
+  "top-50",
+  "top-60",
+  "top-70",
+  "top-80",
+  "top-90",
+  "top-100",
+  "top-auto",
+  "top-xs",
+  "top-s",
+  "top-m",
+  "top-l",
+  "top-between-checkboxes-vertical",
+  "top-between-checkboxes-horizontal",
+  "top-1/2",
+  "top-1/3",
+  "top-2/3",
+  "top-1/4",
+  "top-2/4",
+  "top-3/4",
+  "top-full",
+  "-top-0",
+  "-top-10",
+  "-top-20",
+  "-top-25",
+  "-top-30",
+  "-top-40",
+  "-top-50",
+  "-top-60",
+  "-top-70",
+  "-top-80",
+  "-top-90",
+  "-top-100",
+  "-top-xs",
+  "-top-s",
+  "-top-m",
+  "-top-l",
+  "-top-between-checkboxes-vertical",
+  "-top-between-checkboxes-horizontal",
+  "-top-1/2",
+  "-top-1/3",
+  "-top-2/3",
+  "-top-1/4",
+  "-top-2/4",
+  "-top-3/4",
+  "-top-full",
+  "right-0",
+  "right-10",
+  "right-20",
+  "right-25",
+  "right-30",
+  "right-40",
+  "right-50",
+  "right-60",
+  "right-70",
+  "right-80",
+  "right-90",
+  "right-100",
+  "right-auto",
+  "right-xs",
+  "right-s",
+  "right-m",
+  "right-l",
+  "right-between-checkboxes-vertical",
+  "right-between-checkboxes-horizontal",
+  "right-1/2",
+  "right-1/3",
+  "right-2/3",
+  "right-1/4",
+  "right-2/4",
+  "right-3/4",
+  "right-full",
+  "-right-0",
+  "-right-10",
+  "-right-20",
+  "-right-25",
+  "-right-30",
+  "-right-40",
+  "-right-50",
+  "-right-60",
+  "-right-70",
+  "-right-80",
+  "-right-90",
+  "-right-100",
+  "-right-xs",
+  "-right-s",
+  "-right-m",
+  "-right-l",
+  "-right-between-checkboxes-vertical",
+  "-right-between-checkboxes-horizontal",
+  "-right-1/2",
+  "-right-1/3",
+  "-right-2/3",
+  "-right-1/4",
+  "-right-2/4",
+  "-right-3/4",
+  "-right-full",
+  "bottom-0",
+  "bottom-10",
+  "bottom-20",
+  "bottom-25",
+  "bottom-30",
+  "bottom-40",
+  "bottom-50",
+  "bottom-60",
+  "bottom-70",
+  "bottom-80",
+  "bottom-90",
+  "bottom-100",
+  "bottom-auto",
+  "bottom-xs",
+  "bottom-s",
+  "bottom-m",
+  "bottom-l",
+  "bottom-between-checkboxes-vertical",
+  "bottom-between-checkboxes-horizontal",
+  "bottom-1/2",
+  "bottom-1/3",
+  "bottom-2/3",
+  "bottom-1/4",
+  "bottom-2/4",
+  "bottom-3/4",
+  "bottom-full",
+  "-bottom-0",
+  "-bottom-10",
+  "-bottom-20",
+  "-bottom-25",
+  "-bottom-30",
+  "-bottom-40",
+  "-bottom-50",
+  "-bottom-60",
+  "-bottom-70",
+  "-bottom-80",
+  "-bottom-90",
+  "-bottom-100",
+  "-bottom-xs",
+  "-bottom-s",
+  "-bottom-m",
+  "-bottom-l",
+  "-bottom-between-checkboxes-vertical",
+  "-bottom-between-checkboxes-horizontal",
+  "-bottom-1/2",
+  "-bottom-1/3",
+  "-bottom-2/3",
+  "-bottom-1/4",
+  "-bottom-2/4",
+  "-bottom-3/4",
+  "-bottom-full",
+  "left-0",
+  "left-10",
+  "left-20",
+  "left-25",
+  "left-30",
+  "left-40",
+  "left-50",
+  "left-60",
+  "left-70",
+  "left-80",
+  "left-90",
+  "left-100",
+  "left-auto",
+  "left-xs",
+  "left-s",
+  "left-m",
+  "left-l",
+  "left-between-checkboxes-vertical",
+  "left-between-checkboxes-horizontal",
+  "left-1/2",
+  "left-1/3",
+  "left-2/3",
+  "left-1/4",
+  "left-2/4",
+  "left-3/4",
+  "left-full",
+  "-left-0",
+  "-left-10",
+  "-left-20",
+  "-left-25",
+  "-left-30",
+  "-left-40",
+  "-left-50",
+  "-left-60",
+  "-left-70",
+  "-left-80",
+  "-left-90",
+  "-left-100",
+  "-left-xs",
+  "-left-s",
+  "-left-m",
+  "-left-l",
+  "-left-between-checkboxes-vertical",
+  "-left-between-checkboxes-horizontal",
+  "-left-1/2",
+  "-left-1/3",
+  "-left-2/3",
+  "-left-1/4",
+  "-left-2/4",
+  "-left-3/4",
+  "-left-full",
+  "isolate",
+  "isolation-auto",
+  "z-0",
+  "z-10",
+  "z-20",
+  "z-30",
+  "z-40",
+  "z-50",
+  "z-auto",
+  "-z-0",
+  "-z-10",
+  "-z-20",
+  "-z-30",
+  "-z-40",
+  "-z-50",
+  "order-1",
+  "order-2",
+  "order-3",
+  "order-4",
+  "order-5",
+  "order-6",
+  "order-7",
+  "order-8",
+  "order-9",
+  "order-10",
+  "order-11",
+  "order-12",
+  "order-first",
+  "order-last",
+  "order-none",
+  "-order-1",
+  "-order-2",
+  "-order-3",
+  "-order-4",
+  "-order-5",
+  "-order-6",
+  "-order-7",
+  "-order-8",
+  "-order-9",
+  "-order-10",
+  "-order-11",
+  "-order-12",
+  "-order-first",
+  "-order-last",
+  "-order-none",
+  "col-auto",
+  "col-span-1",
+  "col-span-2",
+  "col-span-3",
+  "col-span-4",
+  "col-span-5",
+  "col-span-6",
+  "col-span-7",
+  "col-span-8",
+  "col-span-9",
+  "col-span-10",
+  "col-span-11",
+  "col-span-12",
+  "col-span-full",
+  "col-start-1",
+  "col-start-2",
+  "col-start-3",
+  "col-start-4",
+  "col-start-5",
+  "col-start-6",
+  "col-start-7",
+  "col-start-8",
+  "col-start-9",
+  "col-start-10",
+  "col-start-11",
+  "col-start-12",
+  "col-start-13",
+  "col-start-auto",
+  "col-end-1",
+  "col-end-2",
+  "col-end-3",
+  "col-end-4",
+  "col-end-5",
+  "col-end-6",
+  "col-end-7",
+  "col-end-8",
+  "col-end-9",
+  "col-end-10",
+  "col-end-11",
+  "col-end-12",
+  "col-end-13",
+  "col-end-auto",
+  "row-auto",
+  "row-span-1",
+  "row-span-2",
+  "row-span-3",
+  "row-span-4",
+  "row-span-5",
+  "row-span-6",
+  "row-span-full",
+  "row-start-1",
+  "row-start-2",
+  "row-start-3",
+  "row-start-4",
+  "row-start-5",
+  "row-start-6",
+  "row-start-7",
+  "row-start-auto",
+  "row-end-1",
+  "row-end-2",
+  "row-end-3",
+  "row-end-4",
+  "row-end-5",
+  "row-end-6",
+  "row-end-7",
+  "row-end-auto",
+  "float-right",
+  "float-left",
+  "float-none",
+  "clear-left",
+  "clear-right",
+  "clear-both",
+  "clear-none",
+  "m-0",
+  "m-10",
+  "m-20",
+  "m-25",
+  "m-30",
+  "m-40",
+  "m-50",
+  "m-60",
+  "m-70",
+  "m-80",
+  "m-90",
+  "m-100",
+  "m-auto",
+  "m-xs",
+  "m-s",
+  "m-m",
+  "m-l",
+  "m-between-checkboxes-vertical",
+  "m-between-checkboxes-horizontal",
+  "-m-0",
+  "-m-10",
+  "-m-20",
+  "-m-25",
+  "-m-30",
+  "-m-40",
+  "-m-50",
+  "-m-60",
+  "-m-70",
+  "-m-80",
+  "-m-90",
+  "-m-100",
+  "-m-xs",
+  "-m-s",
+  "-m-m",
+  "-m-l",
+  "-m-between-checkboxes-vertical",
+  "-m-between-checkboxes-horizontal",
+  "mx-0",
+  "mx-10",
+  "mx-20",
+  "mx-25",
+  "mx-30",
+  "mx-40",
+  "mx-50",
+  "mx-60",
+  "mx-70",
+  "mx-80",
+  "mx-90",
+  "mx-100",
+  "mx-auto",
+  "mx-xs",
+  "mx-s",
+  "mx-m",
+  "mx-l",
+  "mx-between-checkboxes-vertical",
+  "mx-between-checkboxes-horizontal",
+  "-mx-0",
+  "-mx-10",
+  "-mx-20",
+  "-mx-25",
+  "-mx-30",
+  "-mx-40",
+  "-mx-50",
+  "-mx-60",
+  "-mx-70",
+  "-mx-80",
+  "-mx-90",
+  "-mx-100",
+  "-mx-xs",
+  "-mx-s",
+  "-mx-m",
+  "-mx-l",
+  "-mx-between-checkboxes-vertical",
+  "-mx-between-checkboxes-horizontal",
+  "my-0",
+  "my-10",
+  "my-20",
+  "my-25",
+  "my-30",
+  "my-40",
+  "my-50",
+  "my-60",
+  "my-70",
+  "my-80",
+  "my-90",
+  "my-100",
+  "my-auto",
+  "my-xs",
+  "my-s",
+  "my-m",
+  "my-l",
+  "my-between-checkboxes-vertical",
+  "my-between-checkboxes-horizontal",
+  "-my-0",
+  "-my-10",
+  "-my-20",
+  "-my-25",
+  "-my-30",
+  "-my-40",
+  "-my-50",
+  "-my-60",
+  "-my-70",
+  "-my-80",
+  "-my-90",
+  "-my-100",
+  "-my-xs",
+  "-my-s",
+  "-my-m",
+  "-my-l",
+  "-my-between-checkboxes-vertical",
+  "-my-between-checkboxes-horizontal",
+  "mt-0",
+  "mt-10",
+  "mt-20",
+  "mt-25",
+  "mt-30",
+  "mt-40",
+  "mt-50",
+  "mt-60",
+  "mt-70",
+  "mt-80",
+  "mt-90",
+  "mt-100",
+  "mt-auto",
+  "mt-xs",
+  "mt-s",
+  "mt-m",
+  "mt-l",
+  "mt-between-checkboxes-vertical",
+  "mt-between-checkboxes-horizontal",
+  "-mt-0",
+  "-mt-10",
+  "-mt-20",
+  "-mt-25",
+  "-mt-30",
+  "-mt-40",
+  "-mt-50",
+  "-mt-60",
+  "-mt-70",
+  "-mt-80",
+  "-mt-90",
+  "-mt-100",
+  "-mt-xs",
+  "-mt-s",
+  "-mt-m",
+  "-mt-l",
+  "-mt-between-checkboxes-vertical",
+  "-mt-between-checkboxes-horizontal",
+  "mr-0",
+  "mr-10",
+  "mr-20",
+  "mr-25",
+  "mr-30",
+  "mr-40",
+  "mr-50",
+  "mr-60",
+  "mr-70",
+  "mr-80",
+  "mr-90",
+  "mr-100",
+  "mr-auto",
+  "mr-xs",
+  "mr-s",
+  "mr-m",
+  "mr-l",
+  "mr-between-checkboxes-vertical",
+  "mr-between-checkboxes-horizontal",
+  "-mr-0",
+  "-mr-10",
+  "-mr-20",
+  "-mr-25",
+  "-mr-30",
+  "-mr-40",
+  "-mr-50",
+  "-mr-60",
+  "-mr-70",
+  "-mr-80",
+  "-mr-90",
+  "-mr-100",
+  "-mr-xs",
+  "-mr-s",
+  "-mr-m",
+  "-mr-l",
+  "-mr-between-checkboxes-vertical",
+  "-mr-between-checkboxes-horizontal",
+  "mb-0",
+  "mb-10",
+  "mb-20",
+  "mb-25",
+  "mb-30",
+  "mb-40",
+  "mb-50",
+  "mb-60",
+  "mb-70",
+  "mb-80",
+  "mb-90",
+  "mb-100",
+  "mb-auto",
+  "mb-xs",
+  "mb-s",
+  "mb-m",
+  "mb-l",
+  "mb-between-checkboxes-vertical",
+  "mb-between-checkboxes-horizontal",
+  "-mb-0",
+  "-mb-10",
+  "-mb-20",
+  "-mb-25",
+  "-mb-30",
+  "-mb-40",
+  "-mb-50",
+  "-mb-60",
+  "-mb-70",
+  "-mb-80",
+  "-mb-90",
+  "-mb-100",
+  "-mb-xs",
+  "-mb-s",
+  "-mb-m",
+  "-mb-l",
+  "-mb-between-checkboxes-vertical",
+  "-mb-between-checkboxes-horizontal",
+  "ml-0",
+  "ml-10",
+  "ml-20",
+  "ml-25",
+  "ml-30",
+  "ml-40",
+  "ml-50",
+  "ml-60",
+  "ml-70",
+  "ml-80",
+  "ml-90",
+  "ml-100",
+  "ml-auto",
+  "ml-xs",
+  "ml-s",
+  "ml-m",
+  "ml-l",
+  "ml-between-checkboxes-vertical",
+  "ml-between-checkboxes-horizontal",
+  "-ml-0",
+  "-ml-10",
+  "-ml-20",
+  "-ml-25",
+  "-ml-30",
+  "-ml-40",
+  "-ml-50",
+  "-ml-60",
+  "-ml-70",
+  "-ml-80",
+  "-ml-90",
+  "-ml-100",
+  "-ml-xs",
+  "-ml-s",
+  "-ml-m",
+  "-ml-l",
+  "-ml-between-checkboxes-vertical",
+  "-ml-between-checkboxes-horizontal",
+  "box-border",
+  "box-content",
+  "block",
+  "inline-block",
+  "inline",
+  "flex",
+  "inline-flex",
+  "table",
+  "inline-table",
+  "table-caption",
+  "table-cell",
+  "table-column",
+  "table-column-group",
+  "table-footer-group",
+  "table-header-group",
+  "table-row-group",
+  "table-row",
+  "flow-root",
+  "grid",
+  "inline-grid",
+  "contents",
+  "list-item",
+  "hidden",
+  "aspect-auto",
+  "aspect-square",
+  "aspect-video",
+  "h-0",
+  "h-10",
+  "h-20",
+  "h-25",
+  "h-30",
+  "h-40",
+  "h-50",
+  "h-60",
+  "h-70",
+  "h-80",
+  "h-90",
+  "h-100",
+  "h-auto",
+  "h-xs",
+  "h-s",
+  "h-m",
+  "h-l",
+  "h-between-checkboxes-vertical",
+  "h-between-checkboxes-horizontal",
+  "h-1/2",
+  "h-1/3",
+  "h-2/3",
+  "h-1/4",
+  "h-2/4",
+  "h-3/4",
+  "h-1/5",
+  "h-2/5",
+  "h-3/5",
+  "h-4/5",
+  "h-1/6",
+  "h-2/6",
+  "h-3/6",
+  "h-4/6",
+  "h-5/6",
+  "h-full",
+  "h-screen",
+  "h-min",
+  "h-max",
+  "h-fit",
+  "max-h-0",
+  "max-h-10",
+  "max-h-20",
+  "max-h-25",
+  "max-h-30",
+  "max-h-40",
+  "max-h-50",
+  "max-h-60",
+  "max-h-70",
+  "max-h-80",
+  "max-h-90",
+  "max-h-100",
+  "max-h-xs",
+  "max-h-s",
+  "max-h-m",
+  "max-h-l",
+  "max-h-between-checkboxes-vertical",
+  "max-h-between-checkboxes-horizontal",
+  "max-h-full",
+  "max-h-screen",
+  "max-h-min",
+  "max-h-max",
+  "max-h-fit",
+  "min-h-0",
+  "min-h-full",
+  "min-h-screen",
+  "min-h-min",
+  "min-h-max",
+  "min-h-fit",
+  "w-s",
+  "w-m",
+  "w-l",
+  "w-s-compact",
+  "w-m-compact",
+  "w-l-compact",
+  "w-s-cozy",
+  "w-m-cozy",
+  "w-l-cozy",
+  "min-w-0",
+  "min-w-full",
+  "min-w-min",
+  "min-w-max",
+  "min-w-fit",
+  "max-w-0",
+  "max-w-none",
+  "max-w-xs",
+  "max-w-sm",
+  "max-w-md",
+  "max-w-lg",
+  "max-w-xl",
+  "max-w-2xl",
+  "max-w-3xl",
+  "max-w-4xl",
+  "max-w-5xl",
+  "max-w-6xl",
+  "max-w-7xl",
+  "max-w-full",
+  "max-w-min",
+  "max-w-max",
+  "max-w-fit",
+  "max-w-prose",
+  "max-w-screen-sm",
+  "max-w-screen-md",
+  "max-w-screen-lg",
+  "max-w-screen-xl",
+  "max-w-screen-2xl",
+  "flex-1",
+  "flex-auto",
+  "flex-initial",
+  "flex-none",
+  "flex-shrink-0",
+  "flex-shrink",
+  "shrink-0",
+  "shrink",
+  "flex-grow-0",
+  "flex-grow",
+  "grow-0",
+  "grow",
+  "basis-0",
+  "basis-10",
+  "basis-20",
+  "basis-25",
+  "basis-30",
+  "basis-40",
+  "basis-50",
+  "basis-60",
+  "basis-70",
+  "basis-80",
+  "basis-90",
+  "basis-100",
+  "basis-auto",
+  "basis-xs",
+  "basis-s",
+  "basis-m",
+  "basis-l",
+  "basis-between-checkboxes-vertical",
+  "basis-between-checkboxes-horizontal",
+  "basis-1/2",
+  "basis-1/3",
+  "basis-2/3",
+  "basis-1/4",
+  "basis-2/4",
+  "basis-3/4",
+  "basis-1/5",
+  "basis-2/5",
+  "basis-3/5",
+  "basis-4/5",
+  "basis-1/6",
+  "basis-2/6",
+  "basis-3/6",
+  "basis-4/6",
+  "basis-5/6",
+  "basis-1/12",
+  "basis-2/12",
+  "basis-3/12",
+  "basis-4/12",
+  "basis-5/12",
+  "basis-6/12",
+  "basis-7/12",
+  "basis-8/12",
+  "basis-9/12",
+  "basis-10/12",
+  "basis-11/12",
+  "basis-full",
+  "table-auto",
+  "table-fixed",
+  "border-collapse",
+  "border-separate",
+  "origin-center",
+  "origin-top",
+  "origin-top-right",
+  "origin-right",
+  "origin-bottom-right",
+  "origin-bottom",
+  "origin-bottom-left",
+  "origin-left",
+  "origin-top-left",
+  "translate-x-0",
+  "translate-x-10",
+  "translate-x-20",
+  "translate-x-25",
+  "translate-x-30",
+  "translate-x-40",
+  "translate-x-50",
+  "translate-x-60",
+  "translate-x-70",
+  "translate-x-80",
+  "translate-x-90",
+  "translate-x-100",
+  "translate-x-xs",
+  "translate-x-s",
+  "translate-x-m",
+  "translate-x-l",
+  "translate-x-between-checkboxes-vertical",
+  "translate-x-between-checkboxes-horizontal",
+  "translate-x-1/2",
+  "translate-x-1/3",
+  "translate-x-2/3",
+  "translate-x-1/4",
+  "translate-x-2/4",
+  "translate-x-3/4",
+  "translate-x-full",
+  "-translate-x-0",
+  "-translate-x-10",
+  "-translate-x-20",
+  "-translate-x-25",
+  "-translate-x-30",
+  "-translate-x-40",
+  "-translate-x-50",
+  "-translate-x-60",
+  "-translate-x-70",
+  "-translate-x-80",
+  "-translate-x-90",
+  "-translate-x-100",
+  "-translate-x-xs",
+  "-translate-x-s",
+  "-translate-x-m",
+  "-translate-x-l",
+  "-translate-x-between-checkboxes-vertical",
+  "-translate-x-between-checkboxes-horizontal",
+  "-translate-x-1/2",
+  "-translate-x-1/3",
+  "-translate-x-2/3",
+  "-translate-x-1/4",
+  "-translate-x-2/4",
+  "-translate-x-3/4",
+  "-translate-x-full",
+  "translate-y-0",
+  "translate-y-10",
+  "translate-y-20",
+  "translate-y-25",
+  "translate-y-30",
+  "translate-y-40",
+  "translate-y-50",
+  "translate-y-60",
+  "translate-y-70",
+  "translate-y-80",
+  "translate-y-90",
+  "translate-y-100",
+  "translate-y-xs",
+  "translate-y-s",
+  "translate-y-m",
+  "translate-y-l",
+  "translate-y-between-checkboxes-vertical",
+  "translate-y-between-checkboxes-horizontal",
+  "translate-y-1/2",
+  "translate-y-1/3",
+  "translate-y-2/3",
+  "translate-y-1/4",
+  "translate-y-2/4",
+  "translate-y-3/4",
+  "translate-y-full",
+  "-translate-y-0",
+  "-translate-y-10",
+  "-translate-y-20",
+  "-translate-y-25",
+  "-translate-y-30",
+  "-translate-y-40",
+  "-translate-y-50",
+  "-translate-y-60",
+  "-translate-y-70",
+  "-translate-y-80",
+  "-translate-y-90",
+  "-translate-y-100",
+  "-translate-y-xs",
+  "-translate-y-s",
+  "-translate-y-m",
+  "-translate-y-l",
+  "-translate-y-between-checkboxes-vertical",
+  "-translate-y-between-checkboxes-horizontal",
+  "-translate-y-1/2",
+  "-translate-y-1/3",
+  "-translate-y-2/3",
+  "-translate-y-1/4",
+  "-translate-y-2/4",
+  "-translate-y-3/4",
+  "-translate-y-full",
+  "rotate-0",
+  "rotate-1",
+  "rotate-2",
+  "rotate-3",
+  "rotate-6",
+  "rotate-12",
+  "rotate-45",
+  "rotate-90",
+  "rotate-180",
+  "-rotate-0",
+  "-rotate-1",
+  "-rotate-2",
+  "-rotate-3",
+  "-rotate-6",
+  "-rotate-12",
+  "-rotate-45",
+  "-rotate-90",
+  "-rotate-180",
+  "skew-x-0",
+  "skew-x-1",
+  "skew-x-2",
+  "skew-x-3",
+  "skew-x-6",
+  "skew-x-12",
+  "-skew-x-0",
+  "-skew-x-1",
+  "-skew-x-2",
+  "-skew-x-3",
+  "-skew-x-6",
+  "-skew-x-12",
+  "skew-y-0",
+  "skew-y-1",
+  "skew-y-2",
+  "skew-y-3",
+  "skew-y-6",
+  "skew-y-12",
+  "-skew-y-0",
+  "-skew-y-1",
+  "-skew-y-2",
+  "-skew-y-3",
+  "-skew-y-6",
+  "-skew-y-12",
+  "scale-0",
+  "scale-50",
+  "scale-75",
+  "scale-90",
+  "scale-95",
+  "scale-100",
+  "scale-105",
+  "scale-110",
+  "scale-125",
+  "scale-150",
+  "-scale-0",
+  "-scale-50",
+  "-scale-75",
+  "-scale-90",
+  "-scale-95",
+  "-scale-100",
+  "-scale-105",
+  "-scale-110",
+  "-scale-125",
+  "-scale-150",
+  "scale-x-0",
+  "scale-x-50",
+  "scale-x-75",
+  "scale-x-90",
+  "scale-x-95",
+  "scale-x-100",
+  "scale-x-105",
+  "scale-x-110",
+  "scale-x-125",
+  "scale-x-150",
+  "-scale-x-0",
+  "-scale-x-50",
+  "-scale-x-75",
+  "-scale-x-90",
+  "-scale-x-95",
+  "-scale-x-100",
+  "-scale-x-105",
+  "-scale-x-110",
+  "-scale-x-125",
+  "-scale-x-150",
+  "scale-y-0",
+  "scale-y-50",
+  "scale-y-75",
+  "scale-y-90",
+  "scale-y-95",
+  "scale-y-100",
+  "scale-y-105",
+  "scale-y-110",
+  "scale-y-125",
+  "scale-y-150",
+  "-scale-y-0",
+  "-scale-y-50",
+  "-scale-y-75",
+  "-scale-y-90",
+  "-scale-y-95",
+  "-scale-y-100",
+  "-scale-y-105",
+  "-scale-y-110",
+  "-scale-y-125",
+  "-scale-y-150",
+  "transform",
+  "transform-cpu",
+  "transform-gpu",
+  "transform-none",
+  "animate-none",
+  "animate-spin",
+  "animate-ping",
+  "animate-pulse",
+  "animate-bounce",
+  "cursor-auto",
+  "cursor-default",
+  "cursor-pointer",
+  "cursor-wait",
+  "cursor-text",
+  "cursor-move",
+  "cursor-help",
+  "cursor-not-allowed",
+  "cursor-none",
+  "cursor-context-menu",
+  "cursor-progress",
+  "cursor-cell",
+  "cursor-crosshair",
+  "cursor-vertical-text",
+  "cursor-alias",
+  "cursor-copy",
+  "cursor-no-drop",
+  "cursor-grab",
+  "cursor-grabbing",
+  "cursor-all-scroll",
+  "cursor-col-resize",
+  "cursor-row-resize",
+  "cursor-n-resize",
+  "cursor-e-resize",
+  "cursor-s-resize",
+  "cursor-w-resize",
+  "cursor-ne-resize",
+  "cursor-nw-resize",
+  "cursor-se-resize",
+  "cursor-sw-resize",
+  "cursor-ew-resize",
+  "cursor-ns-resize",
+  "cursor-nesw-resize",
+  "cursor-nwse-resize",
+  "cursor-zoom-in",
+  "cursor-zoom-out",
+  "touch-auto",
+  "touch-none",
+  "touch-pan-x",
+  "touch-pan-left",
+  "touch-pan-right",
+  "touch-pan-y",
+  "touch-pan-up",
+  "touch-pan-down",
+  "touch-pinch-zoom",
+  "touch-manipulation",
+  "select-none",
+  "select-text",
+  "select-all",
+  "select-auto",
+  "resize-none",
+  "resize-y",
+  "resize-x",
+  "resize",
+  "snap-none",
+  "snap-x",
+  "snap-y",
+  "snap-both",
+  "snap-mandatory",
+  "snap-proximity",
+  "snap-start",
+  "snap-end",
+  "snap-center",
+  "snap-align-none",
+  "snap-normal",
+  "snap-always",
+  "scroll-m-0",
+  "scroll-m-10",
+  "scroll-m-20",
+  "scroll-m-25",
+  "scroll-m-30",
+  "scroll-m-40",
+  "scroll-m-50",
+  "scroll-m-60",
+  "scroll-m-70",
+  "scroll-m-80",
+  "scroll-m-90",
+  "scroll-m-100",
+  "scroll-m-xs",
+  "scroll-m-s",
+  "scroll-m-m",
+  "scroll-m-l",
+  "scroll-m-between-checkboxes-vertical",
+  "scroll-m-between-checkboxes-horizontal",
+  "-scroll-m-0",
+  "-scroll-m-10",
+  "-scroll-m-20",
+  "-scroll-m-25",
+  "-scroll-m-30",
+  "-scroll-m-40",
+  "-scroll-m-50",
+  "-scroll-m-60",
+  "-scroll-m-70",
+  "-scroll-m-80",
+  "-scroll-m-90",
+  "-scroll-m-100",
+  "-scroll-m-xs",
+  "-scroll-m-s",
+  "-scroll-m-m",
+  "-scroll-m-l",
+  "-scroll-m-between-checkboxes-vertical",
+  "-scroll-m-between-checkboxes-horizontal",
+  "scroll-mx-0",
+  "scroll-mx-10",
+  "scroll-mx-20",
+  "scroll-mx-25",
+  "scroll-mx-30",
+  "scroll-mx-40",
+  "scroll-mx-50",
+  "scroll-mx-60",
+  "scroll-mx-70",
+  "scroll-mx-80",
+  "scroll-mx-90",
+  "scroll-mx-100",
+  "scroll-mx-xs",
+  "scroll-mx-s",
+  "scroll-mx-m",
+  "scroll-mx-l",
+  "scroll-mx-between-checkboxes-vertical",
+  "scroll-mx-between-checkboxes-horizontal",
+  "-scroll-mx-0",
+  "-scroll-mx-10",
+  "-scroll-mx-20",
+  "-scroll-mx-25",
+  "-scroll-mx-30",
+  "-scroll-mx-40",
+  "-scroll-mx-50",
+  "-scroll-mx-60",
+  "-scroll-mx-70",
+  "-scroll-mx-80",
+  "-scroll-mx-90",
+  "-scroll-mx-100",
+  "-scroll-mx-xs",
+  "-scroll-mx-s",
+  "-scroll-mx-m",
+  "-scroll-mx-l",
+  "-scroll-mx-between-checkboxes-vertical",
+  "-scroll-mx-between-checkboxes-horizontal",
+  "scroll-my-0",
+  "scroll-my-10",
+  "scroll-my-20",
+  "scroll-my-25",
+  "scroll-my-30",
+  "scroll-my-40",
+  "scroll-my-50",
+  "scroll-my-60",
+  "scroll-my-70",
+  "scroll-my-80",
+  "scroll-my-90",
+  "scroll-my-100",
+  "scroll-my-xs",
+  "scroll-my-s",
+  "scroll-my-m",
+  "scroll-my-l",
+  "scroll-my-between-checkboxes-vertical",
+  "scroll-my-between-checkboxes-horizontal",
+  "-scroll-my-0",
+  "-scroll-my-10",
+  "-scroll-my-20",
+  "-scroll-my-25",
+  "-scroll-my-30",
+  "-scroll-my-40",
+  "-scroll-my-50",
+  "-scroll-my-60",
+  "-scroll-my-70",
+  "-scroll-my-80",
+  "-scroll-my-90",
+  "-scroll-my-100",
+  "-scroll-my-xs",
+  "-scroll-my-s",
+  "-scroll-my-m",
+  "-scroll-my-l",
+  "-scroll-my-between-checkboxes-vertical",
+  "-scroll-my-between-checkboxes-horizontal",
+  "scroll-mt-0",
+  "scroll-mt-10",
+  "scroll-mt-20",
+  "scroll-mt-25",
+  "scroll-mt-30",
+  "scroll-mt-40",
+  "scroll-mt-50",
+  "scroll-mt-60",
+  "scroll-mt-70",
+  "scroll-mt-80",
+  "scroll-mt-90",
+  "scroll-mt-100",
+  "scroll-mt-xs",
+  "scroll-mt-s",
+  "scroll-mt-m",
+  "scroll-mt-l",
+  "scroll-mt-between-checkboxes-vertical",
+  "scroll-mt-between-checkboxes-horizontal",
+  "-scroll-mt-0",
+  "-scroll-mt-10",
+  "-scroll-mt-20",
+  "-scroll-mt-25",
+  "-scroll-mt-30",
+  "-scroll-mt-40",
+  "-scroll-mt-50",
+  "-scroll-mt-60",
+  "-scroll-mt-70",
+  "-scroll-mt-80",
+  "-scroll-mt-90",
+  "-scroll-mt-100",
+  "-scroll-mt-xs",
+  "-scroll-mt-s",
+  "-scroll-mt-m",
+  "-scroll-mt-l",
+  "-scroll-mt-between-checkboxes-vertical",
+  "-scroll-mt-between-checkboxes-horizontal",
+  "scroll-mr-0",
+  "scroll-mr-10",
+  "scroll-mr-20",
+  "scroll-mr-25",
+  "scroll-mr-30",
+  "scroll-mr-40",
+  "scroll-mr-50",
+  "scroll-mr-60",
+  "scroll-mr-70",
+  "scroll-mr-80",
+  "scroll-mr-90",
+  "scroll-mr-100",
+  "scroll-mr-xs",
+  "scroll-mr-s",
+  "scroll-mr-m",
+  "scroll-mr-l",
+  "scroll-mr-between-checkboxes-vertical",
+  "scroll-mr-between-checkboxes-horizontal",
+  "-scroll-mr-0",
+  "-scroll-mr-10",
+  "-scroll-mr-20",
+  "-scroll-mr-25",
+  "-scroll-mr-30",
+  "-scroll-mr-40",
+  "-scroll-mr-50",
+  "-scroll-mr-60",
+  "-scroll-mr-70",
+  "-scroll-mr-80",
+  "-scroll-mr-90",
+  "-scroll-mr-100",
+  "-scroll-mr-xs",
+  "-scroll-mr-s",
+  "-scroll-mr-m",
+  "-scroll-mr-l",
+  "-scroll-mr-between-checkboxes-vertical",
+  "-scroll-mr-between-checkboxes-horizontal",
+  "scroll-mb-0",
+  "scroll-mb-10",
+  "scroll-mb-20",
+  "scroll-mb-25",
+  "scroll-mb-30",
+  "scroll-mb-40",
+  "scroll-mb-50",
+  "scroll-mb-60",
+  "scroll-mb-70",
+  "scroll-mb-80",
+  "scroll-mb-90",
+  "scroll-mb-100",
+  "scroll-mb-xs",
+  "scroll-mb-s",
+  "scroll-mb-m",
+  "scroll-mb-l",
+  "scroll-mb-between-checkboxes-vertical",
+  "scroll-mb-between-checkboxes-horizontal",
+  "-scroll-mb-0",
+  "-scroll-mb-10",
+  "-scroll-mb-20",
+  "-scroll-mb-25",
+  "-scroll-mb-30",
+  "-scroll-mb-40",
+  "-scroll-mb-50",
+  "-scroll-mb-60",
+  "-scroll-mb-70",
+  "-scroll-mb-80",
+  "-scroll-mb-90",
+  "-scroll-mb-100",
+  "-scroll-mb-xs",
+  "-scroll-mb-s",
+  "-scroll-mb-m",
+  "-scroll-mb-l",
+  "-scroll-mb-between-checkboxes-vertical",
+  "-scroll-mb-between-checkboxes-horizontal",
+  "scroll-ml-0",
+  "scroll-ml-10",
+  "scroll-ml-20",
+  "scroll-ml-25",
+  "scroll-ml-30",
+  "scroll-ml-40",
+  "scroll-ml-50",
+  "scroll-ml-60",
+  "scroll-ml-70",
+  "scroll-ml-80",
+  "scroll-ml-90",
+  "scroll-ml-100",
+  "scroll-ml-xs",
+  "scroll-ml-s",
+  "scroll-ml-m",
+  "scroll-ml-l",
+  "scroll-ml-between-checkboxes-vertical",
+  "scroll-ml-between-checkboxes-horizontal",
+  "-scroll-ml-0",
+  "-scroll-ml-10",
+  "-scroll-ml-20",
+  "-scroll-ml-25",
+  "-scroll-ml-30",
+  "-scroll-ml-40",
+  "-scroll-ml-50",
+  "-scroll-ml-60",
+  "-scroll-ml-70",
+  "-scroll-ml-80",
+  "-scroll-ml-90",
+  "-scroll-ml-100",
+  "-scroll-ml-xs",
+  "-scroll-ml-s",
+  "-scroll-ml-m",
+  "-scroll-ml-l",
+  "-scroll-ml-between-checkboxes-vertical",
+  "-scroll-ml-between-checkboxes-horizontal",
+  "scroll-p-0",
+  "scroll-p-10",
+  "scroll-p-20",
+  "scroll-p-25",
+  "scroll-p-30",
+  "scroll-p-40",
+  "scroll-p-50",
+  "scroll-p-60",
+  "scroll-p-70",
+  "scroll-p-80",
+  "scroll-p-90",
+  "scroll-p-100",
+  "scroll-p-xs",
+  "scroll-p-s",
+  "scroll-p-m",
+  "scroll-p-l",
+  "scroll-p-between-checkboxes-vertical",
+  "scroll-p-between-checkboxes-horizontal",
+  "scroll-px-0",
+  "scroll-px-10",
+  "scroll-px-20",
+  "scroll-px-25",
+  "scroll-px-30",
+  "scroll-px-40",
+  "scroll-px-50",
+  "scroll-px-60",
+  "scroll-px-70",
+  "scroll-px-80",
+  "scroll-px-90",
+  "scroll-px-100",
+  "scroll-px-xs",
+  "scroll-px-s",
+  "scroll-px-m",
+  "scroll-px-l",
+  "scroll-px-between-checkboxes-vertical",
+  "scroll-px-between-checkboxes-horizontal",
+  "scroll-py-0",
+  "scroll-py-10",
+  "scroll-py-20",
+  "scroll-py-25",
+  "scroll-py-30",
+  "scroll-py-40",
+  "scroll-py-50",
+  "scroll-py-60",
+  "scroll-py-70",
+  "scroll-py-80",
+  "scroll-py-90",
+  "scroll-py-100",
+  "scroll-py-xs",
+  "scroll-py-s",
+  "scroll-py-m",
+  "scroll-py-l",
+  "scroll-py-between-checkboxes-vertical",
+  "scroll-py-between-checkboxes-horizontal",
+  "scroll-pt-0",
+  "scroll-pt-10",
+  "scroll-pt-20",
+  "scroll-pt-25",
+  "scroll-pt-30",
+  "scroll-pt-40",
+  "scroll-pt-50",
+  "scroll-pt-60",
+  "scroll-pt-70",
+  "scroll-pt-80",
+  "scroll-pt-90",
+  "scroll-pt-100",
+  "scroll-pt-xs",
+  "scroll-pt-s",
+  "scroll-pt-m",
+  "scroll-pt-l",
+  "scroll-pt-between-checkboxes-vertical",
+  "scroll-pt-between-checkboxes-horizontal",
+  "scroll-pr-0",
+  "scroll-pr-10",
+  "scroll-pr-20",
+  "scroll-pr-25",
+  "scroll-pr-30",
+  "scroll-pr-40",
+  "scroll-pr-50",
+  "scroll-pr-60",
+  "scroll-pr-70",
+  "scroll-pr-80",
+  "scroll-pr-90",
+  "scroll-pr-100",
+  "scroll-pr-xs",
+  "scroll-pr-s",
+  "scroll-pr-m",
+  "scroll-pr-l",
+  "scroll-pr-between-checkboxes-vertical",
+  "scroll-pr-between-checkboxes-horizontal",
+  "scroll-pb-0",
+  "scroll-pb-10",
+  "scroll-pb-20",
+  "scroll-pb-25",
+  "scroll-pb-30",
+  "scroll-pb-40",
+  "scroll-pb-50",
+  "scroll-pb-60",
+  "scroll-pb-70",
+  "scroll-pb-80",
+  "scroll-pb-90",
+  "scroll-pb-100",
+  "scroll-pb-xs",
+  "scroll-pb-s",
+  "scroll-pb-m",
+  "scroll-pb-l",
+  "scroll-pb-between-checkboxes-vertical",
+  "scroll-pb-between-checkboxes-horizontal",
+  "scroll-pl-0",
+  "scroll-pl-10",
+  "scroll-pl-20",
+  "scroll-pl-25",
+  "scroll-pl-30",
+  "scroll-pl-40",
+  "scroll-pl-50",
+  "scroll-pl-60",
+  "scroll-pl-70",
+  "scroll-pl-80",
+  "scroll-pl-90",
+  "scroll-pl-100",
+  "scroll-pl-xs",
+  "scroll-pl-s",
+  "scroll-pl-m",
+  "scroll-pl-l",
+  "scroll-pl-between-checkboxes-vertical",
+  "scroll-pl-between-checkboxes-horizontal",
+  "list-inside",
+  "list-outside",
+  "list-none",
+  "list-disc",
+  "list-decimal",
+  "appearance-none",
+  "columns-1",
+  "columns-2",
+  "columns-3",
+  "columns-4",
+  "columns-5",
+  "columns-6",
+  "columns-7",
+  "columns-8",
+  "columns-9",
+  "columns-10",
+  "columns-11",
+  "columns-12",
+  "columns-auto",
+  "columns-3xs",
+  "columns-2xs",
+  "columns-xs",
+  "columns-sm",
+  "columns-md",
+  "columns-lg",
+  "columns-xl",
+  "columns-2xl",
+  "columns-3xl",
+  "columns-4xl",
+  "columns-5xl",
+  "columns-6xl",
+  "columns-7xl",
+  "break-before-auto",
+  "break-before-avoid",
+  "break-before-all",
+  "break-before-avoid-page",
+  "break-before-page",
+  "break-before-left",
+  "break-before-right",
+  "break-before-column",
+  "break-inside-auto",
+  "break-inside-avoid",
+  "break-inside-avoid-page",
+  "break-inside-avoid-column",
+  "break-after-auto",
+  "break-after-avoid",
+  "break-after-all",
+  "break-after-avoid-page",
+  "break-after-page",
+  "break-after-left",
+  "break-after-right",
+  "break-after-column",
+  "auto-cols-auto",
+  "auto-cols-min",
+  "auto-cols-max",
+  "auto-cols-fr",
+  "grid-flow-row",
+  "grid-flow-col",
+  "grid-flow-row-dense",
+  "grid-flow-col-dense",
+  "auto-rows-auto",
+  "auto-rows-min",
+  "auto-rows-max",
+  "auto-rows-fr",
+  "grid-cols-1",
+  "grid-cols-2",
+  "grid-cols-3",
+  "grid-cols-4",
+  "grid-cols-5",
+  "grid-cols-6",
+  "grid-cols-7",
+  "grid-cols-8",
+  "grid-cols-9",
+  "grid-cols-10",
+  "grid-cols-11",
+  "grid-cols-12",
+  "grid-cols-none",
+  "grid-rows-1",
+  "grid-rows-2",
+  "grid-rows-3",
+  "grid-rows-4",
+  "grid-rows-5",
+  "grid-rows-6",
+  "grid-rows-none",
+  "flex-row",
+  "flex-row-reverse",
+  "flex-col",
+  "flex-col-reverse",
+  "flex-wrap",
+  "flex-wrap-reverse",
+  "flex-nowrap",
+  "place-content-center",
+  "place-content-start",
+  "place-content-end",
+  "place-content-between",
+  "place-content-around",
+  "place-content-evenly",
+  "place-content-stretch",
+  "place-items-start",
+  "place-items-end",
+  "place-items-center",
+  "place-items-stretch",
+  "content-center",
+  "content-start",
+  "content-end",
+  "content-between",
+  "content-around",
+  "content-evenly",
+  "items-start",
+  "items-end",
+  "items-center",
+  "items-baseline",
+  "items-stretch",
+  "justify-start",
+  "justify-end",
+  "justify-center",
+  "justify-between",
+  "justify-around",
+  "justify-evenly",
+  "justify-items-start",
+  "justify-items-end",
+  "justify-items-center",
+  "justify-items-stretch",
+  "gap-0",
+  "gap-10",
+  "gap-20",
+  "gap-25",
+  "gap-30",
+  "gap-40",
+  "gap-50",
+  "gap-60",
+  "gap-70",
+  "gap-80",
+  "gap-90",
+  "gap-100",
+  "gap-xs",
+  "gap-s",
+  "gap-m",
+  "gap-l",
+  "gap-between-checkboxes-vertical",
+  "gap-between-checkboxes-horizontal",
+  "gap-x-0",
+  "gap-x-10",
+  "gap-x-20",
+  "gap-x-25",
+  "gap-x-30",
+  "gap-x-40",
+  "gap-x-50",
+  "gap-x-60",
+  "gap-x-70",
+  "gap-x-80",
+  "gap-x-90",
+  "gap-x-100",
+  "gap-x-xs",
+  "gap-x-s",
+  "gap-x-m",
+  "gap-x-l",
+  "gap-x-between-checkboxes-vertical",
+  "gap-x-between-checkboxes-horizontal",
+  "gap-y-0",
+  "gap-y-10",
+  "gap-y-20",
+  "gap-y-25",
+  "gap-y-30",
+  "gap-y-40",
+  "gap-y-50",
+  "gap-y-60",
+  "gap-y-70",
+  "gap-y-80",
+  "gap-y-90",
+  "gap-y-100",
+  "gap-y-xs",
+  "gap-y-s",
+  "gap-y-m",
+  "gap-y-l",
+  "gap-y-between-checkboxes-vertical",
+  "gap-y-between-checkboxes-horizontal",
+  "space-x-0",
+  "space-x-10",
+  "space-x-20",
+  "space-x-25",
+  "space-x-30",
+  "space-x-40",
+  "space-x-50",
+  "space-x-60",
+  "space-x-70",
+  "space-x-80",
+  "space-x-90",
+  "space-x-100",
+  "space-x-xs",
+  "space-x-s",
+  "space-x-m",
+  "space-x-l",
+  "space-x-between-checkboxes-vertical",
+  "space-x-between-checkboxes-horizontal",
+  "-space-x-0",
+  "-space-x-10",
+  "-space-x-20",
+  "-space-x-25",
+  "-space-x-30",
+  "-space-x-40",
+  "-space-x-50",
+  "-space-x-60",
+  "-space-x-70",
+  "-space-x-80",
+  "-space-x-90",
+  "-space-x-100",
+  "-space-x-xs",
+  "-space-x-s",
+  "-space-x-m",
+  "-space-x-l",
+  "-space-x-between-checkboxes-vertical",
+  "-space-x-between-checkboxes-horizontal",
+  "space-y-0",
+  "space-y-10",
+  "space-y-20",
+  "space-y-25",
+  "space-y-30",
+  "space-y-40",
+  "space-y-50",
+  "space-y-60",
+  "space-y-70",
+  "space-y-80",
+  "space-y-90",
+  "space-y-100",
+  "space-y-xs",
+  "space-y-s",
+  "space-y-m",
+  "space-y-l",
+  "space-y-between-checkboxes-vertical",
+  "space-y-between-checkboxes-horizontal",
+  "-space-y-0",
+  "-space-y-10",
+  "-space-y-20",
+  "-space-y-25",
+  "-space-y-30",
+  "-space-y-40",
+  "-space-y-50",
+  "-space-y-60",
+  "-space-y-70",
+  "-space-y-80",
+  "-space-y-90",
+  "-space-y-100",
+  "-space-y-xs",
+  "-space-y-s",
+  "-space-y-m",
+  "-space-y-l",
+  "-space-y-between-checkboxes-vertical",
+  "-space-y-between-checkboxes-horizontal",
+  "space-y-reverse",
+  "space-x-reverse",
+  "divide-x-m",
+  "divide-x-l",
+  "divide-x-focus-1",
+  "divide-x-focus-2",
+  "divide-y-m",
+  "divide-y-l",
+  "divide-y-focus-1",
+  "divide-y-focus-2",
+  "divide-y-reverse",
+  "divide-x-reverse",
+  "divide-solid",
+  "divide-dashed",
+  "divide-dotted",
+  "divide-double",
+  "divide-none",
+  "divide-background-secondary",
+  "divide-background-tertiary",
+  "divide-background",
+  "divide-container-hover",
+  "divide-container-press",
+  "divide-container-default-a",
+  "divide-container-hover-a",
+  "divide-container-press-a",
+  "divide-container-disable",
+  "divide-container-secondary-hover",
+  "divide-container-secondary-press",
+  "divide-container-secondary-default-a",
+  "divide-container-secondary-hover-a",
+  "divide-container-secondary-press-a",
+  "divide-container-secondary",
+  "divide-container-tertiary-hover",
+  "divide-container-tertiary-press",
+  "divide-container-tertiary-default-a",
+  "divide-container-tertiary-hover-a",
+  "divide-container-tertiary-pressA",
+  "divide-container-tertiary",
+  "divide-container-primary-hover",
+  "divide-container-primary-press",
+  "divide-container-primary",
+  "divide-container-on-img-hover",
+  "divide-container-on-img-press",
+  "divide-container-on-img",
+  "divide-container-negative-hover",
+  "divide-container-negative-press",
+  "divide-container-negative",
+  "divide-container-positive-hover",
+  "divide-container-positive-press",
+  "divide-container-positive",
+  "divide-container-notice-hover",
+  "divide-container-notice-press",
+  "divide-container-notice",
+  "divide-container-neutral-hover",
+  "divide-container-neutral-press",
+  "divide-container-neutral",
+  "divide-container-discovery-hover",
+  "divide-container-discovery-press",
+  "divide-container-discovery",
+  "divide-container-hud-hover",
+  "divide-container-hud-press",
+  "divide-container-hud",
+  "divide-container-skeleton",
+  "divide-container-subtle",
+  "divide-container",
+  "divide-icon-secondary-hover",
+  "divide-icon-secondary-press",
+  "divide-icon-secondary",
+  "divide-icon-tertiary-hover",
+  "divide-icon-tertiary-press",
+  "divide-icon-tertiary",
+  "divide-icon-negative-hover",
+  "divide-icon-negative-press",
+  "divide-icon-negative",
+  "divide-icon-positive-hover",
+  "divide-icon-positive-press",
+  "divide-icon-positive",
+  "divide-icon-notice-hover",
+  "divide-icon-notice-press",
+  "divide-icon-notice",
+  "divide-icon-hover",
+  "divide-icon-press",
+  "divide-icon-disable",
+  "divide-icon-on-primary-hover",
+  "divide-icon-on-primary-press",
+  "divide-icon-on-primary",
+  "divide-icon-on-on-img-hover",
+  "divide-icon-on-on-img-press",
+  "divide-icon-on-on-img",
+  "divide-icon-on-neutral-hover",
+  "divide-icon-on-neutral-press",
+  "divide-icon-on-neutral",
+  "divide-icon-on-negative-hover",
+  "divide-icon-on-negative-press",
+  "divide-icon-on-negative",
+  "divide-icon-on-positive-hover",
+  "divide-icon-on-positive-press",
+  "divide-icon-on-positive",
+  "divide-icon-on-notice-hover",
+  "divide-icon-on-notice-press",
+  "divide-icon-on-notice",
+  "divide-icon",
+  "divide-text-hover",
+  "divide-text-press",
+  "divide-text-disable",
+  "divide-text-secondary-hover",
+  "divide-text-secondary-press",
+  "divide-text-secondary",
+  "divide-text-tertiary-hover",
+  "divide-text-tertiary-press",
+  "divide-text-tertiary",
+  "divide-text-placeholder-hover",
+  "divide-text-placeholder-press",
+  "divide-text-placeholder",
+  "divide-text-info-hover",
+  "divide-text-info-press",
+  "divide-text-info",
+  "divide-text-visited-hover",
+  "divide-text-visited-press",
+  "divide-text-visited",
+  "divide-text-negative-hover",
+  "divide-text-negative-press",
+  "divide-text-negative",
+  "divide-text-notice-hover",
+  "divide-text-notice-press",
+  "divide-text-notice",
+  "divide-text-positive-hover",
+  "divide-text-positive-press",
+  "divide-text-positive",
+  "divide-text-on-primary-hover",
+  "divide-text-on-primary-press",
+  "divide-text-on-primary",
+  "divide-text-on-on-img-hover",
+  "divide-text-on-on-img-press",
+  "divide-text-on-on-img",
+  "divide-text-on-negative-hover",
+  "divide-text-on-negative-press",
+  "divide-text-on-negative",
+  "divide-text-on-positive-hover",
+  "divide-text-on-positive-press",
+  "divide-text-on-positive",
+  "divide-text-on-notice-hover",
+  "divide-text-on-notice-press",
+  "divide-text-on-notice",
+  "divide-text-on-discovery-hover",
+  "divide-text-on-discovery-press",
+  "divide-text-on-discovery",
+  "divide-text-on-hud-hover",
+  "divide-text-on-hud-press",
+  "divide-text-on-hud",
+  "divide-text-brand-premium-hover",
+  "divide-text-brand-premium-press",
+  "divide-text-brand-premium",
+  "divide-text",
+  "divide-border-hover",
+  "divide-border-press",
+  "divide-border-secondary",
+  "divide-border-focus-1",
+  "divide-border-focus-2",
+  "divide-border-focus-legacy",
+  "divide-border-disable",
+  "divide-border-selected",
+  "divide-border-negative",
+  "divide-border-hud",
+  "divide-border",
+  "divide-opacity-0",
+  "divide-opacity-5",
+  "divide-opacity-10",
+  "divide-opacity-20",
+  "divide-opacity-25",
+  "divide-opacity-30",
+  "divide-opacity-40",
+  "divide-opacity-50",
+  "divide-opacity-60",
+  "divide-opacity-70",
+  "divide-opacity-75",
+  "divide-opacity-80",
+  "divide-opacity-90",
+  "divide-opacity-95",
+  "divide-opacity-100",
+  "place-self-auto",
+  "place-self-start",
+  "place-self-end",
+  "place-self-center",
+  "place-self-stretch",
+  "self-auto",
+  "self-start",
+  "self-end",
+  "self-center",
+  "self-stretch",
+  "self-baseline",
+  "justify-self-auto",
+  "justify-self-start",
+  "justify-self-end",
+  "justify-self-center",
+  "justify-self-stretch",
+  "overflow-auto",
+  "overflow-hidden",
+  "overflow-clip",
+  "overflow-visible",
+  "overflow-scroll",
+  "overflow-x-auto",
+  "overflow-y-auto",
+  "overflow-x-hidden",
+  "overflow-y-hidden",
+  "overflow-x-clip",
+  "overflow-y-clip",
+  "overflow-x-visible",
+  "overflow-y-visible",
+  "overflow-x-scroll",
+  "overflow-y-scroll",
+  "overscroll-auto",
+  "overscroll-contain",
+  "overscroll-none",
+  "overscroll-y-auto",
+  "overscroll-y-contain",
+  "overscroll-y-none",
+  "overscroll-x-auto",
+  "overscroll-x-contain",
+  "overscroll-x-none",
+  "scroll-auto",
+  "scroll-smooth",
+  "truncate",
+  "overflow-ellipsis",
+  "text-ellipsis",
+  "text-clip",
+  "whitespace-normal",
+  "whitespace-nowrap",
+  "whitespace-pre",
+  "whitespace-pre-line",
+  "whitespace-pre-wrap",
+  "break-normal",
+  "break-words",
+  "break-all",
+  "rounded-0",
+  "rounded-xs",
+  "rounded-s",
+  "rounded-m",
+  "rounded-l",
+  "rounded-xl",
+  "rounded-xxl",
+  "rounded-oval",
+  "rounded-t-0",
+  "rounded-t-xs",
+  "rounded-t-s",
+  "rounded-t-m",
+  "rounded-t-l",
+  "rounded-t-xl",
+  "rounded-t-xxl",
+  "rounded-t-oval",
+  "rounded-r-0",
+  "rounded-r-xs",
+  "rounded-r-s",
+  "rounded-r-m",
+  "rounded-r-l",
+  "rounded-r-xl",
+  "rounded-r-xxl",
+  "rounded-r-oval",
+  "rounded-b-0",
+  "rounded-b-xs",
+  "rounded-b-s",
+  "rounded-b-m",
+  "rounded-b-l",
+  "rounded-b-xl",
+  "rounded-b-xxl",
+  "rounded-b-oval",
+  "rounded-l-0",
+  "rounded-l-xs",
+  "rounded-l-s",
+  "rounded-l-m",
+  "rounded-l-l",
+  "rounded-l-xl",
+  "rounded-l-xxl",
+  "rounded-l-oval",
+  "rounded-tl-0",
+  "rounded-tl-xs",
+  "rounded-tl-s",
+  "rounded-tl-m",
+  "rounded-tl-l",
+  "rounded-tl-xl",
+  "rounded-tl-xxl",
+  "rounded-tl-oval",
+  "rounded-tr-0",
+  "rounded-tr-xs",
+  "rounded-tr-s",
+  "rounded-tr-m",
+  "rounded-tr-l",
+  "rounded-tr-xl",
+  "rounded-tr-xxl",
+  "rounded-tr-oval",
+  "rounded-br-0",
+  "rounded-br-xs",
+  "rounded-br-s",
+  "rounded-br-m",
+  "rounded-br-l",
+  "rounded-br-xl",
+  "rounded-br-xxl",
+  "rounded-br-oval",
+  "rounded-bl-0",
+  "rounded-bl-xs",
+  "rounded-bl-s",
+  "rounded-bl-m",
+  "rounded-bl-l",
+  "rounded-bl-xl",
+  "rounded-bl-xxl",
+  "rounded-bl-oval",
+  "border-m",
+  "border-l",
+  "border-focus-1",
+  "border-focus-2",
+  "border-x-m",
+  "border-x-l",
+  "border-x-focus-1",
+  "border-x-focus-2",
+  "border-y-m",
+  "border-y-l",
+  "border-y-focus-1",
+  "border-y-focus-2",
+  "border-t-m",
+  "border-t-l",
+  "border-t-focus-1",
+  "border-t-focus-2",
+  "border-r-m",
+  "border-r-l",
+  "border-r-focus-1",
+  "border-r-focus-2",
+  "border-b-m",
+  "border-b-l",
+  "border-b-focus-1",
+  "border-b-focus-2",
+  "border-l-m",
+  "border-l-l",
+  "border-l-focus-1",
+  "border-l-focus-2",
+  "border-solid",
+  "border-dashed",
+  "border-dotted",
+  "border-double",
+  "border-hidden",
+  "border-none",
+  "border-background-secondary",
+  "border-background-tertiary",
+  "border-background",
+  "border-container-hover",
+  "border-container-press",
+  "border-container-default-a",
+  "border-container-hover-a",
+  "border-container-press-a",
+  "border-container-disable",
+  "border-container-secondary-hover",
+  "border-container-secondary-press",
+  "border-container-secondary-default-a",
+  "border-container-secondary-hover-a",
+  "border-container-secondary-press-a",
+  "border-container-secondary",
+  "border-container-tertiary-hover",
+  "border-container-tertiary-press",
+  "border-container-tertiary-default-a",
+  "border-container-tertiary-hover-a",
+  "border-container-tertiary-pressA",
+  "border-container-tertiary",
+  "border-container-primary-hover",
+  "border-container-primary-press",
+  "border-container-primary",
+  "border-container-on-img-hover",
+  "border-container-on-img-press",
+  "border-container-on-img",
+  "border-container-negative-hover",
+  "border-container-negative-press",
+  "border-container-negative",
+  "border-container-positive-hover",
+  "border-container-positive-press",
+  "border-container-positive",
+  "border-container-notice-hover",
+  "border-container-notice-press",
+  "border-container-notice",
+  "border-container-neutral-hover",
+  "border-container-neutral-press",
+  "border-container-neutral",
+  "border-container-discovery-hover",
+  "border-container-discovery-press",
+  "border-container-discovery",
+  "border-container-hud-hover",
+  "border-container-hud-press",
+  "border-container-hud",
+  "border-container-skeleton",
+  "border-container-subtle",
+  "border-container",
+  "border-icon-secondary-hover",
+  "border-icon-secondary-press",
+  "border-icon-secondary",
+  "border-icon-tertiary-hover",
+  "border-icon-tertiary-press",
+  "border-icon-tertiary",
+  "border-icon-negative-hover",
+  "border-icon-negative-press",
+  "border-icon-negative",
+  "border-icon-positive-hover",
+  "border-icon-positive-press",
+  "border-icon-positive",
+  "border-icon-notice-hover",
+  "border-icon-notice-press",
+  "border-icon-notice",
+  "border-icon-hover",
+  "border-icon-press",
+  "border-icon-disable",
+  "border-icon-on-primary-hover",
+  "border-icon-on-primary-press",
+  "border-icon-on-primary",
+  "border-icon-on-on-img-hover",
+  "border-icon-on-on-img-press",
+  "border-icon-on-on-img",
+  "border-icon-on-neutral-hover",
+  "border-icon-on-neutral-press",
+  "border-icon-on-neutral",
+  "border-icon-on-negative-hover",
+  "border-icon-on-negative-press",
+  "border-icon-on-negative",
+  "border-icon-on-positive-hover",
+  "border-icon-on-positive-press",
+  "border-icon-on-positive",
+  "border-icon-on-notice-hover",
+  "border-icon-on-notice-press",
+  "border-icon-on-notice",
+  "border-icon",
+  "border-text-hover",
+  "border-text-press",
+  "border-text-disable",
+  "border-text-secondary-hover",
+  "border-text-secondary-press",
+  "border-text-secondary",
+  "border-text-tertiary-hover",
+  "border-text-tertiary-press",
+  "border-text-tertiary",
+  "border-text-placeholder-hover",
+  "border-text-placeholder-press",
+  "border-text-placeholder",
+  "border-text-info-hover",
+  "border-text-info-press",
+  "border-text-info",
+  "border-text-visited-hover",
+  "border-text-visited-press",
+  "border-text-visited",
+  "border-text-negative-hover",
+  "border-text-negative-press",
+  "border-text-negative",
+  "border-text-notice-hover",
+  "border-text-notice-press",
+  "border-text-notice",
+  "border-text-positive-hover",
+  "border-text-positive-press",
+  "border-text-positive",
+  "border-text-on-primary-hover",
+  "border-text-on-primary-press",
+  "border-text-on-primary",
+  "border-text-on-on-img-hover",
+  "border-text-on-on-img-press",
+  "border-text-on-on-img",
+  "border-text-on-negative-hover",
+  "border-text-on-negative-press",
+  "border-text-on-negative",
+  "border-text-on-positive-hover",
+  "border-text-on-positive-press",
+  "border-text-on-positive",
+  "border-text-on-notice-hover",
+  "border-text-on-notice-press",
+  "border-text-on-notice",
+  "border-text-on-discovery-hover",
+  "border-text-on-discovery-press",
+  "border-text-on-discovery",
+  "border-text-on-hud-hover",
+  "border-text-on-hud-press",
+  "border-text-on-hud",
+  "border-text-brand-premium-hover",
+  "border-text-brand-premium-press",
+  "border-text-brand-premium",
+  "border-text",
+  "border-border-hover",
+  "border-border-press",
+  "border-border-secondary",
+  "border-border-focus-1",
+  "border-border-focus-2",
+  "border-border-focus-legacy",
+  "border-border-disable",
+  "border-border-selected",
+  "border-border-negative",
+  "border-border-hud",
+  "border-border",
+  "border-x-background-secondary",
+  "border-x-background-tertiary",
+  "border-x-background",
+  "border-x-container-hover",
+  "border-x-container-press",
+  "border-x-container-default-a",
+  "border-x-container-hover-a",
+  "border-x-container-press-a",
+  "border-x-container-disable",
+  "border-x-container-secondary-hover",
+  "border-x-container-secondary-press",
+  "border-x-container-secondary-default-a",
+  "border-x-container-secondary-hover-a",
+  "border-x-container-secondary-press-a",
+  "border-x-container-secondary",
+  "border-x-container-tertiary-hover",
+  "border-x-container-tertiary-press",
+  "border-x-container-tertiary-default-a",
+  "border-x-container-tertiary-hover-a",
+  "border-x-container-tertiary-pressA",
+  "border-x-container-tertiary",
+  "border-x-container-primary-hover",
+  "border-x-container-primary-press",
+  "border-x-container-primary",
+  "border-x-container-on-img-hover",
+  "border-x-container-on-img-press",
+  "border-x-container-on-img",
+  "border-x-container-negative-hover",
+  "border-x-container-negative-press",
+  "border-x-container-negative",
+  "border-x-container-positive-hover",
+  "border-x-container-positive-press",
+  "border-x-container-positive",
+  "border-x-container-notice-hover",
+  "border-x-container-notice-press",
+  "border-x-container-notice",
+  "border-x-container-neutral-hover",
+  "border-x-container-neutral-press",
+  "border-x-container-neutral",
+  "border-x-container-discovery-hover",
+  "border-x-container-discovery-press",
+  "border-x-container-discovery",
+  "border-x-container-hud-hover",
+  "border-x-container-hud-press",
+  "border-x-container-hud",
+  "border-x-container-skeleton",
+  "border-x-container-subtle",
+  "border-x-container",
+  "border-x-icon-secondary-hover",
+  "border-x-icon-secondary-press",
+  "border-x-icon-secondary",
+  "border-x-icon-tertiary-hover",
+  "border-x-icon-tertiary-press",
+  "border-x-icon-tertiary",
+  "border-x-icon-negative-hover",
+  "border-x-icon-negative-press",
+  "border-x-icon-negative",
+  "border-x-icon-positive-hover",
+  "border-x-icon-positive-press",
+  "border-x-icon-positive",
+  "border-x-icon-notice-hover",
+  "border-x-icon-notice-press",
+  "border-x-icon-notice",
+  "border-x-icon-hover",
+  "border-x-icon-press",
+  "border-x-icon-disable",
+  "border-x-icon-on-primary-hover",
+  "border-x-icon-on-primary-press",
+  "border-x-icon-on-primary",
+  "border-x-icon-on-on-img-hover",
+  "border-x-icon-on-on-img-press",
+  "border-x-icon-on-on-img",
+  "border-x-icon-on-neutral-hover",
+  "border-x-icon-on-neutral-press",
+  "border-x-icon-on-neutral",
+  "border-x-icon-on-negative-hover",
+  "border-x-icon-on-negative-press",
+  "border-x-icon-on-negative",
+  "border-x-icon-on-positive-hover",
+  "border-x-icon-on-positive-press",
+  "border-x-icon-on-positive",
+  "border-x-icon-on-notice-hover",
+  "border-x-icon-on-notice-press",
+  "border-x-icon-on-notice",
+  "border-x-icon",
+  "border-x-text-hover",
+  "border-x-text-press",
+  "border-x-text-disable",
+  "border-x-text-secondary-hover",
+  "border-x-text-secondary-press",
+  "border-x-text-secondary",
+  "border-x-text-tertiary-hover",
+  "border-x-text-tertiary-press",
+  "border-x-text-tertiary",
+  "border-x-text-placeholder-hover",
+  "border-x-text-placeholder-press",
+  "border-x-text-placeholder",
+  "border-x-text-info-hover",
+  "border-x-text-info-press",
+  "border-x-text-info",
+  "border-x-text-visited-hover",
+  "border-x-text-visited-press",
+  "border-x-text-visited",
+  "border-x-text-negative-hover",
+  "border-x-text-negative-press",
+  "border-x-text-negative",
+  "border-x-text-notice-hover",
+  "border-x-text-notice-press",
+  "border-x-text-notice",
+  "border-x-text-positive-hover",
+  "border-x-text-positive-press",
+  "border-x-text-positive",
+  "border-x-text-on-primary-hover",
+  "border-x-text-on-primary-press",
+  "border-x-text-on-primary",
+  "border-x-text-on-on-img-hover",
+  "border-x-text-on-on-img-press",
+  "border-x-text-on-on-img",
+  "border-x-text-on-negative-hover",
+  "border-x-text-on-negative-press",
+  "border-x-text-on-negative",
+  "border-x-text-on-positive-hover",
+  "border-x-text-on-positive-press",
+  "border-x-text-on-positive",
+  "border-x-text-on-notice-hover",
+  "border-x-text-on-notice-press",
+  "border-x-text-on-notice",
+  "border-x-text-on-discovery-hover",
+  "border-x-text-on-discovery-press",
+  "border-x-text-on-discovery",
+  "border-x-text-on-hud-hover",
+  "border-x-text-on-hud-press",
+  "border-x-text-on-hud",
+  "border-x-text-brand-premium-hover",
+  "border-x-text-brand-premium-press",
+  "border-x-text-brand-premium",
+  "border-x-text",
+  "border-x-border-hover",
+  "border-x-border-press",
+  "border-x-border-secondary",
+  "border-x-border-focus-1",
+  "border-x-border-focus-2",
+  "border-x-border-focus-legacy",
+  "border-x-border-disable",
+  "border-x-border-selected",
+  "border-x-border-negative",
+  "border-x-border-hud",
+  "border-x-border",
+  "border-y-background-secondary",
+  "border-y-background-tertiary",
+  "border-y-background",
+  "border-y-container-hover",
+  "border-y-container-press",
+  "border-y-container-default-a",
+  "border-y-container-hover-a",
+  "border-y-container-press-a",
+  "border-y-container-disable",
+  "border-y-container-secondary-hover",
+  "border-y-container-secondary-press",
+  "border-y-container-secondary-default-a",
+  "border-y-container-secondary-hover-a",
+  "border-y-container-secondary-press-a",
+  "border-y-container-secondary",
+  "border-y-container-tertiary-hover",
+  "border-y-container-tertiary-press",
+  "border-y-container-tertiary-default-a",
+  "border-y-container-tertiary-hover-a",
+  "border-y-container-tertiary-pressA",
+  "border-y-container-tertiary",
+  "border-y-container-primary-hover",
+  "border-y-container-primary-press",
+  "border-y-container-primary",
+  "border-y-container-on-img-hover",
+  "border-y-container-on-img-press",
+  "border-y-container-on-img",
+  "border-y-container-negative-hover",
+  "border-y-container-negative-press",
+  "border-y-container-negative",
+  "border-y-container-positive-hover",
+  "border-y-container-positive-press",
+  "border-y-container-positive",
+  "border-y-container-notice-hover",
+  "border-y-container-notice-press",
+  "border-y-container-notice",
+  "border-y-container-neutral-hover",
+  "border-y-container-neutral-press",
+  "border-y-container-neutral",
+  "border-y-container-discovery-hover",
+  "border-y-container-discovery-press",
+  "border-y-container-discovery",
+  "border-y-container-hud-hover",
+  "border-y-container-hud-press",
+  "border-y-container-hud",
+  "border-y-container-skeleton",
+  "border-y-container-subtle",
+  "border-y-container",
+  "border-y-icon-secondary-hover",
+  "border-y-icon-secondary-press",
+  "border-y-icon-secondary",
+  "border-y-icon-tertiary-hover",
+  "border-y-icon-tertiary-press",
+  "border-y-icon-tertiary",
+  "border-y-icon-negative-hover",
+  "border-y-icon-negative-press",
+  "border-y-icon-negative",
+  "border-y-icon-positive-hover",
+  "border-y-icon-positive-press",
+  "border-y-icon-positive",
+  "border-y-icon-notice-hover",
+  "border-y-icon-notice-press",
+  "border-y-icon-notice",
+  "border-y-icon-hover",
+  "border-y-icon-press",
+  "border-y-icon-disable",
+  "border-y-icon-on-primary-hover",
+  "border-y-icon-on-primary-press",
+  "border-y-icon-on-primary",
+  "border-y-icon-on-on-img-hover",
+  "border-y-icon-on-on-img-press",
+  "border-y-icon-on-on-img",
+  "border-y-icon-on-neutral-hover",
+  "border-y-icon-on-neutral-press",
+  "border-y-icon-on-neutral",
+  "border-y-icon-on-negative-hover",
+  "border-y-icon-on-negative-press",
+  "border-y-icon-on-negative",
+  "border-y-icon-on-positive-hover",
+  "border-y-icon-on-positive-press",
+  "border-y-icon-on-positive",
+  "border-y-icon-on-notice-hover",
+  "border-y-icon-on-notice-press",
+  "border-y-icon-on-notice",
+  "border-y-icon",
+  "border-y-text-hover",
+  "border-y-text-press",
+  "border-y-text-disable",
+  "border-y-text-secondary-hover",
+  "border-y-text-secondary-press",
+  "border-y-text-secondary",
+  "border-y-text-tertiary-hover",
+  "border-y-text-tertiary-press",
+  "border-y-text-tertiary",
+  "border-y-text-placeholder-hover",
+  "border-y-text-placeholder-press",
+  "border-y-text-placeholder",
+  "border-y-text-info-hover",
+  "border-y-text-info-press",
+  "border-y-text-info",
+  "border-y-text-visited-hover",
+  "border-y-text-visited-press",
+  "border-y-text-visited",
+  "border-y-text-negative-hover",
+  "border-y-text-negative-press",
+  "border-y-text-negative",
+  "border-y-text-notice-hover",
+  "border-y-text-notice-press",
+  "border-y-text-notice",
+  "border-y-text-positive-hover",
+  "border-y-text-positive-press",
+  "border-y-text-positive",
+  "border-y-text-on-primary-hover",
+  "border-y-text-on-primary-press",
+  "border-y-text-on-primary",
+  "border-y-text-on-on-img-hover",
+  "border-y-text-on-on-img-press",
+  "border-y-text-on-on-img",
+  "border-y-text-on-negative-hover",
+  "border-y-text-on-negative-press",
+  "border-y-text-on-negative",
+  "border-y-text-on-positive-hover",
+  "border-y-text-on-positive-press",
+  "border-y-text-on-positive",
+  "border-y-text-on-notice-hover",
+  "border-y-text-on-notice-press",
+  "border-y-text-on-notice",
+  "border-y-text-on-discovery-hover",
+  "border-y-text-on-discovery-press",
+  "border-y-text-on-discovery",
+  "border-y-text-on-hud-hover",
+  "border-y-text-on-hud-press",
+  "border-y-text-on-hud",
+  "border-y-text-brand-premium-hover",
+  "border-y-text-brand-premium-press",
+  "border-y-text-brand-premium",
+  "border-y-text",
+  "border-y-border-hover",
+  "border-y-border-press",
+  "border-y-border-secondary",
+  "border-y-border-focus-1",
+  "border-y-border-focus-2",
+  "border-y-border-focus-legacy",
+  "border-y-border-disable",
+  "border-y-border-selected",
+  "border-y-border-negative",
+  "border-y-border-hud",
+  "border-y-border",
+  "border-t-background-secondary",
+  "border-t-background-tertiary",
+  "border-t-background",
+  "border-t-container-hover",
+  "border-t-container-press",
+  "border-t-container-default-a",
+  "border-t-container-hover-a",
+  "border-t-container-press-a",
+  "border-t-container-disable",
+  "border-t-container-secondary-hover",
+  "border-t-container-secondary-press",
+  "border-t-container-secondary-default-a",
+  "border-t-container-secondary-hover-a",
+  "border-t-container-secondary-press-a",
+  "border-t-container-secondary",
+  "border-t-container-tertiary-hover",
+  "border-t-container-tertiary-press",
+  "border-t-container-tertiary-default-a",
+  "border-t-container-tertiary-hover-a",
+  "border-t-container-tertiary-pressA",
+  "border-t-container-tertiary",
+  "border-t-container-primary-hover",
+  "border-t-container-primary-press",
+  "border-t-container-primary",
+  "border-t-container-on-img-hover",
+  "border-t-container-on-img-press",
+  "border-t-container-on-img",
+  "border-t-container-negative-hover",
+  "border-t-container-negative-press",
+  "border-t-container-negative",
+  "border-t-container-positive-hover",
+  "border-t-container-positive-press",
+  "border-t-container-positive",
+  "border-t-container-notice-hover",
+  "border-t-container-notice-press",
+  "border-t-container-notice",
+  "border-t-container-neutral-hover",
+  "border-t-container-neutral-press",
+  "border-t-container-neutral",
+  "border-t-container-discovery-hover",
+  "border-t-container-discovery-press",
+  "border-t-container-discovery",
+  "border-t-container-hud-hover",
+  "border-t-container-hud-press",
+  "border-t-container-hud",
+  "border-t-container-skeleton",
+  "border-t-container-subtle",
+  "border-t-container",
+  "border-t-icon-secondary-hover",
+  "border-t-icon-secondary-press",
+  "border-t-icon-secondary",
+  "border-t-icon-tertiary-hover",
+  "border-t-icon-tertiary-press",
+  "border-t-icon-tertiary",
+  "border-t-icon-negative-hover",
+  "border-t-icon-negative-press",
+  "border-t-icon-negative",
+  "border-t-icon-positive-hover",
+  "border-t-icon-positive-press",
+  "border-t-icon-positive",
+  "border-t-icon-notice-hover",
+  "border-t-icon-notice-press",
+  "border-t-icon-notice",
+  "border-t-icon-hover",
+  "border-t-icon-press",
+  "border-t-icon-disable",
+  "border-t-icon-on-primary-hover",
+  "border-t-icon-on-primary-press",
+  "border-t-icon-on-primary",
+  "border-t-icon-on-on-img-hover",
+  "border-t-icon-on-on-img-press",
+  "border-t-icon-on-on-img",
+  "border-t-icon-on-neutral-hover",
+  "border-t-icon-on-neutral-press",
+  "border-t-icon-on-neutral",
+  "border-t-icon-on-negative-hover",
+  "border-t-icon-on-negative-press",
+  "border-t-icon-on-negative",
+  "border-t-icon-on-positive-hover",
+  "border-t-icon-on-positive-press",
+  "border-t-icon-on-positive",
+  "border-t-icon-on-notice-hover",
+  "border-t-icon-on-notice-press",
+  "border-t-icon-on-notice",
+  "border-t-icon",
+  "border-t-text-hover",
+  "border-t-text-press",
+  "border-t-text-disable",
+  "border-t-text-secondary-hover",
+  "border-t-text-secondary-press",
+  "border-t-text-secondary",
+  "border-t-text-tertiary-hover",
+  "border-t-text-tertiary-press",
+  "border-t-text-tertiary",
+  "border-t-text-placeholder-hover",
+  "border-t-text-placeholder-press",
+  "border-t-text-placeholder",
+  "border-t-text-info-hover",
+  "border-t-text-info-press",
+  "border-t-text-info",
+  "border-t-text-visited-hover",
+  "border-t-text-visited-press",
+  "border-t-text-visited",
+  "border-t-text-negative-hover",
+  "border-t-text-negative-press",
+  "border-t-text-negative",
+  "border-t-text-notice-hover",
+  "border-t-text-notice-press",
+  "border-t-text-notice",
+  "border-t-text-positive-hover",
+  "border-t-text-positive-press",
+  "border-t-text-positive",
+  "border-t-text-on-primary-hover",
+  "border-t-text-on-primary-press",
+  "border-t-text-on-primary",
+  "border-t-text-on-on-img-hover",
+  "border-t-text-on-on-img-press",
+  "border-t-text-on-on-img",
+  "border-t-text-on-negative-hover",
+  "border-t-text-on-negative-press",
+  "border-t-text-on-negative",
+  "border-t-text-on-positive-hover",
+  "border-t-text-on-positive-press",
+  "border-t-text-on-positive",
+  "border-t-text-on-notice-hover",
+  "border-t-text-on-notice-press",
+  "border-t-text-on-notice",
+  "border-t-text-on-discovery-hover",
+  "border-t-text-on-discovery-press",
+  "border-t-text-on-discovery",
+  "border-t-text-on-hud-hover",
+  "border-t-text-on-hud-press",
+  "border-t-text-on-hud",
+  "border-t-text-brand-premium-hover",
+  "border-t-text-brand-premium-press",
+  "border-t-text-brand-premium",
+  "border-t-text",
+  "border-t-border-hover",
+  "border-t-border-press",
+  "border-t-border-secondary",
+  "border-t-border-focus-1",
+  "border-t-border-focus-2",
+  "border-t-border-focus-legacy",
+  "border-t-border-disable",
+  "border-t-border-selected",
+  "border-t-border-negative",
+  "border-t-border-hud",
+  "border-t-border",
+  "border-r-background-secondary",
+  "border-r-background-tertiary",
+  "border-r-background",
+  "border-r-container-hover",
+  "border-r-container-press",
+  "border-r-container-default-a",
+  "border-r-container-hover-a",
+  "border-r-container-press-a",
+  "border-r-container-disable",
+  "border-r-container-secondary-hover",
+  "border-r-container-secondary-press",
+  "border-r-container-secondary-default-a",
+  "border-r-container-secondary-hover-a",
+  "border-r-container-secondary-press-a",
+  "border-r-container-secondary",
+  "border-r-container-tertiary-hover",
+  "border-r-container-tertiary-press",
+  "border-r-container-tertiary-default-a",
+  "border-r-container-tertiary-hover-a",
+  "border-r-container-tertiary-pressA",
+  "border-r-container-tertiary",
+  "border-r-container-primary-hover",
+  "border-r-container-primary-press",
+  "border-r-container-primary",
+  "border-r-container-on-img-hover",
+  "border-r-container-on-img-press",
+  "border-r-container-on-img",
+  "border-r-container-negative-hover",
+  "border-r-container-negative-press",
+  "border-r-container-negative",
+  "border-r-container-positive-hover",
+  "border-r-container-positive-press",
+  "border-r-container-positive",
+  "border-r-container-notice-hover",
+  "border-r-container-notice-press",
+  "border-r-container-notice",
+  "border-r-container-neutral-hover",
+  "border-r-container-neutral-press",
+  "border-r-container-neutral",
+  "border-r-container-discovery-hover",
+  "border-r-container-discovery-press",
+  "border-r-container-discovery",
+  "border-r-container-hud-hover",
+  "border-r-container-hud-press",
+  "border-r-container-hud",
+  "border-r-container-skeleton",
+  "border-r-container-subtle",
+  "border-r-container",
+  "border-r-icon-secondary-hover",
+  "border-r-icon-secondary-press",
+  "border-r-icon-secondary",
+  "border-r-icon-tertiary-hover",
+  "border-r-icon-tertiary-press",
+  "border-r-icon-tertiary",
+  "border-r-icon-negative-hover",
+  "border-r-icon-negative-press",
+  "border-r-icon-negative",
+  "border-r-icon-positive-hover",
+  "border-r-icon-positive-press",
+  "border-r-icon-positive",
+  "border-r-icon-notice-hover",
+  "border-r-icon-notice-press",
+  "border-r-icon-notice",
+  "border-r-icon-hover",
+  "border-r-icon-press",
+  "border-r-icon-disable",
+  "border-r-icon-on-primary-hover",
+  "border-r-icon-on-primary-press",
+  "border-r-icon-on-primary",
+  "border-r-icon-on-on-img-hover",
+  "border-r-icon-on-on-img-press",
+  "border-r-icon-on-on-img",
+  "border-r-icon-on-neutral-hover",
+  "border-r-icon-on-neutral-press",
+  "border-r-icon-on-neutral",
+  "border-r-icon-on-negative-hover",
+  "border-r-icon-on-negative-press",
+  "border-r-icon-on-negative",
+  "border-r-icon-on-positive-hover",
+  "border-r-icon-on-positive-press",
+  "border-r-icon-on-positive",
+  "border-r-icon-on-notice-hover",
+  "border-r-icon-on-notice-press",
+  "border-r-icon-on-notice",
+  "border-r-icon",
+  "border-r-text-hover",
+  "border-r-text-press",
+  "border-r-text-disable",
+  "border-r-text-secondary-hover",
+  "border-r-text-secondary-press",
+  "border-r-text-secondary",
+  "border-r-text-tertiary-hover",
+  "border-r-text-tertiary-press",
+  "border-r-text-tertiary",
+  "border-r-text-placeholder-hover",
+  "border-r-text-placeholder-press",
+  "border-r-text-placeholder",
+  "border-r-text-info-hover",
+  "border-r-text-info-press",
+  "border-r-text-info",
+  "border-r-text-visited-hover",
+  "border-r-text-visited-press",
+  "border-r-text-visited",
+  "border-r-text-negative-hover",
+  "border-r-text-negative-press",
+  "border-r-text-negative",
+  "border-r-text-notice-hover",
+  "border-r-text-notice-press",
+  "border-r-text-notice",
+  "border-r-text-positive-hover",
+  "border-r-text-positive-press",
+  "border-r-text-positive",
+  "border-r-text-on-primary-hover",
+  "border-r-text-on-primary-press",
+  "border-r-text-on-primary",
+  "border-r-text-on-on-img-hover",
+  "border-r-text-on-on-img-press",
+  "border-r-text-on-on-img",
+  "border-r-text-on-negative-hover",
+  "border-r-text-on-negative-press",
+  "border-r-text-on-negative",
+  "border-r-text-on-positive-hover",
+  "border-r-text-on-positive-press",
+  "border-r-text-on-positive",
+  "border-r-text-on-notice-hover",
+  "border-r-text-on-notice-press",
+  "border-r-text-on-notice",
+  "border-r-text-on-discovery-hover",
+  "border-r-text-on-discovery-press",
+  "border-r-text-on-discovery",
+  "border-r-text-on-hud-hover",
+  "border-r-text-on-hud-press",
+  "border-r-text-on-hud",
+  "border-r-text-brand-premium-hover",
+  "border-r-text-brand-premium-press",
+  "border-r-text-brand-premium",
+  "border-r-text",
+  "border-r-border-hover",
+  "border-r-border-press",
+  "border-r-border-secondary",
+  "border-r-border-focus-1",
+  "border-r-border-focus-2",
+  "border-r-border-focus-legacy",
+  "border-r-border-disable",
+  "border-r-border-selected",
+  "border-r-border-negative",
+  "border-r-border-hud",
+  "border-r-border",
+  "border-b-background-secondary",
+  "border-b-background-tertiary",
+  "border-b-background",
+  "border-b-container-hover",
+  "border-b-container-press",
+  "border-b-container-default-a",
+  "border-b-container-hover-a",
+  "border-b-container-press-a",
+  "border-b-container-disable",
+  "border-b-container-secondary-hover",
+  "border-b-container-secondary-press",
+  "border-b-container-secondary-default-a",
+  "border-b-container-secondary-hover-a",
+  "border-b-container-secondary-press-a",
+  "border-b-container-secondary",
+  "border-b-container-tertiary-hover",
+  "border-b-container-tertiary-press",
+  "border-b-container-tertiary-default-a",
+  "border-b-container-tertiary-hover-a",
+  "border-b-container-tertiary-pressA",
+  "border-b-container-tertiary",
+  "border-b-container-primary-hover",
+  "border-b-container-primary-press",
+  "border-b-container-primary",
+  "border-b-container-on-img-hover",
+  "border-b-container-on-img-press",
+  "border-b-container-on-img",
+  "border-b-container-negative-hover",
+  "border-b-container-negative-press",
+  "border-b-container-negative",
+  "border-b-container-positive-hover",
+  "border-b-container-positive-press",
+  "border-b-container-positive",
+  "border-b-container-notice-hover",
+  "border-b-container-notice-press",
+  "border-b-container-notice",
+  "border-b-container-neutral-hover",
+  "border-b-container-neutral-press",
+  "border-b-container-neutral",
+  "border-b-container-discovery-hover",
+  "border-b-container-discovery-press",
+  "border-b-container-discovery",
+  "border-b-container-hud-hover",
+  "border-b-container-hud-press",
+  "border-b-container-hud",
+  "border-b-container-skeleton",
+  "border-b-container-subtle",
+  "border-b-container",
+  "border-b-icon-secondary-hover",
+  "border-b-icon-secondary-press",
+  "border-b-icon-secondary",
+  "border-b-icon-tertiary-hover",
+  "border-b-icon-tertiary-press",
+  "border-b-icon-tertiary",
+  "border-b-icon-negative-hover",
+  "border-b-icon-negative-press",
+  "border-b-icon-negative",
+  "border-b-icon-positive-hover",
+  "border-b-icon-positive-press",
+  "border-b-icon-positive",
+  "border-b-icon-notice-hover",
+  "border-b-icon-notice-press",
+  "border-b-icon-notice",
+  "border-b-icon-hover",
+  "border-b-icon-press",
+  "border-b-icon-disable",
+  "border-b-icon-on-primary-hover",
+  "border-b-icon-on-primary-press",
+  "border-b-icon-on-primary",
+  "border-b-icon-on-on-img-hover",
+  "border-b-icon-on-on-img-press",
+  "border-b-icon-on-on-img",
+  "border-b-icon-on-neutral-hover",
+  "border-b-icon-on-neutral-press",
+  "border-b-icon-on-neutral",
+  "border-b-icon-on-negative-hover",
+  "border-b-icon-on-negative-press",
+  "border-b-icon-on-negative",
+  "border-b-icon-on-positive-hover",
+  "border-b-icon-on-positive-press",
+  "border-b-icon-on-positive",
+  "border-b-icon-on-notice-hover",
+  "border-b-icon-on-notice-press",
+  "border-b-icon-on-notice",
+  "border-b-icon",
+  "border-b-text-hover",
+  "border-b-text-press",
+  "border-b-text-disable",
+  "border-b-text-secondary-hover",
+  "border-b-text-secondary-press",
+  "border-b-text-secondary",
+  "border-b-text-tertiary-hover",
+  "border-b-text-tertiary-press",
+  "border-b-text-tertiary",
+  "border-b-text-placeholder-hover",
+  "border-b-text-placeholder-press",
+  "border-b-text-placeholder",
+  "border-b-text-info-hover",
+  "border-b-text-info-press",
+  "border-b-text-info",
+  "border-b-text-visited-hover",
+  "border-b-text-visited-press",
+  "border-b-text-visited",
+  "border-b-text-negative-hover",
+  "border-b-text-negative-press",
+  "border-b-text-negative",
+  "border-b-text-notice-hover",
+  "border-b-text-notice-press",
+  "border-b-text-notice",
+  "border-b-text-positive-hover",
+  "border-b-text-positive-press",
+  "border-b-text-positive",
+  "border-b-text-on-primary-hover",
+  "border-b-text-on-primary-press",
+  "border-b-text-on-primary",
+  "border-b-text-on-on-img-hover",
+  "border-b-text-on-on-img-press",
+  "border-b-text-on-on-img",
+  "border-b-text-on-negative-hover",
+  "border-b-text-on-negative-press",
+  "border-b-text-on-negative",
+  "border-b-text-on-positive-hover",
+  "border-b-text-on-positive-press",
+  "border-b-text-on-positive",
+  "border-b-text-on-notice-hover",
+  "border-b-text-on-notice-press",
+  "border-b-text-on-notice",
+  "border-b-text-on-discovery-hover",
+  "border-b-text-on-discovery-press",
+  "border-b-text-on-discovery",
+  "border-b-text-on-hud-hover",
+  "border-b-text-on-hud-press",
+  "border-b-text-on-hud",
+  "border-b-text-brand-premium-hover",
+  "border-b-text-brand-premium-press",
+  "border-b-text-brand-premium",
+  "border-b-text",
+  "border-b-border-hover",
+  "border-b-border-press",
+  "border-b-border-secondary",
+  "border-b-border-focus-1",
+  "border-b-border-focus-2",
+  "border-b-border-focus-legacy",
+  "border-b-border-disable",
+  "border-b-border-selected",
+  "border-b-border-negative",
+  "border-b-border-hud",
+  "border-b-border",
+  "border-l-background-secondary",
+  "border-l-background-tertiary",
+  "border-l-background",
+  "border-l-container-hover",
+  "border-l-container-press",
+  "border-l-container-default-a",
+  "border-l-container-hover-a",
+  "border-l-container-press-a",
+  "border-l-container-disable",
+  "border-l-container-secondary-hover",
+  "border-l-container-secondary-press",
+  "border-l-container-secondary-default-a",
+  "border-l-container-secondary-hover-a",
+  "border-l-container-secondary-press-a",
+  "border-l-container-secondary",
+  "border-l-container-tertiary-hover",
+  "border-l-container-tertiary-press",
+  "border-l-container-tertiary-default-a",
+  "border-l-container-tertiary-hover-a",
+  "border-l-container-tertiary-pressA",
+  "border-l-container-tertiary",
+  "border-l-container-primary-hover",
+  "border-l-container-primary-press",
+  "border-l-container-primary",
+  "border-l-container-on-img-hover",
+  "border-l-container-on-img-press",
+  "border-l-container-on-img",
+  "border-l-container-negative-hover",
+  "border-l-container-negative-press",
+  "border-l-container-negative",
+  "border-l-container-positive-hover",
+  "border-l-container-positive-press",
+  "border-l-container-positive",
+  "border-l-container-notice-hover",
+  "border-l-container-notice-press",
+  "border-l-container-notice",
+  "border-l-container-neutral-hover",
+  "border-l-container-neutral-press",
+  "border-l-container-neutral",
+  "border-l-container-discovery-hover",
+  "border-l-container-discovery-press",
+  "border-l-container-discovery",
+  "border-l-container-hud-hover",
+  "border-l-container-hud-press",
+  "border-l-container-hud",
+  "border-l-container-skeleton",
+  "border-l-container-subtle",
+  "border-l-container",
+  "border-l-icon-secondary-hover",
+  "border-l-icon-secondary-press",
+  "border-l-icon-secondary",
+  "border-l-icon-tertiary-hover",
+  "border-l-icon-tertiary-press",
+  "border-l-icon-tertiary",
+  "border-l-icon-negative-hover",
+  "border-l-icon-negative-press",
+  "border-l-icon-negative",
+  "border-l-icon-positive-hover",
+  "border-l-icon-positive-press",
+  "border-l-icon-positive",
+  "border-l-icon-notice-hover",
+  "border-l-icon-notice-press",
+  "border-l-icon-notice",
+  "border-l-icon-hover",
+  "border-l-icon-press",
+  "border-l-icon-disable",
+  "border-l-icon-on-primary-hover",
+  "border-l-icon-on-primary-press",
+  "border-l-icon-on-primary",
+  "border-l-icon-on-on-img-hover",
+  "border-l-icon-on-on-img-press",
+  "border-l-icon-on-on-img",
+  "border-l-icon-on-neutral-hover",
+  "border-l-icon-on-neutral-press",
+  "border-l-icon-on-neutral",
+  "border-l-icon-on-negative-hover",
+  "border-l-icon-on-negative-press",
+  "border-l-icon-on-negative",
+  "border-l-icon-on-positive-hover",
+  "border-l-icon-on-positive-press",
+  "border-l-icon-on-positive",
+  "border-l-icon-on-notice-hover",
+  "border-l-icon-on-notice-press",
+  "border-l-icon-on-notice",
+  "border-l-icon",
+  "border-l-text-hover",
+  "border-l-text-press",
+  "border-l-text-disable",
+  "border-l-text-secondary-hover",
+  "border-l-text-secondary-press",
+  "border-l-text-secondary",
+  "border-l-text-tertiary-hover",
+  "border-l-text-tertiary-press",
+  "border-l-text-tertiary",
+  "border-l-text-placeholder-hover",
+  "border-l-text-placeholder-press",
+  "border-l-text-placeholder",
+  "border-l-text-info-hover",
+  "border-l-text-info-press",
+  "border-l-text-info",
+  "border-l-text-visited-hover",
+  "border-l-text-visited-press",
+  "border-l-text-visited",
+  "border-l-text-negative-hover",
+  "border-l-text-negative-press",
+  "border-l-text-negative",
+  "border-l-text-notice-hover",
+  "border-l-text-notice-press",
+  "border-l-text-notice",
+  "border-l-text-positive-hover",
+  "border-l-text-positive-press",
+  "border-l-text-positive",
+  "border-l-text-on-primary-hover",
+  "border-l-text-on-primary-press",
+  "border-l-text-on-primary",
+  "border-l-text-on-on-img-hover",
+  "border-l-text-on-on-img-press",
+  "border-l-text-on-on-img",
+  "border-l-text-on-negative-hover",
+  "border-l-text-on-negative-press",
+  "border-l-text-on-negative",
+  "border-l-text-on-positive-hover",
+  "border-l-text-on-positive-press",
+  "border-l-text-on-positive",
+  "border-l-text-on-notice-hover",
+  "border-l-text-on-notice-press",
+  "border-l-text-on-notice",
+  "border-l-text-on-discovery-hover",
+  "border-l-text-on-discovery-press",
+  "border-l-text-on-discovery",
+  "border-l-text-on-hud-hover",
+  "border-l-text-on-hud-press",
+  "border-l-text-on-hud",
+  "border-l-text-brand-premium-hover",
+  "border-l-text-brand-premium-press",
+  "border-l-text-brand-premium",
+  "border-l-text",
+  "border-l-border-hover",
+  "border-l-border-press",
+  "border-l-border-secondary",
+  "border-l-border-focus-1",
+  "border-l-border-focus-2",
+  "border-l-border-focus-legacy",
+  "border-l-border-disable",
+  "border-l-border-selected",
+  "border-l-border-negative",
+  "border-l-border-hud",
+  "border-l-border",
+  "border-opacity-0",
+  "border-opacity-5",
+  "border-opacity-10",
+  "border-opacity-20",
+  "border-opacity-25",
+  "border-opacity-30",
+  "border-opacity-40",
+  "border-opacity-50",
+  "border-opacity-60",
+  "border-opacity-70",
+  "border-opacity-75",
+  "border-opacity-80",
+  "border-opacity-90",
+  "border-opacity-95",
+  "border-opacity-100",
+  "bg-background-secondary",
+  "bg-background-tertiary",
+  "bg-background",
+  "bg-container-hover",
+  "bg-container-press",
+  "bg-container-default-a",
+  "bg-container-hover-a",
+  "bg-container-press-a",
+  "bg-container-disable",
+  "bg-container-secondary-hover",
+  "bg-container-secondary-press",
+  "bg-container-secondary-default-a",
+  "bg-container-secondary-hover-a",
+  "bg-container-secondary-press-a",
+  "bg-container-secondary",
+  "bg-container-tertiary-hover",
+  "bg-container-tertiary-press",
+  "bg-container-tertiary-default-a",
+  "bg-container-tertiary-hover-a",
+  "bg-container-tertiary-pressA",
+  "bg-container-tertiary",
+  "bg-container-primary-hover",
+  "bg-container-primary-press",
+  "bg-container-primary",
+  "bg-container-on-img-hover",
+  "bg-container-on-img-press",
+  "bg-container-on-img",
+  "bg-container-negative-hover",
+  "bg-container-negative-press",
+  "bg-container-negative",
+  "bg-container-positive-hover",
+  "bg-container-positive-press",
+  "bg-container-positive",
+  "bg-container-notice-hover",
+  "bg-container-notice-press",
+  "bg-container-notice",
+  "bg-container-neutral-hover",
+  "bg-container-neutral-press",
+  "bg-container-neutral",
+  "bg-container-discovery-hover",
+  "bg-container-discovery-press",
+  "bg-container-discovery",
+  "bg-container-hud-hover",
+  "bg-container-hud-press",
+  "bg-container-hud",
+  "bg-container-skeleton",
+  "bg-container-subtle",
+  "bg-container",
+  "bg-icon-secondary-hover",
+  "bg-icon-secondary-press",
+  "bg-icon-secondary",
+  "bg-icon-tertiary-hover",
+  "bg-icon-tertiary-press",
+  "bg-icon-tertiary",
+  "bg-icon-negative-hover",
+  "bg-icon-negative-press",
+  "bg-icon-negative",
+  "bg-icon-positive-hover",
+  "bg-icon-positive-press",
+  "bg-icon-positive",
+  "bg-icon-notice-hover",
+  "bg-icon-notice-press",
+  "bg-icon-notice",
+  "bg-icon-hover",
+  "bg-icon-press",
+  "bg-icon-disable",
+  "bg-icon-on-primary-hover",
+  "bg-icon-on-primary-press",
+  "bg-icon-on-primary",
+  "bg-icon-on-on-img-hover",
+  "bg-icon-on-on-img-press",
+  "bg-icon-on-on-img",
+  "bg-icon-on-neutral-hover",
+  "bg-icon-on-neutral-press",
+  "bg-icon-on-neutral",
+  "bg-icon-on-negative-hover",
+  "bg-icon-on-negative-press",
+  "bg-icon-on-negative",
+  "bg-icon-on-positive-hover",
+  "bg-icon-on-positive-press",
+  "bg-icon-on-positive",
+  "bg-icon-on-notice-hover",
+  "bg-icon-on-notice-press",
+  "bg-icon-on-notice",
+  "bg-icon",
+  "bg-text-hover",
+  "bg-text-press",
+  "bg-text-disable",
+  "bg-text-secondary-hover",
+  "bg-text-secondary-press",
+  "bg-text-secondary",
+  "bg-text-tertiary-hover",
+  "bg-text-tertiary-press",
+  "bg-text-tertiary",
+  "bg-text-placeholder-hover",
+  "bg-text-placeholder-press",
+  "bg-text-placeholder",
+  "bg-text-info-hover",
+  "bg-text-info-press",
+  "bg-text-info",
+  "bg-text-visited-hover",
+  "bg-text-visited-press",
+  "bg-text-visited",
+  "bg-text-negative-hover",
+  "bg-text-negative-press",
+  "bg-text-negative",
+  "bg-text-notice-hover",
+  "bg-text-notice-press",
+  "bg-text-notice",
+  "bg-text-positive-hover",
+  "bg-text-positive-press",
+  "bg-text-positive",
+  "bg-text-on-primary-hover",
+  "bg-text-on-primary-press",
+  "bg-text-on-primary",
+  "bg-text-on-on-img-hover",
+  "bg-text-on-on-img-press",
+  "bg-text-on-on-img",
+  "bg-text-on-negative-hover",
+  "bg-text-on-negative-press",
+  "bg-text-on-negative",
+  "bg-text-on-positive-hover",
+  "bg-text-on-positive-press",
+  "bg-text-on-positive",
+  "bg-text-on-notice-hover",
+  "bg-text-on-notice-press",
+  "bg-text-on-notice",
+  "bg-text-on-discovery-hover",
+  "bg-text-on-discovery-press",
+  "bg-text-on-discovery",
+  "bg-text-on-hud-hover",
+  "bg-text-on-hud-press",
+  "bg-text-on-hud",
+  "bg-text-brand-premium-hover",
+  "bg-text-brand-premium-press",
+  "bg-text-brand-premium",
+  "bg-text",
+  "bg-border-hover",
+  "bg-border-press",
+  "bg-border-secondary",
+  "bg-border-focus-1",
+  "bg-border-focus-2",
+  "bg-border-focus-legacy",
+  "bg-border-disable",
+  "bg-border-selected",
+  "bg-border-negative",
+  "bg-border-hud",
+  "bg-border",
+  "bg-opacity-0",
+  "bg-opacity-5",
+  "bg-opacity-10",
+  "bg-opacity-20",
+  "bg-opacity-25",
+  "bg-opacity-30",
+  "bg-opacity-40",
+  "bg-opacity-50",
+  "bg-opacity-60",
+  "bg-opacity-70",
+  "bg-opacity-75",
+  "bg-opacity-80",
+  "bg-opacity-90",
+  "bg-opacity-95",
+  "bg-opacity-100",
+  "bg-none",
+  "bg-gradient-to-t",
+  "bg-gradient-to-tr",
+  "bg-gradient-to-r",
+  "bg-gradient-to-br",
+  "bg-gradient-to-b",
+  "bg-gradient-to-bl",
+  "bg-gradient-to-l",
+  "bg-gradient-to-tl",
+  "from-background-secondary",
+  "from-background-tertiary",
+  "from-background",
+  "from-container-hover",
+  "from-container-press",
+  "from-container-default-a",
+  "from-container-hover-a",
+  "from-container-press-a",
+  "from-container-disable",
+  "from-container-secondary-hover",
+  "from-container-secondary-press",
+  "from-container-secondary-default-a",
+  "from-container-secondary-hover-a",
+  "from-container-secondary-press-a",
+  "from-container-secondary",
+  "from-container-tertiary-hover",
+  "from-container-tertiary-press",
+  "from-container-tertiary-default-a",
+  "from-container-tertiary-hover-a",
+  "from-container-tertiary-pressA",
+  "from-container-tertiary",
+  "from-container-primary-hover",
+  "from-container-primary-press",
+  "from-container-primary",
+  "from-container-on-img-hover",
+  "from-container-on-img-press",
+  "from-container-on-img",
+  "from-container-negative-hover",
+  "from-container-negative-press",
+  "from-container-negative",
+  "from-container-positive-hover",
+  "from-container-positive-press",
+  "from-container-positive",
+  "from-container-notice-hover",
+  "from-container-notice-press",
+  "from-container-notice",
+  "from-container-neutral-hover",
+  "from-container-neutral-press",
+  "from-container-neutral",
+  "from-container-discovery-hover",
+  "from-container-discovery-press",
+  "from-container-discovery",
+  "from-container-hud-hover",
+  "from-container-hud-press",
+  "from-container-hud",
+  "from-container-skeleton",
+  "from-container-subtle",
+  "from-container",
+  "from-icon-secondary-hover",
+  "from-icon-secondary-press",
+  "from-icon-secondary",
+  "from-icon-tertiary-hover",
+  "from-icon-tertiary-press",
+  "from-icon-tertiary",
+  "from-icon-negative-hover",
+  "from-icon-negative-press",
+  "from-icon-negative",
+  "from-icon-positive-hover",
+  "from-icon-positive-press",
+  "from-icon-positive",
+  "from-icon-notice-hover",
+  "from-icon-notice-press",
+  "from-icon-notice",
+  "from-icon-hover",
+  "from-icon-press",
+  "from-icon-disable",
+  "from-icon-on-primary-hover",
+  "from-icon-on-primary-press",
+  "from-icon-on-primary",
+  "from-icon-on-on-img-hover",
+  "from-icon-on-on-img-press",
+  "from-icon-on-on-img",
+  "from-icon-on-neutral-hover",
+  "from-icon-on-neutral-press",
+  "from-icon-on-neutral",
+  "from-icon-on-negative-hover",
+  "from-icon-on-negative-press",
+  "from-icon-on-negative",
+  "from-icon-on-positive-hover",
+  "from-icon-on-positive-press",
+  "from-icon-on-positive",
+  "from-icon-on-notice-hover",
+  "from-icon-on-notice-press",
+  "from-icon-on-notice",
+  "from-icon",
+  "from-text-hover",
+  "from-text-press",
+  "from-text-disable",
+  "from-text-secondary-hover",
+  "from-text-secondary-press",
+  "from-text-secondary",
+  "from-text-tertiary-hover",
+  "from-text-tertiary-press",
+  "from-text-tertiary",
+  "from-text-placeholder-hover",
+  "from-text-placeholder-press",
+  "from-text-placeholder",
+  "from-text-info-hover",
+  "from-text-info-press",
+  "from-text-info",
+  "from-text-visited-hover",
+  "from-text-visited-press",
+  "from-text-visited",
+  "from-text-negative-hover",
+  "from-text-negative-press",
+  "from-text-negative",
+  "from-text-notice-hover",
+  "from-text-notice-press",
+  "from-text-notice",
+  "from-text-positive-hover",
+  "from-text-positive-press",
+  "from-text-positive",
+  "from-text-on-primary-hover",
+  "from-text-on-primary-press",
+  "from-text-on-primary",
+  "from-text-on-on-img-hover",
+  "from-text-on-on-img-press",
+  "from-text-on-on-img",
+  "from-text-on-negative-hover",
+  "from-text-on-negative-press",
+  "from-text-on-negative",
+  "from-text-on-positive-hover",
+  "from-text-on-positive-press",
+  "from-text-on-positive",
+  "from-text-on-notice-hover",
+  "from-text-on-notice-press",
+  "from-text-on-notice",
+  "from-text-on-discovery-hover",
+  "from-text-on-discovery-press",
+  "from-text-on-discovery",
+  "from-text-on-hud-hover",
+  "from-text-on-hud-press",
+  "from-text-on-hud",
+  "from-text-brand-premium-hover",
+  "from-text-brand-premium-press",
+  "from-text-brand-premium",
+  "from-text",
+  "from-border-hover",
+  "from-border-press",
+  "from-border-secondary",
+  "from-border-focus-1",
+  "from-border-focus-2",
+  "from-border-focus-legacy",
+  "from-border-disable",
+  "from-border-selected",
+  "from-border-negative",
+  "from-border-hud",
+  "from-border",
+  "via-background-secondary",
+  "via-background-tertiary",
+  "via-background",
+  "via-container-hover",
+  "via-container-press",
+  "via-container-default-a",
+  "via-container-hover-a",
+  "via-container-press-a",
+  "via-container-disable",
+  "via-container-secondary-hover",
+  "via-container-secondary-press",
+  "via-container-secondary-default-a",
+  "via-container-secondary-hover-a",
+  "via-container-secondary-press-a",
+  "via-container-secondary",
+  "via-container-tertiary-hover",
+  "via-container-tertiary-press",
+  "via-container-tertiary-default-a",
+  "via-container-tertiary-hover-a",
+  "via-container-tertiary-pressA",
+  "via-container-tertiary",
+  "via-container-primary-hover",
+  "via-container-primary-press",
+  "via-container-primary",
+  "via-container-on-img-hover",
+  "via-container-on-img-press",
+  "via-container-on-img",
+  "via-container-negative-hover",
+  "via-container-negative-press",
+  "via-container-negative",
+  "via-container-positive-hover",
+  "via-container-positive-press",
+  "via-container-positive",
+  "via-container-notice-hover",
+  "via-container-notice-press",
+  "via-container-notice",
+  "via-container-neutral-hover",
+  "via-container-neutral-press",
+  "via-container-neutral",
+  "via-container-discovery-hover",
+  "via-container-discovery-press",
+  "via-container-discovery",
+  "via-container-hud-hover",
+  "via-container-hud-press",
+  "via-container-hud",
+  "via-container-skeleton",
+  "via-container-subtle",
+  "via-container",
+  "via-icon-secondary-hover",
+  "via-icon-secondary-press",
+  "via-icon-secondary",
+  "via-icon-tertiary-hover",
+  "via-icon-tertiary-press",
+  "via-icon-tertiary",
+  "via-icon-negative-hover",
+  "via-icon-negative-press",
+  "via-icon-negative",
+  "via-icon-positive-hover",
+  "via-icon-positive-press",
+  "via-icon-positive",
+  "via-icon-notice-hover",
+  "via-icon-notice-press",
+  "via-icon-notice",
+  "via-icon-hover",
+  "via-icon-press",
+  "via-icon-disable",
+  "via-icon-on-primary-hover",
+  "via-icon-on-primary-press",
+  "via-icon-on-primary",
+  "via-icon-on-on-img-hover",
+  "via-icon-on-on-img-press",
+  "via-icon-on-on-img",
+  "via-icon-on-neutral-hover",
+  "via-icon-on-neutral-press",
+  "via-icon-on-neutral",
+  "via-icon-on-negative-hover",
+  "via-icon-on-negative-press",
+  "via-icon-on-negative",
+  "via-icon-on-positive-hover",
+  "via-icon-on-positive-press",
+  "via-icon-on-positive",
+  "via-icon-on-notice-hover",
+  "via-icon-on-notice-press",
+  "via-icon-on-notice",
+  "via-icon",
+  "via-text-hover",
+  "via-text-press",
+  "via-text-disable",
+  "via-text-secondary-hover",
+  "via-text-secondary-press",
+  "via-text-secondary",
+  "via-text-tertiary-hover",
+  "via-text-tertiary-press",
+  "via-text-tertiary",
+  "via-text-placeholder-hover",
+  "via-text-placeholder-press",
+  "via-text-placeholder",
+  "via-text-info-hover",
+  "via-text-info-press",
+  "via-text-info",
+  "via-text-visited-hover",
+  "via-text-visited-press",
+  "via-text-visited",
+  "via-text-negative-hover",
+  "via-text-negative-press",
+  "via-text-negative",
+  "via-text-notice-hover",
+  "via-text-notice-press",
+  "via-text-notice",
+  "via-text-positive-hover",
+  "via-text-positive-press",
+  "via-text-positive",
+  "via-text-on-primary-hover",
+  "via-text-on-primary-press",
+  "via-text-on-primary",
+  "via-text-on-on-img-hover",
+  "via-text-on-on-img-press",
+  "via-text-on-on-img",
+  "via-text-on-negative-hover",
+  "via-text-on-negative-press",
+  "via-text-on-negative",
+  "via-text-on-positive-hover",
+  "via-text-on-positive-press",
+  "via-text-on-positive",
+  "via-text-on-notice-hover",
+  "via-text-on-notice-press",
+  "via-text-on-notice",
+  "via-text-on-discovery-hover",
+  "via-text-on-discovery-press",
+  "via-text-on-discovery",
+  "via-text-on-hud-hover",
+  "via-text-on-hud-press",
+  "via-text-on-hud",
+  "via-text-brand-premium-hover",
+  "via-text-brand-premium-press",
+  "via-text-brand-premium",
+  "via-text",
+  "via-border-hover",
+  "via-border-press",
+  "via-border-secondary",
+  "via-border-focus-1",
+  "via-border-focus-2",
+  "via-border-focus-legacy",
+  "via-border-disable",
+  "via-border-selected",
+  "via-border-negative",
+  "via-border-hud",
+  "via-border",
+  "to-background-secondary",
+  "to-background-tertiary",
+  "to-background",
+  "to-container-hover",
+  "to-container-press",
+  "to-container-default-a",
+  "to-container-hover-a",
+  "to-container-press-a",
+  "to-container-disable",
+  "to-container-secondary-hover",
+  "to-container-secondary-press",
+  "to-container-secondary-default-a",
+  "to-container-secondary-hover-a",
+  "to-container-secondary-press-a",
+  "to-container-secondary",
+  "to-container-tertiary-hover",
+  "to-container-tertiary-press",
+  "to-container-tertiary-default-a",
+  "to-container-tertiary-hover-a",
+  "to-container-tertiary-pressA",
+  "to-container-tertiary",
+  "to-container-primary-hover",
+  "to-container-primary-press",
+  "to-container-primary",
+  "to-container-on-img-hover",
+  "to-container-on-img-press",
+  "to-container-on-img",
+  "to-container-negative-hover",
+  "to-container-negative-press",
+  "to-container-negative",
+  "to-container-positive-hover",
+  "to-container-positive-press",
+  "to-container-positive",
+  "to-container-notice-hover",
+  "to-container-notice-press",
+  "to-container-notice",
+  "to-container-neutral-hover",
+  "to-container-neutral-press",
+  "to-container-neutral",
+  "to-container-discovery-hover",
+  "to-container-discovery-press",
+  "to-container-discovery",
+  "to-container-hud-hover",
+  "to-container-hud-press",
+  "to-container-hud",
+  "to-container-skeleton",
+  "to-container-subtle",
+  "to-container",
+  "to-icon-secondary-hover",
+  "to-icon-secondary-press",
+  "to-icon-secondary",
+  "to-icon-tertiary-hover",
+  "to-icon-tertiary-press",
+  "to-icon-tertiary",
+  "to-icon-negative-hover",
+  "to-icon-negative-press",
+  "to-icon-negative",
+  "to-icon-positive-hover",
+  "to-icon-positive-press",
+  "to-icon-positive",
+  "to-icon-notice-hover",
+  "to-icon-notice-press",
+  "to-icon-notice",
+  "to-icon-hover",
+  "to-icon-press",
+  "to-icon-disable",
+  "to-icon-on-primary-hover",
+  "to-icon-on-primary-press",
+  "to-icon-on-primary",
+  "to-icon-on-on-img-hover",
+  "to-icon-on-on-img-press",
+  "to-icon-on-on-img",
+  "to-icon-on-neutral-hover",
+  "to-icon-on-neutral-press",
+  "to-icon-on-neutral",
+  "to-icon-on-negative-hover",
+  "to-icon-on-negative-press",
+  "to-icon-on-negative",
+  "to-icon-on-positive-hover",
+  "to-icon-on-positive-press",
+  "to-icon-on-positive",
+  "to-icon-on-notice-hover",
+  "to-icon-on-notice-press",
+  "to-icon-on-notice",
+  "to-icon",
+  "to-text-hover",
+  "to-text-press",
+  "to-text-disable",
+  "to-text-secondary-hover",
+  "to-text-secondary-press",
+  "to-text-secondary",
+  "to-text-tertiary-hover",
+  "to-text-tertiary-press",
+  "to-text-tertiary",
+  "to-text-placeholder-hover",
+  "to-text-placeholder-press",
+  "to-text-placeholder",
+  "to-text-info-hover",
+  "to-text-info-press",
+  "to-text-info",
+  "to-text-visited-hover",
+  "to-text-visited-press",
+  "to-text-visited",
+  "to-text-negative-hover",
+  "to-text-negative-press",
+  "to-text-negative",
+  "to-text-notice-hover",
+  "to-text-notice-press",
+  "to-text-notice",
+  "to-text-positive-hover",
+  "to-text-positive-press",
+  "to-text-positive",
+  "to-text-on-primary-hover",
+  "to-text-on-primary-press",
+  "to-text-on-primary",
+  "to-text-on-on-img-hover",
+  "to-text-on-on-img-press",
+  "to-text-on-on-img",
+  "to-text-on-negative-hover",
+  "to-text-on-negative-press",
+  "to-text-on-negative",
+  "to-text-on-positive-hover",
+  "to-text-on-positive-press",
+  "to-text-on-positive",
+  "to-text-on-notice-hover",
+  "to-text-on-notice-press",
+  "to-text-on-notice",
+  "to-text-on-discovery-hover",
+  "to-text-on-discovery-press",
+  "to-text-on-discovery",
+  "to-text-on-hud-hover",
+  "to-text-on-hud-press",
+  "to-text-on-hud",
+  "to-text-brand-premium-hover",
+  "to-text-brand-premium-press",
+  "to-text-brand-premium",
+  "to-text",
+  "to-border-hover",
+  "to-border-press",
+  "to-border-secondary",
+  "to-border-focus-1",
+  "to-border-focus-2",
+  "to-border-focus-legacy",
+  "to-border-disable",
+  "to-border-selected",
+  "to-border-negative",
+  "to-border-hud",
+  "to-border",
+  "decoration-slice",
+  "decoration-clone",
+  "box-decoration-slice",
+  "box-decoration-clone",
+  "bg-auto",
+  "bg-cover",
+  "bg-contain",
+  "bg-fixed",
+  "bg-local",
+  "bg-scroll",
+  "bg-clip-border",
+  "bg-clip-padding",
+  "bg-clip-content",
+  "bg-clip-text",
+  "bg-bottom",
+  "bg-center",
+  "bg-left",
+  "bg-left-bottom",
+  "bg-left-top",
+  "bg-right",
+  "bg-right-bottom",
+  "bg-right-top",
+  "bg-top",
+  "bg-repeat",
+  "bg-no-repeat",
+  "bg-repeat-x",
+  "bg-repeat-y",
+  "bg-repeat-round",
+  "bg-repeat-space",
+  "bg-origin-border",
+  "bg-origin-padding",
+  "bg-origin-content",
+  "fill-background-secondary",
+  "fill-background-tertiary",
+  "fill-background",
+  "fill-container-hover",
+  "fill-container-press",
+  "fill-container-default-a",
+  "fill-container-hover-a",
+  "fill-container-press-a",
+  "fill-container-disable",
+  "fill-container-secondary-hover",
+  "fill-container-secondary-press",
+  "fill-container-secondary-default-a",
+  "fill-container-secondary-hover-a",
+  "fill-container-secondary-press-a",
+  "fill-container-secondary",
+  "fill-container-tertiary-hover",
+  "fill-container-tertiary-press",
+  "fill-container-tertiary-default-a",
+  "fill-container-tertiary-hover-a",
+  "fill-container-tertiary-pressA",
+  "fill-container-tertiary",
+  "fill-container-primary-hover",
+  "fill-container-primary-press",
+  "fill-container-primary",
+  "fill-container-on-img-hover",
+  "fill-container-on-img-press",
+  "fill-container-on-img",
+  "fill-container-negative-hover",
+  "fill-container-negative-press",
+  "fill-container-negative",
+  "fill-container-positive-hover",
+  "fill-container-positive-press",
+  "fill-container-positive",
+  "fill-container-notice-hover",
+  "fill-container-notice-press",
+  "fill-container-notice",
+  "fill-container-neutral-hover",
+  "fill-container-neutral-press",
+  "fill-container-neutral",
+  "fill-container-discovery-hover",
+  "fill-container-discovery-press",
+  "fill-container-discovery",
+  "fill-container-hud-hover",
+  "fill-container-hud-press",
+  "fill-container-hud",
+  "fill-container-skeleton",
+  "fill-container-subtle",
+  "fill-container",
+  "fill-icon-secondary-hover",
+  "fill-icon-secondary-press",
+  "fill-icon-secondary",
+  "fill-icon-tertiary-hover",
+  "fill-icon-tertiary-press",
+  "fill-icon-tertiary",
+  "fill-icon-negative-hover",
+  "fill-icon-negative-press",
+  "fill-icon-negative",
+  "fill-icon-positive-hover",
+  "fill-icon-positive-press",
+  "fill-icon-positive",
+  "fill-icon-notice-hover",
+  "fill-icon-notice-press",
+  "fill-icon-notice",
+  "fill-icon-hover",
+  "fill-icon-press",
+  "fill-icon-disable",
+  "fill-icon-on-primary-hover",
+  "fill-icon-on-primary-press",
+  "fill-icon-on-primary",
+  "fill-icon-on-on-img-hover",
+  "fill-icon-on-on-img-press",
+  "fill-icon-on-on-img",
+  "fill-icon-on-neutral-hover",
+  "fill-icon-on-neutral-press",
+  "fill-icon-on-neutral",
+  "fill-icon-on-negative-hover",
+  "fill-icon-on-negative-press",
+  "fill-icon-on-negative",
+  "fill-icon-on-positive-hover",
+  "fill-icon-on-positive-press",
+  "fill-icon-on-positive",
+  "fill-icon-on-notice-hover",
+  "fill-icon-on-notice-press",
+  "fill-icon-on-notice",
+  "fill-icon",
+  "fill-text-hover",
+  "fill-text-press",
+  "fill-text-disable",
+  "fill-text-secondary-hover",
+  "fill-text-secondary-press",
+  "fill-text-secondary",
+  "fill-text-tertiary-hover",
+  "fill-text-tertiary-press",
+  "fill-text-tertiary",
+  "fill-text-placeholder-hover",
+  "fill-text-placeholder-press",
+  "fill-text-placeholder",
+  "fill-text-info-hover",
+  "fill-text-info-press",
+  "fill-text-info",
+  "fill-text-visited-hover",
+  "fill-text-visited-press",
+  "fill-text-visited",
+  "fill-text-negative-hover",
+  "fill-text-negative-press",
+  "fill-text-negative",
+  "fill-text-notice-hover",
+  "fill-text-notice-press",
+  "fill-text-notice",
+  "fill-text-positive-hover",
+  "fill-text-positive-press",
+  "fill-text-positive",
+  "fill-text-on-primary-hover",
+  "fill-text-on-primary-press",
+  "fill-text-on-primary",
+  "fill-text-on-on-img-hover",
+  "fill-text-on-on-img-press",
+  "fill-text-on-on-img",
+  "fill-text-on-negative-hover",
+  "fill-text-on-negative-press",
+  "fill-text-on-negative",
+  "fill-text-on-positive-hover",
+  "fill-text-on-positive-press",
+  "fill-text-on-positive",
+  "fill-text-on-notice-hover",
+  "fill-text-on-notice-press",
+  "fill-text-on-notice",
+  "fill-text-on-discovery-hover",
+  "fill-text-on-discovery-press",
+  "fill-text-on-discovery",
+  "fill-text-on-hud-hover",
+  "fill-text-on-hud-press",
+  "fill-text-on-hud",
+  "fill-text-brand-premium-hover",
+  "fill-text-brand-premium-press",
+  "fill-text-brand-premium",
+  "fill-text",
+  "fill-border-hover",
+  "fill-border-press",
+  "fill-border-secondary",
+  "fill-border-focus-1",
+  "fill-border-focus-2",
+  "fill-border-focus-legacy",
+  "fill-border-disable",
+  "fill-border-selected",
+  "fill-border-negative",
+  "fill-border-hud",
+  "fill-border",
+  "stroke-background-secondary",
+  "stroke-background-tertiary",
+  "stroke-background",
+  "stroke-container-hover",
+  "stroke-container-press",
+  "stroke-container-default-a",
+  "stroke-container-hover-a",
+  "stroke-container-press-a",
+  "stroke-container-disable",
+  "stroke-container-secondary-hover",
+  "stroke-container-secondary-press",
+  "stroke-container-secondary-default-a",
+  "stroke-container-secondary-hover-a",
+  "stroke-container-secondary-press-a",
+  "stroke-container-secondary",
+  "stroke-container-tertiary-hover",
+  "stroke-container-tertiary-press",
+  "stroke-container-tertiary-default-a",
+  "stroke-container-tertiary-hover-a",
+  "stroke-container-tertiary-pressA",
+  "stroke-container-tertiary",
+  "stroke-container-primary-hover",
+  "stroke-container-primary-press",
+  "stroke-container-primary",
+  "stroke-container-on-img-hover",
+  "stroke-container-on-img-press",
+  "stroke-container-on-img",
+  "stroke-container-negative-hover",
+  "stroke-container-negative-press",
+  "stroke-container-negative",
+  "stroke-container-positive-hover",
+  "stroke-container-positive-press",
+  "stroke-container-positive",
+  "stroke-container-notice-hover",
+  "stroke-container-notice-press",
+  "stroke-container-notice",
+  "stroke-container-neutral-hover",
+  "stroke-container-neutral-press",
+  "stroke-container-neutral",
+  "stroke-container-discovery-hover",
+  "stroke-container-discovery-press",
+  "stroke-container-discovery",
+  "stroke-container-hud-hover",
+  "stroke-container-hud-press",
+  "stroke-container-hud",
+  "stroke-container-skeleton",
+  "stroke-container-subtle",
+  "stroke-container",
+  "stroke-icon-secondary-hover",
+  "stroke-icon-secondary-press",
+  "stroke-icon-secondary",
+  "stroke-icon-tertiary-hover",
+  "stroke-icon-tertiary-press",
+  "stroke-icon-tertiary",
+  "stroke-icon-negative-hover",
+  "stroke-icon-negative-press",
+  "stroke-icon-negative",
+  "stroke-icon-positive-hover",
+  "stroke-icon-positive-press",
+  "stroke-icon-positive",
+  "stroke-icon-notice-hover",
+  "stroke-icon-notice-press",
+  "stroke-icon-notice",
+  "stroke-icon-hover",
+  "stroke-icon-press",
+  "stroke-icon-disable",
+  "stroke-icon-on-primary-hover",
+  "stroke-icon-on-primary-press",
+  "stroke-icon-on-primary",
+  "stroke-icon-on-on-img-hover",
+  "stroke-icon-on-on-img-press",
+  "stroke-icon-on-on-img",
+  "stroke-icon-on-neutral-hover",
+  "stroke-icon-on-neutral-press",
+  "stroke-icon-on-neutral",
+  "stroke-icon-on-negative-hover",
+  "stroke-icon-on-negative-press",
+  "stroke-icon-on-negative",
+  "stroke-icon-on-positive-hover",
+  "stroke-icon-on-positive-press",
+  "stroke-icon-on-positive",
+  "stroke-icon-on-notice-hover",
+  "stroke-icon-on-notice-press",
+  "stroke-icon-on-notice",
+  "stroke-icon",
+  "stroke-text-hover",
+  "stroke-text-press",
+  "stroke-text-disable",
+  "stroke-text-secondary-hover",
+  "stroke-text-secondary-press",
+  "stroke-text-secondary",
+  "stroke-text-tertiary-hover",
+  "stroke-text-tertiary-press",
+  "stroke-text-tertiary",
+  "stroke-text-placeholder-hover",
+  "stroke-text-placeholder-press",
+  "stroke-text-placeholder",
+  "stroke-text-info-hover",
+  "stroke-text-info-press",
+  "stroke-text-info",
+  "stroke-text-visited-hover",
+  "stroke-text-visited-press",
+  "stroke-text-visited",
+  "stroke-text-negative-hover",
+  "stroke-text-negative-press",
+  "stroke-text-negative",
+  "stroke-text-notice-hover",
+  "stroke-text-notice-press",
+  "stroke-text-notice",
+  "stroke-text-positive-hover",
+  "stroke-text-positive-press",
+  "stroke-text-positive",
+  "stroke-text-on-primary-hover",
+  "stroke-text-on-primary-press",
+  "stroke-text-on-primary",
+  "stroke-text-on-on-img-hover",
+  "stroke-text-on-on-img-press",
+  "stroke-text-on-on-img",
+  "stroke-text-on-negative-hover",
+  "stroke-text-on-negative-press",
+  "stroke-text-on-negative",
+  "stroke-text-on-positive-hover",
+  "stroke-text-on-positive-press",
+  "stroke-text-on-positive",
+  "stroke-text-on-notice-hover",
+  "stroke-text-on-notice-press",
+  "stroke-text-on-notice",
+  "stroke-text-on-discovery-hover",
+  "stroke-text-on-discovery-press",
+  "stroke-text-on-discovery",
+  "stroke-text-on-hud-hover",
+  "stroke-text-on-hud-press",
+  "stroke-text-on-hud",
+  "stroke-text-brand-premium-hover",
+  "stroke-text-brand-premium-press",
+  "stroke-text-brand-premium",
+  "stroke-text",
+  "stroke-border-hover",
+  "stroke-border-press",
+  "stroke-border-secondary",
+  "stroke-border-focus-1",
+  "stroke-border-focus-2",
+  "stroke-border-focus-legacy",
+  "stroke-border-disable",
+  "stroke-border-selected",
+  "stroke-border-negative",
+  "stroke-border-hud",
+  "stroke-border",
+  "stroke-0",
+  "stroke-1",
+  "stroke-2",
+  "object-contain",
+  "object-cover",
+  "object-fill",
+  "object-none",
+  "object-scale-down",
+  "object-bottom",
+  "object-center",
+  "object-left",
+  "object-left-bottom",
+  "object-left-top",
+  "object-right",
+  "object-right-bottom",
+  "object-right-top",
+  "object-top",
+  "p-0",
+  "p-10",
+  "p-20",
+  "p-25",
+  "p-30",
+  "p-40",
+  "p-50",
+  "p-60",
+  "p-70",
+  "p-80",
+  "p-90",
+  "p-100",
+  "p-xs",
+  "p-s",
+  "p-m",
+  "p-l",
+  "p-between-checkboxes-vertical",
+  "p-between-checkboxes-horizontal",
+  "px-0",
+  "px-10",
+  "px-20",
+  "px-25",
+  "px-30",
+  "px-40",
+  "px-50",
+  "px-60",
+  "px-70",
+  "px-80",
+  "px-90",
+  "px-100",
+  "px-xs",
+  "px-s",
+  "px-m",
+  "px-l",
+  "px-between-checkboxes-vertical",
+  "px-between-checkboxes-horizontal",
+  "py-0",
+  "py-10",
+  "py-20",
+  "py-25",
+  "py-30",
+  "py-40",
+  "py-50",
+  "py-60",
+  "py-70",
+  "py-80",
+  "py-90",
+  "py-100",
+  "py-xs",
+  "py-s",
+  "py-m",
+  "py-l",
+  "py-between-checkboxes-vertical",
+  "py-between-checkboxes-horizontal",
+  "pt-0",
+  "pt-10",
+  "pt-20",
+  "pt-25",
+  "pt-30",
+  "pt-40",
+  "pt-50",
+  "pt-60",
+  "pt-70",
+  "pt-80",
+  "pt-90",
+  "pt-100",
+  "pt-xs",
+  "pt-s",
+  "pt-m",
+  "pt-l",
+  "pt-between-checkboxes-vertical",
+  "pt-between-checkboxes-horizontal",
+  "pr-0",
+  "pr-10",
+  "pr-20",
+  "pr-25",
+  "pr-30",
+  "pr-40",
+  "pr-50",
+  "pr-60",
+  "pr-70",
+  "pr-80",
+  "pr-90",
+  "pr-100",
+  "pr-xs",
+  "pr-s",
+  "pr-m",
+  "pr-l",
+  "pr-between-checkboxes-vertical",
+  "pr-between-checkboxes-horizontal",
+  "pb-0",
+  "pb-10",
+  "pb-20",
+  "pb-25",
+  "pb-30",
+  "pb-40",
+  "pb-50",
+  "pb-60",
+  "pb-70",
+  "pb-80",
+  "pb-90",
+  "pb-100",
+  "pb-xs",
+  "pb-s",
+  "pb-m",
+  "pb-l",
+  "pb-between-checkboxes-vertical",
+  "pb-between-checkboxes-horizontal",
+  "pl-0",
+  "pl-10",
+  "pl-20",
+  "pl-25",
+  "pl-30",
+  "pl-40",
+  "pl-50",
+  "pl-60",
+  "pl-70",
+  "pl-80",
+  "pl-90",
+  "pl-100",
+  "pl-xs",
+  "pl-s",
+  "pl-m",
+  "pl-l",
+  "pl-between-checkboxes-vertical",
+  "pl-between-checkboxes-horizontal",
+  "text-left",
+  "text-center",
+  "text-right",
+  "text-justify",
+  "indent-0",
+  "indent-10",
+  "indent-20",
+  "indent-25",
+  "indent-30",
+  "indent-40",
+  "indent-50",
+  "indent-60",
+  "indent-70",
+  "indent-80",
+  "indent-90",
+  "indent-100",
+  "indent-xs",
+  "indent-s",
+  "indent-m",
+  "indent-l",
+  "indent-between-checkboxes-vertical",
+  "indent-between-checkboxes-horizontal",
+  "-indent-0",
+  "-indent-10",
+  "-indent-20",
+  "-indent-25",
+  "-indent-30",
+  "-indent-40",
+  "-indent-50",
+  "-indent-60",
+  "-indent-70",
+  "-indent-80",
+  "-indent-90",
+  "-indent-100",
+  "-indent-xs",
+  "-indent-s",
+  "-indent-m",
+  "-indent-l",
+  "-indent-between-checkboxes-vertical",
+  "-indent-between-checkboxes-horizontal",
+  "align-baseline",
+  "align-top",
+  "align-middle",
+  "align-bottom",
+  "align-text-top",
+  "align-text-bottom",
+  "align-sub",
+  "align-super",
+  "font-sans",
+  "font-serif",
+  "font-mono",
+  "text-paragraph",
+  "text-body",
+  "text-heading-xxxl",
+  "text-heading-xxl",
+  "text-heading-xl",
+  "text-heading-l",
+  "text-heading-m",
+  "text-heading-s",
+  "text-heading-xs",
+  "text-heading-xxs",
+  "text-heading-xxxs",
+  "text-caption-m",
+  "text-caption-s",
+  "font-regular",
+  "font-bold",
+  "uppercase",
+  "lowercase",
+  "capitalize",
+  "normal-case",
+  "italic",
+  "not-italic",
+  "normal-nums",
+  "ordinal",
+  "slashed-zero",
+  "lining-nums",
+  "oldstyle-nums",
+  "proportional-nums",
+  "tabular-nums",
+  "diagonal-fractions",
+  "stacked-fractions",
+  "leading-3",
+  "leading-4",
+  "leading-5",
+  "leading-6",
+  "leading-7",
+  "leading-8",
+  "leading-9",
+  "leading-10",
+  "leading-none",
+  "leading-tight",
+  "leading-snug",
+  "leading-normal",
+  "leading-relaxed",
+  "leading-loose",
+  "tracking-tighter",
+  "tracking-tight",
+  "tracking-normal",
+  "tracking-wide",
+  "tracking-wider",
+  "tracking-widest",
+  "-tracking-tighter",
+  "-tracking-tight",
+  "-tracking-normal",
+  "-tracking-wide",
+  "-tracking-wider",
+  "-tracking-widest",
+  "text-background-secondary",
+  "text-background-tertiary",
+  "text-background",
+  "text-container-hover",
+  "text-container-press",
+  "text-container-default-a",
+  "text-container-hover-a",
+  "text-container-press-a",
+  "text-container-disable",
+  "text-container-secondary-hover",
+  "text-container-secondary-press",
+  "text-container-secondary-default-a",
+  "text-container-secondary-hover-a",
+  "text-container-secondary-press-a",
+  "text-container-secondary",
+  "text-container-tertiary-hover",
+  "text-container-tertiary-press",
+  "text-container-tertiary-default-a",
+  "text-container-tertiary-hover-a",
+  "text-container-tertiary-pressA",
+  "text-container-tertiary",
+  "text-container-primary-hover",
+  "text-container-primary-press",
+  "text-container-primary",
+  "text-container-on-img-hover",
+  "text-container-on-img-press",
+  "text-container-on-img",
+  "text-container-negative-hover",
+  "text-container-negative-press",
+  "text-container-negative",
+  "text-container-positive-hover",
+  "text-container-positive-press",
+  "text-container-positive",
+  "text-container-notice-hover",
+  "text-container-notice-press",
+  "text-container-notice",
+  "text-container-neutral-hover",
+  "text-container-neutral-press",
+  "text-container-neutral",
+  "text-container-discovery-hover",
+  "text-container-discovery-press",
+  "text-container-discovery",
+  "text-container-hud-hover",
+  "text-container-hud-press",
+  "text-container-hud",
+  "text-container-skeleton",
+  "text-container-subtle",
+  "text-container",
+  "text-icon-secondary-hover",
+  "text-icon-secondary-press",
+  "text-icon-secondary",
+  "text-icon-tertiary-hover",
+  "text-icon-tertiary-press",
+  "text-icon-tertiary",
+  "text-icon-negative-hover",
+  "text-icon-negative-press",
+  "text-icon-negative",
+  "text-icon-positive-hover",
+  "text-icon-positive-press",
+  "text-icon-positive",
+  "text-icon-notice-hover",
+  "text-icon-notice-press",
+  "text-icon-notice",
+  "text-icon-hover",
+  "text-icon-press",
+  "text-icon-disable",
+  "text-icon-on-primary-hover",
+  "text-icon-on-primary-press",
+  "text-icon-on-primary",
+  "text-icon-on-on-img-hover",
+  "text-icon-on-on-img-press",
+  "text-icon-on-on-img",
+  "text-icon-on-neutral-hover",
+  "text-icon-on-neutral-press",
+  "text-icon-on-neutral",
+  "text-icon-on-negative-hover",
+  "text-icon-on-negative-press",
+  "text-icon-on-negative",
+  "text-icon-on-positive-hover",
+  "text-icon-on-positive-press",
+  "text-icon-on-positive",
+  "text-icon-on-notice-hover",
+  "text-icon-on-notice-press",
+  "text-icon-on-notice",
+  "text-icon",
+  "text-text-hover",
+  "text-text-press",
+  "text-text-disable",
+  "text-text-secondary-hover",
+  "text-text-secondary-press",
+  "text-text-secondary",
+  "text-text-tertiary-hover",
+  "text-text-tertiary-press",
+  "text-text-tertiary",
+  "text-text-placeholder-hover",
+  "text-text-placeholder-press",
+  "text-text-placeholder",
+  "text-text-info-hover",
+  "text-text-info-press",
+  "text-text-info",
+  "text-text-visited-hover",
+  "text-text-visited-press",
+  "text-text-visited",
+  "text-text-negative-hover",
+  "text-text-negative-press",
+  "text-text-negative",
+  "text-text-notice-hover",
+  "text-text-notice-press",
+  "text-text-notice",
+  "text-text-positive-hover",
+  "text-text-positive-press",
+  "text-text-positive",
+  "text-text-on-primary-hover",
+  "text-text-on-primary-press",
+  "text-text-on-primary",
+  "text-text-on-on-img-hover",
+  "text-text-on-on-img-press",
+  "text-text-on-on-img",
+  "text-text-on-negative-hover",
+  "text-text-on-negative-press",
+  "text-text-on-negative",
+  "text-text-on-positive-hover",
+  "text-text-on-positive-press",
+  "text-text-on-positive",
+  "text-text-on-notice-hover",
+  "text-text-on-notice-press",
+  "text-text-on-notice",
+  "text-text-on-discovery-hover",
+  "text-text-on-discovery-press",
+  "text-text-on-discovery",
+  "text-text-on-hud-hover",
+  "text-text-on-hud-press",
+  "text-text-on-hud",
+  "text-text-brand-premium-hover",
+  "text-text-brand-premium-press",
+  "text-text-brand-premium",
+  "text-text",
+  "text-border-hover",
+  "text-border-press",
+  "text-border-secondary",
+  "text-border-focus-1",
+  "text-border-focus-2",
+  "text-border-focus-legacy",
+  "text-border-disable",
+  "text-border-selected",
+  "text-border-negative",
+  "text-border-hud",
+  "text-border",
+  "text-opacity-0",
+  "text-opacity-5",
+  "text-opacity-10",
+  "text-opacity-20",
+  "text-opacity-25",
+  "text-opacity-30",
+  "text-opacity-40",
+  "text-opacity-50",
+  "text-opacity-60",
+  "text-opacity-70",
+  "text-opacity-75",
+  "text-opacity-80",
+  "text-opacity-90",
+  "text-opacity-95",
+  "text-opacity-100",
+  "underline",
+  "overline",
+  "line-through",
+  "no-underline",
+  "decoration-background-secondary",
+  "decoration-background-tertiary",
+  "decoration-background",
+  "decoration-container-hover",
+  "decoration-container-press",
+  "decoration-container-default-a",
+  "decoration-container-hover-a",
+  "decoration-container-press-a",
+  "decoration-container-disable",
+  "decoration-container-secondary-hover",
+  "decoration-container-secondary-press",
+  "decoration-container-secondary-default-a",
+  "decoration-container-secondary-hover-a",
+  "decoration-container-secondary-press-a",
+  "decoration-container-secondary",
+  "decoration-container-tertiary-hover",
+  "decoration-container-tertiary-press",
+  "decoration-container-tertiary-default-a",
+  "decoration-container-tertiary-hover-a",
+  "decoration-container-tertiary-pressA",
+  "decoration-container-tertiary",
+  "decoration-container-primary-hover",
+  "decoration-container-primary-press",
+  "decoration-container-primary",
+  "decoration-container-on-img-hover",
+  "decoration-container-on-img-press",
+  "decoration-container-on-img",
+  "decoration-container-negative-hover",
+  "decoration-container-negative-press",
+  "decoration-container-negative",
+  "decoration-container-positive-hover",
+  "decoration-container-positive-press",
+  "decoration-container-positive",
+  "decoration-container-notice-hover",
+  "decoration-container-notice-press",
+  "decoration-container-notice",
+  "decoration-container-neutral-hover",
+  "decoration-container-neutral-press",
+  "decoration-container-neutral",
+  "decoration-container-discovery-hover",
+  "decoration-container-discovery-press",
+  "decoration-container-discovery",
+  "decoration-container-hud-hover",
+  "decoration-container-hud-press",
+  "decoration-container-hud",
+  "decoration-container-skeleton",
+  "decoration-container-subtle",
+  "decoration-container",
+  "decoration-icon-secondary-hover",
+  "decoration-icon-secondary-press",
+  "decoration-icon-secondary",
+  "decoration-icon-tertiary-hover",
+  "decoration-icon-tertiary-press",
+  "decoration-icon-tertiary",
+  "decoration-icon-negative-hover",
+  "decoration-icon-negative-press",
+  "decoration-icon-negative",
+  "decoration-icon-positive-hover",
+  "decoration-icon-positive-press",
+  "decoration-icon-positive",
+  "decoration-icon-notice-hover",
+  "decoration-icon-notice-press",
+  "decoration-icon-notice",
+  "decoration-icon-hover",
+  "decoration-icon-press",
+  "decoration-icon-disable",
+  "decoration-icon-on-primary-hover",
+  "decoration-icon-on-primary-press",
+  "decoration-icon-on-primary",
+  "decoration-icon-on-on-img-hover",
+  "decoration-icon-on-on-img-press",
+  "decoration-icon-on-on-img",
+  "decoration-icon-on-neutral-hover",
+  "decoration-icon-on-neutral-press",
+  "decoration-icon-on-neutral",
+  "decoration-icon-on-negative-hover",
+  "decoration-icon-on-negative-press",
+  "decoration-icon-on-negative",
+  "decoration-icon-on-positive-hover",
+  "decoration-icon-on-positive-press",
+  "decoration-icon-on-positive",
+  "decoration-icon-on-notice-hover",
+  "decoration-icon-on-notice-press",
+  "decoration-icon-on-notice",
+  "decoration-icon",
+  "decoration-text-hover",
+  "decoration-text-press",
+  "decoration-text-disable",
+  "decoration-text-secondary-hover",
+  "decoration-text-secondary-press",
+  "decoration-text-secondary",
+  "decoration-text-tertiary-hover",
+  "decoration-text-tertiary-press",
+  "decoration-text-tertiary",
+  "decoration-text-placeholder-hover",
+  "decoration-text-placeholder-press",
+  "decoration-text-placeholder",
+  "decoration-text-info-hover",
+  "decoration-text-info-press",
+  "decoration-text-info",
+  "decoration-text-visited-hover",
+  "decoration-text-visited-press",
+  "decoration-text-visited",
+  "decoration-text-negative-hover",
+  "decoration-text-negative-press",
+  "decoration-text-negative",
+  "decoration-text-notice-hover",
+  "decoration-text-notice-press",
+  "decoration-text-notice",
+  "decoration-text-positive-hover",
+  "decoration-text-positive-press",
+  "decoration-text-positive",
+  "decoration-text-on-primary-hover",
+  "decoration-text-on-primary-press",
+  "decoration-text-on-primary",
+  "decoration-text-on-on-img-hover",
+  "decoration-text-on-on-img-press",
+  "decoration-text-on-on-img",
+  "decoration-text-on-negative-hover",
+  "decoration-text-on-negative-press",
+  "decoration-text-on-negative",
+  "decoration-text-on-positive-hover",
+  "decoration-text-on-positive-press",
+  "decoration-text-on-positive",
+  "decoration-text-on-notice-hover",
+  "decoration-text-on-notice-press",
+  "decoration-text-on-notice",
+  "decoration-text-on-discovery-hover",
+  "decoration-text-on-discovery-press",
+  "decoration-text-on-discovery",
+  "decoration-text-on-hud-hover",
+  "decoration-text-on-hud-press",
+  "decoration-text-on-hud",
+  "decoration-text-brand-premium-hover",
+  "decoration-text-brand-premium-press",
+  "decoration-text-brand-premium",
+  "decoration-text",
+  "decoration-border-hover",
+  "decoration-border-press",
+  "decoration-border-secondary",
+  "decoration-border-focus-1",
+  "decoration-border-focus-2",
+  "decoration-border-focus-legacy",
+  "decoration-border-disable",
+  "decoration-border-selected",
+  "decoration-border-negative",
+  "decoration-border-hud",
+  "decoration-border",
+  "decoration-solid",
+  "decoration-double",
+  "decoration-dotted",
+  "decoration-dashed",
+  "decoration-wavy",
+  "decoration-0",
+  "decoration-1",
+  "decoration-2",
+  "decoration-4",
+  "decoration-8",
+  "decoration-auto",
+  "decoration-from-font",
+  "underline-offset-0",
+  "underline-offset-1",
+  "underline-offset-2",
+  "underline-offset-4",
+  "underline-offset-8",
+  "underline-offset-auto",
+  "antialiased",
+  "subpixel-antialiased",
+  "placeholder-background-secondary",
+  "placeholder-background-tertiary",
+  "placeholder-background",
+  "placeholder-container-hover",
+  "placeholder-container-press",
+  "placeholder-container-default-a",
+  "placeholder-container-hover-a",
+  "placeholder-container-press-a",
+  "placeholder-container-disable",
+  "placeholder-container-secondary-hover",
+  "placeholder-container-secondary-press",
+  "placeholder-container-secondary-default-a",
+  "placeholder-container-secondary-hover-a",
+  "placeholder-container-secondary-press-a",
+  "placeholder-container-secondary",
+  "placeholder-container-tertiary-hover",
+  "placeholder-container-tertiary-press",
+  "placeholder-container-tertiary-default-a",
+  "placeholder-container-tertiary-hover-a",
+  "placeholder-container-tertiary-pressA",
+  "placeholder-container-tertiary",
+  "placeholder-container-primary-hover",
+  "placeholder-container-primary-press",
+  "placeholder-container-primary",
+  "placeholder-container-on-img-hover",
+  "placeholder-container-on-img-press",
+  "placeholder-container-on-img",
+  "placeholder-container-negative-hover",
+  "placeholder-container-negative-press",
+  "placeholder-container-negative",
+  "placeholder-container-positive-hover",
+  "placeholder-container-positive-press",
+  "placeholder-container-positive",
+  "placeholder-container-notice-hover",
+  "placeholder-container-notice-press",
+  "placeholder-container-notice",
+  "placeholder-container-neutral-hover",
+  "placeholder-container-neutral-press",
+  "placeholder-container-neutral",
+  "placeholder-container-discovery-hover",
+  "placeholder-container-discovery-press",
+  "placeholder-container-discovery",
+  "placeholder-container-hud-hover",
+  "placeholder-container-hud-press",
+  "placeholder-container-hud",
+  "placeholder-container-skeleton",
+  "placeholder-container-subtle",
+  "placeholder-container",
+  "placeholder-icon-secondary-hover",
+  "placeholder-icon-secondary-press",
+  "placeholder-icon-secondary",
+  "placeholder-icon-tertiary-hover",
+  "placeholder-icon-tertiary-press",
+  "placeholder-icon-tertiary",
+  "placeholder-icon-negative-hover",
+  "placeholder-icon-negative-press",
+  "placeholder-icon-negative",
+  "placeholder-icon-positive-hover",
+  "placeholder-icon-positive-press",
+  "placeholder-icon-positive",
+  "placeholder-icon-notice-hover",
+  "placeholder-icon-notice-press",
+  "placeholder-icon-notice",
+  "placeholder-icon-hover",
+  "placeholder-icon-press",
+  "placeholder-icon-disable",
+  "placeholder-icon-on-primary-hover",
+  "placeholder-icon-on-primary-press",
+  "placeholder-icon-on-primary",
+  "placeholder-icon-on-on-img-hover",
+  "placeholder-icon-on-on-img-press",
+  "placeholder-icon-on-on-img",
+  "placeholder-icon-on-neutral-hover",
+  "placeholder-icon-on-neutral-press",
+  "placeholder-icon-on-neutral",
+  "placeholder-icon-on-negative-hover",
+  "placeholder-icon-on-negative-press",
+  "placeholder-icon-on-negative",
+  "placeholder-icon-on-positive-hover",
+  "placeholder-icon-on-positive-press",
+  "placeholder-icon-on-positive",
+  "placeholder-icon-on-notice-hover",
+  "placeholder-icon-on-notice-press",
+  "placeholder-icon-on-notice",
+  "placeholder-icon",
+  "placeholder-text-hover",
+  "placeholder-text-press",
+  "placeholder-text-disable",
+  "placeholder-text-secondary-hover",
+  "placeholder-text-secondary-press",
+  "placeholder-text-secondary",
+  "placeholder-text-tertiary-hover",
+  "placeholder-text-tertiary-press",
+  "placeholder-text-tertiary",
+  "placeholder-text-placeholder-hover",
+  "placeholder-text-placeholder-press",
+  "placeholder-text-placeholder",
+  "placeholder-text-info-hover",
+  "placeholder-text-info-press",
+  "placeholder-text-info",
+  "placeholder-text-visited-hover",
+  "placeholder-text-visited-press",
+  "placeholder-text-visited",
+  "placeholder-text-negative-hover",
+  "placeholder-text-negative-press",
+  "placeholder-text-negative",
+  "placeholder-text-notice-hover",
+  "placeholder-text-notice-press",
+  "placeholder-text-notice",
+  "placeholder-text-positive-hover",
+  "placeholder-text-positive-press",
+  "placeholder-text-positive",
+  "placeholder-text-on-primary-hover",
+  "placeholder-text-on-primary-press",
+  "placeholder-text-on-primary",
+  "placeholder-text-on-on-img-hover",
+  "placeholder-text-on-on-img-press",
+  "placeholder-text-on-on-img",
+  "placeholder-text-on-negative-hover",
+  "placeholder-text-on-negative-press",
+  "placeholder-text-on-negative",
+  "placeholder-text-on-positive-hover",
+  "placeholder-text-on-positive-press",
+  "placeholder-text-on-positive",
+  "placeholder-text-on-notice-hover",
+  "placeholder-text-on-notice-press",
+  "placeholder-text-on-notice",
+  "placeholder-text-on-discovery-hover",
+  "placeholder-text-on-discovery-press",
+  "placeholder-text-on-discovery",
+  "placeholder-text-on-hud-hover",
+  "placeholder-text-on-hud-press",
+  "placeholder-text-on-hud",
+  "placeholder-text-brand-premium-hover",
+  "placeholder-text-brand-premium-press",
+  "placeholder-text-brand-premium",
+  "placeholder-text",
+  "placeholder-border-hover",
+  "placeholder-border-press",
+  "placeholder-border-secondary",
+  "placeholder-border-focus-1",
+  "placeholder-border-focus-2",
+  "placeholder-border-focus-legacy",
+  "placeholder-border-disable",
+  "placeholder-border-selected",
+  "placeholder-border-negative",
+  "placeholder-border-hud",
+  "placeholder-border",
+  "placeholder-opacity-0",
+  "placeholder-opacity-5",
+  "placeholder-opacity-10",
+  "placeholder-opacity-20",
+  "placeholder-opacity-25",
+  "placeholder-opacity-30",
+  "placeholder-opacity-40",
+  "placeholder-opacity-50",
+  "placeholder-opacity-60",
+  "placeholder-opacity-70",
+  "placeholder-opacity-75",
+  "placeholder-opacity-80",
+  "placeholder-opacity-90",
+  "placeholder-opacity-95",
+  "placeholder-opacity-100",
+  "caret-background-secondary",
+  "caret-background-tertiary",
+  "caret-background",
+  "caret-container-hover",
+  "caret-container-press",
+  "caret-container-default-a",
+  "caret-container-hover-a",
+  "caret-container-press-a",
+  "caret-container-disable",
+  "caret-container-secondary-hover",
+  "caret-container-secondary-press",
+  "caret-container-secondary-default-a",
+  "caret-container-secondary-hover-a",
+  "caret-container-secondary-press-a",
+  "caret-container-secondary",
+  "caret-container-tertiary-hover",
+  "caret-container-tertiary-press",
+  "caret-container-tertiary-default-a",
+  "caret-container-tertiary-hover-a",
+  "caret-container-tertiary-pressA",
+  "caret-container-tertiary",
+  "caret-container-primary-hover",
+  "caret-container-primary-press",
+  "caret-container-primary",
+  "caret-container-on-img-hover",
+  "caret-container-on-img-press",
+  "caret-container-on-img",
+  "caret-container-negative-hover",
+  "caret-container-negative-press",
+  "caret-container-negative",
+  "caret-container-positive-hover",
+  "caret-container-positive-press",
+  "caret-container-positive",
+  "caret-container-notice-hover",
+  "caret-container-notice-press",
+  "caret-container-notice",
+  "caret-container-neutral-hover",
+  "caret-container-neutral-press",
+  "caret-container-neutral",
+  "caret-container-discovery-hover",
+  "caret-container-discovery-press",
+  "caret-container-discovery",
+  "caret-container-hud-hover",
+  "caret-container-hud-press",
+  "caret-container-hud",
+  "caret-container-skeleton",
+  "caret-container-subtle",
+  "caret-container",
+  "caret-icon-secondary-hover",
+  "caret-icon-secondary-press",
+  "caret-icon-secondary",
+  "caret-icon-tertiary-hover",
+  "caret-icon-tertiary-press",
+  "caret-icon-tertiary",
+  "caret-icon-negative-hover",
+  "caret-icon-negative-press",
+  "caret-icon-negative",
+  "caret-icon-positive-hover",
+  "caret-icon-positive-press",
+  "caret-icon-positive",
+  "caret-icon-notice-hover",
+  "caret-icon-notice-press",
+  "caret-icon-notice",
+  "caret-icon-hover",
+  "caret-icon-press",
+  "caret-icon-disable",
+  "caret-icon-on-primary-hover",
+  "caret-icon-on-primary-press",
+  "caret-icon-on-primary",
+  "caret-icon-on-on-img-hover",
+  "caret-icon-on-on-img-press",
+  "caret-icon-on-on-img",
+  "caret-icon-on-neutral-hover",
+  "caret-icon-on-neutral-press",
+  "caret-icon-on-neutral",
+  "caret-icon-on-negative-hover",
+  "caret-icon-on-negative-press",
+  "caret-icon-on-negative",
+  "caret-icon-on-positive-hover",
+  "caret-icon-on-positive-press",
+  "caret-icon-on-positive",
+  "caret-icon-on-notice-hover",
+  "caret-icon-on-notice-press",
+  "caret-icon-on-notice",
+  "caret-icon",
+  "caret-text-hover",
+  "caret-text-press",
+  "caret-text-disable",
+  "caret-text-secondary-hover",
+  "caret-text-secondary-press",
+  "caret-text-secondary",
+  "caret-text-tertiary-hover",
+  "caret-text-tertiary-press",
+  "caret-text-tertiary",
+  "caret-text-placeholder-hover",
+  "caret-text-placeholder-press",
+  "caret-text-placeholder",
+  "caret-text-info-hover",
+  "caret-text-info-press",
+  "caret-text-info",
+  "caret-text-visited-hover",
+  "caret-text-visited-press",
+  "caret-text-visited",
+  "caret-text-negative-hover",
+  "caret-text-negative-press",
+  "caret-text-negative",
+  "caret-text-notice-hover",
+  "caret-text-notice-press",
+  "caret-text-notice",
+  "caret-text-positive-hover",
+  "caret-text-positive-press",
+  "caret-text-positive",
+  "caret-text-on-primary-hover",
+  "caret-text-on-primary-press",
+  "caret-text-on-primary",
+  "caret-text-on-on-img-hover",
+  "caret-text-on-on-img-press",
+  "caret-text-on-on-img",
+  "caret-text-on-negative-hover",
+  "caret-text-on-negative-press",
+  "caret-text-on-negative",
+  "caret-text-on-positive-hover",
+  "caret-text-on-positive-press",
+  "caret-text-on-positive",
+  "caret-text-on-notice-hover",
+  "caret-text-on-notice-press",
+  "caret-text-on-notice",
+  "caret-text-on-discovery-hover",
+  "caret-text-on-discovery-press",
+  "caret-text-on-discovery",
+  "caret-text-on-hud-hover",
+  "caret-text-on-hud-press",
+  "caret-text-on-hud",
+  "caret-text-brand-premium-hover",
+  "caret-text-brand-premium-press",
+  "caret-text-brand-premium",
+  "caret-text",
+  "caret-border-hover",
+  "caret-border-press",
+  "caret-border-secondary",
+  "caret-border-focus-1",
+  "caret-border-focus-2",
+  "caret-border-focus-legacy",
+  "caret-border-disable",
+  "caret-border-selected",
+  "caret-border-negative",
+  "caret-border-hud",
+  "caret-border",
+  "accent-background-secondary",
+  "accent-background-tertiary",
+  "accent-background",
+  "accent-container-hover",
+  "accent-container-press",
+  "accent-container-default-a",
+  "accent-container-hover-a",
+  "accent-container-press-a",
+  "accent-container-disable",
+  "accent-container-secondary-hover",
+  "accent-container-secondary-press",
+  "accent-container-secondary-default-a",
+  "accent-container-secondary-hover-a",
+  "accent-container-secondary-press-a",
+  "accent-container-secondary",
+  "accent-container-tertiary-hover",
+  "accent-container-tertiary-press",
+  "accent-container-tertiary-default-a",
+  "accent-container-tertiary-hover-a",
+  "accent-container-tertiary-pressA",
+  "accent-container-tertiary",
+  "accent-container-primary-hover",
+  "accent-container-primary-press",
+  "accent-container-primary",
+  "accent-container-on-img-hover",
+  "accent-container-on-img-press",
+  "accent-container-on-img",
+  "accent-container-negative-hover",
+  "accent-container-negative-press",
+  "accent-container-negative",
+  "accent-container-positive-hover",
+  "accent-container-positive-press",
+  "accent-container-positive",
+  "accent-container-notice-hover",
+  "accent-container-notice-press",
+  "accent-container-notice",
+  "accent-container-neutral-hover",
+  "accent-container-neutral-press",
+  "accent-container-neutral",
+  "accent-container-discovery-hover",
+  "accent-container-discovery-press",
+  "accent-container-discovery",
+  "accent-container-hud-hover",
+  "accent-container-hud-press",
+  "accent-container-hud",
+  "accent-container-skeleton",
+  "accent-container-subtle",
+  "accent-container",
+  "accent-icon-secondary-hover",
+  "accent-icon-secondary-press",
+  "accent-icon-secondary",
+  "accent-icon-tertiary-hover",
+  "accent-icon-tertiary-press",
+  "accent-icon-tertiary",
+  "accent-icon-negative-hover",
+  "accent-icon-negative-press",
+  "accent-icon-negative",
+  "accent-icon-positive-hover",
+  "accent-icon-positive-press",
+  "accent-icon-positive",
+  "accent-icon-notice-hover",
+  "accent-icon-notice-press",
+  "accent-icon-notice",
+  "accent-icon-hover",
+  "accent-icon-press",
+  "accent-icon-disable",
+  "accent-icon-on-primary-hover",
+  "accent-icon-on-primary-press",
+  "accent-icon-on-primary",
+  "accent-icon-on-on-img-hover",
+  "accent-icon-on-on-img-press",
+  "accent-icon-on-on-img",
+  "accent-icon-on-neutral-hover",
+  "accent-icon-on-neutral-press",
+  "accent-icon-on-neutral",
+  "accent-icon-on-negative-hover",
+  "accent-icon-on-negative-press",
+  "accent-icon-on-negative",
+  "accent-icon-on-positive-hover",
+  "accent-icon-on-positive-press",
+  "accent-icon-on-positive",
+  "accent-icon-on-notice-hover",
+  "accent-icon-on-notice-press",
+  "accent-icon-on-notice",
+  "accent-icon",
+  "accent-text-hover",
+  "accent-text-press",
+  "accent-text-disable",
+  "accent-text-secondary-hover",
+  "accent-text-secondary-press",
+  "accent-text-secondary",
+  "accent-text-tertiary-hover",
+  "accent-text-tertiary-press",
+  "accent-text-tertiary",
+  "accent-text-placeholder-hover",
+  "accent-text-placeholder-press",
+  "accent-text-placeholder",
+  "accent-text-info-hover",
+  "accent-text-info-press",
+  "accent-text-info",
+  "accent-text-visited-hover",
+  "accent-text-visited-press",
+  "accent-text-visited",
+  "accent-text-negative-hover",
+  "accent-text-negative-press",
+  "accent-text-negative",
+  "accent-text-notice-hover",
+  "accent-text-notice-press",
+  "accent-text-notice",
+  "accent-text-positive-hover",
+  "accent-text-positive-press",
+  "accent-text-positive",
+  "accent-text-on-primary-hover",
+  "accent-text-on-primary-press",
+  "accent-text-on-primary",
+  "accent-text-on-on-img-hover",
+  "accent-text-on-on-img-press",
+  "accent-text-on-on-img",
+  "accent-text-on-negative-hover",
+  "accent-text-on-negative-press",
+  "accent-text-on-negative",
+  "accent-text-on-positive-hover",
+  "accent-text-on-positive-press",
+  "accent-text-on-positive",
+  "accent-text-on-notice-hover",
+  "accent-text-on-notice-press",
+  "accent-text-on-notice",
+  "accent-text-on-discovery-hover",
+  "accent-text-on-discovery-press",
+  "accent-text-on-discovery",
+  "accent-text-on-hud-hover",
+  "accent-text-on-hud-press",
+  "accent-text-on-hud",
+  "accent-text-brand-premium-hover",
+  "accent-text-brand-premium-press",
+  "accent-text-brand-premium",
+  "accent-text",
+  "accent-border-hover",
+  "accent-border-press",
+  "accent-border-secondary",
+  "accent-border-focus-1",
+  "accent-border-focus-2",
+  "accent-border-focus-legacy",
+  "accent-border-disable",
+  "accent-border-selected",
+  "accent-border-negative",
+  "accent-border-hud",
+  "accent-border",
+  "accent-auto",
+  "opacity-0",
+  "opacity-5",
+  "opacity-10",
+  "opacity-20",
+  "opacity-25",
+  "opacity-30",
+  "opacity-40",
+  "opacity-50",
+  "opacity-60",
+  "opacity-70",
+  "opacity-75",
+  "opacity-80",
+  "opacity-90",
+  "opacity-95",
+  "opacity-100",
+  "bg-blend-normal",
+  "bg-blend-multiply",
+  "bg-blend-screen",
+  "bg-blend-overlay",
+  "bg-blend-darken",
+  "bg-blend-lighten",
+  "bg-blend-color-dodge",
+  "bg-blend-color-burn",
+  "bg-blend-hard-light",
+  "bg-blend-soft-light",
+  "bg-blend-difference",
+  "bg-blend-exclusion",
+  "bg-blend-hue",
+  "bg-blend-saturation",
+  "bg-blend-color",
+  "bg-blend-luminosity",
+  "mix-blend-normal",
+  "mix-blend-multiply",
+  "mix-blend-screen",
+  "mix-blend-overlay",
+  "mix-blend-darken",
+  "mix-blend-lighten",
+  "mix-blend-color-dodge",
+  "mix-blend-color-burn",
+  "mix-blend-hard-light",
+  "mix-blend-soft-light",
+  "mix-blend-difference",
+  "mix-blend-exclusion",
+  "mix-blend-hue",
+  "mix-blend-saturation",
+  "mix-blend-color",
+  "mix-blend-luminosity",
+  "shadow-sm",
+  "shadow",
+  "shadow-md",
+  "shadow-lg",
+  "shadow-xl",
+  "shadow-2xl",
+  "shadow-inner",
+  "shadow-none",
+  "shadow-background-secondary",
+  "shadow-background-tertiary",
+  "shadow-background",
+  "shadow-container-hover",
+  "shadow-container-press",
+  "shadow-container-default-a",
+  "shadow-container-hover-a",
+  "shadow-container-press-a",
+  "shadow-container-disable",
+  "shadow-container-secondary-hover",
+  "shadow-container-secondary-press",
+  "shadow-container-secondary-default-a",
+  "shadow-container-secondary-hover-a",
+  "shadow-container-secondary-press-a",
+  "shadow-container-secondary",
+  "shadow-container-tertiary-hover",
+  "shadow-container-tertiary-press",
+  "shadow-container-tertiary-default-a",
+  "shadow-container-tertiary-hover-a",
+  "shadow-container-tertiary-pressA",
+  "shadow-container-tertiary",
+  "shadow-container-primary-hover",
+  "shadow-container-primary-press",
+  "shadow-container-primary",
+  "shadow-container-on-img-hover",
+  "shadow-container-on-img-press",
+  "shadow-container-on-img",
+  "shadow-container-negative-hover",
+  "shadow-container-negative-press",
+  "shadow-container-negative",
+  "shadow-container-positive-hover",
+  "shadow-container-positive-press",
+  "shadow-container-positive",
+  "shadow-container-notice-hover",
+  "shadow-container-notice-press",
+  "shadow-container-notice",
+  "shadow-container-neutral-hover",
+  "shadow-container-neutral-press",
+  "shadow-container-neutral",
+  "shadow-container-discovery-hover",
+  "shadow-container-discovery-press",
+  "shadow-container-discovery",
+  "shadow-container-hud-hover",
+  "shadow-container-hud-press",
+  "shadow-container-hud",
+  "shadow-container-skeleton",
+  "shadow-container-subtle",
+  "shadow-container",
+  "shadow-icon-secondary-hover",
+  "shadow-icon-secondary-press",
+  "shadow-icon-secondary",
+  "shadow-icon-tertiary-hover",
+  "shadow-icon-tertiary-press",
+  "shadow-icon-tertiary",
+  "shadow-icon-negative-hover",
+  "shadow-icon-negative-press",
+  "shadow-icon-negative",
+  "shadow-icon-positive-hover",
+  "shadow-icon-positive-press",
+  "shadow-icon-positive",
+  "shadow-icon-notice-hover",
+  "shadow-icon-notice-press",
+  "shadow-icon-notice",
+  "shadow-icon-hover",
+  "shadow-icon-press",
+  "shadow-icon-disable",
+  "shadow-icon-on-primary-hover",
+  "shadow-icon-on-primary-press",
+  "shadow-icon-on-primary",
+  "shadow-icon-on-on-img-hover",
+  "shadow-icon-on-on-img-press",
+  "shadow-icon-on-on-img",
+  "shadow-icon-on-neutral-hover",
+  "shadow-icon-on-neutral-press",
+  "shadow-icon-on-neutral",
+  "shadow-icon-on-negative-hover",
+  "shadow-icon-on-negative-press",
+  "shadow-icon-on-negative",
+  "shadow-icon-on-positive-hover",
+  "shadow-icon-on-positive-press",
+  "shadow-icon-on-positive",
+  "shadow-icon-on-notice-hover",
+  "shadow-icon-on-notice-press",
+  "shadow-icon-on-notice",
+  "shadow-icon",
+  "shadow-text-hover",
+  "shadow-text-press",
+  "shadow-text-disable",
+  "shadow-text-secondary-hover",
+  "shadow-text-secondary-press",
+  "shadow-text-secondary",
+  "shadow-text-tertiary-hover",
+  "shadow-text-tertiary-press",
+  "shadow-text-tertiary",
+  "shadow-text-placeholder-hover",
+  "shadow-text-placeholder-press",
+  "shadow-text-placeholder",
+  "shadow-text-info-hover",
+  "shadow-text-info-press",
+  "shadow-text-info",
+  "shadow-text-visited-hover",
+  "shadow-text-visited-press",
+  "shadow-text-visited",
+  "shadow-text-negative-hover",
+  "shadow-text-negative-press",
+  "shadow-text-negative",
+  "shadow-text-notice-hover",
+  "shadow-text-notice-press",
+  "shadow-text-notice",
+  "shadow-text-positive-hover",
+  "shadow-text-positive-press",
+  "shadow-text-positive",
+  "shadow-text-on-primary-hover",
+  "shadow-text-on-primary-press",
+  "shadow-text-on-primary",
+  "shadow-text-on-on-img-hover",
+  "shadow-text-on-on-img-press",
+  "shadow-text-on-on-img",
+  "shadow-text-on-negative-hover",
+  "shadow-text-on-negative-press",
+  "shadow-text-on-negative",
+  "shadow-text-on-positive-hover",
+  "shadow-text-on-positive-press",
+  "shadow-text-on-positive",
+  "shadow-text-on-notice-hover",
+  "shadow-text-on-notice-press",
+  "shadow-text-on-notice",
+  "shadow-text-on-discovery-hover",
+  "shadow-text-on-discovery-press",
+  "shadow-text-on-discovery",
+  "shadow-text-on-hud-hover",
+  "shadow-text-on-hud-press",
+  "shadow-text-on-hud",
+  "shadow-text-brand-premium-hover",
+  "shadow-text-brand-premium-press",
+  "shadow-text-brand-premium",
+  "shadow-text",
+  "shadow-border-hover",
+  "shadow-border-press",
+  "shadow-border-secondary",
+  "shadow-border-focus-1",
+  "shadow-border-focus-2",
+  "shadow-border-focus-legacy",
+  "shadow-border-disable",
+  "shadow-border-selected",
+  "shadow-border-negative",
+  "shadow-border-hud",
+  "shadow-border",
+  "outline-none",
+  "outline",
+  "outline-dashed",
+  "outline-dotted",
+  "outline-double",
+  "outline-hidden",
+  "outline-0",
+  "outline-1",
+  "outline-2",
+  "outline-4",
+  "outline-8",
+  "outline-offset-0",
+  "outline-offset-1",
+  "outline-offset-2",
+  "outline-offset-4",
+  "outline-offset-8",
+  "outline-background-secondary",
+  "outline-background-tertiary",
+  "outline-background",
+  "outline-container-hover",
+  "outline-container-press",
+  "outline-container-default-a",
+  "outline-container-hover-a",
+  "outline-container-press-a",
+  "outline-container-disable",
+  "outline-container-secondary-hover",
+  "outline-container-secondary-press",
+  "outline-container-secondary-default-a",
+  "outline-container-secondary-hover-a",
+  "outline-container-secondary-press-a",
+  "outline-container-secondary",
+  "outline-container-tertiary-hover",
+  "outline-container-tertiary-press",
+  "outline-container-tertiary-default-a",
+  "outline-container-tertiary-hover-a",
+  "outline-container-tertiary-pressA",
+  "outline-container-tertiary",
+  "outline-container-primary-hover",
+  "outline-container-primary-press",
+  "outline-container-primary",
+  "outline-container-on-img-hover",
+  "outline-container-on-img-press",
+  "outline-container-on-img",
+  "outline-container-negative-hover",
+  "outline-container-negative-press",
+  "outline-container-negative",
+  "outline-container-positive-hover",
+  "outline-container-positive-press",
+  "outline-container-positive",
+  "outline-container-notice-hover",
+  "outline-container-notice-press",
+  "outline-container-notice",
+  "outline-container-neutral-hover",
+  "outline-container-neutral-press",
+  "outline-container-neutral",
+  "outline-container-discovery-hover",
+  "outline-container-discovery-press",
+  "outline-container-discovery",
+  "outline-container-hud-hover",
+  "outline-container-hud-press",
+  "outline-container-hud",
+  "outline-container-skeleton",
+  "outline-container-subtle",
+  "outline-container",
+  "outline-icon-secondary-hover",
+  "outline-icon-secondary-press",
+  "outline-icon-secondary",
+  "outline-icon-tertiary-hover",
+  "outline-icon-tertiary-press",
+  "outline-icon-tertiary",
+  "outline-icon-negative-hover",
+  "outline-icon-negative-press",
+  "outline-icon-negative",
+  "outline-icon-positive-hover",
+  "outline-icon-positive-press",
+  "outline-icon-positive",
+  "outline-icon-notice-hover",
+  "outline-icon-notice-press",
+  "outline-icon-notice",
+  "outline-icon-hover",
+  "outline-icon-press",
+  "outline-icon-disable",
+  "outline-icon-on-primary-hover",
+  "outline-icon-on-primary-press",
+  "outline-icon-on-primary",
+  "outline-icon-on-on-img-hover",
+  "outline-icon-on-on-img-press",
+  "outline-icon-on-on-img",
+  "outline-icon-on-neutral-hover",
+  "outline-icon-on-neutral-press",
+  "outline-icon-on-neutral",
+  "outline-icon-on-negative-hover",
+  "outline-icon-on-negative-press",
+  "outline-icon-on-negative",
+  "outline-icon-on-positive-hover",
+  "outline-icon-on-positive-press",
+  "outline-icon-on-positive",
+  "outline-icon-on-notice-hover",
+  "outline-icon-on-notice-press",
+  "outline-icon-on-notice",
+  "outline-icon",
+  "outline-text-hover",
+  "outline-text-press",
+  "outline-text-disable",
+  "outline-text-secondary-hover",
+  "outline-text-secondary-press",
+  "outline-text-secondary",
+  "outline-text-tertiary-hover",
+  "outline-text-tertiary-press",
+  "outline-text-tertiary",
+  "outline-text-placeholder-hover",
+  "outline-text-placeholder-press",
+  "outline-text-placeholder",
+  "outline-text-info-hover",
+  "outline-text-info-press",
+  "outline-text-info",
+  "outline-text-visited-hover",
+  "outline-text-visited-press",
+  "outline-text-visited",
+  "outline-text-negative-hover",
+  "outline-text-negative-press",
+  "outline-text-negative",
+  "outline-text-notice-hover",
+  "outline-text-notice-press",
+  "outline-text-notice",
+  "outline-text-positive-hover",
+  "outline-text-positive-press",
+  "outline-text-positive",
+  "outline-text-on-primary-hover",
+  "outline-text-on-primary-press",
+  "outline-text-on-primary",
+  "outline-text-on-on-img-hover",
+  "outline-text-on-on-img-press",
+  "outline-text-on-on-img",
+  "outline-text-on-negative-hover",
+  "outline-text-on-negative-press",
+  "outline-text-on-negative",
+  "outline-text-on-positive-hover",
+  "outline-text-on-positive-press",
+  "outline-text-on-positive",
+  "outline-text-on-notice-hover",
+  "outline-text-on-notice-press",
+  "outline-text-on-notice",
+  "outline-text-on-discovery-hover",
+  "outline-text-on-discovery-press",
+  "outline-text-on-discovery",
+  "outline-text-on-hud-hover",
+  "outline-text-on-hud-press",
+  "outline-text-on-hud",
+  "outline-text-brand-premium-hover",
+  "outline-text-brand-premium-press",
+  "outline-text-brand-premium",
+  "outline-text",
+  "outline-border-hover",
+  "outline-border-press",
+  "outline-border-secondary",
+  "outline-border-focus-1",
+  "outline-border-focus-2",
+  "outline-border-focus-legacy",
+  "outline-border-disable",
+  "outline-border-selected",
+  "outline-border-negative",
+  "outline-border-hud",
+  "outline-border",
+  "ring-0",
+  "ring-1",
+  "ring-2",
+  "ring-4",
+  "ring-8",
+  "ring",
+  "ring-inset",
+  "ring-background-secondary",
+  "ring-background-tertiary",
+  "ring-background",
+  "ring-container-hover",
+  "ring-container-press",
+  "ring-container-default-a",
+  "ring-container-hover-a",
+  "ring-container-press-a",
+  "ring-container-disable",
+  "ring-container-secondary-hover",
+  "ring-container-secondary-press",
+  "ring-container-secondary-default-a",
+  "ring-container-secondary-hover-a",
+  "ring-container-secondary-press-a",
+  "ring-container-secondary",
+  "ring-container-tertiary-hover",
+  "ring-container-tertiary-press",
+  "ring-container-tertiary-default-a",
+  "ring-container-tertiary-hover-a",
+  "ring-container-tertiary-pressA",
+  "ring-container-tertiary",
+  "ring-container-primary-hover",
+  "ring-container-primary-press",
+  "ring-container-primary",
+  "ring-container-on-img-hover",
+  "ring-container-on-img-press",
+  "ring-container-on-img",
+  "ring-container-negative-hover",
+  "ring-container-negative-press",
+  "ring-container-negative",
+  "ring-container-positive-hover",
+  "ring-container-positive-press",
+  "ring-container-positive",
+  "ring-container-notice-hover",
+  "ring-container-notice-press",
+  "ring-container-notice",
+  "ring-container-neutral-hover",
+  "ring-container-neutral-press",
+  "ring-container-neutral",
+  "ring-container-discovery-hover",
+  "ring-container-discovery-press",
+  "ring-container-discovery",
+  "ring-container-hud-hover",
+  "ring-container-hud-press",
+  "ring-container-hud",
+  "ring-container-skeleton",
+  "ring-container-subtle",
+  "ring-container",
+  "ring-icon-secondary-hover",
+  "ring-icon-secondary-press",
+  "ring-icon-secondary",
+  "ring-icon-tertiary-hover",
+  "ring-icon-tertiary-press",
+  "ring-icon-tertiary",
+  "ring-icon-negative-hover",
+  "ring-icon-negative-press",
+  "ring-icon-negative",
+  "ring-icon-positive-hover",
+  "ring-icon-positive-press",
+  "ring-icon-positive",
+  "ring-icon-notice-hover",
+  "ring-icon-notice-press",
+  "ring-icon-notice",
+  "ring-icon-hover",
+  "ring-icon-press",
+  "ring-icon-disable",
+  "ring-icon-on-primary-hover",
+  "ring-icon-on-primary-press",
+  "ring-icon-on-primary",
+  "ring-icon-on-on-img-hover",
+  "ring-icon-on-on-img-press",
+  "ring-icon-on-on-img",
+  "ring-icon-on-neutral-hover",
+  "ring-icon-on-neutral-press",
+  "ring-icon-on-neutral",
+  "ring-icon-on-negative-hover",
+  "ring-icon-on-negative-press",
+  "ring-icon-on-negative",
+  "ring-icon-on-positive-hover",
+  "ring-icon-on-positive-press",
+  "ring-icon-on-positive",
+  "ring-icon-on-notice-hover",
+  "ring-icon-on-notice-press",
+  "ring-icon-on-notice",
+  "ring-icon",
+  "ring-text-hover",
+  "ring-text-press",
+  "ring-text-disable",
+  "ring-text-secondary-hover",
+  "ring-text-secondary-press",
+  "ring-text-secondary",
+  "ring-text-tertiary-hover",
+  "ring-text-tertiary-press",
+  "ring-text-tertiary",
+  "ring-text-placeholder-hover",
+  "ring-text-placeholder-press",
+  "ring-text-placeholder",
+  "ring-text-info-hover",
+  "ring-text-info-press",
+  "ring-text-info",
+  "ring-text-visited-hover",
+  "ring-text-visited-press",
+  "ring-text-visited",
+  "ring-text-negative-hover",
+  "ring-text-negative-press",
+  "ring-text-negative",
+  "ring-text-notice-hover",
+  "ring-text-notice-press",
+  "ring-text-notice",
+  "ring-text-positive-hover",
+  "ring-text-positive-press",
+  "ring-text-positive",
+  "ring-text-on-primary-hover",
+  "ring-text-on-primary-press",
+  "ring-text-on-primary",
+  "ring-text-on-on-img-hover",
+  "ring-text-on-on-img-press",
+  "ring-text-on-on-img",
+  "ring-text-on-negative-hover",
+  "ring-text-on-negative-press",
+  "ring-text-on-negative",
+  "ring-text-on-positive-hover",
+  "ring-text-on-positive-press",
+  "ring-text-on-positive",
+  "ring-text-on-notice-hover",
+  "ring-text-on-notice-press",
+  "ring-text-on-notice",
+  "ring-text-on-discovery-hover",
+  "ring-text-on-discovery-press",
+  "ring-text-on-discovery",
+  "ring-text-on-hud-hover",
+  "ring-text-on-hud-press",
+  "ring-text-on-hud",
+  "ring-text-brand-premium-hover",
+  "ring-text-brand-premium-press",
+  "ring-text-brand-premium",
+  "ring-text",
+  "ring-border-hover",
+  "ring-border-press",
+  "ring-border-secondary",
+  "ring-border-focus-1",
+  "ring-border-focus-2",
+  "ring-border-focus-legacy",
+  "ring-border-disable",
+  "ring-border-selected",
+  "ring-border-negative",
+  "ring-border-hud",
+  "ring-border",
+  "ring-opacity-0",
+  "ring-opacity-5",
+  "ring-opacity-10",
+  "ring-opacity-20",
+  "ring-opacity-25",
+  "ring-opacity-30",
+  "ring-opacity-40",
+  "ring-opacity-50",
+  "ring-opacity-60",
+  "ring-opacity-70",
+  "ring-opacity-75",
+  "ring-opacity-80",
+  "ring-opacity-90",
+  "ring-opacity-95",
+  "ring-opacity-100",
+  "ring-offset-0",
+  "ring-offset-1",
+  "ring-offset-2",
+  "ring-offset-4",
+  "ring-offset-8",
+  "ring-offset-background-secondary",
+  "ring-offset-background-tertiary",
+  "ring-offset-background",
+  "ring-offset-container-hover",
+  "ring-offset-container-press",
+  "ring-offset-container-default-a",
+  "ring-offset-container-hover-a",
+  "ring-offset-container-press-a",
+  "ring-offset-container-disable",
+  "ring-offset-container-secondary-hover",
+  "ring-offset-container-secondary-press",
+  "ring-offset-container-secondary-default-a",
+  "ring-offset-container-secondary-hover-a",
+  "ring-offset-container-secondary-press-a",
+  "ring-offset-container-secondary",
+  "ring-offset-container-tertiary-hover",
+  "ring-offset-container-tertiary-press",
+  "ring-offset-container-tertiary-default-a",
+  "ring-offset-container-tertiary-hover-a",
+  "ring-offset-container-tertiary-pressA",
+  "ring-offset-container-tertiary",
+  "ring-offset-container-primary-hover",
+  "ring-offset-container-primary-press",
+  "ring-offset-container-primary",
+  "ring-offset-container-on-img-hover",
+  "ring-offset-container-on-img-press",
+  "ring-offset-container-on-img",
+  "ring-offset-container-negative-hover",
+  "ring-offset-container-negative-press",
+  "ring-offset-container-negative",
+  "ring-offset-container-positive-hover",
+  "ring-offset-container-positive-press",
+  "ring-offset-container-positive",
+  "ring-offset-container-notice-hover",
+  "ring-offset-container-notice-press",
+  "ring-offset-container-notice",
+  "ring-offset-container-neutral-hover",
+  "ring-offset-container-neutral-press",
+  "ring-offset-container-neutral",
+  "ring-offset-container-discovery-hover",
+  "ring-offset-container-discovery-press",
+  "ring-offset-container-discovery",
+  "ring-offset-container-hud-hover",
+  "ring-offset-container-hud-press",
+  "ring-offset-container-hud",
+  "ring-offset-container-skeleton",
+  "ring-offset-container-subtle",
+  "ring-offset-container",
+  "ring-offset-icon-secondary-hover",
+  "ring-offset-icon-secondary-press",
+  "ring-offset-icon-secondary",
+  "ring-offset-icon-tertiary-hover",
+  "ring-offset-icon-tertiary-press",
+  "ring-offset-icon-tertiary",
+  "ring-offset-icon-negative-hover",
+  "ring-offset-icon-negative-press",
+  "ring-offset-icon-negative",
+  "ring-offset-icon-positive-hover",
+  "ring-offset-icon-positive-press",
+  "ring-offset-icon-positive",
+  "ring-offset-icon-notice-hover",
+  "ring-offset-icon-notice-press",
+  "ring-offset-icon-notice",
+  "ring-offset-icon-hover",
+  "ring-offset-icon-press",
+  "ring-offset-icon-disable",
+  "ring-offset-icon-on-primary-hover",
+  "ring-offset-icon-on-primary-press",
+  "ring-offset-icon-on-primary",
+  "ring-offset-icon-on-on-img-hover",
+  "ring-offset-icon-on-on-img-press",
+  "ring-offset-icon-on-on-img",
+  "ring-offset-icon-on-neutral-hover",
+  "ring-offset-icon-on-neutral-press",
+  "ring-offset-icon-on-neutral",
+  "ring-offset-icon-on-negative-hover",
+  "ring-offset-icon-on-negative-press",
+  "ring-offset-icon-on-negative",
+  "ring-offset-icon-on-positive-hover",
+  "ring-offset-icon-on-positive-press",
+  "ring-offset-icon-on-positive",
+  "ring-offset-icon-on-notice-hover",
+  "ring-offset-icon-on-notice-press",
+  "ring-offset-icon-on-notice",
+  "ring-offset-icon",
+  "ring-offset-text-hover",
+  "ring-offset-text-press",
+  "ring-offset-text-disable",
+  "ring-offset-text-secondary-hover",
+  "ring-offset-text-secondary-press",
+  "ring-offset-text-secondary",
+  "ring-offset-text-tertiary-hover",
+  "ring-offset-text-tertiary-press",
+  "ring-offset-text-tertiary",
+  "ring-offset-text-placeholder-hover",
+  "ring-offset-text-placeholder-press",
+  "ring-offset-text-placeholder",
+  "ring-offset-text-info-hover",
+  "ring-offset-text-info-press",
+  "ring-offset-text-info",
+  "ring-offset-text-visited-hover",
+  "ring-offset-text-visited-press",
+  "ring-offset-text-visited",
+  "ring-offset-text-negative-hover",
+  "ring-offset-text-negative-press",
+  "ring-offset-text-negative",
+  "ring-offset-text-notice-hover",
+  "ring-offset-text-notice-press",
+  "ring-offset-text-notice",
+  "ring-offset-text-positive-hover",
+  "ring-offset-text-positive-press",
+  "ring-offset-text-positive",
+  "ring-offset-text-on-primary-hover",
+  "ring-offset-text-on-primary-press",
+  "ring-offset-text-on-primary",
+  "ring-offset-text-on-on-img-hover",
+  "ring-offset-text-on-on-img-press",
+  "ring-offset-text-on-on-img",
+  "ring-offset-text-on-negative-hover",
+  "ring-offset-text-on-negative-press",
+  "ring-offset-text-on-negative",
+  "ring-offset-text-on-positive-hover",
+  "ring-offset-text-on-positive-press",
+  "ring-offset-text-on-positive",
+  "ring-offset-text-on-notice-hover",
+  "ring-offset-text-on-notice-press",
+  "ring-offset-text-on-notice",
+  "ring-offset-text-on-discovery-hover",
+  "ring-offset-text-on-discovery-press",
+  "ring-offset-text-on-discovery",
+  "ring-offset-text-on-hud-hover",
+  "ring-offset-text-on-hud-press",
+  "ring-offset-text-on-hud",
+  "ring-offset-text-brand-premium-hover",
+  "ring-offset-text-brand-premium-press",
+  "ring-offset-text-brand-premium",
+  "ring-offset-text",
+  "ring-offset-border-hover",
+  "ring-offset-border-press",
+  "ring-offset-border-secondary",
+  "ring-offset-border-focus-1",
+  "ring-offset-border-focus-2",
+  "ring-offset-border-focus-legacy",
+  "ring-offset-border-disable",
+  "ring-offset-border-selected",
+  "ring-offset-border-negative",
+  "ring-offset-border-hud",
+  "ring-offset-border",
+  "blur-0",
+  "blur-none",
+  "blur-sm",
+  "blur",
+  "blur-md",
+  "blur-lg",
+  "blur-xl",
+  "blur-2xl",
+  "blur-3xl",
+  "brightness-0",
+  "brightness-50",
+  "brightness-75",
+  "brightness-90",
+  "brightness-95",
+  "brightness-100",
+  "brightness-105",
+  "brightness-110",
+  "brightness-125",
+  "brightness-150",
+  "brightness-200",
+  "contrast-0",
+  "contrast-50",
+  "contrast-75",
+  "contrast-100",
+  "contrast-125",
+  "contrast-150",
+  "contrast-200",
+  "drop-shadow-sm",
+  "drop-shadow",
+  "drop-shadow-md",
+  "drop-shadow-lg",
+  "drop-shadow-xl",
+  "drop-shadow-2xl",
+  "drop-shadow-none",
+  "grayscale-0",
+  "grayscale",
+  "hue-rotate-0",
+  "hue-rotate-15",
+  "hue-rotate-30",
+  "hue-rotate-60",
+  "hue-rotate-90",
+  "hue-rotate-180",
+  "-hue-rotate-0",
+  "-hue-rotate-15",
+  "-hue-rotate-30",
+  "-hue-rotate-60",
+  "-hue-rotate-90",
+  "-hue-rotate-180",
+  "invert-0",
+  "invert",
+  "saturate-0",
+  "saturate-50",
+  "saturate-100",
+  "saturate-150",
+  "saturate-200",
+  "sepia-0",
+  "sepia",
+  "filter",
+  "filter-none",
+  "backdrop-blur-0",
+  "backdrop-blur-none",
+  "backdrop-blur-sm",
+  "backdrop-blur",
+  "backdrop-blur-md",
+  "backdrop-blur-lg",
+  "backdrop-blur-xl",
+  "backdrop-blur-2xl",
+  "backdrop-blur-3xl",
+  "backdrop-brightness-0",
+  "backdrop-brightness-50",
+  "backdrop-brightness-75",
+  "backdrop-brightness-90",
+  "backdrop-brightness-95",
+  "backdrop-brightness-100",
+  "backdrop-brightness-105",
+  "backdrop-brightness-110",
+  "backdrop-brightness-125",
+  "backdrop-brightness-150",
+  "backdrop-brightness-200",
+  "backdrop-contrast-0",
+  "backdrop-contrast-50",
+  "backdrop-contrast-75",
+  "backdrop-contrast-100",
+  "backdrop-contrast-125",
+  "backdrop-contrast-150",
+  "backdrop-contrast-200",
+  "backdrop-grayscale-0",
+  "backdrop-grayscale",
+  "backdrop-hue-rotate-0",
+  "backdrop-hue-rotate-15",
+  "backdrop-hue-rotate-30",
+  "backdrop-hue-rotate-60",
+  "backdrop-hue-rotate-90",
+  "backdrop-hue-rotate-180",
+  "-backdrop-hue-rotate-0",
+  "-backdrop-hue-rotate-15",
+  "-backdrop-hue-rotate-30",
+  "-backdrop-hue-rotate-60",
+  "-backdrop-hue-rotate-90",
+  "-backdrop-hue-rotate-180",
+  "backdrop-invert-0",
+  "backdrop-invert",
+  "backdrop-opacity-0",
+  "backdrop-opacity-5",
+  "backdrop-opacity-10",
+  "backdrop-opacity-20",
+  "backdrop-opacity-25",
+  "backdrop-opacity-30",
+  "backdrop-opacity-40",
+  "backdrop-opacity-50",
+  "backdrop-opacity-60",
+  "backdrop-opacity-70",
+  "backdrop-opacity-75",
+  "backdrop-opacity-80",
+  "backdrop-opacity-90",
+  "backdrop-opacity-95",
+  "backdrop-opacity-100",
+  "backdrop-saturate-0",
+  "backdrop-saturate-50",
+  "backdrop-saturate-100",
+  "backdrop-saturate-150",
+  "backdrop-saturate-200",
+  "backdrop-sepia-0",
+  "backdrop-sepia",
+  "backdrop-filter",
+  "backdrop-filter-none",
+  "transition-none",
+  "transition-all",
+  "transition",
+  "transition-colors",
+  "transition-opacity",
+  "transition-shadow",
+  "transition-transform",
+  "delay-75",
+  "delay-100",
+  "delay-150",
+  "delay-200",
+  "delay-300",
+  "delay-500",
+  "delay-700",
+  "delay-1000",
+  "duration-75",
+  "duration-100",
+  "duration-150",
+  "duration-200",
+  "duration-300",
+  "duration-500",
+  "duration-700",
+  "duration-1000",
+  "ease-linear",
+  "ease-in",
+  "ease-out",
+  "ease-in-out",
+  "will-change-auto",
+  "will-change-scroll",
+  "will-change-contents",
+  "will-change-transform",
+  "content-none",
+  "container",
+]
+`;
diff --git a/packages/tailwind-config/src/util.ts b/packages/tailwind-config/src/util.ts
index cbc871e33..bcb5faef5 100644
--- a/packages/tailwind-config/src/util.ts
+++ b/packages/tailwind-config/src/util.ts
@@ -71,3 +71,31 @@ export function camelToKebab(value: string) {
     .replace(/(?<small>[\da-z]|(?=[A-Z]))(?<capital>[A-Z])/gu, '$1-$2')
     .toLowerCase()
 }
+
+export const mapDefault = <O extends object>(o: O) => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  return JSON.parse(JSON.stringify(o), function reviver(k: string, v: string) {
+    if (k === 'default') {
+      const DefaultKey = getDefaultKeyName('v3')
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      this[DefaultKey] = v
+      return undefined
+    }
+    return v
+  })
+}
+
+export const flattenKey = <O extends object>(
+  o: O,
+  join?: (key: string) => boolean
+) => {
+  return Object.fromEntries(
+    // @ts-expect-error FIXME
+    Object.entries(o).flatMap(([key, v]) => {
+      if (typeof v === 'string') return [[key, v]]
+      return Object.entries(v as object).map(([kk, vv]) => {
+        return [join?.(key) ?? true ? [key, kk].join('-') : kk, vv]
+      })
+    })
+  )
+}
diff --git a/packages/tailwind-config/src/v2.test.ts b/packages/tailwind-config/src/v2.test.ts
new file mode 100644
index 000000000..6002384eb
--- /dev/null
+++ b/packages/tailwind-config/src/v2.test.ts
@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { TailwindBuild } from './_lib/TailwindBuild'
+import light from '@charcoal-ui/theme/tokens/css-variables.json'
+import { TailwindConfig } from 'tailwindcss/tailwind-config'
+import { flattenKey, mapDefault } from './util'
+
+describe('v2', async () => {
+  const fontSize = Object.fromEntries(
+    Object.entries(light.text['font-size']).flatMap(([k, v]) => {
+      if (typeof v === 'string') {
+        return [
+          [
+            k,
+            // @ts-expect-error k should be keyof line-height
+            [v, { lineHeight: light.text['line-height'][k] }],
+          ],
+        ]
+      }
+
+      return Object.entries(v as Record<string, string>).map(([kk, vv]) => {
+        return [
+          [k, kk].join('-'),
+          // @ts-expect-error k should be keyof line-height
+          [vv, { lineHeight: light.text['line-height'][k][kk] }],
+        ]
+      })
+    })
+  )
+
+  const config: TailwindConfig = {
+    theme: {
+      colors: mapDefault(light.color),
+      spacing: flattenKey(light.space, (key) => key.includes('between')),
+      width: light['paragraph-width'],
+      borderWidth: flattenKey(light['border-width']),
+      borderRadius: light.radius,
+      // @ts-expect-error FIXME
+      fontSize,
+      fontWeight: light.text['font-weight'],
+      darkMode: false,
+    },
+  }
+
+  const result = await TailwindBuild.run(
+    config,
+    `
+        @import 'tailwindcss/base';
+        @import 'tailwindcss/utilities';
+        @import 'tailwindcss/components';
+      `
+  )
+  test('config object', () => {
+    expect(config).toMatchSnapshot()
+  })
+
+  test('list of classes', () => {
+    expect(result.classNames).toMatchSnapshot()
+  })
+})
diff --git a/packages/tailwind-config/tsconfig.json b/packages/tailwind-config/tsconfig.json
index ce897777d..fb1469f44 100644
--- a/packages/tailwind-config/tsconfig.json
+++ b/packages/tailwind-config/tsconfig.json
@@ -1,4 +1,7 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["./src"]
+  "include": ["./src"],
+  "compilerOptions": {
+    "resolveJsonModule": true
+  }
 }
diff --git a/packages/tailwind-config/vitest.config.ts b/packages/tailwind-config/vitest.config.ts
index a23f77a7e..874075f84 100644
--- a/packages/tailwind-config/vitest.config.ts
+++ b/packages/tailwind-config/vitest.config.ts
@@ -1,17 +1,17 @@
 import { defineConfig } from 'vitest/config'
 
-import * as path from 'node:path'
+// import * as path from 'node:path'
 
 export default defineConfig({
   test: {
     globals: true,
     environment: 'jsdom',
     setupFiles: ['../../vitest.setup.ts'],
-    alias: [
-      {
-        find: /@charcoal-ui\/(.*)/,
-        replacement: path.join(path.resolve(__dirname, '..'), '$1', 'src'),
-      },
-    ],
+    // alias: [
+    //   {
+    //     find: /@charcoal-ui\/(.*)/,
+    //     replacement: path.join(path.resolve(__dirname, '..'), '$1', 'src'),
+    //   },
+    // ],
   },
 })

From 9dd785285ed98f1880e896916641b10376f285f5 Mon Sep 17 00:00:00 2001
From: yue <yue@pixiv.co.jp>
Date: Fri, 22 Nov 2024 14:06:51 +0900
Subject: [PATCH 3/3] feat: token v2 demo tailwind

---
 .storybook/tailwind.config.js           |   6 +-
 packages/react/docs/TokenV2Styled.tsx   | 205 +++++++++++++++++++++++
 packages/react/docs/TokenV2Tailwind.tsx |  90 ++++++++++
 packages/react/docs/token-v2.story.tsx  | 211 +-----------------------
 packages/tailwind-config/src/index.ts   |   1 +
 packages/tailwind-config/src/tokenV2.ts |  55 ++++++
 packages/tailwind-config/src/util.ts    |  14 +-
 7 files changed, 375 insertions(+), 207 deletions(-)
 create mode 100644 packages/react/docs/TokenV2Styled.tsx
 create mode 100644 packages/react/docs/TokenV2Tailwind.tsx
 create mode 100644 packages/tailwind-config/src/tokenV2.ts

diff --git a/.storybook/tailwind.config.js b/.storybook/tailwind.config.js
index 964250451..2cfcab527 100644
--- a/.storybook/tailwind.config.js
+++ b/.storybook/tailwind.config.js
@@ -1,5 +1,8 @@
 const { light, dark } = require('@charcoal-ui/theme')
-const { createTailwindConfig } = require('@charcoal-ui/tailwind-config')
+const {
+  createTailwindConfig,
+  createTailwindConfigTokenV2,
+} = require('@charcoal-ui/tailwind-config')
 
 /**
  * @type {import('tailwindcss/tailwind-config').TailwindConfig}
@@ -15,6 +18,7 @@ module.exports = {
         '[data-dark="true"]': dark,
       },
     }),
+    createTailwindConfigTokenV2(),
   ],
   corePlugins: {
     preflight: false,
diff --git a/packages/react/docs/TokenV2Styled.tsx b/packages/react/docs/TokenV2Styled.tsx
new file mode 100644
index 000000000..b25c9ae5a
--- /dev/null
+++ b/packages/react/docs/TokenV2Styled.tsx
@@ -0,0 +1,205 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* lint runs before build so json does not exist */
+
+import React, { useState } from 'react'
+import styled from 'styled-components'
+// This does not work :(
+// import tokens from '@charcoal-ui/theme/tokens/camel/css-variables.json'
+import tokens from '../../theme/dist/tokens/camel/css-variables.json'
+import { Button, Icon } from '@charcoal-ui/react'
+
+const categories = ['Illustration', 'Comic', 'Novel', '3D', 'Shopping']
+const artworks = Array.from({ length: 3 }, (_, id) => ({
+  id,
+  title: 'Title',
+  thumbnail: `https://loremflickr.com/150/100/animals?random=${id}`,
+  description: 'Description',
+}))
+
+export default function TokenV2Styled() {
+  const [selected, setSelected] = useState(categories[0])
+  return (
+    <Container>
+      <nav>
+        <div aria-label="Categories" role="tablist">
+          {categories.map((category) => (
+            <Tab
+              id={`category-${category}`}
+              role="tab"
+              aria-selected={category === selected}
+              aria-controls={`panel-${category}`}
+              key={category}
+              onClick={() => {
+                setSelected(category)
+              }}
+            >
+              {category}
+            </Tab>
+          ))}
+        </div>
+      </nav>
+      <H2>Works from users you follow</H2>
+      <UserCard
+        id={`panel-${selected}`}
+        role="tabpanel"
+        aria-labelledby={`category-${selected}`}
+      >
+        <UserInfo>
+          <User aria-label="UserIcon">
+            <Icon name="24/FaceEdit" />
+          </User>
+          <UserName>UserName</UserName>
+          <Button variant="Primary" size="S">
+            Follow
+          </Button>
+        </UserInfo>
+        <ShowAll>Show all</ShowAll>
+        <ArtworkList key={selected}>
+          {artworks.map((a) => (
+            <li key={a.id}>
+              <Artwork>
+                <ArtworkThumbnail src={a.thumbnail} alt={a.title} />
+                <ArtworkTitle>{a.title}</ArtworkTitle>
+                <ArtworkDescription>{a.description}</ArtworkDescription>
+              </Artwork>
+            </li>
+          ))}
+        </ArtworkList>
+      </UserCard>
+    </Container>
+  )
+}
+
+const Container = styled.section`
+  transition: 0.3s color ease-in-out;
+  display: grid;
+  gap: 24px;
+  max-width: fit-content;
+`
+
+const H2 = styled.h2`
+  margin: 0;
+  color: ${tokens.color.text.secondary.default};
+  font-size: calc(${tokens.text.fontSize.heading.xs} * 1px);
+  line-height: calc(${tokens.text.lineHeight.heading.xs} * 1px);
+`
+
+const Tab = styled.a`
+  cursor: pointer;
+  font-weight: bold;
+  font-size: calc(${tokens.text.fontSize.body} * 1px);
+  line-height: calc(${tokens.text.lineHeight.body} * 1px);
+  padding: 13px calc(${tokens.space.layout[30]} * 1px);
+  border-top: 2px transparent;
+
+  color: ${tokens.color.text.tertiary.default};
+  &:hover {
+    color: ${tokens.color.text.tertiary.hover};
+  }
+  &:active {
+    color: ${tokens.color.text.tertiary.press};
+  }
+
+  &[aria-selected='true'] {
+    color: ${tokens.color.text.default};
+    border-top: 2px solid ${tokens.color.border.selected};
+    &:hover {
+      color: ${tokens.color.text.hover};
+    }
+    &:active {
+      color: ${tokens.color.text.press};
+    }
+  }
+`
+
+const UserCard = styled.div`
+  display: grid;
+  grid-template-areas:
+    'UserInfo     .           ShowAll'
+    'ArtworkList  ArtworkList ArtworkList';
+`
+
+const UserInfo = styled.div`
+  grid-area: UserInfo;
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: left;
+  align-items: center;
+  gap: calc(${tokens.space.layout[20]} * 1px);
+`
+
+const User = styled.a`
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border-radius: calc(${tokens.radius.oval} * 1px);
+  cursor: pointer;
+
+  color: ${tokens.color.icon.default};
+  background-color: ${tokens.color.container.secondary.default};
+  &:hover {
+    color: ${tokens.color.icon.hover};
+    background-color: ${tokens.color.container.secondary.hover};
+  }
+  &:active {
+    color: ${tokens.color.icon.press};
+    background-color: ${tokens.color.container.secondary.press};
+  }
+`
+
+const UserName = styled.span`
+  color: ${tokens.color.text.default};
+  font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
+  line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
+  font-weight: bold;
+`
+
+const ShowAll = styled.a`
+  grid-area: ShowAll;
+  cursor: pointer;
+  color: ${tokens.color.text.tertiary.default};
+  &:hover {
+    color: ${tokens.color.text.tertiary.hover};
+  }
+  &:active {
+    color: ${tokens.color.text.tertiary.press};
+  }
+  text-align: right;
+  align-content: center;
+  font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
+  line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
+`
+
+const ArtworkList = styled.ul`
+  grid-area: ArtworkList;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: calc(${tokens.space.layout[20]} * 1px);
+  list-style: none;
+  padding: 0;
+  max-width: 424px;
+`
+
+const Artwork = styled.article`
+  display: grid;
+  gap: calc(${tokens.space.layout[10]} * 1px);
+`
+const ArtworkThumbnail = styled.img`
+  width: 100%;
+  aspect-ratio: 3 / 2;
+  border-radius: calc(${tokens.radius.m} * 1px);
+`
+const ArtworkTitle = styled.h3`
+  color: ${tokens.color.text.default};
+  font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
+  line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
+  margin: 0;
+`
+const ArtworkDescription = styled.p`
+  margin: 0;
+  color: ${tokens.color.text.tertiary.default};
+  font-size: calc(${tokens.text.fontSize.caption.s} * 1px);
+  line-height: calc(${tokens.text.lineHeight.caption.s} * 1px);
+`
diff --git a/packages/react/docs/TokenV2Tailwind.tsx b/packages/react/docs/TokenV2Tailwind.tsx
new file mode 100644
index 000000000..4d45ca535
--- /dev/null
+++ b/packages/react/docs/TokenV2Tailwind.tsx
@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* lint runs before build so json does not exist */
+
+import React, { useState } from 'react'
+import { Button, Icon } from '@charcoal-ui/react'
+
+const categories = ['Illustration', 'Comic', 'Novel', '3D', 'Shopping']
+const artworks = Array.from({ length: 3 }, (_, id) => ({
+  id,
+  title: 'Title',
+  thumbnail: `https://loremflickr.com/150/100/animals?random=${id}`,
+  description: 'Description',
+}))
+
+export default function TokenV2Tailwind() {
+  const [selected, setSelected] = useState(categories[0])
+  return (
+    <section className="grid max-w-fit gap-[24px]">
+      <nav>
+        <div aria-label="Categories" role="tablist">
+          {categories.map((category) => (
+            <a
+              className={`text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold ${
+                category === selected
+                  ? 'border-border-selected text-text'
+                  : 'border-[transparent]'
+              }`}
+              id={`category-${category}`}
+              role="tab"
+              aria-selected={category === selected}
+              aria-controls={`panel-${category}`}
+              key={category}
+              onClick={() => {
+                setSelected(category)
+              }}
+            >
+              {category}
+            </a>
+          ))}
+        </div>
+      </nav>
+      <h2 className="text-text-secondary text-heading-xs m-0">
+        Works from users you follow
+      </h2>
+      <div
+        className="grid [grid-template-areas:'UserInfo_._ShowAll''ArtworkList_ArtworkList_ArtworkList']"
+        id={`panel-${selected}`}
+        role="tabpanel"
+        aria-labelledby={`category-${selected}`}
+      >
+        <div className="grid grid-flow-col items-center justify-start gap-20 [grid-area:UserInfo]">
+          <a
+            className="rounded-oval text-icon hover:text-icon-hover active:text-icon-press bg-container-secondary hover:bg-container-hover active:bg-container-press grid h-[40px] w-[40px] cursor-pointer place-items-center"
+            aria-label="UserIcon"
+          >
+            <Icon name="24/FaceEdit" />
+          </a>
+          <span className="text-text text-caption-m font-bold">UserName</span>
+          <Button variant="Primary" size="S">
+            Follow
+          </Button>
+        </div>
+        <a className="text-text-tertiary hover:text-text-hover active:text-text-press text-caption-m cursor-pointer content-center text-right [grid-area:ShowAll]">
+          Show all
+        </a>
+        <ul
+          key={selected}
+          className="grid max-w-[424px] list-none grid-cols-3 gap-20 p-0 [grid-area:ArtworkList]"
+        >
+          {artworks.map((a) => (
+            <li key={a.id}>
+              <article className="grid gap-10">
+                <img
+                  className="rounded-m aspect-[3/2] w-[100%]"
+                  src={a.thumbnail}
+                  alt={a.title}
+                />
+                <h3 className="text-text text-caption-m m-0">{a.title}</h3>
+                <p className="text-text-tertiary text-caption-s m-0">
+                  {a.description}
+                </p>
+              </article>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}
diff --git a/packages/react/docs/token-v2.story.tsx b/packages/react/docs/token-v2.story.tsx
index f895a9f48..e0abca739 100644
--- a/packages/react/docs/token-v2.story.tsx
+++ b/packages/react/docs/token-v2.story.tsx
@@ -3,212 +3,17 @@
 /* lint runs before build so json does not exist */
 
 import { Meta, StoryObj } from '@storybook/react'
-import { useState } from 'react'
-import styled from 'styled-components'
-// This does not work :(
-// import tokens from '@charcoal-ui/theme/tokens/camel/css-variables.json'
-import tokens from '../../theme/dist/tokens/camel/css-variables.json'
-import { Button, Icon } from '@charcoal-ui/react'
+import TokenV2Styled from './TokenV2Styled'
+import TokenV2Tailwind from './TokenV2Tailwind'
 
 export default {
   title: 'react/docs/Token-v2-demo',
-  component: Demo,
-} as Meta<typeof Demo>
+  component: TokenV2Styled,
+} as Meta<typeof TokenV2Styled>
 
-export const Styled: StoryObj<typeof Demo> = {
-  render: Demo,
+export const Styled: StoryObj<typeof TokenV2Styled> = {
+  render: TokenV2Styled,
 }
-
-const categories = ['Illustration', 'Comic', 'Novel', '3D', 'Shopping']
-const artworks = Array.from({ length: 3 }, (_, id) => ({
-  id,
-  title: 'Title',
-  thumbnail: `https://loremflickr.com/150/100/animals?random=${id}`,
-  description: 'Description',
-}))
-
-function Demo() {
-  const [selected, setSelected] = useState(categories[0])
-  return (
-    <Container>
-      <nav>
-        <div aria-label="Categories" role="tablist">
-          {categories.map((category) => (
-            <Tab
-              id={`category-${category}`}
-              role="tab"
-              aria-selected={category === selected}
-              aria-controls={`panel-${category}`}
-              key={category}
-              onClick={() => {
-                setSelected(category)
-              }}
-            >
-              {category}
-            </Tab>
-          ))}
-        </div>
-      </nav>
-      <H2>Works from users you follow</H2>
-      <UserCard
-        id={`panel-${selected}`}
-        role="tabpanel"
-        aria-labelledby={`category-${selected}`}
-      >
-        <UserInfo>
-          <User aria-label="UserIcon">
-            <Icon name="24/FaceEdit" />
-          </User>
-          <UserName>UserName</UserName>
-          <Button variant="Primary" size="S">
-            Follow
-          </Button>
-        </UserInfo>
-        <ShowAll>Show all</ShowAll>
-        <ArtworkList key={selected}>
-          {artworks.map((a) => (
-            <li key={a.id}>
-              <Artwork>
-                <ArtworkThumbnail src={a.thumbnail} alt={a.title} />
-                <ArtworkTitle>{a.title}</ArtworkTitle>
-                <ArtworkDescription>{a.description}</ArtworkDescription>
-              </Artwork>
-            </li>
-          ))}
-        </ArtworkList>
-      </UserCard>
-    </Container>
-  )
+export const Tailwind: StoryObj<typeof TokenV2Styled> = {
+  render: TokenV2Tailwind,
 }
-
-const Container = styled.section`
-  transition: 0.3s color ease-in-out;
-  display: grid;
-  gap: 24px;
-  max-width: fit-content;
-`
-
-const H2 = styled.h2`
-  color: ${tokens.color.text.secondary.default};
-  font-size: calc(${tokens.text.fontSize.heading.xs} * 1px);
-  line-height: calc(${tokens.text.lineHeight.heading.xs} * 1px);
-`
-
-const Tab = styled.a`
-  cursor: pointer;
-  font-weight: bold;
-  font-size: calc(${tokens.text.fontSize.body} * 1px);
-  line-height: calc(${tokens.text.lineHeight.body} * 1px);
-  padding: 13px calc(${tokens.space.layout[30]} * 1px);
-  border-top: 2px transparent;
-
-  color: ${tokens.color.text.tertiary.default};
-  &:hover {
-    color: ${tokens.color.text.tertiary.hover};
-  }
-  &:active {
-    color: ${tokens.color.text.tertiary.press};
-  }
-
-  &[aria-selected='true'] {
-    color: ${tokens.color.text.default};
-    border-top: 2px solid ${tokens.color.border.selected};
-    &:hover {
-      color: ${tokens.color.text.hover};
-    }
-    &:active {
-      color: ${tokens.color.text.press};
-    }
-  }
-`
-
-const UserCard = styled.div`
-  display: grid;
-  grid-template-areas:
-    'UserInfo     .           ShowAll'
-    'ArtworkList  ArtworkList ArtworkList';
-`
-
-const UserInfo = styled.div`
-  grid-area: UserInfo;
-  display: grid;
-  grid-auto-flow: column;
-  justify-content: left;
-  align-items: center;
-  gap: calc(${tokens.space.layout[20]} * 1px);
-`
-
-const User = styled.a`
-  width: 40px;
-  height: 40px;
-  display: grid;
-  place-items: center;
-  border-radius: calc(${tokens.radius.oval} * 1px);
-  cursor: pointer;
-
-  color: ${tokens.color.icon.default};
-  background-color: ${tokens.color.container.secondary.default};
-  &:hover {
-    color: ${tokens.color.icon.hover};
-    background-color: ${tokens.color.container.secondary.hover};
-  }
-  &:active {
-    color: ${tokens.color.icon.press};
-    background-color: ${tokens.color.container.secondary.press};
-  }
-`
-
-const UserName = styled.span`
-  color: ${tokens.color.text.default};
-  font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
-  line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
-  font-weight: bold;
-`
-
-const ShowAll = styled.a`
-  grid-area: ShowAll;
-  cursor: pointer;
-  color: ${tokens.color.text.tertiary.default};
-  &:hover {
-    color: ${tokens.color.text.tertiary.hover};
-  }
-  &:active {
-    color: ${tokens.color.text.tertiary.press};
-  }
-  text-align: right;
-  align-content: center;
-  font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
-  line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
-`
-
-const ArtworkList = styled.ul`
-  grid-area: ArtworkList;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: calc(${tokens.space.layout[20]} * 1px);
-  list-style: none;
-  padding: 0;
-  max-width: 424px;
-`
-
-const Artwork = styled.article`
-  display: grid;
-  gap: calc(${tokens.space.layout[10]} * 1px);
-`
-const ArtworkThumbnail = styled.img`
-  width: 100%;
-  aspect-ratio: 3 / 2;
-  border-radius: calc(${tokens.radius.m} * 1px);
-`
-const ArtworkTitle = styled.h3`
-  color: ${tokens.color.text.default};
-  font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
-  line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
-  margin: 0;
-`
-const ArtworkDescription = styled.p`
-  margin: 0;
-  color: ${tokens.color.text.tertiary.default};
-  font-size: calc(${tokens.text.fontSize.caption.s} * 1px);
-  line-height: calc(${tokens.text.lineHeight.caption.s} * 1px);
-`
diff --git a/packages/tailwind-config/src/index.ts b/packages/tailwind-config/src/index.ts
index c3a75d40f..79c215feb 100644
--- a/packages/tailwind-config/src/index.ts
+++ b/packages/tailwind-config/src/index.ts
@@ -21,6 +21,7 @@ import { colorsToTailwindConfig } from './colors/toTailwindConfig'
 import cssVariableColorPlugin from './colors/plugin'
 import cssVariableGradientPlugin from './gradient/plugin'
 import typographyPlugin from './typography/plugin'
+export { createTailwindConfigTokenV2 } from './tokenV2'
 
 interface Options {
   version?: TailwindVersion
diff --git a/packages/tailwind-config/src/tokenV2.ts b/packages/tailwind-config/src/tokenV2.ts
new file mode 100644
index 000000000..f24444a5a
--- /dev/null
+++ b/packages/tailwind-config/src/tokenV2.ts
@@ -0,0 +1,55 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+// import light from '@charcoal-ui/theme/tokens/css-variables.json'
+import light from '../../theme/dist/tokens/css-variables.json'
+import { TailwindConfig } from 'tailwindcss/tailwind-config'
+import { flattenKey, mapDefault, fixmeCalc1px } from './util'
+
+export function createTailwindConfigTokenV2() {
+  const fontSize = Object.fromEntries(
+    Object.entries(light.text['font-size']).flatMap(([k, v]) => {
+      if (typeof v === 'string') {
+        return [
+          [
+            k,
+            [
+              fixmeCalc1px(v),
+              // @ts-expect-error k should be keyof line-height
+              { lineHeight: fixmeCalc1px(light.text['line-height'][k]) },
+            ],
+          ],
+        ]
+      }
+
+      return Object.entries(v as Record<string, string>).map(([kk, vv]) => {
+        return [
+          [k, kk].join('-'),
+          [
+            fixmeCalc1px(vv),
+            // @ts-expect-error k should be keyof line-height
+            { lineHeight: fixmeCalc1px(light.text['line-height'][k][kk]) },
+          ],
+        ]
+      })
+    })
+  )
+
+  const config: TailwindConfig = {
+    theme: {
+      colors: mapDefault(light.color),
+      spacing: flattenKey(light.space, (key) => key.includes('between')),
+      width: light['paragraph-width'],
+      borderWidth: flattenKey(light['border-width']),
+      borderRadius: Object.fromEntries(
+        Object.entries(light.radius).map(([k, v]) => [k, fixmeCalc1px(v)])
+      ),
+      // @ts-expect-error FIXME
+      fontSize,
+      fontWeight: light.text['font-weight'],
+      darkMode: false,
+    },
+  }
+
+  return config
+}
diff --git a/packages/tailwind-config/src/util.ts b/packages/tailwind-config/src/util.ts
index bcb5faef5..1d94550c6 100644
--- a/packages/tailwind-config/src/util.ts
+++ b/packages/tailwind-config/src/util.ts
@@ -90,12 +90,20 @@ export const flattenKey = <O extends object>(
   join?: (key: string) => boolean
 ) => {
   return Object.fromEntries(
-    // @ts-expect-error FIXME
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     Object.entries(o).flatMap(([key, v]) => {
-      if (typeof v === 'string') return [[key, v]]
+      if (typeof v === 'string') return [[key, `calc(${v} * 1px)`]]
       return Object.entries(v as object).map(([kk, vv]) => {
-        return [join?.(key) ?? true ? [key, kk].join('-') : kk, vv]
+        return [
+          join?.(key) ?? true ? [key, kk].join('-') : kk,
+          `calc(${vv} * 1px)`,
+        ]
       })
     })
   )
 }
+
+export function fixmeCalc1px(v: string) {
+  return `calc(${v} * 1px)`
+}