feat: enhance background layer handling and uploader functionality

- Introduced automatic overlay opacity and gradient based on layer ID in BackgroundLayer component.
- Added disabled state to BackgroundUploader, preventing actions when disabled.
- Updated component CSS editor to handle disabled state, preventing changes when disabled.
- Modified Header and Layout components to manage background inheritance from the page layer.
- Improved Sidebar and Card components to respect background inheritance and layering.
- Refactored theme management to include default accent color and normalization functions.
- Enhanced AppearanceTab to manage accent color changes with debouncing and validation.
- Added UI feedback for inherited background layers in AppearanceTab.
This commit is contained in:
DrSmoothl
2026-03-16 22:19:05 +08:00
parent a5a6d2cb26
commit 0811213db0
16 changed files with 359 additions and 170 deletions

View File

@@ -112,27 +112,27 @@
@layer base {
:root {
/* Color Tokens */
--color-primary: 221.2 83.2% 53.3%;
--color-primary: 188.5 100% 45.5%;
--color-primary-foreground: 210 40% 98%;
--color-primary-gradient: none;
--color-secondary: 210 40% 96.1%;
--color-secondary: 188.5 35% 96%;
--color-secondary-foreground: 222.2 47.4% 11.2%;
--color-muted: 210 40% 96.1%;
--color-muted-foreground: 215.4 16.3% 40%;
--color-accent: 210 40% 96.1%;
--color-muted: 188.5 12% 96%;
--color-muted-foreground: 188.5 20% 46.9%;
--color-accent: 223.5 60% 50.4%;
--color-accent-foreground: 222.2 47.4% 11.2%;
--color-destructive: 0 84.2% 45%;
--color-destructive-foreground: 210 40% 98%;
--color-background: 0 0% 100%;
--color-foreground: 222.2 84% 4.9%;
--color-card: 0 0% 100%;
--color-card: 188.5 14% 98.6%;
--color-card-foreground: 222.2 84% 4.9%;
--color-popover: 0 0% 100%;
--color-popover: 188.5 16% 99.3%;
--color-popover-foreground: 222.2 84% 4.9%;
--color-border: 214.3 31.8% 91.4%;
--color-input: 214.3 31.8% 91.4%;
--color-ring: 221.2 83.2% 53.3%;
--color-chart-1: 221.2 83.2% 53.3%;
--color-border: 188.5 20% 91.4%;
--color-input: 188.5 20% 91.4%;
--color-ring: 188.5 100% 45.5%;
--color-chart-1: 188.5 100% 45.5%;
--color-chart-2: 160 60% 45%;
--color-chart-3: 30 80% 55%;
--color-chart-4: 280 65% 60%;
@@ -230,27 +230,27 @@
.dark {
/* Color Tokens */
--color-primary: 217.2 91.2% 59.8%;
--color-primary: 188.5 100% 45.5%;
--color-primary-foreground: 210 40% 98%;
--color-primary-gradient: none;
--color-secondary: 217.2 32.6% 17.5%;
--color-secondary: 188.5 35% 17.5%;
--color-secondary-foreground: 210 40% 98%;
--color-muted: 217.2 32.6% 17.5%;
--color-muted-foreground: 215 20.2% 65.1%;
--color-accent: 217.2 32.6% 17.5%;
--color-muted: 188.5 12% 17.5%;
--color-muted-foreground: 188.5 20% 65.1%;
--color-accent: 223.5 60% 35.3%;
--color-accent-foreground: 210 40% 98%;
--color-destructive: 0 62.8% 30.6%;
--color-destructive-foreground: 210 40% 98%;
--color-background: 222.2 84% 4.9%;
--color-foreground: 210 40% 98%;
--color-card: 222.2 84% 4.9%;
--color-card: 188.5 18% 8.8%;
--color-card-foreground: 210 40% 98%;
--color-popover: 222.2 84% 4.9%;
--color-popover: 188.5 21% 10.5%;
--color-popover-foreground: 210 40% 98%;
--color-border: 217.2 32.6% 17.5%;
--color-input: 217.2 32.6% 17.5%;
--color-ring: 224.3 76.3% 48%;
--color-chart-1: 217.2 91.2% 59.8%;
--color-border: 188.5 20% 17.5%;
--color-input: 188.5 20% 17.5%;
--color-ring: 188.5 100% 45.5%;
--color-chart-1: 188.5 100% 45.5%;
--color-chart-2: 160 60% 50%;
--color-chart-3: 30 80% 60%;
--color-chart-4: 280 65% 65%;