zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(theme): introduce global UI design tokens for page surfaces

Browse Source
This commit is contained in:
zguiyang
2026-03-13 15:27:02 +08:00
parent bf89acbd2c
commit e2eb43e24c
1 changed files with 30 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/styles/global.css
View File

@@ -89,6 +89,15 @@
--animation-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --animation-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--animation-smooth: cubic-bezier(0.65, 0, 0.35, 1); --animation-smooth: cubic-bezier(0.65, 0, 0.35, 1);
--animation-spring: cubic-bezier(0.22, 1, 0.36, 1); --animation-spring: cubic-bezier(0.22, 1, 0.36, 1);
/* Global UI Design Tokens */
--ui-hero-overlay: linear-gradient(135deg, rgb(30 58 138 / 0.2), rgb(37 99 235 / 0.1), rgb(154 52 18 / 0.2));
--ui-title-gradient: linear-gradient(90deg, #111827 0%, var(--primary) 50%, #ea580c 100%);
--ui-surface-bg: rgb(248 250 252 / 0.75);
--ui-surface-border: rgb(228 228 231 / 0.7);
--ui-surface-shadow: var(--shadow-sm);
--ui-surface-blur: 10px;
--ui-section-soft-bg: rgb(37 99 235 / 0.05);
} }
.dark { .dark {
@@ -130,6 +139,14 @@
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 12px 40px rgba(59, 130, 246, 0.2); --shadow-xl: 0 12px 40px rgba(59, 130, 246, 0.2);
/* Global UI Design Tokens - Dark */
--ui-hero-overlay: linear-gradient(135deg, rgb(30 58 138 / 0.3), rgb(37 99 235 / 0.2), rgb(154 52 18 / 0.3));
--ui-title-gradient: linear-gradient(90deg, #ffffff 0%, #bfdbfe 50%, #fdba74 100%);
--ui-surface-bg: rgb(24 24 27 / 0.7);
--ui-surface-border: rgb(39 39 42 / 0.7);
--ui-surface-shadow: var(--shadow-sm);
--ui-section-soft-bg: rgb(37 99 235 / 0.1);
} }
@theme inline { @theme inline {
@@ -168,6 +185,9 @@
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border); --color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring); --color-sidebar-ring: var(--sidebar-ring);
--color-page-surface: var(--ui-surface-bg);
--color-page-surface-border: var(--ui-surface-border);
--color-page-section-soft: var(--ui-section-soft-bg);
} }
@layer base { @layer base {
@@ -196,19 +216,25 @@
/* Animation utilities */ /* Animation utilities */
@layer utilities { @layer utilities {
.page-hero-overlay { .page-hero-overlay {
@apply absolute inset-0 pointer-events-none bg-gradient-to-br from-blue-900/20 via-primary/10 to-orange-900/20 dark:from-blue-900/30 dark:via-primary/20 dark:to-orange-900/30; @apply absolute inset-0 pointer-events-none;
background-image: var(--ui-hero-overlay);
} }
.page-title-gradient { .page-title-gradient {
@apply bg-gradient-to-r from-gray-900 via-primary to-orange-600 dark:from-white dark:via-blue-200 dark:to-orange-300 bg-clip-text text-transparent; @apply bg-clip-text text-transparent;
background-image: var(--ui-title-gradient);
} }
.page-surface { .page-surface {
@apply rounded-2xl border border-border/70 bg-background/75 backdrop-blur-sm shadow-sm; @apply rounded-2xl border;
background: var(--ui-surface-bg);
border-color: var(--ui-surface-border);
box-shadow: var(--ui-surface-shadow);
backdrop-filter: blur(var(--ui-surface-blur));
} }
.page-section-soft { .page-section-soft {
@apply bg-primary/5 dark:bg-primary/10; background: var(--ui-section-soft-bg);
} }
.animate-fade-in { .animate-fade-in {