From a2870996d4e8df66dfb78c4a672dc7ac00fdd1ba Mon Sep 17 00:00:00 2001
From: Sukaato <sukaato.dev@proton.me>
Date: Tue, 3 Dec 2024 18:48:00 +0100
Subject: [PATCH] refactor(core): migrate `@import` rule to `@use` and
 `@forward`

---
 package-lock.json                             |  40 +++---
 packages/core/package.json                    |   8 +-
 .../src/components/accordion/accordion.scss   |   8 +-
 .../core/src/components/avatar/avatar.scss    |   6 +-
 packages/core/src/components/badge/badge.scss |  20 +--
 .../core/src/components/button/button.scss    |  36 ++---
 .../components/button/test/basic/index.html   |   8 +-
 .../card-body/tests/basic/index.html          |   8 +-
 packages/core/src/components/card/card.scss   |   4 +-
 .../src/components/checkbox/checkbox.scss     |  26 ++--
 .../core/src/components/divider/divider.scss  |   6 +-
 .../core/src/components/drawer/drawer.scss    |   6 +-
 .../src/components/dropdown/dropdown.scss     |  14 +-
 .../components/dropdown/test/basic/index.html |  10 +-
 .../src/components/input-file/input-file.scss |  32 ++---
 packages/core/src/components/input/input.scss |  26 ++--
 packages/core/src/components/item/item.scss   |  16 +--
 packages/core/src/components/join/join.scss   |   2 -
 packages/core/src/components/kbd/kbd.scss     |   8 +-
 packages/core/src/components/list/list.scss   |  20 +--
 packages/core/src/components/modal/modal.scss |   6 +-
 .../core/src/components/navbar/navbar.scss    |   4 +-
 .../core/src/components/popover/popover.scss  |  12 +-
 .../src/components/progress/progress.scss     |  10 +-
 packages/core/src/components/radio/radio.scss |  22 +--
 packages/core/src/components/range/range.scss |  18 +--
 .../core/src/components/select/select.scss    |  20 +--
 .../components/select/test/basic/index.html   |   8 +-
 .../src/components/textarea/textarea.scss     |  24 ++--
 .../core/src/components/toggle/toggle.scss    |  20 +--
 .../core/src/components/tooltip/tooltip.scss  |  12 +-
 packages/core/src/css/core.scss               |  11 +-
 packages/core/src/css/global.bundle.scss      |   4 +-
 packages/core/src/css/poppy.bundle.scss       |   4 +-
 packages/core/src/css/structure.scss          |   2 -
 packages/core/src/css/themes/_dark.scss       | 130 ++++--------------
 packages/core/src/css/themes/_light.scss      | 107 +-------------
 packages/core/src/css/themes/dark.always.scss |   4 +-
 packages/core/src/css/themes/dark.class.scss  |   4 +-
 packages/core/src/css/themes/dark.system.scss |   4 +-
 packages/core/src/css/themes/dark.theme.scss  |   4 +-
 .../core/src/css/themes/light.always.scss     |   4 +-
 packages/core/src/css/themes/light.class.scss |   4 +-
 .../core/src/css/themes/light.system.scss     |   4 +-
 packages/core/src/css/themes/light.theme.scss |   4 +-
 packages/core/src/global/poppy.scss           |   2 +-
 packages/core/src/themes/_generator.scss      | 130 ++++++++++++++++++
 packages/core/src/themes/_global.scss         |  12 ++
 .../src/themes/functions/poppy.colors.scss    |  29 ++--
 .../src/themes/functions/poppy.fonts.scss     |   5 +
 .../src/themes/functions/poppy.radius.scss    |  15 +-
 .../src/themes/functions/poppy.shadows.scss   |   4 +-
 packages/core/src/themes/poppy.globals.scss   |  17 ---
 .../core/src/themes/poppy.theme.default.scss  |   1 -
 packages/core/src/themes/utils/_input.scss    |   4 +-
 .../core/src/themes/utils/_join-item.scss     |   6 +-
 packages/vue/src/proxies.ts                   |   2 +-
 57 files changed, 462 insertions(+), 515 deletions(-)
 create mode 100644 packages/core/src/themes/_generator.scss
 create mode 100644 packages/core/src/themes/_global.scss
 create mode 100644 packages/core/src/themes/functions/poppy.fonts.scss
 delete mode 100644 packages/core/src/themes/poppy.globals.scss
 delete mode 100644 packages/core/src/themes/poppy.theme.default.scss

diff --git a/package-lock.json b/package-lock.json
index e4176db..f847e4f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3086,9 +3086,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.22.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.22.2.tgz",
-      "integrity": "sha512-eq2pYrrnzcLyBRANk0X/VVOfCtD0nCxWnEZ0AVdscuqfDkOjxa6SSZOfEhR9FAvrmESHp8y5jRCVPnf4n5CC4A==",
+      "version": "4.22.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.22.3.tgz",
+      "integrity": "sha512-dYaletX938WgEA2oMROLdh8wpUn1MgBx2zg5kYqwuUR8aua4Gy9EqGQ3zBu1AvL5MzLlZC+lMlxe/g5Dg1ldpw==",
       "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"
@@ -3261,13 +3261,13 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "22.9.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.1.tgz",
-      "integrity": "sha512-p8Yy/8sw1caA8CdRIQBG5tiLHmxtQKObCijiAa9Ez+d4+PRffM4054xbju0msf+cvhJpnFEeNjxmVT/0ipktrg==",
+      "version": "22.10.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
+      "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~6.19.8"
+        "undici-types": "~6.20.0"
       }
     },
     "node_modules/@types/stack-utils": {
@@ -8271,9 +8271,9 @@
       "license": "MIT"
     },
     "node_modules/sass": {
-      "version": "1.81.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.81.0.tgz",
-      "integrity": "sha512-Q4fOxRfhmv3sqCLoGfvrC9pRV8btc0UtqL9mN6Yrv6Qi9ScL55CVH1vlPP863ISLEEMNLLuu9P+enCeGHlnzhA==",
+      "version": "1.81.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.81.1.tgz",
+      "integrity": "sha512-VNLgf4FC5yFyKwAumAAwwNh8X4SevlVREq3Y8aDZIkm0lI/zO1feycMXQ4hn+eB6FVhRbleSQ1Yb/q8juSldTA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -8728,9 +8728,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.6.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
-      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
       "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
@@ -8742,9 +8742,9 @@
       }
     },
     "node_modules/undici-types": {
-      "version": "6.19.8",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
       "dev": true,
       "license": "MIT"
     },
@@ -9108,7 +9108,7 @@
       "version": "0.3.3",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.22.2"
+        "@stencil/core": "^4.22.3"
       },
       "devDependencies": {
         "@cheese-grinder/stencil-component-config": "^0.4.1",
@@ -9119,14 +9119,14 @@
         "@stencil/sass": "^3.0.12",
         "@stencil/vue-output-target": "^0.9.0",
         "@types/jest": "^29.5.14",
-        "@types/node": "~22.9.1",
+        "@types/node": "~22.10.1",
         "clean-css-cli": "^5.6.3",
         "jest": "^29.7.0",
         "jest-cli": "^29.7.0",
         "key-definitions": "^2.0.3",
         "rimraf": "^6.0.1",
-        "sass": "^1.81.0",
-        "typescript": "^5.6.3"
+        "sass": "^1.81.1",
+        "typescript": "^5.7.2"
       }
     },
     "packages/docs": {
diff --git a/packages/core/package.json b/packages/core/package.json
index b464012..45e3604 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -62,7 +62,7 @@
     "stencil": "stencil"
   },
   "dependencies": {
-    "@stencil/core": "^4.22.2"
+    "@stencil/core": "^4.22.3"
   },
   "devDependencies": {
     "@cheese-grinder/stencil-component-config": "^0.4.1",
@@ -73,13 +73,13 @@
     "@stencil/sass": "^3.0.12",
     "@stencil/vue-output-target": "^0.9.0",
     "@types/jest": "^29.5.14",
-    "@types/node": "~22.9.1",
+    "@types/node": "~22.10.1",
     "clean-css-cli": "^5.6.3",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "key-definitions": "^2.0.3",
     "rimraf": "^6.0.1",
-    "sass": "^1.81.0",
-    "typescript": "^5.6.3"
+    "sass": "^1.81.1",
+    "typescript": "^5.7.2"
   }
 }
diff --git a/packages/core/src/components/accordion/accordion.scss b/packages/core/src/components/accordion/accordion.scss
index 4e85145..290d04e 100644
--- a/packages/core/src/components/accordion/accordion.scss
+++ b/packages/core/src/components/accordion/accordion.scss
@@ -1,5 +1,5 @@
 @use "@poppy/utils/join-item";
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Change border radius
@@ -16,9 +16,9 @@
 @include join-item.item_root;
 
 :host {
-  --border-radius: #{get-radius(xl)};
-  --border-color: #{get-color("base.300")};
-  --background: #{get-color("base.200")};
+  --border-radius: #{theme.use_radius(xl)};
+  --border-color: #{theme.use_color("base.300")};
+  --background: #{theme.use_color("base.200")};
   --animation: 0.2s;
 
   box-sizing: border-box;
diff --git a/packages/core/src/components/avatar/avatar.scss b/packages/core/src/components/avatar/avatar.scss
index 01fabb1..a8c32f7 100644
--- a/packages/core/src/components/avatar/avatar.scss
+++ b/packages/core/src/components/avatar/avatar.scss
@@ -1,4 +1,4 @@
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --background: Change background color
@@ -9,8 +9,8 @@
 // ----------------------------------------------------------------
 
 :host {
-  --background: #{get-color("neutral.base")};
-  --color: #{get-color("neutral.content")};
+  --background: #{theme.use_color("neutral.base")};
+  --color: #{theme.use_color("neutral.content")};
 
   display: inline-flex;
 
diff --git a/packages/core/src/components/badge/badge.scss b/packages/core/src/components/badge/badge.scss
index ded200a..e513847 100644
--- a/packages/core/src/components/badge/badge.scss
+++ b/packages/core/src/components/badge/badge.scss
@@ -1,4 +1,4 @@
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Border radius
@@ -13,10 +13,10 @@
 // ----------------------------------------------------------------
 
 :host {
-  --border-radius: #{get-radius(full)};
-  --border-color: #{get-color("base.200")};
-  --background: #{get-color("base.100")};
-  --color: #{get-color("base.content")};
+  --border-radius: #{theme.use_radius(full)};
+  --border-color: #{theme.use_color("base.200")};
+  --background: #{theme.use_color("base.100")};
+  --color: #{theme.use_color("base.content")};
 
   display: inline-flex;
   width: max-content;
@@ -106,8 +106,8 @@
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: get-color("#{$color}.base");
-    $text: get-color("#{$color}.content");
+    $base: use_color("#{$color}.base");
+    $text: use_color("#{$color}.content");
 
     :host([color="#{$color}"]) {
       --border-color: #{$base};
@@ -122,9 +122,9 @@
 @include generate-color(neutral, primary, secondary, accent, info, success, warning, error);
 
 :host(:not([color], [outlined])) {
-  --border-color: #{get-color("base.200")};
-  --background: #{get-color("base.100")};
-  --color: #{get-color("base.content")};
+  --border-color: #{theme.use_color("base.200")};
+  --background: #{theme.use_color("base.100")};
+  --color: #{theme.use_color("base.content")};
 }
 
 // Badge Outline
diff --git a/packages/core/src/components/button/button.scss b/packages/core/src/components/button/button.scss
index a6b3f51..c5f0d91 100644
--- a/packages/core/src/components/button/button.scss
+++ b/packages/core/src/components/button/button.scss
@@ -1,5 +1,5 @@
 @use "@poppy/utils/join-item";
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Change border radius
@@ -19,10 +19,10 @@
 // ----------------------------------------------------------------
 
 :host {
-  --border-radius: #{get-radius(md)};
+  --border-radius: #{theme.use_radius(md)};
   --border-color: transparent;
-  --background: #{get-color("base.200")};
-  --color: #{get-color("base.content")};
+  --background: #{theme.use_color("base.200")};
+  --color: #{theme.use_color("base.content")};
 
   --animation: 0.25s ease-out;
   --focus-scale: 0.97;
@@ -133,8 +133,8 @@
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: get-color("#{$color}.base");
-    $text: get-color("#{$color}.content");
+    $base: theme.use_color("#{$color}.base");
+    $text: theme.use_color("#{$color}.content");
 
     :host([color="#{$color}"]) {
       --background: #{$base};
@@ -162,21 +162,21 @@
 
     &:hover,
     &.btn-active {
-      --background: #{get-color("base.content", 0.2)};
+      --background: #{theme.use_color("base.content", 0.2)};
     }
   }
 }
 
 :host(:not([color], [outlined])) {
-  --background: #{get-color("base.200")};
-  --color: #{get-color("base.content")};
+  --background: #{theme.use_color("base.200")};
+  --color: #{theme.use_color("base.content")};
 
   button {
-    outline-color: #{get-color("base.content")};
+    outline-color: #{theme.use_color("base.content")};
 
     &:hover,
     &.btn-active {
-      --background: #{get-color("base.300")};
+      --background: #{theme.use_color("base.300")};
     }
   }
 }
@@ -202,14 +202,14 @@
 }
 
 :host(:not([color])[outlined]) {
-  --background: #{get-color("base.content")};
+  --background: #{theme.use_color("base.content")};
 
   button {
 
     &:hover,
     &.btn-active {
-      --background: #{get-color("base.content")};
-      --color: #{get-color("base.200")};
+      --background: #{theme.use_color("base.content")};
+      --color: #{theme.use_color("base.200")};
     }
   }
 }
@@ -237,7 +237,7 @@
 }
 
 :host([shape="circle"]) {
-  --border-radius: #{get-radius(full)};
+  --border-radius: #{theme.use_radius(full)};
 }
 
 // Button State
@@ -247,9 +247,9 @@
   cursor: not-allowed;
 
   button:disabled {
-    --background: #{get-color("neutral.base", 0.2)};
-    color: #{get-color("base.content", 0.2)};
+    --background: #{theme.use_color("neutral.base", 0.2)};
+    color: #{theme.use_color("base.content", 0.2)};
 
     pointer-events: none;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/button/test/basic/index.html b/packages/core/src/components/button/test/basic/index.html
index 4928bdf..0e34c82 100644
--- a/packages/core/src/components/button/test/basic/index.html
+++ b/packages/core/src/components/button/test/basic/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Input Basic | Poppy-ui</title>
-    <link rel="stylesheet" href="/build/poppy.css">
-    <script type="module" src="/build/poppy.esm.js"></script>
-    <script nomodule src="/build/poppy.js"></script>
+    <link rel="stylesheet" href="/dist/poppy/poppy.css">
+    <script type="module" src="/dist/poppy/poppy.esm.js"></script>
+    <script nomodule src="/dist/poppy/poppy.js"></script>
     <style>
         main {
             width: 100vw;
@@ -116,4 +116,4 @@ <h2>Button - outlined disabled</h2>
         </section>
     </main>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/packages/core/src/components/card-body/tests/basic/index.html b/packages/core/src/components/card-body/tests/basic/index.html
index 1622945..277104c 100644
--- a/packages/core/src/components/card-body/tests/basic/index.html
+++ b/packages/core/src/components/card-body/tests/basic/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Input Basic | Poppy-ui</title>
-    <link rel="stylesheet" href="/build/poppy.css">
-    <script type="module" src="/build/poppy.esm.js"></script>
-    <script nomodule src="/build/poppy.js"></script>
+    <link rel="stylesheet" href="/dist/poppy/poppy.css">
+    <script type="module" src="/dist/poppy/poppy.esm.js"></script>
+    <script nomodule src="/dist/poppy/poppy.js"></script>
     <style>
         main {
             width: 100vw;
@@ -49,4 +49,4 @@ <h2>Card - compact</h2>
         </section>
     </main>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/packages/core/src/components/card/card.scss b/packages/core/src/components/card/card.scss
index 14ece11..80ae79d 100644
--- a/packages/core/src/components/card/card.scss
+++ b/packages/core/src/components/card/card.scss
@@ -1,4 +1,4 @@
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Change border radius
@@ -8,7 +8,7 @@
 // ----------------------------------------------------------------
 
 :host {
-  --border-radius: #{get-radius(xl)};
+  --border-radius: #{theme.use_radius(xl)};
 
   display: flex;
 
diff --git a/packages/core/src/components/checkbox/checkbox.scss b/packages/core/src/components/checkbox/checkbox.scss
index ff5033c..b8112a7 100644
--- a/packages/core/src/components/checkbox/checkbox.scss
+++ b/packages/core/src/components/checkbox/checkbox.scss
@@ -1,5 +1,5 @@
 @use "@poppy/utils/input";
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Change border radius
@@ -15,11 +15,11 @@
 // ----------------------------------------------------------------
 
 :host {
-  --border-radius: #{get-radius(md)};
-  --border-color: #{get-color("base.content", 0.2)};
+  --border-radius: #{theme.use_radius(md)};
+  --border-color: #{theme.use_color("base.content", 0.2)};
 
-  --background: #{get-color("base.content")};
-  --checkmark-color: #{get-color("base.100")};
+  --background: #{theme.use_color("base.content")};
+  --checkmark-color: #{theme.use_color("base.100")};
 
   --animation: 0.2s ease-out;
 
@@ -129,9 +129,9 @@
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: get-color("#{$color}.base");
-    $border: get-color("#{$color}.base", 0.2);
-    $text: get-color("#{$color}.content");
+    $base: use_color("#{$color}.base");
+    $border: use_color("#{$color}.base", 0.2);
+    $text: use_color("#{$color}.content");
 
     :host([color="#{$color}"]) {
       --background: #{$base};
@@ -143,9 +143,9 @@
 @include generate-color(primary, secondary, accent, info, success, warning, error);
 
 :host(:not([color])) > input {
-  --background: #{get-color("base.content")};
-  --border-color: #{get-color("base.content", 0.2)};
-  --checkmark-color: #{get-color("base.100")};
+  --background: #{theme.use_color("base.content")};
+  --border-color: #{theme.use_color("base.content", 0.2)};
+  --checkmark-color: #{theme.use_color("base.100")};
 }
 
 // Checkbox status
@@ -153,7 +153,7 @@
 
 :host([disabled]) > input {
   --border-color: transparent;
-  --background: #{get-color("base.content")};
+  --background: #{theme.use_color("base.content")};
   background-image: linear-gradient(-45deg, transparent 65%, var(--background) 65.99%),
     linear-gradient(45deg, transparent 75%, var(--background) 75.99%),
     linear-gradient(-45deg, var(--background) 40%, transparent 40.99%),
@@ -181,7 +181,7 @@
       var(--background) 57%
     );
   background-repeat: no-repeat;
-  background-color: var(--background, get-color("base.content"));
+  background-color: var(--background, use_color("base.content"));
   animation: checkmark var(--animation-duration, 0.2s) ease-out;
 }
 
diff --git a/packages/core/src/components/divider/divider.scss b/packages/core/src/components/divider/divider.scss
index 5acb8f3..f9ac0f4 100644
--- a/packages/core/src/components/divider/divider.scss
+++ b/packages/core/src/components/divider/divider.scss
@@ -1,5 +1,5 @@
 @use "@poppy/utils/input";
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --background: Change background color
@@ -9,7 +9,7 @@
 // ----------------------------------------------------------------
 
 :host {
-  --background: #{get-color("base.content", 0.1)};
+  --background: #{theme.use_color("base.content", 0.1)};
 
   display: flex;
   align-items: center;
@@ -95,7 +95,7 @@
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: get-color("#{$color}.base");
+    $base: use_color("#{$color}.base");
 
     :host([color="#{$color}"]) {
       --background: #{$base};
diff --git a/packages/core/src/components/drawer/drawer.scss b/packages/core/src/components/drawer/drawer.scss
index 42c9b11..c23215a 100644
--- a/packages/core/src/components/drawer/drawer.scss
+++ b/packages/core/src/components/drawer/drawer.scss
@@ -1,4 +1,4 @@
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --background: Change sidebar background
@@ -12,8 +12,8 @@
 
 :host {
   --backdrop-background: #0006;
-  --background: #{get-color("base.200")};
-  --color: #{get-color("base.content")};
+  --background: #{theme.use_color("base.200")};
+  --color: #{theme.use_color("base.content")};
 
   display: grid;
 
diff --git a/packages/core/src/components/dropdown/dropdown.scss b/packages/core/src/components/dropdown/dropdown.scss
index fe4cfd1..fb06307 100644
--- a/packages/core/src/components/dropdown/dropdown.scss
+++ b/packages/core/src/components/dropdown/dropdown.scss
@@ -1,4 +1,4 @@
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Change border radius
@@ -14,11 +14,11 @@
 // ----------------------------------------------------------------
 
 :host {
-  --border-radius: #{get-radius(md)};
-  --border-color: #{get-color("base.200")};
-  --background: #{get-color("base.100")};
-  --color: #{get-color("base.content")};
-  --shadow: #{get-shadow(md)};
+  --border-radius: #{theme.use_radius(md)};
+  --border-color: #{theme.use_color("base.200")};
+  --background: #{theme.use_color("base.100")};
+  --color: #{theme.use_color("base.content")};
+  --shadow: #{theme.use_shadow(md)};
 
   .dropdown {
     display: grid;
@@ -53,7 +53,7 @@
     &-backdrop {
       position: fixed;
       inset: 0;
-      background: get-color("neutral.base", 0.2);
+      background: use_color("neutral.base", 0.2);
     }
   }
 }
diff --git a/packages/core/src/components/dropdown/test/basic/index.html b/packages/core/src/components/dropdown/test/basic/index.html
index 10f26de..957d472 100644
--- a/packages/core/src/components/dropdown/test/basic/index.html
+++ b/packages/core/src/components/dropdown/test/basic/index.html
@@ -3,10 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Input Basic | Poppy-ui</title>
-    <link rel="stylesheet" href="/build/poppy.css">
-    <script type="module" src="/build/poppy.esm.js"></script>
-    <script nomodule src="/build/poppy.js"></script>
+    <title>Dropdown | Poppy-ui</title>
+    <link rel="stylesheet" href="/dist/poppy/poppy.css">
+    <script type="module" src="/dist/poppy/poppy.esm.js"></script>
+    <script nomodule src="/dist/poppy/poppy.js"></script>
     <style>
         main {
             width: 100vw;
@@ -396,4 +396,4 @@ <h2>top / align</h2>
         </section>
     </main>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/packages/core/src/components/input-file/input-file.scss b/packages/core/src/components/input-file/input-file.scss
index 41301a2..98bbdac 100644
--- a/packages/core/src/components/input-file/input-file.scss
+++ b/packages/core/src/components/input-file/input-file.scss
@@ -1,6 +1,6 @@
 @use "@poppy/utils/input";
 @use "@poppy/utils/join-item";
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Change border radius.
@@ -24,14 +24,14 @@
 
 $minWidth: 12rem;
 :host {
-  --border-radius: #{get-radius(md)};
-  --border-color: #{get-color("base.content", 0)};
-  --outline-color: #{get-color("base.content", 0.2)};
+  --border-radius: #{theme.use_radius(md)};
+  --border-color: #{theme.use_color("base.content", 0)};
+  --outline-color: #{theme.use_color("base.content", 0.2)};
   --background-opacity: 1;
-  --background: #{get-color("base.100", var(--background-opacity))};
-  --color: #{get-color("base.content")};
-  --button-color: #{get-color("neutral.content")};
-  --button-background: #{get-color("neutral.base")};
+  --background: #{theme.use_color("base.100", var(--background-opacity))};
+  --color: #{theme.use_color("base.content")};
+  --button-color: #{theme.use_color("neutral.content")};
+  --button-background: #{theme.use_color("neutral.base")};
 
   @include input.label;
   @include input.helper;
@@ -91,7 +91,7 @@ $minWidth: 12rem;
 
 // Bordered
 :host([bordered]) {
-  --border-color: #{get-color("base.content", 0.2)};
+  --border-color: #{theme.use_color("base.content", 0.2)};
 }
 
 // Input-File Size
@@ -150,8 +150,8 @@ $minWidth: 12rem;
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: get-color("#{$color}.base");
-    $text: get-color("#{$color}.content");
+    $base: use_color("#{$color}.base");
+    $text: use_color("#{$color}.content");
 
     :host([color="#{$color}"]) {
       --button-background: #{$base};
@@ -167,7 +167,7 @@ $minWidth: 12rem;
 @include generate-color(primary, secondary, accent, info, success, warning, error);
 
 :host(:not([color], [disabled])) {
-  $color: get-color("neutral.base");
+  $color: use_color("neutral.base");
 
   > input:hover {
     --button-background: color-mix(in oklab, #{$color} 90%, black);
@@ -181,7 +181,7 @@ $minWidth: 12rem;
   > input:focus {
     --background-opacity: 1;
 
-    color: var(--text-color, #{get-color("base.content")});
+    color: var(--text-color, #{theme.use_color("base.content")});
   }
 }
 
@@ -189,9 +189,9 @@ $minWidth: 12rem;
 // ----------------------------------------------------------------
 
 :host([disabled]) {
-  $background: get-color("base.200");
-  $color: get-color("base.content", 0.2);
-  $btn-background: get-color("neutral.base", 0.2);
+  $background: use_color("base.200");
+  $color: use_color("base.content", 0.2);
+  $btn-background: use_color("neutral.base", 0.2);
 
   --background: #{$background};
   --border-color: #{$background};
diff --git a/packages/core/src/components/input/input.scss b/packages/core/src/components/input/input.scss
index 370f900..9e57faf 100644
--- a/packages/core/src/components/input/input.scss
+++ b/packages/core/src/components/input/input.scss
@@ -1,6 +1,6 @@
 @use "@poppy/utils/input";
 @use "@poppy/utils/join-item";
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Border radius
@@ -21,11 +21,11 @@
 
 $minWidth: 12rem;
 :host {
-  --border-radius: #{get-radius(md)};
+  --border-radius: #{theme.use_radius(md)};
   --border-color: transparent;
-  --outline-color: #{get-color("base.content", 0.2)};
-  --background: #{get-color("base.100")};
-  --color: #{get-color("base.content")};
+  --outline-color: #{theme.use_color("base.content", 0.2)};
+  --background: #{theme.use_color("base.100")};
+  --color: #{theme.use_color("base.content")};
 
   @include input.label;
   @include input.helper(".input-wrapper", $counter: true);
@@ -67,7 +67,7 @@ $minWidth: 12rem;
 
       color: var(--color);
 
-      font-family: $font;
+      font-family: theme.use_font();
       white-space: pre-wrap;
 
       cursor: inherit;
@@ -83,7 +83,7 @@ $minWidth: 12rem;
 }
 
 :host([bordered]) {
-  --border-color: #{get-color("base.content", 0.2)};
+  --border-color: #{theme.use_color("base.content", 0.2)};
 }
 
 // Input Slot
@@ -130,7 +130,7 @@ $minWidth: 12rem;
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: get-color("#{$color}.base");
+    $base: use_color("#{$color}.base");
 
     :host([color="#{$color}"]) {
       --border-color: #{$base};
@@ -152,9 +152,9 @@ $minWidth: 12rem;
 // ----------------------------------------------------------------
 
 :host([readonly]) {
-  $base: get-color("base.200");
-  $neutral: get-color("neutral.base");
-  $text: get-color("base.content", 0.8);
+  $base: use_color("base.200");
+  $neutral: use_color("neutral.base");
+  $text: use_color("base.content", 0.8);
 
   --background: #{$base};
   --border-color: #{$neutral};
@@ -168,8 +168,8 @@ $minWidth: 12rem;
 }
 
 :host([disabled]) {
-  $base: get-color("base.200");
-  $text: get-color("base.content");
+  $base: use_color("base.200");
+  $text: use_color("base.content");
 
   --background: #{$base};
   --border-color: #{$base};
diff --git a/packages/core/src/components/item/item.scss b/packages/core/src/components/item/item.scss
index 15dff9b..a7786b9 100644
--- a/packages/core/src/components/item/item.scss
+++ b/packages/core/src/components/item/item.scss
@@ -1,4 +1,4 @@
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 // Item
 // ----------------------------------------------------------------
@@ -40,14 +40,14 @@
 :host(:not(.has-list)) > {
   .item-inner:is(:hover, :focus),
   .item-inner:has(:focus) {
-    background-color: get-color("base.content", 0.1);
+    background-color: use_color("base.content", 0.1);
     color: inherit;
   }
 }
 
 :host > .item-inner:active {
-  background-color: get-color("neutral.base");
-  color: get-color("neutral.content");
+  background-color: use_color("neutral.base");
+  color: use_color("neutral.content");
 }
 
 // Item context
@@ -59,7 +59,7 @@
 :host(.in-list-md) > .item-inner {
   height: 36px;
   padding: 0.5rem 1rem;
-  border-radius: get-radius(md);
+  border-radius: use_radius(md);
 
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -67,7 +67,7 @@
 :host(.in-list-xs) > .item-inner {
   height: 24px;
   padding: 0.25rem 0.5rem;
-  border-radius: get-radius(sm);
+  border-radius: use_radius(sm);
 
   font-size: 0.75rem;
   line-height: 1rem;
@@ -75,14 +75,14 @@
 :host(.in-list-sm) > .item-inner {
   height: 28px;
   padding: 0.25rem 0.75rem;
-  border-radius: get-radius(md);
+  border-radius: use_radius(md);
 
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 :host(.in-list-lg) > .item-inner {
   height: 52px;
-  border-radius: get-radius(md);
+  border-radius: use_radius(md);
 
   font-size: 1.125rem;
   line-height: 1.75rem;
diff --git a/packages/core/src/components/join/join.scss b/packages/core/src/components/join/join.scss
index 079175d..06daa2f 100644
--- a/packages/core/src/components/join/join.scss
+++ b/packages/core/src/components/join/join.scss
@@ -1,5 +1,3 @@
-@import "@poppy/poppy.globals";
-
 // Join
 // ----------------------------------------------------------------
 
diff --git a/packages/core/src/components/kbd/kbd.scss b/packages/core/src/components/kbd/kbd.scss
index 72a5883..547beae 100644
--- a/packages/core/src/components/kbd/kbd.scss
+++ b/packages/core/src/components/kbd/kbd.scss
@@ -1,4 +1,4 @@
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Border radius
@@ -13,9 +13,9 @@
 // ----------------------------------------------------------------
 
 :host {
-  --border-radius: #{get-radius(md)};
-  --border-color: #{get-color("base.content", 0.2)};
-  --background: #{get-color("base.200")};
+  --border-radius: #{theme.use_radius(md)};
+  --border-color: #{theme.use_color("base.content", 0.2)};
+  --background: #{theme.use_color("base.200")};
 
   width: min-content;
 
diff --git a/packages/core/src/components/list/list.scss b/packages/core/src/components/list/list.scss
index f33f2b0..df16e84 100644
--- a/packages/core/src/components/list/list.scss
+++ b/packages/core/src/components/list/list.scss
@@ -1,4 +1,4 @@
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 // List
 // ----------------------------------------------------------------
@@ -27,23 +27,23 @@ pop-list[orientation="horizontal"] {
 // ----------------------------------------------------------------
 
 pop-list[size="xs"] {
-  border-radius: get-radius(sm);
+  border-radius: use_radius(sm);
   font-size: 0.75rem;
   line-height: 1rem;
 }
 pop-list[size="sm"] {
-  border-radius: get-radius(md);
+  border-radius: use_radius(md);
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 pop-list[size="md"],
 pop-list:not([size]) {
-  border-radius: get-radius(md);
+  border-radius: use_radius(md);
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 pop-list[size="lg"] {
-  border-radius: get-radius(md);
+  border-radius: use_radius(md);
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
@@ -52,12 +52,12 @@ pop-list[size="lg"] {
 // ----------------------------------------------------------------
 
 pop-list[size="xs"] > :is(pop-list-title, pop-item) {
-  border-radius: get-radius(sm);
+  border-radius: use_radius(sm);
   font-size: 0.75rem;
   line-height: 1rem;
 }
 pop-list[size="sm"] > :is(pop-list-title, pop-item) {
-  border-radius: get-radius(md);
+  border-radius: use_radius(md);
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
@@ -65,14 +65,14 @@ pop-list {
   &[size="md"],
   &:not([size]) {
     > :is(pop-list-title, pop-item) {
-      border-radius: get-radius(md);
+      border-radius: use_radius(md);
       font-size: 0.875rem;
       line-height: 1.25rem;
     }
   }
 }
 pop-list[size="lg"] > :is(pop-list-title, pop-item) {
-  border-radius: get-radius(md);
+  border-radius: use_radius(md);
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
@@ -97,7 +97,7 @@ pop-list.in-item {
     content: "";
 
     --tw-bg-opacity: 1;
-    background-color: get-color("base.content");
+    background-color: use_color("base.content");
     opacity: 0.1;
   }
 }
diff --git a/packages/core/src/components/modal/modal.scss b/packages/core/src/components/modal/modal.scss
index 9c40aaf..2d5fca3 100644
--- a/packages/core/src/components/modal/modal.scss
+++ b/packages/core/src/components/modal/modal.scss
@@ -1,8 +1,8 @@
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 :host {
-  --border-radius: #{get-radius(md)};
-  --background: #{get-color("base.100")};
+  --border-radius: #{theme.use_radius(md)};
+  --background: #{theme.use_color("base.100")};
 
   .modal {
     display: grid;
diff --git a/packages/core/src/components/navbar/navbar.scss b/packages/core/src/components/navbar/navbar.scss
index 12d0245..002f2aa 100644
--- a/packages/core/src/components/navbar/navbar.scss
+++ b/packages/core/src/components/navbar/navbar.scss
@@ -1,8 +1,8 @@
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 :host {
   --padding: 0.5rem;
-  --background: #{get-color("base.100")};
+  --background: #{theme.use_color("base.100")};
 
   width: 100%;
   min-height: 4rem;
diff --git a/packages/core/src/components/popover/popover.scss b/packages/core/src/components/popover/popover.scss
index df0fee1..2abecd6 100644
--- a/packages/core/src/components/popover/popover.scss
+++ b/packages/core/src/components/popover/popover.scss
@@ -1,10 +1,10 @@
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 :host {
-  --color: #{get-color("base.content")};
-  --border-color: #{get-color("base.200")};
-  --border-radius: #{get-radius(md)};
-  --background: #{get-color("base.100")};
+  --color: #{theme.use_color("base.content")};
+  --border-color: #{theme.use_color("base.200")};
+  --border-radius: #{theme.use_radius(md)};
+  --background: #{theme.use_color("base.100")};
 
   .popover {
     box-sizing: border-box;
@@ -38,7 +38,7 @@
 
       background-color: var(--background);
 
-      box-shadow: get-shadow(md);
+      box-shadow: use_shadow(md);
       animation-duration: 200ms;
 
       animation-name: present;
diff --git a/packages/core/src/components/progress/progress.scss b/packages/core/src/components/progress/progress.scss
index 3a14566..b8bb05e 100644
--- a/packages/core/src/components/progress/progress.scss
+++ b/packages/core/src/components/progress/progress.scss
@@ -1,4 +1,4 @@
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Border radius
@@ -25,9 +25,9 @@
 }
 
 :host {
-  --border-radius: #{get-radius(xl)};
-  --background: #{get-color("base.content", 0.2)};
-  --background-active: #{get-color("base.content")};
+  --border-radius: #{theme.use_radius(xl)};
+  --background: #{theme.use_color("base.content", 0.2)};
+  --background-active: #{theme.use_color("base.content")};
 
   > progress {
     appearance: none;
@@ -71,7 +71,7 @@
 // Color
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: get-color("#{$color}.base");
+    $base: use_color("#{$color}.base");
 
     :host([color="#{$color}"]) {
       --background-active: #{$base};
diff --git a/packages/core/src/components/radio/radio.scss b/packages/core/src/components/radio/radio.scss
index f88be0f..7995f1f 100644
--- a/packages/core/src/components/radio/radio.scss
+++ b/packages/core/src/components/radio/radio.scss
@@ -1,5 +1,5 @@
 @use "@poppy/utils/input";
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Border radius
@@ -15,13 +15,13 @@
 // Radio
 // ----------------------------------------------------------------
 
-$base: get-color("base.100");
+$base: use_color("base.100");
 
 :host {
-  --border-radius: #{get-radius(full)};
+  --border-radius: #{theme.use_radius(full)};
   --border-opacity: 0.2;
-  --border-color: #{get-color("base.content", var(--border-opacity))};
-  --background: #{get-color("base.content")};
+  --border-color: #{theme.use_color("base.content", var(--border-opacity))};
+  --background: #{theme.use_color("base.content")};
 
   @include input.label;
 
@@ -121,8 +121,8 @@ $base: get-color("base.100");
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $border: get-color("#{$color}.base", var(--border-opacity, 1));
-    $background: get-color("#{$color}.base", var(--opacity, 1));
+    $border: use_color("#{$color}.base", var(--border-opacity, 1));
+    $background: use_color("#{$color}.base", var(--opacity, 1));
 
     :host([color="#{$color}"]) {
       --border-color: #{$base};
@@ -133,8 +133,8 @@ $base: get-color("base.100");
 @include generate-color(primary, secondary, accent, info, success, warning, error);
 
 :host(:not([color])) {
-  $border: get-color("base.content", var(--border-opacity, 1));
-  $background: get-color("base.content", var(--opacity, 1));
+  $border: use_color("base.content", var(--border-opacity, 1));
+  $background: use_color("base.content", var(--opacity, 1));
 
   --border-color: #{$border};
   --background: #{$background};
@@ -144,8 +144,8 @@ $base: get-color("base.100");
 // ----------------------------------------------------------------
 
 :host([disabled]) {
-  --border-color: #{get-color("base.content")};
-  --background: #{get-color("base.content")};
+  --border-color: #{theme.use_color("base.content")};
+  --background: #{theme.use_color("base.content")};
 
   > input {
     cursor: not-allowed;
diff --git a/packages/core/src/components/range/range.scss b/packages/core/src/components/range/range.scss
index 45861ff..6234378 100644
--- a/packages/core/src/components/range/range.scss
+++ b/packages/core/src/components/range/range.scss
@@ -1,4 +1,4 @@
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --track-size: Height of the range track
@@ -15,14 +15,14 @@
 @mixin track {
   width: 100%;
   height: var(--track-size);
-  border-radius: var(--border-radius, #{get-radius(xl)});
+  border-radius: var(--border-radius, #{theme.use_radius(xl)});
   background-color: var(--track-color, oklch(var(--base-content) / var(--track-opacity, 0.2)));
 }
 @mixin thumb {
   width: var(--thumb-size);
   height: var(--thumb-size);
   border-style: none;
-  border-radius: var(--border-radius, #{get-radius(xl)});
+  border-radius: var(--border-radius, #{theme.use_radius(xl)});
 
   --filler-size: 50rem;
   --active-track-size: calc(var(--filler-size) * -1 - var(--filler-offset));
@@ -38,8 +38,8 @@
 // ----------------------------------------------------------------
 
 :host {
-  --thumb-color: #{get-color("base.100")};
-  --border-radius: #{get-radius(xl)};
+  --thumb-color: #{theme.use_color("base.100")};
+  --border-radius: #{theme.use_radius(xl)};
 
   width: 100%;
 
@@ -118,7 +118,7 @@
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: get-color("#{$color}.base", var(--active-track-opacity, 1));
+    $base: use_color("#{$color}.base", var(--active-track-opacity, 1));
 
     :host([color="#{$color}"]) {
       --active-track-color: #{$base};
@@ -128,8 +128,8 @@
 @include generate-color(primary, secondary, accent, info, success, warning, error);
 
 :host(:not([color])) {
-  $color: get-color("base.content", var(--track-opacity, 0.2));
-  $active: get-color("base.content", var(--active-track-opacity, 1));
+  $color: use_color("base.content", var(--track-opacity, 0.2));
+  $active: use_color("base.content", var(--active-track-opacity, 1));
 
   --track-color: #{$color};
   --active-track-color: #{$active};
@@ -139,7 +139,7 @@
 // ----------------------------------------------------------------
 
 :host([disabled]) > input {
-  $active: get-color("base.content", var(--active-track-opacity, 1));
+  $active: use_color("base.content", var(--active-track-opacity, 1));
 
   --active-track-color: #{$active};
   cursor: not-allowed;
diff --git a/packages/core/src/components/select/select.scss b/packages/core/src/components/select/select.scss
index 5e6d5aa..e2eeb52 100644
--- a/packages/core/src/components/select/select.scss
+++ b/packages/core/src/components/select/select.scss
@@ -1,6 +1,6 @@
 @use "@poppy/utils/input";
 @use "@poppy/utils/join-item";
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Border radius
@@ -20,10 +20,10 @@ $minWidth: 12rem;
 
 :host {
   --opacity: 1;
-  --background: #{get-color("base.100", var(--opacity))};
-  --border-color: #{get-color("base.content", 0.2)};
-  --border-radius: #{get-radius(md)};
-  --color: #{get-color("base.content")};
+  --background: #{theme.use_color("base.100", var(--opacity))};
+  --border-color: #{theme.use_color("base.content", 0.2)};
+  --border-radius: #{theme.use_radius(md)};
+  --color: #{theme.use_color("base.content")};
 
   @include input.label;
   @include input.helper;
@@ -84,7 +84,7 @@ $minWidth: 12rem;
 
 :host(.select-expanded) {
   .select-wrapper {
-    box-shadow: get-shadow(md);
+    box-shadow: use_shadow(md);
 
     svg {
       transform: rotateX(180deg);
@@ -93,13 +93,13 @@ $minWidth: 12rem;
 }
 
 :host([bordered]) {
-  --border-color: #{get-color("base.content", 0.2)};
+  --border-color: #{theme.use_color("base.content", 0.2)};
 }
 
 // Color
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: get-color("#{$color}.base");
+    $base: use_color("#{$color}.base");
 
     :host([color="#{$color}"]) {
       --border-color: #{$base};
@@ -156,8 +156,8 @@ $minWidth: 12rem;
 }
 
 :host([disabled]) button {
-  $base: get-color("base.200");
-  $text: get-color("base.content", 0.2);
+  $base: use_color("base.200");
+  $text: use_color("base.content", 0.2);
 
   --background: #{$base};
   --border-color: #{$base};
diff --git a/packages/core/src/components/select/test/basic/index.html b/packages/core/src/components/select/test/basic/index.html
index 203b99d..40e62ba 100644
--- a/packages/core/src/components/select/test/basic/index.html
+++ b/packages/core/src/components/select/test/basic/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Select Basic | Poppy-ui</title>
-    <link rel="stylesheet" href="/build/poppy.css">
-    <script type="module" src="/build/poppy.esm.js"></script>
-    <script nomodule src="/build/poppy.js"></script>
+    <link rel="stylesheet" href="/dist/poppy/poppy.css">
+    <script type="module" src="/dist/poppy/poppy.esm.js"></script>
+    <script nomodule src="/dist/poppy/poppy.js"></script>
     <style>
         main {
             width: 100vw;
@@ -69,4 +69,4 @@ <h2>Select basic</h2>
         </section>
     </main>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/packages/core/src/components/textarea/textarea.scss b/packages/core/src/components/textarea/textarea.scss
index da7a5e1..b6c7e42 100644
--- a/packages/core/src/components/textarea/textarea.scss
+++ b/packages/core/src/components/textarea/textarea.scss
@@ -1,6 +1,6 @@
 @use "@poppy/utils/input";
 @use "@poppy/utils/join-item";
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Border radius
@@ -22,11 +22,11 @@
 
 $minWidth: 12rem;
 :host {
-  --border-radius: #{get-radius(md)};
+  --border-radius: #{theme.use_radius(md)};
   --border-color: transparent;
   --opacity: 1;
-  --background: #{get-color("base.100", var(--opacity))};
-  --color: #{get-color("base.content", var(--opacity))};
+  --background: #{theme.use_color("base.100", var(--opacity))};
+  --color: #{theme.use_color("base.content", var(--opacity))};
 
   @include input.label;
   @include input.helper(textarea, $counter: true);
@@ -51,11 +51,11 @@ $minWidth: 12rem;
     background-color: var(--background);
     color: var(--color);
 
-    font-family: $font;
+    font-family: theme.use_font();
     white-space: pre-wrap;
 
     &:focus-visible {
-      outline-color: var(--border-color, #{get-color("base.content", 0.2)});
+      outline-color: var(--border-color, #{theme.use_color("base.content", 0.2)});
       outline-style: solid;
       outline-width: 2px;
       outline-offset: 2px;
@@ -64,7 +64,7 @@ $minWidth: 12rem;
 }
 
 :host([bordered]) {
-  --border-color: #{get-color("base.content", 0.2)};
+  --border-color: #{theme.use_color("base.content", 0.2)};
 }
 
 // Textarea Size
@@ -99,7 +99,7 @@ $minWidth: 12rem;
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: get-color("#{$color}.base");
+    $base: use_color("#{$color}.base");
 
     :host([color="#{$color}"]) {
       --border-color: #{$base};
@@ -120,12 +120,12 @@ $minWidth: 12rem;
 // ----------------------------------------------------------------
 
 :host([disabled]) > textarea {
-  --background: #{get-color("base.200")};
-  --border-color: #{get-color("base.200")};
-  --color: #{get-color("base.content", 0.2)};
+  --background: #{theme.use_color("base.200")};
+  --border-color: #{theme.use_color("base.200")};
+  --color: #{theme.use_color("base.content", 0.2)};
   cursor: not-allowed;
 
   &::placeholder {
-    color: #{get-color("base.content", 0.2)};
+    color: #{theme.use_color("base.content", 0.2)};
   }
 }
diff --git a/packages/core/src/components/toggle/toggle.scss b/packages/core/src/components/toggle/toggle.scss
index 98dfed4..f44f0b9 100644
--- a/packages/core/src/components/toggle/toggle.scss
+++ b/packages/core/src/components/toggle/toggle.scss
@@ -1,5 +1,5 @@
 @use "@poppy/utils/input";
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --border-radius: Border radius
@@ -19,9 +19,9 @@
 // ----------------------------------------------------------------
 
 :host {
-  --background: #{get-color("base.100")};
+  --background: #{theme.use_color("base.100")};
   --handleoffsetcalculator: calc(var(--handleoffset) * -1);
-  --border-radius: #{get-radius(xxl)};
+  --border-radius: #{theme.use_radius(xxl)};
 
   @include input.label;
 
@@ -47,7 +47,7 @@
       0 0 0 2px var(--background) inset,
       var(--togglehandleborder, 0 0);
 
-    color: var(--color, #{get-color("base.content", var(--opacity, 0.5))});
+    color: var(--color, #{theme.use_color("base.content", var(--opacity, 0.5))});
 
     cursor: pointer;
     transition:
@@ -56,7 +56,7 @@
       box-shadow var(--animation-duration, 0.2s) ease-out;
 
     &:focus-visible {
-      outline-color: var(--color, #{get-color("base.content", var(--opacity, 0.2))});
+      outline-color: var(--color, #{theme.use_color("base.content", var(--opacity, 0.2))});
       outline-style: solid;
       outline-width: 2px;
       outline-offset: 2px;
@@ -114,7 +114,7 @@
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: get-color("#{$color}.base", var(--opacity, 1));
+    $base: theme.use_color("#{$color}.base", var(--opacity, 1));
 
     :host([color="#{$color}"]) > input:checked {
       --color: #{$base};
@@ -125,7 +125,7 @@
 @include generate-color(primary, secondary, accent, info, success, warning, error);
 
 :host(:not([color])) > input:checked {
-  --checked-color: #{get-color("base.content", var(--opacity, 1))};
+  --checked-color: #{theme.use_color("base.content", var(--opacity, 1))};
 }
 
 // Toogle State
@@ -138,12 +138,12 @@
     0 0 0 2px var(--background) inset,
     calc(1.5rem / 2) 0 0 3px currentColor inset,
     calc(1.5rem / -2) 0 0 3px currentColor inset;
-  color: var(--checked-color, #{get-color("base.content")});
+  color: var(--checked-color, #{theme.use_color("base.content")});
 }
 
 :host([disabled]) > input {
-  $base: get-color("base.content");
-  $base-oklch: get-color("base.content", $oklch: true);
+  $base: theme.use_color("base.content");
+  $base-oklch: theme.use_color("base.content", $oklch: true);
 
   --color: oklch(#{$base-oklch} / var(--opacity, 1));
   --togglehandleborder: 0 0 0 3px #{$base} inset, var(--handleoffsetcalculator) 0 0 3px #{$base} inset;
diff --git a/packages/core/src/components/tooltip/tooltip.scss b/packages/core/src/components/tooltip/tooltip.scss
index fb779a3..0d4aef8 100644
--- a/packages/core/src/components/tooltip/tooltip.scss
+++ b/packages/core/src/components/tooltip/tooltip.scss
@@ -1,4 +1,4 @@
-@import "@poppy/poppy.globals";
+@use "@poppy/global" as theme;
 
 /**
  * @prop --tail: Tooltip arrow size
@@ -17,7 +17,7 @@
 pop-tooltip {
   --tail: 0.1875rem;
   --background-opacity: 1;
-  --background: #{get-color("neutral.base", var(--background-opacity))};
+  --background: #{theme.use_color("neutral.base", var(--background-opacity))};
   display: inline-flex;
 
   position: relative;
@@ -39,11 +39,11 @@ pop-tooltip {
     width: max-content;
     max-width: 20rem;
     padding: 0.5rem 0.25rem;
-    border-radius: get-radius(sm);
+    border-radius: use_radius(sm);
     background-color: var(--background);
 
     content: attr(data-tip);
-    color: var(--color, oklch(#{get-color("neutral.content")} / var(--text-opacity, 1)));
+    color: var(--color, oklch(#{theme.use_color("neutral.content")} / var(--text-opacity, 1)));
     font-size: 0.875rem;
     line-height: 1.25rem;
     pointer-events: none;
@@ -146,8 +146,8 @@ pop-tooltip[position="right"] {
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: get-color("#{$color}.base", var(--background-opacity, 1));
-    $text: get-color("#{$color}.content", var(--text-opacity, 1));
+    $base: use_color("#{$color}.base", var(--background-opacity, 1));
+    $text: use_color("#{$color}.content", var(--text-opacity, 1));
 
     pop-tooltip[color="#{$color}"] {
       --background: #{$base};
diff --git a/packages/core/src/css/core.scss b/packages/core/src/css/core.scss
index 080266e..eb557fd 100644
--- a/packages/core/src/css/core.scss
+++ b/packages/core/src/css/core.scss
@@ -1,6 +1,5 @@
 @use "sass:map";
-
-@import "../themes/poppy.globals";
+@use "../themes/generator" as theme;
 
 :root {
   /**
@@ -8,7 +7,7 @@
    * `poppy.theme.default.scss` file
    * and generate CSS Variables for each color.
    */
-  @each $color-name, $value in $colors {
+  @each $color-name, $value in theme.$colors {
     @each $variant-name, $variant in $value {
       @if $variant-name == base {
         --#{$color-name}: oklch(var(--#{$color-name}-oklch, #{$variant}));
@@ -19,12 +18,8 @@
   }
 }
 
-html {
-  --font-family: system-ui;
-}
-
 body {
   background: var(--base-100);
   color: var(--base-content);
-  font-family: var(--font-family);
+  font-family: var(--font);
 }
diff --git a/packages/core/src/css/global.bundle.scss b/packages/core/src/css/global.bundle.scss
index f32f312..d540513 100644
--- a/packages/core/src/css/global.bundle.scss
+++ b/packages/core/src/css/global.bundle.scss
@@ -1,2 +1,2 @@
-@import "./normalize";
-@import "./structure";
+@forward "./normalize";
+@forward "./structure";
diff --git a/packages/core/src/css/poppy.bundle.scss b/packages/core/src/css/poppy.bundle.scss
index ed636c3..c96d43c 100644
--- a/packages/core/src/css/poppy.bundle.scss
+++ b/packages/core/src/css/poppy.bundle.scss
@@ -1,5 +1,5 @@
 // Core CSS, always required
-@import "./core";
+@forward "./core";
 
 // Global CSS: blocks scrolling, sets box-sizing
-@import "./global.bundle";
+@forward "./global.bundle";
diff --git a/packages/core/src/css/structure.scss b/packages/core/src/css/structure.scss
index 6575b68..4857bad 100644
--- a/packages/core/src/css/structure.scss
+++ b/packages/core/src/css/structure.scss
@@ -1,5 +1,3 @@
-@import "../themes/poppy.globals";
-
 // Structure
 // --------------------------------------------------
 // Adds structural css to the native html elements
diff --git a/packages/core/src/css/themes/_dark.scss b/packages/core/src/css/themes/_dark.scss
index 64b0584..a07073d 100644
--- a/packages/core/src/css/themes/_dark.scss
+++ b/packages/core/src/css/themes/_dark.scss
@@ -1,106 +1,26 @@
-@use "sass:map";
-
-$neutral: 31.38% 0.021108 254.139175;
-$primary: 65.69% 0.196 275.75;
-$secondary: 74.8% 0.26 342.55;
-$accent: 74.51% 0.167 183.61;
-$info: 72.06% 0.191 231.6;
-$success: 64.8% 0.15 160;
-$warning: 84.71% 0.199 83.87;
-$error: 71.76% 0.221 22.18;
-
-$colors: (
-  base: (
-    "100": 25.32% 0.015896 252.417568,
-    "200": 23.26% 0.013807 253.100675,
-    "300": 21.14% 0.01165 254.087939,
-    content: 74.64% 0.0216 264.435964,
-  ),
-  neutral: (
-    base: $neutral,
-    content: 74.64% 0.0216 264.435964,
-  ),
-  primary: (
-    base: $primary,
-    content: 13.13% 0.0392 275.75,
-  ),
-  secondary: (
-    base: $secondary,
-    content: 14.96% 0.052 342.55,
-  ),
-  accent: (
-    base: $accent,
-    content: 14.9% 0.0334 183.61,
-  ),
-  info: (
-    base: $info,
-    content: 0 0 0,
-  ),
-  success: (
-    base: $success,
-    content: 0 0 0,
-  ),
-  warning: (
-    base: $warning,
-    content: 0 0 0,
-  ),
-  error: (
-    base: $error,
-    content: 0 0 0,
-  ),
-);
-
-$radius: (
-  xs: 2px,
-  sm: 4px,
-  md: 8px,
-  lg: 12px,
-  xl: 16px,
-  xxl: 24px,
-  full: 9999px,
+@forward "../../themes/generator" with (
+  $scheme: dark,
+
+  // colors
+  $base_100: 25.32% 0.015896 252.417568,
+  $base_200: 23.26% 0.013807 253.100675,
+  $base_300: 21.14% 0.01165 254.087939,
+  $base_content: 74.64% 0.0216 264.435964,
+
+  $neutral: 31.38% 0.021108 254.139175,
+  $neutral_content: 74.64% 0.0216 264.435964,
+  $primary: 65.69% 0.196 275.75,
+  $primary_content: 13.13% 0.0392 275.75,
+  $secondary: 74.8% 0.26 342.55,
+  $secondary_content: 14.96% 0.052 342.55,
+  $accent: 74.51% 0.167 183.61,
+  $accent_content: 14.9% 0.0334 183.61,
+  $info: 72.06% 0.191 231.6,
+  $info_content: 0 0 0,
+  $success: 64.8% 0.15 160,
+  $success_content: 0 0 0,
+  $warning: 84.71% 0.199 83.87,
+  $warning_content: 0 0 0,
+  $error: 71.76% 0.221 22.18,
+  $error_content: 0 0 0,
 );
-
-$shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-$shadow-sm:
-  0 4px 6px -1px rgb(0 0 0 / 0.1),
-  0 2px 4px -2px rgb(0 0 0 / 0.1);
-$shadow-md:
-  0 10px 15px -3px rgb(0 0 0 / 0.1),
-  0 4px 6px -4px rgb(0 0 0 / 0.1);
-$shadow-lg:
-  0 20px 25px -5px rgb(0 0 0 / 0.1),
-  0 8px 10px -6px rgb(0 0 0 / 0.1);
-
-$shadows: (
-  xs: $shadow-xs,
-  sm: $shadow-sm,
-  md: $shadow-md,
-  lg: $shadow-lg,
-);
-
-@mixin dark-theme() {
-  & {
-    color-scheme: dark;
-
-    // Define theme oklch colors
-    @each $color-name, $value in $colors {
-      @each $variant-name, $variant in $value {
-        @if $variant-name == base {
-          --#{$color-name}-oklch: #{$variant};
-        } @else {
-          --#{$color-name}-#{$variant-name}-oklch: #{$variant};
-        }
-      }
-    }
-
-    // Define theme radius
-    @each $name, $value in $radius {
-      --radius-#{$name}: #{$value};
-    }
-
-    // Define theme box-shadow
-    @each $name, $value in $shadows {
-      --shadow-#{$name}: #{$value};
-    }
-  }
-}
diff --git a/packages/core/src/css/themes/_light.scss b/packages/core/src/css/themes/_light.scss
index be1b484..18e04ee 100644
--- a/packages/core/src/css/themes/_light.scss
+++ b/packages/core/src/css/themes/_light.scss
@@ -1,106 +1 @@
-@use "sass:map";
-
-$neutral: 32.1785% 0.02476 255.701624;
-$primary: 49.12% 0.3096 275.75;
-$secondary: 69.71% 0.329 342.55;
-$accent: 76.76% 0.184 183.61;
-$info: 72.06% 0.191 231.6;
-$success: 64.8% 0.15 160;
-$warning: 84.71% 0.199 83.87;
-$error: 71.76% 0.221 22.18;
-
-$colors: (
-  base: (
-    "100": 100% 0 0,
-    "200": 96.1151% 0 0,
-    "300": 92.4169% 0.00108 197.137559,
-    content: 27.8078% 0.029596 256.847952,
-  ),
-  neutral: (
-    base: $neutral,
-    content: 89.4994% 0.011585 252.096176,
-  ),
-  primary: (
-    base: $primary,
-    content: 89.824% 0.06192 275.75,
-  ),
-  secondary: (
-    base: $secondary,
-    content: 98.71% 0.0106 342.55,
-  ),
-  accent: (
-    base: $accent,
-    content: 15.352% 0.0368 183.61,
-  ),
-  info: (
-    base: $info,
-    content: 0% 0 0,
-  ),
-  success: (
-    base: $success,
-    content: 0% 0 0,
-  ),
-  warning: (
-    base: $warning,
-    content: 0% 0 0,
-  ),
-  error: (
-    base: $error,
-    content: 0% 0 0,
-  ),
-);
-
-$radius: (
-  xs: 2px,
-  sm: 4px,
-  md: 8px,
-  lg: 12px,
-  xl: 16px,
-  xxl: 24px,
-  full: 9999px,
-);
-
-$shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-$shadow-sm:
-  0 4px 6px -1px rgb(0 0 0 / 0.1),
-  0 2px 4px -2px rgb(0 0 0 / 0.1);
-$shadow-md:
-  0 10px 15px -3px rgb(0 0 0 / 0.1),
-  0 4px 6px -4px rgb(0 0 0 / 0.1);
-$shadow-lg:
-  0 20px 25px -5px rgb(0 0 0 / 0.1),
-  0 8px 10px -6px rgb(0 0 0 / 0.1);
-
-$shadows: (
-  xs: $shadow-xs,
-  sm: $shadow-sm,
-  md: $shadow-md,
-  lg: $shadow-lg,
-);
-
-@mixin light-theme() {
-  & {
-    color-scheme: light;
-
-    // Define theme oklch colors
-    @each $color-name, $value in $colors {
-      @each $variant-name, $variant in $value {
-        @if $variant-name == base {
-          --#{$color-name}-oklch: #{$variant};
-        } @else {
-          --#{$color-name}-#{$variant-name}-oklch: #{$variant};
-        }
-      }
-    }
-
-    // Define theme radius
-    @each $name, $value in $radius {
-      --radius-#{$name}: #{$value};
-    }
-
-    // Define theme box-shadow
-    @each $name, $value in $shadows {
-      --shadow-#{$name}: #{$value};
-    }
-  }
-}
+@forward "../../themes/generator";
diff --git a/packages/core/src/css/themes/dark.always.scss b/packages/core/src/css/themes/dark.always.scss
index f67be75..0e7962b 100644
--- a/packages/core/src/css/themes/dark.always.scss
+++ b/packages/core/src/css/themes/dark.always.scss
@@ -1,5 +1,5 @@
-@import "./dark";
+@use "./dark";
 
 :root {
-  @include dark-theme();
+  @include dark.generate();
 }
diff --git a/packages/core/src/css/themes/dark.class.scss b/packages/core/src/css/themes/dark.class.scss
index 6cff512..20c9f7a 100644
--- a/packages/core/src/css/themes/dark.class.scss
+++ b/packages/core/src/css/themes/dark.class.scss
@@ -1,5 +1,5 @@
-@import "./dark";
+@use "./dark";
 
 .poppy-theme-dark {
-  @include dark-theme();
+  @include dark.generate();
 }
diff --git a/packages/core/src/css/themes/dark.system.scss b/packages/core/src/css/themes/dark.system.scss
index adc5e66..22a6a56 100644
--- a/packages/core/src/css/themes/dark.system.scss
+++ b/packages/core/src/css/themes/dark.system.scss
@@ -1,7 +1,7 @@
-@import "./dark";
+@use "./dark";
 
 @media (prefers-color-scheme: dark) {
   :root {
-    @include dark-theme();
+    @include dark.generate();
   }
 }
diff --git a/packages/core/src/css/themes/dark.theme.scss b/packages/core/src/css/themes/dark.theme.scss
index 5d5514a..2c55548 100644
--- a/packages/core/src/css/themes/dark.theme.scss
+++ b/packages/core/src/css/themes/dark.theme.scss
@@ -1,5 +1,5 @@
-@import "./dark";
+@use "./dark";
 
 [data-theme="dark"] {
-  @include dark-theme();
+  @include dark.generate();
 }
diff --git a/packages/core/src/css/themes/light.always.scss b/packages/core/src/css/themes/light.always.scss
index 6fcd42e..bc0807b 100644
--- a/packages/core/src/css/themes/light.always.scss
+++ b/packages/core/src/css/themes/light.always.scss
@@ -1,5 +1,5 @@
-@import "./light";
+@use "./light";
 
 :root {
-  @include light-theme();
+  @include light.generate();
 }
diff --git a/packages/core/src/css/themes/light.class.scss b/packages/core/src/css/themes/light.class.scss
index 47d7011..442fc4a 100644
--- a/packages/core/src/css/themes/light.class.scss
+++ b/packages/core/src/css/themes/light.class.scss
@@ -1,5 +1,5 @@
-@import "./light";
+@use "./light";
 
 .poppy-theme-light {
-  @include light-theme();
+  @include light.generate();
 }
diff --git a/packages/core/src/css/themes/light.system.scss b/packages/core/src/css/themes/light.system.scss
index 917de4b..30409e7 100644
--- a/packages/core/src/css/themes/light.system.scss
+++ b/packages/core/src/css/themes/light.system.scss
@@ -1,7 +1,7 @@
-@import "./light";
+@use "./light";
 
 @media (prefers-color-scheme: light) {
   :root {
-    @include light-theme();
+    @include light.generate();
   }
 }
diff --git a/packages/core/src/css/themes/light.theme.scss b/packages/core/src/css/themes/light.theme.scss
index 22dac43..f858846 100644
--- a/packages/core/src/css/themes/light.theme.scss
+++ b/packages/core/src/css/themes/light.theme.scss
@@ -1,5 +1,5 @@
-@import "./light";
+@use "./light";
 
 [data-theme="light"] {
-  @include light-theme();
+  @include light.generate();
 }
diff --git a/packages/core/src/global/poppy.scss b/packages/core/src/global/poppy.scss
index c65d79d..63f3d35 100644
--- a/packages/core/src/global/poppy.scss
+++ b/packages/core/src/global/poppy.scss
@@ -1 +1 @@
-@import "../css/poppy.bundle.scss";
+@forward "../css/poppy.bundle.scss";
diff --git a/packages/core/src/themes/_generator.scss b/packages/core/src/themes/_generator.scss
new file mode 100644
index 0000000..232acd1
--- /dev/null
+++ b/packages/core/src/themes/_generator.scss
@@ -0,0 +1,130 @@
+$scheme: light !default;
+$font: system-ui !default;
+
+$base_100: 100% 0 0 !default;
+$base_200: 96.1151% 0 0 !default;
+$base_300: 92.4169% 0.00108 197.137559 !default;
+$base_content: 27.8078% 0.029596 256.847952 !default;
+
+$neutral: 32.1785% 0.02476 255.701624 !default;
+$neutral_content: 89.4994% 0.011585 252.096176 !default;
+$primary: 49.12% 0.3096 275.75 !default;
+$primary_content: 89.824% 0.06192 275.75 !default;
+$secondary: 69.71% 0.329 342.55 !default;
+$secondary_content: 98.71% 0.0106 342.55 !default;
+$accent: 76.76% 0.184 183.61 !default;
+$accent_content: 15.352% 0.0368 183.61 !default;
+$info: 72.06% 0.191 231.6 !default;
+$info_content: 0% 0 0 !default;
+$success: 64.8% 0.15 160 !default;
+$success_content: 0% 0 0 !default;
+$warning: 84.71% 0.199 83.87 !default;
+$warning_content: 0% 0 0 !default;
+$error: 71.76% 0.221 22.18 !default;
+$error_content: 0% 0 0 !default;
+
+$colors: (
+  base: (
+    "100": $base_100,
+    "200": $base_200,
+    "300": $base_300,
+    content: $base_content,
+  ),
+  neutral: (
+    base: $neutral,
+    content: $neutral_content,
+  ),
+  primary: (
+    base: $primary,
+    content: $primary_content,
+  ),
+  secondary: (
+    base: $secondary,
+    content: $secondary_content,
+  ),
+  accent: (
+    base: $accent,
+    content: $accent_content,
+  ),
+  info: (
+    base: $info,
+    content: $info_content,
+  ),
+  success: (
+    base: $success,
+    content: $success_content,
+  ),
+  warning: (
+    base: $warning,
+    content: $warning_content,
+  ),
+  error: (
+    base: $error,
+    content: $error_content,
+  ),
+);
+
+$radius_xs: 2px !default;
+$radius_sm: 4px !default;
+$radius_md: 8px !default;
+$radius_lg: 12px !default;
+$radius_xl: 16px !default;
+$radius_xxl: 24px !default;
+$radius_full: 9999px !default;
+
+$radius: (
+  xs: $radius_xs,
+  sm: $radius_sm,
+  md: $radius_md,
+  lg: $radius_lg,
+  xl: $radius_xl,
+  xxl: $radius_xxl,
+  full: $radius_full,
+);
+
+$shadow_xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+$shadow_sm:
+  0 4px 6px -1px rgb(0 0 0 / 0.1),
+  0 2px 4px -2px rgb(0 0 0 / 0.1);
+$shadow_md:
+  0 10px 15px -3px rgb(0 0 0 / 0.1),
+  0 4px 6px -4px rgb(0 0 0 / 0.1);
+$shadow_lg:
+  0 20px 25px -5px rgb(0 0 0 / 0.1),
+  0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+$shadows: (
+  xs: $shadow_xs,
+  sm: $shadow_sm,
+  md: $shadow_md,
+  lg: $shadow_lg,
+);
+
+@mixin generate() {
+  & {
+    color-scheme: $scheme;
+
+    --font: #{$font};
+
+    // Define theme oklch colors
+    @each $color-name, $value in $colors {
+      @each $variant-name, $variant in $value {
+        @if $variant-name == base {
+          --#{$color-name}-oklch: #{$variant};
+        } @else {
+          --#{$color-name}-#{$variant-name}-oklch: #{$variant};
+        }
+      }
+    }
+
+    // Define theme radius
+    @each $name, $value in $radius {
+      --radius-#{$name}: #{$value};
+    }
+
+    // Define theme radius
+    @each $name, $value in $shadows {
+      --shadow-#{$name}: #{$value};
+    }
+  }
+}
diff --git a/packages/core/src/themes/_global.scss b/packages/core/src/themes/_global.scss
new file mode 100644
index 0000000..8f10da8
--- /dev/null
+++ b/packages/core/src/themes/_global.scss
@@ -0,0 +1,12 @@
+
+// Forward color functions
+@forward "./functions/poppy.colors.scss";
+
+// Forward font functions
+@forward "./functions/poppy.fonts.scss";
+
+// Forward radius functions
+@forward "./functions/poppy.radius.scss";
+
+// Forward shadow functions
+@forward "./functions/poppy.shadows.scss";
diff --git a/packages/core/src/themes/functions/poppy.colors.scss b/packages/core/src/themes/functions/poppy.colors.scss
index 1ae1bab..8963d93 100644
--- a/packages/core/src/themes/functions/poppy.colors.scss
+++ b/packages/core/src/themes/functions/poppy.colors.scss
@@ -1,14 +1,15 @@
 @use "sass:string";
 @use "sass:list";
 @use "sass:map";
+@use "@poppy/generator" as theme;
 
 // Gets the active color's css variable from a variation. Alpha is optional.
 // --------------------------------------------------------------------------------------------
 // Example usage:
-// current-color(base.100) => var(--base)
-// current-color(base.content, 0.1) => oklch(var(--base-content-oklch), 0.1)
+// current_color(base.100) => var(--base)
+// current_color(base.content, 0.1) => oklch(var(--base-content-oklch), 0.1)
 // --------------------------------------------------------------------------------------------
-@function current-color($variation, $alpha: null) {
+@function current_color($variation, $alpha: null) {
   @if $alpha == null {
     @return var(--#{$variation});
   } @else {
@@ -19,17 +20,25 @@
 // Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
 // --------------------------------------------------------------------------------------------
 // Example usage:
-// pop-color(primary, base) => var(--primary, oklch(0.6569 0.196 275.75))
-// pop-color(secondary, content) => var(--secondary-content, oklch(0.1496 0.052 342.55))
-// pop-color(primary, base, 0.5) => oklch(var(--primary-oklch, 0.6569 0.196 275.75) / 0.5)
+// use_color(primary, base) => var(--primary, oklch(0.6569 0.196 275.75))
+// use_color(secondary, content) => var(--secondary-content, oklch(0.1496 0.052 342.55))
+// use_color(primary, base, 0.5) => oklch(var(--primary-oklch, 0.6569 0.196 275.75) / 0.5)
 // --------------------------------------------------------------------------------------------
-@function get-color($color, $alpha: null, $oklch: false) {
+@function use_color($color, $alpha: null, $oklch: false) {
   $colorArr: string.split($color, ".");
   $name: list.nth($colorArr, 1);
   $variant: list.nth($colorArr, 2);
 
-  $values: map-get($colors, $name);
+  $values: map-get(theme.$colors, $name);
+  @if $values == null {
+    @error $name "does not exist in theme colors";
+  }
+
   $value: map-get($values, $variant);
+  @if $value == null {
+    @error $variant "does not exist in theme colors " $name;
+  }
+
   $css-var: --#{$name};
 
   @if ($variant != base) {
@@ -49,12 +58,12 @@
 
 // Mixes a color with black to create its shade.
 // --------------------------------------------------------------------------------------------
-@function get-color-shade($color) {
+@function use_color_shade($color) {
   @return color-mix(in oklab, oklch(#{$color}), #000 10%);
 }
 
 // Mixes a color with white to create its tint.
 // --------------------------------------------------------------------------------------------
-@function get-color-tint($color) {
+@function use_color_tint($color) {
   @return color-mix(in oklab, oklch(#{$color}), #fff 10%);
 }
diff --git a/packages/core/src/themes/functions/poppy.fonts.scss b/packages/core/src/themes/functions/poppy.fonts.scss
new file mode 100644
index 0000000..ed033f8
--- /dev/null
+++ b/packages/core/src/themes/functions/poppy.fonts.scss
@@ -0,0 +1,5 @@
+@use "../generator" as theme;
+
+@function use_font() {
+  @return theme.$font;
+}
diff --git a/packages/core/src/themes/functions/poppy.radius.scss b/packages/core/src/themes/functions/poppy.radius.scss
index 2628e39..f9ed9c9 100644
--- a/packages/core/src/themes/functions/poppy.radius.scss
+++ b/packages/core/src/themes/functions/poppy.radius.scss
@@ -1,10 +1,13 @@
-@import "../poppy.theme.default";
+@use "../generator" as theme;
 
-@function get-radius($size: md) {
-  $value: map-get(
-    $map: $radius,
-    $key: $size,
-  );
+/// Check if the radius size exist
+/// - If true: return a css var and it's value
+/// - Otherwise its throw an error
+@function use_radius($size: md) {
+  $value: map-get(theme.$radius, $size);
+  @if $value == null {
+    @error $size "does not exist in the radius map.";
+  }
 
   @return var(--radius-#{$size}, #{$value});
 }
diff --git a/packages/core/src/themes/functions/poppy.shadows.scss b/packages/core/src/themes/functions/poppy.shadows.scss
index ee0da01..ce2f7f5 100644
--- a/packages/core/src/themes/functions/poppy.shadows.scss
+++ b/packages/core/src/themes/functions/poppy.shadows.scss
@@ -1,6 +1,6 @@
-@import "../poppy.theme.default";
+@use "../generator" as theme;
 
-@function get-shadow($size: md) {
+@function use_shadow($size: md) {
   $value: map-get(
     $map: $shadows,
     $key: $size,
diff --git a/packages/core/src/themes/poppy.globals.scss b/packages/core/src/themes/poppy.globals.scss
deleted file mode 100644
index 2dd2b56..0000000
--- a/packages/core/src/themes/poppy.globals.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@use "sass:map";
-
-// Global Color Functions
-@import "./functions/poppy.colors";
-
-// Global Radius Functions
-@import "./functions/poppy.radius";
-
-// Global Shadow Functions
-@import "./functions/poppy.shadows";
-
-// Default Theme
-@import "./poppy.theme.default";
-
-// Default General
-// --------------------------------------------------
-$font: var(--font-family, system-ui);
diff --git a/packages/core/src/themes/poppy.theme.default.scss b/packages/core/src/themes/poppy.theme.default.scss
deleted file mode 100644
index fce2aae..0000000
--- a/packages/core/src/themes/poppy.theme.default.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "../css/themes/light";
diff --git a/packages/core/src/themes/utils/_input.scss b/packages/core/src/themes/utils/_input.scss
index 3afb8b9..68b7b4d 100644
--- a/packages/core/src/themes/utils/_input.scss
+++ b/packages/core/src/themes/utils/_input.scss
@@ -1,4 +1,4 @@
-@import "@poppy/poppy.theme.default";
+@use "@poppy/global" as theme;
 
 @mixin label {
   > .label {
@@ -38,7 +38,7 @@
   }
 
   .error-text {
-    color: var(--error-color, #{get-color("error.base")});
+    color: var(--error-color, #{theme.use_color("error.base")});
   }
   @if ($counter) {
     .counter-text {
diff --git a/packages/core/src/themes/utils/_join-item.scss b/packages/core/src/themes/utils/_join-item.scss
index 3126398..5222d88 100644
--- a/packages/core/src/themes/utils/_join-item.scss
+++ b/packages/core/src/themes/utils/_join-item.scss
@@ -1,13 +1,13 @@
 @import "@poppy/functions/poppy.radius";
 
 @mixin item($selectors...) {
-  $radius-var: get-radius(md);
+  $radius-var: use_radius(md);
 
   // join-item
   @each $selector in $selectors {
     :host(.join-item) > #{$selector} {
       border-start-start-radius: var(--border-radius-start-start, var(--border-radius, #{$radius-var}));
-  
+
       border-start-end-radius: var(--border-radius-start-end, var(--border-radius, #{$radius-var}));
       border-end-start-radius: var(--border-radius-end-start, var(--border-radius, #{$radius-var}));
       border-end-end-radius: var(--border-radius-end-end, var(--border-radius, #{$radius-var}));
@@ -16,7 +16,7 @@
 }
 
 @mixin item_root {
-  $radius-var: get-radius(md);
+  $radius-var: use_radius(md);
 
   :host(.join-item) {
     border-start-start-radius: var(--border-radius-start-start, var(--border-radius, #{$radius-var}));
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index fc50b96..9714e01 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -1,7 +1,7 @@
 /* eslint-disable */
 /* tslint:disable */
 /* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';
+import { defineContainer } from '@stencil/vue-output-target/runtime';
 
 import type { JSX } from '@poppy-ui/core/components';