refactor: migration to skeleton v2

package.json

@@ -14,8 +14,10 @@
 	},
 	"devDependencies": {
 		"@skeletonlabs/skeleton": "^2.0.0",
+		"@skeletonlabs/tw-plugin": "^0.1.0",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.20.4",
+		"@types/node": "^20.5.9",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
 		"autoprefixer": "^10.4.14",
@@ -32,7 +34,8 @@
 		"tailwindcss": "^3.3.2",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
-		"vite": "^4.4.2"
+		"vite": "^4.4.2",
+		"vite-plugin-tailwind-purgecss": "^0.1.3"
 	},
 	"type": "module",
 	"dependencies": {

pnpm-lock.yaml

@@ -37,12 +37,18 @@ devDependencies:
   '@skeletonlabs/skeleton':
     specifier: ^2.0.0
     version: 2.0.0(svelte@4.1.0)
+  '@skeletonlabs/tw-plugin':
+    specifier: ^0.1.0
+    version: 0.1.0(tailwindcss@3.3.3)
   '@sveltejs/adapter-auto':
     specifier: ^2.0.0
     version: 2.1.0(@sveltejs/kit@1.22.3)
   '@sveltejs/kit':
     specifier: ^1.20.4
     version: 1.22.3(svelte@4.1.0)(vite@4.4.4)
+  '@types/node':
+    specifier: ^20.5.9
+    version: 20.5.9
   '@typescript-eslint/eslint-plugin':
     specifier: ^6.0.0
     version: 6.2.0(@typescript-eslint/parser@6.2.0)(eslint@8.45.0)(typescript@5.1.6)
@@ -93,7 +99,10 @@ devDependencies:
     version: 5.1.6
   vite:
     specifier: ^4.4.2
-    version: 4.4.4
+    version: 4.4.4(@types/node@20.5.9)
+  vite-plugin-tailwind-purgecss:
+    specifier: ^0.1.3
+    version: 0.1.3(vite@4.4.4)
 
 packages:
 
@@ -431,6 +440,14 @@ packages:
       svelte: 4.1.0
     dev: true
 
+  /@skeletonlabs/tw-plugin@0.1.0(tailwindcss@3.3.3):
+    resolution: {integrity: sha512-ufnm4FS+s/khuho4yJ/uqfW91u2YXnH3E5N541MtX9XjmoimQzYIcxWyTIuX9AM/brIPP6M6l0et3nRx17CRoQ==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0'
+    dependencies:
+      tailwindcss: 3.3.3
+    dev: true
+
   /@sveltejs/adapter-auto@2.1.0(@sveltejs/kit@1.22.3):
     resolution: {integrity: sha512-o2pZCfATFtA/Gw/BB0Xm7k4EYaekXxaPGER3xGSY3FvzFJGTlJlZjBseaXwYSM94lZ0HniOjTokN3cWaLX6fow==}
     peerDependencies:
@@ -462,7 +479,7 @@ packages:
       sirv: 2.0.3
       svelte: 4.1.0
       undici: 5.22.1
-      vite: 4.4.4
+      vite: 4.4.4(@types/node@20.5.9)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -478,7 +495,7 @@ packages:
       '@sveltejs/vite-plugin-svelte': 2.4.2(svelte@4.1.0)(vite@4.4.4)
       debug: 4.3.4
       svelte: 4.1.0
-      vite: 4.4.4
+      vite: 4.4.4(@types/node@20.5.9)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -497,7 +514,7 @@ packages:
       magic-string: 0.30.1
       svelte: 4.1.0
       svelte-hmr: 0.15.2(svelte@4.1.0)
-      vite: 4.4.4
+      vite: 4.4.4(@types/node@20.5.9)
       vitefu: 0.2.4(vite@4.4.4)
     transitivePeerDependencies:
       - supports-color
@@ -579,6 +596,10 @@ packages:
     resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==}
     dev: true
 
+  /@types/node@20.5.9:
+    resolution: {integrity: sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==}
+    dev: true
+
   /@types/pug@2.0.6:
     resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
     dev: true
@@ -866,6 +887,12 @@ packages:
       concat-map: 0.0.1
     dev: true
 
+  /brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: true
+
   /braces@3.0.2:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
     engines: {node: '>=8'}
@@ -976,6 +1003,11 @@ packages:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
     dev: true
 
+  /commander@10.0.1:
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+    engines: {node: '>=14'}
+    dev: true
+
   /commander@11.0.0:
     resolution: {integrity: sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ==}
     engines: {node: '>=16'}
@@ -1414,6 +1446,17 @@ packages:
       path-is-absolute: 1.0.1
     dev: true
 
+  /glob@8.1.0:
+    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 5.1.6
+      once: 1.4.0
+    dev: true
+
   /globals@13.20.0:
     resolution: {integrity: sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==}
     engines: {node: '>=8'}
@@ -1732,6 +1775,13 @@ packages:
       brace-expansion: 1.1.11
     dev: true
 
+  /minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
     dev: true
@@ -2055,6 +2105,16 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /purgecss@6.0.0-alpha.0:
+    resolution: {integrity: sha512-UC7d7uIyZsky+srEsSXny9BkbTcVn3ZtBCNX3rW3DsqJKhvUXFRpufA4ktcHzWF0+JLZgmsqjUm/8R82x9bHpw==}
+    hasBin: true
+    dependencies:
+      commander: 10.0.1
+      glob: 8.1.0
+      postcss: 8.4.26
+      postcss-selector-parser: 6.0.13
+    dev: true
+
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
@@ -2568,7 +2628,17 @@ packages:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
 
-  /vite@4.4.4:
+  /vite-plugin-tailwind-purgecss@0.1.3(vite@4.4.4):
+    resolution: {integrity: sha512-VVz9fwKBEEFSbj/rKxtwtczvoSrIqbzbo6S+MT7gH0CsmKNwlx947VMoV8B085ocxGCuFlddOPRDszNXLi2nTQ==}
+    peerDependencies:
+      vite: ^4.1.1
+    dependencies:
+      estree-walker: 3.0.3
+      purgecss: 6.0.0-alpha.0
+      vite: 4.4.4(@types/node@20.5.9)
+    dev: true
+
+  /vite@4.4.4(@types/node@20.5.9):
     resolution: {integrity: sha512-4mvsTxjkveWrKDJI70QmelfVqTm+ihFAb6+xf4sjEU2TmUCTlVX87tmg/QooPEMQb/lM9qGHT99ebqPziEd3wg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -2596,6 +2666,7 @@ packages:
       terser:
         optional: true
     dependencies:
+      '@types/node': 20.5.9
       esbuild: 0.18.14
       postcss: 8.4.26
       rollup: 3.26.3
@@ -2611,7 +2682,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 4.4.4
+      vite: 4.4.4(@types/node@20.5.9)
     dev: true
 
   /web-vitals@3.4.0:

src/app.html

@@ -14,7 +14,7 @@
 		<title></title>
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover">
+	<body data-sveltekit-preload-data="hover" data-theme="theme">
 		<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
 	</body>
 </html>

src/app.postcss

@@ -1,3 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+
 html,
 body {
 	@apply h-full overflow-hidden;

src/lib/components/Header.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
-	import { AppBar, LightSwitch, ProgressBar, drawerStore } from '@skeletonlabs/skeleton';
+	import { AppBar, LightSwitch, ProgressBar } from '@skeletonlabs/skeleton';
+	import { getDrawerStore, type DrawerSettings } from '@skeletonlabs/skeleton';
 	import GitHub from './icons/GitHub.svelte';
 	import Hamburger from './icons/Hamburger.svelte';
 	import LinkedIn from './icons/LinkedIn.svelte';
 	import routes from '$lib/routes';
 	import { page } from '$app/stores';
-	$: classesActive = (href: string) => (href === $page.url.pathname ? 'underline' : '');
+	const drawerStore = getDrawerStore();
 	export let progress: number;
 
-	function drawerOpen(): void {
+	$: classesActive = (href: string) => (href === $page.url.pathname ? 'underline' : '');
-		drawerStore.open();
+
+	function trigger(position: 'right'): void {
+		const s: DrawerSettings = { id: 'navigation', position };
+		drawerStore.open(s);
 	}
 </script>
 
@@ -59,7 +63,9 @@
 		<button
 			aria-label="Toggle navigation menu"
 			class="btn-icon btn-icon-sm hover:variant-soft-primary md:hidden"
-			on:click={drawerOpen}
+			on:click={() => {
+				trigger('right');
+			}}
 		>
 			<Hamburger />
 		</button>

src/lib/components/Navigation.svelte

@@ -1,23 +1,27 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import type { Route } from '$lib/routes';
-	import { drawerStore } from '@skeletonlabs/skeleton';
+	import { getDrawerStore } from '@skeletonlabs/skeleton';
+	const drawerStore = getDrawerStore();
+
 	$: classesActive = (href: string) =>
-		href === $page.url.pathname ? '!bg-primary-500 text-indigo-100' : '';
+		href === $page.url.pathname ? '!bg-secondary-500 text-indigo-100' : '';
 
 	export let routes: Route[];
-
-	function drawerClose(): void {
-		drawerStore.close();
-	}
 </script>
 
 <nav class="list-nav">
 	<ul>
 		{#each routes as route}
 			<li class="mb-2">
-				<a class={classesActive(route.url)} href={route.url} on:click={drawerClose}>
+				<a
-					<span class="badge bg-primary-500"
+					class={classesActive(route.url)}
+					href={route.url}
+					on:click={() => {
+						drawerStore.close();
+					}}
+				>
+					<span class="badge bg-secondary-500"
 						><svg
 							xmlns="http://www.w3.org/2000/svg"
 							width="24"
@@ -33,7 +37,7 @@
 					>
 					<span class="flex-auto">{route.label}</span>
 				</a>
-			</li>{/each}
+			</li>
-		<!-- ... -->
+		{/each}
 	</ul>
 </nav>

src/routes/+layout.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-	// import '@skeletonlabs/skeleton/themes/theme-crimson.css';
+	import { Drawer, AppShell, initializeStores } from '@skeletonlabs/skeleton';
-	import '../theme.postcss';
+	initializeStores();
-	import '@skeletonlabs/skeleton/styles/skeleton.css';
 	import '../app.postcss';
-	import { AppShell, Drawer } from '@skeletonlabs/skeleton';
 	import Footer from '../lib/components/Footer.svelte';
 	import Navigation from '../lib/components/Navigation.svelte';
 	import Header from '$lib/components/Header.svelte';
@@ -37,7 +35,7 @@
 	}
 </script>
 
-<Drawer width="w-[280px] md:w-[200px]" position="right" bgDrawer="bg-gray-200 dark:bg-gray-800">
+<Drawer width="w-[280px] md:w-[200px]" position="right" bgDrawer="bg-black/30 backdrop-blur">
 	<div class="p-5 w-full mx-auto">
 		<h2 class="text-3xl font-bold mb-12 z-10 text-center">Pages</h2>
 		<Navigation {routes} />

src/theme.postcss

@@ -1,96 +0,0 @@
-:root {
-	/* =~= Theme Properties =~= */
-	--theme-font-family-base: system-ui;
-	--theme-font-family-heading: system-ui;
-	--theme-font-color-base: 0 0 0;
-	--theme-font-color-dark: 255 255 255;
-	--theme-rounded-base: 9999px;
-	--theme-rounded-container: 8px;
-	--theme-border-base: 1px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 255 255 255;
-	--on-secondary: 0 0 0;
-	--on-tertiary: 0 0 0;
-	--on-success: 0 0 0;
-	--on-warning: 0 0 0;
-	--on-error: 255 255 255;
-	--on-surface: 255 255 255;
-	/* =~= Theme Colors  =~= */
-	/* primary | #3833a5 */
-	--color-primary-50: 225 224 242; /* ⬅ #e1e0f2 */
-	--color-primary-100: 215 214 237; /* ⬅ #d7d6ed */
-	--color-primary-200: 205 204 233; /* ⬅ #cdcce9 */
-	--color-primary-300: 175 173 219; /* ⬅ #afaddb */
-	--color-primary-400: 116 112 192; /* ⬅ #7470c0 */
-	--color-primary-500: 56 51 165; /* ⬅ #3833a5 */
-	--color-primary-600: 50 46 149; /* ⬅ #322e95 */
-	--color-primary-700: 42 38 124; /* ⬅ #2a267c */
-	--color-primary-800: 34 31 99; /* ⬅ #221f63 */
-	--color-primary-900: 27 25 81; /* ⬅ #1b1951 */
-	/* secondary | #0FBA81 */
-	--color-secondary-50: 219 245 236; /* ⬅ #dbf5ec */
-	--color-secondary-100: 207 241 230; /* ⬅ #cff1e6 */
-	--color-secondary-200: 195 238 224; /* ⬅ #c3eee0 */
-	--color-secondary-300: 159 227 205; /* ⬅ #9fe3cd */
-	--color-secondary-400: 87 207 167; /* ⬅ #57cfa7 */
-	--color-secondary-500: 15 186 129; /* ⬅ #0FBA81 */
-	--color-secondary-600: 14 167 116; /* ⬅ #0ea774 */
-	--color-secondary-700: 11 140 97; /* ⬅ #0b8c61 */
-	--color-secondary-800: 9 112 77; /* ⬅ #09704d */
-	--color-secondary-900: 7 91 63; /* ⬅ #075b3f */
-	/* tertiary | #0EA5E9 */
-	--color-tertiary-50: 219 242 252; /* ⬅ #dbf2fc */
-	--color-tertiary-100: 207 237 251; /* ⬅ #cfedfb */
-	--color-tertiary-200: 195 233 250; /* ⬅ #c3e9fa */
-	--color-tertiary-300: 159 219 246; /* ⬅ #9fdbf6 */
-	--color-tertiary-400: 86 192 240; /* ⬅ #56c0f0 */
-	--color-tertiary-500: 14 165 233; /* ⬅ #0EA5E9 */
-	--color-tertiary-600: 13 149 210; /* ⬅ #0d95d2 */
-	--color-tertiary-700: 11 124 175; /* ⬅ #0b7caf */
-	--color-tertiary-800: 8 99 140; /* ⬅ #08638c */
-	--color-tertiary-900: 7 81 114; /* ⬅ #075172 */
-	/* success | #84cc16 */
-	--color-success-50: 237 247 220; /* ⬅ #edf7dc */
-	--color-success-100: 230 245 208; /* ⬅ #e6f5d0 */
-	--color-success-200: 224 242 197; /* ⬅ #e0f2c5 */
-	--color-success-300: 206 235 162; /* ⬅ #ceeba2 */
-	--color-success-400: 169 219 92; /* ⬅ #a9db5c */
-	--color-success-500: 132 204 22; /* ⬅ #84cc16 */
-	--color-success-600: 119 184 20; /* ⬅ #77b814 */
-	--color-success-700: 99 153 17; /* ⬅ #639911 */
-	--color-success-800: 79 122 13; /* ⬅ #4f7a0d */
-	--color-success-900: 65 100 11; /* ⬅ #41640b */
-	/* warning | #EAB308 */
-	--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
-	--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
-	--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
-	--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
-	--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
-	--color-warning-500: 234 179 8; /* ⬅ #EAB308 */
-	--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
-	--color-warning-700: 176 134 6; /* ⬅ #b08606 */
-	--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
-	--color-warning-900: 115 88 4; /* ⬅ #735804 */
-	/* error | #D41976 */
-	--color-error-50: 249 221 234; /* ⬅ #f9ddea */
-	--color-error-100: 246 209 228; /* ⬅ #f6d1e4 */
-	--color-error-200: 244 198 221; /* ⬅ #f4c6dd */
-	--color-error-300: 238 163 200; /* ⬅ #eea3c8 */
-	--color-error-400: 225 94 159; /* ⬅ #e15e9f */
-	--color-error-500: 212 25 118; /* ⬅ #D41976 */
-	--color-error-600: 191 23 106; /* ⬅ #bf176a */
-	--color-error-700: 159 19 89; /* ⬅ #9f1359 */
-	--color-error-800: 127 15 71; /* ⬅ #7f0f47 */
-	--color-error-900: 104 12 58; /* ⬅ #680c3a */
-	/* surface | #141a26 */
-	--color-surface-50: 220 221 222; /* ⬅ #dcddde */
-	--color-surface-100: 208 209 212; /* ⬅ #d0d1d4 */
-	--color-surface-200: 196 198 201; /* ⬅ #c4c6c9 */
-	--color-surface-300: 161 163 168; /* ⬅ #a1a3a8 */
-	--color-surface-400: 91 95 103; /* ⬅ #5b5f67 */
-	--color-surface-500: 20 26 38; /* ⬅ #141a26 */
-	--color-surface-600: 18 23 34; /* ⬅ #121722 */
-	--color-surface-700: 15 20 29; /* ⬅ #0f141d */
-	--color-surface-800: 12 16 23; /* ⬅ #0c1017 */
-	--color-surface-900: 10 13 19; /* ⬅ #0a0d13 */
-}

tailwind.config.ts

@@ -1,10 +1,13 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
+import { join } from 'path';
-/** @type {import('tailwindcss').Config} */
+import type { Config } from 'tailwindcss';
-module.exports = {
+import { theme } from './theme';
+import { skeleton } from '@skeletonlabs/tw-plugin';
+
+const config = {
 	darkMode: 'class',
 	content: [
 		'./src/**/*.{html,js,svelte,ts}',
-		require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
+		join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
 	],
 	theme: {
 		extend: {
@@ -28,5 +31,13 @@ module.exports = {
 			}
 		}
 	},
-	plugins: [...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()]
+	plugins: [
-};
+		skeleton({
+			themes: {
+				custom: [theme]
+			}
+		})
+	]
+} satisfies Config;
+
+export default config;

theme.ts

@@ -0,0 +1,101 @@
+import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
+
+export const theme: CustomThemeConfig = {
+	name: 'theme',
+	properties: {
+		// =~= Theme Properties =~=
+		'--theme-font-family-base': 'system-ui',
+		'--theme-font-family-heading': 'system-ui',
+		'--theme-font-color-base': '0 0 0',
+		'--theme-font-color-dark': '255 255 255',
+		'--theme-rounded-base': '6px',
+		'--theme-rounded-container': '8px',
+		'--theme-border-base': '1px',
+		// =~= Theme On-X Colors =~=
+		'--on-primary': '0 0 0',
+		'--on-secondary': '255 255 255',
+		'--on-tertiary': '0 0 0',
+		'--on-success': '0 0 0',
+		'--on-warning': '0 0 0',
+		'--on-error': '255 255 255',
+		'--on-surface': '255 255 255',
+		// =~= Theme Colors  =~=
+		// primary | #4F46E5
+		'--color-primary-50': '229 227 251', // #e5e3fb
+		'--color-primary-100': '220 218 250', // #dcdafa
+		'--color-primary-200': '211 209 249', // #d3d1f9
+		'--color-primary-300': '185 181 245', // #b9b5f5
+		'--color-primary-400': '132 126 237', // #847eed
+		'--color-primary-500': '79 70 229', // #4F46E5
+		'--color-primary-600': '71 63 206', // #473fce
+		'--color-primary-700': '59 53 172', // #3b35ac
+		'--color-primary-800': '47 42 137', // #2f2a89
+		'--color-primary-900': '39 34 112', // #272270
+		// secondary | #0cb79e
+		'--color-secondary-50': '219 244 240', // #dbf4f0
+		'--color-secondary-100': '206 241 236', // #cef1ec
+		'--color-secondary-200': '194 237 231', // #c2ede7
+		'--color-secondary-300': '158 226 216', // #9ee2d8
+		'--color-secondary-400': '85 205 187', // #55cdbb
+		'--color-secondary-500': '12 183 158', // #0cb79e
+		'--color-secondary-600': '11 165 142', // #0ba58e
+		'--color-secondary-700': '9 137 119', // #098977
+		'--color-secondary-800': '7 110 95', // #076e5f
+		'--color-secondary-900': '6 90 77', // #065a4d
+		// tertiary | #0ea5e9
+		'--color-tertiary-50': '219 242 252', // #dbf2fc
+		'--color-tertiary-100': '207 237 251', // #cfedfb
+		'--color-tertiary-200': '195 233 250', // #c3e9fa
+		'--color-tertiary-300': '159 219 246', // #9fdbf6
+		'--color-tertiary-400': '86 192 240', // #56c0f0
+		'--color-tertiary-500': '14 165 233', // #0ea5e9
+		'--color-tertiary-600': '13 149 210', // #0d95d2
+		'--color-tertiary-700': '11 124 175', // #0b7caf
+		'--color-tertiary-800': '8 99 140', // #08638c
+		'--color-tertiary-900': '7 81 114', // #075172
+		// success | #84cc16
+		'--color-success-50': '237 247 220', // #edf7dc
+		'--color-success-100': '230 245 208', // #e6f5d0
+		'--color-success-200': '224 242 197', // #e0f2c5
+		'--color-success-300': '206 235 162', // #ceeba2
+		'--color-success-400': '169 219 92', // #a9db5c
+		'--color-success-500': '132 204 22', // #84cc16
+		'--color-success-600': '119 184 20', // #77b814
+		'--color-success-700': '99 153 17', // #639911
+		'--color-success-800': '79 122 13', // #4f7a0d
+		'--color-success-900': '65 100 11', // #41640b
+		// warning | #EAB308
+		'--color-warning-50': '252 244 218', // #fcf4da
+		'--color-warning-100': '251 240 206', // #fbf0ce
+		'--color-warning-200': '250 236 193', // #faecc1
+		'--color-warning-300': '247 225 156', // #f7e19c
+		'--color-warning-400': '240 202 82', // #f0ca52
+		'--color-warning-500': '234 179 8', // #EAB308
+		'--color-warning-600': '211 161 7', // #d3a107
+		'--color-warning-700': '176 134 6', // #b08606
+		'--color-warning-800': '140 107 5', // #8c6b05
+		'--color-warning-900': '115 88 4', // #735804
+		// error | #D41976
+		'--color-error-50': '249 221 234', // #f9ddea
+		'--color-error-100': '246 209 228', // #f6d1e4
+		'--color-error-200': '244 198 221', // #f4c6dd
+		'--color-error-300': '238 163 200', // #eea3c8
+		'--color-error-400': '225 94 159', // #e15e9f
+		'--color-error-500': '212 25 118', // #D41976
+		'--color-error-600': '191 23 106', // #bf176a
+		'--color-error-700': '159 19 89', // #9f1359
+		'--color-error-800': '127 15 71', // #7f0f47
+		'--color-error-900': '104 12 58', // #680c3a
+		// surface | #050609
+		'--color-surface-50': '218 218 218', // #dadada
+		'--color-surface-100': '205 205 206', // #cdcdce
+		'--color-surface-200': '193 193 194', // #c1c1c2
+		'--color-surface-300': '155 155 157', // #9b9b9d
+		'--color-surface-400': '80 81 83', // #505153
+		'--color-surface-500': '5 6 9', // #050609
+		'--color-surface-600': '5 5 8', // #050508
+		'--color-surface-700': '4 5 7', // #040507
+		'--color-surface-800': '3 4 5', // #030405
+		'--color-surface-900': '2 3 4' // #020304
+	}
+};