From 3842403149211ae35316a4b187ee83d9af37944a Mon Sep 17 00:00:00 2001
From: Michael Daross <daross@teamshares.com>
Date: Mon, 31 Jul 2023 14:08:20 -0500
Subject: [PATCH] External icon libraries & token generation (#18)

* Exporting a method to automatically register Font Awesome

* Token generation from tailwind theme

* Update code-block.js

* Replacing JS with JSON

* Update .prettierignore

* Update external.ts

* Prettier

* Removing comments

* Trying to get CI to not error out
---
 .prettierignore                              |   2 +
 docs/assets/plugins/code-block/code-block.js |  30 +-
 docs/index.html                              |  34 +-
 docs/teamshares/changelog.md                 |   8 +
 package.json                                 |   5 +-
 scripts/build.js                             |   1 +
 scripts/make-styles.js                       |  11 +-
 scripts/make-tokens.js                       | 111 +++++
 src/components/icon/external.ts              |  35 ++
 src/components/icon/library.ts               |   2 +
 src/styles/exports/generated.css             | 411 ++++++++++++++++++
 src/styles/exports/index.css                 |   1 +
 src/styles/exports/overrides.css             |  93 ++--
 src/styles/exports/tokens.css                | 423 +++----------------
 src/styles/tokens.json                       | 126 ++++++
 src/utilities/icon-library.ts                |   2 +-
 16 files changed, 841 insertions(+), 454 deletions(-)
 create mode 100644 scripts/make-tokens.js
 create mode 100644 src/components/icon/external.ts
 create mode 100644 src/styles/exports/generated.css
 create mode 100644 src/styles/tokens.json

diff --git a/.prettierignore b/.prettierignore
index 8e9cc8f91f..861e3563ce 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -10,3 +10,5 @@ src/react/index.ts
 node_modules
 package-lock.json
 tsconfig.json
+src/styles/exports/generated.css
+
diff --git a/docs/assets/plugins/code-block/code-block.js b/docs/assets/plugins/code-block/code-block.js
index 8f1ec9fb67..3057af68c9 100644
--- a/docs/assets/plugins/code-block/code-block.js
+++ b/docs/assets/plugins/code-block/code-block.js
@@ -16,7 +16,7 @@
     const version = sessionStorage.getItem('sl-version');
 
     html = html
-      .replace(/@teamshares\/shoelace/g, `https://cdn.skypack.dev/@teamshares/shoelace@${version}`)
+      .replace(/@teamshares\/shoelace/g, `https://cdn.jsdelivr.net/npm/@teamshares/shoelace@${version}`)
       .replace(/from 'react'/g, `from 'https://cdn.skypack.dev/react@${reactVersion}'`)
       .replace(/from "react"/g, `from "https://cdn.skypack.dev/react@${reactVersion}"`);
 
@@ -326,7 +326,6 @@
 
     if (button?.classList.contains('code-block__button--codepen')) {
       const codeBlock = button.closest('.code-block');
-      // const htmlExample = codeBlock.querySelector('.code-block__source--html > pre > code')?.textContent;
       const reactExample = codeBlock.querySelector('.code-block__source--react > pre > code')?.textContent;
       const slimExample = codeBlock.querySelector('.code-block__source--slim > pre > code')?.textContent;
       const isReact = flavor === 'react' && typeof reactExample === 'string';
@@ -345,10 +344,10 @@
 
       // HTML templates
       if (!isReact) {
-        htmlTemplate =
-          `<script type="module" src="https://cdn.jsdelivr.net/npm/@teamshares/shoelace@${version}/dist/shoelace.js"></script>\n` +
-          `\n${slimExample}`;
-        jsTemplate = '';
+        htmlTemplate = `${slimExample}`;
+        jsTemplate =
+          `import { registerExternalLibraries } from 'https://cdn.jsdelivr.net/npm/@teamshares/shoelace@${version}/dist/utilities/icon-library.js';\n` +
+          `registerExternalLibraries();`;
       }
 
       // React templates
@@ -357,41 +356,46 @@
         jsTemplate =
           `import React from 'https://cdn.skypack.dev/react@${reactVersion}';\n` +
           `import ReactDOM from 'https://cdn.skypack.dev/react-dom@${reactVersion}';\n` +
-          `import { setBasePath } from 'https://cdn.skypack.dev/@teamshares/shoelace@${version}/dist/utilities/base-path';\n` +
+          `import { setBasePath } from 'https://cdn.jsdelivr.net/npm/@teamshares/shoelace@${version}/dist/utilities/base-path';\n` +
           `\n` +
           `// Set the base path for Shoelace assets\n` +
-          `setBasePath('https://cdn.skypack.dev/@teamshares/shoelace@${version}/dist/')\n` +
+          `setBasePath('https://cdn.jsdelivr.net/npm/@teamshares/shoelace@${version}/dist/')\n` +
           `\n${convertModuleLinks(reactExample)}\n` +
           `\n` +
           `ReactDOM.render(<App />, document.getElementById('root'));`;
       }
 
       // CSS templates
+      // TODO: Once we have a our Tailwind classes loaded in the docs site, we should also load them here
       cssTemplate =
         `@import 'https://cdn.jsdelivr.net/npm/@teamshares/shoelace@${version}/dist/themes/${
           isDark ? 'dark' : 'light'
         }.css';\n` +
+        `@import 'https://cdn.jsdelivr.net/npm/@teamshares/shoelace@${version}/dist/styles/index.css';\n` +
         '\n' +
         'body {\n' +
-        '  font: 16px sans-serif;\n' +
         '  background-color: var(--sl-color-neutral-0);\n' +
         '  color: var(--sl-color-neutral-900);\n' +
         '  padding: 1rem;\n' +
         '}';
 
+      const headTemplate =
+        `<meta name='viewport' content='width=device-width'>\n` +
+        `<script type='module' src='https://cdn.jsdelivr.net/npm/@teamshares/shoelace@${version}/dist/shoelace.js'></script>`;
+
       // Docs: https://blog.codepen.io/documentation/prefill/
       const data = {
         title: '',
         description: '',
-        tags: ['shoelace', 'web components'],
+        tags: ['shoelace', 'web components', 'teamshares'],
         editors,
-        head: `<meta name="viewport" content="width=device-width">`,
+        head: headTemplate,
         html_classes: `sl-theme-${isDark ? 'dark' : 'light'}`,
         html_pre_processor: isReact ? 'none' : 'slim',
-        css_external: `https://os.teamshares.com/assets/application-cd5dbca3027c43e480efd5a0efc734bb30fd761b.css`,
+        css_external: '', // Note that we are importing CSS via the template above
         css_pre_processor: 'scss',
         js_module: true,
-        js_external: `https://cdn.jsdelivr.net/npm/@teamshares/shoelace@${version}/dist/shoelace.js`, // This doesn't appear to work, perhaps because it lacks type=module (even though module is true below)
+        js_external: '', // Note that the shoelace module include needs to be in the <head> block rather than here
         js_pre_processor: isReact ? 'babel' : 'none',
         html: htmlTemplate,
         css: cssTemplate,
diff --git a/docs/index.html b/docs/index.html
index d62250b1eb..8de19a8710 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -36,7 +36,6 @@
     <link rel="icon" href="assets/images/ts-alee.svg" type="image/x-icon" />
     <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/ts-touch-icon.png" />
 
-    <!-- Import Shoelace -->
     <link rel="stylesheet" href="dist/themes/light.css" />
     <link rel="stylesheet" href="dist/themes/dark.css" />
     <link rel="stylesheet" href="dist/styles/index.css" />
@@ -50,37 +49,8 @@
 
     <script type="module" src="/dist/shoelace-autoloader.js"></script>
     <script type="module">
-      import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-      registerIconLibrary('fa-free', {
-        resolver: name => {
-          const filename = name.replace(/^fa[rbs]-/, '');
-          let folder = 'regular';
-          if (name.substring(0, 4) === 'fas-') folder = 'solid';
-          if (name.substring(0, 4) === 'fab-') folder = 'brands';
-          return `https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3.0/svgs/${folder}/${filename}.svg`;
-        },
-        mutator: svg => svg.setAttribute('fill', 'currentColor')
-      });
-
-      registerIconLibrary('fa', {
-        resolver: name => {
-          const filename = name.replace(/^fa([rsltdb]|(ss))-/, '');
-          const sub = name.substring(0, 4);
-          const folderHash = {
-            'fas-': 'solid',
-            'fal-': 'light',
-            'fat-': 'thin',
-            'fad-': 'duotone',
-            'fab-': 'brands'
-          };
-          const folder = folderHash[sub] || 'regular';
-          /* Note: The token refers to the Teamshares Font Awesome Kit */
-          /* See https://fontawesome.com/kits/44da2a9d09/setup */
-          return `https://ka-p.fontawesome.com/releases/v6.4.0/svgs/${folder}/${filename}.svg?token=44da2a9d09`;
-        },
-        mutator: svg => svg.setAttribute('fill', 'currentColor')
-      });
+      import { registerExternalLibraries } from '/dist/utilities/icon-library.js';
+      registerExternalLibraries();
     </script>
   </head>
   <body data-shoelace="/dist/">
diff --git a/docs/teamshares/changelog.md b/docs/teamshares/changelog.md
index a3aea4c071..a328f3d858 100644
--- a/docs/teamshares/changelog.md
+++ b/docs/teamshares/changelog.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.2.2
+
+- Utilities now export a method to automatically register FontAwesome icon libraries
+- Slim template formatting for CodePen examples
+- Tokens and overrides included in CodePen examples
+- New export of tailwind theme to be consumed by shared-ui as part of config
+- CSS tokens generated automatically from the tailwind.js config
+
 ## 1.2.1
 
 - Fix focus issue on inputs caused by Tailwind
diff --git a/package.json b/package.json
index 33da23d298..5df684e361 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@teamshares/shoelace",
   "description": "The Teamshares flavor of a forward-thinking library of web components.",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "upstreamVersion": "2.4.0",
   "homepage": "https://github.com/teamshares/shoelace",
   "author": "Cory LaViska",
@@ -23,7 +23,8 @@
     "./dist/react/*": "./dist/react/*",
     "./dist/translations/*": "./dist/translations/*",
     "./dist/styles": "./dist/styles/index.css",
-    "./dist/styles/*": "./dist/styles/*"
+    "./dist/styles/*": "./dist/styles/*",
+    "./dist/tokens": "./dist/styles/tokens.json"
   },
   "files": [
     "dist"
diff --git a/scripts/build.js b/scripts/build.js
index 96c6d41148..fe4ed9b145 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -29,6 +29,7 @@ fs.mkdirSync(outdir, { recursive: true });
     execSync(`node scripts/make-search.js --outdir "${outdir}"`, { stdio: 'inherit' });
     execSync(`node scripts/make-react.js --outdir "${outdir}"`, { stdio: 'inherit' });
     execSync(`node scripts/make-web-types.js --outdir "${outdir}"`, { stdio: 'inherit' });
+    execSync(`node scripts/make-tokens.js --outdir "${outdir}"`, { stdio: 'inherit' });
     execSync(`node scripts/make-themes.js --outdir "${outdir}"`, { stdio: 'inherit' });
     execSync(`node scripts/make-styles.js --outdir "${outdir}"`, { stdio: 'inherit' });
     execSync(`node scripts/make-icons.js --outdir "${outdir}"`, { stdio: 'inherit' });
diff --git a/scripts/make-styles.js b/scripts/make-styles.js
index 7e8bf98d18..e872bace6e 100644
--- a/scripts/make-styles.js
+++ b/scripts/make-styles.js
@@ -8,7 +8,6 @@ import { mkdirSync } from 'fs';
 import { globbySync } from 'globby';
 import path from 'path';
 import prettier from 'prettier';
-import stripComments from 'strip-css-comments';
 
 const { outdir } = commandLineArgs({ name: 'outdir', type: String });
 const files = globbySync('./src/styles/exports/**/*.css');
@@ -23,7 +22,7 @@ try {
   files.forEach(file => {
     let source = fs.readFileSync(file, 'utf8');
 
-    const css = prettier.format(stripComments(source), {
+    const css = prettier.format(source, {
       parser: 'css'
     });
 
@@ -35,3 +34,11 @@ try {
   console.error(chalk.red('Error generating export stylesheets!'));
   console.error(err);
 }
+
+// Copy the tokens.json over
+try {
+  const tokenDistPath = path.join(outdir, 'styles', 'tokens.json');
+  fs.copyFileSync('./src/styles/tokens.json', tokenDistPath);
+} catch (err) {
+  console.error(chalk.red('Error writing tokens JSON file:'), err);
+}
diff --git a/scripts/make-tokens.js b/scripts/make-tokens.js
new file mode 100644
index 0000000000..9a3ef11994
--- /dev/null
+++ b/scripts/make-tokens.js
@@ -0,0 +1,111 @@
+/* Read from the JSON source of truth and write a css file using the template */
+
+import chalk from 'chalk';
+import fs from 'fs';
+import path from 'path';
+import prettier from 'prettier';
+import tokens from './../src/styles/tokens.json' assert { type: 'json' };
+
+const colorFamilies = ['blue', 'gray', 'red', 'green', 'yellow', 'teal', 'purple', 'fuchsia'];
+const colors = tokens.colors;
+const variablePrefix = '--ts-color-';
+
+function hexToRgb(hex) {
+  const hexValue = hex.replace('#', '');
+  const r = parseInt(hexValue.substring(0, 2), 16);
+  const g = parseInt(hexValue.substring(2, 4), 16);
+  const b = parseInt(hexValue.substring(4, 6), 16);
+  return { r, g, b };
+}
+
+function generateColorVariables(colorFamily) {
+  let css = `  /** ${colorFamily} */\n`;
+  let hexCss = ``;
+  let rgbCss = ``;
+  for (const weight in colors[colorFamily]) {
+    const colorValue = colors[colorFamily][weight];
+    hexCss += `  ${variablePrefix}${colorFamily}-${weight}: ${colorValue};\n`;
+    const rgbValue = hexToRgb(colorValue);
+    rgbCss += `  ${variablePrefix}${colorFamily}-${weight}-rgb: ${rgbValue.r}, ${rgbValue.g}, ${rgbValue.b};\n`;
+  }
+  css += hexCss + rgbCss;
+  return css;
+}
+
+function generateSemanticVariants(semanticFamily, colorFamily) {
+  let css = `  /** ${semanticFamily} => ${colorFamily} */\n`;
+  for (const weight in colors[colorFamily]) {
+    css += `  ${variablePrefix}${semanticFamily}-${weight}: var(${variablePrefix}${colorFamily}-${weight});\n`;
+  }
+  return css;
+}
+
+function generateShoelaceColorOverride(colorFamily) {
+  let css = `  /** ${colorFamily} override */\n`;
+  // Use the weights from blue for all of these
+  for (const weight in colors['blue']) {
+    css += `  --sl-color-${colorFamily}-${weight}: var(${variablePrefix}${colorFamily}-${weight});\n`;
+  }
+  return css;
+}
+
+console.log('Generating tokens CSS');
+
+let cssContent =
+  `/** *********************************************************************\n` +
+  `/** Tokens generated from /src/styles/tokens.json\n` +
+  `/** Do not edit this file directly. Make changes in the json\n` +
+  `/** and then run 'npm run build'\n` +
+  `/** ********************************************************************* **/\n` +
+  `\n` +
+  `:host,\n:root,\n.sl-theme-light {\n` +
+  `\n\n  /***** Generated colors **/\n\n`;
+
+for (const colorFamily of colorFamilies) {
+  if (colors[colorFamily]) {
+    cssContent += generateColorVariables(colorFamily);
+  }
+}
+
+cssContent += `\n  /***** Semantic color variants **/\n\n`;
+
+const semanticHash = {
+  primary: 'blue',
+  success: 'green',
+  warning: 'yellow',
+  danger: 'red',
+  neutral: 'gray'
+};
+for (const semanticFamily in semanticHash) {
+  cssContent += generateSemanticVariants(semanticFamily, semanticHash[semanticFamily]);
+}
+
+cssContent += `\n  /***** Shoelace color overrides **/\n\n`;
+
+const shoelaceColors = colorFamilies.concat(Object.keys(semanticHash));
+for (const shoelaceColor of shoelaceColors) {
+  cssContent += generateShoelaceColorOverride(shoelaceColor);
+}
+
+cssContent += `\n  /***** Other generated tokens **/\n\n`;
+
+const font = tokens.fontFamily;
+cssContent +=
+  `  /**** Generated fonts **/\n` +
+  `  --ts-font-sans: ${font.sans};\n` +
+  `  --ts-font-serif: ${font.serif};\n` +
+  `  --ts-font-mono: ${font.mono};\n` +
+  `  --ts-font-body: var(--ts-font-sans);\n` +
+  `  --ts-font-display: var(--ts-font-serif);\n`;
+
+cssContent += `}\n`;
+
+cssContent = prettier.format(cssContent, { parser: 'css' });
+
+// Write the CSS file
+try {
+  const fileName = path.join('./src/styles/exports', 'generated.css');
+  fs.writeFileSync(fileName, cssContent, 'utf8');
+} catch (err) {
+  console.error(chalk.red('Error writing CSS file:'), err);
+}
diff --git a/src/components/icon/external.ts b/src/components/icon/external.ts
new file mode 100644
index 0000000000..44d2b1c236
--- /dev/null
+++ b/src/components/icon/external.ts
@@ -0,0 +1,35 @@
+import { registerIconLibrary } from './library';
+
+/* Teamshares-specific icon libraries */
+export function registerExternalLibraries() {
+  registerIconLibrary('fa-free', {
+    resolver: name => {
+      const filename = name.replace(/^fa[rbs]-/, '');
+      let folder = 'regular';
+      if (name.startsWith('fas-')) folder = 'solid';
+      if (name.startsWith('fab-')) folder = 'brands';
+      return `https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3.0/svgs/${folder}/${filename}.svg`;
+    },
+    mutator: svg => svg.setAttribute('fill', 'currentColor')
+  });
+
+  registerIconLibrary('fa', {
+    resolver: name => {
+      const filename = name.replace(/^fa([rsltdb]|(ss))-/, '');
+      const sub = name.substring(0, 4);
+      const folderHash = {
+        'fas-': 'solid',
+        'fal-': 'light',
+        'fat-': 'thin',
+        'fad-': 'duotone',
+        'fab-': 'brands'
+      };
+      const folder: unknown = folderHash[sub as keyof typeof folderHash] || 'regular';
+      /* Note: The token refers to the Teamshares Font Awesome Kit */
+      /* See https://fontawesome.com/kits/44da2a9d09/setup */
+      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+      return `https://ka-p.fontawesome.com/releases/v6.4.0/svgs/${folder}/${filename}.svg?token=44da2a9d09`;
+    },
+    mutator: svg => svg.setAttribute('fill', 'currentColor')
+  });
+}
diff --git a/src/components/icon/library.ts b/src/components/icon/library.ts
index f19c4bfbb5..9506cc481a 100644
--- a/src/components/icon/library.ts
+++ b/src/components/icon/library.ts
@@ -52,3 +52,5 @@ export function registerIconLibrary(
 export function unregisterIconLibrary(name: string) {
   registry = registry.filter(lib => lib.name !== name);
 }
+
+export { registerExternalLibraries } from './external';
diff --git a/src/styles/exports/generated.css b/src/styles/exports/generated.css
new file mode 100644
index 0000000000..2bf8bc489d
--- /dev/null
+++ b/src/styles/exports/generated.css
@@ -0,0 +1,411 @@
+/** *********************************************************************
+/** Tokens generated from /src/styles/tokens.json
+/** Do not edit this file directly. Make changes in the json
+/** and then run 'npm run build'
+/** ********************************************************************* **/
+
+:host,
+:root,
+.sl-theme-light {
+  /***** Generated colors **/
+
+  /** blue */
+  --ts-color-blue-50: #f6fafd;
+  --ts-color-blue-100: #e1eff9;
+  --ts-color-blue-200: #b7d8f0;
+  --ts-color-blue-300: #84bafa;
+  --ts-color-blue-400: #539ef8;
+  --ts-color-blue-500: #3b74fc;
+  --ts-color-blue-600: #2c5ed6;
+  --ts-color-blue-700: #3a5dae;
+  --ts-color-blue-800: #29427b;
+  --ts-color-blue-900: #353d5f;
+  --ts-color-blue-950: #2f3654;
+  --ts-color-blue-1000: #2f3654;
+  --ts-color-blue-50-rgb: 246, 250, 253;
+  --ts-color-blue-100-rgb: 225, 239, 249;
+  --ts-color-blue-200-rgb: 183, 216, 240;
+  --ts-color-blue-300-rgb: 132, 186, 250;
+  --ts-color-blue-400-rgb: 83, 158, 248;
+  --ts-color-blue-500-rgb: 59, 116, 252;
+  --ts-color-blue-600-rgb: 44, 94, 214;
+  --ts-color-blue-700-rgb: 58, 93, 174;
+  --ts-color-blue-800-rgb: 41, 66, 123;
+  --ts-color-blue-900-rgb: 53, 61, 95;
+  --ts-color-blue-950-rgb: 47, 54, 84;
+  --ts-color-blue-1000-rgb: 47, 54, 84;
+  /** gray */
+  --ts-color-gray-100: #f6f8fa;
+  --ts-color-gray-200: #f0f0f0;
+  --ts-color-gray-300: #e8e8e8;
+  --ts-color-gray-400: #cdcfd1;
+  --ts-color-gray-500: #b3b5b8;
+  --ts-color-gray-600: #93999e;
+  --ts-color-gray-700: #6d7176;
+  --ts-color-gray-800: #444c59;
+  --ts-color-gray-900: #2e333c;
+  --ts-color-gray-100-rgb: 246, 248, 250;
+  --ts-color-gray-200-rgb: 240, 240, 240;
+  --ts-color-gray-300-rgb: 232, 232, 232;
+  --ts-color-gray-400-rgb: 205, 207, 209;
+  --ts-color-gray-500-rgb: 179, 181, 184;
+  --ts-color-gray-600-rgb: 147, 153, 158;
+  --ts-color-gray-700-rgb: 109, 113, 118;
+  --ts-color-gray-800-rgb: 68, 76, 89;
+  --ts-color-gray-900-rgb: 46, 51, 60;
+  /** red */
+  --ts-color-red-100: #fcf1ef;
+  --ts-color-red-200: #f7d7d2;
+  --ts-color-red-300: #eec9c1;
+  --ts-color-red-400: #f0948b;
+  --ts-color-red-500: #f65747;
+  --ts-color-red-600: #d64e41;
+  --ts-color-red-700: #d7351c;
+  --ts-color-red-800: #b92e18;
+  --ts-color-red-900: #9b2614;
+  --ts-color-red-100-rgb: 252, 241, 239;
+  --ts-color-red-200-rgb: 247, 215, 210;
+  --ts-color-red-300-rgb: 238, 201, 193;
+  --ts-color-red-400-rgb: 240, 148, 139;
+  --ts-color-red-500-rgb: 246, 87, 71;
+  --ts-color-red-600-rgb: 214, 78, 65;
+  --ts-color-red-700-rgb: 215, 53, 28;
+  --ts-color-red-800-rgb: 185, 46, 24;
+  --ts-color-red-900-rgb: 155, 38, 20;
+  /** green */
+  --ts-color-green-100: #eef6e8;
+  --ts-color-green-200: #d4e8c3;
+  --ts-color-green-300: #72d0a3;
+  --ts-color-green-400: #21bc9c;
+  --ts-color-green-500: #17a688;
+  --ts-color-green-600: #10985f;
+  --ts-color-green-700: #068466;
+  --ts-color-green-800: #164e3e;
+  --ts-color-green-900: #004d49;
+  --ts-color-green-100-rgb: 238, 246, 232;
+  --ts-color-green-200-rgb: 212, 232, 195;
+  --ts-color-green-300-rgb: 114, 208, 163;
+  --ts-color-green-400-rgb: 33, 188, 156;
+  --ts-color-green-500-rgb: 23, 166, 136;
+  --ts-color-green-600-rgb: 16, 152, 95;
+  --ts-color-green-700-rgb: 6, 132, 102;
+  --ts-color-green-800-rgb: 22, 78, 62;
+  --ts-color-green-900-rgb: 0, 77, 73;
+  /** yellow */
+  --ts-color-yellow-50: #fffbf0;
+  --ts-color-yellow-100: #faf4ea;
+  --ts-color-yellow-200: #f2eade;
+  --ts-color-yellow-300: #fce491;
+  --ts-color-yellow-400: #fad860;
+  --ts-color-yellow-500: #ffc328;
+  --ts-color-yellow-600: #f6af47;
+  --ts-color-yellow-700: #ca861e;
+  --ts-color-yellow-800: #956419;
+  --ts-color-yellow-900: #694712;
+  --ts-color-yellow-50-rgb: 255, 251, 240;
+  --ts-color-yellow-100-rgb: 250, 244, 234;
+  --ts-color-yellow-200-rgb: 242, 234, 222;
+  --ts-color-yellow-300-rgb: 252, 228, 145;
+  --ts-color-yellow-400-rgb: 250, 216, 96;
+  --ts-color-yellow-500-rgb: 255, 195, 40;
+  --ts-color-yellow-600-rgb: 246, 175, 71;
+  --ts-color-yellow-700-rgb: 202, 134, 30;
+  --ts-color-yellow-800-rgb: 149, 100, 25;
+  --ts-color-yellow-900-rgb: 105, 71, 18;
+  /** teal */
+  --ts-color-teal-100: #f0fafa;
+  --ts-color-teal-200: #caebec;
+  --ts-color-teal-300: #a4dbdd;
+  --ts-color-teal-400: #80cbce;
+  --ts-color-teal-500: #5cbabd;
+  --ts-color-teal-600: #39a8ac;
+  --ts-color-teal-700: #288286;
+  --ts-color-teal-800: #1a5b5d;
+  --ts-color-teal-900: #0d3233;
+  --ts-color-teal-100-rgb: 240, 250, 250;
+  --ts-color-teal-200-rgb: 202, 235, 236;
+  --ts-color-teal-300-rgb: 164, 219, 221;
+  --ts-color-teal-400-rgb: 128, 203, 206;
+  --ts-color-teal-500-rgb: 92, 186, 189;
+  --ts-color-teal-600-rgb: 57, 168, 172;
+  --ts-color-teal-700-rgb: 40, 130, 134;
+  --ts-color-teal-800-rgb: 26, 91, 93;
+  --ts-color-teal-900-rgb: 13, 50, 51;
+  /** purple */
+  --ts-color-purple-100: #f4f0fa;
+  --ts-color-purple-200: #dbd0ef;
+  --ts-color-purple-300: #c3b1e2;
+  --ts-color-purple-400: #ab92d6;
+  --ts-color-purple-500: #9374c8;
+  --ts-color-purple-600: #7b56bb;
+  --ts-color-purple-700: #6339ac;
+  --ts-color-purple-800: #482684;
+  --ts-color-purple-900: #2e1658;
+  --ts-color-purple-100-rgb: 244, 240, 250;
+  --ts-color-purple-200-rgb: 219, 208, 239;
+  --ts-color-purple-300-rgb: 195, 177, 226;
+  --ts-color-purple-400-rgb: 171, 146, 214;
+  --ts-color-purple-500-rgb: 147, 116, 200;
+  --ts-color-purple-600-rgb: 123, 86, 187;
+  --ts-color-purple-700-rgb: 99, 57, 172;
+  --ts-color-purple-800-rgb: 72, 38, 132;
+  --ts-color-purple-900-rgb: 46, 22, 88;
+  /** fuchsia */
+  --ts-color-fuchsia-100: #fcf2ff;
+  --ts-color-fuchsia-200: #f2cffe;
+  --ts-color-fuchsia-300: #e7aefb;
+  --ts-color-fuchsia-400: #dd8df8;
+  --ts-color-fuchsia-500: #d16ef3;
+  --ts-color-fuchsia-600: #c550ed;
+  --ts-color-fuchsia-700: #9839b8;
+  --ts-color-fuchsia-800: #692481;
+  --ts-color-fuchsia-900: #391247;
+  --ts-color-fuchsia-100-rgb: 252, 242, 255;
+  --ts-color-fuchsia-200-rgb: 242, 207, 254;
+  --ts-color-fuchsia-300-rgb: 231, 174, 251;
+  --ts-color-fuchsia-400-rgb: 221, 141, 248;
+  --ts-color-fuchsia-500-rgb: 209, 110, 243;
+  --ts-color-fuchsia-600-rgb: 197, 80, 237;
+  --ts-color-fuchsia-700-rgb: 152, 57, 184;
+  --ts-color-fuchsia-800-rgb: 105, 36, 129;
+  --ts-color-fuchsia-900-rgb: 57, 18, 71;
+
+  /***** Semantic color variants **/
+
+  /** primary => blue */
+  --ts-color-primary-50: var(--ts-color-blue-50);
+  --ts-color-primary-100: var(--ts-color-blue-100);
+  --ts-color-primary-200: var(--ts-color-blue-200);
+  --ts-color-primary-300: var(--ts-color-blue-300);
+  --ts-color-primary-400: var(--ts-color-blue-400);
+  --ts-color-primary-500: var(--ts-color-blue-500);
+  --ts-color-primary-600: var(--ts-color-blue-600);
+  --ts-color-primary-700: var(--ts-color-blue-700);
+  --ts-color-primary-800: var(--ts-color-blue-800);
+  --ts-color-primary-900: var(--ts-color-blue-900);
+  --ts-color-primary-950: var(--ts-color-blue-950);
+  --ts-color-primary-1000: var(--ts-color-blue-1000);
+  /** success => green */
+  --ts-color-success-100: var(--ts-color-green-100);
+  --ts-color-success-200: var(--ts-color-green-200);
+  --ts-color-success-300: var(--ts-color-green-300);
+  --ts-color-success-400: var(--ts-color-green-400);
+  --ts-color-success-500: var(--ts-color-green-500);
+  --ts-color-success-600: var(--ts-color-green-600);
+  --ts-color-success-700: var(--ts-color-green-700);
+  --ts-color-success-800: var(--ts-color-green-800);
+  --ts-color-success-900: var(--ts-color-green-900);
+  /** warning => yellow */
+  --ts-color-warning-50: var(--ts-color-yellow-50);
+  --ts-color-warning-100: var(--ts-color-yellow-100);
+  --ts-color-warning-200: var(--ts-color-yellow-200);
+  --ts-color-warning-300: var(--ts-color-yellow-300);
+  --ts-color-warning-400: var(--ts-color-yellow-400);
+  --ts-color-warning-500: var(--ts-color-yellow-500);
+  --ts-color-warning-600: var(--ts-color-yellow-600);
+  --ts-color-warning-700: var(--ts-color-yellow-700);
+  --ts-color-warning-800: var(--ts-color-yellow-800);
+  --ts-color-warning-900: var(--ts-color-yellow-900);
+  /** danger => red */
+  --ts-color-danger-100: var(--ts-color-red-100);
+  --ts-color-danger-200: var(--ts-color-red-200);
+  --ts-color-danger-300: var(--ts-color-red-300);
+  --ts-color-danger-400: var(--ts-color-red-400);
+  --ts-color-danger-500: var(--ts-color-red-500);
+  --ts-color-danger-600: var(--ts-color-red-600);
+  --ts-color-danger-700: var(--ts-color-red-700);
+  --ts-color-danger-800: var(--ts-color-red-800);
+  --ts-color-danger-900: var(--ts-color-red-900);
+  /** neutral => gray */
+  --ts-color-neutral-100: var(--ts-color-gray-100);
+  --ts-color-neutral-200: var(--ts-color-gray-200);
+  --ts-color-neutral-300: var(--ts-color-gray-300);
+  --ts-color-neutral-400: var(--ts-color-gray-400);
+  --ts-color-neutral-500: var(--ts-color-gray-500);
+  --ts-color-neutral-600: var(--ts-color-gray-600);
+  --ts-color-neutral-700: var(--ts-color-gray-700);
+  --ts-color-neutral-800: var(--ts-color-gray-800);
+  --ts-color-neutral-900: var(--ts-color-gray-900);
+
+  /***** Shoelace color overrides **/
+
+  /** blue override */
+  --sl-color-blue-50: var(--ts-color-blue-50);
+  --sl-color-blue-100: var(--ts-color-blue-100);
+  --sl-color-blue-200: var(--ts-color-blue-200);
+  --sl-color-blue-300: var(--ts-color-blue-300);
+  --sl-color-blue-400: var(--ts-color-blue-400);
+  --sl-color-blue-500: var(--ts-color-blue-500);
+  --sl-color-blue-600: var(--ts-color-blue-600);
+  --sl-color-blue-700: var(--ts-color-blue-700);
+  --sl-color-blue-800: var(--ts-color-blue-800);
+  --sl-color-blue-900: var(--ts-color-blue-900);
+  --sl-color-blue-950: var(--ts-color-blue-950);
+  --sl-color-blue-1000: var(--ts-color-blue-1000);
+  /** gray override */
+  --sl-color-gray-50: var(--ts-color-gray-50);
+  --sl-color-gray-100: var(--ts-color-gray-100);
+  --sl-color-gray-200: var(--ts-color-gray-200);
+  --sl-color-gray-300: var(--ts-color-gray-300);
+  --sl-color-gray-400: var(--ts-color-gray-400);
+  --sl-color-gray-500: var(--ts-color-gray-500);
+  --sl-color-gray-600: var(--ts-color-gray-600);
+  --sl-color-gray-700: var(--ts-color-gray-700);
+  --sl-color-gray-800: var(--ts-color-gray-800);
+  --sl-color-gray-900: var(--ts-color-gray-900);
+  --sl-color-gray-950: var(--ts-color-gray-950);
+  --sl-color-gray-1000: var(--ts-color-gray-1000);
+  /** red override */
+  --sl-color-red-50: var(--ts-color-red-50);
+  --sl-color-red-100: var(--ts-color-red-100);
+  --sl-color-red-200: var(--ts-color-red-200);
+  --sl-color-red-300: var(--ts-color-red-300);
+  --sl-color-red-400: var(--ts-color-red-400);
+  --sl-color-red-500: var(--ts-color-red-500);
+  --sl-color-red-600: var(--ts-color-red-600);
+  --sl-color-red-700: var(--ts-color-red-700);
+  --sl-color-red-800: var(--ts-color-red-800);
+  --sl-color-red-900: var(--ts-color-red-900);
+  --sl-color-red-950: var(--ts-color-red-950);
+  --sl-color-red-1000: var(--ts-color-red-1000);
+  /** green override */
+  --sl-color-green-50: var(--ts-color-green-50);
+  --sl-color-green-100: var(--ts-color-green-100);
+  --sl-color-green-200: var(--ts-color-green-200);
+  --sl-color-green-300: var(--ts-color-green-300);
+  --sl-color-green-400: var(--ts-color-green-400);
+  --sl-color-green-500: var(--ts-color-green-500);
+  --sl-color-green-600: var(--ts-color-green-600);
+  --sl-color-green-700: var(--ts-color-green-700);
+  --sl-color-green-800: var(--ts-color-green-800);
+  --sl-color-green-900: var(--ts-color-green-900);
+  --sl-color-green-950: var(--ts-color-green-950);
+  --sl-color-green-1000: var(--ts-color-green-1000);
+  /** yellow override */
+  --sl-color-yellow-50: var(--ts-color-yellow-50);
+  --sl-color-yellow-100: var(--ts-color-yellow-100);
+  --sl-color-yellow-200: var(--ts-color-yellow-200);
+  --sl-color-yellow-300: var(--ts-color-yellow-300);
+  --sl-color-yellow-400: var(--ts-color-yellow-400);
+  --sl-color-yellow-500: var(--ts-color-yellow-500);
+  --sl-color-yellow-600: var(--ts-color-yellow-600);
+  --sl-color-yellow-700: var(--ts-color-yellow-700);
+  --sl-color-yellow-800: var(--ts-color-yellow-800);
+  --sl-color-yellow-900: var(--ts-color-yellow-900);
+  --sl-color-yellow-950: var(--ts-color-yellow-950);
+  --sl-color-yellow-1000: var(--ts-color-yellow-1000);
+  /** teal override */
+  --sl-color-teal-50: var(--ts-color-teal-50);
+  --sl-color-teal-100: var(--ts-color-teal-100);
+  --sl-color-teal-200: var(--ts-color-teal-200);
+  --sl-color-teal-300: var(--ts-color-teal-300);
+  --sl-color-teal-400: var(--ts-color-teal-400);
+  --sl-color-teal-500: var(--ts-color-teal-500);
+  --sl-color-teal-600: var(--ts-color-teal-600);
+  --sl-color-teal-700: var(--ts-color-teal-700);
+  --sl-color-teal-800: var(--ts-color-teal-800);
+  --sl-color-teal-900: var(--ts-color-teal-900);
+  --sl-color-teal-950: var(--ts-color-teal-950);
+  --sl-color-teal-1000: var(--ts-color-teal-1000);
+  /** purple override */
+  --sl-color-purple-50: var(--ts-color-purple-50);
+  --sl-color-purple-100: var(--ts-color-purple-100);
+  --sl-color-purple-200: var(--ts-color-purple-200);
+  --sl-color-purple-300: var(--ts-color-purple-300);
+  --sl-color-purple-400: var(--ts-color-purple-400);
+  --sl-color-purple-500: var(--ts-color-purple-500);
+  --sl-color-purple-600: var(--ts-color-purple-600);
+  --sl-color-purple-700: var(--ts-color-purple-700);
+  --sl-color-purple-800: var(--ts-color-purple-800);
+  --sl-color-purple-900: var(--ts-color-purple-900);
+  --sl-color-purple-950: var(--ts-color-purple-950);
+  --sl-color-purple-1000: var(--ts-color-purple-1000);
+  /** fuchsia override */
+  --sl-color-fuchsia-50: var(--ts-color-fuchsia-50);
+  --sl-color-fuchsia-100: var(--ts-color-fuchsia-100);
+  --sl-color-fuchsia-200: var(--ts-color-fuchsia-200);
+  --sl-color-fuchsia-300: var(--ts-color-fuchsia-300);
+  --sl-color-fuchsia-400: var(--ts-color-fuchsia-400);
+  --sl-color-fuchsia-500: var(--ts-color-fuchsia-500);
+  --sl-color-fuchsia-600: var(--ts-color-fuchsia-600);
+  --sl-color-fuchsia-700: var(--ts-color-fuchsia-700);
+  --sl-color-fuchsia-800: var(--ts-color-fuchsia-800);
+  --sl-color-fuchsia-900: var(--ts-color-fuchsia-900);
+  --sl-color-fuchsia-950: var(--ts-color-fuchsia-950);
+  --sl-color-fuchsia-1000: var(--ts-color-fuchsia-1000);
+  /** primary override */
+  --sl-color-primary-50: var(--ts-color-primary-50);
+  --sl-color-primary-100: var(--ts-color-primary-100);
+  --sl-color-primary-200: var(--ts-color-primary-200);
+  --sl-color-primary-300: var(--ts-color-primary-300);
+  --sl-color-primary-400: var(--ts-color-primary-400);
+  --sl-color-primary-500: var(--ts-color-primary-500);
+  --sl-color-primary-600: var(--ts-color-primary-600);
+  --sl-color-primary-700: var(--ts-color-primary-700);
+  --sl-color-primary-800: var(--ts-color-primary-800);
+  --sl-color-primary-900: var(--ts-color-primary-900);
+  --sl-color-primary-950: var(--ts-color-primary-950);
+  --sl-color-primary-1000: var(--ts-color-primary-1000);
+  /** success override */
+  --sl-color-success-50: var(--ts-color-success-50);
+  --sl-color-success-100: var(--ts-color-success-100);
+  --sl-color-success-200: var(--ts-color-success-200);
+  --sl-color-success-300: var(--ts-color-success-300);
+  --sl-color-success-400: var(--ts-color-success-400);
+  --sl-color-success-500: var(--ts-color-success-500);
+  --sl-color-success-600: var(--ts-color-success-600);
+  --sl-color-success-700: var(--ts-color-success-700);
+  --sl-color-success-800: var(--ts-color-success-800);
+  --sl-color-success-900: var(--ts-color-success-900);
+  --sl-color-success-950: var(--ts-color-success-950);
+  --sl-color-success-1000: var(--ts-color-success-1000);
+  /** warning override */
+  --sl-color-warning-50: var(--ts-color-warning-50);
+  --sl-color-warning-100: var(--ts-color-warning-100);
+  --sl-color-warning-200: var(--ts-color-warning-200);
+  --sl-color-warning-300: var(--ts-color-warning-300);
+  --sl-color-warning-400: var(--ts-color-warning-400);
+  --sl-color-warning-500: var(--ts-color-warning-500);
+  --sl-color-warning-600: var(--ts-color-warning-600);
+  --sl-color-warning-700: var(--ts-color-warning-700);
+  --sl-color-warning-800: var(--ts-color-warning-800);
+  --sl-color-warning-900: var(--ts-color-warning-900);
+  --sl-color-warning-950: var(--ts-color-warning-950);
+  --sl-color-warning-1000: var(--ts-color-warning-1000);
+  /** danger override */
+  --sl-color-danger-50: var(--ts-color-danger-50);
+  --sl-color-danger-100: var(--ts-color-danger-100);
+  --sl-color-danger-200: var(--ts-color-danger-200);
+  --sl-color-danger-300: var(--ts-color-danger-300);
+  --sl-color-danger-400: var(--ts-color-danger-400);
+  --sl-color-danger-500: var(--ts-color-danger-500);
+  --sl-color-danger-600: var(--ts-color-danger-600);
+  --sl-color-danger-700: var(--ts-color-danger-700);
+  --sl-color-danger-800: var(--ts-color-danger-800);
+  --sl-color-danger-900: var(--ts-color-danger-900);
+  --sl-color-danger-950: var(--ts-color-danger-950);
+  --sl-color-danger-1000: var(--ts-color-danger-1000);
+  /** neutral override */
+  --sl-color-neutral-50: var(--ts-color-neutral-50);
+  --sl-color-neutral-100: var(--ts-color-neutral-100);
+  --sl-color-neutral-200: var(--ts-color-neutral-200);
+  --sl-color-neutral-300: var(--ts-color-neutral-300);
+  --sl-color-neutral-400: var(--ts-color-neutral-400);
+  --sl-color-neutral-500: var(--ts-color-neutral-500);
+  --sl-color-neutral-600: var(--ts-color-neutral-600);
+  --sl-color-neutral-700: var(--ts-color-neutral-700);
+  --sl-color-neutral-800: var(--ts-color-neutral-800);
+  --sl-color-neutral-900: var(--ts-color-neutral-900);
+  --sl-color-neutral-950: var(--ts-color-neutral-950);
+  --sl-color-neutral-1000: var(--ts-color-neutral-1000);
+
+  /***** Other generated tokens **/
+
+  /**** Generated fonts **/
+  --ts-font-sans: Inter, Helvetica, Arial, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
+  --ts-font-serif: "DM Serif Display", Georgia, Times, serif;
+  --ts-font-mono: SFMono-Regular, Menlo, mono;
+  --ts-font-body: var(--ts-font-sans);
+  --ts-font-display: var(--ts-font-serif);
+}
diff --git a/src/styles/exports/index.css b/src/styles/exports/index.css
index f3e7954bc3..b82f22c193 100644
--- a/src/styles/exports/index.css
+++ b/src/styles/exports/index.css
@@ -1,4 +1,5 @@
 /* Tokens */
+@import 'generated.css';
 @import 'tokens.css';
 @import 'overrides.css';
 @import 'vendor.css';
diff --git a/src/styles/exports/overrides.css b/src/styles/exports/overrides.css
index 848c799c1c..7e866520d8 100644
--- a/src/styles/exports/overrides.css
+++ b/src/styles/exports/overrides.css
@@ -1,12 +1,12 @@
-/** ******************************** */
-/** ******************************** */
-/** Global Overrides                 */
-/** ******************************** */
-/** ******************************** */
+/** ************************************************************* */
+/** Global shoelace overrides                                     */
+/** ************************************************************* */
 
 :root,
 :host,
 .sl-theme-light {
+  /***** Shoelace variable overrides */
+
   --sl-font-mono: var(--ts-font-mono);
   --sl-font-sans: var(--ts-font-sans);
   --sl-font-serif: var(--ts-font-serif);
@@ -15,8 +15,8 @@
   /* Border radius */
   --sl-border-radius-small: var(--ts-border-radius-small);
   /* Because Menu component doesn't allow radius to be customized to another radius token */
-  --sl-border-radius-medium: var(--sl-border-radius-large);
   /* 8px  */
+  --sl-border-radius-medium: var(--sl-border-radius-large);
   /* Shadows */
   --sl-shadow-x-small: var(--ts-shadow-x-small);
   --sl-shadow-small: var(--ts-shadow-small);
@@ -58,16 +58,16 @@
   --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color);
   --sl-focus-ring-offset: 0;
   --sl-input-focus-ring-color: rgba(var(--ts-color-blue-500-rgb), 0.5);
-
-  /** *********************************** */
-  /** Override aggressive Tailwind resets */
-  /** *********************************** */
-
+  /* Panel (used in dropdown menu, popovers, etc.) */
   --sl-panel-background-color: var(--sl-color-neutral-0);
   --sl-panel-border-color: var(--sl-color-neutral-300);
   --sl-panel-border-width: 1px;
 }
 
+/** *********************************** */
+/** Override aggressive Tailwind resets */
+/** *********************************** */
+
 sl-input[type],
 sl-input[type]:focus,
 sl-input[multiple],
@@ -114,15 +114,16 @@ sl-select[multiple]:focus {
   outline-offset: initial;
 }
 
-/** ******************************** */
-/** ******************************** */
-/** Component Overrides              */
-/** ******************************** */
-/** ******************************** */
+/** ************************************************************* */
+/** Shoelace component overrides                                  */
+/**                                                               */
+/** These overrides will eventually be deprecated in favor of     */
+/** modifying the styles in the components themselves             */
+/** ************************************************************* */
 
-/** ******************************** */
+/** ****************** */
 /** Alert */
-/** ******************************** */
+/** ****************** */
 
 sl-alert::part(message) {
   color: var(--ts-color-text-default);
@@ -194,9 +195,9 @@ sl-alert::part(close-button__base):active {
   color: var(--sl-color-neutral-900);
 }
 
-/** ******************************** */
+/** ****************** */
 /** Button */
-/** ******************************** */
+/** ****************** */
 
 :root,
 :host,
@@ -430,17 +431,17 @@ sl-button.no-gap {
   margin: 0;
 }
 
-/** ******************************** */
+/** ****************** */
 /** Card */
-/** ******************************** */
+/** ****************** */
 
 sl-card {
   --border-color: var(--sl-color-neutral-300);
 }
 
-/** ******************************** */
+/** ****************** */
 /* Checkbox & radio */
-/** ******************************** */
+/** ****************** */
 
 sl-checkbox::part(control) {
   border-radius: var(--ts-border-radius-x-small);
@@ -463,9 +464,9 @@ sl-radio::part(base) {
   margin-top: var(--sl-spacing-medium);
 }
 
-/** ******************************** */
+/** ****************** */
 /** Details */
-/** ******************************** */
+/** ****************** */
 
 sl-details::part(base) {
   border: 1px solid var(--sl-color-neutral-300);
@@ -481,9 +482,9 @@ sl-details.no-border::part(base) {
   border: 0;
 }
 
-/** ******************************** */
+/** ****************** */
 /** Dialog */
-/** ******************************** */
+/** ****************** */
 
 sl-dialog {
   --body-spacing: 0 16px;
@@ -617,33 +618,33 @@ sl-dialog.small::part(body) {
   }
 }
 
-/** ******************************** */
+/** ****************** */
 /** Divider */
-/** ******************************** */
+/** ****************** */
 
 sl-divider {
   --color: var(--sl-color-neutral-300);
 }
 
-/** ******************************** */
+/** ****************** */
 /** Drawer */
-/** ******************************** */
+/** ****************** */
 sl-drawer::part(panel) {
   border-radius: 0;
 }
 
-/** ******************************** */
+/** ****************** */
 /** Dropdown */
-/** ******************************** */
+/** ****************** */
 
 /* Prevent panel corners from peeking out past rounded edges. */
 sl-dropdown::part(panel) {
   overflow: hidden;
 }
 
-/** ******************************** */
+/** ****************** */
 /** Forms */
-/** ******************************** */
+/** ****************** */
 :root,
 :host,
 sl-theme {
@@ -707,9 +708,9 @@ sl-select::part(display-input) {
   color: var(--ts-color-text-default);
 }
 
-/** ******************************** */
+/** ****************** */
 /** Icon */
-/** ******************************** */
+/** ****************** */
 
 sl-icon.info::part(base) {
   color: var(--ts-color-text-info);
@@ -764,9 +765,9 @@ sl-dialog::part(close-button__base):active {
   color: var(--ts-color-text-default);
 }
 
-/** ******************************** */
+/** ****************** */
 /** Menu */
-/** ******************************** */
+/** ****************** */
 
 /* Menu panel styling */
 
@@ -831,9 +832,9 @@ sl-menu-label::part(base) {
   font-weight: var(--sl-font-weight-normal);
 }
 
-/** ******************************** */
+/** ****************** */
 /** Select */
-/** ******************************** */
+/** ****************** */
 
 /* Control gap between select & menu panel */
 sl-select::part(listbox) {
@@ -890,9 +891,9 @@ sl-select > small {
   font-weight: var(--sl-font-weight-semibold);
 }
 
-/** ******************************** */
+/** ****************** */
 /* Switch & range */
-/** ******************************** */
+/** ****************** */
 
 sl-switch[size='small'] {
   --height: calc(var(--sl-toggle-size-small) + 6px);
@@ -923,9 +924,9 @@ sl-range {
   --track-color-inactive: var(--sl-color-neutral-300);
 }
 
-/** ******************************** */
+/** ****************** */
 /** Tooltip */
-/** ******************************** */
+/** ****************** */
 
 :root,
 :host,
diff --git a/src/styles/exports/tokens.css b/src/styles/exports/tokens.css
index 1c208c6227..994c198ca2 100644
--- a/src/styles/exports/tokens.css
+++ b/src/styles/exports/tokens.css
@@ -1,228 +1,23 @@
+/** *********************************************************** **/
+/** Static tokens                                               **/
+/** -------------                                               **/
+/** This file contains mappings and values not generated        **/
+/** from the tailwind theme. They shouldn't change often.       **/
+/** The main color values are in tailwind.js, which is used     **/
+/** by make-tokens.js to generate generated.css.                **/
+/** *********************************************************** **/
+
 :host,
 :root,
 .sl-theme-light {
-  /** ***************** **/
-  /** Colors            **/
-  /** ***************** **/
-  /** */
+  color-scheme: light;
+
   --ts-color-white: #fff;
   --ts-color-white-rgb: 255, 255, 255;
   --ts-color-black: #000;
   --ts-color-black-rgb: 0, 0, 0;
-  --ts-color-blue-50: #f6fafd;
-  --ts-color-blue-100: #e1eff9;
-  --ts-color-blue-200: #b7d8f0;
-  --ts-color-blue-300: #84bafa;
-  --ts-color-blue-400: #539ef8;
-  --ts-color-blue-500: #3b74fc;
-  --ts-color-blue-600: #2c5ed6;
-  --ts-color-blue-700: #3a5dae;
-  --ts-color-blue-800: #29427b;
-  --ts-color-blue-900: #353d5f;
-  --ts-color-blue-950: #2f3654;
-  --ts-color-gray-50: #fcfcfc;
-  --ts-color-gray-75: #f9fafb;
-  --ts-color-gray-100: #f6f8fa;
-  --ts-color-gray-200: #f0f0f0;
-  --ts-color-gray-300: #e8e8e8;
-  --ts-color-gray-400: #cdcfd1;
-  --ts-color-gray-500: #b3b5b8;
-  --ts-color-gray-600: #93999e;
-  --ts-color-gray-700: #6d7176;
-  --ts-color-gray-800: #444c59;
-  --ts-color-gray-900: #2e333c;
-  --ts-color-gray-950: #111;
-  --ts-color-red-100: #fcf1ef;
-  --ts-color-red-200: #f7d7d2;
-  --ts-color-red-300: #eec9c1;
-  --ts-color-red-400: #f0948b;
-  --ts-color-red-500: #f65747;
-  --ts-color-red-600: #d64e41;
-  --ts-color-red-700: #d7351c;
-  --ts-color-red-800: #b92e18;
-  --ts-color-red-900: #9b2614;
-  --ts-color-green-100: #eef6e8;
-  --ts-color-green-200: #d4e8c3;
-  --ts-color-green-300: #72d0a3;
-  --ts-color-green-400: #21bc9c;
-  --ts-color-green-500: #17a688;
-  --ts-color-green-600: #10985f;
-  --ts-color-green-700: #068466;
-  --ts-color-green-800: #164e3e;
-  --ts-color-green-900: #004d49;
-  --ts-color-teal-100: #f0fafa;
-  --ts-color-teal-200: #caebec;
-  --ts-color-teal-300: #a4dbdd;
-  --ts-color-teal-400: #80cbce;
-  --ts-color-teal-500: #5cbabd;
-  --ts-color-teal-600: #39a8ac;
-  --ts-color-teal-700: #288286;
-  --ts-color-teal-800: #1a5b5d;
-  --ts-color-teal-900: #0d3233;
-  --ts-color-purple-100: #f4f0fa;
-  --ts-color-purple-200: #dbd0ef;
-  --ts-color-purple-300: #c3b1e2;
-  --ts-color-purple-400: #ab92d6;
-  --ts-color-purple-500: #9374c8;
-  --ts-color-purple-600: #7b56bb;
-  --ts-color-purple-700: #6339ac;
-  --ts-color-purple-800: #482684;
-  --ts-color-purple-900: #2e1658;
-  --ts-color-fuchsia-100: #fcf2ff;
-  --ts-color-fuchsia-200: #f2cffe;
-  --ts-color-fuchsia-300: #e7aefb;
-  --ts-color-fuchsia-400: #dd8df8;
-  --ts-color-fuchsia-500: #d16ef3;
-  --ts-color-fuchsia-600: #c550ed;
-  --ts-color-fuchsia-700: #9839b8;
-  --ts-color-fuchsia-800: #692481;
-  --ts-color-fuchsia-900: #391247;
-  --ts-color-yellow-50: #fffbf0;
-  --ts-color-yellow-100: #faf4ea;
-  --ts-color-yellow-200: #f2eade;
-  --ts-color-yellow-300: #fce491;
-  --ts-color-yellow-400: #fad860;
-  --ts-color-yellow-500: #ffc328;
-  --ts-color-yellow-600: #f6af47;
-  --ts-color-yellow-700: #ca861e;
-  --ts-color-yellow-800: #956419;
-  --ts-color-yellow-900: #694712;
-  --ts-color-blue-50-rgb: 246, 250, 253;
-  --ts-color-blue-100-rgb: 225, 239, 249;
-  --ts-color-blue-200-rgb: 183, 216, 240;
-  --ts-color-blue-300-rgb: 132, 186, 250;
-  --ts-color-blue-400-rgb: 83, 158, 248;
-  --ts-color-blue-500-rgb: 59, 116, 252;
-  --ts-color-blue-600-rgb: 44, 94, 214;
-  --ts-color-blue-700-rgb: 58, 93, 174;
-  --ts-color-blue-800-rgb: 41, 66, 123;
-  --ts-color-blue-900-rgb: 53, 61, 95;
-  --ts-color-blue-950-rgb: 47, 54, 84;
-  --ts-color-gray-50-rgb: 252, 252, 252;
-  --ts-color-gray-75-rgb: 249, 250, 251;
-  --ts-color-gray-100-rgb: 246, 248, 250;
-  --ts-color-gray-200-rgb: 240, 240, 240;
-  --ts-color-gray-300-rgb: 232, 232, 232;
-  --ts-color-gray-400-rgb: 205, 207, 209;
-  --ts-color-gray-500-rgb: 179, 181, 184;
-  --ts-color-gray-600-rgb: 147, 153, 158;
-  --ts-color-gray-700-rgb: 109, 113, 118;
-  --ts-color-gray-800-rgb: 68, 76, 89;
-  --ts-color-gray-900-rgb: 46, 51, 60;
-  --ts-color-gray-950-rgb: 17, 17, 17;
-  --ts-color-red-100-rgb: 252, 241, 239;
-  --ts-color-red-200-rgb: 247, 215, 210;
-  --ts-color-red-300-rgb: 238, 201, 193;
-  --ts-color-red-400-rgb: 240, 148, 139;
-  --ts-color-red-500-rgb: 246, 87, 71;
-  --ts-color-red-600-rgb: 214, 78, 65;
-  --ts-color-red-700-rgb: 215, 53, 28;
-  --ts-color-red-800-rgb: 185, 46, 24;
-  --ts-color-red-900-rgb: 155, 38, 20;
-  --ts-color-green-100-rgb: 238, 246, 232;
-  --ts-color-green-200-rgb: 212, 232, 195;
-  --ts-color-green-300-rgb: 114, 208, 163;
-  --ts-color-green-400-rgb: 33, 188, 156;
-  --ts-color-green-500-rgb: 23, 166, 136;
-  --ts-color-green-600-rgb: 16, 152, 95;
-  --ts-color-green-700-rgb: 6, 132, 102;
-  --ts-color-green-800-rgb: 22, 78, 62;
-  --ts-color-green-900-rgb: 0, 77, 73;
-  --ts-color-teal-100-rgb: 240, 250, 250;
-  --ts-color-teal-200-rgb: 202, 235, 236;
-  --ts-color-teal-300-rgb: 164, 219, 221;
-  --ts-color-teal-400-rgb: 128, 203, 206;
-  --ts-color-teal-500-rgb: 92, 186, 189;
-  --ts-color-teal-600-rgb: 57, 168, 172;
-  --ts-color-teal-700-rgb: 40, 130, 134;
-  --ts-color-teal-800-rgb: 26, 91, 93;
-  --ts-color-teal-900-rgb: 13, 50, 51;
-  --ts-color-purple-100-rgb: 244, 240, 250;
-  --ts-color-purple-200-rgb: 219, 208, 239;
-  --ts-color-purple-300-rgb: 195, 177, 226;
-  --ts-color-purple-400-rgb: 171, 146, 214;
-  --ts-color-purple-500-rgb: 147, 116, 200;
-  --ts-color-purple-600-rgb: 123, 86, 187;
-  --ts-color-purple-700-rgb: 99, 57, 172;
-  --ts-color-purple-800-rgb: 72, 38, 132;
-  --ts-color-purple-900-rgb: 46, 22, 88;
-  --ts-color-fuchsia-100-rgb: 252, 242, 255;
-  --ts-color-fuchsia-200-rgb: 242, 207, 254;
-  --ts-color-fuchsia-300-rgb: 231, 174, 251;
-  --ts-color-fuchsia-400-rgb: 221, 141, 248;
-  --ts-color-fuchsia-500-rgb: 209, 110, 243;
-  --ts-color-fuchsia-600-rgb: 197, 80, 237;
-  --ts-color-fuchsia-700-rgb: 152, 57, 184;
-  --ts-color-fuchsia-800-rgb: 105, 36, 129;
-  --ts-color-fuchsia-900-rgb: 57, 18, 71;
-  --ts-color-yellow-50-rgb: 255, 251, 240;
-  --ts-color-yellow-100-rgb: 250, 244, 234;
-  --ts-color-yellow-200-rgb: 242, 234, 222;
-  --ts-color-yellow-300-rgb: 252, 228, 145;
-  --ts-color-yellow-400-rgb: 250, 216, 96;
-  --ts-color-yellow-500-rgb: 255, 195, 40;
-  --ts-color-yellow-600-rgb: 246, 175, 71;
-  --ts-color-yellow-700-rgb: 202, 134, 30;
-  --ts-color-yellow-800-rgb: 149, 100, 25;
-  --ts-color-yellow-900-rgb: 105, 71, 18;
-  --ts-color-primary-50: var(--ts-color-blue-50);
-  --ts-color-primary-100: var(--ts-color-blue-100);
-  --ts-color-primary-200: var(--ts-color-blue-200);
-  --ts-color-primary-300: var(--ts-color-blue-300);
-  --ts-color-primary-400: var(--ts-color-blue-400);
-  --ts-color-primary-500: var(--ts-color-blue-500);
-  --ts-color-primary-600: var(--ts-color-blue-600);
-  --ts-color-primary-700: var(--ts-color-blue-700);
-  --ts-color-primary-800: var(--ts-color-blue-800);
-  --ts-color-primary-900: var(--ts-color-blue-900);
-  --ts-color-primary-950: var(--ts-color-blue-950);
-  --ts-color-success-50: var(--ts-color-green-100);
-  --ts-color-success-100: var(--ts-color-green-100);
-  --ts-color-success-200: var(--ts-color-green-200);
-  --ts-color-success-300: var(--ts-color-green-300);
-  --ts-color-success-400: var(--ts-color-green-400);
-  --ts-color-success-500: var(--ts-color-green-500);
-  --ts-color-success-600: var(--ts-color-green-600);
-  --ts-color-success-700: var(--ts-color-green-700);
-  --ts-color-success-800: var(--ts-color-green-800);
-  --ts-color-success-900: var(--ts-color-green-900);
-  --ts-color-success-950: var(--ts-color-green-900);
-  --ts-color-warning-50: var(--ts-color-yellow-50);
-  --ts-color-warning-100: var(--ts-color-yellow-100);
-  --ts-color-warning-200: var(--ts-color-yellow-200);
-  --ts-color-warning-300: var(--ts-color-yellow-300);
-  --ts-color-warning-400: var(--ts-color-yellow-400);
-  --ts-color-warning-500: var(--ts-color-yellow-500);
-  --ts-color-warning-600: var(--ts-color-yellow-600);
-  --ts-color-warning-700: var(--ts-color-yellow-700);
-  --ts-color-warning-800: var(--ts-color-yellow-800);
-  --ts-color-warning-900: var(--ts-color-yellow-900);
-  --ts-color-warning-950: var(--ts-color-yellow-900);
-  --ts-color-danger-50: var(--ts-color-red-50);
-  --ts-color-danger-100: var(--ts-color-red-100);
-  --ts-color-danger-200: var(--ts-color-red-200);
-  --ts-color-danger-300: var(--ts-color-red-300);
-  --ts-color-danger-400: var(--ts-color-red-400);
-  --ts-color-danger-500: var(--ts-color-red-500);
-  --ts-color-danger-600: var(--ts-color-red-600);
-  --ts-color-danger-700: var(--ts-color-red-700);
-  --ts-color-danger-800: var(--ts-color-red-800);
-  --ts-color-danger-900: var(--ts-color-red-900);
-  --ts-color-danger-950: var(--ts-color-red-950);
-  --ts-color-neutral-50: var(--ts-color-gray-50);
-  --ts-color-neutral-100: var(--ts-color-gray-100);
-  --ts-color-neutral-200: var(--ts-color-gray-200);
-  --ts-color-neutral-300: var(--ts-color-gray-300);
-  --ts-color-neutral-400: var(--ts-color-gray-400);
-  --ts-color-neutral-500: var(--ts-color-gray-500);
-  --ts-color-neutral-600: var(--ts-color-gray-600);
-  --ts-color-neutral-700: var(--ts-color-gray-700);
-  --ts-color-neutral-800: var(--ts-color-gray-800);
-  --ts-color-neutral-900: var(--ts-color-gray-900);
-  --ts-color-neutral-950: var(--ts-color-gray-950);
-  --ts-color-neutral-0: var(--ts-color-white);
-  --ts-color-neutral-1000: var(--ts-color-black);
-  /* Semantic colors */
+
+  /**** Semantic colors ****/
   --ts-color-primary: var(--ts-color-blue-700);
   --ts-color-primary-rgb: var(--ts-color-blue-700-rgb);
   --ts-color-default: var(--ts-color-gray-900);
@@ -250,187 +45,99 @@
   --ts-color-text-info: var(--ts-color-primary-600);
   --ts-color-background-info: var(--ts-color-primary-50);
   --ts-color-border-info: var(--ts-color-primary-200);
-  /* Color overrides */
-  --sl-color-primary-50: var(--ts-color-primary-50);
-  --sl-color-primary-100: var(--ts-color-primary-100);
-  --sl-color-primary-200: var(--ts-color-primary-200);
-  --sl-color-primary-300: var(--ts-color-primary-300);
-  --sl-color-primary-400: var(--ts-color-primary-400);
-  --sl-color-primary-500: var(--ts-color-primary-500);
-  --sl-color-primary-600: var(--ts-color-primary-600);
-  --sl-color-primary-700: var(--ts-color-primary-700);
-  --sl-color-primary-800: var(--ts-color-primary-800);
-  --sl-color-primary-900: var(--ts-color-primary-900);
-  --sl-color-primary-950: var(--ts-color-primary-950);
-  --sl-color-success-50: var(--ts-color-success-50);
-  --sl-color-success-100: var(--ts-color-success-100);
-  --sl-color-success-200: var(--ts-color-success-200);
-  --sl-color-success-300: var(--ts-color-success-300);
-  --sl-color-success-400: var(--ts-color-success-400);
-  --sl-color-success-500: var(--ts-color-success-500);
-  --sl-color-success-600: var(--ts-color-success-600);
-  --sl-color-success-700: var(--ts-color-success-700);
-  --sl-color-success-800: var(--ts-color-success-800);
-  --sl-color-success-900: var(--ts-color-success-900);
-  --sl-color-success-950: var(--ts-color-success-950);
-  --sl-color-warning-50: var(--ts-color-warning-50);
-  --sl-color-warning-100: var(--ts-color-warning-100);
-  --sl-color-warning-200: var(--ts-color-warning-200);
-  --sl-color-warning-300: var(--ts-color-warning-300);
-  --sl-color-warning-400: var(--ts-color-warning-400);
-  --sl-color-warning-500: var(--ts-color-warning-500);
-  --sl-color-warning-600: var(--ts-color-warning-600);
-  --sl-color-warning-700: var(--ts-color-warning-700);
-  --sl-color-warning-800: var(--ts-color-warning-800);
-  --sl-color-warning-900: var(--ts-color-warning-900);
-  --sl-color-warning-950: var(--ts-color-warning-950);
-  --sl-color-danger-50: var(--ts-color-danger-50);
-  --sl-color-danger-100: var(--ts-color-danger-100);
-  --sl-color-danger-200: var(--ts-color-danger-200);
-  --sl-color-danger-300: var(--ts-color-danger-300);
-  --sl-color-danger-400: var(--ts-color-danger-400);
-  --sl-color-danger-500: var(--ts-color-danger-500);
-  --sl-color-danger-600: var(--ts-color-danger-600);
-  --sl-color-danger-700: var(--ts-color-danger-700);
-  --sl-color-danger-800: var(--ts-color-danger-800);
-  --sl-color-danger-900: var(--ts-color-danger-900);
-  --sl-color-danger-950: var(--ts-color-danger-950);
-  --sl-color-neutral-50: var(--ts-color-neutral-50);
-  --sl-color-neutral-100: var(--ts-color-neutral-100);
-  --sl-color-neutral-200: var(--ts-color-neutral-200);
-  --sl-color-neutral-300: var(--ts-color-neutral-300);
-  --sl-color-neutral-400: var(--ts-color-neutral-400);
-  --sl-color-neutral-500: var(--ts-color-neutral-500);
-  --sl-color-neutral-600: var(--ts-color-neutral-600);
-  --sl-color-neutral-700: var(--ts-color-neutral-700);
-  --sl-color-neutral-800: var(--ts-color-neutral-800);
-  --sl-color-neutral-900: var(--ts-color-neutral-900);
-  --sl-color-neutral-950: var(--ts-color-neutral-950);
-  --sl-color-neutral-0: var(--ts-color-white);
-  --sl-color-neutral-1000: var(--ts-color-black);
-  --sl-color-teal-100: var(--ts-color-teal-100);
-  --sl-color-teal-200: var(--ts-color-teal-200);
-  --sl-color-teal-300: var(--ts-color-teal-300);
-  --sl-color-teal-400: var(--ts-color-teal-400);
-  --sl-color-teal-500: var(--ts-color-teal-500);
-  --sl-color-teal-600: var(--ts-color-teal-600);
-  --sl-color-teal-700: var(--ts-color-teal-700);
-  --sl-color-teal-800: var(--ts-color-teal-800);
-  --sl-color-teal-900: var(--ts-color-teal-900);
-  --sl-color-purple-100: var(--ts-color-purple-100);
-  --sl-color-purple-200: var(--ts-color-purple-200);
-  --sl-color-purple-300: var(--ts-color-purple-300);
-  --sl-color-purple-400: var(--ts-color-purple-400);
-  --sl-color-purple-500: var(--ts-color-purple-500);
-  --sl-color-purple-600: var(--ts-color-purple-600);
-  --sl-color-purple-700: var(--ts-color-purple-700);
-  --sl-color-purple-800: var(--ts-color-purple-800);
-  --sl-color-purple-900: var(--ts-color-purple-900);
-  --sl-color-fuchsia-100: var(--ts-color-fuchsia-100);
-  --sl-color-fuchsia-200: var(--ts-color-fuchsia-200);
-  --sl-color-fuchsia-300: var(--ts-color-fuchsia-300);
-  --sl-color-fuchsia-400: var(--ts-color-fuchsia-400);
-  --sl-color-fuchsia-500: var(--ts-color-fuchsia-500);
-  --sl-color-fuchsia-600: var(--ts-color-fuchsia-600);
-  --sl-color-fuchsia-700: var(--ts-color-fuchsia-700);
-  --sl-color-fuchsia-800: var(--ts-color-fuchsia-800);
-  --sl-color-fuchsia-900: var(--ts-color-fuchsia-900);
-  color-scheme: light;
-  /** */
-  /** */
+
   /** ***************** **/
   /** Typography        **/
   /** ***************** **/
-  /** */
-  --ts-font-sans: Inter, Helvetica, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --ts-font-serif: 'DM Serif Display', Georgia, Times, serif;
-  --ts-font-mono: 'SFMono-Regular', Menlo, monospace;
-  --ts-font-body: var(--font-sans);
-  --ts-font-display: var(--font-serif);
-  /* font-size */
-  --ts-font-7xl: var(--sl-font-size-4x-large);
+
   /* 72px */
-  --ts-font-6xl: 3.75rem;
+  --ts-font-7xl: var(--sl-font-size-4x-large);
   /* 60px */
-  --ts-font-5xl: var(--sl-font-size-3x-large);
+  --ts-font-6xl: 3.75rem;
   /* 48px */
-  --ts-font-4xl: var(--sl-font-size-2x-large);
+  --ts-font-5xl: var(--sl-font-size-3x-large);
   /* 36px */
-  --ts-font-2xl: var(--sl-font-size-x-large);
+  --ts-font-4xl: var(--sl-font-size-2x-large);
   /* 24px */
-  --ts-font-xl: var(--sl-font-size-large);
+  --ts-font-2xl: var(--sl-font-size-x-large);
   /* 20px */
-  --ts-font-base: var(--sl-font-size-medium);
+  --ts-font-xl: var(--sl-font-size-large);
   /* 16px */
-  --ts-font-sm: var(--sl-font-size-small);
+  --ts-font-base: var(--sl-font-size-medium);
   /* 14px */
-  --ts-font-xs: var(--sl-font-size-x-small);
+  --ts-font-sm: var(--sl-font-size-small);
   /* 12px */
-  /* font-weight */
-  --ts-font-bold: var(--sl-font-weight-bold);
+  --ts-font-xs: var(--sl-font-size-x-small);
+
+  /***** font-weight */
   /* 700 */
-  --ts-font-semibold: 600;
+  --ts-font-bold: var(--sl-font-weight-bold);
   /* 600 */
-  --ts-font-medium: var(--sl-font-weight-semibold);
+  --ts-font-semibold: 600;
   /* 500 */
-  --ts-font-normal: var(--sl-font-weight-normal);
+  --ts-font-medium: var(--sl-font-weight-semibold);
   /* 400 */
-  --ts-font-light: var(--sl-font-weight-light);
+  --ts-font-normal: var(--sl-font-weight-normal);
   /* 300 */
-  /* line-height */
-  --ts-leading-none: var(--sl-line-height-denser);
+  --ts-font-light: var(--sl-font-weight-light);
+
+  /***** line-height */
   /* 1 */
+  --ts-leading-none: var(--sl-line-height-denser);
   --ts-leading-tight: 1.25;
-  --ts-leading-4: 1rem;
   /* 16px */
-  --ts-leading-5: 1.25rem;
+  --ts-leading-4: 1rem;
   /* 20px */
-  --ts-leading-6: 1.5rem;
+  --ts-leading-5: 1.25rem;
   /* 24px */
-  --ts-leading-7: 1.75rem;
+  --ts-leading-6: 1.5rem;
   /* 28px */
-  /* letter-spacing */
+  --ts-leading-7: 1.75rem;
+
+  /***** letter-spacing */
   --sl-letter-spacing-dense: -0.025em;
-  --ts-tracking-tight: var(--sl-letter-spacing-dense);
   /* -0.025em; */
-  --ts-tracking-normal: var(--sl-letter-spacing-normal);
+  --ts-tracking-tight: var(--sl-letter-spacing-dense);
   /* normal */
-  /** */
-  /** */
+  --ts-tracking-normal: var(--sl-letter-spacing-normal);
+
   /** ***************** **/
   /** Miscellaneous     **/
   /** ***************** **/
-  /** */
-  /* Border radius */
-  --ts-border-radius-x-small: 0.25rem;
+
+  /***** Border radius */
   /* 4px for checkbox, tooltip */
-  --ts-border-radius-small: 0.375rem;
+  --ts-border-radius-x-small: 0.25rem;
   /* 6px, for input size small */
-  /* Shadows */
-  --ts-shadow-x-small: 0 0 4px 0 rgb(0 0 0 / 0.04);
+  --ts-border-radius-small: 0.375rem;
+
+  /***** Shadows */
   /* For cards */
-  --ts-shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --ts-shadow-x-small: 0 0 4px 0 rgb(0 0 0 / 0.04);
   /* For inputs */
-  --ts-shadow-medium: 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --ts-shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   /* For toasts */
-  --ts-shadow-large: 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --ts-shadow-medium: 0 8px 10px -6px rgb(0 0 0 / 0.1);
   /* For menus */
-  --ts-shadow-x-large: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --ts-shadow-large: 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 10px 15px -3px rgb(0 0 0 / 0.1);
   /* For modals */
-  /* Spacing */
-  --ts-spacing-large: 1.5rem;
+  --ts-shadow-x-large: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  /***** Spacing */
   /* 24px */
-  --ts-spacing-2x-large: 2rem;
+  --ts-spacing-large: 1.5rem;
   /* 32px */
-  --ts-spacing-4x-large: 4rem;
+  --ts-spacing-2x-large: 2rem;
   /* 64px */
-  /* Input sizes */
-  --ts-input-height-small: 1.75rem;
+  --ts-spacing-4x-large: 4rem;
+
+  /***** Input sizes */
   /* 28px */
-  --ts-input-height-medium: 2.5rem;
+  --ts-input-height-small: 1.75rem;
   /* 40px */
-  --ts-input-height-large: 3rem;
+  --ts-input-height-medium: 2.5rem;
   /* 48px */
-  --ts-input-height-x-large: 4rem;
+  --ts-input-height-large: 3rem;
   /* 64px */
+  --ts-input-height-x-large: 4rem;
 }
diff --git a/src/styles/tokens.json b/src/styles/tokens.json
new file mode 100644
index 0000000000..07fc6577e6
--- /dev/null
+++ b/src/styles/tokens.json
@@ -0,0 +1,126 @@
+{
+  "colors": {
+    "current": "currentColor",
+    "blue": {
+      "50": "#f6fafd",
+      "100": "#e1eff9",
+      "200": "#b7d8f0",
+      "300": "#84bafa",
+      "400": "#539ef8",
+      "500": "#3b74fc",
+      "600": "#2c5ed6",
+      "700": "#3a5dae",
+      "800": "#29427b",
+      "900": "#353d5f",
+      "950": "#2f3654",
+      "1000": "#2f3654"
+    },
+    "gray": {
+      "100": "#f6f8fa",
+      "200": "#f0f0f0",
+      "300": "#e8e8e8",
+      "400": "#cdcfd1",
+      "500": "#b3b5b8",
+      "600": "#93999e",
+      "700": "#6d7176",
+      "800": "#444c59",
+      "900": "#2e333c"
+    },
+    "red": {
+      "100": "#fcf1ef",
+      "200": "#f7d7d2",
+      "300": "#eec9c1",
+      "400": "#f0948b",
+      "500": "#f65747",
+      "600": "#d64e41",
+      "700": "#d7351c",
+      "800": "#b92e18",
+      "900": "#9b2614"
+    },
+    "green": {
+      "100": "#eef6e8",
+      "200": "#d4e8c3",
+      "300": "#72d0a3",
+      "400": "#21bc9c",
+      "500": "#17a688",
+      "600": "#10985f",
+      "700": "#068466",
+      "800": "#164e3e",
+      "900": "#004d49"
+    },
+    "yellow": {
+      "50": "#fffbf0",
+      "100": "#faf4ea",
+      "200": "#f2eade",
+      "300": "#fce491",
+      "400": "#fad860",
+      "500": "#ffc328",
+      "600": "#f6af47",
+      "700": "#ca861e",
+      "800": "#956419",
+      "900": "#694712"
+    },
+    "teal": {
+      "100": "#f0fafa",
+      "200": "#caebec",
+      "300": "#a4dbdd",
+      "400": "#80cbce",
+      "500": "#5cbabd",
+      "600": "#39a8ac",
+      "700": "#288286",
+      "800": "#1a5b5d",
+      "900": "#0d3233"
+    },
+    "purple": {
+      "100": "#f4f0fa",
+      "200": "#dbd0ef",
+      "300": "#c3b1e2",
+      "400": "#ab92d6",
+      "500": "#9374c8",
+      "600": "#7b56bb",
+      "700": "#6339ac",
+      "800": "#482684",
+      "900": "#2e1658"
+    },
+    "fuchsia": {
+      "100": "#fcf2ff",
+      "200": "#f2cffe",
+      "300": "#e7aefb",
+      "400": "#dd8df8",
+      "500": "#d16ef3",
+      "600": "#c550ed",
+      "700": "#9839b8",
+      "800": "#692481",
+      "900": "#391247"
+    },
+    "subdued": "#6d7176",
+    "default": "#2e333c",
+    "white": "#ffffff",
+    "success": "#068466",
+    "error": "#d7351c"
+  },
+  "fontFamily": {
+    "sans": "Inter, Helvetica, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    "serif": "'DM Serif Display', Georgia, Times, serif",
+    "mono": "SFMono-Regular, Menlo, mono",
+    "display": "'DM Serif Display', Georgia, Times, serif",
+    "body": "Inter, Helvetica, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+  },
+  "fontSize": {
+    "10px": ["0.625rem", "1.5em"],
+    "13px": ["0.8125rem", "1.5em"]
+  },
+  "fontWeight": {
+    "light": 300,
+    "normal": 400,
+    "medium": 500,
+    "semibold": 600,
+    "bold": 700
+  },
+  "spacing": {
+    "15": "3.75rem"
+  },
+  "transitionProperty": {
+    "height": "height"
+  }
+}
diff --git a/src/utilities/icon-library.ts b/src/utilities/icon-library.ts
index 1293a56035..a73e25d908 100644
--- a/src/utilities/icon-library.ts
+++ b/src/utilities/icon-library.ts
@@ -1 +1 @@
-export { registerIconLibrary, unregisterIconLibrary } from '../components/icon/library';
+export { registerIconLibrary, unregisterIconLibrary, registerExternalLibraries } from '../components/icon/library';