becomer/likedream-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 主题 v2：渐变按钮 + 4层语义色 + 降低饱和度

Browse Source 
1. Primary 按钮改为渐变背景 linear-gradient(135deg, #6b8cff, #88a4ff)
2. 全局 primary 饱和度从 0.19 降至 0.12，更柔和
3. destructive 改为珊瑚色 oklch(0.70 0.14 25)
4. 新增 success/warning/info 三个语义色变量
5. Badge 新增 success/warning/info variant
6. 视图层硬编码 text-green/text-red/text-yellow 全部替换为语义 token
7. chart 颜色同步降低饱和度
This commit is contained in:
sugarBecomer
2026-04-27 10:32:59 +08:00
parent 564dbd436d
commit 18fcae8030
9 changed files with 92 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/globals.css
+74 -52
View File
@@ -11,25 +11,25 @@
--card-foreground: 220 30% 12%;
--popover: 0 0% 100%;
--popover-foreground: 220 30% 12%;
--primary: 220 72% 50%;
--primary: 228 60% 62%;
--primary-foreground: 0 0% 98%;
--secondary: 220 30% 96%;
--secondary: 220 20% 96%;
--secondary-foreground: 220 30% 18%;
--muted: 220 20% 96%;
--muted: 220 15% 96%;
--muted-foreground: 220 10% 42%;
--accent: 220 40% 95%;
--accent: 220 30% 95%;
--accent-foreground: 220 30% 18%;
--destructive: 0 84.2% 60.2%;
--destructive: 15 65% 55%;
--destructive-foreground: 0 0% 98%;
--border: 220 20% 92%;
--input: 220 20% 92%;
--ring: 220 72% 50%;
--border: 220 15% 92%;
--input: 220 15% 92%;
--ring: 228 60% 62%;
--radius: 0.75rem;
--chart-1: 220 72% 55%;
--chart-2: 170 50% 48%;
--chart-3: 40 70% 55%;
--chart-4: 280 55% 58%;
--chart-5: 15 70% 55%;
--chart-1: 228 60% 62%;
--chart-2: 155 40% 50%;
--chart-3: 40 50% 55%;
--chart-4: 280 40% 58%;
--chart-5: 15 50% 55%;
}
.dark {
@@ -39,24 +39,24 @@
--card-foreground: 0 0% 98%;
--popover: 220 20% 12%;
--popover-foreground: 0 0% 98%;
--primary: 220 65% 62%;
--primary: 228 55% 68%;
--primary-foreground: 220 30% 10%;
--secondary: 220 15% 18%;
--secondary-foreground: 0 0% 98%;
--muted: 220 15% 18%;
--muted-foreground: 220 10% 60%;
--accent: 220 20% 18%;
--accent: 220 18% 18%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive: 15 60% 55%;
--destructive-foreground: 0 0% 98%;
--border: 220 15% 18%;
--input: 220 15% 18%;
--ring: 220 65% 62%;
--chart-1: 220 70% 55%;
--chart-2: 170 55% 48%;
--chart-3: 40 75% 55%;
--chart-4: 280 60% 58%;
--chart-5: 15 72% 55%;
--ring: 228 55% 68%;
--chart-1: 228 55% 68%;
--chart-2: 155 40% 52%;
--chart-3: 40 55% 58%;
--chart-4: 280 45% 60%;
--chart-5: 15 55% 58%;
}
}
@@ -89,6 +89,12 @@
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--color-info: var(--info);
--color-info-foreground: var(--info-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
@@ -115,31 +121,39 @@
--card-foreground: oklch(0.18 0.02 250);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.18 0.02 250);
--primary: oklch(0.55 0.19 250);
--primary: oklch(0.62 0.12 260);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.965 0.01 250);
--secondary: oklch(0.965 0.008 250);
--secondary-foreground: oklch(0.25 0.04 250);
--muted: oklch(0.965 0.008 250);
--muted: oklch(0.965 0.006 250);
--muted-foreground: oklch(0.52 0.02 250);
--accent: oklch(0.955 0.025 250);
--accent: oklch(0.955 0.018 250);
--accent-foreground: oklch(0.25 0.04 250);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.925 0.01 250);
--input: oklch(0.925 0.01 250);
--ring: oklch(0.55 0.19 250);
--chart-1: oklch(0.6 0.19 250);
--chart-2: oklch(0.7 0.15 170);
--chart-3: oklch(0.75 0.16 80);
--chart-4: oklch(0.65 0.18 300);
--chart-5: oklch(0.7 0.17 25);
--sidebar: oklch(0.985 0.005 250);
--destructive: oklch(0.70 0.14 25);
--border: oklch(0.925 0.008 250);
--input: oklch(0.925 0.008 250);
--ring: oklch(0.62 0.12 260);
--success: oklch(0.65 0.12 155);
--success-foreground: oklch(0.985 0 0);
--warning: oklch(0.75 0.12 80);
--warning-foreground: oklch(0.25 0.04 60);
--info: oklch(0.68 0.10 240);
--info-foreground: oklch(0.985 0 0);
--gradient-primary: linear-gradient(135deg, #6b8cff, #88a4ff);
--gradient-primary-hover: linear-gradient(135deg, #5f80f5, #7d9af5);
--chart-1: oklch(0.62 0.12 260);
--chart-2: oklch(0.65 0.12 155);
--chart-3: oklch(0.75 0.12 80);
--chart-4: oklch(0.62 0.12 300);
--chart-5: oklch(0.70 0.12 25);
--sidebar: oklch(0.985 0.004 250);
--sidebar-foreground: oklch(0.18 0.02 250);
--sidebar-primary: oklch(0.55 0.19 250);
--sidebar-primary: oklch(0.62 0.12 260);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.955 0.025 250);
--sidebar-accent: oklch(0.955 0.018 250);
--sidebar-accent-foreground: oklch(0.25 0.04 250);
--sidebar-border: oklch(0.925 0.01 250);
--sidebar-ring: oklch(0.55 0.19 250);
--sidebar-border: oklch(0.925 0.008 250);
--sidebar-ring: oklch(0.62 0.12 260);
}
.dark {
@@ -149,31 +163,39 @@
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.2 0.015 250);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.7 0.15 250);
--primary: oklch(0.72 0.10 260);
--primary-foreground: oklch(0.15 0.02 250);
--secondary: oklch(0.26 0.02 250);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.26 0.02 250);
--muted-foreground: oklch(0.7 0.02 250);
--accent: oklch(0.26 0.03 250);
--accent: oklch(0.26 0.025 250);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--destructive: oklch(0.70 0.14 25);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.7 0.15 250);
--chart-1: oklch(0.65 0.2 250);
--chart-2: oklch(0.7 0.15 170);
--chart-3: oklch(0.75 0.16 80);
--chart-4: oklch(0.65 0.2 300);
--chart-5: oklch(0.7 0.19 25);
--ring: oklch(0.72 0.10 260);
--success: oklch(0.70 0.12 155);
--success-foreground: oklch(0.985 0 0);
--warning: oklch(0.78 0.12 80);
--warning-foreground: oklch(0.18 0.04 60);
--info: oklch(0.72 0.10 240);
--info-foreground: oklch(0.985 0 0);
--gradient-primary: linear-gradient(135deg, #7b9aff, #99b2ff);
--gradient-primary-hover: linear-gradient(135deg, #6f8ef5, #8da6f5);
--chart-1: oklch(0.72 0.10 260);
--chart-2: oklch(0.70 0.12 155);
--chart-3: oklch(0.78 0.12 80);
--chart-4: oklch(0.68 0.12 300);
--chart-5: oklch(0.72 0.12 25);
--sidebar: oklch(0.2 0.015 250);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.7 0.15 250);
--sidebar-primary: oklch(0.72 0.10 260);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.26 0.03 250);
--sidebar-accent: oklch(0.26 0.025 250);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.7 0.15 250);
--sidebar-ring: oklch(0.72 0.10 260);
}
@layer base {
src/components/ui/badge/index.ts
+6
View File
@@ -14,6 +14,12 @@ export const badgeVariants = cva(
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
destructive:
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
success:
"border-transparent bg-success text-success-foreground [a&]:hover:bg-success/90",
warning:
"border-transparent bg-warning text-warning-foreground [a&]:hover:bg-warning/90",
info:
"border-transparent bg-info text-info-foreground [a&]:hover:bg-info/90",
outline:
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
},
src/components/ui/button/index.ts
+1 -1
View File
@@ -9,7 +9,7 @@ export const buttonVariants = cva(
variants: {
variant: {
default:
"bg-primary text-primary-foreground hover:bg-primary/90",
"text-primary-foreground shadow-sm [background:var(--gradient-primary)] hover:[background:var(--gradient-primary-hover)]",
destructive:
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
src/views/cpdaily/CpTaskLog.vue
+2 -2
View File
@@ -26,12 +26,12 @@ const columns: ColumnDef<CpTaskLog, any>[] = [
if (typeof isSuccess === 'boolean') {
return h(
'span',
{ class: isSuccess ? 'text-green-600' : 'text-red-600' },
{ class: isSuccess ? 'text-success' : 'text-destructive' },
isSuccess ? '成功' : '失败',
)
}
if (errorMessage) {
return h('span', { class: 'text-red-600' }, '失败')
return h('span', { class: 'text-destructive' }, '失败')
}
return h('span', '-')
},
src/views/cpdaily/CpTaskManage.vue
+3 -3
View File
@@ -279,9 +279,9 @@ const taskStatusMap: Record<string, { label: string; variant: 'default' | 'secon
}
const stepMap: Record<string, { label: string; color: string }> = {
form: { label: '表单待填', color: 'text-yellow-600' },
execute: { label: '执行参数待填', color: 'text-yellow-600' },
complete: { label: '已完成', color: 'text-green-600' },
form: { label: '表单待填', color: 'text-warning' },
execute: { label: '执行参数待填', color: 'text-warning' },
complete: { label: '已完成', color: 'text-success' },
}
const notificationTypeMap: Record<string, string> = {
src/views/dashboard/DashboardView.vue
+3 -3
View File
@@ -138,7 +138,7 @@ onMounted(() => {
<span>今日消费</span>
</div>
<div class="text-lg sm:text-2xl font-bold">{{ summary?.todayCost ?? '--' }}</div>
<div v-if="summary" class="flex items-center gap-1 text-xs mt-1" :class="todayCostDiff > 0 ? 'text-red-500' : todayCostDiff < 0 ? 'text-green-500' : 'text-muted-foreground'">
<div v-if="summary" class="flex items-center gap-1 text-xs mt-1" :class="todayCostDiff > 0 ? 'text-destructive' : todayCostDiff < 0 ? 'text-success' : 'text-muted-foreground'">
<TrendingUp v-if="todayCostDiff > 0" class="w-3 h-3" />
<TrendingDown v-else-if="todayCostDiff < 0" class="w-3 h-3" />
<Minus v-else class="w-3 h-3" />
@@ -155,7 +155,7 @@ onMounted(() => {
<span>近7日消费</span>
</div>
<div class="text-lg sm:text-2xl font-bold">{{ summary?.week1Cost ?? '--' }}</div>
<div v-if="summary" class="flex items-center gap-1 text-xs mt-1" :class="weekCostDiff > 0 ? 'text-red-500' : weekCostDiff < 0 ? 'text-green-500' : 'text-muted-foreground'">
<div v-if="summary" class="flex items-center gap-1 text-xs mt-1" :class="weekCostDiff > 0 ? 'text-destructive' : weekCostDiff < 0 ? 'text-success' : 'text-muted-foreground'">
<TrendingUp v-if="weekCostDiff > 0" class="w-3 h-3" />
<TrendingDown v-else-if="weekCostDiff < 0" class="w-3 h-3" />
<Minus v-else class="w-3 h-3" />
@@ -172,7 +172,7 @@ onMounted(() => {
<span>今日任务数</span>
</div>
<div class="text-lg sm:text-2xl font-bold">{{ summary?.todayTaskCount ?? '--' }}</div>
<div v-if="summary" class="flex items-center gap-1 text-xs mt-1" :class="taskCountDiff > 0 ? 'text-red-500' : taskCountDiff < 0 ? 'text-green-500' : 'text-muted-foreground'">
<div v-if="summary" class="flex items-center gap-1 text-xs mt-1" :class="taskCountDiff > 0 ? 'text-destructive' : taskCountDiff < 0 ? 'text-success' : 'text-muted-foreground'">
<TrendingUp v-if="taskCountDiff > 0" class="w-3 h-3" />
<TrendingDown v-else-if="taskCountDiff < 0" class="w-3 h-3" />
<Minus v-else class="w-3 h-3" />
src/views/login/BalanceMigrate.vue
+1 -1
View File
@@ -109,7 +109,7 @@ async function onConfirmCaptchaConfirm(result: { captchaKey: string; dots: Array
</div>
<div v-else-if="confirmStatus === 'success'" class="text-center space-y-4">
<CheckCircle class="h-12 w-12 mx-auto text-green-500" />
<CheckCircle class="h-12 w-12 mx-auto text-success" />
<h2 class="text-lg font-bold">转移成功</h2>
<p class="text-muted-foreground text-sm">{{ confirmMessage }}</p>
<router-link to="/login">
src/views/login/ConfirmEmail.vue
+1 -1
View File
@@ -51,7 +51,7 @@ onMounted(async () => {
</div>
<div v-else-if="status === 'success'" class="space-y-4">
<CheckCircle class="h-12 w-12 mx-auto text-green-500" />
<CheckCircle class="h-12 w-12 mx-auto text-success" />
<h1 class="text-xl font-bold">验证成功</h1>
<p class="text-muted-foreground text-sm">{{ msg }}</p>
<template v-if="autoLoginSuccess">
src/views/user/BalanceRecords.vue
+1 -1
View File
@@ -33,7 +33,7 @@ const columns: ColumnDef<BalanceRecord, any>[] = [
cell: ({ row }) => {
const amount = row.getValue<string>('amount')
const num = parseFloat(amount)
const cls = num >= 0 ? 'text-green-600' : 'text-red-500'
const cls = num >= 0 ? 'text-success' : 'text-destructive'
return h('span', { class: `font-medium ${cls}` }, num >= 0 ? `+${amount}` : amount)
},
},