From c694f294787193cbc45d88e76d7a003827c15ff0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Pichon?= <jeremie.pichon@genesys.com>
Date: Mon, 26 Aug 2024 14:20:35 +0200
Subject: [PATCH] refactor: renaming primer theme variables

---
 docs/.vitepress/config.ts                     |   1 -
 docs/src/components/playground/blankslate.vue |   3 -
 docs/src/components/playground/layout.vue     | 124 ------
 docs/src/guide/components/avatar.md           |   2 -
 docs/src/guide/components/button.md           |   2 -
 docs/src/guide/components/layout.md           |  97 -----
 package-lock.json                             |   2 +
 packages/@slithe/primer/package.json          |   1 +
 .../primer/src/components/action-divider.scss |  10 +-
 .../primer/src/components/action-group.scss   |  10 +-
 .../@slithe/primer/src/components/action.scss |  53 +--
 .../primer/src/components/actions.scss        |   6 -
 .../@slithe/primer/src/components/avatar.scss |  14 +-
 .../primer/src/components/blankslate.scss     |  18 +-
 .../primer/src/components/breadcrumb.scss     |  21 +-
 .../@slithe/primer/src/components/button.scss | 250 ++++--------
 .../@slithe/primer/src/components/card.scss   |  67 ++--
 .../@slithe/primer/src/components/flash.scss  |  79 ++--
 .../primer/src/components/form-control.scss   |  22 +-
 .../@slithe/primer/src/components/hud.scss    |  39 +-
 .../primer/src/components/input-checkbox.scss |  39 +-
 .../primer/src/components/input-number.scss   |  56 ++-
 .../primer/src/components/input-text.scss     |  56 ++-
 .../primer/src/components/keyboard.scss       |  24 +-
 .../@slithe/primer/src/components/layout.scss | 102 -----
 .../primer/src/components/popover.scss        |  17 +-
 .../@slithe/primer/src/components/rel.scss    |   1 +
 .../primer/src/components/spinner.scss        |   2 +
 .../primer/src/components/splitter.scss       |  23 +-
 .../@slithe/primer/src/components/tab.scss    |  64 ++--
 .../@slithe/primer/src/components/tabs.scss   |  28 +-
 .../primer/src/components/tooltip.scss        |  23 +-
 packages/@slithe/primer/src/global.css        |   3 -
 packages/@slithe/primer/src/index.ts          |  16 +-
 packages/@slithe/primer/src/variables.css     | 177 ++++++---
 .../src/components/sl-avatar/sl-avatar.tsx    |   6 +-
 .../src/components/sl-button/sl-button.tsx    |   1 -
 .../slithe/src/components/sl-icon/sl-icon.tsx |   4 +-
 .../src/components/sl-layout/sl-layout.e2e.ts |  11 -
 .../components/sl-layout/sl-layout.spec.ts    |  13 -
 .../src/components/sl-layout/sl-layout.tsx    | 318 ----------------
 packages/slithe/src/helpers/dom.ts            | 198 ----------
 packages/slithe/src/helpers/model.ts          | 355 ------------------
 packages/slithe/src/helpers/theme.ts          |  27 +-
 packages/slithe/src/index.ts                  |   3 +-
 45 files changed, 496 insertions(+), 1892 deletions(-)
 delete mode 100644 docs/src/components/playground/layout.vue
 delete mode 100644 docs/src/guide/components/layout.md
 delete mode 100644 packages/@slithe/primer/src/components/layout.scss
 delete mode 100644 packages/slithe/src/components/sl-layout/sl-layout.e2e.ts
 delete mode 100644 packages/slithe/src/components/sl-layout/sl-layout.spec.ts
 delete mode 100644 packages/slithe/src/components/sl-layout/sl-layout.tsx
 delete mode 100644 packages/slithe/src/helpers/model.ts

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 9681dd5..1300a69 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -71,7 +71,6 @@ export default defineConfig({
 						{ text: 'Flash', link: '/guide/components/flash' },
 						{ text: 'Icon', link: '/guide/components/icon' },
 						{ text: 'Keyboard', link: '/guide/components/keyboard' },
-						{ text: 'Layout', link: '/guide/components/layout' },
 						{ text: 'Popover', link: '/guide/components/popover' },
 						{ text: 'Splitter', link: '/guide/components/splitter' },
 						{ text: 'Spinner', link: '/guide/components/spinner' },
diff --git a/docs/src/components/playground/blankslate.vue b/docs/src/components/playground/blankslate.vue
index 3a33f6d..b375ec3 100644
--- a/docs/src/components/playground/blankslate.vue
+++ b/docs/src/components/playground/blankslate.vue
@@ -40,9 +40,6 @@
       width: 60%;
       > sl-blankslate {
         width: 100%;
-        sl-icon {
-          color: var(--pr-cornflower-blue);
-        }
       }
     }
     > sl-form {
diff --git a/docs/src/components/playground/layout.vue b/docs/src/components/playground/layout.vue
deleted file mode 100644
index 223e11f..0000000
--- a/docs/src/components/playground/layout.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<script lang="ts" setup>
-  // Helpers
-  import { ref } from 'vue';
-  import { SlButton, SlIcon, SlLayout } from '@slithe/vue';
-  // Constants
-  const storedModel = localStorage?.getItem('slithe.playground.layout.model');
-  const defaultModel = {
-    type: 'splitter',
-    direction: 'horizontal',
-    blueSize: 30,
-    minBlue: 20,
-    items: [
-      {
-        type: 'tabs',
-        splittable: false,
-        droppable: false,
-        items: [
-          {
-            name: 'View 0',
-            viewSlot: 'view0',
-            closable: true
-          }
-        ]
-      },
-      {
-        type: 'splitter',
-        direction: 'vertical',
-        items: [
-          {
-            type: 'tabs',
-            items: [
-              {
-                name: 'View 1',
-                viewSlot: 'view1'
-              },
-              {
-                name: 'View 2',
-                viewSlot: 'view2'
-              }
-            ]
-          },
-          {
-            type: 'tabs',
-            items: [
-              {
-                name: 'Iframe',
-                viewSlot: 'iframe',
-                draggable: false
-              },
-              {
-                name: 'View 3',
-                viewSlot: 'view3',
-                active: true,
-                closable: true
-              },
-              {
-                name: 'View 4',
-                viewSlot: 'view4',
-                closable: true
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  };
-  // State
-  const render = ref(0);
-  const model = ref(storedModel ? JSON.parse(storedModel) : defaultModel);
-  // Methods
-  function reset () {
-    localStorage.removeItem('slithe.playground.layout.model');
-    model.value = defaultModel;
-    render.value++;
-  }
-  function onUpdate (e: CustomEvent) {
-    if (localStorage) {
-      localStorage.setItem('slithe.playground.layout.model', JSON.stringify(e.detail));
-    }
-  }
-</script>
-
-<template>
-  <div class="playground-layout">
-    <SlButton class="reset" small borderless @click="reset">
-      <SlIcon name="sync"/>
-    </SlButton>
-    <SlLayout :key="render" :model.prop="model" @update="onUpdate">
-      <div class="slot-content" slot="iframe">
-        <iframe src="/iframe.html"/>
-      </div>
-      <div class="slot-content" slot="view0">View 0 (Content)</div>
-      <div class="slot-content" slot="view1">View 1 (Content)</div>
-      <div class="slot-content" slot="view2">View 2 (Content)</div>
-      <div class="slot-content" slot="view3">View 3 (Content)</div>
-      <div class="slot-content" slot="view4">View 4 (Content)</div>
-    </SlLayout>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  div.playground-layout {
-    position: relative;
-    height: 400px;
-    padding-top: 15px;
-    > sl-button.reset {
-      position: absolute;
-      top: -1.5em;
-      right: -1.5em;
-    }
-    > sl-layout {
-      height: 400px;
-      > div.slot-content {
-        height: 100%;
-        > iframe {
-          display: block;
-          height: 100%;
-          width: 100%;
-          border: none;
-        }
-      }
-    }
-  }
-</style>
diff --git a/docs/src/guide/components/avatar.md b/docs/src/guide/components/avatar.md
index 324b8d0..2824fc5 100644
--- a/docs/src/guide/components/avatar.md
+++ b/docs/src/guide/components/avatar.md
@@ -8,13 +8,11 @@ A `sl-avatar` component shows an image that usually represent a user or known en
 
 <Preview>
   <sl-avatar name="John Doe"/>
-  <sl-avatar name="John Doe" background="#4A4052"/>
   <sl-avatar name="Slithe" src="/favicon.svg"/>
 </Preview>
 
 ``` html
 <sl-avatar name="John Doe"/>
-<sl-avatar name="John Doe" background="#4A4052"/>
 <sl-avatar name="Slithe" src="/favicon.svg"/>
 ```
 
diff --git a/docs/src/guide/components/button.md b/docs/src/guide/components/button.md
index 043c6f4..1d0d0a5 100644
--- a/docs/src/guide/components/button.md
+++ b/docs/src/guide/components/button.md
@@ -32,7 +32,6 @@ Size defaults to `medium`.
 <Preview title="Variants">
   <sl-button>Default</sl-button>
   <sl-button primary>Primary</sl-button>
-  <sl-button outline>Outline</sl-button>
   <sl-button danger>Danger</sl-button>
   <sl-button borderless>Borderless</sl-button>
   <sl-button link>Link</sl-button>
@@ -50,7 +49,6 @@ Size defaults to `medium`.
 <!-- Variants -->
 <sl-button>Default</sl-button>
 <sl-button primary>Primary</sl-button>
-<sl-button outline>Outline</sl-button>
 <sl-button danger>Danger</sl-button>
 <sl-button borderless>Borderless</sl-button>
 <!-- Size -->
diff --git a/docs/src/guide/components/layout.md b/docs/src/guide/components/layout.md
deleted file mode 100644
index 714d1f6..0000000
--- a/docs/src/guide/components/layout.md
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup>
-  import { defineClientComponent } from 'vitepress';
-	import Preview from '../../components/preview.vue';
-
-  const PlaygroundLayout = defineClientComponent(() => {
-    return import('../../components/playground/layout.vue')
-  });
-</script>
-
-# Layout
-
-A `sl-layout` component provides a way to create a fully customizable app layout.
-
-## Slots
-
-The component includes multiple slots to cover various layouts.
-
-<Preview title="Playground">
-  <PlaygroundLayout/>
-</Preview>
-
-``` typescript
-// Initial Model - Then Saved to localStorage
-const model = {
-  type: 'splitter',
-  direction: 'horizontal',
-  blueSize: 30,
-  minBlue: 20,
-  items: [
-    {
-      type: 'tabs',
-      splittable: false,
-      droppable: false,
-      items: [
-        {
-          name: 'View 0',
-          viewSlot: 'view0',
-          closable: true
-        }
-      ]
-    },
-    {
-      type: 'splitter',
-      direction: 'vertical',
-      items: [
-        {
-          type: 'tabs',
-          items: [
-            {
-              name: 'View 1',
-              viewSlot: 'view1'
-            },
-            {
-              name: 'View 2',
-              viewSlot: 'view2'
-            }
-          ]
-        },
-        {
-          type: 'tabs',
-          items: [
-            {
-              name: 'Iframe',
-              viewSlot: 'iframe',
-              draggable: false
-            },
-            {
-              name: 'View 3',
-              viewSlot: 'view3',
-              active: true,
-              closable: true
-            },
-            {
-              name: 'View 4',
-              viewSlot: 'view4',
-              closable: true
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-```
-
-``` html
-<sl-layout>
-  <div slot="iframe">
-    <iframe src="https://bing.com"/>
-  </div>
-  <div slot="view0">View 0 (Content)</div>
-  <div slot="view1">View 1 (Content)</div>
-  <div slot="view2">View 2 (Content)</div>
-  <div slot="view3">View 3 (Content)</div>
-  <div slot="view4">View 4 (Content)</div>
-</sl-layout>
-```
diff --git a/package-lock.json b/package-lock.json
index 7df0af6..436a673 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20157,6 +20157,7 @@
         "@types/primer__octicons": "^17.5.0",
         "eslint": "^8.56.0",
         "sass": "^1.69.5",
+        "slithe": "*",
         "vite": "^5.0.11"
       }
     },
@@ -26636,6 +26637,7 @@
         "@types/primer__octicons": "^17.5.0",
         "eslint": "^8.56.0",
         "sass": "^1.69.5",
+        "slithe": "*",
         "vite": "^5.0.11"
       },
       "dependencies": {
diff --git a/packages/@slithe/primer/package.json b/packages/@slithe/primer/package.json
index 3e33928..b7337f6 100644
--- a/packages/@slithe/primer/package.json
+++ b/packages/@slithe/primer/package.json
@@ -40,6 +40,7 @@
     "@types/primer__octicons": "^17.5.0",
     "eslint": "^8.56.0",
     "sass": "^1.69.5",
+    "slithe": "*",
     "vite": "^5.0.11"
   },
   "license": "MIT"
diff --git a/packages/@slithe/primer/src/components/action-divider.scss b/packages/@slithe/primer/src/components/action-divider.scss
index ef7dfb2..6920763 100644
--- a/packages/@slithe/primer/src/components/action-divider.scss
+++ b/packages/@slithe/primer/src/components/action-divider.scss
@@ -1,15 +1,7 @@
-// Light
-:host([sl-theme=light]) {
-	--sl-action-divider-color: rgba(208, 215, 222, 0.48);
-}
-// Dark
-:host([sl-theme=dark]) {
-	--sl-action-divider-color: rgba(68, 76, 86, 0.48);
-}
 // Action Divider
 li.sl-action-divider {
 	width: 100%;
 	height: 1px;
-	background-color: var(--sl-action-divider-color);
+	background-color: var(--slithe-primer-divider-color);
 	margin: 7px 0 8px 0;
 }
diff --git a/packages/@slithe/primer/src/components/action-group.scss b/packages/@slithe/primer/src/components/action-group.scss
index 34a4ec3..9fbd9ab 100644
--- a/packages/@slithe/primer/src/components/action-group.scss
+++ b/packages/@slithe/primer/src/components/action-group.scss
@@ -1,11 +1,3 @@
-// Light
-:host([sl-theme=light]) {
-	--sl-action-group-title-color: rgb(101, 109, 118);
-}
-// Dark
-:host([sl-theme=dark]) {
-	--sl-action-group-title-color: rgb(118, 131, 144);
-}
 // Action Group
 li.sl-action-group {
 	width: 100%;
@@ -13,6 +5,6 @@ li.sl-action-group {
 		padding: 6px 16px;
     font-size: 12px;
     font-weight: 600;
-		color: var(--sl-action-group-title-color);
+		color: var(--slithe-primer-text-color-2);
 	}
 }
diff --git a/packages/@slithe/primer/src/components/action.scss b/packages/@slithe/primer/src/components/action.scss
index 69dcee9..ddf1242 100644
--- a/packages/@slithe/primer/src/components/action.scss
+++ b/packages/@slithe/primer/src/components/action.scss
@@ -1,34 +1,19 @@
-// Light
-:host([sl-theme=light]) {
-  --sl-action-color: var(--pr-shark);
-  --sl-action-hover-background-color: rgb(243, 244, 246);
-  --sl-action-active-background-color: rgb(238, 239, 242);
-	--sl-action-outline-color: var(--pr-science-blue);
+// Common
+:host {
+  --slithe-primer-action-color: var(--slithe-primer-text-color);
+	--slithe-primer-action-color-active: var(--slithe-primer-text-color);
+  --slithe-primer-action-background-color-hover: var(--slithe-primer-background-color-hover);
+	--slithe-primer-action-background-color-active: var(--slithe-primer-background-color-active);
+	--slithe-primer-action-outline-color-focus: var(--slithe-primer-outline-color-focus);
 }
 // Danger
-:host([sl-theme=light][danger]) {
-	--sl-action-color: rgb(209, 36, 47);
-	--sl-action-hover-color: rgb(209, 36, 47);
-  --sl-action-hover-background-color: rgba(255, 235, 233, 0.64);
-	--sl-action-active-color: rgb(209, 36, 47);
-  --sl-action-active-background-color: rgb(255, 235, 233);
+:host([danger]) {
+	--slithe-primer-action-color: var(--slithe-primer-text-color-danger);
+	--slithe-primer-action-color-hover: var(--slithe-primer-text-color-danger);
+  --slithe-primer-action-background-color-hover: var(--slithe-primer-background-color-danger-hover);
+	--slithe-primer-action-color-active: var(--slithe-primer-text-color-danger);
+  --slithe-primer-action-background-color-active: var(--slithe-primer-background-color-danger-active);
 }
-// Dark
-:host([sl-theme=dark]) {
-  --sl-action-color: var(--pr-karpa-kora);
-  --sl-action-hover-background-color: rgb(68, 76, 86);
-  --sl-action-active-background-color: rgb(45, 51, 59);
-	--sl-action-outline-color: var(--pr-cornflower-blue);
-}
-// Danger
-:host([sl-theme=dark][danger]) {
-	--sl-action-color: rgb(244, 112, 103);
-	--sl-action-hover-color: rgb(244, 112, 103);
-  --sl-action-hover-background-color: rgba(229, 83, 75, 0.16);
-	--sl-action-active-color: rgb(244, 112, 103);
-  --sl-action-active-background-color: rgba(229, 83, 75, 0.24);
-}
-
 // Action
 li.sl-action {
 	width: 100%;
@@ -39,20 +24,20 @@ li.sl-action {
 	min-height: 5px;
 	margin: 0 8px;
 	border-radius: 6px;
-  color: var(--sl-action-color);
+  color: var(--slithe-primer-action-color);
 	cursor: pointer;
 	background-color: transparent;
 	user-select: none;
 	&:hover {
-    background-color: var(--sl-action-hover-background-color);
-    color: var(--sl-action-hover-color, unset);
+    background-color: var(--slithe-primer-action-background-color-hover);
+    color: var(--slithe-primer-action-color-hover);
   }
   &:active {
-    background-color: var(--sl-action-active-background-color);
-    color: var(--sl-action-active-color, unset);
+    background-color: var(--slithe-primer-action-background-color-active);
+    color: var(--slithe-primer-action-color-active);
   }
   &:focus-visible {
-    outline: 2px solid var(--sl-action-outline-color);
+    outline: 2px solid var(--slithe-primer-action-outline-color-focus);
     outline-offset: -2px;
   }
 }
diff --git a/packages/@slithe/primer/src/components/actions.scss b/packages/@slithe/primer/src/components/actions.scss
index 446dff2..e611696 100644
--- a/packages/@slithe/primer/src/components/actions.scss
+++ b/packages/@slithe/primer/src/components/actions.scss
@@ -1,9 +1,3 @@
-// Light
-:host([sl-theme=light]) {
-}
-// Dark
-:host([sl-theme=dark]) {
-}
 // Actions
 ul.sl-actions {
 	width: 100%;
diff --git a/packages/@slithe/primer/src/components/avatar.scss b/packages/@slithe/primer/src/components/avatar.scss
index 91491ad..a7018c0 100644
--- a/packages/@slithe/primer/src/components/avatar.scss
+++ b/packages/@slithe/primer/src/components/avatar.scss
@@ -1,14 +1,6 @@
-// Light
-:host([sl-theme=light]) {
-  --sl-avatar-background-color: var(--pr-karpa-kora);
-}
-// Dark
-:host([sl-theme=dark]) {
-  --sl-avatar-background-color: var(--pr-shark);
-}
 // Square
 :host([square]) {
-  --sl-avatar-border-radius: 4px;
+  --slithe-primer-avatar-border-radius: 4px;
 }
 // Avatar
 div.sl-avatar {
@@ -16,7 +8,9 @@ div.sl-avatar {
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  border-radius: var(--sl-avatar-border-radius, 50%);
+  border-radius: var(--slithe-primer-avatar-border-radius, 50%);
+  background-color: var(--slithe-primer-background-color-primary);
+  color: var(--slithe-primer-text-color-3);
   > img {
     height: inherit;
     width: inherit;
diff --git a/packages/@slithe/primer/src/components/blankslate.scss b/packages/@slithe/primer/src/components/blankslate.scss
index fbcb84f..5394332 100644
--- a/packages/@slithe/primer/src/components/blankslate.scss
+++ b/packages/@slithe/primer/src/components/blankslate.scss
@@ -1,17 +1,7 @@
-// Light
-:host([sl-theme=light]) {
-  --sl-blankslate-heading-color: var(--pr-shark);
-  --sl-blankslate-color: var(--pr-nevada);
-}
-// Dark
-:host([sl-theme=dark]) {
-  --sl-blankslate-heading-color: var(--pr-karpa-kora);
-  --sl-blankslate-color: var(--pr-nevada);
-}
-// Button
+// Blankslate
 div.sl-blankslate {
-  font-family: var(--pr-font-family);
-  color: var(--sl-blankslate-color);
+  font-family: var(--slithe-primer-font-family);
+  color: var(--slithe-primer-text-color-2);
   position: relative;
   display: flex;
   flex-direction: column;
@@ -19,7 +9,7 @@ div.sl-blankslate {
   justify-content: center;
   > h1, h2, h3, h4, h5, h6 {
     margin: 0;
-    color: var(--sl-blankslate-heading-color);
+    color: var(--slithe-primer-text-color);
   }
   > p {
     margin: 0;
diff --git a/packages/@slithe/primer/src/components/breadcrumb.scss b/packages/@slithe/primer/src/components/breadcrumb.scss
index f03d316..d86d0bd 100644
--- a/packages/@slithe/primer/src/components/breadcrumb.scss
+++ b/packages/@slithe/primer/src/components/breadcrumb.scss
@@ -1,27 +1,20 @@
+// Common
 :host {
-	--sl-button-padding: 0px;
+	--slithe-primer-button-padding: 0px;
 }
 :host(:not(:last-of-type)) {
-	--sl-breadcrumb-divider: '/';
-}
-// Light
-:host([sl-theme=light]) {
-	--sl-breadcrumb-divider-color: rgb(101, 109, 118);
-}
-// Dark
-:host([sl-theme=dark]) {
-	--sl-breadcrumb-divider-color: rgb(118, 131, 144);
+	--slithe-primer-breadcrumb-divider: '/';
 }
 // Active
 :host([active]) {
-	--sl-button-disabled-opacity: 1;
-	--sl-button-color-override: currentColor;
+	--slithe-primer-button-disabled-opacity: 1;
+	--slithe-primer-button-color-override: currentColor;
 }
 // Breadcrumb
 li.sl-breadcrumb {
 	&::after {
 		padding: 0.5em;
-    color: var(--sl-breadcrumb-divider-color);
-		content: var(--sl-breadcrumb-divider, none);
+    color: var(--slithe-primer-text-color-2);
+		content: var(--slithe-primer-breadcrumb-divider, none);
 	}
 }
diff --git a/packages/@slithe/primer/src/components/button.scss b/packages/@slithe/primer/src/components/button.scss
index 25cbf9d..66c61e0 100644
--- a/packages/@slithe/primer/src/components/button.scss
+++ b/packages/@slithe/primer/src/components/button.scss
@@ -1,191 +1,99 @@
-// Light
-:host([sl-theme=light]) {
-  --sl-button-background-color: var(--pr-aqua-haze);
-  --sl-button-color: var(--pr-shark);
-  --sl-button-border-color: rgba(27,31,36,0.15);
-  --sl-button-hover-background-color: var(--pr-athens-gray);
-  --sl-button-hover-border-color: rgba(27,31,36,0.15);
-  --sl-button-active-background-color: var(--pr-clewd);
-  --sl-button-active-border-color: rgba(27,31,36,0.15);
-  --sl-button-outline-color: var(--pr-science-blue);
-  --sl-button-box-shadow: 0 1px 0 rgba(27,31,36,0.04), inset 0 1px 0 rgba(255,255,255,0.25);
+// Common
+:host {
+  --slithe-primer-button-color: var(--slithe-primer-text-color);
+  --slithe-primer-button-background-color: var(--slithe-primer-background-color);
+  --slithe-primer-button-background-color-hover: var(--slithe-primer-background-color-hover);
+  --slithe-primer-button-background-color-active: var(--slithe-primer-background-color-active);
+  --slithe-primer-button-border-color: var(--slithe-primer-border-color);
+  --slithe-primer-button-border-color-hover: var(--slithe-primer-border-color-hover);
+  --slithe-primer-button-border-color-active: var(--slithe-primer-border-color-active);
+  --slithe-primer-button-outline-color-focus: var(--slithe-primer-outline-color-focus);
+  --slithe-primer-button-box-shadow: var(--slithe-primer-box-shadow);
 }
 // Primary
-:host([sl-theme=light][primary]) {
-  --sl-button-background-color: var(--pr-science-blue);
-  --sl-button-color: var(--pr-white);
-  --sl-button-box-shadow: 0 1px 0 rgba(27,31,36,0.1), inset 0 1px 0 rgba(255,255,255,0.03);
-  --sl-button-border-color: rgba(205,217,229,0.1);
-  --sl-button-hover-background-color: var(--pr-true-blue);
-  --sl-button-hover-color: var(--pr-white);
-  --sl-button-active-background-color: var(--pr-endeavour);
-  --sl-button-active-color: var(--pr-white);
-  --sl-button-focus-box-shadow: inset 0 0 0 3px var(--sl-white);
-}
-// Outline
-:host([sl-theme=light][outline]) {
-  --sl-button-color: var(--pr-science-blue);
-  --sl-button-box-shadow: 0 1px 0 rgba(27,31,36,0.04), inset 0 1px 0 rgba(255,255,255,0.25);
-  --sl-button-hover-background-color: var(--pr-science-blue);
-  --sl-button-hover-color: var(--pr-white);
-  --sl-button-hover-border-color: rgba(27,31,36,0.15);
-  --sl-button-hover-box-shadow: 0 1px 0 rgba(27,31,36,0.1), inset 0 1px 0 rgba(255,255,255,0.03);
-  --sl-button-active-background-color: var(--pr-true-blue);
-  --sl-button-active-color: var(--pr-white);
-  --sl-button-active-border-color: rgba(27,31,36,0.15);
-  --sl-button-active-box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
-}
-// Danger
-:host([sl-theme=light][danger]) {
-  --sl-button-color: var(--pr-cardinal);
-  --sl-button-box-shadow: 0 1px 0 rgba(27,31,36,0.04), inset 0 1px 0 rgba(255,255,255,0.25);
-  --sl-button-hover-background-color: var(--pr-shiraz);
-  --sl-button-hover-color: var(--pr-white);
-  --sl-button-hover-border-color: rgba(27,31,36,0.15);
-  --sl-button-hover-box-shadow: 0 1px 0 rgba(27,31,36,0.1), inset 0 1px 0 rgba(255,255,255,0.03);
-  --sl-button-active-background-color: var(--pr-miyamoto-red);
-  --sl-button-active-color: var(--pr-white);
-  --sl-button-active-border-color: rgba(27,31,36,0.15);
-  --sl-button-active-box-shadow: inset 0 1px 0 rgba(76,0,20,0.2);
-}
-// Borderless
-:host([sl-theme=light][borderless]) {
-  --sl-button-background-color: transparent;
-  --sl-button-color: var(--pr-science-blue);
-  --sl-button-border-color: transparent;
-  --sl-button-box-shadow: 0 0 transparent, 0 0 transparent;
-  --sl-button-hover-background-color: rgb(243, 244, 246);
-  --sl-button-hover-color: var(--pr-science-blue);
-  --sl-button-hover-border-color: transparent;
-  --sl-button-active-background-color: rgb(238, 239, 242);
-  --sl-button-active-color: var(--pr-science-blue);
-  --sl-button-active-border-color: transparent;
-}
-// Link
-:host([sl-theme=light][link]) {
-  --sl-button-background-color: transparent;
-  --sl-button-color: var(--pr-science-blue);
-  --sl-button-border-color: transparent;
-  --sl-button-box-shadow: 0 0 transparent, 0 0 transparent;
-  --sl-button-hover-background-color: transparent;
-  --sl-button-hover-color: var(--pr-science-blue);
-  --sl-button-hover-border-color: transparent;
-  --sl-button-hover-text-decoration: underline;
-  --sl-button-active-background-color: transparent;
-  --sl-button-active-color: var(--pr-science-blue);
-  --sl-button-active-border-color: transparent;
-  --sl-button-active-text-decoration: underline;
-}
-// Dark
-:host([sl-theme=dark]) {
-  --sl-button-background-color: var(--pr-sibuya-game-reserve);
-  --sl-button-color: var(--pr-karpa-kora);
-  --sl-button-border-color: rgba(205,217,229,0.1);
-  --sl-button-hover-background-color: var(--pr-dark-sea);
-  --sl-button-hover-border-color: var(--pr-slate-gray);
-  --sl-button-active-background-color: var(--pr-nothing-but-life);
-  --sl-button-active-border-color: var(--pr-nevada);
-  --sl-button-outline-color: var(--pr-cornflower-blue);
-  --sl-button-box-shadow: 0 0 transparent, 0 0 transparent;;
-}
-// Primary
-:host([sl-theme=dark][primary]) {
-  --sl-button-background-color: var(--pr-endeavour);
-  --sl-button-color: var(--pr-white);
-  --sl-button-box-shadow: 0 1px 0 rgba(27,31,36,0.1), inset 0 1px 0 rgba(255,255,255,0.03);
-  --sl-button-border-color: rgba(240,246,252,0.1);
-  --sl-button-hover-background-color: var(--pr-true-blue);
-  --sl-button-hover-color: var(--pr-white);
-  --sl-button-active-background-color: var(--pr-endeavour);
-  --sl-button-active-color: var(--pr-white);
-  --sl-button-focus-box-shadow: inset 0 0 0 3px var(--pr-white);
-}
-// Outline
-:host([sl-theme=dark][outline]) {
-  --sl-button-color: var(--pr-cornflower-blue);
-  --sl-button-box-shadow: 0 0 transparent, 0 0 transparent;
-  --sl-button-hover-background-color: var(--pr-outer-space);
-  --sl-button-hover-color: var(--pr-cornflower-blue);
-  --sl-button-hover-border-color: rgba(240,246,252,0.1);
-  --sl-button-hover-box-shadow: 0 1px 0 rgba(1,4,9,0.1), inset 0 1px 0 rgba(255,255,255,0.03);
-  --sl-button-active-background-color: var(--pr-endeavour);
-  --sl-button-active-color: var(--pr-white);
-  --sl-button-active-border-color: rgba(240,246,252,0.1);
-  --sl-button-active-box-shadow: 0 0 transparent;
+:host([primary]) {
+  --slithe-primer-button-background-color: var(--slithe-primer-background-color-primary);
+  --slithe-primer-button-color: var(--slithe-primer-text-color-3);
+  --slithe-primer-button-box-shadow: var(--slithe-primer-box-shadow-2);
+  --slithe-primer-button-border-color: var(--slithe-primer-border-color);
+  --slithe-primer-button-background-color-hover: var(--slithe-primer-background-color-primary-hover);
+  --slithe-primer-button-hover-color: var(--slithe-primer-text-color-3);
+  --slithe-primer-button-background-color-active: var(--slithe-primer-background-color-primary-active);
+  --slithe-primer-button-active-color: var(--slithe-primer-text-color-3);
+  --slithe-primer-button-box-shadow-focus: inset 0 0 0 3px var(--slithe-primer-text-color-3);
 }
 // Danger
-:host([sl-theme=dark][danger]) {
-  --sl-button-color: var(--pr-sunset-orange);
-  --sl-button-box-shadow: 0 0 transparent, 0 0 transparent;
-  --sl-button-hover-background-color: var(--pr-punch);
-  --sl-button-hover-color: var(--pr-white);
-  --sl-button-hover-border-color: var(--pr-sunset-orange);
-  --sl-button-hover-box-shadow: 0 0 transparent, 0 0 transparent;
-  --sl-button-active-background-color: var(--pr-tall-poppy);
-  --sl-button-active-color: var(--pr-white);
-  --sl-button-active-border-color: var(--pr-salmon);
-  --sl-button-active-box-shadow: 0 0 transparent;
+:host([danger]) {
+  --slithe-primer-button-color: var(--slithe-primer-text-color-danger);
+  --slithe-primer-button-background-color-hover: var(--slithe-primer-background-color-danger-hover-2);
+  --slithe-primer-button-hover-color: var(--slithe-primer-text-color-3);
+  --slithe-primer-button-border-color-hover: var(--slithe-primer-border-color-danger-hover);
+  --slithe-primer-button-hover-box-shadow: var(--slithe-primer-box-shadow-2);
+  --slithe-primer-button-background-color-active: var(--slithe-primer-background-color-danger-active-2);
+  --slithe-primer-button-active-color: var(--slithe-primer-text-color-3);
+  --slithe-primer-button-border-color-active: var(--slithe-primer-border-color-danger-active);
+  --slithe-primer-button-active-box-shadow: var(--slithe-primer-box-shadow-3);
 }
 // Borderless
-:host([sl-theme=dark][borderless]) {
-  --sl-button-background-color: transparent;
-  --sl-button-color: var(--pr-cornflower-blue);
-  --sl-button-border-color: transparent;
-  --sl-button-box-shadow: 0 0 transparent, 0 0 transparent;
-  --sl-button-hover-background-color: rgb(68, 76, 86);
-  --sl-button-hover-color: var(--pr-cornflower-blue);
-  --sl-button-hover-border-color: transparent;
-  --sl-button-active-background-color: rgb(45, 51, 59);
-  --sl-button-active-color: var(--pr-cornflower-blue);
-  --sl-button-active-border-color: transparent;
+:host([borderless]) {
+  --slithe-primer-button-background-color: var(--slithe-primer-transparent);
+  --slithe-primer-button-color: var(--slithe-primer-text-color-primary);
+  --slithe-primer-button-border-color: var(--slithe-primer-transparent);
+  --slithe-primer-button-box-shadow: var(--slithe-primer-box-shadow-transparent);
+  --slithe-primer-button-background-color-hover: var(--slithe-primer-background-color-hover);
+  --slithe-primer-button-hover-color: var(--slithe-primer-text-color-primary);
+  --slithe-primer-button-border-color-hover: var(--slithe-primer-transparent);
+  --slithe-primer-button-background-color-active: var(--slithe-primer-background-color-active);
+  --slithe-primer-button-active-color: var(--slithe-primer-text-color-primary);
+  --slithe-primer-button-border-color-active: var(--slithe-primer-transparent);
 }
 // Link
-:host([sl-theme=dark][link]) {
-  --sl-button-background-color: transparent;
-  --sl-button-color: var(--pr-cornflower-blue);
-  --sl-button-border-color: transparent;
-  --sl-button-box-shadow: 0 0 transparent, 0 0 transparent;
-  --sl-button-hover-background-color: transparent;
-  --sl-button-hover-color: var(--pr-cornflower-blue);
-  --sl-button-hover-border-color: transparent;
-  --sl-button-hover-text-decoration: underline;
-  --sl-button-active-background-color: transparent;
-  --sl-button-active-color: var(--pr-cornflower-blue);
-  --sl-button-active-border-color: transparent;
-  --sl-button-active-text-decoration: underline;
+:host([link]) {
+  --slithe-primer-button-background-color: var(--slithe-primer-transparent);
+  --slithe-primer-button-color: var(--slithe-primer-text-color-primary);
+  --slithe-primer-button-border-color: var(--slithe-primer-transparent);
+  --slithe-primer-button-box-shadow: var(--slithe-primer-box-shadow-transparent);
+  --slithe-primer-button-background-color-hover: var(--slithe-primer-transparent);
+  --slithe-primer-button-hover-color: var(--slithe-primer-text-color-primary);
+  --slithe-primer-button-border-color-hover: var(--slithe-primer-transparent);
+  --slithe-primer-button-hover-text-decoration: underline;
+  --slithe-primer-button-background-color-active: var(--slithe-primer-transparent);
+  --slithe-primer-button-active-color: var(--slithe-primer-text-color-primary);
+  --slithe-primer-button-border-color-active: var(--slithe-primer-transparent);
+  --slithe-primer-button-active-text-decoration: underline;
 }
 // Small
 :host([small]) {
-  --sl-button-font-size: 12px;
-  --sl-button-padding: 3px 12px;
+  --slithe-primer-button-font-size: 12px;
+  --slithe-primer-button-padding: 3px 12px;
 }
 // Large
 :host([large]) {
-  --sl-button-font-size: 16px;
-  --sl-button-padding: 9px 20px;
+  --slithe-primer-button-font-size: 16px;
+  --slithe-primer-button-padding: 9px 20px;
 }
 // Disabled
 :host([disabled]) {
   pointer-events: none;
-  opacity: var(--sl-button-disabled-opacity, 0.5);
+  opacity: var(--slithe-primer-button-disabled-opacity, 0.5);
 }
 // Button
 button.sl-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-family: var(--pr-font-family);
+  font-family: var(--slithe-primer-font-family);
   position: relative;
   width: 100%;
-  background-color: var(--sl-button-background-color);
-  color: var(--sl-button-color-override, var(--sl-button-color));
-  border: 1px solid var(--sl-button-border-color);
+  background-color: var(--slithe-primer-button-background-color);
+  color: var(--slithe-primer-button-color-override, var(--slithe-primer-button-color));
+  border: 1px solid var(--slithe-primer-button-border-color);
   border-radius: 6px;
-  padding: var(--sl-button-padding, 5px 16px);
-  font-size: var(--sl-button-font-size, 14px);
+  padding: var(--slithe-primer-button-padding, 5px 16px);
+  font-size: var(--slithe-primer-button-font-size, 14px);
   user-select: none;
   font-weight: 500;
-  box-shadow: var(--sl-button-box-shadow);
+  box-shadow: var(--slithe-primer-button-box-shadow);
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
@@ -193,22 +101,22 @@ button.sl-button {
     padding: 6px;
   }
   &:hover {
-    background-color: var(--sl-button-hover-background-color);
-    border-color: var(--sl-button-hover-border-color);
-    color: var(--sl-button-hover-color, unset);
-    box-shadow: var(--sl-button-hover-box-shadow, unset);
-    text-decoration: var(--sl-button-hover-text-decoration, none);
+    background-color: var(--slithe-primer-button-background-color-hover);
+    border-color: var(--slithe-primer-button-border-color-hover);
+    color: var(--slithe-primer-button-hover-color, unset);
+    box-shadow: var(--slithe-primer-button-hover-box-shadow, unset);
+    text-decoration: var(--slithe-primer-button-hover-text-decoration, none);
   }
   &:active {
-    background-color: var(--sl-button-active-background-color);
-    border-color: var(--sl-button-active-border-color);
-    color: var(--sl-button-active-color, unset);
-    box-shadow: var(--sl-button-active-box-shadow, unset);
-    text-decoration: var(--sl-button-active-text-decoration, none);
+    background-color: var(--slithe-primer-button-background-color-active);
+    border-color: var(--slithe-primer-button-border-color-active);
+    color: var(--slithe-primer-button-active-color, unset);
+    box-shadow: var(--slithe-primer-button-active-box-shadow, unset);
+    text-decoration: var(--slithe-primer-button-active-text-decoration, none);
   }
   &:focus-visible {
-    outline: 2px solid var(--sl-button-outline-color);
+    outline: 2px solid var(--slithe-primer-button-outline-color-focus);
     outline-offset: -2px;
-    box-shadow: var(--sl-button-focus-box-shadow, unset);
+    box-shadow: var(--slithe-primer-button-box-shadow-focus, unset);
   }
 }
diff --git a/packages/@slithe/primer/src/components/card.scss b/packages/@slithe/primer/src/components/card.scss
index c10b9d1..3b6b3f3 100644
--- a/packages/@slithe/primer/src/components/card.scss
+++ b/packages/@slithe/primer/src/components/card.scss
@@ -1,38 +1,23 @@
-// Light
-:host([sl-theme=light]) {
-  --sl-card-background-color: var(--pr-white);
-  --sl-card-color: var(--pr-shark);
-  --sl-card-border-color: var(--pr-geyser);
-  --sl-card-border-radius: 6px;
-  --sl-card-slot-divider-color: var(--pr-geyser);
-  --sl-card-header-background-color: var(--pr-aqua-haze);
+// Common
+:host {
+  --slithe-primer-card-background-color: var(--slithe-primer-background-color-2);
+  --slithe-primer-card-color: var(--slithe-primer-text-color);
+  --slithe-primer-card-border-color: var(--slithe-primer-border-color-2);
+  --slithe-primer-card-header-background-color: var(--slithe-primer-background-color);
 }
 // Danger
-:host([sl-theme=light][danger]) {
-  --sl-card-border-color: var(--pr-cardinal);
-}
-// Dark
-:host([sl-theme=dark]) {
-  --sl-card-background-color: var(--pr-bunker);
-  --sl-card-color: var(--pr-karpa-kora);
-  --sl-card-border-color: var(--pr-bright-gray);
-  --sl-card-border-radius: 6px;
-  --sl-card-slot-divider-color: var(--pr-bright-gray);
-  --sl-card-header-background-color: var(--pr-dark-artifact);
-}
-// Danger
-:host([sl-theme=dark][danger]) {
-  --sl-card-border-color: var(--pr-punch);
+:host([danger]) {
+  --slithe-primer-card-border-color: var(--slithe-primer-border-color-danger);
 }
 // Small
 :host([small]) {
-  --sl-card-padding: 8px;
+  --slithe-primer-card-padding: 8px;
 }
 // Card
 div.sl-card {
   width: 100%;
-  font-family: var(--pr-font-family);
-  color: var(--sl-card-color);
+  font-family: var(--slithe-primer-font-family);
+  color: var(--slithe-primer-card-color);
   &.has-header {
     &.has-default {
       > header {
@@ -83,26 +68,26 @@ div.sl-card {
   }
   > header {
     display: none;
-    background-color: var(--sl-card-header-background-color);
-    border-radius: var(--sl-card-border-radius);
-    border: 1px solid var(--sl-card-border-color);
-    padding: var(--sl-card-padding, 16px);
+    background-color: var(--slithe-primer-card-header-background-color);
+    border-radius: 6px;
+    border: 1px solid var(--slithe-primer-card-border-color);
+    padding: var(--slithe-primer-card-padding, 16px);
   }
   > section {
     display: none;
-    background-color: var(--sl-card-background-color);
-    border-radius: var(--sl-card-border-radius);
-    border-top: 1px solid var(--sl-card-slot-divider-color);
-    border-bottom: 1px solid var(--sl-card-slot-divider-color);
-    border-left: 1px solid var(--sl-card-border-color);
-    border-right: 1px solid var(--sl-card-border-color);
-    padding: var(--sl-card-padding, 16px);
+    background-color: var(--slithe-primer-card-background-color);
+    border-radius: 6px;
+    border-top: 1px solid var(--slithe-primer-card-border-color);
+    border-bottom: 1px solid var(--slithe-primer-card-border-color);
+    border-left: 1px solid var(--slithe-primer-card-border-color);
+    border-right: 1px solid var(--slithe-primer-card-border-color);
+    padding: var(--slithe-primer-card-padding, 16px);
   }
   > footer {
     display: none;
-    background-color: var(--sl-card-background-color);
-    border-radius: var(--sl-card-border-radius);
-    border: 1px solid var(--sl-card-border-color);
-    padding: var(--sl-card-padding, 16px);
+    background-color: var(--slithe-primer-card-background-color);
+    border-radius: 6px;
+    border: 1px solid var(--slithe-primer-card-border-color);
+    padding: var(--slithe-primer-card-padding, 16px);
   }
 }
diff --git a/packages/@slithe/primer/src/components/flash.scss b/packages/@slithe/primer/src/components/flash.scss
index 9690199..a28e0e0 100644
--- a/packages/@slithe/primer/src/components/flash.scss
+++ b/packages/@slithe/primer/src/components/flash.scss
@@ -1,35 +1,18 @@
-
-// Light
-:host([sl-theme=light]) {
-	--sl-flash-color: #1F2328;
-	--sl-flash-background-color-info: #ddf4ff;
-	--sl-flash-background-color-success: #dafbe1;
-	--sl-flash-background-color-warn: #fff8c5;
-	--sl-flash-background-color-error: #ffebe9;
-	--sl-flash-border-color-info: rgba(84,174,255,0.4);
-	--sl-flash-border-color-success: rgba(74,194,107,0.4);
-	--sl-flash-border-color-warn: rgba(212,167,44,0.4);
-	--sl-flash-border-color-error: rgba(255,129,130,0.4);
-	--sl-flash-icon-color-info: var(--pr-science-blue);
-	--sl-flash-icon-color-success: var(--pr-eucalyptus);
-	--sl-flash-icon-color-warn: var(--pr-pirate-gold);
-	--sl-flash-icon-color-error: var(--pr-cardinal);
-}
-// Dark
-:host([sl-theme=dark]) {
-	--sl-flash-color: #adbac7;
-  --sl-flash-background-color-info: rgba(65,132,228,0.1);
-	--sl-flash-background-color-success: rgba(70,149,74,0.15);
-	--sl-flash-background-color-warn: rgba(174,124,20,0.15);
-	--sl-flash-background-color-error: rgba(229,83,75,0.1);
-	--sl-flash-border-color-info: rgba(65,132,228,0.4);
-	--sl-flash-border-color-success: rgba(70,149,74,0.4);
-	--sl-flash-border-color-warn: rgba(174,124,20,0.4);
-	--sl-flash-border-color-error: rgba(229,83,75,0.4);
-	--sl-flash-icon-color-info: var(--pr-science-blue);
-	--sl-flash-icon-color-success: var(--pr-eucalyptus);
-	--sl-flash-icon-color-warn: var(--pr-pirate-gold);
-	--sl-flash-icon-color-error: var(--pr-cardinal);
+// Common
+:host {
+	--slithe-primer-flash-color: var(--slithe-primer-text-color);
+	--slithe-primer-flash-background-color-info: var(--slithe-primer-background-color-info);
+	--slithe-primer-flash-background-color-success: var(--slithe-primer-background-color-success);
+	--slithe-primer-flash-background-color-warn: var(--slithe-primer-background-color-warn);
+	--slithe-primer-flash-background-color-error: var(--slithe-primer-background-color-error);
+	--slithe-primer-flash-border-color-info: var(--slithe-primer-border-color-info);
+	--slithe-primer-flash-border-color-success: var(--slithe-primer-border-color-success);
+	--slithe-primer-flash-border-color-warn: var(--slithe-primer-border-color-warn);
+	--slithe-primer-flash-border-color-error: var(--slithe-primer-border-color-error);
+	--slithe-primer-flash-icon-color-info: var(--slithe-primer-text-color-info);
+	--slithe-primer-flash-icon-color-success: var(--slithe-primer-text-color-success);
+	--slithe-primer-flash-icon-color-warn: var(--slithe-primer-text-color-warn);
+	--slithe-primer-flash-icon-color-error: var(--slithe-primer-text-color-error);
 }
 // Flash
 div.sl-flash {
@@ -39,29 +22,29 @@ div.sl-flash {
 	padding: 16px;
 	border-radius: 6px;
 	font-size: 14px;
-	color: var(--sl-flash-color);
-	background-color: var(--sl-flash-background-color);
-	border: 1px solid var(--sl-flash-border-color);
-	--sl-flash-background-color: var(--sl-flash-background-color-info);
-	--sl-flash-border-color: var(--sl-flash-border-color-info);
-	--sl-flash-icon-color: var(--sl-flash-icon-color-info);
+	color: var(--slithe-primer-flash-color);
+	background-color: var(--slithe-primer-flash-background-color);
+	border: 1px solid var(--slithe-primer-flash-border-color);
+	--slithe-primer-flash-background-color: var(--slithe-primer-flash-background-color-info);
+	--slithe-primer-flash-border-color: var(--slithe-primer-flash-border-color-info);
+	--slithe-primer-flash-icon-color: var(--slithe-primer-flash-icon-color-info);
 	&.success {
-		--sl-flash-background-color: var(--sl-flash-background-color-success);
-		--sl-flash-border-color: var(--sl-flash-border-color-success);
-		--sl-flash-icon-color: var(--sl-flash-icon-color-success);
+		--slithe-primer-flash-background-color: var(--slithe-primer-flash-background-color-success);
+		--slithe-primer-flash-border-color: var(--slithe-primer-flash-border-color-success);
+		--slithe-primer-flash-icon-color: var(--slithe-primer-flash-icon-color-success);
 	}
 	&.warn {
-		--sl-flash-background-color: var(--sl-flash-background-color-warn);
-		--sl-flash-border-color: var(--sl-flash-border-color-warn);
-		--sl-flash-icon-color: var(--sl-flash-icon-color-warn);
+		--slithe-primer-flash-background-color: var(--slithe-primer-flash-background-color-warn);
+		--slithe-primer-flash-border-color: var(--slithe-primer-flash-border-color-warn);
+		--slithe-primer-flash-icon-color: var(--slithe-primer-flash-icon-color-warn);
 	}
 	&.error {
-		--sl-flash-background-color: var(--sl-flash-background-color-error);
-		--sl-flash-border-color: var(--sl-flash-border-color-error);
-		--sl-flash-icon-color: var(--sl-flash-icon-color-error);
+		--slithe-primer-flash-background-color: var(--slithe-primer-flash-background-color-error);
+		--slithe-primer-flash-border-color: var(--slithe-primer-flash-border-color-error);
+		--slithe-primer-flash-icon-color: var(--slithe-primer-flash-icon-color-error);
 	}
 	> sl-icon {
 		margin-right: 8px;
-		color: var(--sl-flash-icon-color);
+		color: var(--slithe-primer-flash-icon-color);
 	}
 }
diff --git a/packages/@slithe/primer/src/components/form-control.scss b/packages/@slithe/primer/src/components/form-control.scss
index 8e51d81..7ff39a3 100644
--- a/packages/@slithe/primer/src/components/form-control.scss
+++ b/packages/@slithe/primer/src/components/form-control.scss
@@ -1,14 +1,8 @@
-// Light
-:host([sl-theme=light]) {
-	--sl-form-control-status-success-color: rgb(26, 127, 55);
-	--sl-form-control-status-failure-color: rgb(209, 36, 47);
-	--sl-form-control-caption-color: rgb(101, 109, 118);
-}
-// Dark
-:host([sl-theme=dark]) {
-	--sl-form-control-status-success-color: rgb(87, 171, 90);
-	--sl-form-control-status-failure-color: rgb(229, 83, 75);
-	--sl-form-control-caption-color: rgb(118, 131, 144);
+// Common
+:host {
+	--slithe-primer-form-control-status-success-color: var(--slithe-primer-text-color-success-2);
+	--slithe-primer-form-control-status-failure-color: var(--slithe-primer-text-color-error-2);
+	--slithe-primer-form-control-caption-color: var(--slithe-primer-text-color-2);
 }
 // Form Control
 div.sl-form-control {
@@ -22,10 +16,10 @@ div.sl-form-control {
 		display: flex;
     align-items: center;
 		&.success {
-			color: var(--sl-form-control-status-success-color);
+			color: var(--slithe-primer-form-control-status-success-color);
 		}
 		&.failure {
-			color: var(--sl-form-control-status-failure-color);
+			color: var(--slithe-primer-form-control-status-failure-color);
 		}
 		> span {
 			font-size: 12px;
@@ -36,6 +30,6 @@ div.sl-form-control {
 	> span.caption {
 		display: block;
 		font-size: 12px;
-		color: var(--sl-form-control-caption-color);
+		color: var(--slithe-primer-form-control-caption-color);
 	}
 }
diff --git a/packages/@slithe/primer/src/components/hud.scss b/packages/@slithe/primer/src/components/hud.scss
index 7b652ac..bbff7cd 100644
--- a/packages/@slithe/primer/src/components/hud.scss
+++ b/packages/@slithe/primer/src/components/hud.scss
@@ -1,15 +1,12 @@
-
-// Light
-:host([sl-theme=light]) {
-  --sl-hud-notification-background-color: var(--pr-white);
-  --sl-hud-notification-color: var(--pr-shark);
-  --sl-hud-notification-box-shadow: inset 0 0 0 1px var(--pr-geyser), 0 8px 24px rgba(140,149,159,0.2);
-}
-// Dark
-:host([sl-theme=dark]) {
-  --sl-hud-notification-background-color: var(--pr-incomplete-eclipse);
-  --sl-hud-notification-color: var(--pr-norborne);
-  --sl-hud-notification-box-shadow: inset 0 0 0 1px var(--pr-outer-space), 0 8px 24px var(--pr-black-squared);
+// Common
+:host {
+  --slithe-primer-hud-notification-background-color: var(--slithe-primer-background-color-2);
+  --slithe-primer-hud-notification-color: var(--slithe-primer-text-color);
+  --slithe-primer-hud-notification-box-shadow: var(--slithe-primer-box-shadow-4);
+  --slithe-primer-hud-notification-icon-color-info: var(--slithe-primer-text-color-info);
+	--slithe-primer-hud-notification-icon-color-success: var(--slithe-primer-text-color-success);
+	--slithe-primer-hud-notification-icon-color-warn: var(--slithe-primer-text-color-warn);
+	--slithe-primer-hud-notification-icon-color-error: var(--slithe-primer-text-color-error);
 }
 // Hud
 div.sl-hud {
@@ -18,7 +15,7 @@ div.sl-hud {
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 4;
+  z-index: 10;
   pointer-events: none;
   > ul.notifications {
     position: fixed;
@@ -33,27 +30,27 @@ div.sl-hud {
       flex-direction: row;
       margin: 16px;
       border-radius: 6px;
-      background-color: var(--sl-hud-notification-background-color);
-      color: var(--sl-hud-notification-color);
-      box-shadow: var(--sl-hud-notification-box-shadow);
+      background-color: var(--slithe-primer-hud-notification-background-color);
+      color: var(--slithe-primer-hud-notification-color);
+      box-shadow: var(--slithe-primer-hud-notification-box-shadow);
       &.info {
         > div.icon {
-          background-color: var(--pr-science-blue);
+          background-color: var(--slithe-primer-hud-notification-icon-color-info);
         }
       }
       &.success {
         > div.icon {
-          background-color: var(--pr-eucalyptus);
+          background-color: var(--slithe-primer-hud-notification-icon-color-success);
         }
       }
       &.warn {
         > div.icon {
-          background-color: var(--pr-pirate-gold);
+          background-color: var(--slithe-primer-hud-notification-icon-color-warn);
         }
       }
       &.error {
         > div.icon {
-          background-color: var(--pr-cardinal);
+          background-color: var(--slithe-primer-hud-notification-icon-color-error);
         }
       }
       > div.icon {
@@ -62,7 +59,7 @@ div.sl-hud {
         justify-content: center;
         width: 48px;
         min-height: 48px;
-        color: var(--pr-white);
+        color: var(--slithe-primer-text-color-3);
         border: 1px solid transparent;
         border-right: 0;
         border-top-left-radius: inherit;
diff --git a/packages/@slithe/primer/src/components/input-checkbox.scss b/packages/@slithe/primer/src/components/input-checkbox.scss
index 20b2750..40cbadd 100644
--- a/packages/@slithe/primer/src/components/input-checkbox.scss
+++ b/packages/@slithe/primer/src/components/input-checkbox.scss
@@ -1,20 +1,12 @@
-// Light
-:host([sl-theme=light]) {
-  --sl-input-checkbox-background-color: rgb(255, 255, 255);
-  --sl-input-checkbox-border-color: rgb(110, 119, 129);
-  --sl-input-checkbox-checked-background-color: rgb(9, 105, 218);
-  --sl-input-checkbox-checked-border-color: rgb(9, 105, 218);
-	--sl-input-checkbox-status-success-color: rgb(26, 127, 55);
-	--sl-input-checkbox-status-failure-color: rgb(209, 36, 47);
-}
-// Dark
-:host([sl-theme=dark]) {
-  --sl-input-checkbox-background-color: rgb(34, 39, 46);
-  --sl-input-checkbox-border-color: rgb(99, 110, 123);
-  --sl-input-checkbox-checked-background-color: rgb(83, 155, 245);
-  --sl-input-checkbox-checked-border-color: rgb(83, 155, 245);
-	--sl-input-checkbox-status-success-color: rgb(87, 171, 90);
-	--sl-input-checkbox-status-failure-color: rgb(229, 83, 75);
+// Common
+:host {
+  --slithe-primer-input-checkbox-color: var(--slithe-primer-text-color-3);
+  --slithe-primer-input-checkbox-background-color: var(--slithe-primer-background-color-2);
+  --slithe-primer-input-checkbox-border-color: var(--slithe-primer-border-color-3);
+  --slithe-primer-input-checkbox-checked-background-color: var(--slithe-primer-text-color-info);
+  --slithe-primer-input-checkbox-checked-border-color: var(--slithe-primer-text-color-info);
+	--slithe-primer-input-checkbox-status-success-color: var(--slithe-primer-text-color-success-2);
+	--slithe-primer-input-checkbox-status-failure-color: var(--slithe-primer-text-color-error-2);
 }
 // Disabled
 :host([disabled]) {
@@ -31,14 +23,14 @@ div.sl-input-checkbox {
   &.success {
 		> input {
       &::after {
-			  border-color: var(--sl-input-checkbox-status-success-color);
+			  border-color: var(--slithe-primer-input-checkbox-status-success-color);
       }
 		}
 	}
 	&.failure {
 		> input {
       &::after {
-			  border-color: var(--sl-input-checkbox-status-failure-color);
+			  border-color: var(--slithe-primer-input-checkbox-status-failure-color);
       }
 		}
 	}
@@ -53,14 +45,14 @@ div.sl-input-checkbox {
         content: '';
         position: absolute;
         inset: 0;
-        background-color: var(--sl-input-checkbox-background-color);
+        background-color: var(--slithe-primer-input-checkbox-background-color);
         border-radius: 2px;
-        border: 1px solid var(--sl-input-checkbox-border-color);
+        border: 1px solid var(--slithe-primer-input-checkbox-border-color);
       }
       &:checked {
         &::after {
-          background-color: var(--sl-input-checkbox-checked-background-color);
-          border-color: var(--sl-input-checkbox-checked-border-color);
+          background-color: var(--slithe-primer-input-checkbox-checked-background-color);
+          border-color: var(--slithe-primer-input-checkbox-checked-border-color);
         }
       }
     }
@@ -71,6 +63,7 @@ div.sl-input-checkbox {
       display: flex;
       align-items: center;
       justify-content: center;
+      color: var(--slithe-primer-input-checkbox-color);
     }
   }
   > sl-label {
diff --git a/packages/@slithe/primer/src/components/input-number.scss b/packages/@slithe/primer/src/components/input-number.scss
index 5a96c6b..408d9f4 100644
--- a/packages/@slithe/primer/src/components/input-number.scss
+++ b/packages/@slithe/primer/src/components/input-number.scss
@@ -1,31 +1,21 @@
-// Light
-:host([sl-theme=light]) {
-  --sl-input-number-color: var(--pr-shark);
-	--sl-input-number-background-color: var(--pr-white);
-	--sl-input-number-border-color: var(--pr-geyser);
-	--sl-input-number-box-shadow: inset 0 1px 0 rgba(208, 215, 222, 0.2);
-	--sl-input-number-focus-border-color: var(--pr-science-blue);
-	--sl-input-number-status-success-color: rgb(26, 127, 55);
-	--sl-input-number-status-failure-color: rgb(209, 36, 47);
-}
-// Dark
-:host([sl-theme=dark]) {
-	--sl-input-number-color: var(--pr-catskill-white);
-	--sl-input-number-background-color: var(--pr-bunker);
-	--sl-input-number-border-color: var(--pr-outer-space);
-	--sl-input-number-box-shadow: 0 0 transparent;
-	--sl-input-number-focus-border-color: var(--pr-dodger-blue);
-	--sl-input-number-status-success-color: rgb(87, 171, 90);
-	--sl-input-number-status-failure-color: rgb(229, 83, 75);
+// Common
+:host {
+  --slithe-primer-input-number-color: var(--slithe-primer-text-color);
+	--slithe-primer-input-number-background-color: var(--slithe-primer-background-color-2);
+	--slithe-primer-input-number-border-color: var(--slithe-primer-border-color-2);
+	--slithe-primer-input-number-box-shadow: var(--slithe-primer-box-shadow-5);
+	--slithe-primer-input-number-focus-border-color: var(--slithe-primer-outline-color-focus);
+	--slithe-primer-input-number-status-success-color: var(--slithe-primer-text-color-success-2);
+	--slithe-primer-input-number-status-failure-color: var(--slithe-primer-text-color-error-2);
 }
 // Small
 :host([small]) {
-  --sl-input-number-font-size: 12px;
-  --sl-input-number-padding: 3px 12px;
+  --slithe-primer-input-number-font-size: 12px;
+  --slithe-primer-input-number-padding: 3px 12px;
 }
 // Block
 :host([block]) {
-  --sl-input-number-width: 100%;
+  --slithe-primer-input-number-width: 100%;
 }
 // Disabled
 :host([disabled]) {
@@ -39,31 +29,31 @@ div.sl-input-number {
   flex-direction: row;
   align-items: center;
   user-select: none;
-	width: var(--sl-input-number-width, auto);
+	width: var(--slithe-primer-input-number-width, auto);
 	&.success {
 		> input {
-			border-color: var(--sl-input-number-status-success-color);
+			border-color: var(--slithe-primer-input-number-status-success-color);
 		}
 	}
 	&.failure {
 		> input {
-			border-color: var(--sl-input-number-status-failure-color);
+			border-color: var(--slithe-primer-input-number-status-failure-color);
 		}
 	}
   > input {
 		width: inherit;
-		padding: var(--sl-input-number-padding, 5px 12px);
-		font-size: var(--sl-input-number-font-size, 14px);
+		padding: var(--slithe-primer-input-number-padding, 5px 12px);
+		font-size: var(--slithe-primer-input-number-font-size, 14px);
 		line-height: 20px;
 		border-radius: 6px;
-		color: var(--sl-input-number-color);
-		background-color: var(--sl-input-number-background-color);
-		border: 1px solid var(--sl-input-number-border-color);
-		box-shadow: var(--sl-input-number-box-shadow);
+		color: var(--slithe-primer-input-number-color);
+		background-color: var(--slithe-primer-input-number-background-color);
+		border: 1px solid var(--slithe-primer-input-number-border-color);
+		box-shadow: var(--slithe-primer-input-number-box-shadow);
 		&.focused, &:focus-visible {
-			border-color: var(--sl-input-number-focus-border-color);
+			border-color: var(--slithe-primer-input-number-focus-border-color);
 			outline: none;
-			box-shadow: inset 0 0 0 1px var(--sl-input-number-focus-border-color);
+			box-shadow: inset 0 0 0 1px var(--slithe-primer-input-number-focus-border-color);
 		}
 		// Hide Arrows
 		-moz-appearance: textfield;
diff --git a/packages/@slithe/primer/src/components/input-text.scss b/packages/@slithe/primer/src/components/input-text.scss
index 61d5ff3..b2c507f 100644
--- a/packages/@slithe/primer/src/components/input-text.scss
+++ b/packages/@slithe/primer/src/components/input-text.scss
@@ -1,31 +1,21 @@
-// Light
-:host([sl-theme=light]) {
-  --sl-input-text-color: var(--pr-shark);
-	--sl-input-text-background-color: var(--pr-white);
-	--sl-input-text-border-color: var(--pr-geyser);
-	--sl-input-text-box-shadow: inset 0 1px 0 rgba(208, 215, 222, 0.2);
-	--sl-input-text-focus-border-color: var(--pr-science-blue);
-	--sl-input-text-status-success-color: rgb(26, 127, 55);
-	--sl-input-text-status-failure-color: rgb(209, 36, 47);
-}
-// Dark
-:host([sl-theme=dark]) {
-	--sl-input-text-color: var(--pr-catskill-white);
-	--sl-input-text-background-color: var(--pr-bunker);
-	--sl-input-text-border-color: var(--pr-outer-space);
-	--sl-input-text-box-shadow: 0 0 transparent;
-	--sl-input-text-focus-border-color: var(--pr-dodger-blue);
-	--sl-input-text-status-success-color: rgb(87, 171, 90);
-	--sl-input-text-status-failure-color: rgb(229, 83, 75);
+// Common
+:host {
+  --slithe-primer-input-text-color: var(--slithe-primer-text-color);
+	--slithe-primer-input-text-background-color: var(--slithe-primer-background-color-2);
+	--slithe-primer-input-text-border-color: var(--slithe-primer-border-color-2);
+	--slithe-primer-input-text-box-shadow: var(--slithe-primer-box-shadow-5);
+	--slithe-primer-input-text-focus-border-color: var(--slithe-primer-outline-color-focus);
+	--slithe-primer-input-text-status-success-color: var(--slithe-primer-text-color-success-2);
+	--slithe-primer-input-text-status-failure-color: var(--slithe-primer-text-color-error-2);
 }
 // Small
 :host([small]) {
-  --sl-input-text-font-size: 12px;
-  --sl-input-text-padding: 3px 12px;
+  --slithe-primer-input-text-font-size: 12px;
+  --slithe-primer-input-text-padding: 3px 12px;
 }
 // Block
 :host([block]) {
-  --sl-input-text-width: 100%;
+  --slithe-primer-input-text-width: 100%;
 }
 // Disabled
 :host([disabled]) {
@@ -39,31 +29,31 @@ div.sl-input-text {
   flex-direction: row;
   align-items: center;
   user-select: none;
-	width: var(--sl-input-text-width, auto);
+	width: var(--slithe-primer-input-text-width, auto);
 	&.success {
 		> input {
-			border-color: var(--sl-input-text-status-success-color);
+			border-color: var(--slithe-primer-input-text-status-success-color);
 		}
 	}
 	&.failure {
 		> input {
-			border-color: var(--sl-input-text-status-failure-color);
+			border-color: var(--slithe-primer-input-text-status-failure-color);
 		}
 	}
   > input {
 		width: inherit;
-		padding: var(--sl-input-text-padding, 5px 12px);
-		font-size: var(--sl-input-text-font-size, 14px);
+		padding: var(--slithe-primer-input-text-padding, 5px 12px);
+		font-size: var(--slithe-primer-input-text-font-size, 14px);
 		line-height: 20px;
 		border-radius: 6px;
-		color: var(--sl-input-text-color);
-		background-color: var(--sl-input-text-background-color);
-		border: 1px solid var(--sl-input-text-border-color);
-		box-shadow: var(--sl-input-text-box-shadow);
+		color: var(--slithe-primer-input-text-color);
+		background-color: var(--slithe-primer-input-text-background-color);
+		border: 1px solid var(--slithe-primer-input-text-border-color);
+		box-shadow: var(--slithe-primer-input-text-box-shadow);
 		&.focused, &:focus-visible {
-			border-color: var(--sl-input-text-focus-border-color);
+			border-color: var(--slithe-primer-input-text-focus-border-color);
 			outline: none;
-			box-shadow: inset 0 0 0 1px var(--sl-input-text-focus-border-color);
+			box-shadow: inset 0 0 0 1px var(--slithe-primer-input-text-focus-border-color);
 		}
   }
 }
diff --git a/packages/@slithe/primer/src/components/keyboard.scss b/packages/@slithe/primer/src/components/keyboard.scss
index ac1629a..f34d6ab 100644
--- a/packages/@slithe/primer/src/components/keyboard.scss
+++ b/packages/@slithe/primer/src/components/keyboard.scss
@@ -1,23 +1,17 @@
-// Light
-:host([sl-theme=light]) {
-  --sl-keyboard-background-color: var(--pr-aqua-haze);
-  --sl-keyboard-color: var(--pr-shuttle-gray);
-  --sl-keyboard-border-color: rgba(27,31,36,0.15);
-}
-// Dark
-:host([sl-theme=dark]) {
-  --sl-keyboard-background-color: var(--pr-sibuya-game-reserve);
-  --sl-keyboard-color: var(--pr-regent-gray);
-  --sl-keyboard-border-color: var(--pr-regent-gray);
+// Common
+:host {
+  --slithe-primer-keyboard-background-color: var(--slithe-primer-background-color);
+  --slithe-primer-keyboard-color: var(--slithe-primer-text-color-4);
+  --slithe-primer-keyboard-border-color: var(--slithe-primer-border-color);
 }
 // Keyboard
 kbd.sl-keyboard {
-  font-family: var(--pr-font-family);
+  font-family: var(--slithe-primer-font-family-mono);
   border-radius: 4px;
   padding: 2px 4px;
   font-size: 12px;
-  background-color: var(--sl-keyboard-background-color);
-  color: var(--sl-keyboard-color);
-  border: 1px solid var(--sl-keyboard-border-color);
+  background-color: var(--slithe-primer-keyboard-background-color);
+  color: var(--slithe-primer-keyboard-color);
+  border: 1px solid var(--slithe-primer-keyboard-border-color);
   text-transform: uppercase;
 }
diff --git a/packages/@slithe/primer/src/components/layout.scss b/packages/@slithe/primer/src/components/layout.scss
deleted file mode 100644
index a9c5350..0000000
--- a/packages/@slithe/primer/src/components/layout.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-// Light
-:host([sl-theme=light]) {
-  --sl-layout-dropzone-background-color: rgba(0, 0, 0, .25);
-}
-// Dark
-:host([sl-theme=dark]) {
-  --sl-layout-dropzone-background-color: rgba(255, 255, 255, .25);
-}
-:host {
-  --sl-splitter-overflow: hidden;
-}
-// Layout
-div.sl-layout {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  sl-tab {
-    &.placeholder {
-      opacity: .75;
-    }
-    sl-icon.close-btn {
-      cursor: pointer;
-      --sl-icon-size: var(--sl-tab-button-close-icon-size, 14px);
-      background: transparent;
-      border-radius: 4px;
-      margin: 0 -4px 0 4px;
-      &:hover {
-        background-color: rgba(0, 0, 0, .1);
-      }
-    }
-    &.dragged {
-      sl-icon.close-btn {
-        display: none;
-      }
-    }
-  }
-  > div.tab-content {
-    position: relative;
-    height: calc(100% - 30px);
-    > div.tab-view {
-      position: relative;
-      height: 100%;
-      display: none;
-      &.active {
-        display: block;
-      }
-    }
-    > div.dropzone {
-      visibility: hidden;
-      pointer-events: none;
-      position: absolute;
-      inset: 0;
-      z-index: 1;
-      &::before {
-        position: absolute;
-        inset: 0;
-        content: '';
-        transition: all .1s ease-in-out;
-      }
-      &.active {
-        visibility: visible;
-        pointer-events: all;
-      }
-      &.dragover-top {
-        &::before {
-          bottom: 50%;
-          background-color: var(--sl-layout-dropzone-background-color);
-        }
-      }
-      &.dragover-right {
-        &::before {
-          left: 50%;
-          background-color: var(--sl-layout-dropzone-background-color);
-        }
-      }
-      &.dragover-bottom {
-        &::before {
-          top: 50%;
-          background-color: var(--sl-layout-dropzone-background-color);
-        }
-      }
-      &.dragover-left {
-        &::before {
-          right: 50%;
-          background-color: var(--sl-layout-dropzone-background-color);
-        }
-      }
-      &.dragover-left {
-        &::before {
-          right: 50%;
-          background-color: var(--sl-layout-dropzone-background-color);
-        }
-      }
-      &.dragover-center {
-        &::before {
-          inset: 0;
-          background-color: var(--sl-layout-dropzone-background-color);
-        }
-      }
-    }
-  }
-}
diff --git a/packages/@slithe/primer/src/components/popover.scss b/packages/@slithe/primer/src/components/popover.scss
index 27644fe..13f0c49 100644
--- a/packages/@slithe/primer/src/components/popover.scss
+++ b/packages/@slithe/primer/src/components/popover.scss
@@ -1,12 +1,7 @@
-// Light
-:host([sl-theme=light]) {
-  --sl-popover-background-color: rgb(255, 255, 255);
-  --sl-popover-box-shadow: rgba(31, 35, 40, 0.12) 0px 1px 3px, rgba(66, 74, 83, 0.12) 0px 8px 24px;
-}
-// Dark
-:host([sl-theme=dark]) {
-  --sl-popover-background-color: rgb(45, 51, 59);
-  --sl-popover-box-shadow: rgb(68, 76, 86) 0px 0px 0px 1px, rgba(28, 33, 40, 0.85) 0px 16px 32px;
+// Common
+:host {
+  --slithe-primer-popover-background-color: var(--slithe-primer-background-color-3);
+  --slithe-primer-popover-box-shadow: var(--slithe-primer-box-shadow-6);
 }
 // Popover
 div.sl-popover {
@@ -75,8 +70,8 @@ div.sl-popover {
     height: inherit;
     width: inherit;
     overflow: auto;
-    background-color: var(--sl-popover-background-color);
-    box-shadow: var(--sl-popover-box-shadow);
+    background-color: var(--slithe-primer-popover-background-color);
+    box-shadow: var(--slithe-primer-popover-box-shadow);
     border-radius: 12px;
   }
 }
diff --git a/packages/@slithe/primer/src/components/rel.scss b/packages/@slithe/primer/src/components/rel.scss
index 59e03b8..ee92149 100644
--- a/packages/@slithe/primer/src/components/rel.scss
+++ b/packages/@slithe/primer/src/components/rel.scss
@@ -1,3 +1,4 @@
+// Rel
 div.sl-rel {
   height: 100%;
   width: 100%;
diff --git a/packages/@slithe/primer/src/components/spinner.scss b/packages/@slithe/primer/src/components/spinner.scss
index 8440989..6b57f42 100644
--- a/packages/@slithe/primer/src/components/spinner.scss
+++ b/packages/@slithe/primer/src/components/spinner.scss
@@ -1,8 +1,10 @@
+// Spinner
 div.sl-spinner {
 	> svg {
 		animation: 1s linear 0s infinite normal none running infinite-rotation;
 	}
 }
+// Animation
 @keyframes infinite-rotation {
 	100% {
 		transform: rotate(360deg);
diff --git a/packages/@slithe/primer/src/components/splitter.scss b/packages/@slithe/primer/src/components/splitter.scss
index c4b1d0a..c6ef961 100644
--- a/packages/@slithe/primer/src/components/splitter.scss
+++ b/packages/@slithe/primer/src/components/splitter.scss
@@ -1,20 +1,16 @@
-// Light
-:host([sl-theme=light]) {
-  --sl-splitter-divider-border-color: var(--pr-geyser);
-  --sl-splitter-divider-hover-border-color: var(--pr-science-blue);
-}
-// Dark
-:host([sl-theme=dark]) {
-  --sl-splitter-divider-border-color: var(--pr-bright-gray);
-  --sl-splitter-divider-hover-border-color: var(--pr-malibu);
+// Common
+:host {
+  --slithe-primer-splitter-divider-border-color: var(--slithe-primer-border-color-2);
+  --slithe-primer-splitter-divider-hover-border-color: var(--slithe-primer-outline-color-focus);
 }
+// Splitter
 div.sl-splitter {
   height: 100%;
   display: flex;
   overflow: hidden;
   > div.pane {
     position: relative;
-    overflow: var(--sl-splitter-overflow, auto);
+    overflow: var(--slithe-primer-splitter-overflow, auto);
     > div.catcher {
       position: absolute;
       inset: 0;
@@ -28,14 +24,14 @@ div.sl-splitter {
       pointer-events: none;
     }
     > div.divider {
-      background-color: var(--sl-splitter-divider-border-color);
+      background-color: var(--slithe-primer-splitter-divider-border-color);
       transition: all ease-in-out .25s;
       transition-delay: .25s;
     }
     &:hover {
       > div.divider {
-        background-color: var(--sl-splitter-divider-hover-border-color);
-        box-shadow: var(--sl-splitter-divider-hover-border-color) 0px 0px 0px 1px;
+        background-color: var(--slithe-primer-splitter-divider-hover-border-color);
+        box-shadow: var(--slithe-primer-splitter-divider-hover-border-color) 0px 0px 0px 1px;
       }
     }
   }
@@ -67,6 +63,7 @@ div.sl-splitter {
     }
   }
 }
+// Animation
 @keyframes fade-offset {
   0% {
     opacity: 0;
diff --git a/packages/@slithe/primer/src/components/tab.scss b/packages/@slithe/primer/src/components/tab.scss
index b8c66bf..dd7b21a 100644
--- a/packages/@slithe/primer/src/components/tab.scss
+++ b/packages/@slithe/primer/src/components/tab.scss
@@ -1,68 +1,52 @@
-// Light
-:host([sl-theme=light]) {
-  --sl-tab-border-color: transparent;
-  --sl-tab-button-color: var(--pr-shark);
-  --sl-tab-button-hover-background-color: rgb(243, 244, 246);
-  --sl-tab-button-active-background-color: rgb(238, 239, 242);
+// Common
+:host {
+  --slithe-primer-tab-border-color: var(--slithe-primer-transparent);
+  --slithe-primer-tab-button-color: var(--slithe-primer-text-color);
+  --slithe-primer-tab-button-hover-background-color: var(--slithe-primer-background-color-hover);
+  --slithe-primer-tab-button-active-background-color: var(--slithe-primer-background-color-active);
 }
 // Active
-:host([sl-theme=light][active]) {
-  --sl-tab-border-color: var(--pr-salmon);
-  --sl-tab-button-font-weight: 500;
-}
-// Dark
-:host([sl-theme=dark]) {
-  --sl-tab-border-color: transparent;
-  --sl-tab-button-color: var(--pr-norborne);
-  --sl-tab-button-hover-background-color: rgb(68, 76, 86);
-  --sl-tab-button-active-background-color: rgb(45, 51, 59);
-}
-// Active
-:host([sl-theme=dark][active]) {
-  --sl-tab-border-color: var(--pr-tan-hide);
-  --sl-tab-button-font-weight: 500;
-}
-// Dragged
-:host(.dragged) {
-  --sl-tab-border-color: transparent !important;
-  --sl-tab-button-dragged-background-color: var(--sl-tab-button-hover-background-color);
+:host([active]) {
+  --slithe-primer-tab-border-color: var(--slithe-primer-border-color-primary);
+  --slithe-primer-tab-button-font-weight: 500;
 }
 // Tab
 li.sl-tab {
   position: relative;
   box-sizing: border-box;
-  padding: var(--sl-tab-padding, 8px 4px);
+  padding: var(--slithe-primer-tab-padding, 8px 4px);
   margin-bottom: -1px;
-  border-bottom: 2px solid var(--sl-tab-border-color, transparent);
+  border-bottom: 2px solid var(--slithe-primer-tab-border-color, transparent);
   list-style: none;
   > button {
     display: inline-flex;
     align-items: center;
     flex-direction: row;
-    font-family: var(--pr-font-family);
+    font-family: var(--slithe-primer-font-family);
     position: relative;
     border: none;
-    background-color: var(--sl-tab-button-dragged-background-color, transparent);
-    color: var(--sl-tab-button-color);
+    background-color: transparent;
+    color: var(--slithe-primer-tab-button-color);
     border-radius: 6px;
-    padding: var(--sl-tab-button-padding, 5px 16px);
-    font-weight: var(--sl-tab-button-font-weight, 400);
-    font-size: var(--sl-tab-button-font-size, 14px);
+    padding: var(--slithe-primer-tab-button-padding, 5px 16px);
+    font-weight: var(--slithe-primer-tab-button-font-weight, 400);
+    font-size: var(--slithe-primer-tab-button-font-size, 14px);
     user-select: none;
     white-space: nowrap;
     vertical-align: middle;
+    cursor: pointer;
     &:hover {
-      background-color: var(--sl-tab-button-hover-background-color);
-      box-shadow: var(--sl-tab-button-hover-box-shadow, unset);
+      background-color: var(--slithe-primer-tab-button-hover-background-color);
+      box-shadow: var(--slithe-primer-tab-button-hover-box-shadow, unset);
     }
     &:active {
-      background-color: var(--sl-tab-button-active-background-color);
-      box-shadow: var(--sl-tab-button-active-box-shadow, unset);
+      background-color: var(--slithe-primer-tab-button-active-background-color);
+      box-shadow: var(--slithe-primer-tab-button-active-box-shadow, unset);
     }
     &:focus-visible {
-      outline: 2px solid var(--sl-tab-button-outline-color);
+      outline: 2px solid var(--slithe-primer-tab-button-outline-color);
       outline-offset: -2px;
-      box-shadow: var(--sl-tab-button-focus-box-shadow, unset);
+      box-shadow: var(--slithe-primer-tab-button-focus-box-shadow, unset);
     }
   }
 }
diff --git a/packages/@slithe/primer/src/components/tabs.scss b/packages/@slithe/primer/src/components/tabs.scss
index 9ca1ffd..f0e999d 100644
--- a/packages/@slithe/primer/src/components/tabs.scss
+++ b/packages/@slithe/primer/src/components/tabs.scss
@@ -1,32 +1,26 @@
-// Light
-:host([sl-theme=light]) {
-  --sl-tabs-background-color: var(--pr-white);
-  --sl-tabs-color: var(--pr-shark);
-  --sl-tabs-border-color: var(--pr-geyser);
-}
-// Dark
-:host([sl-theme=dark]) {
-  --sl-tabs-background-color: var(--pr-bunker);
-  --sl-tabs-color: var(--pr-karpa-kora);
-  --sl-tabs-border-color: var(--pr-bright-gray);
+// Common
+:host {
+  --slithe-primer-tabs-background-color: var(--slithe-primer-background-color-2);
+  --slithe-primer-tabs-color: var(--slithe-primer-text-color);
+  --slithe-primer-tabs-border-color: var(--slithe-primer-border-color-2);
 }
 // Small
 :host([small]) {
-  --sl-tab-padding: 4px 2px;
-  --sl-tab-button-font-size: 12px;
-  --sl-tab-button-close-icon-size: 12px;
+  --slithe-primer-tab-padding: 4px 2px;
+  --slithe-primer-tab-button-font-size: 12px;
+  --slithe-primer-tab-button-close-icon-size: 12px;
 }
 // Tabs
 nav.sl-tabs {
   width: 100%;
-  background-color: var(--sl-tabs-background-color);
-  color: var(--sl-tabs-color);
+  background-color: var(--slithe-primer-tabs-background-color);
+  color: var(--slithe-primer-tabs-color);
   > ul {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: row;
-    border-bottom: 1px solid var(--sl-tabs-border-color);
+    border-bottom: 1px solid var(--slithe-primer-tabs-border-color);
   }
 }
diff --git a/packages/@slithe/primer/src/components/tooltip.scss b/packages/@slithe/primer/src/components/tooltip.scss
index 1856618..7fa09d6 100644
--- a/packages/@slithe/primer/src/components/tooltip.scss
+++ b/packages/@slithe/primer/src/components/tooltip.scss
@@ -1,24 +1,19 @@
-// Light
-:host([sl-theme=light]) {
-  --sl-tooltip-background-color: var(--pr-shark);
-  --sl-tooltip-color: var(--pr-white);
-  --sl-tooltip-border-color: transparent;
-}
-// Dark
-:host([sl-theme=dark]) {
-  --sl-tooltip-background-color: var(--pr-pale-sky);
-  --sl-tooltip-color: var(--pr-white);
-  --sl-tooltip-border-color: transparent;
+// Common
+:host {
+  --slithe-primer-tooltip-background-color: var(--slithe-primer-background-color-4);
+  --slithe-primer-tooltip-color: var(--slithe-primer-text-color-3);
+  --slithe-primer-tooltip-border-color: var(--slithe-primer-transparent);
 }
 // Tooltip
 div.sl-tooltip {
   position: fixed;
   z-index: 5;
   display: inline-flex;
-  background-color: var(--sl-tooltip-background-color);
-  color: var(--sl-tooltip-color);
-  border: 1px solid var(--sl-tooltip-border-color);
+  background-color: var(--slithe-primer-tooltip-background-color);
+  color: var(--slithe-primer-tooltip-color);
+  border: 1px solid var(--slithe-primer-tooltip-border-color);
   border-radius: 6px;
   padding: .5em .75em;
   user-select: none;
+  font-size: 12px;
 }
diff --git a/packages/@slithe/primer/src/global.css b/packages/@slithe/primer/src/global.css
index 0e20824..0cf10a2 100644
--- a/packages/@slithe/primer/src/global.css
+++ b/packages/@slithe/primer/src/global.css
@@ -1,5 +1,2 @@
-/* Fonts */
 @import './fonts/fira-sans/fira-sans.css';
 @import './fonts/fira-mono/fira-mono.css';
-/* Variables */
-@import './variables.css';
diff --git a/packages/@slithe/primer/src/index.ts b/packages/@slithe/primer/src/index.ts
index 52fd6d2..78f02fe 100644
--- a/packages/@slithe/primer/src/index.ts
+++ b/packages/@slithe/primer/src/index.ts
@@ -1,14 +1,18 @@
-// Helpers
+import { type Theme } from 'slithe';
 import octicons from '@primer/octicons';
+import variables from './variables.css?raw';
 // Constants
+const variablesStylesheet = new CSSStyleSheet();
 const styles = import.meta.glob<{ default: string }>('./components/**/*.scss', { query: '?inline', eager: true });
-const components: Record<string, CSSStyleSheet> = {};
+const components: Record<string, CSSStyleSheet[]> = {};
 const icons: Record<string, string> = {};
 
+variablesStylesheet.replaceSync(variables);
+
 for (const style in styles) {
-  const stylesheet = new CSSStyleSheet();
-  stylesheet.replaceSync(styles[style].default);
-  components[style.split('/')[2].slice(0, -5)] = stylesheet;
+  const componentStylesheet = new CSSStyleSheet();
+  componentStylesheet.replaceSync(styles[style].default);
+  components[style.split('/')[2].slice(0, -5)] = [variablesStylesheet, componentStylesheet];
 }
 for (const [name, octicon] of Object.entries(octicons)) {
   icons[name] = octicon.toSVG({ height: 16, width: 16 });
@@ -18,4 +22,4 @@ export default {
   components,
   icons,
   fallbackIcon: icons['diff-ignored']
-};
+} satisfies Theme;
diff --git a/packages/@slithe/primer/src/variables.css b/packages/@slithe/primer/src/variables.css
index 785d6f5..f99688a 100644
--- a/packages/@slithe/primer/src/variables.css
+++ b/packages/@slithe/primer/src/variables.css
@@ -1,48 +1,131 @@
-:root {
-  --pr-font-family: 'Fira Sans';
-  --pr-font-family-mono: 'Fira Mono';
-  --pr-white: #FFFFFF;
-  --pr-aqua-haze: #F6F8FA;
-  --pr-athens-gray: #F3F4F6;
-  --pr-clewd: #EBECF0;
-  --pr-shark: #24292F;
-  --pr-bunker: #22272E;
-  --pr-incomplete-eclipse: #0D1117;
-  --pr-black-squared: #010409;
-  --pr-iron: #DCDDDE;
-  --pr-bright-gray: #373E47;
-  --pr-sibuya-game-reserve: #373E47;
-  --pr-karpa-kora: #ADBAC7;
-  --pr-norborne: #C9D1D9;
-  --pr-catskill-white: #E6EDF3;
-  --pr-dark-sea: #444C56;
-  --pr-slate-gray: #768390;
-  --pr-nothing-but-life: #3D444D;
-  --pr-nevada: #636E7B;
-  --pr-geyser: #D0D7DE;
-  --pr-dark-artifact: #2D333B;
-  --pr-science-blue: #0969DA;
-  --pr-true-blue: #085EC4;
-  --pr-endeavour: #0754AE;
-  --pr-dodger-blue: #2F81F7;
-  --pr-cornflower-blue: #539BF5;
-  --pr-malibu: #58A6FF;
-  --pr-outer-space: #30363D;
-  --pr-cardinal: #CF222E;
-  --pr-shiraz: #A40E26;
-  --pr-miyamoto-red: #C11F2A;
-  --pr-sunset-orange: #F85149;
-  --pr-punch: #DA3633;
-  --pr-tall-poppy: #B62324;
-  --pr-shuttle-gray: #57606A;
-  --pr-regent-gray: #8B949E;
-  --pr-pale-sky: #6E7681;
-  --pr-eucalyptus: #2DA44E;
-  --pr-pirate-gold: #BF8700;
-  --pr-salmon: #FD8C73;
-  --pr-tan-hide: #F78166;
-  --pr-pale-diamond: #DDF4FF;
-  --pr-fair-pink: #FFEBE9;
-  --pr-scandal: #DAFBE1;
-  --pr-lemon-chiffon: #FFF8C5;
+/* Common */
+:host {
+  --slithe-primer-font-family: 'Fira Sans';
+  --slithe-primer-font-family-mono: 'Fira Mono';
+  --slithe-primer-transparent: transparent;
+  --slithe-primer-box-shadow-transparent: 0 0 transparent;
+}
+/* Light */
+:host([sl-theme=light]) {
+  --slithe-primer-text-color: #24292F;
+  --slithe-primer-text-color-2: #656D76;
+  --slithe-primer-text-color-3: #FFFFFF;
+  --slithe-primer-text-color-4: #57606A;
+  --slithe-primer-text-color-primary: #0969DA;
+  --slithe-primer-text-color-danger: #D1242F;
+  --slithe-primer-text-color-info: #0969DA;
+  --slithe-primer-text-color-success: #2DA44E;
+  --slithe-primer-text-color-success-2: #1A7F37;
+  --slithe-primer-text-color-warn: #BF8700;
+  --slithe-primer-text-color-error: #CF222E;
+  --slithe-primer-text-color-error-2: #D1242F;
+
+  --slithe-primer-background-color: #F6F8FA;
+  --slithe-primer-background-color-2: #FFFFFF;
+  --slithe-primer-background-color-3: #F6F8FA;
+  --slithe-primer-background-color-4: #24292F;
+  --slithe-primer-background-color-primary: #0969DA;
+  --slithe-primer-background-color-info: #DDF4FF;
+  --slithe-primer-background-color-success: #DAFBE1;
+  --slithe-primer-background-color-warn: #FFF8C5;
+  --slithe-primer-background-color-error: #FFEBE9;
+
+  --slithe-primer-background-color-hover: #F3F4F6;
+  --slithe-primer-background-color-primary-hover: #085EC4;
+  --slithe-primer-background-color-danger-hover: rgba(255, 235, 233, .64);
+  --slithe-primer-background-color-danger-hover-2: #A40E26;
+
+  --slithe-primer-background-color-active: #EBECF0;
+  --slithe-primer-background-color-primary-active: #0754AE;
+  --slithe-primer-background-color-danger-active: #FFEBE9;
+  --slithe-primer-background-color-danger-active-2: #C11F2A;
+
+  --slithe-primer-border-color: rgba(27, 31, 36, .15);
+  --slithe-primer-border-color-2: #D0D7DE;
+  --slithe-primer-border-color-3: #6E7781;
+  --slithe-primer-border-color-primary: #0969DA;
+  --slithe-primer-border-color-danger: #CF222E;
+  --slithe-primer-border-color-info: rgba(47, 59, 69, 0.4);
+  --slithe-primer-border-color-success: rgba(74, 194, 107, .4);
+  --slithe-primer-border-color-warn: rgba(212, 167, 44, .4);
+  --slithe-primer-border-color-error: rgba(255, 129, 130, .4);
+
+  --slithe-primer-border-color-hover: rgba(27, 31, 36, .15);
+  --slithe-primer-border-color-danger-hover: rgba(27, 31, 36, .15);
+
+  --slithe-primer-border-color-active: rgba(27, 31, 36, .15);
+  --slithe-primer-border-color-danger-active: rgba(27, 31, 36, .15);
+
+  --slithe-primer-divider-color: rgba(208, 215, 222, .48);
+
+  --slithe-primer-outline-color-focus: #0969DA;
+
+  --slithe-primer-box-shadow: 0 1px 0 rgba(27, 31, 36, .04), inset 0 1px 0 rgba(255, 255, 255, .25);
+  --slithe-primer-box-shadow-2: 0 1px 0 rgba(27, 31, 36, .1), inset 0 1px 0 rgba(255, 255, 255, .03);
+  --slithe-primer-box-shadow-3: inset 0 1px 0 rgba(76, 0, 20, .2);
+  --slithe-primer-box-shadow-4: inset 0 0 0 1px #D0D7DE, 0 8px 24px rgba(140, 149, 159, 0.2);
+  --slithe-primer-box-shadow-5: inset 0 1px 0 rgba(208, 215, 222, .2);
+  --slithe-primer-box-shadow-6: rgba(31, 35, 40, .12) 0px 1px 3px, rgba(66, 74, 83, .12) 0px 8px 24px;
+}
+/* Dark */
+:host([sl-theme=dark]) {
+  --slithe-primer-text-color: #ADBAC7;
+  --slithe-primer-text-color-2: #768390;
+  --slithe-primer-text-color-3: #FFFFFF;
+  --slithe-primer-text-color-4: #8B949E;
+  --slithe-primer-text-color-primary: #539BF5;
+  --slithe-primer-text-color-danger: #F47067;
+  --slithe-primer-text-color-info: #539BF5;
+  --slithe-primer-text-color-success: #2DA44E;
+  --slithe-primer-text-color-success-2: #57AB5A;
+  --slithe-primer-text-color-warn: #BF8700;
+  --slithe-primer-text-color-error: #CF222E;
+  --slithe-primer-text-color-error-2: #E5534B;
+
+  --slithe-primer-background-color: #373E47;
+  --slithe-primer-background-color-2: #22272E;
+  --slithe-primer-background-color-3: #3D444D;
+  --slithe-primer-background-color-4: #6E7681;
+  --slithe-primer-background-color-primary: #0754AE;
+  --slithe-primer-background-color-info: rgba(65, 132, 228, .1);
+  --slithe-primer-background-color-success: rgba(70, 149, 74, .15);
+  --slithe-primer-background-color-warn: rgba(174, 124, 20, .15);
+  --slithe-primer-background-color-error: rgba(229, 83, 75, .1);
+
+  --slithe-primer-background-color-hover: #444C56;
+  --slithe-primer-background-color-primary-hover: #085EC4;
+  --slithe-primer-background-color-danger-hover: rgba(229, 83, 75, .16);
+  --slithe-primer-background-color-danger-hover-2: #DA3633;
+
+  --slithe-primer-background-color-active: #3D444D;
+  --slithe-primer-background-color-primary-active: #0754AE;
+  --slithe-primer-background-color-danger-active: rgba(229, 83, 75, .24);
+  --slithe-primer-background-color-danger-active-2: #B62324;
+
+  --slithe-primer-border-color: rgba(205, 217, 229, .1);
+  --slithe-primer-border-color-2: #373E47;
+  --slithe-primer-border-color-3: #636E7B;
+  --slithe-primer-border-color-primary: #539BF5;
+  --slithe-primer-border-color-danger: #DA3633;
+  --slithe-primer-border-color-info: rgba(65, 132, 228, .4);
+  --slithe-primer-border-color-success: rgba(70, 149, 74, .4);
+  --slithe-primer-border-color-warn: rgba(174, 124, 20, .4);
+  --slithe-primer-border-color-error: rgba(229, 83, 75, .4);
+
+  --slithe-primer-border-color-hover: #768390;
+  --slithe-primer-border-color-danger-hover: #F85149;
+
+  --slithe-primer-border-color-active: #636E7B;
+  --slithe-primer-border-color-danger-active: #FD8C73;
+
+  --slithe-primer-divider-color: rgba(68, 76, 86, .48);
+  
+  --slithe-primer-outline-color-focus: #539BF5;
+
+  --slithe-primer-box-shadow: 0 0 transparent;
+  --slithe-primer-box-shadow-2: 0 1px 0 rgba(27, 31, 36, .1), inset 0 1px 0 rgba(255, 255, 255, .03);
+  --slithe-primer-box-shadow-3: 0 0 transparent;
+  --slithe-primer-box-shadow-4: inset 0 0 0 1px #30363D, 0 8px 24px #010409;
+  --slithe-primer-box-shadow-5: 0 0 transparent;
+  --slithe-primer-box-shadow-6: #444C56 0px 0px 0px 1px, rgba(28, 33, 40, 0.85) 0px 16px 32px;
 }
diff --git a/packages/slithe/src/components/sl-avatar/sl-avatar.tsx b/packages/slithe/src/components/sl-avatar/sl-avatar.tsx
index 0f4ef58..6dc73ea 100644
--- a/packages/slithe/src/components/sl-avatar/sl-avatar.tsx
+++ b/packages/slithe/src/components/sl-avatar/sl-avatar.tsx
@@ -13,7 +13,6 @@ export class SlitheAvatar {
   @Prop({ reflect: true }) name: string;
   @Prop() src?: string;
   @Prop() size?: string = '32px';
-  @Prop() background?: string = 'var(--sl-avatar-background-color)';
   // Modifiers
   @Prop({ reflect: true }) circle?: boolean;
   @Prop({ reflect: true }) square?: boolean;
@@ -21,8 +20,7 @@ export class SlitheAvatar {
   get style () {
     return {
       'width': this.size,
-      'height': this.size,
-      'background-color': this.background
+      'height': this.size
     };
   }
   get initialsStyle () {
@@ -31,7 +29,7 @@ export class SlitheAvatar {
     };
   }
   get initials () {
-    const rgx = new RegExp(/(\p{L}{1})\p{L}+/, 'gu');
+    const rgx = new RegExp(/(\p{L}{1})\p{L}+/u, 'gu');
     const splits = [...this.name.matchAll(rgx)] || [];
     return ((splits.shift()?.[1] || '') + (splits.pop()?.[1] || '')).toUpperCase();
   }
diff --git a/packages/slithe/src/components/sl-button/sl-button.tsx b/packages/slithe/src/components/sl-button/sl-button.tsx
index 67aeba9..4080199 100644
--- a/packages/slithe/src/components/sl-button/sl-button.tsx
+++ b/packages/slithe/src/components/sl-button/sl-button.tsx
@@ -17,7 +17,6 @@ export class SlitheButton {
   @Prop({ reflect: true }) link?: boolean = false;
   // Modifiers
   @Prop({ reflect: true }) primary?: boolean;
-  @Prop({ reflect: true }) outline?: boolean;
   @Prop({ reflect: true }) danger?: boolean;
   @Prop({ reflect: true }) borderless?: boolean;
   @Prop({ reflect: true }) small?: boolean;
diff --git a/packages/slithe/src/components/sl-icon/sl-icon.tsx b/packages/slithe/src/components/sl-icon/sl-icon.tsx
index a7ff866..a4986b8 100644
--- a/packages/slithe/src/components/sl-icon/sl-icon.tsx
+++ b/packages/slithe/src/components/sl-icon/sl-icon.tsx
@@ -17,8 +17,8 @@ export class SlitheIcon {
     return {
       'display': 'inline-flex',
       'align-items': 'center',
-      'width': `var(--sl-icon-size, ${this.size})`,
-      'height': `var(--sl-icon-size, ${this.size})`
+      'width': `var(--slithe-primer-icon-size, ${this.size})`,
+      'height': `var(--slithe-primer-icon-size, ${this.size})`
     };
   }
   get svg () {
diff --git a/packages/slithe/src/components/sl-layout/sl-layout.e2e.ts b/packages/slithe/src/components/sl-layout/sl-layout.e2e.ts
deleted file mode 100644
index 3b78bf3..0000000
--- a/packages/slithe/src/components/sl-layout/sl-layout.e2e.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// Helpers
-import { newE2EPage } from '@stencil/core/testing';
-
-describe('sl-layout', () => {
-  it('renders', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<sl-layout></sl-layout>');
-    const element = await page.find('sl-layout');
-    expect(element).toHaveClass('hydrated');
-  });
-});
diff --git a/packages/slithe/src/components/sl-layout/sl-layout.spec.ts b/packages/slithe/src/components/sl-layout/sl-layout.spec.ts
deleted file mode 100644
index 84be440..0000000
--- a/packages/slithe/src/components/sl-layout/sl-layout.spec.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Helpers
-import { newSpecPage } from '@stencil/core/testing';
-import { SlitheLayout } from './sl-layout';
-
-describe('sl-layout', () => {
-  it('renders', async () => {
-    const { root } = await newSpecPage({
-      components: [SlitheLayout],
-      html: '<sl-layout></sl-layout>',
-    });
-    expect(root).toBeTruthy();
-  });
-});
diff --git a/packages/slithe/src/components/sl-layout/sl-layout.tsx b/packages/slithe/src/components/sl-layout/sl-layout.tsx
deleted file mode 100644
index f6dfe9e..0000000
--- a/packages/slithe/src/components/sl-layout/sl-layout.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-// Helpers
-import { Component, Element, h, Prop, State, Fragment, Method, Event, EventEmitter, Watch } from '@stencil/core';
-import {
-  Model,
-  computeModel,
-  SplitterModel,
-  TabsModel,
-  resizeSplitterInModel,
-  setActiveTabInModel,
-  removeTabInModel,
-  sortTabInModel,
-  moveTabInModel,
-  getChildModelIndexModel,
-  ensureValidModel,
-  dropTabInModel
-} from '../../helpers/model';
-import { closest, createDraggableList, createDropzoneBox, Position, querySelectorAll } from '../../helpers/dom';
-import { clone } from '../../helpers/object';
-import { syncWithTheme, updateStyle } from '../../helpers/theme';
-import { Deferred } from '../../helpers/time';
-import { config } from '../../helpers/config';
-
-/**
- * @import Model,slithe
- */
-@Component({
-  tag: 'sl-layout',
-  shadow: { delegatesFocus: true }
-})
-export class SlitheLayout {
-  @Element() host!: HTMLSlLayoutElement;
-  private tabsContainer!: HTMLSlTabsElement;
-  private tabsContent!: HTMLDivElement;
-  private ready = new Deferred();
-  private group!: string;
-  // Props
-  @Prop() model?: Model = { id: crypto.randomUUID(), type: 'tabs', items: [] };
-  // State
-  @State() root: boolean = false;
-  @State() dragging: boolean = false;
-  @State() _model: Model;
-  @State() renderIndex: number = 0;
-  // Events
-  @Event({ eventName: 'update', bubbles: false }) updateEvent: EventEmitter<Model>;
-  @Event({ eventName: 'close', bubbles: false }) closeEvent: EventEmitter<string>;
-  // Methods
-  /**
-   * @private
-   */
-  @Method()
-  async getGroup () {
-    if (this.group) {
-      return this.group;
-    } else {
-      const parentLayout = closest<HTMLSlLayoutElement>(this.host.parentElement, 'sl-layout');
-      return !parentLayout ? crypto.randomUUID() : await parentLayout.getGroup();
-    }
-  }
-  /**
-   * @private
-   */
-  @Method()
-  async getRootLayout (): Promise<HTMLSlLayoutElement> {
-    if (this.root) {
-      return this.host;
-    } else {
-      return closest<HTMLSlLayoutElement>(this.host.parentElement, 'sl-layout').getRootLayout();
-    }
-  }
-  /**
-   * @private
-   */
-  @Method()
-  async moveTab (id: string, from: string, oldIndex: number, to: string, newIndex: number) {
-    const tabModel = getChildModelIndexModel(this._model, id);
-    this._model = ensureValidModel(moveTabInModel(this._model, tabModel, from, oldIndex, to, newIndex));
-    this.emitUpdate();
-  }
-  /**
-   * @private
-   */
-  @Method()
-  async sortTab (id: string, oldIndex: number, newIndex: number) {
-    this._model = sortTabInModel(this._model, id, oldIndex, newIndex);
-    this.emitUpdate();
-  }
-  /**
-   * @private
-   */
-  @Method()
-  async selectTab (id: string) {
-    this._model = setActiveTabInModel(this._model, id);
-    this.emitUpdate();
-  }
-  /**
-   * @private
-   */
-  @Method()
-  async removeTab (id: string) {
-    this._model = ensureValidModel(removeTabInModel(this._model, id));
-    this.emitClose(id);
-    this.emitUpdate();
-  }
-  /**
-   * @private
-   */
-  @Method()
-  async resizeSplitter (id: string, size: number) {
-    this._model = resizeSplitterInModel(this._model, id, size);
-    this.emitUpdate();
-  }
-  /**
-   * @private
-   */
-  @Method()
-  async dropTab (tabId: string, containerId: string, position: Position) {
-    const tabModel = getChildModelIndexModel(this._model, tabId);
-    this._model = ensureValidModel(dropTabInModel(this._model, tabModel, containerId, position));
-    this.emitUpdate();
-  }
-  /**
-   * @private
-   */
-  @Method()
-  async setRootDragging (dragging: boolean) {
-    const children = querySelectorAll<HTMLSlLayoutElement>(this.host, 'sl-layout');
-    for (const child of children) {
-      child.setDragging(dragging);
-    }
-  }
-  /**
-   * @private
-   */
-  @Method()
-  async setDragging (dragging: boolean) {
-    this.dragging = dragging;
-  }
-  private getSlots (model: Model) {
-    const slots: string[] = [];
-    switch (model.type) {
-      case 'tabs': {
-        for (const child of model.items) {
-          slots.push(child.viewSlot);
-        }
-        break;
-      }
-      case 'splitter': {
-        for (const child of model.items) {
-          slots.push(...this.getSlots(child));
-        }
-        break;
-      }
-    }
-    return slots;
-  }
-  private async _selectTab (id: string) {
-    if (this._model.type === 'tabs') {
-      const rootLayout = await this.getRootLayout();
-      await rootLayout.selectTab(id);
-    }
-  }
-  private async _removeTab (e: MouseEvent, id: string) {
-    e.stopPropagation();
-    if (this._model.type === 'tabs') {
-      const rootLayout = await this.getRootLayout();
-      await rootLayout.removeTab(id);
-    }
-  }
-  private emitClose (id: string) {
-    this.closeEvent.emit(id);
-  }
-  private emitUpdate () {
-    this.updateEvent.emit(clone(this._model));
-    this.renderIndex++;
-  }
-  private async _setDragging (dragging: boolean) {
-    const rootLayout = await this.getRootLayout();
-    await rootLayout.setRootDragging(dragging);
-  }
-  private _setTabsRef (el: HTMLSlTabsElement) {
-    this.tabsContainer = el;
-    this.createSortableTabs();
-  }
-  private _setContentRef (el: HTMLDivElement) {
-    this.tabsContent = el;
-    this.createSortableTabs();
-  }
-  private createSortableTabs () {
-    if (this._model.type === 'tabs' && this.tabsContainer && this.tabsContent) {
-      createDraggableList({
-        container: this.tabsContainer,
-        disabled: this._model.droppable === false,
-        group: this.group,
-        items: 'sl-tab',
-        filter: '.draggable',
-        onStart: () => {
-          this._setDragging(true);
-        },
-        onSort: async (id, from, to) => {
-          if (from.id === to.id) {
-            const rootLayout = await this.getRootLayout();
-            await rootLayout.sortTab(id, from.index, to.index);
-          } else {
-            const rootLayout = await this.getRootLayout();
-            await rootLayout.moveTab(id, from.id, from.index, to.id, to.index);
-          }
-        },
-        onEnd: () => {
-          this._setDragging(false);
-        }
-      });
-      createDropzoneBox({
-        container: this.tabsContent,
-        disabled: this._model.splittable === false,
-        onDrop: async (item, position) => {
-          const rootLayout = await this.getRootLayout();
-          await rootLayout.dropTab(item.id, this._model.id, position);
-        }
-      });
-    }
-  }
-  // Watchers
-  @Watch('model')
-  onModelChanged(newModel: Model) {
-    this._model = computeModel(newModel);
-  }
-  // Handlers
-  private handleResizeStart () {
-    this._setDragging(true);
-  }
-  private async handleResizeEnd (e: CustomEvent<number>) {
-    e.stopPropagation();
-    this._setDragging(false);
-    if (this._model.type === 'splitter') {
-      const rootLayout = await this.getRootLayout();
-      await rootLayout.resizeSplitter(this._model.id, e.detail);
-    }
-  }
-  // Lifecycle
-  async connectedCallback () {
-    syncWithTheme(this.host);
-    updateStyle(this.host, {
-      'display': 'block',
-      'position': 'relative',
-      'height': '100%'
-    });
-    this._model = computeModel(this.model);
-    this.root = !closest<HTMLSlLayoutElement>(this.host.parentElement, 'sl-layout');
-    this.group = await this.getGroup();
-    this.ready.resolve();
-  }
-  async componentDidLoad () {
-    await this.ready.promise;
-  }
-  // Template
-  private renderTabs (tabs: TabsModel) {
-    return (
-      <Fragment>
-        <sl-tabs id={tabs.id} ref={(el) => this._setTabsRef(el)} small>
-          {tabs.items.map((item) => (
-            <sl-tab
-              class={{ draggable: item.draggable !== false }}
-              id={item.id}
-              key={item.id}
-              active={item.active}
-              onClick={() => this._selectTab(item.id)}
-            >
-              {item.name}
-              {item.closable && <sl-icon class='close-btn' name={config.closeIcon} onClick={(e) => this._removeTab(e, item.id)}/>}
-            </sl-tab>
-          ))}
-        </sl-tabs>
-        <div class="tab-content" ref={(el) => this._setContentRef(el)}>
-          {tabs.items.map((item) => (
-            <div class={{ 'tab-view': true, 'active': item.active && !item.placeholder }}>
-              <slot name={item.viewSlot}/>
-            </div>
-          ))}
-        </div>
-      </Fragment>
-    );
-  }
-  private renderSplitter (splitter: SplitterModel) {
-    return (
-      <sl-splitter
-        vertical={splitter.direction === 'vertical'}
-        blueSize={splitter.blueSize}
-        minBlue={splitter.minBlue}
-        maxBlue={splitter.maxBlue}
-        disabled={splitter.disabled}
-        onResizeStart={() => this.handleResizeStart()}
-        onResizeEnd={(e) => this.handleResizeEnd(e)}
-      >
-        <sl-layout slot="blue" model={splitter.items[0]}>
-          {this.getSlots(splitter.items[0]).map((slot) => (
-            <slot name={slot} slot={slot}/>
-          ))}
-        </sl-layout>
-        <sl-layout slot="green" model={splitter.items[1]}>
-          {this.getSlots(splitter.items[1]).map((slot) => (
-            <slot name={slot} slot={slot}/>
-          ))}
-        </sl-layout>
-      </sl-splitter>
-    );
-  }
-  render () {
-    return (
-      <div key={this._model.id + this.renderIndex} class='sl-layout'>
-        {this._model.type === 'tabs' && this.renderTabs(this._model)}
-        {this._model.type === 'splitter' && this.renderSplitter(this._model)}
-        {this._model.type !== 'splitter' && this.getSlots(this._model).map((slot) => (
-          <slot name={slot} slot={slot}/>
-        ))}
-      </div>
-    );
-  }
-}
diff --git a/packages/slithe/src/helpers/dom.ts b/packages/slithe/src/helpers/dom.ts
index 0e3f269..ed3b56f 100644
--- a/packages/slithe/src/helpers/dom.ts
+++ b/packages/slithe/src/helpers/dom.ts
@@ -1,201 +1,3 @@
-// Helpers
-import { createStore } from '@stencil/store';
-
-type DNDPosition = { id: string; index: number; };
-
-interface DNDEvent {
-  item: HTMLElement;
-  event: PointerEvent;
-  group: string;
-  offsetX: number;
-  offsetY: number;
-  clone?: HTMLElement;
-  from?: DNDPosition;
-  to?: DNDPosition;
-}
-interface DND {
-  dndEvent: DNDEvent|null;
-  dropzone: boolean;
-  dropping: boolean;
-}
-
-const { state, onChange } = createStore<DND>({
-  dndEvent: null,
-  dropzone: false,
-  dropping: false
-});
-
-export { state as dnd };
-
-interface CreateDraggableListOptions {
-  container: HTMLElement;
-  disabled: boolean;
-  items: string;
-  filter: string;
-  group: string;
-  onStart: (item: HTMLElement) => void;
-  onEnd: () => void;
-  onSort: (id: string, from: DNDPosition, to: DNDPosition) => void;
-}
-export function createDraggableList ({ container, disabled, items, filter, group, onStart, onSort, onEnd }: CreateDraggableListOptions) {
-  if (!disabled) {
-    function handleContainerPointerDown (e: PointerEvent) {
-      const item = closest(e.target as HTMLElement, `${items}${filter}`);
-      if (item) {
-        const rect = item.getBoundingClientRect();
-        state.dndEvent = {
-          item,
-          event: e,
-          group,
-          offsetX: e.pageX - rect.left,
-          offsetY: e.pageY - rect.top
-        };
-        window.addEventListener('pointermove', handleWindowPointerMove);
-        window.addEventListener('pointerup', handleWindowPointerUp);
-      }
-    }
-    function handleContainerPointerMove (e: PointerEvent) {
-      if (state.dndEvent && state.dndEvent.clone && state.dndEvent.group === group) {
-        const offsetX = e.pageX - container.getBoundingClientRect().left;
-        let leftSibling: HTMLElement|null = null;
-        const elements = Array.from(querySelectorAll(container, items)).filter((el) => !el.classList.contains('clone') && !el.classList.contains('placeholder'));
-        for (const element of elements) {
-          if (offsetX > (element.offsetLeft + (element.offsetWidth / 2))) {
-            leftSibling = element;
-          }
-        }
-        if (!leftSibling) {
-          removeElement(state.dndEvent.item);
-          container.prepend(state.dndEvent.item);
-        } else {
-          removeElement(state.dndEvent.item);
-          leftSibling.insertAdjacentElement('afterend', state.dndEvent.item);
-        }
-        state.dndEvent.to = {
-          id: container.id,
-          index: Array.from(querySelectorAll(container, items)).findIndex((el) => el === state.dndEvent.item)
-        };
-      }
-    }
-    function handleWindowPointerMove (e: PointerEvent) {
-      if (state.dndEvent.clone) {
-        state.dndEvent.clone.style.top = `${e.pageY - state.dndEvent.offsetY}px`;
-        state.dndEvent.clone.style.left = `${e.pageX - state.dndEvent.offsetX}px`;
-      } else if (Math.abs(e.pageX - state.dndEvent.event.pageX) > 5 || Math.abs(e.pageY - state.dndEvent.event.pageY) > 5) {
-        state.dndEvent.from = {
-          id: container.id,
-          index: Array.from(querySelectorAll(container, items)).findIndex((el) => el === state.dndEvent.item)
-        };
-        state.dndEvent.clone = state.dndEvent.item.cloneNode(true) as HTMLElement;
-        state.dndEvent.clone.classList.add('clone', 'dragged');
-        state.dndEvent.clone.style.zIndex = '1';
-        state.dndEvent.clone.style.pointerEvents = 'none';
-        state.dndEvent.clone.style.position = 'fixed';
-        state.dndEvent.clone.style.top = `${e.pageY - state.dndEvent.offsetY}px`;
-        state.dndEvent.clone.style.left = `${e.pageX - state.dndEvent.offsetX}px`;
-        container.appendChild(state.dndEvent.clone);
-        state.dndEvent.item.classList.add('placeholder');
-        onStart(state.dndEvent.item);
-      }
-    }
-    function handleWindowPointerUp () {
-      if (state.dndEvent) {
-        if (state.dndEvent.item) {
-          state.dndEvent.item.classList.remove('placeholder');
-        }
-        if (state.dndEvent.from && state.dndEvent.to) {
-          onSort(state.dndEvent.item.id, state.dndEvent.from, state.dndEvent.to);
-        }
-        if (state.dndEvent.clone) {
-          removeElement(state.dndEvent.clone);
-        }
-        state.dndEvent.clone = null;
-        state.dndEvent = null;
-      }
-      onEnd();
-      window.removeEventListener('pointermove', handleWindowPointerMove);
-      window.removeEventListener('pointerup', handleWindowPointerUp);
-    }
-    container.addEventListener('pointerdown', handleContainerPointerDown);
-    container.addEventListener('pointermove', handleContainerPointerMove);
-  }
-}
-
-interface CreateDropzoneBoxOptions {
-  container: HTMLElement;
-  disabled: boolean;
-  onDrop: (item: HTMLElement, position: Position) => void;
-}
-export function createDropzoneBox ({ container, disabled, onDrop }: CreateDropzoneBoxOptions) {
-  const existingDropzone = container.querySelector('div.dropzone');
-  if (!disabled) {
-    let position: Position = 'none';
-    let dropItem: HTMLElement|null = null;
-    if (!existingDropzone) {
-      const dropzone = document.createElement('div');
-      dropzone.classList.add('dropzone');
-      container.appendChild(dropzone);
-      onChange('dndEvent', (dndEvent) => {
-        if (dndEvent) {
-          dropItem = dndEvent.item;
-          dropzone.classList.add('active');
-        } else {
-          dropzone.classList.remove('active');
-        }
-      });
-      dropzone.addEventListener('pointermove', (e) => {
-        dropzone.classList.add('active');
-        const pX = e.offsetX * 100 / dropzone.offsetWidth;
-        const pY = e.offsetY * 100 / dropzone.offsetHeight;
-        dropzone.classList.remove('dragover-left');
-        dropzone.classList.remove('dragover-right');
-        dropzone.classList.remove('dragover-top');
-        dropzone.classList.remove('dragover-bottom');
-        dropzone.classList.remove('dragover-center');
-        position = 'none';
-        if (pX < 30) {
-          position = 'left';
-          dropzone.classList.add('dragover-left');
-        } else if (pX > 70) {
-          position = 'right';
-          dropzone.classList.add('dragover-right');
-        } else if (pY < 15) {
-          position = 'top';
-          dropzone.classList.add('dragover-top');
-        } else if (pY > 85) {
-          position = 'bottom';
-          dropzone.classList.add('dragover-bottom');
-        } else {
-          position = 'center';
-          dropzone.classList.add('dragover-center');
-        }
-      });
-      dropzone.addEventListener('pointerleave', (e) => {
-        position = 'none';
-        dropzone.classList.remove('dragover-left');
-        dropzone.classList.remove('dragover-right');
-        dropzone.classList.remove('dragover-top');
-        dropzone.classList.remove('dragover-bottom');
-        dropzone.classList.remove('dragover-center');
-      });
-      dropzone.addEventListener('pointerup', () => {
-        if (position) {
-          onDrop(dropItem, position);
-        }
-        state.dndEvent = null;
-      });
-    }
-  } else if (existingDropzone) {
-    removeElement(existingDropzone);
-  }
-}
-
-export function removeElement (node: Element) {
-  if (node.parentNode) {
-    node.parentNode.removeChild(node);
-  }
-}
-
 export function closest <T extends HTMLElement> (node: Element, selector: string): T|null {
   if (node) {
     const found = node.closest(selector);
diff --git a/packages/slithe/src/helpers/model.ts b/packages/slithe/src/helpers/model.ts
deleted file mode 100644
index cec4094..0000000
--- a/packages/slithe/src/helpers/model.ts
+++ /dev/null
@@ -1,355 +0,0 @@
-// Helpers
-import { clone } from './object';
-import { switchPosition } from './array';
-import { Position } from './dom';
-
-export type TabModel = {
-  id?: string;
-  name: string;
-  viewSlot: string;
-  active?: boolean;
-  placeholder?: boolean;
-  closable?: boolean;
-  draggable?: boolean;
-}
-export type TabsModel = {
-  id: string;
-  type: 'tabs';
-  items: TabModel[];
-  splittable?: boolean;
-  droppable?: boolean;
-}
-export type SplitterModel = {
-  id?: string;
-  type: 'splitter';
-  direction: 'horizontal'|'vertical';
-  items: [Model, Model];
-  blueSize?: number;
-  minBlue?: number;
-  maxBlue?: number;
-  disabled?: boolean;
-}
-export type Model = TabsModel|SplitterModel;
-export function computeModel <T extends Model> (model: T): T {
-  const res = JSON.parse(JSON.stringify(model)) as T;
-  res.id = res.id || crypto.randomUUID();
-  switch (res.type) {
-    case 'tabs': {
-      let hasActive = false;
-      if (res.items.length > 0) {
-        for (let i = 0; i < res.items.length; i++) {
-          res.items[i].id = res.items[i].id || crypto.randomUUID();
-          hasActive = hasActive || res.items[i].active;
-        }
-        if (!hasActive) {
-          res.items[0].active = true;
-        }
-      }
-      break;
-    }
-    case 'splitter': {
-      for (let i = 0; i < res.items.length; i++) {
-        res.items[i] = computeModel(res.items[i]);
-      }
-      break;
-    }
-  }
-  return res;
-}
-export function resizeSplitterInModel (model: Model, id: string, size: number): Model {
-  const res = clone(model);
-  switch (res.type) {
-    case 'splitter': {
-      if (id === res.id) {
-        res.blueSize = size;
-      }
-      for (let i = 0; i < res.items.length; i++) {
-        res.items[i] = resizeSplitterInModel(res.items[i], id, size);
-      }
-      break;
-    }
-  }
-  return res;
-}
-export function setActiveTabInModel (model: Model, id: string): Model {
-  const res = clone(model);
-  switch (res.type) {
-    case 'tabs': {
-      if (res.items.find((item) => item.id === id)) {
-        res.items = res.items.map((item) => ({
-          ...item,
-          active: item.id === id
-        }));
-      }
-      break;
-    }
-    case 'splitter': {
-      for (let i = 0; i < res.items.length; i++) {
-        res.items[i] = setActiveTabInModel(res.items[i], id);
-      }
-      break;
-    }
-  }
-  return res;
-}
-export function removeTabInModel (model: Model, id: string): Model {
-  const res = clone(model);
-  switch (res.type) {
-    case 'tabs': {
-      const index = res.items.findIndex((item) => item.id === id);
-      if (index !== -1) {
-        res.items.splice(index, 1);
-        if (!res.items.some((item) => item.active) && res.items.length > 0) {
-          res.items[0].active = true;
-        }
-      }
-      break;
-    }
-    case 'splitter': {
-      for (let i = 0; i < res.items.length; i++) {
-        res.items[i] = removeTabInModel(res.items[i], id);
-      }
-      break;
-    }
-  }
-  return res;
-}
-export function sortTabInModel (model: Model, id: string, from: number, to: number): Model {
-  const res = clone(model);
-  switch (res.type) {
-    case 'tabs': {
-      if (res.items.find((item) => item.id === id)) {
-        res.items = switchPosition(res.items, from, to).map((item) => ({
-          ...item,
-          active: id === item.id
-        }));
-      }
-      break;
-    }
-    case 'splitter': {
-      for (let i = 0; i < res.items.length; i++) {
-        res.items[i] = sortTabInModel(res.items[i], id, from, to);
-      }
-      break;
-    }
-  }
-  return res;
-}
-export function moveTabInModel (model: Model, tab: TabModel, fromId: string, fromIndex: number, toId: string, toIndex: number): Model {
-  const res = clone(model);
-  switch (res.type) {
-    case 'tabs': {
-      if (res.id === fromId) {
-        res.items.splice(fromIndex, 1);
-        if (!res.items.some((newItem) => newItem.active) && res.items.length > 0) {
-          res.items[0].active = true;
-        }
-      }
-      if (res.id === toId) {
-        const newItems = [...res.items];
-        newItems.splice(toIndex, 0, tab);
-        res.items = newItems.map((item) => ({
-          ...item,
-          active: item.id === tab.id
-        }));
-      }
-      break;
-    }
-    case 'splitter': {
-      for (let i = 0; i < res.items.length; i++) {
-        res.items[i] = moveTabInModel(res.items[i], tab, fromId, fromIndex, toId, toIndex);
-      }
-      break;
-    }
-  }
-  return res;
-}
-export function dropTabInModel (model: Model, tab: TabModel, containerId: string, position: Position): Model {
-  let res = clone(model);
-  switch (res.type) {
-    case 'tabs': {
-      const oldIndex = res.items.findIndex((item) => item.id === tab.id);
-      if (oldIndex !== -1) {
-        if (res.id === containerId && position === 'center') {
-          res.items = res.items.map((item) => ({
-            ...item,
-            active: item.id === tab.id
-          }));
-        } else {
-          res.items.splice(oldIndex, 1);
-          if (!res.items.some((newItem) => newItem.active) && res.items.length > 0) {
-            res.items[0].active = true;
-          }
-        }
-      }
-      if (res.id === containerId) {
-        const newTab = {
-          ...tab,
-          active: true
-        };
-        switch (position) {
-          case 'top': {
-            res = {
-              id: crypto.randomUUID(),
-              type: 'splitter',
-              direction: 'vertical',
-              blueSize: 50,
-              items: [
-                {
-                  id: crypto.randomUUID(),
-                  type: 'tabs',
-                  items: [newTab]
-                },
-                res
-              ]
-            };
-            break;
-          }
-          case 'right': {
-            res = {
-              id: crypto.randomUUID(),
-              type: 'splitter',
-              direction: 'horizontal',
-              blueSize: 50,
-              items: [
-                res,
-                {
-                  id: crypto.randomUUID(),
-                  type: 'tabs',
-                  items: [newTab]
-                }
-              ]
-            };
-            break;
-          }
-          case 'bottom': {
-            res = {
-              id: crypto.randomUUID(),
-              type: 'splitter',
-              direction: 'vertical',
-              blueSize: 50,
-              items: [
-                res,
-                {
-                  id: crypto.randomUUID(),
-                  type: 'tabs',
-                  items: [newTab]
-                }
-              ]
-            };
-            break;
-          }
-          case 'left': {
-            res = {
-              id: crypto.randomUUID(),
-              type: 'splitter',
-              direction: 'horizontal',
-              blueSize: 50,
-              items: [
-                {
-                  id: crypto.randomUUID(),
-                  type: 'tabs',
-                  items: [newTab]
-                },
-                res
-              ]
-            };
-            break;
-          }
-          case 'center': {
-            if (oldIndex === -1) {
-              res.items.push(newTab);
-              res.items = res.items.map((item) => ({
-                ...item,
-                active: item.id === tab.id
-              }));
-            }
-            break;
-          }
-        }
-      }
-      break;
-    }
-    case 'splitter': {
-      for (let i = 0; i < res.items.length; i++) {
-        res.items[i] = dropTabInModel(res.items[i], tab, containerId, position);
-      }
-      break;
-    }
-  }
-  return res;
-}
-export function getChildModelIndexModel (model: Model, id: string) {
-  if (model.id === id) {
-    return model;
-  }
-  switch (model.type) {
-    case 'tabs': {
-      for (const child of model.items) {
-        if (child.id === id) {
-          return child;
-        }
-      }
-      break;
-    }
-    case 'splitter': {
-      for (const child of model.items) {
-        const found = getChildModelIndexModel(child, id);
-        if (found) {
-          return found;
-        }
-      }
-      break;
-    }
-  }
-}
-export function ensureValidModel (model: Model) {
-  let res = clone(model);
-  switch (res.type) {
-    case 'splitter': {
-      if (isEmptyModel(res.items[0])) {
-        res = res.items[1];
-      } else if (isEmptyModel(res.items[1])) {
-        res = res.items[0];
-      } else {
-        for (let i = 0; i < res.items.length; i++) {
-          res.items[i] = ensureValidModel(res.items[i]);
-        }
-      }
-      break;
-    }
-  }
-  return res;
-}
-function isEmptyModel (model: Model): boolean {
-  switch (model.type) {
-    case 'tabs': {
-      return model.items.length === 0;
-    }
-    case 'splitter': {
-      return isEmptyModel(model.items[0]) && isEmptyModel(model.items[1]);
-    }
-  }
-}
-export function isSlotVisibleInModel (model: Model, slot: string) {
-  switch (model.type) {
-    case 'tabs': {
-      for (const child of model.items) {
-        if (child.viewSlot === slot && child.active) {
-          return true;
-        }
-      }
-      break;
-    }
-    case 'splitter': {
-      for (const child of model.items) {
-        const isVisible = isSlotVisibleInModel(child, slot);
-        if (isVisible) {
-          return true;
-        }
-      }
-      break;
-    }
-  }
-  return false;
-}
diff --git a/packages/slithe/src/helpers/theme.ts b/packages/slithe/src/helpers/theme.ts
index 89d79fa..5603ade 100644
--- a/packages/slithe/src/helpers/theme.ts
+++ b/packages/slithe/src/helpers/theme.ts
@@ -1,13 +1,18 @@
 // Helpers
 import { createStore } from '@stencil/store';
 
-interface Theme {
-  components: Record<string, CSSStyleSheet>;
+export type Theme = {
+  components: Record<string, CSSStyleSheet[]>;
   icons: Record<string, string>;
   fallbackIcon: string;
 }
 
-const themeStore = createStore({
+type ThemeStore = {
+  key: string;
+  model: Theme;
+};
+
+const themeStore = createStore<ThemeStore>({
   key: 'light',
   model: {
     components: {},
@@ -33,9 +38,9 @@ export function syncWithTheme (element: HTMLElement) {
   const tagName = element.tagName.toLowerCase().slice(3);
   // Initialize
   element.setAttribute('sl-theme', themeStore.state.key);
-  let stylesheet = themeStore.state.model.components[tagName];
-  if (stylesheet) {
-    element.shadowRoot.adoptedStyleSheets = [stylesheet];
+  let stylesheets = themeStore.state.model.components[tagName];
+  if (stylesheets) {
+    element.shadowRoot.adoptedStyleSheets = stylesheets;
     if (styleStore.get('stylesheets').has(element)) {
       element.shadowRoot.adoptedStyleSheets.push(styleStore.get('stylesheets').get(element));
     }
@@ -43,17 +48,17 @@ export function syncWithTheme (element: HTMLElement) {
   // Reactive
   function onThemeUpdate () {
     element.setAttribute('sl-theme', themeStore.state.key);
-    const newStylesheet = themeStore.state.model.components[tagName];
-    if (newStylesheet && (stylesheet !== newStylesheet)) {
-      stylesheet = newStylesheet;
-      element.shadowRoot.adoptedStyleSheets = [stylesheet];
+    const newStylesheets = themeStore.state.model.components[tagName];
+    if (newStylesheets && (stylesheets !== newStylesheets)) {
+      stylesheets = newStylesheets;
+      element.shadowRoot.adoptedStyleSheets = stylesheets;
       if (styleStore.get('stylesheets').has(element)) {
         element.shadowRoot.adoptedStyleSheets.push(styleStore.get('stylesheets').get(element));
       }
     }
   }
   function onStyleUpdate () {
-    element.shadowRoot.adoptedStyleSheets = stylesheet ? [stylesheet] : [];
+    element.shadowRoot.adoptedStyleSheets = stylesheets ? stylesheets : [];
     if (styleStore.get('stylesheets').has(element)) {
       element.shadowRoot.adoptedStyleSheets.push(styleStore.get('stylesheets').get(element));
     }
diff --git a/packages/slithe/src/index.ts b/packages/slithe/src/index.ts
index 1f8fabe..4742ba1 100644
--- a/packages/slithe/src/index.ts
+++ b/packages/slithe/src/index.ts
@@ -3,10 +3,9 @@ export * from './components';
 export declare function defineCustomElements(): void;
 
 export { setConfig } from './helpers/config';
-export { setTheme } from './helpers/theme';
+export { setTheme, Theme } from './helpers/theme';
 export { attachTooltip } from './helpers/dom';
 export { addNotification, Notification } from './helpers/hud';
-export { Model, SplitterModel, TabModel, TabsModel } from './helpers/model';
 export { Validation, ValidationLevel, ValidationHandler, noValidation, emailValidation, TextAutocomplete, NumberAutocomplete, NumberOption, TextOption } from './helpers/form';
 export { AlertLevel } from './helpers/types';
 export { debounce, delay, Deferred } from './helpers/time';