From 523ba2d8be6f4566b4c6642bec749797df164b76 Mon Sep 17 00:00:00 2001 From: zetaloop Date: Wed, 25 Feb 2026 12:22:37 +0800 Subject: [PATCH] style(theme): neutralize palette and reduce base radius --- app/globals.css | 86 ++++++++++++++++++++-------------------- components/ui/button.tsx | 14 +++---- 2 files changed, 50 insertions(+), 50 deletions(-) diff --git a/app/globals.css b/app/globals.css index 2bad9ff..71f75f7 100644 --- a/app/globals.css +++ b/app/globals.css @@ -48,75 +48,75 @@ } :root { - --radius: 0.75rem; - --background: oklch(0.99 0.01 45); - --foreground: oklch(0.14 0.01 45); + --radius: 0.5rem; + --background: oklch(0.99 0 0); + --foreground: oklch(0.14 0 0); --card: oklch(1 0 0); - --card-foreground: oklch(0.14 0.01 45); + --card-foreground: oklch(0.14 0 0); --popover: oklch(1 0 0); - --popover-foreground: oklch(0.14 0.01 45); + --popover-foreground: oklch(0.14 0 0); --primary: oklch(0.65 0.22 45); - --primary-foreground: oklch(0.98 0.01 45); - --secondary: oklch(0.94 0.02 45); - --secondary-foreground: oklch(0.25 0.02 45); - --muted: oklch(0.94 0.02 45); - --muted-foreground: oklch(0.45 0.02 45); - --accent: oklch(0.94 0.02 45); - --accent-foreground: oklch(0.25 0.02 45); + --primary-foreground: oklch(0.98 0 0); + --secondary: oklch(0.96 0 0); + --secondary-foreground: oklch(0.25 0 0); + --muted: oklch(0.96 0 0); + --muted-foreground: oklch(0.45 0 0); + --accent: oklch(0.96 0 0); + --accent-foreground: oklch(0.25 0 0); --destructive: oklch(0.6 0.2 25); - --destructive-foreground: oklch(0.98 0.01 45); - --border: oklch(0.9 0.02 45); - --input: oklch(0.9 0.02 45); + --destructive-foreground: oklch(0.98 0 0); + --border: oklch(0.92 0 0); + --input: oklch(0.92 0 0); --ring: oklch(0.65 0.22 45); --chart-1: oklch(0.65 0.22 45); --chart-2: oklch(0.6 0.15 180); --chart-3: oklch(0.55 0.15 300); --chart-4: oklch(0.75 0.18 85); --chart-5: oklch(0.65 0.18 15); - --sidebar: oklch(0.97 0.01 45); - --sidebar-foreground: oklch(0.25 0.02 45); + --sidebar: oklch(0.98 0 0); + --sidebar-foreground: oklch(0.25 0 0); --sidebar-primary: oklch(0.65 0.22 45); - --sidebar-primary-foreground: oklch(0.98 0.01 45); - --sidebar-accent: oklch(0.93 0.02 45); - --sidebar-accent-foreground: oklch(0.14 0.01 45); - --sidebar-border: oklch(0.9 0.02 45); + --sidebar-primary-foreground: oklch(0.98 0 0); + --sidebar-accent: oklch(0.96 0 0); + --sidebar-accent-foreground: oklch(0.14 0 0); + --sidebar-border: oklch(0.92 0 0); --sidebar-ring: oklch(0.65 0.22 45); --shadow-card: 0 2px 8px -2px rgba(0, 0, 0, 0.04), 0 4px 16px -4px rgba(0, 0, 0, 0.02); --shadow-card-hover: 0 8px 24px -4px rgba(0, 0, 0, 0.08), 0 12px 32px -8px rgba(0, 0, 0, 0.04); } .dark { - --background: oklch(0.15 0.01 45); - --foreground: oklch(0.98 0.01 45); - --card: oklch(0.18 0.01 45); - --card-foreground: oklch(0.98 0.01 45); - --popover: oklch(0.18 0.01 45); - --popover-foreground: oklch(0.98 0.01 45); + --background: oklch(0.15 0 0); + --foreground: oklch(0.98 0 0); + --card: oklch(0.18 0 0); + --card-foreground: oklch(0.98 0 0); + --popover: oklch(0.18 0 0); + --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.7 0.22 45); - --primary-foreground: oklch(0.14 0.01 45); - --secondary: oklch(0.25 0.02 45); - --secondary-foreground: oklch(0.98 0.01 45); - --muted: oklch(0.25 0.02 45); - --muted-foreground: oklch(0.7 0.02 45); - --accent: oklch(0.25 0.02 45); - --accent-foreground: oklch(0.98 0.01 45); + --primary-foreground: oklch(0.14 0 0); + --secondary: oklch(0.25 0 0); + --secondary-foreground: oklch(0.98 0 0); + --muted: oklch(0.25 0 0); + --muted-foreground: oklch(0.7 0 0); + --accent: oklch(0.25 0 0); + --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.65 0.2 25); - --destructive-foreground: oklch(0.98 0.01 45); - --border: oklch(0.25 0.02 45); - --input: oklch(0.25 0.02 45); + --destructive-foreground: oklch(0.98 0 0); + --border: oklch(0.25 0 0); + --input: oklch(0.25 0 0); --ring: oklch(0.7 0.22 45); --chart-1: oklch(0.7 0.22 45); --chart-2: oklch(0.65 0.15 180); --chart-3: oklch(0.65 0.15 300); --chart-4: oklch(0.8 0.18 85); --chart-5: oklch(0.7 0.18 15); - --sidebar: oklch(0.18 0.01 45); - --sidebar-foreground: oklch(0.85 0.02 45); + --sidebar: oklch(0.18 0 0); + --sidebar-foreground: oklch(0.85 0 0); --sidebar-primary: oklch(0.7 0.22 45); - --sidebar-primary-foreground: oklch(0.14 0.01 45); - --sidebar-accent: oklch(0.25 0.02 45); - --sidebar-accent-foreground: oklch(0.98 0.01 45); - --sidebar-border: oklch(0.25 0.02 45); + --sidebar-primary-foreground: oklch(0.14 0 0); + --sidebar-accent: oklch(0.25 0 0); + --sidebar-accent-foreground: oklch(0.98 0 0); + --sidebar-border: oklch(0.25 0 0); --sidebar-ring: oklch(0.7 0.22 45); --shadow-card: 0 2px 8px -2px rgba(0, 0, 0, 0.04), 0 4px 16px -4px rgba(0, 0, 0, 0.02); --shadow-card-hover: 0 8px 24px -4px rgba(0, 0, 0, 0.08), 0 12px 32px -8px rgba(0, 0, 0, 0.04); diff --git a/components/ui/button.tsx b/components/ui/button.tsx index 511bbad..8658cf8 100644 --- a/components/ui/button.tsx +++ b/components/ui/button.tsx @@ -5,7 +5,7 @@ import type * as React from "react" import { cn } from "@/lib/utils" const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { @@ -20,13 +20,13 @@ const buttonVariants = cva( }, size: { default: "h-9 px-4 py-2 has-[>svg]:px-3", - xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3", - sm: "h-8 rounded-lg gap-1.5 px-3 has-[>svg]:px-2.5", - lg: "h-10 rounded-xl px-6 has-[>svg]:px-4", + xs: "h-6 gap-1 rounded-sm px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3", + sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", + lg: "h-10 rounded-md px-6 has-[>svg]:px-4", icon: "size-9", - "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3", - "icon-sm": "size-8 rounded-lg", - "icon-lg": "size-10 rounded-xl", + "icon-xs": "size-6 rounded-sm [&_svg:not([class*='size-'])]:size-3", + "icon-sm": "size-8 rounded-md", + "icon-lg": "size-10 rounded-md", }, }, defaultVariants: {