From 1ba7ff44d5bb83df620cf7f734bef336e75d3098 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Fri, 16 Aug 2024 13:26:58 +0200
Subject: [PATCH 01/21] Stuff

---
 packages/cli/src/colors/colorUtils.ts         |   8 +-
 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.css       |  40 ---
 .../src/ui/components/Footer/Footer.tsx       |  26 --
 plugins/figma-plugin/src/ui/index.html        |   2 -
 .../src/ui/pages/PageOne/PageOne.tsx          | 134 ---------
 .../src/ui/pages/PageTwo/PageTwo.tsx          |   5 -
 plugins/{figma-plugin => figma}/.gitignore    |   0
 plugins/{figma-plugin => figma}/README.md     |   0
 .../assets/img/preview.png                    | Bin
 plugins/{figma-plugin => figma}/manifest.json |   4 +-
 plugins/{figma-plugin => figma}/package.json  |  36 ++-
 plugins/figma/src/common/dummyFonts.ts        |  18 ++
 plugins/figma/src/common/dummyTheme.ts        | 274 ++++++++++++++++++
 plugins/figma/src/common/store.ts             | 104 +++++++
 .../src/common/types.ts                       |   2 +
 plugins/figma/src/common/utils.ts             |  82 ++++++
 plugins/figma/src/plugin/figma/fonts.ts       |  24 ++
 .../figma/src/plugin/figma/getVariables.ts    |  20 ++
 plugins/figma/src/plugin/figma/json.ts        |  89 ++++++
 plugins/figma/src/plugin/figma/themes.ts      | 248 ++++++++++++++++
 .../figma/src/plugin/figma/updateVariables.ts |  90 ++++++
 plugins/figma/src/plugin/plugin.ts            | 104 +++++++
 plugins/figma/src/ui/App.css                  | 119 ++++++++
 plugins/figma/src/ui/app.tsx                  | 136 +++++++++
 .../Breadcrumbs/Breadcrumbs.module.css        |  32 ++
 .../ui/components/Breadcrumbs/Breadcrumbs.tsx |  25 ++
 .../src/ui/components/Card/Card.module.css    |  42 +++
 plugins/figma/src/ui/components/Card/Card.tsx |  42 +++
 .../CardButton/CardButton.module.css          |  16 +
 .../ui/components/CardButton/CardButton.tsx   |  14 +
 .../CodeSnippet/CodeSnippet.module.css        |  40 +++
 .../ui/components/CodeSnippet/CodeSnippet.tsx |  97 +++++++
 .../ColorPicker/ColorPicker.module.css        |  54 ++++
 .../ui/components/ColorPicker/ColorPicker.tsx |  59 ++++
 .../ColorPickers/ColorPickers.module.css      |   0
 .../components/ColorPickers/ColorPickers.tsx  |  83 ++++++
 .../ui/components/Footer/Footer.module.css    |  90 ++++++
 .../figma/src/ui/components/Footer/Footer.tsx | 104 +++++++
 .../components/Textfield/Textfield.module.css |   2 +
 .../src/ui/components/Textfield/Textfield.tsx |  16 +
 .../src/ui/components/Toast/Toast.css         |   0
 .../src/ui/components/Toast/Toast.tsx         |  11 +-
 plugins/figma/src/ui/index.html               |   5 +
 .../{figma-plugin => figma}/src/ui/main.tsx   |   5 +
 .../src/ui/pages/AddTheme/AddTheme.module.css |  28 ++
 .../figma/src/ui/pages/AddTheme/AddTheme.tsx  | 115 ++++++++
 .../src/ui/pages/Colors/Colors.module.css     |  17 ++
 plugins/figma/src/ui/pages/Colors/Colors.tsx  | 192 ++++++++++++
 .../figma/src/ui/pages/Font/Font.module.css   |  35 +++
 plugins/figma/src/ui/pages/Font/Font.tsx      | 135 +++++++++
 .../figma/src/ui/pages/Fonts/Fonts.module.css |  10 +
 plugins/figma/src/ui/pages/Fonts/Fonts.tsx    |  42 +++
 .../src/ui/pages/Github/Github.module.css     |   7 +
 plugins/figma/src/ui/pages/Github/Github.tsx  |  44 +++
 .../src/ui/pages/PageOne/PageOne.module.css   |   9 +
 .../figma/src/ui/pages/PageOne/PageOne.tsx    | 107 +++++++
 .../figma/src/ui/pages/PageTwo/PageTwo.tsx    |  21 ++
 .../figma/src/ui/pages/Theme/Theme.module.css |  58 ++++
 plugins/figma/src/ui/pages/Theme/Theme.tsx    | 142 +++++++++
 .../src/ui/pages/Themes/Themes.module.css     |   9 +
 plugins/figma/src/ui/pages/Themes/Themes.tsx  |  48 +++
 .../src/ui/pages/pageThree/PageThree.tsx      |   0
 plugins/figma/src/ui/utils/github.ts          |  79 +++++
 .../src/ui/vite-env.d.ts                      |   0
 plugins/{figma-plugin => figma}/tsconfig.json |   0
 .../tsconfig.node.json                        |   4 +-
 .../vite.config.plugin.ts                     |   0
 .../{figma-plugin => figma}/vite.config.ui.ts |   5 +-
 71 files changed, 3176 insertions(+), 408 deletions(-)
 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.css
 delete mode 100644 plugins/figma-plugin/src/ui/components/Footer/Footer.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
 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%)
 rename plugins/{figma-plugin => figma}/manifest.json (68%)
 rename plugins/{figma-plugin => figma}/package.json (51%)
 create mode 100644 plugins/figma/src/common/dummyFonts.ts
 create mode 100644 plugins/figma/src/common/dummyTheme.ts
 create mode 100644 plugins/figma/src/common/store.ts
 rename plugins/{figma-plugin => figma}/src/common/types.ts (67%)
 create mode 100644 plugins/figma/src/common/utils.ts
 create mode 100644 plugins/figma/src/plugin/figma/fonts.ts
 create mode 100644 plugins/figma/src/plugin/figma/getVariables.ts
 create mode 100644 plugins/figma/src/plugin/figma/json.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/Breadcrumbs/Breadcrumbs.module.css
 create mode 100644 plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.tsx
 create mode 100644 plugins/figma/src/ui/components/Card/Card.module.css
 create mode 100644 plugins/figma/src/ui/components/Card/Card.tsx
 create mode 100644 plugins/figma/src/ui/components/CardButton/CardButton.module.css
 create mode 100644 plugins/figma/src/ui/components/CardButton/CardButton.tsx
 create mode 100644 plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.module.css
 create mode 100644 plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.tsx
 create mode 100644 plugins/figma/src/ui/components/ColorPicker/ColorPicker.module.css
 create mode 100644 plugins/figma/src/ui/components/ColorPicker/ColorPicker.tsx
 create mode 100644 plugins/figma/src/ui/components/ColorPickers/ColorPickers.module.css
 create mode 100644 plugins/figma/src/ui/components/ColorPickers/ColorPickers.tsx
 create mode 100644 plugins/figma/src/ui/components/Footer/Footer.module.css
 create mode 100644 plugins/figma/src/ui/components/Footer/Footer.tsx
 create mode 100644 plugins/figma/src/ui/components/Textfield/Textfield.module.css
 create mode 100644 plugins/figma/src/ui/components/Textfield/Textfield.tsx
 rename plugins/{figma-plugin => figma}/src/ui/components/Toast/Toast.css (100%)
 rename plugins/{figma-plugin => figma}/src/ui/components/Toast/Toast.tsx (81%)
 create mode 100644 plugins/figma/src/ui/index.html
 rename plugins/{figma-plugin => figma}/src/ui/main.tsx (78%)
 create mode 100644 plugins/figma/src/ui/pages/AddTheme/AddTheme.module.css
 create mode 100644 plugins/figma/src/ui/pages/AddTheme/AddTheme.tsx
 create mode 100644 plugins/figma/src/ui/pages/Colors/Colors.module.css
 create mode 100644 plugins/figma/src/ui/pages/Colors/Colors.tsx
 create mode 100644 plugins/figma/src/ui/pages/Font/Font.module.css
 create mode 100644 plugins/figma/src/ui/pages/Font/Font.tsx
 create mode 100644 plugins/figma/src/ui/pages/Fonts/Fonts.module.css
 create mode 100644 plugins/figma/src/ui/pages/Fonts/Fonts.tsx
 create mode 100644 plugins/figma/src/ui/pages/Github/Github.module.css
 create mode 100644 plugins/figma/src/ui/pages/Github/Github.tsx
 create mode 100644 plugins/figma/src/ui/pages/PageOne/PageOne.module.css
 create mode 100644 plugins/figma/src/ui/pages/PageOne/PageOne.tsx
 create mode 100644 plugins/figma/src/ui/pages/PageTwo/PageTwo.tsx
 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
 rename plugins/{figma-plugin => figma}/src/ui/pages/pageThree/PageThree.tsx (100%)
 create mode 100644 plugins/figma/src/ui/utils/github.ts
 rename plugins/{figma-plugin => figma}/src/ui/vite-env.d.ts (100%)
 rename plugins/{figma-plugin => figma}/tsconfig.json (100%)
 rename plugins/{figma-plugin => figma}/tsconfig.node.json (84%)
 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/colorUtils.ts b/packages/cli/src/colors/colorUtils.ts
index f4f398340d..1e3f1177c2 100644
--- a/packages/cli/src/colors/colorUtils.ts
+++ b/packages/cli/src/colors/colorUtils.ts
@@ -191,16 +191,16 @@ export const HSLToHex = (h: number, s: number, l: number) => {
  * @param hex A hex color string
  * @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;
 };
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.css b/plugins/figma-plugin/src/ui/components/Footer/Footer.css
deleted file mode 100644
index 82fc26f57b..0000000000
--- a/plugins/figma-plugin/src/ui/components/Footer/Footer.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.footer {
-  position: absolute;
-  z-index: 10;
-  background-color: white;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 44px;
-  border-top: 1px solid var(--ds-color-neutral-border-subtle);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px;
-}
-
-.footer__right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.version {
-  background-color: var(--ds-color-neutral-surface-default);
-  font-size: 14px;
-  color: var(--ds-color-neutral-text-subtle);
-  font-weight: 500;
-  padding: 3px 6px;
-  border-radius: 2px;
-}
-
-.feedback {
-  color: var(--ds-color-neutral-text-subtle);
-  padding: 3px;
-  border-radius: 1px;
-}
-
-.feedback:hover {
-  background-color: var(--ds-color-neutral-surface-default);
-  color: var(--ds-color-neutral-text-default);
-}
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/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 4a79abe1c2..0000000000
--- a/plugins/figma-plugin/src/ui/pages/PageOne/PageOne.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import {
-  Button,
-  Heading,
-  Link,
-  Paragraph,
-  Textarea,
-  ToggleGroup,
-} 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' size='2xs'>
-          Oppdater fargetema
-        </Heading>
-
-        <Paragraph 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.Root
-          className='modes'
-          defaultValue='light'
-          name='toggle-group-nuts'
-          size='sm'
-          onChange={(e) => 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.Root>
-        <Textarea
-          className='textarea'
-          cols={40}
-          rows={7}
-          placeholder='Lim inn JSON her'
-          description=''
-          error={errorText}
-          label='JSON'
-          size='sm'
-          value={jsonText}
-          onChange={(e) => setJsonText(e.target.value)}
-        />
-        <Button onClick={() => onSubmit()} 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/.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-plugin/manifest.json b/plugins/figma/manifest.json
similarity index 68%
rename from plugins/figma-plugin/manifest.json
rename to plugins/figma/manifest.json
index afe8136196..98cb13291b 100644
--- a/plugins/figma-plugin/manifest.json
+++ b/plugins/figma/manifest.json
@@ -1,5 +1,5 @@
 {
-  "name": "Designsystemet (beta)",
+  "name": "Designsystemet Tokens",
   "id": "1382044395533039221",
   "api": "1.0.0",
   "main": "dist/plugin.js",
@@ -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 51%
rename from plugins/figma-plugin/package.json
rename to plugins/figma/package.json
index aae91c0eda..eb728dc62f 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,25 +15,33 @@
     "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:^",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.0"
+    "@isomorphic-git/lightning-fs": "^4.6.0",
+    "@react-awesome/use-click-outside": "^0.0.3",
+    "@types/node": "^22.3.0",
+    "isomorphic-git": "^1.27.0",
+    "lucide-react": "^0.399.0",
+    "react": "^18.2.0",
+    "react-color": "^2.19.3",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
+    "react-router-dom": "^6.23.1",
+    "zustand": "^4.5.4"
   },
   "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",
-    "rollup": "^4.20.0",
-    "vite": "^5.3.5",
-    "vite-plugin-generate-file": "^0.2.0",
-    "vite-plugin-react-rich-svg": "^1.1.1",
+    "npm-run-all2": "^6.2.0",
+    "postcss": "^8.4.21",
+    "vite-plugin-generate-file": "^0.1.1",
+    "vite-plugin-react-rich-svg": "^1.0.0",
     "vite-plugin-singlefile": "^2.0.2"
   }
 }
diff --git a/plugins/figma/src/common/dummyFonts.ts b/plugins/figma/src/common/dummyFonts.ts
new file mode 100644
index 0000000000..7480e5cc9f
--- /dev/null
+++ b/plugins/figma/src/common/dummyFonts.ts
@@ -0,0 +1,18 @@
+export const getDummyFonts = () => {
+  return [
+    {
+      name: 'Primary',
+      fontName: 'Inter',
+      regularWeight: 'Regular',
+      boldWeight: 'Medium',
+      extraBoldWeight: 'Semi Bold',
+    },
+    {
+      name: 'Secondary',
+      fontName: 'Open Sans',
+      regularWeight: 'Regular',
+      boldWeight: 'SemiBold',
+      extraBoldWeight: 'Bold',
+    },
+  ];
+};
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..1200976410
--- /dev/null
+++ b/plugins/figma/src/common/store.ts
@@ -0,0 +1,104 @@
+import { create } from 'zustand';
+import { subscribeWithSelector } from 'zustand/middleware';
+
+import type { FigmaModeName } from './types';
+
+export type ColorInfo = {
+  1: string;
+  2: string;
+  3: string;
+  4: string;
+  5: string;
+  6: string;
+  7: string;
+  8: string;
+  9: string;
+  10: string;
+  11: string;
+  12: string;
+  13: string;
+  'contrast-1': string;
+  'contrast-2': 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;
+  fonts: FontTheme;
+};
+
+export type FontTheme = FontInfo[];
+
+export type FontInfo = {
+  name: string;
+  regularWeight: string;
+  boldWeight: string;
+  extraBoldWeight: string;
+};
+
+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 };
+};
+
+export type FontStore = {
+  name: string;
+  styles: string[];
+};
+
+type ColorStore = {
+  themes: StoreThemes;
+  loading: boolean;
+  fonts: FontStore[];
+  setThemes: (themes: StoreThemes) => void;
+  setLoading: (loading: boolean) => void;
+  setFonts: (fonts: FontStore[]) => void;
+};
+
+export const useThemeStore = create(
+  subscribeWithSelector<ColorStore>((set) => ({
+    themes: [],
+    loading: false,
+    fonts: [],
+    setThemes: (themes) => set({ themes }),
+    setLoading: (loading) => set({ loading }),
+    setFonts: (fonts) => set({ fonts }),
+  })),
+);
diff --git a/plugins/figma-plugin/src/common/types.ts b/plugins/figma/src/common/types.ts
similarity index 67%
rename from plugins/figma-plugin/src/common/types.ts
rename to plugins/figma/src/common/types.ts
index b6bd570141..94cc2c64d2 100644
--- a/plugins/figma-plugin/src/common/types.ts
+++ b/plugins/figma/src/common/types.ts
@@ -7,3 +7,5 @@ export type JsonInput = {
     brand3: object;
   };
 };
+
+export type FigmaModeName = 'theme' | 'theme2' | 'theme3' | 'theme4';
diff --git a/plugins/figma/src/common/utils.ts b/plugins/figma/src/common/utils.ts
new file mode 100644
index 0000000000..d43f3294f3
--- /dev/null
+++ b/plugins/figma/src/common/utils.ts
@@ -0,0 +1,82 @@
+import type { ThemeInfo } from '@digdir/designsystemet/color';
+
+import type { ThemeInfo as Test } from './store';
+
+export const 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;
+};
+
+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('')
+  );
+};
+
+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/fonts.ts b/plugins/figma/src/plugin/figma/fonts.ts
new file mode 100644
index 0000000000..a6d04bb0e6
--- /dev/null
+++ b/plugins/figma/src/plugin/figma/fonts.ts
@@ -0,0 +1,24 @@
+export const getFonts = async () => {
+  type FontTest = {
+    name: string;
+    styles: string[];
+  };
+
+  const fonts = await figma.listAvailableFontsAsync();
+  const fontArray: FontTest[] = [];
+
+  for (const [index, font] of fonts.entries()) {
+    if (index > 0 && fontArray[fontArray.length - 1].name === font.fontName.family) {
+      const found = fontArray.find((f) => f.name === font.fontName.family);
+      if (found) {
+        found.styles.push(font.fontName.style);
+      }
+      continue;
+    }
+    fontArray.push({
+      name: font.fontName.family,
+      styles: [font.fontName.style],
+    });
+  }
+  return fontArray;
+};
diff --git a/plugins/figma/src/plugin/figma/getVariables.ts b/plugins/figma/src/plugin/figma/getVariables.ts
new file mode 100644
index 0000000000..ec9a0ead1d
--- /dev/null
+++ b/plugins/figma/src/plugin/figma/getVariables.ts
@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+
+import { rgbToHex } from '@common/utils';
+
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+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/json.ts b/plugins/figma/src/plugin/figma/json.ts
new file mode 100644
index 0000000000..ec205154ae
--- /dev/null
+++ b/plugins/figma/src/plugin/figma/json.ts
@@ -0,0 +1,89 @@
+/* eslint-disable no-prototype-builtins */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { rgbToHex } from '@common/utils';
+
+export const generateJson = async () => {
+  const variables = await figma.variables.getLocalVariablesAsync();
+  const collections = await figma.variables.getLocalVariableCollectionsAsync();
+  const modeCollection = collections.find(
+    (collection) => collection.name === 'Mode',
+  );
+
+  const obj2: Record<string, any> = {};
+
+  for (const collection of collections) {
+    if (!obj2[collection.name]) {
+      obj2[collection.name] = {};
+    }
+    for (const collectionMode of collection.modes) {
+      if (!obj2[collection.name][collectionMode.name]) {
+        obj2[collection.name][collectionMode.name] = {};
+      }
+
+      for (const variable of variables) {
+        if (modeCollection && collection.id === variable.variableCollectionId) {
+          const name = variable.name;
+          const nameArr = name.split('/');
+          let obj: Record<string, any> =
+            obj2[collection.name][collectionMode.name]; // Modified line
+
+          for (let i = 0; i < nameArr.length; i++) {
+            const key = nameArr[i];
+            if (obj[key] === undefined) {
+              obj[key] = {};
+            }
+            if (key === nameArr[nameArr.length - 1]) {
+              let value;
+              if (
+                variable.valuesByMode[collectionMode.modeId].hasOwnProperty(
+                  'type',
+                ) &&
+                variable.valuesByMode[collectionMode.modeId].type ===
+                  'VARIABLE_ALIAS'
+              ) {
+                value =
+                  '{' +
+                  variables.find(
+                    (v) =>
+                      v.id === variable.valuesByMode[collectionMode.modeId].id,
+                  ).name +
+                  '}';
+              } else if (variable.resolvedType === 'COLOR') {
+                value = rgbToHex({
+                  r: variable.valuesByMode[collectionMode.modeId].r,
+                  g: variable.valuesByMode[collectionMode.modeId].g,
+                  b: variable.valuesByMode[collectionMode.modeId].b,
+                });
+              } else {
+                value = variable.valuesByMode[collectionMode.modeId];
+              }
+              obj[key] = {
+                value: value,
+                type: variable.resolvedType.toLocaleLowerCase(),
+              };
+            }
+            obj = obj[key];
+          }
+        }
+      }
+    }
+  }
+
+  const filesArr = [];
+  // loop through first keys of obj2 with Object.entries
+  for (const [firstKey, firstValue] of Object.entries(obj2)) {
+    const path = firstKey;
+    for (const [secondKey, secondValue] of Object.entries(firstValue)) {
+      filesArr.push({
+        path: 'design-tokens/' + path + `/${secondKey}.json`,
+        content: JSON.stringify(secondValue, null, 2),
+      });
+    }
+  }
+
+  return filesArr;
+};
diff --git a/plugins/figma/src/plugin/figma/themes.ts b/plugins/figma/src/plugin/figma/themes.ts
new file mode 100644
index 0000000000..88f2b5d60d
--- /dev/null
+++ b/plugins/figma/src/plugin/figma/themes.ts
@@ -0,0 +1,248 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+
+import { hexToRgb, type ColorType } from '@digdir/designsystemet/color';
+
+import type { ColorIndex, ColorTheme, StoreThemes } from '../../common/store';
+import { rgbToHex } from '../../common/utils';
+import { getDummyTheme } from '../../common/dummyTheme';
+import { getDummyFonts } from '../../common/dummyFonts';
+
+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(),
+        fonts: getDummyFonts(),
+      });
+    }
+  }
+
+  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 ColorType;
+      const ThemeIndex = nameSplitArr[2] as ColorIndex;
+
+      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[ThemeType][modeName][ThemeIndex] = HEX;
+        }
+      }
+    }
+  }
+
+  return themes;
+};
+
+export const addTheme = async (theme: ColorTheme, name: string) => {
+  const collections = await figma.variables.getLocalVariableCollectionsAsync();
+  let themeModeId = '';
+  const modeCollection = collections.find(
+    (collection) => collection.name === 'Mode',
+  );
+
+  for (const collection of collections) {
+    if (collection.name === 'Theme') {
+      themeModeId = collection.addMode(name);
+    }
+  }
+
+  for (const [key] of Object.entries(theme.accent.light)) {
+    if (modeCollection) {
+      const types = ['accent', 'neutral', 'brand1', 'brand2', 'brand3'];
+      for (const type of types) {
+        const lightRGB = hexToRgb(
+          theme[type as ColorType]['light'][key as ColorIndex],
+          '1',
+        );
+        const darkRGB = hexToRgb(
+          theme[type as ColorType]['dark'][key as ColorIndex],
+          '1',
+        );
+
+        const variable = figma.variables.createVariable(
+          name.toLocaleLowerCase() + '/' + type + '/' + key,
+          modeCollection,
+          'COLOR',
+        );
+
+        if (lightRGB && darkRGB) {
+          variable.setValueForMode(modeCollection.modes[0].modeId, lightRGB);
+          variable.setValueForMode(modeCollection.modes[1].modeId, darkRGB);
+        }
+      }
+    }
+  }
+
+  const variables = await figma.variables.getLocalVariablesAsync('COLOR');
+  for (const variable of variables) {
+    if (variable.name.startsWith('color')) {
+      const split = variable.name.split('/');
+      const themeType = split[1];
+      const themIndex = split[2];
+      if (themIndex.length < 5) {
+        const v = variables.find(
+          (v) =>
+            v.name ===
+            name.toLocaleLowerCase() + '/' + themeType + '/' + themIndex,
+        );
+        if (v) {
+          const alias = figma.variables.createVariableAlias(v);
+          if (alias) {
+            variable.setValueForMode(themeModeId, alias);
+          }
+        }
+      }
+    }
+  }
+};
+
+export const deleteTheme = async (themeModeId: string, themeId: string) => {
+  const collections = await figma.variables.getLocalVariableCollectionsAsync();
+  const themeCollection = collections.find(
+    (collection) => collection.name === 'Theme',
+  );
+
+  if (themeCollection) themeCollection.removeMode(themeModeId);
+
+  const variables = await figma.variables.getLocalVariablesAsync('COLOR');
+  for (const variable of variables) {
+    if (variable.name.startsWith(themeId + '/')) {
+      variable.remove();
+    }
+  }
+};
+export const renameTheme = async (
+  newName: string,
+  themeModeId: string,
+  themeId: string,
+) => {
+  const collections = await figma.variables.getLocalVariableCollectionsAsync();
+
+  const modeCollection = collections.find(
+    (collection) => collection.name === 'Mode',
+  );
+  const themeCollection = collections.find(
+    (collection) => collection.name === 'Theme',
+  );
+  const lightModeId = modeCollection?.modes[0].modeId;
+  const darkModeId = modeCollection?.modes[1].modeId;
+
+  if (themeCollection && newName) {
+    themeCollection.renameMode(themeModeId, newName);
+  }
+
+  let variables = await figma.variables.getLocalVariablesAsync('COLOR');
+
+  for (const variable of variables) {
+    const nameSplitArr = variable.name.split('/');
+    const ThemeType = nameSplitArr[1] as ColorType;
+    const ThemeIndex = nameSplitArr[2] as ColorIndex;
+
+    if (variable.name.startsWith(themeId + '/')) {
+      let lightRGB = { r: 0, g: 0, b: 0 };
+      let darkRGB = { r: 0, g: 0, b: 0 };
+
+      for (const [key, value] of Object.entries(variable.valuesByMode)) {
+        if (key === lightModeId) {
+          lightRGB = value as RGB;
+        } else if (key === darkModeId) {
+          darkRGB = value as RGB;
+        }
+      }
+
+      if (modeCollection) {
+        const newVariable = figma.variables.createVariable(
+          newName.toLocaleLowerCase() + '/' + ThemeType + '/' + ThemeIndex,
+          modeCollection,
+          'COLOR',
+        );
+        if (lightRGB && darkRGB) {
+          newVariable.setValueForMode(modeCollection.modes[0].modeId, lightRGB);
+          newVariable.setValueForMode(modeCollection.modes[1].modeId, darkRGB);
+        }
+      }
+    }
+  }
+
+  variables = await figma.variables.getLocalVariablesAsync('COLOR');
+
+  for (const variable of variables) {
+    if (variable.name.startsWith('color')) {
+      const split = variable.name.split('/');
+      const themeType = split[1];
+      const themIndex = split[2];
+      if (themIndex.length < 5) {
+        const v = variables.find(
+          (v) =>
+            v.name ===
+            newName.toLocaleLowerCase() + '/' + themeType + '/' + themIndex,
+        );
+        if (v) {
+          const alias = figma.variables.createVariableAlias(v);
+          if (alias) {
+            variable.setValueForMode(themeModeId, alias);
+          }
+        }
+      }
+    }
+    if (variable.name.startsWith(themeId + '/')) {
+      variable.remove();
+    }
+  }
+};
+
+export const updateTheme = async () => {
+  let variables = await figma.variables.getLocalVariablesAsync('COLOR');
+  const collections = await figma.variables.getLocalVariableCollectionsAsync();
+  const modeCollection = collections.find((col) => col.name === 'Mode');
+  const lightModeId = modeCollection?.modes[0].modeId;
+  const themeCollection = collections.find((col) => col.name === 'Theme');
+  const test = themeCollection?.modes[0].modeId;
+
+  for (const variable of variables) {
+    if (variable.name === 'digdir/brand1/3' && lightModeId) {
+      variable.setValueForMode(lightModeId, { r: 0, g: 0, b: 0 });
+    }
+  }
+  const v = variables.find((v) => v.name === 'color/brand1/3');
+  const ve = variables.find((v) => v.name === 'digdir/brand1/3');
+  if (v && ve && lightModeId && test) {
+    const alias = figma.variables.createVariableAlias(ve);
+    if (alias) {
+      v.setValueForMode(test, alias);
+    }
+  }
+};
diff --git a/plugins/figma/src/plugin/figma/updateVariables.ts b/plugins/figma/src/plugin/figma/updateVariables.ts
new file mode 100644
index 0000000000..54dda14325
--- /dev/null
+++ b/plugins/figma/src/plugin/figma/updateVariables.ts
@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+
+import type { ColorType } from '@digdir/designsystemet/color';
+import { hexToRgb } from '@digdir/designsystemet/color';
+
+import type { ColorIndex, StoreThemes } from '../../common/store';
+import type { FigmaModeName } from '../../common/types';
+import { rgbToHex } from '../../common/utils';
+
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+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 ColorType;
+  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) {
+      const lightRGB = hexToRgb(newLightHex, '1');
+      if (lightRGB) {
+        variable.setValueForMode(lightModeId, lightRGB);
+      }
+    }
+    if (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');
+
+  if (modeCollection && themeCollection) {
+    const lightModeId: string = modeCollection.modes[0].modeId;
+    const darkModeId: string = modeCollection.modes[1].modeId;
+    const variables = await figma.variables.getLocalVariablesAsync('COLOR');
+    for (const variable of variables) {
+      updateColors(
+        themes,
+        variable,
+        lightModeId,
+        darkModeId,
+        modeCollection,
+        themeCollection,
+        variables,
+      );
+    }
+  }
+};
diff --git a/plugins/figma/src/plugin/plugin.ts b/plugins/figma/src/plugin/plugin.ts
new file mode 100644
index 0000000000..44993ce43d
--- /dev/null
+++ b/plugins/figma/src/plugin/plugin.ts
@@ -0,0 +1,104 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+
+import type { ColorTheme, StoreThemes } from '../common/store';
+
+import {
+  addTheme,
+  getThemes,
+  deleteTheme,
+  renameTheme,
+  updateTheme,
+} from './figma/themes';
+import { getVariables } from './figma/getVariables';
+import { updateVariables } from './figma/updateVariables';
+import { generateJson } from './figma/json';
+import { getFonts } from './figma/fonts';
+
+figma.showUI(__html__, { width: 710, height: 550, themeColors: true });
+
+figma.ui.onmessage = (msg: {
+  type: string;
+  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 'updateVariables': {
+        if (msg.themes) await updateVariables(msg.themes);
+        figma.ui.postMessage({ type: 'tomato' });
+        break;
+      }
+
+      case 'getThemes': {
+        const themes = await getThemes();
+        console.log('themes - ', themes);
+        figma.ui.postMessage({ type: 'getThemes', themes: themes });
+        break;
+      }
+      case 'getVariables': {
+        const variables = await getVariables();
+        figma.ui.postMessage({ type: '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..18da8e3ea3
--- /dev/null
+++ b/plugins/figma/src/ui/App.css
@@ -0,0 +1,119 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+
+:root {
+  --figma-color-text: #e1e3e5;
+  --figma-color-text-secondary: #9ea3ab;
+  --figma-color-bg-secondary: #2d2d2d;
+}
+
+* {
+  font-feature-settings: 'cv05' 1;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  background-color: #202020;
+  color: var(--figma-color-text);
+  font-size: 14px;
+}
+
+[data-ds-color-mode='dark'] {
+  --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;
+}
+
+.links {
+  display: flex;
+  border-bottom: 1px solid var(--figma-color-border);
+  padding: 0 16px;
+}
+
+.link {
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  color: var(--figma-color-text-secondary);
+  margin-right: 20px;
+  font-weight: 400;
+  font-size: 14px;
+}
+
+.active {
+  color: var(--figma-color-text);
+  font-weight: 500;
+}
+
+.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;
+}
+
+.ds-spinner__background {
+  stroke: var(--figma-color-text);
+  stroke-width: 3px;
+}
+
+.ds-spinner__circle {
+  stroke: #494949;
+}
+
+.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;
+}
+
+.toast {
+  background-color: #3d3d3d !important;
+  color: white !important;
+}
+
+.select {
+  font-size: 14px;
+  height: 34px;
+}
diff --git a/plugins/figma/src/ui/app.tsx b/plugins/figma/src/ui/app.tsx
new file mode 100644
index 0000000000..847b5cc782
--- /dev/null
+++ b/plugins/figma/src/ui/app.tsx
@@ -0,0 +1,136 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import '@digdir/designsystemet-theme';
+import '@digdir/designsystemet-css';
+
+import './App.css';
+import { Routes, Route, NavLink, Navigate, useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
+
+import type { StoreThemes } from '../common/store';
+import { useThemeStore } from '../common/store';
+
+import PageTwo from './pages/PageTwo/PageTwo';
+import PageThree from './pages/pageThree/PageThree';
+import { Footer } from './components/Footer/Footer';
+import Themes from './pages/Themes/Themes';
+import Theme from './pages/Theme/Theme';
+import Colors from './pages/Colors/Colors';
+import AddTheme from './pages/AddTheme/AddTheme';
+import { Github } from './pages/Github/Github';
+import { commitToGithub } from './utils/github';
+import Fonts from './pages/Fonts/Fonts';
+import Font from './pages/Font/Font';
+
+function App() {
+  const setThemes = useThemeStore((state) => state.setThemes);
+  const navigate = useNavigate();
+  const setLoading = useThemeStore((state) => state.setLoading);
+  const setFonts = useThemeStore((state) => state.setFonts);
+
+  useEffect(() => {
+    parent.postMessage({ pluginMessage: { type: 'getThemes' } }, '*');
+    parent.postMessage({ pluginMessage: { type: 'getFonts' } }, '*');
+    onmessage = (event: {
+      data: {
+        pluginMessage: {
+          type: string;
+          themes: StoreThemes;
+          json: [];
+          fonts: [];
+        };
+      };
+    }) => {
+      if (event.data.pluginMessage.type === 'getThemes') {
+        setThemes(event.data.pluginMessage.themes);
+      } else if (event.data.pluginMessage.type === 'geThemesAndRedirect') {
+        navigate('/');
+        parent.postMessage({ pluginMessage: { type: 'getThemes' } }, '*');
+      } else if (event.data.pluginMessage.type === 'getFonts') {
+        setFonts(event.data.pluginMessage.fonts);
+      } else if (event.data.pluginMessage.type === 'generateJson') {
+        commitToGithub(event.data.pluginMessage.json)
+          .then(() => {
+            console.log('finish');
+          })
+          .catch((e) => {
+            console.log(e);
+          });
+      }
+      console.log('finish');
+      setLoading(false);
+    };
+  }, []);
+
+  return (
+    <div data-ds-color-mode='dark'>
+      <div className='links'>
+        <NavLink
+          className={({ isActive }) => (isActive ? 'link active' : 'link')}
+          to='/themes'
+        >
+          Mine temaer
+        </NavLink>
+        <NavLink
+          className='link'
+          to='/settings'
+        >
+          Innstillinger
+        </NavLink>
+      </div>
+
+      <div className='content'>
+        <Routes>
+          <Route
+            path='/'
+            element={
+              <Navigate
+                to='/themes'
+                replace
+              />
+            }
+          />
+          <Route
+            path='/fonts'
+            element={<PageTwo />}
+          />
+          <Route
+            path='/settings'
+            element={<PageThree />}
+          />
+          <Route
+            path='/themes'
+            element={<Themes />}
+          />
+
+          <Route
+            path='/themes/:themeId/colors'
+            element={<Colors />}
+          />
+          <Route
+            path='/themes/:themeId/fonts'
+            element={<Fonts />}
+          />
+          <Route
+            path='/themes/:themeId/fonts/fontId'
+            element={<Font />}
+          />
+          <Route
+            path='/themes/:themeId'
+            element={<Theme />}
+          />
+          <Route
+            path='/theme/add'
+            element={<AddTheme />}
+          />
+          <Route
+            path='/github'
+            element={<Github />}
+          />
+        </Routes>
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export default App;
diff --git a/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.module.css b/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.module.css
new file mode 100644
index 0000000000..ca60f49511
--- /dev/null
+++ b/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.module.css
@@ -0,0 +1,32 @@
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.back {
+  color: inherit;
+  text-decoration: none;
+  height: 26px;
+  width: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: -8px;
+  border-radius: 50%;
+  transition: 0.1s all;
+}
+
+.back:hover {
+  background-color: #444;
+}
+
+.back svg {
+  margin-left: -2px;
+}
+
+.text {
+  font-size: 14px;
+  font-weight: 500;
+  margin-top: -2px;
+}
diff --git a/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.tsx b/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 0000000000..431b328c1c
--- /dev/null
+++ b/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,25 @@
+import { Link } from 'react-router-dom';
+import { ChevronLeft } from 'lucide-react';
+import cl from 'clsx/lite';
+
+import classes from './Breadcrumbs.module.css';
+
+type BreadcrumbsProps = {
+  text: string;
+  url: string;
+  className?: string;
+};
+
+export const Breadcrumbs = ({ text, url, className }: BreadcrumbsProps) => {
+  return (
+    <div className={cl(classes.breadcrumbs, className)}>
+      <Link
+        to={url}
+        className={classes.back}
+      >
+        <ChevronLeft size={18} />
+      </Link>
+      <div className={classes.text}>{text}</div>
+    </div>
+  );
+};
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..b79a02edad
--- /dev/null
+++ b/plugins/figma/src/ui/components/Card/Card.module.css
@@ -0,0 +1,42 @@
+.card {
+  background-color: var(--figma-color-bg-secondary);
+  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 all;
+}
+
+.card:hover {
+  box-shadow: 0 0 0 1px #777;
+}
+
+.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 #3a3a3a;
+}
+
+.icon {
+  color: var(--figma-color-text-secondary);
+}
+
+.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..f6c11d04c7
--- /dev/null
+++ b/plugins/figma/src/ui/components/Card/Card.tsx
@@ -0,0 +1,42 @@
+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={classes.card}
+    >
+      {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/src/ui/components/CardButton/CardButton.module.css b/plugins/figma/src/ui/components/CardButton/CardButton.module.css
new file mode 100644
index 0000000000..906a564c62
--- /dev/null
+++ b/plugins/figma/src/ui/components/CardButton/CardButton.module.css
@@ -0,0 +1,16 @@
+.cardBtn {
+  height: 100px;
+  width: 150px;
+  border: 2px solid var(--figma-color-border);
+  color: var(--figma-color-text-secondary);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.1s all;
+}
+
+.cardBtn:hover {
+  border-color: var(--figma-color-border-hover);
+  color: var(--figma-color-text);
+}
diff --git a/plugins/figma/src/ui/components/CardButton/CardButton.tsx b/plugins/figma/src/ui/components/CardButton/CardButton.tsx
new file mode 100644
index 0000000000..f62511ab46
--- /dev/null
+++ b/plugins/figma/src/ui/components/CardButton/CardButton.tsx
@@ -0,0 +1,14 @@
+import { Plus } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+import classes from './CardButton.module.css';
+export const CardButton = ({ url }: { url: string }) => {
+  return (
+    <Link
+      to={url}
+      className={classes.cardBtn}
+    >
+      <Plus />
+    </Link>
+  );
+};
diff --git a/plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.module.css b/plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.module.css
new file mode 100644
index 0000000000..a938895611
--- /dev/null
+++ b/plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.module.css
@@ -0,0 +1,40 @@
+.codeSnippet {
+  position: relative;
+  max-width: 100%;
+  overflow-x: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.copyContainer {
+  position: sticky;
+  top: 0;
+  left: 0;
+  height: calc(100% - 1px);
+  width: calc(100% - 1px);
+  float: left;
+  margin-right: -100%;
+  pointer-events: none;
+}
+
+.icon {
+  pointer-events: auto;
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  height: 40px;
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #3b434d;
+  color: white;
+  border-radius: var(--ds-border-radius-md);
+  border: none;
+  transition: 0.15s all;
+  cursor: pointer;
+}
+
+.icon:hover {
+  background-color: #575e68;
+}
diff --git a/plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.tsx b/plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.tsx
new file mode 100644
index 0000000000..2dd17abc04
--- /dev/null
+++ b/plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.tsx
@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react';
+import { FilesIcon } from '@navikt/aksel-icons';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { format } from 'prettier/standalone.js';
+import * as prettierMarkdown from 'prettier/plugins/markdown.js';
+import * as prettierHtml from 'prettier/plugins/html.js';
+import * as prettierCSS from 'prettier/plugins/postcss.js';
+import * as prettierTypescript from 'prettier/plugins/typescript.js';
+import * as prettierEstree from 'prettier/plugins/estree';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { Tooltip } from '@digdir/designsystemet-react';
+
+import classes from './CodeSnippet.module.css';
+
+const plugins = [
+  prettierTypescript,
+  prettierEstree,
+  prettierCSS,
+  prettierMarkdown,
+  prettierHtml,
+];
+
+type CodeSnippetProps = {
+  language?: 'css' | 'html' | 'ts' | 'markdown' | 'js';
+  children?: string;
+};
+
+export const CodeSnippet = ({
+  language = 'markdown',
+  children = '',
+}: CodeSnippetProps) => {
+  const [toolTipText, setToolTipText] = useState('Kopier');
+  const [snippet, setSnippet] = useState('');
+
+  useEffect(() => {
+    async function formatSnippet(
+      children: string,
+      language: CodeSnippetProps['language'],
+    ) {
+      try {
+        const formatted = await format(children, { parser: language, plugins });
+        setSnippet(formatted);
+      } catch (error) {
+        console.error('Failed formatting code snippet:', error);
+        setSnippet(children);
+      }
+    }
+    void formatSnippet(children, language);
+
+    return () => {
+      setSnippet(children);
+    };
+  }, [children, language]);
+
+  const onButtonClick = () => {
+    setToolTipText('Kopiert!');
+    navigator.clipboard.writeText(children).catch((reason) => {
+      throw Error(String(reason));
+    });
+  };
+
+  return (
+    <div className={classes.codeSnippet}>
+      {snippet && (
+        <>
+          <div className={classes.copyContainer}>
+            <Tooltip
+              content={toolTipText}
+              className={classes.tooltip}
+              portal={false}
+              placement='top'
+            >
+              <button
+                onMouseEnter={() => setToolTipText('Kopier')}
+                onClick={() => onButtonClick()}
+                className={classes.icon}
+              >
+                <FilesIcon fontSize={22} />
+              </button>
+            </Tooltip>
+          </div>
+          <SyntaxHighlighter
+            style={oneDark}
+            language={language}
+            customStyle={{
+              fontSize: '13px',
+              margin: 0,
+              padding: '15px',
+            }}
+          >
+            {snippet}
+          </SyntaxHighlighter>
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/plugins/figma/src/ui/components/ColorPicker/ColorPicker.module.css b/plugins/figma/src/ui/components/ColorPicker/ColorPicker.module.css
new file mode 100644
index 0000000000..729fb2ca4b
--- /dev/null
+++ b/plugins/figma/src/ui/components/ColorPicker/ColorPicker.module.css
@@ -0,0 +1,54 @@
+.container {
+  flex-grow: 1;
+  flex-basis: 0;
+  min-width: 0;
+}
+
+.picker {
+  background-color: var(--figma-color-bg-secondary);
+  border-radius: 4px;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  border: none;
+  color: inherit;
+  width: 100%;
+  cursor: pointer;
+  transition: 0.15s all;
+}
+
+.picker:hover {
+  box-shadow: 0 0 0 1px #777;
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  text-align: left;
+}
+
+.circle {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  margin-right: 8px;
+  border: 3px solid var(--figma-color-bg-secondary);
+  outline: 1px solid var(--figma-color-text-secondary);
+}
+
+.hex {
+  color: var(--figma-color-text-secondary);
+}
+
+.popup {
+  position: absolute;
+  display: none;
+  z-index: 5;
+  left: 16px;
+}
+
+.show {
+  display: block;
+}
diff --git a/plugins/figma/src/ui/components/ColorPicker/ColorPicker.tsx b/plugins/figma/src/ui/components/ColorPicker/ColorPicker.tsx
new file mode 100644
index 0000000000..48fc728960
--- /dev/null
+++ b/plugins/figma/src/ui/components/ColorPicker/ColorPicker.tsx
@@ -0,0 +1,59 @@
+import { ChromePicker } from 'react-color';
+import cl from 'clsx';
+import { useRef, useState } from 'react';
+import { useClickOutside } from '@react-awesome/use-click-outside';
+import type { CssColor } from '@adobe/leonardo-contrast-colors';
+
+import classes from './ColorPicker.module.css';
+
+type ColorPickerProps = {
+  title: string;
+  color: CssColor;
+  onColorChanged?: ((color: CssColor) => void) | undefined;
+};
+
+export const ColorPicker = ({
+  title,
+  color,
+  onColorChanged,
+}: ColorPickerProps) => {
+  const [showModal, setShowModal] = useState(false);
+  const handleClick = () => {
+    setShowModal(!showModal);
+  };
+  const ref = useRef(null);
+
+  useClickOutside(ref.current, () => {
+    setShowModal(false);
+  });
+
+  return (
+    <div
+      className={classes.container}
+      ref={ref}
+    >
+      <button
+        className={classes.picker}
+        onClick={() => handleClick()}
+      >
+        <div
+          className={classes.circle}
+          style={{ backgroundColor: color }}
+        ></div>
+        <div className={classes.text}>
+          <span className={classes.name}>{title}</span>
+          <span className={classes.hex}>{color}</span>
+        </div>
+      </button>
+
+      <div className={cl(classes.popup, showModal && classes.show)}>
+        <ChromePicker
+          onChangeComplete={({ hex }: { hex: string }) => {
+            onColorChanged && onColorChanged(hex as CssColor);
+          }}
+          color={color}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/plugins/figma/src/ui/components/ColorPickers/ColorPickers.module.css b/plugins/figma/src/ui/components/ColorPickers/ColorPickers.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/plugins/figma/src/ui/components/ColorPickers/ColorPickers.tsx b/plugins/figma/src/ui/components/ColorPickers/ColorPickers.tsx
new file mode 100644
index 0000000000..987c5c1db7
--- /dev/null
+++ b/plugins/figma/src/ui/components/ColorPickers/ColorPickers.tsx
@@ -0,0 +1,83 @@
+import { ColorPicker } from '../ColorPicker/ColorPicker';
+
+export const ColorPickers = () => {
+  return (
+    <div>
+      <ColorPicker
+        color={themes['theme'].accent.light?.[9] as CssColor}
+        title='Accent'
+        onColorChanged={(color: CssColor) => {
+          const theme = generateThemeForColor(color);
+          const numberTheme = Tomato(theme);
+          setThemes({
+            ...themes,
+            [test || 'theme']: {
+              ...themes[test || 'theme'],
+              accent: numberTheme,
+            },
+          });
+        }}
+      />
+      <ColorPicker
+        color={themes[test || 'theme'].neutral.light?.[9] as CssColor}
+        title='Neutral'
+        onColorChanged={(color: CssColor) => {
+          const theme = generateThemeForColor(color);
+          const numberTheme = Tomato(theme);
+          setThemes({
+            ...themes,
+            [test || 'theme']: {
+              ...themes[test || 'theme'],
+              brand3: numberTheme,
+            },
+          });
+        }}
+      />
+      <ColorPicker
+        color={themes[test || 'theme'].brand1.light?.[9] as CssColor}
+        title='Brand 1'
+        onColorChanged={(color: CssColor) => {
+          const theme = generateThemeForColor(color);
+          const numberTheme = Tomato(theme);
+          setThemes({
+            ...themes,
+            [test || 'theme']: {
+              ...themes[test || 'theme'],
+              brand1: numberTheme,
+            },
+          });
+        }}
+      />
+      <ColorPicker
+        color={themes[test || 'theme'].brand2.light?.[9] as CssColor}
+        title='Brand 2'
+        onColorChanged={(color: CssColor) => {
+          const theme = generateThemeForColor(color);
+          const numberTheme = Tomato(theme);
+          setThemes({
+            ...themes,
+            [test || 'theme']: {
+              ...themes[test || 'theme'],
+              brand2: numberTheme,
+            },
+          });
+        }}
+      />
+      <ColorPicker
+        color={themes[test || 'theme'].brand3.light?.[9] as CssColor}
+        title='Brand 3'
+        onColorChanged={(color: CssColor) => {
+          const theme = generateThemeForColor(color);
+          const numberTheme = Tomato(theme);
+          setThemes({
+            ...themes,
+            [test || 'theme']: {
+              ...themes[test || 'theme'],
+              brand3: numberTheme,
+            },
+          });
+        }}
+      />
+    </div>
+  );
+};
diff --git a/plugins/figma/src/ui/components/Footer/Footer.module.css b/plugins/figma/src/ui/components/Footer/Footer.module.css
new file mode 100644
index 0000000000..c3b4f23279
--- /dev/null
+++ b/plugins/figma/src/ui/components/Footer/Footer.module.css
@@ -0,0 +1,90 @@
+.footer {
+  position: absolute;
+  z-index: 10;
+  background-color: var(--figma-background);
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.top {
+  padding: 12px 16px;
+  border-top: 1px solid var(--figma-color-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.topLeft {
+}
+
+.btn {
+  font-size: 14px;
+  padding: 7px 12px;
+  background-color: #b9b9b9;
+  color: black;
+  font-weight: 500;
+  transition: 0.1s all;
+}
+
+.btn:hover {
+  background-color: #d4d4d4;
+}
+
+.github {
+  color: var(--figma-color-text-secondary);
+  font-size: 14px;
+  gap: 8px;
+  margin-left: -11px;
+  font-weight: 500;
+  transition: 0.1s all;
+}
+
+.github:hover {
+  color: var(--figma-color-text);
+  background-color: transparent;
+}
+
+.bottom {
+  height: 44px;
+  border-top: 1px solid var(--figma-color-border);
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bottomLeft {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.bottomRight {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.version {
+  font-size: 14px;
+  color: var(--figma-color-text-secondary);
+  font-weight: 500;
+  padding: 3px 6px;
+  border-radius: 2px;
+}
+
+.feedback {
+  color: var(--figma-color-text-secondary);
+  padding: 3px;
+  border-radius: 1px;
+}
+
+.feedback:hover {
+  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..980682ae63
--- /dev/null
+++ b/plugins/figma/src/ui/components/Footer/Footer.tsx
@@ -0,0 +1,104 @@
+import { ChatElipsisIcon } from '@navikt/aksel-icons';
+import { Button, Spinner, Tooltip } from '@digdir/designsystemet-react';
+import { Code, Github } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+import packageJson from '../../../../package.json';
+import { useThemeStore } from '../../../common/store';
+
+import classes from './Footer.module.css';
+
+export const Footer = () => {
+  const themes = useThemeStore((state) => state.themes);
+  const loading = useThemeStore((state) => state.loading);
+  const setLoading = useThemeStore((state) => state.setLoading);
+
+  const handleClick = () => {
+    setLoading(true);
+    setTimeout(() => {
+      parent.postMessage(
+        {
+          pluginMessage: {
+            type: 'updateVariables',
+            themes: themes,
+          },
+        },
+        '*',
+      );
+    }, 500);
+  };
+
+  return (
+    <div className={classes.footer}>
+      <div className={classes.top}>
+        <div className={classes.topLeft}>
+          <Button
+            className={classes.btn}
+            size='sm'
+            onClick={() => handleClick()}
+          >
+            Oppdater variabler
+          </Button>
+        </div>
+
+        <div className={classes.topRight}>
+          {loading && (
+            <Spinner
+              title='fff'
+              size='sm'
+              className={classes.spinner}
+            />
+          )}
+        </div>
+      </div>
+      <div className={classes.bottom}>
+        <div className={classes.bottomLeft}>
+          <Link
+            className={classes.link}
+            to='/github'
+          >
+            <Button
+              className={classes.github}
+              size='sm'
+              color='neutral'
+              variant='tertiary'
+            >
+              <Github size={17} />
+              Github
+            </Button>
+          </Link>
+          <Link
+            className={classes.link}
+            to='/github'
+          >
+            <Button
+              className={classes.github}
+              size='sm'
+              color='neutral'
+              variant='tertiary'
+            >
+              <Code size={17} />
+              NPM
+            </Button>
+          </Link>
+        </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/components/Textfield/Textfield.module.css b/plugins/figma/src/ui/components/Textfield/Textfield.module.css
new file mode 100644
index 0000000000..2f06044d0a
--- /dev/null
+++ b/plugins/figma/src/ui/components/Textfield/Textfield.module.css
@@ -0,0 +1,2 @@
+.input {
+}
diff --git a/plugins/figma/src/ui/components/Textfield/Textfield.tsx b/plugins/figma/src/ui/components/Textfield/Textfield.tsx
new file mode 100644
index 0000000000..d6c5b55e54
--- /dev/null
+++ b/plugins/figma/src/ui/components/Textfield/Textfield.tsx
@@ -0,0 +1,16 @@
+import { Textfield as DSTextfield } from '@digdir/designsystemet-react';
+
+import classes from './Textfield.module.css';
+type TextfieldProps = {
+  label: string;
+  size?: 'sm' | 'md' | 'lg';
+};
+
+export const Textfield = ({ ...rest }: TextfieldProps) => {
+  return (
+    <DSTextfield
+      {...rest}
+      className={classes.input}
+    />
+  );
+};
diff --git a/plugins/figma-plugin/src/ui/components/Toast/Toast.css b/plugins/figma/src/ui/components/Toast/Toast.css
similarity index 100%
rename from plugins/figma-plugin/src/ui/components/Toast/Toast.css
rename to plugins/figma/src/ui/components/Toast/Toast.css
diff --git a/plugins/figma-plugin/src/ui/components/Toast/Toast.tsx b/plugins/figma/src/ui/components/Toast/Toast.tsx
similarity index 81%
rename from plugins/figma-plugin/src/ui/components/Toast/Toast.tsx
rename to plugins/figma/src/ui/components/Toast/Toast.tsx
index 9901e95746..94ad757597 100644
--- a/plugins/figma-plugin/src/ui/components/Toast/Toast.tsx
+++ b/plugins/figma/src/ui/components/Toast/Toast.tsx
@@ -27,14 +27,21 @@ export const Toast = () => {
       {success && (
         <>
           <div className='icon'>
-            <CheckmarkIcon title='a11y-title' fontSize='2rem' />
+            <CheckmarkIcon
+              title='a11y-title'
+              fontSize='2rem'
+            />
           </div>{' '}
           Oppdatering vellykket!
         </>
       )}
       {!success && (
         <>
-          <Spinner color='accent' title='loading' size='sm' />
+          <Spinner
+            color='accent'
+            title='loading'
+            size='sm'
+          />
           Oppdaterer variabler...
         </>
       )}
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 78%
rename from plugins/figma-plugin/src/ui/main.tsx
rename to plugins/figma/src/ui/main.tsx
index 1506bb5b4d..15642fddba 100644
--- a/plugins/figma-plugin/src/ui/main.tsx
+++ b/plugins/figma/src/ui/main.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { Toaster } from 'react-hot-toast';
 import { MemoryRouter } from 'react-router-dom';
+import 'dotenv/config';
 
 async function bootstrap() {
   const App = (await import('./app')).default;
@@ -12,9 +14,12 @@ async function bootstrap() {
     <React.StrictMode>
       <MemoryRouter>
         <App />
+        <Toaster />
       </MemoryRouter>
     </React.StrictMode>,
   );
 }
 
 void bootstrap();
+
+console.log('Hello from Figma Plugin!');
diff --git a/plugins/figma/src/ui/pages/AddTheme/AddTheme.module.css b/plugins/figma/src/ui/pages/AddTheme/AddTheme.module.css
new file mode 100644
index 0000000000..61446af301
--- /dev/null
+++ b/plugins/figma/src/ui/pages/AddTheme/AddTheme.module.css
@@ -0,0 +1,28 @@
+.page {
+  padding: 12px;
+}
+
+.pickers {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+  z-index: 50;
+  margin-bottom: 24px;
+}
+
+.input {
+  margin-bottom: 24px;
+  margin-top: 20px;
+  background-color: var(--figma-color-bg-secondary);
+  border: none;
+  padding: 9px 11px;
+  width: 150px;
+  font-size: 14px;
+  border-radius: 2px;
+  color: var(--figma-color-text);
+}
+
+.input::placeholder {
+  color: #9e9e9e;
+}
diff --git a/plugins/figma/src/ui/pages/AddTheme/AddTheme.tsx b/plugins/figma/src/ui/pages/AddTheme/AddTheme.tsx
new file mode 100644
index 0000000000..6defd90716
--- /dev/null
+++ b/plugins/figma/src/ui/pages/AddTheme/AddTheme.tsx
@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import type { CssColor } from '@adobe/leonardo-contrast-colors';
+import { generateThemeForColor } from '@digdir/designsystemet/color';
+import { Button } from '@digdir/designsystemet-react';
+
+import { ColorPicker } from '@ui/components/ColorPicker/ColorPicker';
+import { Breadcrumbs } from '@ui/components/Breadcrumbs/Breadcrumbs';
+
+import { getDummyTheme } from '../../../common/dummyTheme';
+import { themeToFigmaFormat } from '../../../common/utils';
+import { useThemeStore, type ColorTheme } from '../../../common/store';
+
+import classes from './AddTheme.module.css';
+
+function AddTheme() {
+  const [theme, setTheme] = useState<ColorTheme>(getDummyTheme());
+  const setLoading = useThemeStore((state) => state.setLoading);
+  const [name, setName] = useState<string>('');
+
+  const handleClick = () => {
+    setLoading(true);
+    setTimeout(() => {
+      parent.postMessage(
+        {
+          pluginMessage: {
+            type: 'addTheme',
+            addTheme: {
+              theme,
+              name,
+            },
+          },
+        },
+        '*',
+      );
+    }, 500);
+  };
+
+  return (
+    <div className={classes.page}>
+      <Breadcrumbs
+        text='Legg til nytt tema'
+        url={'/themes'}
+      />
+      <div>
+        <input
+          className={classes.input}
+          type='text'
+          placeholder='Navn'
+          onChange={(e) => setName(e.target.value)}
+        />
+      </div>
+      <div className={classes.pickers}>
+        <ColorPicker
+          color={theme.accent.light?.[9] as CssColor}
+          title='Accent'
+          onColorChanged={(color: CssColor) => {
+            setTheme({
+              ...theme,
+              accent: themeToFigmaFormat(generateThemeForColor(color)),
+            });
+          }}
+        />
+        <ColorPicker
+          color={theme.neutral.light?.[9] as CssColor}
+          title='Neutral'
+          onColorChanged={(color: CssColor) => {
+            setTheme({
+              ...theme,
+              neutral: themeToFigmaFormat(generateThemeForColor(color)),
+            });
+          }}
+        />
+        <ColorPicker
+          color={theme.brand1.light?.[9] as CssColor}
+          title='Brand 1'
+          onColorChanged={(color: CssColor) => {
+            setTheme({
+              ...theme,
+              brand1: themeToFigmaFormat(generateThemeForColor(color)),
+            });
+          }}
+        />
+        <ColorPicker
+          color={theme.brand2.light?.[9] as CssColor}
+          title='Brand 2'
+          onColorChanged={(color: CssColor) => {
+            setTheme({
+              ...theme,
+              brand2: themeToFigmaFormat(generateThemeForColor(color)),
+            });
+          }}
+        />
+        <ColorPicker
+          color={theme.brand3.light?.[9] as CssColor}
+          title='Brand 3'
+          onColorChanged={(color: CssColor) => {
+            setTheme({
+              ...theme,
+              brand3: themeToFigmaFormat(generateThemeForColor(color)),
+            });
+          }}
+        />
+      </div>
+      <Button
+        size='sm'
+        className='btn'
+        onClick={() => handleClick()}
+      >
+        Legg til
+      </Button>
+    </div>
+  );
+}
+
+export default AddTheme;
diff --git a/plugins/figma/src/ui/pages/Colors/Colors.module.css b/plugins/figma/src/ui/pages/Colors/Colors.module.css
new file mode 100644
index 0000000000..e6a9f5d841
--- /dev/null
+++ b/plugins/figma/src/ui/pages/Colors/Colors.module.css
@@ -0,0 +1,17 @@
+.pickers {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+  z-index: 50;
+  margin-top: 20px;
+}
+
+.content {
+  padding: 16px 12px 12px;
+}
+
+.btn {
+  font-size: 14px;
+  margin-top: 32px;
+}
diff --git a/plugins/figma/src/ui/pages/Colors/Colors.tsx b/plugins/figma/src/ui/pages/Colors/Colors.tsx
new file mode 100644
index 0000000000..db50e96be8
--- /dev/null
+++ b/plugins/figma/src/ui/pages/Colors/Colors.tsx
@@ -0,0 +1,192 @@
+import type { ThemeInfo } from '@digdir/designsystemet/color';
+import { generateThemeForColor } from '@digdir/designsystemet/color';
+import type { CssColor } from '@adobe/leonardo-contrast-colors';
+import { useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+
+import { ColorPicker } from '@ui/components/ColorPicker/ColorPicker';
+import { Breadcrumbs } from '@ui/components/Breadcrumbs/Breadcrumbs';
+
+import type {
+  ColorTheme,
+  ThemeInfo as testThemeInfo,
+} from '../../../common/store';
+import { useThemeStore } from '../../../common/store';
+import { getDummyTheme } from '../../../common/dummyTheme';
+
+import classes from './Colors.module.css';
+
+const Tomato = (theme: ThemeInfo): testThemeInfo => {
+  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,
+    },
+  };
+};
+
+function Colors() {
+  const themes = useThemeStore((state) => state.themes);
+  const [theme, setTheme] = useState<ColorTheme>(getDummyTheme());
+  const [themeIndex, setThemeIndex] = useState<number>(0);
+  const setThemes = useThemeStore((state) => state.setThemes);
+  const { themeId } = useParams<string>();
+
+  useEffect(() => {
+    setThemeIndex(themes.findIndex((theme) => theme.themeModeId === themeId));
+    setTheme(
+      themes.find((theme) => theme.themeModeId === themeId)
+        ?.colors as ColorTheme,
+    );
+  }, [themeId, themes]);
+
+  return (
+    <div className={classes.content}>
+      <Breadcrumbs
+        text={
+          'Farger (' +
+          themes.find((theme) => theme.themeModeId === themeId)?.name +
+          ')'
+        }
+        url={'/themes/' + themeId}
+      />
+      <div className={classes.pickers}>
+        <ColorPicker
+          color={theme.accent.light?.[9] as CssColor}
+          title='Accent'
+          onColorChanged={(color: CssColor) => {
+            const theme = generateThemeForColor(color);
+            const numberTheme = Tomato(theme);
+            const newArray = Array.from(themes);
+            newArray[themeIndex] = {
+              ...newArray[themeIndex],
+              colors: {
+                ...newArray[themeIndex].colors,
+                accent: numberTheme,
+              },
+            };
+            setThemes(newArray);
+          }}
+        />
+        <ColorPicker
+          color={theme.neutral.light?.[9] as CssColor}
+          title='Neutral'
+          onColorChanged={(color: CssColor) => {
+            const theme = generateThemeForColor(color);
+            const numberTheme = Tomato(theme);
+            const newArray = Array.from(themes);
+            newArray[themeIndex] = {
+              ...newArray[themeIndex],
+              colors: {
+                ...newArray[themeIndex].colors,
+                neutral: numberTheme,
+              },
+            };
+            setThemes(newArray);
+          }}
+        />
+
+        <ColorPicker
+          color={theme.brand1.light?.[9] as CssColor}
+          title='Brand 1'
+          onColorChanged={(color: CssColor) => {
+            const theme = generateThemeForColor(color);
+            const numberTheme = Tomato(theme);
+            const newArray = Array.from(themes);
+            newArray[themeIndex] = {
+              ...newArray[themeIndex],
+              colors: {
+                ...newArray[themeIndex].colors,
+                brand1: numberTheme,
+              },
+            };
+            setThemes(newArray);
+          }}
+        />
+        <ColorPicker
+          color={theme.brand2.light?.[9] as CssColor}
+          title='Brand 2'
+          onColorChanged={(color: CssColor) => {
+            const theme = generateThemeForColor(color);
+            const numberTheme = Tomato(theme);
+            const newArray = Array.from(themes);
+            newArray[themeIndex] = {
+              ...newArray[themeIndex],
+              colors: {
+                ...newArray[themeIndex].colors,
+                brand2: numberTheme,
+              },
+            };
+            setThemes(newArray);
+          }}
+        />
+        <ColorPicker
+          color={theme.brand3.light?.[9] as CssColor}
+          title='Brand 3'
+          onColorChanged={(color: CssColor) => {
+            const theme = generateThemeForColor(color);
+            const numberTheme = Tomato(theme);
+            const newArray = Array.from(themes);
+            newArray[themeIndex] = {
+              ...newArray[themeIndex],
+              colors: {
+                ...newArray[themeIndex].colors,
+                brand3: numberTheme,
+              },
+            };
+            setThemes(newArray);
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default Colors;
diff --git a/plugins/figma/src/ui/pages/Font/Font.module.css b/plugins/figma/src/ui/pages/Font/Font.module.css
new file mode 100644
index 0000000000..9663010501
--- /dev/null
+++ b/plugins/figma/src/ui/pages/Font/Font.module.css
@@ -0,0 +1,35 @@
+.content {
+  padding: 16px;
+  height: 388px;
+  overflow-y: auto;
+}
+
+.grid {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.fields {
+  gap: 16px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 24px;
+}
+
+.breadcrumbs {
+  margin-bottom: 20px;
+}
+
+.nameSelect {
+  width: 50%;
+}
+
+.weightSelects {
+  display: flex;
+  gap: 16px;
+}
+
+.weightSelect {
+  flex-grow: 1;
+}
diff --git a/plugins/figma/src/ui/pages/Font/Font.tsx b/plugins/figma/src/ui/pages/Font/Font.tsx
new file mode 100644
index 0000000000..c2a736475b
--- /dev/null
+++ b/plugins/figma/src/ui/pages/Font/Font.tsx
@@ -0,0 +1,135 @@
+import { useParams } from 'react-router-dom';
+import { NativeSelect, Textfield } from '@digdir/designsystemet-react';
+import cl from 'clsx/lite';
+import { useState } from 'react';
+
+import { useThemeStore } from '../../../common/store';
+import { Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs';
+
+import classes from './Font.module.css';
+
+function Font() {
+  const themes = useThemeStore((state) => state.themes);
+
+  const fonts = useThemeStore((state) => state.fonts);
+  const { themeId } = useParams<string>();
+
+  const getTheme = () => {
+    return themes.find((theme) => theme.themeModeId === themeId) || null;
+  };
+
+  const getFontOptions = () => {
+    return fonts.map((font) => {
+      return (
+        <option
+          key={font.name}
+          value={font.name}
+        >
+          {font.name}
+        </option>
+      );
+    });
+  };
+
+  const getFontWeights = (name: string) => {
+    return fonts
+      .find((font) => font.name === name)
+      ?.styles.map((style) => {
+        return (
+          <option
+            key={style}
+            value={style}
+          >
+            {style}
+          </option>
+        );
+      });
+  };
+
+  // Primary font
+  const [primaryName, setPrimaryName] = useState<string>('Inter');
+  const [primaryRegular, setPrimaryRegular] = useState<string>('Regular');
+  const [primaryBold, setPrimaryBold] = useState<string>('Medium');
+  const [primaryExtraBold, setPrimaryExtraBold] = useState<string>('Semi Bold');
+
+  return (
+    <div className={classes.content}>
+      <Breadcrumbs
+        className={classes.breadcrumbs}
+        text={'Fonter (' + getTheme()?.name + ')'}
+        url={'/themes/' + themeId}
+      />
+
+      <h2 className='pageTitle'>Primærfont</h2>
+
+      <div className={classes.fields}>
+        <div className={cl(classes.nameSelect)}>
+          <NativeSelect
+            label='Navn'
+            size='sm'
+            value={primaryName}
+            onChange={(e) => setPrimaryName(e.target.value)}
+            className={cl('select', classes.weightSelect)}
+          >
+            {getFontOptions()}
+          </NativeSelect>
+        </div>
+        <div className={classes.weightSelects}>
+          <NativeSelect
+            label='Regular font weight'
+            size='sm'
+            value={primaryRegular}
+            className={cl('select', classes.weightSelect)}
+          >
+            {getFontWeights(primaryName)}
+          </NativeSelect>
+          <NativeSelect
+            label='Bold font weight'
+            size='sm'
+            value={primaryBold}
+            className={cl('select', classes.weightSelect)}
+          >
+            {getFontWeights(primaryName)}
+          </NativeSelect>
+          <NativeSelect
+            label='Extra bold font weight'
+            size='sm'
+            value={primaryExtraBold}
+            className={cl('select', classes.weightSelect)}
+          >
+            {getFontWeights(primaryName)}
+          </NativeSelect>
+        </div>
+      </div>
+
+      <h2 className='pageTitle'>Sekundærfont</h2>
+      <div className={classes.grid}>
+        <div className={classes.fields}>
+          <Textfield
+            label='Font family'
+            className={classes.textfield + ' textfield'}
+          />
+          <Textfield
+            label='Regular font weight'
+            className={classes.textfield + ' textfield'}
+          />
+          <Textfield
+            label='Bold font weight'
+            className={classes.textfield + ' textfield'}
+          />
+          <Textfield
+            label='Extra bold font weight'
+            className={classes.textfield + ' textfield'}
+          />
+        </div>
+        <div className={classes.preview}>
+          <div>Regular font weight</div>
+          <div>Bold font weight</div>
+          <div>Extra bold font weight</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Font;
diff --git a/plugins/figma/src/ui/pages/Fonts/Fonts.module.css b/plugins/figma/src/ui/pages/Fonts/Fonts.module.css
new file mode 100644
index 0000000000..e4dbde2087
--- /dev/null
+++ b/plugins/figma/src/ui/pages/Fonts/Fonts.module.css
@@ -0,0 +1,10 @@
+.cards {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.content {
+  padding: 16px;
+}
diff --git a/plugins/figma/src/ui/pages/Fonts/Fonts.tsx b/plugins/figma/src/ui/pages/Fonts/Fonts.tsx
new file mode 100644
index 0000000000..cfcb094753
--- /dev/null
+++ b/plugins/figma/src/ui/pages/Fonts/Fonts.tsx
@@ -0,0 +1,42 @@
+import { useParams } from 'react-router-dom';
+import { Type } from 'lucide-react';
+
+import { Card } from '../../components/Card/Card';
+import { useThemeStore } from '../../../common/store';
+import { CardButton } from '../../components/CardButton/CardButton';
+import { Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs';
+
+import classes from './Fonts.module.css';
+
+const Fonts = () => {
+  const { themeId } = useParams();
+  const themes = useThemeStore((state) => state.themes);
+
+  const getTheme = () => {
+    return themes.find((theme) => theme.themeModeId === themeId) || { fonts: [] };
+  };
+
+  return (
+    <div className={classes.content}>
+      <Breadcrumbs
+        text={'Fonter - ' + themes.find((theme) => theme.themeModeId === themeId)?.name}
+        url='/'
+      />
+      <div className={classes.cards}>
+        {getTheme().fonts.map((theme, index) => {
+          return (
+            <Card
+              key={index}
+              title={theme.name}
+              url={`/themes/`}
+              icon={<Type />}
+            />
+          );
+        })}
+        <CardButton url='/theme/add' />
+      </div>
+    </div>
+  );
+};
+
+export default Fonts;
diff --git a/plugins/figma/src/ui/pages/Github/Github.module.css b/plugins/figma/src/ui/pages/Github/Github.module.css
new file mode 100644
index 0000000000..3bc352f19b
--- /dev/null
+++ b/plugins/figma/src/ui/pages/Github/Github.module.css
@@ -0,0 +1,7 @@
+.snippet {
+  height: 294px;
+}
+
+.content {
+  padding: 16px;
+}
diff --git a/plugins/figma/src/ui/pages/Github/Github.tsx b/plugins/figma/src/ui/pages/Github/Github.tsx
new file mode 100644
index 0000000000..328a1b31a1
--- /dev/null
+++ b/plugins/figma/src/ui/pages/Github/Github.tsx
@@ -0,0 +1,44 @@
+import { Button, Textfield } from '@digdir/designsystemet-react';
+
+import { useThemeStore } from '../../../common/store';
+
+import classes from './Github.module.css';
+
+export const Github = () => {
+  const setLoading = useThemeStore((state) => state.setLoading);
+
+  const handleClick = () => {
+    setLoading(true);
+    parent.postMessage({ pluginMessage: { type: 'generateJson' } }, '*');
+  };
+
+  return (
+    <div className={classes.content}>
+      <h1 className='pageTitle'>Push til Github</h1>
+      <Textfield
+        label='Github repo'
+        size='sm'
+        className='textfield'
+        prefix='github.com/'
+        value='Thuneer/design-tokens'
+      />
+
+      <Textfield label='Branch' size='sm' value='main' className='textfield' />
+      <Textfield
+        label='PAT'
+        size='sm'
+        className='textfield'
+        type='password'
+        value='token'
+      />
+      <Button
+        onClick={() => {
+          handleClick();
+        }}
+        className='btn'
+      >
+        Push til Github
+      </Button>
+    </div>
+  );
+};
diff --git a/plugins/figma/src/ui/pages/PageOne/PageOne.module.css b/plugins/figma/src/ui/pages/PageOne/PageOne.module.css
new file mode 100644
index 0000000000..58aba0f9b1
--- /dev/null
+++ b/plugins/figma/src/ui/pages/PageOne/PageOne.module.css
@@ -0,0 +1,9 @@
+.pickers {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.content {
+  padding: 8px;
+}
diff --git a/plugins/figma/src/ui/pages/PageOne/PageOne.tsx b/plugins/figma/src/ui/pages/PageOne/PageOne.tsx
new file mode 100644
index 0000000000..5392d3dc43
--- /dev/null
+++ b/plugins/figma/src/ui/pages/PageOne/PageOne.tsx
@@ -0,0 +1,107 @@
+import { useState } from 'react';
+
+import classes from './PageOne.module.css';
+
+import { ColorPicker } from '@ui/components/ColorPicker/ColorPicker';
+
+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 [accent, setAccent] = useState('#0163BA');
+  const [neutral, setNeutral] = useState('#1E2B3C');
+  const [brand1, setBrand1] = useState('#F45F63');
+  const [brand2, setBrand2] = useState('#E5AA20');
+  const [brand3, setBrand3] = useState('#1E98F5');
+
+  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={classes.content}>
+      <div className={classes.pickers}>
+        <ColorPicker
+          color={accent}
+          title='Accent'
+        />
+        <ColorPicker
+          color={neutral}
+          title='Neutral'
+        />
+        <ColorPicker
+          color={brand1}
+          title='Brand 1'
+        />
+        <ColorPicker
+          color={brand2}
+          title='Brand 2'
+        />
+        <ColorPicker
+          color={brand3}
+          title='Brand 3'
+        />
+      </div>
+    </div>
+  );
+}
+
+export default PageOne;
diff --git a/plugins/figma/src/ui/pages/PageTwo/PageTwo.tsx b/plugins/figma/src/ui/pages/PageTwo/PageTwo.tsx
new file mode 100644
index 0000000000..e3887cde9c
--- /dev/null
+++ b/plugins/figma/src/ui/pages/PageTwo/PageTwo.tsx
@@ -0,0 +1,21 @@
+import { Type } from 'lucide-react';
+
+import { Card } from '@ui/components/Card/Card';
+import { CardButton } from '@ui/components/CardButton/CardButton';
+
+function PageTwo() {
+  return (
+    <div className='content'>
+      <div>
+        <Card
+          url={'/themes/colors'}
+          title='Inter'
+          icon={<Type />}
+        />
+        <CardButton />
+      </div>
+    </div>
+  );
+}
+
+export default PageTwo;
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..b29d3aa016
--- /dev/null
+++ b/plugins/figma/src/ui/pages/Theme/Theme.module.css
@@ -0,0 +1,58 @@
+.content {
+  padding: 16px 16px 16px;
+}
+
+.cards {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.headerLeft {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+}
+
+.removeBtn {
+  font-size: 14px;
+  color: #ffacac;
+  padding: 0;
+  min-height: 10px;
+  padding-right: 6px;
+  cursor: pointer;
+}
+
+.removeBtn:hover {
+  background-color: transparent;
+  color: #ffd4d4;
+}
+
+.edit {
+  color: var(--figma-color-text-secondary);
+  cursor: pointer;
+}
+
+.edit:hover {
+  color: var(--figma-color-text);
+}
+
+.input {
+  background-color: var(--figma-color-bg-secondary);
+  border: none;
+  padding: 6px 7px;
+  width: 150px;
+  border-radius: 2px;
+  color: var(--figma-color-text);
+}
+
+.input::placeholder {
+  color: #9e9e9e;
+}
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..26c7f485aa
--- /dev/null
+++ b/plugins/figma/src/ui/pages/Theme/Theme.tsx
@@ -0,0 +1,142 @@
+import {
+  AlignVerticalSpaceAround,
+  Palette,
+  Pencil,
+  Shapes,
+  Type,
+  Check,
+} from 'lucide-react';
+import { useParams } from 'react-router-dom';
+import { useState } from 'react';
+import { Button } from '@digdir/designsystemet-react';
+
+import { Card } from '@ui/components/Card/Card';
+import { Breadcrumbs } from '@ui/components/Breadcrumbs/Breadcrumbs';
+
+import { useThemeStore } from '../../../common/store';
+
+import classes from './Theme.module.css';
+
+function Theme() {
+  const { themeId } = useParams();
+  const themes = useThemeStore((state) => state.themes);
+  const [newName, setNewName] = useState('');
+  const [editMode, setEditMode] = useState(false);
+  const setLoading = useThemeStore((state) => state.setLoading);
+
+  const Tomato = (e: string) => {
+    setNewName(e);
+  };
+
+  const changeName = () => {
+    setLoading(true);
+    setEditMode(false);
+    setTimeout(() => {
+      parent.postMessage(
+        {
+          pluginMessage: {
+            type: 'renameTheme',
+            renameTheme: {
+              newName: newName,
+              themeModeId: themes.find((theme) => theme.themeModeId === themeId)
+                ?.themeModeId,
+              themeId: themes.find((theme) => theme.themeModeId === themeId)
+                ?.themeId,
+            },
+          },
+        },
+        '*',
+      );
+    }, 500);
+  };
+
+  const deleteClicked = () => {
+    setLoading(true);
+    setTimeout(() => {
+      parent.postMessage(
+        {
+          pluginMessage: {
+            type: 'deleteTheme',
+            deleteTheme: {
+              themeModeId: themes.find((theme) => theme.themeModeId === themeId)
+                ?.themeModeId,
+              themeId: themes.find((theme) => theme.themeModeId === themeId)
+                ?.themeId,
+            },
+          },
+        },
+        '*',
+      );
+    }, 500);
+  };
+
+  return (
+    <div className={classes.content}>
+      <div className={classes.header}>
+        <div className={classes.headerLeft}>
+          <Breadcrumbs
+            text={themes.find((theme) => theme.themeModeId === themeId)?.name}
+            url='/'
+          />
+          {!editMode && (
+            <Pencil
+              size={16}
+              className={classes.edit}
+              onClick={() => setEditMode(true)}
+            />
+          )}
+          {editMode && (
+            <>
+              <input
+                type='text'
+                placeholder='Nytt navn...'
+                onChange={(e) => Tomato(e.target.value)}
+                className={classes.input}
+              />
+              <Check
+                onClick={() => changeName()}
+                size={18}
+                className={classes.edit}
+              />
+            </>
+          )}
+        </div>
+        <div className={classes.headerRight}>
+          <Button
+            size='sm'
+            color='danger'
+            variant='tertiary'
+            className={classes.removeBtn}
+            onClick={() => deleteClicked()}
+          >
+            Slett tema
+          </Button>
+        </div>
+      </div>
+      <div className={classes.cards}>
+        <Card
+          url={'/themes/' + themeId + '/colors'}
+          title='Farger'
+          icon={<Palette />}
+        />
+        <Card
+          url='/themes/altinn/colors'
+          title='Border Radius'
+          icon={<Shapes />}
+        />
+        <Card
+          url={'/themes/' + themeId + '/fonts'}
+          title='Fonter'
+          icon={<Type />}
+        />
+        <Card
+          url='/themes/altinn/colors'
+          title='Avstander'
+          icon={<AlignVerticalSpaceAround />}
+        />
+      </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..2c0f4bde85
--- /dev/null
+++ b/plugins/figma/src/ui/pages/Themes/Themes.module.css
@@ -0,0 +1,9 @@
+.cards {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.content {
+  padding: 16px;
+}
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..c0a725074b
--- /dev/null
+++ b/plugins/figma/src/ui/pages/Themes/Themes.tsx
@@ -0,0 +1,48 @@
+import { useEffect } from 'react';
+import { Button } from '@digdir/designsystemet-react';
+
+import { Card } from '@ui/components/Card/Card';
+import { CardButton } from '@ui/components/CardButton/CardButton';
+
+import { useThemeStore } from '../../../common/store';
+
+import classes from './Themes.module.css';
+
+function Themes() {
+  const themes = useThemeStore((state) => state.themes);
+
+  useEffect(() => {}, []);
+
+  const handleClick = () => {
+    parent.postMessage({ pluginMessage: { type: 'updateTheme' } }, '*');
+  };
+  const handleClick2 = () => {
+    parent.postMessage({ pluginMessage: { type: 'updateTheme2' } }, '*');
+  };
+
+  return (
+    <div className={classes.content}>
+      {/* <Button onClick={() => handleClick2()}>Add theme</Button>
+      <Button onClick={() => handleClick()}>update variable</Button> */}
+      <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] ?? '',
+              }}
+            />
+          );
+        })}
+        <CardButton url='/theme/add' />
+      </div>
+    </div>
+  );
+}
+
+export default Themes;
diff --git a/plugins/figma-plugin/src/ui/pages/pageThree/PageThree.tsx b/plugins/figma/src/ui/pages/pageThree/PageThree.tsx
similarity index 100%
rename from plugins/figma-plugin/src/ui/pages/pageThree/PageThree.tsx
rename to plugins/figma/src/ui/pages/pageThree/PageThree.tsx
diff --git a/plugins/figma/src/ui/utils/github.ts b/plugins/figma/src/ui/utils/github.ts
new file mode 100644
index 0000000000..0b2617243a
--- /dev/null
+++ b/plugins/figma/src/ui/utils/github.ts
@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+const REPOSITORY_OWNER = 'Thuneer';
+const REPOSITORY_NAME = 'design-tokens';
+const BRANCH_NAME = 'main';
+
+const MODES = { FILE: '100644', FOLDER: '040000' };
+const TYPE = { BLOB: 'blob', TREE: 'tree' };
+
+// See: https://docs.github.com/en/free-pro-team@latest/rest/reference/git#commits
+const COMMITS_URL = `https://api.github.com/repos/${REPOSITORY_OWNER}/${REPOSITORY_NAME}/git/commits`;
+
+// See: https://docs.github.com/en/free-pro-team@latest/rest/reference/git#trees
+const REPOSITORY_TREE_URL = `https://api.github.com/repos/${REPOSITORY_OWNER}/${REPOSITORY_NAME}/git/trees`;
+
+// See: https://docs.github.com/en/free-pro-team@latest/rest/reference/git#get-a-reference
+const REF_URL = `https://api.github.com/repos/${REPOSITORY_OWNER}/${REPOSITORY_NAME}/git/refs/heads/${BRANCH_NAME}`;
+
+declare let process: {
+  env: {
+    GITHUB_TOKEN: string;
+  };
+};
+
+const headers = {
+  Accept: 'application/vnd.github.v3+json',
+  Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
+};
+
+export const commitToGithub = async (fileArr: []) => {
+  if (!fileArr.length) return;
+  // Get the sha of the last commit on BRANCH_NAME
+  const response = await fetch(REF_URL, { headers });
+  const {
+    object: { sha: currentCommitSha },
+  } = await response.json();
+
+  // Get the sha of the root tree on the commit retrieved previously
+  const commitResponse = await fetch(`${COMMITS_URL}/${currentCommitSha}`, {
+    headers,
+  });
+  const {
+    tree: { sha: treeSha },
+  } = await commitResponse.json();
+
+  // Create a tree to edit the content of the repository
+  const treeResponse = await fetch(REPOSITORY_TREE_URL, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      base_tree: treeSha,
+      tree: fileArr.map(
+        ({ content, path }) =>
+          content
+            ? { path, content, mode: MODES.FILE, type: TYPE.BLOB } // Works for text files, utf-8 assumed
+            : { path, sha: null, mode: MODES.FILE, type: TYPE.BLOB }, // If sha is null => the file gets deleted
+      ),
+    }),
+  });
+  const { sha: newTreeSha } = await treeResponse.json();
+
+  // Create a commit that uses the tree created above
+  const commitResponse1 = await fetch(COMMITS_URL, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      message: "Committing with GitHub's API :fire:",
+      tree: newTreeSha,
+      parents: [currentCommitSha],
+    }),
+  });
+  const { sha: newCommitSha } = await commitResponse1.json();
+
+  // Make BRANCH_NAME point to the created commit
+  await fetch(REF_URL, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({ sha: newCommitSha }),
+  });
+};
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-plugin/tsconfig.json b/plugins/figma/tsconfig.json
similarity index 100%
rename from plugins/figma-plugin/tsconfig.json
rename to plugins/figma/tsconfig.json
diff --git a/plugins/figma-plugin/tsconfig.node.json b/plugins/figma/tsconfig.node.json
similarity index 84%
rename from plugins/figma-plugin/tsconfig.node.json
rename to plugins/figma/tsconfig.node.json
index 3eca0b7b6b..b7445bdb37 100644
--- a/plugins/figma-plugin/tsconfig.node.json
+++ b/plugins/figma/tsconfig.node.json
@@ -6,5 +6,7 @@
     "moduleResolution": "Node",
     "esModuleInterop": true
   },
-  "include": ["*.ts"]
+  "include": [
+    "*.ts"
+  ]
 }
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..e1e90bd882 100644
--- a/plugins/figma-plugin/vite.config.ui.ts
+++ b/plugins/figma/vite.config.ui.ts
@@ -1,12 +1,11 @@
 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';
+import react from '@vitejs/plugin-react';
 
 export default defineConfig(({ mode }) => ({
-  plugins: [react(), richSvg(), viteSingleFile()],
+  plugins: [react(), viteSingleFile()],
   root: path.resolve('src/ui'),
   build: {
     minify: mode === 'production',

From 3c8499ee3023e34c17103ecfe946ad8ecf4bb483 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Fri, 16 Aug 2024 13:30:10 +0200
Subject: [PATCH 02/21] Update yarn.lock

---
 yarn.lock | 346 +++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 289 insertions(+), 57 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 687a675c80..c8f7d29fbe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3524,10 +3524,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
 
@@ -3620,6 +3620,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@isomorphic-git/idb-keyval@npm:3.3.2":
+  version: 3.3.2
+  resolution: "@isomorphic-git/idb-keyval@npm:3.3.2"
+  checksum: 10/d67cd1a2d1d9a264cb9b616bbd3d51fa98056946fd74a4529ea0105b90e6e2f0c241a4b4189a23cdc7a8b0b4d7a84966134dba452cf9670a8da22ff5b0f564b4
+  languageName: node
+  linkType: hard
+
+"@isomorphic-git/lightning-fs@npm:^4.6.0":
+  version: 4.6.0
+  resolution: "@isomorphic-git/lightning-fs@npm:4.6.0"
+  dependencies:
+    "@isomorphic-git/idb-keyval": "npm:3.3.2"
+    isomorphic-textencoder: "npm:1.0.1"
+    just-debounce-it: "npm:1.1.0"
+    just-once: "npm:1.1.0"
+  bin:
+    superblocktxt: src/superblocktxt.js
+  checksum: 10/e42117d132d1ebaee10940df926fdf06bc34a9127ccf9c564aaaf5007fb087d14bb830fc08a100109ae2df9057382697f17f9bbfd4bdeb66a6a0de36a64a48b8
+  languageName: node
+  linkType: hard
+
 "@jest/schemas@npm:^29.6.3":
   version: 29.6.3
   resolution: "@jest/schemas@npm:29.6.3"
@@ -4034,10 +4055,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@remix-run/router@npm:1.19.0":
-  version: 1.19.0
-  resolution: "@remix-run/router@npm:1.19.0"
-  checksum: 10/13a881fc47ca3571dcad298f6f19218c84f09f0dda38695d874a9fb1b496e42b6b37b777169d283cd1f5098a1470fa76c5143c53eb5a4078202bd12ea1541d29
+"@remix-run/router@npm:1.19.1":
+  version: 1.19.1
+  resolution: "@remix-run/router@npm:1.19.1"
+  checksum: 10/2800c2f6567a982fe942aacc4cb5b170e7cc89bd455960e3bea2424161ff7dac32d01886322d88dd19b88d1bea711f39566d17f02b73eeb74999affb471f8f52
   languageName: node
   linkType: hard
 
@@ -5778,6 +5799,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^22.3.0":
+  version: 22.3.0
+  resolution: "@types/node@npm:22.3.0"
+  dependencies:
+    undici-types: "npm:~6.18.2"
+  checksum: 10/c31a798ed722a7417727f018ea6d621db038a613c626da643174cc6f3dcf4ce2fc9933a010aec289103d9564da2c2f9b054c9aa398828f00e17269a78c64d4ec
+  languageName: node
+  linkType: hard
+
 "@types/object-hash@npm:^3.0.6":
   version: 3.0.6
   resolution: "@types/object-hash@npm:3.0.6"
@@ -5862,7 +5892,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:
@@ -5891,7 +5921,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:18.3.3, @types/react@npm:^18.3.3":
+"@types/react@npm:18.3.3, @types/react@npm:^18.0.28, @types/react@npm:^18.3.3":
   version: 18.3.3
   resolution: "@types/react@npm:18.3.3"
   dependencies:
@@ -6672,6 +6702,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"async-lock@npm:^1.4.1":
+  version: 1.4.1
+  resolution: "async-lock@npm:1.4.1"
+  checksum: 10/80d55ac95f920e880a865968b799963014f6d987dd790dd08173fae6e1af509d8cd0ab45a25daaca82e3ef8e7c939f5d128cd1facfcc5c647da8ac2409e20ef9
+  languageName: node
+  linkType: hard
+
 "async@npm:^3.2.3":
   version: 3.2.4
   resolution: "async@npm:3.2.4"
@@ -7343,6 +7380,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clean-git-ref@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "clean-git-ref@npm:2.0.1"
+  checksum: 10/b25f585ed47040ea5d699d40a2bb84d1f35afd651f3fcc05fb077224358ffd3d7509fc9edbfc4570f1fc732c987e03ac7d8ec31524ac503ac35c53cb1f5e3bf9
+  languageName: node
+  linkType: hard
+
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -7726,6 +7770,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"crc-32@npm:^1.2.0":
+  version: 1.2.2
+  resolution: "crc-32@npm:1.2.2"
+  bin:
+    crc32: bin/crc32.njs
+  checksum: 10/824f696a5baaf617809aa9cd033313c8f94f12d15ebffa69f10202480396be44aef9831d900ab291638a8022ed91c360696dd5b1ba691eb3f34e60be8835b7c3
+  languageName: node
+  linkType: hard
+
 "cross-spawn@npm:^5.1.0":
   version: 5.1.0
   resolution: "cross-spawn@npm:5.1.0"
@@ -8102,6 +8155,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"decompress-response@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "decompress-response@npm:6.0.0"
+  dependencies:
+    mimic-response: "npm:^3.1.0"
+  checksum: 10/d377cf47e02d805e283866c3f50d3d21578b779731e8c5072d6ce8c13cc31493db1c2f6784da9d1d5250822120cefa44f1deab112d5981015f2e17444b763812
+  languageName: node
+  linkType: hard
+
 "deep-eql@npm:^4.1.3":
   version: 4.1.3
   resolution: "deep-eql@npm:4.1.3"
@@ -8263,6 +8325,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"diff3@npm:0.0.3":
+  version: 0.0.3
+  resolution: "diff3@npm:0.0.3"
+  checksum: 10/9fb9983052e35209be1912c6999ee4aa1887365666ea28d5aba364ffe8514e0a745a4408a3702b5c5943e717571dcc892073b8f3b48fed5814e2c7fc1883f74e
+  languageName: node
+  linkType: hard
+
 "dir-glob@npm:^3.0.1":
   version: 3.0.1
   resolution: "dir-glob@npm:3.0.1"
@@ -9125,6 +9194,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-text-encoding@npm:^1.0.0":
+  version: 1.0.6
+  resolution: "fast-text-encoding@npm:1.0.6"
+  checksum: 10/f7b9e2e7a21e4ae5f4b8d3729850be83fb45052b28c9c38c09b8366463a291d6dc5448359238bdaf87f6a9e907d5895a94319a2c5e0e9f0786859ad6312d1d06
+  languageName: node
+  linkType: hard
+
 "fastest-levenshtein@npm:^1.0.16":
   version: 1.0.16
   resolution: "fastest-levenshtein@npm:1.0.16"
@@ -9159,28 +9235,36 @@ __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"
+    "@isomorphic-git/lightning-fs": "npm:^4.6.0"
+    "@react-awesome/use-click-outside": "npm:^0.0.3"
+    "@types/node": "npm:^22.3.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"
-    npm-run-all2: "npm:^6.2.2"
-    postcss: "npm:^8.4.41"
-    react: "npm:^18.3.1"
-    react-dom: "npm:^18.3.1"
-    react-router-dom: "npm:^6.26.0"
-    rollup: "npm:^4.20.0"
-    vite: "npm:^5.3.5"
-    vite-plugin-generate-file: "npm:^0.2.0"
-    vite-plugin-react-rich-svg: "npm:^1.1.1"
+    isomorphic-git: "npm:^1.27.0"
+    lucide-react: "npm:^0.399.0"
+    npm-run-all2: "npm:^6.2.0"
+    postcss: "npm:^8.4.21"
+    react: "npm:^18.2.0"
+    react-color: "npm:^2.19.3"
+    react-dom: "npm:^18.2.0"
+    react-hot-toast: "npm:^2.4.1"
+    react-router-dom: "npm:^6.23.1"
+    vite-plugin-generate-file: "npm:^0.1.1"
+    vite-plugin-react-rich-svg: "npm:^1.0.0"
     vite-plugin-singlefile: "npm:^2.0.2"
+    zustand: "npm:^4.5.4"
   languageName: unknown
   linkType: soft
 
@@ -9792,6 +9876,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"goober@npm:^2.1.10":
+  version: 2.1.14
+  resolution: "goober@npm:2.1.14"
+  peerDependencies:
+    csstype: ^3.0.10
+  checksum: 10/372f18333ef64c403d29be7c1175cc9cd74cb947ec52cd42fbb1cf3f9870ac1dfec9c7671192cbf47ebc0ec17d8b05b6ef9a2b92952397d5b555a692381d5eaa
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -10192,6 +10285,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ignore@npm:^5.1.4":
+  version: 5.3.2
+  resolution: "ignore@npm:5.3.2"
+  checksum: 10/cceb6a457000f8f6a50e1196429750d782afce5680dd878aa4221bd79972d68b3a55b4b1458fc682be978f4d3c6a249046aa0880637367216444ab7b014cfc98
+  languageName: node
+  linkType: hard
+
 "ignore@npm:^5.2.0, ignore@npm:^5.2.4":
   version: 5.2.4
   resolution: "ignore@npm:5.2.4"
@@ -10670,6 +10770,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"isomorphic-git@npm:^1.27.0":
+  version: 1.27.1
+  resolution: "isomorphic-git@npm:1.27.1"
+  dependencies:
+    async-lock: "npm:^1.4.1"
+    clean-git-ref: "npm:^2.0.1"
+    crc-32: "npm:^1.2.0"
+    diff3: "npm:0.0.3"
+    ignore: "npm:^5.1.4"
+    minimisted: "npm:^2.0.0"
+    pako: "npm:^1.0.10"
+    pify: "npm:^4.0.1"
+    readable-stream: "npm:^3.4.0"
+    sha.js: "npm:^2.4.9"
+    simple-get: "npm:^4.0.1"
+  bin:
+    isogit: cli.cjs
+  checksum: 10/f0205552b0dfb5173e8dfc651c6901cc01ac03fbf5ddeff8b1d73d7707fb741c7ca16b25254de598981206c5d1179799eb33eb1d1a8456002c7210f52108f25a
+  languageName: node
+  linkType: hard
+
+"isomorphic-textencoder@npm:1.0.1":
+  version: 1.0.1
+  resolution: "isomorphic-textencoder@npm:1.0.1"
+  dependencies:
+    fast-text-encoding: "npm:^1.0.0"
+  checksum: 10/9bd0c04bff7b1dc9e410d2f9a2705ca4cc288872929d88fbb7758f06b5147de8dbaea5f95ce6cf4d314f064643f3d42d69a07bbb68df0261e81153d2d56f77f3
+  languageName: node
+  linkType: hard
+
 "jackspeak@npm:^2.3.5":
   version: 2.3.6
   resolution: "jackspeak@npm:2.3.6"
@@ -10980,6 +11110,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"just-debounce-it@npm:1.1.0":
+  version: 1.1.0
+  resolution: "just-debounce-it@npm:1.1.0"
+  checksum: 10/94ecf7e7cd49093e4d5b282fea2f6bc7b6866ff835a4739dc589228238562ecaeb4cf8cb2ae89f5c0c488235c16a96dcbb90920eff631fed39d9782fdffcdc80
+  languageName: node
+  linkType: hard
+
+"just-once@npm:1.1.0":
+  version: 1.1.0
+  resolution: "just-once@npm:1.1.0"
+  checksum: 10/e6bff9ee50bbe10e319decf6d19f9ed97e82a612fb56d63d4612910d84b1734a5697225bc098c7c0a7c404f844324eee073bf2bfcd4dcf575cd613aa9fe32ea5
+  languageName: node
+  linkType: hard
+
 "keyv@npm:^4.5.4":
   version: 4.5.4
   resolution: "keyv@npm:4.5.4"
@@ -11338,6 +11482,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-react@npm:^0.399.0":
+  version: 0.399.0
+  resolution: "lucide-react@npm:0.399.0"
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10/89212e54dc58c99f6d7593fc4ac5020771ec57bf334a4f5c1280df131cfb99b2c2ffabcf44a7c26670bee29979d687e7b4318b5d8681d404714faa1e9cc2a6ce
+  languageName: node
+  linkType: hard
+
 "luxon@npm:^3.5.0":
   version: 3.5.0
   resolution: "luxon@npm:3.5.0"
@@ -12287,6 +12440,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mimic-response@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "mimic-response@npm:3.1.0"
+  checksum: 10/7e719047612411fe071332a7498cf0448bbe43c485c0d780046c76633a771b223ff49bd00267be122cedebb897037fdb527df72335d0d0f74724604ca70b37ad
+  languageName: node
+  linkType: hard
+
 "min-indent@npm:^1.0.0, min-indent@npm:^1.0.1":
   version: 1.0.1
   resolution: "min-indent@npm:1.0.1"
@@ -12339,6 +12499,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimist@npm:^1.2.5":
+  version: 1.2.8
+  resolution: "minimist@npm:1.2.8"
+  checksum: 10/908491b6cc15a6c440ba5b22780a0ba89b9810e1aea684e253e43c4e3b8d56ec1dcdd7ea96dde119c29df59c936cde16062159eae4225c691e19c70b432b6e6f
+  languageName: node
+  linkType: hard
+
 "minimist@npm:^1.2.6":
   version: 1.2.7
   resolution: "minimist@npm:1.2.7"
@@ -12346,6 +12513,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimisted@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "minimisted@npm:2.0.1"
+  dependencies:
+    minimist: "npm:^1.2.5"
+  checksum: 10/f8c81346b1f535c0be173f4937991586ec86e55b7c94790000d1cba436053ed6a536d290321194b45512a8fa0e30678fd10c759e82ce5388c2dbe4f990b4a9ec
+  languageName: node
+  linkType: hard
+
 "minipass-collect@npm:^1.0.2":
   version: 1.0.2
   resolution: "minipass-collect@npm:1.0.2"
@@ -12729,7 +12905,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"npm-run-all2@npm:^6.2.2":
+"npm-run-all2@npm:^6.2.0":
   version: 6.2.2
   resolution: "npm-run-all2@npm:6.2.2"
   dependencies:
@@ -12854,7 +13030,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"once@npm:^1.3.0":
+"once@npm:^1.3.0, once@npm:^1.3.1":
   version: 1.4.0
   resolution: "once@npm:1.4.0"
   dependencies:
@@ -13006,6 +13182,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pako@npm:^1.0.10":
+  version: 1.0.11
+  resolution: "pako@npm:1.0.11"
+  checksum: 10/1ad07210e894472685564c4d39a08717e84c2a68a70d3c1d9e657d32394ef1670e22972a433cbfe48976cb98b154ba06855dcd3fcfba77f60f1777634bec48c0
+  languageName: node
+  linkType: hard
+
 "parent-module@npm:^1.0.0":
   version: 1.0.1
   resolution: "parent-module@npm:1.0.1"
@@ -13870,6 +14053,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.4.21, postcss@npm:^8.4.41":
+  version: 8.4.41
+  resolution: "postcss@npm:8.4.41"
+  dependencies:
+    nanoid: "npm:^3.3.7"
+    picocolors: "npm:^1.0.1"
+    source-map-js: "npm:^1.2.0"
+  checksum: 10/6e6176c2407eff60493ca60a706c6b7def20a722c3adda94ea1ece38345eb99964191336fd62b62652279cec6938e79e0b1e1d477142c8d3516e7a725a74ee37
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.4.35":
   version: 8.4.35
   resolution: "postcss@npm:8.4.35"
@@ -13914,17 +14108,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.41":
-  version: 8.4.41
-  resolution: "postcss@npm:8.4.41"
-  dependencies:
-    nanoid: "npm:^3.3.7"
-    picocolors: "npm:^1.0.1"
-    source-map-js: "npm:^1.2.0"
-  checksum: 10/6e6176c2407eff60493ca60a706c6b7def20a722c3adda94ea1ece38345eb99964191336fd62b62652279cec6938e79e0b1e1d477142c8d3516e7a725a74ee37
-  languageName: node
-  linkType: hard
-
 "preferred-pm@npm:^3.0.0":
   version: 3.1.4
   resolution: "preferred-pm@npm:3.1.4"
@@ -14280,7 +14463,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.3.1":
+"react-dom@npm:^18.2.0, react-dom@npm:^18.3.1":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
   dependencies:
@@ -14306,6 +14489,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-hot-toast@npm:^2.4.1":
+  version: 2.4.1
+  resolution: "react-hot-toast@npm:2.4.1"
+  dependencies:
+    goober: "npm:^2.1.10"
+  peerDependencies:
+    react: ">=16"
+    react-dom: ">=16"
+  checksum: 10/9af91efdb98837e39a126aff084b54db0336c5f88a7dad7c42daf7ee873d06a79d6e59f398412cc250a35ddf1a73c25700fe90b3c3a2a0c394fd17d99b2bcf8b
+  languageName: node
+  linkType: hard
+
 "react-is@npm:18.1.0":
   version: 18.1.0
   resolution: "react-is@npm:18.1.0"
@@ -14341,27 +14536,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:^6.26.0":
-  version: 6.26.0
-  resolution: "react-router-dom@npm:6.26.0"
+"react-router-dom@npm:^6.23.1":
+  version: 6.26.1
+  resolution: "react-router-dom@npm:6.26.1"
   dependencies:
-    "@remix-run/router": "npm:1.19.0"
-    react-router: "npm:6.26.0"
+    "@remix-run/router": "npm:1.19.1"
+    react-router: "npm:6.26.1"
   peerDependencies:
     react: ">=16.8"
     react-dom: ">=16.8"
-  checksum: 10/be433029a0759d5faa2cd2cb28dd3c88106cdb46042c2e804e301aefad3db17aa9021b4e3d533e0fdcde5767ed0e1d296c04fecbc3e41231c3d8be9cc307018a
+  checksum: 10/1bd255d1ff88f477699c72656e7c07702a907e644388a1bea1c648f2df0c3c86db2e90bea945b1d43eaf84ebab194f3868f3788502965ad5f20c508c6874f1fe
   languageName: node
   linkType: hard
 
-"react-router@npm:6.26.0":
-  version: 6.26.0
-  resolution: "react-router@npm:6.26.0"
+"react-router@npm:6.26.1":
+  version: 6.26.1
+  resolution: "react-router@npm:6.26.1"
   dependencies:
-    "@remix-run/router": "npm:1.19.0"
+    "@remix-run/router": "npm:1.19.1"
   peerDependencies:
     react: ">=16.8"
-  checksum: 10/d0c79a0f95a88730c0d2bfd098da9d6bdd4d7f08d4e1ddd152b5d013d3c01064afdd6fed57d4d3fa50c42c412e6d00e9217b2abd6cdbf4aaf810b7c33e728400
+  checksum: 10/b3761515c75da65a1678f005d08a6285ceccd9df7237ae6fdd9ab2ab816ef328435b75610f705ecd9ecd41c6878fd22eb9b44c5391cdef2e1ed99ddbc78de8a4
   languageName: node
   linkType: hard
 
@@ -14418,7 +14613,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18.3.1":
+"react@npm:^18.2.0, react@npm:^18.3.1":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies:
@@ -15109,7 +15304,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-buffer@npm:5.2.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:~5.2.0":
+"safe-buffer@npm:5.2.1, safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:~5.2.0":
   version: 5.2.1
   resolution: "safe-buffer@npm:5.2.1"
   checksum: 10/32872cd0ff68a3ddade7a7617b8f4c2ae8764d8b7d884c651b74457967a9e0e886267d3ecc781220629c44a865167b61c375d2da6c720c840ecd73f45d5d9451
@@ -15313,6 +15508,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sha.js@npm:^2.4.9":
+  version: 2.4.11
+  resolution: "sha.js@npm:2.4.11"
+  dependencies:
+    inherits: "npm:^2.0.1"
+    safe-buffer: "npm:^5.0.1"
+  bin:
+    sha.js: ./bin.js
+  checksum: 10/d833bfa3e0a67579a6ce6e1bc95571f05246e0a441dd8c76e3057972f2a3e098465687a4369b07e83a0375a88703577f71b5b2e966809e67ebc340dbedb478c7
+  languageName: node
+  linkType: hard
+
 "shallow-clone@npm:^3.0.0":
   version: 3.0.1
   resolution: "shallow-clone@npm:3.0.1"
@@ -15412,6 +15619,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"simple-concat@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "simple-concat@npm:1.0.1"
+  checksum: 10/4d211042cc3d73a718c21ac6c4e7d7a0363e184be6a5ad25c8a1502e49df6d0a0253979e3d50dbdd3f60ef6c6c58d756b5d66ac1e05cda9cacd2e9fc59e3876a
+  languageName: node
+  linkType: hard
+
+"simple-get@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "simple-get@npm:4.0.1"
+  dependencies:
+    decompress-response: "npm:^6.0.0"
+    once: "npm:^1.3.1"
+    simple-concat: "npm:^1.0.0"
+  checksum: 10/93f1b32319782f78f2f2234e9ce34891b7ab6b990d19d8afefaa44423f5235ce2676aae42d6743fecac6c8dfff4b808d4c24fe5265be813d04769917a9a44f36
+  languageName: node
+  linkType: hard
+
 "sisteransi@npm:^1.0.5":
   version: 1.0.5
   resolution: "sisteransi@npm:1.0.5"
@@ -16628,6 +16853,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"undici-types@npm:~6.18.2":
+  version: 6.18.2
+  resolution: "undici-types@npm:6.18.2"
+  checksum: 10/5c863f3cc65d012498cf0f8562b9d81e785c2b8b8a8d66343b9f4351ff40a3a29b500fbaea10667626fd91a32433d4c876810aafa5ab561369de702b62d4b323
+  languageName: node
+  linkType: hard
+
 "unicode-canonical-property-names-ecmascript@npm:^2.0.0":
   version: 2.0.0
   resolution: "unicode-canonical-property-names-ecmascript@npm:2.0.0"
@@ -17008,19 +17240,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-generate-file@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "vite-plugin-generate-file@npm:0.2.0"
+"vite-plugin-generate-file@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "vite-plugin-generate-file@npm:0.1.1"
   dependencies:
     ejs: "npm:^3.1.9"
     js-yaml: "npm:^4.1.0"
     mime-types: "npm:^2.1.35"
     picocolors: "npm:^1.0.0"
-  checksum: 10/b94c4b41a3042f7b765be7ef7b7d71f76a86ac11f05762d5889e58588f6f7d92e1ef64cafb54e50bd18ab9d28c4b84e33947549d6d495b5d31ddb2c557f24e42
+  checksum: 10/63dffc58e14b3b1cd1162bc7c11620be45dd6875dfd84df4c870f4887d483ee35141132718939964602d5270aeb48a40fda4458d6827531083486738f176b098
   languageName: node
   linkType: hard
 
-"vite-plugin-react-rich-svg@npm:^1.1.1":
+"vite-plugin-react-rich-svg@npm:^1.0.0":
   version: 1.1.1
   resolution: "vite-plugin-react-rich-svg@npm:1.1.1"
   dependencies:

From d88adabed26eaaf624edc339a9d720d75cff7781 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Mon, 26 Aug 2024 11:03:45 +0200
Subject: [PATCH 03/21] Update main.tsx

---
 plugins/figma/src/ui/main.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/plugins/figma/src/ui/main.tsx b/plugins/figma/src/ui/main.tsx
index 15642fddba..bd0f84c50b 100644
--- a/plugins/figma/src/ui/main.tsx
+++ b/plugins/figma/src/ui/main.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Toaster } from 'react-hot-toast';
 import { MemoryRouter } from 'react-router-dom';
-import 'dotenv/config';
 
 async function bootstrap() {
   const App = (await import('./app')).default;

From da051e087c76e5c3b5c1672d8ffae95c58c965b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Sun, 1 Sep 2024 22:42:39 +0200
Subject: [PATCH 04/21] Stuff

---
 .../figma/src/plugin/figma/updateVariables.ts |  42 ++++----
 plugins/figma/src/plugin/plugin.ts            |   9 +-
 plugins/figma/src/ui/app.tsx                  |  85 +++++----------
 .../figma/src/ui/components/Footer/Footer.tsx |  29 ++---
 .../figma/src/ui/pages/AddTheme/AddTheme.tsx  |  19 ++--
 plugins/figma/src/ui/pages/Theme/Theme.tsx    | 101 +++++++++++++++---
 plugins/figma/src/ui/pages/Themes/Themes.tsx  |   4 +-
 7 files changed, 159 insertions(+), 130 deletions(-)

diff --git a/plugins/figma/src/plugin/figma/updateVariables.ts b/plugins/figma/src/plugin/figma/updateVariables.ts
index 54dda14325..12e614d3d3 100644
--- a/plugins/figma/src/plugin/figma/updateVariables.ts
+++ b/plugins/figma/src/plugin/figma/updateVariables.ts
@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
-import type { ColorType } from '@digdir/designsystemet/color';
+import type { ThemeColors } from '@digdir/designsystemet/color';
 import { hexToRgb } from '@digdir/designsystemet/color';
 
 import type { ColorIndex, StoreThemes } from '../../common/store';
@@ -20,7 +20,7 @@ const updateColors = (
   variables: Variable[],
 ) => {
   const themeName = variable.name.split('/')[0] as FigmaModeName;
-  const themeType = variable.name.split('/')[1] as ColorType;
+  const themeType = variable.name.split('/')[1] as ThemeColors;
   const themeIndex = variable.name.split('/')[2] as ColorIndex;
 
   if (
@@ -34,13 +34,14 @@ const updateColors = (
     const oldDarkHex = rgbToHex(variable.valuesByMode[darkModeId] as RGB);
     const newDarkHex = themes.find((theme) => theme.themeId === themeName)
       ?.colors[themeType].dark[themeIndex];
-    if (newLightHex) {
+    if (newLightHex && oldLightHex !== newLightHex) {
       const lightRGB = hexToRgb(newLightHex, '1');
+
       if (lightRGB) {
         variable.setValueForMode(lightModeId, lightRGB);
       }
     }
-    if (newDarkHex) {
+    if (newDarkHex && oldDarkHex !== newDarkHex) {
       const darkRGB = hexToRgb(newDarkHex, '1');
       if (darkRGB) {
         variable.setValueForMode(darkModeId, darkRGB);
@@ -48,29 +49,32 @@ const updateColors = (
     }
   }
 
-  if (variable.name.startsWith(themeName + '/')) {
-    const varr = variables.find((variable) =>
-      variable.name.startsWith('color/' + themeType + '/' + themeIndex),
-    );
+  // 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 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);
-      }
-    }
-  }
+  //     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;
diff --git a/plugins/figma/src/plugin/plugin.ts b/plugins/figma/src/plugin/plugin.ts
index 44993ce43d..6f58b1bd83 100644
--- a/plugins/figma/src/plugin/plugin.ts
+++ b/plugins/figma/src/plugin/plugin.ts
@@ -3,17 +3,17 @@
 
 import type { ColorTheme, StoreThemes } from '../common/store';
 
+import { getFonts } from './figma/fonts';
+import { getVariables } from './figma/getVariables';
+import { generateJson } from './figma/json';
 import {
   addTheme,
-  getThemes,
   deleteTheme,
+  getThemes,
   renameTheme,
   updateTheme,
 } from './figma/themes';
-import { getVariables } from './figma/getVariables';
 import { updateVariables } from './figma/updateVariables';
-import { generateJson } from './figma/json';
-import { getFonts } from './figma/fonts';
 
 figma.showUI(__html__, { width: 710, height: 550, themeColors: true });
 
@@ -39,6 +39,7 @@ figma.ui.onmessage = (msg: {
     switch (msg.type) {
       case 'updateVariables': {
         if (msg.themes) await updateVariables(msg.themes);
+        console.log('updateVariables');
         figma.ui.postMessage({ type: 'tomato' });
         break;
       }
diff --git a/plugins/figma/src/ui/app.tsx b/plugins/figma/src/ui/app.tsx
index 847b5cc782..0349170171 100644
--- a/plugins/figma/src/ui/app.tsx
+++ b/plugins/figma/src/ui/app.tsx
@@ -3,23 +3,29 @@ import '@digdir/designsystemet-theme';
 import '@digdir/designsystemet-css';
 
 import './App.css';
-import { Routes, Route, NavLink, Navigate, useNavigate } from 'react-router-dom';
 import { useEffect } from 'react';
+import {
+  NavLink,
+  Navigate,
+  Route,
+  Routes,
+  useNavigate,
+} from 'react-router-dom';
 
 import type { StoreThemes } from '../common/store';
 import { useThemeStore } from '../common/store';
 
-import PageTwo from './pages/PageTwo/PageTwo';
-import PageThree from './pages/pageThree/PageThree';
 import { Footer } from './components/Footer/Footer';
-import Themes from './pages/Themes/Themes';
-import Theme from './pages/Theme/Theme';
-import Colors from './pages/Colors/Colors';
 import AddTheme from './pages/AddTheme/AddTheme';
+import Colors from './pages/Colors/Colors';
+import Font from './pages/Font/Font';
+import Fonts from './pages/Fonts/Fonts';
 import { Github } from './pages/Github/Github';
+import PageTwo from './pages/PageTwo/PageTwo';
+import Theme from './pages/Theme/Theme';
+import Themes from './pages/Themes/Themes';
+import PageThree from './pages/pageThree/PageThree';
 import { commitToGithub } from './utils/github';
-import Fonts from './pages/Fonts/Fonts';
-import Font from './pages/Font/Font';
 
 function App() {
   const setThemes = useThemeStore((state) => state.setThemes);
@@ -70,62 +76,25 @@ function App() {
         >
           Mine temaer
         </NavLink>
-        <NavLink
-          className='link'
-          to='/settings'
-        >
+        {/* <NavLink className='link' to='/settings'>
           Innstillinger
-        </NavLink>
+        </NavLink> */}
       </div>
 
       <div className='content'>
         <Routes>
-          <Route
-            path='/'
-            element={
-              <Navigate
-                to='/themes'
-                replace
-              />
-            }
-          />
-          <Route
-            path='/fonts'
-            element={<PageTwo />}
-          />
-          <Route
-            path='/settings'
-            element={<PageThree />}
-          />
-          <Route
-            path='/themes'
-            element={<Themes />}
-          />
+          <Route path='/' element={<Navigate to='/themes' replace />} />
+
+          <Route path='/fonts' element={<PageTwo />} />
+          <Route path='/settings' element={<PageThree />} />
+          <Route path='/themes' element={<Themes />} />
 
-          <Route
-            path='/themes/:themeId/colors'
-            element={<Colors />}
-          />
-          <Route
-            path='/themes/:themeId/fonts'
-            element={<Fonts />}
-          />
-          <Route
-            path='/themes/:themeId/fonts/fontId'
-            element={<Font />}
-          />
-          <Route
-            path='/themes/:themeId'
-            element={<Theme />}
-          />
-          <Route
-            path='/theme/add'
-            element={<AddTheme />}
-          />
-          <Route
-            path='/github'
-            element={<Github />}
-          />
+          <Route path='/themes/:themeId/colors' element={<Colors />} />
+          <Route path='/themes/:themeId/fonts' element={<Fonts />} />
+          <Route path='/themes/:themeId/fonts/fontId' element={<Font />} />
+          <Route path='/themes/:themeId' element={<Theme />} />
+          <Route path='/theme/add' element={<AddTheme />} />
+          <Route path='/github' element={<Github />} />
         </Routes>
       </div>
       <Footer />
diff --git a/plugins/figma/src/ui/components/Footer/Footer.tsx b/plugins/figma/src/ui/components/Footer/Footer.tsx
index 980682ae63..0d0a3f2040 100644
--- a/plugins/figma/src/ui/components/Footer/Footer.tsx
+++ b/plugins/figma/src/ui/components/Footer/Footer.tsx
@@ -1,5 +1,5 @@
-import { ChatElipsisIcon } from '@navikt/aksel-icons';
 import { Button, Spinner, Tooltip } from '@digdir/designsystemet-react';
+import { ChatElipsisIcon } from '@navikt/aksel-icons';
 import { Code, Github } from 'lucide-react';
 import { Link } from 'react-router-dom';
 
@@ -32,31 +32,24 @@ export const Footer = () => {
     <div className={classes.footer}>
       <div className={classes.top}>
         <div className={classes.topLeft}>
-          <Button
+          {/* <Button
             className={classes.btn}
             size='sm'
             onClick={() => handleClick()}
           >
             Oppdater variabler
-          </Button>
+          </Button> */}
         </div>
 
         <div className={classes.topRight}>
           {loading && (
-            <Spinner
-              title='fff'
-              size='sm'
-              className={classes.spinner}
-            />
+            <Spinner title='fff' size='sm' className={classes.spinner} />
           )}
         </div>
       </div>
       <div className={classes.bottom}>
         <div className={classes.bottomLeft}>
-          <Link
-            className={classes.link}
-            to='/github'
-          >
+          {/* <Link className={classes.link} to='/github'>
             <Button
               className={classes.github}
               size='sm'
@@ -67,10 +60,7 @@ export const Footer = () => {
               Github
             </Button>
           </Link>
-          <Link
-            className={classes.link}
-            to='/github'
-          >
+          <Link className={classes.link} to='/github'>
             <Button
               className={classes.github}
               size='sm'
@@ -80,14 +70,11 @@ export const Footer = () => {
               <Code size={17} />
               NPM
             </Button>
-          </Link>
+          </Link> */}
         </div>
         <div className={classes.bottomRight}>
           <div className={classes.version}>V {packageJson.version}</div>
-          <Tooltip
-            content='Feedback'
-            placement='top'
-          >
+          <Tooltip content='Feedback' placement='top'>
             <a
               href='https://github.com/digdir/designsystemet'
               rel='noreferrer'
diff --git a/plugins/figma/src/ui/pages/AddTheme/AddTheme.tsx b/plugins/figma/src/ui/pages/AddTheme/AddTheme.tsx
index 6defd90716..a002d9c31d 100644
--- a/plugins/figma/src/ui/pages/AddTheme/AddTheme.tsx
+++ b/plugins/figma/src/ui/pages/AddTheme/AddTheme.tsx
@@ -1,14 +1,14 @@
-import { useState } from 'react';
 import type { CssColor } from '@adobe/leonardo-contrast-colors';
-import { generateThemeForColor } from '@digdir/designsystemet/color';
 import { Button } from '@digdir/designsystemet-react';
+import { generateThemeForColor } from '@digdir/designsystemet/color';
+import { useState } from 'react';
 
-import { ColorPicker } from '@ui/components/ColorPicker/ColorPicker';
 import { Breadcrumbs } from '@ui/components/Breadcrumbs/Breadcrumbs';
+import { ColorPicker } from '@ui/components/ColorPicker/ColorPicker';
 
 import { getDummyTheme } from '../../../common/dummyTheme';
+import { type ColorTheme, useThemeStore } from '../../../common/store';
 import { themeToFigmaFormat } from '../../../common/utils';
-import { useThemeStore, type ColorTheme } from '../../../common/store';
 
 import classes from './AddTheme.module.css';
 
@@ -37,10 +37,7 @@ function AddTheme() {
 
   return (
     <div className={classes.page}>
-      <Breadcrumbs
-        text='Legg til nytt tema'
-        url={'/themes'}
-      />
+      <Breadcrumbs text='Legg til nytt tema' url={'/themes'} />
       <div>
         <input
           className={classes.input}
@@ -101,11 +98,7 @@ function AddTheme() {
           }}
         />
       </div>
-      <Button
-        size='sm'
-        className='btn'
-        onClick={() => handleClick()}
-      >
+      <Button size='sm' className='btn' onClick={() => handleClick()}>
         Legg til
       </Button>
     </div>
diff --git a/plugins/figma/src/ui/pages/Theme/Theme.tsx b/plugins/figma/src/ui/pages/Theme/Theme.tsx
index 26c7f485aa..4517c2af79 100644
--- a/plugins/figma/src/ui/pages/Theme/Theme.tsx
+++ b/plugins/figma/src/ui/pages/Theme/Theme.tsx
@@ -1,20 +1,24 @@
+import { Button } from '@digdir/designsystemet-react';
 import {
   AlignVerticalSpaceAround,
+  Check,
   Palette,
   Pencil,
   Shapes,
   Type,
-  Check,
 } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { useState } from 'react';
-import { Button } from '@digdir/designsystemet-react';
 
-import { Card } from '@ui/components/Card/Card';
 import { Breadcrumbs } from '@ui/components/Breadcrumbs/Breadcrumbs';
+import { Card } from '@ui/components/Card/Card';
 
-import { useThemeStore } from '../../../common/store';
+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() {
@@ -23,6 +27,18 @@ function Theme() {
   const [newName, setNewName] = useState('');
   const [editMode, setEditMode] = useState(false);
   const setLoading = useThemeStore((state) => state.setLoading);
+  const [theme, setTheme] = useState<ColorTheme>(getDummyTheme());
+  const [command, setCommand] = useState('');
+  const [themeIndex, setThemeIndex] = useState<number>(0);
+  const setThemes = useThemeStore((state) => state.setThemes);
+
+  useEffect(() => {
+    setThemeIndex(themes.findIndex((theme) => theme.themeModeId === themeId));
+    setTheme(
+      themes.find((theme) => theme.themeModeId === themeId)
+        ?.colors as ColorTheme,
+    );
+  });
 
   const Tomato = (e: string) => {
     setNewName(e);
@@ -50,6 +66,52 @@ function Theme() {
     }, 500);
   };
 
+  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.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);
+
+      setTimeout(() => {
+        parent.postMessage(
+          {
+            pluginMessage: {
+              type: 'updateVariables',
+              themes: newArray,
+            },
+          },
+          '*',
+        );
+      }, 500);
+    }
+  };
+
   const deleteClicked = () => {
     setLoading(true);
     setTimeout(() => {
@@ -78,7 +140,8 @@ function Theme() {
             text={themes.find((theme) => theme.themeModeId === themeId)?.name}
             url='/'
           />
-          {!editMode && (
+
+          {/* {!editMode && (
             <Pencil
               size={16}
               className={classes.edit}
@@ -99,9 +162,9 @@ function Theme() {
                 className={classes.edit}
               />
             </>
-          )}
+          )} */}
         </div>
-        <div className={classes.headerRight}>
+        {/* <div className={classes.headerRight}>
           <Button
             size='sm'
             color='danger'
@@ -111,15 +174,27 @@ function Theme() {
           >
             Slett tema
           </Button>
-        </div>
+        </div> */}
+      </div>
+      <div>
+        <textarea
+          value={command}
+          onChange={(e) => setCommand(e.target.value)}
+          name=''
+          id=''
+          style={{ width: 550, height: 200 }}
+        ></textarea>
+        <Button className={classes.btn} size='sm' onClick={() => handleClick()}>
+          Oppdater variabler
+        </Button>
       </div>
       <div className={classes.cards}>
-        <Card
+        {/* <Card
           url={'/themes/' + themeId + '/colors'}
           title='Farger'
           icon={<Palette />}
-        />
-        <Card
+        /> */}
+        {/* <Card
           url='/themes/altinn/colors'
           title='Border Radius'
           icon={<Shapes />}
@@ -133,7 +208,7 @@ function Theme() {
           url='/themes/altinn/colors'
           title='Avstander'
           icon={<AlignVerticalSpaceAround />}
-        />
+        /> */}
       </div>
     </div>
   );
diff --git a/plugins/figma/src/ui/pages/Themes/Themes.tsx b/plugins/figma/src/ui/pages/Themes/Themes.tsx
index c0a725074b..08de496f16 100644
--- a/plugins/figma/src/ui/pages/Themes/Themes.tsx
+++ b/plugins/figma/src/ui/pages/Themes/Themes.tsx
@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
 import { Button } from '@digdir/designsystemet-react';
+import { useEffect } from 'react';
 
 import { Card } from '@ui/components/Card/Card';
 import { CardButton } from '@ui/components/CardButton/CardButton';
@@ -39,7 +39,7 @@ function Themes() {
             />
           );
         })}
-        <CardButton url='/theme/add' />
+        {/* <CardButton url='/theme/add' /> */}
       </div>
     </div>
   );

From 140ae4f169b6f5f78e69a05e4760395e992fa7ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Tue, 1 Oct 2024 10:37:23 +0200
Subject: [PATCH 05/21] Update yarn.lock

---
 yarn.lock | 363 ++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 295 insertions(+), 68 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index f3cea559b4..04734dbdfc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2332,10 +2332,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.100.2
+  resolution: "@figma/plugin-typings@npm:1.100.2"
+  checksum: 10/cc04afed7355b8e1ab71bfab41105034cc80498b5156f3e86ea6b7e66b2882477e200fc2b84a6aad23c86d984d8906b0e1689467303da9bae09aeed4d256db00
   languageName: node
   linkType: hard
 
@@ -2454,6 +2454,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@isomorphic-git/idb-keyval@npm:3.3.2":
+  version: 3.3.2
+  resolution: "@isomorphic-git/idb-keyval@npm:3.3.2"
+  checksum: 10/d67cd1a2d1d9a264cb9b616bbd3d51fa98056946fd74a4529ea0105b90e6e2f0c241a4b4189a23cdc7a8b0b4d7a84966134dba452cf9670a8da22ff5b0f564b4
+  languageName: node
+  linkType: hard
+
+"@isomorphic-git/lightning-fs@npm:^4.6.0":
+  version: 4.6.0
+  resolution: "@isomorphic-git/lightning-fs@npm:4.6.0"
+  dependencies:
+    "@isomorphic-git/idb-keyval": "npm:3.3.2"
+    isomorphic-textencoder: "npm:1.0.1"
+    just-debounce-it: "npm:1.1.0"
+    just-once: "npm:1.1.0"
+  bin:
+    superblocktxt: src/superblocktxt.js
+  checksum: 10/e42117d132d1ebaee10940df926fdf06bc34a9127ccf9c564aaaf5007fb087d14bb830fc08a100109ae2df9057382697f17f9bbfd4bdeb66a6a0de36a64a48b8
+  languageName: node
+  linkType: hard
+
 "@istanbuljs/load-nyc-config@npm:^1.0.0":
   version: 1.1.0
   resolution: "@istanbuljs/load-nyc-config@npm:1.1.0"
@@ -3118,10 +3139,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@remix-run/router@npm:1.19.0":
-  version: 1.19.0
-  resolution: "@remix-run/router@npm:1.19.0"
-  checksum: 10/13a881fc47ca3571dcad298f6f19218c84f09f0dda38695d874a9fb1b496e42b6b37b777169d283cd1f5098a1470fa76c5143c53eb5a4078202bd12ea1541d29
+"@remix-run/router@npm:1.19.2":
+  version: 1.19.2
+  resolution: "@remix-run/router@npm:1.19.2"
+  checksum: 10/31b62b66ea68bd62018189047de7b262700113438f62407df019f81a9856a08a705b2b77454be9293518e2f5f3bbf3f8b858ac19f48cb7d89f8ab56b7b630c19
   languageName: node
   linkType: hard
 
@@ -5058,6 +5079,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^22.3.0":
+  version: 22.7.4
+  resolution: "@types/node@npm:22.7.4"
+  dependencies:
+    undici-types: "npm:~6.19.2"
+  checksum: 10/19ddab80c4eba2253c855ed67c9bbc47417183049d01e59010a738bd80d47338bab79fd1f44ae51516bd63a1db4bf21ddb38b16bf6401a2e93252068ec52e88b
+  languageName: node
+  linkType: hard
+
 "@types/object-hash@npm:^3.0.6":
   version: 3.0.6
   resolution: "@types/object-hash@npm:3.0.6"
@@ -5142,7 +5172,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:
@@ -5191,6 +5221,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"
@@ -5994,6 +6034,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"async-lock@npm:^1.4.1":
+  version: 1.4.1
+  resolution: "async-lock@npm:1.4.1"
+  checksum: 10/80d55ac95f920e880a865968b799963014f6d987dd790dd08173fae6e1af509d8cd0ab45a25daaca82e3ef8e7c939f5d128cd1facfcc5c647da8ac2409e20ef9
+  languageName: node
+  linkType: hard
+
 "async@npm:^2.6.4":
   version: 2.6.4
   resolution: "async@npm:2.6.4"
@@ -6775,6 +6822,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clean-git-ref@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "clean-git-ref@npm:2.0.1"
+  checksum: 10/b25f585ed47040ea5d699d40a2bb84d1f35afd651f3fcc05fb077224358ffd3d7509fc9edbfc4570f1fc732c987e03ac7d8ec31524ac503ac35c53cb1f5e3bf9
+  languageName: node
+  linkType: hard
+
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -7174,6 +7228,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"crc-32@npm:^1.2.0":
+  version: 1.2.2
+  resolution: "crc-32@npm:1.2.2"
+  bin:
+    crc32: bin/crc32.njs
+  checksum: 10/824f696a5baaf617809aa9cd033313c8f94f12d15ebffa69f10202480396be44aef9831d900ab291638a8022ed91c360696dd5b1ba691eb3f34e60be8835b7c3
+  languageName: node
+  linkType: hard
+
 "create-jest@npm:^29.7.0":
   version: 29.7.0
   resolution: "create-jest@npm:29.7.0"
@@ -7582,6 +7645,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"decompress-response@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "decompress-response@npm:6.0.0"
+  dependencies:
+    mimic-response: "npm:^3.1.0"
+  checksum: 10/d377cf47e02d805e283866c3f50d3d21578b779731e8c5072d6ce8c13cc31493db1c2f6784da9d1d5250822120cefa44f1deab112d5981015f2e17444b763812
+  languageName: node
+  linkType: hard
+
 "dedent@npm:^1.0.0":
   version: 1.5.3
   resolution: "dedent@npm:1.5.3"
@@ -7736,6 +7808,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"diff3@npm:0.0.3":
+  version: 0.0.3
+  resolution: "diff3@npm:0.0.3"
+  checksum: 10/9fb9983052e35209be1912c6999ee4aa1887365666ea28d5aba364ffe8514e0a745a4408a3702b5c5943e717571dcc892073b8f3b48fed5814e2c7fc1883f74e
+  languageName: node
+  linkType: hard
+
 "diffable-html@npm:^4.1.0":
   version: 4.1.0
   resolution: "diffable-html@npm:4.1.0"
@@ -8715,6 +8794,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-text-encoding@npm:^1.0.0":
+  version: 1.0.6
+  resolution: "fast-text-encoding@npm:1.0.6"
+  checksum: 10/f7b9e2e7a21e4ae5f4b8d3729850be83fb45052b28c9c38c09b8366463a291d6dc5448359238bdaf87f6a9e907d5895a94319a2c5e0e9f0786859ad6312d1d06
+  languageName: node
+  linkType: hard
+
 "fastest-levenshtein@npm:^1.0.16":
   version: 1.0.16
   resolution: "fastest-levenshtein@npm:1.0.16"
@@ -8749,29 +8835,36 @@ __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"
+    "@isomorphic-git/lightning-fs": "npm:^4.6.0"
+    "@react-awesome/use-click-outside": "npm:^0.0.3"
+    "@types/node": "npm:^22.3.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"
-    postcss: "npm:^8.4.41"
-    react: "npm:^18.3.1"
-    react-dom: "npm:^18.3.1"
-    react-router-dom: "npm:^6.26.0"
-    rollup: "npm:^4.22.4"
-    vite: "npm:^5.3.6"
-    vite-plugin-generate-file: "npm:^0.2.0"
-    vite-plugin-react-rich-svg: "npm:^1.1.1"
+    isomorphic-git: "npm:^1.27.0"
+    lucide-react: "npm:^0.399.0"
+    npm-run-all2: "npm:^6.2.0"
+    postcss: "npm:^8.4.21"
+    react: "npm:^18.2.0"
+    react-color: "npm:^2.19.3"
+    react-dom: "npm:^18.2.0"
+    react-hot-toast: "npm:^2.4.1"
+    react-router-dom: "npm:^6.23.1"
+    vite-plugin-generate-file: "npm:^0.1.1"
+    vite-plugin-react-rich-svg: "npm:^1.0.0"
     vite-plugin-singlefile: "npm:^2.0.2"
+    zustand: "npm:^4.5.4"
   languageName: unknown
   linkType: soft
 
@@ -9466,6 +9559,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"goober@npm:^2.1.10":
+  version: 2.1.14
+  resolution: "goober@npm:2.1.14"
+  peerDependencies:
+    csstype: ^3.0.10
+  checksum: 10/372f18333ef64c403d29be7c1175cc9cd74cb947ec52cd42fbb1cf3f9870ac1dfec9c7671192cbf47ebc0ec17d8b05b6ef9a2b92952397d5b555a692381d5eaa
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -9958,6 +10060,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ignore@npm:^5.1.4":
+  version: 5.3.2
+  resolution: "ignore@npm:5.3.2"
+  checksum: 10/cceb6a457000f8f6a50e1196429750d782afce5680dd878aa4221bd79972d68b3a55b4b1458fc682be978f4d3c6a249046aa0880637367216444ab7b014cfc98
+  languageName: node
+  linkType: hard
+
 "ignore@npm:^5.2.0, ignore@npm:^5.2.4":
   version: 5.2.4
   resolution: "ignore@npm:5.2.4"
@@ -10455,6 +10564,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"isomorphic-git@npm:^1.27.0":
+  version: 1.27.1
+  resolution: "isomorphic-git@npm:1.27.1"
+  dependencies:
+    async-lock: "npm:^1.4.1"
+    clean-git-ref: "npm:^2.0.1"
+    crc-32: "npm:^1.2.0"
+    diff3: "npm:0.0.3"
+    ignore: "npm:^5.1.4"
+    minimisted: "npm:^2.0.0"
+    pako: "npm:^1.0.10"
+    pify: "npm:^4.0.1"
+    readable-stream: "npm:^3.4.0"
+    sha.js: "npm:^2.4.9"
+    simple-get: "npm:^4.0.1"
+  bin:
+    isogit: cli.cjs
+  checksum: 10/f0205552b0dfb5173e8dfc651c6901cc01ac03fbf5ddeff8b1d73d7707fb741c7ca16b25254de598981206c5d1179799eb33eb1d1a8456002c7210f52108f25a
+  languageName: node
+  linkType: hard
+
+"isomorphic-textencoder@npm:1.0.1":
+  version: 1.0.1
+  resolution: "isomorphic-textencoder@npm:1.0.1"
+  dependencies:
+    fast-text-encoding: "npm:^1.0.0"
+  checksum: 10/9bd0c04bff7b1dc9e410d2f9a2705ca4cc288872929d88fbb7758f06b5147de8dbaea5f95ce6cf4d314f064643f3d42d69a07bbb68df0261e81153d2d56f77f3
+  languageName: node
+  linkType: hard
+
 "istanbul-lib-coverage@npm:^3.0.0, istanbul-lib-coverage@npm:^3.2.0, istanbul-lib-coverage@npm:^3.2.2":
   version: 3.2.2
   resolution: "istanbul-lib-coverage@npm:3.2.2"
@@ -11385,6 +11524,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"just-debounce-it@npm:1.1.0":
+  version: 1.1.0
+  resolution: "just-debounce-it@npm:1.1.0"
+  checksum: 10/94ecf7e7cd49093e4d5b282fea2f6bc7b6866ff835a4739dc589228238562ecaeb4cf8cb2ae89f5c0c488235c16a96dcbb90920eff631fed39d9782fdffcdc80
+  languageName: node
+  linkType: hard
+
+"just-once@npm:1.1.0":
+  version: 1.1.0
+  resolution: "just-once@npm:1.1.0"
+  checksum: 10/e6bff9ee50bbe10e319decf6d19f9ed97e82a612fb56d63d4612910d84b1734a5697225bc098c7c0a7c404f844324eee073bf2bfcd4dcf575cd613aa9fe32ea5
+  languageName: node
+  linkType: hard
+
 "keyv@npm:^4.5.4":
   version: 4.5.4
   resolution: "keyv@npm:4.5.4"
@@ -11724,6 +11877,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-react@npm:^0.399.0":
+  version: 0.399.0
+  resolution: "lucide-react@npm:0.399.0"
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10/89212e54dc58c99f6d7593fc4ac5020771ec57bf334a4f5c1280df131cfb99b2c2ffabcf44a7c26670bee29979d687e7b4318b5d8681d404714faa1e9cc2a6ce
+  languageName: node
+  linkType: hard
+
 "lz-string@npm:^1.5.0":
   version: 1.5.0
   resolution: "lz-string@npm:1.5.0"
@@ -12685,6 +12847,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mimic-response@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "mimic-response@npm:3.1.0"
+  checksum: 10/7e719047612411fe071332a7498cf0448bbe43c485c0d780046c76633a771b223ff49bd00267be122cedebb897037fdb527df72335d0d0f74724604ca70b37ad
+  languageName: node
+  linkType: hard
+
 "min-indent@npm:^1.0.0, min-indent@npm:^1.0.1":
   version: 1.0.1
   resolution: "min-indent@npm:1.0.1"
@@ -12737,6 +12906,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimist@npm:^1.2.5, minimist@npm:^1.2.8":
+  version: 1.2.8
+  resolution: "minimist@npm:1.2.8"
+  checksum: 10/908491b6cc15a6c440ba5b22780a0ba89b9810e1aea684e253e43c4e3b8d56ec1dcdd7ea96dde119c29df59c936cde16062159eae4225c691e19c70b432b6e6f
+  languageName: node
+  linkType: hard
+
 "minimist@npm:^1.2.6":
   version: 1.2.7
   resolution: "minimist@npm:1.2.7"
@@ -12744,10 +12920,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.2.8":
-  version: 1.2.8
-  resolution: "minimist@npm:1.2.8"
-  checksum: 10/908491b6cc15a6c440ba5b22780a0ba89b9810e1aea684e253e43c4e3b8d56ec1dcdd7ea96dde119c29df59c936cde16062159eae4225c691e19c70b432b6e6f
+"minimisted@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "minimisted@npm:2.0.1"
+  dependencies:
+    minimist: "npm:^1.2.5"
+  checksum: 10/f8c81346b1f535c0be173f4937991586ec86e55b7c94790000d1cba436053ed6a536d290321194b45512a8fa0e30678fd10c759e82ce5388c2dbe4f990b4a9ec
   languageName: node
   linkType: hard
 
@@ -13152,9 +13330,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"npm-run-all2@npm:^6.2.2":
-  version: 6.2.2
-  resolution: "npm-run-all2@npm:6.2.2"
+"npm-run-all2@npm:^6.2.0":
+  version: 6.2.3
+  resolution: "npm-run-all2@npm:6.2.3"
   dependencies:
     ansi-styles: "npm:^6.2.1"
     cross-spawn: "npm:^7.0.3"
@@ -13168,7 +13346,7 @@ __metadata:
     npm-run-all2: bin/npm-run-all/index.js
     run-p: bin/run-p/index.js
     run-s: bin/run-s/index.js
-  checksum: 10/79995322365ab1189bf00cd531b3b2c410334a8e0d54bf1045fed3b59117873e8a0aeafdc1f543f0cef295bdca1fe5cfea5613e7ed4cc65f396b72db587257f5
+  checksum: 10/4fd4186cfc87d42555919337fce245f276be572d9c4a217444f9afbfad05b3d6b05c7c45f13cbc21a8280c4898d03c2ec22c0ce8bcfe00b5eccce19f36854d24
   languageName: node
   linkType: hard
 
@@ -13314,7 +13492,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"once@npm:^1.3.0":
+"once@npm:^1.3.0, once@npm:^1.3.1":
   version: 1.4.0
   resolution: "once@npm:1.4.0"
   dependencies:
@@ -13497,6 +13675,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pako@npm:^1.0.10":
+  version: 1.0.11
+  resolution: "pako@npm:1.0.11"
+  checksum: 10/1ad07210e894472685564c4d39a08717e84c2a68a70d3c1d9e657d32394ef1670e22972a433cbfe48976cb98b154ba06855dcd3fcfba77f60f1777634bec48c0
+  languageName: node
+  linkType: hard
+
 "parent-module@npm:^1.0.0":
   version: 1.0.1
   resolution: "parent-module@npm:1.0.1"
@@ -14389,6 +14574,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.4.21, postcss@npm:^8.4.43":
+  version: 8.4.47
+  resolution: "postcss@npm:8.4.47"
+  dependencies:
+    nanoid: "npm:^3.3.7"
+    picocolors: "npm:^1.1.0"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10/f2b50ba9b6fcb795232b6bb20de7cdc538c0025989a8ed9c4438d1960196ba3b7eaff41fdb1a5c701b3504651ea87aeb685577707f0ae4d6ce6f3eae5df79a81
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.4.35":
   version: 8.4.35
   resolution: "postcss@npm:8.4.35"
@@ -14422,17 +14618,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.43":
-  version: 8.4.47
-  resolution: "postcss@npm:8.4.47"
-  dependencies:
-    nanoid: "npm:^3.3.7"
-    picocolors: "npm:^1.1.0"
-    source-map-js: "npm:^1.2.1"
-  checksum: 10/f2b50ba9b6fcb795232b6bb20de7cdc538c0025989a8ed9c4438d1960196ba3b7eaff41fdb1a5c701b3504651ea87aeb685577707f0ae4d6ce6f3eae5df79a81
-  languageName: node
-  linkType: hard
-
 "preferred-pm@npm:^3.0.0":
   version: 3.1.4
   resolution: "preferred-pm@npm:3.1.4"
@@ -14802,7 +14987,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.3.1":
+"react-dom@npm:^18.2.0, react-dom@npm:^18.3.1":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
   dependencies:
@@ -14828,6 +15013,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-hot-toast@npm:^2.4.1":
+  version: 2.4.1
+  resolution: "react-hot-toast@npm:2.4.1"
+  dependencies:
+    goober: "npm:^2.1.10"
+  peerDependencies:
+    react: ">=16"
+    react-dom: ">=16"
+  checksum: 10/9af91efdb98837e39a126aff084b54db0336c5f88a7dad7c42daf7ee873d06a79d6e59f398412cc250a35ddf1a73c25700fe90b3c3a2a0c394fd17d99b2bcf8b
+  languageName: node
+  linkType: hard
+
 "react-is@npm:18.1.0":
   version: 18.1.0
   resolution: "react-is@npm:18.1.0"
@@ -14863,27 +15060,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:^6.26.0":
-  version: 6.26.0
-  resolution: "react-router-dom@npm:6.26.0"
+"react-router-dom@npm:^6.23.1":
+  version: 6.26.2
+  resolution: "react-router-dom@npm:6.26.2"
   dependencies:
-    "@remix-run/router": "npm:1.19.0"
-    react-router: "npm:6.26.0"
+    "@remix-run/router": "npm:1.19.2"
+    react-router: "npm:6.26.2"
   peerDependencies:
     react: ">=16.8"
     react-dom: ">=16.8"
-  checksum: 10/be433029a0759d5faa2cd2cb28dd3c88106cdb46042c2e804e301aefad3db17aa9021b4e3d533e0fdcde5767ed0e1d296c04fecbc3e41231c3d8be9cc307018a
+  checksum: 10/4eee37839bd1a660807c090b4d272e4aa9b95d8a9a932cdcdf7c5b10735f39b6db73bad79b08a3012386a7e225ff6bf60435e2741fb7c68e137ac5a6295d4308
   languageName: node
   linkType: hard
 
-"react-router@npm:6.26.0":
-  version: 6.26.0
-  resolution: "react-router@npm:6.26.0"
+"react-router@npm:6.26.2":
+  version: 6.26.2
+  resolution: "react-router@npm:6.26.2"
   dependencies:
-    "@remix-run/router": "npm:1.19.0"
+    "@remix-run/router": "npm:1.19.2"
   peerDependencies:
     react: ">=16.8"
-  checksum: 10/d0c79a0f95a88730c0d2bfd098da9d6bdd4d7f08d4e1ddd152b5d013d3c01064afdd6fed57d4d3fa50c42c412e6d00e9217b2abd6cdbf4aaf810b7c33e728400
+  checksum: 10/496e855b53e61066c1791e354f5d79eab56a128d9722fdc6486c3ecd3b3a0bf9968e927028f429893b157f3cc10fc09e890a055847723ee242663e7995fedc9d
   languageName: node
   linkType: hard
 
@@ -14940,7 +15137,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18.3.1":
+"react@npm:^18.2.0, react@npm:^18.3.1":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies:
@@ -14989,7 +15186,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:^3.1.1":
+"readable-stream@npm:^3.1.1, readable-stream@npm:^3.4.0":
   version: 3.6.2
   resolution: "readable-stream@npm:3.6.2"
   dependencies:
@@ -15621,7 +15818,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-buffer@npm:5.2.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:~5.2.0":
+"safe-buffer@npm:5.2.1, safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:~5.2.0":
   version: 5.2.1
   resolution: "safe-buffer@npm:5.2.1"
   checksum: 10/32872cd0ff68a3ddade7a7617b8f4c2ae8764d8b7d884c651b74457967a9e0e886267d3ecc781220629c44a865167b61c375d2da6c720c840ecd73f45d5d9451
@@ -15855,6 +16052,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sha.js@npm:^2.4.9":
+  version: 2.4.11
+  resolution: "sha.js@npm:2.4.11"
+  dependencies:
+    inherits: "npm:^2.0.1"
+    safe-buffer: "npm:^5.0.1"
+  bin:
+    sha.js: ./bin.js
+  checksum: 10/d833bfa3e0a67579a6ce6e1bc95571f05246e0a441dd8c76e3057972f2a3e098465687a4369b07e83a0375a88703577f71b5b2e966809e67ebc340dbedb478c7
+  languageName: node
+  linkType: hard
+
 "shallow-clone@npm:^3.0.0":
   version: 3.0.1
   resolution: "shallow-clone@npm:3.0.1"
@@ -15954,6 +16163,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"simple-concat@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "simple-concat@npm:1.0.1"
+  checksum: 10/4d211042cc3d73a718c21ac6c4e7d7a0363e184be6a5ad25c8a1502e49df6d0a0253979e3d50dbdd3f60ef6c6c58d756b5d66ac1e05cda9cacd2e9fc59e3876a
+  languageName: node
+  linkType: hard
+
+"simple-get@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "simple-get@npm:4.0.1"
+  dependencies:
+    decompress-response: "npm:^6.0.0"
+    once: "npm:^1.3.1"
+    simple-concat: "npm:^1.0.0"
+  checksum: 10/93f1b32319782f78f2f2234e9ce34891b7ab6b990d19d8afefaa44423f5235ce2676aae42d6743fecac6c8dfff4b808d4c24fe5265be813d04769917a9a44f36
+  languageName: node
+  linkType: hard
+
 "sisteransi@npm:^1.0.5":
   version: 1.0.5
   resolution: "sisteransi@npm:1.0.5"
@@ -17617,28 +17844,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-generate-file@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "vite-plugin-generate-file@npm:0.2.0"
+"vite-plugin-generate-file@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "vite-plugin-generate-file@npm:0.1.1"
   dependencies:
     ejs: "npm:^3.1.9"
     js-yaml: "npm:^4.1.0"
     mime-types: "npm:^2.1.35"
     picocolors: "npm:^1.0.0"
-  checksum: 10/b94c4b41a3042f7b765be7ef7b7d71f76a86ac11f05762d5889e58588f6f7d92e1ef64cafb54e50bd18ab9d28c4b84e33947549d6d495b5d31ddb2c557f24e42
+  checksum: 10/63dffc58e14b3b1cd1162bc7c11620be45dd6875dfd84df4c870f4887d483ee35141132718939964602d5270aeb48a40fda4458d6827531083486738f176b098
   languageName: node
   linkType: hard
 
-"vite-plugin-react-rich-svg@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "vite-plugin-react-rich-svg@npm:1.1.1"
+"vite-plugin-react-rich-svg@npm:^1.0.0":
+  version: 1.1.2
+  resolution: "vite-plugin-react-rich-svg@npm:1.1.2"
   dependencies:
     "@svgr/core": "npm:^8.1.0"
     "@svgr/plugin-jsx": "npm:^8.1.0"
     "@svgr/plugin-prettier": "npm:^8.1.0"
     "@svgr/plugin-svgo": "npm:^8.1.0"
     vite: "npm:^5.0.11"
-  checksum: 10/43d7c11134388c5919ef95dd33621621e9f4379fd2a4845d16113a7dcc4c1d001500ccbf495d00ee5c06d9219a8f55de2e6666b905514e9ceee030425d0c5e05
+  checksum: 10/f54b25898d7234f222fe3c8ae42bd9f130fbd6a412fdc728f213a5dfa26bafa6cf3177d9f983b5452c768748e1cc6ee530450d7a97be01282b60fcf014701532
   languageName: node
   linkType: hard
 

From 246041fdac5d20f353d930cf8c4684b25208cd39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Tue, 1 Oct 2024 10:38:42 +0200
Subject: [PATCH 06/21] Delete PageOne.tsx

---
 .../src/ui/pages/PageOne/PageOne.tsx          | 134 ------------------
 1 file changed, 134 deletions(-)
 delete mode 100644 plugins/figma-plugin/src/ui/pages/PageOne/PageOne.tsx

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 a7c99ab955..0000000000
--- a/plugins/figma-plugin/src/ui/pages/PageOne/PageOne.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import {
-  Button,
-  Heading,
-  Link,
-  Paragraph,
-  Textarea,
-  ToggleGroup,
-} 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' size='2xs'>
-          Oppdater fargetema
-        </Heading>
-
-        <Paragraph 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'
-          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>
-        <Textarea
-          className='textarea'
-          cols={40}
-          rows={7}
-          placeholder='Lim inn JSON her'
-          description=''
-          error={errorText}
-          label='JSON'
-          size='sm'
-          value={jsonText}
-          onChange={(e) => setJsonText(e.target.value)}
-        />
-        <Button onClick={() => onSubmit()} size='sm' className='button'>
-          Oppdater variabler
-        </Button>
-        {isLoading && <Toast />}
-      </div>
-    </div>
-  );
-}
-
-export default PageOne;

From 41962e89f2bb06d7931155a1ff748d9169731643 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Tue, 1 Oct 2024 11:17:23 +0200
Subject: [PATCH 07/21] Stuff

---
 plugins/figma/src/plugin/figma/fonts.ts       |  5 +++-
 plugins/figma/src/plugin/figma/themes.ts      |  8 +++----
 plugins/figma/src/ui/app.tsx                  |  1 +
 .../ui/components/Breadcrumbs/Breadcrumbs.tsx |  9 +++-----
 plugins/figma/src/ui/components/Card/Card.tsx |  5 +---
 .../ui/components/CardButton/CardButton.tsx   |  5 +---
 .../ui/components/CodeSnippet/CodeSnippet.tsx | 12 +++++-----
 .../ui/components/ColorPicker/ColorPicker.tsx | 16 ++++---------
 .../src/ui/components/Textfield/Textfield.tsx |  7 +-----
 .../figma/src/ui/components/Toast/Toast.tsx   | 11 ++-------
 plugins/figma/src/ui/pages/Colors/Colors.tsx  |  8 +++----
 plugins/figma/src/ui/pages/Font/Font.tsx      | 12 +++-------
 plugins/figma/src/ui/pages/Fonts/Fonts.tsx    | 15 ++++++++----
 .../figma/src/ui/pages/PageOne/PageOne.tsx    | 23 +------------------
 .../figma/src/ui/pages/PageTwo/PageTwo.tsx    |  6 +----
 plugins/figma/tsconfig.node.json              |  4 +---
 plugins/figma/vite.config.ui.ts               |  2 +-
 17 files changed, 49 insertions(+), 100 deletions(-)

diff --git a/plugins/figma/src/plugin/figma/fonts.ts b/plugins/figma/src/plugin/figma/fonts.ts
index a6d04bb0e6..30b85bcd7d 100644
--- a/plugins/figma/src/plugin/figma/fonts.ts
+++ b/plugins/figma/src/plugin/figma/fonts.ts
@@ -8,7 +8,10 @@ export const getFonts = async () => {
   const fontArray: FontTest[] = [];
 
   for (const [index, font] of fonts.entries()) {
-    if (index > 0 && fontArray[fontArray.length - 1].name === font.fontName.family) {
+    if (
+      index > 0 &&
+      fontArray[fontArray.length - 1].name === font.fontName.family
+    ) {
       const found = fontArray.find((f) => f.name === font.fontName.family);
       if (found) {
         found.styles.push(font.fontName.style);
diff --git a/plugins/figma/src/plugin/figma/themes.ts b/plugins/figma/src/plugin/figma/themes.ts
index 88f2b5d60d..b5adc48d05 100644
--- a/plugins/figma/src/plugin/figma/themes.ts
+++ b/plugins/figma/src/plugin/figma/themes.ts
@@ -4,12 +4,12 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
-import { hexToRgb, type ColorType } from '@digdir/designsystemet/color';
+import { type ColorType, hexToRgb } from '@digdir/designsystemet/color';
 
+import { getDummyFonts } from '../../common/dummyFonts';
+import { getDummyTheme } from '../../common/dummyTheme';
 import type { ColorIndex, ColorTheme, StoreThemes } from '../../common/store';
 import { rgbToHex } from '../../common/utils';
-import { getDummyTheme } from '../../common/dummyTheme';
-import { getDummyFonts } from '../../common/dummyFonts';
 
 export const getThemes = async () => {
   const collections = await figma.variables.getLocalVariableCollectionsAsync();
@@ -225,7 +225,7 @@ export const renameTheme = async (
 };
 
 export const updateTheme = async () => {
-  let variables = await figma.variables.getLocalVariablesAsync('COLOR');
+  const variables = await figma.variables.getLocalVariablesAsync('COLOR');
   const collections = await figma.variables.getLocalVariableCollectionsAsync();
   const modeCollection = collections.find((col) => col.name === 'Mode');
   const lightModeId = modeCollection?.modes[0].modeId;
diff --git a/plugins/figma/src/ui/app.tsx b/plugins/figma/src/ui/app.tsx
index 0349170171..0479121085 100644
--- a/plugins/figma/src/ui/app.tsx
+++ b/plugins/figma/src/ui/app.tsx
@@ -36,6 +36,7 @@ function App() {
   useEffect(() => {
     parent.postMessage({ pluginMessage: { type: 'getThemes' } }, '*');
     parent.postMessage({ pluginMessage: { type: 'getFonts' } }, '*');
+    // biome-ignore lint/suspicious/noGlobalAssign: <explanation>
     onmessage = (event: {
       data: {
         pluginMessage: {
diff --git a/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.tsx b/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.tsx
index 431b328c1c..8fbb95fb0d 100644
--- a/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,6 +1,6 @@
-import { Link } from 'react-router-dom';
-import { ChevronLeft } from 'lucide-react';
 import cl from 'clsx/lite';
+import { ChevronLeft } from 'lucide-react';
+import { Link } from 'react-router-dom';
 
 import classes from './Breadcrumbs.module.css';
 
@@ -13,10 +13,7 @@ type BreadcrumbsProps = {
 export const Breadcrumbs = ({ text, url, className }: BreadcrumbsProps) => {
   return (
     <div className={cl(classes.breadcrumbs, className)}>
-      <Link
-        to={url}
-        className={classes.back}
-      >
+      <Link to={url} className={classes.back}>
         <ChevronLeft size={18} />
       </Link>
       <div className={classes.text}>{text}</div>
diff --git a/plugins/figma/src/ui/components/Card/Card.tsx b/plugins/figma/src/ui/components/Card/Card.tsx
index f6c11d04c7..c7c0138469 100644
--- a/plugins/figma/src/ui/components/Card/Card.tsx
+++ b/plugins/figma/src/ui/components/Card/Card.tsx
@@ -15,10 +15,7 @@ type CardProps = {
 
 export const Card = ({ title, icon, url, colors }: CardProps) => {
   return (
-    <Link
-      to={url}
-      className={classes.card}
-    >
+    <Link to={url} className={classes.card}>
       {icon && <div className={classes.icon}>{icon}</div>}
       {colors && (
         <div className={classes.circles}>
diff --git a/plugins/figma/src/ui/components/CardButton/CardButton.tsx b/plugins/figma/src/ui/components/CardButton/CardButton.tsx
index f62511ab46..178f0f4a9c 100644
--- a/plugins/figma/src/ui/components/CardButton/CardButton.tsx
+++ b/plugins/figma/src/ui/components/CardButton/CardButton.tsx
@@ -4,10 +4,7 @@ import { Link } from 'react-router-dom';
 import classes from './CardButton.module.css';
 export const CardButton = ({ url }: { url: string }) => {
   return (
-    <Link
-      to={url}
-      className={classes.cardBtn}
-    >
+    <Link to={url} className={classes.cardBtn}>
       <Plus />
     </Link>
   );
diff --git a/plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.tsx b/plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.tsx
index 2dd17abc04..5a1ae6f301 100644
--- a/plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.tsx
+++ b/plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.tsx
@@ -1,14 +1,14 @@
-import { useEffect, useState } from 'react';
+import { Tooltip } from '@digdir/designsystemet-react';
 import { FilesIcon } from '@navikt/aksel-icons';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { format } from 'prettier/standalone.js';
-import * as prettierMarkdown from 'prettier/plugins/markdown.js';
+import * as prettierEstree from 'prettier/plugins/estree';
 import * as prettierHtml from 'prettier/plugins/html.js';
+import * as prettierMarkdown from 'prettier/plugins/markdown.js';
 import * as prettierCSS from 'prettier/plugins/postcss.js';
 import * as prettierTypescript from 'prettier/plugins/typescript.js';
-import * as prettierEstree from 'prettier/plugins/estree';
+import { format } from 'prettier/standalone.js';
+import { useEffect, useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-import { Tooltip } from '@digdir/designsystemet-react';
 
 import classes from './CodeSnippet.module.css';
 
diff --git a/plugins/figma/src/ui/components/ColorPicker/ColorPicker.tsx b/plugins/figma/src/ui/components/ColorPicker/ColorPicker.tsx
index 48fc728960..2bc5362991 100644
--- a/plugins/figma/src/ui/components/ColorPicker/ColorPicker.tsx
+++ b/plugins/figma/src/ui/components/ColorPicker/ColorPicker.tsx
@@ -1,8 +1,8 @@
-import { ChromePicker } from 'react-color';
+import type { CssColor } from '@adobe/leonardo-contrast-colors';
+import { useClickOutside } from '@react-awesome/use-click-outside';
 import cl from 'clsx';
 import { useRef, useState } from 'react';
-import { useClickOutside } from '@react-awesome/use-click-outside';
-import type { CssColor } from '@adobe/leonardo-contrast-colors';
+import { ChromePicker } from 'react-color';
 
 import classes from './ColorPicker.module.css';
 
@@ -28,14 +28,8 @@ export const ColorPicker = ({
   });
 
   return (
-    <div
-      className={classes.container}
-      ref={ref}
-    >
-      <button
-        className={classes.picker}
-        onClick={() => handleClick()}
-      >
+    <div className={classes.container} ref={ref}>
+      <button className={classes.picker} onClick={() => handleClick()}>
         <div
           className={classes.circle}
           style={{ backgroundColor: color }}
diff --git a/plugins/figma/src/ui/components/Textfield/Textfield.tsx b/plugins/figma/src/ui/components/Textfield/Textfield.tsx
index d6c5b55e54..f980bc257d 100644
--- a/plugins/figma/src/ui/components/Textfield/Textfield.tsx
+++ b/plugins/figma/src/ui/components/Textfield/Textfield.tsx
@@ -7,10 +7,5 @@ type TextfieldProps = {
 };
 
 export const Textfield = ({ ...rest }: TextfieldProps) => {
-  return (
-    <DSTextfield
-      {...rest}
-      className={classes.input}
-    />
-  );
+  return <DSTextfield {...rest} className={classes.input} />;
 };
diff --git a/plugins/figma/src/ui/components/Toast/Toast.tsx b/plugins/figma/src/ui/components/Toast/Toast.tsx
index 94ad757597..9901e95746 100644
--- a/plugins/figma/src/ui/components/Toast/Toast.tsx
+++ b/plugins/figma/src/ui/components/Toast/Toast.tsx
@@ -27,21 +27,14 @@ export const Toast = () => {
       {success && (
         <>
           <div className='icon'>
-            <CheckmarkIcon
-              title='a11y-title'
-              fontSize='2rem'
-            />
+            <CheckmarkIcon title='a11y-title' fontSize='2rem' />
           </div>{' '}
           Oppdatering vellykket!
         </>
       )}
       {!success && (
         <>
-          <Spinner
-            color='accent'
-            title='loading'
-            size='sm'
-          />
+          <Spinner color='accent' title='loading' size='sm' />
           Oppdaterer variabler...
         </>
       )}
diff --git a/plugins/figma/src/ui/pages/Colors/Colors.tsx b/plugins/figma/src/ui/pages/Colors/Colors.tsx
index db50e96be8..b3a28d86bc 100644
--- a/plugins/figma/src/ui/pages/Colors/Colors.tsx
+++ b/plugins/figma/src/ui/pages/Colors/Colors.tsx
@@ -1,18 +1,18 @@
+import type { CssColor } from '@adobe/leonardo-contrast-colors';
 import type { ThemeInfo } from '@digdir/designsystemet/color';
 import { generateThemeForColor } from '@digdir/designsystemet/color';
-import type { CssColor } from '@adobe/leonardo-contrast-colors';
-import { useParams } from 'react-router-dom';
 import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
 
-import { ColorPicker } from '@ui/components/ColorPicker/ColorPicker';
 import { Breadcrumbs } from '@ui/components/Breadcrumbs/Breadcrumbs';
+import { ColorPicker } from '@ui/components/ColorPicker/ColorPicker';
 
+import { getDummyTheme } from '../../../common/dummyTheme';
 import type {
   ColorTheme,
   ThemeInfo as testThemeInfo,
 } from '../../../common/store';
 import { useThemeStore } from '../../../common/store';
-import { getDummyTheme } from '../../../common/dummyTheme';
 
 import classes from './Colors.module.css';
 
diff --git a/plugins/figma/src/ui/pages/Font/Font.tsx b/plugins/figma/src/ui/pages/Font/Font.tsx
index c2a736475b..7180a5095d 100644
--- a/plugins/figma/src/ui/pages/Font/Font.tsx
+++ b/plugins/figma/src/ui/pages/Font/Font.tsx
@@ -1,7 +1,7 @@
-import { useParams } from 'react-router-dom';
 import { NativeSelect, Textfield } from '@digdir/designsystemet-react';
 import cl from 'clsx/lite';
 import { useState } from 'react';
+import { useParams } from 'react-router-dom';
 
 import { useThemeStore } from '../../../common/store';
 import { Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs';
@@ -21,10 +21,7 @@ function Font() {
   const getFontOptions = () => {
     return fonts.map((font) => {
       return (
-        <option
-          key={font.name}
-          value={font.name}
-        >
+        <option key={font.name} value={font.name}>
           {font.name}
         </option>
       );
@@ -36,10 +33,7 @@ function Font() {
       .find((font) => font.name === name)
       ?.styles.map((style) => {
         return (
-          <option
-            key={style}
-            value={style}
-          >
+          <option key={style} value={style}>
             {style}
           </option>
         );
diff --git a/plugins/figma/src/ui/pages/Fonts/Fonts.tsx b/plugins/figma/src/ui/pages/Fonts/Fonts.tsx
index cfcb094753..8d317b1242 100644
--- a/plugins/figma/src/ui/pages/Fonts/Fonts.tsx
+++ b/plugins/figma/src/ui/pages/Fonts/Fonts.tsx
@@ -1,10 +1,10 @@
-import { useParams } from 'react-router-dom';
 import { Type } from 'lucide-react';
+import { useParams } from 'react-router-dom';
 
-import { Card } from '../../components/Card/Card';
 import { useThemeStore } from '../../../common/store';
-import { CardButton } from '../../components/CardButton/CardButton';
 import { Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs';
+import { Card } from '../../components/Card/Card';
+import { CardButton } from '../../components/CardButton/CardButton';
 
 import classes from './Fonts.module.css';
 
@@ -13,13 +13,18 @@ const Fonts = () => {
   const themes = useThemeStore((state) => state.themes);
 
   const getTheme = () => {
-    return themes.find((theme) => theme.themeModeId === themeId) || { fonts: [] };
+    return (
+      themes.find((theme) => theme.themeModeId === themeId) || { fonts: [] }
+    );
   };
 
   return (
     <div className={classes.content}>
       <Breadcrumbs
-        text={'Fonter - ' + themes.find((theme) => theme.themeModeId === themeId)?.name}
+        text={
+          'Fonter - ' +
+          themes.find((theme) => theme.themeModeId === themeId)?.name
+        }
         url='/'
       />
       <div className={classes.cards}>
diff --git a/plugins/figma/src/ui/pages/PageOne/PageOne.tsx b/plugins/figma/src/ui/pages/PageOne/PageOne.tsx
index 5392d3dc43..26412f346c 100644
--- a/plugins/figma/src/ui/pages/PageOne/PageOne.tsx
+++ b/plugins/figma/src/ui/pages/PageOne/PageOne.tsx
@@ -78,28 +78,7 @@ function PageOne() {
   };
   return (
     <div className={classes.content}>
-      <div className={classes.pickers}>
-        <ColorPicker
-          color={accent}
-          title='Accent'
-        />
-        <ColorPicker
-          color={neutral}
-          title='Neutral'
-        />
-        <ColorPicker
-          color={brand1}
-          title='Brand 1'
-        />
-        <ColorPicker
-          color={brand2}
-          title='Brand 2'
-        />
-        <ColorPicker
-          color={brand3}
-          title='Brand 3'
-        />
-      </div>
+      <div className={classes.pickers}></div>
     </div>
   );
 }
diff --git a/plugins/figma/src/ui/pages/PageTwo/PageTwo.tsx b/plugins/figma/src/ui/pages/PageTwo/PageTwo.tsx
index e3887cde9c..679c260a2d 100644
--- a/plugins/figma/src/ui/pages/PageTwo/PageTwo.tsx
+++ b/plugins/figma/src/ui/pages/PageTwo/PageTwo.tsx
@@ -7,11 +7,7 @@ function PageTwo() {
   return (
     <div className='content'>
       <div>
-        <Card
-          url={'/themes/colors'}
-          title='Inter'
-          icon={<Type />}
-        />
+        <Card url={'/themes/colors'} title='Inter' icon={<Type />} />
         <CardButton />
       </div>
     </div>
diff --git a/plugins/figma/tsconfig.node.json b/plugins/figma/tsconfig.node.json
index b7445bdb37..3eca0b7b6b 100644
--- a/plugins/figma/tsconfig.node.json
+++ b/plugins/figma/tsconfig.node.json
@@ -6,7 +6,5 @@
     "moduleResolution": "Node",
     "esModuleInterop": true
   },
-  "include": [
-    "*.ts"
-  ]
+  "include": ["*.ts"]
 }
diff --git a/plugins/figma/vite.config.ui.ts b/plugins/figma/vite.config.ui.ts
index e1e90bd882..ed61156f06 100644
--- a/plugins/figma/vite.config.ui.ts
+++ b/plugins/figma/vite.config.ui.ts
@@ -1,8 +1,8 @@
 import path from 'node:path';
 
+import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 import { viteSingleFile } from 'vite-plugin-singlefile';
-import react from '@vitejs/plugin-react';
 
 export default defineConfig(({ mode }) => ({
   plugins: [react(), viteSingleFile()],

From ace8a1ecc47fe0b98f8641c2f3a4e91685cefc8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Tue, 1 Oct 2024 14:19:57 +0200
Subject: [PATCH 08/21] Fix errors

---
 plugins/figma/src/plugin/figma/json.ts        | 62 ++++++++------
 plugins/figma/src/plugin/figma/themes.ts      | 23 +++--
 .../ui/components/ColorPicker/ColorPicker.tsx |  2 +-
 .../ColorPickers/ColorPickers.module.css      |  0
 .../components/ColorPickers/ColorPickers.tsx  | 83 -------------------
 .../ui/components/Footer/Footer.module.css    |  4 -
 .../figma/src/ui/pages/Theme/Theme.module.css | 15 +++-
 plugins/figma/src/ui/pages/Theme/Theme.tsx    | 45 ++++++++--
 8 files changed, 104 insertions(+), 130 deletions(-)
 delete mode 100644 plugins/figma/src/ui/components/ColorPickers/ColorPickers.module.css
 delete mode 100644 plugins/figma/src/ui/components/ColorPickers/ColorPickers.tsx

diff --git a/plugins/figma/src/plugin/figma/json.ts b/plugins/figma/src/plugin/figma/json.ts
index ec205154ae..4ee0638fde 100644
--- a/plugins/figma/src/plugin/figma/json.ts
+++ b/plugins/figma/src/plugin/figma/json.ts
@@ -1,9 +1,3 @@
-/* eslint-disable no-prototype-builtins */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { rgbToHex } from '@common/utils';
 
 export const generateJson = async () => {
@@ -13,7 +7,14 @@ export const generateJson = async () => {
     (collection) => collection.name === 'Mode',
   );
 
-  const obj2: Record<string, any> = {};
+  type VariableValue = string | { r: number; g: number; b: number };
+  type VariableObject = {
+    [key: string]:
+      | VariableObject
+      | { value?: VariableValue; type?: string }
+      | undefined;
+  };
+  const obj2: Record<string, VariableObject> = {};
 
   for (const collection of collections) {
     if (!obj2[collection.name]) {
@@ -28,8 +29,8 @@ export const generateJson = async () => {
         if (modeCollection && collection.id === variable.variableCollectionId) {
           const name = variable.name;
           const nameArr = name.split('/');
-          let obj: Record<string, any> =
-            obj2[collection.name][collectionMode.name]; // Modified line
+          let obj: VariableObject =
+            obj2[collection.name][collectionMode.name] || {}; // Modified line
 
           for (let i = 0; i < nameArr.length; i++) {
             const key = nameArr[i];
@@ -37,36 +38,45 @@ export const generateJson = async () => {
               obj[key] = {};
             }
             if (key === nameArr[nameArr.length - 1]) {
-              let value;
-              if (
-                variable.valuesByMode[collectionMode.modeId].hasOwnProperty(
-                  'type',
-                ) &&
-                variable.valuesByMode[collectionMode.modeId].type ===
-                  'VARIABLE_ALIAS'
-              ) {
+              let value:
+                | string
+                | { r: number; g: number; b: number }
+                | undefined;
+              const modeValue = variable.valuesByMode[
+                collectionMode.modeId
+              ] as { type?: string; id?: string };
+              if (modeValue.type === 'VARIABLE_ALIAS') {
+                const foundVariable = variables.find(
+                  (v) =>
+                    v.id ===
+                    (
+                      variable.valuesByMode[collectionMode.modeId] as {
+                        id: string;
+                      }
+                    ).id,
+                );
                 value =
                   '{' +
-                  variables.find(
-                    (v) =>
-                      v.id === variable.valuesByMode[collectionMode.modeId].id,
-                  ).name +
+                  (foundVariable ? foundVariable.name : 'undefined') +
                   '}';
               } else if (variable.resolvedType === 'COLOR') {
+                const colorValue = variable.valuesByMode[
+                  collectionMode.modeId
+                ] as { r: number; g: number; b: number };
                 value = rgbToHex({
-                  r: variable.valuesByMode[collectionMode.modeId].r,
-                  g: variable.valuesByMode[collectionMode.modeId].g,
-                  b: variable.valuesByMode[collectionMode.modeId].b,
+                  r: colorValue.r,
+                  g: colorValue.g,
+                  b: colorValue.b,
                 });
               } else {
-                value = variable.valuesByMode[collectionMode.modeId];
+                value = String(variable.valuesByMode[collectionMode.modeId]);
               }
               obj[key] = {
                 value: value,
                 type: variable.resolvedType.toLocaleLowerCase(),
               };
             }
-            obj = obj[key];
+            obj = obj[key] as VariableObject;
           }
         }
       }
diff --git a/plugins/figma/src/plugin/figma/themes.ts b/plugins/figma/src/plugin/figma/themes.ts
index b5adc48d05..9030b6c77d 100644
--- a/plugins/figma/src/plugin/figma/themes.ts
+++ b/plugins/figma/src/plugin/figma/themes.ts
@@ -4,7 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
-import { type ColorType, hexToRgb } from '@digdir/designsystemet/color';
+import { hexToRgb } from '@digdir/designsystemet/color';
 
 import { getDummyFonts } from '../../common/dummyFonts';
 import { getDummyTheme } from '../../common/dummyTheme';
@@ -44,8 +44,8 @@ export const getThemes = async () => {
       const nameSplitArr = variable.name.split('/');
 
       const themeName = nameSplitArr[0] as string;
-      const ThemeType = nameSplitArr[1] as ColorType;
-      const ThemeIndex = nameSplitArr[2] as ColorIndex;
+      const ThemeType = nameSplitArr[1] as string;
+      const ThemeIndex = nameSplitArr[2] as string;
 
       if (themeName !== 'global' && modeColModes) {
         for (const mode of modeColModes) {
@@ -57,7 +57,13 @@ export const getThemes = async () => {
           const RGB = variable.valuesByMode[mode.modeId] as RGB;
           const HEX = rgbToHex(RGB);
           const theme = themes.find((theme) => theme.themeId === themeName);
-          if (theme) theme.colors[ThemeType][modeName][ThemeIndex] = HEX;
+          if (theme)
+            (
+              theme.colors as Record<
+                string,
+                Record<string, Record<string, string>>
+              >
+            )[ThemeType][modeName][ThemeIndex] = HEX;
         }
       }
     }
@@ -84,11 +90,14 @@ export const addTheme = async (theme: ColorTheme, name: string) => {
       const types = ['accent', 'neutral', 'brand1', 'brand2', 'brand3'];
       for (const type of types) {
         const lightRGB = hexToRgb(
-          theme[type as ColorType]['light'][key as ColorIndex],
+          (theme[type as keyof ColorTheme].light as Record<ColorIndex, string>)[
+            key as ColorIndex
+          ],
           '1',
         );
         const darkRGB = hexToRgb(
-          theme[type as ColorType]['dark'][key as ColorIndex],
+          (theme as Record<string, { dark: Record<ColorIndex, string> }>)[type]
+            .dark[key as ColorIndex],
           '1',
         );
 
@@ -168,7 +177,7 @@ export const renameTheme = async (
 
   for (const variable of variables) {
     const nameSplitArr = variable.name.split('/');
-    const ThemeType = nameSplitArr[1] as ColorType;
+    const ThemeType = nameSplitArr[1] as string;
     const ThemeIndex = nameSplitArr[2] as ColorIndex;
 
     if (variable.name.startsWith(themeId + '/')) {
diff --git a/plugins/figma/src/ui/components/ColorPicker/ColorPicker.tsx b/plugins/figma/src/ui/components/ColorPicker/ColorPicker.tsx
index 2bc5362991..f4fd0574df 100644
--- a/plugins/figma/src/ui/components/ColorPicker/ColorPicker.tsx
+++ b/plugins/figma/src/ui/components/ColorPicker/ColorPicker.tsx
@@ -43,7 +43,7 @@ export const ColorPicker = ({
       <div className={cl(classes.popup, showModal && classes.show)}>
         <ChromePicker
           onChangeComplete={({ hex }: { hex: string }) => {
-            onColorChanged && onColorChanged(hex as CssColor);
+            onColorChanged?.(hex as CssColor);
           }}
           color={color}
         />
diff --git a/plugins/figma/src/ui/components/ColorPickers/ColorPickers.module.css b/plugins/figma/src/ui/components/ColorPickers/ColorPickers.module.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/plugins/figma/src/ui/components/ColorPickers/ColorPickers.tsx b/plugins/figma/src/ui/components/ColorPickers/ColorPickers.tsx
deleted file mode 100644
index 987c5c1db7..0000000000
--- a/plugins/figma/src/ui/components/ColorPickers/ColorPickers.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { ColorPicker } from '../ColorPicker/ColorPicker';
-
-export const ColorPickers = () => {
-  return (
-    <div>
-      <ColorPicker
-        color={themes['theme'].accent.light?.[9] as CssColor}
-        title='Accent'
-        onColorChanged={(color: CssColor) => {
-          const theme = generateThemeForColor(color);
-          const numberTheme = Tomato(theme);
-          setThemes({
-            ...themes,
-            [test || 'theme']: {
-              ...themes[test || 'theme'],
-              accent: numberTheme,
-            },
-          });
-        }}
-      />
-      <ColorPicker
-        color={themes[test || 'theme'].neutral.light?.[9] as CssColor}
-        title='Neutral'
-        onColorChanged={(color: CssColor) => {
-          const theme = generateThemeForColor(color);
-          const numberTheme = Tomato(theme);
-          setThemes({
-            ...themes,
-            [test || 'theme']: {
-              ...themes[test || 'theme'],
-              brand3: numberTheme,
-            },
-          });
-        }}
-      />
-      <ColorPicker
-        color={themes[test || 'theme'].brand1.light?.[9] as CssColor}
-        title='Brand 1'
-        onColorChanged={(color: CssColor) => {
-          const theme = generateThemeForColor(color);
-          const numberTheme = Tomato(theme);
-          setThemes({
-            ...themes,
-            [test || 'theme']: {
-              ...themes[test || 'theme'],
-              brand1: numberTheme,
-            },
-          });
-        }}
-      />
-      <ColorPicker
-        color={themes[test || 'theme'].brand2.light?.[9] as CssColor}
-        title='Brand 2'
-        onColorChanged={(color: CssColor) => {
-          const theme = generateThemeForColor(color);
-          const numberTheme = Tomato(theme);
-          setThemes({
-            ...themes,
-            [test || 'theme']: {
-              ...themes[test || 'theme'],
-              brand2: numberTheme,
-            },
-          });
-        }}
-      />
-      <ColorPicker
-        color={themes[test || 'theme'].brand3.light?.[9] as CssColor}
-        title='Brand 3'
-        onColorChanged={(color: CssColor) => {
-          const theme = generateThemeForColor(color);
-          const numberTheme = Tomato(theme);
-          setThemes({
-            ...themes,
-            [test || 'theme']: {
-              ...themes[test || 'theme'],
-              brand3: numberTheme,
-            },
-          });
-        }}
-      />
-    </div>
-  );
-};
diff --git a/plugins/figma/src/ui/components/Footer/Footer.module.css b/plugins/figma/src/ui/components/Footer/Footer.module.css
index c3b4f23279..4ce039b056 100644
--- a/plugins/figma/src/ui/components/Footer/Footer.module.css
+++ b/plugins/figma/src/ui/components/Footer/Footer.module.css
@@ -9,15 +9,11 @@
 
 .top {
   padding: 12px 16px;
-  border-top: 1px solid var(--figma-color-border);
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.topLeft {
-}
-
 .btn {
   font-size: 14px;
   padding: 7px 12px;
diff --git a/plugins/figma/src/ui/pages/Theme/Theme.module.css b/plugins/figma/src/ui/pages/Theme/Theme.module.css
index b29d3aa016..58cc4b4804 100644
--- a/plugins/figma/src/ui/pages/Theme/Theme.module.css
+++ b/plugins/figma/src/ui/pages/Theme/Theme.module.css
@@ -1,5 +1,5 @@
 .content {
-  padding: 16px 16px 16px;
+  padding: 16px;
 }
 
 .cards {
@@ -56,3 +56,16 @@
 .input::placeholder {
   color: #9e9e9e;
 }
+
+.textarea {
+  margin-top: 20px;
+  font-size: 14px;
+}
+
+.btn {
+  margin-top: 24px;
+}
+
+.text {
+  line-height: 1.5em;
+}
diff --git a/plugins/figma/src/ui/pages/Theme/Theme.tsx b/plugins/figma/src/ui/pages/Theme/Theme.tsx
index 4517c2af79..d55c68489b 100644
--- a/plugins/figma/src/ui/pages/Theme/Theme.tsx
+++ b/plugins/figma/src/ui/pages/Theme/Theme.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@digdir/designsystemet-react';
+import { Button, Link, Textarea } from '@digdir/designsystemet-react';
 import {
   AlignVerticalSpaceAround,
   Check,
@@ -31,6 +31,8 @@ function Theme() {
   const [command, setCommand] = useState('');
   const [themeIndex, setThemeIndex] = useState<number>(0);
   const setThemes = useThemeStore((state) => state.setThemes);
+  const loading = useThemeStore((state) => state.loading);
+  const [error, setError] = useState(false);
 
   useEffect(() => {
     setThemeIndex(themes.findIndex((theme) => theme.themeModeId === themeId));
@@ -67,9 +69,10 @@ function Theme() {
   };
 
   const handleClick = () => {
+    setError(false);
     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.match(pattern);
+    const matches = command.replace(/\\/g, '').match(pattern);
 
     if (matches) {
       const accent = matches[1] as CssColor;
@@ -97,6 +100,7 @@ function Theme() {
 
       setThemes(newArray);
       setLoading(true);
+      setCommand('');
 
       setTimeout(() => {
         parent.postMessage(
@@ -109,6 +113,9 @@ function Theme() {
           '*',
         );
       }, 500);
+    } else {
+      console.log('No match');
+      setError(true);
     }
   };
 
@@ -137,7 +144,9 @@ function Theme() {
       <div className={classes.header}>
         <div className={classes.headerLeft}>
           <Breadcrumbs
-            text={themes.find((theme) => theme.themeModeId === themeId)?.name}
+            text={
+              themes.find((theme) => theme.themeModeId === themeId)?.name || ''
+            }
             url='/'
           />
 
@@ -177,15 +186,35 @@ function Theme() {
         </div> */}
       </div>
       <div>
-        <textarea
+        <p className={classes.text}>
+          Gå til{' '}
+          <Link href='https://theme.designsystemet.no/'>Temabyggeren</Link> for
+          å lage 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.
+        </p>
+
+        <Textarea
           value={command}
           onChange={(e) => setCommand(e.target.value)}
           name=''
+          label='Kodesnutt fra temabyggeren'
           id=''
-          style={{ width: 550, height: 200 }}
-        ></textarea>
-        <Button className={classes.btn} size='sm' onClick={() => handleClick()}>
-          Oppdater variabler
+          rows={9}
+          className={classes.textarea}
+          placeholder='Lim inn her...'
+          error={
+            error &&
+            'Koden du limte inn er ikke gyldig. Prøv å lim inn på nytt.'
+          }
+        ></Textarea>
+        <Button
+          className={classes.btn}
+          size='sm'
+          onClick={() => handleClick()}
+          disabled={loading}
+        >
+          Oppdater tema
         </Button>
       </div>
       <div className={classes.cards}>

From 1a2d6d66f2a9b4103845adb1b7ffbbd3ce064c70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Wed, 2 Oct 2024 12:33:20 +0200
Subject: [PATCH 09/21] Update Theme.tsx

---
 plugins/figma/src/ui/pages/Theme/Theme.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/plugins/figma/src/ui/pages/Theme/Theme.tsx b/plugins/figma/src/ui/pages/Theme/Theme.tsx
index d55c68489b..dc936177d5 100644
--- a/plugins/figma/src/ui/pages/Theme/Theme.tsx
+++ b/plugins/figma/src/ui/pages/Theme/Theme.tsx
@@ -188,10 +188,12 @@ function Theme() {
       <div>
         <p className={classes.text}>
           Gå til{' '}
-          <Link href='https://theme.designsystemet.no/'>Temabyggeren</Link> for
-          å lage 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.
+          <Link href='https://theme.designsystemet.no/' target='_blank'>
+            Temabyggeren
+          </Link>{' '}
+          for å lage 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.
         </p>
 
         <Textarea

From c4bbc41ff3c5c77088b8177699af9531bf23c8f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Wed, 2 Oct 2024 12:34:14 +0200
Subject: [PATCH 10/21] Stuff

---
 plugins/figma/src/ui/components/Textfield/Textfield.module.css | 2 --
 plugins/figma/src/ui/components/Textfield/Textfield.tsx        | 3 +--
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/plugins/figma/src/ui/components/Textfield/Textfield.module.css b/plugins/figma/src/ui/components/Textfield/Textfield.module.css
index 2f06044d0a..e69de29bb2 100644
--- a/plugins/figma/src/ui/components/Textfield/Textfield.module.css
+++ b/plugins/figma/src/ui/components/Textfield/Textfield.module.css
@@ -1,2 +0,0 @@
-.input {
-}
diff --git a/plugins/figma/src/ui/components/Textfield/Textfield.tsx b/plugins/figma/src/ui/components/Textfield/Textfield.tsx
index f980bc257d..d7ad0d4073 100644
--- a/plugins/figma/src/ui/components/Textfield/Textfield.tsx
+++ b/plugins/figma/src/ui/components/Textfield/Textfield.tsx
@@ -1,11 +1,10 @@
 import { Textfield as DSTextfield } from '@digdir/designsystemet-react';
 
-import classes from './Textfield.module.css';
 type TextfieldProps = {
   label: string;
   size?: 'sm' | 'md' | 'lg';
 };
 
 export const Textfield = ({ ...rest }: TextfieldProps) => {
-  return <DSTextfield {...rest} className={classes.input} />;
+  return <DSTextfield {...rest} />;
 };

From 0509913899da90e2039856e1eb4214463b3158e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Fri, 4 Oct 2024 14:48:02 +0200
Subject: [PATCH 11/21] Added more func to plugin

---
 plugins/figma/src/common/store.ts             |   8 ++
 plugins/figma/src/plugin/figma/themes.ts      |   6 -
 .../figma/src/plugin/figma/updateVariables.ts |  27 ++--
 plugins/figma/src/plugin/plugin.ts            |   2 -
 plugins/figma/src/ui/App.css                  |  16 +++
 plugins/figma/src/ui/app.tsx                  |  20 ++-
 .../Breadcrumbs/Breadcrumbs.module.css        |   4 +-
 .../figma/src/ui/pages/Font/Font.module.css   |  35 -----
 plugins/figma/src/ui/pages/Font/Font.tsx      | 129 ------------------
 .../figma/src/ui/pages/Fonts/Fonts.module.css |  10 --
 plugins/figma/src/ui/pages/Fonts/Fonts.tsx    |  47 -------
 .../figma/src/ui/pages/Theme/Theme.module.css |   4 +
 plugins/figma/src/ui/pages/Theme/Theme.tsx    |  29 ++--
 plugins/figma/src/ui/pages/Themes/Themes.tsx  |   7 +
 14 files changed, 82 insertions(+), 262 deletions(-)
 delete mode 100644 plugins/figma/src/ui/pages/Font/Font.module.css
 delete mode 100644 plugins/figma/src/ui/pages/Font/Font.tsx
 delete mode 100644 plugins/figma/src/ui/pages/Fonts/Fonts.module.css
 delete mode 100644 plugins/figma/src/ui/pages/Fonts/Fonts.tsx

diff --git a/plugins/figma/src/common/store.ts b/plugins/figma/src/common/store.ts
index 1200976410..133a74a63a 100644
--- a/plugins/figma/src/common/store.ts
+++ b/plugins/figma/src/common/store.ts
@@ -87,9 +87,13 @@ type ColorStore = {
   themes: StoreThemes;
   loading: boolean;
   fonts: FontStore[];
+  codeSnipperError: string;
+  noThemesFound: boolean;
   setThemes: (themes: StoreThemes) => void;
   setLoading: (loading: boolean) => void;
   setFonts: (fonts: FontStore[]) => void;
+  setCodeSnippetError: (error: string) => void;
+  setNoThemesFound: (noThemesFound: boolean) => void;
 };
 
 export const useThemeStore = create(
@@ -97,8 +101,12 @@ export const useThemeStore = create(
     themes: [],
     loading: false,
     fonts: [],
+    codeSnipperError: '',
+    noThemesFound: false,
     setThemes: (themes) => set({ themes }),
     setLoading: (loading) => set({ loading }),
     setFonts: (fonts) => set({ fonts }),
+    setCodeSnippetError: (codeSnipperError) => set({ codeSnipperError }),
+    setNoThemesFound: (noThemesFound) => set({ noThemesFound }),
   })),
 );
diff --git a/plugins/figma/src/plugin/figma/themes.ts b/plugins/figma/src/plugin/figma/themes.ts
index 9030b6c77d..87c527b5ca 100644
--- a/plugins/figma/src/plugin/figma/themes.ts
+++ b/plugins/figma/src/plugin/figma/themes.ts
@@ -1,9 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-
 import { hexToRgb } from '@digdir/designsystemet/color';
 
 import { getDummyFonts } from '../../common/dummyFonts';
diff --git a/plugins/figma/src/plugin/figma/updateVariables.ts b/plugins/figma/src/plugin/figma/updateVariables.ts
index 12e614d3d3..cecfc85cc2 100644
--- a/plugins/figma/src/plugin/figma/updateVariables.ts
+++ b/plugins/figma/src/plugin/figma/updateVariables.ts
@@ -79,16 +79,23 @@ export const updateVariables = async (themes: StoreThemes) => {
     const lightModeId: string = modeCollection.modes[0].modeId;
     const darkModeId: string = modeCollection.modes[1].modeId;
     const variables = await figma.variables.getLocalVariablesAsync('COLOR');
-    for (const variable of variables) {
-      updateColors(
-        themes,
-        variable,
-        lightModeId,
-        darkModeId,
-        modeCollection,
-        themeCollection,
-        variables,
-      );
+
+    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
index 6f58b1bd83..b03d724f63 100644
--- a/plugins/figma/src/plugin/plugin.ts
+++ b/plugins/figma/src/plugin/plugin.ts
@@ -39,8 +39,6 @@ figma.ui.onmessage = (msg: {
     switch (msg.type) {
       case 'updateVariables': {
         if (msg.themes) await updateVariables(msg.themes);
-        console.log('updateVariables');
-        figma.ui.postMessage({ type: 'tomato' });
         break;
       }
 
diff --git a/plugins/figma/src/ui/App.css b/plugins/figma/src/ui/App.css
index 18da8e3ea3..8672f4ddc0 100644
--- a/plugins/figma/src/ui/App.css
+++ b/plugins/figma/src/ui/App.css
@@ -3,9 +3,15 @@
 :root {
   --figma-color-text: #e1e3e5;
   --figma-color-text-secondary: #9ea3ab;
+  --figma-color-bg: red;
   --figma-color-bg-secondary: #2d2d2d;
 }
 
+.figma-light,
+.figma-dark {
+  --figma-color-border: #4e4e4e;
+}
+
 * {
   font-feature-settings: 'cv05' 1;
   box-sizing: border-box;
@@ -117,3 +123,13 @@ body {
   font-size: 14px;
   height: 34px;
 }
+
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.content {
+  flex-grow: 1;
+}
diff --git a/plugins/figma/src/ui/app.tsx b/plugins/figma/src/ui/app.tsx
index 0479121085..e3e2db162b 100644
--- a/plugins/figma/src/ui/app.tsx
+++ b/plugins/figma/src/ui/app.tsx
@@ -18,8 +18,6 @@ import { useThemeStore } from '../common/store';
 import { Footer } from './components/Footer/Footer';
 import AddTheme from './pages/AddTheme/AddTheme';
 import Colors from './pages/Colors/Colors';
-import Font from './pages/Font/Font';
-import Fonts from './pages/Fonts/Fonts';
 import { Github } from './pages/Github/Github';
 import PageTwo from './pages/PageTwo/PageTwo';
 import Theme from './pages/Theme/Theme';
@@ -32,6 +30,8 @@ function App() {
   const navigate = useNavigate();
   const setLoading = useThemeStore((state) => state.setLoading);
   const setFonts = useThemeStore((state) => state.setFonts);
+  const setError = useThemeStore((state) => state.setCodeSnippetError);
+  const setNoThemesFound = useThemeStore((state) => state.setNoThemesFound);
 
   useEffect(() => {
     parent.postMessage({ pluginMessage: { type: 'getThemes' } }, '*');
@@ -48,7 +48,11 @@ function App() {
       };
     }) => {
       if (event.data.pluginMessage.type === 'getThemes') {
-        setThemes(event.data.pluginMessage.themes);
+        if (event.data.pluginMessage.themes.length > 0) {
+          setThemes(event.data.pluginMessage.themes);
+        } else {
+          setNoThemesFound(true);
+        }
       } else if (event.data.pluginMessage.type === 'geThemesAndRedirect') {
         navigate('/');
         parent.postMessage({ pluginMessage: { type: 'getThemes' } }, '*');
@@ -62,6 +66,12 @@ function App() {
           .catch((e) => {
             console.log(e);
           });
+      } else if (event.data.pluginMessage.type === 'setValueForModeError') {
+        setError(
+          'En feil har oppstått. Du må ha minimum pro-versjonen av Figma for å kunne generere tema.',
+        );
+      } else if (event.data.pluginMessage.type === 'updateVariables') {
+        setError('');
       }
       console.log('finish');
       setLoading(false);
@@ -69,7 +79,7 @@ function App() {
   }, []);
 
   return (
-    <div data-ds-color-mode='dark'>
+    <div className='page' data-ds-color-mode='dark'>
       <div className='links'>
         <NavLink
           className={({ isActive }) => (isActive ? 'link active' : 'link')}
@@ -91,8 +101,6 @@ function App() {
           <Route path='/themes' element={<Themes />} />
 
           <Route path='/themes/:themeId/colors' element={<Colors />} />
-          <Route path='/themes/:themeId/fonts' element={<Fonts />} />
-          <Route path='/themes/:themeId/fonts/fontId' element={<Font />} />
           <Route path='/themes/:themeId' element={<Theme />} />
           <Route path='/theme/add' element={<AddTheme />} />
           <Route path='/github' element={<Github />} />
diff --git a/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.module.css b/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.module.css
index ca60f49511..b4b97352a5 100644
--- a/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.module.css
+++ b/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.module.css
@@ -1,7 +1,7 @@
 .breadcrumbs {
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: 2px;
 }
 
 .back {
@@ -26,7 +26,7 @@
 }
 
 .text {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 500;
   margin-top: -2px;
 }
diff --git a/plugins/figma/src/ui/pages/Font/Font.module.css b/plugins/figma/src/ui/pages/Font/Font.module.css
deleted file mode 100644
index 9663010501..0000000000
--- a/plugins/figma/src/ui/pages/Font/Font.module.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.content {
-  padding: 16px;
-  height: 388px;
-  overflow-y: auto;
-}
-
-.grid {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 32px;
-}
-
-.fields {
-  gap: 16px;
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 24px;
-}
-
-.breadcrumbs {
-  margin-bottom: 20px;
-}
-
-.nameSelect {
-  width: 50%;
-}
-
-.weightSelects {
-  display: flex;
-  gap: 16px;
-}
-
-.weightSelect {
-  flex-grow: 1;
-}
diff --git a/plugins/figma/src/ui/pages/Font/Font.tsx b/plugins/figma/src/ui/pages/Font/Font.tsx
deleted file mode 100644
index 7180a5095d..0000000000
--- a/plugins/figma/src/ui/pages/Font/Font.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { NativeSelect, Textfield } from '@digdir/designsystemet-react';
-import cl from 'clsx/lite';
-import { useState } from 'react';
-import { useParams } from 'react-router-dom';
-
-import { useThemeStore } from '../../../common/store';
-import { Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs';
-
-import classes from './Font.module.css';
-
-function Font() {
-  const themes = useThemeStore((state) => state.themes);
-
-  const fonts = useThemeStore((state) => state.fonts);
-  const { themeId } = useParams<string>();
-
-  const getTheme = () => {
-    return themes.find((theme) => theme.themeModeId === themeId) || null;
-  };
-
-  const getFontOptions = () => {
-    return fonts.map((font) => {
-      return (
-        <option key={font.name} value={font.name}>
-          {font.name}
-        </option>
-      );
-    });
-  };
-
-  const getFontWeights = (name: string) => {
-    return fonts
-      .find((font) => font.name === name)
-      ?.styles.map((style) => {
-        return (
-          <option key={style} value={style}>
-            {style}
-          </option>
-        );
-      });
-  };
-
-  // Primary font
-  const [primaryName, setPrimaryName] = useState<string>('Inter');
-  const [primaryRegular, setPrimaryRegular] = useState<string>('Regular');
-  const [primaryBold, setPrimaryBold] = useState<string>('Medium');
-  const [primaryExtraBold, setPrimaryExtraBold] = useState<string>('Semi Bold');
-
-  return (
-    <div className={classes.content}>
-      <Breadcrumbs
-        className={classes.breadcrumbs}
-        text={'Fonter (' + getTheme()?.name + ')'}
-        url={'/themes/' + themeId}
-      />
-
-      <h2 className='pageTitle'>Primærfont</h2>
-
-      <div className={classes.fields}>
-        <div className={cl(classes.nameSelect)}>
-          <NativeSelect
-            label='Navn'
-            size='sm'
-            value={primaryName}
-            onChange={(e) => setPrimaryName(e.target.value)}
-            className={cl('select', classes.weightSelect)}
-          >
-            {getFontOptions()}
-          </NativeSelect>
-        </div>
-        <div className={classes.weightSelects}>
-          <NativeSelect
-            label='Regular font weight'
-            size='sm'
-            value={primaryRegular}
-            className={cl('select', classes.weightSelect)}
-          >
-            {getFontWeights(primaryName)}
-          </NativeSelect>
-          <NativeSelect
-            label='Bold font weight'
-            size='sm'
-            value={primaryBold}
-            className={cl('select', classes.weightSelect)}
-          >
-            {getFontWeights(primaryName)}
-          </NativeSelect>
-          <NativeSelect
-            label='Extra bold font weight'
-            size='sm'
-            value={primaryExtraBold}
-            className={cl('select', classes.weightSelect)}
-          >
-            {getFontWeights(primaryName)}
-          </NativeSelect>
-        </div>
-      </div>
-
-      <h2 className='pageTitle'>Sekundærfont</h2>
-      <div className={classes.grid}>
-        <div className={classes.fields}>
-          <Textfield
-            label='Font family'
-            className={classes.textfield + ' textfield'}
-          />
-          <Textfield
-            label='Regular font weight'
-            className={classes.textfield + ' textfield'}
-          />
-          <Textfield
-            label='Bold font weight'
-            className={classes.textfield + ' textfield'}
-          />
-          <Textfield
-            label='Extra bold font weight'
-            className={classes.textfield + ' textfield'}
-          />
-        </div>
-        <div className={classes.preview}>
-          <div>Regular font weight</div>
-          <div>Bold font weight</div>
-          <div>Extra bold font weight</div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default Font;
diff --git a/plugins/figma/src/ui/pages/Fonts/Fonts.module.css b/plugins/figma/src/ui/pages/Fonts/Fonts.module.css
deleted file mode 100644
index e4dbde2087..0000000000
--- a/plugins/figma/src/ui/pages/Fonts/Fonts.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.cards {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-top: 20px;
-}
-
-.content {
-  padding: 16px;
-}
diff --git a/plugins/figma/src/ui/pages/Fonts/Fonts.tsx b/plugins/figma/src/ui/pages/Fonts/Fonts.tsx
deleted file mode 100644
index 8d317b1242..0000000000
--- a/plugins/figma/src/ui/pages/Fonts/Fonts.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Type } from 'lucide-react';
-import { useParams } from 'react-router-dom';
-
-import { useThemeStore } from '../../../common/store';
-import { Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs';
-import { Card } from '../../components/Card/Card';
-import { CardButton } from '../../components/CardButton/CardButton';
-
-import classes from './Fonts.module.css';
-
-const Fonts = () => {
-  const { themeId } = useParams();
-  const themes = useThemeStore((state) => state.themes);
-
-  const getTheme = () => {
-    return (
-      themes.find((theme) => theme.themeModeId === themeId) || { fonts: [] }
-    );
-  };
-
-  return (
-    <div className={classes.content}>
-      <Breadcrumbs
-        text={
-          'Fonter - ' +
-          themes.find((theme) => theme.themeModeId === themeId)?.name
-        }
-        url='/'
-      />
-      <div className={classes.cards}>
-        {getTheme().fonts.map((theme, index) => {
-          return (
-            <Card
-              key={index}
-              title={theme.name}
-              url={`/themes/`}
-              icon={<Type />}
-            />
-          );
-        })}
-        <CardButton url='/theme/add' />
-      </div>
-    </div>
-  );
-};
-
-export default Fonts;
diff --git a/plugins/figma/src/ui/pages/Theme/Theme.module.css b/plugins/figma/src/ui/pages/Theme/Theme.module.css
index 58cc4b4804..ade5d34d14 100644
--- a/plugins/figma/src/ui/pages/Theme/Theme.module.css
+++ b/plugins/figma/src/ui/pages/Theme/Theme.module.css
@@ -62,6 +62,10 @@
   font-size: 14px;
 }
 
+.textarea textarea {
+  height: 180px;
+}
+
 .btn {
   margin-top: 24px;
 }
diff --git a/plugins/figma/src/ui/pages/Theme/Theme.tsx b/plugins/figma/src/ui/pages/Theme/Theme.tsx
index dc936177d5..7757d001e9 100644
--- a/plugins/figma/src/ui/pages/Theme/Theme.tsx
+++ b/plugins/figma/src/ui/pages/Theme/Theme.tsx
@@ -32,7 +32,10 @@ function Theme() {
   const [themeIndex, setThemeIndex] = useState<number>(0);
   const setThemes = useThemeStore((state) => state.setThemes);
   const loading = useThemeStore((state) => state.loading);
-  const [error, setError] = useState(false);
+  const codeSnippetError = useThemeStore((state) => state.codeSnipperError);
+  const setCodeSnippetError = useThemeStore(
+    (state) => state.setCodeSnippetError,
+  );
 
   useEffect(() => {
     setThemeIndex(themes.findIndex((theme) => theme.themeModeId === themeId));
@@ -42,10 +45,6 @@ function Theme() {
     );
   });
 
-  const Tomato = (e: string) => {
-    setNewName(e);
-  };
-
   const changeName = () => {
     setLoading(true);
     setEditMode(false);
@@ -69,7 +68,6 @@ function Theme() {
   };
 
   const handleClick = () => {
-    setError(false);
     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);
@@ -115,7 +113,9 @@ function Theme() {
       }, 500);
     } else {
       console.log('No match');
-      setError(true);
+      setCodeSnippetError(
+        'Koden du limte inn er ikke gyldig. Prøv å lim inn på nytt.',
+      );
     }
   };
 
@@ -191,28 +191,27 @@ function Theme() {
           <Link href='https://theme.designsystemet.no/' target='_blank'>
             Temabyggeren
           </Link>{' '}
-          for å lage 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.
+          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.
         </p>
 
         <Textarea
+          size='sm'
           value={command}
           onChange={(e) => setCommand(e.target.value)}
           name=''
           label='Kodesnutt fra temabyggeren'
           id=''
-          rows={9}
+          cols={22}
           className={classes.textarea}
           placeholder='Lim inn her...'
-          error={
-            error &&
-            'Koden du limte inn er ikke gyldig. Prøv å lim inn på nytt.'
-          }
+          error={codeSnippetError}
         ></Textarea>
         <Button
           className={classes.btn}
           size='sm'
+          color='neutral'
           onClick={() => handleClick()}
           disabled={loading}
         >
diff --git a/plugins/figma/src/ui/pages/Themes/Themes.tsx b/plugins/figma/src/ui/pages/Themes/Themes.tsx
index 08de496f16..d706fe44c5 100644
--- a/plugins/figma/src/ui/pages/Themes/Themes.tsx
+++ b/plugins/figma/src/ui/pages/Themes/Themes.tsx
@@ -10,6 +10,7 @@ import classes from './Themes.module.css';
 
 function Themes() {
   const themes = useThemeStore((state) => state.themes);
+  const noThemeFound = useThemeStore((state) => state.noThemesFound);
 
   useEffect(() => {}, []);
 
@@ -24,6 +25,12 @@ function Themes() {
     <div className={classes.content}>
       {/* <Button onClick={() => handleClick2()}>Add theme</Button>
       <Button onClick={() => handleClick()}>update variable</Button> */}
+      {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 (

From aebc5a73675e282c448710613faafa2cc4f2e903 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Tue, 8 Oct 2024 08:53:48 +0200
Subject: [PATCH 12/21] Stuff

---
 plugins/figma/manifest.json                | 2 +-
 plugins/figma/src/ui/pages/Theme/Theme.tsx | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/plugins/figma/manifest.json b/plugins/figma/manifest.json
index 98cb13291b..b4ce2f54cf 100644
--- a/plugins/figma/manifest.json
+++ b/plugins/figma/manifest.json
@@ -1,5 +1,5 @@
 {
-  "name": "Designsystemet Tokens",
+  "name": "Designsystemet (beta)",
   "id": "1382044395533039221",
   "api": "1.0.0",
   "main": "dist/plugin.js",
diff --git a/plugins/figma/src/ui/pages/Theme/Theme.tsx b/plugins/figma/src/ui/pages/Theme/Theme.tsx
index 7757d001e9..5bc3f3acce 100644
--- a/plugins/figma/src/ui/pages/Theme/Theme.tsx
+++ b/plugins/figma/src/ui/pages/Theme/Theme.tsx
@@ -211,7 +211,6 @@ function Theme() {
         <Button
           className={classes.btn}
           size='sm'
-          color='neutral'
           onClick={() => handleClick()}
           disabled={loading}
         >

From 8a0ebe2d9d216cac4a4c59894647f29e9cf0819c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Thu, 17 Oct 2024 11:04:25 +0200
Subject: [PATCH 13/21] Code cleaning

---
 plugins/figma/package.json                    |   1 -
 plugins/figma/src/common/dummyFonts.ts        |  18 -
 plugins/figma/src/common/store.ts             |  19 -
 plugins/figma/src/plugin/figma/fonts.ts       |  27 --
 .../figma/src/plugin/figma/getVariables.ts    |   4 -
 plugins/figma/src/plugin/figma/json.ts        |  99 -----
 plugins/figma/src/plugin/figma/themes.ts      | 186 ----------
 .../figma/src/plugin/figma/updateVariables.ts |   1 -
 plugins/figma/src/plugin/plugin.ts            |   1 -
 plugins/figma/src/ui/app.tsx                  |  64 +---
 .../CardButton/CardButton.module.css          |  16 -
 .../ui/components/CardButton/CardButton.tsx   |  11 -
 .../CodeSnippet/CodeSnippet.module.css        |  40 --
 .../ui/components/CodeSnippet/CodeSnippet.tsx |  97 -----
 .../ColorPicker/ColorPicker.module.css        |  54 ---
 .../ui/components/ColorPicker/ColorPicker.tsx |  53 ---
 .../figma/src/ui/components/Footer/Footer.tsx |  56 +--
 .../components/Textfield/Textfield.module.css |   0
 .../src/ui/components/Textfield/Textfield.tsx |  10 -
 .../figma/src/ui/components/Toast/Toast.css   |  24 --
 .../figma/src/ui/components/Toast/Toast.tsx   |  43 ---
 plugins/figma/src/ui/main.tsx                 |   2 -
 .../src/ui/pages/AddTheme/AddTheme.module.css |  28 --
 .../figma/src/ui/pages/AddTheme/AddTheme.tsx  | 108 ------
 .../src/ui/pages/Colors/Colors.module.css     |  17 -
 plugins/figma/src/ui/pages/Colors/Colors.tsx  | 192 ----------
 .../src/ui/pages/Github/Github.module.css     |   7 -
 plugins/figma/src/ui/pages/Github/Github.tsx  |  44 ---
 .../src/ui/pages/PageOne/PageOne.module.css   |   9 -
 .../figma/src/ui/pages/PageOne/PageOne.tsx    |  86 -----
 .../figma/src/ui/pages/PageTwo/PageTwo.tsx    |  17 -
 plugins/figma/src/ui/pages/Theme/Theme.tsx    | 117 +-----
 plugins/figma/src/ui/pages/Themes/Themes.tsx  |   9 +-
 .../src/ui/pages/pageThree/PageThree.tsx      |   5 -
 plugins/figma/src/ui/utils/github.ts          |  79 ----
 yarn.lock                                     | 348 ++++++++++++++----
 36 files changed, 309 insertions(+), 1583 deletions(-)
 delete mode 100644 plugins/figma/src/common/dummyFonts.ts
 delete mode 100644 plugins/figma/src/plugin/figma/fonts.ts
 delete mode 100644 plugins/figma/src/plugin/figma/json.ts
 delete mode 100644 plugins/figma/src/ui/components/CardButton/CardButton.module.css
 delete mode 100644 plugins/figma/src/ui/components/CardButton/CardButton.tsx
 delete mode 100644 plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.module.css
 delete mode 100644 plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.tsx
 delete mode 100644 plugins/figma/src/ui/components/ColorPicker/ColorPicker.module.css
 delete mode 100644 plugins/figma/src/ui/components/ColorPicker/ColorPicker.tsx
 delete mode 100644 plugins/figma/src/ui/components/Textfield/Textfield.module.css
 delete mode 100644 plugins/figma/src/ui/components/Textfield/Textfield.tsx
 delete mode 100644 plugins/figma/src/ui/components/Toast/Toast.css
 delete mode 100644 plugins/figma/src/ui/components/Toast/Toast.tsx
 delete mode 100644 plugins/figma/src/ui/pages/AddTheme/AddTheme.module.css
 delete mode 100644 plugins/figma/src/ui/pages/AddTheme/AddTheme.tsx
 delete mode 100644 plugins/figma/src/ui/pages/Colors/Colors.module.css
 delete mode 100644 plugins/figma/src/ui/pages/Colors/Colors.tsx
 delete mode 100644 plugins/figma/src/ui/pages/Github/Github.module.css
 delete mode 100644 plugins/figma/src/ui/pages/Github/Github.tsx
 delete mode 100644 plugins/figma/src/ui/pages/PageOne/PageOne.module.css
 delete mode 100644 plugins/figma/src/ui/pages/PageOne/PageOne.tsx
 delete mode 100644 plugins/figma/src/ui/pages/PageTwo/PageTwo.tsx
 delete mode 100644 plugins/figma/src/ui/pages/pageThree/PageThree.tsx
 delete mode 100644 plugins/figma/src/ui/utils/github.ts

diff --git a/plugins/figma/package.json b/plugins/figma/package.json
index eb728dc62f..3f4d85667d 100644
--- a/plugins/figma/package.json
+++ b/plugins/figma/package.json
@@ -28,7 +28,6 @@
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
-    "react-hot-toast": "^2.4.1",
     "react-router-dom": "^6.23.1",
     "zustand": "^4.5.4"
   },
diff --git a/plugins/figma/src/common/dummyFonts.ts b/plugins/figma/src/common/dummyFonts.ts
deleted file mode 100644
index 7480e5cc9f..0000000000
--- a/plugins/figma/src/common/dummyFonts.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export const getDummyFonts = () => {
-  return [
-    {
-      name: 'Primary',
-      fontName: 'Inter',
-      regularWeight: 'Regular',
-      boldWeight: 'Medium',
-      extraBoldWeight: 'Semi Bold',
-    },
-    {
-      name: 'Secondary',
-      fontName: 'Open Sans',
-      regularWeight: 'Regular',
-      boldWeight: 'SemiBold',
-      extraBoldWeight: 'Bold',
-    },
-  ];
-};
diff --git a/plugins/figma/src/common/store.ts b/plugins/figma/src/common/store.ts
index 133a74a63a..cafc497564 100644
--- a/plugins/figma/src/common/store.ts
+++ b/plugins/figma/src/common/store.ts
@@ -45,16 +45,6 @@ export type StoreTheme = {
   themeId: string;
   themeModeId: string;
   colors: ColorTheme;
-  fonts: FontTheme;
-};
-
-export type FontTheme = FontInfo[];
-
-export type FontInfo = {
-  name: string;
-  regularWeight: string;
-  boldWeight: string;
-  extraBoldWeight: string;
 };
 
 export type ColorTheme = {
@@ -78,20 +68,13 @@ export type StoreThemeModes = {
   colors: { brand1Base: string; brand2Base: string; brand3Base: string };
 };
 
-export type FontStore = {
-  name: string;
-  styles: string[];
-};
-
 type ColorStore = {
   themes: StoreThemes;
   loading: boolean;
-  fonts: FontStore[];
   codeSnipperError: string;
   noThemesFound: boolean;
   setThemes: (themes: StoreThemes) => void;
   setLoading: (loading: boolean) => void;
-  setFonts: (fonts: FontStore[]) => void;
   setCodeSnippetError: (error: string) => void;
   setNoThemesFound: (noThemesFound: boolean) => void;
 };
@@ -100,12 +83,10 @@ export const useThemeStore = create(
   subscribeWithSelector<ColorStore>((set) => ({
     themes: [],
     loading: false,
-    fonts: [],
     codeSnipperError: '',
     noThemesFound: false,
     setThemes: (themes) => set({ themes }),
     setLoading: (loading) => set({ loading }),
-    setFonts: (fonts) => set({ fonts }),
     setCodeSnippetError: (codeSnipperError) => set({ codeSnipperError }),
     setNoThemesFound: (noThemesFound) => set({ noThemesFound }),
   })),
diff --git a/plugins/figma/src/plugin/figma/fonts.ts b/plugins/figma/src/plugin/figma/fonts.ts
deleted file mode 100644
index 30b85bcd7d..0000000000
--- a/plugins/figma/src/plugin/figma/fonts.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export const getFonts = async () => {
-  type FontTest = {
-    name: string;
-    styles: string[];
-  };
-
-  const fonts = await figma.listAvailableFontsAsync();
-  const fontArray: FontTest[] = [];
-
-  for (const [index, font] of fonts.entries()) {
-    if (
-      index > 0 &&
-      fontArray[fontArray.length - 1].name === font.fontName.family
-    ) {
-      const found = fontArray.find((f) => f.name === font.fontName.family);
-      if (found) {
-        found.styles.push(font.fontName.style);
-      }
-      continue;
-    }
-    fontArray.push({
-      name: font.fontName.family,
-      styles: [font.fontName.style],
-    });
-  }
-  return fontArray;
-};
diff --git a/plugins/figma/src/plugin/figma/getVariables.ts b/plugins/figma/src/plugin/figma/getVariables.ts
index ec9a0ead1d..98c2432ed7 100644
--- a/plugins/figma/src/plugin/figma/getVariables.ts
+++ b/plugins/figma/src/plugin/figma/getVariables.ts
@@ -1,9 +1,5 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-
 import { rgbToHex } from '@common/utils';
 
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 export const getVariables = async () => {
   const variables = await figma.variables.getLocalVariablesAsync();
   const arr = [];
diff --git a/plugins/figma/src/plugin/figma/json.ts b/plugins/figma/src/plugin/figma/json.ts
deleted file mode 100644
index 4ee0638fde..0000000000
--- a/plugins/figma/src/plugin/figma/json.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { rgbToHex } from '@common/utils';
-
-export const generateJson = async () => {
-  const variables = await figma.variables.getLocalVariablesAsync();
-  const collections = await figma.variables.getLocalVariableCollectionsAsync();
-  const modeCollection = collections.find(
-    (collection) => collection.name === 'Mode',
-  );
-
-  type VariableValue = string | { r: number; g: number; b: number };
-  type VariableObject = {
-    [key: string]:
-      | VariableObject
-      | { value?: VariableValue; type?: string }
-      | undefined;
-  };
-  const obj2: Record<string, VariableObject> = {};
-
-  for (const collection of collections) {
-    if (!obj2[collection.name]) {
-      obj2[collection.name] = {};
-    }
-    for (const collectionMode of collection.modes) {
-      if (!obj2[collection.name][collectionMode.name]) {
-        obj2[collection.name][collectionMode.name] = {};
-      }
-
-      for (const variable of variables) {
-        if (modeCollection && collection.id === variable.variableCollectionId) {
-          const name = variable.name;
-          const nameArr = name.split('/');
-          let obj: VariableObject =
-            obj2[collection.name][collectionMode.name] || {}; // Modified line
-
-          for (let i = 0; i < nameArr.length; i++) {
-            const key = nameArr[i];
-            if (obj[key] === undefined) {
-              obj[key] = {};
-            }
-            if (key === nameArr[nameArr.length - 1]) {
-              let value:
-                | string
-                | { r: number; g: number; b: number }
-                | undefined;
-              const modeValue = variable.valuesByMode[
-                collectionMode.modeId
-              ] as { type?: string; id?: string };
-              if (modeValue.type === 'VARIABLE_ALIAS') {
-                const foundVariable = variables.find(
-                  (v) =>
-                    v.id ===
-                    (
-                      variable.valuesByMode[collectionMode.modeId] as {
-                        id: string;
-                      }
-                    ).id,
-                );
-                value =
-                  '{' +
-                  (foundVariable ? foundVariable.name : 'undefined') +
-                  '}';
-              } else if (variable.resolvedType === 'COLOR') {
-                const colorValue = variable.valuesByMode[
-                  collectionMode.modeId
-                ] as { r: number; g: number; b: number };
-                value = rgbToHex({
-                  r: colorValue.r,
-                  g: colorValue.g,
-                  b: colorValue.b,
-                });
-              } else {
-                value = String(variable.valuesByMode[collectionMode.modeId]);
-              }
-              obj[key] = {
-                value: value,
-                type: variable.resolvedType.toLocaleLowerCase(),
-              };
-            }
-            obj = obj[key] as VariableObject;
-          }
-        }
-      }
-    }
-  }
-
-  const filesArr = [];
-  // loop through first keys of obj2 with Object.entries
-  for (const [firstKey, firstValue] of Object.entries(obj2)) {
-    const path = firstKey;
-    for (const [secondKey, secondValue] of Object.entries(firstValue)) {
-      filesArr.push({
-        path: 'design-tokens/' + path + `/${secondKey}.json`,
-        content: JSON.stringify(secondValue, null, 2),
-      });
-    }
-  }
-
-  return filesArr;
-};
diff --git a/plugins/figma/src/plugin/figma/themes.ts b/plugins/figma/src/plugin/figma/themes.ts
index 87c527b5ca..bbd1e8c104 100644
--- a/plugins/figma/src/plugin/figma/themes.ts
+++ b/plugins/figma/src/plugin/figma/themes.ts
@@ -1,6 +1,5 @@
 import { hexToRgb } from '@digdir/designsystemet/color';
 
-import { getDummyFonts } from '../../common/dummyFonts';
 import { getDummyTheme } from '../../common/dummyTheme';
 import type { ColorIndex, ColorTheme, StoreThemes } from '../../common/store';
 import { rgbToHex } from '../../common/utils';
@@ -28,7 +27,6 @@ export const getThemes = async () => {
         themeId: themeMode.name.toLowerCase(),
         themeModeId: themeMode.modeId,
         colors: getDummyTheme(),
-        fonts: getDummyFonts(),
       });
     }
   }
@@ -65,187 +63,3 @@ export const getThemes = async () => {
 
   return themes;
 };
-
-export const addTheme = async (theme: ColorTheme, name: string) => {
-  const collections = await figma.variables.getLocalVariableCollectionsAsync();
-  let themeModeId = '';
-  const modeCollection = collections.find(
-    (collection) => collection.name === 'Mode',
-  );
-
-  for (const collection of collections) {
-    if (collection.name === 'Theme') {
-      themeModeId = collection.addMode(name);
-    }
-  }
-
-  for (const [key] of Object.entries(theme.accent.light)) {
-    if (modeCollection) {
-      const types = ['accent', 'neutral', 'brand1', 'brand2', 'brand3'];
-      for (const type of types) {
-        const lightRGB = hexToRgb(
-          (theme[type as keyof ColorTheme].light as Record<ColorIndex, string>)[
-            key as ColorIndex
-          ],
-          '1',
-        );
-        const darkRGB = hexToRgb(
-          (theme as Record<string, { dark: Record<ColorIndex, string> }>)[type]
-            .dark[key as ColorIndex],
-          '1',
-        );
-
-        const variable = figma.variables.createVariable(
-          name.toLocaleLowerCase() + '/' + type + '/' + key,
-          modeCollection,
-          'COLOR',
-        );
-
-        if (lightRGB && darkRGB) {
-          variable.setValueForMode(modeCollection.modes[0].modeId, lightRGB);
-          variable.setValueForMode(modeCollection.modes[1].modeId, darkRGB);
-        }
-      }
-    }
-  }
-
-  const variables = await figma.variables.getLocalVariablesAsync('COLOR');
-  for (const variable of variables) {
-    if (variable.name.startsWith('color')) {
-      const split = variable.name.split('/');
-      const themeType = split[1];
-      const themIndex = split[2];
-      if (themIndex.length < 5) {
-        const v = variables.find(
-          (v) =>
-            v.name ===
-            name.toLocaleLowerCase() + '/' + themeType + '/' + themIndex,
-        );
-        if (v) {
-          const alias = figma.variables.createVariableAlias(v);
-          if (alias) {
-            variable.setValueForMode(themeModeId, alias);
-          }
-        }
-      }
-    }
-  }
-};
-
-export const deleteTheme = async (themeModeId: string, themeId: string) => {
-  const collections = await figma.variables.getLocalVariableCollectionsAsync();
-  const themeCollection = collections.find(
-    (collection) => collection.name === 'Theme',
-  );
-
-  if (themeCollection) themeCollection.removeMode(themeModeId);
-
-  const variables = await figma.variables.getLocalVariablesAsync('COLOR');
-  for (const variable of variables) {
-    if (variable.name.startsWith(themeId + '/')) {
-      variable.remove();
-    }
-  }
-};
-export const renameTheme = async (
-  newName: string,
-  themeModeId: string,
-  themeId: string,
-) => {
-  const collections = await figma.variables.getLocalVariableCollectionsAsync();
-
-  const modeCollection = collections.find(
-    (collection) => collection.name === 'Mode',
-  );
-  const themeCollection = collections.find(
-    (collection) => collection.name === 'Theme',
-  );
-  const lightModeId = modeCollection?.modes[0].modeId;
-  const darkModeId = modeCollection?.modes[1].modeId;
-
-  if (themeCollection && newName) {
-    themeCollection.renameMode(themeModeId, newName);
-  }
-
-  let variables = await figma.variables.getLocalVariablesAsync('COLOR');
-
-  for (const variable of variables) {
-    const nameSplitArr = variable.name.split('/');
-    const ThemeType = nameSplitArr[1] as string;
-    const ThemeIndex = nameSplitArr[2] as ColorIndex;
-
-    if (variable.name.startsWith(themeId + '/')) {
-      let lightRGB = { r: 0, g: 0, b: 0 };
-      let darkRGB = { r: 0, g: 0, b: 0 };
-
-      for (const [key, value] of Object.entries(variable.valuesByMode)) {
-        if (key === lightModeId) {
-          lightRGB = value as RGB;
-        } else if (key === darkModeId) {
-          darkRGB = value as RGB;
-        }
-      }
-
-      if (modeCollection) {
-        const newVariable = figma.variables.createVariable(
-          newName.toLocaleLowerCase() + '/' + ThemeType + '/' + ThemeIndex,
-          modeCollection,
-          'COLOR',
-        );
-        if (lightRGB && darkRGB) {
-          newVariable.setValueForMode(modeCollection.modes[0].modeId, lightRGB);
-          newVariable.setValueForMode(modeCollection.modes[1].modeId, darkRGB);
-        }
-      }
-    }
-  }
-
-  variables = await figma.variables.getLocalVariablesAsync('COLOR');
-
-  for (const variable of variables) {
-    if (variable.name.startsWith('color')) {
-      const split = variable.name.split('/');
-      const themeType = split[1];
-      const themIndex = split[2];
-      if (themIndex.length < 5) {
-        const v = variables.find(
-          (v) =>
-            v.name ===
-            newName.toLocaleLowerCase() + '/' + themeType + '/' + themIndex,
-        );
-        if (v) {
-          const alias = figma.variables.createVariableAlias(v);
-          if (alias) {
-            variable.setValueForMode(themeModeId, alias);
-          }
-        }
-      }
-    }
-    if (variable.name.startsWith(themeId + '/')) {
-      variable.remove();
-    }
-  }
-};
-
-export const updateTheme = async () => {
-  const variables = await figma.variables.getLocalVariablesAsync('COLOR');
-  const collections = await figma.variables.getLocalVariableCollectionsAsync();
-  const modeCollection = collections.find((col) => col.name === 'Mode');
-  const lightModeId = modeCollection?.modes[0].modeId;
-  const themeCollection = collections.find((col) => col.name === 'Theme');
-  const test = themeCollection?.modes[0].modeId;
-
-  for (const variable of variables) {
-    if (variable.name === 'digdir/brand1/3' && lightModeId) {
-      variable.setValueForMode(lightModeId, { r: 0, g: 0, b: 0 });
-    }
-  }
-  const v = variables.find((v) => v.name === 'color/brand1/3');
-  const ve = variables.find((v) => v.name === 'digdir/brand1/3');
-  if (v && ve && lightModeId && test) {
-    const alias = figma.variables.createVariableAlias(ve);
-    if (alias) {
-      v.setValueForMode(test, alias);
-    }
-  }
-};
diff --git a/plugins/figma/src/plugin/figma/updateVariables.ts b/plugins/figma/src/plugin/figma/updateVariables.ts
index cecfc85cc2..8b9d68c5bd 100644
--- a/plugins/figma/src/plugin/figma/updateVariables.ts
+++ b/plugins/figma/src/plugin/figma/updateVariables.ts
@@ -22,7 +22,6 @@ const updateColors = (
   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')
diff --git a/plugins/figma/src/plugin/plugin.ts b/plugins/figma/src/plugin/plugin.ts
index b03d724f63..bc89ffa3c7 100644
--- a/plugins/figma/src/plugin/plugin.ts
+++ b/plugins/figma/src/plugin/plugin.ts
@@ -44,7 +44,6 @@ figma.ui.onmessage = (msg: {
 
       case 'getThemes': {
         const themes = await getThemes();
-        console.log('themes - ', themes);
         figma.ui.postMessage({ type: 'getThemes', themes: themes });
         break;
       }
diff --git a/plugins/figma/src/ui/app.tsx b/plugins/figma/src/ui/app.tsx
index e3e2db162b..9c23b977ca 100644
--- a/plugins/figma/src/ui/app.tsx
+++ b/plugins/figma/src/ui/app.tsx
@@ -16,26 +16,18 @@ import type { StoreThemes } from '../common/store';
 import { useThemeStore } from '../common/store';
 
 import { Footer } from './components/Footer/Footer';
-import AddTheme from './pages/AddTheme/AddTheme';
-import Colors from './pages/Colors/Colors';
-import { Github } from './pages/Github/Github';
-import PageTwo from './pages/PageTwo/PageTwo';
 import Theme from './pages/Theme/Theme';
 import Themes from './pages/Themes/Themes';
-import PageThree from './pages/pageThree/PageThree';
-import { commitToGithub } from './utils/github';
 
 function App() {
   const setThemes = useThemeStore((state) => state.setThemes);
   const navigate = useNavigate();
   const setLoading = useThemeStore((state) => state.setLoading);
-  const setFonts = useThemeStore((state) => state.setFonts);
   const setError = useThemeStore((state) => state.setCodeSnippetError);
   const setNoThemesFound = useThemeStore((state) => state.setNoThemesFound);
 
   useEffect(() => {
     parent.postMessage({ pluginMessage: { type: 'getThemes' } }, '*');
-    parent.postMessage({ pluginMessage: { type: 'getFonts' } }, '*');
     // biome-ignore lint/suspicious/noGlobalAssign: <explanation>
     onmessage = (event: {
       data: {
@@ -47,33 +39,27 @@ function App() {
         };
       };
     }) => {
-      if (event.data.pluginMessage.type === 'getThemes') {
-        if (event.data.pluginMessage.themes.length > 0) {
-          setThemes(event.data.pluginMessage.themes);
-        } else {
-          setNoThemesFound(true);
-        }
-      } else if (event.data.pluginMessage.type === 'geThemesAndRedirect') {
-        navigate('/');
-        parent.postMessage({ pluginMessage: { type: 'getThemes' } }, '*');
-      } else if (event.data.pluginMessage.type === 'getFonts') {
-        setFonts(event.data.pluginMessage.fonts);
-      } else if (event.data.pluginMessage.type === 'generateJson') {
-        commitToGithub(event.data.pluginMessage.json)
-          .then(() => {
-            console.log('finish');
-          })
-          .catch((e) => {
-            console.log(e);
-          });
-      } else if (event.data.pluginMessage.type === 'setValueForModeError') {
-        setError(
-          'En feil har oppstått. Du må ha minimum pro-versjonen av Figma for å kunne generere tema.',
-        );
-      } else if (event.data.pluginMessage.type === 'updateVariables') {
-        setError('');
+      switch (event.data.pluginMessage.type) {
+        case 'getThemes':
+          if (event.data.pluginMessage.themes.length > 0) {
+            setThemes(event.data.pluginMessage.themes);
+          } else {
+            setNoThemesFound(true);
+          }
+          break;
+        case 'geThemesAndRedirect':
+          navigate('/');
+          parent.postMessage({ pluginMessage: { type: 'getThemes' } }, '*');
+          break;
+        case 'setValueForModeError':
+          setError(
+            'En feil har oppstått. Du må ha minimum pro-versjonen av Figma for å kunne generere tema.',
+          );
+          break;
+        case 'updateVariables':
+          setError('');
+          break;
       }
-      console.log('finish');
       setLoading(false);
     };
   }, []);
@@ -87,23 +73,13 @@ function App() {
         >
           Mine temaer
         </NavLink>
-        {/* <NavLink className='link' to='/settings'>
-          Innstillinger
-        </NavLink> */}
       </div>
 
       <div className='content'>
         <Routes>
           <Route path='/' element={<Navigate to='/themes' replace />} />
-
-          <Route path='/fonts' element={<PageTwo />} />
-          <Route path='/settings' element={<PageThree />} />
           <Route path='/themes' element={<Themes />} />
-
-          <Route path='/themes/:themeId/colors' element={<Colors />} />
           <Route path='/themes/:themeId' element={<Theme />} />
-          <Route path='/theme/add' element={<AddTheme />} />
-          <Route path='/github' element={<Github />} />
         </Routes>
       </div>
       <Footer />
diff --git a/plugins/figma/src/ui/components/CardButton/CardButton.module.css b/plugins/figma/src/ui/components/CardButton/CardButton.module.css
deleted file mode 100644
index 906a564c62..0000000000
--- a/plugins/figma/src/ui/components/CardButton/CardButton.module.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.cardBtn {
-  height: 100px;
-  width: 150px;
-  border: 2px solid var(--figma-color-border);
-  color: var(--figma-color-text-secondary);
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: 0.1s all;
-}
-
-.cardBtn:hover {
-  border-color: var(--figma-color-border-hover);
-  color: var(--figma-color-text);
-}
diff --git a/plugins/figma/src/ui/components/CardButton/CardButton.tsx b/plugins/figma/src/ui/components/CardButton/CardButton.tsx
deleted file mode 100644
index 178f0f4a9c..0000000000
--- a/plugins/figma/src/ui/components/CardButton/CardButton.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Plus } from 'lucide-react';
-import { Link } from 'react-router-dom';
-
-import classes from './CardButton.module.css';
-export const CardButton = ({ url }: { url: string }) => {
-  return (
-    <Link to={url} className={classes.cardBtn}>
-      <Plus />
-    </Link>
-  );
-};
diff --git a/plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.module.css b/plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.module.css
deleted file mode 100644
index a938895611..0000000000
--- a/plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.module.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.codeSnippet {
-  position: relative;
-  max-width: 100%;
-  overflow-x: auto;
-  width: 100%;
-  height: 100%;
-}
-
-.copyContainer {
-  position: sticky;
-  top: 0;
-  left: 0;
-  height: calc(100% - 1px);
-  width: calc(100% - 1px);
-  float: left;
-  margin-right: -100%;
-  pointer-events: none;
-}
-
-.icon {
-  pointer-events: auto;
-  position: absolute;
-  top: 24px;
-  right: 24px;
-  height: 40px;
-  width: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #3b434d;
-  color: white;
-  border-radius: var(--ds-border-radius-md);
-  border: none;
-  transition: 0.15s all;
-  cursor: pointer;
-}
-
-.icon:hover {
-  background-color: #575e68;
-}
diff --git a/plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.tsx b/plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.tsx
deleted file mode 100644
index 5a1ae6f301..0000000000
--- a/plugins/figma/src/ui/components/CodeSnippet/CodeSnippet.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Tooltip } from '@digdir/designsystemet-react';
-import { FilesIcon } from '@navikt/aksel-icons';
-import * as prettierEstree from 'prettier/plugins/estree';
-import * as prettierHtml from 'prettier/plugins/html.js';
-import * as prettierMarkdown from 'prettier/plugins/markdown.js';
-import * as prettierCSS from 'prettier/plugins/postcss.js';
-import * as prettierTypescript from 'prettier/plugins/typescript.js';
-import { format } from 'prettier/standalone.js';
-import { useEffect, useState } from 'react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-
-import classes from './CodeSnippet.module.css';
-
-const plugins = [
-  prettierTypescript,
-  prettierEstree,
-  prettierCSS,
-  prettierMarkdown,
-  prettierHtml,
-];
-
-type CodeSnippetProps = {
-  language?: 'css' | 'html' | 'ts' | 'markdown' | 'js';
-  children?: string;
-};
-
-export const CodeSnippet = ({
-  language = 'markdown',
-  children = '',
-}: CodeSnippetProps) => {
-  const [toolTipText, setToolTipText] = useState('Kopier');
-  const [snippet, setSnippet] = useState('');
-
-  useEffect(() => {
-    async function formatSnippet(
-      children: string,
-      language: CodeSnippetProps['language'],
-    ) {
-      try {
-        const formatted = await format(children, { parser: language, plugins });
-        setSnippet(formatted);
-      } catch (error) {
-        console.error('Failed formatting code snippet:', error);
-        setSnippet(children);
-      }
-    }
-    void formatSnippet(children, language);
-
-    return () => {
-      setSnippet(children);
-    };
-  }, [children, language]);
-
-  const onButtonClick = () => {
-    setToolTipText('Kopiert!');
-    navigator.clipboard.writeText(children).catch((reason) => {
-      throw Error(String(reason));
-    });
-  };
-
-  return (
-    <div className={classes.codeSnippet}>
-      {snippet && (
-        <>
-          <div className={classes.copyContainer}>
-            <Tooltip
-              content={toolTipText}
-              className={classes.tooltip}
-              portal={false}
-              placement='top'
-            >
-              <button
-                onMouseEnter={() => setToolTipText('Kopier')}
-                onClick={() => onButtonClick()}
-                className={classes.icon}
-              >
-                <FilesIcon fontSize={22} />
-              </button>
-            </Tooltip>
-          </div>
-          <SyntaxHighlighter
-            style={oneDark}
-            language={language}
-            customStyle={{
-              fontSize: '13px',
-              margin: 0,
-              padding: '15px',
-            }}
-          >
-            {snippet}
-          </SyntaxHighlighter>
-        </>
-      )}
-    </div>
-  );
-};
diff --git a/plugins/figma/src/ui/components/ColorPicker/ColorPicker.module.css b/plugins/figma/src/ui/components/ColorPicker/ColorPicker.module.css
deleted file mode 100644
index 729fb2ca4b..0000000000
--- a/plugins/figma/src/ui/components/ColorPicker/ColorPicker.module.css
+++ /dev/null
@@ -1,54 +0,0 @@
-.container {
-  flex-grow: 1;
-  flex-basis: 0;
-  min-width: 0;
-}
-
-.picker {
-  background-color: var(--figma-color-bg-secondary);
-  border-radius: 4px;
-  padding: 10px;
-  display: flex;
-  align-items: center;
-  gap: 3px;
-  border: none;
-  color: inherit;
-  width: 100%;
-  cursor: pointer;
-  transition: 0.15s all;
-}
-
-.picker:hover {
-  box-shadow: 0 0 0 1px #777;
-}
-
-.text {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  text-align: left;
-}
-
-.circle {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  margin-right: 8px;
-  border: 3px solid var(--figma-color-bg-secondary);
-  outline: 1px solid var(--figma-color-text-secondary);
-}
-
-.hex {
-  color: var(--figma-color-text-secondary);
-}
-
-.popup {
-  position: absolute;
-  display: none;
-  z-index: 5;
-  left: 16px;
-}
-
-.show {
-  display: block;
-}
diff --git a/plugins/figma/src/ui/components/ColorPicker/ColorPicker.tsx b/plugins/figma/src/ui/components/ColorPicker/ColorPicker.tsx
deleted file mode 100644
index f4fd0574df..0000000000
--- a/plugins/figma/src/ui/components/ColorPicker/ColorPicker.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { CssColor } from '@adobe/leonardo-contrast-colors';
-import { useClickOutside } from '@react-awesome/use-click-outside';
-import cl from 'clsx';
-import { useRef, useState } from 'react';
-import { ChromePicker } from 'react-color';
-
-import classes from './ColorPicker.module.css';
-
-type ColorPickerProps = {
-  title: string;
-  color: CssColor;
-  onColorChanged?: ((color: CssColor) => void) | undefined;
-};
-
-export const ColorPicker = ({
-  title,
-  color,
-  onColorChanged,
-}: ColorPickerProps) => {
-  const [showModal, setShowModal] = useState(false);
-  const handleClick = () => {
-    setShowModal(!showModal);
-  };
-  const ref = useRef(null);
-
-  useClickOutside(ref.current, () => {
-    setShowModal(false);
-  });
-
-  return (
-    <div className={classes.container} ref={ref}>
-      <button className={classes.picker} onClick={() => handleClick()}>
-        <div
-          className={classes.circle}
-          style={{ backgroundColor: color }}
-        ></div>
-        <div className={classes.text}>
-          <span className={classes.name}>{title}</span>
-          <span className={classes.hex}>{color}</span>
-        </div>
-      </button>
-
-      <div className={cl(classes.popup, showModal && classes.show)}>
-        <ChromePicker
-          onChangeComplete={({ hex }: { hex: string }) => {
-            onColorChanged?.(hex as CssColor);
-          }}
-          color={color}
-        />
-      </div>
-    </div>
-  );
-};
diff --git a/plugins/figma/src/ui/components/Footer/Footer.tsx b/plugins/figma/src/ui/components/Footer/Footer.tsx
index 0d0a3f2040..03f0a8f24c 100644
--- a/plugins/figma/src/ui/components/Footer/Footer.tsx
+++ b/plugins/figma/src/ui/components/Footer/Footer.tsx
@@ -1,7 +1,5 @@
-import { Button, Spinner, Tooltip } from '@digdir/designsystemet-react';
+import { Spinner, Tooltip } from '@digdir/designsystemet-react';
 import { ChatElipsisIcon } from '@navikt/aksel-icons';
-import { Code, Github } from 'lucide-react';
-import { Link } from 'react-router-dom';
 
 import packageJson from '../../../../package.json';
 import { useThemeStore } from '../../../common/store';
@@ -9,37 +7,12 @@ import { useThemeStore } from '../../../common/store';
 import classes from './Footer.module.css';
 
 export const Footer = () => {
-  const themes = useThemeStore((state) => state.themes);
   const loading = useThemeStore((state) => state.loading);
-  const setLoading = useThemeStore((state) => state.setLoading);
-
-  const handleClick = () => {
-    setLoading(true);
-    setTimeout(() => {
-      parent.postMessage(
-        {
-          pluginMessage: {
-            type: 'updateVariables',
-            themes: themes,
-          },
-        },
-        '*',
-      );
-    }, 500);
-  };
 
   return (
     <div className={classes.footer}>
       <div className={classes.top}>
-        <div className={classes.topLeft}>
-          {/* <Button
-            className={classes.btn}
-            size='sm'
-            onClick={() => handleClick()}
-          >
-            Oppdater variabler
-          </Button> */}
-        </div>
+        <div className={classes.topLeft}></div>
 
         <div className={classes.topRight}>
           {loading && (
@@ -48,30 +21,7 @@ export const Footer = () => {
         </div>
       </div>
       <div className={classes.bottom}>
-        <div className={classes.bottomLeft}>
-          {/* <Link className={classes.link} to='/github'>
-            <Button
-              className={classes.github}
-              size='sm'
-              color='neutral'
-              variant='tertiary'
-            >
-              <Github size={17} />
-              Github
-            </Button>
-          </Link>
-          <Link className={classes.link} to='/github'>
-            <Button
-              className={classes.github}
-              size='sm'
-              color='neutral'
-              variant='tertiary'
-            >
-              <Code size={17} />
-              NPM
-            </Button>
-          </Link> */}
-        </div>
+        <div className={classes.bottomLeft}></div>
         <div className={classes.bottomRight}>
           <div className={classes.version}>V {packageJson.version}</div>
           <Tooltip content='Feedback' placement='top'>
diff --git a/plugins/figma/src/ui/components/Textfield/Textfield.module.css b/plugins/figma/src/ui/components/Textfield/Textfield.module.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/plugins/figma/src/ui/components/Textfield/Textfield.tsx b/plugins/figma/src/ui/components/Textfield/Textfield.tsx
deleted file mode 100644
index d7ad0d4073..0000000000
--- a/plugins/figma/src/ui/components/Textfield/Textfield.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Textfield as DSTextfield } from '@digdir/designsystemet-react';
-
-type TextfieldProps = {
-  label: string;
-  size?: 'sm' | 'md' | 'lg';
-};
-
-export const Textfield = ({ ...rest }: TextfieldProps) => {
-  return <DSTextfield {...rest} />;
-};
diff --git a/plugins/figma/src/ui/components/Toast/Toast.css b/plugins/figma/src/ui/components/Toast/Toast.css
deleted file mode 100644
index ad193052a7..0000000000
--- a/plugins/figma/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/src/ui/components/Toast/Toast.tsx b/plugins/figma/src/ui/components/Toast/Toast.tsx
deleted file mode 100644
index 9901e95746..0000000000
--- a/plugins/figma/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' title='loading' size='sm' />
-          Oppdaterer variabler...
-        </>
-      )}
-    </div>
-  );
-};
diff --git a/plugins/figma/src/ui/main.tsx b/plugins/figma/src/ui/main.tsx
index bd0f84c50b..d9e2694189 100644
--- a/plugins/figma/src/ui/main.tsx
+++ b/plugins/figma/src/ui/main.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { Toaster } from 'react-hot-toast';
 import { MemoryRouter } from 'react-router-dom';
 
 async function bootstrap() {
@@ -13,7 +12,6 @@ async function bootstrap() {
     <React.StrictMode>
       <MemoryRouter>
         <App />
-        <Toaster />
       </MemoryRouter>
     </React.StrictMode>,
   );
diff --git a/plugins/figma/src/ui/pages/AddTheme/AddTheme.module.css b/plugins/figma/src/ui/pages/AddTheme/AddTheme.module.css
deleted file mode 100644
index 61446af301..0000000000
--- a/plugins/figma/src/ui/pages/AddTheme/AddTheme.module.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.page {
-  padding: 12px;
-}
-
-.pickers {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  position: relative;
-  z-index: 50;
-  margin-bottom: 24px;
-}
-
-.input {
-  margin-bottom: 24px;
-  margin-top: 20px;
-  background-color: var(--figma-color-bg-secondary);
-  border: none;
-  padding: 9px 11px;
-  width: 150px;
-  font-size: 14px;
-  border-radius: 2px;
-  color: var(--figma-color-text);
-}
-
-.input::placeholder {
-  color: #9e9e9e;
-}
diff --git a/plugins/figma/src/ui/pages/AddTheme/AddTheme.tsx b/plugins/figma/src/ui/pages/AddTheme/AddTheme.tsx
deleted file mode 100644
index a002d9c31d..0000000000
--- a/plugins/figma/src/ui/pages/AddTheme/AddTheme.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import type { CssColor } from '@adobe/leonardo-contrast-colors';
-import { Button } from '@digdir/designsystemet-react';
-import { generateThemeForColor } from '@digdir/designsystemet/color';
-import { useState } from 'react';
-
-import { Breadcrumbs } from '@ui/components/Breadcrumbs/Breadcrumbs';
-import { ColorPicker } from '@ui/components/ColorPicker/ColorPicker';
-
-import { getDummyTheme } from '../../../common/dummyTheme';
-import { type ColorTheme, useThemeStore } from '../../../common/store';
-import { themeToFigmaFormat } from '../../../common/utils';
-
-import classes from './AddTheme.module.css';
-
-function AddTheme() {
-  const [theme, setTheme] = useState<ColorTheme>(getDummyTheme());
-  const setLoading = useThemeStore((state) => state.setLoading);
-  const [name, setName] = useState<string>('');
-
-  const handleClick = () => {
-    setLoading(true);
-    setTimeout(() => {
-      parent.postMessage(
-        {
-          pluginMessage: {
-            type: 'addTheme',
-            addTheme: {
-              theme,
-              name,
-            },
-          },
-        },
-        '*',
-      );
-    }, 500);
-  };
-
-  return (
-    <div className={classes.page}>
-      <Breadcrumbs text='Legg til nytt tema' url={'/themes'} />
-      <div>
-        <input
-          className={classes.input}
-          type='text'
-          placeholder='Navn'
-          onChange={(e) => setName(e.target.value)}
-        />
-      </div>
-      <div className={classes.pickers}>
-        <ColorPicker
-          color={theme.accent.light?.[9] as CssColor}
-          title='Accent'
-          onColorChanged={(color: CssColor) => {
-            setTheme({
-              ...theme,
-              accent: themeToFigmaFormat(generateThemeForColor(color)),
-            });
-          }}
-        />
-        <ColorPicker
-          color={theme.neutral.light?.[9] as CssColor}
-          title='Neutral'
-          onColorChanged={(color: CssColor) => {
-            setTheme({
-              ...theme,
-              neutral: themeToFigmaFormat(generateThemeForColor(color)),
-            });
-          }}
-        />
-        <ColorPicker
-          color={theme.brand1.light?.[9] as CssColor}
-          title='Brand 1'
-          onColorChanged={(color: CssColor) => {
-            setTheme({
-              ...theme,
-              brand1: themeToFigmaFormat(generateThemeForColor(color)),
-            });
-          }}
-        />
-        <ColorPicker
-          color={theme.brand2.light?.[9] as CssColor}
-          title='Brand 2'
-          onColorChanged={(color: CssColor) => {
-            setTheme({
-              ...theme,
-              brand2: themeToFigmaFormat(generateThemeForColor(color)),
-            });
-          }}
-        />
-        <ColorPicker
-          color={theme.brand3.light?.[9] as CssColor}
-          title='Brand 3'
-          onColorChanged={(color: CssColor) => {
-            setTheme({
-              ...theme,
-              brand3: themeToFigmaFormat(generateThemeForColor(color)),
-            });
-          }}
-        />
-      </div>
-      <Button size='sm' className='btn' onClick={() => handleClick()}>
-        Legg til
-      </Button>
-    </div>
-  );
-}
-
-export default AddTheme;
diff --git a/plugins/figma/src/ui/pages/Colors/Colors.module.css b/plugins/figma/src/ui/pages/Colors/Colors.module.css
deleted file mode 100644
index e6a9f5d841..0000000000
--- a/plugins/figma/src/ui/pages/Colors/Colors.module.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.pickers {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  position: relative;
-  z-index: 50;
-  margin-top: 20px;
-}
-
-.content {
-  padding: 16px 12px 12px;
-}
-
-.btn {
-  font-size: 14px;
-  margin-top: 32px;
-}
diff --git a/plugins/figma/src/ui/pages/Colors/Colors.tsx b/plugins/figma/src/ui/pages/Colors/Colors.tsx
deleted file mode 100644
index b3a28d86bc..0000000000
--- a/plugins/figma/src/ui/pages/Colors/Colors.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import type { CssColor } from '@adobe/leonardo-contrast-colors';
-import type { ThemeInfo } from '@digdir/designsystemet/color';
-import { generateThemeForColor } from '@digdir/designsystemet/color';
-import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-
-import { Breadcrumbs } from '@ui/components/Breadcrumbs/Breadcrumbs';
-import { ColorPicker } from '@ui/components/ColorPicker/ColorPicker';
-
-import { getDummyTheme } from '../../../common/dummyTheme';
-import type {
-  ColorTheme,
-  ThemeInfo as testThemeInfo,
-} from '../../../common/store';
-import { useThemeStore } from '../../../common/store';
-
-import classes from './Colors.module.css';
-
-const Tomato = (theme: ThemeInfo): testThemeInfo => {
-  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,
-    },
-  };
-};
-
-function Colors() {
-  const themes = useThemeStore((state) => state.themes);
-  const [theme, setTheme] = useState<ColorTheme>(getDummyTheme());
-  const [themeIndex, setThemeIndex] = useState<number>(0);
-  const setThemes = useThemeStore((state) => state.setThemes);
-  const { themeId } = useParams<string>();
-
-  useEffect(() => {
-    setThemeIndex(themes.findIndex((theme) => theme.themeModeId === themeId));
-    setTheme(
-      themes.find((theme) => theme.themeModeId === themeId)
-        ?.colors as ColorTheme,
-    );
-  }, [themeId, themes]);
-
-  return (
-    <div className={classes.content}>
-      <Breadcrumbs
-        text={
-          'Farger (' +
-          themes.find((theme) => theme.themeModeId === themeId)?.name +
-          ')'
-        }
-        url={'/themes/' + themeId}
-      />
-      <div className={classes.pickers}>
-        <ColorPicker
-          color={theme.accent.light?.[9] as CssColor}
-          title='Accent'
-          onColorChanged={(color: CssColor) => {
-            const theme = generateThemeForColor(color);
-            const numberTheme = Tomato(theme);
-            const newArray = Array.from(themes);
-            newArray[themeIndex] = {
-              ...newArray[themeIndex],
-              colors: {
-                ...newArray[themeIndex].colors,
-                accent: numberTheme,
-              },
-            };
-            setThemes(newArray);
-          }}
-        />
-        <ColorPicker
-          color={theme.neutral.light?.[9] as CssColor}
-          title='Neutral'
-          onColorChanged={(color: CssColor) => {
-            const theme = generateThemeForColor(color);
-            const numberTheme = Tomato(theme);
-            const newArray = Array.from(themes);
-            newArray[themeIndex] = {
-              ...newArray[themeIndex],
-              colors: {
-                ...newArray[themeIndex].colors,
-                neutral: numberTheme,
-              },
-            };
-            setThemes(newArray);
-          }}
-        />
-
-        <ColorPicker
-          color={theme.brand1.light?.[9] as CssColor}
-          title='Brand 1'
-          onColorChanged={(color: CssColor) => {
-            const theme = generateThemeForColor(color);
-            const numberTheme = Tomato(theme);
-            const newArray = Array.from(themes);
-            newArray[themeIndex] = {
-              ...newArray[themeIndex],
-              colors: {
-                ...newArray[themeIndex].colors,
-                brand1: numberTheme,
-              },
-            };
-            setThemes(newArray);
-          }}
-        />
-        <ColorPicker
-          color={theme.brand2.light?.[9] as CssColor}
-          title='Brand 2'
-          onColorChanged={(color: CssColor) => {
-            const theme = generateThemeForColor(color);
-            const numberTheme = Tomato(theme);
-            const newArray = Array.from(themes);
-            newArray[themeIndex] = {
-              ...newArray[themeIndex],
-              colors: {
-                ...newArray[themeIndex].colors,
-                brand2: numberTheme,
-              },
-            };
-            setThemes(newArray);
-          }}
-        />
-        <ColorPicker
-          color={theme.brand3.light?.[9] as CssColor}
-          title='Brand 3'
-          onColorChanged={(color: CssColor) => {
-            const theme = generateThemeForColor(color);
-            const numberTheme = Tomato(theme);
-            const newArray = Array.from(themes);
-            newArray[themeIndex] = {
-              ...newArray[themeIndex],
-              colors: {
-                ...newArray[themeIndex].colors,
-                brand3: numberTheme,
-              },
-            };
-            setThemes(newArray);
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default Colors;
diff --git a/plugins/figma/src/ui/pages/Github/Github.module.css b/plugins/figma/src/ui/pages/Github/Github.module.css
deleted file mode 100644
index 3bc352f19b..0000000000
--- a/plugins/figma/src/ui/pages/Github/Github.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.snippet {
-  height: 294px;
-}
-
-.content {
-  padding: 16px;
-}
diff --git a/plugins/figma/src/ui/pages/Github/Github.tsx b/plugins/figma/src/ui/pages/Github/Github.tsx
deleted file mode 100644
index 328a1b31a1..0000000000
--- a/plugins/figma/src/ui/pages/Github/Github.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Button, Textfield } from '@digdir/designsystemet-react';
-
-import { useThemeStore } from '../../../common/store';
-
-import classes from './Github.module.css';
-
-export const Github = () => {
-  const setLoading = useThemeStore((state) => state.setLoading);
-
-  const handleClick = () => {
-    setLoading(true);
-    parent.postMessage({ pluginMessage: { type: 'generateJson' } }, '*');
-  };
-
-  return (
-    <div className={classes.content}>
-      <h1 className='pageTitle'>Push til Github</h1>
-      <Textfield
-        label='Github repo'
-        size='sm'
-        className='textfield'
-        prefix='github.com/'
-        value='Thuneer/design-tokens'
-      />
-
-      <Textfield label='Branch' size='sm' value='main' className='textfield' />
-      <Textfield
-        label='PAT'
-        size='sm'
-        className='textfield'
-        type='password'
-        value='token'
-      />
-      <Button
-        onClick={() => {
-          handleClick();
-        }}
-        className='btn'
-      >
-        Push til Github
-      </Button>
-    </div>
-  );
-};
diff --git a/plugins/figma/src/ui/pages/PageOne/PageOne.module.css b/plugins/figma/src/ui/pages/PageOne/PageOne.module.css
deleted file mode 100644
index 58aba0f9b1..0000000000
--- a/plugins/figma/src/ui/pages/PageOne/PageOne.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.pickers {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.content {
-  padding: 8px;
-}
diff --git a/plugins/figma/src/ui/pages/PageOne/PageOne.tsx b/plugins/figma/src/ui/pages/PageOne/PageOne.tsx
deleted file mode 100644
index 26412f346c..0000000000
--- a/plugins/figma/src/ui/pages/PageOne/PageOne.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { useState } from 'react';
-
-import classes from './PageOne.module.css';
-
-import { ColorPicker } from '@ui/components/ColorPicker/ColorPicker';
-
-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 [accent, setAccent] = useState('#0163BA');
-  const [neutral, setNeutral] = useState('#1E2B3C');
-  const [brand1, setBrand1] = useState('#F45F63');
-  const [brand2, setBrand2] = useState('#E5AA20');
-  const [brand3, setBrand3] = useState('#1E98F5');
-
-  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={classes.content}>
-      <div className={classes.pickers}></div>
-    </div>
-  );
-}
-
-export default PageOne;
diff --git a/plugins/figma/src/ui/pages/PageTwo/PageTwo.tsx b/plugins/figma/src/ui/pages/PageTwo/PageTwo.tsx
deleted file mode 100644
index 679c260a2d..0000000000
--- a/plugins/figma/src/ui/pages/PageTwo/PageTwo.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Type } from 'lucide-react';
-
-import { Card } from '@ui/components/Card/Card';
-import { CardButton } from '@ui/components/CardButton/CardButton';
-
-function PageTwo() {
-  return (
-    <div className='content'>
-      <div>
-        <Card url={'/themes/colors'} title='Inter' icon={<Type />} />
-        <CardButton />
-      </div>
-    </div>
-  );
-}
-
-export default PageTwo;
diff --git a/plugins/figma/src/ui/pages/Theme/Theme.tsx b/plugins/figma/src/ui/pages/Theme/Theme.tsx
index 5bc3f3acce..8c101e1592 100644
--- a/plugins/figma/src/ui/pages/Theme/Theme.tsx
+++ b/plugins/figma/src/ui/pages/Theme/Theme.tsx
@@ -1,17 +1,8 @@
-import { Button, Link, Textarea } from '@digdir/designsystemet-react';
-import {
-  AlignVerticalSpaceAround,
-  Check,
-  Palette,
-  Pencil,
-  Shapes,
-  Type,
-} from 'lucide-react';
+import { Button, Label, Link, Textarea } from '@digdir/designsystemet-react';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { Breadcrumbs } from '@ui/components/Breadcrumbs/Breadcrumbs';
-import { Card } from '@ui/components/Card/Card';
 
 import { type ColorTheme, useThemeStore } from '../../../common/store';
 
@@ -24,8 +15,6 @@ import classes from './Theme.module.css';
 function Theme() {
   const { themeId } = useParams();
   const themes = useThemeStore((state) => state.themes);
-  const [newName, setNewName] = useState('');
-  const [editMode, setEditMode] = useState(false);
   const setLoading = useThemeStore((state) => state.setLoading);
   const [theme, setTheme] = useState<ColorTheme>(getDummyTheme());
   const [command, setCommand] = useState('');
@@ -45,28 +34,6 @@ function Theme() {
     );
   });
 
-  const changeName = () => {
-    setLoading(true);
-    setEditMode(false);
-    setTimeout(() => {
-      parent.postMessage(
-        {
-          pluginMessage: {
-            type: 'renameTheme',
-            renameTheme: {
-              newName: newName,
-              themeModeId: themes.find((theme) => theme.themeModeId === themeId)
-                ?.themeModeId,
-              themeId: themes.find((theme) => theme.themeModeId === themeId)
-                ?.themeId,
-            },
-          },
-        },
-        '*',
-      );
-    }, 500);
-  };
-
   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})"/;
@@ -119,26 +86,6 @@ function Theme() {
     }
   };
 
-  const deleteClicked = () => {
-    setLoading(true);
-    setTimeout(() => {
-      parent.postMessage(
-        {
-          pluginMessage: {
-            type: 'deleteTheme',
-            deleteTheme: {
-              themeModeId: themes.find((theme) => theme.themeModeId === themeId)
-                ?.themeModeId,
-              themeId: themes.find((theme) => theme.themeModeId === themeId)
-                ?.themeId,
-            },
-          },
-        },
-        '*',
-      );
-    }, 500);
-  };
-
   return (
     <div className={classes.content}>
       <div className={classes.header}>
@@ -149,41 +96,7 @@ function Theme() {
             }
             url='/'
           />
-
-          {/* {!editMode && (
-            <Pencil
-              size={16}
-              className={classes.edit}
-              onClick={() => setEditMode(true)}
-            />
-          )}
-          {editMode && (
-            <>
-              <input
-                type='text'
-                placeholder='Nytt navn...'
-                onChange={(e) => Tomato(e.target.value)}
-                className={classes.input}
-              />
-              <Check
-                onClick={() => changeName()}
-                size={18}
-                className={classes.edit}
-              />
-            </>
-          )} */}
         </div>
-        {/* <div className={classes.headerRight}>
-          <Button
-            size='sm'
-            color='danger'
-            variant='tertiary'
-            className={classes.removeBtn}
-            onClick={() => deleteClicked()}
-          >
-            Slett tema
-          </Button>
-        </div> */}
       </div>
       <div>
         <p className={classes.text}>
@@ -195,14 +108,13 @@ function Theme() {
           fargene som blir oppdatert for øyeblikket. Vi jobber med å utvide
           pluginen med mer funksjonalitet senere.
         </p>
-
+        <Label htmlFor='my-textarea'>Kodesnutt fra temabyggeren</Label>
         <Textarea
           size='sm'
           value={command}
           onChange={(e) => setCommand(e.target.value)}
           name=''
-          label='Kodesnutt fra temabyggeren'
-          id=''
+          id='my-textarea'
           cols={22}
           className={classes.textarea}
           placeholder='Lim inn her...'
@@ -217,28 +129,7 @@ function Theme() {
           Oppdater tema
         </Button>
       </div>
-      <div className={classes.cards}>
-        {/* <Card
-          url={'/themes/' + themeId + '/colors'}
-          title='Farger'
-          icon={<Palette />}
-        /> */}
-        {/* <Card
-          url='/themes/altinn/colors'
-          title='Border Radius'
-          icon={<Shapes />}
-        />
-        <Card
-          url={'/themes/' + themeId + '/fonts'}
-          title='Fonter'
-          icon={<Type />}
-        />
-        <Card
-          url='/themes/altinn/colors'
-          title='Avstander'
-          icon={<AlignVerticalSpaceAround />}
-        /> */}
-      </div>
+      <div className={classes.cards}></div>
     </div>
   );
 }
diff --git a/plugins/figma/src/ui/pages/Themes/Themes.tsx b/plugins/figma/src/ui/pages/Themes/Themes.tsx
index d706fe44c5..961c3a847e 100644
--- a/plugins/figma/src/ui/pages/Themes/Themes.tsx
+++ b/plugins/figma/src/ui/pages/Themes/Themes.tsx
@@ -1,9 +1,5 @@
-import { Button } from '@digdir/designsystemet-react';
-import { useEffect } from 'react';
-
 import { Card } from '@ui/components/Card/Card';
-import { CardButton } from '@ui/components/CardButton/CardButton';
-
+import { useEffect } from 'react';
 import { useThemeStore } from '../../../common/store';
 
 import classes from './Themes.module.css';
@@ -23,8 +19,6 @@ function Themes() {
 
   return (
     <div className={classes.content}>
-      {/* <Button onClick={() => handleClick2()}>Add theme</Button>
-      <Button onClick={() => handleClick()}>update variable</Button> */}
       {noThemeFound && (
         <p className={classes.noThemes}>
           Fant ingen temaer. Husk at du må åpne pluginen i designsystemet sin
@@ -46,7 +40,6 @@ function Themes() {
             />
           );
         })}
-        {/* <CardButton url='/theme/add' /> */}
       </div>
     </div>
   );
diff --git a/plugins/figma/src/ui/pages/pageThree/PageThree.tsx b/plugins/figma/src/ui/pages/pageThree/PageThree.tsx
deleted file mode 100644
index 7bea6f9bf4..0000000000
--- a/plugins/figma/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/src/ui/utils/github.ts b/plugins/figma/src/ui/utils/github.ts
deleted file mode 100644
index 0b2617243a..0000000000
--- a/plugins/figma/src/ui/utils/github.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-const REPOSITORY_OWNER = 'Thuneer';
-const REPOSITORY_NAME = 'design-tokens';
-const BRANCH_NAME = 'main';
-
-const MODES = { FILE: '100644', FOLDER: '040000' };
-const TYPE = { BLOB: 'blob', TREE: 'tree' };
-
-// See: https://docs.github.com/en/free-pro-team@latest/rest/reference/git#commits
-const COMMITS_URL = `https://api.github.com/repos/${REPOSITORY_OWNER}/${REPOSITORY_NAME}/git/commits`;
-
-// See: https://docs.github.com/en/free-pro-team@latest/rest/reference/git#trees
-const REPOSITORY_TREE_URL = `https://api.github.com/repos/${REPOSITORY_OWNER}/${REPOSITORY_NAME}/git/trees`;
-
-// See: https://docs.github.com/en/free-pro-team@latest/rest/reference/git#get-a-reference
-const REF_URL = `https://api.github.com/repos/${REPOSITORY_OWNER}/${REPOSITORY_NAME}/git/refs/heads/${BRANCH_NAME}`;
-
-declare let process: {
-  env: {
-    GITHUB_TOKEN: string;
-  };
-};
-
-const headers = {
-  Accept: 'application/vnd.github.v3+json',
-  Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
-};
-
-export const commitToGithub = async (fileArr: []) => {
-  if (!fileArr.length) return;
-  // Get the sha of the last commit on BRANCH_NAME
-  const response = await fetch(REF_URL, { headers });
-  const {
-    object: { sha: currentCommitSha },
-  } = await response.json();
-
-  // Get the sha of the root tree on the commit retrieved previously
-  const commitResponse = await fetch(`${COMMITS_URL}/${currentCommitSha}`, {
-    headers,
-  });
-  const {
-    tree: { sha: treeSha },
-  } = await commitResponse.json();
-
-  // Create a tree to edit the content of the repository
-  const treeResponse = await fetch(REPOSITORY_TREE_URL, {
-    method: 'POST',
-    headers,
-    body: JSON.stringify({
-      base_tree: treeSha,
-      tree: fileArr.map(
-        ({ content, path }) =>
-          content
-            ? { path, content, mode: MODES.FILE, type: TYPE.BLOB } // Works for text files, utf-8 assumed
-            : { path, sha: null, mode: MODES.FILE, type: TYPE.BLOB }, // If sha is null => the file gets deleted
-      ),
-    }),
-  });
-  const { sha: newTreeSha } = await treeResponse.json();
-
-  // Create a commit that uses the tree created above
-  const commitResponse1 = await fetch(COMMITS_URL, {
-    method: 'POST',
-    headers,
-    body: JSON.stringify({
-      message: "Committing with GitHub's API :fire:",
-      tree: newTreeSha,
-      parents: [currentCommitSha],
-    }),
-  });
-  const { sha: newCommitSha } = await commitResponse1.json();
-
-  // Make BRANCH_NAME point to the created commit
-  await fetch(REF_URL, {
-    method: 'POST',
-    headers,
-    body: JSON.stringify({ sha: newCommitSha }),
-  });
-};
diff --git a/yarn.lock b/yarn.lock
index db1fb42f1a..8acf6b22b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2278,10 +2278,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.100.2
+  resolution: "@figma/plugin-typings@npm:1.100.2"
+  checksum: 10/cc04afed7355b8e1ab71bfab41105034cc80498b5156f3e86ea6b7e66b2882477e200fc2b84a6aad23c86d984d8906b0e1689467303da9bae09aeed4d256db00
   languageName: node
   linkType: hard
 
@@ -2400,6 +2400,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@isomorphic-git/idb-keyval@npm:3.3.2":
+  version: 3.3.2
+  resolution: "@isomorphic-git/idb-keyval@npm:3.3.2"
+  checksum: 10/d67cd1a2d1d9a264cb9b616bbd3d51fa98056946fd74a4529ea0105b90e6e2f0c241a4b4189a23cdc7a8b0b4d7a84966134dba452cf9670a8da22ff5b0f564b4
+  languageName: node
+  linkType: hard
+
+"@isomorphic-git/lightning-fs@npm:^4.6.0":
+  version: 4.6.0
+  resolution: "@isomorphic-git/lightning-fs@npm:4.6.0"
+  dependencies:
+    "@isomorphic-git/idb-keyval": "npm:3.3.2"
+    isomorphic-textencoder: "npm:1.0.1"
+    just-debounce-it: "npm:1.1.0"
+    just-once: "npm:1.1.0"
+  bin:
+    superblocktxt: src/superblocktxt.js
+  checksum: 10/e42117d132d1ebaee10940df926fdf06bc34a9127ccf9c564aaaf5007fb087d14bb830fc08a100109ae2df9057382697f17f9bbfd4bdeb66a6a0de36a64a48b8
+  languageName: node
+  linkType: hard
+
 "@istanbuljs/load-nyc-config@npm:^1.0.0":
   version: 1.1.0
   resolution: "@istanbuljs/load-nyc-config@npm:1.1.0"
@@ -3053,10 +3074,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@remix-run/router@npm:1.19.0":
-  version: 1.19.0
-  resolution: "@remix-run/router@npm:1.19.0"
-  checksum: 10/13a881fc47ca3571dcad298f6f19218c84f09f0dda38695d874a9fb1b496e42b6b37b777169d283cd1f5098a1470fa76c5143c53eb5a4078202bd12ea1541d29
+"@remix-run/router@npm:1.20.0":
+  version: 1.20.0
+  resolution: "@remix-run/router@npm:1.20.0"
+  checksum: 10/e1d2420db94a1855b97f1784898d0ae389cf3b77129b8f419e51d4833b77ca2c92ac09e2cb558015324d64580a138fd6faa31e52fcc3ba90e3cc382a1a324d4a
   languageName: node
   linkType: hard
 
@@ -5015,6 +5036,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^22.3.0":
+  version: 22.7.6
+  resolution: "@types/node@npm:22.7.6"
+  dependencies:
+    undici-types: "npm:~6.19.2"
+  checksum: 10/46a8d6bcd61098ece36f790c4bd500537cf78fe075dbfe48f1e07a29efa6cba18cff3b2564aed80fb183244f5d9a95a63b09e27c9f5181ed927ac16ef493bd95
+  languageName: node
+  linkType: hard
+
 "@types/object-hash@npm:^3.0.6":
   version: 3.0.6
   resolution: "@types/object-hash@npm:3.0.6"
@@ -5090,6 +5120,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-dom@npm:^18.0.11":
+  version: 18.3.1
+  resolution: "@types/react-dom@npm:18.3.1"
+  dependencies:
+    "@types/react": "npm:*"
+  checksum: 10/33f9ba79b26641ddf00a8699c30066b7e3573ab254e97475bf08f82fab83a6d3ce8d4ebad86afeb49bb8df3374390a9ba93125cece33badc4b3e8f7eac3c84d8
+  languageName: node
+  linkType: hard
+
 "@types/react-dom@npm:^18.3.0":
   version: 18.3.0
   resolution: "@types/react-dom@npm:18.3.0"
@@ -5139,6 +5178,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:^18.0.28":
+  version: 18.3.11
+  resolution: "@types/react@npm:18.3.11"
+  dependencies:
+    "@types/prop-types": "npm:*"
+    csstype: "npm:^3.0.2"
+  checksum: 10/a36f0707fdfe9fe19cbe5892bcdab0f042ecadb501ea4e1c39519943f3e74cffbd31e892d3860f5c87cf33f5f223552b246a552bed0087b95954f2cb39d5cf65
+  languageName: node
+  linkType: hard
+
 "@types/reactcss@npm:*":
   version: 1.2.12
   resolution: "@types/reactcss@npm:1.2.12"
@@ -5923,6 +5972,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"async-lock@npm:^1.4.1":
+  version: 1.4.1
+  resolution: "async-lock@npm:1.4.1"
+  checksum: 10/80d55ac95f920e880a865968b799963014f6d987dd790dd08173fae6e1af509d8cd0ab45a25daaca82e3ef8e7c939f5d128cd1facfcc5c647da8ac2409e20ef9
+  languageName: node
+  linkType: hard
+
 "async@npm:^2.6.4":
   version: 2.6.4
   resolution: "async@npm:2.6.4"
@@ -6716,6 +6772,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clean-git-ref@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "clean-git-ref@npm:2.0.1"
+  checksum: 10/b25f585ed47040ea5d699d40a2bb84d1f35afd651f3fcc05fb077224358ffd3d7509fc9edbfc4570f1fc732c987e03ac7d8ec31524ac503ac35c53cb1f5e3bf9
+  languageName: node
+  linkType: hard
+
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -7098,6 +7161,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"crc-32@npm:^1.2.0":
+  version: 1.2.2
+  resolution: "crc-32@npm:1.2.2"
+  bin:
+    crc32: bin/crc32.njs
+  checksum: 10/824f696a5baaf617809aa9cd033313c8f94f12d15ebffa69f10202480396be44aef9831d900ab291638a8022ed91c360696dd5b1ba691eb3f34e60be8835b7c3
+  languageName: node
+  linkType: hard
+
 "create-jest@npm:^29.7.0":
   version: 29.7.0
   resolution: "create-jest@npm:29.7.0"
@@ -7487,6 +7559,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"decompress-response@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "decompress-response@npm:6.0.0"
+  dependencies:
+    mimic-response: "npm:^3.1.0"
+  checksum: 10/d377cf47e02d805e283866c3f50d3d21578b779731e8c5072d6ce8c13cc31493db1c2f6784da9d1d5250822120cefa44f1deab112d5981015f2e17444b763812
+  languageName: node
+  linkType: hard
+
 "dedent@npm:^1.0.0":
   version: 1.5.3
   resolution: "dedent@npm:1.5.3"
@@ -7641,6 +7722,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"diff3@npm:0.0.3":
+  version: 0.0.3
+  resolution: "diff3@npm:0.0.3"
+  checksum: 10/9fb9983052e35209be1912c6999ee4aa1887365666ea28d5aba364ffe8514e0a745a4408a3702b5c5943e717571dcc892073b8f3b48fed5814e2c7fc1883f74e
+  languageName: node
+  linkType: hard
+
 "diffable-html@npm:^4.1.0":
   version: 4.1.0
   resolution: "diffable-html@npm:4.1.0"
@@ -8620,6 +8708,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-text-encoding@npm:^1.0.0":
+  version: 1.0.6
+  resolution: "fast-text-encoding@npm:1.0.6"
+  checksum: 10/f7b9e2e7a21e4ae5f4b8d3729850be83fb45052b28c9c38c09b8366463a291d6dc5448359238bdaf87f6a9e907d5895a94319a2c5e0e9f0786859ad6312d1d06
+  languageName: node
+  linkType: hard
+
 "fastq@npm:^1.6.0":
   version: 1.14.0
   resolution: "fastq@npm:1.14.0"
@@ -8647,29 +8742,35 @@ __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"
+    "@isomorphic-git/lightning-fs": "npm:^4.6.0"
+    "@react-awesome/use-click-outside": "npm:^0.0.3"
+    "@types/node": "npm:^22.3.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"
-    postcss: "npm:^8.4.41"
-    react: "npm:^18.3.1"
-    react-dom: "npm:^18.3.1"
-    react-router-dom: "npm:^6.26.0"
-    rollup: "npm:^4.22.4"
-    vite: "npm:^5.3.6"
-    vite-plugin-generate-file: "npm:^0.2.0"
-    vite-plugin-react-rich-svg: "npm:^1.1.1"
+    isomorphic-git: "npm:^1.27.0"
+    lucide-react: "npm:^0.399.0"
+    npm-run-all2: "npm:^6.2.0"
+    postcss: "npm:^8.4.21"
+    react: "npm:^18.2.0"
+    react-color: "npm:^2.19.3"
+    react-dom: "npm:^18.2.0"
+    react-router-dom: "npm:^6.23.1"
+    vite-plugin-generate-file: "npm:^0.1.1"
+    vite-plugin-react-rich-svg: "npm:^1.0.0"
     vite-plugin-singlefile: "npm:^2.0.2"
+    zustand: "npm:^4.5.4"
   languageName: unknown
   linkType: soft
 
@@ -9803,6 +9904,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ignore@npm:^5.1.4":
+  version: 5.3.2
+  resolution: "ignore@npm:5.3.2"
+  checksum: 10/cceb6a457000f8f6a50e1196429750d782afce5680dd878aa4221bd79972d68b3a55b4b1458fc682be978f4d3c6a249046aa0880637367216444ab7b014cfc98
+  languageName: node
+  linkType: hard
+
 "ignore@npm:^5.2.0, ignore@npm:^5.2.4":
   version: 5.2.4
   resolution: "ignore@npm:5.2.4"
@@ -10293,6 +10401,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"isomorphic-git@npm:^1.27.0":
+  version: 1.27.1
+  resolution: "isomorphic-git@npm:1.27.1"
+  dependencies:
+    async-lock: "npm:^1.4.1"
+    clean-git-ref: "npm:^2.0.1"
+    crc-32: "npm:^1.2.0"
+    diff3: "npm:0.0.3"
+    ignore: "npm:^5.1.4"
+    minimisted: "npm:^2.0.0"
+    pako: "npm:^1.0.10"
+    pify: "npm:^4.0.1"
+    readable-stream: "npm:^3.4.0"
+    sha.js: "npm:^2.4.9"
+    simple-get: "npm:^4.0.1"
+  bin:
+    isogit: cli.cjs
+  checksum: 10/f0205552b0dfb5173e8dfc651c6901cc01ac03fbf5ddeff8b1d73d7707fb741c7ca16b25254de598981206c5d1179799eb33eb1d1a8456002c7210f52108f25a
+  languageName: node
+  linkType: hard
+
+"isomorphic-textencoder@npm:1.0.1":
+  version: 1.0.1
+  resolution: "isomorphic-textencoder@npm:1.0.1"
+  dependencies:
+    fast-text-encoding: "npm:^1.0.0"
+  checksum: 10/9bd0c04bff7b1dc9e410d2f9a2705ca4cc288872929d88fbb7758f06b5147de8dbaea5f95ce6cf4d314f064643f3d42d69a07bbb68df0261e81153d2d56f77f3
+  languageName: node
+  linkType: hard
+
 "istanbul-lib-coverage@npm:^3.0.0, istanbul-lib-coverage@npm:^3.2.0, istanbul-lib-coverage@npm:^3.2.2":
   version: 3.2.2
   resolution: "istanbul-lib-coverage@npm:3.2.2"
@@ -11209,6 +11347,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"just-debounce-it@npm:1.1.0":
+  version: 1.1.0
+  resolution: "just-debounce-it@npm:1.1.0"
+  checksum: 10/94ecf7e7cd49093e4d5b282fea2f6bc7b6866ff835a4739dc589228238562ecaeb4cf8cb2ae89f5c0c488235c16a96dcbb90920eff631fed39d9782fdffcdc80
+  languageName: node
+  linkType: hard
+
+"just-once@npm:1.1.0":
+  version: 1.1.0
+  resolution: "just-once@npm:1.1.0"
+  checksum: 10/e6bff9ee50bbe10e319decf6d19f9ed97e82a612fb56d63d4612910d84b1734a5697225bc098c7c0a7c404f844324eee073bf2bfcd4dcf575cd613aa9fe32ea5
+  languageName: node
+  linkType: hard
+
 "kind-of@npm:^6.0.2":
   version: 6.0.3
   resolution: "kind-of@npm:6.0.3"
@@ -11525,6 +11677,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-react@npm:^0.399.0":
+  version: 0.399.0
+  resolution: "lucide-react@npm:0.399.0"
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10/89212e54dc58c99f6d7593fc4ac5020771ec57bf334a4f5c1280df131cfb99b2c2ffabcf44a7c26670bee29979d687e7b4318b5d8681d404714faa1e9cc2a6ce
+  languageName: node
+  linkType: hard
+
 "lz-string@npm:^1.5.0":
   version: 1.5.0
   resolution: "lz-string@npm:1.5.0"
@@ -12465,6 +12626,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mimic-response@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "mimic-response@npm:3.1.0"
+  checksum: 10/7e719047612411fe071332a7498cf0448bbe43c485c0d780046c76633a771b223ff49bd00267be122cedebb897037fdb527df72335d0d0f74724604ca70b37ad
+  languageName: node
+  linkType: hard
+
 "min-indent@npm:^1.0.0, min-indent@npm:^1.0.1":
   version: 1.0.1
   resolution: "min-indent@npm:1.0.1"
@@ -12517,6 +12685,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimist@npm:^1.2.5, minimist@npm:^1.2.8":
+  version: 1.2.8
+  resolution: "minimist@npm:1.2.8"
+  checksum: 10/908491b6cc15a6c440ba5b22780a0ba89b9810e1aea684e253e43c4e3b8d56ec1dcdd7ea96dde119c29df59c936cde16062159eae4225c691e19c70b432b6e6f
+  languageName: node
+  linkType: hard
+
 "minimist@npm:^1.2.6":
   version: 1.2.7
   resolution: "minimist@npm:1.2.7"
@@ -12524,10 +12699,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.2.8":
-  version: 1.2.8
-  resolution: "minimist@npm:1.2.8"
-  checksum: 10/908491b6cc15a6c440ba5b22780a0ba89b9810e1aea684e253e43c4e3b8d56ec1dcdd7ea96dde119c29df59c936cde16062159eae4225c691e19c70b432b6e6f
+"minimisted@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "minimisted@npm:2.0.1"
+  dependencies:
+    minimist: "npm:^1.2.5"
+  checksum: 10/f8c81346b1f535c0be173f4937991586ec86e55b7c94790000d1cba436053ed6a536d290321194b45512a8fa0e30678fd10c759e82ce5388c2dbe4f990b4a9ec
   languageName: node
   linkType: hard
 
@@ -12932,9 +13109,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"npm-run-all2@npm:^6.2.2":
-  version: 6.2.2
-  resolution: "npm-run-all2@npm:6.2.2"
+"npm-run-all2@npm:^6.2.0":
+  version: 6.2.3
+  resolution: "npm-run-all2@npm:6.2.3"
   dependencies:
     ansi-styles: "npm:^6.2.1"
     cross-spawn: "npm:^7.0.3"
@@ -12948,7 +13125,7 @@ __metadata:
     npm-run-all2: bin/npm-run-all/index.js
     run-p: bin/run-p/index.js
     run-s: bin/run-s/index.js
-  checksum: 10/79995322365ab1189bf00cd531b3b2c410334a8e0d54bf1045fed3b59117873e8a0aeafdc1f543f0cef295bdca1fe5cfea5613e7ed4cc65f396b72db587257f5
+  checksum: 10/4fd4186cfc87d42555919337fce245f276be572d9c4a217444f9afbfad05b3d6b05c7c45f13cbc21a8280c4898d03c2ec22c0ce8bcfe00b5eccce19f36854d24
   languageName: node
   linkType: hard
 
@@ -13094,7 +13271,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"once@npm:^1.3.0":
+"once@npm:^1.3.0, once@npm:^1.3.1":
   version: 1.4.0
   resolution: "once@npm:1.4.0"
   dependencies:
@@ -13277,6 +13454,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pako@npm:^1.0.10":
+  version: 1.0.11
+  resolution: "pako@npm:1.0.11"
+  checksum: 10/1ad07210e894472685564c4d39a08717e84c2a68a70d3c1d9e657d32394ef1670e22972a433cbfe48976cb98b154ba06855dcd3fcfba77f60f1777634bec48c0
+  languageName: node
+  linkType: hard
+
 "parent-module@npm:^1.0.0":
   version: 1.0.1
   resolution: "parent-module@npm:1.0.1"
@@ -14153,6 +14337,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.4.21, postcss@npm:^8.4.43":
+  version: 8.4.47
+  resolution: "postcss@npm:8.4.47"
+  dependencies:
+    nanoid: "npm:^3.3.7"
+    picocolors: "npm:^1.1.0"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10/f2b50ba9b6fcb795232b6bb20de7cdc538c0025989a8ed9c4438d1960196ba3b7eaff41fdb1a5c701b3504651ea87aeb685577707f0ae4d6ce6f3eae5df79a81
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.4.35":
   version: 8.4.35
   resolution: "postcss@npm:8.4.35"
@@ -14175,17 +14370,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.43":
-  version: 8.4.47
-  resolution: "postcss@npm:8.4.47"
-  dependencies:
-    nanoid: "npm:^3.3.7"
-    picocolors: "npm:^1.1.0"
-    source-map-js: "npm:^1.2.1"
-  checksum: 10/f2b50ba9b6fcb795232b6bb20de7cdc538c0025989a8ed9c4438d1960196ba3b7eaff41fdb1a5c701b3504651ea87aeb685577707f0ae4d6ce6f3eae5df79a81
-  languageName: node
-  linkType: hard
-
 "preferred-pm@npm:^3.0.0":
   version: 3.1.4
   resolution: "preferred-pm@npm:3.1.4"
@@ -14555,7 +14739,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.3.1":
+"react-dom@npm:^18.2.0, react-dom@npm:^18.3.1":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
   dependencies:
@@ -14616,27 +14800,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:^6.26.0":
-  version: 6.26.0
-  resolution: "react-router-dom@npm:6.26.0"
+"react-router-dom@npm:^6.23.1":
+  version: 6.27.0
+  resolution: "react-router-dom@npm:6.27.0"
   dependencies:
-    "@remix-run/router": "npm:1.19.0"
-    react-router: "npm:6.26.0"
+    "@remix-run/router": "npm:1.20.0"
+    react-router: "npm:6.27.0"
   peerDependencies:
     react: ">=16.8"
     react-dom: ">=16.8"
-  checksum: 10/be433029a0759d5faa2cd2cb28dd3c88106cdb46042c2e804e301aefad3db17aa9021b4e3d533e0fdcde5767ed0e1d296c04fecbc3e41231c3d8be9cc307018a
+  checksum: 10/cfbcbc1d387d3341a335e3a075e487cc09dcbb62f1b83bc827fc3eec937523d5647a2c4488c804dc61581e65561823d0166d17b5dbc8579998c25b5a0bcabad6
   languageName: node
   linkType: hard
 
-"react-router@npm:6.26.0":
-  version: 6.26.0
-  resolution: "react-router@npm:6.26.0"
+"react-router@npm:6.27.0":
+  version: 6.27.0
+  resolution: "react-router@npm:6.27.0"
   dependencies:
-    "@remix-run/router": "npm:1.19.0"
+    "@remix-run/router": "npm:1.20.0"
   peerDependencies:
     react: ">=16.8"
-  checksum: 10/d0c79a0f95a88730c0d2bfd098da9d6bdd4d7f08d4e1ddd152b5d013d3c01064afdd6fed57d4d3fa50c42c412e6d00e9217b2abd6cdbf4aaf810b7c33e728400
+  checksum: 10/352e3af2075cdccf9d114b7e06d94a1b46a2147ba9d6e8643787a92464f5fd9ead950252a98d551f99f21860288bcf3a4f088cb5f46b28d1274a4e2ba24cc0f9
   languageName: node
   linkType: hard
 
@@ -14693,7 +14877,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18.3.1":
+"react@npm:^18.2.0, react@npm:^18.3.1":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies:
@@ -14742,7 +14926,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:^3.1.1":
+"readable-stream@npm:^3.1.1, readable-stream@npm:^3.4.0":
   version: 3.6.2
   resolution: "readable-stream@npm:3.6.2"
   dependencies:
@@ -15364,7 +15548,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-buffer@npm:5.2.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:~5.2.0":
+"safe-buffer@npm:5.2.1, safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:~5.2.0":
   version: 5.2.1
   resolution: "safe-buffer@npm:5.2.1"
   checksum: 10/32872cd0ff68a3ddade7a7617b8f4c2ae8764d8b7d884c651b74457967a9e0e886267d3ecc781220629c44a865167b61c375d2da6c720c840ecd73f45d5d9451
@@ -15598,6 +15782,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sha.js@npm:^2.4.9":
+  version: 2.4.11
+  resolution: "sha.js@npm:2.4.11"
+  dependencies:
+    inherits: "npm:^2.0.1"
+    safe-buffer: "npm:^5.0.1"
+  bin:
+    sha.js: ./bin.js
+  checksum: 10/d833bfa3e0a67579a6ce6e1bc95571f05246e0a441dd8c76e3057972f2a3e098465687a4369b07e83a0375a88703577f71b5b2e966809e67ebc340dbedb478c7
+  languageName: node
+  linkType: hard
+
 "shallow-clone@npm:^3.0.0":
   version: 3.0.1
   resolution: "shallow-clone@npm:3.0.1"
@@ -15697,6 +15893,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"simple-concat@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "simple-concat@npm:1.0.1"
+  checksum: 10/4d211042cc3d73a718c21ac6c4e7d7a0363e184be6a5ad25c8a1502e49df6d0a0253979e3d50dbdd3f60ef6c6c58d756b5d66ac1e05cda9cacd2e9fc59e3876a
+  languageName: node
+  linkType: hard
+
+"simple-get@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "simple-get@npm:4.0.1"
+  dependencies:
+    decompress-response: "npm:^6.0.0"
+    once: "npm:^1.3.1"
+    simple-concat: "npm:^1.0.0"
+  checksum: 10/93f1b32319782f78f2f2234e9ce34891b7ab6b990d19d8afefaa44423f5235ce2676aae42d6743fecac6c8dfff4b808d4c24fe5265be813d04769917a9a44f36
+  languageName: node
+  linkType: hard
+
 "sisteransi@npm:^1.0.5":
   version: 1.0.5
   resolution: "sisteransi@npm:1.0.5"
@@ -17261,28 +17475,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-generate-file@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "vite-plugin-generate-file@npm:0.2.0"
+"vite-plugin-generate-file@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "vite-plugin-generate-file@npm:0.1.1"
   dependencies:
     ejs: "npm:^3.1.9"
     js-yaml: "npm:^4.1.0"
     mime-types: "npm:^2.1.35"
     picocolors: "npm:^1.0.0"
-  checksum: 10/b94c4b41a3042f7b765be7ef7b7d71f76a86ac11f05762d5889e58588f6f7d92e1ef64cafb54e50bd18ab9d28c4b84e33947549d6d495b5d31ddb2c557f24e42
+  checksum: 10/63dffc58e14b3b1cd1162bc7c11620be45dd6875dfd84df4c870f4887d483ee35141132718939964602d5270aeb48a40fda4458d6827531083486738f176b098
   languageName: node
   linkType: hard
 
-"vite-plugin-react-rich-svg@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "vite-plugin-react-rich-svg@npm:1.1.1"
+"vite-plugin-react-rich-svg@npm:^1.0.0":
+  version: 1.1.2
+  resolution: "vite-plugin-react-rich-svg@npm:1.1.2"
   dependencies:
     "@svgr/core": "npm:^8.1.0"
     "@svgr/plugin-jsx": "npm:^8.1.0"
     "@svgr/plugin-prettier": "npm:^8.1.0"
     "@svgr/plugin-svgo": "npm:^8.1.0"
     vite: "npm:^5.0.11"
-  checksum: 10/43d7c11134388c5919ef95dd33621621e9f4379fd2a4845d16113a7dcc4c1d001500ccbf495d00ee5c06d9219a8f55de2e6666b905514e9ceee030425d0c5e05
+  checksum: 10/f54b25898d7234f222fe3c8ae42bd9f130fbd6a412fdc728f213a5dfa26bafa6cf3177d9f983b5452c768748e1cc6ee530450d7a97be01282b60fcf014701532
   languageName: node
   linkType: hard
 

From 92ebc3fb42aab429b1c91ea5b7ccda9b7d4005a1 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 18 Oct 2024 12:54:43 +0200
Subject: [PATCH 14/21] theme now follows pref. from figma

---
 plugins/figma/src/plugin/plugin.ts      | 38 ++++++++------------
 plugins/figma/src/ui/app.tsx            |  4 ++-
 plugins/figma/src/ui/utils/useDsMode.ts | 46 +++++++++++++++++++++++++
 3 files changed, 63 insertions(+), 25 deletions(-)
 create mode 100644 plugins/figma/src/ui/utils/useDsMode.ts

diff --git a/plugins/figma/src/plugin/plugin.ts b/plugins/figma/src/plugin/plugin.ts
index bc89ffa3c7..113f55c4eb 100644
--- a/plugins/figma/src/plugin/plugin.ts
+++ b/plugins/figma/src/plugin/plugin.ts
@@ -1,18 +1,7 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-
 import type { ColorTheme, StoreThemes } from '../common/store';
 
-import { getFonts } from './figma/fonts';
 import { getVariables } from './figma/getVariables';
-import { generateJson } from './figma/json';
-import {
-  addTheme,
-  deleteTheme,
-  getThemes,
-  renameTheme,
-  updateTheme,
-} from './figma/themes';
+import { getThemes } from './figma/themes';
 import { updateVariables } from './figma/updateVariables';
 
 figma.showUI(__html__, { width: 710, height: 550, themeColors: true });
@@ -53,7 +42,7 @@ figma.ui.onmessage = (msg: {
         break;
       }
 
-      case 'renameTheme': {
+      /* case 'renameTheme': {
         if (msg.renameTheme) {
           await renameTheme(
             msg.renameTheme.newName,
@@ -63,15 +52,15 @@ figma.ui.onmessage = (msg: {
           figma.ui.postMessage({ type: 'geThemesAndRedirect' });
         }
         break;
-      }
+      } */
 
-      case 'addTheme': {
+      /* case 'addTheme': {
         if (msg.addTheme) await addTheme(msg.addTheme.theme, msg.addTheme.name);
         figma.ui.postMessage({ type: 'geThemesAndRedirect' });
         break;
-      }
+      } */
 
-      case 'deleteTheme': {
+      /* case 'deleteTheme': {
         if (msg.deleteTheme)
           await deleteTheme(
             msg.deleteTheme.themeModeId,
@@ -79,24 +68,25 @@ figma.ui.onmessage = (msg: {
           );
         figma.ui.postMessage({ type: 'geThemesAndRedirect' });
         break;
-      }
+      } */
 
-      case 'updateTheme': {
+      /* case 'updateTheme': {
         await updateTheme();
         break;
-      }
+      } */
 
-      case 'generateJson': {
+      /* case 'generateJson': {
         const json = await generateJson();
         figma.ui.postMessage({ type: 'generateJson', json: json });
         console.log('ff - ', json);
         break;
-      }
-      case 'getFonts': {
+      } */
+
+      /* case 'getFonts': {
         const fonts = await getFonts();
         figma.ui.postMessage({ type: 'getFonts', fonts: fonts });
         break;
-      }
+      } */
     }
   })();
 };
diff --git a/plugins/figma/src/ui/app.tsx b/plugins/figma/src/ui/app.tsx
index 9c23b977ca..5d8e96f05f 100644
--- a/plugins/figma/src/ui/app.tsx
+++ b/plugins/figma/src/ui/app.tsx
@@ -18,8 +18,10 @@ import { useThemeStore } from '../common/store';
 import { Footer } from './components/Footer/Footer';
 import Theme from './pages/Theme/Theme';
 import Themes from './pages/Themes/Themes';
+import { useDsMode } from './utils/useDsMode';
 
 function App() {
+  const dsMode = useDsMode();
   const setThemes = useThemeStore((state) => state.setThemes);
   const navigate = useNavigate();
   const setLoading = useThemeStore((state) => state.setLoading);
@@ -65,7 +67,7 @@ function App() {
   }, []);
 
   return (
-    <div className='page' data-ds-color-mode='dark'>
+    <div className='page' data-ds-color-mode={dsMode}>
       <div className='links'>
         <NavLink
           className={({ isActive }) => (isActive ? 'link active' : 'link')}
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;
+};

From 5a366276d207780456a400a5bb9c11b22d7ece94 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 18 Oct 2024 13:32:52 +0200
Subject: [PATCH 15/21] start cleaning

---
 plugins/figma/src/common/types.ts        |  8 ++++
 plugins/figma/src/plugin/plugin.ts       | 16 ++++---
 plugins/figma/src/ui/app.tsx             | 59 ++----------------------
 plugins/figma/src/ui/utils/useStartup.ts | 58 +++++++++++++++++++++++
 4 files changed, 79 insertions(+), 62 deletions(-)
 create mode 100644 plugins/figma/src/ui/utils/useStartup.ts

diff --git a/plugins/figma/src/common/types.ts b/plugins/figma/src/common/types.ts
index 94cc2c64d2..b5477ef22a 100644
--- a/plugins/figma/src/common/types.ts
+++ b/plugins/figma/src/common/types.ts
@@ -9,3 +9,11 @@ export type JsonInput = {
 };
 
 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/plugin/plugin.ts b/plugins/figma/src/plugin/plugin.ts
index 113f55c4eb..dcd735788c 100644
--- a/plugins/figma/src/plugin/plugin.ts
+++ b/plugins/figma/src/plugin/plugin.ts
@@ -1,3 +1,4 @@
+import { Messages } from '@common/types';
 import type { ColorTheme, StoreThemes } from '../common/store';
 
 import { getVariables } from './figma/getVariables';
@@ -7,7 +8,7 @@ import { updateVariables } from './figma/updateVariables';
 figma.showUI(__html__, { width: 710, height: 550, themeColors: true });
 
 figma.ui.onmessage = (msg: {
-  type: string;
+  type: Messages;
   themes?: StoreThemes;
   themeId?: string;
   renameTheme?: {
@@ -26,19 +27,22 @@ figma.ui.onmessage = (msg: {
 }) => {
   void (async () => {
     switch (msg.type) {
-      case 'updateVariables': {
+      case Messages.UpdateVariables: {
         if (msg.themes) await updateVariables(msg.themes);
         break;
       }
 
-      case 'getThemes': {
+      case Messages.GetThemes: {
         const themes = await getThemes();
-        figma.ui.postMessage({ type: 'getThemes', themes: themes });
+        figma.ui.postMessage({ type: Messages.GetThemes, themes: themes });
         break;
       }
-      case 'getVariables': {
+      case Messages.GetVariables: {
         const variables = await getVariables();
-        figma.ui.postMessage({ type: 'getVariables', variables: variables });
+        figma.ui.postMessage({
+          type: Messages.GetVariables,
+          variables: variables,
+        });
         break;
       }
 
diff --git a/plugins/figma/src/ui/app.tsx b/plugins/figma/src/ui/app.tsx
index 5d8e96f05f..aa18d1c1db 100644
--- a/plugins/figma/src/ui/app.tsx
+++ b/plugins/figma/src/ui/app.tsx
@@ -1,70 +1,17 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import '@digdir/designsystemet-theme';
 import '@digdir/designsystemet-css';
 
 import './App.css';
-import { useEffect } from 'react';
-import {
-  NavLink,
-  Navigate,
-  Route,
-  Routes,
-  useNavigate,
-} from 'react-router-dom';
-
-import type { StoreThemes } from '../common/store';
-import { useThemeStore } from '../common/store';
-
+import { NavLink, 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();
-  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: 'getThemes' } }, '*');
-    // biome-ignore lint/suspicious/noGlobalAssign: <explanation>
-    onmessage = (event: {
-      data: {
-        pluginMessage: {
-          type: string;
-          themes: StoreThemes;
-          json: [];
-          fonts: [];
-        };
-      };
-    }) => {
-      switch (event.data.pluginMessage.type) {
-        case 'getThemes':
-          if (event.data.pluginMessage.themes.length > 0) {
-            setThemes(event.data.pluginMessage.themes);
-          } else {
-            setNoThemesFound(true);
-          }
-          break;
-        case 'geThemesAndRedirect':
-          navigate('/');
-          parent.postMessage({ pluginMessage: { type: 'getThemes' } }, '*');
-          break;
-        case 'setValueForModeError':
-          setError(
-            'En feil har oppstått. Du må ha minimum pro-versjonen av Figma for å kunne generere tema.',
-          );
-          break;
-        case 'updateVariables':
-          setError('');
-          break;
-      }
-      setLoading(false);
-    };
-  }, []);
 
   return (
     <div className='page' data-ds-color-mode={dsMode}>
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);
+    };
+  }, []);
+};

From c67850fc0e07b328d1c825b71a3f58a3de24f807 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 18 Oct 2024 13:46:25 +0200
Subject: [PATCH 16/21] more cleaning in UI

---
 plugins/figma/package.json                    |  1 +
 plugins/figma/src/ui/App.css                  | 57 ++-----------------
 .../src/ui/components/Card/Card.module.css    | 11 ++--
 plugins/figma/src/ui/components/Card/Card.tsx |  4 +-
 .../ui/components/Footer/Footer.module.css    | 22 ++-----
 .../figma/src/ui/pages/Theme/Theme.module.css | 53 +++--------------
 plugins/figma/src/ui/pages/Theme/Theme.tsx    | 14 +++--
 yarn.lock                                     |  1 +
 8 files changed, 38 insertions(+), 125 deletions(-)

diff --git a/plugins/figma/package.json b/plugins/figma/package.json
index 3f4d85667d..b5e0eb4437 100644
--- a/plugins/figma/package.json
+++ b/plugins/figma/package.json
@@ -37,6 +37,7 @@
     "@types/react-color": "^3.0.12",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^4.3.1",
+    "clsx": "^2.1.1",
     "npm-run-all2": "^6.2.0",
     "postcss": "^8.4.21",
     "vite-plugin-generate-file": "^0.1.1",
diff --git a/plugins/figma/src/ui/App.css b/plugins/figma/src/ui/App.css
index 8672f4ddc0..00c3eb5540 100644
--- a/plugins/figma/src/ui/App.css
+++ b/plugins/figma/src/ui/App.css
@@ -1,17 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
 
-:root {
-  --figma-color-text: #e1e3e5;
-  --figma-color-text-secondary: #9ea3ab;
-  --figma-color-bg: red;
-  --figma-color-bg-secondary: #2d2d2d;
-}
-
-.figma-light,
-.figma-dark {
-  --figma-color-border: #4e4e4e;
-}
-
 * {
   font-feature-settings: 'cv05' 1;
   box-sizing: border-box;
@@ -20,30 +8,14 @@
 body {
   font-family: 'Inter', sans-serif;
   margin: 0;
-  background-color: #202020;
-  color: var(--figma-color-text);
+  background-color: var(--ds-color-neutral-background-default);
+  color: var(--ds-color-neutral-text-default);
   font-size: 14px;
 }
 
-[data-ds-color-mode='dark'] {
-  --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;
-}
-
 .links {
   display: flex;
-  border-bottom: 1px solid var(--figma-color-border);
+  border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
   padding: 0 16px;
 }
 
@@ -53,14 +25,14 @@ body {
   align-items: center;
   justify-content: center;
   text-decoration: none;
-  color: var(--figma-color-text-secondary);
+  color: var(--ds-color-neutral-text-default);
   margin-right: 20px;
   font-weight: 400;
   font-size: 14px;
 }
 
 .active {
-  color: var(--figma-color-text);
+  color: var(--ds-color-neutral-text-default);
   font-weight: 500;
 }
 
@@ -78,15 +50,6 @@ body {
   background-color: #d4d4d4;
 }
 
-.ds-spinner__background {
-  stroke: var(--figma-color-text);
-  stroke-width: 3px;
-}
-
-.ds-spinner__circle {
-  stroke: #494949;
-}
-
 .textfield {
   font-size: 14px;
   margin-bottom: 12px;
@@ -114,16 +77,6 @@ body {
   margin-bottom: 16px;
 }
 
-.toast {
-  background-color: #3d3d3d !important;
-  color: white !important;
-}
-
-.select {
-  font-size: 14px;
-  height: 34px;
-}
-
 .page {
   display: flex;
   flex-direction: column;
diff --git a/plugins/figma/src/ui/components/Card/Card.module.css b/plugins/figma/src/ui/components/Card/Card.module.css
index b79a02edad..2751640254 100644
--- a/plugins/figma/src/ui/components/Card/Card.module.css
+++ b/plugins/figma/src/ui/components/Card/Card.module.css
@@ -1,5 +1,5 @@
 .card {
-  background-color: var(--figma-color-bg-secondary);
+  background-color: var(--ds-color-neutral-background-subtle);
   height: 100px;
   width: 156px;
   border-radius: 4px;
@@ -10,11 +10,12 @@
   gap: 14px;
   text-decoration: none;
   color: inherit;
-  transition: 0.15s all;
+  border: 1px solid var(--ds-color-neutral-border-default);
+  transition: 0.15s box-shadow;
 }
 
 .card:hover {
-  box-shadow: 0 0 0 1px #777;
+  box-shadow: 0 0 0 1px var(--ds-color-neutral-border-default);
 }
 
 .circles {
@@ -30,11 +31,11 @@
   height: 13px;
   width: 13px;
   border-radius: 50%;
-  outline: 1px solid #3a3a3a;
+  outline: 1px solid var(--ds-color-neutral-border-subtle);
 }
 
 .icon {
-  color: var(--figma-color-text-secondary);
+  color: var(--ds-color-neutral-text-default);
 }
 
 .title {
diff --git a/plugins/figma/src/ui/components/Card/Card.tsx b/plugins/figma/src/ui/components/Card/Card.tsx
index c7c0138469..7956938f3a 100644
--- a/plugins/figma/src/ui/components/Card/Card.tsx
+++ b/plugins/figma/src/ui/components/Card/Card.tsx
@@ -1,5 +1,5 @@
+import cl from 'clsx/lite';
 import { Link } from 'react-router-dom';
-
 import classes from './Card.module.css';
 
 type CardProps = {
@@ -15,7 +15,7 @@ type CardProps = {
 
 export const Card = ({ title, icon, url, colors }: CardProps) => {
   return (
-    <Link to={url} className={classes.card}>
+    <Link to={url} className={cl(classes.card, 'ds-focus')}>
       {icon && <div className={classes.icon}>{icon}</div>}
       {colors && (
         <div className={classes.circles}>
diff --git a/plugins/figma/src/ui/components/Footer/Footer.module.css b/plugins/figma/src/ui/components/Footer/Footer.module.css
index 4ce039b056..311d6b95f7 100644
--- a/plugins/figma/src/ui/components/Footer/Footer.module.css
+++ b/plugins/figma/src/ui/components/Footer/Footer.module.css
@@ -1,7 +1,7 @@
 .footer {
   position: absolute;
   z-index: 10;
-  background-color: var(--figma-background);
+  background-color: var(--ds-color-neutral-background-default);
   bottom: 0;
   left: 0;
   right: 0;
@@ -27,23 +27,9 @@
   background-color: #d4d4d4;
 }
 
-.github {
-  color: var(--figma-color-text-secondary);
-  font-size: 14px;
-  gap: 8px;
-  margin-left: -11px;
-  font-weight: 500;
-  transition: 0.1s all;
-}
-
-.github:hover {
-  color: var(--figma-color-text);
-  background-color: transparent;
-}
-
 .bottom {
   height: 44px;
-  border-top: 1px solid var(--figma-color-border);
+  border-top: 1px solid var(--ds-color-neutral-border-subtle);
   padding: 0 16px;
   display: flex;
   align-items: center;
@@ -64,14 +50,14 @@
 
 .version {
   font-size: 14px;
-  color: var(--figma-color-text-secondary);
+  color: var(--ds-color-neutral-text-subtle);
   font-weight: 500;
   padding: 3px 6px;
   border-radius: 2px;
 }
 
 .feedback {
-  color: var(--figma-color-text-secondary);
+  color: var(--ds-color-neutral-text-subtle);
   padding: 3px;
   border-radius: 1px;
 }
diff --git a/plugins/figma/src/ui/pages/Theme/Theme.module.css b/plugins/figma/src/ui/pages/Theme/Theme.module.css
index ade5d34d14..ba0c09f3a3 100644
--- a/plugins/figma/src/ui/pages/Theme/Theme.module.css
+++ b/plugins/figma/src/ui/pages/Theme/Theme.module.css
@@ -1,12 +1,18 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-4);
+}
+
 .content {
-  padding: 16px;
+  padding: var(--ds-spacing-4);
 }
 
 .cards {
   display: flex;
   align-items: center;
-  gap: 16px;
-  margin-top: 20px;
+  gap: var(--ds-spacing-4);
+  margin-top: var(--ds-spacing-6);
 }
 
 .header {
@@ -21,44 +27,7 @@
   gap: 13px;
 }
 
-.removeBtn {
-  font-size: 14px;
-  color: #ffacac;
-  padding: 0;
-  min-height: 10px;
-  padding-right: 6px;
-  cursor: pointer;
-}
-
-.removeBtn:hover {
-  background-color: transparent;
-  color: #ffd4d4;
-}
-
-.edit {
-  color: var(--figma-color-text-secondary);
-  cursor: pointer;
-}
-
-.edit:hover {
-  color: var(--figma-color-text);
-}
-
-.input {
-  background-color: var(--figma-color-bg-secondary);
-  border: none;
-  padding: 6px 7px;
-  width: 150px;
-  border-radius: 2px;
-  color: var(--figma-color-text);
-}
-
-.input::placeholder {
-  color: #9e9e9e;
-}
-
 .textarea {
-  margin-top: 20px;
   font-size: 14px;
 }
 
@@ -66,10 +35,6 @@
   height: 180px;
 }
 
-.btn {
-  margin-top: 24px;
-}
-
 .text {
   line-height: 1.5em;
 }
diff --git a/plugins/figma/src/ui/pages/Theme/Theme.tsx b/plugins/figma/src/ui/pages/Theme/Theme.tsx
index 8c101e1592..75d3f31c26 100644
--- a/plugins/figma/src/ui/pages/Theme/Theme.tsx
+++ b/plugins/figma/src/ui/pages/Theme/Theme.tsx
@@ -1,4 +1,10 @@
-import { Button, Label, Link, Textarea } from '@digdir/designsystemet-react';
+import {
+  Button,
+  Label,
+  Link,
+  Paragraph,
+  Textarea,
+} from '@digdir/designsystemet-react';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -98,8 +104,8 @@ function Theme() {
           />
         </div>
       </div>
-      <div>
-        <p className={classes.text}>
+      <div className={classes.wrapper}>
+        <Paragraph variant='long' size='sm'>
           Gå til{' '}
           <Link href='https://theme.designsystemet.no/' target='_blank'>
             Temabyggeren
@@ -107,7 +113,7 @@ function Theme() {
           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.
-        </p>
+        </Paragraph>
         <Label htmlFor='my-textarea'>Kodesnutt fra temabyggeren</Label>
         <Textarea
           size='sm'
diff --git a/yarn.lock b/yarn.lock
index 8acf6b22b2..93426d4f21 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8759,6 +8759,7 @@ __metadata:
     "@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"
     isomorphic-git: "npm:^1.27.0"
     lucide-react: "npm:^0.399.0"
     npm-run-all2: "npm:^6.2.0"

From 4848e9d9d5982b87e379f92a0bd4ae49ca30d97a Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 18 Oct 2024 13:52:50 +0200
Subject: [PATCH 17/21] remove own breadcrumbs

---
 .../Breadcrumbs/Breadcrumbs.module.css        | 32 -------------------
 .../ui/components/Breadcrumbs/Breadcrumbs.tsx | 22 -------------
 .../figma/src/ui/pages/Theme/Theme.module.css |  3 ++
 plugins/figma/src/ui/pages/Theme/Theme.tsx    | 16 ++++------
 4 files changed, 10 insertions(+), 63 deletions(-)
 delete mode 100644 plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.module.css
 delete mode 100644 plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.tsx

diff --git a/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.module.css b/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.module.css
deleted file mode 100644
index b4b97352a5..0000000000
--- a/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.module.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.breadcrumbs {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.back {
-  color: inherit;
-  text-decoration: none;
-  height: 26px;
-  width: 26px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: -8px;
-  border-radius: 50%;
-  transition: 0.1s all;
-}
-
-.back:hover {
-  background-color: #444;
-}
-
-.back svg {
-  margin-left: -2px;
-}
-
-.text {
-  font-size: 15px;
-  font-weight: 500;
-  margin-top: -2px;
-}
diff --git a/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.tsx b/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.tsx
deleted file mode 100644
index 8fbb95fb0d..0000000000
--- a/plugins/figma/src/ui/components/Breadcrumbs/Breadcrumbs.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import cl from 'clsx/lite';
-import { ChevronLeft } from 'lucide-react';
-import { Link } from 'react-router-dom';
-
-import classes from './Breadcrumbs.module.css';
-
-type BreadcrumbsProps = {
-  text: string;
-  url: string;
-  className?: string;
-};
-
-export const Breadcrumbs = ({ text, url, className }: BreadcrumbsProps) => {
-  return (
-    <div className={cl(classes.breadcrumbs, className)}>
-      <Link to={url} className={classes.back}>
-        <ChevronLeft size={18} />
-      </Link>
-      <div className={classes.text}>{text}</div>
-    </div>
-  );
-};
diff --git a/plugins/figma/src/ui/pages/Theme/Theme.module.css b/plugins/figma/src/ui/pages/Theme/Theme.module.css
index ba0c09f3a3..f88a465ab3 100644
--- a/plugins/figma/src/ui/pages/Theme/Theme.module.css
+++ b/plugins/figma/src/ui/pages/Theme/Theme.module.css
@@ -6,6 +6,9 @@
 
 .content {
   padding: var(--ds-spacing-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-6);
 }
 
 .cards {
diff --git a/plugins/figma/src/ui/pages/Theme/Theme.tsx b/plugins/figma/src/ui/pages/Theme/Theme.tsx
index 75d3f31c26..00cbed4279 100644
--- a/plugins/figma/src/ui/pages/Theme/Theme.tsx
+++ b/plugins/figma/src/ui/pages/Theme/Theme.tsx
@@ -1,4 +1,5 @@
 import {
+  Breadcrumbs,
   Button,
   Label,
   Link,
@@ -6,9 +7,7 @@ import {
   Textarea,
 } from '@digdir/designsystemet-react';
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-
-import { Breadcrumbs } from '@ui/components/Breadcrumbs/Breadcrumbs';
+import { Link as RouterLink, useParams } from 'react-router-dom';
 
 import { type ColorTheme, useThemeStore } from '../../../common/store';
 
@@ -96,12 +95,11 @@ function Theme() {
     <div className={classes.content}>
       <div className={classes.header}>
         <div className={classes.headerLeft}>
-          <Breadcrumbs
-            text={
-              themes.find((theme) => theme.themeModeId === themeId)?.name || ''
-            }
-            url='/'
-          />
+          <Breadcrumbs size='sm'>
+            <Breadcrumbs.Link aria-label='Tilbake til alle temaer' asChild>
+              <RouterLink to='/'>Mine temaer</RouterLink>
+            </Breadcrumbs.Link>
+          </Breadcrumbs>
         </div>
       </div>
       <div className={classes.wrapper}>

From 2a4bffffefe1bd7114ed12a97dacc0813059b096 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 18 Oct 2024 14:10:31 +0200
Subject: [PATCH 18/21] height

---
 plugins/figma/src/ui/App.css                      |  1 +
 plugins/figma/src/ui/components/Footer/Footer.tsx | 10 ++++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/plugins/figma/src/ui/App.css b/plugins/figma/src/ui/App.css
index 00c3eb5540..59ddfaa9fd 100644
--- a/plugins/figma/src/ui/App.css
+++ b/plugins/figma/src/ui/App.css
@@ -85,4 +85,5 @@ body {
 
 .content {
   flex-grow: 1;
+  overflow: scroll;
 }
diff --git a/plugins/figma/src/ui/components/Footer/Footer.tsx b/plugins/figma/src/ui/components/Footer/Footer.tsx
index 03f0a8f24c..1ed927b2ad 100644
--- a/plugins/figma/src/ui/components/Footer/Footer.tsx
+++ b/plugins/figma/src/ui/components/Footer/Footer.tsx
@@ -11,17 +11,19 @@ export const Footer = () => {
 
   return (
     <div className={classes.footer}>
-      <div className={classes.top}>
+      {/* <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='sm' className={classes.spinner} />
           )}
         </div>
-      </div>
-      <div className={classes.bottom}>
-        <div className={classes.bottomLeft}></div>
         <div className={classes.bottomRight}>
           <div className={classes.version}>V {packageJson.version}</div>
           <Tooltip content='Feedback' placement='top'>

From 51a5334b94c8b3a12705999fe84a744897266192 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 18 Oct 2024 14:25:53 +0200
Subject: [PATCH 19/21] loading

---
 plugins/figma/src/ui/components/Footer/Footer.tsx | 2 +-
 plugins/figma/src/ui/pages/Theme/Theme.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/figma/src/ui/components/Footer/Footer.tsx b/plugins/figma/src/ui/components/Footer/Footer.tsx
index 1ed927b2ad..dac6861ccb 100644
--- a/plugins/figma/src/ui/components/Footer/Footer.tsx
+++ b/plugins/figma/src/ui/components/Footer/Footer.tsx
@@ -21,7 +21,7 @@ export const Footer = () => {
       <div className={classes.bottom}>
         <div className={classes.bottomLeft}>
           {loading && (
-            <Spinner title='fff' size='sm' className={classes.spinner} />
+            <Spinner title='fff' size='xs' className={classes.spinner} />
           )}
         </div>
         <div className={classes.bottomRight}>
diff --git a/plugins/figma/src/ui/pages/Theme/Theme.tsx b/plugins/figma/src/ui/pages/Theme/Theme.tsx
index 00cbed4279..460104a093 100644
--- a/plugins/figma/src/ui/pages/Theme/Theme.tsx
+++ b/plugins/figma/src/ui/pages/Theme/Theme.tsx
@@ -128,7 +128,7 @@ function Theme() {
           className={classes.btn}
           size='sm'
           onClick={() => handleClick()}
-          disabled={loading}
+          loading={loading}
         >
           Oppdater tema
         </Button>

From 8aa7833017916d7acfc0672af69a0b47a1b4097c Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Mon, 21 Oct 2024 12:08:09 +0200
Subject: [PATCH 20/21] errors

---
 plugins/figma/src/common/store.ts          | 16 +---------------
 plugins/figma/src/ui/App.css               |  3 ++-
 plugins/figma/src/ui/main.tsx              |  2 --
 plugins/figma/src/ui/pages/Theme/Theme.tsx | 14 +++++++++++---
 4 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/plugins/figma/src/common/store.ts b/plugins/figma/src/common/store.ts
index cafc497564..e28a11b7a0 100644
--- a/plugins/figma/src/common/store.ts
+++ b/plugins/figma/src/common/store.ts
@@ -4,21 +4,7 @@ import { subscribeWithSelector } from 'zustand/middleware';
 import type { FigmaModeName } from './types';
 
 export type ColorInfo = {
-  1: string;
-  2: string;
-  3: string;
-  4: string;
-  5: string;
-  6: string;
-  7: string;
-  8: string;
-  9: string;
-  10: string;
-  11: string;
-  12: string;
-  13: string;
-  'contrast-1': string;
-  'contrast-2': string;
+  [key in ColorIndex]: string;
 };
 
 export type ColorIndex =
diff --git a/plugins/figma/src/ui/App.css b/plugins/figma/src/ui/App.css
index 59ddfaa9fd..0c56231292 100644
--- a/plugins/figma/src/ui/App.css
+++ b/plugins/figma/src/ui/App.css
@@ -34,6 +34,7 @@ body {
 .active {
   color: var(--ds-color-neutral-text-default);
   font-weight: 500;
+  border-bottom: 4px solid var(--ds-color-neutral-border-default);
 }
 
 .btn {
@@ -85,5 +86,5 @@ body {
 
 .content {
   flex-grow: 1;
-  overflow: scroll;
+  overflow: auto;
 }
diff --git a/plugins/figma/src/ui/main.tsx b/plugins/figma/src/ui/main.tsx
index d9e2694189..1506bb5b4d 100644
--- a/plugins/figma/src/ui/main.tsx
+++ b/plugins/figma/src/ui/main.tsx
@@ -18,5 +18,3 @@ async function bootstrap() {
 }
 
 void bootstrap();
-
-console.log('Hello from Figma Plugin!');
diff --git a/plugins/figma/src/ui/pages/Theme/Theme.tsx b/plugins/figma/src/ui/pages/Theme/Theme.tsx
index 460104a093..7ff674921f 100644
--- a/plugins/figma/src/ui/pages/Theme/Theme.tsx
+++ b/plugins/figma/src/ui/pages/Theme/Theme.tsx
@@ -5,8 +5,9 @@ import {
   Link,
   Paragraph,
   Textarea,
+  ValidationMessage,
 } from '@digdir/designsystemet-react';
-import { useEffect, useState } from 'react';
+import { useEffect, useId, useState } from 'react';
 import { Link as RouterLink, useParams } from 'react-router-dom';
 
 import { type ColorTheme, useThemeStore } from '../../../common/store';
@@ -19,6 +20,7 @@ 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 [theme, setTheme] = useState<ColorTheme>(getDummyTheme());
@@ -122,8 +124,14 @@ function Theme() {
           cols={22}
           className={classes.textarea}
           placeholder='Lim inn her...'
-          error={codeSnippetError}
-        ></Textarea>
+          /* error={codeSnippetError} */
+          aria-describedby={errorId}
+        />
+        <div id={errorId} aria-live='polite' aria-relevant='additions removals'>
+          {codeSnippetError ? (
+            <ValidationMessage>{codeSnippetError}</ValidationMessage>
+          ) : null}
+        </div>
         <Button
           className={classes.btn}
           size='sm'

From af4090115617c4f40d0fa39d483f4448530e7acb Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Mon, 21 Oct 2024 12:18:53 +0200
Subject: [PATCH 21/21] remove ignores

---
 plugins/figma/src/plugin/figma/themes.ts          | 4 +---
 plugins/figma/src/plugin/figma/updateVariables.ts | 5 -----
 plugins/figma/src/ui/pages/Theme/Theme.tsx        | 2 +-
 3 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/plugins/figma/src/plugin/figma/themes.ts b/plugins/figma/src/plugin/figma/themes.ts
index bbd1e8c104..16d55bc73d 100644
--- a/plugins/figma/src/plugin/figma/themes.ts
+++ b/plugins/figma/src/plugin/figma/themes.ts
@@ -1,7 +1,5 @@
-import { hexToRgb } from '@digdir/designsystemet/color';
-
 import { getDummyTheme } from '../../common/dummyTheme';
-import type { ColorIndex, ColorTheme, StoreThemes } from '../../common/store';
+import type { StoreThemes } from '../../common/store';
 import { rgbToHex } from '../../common/utils';
 
 export const getThemes = async () => {
diff --git a/plugins/figma/src/plugin/figma/updateVariables.ts b/plugins/figma/src/plugin/figma/updateVariables.ts
index 8b9d68c5bd..b1ce327393 100644
--- a/plugins/figma/src/plugin/figma/updateVariables.ts
+++ b/plugins/figma/src/plugin/figma/updateVariables.ts
@@ -1,7 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-
 import type { ThemeColors } from '@digdir/designsystemet/color';
 import { hexToRgb } from '@digdir/designsystemet/color';
 
@@ -9,7 +5,6 @@ import type { ColorIndex, StoreThemes } from '../../common/store';
 import type { FigmaModeName } from '../../common/types';
 import { rgbToHex } from '../../common/utils';
 
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 const updateColors = (
   themes: StoreThemes,
   variable: Variable,
diff --git a/plugins/figma/src/ui/pages/Theme/Theme.tsx b/plugins/figma/src/ui/pages/Theme/Theme.tsx
index 7ff674921f..a3afa456fb 100644
--- a/plugins/figma/src/ui/pages/Theme/Theme.tsx
+++ b/plugins/figma/src/ui/pages/Theme/Theme.tsx
@@ -23,7 +23,7 @@ function Theme() {
   const errorId = useId();
   const themes = useThemeStore((state) => state.themes);
   const setLoading = useThemeStore((state) => state.setLoading);
-  const [theme, setTheme] = useState<ColorTheme>(getDummyTheme());
+  const [, setTheme] = useState<ColorTheme>(getDummyTheme());
   const [command, setCommand] = useState('');
   const [themeIndex, setThemeIndex] = useState<number>(0);
   const setThemes = useThemeStore((state) => state.setThemes);