From 35c923e64eaa652c14316dcd38b807757b4c672c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=AFeul?= <45822175+maiieul@users.noreply.github.com> Date: Sun, 6 Oct 2024 23:05:01 +0200 Subject: [PATCH] chore: replace all destructive colors by alert (#982) --- .../headless/pagination/examples/styling.tsx | 4 +- .../src/routes/docs/styled/input/index.mdx | 2 +- .../kit-styled/src/components/button/todo.ts | 50 ---------- .../kit-styled/src/components/input/input.tsx | 2 +- .../src/templates/tailwind.extend._template | 95 +++++++++++++------ 5 files changed, 72 insertions(+), 81 deletions(-) delete mode 100644 packages/kit-styled/src/components/button/todo.ts 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$( id={inputId} /> {error && ( -
+
{error}
)} 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$( name={name} /> {error && ( -
+
{error}
)} 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) / )', - input: 'hsl(var(--color-input) / )', - ring: 'hsl(var(--color-ring) / )', - background: 'hsl(var(--color-background) / )', - foreground: 'hsl(var(--color-foreground) / )', - + 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) / )', - foreground: 'hsl(var(--color-primary-foreground) / )', + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))', }, secondary: { - DEFAULT: 'hsl(var(--color-secondary) / )', - foreground: 'hsl(var(--color-secondary-foreground) / )', + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))', }, - accent: { - DEFAULT: 'hsl(var(--color-accent) / )', - foreground: 'hsl(var(--color-accent-foreground) / )', + alert: { + DEFAULT: 'hsl(var(--alert))', + foreground: 'hsl(var(--alert-foreground))', }, muted: { - DEFAULT: 'hsl(var(--color-muted) / )', - foreground: 'hsl(var(--color-muted-foreground) / )', - }, - destructive: { - DEFAULT: 'hsl(var(--color-destructive) / )', - foreground: 'hsl(var(--color-destructive-foreground) / )', + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))', }, - popover: { - DEFAULT: 'hsl(var(--color-popover) / )', - foreground: 'hsl(var(--color-popover-foreground) / )', + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))', }, card: { - DEFAULT: 'hsl(var(--color-card) / )', - foreground: 'hsl(var(--color-card-foreground) / )', + 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