chore: replace all destructive colors by alert (#982)

Author: maiieul

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"
       />
 

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>
         )}

packages/kit-styled/src/components/button/todo.ts

@@ -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>
         )}

packages/kit-styled/src/components/input/input.tsx

@@ -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' },
+  },
 },