diff --git a/apps/website/src/routes/docs/headless/pagination/examples/styling.tsx b/apps/website/src/routes/docs/headless/pagination/examples/styling.tsx
index 8ec09c11d..ce79c8e3c 100644
--- a/apps/website/src/routes/docs/headless/pagination/examples/styling.tsx
+++ b/apps/website/src/routes/docs/headless/pagination/examples/styling.tsx
@@ -17,7 +17,7 @@ export default component$(() => {
         }}
         class="border border-foreground p-2"
         defaultClass="border border-primary p-4"
-        selectedClass="border bg-destructive p-4"
+        selectedClass="border bg-alert p-4"
         dividerClass="bg-muted p-4"
       />
 
@@ -29,7 +29,7 @@ export default component$(() => {
         }}
         class="border border-foreground p-2"
         defaultClass="bg-primary w-8 h-8"
-        selectedClass="bg-destructive w-8 h-8"
+        selectedClass="bg-alert w-8 h-8"
         dividerClass="bg-muted h-8 px-2"
       />
 
diff --git a/apps/website/src/routes/docs/styled/input/index.mdx b/apps/website/src/routes/docs/styled/input/index.mdx
index 7d499a6fa..195f7324b 100644
--- a/apps/website/src/routes/docs/styled/input/index.mdx
+++ b/apps/website/src/routes/docs/styled/input/index.mdx
@@ -48,7 +48,7 @@ export const Input = component$<InputProps>(
           id={inputId}
         />
         {error && (
-          <div id={`${inputId}-error`} class="text-destructive mt-1 text-sm">
+          <div id={`${inputId}-error`} class="text-alert mt-1 text-sm">
             {error}
           </div>
         )}
diff --git a/packages/kit-styled/src/components/button/todo.ts b/packages/kit-styled/src/components/button/todo.ts
deleted file mode 100644
index 518c085ea..000000000
--- a/packages/kit-styled/src/components/button/todo.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
-
-  # TODO:
-  
-  * Go over different solutions for inspiration
-    
-    TAILWIND CONFIG
-    * Brand colors
-    * Button state colors
-    
-    PROPS / CVA
-      * SIZES
-        * sm, md, lg, xl, 2xl
-      * SHAPE
-        * Square / rounded-sm / circular
-        * 
-      * ANIMATION
-        * None
-        * Pulse
-        
-      * INTENT
-        * Primary
-        * Secondary
-        * Accent
-        * Danger / Destructive / Error
-        * Success
-        * Warning
-        * Info
-        
-      STATE: 
-        * Active
-        * Disabled
-        
-      * LOOK
-        * Outline 
-        * Ghost
-        * Link
-
-
-    
-    DOCS EXAMPLES:
-    * with Icon
-    * loading state?
-  
-  * Decide on theme / branding colors 
-  * Run storybook locally
-  * Make CVA efficient with Qwik
-  * Find a way to project the source code of this file into the docs
-
-*/
diff --git a/packages/kit-styled/src/components/input/input.tsx b/packages/kit-styled/src/components/input/input.tsx
index 61f2bdd1f..15fb6ae3f 100644
--- a/packages/kit-styled/src/components/input/input.tsx
+++ b/packages/kit-styled/src/components/input/input.tsx
@@ -26,7 +26,7 @@ export const Input = component$<InputProps>(
           name={name}
         />
         {error && (
-          <div id={`${inputId}-error`} class="text-destructive mt-1 text-sm">
+          <div id={`${inputId}-error`} class="mt-1 text-sm text-alert">
             {error}
           </div>
         )}
diff --git a/packages/kit-styled/src/templates/tailwind.extend._template b/packages/kit-styled/src/templates/tailwind.extend._template
index 7b8c27ebb..f12f3a038 100644
--- a/packages/kit-styled/src/templates/tailwind.extend._template
+++ b/packages/kit-styled/src/templates/tailwind.extend._template
@@ -1,41 +1,82 @@
 colors: {
-  border: 'hsl(var(--color-border) / <alpha-value>)',
-  input: 'hsl(var(--color-input) / <alpha-value>)',
-  ring: 'hsl(var(--color-ring) / <alpha-value>)',
-  background: 'hsl(var(--color-background) / <alpha-value>)',
-  foreground: 'hsl(var(--color-foreground) / <alpha-value>)',
-
+  border: 'hsl(var(--border))',
+  input: 'hsl(var(--input))',
+  ring: 'hsl(var(--ring))',
+  background: 'hsl(var(--background))',
+  foreground: 'hsl(var(--foreground))',
   primary: {
-    DEFAULT: 'hsl(var(--color-primary) / <alpha-value>)',
-    foreground: 'hsl(var(--color-primary-foreground) / <alpha-value>)',
+    DEFAULT: 'hsl(var(--primary))',
+    foreground: 'hsl(var(--primary-foreground))',
   },
   secondary: {
-    DEFAULT: 'hsl(var(--color-secondary) / <alpha-value>)',
-    foreground: 'hsl(var(--color-secondary-foreground) / <alpha-value>)',
+    DEFAULT: 'hsl(var(--secondary))',
+    foreground: 'hsl(var(--secondary-foreground))',
   },
-  accent: {
-    DEFAULT: 'hsl(var(--color-accent) / <alpha-value>)',
-    foreground: 'hsl(var(--color-accent-foreground) / <alpha-value>)',
+  alert: {
+    DEFAULT: 'hsl(var(--alert))',
+    foreground: 'hsl(var(--alert-foreground))',
   },
   muted: {
-    DEFAULT: 'hsl(var(--color-muted) / <alpha-value>)',
-    foreground: 'hsl(var(--color-muted-foreground) / <alpha-value>)',
-  },
-  destructive: {
-    DEFAULT: 'hsl(var(--color-destructive) / <alpha-value>)',
-    foreground: 'hsl(var(--color-destructive-foreground) / <alpha-value>)',
+    DEFAULT: 'hsl(var(--muted))',
+    foreground: 'hsl(var(--muted-foreground))',
   },
-  popover: {
-    DEFAULT: 'hsl(var(--color-popover) / <alpha-value>)',
-    foreground: 'hsl(var(--color-popover-foreground) / <alpha-value>)',
+  accent: {
+    DEFAULT: 'hsl(var(--accent))',
+    foreground: 'hsl(var(--accent-foreground))',
   },
   card: {
-    DEFAULT: 'hsl(var(--color-card) / <alpha-value>)',
-    foreground: 'hsl(var(--color-card-foreground) / <alpha-value>)',
+    DEFAULT: 'hsl(var(--card))',
+    foreground: 'hsl(var(--card-foreground))',
+  },
+  popover: {
+    DEFAULT: 'hsl(var(--popover))',
+    foreground: 'hsl(var(--popover-foreground))',
   },
 },
 borderRadius: {
-  lg: 'var(--border-radius)',
-  md: 'calc(var(--border-radius) - 2px)',
-  sm: 'calc(var(--border-radius) - 4px)',
+  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