From 7f7aa5607186545e702a88a2ef511e915aa267bd Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Thu, 19 Jun 2025 20:01:56 +0200
Subject: [PATCH 01/42] chore: migration script

---
 apps/component-tests/postcss.config.cjs       |  11 -
 apps/component-tests/postcss.config.js        |   5 +
 apps/component-tests/src/global.css           | 153 ++--
 apps/website/postcss.config.cjs               |  11 -
 apps/website/postcss.config.js                |   5 +
 .../src/components/animations/caveats.tsx     |   2 +-
 .../copy-css-config/copy-css-config.tsx       |   4 +-
 .../components/feature-list/feature-list.tsx  |  10 +-
 apps/website/src/components/header/header.tsx |  14 +-
 .../src/components/highlight/highlight.tsx    |   6 +-
 .../src/components/info-popup/info-popup.tsx  |   4 +-
 .../install-snippet/install-snippet.tsx       |   2 +-
 .../make-it-yours/make-it-yours.tsx           |  23 +-
 .../src/components/mdx-components/index.tsx   |  12 +-
 apps/website/src/components/search/search.tsx |   4 +-
 .../src/components/showcase/showcase.tsx      |   8 +-
 apps/website/src/global.css                   | 153 ++--
 .../install/examples/accordion-qwik-city.tsx  |   8 +-
 .../routes/docs/styled/accordion/index.mdx    |   2 +-
 .../src/routes/docs/styled/badge/index.mdx    |   2 +-
 .../src/routes/docs/styled/button/index.mdx   |   2 +-
 .../docs/styled/carousel/examples/stepper.tsx |   4 +-
 .../src/routes/docs/styled/carousel/index.mdx |   4 +-
 .../src/routes/docs/styled/combobox/index.mdx |   4 +-
 .../src/routes/docs/styled/input/index.mdx    |   2 +-
 .../docs/styled/modal/examples/hero.tsx       |   2 +-
 .../src/routes/docs/styled/modal/index.mdx    |  16 +-
 .../docs/styled/popover/examples/hero.tsx     |   4 +-
 .../src/routes/docs/styled/popover/index.mdx  |   4 +-
 .../src/routes/docs/styled/select/index.mdx   |   8 +-
 .../src/routes/docs/styled/tabs/index.mdx     |   4 +-
 .../src/routes/docs/styled/textarea/index.mdx |   2 +-
 .../src/routes/docs/styled/toggle/index.mdx   |   2 +-
 .../src/routes/docs/styled/tooltip/index.mdx  |   2 +-
 apps/website/src/routes/index@landing.tsx     |   2 +-
 apps/website/src/routes/layout.tsx            |   4 +-
 apps/website/tsconfig.app.json                |   1 -
 package.json                                  |   3 +-
 .../src/components/accordion/accordion.tsx    |   6 +-
 .../kit-styled/src/components/badge/badge.tsx |   2 +-
 .../src/components/button/button.tsx          |   2 +-
 .../src/components/carousel/carousel.tsx      |  12 +-
 .../src/components/combobox/combobox.tsx      |   4 +-
 .../src/components/dropdown/dropdown.tsx      |  10 +-
 .../kit-styled/src/components/input/input.tsx |   2 +-
 .../kit-styled/src/components/modal/modal.tsx |  16 +-
 .../src/components/popover/popover.tsx        |   4 +-
 .../src/components/select/select.tsx          |   8 +-
 .../kit-styled/src/components/tabs/tabs.tsx   |   6 +-
 .../src/components/textarea/textarea.tsx      |   2 +-
 .../src/components/toggle/toggle.tsx          |   2 +-
 .../src/components/tooltip/tooltip.tsx        |   2 +-
 packages/kit-styled/src/templates/global.css  | 155 ++--
 pnpm-lock.yaml                                | 748 ++++++++++--------
 54 files changed, 792 insertions(+), 698 deletions(-)
 delete mode 100644 apps/component-tests/postcss.config.cjs
 create mode 100644 apps/component-tests/postcss.config.js
 delete mode 100644 apps/website/postcss.config.cjs
 create mode 100644 apps/website/postcss.config.js

diff --git a/apps/component-tests/postcss.config.cjs b/apps/component-tests/postcss.config.cjs
deleted file mode 100644
index acdecac1e..000000000
--- a/apps/component-tests/postcss.config.cjs
+++ /dev/null
@@ -1,11 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  plugins: {
-    'tailwindcss/nesting': 'postcss-nested',
-    tailwindcss: {
-      config: path.join(__dirname, 'tailwind.config.cjs'),
-    },
-    autoprefixer: {},
-  },
-};
diff --git a/apps/component-tests/postcss.config.js b/apps/component-tests/postcss.config.js
new file mode 100644
index 000000000..c2ddf7482
--- /dev/null
+++ b/apps/component-tests/postcss.config.js
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
diff --git a/apps/component-tests/src/global.css b/apps/component-tests/src/global.css
index 1775a6b48..dcd114012 100644
--- a/apps/component-tests/src/global.css
+++ b/apps/component-tests/src/global.css
@@ -1,6 +1,41 @@
-@tailwind components;
-@tailwind base;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../tailwind.config.cjs';
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@utility accordion-animation-1 {
+  &[data-open] {
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards
+      accordion-open;
+  }
+
+  &[data-closed] {
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards
+      accordion-close;
+  }
+}
+
+/* Not used yet - could be used for the colored text on the landing page when the make-it-yours color is too bright in light mode or too dim in dark mode */
+@utility text-outlined {
+  @apply [text-shadow:-1px_0_#777,0_1px_#777,1px_0_#777,0_-1px_#777] dark:[text-shadow:-1px_0_#ccc,0_1px_#ccc,1px_0_#ccc,0_-1px_#ccc];
+}
 
 @layer base {
   :root {
@@ -1313,72 +1348,58 @@
   }
 }
 
-:root {
-  /* primary colors - try using primary and secondary instead */
-  --qwikui-purple-50: #f9f5ff;
-  --qwikui-purple-100: #f2e8ff;
-  --qwikui-purple-200: #e7d6fe;
-  --qwikui-purple-300: #d4b5fd;
-  --qwikui-purple-400: #b37bfa;
-  --qwikui-purple-500: #9f57f5;
-  --qwikui-purple-600: #8835e8;
-  --qwikui-purple-700: #7424cc;
-  --qwikui-purple-800: #6323a6;
-  --qwikui-purple-900: #521d86;
-  --qwikui-purple-950: #360863;
-
-  --qwikui-blue-50: #effaff;
-  --qwikui-blue-100: #def3ff;
-  --qwikui-blue-200: #b6eaff;
-  --qwikui-blue-300: #76dbff;
-  --qwikui-blue-400: #2dcaff;
-  --qwikui-blue-500: #02b9fc;
-  --qwikui-blue-600: #0090d2;
-  --qwikui-blue-700: #0073aa;
-  --qwikui-blue-800: #00618c;
-  --qwikui-blue-900: #075073;
-  --qwikui-blue-950: #04334d;
-
-  /* neutrals - for internal use */
-  --qwikui-slate-50: #f8fafc;
-  --qwikui-slate-100: #f1f5f9;
-  --qwikui-slate-200: #e2e8f0;
-  --qwikui-slate-300: #cbd5e1;
-  --qwikui-slate-400: #94a3b8;
-  --qwikui-slate-500: #64748b;
-  --qwikui-slate-600: #475569;
-  --qwikui-slate-700: #334155;
-  --qwikui-slate-800: #1e293b;
-  --qwikui-slate-900: #0f172a;
-  --qwikui-slate-950: #020617;
-}
-
-html {
-  height: 100%;
-  min-height: 100%;
-  scroll-behavior: smooth;
-}
-
-body {
-  min-height: 100%;
-}
-
-/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
-  It would make more sense to supply the user with the animation declaration in the docs.
-*/
 @layer utilities {
-  .accordion-animation-1[data-open] {
-    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
+  :root {
+    /* primary colors - try using primary and secondary instead */
+    --qwikui-purple-50: #f9f5ff;
+    --qwikui-purple-100: #f2e8ff;
+    --qwikui-purple-200: #e7d6fe;
+    --qwikui-purple-300: #d4b5fd;
+    --qwikui-purple-400: #b37bfa;
+    --qwikui-purple-500: #9f57f5;
+    --qwikui-purple-600: #8835e8;
+    --qwikui-purple-700: #7424cc;
+    --qwikui-purple-800: #6323a6;
+    --qwikui-purple-900: #521d86;
+    --qwikui-purple-950: #360863;
+
+    --qwikui-blue-50: #effaff;
+    --qwikui-blue-100: #def3ff;
+    --qwikui-blue-200: #b6eaff;
+    --qwikui-blue-300: #76dbff;
+    --qwikui-blue-400: #2dcaff;
+    --qwikui-blue-500: #02b9fc;
+    --qwikui-blue-600: #0090d2;
+    --qwikui-blue-700: #0073aa;
+    --qwikui-blue-800: #00618c;
+    --qwikui-blue-900: #075073;
+    --qwikui-blue-950: #04334d;
+
+    /* neutrals - for internal use */
+    --qwikui-slate-50: #f8fafc;
+    --qwikui-slate-100: #f1f5f9;
+    --qwikui-slate-200: #e2e8f0;
+    --qwikui-slate-300: #cbd5e1;
+    --qwikui-slate-400: #94a3b8;
+    --qwikui-slate-500: #64748b;
+    --qwikui-slate-600: #475569;
+    --qwikui-slate-700: #334155;
+    --qwikui-slate-800: #1e293b;
+    --qwikui-slate-900: #0f172a;
+    --qwikui-slate-950: #020617;
+  }
+
+  html {
+    height: 100%;
+    min-height: 100%;
+    scroll-behavior: smooth;
   }
 
-  .accordion-animation-1[data-closed] {
-    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
+  body {
+    min-height: 100%;
   }
-}
 
-/* Not used yet - could be used for the colored text on the landing page when the make-it-yours color is too bright in light mode or too dim in dark mode */
-@layer components {
-  .text-outlined {
-    @apply [text-shadow:-1px_0_#777,_0_1px_#777,_1px_0_#777,_0_-1px_#777] dark:[text-shadow:-1px_0_#ccc,_0_1px_#ccc,_1px_0_#ccc,_0_-1px_#ccc];
-  }
+  /* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
+  It would make more sense to supply the user with the animation declaration in the docs.
+*/
 }
diff --git a/apps/website/postcss.config.cjs b/apps/website/postcss.config.cjs
deleted file mode 100644
index acdecac1e..000000000
--- a/apps/website/postcss.config.cjs
+++ /dev/null
@@ -1,11 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  plugins: {
-    'tailwindcss/nesting': 'postcss-nested',
-    tailwindcss: {
-      config: path.join(__dirname, 'tailwind.config.cjs'),
-    },
-    autoprefixer: {},
-  },
-};
diff --git a/apps/website/postcss.config.js b/apps/website/postcss.config.js
new file mode 100644
index 000000000..c2ddf7482
--- /dev/null
+++ b/apps/website/postcss.config.js
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
diff --git a/apps/website/src/components/animations/caveats.tsx b/apps/website/src/components/animations/caveats.tsx
index e58c54c42..c9f0dfa2e 100644
--- a/apps/website/src/components/animations/caveats.tsx
+++ b/apps/website/src/components/animations/caveats.tsx
@@ -6,7 +6,7 @@ export const TopLayerAnimationsCaveats = component$(() => {
     <Note status={NoteStatus.Warning}>
       <strong>Important Caveats for Animating Discrete Properties</strong>
 
-      <ul class="mt-4 list-disc bg-gradient-to-b pl-4">
+      <ul class="mt-4 list-disc bg-linear-to-b pl-4">
         <li>
           <strong>
             Animating <code>display</code> and <code>overlay</code>:
diff --git a/apps/website/src/components/copy-css-config/copy-css-config.tsx b/apps/website/src/components/copy-css-config/copy-css-config.tsx
index f4ef794e6..4a13010c9 100644
--- a/apps/website/src/components/copy-css-config/copy-css-config.tsx
+++ b/apps/website/src/components/copy-css-config/copy-css-config.tsx
@@ -30,7 +30,7 @@ export default component$(() => {
       >
         Copy code
       </Button>
-      <Modal.Panel class="my-animation h-[650px] max-w-2xl overflow-x-hidden rounded-base bg-background p-8 text-foreground shadow-md backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100">
+      <Modal.Panel class="my-animation rounded-base bg-background text-foreground h-[650px] max-w-2xl overflow-x-hidden p-8 shadow-md backdrop:backdrop-blur-sm backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100">
         <header>
           <h2 class="mb-2 text-lg font-bold">Copy config</h2>
           <p class="mb-6">
@@ -41,7 +41,7 @@ export default component$(() => {
         <div>
           <Highlight code={cssThemeOutput.value} language="css" class="border" />
         </div>
-        <button onClick$={() => (showSig.value = false)} class="absolute right-6 top-7">
+        <button onClick$={() => (showSig.value = false)} class="absolute top-7 right-6">
           <LuX class="h-8 w-8" />
         </button>
       </Modal.Panel>
diff --git a/apps/website/src/components/feature-list/feature-list.tsx b/apps/website/src/components/feature-list/feature-list.tsx
index ba10e2787..839a84a86 100644
--- a/apps/website/src/components/feature-list/feature-list.tsx
+++ b/apps/website/src/components/feature-list/feature-list.tsx
@@ -11,14 +11,14 @@ type FeatureListProps = {
 export const FeatureList = component$((props: FeatureListProps) => {
   return (
     <>
-      <ul class="mb-12 mt-6 !px-0">
+      <ul class="mt-6 mb-12 px-0!">
         {props.features && (
           <>
             {props.features.map((descriptor, index) => {
               return (
                 <li
                   key={descriptor}
-                  class={`flex w-full list-none items-center gap-x-2 gap-y-4 ${index === props.features.length - 1 ? '' : 'border-b-[1px]'} border-slate-200 py-2 dark:border-slate-800`}
+                  class={`flex w-full list-none items-center gap-x-2 gap-y-4 ${index === props.features.length - 1 ? '' : 'border-b'} border-slate-200 py-2 dark:border-slate-800`}
                 >
                   <LuBadgeCheck class="h-5 w-5 text-green-600" />
                   {descriptor}
@@ -29,13 +29,13 @@ export const FeatureList = component$((props: FeatureListProps) => {
         )}
         {props.roadmap && (
           <>
-            <h3 class="mb-6 mt-8 scroll-mt-20 text-xl font-semibold">Roadmap</h3>
+            <h3 class="mt-8 mb-6 scroll-mt-20 text-xl font-semibold">Roadmap</h3>
             {props.roadmap.map((descriptor) => {
               return (
                 <>
                   <li
                     key={descriptor}
-                    class="flex w-full list-none items-center gap-x-2 gap-y-4 border-b-[1px] border-slate-200 py-2 dark:border-slate-800"
+                    class="flex w-full list-none items-center gap-x-2 gap-y-4 border-b border-slate-200 py-2 dark:border-slate-800"
                   >
                     <LuBadge class="h-5 w-5 text-yellow-500" />
                     {descriptor}
@@ -52,7 +52,7 @@ export const FeatureList = component$((props: FeatureListProps) => {
                 <>
                   <li
                     key={descriptor}
-                    class="flex w-full list-none items-center gap-x-2 gap-y-4 border-b-[1px] border-slate-200 py-2 dark:border-slate-800"
+                    class="flex w-full list-none items-center gap-x-2 gap-y-4 border-b border-slate-200 py-2 dark:border-slate-800"
                   >
                     <LuBadgeAlert class="h-5 w-5 text-red-500" />
                     {descriptor}
diff --git a/apps/website/src/components/header/header.tsx b/apps/website/src/components/header/header.tsx
index b15778ce6..217f72c93 100644
--- a/apps/website/src/components/header/header.tsx
+++ b/apps/website/src/components/header/header.tsx
@@ -128,12 +128,12 @@ export default component$(({ showVersion = false }: HeaderProps) => {
   return (
     <Modal.Root
       class={cn(
-        'sticky top-0 z-10 flex h-16 justify-center border-b bg-background',
+        'bg-background sticky top-0 z-10 flex h-16 justify-center border-b',
         themeSig.value?.includes('brutalist') && 'border-b-2',
       )}
       bind:show={isSidebarOpenedSig}
     >
-      <header class="flex w-full max-w-screen-2xl items-center justify-between">
+      <header class="flex w-full items-center justify-between">
         <section class="flex items-center justify-start">
           <a href="/" aria-label="Qwik UI Logo" class="ml-4">
             <LogoWithBorders class="hidden sm:block" />
@@ -161,7 +161,7 @@ export default component$(({ showVersion = false }: HeaderProps) => {
               </a>
             )}
           </div>
-          <div class="flex items-center space-x-1 xs:space-x-4">
+          <div class="xs:space-x-4 flex items-center space-x-1">
             <MakeItYours />
             <SearchModal />
             <a
@@ -195,19 +195,19 @@ export default component$(({ showVersion = false }: HeaderProps) => {
           </div>
         </div>
       </header>
-      <Modal.Panel class="sidebar-mobile ml-auto mr-0 h-screen w-full min-w-80 max-w-sm rounded-base border-0 bg-background p-8 text-foreground shadow-md">
-        <div class="mb-2 pb-4 pt-2">
+      <Modal.Panel class="sidebar-mobile rounded-base bg-background text-foreground mr-0 ml-auto h-screen w-full max-w-sm min-w-80 border-0 p-8 shadow-md">
+        <div class="mb-2 pt-2 pb-4">
           <DocsNavigation
             linksGroups={
               menuItemsGroups && menuItemsGroups.length > 0 ? menuItemsGroups : undefined
             }
-            class="max-w-80 overflow-auto bg-background"
+            class="bg-background max-w-80 overflow-auto"
           />
         </div>
         <button
           autoFocus
           onClick$={() => (isSidebarOpenedSig.value = false)}
-          class="absolute right-6 top-[26px]"
+          class="absolute top-[26px] right-6"
         >
           <LuX class="h-8 w-8" />
         </button>
diff --git a/apps/website/src/components/highlight/highlight.tsx b/apps/website/src/components/highlight/highlight.tsx
index 779ec735e..c6ac717b6 100644
--- a/apps/website/src/components/highlight/highlight.tsx
+++ b/apps/website/src/components/highlight/highlight.tsx
@@ -21,10 +21,10 @@ export type HighlightProps = PropsOf<'div'> & {
 export const Highlight = component$(
   ({ code, copyCodeClass, language = 'tsx', ...props }: HighlightProps) => {
     return (
-      <div class="code-example data-pagefind-ignore relative rounded-base">
+      <div class="code-example data-pagefind-ignore rounded-base relative">
         <CodeCopy
           class={[
-            'absolute right-3 top-3 text-white hover:bg-slate-800 hover:text-white',
+            'absolute top-3 right-3 text-white hover:bg-slate-800 hover:text-white',
             copyCodeClass,
           ]}
           code={code}
@@ -32,7 +32,7 @@ export const Highlight = component$(
         <div
           {...props}
           class={cn(
-            'tab-size max-h-[494px] max-w-full overflow-auto rounded-sm bg-gradient-to-b from-slate-900 to-slate-800 p-6 text-sm dark:from-background dark:to-accent/30',
+            'tab-size dark:from-background dark:to-accent/30 max-h-[494px] max-w-full overflow-auto rounded-sm bg-linear-to-b from-slate-900 to-slate-800 p-6 text-sm',
             props.class,
           )}
           data-pagefind-ignore="all"
diff --git a/apps/website/src/components/info-popup/info-popup.tsx b/apps/website/src/components/info-popup/info-popup.tsx
index baabdb08f..81ded85a7 100644
--- a/apps/website/src/components/info-popup/info-popup.tsx
+++ b/apps/website/src/components/info-popup/info-popup.tsx
@@ -25,7 +25,7 @@ export const InfoPopup = component$((props: InfoProps) => {
   return (
     <Popover.Root flip={false} floating="top" gutter={4}>
       <Popover.Trigger class="flex items-center justify-center">
-        <div class="rounded-full p-1 hover:bg-slate-300 hover:bg-opacity-50">
+        <div class="hover:bg-opacity-50 rounded-full p-1 hover:bg-slate-300">
           <svg
             width="16"
             height="16"
@@ -46,7 +46,7 @@ export const InfoPopup = component$((props: InfoProps) => {
       </Popover.Trigger>
 
       <Popover.Panel class="fade-info listbox rounded-base bg-transparent">
-        <div class="text-md mb-2 max-w-xs rounded-base border border-b-2 border-border bg-popover px-3 py-2 font-[500] text-foreground shadow-lg sm:w-max">
+        <div class="text-md rounded-base border-border bg-popover text-foreground mb-2 max-w-xs border border-b-2 px-3 py-2 font-medium shadow-lg sm:w-max">
           {props.info}
         </div>
       </Popover.Panel>
diff --git a/apps/website/src/components/install-snippet/install-snippet.tsx b/apps/website/src/components/install-snippet/install-snippet.tsx
index 409972895..9f43f656c 100644
--- a/apps/website/src/components/install-snippet/install-snippet.tsx
+++ b/apps/website/src/components/install-snippet/install-snippet.tsx
@@ -46,7 +46,7 @@ export const InstallSnippet = component$<InstallSnippetProps>(({ packages }) =>
       {Object.entries(packages).map(([, value], index) => (
         <Tabs.Panel
           key={index}
-          class="rounded-b-lg border-[1.5px]  bg-gradient-to-b from-slate-900 to-slate-800 px-4 py-6 text-white shadow-lg dark:from-background dark:to-accent/50"
+          class="rounded-b-lg border-[1.5px]  bg-linear-to-b from-slate-900 to-slate-800 px-4 py-6 text-white shadow-lg dark:from-background dark:to-accent/50"
         >
           <div data-pagefind-ignore="all" class="flex items-center justify-between">
             {value}
diff --git a/apps/website/src/components/make-it-yours/make-it-yours.tsx b/apps/website/src/components/make-it-yours/make-it-yours.tsx
index 2bda6fe25..52cdc9d2e 100644
--- a/apps/website/src/components/make-it-yours/make-it-yours.tsx
+++ b/apps/website/src/components/make-it-yours/make-it-yours.tsx
@@ -78,10 +78,10 @@ export default component$<PropsOf<typeof Button>>(() => {
         <header class="flex w-full">
           <h2 class="justify-self-start text-lg font-bold">Edit Profile</h2>
         </header>
-        <div class="mb-2 mt-8 py-4">
+        <div class="mt-8 mb-2 py-4">
           <label class="mb-1 block font-medium">Preset</label>
           <select
-            class="h-12 w-full rounded-base border bg-background p-2"
+            class="rounded-base bg-background h-12 w-full border p-2"
             value={themeComputedObjectSig.value.style}
             onChange$={async (e, el) => {
               if (el.value === 'simple') {
@@ -104,7 +104,7 @@ export default component$<PropsOf<typeof Button>>(() => {
             )}
           </select>
 
-          <label class="mb-1 mt-8 block font-medium">Base</label>
+          <label class="mt-8 mb-1 block font-medium">Base</label>
           <div class="flex">
             {Object.values(ThemeBaseColors).map((baseColor: string) => {
               const isActive = themeComputedObjectSig.value.baseColor === baseColor;
@@ -121,7 +121,7 @@ export default component$<PropsOf<typeof Button>>(() => {
                   }}
                   class={cn(
                     'flex h-3 w-3 items-center justify-center rounded-none',
-                    isActive && 'border-2 border-ring',
+                    isActive && 'border-ring border-2',
                   )}
                 >
                   <span
@@ -139,7 +139,7 @@ export default component$<PropsOf<typeof Button>>(() => {
             })}
           </div>
 
-          <label class="mb-1 mt-8 block font-medium">Primary</label>
+          <label class="mt-8 mb-1 block font-medium">Primary</label>
           <div class="flex justify-end">
             <div class="grid grid-cols-[repeat(22,0fr)]">
               {Object.values(ThemePrimaryColors).map((primaryColor: string) => {
@@ -170,10 +170,7 @@ export default component$<PropsOf<typeof Button>>(() => {
                       themeComputedObjectSig.value.primaryColor = primaryColor;
                       themeSig.value = await themeStoreToThemeClasses$();
                     }}
-                    class={cn(
-                      'h-3 w-3 rounded-none',
-                      isActive && 'border-[1px] border-ring',
-                    )}
+                    class={cn('h-3 w-3 rounded-none', isActive && 'border-ring border')}
                   >
                     {(primaryColor === 'primary-slate-800' ||
                       primaryColor === 'primary-gray-800' ||
@@ -431,7 +428,7 @@ export default component$<PropsOf<typeof Button>>(() => {
           </div>
 
           <div>
-            <label class="mb-1 mt-8 block font-medium">Radius</label>
+            <label class="mt-8 mb-1 block font-medium">Radius</label>
             <div class="flex h-12 space-x-3">
               {Object.values(ThemeBorderRadiuses).map((borderRadius: string) => {
                 const isActive =
@@ -444,7 +441,7 @@ export default component$<PropsOf<typeof Button>>(() => {
                       themeComputedObjectSig.value.borderRadius = borderRadius;
                       themeSig.value = await themeStoreToThemeClasses$();
                     }}
-                    class={cn('w-12', isActive && 'mb-2 border-ring')}
+                    class={cn('w-12', isActive && 'border-ring mb-2')}
                   >
                     {borderRadius === 'border-radius-0' && 0}
                     {borderRadius === 'border-radius-dot-25' && '.25'}
@@ -471,7 +468,7 @@ export default component$<PropsOf<typeof Button>>(() => {
           </div>
         </div>
 
-        <footer class=" flex w-full justify-between gap-4">
+        <footer class="flex w-full justify-between gap-4">
           <Button
             look="ghost"
             onClick$={() => {
@@ -483,7 +480,7 @@ export default component$<PropsOf<typeof Button>>(() => {
           <CopyCssConfig />
         </footer>
         <Modal.Close
-          class={cn(buttonVariants({ size: 'sm', look: 'link' }), 'fixed right-4 top-5')}
+          class={cn(buttonVariants({ size: 'sm', look: 'link' }), 'fixed top-5 right-4')}
         >
           <LuX class="h-8 w-8" />
         </Modal.Close>
diff --git a/apps/website/src/components/mdx-components/index.tsx b/apps/website/src/components/mdx-components/index.tsx
index 021295dbf..a17d6a03f 100644
--- a/apps/website/src/components/mdx-components/index.tsx
+++ b/apps/website/src/components/mdx-components/index.tsx
@@ -39,7 +39,7 @@ export const components: Record<string, Component> = {
         {...props}
         class={[
           cn(
-            'mb-8 mt-20 scroll-mt-24 border-b-2 pb-2 text-2xl font-extrabold',
+            'mt-20 mb-8 scroll-mt-24 border-b-2 pb-2 text-2xl font-extrabold',
             props.class,
           ),
         ]}
@@ -52,7 +52,7 @@ export const components: Record<string, Component> = {
     return (
       <h3
         {...props}
-        class={[cn('mb-6 mt-8 scroll-mt-20 text-xl font-semibold', props.class)]}
+        class={[cn('mt-8 mb-6 scroll-mt-20 text-xl font-semibold', props.class)]}
       >
         <Slot />
       </h3>
@@ -60,7 +60,7 @@ export const components: Record<string, Component> = {
   }),
   h4: component$<PropsOf<'h4'>>(({ ...props }) => {
     return (
-      <h4 {...props} class={[cn('mb-4 mt-6 text-lg font-medium', props.class)]}>
+      <h4 {...props} class={[cn('mt-6 mb-4 text-lg font-medium', props.class)]}>
         <Slot />
       </h4>
     );
@@ -112,13 +112,13 @@ export const components: Record<string, Component> = {
   }>(({ rawCodeString }) => {
     return (
       <div
-        class="code-example data-pagefind-ignore relative mb-6 max-h-[31.25rem] rounded-base"
+        class="code-example data-pagefind-ignore rounded-base relative mb-6 max-h-125"
         data-pagefind-ignore="all"
       >
-        <CodeCopy class="absolute right-3 top-3" code={rawCodeString} />
+        <CodeCopy class="absolute top-3 right-3" code={rawCodeString} />
         <div
           class={cn(
-            'max-h-[31.25rem] max-w-full overflow-y-auto rounded-base border bg-gradient-to-b from-slate-900 to-slate-800 p-6 text-sm dark:from-background dark:to-accent/30',
+            'rounded-base dark:from-background dark:to-accent/30 max-h-125 max-w-full overflow-y-auto border bg-linear-to-b from-slate-900 to-slate-800 p-6 text-sm',
           )}
         >
           <pre>
diff --git a/apps/website/src/components/search/search.tsx b/apps/website/src/components/search/search.tsx
index 6c8badb7b..3eb3e200f 100644
--- a/apps/website/src/components/search/search.tsx
+++ b/apps/website/src/components/search/search.tsx
@@ -82,7 +82,7 @@ export const SearchModal = component$((props: { class?: string }) => {
         <LuSearch class="h-5 w-5 sm:h-6 sm:w-6" />
       </Modal.Trigger>
       <Modal.Panel
-        class={cn(props.class, 'mt-20 w-full !max-w-xl bg-red-500 p-0 sm:max-w-md')}
+        class={cn(props.class, 'mt-20 w-full max-w-xl! bg-red-500 p-0 sm:max-w-md')}
       >
         <Search isOpen={isOpen} />
       </Modal.Panel>
@@ -150,7 +150,7 @@ export const Search = component$(({ isOpen }: { isOpen: Signal<boolean> }) => {
         data-id="search"
         placeholder="Find anything"
         class={cn(
-          'h-12 w-full rounded-b-none border-none focus-visible:outline-none focus-visible:ring-0',
+          'h-12 w-full rounded-b-none border-none focus-visible:outline-hidden focus-visible:ring-0',
         )}
       />
       <Combobox.Inline class="max-h-[calc(100vh-200px)] overflow-auto border-t-2 border-border">
diff --git a/apps/website/src/components/showcase/showcase.tsx b/apps/website/src/components/showcase/showcase.tsx
index 88b75251a..f1c3ca4cd 100644
--- a/apps/website/src/components/showcase/showcase.tsx
+++ b/apps/website/src/components/showcase/showcase.tsx
@@ -13,13 +13,13 @@ export const Showcase = component$<ShowcaseProps>(({ rawCode, ...props }) => {
       {!props.vertical ? (
         <Tabs.Root
           {...props}
-          selectedClassName="bg-primary hover:bg-primary text-primary-foreground hover:text-primary-foreground border-t-1 font-medium "
+          selectedClassName="bg-primary hover:bg-primary text-primary-foreground hover:text-primary-foreground border-t font-medium "
         >
-          <Tabs.List class="flex rounded-t-lg border border-b-0 bg-accent">
-            <Tabs.Tab class="h-[44px] rounded-tl-md px-3 py-2 hover:bg-primary/90 hover:text-primary-foreground">
+          <Tabs.List class="bg-accent flex rounded-t-lg border border-b-0">
+            <Tabs.Tab class="hover:bg-primary/90 hover:text-primary-foreground h-[44px] rounded-tl-md px-3 py-2">
               Preview
             </Tabs.Tab>
-            <Tabs.Tab class="h-[44px] px-3 py-2 hover:bg-primary/90 hover:text-primary-foreground">
+            <Tabs.Tab class="hover:bg-primary/90 hover:text-primary-foreground h-[44px] px-3 py-2">
               Code
             </Tabs.Tab>
           </Tabs.List>
diff --git a/apps/website/src/global.css b/apps/website/src/global.css
index 8d028af93..a6aa5b3a8 100644
--- a/apps/website/src/global.css
+++ b/apps/website/src/global.css
@@ -1,6 +1,41 @@
-@tailwind components;
-@tailwind base;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../tailwind.config.cjs';
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@utility accordion-animation-1 {
+  &[data-open] {
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards
+      accordion-open;
+  }
+
+  &[data-closed] {
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards
+      accordion-close;
+  }
+}
+
+/* Not used yet - could be used for the colored text on the landing page when the make-it-yours color is too bright in light mode or too dim in dark mode */
+@utility text-outlined {
+  @apply [text-shadow:-1px_0_#777,0_1px_#777,1px_0_#777,0_-1px_#777] dark:[text-shadow:-1px_0_#ccc,0_1px_#ccc,1px_0_#ccc,0_-1px_#ccc];
+}
 
 @layer base {
   :root {
@@ -1326,72 +1361,58 @@
   }
 }
 
-:root {
-  /* primary colors - try using primary and secondary instead */
-  --qwikui-purple-50: #f9f5ff;
-  --qwikui-purple-100: #f2e8ff;
-  --qwikui-purple-200: #e7d6fe;
-  --qwikui-purple-300: #d4b5fd;
-  --qwikui-purple-400: #b37bfa;
-  --qwikui-purple-500: #9f57f5;
-  --qwikui-purple-600: #8835e8;
-  --qwikui-purple-700: #7424cc;
-  --qwikui-purple-800: #6323a6;
-  --qwikui-purple-900: #521d86;
-  --qwikui-purple-950: #360863;
-
-  --qwikui-blue-50: #effaff;
-  --qwikui-blue-100: #def3ff;
-  --qwikui-blue-200: #b6eaff;
-  --qwikui-blue-300: #76dbff;
-  --qwikui-blue-400: #2dcaff;
-  --qwikui-blue-500: #02b9fc;
-  --qwikui-blue-600: #0090d2;
-  --qwikui-blue-700: #0073aa;
-  --qwikui-blue-800: #00618c;
-  --qwikui-blue-900: #075073;
-  --qwikui-blue-950: #04334d;
-
-  /* neutrals - for internal use */
-  --qwikui-slate-50: #f8fafc;
-  --qwikui-slate-100: #f1f5f9;
-  --qwikui-slate-200: #e2e8f0;
-  --qwikui-slate-300: #cbd5e1;
-  --qwikui-slate-400: #94a3b8;
-  --qwikui-slate-500: #64748b;
-  --qwikui-slate-600: #475569;
-  --qwikui-slate-700: #334155;
-  --qwikui-slate-800: #1e293b;
-  --qwikui-slate-900: #0f172a;
-  --qwikui-slate-950: #020617;
-}
-
-html {
-  height: 100%;
-  min-height: 100%;
-  scroll-behavior: smooth;
-}
-
-body {
-  min-height: 100%;
-}
-
-/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
-  It would make more sense to supply the user with the animation declaration in the docs.
-*/
 @layer utilities {
-  .accordion-animation-1[data-open] {
-    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
+  :root {
+    /* primary colors - try using primary and secondary instead */
+    --qwikui-purple-50: #f9f5ff;
+    --qwikui-purple-100: #f2e8ff;
+    --qwikui-purple-200: #e7d6fe;
+    --qwikui-purple-300: #d4b5fd;
+    --qwikui-purple-400: #b37bfa;
+    --qwikui-purple-500: #9f57f5;
+    --qwikui-purple-600: #8835e8;
+    --qwikui-purple-700: #7424cc;
+    --qwikui-purple-800: #6323a6;
+    --qwikui-purple-900: #521d86;
+    --qwikui-purple-950: #360863;
+
+    --qwikui-blue-50: #effaff;
+    --qwikui-blue-100: #def3ff;
+    --qwikui-blue-200: #b6eaff;
+    --qwikui-blue-300: #76dbff;
+    --qwikui-blue-400: #2dcaff;
+    --qwikui-blue-500: #02b9fc;
+    --qwikui-blue-600: #0090d2;
+    --qwikui-blue-700: #0073aa;
+    --qwikui-blue-800: #00618c;
+    --qwikui-blue-900: #075073;
+    --qwikui-blue-950: #04334d;
+
+    /* neutrals - for internal use */
+    --qwikui-slate-50: #f8fafc;
+    --qwikui-slate-100: #f1f5f9;
+    --qwikui-slate-200: #e2e8f0;
+    --qwikui-slate-300: #cbd5e1;
+    --qwikui-slate-400: #94a3b8;
+    --qwikui-slate-500: #64748b;
+    --qwikui-slate-600: #475569;
+    --qwikui-slate-700: #334155;
+    --qwikui-slate-800: #1e293b;
+    --qwikui-slate-900: #0f172a;
+    --qwikui-slate-950: #020617;
+  }
+
+  html {
+    height: 100%;
+    min-height: 100%;
+    scroll-behavior: smooth;
   }
 
-  .accordion-animation-1[data-closed] {
-    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
+  body {
+    min-height: 100%;
   }
-}
 
-/* Not used yet - could be used for the colored text on the landing page when the make-it-yours color is too bright in light mode or too dim in dark mode */
-@layer components {
-  .text-outlined {
-    @apply [text-shadow:-1px_0_#777,_0_1px_#777,_1px_0_#777,_0_-1px_#777] dark:[text-shadow:-1px_0_#ccc,_0_1px_#ccc,_1px_0_#ccc,_0_-1px_#ccc];
-  }
+  /* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
+  It would make more sense to supply the user with the animation declaration in the docs.
+*/
 }
diff --git a/apps/website/src/routes/docs/headless/install/examples/accordion-qwik-city.tsx b/apps/website/src/routes/docs/headless/install/examples/accordion-qwik-city.tsx
index 5e3a0536e..f5311d45e 100644
--- a/apps/website/src/routes/docs/headless/install/examples/accordion-qwik-city.tsx
+++ b/apps/website/src/routes/docs/headless/install/examples/accordion-qwik-city.tsx
@@ -10,7 +10,7 @@ export default component$(() => {
   ];
 
   return (
-    <Accordion.Root class="box-border w-[250px] max-w-[500px] rounded-base border border-slate-500 bg-slate-600 text-white">
+    <Accordion.Root class="rounded-base box-border w-[250px] max-w-[500px] border border-slate-500 bg-slate-600 text-white">
       {cats.map((item, index) => (
         <Accordion.Item class="w-full" key={index}>
           <Accordion.Header as="h3">
@@ -18,9 +18,7 @@ export default component$(() => {
               class={`group flex min-h-[44px] w-full items-center justify-between ${
                 index === 0 ? 'rounded-t-sm' : ''
               } ${
-                index === cats.length - 1
-                  ? 'rounded-b-sm border-b-[0px]'
-                  : 'border-b-[1px]'
+                index === cats.length - 1 ? 'rounded-b-sm border-b-0' : 'border-b'
               } border-slate-500 bg-slate-600 px-4 py-2 text-left hover:bg-slate-700`}
             >
               <span>favorite cat {index + 1}</span>
@@ -30,7 +28,7 @@ export default component$(() => {
             </Accordion.Trigger>
           </Accordion.Header>
           <Accordion.Content class="accordion-animation-1 overflow-hidden">
-            <p class="bg-slate-900 p-4 ">{item}</p>
+            <p class="bg-slate-900 p-4">{item}</p>
           </Accordion.Content>
         </Accordion.Item>
       ))}
diff --git a/apps/website/src/routes/docs/styled/accordion/index.mdx b/apps/website/src/routes/docs/styled/accordion/index.mdx
index e893dcb4c..025ece769 100644
--- a/apps/website/src/routes/docs/styled/accordion/index.mdx
+++ b/apps/website/src/routes/docs/styled/accordion/index.mdx
@@ -72,7 +72,7 @@ const Content = component$<PropsOf<typeof HeadlessAccordion.Content>>((props) =>
     <HeadlessAccordion.Content
       {...props}
       class={cn(
-        'overflow-hidden text-sm data-[closed]:animate-accordion-up data-[open]:animate-accordion-down',
+        'overflow-hidden text-sm data-closed:animate-accordion-up data-open:animate-accordion-down',
         props.class,
       )}
     >
diff --git a/apps/website/src/routes/docs/styled/badge/index.mdx b/apps/website/src/routes/docs/styled/badge/index.mdx
index 5e51b04dc..0aed2da99 100644
--- a/apps/website/src/routes/docs/styled/badge/index.mdx
+++ b/apps/website/src/routes/docs/styled/badge/index.mdx
@@ -26,7 +26,7 @@ import { cn } from '@qwik-ui/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const badgeVariants = cva(
-  'inline-flex items-center rounded-sm px-2.5 py-0.5 text-xs font-semibold shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-sm px-2.5 py-0.5 text-xs font-semibold shadow-sm transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       look: {
diff --git a/apps/website/src/routes/docs/styled/button/index.mdx b/apps/website/src/routes/docs/styled/button/index.mdx
index 76a7e79c9..8ed77bb13 100644
--- a/apps/website/src/routes/docs/styled/button/index.mdx
+++ b/apps/website/src/routes/docs/styled/button/index.mdx
@@ -26,7 +26,7 @@ import { cn } from '@qwik-ui/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded text-sm font-medium transition-all duration-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center rounded text-sm font-medium transition-all duration-100 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       look: {
diff --git a/apps/website/src/routes/docs/styled/carousel/examples/stepper.tsx b/apps/website/src/routes/docs/styled/carousel/examples/stepper.tsx
index d74e28dea..8ad209924 100644
--- a/apps/website/src/routes/docs/styled/carousel/examples/stepper.tsx
+++ b/apps/website/src/routes/docs/styled/carousel/examples/stepper.tsx
@@ -14,7 +14,7 @@ export default component$(() => {
             <Carousel.Step key={index}>
               <span
                 class={cn(
-                  'flex size-8 items-center justify-center rounded-full bg-muted text-xl font-semibold',
+                  'bg-muted flex size-8 items-center justify-center rounded-full text-xl font-semibold',
                   progressIndex.value >= index && 'bg-primary text-primary-foreground',
                 )}
               >
@@ -23,7 +23,7 @@ export default component$(() => {
               <span class="font-semibold">{title}</span>
             </Carousel.Step>
             {index < steps.length - 1 && (
-              <div class="mx-2 flex-grow">
+              <div class="mx-2 grow">
                 <Separator
                   class={cn(progressIndex.value > index ? 'bg-foreground' : 'bg-muted')}
                 />
diff --git a/apps/website/src/routes/docs/styled/carousel/index.mdx b/apps/website/src/routes/docs/styled/carousel/index.mdx
index 1781ef210..b55f23db7 100644
--- a/apps/website/src/routes/docs/styled/carousel/index.mdx
+++ b/apps/website/src/routes/docs/styled/carousel/index.mdx
@@ -196,7 +196,7 @@ const Bullet = component$((props: PropsOf<typeof HCarousel.Bullet>) => {
       {...props}
       class={cn(
         'size-5 rounded-full border border-background bg-muted outline-0 outline-muted transition-all duration-300 ease-in-out hover:border-muted',
-        'data-[active]:border-primary data-[active]:bg-primary data-[active]:text-primary-foreground',
+        'data-active:border-primary data-active:bg-primary data-active:text-primary-foreground',
         props.class,
       )}
     />
@@ -227,7 +227,7 @@ const Step = component$((props: PropsOf<typeof HCarousel.Step>) => {
     <HCarousel.Step
       {...props}
       class={cn(
-        'flex items-center gap-1 [&[data-current]_span:first-child]:outline-2 [&[data-current]_span:first-child]:outline-offset-[-2px] [&[data-current]_span:first-child]:outline-primary',
+        'flex items-center gap-1 [&[data-current]_span:first-child]:outline-2 [&[data-current]_span:first-child]:-outline-offset-2 [&[data-current]_span:first-child]:outline-primary',
         props.class,
       )}
     >
diff --git a/apps/website/src/routes/docs/styled/combobox/index.mdx b/apps/website/src/routes/docs/styled/combobox/index.mdx
index 1b5b55909..bf11e60d5 100644
--- a/apps/website/src/routes/docs/styled/combobox/index.mdx
+++ b/apps/website/src/routes/docs/styled/combobox/index.mdx
@@ -88,7 +88,7 @@ const Input = component$<PropsOf<typeof HeadlessCombobox.Input>>((props) => {
     <HeadlessCombobox.Input
       {...props}
       class={cn(
-        'flex h-10 w-full rounded-md border border-input py-3 pl-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full rounded-md border border-input py-3 pl-2 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )}
     />
@@ -122,7 +122,7 @@ const Item = component$<PropsOf<typeof HeadlessCombobox.Item>>(({ ...props }) =>
     <HeadlessCombobox.Item
       {...props}
       class={cn(
-        'group flex justify-between gap-4 rounded-sm px-2 text-foreground aria-disabled:font-light aria-disabled:text-muted-foreground data-[highlighted]:cursor-pointer data-[highlighted]:bg-accent',
+        'group flex justify-between gap-4 rounded-sm px-2 text-foreground aria-disabled:font-light aria-disabled:text-muted-foreground data-highlighted:cursor-pointer data-highlighted:bg-accent',
         props.class,
       )}
     >
diff --git a/apps/website/src/routes/docs/styled/input/index.mdx b/apps/website/src/routes/docs/styled/input/index.mdx
index 4b1cd2646..0b6ea7471 100644
--- a/apps/website/src/routes/docs/styled/input/index.mdx
+++ b/apps/website/src/routes/docs/styled/input/index.mdx
@@ -44,7 +44,7 @@ export const Input = component$<InputProps>(
           value={valueSig ? valueSig.value : value}
           onInput$={valueSig ? $((__, el) => (valueSig.value = el.value)) : onInput$}
           class={cn(
-            'flex h-12 w-full rounded-base border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+            'flex h-12 w-full rounded-base border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
             props.class,
           )}
           id={inputId}
diff --git a/apps/website/src/routes/docs/styled/modal/examples/hero.tsx b/apps/website/src/routes/docs/styled/modal/examples/hero.tsx
index 2f66caf9f..afe9c3d1a 100644
--- a/apps/website/src/routes/docs/styled/modal/examples/hero.tsx
+++ b/apps/website/src/routes/docs/styled/modal/examples/hero.tsx
@@ -42,7 +42,7 @@ export default component$(() => {
         <Modal.Close
           class={cn(
             buttonVariants({ size: 'icon', look: 'link' }),
-            'absolute right-3 top-2',
+            'absolute top-2 right-3',
           )}
           type="submit"
         >
diff --git a/apps/website/src/routes/docs/styled/modal/index.mdx b/apps/website/src/routes/docs/styled/modal/index.mdx
index c2f55b98e..8e5992edf 100644
--- a/apps/website/src/routes/docs/styled/modal/index.mdx
+++ b/apps/website/src/routes/docs/styled/modal/index.mdx
@@ -36,21 +36,21 @@ const Close = HeadlessModal.Close;
 
 export const panelVariants = cva(
   [
-    'fixed w-full bg-background p-6 text-foreground transition-all backdrop:brightness-50 backdrop:backdrop-blur-sm',
-    'data-[closing]:duration-300 data-[open]:duration-300 data-[open]:animate-in data-[closing]:animate-out',
-    'backdrop:data-[closing]:duration-300 backdrop:data-[open]:duration-300 backdrop:data-[open]:animate-in backdrop:data-[closing]:animate-out backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
+    'fixed w-full bg-background p-6 text-foreground transition-all backdrop:brightness-50 backdrop:backdrop-blur-xs',
+    'data-closing:duration-300 data-open:duration-300 data-open:animate-in data-closing:animate-out',
+    'data-closing:backdrop:duration-300 data-open:backdrop:duration-300 data-open:backdrop:animate-in data-closing:backdrop:animate-out data-closing:backdrop:fade-out data-open:backdrop:fade-in',
   ],
   {
     variants: {
       position: {
         center:
-          'max-w-lg rounded-base shadow-lg data-[closed]:fade-out data-[open]:fade-in data-[closed]:zoom-out-95 data-[open]:zoom-in-95 data-[open]:slide-in-from-bottom-2 backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
-        top: 'inset-x-0 top-0 mt-0 rounded-b-base border-b data-[closing]:slide-out-to-top data-[open]:slide-in-from-top',
+          'max-w-lg rounded-base shadow-lg data-closed:fade-out data-open:fade-in data-closed:zoom-out-95 data-open:zoom-in-95 data-open:slide-in-from-bottom-2 data-closing:backdrop:fade-out data-open:backdrop:fade-in',
+        top: 'inset-x-0 top-0 mt-0 rounded-b-base border-b data-closing:slide-out-to-top data-open:slide-in-from-top',
         bottom:
-          'inset-x-0 bottom-0 mb-0 rounded-t-base border-t data-[closing]:slide-out-to-bottom data-[open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 ml-0 h-full max-w-sm rounded-r-base border-r data-[closing]:slide-out-to-left data-[open]:slide-in-from-left',
+          'inset-x-0 bottom-0 mb-0 rounded-t-base border-t data-closing:slide-out-to-bottom data-open:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 ml-0 h-full max-w-sm rounded-r-base border-r data-closing:slide-out-to-left data-open:slide-in-from-left',
         right:
-          'inset-y-0 right-0 mr-0 h-full max-w-sm rounded-l-base border-l data-[closing]:slide-out-to-right data-[open]:slide-in-from-right',
+          'inset-y-0 right-0 mr-0 h-full max-w-sm rounded-l-base border-l data-closing:slide-out-to-right data-open:slide-in-from-right',
       },
     },
     defaultVariants: {
diff --git a/apps/website/src/routes/docs/styled/popover/examples/hero.tsx b/apps/website/src/routes/docs/styled/popover/examples/hero.tsx
index bb62704ad..a024966fd 100644
--- a/apps/website/src/routes/docs/styled/popover/examples/hero.tsx
+++ b/apps/website/src/routes/docs/styled/popover/examples/hero.tsx
@@ -10,8 +10,8 @@ export default component$(() => {
       <Popover.Panel>
         <div class="grid gap-4">
           <div class="space-y-2">
-            <h4 class="font-medium leading-none">Dimensions</h4>
-            <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
+            <h4 class="leading-none font-medium">Dimensions</h4>
+            <p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
           </div>
           <div class="grid gap-2">
             <div class="grid grid-cols-5 items-center gap-4">
diff --git a/apps/website/src/routes/docs/styled/popover/index.mdx b/apps/website/src/routes/docs/styled/popover/index.mdx
index fcb7c481a..98a0222d6 100644
--- a/apps/website/src/routes/docs/styled/popover/index.mdx
+++ b/apps/website/src/routes/docs/styled/popover/index.mdx
@@ -40,8 +40,8 @@ const Panel = component$<PropsOf<typeof HeadlessPopover.Panel>>(({ ...props }) =
     <HeadlessPopover.Panel
       {...props}
       class={cn(
-        'my-transition w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
-        'data-[open]:animate-in data-[closing]:animate-out data-[closing]:fade-out data-[open]:fade-in data-[closing]:zoom-out-95 data-[open]:zoom-in-95',
+        'my-transition w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden',
+        'data-open:animate-in data-closing:animate-out data-closing:fade-out data-open:fade-in data-closing:zoom-out-95 data-open:zoom-in-95',
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
       )}
diff --git a/apps/website/src/routes/docs/styled/select/index.mdx b/apps/website/src/routes/docs/styled/select/index.mdx
index 1b3ea49d7..eb1498a61 100644
--- a/apps/website/src/routes/docs/styled/select/index.mdx
+++ b/apps/website/src/routes/docs/styled/select/index.mdx
@@ -56,7 +56,7 @@ const Trigger = component$<PropsOf<typeof HeadlessSelect.Trigger>>(({ ...props }
       <HeadlessSelect.Trigger
         {...props}
         class={cn(
-          'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+          'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
           props.class,
         )}
       >
@@ -75,7 +75,7 @@ const Popover = component$<PropsOf<typeof HeadlessSelect.Popover>>(({ ...props }
       <HeadlessSelect.Popover
         {...props}
         class={cn(
-          'w-full max-w-[15rem] data-[open]:animate-in data-[closing]:animate-out data-[closing]:fade-out-0 data-[open]:fade-in-0 data-[closing]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'w-full max-w-60 data-open:animate-in data-closing:animate-out data-closing:fade-out-0 data-open:fade-in-0 data-closing:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           // 'overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md',
           props.class,
         )}
@@ -112,8 +112,8 @@ const Item = component$<PropsOf<typeof HeadlessSelect.Item>>(({ ...props }) => {
     <HeadlessSelect.Item
       {...props}
       class={cn(
-        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        'data-[highlighted]:border-base data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        'data-highlighted:border-base data-highlighted:bg-accent data-highlighted:text-accent-foreground',
         props.class,
       )}
     >
diff --git a/apps/website/src/routes/docs/styled/tabs/index.mdx b/apps/website/src/routes/docs/styled/tabs/index.mdx
index d46ae4598..1268f298f 100644
--- a/apps/website/src/routes/docs/styled/tabs/index.mdx
+++ b/apps/website/src/routes/docs/styled/tabs/index.mdx
@@ -55,7 +55,7 @@ const Tab = component$<PropsOf<typeof HeadlessTabs.Tab>>((props) => {
     <HeadlessTabs.Tab
       {...props}
       class={cn(
-        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=selected]:border-base data-[state=selected]:bg-background data-[state=selected]:text-foreground data-[state=selected]:shadow-inner',
+        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=selected]:border-base data-[state=selected]:bg-background data-[state=selected]:text-foreground data-[state=selected]:shadow-inner',
         props.class,
       )}
     >
@@ -69,7 +69,7 @@ const Panel = component$<PropsOf<typeof HeadlessTabs.Panel>>((props) => {
     <HeadlessTabs.Panel
       {...props}
       class={cn(
-        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
         props.class,
       )}
     >
diff --git a/apps/website/src/routes/docs/styled/textarea/index.mdx b/apps/website/src/routes/docs/styled/textarea/index.mdx
index fe7c1a9dc..c65a524aa 100644
--- a/apps/website/src/routes/docs/styled/textarea/index.mdx
+++ b/apps/website/src/routes/docs/styled/textarea/index.mdx
@@ -41,7 +41,7 @@ export const Textarea = component$<TextareaProps>(
           value={valueSig ? valueSig.value : value}
           onInput$={valueSig ? $((__, el) => (valueSig.value = el.value)) : onInput$}
           class={cn(
-            '[&::-webkit-scrollbar-track]:bg-blue flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+            '[&::-webkit-scrollbar-track]:bg-blue flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
             props.class,
           )}
           id={textareaId}
diff --git a/apps/website/src/routes/docs/styled/toggle/index.mdx b/apps/website/src/routes/docs/styled/toggle/index.mdx
index 30b16bafe..7fec841bd 100644
--- a/apps/website/src/routes/docs/styled/toggle/index.mdx
+++ b/apps/website/src/routes/docs/styled/toggle/index.mdx
@@ -31,7 +31,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { Toggle as HeadlessToggle } from '@qwik-ui/headless';
 
 export const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-[pressed=true]:bg-primary aria-[pressed=true]:text-primary-foreground',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-primary aria-pressed:text-primary-foreground',
   {
     variants: {
       look: {
diff --git a/apps/website/src/routes/docs/styled/tooltip/index.mdx b/apps/website/src/routes/docs/styled/tooltip/index.mdx
index 0b9d8373b..d50d4ca87 100644
--- a/apps/website/src/routes/docs/styled/tooltip/index.mdx
+++ b/apps/website/src/routes/docs/styled/tooltip/index.mdx
@@ -43,7 +43,7 @@ const Panel = component$<PropsOf<typeof HeadlessTooltip.Panel>>(({ ...props }) =
       {...props}
       class={cn(
         'w-fit text-balance rounded-md border bg-background px-3 py-1.5 text-xs text-foreground shadow animate-in fade-in-0 zoom-in-95',
-        'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95',
+        'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
       )}
diff --git a/apps/website/src/routes/index@landing.tsx b/apps/website/src/routes/index@landing.tsx
index ba6d5f14c..0ba8771ae 100644
--- a/apps/website/src/routes/index@landing.tsx
+++ b/apps/website/src/routes/index@landing.tsx
@@ -50,7 +50,7 @@ export default component$(() => {
       </h2>
       <p class="text-center text-lg lg:text-xl">
         Choose a kit and start building the future{' '}
-        <span class="hue-rotate-[150deg]">⚡</span>
+        <span class="hue-rotate-150">⚡</span>
       </p>
       <div class="mt-4 flex flex-wrap justify-center justify-items-center gap-14">
         <a href={`/docs/headless/introduction`}>
diff --git a/apps/website/src/routes/layout.tsx b/apps/website/src/routes/layout.tsx
index d6a026702..95e078dd3 100644
--- a/apps/website/src/routes/layout.tsx
+++ b/apps/website/src/routes/layout.tsx
@@ -23,7 +23,7 @@ export default component$(() => {
     <>
       <Header showBottomBorder={true} showVersion={true} />
       <div class="grid justify-center">
-        <div class="grid w-full max-w-screen-2xl grid-cols-[minmax(0,1fr)] lg:grid-cols-[288px_minmax(0,1fr)] xl:grid-cols-[288px_minmax(0,968px)_240px] 2xl:gap-16">
+        <div class="grid w-full grid-cols-[minmax(0,1fr)] lg:grid-cols-[288px_minmax(0,1fr)] xl:grid-cols-[288px_minmax(0,968px)_240px] 2xl:gap-16">
           <DocsNavigation
             linksGroups={
               menuItemsGroups && menuItemsGroups.length > 0 ? menuItemsGroups : undefined
@@ -37,7 +37,7 @@ export default component$(() => {
           </MDXProvider>
           <div class="mx-6 hidden text-sm xl:block">
             <div class="fixed translate-y-[-20px] py-12">
-              <div class="toc-scrollbar mb-4 h-[calc(100vh-64px)] overflow-auto pb-16 pr-6">
+              <div class="toc-scrollbar mb-4 h-[calc(100vh-64px)] overflow-auto pr-6 pb-16">
                 <DashboardTableOfContents headings={headings ? headings : []} />
               </div>
             </div>
diff --git a/apps/website/tsconfig.app.json b/apps/website/tsconfig.app.json
index 1a80d4b20..957523dfa 100644
--- a/apps/website/tsconfig.app.json
+++ b/apps/website/tsconfig.app.json
@@ -5,6 +5,5 @@
     "outDir": "../../dist/out-tsc"
   },
   "files": [],
-  "exclude": ["tailwind.config.cjs"],
   "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
 }
diff --git a/package.json b/package.json
index 97bfbd3b3..0c5f918ca 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
     "@shikijs/transformers": "3.4.2",
     "@swc-node/register": "^1.9.1",
     "@swc/core": "^1.5.7",
+    "@tailwindcss/postcss": "4.1.10",
     "@types/decompress": "4.2.7",
     "@types/eslint": "8.56.12",
     "@types/estree-jsx": "1.0.5",
@@ -121,7 +122,7 @@
     "simple-git-hooks": "2.11.1",
     "specificity": "^1.0.0",
     "tailwind-merge": "^3.3.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.10",
     "tailwindcss-animate": "^1.0.7",
     "tree-sitter": "0.21.1",
     "tree-sitter-typescript": "0.23.0",
diff --git a/packages/kit-styled/src/components/accordion/accordion.tsx b/packages/kit-styled/src/components/accordion/accordion.tsx
index 4437f0814..747292a14 100644
--- a/packages/kit-styled/src/components/accordion/accordion.tsx
+++ b/packages/kit-styled/src/components/accordion/accordion.tsx
@@ -34,7 +34,7 @@ const Trigger = component$<
         )}
       >
         <Slot />
-        <LuChevronDown class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+        <LuChevronDown class="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" />
       </HeadlessAccordion.Trigger>
     </HeadlessAccordion.Header>
   );
@@ -45,11 +45,11 @@ const Content = component$<PropsOf<typeof HeadlessAccordion.Content>>((props) =>
     <HeadlessAccordion.Content
       {...props}
       class={cn(
-        'overflow-hidden text-sm data-[closed]:animate-accordion-up data-[open]:animate-accordion-down',
+        'data-closed:animate-accordion-up data-open:animate-accordion-down overflow-hidden text-sm',
         props.class,
       )}
     >
-      <div class="pb-4 pt-0">
+      <div class="pt-0 pb-4">
         <Slot />
       </div>
     </HeadlessAccordion.Content>
diff --git a/packages/kit-styled/src/components/badge/badge.tsx b/packages/kit-styled/src/components/badge/badge.tsx
index 00885865a..eaf809fe4 100644
--- a/packages/kit-styled/src/components/badge/badge.tsx
+++ b/packages/kit-styled/src/components/badge/badge.tsx
@@ -3,7 +3,7 @@ import { cn } from '@qwik-ui/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const badgeVariants = cva(
-  'inline-flex items-center rounded-sm px-2.5 py-0.5 text-xs font-semibold shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-sm px-2.5 py-0.5 text-xs font-semibold shadow-sm transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       look: {
diff --git a/packages/kit-styled/src/components/button/button.tsx b/packages/kit-styled/src/components/button/button.tsx
index 487d595d0..8e9dff1d9 100644
--- a/packages/kit-styled/src/components/button/button.tsx
+++ b/packages/kit-styled/src/components/button/button.tsx
@@ -3,7 +3,7 @@ import { cn } from '@qwik-ui/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const buttonVariants = cva(
-  'group inline-flex items-center justify-center rounded text-sm font-medium transition-all duration-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'group inline-flex items-center justify-center rounded text-sm font-medium transition-all duration-100 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       look: {
diff --git a/packages/kit-styled/src/components/carousel/carousel.tsx b/packages/kit-styled/src/components/carousel/carousel.tsx
index 57b20e705..9f839c890 100644
--- a/packages/kit-styled/src/components/carousel/carousel.tsx
+++ b/packages/kit-styled/src/components/carousel/carousel.tsx
@@ -93,7 +93,7 @@ const Previous = component$<
       class={cn(
         'absolute',
         context.orientation === 'horizontal'
-          ? '-left-12 top-1/2 -translate-y-1/2'
+          ? 'top-1/2 -left-12 -translate-y-1/2'
           : '-top-12 right-1/2 translate-x-1/2',
       )}
     >
@@ -129,8 +129,8 @@ const Next = component$<
       class={cn(
         'absolute',
         context.orientation === 'horizontal'
-          ? '-right-12 top-1/2 -translate-y-1/2'
-          : '-bottom-12 right-1/2 translate-x-1/2',
+          ? 'top-1/2 -right-12 -translate-y-1/2'
+          : 'right-1/2 -bottom-12 translate-x-1/2',
       )}
     >
       {/* moves content to the right on hover */}
@@ -173,8 +173,8 @@ const Bullet = component$<PropsOf<typeof HCarousel.Bullet>>((props) => {
     <HCarousel.Bullet
       {...props}
       class={cn(
-        'size-5 rounded-full border border-background bg-muted outline-0 outline-muted transition-all duration-300 ease-in-out hover:border-muted',
-        'data-[active]:border-primary data-[active]:bg-primary data-[active]:text-primary-foreground',
+        'border-background bg-muted outline-muted hover:border-muted size-5 rounded-full border outline-0 transition-all duration-300 ease-in-out',
+        'data-active:border-primary data-active:bg-primary data-active:text-primary-foreground',
         props.class,
       )}
     />
@@ -205,7 +205,7 @@ const Step = component$<PropsOf<typeof HCarousel.Step>>((props) => {
     <HCarousel.Step
       {...props}
       class={cn(
-        'flex items-center gap-1 [&[data-current]_span:first-child]:outline-2 [&[data-current]_span:first-child]:outline-offset-[-2px] [&[data-current]_span:first-child]:outline-primary',
+        '[&[data-current]_span:first-child]:outline-primary flex items-center gap-1 [&[data-current]_span:first-child]:outline-2 [&[data-current]_span:first-child]:-outline-offset-2',
         props.class,
       )}
     >
diff --git a/packages/kit-styled/src/components/combobox/combobox.tsx b/packages/kit-styled/src/components/combobox/combobox.tsx
index bef1e56a1..aeafe604f 100644
--- a/packages/kit-styled/src/components/combobox/combobox.tsx
+++ b/packages/kit-styled/src/components/combobox/combobox.tsx
@@ -63,7 +63,7 @@ const Input = component$<PropsOf<typeof HeadlessCombobox.Input>>((props) => {
     <HeadlessCombobox.Input
       {...props}
       class={cn(
-        'flex h-12 w-full rounded-base border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-12 w-full rounded-base border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )}
     />
@@ -97,7 +97,7 @@ const Item = component$<PropsOf<typeof HeadlessCombobox.Item>>(({ ...props }) =>
     <HeadlessCombobox.Item
       {...props}
       class={cn(
-        'group flex justify-between gap-4 rounded-sm px-2 text-foreground aria-disabled:font-light aria-disabled:text-muted-foreground data-[highlighted]:cursor-pointer data-[highlighted]:bg-accent',
+        'group flex justify-between gap-4 rounded-sm px-2 text-foreground aria-disabled:font-light aria-disabled:text-muted-foreground data-highlighted:cursor-pointer data-highlighted:bg-accent',
         props.class,
       )}
     >
diff --git a/packages/kit-styled/src/components/dropdown/dropdown.tsx b/packages/kit-styled/src/components/dropdown/dropdown.tsx
index 6f5242661..e46ce08bd 100644
--- a/packages/kit-styled/src/components/dropdown/dropdown.tsx
+++ b/packages/kit-styled/src/components/dropdown/dropdown.tsx
@@ -32,8 +32,8 @@ const Popover = component$((props: PopoverProps) => {
     <HDropdown.Popover
       {...props}
       class={cn(
-        'min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
-        'data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95',
+        'bg-popover text-popover-foreground min-w-32 overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95',
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
       )}
@@ -52,9 +52,9 @@ const Item = component$(({ inset, ...props }: ItemProps) => {
     <HDropdown.Item
       {...props}
       class={cn(
-        'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+        'relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors select-none',
         'focus:bg-accent focus:text-accent-foreground',
-        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'data-disabled:pointer-events-none data-disabled:opacity-50',
         '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
         inset && 'pl-8',
         props.class,
@@ -79,7 +79,7 @@ type SeparatorProps = PropsOf<typeof HDropdown.Separator>;
 
 const Separator = component$((props: SeparatorProps) => {
   return (
-    <HDropdown.Separator {...props} class={cn('-mx-1 my-1 h-px bg-muted', props.class)} />
+    <HDropdown.Separator {...props} class={cn('bg-muted -mx-1 my-1 h-px', props.class)} />
   );
 });
 
diff --git a/packages/kit-styled/src/components/input/input.tsx b/packages/kit-styled/src/components/input/input.tsx
index 72d00a827..453727b19 100644
--- a/packages/kit-styled/src/components/input/input.tsx
+++ b/packages/kit-styled/src/components/input/input.tsx
@@ -19,7 +19,7 @@ export const Input = component$<InputProps>(
           value={valueSig ? valueSig.value : value}
           onInput$={valueSig ? $((__, el) => (valueSig.value = el.value)) : onInput$}
           class={cn(
-            'flex h-12 w-full rounded-base border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+            'flex h-12 w-full rounded-base border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
             props.class,
           )}
           id={inputId}
diff --git a/packages/kit-styled/src/components/modal/modal.tsx b/packages/kit-styled/src/components/modal/modal.tsx
index e6580b0ac..7e87a4886 100644
--- a/packages/kit-styled/src/components/modal/modal.tsx
+++ b/packages/kit-styled/src/components/modal/modal.tsx
@@ -11,21 +11,21 @@ const Close = HeadlessModal.Close;
 
 export const panelVariants = cva(
   [
-    'fixed w-full bg-background p-6 text-foreground transition-all backdrop:brightness-50 backdrop:backdrop-blur-sm',
-    'data-[closing]:duration-300 data-[open]:duration-300 data-[open]:animate-in data-[closing]:animate-out',
-    'backdrop:data-[closing]:duration-300 backdrop:data-[open]:duration-300 backdrop:data-[open]:animate-in backdrop:data-[closing]:animate-out backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
+    'fixed w-full bg-background p-6 text-foreground transition-all backdrop:brightness-50 backdrop:backdrop-blur-xs',
+    'data-closing:duration-300 data-open:duration-300 data-open:animate-in data-closing:animate-out',
+    'data-closing:backdrop:duration-300 data-open:backdrop:duration-300 data-open:backdrop:animate-in data-closing:backdrop:animate-out data-closing:backdrop:fade-out data-open:backdrop:fade-in',
   ],
   {
     variants: {
       position: {
         center:
-          'max-w-lg rounded-base shadow-lg data-[closed]:fade-out data-[open]:fade-in data-[closed]:zoom-out-95 data-[open]:zoom-in-95 data-[open]:slide-in-from-bottom-2 backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
-        top: 'inset-x-0 top-0 mt-0 rounded-b-base border-b data-[closing]:slide-out-to-top data-[open]:slide-in-from-top',
+          'max-w-lg rounded-base shadow-lg data-closed:fade-out data-open:fade-in data-closed:zoom-out-95 data-open:zoom-in-95 data-open:slide-in-from-bottom-2 data-closing:backdrop:fade-out data-open:backdrop:fade-in',
+        top: 'inset-x-0 top-0 mt-0 rounded-b-base border-b data-closing:slide-out-to-top data-open:slide-in-from-top',
         bottom:
-          'inset-x-0 bottom-0 mb-0 rounded-t-base border-t data-[closing]:slide-out-to-bottom data-[open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 ml-0 h-full max-w-sm rounded-r-base border-r data-[closing]:slide-out-to-left data-[open]:slide-in-from-left',
+          'inset-x-0 bottom-0 mb-0 rounded-t-base border-t data-closing:slide-out-to-bottom data-open:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 ml-0 h-full max-w-sm rounded-r-base border-r data-closing:slide-out-to-left data-open:slide-in-from-left',
         right:
-          'inset-y-0 right-0 mr-0 h-full max-w-sm rounded-l-base border-l data-[closing]:slide-out-to-right data-[open]:slide-in-from-right',
+          'inset-y-0 right-0 mr-0 h-full max-w-sm rounded-l-base border-l data-closing:slide-out-to-right data-open:slide-in-from-right',
       },
     },
     defaultVariants: {
diff --git a/packages/kit-styled/src/components/popover/popover.tsx b/packages/kit-styled/src/components/popover/popover.tsx
index dc5e26b97..f5cc6f6e8 100644
--- a/packages/kit-styled/src/components/popover/popover.tsx
+++ b/packages/kit-styled/src/components/popover/popover.tsx
@@ -17,8 +17,8 @@ const Panel = component$<PropsOf<typeof HeadlessPopover.Panel>>(({ ...props }) =
     <HeadlessPopover.Panel
       {...props}
       class={cn(
-        'my-transition w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
-        'data-[open]:animate-in data-[closing]:animate-out data-[closing]:fade-out data-[open]:fade-in data-[closing]:zoom-out-95 data-[open]:zoom-in-95',
+        'my-transition w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden',
+        'data-open:animate-in data-closing:animate-out data-closing:fade-out data-open:fade-in data-closing:zoom-out-95 data-open:zoom-in-95',
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
       )}
diff --git a/packages/kit-styled/src/components/select/select.tsx b/packages/kit-styled/src/components/select/select.tsx
index 7fb4bab3c..59e14bdad 100644
--- a/packages/kit-styled/src/components/select/select.tsx
+++ b/packages/kit-styled/src/components/select/select.tsx
@@ -31,7 +31,7 @@ const Trigger = component$<PropsOf<typeof HeadlessSelect.Trigger>>(({ ...props }
       <HeadlessSelect.Trigger
         {...props}
         class={cn(
-          'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+          'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm focus:ring-1 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
           props.class,
         )}
       >
@@ -50,7 +50,7 @@ const Popover = component$<PropsOf<typeof HeadlessSelect.Popover>>(({ ...props }
       <HeadlessSelect.Popover
         {...props}
         class={cn(
-          'w-full min-w-32 max-w-[15rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[open]:animate-in data-[closing]:animate-out data-[closing]:fade-out-0 data-[open]:fade-in-0 data-[closing]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'bg-popover text-popover-foreground data-open:animate-in data-closing:animate-out data-closing:fade-out-0 data-open:fade-in-0 data-closing:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-full max-w-60 min-w-32 rounded-md border p-1 shadow-md',
           props.class,
         )}
       >
@@ -71,8 +71,8 @@ const Item = component$<PropsOf<typeof HeadlessSelect.Item>>(({ ...props }) => {
     <HeadlessSelect.Item
       {...props}
       class={cn(
-        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        'data-[highlighted]:border-base data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
+        'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
+        'data-highlighted:border-base data-highlighted:bg-accent data-highlighted:text-accent-foreground',
         props.class,
       )}
     >
diff --git a/packages/kit-styled/src/components/tabs/tabs.tsx b/packages/kit-styled/src/components/tabs/tabs.tsx
index e9e4d86fa..0db4b3206 100644
--- a/packages/kit-styled/src/components/tabs/tabs.tsx
+++ b/packages/kit-styled/src/components/tabs/tabs.tsx
@@ -16,7 +16,7 @@ const List = component$<PropsOf<typeof HeadlessTabs.List>>((props) => {
     <HeadlessTabs.List
       {...props}
       class={cn(
-        'inline-flex items-center justify-center rounded-lg border-base bg-muted p-1 text-muted-foreground shadow-sm',
+        'border-base bg-muted text-muted-foreground inline-flex items-center justify-center rounded-lg p-1 shadow-sm',
         props.class,
       )}
     >
@@ -30,7 +30,7 @@ const Tab = component$<PropsOf<typeof HeadlessTabs.Tab>>((props) => {
     <HeadlessTabs.Tab
       {...props}
       class={cn(
-        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=selected]:border-base data-[state=selected]:bg-background data-[state=selected]:text-foreground data-[state=selected]:shadow-inner',
+        'ring-offset-background focus-visible:ring-ring data-[state=selected]:border-base data-[state=selected]:bg-background data-[state=selected]:text-foreground inline-flex items-center justify-center rounded-md px-3 py-2 font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=selected]:shadow-inner',
         props.class,
       )}
     >
@@ -44,7 +44,7 @@ const Panel = component$<PropsOf<typeof HeadlessTabs.Panel>>((props) => {
     <HeadlessTabs.Panel
       {...props}
       class={cn(
-        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',
         props.class,
       )}
     >
diff --git a/packages/kit-styled/src/components/textarea/textarea.tsx b/packages/kit-styled/src/components/textarea/textarea.tsx
index c970d9cc5..34d14c4c1 100644
--- a/packages/kit-styled/src/components/textarea/textarea.tsx
+++ b/packages/kit-styled/src/components/textarea/textarea.tsx
@@ -16,7 +16,7 @@ export const Textarea = component$<TextareaProps>(
           value={valueSig ? valueSig.value : value}
           onInput$={valueSig ? $((__, el) => (valueSig.value = el.value)) : onInput$}
           class={cn(
-            '[&::-webkit-scrollbar-track]:bg-blue flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+            '[&::-webkit-scrollbar-track]:bg-blue border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
             props.class,
           )}
           id={textareaId}
diff --git a/packages/kit-styled/src/components/toggle/toggle.tsx b/packages/kit-styled/src/components/toggle/toggle.tsx
index e53226102..84c1fa904 100644
--- a/packages/kit-styled/src/components/toggle/toggle.tsx
+++ b/packages/kit-styled/src/components/toggle/toggle.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { Toggle as HeadlessToggle } from '@qwik-ui/headless';
 
 export const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-[pressed=true]:bg-primary aria-[pressed=true]:text-primary-foreground',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-primary aria-pressed:text-primary-foreground',
   {
     variants: {
       look: {
diff --git a/packages/kit-styled/src/components/tooltip/tooltip.tsx b/packages/kit-styled/src/components/tooltip/tooltip.tsx
index a4648f6ed..f2ebb5649 100644
--- a/packages/kit-styled/src/components/tooltip/tooltip.tsx
+++ b/packages/kit-styled/src/components/tooltip/tooltip.tsx
@@ -18,7 +18,7 @@ const Panel = component$<PropsOf<typeof HeadlessTooltip.Panel>>(({ ...props }) =
       {...props}
       class={cn(
         'w-fit text-balance rounded-md border bg-background px-3 py-1.5 text-xs text-foreground shadow animate-in fade-in-0 zoom-in-95',
-        'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95',
+        'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
       )}
diff --git a/packages/kit-styled/src/templates/global.css b/packages/kit-styled/src/templates/global.css
index 8d028af93..06c9c5fb7 100644
--- a/packages/kit-styled/src/templates/global.css
+++ b/packages/kit-styled/src/templates/global.css
@@ -1,6 +1,39 @@
-@tailwind components;
-@tailwind base;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config './tailwind.config.cjs';
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@utility accordion-animation-1 {
+  &[data-open] {
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
+  }
+
+  &[data-closed] {
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
+  }
+}
+
+/* Not used yet - could be used for the colored text on the landing page when the make-it-yours color is too bright in light mode or too dim in dark mode */
+@utility text-outlined {
+  @apply [text-shadow:-1px_0_#777,0_1px_#777,1px_0_#777,0_-1px_#777] dark:[text-shadow:-1px_0_#ccc,0_1px_#ccc,1px_0_#ccc,0_-1px_#ccc];
+}
 
 @layer base {
   :root {
@@ -1235,11 +1268,11 @@
     @apply border-border;
   }
   body {
-    @apply bg-background font-sans text-foreground;
+    @apply bg-background text-foreground font-sans;
   }
 
   p code {
-    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
+    @apply bg-accent rounded-sm border-b-2 px-2 py-0.5;
   }
 
   pre code {
@@ -1326,72 +1359,58 @@
   }
 }
 
-:root {
-  /* primary colors - try using primary and secondary instead */
-  --qwikui-purple-50: #f9f5ff;
-  --qwikui-purple-100: #f2e8ff;
-  --qwikui-purple-200: #e7d6fe;
-  --qwikui-purple-300: #d4b5fd;
-  --qwikui-purple-400: #b37bfa;
-  --qwikui-purple-500: #9f57f5;
-  --qwikui-purple-600: #8835e8;
-  --qwikui-purple-700: #7424cc;
-  --qwikui-purple-800: #6323a6;
-  --qwikui-purple-900: #521d86;
-  --qwikui-purple-950: #360863;
-
-  --qwikui-blue-50: #effaff;
-  --qwikui-blue-100: #def3ff;
-  --qwikui-blue-200: #b6eaff;
-  --qwikui-blue-300: #76dbff;
-  --qwikui-blue-400: #2dcaff;
-  --qwikui-blue-500: #02b9fc;
-  --qwikui-blue-600: #0090d2;
-  --qwikui-blue-700: #0073aa;
-  --qwikui-blue-800: #00618c;
-  --qwikui-blue-900: #075073;
-  --qwikui-blue-950: #04334d;
-
-  /* neutrals - for internal use */
-  --qwikui-slate-50: #f8fafc;
-  --qwikui-slate-100: #f1f5f9;
-  --qwikui-slate-200: #e2e8f0;
-  --qwikui-slate-300: #cbd5e1;
-  --qwikui-slate-400: #94a3b8;
-  --qwikui-slate-500: #64748b;
-  --qwikui-slate-600: #475569;
-  --qwikui-slate-700: #334155;
-  --qwikui-slate-800: #1e293b;
-  --qwikui-slate-900: #0f172a;
-  --qwikui-slate-950: #020617;
-}
-
-html {
-  height: 100%;
-  min-height: 100%;
-  scroll-behavior: smooth;
-}
-
-body {
-  min-height: 100%;
-}
-
-/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
-  It would make more sense to supply the user with the animation declaration in the docs.
-*/
 @layer utilities {
-  .accordion-animation-1[data-open] {
-    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
+  :root {
+    /* primary colors - try using primary and secondary instead */
+    --qwikui-purple-50: #f9f5ff;
+    --qwikui-purple-100: #f2e8ff;
+    --qwikui-purple-200: #e7d6fe;
+    --qwikui-purple-300: #d4b5fd;
+    --qwikui-purple-400: #b37bfa;
+    --qwikui-purple-500: #9f57f5;
+    --qwikui-purple-600: #8835e8;
+    --qwikui-purple-700: #7424cc;
+    --qwikui-purple-800: #6323a6;
+    --qwikui-purple-900: #521d86;
+    --qwikui-purple-950: #360863;
+
+    --qwikui-blue-50: #effaff;
+    --qwikui-blue-100: #def3ff;
+    --qwikui-blue-200: #b6eaff;
+    --qwikui-blue-300: #76dbff;
+    --qwikui-blue-400: #2dcaff;
+    --qwikui-blue-500: #02b9fc;
+    --qwikui-blue-600: #0090d2;
+    --qwikui-blue-700: #0073aa;
+    --qwikui-blue-800: #00618c;
+    --qwikui-blue-900: #075073;
+    --qwikui-blue-950: #04334d;
+
+    /* neutrals - for internal use */
+    --qwikui-slate-50: #f8fafc;
+    --qwikui-slate-100: #f1f5f9;
+    --qwikui-slate-200: #e2e8f0;
+    --qwikui-slate-300: #cbd5e1;
+    --qwikui-slate-400: #94a3b8;
+    --qwikui-slate-500: #64748b;
+    --qwikui-slate-600: #475569;
+    --qwikui-slate-700: #334155;
+    --qwikui-slate-800: #1e293b;
+    --qwikui-slate-900: #0f172a;
+    --qwikui-slate-950: #020617;
+  }
+
+  html {
+    height: 100%;
+    min-height: 100%;
+    scroll-behavior: smooth;
   }
 
-  .accordion-animation-1[data-closed] {
-    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
+  body {
+    min-height: 100%;
   }
-}
 
-/* Not used yet - could be used for the colored text on the landing page when the make-it-yours color is too bright in light mode or too dim in dark mode */
-@layer components {
-  .text-outlined {
-    @apply [text-shadow:-1px_0_#777,_0_1px_#777,_1px_0_#777,_0_-1px_#777] dark:[text-shadow:-1px_0_#ccc,_0_1px_#ccc,_1px_0_#ccc,_0_-1px_#ccc];
-  }
+  /* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
+  It would make more sense to supply the user with the animation declaration in the docs.
+*/
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9a0dd34ba..8e8b1909e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,10 +13,10 @@ importers:
         version: 4.10.1(playwright-core@1.52.0)
       '@builder.io/qwik':
         specifier: 1.14.1
-        version: 1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))
+        version: 1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))
       '@builder.io/qwik-city':
         specifier: 1.14.1
-        version: 1.14.1(acorn@8.14.1)(rollup@4.41.1)(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))
+        version: 1.14.1(acorn@8.14.1)(rollup@4.41.1)(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))
       '@changesets/cli':
         specifier: ^2.29.4
         version: 2.29.4
@@ -43,7 +43,7 @@ importers:
         version: 3.5.0(@nx/devkit@21.1.2(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17))))(@nx/node@21.1.2(@babel/traverse@7.27.4)(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17))(@types/node@22.15.29)(@zkochan/js-yaml@0.0.7)(babel-plugin-macros@3.1.0)(eslint@8.57.1)(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17)))(ts-node@10.9.2(@swc/core@1.11.29(@swc/helpers@0.5.17))(@types/node@22.15.29)(typescript@5.7.3))(typescript@5.7.3)(verdaccio@6.1.2(typanion@3.14.0)))(esbuild@0.17.19)(wrangler@3.114.9)
       '@modular-forms/qwik':
         specifier: ^0.29.1
-        version: 0.29.1(@builder.io/qwik-city@1.14.1(acorn@8.14.1)(rollup@4.41.1)(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)))(@builder.io/qwik@1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)))(typescript@5.7.3)
+        version: 0.29.1(@builder.io/qwik-city@1.14.1(acorn@8.14.1)(rollup@4.41.1)(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)))(@builder.io/qwik@1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)))(typescript@5.7.3)
       '@nx/devkit':
         specifier: 21.1.2
         version: 21.1.2(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17)))
@@ -67,7 +67,7 @@ importers:
         version: 21.1.2(@babel/traverse@7.27.4)(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17))(@types/node@22.15.29)(@zkochan/js-yaml@0.0.7)(babel-plugin-macros@3.1.0)(eslint@8.57.1)(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17)))(ts-node@10.9.2(@swc/core@1.11.29(@swc/helpers@0.5.17))(@types/node@22.15.29)(typescript@5.7.3))(typescript@5.7.3)(verdaccio@6.1.2(typanion@3.14.0))
       '@nx/vite':
         specifier: 21.1.2
-        version: 21.1.2(@babel/traverse@7.27.4)(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17))(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17)))(typescript@5.7.3)(verdaccio@6.1.2(typanion@3.14.0))(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))(vitest@1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(sass@1.89.1))
+        version: 21.1.2(@babel/traverse@7.27.4)(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17))(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17)))(typescript@5.7.3)(verdaccio@6.1.2(typanion@3.14.0))(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))(vitest@1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(lightningcss@1.30.1)(sass@1.89.1))
       '@nx/workspace':
         specifier: 21.1.2
         version: 21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17))
@@ -79,7 +79,7 @@ importers:
         version: 1.52.0
       '@qwikest/icons':
         specifier: ^0.0.13
-        version: 0.0.13(@builder.io/qwik@1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)))
+        version: 0.0.13(@builder.io/qwik@1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)))
       '@shikijs/rehype':
         specifier: 3.4.2
         version: 3.4.2
@@ -92,6 +92,9 @@ importers:
       '@swc/core':
         specifier: ^1.5.7
         version: 1.11.29(@swc/helpers@0.5.17)
+      '@tailwindcss/postcss':
+        specifier: 4.1.10
+        version: 4.1.10
       '@types/decompress':
         specifier: 4.2.7
         version: 4.2.7
@@ -115,10 +118,10 @@ importers:
         version: 7.18.0(eslint@8.57.1)(typescript@5.7.3)
       '@vitejs/plugin-basic-ssl':
         specifier: 2.0.0
-        version: 2.0.0(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))
+        version: 2.0.0(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))
       '@vitest/coverage-v8':
         specifier: ^1.6.0
-        version: 1.6.1(vitest@1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(sass@1.89.1))
+        version: 1.6.1(vitest@1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(lightningcss@1.30.1)(sass@1.89.1))
       '@vitest/ui':
         specifier: ^1.6.0
         version: 1.6.1(vitest@1.6.1)
@@ -211,7 +214,7 @@ importers:
         version: 4.2.2(prettier@3.5.3)
       qwik-nx:
         specifier: ^3.2.0
-        version: 3.2.0(jg62sdzlslb3y3fi3cmqoip2hq)
+        version: 3.2.0(c5xcu7yow7jmanp5kpzz33umvm)
       sass:
         specifier: ^1.77.2
         version: 1.89.1
@@ -228,11 +231,11 @@ importers:
         specifier: ^3.3.0
         version: 3.3.0
       tailwindcss:
-        specifier: ^3.4.17
-        version: 3.4.17(ts-node@10.9.2(@swc/core@1.11.29(@swc/helpers@0.5.17))(@types/node@22.15.29)(typescript@5.7.3))
+        specifier: ^4.1.10
+        version: 4.1.10
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.11.29(@swc/helpers@0.5.17))(@types/node@22.15.29)(typescript@5.7.3)))
+        version: 1.0.7(tailwindcss@4.1.10)
       tree-sitter:
         specifier: 0.21.1
         version: 0.21.1
@@ -259,25 +262,25 @@ importers:
         version: 6.1.2(typanion@3.14.0)
       vite:
         specifier: 6.3.5
-        version: 6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)
+        version: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)
       vite-plugin-dts:
         specifier: 4.5.4
-        version: 4.5.4(@types/node@22.15.29)(rollup@4.41.1)(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))
+        version: 4.5.4(@types/node@22.15.29)(rollup@4.41.1)(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))
       vite-plugin-eslint:
         specifier: ^1.8.1
-        version: 1.8.1(eslint@8.57.1)(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))
+        version: 1.8.1(eslint@8.57.1)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))
       vite-plugin-inspect:
         specifier: ^0.8.4
-        version: 0.8.9(rollup@4.41.1)(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))
+        version: 0.8.9(rollup@4.41.1)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))
       vite-plugin-static-copy:
         specifier: 1.0.4
-        version: 1.0.4(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))
+        version: 1.0.4(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))
       vite-tsconfig-paths:
         specifier: 4.3.2
-        version: 4.3.2(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))
+        version: 4.3.2(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))
       vitest:
         specifier: ^1.6.0
-        version: 1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(sass@1.89.1)
+        version: 1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(lightningcss@1.30.1)(sass@1.89.1)
       wrangler:
         specifier: ^3.57.1
         version: 3.114.9
@@ -317,7 +320,7 @@ importers:
     dependencies:
       '@builder.io/qwik':
         specifier: '>=1.3.1'
-        version: 1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))
+        version: 1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))
       '@floating-ui/core':
         specifier: ^1.6.2
         version: 1.7.1
@@ -338,7 +341,7 @@ importers:
     dependencies:
       '@builder.io/qwik':
         specifier: '>=1.3.1'
-        version: 1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))
+        version: 1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))
     devDependencies:
       '@qwik-ui/headless':
         specifier: ^0.6.8
@@ -351,7 +354,7 @@ importers:
     dependencies:
       '@builder.io/qwik':
         specifier: '>=1.3.1'
-        version: 1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))
+        version: 1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))
 
   packages/utils:
     dependencies:
@@ -1806,6 +1809,7 @@ packages:
   '@img/sharp-linux-x64@0.34.2':
     resolution: {integrity: sha512-sD7J+h5nFLMMmOXYH4DD9UtSNBD05tWSSdWAcEyzqW8Cn5UxXvsHAxmxSesYUsTOBmUnjtxghKDl15EvfqLFbQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
     os: [linux]
 
   '@img/sharp-linuxmusl-arm64@0.33.5':
@@ -1993,9 +1997,9 @@ packages:
       '@types/node':
         optional: true
 
-  '@isaacs/cliui@8.0.2':
-    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
-    engines: {node: '>=12'}
+  '@isaacs/fs-minipass@4.0.1':
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
 
   '@istanbuljs/load-nyc-config@1.1.0':
     resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
@@ -2486,10 +2490,6 @@ packages:
     peerDependencies:
       typescript: ^3 || ^4 || ^5
 
-  '@pkgjs/parseargs@0.11.0':
-    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
-    engines: {node: '>=14'}
-
   '@pkgr/core@0.2.7':
     resolution: {integrity: sha512-YLT9Zo3oNPJoBjBc4q8G2mjU4tqIbf5CEOORbUUr48dCD9q3umJ3IPlVqOqDakPfd2HuwccBaqlGhN4Gmr5OWg==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@@ -2809,6 +2809,94 @@ packages:
     resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==}
     engines: {node: '>=10'}
 
+  '@tailwindcss/node@4.1.10':
+    resolution: {integrity: sha512-2ACf1znY5fpRBwRhMgj9ZXvb2XZW8qs+oTfotJ2C5xR0/WNL7UHZ7zXl6s+rUqedL1mNi+0O+WQr5awGowS3PQ==}
+
+  '@tailwindcss/oxide-android-arm64@4.1.10':
+    resolution: {integrity: sha512-VGLazCoRQ7rtsCzThaI1UyDu/XRYVyH4/EWiaSX6tFglE+xZB5cvtC5Omt0OQ+FfiIVP98su16jDVHDEIuH4iQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.10':
+    resolution: {integrity: sha512-ZIFqvR1irX2yNjWJzKCqTCcHZbgkSkSkZKbRM3BPzhDL/18idA8uWCoopYA2CSDdSGFlDAxYdU2yBHwAwx8euQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.10':
+    resolution: {integrity: sha512-eCA4zbIhWUFDXoamNztmS0MjXHSEJYlvATzWnRiTqJkcUteSjO94PoRHJy1Xbwp9bptjeIxxBHh+zBWFhttbrQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.10':
+    resolution: {integrity: sha512-8/392Xu12R0cc93DpiJvNpJ4wYVSiciUlkiOHOSOQNH3adq9Gi/dtySK7dVQjXIOzlpSHjeCL89RUUI8/GTI6g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.10':
+    resolution: {integrity: sha512-t9rhmLT6EqeuPT+MXhWhlRYIMSfh5LZ6kBrC4FS6/+M1yXwfCtp24UumgCWOAJVyjQwG+lYva6wWZxrfvB+NhQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.10':
+    resolution: {integrity: sha512-3oWrlNlxLRxXejQ8zImzrVLuZ/9Z2SeKoLhtCu0hpo38hTO2iL86eFOu4sVR8cZc6n3z7eRXXqtHJECa6mFOvA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.10':
+    resolution: {integrity: sha512-saScU0cmWvg/Ez4gUmQWr9pvY9Kssxt+Xenfx1LG7LmqjcrvBnw4r9VjkFcqmbBb7GCBwYNcZi9X3/oMda9sqQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.10':
+    resolution: {integrity: sha512-/G3ao/ybV9YEEgAXeEg28dyH6gs1QG8tvdN9c2MNZdUXYBaIY/Gx0N6RlJzfLy/7Nkdok4kaxKPHKJUlAaoTdA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.10':
+    resolution: {integrity: sha512-LNr7X8fTiKGRtQGOerSayc2pWJp/9ptRYAa4G+U+cjw9kJZvkopav1AQc5HHD+U364f71tZv6XamaHKgrIoVzA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.10':
+    resolution: {integrity: sha512-d6ekQpopFQJAcIK2i7ZzWOYGZ+A6NzzvQ3ozBvWFdeyqfOZdYHU66g5yr+/HC4ipP1ZgWsqa80+ISNILk+ae/Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.10':
+    resolution: {integrity: sha512-i1Iwg9gRbwNVOCYmnigWCCgow8nDWSFmeTUU5nbNx3rqbe4p0kRbEqLwLJbYZKmSSp23g4N6rCDmm7OuPBXhDA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.10':
+    resolution: {integrity: sha512-sGiJTjcBSfGq2DVRtaSljq5ZgZS2SDHSIfhOylkBvHVjwOsodBhnb3HdmiKkVuUGKD0I7G63abMOVaskj1KpOA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.10':
+    resolution: {integrity: sha512-v0C43s7Pjw+B9w21htrQwuFObSkio2aV/qPx/mhrRldbqxbWJK6KizM+q7BF1/1CmuLqZqX3CeYF7s7P9fbA8Q==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.1.10':
+    resolution: {integrity: sha512-B+7r7ABZbkXJwpvt2VMnS6ujcDoR2OOcFaqrLIo1xbcdxje4Vf+VgJdBzNNbrAjBj/rLZ66/tlQ1knIGNLKOBQ==}
+
   '@tootallnate/once@2.0.0':
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
@@ -3352,9 +3440,6 @@ packages:
       zenObservable:
         optional: true
 
-  any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-
   anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
@@ -3366,9 +3451,6 @@ packages:
   arg@4.1.3:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
 
-  arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
@@ -3660,10 +3742,6 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
   camelcase@5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
@@ -3742,6 +3820,10 @@ packages:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
 
+  chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
+
   ci-info@3.9.0:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
@@ -3865,10 +3947,6 @@ packages:
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
-  commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-
   commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -3984,11 +4062,6 @@ packages:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
     engines: {node: '>= 6'}
 
-  cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
-
   csso@5.0.5:
     resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
@@ -4248,9 +4321,6 @@ packages:
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
   diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -4263,9 +4333,6 @@ packages:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
 
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
   doctrine@3.0.0:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
@@ -4307,9 +4374,6 @@ packages:
   duplexify@3.7.1:
     resolution: {integrity: sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==}
 
-  eastasianwidth@0.2.0:
-    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-
   ecc-jsbn@0.1.2:
     resolution: {integrity: sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==}
 
@@ -4341,9 +4405,6 @@ packages:
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
-  emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-
   encodeurl@1.0.2:
     resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
     engines: {node: '>= 0.8'}
@@ -4355,6 +4416,10 @@ packages:
   end-of-stream@1.4.4:
     resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
 
+  enhanced-resolve@5.18.1:
+    resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
+    engines: {node: '>=10.13.0'}
+
   enquirer@2.3.6:
     resolution: {integrity: sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==}
     engines: {node: '>=8.6'}
@@ -4755,10 +4820,6 @@ packages:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
 
-  foreground-child@3.3.1:
-    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
-    engines: {node: '>=14'}
-
   forever-agent@0.6.1:
     resolution: {integrity: sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==}
 
@@ -4904,10 +4965,6 @@ packages:
   glob-to-regexp@0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
 
-  glob@10.4.5:
-    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
-    hasBin: true
-
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     deprecated: Glob versions prior to v9 are no longer supported
@@ -5533,9 +5590,6 @@ packages:
     resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
     engines: {node: '>=8'}
 
-  jackspeak@3.4.3:
-    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
-
   jake@10.9.2:
     resolution: {integrity: sha512-2P4SQ0HrLQ+fw6llpLnOaGAvN2Zu6778SJMrCUwns4fOoG9ayrTiZk3VV8sCPkVZF8ab0zksVpS8FDY5pRCNBA==}
     engines: {node: '>=10'}
@@ -5679,8 +5733,8 @@ packages:
       node-notifier:
         optional: true
 
-  jiti@1.21.7:
-    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+  jiti@2.4.2:
+    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
 
   jju@1.4.0:
@@ -5833,9 +5887,69 @@ packages:
   li@1.3.0:
     resolution: {integrity: sha512-z34TU6GlMram52Tss5mt1m//ifRIpKH5Dqm7yUVOdHI+BQCs9qGPHFaCUTIzsWX7edN30aa2WrPwR7IO10FHaw==}
 
-  lilconfig@3.1.3:
-    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
-    engines: {node: '>=14'}
+  lightningcss-darwin-arm64@1.30.1:
+    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.1:
+    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.1:
+    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.1:
+    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.1:
+    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
+    engines: {node: '>= 12.0.0'}
 
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
@@ -6245,11 +6359,20 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minizlib@3.0.2:
+    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
+    engines: {node: '>= 18'}
+
   mkdirp@1.0.4:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
     engines: {node: '>=10'}
     hasBin: true
 
+  mkdirp@3.0.1:
+    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   mlly@1.7.4:
     resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
 
@@ -6287,9 +6410,6 @@ packages:
     resolution: {integrity: sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==}
     engines: {node: ^18.17.0 || >=20.5.0}
 
-  mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -6426,10 +6546,6 @@ packages:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
-  object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-
   object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -6571,9 +6687,6 @@ packages:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
-  package-json-from-dist@1.0.1:
-    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
-
   package-json@10.0.1:
     resolution: {integrity: sha512-ua1L4OgXSBdsu1FPb7F3tYH0F48a6kxvod4pLUlGY9COeJAJQNX/sNH2IiEmsxw7lqYiAwrdHMjz1FctOsyDQg==}
     engines: {node: '>=18'}
@@ -6655,10 +6768,6 @@ packages:
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  path-scurry@1.11.1:
-    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
-    engines: {node: '>=16 || 14 >=14.18'}
-
   path-to-regexp@0.1.12:
     resolution: {integrity: sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==}
 
@@ -6777,40 +6886,6 @@ packages:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
 
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-
-  postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
-
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
@@ -7017,9 +7092,6 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
-  read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-
   read-package-up@11.0.0:
     resolution: {integrity: sha512-MbgfoNPANMdb4oRBNg5eqLbB2t2r+o5Ua1pNt8BqGp4I0FJZhuVSOj3PaBPni4azWuSzEdNn2evevzVmEk1ohQ==}
     engines: {node: '>=18'}
@@ -7532,10 +7604,6 @@ packages:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
 
-  string-width@5.1.2:
-    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
-    engines: {node: '>=12'}
-
   string-width@7.2.0:
     resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
     engines: {node: '>=18'}
@@ -7620,11 +7688,6 @@ packages:
   style-to-object@1.0.8:
     resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
 
-  sucrase@3.35.0:
-    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    hasBin: true
-
   supports-color@2.0.0:
     resolution: {integrity: sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==}
     engines: {node: '>=0.8.0'}
@@ -7683,10 +7746,12 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
 
-  tailwindcss@3.4.17:
-    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
+  tailwindcss@4.1.10:
+    resolution: {integrity: sha512-P3nr6WkvKV/ONsTzj6Gb57sWPMX29EPNPopo7+FcpkQaNsrNpZ1pv8QmrYI2RqEKD7mlGqLnGovlcYnBK0IqUA==}
+
+  tapable@2.2.2:
+    resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
+    engines: {node: '>=6'}
 
   tar-stream@1.6.2:
     resolution: {integrity: sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==}
@@ -7699,6 +7764,10 @@ packages:
   tar-stream@3.1.7:
     resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
 
+  tar@7.4.3:
+    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
+    engines: {node: '>=18'}
+
   tcp-port-used@1.0.2:
     resolution: {integrity: sha512-l7ar8lLUD3XS1V2lfoJlCBaeoaWo/2xfYt81hM7VlvR4RrMVFqfmzfhLVk40hAb368uitje5gPtBRL1m/DGvLA==}
 
@@ -7720,13 +7789,6 @@ packages:
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
-  thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-
-  thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
-
   thread-stream@3.1.0:
     resolution: {integrity: sha512-OqyPZ9u96VohAyMfJykzmivOrY2wfMSf3C5TtFJVgN+Hm6aj+voFhlK+kZEIv2FBh1X6Xp3DlnCOfEQ3B2J86A==}
 
@@ -7840,9 +7902,6 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
-  ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-
   ts-jest@29.3.4:
     resolution: {integrity: sha512-Iqbrm8IXOmV+ggWHOTEbjwyCf2xZlUMv5npExksXohL+tk8va4Fjhb+X2+Rt9NBmgO7bJ8WpnMLOwih/DnMlFA==}
     engines: {node: ^14.15.0 || ^16.10.0 || ^18.0.0 || >=20.0.0}
@@ -8421,10 +8480,6 @@ packages:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
 
-  wrap-ansi@8.1.0:
-    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
-    engines: {node: '>=12'}
-
   wrap-ansi@9.0.0:
     resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
     engines: {node: '>=18'}
@@ -8492,6 +8547,10 @@ packages:
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
+  yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
+
   yaml@1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
@@ -9335,7 +9394,7 @@ snapshots:
 
   '@bcoe/v8-coverage@0.2.3': {}
 
-  '@builder.io/qwik-city@1.14.1(acorn@8.14.1)(rollup@4.41.1)(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))':
+  '@builder.io/qwik-city@1.14.1(acorn@8.14.1)(rollup@4.41.1)(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))':
     dependencies:
       '@mdx-js/mdx': 3.1.0(acorn@8.14.1)
       '@types/mdx': 2.0.13
@@ -9344,7 +9403,7 @@ snapshots:
       undici: 5.28.4
       valibot: 1.1.0(typescript@5.7.3)
       vfile: 6.0.2
-      vite: 6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)
       vite-imagetools: 7.1.0(rollup@4.41.1)
       zod: 3.22.4
     transitivePeerDependencies:
@@ -9353,11 +9412,11 @@ snapshots:
       - supports-color
       - typescript
 
-  '@builder.io/qwik@1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))':
+  '@builder.io/qwik@1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))':
     dependencies:
       csstype: 3.1.3
       rollup: 4.41.1
-      vite: 6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)
 
   '@changesets/apply-release-plan@7.0.12':
     dependencies:
@@ -10175,14 +10234,9 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.15.29
 
-  '@isaacs/cliui@8.0.2':
+  '@isaacs/fs-minipass@4.0.1':
     dependencies:
-      string-width: 5.1.2
-      string-width-cjs: string-width@4.2.3
-      strip-ansi: 7.1.0
-      strip-ansi-cjs: strip-ansi@6.0.1
-      wrap-ansi: 8.1.0
-      wrap-ansi-cjs: wrap-ansi@7.0.0
+      minipass: 7.1.2
 
   '@istanbuljs/load-nyc-config@1.1.0':
     dependencies:
@@ -10466,10 +10520,10 @@ snapshots:
 
   '@microsoft/tsdoc@0.15.1': {}
 
-  '@modular-forms/qwik@0.29.1(@builder.io/qwik-city@1.14.1(acorn@8.14.1)(rollup@4.41.1)(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)))(@builder.io/qwik@1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)))(typescript@5.7.3)':
+  '@modular-forms/qwik@0.29.1(@builder.io/qwik-city@1.14.1(acorn@8.14.1)(rollup@4.41.1)(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)))(@builder.io/qwik@1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)))(typescript@5.7.3)':
     dependencies:
-      '@builder.io/qwik': 1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))
-      '@builder.io/qwik-city': 1.14.1(acorn@8.14.1)(rollup@4.41.1)(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))
+      '@builder.io/qwik': 1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))
+      '@builder.io/qwik-city': 1.14.1(acorn@8.14.1)(rollup@4.41.1)(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))
       decode-formdata: 0.8.0
       valibot: 1.1.0(typescript@5.7.3)
     transitivePeerDependencies:
@@ -10748,7 +10802,7 @@ snapshots:
       - typescript
       - verdaccio
 
-  '@nx/vite@21.1.2(@babel/traverse@7.27.4)(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17))(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17)))(typescript@5.7.3)(verdaccio@6.1.2(typanion@3.14.0))(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))(vitest@1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(sass@1.89.1))':
+  '@nx/vite@21.1.2(@babel/traverse@7.27.4)(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17))(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17)))(typescript@5.7.3)(verdaccio@6.1.2(typanion@3.14.0))(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))(vitest@1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(lightningcss@1.30.1)(sass@1.89.1))':
     dependencies:
       '@nx/devkit': 21.1.2(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17)))
       '@nx/js': 21.1.2(@babel/traverse@7.27.4)(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17))(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17)))(verdaccio@6.1.2(typanion@3.14.0))
@@ -10759,8 +10813,8 @@ snapshots:
       picomatch: 4.0.2
       semver: 7.7.2
       tsconfig-paths: 4.2.0
-      vite: 6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)
-      vitest: 1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(sass@1.89.1)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)
+      vitest: 1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(lightningcss@1.30.1)(sass@1.89.1)
     transitivePeerDependencies:
       - '@babel/traverse'
       - '@swc-node/register'
@@ -10989,9 +11043,6 @@ snapshots:
       esquery: 1.6.0
       typescript: 5.7.3
 
-  '@pkgjs/parseargs@0.11.0':
-    optional: true
-
   '@pkgr/core@0.2.7': {}
 
   '@playwright/test@1.52.0':
@@ -11012,9 +11063,9 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
-  '@qwikest/icons@0.0.13(@builder.io/qwik@1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)))':
+  '@qwikest/icons@0.0.13(@builder.io/qwik@1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)))':
     dependencies:
-      '@builder.io/qwik': 1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))
+      '@builder.io/qwik': 1.14.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))
 
   '@rollup/pluginutils@4.2.1':
     dependencies:
@@ -11294,6 +11345,78 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
+  '@tailwindcss/node@4.1.10':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      enhanced-resolve: 5.18.1
+      jiti: 2.4.2
+      lightningcss: 1.30.1
+      magic-string: 0.30.17
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.10
+
+  '@tailwindcss/oxide-android-arm64@4.1.10':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.10':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.10':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.10':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.10':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.10':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.10':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.10':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.10':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.10':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.10':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.10':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.10':
+    dependencies:
+      detect-libc: 2.0.4
+      tar: 7.4.3
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.10
+      '@tailwindcss/oxide-darwin-arm64': 4.1.10
+      '@tailwindcss/oxide-darwin-x64': 4.1.10
+      '@tailwindcss/oxide-freebsd-x64': 4.1.10
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.10
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.10
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.10
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.10
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.10
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.10
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.10
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.10
+
+  '@tailwindcss/postcss@4.1.10':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.10
+      '@tailwindcss/oxide': 4.1.10
+      postcss: 8.5.4
+      tailwindcss: 4.1.10
+
   '@tootallnate/once@2.0.0': {}
 
   '@trysound/sax@0.2.0': {}
@@ -11729,11 +11852,11 @@ snapshots:
       minimatch: 7.4.6
       semver: 7.7.1
 
-  '@vitejs/plugin-basic-ssl@2.0.0(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))':
+  '@vitejs/plugin-basic-ssl@2.0.0(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))':
     dependencies:
-      vite: 6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)
 
-  '@vitest/coverage-v8@1.6.1(vitest@1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(sass@1.89.1))':
+  '@vitest/coverage-v8@1.6.1(vitest@1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(lightningcss@1.30.1)(sass@1.89.1))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 0.2.3
@@ -11748,7 +11871,7 @@ snapshots:
       std-env: 3.9.0
       strip-literal: 2.1.1
       test-exclude: 6.0.0
-      vitest: 1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(sass@1.89.1)
+      vitest: 1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(lightningcss@1.30.1)(sass@1.89.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -11783,7 +11906,7 @@ snapshots:
       pathe: 1.1.2
       picocolors: 1.1.1
       sirv: 2.0.4
-      vitest: 1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(sass@1.89.1)
+      vitest: 1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(lightningcss@1.30.1)(sass@1.89.1)
 
   '@vitest/utils@1.6.1':
     dependencies:
@@ -11979,8 +12102,6 @@ snapshots:
     optionalDependencies:
       rxjs: 6.6.7
 
-  any-promise@1.3.0: {}
-
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
@@ -11991,8 +12112,6 @@ snapshots:
   arg@4.1.3:
     optional: true
 
-  arg@5.0.2: {}
-
   argparse@1.0.10:
     dependencies:
       sprintf-js: 1.0.3
@@ -12364,8 +12483,6 @@ snapshots:
 
   callsites@3.1.0: {}
 
-  camelcase-css@2.0.1: {}
-
   camelcase@5.3.1: {}
 
   camelcase@6.3.0: {}
@@ -12447,6 +12564,8 @@ snapshots:
     dependencies:
       readdirp: 4.1.2
 
+  chownr@3.0.0: {}
+
   ci-info@3.9.0: {}
 
   cjs-module-lexer@1.4.3: {}
@@ -12547,8 +12666,6 @@ snapshots:
 
   commander@2.20.3: {}
 
-  commander@4.1.1: {}
-
   commander@7.2.0: {}
 
   compare-versions@6.1.1: {}
@@ -12681,8 +12798,6 @@ snapshots:
 
   css-what@6.1.0: {}
 
-  cssesc@3.0.0: {}
-
   csso@5.0.5:
     dependencies:
       css-tree: 2.2.1
@@ -12949,8 +13064,6 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
-  didyoumean@1.2.2: {}
-
   diff-sequences@29.6.3: {}
 
   diff@4.0.2:
@@ -12960,8 +13073,6 @@ snapshots:
     dependencies:
       path-type: 4.0.0
 
-  dlv@1.1.3: {}
-
   doctrine@3.0.0:
     dependencies:
       esutils: 2.0.3
@@ -13011,8 +13122,6 @@ snapshots:
       readable-stream: 2.3.8
       stream-shift: 1.0.3
 
-  eastasianwidth@0.2.0: {}
-
   ecc-jsbn@0.1.2:
     dependencies:
       jsbn: 0.1.1
@@ -13038,8 +13147,6 @@ snapshots:
 
   emoji-regex@8.0.0: {}
 
-  emoji-regex@9.2.2: {}
-
   encodeurl@1.0.2: {}
 
   encodeurl@2.0.0: {}
@@ -13048,6 +13155,11 @@ snapshots:
     dependencies:
       once: 1.4.0
 
+  enhanced-resolve@5.18.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.2
+
   enquirer@2.3.6:
     dependencies:
       ansi-colors: 4.1.3
@@ -13619,11 +13731,6 @@ snapshots:
     dependencies:
       is-callable: 1.2.7
 
-  foreground-child@3.3.1:
-    dependencies:
-      cross-spawn: 7.0.6
-      signal-exit: 4.1.0
-
   forever-agent@0.6.1: {}
 
   form-data@4.0.2:
@@ -13768,15 +13875,6 @@ snapshots:
 
   glob-to-regexp@0.4.1: {}
 
-  glob@10.4.5:
-    dependencies:
-      foreground-child: 3.3.1
-      jackspeak: 3.4.3
-      minimatch: 9.0.5
-      minipass: 7.1.2
-      package-json-from-dist: 1.0.1
-      path-scurry: 1.11.1
-
   glob@7.2.3:
     dependencies:
       fs.realpath: 1.0.0
@@ -14445,12 +14543,6 @@ snapshots:
       html-escaper: 2.0.2
       istanbul-lib-report: 3.0.1
 
-  jackspeak@3.4.3:
-    dependencies:
-      '@isaacs/cliui': 8.0.2
-    optionalDependencies:
-      '@pkgjs/parseargs': 0.11.0
-
   jake@10.9.2:
     dependencies:
       async: 3.2.6
@@ -14782,7 +14874,7 @@ snapshots:
       - supports-color
       - ts-node
 
-  jiti@1.21.7: {}
+  jiti@2.4.2: {}
 
   jju@1.4.0: {}
 
@@ -14973,7 +15065,50 @@ snapshots:
 
   li@1.3.0: {}
 
-  lilconfig@3.1.3: {}
+  lightningcss-darwin-arm64@1.30.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    optional: true
+
+  lightningcss@1.30.1:
+    dependencies:
+      detect-libc: 2.0.4
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.30.1
+      lightningcss-darwin-x64: 1.30.1
+      lightningcss-freebsd-x64: 1.30.1
+      lightningcss-linux-arm-gnueabihf: 1.30.1
+      lightningcss-linux-arm64-gnu: 1.30.1
+      lightningcss-linux-arm64-musl: 1.30.1
+      lightningcss-linux-x64-gnu: 1.30.1
+      lightningcss-linux-x64-musl: 1.30.1
+      lightningcss-win32-arm64-msvc: 1.30.1
+      lightningcss-win32-x64-msvc: 1.30.1
 
   lines-and-columns@1.2.4: {}
 
@@ -15567,8 +15702,14 @@ snapshots:
 
   minipass@7.1.2: {}
 
+  minizlib@3.0.2:
+    dependencies:
+      minipass: 7.1.2
+
   mkdirp@1.0.4: {}
 
+  mkdirp@3.0.1: {}
+
   mlly@1.7.4:
     dependencies:
       acorn: 8.14.1
@@ -15596,12 +15737,6 @@ snapshots:
 
   mute-stream@2.0.0: {}
 
-  mz@2.7.0:
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
-
   nanoid@3.3.11: {}
 
   natural-compare@1.4.0: {}
@@ -15846,8 +15981,6 @@ snapshots:
 
   object-assign@4.1.1: {}
 
-  object-hash@3.0.0: {}
-
   object-inspect@1.13.4: {}
 
   object-keys@1.1.1: {}
@@ -16008,8 +16141,6 @@ snapshots:
 
   p-try@2.2.0: {}
 
-  package-json-from-dist@1.0.1: {}
-
   package-json@10.0.1:
     dependencies:
       ky: 1.8.1
@@ -16094,11 +16225,6 @@ snapshots:
 
   path-parse@1.0.7: {}
 
-  path-scurry@1.11.1:
-    dependencies:
-      lru-cache: 10.4.3
-      minipass: 7.1.2
-
   path-to-regexp@0.1.12: {}
 
   path-to-regexp@6.3.0: {}
@@ -16204,36 +16330,6 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
-  postcss-import@15.1.0(postcss@8.5.4):
-    dependencies:
-      postcss: 8.5.4
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.10
-
-  postcss-js@4.0.1(postcss@8.5.4):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.5.4
-
-  postcss-load-config@4.0.2(postcss@8.5.4)(ts-node@10.9.2(@swc/core@1.11.29(@swc/helpers@0.5.17))(@types/node@22.15.29)(typescript@5.7.3)):
-    dependencies:
-      lilconfig: 3.1.3
-      yaml: 2.8.0
-    optionalDependencies:
-      postcss: 8.5.4
-      ts-node: 10.9.2(@swc/core@1.11.29(@swc/helpers@0.5.17))(@types/node@22.15.29)(typescript@5.7.3)
-
-  postcss-nested@6.2.0(postcss@8.5.4):
-    dependencies:
-      postcss: 8.5.4
-      postcss-selector-parser: 6.1.2
-
-  postcss-selector-parser@6.1.2:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
   postcss-value-parser@4.2.0: {}
 
   postcss@8.5.4:
@@ -16355,12 +16451,12 @@ snapshots:
 
   quick-lru@5.1.1: {}
 
-  qwik-nx@3.2.0(jg62sdzlslb3y3fi3cmqoip2hq):
+  qwik-nx@3.2.0(c5xcu7yow7jmanp5kpzz33umvm):
     dependencies:
       '@nx/devkit': 21.1.2(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17)))
       '@nx/eslint': 21.1.2(@babel/traverse@7.27.4)(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17))(@zkochan/js-yaml@0.0.7)(eslint@8.57.1)(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17)))(verdaccio@6.1.2(typanion@3.14.0))
       '@nx/js': 21.1.2(@babel/traverse@7.27.4)(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17))(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17)))(verdaccio@6.1.2(typanion@3.14.0))
-      '@nx/vite': 21.1.2(@babel/traverse@7.27.4)(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17))(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17)))(typescript@5.7.3)(verdaccio@6.1.2(typanion@3.14.0))(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0))(vitest@1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(sass@1.89.1))
+      '@nx/vite': 21.1.2(@babel/traverse@7.27.4)(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17))(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17)))(typescript@5.7.3)(verdaccio@6.1.2(typanion@3.14.0))(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))(vitest@1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(lightningcss@1.30.1)(sass@1.89.1))
 
   qwik-themes@0.2.0: {}
 
@@ -16382,10 +16478,6 @@ snapshots:
 
   react-is@18.3.1: {}
 
-  read-cache@1.0.0:
-    dependencies:
-      pify: 2.3.0
-
   read-package-up@11.0.0:
     dependencies:
       find-up-simple: 1.0.1
@@ -17055,12 +17147,6 @@ snapshots:
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
 
-  string-width@5.1.2:
-    dependencies:
-      eastasianwidth: 0.2.0
-      emoji-regex: 9.2.2
-      strip-ansi: 7.1.0
-
   string-width@7.2.0:
     dependencies:
       emoji-regex: 10.4.0
@@ -17153,16 +17239,6 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.4
 
-  sucrase@3.35.0:
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.8
-      commander: 4.1.1
-      glob: 10.4.5
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.7
-      ts-interface-checker: 0.1.13
-
   supports-color@2.0.0: {}
 
   supports-color@5.5.0:
@@ -17211,36 +17287,13 @@ snapshots:
 
   tailwind-merge@3.3.0: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.11.29(@swc/helpers@0.5.17))(@types/node@22.15.29)(typescript@5.7.3))):
+  tailwindcss-animate@1.0.7(tailwindcss@4.1.10):
     dependencies:
-      tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.11.29(@swc/helpers@0.5.17))(@types/node@22.15.29)(typescript@5.7.3))
+      tailwindcss: 4.1.10
 
-  tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.11.29(@swc/helpers@0.5.17))(@types/node@22.15.29)(typescript@5.7.3)):
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.3
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.7
-      lilconfig: 3.1.3
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.5.4
-      postcss-import: 15.1.0(postcss@8.5.4)
-      postcss-js: 4.0.1(postcss@8.5.4)
-      postcss-load-config: 4.0.2(postcss@8.5.4)(ts-node@10.9.2(@swc/core@1.11.29(@swc/helpers@0.5.17))(@types/node@22.15.29)(typescript@5.7.3))
-      postcss-nested: 6.2.0(postcss@8.5.4)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.10
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
+  tailwindcss@4.1.10: {}
+
+  tapable@2.2.2: {}
 
   tar-stream@1.6.2:
     dependencies:
@@ -17266,6 +17319,15 @@ snapshots:
       fast-fifo: 1.3.2
       streamx: 2.22.0
 
+  tar@7.4.3:
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.0.2
+      mkdirp: 3.0.1
+      yallist: 5.0.0
+
   tcp-port-used@1.0.2:
     dependencies:
       debug: 4.3.1
@@ -17292,14 +17354,6 @@ snapshots:
 
   text-table@0.2.0: {}
 
-  thenify-all@1.6.0:
-    dependencies:
-      thenify: 3.3.1
-
-  thenify@3.3.1:
-    dependencies:
-      any-promise: 1.3.0
-
   thread-stream@3.1.0:
     dependencies:
       real-require: 0.2.0
@@ -17394,8 +17448,6 @@ snapshots:
     dependencies:
       typescript: 5.7.3
 
-  ts-interface-checker@0.1.13: {}
-
   ts-jest@29.3.4(@babel/core@7.27.4)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.4))(esbuild@0.17.19)(jest@29.7.0(@types/node@22.15.29)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.11.29(@swc/helpers@0.5.17))(@types/node@22.15.29)(typescript@5.7.3)))(typescript@5.7.3):
     dependencies:
       bs-logger: 0.2.6
@@ -17772,13 +17824,13 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  vite-node@1.6.1(@types/node@22.15.29)(sass@1.89.1):
+  vite-node@1.6.1(@types/node@22.15.29)(lightningcss@1.30.1)(sass@1.89.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
       pathe: 1.1.2
       picocolors: 1.1.1
-      vite: 5.4.19(@types/node@22.15.29)(sass@1.89.1)
+      vite: 5.4.19(@types/node@22.15.29)(lightningcss@1.30.1)(sass@1.89.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -17790,7 +17842,7 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-dts@4.5.4(@types/node@22.15.29)(rollup@4.41.1)(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)):
+  vite-plugin-dts@4.5.4(@types/node@22.15.29)(rollup@4.41.1)(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)):
     dependencies:
       '@microsoft/api-extractor': 7.52.8(@types/node@22.15.29)
       '@rollup/pluginutils': 5.1.4(rollup@4.41.1)
@@ -17803,21 +17855,21 @@ snapshots:
       magic-string: 0.30.17
       typescript: 5.7.3
     optionalDependencies:
-      vite: 6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
       - supports-color
 
-  vite-plugin-eslint@1.8.1(eslint@8.57.1)(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)):
+  vite-plugin-eslint@1.8.1(eslint@8.57.1)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)):
     dependencies:
       '@rollup/pluginutils': 4.2.1
       '@types/eslint': 8.56.12
       eslint: 8.57.1
       rollup: 2.79.2
-      vite: 6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)
 
-  vite-plugin-inspect@0.8.9(rollup@4.41.1)(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)):
+  vite-plugin-inspect@0.8.9(rollup@4.41.1)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.4(rollup@4.41.1)
@@ -17828,31 +17880,31 @@ snapshots:
       perfect-debounce: 1.0.0
       picocolors: 1.1.1
       sirv: 3.0.1
-      vite: 6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-plugin-static-copy@1.0.4(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)):
+  vite-plugin-static-copy@1.0.4(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)):
     dependencies:
       chokidar: 3.6.0
       fast-glob: 3.3.3
       fs-extra: 11.3.0
       picocolors: 1.1.1
-      vite: 6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)
 
-  vite-tsconfig-paths@4.3.2(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)):
+  vite-tsconfig-paths@4.3.2(typescript@5.7.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)):
     dependencies:
       debug: 4.4.1
       globrex: 0.1.2
       tsconfck: 3.1.6(typescript@5.7.3)
     optionalDependencies:
-      vite: 6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vite@5.4.19(@types/node@22.15.29)(sass@1.89.1):
+  vite@5.4.19(@types/node@22.15.29)(lightningcss@1.30.1)(sass@1.89.1):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.4
@@ -17860,9 +17912,10 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.15.29
       fsevents: 2.3.3
+      lightningcss: 1.30.1
       sass: 1.89.1
 
-  vite@6.3.5(@types/node@22.15.29)(jiti@1.21.7)(sass@1.89.1)(yaml@2.8.0):
+  vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0):
     dependencies:
       esbuild: 0.25.5
       fdir: 6.4.5(picomatch@4.0.2)
@@ -17873,11 +17926,12 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.15.29
       fsevents: 2.3.3
-      jiti: 1.21.7
+      jiti: 2.4.2
+      lightningcss: 1.30.1
       sass: 1.89.1
       yaml: 2.8.0
 
-  vitest@1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(sass@1.89.1):
+  vitest@1.6.1(@types/node@22.15.29)(@vitest/ui@1.6.1)(jsdom@24.0.0)(lightningcss@1.30.1)(sass@1.89.1):
     dependencies:
       '@vitest/expect': 1.6.1
       '@vitest/runner': 1.6.1
@@ -17896,8 +17950,8 @@ snapshots:
       strip-literal: 2.1.1
       tinybench: 2.9.0
       tinypool: 0.8.4
-      vite: 5.4.19(@types/node@22.15.29)(sass@1.89.1)
-      vite-node: 1.6.1(@types/node@22.15.29)(sass@1.89.1)
+      vite: 5.4.19(@types/node@22.15.29)(lightningcss@1.30.1)(sass@1.89.1)
+      vite-node: 1.6.1(@types/node@22.15.29)(lightningcss@1.30.1)(sass@1.89.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.15.29
@@ -18068,12 +18122,6 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
-  wrap-ansi@8.1.0:
-    dependencies:
-      ansi-styles: 6.2.1
-      string-width: 5.1.2
-      strip-ansi: 7.1.0
-
   wrap-ansi@9.0.0:
     dependencies:
       ansi-styles: 6.2.1
@@ -18109,6 +18157,8 @@ snapshots:
 
   yallist@4.0.0: {}
 
+  yallist@5.0.0: {}
+
   yaml@1.10.2: {}
 
   yaml@2.8.0: {}

From a8d6a7518d0e86f354d577a1b6a8adf1ffce870f Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Tue, 24 Jun 2025 08:39:48 +0200
Subject: [PATCH 02/42] fix: tailwind 4 @source

---
 .prettierrc                                   |   2 +-
 .vscode/settings.json                         |   1 +
 apps/component-tests/postcss.config.js        |   5 -
 apps/component-tests/src/global.css           |  56 +--
 apps/component-tests/tailwind.config.cjs      | 121 ------
 apps/component-tests/vite.config.ts           |   2 +
 apps/website/package.json                     |   3 +-
 apps/website/postcss.config.js                |   5 -
 apps/website/src/components/header/header.tsx |   2 +-
 .../make-it-yours/make-it-yours.tsx           |   2 +-
 .../navigation-docs/navigation-docs.tsx       |   4 +-
 apps/website/src/root.tsx                     |   6 +-
 .../src/routes/docs/styled/button/index.mdx   |   2 +-
 .../src/routes/docs/styled/progress/index.mdx |   2 +-
 .../src/routes/docs/styled/skeleton/index.mdx |   2 +-
 apps/website/tailwind.config.cjs              | 121 ------
 apps/website/vite.config.ts                   |   4 +-
 package.json                                  |  13 +-
 packages/kit-headless/vite.config.ts          |   2 +
 .../kit-styled/src/components/modal/modal.tsx |  18 +-
 .../src/components/progress/progress.tsx      |   4 +-
 .../src/components/skeleton/skeleton.tsx      |   5 +-
 packages/kit-styled/src/global.css            |   1 +
 packages/kit-styled/src/templates/global.css  |   6 +-
 .../src/templates/tailwind.config.cjs         | 121 ------
 packages/kit-styled/vite.config.ts            |   2 +
 pnpm-lock.yaml                                | 370 ++++++++++--------
 27 files changed, 283 insertions(+), 599 deletions(-)
 delete mode 100644 apps/component-tests/postcss.config.js
 delete mode 100644 apps/component-tests/tailwind.config.cjs
 delete mode 100644 apps/website/postcss.config.js
 delete mode 100644 apps/website/tailwind.config.cjs
 create mode 100644 packages/kit-styled/src/global.css
 delete mode 100644 packages/kit-styled/src/templates/tailwind.config.cjs

diff --git a/.prettierrc b/.prettierrc
index 0bb78841a..b4fa68fef 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -4,6 +4,6 @@
   "trailingComma": "all",
   "printWidth": 90,
   "plugins": ["prettier-plugin-tailwindcss"],
-  "tailwindConfig": "./apps/website/tailwind.config.cjs",
+  "tailwindConfig": "./apps/website/src/global.css",
   "tailwindFunctions": ["clsx", "cva"]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index db933a015..775ffce14 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,6 +4,7 @@
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
   ],
+  "tailwindCSS.experimental.configFile": "apps/website/src/global.css",
   "editor.codeActionsOnSave": {
     "source.removeUnusedImports": "explicit"
   },
diff --git a/apps/component-tests/postcss.config.js b/apps/component-tests/postcss.config.js
deleted file mode 100644
index c2ddf7482..000000000
--- a/apps/component-tests/postcss.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};
diff --git a/apps/component-tests/src/global.css b/apps/component-tests/src/global.css
index dcd114012..c53f48dff 100644
--- a/apps/component-tests/src/global.css
+++ b/apps/component-tests/src/global.css
@@ -1,7 +1,5 @@
 @import 'tailwindcss';
 
-@config '../tailwind.config.cjs';
-
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still
@@ -22,13 +20,11 @@
 
 @utility accordion-animation-1 {
   &[data-open] {
-    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards
-      accordion-open;
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
   }
 
   &[data-closed] {
-    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards
-      accordion-close;
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
   }
 }
 
@@ -153,25 +149,32 @@
     --border: 0 0% 80.2%;
     --ring: 0 0% 80.2%;
     --input: 0 0% 80.2%;
-    --shadow-base: -3px -3px 6px #bebebe, 3px 3px 6px #ffffff,
+    --shadow-base:
+      -3px -3px 6px #bebebe, 3px 3px 6px #ffffff,
       inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-sm: 3px 3px 6px #bebebe, -3px -3px 6px #ffffff,
+    --shadow-sm:
+      3px 3px 6px #bebebe, -3px -3px 6px #ffffff,
       inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff,
+    --shadow:
+      4px 4px 8px #bebebe, -4px -4px 8px #ffffff,
       inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-md: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff,
+    --shadow-md:
+      5px 5px 10px #bebebe, -5px -5px 10px #ffffff,
       inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-lg: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff,
+    --shadow-lg:
+      6px 6px 12px #bebebe, -6px -6px 12px #ffffff,
       inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-xl: 8px 8px 15px #bebebe, -8px -8px 15px #ffffff,
+    --shadow-xl:
+      8px 8px 15px #bebebe, -8px -8px 15px #ffffff,
       inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-2xl: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff,
+    --shadow-2xl:
+      10px 10px 20px #bebebe, -10px -10px 20px #ffffff,
       inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
     --shadow-inner: inset 4px 4px 8px #bebebe, inset -2px -2px 4px #ffffff;
@@ -190,20 +193,27 @@
     --border: 240 5.9% 20%;
     --ring: 240 5.9% 20%;
     --input: 240 5.9% 20%;
-    --shadow-base: -3px -3px 6px #2c2c31, 3px 3px 6px #52525b, inset 1px 1px 2px #2c2c31,
+    --shadow-base:
+      -3px -3px 6px #2c2c31, 3px 3px 6px #52525b, inset 1px 1px 2px #2c2c31,
+      inset -1px -1px 2px #52525b;
+    --shadow-sm:
+      3px 3px 6px #2c2c31, -3px -3px 6px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
-    --shadow-sm: 3px 3px 6px #2c2c31, -3px -3px 6px #52525b, inset 1px 1px 2px #2c2c31,
+    --shadow:
+      4px 4px 8px #2c2c31, -4px -4px 8px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
-    --shadow: 4px 4px 8px #2c2c31, -4px -4px 8px #52525b, inset 1px 1px 2px #2c2c31,
+    --shadow-md:
+      5px 5px 10px #2c2c31, -5px -5px 10px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
-    --shadow-md: 5px 5px 10px #2c2c31, -5px -5px 10px #52525b, inset 1px 1px 2px #2c2c31,
+    --shadow-lg:
+      6px 6px 12px #2c2c31, -6px -6px 12px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
-    --shadow-lg: 6px 6px 12px #2c2c31, -6px -6px 12px #52525b, inset 1px 1px 2px #2c2c31,
+    --shadow-xl:
+      8px 8px 15px #2c2c31, -8px -8px 15px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
-    --shadow-xl: 8px 8px 15px #2c2c31, -8px -8px 15px #52525b, inset 1px 1px 2px #2c2c31,
+    --shadow-2xl:
+      10px 10px 20px #2c2c31, -10px -10px 20px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
-    --shadow-2xl: 10px 10px 20px #2c2c31, -10px -10px 20px #52525b,
-      inset 1px 1px 2px #2c2c31, inset -1px -1px 2px #52525b;
     --shadow-inner: inset 2px 2px 4px #2c2c31, inset -2px -2px 4px #52525b;
     --transform-press: scale(0.95);
   }
@@ -1256,11 +1266,11 @@
     @apply border-border;
   }
   body {
-    @apply bg-background font-sans text-foreground;
+    @apply bg-background text-foreground font-sans;
   }
 
   p code {
-    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
+    @apply bg-accent rounded-sm border-b-2 px-2 py-0.5;
   }
 
   pre code {
diff --git a/apps/component-tests/tailwind.config.cjs b/apps/component-tests/tailwind.config.cjs
deleted file mode 100644
index 3d7d99030..000000000
--- a/apps/component-tests/tailwind.config.cjs
+++ /dev/null
@@ -1,121 +0,0 @@
-const { join } = require('path');
-const plugin = require('tailwindcss/plugin');
-
-/** @type {import('tailwindcss').Config} */
-
-module.exports = {
-  content: [
-    join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'),
-    join(__dirname, '../website/src/**/*.{js,ts,jsx,tsx,mdx}'),
-    join(__dirname, '../../packages/kit-styled/src/**/*.{js,ts,jsx,tsx,mdx}'),
-    join(__dirname, '../../packages/kit-headless/src/**/*.{js,ts,jsx,tsx,mdx}'),
-  ],
-  plugins: [
-    // PLUGIN-START
-    require('tailwindcss-animate'),
-    plugin(function ({ addUtilities }) {
-      addUtilities({
-        '.press': {
-          transform: 'var(--transform-press)',
-        },
-      });
-    }),
-    // PLUGIN-END
-  ],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      screens: {
-        xs: '480px',
-      },
-      // EXTEND-START
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        alert: {
-          DEFAULT: 'hsl(var(--alert))',
-          foreground: 'hsl(var(--alert-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-      },
-      borderRadius: {
-        base: 'var(--border-radius)',
-        sm: 'calc(var(--border-radius) + 0.125rem)',
-        DEFAULT: 'calc(var(--border-radius) + 0.25rem)',
-        md: 'calc(var(--border-radius) + 0.375rem)',
-        lg: 'calc(var(--border-radius) + 0.5rem)',
-        xl: 'calc(var(--border-radius) + 0.75rem)',
-        '2xl': 'calc(var(--border-radius) + 1rem)',
-        '3xl': 'calc(var(--border-radius) + 1.5rem)',
-      },
-      borderWidth: {
-        base: 'var(--border-width)',
-        DEFAULT: 'calc(var(--border-width) + 1px)',
-        2: 'calc(var(--border-width) + 2px)',
-        4: 'calc(var(--border-width) + 4px)',
-        8: 'calc(var(--border-width) + 8px)',
-      },
-      boxShadow: {
-        base: 'var(--shadow-base)',
-        sm: 'var(--shadow-sm)',
-        DEFAULT: 'var(--shadow)',
-        md: 'var(--shadow-md)',
-        lg: 'var(--shadow-lg)',
-        xl: 'var(--shadow-xl)',
-        '2xl': 'var(--shadow-2xl)',
-        inner: 'var(--shadow-inner)',
-      },
-      strokeWidth: {
-        0: '0',
-        base: 'var(--stroke-width)',
-        1: 'calc(var(--stroke-width) + 1px)',
-        2: 'calc(var(--stroke-width) + 2px)',
-      },
-      animation: {
-        'accordion-up': 'collapsible-up 0.2s ease-out 0s 1 normal forwards',
-        'accordion-down': 'collapsible-down 0.2s ease-out 0s 1 normal forwards',
-      },
-      keyframes: {
-        'collapsible-down': {
-          from: { height: '0' },
-          to: { height: 'var(--qwikui-collapsible-content-height)' },
-        },
-        'collapsible-up': {
-          from: { height: 'var(--qwikui-collapsible-content-height)' },
-          to: { height: '0' },
-        },
-      },
-      // EXTEND-END
-      transitionTimingFunction: {
-        step: 'cubic-bezier(0.6, 0.6, 0, 1)',
-        jumpy: 'cubic-bezier(0.87, 0, 0.13, 1)',
-      },
-    },
-  },
-};
diff --git a/apps/component-tests/vite.config.ts b/apps/component-tests/vite.config.ts
index 3eaf235c8..3ac863824 100644
--- a/apps/component-tests/vite.config.ts
+++ b/apps/component-tests/vite.config.ts
@@ -2,6 +2,7 @@ import { qwikVite } from '@builder.io/qwik/optimizer';
 import { qwikCity } from '@builder.io/qwik-city/vite';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
   root: 'apps/component-tests',
@@ -18,6 +19,7 @@ export default defineConfig({
       tsconfigFileNames: ['tsconfig.app.json'],
     }),
     tsconfigPaths({ root: '../../' }),
+    tailwindcss(),
   ],
   server: {
     fs: {
diff --git a/apps/website/package.json b/apps/website/package.json
index b71b4500a..8968c3652 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -1,5 +1,6 @@
 {
   "name": "@qwik-ui/website",
   "description": "The Qwik UI Website",
-  "private": true
+  "private": true,
+  "type": "module"
 }
diff --git a/apps/website/postcss.config.js b/apps/website/postcss.config.js
deleted file mode 100644
index c2ddf7482..000000000
--- a/apps/website/postcss.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};
diff --git a/apps/website/src/components/header/header.tsx b/apps/website/src/components/header/header.tsx
index 217f72c93..b5b00de1b 100644
--- a/apps/website/src/components/header/header.tsx
+++ b/apps/website/src/components/header/header.tsx
@@ -195,7 +195,7 @@ export default component$(({ showVersion = false }: HeaderProps) => {
           </div>
         </div>
       </header>
-      <Modal.Panel class="sidebar-mobile rounded-base bg-background text-foreground mr-0 ml-auto h-screen w-full max-w-sm min-w-80 border-0 p-8 shadow-md">
+      <Modal.Panel class="sidebar-mobile rounded-base bg-background text-foreground mr-0 ml-auto h-screen w-sm border-0 shadow-md">
         <div class="mb-2 pt-2 pb-4">
           <DocsNavigation
             linksGroups={
diff --git a/apps/website/src/components/make-it-yours/make-it-yours.tsx b/apps/website/src/components/make-it-yours/make-it-yours.tsx
index 52cdc9d2e..b97a58e29 100644
--- a/apps/website/src/components/make-it-yours/make-it-yours.tsx
+++ b/apps/website/src/components/make-it-yours/make-it-yours.tsx
@@ -139,7 +139,7 @@ export default component$<PropsOf<typeof Button>>(() => {
             })}
           </div>
 
-          <label class="mt-8 mb-1 block font-medium">Primary</label>
+          <label class="mt-8 mb-1 block border-2 font-medium">Primary</label>
           <div class="flex justify-end">
             <div class="grid grid-cols-[repeat(22,0fr)]">
               {Object.values(ThemePrimaryColors).map((primaryColor: string) => {
diff --git a/apps/website/src/components/navigation-docs/navigation-docs.tsx b/apps/website/src/components/navigation-docs/navigation-docs.tsx
index 001ed5c1e..5c5cda2e8 100644
--- a/apps/website/src/components/navigation-docs/navigation-docs.tsx
+++ b/apps/website/src/components/navigation-docs/navigation-docs.tsx
@@ -63,13 +63,13 @@ export const DocsNavigation = component$(
                       <Link
                         class={cn(
                           buttonVariants({ look: 'ghost' }),
-                          'flex h-10 items-center rounded-base font-sans',
+                          'rounded-base flex h-10 items-center font-sans',
                           isLinkActive ||
                             (location.url.pathname?.startsWith('/docs/headless/') &&
                               link.name === 'Headless') ||
                             (location.url.pathname?.startsWith('/docs/styled/') &&
                               link.name === 'Styled')
-                            ? 'bg-accent font-bold text-accent-foreground'
+                            ? 'bg-accent text-accent-foreground font-bold'
                             : 'font-normal',
                         )}
                         href={link.href}
diff --git a/apps/website/src/root.tsx b/apps/website/src/root.tsx
index e1e6e6c7e..ff86453e1 100644
--- a/apps/website/src/root.tsx
+++ b/apps/website/src/root.tsx
@@ -4,7 +4,8 @@ import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city';
 import { APP_STATE_CONTEXT_ID } from './_state/app-state-context-id';
 import { AppState } from './_state/app-state.type';
 import { RouterHead } from './components/router-head/router-head';
-import globalStyles from './global.css?inline';
+
+import global from './global.css?inline';
 
 import { ThemeProvider } from '@qwik-ui/themes';
 
@@ -24,7 +25,8 @@ export default component$(() => {
    *
    * Don't remove the `<head>` and `<body>` elements.
    */
-  useStyles$(globalStyles);
+
+  useStyles$(global);
 
   const appState = useStore<AppState>({
     featureFlags: {
diff --git a/apps/website/src/routes/docs/styled/button/index.mdx b/apps/website/src/routes/docs/styled/button/index.mdx
index 8ed77bb13..686341269 100644
--- a/apps/website/src/routes/docs/styled/button/index.mdx
+++ b/apps/website/src/routes/docs/styled/button/index.mdx
@@ -26,7 +26,7 @@ import { cn } from '@qwik-ui/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded text-sm font-medium transition-all duration-100 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center rounded-sm text-sm font-medium transition-all duration-100 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       look: {
diff --git a/apps/website/src/routes/docs/styled/progress/index.mdx b/apps/website/src/routes/docs/styled/progress/index.mdx
index 7128800fd..003140e3c 100644
--- a/apps/website/src/routes/docs/styled/progress/index.mdx
+++ b/apps/website/src/routes/docs/styled/progress/index.mdx
@@ -30,7 +30,7 @@ import { Progress as HeadlessProgress } from '@qwik-ui/headless';
 export const Progress = component$<PropsOf<typeof HeadlessProgress.Root>>((props) => {
   return (
     <HeadlessProgress.Root
-      class={cn('relative h-4 w-full overflow-hidden rounded bg-secondary', props?.class)}
+      class={cn('relative h-4 w-full overflow-hidden rounded-sm bg-secondary', props?.class)}
     >
       <HeadlessProgress.Indicator
         class="h-full w-full flex-1 bg-primary transition-all"
diff --git a/apps/website/src/routes/docs/styled/skeleton/index.mdx b/apps/website/src/routes/docs/styled/skeleton/index.mdx
index 3b1451238..1514c5cb5 100644
--- a/apps/website/src/routes/docs/styled/skeleton/index.mdx
+++ b/apps/website/src/routes/docs/styled/skeleton/index.mdx
@@ -28,7 +28,7 @@ import { cn } from '@qwik-ui/utils';
 
 export const Skeleton = component$<PropsOf<'div'>>(({ ...props }) => {
   return (
-    <div {...props} class={cn('animate-pulse rounded bg-foreground/10', props.class)} />
+    <div {...props} class={cn('animate-pulse rounded-sm bg-foreground/10', props.class)} />
   );
 });
 ```
diff --git a/apps/website/tailwind.config.cjs b/apps/website/tailwind.config.cjs
deleted file mode 100644
index 3d7d99030..000000000
--- a/apps/website/tailwind.config.cjs
+++ /dev/null
@@ -1,121 +0,0 @@
-const { join } = require('path');
-const plugin = require('tailwindcss/plugin');
-
-/** @type {import('tailwindcss').Config} */
-
-module.exports = {
-  content: [
-    join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'),
-    join(__dirname, '../website/src/**/*.{js,ts,jsx,tsx,mdx}'),
-    join(__dirname, '../../packages/kit-styled/src/**/*.{js,ts,jsx,tsx,mdx}'),
-    join(__dirname, '../../packages/kit-headless/src/**/*.{js,ts,jsx,tsx,mdx}'),
-  ],
-  plugins: [
-    // PLUGIN-START
-    require('tailwindcss-animate'),
-    plugin(function ({ addUtilities }) {
-      addUtilities({
-        '.press': {
-          transform: 'var(--transform-press)',
-        },
-      });
-    }),
-    // PLUGIN-END
-  ],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      screens: {
-        xs: '480px',
-      },
-      // EXTEND-START
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        alert: {
-          DEFAULT: 'hsl(var(--alert))',
-          foreground: 'hsl(var(--alert-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-      },
-      borderRadius: {
-        base: 'var(--border-radius)',
-        sm: 'calc(var(--border-radius) + 0.125rem)',
-        DEFAULT: 'calc(var(--border-radius) + 0.25rem)',
-        md: 'calc(var(--border-radius) + 0.375rem)',
-        lg: 'calc(var(--border-radius) + 0.5rem)',
-        xl: 'calc(var(--border-radius) + 0.75rem)',
-        '2xl': 'calc(var(--border-radius) + 1rem)',
-        '3xl': 'calc(var(--border-radius) + 1.5rem)',
-      },
-      borderWidth: {
-        base: 'var(--border-width)',
-        DEFAULT: 'calc(var(--border-width) + 1px)',
-        2: 'calc(var(--border-width) + 2px)',
-        4: 'calc(var(--border-width) + 4px)',
-        8: 'calc(var(--border-width) + 8px)',
-      },
-      boxShadow: {
-        base: 'var(--shadow-base)',
-        sm: 'var(--shadow-sm)',
-        DEFAULT: 'var(--shadow)',
-        md: 'var(--shadow-md)',
-        lg: 'var(--shadow-lg)',
-        xl: 'var(--shadow-xl)',
-        '2xl': 'var(--shadow-2xl)',
-        inner: 'var(--shadow-inner)',
-      },
-      strokeWidth: {
-        0: '0',
-        base: 'var(--stroke-width)',
-        1: 'calc(var(--stroke-width) + 1px)',
-        2: 'calc(var(--stroke-width) + 2px)',
-      },
-      animation: {
-        'accordion-up': 'collapsible-up 0.2s ease-out 0s 1 normal forwards',
-        'accordion-down': 'collapsible-down 0.2s ease-out 0s 1 normal forwards',
-      },
-      keyframes: {
-        'collapsible-down': {
-          from: { height: '0' },
-          to: { height: 'var(--qwikui-collapsible-content-height)' },
-        },
-        'collapsible-up': {
-          from: { height: 'var(--qwikui-collapsible-content-height)' },
-          to: { height: '0' },
-        },
-      },
-      // EXTEND-END
-      transitionTimingFunction: {
-        step: 'cubic-bezier(0.6, 0.6, 0, 1)',
-        jumpy: 'cubic-bezier(0.87, 0, 0.13, 1)',
-      },
-    },
-  },
-};
diff --git a/apps/website/vite.config.ts b/apps/website/vite.config.ts
index 1d5b229ee..7981f5782 100644
--- a/apps/website/vite.config.ts
+++ b/apps/website/vite.config.ts
@@ -5,10 +5,11 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 import { recmaProvideComponents } from './recma-provide-components';
 import autoAPI from './auto-api';
 import { ShikiTransformer } from 'shiki';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig(async () => {
   const { default: shikiRehype } = await import('@shikijs/rehype');
-
+  // const { default: tailwindcss } = await import('@tailwindcss/vite');
   return {
     root: 'apps/website',
     plugins: [
@@ -47,6 +48,7 @@ export default defineConfig(async () => {
       tsconfigPaths({ root: '../../' }),
       // Uncomment for debugging preview with http2 via https
       // basicSsl(),
+      tailwindcss(),
     ],
 
     server: {
diff --git a/package.json b/package.json
index 0c5f918ca..06574a2db 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,7 @@
     "@shikijs/transformers": "3.4.2",
     "@swc-node/register": "^1.9.1",
     "@swc/core": "^1.5.7",
-    "@tailwindcss/postcss": "4.1.10",
+    "@tailwindcss/vite": "4.1.0",
     "@types/decompress": "4.2.7",
     "@types/eslint": "8.56.12",
     "@types/estree-jsx": "1.0.5",
@@ -92,9 +92,9 @@
     "axe-core": "^4.9.1",
     "body-scroll-lock-upgrade": "^1.1.0",
     "canvas-confetti": "1.9.3",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "0.7.1",
     "clipboard-copy": "^4.0.1",
-    "clsx": "^2.1.1",
+    "clsx": "^2.0.0",
     "danger": "^11.3.1",
     "decompress": "4.2.1",
     "dotenv": "16.4.5",
@@ -114,20 +114,21 @@
     "pagefind": "1.2.0",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.6.12",
+    "prettier-plugin-tailwindcss": "^0.6.13",
     "pretty-quick": "^4.0.0",
     "qwik-nx": "^3.2.0",
     "sass": "^1.77.2",
     "shiki": "^3.4.2",
     "simple-git-hooks": "2.11.1",
     "specificity": "^1.0.0",
-    "tailwind-merge": "^3.3.0",
-    "tailwindcss": "^4.1.10",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss": "4.1.0",
     "tailwindcss-animate": "^1.0.7",
     "tree-sitter": "0.21.1",
     "tree-sitter-typescript": "0.23.0",
     "ts-jest": "^29.1.3",
     "tslib": "^2.6.2",
+    "tw-animate-css": "1.3.4",
     "typescript": "5.7.3",
     "undici": "5.28.4",
     "unified": "^11.0.4",
diff --git a/packages/kit-headless/vite.config.ts b/packages/kit-headless/vite.config.ts
index 64060df6c..ecdb1a70c 100644
--- a/packages/kit-headless/vite.config.ts
+++ b/packages/kit-headless/vite.config.ts
@@ -7,6 +7,7 @@ import dts from 'vite-plugin-dts';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import pkg from './package.json';
+import tailwindcss from '@tailwindcss/vite';
 
 const { dependencies = {}, peerDependencies = {} } = pkg as any;
 const makeRegex = (dep: any) => new RegExp(`^${dep}(/.*)?$`);
@@ -36,6 +37,7 @@ export default defineConfig({
     viteStaticCopy({
       targets: [{ src: './README.md', dest: './' }],
     }),
+    tailwindcss(),
   ],
   server: {
     fs: {
diff --git a/packages/kit-styled/src/components/modal/modal.tsx b/packages/kit-styled/src/components/modal/modal.tsx
index 7e87a4886..3ccd42fcb 100644
--- a/packages/kit-styled/src/components/modal/modal.tsx
+++ b/packages/kit-styled/src/components/modal/modal.tsx
@@ -11,21 +11,21 @@ const Close = HeadlessModal.Close;
 
 export const panelVariants = cva(
   [
-    'fixed w-full bg-background p-6 text-foreground transition-all backdrop:brightness-50 backdrop:backdrop-blur-xs',
-    'data-closing:duration-300 data-open:duration-300 data-open:animate-in data-closing:animate-out',
-    'data-closing:backdrop:duration-300 data-open:backdrop:duration-300 data-open:backdrop:animate-in data-closing:backdrop:animate-out data-closing:backdrop:fade-out data-open:backdrop:fade-in',
+    'bg-background text-foreground fixed p-6 transition-all backdrop:brightness-50 backdrop:backdrop-blur-xs',
+    'data-open:animate-in data-closing:animate-out data-closing:duration-300 data-open:duration-300',
+    'data-open:backdrop:animate-in data-closing:backdrop:animate-out data-closing:backdrop:fade-out data-open:backdrop:fade-in data-closing:backdrop:duration-300 data-open:backdrop:duration-300',
   ],
   {
     variants: {
       position: {
         center:
-          'max-w-lg rounded-base shadow-lg data-closed:fade-out data-open:fade-in data-closed:zoom-out-95 data-open:zoom-in-95 data-open:slide-in-from-bottom-2 data-closing:backdrop:fade-out data-open:backdrop:fade-in',
-        top: 'inset-x-0 top-0 mt-0 rounded-b-base border-b data-closing:slide-out-to-top data-open:slide-in-from-top',
+          'rounded-base data-closed:fade-out data-open:fade-in data-closed:zoom-out-95 data-open:zoom-in-95 data-open:slide-in-from-bottom-2 data-closing:backdrop:fade-out data-open:backdrop:fade-in max-w-lg shadow-lg',
+        top: 'rounded-b-base data-closing:slide-out-to-top data-open:slide-in-from-top inset-x-0 top-0 mt-0 mb-auto border-b',
         bottom:
-          'inset-x-0 bottom-0 mb-0 rounded-t-base border-t data-closing:slide-out-to-bottom data-open:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 ml-0 h-full max-w-sm rounded-r-base border-r data-closing:slide-out-to-left data-open:slide-in-from-left',
+          'rounded-t-base data-closing:slide-out-to-bottom data-open:slide-in-from-bottom inset-x-0 bottom-0 mt-auto mb-0 border-t',
+        left: 'rounded-r-base data-closing:slide-out-to-left data-open:slide-in-from-left inset-y-0 left-0 mr-auto ml-0 h-full max-w-sm border-r',
         right:
-          'inset-y-0 right-0 mr-0 h-full max-w-sm rounded-l-base border-l data-closing:slide-out-to-right data-open:slide-in-from-right',
+          'rounded-l-base data-closing:slide-out-to-right data-open:slide-in-from-right inset-y-0 right-0 mr-0 ml-auto h-full max-w-sm border-l',
       },
     },
     defaultVariants: {
@@ -60,7 +60,7 @@ const Description = component$<PropsOf<'p'>>(({ ...props }) => {
   return (
     <HeadlessModal.Description
       {...props}
-      class={cn('text-sm text-muted-foreground', props.class)}
+      class={cn('text-muted-foreground text-sm', props.class)}
     >
       <Slot />
     </HeadlessModal.Description>
diff --git a/packages/kit-styled/src/components/progress/progress.tsx b/packages/kit-styled/src/components/progress/progress.tsx
index 4043b2097..e94c2f9a1 100644
--- a/packages/kit-styled/src/components/progress/progress.tsx
+++ b/packages/kit-styled/src/components/progress/progress.tsx
@@ -6,12 +6,12 @@ export const Progress = component$<PropsOf<typeof HeadlessProgress.Root>>((props
   return (
     <HeadlessProgress.Root
       class={cn(
-        'relative h-4 w-full overflow-hidden rounded border bg-muted',
+        'bg-muted relative h-4 w-full overflow-hidden rounded-sm border',
         props.class,
       )}
       {...props}
     >
-      <HeadlessProgress.Indicator class="h-full w-full flex-1 bg-primary transition-all" />
+      <HeadlessProgress.Indicator class="bg-primary h-full w-full flex-1 transition-all" />
     </HeadlessProgress.Root>
   );
 });
diff --git a/packages/kit-styled/src/components/skeleton/skeleton.tsx b/packages/kit-styled/src/components/skeleton/skeleton.tsx
index 160ad89ec..4818f4cf7 100644
--- a/packages/kit-styled/src/components/skeleton/skeleton.tsx
+++ b/packages/kit-styled/src/components/skeleton/skeleton.tsx
@@ -3,6 +3,9 @@ import { cn } from '@qwik-ui/utils';
 
 export const Skeleton = component$<PropsOf<'div'>>(({ ...props }) => {
   return (
-    <div {...props} class={cn('animate-pulse rounded bg-foreground/10', props.class)} />
+    <div
+      {...props}
+      class={cn('bg-foreground/10 animate-pulse rounded-sm', props.class)}
+    />
   );
 });
diff --git a/packages/kit-styled/src/global.css b/packages/kit-styled/src/global.css
new file mode 100644
index 000000000..80ef6ee4a
--- /dev/null
+++ b/packages/kit-styled/src/global.css
@@ -0,0 +1 @@
+@reference "../../apps/website/src/global.css";
diff --git a/packages/kit-styled/src/templates/global.css b/packages/kit-styled/src/templates/global.css
index 06c9c5fb7..a619fbda2 100644
--- a/packages/kit-styled/src/templates/global.css
+++ b/packages/kit-styled/src/templates/global.css
@@ -1,7 +1,5 @@
 @import 'tailwindcss';
 
-@config './tailwind.config.cjs';
-
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still
@@ -1268,11 +1266,11 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground font-sans;
+    @apply bg-background font-sans text-foreground;
   }
 
   p code {
-    @apply bg-accent rounded-sm border-b-2 px-2 py-0.5;
+    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
   }
 
   pre code {
diff --git a/packages/kit-styled/src/templates/tailwind.config.cjs b/packages/kit-styled/src/templates/tailwind.config.cjs
deleted file mode 100644
index 3d7d99030..000000000
--- a/packages/kit-styled/src/templates/tailwind.config.cjs
+++ /dev/null
@@ -1,121 +0,0 @@
-const { join } = require('path');
-const plugin = require('tailwindcss/plugin');
-
-/** @type {import('tailwindcss').Config} */
-
-module.exports = {
-  content: [
-    join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'),
-    join(__dirname, '../website/src/**/*.{js,ts,jsx,tsx,mdx}'),
-    join(__dirname, '../../packages/kit-styled/src/**/*.{js,ts,jsx,tsx,mdx}'),
-    join(__dirname, '../../packages/kit-headless/src/**/*.{js,ts,jsx,tsx,mdx}'),
-  ],
-  plugins: [
-    // PLUGIN-START
-    require('tailwindcss-animate'),
-    plugin(function ({ addUtilities }) {
-      addUtilities({
-        '.press': {
-          transform: 'var(--transform-press)',
-        },
-      });
-    }),
-    // PLUGIN-END
-  ],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      screens: {
-        xs: '480px',
-      },
-      // EXTEND-START
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        alert: {
-          DEFAULT: 'hsl(var(--alert))',
-          foreground: 'hsl(var(--alert-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-      },
-      borderRadius: {
-        base: 'var(--border-radius)',
-        sm: 'calc(var(--border-radius) + 0.125rem)',
-        DEFAULT: 'calc(var(--border-radius) + 0.25rem)',
-        md: 'calc(var(--border-radius) + 0.375rem)',
-        lg: 'calc(var(--border-radius) + 0.5rem)',
-        xl: 'calc(var(--border-radius) + 0.75rem)',
-        '2xl': 'calc(var(--border-radius) + 1rem)',
-        '3xl': 'calc(var(--border-radius) + 1.5rem)',
-      },
-      borderWidth: {
-        base: 'var(--border-width)',
-        DEFAULT: 'calc(var(--border-width) + 1px)',
-        2: 'calc(var(--border-width) + 2px)',
-        4: 'calc(var(--border-width) + 4px)',
-        8: 'calc(var(--border-width) + 8px)',
-      },
-      boxShadow: {
-        base: 'var(--shadow-base)',
-        sm: 'var(--shadow-sm)',
-        DEFAULT: 'var(--shadow)',
-        md: 'var(--shadow-md)',
-        lg: 'var(--shadow-lg)',
-        xl: 'var(--shadow-xl)',
-        '2xl': 'var(--shadow-2xl)',
-        inner: 'var(--shadow-inner)',
-      },
-      strokeWidth: {
-        0: '0',
-        base: 'var(--stroke-width)',
-        1: 'calc(var(--stroke-width) + 1px)',
-        2: 'calc(var(--stroke-width) + 2px)',
-      },
-      animation: {
-        'accordion-up': 'collapsible-up 0.2s ease-out 0s 1 normal forwards',
-        'accordion-down': 'collapsible-down 0.2s ease-out 0s 1 normal forwards',
-      },
-      keyframes: {
-        'collapsible-down': {
-          from: { height: '0' },
-          to: { height: 'var(--qwikui-collapsible-content-height)' },
-        },
-        'collapsible-up': {
-          from: { height: 'var(--qwikui-collapsible-content-height)' },
-          to: { height: '0' },
-        },
-      },
-      // EXTEND-END
-      transitionTimingFunction: {
-        step: 'cubic-bezier(0.6, 0.6, 0, 1)',
-        jumpy: 'cubic-bezier(0.87, 0, 0.13, 1)',
-      },
-    },
-  },
-};
diff --git a/packages/kit-styled/vite.config.ts b/packages/kit-styled/vite.config.ts
index cff90b3a6..067d9f1a1 100644
--- a/packages/kit-styled/vite.config.ts
+++ b/packages/kit-styled/vite.config.ts
@@ -1,5 +1,6 @@
 import { qwikVite } from '@builder.io/qwik/optimizer';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import tailwindcss from '@tailwindcss/vite';
 import { join } from 'path';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
@@ -16,6 +17,7 @@ export default defineConfig({
       tsconfigPath: join(__dirname, 'tsconfig.lib.json'),
     }),
     nxViteTsPaths(),
+    tailwindcss(),
   ],
   server: {
     fs: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8e8b1909e..342aea2cb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -92,9 +92,9 @@ importers:
       '@swc/core':
         specifier: ^1.5.7
         version: 1.11.29(@swc/helpers@0.5.17)
-      '@tailwindcss/postcss':
-        specifier: 4.1.10
-        version: 4.1.10
+      '@tailwindcss/vite':
+        specifier: 4.1.0
+        version: 4.1.0(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))
       '@types/decompress':
         specifier: 4.2.7
         version: 4.2.7
@@ -141,13 +141,13 @@ importers:
         specifier: 1.9.3
         version: 1.9.3
       class-variance-authority:
-        specifier: ^0.7.0
+        specifier: 0.7.1
         version: 0.7.1
       clipboard-copy:
         specifier: ^4.0.1
         version: 4.0.1
       clsx:
-        specifier: ^2.1.1
+        specifier: ^2.0.0
         version: 2.1.1
       danger:
         specifier: ^11.3.1
@@ -207,8 +207,8 @@ importers:
         specifier: ^3.2.5
         version: 3.5.3
       prettier-plugin-tailwindcss:
-        specifier: ^0.6.12
-        version: 0.6.12(prettier@3.5.3)
+        specifier: ^0.6.13
+        version: 0.6.13(prettier@3.5.3)
       pretty-quick:
         specifier: ^4.0.0
         version: 4.2.2(prettier@3.5.3)
@@ -228,14 +228,14 @@ importers:
         specifier: ^1.0.0
         version: 1.0.0
       tailwind-merge:
-        specifier: ^3.3.0
-        version: 3.3.0
+        specifier: ^1.14.0
+        version: 1.14.0
       tailwindcss:
-        specifier: ^4.1.10
-        version: 4.1.10
+        specifier: 4.1.0
+        version: 4.1.0
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@4.1.10)
+        version: 1.0.7(tailwindcss@4.1.0)
       tree-sitter:
         specifier: 0.21.1
         version: 0.21.1
@@ -248,6 +248,9 @@ importers:
       tslib:
         specifier: ^2.6.2
         version: 2.8.1
+      tw-animate-css:
+        specifier: 1.3.4
+        version: 1.3.4
       typescript:
         specifier: 5.7.3
         version: 5.7.3
@@ -373,10 +376,6 @@ importers:
 
 packages:
 
-  '@alloc/quick-lru@5.2.0':
-    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
-    engines: {node: '>=10'}
-
   '@ampproject/remapping@2.3.0':
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
@@ -1997,10 +1996,6 @@ packages:
       '@types/node':
         optional: true
 
-  '@isaacs/fs-minipass@4.0.1':
-    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
-    engines: {node: '>=18.0.0'}
-
   '@istanbuljs/load-nyc-config@1.1.0':
     resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
     engines: {node: '>=8'}
@@ -2809,93 +2804,83 @@ packages:
     resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==}
     engines: {node: '>=10'}
 
-  '@tailwindcss/node@4.1.10':
-    resolution: {integrity: sha512-2ACf1znY5fpRBwRhMgj9ZXvb2XZW8qs+oTfotJ2C5xR0/WNL7UHZ7zXl6s+rUqedL1mNi+0O+WQr5awGowS3PQ==}
+  '@tailwindcss/node@4.1.0':
+    resolution: {integrity: sha512-mfgxGxFaxbsUbaGwKIAQXUSm7Qoojw53FftpoKwo4ANwr9wnDaByz4vi1gMti/xfJvmQ5lzA1DvPiX5yCHtBkQ==}
 
-  '@tailwindcss/oxide-android-arm64@4.1.10':
-    resolution: {integrity: sha512-VGLazCoRQ7rtsCzThaI1UyDu/XRYVyH4/EWiaSX6tFglE+xZB5cvtC5Omt0OQ+FfiIVP98su16jDVHDEIuH4iQ==}
+  '@tailwindcss/oxide-android-arm64@4.1.0':
+    resolution: {integrity: sha512-UredFljuHey2Kh5qyYfQVBr0Xfq70ZE5Df6i5IubNYQGs2JXXT4VL0SIUjwzHx5W9T6t7dT7banunlV6lthGPQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [android]
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.10':
-    resolution: {integrity: sha512-ZIFqvR1irX2yNjWJzKCqTCcHZbgkSkSkZKbRM3BPzhDL/18idA8uWCoopYA2CSDdSGFlDAxYdU2yBHwAwx8euQ==}
+  '@tailwindcss/oxide-darwin-arm64@4.1.0':
+    resolution: {integrity: sha512-QHQ/46lRVwH9zEBNiRk8AJ3Af4pMq6DuZAI//q323qrPOXjsRdrhLsH9LUO3mqBfHr5EZNUxN3Am5vpO89sntw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@tailwindcss/oxide-darwin-x64@4.1.10':
-    resolution: {integrity: sha512-eCA4zbIhWUFDXoamNztmS0MjXHSEJYlvATzWnRiTqJkcUteSjO94PoRHJy1Xbwp9bptjeIxxBHh+zBWFhttbrQ==}
+  '@tailwindcss/oxide-darwin-x64@4.1.0':
+    resolution: {integrity: sha512-lEMgYHCvQQ6x2KOZ4FwnPprwfnc+UnjzwXRqEYIhB/NlYvXQD1QMf7oKEDRqy94DiZaYox9ZRfG2YJOBgM0UkA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.10':
-    resolution: {integrity: sha512-8/392Xu12R0cc93DpiJvNpJ4wYVSiciUlkiOHOSOQNH3adq9Gi/dtySK7dVQjXIOzlpSHjeCL89RUUI8/GTI6g==}
+  '@tailwindcss/oxide-freebsd-x64@4.1.0':
+    resolution: {integrity: sha512-9fdImTc+2lA5yHqJ61oeTXfCtzylNOzJVFhyWwVQAJESJJbVCPnj6f+b+Zf/AYAdKQfS6FCThbPEahkQrDCgLQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [freebsd]
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.10':
-    resolution: {integrity: sha512-t9rhmLT6EqeuPT+MXhWhlRYIMSfh5LZ6kBrC4FS6/+M1yXwfCtp24UumgCWOAJVyjQwG+lYva6wWZxrfvB+NhQ==}
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.0':
+    resolution: {integrity: sha512-HB0bTkUOuTLLSdadyRhKE9yps4/ZBjrojbHTPMSvvf/8yBLZRPpWb+A6IgW5R+2A2AL4KhVPgLwWfoXsErxJFg==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.10':
-    resolution: {integrity: sha512-3oWrlNlxLRxXejQ8zImzrVLuZ/9Z2SeKoLhtCu0hpo38hTO2iL86eFOu4sVR8cZc6n3z7eRXXqtHJECa6mFOvA==}
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.0':
+    resolution: {integrity: sha512-+QtYCwvKLjC46h6RikKkpELJWrpiMMtgyK0aaqhwPLEx1icGgIhwz8dqrkAiqbFRE0KiRrE2aenhYoEkplyRmA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.10':
-    resolution: {integrity: sha512-saScU0cmWvg/Ez4gUmQWr9pvY9Kssxt+Xenfx1LG7LmqjcrvBnw4r9VjkFcqmbBb7GCBwYNcZi9X3/oMda9sqQ==}
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.0':
+    resolution: {integrity: sha512-nApadFKM9GauzuPZPlt6TKfELavMHqJ0gVd+GYkYBTwr2t9KhgCAb2sKiFDDIhs1a7gOjsU7P1lEauv3iKFp+Q==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.10':
-    resolution: {integrity: sha512-/G3ao/ybV9YEEgAXeEg28dyH6gs1QG8tvdN9c2MNZdUXYBaIY/Gx0N6RlJzfLy/7Nkdok4kaxKPHKJUlAaoTdA==}
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.0':
+    resolution: {integrity: sha512-cp0Rf9Wit2kZHhrV8HIoDFD8dxU2+ZTCFCFbDj3a07pGyyPwLCJm5H5VipKXgYrBaLmlYu73ERidW0S5sdEXEg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.10':
-    resolution: {integrity: sha512-LNr7X8fTiKGRtQGOerSayc2pWJp/9ptRYAa4G+U+cjw9kJZvkopav1AQc5HHD+U364f71tZv6XamaHKgrIoVzA==}
+  '@tailwindcss/oxide-linux-x64-musl@4.1.0':
+    resolution: {integrity: sha512-4/wf42XWBJGXsOS6BhgPhdQbg/qyfdZ1nZvTL9sJoxYN+Ah+cfY5Dd7R0smzI8hmgCRt3TD1lYb72ChTyIA59w==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.10':
-    resolution: {integrity: sha512-d6ekQpopFQJAcIK2i7ZzWOYGZ+A6NzzvQ3ozBvWFdeyqfOZdYHU66g5yr+/HC4ipP1ZgWsqa80+ISNILk+ae/Q==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-    bundledDependencies:
-      - '@napi-rs/wasm-runtime'
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-      - '@tybys/wasm-util'
-      - '@emnapi/wasi-threads'
-      - tslib
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.10':
-    resolution: {integrity: sha512-i1Iwg9gRbwNVOCYmnigWCCgow8nDWSFmeTUU5nbNx3rqbe4p0kRbEqLwLJbYZKmSSp23g4N6rCDmm7OuPBXhDA==}
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.0':
+    resolution: {integrity: sha512-caXJJ0G6NwGbcoxEYdH3MZYN84C3PldaMdAEPMU6bjJXURQlKdSlQ/Ecis7/nSgBkMkicZyhqWmb36Tw/BFSIw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.10':
-    resolution: {integrity: sha512-sGiJTjcBSfGq2DVRtaSljq5ZgZS2SDHSIfhOylkBvHVjwOsodBhnb3HdmiKkVuUGKD0I7G63abMOVaskj1KpOA==}
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.0':
+    resolution: {integrity: sha512-ZHXRXRxB7HBmkUE8U13nmkGGYfR1I2vsuhiYjeDDUFIYpk1BL6caU8hvzkSlL/X5CAQNdIUUJRGom5I0ZyfJOA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
 
-  '@tailwindcss/oxide@4.1.10':
-    resolution: {integrity: sha512-v0C43s7Pjw+B9w21htrQwuFObSkio2aV/qPx/mhrRldbqxbWJK6KizM+q7BF1/1CmuLqZqX3CeYF7s7P9fbA8Q==}
+  '@tailwindcss/oxide@4.1.0':
+    resolution: {integrity: sha512-A33oyZKpPFH08d7xkl13Dc8OTsbPhsuls0z9gUCxIHvn8c1BsUACddQxL6HwaeJR1fSYyXZUw8bdWcD8bVawpQ==}
     engines: {node: '>= 10'}
 
-  '@tailwindcss/postcss@4.1.10':
-    resolution: {integrity: sha512-B+7r7ABZbkXJwpvt2VMnS6ujcDoR2OOcFaqrLIo1xbcdxje4Vf+VgJdBzNNbrAjBj/rLZ66/tlQ1knIGNLKOBQ==}
+  '@tailwindcss/vite@4.1.0':
+    resolution: {integrity: sha512-IszG0h/o8jOGheY0f7v41a9qyDymZ5eU8qm4koTypMKagBhaQA06Keip13wch6sz7rG3cvIG7A3/ytdfRh2BUw==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6
 
   '@tootallnate/once@2.0.0':
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
@@ -3820,10 +3805,6 @@ packages:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
 
-  chownr@3.0.0:
-    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
-    engines: {node: '>=18'}
-
   ci-info@3.9.0:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
@@ -5887,66 +5868,130 @@ packages:
   li@1.3.0:
     resolution: {integrity: sha512-z34TU6GlMram52Tss5mt1m//ifRIpKH5Dqm7yUVOdHI+BQCs9qGPHFaCUTIzsWX7edN30aa2WrPwR7IO10FHaw==}
 
+  lightningcss-darwin-arm64@1.29.2:
+    resolution: {integrity: sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
   lightningcss-darwin-arm64@1.30.1:
     resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [darwin]
 
+  lightningcss-darwin-x64@1.29.2:
+    resolution: {integrity: sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
   lightningcss-darwin-x64@1.30.1:
     resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [darwin]
 
+  lightningcss-freebsd-x64@1.29.2:
+    resolution: {integrity: sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
   lightningcss-freebsd-x64@1.30.1:
     resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
 
+  lightningcss-linux-arm-gnueabihf@1.29.2:
+    resolution: {integrity: sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
   lightningcss-linux-arm-gnueabihf@1.30.1:
     resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
 
+  lightningcss-linux-arm64-gnu@1.29.2:
+    resolution: {integrity: sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
   lightningcss-linux-arm64-gnu@1.30.1:
     resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
 
+  lightningcss-linux-arm64-musl@1.29.2:
+    resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
   lightningcss-linux-arm64-musl@1.30.1:
     resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
 
+  lightningcss-linux-x64-gnu@1.29.2:
+    resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
   lightningcss-linux-x64-gnu@1.30.1:
     resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
 
+  lightningcss-linux-x64-musl@1.29.2:
+    resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
   lightningcss-linux-x64-musl@1.30.1:
     resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
 
+  lightningcss-win32-arm64-msvc@1.29.2:
+    resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
   lightningcss-win32-arm64-msvc@1.30.1:
     resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [win32]
 
+  lightningcss-win32-x64-msvc@1.29.2:
+    resolution: {integrity: sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
   lightningcss-win32-x64-msvc@1.30.1:
     resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [win32]
 
+  lightningcss@1.29.2:
+    resolution: {integrity: sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==}
+    engines: {node: '>= 12.0.0'}
+
   lightningcss@1.30.1:
     resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
     engines: {node: '>= 12.0.0'}
@@ -6355,24 +6400,11 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
-  minipass@7.1.2:
-    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
-  minizlib@3.0.2:
-    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
-    engines: {node: '>= 18'}
-
   mkdirp@1.0.4:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
     engines: {node: '>=10'}
     hasBin: true
 
-  mkdirp@3.0.1:
-    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   mlly@1.7.4:
     resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
 
@@ -6897,8 +6929,8 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
-  prettier-plugin-tailwindcss@0.6.12:
-    resolution: {integrity: sha512-OuTQKoqNwV7RnxTPwXWzOFXy6Jc4z8oeRZYGuMpRyG3WbuR3jjXdQFK8qFBMBx8UHWdHrddARz2fgUenild6aw==}
+  prettier-plugin-tailwindcss@0.6.13:
+    resolution: {integrity: sha512-uQ0asli1+ic8xrrSmIOaElDu0FacR4x69GynTh2oZjFY10JUt6EEumTQl5tB4fMeD6I1naKd+4rXQQ7esT2i1g==}
     engines: {node: '>=14.21.3'}
     peerDependencies:
       '@ianvs/prettier-plugin-sort-imports': '*'
@@ -7738,16 +7770,13 @@ packages:
   tailwind-merge@1.14.0:
     resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
 
-  tailwind-merge@3.3.0:
-    resolution: {integrity: sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==}
-
   tailwindcss-animate@1.0.7:
     resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
 
-  tailwindcss@4.1.10:
-    resolution: {integrity: sha512-P3nr6WkvKV/ONsTzj6Gb57sWPMX29EPNPopo7+FcpkQaNsrNpZ1pv8QmrYI2RqEKD7mlGqLnGovlcYnBK0IqUA==}
+  tailwindcss@4.1.0:
+    resolution: {integrity: sha512-vBYstoFnvUZCDxaauNGQQEvJNQgCd1vSMDRYuZZMH1xRRcTboOk1rJrW5yFkEabU9X6Yx1C4LQ+QvPOvQj4Daw==}
 
   tapable@2.2.2:
     resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
@@ -7764,10 +7793,6 @@ packages:
   tar-stream@3.1.7:
     resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
 
-  tar@7.4.3:
-    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
-    engines: {node: '>=18'}
-
   tcp-port-used@1.0.2:
     resolution: {integrity: sha512-l7ar8lLUD3XS1V2lfoJlCBaeoaWo/2xfYt81hM7VlvR4RrMVFqfmzfhLVk40hAb368uitje5gPtBRL1m/DGvLA==}
 
@@ -7963,6 +7988,9 @@ packages:
   tunnel-agent@0.6.0:
     resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
 
+  tw-animate-css@1.3.4:
+    resolution: {integrity: sha512-dd1Ht6/YQHcNbq0znIT6dG8uhO7Ce+VIIhZUhjsryXsMPJQz3bZg7Q2eNzLwipb25bRZslGb2myio5mScd1TFg==}
+
   tweetnacl@0.14.5:
     resolution: {integrity: sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==}
 
@@ -8547,10 +8575,6 @@ packages:
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
-  yallist@5.0.0:
-    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
-    engines: {node: '>=18'}
-
   yaml@1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
@@ -8605,8 +8629,6 @@ packages:
 
 snapshots:
 
-  '@alloc/quick-lru@5.2.0': {}
-
   '@ampproject/remapping@2.3.0':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.8
@@ -10234,10 +10256,6 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.15.29
 
-  '@isaacs/fs-minipass@4.0.1':
-    dependencies:
-      minipass: 7.1.2
-
   '@istanbuljs/load-nyc-config@1.1.0':
     dependencies:
       camelcase: 5.3.1
@@ -11345,77 +11363,66 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
-  '@tailwindcss/node@4.1.10':
+  '@tailwindcss/node@4.1.0':
     dependencies:
-      '@ampproject/remapping': 2.3.0
       enhanced-resolve: 5.18.1
       jiti: 2.4.2
-      lightningcss: 1.30.1
-      magic-string: 0.30.17
-      source-map-js: 1.2.1
-      tailwindcss: 4.1.10
-
-  '@tailwindcss/oxide-android-arm64@4.1.10':
-    optional: true
+      lightningcss: 1.29.2
+      tailwindcss: 4.1.0
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.10':
+  '@tailwindcss/oxide-android-arm64@4.1.0':
     optional: true
 
-  '@tailwindcss/oxide-darwin-x64@4.1.10':
+  '@tailwindcss/oxide-darwin-arm64@4.1.0':
     optional: true
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.10':
+  '@tailwindcss/oxide-darwin-x64@4.1.0':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.10':
+  '@tailwindcss/oxide-freebsd-x64@4.1.0':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.10':
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.0':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.10':
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.0':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.10':
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.0':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.10':
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.0':
     optional: true
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.10':
+  '@tailwindcss/oxide-linux-x64-musl@4.1.0':
     optional: true
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.10':
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.0':
     optional: true
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.10':
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.0':
     optional: true
 
-  '@tailwindcss/oxide@4.1.10':
-    dependencies:
-      detect-libc: 2.0.4
-      tar: 7.4.3
+  '@tailwindcss/oxide@4.1.0':
     optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.1.10
-      '@tailwindcss/oxide-darwin-arm64': 4.1.10
-      '@tailwindcss/oxide-darwin-x64': 4.1.10
-      '@tailwindcss/oxide-freebsd-x64': 4.1.10
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.10
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.10
-      '@tailwindcss/oxide-linux-arm64-musl': 4.1.10
-      '@tailwindcss/oxide-linux-x64-gnu': 4.1.10
-      '@tailwindcss/oxide-linux-x64-musl': 4.1.10
-      '@tailwindcss/oxide-wasm32-wasi': 4.1.10
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.10
-      '@tailwindcss/oxide-win32-x64-msvc': 4.1.10
-
-  '@tailwindcss/postcss@4.1.10':
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      '@tailwindcss/node': 4.1.10
-      '@tailwindcss/oxide': 4.1.10
-      postcss: 8.5.4
-      tailwindcss: 4.1.10
+      '@tailwindcss/oxide-android-arm64': 4.1.0
+      '@tailwindcss/oxide-darwin-arm64': 4.1.0
+      '@tailwindcss/oxide-darwin-x64': 4.1.0
+      '@tailwindcss/oxide-freebsd-x64': 4.1.0
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.0
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.0
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.0
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.0
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.0
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.0
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.0
+
+  '@tailwindcss/vite@4.1.0(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))':
+    dependencies:
+      '@tailwindcss/node': 4.1.0
+      '@tailwindcss/oxide': 4.1.0
+      tailwindcss: 4.1.0
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)
 
   '@tootallnate/once@2.0.0': {}
 
@@ -12564,8 +12571,6 @@ snapshots:
     dependencies:
       readdirp: 4.1.2
 
-  chownr@3.0.0: {}
-
   ci-info@3.9.0: {}
 
   cjs-module-lexer@1.4.3: {}
@@ -15065,36 +15070,81 @@ snapshots:
 
   li@1.3.0: {}
 
+  lightningcss-darwin-arm64@1.29.2:
+    optional: true
+
   lightningcss-darwin-arm64@1.30.1:
     optional: true
 
+  lightningcss-darwin-x64@1.29.2:
+    optional: true
+
   lightningcss-darwin-x64@1.30.1:
     optional: true
 
+  lightningcss-freebsd-x64@1.29.2:
+    optional: true
+
   lightningcss-freebsd-x64@1.30.1:
     optional: true
 
+  lightningcss-linux-arm-gnueabihf@1.29.2:
+    optional: true
+
   lightningcss-linux-arm-gnueabihf@1.30.1:
     optional: true
 
+  lightningcss-linux-arm64-gnu@1.29.2:
+    optional: true
+
   lightningcss-linux-arm64-gnu@1.30.1:
     optional: true
 
+  lightningcss-linux-arm64-musl@1.29.2:
+    optional: true
+
   lightningcss-linux-arm64-musl@1.30.1:
     optional: true
 
+  lightningcss-linux-x64-gnu@1.29.2:
+    optional: true
+
   lightningcss-linux-x64-gnu@1.30.1:
     optional: true
 
+  lightningcss-linux-x64-musl@1.29.2:
+    optional: true
+
   lightningcss-linux-x64-musl@1.30.1:
     optional: true
 
+  lightningcss-win32-arm64-msvc@1.29.2:
+    optional: true
+
   lightningcss-win32-arm64-msvc@1.30.1:
     optional: true
 
+  lightningcss-win32-x64-msvc@1.29.2:
+    optional: true
+
   lightningcss-win32-x64-msvc@1.30.1:
     optional: true
 
+  lightningcss@1.29.2:
+    dependencies:
+      detect-libc: 2.0.4
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.29.2
+      lightningcss-darwin-x64: 1.29.2
+      lightningcss-freebsd-x64: 1.29.2
+      lightningcss-linux-arm-gnueabihf: 1.29.2
+      lightningcss-linux-arm64-gnu: 1.29.2
+      lightningcss-linux-arm64-musl: 1.29.2
+      lightningcss-linux-x64-gnu: 1.29.2
+      lightningcss-linux-x64-musl: 1.29.2
+      lightningcss-win32-arm64-msvc: 1.29.2
+      lightningcss-win32-x64-msvc: 1.29.2
+
   lightningcss@1.30.1:
     dependencies:
       detect-libc: 2.0.4
@@ -15109,6 +15159,7 @@ snapshots:
       lightningcss-linux-x64-musl: 1.30.1
       lightningcss-win32-arm64-msvc: 1.30.1
       lightningcss-win32-x64-msvc: 1.30.1
+    optional: true
 
   lines-and-columns@1.2.4: {}
 
@@ -15700,16 +15751,8 @@ snapshots:
 
   minimist@1.2.8: {}
 
-  minipass@7.1.2: {}
-
-  minizlib@3.0.2:
-    dependencies:
-      minipass: 7.1.2
-
   mkdirp@1.0.4: {}
 
-  mkdirp@3.0.1: {}
-
   mlly@1.7.4:
     dependencies:
       acorn: 8.14.1
@@ -16340,7 +16383,7 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier-plugin-tailwindcss@0.6.12(prettier@3.5.3):
+  prettier-plugin-tailwindcss@0.6.13(prettier@3.5.3):
     dependencies:
       prettier: 3.5.3
 
@@ -17285,13 +17328,11 @@ snapshots:
 
   tailwind-merge@1.14.0: {}
 
-  tailwind-merge@3.3.0: {}
-
-  tailwindcss-animate@1.0.7(tailwindcss@4.1.10):
+  tailwindcss-animate@1.0.7(tailwindcss@4.1.0):
     dependencies:
-      tailwindcss: 4.1.10
+      tailwindcss: 4.1.0
 
-  tailwindcss@4.1.10: {}
+  tailwindcss@4.1.0: {}
 
   tapable@2.2.2: {}
 
@@ -17319,15 +17360,6 @@ snapshots:
       fast-fifo: 1.3.2
       streamx: 2.22.0
 
-  tar@7.4.3:
-    dependencies:
-      '@isaacs/fs-minipass': 4.0.1
-      chownr: 3.0.0
-      minipass: 7.1.2
-      minizlib: 3.0.2
-      mkdirp: 3.0.1
-      yallist: 5.0.0
-
   tcp-port-used@1.0.2:
     dependencies:
       debug: 4.3.1
@@ -17508,6 +17540,8 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
+  tw-animate-css@1.3.4: {}
+
   tweetnacl@0.14.5: {}
 
   typanion@3.14.0: {}
@@ -18157,8 +18191,6 @@ snapshots:
 
   yallist@4.0.0: {}
 
-  yallist@5.0.0: {}
-
   yaml@1.10.2: {}
 
   yaml@2.8.0: {}

From b3684b00370b37304f20f021784a2af760f92015 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Sat, 19 Jul 2025 15:46:41 +0200
Subject: [PATCH 03/42] fix: global css using @source

---
 apps/website/src/global.css | 2635 +++++++++++++++++------------------
 1 file changed, 1279 insertions(+), 1356 deletions(-)

diff --git a/apps/website/src/global.css b/apps/website/src/global.css
index a6aa5b3a8..1652be81f 100644
--- a/apps/website/src/global.css
+++ b/apps/website/src/global.css
@@ -1,1418 +1,1341 @@
+@layer base, theme, components, utilities;
+
 @import 'tailwindcss';
 
-@config '../tailwind.config.cjs';
+@source "../../../packages/kit-styled";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: white;
+  --foreground: var(--color-slate-900);
+  --muted: var(--color-slate-100);
+  --muted-foreground: var(--color-slate-700);
+  --popover: white;
+  --popover-foreground: var(--color-slate-900);
+  --card: white;
+  --card-foreground: var(--color-slate-900);
+  --border: var(--color-slate-200);
+  --input: var(--color-slate-200);
+  --primary: hsl(197 98% 52%);
+  --primary-foreground: black;
+  --secondary: hsl(266 96% 74%);
+  --secondary-foreground: black;
+  --accent: var(--color-slate-100);
+  --accent-foreground: var(--color-slate-900);
+  --alert: var(--color-red-500);
+  --alert-foreground: var(--color-slate-50);
+  --ring: var(--color-slate-900);
+  --border-radius: 0.5rem;
+}
 
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
+.dark {
+  --background: var(--color-slate-950);
+  --foreground: var(--color-slate-50);
+  --muted: var(--color-slate-800);
+  --muted-foreground: var(--color-slate-300);
+  --popover: var(--color-slate-950);
+  --popover-foreground: var(--color-slate-50);
+  --card: var(--color-slate-950);
+  --card-foreground: var(--color-slate-50);
+  --border: var(--color-slate-800);
+  --input: var(--color-slate-800);
+  --primary: hsl(197 98% 52%);
+  --primary-foreground: black;
+  --secondary: hsl(266 96% 74%);
+  --secondary-foreground: black;
+  --accent: var(--color-slate-700);
+  --accent-foreground: var(--color-slate-50);
+  --alert: var(--color-red-500);
+  --alert-foreground: var(--color-slate-50);
+  --ring: var(--color-slate-300);
+  --border-radius: 0.5rem;
+}
 
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
+.border-radius-0 {
+  --border-radius: 0rem;
 }
 
-@utility accordion-animation-1 {
-  &[data-open] {
-    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards
-      accordion-open;
-  }
+.border-radius-dot-25 {
+  --border-radius: 0.25rem;
+}
 
-  &[data-closed] {
-    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards
-      accordion-close;
-  }
+.border-radius-dot-50 {
+  --border-radius: 0.5rem;
 }
 
-/* Not used yet - could be used for the colored text on the landing page when the make-it-yours color is too bright in light mode or too dim in dark mode */
-@utility text-outlined {
-  @apply [text-shadow:-1px_0_#777,0_1px_#777,1px_0_#777,0_-1px_#777] dark:[text-shadow:-1px_0_#ccc,0_1px_#ccc,1px_0_#ccc,0_-1px_#ccc];
+.border-radius-dot-75 {
+  --border-radius: 0.75rem;
 }
 
-@layer base {
-  :root {
-    --border-width: 0px;
-    --stroke-width: 0px;
-    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
-    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
-  }
+.border-radius-1 {
+  --border-radius: 1rem;
+}
 
-  .light {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --primary: 197 98% 52%;
-    --primary-foreground: 187 0% 0%;
-    --secondary: 266 96% 74%;
-    --secondary-foreground: 287 0% 0%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 40% 98%;
-    --ring: 222.2 47.4% 11.2%;
-  }
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-alert: var(--alert);
+  --color-alert-foreground: var(--alert-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-none: 0rem;
+  --radius-xs: calc(var(--border-radius) + 0.125rem);
+  --radius-sm: calc(var(--border-radius) + 0.25rem);
+  --radius-md: calc(var(--border-radius) + 0.375rem);
+  --radius-lg: calc(var(--border-radius) + 0.5rem);
+  --radius-xl: calc(var(--border-radius) + 0.75rem);
+  --radius-2xl: calc(var(--border-radius) + 1rem);
+  --radius-3xl: calc(var(--border-radius) + 1.5rem);
+  --default-border-width: var(--border-width-base);
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+  --inset-shadow-2xs: var(--inset-shadow-2xs);
+  --inset-shadow-xs: var(--inset-shadow-xs);
+  --inset-shadow-sm: var(--inset-shadow-sm);
+  --drop-shadow-xs: var(--drop-shadow-xs);
+  --drop-shadow-sm: var(--drop-shadow-sm);
+  --drop-shadow-md: var(--drop-shadow-md);
+  --drop-shadow-lg: var(--drop-shadow-lg);
+  --drop-shadow-xl: var(--drop-shadow-xl);
+  --drop-shadow-2xl: var(--drop-shadow-2xl);
+}
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --primary: 197 98% 52%;
-    --primary-foreground: 196 0% 0%;
-    --secondary: 266 96% 74%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 40% 98%;
-    --ring: 212.7 26.8% 83.9;
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
   }
-
-  /* CSS PARSER: START - DO NOT REMOVE */
-  .simple {
-    --border-width: 0px;
-    --stroke-width: 0px;
-    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
-    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
-    --transform-press: scale(0.95);
+  body {
+    @apply bg-background font-sans text-foreground;
   }
 
-  .brutalist.brutalist {
-    --border-width: 2px;
-    --stroke-width: 2px;
-    --border: 0 0% 0%;
-    --input: 0 0% 0%;
-    --ring: 0 0% 0%;
-    --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1);
-    --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1);
-    --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-inner: inset 2px 2px 0px 0px rgba(0, 0, 0, 0);
-    --transform-press: translate(4px, 4px);
+  p code {
+    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
   }
 
-  .dark.brutalist.brutalist {
-    --border-width: 2px;
-    --stroke-width: 2px;
-    --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1);
-    --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1);
-    --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
-    --transform-press: translate(4px, 4px);
+  pre code {
+    @apply whitespace-pre-wrap;
   }
+}
 
-  .neumorphic.neumorphic {
-    --border-width: 0px;
-    --stroke-width: 0px;
-    --background: 0 0 88%;
-    --foreground: 240 5.9% 10%;
-    --popover: 0 0 88%;
-    --popover-foreground: 240 5.9% 10%;
-    --card: 0 0 88%;
-    --card-foreground: 240 5.9% 10%;
-    --border: 0 0% 80.2%;
-    --ring: 0 0% 80.2%;
-    --input: 0 0% 80.2%;
-    --shadow-base:
-      -3px -3px 6px #bebebe, 3px 3px 6px #ffffff,
-      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
-      inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-sm:
-      3px 3px 6px #bebebe, -3px -3px 6px #ffffff,
-      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
-      inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow:
-      4px 4px 8px #bebebe, -4px -4px 8px #ffffff,
-      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
-      inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-md:
-      5px 5px 10px #bebebe, -5px -5px 10px #ffffff,
-      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
-      inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-lg:
-      6px 6px 12px #bebebe, -6px -6px 12px #ffffff,
-      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
-      inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-xl:
-      8px 8px 15px #bebebe, -8px -8px 15px #ffffff,
-      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
-      inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-2xl:
-      10px 10px 20px #bebebe, -10px -10px 20px #ffffff,
-      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
-      inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-inner: inset 4px 4px 8px #bebebe, inset -2px -2px 4px #ffffff;
-    --transform-press: scale(0.95);
+@layer components {
+  * {
+    @apply border-border outline-ring/50;
   }
-
-  .dark.neumorphic.neumorphic {
-    --border-width: 0px;
-    --stroke-width: 0px;
-    --background: 240 5.3% 26.1%;
-    --foreground: 240 5.9% 90%;
-    --popover: 240 5.3% 26.1%;
-    --popover-foreground: 240 5.9% 90%;
-    --card: 240 5.3% 26.1%;
-    --card-foreground: 240 5.9% 90%;
-    --border: 240 5.9% 20%;
-    --ring: 240 5.9% 20%;
-    --input: 240 5.9% 20%;
-    --shadow-base:
-      -3px -3px 6px #2c2c31, 3px 3px 6px #52525b, inset 1px 1px 2px #2c2c31,
-      inset -1px -1px 2px #52525b;
-    --shadow-sm:
-      3px 3px 6px #2c2c31, -3px -3px 6px #52525b, inset 1px 1px 2px #2c2c31,
-      inset -1px -1px 2px #52525b;
-    --shadow:
-      4px 4px 8px #2c2c31, -4px -4px 8px #52525b, inset 1px 1px 2px #2c2c31,
-      inset -1px -1px 2px #52525b;
-    --shadow-md:
-      5px 5px 10px #2c2c31, -5px -5px 10px #52525b, inset 1px 1px 2px #2c2c31,
-      inset -1px -1px 2px #52525b;
-    --shadow-lg:
-      6px 6px 12px #2c2c31, -6px -6px 12px #52525b, inset 1px 1px 2px #2c2c31,
-      inset -1px -1px 2px #52525b;
-    --shadow-xl:
-      8px 8px 15px #2c2c31, -8px -8px 15px #52525b, inset 1px 1px 2px #2c2c31,
-      inset -1px -1px 2px #52525b;
-    --shadow-2xl:
-      10px 10px 20px #2c2c31, -10px -10px 20px #52525b, inset 1px 1px 2px #2c2c31,
-      inset -1px -1px 2px #52525b;
-    --shadow-inner: inset 2px 2px 4px #2c2c31, inset -2px -2px 4px #52525b;
-    --transform-press: scale(0.95);
+  body {
+    @apply bg-background font-sans text-foreground;
   }
+}
 
-  .border-radius-0 {
-    --border-radius: 0;
-  }
+/* @utility underline {
+} */
+
+/* CSS PARSER: START - DO NOT REMOVE */
+.simple {
+  --border-width-base: 1px;
+  --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+  --transform-press: scale(0.95);
+}
 
-  .border-radius-dot-25 {
-    --border-radius: 0.25rem;
-  }
+.brutalist.brutalist {
+  --border-width-base: 3px;
+  --stroke-width: 2px;
+  --border: black;
+  --input: black;
+  --ring: black;
+  --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
+  --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
+  --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
+  --shadow: 5px 5px rgba(0, 0, 0, 1);
+  --shadow-md: 6px 6px rgba(0, 0, 0, 1);
+  --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
+  --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
+  --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+  --inset-shadow-2xs: inset -1px -1px rgba(0, 0, 0, 1);
+  --inset-shadow-xs: inset -2px -2px rgba(0, 0, 0, 1);
+  --inset-shadow-sm: inset -3px -3px rgba(0, 0, 0, 1);
+  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.5);
+  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
+  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.5);
+  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.5);
+  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 1);
+  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 1);
+  --transform-press: translate(4px, 4px);
+}
 
-  .border-radius-dot-50 {
-    --border-radius: 0.5rem;
-  }
+.dark.brutalist.brutalist {
+  --border-width-base: 3px;
+  --stroke-width: 2px;
+  --underline: 2px;
+  --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
+  --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
+  --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
+  --shadow: 5px 5px rgba(0, 0, 0, 1);
+  --shadow-md: 6px 6px rgba(0, 0, 0, 1);
+  --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
+  --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
+  --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+  --inset-shadow-2xs: inset -1px -1px rgba(0, 0, 0, 1);
+  --inset-shadow-xs: inset -2px -2px rgba(0, 0, 0, 1);
+  --inset-shadow-sm: inset -3px -3px rgba(0, 0, 0, 1);
+  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.5);
+  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
+  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.5);
+  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.5);
+  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 1);
+  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 1);
+  --transform-press: translate(4px, 4px);
+}
 
-  .border-radius-dot-75 {
-    --border-radius: 0.75rem;
-  }
+.neumorphic.neumorphic {
+  --border-width-base: 0px;
+  --stroke-width: 0px;
+  --background: hsl(0 0 88%);
+  --foreground: var(--color-zinc-900);
+  --popover: hsl(0 0 88%);
+  --popover-foreground: var(--color-zinc-900);
+  --card: hsl(0 0 88%);
+  --card-foreground: var(--color-zinc-900);
+  --border: hsl(0 0% 80.2%);
+  --ring: hsl(0 0% 80.2%);
+  --input: hsl(0 0% 80.2%);
+  --shadow-base:
+    -3px -3px 6px #bebebe, 3px 3px 6px #ffffff,
+    inset 1px 1px 2px rgba(190, 190, 190, 0.5),
+    inset -1px -1px 2px rgba(255, 255, 255, 0.5);
+  --shadow-sm:
+    3px 3px 6px #bebebe, -3px -3px 6px #ffffff,
+    inset 1px 1px 2px rgba(190, 190, 190, 0.5),
+    inset -1px -1px 2px rgba(255, 255, 255, 0.5);
+  --shadow:
+    4px 4px 8px #bebebe, -4px -4px 8px #ffffff,
+    inset 1px 1px 2px rgba(190, 190, 190, 0.5),
+    inset -1px -1px 2px rgba(255, 255, 255, 0.5);
+  --shadow-md:
+    5px 5px 10px #bebebe, -5px -5px 10px #ffffff,
+    inset 1px 1px 2px rgba(190, 190, 190, 0.5),
+    inset -1px -1px 2px rgba(255, 255, 255, 0.5);
+  --shadow-lg:
+    6px 6px 12px #bebebe, -6px -6px 12px #ffffff,
+    inset 1px 1px 2px rgba(190, 190, 190, 0.5),
+    inset -1px -1px 2px rgba(255, 255, 255, 0.5);
+  --shadow-xl:
+    8px 8px 15px #bebebe, -8px -8px 15px #ffffff,
+    inset 1px 1px 2px rgba(190, 190, 190, 0.5),
+    inset -1px -1px 2px rgba(255, 255, 255, 0.5);
+  --shadow-2xl:
+    10px 10px 20px #bebebe, -10px -10px 20px #ffffff,
+    inset 1px 1px 2px rgba(190, 190, 190, 0.5),
+    inset -1px -1px 2px rgba(255, 255, 255, 0.5);
+  --shadow-inner: inset 4px 4px 8px #bebebe, inset -2px -2px 4px #ffffff;
+  --transform-press: scale(0.95);
+}
 
-  .border-radius-1 {
-    --border-radius: 1rem;
-  }
+.dark.neumorphic.neumorphic {
+  --border-width-base: 0px;
+  --stroke-width: 0px;
+  --background: var(--color-zinc-700);
+  --foreground: var(--color-zinc-200);
+  --popover: var(--color-zinc-700);
+  --popover-foreground: var(--color-zinc-200);
+  --card: var(--color-zinc-700);
+  --card-foreground: var(--color-zinc-200);
+  --border: hsl(240 5.9% 20%);
+  --ring: hsl(240 5.9% 20%);
+  --input: hsl(240 5.9% 20%);
+  --shadow-base:
+    -3px -3px 6px #2c2c31, 3px 3px 6px #52525b, inset 1px 1px 2px #2c2c31,
+    inset -1px -1px 2px #52525b;
+  --shadow-sm:
+    3px 3px 6px #2c2c31, -3px -3px 6px #52525b, inset 1px 1px 2px #2c2c31,
+    inset -1px -1px 2px #52525b;
+  --shadow:
+    4px 4px 8px #2c2c31, -4px -4px 8px #52525b, inset 1px 1px 2px #2c2c31,
+    inset -1px -1px 2px #52525b;
+  --shadow-md:
+    5px 5px 10px #2c2c31, -5px -5px 10px #52525b, inset 1px 1px 2px #2c2c31,
+    inset -1px -1px 2px #52525b;
+  --shadow-lg:
+    6px 6px 12px #2c2c31, -6px -6px 12px #52525b, inset 1px 1px 2px #2c2c31,
+    inset -1px -1px 2px #52525b;
+  --shadow-xl:
+    8px 8px 15px #2c2c31, -8px -8px 15px #52525b, inset 1px 1px 2px #2c2c31,
+    inset -1px -1px 2px #52525b;
+  --shadow-2xl:
+    10px 10px 20px #2c2c31, -10px -10px 20px #52525b, inset 1px 1px 2px #2c2c31,
+    inset -1px -1px 2px #52525b;
+  --shadow-inner: inset 2px 2px 4px #2c2c31, inset -2px -2px 4px #52525b;
+  --transform-press: scale(0.95);
+}
 
-  /* use colors from colors.ts */
+/* use colors from colors.ts */
+
+.base-slate {
+  --background: white;
+  --foreground: var(--color-slate-950);
+  --muted: var(--color-slate-100);
+  --muted-foreground: var(--color-slate-700);
+  --popover: white;
+  --popover-foreground: var(--color-slate-900);
+  --card: white;
+  --card-foreground: var(--color-slate-900);
+  --border: var(--color-slate-200);
+  --input: var(--color-slate-200);
+  --secondary: var(--color-slate-900);
+  --secondary-foreground: white;
+  --accent: var(--color-slate-100);
+  --accent-foreground: var(--color-slate-900);
+  --alert: var(--color-red-500);
+  --alert-foreground: var(--color-slate-50);
+  --ring: var(--color-slate-900);
+}
+.dark.base-slate {
+  --background: var(--color-slate-950);
+  --foreground: var(--color-slate-50);
+  --muted: var(--color-slate-800);
+  --muted-foreground: var(--color-slate-300);
+  --popover: var(--color-slate-950);
+  --popover-foreground: var(--color-slate-50);
+  --card: var(--color-slate-950);
+  --card-foreground: var(--color-slate-50);
+  --border: var(--color-slate-800);
+  --input: var(--color-slate-800);
+  --secondary: var(--color-slate-100);
+  --secondary-foreground: black;
+  --accent: var(--color-slate-700);
+  --accent-foreground: var(--color-slate-50);
+  --alert: var(--color-red-500);
+  --alert-foreground: var(--color-slate-50);
+  --ring: var(--color-slate-300);
+}
 
-  .base-slate {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 40% 98%;
-    --ring: 222.2 47.4% 11.2%;
-  }
-  .dark.base-slate {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 40% 98%;
-    --ring: 212.7 26.8% 83.9;
-  }
+.base-gray {
+  --background: white;
+  --foreground: var(--color-gray-950);
+  --muted: var(--color-gray-100);
+  --muted-foreground: var(--color-gray-700);
+  --popover: white;
+  --popover-foreground: var(--color-gray-950);
+  --card: white;
+  --card-foreground: var(--color-gray-950);
+  --border: var(--color-gray-200);
+  --input: var(--color-gray-200);
+  --secondary: var(--color-gray-950);
+  --secondary-foreground: white;
+  --accent: var(--color-gray-100);
+  --accent-foreground: var(--color-gray-950);
+  --alert: var(--color-red-500);
+  --alert-foreground: var(--color-gray-50);
+  --ring: var(--color-gray-950);
+}
+.dark.base-gray {
+  --background: var(--color-gray-950);
+  --foreground: var(--color-gray-50);
+  --muted: var(--color-gray-800);
+  --muted-foreground: var(--color-gray-300);
+  --popover: var(--color-gray-950);
+  --popover-foreground: var(--color-gray-50);
+  --card: var(--color-gray-950);
+  --card-foreground: var(--color-gray-50);
+  --border: var(--color-gray-800);
+  --input: var(--color-gray-800);
+  --secondary: var(--color-gray-100);
+  --secondary-foreground: black;
+  --accent: var(--color-gray-700);
+  --accent-foreground: var(--color-gray-50);
+  --alert: var(--color-red-500);
+  --alert-foreground: var(--color-gray-50);
+  --ring: var(--color-gray-300);
+}
 
-  .base-gray {
-    --background: 0 0% 100%;
-    --foreground: 220.9 39.3% 11%;
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 220.9 39.3% 11%;
-    --card: 0 0% 100%;
-    --card-foreground: 220.9 39.3% 11%;
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
-    --secondary: 220.9 39.3% 11%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 20% 98%;
-    --ring: 220.9 39.3% 11%;
-  }
-  .dark.base-gray {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 20% 98%;
-    --ring: 216 12.2% 83.9%;
-  }
+.base-zinc {
+  --background: white;
+  --foreground: var(--color-zinc-900);
+  --muted: var(--color-zinc-100);
+  --muted-foreground: var(--color-zinc-700);
+  --popover: white;
+  --popover-foreground: var(--color-zinc-900);
+  --card: white;
+  --card-foreground: var(--color-zinc-900);
+  --border: var(--color-zinc-200);
+  --input: var(--color-zinc-200);
+  --secondary: var(--color-zinc-900);
+  --secondary-foreground: white;
+  --accent: var(--color-zinc-100);
+  --accent-foreground: var(--color-zinc-900);
+  --alert: var(--color-red-500);
+  --alert-foreground: var(--color-zinc-50);
+  --ring: var(--color-zinc-900);
+}
+.dark.base-zinc {
+  --background: var(--color-zinc-950);
+  --foreground: var(--color-zinc-50);
+  --muted: var(--color-zinc-800);
+  --muted-foreground: var(--color-zinc-300);
+  --popover: var(--color-zinc-950);
+  --popover-foreground: var(--color-zinc-50);
+  --card: var(--color-zinc-950);
+  --card-foreground: var(--color-zinc-50);
+  --border: var(--color-zinc-800);
+  --input: var(--color-zinc-800);
+  --secondary: var(--color-zinc-100);
+  --secondary-foreground: black;
+  --accent: var(--color-zinc-700);
+  --accent-foreground: var(--color-zinc-50);
+  --alert: var(--color-red-500);
+  --alert-foreground: var(--color-zinc-50);
+  --ring: var(--color-zinc-300);
+}
 
-  .base-zinc {
-    --background: 0 0% 100%;
-    --foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 5.9% 10%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 5.9% 10%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --secondary: 240 5.9% 10%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 240 5.9% 10%;
-  }
-  .dark.base-zinc {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 240 4.9% 83.9%;
-  }
+.base-neutral {
+  --background: white;
+  --foreground: var(--color-neutral-900);
+  --muted: var(--color-neutral-100);
+  --muted-foreground: var(--color-neutral-700);
+  --popover: white;
+  --popover-foreground: var(--color-neutral-900);
+  --card: white;
+  --card-foreground: var(--color-neutral-900);
+  --border: var(--color-neutral-200);
+  --input: var(--color-neutral-200);
+  --secondary: var(--color-neutral-900);
+  --secondary-foreground: white;
+  --accent: var(--color-neutral-100);
+  --accent-foreground: var(--color-neutral-900);
+  --alert: var(--color-red-500);
+  --alert-foreground: var(--color-neutral-50);
+  --ring: var(--color-neutral-900);
+}
+.dark.base-neutral {
+  --background: var(--color-neutral-950);
+  --foreground: var(--color-neutral-50);
+  --muted: var(--color-neutral-800);
+  --muted-foreground: var(--color-neutral-300);
+  --popover: var(--color-neutral-950);
+  --popover-foreground: var(--color-neutral-50);
+  --card: var(--color-neutral-950);
+  --card-foreground: var(--color-neutral-50);
+  --border: var(--color-neutral-800);
+  --input: var(--color-neutral-800);
+  --secondary: var(--color-neutral-100);
+  --secondary-foreground: black;
+  --accent: var(--color-neutral-700);
+  --accent-foreground: var(--color-neutral-50);
+  --alert: var(--color-red-500);
+  --alert-foreground: var(--color-neutral-50);
+  --ring: var(--color-neutral-300);
+}
 
-  .base-neutral {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 9%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --secondary: 0 0% 9%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 0 0% 9%;
-  }
-  .dark.base-neutral {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 0 0% 83.1%;
-  }
+.base-stone {
+  --background: white;
+  --foreground: var(--color-stone-900);
+  --muted: var(--color-stone-100);
+  --muted-foreground: var(--color-stone-700);
+  --popover: white;
+  --popover-foreground: var(--color-stone-900);
+  --card: white;
+  --card-foreground: var(--color-stone-900);
+  --border: var(--color-stone-200);
+  --input: var(--color-stone-200);
+  --secondary: var(--color-stone-900);
+  --secondary-foreground: white;
+  --accent: var(--color-stone-100);
+  --accent-foreground: var(--color-stone-900);
+  --alert: var(--color-red-500);
+  --alert-foreground: var(--color-stone-50);
+  --ring: var(--color-stone-900);
+}
+.dark.base-stone {
+  --background: var(--color-stone-950);
+  --foreground: var(--color-stone-50);
+  --muted: var(--color-stone-800);
+  --muted-foreground: var(--color-stone-300);
+  --popover: var(--color-stone-950);
+  --popover-foreground: var(--color-stone-50);
+  --card: var(--color-stone-950);
+  --card-foreground: var(--color-stone-50);
+  --border: var(--color-stone-800);
+  --input: var(--color-stone-800);
+  --secondary: var(--color-stone-100);
+  --secondary-foreground: black;
+  --accent: var(--color-stone-700);
+  --accent-foreground: var(--color-stone-50);
+  --alert: var(--color-red-500);
+  --alert-foreground: var(--color-stone-50);
+  --ring: var(--color-stone-300);
+}
 
-  .base-stone {
-    --background: 0 0% 100%;
-    --foreground: 24 9.8% 10%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 24 9.8% 10%;
-    --card: 0 0% 100%;
-    --card-foreground: 24 9.8% 10%;
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --secondary: 24 9.8% 10%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 60 9.1% 97.8%;
-    --ring: 24 9.8% 10%;
-  }
-  .dark.base-stone {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 24 5.7% 82.9%;
-  }
+.primary-slate-100,
+.dark.primary-slate-900 {
+  --primary: var(--color-slate-100);
+  --primary-foreground: black;
+}
+.primary-slate-200,
+.dark.primary-slate-800 {
+  --primary: var(--color-slate-200);
+  --primary-foreground: black;
+}
+.primary-slate-300 {
+  --primary: var(--color-slate-300);
+  --primary-foreground: black;
+}
+.primary-slate-400 {
+  --primary: var(--color-slate-400);
+  --primary-foreground: black;
+}
+.primary-slate-500 {
+  --primary: var(--color-slate-500);
+  --primary-foreground: white;
+}
+.primary-slate-600 {
+  --primary: var(--color-slate-600);
+  --primary-foreground: white;
+}
+.primary-slate-700 {
+  --primary: var(--color-slate-700);
+  --primary-foreground: white;
+}
+.primary-slate-800 {
+  --primary: var(--color-slate-800);
+  --primary-foreground: white;
+}
+.primary-slate-900 {
+  --primary: var(--color-slate-900);
+  --primary-foreground: white;
+}
 
-  .primary-slate-100,
-  .dark.primary-slate-900 {
-    --primary: 210 40% 96.1%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-slate-200,
-  .dark.primary-slate-800 {
-    --primary: 214.3 31.8% 91.4%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-slate-300 {
-    --primary: 212.7 26.8% 83.9%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-slate-400 {
-    --primary: 215 20.2% 65.1%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-slate-500 {
-    --primary: 215.4 16.3% 46.9%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-slate-600 {
-    --primary: 215.3 19.3% 34.5%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-slate-700 {
-    --primary: 215.3 25% 26.7%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-slate-800 {
-    --primary: 217.2 32.6% 17.5%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-slate-900 {
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 0 0% 100%;
-  }
+.primary-gray-100,
+.dark.primary-gray-900 {
+  --primary: var(--color-gray-100);
+  --primary-foreground: black;
+}
+.primary-gray-200,
+.dark.primary-gray-800 {
+  --primary: var(--color-gray-200);
+  --primary-foreground: black;
+}
+.primary-gray-300 {
+  --primary: var(--color-gray-300);
+  --primary-foreground: black;
+}
+.primary-gray-400 {
+  --primary: var(--color-gray-400);
+  --primary-foreground: black;
+}
+.primary-gray-500 {
+  --primary: var(--color-gray-500);
+  --primary-foreground: white;
+}
+.primary-gray-600 {
+  --primary: var(--color-gray-600);
+  --primary-foreground: white;
+}
+.primary-gray-700 {
+  --primary: var(--color-gray-700);
+  --primary-foreground: white;
+}
+.primary-gray-800 {
+  --primary: var(--color-gray-800);
+  --primary-foreground: white;
+}
+.primary-gray-900 {
+  --primary: var(--color-gray-950);
+  --primary-foreground: white;
+}
 
-  .primary-gray-100,
-  .dark.primary-gray-900 {
-    --primary: 220 14.3% 95.9%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-gray-200,
-  .dark.primary-gray-800 {
-    --primary: 220 13% 91%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-gray-300 {
-    --primary: 216 12.2% 83.9%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-gray-400 {
-    --primary: 217.9 10.6% 64.9%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-gray-500 {
-    --primary: 220 8.9% 46.1%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-gray-600 {
-    --primary: 215 13.8% 34.1%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-gray-700 {
-    --primary: 216.9 19.1% 26.7%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-gray-800 {
-    --primary: 215 27.9% 16.9%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-gray-900 {
-    --primary: 220.9 39.3% 11%;
-    --primary-foreground: 0 0% 100%;
-  }
+.primary-zinc-100,
+.dark.primary-zinc-900 {
+  --primary: var(--color-zinc-100);
+  --primary-foreground: black;
+}
+.primary-zinc-200,
+.dark.primary-zinc-800 {
+  --primary: var(--color-zinc-200);
+  --primary-foreground: black;
+}
+.primary-zinc-300 {
+  --primary: var(--color-zinc-300);
+  --primary-foreground: black;
+}
+.primary-zinc-400 {
+  --primary: var(--color-zinc-400);
+  --primary-foreground: black;
+}
+.primary-zinc-500 {
+  --primary: var(--color-zinc-500);
+  --primary-foreground: white;
+}
+.primary-zinc-600 {
+  --primary: var(--color-zinc-600);
+  --primary-foreground: white;
+}
+.primary-zinc-700 {
+  --primary: var(--color-zinc-700);
+  --primary-foreground: white;
+}
+.primary-zinc-800 {
+  --primary: var(--color-zinc-800);
+  --primary-foreground: white;
+}
+.primary-zinc-900 {
+  --primary: var(--color-zinc-900);
+  --primary-foreground: white;
+}
 
-  .primary-zinc-100,
-  .dark.primary-zinc-900 {
-    --primary: 240 4.8% 95.9%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-zinc-200,
-  .dark.primary-zinc-800 {
-    --primary: 240 5.9% 90%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-zinc-300 {
-    --primary: 240 4.9% 83.9%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-zinc-400 {
-    --primary: 240 5% 64.9%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-zinc-500 {
-    --primary: 240 3.8% 46.1%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-zinc-600 {
-    --primary: 240 5.2% 33.9%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-zinc-700 {
-    --primary: 240 5.3% 26.1%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-zinc-800 {
-    --primary: 240 3.7% 15.9%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-zinc-900 {
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 100%;
-  }
+.primary-neutral-100,
+.dark.primary-neutral-900 {
+  --primary: var(--color-neutral-100);
+  --primary-foreground: black;
+}
+.primary-neutral-200,
+.dark.primary-neutral-800 {
+  --primary: var(--color-neutral-200);
+  --primary-foreground: black;
+}
+.primary-neutral-300 {
+  --primary: var(--color-neutral-300);
+  --primary-foreground: black;
+}
+.primary-neutral-400 {
+  --primary: var(--color-neutral-400);
+  --primary-foreground: black;
+}
+.primary-neutral-500 {
+  --primary: var(--color-neutral-500);
+  --primary-foreground: white;
+}
+.primary-neutral-600 {
+  --primary: var(--color-neutral-600);
+  --primary-foreground: white;
+}
+.primary-neutral-700 {
+  --primary: var(--color-neutral-700);
+  --primary-foreground: white;
+}
+.primary-neutral-800 {
+  --primary: var(--color-neutral-800);
+  --primary-foreground: white;
+}
+.primary-neutral-900 {
+  --primary: var(--color-neutral-900);
+  --primary-foreground: white;
+}
 
-  .primary-neutral-100,
-  .dark.primary-neutral-900 {
-    --primary: 0 0% 96.1%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-neutral-200,
-  .dark.primary-neutral-800 {
-    --primary: 0 0% 89.8%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-neutral-300 {
-    --primary: 0 0% 83.1%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-neutral-400 {
-    --primary: 0 0% 63.9%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-neutral-500 {
-    --primary: 0 0% 45.1%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-neutral-600 {
-    --primary: 0 0% 32.2%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-neutral-700 {
-    --primary: 0 0% 25.1%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-neutral-800 {
-    --primary: 0 0% 14.9%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-neutral-900 {
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 100%;
-  }
+.primary-stone-100,
+.dark.primary-stone-900 {
+  --primary: var(--color-stone-100);
+  --primary-foreground: black;
+}
+.primary-stone-200,
+.dark.primary-stone-800 {
+  --primary: var(--color-stone-200);
+  --primary-foreground: black;
+}
+.primary-stone-300 {
+  --primary: var(--color-stone-300);
+  --primary-foreground: black;
+}
+.primary-stone-400 {
+  --primary: var(--color-stone-400);
+  --primary-foreground: black;
+}
+.primary-stone-500 {
+  --primary: var(--color-stone-500);
+  --primary-foreground: white;
+}
+.primary-stone-600 {
+  --primary: var(--color-stone-600);
+  --primary-foreground: white;
+}
+.primary-stone-700 {
+  --primary: var(--color-stone-700);
+  --primary-foreground: white;
+}
+.primary-stone-800 {
+  --primary: var(--color-stone-800);
+  --primary-foreground: white;
+}
+.primary-stone-900 {
+  --primary: var(--color-stone-900);
+  --primary-foreground: white;
+}
 
-  .primary-stone-100,
-  .dark.primary-stone-900 {
-    --primary: 60 4.8% 95.9%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-stone-200,
-  .dark.primary-stone-800 {
-    --primary: 20 5.9% 90%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-stone-300 {
-    --primary: 24 5.7% 82.9%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-stone-400 {
-    --primary: 24 5.4% 63.9%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-stone-500 {
-    --primary: 25 5.3% 44.7%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-stone-600 {
-    --primary: 33.3 5.5% 32.4%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-stone-700 {
-    --primary: 30 6.3% 25.1%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-stone-800 {
-    --primary: 12 6.5% 15.1%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-stone-900 {
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 0 0% 100%;
-  }
+.primary-red-100 {
+  --primary: var(--color-red-100);
+  --primary-foreground: black;
+}
+.primary-red-200 {
+  --primary: var(--color-red-200);
+  --primary-foreground: black;
+}
+.primary-red-300 {
+  --primary: var(--color-red-300);
+  --primary-foreground: black;
+}
+.primary-red-400 {
+  --primary: var(--color-red-400);
+  --primary-foreground: black;
+}
+.primary-red-500 {
+  --primary: var(--color-red-500);
+  --primary-foreground: white;
+}
+.primary-red-600 {
+  --primary: var(--color-red-600);
+  --primary-foreground: white;
+}
+.primary-red-700 {
+  --primary: var(--color-red-700);
+  --primary-foreground: white;
+}
+.primary-red-800 {
+  --primary: var(--color-red-800);
+  --primary-foreground: white;
+}
+.primary-red-900 {
+  --primary: var(--color-red-900);
+  --primary-foreground: white;
+}
 
-  .primary-red-100 {
-    --primary: 0 93.3% 94.1%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-red-200 {
-    --primary: 0 96.3% 89.4%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-red-300 {
-    --primary: 0 93.5% 81.8%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-red-400 {
-    --primary: 0 90.6% 70.8%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-red-500 {
-    --primary: 0 84.2% 60.2%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-red-600 {
-    --primary: 0 72.2% 50.6%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-red-700 {
-    --primary: 0 73.7% 41.8%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-red-800 {
-    --primary: 0 70% 35.3%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-red-900 {
-    --primary: 0 62.8% 30.6%;
-    --primary-foreground: 0 0% 100%;
-  }
+.primary-orange-100 {
+  --primary: var(--color-orange-100);
+  --primary-foreground: black;
+}
+.primary-orange-200 {
+  --primary: var(--color-orange-200);
+  --primary-foreground: black;
+}
+.primary-orange-300 {
+  --primary: var(--color-orange-300);
+  --primary-foreground: black;
+}
+.primary-orange-400 {
+  --primary: var(--color-orange-400);
+  --primary-foreground: black;
+}
+.primary-orange-500 {
+  --primary: var(--color-orange-500);
+  --primary-foreground: black;
+}
+.primary-orange-600 {
+  --primary: var(--color-orange-600);
+  --primary-foreground: white;
+}
+.primary-orange-700 {
+  --primary: var(--color-orange-700);
+  --primary-foreground: white;
+}
+.primary-orange-800 {
+  --primary: var(--color-orange-800);
+  --primary-foreground: white;
+}
+.primary-orange-900 {
+  --primary: var(--color-orange-900);
+  --primary-foreground: white;
+}
 
-  .primary-orange-100 {
-    --primary: 34.3 100% 91.8%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-orange-200 {
-    --primary: 32.1 97.7% 83.1%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-orange-300 {
-    --primary: 30.7 97.2% 72.4%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-orange-400 {
-    --primary: 27 96% 61%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-orange-500 {
-    --primary: 24.6 95% 53.1%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-orange-600 {
-    --primary: 20.5 90.2% 48.2%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-orange-700 {
-    --primary: 17.5 88.3% 40.4%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-orange-800 {
-    --primary: 15 79.1% 33.7%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-orange-900 {
-    --primary: 15.3 74.6% 27.8%;
-    --primary-foreground: 0 0% 100%;
-  }
+.primary-amber-100 {
+  --primary: var(--color-amber-100);
+  --primary-foreground: black;
+}
+.primary-amber-200 {
+  --primary: var(--color-amber-200);
+  --primary-foreground: black;
+}
+.primary-amber-300 {
+  --primary: var(--color-amber-300);
+  --primary-foreground: black;
+}
+.primary-amber-400 {
+  --primary: var(--color-amber-400);
+  --primary-foreground: black;
+}
+.primary-amber-500 {
+  --primary: var(--color-amber-500);
+  --primary-foreground: black;
+}
+.primary-amber-600 {
+  --primary: var(--color-amber-600);
+  --primary-foreground: white;
+}
+.primary-amber-700 {
+  --primary: var(--color-amber-700);
+  --primary-foreground: white;
+}
+.primary-amber-800 {
+  --primary: var(--color-amber-800);
+  --primary-foreground: white;
+}
+.primary-amber-900 {
+  --primary: var(--color-amber-900);
+  --primary-foreground: white;
+}
 
-  .primary-amber-100 {
-    --primary: 48 96.5% 88.8%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-amber-200 {
-    --primary: 48 96.6% 76.7%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-amber-300 {
-    --primary: 45.9 96.7% 64.5%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-amber-400 {
-    --primary: 43.3 96.4% 56.3%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-amber-500 {
-    --primary: 37.7 92.1% 50.2%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-amber-600 {
-    --primary: 32.1 94.6% 43.7%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-amber-700 {
-    --primary: 26 90.5% 37.1%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-amber-800 {
-    --primary: 22.7 82.5% 31.4%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-amber-900 {
-    --primary: 21.7 77.8% 26.5%;
-    --primary-foreground: 0 0% 100%;
-  }
+.primary-yellow-100 {
+  --primary: var(--color-yellow-100);
+  --primary-foreground: black;
+}
+.primary-yellow-200 {
+  --primary: var(--color-yellow-200);
+  --primary-foreground: black;
+}
+.primary-yellow-300 {
+  --primary: var(--color-yellow-300);
+  --primary-foreground: black;
+}
+.primary-yellow-400 {
+  --primary: var(--color-yellow-400);
+  --primary-foreground: black;
+}
+.primary-yellow-500 {
+  --primary: var(--color-yellow-500);
+  --primary-foreground: black;
+}
+.primary-yellow-600 {
+  --primary: var(--color-yellow-600);
+  --primary-foreground: white;
+}
+.primary-yellow-700 {
+  --primary: var(--color-yellow-700);
+  --primary-foreground: white;
+}
+.primary-yellow-800 {
+  --primary: var(--color-yellow-800);
+  --primary-foreground: white;
+}
+.primary-yellow-900 {
+  --primary: var(--color-yellow-900);
+  --primary-foreground: white;
+}
 
-  .primary-yellow-100 {
-    --primary: 54.9 96.7% 88%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-yellow-200 {
-    --primary: 52.8 98.3% 76.9%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-yellow-300 {
-    --primary: 50.4 97.8% 63.5%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-yellow-400 {
-    --primary: 47.9 95.8% 53.1%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-yellow-500 {
-    --primary: 45.4 93.4% 47.5%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-yellow-600 {
-    --primary: 40.6 96.1% 39.4%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-yellow-700 {
-    --primary: 35.5 91.7% 32.9%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-yellow-800 {
-    --primary: 31.8 81% 28.8%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-yellow-900 {
-    --primary: 28.4 72.5% 25.7%;
-    --primary-foreground: 0 0% 100%;
-  }
+.primary-lime-100 {
+  --primary: var(--color-lime-100);
+  --primary-foreground: black;
+}
+.primary-lime-200 {
+  --primary: var(--color-lime-200);
+  --primary-foreground: black;
+}
+.primary-lime-300 {
+  --primary: var(--color-lime-300);
+  --primary-foreground: black;
+}
+.primary-lime-400 {
+  --primary: var(--color-lime-400);
+  --primary-foreground: black;
+}
+.primary-lime-500 {
+  --primary: var(--color-lime-500);
+  --primary-foreground: black;
+}
+.primary-lime-600 {
+  --primary: var(--color-lime-600);
+  --primary-foreground: white;
+}
+.primary-lime-700 {
+  --primary: var(--color-lime-700);
+  --primary-foreground: white;
+}
+.primary-lime-800 {
+  --primary: var(--color-lime-800);
+  --primary-foreground: white;
+}
+.primary-lime-900 {
+  --primary: var(--color-lime-900);
+  --primary-foreground: white;
+}
 
-  .primary-lime-100 {
-    --primary: 79.6 89.1% 89.2%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-lime-200 {
-    --primary: 80.9 88.5% 79.6%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-lime-300 {
-    --primary: 82 84.5% 67.1%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-lime-400 {
-    --primary: 82.7 78% 55.5%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-lime-500 {
-    --primary: 83.7 80.5% 44.3%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-lime-600 {
-    --primary: 84.8 85.2% 34.5%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-lime-700 {
-    --primary: 85.9 78.4% 27.3%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-lime-800 {
-    --primary: 86.3 69% 22.7%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-lime-900 {
-    --primary: 87.6 61.2% 20.2%;
-    --primary-foreground: 0 0% 100%;
-  }
+.primary-green-100 {
+  --primary: var(--color-green-100);
+  --primary-foreground: black;
+}
+.primary-green-200 {
+  --primary: var(--color-green-200);
+  --primary-foreground: black;
+}
+.primary-green-300 {
+  --primary: var(--color-green-300);
+  --primary-foreground: black;
+}
+.primary-green-400 {
+  --primary: var(--color-green-400);
+  --primary-foreground: black;
+}
+.primary-green-500 {
+  --primary: var(--color-green-500);
+  --primary-foreground: black;
+}
+.primary-green-600 {
+  --primary: var(--color-green-600);
+  --primary-foreground: white;
+}
+.primary-green-700 {
+  --primary: var(--color-green-700);
+  --primary-foreground: white;
+}
+.primary-green-800 {
+  --primary: var(--color-green-800);
+  --primary-foreground: white;
+}
+.primary-green-900 {
+  --primary: var(--color-green-900);
+  --primary-foreground: white;
+}
 
-  .primary-green-100 {
-    --primary: 140.6 84.2% 92.5%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-green-200 {
-    --primary: 141 78.9% 85.1%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-green-300 {
-    --primary: 141.7 76.6% 73.1%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-green-400 {
-    --primary: 141.9 69.2% 58%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-green-500 {
-    --primary: 142.1 70.6% 45.3%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-green-600 {
-    --primary: 142.1 76.2% 36.3%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-green-700 {
-    --primary: 142.4 71.8% 29.2%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-green-800 {
-    --primary: 142.8 64.2% 24.1%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-green-900 {
-    --primary: 143.8 61.2% 20.2%;
-    --primary-foreground: 0 0% 100%;
-  }
-
-  .primary-emerald-100 {
-    --primary: 149.3 80.4% 90%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-emerald-200 {
-    --primary: 152.4 76% 80.4%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-emerald-300 {
-    --primary: 156.2 71.6% 66.9%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-emerald-400 {
-    --primary: 158.1 64.4% 51.6%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-emerald-500 {
-    --primary: 160.1 84.1% 39.4%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-emerald-600 {
-    --primary: 161.4 93.5% 30.4%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-emerald-700 {
-    --primary: 162.9 93.5% 24.3%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-emerald-800 {
-    --primary: 163.1 88.1% 19.8%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-emerald-900 {
-    --primary: 164.2 85.7% 16.5%;
-    --primary-foreground: 0 0% 100%;
-  }
-
-  .primary-teal-100 {
-    --primary: 167.2 85.5% 89.2%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-teal-200 {
-    --primary: 168.4 83.8% 78.2%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-teal-300 {
-    --primary: 170.6 76.9% 64.3%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-teal-400 {
-    --primary: 172.5 66% 50.4%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-teal-500 {
-    --primary: 173.4 80.4% 40%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-teal-600 {
-    --primary: 174.7 83.9% 31.6%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-teal-700 {
-    --primary: 175.3 77.4% 26.1%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-teal-800 {
-    --primary: 176.1 69.4% 21.8%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-teal-900 {
-    --primary: 175.9 60.8% 19%;
-    --primary-foreground: 0 0% 100%;
-  }
-
-  .primary-cyan-100 {
-    --primary: 185.1 95.9% 90.4%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-cyan-200 {
-    --primary: 186.2 93.5% 81.8%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-cyan-300 {
-    --primary: 187 92.4% 69%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-cyan-400 {
-    --primary: 187.9 85.7% 53.3%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-cyan-500 {
-    --primary: 188.7 94.5% 42.7%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-cyan-600 {
-    --primary: 191.6 91.4% 36.5%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-cyan-700 {
-    --primary: 192.9 82.3% 31%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-cyan-800 {
-    --primary: 194.4 69.6% 27.1%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-cyan-900 {
-    --primary: 196.4 63.6% 23.7%;
-    --primary-foreground: 0 0% 100%;
-  }
-
-  .primary-sky-100 {
-    --primary: 204 93.8% 93.7%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-sky-200 {
-    --primary: 200.6 94.4% 86.1%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-sky-300 {
-    --primary: 199.4 95.5% 73.9%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-sky-400 {
-    --primary: 198.4 93.2% 59.6%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-sky-500 {
-    --primary: 198.6 88.7% 48.4%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-sky-600 {
-    --primary: 200.4 98% 39.4%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-sky-700 {
-    --primary: 201.3 96.3% 32.2%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-sky-800 {
-    --primary: 201 90% 27.5%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-sky-900 {
-    --primary: 202 80.3% 23.9%;
-    --primary-foreground: 0 0% 100%;
-  }
-
-  .primary-blue-100 {
-    --primary: 214.3 94.6% 92.7%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-blue-200 {
-    --primary: 213.3 96.9% 87.3%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-blue-300 {
-    --primary: 211.7 96.4% 78.4%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-blue-400 {
-    --primary: 213.1 93.9% 67.8%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-blue-500 {
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-blue-600 {
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-blue-700 {
-    --primary: 224.3 76.3% 48%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-blue-800 {
-    --primary: 225.9 70.7% 40.2%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-blue-900 {
-    --primary: 224.4 64.3% 32.9%;
-    --primary-foreground: 0 0% 100%;
-  }
-
-  .primary-indigo-100 {
-    --primary: 226.5 100% 93.9%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-indigo-200 {
-    --primary: 228 96.5% 88.8%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-indigo-300 {
-    --primary: 229.7 93.5% 81.8%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-indigo-400 {
-    --primary: 234.5 89.5% 73.9%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-indigo-500 {
-    --primary: 238.7 83.5% 66.7%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-indigo-600 {
-    --primary: 243.4 75.4% 58.6%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-indigo-700 {
-    --primary: 244.5 57.9% 50.6%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-indigo-800 {
-    --primary: 243.7 54.5% 41.4%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-indigo-900 {
-    --primary: 242.2 47.4% 34.3%;
-    --primary-foreground: 0 0% 100%;
-  }
-
-  .primary-violet-100 {
-    --primary: 251.4 91.3% 95.5%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-violet-200 {
-    --primary: 250.5 95.2% 91.8%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-violet-300 {
-    --primary: 252.5 94.7% 85.1%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-violet-400 {
-    --primary: 255.1 91.7% 76.3%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-violet-500 {
-    --primary: 258.3 89.5% 66.3%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-violet-600 {
-    --primary: 262.1 83.3% 57.8%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-violet-700 {
-    --primary: 263.4 70% 50.4%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-violet-800 {
-    --primary: 263.4 69.3% 42.2%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-violet-900 {
-    --primary: 263.5 67.4% 34.9%;
-    --primary-foreground: 0 0% 100%;
-  }
-
-  .primary-purple-100 {
-    --primary: 268.7 100% 95.5%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-purple-200 {
-    --primary: 268.6 100% 91.8%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-purple-300 {
-    --primary: 269.2 97.4% 85.1%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-purple-400 {
-    --primary: 270 95.2% 75.3%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-purple-500 {
-    --primary: 270.7 91% 65.1%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-purple-600 {
-    --primary: 271.5 81.3% 55.9%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-purple-700 {
-    --primary: 272.1 71.7% 47.1%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-purple-800 {
-    --primary: 272.9 67.2% 39.4%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-purple-900 {
-    --primary: 273.6 65.6% 32%;
-    --primary-foreground: 0 0% 100%;
-  }
-
-  .primary-fuchsia-100 {
-    --primary: 287 100% 95.5%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-fuchsia-200 {
-    --primary: 288.3 95.8% 90.6%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-fuchsia-300 {
-    --primary: 291.1 93.1% 82.9%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-fuchsia-400 {
-    --primary: 292 91.4% 72.5%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-fuchsia-500 {
-    --primary: 292.2 84.1% 60.6%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-fuchsia-600 {
-    --primary: 293.4 69.5% 48.8%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-fuchsia-700 {
-    --primary: 294.7 72.4% 39.8%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-fuchsia-800 {
-    --primary: 295.4 70.2% 32.9%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-fuchsia-900 {
-    --primary: 296.7 63.6% 28%;
-    --primary-foreground: 0 0% 100%;
-  }
-
-  .primary-pink-100 {
-    --primary: 325.7 77.8% 94.7%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-pink-200 {
-    --primary: 325.9 84.6% 89.8%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-pink-300 {
-    --primary: 327.4 87.1% 81.8%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-pink-400 {
-    --primary: 328.6 85.5% 70.2%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-pink-500 {
-    --primary: 330.4 81.2% 60.4%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-pink-600 {
-    --primary: 333.3 71.4% 50.6%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-pink-700 {
-    --primary: 335.1 77.6% 42%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-pink-800 {
-    --primary: 335.8 74.4% 35.3%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-pink-900 {
-    --primary: 335.9 69% 30.4%;
-    --primary-foreground: 0 0% 100%;
-  }
-
-  .primary-rose-100 {
-    --primary: 355.6 100% 94.7%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-rose-200 {
-    --primary: 352.7 96.1% 90%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-rose-300 {
-    --primary: 352.6 95.7% 81.8%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-rose-400 {
-    --primary: 351.3 94.5% 71.4%;
-    --primary-foreground: 0 0% 0%;
-  }
-  .primary-rose-500 {
-    --primary: 349.7 89.2% 60.2%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-rose-600 {
-    --primary: 346.8 77.2% 49.8%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-rose-700 {
-    --primary: 345.3 82.7% 40.8%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-rose-800 {
-    --primary: 343.4 79.7% 34.7%;
-    --primary-foreground: 0 0% 100%;
-  }
-  .primary-rose-900 {
-    --primary: 341.5 75.5% 30.4%;
-    --primary-foreground: 0 0% 100%;
-  }
-  /* CSS PARSER: END - DO NOT REMOVE */
+.primary-emerald-100 {
+  --primary: var(--color-emerald-100);
+  --primary-foreground: black;
+}
+.primary-emerald-200 {
+  --primary: var(--color-emerald-200);
+  --primary-foreground: black;
+}
+.primary-emerald-300 {
+  --primary: var(--color-emerald-300);
+  --primary-foreground: black;
+}
+.primary-emerald-400 {
+  --primary: var(--color-emerald-400);
+  --primary-foreground: black;
+}
+.primary-emerald-500 {
+  --primary: var(--color-emerald-500);
+  --primary-foreground: black;
+}
+.primary-emerald-600 {
+  --primary: var(--color-emerald-600);
+  --primary-foreground: white;
+}
+.primary-emerald-700 {
+  --primary: var(--color-emerald-700);
+  --primary-foreground: white;
+}
+.primary-emerald-800 {
+  --primary: var(--color-emerald-800);
+  --primary-foreground: white;
+}
+.primary-emerald-900 {
+  --primary: var(--color-emerald-900);
+  --primary-foreground: white;
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background font-sans text-foreground;
-  }
-
-  p code {
-    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
-  }
-
-  pre code {
-    @apply whitespace-pre-wrap;
-  }
-
-  *::-webkit-scrollbar {
-    background-color: transparent;
-    width: 1rem;
-    height: 1rem;
-  }
-
-  *::-webkit-scrollbar-thumb {
-    /* Thumb color */
-    background-color: hsla(var(--foreground) / 0.25);
-    border-radius: 0.4rem;
-    background-clip: padding-box;
-    border-left: 0.3rem solid transparent;
-    border-right: 0.3rem solid transparent;
-  }
-
-  .navigation-docs::-webkit-scrollbar-thumb {
-    background-color: hsla(var(--foreground) / 0.1);
-  }
-
-  .dark .navigation-docs::-webkit-scrollbar-thumb {
-    background-color: hsla(var(--foreground) / 0.2);
-  }
-
-  *::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-
-  *::-webkit-scrollbar-track {
-    background: transparent;
-    border-left: 0;
-  }
-
-  .toc-scrollbar::-webkit-scrollbar-track,
-  .dark .toc-scrollbar::-webkit-scrollbar-track {
-    border-color: transparent;
-  }
-
-  .toc-scrollbar::-webkit-scrollbar-thumb {
-    background-color: transparent;
-  }
-
-  .toc-scrollbar:hover.toc-scrollbar::-webkit-scrollbar-thumb {
-    background-color: hsla(var(--foreground) / 0.15);
-  }
-
-  .dark *::-webkit-scrollbar-track {
-    background: transparent;
-    border-left: 0;
-  }
+.primary-teal-100 {
+  --primary: var(--color-teal-100);
+  --primary-foreground: black;
+}
+.primary-teal-200 {
+  --primary: var(--color-teal-200);
+  --primary-foreground: black;
+}
+.primary-teal-300 {
+  --primary: var(--color-teal-300);
+  --primary-foreground: black;
+}
+.primary-teal-400 {
+  --primary: var(--color-teal-400);
+  --primary-foreground: black;
+}
+.primary-teal-500 {
+  --primary: var(--color-teal-500);
+  --primary-foreground: black;
+}
+.primary-teal-600 {
+  --primary: var(--color-teal-600);
+  --primary-foreground: white;
+}
+.primary-teal-700 {
+  --primary: var(--color-teal-700);
+  --primary-foreground: white;
+}
+.primary-teal-800 {
+  --primary: var(--color-teal-800);
+  --primary-foreground: white;
+}
+.primary-teal-900 {
+  --primary: var(--color-teal-900);
+  --primary-foreground: white;
+}
 
-  .code-example *::-webkit-scrollbar-track {
-    background: transparent;
-    border: 0px;
-  }
+.primary-cyan-100 {
+  --primary: var(--color-cyan-100);
+  --primary-foreground: black;
+}
+.primary-cyan-200 {
+  --primary: var(--color-cyan-200);
+  --primary-foreground: black;
+}
+.primary-cyan-300 {
+  --primary: var(--color-cyan-300);
+  --primary-foreground: black;
+}
+.primary-cyan-400 {
+  --primary: var(--color-cyan-400);
+  --primary-foreground: black;
+}
+.primary-cyan-500 {
+  --primary: var(--color-cyan-500);
+  --primary-foreground: black;
+}
+.primary-cyan-600 {
+  --primary: var(--color-cyan-600);
+  --primary-foreground: white;
+}
+.primary-cyan-700 {
+  --primary: var(--color-cyan-700);
+  --primary-foreground: white;
+}
+.primary-cyan-800 {
+  --primary: var(--color-cyan-800);
+  --primary-foreground: white;
+}
+.primary-cyan-900 {
+  --primary: var(--color-cyan-900);
+  --primary-foreground: white;
+}
 
-  .code-example *::-webkit-scrollbar-thumb {
-    background-color: var(--qwikui-slate-600);
-    border-radius: 0.5rem;
-    background-clip: padding-box;
-  }
+.primary-sky-100 {
+  --primary: var(--color-sky-100);
+  --primary-foreground: black;
+}
+.primary-sky-200 {
+  --primary: var(--color-sky-200);
+  --primary-foreground: black;
+}
+.primary-sky-300 {
+  --primary: var(--color-sky-300);
+  --primary-foreground: black;
+}
+.primary-sky-400 {
+  --primary: var(--color-sky-400);
+  --primary-foreground: black;
+}
+.primary-sky-500 {
+  --primary: var(--color-sky-500);
+  --primary-foreground: black;
+}
+.primary-sky-600 {
+  --primary: var(--color-sky-600);
+  --primary-foreground: white;
+}
+.primary-sky-700 {
+  --primary: var(--color-sky-700);
+  --primary-foreground: white;
+}
+.primary-sky-800 {
+  --primary: var(--color-sky-800);
+  --primary-foreground: white;
+}
+.primary-sky-900 {
+  --primary: var(--color-sky-900);
+  --primary-foreground: white;
+}
 
-  /* no horizontal overflow on code snippets */
-  .tab-size pre {
-    white-space: pre-wrap;
-    background: transparent !important;
-  }
+.primary-blue-100 {
+  --primary: var(--color-blue-100);
+  --primary-foreground: black;
+}
+.primary-blue-200 {
+  --primary: var(--color-blue-200);
+  --primary-foreground: black;
+}
+.primary-blue-300 {
+  --primary: var(--color-blue-300);
+  --primary-foreground: black;
+}
+.primary-blue-400 {
+  --primary: var(--color-blue-400);
+  --primary-foreground: black;
+}
+.primary-blue-500 {
+  --primary: var(--color-blue-500);
+  --primary-foreground: white;
+}
+.primary-blue-600 {
+  --primary: var(--color-blue-600);
+  --primary-foreground: white;
+}
+.primary-blue-700 {
+  --primary: var(--color-blue-700);
+  --primary-foreground: white;
+}
+.primary-blue-800 {
+  --primary: var(--color-blue-800);
+  --primary-foreground: white;
+}
+.primary-blue-900 {
+  --primary: var(--color-blue-900);
+  --primary-foreground: white;
+}
 
-  .note-link a {
-    border-bottom: 1px solid var(--qwikui-slate-950) !important;
-  }
+.primary-indigo-100 {
+  --primary: var(--color-indigo-100);
+  --primary-foreground: black;
+}
+.primary-indigo-200 {
+  --primary: var(--color-indigo-200);
+  --primary-foreground: black;
+}
+.primary-indigo-300 {
+  --primary: var(--color-indigo-300);
+  --primary-foreground: black;
+}
+.primary-indigo-400 {
+  --primary: var(--color-indigo-400);
+  --primary-foreground: black;
+}
+.primary-indigo-500 {
+  --primary: var(--color-indigo-500);
+  --primary-foreground: white;
+}
+.primary-indigo-600 {
+  --primary: var(--color-indigo-600);
+  --primary-foreground: white;
+}
+.primary-indigo-700 {
+  --primary: var(--color-indigo-700);
+  --primary-foreground: white;
+}
+.primary-indigo-800 {
+  --primary: var(--color-indigo-800);
+  --primary-foreground: white;
+}
+.primary-indigo-900 {
+  --primary: var(--color-indigo-900);
+  --primary-foreground: white;
+}
 
-  .dark .note-link a {
-    border-bottom: 1px solid white !important;
-  }
+.primary-violet-100 {
+  --primary: var(--color-violet-100);
+  --primary-foreground: black;
+}
+.primary-violet-200 {
+  --primary: var(--color-violet-200);
+  --primary-foreground: black;
+}
+.primary-violet-300 {
+  --primary: var(--color-violet-300);
+  --primary-foreground: black;
+}
+.primary-violet-400 {
+  --primary: var(--color-violet-400);
+  --primary-foreground: black;
+}
+.primary-violet-500 {
+  --primary: var(--color-violet-500);
+  --primary-foreground: white;
+}
+.primary-violet-600 {
+  --primary: var(--color-violet-600);
+  --primary-foreground: white;
+}
+.primary-violet-700 {
+  --primary: var(--color-violet-700);
+  --primary-foreground: white;
+}
+.primary-violet-800 {
+  --primary: var(--color-violet-800);
+  --primary-foreground: white;
+}
+.primary-violet-900 {
+  --primary: var(--color-violet-900);
+  --primary-foreground: white;
+}
 
-  .gif-container {
-    border-radius: var(--border-radius);
-  }
+.primary-purple-100 {
+  --primary: var(--color-purple-100);
+  --primary-foreground: black;
+}
+.primary-purple-200 {
+  --primary: var(--color-purple-200);
+  --primary-foreground: black;
+}
+.primary-purple-300 {
+  --primary: var(--color-purple-300);
+  --primary-foreground: black;
+}
+.primary-purple-400 {
+  --primary: var(--color-purple-400);
+  --primary-foreground: black;
+}
+.primary-purple-500 {
+  --primary: var(--color-purple-500);
+  --primary-foreground: white;
+}
+.primary-purple-600 {
+  --primary: var(--color-purple-600);
+  --primary-foreground: white;
+}
+.primary-purple-700 {
+  --primary: var(--color-purple-700);
+  --primary-foreground: white;
+}
+.primary-purple-800 {
+  --primary: var(--color-purple-800);
+  --primary-foreground: white;
+}
+.primary-purple-900 {
+  --primary: var(--color-purple-900);
+  --primary-foreground: white;
 }
 
-@layer utilities {
-  :root {
-    /* primary colors - try using primary and secondary instead */
-    --qwikui-purple-50: #f9f5ff;
-    --qwikui-purple-100: #f2e8ff;
-    --qwikui-purple-200: #e7d6fe;
-    --qwikui-purple-300: #d4b5fd;
-    --qwikui-purple-400: #b37bfa;
-    --qwikui-purple-500: #9f57f5;
-    --qwikui-purple-600: #8835e8;
-    --qwikui-purple-700: #7424cc;
-    --qwikui-purple-800: #6323a6;
-    --qwikui-purple-900: #521d86;
-    --qwikui-purple-950: #360863;
+.primary-fuchsia-100 {
+  --primary: var(--color-fuchsia-100);
+  --primary-foreground: black;
+}
+.primary-fuchsia-200 {
+  --primary: var(--color-fuchsia-200);
+  --primary-foreground: black;
+}
+.primary-fuchsia-300 {
+  --primary: var(--color-fuchsia-300);
+  --primary-foreground: black;
+}
+.primary-fuchsia-400 {
+  --primary: var(--color-fuchsia-400);
+  --primary-foreground: black;
+}
+.primary-fuchsia-500 {
+  --primary: var(--color-fuchsia-500);
+  --primary-foreground: white;
+}
+.primary-fuchsia-600 {
+  --primary: var(--color-fuchsia-600);
+  --primary-foreground: white;
+}
+.primary-fuchsia-700 {
+  --primary: var(--color-fuchsia-700);
+  --primary-foreground: white;
+}
+.primary-fuchsia-800 {
+  --primary: var(--color-fuchsia-800);
+  --primary-foreground: white;
+}
+.primary-fuchsia-900 {
+  --primary: var(--color-fuchsia-900);
+  --primary-foreground: white;
+}
 
-    --qwikui-blue-50: #effaff;
-    --qwikui-blue-100: #def3ff;
-    --qwikui-blue-200: #b6eaff;
-    --qwikui-blue-300: #76dbff;
-    --qwikui-blue-400: #2dcaff;
-    --qwikui-blue-500: #02b9fc;
-    --qwikui-blue-600: #0090d2;
-    --qwikui-blue-700: #0073aa;
-    --qwikui-blue-800: #00618c;
-    --qwikui-blue-900: #075073;
-    --qwikui-blue-950: #04334d;
+.primary-pink-100 {
+  --primary: var(--color-pink-100);
+  --primary-foreground: black;
+}
+.primary-pink-200 {
+  --primary: var(--color-pink-200);
+  --primary-foreground: black;
+}
+.primary-pink-300 {
+  --primary: var(--color-pink-300);
+  --primary-foreground: black;
+}
+.primary-pink-400 {
+  --primary: var(--color-pink-400);
+  --primary-foreground: black;
+}
+.primary-pink-500 {
+  --primary: var(--color-pink-500);
+  --primary-foreground: white;
+}
+.primary-pink-600 {
+  --primary: var(--color-pink-600);
+  --primary-foreground: white;
+}
+.primary-pink-700 {
+  --primary: var(--color-pink-700);
+  --primary-foreground: white;
+}
+.primary-pink-800 {
+  --primary: var(--color-pink-800);
+  --primary-foreground: white;
+}
+.primary-pink-900 {
+  --primary: var(--color-pink-900);
+  --primary-foreground: white;
+}
 
-    /* neutrals - for internal use */
-    --qwikui-slate-50: #f8fafc;
-    --qwikui-slate-100: #f1f5f9;
-    --qwikui-slate-200: #e2e8f0;
-    --qwikui-slate-300: #cbd5e1;
-    --qwikui-slate-400: #94a3b8;
-    --qwikui-slate-500: #64748b;
-    --qwikui-slate-600: #475569;
-    --qwikui-slate-700: #334155;
-    --qwikui-slate-800: #1e293b;
-    --qwikui-slate-900: #0f172a;
-    --qwikui-slate-950: #020617;
-  }
+.primary-rose-100 {
+  --primary: var(--color-rose-100);
+  --primary-foreground: black;
+}
+.primary-rose-200 {
+  --primary: var(--color-rose-200);
+  --primary-foreground: black;
+}
+.primary-rose-300 {
+  --primary: var(--color-rose-300);
+  --primary-foreground: black;
+}
+.primary-rose-400 {
+  --primary: var(--color-rose-400);
+  --primary-foreground: black;
+}
+.primary-rose-500 {
+  --primary: var(--color-rose-500);
+  --primary-foreground: white;
+}
+.primary-rose-600 {
+  --primary: var(--color-rose-600);
+  --primary-foreground: white;
+}
+.primary-rose-700 {
+  --primary: var(--color-rose-700);
+  --primary-foreground: white;
+}
+.primary-rose-800 {
+  --primary: var(--color-rose-800);
+  --primary-foreground: white;
+}
+.primary-rose-900 {
+  --primary: var(--color-rose-900);
+  --primary-foreground: white;
+}
+/* CSS PARSER: END - DO NOT REMOVE */
 
-  html {
-    height: 100%;
-    min-height: 100%;
-    scroll-behavior: smooth;
+@utility accordion-animation-1 {
+  &[data-open] {
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
   }
 
-  body {
-    min-height: 100%;
+  &[data-closed] {
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
   }
+}
 
-  /* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
-  It would make more sense to supply the user with the animation declaration in the docs.
-*/
+@utility text-outlined {
+  @apply [text-shadow:-1px_0_#777,0_1px_#777,1px_0_#777,0_-1px_#777] dark:[text-shadow:-1px_0_#ccc,0_1px_#ccc,1px_0_#ccc,0_-1px_#ccc];
 }

From da1c1cdc98a80fee16dc47c5f8c1290c73aa6794 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Tue, 12 Aug 2025 16:45:59 +0200
Subject: [PATCH 04/42] chore: transition theme

---
 apps/website/src/global.css | 2491 ++++++++++++++++++-----------------
 package.json                |    1 -
 pnpm-lock.yaml              |   13 -
 3 files changed, 1268 insertions(+), 1237 deletions(-)

diff --git a/apps/website/src/global.css b/apps/website/src/global.css
index 1652be81f..9e2a80fc2 100644
--- a/apps/website/src/global.css
+++ b/apps/website/src/global.css
@@ -1,75 +1,77 @@
-@layer base, theme, components, utilities;
-
+@layer theme, base, components, utilities;
 @import 'tailwindcss';
+@import 'tw-animate-css';
 
 @source "../../../packages/kit-styled";
 
 @custom-variant dark (&:is(.dark *));
 
-:root {
-  --background: white;
-  --foreground: var(--color-slate-900);
-  --muted: var(--color-slate-100);
-  --muted-foreground: var(--color-slate-700);
-  --popover: white;
-  --popover-foreground: var(--color-slate-900);
-  --card: white;
-  --card-foreground: var(--color-slate-900);
-  --border: var(--color-slate-200);
-  --input: var(--color-slate-200);
-  --primary: hsl(197 98% 52%);
-  --primary-foreground: black;
-  --secondary: hsl(266 96% 74%);
-  --secondary-foreground: black;
-  --accent: var(--color-slate-100);
-  --accent-foreground: var(--color-slate-900);
-  --alert: var(--color-red-500);
-  --alert-foreground: var(--color-slate-50);
-  --ring: var(--color-slate-900);
-  --border-radius: 0.5rem;
-}
-
-.dark {
-  --background: var(--color-slate-950);
-  --foreground: var(--color-slate-50);
-  --muted: var(--color-slate-800);
-  --muted-foreground: var(--color-slate-300);
-  --popover: var(--color-slate-950);
-  --popover-foreground: var(--color-slate-50);
-  --card: var(--color-slate-950);
-  --card-foreground: var(--color-slate-50);
-  --border: var(--color-slate-800);
-  --input: var(--color-slate-800);
-  --primary: hsl(197 98% 52%);
-  --primary-foreground: black;
-  --secondary: hsl(266 96% 74%);
-  --secondary-foreground: black;
-  --accent: var(--color-slate-700);
-  --accent-foreground: var(--color-slate-50);
-  --alert: var(--color-red-500);
-  --alert-foreground: var(--color-slate-50);
-  --ring: var(--color-slate-300);
-  --border-radius: 0.5rem;
-}
-
-.border-radius-0 {
-  --border-radius: 0rem;
-}
-
-.border-radius-dot-25 {
-  --border-radius: 0.25rem;
-}
-
-.border-radius-dot-50 {
-  --border-radius: 0.5rem;
-}
-
-.border-radius-dot-75 {
-  --border-radius: 0.75rem;
-}
+@layer base {
+  :root {
+    --background: white;
+    --foreground: var(--color-slate-900);
+    --muted: var(--color-slate-100);
+    --muted-foreground: var(--color-slate-700);
+    --popover: white;
+    --popover-foreground: var(--color-slate-900);
+    --card: white;
+    --card-foreground: var(--color-slate-900);
+    --border: var(--color-slate-200);
+    --input: var(--color-slate-200);
+    --primary: hsl(197 98% 52%);
+    --primary-foreground: black;
+    --secondary: hsl(266 96% 74%);
+    --secondary-foreground: black;
+    --accent: var(--color-slate-100);
+    --accent-foreground: var(--color-slate-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-900);
+    --border-width: 0px;
+    --border-radius: 0;
+    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+    --transform-press: scale(0.95);
+  }
 
-.border-radius-1 {
-  --border-radius: 1rem;
+  .dark {
+    --background: var(--color-slate-950);
+    --foreground: var(--color-slate-50);
+    --muted: var(--color-slate-800);
+    --muted-foreground: var(--color-slate-300);
+    --popover: var(--color-slate-950);
+    --popover-foreground: var(--color-slate-50);
+    --card: var(--color-slate-950);
+    --card-foreground: var(--color-slate-50);
+    --border: var(--color-slate-800);
+    --input: var(--color-slate-800);
+    --primary: hsl(197 98% 52%);
+    --primary-foreground: black;
+    --secondary: hsl(266 96% 74%);
+    --secondary-foreground: black;
+    --accent: var(--color-slate-700);
+    --accent-foreground: var(--color-slate-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-300);
+    --border-width: 0px;
+    --border-radius: 0;
+    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+    --transform-press: scale(0.95);
+  }
 }
 
 @theme inline {
@@ -92,32 +94,52 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
-  --radius-none: 0rem;
-  --radius-xs: calc(var(--border-radius) + 0.125rem);
-  --radius-sm: calc(var(--border-radius) + 0.25rem);
+  --radius-xs: var(--border-radius);
+  --radius-sm: calc(var(--border-radius) + 0.125rem);
   --radius-md: calc(var(--border-radius) + 0.375rem);
   --radius-lg: calc(var(--border-radius) + 0.5rem);
   --radius-xl: calc(var(--border-radius) + 0.75rem);
   --radius-2xl: calc(var(--border-radius) + 1rem);
   --radius-3xl: calc(var(--border-radius) + 1.5rem);
-  --default-border-width: var(--border-width-base);
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
+  --default-border-width: calc(var(--border-width) + 1px);
+  --border-2: calc(var(--border-width) + 2px);
+  --border-4: calc(var(--border-width) + 4px);
+  --border-8: calc(var(--border-width) + 8px);
+  --shadow-xs: var(--shadow-base);
   --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
   --shadow-md: var(--shadow-md);
   --shadow-lg: var(--shadow-lg);
   --shadow-xl: var(--shadow-xl);
   --shadow-2xl: var(--shadow-2xl);
-  --inset-shadow-2xs: var(--inset-shadow-2xs);
-  --inset-shadow-xs: var(--inset-shadow-xs);
-  --inset-shadow-sm: var(--inset-shadow-sm);
-  --drop-shadow-xs: var(--drop-shadow-xs);
-  --drop-shadow-sm: var(--drop-shadow-sm);
-  --drop-shadow-md: var(--drop-shadow-md);
-  --drop-shadow-lg: var(--drop-shadow-lg);
-  --drop-shadow-xl: var(--drop-shadow-xl);
-  --drop-shadow-2xl: var(--drop-shadow-2xl);
+  --shadow-inner: var(--shadow-inner);
+  --stroke-0: 0;
+  --stroke: var(--stroke-width);
+  --stroke-1: calc(var(--stroke-width) + 1px);
+  --stroke-2: calc(var(--stroke-width) + 2px);
+  --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+  --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--qwikui-collapsible-content-height);
+    }
+  }
+  @keyframes collapsible-up {
+    from {
+      height: var(--qwikui-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@layer utilities {
+  .press {
+    transform: var(--transform-press);
+  }
 }
 
 @layer base {
@@ -149,1181 +171,1204 @@
 /* @utility underline {
 } */
 
-/* CSS PARSER: START - DO NOT REMOVE */
-.simple {
-  --border-width-base: 1px;
-  --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
-  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
-  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
-  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
-  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
-  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
-  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
-  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
-  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
-  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
-  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
-  --transform-press: scale(0.95);
-}
+@layer base {
+  .border-radius-0 {
+    --border-radius: 0rem;
+  }
 
-.brutalist.brutalist {
-  --border-width-base: 3px;
-  --stroke-width: 2px;
-  --border: black;
-  --input: black;
-  --ring: black;
-  --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
-  --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
-  --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-  --shadow: 5px 5px rgba(0, 0, 0, 1);
-  --shadow-md: 6px 6px rgba(0, 0, 0, 1);
-  --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
-  --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
-  --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
-  --inset-shadow-2xs: inset -1px -1px rgba(0, 0, 0, 1);
-  --inset-shadow-xs: inset -2px -2px rgba(0, 0, 0, 1);
-  --inset-shadow-sm: inset -3px -3px rgba(0, 0, 0, 1);
-  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.5);
-  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
-  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.5);
-  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.5);
-  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 1);
-  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 1);
-  --transform-press: translate(4px, 4px);
-}
+  .border-radius-dot-25 {
+    --border-radius: 0.25rem;
+  }
 
-.dark.brutalist.brutalist {
-  --border-width-base: 3px;
-  --stroke-width: 2px;
-  --underline: 2px;
-  --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
-  --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
-  --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-  --shadow: 5px 5px rgba(0, 0, 0, 1);
-  --shadow-md: 6px 6px rgba(0, 0, 0, 1);
-  --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
-  --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
-  --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
-  --inset-shadow-2xs: inset -1px -1px rgba(0, 0, 0, 1);
-  --inset-shadow-xs: inset -2px -2px rgba(0, 0, 0, 1);
-  --inset-shadow-sm: inset -3px -3px rgba(0, 0, 0, 1);
-  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.5);
-  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
-  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.5);
-  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.5);
-  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 1);
-  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 1);
-  --transform-press: translate(4px, 4px);
-}
+  .border-radius-dot-50 {
+    --border-radius: 0.5rem;
+  }
 
-.neumorphic.neumorphic {
-  --border-width-base: 0px;
-  --stroke-width: 0px;
-  --background: hsl(0 0 88%);
-  --foreground: var(--color-zinc-900);
-  --popover: hsl(0 0 88%);
-  --popover-foreground: var(--color-zinc-900);
-  --card: hsl(0 0 88%);
-  --card-foreground: var(--color-zinc-900);
-  --border: hsl(0 0% 80.2%);
-  --ring: hsl(0 0% 80.2%);
-  --input: hsl(0 0% 80.2%);
-  --shadow-base:
-    -3px -3px 6px #bebebe, 3px 3px 6px #ffffff,
-    inset 1px 1px 2px rgba(190, 190, 190, 0.5),
-    inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-  --shadow-sm:
-    3px 3px 6px #bebebe, -3px -3px 6px #ffffff,
-    inset 1px 1px 2px rgba(190, 190, 190, 0.5),
-    inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-  --shadow:
-    4px 4px 8px #bebebe, -4px -4px 8px #ffffff,
-    inset 1px 1px 2px rgba(190, 190, 190, 0.5),
-    inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-  --shadow-md:
-    5px 5px 10px #bebebe, -5px -5px 10px #ffffff,
-    inset 1px 1px 2px rgba(190, 190, 190, 0.5),
-    inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-  --shadow-lg:
-    6px 6px 12px #bebebe, -6px -6px 12px #ffffff,
-    inset 1px 1px 2px rgba(190, 190, 190, 0.5),
-    inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-  --shadow-xl:
-    8px 8px 15px #bebebe, -8px -8px 15px #ffffff,
-    inset 1px 1px 2px rgba(190, 190, 190, 0.5),
-    inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-  --shadow-2xl:
-    10px 10px 20px #bebebe, -10px -10px 20px #ffffff,
-    inset 1px 1px 2px rgba(190, 190, 190, 0.5),
-    inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-  --shadow-inner: inset 4px 4px 8px #bebebe, inset -2px -2px 4px #ffffff;
-  --transform-press: scale(0.95);
-}
+  .border-radius-dot-75 {
+    --border-radius: 0.75rem;
+  }
 
-.dark.neumorphic.neumorphic {
-  --border-width-base: 0px;
-  --stroke-width: 0px;
-  --background: var(--color-zinc-700);
-  --foreground: var(--color-zinc-200);
-  --popover: var(--color-zinc-700);
-  --popover-foreground: var(--color-zinc-200);
-  --card: var(--color-zinc-700);
-  --card-foreground: var(--color-zinc-200);
-  --border: hsl(240 5.9% 20%);
-  --ring: hsl(240 5.9% 20%);
-  --input: hsl(240 5.9% 20%);
-  --shadow-base:
-    -3px -3px 6px #2c2c31, 3px 3px 6px #52525b, inset 1px 1px 2px #2c2c31,
-    inset -1px -1px 2px #52525b;
-  --shadow-sm:
-    3px 3px 6px #2c2c31, -3px -3px 6px #52525b, inset 1px 1px 2px #2c2c31,
-    inset -1px -1px 2px #52525b;
-  --shadow:
-    4px 4px 8px #2c2c31, -4px -4px 8px #52525b, inset 1px 1px 2px #2c2c31,
-    inset -1px -1px 2px #52525b;
-  --shadow-md:
-    5px 5px 10px #2c2c31, -5px -5px 10px #52525b, inset 1px 1px 2px #2c2c31,
-    inset -1px -1px 2px #52525b;
-  --shadow-lg:
-    6px 6px 12px #2c2c31, -6px -6px 12px #52525b, inset 1px 1px 2px #2c2c31,
-    inset -1px -1px 2px #52525b;
-  --shadow-xl:
-    8px 8px 15px #2c2c31, -8px -8px 15px #52525b, inset 1px 1px 2px #2c2c31,
-    inset -1px -1px 2px #52525b;
-  --shadow-2xl:
-    10px 10px 20px #2c2c31, -10px -10px 20px #52525b, inset 1px 1px 2px #2c2c31,
-    inset -1px -1px 2px #52525b;
-  --shadow-inner: inset 2px 2px 4px #2c2c31, inset -2px -2px 4px #52525b;
-  --transform-press: scale(0.95);
-}
+  .border-radius-1 {
+    --border-radius: 1rem;
+  }
 
-/* use colors from colors.ts */
+  /* CSS PARSER: START - DO NOT REMOVE */
+  .simple {
+    --border-width-base: 1px;
+    --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+    --transform-press: scale(0.95);
+  }
 
-.base-slate {
-  --background: white;
-  --foreground: var(--color-slate-950);
-  --muted: var(--color-slate-100);
-  --muted-foreground: var(--color-slate-700);
-  --popover: white;
-  --popover-foreground: var(--color-slate-900);
-  --card: white;
-  --card-foreground: var(--color-slate-900);
-  --border: var(--color-slate-200);
-  --input: var(--color-slate-200);
-  --secondary: var(--color-slate-900);
-  --secondary-foreground: white;
-  --accent: var(--color-slate-100);
-  --accent-foreground: var(--color-slate-900);
-  --alert: var(--color-red-500);
-  --alert-foreground: var(--color-slate-50);
-  --ring: var(--color-slate-900);
-}
-.dark.base-slate {
-  --background: var(--color-slate-950);
-  --foreground: var(--color-slate-50);
-  --muted: var(--color-slate-800);
-  --muted-foreground: var(--color-slate-300);
-  --popover: var(--color-slate-950);
-  --popover-foreground: var(--color-slate-50);
-  --card: var(--color-slate-950);
-  --card-foreground: var(--color-slate-50);
-  --border: var(--color-slate-800);
-  --input: var(--color-slate-800);
-  --secondary: var(--color-slate-100);
-  --secondary-foreground: black;
-  --accent: var(--color-slate-700);
-  --accent-foreground: var(--color-slate-50);
-  --alert: var(--color-red-500);
-  --alert-foreground: var(--color-slate-50);
-  --ring: var(--color-slate-300);
-}
+  .brutalist.brutalist {
+    --border-width-base: 3px;
+    --stroke-width: 2px;
+    --border: black;
+    --input: black;
+    --ring: black;
+    --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
+    --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
+    --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
+    --shadow: 5px 5px rgba(0, 0, 0, 1);
+    --shadow-md: 6px 6px rgba(0, 0, 0, 1);
+    --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
+    --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
+    --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+    --inset-shadow-2xs: inset -1px -1px rgba(0, 0, 0, 1);
+    --inset-shadow-xs: inset -2px -2px rgba(0, 0, 0, 1);
+    --inset-shadow-sm: inset -3px -3px rgba(0, 0, 0, 1);
+    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.5);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.5);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.5);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 1);
+    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 1);
+    --transform-press: translate(4px, 4px);
+  }
 
-.base-gray {
-  --background: white;
-  --foreground: var(--color-gray-950);
-  --muted: var(--color-gray-100);
-  --muted-foreground: var(--color-gray-700);
-  --popover: white;
-  --popover-foreground: var(--color-gray-950);
-  --card: white;
-  --card-foreground: var(--color-gray-950);
-  --border: var(--color-gray-200);
-  --input: var(--color-gray-200);
-  --secondary: var(--color-gray-950);
-  --secondary-foreground: white;
-  --accent: var(--color-gray-100);
-  --accent-foreground: var(--color-gray-950);
-  --alert: var(--color-red-500);
-  --alert-foreground: var(--color-gray-50);
-  --ring: var(--color-gray-950);
-}
-.dark.base-gray {
-  --background: var(--color-gray-950);
-  --foreground: var(--color-gray-50);
-  --muted: var(--color-gray-800);
-  --muted-foreground: var(--color-gray-300);
-  --popover: var(--color-gray-950);
-  --popover-foreground: var(--color-gray-50);
-  --card: var(--color-gray-950);
-  --card-foreground: var(--color-gray-50);
-  --border: var(--color-gray-800);
-  --input: var(--color-gray-800);
-  --secondary: var(--color-gray-100);
-  --secondary-foreground: black;
-  --accent: var(--color-gray-700);
-  --accent-foreground: var(--color-gray-50);
-  --alert: var(--color-red-500);
-  --alert-foreground: var(--color-gray-50);
-  --ring: var(--color-gray-300);
-}
+  .dark.brutalist.brutalist {
+    --border-width-base: 3px;
+    --stroke-width: 2px;
+    --underline: 2px;
+    --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
+    --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
+    --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
+    --shadow: 5px 5px rgba(0, 0, 0, 1);
+    --shadow-md: 6px 6px rgba(0, 0, 0, 1);
+    --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
+    --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
+    --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+    --inset-shadow-2xs: inset -1px -1px rgba(0, 0, 0, 1);
+    --inset-shadow-xs: inset -2px -2px rgba(0, 0, 0, 1);
+    --inset-shadow-sm: inset -3px -3px rgba(0, 0, 0, 1);
+    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.5);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.5);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.5);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 1);
+    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 1);
+    --transform-press: translate(4px, 4px);
+  }
 
-.base-zinc {
-  --background: white;
-  --foreground: var(--color-zinc-900);
-  --muted: var(--color-zinc-100);
-  --muted-foreground: var(--color-zinc-700);
-  --popover: white;
-  --popover-foreground: var(--color-zinc-900);
-  --card: white;
-  --card-foreground: var(--color-zinc-900);
-  --border: var(--color-zinc-200);
-  --input: var(--color-zinc-200);
-  --secondary: var(--color-zinc-900);
-  --secondary-foreground: white;
-  --accent: var(--color-zinc-100);
-  --accent-foreground: var(--color-zinc-900);
-  --alert: var(--color-red-500);
-  --alert-foreground: var(--color-zinc-50);
-  --ring: var(--color-zinc-900);
-}
-.dark.base-zinc {
-  --background: var(--color-zinc-950);
-  --foreground: var(--color-zinc-50);
-  --muted: var(--color-zinc-800);
-  --muted-foreground: var(--color-zinc-300);
-  --popover: var(--color-zinc-950);
-  --popover-foreground: var(--color-zinc-50);
-  --card: var(--color-zinc-950);
-  --card-foreground: var(--color-zinc-50);
-  --border: var(--color-zinc-800);
-  --input: var(--color-zinc-800);
-  --secondary: var(--color-zinc-100);
-  --secondary-foreground: black;
-  --accent: var(--color-zinc-700);
-  --accent-foreground: var(--color-zinc-50);
-  --alert: var(--color-red-500);
-  --alert-foreground: var(--color-zinc-50);
-  --ring: var(--color-zinc-300);
-}
+  .neumorphic.neumorphic {
+    --border-width-base: 0px;
+    --stroke-width: 0px;
+    --background: hsl(0 0 88%);
+    --foreground: var(--color-zinc-900);
+    --popover: hsl(0 0 88%);
+    --popover-foreground: var(--color-zinc-900);
+    --card: hsl(0 0 88%);
+    --card-foreground: var(--color-zinc-900);
+    --border: hsl(0 0% 80.2%);
+    --ring: hsl(0 0% 80.2%);
+    --input: hsl(0 0% 80.2%);
+    --shadow-base:
+      -3px -3px 6px #bebebe, 3px 3px 6px #ffffff,
+      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.5);
+    --shadow-sm:
+      3px 3px 6px #bebebe, -3px -3px 6px #ffffff,
+      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.5);
+    --shadow:
+      4px 4px 8px #bebebe, -4px -4px 8px #ffffff,
+      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.5);
+    --shadow-md:
+      5px 5px 10px #bebebe, -5px -5px 10px #ffffff,
+      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.5);
+    --shadow-lg:
+      6px 6px 12px #bebebe, -6px -6px 12px #ffffff,
+      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.5);
+    --shadow-xl:
+      8px 8px 15px #bebebe, -8px -8px 15px #ffffff,
+      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.5);
+    --shadow-2xl:
+      10px 10px 20px #bebebe, -10px -10px 20px #ffffff,
+      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.5);
+    --shadow-inner: inset 4px 4px 8px #bebebe, inset -2px -2px 4px #ffffff;
+    --transform-press: scale(0.95);
+  }
 
-.base-neutral {
-  --background: white;
-  --foreground: var(--color-neutral-900);
-  --muted: var(--color-neutral-100);
-  --muted-foreground: var(--color-neutral-700);
-  --popover: white;
-  --popover-foreground: var(--color-neutral-900);
-  --card: white;
-  --card-foreground: var(--color-neutral-900);
-  --border: var(--color-neutral-200);
-  --input: var(--color-neutral-200);
-  --secondary: var(--color-neutral-900);
-  --secondary-foreground: white;
-  --accent: var(--color-neutral-100);
-  --accent-foreground: var(--color-neutral-900);
-  --alert: var(--color-red-500);
-  --alert-foreground: var(--color-neutral-50);
-  --ring: var(--color-neutral-900);
-}
-.dark.base-neutral {
-  --background: var(--color-neutral-950);
-  --foreground: var(--color-neutral-50);
-  --muted: var(--color-neutral-800);
-  --muted-foreground: var(--color-neutral-300);
-  --popover: var(--color-neutral-950);
-  --popover-foreground: var(--color-neutral-50);
-  --card: var(--color-neutral-950);
-  --card-foreground: var(--color-neutral-50);
-  --border: var(--color-neutral-800);
-  --input: var(--color-neutral-800);
-  --secondary: var(--color-neutral-100);
-  --secondary-foreground: black;
-  --accent: var(--color-neutral-700);
-  --accent-foreground: var(--color-neutral-50);
-  --alert: var(--color-red-500);
-  --alert-foreground: var(--color-neutral-50);
-  --ring: var(--color-neutral-300);
-}
+  .dark.neumorphic.neumorphic {
+    --border-width-base: 0px;
+    --stroke-width: 0px;
+    --background: var(--color-zinc-700);
+    --foreground: var(--color-zinc-200);
+    --popover: var(--color-zinc-700);
+    --popover-foreground: var(--color-zinc-200);
+    --card: var(--color-zinc-700);
+    --card-foreground: var(--color-zinc-200);
+    --border: hsl(240 5.9% 20%);
+    --ring: hsl(240 5.9% 20%);
+    --input: hsl(240 5.9% 20%);
+    --shadow-base:
+      -3px -3px 6px #2c2c31, 3px 3px 6px #52525b, inset 1px 1px 2px #2c2c31,
+      inset -1px -1px 2px #52525b;
+    --shadow-sm:
+      3px 3px 6px #2c2c31, -3px -3px 6px #52525b, inset 1px 1px 2px #2c2c31,
+      inset -1px -1px 2px #52525b;
+    --shadow:
+      4px 4px 8px #2c2c31, -4px -4px 8px #52525b, inset 1px 1px 2px #2c2c31,
+      inset -1px -1px 2px #52525b;
+    --shadow-md:
+      5px 5px 10px #2c2c31, -5px -5px 10px #52525b, inset 1px 1px 2px #2c2c31,
+      inset -1px -1px 2px #52525b;
+    --shadow-lg:
+      6px 6px 12px #2c2c31, -6px -6px 12px #52525b, inset 1px 1px 2px #2c2c31,
+      inset -1px -1px 2px #52525b;
+    --shadow-xl:
+      8px 8px 15px #2c2c31, -8px -8px 15px #52525b, inset 1px 1px 2px #2c2c31,
+      inset -1px -1px 2px #52525b;
+    --shadow-2xl:
+      10px 10px 20px #2c2c31, -10px -10px 20px #52525b, inset 1px 1px 2px #2c2c31,
+      inset -1px -1px 2px #52525b;
+    --shadow-inner: inset 2px 2px 4px #2c2c31, inset -2px -2px 4px #52525b;
+    --transform-press: scale(0.95);
+  }
 
-.base-stone {
-  --background: white;
-  --foreground: var(--color-stone-900);
-  --muted: var(--color-stone-100);
-  --muted-foreground: var(--color-stone-700);
-  --popover: white;
-  --popover-foreground: var(--color-stone-900);
-  --card: white;
-  --card-foreground: var(--color-stone-900);
-  --border: var(--color-stone-200);
-  --input: var(--color-stone-200);
-  --secondary: var(--color-stone-900);
-  --secondary-foreground: white;
-  --accent: var(--color-stone-100);
-  --accent-foreground: var(--color-stone-900);
-  --alert: var(--color-red-500);
-  --alert-foreground: var(--color-stone-50);
-  --ring: var(--color-stone-900);
-}
-.dark.base-stone {
-  --background: var(--color-stone-950);
-  --foreground: var(--color-stone-50);
-  --muted: var(--color-stone-800);
-  --muted-foreground: var(--color-stone-300);
-  --popover: var(--color-stone-950);
-  --popover-foreground: var(--color-stone-50);
-  --card: var(--color-stone-950);
-  --card-foreground: var(--color-stone-50);
-  --border: var(--color-stone-800);
-  --input: var(--color-stone-800);
-  --secondary: var(--color-stone-100);
-  --secondary-foreground: black;
-  --accent: var(--color-stone-700);
-  --accent-foreground: var(--color-stone-50);
-  --alert: var(--color-red-500);
-  --alert-foreground: var(--color-stone-50);
-  --ring: var(--color-stone-300);
-}
+  /* use colors from colors.ts */
 
-.primary-slate-100,
-.dark.primary-slate-900 {
-  --primary: var(--color-slate-100);
-  --primary-foreground: black;
-}
-.primary-slate-200,
-.dark.primary-slate-800 {
-  --primary: var(--color-slate-200);
-  --primary-foreground: black;
-}
-.primary-slate-300 {
-  --primary: var(--color-slate-300);
-  --primary-foreground: black;
-}
-.primary-slate-400 {
-  --primary: var(--color-slate-400);
-  --primary-foreground: black;
-}
-.primary-slate-500 {
-  --primary: var(--color-slate-500);
-  --primary-foreground: white;
-}
-.primary-slate-600 {
-  --primary: var(--color-slate-600);
-  --primary-foreground: white;
-}
-.primary-slate-700 {
-  --primary: var(--color-slate-700);
-  --primary-foreground: white;
-}
-.primary-slate-800 {
-  --primary: var(--color-slate-800);
-  --primary-foreground: white;
-}
-.primary-slate-900 {
-  --primary: var(--color-slate-900);
-  --primary-foreground: white;
-}
+  .base-slate {
+    --background: white;
+    --foreground: var(--color-slate-950);
+    --muted: var(--color-slate-100);
+    --muted-foreground: var(--color-slate-700);
+    --popover: white;
+    --popover-foreground: var(--color-slate-900);
+    --card: white;
+    --card-foreground: var(--color-slate-900);
+    --border: var(--color-slate-200);
+    --input: var(--color-slate-200);
+    --secondary: var(--color-slate-900);
+    --secondary-foreground: white;
+    --accent: var(--color-slate-100);
+    --accent-foreground: var(--color-slate-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-900);
+  }
+  .dark.base-slate {
+    --background: var(--color-slate-950);
+    --foreground: var(--color-slate-50);
+    --muted: var(--color-slate-800);
+    --muted-foreground: var(--color-slate-300);
+    --popover: var(--color-slate-950);
+    --popover-foreground: var(--color-slate-50);
+    --card: var(--color-slate-950);
+    --card-foreground: var(--color-slate-50);
+    --border: var(--color-slate-800);
+    --input: var(--color-slate-800);
+    --secondary: var(--color-slate-100);
+    --secondary-foreground: black;
+    --accent: var(--color-slate-700);
+    --accent-foreground: var(--color-slate-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-300);
+  }
 
-.primary-gray-100,
-.dark.primary-gray-900 {
-  --primary: var(--color-gray-100);
-  --primary-foreground: black;
-}
-.primary-gray-200,
-.dark.primary-gray-800 {
-  --primary: var(--color-gray-200);
-  --primary-foreground: black;
-}
-.primary-gray-300 {
-  --primary: var(--color-gray-300);
-  --primary-foreground: black;
-}
-.primary-gray-400 {
-  --primary: var(--color-gray-400);
-  --primary-foreground: black;
-}
-.primary-gray-500 {
-  --primary: var(--color-gray-500);
-  --primary-foreground: white;
-}
-.primary-gray-600 {
-  --primary: var(--color-gray-600);
-  --primary-foreground: white;
-}
-.primary-gray-700 {
-  --primary: var(--color-gray-700);
-  --primary-foreground: white;
-}
-.primary-gray-800 {
-  --primary: var(--color-gray-800);
-  --primary-foreground: white;
-}
-.primary-gray-900 {
-  --primary: var(--color-gray-950);
-  --primary-foreground: white;
-}
+  .base-gray {
+    --background: white;
+    --foreground: var(--color-gray-950);
+    --muted: var(--color-gray-100);
+    --muted-foreground: var(--color-gray-700);
+    --popover: white;
+    --popover-foreground: var(--color-gray-950);
+    --card: white;
+    --card-foreground: var(--color-gray-950);
+    --border: var(--color-gray-200);
+    --input: var(--color-gray-200);
+    --secondary: var(--color-gray-950);
+    --secondary-foreground: white;
+    --accent: var(--color-gray-100);
+    --accent-foreground: var(--color-gray-950);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-gray-50);
+    --ring: var(--color-gray-950);
+  }
+  .dark.base-gray {
+    --background: var(--color-gray-950);
+    --foreground: var(--color-gray-50);
+    --muted: var(--color-gray-800);
+    --muted-foreground: var(--color-gray-300);
+    --popover: var(--color-gray-950);
+    --popover-foreground: var(--color-gray-50);
+    --card: var(--color-gray-950);
+    --card-foreground: var(--color-gray-50);
+    --border: var(--color-gray-800);
+    --input: var(--color-gray-800);
+    --secondary: var(--color-gray-100);
+    --secondary-foreground: black;
+    --accent: var(--color-gray-700);
+    --accent-foreground: var(--color-gray-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-gray-50);
+    --ring: var(--color-gray-300);
+  }
 
-.primary-zinc-100,
-.dark.primary-zinc-900 {
-  --primary: var(--color-zinc-100);
-  --primary-foreground: black;
-}
-.primary-zinc-200,
-.dark.primary-zinc-800 {
-  --primary: var(--color-zinc-200);
-  --primary-foreground: black;
-}
-.primary-zinc-300 {
-  --primary: var(--color-zinc-300);
-  --primary-foreground: black;
-}
-.primary-zinc-400 {
-  --primary: var(--color-zinc-400);
-  --primary-foreground: black;
-}
-.primary-zinc-500 {
-  --primary: var(--color-zinc-500);
-  --primary-foreground: white;
-}
-.primary-zinc-600 {
-  --primary: var(--color-zinc-600);
-  --primary-foreground: white;
-}
-.primary-zinc-700 {
-  --primary: var(--color-zinc-700);
-  --primary-foreground: white;
-}
-.primary-zinc-800 {
-  --primary: var(--color-zinc-800);
-  --primary-foreground: white;
-}
-.primary-zinc-900 {
-  --primary: var(--color-zinc-900);
-  --primary-foreground: white;
-}
+  .base-zinc {
+    --background: white;
+    --foreground: var(--color-zinc-900);
+    --muted: var(--color-zinc-100);
+    --muted-foreground: var(--color-zinc-700);
+    --popover: white;
+    --popover-foreground: var(--color-zinc-900);
+    --card: white;
+    --card-foreground: var(--color-zinc-900);
+    --border: var(--color-zinc-200);
+    --input: var(--color-zinc-200);
+    --secondary: var(--color-zinc-900);
+    --secondary-foreground: white;
+    --accent: var(--color-zinc-100);
+    --accent-foreground: var(--color-zinc-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-zinc-50);
+    --ring: var(--color-zinc-900);
+  }
+  .dark.base-zinc {
+    --background: var(--color-zinc-950);
+    --foreground: var(--color-zinc-50);
+    --muted: var(--color-zinc-800);
+    --muted-foreground: var(--color-zinc-300);
+    --popover: var(--color-zinc-950);
+    --popover-foreground: var(--color-zinc-50);
+    --card: var(--color-zinc-950);
+    --card-foreground: var(--color-zinc-50);
+    --border: var(--color-zinc-800);
+    --input: var(--color-zinc-800);
+    --secondary: var(--color-zinc-100);
+    --secondary-foreground: black;
+    --accent: var(--color-zinc-700);
+    --accent-foreground: var(--color-zinc-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-zinc-50);
+    --ring: var(--color-zinc-300);
+  }
 
-.primary-neutral-100,
-.dark.primary-neutral-900 {
-  --primary: var(--color-neutral-100);
-  --primary-foreground: black;
-}
-.primary-neutral-200,
-.dark.primary-neutral-800 {
-  --primary: var(--color-neutral-200);
-  --primary-foreground: black;
-}
-.primary-neutral-300 {
-  --primary: var(--color-neutral-300);
-  --primary-foreground: black;
-}
-.primary-neutral-400 {
-  --primary: var(--color-neutral-400);
-  --primary-foreground: black;
-}
-.primary-neutral-500 {
-  --primary: var(--color-neutral-500);
-  --primary-foreground: white;
-}
-.primary-neutral-600 {
-  --primary: var(--color-neutral-600);
-  --primary-foreground: white;
-}
-.primary-neutral-700 {
-  --primary: var(--color-neutral-700);
-  --primary-foreground: white;
-}
-.primary-neutral-800 {
-  --primary: var(--color-neutral-800);
-  --primary-foreground: white;
-}
-.primary-neutral-900 {
-  --primary: var(--color-neutral-900);
-  --primary-foreground: white;
-}
+  .base-neutral {
+    --background: white;
+    --foreground: var(--color-neutral-900);
+    --muted: var(--color-neutral-100);
+    --muted-foreground: var(--color-neutral-700);
+    --popover: white;
+    --popover-foreground: var(--color-neutral-900);
+    --card: white;
+    --card-foreground: var(--color-neutral-900);
+    --border: var(--color-neutral-200);
+    --input: var(--color-neutral-200);
+    --secondary: var(--color-neutral-900);
+    --secondary-foreground: white;
+    --accent: var(--color-neutral-100);
+    --accent-foreground: var(--color-neutral-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-neutral-50);
+    --ring: var(--color-neutral-900);
+  }
+  .dark.base-neutral {
+    --background: var(--color-neutral-950);
+    --foreground: var(--color-neutral-50);
+    --muted: var(--color-neutral-800);
+    --muted-foreground: var(--color-neutral-300);
+    --popover: var(--color-neutral-950);
+    --popover-foreground: var(--color-neutral-50);
+    --card: var(--color-neutral-950);
+    --card-foreground: var(--color-neutral-50);
+    --border: var(--color-neutral-800);
+    --input: var(--color-neutral-800);
+    --secondary: var(--color-neutral-100);
+    --secondary-foreground: black;
+    --accent: var(--color-neutral-700);
+    --accent-foreground: var(--color-neutral-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-neutral-50);
+    --ring: var(--color-neutral-300);
+  }
 
-.primary-stone-100,
-.dark.primary-stone-900 {
-  --primary: var(--color-stone-100);
-  --primary-foreground: black;
-}
-.primary-stone-200,
-.dark.primary-stone-800 {
-  --primary: var(--color-stone-200);
-  --primary-foreground: black;
-}
-.primary-stone-300 {
-  --primary: var(--color-stone-300);
-  --primary-foreground: black;
-}
-.primary-stone-400 {
-  --primary: var(--color-stone-400);
-  --primary-foreground: black;
-}
-.primary-stone-500 {
-  --primary: var(--color-stone-500);
-  --primary-foreground: white;
-}
-.primary-stone-600 {
-  --primary: var(--color-stone-600);
-  --primary-foreground: white;
-}
-.primary-stone-700 {
-  --primary: var(--color-stone-700);
-  --primary-foreground: white;
-}
-.primary-stone-800 {
-  --primary: var(--color-stone-800);
-  --primary-foreground: white;
-}
-.primary-stone-900 {
-  --primary: var(--color-stone-900);
-  --primary-foreground: white;
-}
+  .base-stone {
+    --background: white;
+    --foreground: var(--color-stone-900);
+    --muted: var(--color-stone-100);
+    --muted-foreground: var(--color-stone-700);
+    --popover: white;
+    --popover-foreground: var(--color-stone-900);
+    --card: white;
+    --card-foreground: var(--color-stone-900);
+    --border: var(--color-stone-200);
+    --input: var(--color-stone-200);
+    --secondary: var(--color-stone-900);
+    --secondary-foreground: white;
+    --accent: var(--color-stone-100);
+    --accent-foreground: var(--color-stone-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-stone-50);
+    --ring: var(--color-stone-900);
+  }
+  .dark.base-stone {
+    --background: var(--color-stone-950);
+    --foreground: var(--color-stone-50);
+    --muted: var(--color-stone-800);
+    --muted-foreground: var(--color-stone-300);
+    --popover: var(--color-stone-950);
+    --popover-foreground: var(--color-stone-50);
+    --card: var(--color-stone-950);
+    --card-foreground: var(--color-stone-50);
+    --border: var(--color-stone-800);
+    --input: var(--color-stone-800);
+    --secondary: var(--color-stone-100);
+    --secondary-foreground: black;
+    --accent: var(--color-stone-700);
+    --accent-foreground: var(--color-stone-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-stone-50);
+    --ring: var(--color-stone-300);
+  }
 
-.primary-red-100 {
-  --primary: var(--color-red-100);
-  --primary-foreground: black;
-}
-.primary-red-200 {
-  --primary: var(--color-red-200);
-  --primary-foreground: black;
-}
-.primary-red-300 {
-  --primary: var(--color-red-300);
-  --primary-foreground: black;
-}
-.primary-red-400 {
-  --primary: var(--color-red-400);
-  --primary-foreground: black;
-}
-.primary-red-500 {
-  --primary: var(--color-red-500);
-  --primary-foreground: white;
-}
-.primary-red-600 {
-  --primary: var(--color-red-600);
-  --primary-foreground: white;
-}
-.primary-red-700 {
-  --primary: var(--color-red-700);
-  --primary-foreground: white;
-}
-.primary-red-800 {
-  --primary: var(--color-red-800);
-  --primary-foreground: white;
-}
-.primary-red-900 {
-  --primary: var(--color-red-900);
-  --primary-foreground: white;
-}
+  .primary-slate-100,
+  .dark.primary-slate-900 {
+    --primary: var(--color-slate-100);
+    --primary-foreground: black;
+  }
+  .primary-slate-200,
+  .dark.primary-slate-800 {
+    --primary: var(--color-slate-200);
+    --primary-foreground: black;
+  }
+  .primary-slate-300 {
+    --primary: var(--color-slate-300);
+    --primary-foreground: black;
+  }
+  .primary-slate-400 {
+    --primary: var(--color-slate-400);
+    --primary-foreground: black;
+  }
+  .primary-slate-500 {
+    --primary: var(--color-slate-500);
+    --primary-foreground: white;
+  }
+  .primary-slate-600 {
+    --primary: var(--color-slate-600);
+    --primary-foreground: white;
+  }
+  .primary-slate-700 {
+    --primary: var(--color-slate-700);
+    --primary-foreground: white;
+  }
+  .primary-slate-800 {
+    --primary: var(--color-slate-800);
+    --primary-foreground: white;
+  }
+  .primary-slate-900 {
+    --primary: var(--color-slate-900);
+    --primary-foreground: white;
+  }
 
-.primary-orange-100 {
-  --primary: var(--color-orange-100);
-  --primary-foreground: black;
-}
-.primary-orange-200 {
-  --primary: var(--color-orange-200);
-  --primary-foreground: black;
-}
-.primary-orange-300 {
-  --primary: var(--color-orange-300);
-  --primary-foreground: black;
-}
-.primary-orange-400 {
-  --primary: var(--color-orange-400);
-  --primary-foreground: black;
-}
-.primary-orange-500 {
-  --primary: var(--color-orange-500);
-  --primary-foreground: black;
-}
-.primary-orange-600 {
-  --primary: var(--color-orange-600);
-  --primary-foreground: white;
-}
-.primary-orange-700 {
-  --primary: var(--color-orange-700);
-  --primary-foreground: white;
-}
-.primary-orange-800 {
-  --primary: var(--color-orange-800);
-  --primary-foreground: white;
-}
-.primary-orange-900 {
-  --primary: var(--color-orange-900);
-  --primary-foreground: white;
-}
+  .primary-gray-100,
+  .dark.primary-gray-900 {
+    --primary: var(--color-gray-100);
+    --primary-foreground: black;
+  }
+  .primary-gray-200,
+  .dark.primary-gray-800 {
+    --primary: var(--color-gray-200);
+    --primary-foreground: black;
+  }
+  .primary-gray-300 {
+    --primary: var(--color-gray-300);
+    --primary-foreground: black;
+  }
+  .primary-gray-400 {
+    --primary: var(--color-gray-400);
+    --primary-foreground: black;
+  }
+  .primary-gray-500 {
+    --primary: var(--color-gray-500);
+    --primary-foreground: white;
+  }
+  .primary-gray-600 {
+    --primary: var(--color-gray-600);
+    --primary-foreground: white;
+  }
+  .primary-gray-700 {
+    --primary: var(--color-gray-700);
+    --primary-foreground: white;
+  }
+  .primary-gray-800 {
+    --primary: var(--color-gray-800);
+    --primary-foreground: white;
+  }
+  .primary-gray-900 {
+    --primary: var(--color-gray-950);
+    --primary-foreground: white;
+  }
 
-.primary-amber-100 {
-  --primary: var(--color-amber-100);
-  --primary-foreground: black;
-}
-.primary-amber-200 {
-  --primary: var(--color-amber-200);
-  --primary-foreground: black;
-}
-.primary-amber-300 {
-  --primary: var(--color-amber-300);
-  --primary-foreground: black;
-}
-.primary-amber-400 {
-  --primary: var(--color-amber-400);
-  --primary-foreground: black;
-}
-.primary-amber-500 {
-  --primary: var(--color-amber-500);
-  --primary-foreground: black;
-}
-.primary-amber-600 {
-  --primary: var(--color-amber-600);
-  --primary-foreground: white;
-}
-.primary-amber-700 {
-  --primary: var(--color-amber-700);
-  --primary-foreground: white;
-}
-.primary-amber-800 {
-  --primary: var(--color-amber-800);
-  --primary-foreground: white;
-}
-.primary-amber-900 {
-  --primary: var(--color-amber-900);
-  --primary-foreground: white;
-}
+  .primary-zinc-100,
+  .dark.primary-zinc-900 {
+    --primary: var(--color-zinc-100);
+    --primary-foreground: black;
+  }
+  .primary-zinc-200,
+  .dark.primary-zinc-800 {
+    --primary: var(--color-zinc-200);
+    --primary-foreground: black;
+  }
+  .primary-zinc-300 {
+    --primary: var(--color-zinc-300);
+    --primary-foreground: black;
+  }
+  .primary-zinc-400 {
+    --primary: var(--color-zinc-400);
+    --primary-foreground: black;
+  }
+  .primary-zinc-500 {
+    --primary: var(--color-zinc-500);
+    --primary-foreground: white;
+  }
+  .primary-zinc-600 {
+    --primary: var(--color-zinc-600);
+    --primary-foreground: white;
+  }
+  .primary-zinc-700 {
+    --primary: var(--color-zinc-700);
+    --primary-foreground: white;
+  }
+  .primary-zinc-800 {
+    --primary: var(--color-zinc-800);
+    --primary-foreground: white;
+  }
+  .primary-zinc-900 {
+    --primary: var(--color-zinc-900);
+    --primary-foreground: white;
+  }
 
-.primary-yellow-100 {
-  --primary: var(--color-yellow-100);
-  --primary-foreground: black;
-}
-.primary-yellow-200 {
-  --primary: var(--color-yellow-200);
-  --primary-foreground: black;
-}
-.primary-yellow-300 {
-  --primary: var(--color-yellow-300);
-  --primary-foreground: black;
-}
-.primary-yellow-400 {
-  --primary: var(--color-yellow-400);
-  --primary-foreground: black;
-}
-.primary-yellow-500 {
-  --primary: var(--color-yellow-500);
-  --primary-foreground: black;
-}
-.primary-yellow-600 {
-  --primary: var(--color-yellow-600);
-  --primary-foreground: white;
-}
-.primary-yellow-700 {
-  --primary: var(--color-yellow-700);
-  --primary-foreground: white;
-}
-.primary-yellow-800 {
-  --primary: var(--color-yellow-800);
-  --primary-foreground: white;
-}
-.primary-yellow-900 {
-  --primary: var(--color-yellow-900);
-  --primary-foreground: white;
-}
+  .primary-neutral-100,
+  .dark.primary-neutral-900 {
+    --primary: var(--color-neutral-100);
+    --primary-foreground: black;
+  }
+  .primary-neutral-200,
+  .dark.primary-neutral-800 {
+    --primary: var(--color-neutral-200);
+    --primary-foreground: black;
+  }
+  .primary-neutral-300 {
+    --primary: var(--color-neutral-300);
+    --primary-foreground: black;
+  }
+  .primary-neutral-400 {
+    --primary: var(--color-neutral-400);
+    --primary-foreground: black;
+  }
+  .primary-neutral-500 {
+    --primary: var(--color-neutral-500);
+    --primary-foreground: white;
+  }
+  .primary-neutral-600 {
+    --primary: var(--color-neutral-600);
+    --primary-foreground: white;
+  }
+  .primary-neutral-700 {
+    --primary: var(--color-neutral-700);
+    --primary-foreground: white;
+  }
+  .primary-neutral-800 {
+    --primary: var(--color-neutral-800);
+    --primary-foreground: white;
+  }
+  .primary-neutral-900 {
+    --primary: var(--color-neutral-900);
+    --primary-foreground: white;
+  }
 
-.primary-lime-100 {
-  --primary: var(--color-lime-100);
-  --primary-foreground: black;
-}
-.primary-lime-200 {
-  --primary: var(--color-lime-200);
-  --primary-foreground: black;
-}
-.primary-lime-300 {
-  --primary: var(--color-lime-300);
-  --primary-foreground: black;
-}
-.primary-lime-400 {
-  --primary: var(--color-lime-400);
-  --primary-foreground: black;
-}
-.primary-lime-500 {
-  --primary: var(--color-lime-500);
-  --primary-foreground: black;
-}
-.primary-lime-600 {
-  --primary: var(--color-lime-600);
-  --primary-foreground: white;
-}
-.primary-lime-700 {
-  --primary: var(--color-lime-700);
-  --primary-foreground: white;
-}
-.primary-lime-800 {
-  --primary: var(--color-lime-800);
-  --primary-foreground: white;
-}
-.primary-lime-900 {
-  --primary: var(--color-lime-900);
-  --primary-foreground: white;
-}
+  .primary-stone-100,
+  .dark.primary-stone-900 {
+    --primary: var(--color-stone-100);
+    --primary-foreground: black;
+  }
+  .primary-stone-200,
+  .dark.primary-stone-800 {
+    --primary: var(--color-stone-200);
+    --primary-foreground: black;
+  }
+  .primary-stone-300 {
+    --primary: var(--color-stone-300);
+    --primary-foreground: black;
+  }
+  .primary-stone-400 {
+    --primary: var(--color-stone-400);
+    --primary-foreground: black;
+  }
+  .primary-stone-500 {
+    --primary: var(--color-stone-500);
+    --primary-foreground: white;
+  }
+  .primary-stone-600 {
+    --primary: var(--color-stone-600);
+    --primary-foreground: white;
+  }
+  .primary-stone-700 {
+    --primary: var(--color-stone-700);
+    --primary-foreground: white;
+  }
+  .primary-stone-800 {
+    --primary: var(--color-stone-800);
+    --primary-foreground: white;
+  }
+  .primary-stone-900 {
+    --primary: var(--color-stone-900);
+    --primary-foreground: white;
+  }
 
-.primary-green-100 {
-  --primary: var(--color-green-100);
-  --primary-foreground: black;
-}
-.primary-green-200 {
-  --primary: var(--color-green-200);
-  --primary-foreground: black;
-}
-.primary-green-300 {
-  --primary: var(--color-green-300);
-  --primary-foreground: black;
-}
-.primary-green-400 {
-  --primary: var(--color-green-400);
-  --primary-foreground: black;
-}
-.primary-green-500 {
-  --primary: var(--color-green-500);
-  --primary-foreground: black;
-}
-.primary-green-600 {
-  --primary: var(--color-green-600);
-  --primary-foreground: white;
-}
-.primary-green-700 {
-  --primary: var(--color-green-700);
-  --primary-foreground: white;
-}
-.primary-green-800 {
-  --primary: var(--color-green-800);
-  --primary-foreground: white;
-}
-.primary-green-900 {
-  --primary: var(--color-green-900);
-  --primary-foreground: white;
-}
+  .primary-red-100 {
+    --primary: var(--color-red-100);
+    --primary-foreground: black;
+  }
+  .primary-red-200 {
+    --primary: var(--color-red-200);
+    --primary-foreground: black;
+  }
+  .primary-red-300 {
+    --primary: var(--color-red-300);
+    --primary-foreground: black;
+  }
+  .primary-red-400 {
+    --primary: var(--color-red-400);
+    --primary-foreground: black;
+  }
+  .primary-red-500 {
+    --primary: var(--color-red-500);
+    --primary-foreground: white;
+  }
+  .primary-red-600 {
+    --primary: var(--color-red-600);
+    --primary-foreground: white;
+  }
+  .primary-red-700 {
+    --primary: var(--color-red-700);
+    --primary-foreground: white;
+  }
+  .primary-red-800 {
+    --primary: var(--color-red-800);
+    --primary-foreground: white;
+  }
+  .primary-red-900 {
+    --primary: var(--color-red-900);
+    --primary-foreground: white;
+  }
 
-.primary-emerald-100 {
-  --primary: var(--color-emerald-100);
-  --primary-foreground: black;
-}
-.primary-emerald-200 {
-  --primary: var(--color-emerald-200);
-  --primary-foreground: black;
-}
-.primary-emerald-300 {
-  --primary: var(--color-emerald-300);
-  --primary-foreground: black;
-}
-.primary-emerald-400 {
-  --primary: var(--color-emerald-400);
-  --primary-foreground: black;
-}
-.primary-emerald-500 {
-  --primary: var(--color-emerald-500);
-  --primary-foreground: black;
-}
-.primary-emerald-600 {
-  --primary: var(--color-emerald-600);
-  --primary-foreground: white;
-}
-.primary-emerald-700 {
-  --primary: var(--color-emerald-700);
-  --primary-foreground: white;
-}
-.primary-emerald-800 {
-  --primary: var(--color-emerald-800);
-  --primary-foreground: white;
-}
-.primary-emerald-900 {
-  --primary: var(--color-emerald-900);
-  --primary-foreground: white;
-}
+  .primary-orange-100 {
+    --primary: var(--color-orange-100);
+    --primary-foreground: black;
+  }
+  .primary-orange-200 {
+    --primary: var(--color-orange-200);
+    --primary-foreground: black;
+  }
+  .primary-orange-300 {
+    --primary: var(--color-orange-300);
+    --primary-foreground: black;
+  }
+  .primary-orange-400 {
+    --primary: var(--color-orange-400);
+    --primary-foreground: black;
+  }
+  .primary-orange-500 {
+    --primary: var(--color-orange-500);
+    --primary-foreground: black;
+  }
+  .primary-orange-600 {
+    --primary: var(--color-orange-600);
+    --primary-foreground: white;
+  }
+  .primary-orange-700 {
+    --primary: var(--color-orange-700);
+    --primary-foreground: white;
+  }
+  .primary-orange-800 {
+    --primary: var(--color-orange-800);
+    --primary-foreground: white;
+  }
+  .primary-orange-900 {
+    --primary: var(--color-orange-900);
+    --primary-foreground: white;
+  }
 
-.primary-teal-100 {
-  --primary: var(--color-teal-100);
-  --primary-foreground: black;
-}
-.primary-teal-200 {
-  --primary: var(--color-teal-200);
-  --primary-foreground: black;
-}
-.primary-teal-300 {
-  --primary: var(--color-teal-300);
-  --primary-foreground: black;
-}
-.primary-teal-400 {
-  --primary: var(--color-teal-400);
-  --primary-foreground: black;
-}
-.primary-teal-500 {
-  --primary: var(--color-teal-500);
-  --primary-foreground: black;
-}
-.primary-teal-600 {
-  --primary: var(--color-teal-600);
-  --primary-foreground: white;
-}
-.primary-teal-700 {
-  --primary: var(--color-teal-700);
-  --primary-foreground: white;
-}
-.primary-teal-800 {
-  --primary: var(--color-teal-800);
-  --primary-foreground: white;
-}
-.primary-teal-900 {
-  --primary: var(--color-teal-900);
-  --primary-foreground: white;
-}
+  .primary-amber-100 {
+    --primary: var(--color-amber-100);
+    --primary-foreground: black;
+  }
+  .primary-amber-200 {
+    --primary: var(--color-amber-200);
+    --primary-foreground: black;
+  }
+  .primary-amber-300 {
+    --primary: var(--color-amber-300);
+    --primary-foreground: black;
+  }
+  .primary-amber-400 {
+    --primary: var(--color-amber-400);
+    --primary-foreground: black;
+  }
+  .primary-amber-500 {
+    --primary: var(--color-amber-500);
+    --primary-foreground: black;
+  }
+  .primary-amber-600 {
+    --primary: var(--color-amber-600);
+    --primary-foreground: white;
+  }
+  .primary-amber-700 {
+    --primary: var(--color-amber-700);
+    --primary-foreground: white;
+  }
+  .primary-amber-800 {
+    --primary: var(--color-amber-800);
+    --primary-foreground: white;
+  }
+  .primary-amber-900 {
+    --primary: var(--color-amber-900);
+    --primary-foreground: white;
+  }
 
-.primary-cyan-100 {
-  --primary: var(--color-cyan-100);
-  --primary-foreground: black;
-}
-.primary-cyan-200 {
-  --primary: var(--color-cyan-200);
-  --primary-foreground: black;
-}
-.primary-cyan-300 {
-  --primary: var(--color-cyan-300);
-  --primary-foreground: black;
-}
-.primary-cyan-400 {
-  --primary: var(--color-cyan-400);
-  --primary-foreground: black;
-}
-.primary-cyan-500 {
-  --primary: var(--color-cyan-500);
-  --primary-foreground: black;
-}
-.primary-cyan-600 {
-  --primary: var(--color-cyan-600);
-  --primary-foreground: white;
-}
-.primary-cyan-700 {
-  --primary: var(--color-cyan-700);
-  --primary-foreground: white;
-}
-.primary-cyan-800 {
-  --primary: var(--color-cyan-800);
-  --primary-foreground: white;
-}
-.primary-cyan-900 {
-  --primary: var(--color-cyan-900);
-  --primary-foreground: white;
-}
+  .primary-yellow-100 {
+    --primary: var(--color-yellow-100);
+    --primary-foreground: black;
+  }
+  .primary-yellow-200 {
+    --primary: var(--color-yellow-200);
+    --primary-foreground: black;
+  }
+  .primary-yellow-300 {
+    --primary: var(--color-yellow-300);
+    --primary-foreground: black;
+  }
+  .primary-yellow-400 {
+    --primary: var(--color-yellow-400);
+    --primary-foreground: black;
+  }
+  .primary-yellow-500 {
+    --primary: var(--color-yellow-500);
+    --primary-foreground: black;
+  }
+  .primary-yellow-600 {
+    --primary: var(--color-yellow-600);
+    --primary-foreground: white;
+  }
+  .primary-yellow-700 {
+    --primary: var(--color-yellow-700);
+    --primary-foreground: white;
+  }
+  .primary-yellow-800 {
+    --primary: var(--color-yellow-800);
+    --primary-foreground: white;
+  }
+  .primary-yellow-900 {
+    --primary: var(--color-yellow-900);
+    --primary-foreground: white;
+  }
 
-.primary-sky-100 {
-  --primary: var(--color-sky-100);
-  --primary-foreground: black;
-}
-.primary-sky-200 {
-  --primary: var(--color-sky-200);
-  --primary-foreground: black;
-}
-.primary-sky-300 {
-  --primary: var(--color-sky-300);
-  --primary-foreground: black;
-}
-.primary-sky-400 {
-  --primary: var(--color-sky-400);
-  --primary-foreground: black;
-}
-.primary-sky-500 {
-  --primary: var(--color-sky-500);
-  --primary-foreground: black;
-}
-.primary-sky-600 {
-  --primary: var(--color-sky-600);
-  --primary-foreground: white;
-}
-.primary-sky-700 {
-  --primary: var(--color-sky-700);
-  --primary-foreground: white;
-}
-.primary-sky-800 {
-  --primary: var(--color-sky-800);
-  --primary-foreground: white;
-}
-.primary-sky-900 {
-  --primary: var(--color-sky-900);
-  --primary-foreground: white;
-}
+  .primary-lime-100 {
+    --primary: var(--color-lime-100);
+    --primary-foreground: black;
+  }
+  .primary-lime-200 {
+    --primary: var(--color-lime-200);
+    --primary-foreground: black;
+  }
+  .primary-lime-300 {
+    --primary: var(--color-lime-300);
+    --primary-foreground: black;
+  }
+  .primary-lime-400 {
+    --primary: var(--color-lime-400);
+    --primary-foreground: black;
+  }
+  .primary-lime-500 {
+    --primary: var(--color-lime-500);
+    --primary-foreground: black;
+  }
+  .primary-lime-600 {
+    --primary: var(--color-lime-600);
+    --primary-foreground: white;
+  }
+  .primary-lime-700 {
+    --primary: var(--color-lime-700);
+    --primary-foreground: white;
+  }
+  .primary-lime-800 {
+    --primary: var(--color-lime-800);
+    --primary-foreground: white;
+  }
+  .primary-lime-900 {
+    --primary: var(--color-lime-900);
+    --primary-foreground: white;
+  }
 
-.primary-blue-100 {
-  --primary: var(--color-blue-100);
-  --primary-foreground: black;
-}
-.primary-blue-200 {
-  --primary: var(--color-blue-200);
-  --primary-foreground: black;
-}
-.primary-blue-300 {
-  --primary: var(--color-blue-300);
-  --primary-foreground: black;
-}
-.primary-blue-400 {
-  --primary: var(--color-blue-400);
-  --primary-foreground: black;
-}
-.primary-blue-500 {
-  --primary: var(--color-blue-500);
-  --primary-foreground: white;
-}
-.primary-blue-600 {
-  --primary: var(--color-blue-600);
-  --primary-foreground: white;
-}
-.primary-blue-700 {
-  --primary: var(--color-blue-700);
-  --primary-foreground: white;
-}
-.primary-blue-800 {
-  --primary: var(--color-blue-800);
-  --primary-foreground: white;
-}
-.primary-blue-900 {
-  --primary: var(--color-blue-900);
-  --primary-foreground: white;
-}
+  .primary-green-100 {
+    --primary: var(--color-green-100);
+    --primary-foreground: black;
+  }
+  .primary-green-200 {
+    --primary: var(--color-green-200);
+    --primary-foreground: black;
+  }
+  .primary-green-300 {
+    --primary: var(--color-green-300);
+    --primary-foreground: black;
+  }
+  .primary-green-400 {
+    --primary: var(--color-green-400);
+    --primary-foreground: black;
+  }
+  .primary-green-500 {
+    --primary: var(--color-green-500);
+    --primary-foreground: black;
+  }
+  .primary-green-600 {
+    --primary: var(--color-green-600);
+    --primary-foreground: white;
+  }
+  .primary-green-700 {
+    --primary: var(--color-green-700);
+    --primary-foreground: white;
+  }
+  .primary-green-800 {
+    --primary: var(--color-green-800);
+    --primary-foreground: white;
+  }
+  .primary-green-900 {
+    --primary: var(--color-green-900);
+    --primary-foreground: white;
+  }
 
-.primary-indigo-100 {
-  --primary: var(--color-indigo-100);
-  --primary-foreground: black;
-}
-.primary-indigo-200 {
-  --primary: var(--color-indigo-200);
-  --primary-foreground: black;
-}
-.primary-indigo-300 {
-  --primary: var(--color-indigo-300);
-  --primary-foreground: black;
-}
-.primary-indigo-400 {
-  --primary: var(--color-indigo-400);
-  --primary-foreground: black;
-}
-.primary-indigo-500 {
-  --primary: var(--color-indigo-500);
-  --primary-foreground: white;
-}
-.primary-indigo-600 {
-  --primary: var(--color-indigo-600);
-  --primary-foreground: white;
-}
-.primary-indigo-700 {
-  --primary: var(--color-indigo-700);
-  --primary-foreground: white;
-}
-.primary-indigo-800 {
-  --primary: var(--color-indigo-800);
-  --primary-foreground: white;
-}
-.primary-indigo-900 {
-  --primary: var(--color-indigo-900);
-  --primary-foreground: white;
-}
+  .primary-emerald-100 {
+    --primary: var(--color-emerald-100);
+    --primary-foreground: black;
+  }
+  .primary-emerald-200 {
+    --primary: var(--color-emerald-200);
+    --primary-foreground: black;
+  }
+  .primary-emerald-300 {
+    --primary: var(--color-emerald-300);
+    --primary-foreground: black;
+  }
+  .primary-emerald-400 {
+    --primary: var(--color-emerald-400);
+    --primary-foreground: black;
+  }
+  .primary-emerald-500 {
+    --primary: var(--color-emerald-500);
+    --primary-foreground: black;
+  }
+  .primary-emerald-600 {
+    --primary: var(--color-emerald-600);
+    --primary-foreground: white;
+  }
+  .primary-emerald-700 {
+    --primary: var(--color-emerald-700);
+    --primary-foreground: white;
+  }
+  .primary-emerald-800 {
+    --primary: var(--color-emerald-800);
+    --primary-foreground: white;
+  }
+  .primary-emerald-900 {
+    --primary: var(--color-emerald-900);
+    --primary-foreground: white;
+  }
 
-.primary-violet-100 {
-  --primary: var(--color-violet-100);
-  --primary-foreground: black;
-}
-.primary-violet-200 {
-  --primary: var(--color-violet-200);
-  --primary-foreground: black;
-}
-.primary-violet-300 {
-  --primary: var(--color-violet-300);
-  --primary-foreground: black;
-}
-.primary-violet-400 {
-  --primary: var(--color-violet-400);
-  --primary-foreground: black;
-}
-.primary-violet-500 {
-  --primary: var(--color-violet-500);
-  --primary-foreground: white;
-}
-.primary-violet-600 {
-  --primary: var(--color-violet-600);
-  --primary-foreground: white;
-}
-.primary-violet-700 {
-  --primary: var(--color-violet-700);
-  --primary-foreground: white;
-}
-.primary-violet-800 {
-  --primary: var(--color-violet-800);
-  --primary-foreground: white;
-}
-.primary-violet-900 {
-  --primary: var(--color-violet-900);
-  --primary-foreground: white;
-}
+  .primary-teal-100 {
+    --primary: var(--color-teal-100);
+    --primary-foreground: black;
+  }
+  .primary-teal-200 {
+    --primary: var(--color-teal-200);
+    --primary-foreground: black;
+  }
+  .primary-teal-300 {
+    --primary: var(--color-teal-300);
+    --primary-foreground: black;
+  }
+  .primary-teal-400 {
+    --primary: var(--color-teal-400);
+    --primary-foreground: black;
+  }
+  .primary-teal-500 {
+    --primary: var(--color-teal-500);
+    --primary-foreground: black;
+  }
+  .primary-teal-600 {
+    --primary: var(--color-teal-600);
+    --primary-foreground: white;
+  }
+  .primary-teal-700 {
+    --primary: var(--color-teal-700);
+    --primary-foreground: white;
+  }
+  .primary-teal-800 {
+    --primary: var(--color-teal-800);
+    --primary-foreground: white;
+  }
+  .primary-teal-900 {
+    --primary: var(--color-teal-900);
+    --primary-foreground: white;
+  }
 
-.primary-purple-100 {
-  --primary: var(--color-purple-100);
-  --primary-foreground: black;
-}
-.primary-purple-200 {
-  --primary: var(--color-purple-200);
-  --primary-foreground: black;
-}
-.primary-purple-300 {
-  --primary: var(--color-purple-300);
-  --primary-foreground: black;
-}
-.primary-purple-400 {
-  --primary: var(--color-purple-400);
-  --primary-foreground: black;
-}
-.primary-purple-500 {
-  --primary: var(--color-purple-500);
-  --primary-foreground: white;
-}
-.primary-purple-600 {
-  --primary: var(--color-purple-600);
-  --primary-foreground: white;
-}
-.primary-purple-700 {
-  --primary: var(--color-purple-700);
-  --primary-foreground: white;
-}
-.primary-purple-800 {
-  --primary: var(--color-purple-800);
-  --primary-foreground: white;
-}
-.primary-purple-900 {
-  --primary: var(--color-purple-900);
-  --primary-foreground: white;
-}
+  .primary-cyan-100 {
+    --primary: var(--color-cyan-100);
+    --primary-foreground: black;
+  }
+  .primary-cyan-200 {
+    --primary: var(--color-cyan-200);
+    --primary-foreground: black;
+  }
+  .primary-cyan-300 {
+    --primary: var(--color-cyan-300);
+    --primary-foreground: black;
+  }
+  .primary-cyan-400 {
+    --primary: var(--color-cyan-400);
+    --primary-foreground: black;
+  }
+  .primary-cyan-500 {
+    --primary: var(--color-cyan-500);
+    --primary-foreground: black;
+  }
+  .primary-cyan-600 {
+    --primary: var(--color-cyan-600);
+    --primary-foreground: white;
+  }
+  .primary-cyan-700 {
+    --primary: var(--color-cyan-700);
+    --primary-foreground: white;
+  }
+  .primary-cyan-800 {
+    --primary: var(--color-cyan-800);
+    --primary-foreground: white;
+  }
+  .primary-cyan-900 {
+    --primary: var(--color-cyan-900);
+    --primary-foreground: white;
+  }
 
-.primary-fuchsia-100 {
-  --primary: var(--color-fuchsia-100);
-  --primary-foreground: black;
-}
-.primary-fuchsia-200 {
-  --primary: var(--color-fuchsia-200);
-  --primary-foreground: black;
-}
-.primary-fuchsia-300 {
-  --primary: var(--color-fuchsia-300);
-  --primary-foreground: black;
-}
-.primary-fuchsia-400 {
-  --primary: var(--color-fuchsia-400);
-  --primary-foreground: black;
-}
-.primary-fuchsia-500 {
-  --primary: var(--color-fuchsia-500);
-  --primary-foreground: white;
-}
-.primary-fuchsia-600 {
-  --primary: var(--color-fuchsia-600);
-  --primary-foreground: white;
-}
-.primary-fuchsia-700 {
-  --primary: var(--color-fuchsia-700);
-  --primary-foreground: white;
-}
-.primary-fuchsia-800 {
-  --primary: var(--color-fuchsia-800);
-  --primary-foreground: white;
-}
-.primary-fuchsia-900 {
-  --primary: var(--color-fuchsia-900);
-  --primary-foreground: white;
-}
+  .primary-sky-100 {
+    --primary: var(--color-sky-100);
+    --primary-foreground: black;
+  }
+  .primary-sky-200 {
+    --primary: var(--color-sky-200);
+    --primary-foreground: black;
+  }
+  .primary-sky-300 {
+    --primary: var(--color-sky-300);
+    --primary-foreground: black;
+  }
+  .primary-sky-400 {
+    --primary: var(--color-sky-400);
+    --primary-foreground: black;
+  }
+  .primary-sky-500 {
+    --primary: var(--color-sky-500);
+    --primary-foreground: black;
+  }
+  .primary-sky-600 {
+    --primary: var(--color-sky-600);
+    --primary-foreground: white;
+  }
+  .primary-sky-700 {
+    --primary: var(--color-sky-700);
+    --primary-foreground: white;
+  }
+  .primary-sky-800 {
+    --primary: var(--color-sky-800);
+    --primary-foreground: white;
+  }
+  .primary-sky-900 {
+    --primary: var(--color-sky-900);
+    --primary-foreground: white;
+  }
 
-.primary-pink-100 {
-  --primary: var(--color-pink-100);
-  --primary-foreground: black;
-}
-.primary-pink-200 {
-  --primary: var(--color-pink-200);
-  --primary-foreground: black;
-}
-.primary-pink-300 {
-  --primary: var(--color-pink-300);
-  --primary-foreground: black;
-}
-.primary-pink-400 {
-  --primary: var(--color-pink-400);
-  --primary-foreground: black;
-}
-.primary-pink-500 {
-  --primary: var(--color-pink-500);
-  --primary-foreground: white;
-}
-.primary-pink-600 {
-  --primary: var(--color-pink-600);
-  --primary-foreground: white;
-}
-.primary-pink-700 {
-  --primary: var(--color-pink-700);
-  --primary-foreground: white;
-}
-.primary-pink-800 {
-  --primary: var(--color-pink-800);
-  --primary-foreground: white;
-}
-.primary-pink-900 {
-  --primary: var(--color-pink-900);
-  --primary-foreground: white;
-}
+  .primary-blue-100 {
+    --primary: var(--color-blue-100);
+    --primary-foreground: black;
+  }
+  .primary-blue-200 {
+    --primary: var(--color-blue-200);
+    --primary-foreground: black;
+  }
+  .primary-blue-300 {
+    --primary: var(--color-blue-300);
+    --primary-foreground: black;
+  }
+  .primary-blue-400 {
+    --primary: var(--color-blue-400);
+    --primary-foreground: black;
+  }
+  .primary-blue-500 {
+    --primary: var(--color-blue-500);
+    --primary-foreground: white;
+  }
+  .primary-blue-600 {
+    --primary: var(--color-blue-600);
+    --primary-foreground: white;
+  }
+  .primary-blue-700 {
+    --primary: var(--color-blue-700);
+    --primary-foreground: white;
+  }
+  .primary-blue-800 {
+    --primary: var(--color-blue-800);
+    --primary-foreground: white;
+  }
+  .primary-blue-900 {
+    --primary: var(--color-blue-900);
+    --primary-foreground: white;
+  }
 
-.primary-rose-100 {
-  --primary: var(--color-rose-100);
-  --primary-foreground: black;
-}
-.primary-rose-200 {
-  --primary: var(--color-rose-200);
-  --primary-foreground: black;
-}
-.primary-rose-300 {
-  --primary: var(--color-rose-300);
-  --primary-foreground: black;
-}
-.primary-rose-400 {
-  --primary: var(--color-rose-400);
-  --primary-foreground: black;
-}
-.primary-rose-500 {
-  --primary: var(--color-rose-500);
-  --primary-foreground: white;
-}
-.primary-rose-600 {
-  --primary: var(--color-rose-600);
-  --primary-foreground: white;
-}
-.primary-rose-700 {
-  --primary: var(--color-rose-700);
-  --primary-foreground: white;
-}
-.primary-rose-800 {
-  --primary: var(--color-rose-800);
-  --primary-foreground: white;
-}
-.primary-rose-900 {
-  --primary: var(--color-rose-900);
-  --primary-foreground: white;
+  .primary-indigo-100 {
+    --primary: var(--color-indigo-100);
+    --primary-foreground: black;
+  }
+  .primary-indigo-200 {
+    --primary: var(--color-indigo-200);
+    --primary-foreground: black;
+  }
+  .primary-indigo-300 {
+    --primary: var(--color-indigo-300);
+    --primary-foreground: black;
+  }
+  .primary-indigo-400 {
+    --primary: var(--color-indigo-400);
+    --primary-foreground: black;
+  }
+  .primary-indigo-500 {
+    --primary: var(--color-indigo-500);
+    --primary-foreground: white;
+  }
+  .primary-indigo-600 {
+    --primary: var(--color-indigo-600);
+    --primary-foreground: white;
+  }
+  .primary-indigo-700 {
+    --primary: var(--color-indigo-700);
+    --primary-foreground: white;
+  }
+  .primary-indigo-800 {
+    --primary: var(--color-indigo-800);
+    --primary-foreground: white;
+  }
+  .primary-indigo-900 {
+    --primary: var(--color-indigo-900);
+    --primary-foreground: white;
+  }
+
+  .primary-violet-100 {
+    --primary: var(--color-violet-100);
+    --primary-foreground: black;
+  }
+  .primary-violet-200 {
+    --primary: var(--color-violet-200);
+    --primary-foreground: black;
+  }
+  .primary-violet-300 {
+    --primary: var(--color-violet-300);
+    --primary-foreground: black;
+  }
+  .primary-violet-400 {
+    --primary: var(--color-violet-400);
+    --primary-foreground: black;
+  }
+  .primary-violet-500 {
+    --primary: var(--color-violet-500);
+    --primary-foreground: white;
+  }
+  .primary-violet-600 {
+    --primary: var(--color-violet-600);
+    --primary-foreground: white;
+  }
+  .primary-violet-700 {
+    --primary: var(--color-violet-700);
+    --primary-foreground: white;
+  }
+  .primary-violet-800 {
+    --primary: var(--color-violet-800);
+    --primary-foreground: white;
+  }
+  .primary-violet-900 {
+    --primary: var(--color-violet-900);
+    --primary-foreground: white;
+  }
+
+  .primary-purple-100 {
+    --primary: var(--color-purple-100);
+    --primary-foreground: black;
+  }
+  .primary-purple-200 {
+    --primary: var(--color-purple-200);
+    --primary-foreground: black;
+  }
+  .primary-purple-300 {
+    --primary: var(--color-purple-300);
+    --primary-foreground: black;
+  }
+  .primary-purple-400 {
+    --primary: var(--color-purple-400);
+    --primary-foreground: black;
+  }
+  .primary-purple-500 {
+    --primary: var(--color-purple-500);
+    --primary-foreground: white;
+  }
+  .primary-purple-600 {
+    --primary: var(--color-purple-600);
+    --primary-foreground: white;
+  }
+  .primary-purple-700 {
+    --primary: var(--color-purple-700);
+    --primary-foreground: white;
+  }
+  .primary-purple-800 {
+    --primary: var(--color-purple-800);
+    --primary-foreground: white;
+  }
+  .primary-purple-900 {
+    --primary: var(--color-purple-900);
+    --primary-foreground: white;
+  }
+
+  .primary-fuchsia-100 {
+    --primary: var(--color-fuchsia-100);
+    --primary-foreground: black;
+  }
+  .primary-fuchsia-200 {
+    --primary: var(--color-fuchsia-200);
+    --primary-foreground: black;
+  }
+  .primary-fuchsia-300 {
+    --primary: var(--color-fuchsia-300);
+    --primary-foreground: black;
+  }
+  .primary-fuchsia-400 {
+    --primary: var(--color-fuchsia-400);
+    --primary-foreground: black;
+  }
+  .primary-fuchsia-500 {
+    --primary: var(--color-fuchsia-500);
+    --primary-foreground: white;
+  }
+  .primary-fuchsia-600 {
+    --primary: var(--color-fuchsia-600);
+    --primary-foreground: white;
+  }
+  .primary-fuchsia-700 {
+    --primary: var(--color-fuchsia-700);
+    --primary-foreground: white;
+  }
+  .primary-fuchsia-800 {
+    --primary: var(--color-fuchsia-800);
+    --primary-foreground: white;
+  }
+  .primary-fuchsia-900 {
+    --primary: var(--color-fuchsia-900);
+    --primary-foreground: white;
+  }
+
+  .primary-pink-100 {
+    --primary: var(--color-pink-100);
+    --primary-foreground: black;
+  }
+  .primary-pink-200 {
+    --primary: var(--color-pink-200);
+    --primary-foreground: black;
+  }
+  .primary-pink-300 {
+    --primary: var(--color-pink-300);
+    --primary-foreground: black;
+  }
+  .primary-pink-400 {
+    --primary: var(--color-pink-400);
+    --primary-foreground: black;
+  }
+  .primary-pink-500 {
+    --primary: var(--color-pink-500);
+    --primary-foreground: white;
+  }
+  .primary-pink-600 {
+    --primary: var(--color-pink-600);
+    --primary-foreground: white;
+  }
+  .primary-pink-700 {
+    --primary: var(--color-pink-700);
+    --primary-foreground: white;
+  }
+  .primary-pink-800 {
+    --primary: var(--color-pink-800);
+    --primary-foreground: white;
+  }
+  .primary-pink-900 {
+    --primary: var(--color-pink-900);
+    --primary-foreground: white;
+  }
+
+  .primary-rose-100 {
+    --primary: var(--color-rose-100);
+    --primary-foreground: black;
+  }
+  .primary-rose-200 {
+    --primary: var(--color-rose-200);
+    --primary-foreground: black;
+  }
+  .primary-rose-300 {
+    --primary: var(--color-rose-300);
+    --primary-foreground: black;
+  }
+  .primary-rose-400 {
+    --primary: var(--color-rose-400);
+    --primary-foreground: black;
+  }
+  .primary-rose-500 {
+    --primary: var(--color-rose-500);
+    --primary-foreground: white;
+  }
+  .primary-rose-600 {
+    --primary: var(--color-rose-600);
+    --primary-foreground: white;
+  }
+  .primary-rose-700 {
+    --primary: var(--color-rose-700);
+    --primary-foreground: white;
+  }
+  .primary-rose-800 {
+    --primary: var(--color-rose-800);
+    --primary-foreground: white;
+  }
+  .primary-rose-900 {
+    --primary: var(--color-rose-900);
+    --primary-foreground: white;
+  }
 }
+
 /* CSS PARSER: END - DO NOT REMOVE */
 
 @utility accordion-animation-1 {
diff --git a/package.json b/package.json
index 06574a2db..1f30cd2ae 100644
--- a/package.json
+++ b/package.json
@@ -123,7 +123,6 @@
     "specificity": "^1.0.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "4.1.0",
-    "tailwindcss-animate": "^1.0.7",
     "tree-sitter": "0.21.1",
     "tree-sitter-typescript": "0.23.0",
     "ts-jest": "^29.1.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 342aea2cb..f26de5265 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -233,9 +233,6 @@ importers:
       tailwindcss:
         specifier: 4.1.0
         version: 4.1.0
-      tailwindcss-animate:
-        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@4.1.0)
       tree-sitter:
         specifier: 0.21.1
         version: 0.21.1
@@ -1808,7 +1805,6 @@ packages:
   '@img/sharp-linux-x64@0.34.2':
     resolution: {integrity: sha512-sD7J+h5nFLMMmOXYH4DD9UtSNBD05tWSSdWAcEyzqW8Cn5UxXvsHAxmxSesYUsTOBmUnjtxghKDl15EvfqLFbQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [x64]
     os: [linux]
 
   '@img/sharp-linuxmusl-arm64@0.33.5':
@@ -7770,11 +7766,6 @@ packages:
   tailwind-merge@1.14.0:
     resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
 
-  tailwindcss-animate@1.0.7:
-    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders'
-
   tailwindcss@4.1.0:
     resolution: {integrity: sha512-vBYstoFnvUZCDxaauNGQQEvJNQgCd1vSMDRYuZZMH1xRRcTboOk1rJrW5yFkEabU9X6Yx1C4LQ+QvPOvQj4Daw==}
 
@@ -17328,10 +17319,6 @@ snapshots:
 
   tailwind-merge@1.14.0: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@4.1.0):
-    dependencies:
-      tailwindcss: 4.1.0
-
   tailwindcss@4.1.0: {}
 
   tapable@2.2.2: {}

From f96a0868a21e2d98c224c73755c9c8dba3a0d5d5 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Tue, 12 Aug 2025 17:44:04 +0200
Subject: [PATCH 05/42] chore: transform hsl() to oklch(from var(...) l c h)

---
 apps/component-tests/src/global.css           |  12 +-
 apps/website/src/global.css                   |   8 +-
 .../headless/accordion/snippets/accordion.css |  18 +--
 .../headless/carousel/examples/carousel.css   |  20 +--
 .../headless/carousel/examples/mousewheel.tsx |   4 +-
 .../headless/checkbox/snippets/select.css     |  14 +--
 .../collapsible/examples/programmatic.tsx     |   6 +-
 .../collapsible/snippets/collapsible.css      |  10 +-
 .../headless/combobox/snippets/combobox.css   |  34 +++---
 .../headless/dropdown/snippets/dropdown.css   |   4 +-
 .../docs/headless/label/snippets/label.css    |   8 +-
 .../headless/modal/snippets/animation.css     |   4 +-
 .../docs/headless/modal/snippets/modal.css    |  22 ++--
 .../routes/docs/headless/pagination/index.css |  12 +-
 .../headless/popover/examples/backdrop.css    |   4 +-
 .../headless/popover/snippets/popover.css     |  20 +--
 .../headless/progress/snippets/progress.css   |   6 +-
 .../docs/headless/select/snippets/select.css  |  24 ++--
 .../headless/separator/snippets/separator.css |   6 +-
 .../src/routes/docs/headless/tabs/index.css   |   6 +-
 .../headless/toggle-group/snippets/toggle.css |  26 ++--
 .../docs/headless/toggle/snippets/toggle.css  |  26 ++--
 .../headless/tooltip/snippets/tooltip.css     |  14 +--
 .../(getting-started)/install/index.mdx       |  38 +++---
 .../setup-tailwind-generator.spec.ts          | 114 +++++++++---------
 packages/kit-styled/src/templates/global.css  |   8 +-
 .../src/templates/tailwind.extend._template   |  38 +++---
 27 files changed, 255 insertions(+), 251 deletions(-)

diff --git a/apps/component-tests/src/global.css b/apps/component-tests/src/global.css
index c53f48dff..ba02102a1 100644
--- a/apps/component-tests/src/global.css
+++ b/apps/component-tests/src/global.css
@@ -1266,11 +1266,11 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground font-sans;
+    @apply bg-background font-sans text-foreground;
   }
 
   p code {
-    @apply bg-accent rounded-sm border-b-2 px-2 py-0.5;
+    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
   }
 
   pre code {
@@ -1285,7 +1285,7 @@
 
   *::-webkit-scrollbar-thumb {
     /* Thumb color */
-    background-color: hsla(var(--foreground) / 0.25);
+    background-color: oklch(from var(--foreground) l c h / 0.25);
     border-radius: 0.5rem;
     background-clip: padding-box;
     border-left: 0.15rem solid transparent;
@@ -1293,11 +1293,11 @@
   }
 
   .navigation-docs::-webkit-scrollbar-thumb {
-    background-color: hsla(var(--foreground) / 0.1);
+    background-color: oklch(from var(--foreground) l c h / 0.1);
   }
 
   .dark .navigation-docs::-webkit-scrollbar-thumb {
-    background-color: hsla(var(--foreground) / 0.2);
+    background-color: oklch(from var(--foreground) l c h / 0.2);
   }
 
   *::-webkit-scrollbar-corner {
@@ -1319,7 +1319,7 @@
   }
 
   .toc-scrollbar:hover.toc-scrollbar::-webkit-scrollbar-thumb {
-    background-color: hsla(var(--foreground) / 0.15);
+    background-color: oklch(from var(--foreground) l c h / 0.15);
   }
 
   .dark *::-webkit-scrollbar-track {
diff --git a/apps/website/src/global.css b/apps/website/src/global.css
index 9e2a80fc2..8dfd628fc 100644
--- a/apps/website/src/global.css
+++ b/apps/website/src/global.css
@@ -18,9 +18,9 @@
     --card-foreground: var(--color-slate-900);
     --border: var(--color-slate-200);
     --input: var(--color-slate-200);
-    --primary: hsl(197 98% 52%);
+    --primary: oklch(74.1% 38.5% 234.357);
     --primary-foreground: black;
-    --secondary: hsl(266 96% 74%);
+    --secondary: oklch(69.9% 46.25% 301.823);
     --secondary-foreground: black;
     --accent: var(--color-slate-100);
     --accent-foreground: var(--color-slate-900);
@@ -51,9 +51,9 @@
     --card-foreground: var(--color-slate-50);
     --border: var(--color-slate-800);
     --input: var(--color-slate-800);
-    --primary: hsl(197 98% 52%);
+    --primary: oklch(74.1% 38.5% 234.357);
     --primary-foreground: black;
-    --secondary: hsl(266 96% 74%);
+    --secondary: oklch(69.9% 46.25% 301.823);
     --secondary-foreground: black;
     --accent: var(--color-slate-700);
     --accent-foreground: var(--color-slate-50);
diff --git a/apps/website/src/routes/docs/headless/accordion/snippets/accordion.css b/apps/website/src/routes/docs/headless/accordion/snippets/accordion.css
index c6dcc7881..31572b459 100644
--- a/apps/website/src/routes/docs/headless/accordion/snippets/accordion.css
+++ b/apps/website/src/routes/docs/headless/accordion/snippets/accordion.css
@@ -4,7 +4,7 @@
 
 .collapsible-trigger {
   width: 100%;
-  border: 2px dotted hsla(var(--foreground) / 1);
+  border: 2px dotted oklch(from var(--foreground) l c h / 1);
   border-radius: calc(var(--border-radius) / 2);
   padding: 0.5rem;
   display: flex;
@@ -18,7 +18,7 @@
 }
 
 .collapsible-trigger:hover {
-  background-color: hsla(var(--primary) / 0.08);
+  background-color: oklch(from var(--primary) l c h / 0.08);
 }
 
 .collapsible-trigger svg {
@@ -41,10 +41,10 @@
 .collapsible-content {
   width: 100%;
   font-weight: 500;
-  background: hsla(var(--primary) / 0.2);
+  background: oklch(from var(--primary) l c h / 0.2);
   border-radius: calc(var(--border-radius) / 2);
   max-width: var(--select-width);
-  color: hsl(var(--foreground));
+  color: oklch(from var(--foreground) l c h);
   overflow: hidden;
 
   /* offset the dotted border */
@@ -52,7 +52,7 @@
 
 .collapsible-content-outline {
   padding: 0.5rem;
-  border: 2px dotted hsla(var(--primary) / 1);
+  border: 2px dotted oklch(from var(--primary) l c h / 1);
 }
 
 /* chevron transition */
@@ -103,17 +103,17 @@
 .dynamic-input input {
   margin-bottom: 0.5rem;
   width: 5rem;
-  background: hsl(var(--accent));
-  border: 2px dotted hsl(var(--foreground));
+  background: oklch(from var(--accent) l c h);
+  border: 2px dotted oklch(from var(--foreground) l c h);
   padding-left: 0.5rem;
 }
 
 .dynamic-input .add input {
-  background: hsla(var(--primary) / 0.2);
+  background: oklch(from var(--primary) l c h / 0.2);
 }
 
 .dynamic-input .delete input {
-  background: hsla(var(--accent) / 1);
+  background: oklch(from var(--accent) l c h / 1);
 }
 
 .dynamic-buttons {
diff --git a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css
index c58e0d4f8..aac60f518 100644
--- a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css
+++ b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css
@@ -4,7 +4,7 @@
 }
 
 .carousel-slide {
-  border: 2px dotted hsl(var(--primary));
+  border: 2px dotted oklch(from var(--primary) l c h);
   min-height: 10rem;
   max-height: 10rem;
   -webkit-user-select: none; /* support for Safari */
@@ -15,25 +15,25 @@
   display: flex;
   gap: 0.5rem;
   padding: 1rem;
-  border: 2px dotted hsl(var(--foreground));
+  border: 2px dotted oklch(from var(--foreground) l c h);
   margin-top: 0.5rem;
 }
 
 .carousel-buttons {
   display: flex;
   justify-content: space-between;
-  border: 2px dotted hsl(var(--accent));
+  border: 2px dotted oklch(from var(--accent) l c h);
   margin-bottom: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
 .carousel-buttons button {
-  border: 2px dotted hsl(var(--foreground));
+  border: 2px dotted oklch(from var(--foreground) l c h);
   padding: 0.5rem;
 }
 
 .carousel-buttons button:hover {
-  background-color: hsla(var(--primary) / 0.08);
+  background-color: oklch(from var(--primary) l c h / 0.08);
 }
 
 .carousel-buttons button:disabled {
@@ -47,12 +47,12 @@
 }
 
 .carousel-pagination-bullet[data-active] {
-  outline: 2px dotted hsl(var(--primary));
-  background-color: hsla(var(--primary) / 0.08);
+  outline: 2px dotted oklch(from var(--primary) l c h);
+  background-color: oklch(from var(--primary) l c h / 0.08);
 }
 
 .carousel-pagination-bullet:hover {
-  background-color: hsla(var(--primary) / 0.08);
+  background-color: oklch(from var(--primary) l c h / 0.08);
 }
 
 .carousel-conditional {
@@ -93,14 +93,14 @@
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
-  background-color: hsl(var(--muted));
+  background-color: oklch(from var(--muted) l c h);
 
   /* Slight adjustment for visual centering */
   padding-bottom: 0.1em;
 }
 
 .carousel-step[data-current]::before {
-  background-color: hsl(var(--primary));
+  background-color: oklch(from var(--primary) l c h);
 }
 
 .carousel-animation {
diff --git a/apps/website/src/routes/docs/headless/carousel/examples/mousewheel.tsx b/apps/website/src/routes/docs/headless/carousel/examples/mousewheel.tsx
index 76687f262..cb97d4db5 100644
--- a/apps/website/src/routes/docs/headless/carousel/examples/mousewheel.tsx
+++ b/apps/website/src/routes/docs/headless/carousel/examples/mousewheel.tsx
@@ -10,11 +10,11 @@ export default component$(() => {
     .mousewheel-bullet {
         width: 10px;
         height: 10px;
-        background: hsl(var(--muted));
+        background: oklch(from var(--muted) l c h);
     }
         
     .mousewheel-bullet[data-active] {
-        background-color: hsl(var(--primary));
+        background-color: oklch(from var(--primary) l c h);
     }
 
     .mousewheel-pagination {
diff --git a/apps/website/src/routes/docs/headless/checkbox/snippets/select.css b/apps/website/src/routes/docs/headless/checkbox/snippets/select.css
index 3b3919e50..b35459d84 100644
--- a/apps/website/src/routes/docs/headless/checkbox/snippets/select.css
+++ b/apps/website/src/routes/docs/headless/checkbox/snippets/select.css
@@ -8,7 +8,7 @@
 
 .select-trigger {
   width: 100%;
-  border: 2px dashed hsla(var(--primary) / 1);
+  border: 2px dashed oklch(from var(--primary) l c h / 1);
   border-radius: calc(var(--border-radius) / 2);
   height: 44px;
 }
@@ -20,18 +20,18 @@
 
 .select-listbox {
   width: 100%;
-  background-color: hsl(var(--background));
+  background-color: oklch(from var(--background) l c h);
   padding: 0.5rem;
-  border: 2px dashed hsla(var(--foreground) / 0.6);
+  border: 2px dashed oklch(from var(--foreground) l c h / 0.6);
   border-radius: calc(var(--border-radius) / 2);
   max-width: var(--select-width);
-  color: hsl(var(--foreground));
+  color: oklch(from var(--foreground) l c h);
 }
 
 .select-label {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: hsla(var(--foreground) / 0.8);
+  color: oklch(from var(--foreground) l c h / 0.8);
   padding-top: 0.5rem;
 }
 
@@ -41,11 +41,11 @@
 }
 
 [data-highlighted] {
-  outline: 2px dashed hsla(var(--primary) / 1);
+  outline: 2px dashed oklch(from var(--primary) l c h / 1);
   border-radius: calc(var(--border-radius) / 2);
 }
 
 [data-disabled] {
   opacity: 0.6;
-  background: hsl(var(--foreground) / 0.05);
+  background: oklch(from var(--foreground) l c h / 0.05);
 }
diff --git a/apps/website/src/routes/docs/headless/collapsible/examples/programmatic.tsx b/apps/website/src/routes/docs/headless/collapsible/examples/programmatic.tsx
index 088341686..ccec2d64b 100644
--- a/apps/website/src/routes/docs/headless/collapsible/examples/programmatic.tsx
+++ b/apps/website/src/routes/docs/headless/collapsible/examples/programmatic.tsx
@@ -9,7 +9,11 @@ export default component$(() => {
   return (
     <>
       <input
-        style={{ width: '20px', height: '20px', accentColor: 'hsl(var(--primary))' }}
+        style={{
+          width: '20px',
+          height: '20px',
+          accentColor: 'oklch(from var(--primary) l c h)',
+        }}
         type="checkbox"
         bind:checked={isOpen}
       />
diff --git a/apps/website/src/routes/docs/headless/collapsible/snippets/collapsible.css b/apps/website/src/routes/docs/headless/collapsible/snippets/collapsible.css
index 24d66fab8..71f87278e 100644
--- a/apps/website/src/routes/docs/headless/collapsible/snippets/collapsible.css
+++ b/apps/website/src/routes/docs/headless/collapsible/snippets/collapsible.css
@@ -4,7 +4,7 @@
 
 .collapsible-trigger {
   width: 100%;
-  border: 2px dotted hsla(var(--foreground) / 1);
+  border: 2px dotted oklch(from var(--foreground) l c h / 1);
   border-radius: calc(var(--border-radius) / 2);
   padding: 0.5rem;
   display: flex;
@@ -17,7 +17,7 @@
 }
 
 .collapsible-trigger:hover {
-  background-color: hsla(var(--primary) / 0.08);
+  background-color: oklch(from var(--primary) l c h / 0.08);
 }
 
 .collapsible-trigger svg {
@@ -36,10 +36,10 @@
 .collapsible-content {
   width: 100%;
   font-weight: 500;
-  background: hsla(var(--primary) / 0.2);
+  background: oklch(from var(--primary) l c h / 0.2);
   border-radius: calc(var(--border-radius) / 2);
   max-width: var(--select-width);
-  color: hsl(var(--foreground));
+  color: oklch(from var(--foreground) l c h);
   overflow: hidden;
   margin-top: -2px;
 }
@@ -50,7 +50,7 @@
 
 .collapsible-content-outline {
   padding: 0.5rem;
-  border: 2px dotted hsla(var(--primary) / 1);
+  border: 2px dotted oklch(from var(--primary) l c h / 1);
 }
 
 /* animations only */
diff --git a/apps/website/src/routes/docs/headless/combobox/snippets/combobox.css b/apps/website/src/routes/docs/headless/combobox/snippets/combobox.css
index 9db4ca4d3..3b9299d6c 100644
--- a/apps/website/src/routes/docs/headless/combobox/snippets/combobox.css
+++ b/apps/website/src/routes/docs/headless/combobox/snippets/combobox.css
@@ -17,11 +17,11 @@
 .combobox-trigger {
   border-radius: calc(var(--border-radius) / 2);
   width: 44px;
-  background: hsla(var(--primary) / 0.1);
+  background: oklch(from var(--primary) l c h / 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
-  border-left: 2px dotted hsla(var(--foreground));
+  border-left: 2px dotted oklch(from var(--foreground) l c h);
   position: absolute;
   right: 0;
 }
@@ -39,12 +39,12 @@
   min-height: 48px;
   display: flex;
   align-items: center;
-  outline: 2px dotted hsla(var(--foreground));
+  outline: 2px dotted oklch(from var(--foreground) l c h);
   position: relative;
 }
 
 .combobox-control:focus-within {
-  background: hsl(var(--primary) / 0.08);
+  background: oklch(from var(--primary) l c h / 0.08);
 }
 
 .combobox-control[data-invalid] {
@@ -54,17 +54,17 @@
 .combobox-popover {
   width: 100%;
   max-width: calc(var(--combobox-width) + 2.5rem);
-  background-color: hsl(var(--background));
+  background-color: oklch(from var(--background) l c h);
   padding: 0.5rem;
-  border: 2px dotted hsla(var(--foreground) / 0.6);
+  border: 2px dotted oklch(from var(--foreground) l c h / 0.6);
   border-radius: calc(var(--border-radius) / 2);
-  color: hsl(var(--foreground));
+  color: oklch(from var(--foreground) l c h);
 }
 
 .combobox-icon {
   width: 1.5rem;
   height: 1.5rem;
-  stroke: hsl(var(--foreground));
+  stroke: oklch(from var(--foreground) l c h);
 }
 
 .combobox-trigger[data-open] .combobox-icon {
@@ -80,7 +80,7 @@
 .combobox-label {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: hsla(var(--foreground) / 0.8);
+  color: oklch(from var(--foreground) l c h / 0.8);
   padding-top: 0.5rem;
 }
 
@@ -92,19 +92,19 @@
 .combobox-group-label {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: hsla(var(--foreground) / 0.8);
+  color: oklch(from var(--foreground) l c h / 0.8);
   padding-top: 0.5rem;
 }
 
 .combobox-root [data-highlighted] {
-  outline: 2px dotted hsla(var(--primary) / 1);
-  background: hsla(var(--primary) / 0.08);
+  outline: 2px dotted oklch(from var(--primary) l c h / 1);
+  background: oklch(from var(--primary) l c h / 0.08);
   border-radius: calc(var(--border-radius) / 2);
 }
 
 .combobox-root [data-disabled] {
   opacity: 0.6;
-  background: hsl(var(--foreground) / 0.05);
+  background: oklch(from var(--foreground) l c h / 0.05);
 }
 
 .combobox-pill {
@@ -113,7 +113,7 @@
   gap: 0.25rem;
   margin-inline: 0.25rem;
   padding: 0.25rem 0.5rem;
-  background-color: hsl(var(--muted));
+  background-color: oklch(from var(--muted) l c h);
   margin-block: 0.25rem;
 }
 
@@ -138,13 +138,13 @@
 }
 
 .combobox-clear {
-  background: hsl(var(--secondary) / 0.08);
+  background: oklch(from var(--secondary) l c h / 0.08);
 }
 
 .combobox-control:focus-within .combobox-pill {
-  background-color: hsl(var(--foreground) / 0.08);
+  background-color: oklch(from var(--foreground) l c h / 0.08);
 }
 
 .combobox-control:focus-within .combobox-clear {
-  background: hsl(var(--secondary) / 0.25);
+  background: oklch(from var(--secondary) l c h / 0.25);
 }
diff --git a/apps/website/src/routes/docs/headless/dropdown/snippets/dropdown.css b/apps/website/src/routes/docs/headless/dropdown/snippets/dropdown.css
index e50a3747e..16af14c96 100644
--- a/apps/website/src/routes/docs/headless/dropdown/snippets/dropdown.css
+++ b/apps/website/src/routes/docs/headless/dropdown/snippets/dropdown.css
@@ -34,7 +34,7 @@
   flex-direction: column;
   row-gap: 0.25rem;
   padding: 1rem 1rem 1rem 1.5rem;
-  border: 2px dotted hsl(var(--foreground));
+  border: 2px dotted oklch(from var(--foreground) l c h);
 }
 
 .dropdown-item {
@@ -68,7 +68,7 @@
 
 [data-disabled] {
   opacity: 0.6;
-  background: hsl(var(--foreground) / 0.05);
+  background: oklch(from var(--foreground) l c h / 0.05);
 }
 
 .dropdown-max-height {
diff --git a/apps/website/src/routes/docs/headless/label/snippets/label.css b/apps/website/src/routes/docs/headless/label/snippets/label.css
index bb35169cd..cd9c0c915 100644
--- a/apps/website/src/routes/docs/headless/label/snippets/label.css
+++ b/apps/website/src/routes/docs/headless/label/snippets/label.css
@@ -7,7 +7,7 @@ input {
   font-size: 15px;
   font-weight: 500;
   line-height: 35px;
-  color: hsl(var(--foreground));
+  color: oklch(from var(--foreground) l c h);
   display: flex;
   flex-direction: column;
 }
@@ -21,13 +21,13 @@ input {
   height: 35px;
   font-size: 15px;
   line-height: 1;
-  background-color: hsl(var(--background));
-  border: 2px dotted hsl(var(--foreground));
+  background-color: oklch(from var(--background) l c h);
+  border: 2px dotted oklch(from var(--foreground) l c h);
   border-radius: 0;
 }
 
 input:focus {
-  outline: 2px solid hsl(var(--foreground));
+  outline: 2px solid oklch(from var(--foreground) l c h);
 }
 
 input::selection {
diff --git a/apps/website/src/routes/docs/headless/modal/snippets/animation.css b/apps/website/src/routes/docs/headless/modal/snippets/animation.css
index 0928e5986..98eb44558 100644
--- a/apps/website/src/routes/docs/headless/modal/snippets/animation.css
+++ b/apps/website/src/routes/docs/headless/modal/snippets/animation.css
@@ -33,7 +33,7 @@
 }
 
 .modal-animation::backdrop {
-  background: hsla(0, 0%, 0%, 0.5);
+  background: oklch(from 0, 0%, 0%, 0.5);
 }
 
 @keyframes modalOpen {
@@ -89,7 +89,7 @@
 }
 
 .sheet::backdrop {
-  background: hsla(0, 0%, 0%, 0.5);
+  background: oklch(from 0, 0%, 0%, 0.5);
 }
 
 .sheet {
diff --git a/apps/website/src/routes/docs/headless/modal/snippets/modal.css b/apps/website/src/routes/docs/headless/modal/snippets/modal.css
index ebbdc4bb9..1e9146bb8 100644
--- a/apps/website/src/routes/docs/headless/modal/snippets/modal.css
+++ b/apps/website/src/routes/docs/headless/modal/snippets/modal.css
@@ -6,22 +6,22 @@
 .modal-trigger {
   padding: 0.5rem;
   width: 100%;
-  border: 2px dotted hsla(var(--foreground));
+  border: 2px dotted oklch(from var(--foreground) l c h);
   height: 44px;
   width: fit-content;
 }
 
 .modal-trigger:hover,
 .modal-close:hover {
-  background-color: hsla(var(--primary) / 0.08);
+  background-color: oklch(from var(--primary) l c h / 0.08);
 }
 
 .modal-panel {
   padding: 1rem;
   gap: 0.5rem;
-  border: 2px dotted hsla(var(--primary));
-  color: hsla(var(--foreground));
-  background-color: hsl(var(--background));
+  border: 2px dotted oklch(from var(--primary) l c h);
+  color: oklch(from var(--foreground) l c h);
+  background-color: oklch(from var(--background) l c h);
   max-width: 28rem;
   width: 100%;
   overflow: hidden;
@@ -38,7 +38,7 @@
 .modal-panel input {
   margin-bottom: 1rem;
   border-radius: calc(var(--border-radius));
-  background: hsla(var(--foreground) / 0.05);
+  background: oklch(from var(--foreground) l c h / 0.05);
 }
 
 .modal-panel h2 {
@@ -51,7 +51,7 @@
   width: 100%;
   padding: 0.5rem;
   border-radius: calc(var(--border-radius));
-  border: 2px dotted hsla(var(--ring));
+  border: 2px dotted oklch(from var(--ring) l c h);
 }
 
 .modal-panel footer {
@@ -63,15 +63,15 @@
 .modal-panel button {
   padding: 0.5rem;
   border-radius: calc(var(--border-radius));
-  border: 2px dotted hsla(var(--muted));
+  border: 2px dotted oklch(from var(--muted) l c h);
 }
 
 .modal-panel button:first-of-type {
-  border-color: hsla(var(--foreground));
+  border-color: oklch(from var(--foreground) l c h);
 }
 
 .modal-panel button:last-of-type {
-  border-color: hsla(var(--primary));
+  border-color: oklch(from var(--primary) l c h);
 }
 
 .modal-backdrop::backdrop {
@@ -99,7 +99,7 @@
   right: 0.55rem;
   top: 0.7rem;
   bottom: 0.7rem;
-  border: 1px solid hsla(var(--foreground));
+  border: 1px solid oklch(from var(--foreground) l c h);
   transform: rotate(-45deg);
   pointer-events: none;
 }
diff --git a/apps/website/src/routes/docs/headless/pagination/index.css b/apps/website/src/routes/docs/headless/pagination/index.css
index f660b8f71..72d231959 100644
--- a/apps/website/src/routes/docs/headless/pagination/index.css
+++ b/apps/website/src/routes/docs/headless/pagination/index.css
@@ -14,13 +14,13 @@
   height: 32px;
   cursor: pointer;
   border-radius: var(--rounded-base);
-  background-color: hsl(var(--background));
+  background-color: oklch(from var(--background) l c h);
   padding: 0 8px;
   color: var(--foreground);
-  border: 2px dotted hsl(var(--foreground));
+  border: 2px dotted oklch(from var(--foreground) l c h);
 }
 .prevNextButtons:hover {
-  background-color: hsl(var(--primary) / 0.08);
+  background-color: oklch(from var(--primary) l c h / 0.08);
 }
 .prevNextButtons:disabled {
   pointer-events: none;
@@ -40,7 +40,7 @@
   pointer-events: none;
   height: 32px;
   border-radius: var(--rounded-base);
-  color: hsl(var(--foreground));
-  border: 2px dotted hsl(var(--primary));
-  background-color: hsl(var(--primary) / 0.08);
+  color: oklch(from var(--foreground) l c h);
+  border: 2px dotted oklch(from var(--primary) l c h);
+  background-color: oklch(from var(--primary) l c h / 0.08);
 }
diff --git a/apps/website/src/routes/docs/headless/popover/examples/backdrop.css b/apps/website/src/routes/docs/headless/popover/examples/backdrop.css
index 0d208e0b7..13578419b 100644
--- a/apps/website/src/routes/docs/headless/popover/examples/backdrop.css
+++ b/apps/website/src/routes/docs/headless/popover/examples/backdrop.css
@@ -5,7 +5,7 @@
   inset: 0px;
   z-index: -1;
   pointer-events: none;
-  background-color: hsla(0, 0%, 0%, 0.5);
+  background-color: oklch(from 0, 0%, 0%, 0.5);
 }
 
 /* supported browsers */
@@ -15,5 +15,5 @@
   inset: 0px;
   z-index: -1;
   pointer-events: none;
-  background-color: hsla(0, 0%, 0%, 0.5);
+  background-color: oklch(from 0, 0%, 0%, 0.5);
 }
diff --git a/apps/website/src/routes/docs/headless/popover/snippets/popover.css b/apps/website/src/routes/docs/headless/popover/snippets/popover.css
index 02b7733de..5f7bda321 100644
--- a/apps/website/src/routes/docs/headless/popover/snippets/popover.css
+++ b/apps/website/src/routes/docs/headless/popover/snippets/popover.css
@@ -8,22 +8,22 @@
 
 .popover-trigger {
   border-radius: var(--border-radius);
-  border: 2px dotted hsla(var(--foreground));
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
+  border: 2px dotted oklch(from var(--foreground) l c h);
+  background-color: oklch(from var(--background) l c h);
+  color: oklch(from var(--foreground) l c h);
   padding: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
 .popover-trigger:hover {
-  background-color: hsla(var(--primary) / 0.08);
+  background-color: oklch(from var(--primary) l c h / 0.08);
 }
 
 .popover-panel {
   border-radius: var(--border-radius);
-  border: 2px dotted hsla(var(--primary));
-  background: hsla(var(--popover));
-  color: hsl(var(--foreground));
+  border: 2px dotted oklch(from var(--primary) l c h);
+  background: oklch(from var(--popover) l c h);
+  color: oklch(from var(--foreground) l c h);
   padding: 0.5rem;
   box-shadow:
     0 4px 6px -1px rgba(0, 0, 0, 0.1),
@@ -32,9 +32,9 @@
 
 .popover-invoker {
   border-radius: var(--border-radius);
-  border: 2px dotted hsla(var(--border));
-  background-color: hsl(var(--popover));
-  color: hsl(var(--foreground));
+  border: 2px dotted oklch(from var(--border) l c h);
+  background-color: oklch(from var(--popover) l c h);
+  color: oklch(from var(--foreground) l c h);
   padding: 0.5rem;
   box-shadow:
     0 4px 6px -1px rgba(0, 0, 0, 0.1),
diff --git a/apps/website/src/routes/docs/headless/progress/snippets/progress.css b/apps/website/src/routes/docs/headless/progress/snippets/progress.css
index 2b77c2f00..36b04b223 100644
--- a/apps/website/src/routes/docs/headless/progress/snippets/progress.css
+++ b/apps/website/src/routes/docs/headless/progress/snippets/progress.css
@@ -3,13 +3,13 @@
   width: 100%;
   overflow: hidden;
   border-radius: calc(var(--border-radius) / 2);
-  border: 2px dotted hsl(var(--primary));
+  border: 2px dotted oklch(from var(--primary) l c h);
 }
 
 .progress-indicator {
   height: 100%;
   width: 100%;
-  background-color: hsl(var(--primary));
+  background-color: oklch(from var(--primary) l c h);
 }
 
 @keyframes loading-flash {
@@ -42,7 +42,7 @@
 
 .progress-example-input {
   border-radius: calc(var(--border-radius) / 2);
-  border: 2px dotted hsl(var(--primary));
+  border: 2px dotted oklch(from var(--primary) l c h);
   margin-left: 0.5rem;
   max-width: 3rem;
   padding: 0.25rem;
diff --git a/apps/website/src/routes/docs/headless/select/snippets/select.css b/apps/website/src/routes/docs/headless/select/snippets/select.css
index cfaa2fd47..bb5b47dad 100644
--- a/apps/website/src/routes/docs/headless/select/snippets/select.css
+++ b/apps/website/src/routes/docs/headless/select/snippets/select.css
@@ -9,7 +9,7 @@
 .select-trigger {
   width: 100%;
   height: 100%;
-  border: 2px dotted hsla(var(--primary) / 1);
+  border: 2px dotted oklch(from var(--primary) l c h / 1);
   min-height: 44px;
   max-width: var(--select-width);
   padding-block: 0.5rem;
@@ -20,11 +20,11 @@
 }
 
 .select-trigger:hover {
-  background-color: hsla(var(--primary) / 0.08);
+  background-color: oklch(from var(--primary) l c h / 0.08);
 }
 
 .select-trigger:focus-visible {
-  outline: 2px solid hsla(var(--primary) / 1);
+  outline: 2px solid oklch(from var(--primary) l c h / 1);
   outline-offset: 2px;
 }
 
@@ -35,11 +35,11 @@
 .select-popover {
   width: 100%;
   max-width: calc(var(--select-width));
-  background-color: hsl(var(--background));
+  background-color: oklch(from var(--background) l c h);
   padding: 0.5rem;
-  border: 2px dotted hsla(var(--foreground) / 0.6);
+  border: 2px dotted oklch(from var(--foreground) l c h / 0.6);
   border-radius: calc(var(--border-radius) / 2);
-  color: hsl(var(--foreground));
+  color: oklch(from var(--foreground) l c h);
 }
 
 .select-item {
@@ -59,7 +59,7 @@
 .select-group-label {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: hsla(var(--foreground) / 0.8);
+  color: oklch(from var(--foreground) l c h / 0.8);
   padding-top: 0.5rem;
 }
 
@@ -74,13 +74,13 @@
   gap: 0.25rem;
   margin-inline: 0.25rem;
   padding: 0.25rem 0.5rem;
-  background-color: hsl(var(--muted));
+  background-color: oklch(from var(--muted) l c h);
   margin-block: 0.25rem;
 }
 
 .select-pill > span {
   padding: 0.15rem;
-  background: hsl(var(--foreground) / 0.3);
+  background: oklch(from var(--foreground) l c h / 0.3);
   border-radius: 50%;
 }
 
@@ -89,11 +89,11 @@
 }
 
 [data-highlighted] {
-  background-color: hsla(var(--primary) / 0.08);
-  outline: 2px dotted hsla(var(--primary) / 1);
+  background-color: oklch(from var(--primary) l c h / 0.08);
+  outline: 2px dotted oklch(from var(--primary) l c h / 1);
 }
 
 [data-disabled] {
   opacity: 0.6;
-  background: hsl(var(--foreground) / 0.05);
+  background: oklch(from var(--foreground) l c h / 0.05);
 }
diff --git a/apps/website/src/routes/docs/headless/separator/snippets/separator.css b/apps/website/src/routes/docs/headless/separator/snippets/separator.css
index eaec73138..0b2f1437f 100644
--- a/apps/website/src/routes/docs/headless/separator/snippets/separator.css
+++ b/apps/website/src/routes/docs/headless/separator/snippets/separator.css
@@ -1,14 +1,14 @@
 .separator-top {
-  border-top: 2px dotted hsl(var(--foreground));
+  border-top: 2px dotted oklch(from var(--foreground) l c h);
   margin-block: 0.5rem;
 }
 
 .separator-right {
-  border-right: 2px dotted hsl(var(--foreground));
+  border-right: 2px dotted oklch(from var(--foreground) l c h);
   margin-inline: 0.5rem;
 }
 
 .separator-left {
-  border-left: 2px dotted hsl(var(--foreground));
+  border-left: 2px dotted oklch(from var(--foreground) l c h);
   margin-inline: 0.5rem;
 }
diff --git a/apps/website/src/routes/docs/headless/tabs/index.css b/apps/website/src/routes/docs/headless/tabs/index.css
index 9e04c7dcd..73c268d5e 100644
--- a/apps/website/src/routes/docs/headless/tabs/index.css
+++ b/apps/website/src/routes/docs/headless/tabs/index.css
@@ -34,14 +34,14 @@
 .four-tabs-example [role='tab'][data-state='selected'],
 .vertical-tabs-example [role='tab'][data-state='selected'],
 .tabs-example [role='tab'][data-state='selected'] {
-  background: hsl(var(--primary));
-  color: hsl(var(--primary-foreground));
+  background: oklch(from var(--primary) l c h);
+  color: oklch(from var(--primary-foreground) l c h);
 }
 
 .four-tabs-example [role='tablist'],
 .vertical-tabs-example [role='tablist'],
 .tabs-example [role='tablist'] {
-  border: 2px dotted hsl(var(--foreground));
+  border: 2px dotted oklch(from var(--foreground) l c h);
   margin-bottom: 1rem;
   max-width: fit-content;
 }
diff --git a/apps/website/src/routes/docs/headless/toggle-group/snippets/toggle.css b/apps/website/src/routes/docs/headless/toggle-group/snippets/toggle.css
index 9500c9dfb..e2031a53f 100644
--- a/apps/website/src/routes/docs/headless/toggle-group/snippets/toggle.css
+++ b/apps/website/src/routes/docs/headless/toggle-group/snippets/toggle.css
@@ -2,7 +2,7 @@
   font-size: 15px;
   font-weight: 500;
   line-height: 35px;
-  color: hsl(var(--foreground));
+  color: oklch(from var(--foreground) l c h);
   display: flex;
   flex-direction: column;
 }
@@ -16,50 +16,50 @@
   height: 35px;
   font-size: 15px;
   line-height: 1;
-  background-color: hsl(var(--background));
-  border: 2px dotted hsla(var(--primary) / 1);
+  background-color: oklch(from var(--background) l c h);
+  border: 2px dotted oklch(from var(--primary) l c h / 1);
   border-radius: 0;
 }
 
 /* Default background when aria-pressed is false */
 .toggle[aria-pressed='false'] {
-  background-color: hsl(var(--background)) !important;
-  color: hsl(var(--foreground));
+  background-color: oklch(from var(--background) l c h) !important;
+  color: oklch(from var(--foreground) l c h);
 }
 /* Ensure focus or active state does not override when aria-pressed is false */
 .toggle[aria-pressed='false']:focus,
 .toggle[aria-pressed='false']:active {
-  background-color: hsl(var(--background)) !important;
-  color: hsl(var(--foreground));
+  background-color: oklch(from var(--background) l c h) !important;
+  color: oklch(from var(--foreground) l c h);
 }
 
 .toggle:hover {
-  background-color: hsla(var(--primary) / 0.08);
+  background-color: oklch(from var(--primary) l c h / 0.08);
 }
 
 /* Focused and Pressed states */
 .toggle:focus-visible {
-  outline: 2px solid hsla(var(--primary));
+  outline: 2px solid oklch(from var(--primary) l c h);
   outline-offset: 2px;
 }
 
 .toggle:focus,
 .toggle:active {
-  background-color: hsla(var(--primary));
+  background-color: oklch(from var(--primary) l c h);
   color: white;
 }
 
 /* When the toggle is pressed */
 .toggle[aria-pressed='true'] {
-  background-color: hsla(var(--primary)) !important;
+  background-color: oklch(from var(--primary) l c h) !important;
   color: white;
 }
 
 .toggle[aria-pressed='true']:focus {
-  outline: 2px solid hsla(var(--secondary));
+  outline: 2px solid oklch(from var(--secondary) l c h);
 }
 
 [data-disabled] {
   opacity: 0.6;
-  background: hsl(var(--foreground) / 0.05);
+  background: oklch(from var(--foreground) l c h / 0.05);
 }
diff --git a/apps/website/src/routes/docs/headless/toggle/snippets/toggle.css b/apps/website/src/routes/docs/headless/toggle/snippets/toggle.css
index 90b375262..8b5446076 100644
--- a/apps/website/src/routes/docs/headless/toggle/snippets/toggle.css
+++ b/apps/website/src/routes/docs/headless/toggle/snippets/toggle.css
@@ -2,7 +2,7 @@
   font-size: 15px;
   font-weight: 500;
   line-height: 35px;
-  color: hsl(var(--foreground));
+  color: oklch(from var(--foreground) l c h);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -17,50 +17,50 @@
   height: 35px;
   font-size: 15px;
   line-height: 1;
-  background-color: hsl(var(--background));
-  border: 2px dotted hsla(var(--primary) / 1);
+  background-color: oklch(from var(--background) l c h);
+  border: 2px dotted oklch(from var(--primary) l c h / 1);
   border-radius: 0;
 }
 
 /* Default background when aria-pressed is false */
 .toggle[aria-pressed='false'] {
-  background-color: hsl(var(--background)) !important;
-  color: hsl(var(--foreground));
+  background-color: oklch(from var(--background) l c h) !important;
+  color: oklch(from var(--foreground) l c h);
 }
 /* Ensure focus or active state does not override when aria-pressed is false */
 .toggle[aria-pressed='false']:focus,
 .toggle[aria-pressed='false']:active {
-  background-color: hsl(var(--background)) !important;
-  color: hsl(var(--foreground));
+  background-color: oklch(from var(--background) l c h) !important;
+  color: oklch(from var(--foreground) l c h);
 }
 
 .toggle:hover {
-  background-color: hsla(var(--primary) / 0.08);
+  background-color: oklch(from var(--primary) l c h / 0.08);
 }
 
 /* Focused and Pressed states */
 .toggle:focus-visible {
-  outline: 2px solid hsla(var(--primary));
+  outline: 2px solid oklch(from var(--primary) l c h);
   outline-offset: 2px;
 }
 
 .toggle:focus,
 .toggle:active {
-  background-color: hsla(var(--primary));
+  background-color: oklch(from var(--primary) l c h);
   color: white;
 }
 
 /* When the toggle is pressed */
 .toggle[aria-pressed='true'] {
-  background-color: hsla(var(--primary)) !important;
+  background-color: oklch(from var(--primary) l c h) !important;
   color: white;
 }
 
 .toggle[aria-pressed='true']:focus {
-  outline: 2px solid hsla(var(--secondary));
+  outline: 2px solid oklch(from var(--secondary) l c h);
 }
 
 [data-disabled] {
   opacity: 0.6;
-  background: hsl(var(--foreground) / 0.05);
+  background: oklch(from var(--foreground) l c h / 0.05);
 }
diff --git a/apps/website/src/routes/docs/headless/tooltip/snippets/tooltip.css b/apps/website/src/routes/docs/headless/tooltip/snippets/tooltip.css
index b0a6ae097..1142632e1 100644
--- a/apps/website/src/routes/docs/headless/tooltip/snippets/tooltip.css
+++ b/apps/website/src/routes/docs/headless/tooltip/snippets/tooltip.css
@@ -1,21 +1,21 @@
 .tooltip-trigger {
   border-radius: var(--border-radius);
-  border: 2px dotted hsla(var(--foreground));
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
+  border: 2px dotted oklch(from var(--foreground) l c h);
+  background-color: oklch(from var(--background) l c h);
+  color: oklch(from var(--foreground) l c h);
   padding: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
 .tooltip-trigger:hover {
-  background-color: hsla(var(--primary) / 0.08);
+  background-color: oklch(from var(--primary) l c h / 0.08);
 }
 
 .tooltip-content {
   border-radius: var(--border-radius);
-  border: 2px dotted hsla(var(--primary));
-  background: hsla(var(--tooltip));
-  color: hsl(var(--foreground));
+  border: 2px dotted oklch(from var(--primary) l c h);
+  background: oklch(from var(--background) l c h);
+  color: oklch(from var(--foreground) l c h);
   padding: 0.5rem;
   box-shadow:
     0 4px 6px -1px rgba(0, 0, 0, 0.1),
diff --git a/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx b/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx
index 853ee8e2c..808d4ad37 100644
--- a/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx
+++ b/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx
@@ -139,38 +139,38 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
+        border: 'oklch(from var(--border) l c h)',
+        input: 'oklch(from var(--input) l c h)',
+        ring: 'oklch(from var(--ring) l c h)',
+        background: 'oklch(from var(--background) l c h)',
+        foreground: 'oklch(from var(--foreground) l c h)',
         primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
+          DEFAULT: 'oklch(from var(--primary) l c h)',
+          foreground: 'oklch(from var(--primary-foreground) l c h)',
         },
         secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
+          DEFAULT: 'oklch(from var(--secondary) l c h)',
+          foreground: 'oklch(from var(--secondary-foreground) l c h)',
         },
         alert: {
-          DEFAULT: 'hsl(var(--alert))',
-          foreground: 'hsl(var(--alert-foreground))',
+          DEFAULT: 'oklch(from var(--alert) l c h)',
+          foreground: 'oklch(from var(--alert-foreground) l c h)',
         },
         muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
+          DEFAULT: 'oklch(from var(--muted) l c h)',
+          foreground: 'oklch(from var(--muted-foreground) l c h)',
         },
         accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
+          DEFAULT: 'oklch(from var(--accent) l c h)',
+          foreground: 'oklch(from var(--accent-foreground) l c h)',
         },
         card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
+          DEFAULT: 'oklch(from var(--card) l c h)',
+          foreground: 'oklch(from var(--card-foreground) l c h)',
         },
         popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
+          DEFAULT: 'oklch(from var(--popover) l c h)',
+          foreground: 'oklch(from var(--popover-foreground) l c h)',
         },
       },
       borderRadius: {
diff --git a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
index 884209c40..7a45def17 100644
--- a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
+++ b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
@@ -115,38 +115,38 @@ module.exports = {
     important: true,
     extend: {
       colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
+        border: 'oklch(from var(--border) l c h)',
+        input: 'oklch(from var(--input) l c h)',
+        ring: 'oklch(from var(--ring) l c h)',
+        background: 'oklch(from var(--background) l c h)',
+        foreground: 'oklch(from var(--foreground) l c h)',
         primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
+          DEFAULT: 'oklch(from var(--primary) l c h)',
+          foreground: 'oklch(from var(--primary-foreground) l c h)',
         },
         secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
+          DEFAULT: 'oklch(from var(--secondary) l c h)',
+          foreground: 'oklch(from var(--secondary-foreground) l c h)',
         },
         alert: {
-          DEFAULT: 'hsl(var(--alert))',
-          foreground: 'hsl(var(--alert-foreground))',
+          DEFAULT: 'oklch(from var(--alert) l c h)',
+          foreground: 'oklch(from var(--alert-foreground) l c h)',
         },
         muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
+          DEFAULT: 'oklch(from var(--muted) l c h)',
+          foreground: 'oklch(from var(--muted-foreground) l c h)',
         },
         accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
+          DEFAULT: 'oklch(from var(--accent) l c h)',
+          foreground: 'oklch(from var(--accent-foreground) l c h)',
         },
         card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
+          DEFAULT: 'oklch(from var(--card) l c h)',
+          foreground: 'oklch(from var(--card-foreground) l c h)',
         },
         popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
+          DEFAULT: 'oklch(from var(--popover) l c h)',
+          foreground: 'oklch(from var(--popover-foreground) l c h)',
         },
       },
       borderRadius: {
@@ -248,38 +248,38 @@ export default {
     important: true,
     extend: {
       colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
+        border: 'oklch(from var(--border) l c h)',
+        input: 'oklch(from var(--input) l c h)',
+        ring: 'oklch(from var(--ring) l c h)',
+        background: 'oklch(from var(--background) l c h)',
+        foreground: 'oklch(from var(--foreground) l c h)',
         primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
+          DEFAULT: 'oklch(from var(--primary) l c h)',
+          foreground: 'oklch(from var(--primary-foreground) l c h)',
         },
         secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
+          DEFAULT: 'oklch(from var(--secondary) l c h)',
+          foreground: 'oklch(from var(--secondary-foreground) l c h)',
         },
         alert: {
-          DEFAULT: 'hsl(var(--alert))',
-          foreground: 'hsl(var(--alert-foreground))',
+          DEFAULT: 'oklch(from var(--alert) l c h)',
+          foreground: 'oklch(from var(--alert-foreground) l c h)',
         },
         muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
+          DEFAULT: 'oklch(from var(--muted) l c h)',
+          foreground: 'oklch(from var(--muted-foreground) l c h)',
         },
         accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
+          DEFAULT: 'oklch(from var(--accent) l c h)',
+          foreground: 'oklch(from var(--accent-foreground) l c h)',
         },
         card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
+          DEFAULT: 'oklch(from var(--card) l c h)',
+          foreground: 'oklch(from var(--card-foreground) l c h)',
         },
         popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
+          DEFAULT: 'oklch(from var(--popover) l c h)',
+          foreground: 'oklch(from var(--popover-foreground) l c h)',
         },
       },
       borderRadius: {
@@ -380,38 +380,38 @@ export default {
     important: true,
     extend: {
       colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
+        border: 'oklch(from var(--border) l c h)',
+        input: 'oklch(from var(--input) l c h)',
+        ring: 'oklch(from var(--ring) l c h)',
+        background: 'oklch(from var(--background) l c h)',
+        foreground: 'oklch(from var(--foreground) l c h)',
         primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
+          DEFAULT: 'oklch(from var(--primary) l c h)',
+          foreground: 'oklch(from var(--primary-foreground) l c h)',
         },
         secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
+          DEFAULT: 'oklch(from var(--secondary) l c h)',
+          foreground: 'oklch(from var(--secondary-foreground) l c h)',
         },
         alert: {
-          DEFAULT: 'hsl(var(--alert))',
-          foreground: 'hsl(var(--alert-foreground))',
+          DEFAULT: 'oklch(from var(--alert) l c h)',
+          foreground: 'oklch(from var(--alert-foreground) l c h)',
         },
         muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
+          DEFAULT: 'oklch(from var(--muted) l c h)',
+          foreground: 'oklch(from var(--muted-foreground) l c h)',
         },
         accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
+          DEFAULT: 'oklch(from var(--accent) l c h)',
+          foreground: 'oklch(from var(--accent-foreground) l c h)',
         },
         card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
+          DEFAULT: 'oklch(from var(--card) l c h)',
+          foreground: 'oklch(from var(--card-foreground) l c h)',
         },
         popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
+          DEFAULT: 'oklch(from var(--popover) l c h)',
+          foreground: 'oklch(from var(--popover-foreground) l c h)',
         },
       },
       borderRadius: {
diff --git a/packages/kit-styled/src/templates/global.css b/packages/kit-styled/src/templates/global.css
index a619fbda2..4fdca4e0e 100644
--- a/packages/kit-styled/src/templates/global.css
+++ b/packages/kit-styled/src/templates/global.css
@@ -1285,7 +1285,7 @@
 
   *::-webkit-scrollbar-thumb {
     /* Thumb color */
-    background-color: hsla(var(--foreground) / 0.25);
+    background-color: oklch(from var(--foreground) l c h / 0.25);
     border-radius: 0.4rem;
     background-clip: padding-box;
     border-left: 0.3rem solid transparent;
@@ -1293,11 +1293,11 @@
   }
 
   .navigation-docs::-webkit-scrollbar-thumb {
-    background-color: hsla(var(--foreground) / 0.1);
+    background-color: oklch(from var(--foreground) l c h / 0.1);
   }
 
   .dark .navigation-docs::-webkit-scrollbar-thumb {
-    background-color: hsla(var(--foreground) / 0.2);
+    background-color: oklch(from var(--foreground) l c h / 0.2);
   }
 
   *::-webkit-scrollbar-corner {
@@ -1319,7 +1319,7 @@
   }
 
   .toc-scrollbar:hover.toc-scrollbar::-webkit-scrollbar-thumb {
-    background-color: hsla(var(--foreground) / 0.15);
+    background-color: oklch(from var(--foreground) l c h / 0.15);
   }
 
   .dark *::-webkit-scrollbar-track {
diff --git a/packages/kit-styled/src/templates/tailwind.extend._template b/packages/kit-styled/src/templates/tailwind.extend._template
index f12f3a038..190fb24dc 100644
--- a/packages/kit-styled/src/templates/tailwind.extend._template
+++ b/packages/kit-styled/src/templates/tailwind.extend._template
@@ -1,36 +1,36 @@
 colors: {
-  border: 'hsl(var(--border))',
-  input: 'hsl(var(--input))',
-  ring: 'hsl(var(--ring))',
-  background: 'hsl(var(--background))',
-  foreground: 'hsl(var(--foreground))',
+  border: 'oklch(from var(--border) l c h)',
+  input: 'oklch(from var(--input) l c h)',
+  ring: 'oklch(from var(--ring) l c h)',
+  background: 'oklch(from var(--background) l c h)',
+  foreground: 'oklch(from var(--foreground) l c h)',
   primary: {
-    DEFAULT: 'hsl(var(--primary))',
-    foreground: 'hsl(var(--primary-foreground))',
+    DEFAULT: 'oklch(from var(--primary) l c h)',
+    foreground: 'oklch(from var(--primary-foreground) l c h)',
   },
   secondary: {
-    DEFAULT: 'hsl(var(--secondary))',
-    foreground: 'hsl(var(--secondary-foreground))',
+    DEFAULT: 'oklch(from var(--secondary) l c h)',
+    foreground: 'oklch(from var(--secondary-foreground) l c h)',
   },
   alert: {
-    DEFAULT: 'hsl(var(--alert))',
-    foreground: 'hsl(var(--alert-foreground))',
+    DEFAULT: 'oklch(from var(--alert) l c h)',
+    foreground: 'oklch(from var(--alert-foreground) l c h)',
   },
   muted: {
-    DEFAULT: 'hsl(var(--muted))',
-    foreground: 'hsl(var(--muted-foreground))',
+    DEFAULT: 'oklch(from var(--muted) l c h)',
+    foreground: 'oklch(from var(--muted-foreground) l c h)',
   },
   accent: {
-    DEFAULT: 'hsl(var(--accent))',
-    foreground: 'hsl(var(--accent-foreground))',
+    DEFAULT: 'oklch(from var(--accent) l c h)',
+    foreground: 'oklch(from var(--accent-foreground) l c h)',
   },
   card: {
-    DEFAULT: 'hsl(var(--card))',
-    foreground: 'hsl(var(--card-foreground))',
+    DEFAULT: 'oklch(from var(--card) l c h)',
+    foreground: 'oklch(from var(--card-foreground) l c h)',
   },
   popover: {
-    DEFAULT: 'hsl(var(--popover))',
-    foreground: 'hsl(var(--popover-foreground))',
+    DEFAULT: 'oklch(from var(--popover) l c h)',
+    foreground: 'oklch(from var(--popover-foreground) l c h)',
   },
 },
 borderRadius: {

From cdbb438a0fe8f854421fa8746b4bdd021e7b3e3d Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Wed, 13 Aug 2025 15:23:30 +0200
Subject: [PATCH 06/42] fix: collapsible and accordion animations

---
 apps/website/src/global.css                   |  6 +++---
 .../collapsible/use-collapsible.tsx           |  3 +++
 .../src/utils/get-hidden-height.ts            | 20 -------------------
 3 files changed, 6 insertions(+), 23 deletions(-)
 delete mode 100644 packages/kit-headless/src/utils/get-hidden-height.ts

diff --git a/apps/website/src/global.css b/apps/website/src/global.css
index 8dfd628fc..b48a81541 100644
--- a/apps/website/src/global.css
+++ b/apps/website/src/global.css
@@ -147,11 +147,11 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background font-sans text-foreground;
+    @apply bg-background text-foreground font-sans;
   }
 
   p code {
-    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
+    @apply bg-accent rounded-sm border-b-2 px-2 py-0.5;
   }
 
   pre code {
@@ -164,7 +164,7 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background font-sans text-foreground;
+    @apply bg-background text-foreground font-sans;
   }
 }
 
diff --git a/packages/kit-headless/src/components/collapsible/use-collapsible.tsx b/packages/kit-headless/src/components/collapsible/use-collapsible.tsx
index 8c9d6955f..8efb33a13 100644
--- a/packages/kit-headless/src/components/collapsible/use-collapsible.tsx
+++ b/packages/kit-headless/src/components/collapsible/use-collapsible.tsx
@@ -14,6 +14,9 @@ export function useCollapsible() {
       display: 'block',
     });
 
+    // Remove the hidden attribute because tailwind can override it
+    clone.removeAttribute('hidden');
+
     el.after(clone);
     const height = clone.offsetHeight;
 
diff --git a/packages/kit-headless/src/utils/get-hidden-height.ts b/packages/kit-headless/src/utils/get-hidden-height.ts
deleted file mode 100644
index 981bccde1..000000000
--- a/packages/kit-headless/src/utils/get-hidden-height.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/* similar to React's useLayoutEffect, we want to get the height of a hidden element */
-export function getHiddenHeight(el: HTMLElement) {
-  const clone = el.cloneNode(true) as HTMLElement;
-
-  Object.assign(clone.style, {
-    overflow: 'visible',
-    height: 'auto',
-    maxHeight: 'none',
-    opacity: '0',
-    visibility: 'hidden',
-    display: 'block',
-  });
-
-  el.after(clone);
-  const height = clone.offsetHeight;
-
-  clone.remove();
-
-  return height;
-}

From 75cd2289d0f18b2e00d647fefcd42a7922a5c49e Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Wed, 13 Aug 2025 15:42:21 +0200
Subject: [PATCH 07/42] fix: modal is no longer centered by default

---
 apps/website/src/global.css                    |  6 +++---
 .../kit-styled/src/components/modal/modal.tsx  | 18 +++++++++---------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/website/src/global.css b/apps/website/src/global.css
index b48a81541..8dfd628fc 100644
--- a/apps/website/src/global.css
+++ b/apps/website/src/global.css
@@ -147,11 +147,11 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground font-sans;
+    @apply bg-background font-sans text-foreground;
   }
 
   p code {
-    @apply bg-accent rounded-sm border-b-2 px-2 py-0.5;
+    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
   }
 
   pre code {
@@ -164,7 +164,7 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground font-sans;
+    @apply bg-background font-sans text-foreground;
   }
 }
 
diff --git a/packages/kit-styled/src/components/modal/modal.tsx b/packages/kit-styled/src/components/modal/modal.tsx
index 3ccd42fcb..f21ef30dc 100644
--- a/packages/kit-styled/src/components/modal/modal.tsx
+++ b/packages/kit-styled/src/components/modal/modal.tsx
@@ -11,21 +11,21 @@ const Close = HeadlessModal.Close;
 
 export const panelVariants = cva(
   [
-    'bg-background text-foreground fixed p-6 transition-all backdrop:brightness-50 backdrop:backdrop-blur-xs',
-    'data-open:animate-in data-closing:animate-out data-closing:duration-300 data-open:duration-300',
-    'data-open:backdrop:animate-in data-closing:backdrop:animate-out data-closing:backdrop:fade-out data-open:backdrop:fade-in data-closing:backdrop:duration-300 data-open:backdrop:duration-300',
+    'fixed bg-background p-6 text-foreground transition-all backdrop:brightness-50 backdrop:backdrop-blur-xs',
+    'data-closing:animate-out data-closing:duration-300 data-open:animate-in data-open:duration-300',
+    'data-closing:backdrop:animate-out data-closing:backdrop:duration-300 data-closing:backdrop:fade-out data-open:backdrop:animate-in data-open:backdrop:duration-300 data-open:backdrop:fade-in',
   ],
   {
     variants: {
       position: {
         center:
-          'rounded-base data-closed:fade-out data-open:fade-in data-closed:zoom-out-95 data-open:zoom-in-95 data-open:slide-in-from-bottom-2 data-closing:backdrop:fade-out data-open:backdrop:fade-in max-w-lg shadow-lg',
-        top: 'rounded-b-base data-closing:slide-out-to-top data-open:slide-in-from-top inset-x-0 top-0 mt-0 mb-auto border-b',
+          'rounded-base m-auto max-w-lg shadow-lg data-closed:zoom-out-95 data-closed:fade-out data-closing:backdrop:fade-out data-open:zoom-in-95 data-open:fade-in data-open:slide-in-from-bottom-2 data-open:backdrop:fade-in',
+        top: 'rounded-b-base inset-x-0 top-0 mb-auto w-full border-b data-closing:slide-out-to-top data-open:slide-in-from-top',
         bottom:
-          'rounded-t-base data-closing:slide-out-to-bottom data-open:slide-in-from-bottom inset-x-0 bottom-0 mt-auto mb-0 border-t',
-        left: 'rounded-r-base data-closing:slide-out-to-left data-open:slide-in-from-left inset-y-0 left-0 mr-auto ml-0 h-full max-w-sm border-r',
+          'rounded-t-base inset-x-0 bottom-0 mt-auto w-full border-t data-closing:slide-out-to-bottom data-open:slide-in-from-bottom',
+        left: 'rounded-r-base inset-y-0 left-0 mr-auto h-full max-w-sm border-r data-closing:slide-out-to-left data-open:slide-in-from-left',
         right:
-          'rounded-l-base data-closing:slide-out-to-right data-open:slide-in-from-right inset-y-0 right-0 mr-0 ml-auto h-full max-w-sm border-l',
+          'rounded-l-base inset-y-0 right-0 ml-auto h-full max-w-sm border-l data-closing:slide-out-to-right data-open:slide-in-from-right',
       },
     },
     defaultVariants: {
@@ -60,7 +60,7 @@ const Description = component$<PropsOf<'p'>>(({ ...props }) => {
   return (
     <HeadlessModal.Description
       {...props}
-      class={cn('text-muted-foreground text-sm', props.class)}
+      class={cn('text-sm text-muted-foreground', props.class)}
     >
       <Slot />
     </HeadlessModal.Description>

From 50f1a619abfb8bce0cf133cf0132bc6a89d799c0 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Wed, 13 Aug 2025 16:02:05 +0200
Subject: [PATCH 08/42] docs: headless modal margins

---
 .../docs/headless/modal/examples/stacked.tsx  |  2 +-
 .../headless/modal/snippets/animation.css     | 21 +++++++++++--------
 .../docs/headless/modal/snippets/modal.css    |  1 +
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/apps/website/src/routes/docs/headless/modal/examples/stacked.tsx b/apps/website/src/routes/docs/headless/modal/examples/stacked.tsx
index 842ccf8b3..64dde14a6 100644
--- a/apps/website/src/routes/docs/headless/modal/examples/stacked.tsx
+++ b/apps/website/src/routes/docs/headless/modal/examples/stacked.tsx
@@ -14,7 +14,7 @@ export default component$(() => {
         </Modal.Description>
         <Modal.Root>
           <Modal.Trigger class="modal-trigger">Open Modal</Modal.Trigger>
-          <Modal.Panel class="modal" style={{ width: '300px' }}>
+          <Modal.Panel class="modal-panel" style={{ width: '300px' }}>
             <Modal.Title>I am a stacked Modal</Modal.Title>
             <Modal.Description>
               You cannot interact with the other modal until you close me.
diff --git a/apps/website/src/routes/docs/headless/modal/snippets/animation.css b/apps/website/src/routes/docs/headless/modal/snippets/animation.css
index 98eb44558..f4b64be70 100644
--- a/apps/website/src/routes/docs/headless/modal/snippets/animation.css
+++ b/apps/website/src/routes/docs/headless/modal/snippets/animation.css
@@ -21,14 +21,14 @@
 }
 
 .modal-animation::backdrop,
-.sheet::backdrop,
-.bottom-sheet::backdrop {
+.modal-panel.sheet::backdrop,
+.modal-panel.bottom-sheet::backdrop {
   animation: modalFadeIn 0.75s var(--modal-animation);
 }
 
 .modal-animation[data-closing]::backdrop,
-.sheet[data-closing]::backdrop,
-.bottom-sheet[data-closing]::backdrop {
+.modal-panel.sheet[data-closing]::backdrop,
+.modal-panel.bottom-sheet[data-closing]::backdrop {
   animation: modalFadeOut 0.35s var(--modal-animation);
 }
 
@@ -88,18 +88,19 @@
   }
 }
 
-.sheet::backdrop {
+.modal-panel.sheet::backdrop {
   background: oklch(from 0, 0%, 0%, 0.5);
 }
 
-.sheet {
+.modal-panel.sheet {
   right: 0;
   margin-right: 0;
   height: 100vh;
   animation: sheetOpen 0.75s var(--modal-animation);
+  margin-left: auto;
 }
 
-.sheet[data-closing] {
+.modal-panel.sheet[data-closing] {
   animation: sheetClose 0.35s var(--modal-animation);
 }
 
@@ -125,15 +126,17 @@
   }
 }
 
-.bottom-sheet {
+.modal-panel.bottom-sheet {
   height: auto;
   top: unset;
   bottom: 0;
   margin-bottom: 0;
+  width: 100%;
+  max-width: unset;
   animation: bottomSheetOpen 0.75s var(--modal-animation);
 }
 
-.bottom-sheet[data-closing] {
+.modal-panel.bottom-sheet[data-closing] {
   animation: bottomSheetClose 0.35s var(--modal-animation);
 }
 
diff --git a/apps/website/src/routes/docs/headless/modal/snippets/modal.css b/apps/website/src/routes/docs/headless/modal/snippets/modal.css
index 1e9146bb8..fcb2f6187 100644
--- a/apps/website/src/routes/docs/headless/modal/snippets/modal.css
+++ b/apps/website/src/routes/docs/headless/modal/snippets/modal.css
@@ -25,6 +25,7 @@
   max-width: 28rem;
   width: 100%;
   overflow: hidden;
+  margin: auto;
 }
 
 .modal-panel::backdrop {

From 218ce1b1fabb3f0863bb2b7d9543b5ef24f23ad2 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Wed, 13 Aug 2025 17:33:31 +0200
Subject: [PATCH 09/42] fix: border-width and stroke-width theme css variables

---
 .../src/components/showcase/showcase.tsx      |  8 ++--
 apps/website/src/global.css                   | 41 +++++++++++--------
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/apps/website/src/components/showcase/showcase.tsx b/apps/website/src/components/showcase/showcase.tsx
index f1c3ca4cd..a01bb504e 100644
--- a/apps/website/src/components/showcase/showcase.tsx
+++ b/apps/website/src/components/showcase/showcase.tsx
@@ -13,13 +13,13 @@ export const Showcase = component$<ShowcaseProps>(({ rawCode, ...props }) => {
       {!props.vertical ? (
         <Tabs.Root
           {...props}
-          selectedClassName="bg-primary hover:bg-primary text-primary-foreground hover:text-primary-foreground border-t font-medium "
+          selectedClassName="bg-primary hover:bg-primary text-primary-foreground hover:text-primary-foreground font-medium "
         >
-          <Tabs.List class="bg-accent flex rounded-t-lg border border-b-0">
-            <Tabs.Tab class="hover:bg-primary/90 hover:text-primary-foreground h-[44px] rounded-tl-md px-3 py-2">
+          <Tabs.List class="flex rounded-t-lg border border-b-0 bg-accent">
+            <Tabs.Tab class="h-[44px] rounded-tl-md px-3 py-2 hover:bg-primary/90 hover:text-primary-foreground">
               Preview
             </Tabs.Tab>
-            <Tabs.Tab class="hover:bg-primary/90 hover:text-primary-foreground h-[44px] px-3 py-2">
+            <Tabs.Tab class="h-[44px] px-3 py-2 hover:bg-primary/90 hover:text-primary-foreground">
               Code
             </Tabs.Tab>
           </Tabs.List>
diff --git a/apps/website/src/global.css b/apps/website/src/global.css
index 8dfd628fc..4f0129647 100644
--- a/apps/website/src/global.css
+++ b/apps/website/src/global.css
@@ -101,10 +101,6 @@
   --radius-xl: calc(var(--border-radius) + 0.75rem);
   --radius-2xl: calc(var(--border-radius) + 1rem);
   --radius-3xl: calc(var(--border-radius) + 1.5rem);
-  --default-border-width: calc(var(--border-width) + 1px);
-  --border-2: calc(var(--border-width) + 2px);
-  --border-4: calc(var(--border-width) + 4px);
-  --border-8: calc(var(--border-width) + 8px);
   --shadow-xs: var(--shadow-base);
   --shadow-sm: var(--shadow-sm);
   --shadow-md: var(--shadow-md);
@@ -112,10 +108,15 @@
   --shadow-xl: var(--shadow-xl);
   --shadow-2xl: var(--shadow-2xl);
   --shadow-inner: var(--shadow-inner);
-  --stroke-0: 0;
-  --stroke: var(--stroke-width);
-  --stroke-1: calc(var(--stroke-width) + 1px);
-  --stroke-2: calc(var(--stroke-width) + 2px);
+  --default-border-width: calc(var(--border-width) + 1px);
+  --border-width-base: var(--border-width);
+  --border-width-2: calc(var(--border-width) + 2px);
+  --border-width-4: calc(var(--border-width) + 4px);
+  --border-width-8: calc(var(--border-width) + 8px);
+  --stroke-width-0: 0px;
+  --stroke-width-base: var(--stroke-width);
+  --stroke-width-1: calc(var(--stroke-width) + 1px);
+  --stroke-width-2: calc(var(--stroke-width) + 2px);
   --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
   --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
   @keyframes collapsible-down {
@@ -136,10 +137,16 @@
   }
 }
 
-@layer utilities {
-  .press {
-    transform: var(--transform-press);
-  }
+@utility press {
+  transform: var(--transform-press);
+}
+@utility border-width-* {
+  /* prettier-ignore */
+  border: --value(--border-width-*);
+}
+@utility stroke-width-* {
+  /* prettier-ignore */
+  stroke: --value(--stroke-width-*);
 }
 
 @layer base {
@@ -194,7 +201,7 @@
 
   /* CSS PARSER: START - DO NOT REMOVE */
   .simple {
-    --border-width-base: 1px;
+    --border-width: 1px;
     --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
     --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
@@ -217,7 +224,7 @@
   }
 
   .brutalist.brutalist {
-    --border-width-base: 3px;
+    --border-width: 3px;
     --stroke-width: 2px;
     --border: black;
     --input: black;
@@ -243,7 +250,7 @@
   }
 
   .dark.brutalist.brutalist {
-    --border-width-base: 3px;
+    --border-width: 3px;
     --stroke-width: 2px;
     --underline: 2px;
     --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
@@ -267,7 +274,7 @@
   }
 
   .neumorphic.neumorphic {
-    --border-width-base: 0px;
+    --border-width: 0px;
     --stroke-width: 0px;
     --background: hsl(0 0 88%);
     --foreground: var(--color-zinc-900);
@@ -311,7 +318,7 @@
   }
 
   .dark.neumorphic.neumorphic {
-    --border-width-base: 0px;
+    --border-width: 0px;
     --stroke-width: 0px;
     --background: var(--color-zinc-700);
     --foreground: var(--color-zinc-200);

From 39e134bed3406214263305bb704ed9535de664a6 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Wed, 13 Aug 2025 21:13:00 +0200
Subject: [PATCH 10/42] fix: shadows and press animations

---
 apps/website/src/global.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/website/src/global.css b/apps/website/src/global.css
index 4f0129647..90dabacf6 100644
--- a/apps/website/src/global.css
+++ b/apps/website/src/global.css
@@ -101,7 +101,8 @@
   --radius-xl: calc(var(--border-radius) + 0.75rem);
   --radius-2xl: calc(var(--border-radius) + 1rem);
   --radius-3xl: calc(var(--border-radius) + 1.5rem);
-  --shadow-xs: var(--shadow-base);
+  --shadow-base: var(--shadow-base);
+  --shadow-xs: var(--shadow-xs);
   --shadow-sm: var(--shadow-sm);
   --shadow-md: var(--shadow-md);
   --shadow-lg: var(--shadow-lg);
@@ -148,6 +149,10 @@
   /* prettier-ignore */
   stroke: --value(--stroke-width-*);
 }
+@utility shadow-* {
+  /* prettier-ignore */
+  box-shadow: --value(--shadow-*);
+}
 
 @layer base {
   * {

From f030c22610c8f88e3d7ed42382958cbee6da6ce6 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Wed, 13 Aug 2025 21:14:52 +0200
Subject: [PATCH 11/42] docs: update modal code

---
 .../src/routes/docs/styled/modal/index.mdx       | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/website/src/routes/docs/styled/modal/index.mdx b/apps/website/src/routes/docs/styled/modal/index.mdx
index 8e5992edf..0331f3bd5 100644
--- a/apps/website/src/routes/docs/styled/modal/index.mdx
+++ b/apps/website/src/routes/docs/styled/modal/index.mdx
@@ -36,21 +36,21 @@ const Close = HeadlessModal.Close;
 
 export const panelVariants = cva(
   [
-    'fixed w-full bg-background p-6 text-foreground transition-all backdrop:brightness-50 backdrop:backdrop-blur-xs',
-    'data-closing:duration-300 data-open:duration-300 data-open:animate-in data-closing:animate-out',
-    'data-closing:backdrop:duration-300 data-open:backdrop:duration-300 data-open:backdrop:animate-in data-closing:backdrop:animate-out data-closing:backdrop:fade-out data-open:backdrop:fade-in',
+    'fixed bg-background p-6 text-foreground transition-all backdrop:brightness-50 backdrop:backdrop-blur-xs',
+    'data-closing:animate-out data-closing:duration-300 data-open:animate-in data-open:duration-300',
+    'data-closing:backdrop:animate-out data-closing:backdrop:duration-300 data-closing:backdrop:fade-out data-open:backdrop:animate-in data-open:backdrop:duration-300 data-open:backdrop:fade-in',
   ],
   {
     variants: {
       position: {
         center:
-          'max-w-lg rounded-base shadow-lg data-closed:fade-out data-open:fade-in data-closed:zoom-out-95 data-open:zoom-in-95 data-open:slide-in-from-bottom-2 data-closing:backdrop:fade-out data-open:backdrop:fade-in',
-        top: 'inset-x-0 top-0 mt-0 rounded-b-base border-b data-closing:slide-out-to-top data-open:slide-in-from-top',
+          'rounded-base m-auto max-w-lg shadow-lg data-closed:zoom-out-95 data-closed:fade-out data-closing:backdrop:fade-out data-open:zoom-in-95 data-open:fade-in data-open:slide-in-from-bottom-2 data-open:backdrop:fade-in',
+        top: 'rounded-b-base inset-x-0 top-0 mb-auto w-full border-b data-closing:slide-out-to-top data-open:slide-in-from-top',
         bottom:
-          'inset-x-0 bottom-0 mb-0 rounded-t-base border-t data-closing:slide-out-to-bottom data-open:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 ml-0 h-full max-w-sm rounded-r-base border-r data-closing:slide-out-to-left data-open:slide-in-from-left',
+          'rounded-t-base inset-x-0 bottom-0 mt-auto w-full border-t data-closing:slide-out-to-bottom data-open:slide-in-from-bottom',
+        left: 'rounded-r-base inset-y-0 left-0 mr-auto h-full max-w-sm border-r data-closing:slide-out-to-left data-open:slide-in-from-left',
         right:
-          'inset-y-0 right-0 mr-0 h-full max-w-sm rounded-l-base border-l data-closing:slide-out-to-right data-open:slide-in-from-right',
+          'rounded-l-base inset-y-0 right-0 ml-auto h-full max-w-sm border-l data-closing:slide-out-to-right data-open:slide-in-from-right',
       },
     },
     defaultVariants: {

From d79910942ba9fbe497d9f53b253bc1bfe694bae9 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Wed, 13 Aug 2025 21:20:19 +0200
Subject: [PATCH 12/42] chore: copy global.css for cli

---
 apps/component-tests/src/global.css          | 1672 +++++++++---------
 apps/website/src/global.css                  |    7 -
 packages/kit-styled/src/templates/global.css | 1671 +++++++++--------
 3 files changed, 1648 insertions(+), 1702 deletions(-)

diff --git a/apps/component-tests/src/global.css b/apps/component-tests/src/global.css
index ba02102a1..eb20b6317 100644
--- a/apps/component-tests/src/global.css
+++ b/apps/component-tests/src/global.css
@@ -1,154 +1,292 @@
+@layer theme, base, components, utilities;
 @import 'tailwindcss';
+@import 'tw-animate-css';
 
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
+@source "../../../packages/kit-styled";
+
+@custom-variant dark (&:is(.dark *));
 
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
 @layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
+  :root {
+    --background: white;
+    --foreground: var(--color-slate-900);
+    --muted: var(--color-slate-100);
+    --muted-foreground: var(--color-slate-700);
+    --popover: white;
+    --popover-foreground: var(--color-slate-900);
+    --card: white;
+    --card-foreground: var(--color-slate-900);
+    --border: var(--color-slate-200);
+    --input: var(--color-slate-200);
+    --primary: oklch(74.1% 38.5% 234.357);
+    --primary-foreground: black;
+    --secondary: oklch(69.9% 46.25% 301.823);
+    --secondary-foreground: black;
+    --accent: var(--color-slate-100);
+    --accent-foreground: var(--color-slate-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-900);
+    --border-width: 0px;
+    --border-radius: 0;
+    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+    --transform-press: scale(0.95);
+  }
+
+  .dark {
+    --background: var(--color-slate-950);
+    --foreground: var(--color-slate-50);
+    --muted: var(--color-slate-800);
+    --muted-foreground: var(--color-slate-300);
+    --popover: var(--color-slate-950);
+    --popover-foreground: var(--color-slate-50);
+    --card: var(--color-slate-950);
+    --card-foreground: var(--color-slate-50);
+    --border: var(--color-slate-800);
+    --input: var(--color-slate-800);
+    --primary: oklch(74.1% 38.5% 234.357);
+    --primary-foreground: black;
+    --secondary: oklch(69.9% 46.25% 301.823);
+    --secondary-foreground: black;
+    --accent: var(--color-slate-700);
+    --accent-foreground: var(--color-slate-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-300);
+    --border-width: 0px;
+    --border-radius: 0;
+    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+    --transform-press: scale(0.95);
   }
 }
 
-@utility accordion-animation-1 {
-  &[data-open] {
-    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-alert: var(--alert);
+  --color-alert-foreground: var(--alert-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-xs: var(--border-radius);
+  --radius-sm: calc(var(--border-radius) + 0.125rem);
+  --radius-md: calc(var(--border-radius) + 0.375rem);
+  --radius-lg: calc(var(--border-radius) + 0.5rem);
+  --radius-xl: calc(var(--border-radius) + 0.75rem);
+  --radius-2xl: calc(var(--border-radius) + 1rem);
+  --radius-3xl: calc(var(--border-radius) + 1.5rem);
+  --shadow-base: var(--shadow-base);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+  --shadow-inner: var(--shadow-inner);
+  --default-border-width: calc(var(--border-width) + 1px);
+  --border-width-base: var(--border-width);
+  --border-width-2: calc(var(--border-width) + 2px);
+  --border-width-4: calc(var(--border-width) + 4px);
+  --border-width-8: calc(var(--border-width) + 8px);
+  --stroke-width-0: 0px;
+  --stroke-width-base: var(--stroke-width);
+  --stroke-width-1: calc(var(--stroke-width) + 1px);
+  --stroke-width-2: calc(var(--stroke-width) + 2px);
+  --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+  --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--qwikui-collapsible-content-height);
+    }
+  }
+  @keyframes collapsible-up {
+    from {
+      height: var(--qwikui-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
   }
+}
 
-  &[data-closed] {
-    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
+@utility press {
+  transform: var(--transform-press);
+}
+@utility border-width-* {
+  /* prettier-ignore */
+  border: --value(--border-width-*);
+}
+@utility stroke-width-* {
+  /* prettier-ignore */
+  stroke: --value(--stroke-width-*);
+}
+@utility shadow-* {
+  /* prettier-ignore */
+  box-shadow: --value(--shadow-*);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background font-sans text-foreground;
+  }
+
+  p code {
+    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
+  }
+
+  pre code {
+    @apply whitespace-pre-wrap;
   }
 }
 
-/* Not used yet - could be used for the colored text on the landing page when the make-it-yours color is too bright in light mode or too dim in dark mode */
-@utility text-outlined {
-  @apply [text-shadow:-1px_0_#777,0_1px_#777,1px_0_#777,0_-1px_#777] dark:[text-shadow:-1px_0_#ccc,0_1px_#ccc,1px_0_#ccc,0_-1px_#ccc];
+@layer components {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background font-sans text-foreground;
+  }
 }
 
 @layer base {
-  :root {
-    --border-width: 0px;
-    --stroke-width: 0px;
-    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
-    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+  .border-radius-0 {
+    --border-radius: 0rem;
   }
 
-  .light {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --primary: 197 98% 52%;
-    --primary-foreground: 187 0% 0%;
-    --secondary: 266 96% 74%;
-    --secondary-foreground: 287 0% 0%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 40% 98%;
-    --ring: 222.2 47.4% 11.2%;
+  .border-radius-dot-25 {
+    --border-radius: 0.25rem;
   }
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --primary: 197 98% 52%;
-    --primary-foreground: 196 0% 0%;
-    --secondary: 266 96% 74%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 40% 98%;
-    --ring: 212.7 26.8% 83.9;
+  .border-radius-dot-50 {
+    --border-radius: 0.5rem;
+  }
+
+  .border-radius-dot-75 {
+    --border-radius: 0.75rem;
+  }
+
+  .border-radius-1 {
+    --border-radius: 1rem;
   }
 
   /* CSS PARSER: START - DO NOT REMOVE */
   .simple {
-    --border-width: 0px;
-    --stroke-width: 0px;
-    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --border-width: 1px;
+    --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
     --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: scale(0.95);
   }
 
   .brutalist.brutalist {
-    --border-width: 2px;
+    --border-width: 3px;
     --stroke-width: 2px;
-    --border: 0 0% 0%;
-    --input: 0 0% 0%;
-    --ring: 0 0% 0%;
-    --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1);
-    --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1);
-    --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-inner: inset 2px 2px 0px 0px rgba(0, 0, 0, 0);
+    --border: black;
+    --input: black;
+    --ring: black;
+    --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
+    --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
+    --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
+    --shadow: 5px 5px rgba(0, 0, 0, 1);
+    --shadow-md: 6px 6px rgba(0, 0, 0, 1);
+    --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
+    --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
+    --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+    --inset-shadow-2xs: inset -1px -1px rgba(0, 0, 0, 1);
+    --inset-shadow-xs: inset -2px -2px rgba(0, 0, 0, 1);
+    --inset-shadow-sm: inset -3px -3px rgba(0, 0, 0, 1);
+    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.5);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.5);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.5);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 1);
+    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 1);
     --transform-press: translate(4px, 4px);
   }
 
   .dark.brutalist.brutalist {
-    --border-width: 2px;
+    --border-width: 3px;
     --stroke-width: 2px;
-    --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1);
-    --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1);
-    --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+    --underline: 2px;
+    --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
+    --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
+    --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
+    --shadow: 5px 5px rgba(0, 0, 0, 1);
+    --shadow-md: 6px 6px rgba(0, 0, 0, 1);
+    --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
+    --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
+    --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+    --inset-shadow-2xs: inset -1px -1px rgba(0, 0, 0, 1);
+    --inset-shadow-xs: inset -2px -2px rgba(0, 0, 0, 1);
+    --inset-shadow-sm: inset -3px -3px rgba(0, 0, 0, 1);
+    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.5);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.5);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.5);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 1);
+    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 1);
     --transform-press: translate(4px, 4px);
   }
 
   .neumorphic.neumorphic {
     --border-width: 0px;
     --stroke-width: 0px;
-    --background: 0 0 88%;
-    --foreground: 240 5.9% 10%;
-    --popover: 0 0 88%;
-    --popover-foreground: 240 5.9% 10%;
-    --card: 0 0 88%;
-    --card-foreground: 240 5.9% 10%;
-    --border: 0 0% 80.2%;
-    --ring: 0 0% 80.2%;
-    --input: 0 0% 80.2%;
+    --background: hsl(0 0 88%);
+    --foreground: var(--color-zinc-900);
+    --popover: hsl(0 0 88%);
+    --popover-foreground: var(--color-zinc-900);
+    --card: hsl(0 0 88%);
+    --card-foreground: var(--color-zinc-900);
+    --border: hsl(0 0% 80.2%);
+    --ring: hsl(0 0% 80.2%);
+    --input: hsl(0 0% 80.2%);
     --shadow-base:
       -3px -3px 6px #bebebe, 3px 3px 6px #ffffff,
       inset 1px 1px 2px rgba(190, 190, 190, 0.5),
@@ -184,15 +322,15 @@
   .dark.neumorphic.neumorphic {
     --border-width: 0px;
     --stroke-width: 0px;
-    --background: 240 5.3% 26.1%;
-    --foreground: 240 5.9% 90%;
-    --popover: 240 5.3% 26.1%;
-    --popover-foreground: 240 5.9% 90%;
-    --card: 240 5.3% 26.1%;
-    --card-foreground: 240 5.9% 90%;
-    --border: 240 5.9% 20%;
-    --ring: 240 5.9% 20%;
-    --input: 240 5.9% 20%;
+    --background: var(--color-zinc-700);
+    --foreground: var(--color-zinc-200);
+    --popover: var(--color-zinc-700);
+    --popover-foreground: var(--color-zinc-200);
+    --card: var(--color-zinc-700);
+    --card-foreground: var(--color-zinc-200);
+    --border: hsl(240 5.9% 20%);
+    --ring: hsl(240 5.9% 20%);
+    --input: hsl(240 5.9% 20%);
     --shadow-base:
       -3px -3px 6px #2c2c31, 3px 3px 6px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
@@ -218,1198 +356,1036 @@
     --transform-press: scale(0.95);
   }
 
-  .border-radius-0 {
-    --border-radius: 0;
-  }
-
-  .border-radius-dot-25 {
-    --border-radius: 0.25rem;
-  }
-
-  .border-radius-dot-50 {
-    --border-radius: 0.5rem;
-  }
-
-  .border-radius-dot-75 {
-    --border-radius: 0.75rem;
-  }
-
-  .border-radius-1 {
-    --border-radius: 1rem;
-  }
-
   /* use colors from colors.ts */
 
   .base-slate {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 40% 98%;
-    --ring: 222.2 47.4% 11.2%;
+    --background: white;
+    --foreground: var(--color-slate-950);
+    --muted: var(--color-slate-100);
+    --muted-foreground: var(--color-slate-700);
+    --popover: white;
+    --popover-foreground: var(--color-slate-900);
+    --card: white;
+    --card-foreground: var(--color-slate-900);
+    --border: var(--color-slate-200);
+    --input: var(--color-slate-200);
+    --secondary: var(--color-slate-900);
+    --secondary-foreground: white;
+    --accent: var(--color-slate-100);
+    --accent-foreground: var(--color-slate-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-900);
   }
   .dark.base-slate {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 40% 98%;
-    --ring: 212.7 26.8% 83.9;
+    --background: var(--color-slate-950);
+    --foreground: var(--color-slate-50);
+    --muted: var(--color-slate-800);
+    --muted-foreground: var(--color-slate-300);
+    --popover: var(--color-slate-950);
+    --popover-foreground: var(--color-slate-50);
+    --card: var(--color-slate-950);
+    --card-foreground: var(--color-slate-50);
+    --border: var(--color-slate-800);
+    --input: var(--color-slate-800);
+    --secondary: var(--color-slate-100);
+    --secondary-foreground: black;
+    --accent: var(--color-slate-700);
+    --accent-foreground: var(--color-slate-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-300);
   }
 
   .base-gray {
-    --background: 0 0% 100%;
-    --foreground: 220.9 39.3% 11%;
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 220.9 39.3% 11%;
-    --card: 0 0% 100%;
-    --card-foreground: 220.9 39.3% 11%;
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
-    --secondary: 220.9 39.3% 11%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 20% 98%;
-    --ring: 220.9 39.3% 11%;
+    --background: white;
+    --foreground: var(--color-gray-950);
+    --muted: var(--color-gray-100);
+    --muted-foreground: var(--color-gray-700);
+    --popover: white;
+    --popover-foreground: var(--color-gray-950);
+    --card: white;
+    --card-foreground: var(--color-gray-950);
+    --border: var(--color-gray-200);
+    --input: var(--color-gray-200);
+    --secondary: var(--color-gray-950);
+    --secondary-foreground: white;
+    --accent: var(--color-gray-100);
+    --accent-foreground: var(--color-gray-950);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-gray-50);
+    --ring: var(--color-gray-950);
   }
   .dark.base-gray {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 20% 98%;
-    --ring: 216 12.2% 83.9%;
+    --background: var(--color-gray-950);
+    --foreground: var(--color-gray-50);
+    --muted: var(--color-gray-800);
+    --muted-foreground: var(--color-gray-300);
+    --popover: var(--color-gray-950);
+    --popover-foreground: var(--color-gray-50);
+    --card: var(--color-gray-950);
+    --card-foreground: var(--color-gray-50);
+    --border: var(--color-gray-800);
+    --input: var(--color-gray-800);
+    --secondary: var(--color-gray-100);
+    --secondary-foreground: black;
+    --accent: var(--color-gray-700);
+    --accent-foreground: var(--color-gray-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-gray-50);
+    --ring: var(--color-gray-300);
   }
 
   .base-zinc {
-    --background: 0 0% 100%;
-    --foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 5.9% 10%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 5.9% 10%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --secondary: 240 5.9% 10%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 240 5.9% 10%;
+    --background: white;
+    --foreground: var(--color-zinc-900);
+    --muted: var(--color-zinc-100);
+    --muted-foreground: var(--color-zinc-700);
+    --popover: white;
+    --popover-foreground: var(--color-zinc-900);
+    --card: white;
+    --card-foreground: var(--color-zinc-900);
+    --border: var(--color-zinc-200);
+    --input: var(--color-zinc-200);
+    --secondary: var(--color-zinc-900);
+    --secondary-foreground: white;
+    --accent: var(--color-zinc-100);
+    --accent-foreground: var(--color-zinc-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-zinc-50);
+    --ring: var(--color-zinc-900);
   }
   .dark.base-zinc {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 240 4.9% 83.9%;
+    --background: var(--color-zinc-950);
+    --foreground: var(--color-zinc-50);
+    --muted: var(--color-zinc-800);
+    --muted-foreground: var(--color-zinc-300);
+    --popover: var(--color-zinc-950);
+    --popover-foreground: var(--color-zinc-50);
+    --card: var(--color-zinc-950);
+    --card-foreground: var(--color-zinc-50);
+    --border: var(--color-zinc-800);
+    --input: var(--color-zinc-800);
+    --secondary: var(--color-zinc-100);
+    --secondary-foreground: black;
+    --accent: var(--color-zinc-700);
+    --accent-foreground: var(--color-zinc-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-zinc-50);
+    --ring: var(--color-zinc-300);
   }
 
   .base-neutral {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 9%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --secondary: 0 0% 9%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 0 0% 9%;
+    --background: white;
+    --foreground: var(--color-neutral-900);
+    --muted: var(--color-neutral-100);
+    --muted-foreground: var(--color-neutral-700);
+    --popover: white;
+    --popover-foreground: var(--color-neutral-900);
+    --card: white;
+    --card-foreground: var(--color-neutral-900);
+    --border: var(--color-neutral-200);
+    --input: var(--color-neutral-200);
+    --secondary: var(--color-neutral-900);
+    --secondary-foreground: white;
+    --accent: var(--color-neutral-100);
+    --accent-foreground: var(--color-neutral-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-neutral-50);
+    --ring: var(--color-neutral-900);
   }
   .dark.base-neutral {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 0 0% 83.1%;
+    --background: var(--color-neutral-950);
+    --foreground: var(--color-neutral-50);
+    --muted: var(--color-neutral-800);
+    --muted-foreground: var(--color-neutral-300);
+    --popover: var(--color-neutral-950);
+    --popover-foreground: var(--color-neutral-50);
+    --card: var(--color-neutral-950);
+    --card-foreground: var(--color-neutral-50);
+    --border: var(--color-neutral-800);
+    --input: var(--color-neutral-800);
+    --secondary: var(--color-neutral-100);
+    --secondary-foreground: black;
+    --accent: var(--color-neutral-700);
+    --accent-foreground: var(--color-neutral-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-neutral-50);
+    --ring: var(--color-neutral-300);
   }
 
   .base-stone {
-    --background: 0 0% 100%;
-    --foreground: 24 9.8% 10%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 24 9.8% 10%;
-    --card: 0 0% 100%;
-    --card-foreground: 24 9.8% 10%;
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --secondary: 24 9.8% 10%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 60 9.1% 97.8%;
-    --ring: 24 9.8% 10%;
+    --background: white;
+    --foreground: var(--color-stone-900);
+    --muted: var(--color-stone-100);
+    --muted-foreground: var(--color-stone-700);
+    --popover: white;
+    --popover-foreground: var(--color-stone-900);
+    --card: white;
+    --card-foreground: var(--color-stone-900);
+    --border: var(--color-stone-200);
+    --input: var(--color-stone-200);
+    --secondary: var(--color-stone-900);
+    --secondary-foreground: white;
+    --accent: var(--color-stone-100);
+    --accent-foreground: var(--color-stone-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-stone-50);
+    --ring: var(--color-stone-900);
   }
   .dark.base-stone {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 24 5.7% 82.9%;
+    --background: var(--color-stone-950);
+    --foreground: var(--color-stone-50);
+    --muted: var(--color-stone-800);
+    --muted-foreground: var(--color-stone-300);
+    --popover: var(--color-stone-950);
+    --popover-foreground: var(--color-stone-50);
+    --card: var(--color-stone-950);
+    --card-foreground: var(--color-stone-50);
+    --border: var(--color-stone-800);
+    --input: var(--color-stone-800);
+    --secondary: var(--color-stone-100);
+    --secondary-foreground: black;
+    --accent: var(--color-stone-700);
+    --accent-foreground: var(--color-stone-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-stone-50);
+    --ring: var(--color-stone-300);
   }
 
   .primary-slate-100,
   .dark.primary-slate-900 {
-    --primary: 210 40% 96.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-slate-100);
+    --primary-foreground: black;
   }
   .primary-slate-200,
   .dark.primary-slate-800 {
-    --primary: 214.3 31.8% 91.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-slate-200);
+    --primary-foreground: black;
   }
   .primary-slate-300 {
-    --primary: 212.7 26.8% 83.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-slate-300);
+    --primary-foreground: black;
   }
   .primary-slate-400 {
-    --primary: 215 20.2% 65.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-slate-400);
+    --primary-foreground: black;
   }
   .primary-slate-500 {
-    --primary: 215.4 16.3% 46.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-slate-500);
+    --primary-foreground: white;
   }
   .primary-slate-600 {
-    --primary: 215.3 19.3% 34.5%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-slate-600);
+    --primary-foreground: white;
   }
   .primary-slate-700 {
-    --primary: 215.3 25% 26.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-slate-700);
+    --primary-foreground: white;
   }
   .primary-slate-800 {
-    --primary: 217.2 32.6% 17.5%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-slate-800);
+    --primary-foreground: white;
   }
   .primary-slate-900 {
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-slate-900);
+    --primary-foreground: white;
   }
 
   .primary-gray-100,
   .dark.primary-gray-900 {
-    --primary: 220 14.3% 95.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-gray-100);
+    --primary-foreground: black;
   }
   .primary-gray-200,
   .dark.primary-gray-800 {
-    --primary: 220 13% 91%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-gray-200);
+    --primary-foreground: black;
   }
   .primary-gray-300 {
-    --primary: 216 12.2% 83.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-gray-300);
+    --primary-foreground: black;
   }
   .primary-gray-400 {
-    --primary: 217.9 10.6% 64.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-gray-400);
+    --primary-foreground: black;
   }
   .primary-gray-500 {
-    --primary: 220 8.9% 46.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-gray-500);
+    --primary-foreground: white;
   }
   .primary-gray-600 {
-    --primary: 215 13.8% 34.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-gray-600);
+    --primary-foreground: white;
   }
   .primary-gray-700 {
-    --primary: 216.9 19.1% 26.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-gray-700);
+    --primary-foreground: white;
   }
   .primary-gray-800 {
-    --primary: 215 27.9% 16.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-gray-800);
+    --primary-foreground: white;
   }
   .primary-gray-900 {
-    --primary: 220.9 39.3% 11%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-gray-950);
+    --primary-foreground: white;
   }
 
   .primary-zinc-100,
   .dark.primary-zinc-900 {
-    --primary: 240 4.8% 95.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-zinc-100);
+    --primary-foreground: black;
   }
   .primary-zinc-200,
   .dark.primary-zinc-800 {
-    --primary: 240 5.9% 90%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-zinc-200);
+    --primary-foreground: black;
   }
   .primary-zinc-300 {
-    --primary: 240 4.9% 83.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-zinc-300);
+    --primary-foreground: black;
   }
   .primary-zinc-400 {
-    --primary: 240 5% 64.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-zinc-400);
+    --primary-foreground: black;
   }
   .primary-zinc-500 {
-    --primary: 240 3.8% 46.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-zinc-500);
+    --primary-foreground: white;
   }
   .primary-zinc-600 {
-    --primary: 240 5.2% 33.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-zinc-600);
+    --primary-foreground: white;
   }
   .primary-zinc-700 {
-    --primary: 240 5.3% 26.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-zinc-700);
+    --primary-foreground: white;
   }
   .primary-zinc-800 {
-    --primary: 240 3.7% 15.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-zinc-800);
+    --primary-foreground: white;
   }
   .primary-zinc-900 {
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-zinc-900);
+    --primary-foreground: white;
   }
 
   .primary-neutral-100,
   .dark.primary-neutral-900 {
-    --primary: 0 0% 96.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-neutral-100);
+    --primary-foreground: black;
   }
   .primary-neutral-200,
   .dark.primary-neutral-800 {
-    --primary: 0 0% 89.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-neutral-200);
+    --primary-foreground: black;
   }
   .primary-neutral-300 {
-    --primary: 0 0% 83.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-neutral-300);
+    --primary-foreground: black;
   }
   .primary-neutral-400 {
-    --primary: 0 0% 63.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-neutral-400);
+    --primary-foreground: black;
   }
   .primary-neutral-500 {
-    --primary: 0 0% 45.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-neutral-500);
+    --primary-foreground: white;
   }
   .primary-neutral-600 {
-    --primary: 0 0% 32.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-neutral-600);
+    --primary-foreground: white;
   }
   .primary-neutral-700 {
-    --primary: 0 0% 25.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-neutral-700);
+    --primary-foreground: white;
   }
   .primary-neutral-800 {
-    --primary: 0 0% 14.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-neutral-800);
+    --primary-foreground: white;
   }
   .primary-neutral-900 {
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-neutral-900);
+    --primary-foreground: white;
   }
 
   .primary-stone-100,
   .dark.primary-stone-900 {
-    --primary: 60 4.8% 95.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-stone-100);
+    --primary-foreground: black;
   }
   .primary-stone-200,
   .dark.primary-stone-800 {
-    --primary: 20 5.9% 90%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-stone-200);
+    --primary-foreground: black;
   }
   .primary-stone-300 {
-    --primary: 24 5.7% 82.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-stone-300);
+    --primary-foreground: black;
   }
   .primary-stone-400 {
-    --primary: 24 5.4% 63.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-stone-400);
+    --primary-foreground: black;
   }
   .primary-stone-500 {
-    --primary: 25 5.3% 44.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-stone-500);
+    --primary-foreground: white;
   }
   .primary-stone-600 {
-    --primary: 33.3 5.5% 32.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-stone-600);
+    --primary-foreground: white;
   }
   .primary-stone-700 {
-    --primary: 30 6.3% 25.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-stone-700);
+    --primary-foreground: white;
   }
   .primary-stone-800 {
-    --primary: 12 6.5% 15.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-stone-800);
+    --primary-foreground: white;
   }
   .primary-stone-900 {
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-stone-900);
+    --primary-foreground: white;
   }
 
   .primary-red-100 {
-    --primary: 0 93.3% 94.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-red-100);
+    --primary-foreground: black;
   }
   .primary-red-200 {
-    --primary: 0 96.3% 89.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-red-200);
+    --primary-foreground: black;
   }
   .primary-red-300 {
-    --primary: 0 93.5% 81.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-red-300);
+    --primary-foreground: black;
   }
   .primary-red-400 {
-    --primary: 0 90.6% 70.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-red-400);
+    --primary-foreground: black;
   }
   .primary-red-500 {
-    --primary: 0 84.2% 60.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-red-500);
+    --primary-foreground: white;
   }
   .primary-red-600 {
-    --primary: 0 72.2% 50.6%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-red-600);
+    --primary-foreground: white;
   }
   .primary-red-700 {
-    --primary: 0 73.7% 41.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-red-700);
+    --primary-foreground: white;
   }
   .primary-red-800 {
-    --primary: 0 70% 35.3%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-red-800);
+    --primary-foreground: white;
   }
   .primary-red-900 {
-    --primary: 0 62.8% 30.6%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-red-900);
+    --primary-foreground: white;
   }
 
   .primary-orange-100 {
-    --primary: 34.3 100% 91.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-orange-100);
+    --primary-foreground: black;
   }
   .primary-orange-200 {
-    --primary: 32.1 97.7% 83.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-orange-200);
+    --primary-foreground: black;
   }
   .primary-orange-300 {
-    --primary: 30.7 97.2% 72.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-orange-300);
+    --primary-foreground: black;
   }
   .primary-orange-400 {
-    --primary: 27 96% 61%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-orange-400);
+    --primary-foreground: black;
   }
   .primary-orange-500 {
-    --primary: 24.6 95% 53.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-orange-500);
+    --primary-foreground: black;
   }
   .primary-orange-600 {
-    --primary: 20.5 90.2% 48.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-orange-600);
+    --primary-foreground: white;
   }
   .primary-orange-700 {
-    --primary: 17.5 88.3% 40.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-orange-700);
+    --primary-foreground: white;
   }
   .primary-orange-800 {
-    --primary: 15 79.1% 33.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-orange-800);
+    --primary-foreground: white;
   }
   .primary-orange-900 {
-    --primary: 15.3 74.6% 27.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-orange-900);
+    --primary-foreground: white;
   }
 
   .primary-amber-100 {
-    --primary: 48 96.5% 88.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-amber-100);
+    --primary-foreground: black;
   }
   .primary-amber-200 {
-    --primary: 48 96.6% 76.7%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-amber-200);
+    --primary-foreground: black;
   }
   .primary-amber-300 {
-    --primary: 45.9 96.7% 64.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-amber-300);
+    --primary-foreground: black;
   }
   .primary-amber-400 {
-    --primary: 43.3 96.4% 56.3%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-amber-400);
+    --primary-foreground: black;
   }
   .primary-amber-500 {
-    --primary: 37.7 92.1% 50.2%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-amber-500);
+    --primary-foreground: black;
   }
   .primary-amber-600 {
-    --primary: 32.1 94.6% 43.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-amber-600);
+    --primary-foreground: white;
   }
   .primary-amber-700 {
-    --primary: 26 90.5% 37.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-amber-700);
+    --primary-foreground: white;
   }
   .primary-amber-800 {
-    --primary: 22.7 82.5% 31.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-amber-800);
+    --primary-foreground: white;
   }
   .primary-amber-900 {
-    --primary: 21.7 77.8% 26.5%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-amber-900);
+    --primary-foreground: white;
   }
 
   .primary-yellow-100 {
-    --primary: 54.9 96.7% 88%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-yellow-100);
+    --primary-foreground: black;
   }
   .primary-yellow-200 {
-    --primary: 52.8 98.3% 76.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-yellow-200);
+    --primary-foreground: black;
   }
   .primary-yellow-300 {
-    --primary: 50.4 97.8% 63.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-yellow-300);
+    --primary-foreground: black;
   }
   .primary-yellow-400 {
-    --primary: 47.9 95.8% 53.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-yellow-400);
+    --primary-foreground: black;
   }
   .primary-yellow-500 {
-    --primary: 45.4 93.4% 47.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-yellow-500);
+    --primary-foreground: black;
   }
   .primary-yellow-600 {
-    --primary: 40.6 96.1% 39.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-yellow-600);
+    --primary-foreground: white;
   }
   .primary-yellow-700 {
-    --primary: 35.5 91.7% 32.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-yellow-700);
+    --primary-foreground: white;
   }
   .primary-yellow-800 {
-    --primary: 31.8 81% 28.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-yellow-800);
+    --primary-foreground: white;
   }
   .primary-yellow-900 {
-    --primary: 28.4 72.5% 25.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-yellow-900);
+    --primary-foreground: white;
   }
 
   .primary-lime-100 {
-    --primary: 79.6 89.1% 89.2%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-lime-100);
+    --primary-foreground: black;
   }
   .primary-lime-200 {
-    --primary: 80.9 88.5% 79.6%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-lime-200);
+    --primary-foreground: black;
   }
   .primary-lime-300 {
-    --primary: 82 84.5% 67.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-lime-300);
+    --primary-foreground: black;
   }
   .primary-lime-400 {
-    --primary: 82.7 78% 55.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-lime-400);
+    --primary-foreground: black;
   }
   .primary-lime-500 {
-    --primary: 83.7 80.5% 44.3%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-lime-500);
+    --primary-foreground: black;
   }
   .primary-lime-600 {
-    --primary: 84.8 85.2% 34.5%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-lime-600);
+    --primary-foreground: white;
   }
   .primary-lime-700 {
-    --primary: 85.9 78.4% 27.3%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-lime-700);
+    --primary-foreground: white;
   }
   .primary-lime-800 {
-    --primary: 86.3 69% 22.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-lime-800);
+    --primary-foreground: white;
   }
   .primary-lime-900 {
-    --primary: 87.6 61.2% 20.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-lime-900);
+    --primary-foreground: white;
   }
 
   .primary-green-100 {
-    --primary: 140.6 84.2% 92.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-green-100);
+    --primary-foreground: black;
   }
   .primary-green-200 {
-    --primary: 141 78.9% 85.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-green-200);
+    --primary-foreground: black;
   }
   .primary-green-300 {
-    --primary: 141.7 76.6% 73.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-green-300);
+    --primary-foreground: black;
   }
   .primary-green-400 {
-    --primary: 141.9 69.2% 58%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-green-400);
+    --primary-foreground: black;
   }
   .primary-green-500 {
-    --primary: 142.1 70.6% 45.3%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-green-500);
+    --primary-foreground: black;
   }
   .primary-green-600 {
-    --primary: 142.1 76.2% 36.3%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-green-600);
+    --primary-foreground: white;
   }
   .primary-green-700 {
-    --primary: 142.4 71.8% 29.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-green-700);
+    --primary-foreground: white;
   }
   .primary-green-800 {
-    --primary: 142.8 64.2% 24.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-green-800);
+    --primary-foreground: white;
   }
   .primary-green-900 {
-    --primary: 143.8 61.2% 20.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-green-900);
+    --primary-foreground: white;
   }
 
   .primary-emerald-100 {
-    --primary: 149.3 80.4% 90%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-emerald-100);
+    --primary-foreground: black;
   }
   .primary-emerald-200 {
-    --primary: 152.4 76% 80.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-emerald-200);
+    --primary-foreground: black;
   }
   .primary-emerald-300 {
-    --primary: 156.2 71.6% 66.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-emerald-300);
+    --primary-foreground: black;
   }
   .primary-emerald-400 {
-    --primary: 158.1 64.4% 51.6%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-emerald-400);
+    --primary-foreground: black;
   }
   .primary-emerald-500 {
-    --primary: 160.1 84.1% 39.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-emerald-500);
+    --primary-foreground: black;
   }
   .primary-emerald-600 {
-    --primary: 161.4 93.5% 30.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-emerald-600);
+    --primary-foreground: white;
   }
   .primary-emerald-700 {
-    --primary: 162.9 93.5% 24.3%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-emerald-700);
+    --primary-foreground: white;
   }
   .primary-emerald-800 {
-    --primary: 163.1 88.1% 19.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-emerald-800);
+    --primary-foreground: white;
   }
   .primary-emerald-900 {
-    --primary: 164.2 85.7% 16.5%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-emerald-900);
+    --primary-foreground: white;
   }
 
   .primary-teal-100 {
-    --primary: 167.2 85.5% 89.2%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-teal-100);
+    --primary-foreground: black;
   }
   .primary-teal-200 {
-    --primary: 168.4 83.8% 78.2%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-teal-200);
+    --primary-foreground: black;
   }
   .primary-teal-300 {
-    --primary: 170.6 76.9% 64.3%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-teal-300);
+    --primary-foreground: black;
   }
   .primary-teal-400 {
-    --primary: 172.5 66% 50.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-teal-400);
+    --primary-foreground: black;
   }
   .primary-teal-500 {
-    --primary: 173.4 80.4% 40%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-teal-500);
+    --primary-foreground: black;
   }
   .primary-teal-600 {
-    --primary: 174.7 83.9% 31.6%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-teal-600);
+    --primary-foreground: white;
   }
   .primary-teal-700 {
-    --primary: 175.3 77.4% 26.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-teal-700);
+    --primary-foreground: white;
   }
   .primary-teal-800 {
-    --primary: 176.1 69.4% 21.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-teal-800);
+    --primary-foreground: white;
   }
   .primary-teal-900 {
-    --primary: 175.9 60.8% 19%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-teal-900);
+    --primary-foreground: white;
   }
 
   .primary-cyan-100 {
-    --primary: 185.1 95.9% 90.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-cyan-100);
+    --primary-foreground: black;
   }
   .primary-cyan-200 {
-    --primary: 186.2 93.5% 81.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-cyan-200);
+    --primary-foreground: black;
   }
   .primary-cyan-300 {
-    --primary: 187 92.4% 69%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-cyan-300);
+    --primary-foreground: black;
   }
   .primary-cyan-400 {
-    --primary: 187.9 85.7% 53.3%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-cyan-400);
+    --primary-foreground: black;
   }
   .primary-cyan-500 {
-    --primary: 188.7 94.5% 42.7%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-cyan-500);
+    --primary-foreground: black;
   }
   .primary-cyan-600 {
-    --primary: 191.6 91.4% 36.5%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-cyan-600);
+    --primary-foreground: white;
   }
   .primary-cyan-700 {
-    --primary: 192.9 82.3% 31%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-cyan-700);
+    --primary-foreground: white;
   }
   .primary-cyan-800 {
-    --primary: 194.4 69.6% 27.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-cyan-800);
+    --primary-foreground: white;
   }
   .primary-cyan-900 {
-    --primary: 196.4 63.6% 23.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-cyan-900);
+    --primary-foreground: white;
   }
 
   .primary-sky-100 {
-    --primary: 204 93.8% 93.7%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-sky-100);
+    --primary-foreground: black;
   }
   .primary-sky-200 {
-    --primary: 200.6 94.4% 86.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-sky-200);
+    --primary-foreground: black;
   }
   .primary-sky-300 {
-    --primary: 199.4 95.5% 73.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-sky-300);
+    --primary-foreground: black;
   }
   .primary-sky-400 {
-    --primary: 198.4 93.2% 59.6%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-sky-400);
+    --primary-foreground: black;
   }
   .primary-sky-500 {
-    --primary: 198.6 88.7% 48.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-sky-500);
+    --primary-foreground: black;
   }
   .primary-sky-600 {
-    --primary: 200.4 98% 39.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-sky-600);
+    --primary-foreground: white;
   }
   .primary-sky-700 {
-    --primary: 201.3 96.3% 32.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-sky-700);
+    --primary-foreground: white;
   }
   .primary-sky-800 {
-    --primary: 201 90% 27.5%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-sky-800);
+    --primary-foreground: white;
   }
   .primary-sky-900 {
-    --primary: 202 80.3% 23.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-sky-900);
+    --primary-foreground: white;
   }
 
   .primary-blue-100 {
-    --primary: 214.3 94.6% 92.7%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-blue-100);
+    --primary-foreground: black;
   }
   .primary-blue-200 {
-    --primary: 213.3 96.9% 87.3%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-blue-200);
+    --primary-foreground: black;
   }
   .primary-blue-300 {
-    --primary: 211.7 96.4% 78.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-blue-300);
+    --primary-foreground: black;
   }
   .primary-blue-400 {
-    --primary: 213.1 93.9% 67.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-blue-400);
+    --primary-foreground: black;
   }
   .primary-blue-500 {
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-blue-500);
+    --primary-foreground: white;
   }
   .primary-blue-600 {
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-blue-600);
+    --primary-foreground: white;
   }
   .primary-blue-700 {
-    --primary: 224.3 76.3% 48%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-blue-700);
+    --primary-foreground: white;
   }
   .primary-blue-800 {
-    --primary: 225.9 70.7% 40.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-blue-800);
+    --primary-foreground: white;
   }
   .primary-blue-900 {
-    --primary: 224.4 64.3% 32.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-blue-900);
+    --primary-foreground: white;
   }
 
   .primary-indigo-100 {
-    --primary: 226.5 100% 93.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-indigo-100);
+    --primary-foreground: black;
   }
   .primary-indigo-200 {
-    --primary: 228 96.5% 88.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-indigo-200);
+    --primary-foreground: black;
   }
   .primary-indigo-300 {
-    --primary: 229.7 93.5% 81.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-indigo-300);
+    --primary-foreground: black;
   }
   .primary-indigo-400 {
-    --primary: 234.5 89.5% 73.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-indigo-400);
+    --primary-foreground: black;
   }
   .primary-indigo-500 {
-    --primary: 238.7 83.5% 66.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-indigo-500);
+    --primary-foreground: white;
   }
   .primary-indigo-600 {
-    --primary: 243.4 75.4% 58.6%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-indigo-600);
+    --primary-foreground: white;
   }
   .primary-indigo-700 {
-    --primary: 244.5 57.9% 50.6%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-indigo-700);
+    --primary-foreground: white;
   }
   .primary-indigo-800 {
-    --primary: 243.7 54.5% 41.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-indigo-800);
+    --primary-foreground: white;
   }
   .primary-indigo-900 {
-    --primary: 242.2 47.4% 34.3%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-indigo-900);
+    --primary-foreground: white;
   }
 
   .primary-violet-100 {
-    --primary: 251.4 91.3% 95.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-violet-100);
+    --primary-foreground: black;
   }
   .primary-violet-200 {
-    --primary: 250.5 95.2% 91.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-violet-200);
+    --primary-foreground: black;
   }
   .primary-violet-300 {
-    --primary: 252.5 94.7% 85.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-violet-300);
+    --primary-foreground: black;
   }
   .primary-violet-400 {
-    --primary: 255.1 91.7% 76.3%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-violet-400);
+    --primary-foreground: black;
   }
   .primary-violet-500 {
-    --primary: 258.3 89.5% 66.3%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-violet-500);
+    --primary-foreground: white;
   }
   .primary-violet-600 {
-    --primary: 262.1 83.3% 57.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-violet-600);
+    --primary-foreground: white;
   }
   .primary-violet-700 {
-    --primary: 263.4 70% 50.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-violet-700);
+    --primary-foreground: white;
   }
   .primary-violet-800 {
-    --primary: 263.4 69.3% 42.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-violet-800);
+    --primary-foreground: white;
   }
   .primary-violet-900 {
-    --primary: 263.5 67.4% 34.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-violet-900);
+    --primary-foreground: white;
   }
 
   .primary-purple-100 {
-    --primary: 268.7 100% 95.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-purple-100);
+    --primary-foreground: black;
   }
   .primary-purple-200 {
-    --primary: 268.6 100% 91.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-purple-200);
+    --primary-foreground: black;
   }
   .primary-purple-300 {
-    --primary: 269.2 97.4% 85.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-purple-300);
+    --primary-foreground: black;
   }
   .primary-purple-400 {
-    --primary: 270 95.2% 75.3%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-purple-400);
+    --primary-foreground: black;
   }
   .primary-purple-500 {
-    --primary: 270.7 91% 65.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-purple-500);
+    --primary-foreground: white;
   }
   .primary-purple-600 {
-    --primary: 271.5 81.3% 55.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-purple-600);
+    --primary-foreground: white;
   }
   .primary-purple-700 {
-    --primary: 272.1 71.7% 47.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-purple-700);
+    --primary-foreground: white;
   }
   .primary-purple-800 {
-    --primary: 272.9 67.2% 39.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-purple-800);
+    --primary-foreground: white;
   }
   .primary-purple-900 {
-    --primary: 273.6 65.6% 32%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-purple-900);
+    --primary-foreground: white;
   }
 
   .primary-fuchsia-100 {
-    --primary: 287 100% 95.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-fuchsia-100);
+    --primary-foreground: black;
   }
   .primary-fuchsia-200 {
-    --primary: 288.3 95.8% 90.6%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-fuchsia-200);
+    --primary-foreground: black;
   }
   .primary-fuchsia-300 {
-    --primary: 291.1 93.1% 82.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-fuchsia-300);
+    --primary-foreground: black;
   }
   .primary-fuchsia-400 {
-    --primary: 292 91.4% 72.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-fuchsia-400);
+    --primary-foreground: black;
   }
   .primary-fuchsia-500 {
-    --primary: 292.2 84.1% 60.6%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-fuchsia-500);
+    --primary-foreground: white;
   }
   .primary-fuchsia-600 {
-    --primary: 293.4 69.5% 48.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-fuchsia-600);
+    --primary-foreground: white;
   }
   .primary-fuchsia-700 {
-    --primary: 294.7 72.4% 39.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-fuchsia-700);
+    --primary-foreground: white;
   }
   .primary-fuchsia-800 {
-    --primary: 295.4 70.2% 32.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-fuchsia-800);
+    --primary-foreground: white;
   }
   .primary-fuchsia-900 {
-    --primary: 296.7 63.6% 28%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-fuchsia-900);
+    --primary-foreground: white;
   }
 
   .primary-pink-100 {
-    --primary: 325.7 77.8% 94.7%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-pink-100);
+    --primary-foreground: black;
   }
   .primary-pink-200 {
-    --primary: 325.9 84.6% 89.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-pink-200);
+    --primary-foreground: black;
   }
   .primary-pink-300 {
-    --primary: 327.4 87.1% 81.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-pink-300);
+    --primary-foreground: black;
   }
   .primary-pink-400 {
-    --primary: 328.6 85.5% 70.2%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-pink-400);
+    --primary-foreground: black;
   }
   .primary-pink-500 {
-    --primary: 330.4 81.2% 60.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-pink-500);
+    --primary-foreground: white;
   }
   .primary-pink-600 {
-    --primary: 333.3 71.4% 50.6%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-pink-600);
+    --primary-foreground: white;
   }
   .primary-pink-700 {
-    --primary: 335.1 77.6% 42%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-pink-700);
+    --primary-foreground: white;
   }
   .primary-pink-800 {
-    --primary: 335.8 74.4% 35.3%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-pink-800);
+    --primary-foreground: white;
   }
   .primary-pink-900 {
-    --primary: 335.9 69% 30.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-pink-900);
+    --primary-foreground: white;
   }
 
   .primary-rose-100 {
-    --primary: 355.6 100% 94.7%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-rose-100);
+    --primary-foreground: black;
   }
   .primary-rose-200 {
-    --primary: 352.7 96.1% 90%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-rose-200);
+    --primary-foreground: black;
   }
   .primary-rose-300 {
-    --primary: 352.6 95.7% 81.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-rose-300);
+    --primary-foreground: black;
   }
   .primary-rose-400 {
-    --primary: 351.3 94.5% 71.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-rose-400);
+    --primary-foreground: black;
   }
   .primary-rose-500 {
-    --primary: 349.7 89.2% 60.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-rose-500);
+    --primary-foreground: white;
   }
   .primary-rose-600 {
-    --primary: 346.8 77.2% 49.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-rose-600);
+    --primary-foreground: white;
   }
   .primary-rose-700 {
-    --primary: 345.3 82.7% 40.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-rose-700);
+    --primary-foreground: white;
   }
   .primary-rose-800 {
-    --primary: 343.4 79.7% 34.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-rose-800);
+    --primary-foreground: white;
   }
   .primary-rose-900 {
-    --primary: 341.5 75.5% 30.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-rose-900);
+    --primary-foreground: white;
   }
-  /* CSS PARSER: END - DO NOT REMOVE */
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background font-sans text-foreground;
-  }
-
-  p code {
-    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
-  }
-
-  pre code {
-    @apply whitespace-pre-wrap;
-  }
-
-  *::-webkit-scrollbar {
-    background-color: transparent;
-    width: 1rem;
-    height: 1rem;
-  }
+/* CSS PARSER: END - DO NOT REMOVE */
 
-  *::-webkit-scrollbar-thumb {
-    /* Thumb color */
-    background-color: oklch(from var(--foreground) l c h / 0.25);
-    border-radius: 0.5rem;
-    background-clip: padding-box;
-    border-left: 0.15rem solid transparent;
-    border-right: 0.15rem solid transparent;
-  }
-
-  .navigation-docs::-webkit-scrollbar-thumb {
-    background-color: oklch(from var(--foreground) l c h / 0.1);
-  }
-
-  .dark .navigation-docs::-webkit-scrollbar-thumb {
-    background-color: oklch(from var(--foreground) l c h / 0.2);
-  }
-
-  *::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-
-  *::-webkit-scrollbar-track {
-    background: transparent;
-    border-left: 1px solid var(--qwikui-slate-300);
-  }
-
-  .toc-scrollbar::-webkit-scrollbar-track,
-  .dark .toc-scrollbar::-webkit-scrollbar-track {
-    border-color: transparent;
-  }
-
-  .toc-scrollbar::-webkit-scrollbar-thumb {
-    background-color: transparent;
-  }
-
-  .toc-scrollbar:hover.toc-scrollbar::-webkit-scrollbar-thumb {
-    background-color: oklch(from var(--foreground) l c h / 0.15);
-  }
-
-  .dark *::-webkit-scrollbar-track {
-    background: transparent;
-    border-left: 1px solid var(--qwikui-slate-800);
-    border-right: 1px solid var(--qwikui-slate-800);
-  }
-
-  .code-example *::-webkit-scrollbar-track {
-    background: transparent;
-    border: 0px;
-  }
-
-  .code-example *::-webkit-scrollbar-thumb {
-    background-color: var(--qwikui-slate-600);
-    border-radius: 0.5rem;
-    background-clip: padding-box;
-  }
-
-  /* no horizontal overflow on code snippets */
-  .tab-size pre {
-    white-space: pre-wrap;
-    background: transparent !important;
-  }
-
-  .note-link a {
-    border-bottom: 1px solid var(--qwikui-slate-950) !important;
-  }
-
-  .dark .note-link a {
-    border-bottom: 1px solid white !important;
-  }
-
-  .gif-container {
-    border-radius: var(--border-radius);
-  }
-}
-
-@layer utilities {
-  :root {
-    /* primary colors - try using primary and secondary instead */
-    --qwikui-purple-50: #f9f5ff;
-    --qwikui-purple-100: #f2e8ff;
-    --qwikui-purple-200: #e7d6fe;
-    --qwikui-purple-300: #d4b5fd;
-    --qwikui-purple-400: #b37bfa;
-    --qwikui-purple-500: #9f57f5;
-    --qwikui-purple-600: #8835e8;
-    --qwikui-purple-700: #7424cc;
-    --qwikui-purple-800: #6323a6;
-    --qwikui-purple-900: #521d86;
-    --qwikui-purple-950: #360863;
-
-    --qwikui-blue-50: #effaff;
-    --qwikui-blue-100: #def3ff;
-    --qwikui-blue-200: #b6eaff;
-    --qwikui-blue-300: #76dbff;
-    --qwikui-blue-400: #2dcaff;
-    --qwikui-blue-500: #02b9fc;
-    --qwikui-blue-600: #0090d2;
-    --qwikui-blue-700: #0073aa;
-    --qwikui-blue-800: #00618c;
-    --qwikui-blue-900: #075073;
-    --qwikui-blue-950: #04334d;
-
-    /* neutrals - for internal use */
-    --qwikui-slate-50: #f8fafc;
-    --qwikui-slate-100: #f1f5f9;
-    --qwikui-slate-200: #e2e8f0;
-    --qwikui-slate-300: #cbd5e1;
-    --qwikui-slate-400: #94a3b8;
-    --qwikui-slate-500: #64748b;
-    --qwikui-slate-600: #475569;
-    --qwikui-slate-700: #334155;
-    --qwikui-slate-800: #1e293b;
-    --qwikui-slate-900: #0f172a;
-    --qwikui-slate-950: #020617;
-  }
-
-  html {
-    height: 100%;
-    min-height: 100%;
-    scroll-behavior: smooth;
+@utility accordion-animation-1 {
+  &[data-open] {
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
   }
 
-  body {
-    min-height: 100%;
+  &[data-closed] {
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
   }
-
-  /* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
-  It would make more sense to supply the user with the animation declaration in the docs.
-*/
 }
diff --git a/apps/website/src/global.css b/apps/website/src/global.css
index 90dabacf6..eb20b6317 100644
--- a/apps/website/src/global.css
+++ b/apps/website/src/global.css
@@ -180,9 +180,6 @@
   }
 }
 
-/* @utility underline {
-} */
-
 @layer base {
   .border-radius-0 {
     --border-radius: 0rem;
@@ -1392,7 +1389,3 @@
     animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
   }
 }
-
-@utility text-outlined {
-  @apply [text-shadow:-1px_0_#777,0_1px_#777,1px_0_#777,0_-1px_#777] dark:[text-shadow:-1px_0_#ccc,0_1px_#ccc,1px_0_#ccc,0_-1px_#ccc];
-}
diff --git a/packages/kit-styled/src/templates/global.css b/packages/kit-styled/src/templates/global.css
index 4fdca4e0e..eb20b6317 100644
--- a/packages/kit-styled/src/templates/global.css
+++ b/packages/kit-styled/src/templates/global.css
@@ -1,154 +1,292 @@
+@layer theme, base, components, utilities;
 @import 'tailwindcss';
+@import 'tw-animate-css';
 
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
+@source "../../../packages/kit-styled";
+
+@custom-variant dark (&:is(.dark *));
 
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
 @layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
+  :root {
+    --background: white;
+    --foreground: var(--color-slate-900);
+    --muted: var(--color-slate-100);
+    --muted-foreground: var(--color-slate-700);
+    --popover: white;
+    --popover-foreground: var(--color-slate-900);
+    --card: white;
+    --card-foreground: var(--color-slate-900);
+    --border: var(--color-slate-200);
+    --input: var(--color-slate-200);
+    --primary: oklch(74.1% 38.5% 234.357);
+    --primary-foreground: black;
+    --secondary: oklch(69.9% 46.25% 301.823);
+    --secondary-foreground: black;
+    --accent: var(--color-slate-100);
+    --accent-foreground: var(--color-slate-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-900);
+    --border-width: 0px;
+    --border-radius: 0;
+    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+    --transform-press: scale(0.95);
+  }
+
+  .dark {
+    --background: var(--color-slate-950);
+    --foreground: var(--color-slate-50);
+    --muted: var(--color-slate-800);
+    --muted-foreground: var(--color-slate-300);
+    --popover: var(--color-slate-950);
+    --popover-foreground: var(--color-slate-50);
+    --card: var(--color-slate-950);
+    --card-foreground: var(--color-slate-50);
+    --border: var(--color-slate-800);
+    --input: var(--color-slate-800);
+    --primary: oklch(74.1% 38.5% 234.357);
+    --primary-foreground: black;
+    --secondary: oklch(69.9% 46.25% 301.823);
+    --secondary-foreground: black;
+    --accent: var(--color-slate-700);
+    --accent-foreground: var(--color-slate-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-300);
+    --border-width: 0px;
+    --border-radius: 0;
+    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+    --transform-press: scale(0.95);
   }
 }
 
-@utility accordion-animation-1 {
-  &[data-open] {
-    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-alert: var(--alert);
+  --color-alert-foreground: var(--alert-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-xs: var(--border-radius);
+  --radius-sm: calc(var(--border-radius) + 0.125rem);
+  --radius-md: calc(var(--border-radius) + 0.375rem);
+  --radius-lg: calc(var(--border-radius) + 0.5rem);
+  --radius-xl: calc(var(--border-radius) + 0.75rem);
+  --radius-2xl: calc(var(--border-radius) + 1rem);
+  --radius-3xl: calc(var(--border-radius) + 1.5rem);
+  --shadow-base: var(--shadow-base);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+  --shadow-inner: var(--shadow-inner);
+  --default-border-width: calc(var(--border-width) + 1px);
+  --border-width-base: var(--border-width);
+  --border-width-2: calc(var(--border-width) + 2px);
+  --border-width-4: calc(var(--border-width) + 4px);
+  --border-width-8: calc(var(--border-width) + 8px);
+  --stroke-width-0: 0px;
+  --stroke-width-base: var(--stroke-width);
+  --stroke-width-1: calc(var(--stroke-width) + 1px);
+  --stroke-width-2: calc(var(--stroke-width) + 2px);
+  --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+  --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--qwikui-collapsible-content-height);
+    }
+  }
+  @keyframes collapsible-up {
+    from {
+      height: var(--qwikui-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
   }
+}
 
-  &[data-closed] {
-    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
+@utility press {
+  transform: var(--transform-press);
+}
+@utility border-width-* {
+  /* prettier-ignore */
+  border: --value(--border-width-*);
+}
+@utility stroke-width-* {
+  /* prettier-ignore */
+  stroke: --value(--stroke-width-*);
+}
+@utility shadow-* {
+  /* prettier-ignore */
+  box-shadow: --value(--shadow-*);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background font-sans text-foreground;
+  }
+
+  p code {
+    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
+  }
+
+  pre code {
+    @apply whitespace-pre-wrap;
   }
 }
 
-/* Not used yet - could be used for the colored text on the landing page when the make-it-yours color is too bright in light mode or too dim in dark mode */
-@utility text-outlined {
-  @apply [text-shadow:-1px_0_#777,0_1px_#777,1px_0_#777,0_-1px_#777] dark:[text-shadow:-1px_0_#ccc,0_1px_#ccc,1px_0_#ccc,0_-1px_#ccc];
+@layer components {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background font-sans text-foreground;
+  }
 }
 
 @layer base {
-  :root {
-    --border-width: 0px;
-    --stroke-width: 0px;
-    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
-    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+  .border-radius-0 {
+    --border-radius: 0rem;
   }
 
-  .light {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --primary: 197 98% 52%;
-    --primary-foreground: 187 0% 0%;
-    --secondary: 266 96% 74%;
-    --secondary-foreground: 287 0% 0%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 40% 98%;
-    --ring: 222.2 47.4% 11.2%;
+  .border-radius-dot-25 {
+    --border-radius: 0.25rem;
   }
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --primary: 197 98% 52%;
-    --primary-foreground: 196 0% 0%;
-    --secondary: 266 96% 74%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 40% 98%;
-    --ring: 212.7 26.8% 83.9;
+  .border-radius-dot-50 {
+    --border-radius: 0.5rem;
+  }
+
+  .border-radius-dot-75 {
+    --border-radius: 0.75rem;
+  }
+
+  .border-radius-1 {
+    --border-radius: 1rem;
   }
 
   /* CSS PARSER: START - DO NOT REMOVE */
   .simple {
-    --border-width: 0px;
-    --stroke-width: 0px;
-    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --border-width: 1px;
+    --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
     --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: scale(0.95);
   }
 
   .brutalist.brutalist {
-    --border-width: 2px;
+    --border-width: 3px;
     --stroke-width: 2px;
-    --border: 0 0% 0%;
-    --input: 0 0% 0%;
-    --ring: 0 0% 0%;
-    --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1);
-    --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1);
-    --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-inner: inset 2px 2px 0px 0px rgba(0, 0, 0, 0);
+    --border: black;
+    --input: black;
+    --ring: black;
+    --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
+    --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
+    --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
+    --shadow: 5px 5px rgba(0, 0, 0, 1);
+    --shadow-md: 6px 6px rgba(0, 0, 0, 1);
+    --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
+    --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
+    --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+    --inset-shadow-2xs: inset -1px -1px rgba(0, 0, 0, 1);
+    --inset-shadow-xs: inset -2px -2px rgba(0, 0, 0, 1);
+    --inset-shadow-sm: inset -3px -3px rgba(0, 0, 0, 1);
+    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.5);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.5);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.5);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 1);
+    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 1);
     --transform-press: translate(4px, 4px);
   }
 
   .dark.brutalist.brutalist {
-    --border-width: 2px;
+    --border-width: 3px;
     --stroke-width: 2px;
-    --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1);
-    --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1);
-    --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+    --underline: 2px;
+    --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
+    --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
+    --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
+    --shadow: 5px 5px rgba(0, 0, 0, 1);
+    --shadow-md: 6px 6px rgba(0, 0, 0, 1);
+    --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
+    --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
+    --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+    --inset-shadow-2xs: inset -1px -1px rgba(0, 0, 0, 1);
+    --inset-shadow-xs: inset -2px -2px rgba(0, 0, 0, 1);
+    --inset-shadow-sm: inset -3px -3px rgba(0, 0, 0, 1);
+    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.5);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.5);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.5);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 1);
+    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 1);
     --transform-press: translate(4px, 4px);
   }
 
   .neumorphic.neumorphic {
     --border-width: 0px;
     --stroke-width: 0px;
-    --background: 0 0 88%;
-    --foreground: 240 5.9% 10%;
-    --popover: 0 0 88%;
-    --popover-foreground: 240 5.9% 10%;
-    --card: 0 0 88%;
-    --card-foreground: 240 5.9% 10%;
-    --border: 0 0% 80.2%;
-    --ring: 0 0% 80.2%;
-    --input: 0 0% 80.2%;
+    --background: hsl(0 0 88%);
+    --foreground: var(--color-zinc-900);
+    --popover: hsl(0 0 88%);
+    --popover-foreground: var(--color-zinc-900);
+    --card: hsl(0 0 88%);
+    --card-foreground: var(--color-zinc-900);
+    --border: hsl(0 0% 80.2%);
+    --ring: hsl(0 0% 80.2%);
+    --input: hsl(0 0% 80.2%);
     --shadow-base:
       -3px -3px 6px #bebebe, 3px 3px 6px #ffffff,
       inset 1px 1px 2px rgba(190, 190, 190, 0.5),
@@ -184,15 +322,15 @@
   .dark.neumorphic.neumorphic {
     --border-width: 0px;
     --stroke-width: 0px;
-    --background: 240 5.3% 26.1%;
-    --foreground: 240 5.9% 90%;
-    --popover: 240 5.3% 26.1%;
-    --popover-foreground: 240 5.9% 90%;
-    --card: 240 5.3% 26.1%;
-    --card-foreground: 240 5.9% 90%;
-    --border: 240 5.9% 20%;
-    --ring: 240 5.9% 20%;
-    --input: 240 5.9% 20%;
+    --background: var(--color-zinc-700);
+    --foreground: var(--color-zinc-200);
+    --popover: var(--color-zinc-700);
+    --popover-foreground: var(--color-zinc-200);
+    --card: var(--color-zinc-700);
+    --card-foreground: var(--color-zinc-200);
+    --border: hsl(240 5.9% 20%);
+    --ring: hsl(240 5.9% 20%);
+    --input: hsl(240 5.9% 20%);
     --shadow-base:
       -3px -3px 6px #2c2c31, 3px 3px 6px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
@@ -218,1197 +356,1036 @@
     --transform-press: scale(0.95);
   }
 
-  .border-radius-0 {
-    --border-radius: 0;
-  }
-
-  .border-radius-dot-25 {
-    --border-radius: 0.25rem;
-  }
-
-  .border-radius-dot-50 {
-    --border-radius: 0.5rem;
-  }
-
-  .border-radius-dot-75 {
-    --border-radius: 0.75rem;
-  }
-
-  .border-radius-1 {
-    --border-radius: 1rem;
-  }
-
   /* use colors from colors.ts */
 
   .base-slate {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 40% 98%;
-    --ring: 222.2 47.4% 11.2%;
+    --background: white;
+    --foreground: var(--color-slate-950);
+    --muted: var(--color-slate-100);
+    --muted-foreground: var(--color-slate-700);
+    --popover: white;
+    --popover-foreground: var(--color-slate-900);
+    --card: white;
+    --card-foreground: var(--color-slate-900);
+    --border: var(--color-slate-200);
+    --input: var(--color-slate-200);
+    --secondary: var(--color-slate-900);
+    --secondary-foreground: white;
+    --accent: var(--color-slate-100);
+    --accent-foreground: var(--color-slate-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-900);
   }
   .dark.base-slate {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 40% 98%;
-    --ring: 212.7 26.8% 83.9;
+    --background: var(--color-slate-950);
+    --foreground: var(--color-slate-50);
+    --muted: var(--color-slate-800);
+    --muted-foreground: var(--color-slate-300);
+    --popover: var(--color-slate-950);
+    --popover-foreground: var(--color-slate-50);
+    --card: var(--color-slate-950);
+    --card-foreground: var(--color-slate-50);
+    --border: var(--color-slate-800);
+    --input: var(--color-slate-800);
+    --secondary: var(--color-slate-100);
+    --secondary-foreground: black;
+    --accent: var(--color-slate-700);
+    --accent-foreground: var(--color-slate-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-300);
   }
 
   .base-gray {
-    --background: 0 0% 100%;
-    --foreground: 220.9 39.3% 11%;
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 220.9 39.3% 11%;
-    --card: 0 0% 100%;
-    --card-foreground: 220.9 39.3% 11%;
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
-    --secondary: 220.9 39.3% 11%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 20% 98%;
-    --ring: 220.9 39.3% 11%;
+    --background: white;
+    --foreground: var(--color-gray-950);
+    --muted: var(--color-gray-100);
+    --muted-foreground: var(--color-gray-700);
+    --popover: white;
+    --popover-foreground: var(--color-gray-950);
+    --card: white;
+    --card-foreground: var(--color-gray-950);
+    --border: var(--color-gray-200);
+    --input: var(--color-gray-200);
+    --secondary: var(--color-gray-950);
+    --secondary-foreground: white;
+    --accent: var(--color-gray-100);
+    --accent-foreground: var(--color-gray-950);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-gray-50);
+    --ring: var(--color-gray-950);
   }
   .dark.base-gray {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 20% 98%;
-    --ring: 216 12.2% 83.9%;
+    --background: var(--color-gray-950);
+    --foreground: var(--color-gray-50);
+    --muted: var(--color-gray-800);
+    --muted-foreground: var(--color-gray-300);
+    --popover: var(--color-gray-950);
+    --popover-foreground: var(--color-gray-50);
+    --card: var(--color-gray-950);
+    --card-foreground: var(--color-gray-50);
+    --border: var(--color-gray-800);
+    --input: var(--color-gray-800);
+    --secondary: var(--color-gray-100);
+    --secondary-foreground: black;
+    --accent: var(--color-gray-700);
+    --accent-foreground: var(--color-gray-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-gray-50);
+    --ring: var(--color-gray-300);
   }
 
   .base-zinc {
-    --background: 0 0% 100%;
-    --foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 5.9% 10%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 5.9% 10%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --secondary: 240 5.9% 10%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 240 5.9% 10%;
+    --background: white;
+    --foreground: var(--color-zinc-900);
+    --muted: var(--color-zinc-100);
+    --muted-foreground: var(--color-zinc-700);
+    --popover: white;
+    --popover-foreground: var(--color-zinc-900);
+    --card: white;
+    --card-foreground: var(--color-zinc-900);
+    --border: var(--color-zinc-200);
+    --input: var(--color-zinc-200);
+    --secondary: var(--color-zinc-900);
+    --secondary-foreground: white;
+    --accent: var(--color-zinc-100);
+    --accent-foreground: var(--color-zinc-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-zinc-50);
+    --ring: var(--color-zinc-900);
   }
   .dark.base-zinc {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 240 4.9% 83.9%;
+    --background: var(--color-zinc-950);
+    --foreground: var(--color-zinc-50);
+    --muted: var(--color-zinc-800);
+    --muted-foreground: var(--color-zinc-300);
+    --popover: var(--color-zinc-950);
+    --popover-foreground: var(--color-zinc-50);
+    --card: var(--color-zinc-950);
+    --card-foreground: var(--color-zinc-50);
+    --border: var(--color-zinc-800);
+    --input: var(--color-zinc-800);
+    --secondary: var(--color-zinc-100);
+    --secondary-foreground: black;
+    --accent: var(--color-zinc-700);
+    --accent-foreground: var(--color-zinc-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-zinc-50);
+    --ring: var(--color-zinc-300);
   }
 
   .base-neutral {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 9%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --secondary: 0 0% 9%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 0 0% 9%;
+    --background: white;
+    --foreground: var(--color-neutral-900);
+    --muted: var(--color-neutral-100);
+    --muted-foreground: var(--color-neutral-700);
+    --popover: white;
+    --popover-foreground: var(--color-neutral-900);
+    --card: white;
+    --card-foreground: var(--color-neutral-900);
+    --border: var(--color-neutral-200);
+    --input: var(--color-neutral-200);
+    --secondary: var(--color-neutral-900);
+    --secondary-foreground: white;
+    --accent: var(--color-neutral-100);
+    --accent-foreground: var(--color-neutral-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-neutral-50);
+    --ring: var(--color-neutral-900);
   }
   .dark.base-neutral {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 0 0% 83.1%;
+    --background: var(--color-neutral-950);
+    --foreground: var(--color-neutral-50);
+    --muted: var(--color-neutral-800);
+    --muted-foreground: var(--color-neutral-300);
+    --popover: var(--color-neutral-950);
+    --popover-foreground: var(--color-neutral-50);
+    --card: var(--color-neutral-950);
+    --card-foreground: var(--color-neutral-50);
+    --border: var(--color-neutral-800);
+    --input: var(--color-neutral-800);
+    --secondary: var(--color-neutral-100);
+    --secondary-foreground: black;
+    --accent: var(--color-neutral-700);
+    --accent-foreground: var(--color-neutral-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-neutral-50);
+    --ring: var(--color-neutral-300);
   }
 
   .base-stone {
-    --background: 0 0% 100%;
-    --foreground: 24 9.8% 10%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 24 9.8% 10%;
-    --card: 0 0% 100%;
-    --card-foreground: 24 9.8% 10%;
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --secondary: 24 9.8% 10%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 60 9.1% 97.8%;
-    --ring: 24 9.8% 10%;
+    --background: white;
+    --foreground: var(--color-stone-900);
+    --muted: var(--color-stone-100);
+    --muted-foreground: var(--color-stone-700);
+    --popover: white;
+    --popover-foreground: var(--color-stone-900);
+    --card: white;
+    --card-foreground: var(--color-stone-900);
+    --border: var(--color-stone-200);
+    --input: var(--color-stone-200);
+    --secondary: var(--color-stone-900);
+    --secondary-foreground: white;
+    --accent: var(--color-stone-100);
+    --accent-foreground: var(--color-stone-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-stone-50);
+    --ring: var(--color-stone-900);
   }
   .dark.base-stone {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 24 5.7% 82.9%;
+    --background: var(--color-stone-950);
+    --foreground: var(--color-stone-50);
+    --muted: var(--color-stone-800);
+    --muted-foreground: var(--color-stone-300);
+    --popover: var(--color-stone-950);
+    --popover-foreground: var(--color-stone-50);
+    --card: var(--color-stone-950);
+    --card-foreground: var(--color-stone-50);
+    --border: var(--color-stone-800);
+    --input: var(--color-stone-800);
+    --secondary: var(--color-stone-100);
+    --secondary-foreground: black;
+    --accent: var(--color-stone-700);
+    --accent-foreground: var(--color-stone-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-stone-50);
+    --ring: var(--color-stone-300);
   }
 
   .primary-slate-100,
   .dark.primary-slate-900 {
-    --primary: 210 40% 96.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-slate-100);
+    --primary-foreground: black;
   }
   .primary-slate-200,
   .dark.primary-slate-800 {
-    --primary: 214.3 31.8% 91.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-slate-200);
+    --primary-foreground: black;
   }
   .primary-slate-300 {
-    --primary: 212.7 26.8% 83.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-slate-300);
+    --primary-foreground: black;
   }
   .primary-slate-400 {
-    --primary: 215 20.2% 65.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-slate-400);
+    --primary-foreground: black;
   }
   .primary-slate-500 {
-    --primary: 215.4 16.3% 46.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-slate-500);
+    --primary-foreground: white;
   }
   .primary-slate-600 {
-    --primary: 215.3 19.3% 34.5%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-slate-600);
+    --primary-foreground: white;
   }
   .primary-slate-700 {
-    --primary: 215.3 25% 26.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-slate-700);
+    --primary-foreground: white;
   }
   .primary-slate-800 {
-    --primary: 217.2 32.6% 17.5%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-slate-800);
+    --primary-foreground: white;
   }
   .primary-slate-900 {
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-slate-900);
+    --primary-foreground: white;
   }
 
   .primary-gray-100,
   .dark.primary-gray-900 {
-    --primary: 220 14.3% 95.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-gray-100);
+    --primary-foreground: black;
   }
   .primary-gray-200,
   .dark.primary-gray-800 {
-    --primary: 220 13% 91%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-gray-200);
+    --primary-foreground: black;
   }
   .primary-gray-300 {
-    --primary: 216 12.2% 83.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-gray-300);
+    --primary-foreground: black;
   }
   .primary-gray-400 {
-    --primary: 217.9 10.6% 64.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-gray-400);
+    --primary-foreground: black;
   }
   .primary-gray-500 {
-    --primary: 220 8.9% 46.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-gray-500);
+    --primary-foreground: white;
   }
   .primary-gray-600 {
-    --primary: 215 13.8% 34.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-gray-600);
+    --primary-foreground: white;
   }
   .primary-gray-700 {
-    --primary: 216.9 19.1% 26.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-gray-700);
+    --primary-foreground: white;
   }
   .primary-gray-800 {
-    --primary: 215 27.9% 16.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-gray-800);
+    --primary-foreground: white;
   }
   .primary-gray-900 {
-    --primary: 220.9 39.3% 11%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-gray-950);
+    --primary-foreground: white;
   }
 
   .primary-zinc-100,
   .dark.primary-zinc-900 {
-    --primary: 240 4.8% 95.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-zinc-100);
+    --primary-foreground: black;
   }
   .primary-zinc-200,
   .dark.primary-zinc-800 {
-    --primary: 240 5.9% 90%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-zinc-200);
+    --primary-foreground: black;
   }
   .primary-zinc-300 {
-    --primary: 240 4.9% 83.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-zinc-300);
+    --primary-foreground: black;
   }
   .primary-zinc-400 {
-    --primary: 240 5% 64.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-zinc-400);
+    --primary-foreground: black;
   }
   .primary-zinc-500 {
-    --primary: 240 3.8% 46.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-zinc-500);
+    --primary-foreground: white;
   }
   .primary-zinc-600 {
-    --primary: 240 5.2% 33.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-zinc-600);
+    --primary-foreground: white;
   }
   .primary-zinc-700 {
-    --primary: 240 5.3% 26.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-zinc-700);
+    --primary-foreground: white;
   }
   .primary-zinc-800 {
-    --primary: 240 3.7% 15.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-zinc-800);
+    --primary-foreground: white;
   }
   .primary-zinc-900 {
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-zinc-900);
+    --primary-foreground: white;
   }
 
   .primary-neutral-100,
   .dark.primary-neutral-900 {
-    --primary: 0 0% 96.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-neutral-100);
+    --primary-foreground: black;
   }
   .primary-neutral-200,
   .dark.primary-neutral-800 {
-    --primary: 0 0% 89.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-neutral-200);
+    --primary-foreground: black;
   }
   .primary-neutral-300 {
-    --primary: 0 0% 83.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-neutral-300);
+    --primary-foreground: black;
   }
   .primary-neutral-400 {
-    --primary: 0 0% 63.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-neutral-400);
+    --primary-foreground: black;
   }
   .primary-neutral-500 {
-    --primary: 0 0% 45.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-neutral-500);
+    --primary-foreground: white;
   }
   .primary-neutral-600 {
-    --primary: 0 0% 32.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-neutral-600);
+    --primary-foreground: white;
   }
   .primary-neutral-700 {
-    --primary: 0 0% 25.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-neutral-700);
+    --primary-foreground: white;
   }
   .primary-neutral-800 {
-    --primary: 0 0% 14.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-neutral-800);
+    --primary-foreground: white;
   }
   .primary-neutral-900 {
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-neutral-900);
+    --primary-foreground: white;
   }
 
   .primary-stone-100,
   .dark.primary-stone-900 {
-    --primary: 60 4.8% 95.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-stone-100);
+    --primary-foreground: black;
   }
   .primary-stone-200,
   .dark.primary-stone-800 {
-    --primary: 20 5.9% 90%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-stone-200);
+    --primary-foreground: black;
   }
   .primary-stone-300 {
-    --primary: 24 5.7% 82.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-stone-300);
+    --primary-foreground: black;
   }
   .primary-stone-400 {
-    --primary: 24 5.4% 63.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-stone-400);
+    --primary-foreground: black;
   }
   .primary-stone-500 {
-    --primary: 25 5.3% 44.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-stone-500);
+    --primary-foreground: white;
   }
   .primary-stone-600 {
-    --primary: 33.3 5.5% 32.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-stone-600);
+    --primary-foreground: white;
   }
   .primary-stone-700 {
-    --primary: 30 6.3% 25.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-stone-700);
+    --primary-foreground: white;
   }
   .primary-stone-800 {
-    --primary: 12 6.5% 15.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-stone-800);
+    --primary-foreground: white;
   }
   .primary-stone-900 {
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-stone-900);
+    --primary-foreground: white;
   }
 
   .primary-red-100 {
-    --primary: 0 93.3% 94.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-red-100);
+    --primary-foreground: black;
   }
   .primary-red-200 {
-    --primary: 0 96.3% 89.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-red-200);
+    --primary-foreground: black;
   }
   .primary-red-300 {
-    --primary: 0 93.5% 81.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-red-300);
+    --primary-foreground: black;
   }
   .primary-red-400 {
-    --primary: 0 90.6% 70.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-red-400);
+    --primary-foreground: black;
   }
   .primary-red-500 {
-    --primary: 0 84.2% 60.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-red-500);
+    --primary-foreground: white;
   }
   .primary-red-600 {
-    --primary: 0 72.2% 50.6%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-red-600);
+    --primary-foreground: white;
   }
   .primary-red-700 {
-    --primary: 0 73.7% 41.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-red-700);
+    --primary-foreground: white;
   }
   .primary-red-800 {
-    --primary: 0 70% 35.3%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-red-800);
+    --primary-foreground: white;
   }
   .primary-red-900 {
-    --primary: 0 62.8% 30.6%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-red-900);
+    --primary-foreground: white;
   }
 
   .primary-orange-100 {
-    --primary: 34.3 100% 91.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-orange-100);
+    --primary-foreground: black;
   }
   .primary-orange-200 {
-    --primary: 32.1 97.7% 83.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-orange-200);
+    --primary-foreground: black;
   }
   .primary-orange-300 {
-    --primary: 30.7 97.2% 72.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-orange-300);
+    --primary-foreground: black;
   }
   .primary-orange-400 {
-    --primary: 27 96% 61%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-orange-400);
+    --primary-foreground: black;
   }
   .primary-orange-500 {
-    --primary: 24.6 95% 53.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-orange-500);
+    --primary-foreground: black;
   }
   .primary-orange-600 {
-    --primary: 20.5 90.2% 48.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-orange-600);
+    --primary-foreground: white;
   }
   .primary-orange-700 {
-    --primary: 17.5 88.3% 40.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-orange-700);
+    --primary-foreground: white;
   }
   .primary-orange-800 {
-    --primary: 15 79.1% 33.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-orange-800);
+    --primary-foreground: white;
   }
   .primary-orange-900 {
-    --primary: 15.3 74.6% 27.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-orange-900);
+    --primary-foreground: white;
   }
 
   .primary-amber-100 {
-    --primary: 48 96.5% 88.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-amber-100);
+    --primary-foreground: black;
   }
   .primary-amber-200 {
-    --primary: 48 96.6% 76.7%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-amber-200);
+    --primary-foreground: black;
   }
   .primary-amber-300 {
-    --primary: 45.9 96.7% 64.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-amber-300);
+    --primary-foreground: black;
   }
   .primary-amber-400 {
-    --primary: 43.3 96.4% 56.3%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-amber-400);
+    --primary-foreground: black;
   }
   .primary-amber-500 {
-    --primary: 37.7 92.1% 50.2%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-amber-500);
+    --primary-foreground: black;
   }
   .primary-amber-600 {
-    --primary: 32.1 94.6% 43.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-amber-600);
+    --primary-foreground: white;
   }
   .primary-amber-700 {
-    --primary: 26 90.5% 37.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-amber-700);
+    --primary-foreground: white;
   }
   .primary-amber-800 {
-    --primary: 22.7 82.5% 31.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-amber-800);
+    --primary-foreground: white;
   }
   .primary-amber-900 {
-    --primary: 21.7 77.8% 26.5%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-amber-900);
+    --primary-foreground: white;
   }
 
   .primary-yellow-100 {
-    --primary: 54.9 96.7% 88%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-yellow-100);
+    --primary-foreground: black;
   }
   .primary-yellow-200 {
-    --primary: 52.8 98.3% 76.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-yellow-200);
+    --primary-foreground: black;
   }
   .primary-yellow-300 {
-    --primary: 50.4 97.8% 63.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-yellow-300);
+    --primary-foreground: black;
   }
   .primary-yellow-400 {
-    --primary: 47.9 95.8% 53.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-yellow-400);
+    --primary-foreground: black;
   }
   .primary-yellow-500 {
-    --primary: 45.4 93.4% 47.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-yellow-500);
+    --primary-foreground: black;
   }
   .primary-yellow-600 {
-    --primary: 40.6 96.1% 39.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-yellow-600);
+    --primary-foreground: white;
   }
   .primary-yellow-700 {
-    --primary: 35.5 91.7% 32.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-yellow-700);
+    --primary-foreground: white;
   }
   .primary-yellow-800 {
-    --primary: 31.8 81% 28.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-yellow-800);
+    --primary-foreground: white;
   }
   .primary-yellow-900 {
-    --primary: 28.4 72.5% 25.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-yellow-900);
+    --primary-foreground: white;
   }
 
   .primary-lime-100 {
-    --primary: 79.6 89.1% 89.2%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-lime-100);
+    --primary-foreground: black;
   }
   .primary-lime-200 {
-    --primary: 80.9 88.5% 79.6%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-lime-200);
+    --primary-foreground: black;
   }
   .primary-lime-300 {
-    --primary: 82 84.5% 67.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-lime-300);
+    --primary-foreground: black;
   }
   .primary-lime-400 {
-    --primary: 82.7 78% 55.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-lime-400);
+    --primary-foreground: black;
   }
   .primary-lime-500 {
-    --primary: 83.7 80.5% 44.3%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-lime-500);
+    --primary-foreground: black;
   }
   .primary-lime-600 {
-    --primary: 84.8 85.2% 34.5%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-lime-600);
+    --primary-foreground: white;
   }
   .primary-lime-700 {
-    --primary: 85.9 78.4% 27.3%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-lime-700);
+    --primary-foreground: white;
   }
   .primary-lime-800 {
-    --primary: 86.3 69% 22.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-lime-800);
+    --primary-foreground: white;
   }
   .primary-lime-900 {
-    --primary: 87.6 61.2% 20.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-lime-900);
+    --primary-foreground: white;
   }
 
   .primary-green-100 {
-    --primary: 140.6 84.2% 92.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-green-100);
+    --primary-foreground: black;
   }
   .primary-green-200 {
-    --primary: 141 78.9% 85.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-green-200);
+    --primary-foreground: black;
   }
   .primary-green-300 {
-    --primary: 141.7 76.6% 73.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-green-300);
+    --primary-foreground: black;
   }
   .primary-green-400 {
-    --primary: 141.9 69.2% 58%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-green-400);
+    --primary-foreground: black;
   }
   .primary-green-500 {
-    --primary: 142.1 70.6% 45.3%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-green-500);
+    --primary-foreground: black;
   }
   .primary-green-600 {
-    --primary: 142.1 76.2% 36.3%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-green-600);
+    --primary-foreground: white;
   }
   .primary-green-700 {
-    --primary: 142.4 71.8% 29.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-green-700);
+    --primary-foreground: white;
   }
   .primary-green-800 {
-    --primary: 142.8 64.2% 24.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-green-800);
+    --primary-foreground: white;
   }
   .primary-green-900 {
-    --primary: 143.8 61.2% 20.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-green-900);
+    --primary-foreground: white;
   }
 
   .primary-emerald-100 {
-    --primary: 149.3 80.4% 90%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-emerald-100);
+    --primary-foreground: black;
   }
   .primary-emerald-200 {
-    --primary: 152.4 76% 80.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-emerald-200);
+    --primary-foreground: black;
   }
   .primary-emerald-300 {
-    --primary: 156.2 71.6% 66.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-emerald-300);
+    --primary-foreground: black;
   }
   .primary-emerald-400 {
-    --primary: 158.1 64.4% 51.6%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-emerald-400);
+    --primary-foreground: black;
   }
   .primary-emerald-500 {
-    --primary: 160.1 84.1% 39.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-emerald-500);
+    --primary-foreground: black;
   }
   .primary-emerald-600 {
-    --primary: 161.4 93.5% 30.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-emerald-600);
+    --primary-foreground: white;
   }
   .primary-emerald-700 {
-    --primary: 162.9 93.5% 24.3%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-emerald-700);
+    --primary-foreground: white;
   }
   .primary-emerald-800 {
-    --primary: 163.1 88.1% 19.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-emerald-800);
+    --primary-foreground: white;
   }
   .primary-emerald-900 {
-    --primary: 164.2 85.7% 16.5%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-emerald-900);
+    --primary-foreground: white;
   }
 
   .primary-teal-100 {
-    --primary: 167.2 85.5% 89.2%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-teal-100);
+    --primary-foreground: black;
   }
   .primary-teal-200 {
-    --primary: 168.4 83.8% 78.2%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-teal-200);
+    --primary-foreground: black;
   }
   .primary-teal-300 {
-    --primary: 170.6 76.9% 64.3%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-teal-300);
+    --primary-foreground: black;
   }
   .primary-teal-400 {
-    --primary: 172.5 66% 50.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-teal-400);
+    --primary-foreground: black;
   }
   .primary-teal-500 {
-    --primary: 173.4 80.4% 40%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-teal-500);
+    --primary-foreground: black;
   }
   .primary-teal-600 {
-    --primary: 174.7 83.9% 31.6%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-teal-600);
+    --primary-foreground: white;
   }
   .primary-teal-700 {
-    --primary: 175.3 77.4% 26.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-teal-700);
+    --primary-foreground: white;
   }
   .primary-teal-800 {
-    --primary: 176.1 69.4% 21.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-teal-800);
+    --primary-foreground: white;
   }
   .primary-teal-900 {
-    --primary: 175.9 60.8% 19%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-teal-900);
+    --primary-foreground: white;
   }
 
   .primary-cyan-100 {
-    --primary: 185.1 95.9% 90.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-cyan-100);
+    --primary-foreground: black;
   }
   .primary-cyan-200 {
-    --primary: 186.2 93.5% 81.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-cyan-200);
+    --primary-foreground: black;
   }
   .primary-cyan-300 {
-    --primary: 187 92.4% 69%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-cyan-300);
+    --primary-foreground: black;
   }
   .primary-cyan-400 {
-    --primary: 187.9 85.7% 53.3%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-cyan-400);
+    --primary-foreground: black;
   }
   .primary-cyan-500 {
-    --primary: 188.7 94.5% 42.7%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-cyan-500);
+    --primary-foreground: black;
   }
   .primary-cyan-600 {
-    --primary: 191.6 91.4% 36.5%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-cyan-600);
+    --primary-foreground: white;
   }
   .primary-cyan-700 {
-    --primary: 192.9 82.3% 31%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-cyan-700);
+    --primary-foreground: white;
   }
   .primary-cyan-800 {
-    --primary: 194.4 69.6% 27.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-cyan-800);
+    --primary-foreground: white;
   }
   .primary-cyan-900 {
-    --primary: 196.4 63.6% 23.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-cyan-900);
+    --primary-foreground: white;
   }
 
   .primary-sky-100 {
-    --primary: 204 93.8% 93.7%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-sky-100);
+    --primary-foreground: black;
   }
   .primary-sky-200 {
-    --primary: 200.6 94.4% 86.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-sky-200);
+    --primary-foreground: black;
   }
   .primary-sky-300 {
-    --primary: 199.4 95.5% 73.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-sky-300);
+    --primary-foreground: black;
   }
   .primary-sky-400 {
-    --primary: 198.4 93.2% 59.6%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-sky-400);
+    --primary-foreground: black;
   }
   .primary-sky-500 {
-    --primary: 198.6 88.7% 48.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-sky-500);
+    --primary-foreground: black;
   }
   .primary-sky-600 {
-    --primary: 200.4 98% 39.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-sky-600);
+    --primary-foreground: white;
   }
   .primary-sky-700 {
-    --primary: 201.3 96.3% 32.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-sky-700);
+    --primary-foreground: white;
   }
   .primary-sky-800 {
-    --primary: 201 90% 27.5%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-sky-800);
+    --primary-foreground: white;
   }
   .primary-sky-900 {
-    --primary: 202 80.3% 23.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-sky-900);
+    --primary-foreground: white;
   }
 
   .primary-blue-100 {
-    --primary: 214.3 94.6% 92.7%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-blue-100);
+    --primary-foreground: black;
   }
   .primary-blue-200 {
-    --primary: 213.3 96.9% 87.3%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-blue-200);
+    --primary-foreground: black;
   }
   .primary-blue-300 {
-    --primary: 211.7 96.4% 78.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-blue-300);
+    --primary-foreground: black;
   }
   .primary-blue-400 {
-    --primary: 213.1 93.9% 67.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-blue-400);
+    --primary-foreground: black;
   }
   .primary-blue-500 {
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-blue-500);
+    --primary-foreground: white;
   }
   .primary-blue-600 {
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-blue-600);
+    --primary-foreground: white;
   }
   .primary-blue-700 {
-    --primary: 224.3 76.3% 48%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-blue-700);
+    --primary-foreground: white;
   }
   .primary-blue-800 {
-    --primary: 225.9 70.7% 40.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-blue-800);
+    --primary-foreground: white;
   }
   .primary-blue-900 {
-    --primary: 224.4 64.3% 32.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-blue-900);
+    --primary-foreground: white;
   }
 
   .primary-indigo-100 {
-    --primary: 226.5 100% 93.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-indigo-100);
+    --primary-foreground: black;
   }
   .primary-indigo-200 {
-    --primary: 228 96.5% 88.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-indigo-200);
+    --primary-foreground: black;
   }
   .primary-indigo-300 {
-    --primary: 229.7 93.5% 81.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-indigo-300);
+    --primary-foreground: black;
   }
   .primary-indigo-400 {
-    --primary: 234.5 89.5% 73.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-indigo-400);
+    --primary-foreground: black;
   }
   .primary-indigo-500 {
-    --primary: 238.7 83.5% 66.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-indigo-500);
+    --primary-foreground: white;
   }
   .primary-indigo-600 {
-    --primary: 243.4 75.4% 58.6%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-indigo-600);
+    --primary-foreground: white;
   }
   .primary-indigo-700 {
-    --primary: 244.5 57.9% 50.6%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-indigo-700);
+    --primary-foreground: white;
   }
   .primary-indigo-800 {
-    --primary: 243.7 54.5% 41.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-indigo-800);
+    --primary-foreground: white;
   }
   .primary-indigo-900 {
-    --primary: 242.2 47.4% 34.3%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-indigo-900);
+    --primary-foreground: white;
   }
 
   .primary-violet-100 {
-    --primary: 251.4 91.3% 95.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-violet-100);
+    --primary-foreground: black;
   }
   .primary-violet-200 {
-    --primary: 250.5 95.2% 91.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-violet-200);
+    --primary-foreground: black;
   }
   .primary-violet-300 {
-    --primary: 252.5 94.7% 85.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-violet-300);
+    --primary-foreground: black;
   }
   .primary-violet-400 {
-    --primary: 255.1 91.7% 76.3%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-violet-400);
+    --primary-foreground: black;
   }
   .primary-violet-500 {
-    --primary: 258.3 89.5% 66.3%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-violet-500);
+    --primary-foreground: white;
   }
   .primary-violet-600 {
-    --primary: 262.1 83.3% 57.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-violet-600);
+    --primary-foreground: white;
   }
   .primary-violet-700 {
-    --primary: 263.4 70% 50.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-violet-700);
+    --primary-foreground: white;
   }
   .primary-violet-800 {
-    --primary: 263.4 69.3% 42.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-violet-800);
+    --primary-foreground: white;
   }
   .primary-violet-900 {
-    --primary: 263.5 67.4% 34.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-violet-900);
+    --primary-foreground: white;
   }
 
   .primary-purple-100 {
-    --primary: 268.7 100% 95.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-purple-100);
+    --primary-foreground: black;
   }
   .primary-purple-200 {
-    --primary: 268.6 100% 91.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-purple-200);
+    --primary-foreground: black;
   }
   .primary-purple-300 {
-    --primary: 269.2 97.4% 85.1%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-purple-300);
+    --primary-foreground: black;
   }
   .primary-purple-400 {
-    --primary: 270 95.2% 75.3%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-purple-400);
+    --primary-foreground: black;
   }
   .primary-purple-500 {
-    --primary: 270.7 91% 65.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-purple-500);
+    --primary-foreground: white;
   }
   .primary-purple-600 {
-    --primary: 271.5 81.3% 55.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-purple-600);
+    --primary-foreground: white;
   }
   .primary-purple-700 {
-    --primary: 272.1 71.7% 47.1%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-purple-700);
+    --primary-foreground: white;
   }
   .primary-purple-800 {
-    --primary: 272.9 67.2% 39.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-purple-800);
+    --primary-foreground: white;
   }
   .primary-purple-900 {
-    --primary: 273.6 65.6% 32%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-purple-900);
+    --primary-foreground: white;
   }
 
   .primary-fuchsia-100 {
-    --primary: 287 100% 95.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-fuchsia-100);
+    --primary-foreground: black;
   }
   .primary-fuchsia-200 {
-    --primary: 288.3 95.8% 90.6%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-fuchsia-200);
+    --primary-foreground: black;
   }
   .primary-fuchsia-300 {
-    --primary: 291.1 93.1% 82.9%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-fuchsia-300);
+    --primary-foreground: black;
   }
   .primary-fuchsia-400 {
-    --primary: 292 91.4% 72.5%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-fuchsia-400);
+    --primary-foreground: black;
   }
   .primary-fuchsia-500 {
-    --primary: 292.2 84.1% 60.6%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-fuchsia-500);
+    --primary-foreground: white;
   }
   .primary-fuchsia-600 {
-    --primary: 293.4 69.5% 48.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-fuchsia-600);
+    --primary-foreground: white;
   }
   .primary-fuchsia-700 {
-    --primary: 294.7 72.4% 39.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-fuchsia-700);
+    --primary-foreground: white;
   }
   .primary-fuchsia-800 {
-    --primary: 295.4 70.2% 32.9%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-fuchsia-800);
+    --primary-foreground: white;
   }
   .primary-fuchsia-900 {
-    --primary: 296.7 63.6% 28%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-fuchsia-900);
+    --primary-foreground: white;
   }
 
   .primary-pink-100 {
-    --primary: 325.7 77.8% 94.7%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-pink-100);
+    --primary-foreground: black;
   }
   .primary-pink-200 {
-    --primary: 325.9 84.6% 89.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-pink-200);
+    --primary-foreground: black;
   }
   .primary-pink-300 {
-    --primary: 327.4 87.1% 81.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-pink-300);
+    --primary-foreground: black;
   }
   .primary-pink-400 {
-    --primary: 328.6 85.5% 70.2%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-pink-400);
+    --primary-foreground: black;
   }
   .primary-pink-500 {
-    --primary: 330.4 81.2% 60.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-pink-500);
+    --primary-foreground: white;
   }
   .primary-pink-600 {
-    --primary: 333.3 71.4% 50.6%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-pink-600);
+    --primary-foreground: white;
   }
   .primary-pink-700 {
-    --primary: 335.1 77.6% 42%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-pink-700);
+    --primary-foreground: white;
   }
   .primary-pink-800 {
-    --primary: 335.8 74.4% 35.3%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-pink-800);
+    --primary-foreground: white;
   }
   .primary-pink-900 {
-    --primary: 335.9 69% 30.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-pink-900);
+    --primary-foreground: white;
   }
 
   .primary-rose-100 {
-    --primary: 355.6 100% 94.7%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-rose-100);
+    --primary-foreground: black;
   }
   .primary-rose-200 {
-    --primary: 352.7 96.1% 90%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-rose-200);
+    --primary-foreground: black;
   }
   .primary-rose-300 {
-    --primary: 352.6 95.7% 81.8%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-rose-300);
+    --primary-foreground: black;
   }
   .primary-rose-400 {
-    --primary: 351.3 94.5% 71.4%;
-    --primary-foreground: 0 0% 0%;
+    --primary: var(--color-rose-400);
+    --primary-foreground: black;
   }
   .primary-rose-500 {
-    --primary: 349.7 89.2% 60.2%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-rose-500);
+    --primary-foreground: white;
   }
   .primary-rose-600 {
-    --primary: 346.8 77.2% 49.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-rose-600);
+    --primary-foreground: white;
   }
   .primary-rose-700 {
-    --primary: 345.3 82.7% 40.8%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-rose-700);
+    --primary-foreground: white;
   }
   .primary-rose-800 {
-    --primary: 343.4 79.7% 34.7%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-rose-800);
+    --primary-foreground: white;
   }
   .primary-rose-900 {
-    --primary: 341.5 75.5% 30.4%;
-    --primary-foreground: 0 0% 100%;
+    --primary: var(--color-rose-900);
+    --primary-foreground: white;
   }
-  /* CSS PARSER: END - DO NOT REMOVE */
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background font-sans text-foreground;
-  }
-
-  p code {
-    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
-  }
-
-  pre code {
-    @apply whitespace-pre-wrap;
-  }
-
-  *::-webkit-scrollbar {
-    background-color: transparent;
-    width: 1rem;
-    height: 1rem;
-  }
+/* CSS PARSER: END - DO NOT REMOVE */
 
-  *::-webkit-scrollbar-thumb {
-    /* Thumb color */
-    background-color: oklch(from var(--foreground) l c h / 0.25);
-    border-radius: 0.4rem;
-    background-clip: padding-box;
-    border-left: 0.3rem solid transparent;
-    border-right: 0.3rem solid transparent;
-  }
-
-  .navigation-docs::-webkit-scrollbar-thumb {
-    background-color: oklch(from var(--foreground) l c h / 0.1);
-  }
-
-  .dark .navigation-docs::-webkit-scrollbar-thumb {
-    background-color: oklch(from var(--foreground) l c h / 0.2);
-  }
-
-  *::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-
-  *::-webkit-scrollbar-track {
-    background: transparent;
-    border-left: 0;
-  }
-
-  .toc-scrollbar::-webkit-scrollbar-track,
-  .dark .toc-scrollbar::-webkit-scrollbar-track {
-    border-color: transparent;
-  }
-
-  .toc-scrollbar::-webkit-scrollbar-thumb {
-    background-color: transparent;
-  }
-
-  .toc-scrollbar:hover.toc-scrollbar::-webkit-scrollbar-thumb {
-    background-color: oklch(from var(--foreground) l c h / 0.15);
-  }
-
-  .dark *::-webkit-scrollbar-track {
-    background: transparent;
-    border-left: 0;
-  }
-
-  .code-example *::-webkit-scrollbar-track {
-    background: transparent;
-    border: 0px;
-  }
-
-  .code-example *::-webkit-scrollbar-thumb {
-    background-color: var(--qwikui-slate-600);
-    border-radius: 0.5rem;
-    background-clip: padding-box;
-  }
-
-  /* no horizontal overflow on code snippets */
-  .tab-size pre {
-    white-space: pre-wrap;
-    background: transparent !important;
-  }
-
-  .note-link a {
-    border-bottom: 1px solid var(--qwikui-slate-950) !important;
-  }
-
-  .dark .note-link a {
-    border-bottom: 1px solid white !important;
-  }
-
-  .gif-container {
-    border-radius: var(--border-radius);
-  }
-}
-
-@layer utilities {
-  :root {
-    /* primary colors - try using primary and secondary instead */
-    --qwikui-purple-50: #f9f5ff;
-    --qwikui-purple-100: #f2e8ff;
-    --qwikui-purple-200: #e7d6fe;
-    --qwikui-purple-300: #d4b5fd;
-    --qwikui-purple-400: #b37bfa;
-    --qwikui-purple-500: #9f57f5;
-    --qwikui-purple-600: #8835e8;
-    --qwikui-purple-700: #7424cc;
-    --qwikui-purple-800: #6323a6;
-    --qwikui-purple-900: #521d86;
-    --qwikui-purple-950: #360863;
-
-    --qwikui-blue-50: #effaff;
-    --qwikui-blue-100: #def3ff;
-    --qwikui-blue-200: #b6eaff;
-    --qwikui-blue-300: #76dbff;
-    --qwikui-blue-400: #2dcaff;
-    --qwikui-blue-500: #02b9fc;
-    --qwikui-blue-600: #0090d2;
-    --qwikui-blue-700: #0073aa;
-    --qwikui-blue-800: #00618c;
-    --qwikui-blue-900: #075073;
-    --qwikui-blue-950: #04334d;
-
-    /* neutrals - for internal use */
-    --qwikui-slate-50: #f8fafc;
-    --qwikui-slate-100: #f1f5f9;
-    --qwikui-slate-200: #e2e8f0;
-    --qwikui-slate-300: #cbd5e1;
-    --qwikui-slate-400: #94a3b8;
-    --qwikui-slate-500: #64748b;
-    --qwikui-slate-600: #475569;
-    --qwikui-slate-700: #334155;
-    --qwikui-slate-800: #1e293b;
-    --qwikui-slate-900: #0f172a;
-    --qwikui-slate-950: #020617;
-  }
-
-  html {
-    height: 100%;
-    min-height: 100%;
-    scroll-behavior: smooth;
+@utility accordion-animation-1 {
+  &[data-open] {
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
   }
 
-  body {
-    min-height: 100%;
+  &[data-closed] {
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
   }
-
-  /* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
-  It would make more sense to supply the user with the animation declaration in the docs.
-*/
 }

From ca18c77d09bdacc2f5c14f75a1dce0a04e5b9c18 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Thu, 14 Aug 2025 08:41:13 +0200
Subject: [PATCH 13/42] refactor: cli install tailwind 4

---
 packages/cli/bin/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/bin/index.ts b/packages/cli/bin/index.ts
index f85feba63..61ce28a79 100644
--- a/packages/cli/bin/index.ts
+++ b/packages/cli/bin/index.ts
@@ -185,7 +185,7 @@ async function handleInit() {
 
   if (installTailwind) {
     execSync(
-      `${getPackageManagerCommand().exec} qwik add tailwind-v3 --skipConfirmation=true --projectDir=${config.projectRoot}`,
+      `${getPackageManagerCommand().exec} qwik add tailwind --skipConfirmation=true --projectDir=${config.projectRoot}`,
       {
         stdio: 'inherit',
         cwd: config.projectRoot,

From d073fc4b889303dbe04a3192f2ceba883bf87690 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Thu, 14 Aug 2025 08:41:44 +0200
Subject: [PATCH 14/42] chore: copy-css-config base global.css config appended

---
 .../copy-css-config/copy-css-config.tsx       |   2 +-
 apps/website/src/global.css                   |  28 +++--
 packages/utils/src/theme/extract-theme-css.ts | 103 +++++++++++++++++-
 3 files changed, 118 insertions(+), 15 deletions(-)

diff --git a/apps/website/src/components/copy-css-config/copy-css-config.tsx b/apps/website/src/components/copy-css-config/copy-css-config.tsx
index 4a13010c9..1f739c661 100644
--- a/apps/website/src/components/copy-css-config/copy-css-config.tsx
+++ b/apps/website/src/components/copy-css-config/copy-css-config.tsx
@@ -30,7 +30,7 @@ export default component$(() => {
       >
         Copy code
       </Button>
-      <Modal.Panel class="my-animation rounded-base bg-background text-foreground h-[650px] max-w-2xl overflow-x-hidden p-8 shadow-md backdrop:backdrop-blur-sm backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100">
+      <Modal.Panel class="my-animation rounded-base m-auto h-[650px] max-w-2xl overflow-x-hidden bg-background p-8 text-foreground shadow-md backdrop:backdrop-blur-sm backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100">
         <header>
           <h2 class="mb-2 text-lg font-bold">Copy config</h2>
           <p class="mb-6">
diff --git a/apps/website/src/global.css b/apps/website/src/global.css
index eb20b6317..204faa174 100644
--- a/apps/website/src/global.css
+++ b/apps/website/src/global.css
@@ -120,6 +120,7 @@
   --stroke-width-2: calc(var(--stroke-width) + 2px);
   --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
   --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
   @keyframes collapsible-down {
     from {
       height: 0;
@@ -159,15 +160,7 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background font-sans text-foreground;
-  }
-
-  p code {
-    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
-  }
-
-  pre code {
-    @apply whitespace-pre-wrap;
+    @apply bg-background text-foreground;
   }
 }
 
@@ -176,11 +169,25 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background font-sans text-foreground;
+    @apply bg-background text-foreground;
   }
 }
 
 @layer base {
+  * {
+    @apply font-sans;
+  }
+  body {
+    @apply font-sans;
+  }
+  p code {
+    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
+  }
+
+  pre code {
+    @apply whitespace-pre-wrap;
+  }
+  /* CSS PARSER: START - DO NOT REMOVE */
   .border-radius-0 {
     --border-radius: 0rem;
   }
@@ -201,7 +208,6 @@
     --border-radius: 1rem;
   }
 
-  /* CSS PARSER: START - DO NOT REMOVE */
   .simple {
     --border-width: 1px;
     --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
diff --git a/packages/utils/src/theme/extract-theme-css.ts b/packages/utils/src/theme/extract-theme-css.ts
index 23c144c15..efefbd7d8 100644
--- a/packages/utils/src/theme/extract-theme-css.ts
+++ b/packages/utils/src/theme/extract-theme-css.ts
@@ -7,10 +7,8 @@ export const extractThemeCSS = (theme: Theme, globalCSS: string) => {
 
   // Parse the CSS to get the variables
   const classesMap = createClassesMap(cssClasses);
-  // console.log('classesMap', classesMap);
   // Example usage with the cssThemeToObjectTheme function output
   const objDarkClasses = applyDarkOverrides(classesMap);
-  // console.log('objDarkClasses', objDarkClasses);
   const objRootClasses = removeDarkClasses(classesMap);
 
   // Build the theme CSS
@@ -263,7 +261,106 @@ function objThemeToCSSThemeOutput(themeObject: ThemeMap) {
     cssOutput += `  }\n`;
   }
 
-  cssOutput += `}`;
+  cssOutput += `}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-alert: var(--alert);
+  --color-alert-foreground: var(--alert-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-xs: var(--border-radius);
+  --radius-sm: calc(var(--border-radius) + 0.125rem);
+  --radius-md: calc(var(--border-radius) + 0.375rem);
+  --radius-lg: calc(var(--border-radius) + 0.5rem);
+  --radius-xl: calc(var(--border-radius) + 0.75rem);
+  --radius-2xl: calc(var(--border-radius) + 1rem);
+  --radius-3xl: calc(var(--border-radius) + 1.5rem);
+  --shadow-base: var(--shadow-base);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+  --shadow-inner: var(--shadow-inner);
+  --default-border-width: calc(var(--border-width) + 1px);
+  --border-width-base: var(--border-width);
+  --border-width-2: calc(var(--border-width) + 2px);
+  --border-width-4: calc(var(--border-width) + 4px);
+  --border-width-8: calc(var(--border-width) + 8px);
+  --stroke-width-0: 0px;
+  --stroke-width-base: var(--stroke-width);
+  --stroke-width-1: calc(var(--stroke-width) + 1px);
+  --stroke-width-2: calc(var(--stroke-width) + 2px);
+  --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+  --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--qwikui-collapsible-content-height);
+    }
+  }
+  @keyframes collapsible-up {
+    from {
+      height: var(--qwikui-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@utility press {
+  transform: var(--transform-press);
+}
+@utility border-width-* {
+  /* prettier-ignore */
+  border: --value(--border-width-*);
+}
+@utility stroke-width-* {
+  /* prettier-ignore */
+  stroke: --value(--stroke-width-*);
+}
+@utility shadow-* {
+  /* prettier-ignore */
+  box-shadow: --value(--shadow-*);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer components {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}`;
 
   return cssOutput;
 }

From dba0fef384042fbc7a08db1caa5cbb44b75abac8 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Thu, 14 Aug 2025 09:58:21 +0200
Subject: [PATCH 15/42] fix: qwik-ui, popover-polyfill layers order

---
 apps/website/src/global.css | 237 ++++++++++++++++++++++++------------
 1 file changed, 159 insertions(+), 78 deletions(-)

diff --git a/apps/website/src/global.css b/apps/website/src/global.css
index 204faa174..9dacbd9fe 100644
--- a/apps/website/src/global.css
+++ b/apps/website/src/global.css
@@ -1,4 +1,4 @@
-@layer theme, base, components, utilities;
+@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
@@ -72,69 +72,69 @@
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: scale(0.95);
   }
-}
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-alert: var(--alert);
-  --color-alert-foreground: var(--alert-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --radius-xs: var(--border-radius);
-  --radius-sm: calc(var(--border-radius) + 0.125rem);
-  --radius-md: calc(var(--border-radius) + 0.375rem);
-  --radius-lg: calc(var(--border-radius) + 0.5rem);
-  --radius-xl: calc(var(--border-radius) + 0.75rem);
-  --radius-2xl: calc(var(--border-radius) + 1rem);
-  --radius-3xl: calc(var(--border-radius) + 1.5rem);
-  --shadow-base: var(--shadow-base);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
-  --shadow-inner: var(--shadow-inner);
-  --default-border-width: calc(var(--border-width) + 1px);
-  --border-width-base: var(--border-width);
-  --border-width-2: calc(var(--border-width) + 2px);
-  --border-width-4: calc(var(--border-width) + 4px);
-  --border-width-8: calc(var(--border-width) + 8px);
-  --stroke-width-0: 0px;
-  --stroke-width-base: var(--stroke-width);
-  --stroke-width-1: calc(var(--stroke-width) + 1px);
-  --stroke-width-2: calc(var(--stroke-width) + 2px);
-  --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
-  --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
-
-  @keyframes collapsible-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--qwikui-collapsible-content-height);
-    }
-  }
-  @keyframes collapsible-up {
-    from {
-      height: var(--qwikui-collapsible-content-height);
+  @theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-alert: var(--alert);
+    --color-alert-foreground: var(--alert-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --radius-xs: var(--border-radius);
+    --radius-sm: calc(var(--border-radius) + 0.125rem);
+    --radius-md: calc(var(--border-radius) + 0.375rem);
+    --radius-lg: calc(var(--border-radius) + 0.5rem);
+    --radius-xl: calc(var(--border-radius) + 0.75rem);
+    --radius-2xl: calc(var(--border-radius) + 1rem);
+    --radius-3xl: calc(var(--border-radius) + 1.5rem);
+    --shadow-base: var(--shadow-base);
+    --shadow-xs: var(--shadow-xs);
+    --shadow-sm: var(--shadow-sm);
+    --shadow-md: var(--shadow-md);
+    --shadow-lg: var(--shadow-lg);
+    --shadow-xl: var(--shadow-xl);
+    --shadow-2xl: var(--shadow-2xl);
+    --shadow-inner: var(--shadow-inner);
+    --default-border-width: calc(var(--border-width) + 1px);
+    --border-width-base: var(--border-width);
+    --border-width-2: calc(var(--border-width) + 2px);
+    --border-width-4: calc(var(--border-width) + 4px);
+    --border-width-8: calc(var(--border-width) + 8px);
+    --stroke-width-0: 0px;
+    --stroke-width-base: var(--stroke-width);
+    --stroke-width-1: calc(var(--stroke-width) + 1px);
+    --stroke-width-2: calc(var(--stroke-width) + 2px);
+    --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+    --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+    @keyframes collapsible-down {
+      from {
+        height: 0;
+      }
+      to {
+        height: var(--qwikui-collapsible-content-height);
+      }
     }
-    to {
-      height: 0;
+    @keyframes collapsible-up {
+      from {
+        height: var(--qwikui-collapsible-content-height);
+      }
+      to {
+        height: 0;
+      }
     }
   }
 }
@@ -174,19 +174,6 @@
 }
 
 @layer base {
-  * {
-    @apply font-sans;
-  }
-  body {
-    @apply font-sans;
-  }
-  p code {
-    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
-  }
-
-  pre code {
-    @apply whitespace-pre-wrap;
-  }
   /* CSS PARSER: START - DO NOT REMOVE */
   .border-radius-0 {
     --border-radius: 0rem;
@@ -209,7 +196,7 @@
   }
 
   .simple {
-    --border-width: 1px;
+    --border-width: 0px;
     --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
     --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
@@ -232,7 +219,7 @@
   }
 
   .brutalist.brutalist {
-    --border-width: 3px;
+    --border-width: 2px;
     --stroke-width: 2px;
     --border: black;
     --input: black;
@@ -1382,9 +1369,103 @@
     --primary: var(--color-rose-900);
     --primary-foreground: white;
   }
+  /* CSS PARSER: END - DO NOT REMOVE */
 }
 
-/* CSS PARSER: END - DO NOT REMOVE */
+/* DOCS */
+@layer base {
+  * {
+    @apply font-sans;
+  }
+  body {
+    @apply font-sans;
+  }
+  p code {
+    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
+  }
+  pre code {
+    @apply whitespace-pre-wrap;
+  }
+
+  *::-webkit-scrollbar {
+    background-color: transparent;
+    width: 1rem;
+    height: 1rem;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    /* Thumb color */
+    background-color: hsla(var(--foreground) / 0.25);
+    border-radius: 0.4rem;
+    background-clip: padding-box;
+    border-left: 0.3rem solid transparent;
+    border-right: 0.3rem solid transparent;
+  }
+
+  .navigation-docs::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.1);
+  }
+
+  .dark .navigation-docs::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.2);
+  }
+
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+    border-left: 0;
+  }
+
+  .toc-scrollbar::-webkit-scrollbar-track,
+  .dark .toc-scrollbar::-webkit-scrollbar-track {
+    border-color: transparent;
+  }
+
+  .toc-scrollbar::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  .toc-scrollbar:hover.toc-scrollbar::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.15);
+  }
+
+  .dark *::-webkit-scrollbar-track {
+    background: transparent;
+    border-left: 0;
+  }
+
+  .code-example *::-webkit-scrollbar-track {
+    background: transparent;
+    border: 0px;
+  }
+
+  .code-example *::-webkit-scrollbar-thumb {
+    background-color: var(--qwikui-slate-600);
+    border-radius: 0.5rem;
+    background-clip: padding-box;
+  }
+
+  /* no horizontal overflow on code snippets */
+  .tab-size pre {
+    white-space: pre-wrap;
+    background: transparent !important;
+  }
+
+  .note-link a {
+    border-bottom: 1px solid var(--qwikui-slate-950) !important;
+  }
+
+  .dark .note-link a {
+    border-bottom: 1px solid white !important;
+  }
+
+  .gif-container {
+    border-radius: var(--border-radius);
+  }
+}
 
 @utility accordion-animation-1 {
   &[data-open] {

From cf4dd4b1f3e9a540acd4d5040246dc483a2b48d8 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Thu, 14 Aug 2025 10:02:19 +0200
Subject: [PATCH 16/42] refactor: add base @layer and @import to extract-theme

---
 packages/utils/src/theme/extract-theme-css.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/utils/src/theme/extract-theme-css.ts b/packages/utils/src/theme/extract-theme-css.ts
index efefbd7d8..cc6636417 100644
--- a/packages/utils/src/theme/extract-theme-css.ts
+++ b/packages/utils/src/theme/extract-theme-css.ts
@@ -249,7 +249,13 @@ function reorderThemeObject(themeObject: ThemeMap) {
 }
 
 function objThemeToCSSThemeOutput(themeObject: ThemeMap) {
-  let cssOutput = `@layer base {\n`;
+  let cssOutput = `@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {\n`;
 
   // Iterate over each theme (e.g., 'root', 'dark')
   for (const [theme, values] of Object.entries(themeObject)) {

From 3331fbfa41ad6816d4479a8976302502b4a6602f Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Thu, 14 Aug 2025 17:30:06 +0200
Subject: [PATCH 17/42] chore: remove tailwind.config.cjs cli handling

---
 .../(getting-started)/install/index.mdx       | 112 -----
 packages/cli/project.json                     |   5 +-
 packages/cli/src/generators/init/schema.json  |   5 -
 .../setup-tailwind-generator.spec.ts          | 442 ------------------
 .../setup-tailwind-generator.ts               | 168 +------
 packages/kit-styled/src/templates/global.css  | 237 +++++++---
 6 files changed, 164 insertions(+), 805 deletions(-)

diff --git a/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx b/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx
index 808d4ad37..844dcaff5 100644
--- a/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx
+++ b/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx
@@ -113,118 +113,6 @@ For example, we use the following config by default on the Qwik UI docs:
 }
 ```
 
-### Step 3: Modify your tailwind.config.js file
-
-Finally, you need to modify your `tailwind.config.js` file:
-
-```tsx
-const { join } = require('path');
-const plugin = require('tailwindcss/plugin');
-
-/** @type {import('tailwindcss').Config} */
-
-module.exports = {
-  content: [join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}')],
-  plugins: [
-    require('tailwindcss-animate'),
-    plugin(function ({ addUtilities }) {
-      addUtilities({
-        '.press': {
-          transform: 'var(--transform-press)',
-        },
-      });
-    }),
-  ],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        border: 'oklch(from var(--border) l c h)',
-        input: 'oklch(from var(--input) l c h)',
-        ring: 'oklch(from var(--ring) l c h)',
-        background: 'oklch(from var(--background) l c h)',
-        foreground: 'oklch(from var(--foreground) l c h)',
-        primary: {
-          DEFAULT: 'oklch(from var(--primary) l c h)',
-          foreground: 'oklch(from var(--primary-foreground) l c h)',
-        },
-        secondary: {
-          DEFAULT: 'oklch(from var(--secondary) l c h)',
-          foreground: 'oklch(from var(--secondary-foreground) l c h)',
-        },
-        alert: {
-          DEFAULT: 'oklch(from var(--alert) l c h)',
-          foreground: 'oklch(from var(--alert-foreground) l c h)',
-        },
-        muted: {
-          DEFAULT: 'oklch(from var(--muted) l c h)',
-          foreground: 'oklch(from var(--muted-foreground) l c h)',
-        },
-        accent: {
-          DEFAULT: 'oklch(from var(--accent) l c h)',
-          foreground: 'oklch(from var(--accent-foreground) l c h)',
-        },
-        card: {
-          DEFAULT: 'oklch(from var(--card) l c h)',
-          foreground: 'oklch(from var(--card-foreground) l c h)',
-        },
-        popover: {
-          DEFAULT: 'oklch(from var(--popover) l c h)',
-          foreground: 'oklch(from var(--popover-foreground) l c h)',
-        },
-      },
-      borderRadius: {
-        base: 'var(--border-radius)',
-        sm: 'calc(var(--border-radius) + 0.125rem)',
-        DEFAULT: 'calc(var(--border-radius) + 0.25rem)',
-        md: 'calc(var(--border-radius) + 0.375rem)',
-        lg: 'calc(var(--border-radius) + 0.5rem)',
-        xl: 'calc(var(--border-radius) + 0.75rem)',
-        '2xl': 'calc(var(--border-radius) + 1rem)',
-        '3xl': 'calc(var(--border-radius) + 1.5rem)',
-      },
-      borderWidth: {
-        base: 'var(--border-width)',
-        DEFAULT: 'calc(var(--border-width) + 1px)',
-        2: 'calc(var(--border-width) + 2px)',
-        4: 'calc(var(--border-width) + 4px)',
-        8: 'calc(var(--border-width) + 8px)',
-      },
-      boxShadow: {
-        base: 'var(--shadow-base)',
-        sm: 'var(--shadow-sm)',
-        DEFAULT: 'var(--shadow)',
-        md: 'var(--shadow-md)',
-        lg: 'var(--shadow-lg)',
-        xl: 'var(--shadow-xl)',
-        '2xl': 'var(--shadow-2xl)',
-        inner: 'var(--shadow-inner)',
-      },
-      strokeWidth: {
-        0: '0',
-        base: 'var(--stroke-width)',
-        1: 'calc(var(--stroke-width) + 1px)',
-        2: 'calc(var(--stroke-width) + 2px)',
-      },
-      animation: {
-        'accordion-up': 'collapsible-up 0.2s ease-out 0s 1 normal forwards',
-        'accordion-down': 'collapsible-down 0.2s ease-out 0s 1 normal forwards',
-      },
-      keyframes: {
-        'collapsible-down': {
-          from: { height: '0' },
-          to: { height: 'var(--qwikui-collapsible-content-height)' },
-        },
-        'collapsible-up': {
-          from: { height: 'var(--qwikui-collapsible-content-height)' },
-          to: { height: '0' },
-        },
-      },
-    },
-  },
-};
-```
-
 This might seem like a lot of configuration, but we believe it to be worth it because it allows changing your entire application's theme at the click of a button.
 
 ### Step 4: Find the components you need in the docs and copy/paste them into your project
diff --git a/packages/cli/project.json b/packages/cli/project.json
index e52fe90a4..0a18a66ce 100644
--- a/packages/cli/project.json
+++ b/packages/cli/project.json
@@ -66,10 +66,7 @@
     "copy-global-css": {
       "executor": "nx:run-commands",
       "options": {
-        "commands": [
-          "cp apps/website/tailwind.config.cjs packages/kit-styled/src/templates",
-          "cp apps/website/src/global.css packages/kit-styled/src/templates"
-        ]
+        "commands": ["cp apps/website/src/global.css packages/kit-styled/src/templates"]
       }
     },
     "lint": {
diff --git a/packages/cli/src/generators/init/schema.json b/packages/cli/src/generators/init/schema.json
index e15177331..c952cd381 100644
--- a/packages/cli/src/generators/init/schema.json
+++ b/packages/cli/src/generators/init/schema.json
@@ -9,11 +9,6 @@
       "description": "The root directory you want the config file to be created in.",
       "x-prompt": "Which project do you ?"
     },
-    "tailwindConfigPath": {
-      "type": "string",
-      "description": "Tailwind config path",
-      "x-prompt": "Tailwind config path"
-    },
     "rootCssPath": {
       "type": "string",
       "description": "The root css file where you declare all the tailwind related directives",
diff --git a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
index 7a45def17..fbb4bba43 100644
--- a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
+++ b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
@@ -3,48 +3,6 @@ import { ThemeBorderRadiuses, ThemePrimaryColors, ThemeStyles } from '@qwik-ui/u
 import { SetupTailwindGeneratorSchema } from './schema';
 import { setupTailwindGenerator } from './setup-tailwind-generator';
 
-const tailwindConfigContent = `
-content: [
-  join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'),
-],
-darkMode: 'class',
-theme: {
-  screens: {
-    sm: '640px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-    '2xl': '1536px',
-  },
-  important: true,
-  extend: {
-    fontFamily: {
-      sans: ['Inter Variable', 'sans-serif'],
-    },
-  },
-},
-`;
-
-function wrapWithCommonJs(content: string) {
-  return `
-const { join } = require('path');
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  ${content}
-};
-  `;
-}
-
-function wrapWithEsm(content: string) {
-  return `
-/** @type {import('tailwindcss').Config} */
-export default {
-  ${content}
-};
-  `;
-}
-
 describe('Setup Tailwind generator', () => {
   function setupWithProperFiles() {
     const options: SetupTailwindGeneratorSchema = {};
@@ -65,412 +23,12 @@ html {
 }`,
     );
 
-    tree.write('tailwind.config.cjs', wrapWithCommonJs(tailwindConfigContent));
-
     return {
       tree,
       options,
     };
   }
 
-  test(`
-  GIVEN global.css and tailwind config exist in commonjs format
-  THEN it should generate the proper tailwind config values`, async () => {
-    const { tree, options } = setupWithProperFiles();
-
-    options.rootCssPath = 'src/global.css';
-
-    await setupTailwindGenerator(tree, options);
-
-    const updatedTailwindConfigContent = tree.read('tailwind.config.cjs', 'utf-8');
-
-    expect(updatedTailwindConfigContent).toMatchInlineSnapshot(`
-"const plugin = require('tailwindcss/plugin');
-
-const { join } = require('path');
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  plugins: [
-    require('tailwindcss-animate'),
-    plugin(function ({ addUtilities }) {
-      addUtilities({
-        '.press': {
-          transform: 'var(--transform-press)',
-        },
-      });
-    }),
-  ],
-
-  content: [join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}')],
-  darkMode: 'class',
-  theme: {
-    screens: {
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1280px',
-      '2xl': '1536px',
-    },
-    important: true,
-    extend: {
-      colors: {
-        border: 'oklch(from var(--border) l c h)',
-        input: 'oklch(from var(--input) l c h)',
-        ring: 'oklch(from var(--ring) l c h)',
-        background: 'oklch(from var(--background) l c h)',
-        foreground: 'oklch(from var(--foreground) l c h)',
-        primary: {
-          DEFAULT: 'oklch(from var(--primary) l c h)',
-          foreground: 'oklch(from var(--primary-foreground) l c h)',
-        },
-        secondary: {
-          DEFAULT: 'oklch(from var(--secondary) l c h)',
-          foreground: 'oklch(from var(--secondary-foreground) l c h)',
-        },
-        alert: {
-          DEFAULT: 'oklch(from var(--alert) l c h)',
-          foreground: 'oklch(from var(--alert-foreground) l c h)',
-        },
-        muted: {
-          DEFAULT: 'oklch(from var(--muted) l c h)',
-          foreground: 'oklch(from var(--muted-foreground) l c h)',
-        },
-        accent: {
-          DEFAULT: 'oklch(from var(--accent) l c h)',
-          foreground: 'oklch(from var(--accent-foreground) l c h)',
-        },
-        card: {
-          DEFAULT: 'oklch(from var(--card) l c h)',
-          foreground: 'oklch(from var(--card-foreground) l c h)',
-        },
-        popover: {
-          DEFAULT: 'oklch(from var(--popover) l c h)',
-          foreground: 'oklch(from var(--popover-foreground) l c h)',
-        },
-      },
-      borderRadius: {
-        base: 'var(--border-radius)',
-        sm: 'calc(var(--border-radius) + 0.125rem)',
-        DEFAULT: 'calc(var(--border-radius) + 0.25rem)',
-        md: 'calc(var(--border-radius) + 0.375rem)',
-        lg: 'calc(var(--border-radius) + 0.5rem)',
-        xl: 'calc(var(--border-radius) + 0.75rem)',
-        '2xl': 'calc(var(--border-radius) + 1rem)',
-        '3xl': 'calc(var(--border-radius) + 1.5rem)',
-      },
-      borderWidth: {
-        base: 'var(--border-width)',
-        DEFAULT: 'calc(var(--border-width) + 1px)',
-        2: 'calc(var(--border-width) + 2px)',
-        4: 'calc(var(--border-width) + 4px)',
-        8: 'calc(var(--border-width) + 8px)',
-      },
-      boxShadow: {
-        base: 'var(--shadow-base)',
-        sm: 'var(--shadow-sm)',
-        DEFAULT: 'var(--shadow)',
-        md: 'var(--shadow-md)',
-        lg: 'var(--shadow-lg)',
-        xl: 'var(--shadow-xl)',
-        '2xl': 'var(--shadow-2xl)',
-        inner: 'var(--shadow-inner)',
-      },
-      strokeWidth: {
-        0: '0',
-        base: 'var(--stroke-width)',
-        1: 'calc(var(--stroke-width) + 1px)',
-        2: 'calc(var(--stroke-width) + 2px)',
-      },
-      animation: {
-        'accordion-up': 'collapsible-up 0.2s ease-out 0s 1 normal forwards',
-        'accordion-down': 'collapsible-down 0.2s ease-out 0s 1 normal forwards',
-      },
-      keyframes: {
-        'collapsible-down': {
-          from: { height: '0' },
-          to: { height: 'var(--qwikui-collapsible-content-height)' },
-        },
-        'collapsible-up': {
-          from: { height: 'var(--qwikui-collapsible-content-height)' },
-          to: { height: '0' },
-        },
-      },
-      fontFamily: {
-        sans: ['Inter Variable', 'sans-serif'],
-      },
-    },
-  },
-};
-"
-`);
-  });
-
-  test(`
-  GIVEN tailwind config exist in esm format
-  WHEN running the generator
-  THEN it should generate the proper tailwind config values`, async () => {
-    const { tree, options } = setupWithProperFiles();
-    tree.write('tailwind.config.js', wrapWithEsm(tailwindConfigContent));
-
-    options.rootCssPath = 'src/global.css';
-
-    await setupTailwindGenerator(tree, options);
-
-    const updatedTailwindConfigContent = tree.read('tailwind.config.js', 'utf-8');
-
-    expect(updatedTailwindConfigContent).toMatchInlineSnapshot(`
-"import plugin from 'tailwindcss/plugin';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  plugins: [
-    require('tailwindcss-animate'),
-    plugin(function ({ addUtilities }) {
-      addUtilities({
-        '.press': {
-          transform: 'var(--transform-press)',
-        },
-      });
-    }),
-  ],
-
-  content: [join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}')],
-  darkMode: 'class',
-  theme: {
-    screens: {
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1280px',
-      '2xl': '1536px',
-    },
-    important: true,
-    extend: {
-      colors: {
-        border: 'oklch(from var(--border) l c h)',
-        input: 'oklch(from var(--input) l c h)',
-        ring: 'oklch(from var(--ring) l c h)',
-        background: 'oklch(from var(--background) l c h)',
-        foreground: 'oklch(from var(--foreground) l c h)',
-        primary: {
-          DEFAULT: 'oklch(from var(--primary) l c h)',
-          foreground: 'oklch(from var(--primary-foreground) l c h)',
-        },
-        secondary: {
-          DEFAULT: 'oklch(from var(--secondary) l c h)',
-          foreground: 'oklch(from var(--secondary-foreground) l c h)',
-        },
-        alert: {
-          DEFAULT: 'oklch(from var(--alert) l c h)',
-          foreground: 'oklch(from var(--alert-foreground) l c h)',
-        },
-        muted: {
-          DEFAULT: 'oklch(from var(--muted) l c h)',
-          foreground: 'oklch(from var(--muted-foreground) l c h)',
-        },
-        accent: {
-          DEFAULT: 'oklch(from var(--accent) l c h)',
-          foreground: 'oklch(from var(--accent-foreground) l c h)',
-        },
-        card: {
-          DEFAULT: 'oklch(from var(--card) l c h)',
-          foreground: 'oklch(from var(--card-foreground) l c h)',
-        },
-        popover: {
-          DEFAULT: 'oklch(from var(--popover) l c h)',
-          foreground: 'oklch(from var(--popover-foreground) l c h)',
-        },
-      },
-      borderRadius: {
-        base: 'var(--border-radius)',
-        sm: 'calc(var(--border-radius) + 0.125rem)',
-        DEFAULT: 'calc(var(--border-radius) + 0.25rem)',
-        md: 'calc(var(--border-radius) + 0.375rem)',
-        lg: 'calc(var(--border-radius) + 0.5rem)',
-        xl: 'calc(var(--border-radius) + 0.75rem)',
-        '2xl': 'calc(var(--border-radius) + 1rem)',
-        '3xl': 'calc(var(--border-radius) + 1.5rem)',
-      },
-      borderWidth: {
-        base: 'var(--border-width)',
-        DEFAULT: 'calc(var(--border-width) + 1px)',
-        2: 'calc(var(--border-width) + 2px)',
-        4: 'calc(var(--border-width) + 4px)',
-        8: 'calc(var(--border-width) + 8px)',
-      },
-      boxShadow: {
-        base: 'var(--shadow-base)',
-        sm: 'var(--shadow-sm)',
-        DEFAULT: 'var(--shadow)',
-        md: 'var(--shadow-md)',
-        lg: 'var(--shadow-lg)',
-        xl: 'var(--shadow-xl)',
-        '2xl': 'var(--shadow-2xl)',
-        inner: 'var(--shadow-inner)',
-      },
-      strokeWidth: {
-        0: '0',
-        base: 'var(--stroke-width)',
-        1: 'calc(var(--stroke-width) + 1px)',
-        2: 'calc(var(--stroke-width) + 2px)',
-      },
-      animation: {
-        'accordion-up': 'collapsible-up 0.2s ease-out 0s 1 normal forwards',
-        'accordion-down': 'collapsible-down 0.2s ease-out 0s 1 normal forwards',
-      },
-      keyframes: {
-        'collapsible-down': {
-          from: { height: '0' },
-          to: { height: 'var(--qwikui-collapsible-content-height)' },
-        },
-        'collapsible-up': {
-          from: { height: 'var(--qwikui-collapsible-content-height)' },
-          to: { height: '0' },
-        },
-      },
-      fontFamily: {
-        sans: ['Inter Variable', 'sans-serif'],
-      },
-    },
-  },
-};
-"
-`);
-  });
-  test(`
-  GIVEN tailwind config has already a plugins array
-  THEN it should add the plugin with the right plugin and import`, async () => {
-    const { tree, options } = setupWithProperFiles();
-    const tailwindConfig = wrapWithEsm(`plugins: [somePlugin],${tailwindConfigContent}`);
-    tree.write('tailwind.config.js', tailwindConfig);
-
-    options.rootCssPath = 'src/global.css';
-
-    await setupTailwindGenerator(tree, options);
-
-    const updatedTailwindConfigContent = tree.read('tailwind.config.js', 'utf-8');
-
-    expect(updatedTailwindConfigContent).toMatchInlineSnapshot(`
-"import plugin from 'tailwindcss/plugin';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  plugins: [
-    require('tailwindcss-animate'),
-    plugin(function ({ addUtilities }) {
-      addUtilities({
-        '.press': {
-          transform: 'var(--transform-press)',
-        },
-      });
-    }),
-    somePlugin,
-  ],
-  content: [join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}')],
-  darkMode: 'class',
-  theme: {
-    screens: {
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1280px',
-      '2xl': '1536px',
-    },
-    important: true,
-    extend: {
-      colors: {
-        border: 'oklch(from var(--border) l c h)',
-        input: 'oklch(from var(--input) l c h)',
-        ring: 'oklch(from var(--ring) l c h)',
-        background: 'oklch(from var(--background) l c h)',
-        foreground: 'oklch(from var(--foreground) l c h)',
-        primary: {
-          DEFAULT: 'oklch(from var(--primary) l c h)',
-          foreground: 'oklch(from var(--primary-foreground) l c h)',
-        },
-        secondary: {
-          DEFAULT: 'oklch(from var(--secondary) l c h)',
-          foreground: 'oklch(from var(--secondary-foreground) l c h)',
-        },
-        alert: {
-          DEFAULT: 'oklch(from var(--alert) l c h)',
-          foreground: 'oklch(from var(--alert-foreground) l c h)',
-        },
-        muted: {
-          DEFAULT: 'oklch(from var(--muted) l c h)',
-          foreground: 'oklch(from var(--muted-foreground) l c h)',
-        },
-        accent: {
-          DEFAULT: 'oklch(from var(--accent) l c h)',
-          foreground: 'oklch(from var(--accent-foreground) l c h)',
-        },
-        card: {
-          DEFAULT: 'oklch(from var(--card) l c h)',
-          foreground: 'oklch(from var(--card-foreground) l c h)',
-        },
-        popover: {
-          DEFAULT: 'oklch(from var(--popover) l c h)',
-          foreground: 'oklch(from var(--popover-foreground) l c h)',
-        },
-      },
-      borderRadius: {
-        base: 'var(--border-radius)',
-        sm: 'calc(var(--border-radius) + 0.125rem)',
-        DEFAULT: 'calc(var(--border-radius) + 0.25rem)',
-        md: 'calc(var(--border-radius) + 0.375rem)',
-        lg: 'calc(var(--border-radius) + 0.5rem)',
-        xl: 'calc(var(--border-radius) + 0.75rem)',
-        '2xl': 'calc(var(--border-radius) + 1rem)',
-        '3xl': 'calc(var(--border-radius) + 1.5rem)',
-      },
-      borderWidth: {
-        base: 'var(--border-width)',
-        DEFAULT: 'calc(var(--border-width) + 1px)',
-        2: 'calc(var(--border-width) + 2px)',
-        4: 'calc(var(--border-width) + 4px)',
-        8: 'calc(var(--border-width) + 8px)',
-      },
-      boxShadow: {
-        base: 'var(--shadow-base)',
-        sm: 'var(--shadow-sm)',
-        DEFAULT: 'var(--shadow)',
-        md: 'var(--shadow-md)',
-        lg: 'var(--shadow-lg)',
-        xl: 'var(--shadow-xl)',
-        '2xl': 'var(--shadow-2xl)',
-        inner: 'var(--shadow-inner)',
-      },
-      strokeWidth: {
-        0: '0',
-        base: 'var(--stroke-width)',
-        1: 'calc(var(--stroke-width) + 1px)',
-        2: 'calc(var(--stroke-width) + 2px)',
-      },
-      animation: {
-        'accordion-up': 'collapsible-up 0.2s ease-out 0s 1 normal forwards',
-        'accordion-down': 'collapsible-down 0.2s ease-out 0s 1 normal forwards',
-      },
-      keyframes: {
-        'collapsible-down': {
-          from: { height: '0' },
-          to: { height: 'var(--qwikui-collapsible-content-height)' },
-        },
-        'collapsible-up': {
-          from: { height: 'var(--qwikui-collapsible-content-height)' },
-          to: { height: '0' },
-        },
-      },
-      fontFamily: {
-        sans: ['Inter Variable', 'sans-serif'],
-      },
-    },
-  },
-};
-"
-`);
-  });
-
   test(`
     GIVEN no options are passed
     THEN it should generate "simple" style with primary color "cyan-600", base color "slate" and border-radius 0`, async () => {
diff --git a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.ts b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.ts
index 50751c232..c4350d49c 100644
--- a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.ts
+++ b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.ts
@@ -1,15 +1,13 @@
-import { Tree, formatFiles, joinPathFragments, workspaceRoot } from '@nx/devkit';
+import { Tree, formatFiles, joinPathFragments } from '@nx/devkit';
 import {
   ThemeBaseColors,
   ThemeBorderRadiuses,
   ThemePrimaryColors,
   ThemeStyles,
-  extractBetweenComments,
   extractThemeCSS,
   type ThemeConfig,
 } from '@qwik-ui/utils';
 import { readFileSync } from 'fs';
-import { join } from 'path';
 import { getKitRoot } from '../../_shared/get-kit-root';
 import { SetupTailwindGeneratorSchema } from './schema';
 
@@ -28,8 +26,6 @@ export async function setupTailwindGenerator(
 
   options.borderRadius = options.borderRadius ?? ThemeBorderRadiuses['BORDER-RADIUS-0'];
 
-  updateTailwindConfig(tree, options.projectRoot, kitRoot);
-
   updateRootCss(tree, globalCssPath, kitRoot, {
     style: options.style,
     primaryColor: options.primaryColor,
@@ -39,142 +35,6 @@ export async function setupTailwindGenerator(
   await formatFiles(tree);
 }
 
-function updateTailwindConfig(tree: Tree, projectRoot: string, kitRoot: string) {
-  const tailwindConfigPath = getTailwindConfigPath(tree, projectRoot, workspaceRoot);
-
-  if (!tailwindConfigPath) {
-    throw new Error('Could not find a tailwind config file');
-  }
-
-  const tailwindConfigContent = tree.read(tailwindConfigPath, 'utf-8');
-
-  if (!tailwindConfigContent) {
-    throw new Error('Could not read the tailwind config file');
-  }
-
-  const tailwindConfigTemplatePath = joinPathFragments(
-    kitRoot,
-    'src',
-    'templates',
-    'tailwind.config.cjs',
-  );
-
-  const tailwindTemplate = readFileSync(tailwindConfigTemplatePath, 'utf-8');
-
-  const pluginTemplate = extractBetweenComments(
-    tailwindTemplate,
-    '// PLUGIN-START',
-    '// PLUGIN-END',
-  );
-  const extendTemplate = extractBetweenComments(
-    tailwindTemplate,
-    '// EXTEND-START',
-    '// EXTEND-END',
-  );
-
-  let modifiedTailwindConfigContent = addPluginToConfig(
-    pluginTemplate,
-    tailwindConfigContent,
-  );
-
-  const extendKeyword = /\bextend:\s*\{/;
-
-  modifiedTailwindConfigContent = insertAfter({
-    whatToFind: extendKeyword,
-    whereToFindIt: modifiedTailwindConfigContent,
-    whatToInsert: extendTemplate,
-    shouldThrow: true,
-    errorTitle: 'extend',
-  });
-
-  tree.write(tailwindConfigPath, modifiedTailwindConfigContent);
-}
-
-function addPluginToConfig(pluginTemplate: string, tailwindConfigContent: string) {
-  let modifiedTailwindConfigContent;
-  const commonJsModuleExportsRegex = /\bmodule\.exports\s*=\s*\{/;
-  const isESM = !commonJsModuleExportsRegex.test(tailwindConfigContent);
-
-  const esmModuleExportsRegex = /\bexport\s*default\s*\{/;
-  const pluginsKeyword = /\bplugins:\s*\[/;
-
-  modifiedTailwindConfigContent = insertAfter({
-    whatToFind: pluginsKeyword,
-    whereToFindIt: tailwindConfigContent,
-    whatToInsert: pluginTemplate,
-    shouldThrow: false,
-  });
-
-  if (modifiedTailwindConfigContent) {
-    return addPluginImportStatement(modifiedTailwindConfigContent, isESM);
-  }
-
-  pluginTemplate = `plugins: [\n${pluginTemplate}\n  ],\n`;
-
-  modifiedTailwindConfigContent = insertAfter({
-    whatToFind: commonJsModuleExportsRegex,
-    whereToFindIt: tailwindConfigContent,
-    whatToInsert: pluginTemplate,
-    shouldThrow: false,
-  });
-
-  // if the result is undefined that means that
-  // it didn't find the `module.exports` string
-  if (!modifiedTailwindConfigContent) {
-    modifiedTailwindConfigContent = insertAfter({
-      whatToFind: esmModuleExportsRegex,
-      whereToFindIt: tailwindConfigContent,
-      whatToInsert: pluginTemplate,
-      shouldThrow: true,
-      errorTitle: '"module.exports" or "export default"',
-    });
-  }
-
-  return addPluginImportStatement(modifiedTailwindConfigContent, isESM);
-}
-
-function addPluginImportStatement(content: string, isESM = false) {
-  if (isESM) {
-    return `import plugin from 'tailwindcss/plugin';
-${content}`;
-  }
-  return `const plugin = require('tailwindcss/plugin');
-${content}`;
-}
-
-type InsertAfterConfig = {
-  whatToFind: RegExp;
-  whereToFindIt: string;
-  whatToInsert: string;
-  shouldThrow?: boolean;
-  errorTitle?: string;
-};
-
-function insertAfter({
-  whatToFind,
-  whereToFindIt: content,
-  whatToInsert,
-  shouldThrow,
-  errorTitle,
-}: InsertAfterConfig) {
-  const match = content.match(whatToFind);
-
-  if (!match || !match.index) {
-    if (shouldThrow) {
-      throw new Error(`Could not find the "${errorTitle}" in your tailwind config file`);
-    }
-    return;
-  }
-
-  if (match && match.index) {
-    const startIndex = match.index + match[0].length;
-    const modifiedTailwindConfigContent =
-      content.slice(0, startIndex) + whatToInsert + content.slice(startIndex);
-
-    return modifiedTailwindConfigContent;
-  }
-}
-
 function updateRootCss(
   tree: Tree,
   globalCssPath: string,
@@ -224,30 +84,4 @@ function updateRootCss(
   tree.write(globalCssPath, updatedGlobalCssContent);
 }
 
-// CREDIT FOR CODE: Nx Angular plugin
-function getTailwindConfigPath(
-  tree: Tree,
-  projectRoot: string,
-  workspaceRoot: string,
-): string | undefined {
-  // valid tailwind config files https://github.com/tailwindlabs/tailwindcss/blob/master/src/util/resolveConfigPath.js#L4
-  const tailwindConfigFiles = [
-    'tailwind.config.js',
-    'tailwind.config.cjs',
-    'tailwind.config.mjs',
-    'tailwind.config.ts',
-  ];
-
-  for (const basePath of [projectRoot, workspaceRoot]) {
-    for (const configFile of tailwindConfigFiles) {
-      const fullPath = join(basePath, configFile);
-      if (tree.read(fullPath)) {
-        return fullPath;
-      }
-    }
-  }
-
-  return undefined;
-}
-
 export default setupTailwindGenerator;
diff --git a/packages/kit-styled/src/templates/global.css b/packages/kit-styled/src/templates/global.css
index eb20b6317..9dacbd9fe 100644
--- a/packages/kit-styled/src/templates/global.css
+++ b/packages/kit-styled/src/templates/global.css
@@ -1,4 +1,4 @@
-@layer theme, base, components, utilities;
+@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
@@ -72,68 +72,69 @@
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: scale(0.95);
   }
-}
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-alert: var(--alert);
-  --color-alert-foreground: var(--alert-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --radius-xs: var(--border-radius);
-  --radius-sm: calc(var(--border-radius) + 0.125rem);
-  --radius-md: calc(var(--border-radius) + 0.375rem);
-  --radius-lg: calc(var(--border-radius) + 0.5rem);
-  --radius-xl: calc(var(--border-radius) + 0.75rem);
-  --radius-2xl: calc(var(--border-radius) + 1rem);
-  --radius-3xl: calc(var(--border-radius) + 1.5rem);
-  --shadow-base: var(--shadow-base);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
-  --shadow-inner: var(--shadow-inner);
-  --default-border-width: calc(var(--border-width) + 1px);
-  --border-width-base: var(--border-width);
-  --border-width-2: calc(var(--border-width) + 2px);
-  --border-width-4: calc(var(--border-width) + 4px);
-  --border-width-8: calc(var(--border-width) + 8px);
-  --stroke-width-0: 0px;
-  --stroke-width-base: var(--stroke-width);
-  --stroke-width-1: calc(var(--stroke-width) + 1px);
-  --stroke-width-2: calc(var(--stroke-width) + 2px);
-  --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
-  --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
-  @keyframes collapsible-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--qwikui-collapsible-content-height);
-    }
-  }
-  @keyframes collapsible-up {
-    from {
-      height: var(--qwikui-collapsible-content-height);
+  @theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-alert: var(--alert);
+    --color-alert-foreground: var(--alert-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --radius-xs: var(--border-radius);
+    --radius-sm: calc(var(--border-radius) + 0.125rem);
+    --radius-md: calc(var(--border-radius) + 0.375rem);
+    --radius-lg: calc(var(--border-radius) + 0.5rem);
+    --radius-xl: calc(var(--border-radius) + 0.75rem);
+    --radius-2xl: calc(var(--border-radius) + 1rem);
+    --radius-3xl: calc(var(--border-radius) + 1.5rem);
+    --shadow-base: var(--shadow-base);
+    --shadow-xs: var(--shadow-xs);
+    --shadow-sm: var(--shadow-sm);
+    --shadow-md: var(--shadow-md);
+    --shadow-lg: var(--shadow-lg);
+    --shadow-xl: var(--shadow-xl);
+    --shadow-2xl: var(--shadow-2xl);
+    --shadow-inner: var(--shadow-inner);
+    --default-border-width: calc(var(--border-width) + 1px);
+    --border-width-base: var(--border-width);
+    --border-width-2: calc(var(--border-width) + 2px);
+    --border-width-4: calc(var(--border-width) + 4px);
+    --border-width-8: calc(var(--border-width) + 8px);
+    --stroke-width-0: 0px;
+    --stroke-width-base: var(--stroke-width);
+    --stroke-width-1: calc(var(--stroke-width) + 1px);
+    --stroke-width-2: calc(var(--stroke-width) + 2px);
+    --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+    --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+    @keyframes collapsible-down {
+      from {
+        height: 0;
+      }
+      to {
+        height: var(--qwikui-collapsible-content-height);
+      }
     }
-    to {
-      height: 0;
+    @keyframes collapsible-up {
+      from {
+        height: var(--qwikui-collapsible-content-height);
+      }
+      to {
+        height: 0;
+      }
     }
   }
 }
@@ -159,15 +160,7 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background font-sans text-foreground;
-  }
-
-  p code {
-    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
-  }
-
-  pre code {
-    @apply whitespace-pre-wrap;
+    @apply bg-background text-foreground;
   }
 }
 
@@ -176,11 +169,12 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background font-sans text-foreground;
+    @apply bg-background text-foreground;
   }
 }
 
 @layer base {
+  /* CSS PARSER: START - DO NOT REMOVE */
   .border-radius-0 {
     --border-radius: 0rem;
   }
@@ -201,9 +195,8 @@
     --border-radius: 1rem;
   }
 
-  /* CSS PARSER: START - DO NOT REMOVE */
   .simple {
-    --border-width: 1px;
+    --border-width: 0px;
     --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
     --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
@@ -226,7 +219,7 @@
   }
 
   .brutalist.brutalist {
-    --border-width: 3px;
+    --border-width: 2px;
     --stroke-width: 2px;
     --border: black;
     --input: black;
@@ -1376,9 +1369,103 @@
     --primary: var(--color-rose-900);
     --primary-foreground: white;
   }
+  /* CSS PARSER: END - DO NOT REMOVE */
 }
 
-/* CSS PARSER: END - DO NOT REMOVE */
+/* DOCS */
+@layer base {
+  * {
+    @apply font-sans;
+  }
+  body {
+    @apply font-sans;
+  }
+  p code {
+    @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
+  }
+  pre code {
+    @apply whitespace-pre-wrap;
+  }
+
+  *::-webkit-scrollbar {
+    background-color: transparent;
+    width: 1rem;
+    height: 1rem;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    /* Thumb color */
+    background-color: hsla(var(--foreground) / 0.25);
+    border-radius: 0.4rem;
+    background-clip: padding-box;
+    border-left: 0.3rem solid transparent;
+    border-right: 0.3rem solid transparent;
+  }
+
+  .navigation-docs::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.1);
+  }
+
+  .dark .navigation-docs::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.2);
+  }
+
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+    border-left: 0;
+  }
+
+  .toc-scrollbar::-webkit-scrollbar-track,
+  .dark .toc-scrollbar::-webkit-scrollbar-track {
+    border-color: transparent;
+  }
+
+  .toc-scrollbar::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  .toc-scrollbar:hover.toc-scrollbar::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.15);
+  }
+
+  .dark *::-webkit-scrollbar-track {
+    background: transparent;
+    border-left: 0;
+  }
+
+  .code-example *::-webkit-scrollbar-track {
+    background: transparent;
+    border: 0px;
+  }
+
+  .code-example *::-webkit-scrollbar-thumb {
+    background-color: var(--qwikui-slate-600);
+    border-radius: 0.5rem;
+    background-clip: padding-box;
+  }
+
+  /* no horizontal overflow on code snippets */
+  .tab-size pre {
+    white-space: pre-wrap;
+    background: transparent !important;
+  }
+
+  .note-link a {
+    border-bottom: 1px solid var(--qwikui-slate-950) !important;
+  }
+
+  .dark .note-link a {
+    border-bottom: 1px solid white !important;
+  }
+
+  .gif-container {
+    border-radius: var(--border-radius);
+  }
+}
 
 @utility accordion-animation-1 {
   &[data-open] {

From 81addf0d159eabd9cd870c4ad02d65689adbf736 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Thu, 14 Aug 2025 18:09:22 +0200
Subject: [PATCH 18/42] fix: cli tests config

---
 jest.config.ts                                |   4 +-
 nx.json                                       |   5 +-
 packages/cli-e2e/src/cli.smoke.spec.ts        |   4 +-
 packages/cli/.prettierrc                      |   6 +
 packages/cli/package.json                     |   6 +-
 packages/cli/src/_shared/external-deps.json   |   2 +-
 .../setup-tailwind-generator.spec.ts          | 528 ++++++++++++------
 packages/kit-styled/package.json              |   2 +-
 pnpm-lock.yaml                                |  29 +-
 9 files changed, 392 insertions(+), 194 deletions(-)
 create mode 100644 packages/cli/.prettierrc

diff --git a/jest.config.ts b/jest.config.ts
index d0dbd1b88..7a5e33696 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -1,5 +1,5 @@
-import { getJestProjects } from '@nx/jest';
+import { getJestProjectsAsync } from '@nx/jest';
 
 export default {
-  projects: getJestProjects(),
+  projects: await getJestProjectsAsync(),
 };
diff --git a/nx.json b/nx.json
index 5d2960fcf..aac4c15a4 100644
--- a/nx.json
+++ b/nx.json
@@ -52,5 +52,8 @@
     ]
   },
   "nxCloudAccessToken": "MzViMzc1MGQtMDQyNi00N2E3LTliMmYtYWI4ZGIxYWJjYzE3fHJlYWQtd3JpdGU=",
-  "defaultBase": "main"
+  "defaultBase": "main",
+  "tui": {
+    "enabled": false
+  }
 }
diff --git a/packages/cli-e2e/src/cli.smoke.spec.ts b/packages/cli-e2e/src/cli.smoke.spec.ts
index 4f1fa5a34..604d28dcb 100644
--- a/packages/cli-e2e/src/cli.smoke.spec.ts
+++ b/packages/cli-e2e/src/cli.smoke.spec.ts
@@ -23,14 +23,14 @@ describe('Qwik UI CLI Smoke test', () => {
 
   it('should be installed and add the button file', () => {
     execSync(
-      'npx -y qwik-ui@e2e init --e2e --projectRoot ./ --uiComponentsPath "src/components/ui" --rootCssPath "src/global.css" --installTailwind --style "simple" --components=button',
+      'npx -y qwik-ui@0.3.3 init --e2e --projectRoot ./ --uiComponentsPath "src/components/ui" --rootCssPath "src/global.css" --installTailwind --style "simple" --components=button',
       {
         cwd: projectDirectory,
         env: process.env,
         stdio: 'inherit',
       },
     );
-    execSync('npx -y qwik-ui@e2e add button', {
+    execSync('pnpm exec qwik-ui add button', {
       cwd: projectDirectory,
       env: process.env,
       stdio: 'inherit',
diff --git a/packages/cli/.prettierrc b/packages/cli/.prettierrc
new file mode 100644
index 000000000..0df26fa76
--- /dev/null
+++ b/packages/cli/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 90
+}
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 62b0545a7..a9ee00ef0 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "qwik-ui",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "publishConfig": {
     "access": "public"
   },
@@ -12,14 +12,14 @@
   "description": "Qwik UI Command line interface",
   "dependencies": {
     "@clack/prompts": "^0.7.0",
-    "@nx/devkit": "19.2.3",
+    "@nx/devkit": "21.1.2",
     "@qwik-ui/utils": "0.3.2",
     "ansis": "2.3.0",
     "tslib": "^2.3.0",
     "yargs": "17.7.2"
   },
   "devDependencies": {
-    "@qwik-ui/styled": "0.3.2",
+    "@qwik-ui/styled": "0.3.4",
     "prettier-2": "npm:prettier@^2"
   },
   "type": "commonjs",
diff --git a/packages/cli/src/_shared/external-deps.json b/packages/cli/src/_shared/external-deps.json
index 13c9c9635..aded42930 100644
--- a/packages/cli/src/_shared/external-deps.json
+++ b/packages/cli/src/_shared/external-deps.json
@@ -1,5 +1,5 @@
 {
   "tailwindcss-animate": "^1.0.7",
-  "class-variance-authority": "^0.7.0",
+  "class-variance-authority": "0.7.1",
   "@qwikest/icons": "^0.0.13"
 }
diff --git a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
index fbb4bba43..9779d3b00 100644
--- a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
+++ b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
@@ -41,91 +41,194 @@ html {
     const updatedGlobalCssContent = tree.read('src/global.css', 'utf-8');
 
     expect(updatedGlobalCssContent).toMatchInlineSnapshot(`
-"@tailwind components;
-@tailwind base;
-@tailwind utilities;
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --primary: 191.6 91.4% 36.5%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 40% 98%;
-    --ring: 222.2 47.4% 11.2%;
-    --border-width: 0px;
-    --border-radius: 0;
-    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
-    --shadow-md:
-      0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    --shadow-lg:
-      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-    --shadow-xl:
-      0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
-    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
-    --transform-press: scale(0.95);
-  }
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --primary: 191.6 91.4% 36.5%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 40% 98%;
-    --ring: 212.7 26.8% 83.9;
-    --border-width: 0px;
-    --border-radius: 0;
-    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
-    --shadow-md:
-      0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    --shadow-lg:
-      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-    --shadow-xl:
-      0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
-    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
-    --transform-press: scale(0.95);
-  }
-}
+      "@tailwind components;
+      @tailwind base;
+      @tailwind utilities;
+      @layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+      @import 'tailwindcss';
+      @import 'tw-animate-css';
 
-html {
-  height: 100%;
-  min-height: 100%;
-  scroll-behavior: smooth;
-  background-color: var(--color-bg) !important;
-  color: var(--color-text) !important;
-}
-"
-`);
+      @custom-variant dark (&:is(.dark *));
+
+      @layer base {
+        :root {
+          --background: white;
+          --foreground: var(--color-slate-950);
+          --muted: var(--color-slate-100);
+          --muted-foreground: var(--color-slate-700);
+          --popover: white;
+          --popover-foreground: var(--color-slate-900);
+          --card: white;
+          --card-foreground: var(--color-slate-900);
+          --border: var(--color-slate-200);
+          --input: var(--color-slate-200);
+          --primary: var(--color-cyan-600);
+          --primary-foreground: white;
+          --secondary: var(--color-slate-900);
+          --secondary-foreground: white;
+          --accent: var(--color-slate-100);
+          --accent-foreground: var(--color-slate-900);
+          --alert: var(--color-red-500);
+          --alert-foreground: var(--color-slate-50);
+          --ring: var(--color-slate-900);
+          --border-width: 0px;
+          --border-radius: 0rem;
+          --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+          --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+          --shadow-md:
+            0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+          --shadow-lg:
+            0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+          --shadow-xl:
+            0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+          --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+          --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+          --transform-press: scale(0.95);
+        }
+        .dark {
+          --background: var(--color-slate-950);
+          --foreground: var(--color-slate-50);
+          --muted: var(--color-slate-800);
+          --muted-foreground: var(--color-slate-300);
+          --popover: var(--color-slate-950);
+          --popover-foreground: var(--color-slate-50);
+          --card: var(--color-slate-950);
+          --card-foreground: var(--color-slate-50);
+          --border: var(--color-slate-800);
+          --input: var(--color-slate-800);
+          --primary: var(--color-cyan-600);
+          --primary-foreground: white;
+          --secondary: var(--color-slate-100);
+          --secondary-foreground: black;
+          --accent: var(--color-slate-700);
+          --accent-foreground: var(--color-slate-50);
+          --alert: var(--color-red-500);
+          --alert-foreground: var(--color-slate-50);
+          --ring: var(--color-slate-300);
+          --border-width: 0px;
+          --border-radius: 0rem;
+          --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+          --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+          --shadow-md:
+            0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+          --shadow-lg:
+            0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+          --shadow-xl:
+            0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+          --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+          --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+          --transform-press: scale(0.95);
+        }
+      }
+
+      @theme inline {
+        --color-background: var(--background);
+        --color-foreground: var(--foreground);
+        --color-card: var(--card);
+        --color-card-foreground: var(--card-foreground);
+        --color-popover: var(--popover);
+        --color-popover-foreground: var(--popover-foreground);
+        --color-primary: var(--primary);
+        --color-primary-foreground: var(--primary-foreground);
+        --color-secondary: var(--secondary);
+        --color-secondary-foreground: var(--secondary-foreground);
+        --color-muted: var(--muted);
+        --color-muted-foreground: var(--muted-foreground);
+        --color-accent: var(--accent);
+        --color-accent-foreground: var(--accent-foreground);
+        --color-alert: var(--alert);
+        --color-alert-foreground: var(--alert-foreground);
+        --color-border: var(--border);
+        --color-input: var(--input);
+        --color-ring: var(--ring);
+        --radius-xs: var(--border-radius);
+        --radius-sm: calc(var(--border-radius) + 0.125rem);
+        --radius-md: calc(var(--border-radius) + 0.375rem);
+        --radius-lg: calc(var(--border-radius) + 0.5rem);
+        --radius-xl: calc(var(--border-radius) + 0.75rem);
+        --radius-2xl: calc(var(--border-radius) + 1rem);
+        --radius-3xl: calc(var(--border-radius) + 1.5rem);
+        --shadow-base: var(--shadow-base);
+        --shadow-xs: var(--shadow-xs);
+        --shadow-sm: var(--shadow-sm);
+        --shadow-md: var(--shadow-md);
+        --shadow-lg: var(--shadow-lg);
+        --shadow-xl: var(--shadow-xl);
+        --shadow-2xl: var(--shadow-2xl);
+        --shadow-inner: var(--shadow-inner);
+        --default-border-width: calc(var(--border-width) + 1px);
+        --border-width-base: var(--border-width);
+        --border-width-2: calc(var(--border-width) + 2px);
+        --border-width-4: calc(var(--border-width) + 4px);
+        --border-width-8: calc(var(--border-width) + 8px);
+        --stroke-width-0: 0px;
+        --stroke-width-base: var(--stroke-width);
+        --stroke-width-1: calc(var(--stroke-width) + 1px);
+        --stroke-width-2: calc(var(--stroke-width) + 2px);
+        --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+        --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+        @keyframes collapsible-down {
+          from {
+            height: 0;
+          }
+          to {
+            height: var(--qwikui-collapsible-content-height);
+          }
+        }
+        @keyframes collapsible-up {
+          from {
+            height: var(--qwikui-collapsible-content-height);
+          }
+          to {
+            height: 0;
+          }
+        }
+      }
+
+      @utility press {
+        transform: var(--transform-press);
+      }
+      @utility border-width-* {
+        /* prettier-ignore */
+        border: --value(--border-width-*);
+      }
+      @utility stroke-width-* {
+        /* prettier-ignore */
+        stroke: --value(--stroke-width-*);
+      }
+      @utility shadow-* {
+        /* prettier-ignore */
+        box-shadow: --value(--shadow-*);
+      }
+
+      @layer base {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+
+      @layer components {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+
+      html {
+        height: 100%;
+        min-height: 100%;
+        scroll-behavior: smooth;
+        background-color: var(--color-bg) !important;
+        color: var(--color-text) !important;
+      }
+      "
+    `);
   });
   test(`
     GIVEN style is "brutalist" and primary color is "red-600" and border-radius is 1
@@ -142,84 +245,185 @@ html {
     const updatedGlobalCssContent = tree.read('src/global.css', 'utf-8');
 
     expect(updatedGlobalCssContent).toMatchInlineSnapshot(`
-"@tailwind components;
-@tailwind base;
-@tailwind utilities;
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-    --border: 0 0% 0%;
-    --input: 0 0% 0%;
-    --primary: 0 72.2% 50.6%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 40% 98%;
-    --ring: 0 0% 0%;
-    --border-width: 2px;
-    --border-radius: 1rem;
-    --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1);
-    --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1);
-    --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-inner: inset 2px 2px 0px 0px rgba(0, 0, 0, 0);
-    --transform-press: translate(4px, 4px);
-  }
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --border: 0 0% 0%;
-    --input: 0 0% 0%;
-    --primary: 0 72.2% 50.6%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 210 40% 98%;
-    --ring: 0 0% 0%;
-    --border-width: 2px;
-    --border-radius: 1rem;
-    --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1);
-    --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1);
-    --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
-    --transform-press: translate(4px, 4px);
-  }
-}
+      "@tailwind components;
+      @tailwind base;
+      @tailwind utilities;
+      @layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+      @import 'tailwindcss';
+      @import 'tw-animate-css';
 
-html {
-  height: 100%;
-  min-height: 100%;
-  scroll-behavior: smooth;
-  background-color: var(--color-bg) !important;
-  color: var(--color-text) !important;
-}
-"
-`);
+      @custom-variant dark (&:is(.dark *));
+
+      @layer base {
+        :root {
+          --background: white;
+          --foreground: var(--color-slate-950);
+          --muted: var(--color-slate-100);
+          --muted-foreground: var(--color-slate-700);
+          --popover: white;
+          --popover-foreground: var(--color-slate-900);
+          --card: white;
+          --card-foreground: var(--color-slate-900);
+          --border: black;
+          --input: black;
+          --primary: var(--color-red-600);
+          --primary-foreground: white;
+          --secondary: var(--color-slate-900);
+          --secondary-foreground: white;
+          --accent: var(--color-slate-100);
+          --accent-foreground: var(--color-slate-900);
+          --alert: var(--color-red-500);
+          --alert-foreground: var(--color-slate-50);
+          --ring: black;
+          --border-width: 2px;
+          --border-radius: 1rem;
+          --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
+          --shadow: 5px 5px rgba(0, 0, 0, 1);
+          --shadow-md: 6px 6px rgba(0, 0, 0, 1);
+          --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
+          --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
+          --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+          --transform-press: translate(4px, 4px);
+        }
+        .dark {
+          --background: var(--color-slate-950);
+          --foreground: var(--color-slate-50);
+          --muted: var(--color-slate-800);
+          --muted-foreground: var(--color-slate-300);
+          --popover: var(--color-slate-950);
+          --popover-foreground: var(--color-slate-50);
+          --card: var(--color-slate-950);
+          --card-foreground: var(--color-slate-50);
+          --border: black;
+          --input: black;
+          --primary: var(--color-red-600);
+          --primary-foreground: white;
+          --secondary: var(--color-slate-100);
+          --secondary-foreground: black;
+          --accent: var(--color-slate-700);
+          --accent-foreground: var(--color-slate-50);
+          --alert: var(--color-red-500);
+          --alert-foreground: var(--color-slate-50);
+          --ring: black;
+          --border-width: 3px;
+          --border-radius: 1rem;
+          --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
+          --shadow: 5px 5px rgba(0, 0, 0, 1);
+          --shadow-md: 6px 6px rgba(0, 0, 0, 1);
+          --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
+          --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
+          --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+          --transform-press: translate(4px, 4px);
+        }
+      }
+
+      @theme inline {
+        --color-background: var(--background);
+        --color-foreground: var(--foreground);
+        --color-card: var(--card);
+        --color-card-foreground: var(--card-foreground);
+        --color-popover: var(--popover);
+        --color-popover-foreground: var(--popover-foreground);
+        --color-primary: var(--primary);
+        --color-primary-foreground: var(--primary-foreground);
+        --color-secondary: var(--secondary);
+        --color-secondary-foreground: var(--secondary-foreground);
+        --color-muted: var(--muted);
+        --color-muted-foreground: var(--muted-foreground);
+        --color-accent: var(--accent);
+        --color-accent-foreground: var(--accent-foreground);
+        --color-alert: var(--alert);
+        --color-alert-foreground: var(--alert-foreground);
+        --color-border: var(--border);
+        --color-input: var(--input);
+        --color-ring: var(--ring);
+        --radius-xs: var(--border-radius);
+        --radius-sm: calc(var(--border-radius) + 0.125rem);
+        --radius-md: calc(var(--border-radius) + 0.375rem);
+        --radius-lg: calc(var(--border-radius) + 0.5rem);
+        --radius-xl: calc(var(--border-radius) + 0.75rem);
+        --radius-2xl: calc(var(--border-radius) + 1rem);
+        --radius-3xl: calc(var(--border-radius) + 1.5rem);
+        --shadow-base: var(--shadow-base);
+        --shadow-xs: var(--shadow-xs);
+        --shadow-sm: var(--shadow-sm);
+        --shadow-md: var(--shadow-md);
+        --shadow-lg: var(--shadow-lg);
+        --shadow-xl: var(--shadow-xl);
+        --shadow-2xl: var(--shadow-2xl);
+        --shadow-inner: var(--shadow-inner);
+        --default-border-width: calc(var(--border-width) + 1px);
+        --border-width-base: var(--border-width);
+        --border-width-2: calc(var(--border-width) + 2px);
+        --border-width-4: calc(var(--border-width) + 4px);
+        --border-width-8: calc(var(--border-width) + 8px);
+        --stroke-width-0: 0px;
+        --stroke-width-base: var(--stroke-width);
+        --stroke-width-1: calc(var(--stroke-width) + 1px);
+        --stroke-width-2: calc(var(--stroke-width) + 2px);
+        --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+        --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+        @keyframes collapsible-down {
+          from {
+            height: 0;
+          }
+          to {
+            height: var(--qwikui-collapsible-content-height);
+          }
+        }
+        @keyframes collapsible-up {
+          from {
+            height: var(--qwikui-collapsible-content-height);
+          }
+          to {
+            height: 0;
+          }
+        }
+      }
+
+      @utility press {
+        transform: var(--transform-press);
+      }
+      @utility border-width-* {
+        /* prettier-ignore */
+        border: --value(--border-width-*);
+      }
+      @utility stroke-width-* {
+        /* prettier-ignore */
+        stroke: --value(--stroke-width-*);
+      }
+      @utility shadow-* {
+        /* prettier-ignore */
+        box-shadow: --value(--shadow-*);
+      }
+
+      @layer base {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+
+      @layer components {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+
+      html {
+        height: 100%;
+        min-height: 100%;
+        scroll-behavior: smooth;
+        background-color: var(--color-bg) !important;
+        color: var(--color-text) !important;
+      }
+      "
+    `);
   });
 });
diff --git a/packages/kit-styled/package.json b/packages/kit-styled/package.json
index 4213ab89e..4fd38229f 100644
--- a/packages/kit-styled/package.json
+++ b/packages/kit-styled/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qwik-ui/styled",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Qwik UI components library with styles",
   "publishConfig": {
     "access": "public"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f26de5265..a907522d5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -294,8 +294,8 @@ importers:
         specifier: ^0.7.0
         version: 0.7.0
       '@nx/devkit':
-        specifier: 19.2.3
-        version: 19.2.3(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.8.2))(@swc/core@1.11.29(@swc/helpers@0.5.17)))
+        specifier: 21.1.2
+        version: 21.1.2(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.8.2))(@swc/core@1.11.29(@swc/helpers@0.5.17)))
       '@qwik-ui/utils':
         specifier: 0.3.2
         version: link:../utils
@@ -310,7 +310,7 @@ importers:
         version: 17.7.2
     devDependencies:
       '@qwik-ui/styled':
-        specifier: 0.3.2
+        specifier: 0.3.4
         version: link:../kit-styled
       prettier-2:
         specifier: npm:prettier@^2
@@ -2141,14 +2141,6 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@nrwl/devkit@19.2.3':
-    resolution: {integrity: sha512-OL6sc70gR/USasvbYzyYY44Hd5ZCde2UfiA5h8VeAYAJbq+JmtscpvjcnZ7OIsXyYEOxe1rypULElqu/8qpKzQ==}
-
-  '@nx/devkit@19.2.3':
-    resolution: {integrity: sha512-if1WwRVexrQBBADObEcxVIivq4QRZWY/nYRhCQy/qfFI6Cu2jBSI6ZQ1uy7to2L2sQPLgn8v2beQZiAeZdIktg==}
-    peerDependencies:
-      nx: '>= 17 <= 20'
-
   '@nx/devkit@21.1.2':
     resolution: {integrity: sha512-1dgjwSsNDdp/VXydZnSfzfVwySEB3C9yjzeIw6+3+nRvZfH16a7ggZE7MF5sJTq4d+01hAgIDz3KyvGa6Jf73g==}
     peerDependencies:
@@ -10563,32 +10555,25 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.19.1
 
-  '@nrwl/devkit@19.2.3(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.8.2))(@swc/core@1.11.29(@swc/helpers@0.5.17)))':
-    dependencies:
-      '@nx/devkit': 19.2.3(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.8.2))(@swc/core@1.11.29(@swc/helpers@0.5.17)))
-    transitivePeerDependencies:
-      - nx
-
-  '@nx/devkit@19.2.3(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.8.2))(@swc/core@1.11.29(@swc/helpers@0.5.17)))':
+  '@nx/devkit@21.1.2(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17)))':
     dependencies:
-      '@nrwl/devkit': 19.2.3(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.8.2))(@swc/core@1.11.29(@swc/helpers@0.5.17)))
       ejs: 3.1.10
       enquirer: 2.3.6
       ignore: 5.3.2
       minimatch: 9.0.3
-      nx: 21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.8.2))(@swc/core@1.11.29(@swc/helpers@0.5.17))
+      nx: 21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17))
       semver: 7.7.2
       tmp: 0.2.3
       tslib: 2.8.1
       yargs-parser: 21.1.1
 
-  '@nx/devkit@21.1.2(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17)))':
+  '@nx/devkit@21.1.2(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.8.2))(@swc/core@1.11.29(@swc/helpers@0.5.17)))':
     dependencies:
       ejs: 3.1.10
       enquirer: 2.3.6
       ignore: 5.3.2
       minimatch: 9.0.3
-      nx: 21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17))
+      nx: 21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.8.2))(@swc/core@1.11.29(@swc/helpers@0.5.17))
       semver: 7.7.2
       tmp: 0.2.3
       tslib: 2.8.1

From 60dd99e2738ea9d0e58eb90c5af56bf0b84e7b65 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Thu, 14 Aug 2025 18:27:35 +0200
Subject: [PATCH 19/42] fix: component-tests

---
 apps/component-tests/vite.config.ts  | 2 --
 packages/kit-headless/vite.config.ts | 2 --
 packages/kit-styled/vite.config.ts   | 2 --
 3 files changed, 6 deletions(-)

diff --git a/apps/component-tests/vite.config.ts b/apps/component-tests/vite.config.ts
index 3ac863824..3eaf235c8 100644
--- a/apps/component-tests/vite.config.ts
+++ b/apps/component-tests/vite.config.ts
@@ -2,7 +2,6 @@ import { qwikVite } from '@builder.io/qwik/optimizer';
 import { qwikCity } from '@builder.io/qwik-city/vite';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
-import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
   root: 'apps/component-tests',
@@ -19,7 +18,6 @@ export default defineConfig({
       tsconfigFileNames: ['tsconfig.app.json'],
     }),
     tsconfigPaths({ root: '../../' }),
-    tailwindcss(),
   ],
   server: {
     fs: {
diff --git a/packages/kit-headless/vite.config.ts b/packages/kit-headless/vite.config.ts
index ecdb1a70c..64060df6c 100644
--- a/packages/kit-headless/vite.config.ts
+++ b/packages/kit-headless/vite.config.ts
@@ -7,7 +7,6 @@ import dts from 'vite-plugin-dts';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import pkg from './package.json';
-import tailwindcss from '@tailwindcss/vite';
 
 const { dependencies = {}, peerDependencies = {} } = pkg as any;
 const makeRegex = (dep: any) => new RegExp(`^${dep}(/.*)?$`);
@@ -37,7 +36,6 @@ export default defineConfig({
     viteStaticCopy({
       targets: [{ src: './README.md', dest: './' }],
     }),
-    tailwindcss(),
   ],
   server: {
     fs: {
diff --git a/packages/kit-styled/vite.config.ts b/packages/kit-styled/vite.config.ts
index 067d9f1a1..cff90b3a6 100644
--- a/packages/kit-styled/vite.config.ts
+++ b/packages/kit-styled/vite.config.ts
@@ -1,6 +1,5 @@
 import { qwikVite } from '@builder.io/qwik/optimizer';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
-import tailwindcss from '@tailwindcss/vite';
 import { join } from 'path';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
@@ -17,7 +16,6 @@ export default defineConfig({
       tsconfigPath: join(__dirname, 'tsconfig.lib.json'),
     }),
     nxViteTsPaths(),
-    tailwindcss(),
   ],
   server: {
     fs: {

From b7a41803da5e2619fce64c79c6204c91f07d68a0 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Fri, 15 Aug 2025 08:24:42 +0200
Subject: [PATCH 20/42] test: extract-theme-css

---
 .../utils/src/theme/extract-theme-css.spec.ts | 1708 +++++++++++++----
 1 file changed, 1326 insertions(+), 382 deletions(-)

diff --git a/packages/utils/src/theme/extract-theme-css.spec.ts b/packages/utils/src/theme/extract-theme-css.spec.ts
index 57bdd65bd..c53babadd 100644
--- a/packages/utils/src/theme/extract-theme-css.spec.ts
+++ b/packages/utils/src/theme/extract-theme-css.spec.ts
@@ -32,30 +32,33 @@ describe('Extract theme from css', () => {
     const theme = extractThemeCSS(inputThemeString, exampleRootCssContent);
 
     expect(theme).toMatchInlineSnapshot(`
-      "@layer base {
+      "@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+      @import 'tailwindcss';
+      @import 'tw-animate-css';
+
+      @custom-variant dark (&:is(.dark *));
+
+      @layer base {
         :root {
-          --background: 0 0% 100%;
-          --foreground: 0 0% 9%;
-          --muted: 0 0% 96.1%;
-          --muted-foreground: 0 0% 45.1%;
-          --popover: 0 0% 100%;
-          --popover-foreground: 0 0% 9%;
-          --card: 0 0% 100%;
-          --card-foreground: 0 0% 9%;
-          --border: 0 0% 89.8%;
-          --input: 0 0% 89.8%;
-          --primary: 191.6 91.4% 36.5%;
-          --primary-foreground: 0 0% 100%;
-          --secondary: 0 0% 83.1%;
-          --secondary-foreground: 0 0% 9%;
-          --accent: 0 0% 96.1%;
-          --accent-foreground: 0 0% 9%;
-          --alert: 0 84.2% 60.2%;
-          --alert-foreground: 0 0% 98%;
-          --ring: 0 0% 9%;
+          --background: white;
+          --foreground: var(--color-neutral-900);
+          --muted: var(--color-neutral-100);
+          --muted-foreground: var(--color-neutral-700);
+          --popover: white;
+          --popover-foreground: var(--color-neutral-900);
+          --card: white;
+          --card-foreground: var(--color-neutral-900);
+          --border: var(--color-neutral-200);
+          --input: var(--color-neutral-200);
+          --secondary: var(--color-neutral-900);
+          --secondary-foreground: white;
+          --accent: var(--color-neutral-100);
+          --accent-foreground: var(--color-neutral-900);
+          --alert: var(--color-red-500);
+          --alert-foreground: var(--color-neutral-50);
+          --ring: var(--color-neutral-900);
           --border-width: 0px;
-          --border-radius: 0;
-          --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+          --border-radius: 0rem;
           --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
           --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
           --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
@@ -66,28 +69,25 @@ describe('Extract theme from css', () => {
           --transform-press: scale(0.95);
         }
         .dark {
-          --background: 0 0% 9%;
-          --foreground: 0 0% 98%;
-          --muted: 0 0% 14.9%;
-          --muted-foreground: 0 0% 63.9%;
-          --popover: 0 0% 9%;
-          --popover-foreground: 0 0% 98%;
-          --card: 0 0% 9%;
-          --card-foreground: 0 0% 98%;
-          --border: 0 0% 14.9%;
-          --input: 0 0% 14.9%;
-          --primary: 191.6 91.4% 36.5%;
-          --primary-foreground: 0 0% 100%;
-          --secondary: 0 0% 25.1%;
-          --secondary-foreground: 0 0% 98%;
-          --accent: 0 0% 14.9%;
-          --accent-foreground: 0 0% 98%;
-          --alert: 0 84.2% 60.2%;
-          --alert-foreground: 0 0% 98%;
-          --ring: 0 0% 83.1%;
+          --background: var(--color-neutral-950);
+          --foreground: var(--color-neutral-50);
+          --muted: var(--color-neutral-800);
+          --muted-foreground: var(--color-neutral-300);
+          --popover: var(--color-neutral-950);
+          --popover-foreground: var(--color-neutral-50);
+          --card: var(--color-neutral-950);
+          --card-foreground: var(--color-neutral-50);
+          --border: var(--color-neutral-800);
+          --input: var(--color-neutral-800);
+          --secondary: var(--color-neutral-100);
+          --secondary-foreground: black;
+          --accent: var(--color-neutral-700);
+          --accent-foreground: var(--color-neutral-50);
+          --alert: var(--color-red-500);
+          --alert-foreground: var(--color-neutral-50);
+          --ring: var(--color-neutral-300);
           --border-width: 0px;
-          --border-radius: 0;
-          --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+          --border-radius: 0rem;
           --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
           --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
           --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
@@ -97,6 +97,105 @@ describe('Extract theme from css', () => {
           --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
           --transform-press: scale(0.95);
         }
+      }
+
+      @theme inline {
+        --color-background: var(--background);
+        --color-foreground: var(--foreground);
+        --color-card: var(--card);
+        --color-card-foreground: var(--card-foreground);
+        --color-popover: var(--popover);
+        --color-popover-foreground: var(--popover-foreground);
+        --color-primary: var(--primary);
+        --color-primary-foreground: var(--primary-foreground);
+        --color-secondary: var(--secondary);
+        --color-secondary-foreground: var(--secondary-foreground);
+        --color-muted: var(--muted);
+        --color-muted-foreground: var(--muted-foreground);
+        --color-accent: var(--accent);
+        --color-accent-foreground: var(--accent-foreground);
+        --color-alert: var(--alert);
+        --color-alert-foreground: var(--alert-foreground);
+        --color-border: var(--border);
+        --color-input: var(--input);
+        --color-ring: var(--ring);
+        --radius-xs: var(--border-radius);
+        --radius-sm: calc(var(--border-radius) + 0.125rem);
+        --radius-md: calc(var(--border-radius) + 0.375rem);
+        --radius-lg: calc(var(--border-radius) + 0.5rem);
+        --radius-xl: calc(var(--border-radius) + 0.75rem);
+        --radius-2xl: calc(var(--border-radius) + 1rem);
+        --radius-3xl: calc(var(--border-radius) + 1.5rem);
+        --shadow-base: var(--shadow-base);
+        --shadow-xs: var(--shadow-xs);
+        --shadow-sm: var(--shadow-sm);
+        --shadow-md: var(--shadow-md);
+        --shadow-lg: var(--shadow-lg);
+        --shadow-xl: var(--shadow-xl);
+        --shadow-2xl: var(--shadow-2xl);
+        --shadow-inner: var(--shadow-inner);
+        --default-border-width: calc(var(--border-width) + 1px);
+        --border-width-base: var(--border-width);
+        --border-width-2: calc(var(--border-width) + 2px);
+        --border-width-4: calc(var(--border-width) + 4px);
+        --border-width-8: calc(var(--border-width) + 8px);
+        --stroke-width-0: 0px;
+        --stroke-width-base: var(--stroke-width);
+        --stroke-width-1: calc(var(--stroke-width) + 1px);
+        --stroke-width-2: calc(var(--stroke-width) + 2px);
+        --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+        --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+        @keyframes collapsible-down {
+          from {
+            height: 0;
+          }
+          to {
+            height: var(--qwikui-collapsible-content-height);
+          }
+        }
+        @keyframes collapsible-up {
+          from {
+            height: var(--qwikui-collapsible-content-height);
+          }
+          to {
+            height: 0;
+          }
+        }
+      }
+
+      @utility press {
+        transform: var(--transform-press);
+      }
+      @utility border-width-* {
+        /* prettier-ignore */
+        border: --value(--border-width-*);
+      }
+      @utility stroke-width-* {
+        /* prettier-ignore */
+        stroke: --value(--stroke-width-*);
+      }
+      @utility shadow-* {
+        /* prettier-ignore */
+        box-shadow: --value(--shadow-*);
+      }
+
+      @layer base {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+
+      @layer components {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
       }"
     `);
   });
@@ -107,82 +206,179 @@ describe('Extract theme from css', () => {
         and style is "simple",
         in whatever order,
         THEN generate the right css variables`, () => {
-    const output = `
-      "@layer base {
-        :root {
-          --background: 0 0% 100%;
-          --foreground: 0 0% 9%;
-          --muted: 0 0% 96.1%;
-          --muted-foreground: 0 0% 45.1%;
-          --popover: 0 0% 100%;
-          --popover-foreground: 0 0% 9%;
-          --card: 0 0% 100%;
-          --card-foreground: 0 0% 9%;
-          --border: 0 0% 89.8%;
-          --input: 0 0% 89.8%;
-          --primary: 191.6 91.4% 36.5%;
-          --primary-foreground: 0 0% 100%;
-          --secondary: 0 0% 83.1%;
-          --secondary-foreground: 0 0% 9%;
-          --accent: 0 0% 96.1%;
-          --accent-foreground: 0 0% 9%;
-          --alert: 0 84.2% 60.2%;
-          --alert-foreground: 0 0% 98%;
-          --ring: 0 0% 9%;
-          --border-width: 0px;
-          --border-radius: 0;
-          --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-          --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-          --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
-          --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-          --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-          --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-          --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
-          --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
-          --transform-press: scale(0.95);
-        }
-        .dark {
-          --background: 0 0% 9%;
-          --foreground: 0 0% 98%;
-          --muted: 0 0% 14.9%;
-          --muted-foreground: 0 0% 63.9%;
-          --popover: 0 0% 9%;
-          --popover-foreground: 0 0% 98%;
-          --card: 0 0% 9%;
-          --card-foreground: 0 0% 98%;
-          --border: 0 0% 14.9%;
-          --input: 0 0% 14.9%;
-          --primary: 191.6 91.4% 36.5%;
-          --primary-foreground: 0 0% 100%;
-          --secondary: 0 0% 25.1%;
-          --secondary-foreground: 0 0% 98%;
-          --accent: 0 0% 14.9%;
-          --accent-foreground: 0 0% 98%;
-          --alert: 0 84.2% 60.2%;
-          --alert-foreground: 0 0% 98%;
-          --ring: 0 0% 83.1%;
-          --border-width: 0px;
-          --border-radius: 0;
-          --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-          --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-          --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
-          --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-          --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-          --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-          --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
-          --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
-          --transform-press: scale(0.95);
-        }
-      }"
-    `;
-
     const themeStringInEveryOrder = generateStringInAllPossibleOrders(
       'simple base-neutral primary-cyan-600 border-radius-0',
     );
 
     themeStringInEveryOrder.forEach((themeString) => {
       const theme = extractThemeCSS(themeString, exampleRootCssContent);
-      expect(theme).toMatchInlineSnapshot(output);
+      expect(theme).toMatchInlineSnapshot(`
+        "@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+        @import 'tailwindcss';
+        @import 'tw-animate-css';
+
+        @custom-variant dark (&:is(.dark *));
+
+        @layer base {
+          :root {
+            --background: white;
+            --foreground: var(--color-neutral-900);
+            --muted: var(--color-neutral-100);
+            --muted-foreground: var(--color-neutral-700);
+            --popover: white;
+            --popover-foreground: var(--color-neutral-900);
+            --card: white;
+            --card-foreground: var(--color-neutral-900);
+            --border: var(--color-neutral-200);
+            --input: var(--color-neutral-200);
+            --secondary: var(--color-neutral-900);
+            --secondary-foreground: white;
+            --accent: var(--color-neutral-100);
+            --accent-foreground: var(--color-neutral-900);
+            --alert: var(--color-red-500);
+            --alert-foreground: var(--color-neutral-50);
+            --ring: var(--color-neutral-900);
+            --border-width: 0px;
+            --border-radius: 0rem;
+            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+            --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+            --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+            --transform-press: scale(0.95);
+          }
+          .dark {
+            --background: var(--color-neutral-950);
+            --foreground: var(--color-neutral-50);
+            --muted: var(--color-neutral-800);
+            --muted-foreground: var(--color-neutral-300);
+            --popover: var(--color-neutral-950);
+            --popover-foreground: var(--color-neutral-50);
+            --card: var(--color-neutral-950);
+            --card-foreground: var(--color-neutral-50);
+            --border: var(--color-neutral-800);
+            --input: var(--color-neutral-800);
+            --secondary: var(--color-neutral-100);
+            --secondary-foreground: black;
+            --accent: var(--color-neutral-700);
+            --accent-foreground: var(--color-neutral-50);
+            --alert: var(--color-red-500);
+            --alert-foreground: var(--color-neutral-50);
+            --ring: var(--color-neutral-300);
+            --border-width: 0px;
+            --border-radius: 0rem;
+            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+            --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+            --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+            --transform-press: scale(0.95);
+          }
+        }
+
+        @theme inline {
+          --color-background: var(--background);
+          --color-foreground: var(--foreground);
+          --color-card: var(--card);
+          --color-card-foreground: var(--card-foreground);
+          --color-popover: var(--popover);
+          --color-popover-foreground: var(--popover-foreground);
+          --color-primary: var(--primary);
+          --color-primary-foreground: var(--primary-foreground);
+          --color-secondary: var(--secondary);
+          --color-secondary-foreground: var(--secondary-foreground);
+          --color-muted: var(--muted);
+          --color-muted-foreground: var(--muted-foreground);
+          --color-accent: var(--accent);
+          --color-accent-foreground: var(--accent-foreground);
+          --color-alert: var(--alert);
+          --color-alert-foreground: var(--alert-foreground);
+          --color-border: var(--border);
+          --color-input: var(--input);
+          --color-ring: var(--ring);
+          --radius-xs: var(--border-radius);
+          --radius-sm: calc(var(--border-radius) + 0.125rem);
+          --radius-md: calc(var(--border-radius) + 0.375rem);
+          --radius-lg: calc(var(--border-radius) + 0.5rem);
+          --radius-xl: calc(var(--border-radius) + 0.75rem);
+          --radius-2xl: calc(var(--border-radius) + 1rem);
+          --radius-3xl: calc(var(--border-radius) + 1.5rem);
+          --shadow-base: var(--shadow-base);
+          --shadow-xs: var(--shadow-xs);
+          --shadow-sm: var(--shadow-sm);
+          --shadow-md: var(--shadow-md);
+          --shadow-lg: var(--shadow-lg);
+          --shadow-xl: var(--shadow-xl);
+          --shadow-2xl: var(--shadow-2xl);
+          --shadow-inner: var(--shadow-inner);
+          --default-border-width: calc(var(--border-width) + 1px);
+          --border-width-base: var(--border-width);
+          --border-width-2: calc(var(--border-width) + 2px);
+          --border-width-4: calc(var(--border-width) + 4px);
+          --border-width-8: calc(var(--border-width) + 8px);
+          --stroke-width-0: 0px;
+          --stroke-width-base: var(--stroke-width);
+          --stroke-width-1: calc(var(--stroke-width) + 1px);
+          --stroke-width-2: calc(var(--stroke-width) + 2px);
+          --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+          --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+          @keyframes collapsible-down {
+            from {
+              height: 0;
+            }
+            to {
+              height: var(--qwikui-collapsible-content-height);
+            }
+          }
+          @keyframes collapsible-up {
+            from {
+              height: var(--qwikui-collapsible-content-height);
+            }
+            to {
+              height: 0;
+            }
+          }
+        }
+
+        @utility press {
+          transform: var(--transform-press);
+        }
+        @utility border-width-* {
+          /* prettier-ignore */
+          border: --value(--border-width-*);
+        }
+        @utility stroke-width-* {
+          /* prettier-ignore */
+          stroke: --value(--stroke-width-*);
+        }
+        @utility shadow-* {
+          /* prettier-ignore */
+          box-shadow: --value(--shadow-*);
+        }
+
+        @layer base {
+          * {
+            @apply border-border outline-ring/50;
+          }
+          body {
+            @apply bg-background text-foreground;
+          }
+        }
+
+        @layer components {
+          * {
+            @apply border-border outline-ring/50;
+          }
+          body {
+            @apply bg-background text-foreground;
+          }
+        }"
+      `);
     });
   });
 });
@@ -194,71 +390,168 @@ test(`GIVEN theme string is 'brutalist base-stone primary-pink-700 border-radius
   const theme = extractThemeCSS(inputThemeString, exampleRootCssContent);
 
   expect(theme).toMatchInlineSnapshot(`
-    "@layer base {
+    "@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+    @import 'tailwindcss';
+    @import 'tw-animate-css';
+
+    @custom-variant dark (&:is(.dark *));
+
+    @layer base {
       :root {
-        --background: 0 0% 100%;
-        --foreground: 24 9.8% 10%;
-        --muted: 60 4.8% 95.9%;
-        --muted-foreground: 25 5.3% 44.7%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 24 9.8% 10%;
-        --card: 0 0% 100%;
-        --card-foreground: 24 9.8% 10%;
-        --border: 0 0% 0%;
-        --input: 0 0% 0%;
-        --primary: 335.1 77.6% 42%;
-        --primary-foreground: 0 0% 100%;
-        --secondary: 24 5.7% 82.9%;
-        --secondary-foreground: 24 9.8% 10%;
-        --accent: 60 4.8% 95.9%;
-        --accent-foreground: 24 9.8% 10%;
-        --alert: 0 84.2% 60.2%;
-        --alert-foreground: 60 9.1% 97.8%;
-        --ring: 0 0% 0%;
+        --background: white;
+        --foreground: var(--color-stone-900);
+        --muted: var(--color-stone-100);
+        --muted-foreground: var(--color-stone-700);
+        --popover: white;
+        --popover-foreground: var(--color-stone-900);
+        --card: white;
+        --card-foreground: var(--color-stone-900);
+        --border: black;
+        --input: black;
+        --secondary: var(--color-stone-900);
+        --secondary-foreground: white;
+        --accent: var(--color-stone-100);
+        --accent-foreground: var(--color-stone-900);
+        --alert: var(--color-red-500);
+        --alert-foreground: var(--color-stone-50);
+        --ring: black;
         --border-width: 2px;
         --border-radius: 0.75rem;
-        --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1);
-        --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1);
-        --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-inner: inset 2px 2px 0px 0px rgba(0, 0, 0, 0);
+        --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
+        --shadow: 5px 5px rgba(0, 0, 0, 1);
+        --shadow-md: 6px 6px rgba(0, 0, 0, 1);
+        --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
+        --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
+        --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
         --transform-press: translate(4px, 4px);
       }
       .dark {
-        --background: 24 9.8% 10%;
-        --foreground: 60 9.1% 97.8%;
-        --muted: 12 6.5% 15.1%;
-        --muted-foreground: 24 5.4% 63.9%;
-        --popover: 24 9.8% 10%;
-        --popover-foreground: 60 9.1% 97.8%;
-        --card: 24 9.8% 10%;
-        --card-foreground: 60 9.1% 97.8%;
-        --border: 0 0% 0%;
-        --input: 0 0% 0%;
-        --primary: 335.1 77.6% 42%;
-        --primary-foreground: 0 0% 100%;
-        --secondary: 30 6.3% 25.1%;
-        --secondary-foreground: 60 9.1% 97.8%;
-        --accent: 12 6.5% 15.1%;
-        --accent-foreground: 60 9.1% 97.8%;
-        --alert: 0 84.2% 60.2%;
-        --alert-foreground: 0 0% 98%;
-        --ring: 0 0% 0%;
+        --background: var(--color-stone-950);
+        --foreground: var(--color-stone-50);
+        --muted: var(--color-stone-800);
+        --muted-foreground: var(--color-stone-300);
+        --popover: var(--color-stone-950);
+        --popover-foreground: var(--color-stone-50);
+        --card: var(--color-stone-950);
+        --card-foreground: var(--color-stone-50);
+        --border: black;
+        --input: black;
+        --secondary: var(--color-stone-100);
+        --secondary-foreground: black;
+        --accent: var(--color-stone-700);
+        --accent-foreground: var(--color-stone-50);
+        --alert: var(--color-red-500);
+        --alert-foreground: var(--color-stone-50);
+        --ring: black;
         --border-width: 3px;
         --border-radius: 0.75rem;
-        --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1);
-        --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1);
-        --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+        --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
+        --shadow: 5px 5px rgba(0, 0, 0, 1);
+        --shadow-md: 6px 6px rgba(0, 0, 0, 1);
+        --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
+        --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
+        --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
         --transform-press: translate(4px, 4px);
       }
+    }
+
+    @theme inline {
+      --color-background: var(--background);
+      --color-foreground: var(--foreground);
+      --color-card: var(--card);
+      --color-card-foreground: var(--card-foreground);
+      --color-popover: var(--popover);
+      --color-popover-foreground: var(--popover-foreground);
+      --color-primary: var(--primary);
+      --color-primary-foreground: var(--primary-foreground);
+      --color-secondary: var(--secondary);
+      --color-secondary-foreground: var(--secondary-foreground);
+      --color-muted: var(--muted);
+      --color-muted-foreground: var(--muted-foreground);
+      --color-accent: var(--accent);
+      --color-accent-foreground: var(--accent-foreground);
+      --color-alert: var(--alert);
+      --color-alert-foreground: var(--alert-foreground);
+      --color-border: var(--border);
+      --color-input: var(--input);
+      --color-ring: var(--ring);
+      --radius-xs: var(--border-radius);
+      --radius-sm: calc(var(--border-radius) + 0.125rem);
+      --radius-md: calc(var(--border-radius) + 0.375rem);
+      --radius-lg: calc(var(--border-radius) + 0.5rem);
+      --radius-xl: calc(var(--border-radius) + 0.75rem);
+      --radius-2xl: calc(var(--border-radius) + 1rem);
+      --radius-3xl: calc(var(--border-radius) + 1.5rem);
+      --shadow-base: var(--shadow-base);
+      --shadow-xs: var(--shadow-xs);
+      --shadow-sm: var(--shadow-sm);
+      --shadow-md: var(--shadow-md);
+      --shadow-lg: var(--shadow-lg);
+      --shadow-xl: var(--shadow-xl);
+      --shadow-2xl: var(--shadow-2xl);
+      --shadow-inner: var(--shadow-inner);
+      --default-border-width: calc(var(--border-width) + 1px);
+      --border-width-base: var(--border-width);
+      --border-width-2: calc(var(--border-width) + 2px);
+      --border-width-4: calc(var(--border-width) + 4px);
+      --border-width-8: calc(var(--border-width) + 8px);
+      --stroke-width-0: 0px;
+      --stroke-width-base: var(--stroke-width);
+      --stroke-width-1: calc(var(--stroke-width) + 1px);
+      --stroke-width-2: calc(var(--stroke-width) + 2px);
+      --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+      --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+      @keyframes collapsible-down {
+        from {
+          height: 0;
+        }
+        to {
+          height: var(--qwikui-collapsible-content-height);
+        }
+      }
+      @keyframes collapsible-up {
+        from {
+          height: var(--qwikui-collapsible-content-height);
+        }
+        to {
+          height: 0;
+        }
+      }
+    }
+
+    @utility press {
+      transform: var(--transform-press);
+    }
+    @utility border-width-* {
+      /* prettier-ignore */
+      border: --value(--border-width-*);
+    }
+    @utility stroke-width-* {
+      /* prettier-ignore */
+      stroke: --value(--stroke-width-*);
+    }
+    @utility shadow-* {
+      /* prettier-ignore */
+      box-shadow: --value(--shadow-*);
+    }
+
+    @layer base {
+      * {
+        @apply border-border outline-ring/50;
+      }
+      body {
+        @apply bg-background text-foreground;
+      }
+    }
+
+    @layer components {
+      * {
+        @apply border-border outline-ring/50;
+      }
+      body {
+        @apply bg-background text-foreground;
+      }
     }"
   `);
 });
@@ -269,309 +562,960 @@ test(`GIVEN primary color is "pink-700",
       and style is "brutalist",
       in whatever order,
       THEN generate the right css variables`, () => {
-  const output = `
-    "@layer base {
-      :root {
-        --background: 0 0% 100%;
-        --foreground: 24 9.8% 10%;
-        --muted: 60 4.8% 95.9%;
-        --muted-foreground: 25 5.3% 44.7%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 24 9.8% 10%;
-        --card: 0 0% 100%;
-        --card-foreground: 24 9.8% 10%;
-        --border: 0 0% 0%;
-        --input: 0 0% 0%;
-        --primary: 335.1 77.6% 42%;
-        --primary-foreground: 0 0% 100%;
-        --secondary: 24 5.7% 82.9%;
-        --secondary-foreground: 24 9.8% 10%;
-        --accent: 60 4.8% 95.9%;
-        --accent-foreground: 24 9.8% 10%;
-        --alert: 0 84.2% 60.2%;
-        --alert-foreground: 60 9.1% 97.8%;
-        --ring: 0 0% 0%;
-        --border-width: 2px;
-        --border-radius: 0.75rem;
-        --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1);
-        --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1);
-        --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-inner: inset 2px 2px 0px 0px rgba(0, 0, 0, 0);
-        --transform-press: translate(4px, 4px);
-      }
-      .dark {
-        --background: 24 9.8% 10%;
-        --foreground: 60 9.1% 97.8%;
-        --muted: 12 6.5% 15.1%;
-        --muted-foreground: 24 5.4% 63.9%;
-        --popover: 24 9.8% 10%;
-        --popover-foreground: 60 9.1% 97.8%;
-        --card: 24 9.8% 10%;
-        --card-foreground: 60 9.1% 97.8%;
-        --border: 0 0% 0%;
-        --input: 0 0% 0%;
-        --primary: 335.1 77.6% 42%;
-        --primary-foreground: 0 0% 100%;
-        --secondary: 30 6.3% 25.1%;
-        --secondary-foreground: 60 9.1% 97.8%;
-        --accent: 12 6.5% 15.1%;
-        --accent-foreground: 60 9.1% 97.8%;
-        --alert: 0 84.2% 60.2%;
-        --alert-foreground: 0 0% 98%;
-        --ring: 0 0% 0%;
-        --border-width: 3px;
-        --border-radius: 0.75rem;
-        --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1);
-        --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1);
-        --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1);
-        --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
-        --transform-press: translate(4px, 4px);
-      }
-    }"
-  `;
-
   const themeStringInEveryOrder = generateStringInAllPossibleOrders(
     'brutalist base-stone primary-pink-700 border-radius-dot-75',
   );
 
   themeStringInEveryOrder.forEach((themeString) => {
     const theme = extractThemeCSS(themeString, exampleRootCssContent);
-    expect(theme).toMatchInlineSnapshot(output);
+    expect(theme).toMatchInlineSnapshot(`
+      "@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+      @import 'tailwindcss';
+      @import 'tw-animate-css';
+
+      @custom-variant dark (&:is(.dark *));
+
+      @layer base {
+        :root {
+          --background: white;
+          --foreground: var(--color-stone-900);
+          --muted: var(--color-stone-100);
+          --muted-foreground: var(--color-stone-700);
+          --popover: white;
+          --popover-foreground: var(--color-stone-900);
+          --card: white;
+          --card-foreground: var(--color-stone-900);
+          --border: black;
+          --input: black;
+          --secondary: var(--color-stone-900);
+          --secondary-foreground: white;
+          --accent: var(--color-stone-100);
+          --accent-foreground: var(--color-stone-900);
+          --alert: var(--color-red-500);
+          --alert-foreground: var(--color-stone-50);
+          --ring: black;
+          --border-width: 2px;
+          --border-radius: 0.75rem;
+          --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
+          --shadow: 5px 5px rgba(0, 0, 0, 1);
+          --shadow-md: 6px 6px rgba(0, 0, 0, 1);
+          --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
+          --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
+          --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+          --transform-press: translate(4px, 4px);
+        }
+        .dark {
+          --background: var(--color-stone-950);
+          --foreground: var(--color-stone-50);
+          --muted: var(--color-stone-800);
+          --muted-foreground: var(--color-stone-300);
+          --popover: var(--color-stone-950);
+          --popover-foreground: var(--color-stone-50);
+          --card: var(--color-stone-950);
+          --card-foreground: var(--color-stone-50);
+          --border: black;
+          --input: black;
+          --secondary: var(--color-stone-100);
+          --secondary-foreground: black;
+          --accent: var(--color-stone-700);
+          --accent-foreground: var(--color-stone-50);
+          --alert: var(--color-red-500);
+          --alert-foreground: var(--color-stone-50);
+          --ring: black;
+          --border-width: 3px;
+          --border-radius: 0.75rem;
+          --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
+          --shadow: 5px 5px rgba(0, 0, 0, 1);
+          --shadow-md: 6px 6px rgba(0, 0, 0, 1);
+          --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
+          --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
+          --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+          --transform-press: translate(4px, 4px);
+        }
+      }
+
+      @theme inline {
+        --color-background: var(--background);
+        --color-foreground: var(--foreground);
+        --color-card: var(--card);
+        --color-card-foreground: var(--card-foreground);
+        --color-popover: var(--popover);
+        --color-popover-foreground: var(--popover-foreground);
+        --color-primary: var(--primary);
+        --color-primary-foreground: var(--primary-foreground);
+        --color-secondary: var(--secondary);
+        --color-secondary-foreground: var(--secondary-foreground);
+        --color-muted: var(--muted);
+        --color-muted-foreground: var(--muted-foreground);
+        --color-accent: var(--accent);
+        --color-accent-foreground: var(--accent-foreground);
+        --color-alert: var(--alert);
+        --color-alert-foreground: var(--alert-foreground);
+        --color-border: var(--border);
+        --color-input: var(--input);
+        --color-ring: var(--ring);
+        --radius-xs: var(--border-radius);
+        --radius-sm: calc(var(--border-radius) + 0.125rem);
+        --radius-md: calc(var(--border-radius) + 0.375rem);
+        --radius-lg: calc(var(--border-radius) + 0.5rem);
+        --radius-xl: calc(var(--border-radius) + 0.75rem);
+        --radius-2xl: calc(var(--border-radius) + 1rem);
+        --radius-3xl: calc(var(--border-radius) + 1.5rem);
+        --shadow-base: var(--shadow-base);
+        --shadow-xs: var(--shadow-xs);
+        --shadow-sm: var(--shadow-sm);
+        --shadow-md: var(--shadow-md);
+        --shadow-lg: var(--shadow-lg);
+        --shadow-xl: var(--shadow-xl);
+        --shadow-2xl: var(--shadow-2xl);
+        --shadow-inner: var(--shadow-inner);
+        --default-border-width: calc(var(--border-width) + 1px);
+        --border-width-base: var(--border-width);
+        --border-width-2: calc(var(--border-width) + 2px);
+        --border-width-4: calc(var(--border-width) + 4px);
+        --border-width-8: calc(var(--border-width) + 8px);
+        --stroke-width-0: 0px;
+        --stroke-width-base: var(--stroke-width);
+        --stroke-width-1: calc(var(--stroke-width) + 1px);
+        --stroke-width-2: calc(var(--stroke-width) + 2px);
+        --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+        --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+        @keyframes collapsible-down {
+          from {
+            height: 0;
+          }
+          to {
+            height: var(--qwikui-collapsible-content-height);
+          }
+        }
+        @keyframes collapsible-up {
+          from {
+            height: var(--qwikui-collapsible-content-height);
+          }
+          to {
+            height: 0;
+          }
+        }
+      }
+
+      @utility press {
+        transform: var(--transform-press);
+      }
+      @utility border-width-* {
+        /* prettier-ignore */
+        border: --value(--border-width-*);
+      }
+      @utility stroke-width-* {
+        /* prettier-ignore */
+        stroke: --value(--stroke-width-*);
+      }
+      @utility shadow-* {
+        /* prettier-ignore */
+        box-shadow: --value(--shadow-*);
+      }
+
+      @layer base {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+
+      @layer components {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }"
+    `);
   });
 });
 
 const exampleRootCssContent = `
+@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@source "../../../packages/kit-styled";
+
+@custom-variant dark (&:is(.dark *));
 
 @layer base {
   :root {
+    --background: white;
+    --foreground: var(--color-slate-900);
+    --muted: var(--color-slate-100);
+    --muted-foreground: var(--color-slate-700);
+    --popover: white;
+    --popover-foreground: var(--color-slate-900);
+    --card: white;
+    --card-foreground: var(--color-slate-900);
+    --border: var(--color-slate-200);
+    --input: var(--color-slate-200);
+    --primary: oklch(74.1% 38.5% 234.357);
+    --primary-foreground: black;
+    --secondary: oklch(69.9% 46.25% 301.823);
+    --secondary-foreground: black;
+    --accent: var(--color-slate-100);
+    --accent-foreground: var(--color-slate-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-900);
+    --border-width: 0px;
+    --border-radius: 0;
+    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+    --transform-press: scale(0.95);
+  }
+
+  .dark {
+    --background: var(--color-slate-950);
+    --foreground: var(--color-slate-50);
+    --muted: var(--color-slate-800);
+    --muted-foreground: var(--color-slate-300);
+    --popover: var(--color-slate-950);
+    --popover-foreground: var(--color-slate-50);
+    --card: var(--color-slate-950);
+    --card-foreground: var(--color-slate-50);
+    --border: var(--color-slate-800);
+    --input: var(--color-slate-800);
+    --primary: oklch(74.1% 38.5% 234.357);
+    --primary-foreground: black;
+    --secondary: oklch(69.9% 46.25% 301.823);
+    --secondary-foreground: black;
+    --accent: var(--color-slate-700);
+    --accent-foreground: var(--color-slate-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-300);
     --border-width: 0px;
+    --border-radius: 0;
     --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
     --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+    --transform-press: scale(0.95);
   }
 
+  @theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-alert: var(--alert);
+    --color-alert-foreground: var(--alert-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --radius-xs: var(--border-radius);
+    --radius-sm: calc(var(--border-radius) + 0.125rem);
+    --radius-md: calc(var(--border-radius) + 0.375rem);
+    --radius-lg: calc(var(--border-radius) + 0.5rem);
+    --radius-xl: calc(var(--border-radius) + 0.75rem);
+    --radius-2xl: calc(var(--border-radius) + 1rem);
+    --radius-3xl: calc(var(--border-radius) + 1.5rem);
+    --shadow-base: var(--shadow-base);
+    --shadow-xs: var(--shadow-xs);
+    --shadow-sm: var(--shadow-sm);
+    --shadow-md: var(--shadow-md);
+    --shadow-lg: var(--shadow-lg);
+    --shadow-xl: var(--shadow-xl);
+    --shadow-2xl: var(--shadow-2xl);
+    --shadow-inner: var(--shadow-inner);
+    --default-border-width: calc(var(--border-width) + 1px);
+    --border-width-base: var(--border-width);
+    --border-width-2: calc(var(--border-width) + 2px);
+    --border-width-4: calc(var(--border-width) + 4px);
+    --border-width-8: calc(var(--border-width) + 8px);
+    --stroke-width-0: 0px;
+    --stroke-width-base: var(--stroke-width);
+    --stroke-width-1: calc(var(--stroke-width) + 1px);
+    --stroke-width-2: calc(var(--stroke-width) + 2px);
+    --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+    --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+    @keyframes collapsible-down {
+      from {
+        height: 0;
+      }
+      to {
+        height: var(--qwikui-collapsible-content-height);
+      }
+    }
+    @keyframes collapsible-up {
+      from {
+        height: var(--qwikui-collapsible-content-height);
+      }
+      to {
+        height: 0;
+      }
+    }
+  }
+}
+
+@utility press {
+  transform: var(--transform-press);
+}
+@utility border-width-* {
+  /* prettier-ignore */
+  border: --value(--border-width-*);
+}
+@utility stroke-width-* {
+  /* prettier-ignore */
+  stroke: --value(--stroke-width-*);
+}
+@utility shadow-* {
+  /* prettier-ignore */
+  box-shadow: --value(--shadow-*);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer components {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer base {
   /* CSS PARSER: START - DO NOT REMOVE */
+  .border-radius-0 {
+    --border-radius: 0rem;
+  }
+
+  .border-radius-dot-25 {
+    --border-radius: 0.25rem;
+  }
+
+  .border-radius-dot-50 {
+    --border-radius: 0.5rem;
+  }
+
+  .border-radius-dot-75 {
+    --border-radius: 0.75rem;
+  }
+
+  .border-radius-1 {
+    --border-radius: 1rem;
+  }
 
   .simple {
     --border-width: 0px;
-    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
     --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: scale(0.95);
   }
 
   .brutalist.brutalist {
     --border-width: 2px;
-    --border: 0 0% 0%;
-    --input: 0 0% 0%;
-    --ring: 0 0% 0%;
-    --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1);
-    --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1);
-    --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-inner: inset 2px 2px 0px 0px rgba(0, 0, 0, 0);
+    --stroke-width: 2px;
+    --border: black;
+    --input: black;
+    --ring: black;
+    --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
+    --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
+    --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
+    --shadow: 5px 5px rgba(0, 0, 0, 1);
+    --shadow-md: 6px 6px rgba(0, 0, 0, 1);
+    --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
+    --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
+    --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+    --inset-shadow-2xs: inset -1px -1px rgba(0, 0, 0, 1);
+    --inset-shadow-xs: inset -2px -2px rgba(0, 0, 0, 1);
+    --inset-shadow-sm: inset -3px -3px rgba(0, 0, 0, 1);
+    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.5);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.5);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.5);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 1);
+    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 1);
     --transform-press: translate(4px, 4px);
   }
 
   .dark.brutalist.brutalist {
     --border-width: 3px;
-    --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1);
-    --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1);
-    --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
+    --stroke-width: 2px;
+    --underline: 2px;
+    --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
+    --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
+    --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
+    --shadow: 5px 5px rgba(0, 0, 0, 1);
+    --shadow-md: 6px 6px rgba(0, 0, 0, 1);
+    --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
+    --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
+    --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+    --inset-shadow-2xs: inset -1px -1px rgba(0, 0, 0, 1);
+    --inset-shadow-xs: inset -2px -2px rgba(0, 0, 0, 1);
+    --inset-shadow-sm: inset -3px -3px rgba(0, 0, 0, 1);
+    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.5);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.5);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.5);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 1);
+    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 1);
     --transform-press: translate(4px, 4px);
   }
 
   .neumorphic.neumorphic {
     --border-width: 0px;
-    --background: 0 0 88%;
-    --foreground: 240 5.9% 10%;
-    --popover: 0 0 88%;
-    --popover-foreground: 240 5.9% 10%;
-    --card: 0 0 88%;
-    --card-foreground: 240 5.9% 10%;
-    --border: 0 0% 80%;
-    --ring: 222.2 47.4% 80.2%;
-    --shadow-base: -3px -3px 6px #bebebe, 3px 3px 6px #ffffff, inset 1px 1px 2px #bebebe,
+    --stroke-width: 0px;
+    --background: hsl(0 0 88%);
+    --foreground: var(--color-zinc-900);
+    --popover: hsl(0 0 88%);
+    --popover-foreground: var(--color-zinc-900);
+    --card: hsl(0 0 88%);
+    --card-foreground: var(--color-zinc-900);
+    --border: hsl(0 0% 80.2%);
+    --ring: hsl(0 0% 80.2%);
+    --input: hsl(0 0% 80.2%);
+    --shadow-base:
+      -3px -3px 6px #bebebe, 3px 3px 6px #ffffff,
+      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.5);
+    --shadow-sm:
+      3px 3px 6px #bebebe, -3px -3px 6px #ffffff,
+      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-sm: 3px 3px 6px #bebebe, -3px -3px 6px #ffffff, inset 1px 1px 2px #bebebe,
+    --shadow:
+      4px 4px 8px #bebebe, -4px -4px 8px #ffffff,
+      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff, inset 1px 1px 2px #bebebe,
+    --shadow-md:
+      5px 5px 10px #bebebe, -5px -5px 10px #ffffff,
+      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-md: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff, inset 1px 1px 2px #bebebe,
+    --shadow-lg:
+      6px 6px 12px #bebebe, -6px -6px 12px #ffffff,
+      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-lg: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff, inset 1px 1px 2px #bebebe,
+    --shadow-xl:
+      8px 8px 15px #bebebe, -8px -8px 15px #ffffff,
+      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-xl: 8px 8px 15px #bebebe, -8px -8px 15px #ffffff, inset 1px 1px 2px #bebebe,
+    --shadow-2xl:
+      10px 10px 20px #bebebe, -10px -10px 20px #ffffff,
+      inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-2xl: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff,
-      inset 1px 1px 2px #bebebe, inset -1px -1px 2px rgba(255, 255, 255, 0.5);
     --shadow-inner: inset 4px 4px 8px #bebebe, inset -2px -2px 4px #ffffff;
     --transform-press: scale(0.95);
   }
 
   .dark.neumorphic.neumorphic {
     --border-width: 0px;
-    --background: 240 5.3% 26.1%;
-    --foreground: 240 5.9% 90%;
-    --popover: 240 5.3% 26.1%;
-    --popover-foreground: 240 5.9% 90%;
-    --card: 240 5.3% 26.1%;
-    --card-foreground: 240 5.9% 90%;
-    --border: 240 5.9% 20%;
-    --ring: 222.2 47.4% 20.2%;
-    --shadow-base: -3px -3px 6px #2c2c31, 3px 3px 6px #52525b, inset 1px 1px 2px #2c2c31,
+    --stroke-width: 0px;
+    --background: var(--color-zinc-700);
+    --foreground: var(--color-zinc-200);
+    --popover: var(--color-zinc-700);
+    --popover-foreground: var(--color-zinc-200);
+    --card: var(--color-zinc-700);
+    --card-foreground: var(--color-zinc-200);
+    --border: hsl(240 5.9% 20%);
+    --ring: hsl(240 5.9% 20%);
+    --input: hsl(240 5.9% 20%);
+    --shadow-base:
+      -3px -3px 6px #2c2c31, 3px 3px 6px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
-    --shadow-sm: 3px 3px 6px #2c2c31, -3px -3px 6px #52525b, inset 1px 1px 2px #2c2c31,
+    --shadow-sm:
+      3px 3px 6px #2c2c31, -3px -3px 6px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
-    --shadow: 4px 4px 8px #2c2c31, -4px -4px 8px #52525b, inset 1px 1px 2px #2c2c31,
+    --shadow:
+      4px 4px 8px #2c2c31, -4px -4px 8px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
-    --shadow-md: 5px 5px 10px #2c2c31, -5px -5px 10px #52525b, inset 1px 1px 2px #2c2c31,
+    --shadow-md:
+      5px 5px 10px #2c2c31, -5px -5px 10px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
-    --shadow-lg: 6px 6px 12px #2c2c31, -6px -6px 12px #52525b, inset 1px 1px 2px #2c2c31,
+    --shadow-lg:
+      6px 6px 12px #2c2c31, -6px -6px 12px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
-    --shadow-xl: 8px 8px 15px #2c2c31, -8px -8px 15px #52525b, inset 1px 1px 2px #2c2c31,
+    --shadow-xl:
+      8px 8px 15px #2c2c31, -8px -8px 15px #52525b, inset 1px 1px 2px #2c2c31,
+      inset -1px -1px 2px #52525b;
+    --shadow-2xl:
+      10px 10px 20px #2c2c31, -10px -10px 20px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
-    --shadow-2xl: 10px 10px 20px #2c2c31, -10px -10px 20px #52525b,
-      inset 1px 1px 2px #2c2c31, inset -1px -1px 2px #52525b;
     --shadow-inner: inset 2px 2px 4px #2c2c31, inset -2px -2px 4px #52525b;
     --transform-press: scale(0.95);
   }
 
-  .border-radius-0 {
-    --border-radius: 0;
-  }
+  /* use colors from colors.ts */
 
-  .border-radius-dot-25 {
-    --border-radius: 0.25rem;
+  .base-slate {
+    --background: white;
+    --foreground: var(--color-slate-950);
+    --muted: var(--color-slate-100);
+    --muted-foreground: var(--color-slate-700);
+    --popover: white;
+    --popover-foreground: var(--color-slate-900);
+    --card: white;
+    --card-foreground: var(--color-slate-900);
+    --border: var(--color-slate-200);
+    --input: var(--color-slate-200);
+    --secondary: var(--color-slate-900);
+    --secondary-foreground: white;
+    --accent: var(--color-slate-100);
+    --accent-foreground: var(--color-slate-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-900);
   }
-
-  .border-radius-dot-50 {
-    --border-radius: 0.5rem;
+  .dark.base-slate {
+    --background: var(--color-slate-950);
+    --foreground: var(--color-slate-50);
+    --muted: var(--color-slate-800);
+    --muted-foreground: var(--color-slate-300);
+    --popover: var(--color-slate-950);
+    --popover-foreground: var(--color-slate-50);
+    --card: var(--color-slate-950);
+    --card-foreground: var(--color-slate-50);
+    --border: var(--color-slate-800);
+    --input: var(--color-slate-800);
+    --secondary: var(--color-slate-100);
+    --secondary-foreground: black;
+    --accent: var(--color-slate-700);
+    --accent-foreground: var(--color-slate-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-300);
   }
 
-  .border-radius-dot-75 {
-    --border-radius: 0.75rem;
+  .base-gray {
+    --background: white;
+    --foreground: var(--color-gray-950);
+    --muted: var(--color-gray-100);
+    --muted-foreground: var(--color-gray-700);
+    --popover: white;
+    --popover-foreground: var(--color-gray-950);
+    --card: white;
+    --card-foreground: var(--color-gray-950);
+    --border: var(--color-gray-200);
+    --input: var(--color-gray-200);
+    --secondary: var(--color-gray-950);
+    --secondary-foreground: white;
+    --accent: var(--color-gray-100);
+    --accent-foreground: var(--color-gray-950);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-gray-50);
+    --ring: var(--color-gray-950);
+  }
+  .dark.base-gray {
+    --background: var(--color-gray-950);
+    --foreground: var(--color-gray-50);
+    --muted: var(--color-gray-800);
+    --muted-foreground: var(--color-gray-300);
+    --popover: var(--color-gray-950);
+    --popover-foreground: var(--color-gray-50);
+    --card: var(--color-gray-950);
+    --card-foreground: var(--color-gray-50);
+    --border: var(--color-gray-800);
+    --input: var(--color-gray-800);
+    --secondary: var(--color-gray-100);
+    --secondary-foreground: black;
+    --accent: var(--color-gray-700);
+    --accent-foreground: var(--color-gray-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-gray-50);
+    --ring: var(--color-gray-300);
   }
 
-  .border-radius-1 {
-    --border-radius: 1rem;
+  .base-zinc {
+    --background: white;
+    --foreground: var(--color-zinc-900);
+    --muted: var(--color-zinc-100);
+    --muted-foreground: var(--color-zinc-700);
+    --popover: white;
+    --popover-foreground: var(--color-zinc-900);
+    --card: white;
+    --card-foreground: var(--color-zinc-900);
+    --border: var(--color-zinc-200);
+    --input: var(--color-zinc-200);
+    --secondary: var(--color-zinc-900);
+    --secondary-foreground: white;
+    --accent: var(--color-zinc-100);
+    --accent-foreground: var(--color-zinc-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-zinc-50);
+    --ring: var(--color-zinc-900);
+  }
+  .dark.base-zinc {
+    --background: var(--color-zinc-950);
+    --foreground: var(--color-zinc-50);
+    --muted: var(--color-zinc-800);
+    --muted-foreground: var(--color-zinc-300);
+    --popover: var(--color-zinc-950);
+    --popover-foreground: var(--color-zinc-50);
+    --card: var(--color-zinc-950);
+    --card-foreground: var(--color-zinc-50);
+    --border: var(--color-zinc-800);
+    --input: var(--color-zinc-800);
+    --secondary: var(--color-zinc-100);
+    --secondary-foreground: black;
+    --accent: var(--color-zinc-700);
+    --accent-foreground: var(--color-zinc-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-zinc-50);
+    --ring: var(--color-zinc-300);
   }
 
   .base-neutral {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 9%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --secondary: 0 0% 83.1%;
-    --secondary-foreground: 0 0% 9%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 0 0% 9%;
+    --background: white;
+    --foreground: var(--color-neutral-900);
+    --muted: var(--color-neutral-100);
+    --muted-foreground: var(--color-neutral-700);
+    --popover: white;
+    --popover-foreground: var(--color-neutral-900);
+    --card: white;
+    --card-foreground: var(--color-neutral-900);
+    --border: var(--color-neutral-200);
+    --input: var(--color-neutral-200);
+    --secondary: var(--color-neutral-900);
+    --secondary-foreground: white;
+    --accent: var(--color-neutral-100);
+    --accent-foreground: var(--color-neutral-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-neutral-50);
+    --ring: var(--color-neutral-900);
   }
   .dark.base-neutral {
-    --background: 0 0% 9%;
-    --foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --popover: 0 0% 9%;
-    --popover-foreground: 0 0% 98%;
-    --card: 0 0% 9%;
-    --card-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --secondary: 0 0% 25.1%;
-    --secondary-foreground: 0 0% 98%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 0 0% 83.1%;
+    --background: var(--color-neutral-950);
+    --foreground: var(--color-neutral-50);
+    --muted: var(--color-neutral-800);
+    --muted-foreground: var(--color-neutral-300);
+    --popover: var(--color-neutral-950);
+    --popover-foreground: var(--color-neutral-50);
+    --card: var(--color-neutral-950);
+    --card-foreground: var(--color-neutral-50);
+    --border: var(--color-neutral-800);
+    --input: var(--color-neutral-800);
+    --secondary: var(--color-neutral-100);
+    --secondary-foreground: black;
+    --accent: var(--color-neutral-700);
+    --accent-foreground: var(--color-neutral-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-neutral-50);
+    --ring: var(--color-neutral-300);
   }
 
   .base-stone {
-    --background: 0 0% 100%;
-    --foreground: 24 9.8% 10%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 24 9.8% 10%;
-    --card: 0 0% 100%;
-    --card-foreground: 24 9.8% 10%;
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --secondary: 24 5.7% 82.9%;
-    --secondary-foreground: 24 9.8% 10%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 60 9.1% 97.8%;
-    --ring: 24 9.8% 10%;
+    --background: white;
+    --foreground: var(--color-stone-900);
+    --muted: var(--color-stone-100);
+    --muted-foreground: var(--color-stone-700);
+    --popover: white;
+    --popover-foreground: var(--color-stone-900);
+    --card: white;
+    --card-foreground: var(--color-stone-900);
+    --border: var(--color-stone-200);
+    --input: var(--color-stone-200);
+    --secondary: var(--color-stone-900);
+    --secondary-foreground: white;
+    --accent: var(--color-stone-100);
+    --accent-foreground: var(--color-stone-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-stone-50);
+    --ring: var(--color-stone-900);
   }
   .dark.base-stone {
-    --background: 24 9.8% 10%;
-    --foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --popover: 24 9.8% 10%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --card: 24 9.8% 10%;
-    --card-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --secondary: 30 6.3% 25.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 24 5.7% 82.9%;
-  }
-
-  .primary-cyan-600 {
-    --primary: 191.6 91.4% 36.5%;
-    --primary-foreground: 0 0% 100%;
-  }
-
-  .primary-pink-700 {
-    --primary: 335.1 77.6% 42%;
-    --primary-foreground: 0 0% 100%;
+    --background: var(--color-stone-950);
+    --foreground: var(--color-stone-50);
+    --muted: var(--color-stone-800);
+    --muted-foreground: var(--color-stone-300);
+    --popover: var(--color-stone-950);
+    --popover-foreground: var(--color-stone-50);
+    --card: var(--color-stone-950);
+    --card-foreground: var(--color-stone-50);
+    --border: var(--color-stone-800);
+    --input: var(--color-stone-800);
+    --secondary: var(--color-stone-100);
+    --secondary-foreground: black;
+    --accent: var(--color-stone-700);
+    --accent-foreground: var(--color-stone-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-stone-50);
+    --ring: var(--color-stone-300);
   }
 
-  /* CSS PARSER: END - DO NOT REMOVE */
+  .primary-slate-100,
+  .dark.primary-slate-900 {
+    --primary: var(--color-slate-100);
+    --primary-foreground: black;
+  }
+  .primary-slate-200,
+  .dark.primary-slate-800 {
+    --primary: var(--color-slate-200);
+    --primary-foreground: black;
+  }
+  .primary-slate-300 {
+    --primary: var(--color-slate-300);
+    --primary-foreground: black;
+  }
+  .primary-slate-400 {
+    --primary: var(--color-slate-400);
+    --primary-foreground: black;
+  }
+  .primary-slate-500 {
+    --primary: var(--color-slate-500);
+    --primary-foreground: white;
+  }
+  .primary-slate-600 {
+    --primary: var(--color-slate-600);
+    --primary-foreground: white;
+  }
+  .primary-slate-700 {
+    --primary: var(--color-slate-700);
+    --primary-foreground: white;
+  }
+  .primary-slate-800 {
+    --primary: var(--color-slate-800);
+    --primary-foreground: white;
+  }
+  .primary-slate-900 {
+    --primary: var(--color-slate-900);
+    --primary-foreground: white;
+  }
 
+  .primary-gray-100,
+  .dark.primary-gray-900 {
+    --primary: var(--color-gray-100);
+    --primary-foreground: black;
+  }
+  .primary-gray-200,
+  .dark.primary-gray-800 {
+    --primary: var(--color-gray-200);
+    --primary-foreground: black;
+  }
+  .primary-gray-300 {
+    --primary: var(--color-gray-300);
+    --primary-foreground: black;
+  }
+  .primary-gray-400 {
+    --primary: var(--color-gray-400);
+    --primary-foreground: black;
+  }
+  .primary-gray-500 {
+    --primary: var(--color-gray-500);
+    --primary-foreground: white;
+  }
+  .primary-gray-600 {
+    --primary: var(--color-gray-600);
+    --primary-foreground: white;
+  }
+  .primary-gray-700 {
+    --primary: var(--color-gray-700);
+    --primary-foreground: white;
+  }
+  .primary-gray-800 {
+    --primary: var(--color-gray-800);
+    --primary-foreground: white;
+  }
+  .primary-gray-900 {
+    --primary: var(--color-gray-950);
+    --primary-foreground: white;
+  }
+
+  .primary-zinc-100,
+  .dark.primary-zinc-900 {
+    --primary: var(--color-zinc-100);
+    --primary-foreground: black;
+  }
+  .primary-zinc-200,
+  .dark.primary-zinc-800 {
+    --primary: var(--color-zinc-200);
+    --primary-foreground: black;
+  }
+  .primary-zinc-300 {
+    --primary: var(--color-zinc-300);
+    --primary-foreground: black;
+  }
+  .primary-zinc-400 {
+    --primary: var(--color-zinc-400);
+    --primary-foreground: black;
+  }
+  .primary-zinc-500 {
+    --primary: var(--color-zinc-500);
+    --primary-foreground: white;
+  }
+  .primary-zinc-600 {
+    --primary: var(--color-zinc-600);
+    --primary-foreground: white;
+  }
+  .primary-zinc-700 {
+    --primary: var(--color-zinc-700);
+    --primary-foreground: white;
+  }
+  .primary-zinc-800 {
+    --primary: var(--color-zinc-800);
+    --primary-foreground: white;
+  }
+  .primary-zinc-900 {
+    --primary: var(--color-zinc-900);
+    --primary-foreground: white;
+  }
+
+  .primary-neutral-100,
+  .dark.primary-neutral-900 {
+    --primary: var(--color-neutral-100);
+    --primary-foreground: black;
+  }
+  .primary-neutral-200,
+  .dark.primary-neutral-800 {
+    --primary: var(--color-neutral-200);
+    --primary-foreground: black;
+  }
+  .primary-neutral-300 {
+    --primary: var(--color-neutral-300);
+    --primary-foreground: black;
+  }
+  .primary-neutral-400 {
+    --primary: var(--color-neutral-400);
+    --primary-foreground: black;
+  }
+  .primary-neutral-500 {
+    --primary: var(--color-neutral-500);
+    --primary-foreground: white;
+  }
+  .primary-neutral-600 {
+    --primary: var(--color-neutral-600);
+    --primary-foreground: white;
+  }
+  .primary-neutral-700 {
+    --primary: var(--color-neutral-700);
+    --primary-foreground: white;
+  }
+  .primary-neutral-800 {
+    --primary: var(--color-neutral-800);
+    --primary-foreground: white;
+  }
+  .primary-neutral-900 {
+    --primary: var(--color-neutral-900);
+    --primary-foreground: white;
+  }
+
+  .primary-stone-100,
+  .dark.primary-stone-900 {
+    --primary: var(--color-stone-100);
+    --primary-foreground: black;
+  }
+  .primary-stone-200,
+  .dark.primary-stone-800 {
+    --primary: var(--color-stone-200);
+    --primary-foreground: black;
+  }
+  .primary-stone-300 {
+    --primary: var(--color-stone-300);
+    --primary-foreground: black;
+  }
+  .primary-stone-400 {
+    --primary: var(--color-stone-400);
+    --primary-foreground: black;
+  }
+  .primary-stone-500 {
+    --primary: var(--color-stone-500);
+    --primary-foreground: white;
+  }
+  .primary-stone-600 {
+    --primary: var(--color-stone-600);
+    --primary-foreground: white;
+  }
+  .primary-stone-700 {
+    --primary: var(--color-stone-700);
+    --primary-foreground: white;
+  }
+  .primary-stone-800 {
+    --primary: var(--color-stone-800);
+    --primary-foreground: white;
+  }
+  .primary-stone-900 {
+    --primary: var(--color-stone-900);
+    --primary-foreground: white;
+  }
+
+  .primary-red-100 {
+    --primary: var(--color-red-100);
+    --primary-foreground: black;
+  }
+  .primary-red-200 {
+    --primary: var(--color-red-200);
+    --primary-foreground: black;
+  }
+  .primary-red-300 {
+    --primary: var(--color-red-300);
+    --primary-foreground: black;
+  }
+  .primary-red-400 {
+    --primary: var(--color-red-400);
+    --primary-foreground: black;
+  }
+  .primary-red-500 {
+    --primary: var(--color-red-500);
+    --primary-foreground: white;
+  }
+  .primary-red-600 {
+    --primary: var(--color-red-600);
+    --primary-foreground: white;
+  }
+  .primary-red-700 {
+    --primary: var(--color-red-700);
+    --primary-foreground: white;
+  }
+  .primary-red-800 {
+    --primary: var(--color-red-800);
+    --primary-foreground: white;
+  }
+  .primary-red-900 {
+    --primary: var(--color-red-900);
+    --primary-foreground: white;
+  }
+  /* CSS PARSER: END - DO NOT REMOVE */
 }
 `;

From 5d61f34a6dcf5b577f3ffc61ddd92f136e3e685b Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Fri, 15 Aug 2025 08:56:31 +0200
Subject: [PATCH 21/42] fix: CI cli-e2e

---
 .github/actions/test/action.yml        | 7 +++----
 packages/cli-e2e/src/cli.smoke.spec.ts | 2 +-
 packages/cli/bin/index.ts              | 3 ++-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/.github/actions/test/action.yml b/.github/actions/test/action.yml
index 128810361..c88cfcb60 100644
--- a/.github/actions/test/action.yml
+++ b/.github/actions/test/action.yml
@@ -16,15 +16,14 @@ runs:
   steps:
     - name: Lint
       shell: bash
-      run: npx nx run-many -t lint --exclude website # --base=last-release  <- add that back after fix
-
+      run: npx nx run-many -t lint --exclude website  --base=last-release
     - name: Build packages
       shell: bash
-      run: npx nx run-many -t build --parallel=false --exclude website --skip-nx-cache # --base=last-release  <- add that back
+      run: npx nx run-many -t build --parallel=false --exclude website --skip-nx-cache --base=last-release
 
     - name: Test all except headless
       shell: bash
-      run: npx nx run-many -t test # --base=last-release <- add that back
+      run: npx nx run-many -t test --base=last-release
       env:
         NODE_OPTIONS: --experimental-vm-modules
 
diff --git a/packages/cli-e2e/src/cli.smoke.spec.ts b/packages/cli-e2e/src/cli.smoke.spec.ts
index 604d28dcb..0ef4e2a2a 100644
--- a/packages/cli-e2e/src/cli.smoke.spec.ts
+++ b/packages/cli-e2e/src/cli.smoke.spec.ts
@@ -23,7 +23,7 @@ describe('Qwik UI CLI Smoke test', () => {
 
   it('should be installed and add the button file', () => {
     execSync(
-      'npx -y qwik-ui@0.3.3 init --e2e --projectRoot ./ --uiComponentsPath "src/components/ui" --rootCssPath "src/global.css" --installTailwind --style "simple" --components=button',
+      'npx -y qwik-ui@e2e init --e2e --projectRoot ./ --uiComponentsPath "src/components/ui" --rootCssPath "src/global.css" --installTailwind --style "simple" --components=button',
       {
         cwd: projectDirectory,
         env: process.env,
diff --git a/packages/cli/bin/index.ts b/packages/cli/bin/index.ts
index 61ce28a79..a33dac4f0 100644
--- a/packages/cli/bin/index.ts
+++ b/packages/cli/bin/index.ts
@@ -195,7 +195,8 @@ async function handleInit() {
 
   // ADD QWIK UI CLI TO DEPENDENCIES
   log.info('Adding qwik-ui cli to package.json...');
-  execSync(`${getPackageManagerCommand().addDev} qwik-ui@latest`, {
+  const cliTag = args['e2e'] ? 'e2e' : 'latest';
+  execSync(`${getPackageManagerCommand().addDev} qwik-ui@${cliTag}`, {
     stdio: 'inherit',
   });
 

From bef78a0a4980604a70dbb3e2f2fbb8b8e08861be Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Fri, 15 Aug 2025 10:32:22 +0200
Subject: [PATCH 22/42] fix: shadows

---
 apps/website/src/global.css | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/apps/website/src/global.css b/apps/website/src/global.css
index 9dacbd9fe..d4f8937e4 100644
--- a/apps/website/src/global.css
+++ b/apps/website/src/global.css
@@ -30,8 +30,9 @@
     --border-width: 0px;
     --border-radius: 0;
     --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+    --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
@@ -63,8 +64,9 @@
     --border-width: 0px;
     --border-radius: 0;
     --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+    --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
@@ -101,6 +103,7 @@
     --radius-2xl: calc(var(--border-radius) + 1rem);
     --radius-3xl: calc(var(--border-radius) + 1.5rem);
     --shadow-base: var(--shadow-base);
+    --shadow-2xs: var(--shadow-2xs);
     --shadow-xs: var(--shadow-xs);
     --shadow-sm: var(--shadow-sm);
     --shadow-md: var(--shadow-md);
@@ -198,9 +201,8 @@
   .simple {
     --border-width: 0px;
     --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
@@ -227,7 +229,6 @@
     --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
     --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
     --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-    --shadow: 5px 5px rgba(0, 0, 0, 1);
     --shadow-md: 6px 6px rgba(0, 0, 0, 1);
     --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
     --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
@@ -251,7 +252,6 @@
     --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
     --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
     --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-    --shadow: 5px 5px rgba(0, 0, 0, 1);
     --shadow-md: 6px 6px rgba(0, 0, 0, 1);
     --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
     --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
@@ -284,16 +284,16 @@
       -3px -3px 6px #bebebe, 3px 3px 6px #ffffff,
       inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-sm:
-      3px 3px 6px #bebebe, -3px -3px 6px #ffffff,
+    --shadow-2xs:
+      -3px -3px 6px #bebebe, 3px 3px 6px #ffffff,
       inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow:
-      4px 4px 8px #bebebe, -4px -4px 8px #ffffff,
+    --shadow-sm:
+      3px 3px 6px #bebebe, -3px -3px 6px #ffffff,
       inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
     --shadow-md:
-      5px 5px 10px #bebebe, -5px -5px 10px #ffffff,
+      4px 4px 8px #bebebe, -4px -4px 8px #ffffff,
       inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
     --shadow-lg:
@@ -327,10 +327,10 @@
     --shadow-base:
       -3px -3px 6px #2c2c31, 3px 3px 6px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
-    --shadow-sm:
+    --shadow-xs:
       3px 3px 6px #2c2c31, -3px -3px 6px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
-    --shadow:
+    --shadow-sm:
       4px 4px 8px #2c2c31, -4px -4px 8px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
     --shadow-md:

From 9e707cd4acf5e92fe581cf2dcaa8c210a07fd5b7 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Fri, 15 Aug 2025 10:32:33 +0200
Subject: [PATCH 23/42] chore: format all

---
 .../anatomy-table/anatomy-table.tsx           |   6 +-
 .../src/components/api-table/api-table.tsx    |   8 +-
 .../src/components/api-table/auto-api.tsx     |   2 +-
 apps/website/src/components/header/header.tsx |   6 +-
 .../src/components/highlight/highlight.tsx    |   2 +-
 .../src/components/info-popup/info-popup.tsx  |   2 +-
 .../install-snippet/install-snippet.tsx       |   8 +-
 .../keyboard-interaction-table.tsx            |   2 +-
 .../make-it-yours/make-it-yours.tsx           |   8 +-
 .../src/components/mdx-components/index.tsx   |   2 +-
 .../navigation-docs/navigation-docs.tsx       |   2 +-
 apps/website/src/components/note/note.tsx     |   4 +-
 apps/website/src/components/search/search.tsx |  24 ++-
 .../status-banner/status-banner.tsx           |   4 +-
 .../docs/headless/carousel/auto-api/api.ts    | 156 +++++++++---------
 .../headless/checkbox/examples/checklist.tsx  |   4 +-
 .../checkbox/examples/controlled-values.tsx   |   4 +-
 .../headless/checkbox/examples/controlled.tsx |   2 +-
 .../examples/test-controlled-list-false.tsx   |   2 +-
 .../examples/test-controlled-list-falses.tsx  |   4 +-
 .../examples/test-controlled-list-trues.tsx   |   2 +-
 .../examples/test-controlled-list.tsx         |   2 +-
 .../headless/checkbox/examples/test-list.tsx  |   4 +-
 .../checkbox/examples/test-props-ids-list.tsx |   2 +-
 .../docs/headless/collapsible/auto-api/api.ts |  16 +-
 .../headless/collapsible/examples/csr.tsx     |   2 +-
 .../collapsible/examples/disabled.tsx         |   2 +-
 .../headless/collapsible/examples/hero.tsx    |   2 +-
 .../collapsible/examples/open-change.tsx      |   2 +-
 .../headless/collapsible/examples/open.tsx    |   2 +-
 .../docs/headless/install/confetti-button.tsx |   2 +-
 .../docs/headless/tooltip/auto-api/api.ts     |  16 +-
 .../routes/docs/styled/card/examples/hero.tsx |   6 +-
 .../docs/styled/carousel/examples/stepper.tsx |   2 +-
 .../styled/checkbox/examples/disabled.tsx     |   2 +-
 .../docs/styled/modal/examples/sheet.tsx      |   2 +-
 .../docs/styled/popover/examples/hero.tsx     |   2 +-
 .../docs/styled/separator/examples/hero.tsx   |   2 +-
 apps/website/src/routes/index@landing.tsx     |   9 +-
 cla-signs/v1/cla.json                         |   2 +-
 packages/cli/jest.config.js                   |   2 +-
 .../src/components/carousel/use-scroller.tsx  |   2 +-
 .../select/select-display-value.tsx           |   2 +-
 .../src/components/accordion/accordion.tsx    |   4 +-
 .../kit-styled/src/components/alert/alert.tsx |   4 +-
 .../kit-styled/src/components/badge/badge.tsx |   2 +-
 .../src/components/breadcrumb/breadcrumb.tsx  |   2 +-
 .../src/components/button/button.tsx          |  12 +-
 .../kit-styled/src/components/card/card.tsx   |   2 +-
 .../src/components/carousel/carousel.tsx      |   4 +-
 .../src/components/combobox/combobox.tsx      |   6 +-
 .../src/components/dropdown/dropdown.tsx      |   6 +-
 .../kit-styled/src/components/input/input.tsx |   2 +-
 .../src/components/popover/popover.tsx        |   2 +-
 .../src/components/progress/progress.tsx      |   4 +-
 .../src/components/select/select.tsx          |   6 +-
 .../src/components/skeleton/skeleton.tsx      |   2 +-
 .../kit-styled/src/components/tabs/tabs.tsx   |   6 +-
 .../src/components/textarea/textarea.tsx      |   2 +-
 .../src/components/toggle/toggle.tsx          |   2 +-
 .../src/components/tooltip/tooltip.tsx        |   2 +-
 61 files changed, 204 insertions(+), 205 deletions(-)

diff --git a/apps/website/src/components/anatomy-table/anatomy-table.tsx b/apps/website/src/components/anatomy-table/anatomy-table.tsx
index ae0dd569c..a7875eeb4 100644
--- a/apps/website/src/components/anatomy-table/anatomy-table.tsx
+++ b/apps/website/src/components/anatomy-table/anatomy-table.tsx
@@ -16,17 +16,17 @@ export const AnatomyTable = component$(
         <table class="mb-6 w-full min-w-[540px] text-left sm:min-w-full">
           <tbody class="divide-y">
             <tr class="text-foreground">
-              <td class="w-2/6 whitespace-nowrap p-2 font-semibold sm:pl-0">
+              <td class="w-2/6 p-2 font-semibold whitespace-nowrap sm:pl-0">
                 {firstColumnLabel}
               </td>
-              <td class="w-4/6 whitespace-nowrap p-2 font-semibold sm:pl-0">
+              <td class="w-4/6 p-2 font-semibold whitespace-nowrap sm:pl-0">
                 Description
               </td>
             </tr>
             {propDescriptors?.map((propDescriptor) => {
               return (
                 <tr key={propDescriptor.name}>
-                  <td class="align-center py-3 pl-2 pr-2 sm:pl-0 md:align-baseline">
+                  <td class="align-center py-3 pr-2 pl-2 sm:pl-0 md:align-baseline">
                     <div class="flex items-center gap-2">
                       <code class="mr-6 rounded-sm border border-b-2 border-primary px-2 text-accent-foreground">
                         {propDescriptor.name}
diff --git a/apps/website/src/components/api-table/api-table.tsx b/apps/website/src/components/api-table/api-table.tsx
index 65f1fe672..c3032a52a 100644
--- a/apps/website/src/components/api-table/api-table.tsx
+++ b/apps/website/src/components/api-table/api-table.tsx
@@ -15,16 +15,16 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
       <table class="mb-6 w-full min-w-[540px] border-b text-left sm:min-w-full">
         <tbody class="divide-y">
           <tr class="w-1/4">
-            <th class="w-1/6 whitespace-nowrap py-2 pl-4 font-semibold sm:pl-0">Prop</th>
-            <th class="w-1/6 whitespace-nowrap py-2 font-semibold">Type</th>
-            <th class="w-2/3 whitespace-nowrap p-2 font-semibold">Description</th>
+            <th class="w-1/6 py-2 pl-4 font-semibold whitespace-nowrap sm:pl-0">Prop</th>
+            <th class="w-1/6 py-2 font-semibold whitespace-nowrap">Type</th>
+            <th class="w-2/3 p-2 font-semibold whitespace-nowrap">Description</th>
           </tr>
           {propDescriptors?.map((propDescriptor) => {
             return (
               <tr key={propDescriptor.name}>
                 <td class="py-3 pl-4 sm:pl-0">
                   <div class="flex items-center gap-2">
-                    <code class="mr-6 rounded-base border border-b-2 border-primary px-2">
+                    <code class="rounded-base mr-6 border border-b-2 border-primary px-2">
                       {propDescriptor.name}
                     </code>
                   </div>
diff --git a/apps/website/src/components/api-table/auto-api.tsx b/apps/website/src/components/api-table/auto-api.tsx
index 704bac2b0..450069698 100644
--- a/apps/website/src/components/api-table/auto-api.tsx
+++ b/apps/website/src/components/api-table/auto-api.tsx
@@ -46,7 +46,7 @@ const currentSubHeader = $((text: string) => {
   }
   return (
     <>
-      <h3 class="mb-6 mt-8 scroll-mt-20 text-xl font-semibold">{subHeader}</h3>
+      <h3 class="mt-8 mb-6 scroll-mt-20 text-xl font-semibold">{subHeader}</h3>
     </>
   );
 });
diff --git a/apps/website/src/components/header/header.tsx b/apps/website/src/components/header/header.tsx
index b5b00de1b..453f2748f 100644
--- a/apps/website/src/components/header/header.tsx
+++ b/apps/website/src/components/header/header.tsx
@@ -128,7 +128,7 @@ export default component$(({ showVersion = false }: HeaderProps) => {
   return (
     <Modal.Root
       class={cn(
-        'bg-background sticky top-0 z-10 flex h-16 justify-center border-b',
+        'sticky top-0 z-10 flex h-16 justify-center border-b bg-background',
         themeSig.value?.includes('brutalist') && 'border-b-2',
       )}
       bind:show={isSidebarOpenedSig}
@@ -195,13 +195,13 @@ export default component$(({ showVersion = false }: HeaderProps) => {
           </div>
         </div>
       </header>
-      <Modal.Panel class="sidebar-mobile rounded-base bg-background text-foreground mr-0 ml-auto h-screen w-sm border-0 shadow-md">
+      <Modal.Panel class="sidebar-mobile rounded-base mr-0 ml-auto h-screen w-sm border-0 bg-background text-foreground shadow-md">
         <div class="mb-2 pt-2 pb-4">
           <DocsNavigation
             linksGroups={
               menuItemsGroups && menuItemsGroups.length > 0 ? menuItemsGroups : undefined
             }
-            class="bg-background max-w-80 overflow-auto"
+            class="max-w-80 overflow-auto bg-background"
           />
         </div>
         <button
diff --git a/apps/website/src/components/highlight/highlight.tsx b/apps/website/src/components/highlight/highlight.tsx
index c6ac717b6..f17602784 100644
--- a/apps/website/src/components/highlight/highlight.tsx
+++ b/apps/website/src/components/highlight/highlight.tsx
@@ -32,7 +32,7 @@ export const Highlight = component$(
         <div
           {...props}
           class={cn(
-            'tab-size dark:from-background dark:to-accent/30 max-h-[494px] max-w-full overflow-auto rounded-sm bg-linear-to-b from-slate-900 to-slate-800 p-6 text-sm',
+            'tab-size max-h-[494px] max-w-full overflow-auto rounded-sm bg-linear-to-b from-slate-900 to-slate-800 p-6 text-sm dark:from-background dark:to-accent/30',
             props.class,
           )}
           data-pagefind-ignore="all"
diff --git a/apps/website/src/components/info-popup/info-popup.tsx b/apps/website/src/components/info-popup/info-popup.tsx
index 81ded85a7..d60f6f173 100644
--- a/apps/website/src/components/info-popup/info-popup.tsx
+++ b/apps/website/src/components/info-popup/info-popup.tsx
@@ -46,7 +46,7 @@ export const InfoPopup = component$((props: InfoProps) => {
       </Popover.Trigger>
 
       <Popover.Panel class="fade-info listbox rounded-base bg-transparent">
-        <div class="text-md rounded-base border-border bg-popover text-foreground mb-2 max-w-xs border border-b-2 px-3 py-2 font-medium shadow-lg sm:w-max">
+        <div class="text-md rounded-base mb-2 max-w-xs border border-b-2 border-border bg-popover px-3 py-2 font-medium text-foreground shadow-lg sm:w-max">
           {props.info}
         </div>
       </Popover.Panel>
diff --git a/apps/website/src/components/install-snippet/install-snippet.tsx b/apps/website/src/components/install-snippet/install-snippet.tsx
index 9f43f656c..13ea423f0 100644
--- a/apps/website/src/components/install-snippet/install-snippet.tsx
+++ b/apps/website/src/components/install-snippet/install-snippet.tsx
@@ -32,12 +32,12 @@ export type InstallSnippetProps = {
 };
 export const InstallSnippet = component$<InstallSnippetProps>(({ packages }) => {
   return (
-    <Tabs.Root class="mb-12 rounded-base shadow-lg" behavior="manual">
-      <Tabs.List class=" flex rounded-t-xl border border-b-0 p-2">
+    <Tabs.Root class="rounded-base mb-12 shadow-lg" behavior="manual">
+      <Tabs.List class="flex rounded-t-xl border border-b-0 p-2">
         {Object.keys(packages).map((key, index) => (
           <Tabs.Tab
             key={index}
-            class="mr-2 rounded-base border px-2 py-1 hover:bg-accent hover:font-medium hover:text-accent-foreground"
+            class="rounded-base mr-2 border px-2 py-1 hover:bg-accent hover:font-medium hover:text-accent-foreground"
           >
             {key}
           </Tabs.Tab>
@@ -46,7 +46,7 @@ export const InstallSnippet = component$<InstallSnippetProps>(({ packages }) =>
       {Object.entries(packages).map(([, value], index) => (
         <Tabs.Panel
           key={index}
-          class="rounded-b-lg border-[1.5px]  bg-linear-to-b from-slate-900 to-slate-800 px-4 py-6 text-white shadow-lg dark:from-background dark:to-accent/50"
+          class="rounded-b-lg border-[1.5px] bg-linear-to-b from-slate-900 to-slate-800 px-4 py-6 text-white shadow-lg dark:from-background dark:to-accent/50"
         >
           <div data-pagefind-ignore="all" class="flex items-center justify-between">
             {value}
diff --git a/apps/website/src/components/keyboard-interaction-table/keyboard-interaction-table.tsx b/apps/website/src/components/keyboard-interaction-table/keyboard-interaction-table.tsx
index 3767e5281..c9144af50 100644
--- a/apps/website/src/components/keyboard-interaction-table/keyboard-interaction-table.tsx
+++ b/apps/website/src/components/keyboard-interaction-table/keyboard-interaction-table.tsx
@@ -42,7 +42,7 @@ export const KBInteractionTableRow = component$(
     return (
       <tr class="border-b">
         <td class="py-4">
-          <kbd class="inline-block w-max rounded-base border border-b-2 border-primary px-2 capitalize">
+          <kbd class="rounded-base inline-block w-max border border-b-2 border-primary px-2 capitalize">
             {keyTitle}
           </kbd>
         </td>
diff --git a/apps/website/src/components/make-it-yours/make-it-yours.tsx b/apps/website/src/components/make-it-yours/make-it-yours.tsx
index b97a58e29..a54f7042b 100644
--- a/apps/website/src/components/make-it-yours/make-it-yours.tsx
+++ b/apps/website/src/components/make-it-yours/make-it-yours.tsx
@@ -81,7 +81,7 @@ export default component$<PropsOf<typeof Button>>(() => {
         <div class="mt-8 mb-2 py-4">
           <label class="mb-1 block font-medium">Preset</label>
           <select
-            class="rounded-base bg-background h-12 w-full border p-2"
+            class="rounded-base h-12 w-full border bg-background p-2"
             value={themeComputedObjectSig.value.style}
             onChange$={async (e, el) => {
               if (el.value === 'simple') {
@@ -121,7 +121,7 @@ export default component$<PropsOf<typeof Button>>(() => {
                   }}
                   class={cn(
                     'flex h-3 w-3 items-center justify-center rounded-none',
-                    isActive && 'border-ring border-2',
+                    isActive && 'border-2 border-ring',
                   )}
                 >
                   <span
@@ -170,7 +170,7 @@ export default component$<PropsOf<typeof Button>>(() => {
                       themeComputedObjectSig.value.primaryColor = primaryColor;
                       themeSig.value = await themeStoreToThemeClasses$();
                     }}
-                    class={cn('h-3 w-3 rounded-none', isActive && 'border-ring border')}
+                    class={cn('h-3 w-3 rounded-none', isActive && 'border border-ring')}
                   >
                     {(primaryColor === 'primary-slate-800' ||
                       primaryColor === 'primary-gray-800' ||
@@ -441,7 +441,7 @@ export default component$<PropsOf<typeof Button>>(() => {
                       themeComputedObjectSig.value.borderRadius = borderRadius;
                       themeSig.value = await themeStoreToThemeClasses$();
                     }}
-                    class={cn('w-12', isActive && 'border-ring mb-2')}
+                    class={cn('w-12', isActive && 'mb-2 border-ring')}
                   >
                     {borderRadius === 'border-radius-0' && 0}
                     {borderRadius === 'border-radius-dot-25' && '.25'}
diff --git a/apps/website/src/components/mdx-components/index.tsx b/apps/website/src/components/mdx-components/index.tsx
index a17d6a03f..9a4c8a929 100644
--- a/apps/website/src/components/mdx-components/index.tsx
+++ b/apps/website/src/components/mdx-components/index.tsx
@@ -118,7 +118,7 @@ export const components: Record<string, Component> = {
         <CodeCopy class="absolute top-3 right-3" code={rawCodeString} />
         <div
           class={cn(
-            'rounded-base dark:from-background dark:to-accent/30 max-h-125 max-w-full overflow-y-auto border bg-linear-to-b from-slate-900 to-slate-800 p-6 text-sm',
+            'rounded-base max-h-125 max-w-full overflow-y-auto border bg-linear-to-b from-slate-900 to-slate-800 p-6 text-sm dark:from-background dark:to-accent/30',
           )}
         >
           <pre>
diff --git a/apps/website/src/components/navigation-docs/navigation-docs.tsx b/apps/website/src/components/navigation-docs/navigation-docs.tsx
index 07ae853d4..bb2afb986 100644
--- a/apps/website/src/components/navigation-docs/navigation-docs.tsx
+++ b/apps/website/src/components/navigation-docs/navigation-docs.tsx
@@ -69,7 +69,7 @@ export const DocsNavigation = component$(
                               link.name === 'Headless') ||
                             (location.url.pathname?.startsWith('/docs/styled/') &&
                               link.name === 'Styled')
-                            ? 'bg-accent text-accent-foreground font-bold'
+                            ? 'bg-accent font-bold text-accent-foreground'
                             : 'font-normal',
                         )}
                         href={link.href}
diff --git a/apps/website/src/components/note/note.tsx b/apps/website/src/components/note/note.tsx
index 8d0a6a148..afd8da279 100644
--- a/apps/website/src/components/note/note.tsx
+++ b/apps/website/src/components/note/note.tsx
@@ -46,8 +46,8 @@ export const Note = component$<NoteProps>(({ status }) => {
         'note-link relative mx-2 my-12 px-5 py-4 lg:px-8 lg:py-6',
       )}
     >
-      <div class="absolute left-[-17.5px] top-[-17.5px] hidden h-8 w-8 rounded-full bg-white dark:bg-slate-900 lg:block">
-        <div class="flex h-8 w-8 items-center justify-center ">
+      <div class="absolute top-[-17.5px] left-[-17.5px] hidden h-8 w-8 rounded-full bg-white lg:block dark:bg-slate-900">
+        <div class="flex h-8 w-8 items-center justify-center">
           {getIconByStatus(status ?? NoteStatus.Info)}
         </div>
       </div>
diff --git a/apps/website/src/components/search/search.tsx b/apps/website/src/components/search/search.tsx
index 3eb3e200f..cdec4c19a 100644
--- a/apps/website/src/components/search/search.tsx
+++ b/apps/website/src/components/search/search.tsx
@@ -128,17 +128,15 @@ export const Search = component$(({ isOpen }: { isOpen: Signal<boolean> }) => {
       class="w-full"
       mode="inline"
       filter={false}
-      onChange$={$(
-        (value: string | string[]) => {
-          if (typeof value === 'string') {
-            window.location.href = value;
-            isOpen.value = false;
-          } else {
-            window.location.href = value[0];
-            isOpen.value = false;
-          }
-        },
-      )}
+      onChange$={$((value: string | string[]) => {
+        if (typeof value === 'string') {
+          window.location.href = value;
+          isOpen.value = false;
+        } else {
+          window.location.href = value[0];
+          isOpen.value = false;
+        }
+      })}
     >
       <Combobox.Input
         onInput$={handleInput}
@@ -150,7 +148,7 @@ export const Search = component$(({ isOpen }: { isOpen: Signal<boolean> }) => {
         data-id="search"
         placeholder="Find anything"
         class={cn(
-          'h-12 w-full rounded-b-none border-none focus-visible:outline-hidden focus-visible:ring-0',
+          'h-12 w-full rounded-b-none border-none focus-visible:ring-0 focus-visible:outline-hidden',
         )}
       />
       <Combobox.Inline class="max-h-[calc(100vh-200px)] overflow-auto border-t-2 border-border">
@@ -226,7 +224,7 @@ export const Search = component$(({ isOpen }: { isOpen: Signal<boolean> }) => {
                         class="block rounded-none border-b px-2 py-4"
                       >
                         <div class="flex flex-col gap-1">
-                          <div class="text-sm capitalize text-muted-foreground opacity-50">
+                          <div class="text-sm text-muted-foreground capitalize opacity-50">
                             {result.url.split('/').slice(-2, -1)}
                           </div>
                           <Combobox.ItemLabel class="text-base font-medium">
diff --git a/apps/website/src/components/status-banner/status-banner.tsx b/apps/website/src/components/status-banner/status-banner.tsx
index e45c5b744..cc49e2605 100644
--- a/apps/website/src/components/status-banner/status-banner.tsx
+++ b/apps/website/src/components/status-banner/status-banner.tsx
@@ -81,7 +81,7 @@ export const StatusBanner = component$(({ status }: StatusBannerProps) => {
         onAnimationEnd$={() => (isBannerClosedSig.value = true)}
         class={cn(
           getBackgroundByStatus(status),
-          'normal-state relative rounded-base border-2 px-8 py-6 md:flex-row md:items-center 2xl:-mx-8',
+          'normal-state rounded-base relative border-2 px-8 py-6 md:flex-row md:items-center 2xl:-mx-8',
         )}
         style={{ marginBottom: `${marginBottom}px` }}
       >
@@ -97,7 +97,7 @@ export const StatusBanner = component$(({ status }: StatusBannerProps) => {
 
             ref.value?.classList.toggle('fade');
           }}
-          class="absolute right-2 top-2 scale-150"
+          class="absolute top-2 right-2 scale-150"
         >
           <LuX class="size-3" />
         </button>
diff --git a/apps/website/src/routes/docs/headless/carousel/auto-api/api.ts b/apps/website/src/routes/docs/headless/carousel/auto-api/api.ts
index f03bdf1d6..f4ce10a1b 100644
--- a/apps/website/src/routes/docs/headless/carousel/auto-api/api.ts
+++ b/apps/website/src/routes/docs/headless/carousel/auto-api/api.ts
@@ -1,141 +1,143 @@
 export const api = {
-  "carousel": [
+  carousel: [
     {
-      "bullet": []
+      bullet: [],
     },
     {
-      "inline": []
+      inline: [],
     },
     {
-      "next": []
+      next: [],
     },
     {
-      "pagination": []
+      pagination: [],
     },
     {
-      "player": []
+      player: [],
     },
     {
-      "previous": []
+      previous: [],
     },
     {
-      "root": [
+      root: [
         {
-          "PublicCarouselRootProps": [
+          PublicCarouselRootProps: [
             {
-              "comment": "The gap between slides",
-              "prop": "gap",
-              "type": "number"
+              comment: 'The gap between slides',
+              prop: 'gap',
+              type: 'number',
             },
             {
-              "comment": "Number of slides to show at once",
-              "prop": "slidesPerView",
-              "type": "number"
+              comment: 'Number of slides to show at once',
+              prop: 'slidesPerView',
+              type: 'number',
             },
             {
-              "comment": "Whether the carousel is draggable",
-              "prop": "draggable",
-              "type": "boolean"
+              comment: 'Whether the carousel is draggable',
+              prop: 'draggable',
+              type: 'boolean',
             },
             {
-              "comment": "Alignment of slides within the viewport",
-              "prop": "align",
-              "type": "'start' | 'center' | 'end'"
+              comment: 'Alignment of slides within the viewport',
+              prop: 'align',
+              type: "'start' | 'center' | 'end'",
             },
             {
-              "comment": "Whether the carousel should rewind",
-              "prop": "rewind",
-              "type": "boolean"
+              comment: 'Whether the carousel should rewind',
+              prop: 'rewind',
+              type: 'boolean',
             },
             {
-              "comment": "Bind the selected index to a signal",
-              "prop": "'bind:selectedIndex'",
-              "type": "Signal<number>"
+              comment: 'Bind the selected index to a signal',
+              prop: "'bind:selectedIndex'",
+              type: 'Signal<number>',
             },
             {
-              "comment": "change the initial index of the carousel on render",
-              "prop": "startIndex",
-              "type": "number"
+              comment: 'change the initial index of the carousel on render',
+              prop: 'startIndex',
+              type: 'number',
             },
             {
-              "comment": "@deprecated Use bind:selectedIndex instead\n    Bind the current slide index to a signal",
-              "prop": "'bind:currSlideIndex'",
-              "type": "Signal<number>"
+              comment:
+                '@deprecated Use bind:selectedIndex instead\n    Bind the current slide index to a signal',
+              prop: "'bind:currSlideIndex'",
+              type: 'Signal<number>',
             },
             {
-              "comment": "Whether the carousel should autoplay",
-              "prop": "'bind:autoplay'",
-              "type": "Signal<boolean>"
+              comment: 'Whether the carousel should autoplay',
+              prop: "'bind:autoplay'",
+              type: 'Signal<boolean>',
             },
             {
-              "comment": "the current progress of the carousel",
-              "prop": "'bind:progress'",
-              "type": "Signal<number>"
+              comment: 'the current progress of the carousel',
+              prop: "'bind:progress'",
+              type: 'Signal<number>',
             },
             {
-              "comment": "Time in milliseconds before the next slide plays during autoplay",
-              "prop": "autoPlayIntervalMs",
-              "type": "number"
+              comment: 'Time in milliseconds before the next slide plays during autoplay',
+              prop: 'autoPlayIntervalMs',
+              type: 'number',
             },
             {
-              "comment": "@internal Total number of slides",
-              "prop": "_numSlides",
-              "type": "number"
+              comment: '@internal Total number of slides',
+              prop: '_numSlides',
+              type: 'number',
             },
             {
-              "comment": "@internal Whether this carousel has a title",
-              "prop": "_isTitle",
-              "type": "boolean"
+              comment: '@internal Whether this carousel has a title',
+              prop: '_isTitle',
+              type: 'boolean',
             },
             {
-              "comment": "The sensitivity of the carousel dragging",
-              "prop": "sensitivity",
-              "type": "{\n    mouse?: number;\n    touch?: number;\n  }"
+              comment: 'The sensitivity of the carousel dragging',
+              prop: 'sensitivity',
+              type: '{\n    mouse?: number;\n    touch?: number;\n  }',
             },
             {
-              "comment": "The amount of slides to move when hitting the next or previous button",
-              "prop": "move",
-              "type": "number"
+              comment:
+                'The amount of slides to move when hitting the next or previous button',
+              prop: 'move',
+              type: 'number',
             },
             {
-              "comment": "The carousel's direction",
-              "prop": "orientation",
-              "type": "'horizontal' | 'vertical'"
+              comment: "The carousel's direction",
+              prop: 'orientation',
+              type: "'horizontal' | 'vertical'",
             },
             {
-              "comment": "The maximum height of the slides. Needed in vertical carousels",
-              "prop": "maxSlideHeight",
-              "type": "number"
+              comment: 'The maximum height of the slides. Needed in vertical carousels',
+              prop: 'maxSlideHeight',
+              type: 'number',
             },
             {
-              "comment": "Whether the carousel should support mousewheel navigation",
-              "prop": "mousewheel",
-              "type": "boolean"
-            }
-          ]
-        }
-      ]
+              comment: 'Whether the carousel should support mousewheel navigation',
+              prop: 'mousewheel',
+              type: 'boolean',
+            },
+          ],
+        },
+      ],
     },
     {
-      "scroller": []
+      scroller: [],
     },
     {
-      "slide": []
+      slide: [],
     },
     {
-      "step": []
+      step: [],
     },
     {
-      "stepper": []
+      stepper: [],
     },
     {
-      "title": []
+      title: [],
     },
     {
-      "use-carousel": []
+      'use-carousel': [],
     },
     {
-      "use-scroller": []
-    }
-  ]
-};
\ No newline at end of file
+      'use-scroller': [],
+    },
+  ],
+};
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/checklist.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/checklist.tsx
index b0f592b8c..5199689eb 100644
--- a/apps/website/src/routes/docs/headless/checkbox/examples/checklist.tsx
+++ b/apps/website/src/routes/docs/headless/checkbox/examples/checklist.tsx
@@ -5,7 +5,7 @@ import { Checklist } from '@qwik-ui/headless';
 export default component$(() => {
   return (
     <Checklist.Root initialStates={[false, false, false]}>
-      <Checklist.SelectAll class="flex items-center justify-center  border-2 p-2">
+      <Checklist.SelectAll class="flex items-center justify-center border-2 p-2">
         <div class="flex items-center justify-center border-2 p-2">
           <Checklist.ItemIndicator>✅</Checklist.ItemIndicator>
         </div>{' '}
@@ -16,7 +16,7 @@ export default component$(() => {
         const uniqueKey = `cl-${index}-${Date.now()}`;
         return (
           <Checklist.Item key={uniqueKey} _index={index}>
-            <div class="flex items-center justify-center  border-2 p-2">
+            <div class="flex items-center justify-center border-2 p-2">
               <Checklist.ItemIndicator>✅</Checklist.ItemIndicator>
             </div>
             {`item ${index}`}
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/controlled-values.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/controlled-values.tsx
index c841af64d..cfba172bf 100644
--- a/apps/website/src/routes/docs/headless/checkbox/examples/controlled-values.tsx
+++ b/apps/website/src/routes/docs/headless/checkbox/examples/controlled-values.tsx
@@ -12,7 +12,7 @@ export default component$(() => {
           <Checkbox.Root
             bind:checked={controlledSig1}
             id="test"
-            class="flex items-center gap-3 border-2 border-black p-2 "
+            class="flex items-center gap-3 border-2 border-black p-2"
           >
             <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
               ✅
@@ -26,7 +26,7 @@ export default component$(() => {
           <Checkbox.Root
             bind:checked={controlledSig2}
             id="test"
-            class="flex items-center gap-3 border-2 border-black p-2 "
+            class="flex items-center gap-3 border-2 border-black p-2"
           >
             <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
               ✅
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/controlled.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/controlled.tsx
index 04adffb58..9ecf7edd5 100644
--- a/apps/website/src/routes/docs/headless/checkbox/examples/controlled.tsx
+++ b/apps/website/src/routes/docs/headless/checkbox/examples/controlled.tsx
@@ -10,7 +10,7 @@ export default component$(() => {
           <Checkbox.Root
             bind:checked={controlledSig1}
             id="test"
-            class="flex items-center gap-3 border-2 border-black p-2 "
+            class="flex items-center gap-3 border-2 border-black p-2"
           >
             <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
               ✅
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-false.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-false.tsx
index 480307958..1019eed19 100644
--- a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-false.tsx
+++ b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-false.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
       <h3 id="test123">Pick a cat</h3>
       <Checklist.Root initialStates={[false, false, false]}>
         <Checkbox.Root
-          class="flex items-center gap-3 bg-slate-900  text-white"
+          class="flex items-center gap-3 bg-slate-900 text-white"
           // checklist={true}
           bind:checked={checklistSig}
           id="checklist"
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-falses.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-falses.tsx
index 4e2180971..c54fc0ae3 100644
--- a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-falses.tsx
+++ b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-falses.tsx
@@ -5,7 +5,7 @@ import { Checklist } from '@qwik-ui/headless';
 export default component$(() => {
   return (
     <Checklist.Root initialStates={[true, false, false]}>
-      <Checklist.SelectAll class="flex h-[25px] w-[25px] items-center justify-center  border-2 border-black p-2">
+      <Checklist.SelectAll class="flex h-[25px] w-[25px] items-center justify-center border-2 border-black p-2">
         <div class="flex h-[25px] w-[25px] items-center justify-center border-2 border-black p-2">
           <Checklist.ItemIndicator>✅</Checklist.ItemIndicator>
         </div>{' '}
@@ -16,7 +16,7 @@ export default component$(() => {
         const uniqueKey = `cl-${index}-${Date.now()}`;
         return (
           <Checklist.Item key={uniqueKey} _index={index}>
-            <div class="flex h-[25px] w-[25px] items-center justify-center  border-2 border-black p-2">
+            <div class="flex h-[25px] w-[25px] items-center justify-center border-2 border-black p-2">
               <Checklist.ItemIndicator>✅</Checklist.ItemIndicator>
             </div>
             {`item ${index}`}
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-trues.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-trues.tsx
index c723dcfbc..252db6a65 100644
--- a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-trues.tsx
+++ b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-trues.tsx
@@ -11,7 +11,7 @@ export default component$(() => {
           class="flex items-center gap-3 bg-slate-900 p-2 text-white"
           // checklist={true}
         >
-          <Checkbox.Indicator class=" flex w-[80px] justify-center bg-white p-3">
+          <Checkbox.Indicator class="flex w-[80px] justify-center bg-white p-3">
             ✅
           </Checkbox.Indicator>
           <p>Controlls all</p>
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list.tsx
index 2e8ce5759..0f9396719 100644
--- a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list.tsx
+++ b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list.tsx
@@ -11,7 +11,7 @@ export default component$(() => {
           class="flex items-center gap-3 bg-slate-900 p-2 text-white"
           // checklist={true}
         >
-          <Checkbox.Indicator class=" flex w-[80px] justify-center bg-white p-3">
+          <Checkbox.Indicator class="flex w-[80px] justify-center bg-white p-3">
             ✅
           </Checkbox.Indicator>
           <p>Controlls all</p>
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-list.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-list.tsx
index 3369e9101..e8c183955 100644
--- a/apps/website/src/routes/docs/headless/checkbox/examples/test-list.tsx
+++ b/apps/website/src/routes/docs/headless/checkbox/examples/test-list.tsx
@@ -17,13 +17,13 @@ export default component$(() => {
       </Checklist.SelectAll>
 
       <Checklist.Item>
-        <div class="flex h-[25px] w-[25px] items-center justify-center  border-2 border-black p-2">
+        <div class="flex h-[25px] w-[25px] items-center justify-center border-2 border-black p-2">
           <Checklist.ItemIndicator>✅</Checklist.ItemIndicator>
         </div>
         first item
       </Checklist.Item>
       <Checklist.Item>
-        <div class="flex h-[25px] w-[25px] items-center justify-center  border-2 border-black p-2">
+        <div class="flex h-[25px] w-[25px] items-center justify-center border-2 border-black p-2">
           <Checklist.ItemIndicator>✅</Checklist.ItemIndicator>
         </div>
         second item
diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-props-ids-list.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-props-ids-list.tsx
index 2fd0ccc08..fb7c10a9e 100644
--- a/apps/website/src/routes/docs/headless/checkbox/examples/test-props-ids-list.tsx
+++ b/apps/website/src/routes/docs/headless/checkbox/examples/test-props-ids-list.tsx
@@ -12,7 +12,7 @@ export default component$(() => {
           // checklist={true}
           id="checklist"
         >
-          <Checkbox.Indicator class=" flex w-[80px] justify-center bg-white p-3">
+          <Checkbox.Indicator class="flex w-[80px] justify-center bg-white p-3">
             ✅
           </Checkbox.Indicator>
           <p>Controlls all</p>
diff --git a/apps/website/src/routes/docs/headless/collapsible/auto-api/api.ts b/apps/website/src/routes/docs/headless/collapsible/auto-api/api.ts
index 70a23eb09..519c626f4 100644
--- a/apps/website/src/routes/docs/headless/collapsible/auto-api/api.ts
+++ b/apps/website/src/routes/docs/headless/collapsible/auto-api/api.ts
@@ -1,16 +1,16 @@
 export const api = {
-  "collapsible": [
+  collapsible: [
     {
-      "collapsible-content": []
+      'collapsible-content': [],
     },
     {
-      "collapsible-trigger": []
+      'collapsible-trigger': [],
     },
     {
-      "collapsible": []
+      collapsible: [],
     },
     {
-      "use-collapsible": []
-    }
-  ]
-};
\ No newline at end of file
+      'use-collapsible': [],
+    },
+  ],
+};
diff --git a/apps/website/src/routes/docs/headless/collapsible/examples/csr.tsx b/apps/website/src/routes/docs/headless/collapsible/examples/csr.tsx
index 4c79c332f..a8d731497 100644
--- a/apps/website/src/routes/docs/headless/collapsible/examples/csr.tsx
+++ b/apps/website/src/routes/docs/headless/collapsible/examples/csr.tsx
@@ -17,7 +17,7 @@ export default component$(() => {
             <span>Trigger</span>
             <LuChevronDown />
           </Collapsible.Trigger>
-          <Collapsible.Content class="collapsible-content collapsible-content-outline ">
+          <Collapsible.Content class="collapsible-content collapsible-content-outline">
             Content
           </Collapsible.Content>
         </Collapsible.Root>
diff --git a/apps/website/src/routes/docs/headless/collapsible/examples/disabled.tsx b/apps/website/src/routes/docs/headless/collapsible/examples/disabled.tsx
index a3dfeabe3..6ac8c8b61 100644
--- a/apps/website/src/routes/docs/headless/collapsible/examples/disabled.tsx
+++ b/apps/website/src/routes/docs/headless/collapsible/examples/disabled.tsx
@@ -11,7 +11,7 @@ export default component$(() => {
         <span>Trigger</span>
         <LuChevronDown />
       </Collapsible.Trigger>
-      <Collapsible.Content class="collapsible-content collapsible-content-outline ">
+      <Collapsible.Content class="collapsible-content collapsible-content-outline">
         Content
       </Collapsible.Content>
     </Collapsible.Root>
diff --git a/apps/website/src/routes/docs/headless/collapsible/examples/hero.tsx b/apps/website/src/routes/docs/headless/collapsible/examples/hero.tsx
index 1a3e29252..3243c47a6 100644
--- a/apps/website/src/routes/docs/headless/collapsible/examples/hero.tsx
+++ b/apps/website/src/routes/docs/headless/collapsible/examples/hero.tsx
@@ -11,7 +11,7 @@ export default component$(() => {
         <span>Trigger</span>
         <LuChevronDown />
       </Collapsible.Trigger>
-      <Collapsible.Content class="collapsible-content collapsible-content-outline ">
+      <Collapsible.Content class="collapsible-content collapsible-content-outline">
         Content
       </Collapsible.Content>
     </Collapsible.Root>
diff --git a/apps/website/src/routes/docs/headless/collapsible/examples/open-change.tsx b/apps/website/src/routes/docs/headless/collapsible/examples/open-change.tsx
index 3cbc61a3e..5a54fb07f 100644
--- a/apps/website/src/routes/docs/headless/collapsible/examples/open-change.tsx
+++ b/apps/website/src/routes/docs/headless/collapsible/examples/open-change.tsx
@@ -23,7 +23,7 @@ export default component$(() => {
           <span>Trigger</span>
           <LuChevronDown />
         </Collapsible.Trigger>
-        <Collapsible.Content class="collapsible-content collapsible-content-outline ">
+        <Collapsible.Content class="collapsible-content collapsible-content-outline">
           Content
         </Collapsible.Content>
       </Collapsible.Root>
diff --git a/apps/website/src/routes/docs/headless/collapsible/examples/open.tsx b/apps/website/src/routes/docs/headless/collapsible/examples/open.tsx
index b5587b484..d2bbc75c0 100644
--- a/apps/website/src/routes/docs/headless/collapsible/examples/open.tsx
+++ b/apps/website/src/routes/docs/headless/collapsible/examples/open.tsx
@@ -11,7 +11,7 @@ export default component$(() => {
         <span>Trigger</span>
         <LuChevronDown />
       </Collapsible.Trigger>
-      <Collapsible.Content class="collapsible-content collapsible-content-outline ">
+      <Collapsible.Content class="collapsible-content collapsible-content-outline">
         Content
       </Collapsible.Content>
     </Collapsible.Root>
diff --git a/apps/website/src/routes/docs/headless/install/confetti-button.tsx b/apps/website/src/routes/docs/headless/install/confetti-button.tsx
index b38ef3d84..c5661a94b 100644
--- a/apps/website/src/routes/docs/headless/install/confetti-button.tsx
+++ b/apps/website/src/routes/docs/headless/install/confetti-button.tsx
@@ -40,7 +40,7 @@ export const ConfettiButton = component$(({ intro }: { intro?: boolean }) => {
                 },
               });
             }}
-            class="z-1 relative h-[44px] rounded-base bg-primary px-3 font-bold text-white shadow-md"
+            class="rounded-base relative z-1 h-[44px] bg-primary px-3 font-bold text-white shadow-md"
             id="add-confetti-button"
           >
             {intro ? 'Click me!' : 'Woohoo! 🎉'}
diff --git a/apps/website/src/routes/docs/headless/tooltip/auto-api/api.ts b/apps/website/src/routes/docs/headless/tooltip/auto-api/api.ts
index db5091a55..7cb0adf4e 100644
--- a/apps/website/src/routes/docs/headless/tooltip/auto-api/api.ts
+++ b/apps/website/src/routes/docs/headless/tooltip/auto-api/api.ts
@@ -1,16 +1,16 @@
 export const api = {
-  "tooltip": [
+  tooltip: [
     {
-      "tooltip-arrow": []
+      'tooltip-arrow': [],
     },
     {
-      "tooltip-panel": []
+      'tooltip-panel': [],
     },
     {
-      "tooltip-root": []
+      'tooltip-root': [],
     },
     {
-      "tooltip-trigger": []
-    }
-  ]
-};
\ No newline at end of file
+      'tooltip-trigger': [],
+    },
+  ],
+};
diff --git a/apps/website/src/routes/docs/styled/card/examples/hero.tsx b/apps/website/src/routes/docs/styled/card/examples/hero.tsx
index 61c40fa9b..07f4cb161 100644
--- a/apps/website/src/routes/docs/styled/card/examples/hero.tsx
+++ b/apps/website/src/routes/docs/styled/card/examples/hero.tsx
@@ -28,10 +28,10 @@ export default component$<CardProps>(({ ...props }) => {
         <Card.Description>You have 3 unread messages.</Card.Description>
       </Card.Header>
       <Card.Content class="grid gap-4">
-        <div class=" flex items-center space-x-4 rounded-md border p-4">
+        <div class="flex items-center space-x-4 rounded-md border p-4">
           <LuBell />
           <div class="flex-1 space-y-1">
-            <p class="text-sm font-medium leading-none">Push Notifications</p>
+            <p class="text-sm leading-none font-medium">Push Notifications</p>
             <p class="text-sm text-muted-foreground">Send notifications to device.</p>
           </div>
           {/* <Switch /> */}
@@ -44,7 +44,7 @@ export default component$<CardProps>(({ ...props }) => {
             >
               <span class="flex h-2 w-2 translate-y-1 rounded-full bg-primary" />
               <div class="space-y-1">
-                <p class="text-sm font-medium leading-none">{notification.title}</p>
+                <p class="text-sm leading-none font-medium">{notification.title}</p>
                 <p class="text-sm text-muted-foreground">{notification.description}</p>
               </div>
             </div>
diff --git a/apps/website/src/routes/docs/styled/carousel/examples/stepper.tsx b/apps/website/src/routes/docs/styled/carousel/examples/stepper.tsx
index 8ad209924..fa4e3c331 100644
--- a/apps/website/src/routes/docs/styled/carousel/examples/stepper.tsx
+++ b/apps/website/src/routes/docs/styled/carousel/examples/stepper.tsx
@@ -14,7 +14,7 @@ export default component$(() => {
             <Carousel.Step key={index}>
               <span
                 class={cn(
-                  'bg-muted flex size-8 items-center justify-center rounded-full text-xl font-semibold',
+                  'flex size-8 items-center justify-center rounded-full bg-muted text-xl font-semibold',
                   progressIndex.value >= index && 'bg-primary text-primary-foreground',
                 )}
               >
diff --git a/apps/website/src/routes/docs/styled/checkbox/examples/disabled.tsx b/apps/website/src/routes/docs/styled/checkbox/examples/disabled.tsx
index 91303f227..306cd7c4d 100644
--- a/apps/website/src/routes/docs/styled/checkbox/examples/disabled.tsx
+++ b/apps/website/src/routes/docs/styled/checkbox/examples/disabled.tsx
@@ -7,7 +7,7 @@ export default component$(() => {
       <Checkbox id="terms2" disabled />
       <label
         for="terms2"
-        class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
       >
         Accept terms and conditions
       </label>
diff --git a/apps/website/src/routes/docs/styled/modal/examples/sheet.tsx b/apps/website/src/routes/docs/styled/modal/examples/sheet.tsx
index 096a6df33..2d5f6e6bc 100644
--- a/apps/website/src/routes/docs/styled/modal/examples/sheet.tsx
+++ b/apps/website/src/routes/docs/styled/modal/examples/sheet.tsx
@@ -48,7 +48,7 @@ export const Sheet = component$<PropsOf<typeof Modal.Panel>>(({ ...props }) => {
         <Modal.Close
           class={cn(
             buttonVariants({ size: 'icon', look: 'link' }),
-            'absolute right-3 top-2',
+            'absolute top-2 right-3',
           )}
           type="submit"
         >
diff --git a/apps/website/src/routes/docs/styled/popover/examples/hero.tsx b/apps/website/src/routes/docs/styled/popover/examples/hero.tsx
index a024966fd..73321623c 100644
--- a/apps/website/src/routes/docs/styled/popover/examples/hero.tsx
+++ b/apps/website/src/routes/docs/styled/popover/examples/hero.tsx
@@ -11,7 +11,7 @@ export default component$(() => {
         <div class="grid gap-4">
           <div class="space-y-2">
             <h4 class="leading-none font-medium">Dimensions</h4>
-            <p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
+            <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
           </div>
           <div class="grid gap-2">
             <div class="grid grid-cols-5 items-center gap-4">
diff --git a/apps/website/src/routes/docs/styled/separator/examples/hero.tsx b/apps/website/src/routes/docs/styled/separator/examples/hero.tsx
index f7c85db93..cb71bf77b 100644
--- a/apps/website/src/routes/docs/styled/separator/examples/hero.tsx
+++ b/apps/website/src/routes/docs/styled/separator/examples/hero.tsx
@@ -4,7 +4,7 @@ export default component$(() => {
   return (
     <div>
       <div class="space-y-1">
-        <h4 class="text-sm font-medium leading-none">Qwik UI</h4>
+        <h4 class="text-sm leading-none font-medium">Qwik UI</h4>
         <p class="text-sm text-muted-foreground">An open-source UI component library.</p>
       </div>
       <Separator class="my-4" />
diff --git a/apps/website/src/routes/index@landing.tsx b/apps/website/src/routes/index@landing.tsx
index 0ba8771ae..0efdc6eec 100644
--- a/apps/website/src/routes/index@landing.tsx
+++ b/apps/website/src/routes/index@landing.tsx
@@ -43,20 +43,19 @@ export default component$(() => {
         <span class="font-extrabold tracking-wide text-primary">Qwik</span>{' '}
         <span class="font-extrabold tracking-wide text-secondary">UI</span>
       </h1>
-      <h2 class="text-center text-xl font-bold leading-normal lg:text-3xl">
+      <h2 class="text-center text-xl leading-normal font-bold lg:text-3xl">
         Headless & styled copy-paste components
         <br />
         <span class="leading-normal text-primary">automatically optimized for you</span>
       </h2>
       <p class="text-center text-lg lg:text-xl">
-        Choose a kit and start building the future{' '}
-        <span class="hue-rotate-150">⚡</span>
+        Choose a kit and start building the future <span class="hue-rotate-150">⚡</span>
       </p>
       <div class="mt-4 flex flex-wrap justify-center justify-items-center gap-14">
         <a href={`/docs/headless/introduction`}>
           <Card.Root
             class={cn(
-              'relative block h-full max-w-md rounded-lg shadow-lg outline-1 duration-150 ease-step hover:scale-[1.025] focus:scale-[1.025]',
+              'ease-step relative block h-full max-w-md rounded-lg shadow-lg outline-1 duration-150 hover:scale-[1.025] focus:scale-[1.025]',
             )}
           >
             <Card.Image
@@ -86,7 +85,7 @@ export default component$(() => {
           </Card.Root>
         </a>
         <a href={`/docs/styled/introduction`}>
-          <Card.Root class="relative block h-full max-w-md rounded-lg shadow-lg outline-1 duration-150 ease-step hover:scale-[1.025] focus:scale-[1.025]">
+          <Card.Root class="ease-step relative block h-full max-w-md rounded-lg shadow-lg outline-1 duration-150 hover:scale-[1.025] focus:scale-[1.025]">
             <Card.Image
               src={`/images/qwik-ui-fluffy-creature-screen.webp`}
               width="300"
diff --git a/cla-signs/v1/cla.json b/cla-signs/v1/cla.json
index e4838d6de..df427e470 100644
--- a/cla-signs/v1/cla.json
+++ b/cla-signs/v1/cla.json
@@ -609,4 +609,4 @@
       "pullRequestNo": 1114
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/cli/jest.config.js b/packages/cli/jest.config.js
index 96571279e..64f313856 100644
--- a/packages/cli/jest.config.js
+++ b/packages/cli/jest.config.js
@@ -15,4 +15,4 @@ module.exports = {
   moduleFileExtensions: ['ts', 'js', 'html'],
   coverageDirectory: '../../coverage/packages/cli',
   prettierPath: require.resolve('prettier-2'),
-}; 
\ No newline at end of file
+};
diff --git a/packages/kit-headless/src/components/carousel/use-scroller.tsx b/packages/kit-headless/src/components/carousel/use-scroller.tsx
index 60f90ee6c..3b6bfcb1c 100644
--- a/packages/kit-headless/src/components/carousel/use-scroller.tsx
+++ b/packages/kit-headless/src/components/carousel/use-scroller.tsx
@@ -77,7 +77,7 @@ export function useScroller(context: CarouselContext) {
     }
 
     context.scrollerRef.value.style.transition = isEnabled
-      ? givenTransitionSig.value ?? 'revert'
+      ? (givenTransitionSig.value ?? 'revert')
       : 'none';
   });
 
diff --git a/packages/kit-headless/src/components/select/select-display-value.tsx b/packages/kit-headless/src/components/select/select-display-value.tsx
index caf3525a4..3d5801bef 100644
--- a/packages/kit-headless/src/components/select/select-display-value.tsx
+++ b/packages/kit-headless/src/components/select/select-display-value.tsx
@@ -31,7 +31,7 @@ export const HSelectDisplayValue = component$((props: SelectValueProps) => {
     } else {
       return context.multiple
         ? context.currDisplayValueSig.value
-        : context.currDisplayValueSig.value?.[0] ?? placeholder;
+        : (context.currDisplayValueSig.value?.[0] ?? placeholder);
     }
   });
 
diff --git a/packages/kit-styled/src/components/accordion/accordion.tsx b/packages/kit-styled/src/components/accordion/accordion.tsx
index 747292a14..f3c9aa583 100644
--- a/packages/kit-styled/src/components/accordion/accordion.tsx
+++ b/packages/kit-styled/src/components/accordion/accordion.tsx
@@ -34,7 +34,7 @@ const Trigger = component$<
         )}
       >
         <Slot />
-        <LuChevronDown class="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" />
+        <LuChevronDown class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
       </HeadlessAccordion.Trigger>
     </HeadlessAccordion.Header>
   );
@@ -45,7 +45,7 @@ const Content = component$<PropsOf<typeof HeadlessAccordion.Content>>((props) =>
     <HeadlessAccordion.Content
       {...props}
       class={cn(
-        'data-closed:animate-accordion-up data-open:animate-accordion-down overflow-hidden text-sm',
+        'overflow-hidden text-sm data-closed:animate-accordion-up data-open:animate-accordion-down',
         props.class,
       )}
     >
diff --git a/packages/kit-styled/src/components/alert/alert.tsx b/packages/kit-styled/src/components/alert/alert.tsx
index ddf0e2f87..76546b23f 100644
--- a/packages/kit-styled/src/components/alert/alert.tsx
+++ b/packages/kit-styled/src/components/alert/alert.tsx
@@ -4,7 +4,7 @@ import { cn } from '@qwik-ui/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const alertVariants = cva(
-  'relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  'relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg]:text-foreground [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7',
   {
     variants: {
       look: {
@@ -34,7 +34,7 @@ const Title = component$<PropsOf<'h5'>>(({ ...props }) => {
   return (
     <h5
       {...props}
-      class={cn('mb-1 font-medium leading-none tracking-tight', props.class)}
+      class={cn('mb-1 leading-none font-medium tracking-tight', props.class)}
     >
       <Slot />
     </h5>
diff --git a/packages/kit-styled/src/components/badge/badge.tsx b/packages/kit-styled/src/components/badge/badge.tsx
index eaf809fe4..8932a9c20 100644
--- a/packages/kit-styled/src/components/badge/badge.tsx
+++ b/packages/kit-styled/src/components/badge/badge.tsx
@@ -3,7 +3,7 @@ import { cn } from '@qwik-ui/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const badgeVariants = cva(
-  'inline-flex items-center rounded-sm px-2.5 py-0.5 text-xs font-semibold shadow-sm transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-sm px-2.5 py-0.5 text-xs font-semibold shadow-sm transition-colors focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden',
   {
     variants: {
       look: {
diff --git a/packages/kit-styled/src/components/breadcrumb/breadcrumb.tsx b/packages/kit-styled/src/components/breadcrumb/breadcrumb.tsx
index bafc78b1b..42a0cfb08 100644
--- a/packages/kit-styled/src/components/breadcrumb/breadcrumb.tsx
+++ b/packages/kit-styled/src/components/breadcrumb/breadcrumb.tsx
@@ -16,7 +16,7 @@ const List = component$<PropsOf<'ol'>>((props) => {
     <ol
       {...props}
       class={cn(
-        'flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
+        'flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
         props.class,
       )}
     >
diff --git a/packages/kit-styled/src/components/button/button.tsx b/packages/kit-styled/src/components/button/button.tsx
index 8e9dff1d9..1b88aa971 100644
--- a/packages/kit-styled/src/components/button/button.tsx
+++ b/packages/kit-styled/src/components/button/button.tsx
@@ -3,25 +3,25 @@ import { cn } from '@qwik-ui/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const buttonVariants = cva(
-  'group inline-flex items-center justify-center rounded text-sm font-medium transition-all duration-100 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'group inline-flex items-center justify-center rounded text-sm font-medium transition-all duration-100 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       look: {
         primary:
-          'border-base bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:shadow-base active:press',
+          'border-base bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:press active:shadow-base',
         secondary:
-          'border-base bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 active:shadow-base active:press',
+          'border-base bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 active:press active:shadow-base',
         alert:
-          'border-base bg-alert text-alert-foreground shadow-sm hover:bg-alert/90 active:shadow-base active:press',
+          'border-base bg-alert text-alert-foreground shadow-sm hover:bg-alert/90 active:press active:shadow-base',
         outline:
-          'border bg-background text-foreground shadow-sm hover:bg-accent active:shadow-base active:press',
+          'border bg-background text-foreground shadow-sm hover:bg-accent active:press active:shadow-base',
         ghost: 'text-accent-foreground hover:bg-accent',
         link: 'text-foreground hover:bg-transparent hover:text-foreground/80 hover:underline hover:underline-offset-2',
       },
       size: {
         sm: 'h-8 px-2 py-1.5 text-sm',
         md: 'h-12 px-4 py-3 text-base',
-        lg: ' h-16 px-8 py-4 text-lg',
+        lg: 'h-16 px-8 py-4 text-lg',
         icon: 'h-10 w-10',
       },
     },
diff --git a/packages/kit-styled/src/components/card/card.tsx b/packages/kit-styled/src/components/card/card.tsx
index 4bc3bf277..9ab3093b1 100644
--- a/packages/kit-styled/src/components/card/card.tsx
+++ b/packages/kit-styled/src/components/card/card.tsx
@@ -25,7 +25,7 @@ const Header = component$<PropsOf<'div'>>((props) => {
 
 const Title = component$<PropsOf<'h3'>>((props) => {
   return (
-    <h3 {...props} class={cn('font-medium leading-none tracking-tight', props.class)}>
+    <h3 {...props} class={cn('leading-none font-medium tracking-tight', props.class)}>
       <Slot />
     </h3>
   );
diff --git a/packages/kit-styled/src/components/carousel/carousel.tsx b/packages/kit-styled/src/components/carousel/carousel.tsx
index 9f839c890..66f31527b 100644
--- a/packages/kit-styled/src/components/carousel/carousel.tsx
+++ b/packages/kit-styled/src/components/carousel/carousel.tsx
@@ -173,7 +173,7 @@ const Bullet = component$<PropsOf<typeof HCarousel.Bullet>>((props) => {
     <HCarousel.Bullet
       {...props}
       class={cn(
-        'border-background bg-muted outline-muted hover:border-muted size-5 rounded-full border outline-0 transition-all duration-300 ease-in-out',
+        'size-5 rounded-full border border-background bg-muted outline-0 outline-muted transition-all duration-300 ease-in-out hover:border-muted',
         'data-active:border-primary data-active:bg-primary data-active:text-primary-foreground',
         props.class,
       )}
@@ -205,7 +205,7 @@ const Step = component$<PropsOf<typeof HCarousel.Step>>((props) => {
     <HCarousel.Step
       {...props}
       class={cn(
-        '[&[data-current]_span:first-child]:outline-primary flex items-center gap-1 [&[data-current]_span:first-child]:outline-2 [&[data-current]_span:first-child]:-outline-offset-2',
+        'flex items-center gap-1 [&[data-current]_span:first-child]:outline-2 [&[data-current]_span:first-child]:-outline-offset-2 [&[data-current]_span:first-child]:outline-primary',
         props.class,
       )}
     >
diff --git a/packages/kit-styled/src/components/combobox/combobox.tsx b/packages/kit-styled/src/components/combobox/combobox.tsx
index aeafe604f..582ed4e2a 100644
--- a/packages/kit-styled/src/components/combobox/combobox.tsx
+++ b/packages/kit-styled/src/components/combobox/combobox.tsx
@@ -51,7 +51,7 @@ const Control = component$<PropsOf<typeof HeadlessCombobox.Control>>((props) =>
   return (
     <HeadlessCombobox.Control
       {...props}
-      class={cn('relative flex items-center rounded-base', props.class)}
+      class={cn('rounded-base relative flex items-center', props.class)}
     >
       <Slot />
     </HeadlessCombobox.Control>
@@ -63,7 +63,7 @@ const Input = component$<PropsOf<typeof HeadlessCombobox.Input>>((props) => {
     <HeadlessCombobox.Input
       {...props}
       class={cn(
-        'flex h-12 w-full rounded-base border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        'rounded-base flex h-12 w-full border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )}
     />
@@ -85,7 +85,7 @@ const Popover = component$<PropsOf<typeof HeadlessCombobox.Popover>>((props) =>
   return (
     <HeadlessCombobox.Popover
       {...props}
-      class={cn('w-48 rounded-base border bg-background p-2', props.class)}
+      class={cn('rounded-base w-48 border bg-background p-2', props.class)}
     >
       <Slot />
     </HeadlessCombobox.Popover>
diff --git a/packages/kit-styled/src/components/dropdown/dropdown.tsx b/packages/kit-styled/src/components/dropdown/dropdown.tsx
index e46ce08bd..69a82912c 100644
--- a/packages/kit-styled/src/components/dropdown/dropdown.tsx
+++ b/packages/kit-styled/src/components/dropdown/dropdown.tsx
@@ -32,8 +32,8 @@ const Popover = component$((props: PopoverProps) => {
     <HDropdown.Popover
       {...props}
       class={cn(
-        'bg-popover text-popover-foreground min-w-32 overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95',
+        'min-w-32 overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+        'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95',
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
       )}
@@ -79,7 +79,7 @@ type SeparatorProps = PropsOf<typeof HDropdown.Separator>;
 
 const Separator = component$((props: SeparatorProps) => {
   return (
-    <HDropdown.Separator {...props} class={cn('bg-muted -mx-1 my-1 h-px', props.class)} />
+    <HDropdown.Separator {...props} class={cn('-mx-1 my-1 h-px bg-muted', props.class)} />
   );
 });
 
diff --git a/packages/kit-styled/src/components/input/input.tsx b/packages/kit-styled/src/components/input/input.tsx
index 8bdff0d26..c7c4d4a17 100644
--- a/packages/kit-styled/src/components/input/input.tsx
+++ b/packages/kit-styled/src/components/input/input.tsx
@@ -19,7 +19,7 @@ export const Input = component$<InputProps>(
           value={bindSig ? bindSig.value : value}
           onInput$={[bindSig && $((_, el) => (bindSig.value = el.value)), onInput$]}
           class={cn(
-            'flex h-12 w-full rounded-base border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+            'rounded-base flex h-12 w-full border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
             props.class,
           )}
           id={inputId}
diff --git a/packages/kit-styled/src/components/popover/popover.tsx b/packages/kit-styled/src/components/popover/popover.tsx
index f5cc6f6e8..f5ddf1311 100644
--- a/packages/kit-styled/src/components/popover/popover.tsx
+++ b/packages/kit-styled/src/components/popover/popover.tsx
@@ -18,7 +18,7 @@ const Panel = component$<PropsOf<typeof HeadlessPopover.Panel>>(({ ...props }) =
       {...props}
       class={cn(
         'my-transition w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden',
-        'data-open:animate-in data-closing:animate-out data-closing:fade-out data-open:fade-in data-closing:zoom-out-95 data-open:zoom-in-95',
+        'data-closing:animate-out data-closing:zoom-out-95 data-closing:fade-out data-open:animate-in data-open:zoom-in-95 data-open:fade-in',
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
       )}
diff --git a/packages/kit-styled/src/components/progress/progress.tsx b/packages/kit-styled/src/components/progress/progress.tsx
index e94c2f9a1..fde7f0d35 100644
--- a/packages/kit-styled/src/components/progress/progress.tsx
+++ b/packages/kit-styled/src/components/progress/progress.tsx
@@ -6,12 +6,12 @@ export const Progress = component$<PropsOf<typeof HeadlessProgress.Root>>((props
   return (
     <HeadlessProgress.Root
       class={cn(
-        'bg-muted relative h-4 w-full overflow-hidden rounded-sm border',
+        'relative h-4 w-full overflow-hidden rounded-sm border bg-muted',
         props.class,
       )}
       {...props}
     >
-      <HeadlessProgress.Indicator class="bg-primary h-full w-full flex-1 transition-all" />
+      <HeadlessProgress.Indicator class="h-full w-full flex-1 bg-primary transition-all" />
     </HeadlessProgress.Root>
   );
 });
diff --git a/packages/kit-styled/src/components/select/select.tsx b/packages/kit-styled/src/components/select/select.tsx
index 59e14bdad..fefe56c83 100644
--- a/packages/kit-styled/src/components/select/select.tsx
+++ b/packages/kit-styled/src/components/select/select.tsx
@@ -31,7 +31,7 @@ const Trigger = component$<PropsOf<typeof HeadlessSelect.Trigger>>(({ ...props }
       <HeadlessSelect.Trigger
         {...props}
         class={cn(
-          'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm focus:ring-1 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+          'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm ring-offset-background placeholder:text-muted-foreground focus:ring-1 focus:ring-ring focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
           props.class,
         )}
       >
@@ -50,7 +50,7 @@ const Popover = component$<PropsOf<typeof HeadlessSelect.Popover>>(({ ...props }
       <HeadlessSelect.Popover
         {...props}
         class={cn(
-          'bg-popover text-popover-foreground data-open:animate-in data-closing:animate-out data-closing:fade-out-0 data-open:fade-in-0 data-closing:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-full max-w-60 min-w-32 rounded-md border p-1 shadow-md',
+          'w-full max-w-60 min-w-32 rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-closing:animate-out data-closing:fade-out-0 data-closing:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           props.class,
         )}
       >
@@ -71,7 +71,7 @@ const Item = component$<PropsOf<typeof HeadlessSelect.Item>>(({ ...props }) => {
     <HeadlessSelect.Item
       {...props}
       class={cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
+        'relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
         'data-highlighted:border-base data-highlighted:bg-accent data-highlighted:text-accent-foreground',
         props.class,
       )}
diff --git a/packages/kit-styled/src/components/skeleton/skeleton.tsx b/packages/kit-styled/src/components/skeleton/skeleton.tsx
index 4818f4cf7..1a276c456 100644
--- a/packages/kit-styled/src/components/skeleton/skeleton.tsx
+++ b/packages/kit-styled/src/components/skeleton/skeleton.tsx
@@ -5,7 +5,7 @@ export const Skeleton = component$<PropsOf<'div'>>(({ ...props }) => {
   return (
     <div
       {...props}
-      class={cn('bg-foreground/10 animate-pulse rounded-sm', props.class)}
+      class={cn('animate-pulse rounded-sm bg-foreground/10', props.class)}
     />
   );
 });
diff --git a/packages/kit-styled/src/components/tabs/tabs.tsx b/packages/kit-styled/src/components/tabs/tabs.tsx
index 0db4b3206..0270d2fdb 100644
--- a/packages/kit-styled/src/components/tabs/tabs.tsx
+++ b/packages/kit-styled/src/components/tabs/tabs.tsx
@@ -16,7 +16,7 @@ const List = component$<PropsOf<typeof HeadlessTabs.List>>((props) => {
     <HeadlessTabs.List
       {...props}
       class={cn(
-        'border-base bg-muted text-muted-foreground inline-flex items-center justify-center rounded-lg p-1 shadow-sm',
+        'inline-flex items-center justify-center rounded-lg border-base bg-muted p-1 text-muted-foreground shadow-sm',
         props.class,
       )}
     >
@@ -30,7 +30,7 @@ const Tab = component$<PropsOf<typeof HeadlessTabs.Tab>>((props) => {
     <HeadlessTabs.Tab
       {...props}
       class={cn(
-        'ring-offset-background focus-visible:ring-ring data-[state=selected]:border-base data-[state=selected]:bg-background data-[state=selected]:text-foreground inline-flex items-center justify-center rounded-md px-3 py-2 font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=selected]:shadow-inner',
+        'inline-flex items-center justify-center rounded-md px-3 py-2 font-medium whitespace-nowrap ring-offset-background transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=selected]:border-base data-[state=selected]:bg-background data-[state=selected]:text-foreground data-[state=selected]:shadow-inner',
         props.class,
       )}
     >
@@ -44,7 +44,7 @@ const Panel = component$<PropsOf<typeof HeadlessTabs.Panel>>((props) => {
     <HeadlessTabs.Panel
       {...props}
       class={cn(
-        'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',
+        'mt-2 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden',
         props.class,
       )}
     >
diff --git a/packages/kit-styled/src/components/textarea/textarea.tsx b/packages/kit-styled/src/components/textarea/textarea.tsx
index 9cc8364aa..6c906382e 100644
--- a/packages/kit-styled/src/components/textarea/textarea.tsx
+++ b/packages/kit-styled/src/components/textarea/textarea.tsx
@@ -16,7 +16,7 @@ export const Textarea = component$<TextareaProps>(
           value={bindSig ? bindSig.value : value}
           onInput$={[bindSig && $((_, el) => (bindSig.value = el.value)), onInput$]}
           class={cn(
-            '[&::-webkit-scrollbar-track]:bg-blue border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+            '[&::-webkit-scrollbar-track]:bg-blue flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
             props.class,
           )}
           id={textareaId}
diff --git a/packages/kit-styled/src/components/toggle/toggle.tsx b/packages/kit-styled/src/components/toggle/toggle.tsx
index 84c1fa904..cf644ed54 100644
--- a/packages/kit-styled/src/components/toggle/toggle.tsx
+++ b/packages/kit-styled/src/components/toggle/toggle.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { Toggle as HeadlessToggle } from '@qwik-ui/headless';
 
 export const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-primary aria-pressed:text-primary-foreground',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-primary aria-pressed:text-primary-foreground',
   {
     variants: {
       look: {
diff --git a/packages/kit-styled/src/components/tooltip/tooltip.tsx b/packages/kit-styled/src/components/tooltip/tooltip.tsx
index f2ebb5649..4d8a59961 100644
--- a/packages/kit-styled/src/components/tooltip/tooltip.tsx
+++ b/packages/kit-styled/src/components/tooltip/tooltip.tsx
@@ -17,7 +17,7 @@ const Panel = component$<PropsOf<typeof HeadlessTooltip.Panel>>(({ ...props }) =
     <HeadlessTooltip.Panel
       {...props}
       class={cn(
-        'w-fit text-balance rounded-md border bg-background px-3 py-1.5 text-xs text-foreground shadow animate-in fade-in-0 zoom-in-95',
+        'w-fit animate-in rounded-md border bg-background px-3 py-1.5 text-xs text-balance text-foreground shadow-sm fade-in-0 zoom-in-95',
         'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,

From 653a313ebee8f0068b3be97afe14c8b582bf0b36 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Fri, 15 Aug 2025 10:43:42 +0200
Subject: [PATCH 24/42] chore: update components mdx

---
 .../routes/docs/styled/accordion/index.mdx    |   2 +-
 .../src/routes/docs/styled/alert/index.mdx    |   4 +-
 .../src/routes/docs/styled/badge/index.mdx    |   2 +-
 .../routes/docs/styled/breadcrumb/index.mdx   |   2 +-
 .../src/routes/docs/styled/button/index.mdx   |  12 +-
 .../src/routes/docs/styled/card/index.mdx     |   2 +-
 .../src/routes/docs/styled/carousel/index.mdx |  16 +-
 .../src/routes/docs/styled/combobox/index.mdx |  24 ++-
 .../src/routes/docs/styled/dropdown/index.mdx | 140 ++++++++++++++++++
 .../src/routes/docs/styled/input/index.mdx    |   2 +-
 .../src/routes/docs/styled/popover/index.mdx  |   2 +-
 .../src/routes/docs/styled/progress/index.mdx |  11 +-
 .../src/routes/docs/styled/select/index.mdx   |  30 +---
 .../src/routes/docs/styled/skeleton/index.mdx |   5 +-
 .../src/routes/docs/styled/tabs/index.mdx     |   4 +-
 .../src/routes/docs/styled/textarea/index.mdx |   2 +-
 .../src/routes/docs/styled/toggle/index.mdx   |   2 +-
 .../src/routes/docs/styled/tooltip/index.mdx  |   3 +-
 18 files changed, 205 insertions(+), 60 deletions(-)

diff --git a/apps/website/src/routes/docs/styled/accordion/index.mdx b/apps/website/src/routes/docs/styled/accordion/index.mdx
index 025ece769..82be20998 100644
--- a/apps/website/src/routes/docs/styled/accordion/index.mdx
+++ b/apps/website/src/routes/docs/styled/accordion/index.mdx
@@ -76,7 +76,7 @@ const Content = component$<PropsOf<typeof HeadlessAccordion.Content>>((props) =>
         props.class,
       )}
     >
-      <div class="pb-4 pt-0">
+      <div class="pt-0 pb-4">
         <Slot />
       </div>
     </HeadlessAccordion.Content>
diff --git a/apps/website/src/routes/docs/styled/alert/index.mdx b/apps/website/src/routes/docs/styled/alert/index.mdx
index 020241c78..025a6976a 100644
--- a/apps/website/src/routes/docs/styled/alert/index.mdx
+++ b/apps/website/src/routes/docs/styled/alert/index.mdx
@@ -29,7 +29,7 @@ import { cn } from '@qwik-ui/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const alertVariants = cva(
-  'relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  'relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg]:text-foreground [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7',
   {
     variants: {
       look: {
@@ -59,7 +59,7 @@ const Title = component$<PropsOf<'h5'>>(({ ...props }) => {
   return (
     <h5
       {...props}
-      class={cn('mb-1 font-medium leading-none tracking-tight', props.class)}
+      class={cn('mb-1 leading-none font-medium tracking-tight', props.class)}
     >
       <Slot />
     </h5>
diff --git a/apps/website/src/routes/docs/styled/badge/index.mdx b/apps/website/src/routes/docs/styled/badge/index.mdx
index 0aed2da99..faa2c3fd2 100644
--- a/apps/website/src/routes/docs/styled/badge/index.mdx
+++ b/apps/website/src/routes/docs/styled/badge/index.mdx
@@ -26,7 +26,7 @@ import { cn } from '@qwik-ui/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const badgeVariants = cva(
-  'inline-flex items-center rounded-sm px-2.5 py-0.5 text-xs font-semibold shadow-sm transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-sm px-2.5 py-0.5 text-xs font-semibold shadow-sm transition-colors focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden',
   {
     variants: {
       look: {
diff --git a/apps/website/src/routes/docs/styled/breadcrumb/index.mdx b/apps/website/src/routes/docs/styled/breadcrumb/index.mdx
index 82a62e3e0..bd80c7db3 100644
--- a/apps/website/src/routes/docs/styled/breadcrumb/index.mdx
+++ b/apps/website/src/routes/docs/styled/breadcrumb/index.mdx
@@ -40,7 +40,7 @@ const List = component$<PropsOf<'ol'>>((props) => {
     <ol
       {...props}
       class={cn(
-        ' flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
+        'flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
         props.class,
       )}
     >
diff --git a/apps/website/src/routes/docs/styled/button/index.mdx b/apps/website/src/routes/docs/styled/button/index.mdx
index 686341269..3d67fcaa7 100644
--- a/apps/website/src/routes/docs/styled/button/index.mdx
+++ b/apps/website/src/routes/docs/styled/button/index.mdx
@@ -26,25 +26,25 @@ import { cn } from '@qwik-ui/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-sm text-sm font-medium transition-all duration-100 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'group inline-flex items-center justify-center rounded text-sm font-medium transition-all duration-100 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       look: {
         primary:
-          'border-base bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:shadow-base active:press',
+          'border-base bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:press active:shadow-base',
         secondary:
-          'border-base bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 active:shadow-base active:press',
+          'border-base bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 active:press active:shadow-base',
         alert:
-          'border-base bg-alert text-alert-foreground shadow-sm hover:bg-alert/90 active:shadow-base active:press',
+          'border-base bg-alert text-alert-foreground shadow-sm hover:bg-alert/90 active:press active:shadow-base',
         outline:
-          'border bg-background text-foreground shadow-sm hover:bg-accent active:shadow-base active:press',
+          'border bg-background text-foreground shadow-sm hover:bg-accent active:press active:shadow-base',
         ghost: 'text-accent-foreground hover:bg-accent',
         link: 'text-foreground hover:bg-transparent hover:text-foreground/80 hover:underline hover:underline-offset-2',
       },
       size: {
         sm: 'h-8 px-2 py-1.5 text-sm',
         md: 'h-12 px-4 py-3 text-base',
-        lg: ' h-16 px-8 py-4 text-lg',
+        lg: 'h-16 px-8 py-4 text-lg',
         icon: 'h-10 w-10',
       },
     },
diff --git a/apps/website/src/routes/docs/styled/card/index.mdx b/apps/website/src/routes/docs/styled/card/index.mdx
index e7b35a35a..c52b835f7 100644
--- a/apps/website/src/routes/docs/styled/card/index.mdx
+++ b/apps/website/src/routes/docs/styled/card/index.mdx
@@ -48,7 +48,7 @@ const Header = component$<PropsOf<'div'>>((props) => {
 
 const Title = component$<PropsOf<'h3'>>((props) => {
   return (
-    <h3 {...props} class={cn('font-medium leading-none tracking-tight', props.class)}>
+    <h3 {...props} class={cn('leading-none font-medium tracking-tight', props.class)}>
       <Slot />
     </h3>
   );
diff --git a/apps/website/src/routes/docs/styled/carousel/index.mdx b/apps/website/src/routes/docs/styled/carousel/index.mdx
index b55f23db7..fb0f04e12 100644
--- a/apps/website/src/routes/docs/styled/carousel/index.mdx
+++ b/apps/website/src/routes/docs/styled/carousel/index.mdx
@@ -115,8 +115,8 @@ const Previous = component$<
       class={cn(
         'absolute',
         context.orientation === 'horizontal'
-          ? '-left-16 top-1/2 -translate-y-1/2'
-          : '-top-16 right-1/2 translate-x-1/2',
+          ? 'top-1/2 -left-12 -translate-y-1/2'
+          : '-top-12 right-1/2 translate-x-1/2',
       )}
     >
       <HCarousel.Previous
@@ -151,8 +151,8 @@ const Next = component$<
       class={cn(
         'absolute',
         context.orientation === 'horizontal'
-          ? '-right-16 top-1/2 -translate-y-1/2'
-          : '-bottom-16 right-1/2 translate-x-1/2',
+          ? 'top-1/2 -right-12 -translate-y-1/2'
+          : 'right-1/2 -bottom-12 translate-x-1/2',
       )}
     >
       {/* moves content to the right on hover */}
@@ -179,7 +179,7 @@ const Next = component$<
   );
 });
 
-const Pagination = component$(({ ...props }: PropsOf<typeof HCarousel.Pagination>) => {
+const Pagination = component$<PropsOf<typeof HCarousel.Pagination>>(({ ...props }) => {
   return (
     <HCarousel.Pagination
       {...props}
@@ -190,7 +190,7 @@ const Pagination = component$(({ ...props }: PropsOf<typeof HCarousel.Pagination
   );
 });
 
-const Bullet = component$((props: PropsOf<typeof HCarousel.Bullet>) => {
+const Bullet = component$<PropsOf<typeof HCarousel.Bullet>>((props) => {
   return (
     <HCarousel.Bullet
       {...props}
@@ -203,7 +203,7 @@ const Bullet = component$((props: PropsOf<typeof HCarousel.Bullet>) => {
   );
 });
 
-const Title = component$((props: PropsOf<typeof HCarousel.Title>) => {
+const Title = component$<PropsOf<typeof HCarousel.Title>>((props) => {
   return (
     <HCarousel.Title {...props}>
       <Slot />
@@ -222,7 +222,7 @@ const Stepper = (props: PropsOf<typeof HCarousel.Stepper>) => {
   );
 };
 
-const Step = component$((props: PropsOf<typeof HCarousel.Step>) => {
+const Step = component$<PropsOf<typeof HCarousel.Step>>((props) => {
   return (
     <HCarousel.Step
       {...props}
diff --git a/apps/website/src/routes/docs/styled/combobox/index.mdx b/apps/website/src/routes/docs/styled/combobox/index.mdx
index bf11e60d5..5daed82b4 100644
--- a/apps/website/src/routes/docs/styled/combobox/index.mdx
+++ b/apps/website/src/routes/docs/styled/combobox/index.mdx
@@ -76,7 +76,7 @@ const Control = component$<PropsOf<typeof HeadlessCombobox.Control>>((props) =>
   return (
     <HeadlessCombobox.Control
       {...props}
-      class={cn('relative flex items-center rounded-base', props.class)}
+      class={cn('rounded-base relative flex items-center', props.class)}
     >
       <Slot />
     </HeadlessCombobox.Control>
@@ -88,7 +88,7 @@ const Input = component$<PropsOf<typeof HeadlessCombobox.Input>>((props) => {
     <HeadlessCombobox.Input
       {...props}
       class={cn(
-        'flex h-10 w-full rounded-md border border-input py-3 pl-2 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        'rounded-base flex h-12 w-full border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )}
     />
@@ -110,7 +110,7 @@ const Popover = component$<PropsOf<typeof HeadlessCombobox.Popover>>((props) =>
   return (
     <HeadlessCombobox.Popover
       {...props}
-      class={cn('w-48 rounded-base border p-2', props.class)}
+      class={cn('rounded-base w-48 border bg-background p-2', props.class)}
     >
       <Slot />
     </HeadlessCombobox.Popover>
@@ -131,6 +131,22 @@ const Item = component$<PropsOf<typeof HeadlessCombobox.Item>>(({ ...props }) =>
   );
 });
 
+const Inline = component$<PropsOf<typeof HeadlessCombobox.Inline>>(({ ...props }) => {
+  return (
+    <HeadlessCombobox.Inline {...props} class={cn('', props.class)}>
+      <Slot />
+    </HeadlessCombobox.Inline>
+  );
+});
+
+const Empty = component$<PropsOf<typeof HeadlessCombobox.Empty>>(({ ...props }) => {
+  return (
+    <HeadlessCombobox.Empty {...props} class={cn('', props.class)}>
+      <Slot />
+    </HeadlessCombobox.Empty>
+  );
+});
+
 export const Combobox = {
   Root,
   Label,
@@ -141,5 +157,7 @@ export const Combobox = {
   Item,
   ItemLabel,
   ItemIndicator,
+  Inline,
+  Empty,
 };
 ```
diff --git a/apps/website/src/routes/docs/styled/dropdown/index.mdx b/apps/website/src/routes/docs/styled/dropdown/index.mdx
index 44d58f2c5..643c7e2ff 100644
--- a/apps/website/src/routes/docs/styled/dropdown/index.mdx
+++ b/apps/website/src/routes/docs/styled/dropdown/index.mdx
@@ -13,3 +13,143 @@ import { ShowcaseHero } from './showcase-components';
 A vertically stacked set of interactive headings that each reveal a section of content.
 
 <ShowcaseHero />
+
+
+## Installation
+
+### Run the following cli command or copy/paste the component code into your project
+
+```tsx
+import { component$, PropsOf, Slot } from '@builder.io/qwik';
+import { Dropdown as HDropdown } from '@qwik-ui/headless';
+import { cn } from '@qwik-ui/utils';
+import { buttonVariants } from '../button/button';
+import { VariantProps } from 'class-variance-authority';
+
+type RootProps = PropsOf<typeof HDropdown.Root>;
+
+const Root = (props: RootProps) => {
+  return (
+    <HDropdown.Root dropdownItemComponent={Item} {...props}>
+      {props.children}
+    </HDropdown.Root>
+  );
+};
+
+type TriggerProps = PropsOf<typeof HDropdown.Trigger> &
+  VariantProps<typeof buttonVariants>;
+
+const Trigger = component$<TriggerProps>(({ size, look, ...props }) => {
+  return (
+    <HDropdown.Trigger {...props} class={cn(buttonVariants({ size, look }), props.class)}>
+      <Slot />
+    </HDropdown.Trigger>
+  );
+});
+
+type PopoverProps = PropsOf<typeof HDropdown.Popover>;
+
+const Popover = component$((props: PopoverProps) => {
+  return (
+    <HDropdown.Popover
+      {...props}
+      class={cn(
+        'min-w-32 overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+        'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95',
+        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )}
+    >
+      <Slot />
+    </HDropdown.Popover>
+  );
+});
+
+type ItemProps = PropsOf<typeof HDropdown.Item> & {
+  inset?: boolean;
+};
+
+const Item = component$(({ inset, ...props }: ItemProps) => {
+  return (
+    <HDropdown.Item
+      {...props}
+      class={cn(
+        'relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors select-none',
+        'focus:bg-accent focus:text-accent-foreground',
+        'data-disabled:pointer-events-none data-disabled:opacity-50',
+        '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+        inset && 'pl-8',
+        props.class,
+      )}
+    >
+      <Slot />
+    </HDropdown.Item>
+  );
+});
+
+type ItemIndicatorProps = PropsOf<typeof HDropdown.ItemIndicator>;
+
+const ItemIndicator = component$((props: ItemIndicatorProps) => {
+  return (
+    <HDropdown.ItemIndicator {...props}>
+      <Slot />
+    </HDropdown.ItemIndicator>
+  );
+});
+
+type SeparatorProps = PropsOf<typeof HDropdown.Separator>;
+
+const Separator = component$((props: SeparatorProps) => {
+  return (
+    <HDropdown.Separator {...props} class={cn('-mx-1 my-1 h-px bg-muted', props.class)} />
+  );
+});
+
+type GroupProps = PropsOf<typeof HDropdown.Group>;
+
+export const Group = component$((props: GroupProps) => {
+  return (
+    <HDropdown.Group {...props}>
+      <Slot />
+    </HDropdown.Group>
+  );
+});
+
+type GroupLabelProps = PropsOf<typeof HDropdown.GroupLabel> & {
+  inset?: boolean;
+};
+
+const GroupLabel = component$(({ inset, ...props }: GroupLabelProps) => {
+  return (
+    <HDropdown.GroupLabel
+      {...props}
+      class={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)}
+    >
+      <Slot />
+    </HDropdown.GroupLabel>
+  );
+});
+
+const Shortcut = component$((props: PropsOf<'span'>) => {
+  return (
+    <span
+      {...props}
+      class={cn('ml-auto text-xs tracking-widest opacity-60', props.class)}
+    >
+      <Slot />
+    </span>
+  );
+});
+
+export const Dropdown = {
+  Root,
+  Trigger,
+  Popover,
+  Separator,
+  Item,
+  ItemIndicator,
+  Group,
+  GroupLabel,
+  Shortcut,
+};
+```
\ No newline at end of file
diff --git a/apps/website/src/routes/docs/styled/input/index.mdx b/apps/website/src/routes/docs/styled/input/index.mdx
index 7d819eb55..0c3988eb3 100644
--- a/apps/website/src/routes/docs/styled/input/index.mdx
+++ b/apps/website/src/routes/docs/styled/input/index.mdx
@@ -44,7 +44,7 @@ export const Input = component$<InputProps>(
           value={bindSig ? bindSig.value : value}
           onInput$={[bindSig && $((_, el) => (bindSig.value = el.value)), onInput$]}
           class={cn(
-            'flex h-12 w-full rounded-base border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+            'rounded-base flex h-12 w-full border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
             props.class,
           )}
           id={inputId}
diff --git a/apps/website/src/routes/docs/styled/popover/index.mdx b/apps/website/src/routes/docs/styled/popover/index.mdx
index 98a0222d6..d12ddd7bb 100644
--- a/apps/website/src/routes/docs/styled/popover/index.mdx
+++ b/apps/website/src/routes/docs/styled/popover/index.mdx
@@ -41,7 +41,7 @@ const Panel = component$<PropsOf<typeof HeadlessPopover.Panel>>(({ ...props }) =
       {...props}
       class={cn(
         'my-transition w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden',
-        'data-open:animate-in data-closing:animate-out data-closing:fade-out data-open:fade-in data-closing:zoom-out-95 data-open:zoom-in-95',
+        'data-closing:animate-out data-closing:zoom-out-95 data-closing:fade-out data-open:animate-in data-open:zoom-in-95 data-open:fade-in',
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
       )}
diff --git a/apps/website/src/routes/docs/styled/progress/index.mdx b/apps/website/src/routes/docs/styled/progress/index.mdx
index 003140e3c..ecac1b97f 100644
--- a/apps/website/src/routes/docs/styled/progress/index.mdx
+++ b/apps/website/src/routes/docs/styled/progress/index.mdx
@@ -30,12 +30,13 @@ import { Progress as HeadlessProgress } from '@qwik-ui/headless';
 export const Progress = component$<PropsOf<typeof HeadlessProgress.Root>>((props) => {
   return (
     <HeadlessProgress.Root
-      class={cn('relative h-4 w-full overflow-hidden rounded-sm bg-secondary', props?.class)}
+      class={cn(
+        'relative h-4 w-full overflow-hidden rounded-sm border bg-muted',
+        props.class,
+      )}
+      {...props}
     >
-      <HeadlessProgress.Indicator
-        class="h-full w-full flex-1 bg-primary transition-all"
-        style={{ transform: `translateX(-${100 - (props.value || 0)}%)` }}
-      />
+      <HeadlessProgress.Indicator class="h-full w-full flex-1 bg-primary transition-all" />
     </HeadlessProgress.Root>
   );
 });
diff --git a/apps/website/src/routes/docs/styled/select/index.mdx b/apps/website/src/routes/docs/styled/select/index.mdx
index eb1498a61..c5158e44e 100644
--- a/apps/website/src/routes/docs/styled/select/index.mdx
+++ b/apps/website/src/routes/docs/styled/select/index.mdx
@@ -33,7 +33,7 @@ const Root = (props: PropsOf<typeof HeadlessSelect.Root>) => (
     {...props}
     selectItemComponent={Item}
     selectItemLabelComponent={ItemLabel}
-    selectLabelComponent={Label}
+    selectErrorMessageComponent={ErrorMessage}
   />
 );
 
@@ -56,7 +56,7 @@ const Trigger = component$<PropsOf<typeof HeadlessSelect.Trigger>>(({ ...props }
       <HeadlessSelect.Trigger
         {...props}
         class={cn(
-          'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+          'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm ring-offset-background placeholder:text-muted-foreground focus:ring-1 focus:ring-ring focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
           props.class,
         )}
       >
@@ -75,8 +75,7 @@ const Popover = component$<PropsOf<typeof HeadlessSelect.Popover>>(({ ...props }
       <HeadlessSelect.Popover
         {...props}
         class={cn(
-          'w-full max-w-60 data-open:animate-in data-closing:animate-out data-closing:fade-out-0 data-open:fade-in-0 data-closing:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-          // 'overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md',
+          'w-full max-w-60 min-w-32 rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-closing:animate-out data-closing:fade-out-0 data-closing:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           props.class,
         )}
       >
@@ -86,33 +85,18 @@ const Popover = component$<PropsOf<typeof HeadlessSelect.Popover>>(({ ...props }
   );
 });
 
-type ListboxProps = PropsOf<typeof HeadlessSelect.Listbox>;
-const Listbox = component$<ListboxProps>(({ ...props }) => {
-  return (
-    <>
-      <HeadlessSelect.Listbox
-        {...props}
-        class={cn(
-          'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
-          props.class,
-        )}
-      >
-        <Slot />
-      </HeadlessSelect.Listbox>
-    </>
-  );
-});
-
 const Group = HeadlessSelect.Group;
 
 const GroupLabel = HeadlessSelect.GroupLabel;
 
+const ErrorMessage = HeadlessSelect.ErrorMessage;
+
 const Item = component$<PropsOf<typeof HeadlessSelect.Item>>(({ ...props }) => {
   return (
     <HeadlessSelect.Item
       {...props}
       class={cn(
-        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        'relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
         'data-highlighted:border-base data-highlighted:bg-accent data-highlighted:text-accent-foreground',
         props.class,
       )}
@@ -148,11 +132,11 @@ export const Select = {
   Trigger,
   DisplayValue,
   Popover,
-  Listbox,
   Group,
   GroupLabel,
   Item,
   ItemIndicator,
   ItemLabel,
+  ErrorMessage,
 };
 ```
diff --git a/apps/website/src/routes/docs/styled/skeleton/index.mdx b/apps/website/src/routes/docs/styled/skeleton/index.mdx
index 1514c5cb5..db9897111 100644
--- a/apps/website/src/routes/docs/styled/skeleton/index.mdx
+++ b/apps/website/src/routes/docs/styled/skeleton/index.mdx
@@ -28,7 +28,10 @@ import { cn } from '@qwik-ui/utils';
 
 export const Skeleton = component$<PropsOf<'div'>>(({ ...props }) => {
   return (
-    <div {...props} class={cn('animate-pulse rounded-sm bg-foreground/10', props.class)} />
+    <div
+      {...props}
+      class={cn('animate-pulse rounded-sm bg-foreground/10', props.class)}
+    />
   );
 });
 ```
diff --git a/apps/website/src/routes/docs/styled/tabs/index.mdx b/apps/website/src/routes/docs/styled/tabs/index.mdx
index 1268f298f..e1724bd6c 100644
--- a/apps/website/src/routes/docs/styled/tabs/index.mdx
+++ b/apps/website/src/routes/docs/styled/tabs/index.mdx
@@ -55,7 +55,7 @@ const Tab = component$<PropsOf<typeof HeadlessTabs.Tab>>((props) => {
     <HeadlessTabs.Tab
       {...props}
       class={cn(
-        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=selected]:border-base data-[state=selected]:bg-background data-[state=selected]:text-foreground data-[state=selected]:shadow-inner',
+        'inline-flex items-center justify-center rounded-md px-3 py-2 font-medium whitespace-nowrap ring-offset-background transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=selected]:border-base data-[state=selected]:bg-background data-[state=selected]:text-foreground data-[state=selected]:shadow-inner',
         props.class,
       )}
     >
@@ -69,7 +69,7 @@ const Panel = component$<PropsOf<typeof HeadlessTabs.Panel>>((props) => {
     <HeadlessTabs.Panel
       {...props}
       class={cn(
-        'mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'mt-2 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden',
         props.class,
       )}
     >
diff --git a/apps/website/src/routes/docs/styled/textarea/index.mdx b/apps/website/src/routes/docs/styled/textarea/index.mdx
index 670624401..09cfffc83 100644
--- a/apps/website/src/routes/docs/styled/textarea/index.mdx
+++ b/apps/website/src/routes/docs/styled/textarea/index.mdx
@@ -41,7 +41,7 @@ export const Textarea = component$<TextareaProps>(
           value={bindSig ? bindSig.value : value}
           onInput$={[bindSig && $((_, el) => (bindSig.value = el.value)), onInput$]}
           class={cn(
-            '[&::-webkit-scrollbar-track]:bg-blue flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+            '[&::-webkit-scrollbar-track]:bg-blue flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
             props.class,
           )}
           id={textareaId}
diff --git a/apps/website/src/routes/docs/styled/toggle/index.mdx b/apps/website/src/routes/docs/styled/toggle/index.mdx
index 7fec841bd..5d3b35d53 100644
--- a/apps/website/src/routes/docs/styled/toggle/index.mdx
+++ b/apps/website/src/routes/docs/styled/toggle/index.mdx
@@ -31,7 +31,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { Toggle as HeadlessToggle } from '@qwik-ui/headless';
 
 export const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-primary aria-pressed:text-primary-foreground',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-primary aria-pressed:text-primary-foreground',
   {
     variants: {
       look: {
diff --git a/apps/website/src/routes/docs/styled/tooltip/index.mdx b/apps/website/src/routes/docs/styled/tooltip/index.mdx
index d50d4ca87..098848df0 100644
--- a/apps/website/src/routes/docs/styled/tooltip/index.mdx
+++ b/apps/website/src/routes/docs/styled/tooltip/index.mdx
@@ -42,7 +42,7 @@ const Panel = component$<PropsOf<typeof HeadlessTooltip.Panel>>(({ ...props }) =
     <HeadlessTooltip.Panel
       {...props}
       class={cn(
-        'w-fit text-balance rounded-md border bg-background px-3 py-1.5 text-xs text-foreground shadow animate-in fade-in-0 zoom-in-95',
+        'w-fit animate-in rounded-md border bg-background px-3 py-1.5 text-xs text-balance text-foreground shadow-sm fade-in-0 zoom-in-95',
         'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
@@ -58,7 +58,6 @@ export const Tooltip = {
   Trigger,
   Panel,
 };
-
 ```
 
 ## Usage

From 56b254ae4a03e36d84d1db84cd5d3af97b7adc81 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Fri, 15 Aug 2025 10:48:52 +0200
Subject: [PATCH 25/42] chore: reset action.yml

---
 .github/actions/test/action.yml | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/.github/actions/test/action.yml b/.github/actions/test/action.yml
index c88cfcb60..128810361 100644
--- a/.github/actions/test/action.yml
+++ b/.github/actions/test/action.yml
@@ -16,14 +16,15 @@ runs:
   steps:
     - name: Lint
       shell: bash
-      run: npx nx run-many -t lint --exclude website  --base=last-release
+      run: npx nx run-many -t lint --exclude website # --base=last-release  <- add that back after fix
+
     - name: Build packages
       shell: bash
-      run: npx nx run-many -t build --parallel=false --exclude website --skip-nx-cache --base=last-release
+      run: npx nx run-many -t build --parallel=false --exclude website --skip-nx-cache # --base=last-release  <- add that back
 
     - name: Test all except headless
       shell: bash
-      run: npx nx run-many -t test --base=last-release
+      run: npx nx run-many -t test # --base=last-release <- add that back
       env:
         NODE_OPTIONS: --experimental-vm-modules
 

From 87c4e6f31a9cd7ea98c4495b56a4f75b9ae5f0fe Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Fri, 15 Aug 2025 10:51:25 +0200
Subject: [PATCH 26/42] chore: remove tailwind.extend_template

---
 .../src/templates/tailwind.extend._template   | 82 -------------------
 1 file changed, 82 deletions(-)
 delete mode 100644 packages/kit-styled/src/templates/tailwind.extend._template

diff --git a/packages/kit-styled/src/templates/tailwind.extend._template b/packages/kit-styled/src/templates/tailwind.extend._template
deleted file mode 100644
index 190fb24dc..000000000
--- a/packages/kit-styled/src/templates/tailwind.extend._template
+++ /dev/null
@@ -1,82 +0,0 @@
-colors: {
-  border: 'oklch(from var(--border) l c h)',
-  input: 'oklch(from var(--input) l c h)',
-  ring: 'oklch(from var(--ring) l c h)',
-  background: 'oklch(from var(--background) l c h)',
-  foreground: 'oklch(from var(--foreground) l c h)',
-  primary: {
-    DEFAULT: 'oklch(from var(--primary) l c h)',
-    foreground: 'oklch(from var(--primary-foreground) l c h)',
-  },
-  secondary: {
-    DEFAULT: 'oklch(from var(--secondary) l c h)',
-    foreground: 'oklch(from var(--secondary-foreground) l c h)',
-  },
-  alert: {
-    DEFAULT: 'oklch(from var(--alert) l c h)',
-    foreground: 'oklch(from var(--alert-foreground) l c h)',
-  },
-  muted: {
-    DEFAULT: 'oklch(from var(--muted) l c h)',
-    foreground: 'oklch(from var(--muted-foreground) l c h)',
-  },
-  accent: {
-    DEFAULT: 'oklch(from var(--accent) l c h)',
-    foreground: 'oklch(from var(--accent-foreground) l c h)',
-  },
-  card: {
-    DEFAULT: 'oklch(from var(--card) l c h)',
-    foreground: 'oklch(from var(--card-foreground) l c h)',
-  },
-  popover: {
-    DEFAULT: 'oklch(from var(--popover) l c h)',
-    foreground: 'oklch(from var(--popover-foreground) l c h)',
-  },
-},
-borderRadius: {
-  base: 'var(--border-radius)',
-  sm: 'calc(var(--border-radius) + 0.125rem)',
-  DEFAULT: 'calc(var(--border-radius) + 0.25rem)',
-  md: 'calc(var(--border-radius) + 0.375rem)',
-  lg: 'calc(var(--border-radius) + 0.5rem)',
-  xl: 'calc(var(--border-radius) + 0.75rem)',
-  '2xl': 'calc(var(--border-radius) + 1rem)',
-  '3xl': 'calc(var(--border-radius) + 1.5rem)',
-},
-borderWidth: {
-  base: 'var(--border-width)',
-  DEFAULT: 'calc(var(--border-width) + 1px)',
-  2: 'calc(var(--border-width) + 2px)',
-  4: 'calc(var(--border-width) + 4px)',
-  8: 'calc(var(--border-width) + 8px)',
-},
-boxShadow: {
-  base: 'var(--shadow-base)',
-  sm: 'var(--shadow-sm)',
-  DEFAULT: 'var(--shadow)',
-  md: 'var(--shadow-md)',
-  lg: 'var(--shadow-lg)',
-  xl: 'var(--shadow-xl)',
-  '2xl': 'var(--shadow-2xl)',
-  inner: 'var(--shadow-inner)',
-},
-strokeWidth: {
-  0: '0',
-  base: 'var(--stroke-width)',
-  1: 'calc(var(--stroke-width) + 1px)',
-  2: 'calc(var(--stroke-width) + 2px)',
-},
-animation: {
-  'accordion-up': 'collapsible-up 0.2s ease-out 0s 1 normal forwards',
-  'accordion-down': 'collapsible-down 0.2s ease-out 0s 1 normal forwards',
-},
-keyframes: {
-  'collapsible-down': {
-    from: { height: '0' },
-    to: { height: 'var(--qwikui-collapsible-content-height)' },
-  },
-  'collapsible-up': {
-    from: { height: 'var(--qwikui-collapsible-content-height)' },
-    to: { height: '0' },
-  },
-},
\ No newline at end of file

From 493e46eae431343350d92a702d802d3906799043 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Fri, 15 Aug 2025 10:54:09 +0200
Subject: [PATCH 27/42] test: update setup-tailwind-generator.spec

---
 .../setup-tailwind-generator.spec.ts          | 10 +++---
 packages/kit-styled/src/templates/global.css  | 32 +++++++++----------
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
index 9779d3b00..af62c4f0a 100644
--- a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
+++ b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
@@ -73,8 +73,8 @@ html {
           --ring: var(--color-slate-900);
           --border-width: 0px;
           --border-radius: 0rem;
-          --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-          --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+          --shadow-sm:
+            0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
           --shadow-md:
             0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
           --shadow-lg:
@@ -107,8 +107,8 @@ html {
           --ring: var(--color-slate-300);
           --border-width: 0px;
           --border-radius: 0rem;
-          --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-          --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+          --shadow-sm:
+            0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
           --shadow-md:
             0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
           --shadow-lg:
@@ -278,7 +278,6 @@ html {
           --border-width: 2px;
           --border-radius: 1rem;
           --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-          --shadow: 5px 5px rgba(0, 0, 0, 1);
           --shadow-md: 6px 6px rgba(0, 0, 0, 1);
           --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
           --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
@@ -308,7 +307,6 @@ html {
           --border-width: 3px;
           --border-radius: 1rem;
           --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-          --shadow: 5px 5px rgba(0, 0, 0, 1);
           --shadow-md: 6px 6px rgba(0, 0, 0, 1);
           --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
           --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
diff --git a/packages/kit-styled/src/templates/global.css b/packages/kit-styled/src/templates/global.css
index 9dacbd9fe..d4f8937e4 100644
--- a/packages/kit-styled/src/templates/global.css
+++ b/packages/kit-styled/src/templates/global.css
@@ -30,8 +30,9 @@
     --border-width: 0px;
     --border-radius: 0;
     --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+    --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
@@ -63,8 +64,9 @@
     --border-width: 0px;
     --border-radius: 0;
     --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+    --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
@@ -101,6 +103,7 @@
     --radius-2xl: calc(var(--border-radius) + 1rem);
     --radius-3xl: calc(var(--border-radius) + 1.5rem);
     --shadow-base: var(--shadow-base);
+    --shadow-2xs: var(--shadow-2xs);
     --shadow-xs: var(--shadow-xs);
     --shadow-sm: var(--shadow-sm);
     --shadow-md: var(--shadow-md);
@@ -198,9 +201,8 @@
   .simple {
     --border-width: 0px;
     --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
@@ -227,7 +229,6 @@
     --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
     --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
     --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-    --shadow: 5px 5px rgba(0, 0, 0, 1);
     --shadow-md: 6px 6px rgba(0, 0, 0, 1);
     --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
     --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
@@ -251,7 +252,6 @@
     --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
     --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
     --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-    --shadow: 5px 5px rgba(0, 0, 0, 1);
     --shadow-md: 6px 6px rgba(0, 0, 0, 1);
     --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
     --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
@@ -284,16 +284,16 @@
       -3px -3px 6px #bebebe, 3px 3px 6px #ffffff,
       inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow-sm:
-      3px 3px 6px #bebebe, -3px -3px 6px #ffffff,
+    --shadow-2xs:
+      -3px -3px 6px #bebebe, 3px 3px 6px #ffffff,
       inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
-    --shadow:
-      4px 4px 8px #bebebe, -4px -4px 8px #ffffff,
+    --shadow-sm:
+      3px 3px 6px #bebebe, -3px -3px 6px #ffffff,
       inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
     --shadow-md:
-      5px 5px 10px #bebebe, -5px -5px 10px #ffffff,
+      4px 4px 8px #bebebe, -4px -4px 8px #ffffff,
       inset 1px 1px 2px rgba(190, 190, 190, 0.5),
       inset -1px -1px 2px rgba(255, 255, 255, 0.5);
     --shadow-lg:
@@ -327,10 +327,10 @@
     --shadow-base:
       -3px -3px 6px #2c2c31, 3px 3px 6px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
-    --shadow-sm:
+    --shadow-xs:
       3px 3px 6px #2c2c31, -3px -3px 6px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
-    --shadow:
+    --shadow-sm:
       4px 4px 8px #2c2c31, -4px -4px 8px #52525b, inset 1px 1px 2px #2c2c31,
       inset -1px -1px 2px #52525b;
     --shadow-md:

From fda924b6cc712236f47d4299d15aafeb04a2a195 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Fri, 15 Aug 2025 11:20:22 +0200
Subject: [PATCH 28/42] chore: fix extract-theme-css shadows extraction

---
 apps/website/src/global.css                   | 48 +++++--------------
 .../setup-tailwind-generator.spec.ts          | 24 ++++++++--
 packages/kit-styled/src/templates/global.css  | 48 +++++--------------
 packages/utils/src/theme/extract-theme-css.ts |  3 +-
 4 files changed, 45 insertions(+), 78 deletions(-)

diff --git a/apps/website/src/global.css b/apps/website/src/global.css
index d4f8937e4..793358615 100644
--- a/apps/website/src/global.css
+++ b/apps/website/src/global.css
@@ -29,7 +29,7 @@
     --ring: var(--color-slate-900);
     --border-width: 0px;
     --border-radius: 0;
-    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-base: none;
     --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
     --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
@@ -63,7 +63,7 @@
     --ring: var(--color-slate-300);
     --border-width: 0px;
     --border-radius: 0;
-    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-base: none;
     --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
     --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
@@ -200,6 +200,7 @@
 
   .simple {
     --border-width: 0px;
+    --shadow-base: none;
     --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
     --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
@@ -207,15 +208,6 @@
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
     --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
-    --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
-    --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
-    --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
-    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
-    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
-    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
-    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
-    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
-    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: scale(0.95);
   }
@@ -226,22 +218,15 @@
     --border: black;
     --input: black;
     --ring: black;
-    --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
-    --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
-    --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-    --shadow-md: 6px 6px rgba(0, 0, 0, 1);
-    --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
-    --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
-    --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
-    --inset-shadow-2xs: inset -1px -1px rgba(0, 0, 0, 1);
-    --inset-shadow-xs: inset -2px -2px rgba(0, 0, 0, 1);
-    --inset-shadow-sm: inset -3px -3px rgba(0, 0, 0, 1);
-    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.5);
-    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
-    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.5);
-    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.5);
-    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 1);
-    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 1);
+    --shadow-base: 1px 1px rgba(0, 0, 0, 1);
+    --shadow-2xs: 2px 2px rgba(0, 0, 0, 1);
+    --shadow-xs: 4px 4px rgba(0, 0, 0, 1);
+    --shadow-sm: 6px 6px rgba(0, 0, 0, 1);
+    --shadow-md: 8px 8px rgba(0, 0, 0, 1);
+    --shadow-lg: 10px 10px rgba(0, 0, 0, 1);
+    --shadow-xl: 12px 12px rgba(0, 0, 0, 1);
+    --shadow-2xl: 14px 14px rgba(0, 0, 0, 1);
+    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: translate(4px, 4px);
   }
 
@@ -256,15 +241,6 @@
     --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
     --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
     --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
-    --inset-shadow-2xs: inset -1px -1px rgba(0, 0, 0, 1);
-    --inset-shadow-xs: inset -2px -2px rgba(0, 0, 0, 1);
-    --inset-shadow-sm: inset -3px -3px rgba(0, 0, 0, 1);
-    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.5);
-    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
-    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.5);
-    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.5);
-    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 1);
-    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 1);
     --transform-press: translate(4px, 4px);
   }
 
diff --git a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
index af62c4f0a..19491e73c 100644
--- a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
+++ b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
@@ -73,6 +73,9 @@ html {
           --ring: var(--color-slate-900);
           --border-width: 0px;
           --border-radius: 0rem;
+          --shadow-base: none;
+          --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+          --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
           --shadow-sm:
             0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
           --shadow-md:
@@ -107,6 +110,9 @@ html {
           --ring: var(--color-slate-300);
           --border-width: 0px;
           --border-radius: 0rem;
+          --shadow-base: none;
+          --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+          --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
           --shadow-sm:
             0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
           --shadow-md:
@@ -277,11 +283,15 @@ html {
           --ring: black;
           --border-width: 2px;
           --border-radius: 1rem;
-          --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-          --shadow-md: 6px 6px rgba(0, 0, 0, 1);
-          --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
-          --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
-          --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+          --shadow-base: 1px 1px rgba(0, 0, 0, 1);
+          --shadow-2xs: 2px 2px rgba(0, 0, 0, 1);
+          --shadow-xs: 4px 4px rgba(0, 0, 0, 1);
+          --shadow-sm: 6px 6px rgba(0, 0, 0, 1);
+          --shadow-md: 8px 8px rgba(0, 0, 0, 1);
+          --shadow-lg: 10px 10px rgba(0, 0, 0, 1);
+          --shadow-xl: 12px 12px rgba(0, 0, 0, 1);
+          --shadow-2xl: 14px 14px rgba(0, 0, 0, 1);
+          --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
           --transform-press: translate(4px, 4px);
         }
         .dark {
@@ -306,11 +316,15 @@ html {
           --ring: black;
           --border-width: 3px;
           --border-radius: 1rem;
+          --shadow-base: 1px 1px rgba(0, 0, 0, 1);
+          --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
+          --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
           --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
           --shadow-md: 6px 6px rgba(0, 0, 0, 1);
           --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
           --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
           --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+          --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
           --transform-press: translate(4px, 4px);
         }
       }
diff --git a/packages/kit-styled/src/templates/global.css b/packages/kit-styled/src/templates/global.css
index d4f8937e4..793358615 100644
--- a/packages/kit-styled/src/templates/global.css
+++ b/packages/kit-styled/src/templates/global.css
@@ -29,7 +29,7 @@
     --ring: var(--color-slate-900);
     --border-width: 0px;
     --border-radius: 0;
-    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-base: none;
     --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
     --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
@@ -63,7 +63,7 @@
     --ring: var(--color-slate-300);
     --border-width: 0px;
     --border-radius: 0;
-    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+    --shadow-base: none;
     --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
     --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
@@ -200,6 +200,7 @@
 
   .simple {
     --border-width: 0px;
+    --shadow-base: none;
     --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
     --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
@@ -207,15 +208,6 @@
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
     --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
-    --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
-    --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
-    --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
-    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
-    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
-    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
-    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
-    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
-    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: scale(0.95);
   }
@@ -226,22 +218,15 @@
     --border: black;
     --input: black;
     --ring: black;
-    --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
-    --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
-    --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-    --shadow-md: 6px 6px rgba(0, 0, 0, 1);
-    --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
-    --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
-    --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
-    --inset-shadow-2xs: inset -1px -1px rgba(0, 0, 0, 1);
-    --inset-shadow-xs: inset -2px -2px rgba(0, 0, 0, 1);
-    --inset-shadow-sm: inset -3px -3px rgba(0, 0, 0, 1);
-    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.5);
-    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
-    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.5);
-    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.5);
-    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 1);
-    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 1);
+    --shadow-base: 1px 1px rgba(0, 0, 0, 1);
+    --shadow-2xs: 2px 2px rgba(0, 0, 0, 1);
+    --shadow-xs: 4px 4px rgba(0, 0, 0, 1);
+    --shadow-sm: 6px 6px rgba(0, 0, 0, 1);
+    --shadow-md: 8px 8px rgba(0, 0, 0, 1);
+    --shadow-lg: 10px 10px rgba(0, 0, 0, 1);
+    --shadow-xl: 12px 12px rgba(0, 0, 0, 1);
+    --shadow-2xl: 14px 14px rgba(0, 0, 0, 1);
+    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: translate(4px, 4px);
   }
 
@@ -256,15 +241,6 @@
     --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
     --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
     --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
-    --inset-shadow-2xs: inset -1px -1px rgba(0, 0, 0, 1);
-    --inset-shadow-xs: inset -2px -2px rgba(0, 0, 0, 1);
-    --inset-shadow-sm: inset -3px -3px rgba(0, 0, 0, 1);
-    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.5);
-    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
-    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.5);
-    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.5);
-    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 1);
-    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 1);
     --transform-press: translate(4px, 4px);
   }
 
diff --git a/packages/utils/src/theme/extract-theme-css.ts b/packages/utils/src/theme/extract-theme-css.ts
index cc6636417..0d24bfbf4 100644
--- a/packages/utils/src/theme/extract-theme-css.ts
+++ b/packages/utils/src/theme/extract-theme-css.ts
@@ -222,8 +222,9 @@ function reorderThemeObject(themeObject: ThemeMap) {
     '--border-width',
     '--border-radius',
     '--shadow-base',
+    '--shadow-2xs',
+    '--shadow-xs',
     '--shadow-sm',
-    '--shadow',
     '--shadow-md',
     '--shadow-lg',
     '--shadow-xl',

From 639a681606150ecd9d4b9a09b7430dc65dd9f9ce Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Fri, 15 Aug 2025 11:27:13 +0200
Subject: [PATCH 29/42] chore: fix simple and brutalist shadows

---
 apps/website/src/global.css                   | 72 +++++++++----------
 .../setup-tailwind-generator.spec.ts          | 62 ++++++++--------
 packages/kit-styled/src/templates/global.css  | 72 +++++++++----------
 3 files changed, 102 insertions(+), 104 deletions(-)

diff --git a/apps/website/src/global.css b/apps/website/src/global.css
index 793358615..fd3fec4fe 100644
--- a/apps/website/src/global.css
+++ b/apps/website/src/global.css
@@ -30,13 +30,13 @@
     --border-width: 0px;
     --border-radius: 0;
     --shadow-base: none;
-    --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: scale(0.95);
   }
@@ -64,13 +64,13 @@
     --border-width: 0px;
     --border-radius: 0;
     --shadow-base: none;
-    --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: scale(0.95);
   }
@@ -201,13 +201,13 @@
   .simple {
     --border-width: 0px;
     --shadow-base: none;
-    --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: scale(0.95);
   }
@@ -218,14 +218,14 @@
     --border: black;
     --input: black;
     --ring: black;
-    --shadow-base: 1px 1px rgba(0, 0, 0, 1);
-    --shadow-2xs: 2px 2px rgba(0, 0, 0, 1);
-    --shadow-xs: 4px 4px rgba(0, 0, 0, 1);
-    --shadow-sm: 6px 6px rgba(0, 0, 0, 1);
-    --shadow-md: 8px 8px rgba(0, 0, 0, 1);
-    --shadow-lg: 10px 10px rgba(0, 0, 0, 1);
-    --shadow-xl: 12px 12px rgba(0, 0, 0, 1);
-    --shadow-2xl: 14px 14px rgba(0, 0, 0, 1);
+    --shadow-base: 0px 1px rgba(0, 0, 0, 1);
+    --shadow-2xs: 1px 2px rgba(0, 0, 0, 1);
+    --shadow-xs: 3px 4px rgba(0, 0, 0, 1);
+    --shadow-sm: 5px 6px rgba(0, 0, 0, 1);
+    --shadow-md: 7px 8px rgba(0, 0, 0, 1);
+    --shadow-lg: 9px 10px rgba(0, 0, 0, 1);
+    --shadow-xl: 11px 12px rgba(0, 0, 0, 1);
+    --shadow-2xl: 13px 14px rgba(0, 0, 0, 1);
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: translate(4px, 4px);
   }
@@ -234,13 +234,13 @@
     --border-width: 3px;
     --stroke-width: 2px;
     --underline: 2px;
-    --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
-    --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
-    --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-    --shadow-md: 6px 6px rgba(0, 0, 0, 1);
-    --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
-    --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
-    --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+    --shadow-2xs: 0px 1px rgba(0, 0, 0, 1);
+    --shadow-xs: 1px 2px rgba(0, 0, 0, 1);
+    --shadow-sm: 3px 4px rgba(0, 0, 0, 1);
+    --shadow-md: 5px 6px rgba(0, 0, 0, 1);
+    --shadow-lg: 7px 8px rgba(0, 0, 0, 1);
+    --shadow-xl: 9px 10px rgba(0, 0, 0, 1);
+    --shadow-2xl: 11px 12px rgba(0, 0, 0, 1);
     --transform-press: translate(4px, 4px);
   }
 
diff --git a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
index 19491e73c..b2b842ac3 100644
--- a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
+++ b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
@@ -74,17 +74,16 @@ html {
           --border-width: 0px;
           --border-radius: 0rem;
           --shadow-base: none;
-          --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-          --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-          --shadow-sm:
-            0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+          --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+          --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+          --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
           --shadow-md:
-            0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+            0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
           --shadow-lg:
-            0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+            0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
           --shadow-xl:
-            0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-          --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+            0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+          --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
           --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
           --transform-press: scale(0.95);
         }
@@ -111,17 +110,16 @@ html {
           --border-width: 0px;
           --border-radius: 0rem;
           --shadow-base: none;
-          --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-          --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-          --shadow-sm:
-            0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+          --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+          --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+          --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
           --shadow-md:
-            0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+            0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
           --shadow-lg:
-            0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+            0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
           --shadow-xl:
-            0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-          --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+            0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+          --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
           --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
           --transform-press: scale(0.95);
         }
@@ -283,14 +281,14 @@ html {
           --ring: black;
           --border-width: 2px;
           --border-radius: 1rem;
-          --shadow-base: 1px 1px rgba(0, 0, 0, 1);
-          --shadow-2xs: 2px 2px rgba(0, 0, 0, 1);
-          --shadow-xs: 4px 4px rgba(0, 0, 0, 1);
-          --shadow-sm: 6px 6px rgba(0, 0, 0, 1);
-          --shadow-md: 8px 8px rgba(0, 0, 0, 1);
-          --shadow-lg: 10px 10px rgba(0, 0, 0, 1);
-          --shadow-xl: 12px 12px rgba(0, 0, 0, 1);
-          --shadow-2xl: 14px 14px rgba(0, 0, 0, 1);
+          --shadow-base: 0px 1px rgba(0, 0, 0, 1);
+          --shadow-2xs: 1px 2px rgba(0, 0, 0, 1);
+          --shadow-xs: 3px 4px rgba(0, 0, 0, 1);
+          --shadow-sm: 5px 6px rgba(0, 0, 0, 1);
+          --shadow-md: 7px 8px rgba(0, 0, 0, 1);
+          --shadow-lg: 9px 10px rgba(0, 0, 0, 1);
+          --shadow-xl: 11px 12px rgba(0, 0, 0, 1);
+          --shadow-2xl: 13px 14px rgba(0, 0, 0, 1);
           --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
           --transform-press: translate(4px, 4px);
         }
@@ -316,14 +314,14 @@ html {
           --ring: black;
           --border-width: 3px;
           --border-radius: 1rem;
-          --shadow-base: 1px 1px rgba(0, 0, 0, 1);
-          --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
-          --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
-          --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-          --shadow-md: 6px 6px rgba(0, 0, 0, 1);
-          --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
-          --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
-          --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+          --shadow-base: 0px 1px rgba(0, 0, 0, 1);
+          --shadow-2xs: 0px 1px rgba(0, 0, 0, 1);
+          --shadow-xs: 1px 2px rgba(0, 0, 0, 1);
+          --shadow-sm: 3px 4px rgba(0, 0, 0, 1);
+          --shadow-md: 5px 6px rgba(0, 0, 0, 1);
+          --shadow-lg: 7px 8px rgba(0, 0, 0, 1);
+          --shadow-xl: 9px 10px rgba(0, 0, 0, 1);
+          --shadow-2xl: 11px 12px rgba(0, 0, 0, 1);
           --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
           --transform-press: translate(4px, 4px);
         }
diff --git a/packages/kit-styled/src/templates/global.css b/packages/kit-styled/src/templates/global.css
index 793358615..fd3fec4fe 100644
--- a/packages/kit-styled/src/templates/global.css
+++ b/packages/kit-styled/src/templates/global.css
@@ -30,13 +30,13 @@
     --border-width: 0px;
     --border-radius: 0;
     --shadow-base: none;
-    --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: scale(0.95);
   }
@@ -64,13 +64,13 @@
     --border-width: 0px;
     --border-radius: 0;
     --shadow-base: none;
-    --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: scale(0.95);
   }
@@ -201,13 +201,13 @@
   .simple {
     --border-width: 0px;
     --shadow-base: none;
-    --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: scale(0.95);
   }
@@ -218,14 +218,14 @@
     --border: black;
     --input: black;
     --ring: black;
-    --shadow-base: 1px 1px rgba(0, 0, 0, 1);
-    --shadow-2xs: 2px 2px rgba(0, 0, 0, 1);
-    --shadow-xs: 4px 4px rgba(0, 0, 0, 1);
-    --shadow-sm: 6px 6px rgba(0, 0, 0, 1);
-    --shadow-md: 8px 8px rgba(0, 0, 0, 1);
-    --shadow-lg: 10px 10px rgba(0, 0, 0, 1);
-    --shadow-xl: 12px 12px rgba(0, 0, 0, 1);
-    --shadow-2xl: 14px 14px rgba(0, 0, 0, 1);
+    --shadow-base: 0px 1px rgba(0, 0, 0, 1);
+    --shadow-2xs: 1px 2px rgba(0, 0, 0, 1);
+    --shadow-xs: 3px 4px rgba(0, 0, 0, 1);
+    --shadow-sm: 5px 6px rgba(0, 0, 0, 1);
+    --shadow-md: 7px 8px rgba(0, 0, 0, 1);
+    --shadow-lg: 9px 10px rgba(0, 0, 0, 1);
+    --shadow-xl: 11px 12px rgba(0, 0, 0, 1);
+    --shadow-2xl: 13px 14px rgba(0, 0, 0, 1);
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: translate(4px, 4px);
   }
@@ -234,13 +234,13 @@
     --border-width: 3px;
     --stroke-width: 2px;
     --underline: 2px;
-    --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
-    --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
-    --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-    --shadow-md: 6px 6px rgba(0, 0, 0, 1);
-    --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
-    --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
-    --shadow-2xl: 13px 13px rgba(0, 0, 0, 1);
+    --shadow-2xs: 0px 1px rgba(0, 0, 0, 1);
+    --shadow-xs: 1px 2px rgba(0, 0, 0, 1);
+    --shadow-sm: 3px 4px rgba(0, 0, 0, 1);
+    --shadow-md: 5px 6px rgba(0, 0, 0, 1);
+    --shadow-lg: 7px 8px rgba(0, 0, 0, 1);
+    --shadow-xl: 9px 10px rgba(0, 0, 0, 1);
+    --shadow-2xl: 11px 12px rgba(0, 0, 0, 1);
     --transform-press: translate(4px, 4px);
   }
 

From 011fb51a511e7226fba88a162342f6bff44b756c Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Fri, 15 Aug 2025 11:51:58 +0200
Subject: [PATCH 30/42] fix: extract-theme storke width

---
 apps/website/src/global.css                     | 17 +++++++----------
 .../setup-tailwind-generator.spec.ts            |  4 ++++
 packages/kit-styled/src/templates/global.css    | 17 +++++++----------
 packages/utils/src/theme/extract-theme-css.ts   |  1 +
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/apps/website/src/global.css b/apps/website/src/global.css
index fd3fec4fe..1bbba6bd3 100644
--- a/apps/website/src/global.css
+++ b/apps/website/src/global.css
@@ -28,7 +28,8 @@
     --alert-foreground: var(--color-slate-50);
     --ring: var(--color-slate-900);
     --border-width: 0px;
-    --border-radius: 0;
+    --stroke-width: 1px;
+    --border-radius: 0.25rem;
     --shadow-base: none;
     --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
     --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -62,7 +63,8 @@
     --alert-foreground: var(--color-slate-50);
     --ring: var(--color-slate-300);
     --border-width: 0px;
-    --border-radius: 0;
+    --stroke-width: 1px;
+    --border-radius: 0.25rem;
     --shadow-base: none;
     --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
     --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -200,6 +202,7 @@
 
   .simple {
     --border-width: 0px;
+    --stroke-width: 1px;
     --shadow-base: none;
     --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
     --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -246,7 +249,7 @@
 
   .neumorphic.neumorphic {
     --border-width: 0px;
-    --stroke-width: 0px;
+    --stroke-width: 1px;
     --background: hsl(0 0 88%);
     --foreground: var(--color-zinc-900);
     --popover: hsl(0 0 88%);
@@ -290,7 +293,7 @@
 
   .dark.neumorphic.neumorphic {
     --border-width: 0px;
-    --stroke-width: 0px;
+    --stroke-width: 1px;
     --background: var(--color-zinc-700);
     --foreground: var(--color-zinc-200);
     --popover: var(--color-zinc-700);
@@ -1350,12 +1353,6 @@
 
 /* DOCS */
 @layer base {
-  * {
-    @apply font-sans;
-  }
-  body {
-    @apply font-sans;
-  }
   p code {
     @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
   }
diff --git a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
index b2b842ac3..93a25a113 100644
--- a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
+++ b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
@@ -72,6 +72,7 @@ html {
           --alert-foreground: var(--color-slate-50);
           --ring: var(--color-slate-900);
           --border-width: 0px;
+          --stroke-width: 1px;
           --border-radius: 0rem;
           --shadow-base: none;
           --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
@@ -108,6 +109,7 @@ html {
           --alert-foreground: var(--color-slate-50);
           --ring: var(--color-slate-300);
           --border-width: 0px;
+          --stroke-width: 1px;
           --border-radius: 0rem;
           --shadow-base: none;
           --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
@@ -280,6 +282,7 @@ html {
           --alert-foreground: var(--color-slate-50);
           --ring: black;
           --border-width: 2px;
+          --stroke-width: 2px;
           --border-radius: 1rem;
           --shadow-base: 0px 1px rgba(0, 0, 0, 1);
           --shadow-2xs: 1px 2px rgba(0, 0, 0, 1);
@@ -313,6 +316,7 @@ html {
           --alert-foreground: var(--color-slate-50);
           --ring: black;
           --border-width: 3px;
+          --stroke-width: 2px;
           --border-radius: 1rem;
           --shadow-base: 0px 1px rgba(0, 0, 0, 1);
           --shadow-2xs: 0px 1px rgba(0, 0, 0, 1);
diff --git a/packages/kit-styled/src/templates/global.css b/packages/kit-styled/src/templates/global.css
index fd3fec4fe..1bbba6bd3 100644
--- a/packages/kit-styled/src/templates/global.css
+++ b/packages/kit-styled/src/templates/global.css
@@ -28,7 +28,8 @@
     --alert-foreground: var(--color-slate-50);
     --ring: var(--color-slate-900);
     --border-width: 0px;
-    --border-radius: 0;
+    --stroke-width: 1px;
+    --border-radius: 0.25rem;
     --shadow-base: none;
     --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
     --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -62,7 +63,8 @@
     --alert-foreground: var(--color-slate-50);
     --ring: var(--color-slate-300);
     --border-width: 0px;
-    --border-radius: 0;
+    --stroke-width: 1px;
+    --border-radius: 0.25rem;
     --shadow-base: none;
     --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
     --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -200,6 +202,7 @@
 
   .simple {
     --border-width: 0px;
+    --stroke-width: 1px;
     --shadow-base: none;
     --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
     --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -246,7 +249,7 @@
 
   .neumorphic.neumorphic {
     --border-width: 0px;
-    --stroke-width: 0px;
+    --stroke-width: 1px;
     --background: hsl(0 0 88%);
     --foreground: var(--color-zinc-900);
     --popover: hsl(0 0 88%);
@@ -290,7 +293,7 @@
 
   .dark.neumorphic.neumorphic {
     --border-width: 0px;
-    --stroke-width: 0px;
+    --stroke-width: 1px;
     --background: var(--color-zinc-700);
     --foreground: var(--color-zinc-200);
     --popover: var(--color-zinc-700);
@@ -1350,12 +1353,6 @@
 
 /* DOCS */
 @layer base {
-  * {
-    @apply font-sans;
-  }
-  body {
-    @apply font-sans;
-  }
   p code {
     @apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
   }
diff --git a/packages/utils/src/theme/extract-theme-css.ts b/packages/utils/src/theme/extract-theme-css.ts
index 0d24bfbf4..e3e301786 100644
--- a/packages/utils/src/theme/extract-theme-css.ts
+++ b/packages/utils/src/theme/extract-theme-css.ts
@@ -220,6 +220,7 @@ function reorderThemeObject(themeObject: ThemeMap) {
     '--alert-foreground',
     '--ring',
     '--border-width',
+    '--stroke-width',
     '--border-radius',
     '--shadow-base',
     '--shadow-2xs',

From 31669a4aa9e022381b76bd7bb55d57ba300fccef Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Fri, 15 Aug 2025 11:52:09 +0200
Subject: [PATCH 31/42] update: styled install docs

---
 .../(getting-started)/install/index.mdx       | 219 +++++++++++++-----
 1 file changed, 163 insertions(+), 56 deletions(-)

diff --git a/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx b/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx
index 04acbb281..80161e004 100644
--- a/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx
+++ b/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx
@@ -42,80 +42,187 @@ pnpm i -D @qwik-ui/headless @qwikest/icons tailwindcss-animate @qwik-ui/utils cl
 
 Click on "make it yours" -> choose your favorite color theme and style -> copy/paste the css-variables config to your global css file.
 
-For example, we use the following config by default on the Qwik UI docs:
+Here's an example:
 
 ```css
+@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 5.9% 10%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 5.9% 10%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --primary: 0 93.5% 81.8%;
-    --primary-foreground: 0 0% 0%;
-    --secondary: 240 5.9% 10%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 240 5.9% 10%;
+    --background: white;
+    --foreground: var(--color-slate-950);
+    --muted: var(--color-slate-100);
+    --muted-foreground: var(--color-slate-700);
+    --popover: white;
+    --popover-foreground: var(--color-slate-900);
+    --card: white;
+    --card-foreground: var(--color-slate-900);
+    --border: var(--color-slate-200);
+    --input: var(--color-slate-200);
+    --primary: var(--color-cyan-600);
+    --primary-foreground: white;
+    --secondary: var(--color-slate-900);
+    --secondary-foreground: white;
+    --accent: var(--color-slate-100);
+    --accent-foreground: var(--color-slate-900);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-900);
     --border-width: 0px;
+    --stroke-width: 1px;
     --border-radius: 0.5rem;
-    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --shadow-base: none;
+    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: scale(0.95);
   }
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --primary: 0 93.5% 81.8%;
-    --primary-foreground: 0 0% 0%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 0 0% 0%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --alert: 0 84.2% 60.2%;
-    --alert-foreground: 0 0% 98%;
-    --ring: 240 4.9% 83.9%;
+    --background: var(--color-slate-950);
+    --foreground: var(--color-slate-50);
+    --muted: var(--color-slate-800);
+    --muted-foreground: var(--color-slate-300);
+    --popover: var(--color-slate-950);
+    --popover-foreground: var(--color-slate-50);
+    --card: var(--color-slate-950);
+    --card-foreground: var(--color-slate-50);
+    --border: var(--color-slate-800);
+    --input: var(--color-slate-800);
+    --primary: var(--color-cyan-600);
+    --primary-foreground: white;
+    --secondary: var(--color-slate-100);
+    --secondary-foreground: black;
+    --accent: var(--color-slate-700);
+    --accent-foreground: var(--color-slate-50);
+    --alert: var(--color-red-500);
+    --alert-foreground: var(--color-slate-50);
+    --ring: var(--color-slate-300);
     --border-width: 0px;
+    --stroke-width: 1px;
     --border-radius: 0.5rem;
-    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
+    --shadow-base: none;
+    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
     --transform-press: scale(0.95);
   }
 }
-```
 
-This might seem like a lot of configuration, but we believe it to be worth it because it allows changing your entire application's theme at the click of a button.
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-alert: var(--alert);
+  --color-alert-foreground: var(--alert-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-xs: var(--border-radius);
+  --radius-sm: calc(var(--border-radius) + 0.125rem);
+  --radius-md: calc(var(--border-radius) + 0.375rem);
+  --radius-lg: calc(var(--border-radius) + 0.5rem);
+  --radius-xl: calc(var(--border-radius) + 0.75rem);
+  --radius-2xl: calc(var(--border-radius) + 1rem);
+  --radius-3xl: calc(var(--border-radius) + 1.5rem);
+  --shadow-base: var(--shadow-base);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+  --shadow-inner: var(--shadow-inner);
+  --default-border-width: calc(var(--border-width) + 1px);
+  --border-width-base: var(--border-width);
+  --border-width-2: calc(var(--border-width) + 2px);
+  --border-width-4: calc(var(--border-width) + 4px);
+  --border-width-8: calc(var(--border-width) + 8px);
+  --stroke-width-0: 0px;
+  --stroke-width-base: var(--stroke-width);
+  --stroke-width-1: calc(var(--stroke-width) + 1px);
+  --stroke-width-2: calc(var(--stroke-width) + 2px);
+  --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+  --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--qwikui-collapsible-content-height);
+    }
+  }
+  @keyframes collapsible-up {
+    from {
+      height: var(--qwikui-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@utility press {
+  transform: var(--transform-press);
+}
+@utility border-width-* {
+  /* prettier-ignore */
+  border: --value(--border-width-*);
+}
+@utility stroke-width-* {
+  /* prettier-ignore */
+  stroke: --value(--stroke-width-*);
+}
+@utility shadow-* {
+  /* prettier-ignore */
+  box-shadow: --value(--shadow-*);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer components {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+```
 
-### Step 4: Find the components you need in the docs and copy/paste them into your project
+### Step 3: Find the components you need in the docs and copy/paste them into your project
 
 You will find the components code in their corresponding link in the docs.
 

From 6283534f97cc3f9ad83ccfd464e90e9b1b688685 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Fri, 15 Aug 2025 11:54:58 +0200
Subject: [PATCH 32/42] chore: update extract-theme.css base theme

---
 .../setup-tailwind-generator.spec.ts          | 278 +++++++++---------
 packages/utils/src/theme/extract-theme-css.ts | 122 ++++----
 2 files changed, 202 insertions(+), 198 deletions(-)

diff --git a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
index 93a25a113..088dd9a2f 100644
--- a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
+++ b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
@@ -41,10 +41,11 @@ html {
     const updatedGlobalCssContent = tree.read('src/global.css', 'utf-8');
 
     expect(updatedGlobalCssContent).toMatchInlineSnapshot(`
-      "@tailwind components;
+      "
+        @tailwind components;
       @tailwind base;
       @tailwind utilities;
-      @layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+        @layer qwik-ui, popover-polyfill, theme, base, components, utilities;
       @import 'tailwindcss';
       @import 'tw-animate-css';
 
@@ -78,12 +79,9 @@ html {
           --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
           --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
           --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-          --shadow-md:
-            0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-          --shadow-lg:
-            0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-          --shadow-xl:
-            0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
           --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
           --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
           --transform-press: scale(0.95);
@@ -115,79 +113,78 @@ html {
           --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
           --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
           --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-          --shadow-md:
-            0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-          --shadow-lg:
-            0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-          --shadow-xl:
-            0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
           --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
           --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
           --transform-press: scale(0.95);
         }
       }
 
-      @theme inline {
-        --color-background: var(--background);
-        --color-foreground: var(--foreground);
-        --color-card: var(--card);
-        --color-card-foreground: var(--card-foreground);
-        --color-popover: var(--popover);
-        --color-popover-foreground: var(--popover-foreground);
-        --color-primary: var(--primary);
-        --color-primary-foreground: var(--primary-foreground);
-        --color-secondary: var(--secondary);
-        --color-secondary-foreground: var(--secondary-foreground);
-        --color-muted: var(--muted);
-        --color-muted-foreground: var(--muted-foreground);
-        --color-accent: var(--accent);
-        --color-accent-foreground: var(--accent-foreground);
-        --color-alert: var(--alert);
-        --color-alert-foreground: var(--alert-foreground);
-        --color-border: var(--border);
-        --color-input: var(--input);
-        --color-ring: var(--ring);
-        --radius-xs: var(--border-radius);
-        --radius-sm: calc(var(--border-radius) + 0.125rem);
-        --radius-md: calc(var(--border-radius) + 0.375rem);
-        --radius-lg: calc(var(--border-radius) + 0.5rem);
-        --radius-xl: calc(var(--border-radius) + 0.75rem);
-        --radius-2xl: calc(var(--border-radius) + 1rem);
-        --radius-3xl: calc(var(--border-radius) + 1.5rem);
-        --shadow-base: var(--shadow-base);
-        --shadow-xs: var(--shadow-xs);
-        --shadow-sm: var(--shadow-sm);
-        --shadow-md: var(--shadow-md);
-        --shadow-lg: var(--shadow-lg);
-        --shadow-xl: var(--shadow-xl);
-        --shadow-2xl: var(--shadow-2xl);
-        --shadow-inner: var(--shadow-inner);
-        --default-border-width: calc(var(--border-width) + 1px);
-        --border-width-base: var(--border-width);
-        --border-width-2: calc(var(--border-width) + 2px);
-        --border-width-4: calc(var(--border-width) + 4px);
-        --border-width-8: calc(var(--border-width) + 8px);
-        --stroke-width-0: 0px;
-        --stroke-width-base: var(--stroke-width);
-        --stroke-width-1: calc(var(--stroke-width) + 1px);
-        --stroke-width-2: calc(var(--stroke-width) + 2px);
-        --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
-        --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+        @theme inline {
+          --color-background: var(--background);
+          --color-foreground: var(--foreground);
+          --color-card: var(--card);
+          --color-card-foreground: var(--card-foreground);
+          --color-popover: var(--popover);
+          --color-popover-foreground: var(--popover-foreground);
+          --color-primary: var(--primary);
+          --color-primary-foreground: var(--primary-foreground);
+          --color-secondary: var(--secondary);
+          --color-secondary-foreground: var(--secondary-foreground);
+          --color-muted: var(--muted);
+          --color-muted-foreground: var(--muted-foreground);
+          --color-accent: var(--accent);
+          --color-accent-foreground: var(--accent-foreground);
+          --color-alert: var(--alert);
+          --color-alert-foreground: var(--alert-foreground);
+          --color-border: var(--border);
+          --color-input: var(--input);
+          --color-ring: var(--ring);
+          --radius-xs: var(--border-radius);
+          --radius-sm: calc(var(--border-radius) + 0.125rem);
+          --radius-md: calc(var(--border-radius) + 0.375rem);
+          --radius-lg: calc(var(--border-radius) + 0.5rem);
+          --radius-xl: calc(var(--border-radius) + 0.75rem);
+          --radius-2xl: calc(var(--border-radius) + 1rem);
+          --radius-3xl: calc(var(--border-radius) + 1.5rem);
+          --shadow-base: var(--shadow-base);
+          --shadow-2xs: var(--shadow-2xs);
+          --shadow-xs: var(--shadow-xs);
+          --shadow-sm: var(--shadow-sm);
+          --shadow-md: var(--shadow-md);
+          --shadow-lg: var(--shadow-lg);
+          --shadow-xl: var(--shadow-xl);
+          --shadow-2xl: var(--shadow-2xl);
+          --shadow-inner: var(--shadow-inner);
+          --default-border-width: calc(var(--border-width) + 1px);
+          --border-width-base: var(--border-width);
+          --border-width-2: calc(var(--border-width) + 2px);
+          --border-width-4: calc(var(--border-width) + 4px);
+          --border-width-8: calc(var(--border-width) + 8px);
+          --stroke-width-0: 0px;
+          --stroke-width-base: var(--stroke-width);
+          --stroke-width-1: calc(var(--stroke-width) + 1px);
+          --stroke-width-2: calc(var(--stroke-width) + 2px);
+          --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+          --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
 
-        @keyframes collapsible-down {
-          from {
-            height: 0;
+          @keyframes collapsible-down {
+            from {
+              height: 0;
+            }
+            to {
+              height: var(--qwikui-collapsible-content-height);
+            }
           }
-          to {
-            height: var(--qwikui-collapsible-content-height);
-          }
-        }
-        @keyframes collapsible-up {
-          from {
-            height: var(--qwikui-collapsible-content-height);
-          }
-          to {
-            height: 0;
+          @keyframes collapsible-up {
+            from {
+              height: var(--qwikui-collapsible-content-height);
+            }
+            to {
+              height: 0;
+            }
           }
         }
       }
@@ -225,15 +222,16 @@ html {
           @apply bg-background text-foreground;
         }
       }
+        
 
       html {
         height: 100%;
-        min-height: 100%;
+        min-height: 100%; 
         scroll-behavior: smooth;
         background-color: var(--color-bg) !important;
         color: var(--color-text) !important;
       }
-      "
+        "
     `);
   });
   test(`
@@ -251,10 +249,11 @@ html {
     const updatedGlobalCssContent = tree.read('src/global.css', 'utf-8');
 
     expect(updatedGlobalCssContent).toMatchInlineSnapshot(`
-      "@tailwind components;
+      "
+        @tailwind components;
       @tailwind base;
       @tailwind utilities;
-      @layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+        @layer qwik-ui, popover-polyfill, theme, base, components, utilities;
       @import 'tailwindcss';
       @import 'tw-animate-css';
 
@@ -331,67 +330,69 @@ html {
         }
       }
 
-      @theme inline {
-        --color-background: var(--background);
-        --color-foreground: var(--foreground);
-        --color-card: var(--card);
-        --color-card-foreground: var(--card-foreground);
-        --color-popover: var(--popover);
-        --color-popover-foreground: var(--popover-foreground);
-        --color-primary: var(--primary);
-        --color-primary-foreground: var(--primary-foreground);
-        --color-secondary: var(--secondary);
-        --color-secondary-foreground: var(--secondary-foreground);
-        --color-muted: var(--muted);
-        --color-muted-foreground: var(--muted-foreground);
-        --color-accent: var(--accent);
-        --color-accent-foreground: var(--accent-foreground);
-        --color-alert: var(--alert);
-        --color-alert-foreground: var(--alert-foreground);
-        --color-border: var(--border);
-        --color-input: var(--input);
-        --color-ring: var(--ring);
-        --radius-xs: var(--border-radius);
-        --radius-sm: calc(var(--border-radius) + 0.125rem);
-        --radius-md: calc(var(--border-radius) + 0.375rem);
-        --radius-lg: calc(var(--border-radius) + 0.5rem);
-        --radius-xl: calc(var(--border-radius) + 0.75rem);
-        --radius-2xl: calc(var(--border-radius) + 1rem);
-        --radius-3xl: calc(var(--border-radius) + 1.5rem);
-        --shadow-base: var(--shadow-base);
-        --shadow-xs: var(--shadow-xs);
-        --shadow-sm: var(--shadow-sm);
-        --shadow-md: var(--shadow-md);
-        --shadow-lg: var(--shadow-lg);
-        --shadow-xl: var(--shadow-xl);
-        --shadow-2xl: var(--shadow-2xl);
-        --shadow-inner: var(--shadow-inner);
-        --default-border-width: calc(var(--border-width) + 1px);
-        --border-width-base: var(--border-width);
-        --border-width-2: calc(var(--border-width) + 2px);
-        --border-width-4: calc(var(--border-width) + 4px);
-        --border-width-8: calc(var(--border-width) + 8px);
-        --stroke-width-0: 0px;
-        --stroke-width-base: var(--stroke-width);
-        --stroke-width-1: calc(var(--stroke-width) + 1px);
-        --stroke-width-2: calc(var(--stroke-width) + 2px);
-        --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
-        --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+        @theme inline {
+          --color-background: var(--background);
+          --color-foreground: var(--foreground);
+          --color-card: var(--card);
+          --color-card-foreground: var(--card-foreground);
+          --color-popover: var(--popover);
+          --color-popover-foreground: var(--popover-foreground);
+          --color-primary: var(--primary);
+          --color-primary-foreground: var(--primary-foreground);
+          --color-secondary: var(--secondary);
+          --color-secondary-foreground: var(--secondary-foreground);
+          --color-muted: var(--muted);
+          --color-muted-foreground: var(--muted-foreground);
+          --color-accent: var(--accent);
+          --color-accent-foreground: var(--accent-foreground);
+          --color-alert: var(--alert);
+          --color-alert-foreground: var(--alert-foreground);
+          --color-border: var(--border);
+          --color-input: var(--input);
+          --color-ring: var(--ring);
+          --radius-xs: var(--border-radius);
+          --radius-sm: calc(var(--border-radius) + 0.125rem);
+          --radius-md: calc(var(--border-radius) + 0.375rem);
+          --radius-lg: calc(var(--border-radius) + 0.5rem);
+          --radius-xl: calc(var(--border-radius) + 0.75rem);
+          --radius-2xl: calc(var(--border-radius) + 1rem);
+          --radius-3xl: calc(var(--border-radius) + 1.5rem);
+          --shadow-base: var(--shadow-base);
+          --shadow-2xs: var(--shadow-2xs);
+          --shadow-xs: var(--shadow-xs);
+          --shadow-sm: var(--shadow-sm);
+          --shadow-md: var(--shadow-md);
+          --shadow-lg: var(--shadow-lg);
+          --shadow-xl: var(--shadow-xl);
+          --shadow-2xl: var(--shadow-2xl);
+          --shadow-inner: var(--shadow-inner);
+          --default-border-width: calc(var(--border-width) + 1px);
+          --border-width-base: var(--border-width);
+          --border-width-2: calc(var(--border-width) + 2px);
+          --border-width-4: calc(var(--border-width) + 4px);
+          --border-width-8: calc(var(--border-width) + 8px);
+          --stroke-width-0: 0px;
+          --stroke-width-base: var(--stroke-width);
+          --stroke-width-1: calc(var(--stroke-width) + 1px);
+          --stroke-width-2: calc(var(--stroke-width) + 2px);
+          --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+          --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
 
-        @keyframes collapsible-down {
-          from {
-            height: 0;
+          @keyframes collapsible-down {
+            from {
+              height: 0;
+            }
+            to {
+              height: var(--qwikui-collapsible-content-height);
+            }
           }
-          to {
-            height: var(--qwikui-collapsible-content-height);
-          }
-        }
-        @keyframes collapsible-up {
-          from {
-            height: var(--qwikui-collapsible-content-height);
-          }
-          to {
-            height: 0;
+          @keyframes collapsible-up {
+            from {
+              height: var(--qwikui-collapsible-content-height);
+            }
+            to {
+              height: 0;
+            }
           }
         }
       }
@@ -429,15 +430,16 @@ html {
           @apply bg-background text-foreground;
         }
       }
+        
 
       html {
         height: 100%;
-        min-height: 100%;
+        min-height: 100%; 
         scroll-behavior: smooth;
         background-color: var(--color-bg) !important;
         color: var(--color-text) !important;
       }
-      "
+        "
     `);
   });
 });
diff --git a/packages/utils/src/theme/extract-theme-css.ts b/packages/utils/src/theme/extract-theme-css.ts
index e3e301786..cd1a887a6 100644
--- a/packages/utils/src/theme/extract-theme-css.ts
+++ b/packages/utils/src/theme/extract-theme-css.ts
@@ -271,67 +271,69 @@ function objThemeToCSSThemeOutput(themeObject: ThemeMap) {
 
   cssOutput += `}
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-alert: var(--alert);
-  --color-alert-foreground: var(--alert-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --radius-xs: var(--border-radius);
-  --radius-sm: calc(var(--border-radius) + 0.125rem);
-  --radius-md: calc(var(--border-radius) + 0.375rem);
-  --radius-lg: calc(var(--border-radius) + 0.5rem);
-  --radius-xl: calc(var(--border-radius) + 0.75rem);
-  --radius-2xl: calc(var(--border-radius) + 1rem);
-  --radius-3xl: calc(var(--border-radius) + 1.5rem);
-  --shadow-base: var(--shadow-base);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
-  --shadow-inner: var(--shadow-inner);
-  --default-border-width: calc(var(--border-width) + 1px);
-  --border-width-base: var(--border-width);
-  --border-width-2: calc(var(--border-width) + 2px);
-  --border-width-4: calc(var(--border-width) + 4px);
-  --border-width-8: calc(var(--border-width) + 8px);
-  --stroke-width-0: 0px;
-  --stroke-width-base: var(--stroke-width);
-  --stroke-width-1: calc(var(--stroke-width) + 1px);
-  --stroke-width-2: calc(var(--stroke-width) + 2px);
-  --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
-  --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
-
-  @keyframes collapsible-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--qwikui-collapsible-content-height);
-    }
-  }
-  @keyframes collapsible-up {
-    from {
-      height: var(--qwikui-collapsible-content-height);
+  @theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-alert: var(--alert);
+    --color-alert-foreground: var(--alert-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --radius-xs: var(--border-radius);
+    --radius-sm: calc(var(--border-radius) + 0.125rem);
+    --radius-md: calc(var(--border-radius) + 0.375rem);
+    --radius-lg: calc(var(--border-radius) + 0.5rem);
+    --radius-xl: calc(var(--border-radius) + 0.75rem);
+    --radius-2xl: calc(var(--border-radius) + 1rem);
+    --radius-3xl: calc(var(--border-radius) + 1.5rem);
+    --shadow-base: var(--shadow-base);
+    --shadow-2xs: var(--shadow-2xs);
+    --shadow-xs: var(--shadow-xs);
+    --shadow-sm: var(--shadow-sm);
+    --shadow-md: var(--shadow-md);
+    --shadow-lg: var(--shadow-lg);
+    --shadow-xl: var(--shadow-xl);
+    --shadow-2xl: var(--shadow-2xl);
+    --shadow-inner: var(--shadow-inner);
+    --default-border-width: calc(var(--border-width) + 1px);
+    --border-width-base: var(--border-width);
+    --border-width-2: calc(var(--border-width) + 2px);
+    --border-width-4: calc(var(--border-width) + 4px);
+    --border-width-8: calc(var(--border-width) + 8px);
+    --stroke-width-0: 0px;
+    --stroke-width-base: var(--stroke-width);
+    --stroke-width-1: calc(var(--stroke-width) + 1px);
+    --stroke-width-2: calc(var(--stroke-width) + 2px);
+    --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+    --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+    @keyframes collapsible-down {
+      from {
+        height: 0;
+      }
+      to {
+        height: var(--qwikui-collapsible-content-height);
+      }
     }
-    to {
-      height: 0;
+    @keyframes collapsible-up {
+      from {
+        height: var(--qwikui-collapsible-content-height);
+      }
+      to {
+        height: 0;
+      }
     }
   }
 }

From 0d8a75e7c9809afd9ee0a899e5b73d95f9b06bf0 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Fri, 15 Aug 2025 12:00:55 +0200
Subject: [PATCH 33/42] chore: update styled install

---
 .../(getting-started)/install/index.mdx       | 122 +++++++++---------
 1 file changed, 62 insertions(+), 60 deletions(-)

diff --git a/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx b/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx
index 80161e004..cb2308dc6 100644
--- a/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx
+++ b/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx
@@ -122,67 +122,69 @@ Here's an example:
   }
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-alert: var(--alert);
-  --color-alert-foreground: var(--alert-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --radius-xs: var(--border-radius);
-  --radius-sm: calc(var(--border-radius) + 0.125rem);
-  --radius-md: calc(var(--border-radius) + 0.375rem);
-  --radius-lg: calc(var(--border-radius) + 0.5rem);
-  --radius-xl: calc(var(--border-radius) + 0.75rem);
-  --radius-2xl: calc(var(--border-radius) + 1rem);
-  --radius-3xl: calc(var(--border-radius) + 1.5rem);
-  --shadow-base: var(--shadow-base);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
-  --shadow-inner: var(--shadow-inner);
-  --default-border-width: calc(var(--border-width) + 1px);
-  --border-width-base: var(--border-width);
-  --border-width-2: calc(var(--border-width) + 2px);
-  --border-width-4: calc(var(--border-width) + 4px);
-  --border-width-8: calc(var(--border-width) + 8px);
-  --stroke-width-0: 0px;
-  --stroke-width-base: var(--stroke-width);
-  --stroke-width-1: calc(var(--stroke-width) + 1px);
-  --stroke-width-2: calc(var(--stroke-width) + 2px);
-  --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
-  --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
-
-  @keyframes collapsible-down {
-    from {
-      height: 0;
+  @theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-alert: var(--alert);
+    --color-alert-foreground: var(--alert-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --radius-xs: var(--border-radius);
+    --radius-sm: calc(var(--border-radius) + 0.125rem);
+    --radius-md: calc(var(--border-radius) + 0.375rem);
+    --radius-lg: calc(var(--border-radius) + 0.5rem);
+    --radius-xl: calc(var(--border-radius) + 0.75rem);
+    --radius-2xl: calc(var(--border-radius) + 1rem);
+    --radius-3xl: calc(var(--border-radius) + 1.5rem);
+    --shadow-base: var(--shadow-base);
+    --shadow-2xs: var(--shadow-2xs);
+    --shadow-xs: var(--shadow-xs);
+    --shadow-sm: var(--shadow-sm);
+    --shadow-md: var(--shadow-md);
+    --shadow-lg: var(--shadow-lg);
+    --shadow-xl: var(--shadow-xl);
+    --shadow-2xl: var(--shadow-2xl);
+    --shadow-inner: var(--shadow-inner);
+    --default-border-width: calc(var(--border-width) + 1px);
+    --border-width-base: var(--border-width);
+    --border-width-2: calc(var(--border-width) + 2px);
+    --border-width-4: calc(var(--border-width) + 4px);
+    --border-width-8: calc(var(--border-width) + 8px);
+    --stroke-width-0: 0px;
+    --stroke-width-base: var(--stroke-width);
+    --stroke-width-1: calc(var(--stroke-width) + 1px);
+    --stroke-width-2: calc(var(--stroke-width) + 2px);
+    --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+    --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+    @keyframes collapsible-down {
+      from {
+        height: 0;
+      }
+      to {
+        height: var(--qwikui-collapsible-content-height);
+      }
     }
-    to {
-      height: var(--qwikui-collapsible-content-height);
-    }
-  }
-  @keyframes collapsible-up {
-    from {
-      height: var(--qwikui-collapsible-content-height);
-    }
-    to {
-      height: 0;
+    @keyframes collapsible-up {
+      from {
+        height: var(--qwikui-collapsible-content-height);
+      }
+      to {
+        height: 0;
+      }
     }
   }
 }

From 3ad8d90f74f639101dcfa32ccb976f684a033de5 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Fri, 15 Aug 2025 12:09:57 +0200
Subject: [PATCH 34/42] fix: CI utils snapshots

---
 .../utils/src/theme/extract-theme-css.spec.ts | 512 +++++++++---------
 1 file changed, 266 insertions(+), 246 deletions(-)

diff --git a/packages/utils/src/theme/extract-theme-css.spec.ts b/packages/utils/src/theme/extract-theme-css.spec.ts
index c53babadd..cb03163fa 100644
--- a/packages/utils/src/theme/extract-theme-css.spec.ts
+++ b/packages/utils/src/theme/extract-theme-css.spec.ts
@@ -59,8 +59,9 @@ describe('Extract theme from css', () => {
           --ring: var(--color-neutral-900);
           --border-width: 0px;
           --border-radius: 0rem;
+          --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+          --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
           --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-          --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
           --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
           --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
           --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
@@ -88,8 +89,9 @@ describe('Extract theme from css', () => {
           --ring: var(--color-neutral-300);
           --border-width: 0px;
           --border-radius: 0rem;
+          --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+          --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
           --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-          --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
           --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
           --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
           --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
@@ -99,67 +101,69 @@ describe('Extract theme from css', () => {
         }
       }
 
-      @theme inline {
-        --color-background: var(--background);
-        --color-foreground: var(--foreground);
-        --color-card: var(--card);
-        --color-card-foreground: var(--card-foreground);
-        --color-popover: var(--popover);
-        --color-popover-foreground: var(--popover-foreground);
-        --color-primary: var(--primary);
-        --color-primary-foreground: var(--primary-foreground);
-        --color-secondary: var(--secondary);
-        --color-secondary-foreground: var(--secondary-foreground);
-        --color-muted: var(--muted);
-        --color-muted-foreground: var(--muted-foreground);
-        --color-accent: var(--accent);
-        --color-accent-foreground: var(--accent-foreground);
-        --color-alert: var(--alert);
-        --color-alert-foreground: var(--alert-foreground);
-        --color-border: var(--border);
-        --color-input: var(--input);
-        --color-ring: var(--ring);
-        --radius-xs: var(--border-radius);
-        --radius-sm: calc(var(--border-radius) + 0.125rem);
-        --radius-md: calc(var(--border-radius) + 0.375rem);
-        --radius-lg: calc(var(--border-radius) + 0.5rem);
-        --radius-xl: calc(var(--border-radius) + 0.75rem);
-        --radius-2xl: calc(var(--border-radius) + 1rem);
-        --radius-3xl: calc(var(--border-radius) + 1.5rem);
-        --shadow-base: var(--shadow-base);
-        --shadow-xs: var(--shadow-xs);
-        --shadow-sm: var(--shadow-sm);
-        --shadow-md: var(--shadow-md);
-        --shadow-lg: var(--shadow-lg);
-        --shadow-xl: var(--shadow-xl);
-        --shadow-2xl: var(--shadow-2xl);
-        --shadow-inner: var(--shadow-inner);
-        --default-border-width: calc(var(--border-width) + 1px);
-        --border-width-base: var(--border-width);
-        --border-width-2: calc(var(--border-width) + 2px);
-        --border-width-4: calc(var(--border-width) + 4px);
-        --border-width-8: calc(var(--border-width) + 8px);
-        --stroke-width-0: 0px;
-        --stroke-width-base: var(--stroke-width);
-        --stroke-width-1: calc(var(--stroke-width) + 1px);
-        --stroke-width-2: calc(var(--stroke-width) + 2px);
-        --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
-        --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+        @theme inline {
+          --color-background: var(--background);
+          --color-foreground: var(--foreground);
+          --color-card: var(--card);
+          --color-card-foreground: var(--card-foreground);
+          --color-popover: var(--popover);
+          --color-popover-foreground: var(--popover-foreground);
+          --color-primary: var(--primary);
+          --color-primary-foreground: var(--primary-foreground);
+          --color-secondary: var(--secondary);
+          --color-secondary-foreground: var(--secondary-foreground);
+          --color-muted: var(--muted);
+          --color-muted-foreground: var(--muted-foreground);
+          --color-accent: var(--accent);
+          --color-accent-foreground: var(--accent-foreground);
+          --color-alert: var(--alert);
+          --color-alert-foreground: var(--alert-foreground);
+          --color-border: var(--border);
+          --color-input: var(--input);
+          --color-ring: var(--ring);
+          --radius-xs: var(--border-radius);
+          --radius-sm: calc(var(--border-radius) + 0.125rem);
+          --radius-md: calc(var(--border-radius) + 0.375rem);
+          --radius-lg: calc(var(--border-radius) + 0.5rem);
+          --radius-xl: calc(var(--border-radius) + 0.75rem);
+          --radius-2xl: calc(var(--border-radius) + 1rem);
+          --radius-3xl: calc(var(--border-radius) + 1.5rem);
+          --shadow-base: var(--shadow-base);
+          --shadow-2xs: var(--shadow-2xs);
+          --shadow-xs: var(--shadow-xs);
+          --shadow-sm: var(--shadow-sm);
+          --shadow-md: var(--shadow-md);
+          --shadow-lg: var(--shadow-lg);
+          --shadow-xl: var(--shadow-xl);
+          --shadow-2xl: var(--shadow-2xl);
+          --shadow-inner: var(--shadow-inner);
+          --default-border-width: calc(var(--border-width) + 1px);
+          --border-width-base: var(--border-width);
+          --border-width-2: calc(var(--border-width) + 2px);
+          --border-width-4: calc(var(--border-width) + 4px);
+          --border-width-8: calc(var(--border-width) + 8px);
+          --stroke-width-0: 0px;
+          --stroke-width-base: var(--stroke-width);
+          --stroke-width-1: calc(var(--stroke-width) + 1px);
+          --stroke-width-2: calc(var(--stroke-width) + 2px);
+          --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+          --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
 
-        @keyframes collapsible-down {
-          from {
-            height: 0;
-          }
-          to {
-            height: var(--qwikui-collapsible-content-height);
-          }
-        }
-        @keyframes collapsible-up {
-          from {
-            height: var(--qwikui-collapsible-content-height);
+          @keyframes collapsible-down {
+            from {
+              height: 0;
+            }
+            to {
+              height: var(--qwikui-collapsible-content-height);
+            }
           }
-          to {
-            height: 0;
+          @keyframes collapsible-up {
+            from {
+              height: var(--qwikui-collapsible-content-height);
+            }
+            to {
+              height: 0;
+            }
           }
         }
       }
@@ -240,8 +244,9 @@ describe('Extract theme from css', () => {
             --ring: var(--color-neutral-900);
             --border-width: 0px;
             --border-radius: 0rem;
+            --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+            --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
             --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-            --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
             --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
             --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
             --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
@@ -269,8 +274,9 @@ describe('Extract theme from css', () => {
             --ring: var(--color-neutral-300);
             --border-width: 0px;
             --border-radius: 0rem;
+            --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
+            --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
             --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-            --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
             --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
             --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
             --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
@@ -280,67 +286,69 @@ describe('Extract theme from css', () => {
           }
         }
 
-        @theme inline {
-          --color-background: var(--background);
-          --color-foreground: var(--foreground);
-          --color-card: var(--card);
-          --color-card-foreground: var(--card-foreground);
-          --color-popover: var(--popover);
-          --color-popover-foreground: var(--popover-foreground);
-          --color-primary: var(--primary);
-          --color-primary-foreground: var(--primary-foreground);
-          --color-secondary: var(--secondary);
-          --color-secondary-foreground: var(--secondary-foreground);
-          --color-muted: var(--muted);
-          --color-muted-foreground: var(--muted-foreground);
-          --color-accent: var(--accent);
-          --color-accent-foreground: var(--accent-foreground);
-          --color-alert: var(--alert);
-          --color-alert-foreground: var(--alert-foreground);
-          --color-border: var(--border);
-          --color-input: var(--input);
-          --color-ring: var(--ring);
-          --radius-xs: var(--border-radius);
-          --radius-sm: calc(var(--border-radius) + 0.125rem);
-          --radius-md: calc(var(--border-radius) + 0.375rem);
-          --radius-lg: calc(var(--border-radius) + 0.5rem);
-          --radius-xl: calc(var(--border-radius) + 0.75rem);
-          --radius-2xl: calc(var(--border-radius) + 1rem);
-          --radius-3xl: calc(var(--border-radius) + 1.5rem);
-          --shadow-base: var(--shadow-base);
-          --shadow-xs: var(--shadow-xs);
-          --shadow-sm: var(--shadow-sm);
-          --shadow-md: var(--shadow-md);
-          --shadow-lg: var(--shadow-lg);
-          --shadow-xl: var(--shadow-xl);
-          --shadow-2xl: var(--shadow-2xl);
-          --shadow-inner: var(--shadow-inner);
-          --default-border-width: calc(var(--border-width) + 1px);
-          --border-width-base: var(--border-width);
-          --border-width-2: calc(var(--border-width) + 2px);
-          --border-width-4: calc(var(--border-width) + 4px);
-          --border-width-8: calc(var(--border-width) + 8px);
-          --stroke-width-0: 0px;
-          --stroke-width-base: var(--stroke-width);
-          --stroke-width-1: calc(var(--stroke-width) + 1px);
-          --stroke-width-2: calc(var(--stroke-width) + 2px);
-          --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
-          --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
-
-          @keyframes collapsible-down {
-            from {
-              height: 0;
-            }
-            to {
-              height: var(--qwikui-collapsible-content-height);
+          @theme inline {
+            --color-background: var(--background);
+            --color-foreground: var(--foreground);
+            --color-card: var(--card);
+            --color-card-foreground: var(--card-foreground);
+            --color-popover: var(--popover);
+            --color-popover-foreground: var(--popover-foreground);
+            --color-primary: var(--primary);
+            --color-primary-foreground: var(--primary-foreground);
+            --color-secondary: var(--secondary);
+            --color-secondary-foreground: var(--secondary-foreground);
+            --color-muted: var(--muted);
+            --color-muted-foreground: var(--muted-foreground);
+            --color-accent: var(--accent);
+            --color-accent-foreground: var(--accent-foreground);
+            --color-alert: var(--alert);
+            --color-alert-foreground: var(--alert-foreground);
+            --color-border: var(--border);
+            --color-input: var(--input);
+            --color-ring: var(--ring);
+            --radius-xs: var(--border-radius);
+            --radius-sm: calc(var(--border-radius) + 0.125rem);
+            --radius-md: calc(var(--border-radius) + 0.375rem);
+            --radius-lg: calc(var(--border-radius) + 0.5rem);
+            --radius-xl: calc(var(--border-radius) + 0.75rem);
+            --radius-2xl: calc(var(--border-radius) + 1rem);
+            --radius-3xl: calc(var(--border-radius) + 1.5rem);
+            --shadow-base: var(--shadow-base);
+            --shadow-2xs: var(--shadow-2xs);
+            --shadow-xs: var(--shadow-xs);
+            --shadow-sm: var(--shadow-sm);
+            --shadow-md: var(--shadow-md);
+            --shadow-lg: var(--shadow-lg);
+            --shadow-xl: var(--shadow-xl);
+            --shadow-2xl: var(--shadow-2xl);
+            --shadow-inner: var(--shadow-inner);
+            --default-border-width: calc(var(--border-width) + 1px);
+            --border-width-base: var(--border-width);
+            --border-width-2: calc(var(--border-width) + 2px);
+            --border-width-4: calc(var(--border-width) + 4px);
+            --border-width-8: calc(var(--border-width) + 8px);
+            --stroke-width-0: 0px;
+            --stroke-width-base: var(--stroke-width);
+            --stroke-width-1: calc(var(--stroke-width) + 1px);
+            --stroke-width-2: calc(var(--stroke-width) + 2px);
+            --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+            --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+            @keyframes collapsible-down {
+              from {
+                height: 0;
+              }
+              to {
+                height: var(--qwikui-collapsible-content-height);
+              }
             }
-          }
-          @keyframes collapsible-up {
-            from {
-              height: var(--qwikui-collapsible-content-height);
-            }
-            to {
-              height: 0;
+            @keyframes collapsible-up {
+              from {
+                height: var(--qwikui-collapsible-content-height);
+              }
+              to {
+                height: 0;
+              }
             }
           }
         }
@@ -416,9 +424,11 @@ test(`GIVEN theme string is 'brutalist base-stone primary-pink-700 border-radius
         --alert-foreground: var(--color-stone-50);
         --ring: black;
         --border-width: 2px;
+        --stroke-width: 2px;
         --border-radius: 0.75rem;
+        --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
+        --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
         --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-        --shadow: 5px 5px rgba(0, 0, 0, 1);
         --shadow-md: 6px 6px rgba(0, 0, 0, 1);
         --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
         --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
@@ -444,9 +454,11 @@ test(`GIVEN theme string is 'brutalist base-stone primary-pink-700 border-radius
         --alert-foreground: var(--color-stone-50);
         --ring: black;
         --border-width: 3px;
+        --stroke-width: 2px;
         --border-radius: 0.75rem;
+        --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
+        --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
         --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-        --shadow: 5px 5px rgba(0, 0, 0, 1);
         --shadow-md: 6px 6px rgba(0, 0, 0, 1);
         --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
         --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
@@ -455,67 +467,69 @@ test(`GIVEN theme string is 'brutalist base-stone primary-pink-700 border-radius
       }
     }
 
-    @theme inline {
-      --color-background: var(--background);
-      --color-foreground: var(--foreground);
-      --color-card: var(--card);
-      --color-card-foreground: var(--card-foreground);
-      --color-popover: var(--popover);
-      --color-popover-foreground: var(--popover-foreground);
-      --color-primary: var(--primary);
-      --color-primary-foreground: var(--primary-foreground);
-      --color-secondary: var(--secondary);
-      --color-secondary-foreground: var(--secondary-foreground);
-      --color-muted: var(--muted);
-      --color-muted-foreground: var(--muted-foreground);
-      --color-accent: var(--accent);
-      --color-accent-foreground: var(--accent-foreground);
-      --color-alert: var(--alert);
-      --color-alert-foreground: var(--alert-foreground);
-      --color-border: var(--border);
-      --color-input: var(--input);
-      --color-ring: var(--ring);
-      --radius-xs: var(--border-radius);
-      --radius-sm: calc(var(--border-radius) + 0.125rem);
-      --radius-md: calc(var(--border-radius) + 0.375rem);
-      --radius-lg: calc(var(--border-radius) + 0.5rem);
-      --radius-xl: calc(var(--border-radius) + 0.75rem);
-      --radius-2xl: calc(var(--border-radius) + 1rem);
-      --radius-3xl: calc(var(--border-radius) + 1.5rem);
-      --shadow-base: var(--shadow-base);
-      --shadow-xs: var(--shadow-xs);
-      --shadow-sm: var(--shadow-sm);
-      --shadow-md: var(--shadow-md);
-      --shadow-lg: var(--shadow-lg);
-      --shadow-xl: var(--shadow-xl);
-      --shadow-2xl: var(--shadow-2xl);
-      --shadow-inner: var(--shadow-inner);
-      --default-border-width: calc(var(--border-width) + 1px);
-      --border-width-base: var(--border-width);
-      --border-width-2: calc(var(--border-width) + 2px);
-      --border-width-4: calc(var(--border-width) + 4px);
-      --border-width-8: calc(var(--border-width) + 8px);
-      --stroke-width-0: 0px;
-      --stroke-width-base: var(--stroke-width);
-      --stroke-width-1: calc(var(--stroke-width) + 1px);
-      --stroke-width-2: calc(var(--stroke-width) + 2px);
-      --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
-      --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
-
-      @keyframes collapsible-down {
-        from {
-          height: 0;
-        }
-        to {
-          height: var(--qwikui-collapsible-content-height);
-        }
-      }
-      @keyframes collapsible-up {
-        from {
-          height: var(--qwikui-collapsible-content-height);
+      @theme inline {
+        --color-background: var(--background);
+        --color-foreground: var(--foreground);
+        --color-card: var(--card);
+        --color-card-foreground: var(--card-foreground);
+        --color-popover: var(--popover);
+        --color-popover-foreground: var(--popover-foreground);
+        --color-primary: var(--primary);
+        --color-primary-foreground: var(--primary-foreground);
+        --color-secondary: var(--secondary);
+        --color-secondary-foreground: var(--secondary-foreground);
+        --color-muted: var(--muted);
+        --color-muted-foreground: var(--muted-foreground);
+        --color-accent: var(--accent);
+        --color-accent-foreground: var(--accent-foreground);
+        --color-alert: var(--alert);
+        --color-alert-foreground: var(--alert-foreground);
+        --color-border: var(--border);
+        --color-input: var(--input);
+        --color-ring: var(--ring);
+        --radius-xs: var(--border-radius);
+        --radius-sm: calc(var(--border-radius) + 0.125rem);
+        --radius-md: calc(var(--border-radius) + 0.375rem);
+        --radius-lg: calc(var(--border-radius) + 0.5rem);
+        --radius-xl: calc(var(--border-radius) + 0.75rem);
+        --radius-2xl: calc(var(--border-radius) + 1rem);
+        --radius-3xl: calc(var(--border-radius) + 1.5rem);
+        --shadow-base: var(--shadow-base);
+        --shadow-2xs: var(--shadow-2xs);
+        --shadow-xs: var(--shadow-xs);
+        --shadow-sm: var(--shadow-sm);
+        --shadow-md: var(--shadow-md);
+        --shadow-lg: var(--shadow-lg);
+        --shadow-xl: var(--shadow-xl);
+        --shadow-2xl: var(--shadow-2xl);
+        --shadow-inner: var(--shadow-inner);
+        --default-border-width: calc(var(--border-width) + 1px);
+        --border-width-base: var(--border-width);
+        --border-width-2: calc(var(--border-width) + 2px);
+        --border-width-4: calc(var(--border-width) + 4px);
+        --border-width-8: calc(var(--border-width) + 8px);
+        --stroke-width-0: 0px;
+        --stroke-width-base: var(--stroke-width);
+        --stroke-width-1: calc(var(--stroke-width) + 1px);
+        --stroke-width-2: calc(var(--stroke-width) + 2px);
+        --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+        --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+        @keyframes collapsible-down {
+          from {
+            height: 0;
+          }
+          to {
+            height: var(--qwikui-collapsible-content-height);
+          }
         }
-        to {
-          height: 0;
+        @keyframes collapsible-up {
+          from {
+            height: var(--qwikui-collapsible-content-height);
+          }
+          to {
+            height: 0;
+          }
         }
       }
     }
@@ -595,9 +609,11 @@ test(`GIVEN primary color is "pink-700",
           --alert-foreground: var(--color-stone-50);
           --ring: black;
           --border-width: 2px;
+          --stroke-width: 2px;
           --border-radius: 0.75rem;
+          --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
+          --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
           --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-          --shadow: 5px 5px rgba(0, 0, 0, 1);
           --shadow-md: 6px 6px rgba(0, 0, 0, 1);
           --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
           --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
@@ -623,9 +639,11 @@ test(`GIVEN primary color is "pink-700",
           --alert-foreground: var(--color-stone-50);
           --ring: black;
           --border-width: 3px;
+          --stroke-width: 2px;
           --border-radius: 0.75rem;
+          --shadow-2xs: 1px 1px rgba(0, 0, 0, 1);
+          --shadow-xs: 2px 2px rgba(0, 0, 0, 1);
           --shadow-sm: 4px 4px rgba(0, 0, 0, 1);
-          --shadow: 5px 5px rgba(0, 0, 0, 1);
           --shadow-md: 6px 6px rgba(0, 0, 0, 1);
           --shadow-lg: 8px 8px rgba(0, 0, 0, 1);
           --shadow-xl: 11px 11px rgba(0, 0, 0, 1);
@@ -634,67 +652,69 @@ test(`GIVEN primary color is "pink-700",
         }
       }
 
-      @theme inline {
-        --color-background: var(--background);
-        --color-foreground: var(--foreground);
-        --color-card: var(--card);
-        --color-card-foreground: var(--card-foreground);
-        --color-popover: var(--popover);
-        --color-popover-foreground: var(--popover-foreground);
-        --color-primary: var(--primary);
-        --color-primary-foreground: var(--primary-foreground);
-        --color-secondary: var(--secondary);
-        --color-secondary-foreground: var(--secondary-foreground);
-        --color-muted: var(--muted);
-        --color-muted-foreground: var(--muted-foreground);
-        --color-accent: var(--accent);
-        --color-accent-foreground: var(--accent-foreground);
-        --color-alert: var(--alert);
-        --color-alert-foreground: var(--alert-foreground);
-        --color-border: var(--border);
-        --color-input: var(--input);
-        --color-ring: var(--ring);
-        --radius-xs: var(--border-radius);
-        --radius-sm: calc(var(--border-radius) + 0.125rem);
-        --radius-md: calc(var(--border-radius) + 0.375rem);
-        --radius-lg: calc(var(--border-radius) + 0.5rem);
-        --radius-xl: calc(var(--border-radius) + 0.75rem);
-        --radius-2xl: calc(var(--border-radius) + 1rem);
-        --radius-3xl: calc(var(--border-radius) + 1.5rem);
-        --shadow-base: var(--shadow-base);
-        --shadow-xs: var(--shadow-xs);
-        --shadow-sm: var(--shadow-sm);
-        --shadow-md: var(--shadow-md);
-        --shadow-lg: var(--shadow-lg);
-        --shadow-xl: var(--shadow-xl);
-        --shadow-2xl: var(--shadow-2xl);
-        --shadow-inner: var(--shadow-inner);
-        --default-border-width: calc(var(--border-width) + 1px);
-        --border-width-base: var(--border-width);
-        --border-width-2: calc(var(--border-width) + 2px);
-        --border-width-4: calc(var(--border-width) + 4px);
-        --border-width-8: calc(var(--border-width) + 8px);
-        --stroke-width-0: 0px;
-        --stroke-width-base: var(--stroke-width);
-        --stroke-width-1: calc(var(--stroke-width) + 1px);
-        --stroke-width-2: calc(var(--stroke-width) + 2px);
-        --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
-        --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+        @theme inline {
+          --color-background: var(--background);
+          --color-foreground: var(--foreground);
+          --color-card: var(--card);
+          --color-card-foreground: var(--card-foreground);
+          --color-popover: var(--popover);
+          --color-popover-foreground: var(--popover-foreground);
+          --color-primary: var(--primary);
+          --color-primary-foreground: var(--primary-foreground);
+          --color-secondary: var(--secondary);
+          --color-secondary-foreground: var(--secondary-foreground);
+          --color-muted: var(--muted);
+          --color-muted-foreground: var(--muted-foreground);
+          --color-accent: var(--accent);
+          --color-accent-foreground: var(--accent-foreground);
+          --color-alert: var(--alert);
+          --color-alert-foreground: var(--alert-foreground);
+          --color-border: var(--border);
+          --color-input: var(--input);
+          --color-ring: var(--ring);
+          --radius-xs: var(--border-radius);
+          --radius-sm: calc(var(--border-radius) + 0.125rem);
+          --radius-md: calc(var(--border-radius) + 0.375rem);
+          --radius-lg: calc(var(--border-radius) + 0.5rem);
+          --radius-xl: calc(var(--border-radius) + 0.75rem);
+          --radius-2xl: calc(var(--border-radius) + 1rem);
+          --radius-3xl: calc(var(--border-radius) + 1.5rem);
+          --shadow-base: var(--shadow-base);
+          --shadow-2xs: var(--shadow-2xs);
+          --shadow-xs: var(--shadow-xs);
+          --shadow-sm: var(--shadow-sm);
+          --shadow-md: var(--shadow-md);
+          --shadow-lg: var(--shadow-lg);
+          --shadow-xl: var(--shadow-xl);
+          --shadow-2xl: var(--shadow-2xl);
+          --shadow-inner: var(--shadow-inner);
+          --default-border-width: calc(var(--border-width) + 1px);
+          --border-width-base: var(--border-width);
+          --border-width-2: calc(var(--border-width) + 2px);
+          --border-width-4: calc(var(--border-width) + 4px);
+          --border-width-8: calc(var(--border-width) + 8px);
+          --stroke-width-0: 0px;
+          --stroke-width-base: var(--stroke-width);
+          --stroke-width-1: calc(var(--stroke-width) + 1px);
+          --stroke-width-2: calc(var(--stroke-width) + 2px);
+          --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+          --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
 
-        @keyframes collapsible-down {
-          from {
-            height: 0;
-          }
-          to {
-            height: var(--qwikui-collapsible-content-height);
-          }
-        }
-        @keyframes collapsible-up {
-          from {
-            height: var(--qwikui-collapsible-content-height);
+          @keyframes collapsible-down {
+            from {
+              height: 0;
+            }
+            to {
+              height: var(--qwikui-collapsible-content-height);
+            }
           }
-          to {
-            height: 0;
+          @keyframes collapsible-up {
+            from {
+              height: var(--qwikui-collapsible-content-height);
+            }
+            to {
+              height: 0;
+            }
           }
         }
       }

From 3d74301c52c79331ebef14db15d4c2ed11dce408 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Sun, 17 Aug 2025 11:04:28 +0200
Subject: [PATCH 35/42] chore: prettierrc tailwindStylesheet

---
 .prettierrc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.prettierrc b/.prettierrc
index b4fa68fef..bbff08ac9 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -4,6 +4,6 @@
   "trailingComma": "all",
   "printWidth": 90,
   "plugins": ["prettier-plugin-tailwindcss"],
-  "tailwindConfig": "./apps/website/src/global.css",
+  "tailwindStylesheet": "./apps/website/src/global.css",
   "tailwindFunctions": ["clsx", "cva"]
 }

From e83a9cf46d88af3f8b319af06168e2552f081a58 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Sat, 23 Aug 2025 11:37:50 +0200
Subject: [PATCH 36/42] fix: extract-theme-css extra curly brace

---
 packages/utils/src/theme/extract-theme-css.ts | 123 +++++++++---------
 1 file changed, 61 insertions(+), 62 deletions(-)

diff --git a/packages/utils/src/theme/extract-theme-css.ts b/packages/utils/src/theme/extract-theme-css.ts
index cd1a887a6..4f0a115cd 100644
--- a/packages/utils/src/theme/extract-theme-css.ts
+++ b/packages/utils/src/theme/extract-theme-css.ts
@@ -271,69 +271,68 @@ function objThemeToCSSThemeOutput(themeObject: ThemeMap) {
 
   cssOutput += `}
 
-  @theme inline {
-    --color-background: var(--background);
-    --color-foreground: var(--foreground);
-    --color-card: var(--card);
-    --color-card-foreground: var(--card-foreground);
-    --color-popover: var(--popover);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-primary: var(--primary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-secondary: var(--secondary);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-muted: var(--muted);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-accent: var(--accent);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-alert: var(--alert);
-    --color-alert-foreground: var(--alert-foreground);
-    --color-border: var(--border);
-    --color-input: var(--input);
-    --color-ring: var(--ring);
-    --radius-xs: var(--border-radius);
-    --radius-sm: calc(var(--border-radius) + 0.125rem);
-    --radius-md: calc(var(--border-radius) + 0.375rem);
-    --radius-lg: calc(var(--border-radius) + 0.5rem);
-    --radius-xl: calc(var(--border-radius) + 0.75rem);
-    --radius-2xl: calc(var(--border-radius) + 1rem);
-    --radius-3xl: calc(var(--border-radius) + 1.5rem);
-    --shadow-base: var(--shadow-base);
-    --shadow-2xs: var(--shadow-2xs);
-    --shadow-xs: var(--shadow-xs);
-    --shadow-sm: var(--shadow-sm);
-    --shadow-md: var(--shadow-md);
-    --shadow-lg: var(--shadow-lg);
-    --shadow-xl: var(--shadow-xl);
-    --shadow-2xl: var(--shadow-2xl);
-    --shadow-inner: var(--shadow-inner);
-    --default-border-width: calc(var(--border-width) + 1px);
-    --border-width-base: var(--border-width);
-    --border-width-2: calc(var(--border-width) + 2px);
-    --border-width-4: calc(var(--border-width) + 4px);
-    --border-width-8: calc(var(--border-width) + 8px);
-    --stroke-width-0: 0px;
-    --stroke-width-base: var(--stroke-width);
-    --stroke-width-1: calc(var(--stroke-width) + 1px);
-    --stroke-width-2: calc(var(--stroke-width) + 2px);
-    --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
-    --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
-
-    @keyframes collapsible-down {
-      from {
-        height: 0;
-      }
-      to {
-        height: var(--qwikui-collapsible-content-height);
-      }
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-alert: var(--alert);
+  --color-alert-foreground: var(--alert-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-xs: var(--border-radius);
+  --radius-sm: calc(var(--border-radius) + 0.125rem);
+  --radius-md: calc(var(--border-radius) + 0.375rem);
+  --radius-lg: calc(var(--border-radius) + 0.5rem);
+  --radius-xl: calc(var(--border-radius) + 0.75rem);
+  --radius-2xl: calc(var(--border-radius) + 1rem);
+  --radius-3xl: calc(var(--border-radius) + 1.5rem);
+  --shadow-base: var(--shadow-base);
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+  --shadow-inner: var(--shadow-inner);
+  --default-border-width: calc(var(--border-width) + 1px);
+  --border-width-base: var(--border-width);
+  --border-width-2: calc(var(--border-width) + 2px);
+  --border-width-4: calc(var(--border-width) + 4px);
+  --border-width-8: calc(var(--border-width) + 8px);
+  --stroke-width-0: 0px;
+  --stroke-width-base: var(--stroke-width);
+  --stroke-width-1: calc(var(--stroke-width) + 1px);
+  --stroke-width-2: calc(var(--stroke-width) + 2px);
+  --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+  --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+  @keyframes collapsible-down {
+    from {
+      height: 0;
     }
-    @keyframes collapsible-up {
-      from {
-        height: var(--qwikui-collapsible-content-height);
-      }
-      to {
-        height: 0;
-      }
+    to {
+      height: var(--qwikui-collapsible-content-height);
+    }
+  }
+  @keyframes collapsible-up {
+    from {
+      height: var(--qwikui-collapsible-content-height);
+    }
+    to {
+      height: 0;
     }
   }
 }

From 35cda30207db67995bc610aef70f5f54121fd1ac Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Sat, 23 Aug 2025 11:43:15 +0200
Subject: [PATCH 37/42] fix: let the cli install tw-animate-css instead of
 tailwindcss-animate

---
 packages/cli/src/_shared/external-deps.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/src/_shared/external-deps.json b/packages/cli/src/_shared/external-deps.json
index aded42930..69befd717 100644
--- a/packages/cli/src/_shared/external-deps.json
+++ b/packages/cli/src/_shared/external-deps.json
@@ -1,5 +1,5 @@
 {
-  "tailwindcss-animate": "^1.0.7",
+  "tw-animate-css": "^1.3.7",
   "class-variance-authority": "0.7.1",
   "@qwikest/icons": "^0.0.13"
 }

From f3480eb64eea5608f95a2595f025fe6f3d141387 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Sat, 23 Aug 2025 11:50:12 +0200
Subject: [PATCH 38/42] docs: update install deps

---
 .../src/routes/docs/styled/(getting-started)/install/index.mdx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx b/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx
index cb2308dc6..da0929c42 100644
--- a/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx
+++ b/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx
@@ -35,7 +35,7 @@ pnpm qwik-ui add input
 ### Step 1: Install the Headless Kit and qwikest icons
 
 ```zsh
-pnpm i -D @qwik-ui/headless @qwikest/icons tailwindcss-animate @qwik-ui/utils class-variance-authority
+pnpm i -D @qwik-ui/headless @qwikest/icons @qwik-ui/utils tw-animate-css class-variance-authority
 ```
 
 ### Step 2: copy/paste your theme config

From 7152724931cdce43308257ceb7013df2f265f424 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Sat, 23 Aug 2025 12:15:50 +0200
Subject: [PATCH 39/42] test: cli update snapshots

---
 .../setup-tailwind-generator.spec.ts          | 309 ++++++++----------
 1 file changed, 137 insertions(+), 172 deletions(-)

diff --git a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
index 088dd9a2f..8c4ac0f21 100644
--- a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
+++ b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
@@ -8,20 +8,7 @@ describe('Setup Tailwind generator', () => {
     const options: SetupTailwindGeneratorSchema = {};
     const tree = createTreeWithEmptyWorkspace();
 
-    tree.write(
-      'src/global.css',
-      `@tailwind components;
-@tailwind base;
-@tailwind utilities;
-
-html {
-  height: 100%;
-  min-height: 100%; 
-  scroll-behavior: smooth;
-  background-color: var(--color-bg) !important;
-  color: var(--color-text) !important;
-}`,
-    );
+    tree.write('src/global.css', '');
 
     return {
       tree,
@@ -41,11 +28,7 @@ html {
     const updatedGlobalCssContent = tree.read('src/global.css', 'utf-8');
 
     expect(updatedGlobalCssContent).toMatchInlineSnapshot(`
-      "
-        @tailwind components;
-      @tailwind base;
-      @tailwind utilities;
-        @layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+      "@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
       @import 'tailwindcss';
       @import 'tw-animate-css';
 
@@ -79,9 +62,12 @@ html {
           --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
           --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
           --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+          --shadow-md:
+            0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+          --shadow-lg:
+            0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+          --shadow-xl:
+            0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
           --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
           --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
           --transform-press: scale(0.95);
@@ -113,78 +99,80 @@ html {
           --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
           --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
           --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+          --shadow-md:
+            0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+          --shadow-lg:
+            0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+          --shadow-xl:
+            0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
           --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
           --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
           --transform-press: scale(0.95);
         }
       }
 
-        @theme inline {
-          --color-background: var(--background);
-          --color-foreground: var(--foreground);
-          --color-card: var(--card);
-          --color-card-foreground: var(--card-foreground);
-          --color-popover: var(--popover);
-          --color-popover-foreground: var(--popover-foreground);
-          --color-primary: var(--primary);
-          --color-primary-foreground: var(--primary-foreground);
-          --color-secondary: var(--secondary);
-          --color-secondary-foreground: var(--secondary-foreground);
-          --color-muted: var(--muted);
-          --color-muted-foreground: var(--muted-foreground);
-          --color-accent: var(--accent);
-          --color-accent-foreground: var(--accent-foreground);
-          --color-alert: var(--alert);
-          --color-alert-foreground: var(--alert-foreground);
-          --color-border: var(--border);
-          --color-input: var(--input);
-          --color-ring: var(--ring);
-          --radius-xs: var(--border-radius);
-          --radius-sm: calc(var(--border-radius) + 0.125rem);
-          --radius-md: calc(var(--border-radius) + 0.375rem);
-          --radius-lg: calc(var(--border-radius) + 0.5rem);
-          --radius-xl: calc(var(--border-radius) + 0.75rem);
-          --radius-2xl: calc(var(--border-radius) + 1rem);
-          --radius-3xl: calc(var(--border-radius) + 1.5rem);
-          --shadow-base: var(--shadow-base);
-          --shadow-2xs: var(--shadow-2xs);
-          --shadow-xs: var(--shadow-xs);
-          --shadow-sm: var(--shadow-sm);
-          --shadow-md: var(--shadow-md);
-          --shadow-lg: var(--shadow-lg);
-          --shadow-xl: var(--shadow-xl);
-          --shadow-2xl: var(--shadow-2xl);
-          --shadow-inner: var(--shadow-inner);
-          --default-border-width: calc(var(--border-width) + 1px);
-          --border-width-base: var(--border-width);
-          --border-width-2: calc(var(--border-width) + 2px);
-          --border-width-4: calc(var(--border-width) + 4px);
-          --border-width-8: calc(var(--border-width) + 8px);
-          --stroke-width-0: 0px;
-          --stroke-width-base: var(--stroke-width);
-          --stroke-width-1: calc(var(--stroke-width) + 1px);
-          --stroke-width-2: calc(var(--stroke-width) + 2px);
-          --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
-          --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+      @theme inline {
+        --color-background: var(--background);
+        --color-foreground: var(--foreground);
+        --color-card: var(--card);
+        --color-card-foreground: var(--card-foreground);
+        --color-popover: var(--popover);
+        --color-popover-foreground: var(--popover-foreground);
+        --color-primary: var(--primary);
+        --color-primary-foreground: var(--primary-foreground);
+        --color-secondary: var(--secondary);
+        --color-secondary-foreground: var(--secondary-foreground);
+        --color-muted: var(--muted);
+        --color-muted-foreground: var(--muted-foreground);
+        --color-accent: var(--accent);
+        --color-accent-foreground: var(--accent-foreground);
+        --color-alert: var(--alert);
+        --color-alert-foreground: var(--alert-foreground);
+        --color-border: var(--border);
+        --color-input: var(--input);
+        --color-ring: var(--ring);
+        --radius-xs: var(--border-radius);
+        --radius-sm: calc(var(--border-radius) + 0.125rem);
+        --radius-md: calc(var(--border-radius) + 0.375rem);
+        --radius-lg: calc(var(--border-radius) + 0.5rem);
+        --radius-xl: calc(var(--border-radius) + 0.75rem);
+        --radius-2xl: calc(var(--border-radius) + 1rem);
+        --radius-3xl: calc(var(--border-radius) + 1.5rem);
+        --shadow-base: var(--shadow-base);
+        --shadow-2xs: var(--shadow-2xs);
+        --shadow-xs: var(--shadow-xs);
+        --shadow-sm: var(--shadow-sm);
+        --shadow-md: var(--shadow-md);
+        --shadow-lg: var(--shadow-lg);
+        --shadow-xl: var(--shadow-xl);
+        --shadow-2xl: var(--shadow-2xl);
+        --shadow-inner: var(--shadow-inner);
+        --default-border-width: calc(var(--border-width) + 1px);
+        --border-width-base: var(--border-width);
+        --border-width-2: calc(var(--border-width) + 2px);
+        --border-width-4: calc(var(--border-width) + 4px);
+        --border-width-8: calc(var(--border-width) + 8px);
+        --stroke-width-0: 0px;
+        --stroke-width-base: var(--stroke-width);
+        --stroke-width-1: calc(var(--stroke-width) + 1px);
+        --stroke-width-2: calc(var(--stroke-width) + 2px);
+        --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+        --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
 
-          @keyframes collapsible-down {
-            from {
-              height: 0;
-            }
-            to {
-              height: var(--qwikui-collapsible-content-height);
-            }
+        @keyframes collapsible-down {
+          from {
+            height: 0;
+          }
+          to {
+            height: var(--qwikui-collapsible-content-height);
+          }
+        }
+        @keyframes collapsible-up {
+          from {
+            height: var(--qwikui-collapsible-content-height);
           }
-          @keyframes collapsible-up {
-            from {
-              height: var(--qwikui-collapsible-content-height);
-            }
-            to {
-              height: 0;
-            }
+          to {
+            height: 0;
           }
         }
       }
@@ -222,16 +210,7 @@ html {
           @apply bg-background text-foreground;
         }
       }
-        
-
-      html {
-        height: 100%;
-        min-height: 100%; 
-        scroll-behavior: smooth;
-        background-color: var(--color-bg) !important;
-        color: var(--color-text) !important;
-      }
-        "
+      "
     `);
   });
   test(`
@@ -249,11 +228,7 @@ html {
     const updatedGlobalCssContent = tree.read('src/global.css', 'utf-8');
 
     expect(updatedGlobalCssContent).toMatchInlineSnapshot(`
-      "
-        @tailwind components;
-      @tailwind base;
-      @tailwind utilities;
-        @layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+      "@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
       @import 'tailwindcss';
       @import 'tw-animate-css';
 
@@ -330,69 +305,68 @@ html {
         }
       }
 
-        @theme inline {
-          --color-background: var(--background);
-          --color-foreground: var(--foreground);
-          --color-card: var(--card);
-          --color-card-foreground: var(--card-foreground);
-          --color-popover: var(--popover);
-          --color-popover-foreground: var(--popover-foreground);
-          --color-primary: var(--primary);
-          --color-primary-foreground: var(--primary-foreground);
-          --color-secondary: var(--secondary);
-          --color-secondary-foreground: var(--secondary-foreground);
-          --color-muted: var(--muted);
-          --color-muted-foreground: var(--muted-foreground);
-          --color-accent: var(--accent);
-          --color-accent-foreground: var(--accent-foreground);
-          --color-alert: var(--alert);
-          --color-alert-foreground: var(--alert-foreground);
-          --color-border: var(--border);
-          --color-input: var(--input);
-          --color-ring: var(--ring);
-          --radius-xs: var(--border-radius);
-          --radius-sm: calc(var(--border-radius) + 0.125rem);
-          --radius-md: calc(var(--border-radius) + 0.375rem);
-          --radius-lg: calc(var(--border-radius) + 0.5rem);
-          --radius-xl: calc(var(--border-radius) + 0.75rem);
-          --radius-2xl: calc(var(--border-radius) + 1rem);
-          --radius-3xl: calc(var(--border-radius) + 1.5rem);
-          --shadow-base: var(--shadow-base);
-          --shadow-2xs: var(--shadow-2xs);
-          --shadow-xs: var(--shadow-xs);
-          --shadow-sm: var(--shadow-sm);
-          --shadow-md: var(--shadow-md);
-          --shadow-lg: var(--shadow-lg);
-          --shadow-xl: var(--shadow-xl);
-          --shadow-2xl: var(--shadow-2xl);
-          --shadow-inner: var(--shadow-inner);
-          --default-border-width: calc(var(--border-width) + 1px);
-          --border-width-base: var(--border-width);
-          --border-width-2: calc(var(--border-width) + 2px);
-          --border-width-4: calc(var(--border-width) + 4px);
-          --border-width-8: calc(var(--border-width) + 8px);
-          --stroke-width-0: 0px;
-          --stroke-width-base: var(--stroke-width);
-          --stroke-width-1: calc(var(--stroke-width) + 1px);
-          --stroke-width-2: calc(var(--stroke-width) + 2px);
-          --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
-          --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+      @theme inline {
+        --color-background: var(--background);
+        --color-foreground: var(--foreground);
+        --color-card: var(--card);
+        --color-card-foreground: var(--card-foreground);
+        --color-popover: var(--popover);
+        --color-popover-foreground: var(--popover-foreground);
+        --color-primary: var(--primary);
+        --color-primary-foreground: var(--primary-foreground);
+        --color-secondary: var(--secondary);
+        --color-secondary-foreground: var(--secondary-foreground);
+        --color-muted: var(--muted);
+        --color-muted-foreground: var(--muted-foreground);
+        --color-accent: var(--accent);
+        --color-accent-foreground: var(--accent-foreground);
+        --color-alert: var(--alert);
+        --color-alert-foreground: var(--alert-foreground);
+        --color-border: var(--border);
+        --color-input: var(--input);
+        --color-ring: var(--ring);
+        --radius-xs: var(--border-radius);
+        --radius-sm: calc(var(--border-radius) + 0.125rem);
+        --radius-md: calc(var(--border-radius) + 0.375rem);
+        --radius-lg: calc(var(--border-radius) + 0.5rem);
+        --radius-xl: calc(var(--border-radius) + 0.75rem);
+        --radius-2xl: calc(var(--border-radius) + 1rem);
+        --radius-3xl: calc(var(--border-radius) + 1.5rem);
+        --shadow-base: var(--shadow-base);
+        --shadow-2xs: var(--shadow-2xs);
+        --shadow-xs: var(--shadow-xs);
+        --shadow-sm: var(--shadow-sm);
+        --shadow-md: var(--shadow-md);
+        --shadow-lg: var(--shadow-lg);
+        --shadow-xl: var(--shadow-xl);
+        --shadow-2xl: var(--shadow-2xl);
+        --shadow-inner: var(--shadow-inner);
+        --default-border-width: calc(var(--border-width) + 1px);
+        --border-width-base: var(--border-width);
+        --border-width-2: calc(var(--border-width) + 2px);
+        --border-width-4: calc(var(--border-width) + 4px);
+        --border-width-8: calc(var(--border-width) + 8px);
+        --stroke-width-0: 0px;
+        --stroke-width-base: var(--stroke-width);
+        --stroke-width-1: calc(var(--stroke-width) + 1px);
+        --stroke-width-2: calc(var(--stroke-width) + 2px);
+        --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+        --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
 
-          @keyframes collapsible-down {
-            from {
-              height: 0;
-            }
-            to {
-              height: var(--qwikui-collapsible-content-height);
-            }
+        @keyframes collapsible-down {
+          from {
+            height: 0;
+          }
+          to {
+            height: var(--qwikui-collapsible-content-height);
+          }
+        }
+        @keyframes collapsible-up {
+          from {
+            height: var(--qwikui-collapsible-content-height);
           }
-          @keyframes collapsible-up {
-            from {
-              height: var(--qwikui-collapsible-content-height);
-            }
-            to {
-              height: 0;
-            }
+          to {
+            height: 0;
           }
         }
       }
@@ -430,16 +404,7 @@ html {
           @apply bg-background text-foreground;
         }
       }
-        
-
-      html {
-        height: 100%;
-        min-height: 100%; 
-        scroll-behavior: smooth;
-        background-color: var(--color-bg) !important;
-        color: var(--color-text) !important;
-      }
-        "
+      "
     `);
   });
 });

From fdec6824cbb46508d5e4831aa5d57b59bba1c37c Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Sat, 23 Aug 2025 12:16:21 +0200
Subject: [PATCH 40/42] test: utils:test update snapshots

---
 .../utils/src/theme/extract-theme-css.spec.ts | 488 +++++++++---------
 1 file changed, 242 insertions(+), 246 deletions(-)

diff --git a/packages/utils/src/theme/extract-theme-css.spec.ts b/packages/utils/src/theme/extract-theme-css.spec.ts
index cb03163fa..cf390370a 100644
--- a/packages/utils/src/theme/extract-theme-css.spec.ts
+++ b/packages/utils/src/theme/extract-theme-css.spec.ts
@@ -101,69 +101,68 @@ describe('Extract theme from css', () => {
         }
       }
 
-        @theme inline {
-          --color-background: var(--background);
-          --color-foreground: var(--foreground);
-          --color-card: var(--card);
-          --color-card-foreground: var(--card-foreground);
-          --color-popover: var(--popover);
-          --color-popover-foreground: var(--popover-foreground);
-          --color-primary: var(--primary);
-          --color-primary-foreground: var(--primary-foreground);
-          --color-secondary: var(--secondary);
-          --color-secondary-foreground: var(--secondary-foreground);
-          --color-muted: var(--muted);
-          --color-muted-foreground: var(--muted-foreground);
-          --color-accent: var(--accent);
-          --color-accent-foreground: var(--accent-foreground);
-          --color-alert: var(--alert);
-          --color-alert-foreground: var(--alert-foreground);
-          --color-border: var(--border);
-          --color-input: var(--input);
-          --color-ring: var(--ring);
-          --radius-xs: var(--border-radius);
-          --radius-sm: calc(var(--border-radius) + 0.125rem);
-          --radius-md: calc(var(--border-radius) + 0.375rem);
-          --radius-lg: calc(var(--border-radius) + 0.5rem);
-          --radius-xl: calc(var(--border-radius) + 0.75rem);
-          --radius-2xl: calc(var(--border-radius) + 1rem);
-          --radius-3xl: calc(var(--border-radius) + 1.5rem);
-          --shadow-base: var(--shadow-base);
-          --shadow-2xs: var(--shadow-2xs);
-          --shadow-xs: var(--shadow-xs);
-          --shadow-sm: var(--shadow-sm);
-          --shadow-md: var(--shadow-md);
-          --shadow-lg: var(--shadow-lg);
-          --shadow-xl: var(--shadow-xl);
-          --shadow-2xl: var(--shadow-2xl);
-          --shadow-inner: var(--shadow-inner);
-          --default-border-width: calc(var(--border-width) + 1px);
-          --border-width-base: var(--border-width);
-          --border-width-2: calc(var(--border-width) + 2px);
-          --border-width-4: calc(var(--border-width) + 4px);
-          --border-width-8: calc(var(--border-width) + 8px);
-          --stroke-width-0: 0px;
-          --stroke-width-base: var(--stroke-width);
-          --stroke-width-1: calc(var(--stroke-width) + 1px);
-          --stroke-width-2: calc(var(--stroke-width) + 2px);
-          --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
-          --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+      @theme inline {
+        --color-background: var(--background);
+        --color-foreground: var(--foreground);
+        --color-card: var(--card);
+        --color-card-foreground: var(--card-foreground);
+        --color-popover: var(--popover);
+        --color-popover-foreground: var(--popover-foreground);
+        --color-primary: var(--primary);
+        --color-primary-foreground: var(--primary-foreground);
+        --color-secondary: var(--secondary);
+        --color-secondary-foreground: var(--secondary-foreground);
+        --color-muted: var(--muted);
+        --color-muted-foreground: var(--muted-foreground);
+        --color-accent: var(--accent);
+        --color-accent-foreground: var(--accent-foreground);
+        --color-alert: var(--alert);
+        --color-alert-foreground: var(--alert-foreground);
+        --color-border: var(--border);
+        --color-input: var(--input);
+        --color-ring: var(--ring);
+        --radius-xs: var(--border-radius);
+        --radius-sm: calc(var(--border-radius) + 0.125rem);
+        --radius-md: calc(var(--border-radius) + 0.375rem);
+        --radius-lg: calc(var(--border-radius) + 0.5rem);
+        --radius-xl: calc(var(--border-radius) + 0.75rem);
+        --radius-2xl: calc(var(--border-radius) + 1rem);
+        --radius-3xl: calc(var(--border-radius) + 1.5rem);
+        --shadow-base: var(--shadow-base);
+        --shadow-2xs: var(--shadow-2xs);
+        --shadow-xs: var(--shadow-xs);
+        --shadow-sm: var(--shadow-sm);
+        --shadow-md: var(--shadow-md);
+        --shadow-lg: var(--shadow-lg);
+        --shadow-xl: var(--shadow-xl);
+        --shadow-2xl: var(--shadow-2xl);
+        --shadow-inner: var(--shadow-inner);
+        --default-border-width: calc(var(--border-width) + 1px);
+        --border-width-base: var(--border-width);
+        --border-width-2: calc(var(--border-width) + 2px);
+        --border-width-4: calc(var(--border-width) + 4px);
+        --border-width-8: calc(var(--border-width) + 8px);
+        --stroke-width-0: 0px;
+        --stroke-width-base: var(--stroke-width);
+        --stroke-width-1: calc(var(--stroke-width) + 1px);
+        --stroke-width-2: calc(var(--stroke-width) + 2px);
+        --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+        --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
 
-          @keyframes collapsible-down {
-            from {
-              height: 0;
-            }
-            to {
-              height: var(--qwikui-collapsible-content-height);
-            }
+        @keyframes collapsible-down {
+          from {
+            height: 0;
           }
-          @keyframes collapsible-up {
-            from {
-              height: var(--qwikui-collapsible-content-height);
-            }
-            to {
-              height: 0;
-            }
+          to {
+            height: var(--qwikui-collapsible-content-height);
+          }
+        }
+        @keyframes collapsible-up {
+          from {
+            height: var(--qwikui-collapsible-content-height);
+          }
+          to {
+            height: 0;
           }
         }
       }
@@ -286,69 +285,68 @@ describe('Extract theme from css', () => {
           }
         }
 
-          @theme inline {
-            --color-background: var(--background);
-            --color-foreground: var(--foreground);
-            --color-card: var(--card);
-            --color-card-foreground: var(--card-foreground);
-            --color-popover: var(--popover);
-            --color-popover-foreground: var(--popover-foreground);
-            --color-primary: var(--primary);
-            --color-primary-foreground: var(--primary-foreground);
-            --color-secondary: var(--secondary);
-            --color-secondary-foreground: var(--secondary-foreground);
-            --color-muted: var(--muted);
-            --color-muted-foreground: var(--muted-foreground);
-            --color-accent: var(--accent);
-            --color-accent-foreground: var(--accent-foreground);
-            --color-alert: var(--alert);
-            --color-alert-foreground: var(--alert-foreground);
-            --color-border: var(--border);
-            --color-input: var(--input);
-            --color-ring: var(--ring);
-            --radius-xs: var(--border-radius);
-            --radius-sm: calc(var(--border-radius) + 0.125rem);
-            --radius-md: calc(var(--border-radius) + 0.375rem);
-            --radius-lg: calc(var(--border-radius) + 0.5rem);
-            --radius-xl: calc(var(--border-radius) + 0.75rem);
-            --radius-2xl: calc(var(--border-radius) + 1rem);
-            --radius-3xl: calc(var(--border-radius) + 1.5rem);
-            --shadow-base: var(--shadow-base);
-            --shadow-2xs: var(--shadow-2xs);
-            --shadow-xs: var(--shadow-xs);
-            --shadow-sm: var(--shadow-sm);
-            --shadow-md: var(--shadow-md);
-            --shadow-lg: var(--shadow-lg);
-            --shadow-xl: var(--shadow-xl);
-            --shadow-2xl: var(--shadow-2xl);
-            --shadow-inner: var(--shadow-inner);
-            --default-border-width: calc(var(--border-width) + 1px);
-            --border-width-base: var(--border-width);
-            --border-width-2: calc(var(--border-width) + 2px);
-            --border-width-4: calc(var(--border-width) + 4px);
-            --border-width-8: calc(var(--border-width) + 8px);
-            --stroke-width-0: 0px;
-            --stroke-width-base: var(--stroke-width);
-            --stroke-width-1: calc(var(--stroke-width) + 1px);
-            --stroke-width-2: calc(var(--stroke-width) + 2px);
-            --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
-            --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
-
-            @keyframes collapsible-down {
-              from {
-                height: 0;
-              }
-              to {
-                height: var(--qwikui-collapsible-content-height);
-              }
+        @theme inline {
+          --color-background: var(--background);
+          --color-foreground: var(--foreground);
+          --color-card: var(--card);
+          --color-card-foreground: var(--card-foreground);
+          --color-popover: var(--popover);
+          --color-popover-foreground: var(--popover-foreground);
+          --color-primary: var(--primary);
+          --color-primary-foreground: var(--primary-foreground);
+          --color-secondary: var(--secondary);
+          --color-secondary-foreground: var(--secondary-foreground);
+          --color-muted: var(--muted);
+          --color-muted-foreground: var(--muted-foreground);
+          --color-accent: var(--accent);
+          --color-accent-foreground: var(--accent-foreground);
+          --color-alert: var(--alert);
+          --color-alert-foreground: var(--alert-foreground);
+          --color-border: var(--border);
+          --color-input: var(--input);
+          --color-ring: var(--ring);
+          --radius-xs: var(--border-radius);
+          --radius-sm: calc(var(--border-radius) + 0.125rem);
+          --radius-md: calc(var(--border-radius) + 0.375rem);
+          --radius-lg: calc(var(--border-radius) + 0.5rem);
+          --radius-xl: calc(var(--border-radius) + 0.75rem);
+          --radius-2xl: calc(var(--border-radius) + 1rem);
+          --radius-3xl: calc(var(--border-radius) + 1.5rem);
+          --shadow-base: var(--shadow-base);
+          --shadow-2xs: var(--shadow-2xs);
+          --shadow-xs: var(--shadow-xs);
+          --shadow-sm: var(--shadow-sm);
+          --shadow-md: var(--shadow-md);
+          --shadow-lg: var(--shadow-lg);
+          --shadow-xl: var(--shadow-xl);
+          --shadow-2xl: var(--shadow-2xl);
+          --shadow-inner: var(--shadow-inner);
+          --default-border-width: calc(var(--border-width) + 1px);
+          --border-width-base: var(--border-width);
+          --border-width-2: calc(var(--border-width) + 2px);
+          --border-width-4: calc(var(--border-width) + 4px);
+          --border-width-8: calc(var(--border-width) + 8px);
+          --stroke-width-0: 0px;
+          --stroke-width-base: var(--stroke-width);
+          --stroke-width-1: calc(var(--stroke-width) + 1px);
+          --stroke-width-2: calc(var(--stroke-width) + 2px);
+          --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+          --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+          @keyframes collapsible-down {
+            from {
+              height: 0;
             }
-            @keyframes collapsible-up {
-              from {
-                height: var(--qwikui-collapsible-content-height);
-              }
-              to {
-                height: 0;
-              }
+            to {
+              height: var(--qwikui-collapsible-content-height);
+            }
+          }
+          @keyframes collapsible-up {
+            from {
+              height: var(--qwikui-collapsible-content-height);
+            }
+            to {
+              height: 0;
             }
           }
         }
@@ -467,69 +465,68 @@ test(`GIVEN theme string is 'brutalist base-stone primary-pink-700 border-radius
       }
     }
 
-      @theme inline {
-        --color-background: var(--background);
-        --color-foreground: var(--foreground);
-        --color-card: var(--card);
-        --color-card-foreground: var(--card-foreground);
-        --color-popover: var(--popover);
-        --color-popover-foreground: var(--popover-foreground);
-        --color-primary: var(--primary);
-        --color-primary-foreground: var(--primary-foreground);
-        --color-secondary: var(--secondary);
-        --color-secondary-foreground: var(--secondary-foreground);
-        --color-muted: var(--muted);
-        --color-muted-foreground: var(--muted-foreground);
-        --color-accent: var(--accent);
-        --color-accent-foreground: var(--accent-foreground);
-        --color-alert: var(--alert);
-        --color-alert-foreground: var(--alert-foreground);
-        --color-border: var(--border);
-        --color-input: var(--input);
-        --color-ring: var(--ring);
-        --radius-xs: var(--border-radius);
-        --radius-sm: calc(var(--border-radius) + 0.125rem);
-        --radius-md: calc(var(--border-radius) + 0.375rem);
-        --radius-lg: calc(var(--border-radius) + 0.5rem);
-        --radius-xl: calc(var(--border-radius) + 0.75rem);
-        --radius-2xl: calc(var(--border-radius) + 1rem);
-        --radius-3xl: calc(var(--border-radius) + 1.5rem);
-        --shadow-base: var(--shadow-base);
-        --shadow-2xs: var(--shadow-2xs);
-        --shadow-xs: var(--shadow-xs);
-        --shadow-sm: var(--shadow-sm);
-        --shadow-md: var(--shadow-md);
-        --shadow-lg: var(--shadow-lg);
-        --shadow-xl: var(--shadow-xl);
-        --shadow-2xl: var(--shadow-2xl);
-        --shadow-inner: var(--shadow-inner);
-        --default-border-width: calc(var(--border-width) + 1px);
-        --border-width-base: var(--border-width);
-        --border-width-2: calc(var(--border-width) + 2px);
-        --border-width-4: calc(var(--border-width) + 4px);
-        --border-width-8: calc(var(--border-width) + 8px);
-        --stroke-width-0: 0px;
-        --stroke-width-base: var(--stroke-width);
-        --stroke-width-1: calc(var(--stroke-width) + 1px);
-        --stroke-width-2: calc(var(--stroke-width) + 2px);
-        --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
-        --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
-
-        @keyframes collapsible-down {
-          from {
-            height: 0;
-          }
-          to {
-            height: var(--qwikui-collapsible-content-height);
-          }
+    @theme inline {
+      --color-background: var(--background);
+      --color-foreground: var(--foreground);
+      --color-card: var(--card);
+      --color-card-foreground: var(--card-foreground);
+      --color-popover: var(--popover);
+      --color-popover-foreground: var(--popover-foreground);
+      --color-primary: var(--primary);
+      --color-primary-foreground: var(--primary-foreground);
+      --color-secondary: var(--secondary);
+      --color-secondary-foreground: var(--secondary-foreground);
+      --color-muted: var(--muted);
+      --color-muted-foreground: var(--muted-foreground);
+      --color-accent: var(--accent);
+      --color-accent-foreground: var(--accent-foreground);
+      --color-alert: var(--alert);
+      --color-alert-foreground: var(--alert-foreground);
+      --color-border: var(--border);
+      --color-input: var(--input);
+      --color-ring: var(--ring);
+      --radius-xs: var(--border-radius);
+      --radius-sm: calc(var(--border-radius) + 0.125rem);
+      --radius-md: calc(var(--border-radius) + 0.375rem);
+      --radius-lg: calc(var(--border-radius) + 0.5rem);
+      --radius-xl: calc(var(--border-radius) + 0.75rem);
+      --radius-2xl: calc(var(--border-radius) + 1rem);
+      --radius-3xl: calc(var(--border-radius) + 1.5rem);
+      --shadow-base: var(--shadow-base);
+      --shadow-2xs: var(--shadow-2xs);
+      --shadow-xs: var(--shadow-xs);
+      --shadow-sm: var(--shadow-sm);
+      --shadow-md: var(--shadow-md);
+      --shadow-lg: var(--shadow-lg);
+      --shadow-xl: var(--shadow-xl);
+      --shadow-2xl: var(--shadow-2xl);
+      --shadow-inner: var(--shadow-inner);
+      --default-border-width: calc(var(--border-width) + 1px);
+      --border-width-base: var(--border-width);
+      --border-width-2: calc(var(--border-width) + 2px);
+      --border-width-4: calc(var(--border-width) + 4px);
+      --border-width-8: calc(var(--border-width) + 8px);
+      --stroke-width-0: 0px;
+      --stroke-width-base: var(--stroke-width);
+      --stroke-width-1: calc(var(--stroke-width) + 1px);
+      --stroke-width-2: calc(var(--stroke-width) + 2px);
+      --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+      --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+
+      @keyframes collapsible-down {
+        from {
+          height: 0;
         }
-        @keyframes collapsible-up {
-          from {
-            height: var(--qwikui-collapsible-content-height);
-          }
-          to {
-            height: 0;
-          }
+        to {
+          height: var(--qwikui-collapsible-content-height);
+        }
+      }
+      @keyframes collapsible-up {
+        from {
+          height: var(--qwikui-collapsible-content-height);
+        }
+        to {
+          height: 0;
         }
       }
     }
@@ -652,69 +649,68 @@ test(`GIVEN primary color is "pink-700",
         }
       }
 
-        @theme inline {
-          --color-background: var(--background);
-          --color-foreground: var(--foreground);
-          --color-card: var(--card);
-          --color-card-foreground: var(--card-foreground);
-          --color-popover: var(--popover);
-          --color-popover-foreground: var(--popover-foreground);
-          --color-primary: var(--primary);
-          --color-primary-foreground: var(--primary-foreground);
-          --color-secondary: var(--secondary);
-          --color-secondary-foreground: var(--secondary-foreground);
-          --color-muted: var(--muted);
-          --color-muted-foreground: var(--muted-foreground);
-          --color-accent: var(--accent);
-          --color-accent-foreground: var(--accent-foreground);
-          --color-alert: var(--alert);
-          --color-alert-foreground: var(--alert-foreground);
-          --color-border: var(--border);
-          --color-input: var(--input);
-          --color-ring: var(--ring);
-          --radius-xs: var(--border-radius);
-          --radius-sm: calc(var(--border-radius) + 0.125rem);
-          --radius-md: calc(var(--border-radius) + 0.375rem);
-          --radius-lg: calc(var(--border-radius) + 0.5rem);
-          --radius-xl: calc(var(--border-radius) + 0.75rem);
-          --radius-2xl: calc(var(--border-radius) + 1rem);
-          --radius-3xl: calc(var(--border-radius) + 1.5rem);
-          --shadow-base: var(--shadow-base);
-          --shadow-2xs: var(--shadow-2xs);
-          --shadow-xs: var(--shadow-xs);
-          --shadow-sm: var(--shadow-sm);
-          --shadow-md: var(--shadow-md);
-          --shadow-lg: var(--shadow-lg);
-          --shadow-xl: var(--shadow-xl);
-          --shadow-2xl: var(--shadow-2xl);
-          --shadow-inner: var(--shadow-inner);
-          --default-border-width: calc(var(--border-width) + 1px);
-          --border-width-base: var(--border-width);
-          --border-width-2: calc(var(--border-width) + 2px);
-          --border-width-4: calc(var(--border-width) + 4px);
-          --border-width-8: calc(var(--border-width) + 8px);
-          --stroke-width-0: 0px;
-          --stroke-width-base: var(--stroke-width);
-          --stroke-width-1: calc(var(--stroke-width) + 1px);
-          --stroke-width-2: calc(var(--stroke-width) + 2px);
-          --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
-          --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
+      @theme inline {
+        --color-background: var(--background);
+        --color-foreground: var(--foreground);
+        --color-card: var(--card);
+        --color-card-foreground: var(--card-foreground);
+        --color-popover: var(--popover);
+        --color-popover-foreground: var(--popover-foreground);
+        --color-primary: var(--primary);
+        --color-primary-foreground: var(--primary-foreground);
+        --color-secondary: var(--secondary);
+        --color-secondary-foreground: var(--secondary-foreground);
+        --color-muted: var(--muted);
+        --color-muted-foreground: var(--muted-foreground);
+        --color-accent: var(--accent);
+        --color-accent-foreground: var(--accent-foreground);
+        --color-alert: var(--alert);
+        --color-alert-foreground: var(--alert-foreground);
+        --color-border: var(--border);
+        --color-input: var(--input);
+        --color-ring: var(--ring);
+        --radius-xs: var(--border-radius);
+        --radius-sm: calc(var(--border-radius) + 0.125rem);
+        --radius-md: calc(var(--border-radius) + 0.375rem);
+        --radius-lg: calc(var(--border-radius) + 0.5rem);
+        --radius-xl: calc(var(--border-radius) + 0.75rem);
+        --radius-2xl: calc(var(--border-radius) + 1rem);
+        --radius-3xl: calc(var(--border-radius) + 1.5rem);
+        --shadow-base: var(--shadow-base);
+        --shadow-2xs: var(--shadow-2xs);
+        --shadow-xs: var(--shadow-xs);
+        --shadow-sm: var(--shadow-sm);
+        --shadow-md: var(--shadow-md);
+        --shadow-lg: var(--shadow-lg);
+        --shadow-xl: var(--shadow-xl);
+        --shadow-2xl: var(--shadow-2xl);
+        --shadow-inner: var(--shadow-inner);
+        --default-border-width: calc(var(--border-width) + 1px);
+        --border-width-base: var(--border-width);
+        --border-width-2: calc(var(--border-width) + 2px);
+        --border-width-4: calc(var(--border-width) + 4px);
+        --border-width-8: calc(var(--border-width) + 8px);
+        --stroke-width-0: 0px;
+        --stroke-width-base: var(--stroke-width);
+        --stroke-width-1: calc(var(--stroke-width) + 1px);
+        --stroke-width-2: calc(var(--stroke-width) + 2px);
+        --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
+        --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
 
-          @keyframes collapsible-down {
-            from {
-              height: 0;
-            }
-            to {
-              height: var(--qwikui-collapsible-content-height);
-            }
+        @keyframes collapsible-down {
+          from {
+            height: 0;
           }
-          @keyframes collapsible-up {
-            from {
-              height: var(--qwikui-collapsible-content-height);
-            }
-            to {
-              height: 0;
-            }
+          to {
+            height: var(--qwikui-collapsible-content-height);
+          }
+        }
+        @keyframes collapsible-up {
+          from {
+            height: var(--qwikui-collapsible-content-height);
+          }
+          to {
+            height: 0;
           }
         }
       }

From 419d4f4ea6c6bebb4088bcf1bca5867a7f283cdf Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Sat, 23 Aug 2025 12:48:21 +0200
Subject: [PATCH 41/42] chore: changesets

---
 .changeset/fair-hoops-taste.md |  5 +++++
 .changeset/mean-books-act.md   | 17 +++++++++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 .changeset/fair-hoops-taste.md
 create mode 100644 .changeset/mean-books-act.md

diff --git a/.changeset/fair-hoops-taste.md b/.changeset/fair-hoops-taste.md
new file mode 100644
index 000000000..aa3773ec0
--- /dev/null
+++ b/.changeset/fair-hoops-taste.md
@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+fix: the accordion `offsetHeight` is now properly calculated with tailwind v4.
diff --git a/.changeset/mean-books-act.md b/.changeset/mean-books-act.md
new file mode 100644
index 000000000..7e576eaed
--- /dev/null
+++ b/.changeset/mean-books-act.md
@@ -0,0 +1,17 @@
+---
+'@qwik-ui/styled': minor
+'qwik-ui': minor
+---
+
+feat: Qwik UI has now fully migrated and updated the global.css config and components to use tailwind v4. You can copy/paste the components into your project(s) or use the CLI.
+
+## Migration guide:
+
+- Make sure to commit any changes before you start the steps below
+- Run the `npx @tailwindcss/upgrade` script and let it do most of the work for you
+- Remove your tailwind.config.cjs and postcss.config.cjs
+- install the @tailwindcss/vite package and pass it to your vite.config plugins array
+- Copy paste the new css config base tokens, or use the `qwik-ui init` to get them, and adapt them to your project
+- If you are in a monorepo, make sure to `@source “../../../path/to/your/components“;`
+- Add `"w-full"` to Modal PanelVariants position.top and position.bottom; add `"m-auto"` to position.center
+- If you didn't modify some components, you can re-copy/paste (or re-install them with the cli) for their most up to date version

From 27b8ac7559457dfa4e3fca93d1ae02944c0c9d76 Mon Sep 17 00:00:00 2001
From: maiieul <maieul.chevalier@rosa.be>
Date: Sat, 23 Aug 2025 22:13:18 +0200
Subject: [PATCH 42/42] fix: cli package.json utils version

---
 packages/cli/package.json |  2 +-
 pnpm-lock.yaml            | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/cli/package.json b/packages/cli/package.json
index f138869d9..6e81c0f61 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -13,7 +13,7 @@
   "dependencies": {
     "@clack/prompts": "^0.7.0",
     "@nx/devkit": "21.1.2",
-    "@qwik-ui/utils": "0.3.3",
+    "@qwik-ui/utils": "0.3.2",
     "ansis": "2.3.0",
     "tslib": "^2.3.0",
     "yargs": "17.7.2"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 53132c560..4663b4f11 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -297,8 +297,8 @@ importers:
         specifier: 21.1.2
         version: 21.1.2(nx@21.1.2(@swc-node/register@1.10.10(@swc/core@1.11.29(@swc/helpers@0.5.17))(@swc/types@0.1.21)(typescript@5.7.3))(@swc/core@1.11.29(@swc/helpers@0.5.17)))
       '@qwik-ui/utils':
-        specifier: 0.3.3
-        version: link:../utils
+        specifier: 0.3.2
+        version: 0.3.2
       ansis:
         specifier: 2.3.0
         version: 2.3.0
@@ -2503,6 +2503,9 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
+  '@qwik-ui/utils@0.3.2':
+    resolution: {integrity: sha512-N7VY1Vdor+Z+EsfrbyZ5g+hg+sKl+SLr+wr08N4qU3grNrluAPGTk278DMG8tw/FJa2RjM2/f3XewIoBEPtKpA==}
+
   '@qwikest/icons@0.0.13':
     resolution: {integrity: sha512-e0wY8vmx0nDSUiuCATlk+ojTvdBV4txIGHHWjZW5SRkv4XB8H9+3WSDcLPz0ItUdRyzcrohE9k2jtQI/98aRPA==}
     engines: {node: '>=15.0.0'}
@@ -11109,6 +11112,13 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
+  '@qwik-ui/utils@0.3.2':
+    dependencies:
+      clsx: 2.1.1
+      qwik-themes: 0.2.0
+      specificity: 1.0.0
+      tailwind-merge: 1.14.0
+
   '@qwikest/icons@0.0.13(@builder.io/qwik@1.16.0(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0)))':
     dependencies:
       '@builder.io/qwik': 1.16.0(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.1)(yaml@2.8.0))