From 91153550dd634be859c471be4420067e9a25b687 Mon Sep 17 00:00:00 2001 From: konstantin-paulus Date: Sun, 14 Jun 2026 16:48:25 +0200 Subject: [PATCH] Enhance theming and styling across the application - Implemented a dynamic color scheme toggle based on user preferences for improved accessibility. - Updated CSS variables for light and dark themes to ensure consistent styling. - Refined the NumericSlider component by removing default box-shadow and border styles for a cleaner appearance. - Adjusted button styles in base.css to support dark mode while maintaining visual consistency. --- index.html | 17 +++- src/components/ui/numeric-slider.tsx | 4 + src/index.css | 130 +++++++++++++++------------ src/styles/base.css | 2 +- 4 files changed, 95 insertions(+), 58 deletions(-) diff --git a/index.html b/index.html index 0023d4d..27eaa32 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,26 @@ - + Text-to-Lottie by Diffusion Studio + + diff --git a/src/components/ui/numeric-slider.tsx b/src/components/ui/numeric-slider.tsx index 25649f9..97c776b 100644 --- a/src/components/ui/numeric-slider.tsx +++ b/src/components/ui/numeric-slider.tsx @@ -274,6 +274,10 @@ export function NumericSlider(props: NumericSliderProps) { onBlur={handleInputBlur} onKeyDown={handleInputKeyDown} disabled={props.disabled} + style={{ + "box-shadow": "none !important", + "border": "none !important", + }} /> diff --git a/src/index.css b/src/index.css index e0fcd1f..ac22589 100644 --- a/src/index.css +++ b/src/index.css @@ -61,78 +61,96 @@ } :root { - --canvas: hsla(0, 0%, 9%, 1); - --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); - --card: oklch(1 0 0); - --card-foreground: oklch(0.145 0 0); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); - --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); - --accent-foreground: oklch(0.205 0 0); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); - --chart-1: oklch(0.87 0 0); - --chart-2: oklch(0.556 0 0); - --chart-3: oklch(0.439 0 0); - --chart-4: oklch(0.371 0 0); - --chart-5: oklch(0.269 0 0); - --radius: 6px; - --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); - --selection: hsla(207, 99%, 22%, 1); + --canvas: hsla(0, 0%, 91%, 1); + --background: hsla(0, 0%, 100%, 1); + --foreground: hsla(240, 5%, 9%, 1); + --card: hsla(0, 0%, 100%, 1); + --card-foreground: hsla(240, 5%, 9%, 1); + --popover: hsla(0, 0%, 95%, 1); + --popover-foreground: hsla(240, 5%, 9%, 1); + --primary: hsla(207, 100%, 50%, 1); + --primary-foreground: hsla(0, 0%, 95%, 1); + --primary-hover: hsla(207, 98%, 40%, 1); + --primary-pressing: hsla(207, 99%, 35%, 1); + --secondary: hsla(0, 0%, 95%, 1); + --secondary-foreground: hsla(207, 100%, 90%, 1); + --secondary-hover: hsla(0, 0%, 88%, 1); + --secondary-pressing: hsla(0, 0%, 40%, 1); + --tertiary: hsla(207, 100%, 50%, 1); + --tertiary-foreground: hsla(207, 100%, 90%, 1); + --tertiary-hover: hsla(207, 80%, 40%, 1); + --tertiary-pressing: hsla(207, 80%, 35%, 1); + --muted: hsla(0, 0%, 91%, 1); + --muted-foreground: hsla(0, 0%, 45%, 1); + --disabled-foreground: hsla(0, 0%, 40%, 1); + --accent: hsla(0, 0%, 95%, 1); + --accent-foreground: hsla(0, 0%, 45%, 1); + --destructive: hsla(0, 79%, 54%, 1); + --destructive-foreground: hsla(0, 0%, 100%, 1); + --destructive-hover: hsla(0, 60%, 40%, 1); + --destructive-pressing: hsla(0, 53%, 27%, 1); + --destructive-accent: hsla(0, 79%, 54%, 0.24); + --destructive-accent-foreground: hsla(0, 78%, 95%, 1); + --success-accent: hsla(162, 66%, 29%, 0.24); + --success-accent-foreground: hsla(162, 84%, 89%, 1); + --border: hsla(0, 0%, 91%, 1); + --border-input: hsla(0, 0%, 88%, 1); + --border-darker: hsla(0, 0%, 95%, 1); + --input: hsla(0, 0%, 95%, 1); + --ring: hsla(207, 100%, 50%, 1); + --canvas: hsla(0, 0%, 91%, 1); + --overlay: hsla(0, 0%, 9%, 0.7); + --overlay-soft: hsla(0, 0%, 9%, 0.4); + --selection: hsla(207, 100%, 50%, 1); --selection-foreground: hsla(207, 100%, 90%, 1); + --selection-muted-foreground: hsla(0, 0%, 45%, 1); } .dark { --canvas: hsla(0, 0%, 9%, 1); --background: hsla(0, 0%, 11%, 1); - --foreground: hsla(0, 0%, 100%, 1); - --card: oklch(0.205 0 0); - --card-foreground: oklch(0.985 0 0); + --foreground: hsla(0, 0%, 95%, 1); + --card: hsla(0, 0%, 11%, 1); + --card-foreground: hsla(0, 0%, 95%, 1); --popover: hsla(0, 0%, 9%, 1); - --popover-foreground: oklch(0.985 0 0); + --popover-foreground: hsla(0, 0%, 95%, 1); --primary: hsla(207, 100%, 50%, 1); - --primary-foreground: oklch(0.205 0 0); + --primary-foreground: hsla(0, 0%, 95%, 1); + --primary-hover: hsla(207, 98%, 29%, 1); + --primary-pressing: hsla(207, 99%, 22%, 1); --secondary: hsla(0, 0%, 16%, 1); - --secondary-foreground: oklch(0.985 0 0); + --secondary-foreground: hsla(0, 0%, 95%, 1); + --secondary-hover: hsla(0, 0%, 25%, 1); + --secondary-pressing: hsla(0, 0%, 40%, 1); + --tertiary: hsla(207, 99%, 22%, 1); + --tertiary-foreground: hsla(207, 100%, 90%, 1); + --tertiary-hover: hsla(207, 80%, 17%, 1); + --tertiary-pressing: hsla(207, 80%, 14%, 1); --muted: hsla(0, 0%, 25%, 1); --muted-foreground: hsla(0, 0%, 62%, 1); - --accent: oklch(0.269 0 0); - --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.704 0.191 22.216); + --disabled-foreground: hsla(0, 0%, 40%, 1); + --accent: hsla(0, 0%, 16%, 1); + --accent-foreground: hsla(0, 0%, 62%, 1); + --destructive: hsla(0, 79%, 54%, 1); + --destructive-foreground: hsla(0, 0%, 100%, 1); + --destructive-hover: hsla(0, 60%, 40%, 1); + --destructive-pressing: hsla(0, 53%, 27%, 1); + --destructive-accent: hsla(0, 79%, 54%, 0.24); + --destructive-accent-foreground: hsla(0, 78%, 95%, 1); + --success-accent: hsla(162, 66%, 29%, 0.24); + --success-accent-foreground: hsla(162, 84%, 89%, 1); --border: hsla(0, 0%, 15%, 1); + --border-input: hsla(0, 0%, 25%, 1); + --border-darker: hsla(0, 0%, 11%, 1); --input: hsla(0, 0%, 16%, 1); --ring: hsla(207, 100%, 50%, 1); - --chart-1: oklch(0.87 0 0); - --chart-2: oklch(0.556 0 0); - --chart-3: oklch(0.439 0 0); - --chart-4: oklch(0.371 0 0); - --chart-5: oklch(0.269 0 0); - --sidebar: oklch(0.205 0 0); - --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.269 0 0); - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.556 0 0); + --canvas: hsla(0, 0%, 9%, 1); + --overlay: hsla(0, 0%, 9%, 0.7); + --overlay-soft: hsla(0, 0%, 9%, 0.4); --selection: hsla(207, 99%, 22%, 1); --selection-foreground: hsla(207, 100%, 90%, 1); + --selection-muted-foreground: hsla(0, 0%, 16%, 1); + --inset: hsla(0, 0%, 25%, 1); } @layer base { diff --git a/src/styles/base.css b/src/styles/base.css index 7cac87f..575d0f4 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -146,7 +146,7 @@ } .z-button-variant-default { - @apply bg-primary text-foreground hover:bg-primary/80; + @apply bg-primary dark:text-foreground text-background hover:bg-primary/80; } .z-button-variant-outline {