From 47f7e1c5a8fecfd109939bbc0c4b7812e4ebf71a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Mon, 4 Nov 2024 16:17:07 +0100
Subject: [PATCH] chore: refactor figma plugin (#2275)

resolves #2630

---------

Co-authored-by: barsnes <tobias.barsnes@digdir.no>
Co-authored-by: Michael Marszalek <mimarz@gmail.com>
---
 packages/cli/src/colors/utils.ts              |   21 +-
 plugins/figma-plugin/src/common/types.ts      |    9 -
 plugins/figma-plugin/src/plugin/plugin.ts     |   68 -
 plugins/figma-plugin/src/ui/App.css           |   59 -
 plugins/figma-plugin/src/ui/app.tsx           |   48 -
 .../src/ui/components/Footer/Footer.tsx       |   26 -
 .../src/ui/components/Toast/Toast.css         |   24 -
 .../src/ui/components/Toast/Toast.tsx         |   43 -
 plugins/figma-plugin/src/ui/index.html        |    2 -
 .../src/ui/pages/PageOne/PageOne.tsx          |  136 --
 .../src/ui/pages/PageTwo/PageTwo.tsx          |    5 -
 .../src/ui/pages/pageThree/PageThree.tsx      |    5 -
 plugins/figma-plugin/tsconfig.json            |   22 -
 plugins/{figma-plugin => figma}/.gitignore    |    0
 plugins/{figma-plugin => figma}/README.md     |    0
 .../assets/img/preview.png                    |  Bin
 plugins/figma/decalations.d.ts                |    0
 plugins/{figma-plugin => figma}/manifest.json |    2 +-
 plugins/{figma-plugin => figma}/package.json  |   12 +-
 plugins/figma/src/common/dummyTheme.ts        |  274 +++
 plugins/figma/src/common/store.ts             |   79 +
 plugins/figma/src/common/types.ts             |   19 +
 plugins/figma/src/common/utils.ts             |   59 +
 .../figma/src/plugin/figma/getVariables.ts    |   16 +
 plugins/figma/src/plugin/figma/themes.ts      |   63 +
 .../figma/src/plugin/figma/updateVariables.ts |   94 +
 plugins/figma/src/plugin/plugin.ts            |   96 +
 plugins/figma/src/ui/App.css                  |   90 +
 plugins/figma/src/ui/app.tsx                  |   31 +
 .../src/ui/components/Card/Card.module.css    |   42 +
 plugins/figma/src/ui/components/Card/Card.tsx |   39 +
 .../ui/components/Footer/Footer.module.css}   |   42 +-
 .../figma/src/ui/components/Footer/Footer.tsx |   43 +
 plugins/figma/src/ui/index.html               |    5 +
 .../{figma-plugin => figma}/src/ui/main.tsx   |    0
 .../figma/src/ui/pages/Theme/Theme.module.css |   46 +
 plugins/figma/src/ui/pages/Theme/Theme.tsx    |  155 ++
 .../src/ui/pages/Themes/Themes.module.css     |   13 +
 plugins/figma/src/ui/pages/Themes/Themes.tsx  |   45 +
 plugins/figma/src/ui/theme.css                | 1939 +++++++++++++++++
 plugins/figma/src/ui/utils/useDsMode.ts       |   46 +
 plugins/figma/src/ui/utils/useStartup.ts      |   58 +
 .../src/ui/vite-env.d.ts                      |    0
 plugins/figma/tsconfig.json                   |   14 +
 .../tsconfig.node.json                        |    0
 .../vite.config.plugin.ts                     |    0
 .../{figma-plugin => figma}/vite.config.ui.ts |    3 +-
 yarn.lock                                     |  513 ++++-
 48 files changed, 3825 insertions(+), 481 deletions(-)
 delete mode 100644 plugins/figma-plugin/src/common/types.ts
 delete mode 100644 plugins/figma-plugin/src/plugin/plugin.ts
 delete mode 100644 plugins/figma-plugin/src/ui/App.css
 delete mode 100644 plugins/figma-plugin/src/ui/app.tsx
 delete mode 100644 plugins/figma-plugin/src/ui/components/Footer/Footer.tsx
 delete mode 100644 plugins/figma-plugin/src/ui/components/Toast/Toast.css
 delete mode 100644 plugins/figma-plugin/src/ui/components/Toast/Toast.tsx
 delete mode 100644 plugins/figma-plugin/src/ui/index.html
 delete mode 100644 plugins/figma-plugin/src/ui/pages/PageOne/PageOne.tsx
 delete mode 100644 plugins/figma-plugin/src/ui/pages/PageTwo/PageTwo.tsx
 delete mode 100644 plugins/figma-plugin/src/ui/pages/pageThree/PageThree.tsx
 delete mode 100644 plugins/figma-plugin/tsconfig.json
 rename plugins/{figma-plugin => figma}/.gitignore (100%)
 rename plugins/{figma-plugin => figma}/README.md (100%)
 rename plugins/{figma-plugin => figma}/assets/img/preview.png (100%)
 create mode 100644 plugins/figma/decalations.d.ts
 rename plugins/{figma-plugin => figma}/manifest.json (79%)
 rename plugins/{figma-plugin => figma}/package.json (80%)
 create mode 100644 plugins/figma/src/common/dummyTheme.ts
 create mode 100644 plugins/figma/src/common/store.ts
 create mode 100644 plugins/figma/src/common/types.ts
 create mode 100644 plugins/figma/src/common/utils.ts
 create mode 100644 plugins/figma/src/plugin/figma/getVariables.ts
 create mode 100644 plugins/figma/src/plugin/figma/themes.ts
 create mode 100644 plugins/figma/src/plugin/figma/updateVariables.ts
 create mode 100644 plugins/figma/src/plugin/plugin.ts
 create mode 100644 plugins/figma/src/ui/App.css
 create mode 100644 plugins/figma/src/ui/app.tsx
 create mode 100644 plugins/figma/src/ui/components/Card/Card.module.css
 create mode 100644 plugins/figma/src/ui/components/Card/Card.tsx
 rename plugins/{figma-plugin/src/ui/components/Footer/Footer.css => figma/src/ui/components/Footer/Footer.module.css} (57%)
 create mode 100644 plugins/figma/src/ui/components/Footer/Footer.tsx
 create mode 100644 plugins/figma/src/ui/index.html
 rename plugins/{figma-plugin => figma}/src/ui/main.tsx (100%)
 create mode 100644 plugins/figma/src/ui/pages/Theme/Theme.module.css
 create mode 100644 plugins/figma/src/ui/pages/Theme/Theme.tsx
 create mode 100644 plugins/figma/src/ui/pages/Themes/Themes.module.css
 create mode 100644 plugins/figma/src/ui/pages/Themes/Themes.tsx
 create mode 100644 plugins/figma/src/ui/theme.css
 create mode 100644 plugins/figma/src/ui/utils/useDsMode.ts
 create mode 100644 plugins/figma/src/ui/utils/useStartup.ts
 rename plugins/{figma-plugin => figma}/src/ui/vite-env.d.ts (100%)
 create mode 100644 plugins/figma/tsconfig.json
 rename plugins/{figma-plugin => figma}/tsconfig.node.json (100%)
 rename plugins/{figma-plugin => figma}/vite.config.plugin.ts (100%)
 rename plugins/{figma-plugin => figma}/vite.config.ui.ts (86%)

diff --git a/packages/cli/src/colors/utils.ts b/packages/cli/src/colors/utils.ts
index 4727611b2d..090e0560eb 100644
--- a/packages/cli/src/colors/utils.ts
+++ b/packages/cli/src/colors/utils.ts
@@ -189,18 +189,19 @@ export const HSLToHex = (h: number, s: number, l: number) => {
  * Converts a HEX color '#xxxxxx' into an array of RGB values '[R, G, B]'
  *
  * @param hex A hex color string
+ * @param type The type of RGB values to return
  * @returns RGB values in an array
  */
-export const hexToRgb = (hex: string) => {
+export const hexToRgb = (hex: string, type: '255' | '1' = '255') => {
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
   hex = hex.replace(shorthandRegex, (m, r: string, g: string, b: string) => r + r + g + g + b + b);
 
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result
     ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
+        r: type === '255' ? parseInt(result[1], 16) : parseInt(result[1], 16) / 255,
+        g: type === '255' ? parseInt(result[2], 16) : parseInt(result[2], 16) / 255,
+        b: type === '255' ? parseInt(result[3], 16) : parseInt(result[3], 16) / 255,
       }
     : null;
 };
@@ -382,3 +383,15 @@ export const convertToHex = (color?: string): CssColor => {
   }
   return chroma(color).hex() as CssColor;
 };
+
+export const rgbToHex = (rgb: { r: number; g: number; b: number }) => {
+  return (
+    '#' +
+    [rgb.r, rgb.g, rgb.b]
+      .map((x) => {
+        const hex = Math.round(x * 255).toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+      })
+      .join('')
+  );
+};
diff --git a/plugins/figma-plugin/src/common/types.ts b/plugins/figma-plugin/src/common/types.ts
deleted file mode 100644
index b6bd570141..0000000000
--- a/plugins/figma-plugin/src/common/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type JsonInput = {
-  theme: {
-    accent: object;
-    neutral: object;
-    brand1: object;
-    brand2: object;
-    brand3: object;
-  };
-};
diff --git a/plugins/figma-plugin/src/plugin/plugin.ts b/plugins/figma-plugin/src/plugin/plugin.ts
deleted file mode 100644
index 57add14ccf..0000000000
--- a/plugins/figma-plugin/src/plugin/plugin.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-figma.showUI(__html__, { width: 590, height: 575 });
-
-function hexToRgb(hex: string) {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? {
-        r: parseInt(result[1], 16) / 255,
-        g: parseInt(result[2], 16) / 255,
-        b: parseInt(result[3], 16) / 255,
-      }
-    : null;
-}
-
-function UpdateColor(
-  type: string,
-  obj: object,
-  modeId: string,
-  variable: Variable,
-) {
-  const suffix = variable.name.split('/')[2];
-  if (variable.name.startsWith(`theme/${type}`)) {
-    for (const [key, value] of Object.entries(obj)) {
-      if (key === suffix) {
-        const rgb = hexToRgb(value.value as string);
-        if (rgb) {
-          variable.setValueForMode(modeId, rgb);
-        }
-      }
-    }
-  }
-}
-
-function getModeIndex(mode: string) {
-  if (mode === 'light') {
-    return 0;
-  }
-  return 1;
-}
-
-figma.ui.onmessage = (msg: { type: string; text: string; mode: string }) => {
-  if (msg.type === 'update-variables') {
-    const obj = JSON.parse(msg.text);
-    const accent = obj.theme.accent as object;
-    const neutral = obj.theme.neutral as object;
-    const brand1 = obj.theme.brand1 as object;
-    const brand2 = obj.theme.brand2 as object;
-    const brand3 = obj.theme.brand3 as object;
-
-    figma.variables.getLocalVariableCollectionsAsync().then((collections) => {
-      for (const collection of collections) {
-        if (collection.name === 'Mode') {
-          figma.variables.getLocalVariablesAsync('COLOR').then((variables) => {
-            const modeId: string =
-              collection.modes[getModeIndex(msg.mode)].modeId;
-
-            for (const variable of variables) {
-              UpdateColor('accent', accent, modeId, variable);
-              UpdateColor('neutral', neutral, modeId, variable);
-              UpdateColor('brand1', brand1, modeId, variable);
-              UpdateColor('brand2', brand2, modeId, variable);
-              UpdateColor('brand3', brand3, modeId, variable);
-            }
-          });
-        }
-      }
-    });
-  }
-};
diff --git a/plugins/figma-plugin/src/ui/App.css b/plugins/figma-plugin/src/ui/App.css
deleted file mode 100644
index 7ef1c96250..0000000000
--- a/plugins/figma-plugin/src/ui/App.css
+++ /dev/null
@@ -1,59 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
-
-* {
-  font-feature-settings: 'cv05' 1;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: 'Inter', sans-serif;
-  margin: 0;
-}
-
-.content {
-  padding: 6px;
-}
-
-.heading {
-  margin-bottom: 8px;
-}
-
-.paragraph {
-  margin-bottom: 20px;
-  max-width: 98%;
-}
-
-.modes {
-  margin-bottom: 20px;
-}
-
-.textarea {
-  margin-bottom: 20px;
-}
-
-.links {
-  display: flex;
-  border-bottom: 1px solid #cecece;
-  padding: 0 16px;
-}
-
-.button {
-  position: absolute;
-  bottom: 65px;
-}
-
-.link {
-  height: 52px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  color: #a0a0a0;
-  margin-right: 16px;
-  font-weight: 500;
-  font-size: 15px;
-}
-
-.active {
-  color: #272727;
-}
diff --git a/plugins/figma-plugin/src/ui/app.tsx b/plugins/figma-plugin/src/ui/app.tsx
deleted file mode 100644
index 9bd53e4474..0000000000
--- a/plugins/figma-plugin/src/ui/app.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import '@digdir/designsystemet-theme';
-import '@digdir/designsystemet-css';
-
-import './App.css';
-import { Route, Routes } from 'react-router-dom';
-
-import { Footer } from './components/Footer/Footer';
-import PageOne from './pages/PageOne/PageOne';
-import PageTwo from './pages/PageTwo/PageTwo';
-import PageThree from './pages/pageThree/PageThree';
-
-function App() {
-  return (
-    <div>
-      {/* <div className='links'>
-        <NavLink
-          className={({ isActive }) => (isActive ? 'link active' : 'link')}
-          to='/'
-        >
-          Lokale variabler
-        </NavLink>
-        <NavLink
-          className='link'
-          to='/pageTwo'
-        >
-          Sync fra repo
-        </NavLink>
-        <NavLink
-          className='link'
-          to='/pageThree'
-        >
-          Oppdater UI Kit
-        </NavLink>
-      </div> */}
-
-      <div className='content'>
-        <Routes>
-          <Route path='/' element={<PageOne />} />
-          <Route path='/pageTwo' element={<PageTwo />} />
-          <Route path='/pageThree' element={<PageThree />} />
-        </Routes>
-      </div>
-      <Footer />
-    </div>
-  );
-}
-
-export default App;
diff --git a/plugins/figma-plugin/src/ui/components/Footer/Footer.tsx b/plugins/figma-plugin/src/ui/components/Footer/Footer.tsx
deleted file mode 100644
index 8f3900632e..0000000000
--- a/plugins/figma-plugin/src/ui/components/Footer/Footer.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import './Footer.css';
-import { Tooltip } from '@digdir/designsystemet-react';
-import { ChatElipsisIcon } from '@navikt/aksel-icons';
-
-import packageJson from '../../../../package.json';
-
-export const Footer = () => {
-  return (
-    <div className='footer'>
-      <div className='footer__left'></div>
-      <div className='footer__right'>
-        <div className='version'>V {packageJson.version}</div>
-        <Tooltip content='Feedback' placement='top'>
-          <a
-            href='https://github.com/digdir/designsystemet'
-            rel='noreferrer'
-            target='_blank'
-            className='feedback'
-          >
-            <ChatElipsisIcon fontSize='1.3rem' />
-          </a>
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
diff --git a/plugins/figma-plugin/src/ui/components/Toast/Toast.css b/plugins/figma-plugin/src/ui/components/Toast/Toast.css
deleted file mode 100644
index ad193052a7..0000000000
--- a/plugins/figma-plugin/src/ui/components/Toast/Toast.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.toast {
-  position: fixed;
-  z-index: 5;
-  bottom: -20px;
-  border-radius: 4px;
-  left: 16px;
-  right: 16px;
-  background-color: var(--ds-color-accent-surface-default);
-  box-shadow: var(--ds-shadow-xs);
-  height: 58px;
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  gap: 12px;
-  transition: 0.4s all ease-out;
-}
-
-.toastActive {
-  bottom: 65px;
-}
-
-.toastClose {
-  bottom: -20px;
-}
diff --git a/plugins/figma-plugin/src/ui/components/Toast/Toast.tsx b/plugins/figma-plugin/src/ui/components/Toast/Toast.tsx
deleted file mode 100644
index b1e716da25..0000000000
--- a/plugins/figma-plugin/src/ui/components/Toast/Toast.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useEffect, useState } from 'react';
-import './Toast.css';
-import { Spinner } from '@digdir/designsystemet-react';
-import { CheckmarkIcon } from '@navikt/aksel-icons';
-import cl from 'clsx/lite';
-
-export const Toast = () => {
-  const [success, setSuccess] = useState(false);
-  const [open, setOpen] = useState(false);
-  const [close, setClose] = useState(false);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setOpen(true);
-    }, 10);
-    setTimeout(() => {
-      setSuccess(true);
-    }, 6000);
-
-    setTimeout(() => {
-      setClose(true);
-    }, 7500);
-  }, []);
-
-  return (
-    <div className={cl('toast', open && 'toastActive', close && 'toastClose')}>
-      {success && (
-        <>
-          <div className='icon'>
-            <CheckmarkIcon title='a11y-title' fontSize='2rem' />
-          </div>{' '}
-          Oppdatering vellykket!
-        </>
-      )}
-      {!success && (
-        <>
-          <Spinner color='accent' aria-label='loading' data-size='sm' />
-          Oppdaterer variabler...
-        </>
-      )}
-    </div>
-  );
-};
diff --git a/plugins/figma-plugin/src/ui/index.html b/plugins/figma-plugin/src/ui/index.html
deleted file mode 100644
index 440f1f2593..0000000000
--- a/plugins/figma-plugin/src/ui/index.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<div id="root"></div>
-<script type="module" src="./main.tsx"></script>
diff --git a/plugins/figma-plugin/src/ui/pages/PageOne/PageOne.tsx b/plugins/figma-plugin/src/ui/pages/PageOne/PageOne.tsx
deleted file mode 100644
index 9245f3fdd4..0000000000
--- a/plugins/figma-plugin/src/ui/pages/PageOne/PageOne.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import {
-  Button,
-  Heading,
-  Label,
-  Link,
-  Paragraph,
-  Textarea,
-  ToggleGroup,
-  ValidationMessage,
-} from '@digdir/designsystemet-react';
-import { useState } from 'react';
-
-import { Toast } from '@ui/components/Toast/Toast';
-
-import type { JsonInput } from '../../../common/types';
-
-function PageOne() {
-  const [jsonText, setJsonText] = useState('');
-  const [mode, setMode] = useState('light');
-  const [errorText, setErrorText] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-
-  const isJsonValid = (str: string) => {
-    try {
-      JSON.parse(str);
-    } catch (e) {
-      return false;
-    }
-    return true;
-  };
-
-  const isJsonCorrect = (str: string) => {
-    try {
-      const obj = JSON.parse(str) as JsonInput;
-      if (
-        obj.theme.accent &&
-        obj.theme.neutral &&
-        obj.theme.brand1 &&
-        obj.theme.brand2 &&
-        obj.theme.brand3
-      ) {
-        return true;
-      }
-    } catch (e) {
-      return false;
-    }
-    return false;
-  };
-
-  const onSubmit = () => {
-    if (isLoading) {
-      return;
-    }
-
-    if (jsonText === '') {
-      setErrorText('Dette feltet er påkrevd.');
-      return;
-    }
-
-    if (!isJsonValid(jsonText) || !isJsonCorrect(jsonText)) {
-      setErrorText('Ugyldig JSON, prøv og kopier og lim inn på nytt.');
-      setJsonText('');
-      return;
-    }
-
-    setIsLoading(true);
-    setErrorText('');
-    setJsonText('');
-
-    setTimeout(() => {
-      parent.postMessage(
-        { pluginMessage: { type: 'update-variables', text: jsonText, mode } },
-        '*',
-      );
-    }, 400);
-
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 7900);
-  };
-  return (
-    <div className='content'>
-      <div className='content'>
-        <Heading className='heading' data-size='2xs'>
-          Oppdater fargetema
-        </Heading>
-
-        <Paragraph data-size='sm' className='paragraph'>
-          Oppdater{' '}
-          <Link
-            target='_blank'
-            href='https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit'
-          >
-            Designsystemet - Core UI Kit
-          </Link>{' '}
-          community filen med ditt eget fargetema. Gå til{' '}
-          <Link target='_blank' href='https://theme.designsystemet.no/'>
-            theme.designsystemet.no
-          </Link>{' '}
-          og lag temaet ditt, velg light- eller dark mode og lim inn JSON koden
-          i feltet under.
-        </Paragraph>
-
-        <ToggleGroup
-          className='modes'
-          defaultValue='light'
-          name='toggle-group-nuts'
-          data-size='sm'
-          onChange={(e: string) => setMode(e)}
-        >
-          <ToggleGroup.Item value='light'>Light Mode</ToggleGroup.Item>
-          <ToggleGroup.Item value='dark'>Dark Mode</ToggleGroup.Item>
-          {/* <ToggleGroup.Item value='contrast'>Contrast</ToggleGroup.Item> */}
-        </ToggleGroup>
-        <Label htmlFor='paste-json'>JSON</Label>
-        <Textarea
-          id='paste-json'
-          className='textarea'
-          cols={40}
-          rows={7}
-          placeholder='Lim inn JSON her'
-          data-size='sm'
-          value={jsonText}
-          onChange={(e) => setJsonText(e.target.value)}
-        />
-        <ValidationMessage>{errorText}</ValidationMessage>
-        <Button onClick={() => onSubmit()} data-size='sm' className='button'>
-          Oppdater variabler
-        </Button>
-        {isLoading && <Toast />}
-      </div>
-    </div>
-  );
-}
-
-export default PageOne;
diff --git a/plugins/figma-plugin/src/ui/pages/PageTwo/PageTwo.tsx b/plugins/figma-plugin/src/ui/pages/PageTwo/PageTwo.tsx
deleted file mode 100644
index 8035f14c4b..0000000000
--- a/plugins/figma-plugin/src/ui/pages/PageTwo/PageTwo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function PageTwo() {
-  return <div className='content'>page two</div>;
-}
-
-export default PageTwo;
diff --git a/plugins/figma-plugin/src/ui/pages/pageThree/PageThree.tsx b/plugins/figma-plugin/src/ui/pages/pageThree/PageThree.tsx
deleted file mode 100644
index 7bea6f9bf4..0000000000
--- a/plugins/figma-plugin/src/ui/pages/pageThree/PageThree.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function PageThree() {
-  return <div className='content'>page three</div>;
-}
-
-export default PageThree;
diff --git a/plugins/figma-plugin/tsconfig.json b/plugins/figma-plugin/tsconfig.json
deleted file mode 100644
index 9ff44e4527..0000000000
--- a/plugins/figma-plugin/tsconfig.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "useDefineForClassFields": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "isolatedModules": false,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "typeRoots": ["../../node_modules/@figma"],
-    "paths": {
-      "@common/*": ["./src/common/*"],
-      "@ui/*": ["./src/ui/*"]
-    }
-  },
-  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx"]
-}
diff --git a/plugins/figma-plugin/.gitignore b/plugins/figma/.gitignore
similarity index 100%
rename from plugins/figma-plugin/.gitignore
rename to plugins/figma/.gitignore
diff --git a/plugins/figma-plugin/README.md b/plugins/figma/README.md
similarity index 100%
rename from plugins/figma-plugin/README.md
rename to plugins/figma/README.md
diff --git a/plugins/figma-plugin/assets/img/preview.png b/plugins/figma/assets/img/preview.png
similarity index 100%
rename from plugins/figma-plugin/assets/img/preview.png
rename to plugins/figma/assets/img/preview.png
diff --git a/plugins/figma/decalations.d.ts b/plugins/figma/decalations.d.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/plugins/figma-plugin/manifest.json b/plugins/figma/manifest.json
similarity index 79%
rename from plugins/figma-plugin/manifest.json
rename to plugins/figma/manifest.json
index afe8136196..b4ce2f54cf 100644
--- a/plugins/figma-plugin/manifest.json
+++ b/plugins/figma/manifest.json
@@ -8,5 +8,5 @@
   "enableProposedApi": false,
   "editorType": ["figma"],
   "documentAccess": "dynamic-page",
-  "networkAccess": { "allowedDomains": ["none"] }
+  "networkAccess": { "allowedDomains": ["https://api.github.com"] }
 }
diff --git a/plugins/figma-plugin/package.json b/plugins/figma/package.json
similarity index 80%
rename from plugins/figma-plugin/package.json
rename to plugins/figma/package.json
index 16a735865a..8db7a4fcca 100644
--- a/plugins/figma-plugin/package.json
+++ b/plugins/figma/package.json
@@ -1,7 +1,7 @@
 {
   "name": "figma-plugin",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "run-s watch",
@@ -15,6 +15,8 @@
     "types:node": "tsc -P tsconfig.node.json"
   },
   "dependencies": {
+    "@adobe/leonardo-contrast-colors": "^1.0.0",
+    "@digdir/designsystemet": "workspace:^",
     "@digdir/designsystemet-css": "workspace:^",
     "@digdir/designsystemet-react": "workspace:^",
     "@digdir/designsystemet-theme": "workspace:^",
@@ -24,10 +26,10 @@
     "react-router-dom": "^6.26.0"
   },
   "devDependencies": {
-    "@figma/plugin-typings": "^1.97.0",
-    "@types/node": "^22.1.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@figma/plugin-typings": "^1.95.0",
+    "@types/react": "^18.0.28",
+    "@types/react-color": "^3.0.12",
+    "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^4.3.1",
     "npm-run-all2": "^6.2.2",
     "postcss": "^8.4.41",
diff --git a/plugins/figma/src/common/dummyTheme.ts b/plugins/figma/src/common/dummyTheme.ts
new file mode 100644
index 0000000000..1c8c13e311
--- /dev/null
+++ b/plugins/figma/src/common/dummyTheme.ts
@@ -0,0 +1,274 @@
+import type { ColorTheme } from './store';
+
+export const getDummyTheme = () => {
+  return JSON.parse(JSON.stringify(dummyTheme)) as ColorTheme;
+};
+
+const dummyTheme = {
+  accent: {
+    light: {
+      '1': '#fefeff',
+      '2': '#eef4fa',
+      '3': '#d4e5f3',
+      '4': '#bad5ec',
+      '5': '#a1c5e5',
+      '6': '#97bfe3',
+      '7': '#3a85ca',
+      '8': '#004d93',
+      '9': '#0062BA',
+      '10': '#005099',
+      '11': '#003d75',
+      '12': '#0163ba',
+      '13': '#002c54',
+      'contrast-1': '#ffffff',
+      'contrast-2': '#dbe9f5',
+    },
+    dark: {
+      '1': '#001c36',
+      '2': '#002445',
+      '3': '#00315c',
+      '4': '#003d75',
+      '5': '#004b8f',
+      '6': '#00529d',
+      '7': '#1972c1',
+      '8': '#9cc2e4',
+      '9': '#4b90ce',
+      '10': '#287ac5',
+      '11': '#0163ba',
+      '12': '#72a8d9',
+      '13': '#d4e5f3',
+      'contrast-1': '#000000',
+      'contrast-2': '#0d1823',
+    },
+    contrast: {
+      '1': '#001c36',
+      '2': '#002445',
+      '3': '#00315c',
+      '4': '#003d75',
+      '5': '#004b8f',
+      '6': '#00529d',
+      '7': '#1972c1',
+      '8': '#9cc2e4',
+      '9': '#4b90ce',
+      '10': '#287ac5',
+      '11': '#0163ba',
+      '12': '#72a8d9',
+      '13': '#d4e5f3',
+      'contrast-1': '#000000',
+      'contrast-2': '#0d1823',
+    },
+  },
+  neutral: {
+    light: {
+      '1': '#fefefe',
+      '2': '#f3f4f5',
+      '3': '#e1e3e5',
+      '4': '#ced1d4',
+      '5': '#bdc1c6',
+      '6': '#b8bcc1',
+      '7': '#7a818c',
+      '8': '#444e5d',
+      '9': '#1E2B3C',
+      '10': '#303c4b',
+      '11': '#444e5d',
+      '12': '#5b6471',
+      '13': '#202c3d',
+      'contrast-1': '#ffffff',
+      'contrast-2': '#bbbfc4',
+    },
+    dark: {
+      '1': '#131c27',
+      '2': '#192433',
+      '3': '#243142',
+      '4': '#333e4e',
+      '5': '#424d5b',
+      '6': '#495361',
+      '7': '#67707c',
+      '8': '#bbbfc4',
+      '9': '#a6abb2',
+      '10': '#90969e',
+      '11': '#7a818c',
+      '12': '#9ea3ab',
+      '13': '#e1e3e5',
+      'contrast-1': '#000000',
+      'contrast-2': '#1b1b1d',
+    },
+    contrast: {
+      '1': '#131c27',
+      '2': '#192433',
+      '3': '#243142',
+      '4': '#333e4e',
+      '5': '#424d5b',
+      '6': '#495361',
+      '7': '#67707c',
+      '8': '#bbbfc4',
+      '9': '#a6abb2',
+      '10': '#90969e',
+      '11': '#7a818c',
+      '12': '#9ea3ab',
+      '13': '#e1e3e5',
+      'contrast-1': '#000000',
+      'contrast-2': '#1b1b1d',
+    },
+  },
+
+  brand1: {
+    light: {
+      '1': '#fffefe',
+      '2': '#fef0f1',
+      '3': '#fcdadb',
+      '4': '#fbc4c5',
+      '5': '#f9adaf',
+      '6': '#f9a5a7',
+      '7': '#d95558',
+      '8': '#843336',
+      '9': '#F45F63',
+      '10': '#d15155',
+      '11': '#b04447',
+      '12': '#a84144',
+      '13': '#4c1d1f',
+      'contrast-1': '#000000',
+      'contrast-2': '#000000',
+    },
+    dark: {
+      '1': '#2f1213',
+      '2': '#3c1819',
+      '3': '#522021',
+      '4': '#68292a',
+      '5': '#7f3234',
+      '6': '#8b3639',
+      '7': '#bc494c',
+      '8': '#f9a9ab',
+      '9': '#9f3e41',
+      '10': '#7f3234',
+      '11': '#602627',
+      '12': '#f67f82',
+      '13': '#fcdadb',
+      'contrast-1': '#ffffff',
+      'contrast-2': '#fefefe',
+    },
+    contrast: {
+      '1': '#2f1213',
+      '2': '#3c1819',
+      '3': '#522021',
+      '4': '#68292a',
+      '5': '#7f3234',
+      '6': '#8b3639',
+      '7': '#bc494c',
+      '8': '#f9a9ab',
+      '9': '#9f3e41',
+      '10': '#7f3234',
+      '11': '#602627',
+      '12': '#f67f82',
+      '13': '#fcdadb',
+      'contrast-1': '#ffffff',
+      'contrast-2': '#fefefe',
+    },
+  },
+  brand2: {
+    light: {
+      '1': '#fffefc',
+      '2': '#fbf3e0',
+      '3': '#f5dfac',
+      '4': '#f0ce7e',
+      '5': '#eaba4a',
+      '6': '#e8b338',
+      '7': '#a57a17',
+      '8': '#634a0e',
+      '9': '#E5AA20',
+      '10': '#c9951c',
+      '11': '#ae8118',
+      '12': '#7e5d12',
+      '13': '#382a08',
+      'contrast-1': '#000000',
+      'contrast-2': '#2b2006',
+    },
+    dark: {
+      '1': '#231a05',
+      '2': '#2d2206',
+      '3': '#3d2e09',
+      '4': '#4f3b0b',
+      '5': '#60470d',
+      '6': '#684e0f',
+      '7': '#8e6914',
+      '8': '#e9b742',
+      '9': '#513d0b',
+      '10': '#684e0f',
+      '11': '#826012',
+      '12': '#d09a1d',
+      '13': '#f5dfac',
+      'contrast-1': '#ffffff',
+      'contrast-2': '#ddd9cf',
+    },
+    contrast: {
+      '1': '#231a05',
+      '2': '#2d2206',
+      '3': '#3d2e09',
+      '4': '#4f3b0b',
+      '5': '#60470d',
+      '6': '#684e0f',
+      '7': '#8e6914',
+      '8': '#e9b742',
+      '9': '#513d0b',
+      '10': '#684e0f',
+      '11': '#826012',
+      '12': '#d09a1d',
+      '13': '#f5dfac',
+      'contrast-1': '#ffffff',
+      'contrast-2': '#ddd9cf',
+    },
+  },
+  brand3: {
+    light: {
+      '1': '#fdfeff',
+      '2': '#eaf6fe',
+      '3': '#c8e6fd',
+      '4': '#a9d7fb',
+      '5': '#84c7fa',
+      '6': '#7ac2f9',
+      '7': '#1a85d6',
+      '8': '#105082',
+      '9': '#1E98F5',
+      '10': '#1a83d3',
+      '11': '#166eb2',
+      '12': '#1466a5',
+      '13': '#092e4b',
+      'contrast-1': '#000000',
+      'contrast-2': '#010407',
+    },
+    dark: {
+      '1': '#061d30',
+      '2': '#07253c',
+      '3': '#0a3251',
+      '4': '#0d4068',
+      '5': '#0f4e7f',
+      '6': '#11558a',
+      '7': '#1773b9',
+      '8': '#81c5f9',
+      '9': '#13609a',
+      '10': '#0f4c7a',
+      '11': '#0b3a5d',
+      '12': '#44aaf7',
+      '13': '#c8e6fd',
+      'contrast-1': '#ffffff',
+      'contrast-2': '#fafcfd',
+    },
+    contrast: {
+      '1': '#061d30',
+      '2': '#07253c',
+      '3': '#0a3251',
+      '4': '#0d4068',
+      '5': '#0f4e7f',
+      '6': '#11558a',
+      '7': '#1773b9',
+      '8': '#81c5f9',
+      '9': '#13609a',
+      '10': '#0f4c7a',
+      '11': '#0b3a5d',
+      '12': '#44aaf7',
+      '13': '#c8e6fd',
+      'contrast-1': '#ffffff',
+      'contrast-2': '#fafcfd',
+    },
+  },
+};
diff --git a/plugins/figma/src/common/store.ts b/plugins/figma/src/common/store.ts
new file mode 100644
index 0000000000..e28a11b7a0
--- /dev/null
+++ b/plugins/figma/src/common/store.ts
@@ -0,0 +1,79 @@
+import { create } from 'zustand';
+import { subscribeWithSelector } from 'zustand/middleware';
+
+import type { FigmaModeName } from './types';
+
+export type ColorInfo = {
+  [key in ColorIndex]: string;
+};
+
+export type ColorIndex =
+  | '1'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10'
+  | '11'
+  | '12'
+  | '13'
+  | 'contrast-1'
+  | 'contrast-2';
+
+export type StoreThemes = StoreTheme[];
+
+export type StoreTheme = {
+  name: string;
+  themeId: string;
+  themeModeId: string;
+  colors: ColorTheme;
+};
+
+export type ColorTheme = {
+  accent: ThemeInfo;
+  neutral: ThemeInfo;
+  brand1: ThemeInfo;
+  brand2: ThemeInfo;
+  brand3: ThemeInfo;
+};
+
+export type ThemeInfo = {
+  light: ColorInfo;
+  dark: ColorInfo;
+  contrast?: ColorInfo;
+};
+
+export type StoreThemeModes = {
+  name: string;
+  id: string;
+  prefix: FigmaModeName;
+  colors: { brand1Base: string; brand2Base: string; brand3Base: string };
+};
+
+type ColorStore = {
+  themes: StoreThemes;
+  loading: boolean;
+  codeSnipperError: string;
+  noThemesFound: boolean;
+  setThemes: (themes: StoreThemes) => void;
+  setLoading: (loading: boolean) => void;
+  setCodeSnippetError: (error: string) => void;
+  setNoThemesFound: (noThemesFound: boolean) => void;
+};
+
+export const useThemeStore = create(
+  subscribeWithSelector<ColorStore>((set) => ({
+    themes: [],
+    loading: false,
+    codeSnipperError: '',
+    noThemesFound: false,
+    setThemes: (themes) => set({ themes }),
+    setLoading: (loading) => set({ loading }),
+    setCodeSnippetError: (codeSnipperError) => set({ codeSnipperError }),
+    setNoThemesFound: (noThemesFound) => set({ noThemesFound }),
+  })),
+);
diff --git a/plugins/figma/src/common/types.ts b/plugins/figma/src/common/types.ts
new file mode 100644
index 0000000000..b5477ef22a
--- /dev/null
+++ b/plugins/figma/src/common/types.ts
@@ -0,0 +1,19 @@
+export type JsonInput = {
+  theme: {
+    accent: object;
+    neutral: object;
+    brand1: object;
+    brand2: object;
+    brand3: object;
+  };
+};
+
+export type FigmaModeName = 'theme' | 'theme2' | 'theme3' | 'theme4';
+
+export enum Messages {
+  GetThemes = 'getThemes',
+  GetThemesAndRedirect = 'getThemesAndRedirect',
+  GetVariables = 'getVariables',
+  SetValueForModeError = 'setValueForModeError',
+  UpdateVariables = 'updateVariables',
+}
diff --git a/plugins/figma/src/common/utils.ts b/plugins/figma/src/common/utils.ts
new file mode 100644
index 0000000000..c178abe8b9
--- /dev/null
+++ b/plugins/figma/src/common/utils.ts
@@ -0,0 +1,59 @@
+import type { ThemeInfo } from '@digdir/designsystemet/color';
+
+import type { ThemeInfo as Test } from './store';
+
+export const themeToFigmaFormat = (theme: ThemeInfo): Test => {
+  return {
+    light: {
+      1: theme.light[0].hex,
+      2: theme.light[1].hex,
+      3: theme.light[2].hex,
+      4: theme.light[3].hex,
+      5: theme.light[4].hex,
+      6: theme.light[5].hex,
+      7: theme.light[6].hex,
+      8: theme.light[7].hex,
+      9: theme.light[8].hex,
+      10: theme.light[9].hex,
+      11: theme.light[10].hex,
+      12: theme.light[11].hex,
+      13: theme.light[12].hex,
+      'contrast-1': theme.light[13].hex,
+      'contrast-2': theme.light[14].hex,
+    },
+    dark: {
+      1: theme.dark[0].hex,
+      2: theme.dark[1].hex,
+      3: theme.dark[2].hex,
+      4: theme.dark[3].hex,
+      5: theme.dark[4].hex,
+      6: theme.dark[5].hex,
+      7: theme.dark[6].hex,
+      8: theme.dark[7].hex,
+      9: theme.dark[8].hex,
+      10: theme.dark[9].hex,
+      11: theme.dark[10].hex,
+      12: theme.dark[11].hex,
+      13: theme.dark[12].hex,
+      'contrast-1': theme.dark[13].hex,
+      'contrast-2': theme.dark[14].hex,
+    },
+    contrast: {
+      1: theme.dark[0].hex,
+      2: theme.dark[1].hex,
+      3: theme.dark[2].hex,
+      4: theme.dark[3].hex,
+      5: theme.dark[4].hex,
+      6: theme.dark[5].hex,
+      7: theme.dark[6].hex,
+      8: theme.dark[7].hex,
+      9: theme.dark[8].hex,
+      10: theme.dark[9].hex,
+      11: theme.dark[10].hex,
+      12: theme.dark[11].hex,
+      13: theme.dark[12].hex,
+      'contrast-1': theme.dark[13].hex,
+      'contrast-2': theme.dark[14].hex,
+    },
+  };
+};
diff --git a/plugins/figma/src/plugin/figma/getVariables.ts b/plugins/figma/src/plugin/figma/getVariables.ts
new file mode 100644
index 0000000000..86831cf26d
--- /dev/null
+++ b/plugins/figma/src/plugin/figma/getVariables.ts
@@ -0,0 +1,16 @@
+import { rgbToHex } from '@digdir/designsystemet/color';
+
+export const getVariables = async () => {
+  const variables = await figma.variables.getLocalVariablesAsync();
+  const arr = [];
+  for (const variable of variables) {
+    if (variable.name.startsWith('theme2')) {
+      arr.push({
+        name: variable.name.substring(7),
+        value: rgbToHex(variable.valuesByMode['34811:0'] as RGB),
+      });
+    }
+  }
+
+  return arr;
+};
diff --git a/plugins/figma/src/plugin/figma/themes.ts b/plugins/figma/src/plugin/figma/themes.ts
new file mode 100644
index 0000000000..508bbc487a
--- /dev/null
+++ b/plugins/figma/src/plugin/figma/themes.ts
@@ -0,0 +1,63 @@
+import { rgbToHex } from '@digdir/designsystemet/color';
+import { getDummyTheme } from '../../common/dummyTheme';
+import type { StoreThemes } from '../../common/store';
+
+export const getThemes = async () => {
+  const collections = await figma.variables.getLocalVariableCollectionsAsync();
+  const modeColModes = collections.find(
+    (collection) => collection.name === 'Mode',
+  )?.modes;
+  const themeModes = collections.find(
+    (collection) => collection.name === 'Theme',
+  )?.modes;
+  const modeColId = collections.find(
+    (collection) => collection.name === 'Mode',
+  )?.id;
+
+  const variables = await figma.variables.getLocalVariablesAsync('COLOR');
+
+  const themes: StoreThemes = [];
+
+  if (themeModes) {
+    for (const themeMode of themeModes) {
+      themes.push({
+        name: themeMode.name,
+        themeId: themeMode.name.toLowerCase(),
+        themeModeId: themeMode.modeId,
+        colors: getDummyTheme(),
+      });
+    }
+  }
+
+  for (const variable of variables) {
+    if (variable.variableCollectionId === modeColId) {
+      const nameSplitArr = variable.name.split('/');
+
+      const themeName = nameSplitArr[0] as string;
+      const ThemeType = nameSplitArr[1] as string;
+      const ThemeIndex = nameSplitArr[2] as string;
+
+      if (themeName !== 'global' && modeColModes) {
+        for (const mode of modeColModes) {
+          const modeName = mode.name.toLocaleLowerCase() as
+            | 'light'
+            | 'dark'
+            | 'contrast';
+
+          const RGB = variable.valuesByMode[mode.modeId] as RGB;
+          const HEX = rgbToHex(RGB);
+          const theme = themes.find((theme) => theme.themeId === themeName);
+          if (theme)
+            (
+              theme.colors as Record<
+                string,
+                Record<string, Record<string, string>>
+              >
+            )[ThemeType][modeName][ThemeIndex] = HEX;
+        }
+      }
+    }
+  }
+
+  return themes;
+};
diff --git a/plugins/figma/src/plugin/figma/updateVariables.ts b/plugins/figma/src/plugin/figma/updateVariables.ts
new file mode 100644
index 0000000000..8686b7dcdb
--- /dev/null
+++ b/plugins/figma/src/plugin/figma/updateVariables.ts
@@ -0,0 +1,94 @@
+import type { ThemeColors } from '@digdir/designsystemet/color';
+import { hexToRgb, rgbToHex } from '@digdir/designsystemet/color';
+
+import type { ColorIndex, StoreThemes } from '../../common/store';
+import type { FigmaModeName } from '../../common/types';
+
+const updateColors = (
+  themes: StoreThemes,
+  variable: Variable,
+  lightModeId: string,
+  darkModeId: string,
+  modeCollection: VariableCollection,
+  themeCollection: VariableCollection,
+  variables: Variable[],
+) => {
+  const themeName = variable.name.split('/')[0] as FigmaModeName;
+  const themeType = variable.name.split('/')[1] as ThemeColors;
+  const themeIndex = variable.name.split('/')[2] as ColorIndex;
+  if (
+    variable.variableCollectionId === modeCollection.id &&
+    !variable.name.startsWith('global')
+  ) {
+    const oldLightHex = rgbToHex(variable.valuesByMode[lightModeId] as RGB);
+    const newLightHex = themes.find((theme) => theme.themeId === themeName)
+      ?.colors[themeType].light[themeIndex];
+
+    const oldDarkHex = rgbToHex(variable.valuesByMode[darkModeId] as RGB);
+    const newDarkHex = themes.find((theme) => theme.themeId === themeName)
+      ?.colors[themeType].dark[themeIndex];
+    if (newLightHex && oldLightHex !== newLightHex) {
+      const lightRGB = hexToRgb(newLightHex, '1');
+
+      if (lightRGB) {
+        variable.setValueForMode(lightModeId, lightRGB);
+      }
+    }
+    if (newDarkHex && oldDarkHex !== newDarkHex) {
+      const darkRGB = hexToRgb(newDarkHex, '1');
+      if (darkRGB) {
+        variable.setValueForMode(darkModeId, darkRGB);
+      }
+    }
+  }
+
+  // if (variable.name.startsWith(themeName + '/')) {
+  //   const varr = variables.find((variable) =>
+  //     variable.name.startsWith('color/' + themeType + '/' + themeIndex),
+  //   );
+
+  //   const themeId = themeCollection.modes.find(
+  //     (mode) => mode.name === themeName,
+  //   );
+  //   if (varr && themeId) {
+  //     varr.setValueForMode(themeId.modeId, { r: 0, g: 0, b: 0 });
+
+  //     const alias = figma.variables.createVariableAlias(variable);
+  //     if (alias) {
+  //       varr.setValueForMode(themeId.modeId, alias);
+  //     }
+  //   }
+  // }
+};
+
+export const updateVariables = async (themes: StoreThemes) => {
+  const collections = await figma.variables.getLocalVariableCollectionsAsync();
+  const modeCollection = collections.find((col) => col.name === 'Mode');
+  const themeCollection = collections.find((col) => col.name === 'Theme');
+
+  console.log('themes', themes);
+
+  if (modeCollection && themeCollection) {
+    const lightModeId: string = modeCollection.modes[0].modeId;
+    const darkModeId: string = modeCollection.modes[1].modeId;
+    const variables = await figma.variables.getLocalVariablesAsync('COLOR');
+
+    try {
+      for (const variable of variables) {
+        updateColors(
+          themes,
+          variable,
+          lightModeId,
+          darkModeId,
+          modeCollection,
+          themeCollection,
+          variables,
+        );
+      }
+      figma.ui.postMessage({ type: 'updateVariables' });
+    } catch (error) {
+      console.error(error);
+      figma.ui.postMessage({ type: 'setValueForModeError' });
+    }
+  }
+};
diff --git a/plugins/figma/src/plugin/plugin.ts b/plugins/figma/src/plugin/plugin.ts
new file mode 100644
index 0000000000..dcd735788c
--- /dev/null
+++ b/plugins/figma/src/plugin/plugin.ts
@@ -0,0 +1,96 @@
+import { Messages } from '@common/types';
+import type { ColorTheme, StoreThemes } from '../common/store';
+
+import { getVariables } from './figma/getVariables';
+import { getThemes } from './figma/themes';
+import { updateVariables } from './figma/updateVariables';
+
+figma.showUI(__html__, { width: 710, height: 550, themeColors: true });
+
+figma.ui.onmessage = (msg: {
+  type: Messages;
+  themes?: StoreThemes;
+  themeId?: string;
+  renameTheme?: {
+    newName: string;
+    themeModeId: string;
+    themeId: string;
+  };
+  addTheme?: {
+    theme: ColorTheme;
+    name: string;
+  };
+  deleteTheme?: {
+    themeModeId: string;
+    themeId: string;
+  };
+}) => {
+  void (async () => {
+    switch (msg.type) {
+      case Messages.UpdateVariables: {
+        if (msg.themes) await updateVariables(msg.themes);
+        break;
+      }
+
+      case Messages.GetThemes: {
+        const themes = await getThemes();
+        figma.ui.postMessage({ type: Messages.GetThemes, themes: themes });
+        break;
+      }
+      case Messages.GetVariables: {
+        const variables = await getVariables();
+        figma.ui.postMessage({
+          type: Messages.GetVariables,
+          variables: variables,
+        });
+        break;
+      }
+
+      /* case 'renameTheme': {
+        if (msg.renameTheme) {
+          await renameTheme(
+            msg.renameTheme.newName,
+            msg.renameTheme.themeModeId,
+            msg.renameTheme.themeId,
+          );
+          figma.ui.postMessage({ type: 'geThemesAndRedirect' });
+        }
+        break;
+      } */
+
+      /* case 'addTheme': {
+        if (msg.addTheme) await addTheme(msg.addTheme.theme, msg.addTheme.name);
+        figma.ui.postMessage({ type: 'geThemesAndRedirect' });
+        break;
+      } */
+
+      /* case 'deleteTheme': {
+        if (msg.deleteTheme)
+          await deleteTheme(
+            msg.deleteTheme.themeModeId,
+            msg.deleteTheme.themeId,
+          );
+        figma.ui.postMessage({ type: 'geThemesAndRedirect' });
+        break;
+      } */
+
+      /* case 'updateTheme': {
+        await updateTheme();
+        break;
+      } */
+
+      /* case 'generateJson': {
+        const json = await generateJson();
+        figma.ui.postMessage({ type: 'generateJson', json: json });
+        console.log('ff - ', json);
+        break;
+      } */
+
+      /* case 'getFonts': {
+        const fonts = await getFonts();
+        figma.ui.postMessage({ type: 'getFonts', fonts: fonts });
+        break;
+      } */
+    }
+  })();
+};
diff --git a/plugins/figma/src/ui/App.css b/plugins/figma/src/ui/App.css
new file mode 100644
index 0000000000..0c56231292
--- /dev/null
+++ b/plugins/figma/src/ui/App.css
@@ -0,0 +1,90 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+
+* {
+  font-feature-settings: 'cv05' 1;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  background-color: var(--ds-color-neutral-background-default);
+  color: var(--ds-color-neutral-text-default);
+  font-size: 14px;
+}
+
+.links {
+  display: flex;
+  border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
+  padding: 0 16px;
+}
+
+.link {
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  color: var(--ds-color-neutral-text-default);
+  margin-right: 20px;
+  font-weight: 400;
+  font-size: 14px;
+}
+
+.active {
+  color: var(--ds-color-neutral-text-default);
+  font-weight: 500;
+  border-bottom: 4px solid var(--ds-color-neutral-border-default);
+}
+
+.btn {
+  font-size: 14px;
+  padding: 7px 12px;
+  background-color: #b9b9b9;
+  color: black;
+  font-weight: 500;
+  transition: 0.1s all;
+  min-height: 34px;
+}
+
+.btn:hover {
+  background-color: #d4d4d4;
+}
+
+.textfield {
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+
+.textfield input {
+  height: 34px;
+  font-size: 14px;
+}
+
+.ds-label {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.ds-textfield__prefix {
+  font-size: 14px;
+  height: 34px;
+}
+
+.pageTitle {
+  font-size: 16px;
+  font-weight: 500;
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.content {
+  flex-grow: 1;
+  overflow: auto;
+}
diff --git a/plugins/figma/src/ui/app.tsx b/plugins/figma/src/ui/app.tsx
new file mode 100644
index 0000000000..e57326d985
--- /dev/null
+++ b/plugins/figma/src/ui/app.tsx
@@ -0,0 +1,31 @@
+import '@digdir/designsystemet-theme';
+import './theme.css';
+import '@digdir/designsystemet-css';
+
+import './App.css';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { Footer } from './components/Footer/Footer';
+import Theme from './pages/Theme/Theme';
+import Themes from './pages/Themes/Themes';
+import { useDsMode } from './utils/useDsMode';
+import { useStartup } from './utils/useStartup';
+
+function App() {
+  useStartup();
+  const dsMode = useDsMode();
+
+  return (
+    <div className='page' data-ds-color-mode={dsMode}>
+      <div className='content'>
+        <Routes>
+          <Route path='/' element={<Navigate to='/themes' replace />} />
+          <Route path='/themes' element={<Themes />} />
+          <Route path='/themes/:themeId' element={<Theme />} />
+        </Routes>
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export default App;
diff --git a/plugins/figma/src/ui/components/Card/Card.module.css b/plugins/figma/src/ui/components/Card/Card.module.css
new file mode 100644
index 0000000000..21cb269f56
--- /dev/null
+++ b/plugins/figma/src/ui/components/Card/Card.module.css
@@ -0,0 +1,42 @@
+.card {
+  background-color: var(--ds-color-neutral-surface-default);
+  height: 100px;
+  width: 156px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 14px;
+  text-decoration: none;
+  color: inherit;
+  transition: 0.15s box-shadow;
+}
+
+.card:hover {
+  box-shadow: 0 0 0 1px var(--ds-color-neutral-border-default);
+}
+
+.circles {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 60px;
+}
+
+.circle {
+  height: 13px;
+  width: 13px;
+  border-radius: 50%;
+  outline: 1px solid var(--ds-color-neutral-border-subtle);
+}
+
+.icon {
+  color: var(--ds-color-neutral-text-default);
+}
+
+.title {
+  font-weight: 400;
+}
diff --git a/plugins/figma/src/ui/components/Card/Card.tsx b/plugins/figma/src/ui/components/Card/Card.tsx
new file mode 100644
index 0000000000..7956938f3a
--- /dev/null
+++ b/plugins/figma/src/ui/components/Card/Card.tsx
@@ -0,0 +1,39 @@
+import cl from 'clsx/lite';
+import { Link } from 'react-router-dom';
+import classes from './Card.module.css';
+
+type CardProps = {
+  title: string;
+  icon?: React.ReactNode;
+  url: string;
+  colors?: {
+    brand1Base: string;
+    brand2Base: string;
+    brand3Base: string;
+  };
+};
+
+export const Card = ({ title, icon, url, colors }: CardProps) => {
+  return (
+    <Link to={url} className={cl(classes.card, 'ds-focus')}>
+      {icon && <div className={classes.icon}>{icon}</div>}
+      {colors && (
+        <div className={classes.circles}>
+          <div
+            className={classes.circle}
+            style={{ backgroundColor: colors.brand1Base }}
+          />
+          <div
+            className={classes.circle}
+            style={{ backgroundColor: colors.brand2Base }}
+          />
+          <div
+            className={classes.circle}
+            style={{ backgroundColor: colors.brand3Base }}
+          />
+        </div>
+      )}
+      <div className={classes.title}>{title}</div>
+    </Link>
+  );
+};
diff --git a/plugins/figma-plugin/src/ui/components/Footer/Footer.css b/plugins/figma/src/ui/components/Footer/Footer.module.css
similarity index 57%
rename from plugins/figma-plugin/src/ui/components/Footer/Footer.css
rename to plugins/figma/src/ui/components/Footer/Footer.module.css
index 82fc26f57b..311d6b95f7 100644
--- a/plugins/figma-plugin/src/ui/components/Footer/Footer.css
+++ b/plugins/figma/src/ui/components/Footer/Footer.module.css
@@ -1,26 +1,54 @@
 .footer {
   position: absolute;
   z-index: 10;
-  background-color: white;
+  background-color: var(--ds-color-neutral-background-default);
   bottom: 0;
   left: 0;
   right: 0;
+}
+
+.top {
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.btn {
+  font-size: 14px;
+  padding: 7px 12px;
+  background-color: #b9b9b9;
+  color: black;
+  font-weight: 500;
+  transition: 0.1s all;
+}
+
+.btn:hover {
+  background-color: #d4d4d4;
+}
+
+.bottom {
   height: 44px;
   border-top: 1px solid var(--ds-color-neutral-border-subtle);
+  padding: 0 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 16px;
 }
 
-.footer__right {
+.bottomLeft {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
+}
+
+.bottomRight {
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .version {
-  background-color: var(--ds-color-neutral-surface-default);
   font-size: 14px;
   color: var(--ds-color-neutral-text-subtle);
   font-weight: 500;
@@ -38,3 +66,7 @@
   background-color: var(--ds-color-neutral-surface-default);
   color: var(--ds-color-neutral-text-default);
 }
+
+.link {
+  text-decoration: none;
+}
diff --git a/plugins/figma/src/ui/components/Footer/Footer.tsx b/plugins/figma/src/ui/components/Footer/Footer.tsx
new file mode 100644
index 0000000000..dac6861ccb
--- /dev/null
+++ b/plugins/figma/src/ui/components/Footer/Footer.tsx
@@ -0,0 +1,43 @@
+import { Spinner, Tooltip } from '@digdir/designsystemet-react';
+import { ChatElipsisIcon } from '@navikt/aksel-icons';
+
+import packageJson from '../../../../package.json';
+import { useThemeStore } from '../../../common/store';
+
+import classes from './Footer.module.css';
+
+export const Footer = () => {
+  const loading = useThemeStore((state) => state.loading);
+
+  return (
+    <div className={classes.footer}>
+      {/* <div className={classes.top}>
+        <div className={classes.topLeft}></div>
+
+        <div className={classes.topRight}>
+
+        </div>
+      </div> */}
+      <div className={classes.bottom}>
+        <div className={classes.bottomLeft}>
+          {loading && (
+            <Spinner title='fff' size='xs' className={classes.spinner} />
+          )}
+        </div>
+        <div className={classes.bottomRight}>
+          <div className={classes.version}>V {packageJson.version}</div>
+          <Tooltip content='Feedback' placement='top'>
+            <a
+              href='https://github.com/digdir/designsystemet'
+              rel='noreferrer'
+              target='_blank'
+              className={classes.feedback}
+            >
+              <ChatElipsisIcon fontSize='1.3rem' />
+            </a>
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/plugins/figma/src/ui/index.html b/plugins/figma/src/ui/index.html
new file mode 100644
index 0000000000..ec4a1ae568
--- /dev/null
+++ b/plugins/figma/src/ui/index.html
@@ -0,0 +1,5 @@
+<div id="root"></div>
+<script
+  type="module"
+  src="./main.tsx"
+></script>
diff --git a/plugins/figma-plugin/src/ui/main.tsx b/plugins/figma/src/ui/main.tsx
similarity index 100%
rename from plugins/figma-plugin/src/ui/main.tsx
rename to plugins/figma/src/ui/main.tsx
diff --git a/plugins/figma/src/ui/pages/Theme/Theme.module.css b/plugins/figma/src/ui/pages/Theme/Theme.module.css
new file mode 100644
index 0000000000..73fa4ca4dd
--- /dev/null
+++ b/plugins/figma/src/ui/pages/Theme/Theme.module.css
@@ -0,0 +1,46 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-4);
+}
+
+.content {
+  padding: var(--ds-spacing-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-6);
+  margin-top: var(--ds-spacing-2);
+}
+
+.cards {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-spacing-4);
+  margin-top: var(--ds-spacing-6);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.headerLeft {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+}
+
+.text {
+  line-height: 1.5em;
+}
+
+.breadcrumbs {
+  margin-left: -4px;
+}
+
+.breadcrumbs_link {
+  display: flex;
+  gap: var(--ds-spacing-1);
+  align-items: center;
+}
diff --git a/plugins/figma/src/ui/pages/Theme/Theme.tsx b/plugins/figma/src/ui/pages/Theme/Theme.tsx
new file mode 100644
index 0000000000..61efa9ddcb
--- /dev/null
+++ b/plugins/figma/src/ui/pages/Theme/Theme.tsx
@@ -0,0 +1,155 @@
+import {
+  Breadcrumbs,
+  Button,
+  Label,
+  Link,
+  Paragraph,
+  Textarea,
+  ValidationMessage,
+} from '@digdir/designsystemet-react';
+import { useEffect, useId, useState } from 'react';
+import { Link as RouterLink, useParams } from 'react-router-dom';
+
+import { type ColorTheme, useThemeStore } from '../../../common/store';
+
+import type { CssColor } from '@adobe/leonardo-contrast-colors';
+import { getDummyTheme } from '@common/dummyTheme';
+import { generateThemeForColor } from '@digdir/designsystemet/color';
+import { themeToFigmaFormat } from '../../../common/utils';
+import classes from './Theme.module.css';
+
+function Theme() {
+  const { themeId } = useParams();
+  const errorId = useId();
+  const themes = useThemeStore((state) => state.themes);
+  const setLoading = useThemeStore((state) => state.setLoading);
+  const [, setTheme] = useState<ColorTheme>(getDummyTheme());
+  const [command, setCommand] = useState('');
+  const [themeIndex, setThemeIndex] = useState<number>(0);
+  const setThemes = useThemeStore((state) => state.setThemes);
+  const loading = useThemeStore((state) => state.loading);
+  const codeSnippetError = useThemeStore((state) => state.codeSnipperError);
+  const setCodeSnippetError = useThemeStore(
+    (state) => state.setCodeSnippetError,
+  );
+
+  useEffect(() => {
+    setThemeIndex(themes.findIndex((theme) => theme.themeModeId === themeId));
+    setTheme(
+      themes.find((theme) => theme.themeModeId === themeId)
+        ?.colors as ColorTheme,
+    );
+  });
+
+  const handleClick = () => {
+    const pattern =
+      /--accent\s+"(#\w{6})"\s+--neutral\s+"(#\w{6})"\s+--brand1\s+"(#\w{6})"\s+--brand2\s+"(#\w{6})"\s+--brand3\s+"(#\w{6})"/;
+    const matches = command.replace(/\\/g, '').match(pattern);
+
+    if (matches) {
+      const accent = matches[1] as CssColor;
+      const neutral = matches[2] as CssColor;
+      const brand1 = matches[3] as CssColor;
+      const brand2 = matches[4] as CssColor;
+      const brand3 = matches[5] as CssColor;
+
+      console.log(
+        `Accent: ${accent}, Neutral: ${neutral}, Brand1: ${brand1}, Brand2: ${brand2}, Brand3: ${brand3}`,
+      );
+
+      const newArray = Array.from(themes);
+      newArray[themeIndex] = {
+        ...newArray[themeIndex],
+        colors: {
+          ...newArray[themeIndex].colors,
+          accent: themeToFigmaFormat(generateThemeForColor(accent)),
+          neutral: themeToFigmaFormat(generateThemeForColor(neutral)),
+          brand1: themeToFigmaFormat(generateThemeForColor(brand1)),
+          brand2: themeToFigmaFormat(generateThemeForColor(brand2)),
+          brand3: themeToFigmaFormat(generateThemeForColor(brand3)),
+        },
+      };
+
+      setThemes(newArray);
+      setLoading(true);
+      setCommand('');
+
+      setTimeout(() => {
+        parent.postMessage(
+          {
+            pluginMessage: {
+              type: 'updateVariables',
+              themes: newArray,
+            },
+          },
+          '*',
+        );
+      }, 500);
+    } else {
+      console.log('No match');
+      setCodeSnippetError(
+        'Koden du limte inn er ikke gyldig. Prøv å lim inn på nytt.',
+      );
+    }
+  };
+
+  return (
+    <div className={classes.content}>
+      <div className={classes.header}>
+        <div className={classes.headerLeft}>
+          <Breadcrumbs size='sm' className={classes.breadcrumbs}>
+            <Breadcrumbs.Link
+              className={classes.breadcrumbs_link}
+              aria-label='Tilbake til alle temaer'
+              asChild
+            >
+              <RouterLink to='/'>Mine temaer</RouterLink>
+            </Breadcrumbs.Link>
+          </Breadcrumbs>
+        </div>
+      </div>
+      <div className={classes.wrapper}>
+        <Paragraph variant='long' size='sm'>
+          Gå til{' '}
+          <Link href='https://theme.designsystemet.no/' target='_blank'>
+            Temabyggeren
+          </Link>{' '}
+          for å lage deg et tema og lim inn koden i feltet under. Det er kun
+          fargene som blir oppdatert for øyeblikket. Vi jobber med å utvide
+          pluginen med mer funksjonalitet senere.
+        </Paragraph>
+        <Label htmlFor='my-textarea'>Kodesnutt fra temabyggeren</Label>
+        <Textarea
+          size='sm'
+          value={command}
+          onChange={(e) => setCommand(e.target.value)}
+          name=''
+          id='my-textarea'
+          rows={8}
+          className={classes.textarea}
+          placeholder='Lim inn her...'
+          /* error={codeSnippetError} */
+          aria-describedby={errorId}
+        />
+        <div id={errorId} aria-live='polite' aria-relevant='additions removals'>
+          {codeSnippetError ? (
+            <ValidationMessage>{codeSnippetError}</ValidationMessage>
+          ) : null}
+        </div>
+        <div className={classes.btnContainer}>
+          <Button
+            className={classes.btn}
+            size='sm'
+            onClick={() => handleClick()}
+            loading={loading}
+          >
+            Oppdater tema
+          </Button>
+        </div>
+      </div>
+      <div className={classes.cards}></div>
+    </div>
+  );
+}
+
+export default Theme;
diff --git a/plugins/figma/src/ui/pages/Themes/Themes.module.css b/plugins/figma/src/ui/pages/Themes/Themes.module.css
new file mode 100644
index 0000000000..4dd2dc60a5
--- /dev/null
+++ b/plugins/figma/src/ui/pages/Themes/Themes.module.css
@@ -0,0 +1,13 @@
+.cards {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.content {
+  padding: 16px;
+}
+
+.heading {
+  margin-bottom: var(--ds-spacing-4);
+}
diff --git a/plugins/figma/src/ui/pages/Themes/Themes.tsx b/plugins/figma/src/ui/pages/Themes/Themes.tsx
new file mode 100644
index 0000000000..29dbeafa16
--- /dev/null
+++ b/plugins/figma/src/ui/pages/Themes/Themes.tsx
@@ -0,0 +1,45 @@
+import { Card } from '@ui/components/Card/Card';
+import { useEffect } from 'react';
+import { useThemeStore } from '../../../common/store';
+
+import { Heading } from '@digdir/designsystemet-react';
+import classes from './Themes.module.css';
+
+function Themes() {
+  const themes = useThemeStore((state) => state.themes);
+  const noThemeFound = useThemeStore((state) => state.noThemesFound);
+
+  useEffect(() => {}, []);
+
+  return (
+    <div className={classes.content}>
+      <Heading size='2xs' className={classes.heading}>
+        Mine temaer
+      </Heading>
+      {noThemeFound && (
+        <p className={classes.noThemes}>
+          Fant ingen temaer. Husk at du må åpne pluginen i designsystemet sin
+          Core UI kit Figma community fil.
+        </p>
+      )}
+      <div className={classes.cards}>
+        {themes.map((theme, index) => {
+          return (
+            <Card
+              key={index}
+              title={theme.name}
+              url={`/themes/${theme.themeModeId}`}
+              colors={{
+                brand1Base: theme.colors.brand1.light?.[9] ?? '',
+                brand2Base: theme.colors.brand2.light?.[9] ?? '',
+                brand3Base: theme.colors.brand3.light?.[9] ?? '',
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default Themes;
diff --git a/plugins/figma/src/ui/theme.css b/plugins/figma/src/ui/theme.css
new file mode 100644
index 0000000000..be69cff5a3
--- /dev/null
+++ b/plugins/figma/src/ui/theme.css
@@ -0,0 +1,1939 @@
+@charset 'UTF-8';
+
+@layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components;
+
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.color-mode.light {
+  :root,
+  [data-ds-color-mode='light'] {
+    --ds-color-accent-1: #fefeff;
+    --ds-color-accent-2: #eef4fa;
+    --ds-color-accent-3: #d4e5f3;
+    --ds-color-accent-4: #bad5ec;
+    --ds-color-accent-5: #a1c5e5;
+    --ds-color-accent-6: #97bfe3;
+    --ds-color-accent-7: #3a85ca;
+    --ds-color-accent-8: #004d93;
+    --ds-color-accent-9: #0062ba;
+    --ds-color-accent-10: #005099;
+    --ds-color-accent-11: #003d75;
+    --ds-color-accent-12: #0163ba;
+    --ds-color-accent-13: #002c54;
+    --ds-color-accent-contrast-1: #ffffff;
+    --ds-color-accent-contrast-2: #dbe9f5;
+    --ds-color-accent-background-default: var(--ds-color-accent-1);
+    --ds-color-accent-background-subtle: var(--ds-color-accent-2);
+    --ds-color-accent-surface-default: var(--ds-color-accent-3);
+    --ds-color-accent-surface-hover: var(--ds-color-accent-4);
+    --ds-color-accent-surface-active: var(--ds-color-accent-5);
+    --ds-color-accent-border-subtle: var(--ds-color-accent-6);
+    --ds-color-accent-border-default: var(--ds-color-accent-7);
+    --ds-color-accent-border-strong: var(--ds-color-accent-8);
+    --ds-color-accent-base-default: var(--ds-color-accent-9);
+    --ds-color-accent-base-hover: var(--ds-color-accent-10);
+    --ds-color-accent-base-active: var(--ds-color-accent-11);
+    --ds-color-accent-text-subtle: var(--ds-color-accent-12);
+    --ds-color-accent-text-default: var(--ds-color-accent-13);
+    --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
+    --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
+    --ds-color-neutral-1: #fefefe;
+    --ds-color-neutral-2: #f2f2f2;
+    --ds-color-neutral-3: #e1e1e1;
+    --ds-color-neutral-4: #d1d1d1;
+    --ds-color-neutral-5: #c1c1c1;
+    --ds-color-neutral-6: #bbbbbb;
+    --ds-color-neutral-7: #818181;
+    --ds-color-neutral-8: #4e4e4e;
+    --ds-color-neutral-9: #3e3e3e;
+    --ds-color-neutral-10: #505050;
+    --ds-color-neutral-11: #636363;
+    --ds-color-neutral-12: #636363;
+    --ds-color-neutral-13: #2c2c2c;
+    --ds-color-neutral-contrast-1: #ffffff;
+    --ds-color-neutral-contrast-2: #d6d6d6;
+    --ds-color-neutral-background-default: var(--ds-color-neutral-1);
+    --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
+    --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
+    --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
+    --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
+    --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
+    --ds-color-neutral-border-default: var(--ds-color-neutral-7);
+    --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
+    --ds-color-neutral-base-default: var(--ds-color-neutral-9);
+    --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
+    --ds-color-neutral-base-active: var(--ds-color-neutral-11);
+    --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
+    --ds-color-neutral-text-default: var(--ds-color-neutral-13);
+    --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
+    --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
+    --ds-color-brand1-1: #fffefe;
+    --ds-color-brand1-2: #fef0f1;
+    --ds-color-brand1-3: #fcdadb;
+    --ds-color-brand1-4: #fbc4c5;
+    --ds-color-brand1-5: #f9adaf;
+    --ds-color-brand1-6: #f9a5a7;
+    --ds-color-brand1-7: #d95558;
+    --ds-color-brand1-8: #843336;
+    --ds-color-brand1-9: #f45f63;
+    --ds-color-brand1-10: #d15155;
+    --ds-color-brand1-11: #b04447;
+    --ds-color-brand1-12: #a84144;
+    --ds-color-brand1-13: #4c1d1f;
+    --ds-color-brand1-contrast-1: #000000;
+    --ds-color-brand1-contrast-2: #000000;
+    --ds-color-brand1-background-default: var(--ds-color-brand1-1);
+    --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
+    --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
+    --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
+    --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
+    --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
+    --ds-color-brand1-border-default: var(--ds-color-brand1-7);
+    --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
+    --ds-color-brand1-base-default: var(--ds-color-brand1-9);
+    --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
+    --ds-color-brand1-base-active: var(--ds-color-brand1-11);
+    --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
+    --ds-color-brand1-text-default: var(--ds-color-brand1-13);
+    --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
+    --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
+    --ds-color-brand2-1: #fffefc;
+    --ds-color-brand2-2: #fbf3e0;
+    --ds-color-brand2-3: #f5dfac;
+    --ds-color-brand2-4: #f0ce7e;
+    --ds-color-brand2-5: #eaba4a;
+    --ds-color-brand2-6: #e8b338;
+    --ds-color-brand2-7: #a57a17;
+    --ds-color-brand2-8: #634a0e;
+    --ds-color-brand2-9: #e5aa20;
+    --ds-color-brand2-10: #c9951c;
+    --ds-color-brand2-11: #ae8118;
+    --ds-color-brand2-12: #7e5d12;
+    --ds-color-brand2-13: #382a08;
+    --ds-color-brand2-contrast-1: #000000;
+    --ds-color-brand2-contrast-2: #2b2006;
+    --ds-color-brand2-background-default: var(--ds-color-brand2-1);
+    --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
+    --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
+    --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
+    --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
+    --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
+    --ds-color-brand2-border-default: var(--ds-color-brand2-7);
+    --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
+    --ds-color-brand2-base-default: var(--ds-color-brand2-9);
+    --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
+    --ds-color-brand2-base-active: var(--ds-color-brand2-11);
+    --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
+    --ds-color-brand2-text-default: var(--ds-color-brand2-13);
+    --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
+    --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
+    --ds-color-brand3-1: #fdfeff;
+    --ds-color-brand3-2: #eaf6fe;
+    --ds-color-brand3-3: #c8e6fd;
+    --ds-color-brand3-4: #a9d7fb;
+    --ds-color-brand3-5: #84c7fa;
+    --ds-color-brand3-6: #7ac2f9;
+    --ds-color-brand3-7: #1a85d6;
+    --ds-color-brand3-8: #105082;
+    --ds-color-brand3-9: #1e98f5;
+    --ds-color-brand3-10: #1a83d3;
+    --ds-color-brand3-11: #166eb2;
+    --ds-color-brand3-12: #1466a5;
+    --ds-color-brand3-13: #092e4b;
+    --ds-color-brand3-contrast-1: #000000;
+    --ds-color-brand3-contrast-2: #010407;
+    --ds-color-brand3-background-default: var(--ds-color-brand3-1);
+    --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
+    --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
+    --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
+    --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
+    --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
+    --ds-color-brand3-border-default: var(--ds-color-brand3-7);
+    --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
+    --ds-color-brand3-base-default: var(--ds-color-brand3-9);
+    --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
+    --ds-color-brand3-base-active: var(--ds-color-brand3-11);
+    --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
+    --ds-color-brand3-text-default: var(--ds-color-brand3-13);
+    --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
+    --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
+    --ds-color-success-background-default: var(--ds-global-green-1);
+    --ds-color-success-background-subtle: var(--ds-global-green-2);
+    --ds-color-success-surface-default: var(--ds-global-green-3);
+    --ds-color-success-surface-hover: var(--ds-global-green-4);
+    --ds-color-success-surface-active: var(--ds-global-green-5);
+    --ds-color-success-border-subtle: var(--ds-global-green-6);
+    --ds-color-success-border-default: var(--ds-global-green-7);
+    --ds-color-success-border-strong: var(--ds-global-green-8);
+    --ds-color-success-base-default: var(--ds-global-green-9);
+    --ds-color-success-base-hover: var(--ds-global-green-10);
+    --ds-color-success-base-active: var(--ds-global-green-11);
+    --ds-color-success-text-subtle: var(--ds-global-green-12);
+    --ds-color-success-text-default: var(--ds-global-green-13);
+    --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
+    --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
+    --ds-color-danger-background-default: var(--ds-global-red-1);
+    --ds-color-danger-background-subtle: var(--ds-global-red-2);
+    --ds-color-danger-surface-default: var(--ds-global-red-3);
+    --ds-color-danger-surface-hover: var(--ds-global-red-4);
+    --ds-color-danger-surface-active: var(--ds-global-red-5);
+    --ds-color-danger-border-subtle: var(--ds-global-red-6);
+    --ds-color-danger-border-default: var(--ds-global-red-7);
+    --ds-color-danger-border-strong: var(--ds-global-red-8);
+    --ds-color-danger-base-default: var(--ds-global-red-9);
+    --ds-color-danger-base-hover: var(--ds-global-red-10);
+    --ds-color-danger-base-active: var(--ds-global-red-11);
+    --ds-color-danger-text-subtle: var(--ds-global-red-12);
+    --ds-color-danger-text-default: var(--ds-global-red-13);
+    --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
+    --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
+    --ds-color-info-background-default: #fefeff;
+    --ds-color-info-background-subtle: #edf5fa;
+    --ds-color-info-surface-default: #d3e5f4;
+    --ds-color-info-surface-hover: #b7d5ed;
+    --ds-color-info-surface-active: #9bc5e5;
+    --ds-color-info-border-subtle: #94c1e3;
+    --ds-color-info-border-default: #2f86c9;
+    --ds-color-info-border-strong: #075089;
+    --ds-color-info-base-default: #0a71c0;
+    --ds-color-info-base-hover: #085ea0;
+    --ds-color-info-base-active: #074b80;
+    --ds-color-info-text-subtle: #0966ac;
+    --ds-color-info-text-default: #042d4d;
+    --ds-color-info-contrast-default: #ffffff;
+    --ds-color-info-contrast-subtle: #f3f8fc;
+    --ds-color-warning-background-default: var(--ds-global-yellow-1);
+    --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
+    --ds-color-warning-surface-default: var(--ds-global-yellow-3);
+    --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
+    --ds-color-warning-surface-active: var(--ds-global-yellow-5);
+    --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
+    --ds-color-warning-border-default: var(--ds-global-yellow-7);
+    --ds-color-warning-border-strong: var(--ds-global-yellow-8);
+    --ds-color-warning-base-default: var(--ds-global-orange-9);
+    --ds-color-warning-base-hover: var(--ds-global-orange-10);
+    --ds-color-warning-base-active: var(--ds-global-orange-11);
+    --ds-color-warning-text-subtle: var(--ds-global-orange-12);
+    --ds-color-warning-text-default: var(--ds-global-orange-13);
+    --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
+    --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
+    --ds-color-focus-inner: #fefefe;
+    --ds-color-focus-outer: #002c54;
+    --ds-global-blue-1: #fefeff;
+    --ds-global-blue-2: #edf5fa;
+    --ds-global-blue-3: #d3e5f4;
+    --ds-global-blue-4: #b7d5ed;
+    --ds-global-blue-5: #9bc5e5;
+    --ds-global-blue-6: #94c1e3;
+    --ds-global-blue-7: #2f86c9;
+    --ds-global-blue-8: #075089;
+    --ds-global-blue-9: #0a71c0;
+    --ds-global-blue-10: #085ea0;
+    --ds-global-blue-11: #074b80;
+    --ds-global-blue-12: #0966ac;
+    --ds-global-blue-13: #042d4d;
+    --ds-global-blue-contrast-1: #ffffff;
+    --ds-global-blue-contrast-2: #f3f8fc;
+    --ds-global-green-1: #fcfefc;
+    --ds-global-green-2: #edf6ee;
+    --ds-global-green-3: #d1e9d4;
+    --ds-global-green-4: #b5dbba;
+    --ds-global-green-5: #96cd9e;
+    --ds-global-green-6: #8fc997;
+    --ds-global-green-7: #229532;
+    --ds-global-green-8: #045a10;
+    --ds-global-green-9: #068718;
+    --ds-global-green-10: #057114;
+    --ds-global-green-11: #045a10;
+    --ds-global-green-12: #057315;
+    --ds-global-green-13: #023409;
+    --ds-global-green-contrast-1: #ffffff;
+    --ds-global-green-contrast-2: #f9fcf9;
+    --ds-global-orange-1: #fffefe;
+    --ds-global-orange-2: #f9f2ed;
+    --ds-global-orange-3: #f1ded3;
+    --ds-global-orange-4: #e9cbb8;
+    --ds-global-orange-5: #e1b9a0;
+    --ds-global-orange-6: #deb296;
+    --ds-global-orange-7: #c06b36;
+    --ds-global-orange-8: #7c3b14;
+    --ds-global-orange-9: #b8581d;
+    --ds-global-orange-10: #9a4918;
+    --ds-global-orange-11: #7c3b14;
+    --ds-global-orange-12: #9e4b19;
+    --ds-global-orange-13: #47220b;
+    --ds-global-orange-contrast-1: #ffffff;
+    --ds-global-orange-contrast-2: #fdfbf9;
+    --ds-global-purple-1: #fefefe;
+    --ds-global-purple-2: #f5f2f9;
+    --ds-global-purple-3: #e7dfef;
+    --ds-global-purple-4: #d9cce6;
+    --ds-global-purple-5: #ccbadd;
+    --ds-global-purple-6: #c7b4da;
+    --ds-global-purple-7: #9572b9;
+    --ds-global-purple-8: #663399;
+    --ds-global-purple-9: #663299;
+    --ds-global-purple-10: #4f2777;
+    --ds-global-purple-11: #381b54;
+    --ds-global-purple-12: #7b4ea7;
+    --ds-global-purple-13: #3b1d59;
+    --ds-global-purple-contrast-1: #ffffff;
+    --ds-global-purple-contrast-2: #eee8f3;
+    --ds-global-red-1: #fffefe;
+    --ds-global-red-2: #fbf1f1;
+    --ds-global-red-3: #f5dcdc;
+    --ds-global-red-4: #f0c7c7;
+    --ds-global-red-5: #eab3b3;
+    --ds-global-red-6: #e8acac;
+    --ds-global-red-7: #d25b5b;
+    --ds-global-red-8: #9a1616;
+    --ds-global-red-9: #c01b1b;
+    --ds-global-red-10: #9a1616;
+    --ds-global-red-11: #771111;
+    --ds-global-red-12: #c22020;
+    --ds-global-red-13: #5a0d0d;
+    --ds-global-red-contrast-1: #ffffff;
+    --ds-global-red-contrast-2: #f6dfdf;
+    --ds-global-yellow-1: #fffefc;
+    --ds-global-yellow-2: #fbf2d3;
+    --ds-global-yellow-3: #f5e19b;
+    --ds-global-yellow-4: #efcf5d;
+    --ds-global-yellow-5: #e6bc27;
+    --ds-global-yellow-6: #e0b726;
+    --ds-global-yellow-7: #9a7e1a;
+    --ds-global-yellow-8: #5d4c10;
+    --ds-global-yellow-9: #eabf28;
+    --ds-global-yellow-10: #d0aa24;
+    --ds-global-yellow-11: #b7951f;
+    --ds-global-yellow-12: #776114;
+    --ds-global-yellow-13: #352b09;
+    --ds-global-yellow-contrast-1: #000000;
+    --ds-global-yellow-contrast-2: #382d0a;
+
+    color-scheme: light;
+  }
+
+  @media (prefers-color-scheme: light) {
+    [data-ds-color-mode='auto'] {
+      --ds-color-accent-1: #fefeff;
+      --ds-color-accent-2: #eef4fa;
+      --ds-color-accent-3: #d4e5f3;
+      --ds-color-accent-4: #bad5ec;
+      --ds-color-accent-5: #a1c5e5;
+      --ds-color-accent-6: #97bfe3;
+      --ds-color-accent-7: #3a85ca;
+      --ds-color-accent-8: #004d93;
+      --ds-color-accent-9: #0062ba;
+      --ds-color-accent-10: #005099;
+      --ds-color-accent-11: #003d75;
+      --ds-color-accent-12: #0163ba;
+      --ds-color-accent-13: #002c54;
+      --ds-color-accent-contrast-1: #ffffff;
+      --ds-color-accent-contrast-2: #dbe9f5;
+      --ds-color-accent-background-default: var(--ds-color-accent-1);
+      --ds-color-accent-background-subtle: var(--ds-color-accent-2);
+      --ds-color-accent-surface-default: var(--ds-color-accent-3);
+      --ds-color-accent-surface-hover: var(--ds-color-accent-4);
+      --ds-color-accent-surface-active: var(--ds-color-accent-5);
+      --ds-color-accent-border-subtle: var(--ds-color-accent-6);
+      --ds-color-accent-border-default: var(--ds-color-accent-7);
+      --ds-color-accent-border-strong: var(--ds-color-accent-8);
+      --ds-color-accent-base-default: var(--ds-color-accent-9);
+      --ds-color-accent-base-hover: var(--ds-color-accent-10);
+      --ds-color-accent-base-active: var(--ds-color-accent-11);
+      --ds-color-accent-text-subtle: var(--ds-color-accent-12);
+      --ds-color-accent-text-default: var(--ds-color-accent-13);
+      --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
+      --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
+      --ds-color-neutral-1: #fefefe;
+      --ds-color-neutral-2: #f2f2f2;
+      --ds-color-neutral-3: #e1e1e1;
+      --ds-color-neutral-4: #d1d1d1;
+      --ds-color-neutral-5: #c1c1c1;
+      --ds-color-neutral-6: #bbbbbb;
+      --ds-color-neutral-7: #818181;
+      --ds-color-neutral-8: #4e4e4e;
+      --ds-color-neutral-9: #3e3e3e;
+      --ds-color-neutral-10: #505050;
+      --ds-color-neutral-11: #636363;
+      --ds-color-neutral-12: #636363;
+      --ds-color-neutral-13: #2c2c2c;
+      --ds-color-neutral-contrast-1: #ffffff;
+      --ds-color-neutral-contrast-2: #d6d6d6;
+      --ds-color-neutral-background-default: var(--ds-color-neutral-1);
+      --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
+      --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
+      --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
+      --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
+      --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
+      --ds-color-neutral-border-default: var(--ds-color-neutral-7);
+      --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
+      --ds-color-neutral-base-default: var(--ds-color-neutral-9);
+      --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
+      --ds-color-neutral-base-active: var(--ds-color-neutral-11);
+      --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
+      --ds-color-neutral-text-default: var(--ds-color-neutral-13);
+      --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
+      --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
+      --ds-color-brand1-1: #fffefe;
+      --ds-color-brand1-2: #fef0f1;
+      --ds-color-brand1-3: #fcdadb;
+      --ds-color-brand1-4: #fbc4c5;
+      --ds-color-brand1-5: #f9adaf;
+      --ds-color-brand1-6: #f9a5a7;
+      --ds-color-brand1-7: #d95558;
+      --ds-color-brand1-8: #843336;
+      --ds-color-brand1-9: #f45f63;
+      --ds-color-brand1-10: #d15155;
+      --ds-color-brand1-11: #b04447;
+      --ds-color-brand1-12: #a84144;
+      --ds-color-brand1-13: #4c1d1f;
+      --ds-color-brand1-contrast-1: #000000;
+      --ds-color-brand1-contrast-2: #000000;
+      --ds-color-brand1-background-default: var(--ds-color-brand1-1);
+      --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
+      --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
+      --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
+      --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
+      --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
+      --ds-color-brand1-border-default: var(--ds-color-brand1-7);
+      --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
+      --ds-color-brand1-base-default: var(--ds-color-brand1-9);
+      --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
+      --ds-color-brand1-base-active: var(--ds-color-brand1-11);
+      --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
+      --ds-color-brand1-text-default: var(--ds-color-brand1-13);
+      --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
+      --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
+      --ds-color-brand2-1: #fffefc;
+      --ds-color-brand2-2: #fbf3e0;
+      --ds-color-brand2-3: #f5dfac;
+      --ds-color-brand2-4: #f0ce7e;
+      --ds-color-brand2-5: #eaba4a;
+      --ds-color-brand2-6: #e8b338;
+      --ds-color-brand2-7: #a57a17;
+      --ds-color-brand2-8: #634a0e;
+      --ds-color-brand2-9: #e5aa20;
+      --ds-color-brand2-10: #c9951c;
+      --ds-color-brand2-11: #ae8118;
+      --ds-color-brand2-12: #7e5d12;
+      --ds-color-brand2-13: #382a08;
+      --ds-color-brand2-contrast-1: #000000;
+      --ds-color-brand2-contrast-2: #2b2006;
+      --ds-color-brand2-background-default: var(--ds-color-brand2-1);
+      --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
+      --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
+      --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
+      --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
+      --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
+      --ds-color-brand2-border-default: var(--ds-color-brand2-7);
+      --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
+      --ds-color-brand2-base-default: var(--ds-color-brand2-9);
+      --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
+      --ds-color-brand2-base-active: var(--ds-color-brand2-11);
+      --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
+      --ds-color-brand2-text-default: var(--ds-color-brand2-13);
+      --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
+      --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
+      --ds-color-brand3-1: #fdfeff;
+      --ds-color-brand3-2: #eaf6fe;
+      --ds-color-brand3-3: #c8e6fd;
+      --ds-color-brand3-4: #a9d7fb;
+      --ds-color-brand3-5: #84c7fa;
+      --ds-color-brand3-6: #7ac2f9;
+      --ds-color-brand3-7: #1a85d6;
+      --ds-color-brand3-8: #105082;
+      --ds-color-brand3-9: #1e98f5;
+      --ds-color-brand3-10: #1a83d3;
+      --ds-color-brand3-11: #166eb2;
+      --ds-color-brand3-12: #1466a5;
+      --ds-color-brand3-13: #092e4b;
+      --ds-color-brand3-contrast-1: #000000;
+      --ds-color-brand3-contrast-2: #010407;
+      --ds-color-brand3-background-default: var(--ds-color-brand3-1);
+      --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
+      --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
+      --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
+      --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
+      --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
+      --ds-color-brand3-border-default: var(--ds-color-brand3-7);
+      --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
+      --ds-color-brand3-base-default: var(--ds-color-brand3-9);
+      --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
+      --ds-color-brand3-base-active: var(--ds-color-brand3-11);
+      --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
+      --ds-color-brand3-text-default: var(--ds-color-brand3-13);
+      --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
+      --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
+      --ds-color-success-background-default: var(--ds-global-green-1);
+      --ds-color-success-background-subtle: var(--ds-global-green-2);
+      --ds-color-success-surface-default: var(--ds-global-green-3);
+      --ds-color-success-surface-hover: var(--ds-global-green-4);
+      --ds-color-success-surface-active: var(--ds-global-green-5);
+      --ds-color-success-border-subtle: var(--ds-global-green-6);
+      --ds-color-success-border-default: var(--ds-global-green-7);
+      --ds-color-success-border-strong: var(--ds-global-green-8);
+      --ds-color-success-base-default: var(--ds-global-green-9);
+      --ds-color-success-base-hover: var(--ds-global-green-10);
+      --ds-color-success-base-active: var(--ds-global-green-11);
+      --ds-color-success-text-subtle: var(--ds-global-green-12);
+      --ds-color-success-text-default: var(--ds-global-green-13);
+      --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
+      --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
+      --ds-color-danger-background-default: var(--ds-global-red-1);
+      --ds-color-danger-background-subtle: var(--ds-global-red-2);
+      --ds-color-danger-surface-default: var(--ds-global-red-3);
+      --ds-color-danger-surface-hover: var(--ds-global-red-4);
+      --ds-color-danger-surface-active: var(--ds-global-red-5);
+      --ds-color-danger-border-subtle: var(--ds-global-red-6);
+      --ds-color-danger-border-default: var(--ds-global-red-7);
+      --ds-color-danger-border-strong: var(--ds-global-red-8);
+      --ds-color-danger-base-default: var(--ds-global-red-9);
+      --ds-color-danger-base-hover: var(--ds-global-red-10);
+      --ds-color-danger-base-active: var(--ds-global-red-11);
+      --ds-color-danger-text-subtle: var(--ds-global-red-12);
+      --ds-color-danger-text-default: var(--ds-global-red-13);
+      --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
+      --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
+      --ds-color-info-background-default: #fefeff;
+      --ds-color-info-background-subtle: #edf5fa;
+      --ds-color-info-surface-default: #d3e5f4;
+      --ds-color-info-surface-hover: #b7d5ed;
+      --ds-color-info-surface-active: #9bc5e5;
+      --ds-color-info-border-subtle: #94c1e3;
+      --ds-color-info-border-default: #2f86c9;
+      --ds-color-info-border-strong: #075089;
+      --ds-color-info-base-default: #0a71c0;
+      --ds-color-info-base-hover: #085ea0;
+      --ds-color-info-base-active: #074b80;
+      --ds-color-info-text-subtle: #0966ac;
+      --ds-color-info-text-default: #042d4d;
+      --ds-color-info-contrast-default: #ffffff;
+      --ds-color-info-contrast-subtle: #f3f8fc;
+      --ds-color-warning-background-default: var(--ds-global-yellow-1);
+      --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
+      --ds-color-warning-surface-default: var(--ds-global-yellow-3);
+      --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
+      --ds-color-warning-surface-active: var(--ds-global-yellow-5);
+      --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
+      --ds-color-warning-border-default: var(--ds-global-yellow-7);
+      --ds-color-warning-border-strong: var(--ds-global-yellow-8);
+      --ds-color-warning-base-default: var(--ds-global-orange-9);
+      --ds-color-warning-base-hover: var(--ds-global-orange-10);
+      --ds-color-warning-base-active: var(--ds-global-orange-11);
+      --ds-color-warning-text-subtle: var(--ds-global-orange-12);
+      --ds-color-warning-text-default: var(--ds-global-orange-13);
+      --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
+      --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
+      --ds-color-focus-inner: #fefefe;
+      --ds-color-focus-outer: #002c54;
+      --ds-global-blue-1: #fefeff;
+      --ds-global-blue-2: #edf5fa;
+      --ds-global-blue-3: #d3e5f4;
+      --ds-global-blue-4: #b7d5ed;
+      --ds-global-blue-5: #9bc5e5;
+      --ds-global-blue-6: #94c1e3;
+      --ds-global-blue-7: #2f86c9;
+      --ds-global-blue-8: #075089;
+      --ds-global-blue-9: #0a71c0;
+      --ds-global-blue-10: #085ea0;
+      --ds-global-blue-11: #074b80;
+      --ds-global-blue-12: #0966ac;
+      --ds-global-blue-13: #042d4d;
+      --ds-global-blue-contrast-1: #ffffff;
+      --ds-global-blue-contrast-2: #f3f8fc;
+      --ds-global-green-1: #fcfefc;
+      --ds-global-green-2: #edf6ee;
+      --ds-global-green-3: #d1e9d4;
+      --ds-global-green-4: #b5dbba;
+      --ds-global-green-5: #96cd9e;
+      --ds-global-green-6: #8fc997;
+      --ds-global-green-7: #229532;
+      --ds-global-green-8: #045a10;
+      --ds-global-green-9: #068718;
+      --ds-global-green-10: #057114;
+      --ds-global-green-11: #045a10;
+      --ds-global-green-12: #057315;
+      --ds-global-green-13: #023409;
+      --ds-global-green-contrast-1: #ffffff;
+      --ds-global-green-contrast-2: #f9fcf9;
+      --ds-global-orange-1: #fffefe;
+      --ds-global-orange-2: #f9f2ed;
+      --ds-global-orange-3: #f1ded3;
+      --ds-global-orange-4: #e9cbb8;
+      --ds-global-orange-5: #e1b9a0;
+      --ds-global-orange-6: #deb296;
+      --ds-global-orange-7: #c06b36;
+      --ds-global-orange-8: #7c3b14;
+      --ds-global-orange-9: #b8581d;
+      --ds-global-orange-10: #9a4918;
+      --ds-global-orange-11: #7c3b14;
+      --ds-global-orange-12: #9e4b19;
+      --ds-global-orange-13: #47220b;
+      --ds-global-orange-contrast-1: #ffffff;
+      --ds-global-orange-contrast-2: #fdfbf9;
+      --ds-global-purple-1: #fefefe;
+      --ds-global-purple-2: #f5f2f9;
+      --ds-global-purple-3: #e7dfef;
+      --ds-global-purple-4: #d9cce6;
+      --ds-global-purple-5: #ccbadd;
+      --ds-global-purple-6: #c7b4da;
+      --ds-global-purple-7: #9572b9;
+      --ds-global-purple-8: #663399;
+      --ds-global-purple-9: #663299;
+      --ds-global-purple-10: #4f2777;
+      --ds-global-purple-11: #381b54;
+      --ds-global-purple-12: #7b4ea7;
+      --ds-global-purple-13: #3b1d59;
+      --ds-global-purple-contrast-1: #ffffff;
+      --ds-global-purple-contrast-2: #eee8f3;
+      --ds-global-red-1: #fffefe;
+      --ds-global-red-2: #fbf1f1;
+      --ds-global-red-3: #f5dcdc;
+      --ds-global-red-4: #f0c7c7;
+      --ds-global-red-5: #eab3b3;
+      --ds-global-red-6: #e8acac;
+      --ds-global-red-7: #d25b5b;
+      --ds-global-red-8: #9a1616;
+      --ds-global-red-9: #c01b1b;
+      --ds-global-red-10: #9a1616;
+      --ds-global-red-11: #771111;
+      --ds-global-red-12: #c22020;
+      --ds-global-red-13: #5a0d0d;
+      --ds-global-red-contrast-1: #ffffff;
+      --ds-global-red-contrast-2: #f6dfdf;
+      --ds-global-yellow-1: #fffefc;
+      --ds-global-yellow-2: #fbf2d3;
+      --ds-global-yellow-3: #f5e19b;
+      --ds-global-yellow-4: #efcf5d;
+      --ds-global-yellow-5: #e6bc27;
+      --ds-global-yellow-6: #e0b726;
+      --ds-global-yellow-7: #9a7e1a;
+      --ds-global-yellow-8: #5d4c10;
+      --ds-global-yellow-9: #eabf28;
+      --ds-global-yellow-10: #d0aa24;
+      --ds-global-yellow-11: #b7951f;
+      --ds-global-yellow-12: #776114;
+      --ds-global-yellow-13: #352b09;
+      --ds-global-yellow-contrast-1: #000000;
+      --ds-global-yellow-contrast-2: #382d0a;
+
+      color-scheme: light;
+    }
+  }
+}
+
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.typography.secondary {
+  [data-ds-typography='secondary'] {
+    --ds-font-family: Inter;
+    --ds-font-weight-medium: 500;
+    --ds-font-weight-semibold: 600;
+    --ds-font-weight-regular: 400;
+    --ds-heading-2xl-font-weight: 500;
+    --ds-heading-2xl-line-height: 1.3;
+    --ds-heading-2xl-font-size: 3.75rem;
+    --ds-heading-2xl-letter-spacing: -1%;
+    --ds-heading-xl-font-weight: 500;
+    --ds-heading-xl-line-height: 1.3;
+    --ds-heading-xl-font-size: 3rem;
+    --ds-heading-xl-letter-spacing: -1%;
+    --ds-heading-lg-font-weight: 500;
+    --ds-heading-lg-line-height: 1.3;
+    --ds-heading-lg-font-size: 2.25rem;
+    --ds-heading-lg-letter-spacing: -0.5%;
+    --ds-heading-md-font-weight: 500;
+    --ds-heading-md-line-height: 1.3;
+    --ds-heading-md-font-size: 1.875rem;
+    --ds-heading-md-letter-spacing: -0.25%;
+    --ds-heading-sm-font-weight: 500;
+    --ds-heading-sm-line-height: 1.3;
+    --ds-heading-sm-font-size: 1.5rem;
+    --ds-heading-sm-letter-spacing: 0%;
+    --ds-heading-xs-font-weight: 500;
+    --ds-heading-xs-line-height: 1.3;
+    --ds-heading-xs-font-size: 1.3125rem;
+    --ds-heading-xs-letter-spacing: 0.15%;
+    --ds-heading-2xs-font-weight: 500;
+    --ds-heading-2xs-line-height: 1.3;
+    --ds-heading-2xs-font-size: 1.125rem;
+    --ds-heading-2xs-letter-spacing: 0.15%;
+    --ds-body-xl-font-weight: 400;
+    --ds-body-xl-line-height: 1.5;
+    --ds-body-xl-font-size: 1.5rem;
+    --ds-body-xl-letter-spacing: 0.5%;
+    --ds-body-lg-font-weight: 400;
+    --ds-body-lg-line-height: 1.5;
+    --ds-body-lg-font-size: 1.3125rem;
+    --ds-body-lg-letter-spacing: 0.5%;
+    --ds-body-md-font-weight: 400;
+    --ds-body-md-line-height: 1.5;
+    --ds-body-md-font-size: 1.125rem;
+    --ds-body-md-letter-spacing: 0.5%;
+    --ds-body-sm-font-weight: 400;
+    --ds-body-sm-line-height: 1.5;
+    --ds-body-sm-font-size: 1rem;
+    --ds-body-sm-letter-spacing: 0.25%;
+    --ds-body-xs-font-weight: 400;
+    --ds-body-xs-line-height: 1.5;
+    --ds-body-xs-font-size: 0.875rem;
+    --ds-body-xs-letter-spacing: 0.15%;
+    --ds-body-short-xl-font-weight: 400;
+    --ds-body-short-xl-line-height: 1.3;
+    --ds-body-short-xl-font-size: 1.5rem;
+    --ds-body-short-xl-letter-spacing: 0.5%;
+    --ds-body-short-lg-font-weight: 400;
+    --ds-body-short-lg-line-height: 1.3;
+    --ds-body-short-lg-font-size: 1.3125rem;
+    --ds-body-short-lg-letter-spacing: 0.5%;
+    --ds-body-short-md-font-weight: 400;
+    --ds-body-short-md-line-height: 1.3;
+    --ds-body-short-md-font-size: 1.125rem;
+    --ds-body-short-md-letter-spacing: 0.5%;
+    --ds-body-short-sm-font-weight: 400;
+    --ds-body-short-sm-line-height: 1.3;
+    --ds-body-short-sm-font-size: 1rem;
+    --ds-body-short-sm-letter-spacing: 0.25%;
+    --ds-body-short-xs-font-weight: 400;
+    --ds-body-short-xs-line-height: 1.3;
+    --ds-body-short-xs-font-size: 0.875rem;
+    --ds-body-short-xs-letter-spacing: 0.15%;
+    --ds-body-long-xl-font-weight: 400;
+    --ds-body-long-xl-line-height: 1.7;
+    --ds-body-long-xl-font-size: 1.5rem;
+    --ds-body-long-xl-letter-spacing: 0.5%;
+    --ds-body-long-lg-font-weight: 400;
+    --ds-body-long-lg-line-height: 1.7;
+    --ds-body-long-lg-font-size: 1.3125rem;
+    --ds-body-long-lg-letter-spacing: 0.5%;
+    --ds-body-long-md-font-weight: 400;
+    --ds-body-long-md-line-height: 1.7;
+    --ds-body-long-md-font-size: 1.125rem;
+    --ds-body-long-md-letter-spacing: 0.5%;
+    --ds-body-long-sm-font-weight: 400;
+    --ds-body-long-sm-line-height: 1.7;
+    --ds-body-long-sm-font-size: 1rem;
+    --ds-body-long-sm-letter-spacing: 0.25%;
+    --ds-body-long-xs-font-weight: 400;
+    --ds-body-long-xs-line-height: 1.7;
+    --ds-body-long-xs-font-size: 0.875rem;
+    --ds-body-long-xs-letter-spacing: 0.15%;
+    --ds-label-lg-font-weight: 500;
+    --ds-label-lg-line-height: 1.3;
+    --ds-label-lg-font-size: 1.3125rem;
+    --ds-label-lg-letter-spacing: 0.5%;
+    --ds-label-md-font-weight: 500;
+    --ds-label-md-line-height: 1.3;
+    --ds-label-md-font-size: 1.125rem;
+    --ds-label-md-letter-spacing: 0.5%;
+    --ds-label-sm-font-weight: 500;
+    --ds-label-sm-line-height: 1.3;
+    --ds-label-sm-font-size: 1rem;
+    --ds-label-sm-letter-spacing: 0.25%;
+    --ds-label-xs-font-weight: 500;
+    --ds-label-xs-line-height: 1.3;
+    --ds-label-xs-font-size: 0.875rem;
+    --ds-label-xs-letter-spacing: 0.15%;
+    --ds-error_message-lg-font-weight: 400;
+    --ds-error_message-lg-line-height: 1.3;
+    --ds-error_message-lg-font-size: 1.3125rem;
+    --ds-error_message-lg-letter-spacing: 0.5%;
+    --ds-error_message-md-font-weight: 400;
+    --ds-error_message-md-line-height: 1.3;
+    --ds-error_message-md-font-size: 1.125rem;
+    --ds-error_message-md-letter-spacing: 0.5%;
+    --ds-error_message-sm-font-weight: 400;
+    --ds-error_message-sm-line-height: 1.3;
+    --ds-error_message-sm-font-size: 1rem;
+    --ds-error_message-sm-letter-spacing: 0.25%;
+    --ds-error_message-xs-font-weight: 400;
+    --ds-error_message-xs-line-height: 1.3;
+    --ds-error_message-xs-font-size: 0.875rem;
+    --ds-error_message-xs-letter-spacing: 0.15%;
+    --ds-line-height-sm: 1.3;
+    --ds-line-height-md: 1.5;
+    --ds-line-height-lg: 1.7;
+    --ds-font-size-1: 0.75rem;
+    --ds-font-size-2: 0.8125rem;
+    --ds-font-size-3: 0.875rem;
+    --ds-font-size-4: 1rem;
+    --ds-font-size-5: 1.125rem;
+    --ds-font-size-6: 1.3125rem;
+    --ds-font-size-7: 1.5rem;
+    --ds-font-size-8: 1.875rem;
+    --ds-font-size-9: 2.25rem;
+    --ds-font-size-10: 3rem;
+    --ds-font-size-11: 3.75rem;
+    --ds-letter-spacing-1: -1%;
+    --ds-letter-spacing-2: -0.5%;
+    --ds-letter-spacing-3: -0.25%;
+    --ds-letter-spacing-4: -0.15%;
+    --ds-letter-spacing-5: 0%;
+    --ds-letter-spacing-6: 0.15%;
+    --ds-letter-spacing-7: 0.25%;
+    --ds-letter-spacing-8: 0.5%;
+    --ds-letter-spacing-9: 1.5%;
+  }
+}
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.semantic {
+  :root {
+    --ds-disabled-opacity: 30%;
+    --ds-border-radius-sm: calc(var(--ds-border-radius-base) * 0.5);
+    --ds-border-radius-md: calc(var(--ds-border-radius-base) * 1);
+    --ds-border-radius-lg: calc(var(--ds-border-radius-base) * 2);
+    --ds-border-radius-xl: calc(var(--ds-border-radius-base) * 3);
+    --ds-border-radius-2xl: calc(var(--ds-border-radius-base) * 4);
+    --ds-border-radius-3xl: calc(var(--ds-border-radius-base) * 6);
+    --ds-border-radius-4xl: calc(var(--ds-border-radius-base) * 8);
+    --ds-border-radius-full: 624.9375rem;
+    --ds-border-radius-base: 0.25rem;
+    --ds-spacing-0: calc(var(--ds-spacing-base) * 0);
+    --ds-spacing-1: calc(var(--ds-spacing-base) * 1);
+    --ds-spacing-2: calc(var(--ds-spacing-base) * 2);
+    --ds-spacing-3: calc(var(--ds-spacing-base) * 3);
+    --ds-spacing-4: calc(var(--ds-spacing-base) * 4);
+    --ds-spacing-5: calc(var(--ds-spacing-base) * 5);
+    --ds-spacing-6: calc(var(--ds-spacing-base) * 6);
+    --ds-spacing-7: calc(var(--ds-spacing-base) * 7);
+    --ds-spacing-8: calc(var(--ds-spacing-base) * 8);
+    --ds-spacing-9: calc(var(--ds-spacing-base) * 9);
+    --ds-spacing-10: calc(var(--ds-spacing-base) * 10);
+    --ds-spacing-11: calc(var(--ds-spacing-base) * 11);
+    --ds-spacing-12: calc(var(--ds-spacing-base) * 12);
+    --ds-spacing-13: calc(var(--ds-spacing-base) * 13);
+    --ds-spacing-14: calc(var(--ds-spacing-base) * 14);
+    --ds-spacing-15: calc(var(--ds-spacing-base) * 15);
+    --ds-spacing-18: calc(var(--ds-spacing-base) * 18);
+    --ds-spacing-22: calc(var(--ds-spacing-base) * 22);
+    --ds-spacing-26: calc(var(--ds-spacing-base) * 26);
+    --ds-spacing-30: calc(var(--ds-spacing-base) * 30);
+    --ds-spacing-base: 0.25rem;
+    --ds-sizing-0: calc(var(--ds-sizing-base) * 0);
+    --ds-sizing-1: calc(var(--ds-sizing-base) * 1);
+    --ds-sizing-2: calc(var(--ds-sizing-base) * 2);
+    --ds-sizing-3: calc(var(--ds-sizing-base) * 3);
+    --ds-sizing-4: calc(var(--ds-sizing-base) * 4);
+    --ds-sizing-5: calc(var(--ds-sizing-base) * 5);
+    --ds-sizing-6: calc(var(--ds-sizing-base) * 6);
+    --ds-sizing-7: calc(var(--ds-sizing-base) * 7);
+    --ds-sizing-8: calc(var(--ds-sizing-base) * 8);
+    --ds-sizing-9: calc(var(--ds-sizing-base) * 9);
+    --ds-sizing-10: calc(var(--ds-sizing-base) * 10);
+    --ds-sizing-11: calc(var(--ds-sizing-base) * 11);
+    --ds-sizing-12: calc(var(--ds-sizing-base) * 12);
+    --ds-sizing-13: calc(var(--ds-sizing-base) * 13);
+    --ds-sizing-14: calc(var(--ds-sizing-base) * 14);
+    --ds-sizing-15: calc(var(--ds-sizing-base) * 15);
+    --ds-sizing-18: calc(var(--ds-sizing-base) * 18);
+    --ds-sizing-22: calc(var(--ds-sizing-base) * 22);
+    --ds-sizing-26: calc(var(--ds-sizing-base) * 26);
+    --ds-sizing-30: calc(var(--ds-sizing-base) * 30);
+    --ds-sizing-base: 0.25rem;
+    --ds-border-width-default: 1px;
+    --ds-border-width-highlight: 2px;
+    --ds-shadow-xs: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
+    --ds-shadow-sm: 0 0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+    --ds-shadow-md: 0 0 1px 0 rgba(0, 0, 0, 0.14), 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12);
+    --ds-shadow-lg: 0 0 1px 0 rgba(0, 0, 0, 0.13), 0 3px 5px 0 rgba(0, 0, 0, 0.13), 0 6px 12px 0 rgba(0, 0, 0, 0.14);
+    --ds-shadow-xl: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.16), 0 12px 24px 0 rgba(0, 0, 0, 0.16);
+  }
+}
+
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.color-mode.dark {
+  [data-ds-color-mode='dark'] {
+    --ds-color-accent-1: #001c36;
+    --ds-color-accent-2: #002445;
+    --ds-color-accent-3: #00315c;
+    --ds-color-accent-4: #003d75;
+    --ds-color-accent-5: #004b8f;
+    --ds-color-accent-6: #00529d;
+    --ds-color-accent-7: #1972c1;
+    --ds-color-accent-8: #9cc2e4;
+    --ds-color-accent-9: #4b90ce;
+    --ds-color-accent-10: #287ac5;
+    --ds-color-accent-11: #0163ba;
+    --ds-color-accent-12: #72a8d9;
+    --ds-color-accent-13: #d4e5f3;
+    --ds-color-accent-contrast-1: #000000;
+    --ds-color-accent-contrast-2: #0d1823;
+    --ds-color-accent-background-default: var(--ds-color-accent-1);
+    --ds-color-accent-background-subtle: var(--ds-color-accent-2);
+    --ds-color-accent-surface-default: var(--ds-color-accent-3);
+    --ds-color-accent-surface-hover: var(--ds-color-accent-4);
+    --ds-color-accent-surface-active: var(--ds-color-accent-5);
+    --ds-color-accent-border-subtle: var(--ds-color-accent-6);
+    --ds-color-accent-border-default: var(--ds-color-accent-7);
+    --ds-color-accent-border-strong: var(--ds-color-accent-8);
+    --ds-color-accent-base-default: var(--ds-color-accent-9);
+    --ds-color-accent-base-hover: var(--ds-color-accent-10);
+    --ds-color-accent-base-active: var(--ds-color-accent-11);
+    --ds-color-accent-text-subtle: var(--ds-color-accent-12);
+    --ds-color-accent-text-default: var(--ds-color-accent-13);
+    --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
+    --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
+    --ds-color-neutral-1: #1b1b1b;
+    --ds-color-neutral-2: #242424;
+    --ds-color-neutral-3: #303030;
+    --ds-color-neutral-4: #3e3e3e;
+    --ds-color-neutral-5: #4b4b4b;
+    --ds-color-neutral-6: #525252;
+    --ds-color-neutral-7: #6f6f6f;
+    --ds-color-neutral-8: #bebebe;
+    --ds-color-neutral-9: #ababab;
+    --ds-color-neutral-10: #969696;
+    --ds-color-neutral-11: #818181;
+    --ds-color-neutral-12: #a3a3a3;
+    --ds-color-neutral-13: #e1e1e1;
+    --ds-color-neutral-contrast-1: #000000;
+    --ds-color-neutral-contrast-2: #1b1b1b;
+    --ds-color-neutral-background-default: var(--ds-color-neutral-1);
+    --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
+    --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
+    --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
+    --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
+    --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
+    --ds-color-neutral-border-default: var(--ds-color-neutral-7);
+    --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
+    --ds-color-neutral-base-default: var(--ds-color-neutral-9);
+    --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
+    --ds-color-neutral-base-active: var(--ds-color-neutral-11);
+    --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
+    --ds-color-neutral-text-default: var(--ds-color-neutral-13);
+    --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
+    --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
+    --ds-color-brand1-1: #2f1213;
+    --ds-color-brand1-2: #3c1819;
+    --ds-color-brand1-3: #522021;
+    --ds-color-brand1-4: #68292a;
+    --ds-color-brand1-5: #7f3234;
+    --ds-color-brand1-6: #8b3639;
+    --ds-color-brand1-7: #bc494c;
+    --ds-color-brand1-8: #f9a9ab;
+    --ds-color-brand1-9: #9f3e41;
+    --ds-color-brand1-10: #7f3234;
+    --ds-color-brand1-11: #602627;
+    --ds-color-brand1-12: #f67f82;
+    --ds-color-brand1-13: #fcdadb;
+    --ds-color-brand1-contrast-1: #ffffff;
+    --ds-color-brand1-contrast-2: #fefefe;
+    --ds-color-brand1-background-default: var(--ds-color-brand1-1);
+    --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
+    --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
+    --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
+    --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
+    --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
+    --ds-color-brand1-border-default: var(--ds-color-brand1-7);
+    --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
+    --ds-color-brand1-base-default: var(--ds-color-brand1-9);
+    --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
+    --ds-color-brand1-base-active: var(--ds-color-brand1-11);
+    --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
+    --ds-color-brand1-text-default: var(--ds-color-brand1-13);
+    --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
+    --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
+    --ds-color-brand2-1: #231a05;
+    --ds-color-brand2-2: #2d2206;
+    --ds-color-brand2-3: #3d2e09;
+    --ds-color-brand2-4: #4f3b0b;
+    --ds-color-brand2-5: #60470d;
+    --ds-color-brand2-6: #684e0f;
+    --ds-color-brand2-7: #8e6914;
+    --ds-color-brand2-8: #e9b742;
+    --ds-color-brand2-9: #513d0b;
+    --ds-color-brand2-10: #684e0f;
+    --ds-color-brand2-11: #826012;
+    --ds-color-brand2-12: #d09a1d;
+    --ds-color-brand2-13: #f5dfac;
+    --ds-color-brand2-contrast-1: #ffffff;
+    --ds-color-brand2-contrast-2: #ddd9cf;
+    --ds-color-brand2-background-default: var(--ds-color-brand2-1);
+    --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
+    --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
+    --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
+    --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
+    --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
+    --ds-color-brand2-border-default: var(--ds-color-brand2-7);
+    --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
+    --ds-color-brand2-base-default: var(--ds-color-brand2-9);
+    --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
+    --ds-color-brand2-base-active: var(--ds-color-brand2-11);
+    --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
+    --ds-color-brand2-text-default: var(--ds-color-brand2-13);
+    --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
+    --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
+    --ds-color-brand3-1: #061d30;
+    --ds-color-brand3-2: #07253c;
+    --ds-color-brand3-3: #0a3251;
+    --ds-color-brand3-4: #0d4068;
+    --ds-color-brand3-5: #0f4e7f;
+    --ds-color-brand3-6: #11558a;
+    --ds-color-brand3-7: #1773b9;
+    --ds-color-brand3-8: #81c5f9;
+    --ds-color-brand3-9: #13609a;
+    --ds-color-brand3-10: #0f4c7a;
+    --ds-color-brand3-11: #0b3a5d;
+    --ds-color-brand3-12: #44aaf7;
+    --ds-color-brand3-13: #c8e6fd;
+    --ds-color-brand3-contrast-1: #ffffff;
+    --ds-color-brand3-contrast-2: #fafcfd;
+    --ds-color-brand3-background-default: var(--ds-color-brand3-1);
+    --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
+    --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
+    --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
+    --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
+    --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
+    --ds-color-brand3-border-default: var(--ds-color-brand3-7);
+    --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
+    --ds-color-brand3-base-default: var(--ds-color-brand3-9);
+    --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
+    --ds-color-brand3-base-active: var(--ds-color-brand3-11);
+    --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
+    --ds-color-brand3-text-default: var(--ds-color-brand3-13);
+    --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
+    --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
+    --ds-color-success-background-default: var(--ds-global-green-1);
+    --ds-color-success-background-subtle: var(--ds-global-green-2);
+    --ds-color-success-surface-default: var(--ds-global-green-3);
+    --ds-color-success-surface-hover: var(--ds-global-green-4);
+    --ds-color-success-surface-active: var(--ds-global-green-5);
+    --ds-color-success-border-subtle: var(--ds-global-green-6);
+    --ds-color-success-border-default: var(--ds-global-green-7);
+    --ds-color-success-border-strong: var(--ds-global-green-8);
+    --ds-color-success-base-default: var(--ds-global-green-9);
+    --ds-color-success-base-hover: var(--ds-global-green-10);
+    --ds-color-success-base-active: var(--ds-global-green-11);
+    --ds-color-success-text-subtle: var(--ds-global-green-12);
+    --ds-color-success-text-default: var(--ds-global-green-13);
+    --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
+    --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
+    --ds-color-danger-background-default: var(--ds-global-red-1);
+    --ds-color-danger-background-subtle: var(--ds-global-red-2);
+    --ds-color-danger-surface-default: var(--ds-global-red-3);
+    --ds-color-danger-surface-hover: var(--ds-global-red-4);
+    --ds-color-danger-surface-active: var(--ds-global-red-5);
+    --ds-color-danger-border-subtle: var(--ds-global-red-6);
+    --ds-color-danger-border-default: var(--ds-global-red-7);
+    --ds-color-danger-border-strong: var(--ds-global-red-8);
+    --ds-color-danger-base-default: var(--ds-global-red-9);
+    --ds-color-danger-base-hover: var(--ds-global-red-10);
+    --ds-color-danger-base-active: var(--ds-global-red-11);
+    --ds-color-danger-text-subtle: var(--ds-global-red-12);
+    --ds-color-danger-text-default: var(--ds-global-red-13);
+    --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
+    --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
+    --ds-color-info-background-default: #031d30;
+    --ds-color-info-background-subtle: #032540;
+    --ds-color-info-surface-default: #043256;
+    --ds-color-info-surface-hover: #063f6c;
+    --ds-color-info-surface-active: #074d84;
+    --ds-color-info-border-subtle: #075490;
+    --ds-color-info-border-default: #0c72c1;
+    --ds-color-info-border-strong: #98c3e5;
+    --ds-color-info-base-default: #2a84c8;
+    --ds-color-info-base-hover: #0a6dba;
+    --ds-color-info-base-active: #085998;
+    --ds-color-info-text-subtle: #6ba9d9;
+    --ds-color-info-text-default: #d3e5f4;
+    --ds-color-info-contrast-default: #000000;
+    --ds-color-info-contrast-subtle: #040c13;
+    --ds-color-warning-background-default: var(--ds-global-yellow-1);
+    --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
+    --ds-color-warning-surface-default: var(--ds-global-yellow-3);
+    --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
+    --ds-color-warning-surface-active: var(--ds-global-yellow-5);
+    --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
+    --ds-color-warning-border-default: var(--ds-global-yellow-7);
+    --ds-color-warning-border-strong: var(--ds-global-yellow-8);
+    --ds-color-warning-base-default: var(--ds-global-orange-9);
+    --ds-color-warning-base-hover: var(--ds-global-orange-10);
+    --ds-color-warning-base-active: var(--ds-global-orange-11);
+    --ds-color-warning-text-subtle: var(--ds-global-orange-12);
+    --ds-color-warning-text-default: var(--ds-global-orange-13);
+    --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
+    --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
+    --ds-color-focus-inner: #1b1b1b;
+    --ds-color-focus-outer: #d4e5f3;
+    --ds-global-blue-1: #031d30;
+    --ds-global-blue-2: #032540;
+    --ds-global-blue-3: #043256;
+    --ds-global-blue-4: #063f6c;
+    --ds-global-blue-5: #074d84;
+    --ds-global-blue-6: #075490;
+    --ds-global-blue-7: #0c72c1;
+    --ds-global-blue-8: #98c3e5;
+    --ds-global-blue-9: #2a84c8;
+    --ds-global-blue-10: #0a6dba;
+    --ds-global-blue-11: #085998;
+    --ds-global-blue-12: #6ba9d9;
+    --ds-global-blue-13: #d3e5f4;
+    --ds-global-blue-contrast-1: #000000;
+    --ds-global-blue-contrast-2: #040c13;
+    --ds-global-green-1: #012106;
+    --ds-global-green-2: #022b08;
+    --ds-global-green-3: #03380a;
+    --ds-global-green-4: #03490d;
+    --ds-global-green-5: #045810;
+    --ds-global-green-6: #045f11;
+    --ds-global-green-7: #068217;
+    --ds-global-green-8: #93cb9b;
+    --ds-global-green-9: #118c23;
+    --ds-global-green-10: #057615;
+    --ds-global-green-11: #045f11;
+    --ds-global-green-12: #63b46f;
+    --ds-global-green-13: #d1e9d4;
+    --ds-global-green-contrast-1: #000000;
+    --ds-global-green-contrast-2: #010401;
+    --ds-global-orange-1: #2d1507;
+    --ds-global-orange-2: #391b09;
+    --ds-global-orange-3: #4e250c;
+    --ds-global-orange-4: #633010;
+    --ds-global-orange-5: #783a13;
+    --ds-global-orange-6: #833f15;
+    --ds-global-orange-7: #b2551c;
+    --ds-global-orange-8: #e0b69c;
+    --ds-global-orange-9: #bc6028;
+    --ds-global-orange-10: #a24d1a;
+    --ds-global-orange-11: #833f15;
+    --ds-global-orange-12: #d29671;
+    --ds-global-orange-13: #f1ded3;
+    --ds-global-orange-contrast-1: #000000;
+    --ds-global-orange-contrast-2: #060301;
+    --ds-global-purple-1: #251238;
+    --ds-global-purple-2: #301748;
+    --ds-global-purple-3: #402060;
+    --ds-global-purple-4: #52287a;
+    --ds-global-purple-5: #643196;
+    --ds-global-purple-6: #6b399d;
+    --ds-global-purple-7: #865daf;
+    --ds-global-purple-8: #c9b7db;
+    --ds-global-purple-9: #b298cc;
+    --ds-global-purple-10: #a181c0;
+    --ds-global-purple-11: #8f69b5;
+    --ds-global-purple-12: #b298cc;
+    --ds-global-purple-13: #e7dfef;
+    --ds-global-purple-contrast-1: #000000;
+    --ds-global-purple-contrast-2: #18141b;
+    --ds-global-red-1: #3b0808;
+    --ds-global-red-2: #4b0a0a;
+    --ds-global-red-3: #620e0e;
+    --ds-global-red-4: #7c1212;
+    --ds-global-red-5: #961515;
+    --ds-global-red-6: #a31717;
+    --ds-global-red-7: #c93c3c;
+    --ds-global-red-8: #e9b0b0;
+    --ds-global-red-9: #d76e6e;
+    --ds-global-red-10: #ce4e4e;
+    --ds-global-red-11: #c32727;
+    --ds-global-red-12: #df8d8d;
+    --ds-global-red-13: #f5dcdc;
+    --ds-global-red-contrast-1: #000000;
+    --ds-global-red-contrast-2: #271414;
+    --ds-global-yellow-1: #221b06;
+    --ds-global-yellow-2: #2b2307;
+    --ds-global-yellow-3: #3a300a;
+    --ds-global-yellow-4: #4a3d0d;
+    --ds-global-yellow-5: #5a4a0f;
+    --ds-global-yellow-6: #635011;
+    --ds-global-yellow-7: #856d17;
+    --ds-global-yellow-8: #e4ba27;
+    --ds-global-yellow-9: #3d310a;
+    --ds-global-yellow-10: #52430e;
+    --ds-global-yellow-11: #695512;
+    --ds-global-yellow-12: #c39f21;
+    --ds-global-yellow-13: #f5e19b;
+    --ds-global-yellow-contrast-1: #ffffff;
+    --ds-global-yellow-contrast-2: #ccc9bf;
+
+    color-scheme: dark;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [data-ds-color-mode='auto'] {
+      --ds-color-accent-1: #001c36;
+      --ds-color-accent-2: #002445;
+      --ds-color-accent-3: #00315c;
+      --ds-color-accent-4: #003d75;
+      --ds-color-accent-5: #004b8f;
+      --ds-color-accent-6: #00529d;
+      --ds-color-accent-7: #1972c1;
+      --ds-color-accent-8: #9cc2e4;
+      --ds-color-accent-9: #4b90ce;
+      --ds-color-accent-10: #287ac5;
+      --ds-color-accent-11: #0163ba;
+      --ds-color-accent-12: #72a8d9;
+      --ds-color-accent-13: #d4e5f3;
+      --ds-color-accent-contrast-1: #000000;
+      --ds-color-accent-contrast-2: #0d1823;
+      --ds-color-accent-background-default: var(--ds-color-accent-1);
+      --ds-color-accent-background-subtle: var(--ds-color-accent-2);
+      --ds-color-accent-surface-default: var(--ds-color-accent-3);
+      --ds-color-accent-surface-hover: var(--ds-color-accent-4);
+      --ds-color-accent-surface-active: var(--ds-color-accent-5);
+      --ds-color-accent-border-subtle: var(--ds-color-accent-6);
+      --ds-color-accent-border-default: var(--ds-color-accent-7);
+      --ds-color-accent-border-strong: var(--ds-color-accent-8);
+      --ds-color-accent-base-default: var(--ds-color-accent-9);
+      --ds-color-accent-base-hover: var(--ds-color-accent-10);
+      --ds-color-accent-base-active: var(--ds-color-accent-11);
+      --ds-color-accent-text-subtle: var(--ds-color-accent-12);
+      --ds-color-accent-text-default: var(--ds-color-accent-13);
+      --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
+      --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
+      --ds-color-neutral-1: #1b1b1b;
+      --ds-color-neutral-2: #242424;
+      --ds-color-neutral-3: #303030;
+      --ds-color-neutral-4: #3e3e3e;
+      --ds-color-neutral-5: #4b4b4b;
+      --ds-color-neutral-6: #525252;
+      --ds-color-neutral-7: #6f6f6f;
+      --ds-color-neutral-8: #bebebe;
+      --ds-color-neutral-9: #ababab;
+      --ds-color-neutral-10: #969696;
+      --ds-color-neutral-11: #818181;
+      --ds-color-neutral-12: #a3a3a3;
+      --ds-color-neutral-13: #e1e1e1;
+      --ds-color-neutral-contrast-1: #000000;
+      --ds-color-neutral-contrast-2: #1b1b1b;
+      --ds-color-neutral-background-default: var(--ds-color-neutral-1);
+      --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
+      --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
+      --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
+      --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
+      --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
+      --ds-color-neutral-border-default: var(--ds-color-neutral-7);
+      --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
+      --ds-color-neutral-base-default: var(--ds-color-neutral-9);
+      --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
+      --ds-color-neutral-base-active: var(--ds-color-neutral-11);
+      --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
+      --ds-color-neutral-text-default: var(--ds-color-neutral-13);
+      --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
+      --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
+      --ds-color-brand1-1: #2f1213;
+      --ds-color-brand1-2: #3c1819;
+      --ds-color-brand1-3: #522021;
+      --ds-color-brand1-4: #68292a;
+      --ds-color-brand1-5: #7f3234;
+      --ds-color-brand1-6: #8b3639;
+      --ds-color-brand1-7: #bc494c;
+      --ds-color-brand1-8: #f9a9ab;
+      --ds-color-brand1-9: #9f3e41;
+      --ds-color-brand1-10: #7f3234;
+      --ds-color-brand1-11: #602627;
+      --ds-color-brand1-12: #f67f82;
+      --ds-color-brand1-13: #fcdadb;
+      --ds-color-brand1-contrast-1: #ffffff;
+      --ds-color-brand1-contrast-2: #fefefe;
+      --ds-color-brand1-background-default: var(--ds-color-brand1-1);
+      --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
+      --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
+      --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
+      --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
+      --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
+      --ds-color-brand1-border-default: var(--ds-color-brand1-7);
+      --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
+      --ds-color-brand1-base-default: var(--ds-color-brand1-9);
+      --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
+      --ds-color-brand1-base-active: var(--ds-color-brand1-11);
+      --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
+      --ds-color-brand1-text-default: var(--ds-color-brand1-13);
+      --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
+      --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
+      --ds-color-brand2-1: #231a05;
+      --ds-color-brand2-2: #2d2206;
+      --ds-color-brand2-3: #3d2e09;
+      --ds-color-brand2-4: #4f3b0b;
+      --ds-color-brand2-5: #60470d;
+      --ds-color-brand2-6: #684e0f;
+      --ds-color-brand2-7: #8e6914;
+      --ds-color-brand2-8: #e9b742;
+      --ds-color-brand2-9: #513d0b;
+      --ds-color-brand2-10: #684e0f;
+      --ds-color-brand2-11: #826012;
+      --ds-color-brand2-12: #d09a1d;
+      --ds-color-brand2-13: #f5dfac;
+      --ds-color-brand2-contrast-1: #ffffff;
+      --ds-color-brand2-contrast-2: #ddd9cf;
+      --ds-color-brand2-background-default: var(--ds-color-brand2-1);
+      --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
+      --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
+      --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
+      --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
+      --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
+      --ds-color-brand2-border-default: var(--ds-color-brand2-7);
+      --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
+      --ds-color-brand2-base-default: var(--ds-color-brand2-9);
+      --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
+      --ds-color-brand2-base-active: var(--ds-color-brand2-11);
+      --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
+      --ds-color-brand2-text-default: var(--ds-color-brand2-13);
+      --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
+      --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
+      --ds-color-brand3-1: #061d30;
+      --ds-color-brand3-2: #07253c;
+      --ds-color-brand3-3: #0a3251;
+      --ds-color-brand3-4: #0d4068;
+      --ds-color-brand3-5: #0f4e7f;
+      --ds-color-brand3-6: #11558a;
+      --ds-color-brand3-7: #1773b9;
+      --ds-color-brand3-8: #81c5f9;
+      --ds-color-brand3-9: #13609a;
+      --ds-color-brand3-10: #0f4c7a;
+      --ds-color-brand3-11: #0b3a5d;
+      --ds-color-brand3-12: #44aaf7;
+      --ds-color-brand3-13: #c8e6fd;
+      --ds-color-brand3-contrast-1: #ffffff;
+      --ds-color-brand3-contrast-2: #fafcfd;
+      --ds-color-brand3-background-default: var(--ds-color-brand3-1);
+      --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
+      --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
+      --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
+      --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
+      --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
+      --ds-color-brand3-border-default: var(--ds-color-brand3-7);
+      --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
+      --ds-color-brand3-base-default: var(--ds-color-brand3-9);
+      --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
+      --ds-color-brand3-base-active: var(--ds-color-brand3-11);
+      --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
+      --ds-color-brand3-text-default: var(--ds-color-brand3-13);
+      --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
+      --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
+      --ds-color-success-background-default: var(--ds-global-green-1);
+      --ds-color-success-background-subtle: var(--ds-global-green-2);
+      --ds-color-success-surface-default: var(--ds-global-green-3);
+      --ds-color-success-surface-hover: var(--ds-global-green-4);
+      --ds-color-success-surface-active: var(--ds-global-green-5);
+      --ds-color-success-border-subtle: var(--ds-global-green-6);
+      --ds-color-success-border-default: var(--ds-global-green-7);
+      --ds-color-success-border-strong: var(--ds-global-green-8);
+      --ds-color-success-base-default: var(--ds-global-green-9);
+      --ds-color-success-base-hover: var(--ds-global-green-10);
+      --ds-color-success-base-active: var(--ds-global-green-11);
+      --ds-color-success-text-subtle: var(--ds-global-green-12);
+      --ds-color-success-text-default: var(--ds-global-green-13);
+      --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
+      --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
+      --ds-color-danger-background-default: var(--ds-global-red-1);
+      --ds-color-danger-background-subtle: var(--ds-global-red-2);
+      --ds-color-danger-surface-default: var(--ds-global-red-3);
+      --ds-color-danger-surface-hover: var(--ds-global-red-4);
+      --ds-color-danger-surface-active: var(--ds-global-red-5);
+      --ds-color-danger-border-subtle: var(--ds-global-red-6);
+      --ds-color-danger-border-default: var(--ds-global-red-7);
+      --ds-color-danger-border-strong: var(--ds-global-red-8);
+      --ds-color-danger-base-default: var(--ds-global-red-9);
+      --ds-color-danger-base-hover: var(--ds-global-red-10);
+      --ds-color-danger-base-active: var(--ds-global-red-11);
+      --ds-color-danger-text-subtle: var(--ds-global-red-12);
+      --ds-color-danger-text-default: var(--ds-global-red-13);
+      --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
+      --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
+      --ds-color-info-background-default: #031d30;
+      --ds-color-info-background-subtle: #032540;
+      --ds-color-info-surface-default: #043256;
+      --ds-color-info-surface-hover: #063f6c;
+      --ds-color-info-surface-active: #074d84;
+      --ds-color-info-border-subtle: #075490;
+      --ds-color-info-border-default: #0c72c1;
+      --ds-color-info-border-strong: #98c3e5;
+      --ds-color-info-base-default: #2a84c8;
+      --ds-color-info-base-hover: #0a6dba;
+      --ds-color-info-base-active: #085998;
+      --ds-color-info-text-subtle: #6ba9d9;
+      --ds-color-info-text-default: #d3e5f4;
+      --ds-color-info-contrast-default: #000000;
+      --ds-color-info-contrast-subtle: #040c13;
+      --ds-color-warning-background-default: var(--ds-global-yellow-1);
+      --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
+      --ds-color-warning-surface-default: var(--ds-global-yellow-3);
+      --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
+      --ds-color-warning-surface-active: var(--ds-global-yellow-5);
+      --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
+      --ds-color-warning-border-default: var(--ds-global-yellow-7);
+      --ds-color-warning-border-strong: var(--ds-global-yellow-8);
+      --ds-color-warning-base-default: var(--ds-global-orange-9);
+      --ds-color-warning-base-hover: var(--ds-global-orange-10);
+      --ds-color-warning-base-active: var(--ds-global-orange-11);
+      --ds-color-warning-text-subtle: var(--ds-global-orange-12);
+      --ds-color-warning-text-default: var(--ds-global-orange-13);
+      --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
+      --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
+      --ds-color-focus-inner: #1b1b1b;
+      --ds-color-focus-outer: #d4e5f3;
+      --ds-global-blue-1: #031d30;
+      --ds-global-blue-2: #032540;
+      --ds-global-blue-3: #043256;
+      --ds-global-blue-4: #063f6c;
+      --ds-global-blue-5: #074d84;
+      --ds-global-blue-6: #075490;
+      --ds-global-blue-7: #0c72c1;
+      --ds-global-blue-8: #98c3e5;
+      --ds-global-blue-9: #2a84c8;
+      --ds-global-blue-10: #0a6dba;
+      --ds-global-blue-11: #085998;
+      --ds-global-blue-12: #6ba9d9;
+      --ds-global-blue-13: #d3e5f4;
+      --ds-global-blue-contrast-1: #000000;
+      --ds-global-blue-contrast-2: #040c13;
+      --ds-global-green-1: #012106;
+      --ds-global-green-2: #022b08;
+      --ds-global-green-3: #03380a;
+      --ds-global-green-4: #03490d;
+      --ds-global-green-5: #045810;
+      --ds-global-green-6: #045f11;
+      --ds-global-green-7: #068217;
+      --ds-global-green-8: #93cb9b;
+      --ds-global-green-9: #118c23;
+      --ds-global-green-10: #057615;
+      --ds-global-green-11: #045f11;
+      --ds-global-green-12: #63b46f;
+      --ds-global-green-13: #d1e9d4;
+      --ds-global-green-contrast-1: #000000;
+      --ds-global-green-contrast-2: #010401;
+      --ds-global-orange-1: #2d1507;
+      --ds-global-orange-2: #391b09;
+      --ds-global-orange-3: #4e250c;
+      --ds-global-orange-4: #633010;
+      --ds-global-orange-5: #783a13;
+      --ds-global-orange-6: #833f15;
+      --ds-global-orange-7: #b2551c;
+      --ds-global-orange-8: #e0b69c;
+      --ds-global-orange-9: #bc6028;
+      --ds-global-orange-10: #a24d1a;
+      --ds-global-orange-11: #833f15;
+      --ds-global-orange-12: #d29671;
+      --ds-global-orange-13: #f1ded3;
+      --ds-global-orange-contrast-1: #000000;
+      --ds-global-orange-contrast-2: #060301;
+      --ds-global-purple-1: #251238;
+      --ds-global-purple-2: #301748;
+      --ds-global-purple-3: #402060;
+      --ds-global-purple-4: #52287a;
+      --ds-global-purple-5: #643196;
+      --ds-global-purple-6: #6b399d;
+      --ds-global-purple-7: #865daf;
+      --ds-global-purple-8: #c9b7db;
+      --ds-global-purple-9: #b298cc;
+      --ds-global-purple-10: #a181c0;
+      --ds-global-purple-11: #8f69b5;
+      --ds-global-purple-12: #b298cc;
+      --ds-global-purple-13: #e7dfef;
+      --ds-global-purple-contrast-1: #000000;
+      --ds-global-purple-contrast-2: #18141b;
+      --ds-global-red-1: #3b0808;
+      --ds-global-red-2: #4b0a0a;
+      --ds-global-red-3: #620e0e;
+      --ds-global-red-4: #7c1212;
+      --ds-global-red-5: #961515;
+      --ds-global-red-6: #a31717;
+      --ds-global-red-7: #c93c3c;
+      --ds-global-red-8: #e9b0b0;
+      --ds-global-red-9: #d76e6e;
+      --ds-global-red-10: #ce4e4e;
+      --ds-global-red-11: #c32727;
+      --ds-global-red-12: #df8d8d;
+      --ds-global-red-13: #f5dcdc;
+      --ds-global-red-contrast-1: #000000;
+      --ds-global-red-contrast-2: #271414;
+      --ds-global-yellow-1: #221b06;
+      --ds-global-yellow-2: #2b2307;
+      --ds-global-yellow-3: #3a300a;
+      --ds-global-yellow-4: #4a3d0d;
+      --ds-global-yellow-5: #5a4a0f;
+      --ds-global-yellow-6: #635011;
+      --ds-global-yellow-7: #856d17;
+      --ds-global-yellow-8: #e4ba27;
+      --ds-global-yellow-9: #3d310a;
+      --ds-global-yellow-10: #52430e;
+      --ds-global-yellow-11: #695512;
+      --ds-global-yellow-12: #c39f21;
+      --ds-global-yellow-13: #f5e19b;
+      --ds-global-yellow-contrast-1: #ffffff;
+      --ds-global-yellow-contrast-2: #ccc9bf;
+
+      color-scheme: dark;
+    }
+  }
+}
+
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.color-mode.contrast {
+  [data-ds-color-mode='contrast'] {
+    --ds-color-accent-1: #000409;
+    --ds-color-accent-2: #001427;
+    --ds-color-accent-3: #002445;
+    --ds-color-accent-4: #00315c;
+    --ds-color-accent-5: #003d75;
+    --ds-color-accent-6: #4b90ce;
+    --ds-color-accent-7: #7eb0dc;
+    --ds-color-accent-8: #b0cfea;
+    --ds-color-accent-9: #4b90ce;
+    --ds-color-accent-10: #287ac5;
+    --ds-color-accent-11: #0163ba;
+    --ds-color-accent-12: #a9cae8;
+    --ds-color-accent-13: #e8f1f9;
+    --ds-color-accent-contrast-1: #000000;
+    --ds-color-accent-contrast-2: #0d1823;
+    --ds-color-accent-background-default: var(--ds-color-accent-1);
+    --ds-color-accent-background-subtle: var(--ds-color-accent-2);
+    --ds-color-accent-surface-default: var(--ds-color-accent-3);
+    --ds-color-accent-surface-hover: var(--ds-color-accent-4);
+    --ds-color-accent-surface-active: var(--ds-color-accent-5);
+    --ds-color-accent-border-subtle: var(--ds-color-accent-6);
+    --ds-color-accent-border-default: var(--ds-color-accent-7);
+    --ds-color-accent-border-strong: var(--ds-color-accent-8);
+    --ds-color-accent-base-default: var(--ds-color-accent-9);
+    --ds-color-accent-base-hover: var(--ds-color-accent-10);
+    --ds-color-accent-base-active: var(--ds-color-accent-11);
+    --ds-color-accent-text-subtle: var(--ds-color-accent-12);
+    --ds-color-accent-text-default: var(--ds-color-accent-13);
+    --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
+    --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
+    --ds-color-neutral-1: #040404;
+    --ds-color-neutral-2: #131313;
+    --ds-color-neutral-3: #242424;
+    --ds-color-neutral-4: #303030;
+    --ds-color-neutral-5: #3e3e3e;
+    --ds-color-neutral-6: #8b8b8b;
+    --ds-color-neutral-7: #ababab;
+    --ds-color-neutral-8: #cbcbcb;
+    --ds-color-neutral-9: #ababab;
+    --ds-color-neutral-10: #969696;
+    --ds-color-neutral-11: #818181;
+    --ds-color-neutral-12: #c6c6c6;
+    --ds-color-neutral-13: #f0f0f0;
+    --ds-color-neutral-contrast-1: #000000;
+    --ds-color-neutral-contrast-2: #1b1b1b;
+    --ds-color-neutral-background-default: var(--ds-color-neutral-1);
+    --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
+    --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
+    --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
+    --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
+    --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
+    --ds-color-neutral-border-default: var(--ds-color-neutral-7);
+    --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
+    --ds-color-neutral-base-default: var(--ds-color-neutral-9);
+    --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
+    --ds-color-neutral-base-active: var(--ds-color-neutral-11);
+    --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
+    --ds-color-neutral-text-default: var(--ds-color-neutral-13);
+    --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
+    --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
+    --ds-color-brand1-1: #060303;
+    --ds-color-brand1-2: #230d0e;
+    --ds-color-brand1-3: #3c1819;
+    --ds-color-brand1-4: #522021;
+    --ds-color-brand1-5: #68292a;
+    --ds-color-brand1-6: #eb5b5f;
+    --ds-color-brand1-7: #f78d8f;
+    --ds-color-brand1-8: #fabcbd;
+    --ds-color-brand1-9: #9f3e41;
+    --ds-color-brand1-10: #7f3234;
+    --ds-color-brand1-11: #602627;
+    --ds-color-brand1-12: #fab4b5;
+    --ds-color-brand1-13: #feeced;
+    --ds-color-brand1-contrast-1: #ffffff;
+    --ds-color-brand1-contrast-2: #fefefe;
+    --ds-color-brand1-background-default: var(--ds-color-brand1-1);
+    --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
+    --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
+    --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
+    --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
+    --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
+    --ds-color-brand1-border-default: var(--ds-color-brand1-7);
+    --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
+    --ds-color-brand1-base-default: var(--ds-color-brand1-9);
+    --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
+    --ds-color-brand1-base-active: var(--ds-color-brand1-11);
+    --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
+    --ds-color-brand1-text-default: var(--ds-color-brand1-13);
+    --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
+    --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
+    --ds-color-brand2-1: #050301;
+    --ds-color-brand2-2: #191303;
+    --ds-color-brand2-3: #2d2206;
+    --ds-color-brand2-4: #3d2e09;
+    --ds-color-brand2-5: #4f3b0b;
+    --ds-color-brand2-6: #b28419;
+    --ds-color-brand2-7: #daa21f;
+    --ds-color-brand2-8: #eec76c;
+    --ds-color-brand2-9: #513d0b;
+    --ds-color-brand2-10: #684e0f;
+    --ds-color-brand2-11: #826012;
+    --ds-color-brand2-12: #ecc059;
+    --ds-color-brand2-13: #faefd6;
+    --ds-color-brand2-contrast-1: #ffffff;
+    --ds-color-brand2-contrast-2: #ddd9cf;
+    --ds-color-brand2-background-default: var(--ds-color-brand2-1);
+    --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
+    --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
+    --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
+    --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
+    --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
+    --ds-color-brand2-border-default: var(--ds-color-brand2-7);
+    --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
+    --ds-color-brand2-base-default: var(--ds-color-brand2-9);
+    --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
+    --ds-color-brand2-base-active: var(--ds-color-brand2-11);
+    --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
+    --ds-color-brand2-text-default: var(--ds-color-brand2-13);
+    --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
+    --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
+    --ds-color-brand3-1: #010407;
+    --ds-color-brand3-2: #041421;
+    --ds-color-brand3-3: #07253c;
+    --ds-color-brand3-4: #0a3251;
+    --ds-color-brand3-5: #0d4068;
+    --ds-color-brand3-6: #1c90e8;
+    --ds-color-brand3-7: #57b2f8;
+    --ds-color-brand3-8: #9cd2fb;
+    --ds-color-brand3-9: #13609a;
+    --ds-color-brand3-10: #0f4c7a;
+    --ds-color-brand3-11: #0b3a5d;
+    --ds-color-brand3-12: #90ccfa;
+    --ds-color-brand3-13: #e3f2fe;
+    --ds-color-brand3-contrast-1: #ffffff;
+    --ds-color-brand3-contrast-2: #fafcfd;
+    --ds-color-brand3-background-default: var(--ds-color-brand3-1);
+    --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
+    --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
+    --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
+    --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
+    --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
+    --ds-color-brand3-border-default: var(--ds-color-brand3-7);
+    --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
+    --ds-color-brand3-base-default: var(--ds-color-brand3-9);
+    --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
+    --ds-color-brand3-base-active: var(--ds-color-brand3-11);
+    --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
+    --ds-color-brand3-text-default: var(--ds-color-brand3-13);
+    --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
+    --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
+    --ds-color-success-background-default: var(--ds-global-green-1);
+    --ds-color-success-background-subtle: var(--ds-global-green-2);
+    --ds-color-success-surface-default: var(--ds-global-green-3);
+    --ds-color-success-surface-hover: var(--ds-global-green-4);
+    --ds-color-success-surface-active: var(--ds-global-green-5);
+    --ds-color-success-border-subtle: var(--ds-global-green-6);
+    --ds-color-success-border-default: var(--ds-global-green-7);
+    --ds-color-success-border-strong: var(--ds-global-green-8);
+    --ds-color-success-base-default: var(--ds-global-green-9);
+    --ds-color-success-base-hover: var(--ds-global-green-10);
+    --ds-color-success-base-active: var(--ds-global-green-11);
+    --ds-color-success-text-subtle: var(--ds-global-green-12);
+    --ds-color-success-text-default: var(--ds-global-green-13);
+    --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
+    --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
+    --ds-color-danger-background-default: var(--ds-global-red-1);
+    --ds-color-danger-background-subtle: var(--ds-global-red-2);
+    --ds-color-danger-surface-default: var(--ds-global-red-3);
+    --ds-color-danger-surface-hover: var(--ds-global-red-4);
+    --ds-color-danger-surface-active: var(--ds-global-red-5);
+    --ds-color-danger-border-subtle: var(--ds-global-red-6);
+    --ds-color-danger-border-default: var(--ds-global-red-7);
+    --ds-color-danger-border-strong: var(--ds-global-red-8);
+    --ds-color-danger-base-default: var(--ds-global-red-9);
+    --ds-color-danger-base-hover: var(--ds-global-red-10);
+    --ds-color-danger-base-active: var(--ds-global-red-11);
+    --ds-color-danger-text-subtle: var(--ds-global-red-12);
+    --ds-color-danger-text-default: var(--ds-global-red-13);
+    --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
+    --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
+    --ds-color-info-background-default: #000408;
+    --ds-color-info-background-subtle: #021423;
+    --ds-color-info-surface-default: #032540;
+    --ds-color-info-surface-hover: #043256;
+    --ds-color-info-surface-active: #063f6c;
+    --ds-color-info-border-subtle: #4291ce;
+    --ds-color-info-border-default: #78b1dc;
+    --ds-color-info-border-strong: #aed0ea;
+    --ds-color-info-base-default: #2a84c8;
+    --ds-color-info-base-hover: #0a6dba;
+    --ds-color-info-base-active: #085998;
+    --ds-color-info-text-subtle: #a6cbe8;
+    --ds-color-info-text-default: #e8f1f9;
+    --ds-color-info-contrast-default: #000000;
+    --ds-color-info-contrast-subtle: #040c13;
+    --ds-color-warning-background-default: var(--ds-global-yellow-1);
+    --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
+    --ds-color-warning-surface-default: var(--ds-global-yellow-3);
+    --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
+    --ds-color-warning-surface-active: var(--ds-global-yellow-5);
+    --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
+    --ds-color-warning-border-default: var(--ds-global-yellow-7);
+    --ds-color-warning-border-strong: var(--ds-global-yellow-8);
+    --ds-color-warning-base-default: var(--ds-global-orange-9);
+    --ds-color-warning-base-hover: var(--ds-global-orange-10);
+    --ds-color-warning-base-active: var(--ds-global-orange-11);
+    --ds-color-warning-text-subtle: var(--ds-global-orange-12);
+    --ds-color-warning-text-default: var(--ds-global-orange-13);
+    --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
+    --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
+    --ds-color-focus-inner: #040404;
+    --ds-color-focus-outer: #e8f1f9;
+    --ds-global-blue-1: #000408;
+    --ds-global-blue-2: #021423;
+    --ds-global-blue-3: #032540;
+    --ds-global-blue-4: #043256;
+    --ds-global-blue-5: #063f6c;
+    --ds-global-blue-6: #4291ce;
+    --ds-global-blue-7: #78b1dc;
+    --ds-global-blue-8: #aed0ea;
+    --ds-global-blue-9: #2a84c8;
+    --ds-global-blue-10: #0a6dba;
+    --ds-global-blue-11: #085998;
+    --ds-global-blue-12: #a6cbe8;
+    --ds-global-blue-13: #e8f1f9;
+    --ds-global-blue-contrast-1: #000000;
+    --ds-global-blue-contrast-2: #040c13;
+    --ds-global-green-1: #000401;
+    --ds-global-green-2: #011704;
+    --ds-global-green-3: #022b08;
+    --ds-global-green-4: #03380a;
+    --ds-global-green-5: #03490d;
+    --ds-global-green-6: #379f45;
+    --ds-global-green-7: #71bb7b;
+    --ds-global-green-8: #aad6b0;
+    --ds-global-green-9: #118c23;
+    --ds-global-green-10: #057615;
+    --ds-global-green-11: #045f11;
+    --ds-global-green-12: #a3d2a9;
+    --ds-global-green-13: #e6f3e8;
+    --ds-global-green-contrast-1: #000000;
+    --ds-global-green-contrast-2: #010401;
+    --ds-global-orange-1: #060301;
+    --ds-global-orange-2: #200f05;
+    --ds-global-orange-3: #391b09;
+    --ds-global-orange-4: #4e250c;
+    --ds-global-orange-5: #633010;
+    --ds-global-orange-6: #c67849;
+    --ds-global-orange-7: #d69f7d;
+    --ds-global-orange-8: #e7c6b2;
+    --ds-global-orange-9: #bc6028;
+    --ds-global-orange-10: #a24d1a;
+    --ds-global-orange-11: #833f15;
+    --ds-global-orange-12: #e3bea6;
+    --ds-global-orange-13: #f8eee7;
+    --ds-global-orange-contrast-1: #000000;
+    --ds-global-orange-contrast-2: #060301;
+    --ds-global-purple-1: #060308;
+    --ds-global-purple-2: #1a0d26;
+    --ds-global-purple-3: #301748;
+    --ds-global-purple-4: #402060;
+    --ds-global-purple-5: #52287a;
+    --ds-global-purple-6: #9e7dbf;
+    --ds-global-purple-7: #b9a1d0;
+    --ds-global-purple-8: #d5c7e3;
+    --ds-global-purple-9: #b298cc;
+    --ds-global-purple-10: #a181c0;
+    --ds-global-purple-11: #8f69b5;
+    --ds-global-purple-12: #d0c0e0;
+    --ds-global-purple-13: #f2eef7;
+    --ds-global-purple-contrast-1: #000000;
+    --ds-global-purple-contrast-2: #18141b;
+    --ds-global-red-1: #0b0101;
+    --ds-global-red-2: #2b0606;
+    --ds-global-red-3: #4b0a0a;
+    --ds-global-red-4: #620e0e;
+    --ds-global-red-5: #7c1212;
+    --ds-global-red-6: #d66b6b;
+    --ds-global-red-7: #e29797;
+    --ds-global-red-8: #eec1c1;
+    --ds-global-red-9: #d76e6e;
+    --ds-global-red-10: #ce4e4e;
+    --ds-global-red-11: #c32727;
+    --ds-global-red-12: #ecbaba;
+    --ds-global-red-13: #faeded;
+    --ds-global-red-contrast-1: #000000;
+    --ds-global-red-contrast-2: #271414;
+    --ds-global-yellow-1: #040301;
+    --ds-global-yellow-2: #181304;
+    --ds-global-yellow-3: #2b2307;
+    --ds-global-yellow-4: #3a300a;
+    --ds-global-yellow-5: #4a3d0d;
+    --ds-global-yellow-6: #a7881c;
+    --ds-global-yellow-7: #cca723;
+    --ds-global-yellow-8: #edc94b;
+    --ds-global-yellow-9: #3d310a;
+    --ds-global-yellow-10: #52430e;
+    --ds-global-yellow-11: #695512;
+    --ds-global-yellow-12: #ebc232;
+    --ds-global-yellow-13: #faf0cd;
+    --ds-global-yellow-contrast-1: #ffffff;
+    --ds-global-yellow-contrast-2: #ccc9bf;
+  }
+}
+
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.typography.primary {
+  :root,
+  [data-ds-typography='primary'] {
+    --ds-font-family: Inter;
+    --ds-font-weight-medium: 500;
+    --ds-font-weight-semibold: 600;
+    --ds-font-weight-regular: 400;
+    --ds-heading-2xl-font-weight: 500;
+    --ds-heading-2xl-line-height: 1.3;
+    --ds-heading-2xl-font-size: 3.75rem;
+    --ds-heading-2xl-letter-spacing: -1%;
+    --ds-heading-xl-font-weight: 500;
+    --ds-heading-xl-line-height: 1.3;
+    --ds-heading-xl-font-size: 3rem;
+    --ds-heading-xl-letter-spacing: -1%;
+    --ds-heading-lg-font-weight: 500;
+    --ds-heading-lg-line-height: 1.3;
+    --ds-heading-lg-font-size: 2.25rem;
+    --ds-heading-lg-letter-spacing: -0.5%;
+    --ds-heading-md-font-weight: 500;
+    --ds-heading-md-line-height: 1.3;
+    --ds-heading-md-font-size: 1.875rem;
+    --ds-heading-md-letter-spacing: -0.25%;
+    --ds-heading-sm-font-weight: 500;
+    --ds-heading-sm-line-height: 1.3;
+    --ds-heading-sm-font-size: 1.5rem;
+    --ds-heading-sm-letter-spacing: 0%;
+    --ds-heading-xs-font-weight: 500;
+    --ds-heading-xs-line-height: 1.3;
+    --ds-heading-xs-font-size: 1.3125rem;
+    --ds-heading-xs-letter-spacing: 0.15%;
+    --ds-heading-2xs-font-weight: 500;
+    --ds-heading-2xs-line-height: 1.3;
+    --ds-heading-2xs-font-size: 1.125rem;
+    --ds-heading-2xs-letter-spacing: 0.15%;
+    --ds-body-xl-font-weight: 400;
+    --ds-body-xl-line-height: 1.5;
+    --ds-body-xl-font-size: 1.5rem;
+    --ds-body-xl-letter-spacing: 0.5%;
+    --ds-body-lg-font-weight: 400;
+    --ds-body-lg-line-height: 1.5;
+    --ds-body-lg-font-size: 1.3125rem;
+    --ds-body-lg-letter-spacing: 0.5%;
+    --ds-body-md-font-weight: 400;
+    --ds-body-md-line-height: 1.5;
+    --ds-body-md-font-size: 1.125rem;
+    --ds-body-md-letter-spacing: 0.5%;
+    --ds-body-sm-font-weight: 400;
+    --ds-body-sm-line-height: 1.5;
+    --ds-body-sm-font-size: 1rem;
+    --ds-body-sm-letter-spacing: 0.25%;
+    --ds-body-xs-font-weight: 400;
+    --ds-body-xs-line-height: 1.5;
+    --ds-body-xs-font-size: 0.875rem;
+    --ds-body-xs-letter-spacing: 0.15%;
+    --ds-body-short-xl-font-weight: 400;
+    --ds-body-short-xl-line-height: 1.3;
+    --ds-body-short-xl-font-size: 1.5rem;
+    --ds-body-short-xl-letter-spacing: 0.5%;
+    --ds-body-short-lg-font-weight: 400;
+    --ds-body-short-lg-line-height: 1.3;
+    --ds-body-short-lg-font-size: 1.3125rem;
+    --ds-body-short-lg-letter-spacing: 0.5%;
+    --ds-body-short-md-font-weight: 400;
+    --ds-body-short-md-line-height: 1.3;
+    --ds-body-short-md-font-size: 1.125rem;
+    --ds-body-short-md-letter-spacing: 0.5%;
+    --ds-body-short-sm-font-weight: 400;
+    --ds-body-short-sm-line-height: 1.3;
+    --ds-body-short-sm-font-size: 1rem;
+    --ds-body-short-sm-letter-spacing: 0.25%;
+    --ds-body-short-xs-font-weight: 400;
+    --ds-body-short-xs-line-height: 1.3;
+    --ds-body-short-xs-font-size: 0.875rem;
+    --ds-body-short-xs-letter-spacing: 0.15%;
+    --ds-body-long-xl-font-weight: 400;
+    --ds-body-long-xl-line-height: 1.7;
+    --ds-body-long-xl-font-size: 1.5rem;
+    --ds-body-long-xl-letter-spacing: 0.5%;
+    --ds-body-long-lg-font-weight: 400;
+    --ds-body-long-lg-line-height: 1.7;
+    --ds-body-long-lg-font-size: 1.3125rem;
+    --ds-body-long-lg-letter-spacing: 0.5%;
+    --ds-body-long-md-font-weight: 400;
+    --ds-body-long-md-line-height: 1.7;
+    --ds-body-long-md-font-size: 1.125rem;
+    --ds-body-long-md-letter-spacing: 0.5%;
+    --ds-body-long-sm-font-weight: 400;
+    --ds-body-long-sm-line-height: 1.7;
+    --ds-body-long-sm-font-size: 1rem;
+    --ds-body-long-sm-letter-spacing: 0.25%;
+    --ds-body-long-xs-font-weight: 400;
+    --ds-body-long-xs-line-height: 1.7;
+    --ds-body-long-xs-font-size: 0.875rem;
+    --ds-body-long-xs-letter-spacing: 0.15%;
+    --ds-label-lg-font-weight: 500;
+    --ds-label-lg-line-height: 1.3;
+    --ds-label-lg-font-size: 1.3125rem;
+    --ds-label-lg-letter-spacing: 0.5%;
+    --ds-label-md-font-weight: 500;
+    --ds-label-md-line-height: 1.3;
+    --ds-label-md-font-size: 1.125rem;
+    --ds-label-md-letter-spacing: 0.5%;
+    --ds-label-sm-font-weight: 500;
+    --ds-label-sm-line-height: 1.3;
+    --ds-label-sm-font-size: 1rem;
+    --ds-label-sm-letter-spacing: 0.25%;
+    --ds-label-xs-font-weight: 500;
+    --ds-label-xs-line-height: 1.3;
+    --ds-label-xs-font-size: 0.875rem;
+    --ds-label-xs-letter-spacing: 0.15%;
+    --ds-error_message-lg-font-weight: 400;
+    --ds-error_message-lg-line-height: 1.3;
+    --ds-error_message-lg-font-size: 1.3125rem;
+    --ds-error_message-lg-letter-spacing: 0.5%;
+    --ds-error_message-md-font-weight: 400;
+    --ds-error_message-md-line-height: 1.3;
+    --ds-error_message-md-font-size: 1.125rem;
+    --ds-error_message-md-letter-spacing: 0.5%;
+    --ds-error_message-sm-font-weight: 400;
+    --ds-error_message-sm-line-height: 1.3;
+    --ds-error_message-sm-font-size: 1rem;
+    --ds-error_message-sm-letter-spacing: 0.25%;
+    --ds-error_message-xs-font-weight: 400;
+    --ds-error_message-xs-line-height: 1.3;
+    --ds-error_message-xs-font-size: 0.875rem;
+    --ds-error_message-xs-letter-spacing: 0.15%;
+    --ds-line-height-sm: 1.3;
+    --ds-line-height-md: 1.5;
+    --ds-line-height-lg: 1.7;
+    --ds-font-size-1: 0.75rem;
+    --ds-font-size-2: 0.8125rem;
+    --ds-font-size-3: 0.875rem;
+    --ds-font-size-4: 1rem;
+    --ds-font-size-5: 1.125rem;
+    --ds-font-size-6: 1.3125rem;
+    --ds-font-size-7: 1.5rem;
+    --ds-font-size-8: 1.875rem;
+    --ds-font-size-9: 2.25rem;
+    --ds-font-size-10: 3rem;
+    --ds-font-size-11: 3.75rem;
+    --ds-letter-spacing-1: -1%;
+    --ds-letter-spacing-2: -0.5%;
+    --ds-letter-spacing-3: -0.25%;
+    --ds-letter-spacing-4: -0.15%;
+    --ds-letter-spacing-5: 0%;
+    --ds-letter-spacing-6: 0.15%;
+    --ds-letter-spacing-7: 0.25%;
+    --ds-letter-spacing-8: 0.5%;
+    --ds-letter-spacing-9: 1.5%;
+  }
+}
diff --git a/plugins/figma/src/ui/utils/useDsMode.ts b/plugins/figma/src/ui/utils/useDsMode.ts
new file mode 100644
index 0000000000..994c22a48e
--- /dev/null
+++ b/plugins/figma/src/ui/utils/useDsMode.ts
@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+
+export const useDsMode = () => {
+  const [themeMode, setThemeMode] = useState('dark');
+
+  /* observer for html element, that checks class for dark or light */
+  useEffect(() => {
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.attributeName === 'class') {
+          const htmlElement = document.querySelector('html');
+          if (htmlElement) {
+            if (htmlElement.classList.contains('figma-dark')) {
+              setThemeMode('dark');
+            } else {
+              setThemeMode('light');
+            }
+          }
+        }
+      }
+    });
+
+    /* get initial theme from class */
+    const htmlElement = document.querySelector('html');
+    if (htmlElement) {
+      if (htmlElement.classList.contains('figma-dark')) {
+        setThemeMode('dark');
+      } else {
+        setThemeMode('light');
+      }
+    }
+
+    if (htmlElement) {
+      observer.observe(htmlElement, {
+        attributes: true,
+        attributeFilter: ['class'],
+      });
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return themeMode;
+};
diff --git a/plugins/figma/src/ui/utils/useStartup.ts b/plugins/figma/src/ui/utils/useStartup.ts
new file mode 100644
index 0000000000..f8ef6268a7
--- /dev/null
+++ b/plugins/figma/src/ui/utils/useStartup.ts
@@ -0,0 +1,58 @@
+import { type StoreThemes, useThemeStore } from '@common/store';
+import { Messages } from '@common/types';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const useStartup = () => {
+  const setThemes = useThemeStore((state) => state.setThemes);
+  const navigate = useNavigate();
+  const setLoading = useThemeStore((state) => state.setLoading);
+  const setError = useThemeStore((state) => state.setCodeSnippetError);
+  const setNoThemesFound = useThemeStore((state) => state.setNoThemesFound);
+
+  useEffect(() => {
+    parent.postMessage({ pluginMessage: { type: Messages.GetThemes } }, '*');
+    const onmessage = (event: {
+      data: {
+        pluginMessage: {
+          type: string;
+          themes: StoreThemes;
+          json: [];
+          fonts: [];
+        };
+      };
+    }) => {
+      switch (event.data.pluginMessage.type) {
+        case Messages.GetThemes:
+          if (event.data.pluginMessage.themes.length > 0) {
+            setThemes(event.data.pluginMessage.themes);
+          } else {
+            setNoThemesFound(true);
+          }
+          break;
+        case Messages.GetThemesAndRedirect:
+          navigate('/');
+          parent.postMessage(
+            { pluginMessage: { type: Messages.GetThemes } },
+            '*',
+          );
+          break;
+        case Messages.SetValueForModeError:
+          setError(
+            'En feil har oppstått. Du må ha minimum pro-versjonen av Figma for å kunne generere tema.',
+          );
+          break;
+        case Messages.UpdateVariables:
+          setError('');
+          break;
+      }
+      setLoading(false);
+    };
+
+    window.addEventListener('message', onmessage);
+
+    return () => {
+      window.removeEventListener('message', onmessage);
+    };
+  }, []);
+};
diff --git a/plugins/figma-plugin/src/ui/vite-env.d.ts b/plugins/figma/src/ui/vite-env.d.ts
similarity index 100%
rename from plugins/figma-plugin/src/ui/vite-env.d.ts
rename to plugins/figma/src/ui/vite-env.d.ts
diff --git a/plugins/figma/tsconfig.json b/plugins/figma/tsconfig.json
new file mode 100644
index 0000000000..d7f6bc9d78
--- /dev/null
+++ b/plugins/figma/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "useDefineForClassFields": true,
+    "isolatedModules": false,
+    "baseUrl": ".",
+    "paths": {
+      "@common/*": ["src/common/*"],
+      "@ui/*": ["src/ui/*"]
+    },
+    "types": ["@figma/plugin-typings"]
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/plugins/figma-plugin/tsconfig.node.json b/plugins/figma/tsconfig.node.json
similarity index 100%
rename from plugins/figma-plugin/tsconfig.node.json
rename to plugins/figma/tsconfig.node.json
diff --git a/plugins/figma-plugin/vite.config.plugin.ts b/plugins/figma/vite.config.plugin.ts
similarity index 100%
rename from plugins/figma-plugin/vite.config.plugin.ts
rename to plugins/figma/vite.config.plugin.ts
diff --git a/plugins/figma-plugin/vite.config.ui.ts b/plugins/figma/vite.config.ui.ts
similarity index 86%
rename from plugins/figma-plugin/vite.config.ui.ts
rename to plugins/figma/vite.config.ui.ts
index a5a4487bcd..ed61156f06 100644
--- a/plugins/figma-plugin/vite.config.ui.ts
+++ b/plugins/figma/vite.config.ui.ts
@@ -2,11 +2,10 @@ import path from 'node:path';
 
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
-import richSvg from 'vite-plugin-react-rich-svg';
 import { viteSingleFile } from 'vite-plugin-singlefile';
 
 export default defineConfig(({ mode }) => ({
-  plugins: [react(), richSvg(), viteSingleFile()],
+  plugins: [react(), viteSingleFile()],
   root: path.resolve('src/ui'),
   build: {
     minify: mode === 'production',
diff --git a/yarn.lock b/yarn.lock
index db1fb42f1a..98185a6554 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1781,6 +1781,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@esbuild/aix-ppc64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/aix-ppc64@npm:0.20.2"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/aix-ppc64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/aix-ppc64@npm:0.21.5"
@@ -1802,6 +1809,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/android-arm64@npm:0.20.2"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/android-arm64@npm:0.21.5"
@@ -1823,6 +1837,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/android-arm@npm:0.20.2"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/android-arm@npm:0.21.5"
@@ -1844,6 +1865,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/android-x64@npm:0.20.2"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/android-x64@npm:0.21.5"
@@ -1865,6 +1893,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-arm64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/darwin-arm64@npm:0.20.2"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-arm64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/darwin-arm64@npm:0.21.5"
@@ -1886,6 +1921,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/darwin-x64@npm:0.20.2"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/darwin-x64@npm:0.21.5"
@@ -1907,6 +1949,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-arm64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/freebsd-arm64@npm:0.20.2"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-arm64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/freebsd-arm64@npm:0.21.5"
@@ -1928,6 +1977,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/freebsd-x64@npm:0.20.2"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/freebsd-x64@npm:0.21.5"
@@ -1949,6 +2005,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-arm64@npm:0.20.2"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-arm64@npm:0.21.5"
@@ -1970,6 +2033,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-arm@npm:0.20.2"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-arm@npm:0.21.5"
@@ -1991,6 +2061,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ia32@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-ia32@npm:0.20.2"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ia32@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-ia32@npm:0.21.5"
@@ -2012,6 +2089,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-loong64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-loong64@npm:0.20.2"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-loong64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-loong64@npm:0.21.5"
@@ -2033,6 +2117,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-mips64el@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-mips64el@npm:0.20.2"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-mips64el@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-mips64el@npm:0.21.5"
@@ -2054,6 +2145,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ppc64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-ppc64@npm:0.20.2"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ppc64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-ppc64@npm:0.21.5"
@@ -2075,6 +2173,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-riscv64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-riscv64@npm:0.20.2"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-riscv64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-riscv64@npm:0.21.5"
@@ -2096,6 +2201,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-s390x@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-s390x@npm:0.20.2"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-s390x@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-s390x@npm:0.21.5"
@@ -2117,6 +2229,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-x64@npm:0.20.2"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-x64@npm:0.21.5"
@@ -2138,6 +2257,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/netbsd-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/netbsd-x64@npm:0.20.2"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/netbsd-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/netbsd-x64@npm:0.21.5"
@@ -2173,6 +2299,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/openbsd-x64@npm:0.20.2"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/openbsd-x64@npm:0.21.5"
@@ -2194,6 +2327,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/sunos-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/sunos-x64@npm:0.20.2"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/sunos-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/sunos-x64@npm:0.21.5"
@@ -2215,6 +2355,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-arm64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/win32-arm64@npm:0.20.2"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-arm64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/win32-arm64@npm:0.21.5"
@@ -2236,6 +2383,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-ia32@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/win32-ia32@npm:0.20.2"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-ia32@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/win32-ia32@npm:0.21.5"
@@ -2257,6 +2411,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/win32-x64@npm:0.20.2"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/win32-x64@npm:0.21.5"
@@ -2278,10 +2439,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@figma/plugin-typings@npm:^1.97.0":
-  version: 1.97.0
-  resolution: "@figma/plugin-typings@npm:1.97.0"
-  checksum: 10/de2a1bbc92b5f507f78c51c5b43abfc28c8957a9b36b317b6a1073fc2ba40137b8df0a2a9a47b70ee47765f3afddfca53150cf07a84434c412fc5703e81ed845
+"@figma/plugin-typings@npm:^1.95.0":
+  version: 1.98.0
+  resolution: "@figma/plugin-typings@npm:1.98.0"
+  checksum: 10/0e8942451e889ad62307ba8b721164245135159aaecdad084d6957b656bf4637fa1c203e5467e47ae6b9d8abc530929475604ec4c59f62390908f9a77fd6a3c8
   languageName: node
   linkType: hard
 
@@ -3148,6 +3309,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-android-arm-eabi@npm:4.14.0":
+  version: 4.14.0
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.14.0"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-android-arm-eabi@npm:4.20.0":
   version: 4.20.0
   resolution: "@rollup/rollup-android-arm-eabi@npm:4.20.0"
@@ -3162,6 +3330,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-android-arm64@npm:4.14.0":
+  version: 4.14.0
+  resolution: "@rollup/rollup-android-arm64@npm:4.14.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-android-arm64@npm:4.20.0":
   version: 4.20.0
   resolution: "@rollup/rollup-android-arm64@npm:4.20.0"
@@ -3176,6 +3351,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-darwin-arm64@npm:4.14.0":
+  version: 4.14.0
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.14.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-darwin-arm64@npm:4.20.0":
   version: 4.20.0
   resolution: "@rollup/rollup-darwin-arm64@npm:4.20.0"
@@ -3190,6 +3372,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-darwin-x64@npm:4.14.0":
+  version: 4.14.0
+  resolution: "@rollup/rollup-darwin-x64@npm:4.14.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-darwin-x64@npm:4.20.0":
   version: 4.20.0
   resolution: "@rollup/rollup-darwin-x64@npm:4.20.0"
@@ -3204,6 +3393,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.14.0":
+  version: 4.14.0
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.14.0"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm-gnueabihf@npm:4.20.0":
   version: 4.20.0
   resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.20.0"
@@ -3232,6 +3428,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm64-gnu@npm:4.14.0":
+  version: 4.14.0
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.14.0"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm64-gnu@npm:4.20.0":
   version: 4.20.0
   resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.20.0"
@@ -3246,6 +3449,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm64-musl@npm:4.14.0":
+  version: 4.14.0
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.14.0"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm64-musl@npm:4.20.0":
   version: 4.20.0
   resolution: "@rollup/rollup-linux-arm64-musl@npm:4.20.0"
@@ -3260,6 +3470,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-powerpc64le-gnu@npm:4.14.0":
+  version: 4.14.0
+  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.14.0"
+  conditions: os=linux & cpu=ppc64le & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-powerpc64le-gnu@npm:4.20.0":
   version: 4.20.0
   resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.20.0"
@@ -3274,6 +3491,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-riscv64-gnu@npm:4.14.0":
+  version: 4.14.0
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.14.0"
+  conditions: os=linux & cpu=riscv64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-riscv64-gnu@npm:4.20.0":
   version: 4.20.0
   resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.20.0"
@@ -3288,6 +3512,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-s390x-gnu@npm:4.14.0":
+  version: 4.14.0
+  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.14.0"
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-s390x-gnu@npm:4.20.0":
   version: 4.20.0
   resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.20.0"
@@ -3302,6 +3533,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-x64-gnu@npm:4.14.0":
+  version: 4.14.0
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.14.0"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-x64-gnu@npm:4.20.0":
   version: 4.20.0
   resolution: "@rollup/rollup-linux-x64-gnu@npm:4.20.0"
@@ -3316,6 +3554,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-x64-musl@npm:4.14.0":
+  version: 4.14.0
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.14.0"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-x64-musl@npm:4.20.0":
   version: 4.20.0
   resolution: "@rollup/rollup-linux-x64-musl@npm:4.20.0"
@@ -3330,6 +3575,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-win32-arm64-msvc@npm:4.14.0":
+  version: 4.14.0
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.14.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-win32-arm64-msvc@npm:4.20.0":
   version: 4.20.0
   resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.20.0"
@@ -3344,6 +3596,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-win32-ia32-msvc@npm:4.14.0":
+  version: 4.14.0
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.14.0"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-win32-ia32-msvc@npm:4.20.0":
   version: 4.20.0
   resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.20.0"
@@ -3358,6 +3617,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-win32-x64-msvc@npm:4.14.0":
+  version: 4.14.0
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.14.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-win32-x64-msvc@npm:4.20.0":
   version: 4.20.0
   resolution: "@rollup/rollup-win32-x64-msvc@npm:4.20.0"
@@ -5090,7 +5356,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^18.3.0":
+"@types/react-dom@npm:^18.0.11, @types/react-dom@npm:^18.3.0":
   version: 18.3.0
   resolution: "@types/react-dom@npm:18.3.0"
   dependencies:
@@ -5139,6 +5405,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:^18.0.28":
+  version: 18.3.10
+  resolution: "@types/react@npm:18.3.10"
+  dependencies:
+    "@types/prop-types": "npm:*"
+    csstype: "npm:^3.0.2"
+  checksum: 10/cdc946f15fcad62387e6485a2bbef3e45609708fd81e3ce30b03580077bb8a8a1bd0d19858d8602b33c3921bbb8907ddbc9411fd25294a2c2e944907dad8dd67
+  languageName: node
+  linkType: hard
+
 "@types/reactcss@npm:*":
   version: 1.2.12
   resolution: "@types/reactcss@npm:1.2.12"
@@ -6210,7 +6486,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"braces@npm:^3.0.3, braces@npm:~3.0.2":
+"braces@npm:^3.0.2, braces@npm:^3.0.3, braces@npm:~3.0.2":
   version: 3.0.3
   resolution: "braces@npm:3.0.3"
   dependencies:
@@ -8086,6 +8362,86 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild@npm:^0.20.1":
+  version: 0.20.2
+  resolution: "esbuild@npm:0.20.2"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.20.2"
+    "@esbuild/android-arm": "npm:0.20.2"
+    "@esbuild/android-arm64": "npm:0.20.2"
+    "@esbuild/android-x64": "npm:0.20.2"
+    "@esbuild/darwin-arm64": "npm:0.20.2"
+    "@esbuild/darwin-x64": "npm:0.20.2"
+    "@esbuild/freebsd-arm64": "npm:0.20.2"
+    "@esbuild/freebsd-x64": "npm:0.20.2"
+    "@esbuild/linux-arm": "npm:0.20.2"
+    "@esbuild/linux-arm64": "npm:0.20.2"
+    "@esbuild/linux-ia32": "npm:0.20.2"
+    "@esbuild/linux-loong64": "npm:0.20.2"
+    "@esbuild/linux-mips64el": "npm:0.20.2"
+    "@esbuild/linux-ppc64": "npm:0.20.2"
+    "@esbuild/linux-riscv64": "npm:0.20.2"
+    "@esbuild/linux-s390x": "npm:0.20.2"
+    "@esbuild/linux-x64": "npm:0.20.2"
+    "@esbuild/netbsd-x64": "npm:0.20.2"
+    "@esbuild/openbsd-x64": "npm:0.20.2"
+    "@esbuild/sunos-x64": "npm:0.20.2"
+    "@esbuild/win32-arm64": "npm:0.20.2"
+    "@esbuild/win32-ia32": "npm:0.20.2"
+    "@esbuild/win32-x64": "npm:0.20.2"
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10/663215ab7e599651e00d61b528a63136e1f1d397db8b9c3712540af928c9476d61da95aefa81b7a8dfc7a9fdd7616fcf08395c27be68be8c99953fb461863ce4
+  languageName: node
+  linkType: hard
+
 "esbuild@npm:^0.21.3, esbuild@npm:~0.21.5":
   version: 0.21.5
   resolution: "esbuild@npm:0.21.5"
@@ -8647,17 +9003,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"figma-plugin@workspace:plugins/figma-plugin":
+"figma-plugin@workspace:plugins/figma":
   version: 0.0.0-use.local
-  resolution: "figma-plugin@workspace:plugins/figma-plugin"
+  resolution: "figma-plugin@workspace:plugins/figma"
   dependencies:
+    "@adobe/leonardo-contrast-colors": "npm:^1.0.0"
+    "@digdir/designsystemet": "workspace:^"
     "@digdir/designsystemet-css": "workspace:^"
     "@digdir/designsystemet-react": "workspace:^"
     "@digdir/designsystemet-theme": "workspace:^"
-    "@figma/plugin-typings": "npm:^1.97.0"
-    "@types/node": "npm:^22.1.0"
-    "@types/react": "npm:^18.3.3"
-    "@types/react-dom": "npm:^18.3.0"
+    "@figma/plugin-typings": "npm:^1.95.0"
+    "@types/react": "npm:^18.0.28"
+    "@types/react-color": "npm:^3.0.12"
+    "@types/react-dom": "npm:^18.0.11"
     "@vitejs/plugin-react": "npm:^4.3.1"
     clsx: "npm:^2.1.1"
     npm-run-all2: "npm:^6.2.2"
@@ -12416,13 +12774,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.7":
-  version: 4.0.8
-  resolution: "micromatch@npm:4.0.8"
+"micromatch@npm:^4.0.2, micromatch@npm:^4.0.7":
+  version: 4.0.7
+  resolution: "micromatch@npm:4.0.7"
   dependencies:
     braces: "npm:^3.0.3"
     picomatch: "npm:^2.3.1"
-  checksum: 10/6bf2a01672e7965eb9941d1f02044fad2bd12486b5553dc1116ff24c09a8723157601dc992e74c911d896175918448762df3b3fd0a6b61037dd1a9766ddfbf58
+  checksum: 10/a11ed1cb67dcbbe9a5fc02c4062cf8bb0157d73bf86956003af8dcfdf9b287f9e15ec0f6d6925ff6b8b5b496202335e497b01de4d95ef6cf06411bc5e5c474a0
+  languageName: node
+  linkType: hard
+
+"micromatch@npm:^4.0.4":
+  version: 4.0.5
+  resolution: "micromatch@npm:4.0.5"
+  dependencies:
+    braces: "npm:^3.0.2"
+    picomatch: "npm:^2.3.1"
+  checksum: 10/a749888789fc15cac0e03273844dbd749f9f8e8d64e70c564bcf06a033129554c789bb9e30d7566d7ff6596611a08e58ac12cf2a05f6e3c9c47c50c4c7e12fa2
   languageName: node
   linkType: hard
 
@@ -14164,6 +14532,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.4.38":
+  version: 8.4.38
+  resolution: "postcss@npm:8.4.38"
+  dependencies:
+    nanoid: "npm:^3.3.7"
+    picocolors: "npm:^1.0.0"
+    source-map-js: "npm:^1.2.0"
+  checksum: 10/6e44a7ed835ffa9a2b096e8d3e5dfc6bcf331a25c48aeb862dd54e3aaecadf814fa22be224fd308f87d08adf2299164f88c5fd5ab1c4ef6cbd693ceb295377f4
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.4.41":
   version: 8.4.41
   resolution: "postcss@npm:8.4.41"
@@ -15177,6 +15556,66 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rollup@npm:^4.13.0":
+  version: 4.14.0
+  resolution: "rollup@npm:4.14.0"
+  dependencies:
+    "@rollup/rollup-android-arm-eabi": "npm:4.14.0"
+    "@rollup/rollup-android-arm64": "npm:4.14.0"
+    "@rollup/rollup-darwin-arm64": "npm:4.14.0"
+    "@rollup/rollup-darwin-x64": "npm:4.14.0"
+    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.14.0"
+    "@rollup/rollup-linux-arm64-gnu": "npm:4.14.0"
+    "@rollup/rollup-linux-arm64-musl": "npm:4.14.0"
+    "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.14.0"
+    "@rollup/rollup-linux-riscv64-gnu": "npm:4.14.0"
+    "@rollup/rollup-linux-s390x-gnu": "npm:4.14.0"
+    "@rollup/rollup-linux-x64-gnu": "npm:4.14.0"
+    "@rollup/rollup-linux-x64-musl": "npm:4.14.0"
+    "@rollup/rollup-win32-arm64-msvc": "npm:4.14.0"
+    "@rollup/rollup-win32-ia32-msvc": "npm:4.14.0"
+    "@rollup/rollup-win32-x64-msvc": "npm:4.14.0"
+    "@types/estree": "npm:1.0.5"
+    fsevents: "npm:~2.3.2"
+  dependenciesMeta:
+    "@rollup/rollup-android-arm-eabi":
+      optional: true
+    "@rollup/rollup-android-arm64":
+      optional: true
+    "@rollup/rollup-darwin-arm64":
+      optional: true
+    "@rollup/rollup-darwin-x64":
+      optional: true
+    "@rollup/rollup-linux-arm-gnueabihf":
+      optional: true
+    "@rollup/rollup-linux-arm64-gnu":
+      optional: true
+    "@rollup/rollup-linux-arm64-musl":
+      optional: true
+    "@rollup/rollup-linux-powerpc64le-gnu":
+      optional: true
+    "@rollup/rollup-linux-riscv64-gnu":
+      optional: true
+    "@rollup/rollup-linux-s390x-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-musl":
+      optional: true
+    "@rollup/rollup-win32-arm64-msvc":
+      optional: true
+    "@rollup/rollup-win32-ia32-msvc":
+      optional: true
+    "@rollup/rollup-win32-x64-msvc":
+      optional: true
+    fsevents:
+      optional: true
+  bin:
+    rollup: dist/bin/rollup
+  checksum: 10/803b45976dfc73843a48083dc345821860e960aede010b0e765201cc2827fe131b6f29296da3186a48813b83f823cd26b77adcafcf32ba859efb1b62adb8f4e0
+  languageName: node
+  linkType: hard
+
 "rollup@npm:^4.19.0, rollup@npm:^4.20.0":
   version: 4.20.0
   resolution: "rollup@npm:4.20.0"
@@ -17298,7 +17737,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^5.0.0, vite@npm:^5.0.11, vite@npm:^5.3.6":
+"vite@npm:^5.0.0, vite@npm:^5.3.6":
   version: 5.4.6
   resolution: "vite@npm:5.4.6"
   dependencies:
@@ -17341,6 +17780,46 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite@npm:^5.0.11":
+  version: 5.2.12
+  resolution: "vite@npm:5.2.12"
+  dependencies:
+    esbuild: "npm:^0.20.1"
+    fsevents: "npm:~2.3.3"
+    postcss: "npm:^8.4.38"
+    rollup: "npm:^4.13.0"
+  peerDependencies:
+    "@types/node": ^18.0.0 || >=20.0.0
+    less: "*"
+    lightningcss: ^1.21.0
+    sass: "*"
+    stylus: "*"
+    sugarss: "*"
+    terser: ^5.4.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  peerDependenciesMeta:
+    "@types/node":
+      optional: true
+    less:
+      optional: true
+    lightningcss:
+      optional: true
+    sass:
+      optional: true
+    stylus:
+      optional: true
+    sugarss:
+      optional: true
+    terser:
+      optional: true
+  bin:
+    vite: bin/vite.js
+  checksum: 10/c27d3efff93016e8171b6a362f605ad5f78e24086292987097ad4a7382ae78d9e0659065976a13bf7b51ba0f593d675579010692097ef36d8a5cc965f3efec4c
+  languageName: node
+  linkType: hard
+
 "vitest@npm:^2.0.5":
   version: 2.0.5
   resolution: "vitest@npm:2.0.5"