juwan/juwan-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(theme): cool-gray palette with refined shadows and smaller radii

Browse Source
This commit is contained in:
zetaloop
2026-02-25 12:37:04 +08:00
parent c56e4486a0
commit 5a17cab60c
4 changed files with 58 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+55 -55
View File
@@ -49,24 +49,24 @@
:root { :root {
--radius: 0.5rem; --radius: 0.5rem;
--background: oklch(0.99 0 0); --background: oklch(0.98 0 0);
--foreground: oklch(0.14 0 0); --foreground: oklch(0.27 0.03 260);
--card: oklch(1 0 0); --card: oklch(1 0 0);
--card-foreground: oklch(0.14 0 0); --card-foreground: oklch(0.27 0.03 260);
--popover: oklch(1 0 0); --popover: oklch(1 0 0);
--popover-foreground: oklch(0.14 0 0); --popover-foreground: oklch(0.27 0.03 260);
--primary: oklch(0.65 0.22 45); --primary: oklch(0.65 0.22 45);
--primary-foreground: oklch(0.98 0 0); --primary-foreground: oklch(1 0 0);
--secondary: oklch(0.96 0 0); --secondary: oklch(0.95 0.01 260);
--secondary-foreground: oklch(0.25 0 0); --secondary-foreground: oklch(0.35 0.03 260);
--muted: oklch(0.96 0 0); --muted: oklch(0.96 0.01 260);
--muted-foreground: oklch(0.45 0 0); --muted-foreground: oklch(0.55 0.02 260);
--accent: oklch(0.96 0 0); --accent: oklch(0.65 0.22 45);
--accent-foreground: oklch(0.25 0 0); --accent-foreground: oklch(1 0 0);
--destructive: oklch(0.6 0.2 25); --destructive: oklch(0.6 0.2 25);
--destructive-foreground: oklch(0.98 0 0); --destructive-foreground: oklch(1 0 0);
--border: oklch(0.92 0 0); --border: oklch(0.92 0.01 260);
--input: oklch(0.92 0 0); --input: oklch(0.92 0.01 260);
--ring: oklch(0.65 0.22 45); --ring: oklch(0.65 0.22 45);
--chart-1: oklch(0.65 0.22 45); --chart-1: oklch(0.65 0.22 45);
--chart-2: oklch(0.6 0.15 180); --chart-2: oklch(0.6 0.15 180);
@@ -74,52 +74,52 @@
--chart-4: oklch(0.75 0.18 85); --chart-4: oklch(0.75 0.18 85);
--chart-5: oklch(0.65 0.18 15); --chart-5: oklch(0.65 0.18 15);
--sidebar: oklch(0.98 0 0); --sidebar: oklch(0.98 0 0);
--sidebar-foreground: oklch(0.25 0 0); --sidebar-foreground: oklch(0.35 0.03 260);
--sidebar-primary: oklch(0.65 0.22 45); --sidebar-primary: oklch(0.65 0.22 45);
--sidebar-primary-foreground: oklch(0.98 0 0); --sidebar-primary-foreground: oklch(1 0 0);
--sidebar-accent: oklch(0.96 0 0); --sidebar-accent: oklch(0.95 0.01 260);
--sidebar-accent-foreground: oklch(0.14 0 0); --sidebar-accent-foreground: oklch(0.35 0.03 260);
--sidebar-border: oklch(0.92 0 0); --sidebar-border: oklch(0.92 0.01 260);
--sidebar-ring: oklch(0.65 0.22 45); --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: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 4px 12px -2px rgba(0, 0, 0, 0.06);
--shadow-card-hover: 0 8px 24px -4px rgba(0, 0, 0, 0.08), 0 12px 32px -8px rgba(0, 0, 0, 0.04); --shadow-card-hover: 0 4px 16px -2px rgba(0, 0, 0, 0.08), 0 8px 24px -4px rgba(0, 0, 0, 0.1);
} }
.dark { .dark {
--background: oklch(0.15 0 0); --background: oklch(0.15 0.02 260);
--foreground: oklch(0.98 0 0); --foreground: oklch(0.9 0.01 260);
--card: oklch(0.18 0 0); --card: oklch(0.18 0.02 260);
--card-foreground: oklch(0.98 0 0); --card-foreground: oklch(0.9 0.01 260);
--popover: oklch(0.18 0 0); --popover: oklch(0.18 0.02 260);
--popover-foreground: oklch(0.98 0 0); --popover-foreground: oklch(0.9 0.01 260);
--primary: oklch(0.7 0.22 45); --primary: oklch(0.65 0.22 45);
--primary-foreground: oklch(0.14 0 0); --primary-foreground: oklch(1 0 0);
--secondary: oklch(0.25 0 0); --secondary: oklch(0.22 0.02 260);
--secondary-foreground: oklch(0.98 0 0); --secondary-foreground: oklch(0.8 0.01 260);
--muted: oklch(0.25 0 0); --muted: oklch(0.22 0.02 260);
--muted-foreground: oklch(0.7 0 0); --muted-foreground: oklch(0.6 0.02 260);
--accent: oklch(0.25 0 0); --accent: oklch(0.65 0.22 45);
--accent-foreground: oklch(0.98 0 0); --accent-foreground: oklch(1 0 0);
--destructive: oklch(0.65 0.2 25); --destructive: oklch(0.4 0.15 25);
--destructive-foreground: oklch(0.98 0 0); --destructive-foreground: oklch(1 0 0);
--border: oklch(0.25 0 0); --border: oklch(0.25 0.02 260);
--input: oklch(0.25 0 0); --input: oklch(0.25 0.02 260);
--ring: oklch(0.7 0.22 45); --ring: oklch(0.65 0.22 45);
--chart-1: oklch(0.7 0.22 45); --chart-1: oklch(0.65 0.22 45);
--chart-2: oklch(0.65 0.15 180); --chart-2: oklch(0.6 0.15 180);
--chart-3: oklch(0.65 0.15 300); --chart-3: oklch(0.55 0.15 300);
--chart-4: oklch(0.8 0.18 85); --chart-4: oklch(0.75 0.18 85);
--chart-5: oklch(0.7 0.18 15); --chart-5: oklch(0.65 0.18 15);
--sidebar: oklch(0.18 0 0); --sidebar: oklch(0.15 0.02 260);
--sidebar-foreground: oklch(0.85 0 0); --sidebar-foreground: oklch(0.8 0.01 260);
--sidebar-primary: oklch(0.7 0.22 45); --sidebar-primary: oklch(0.65 0.22 45);
--sidebar-primary-foreground: oklch(0.14 0 0); --sidebar-primary-foreground: oklch(1 0 0);
--sidebar-accent: oklch(0.25 0 0); --sidebar-accent: oklch(0.22 0.02 260);
--sidebar-accent-foreground: oklch(0.98 0 0); --sidebar-accent-foreground: oklch(0.8 0.01 260);
--sidebar-border: oklch(0.25 0 0); --sidebar-border: oklch(0.25 0.02 260);
--sidebar-ring: oklch(0.7 0.22 45); --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: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 4px 12px -2px rgba(0, 0, 0, 0.06);
--shadow-card-hover: 0 8px 24px -4px rgba(0, 0, 0, 0.08), 0 12px 32px -8px rgba(0, 0, 0, 0.04); --shadow-card-hover: 0 4px 16px -2px rgba(0, 0, 0, 0.08), 0 8px 24px -4px rgba(0, 0, 0, 0.1);
} }
@layer base { @layer base {
components/ui/badge.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import type * as React from "react"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
const badgeVariants = cva( const badgeVariants = cva(
"inline-flex items-center justify-center rounded-full border border-transparent px-2.5 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", "inline-flex items-center justify-center rounded-md border border-transparent px-2.5 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
{ {
variants: { variants: {
variant: { variant: {
components/ui/card.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
<div <div
data-slot="card" data-slot="card"
className={cn( className={cn(
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-card-hover)] transition-shadow duration-200 ease-in-out", "bg-card text-card-foreground flex flex-col gap-6 rounded-lg border py-6 shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-card-hover)] transition-shadow duration-200 ease-in-out",
className, className,
)} )}
{...props} {...props}
components/ui/input.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
type={type} type={type}
data-slot="input" data-slot="input"
className={cn( className={cn(
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-lg border bg-transparent px-3 py-1 text-base shadow-sm transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", "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", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
className, className,