From 5bc2b4d75d57dc036531723bc81f5d5f56eb92a5 Mon Sep 17 00:00:00 2001 From: Vixalie Date: Mon, 28 Jul 2025 08:34:11 +0800 Subject: [PATCH] =?UTF-8?q?feat(theme):=20=E6=9B=B4=E6=96=B0=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=E4=B8=BB=E9=A2=98=E5=B9=B6=E5=A2=9E=E5=8A=A0=E8=A1=A8?= =?UTF-8?q?=E9=9D=A2=E9=A2=9C=E8=89=B2=E5=8F=98=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 更新了主要颜色变量的值，使其更加鲜艳和对比度更高 - 增加了新的表面颜色变量，用于在浅色和深色主题之间切换 - 调整了部分颜色的明暗度，以适应不同的使用场景 - 优化了颜色搭配，提高了可读性和视觉效果 --- src/theme.css | 190 ++++++++++++++++++++++++++++++++++---------------- 1 file changed, 130 insertions(+), 60 deletions(-) diff --git a/src/theme.css b/src/theme.css index 77c6d09..137008b 100644 --- a/src/theme.css +++ b/src/theme.css @@ -1,11 +1,18 @@ @theme inline { - --color-primary: light-dark(#9d0035, #9d0035); - --color-primary-hover: light-dark(#dd1b65, #dd1b65); - --color-primary-active: light-dark(#7f0020, #7f0020); - --color-primary-focus: light-dark(#ff5088, #ff5088); - --color-primary-disabled: light-dark(#766568, #766568); + --color-primary: light-dark(#ef3473, #ef3473); + --color-primary-hover: light-dark(#ff5e94, #ff5e94); + --color-primary-active: light-dark(#c1004f, #c1004f); + --color-primary-focus: light-dark(#ff78aa, #ff78aa); + --color-primary-disabled: light-dark(#ae9b9e, #ae9b9e); --color-on-primary: light-dark(#ffffff, #ffffff); - --color-on-primary-disabled: light-dark(#ffffff, #ffffff); + --color-on-primary-disabled: light-dark(#000000, #000000); + --color-primary-surface: light-dark(#9d0035, #9d0035); + --color-primary-surface-hover: light-dark(#dd1b65, #dd1b65); + --color-primary-surface-active: light-dark(#7f0020, #7f0020); + --color-primary-surface-focus: light-dark(#ff5088, #ff5088); + --color-primary-surface-disabled: light-dark(#766568, #766568); + --color-on-primary-surface: light-dark(#ffffff, #ffffff); + --color-on-primary-surface-disabled: light-dark(#ffffff, #ffffff); --color-swatch-primary-10: light-dark(#2f0000, #2f0000); --color-swatch-primary-15: light-dark(#410000, #410000); --color-swatch-primary-20: light-dark(#530005, #530005); @@ -22,13 +29,20 @@ --color-swatch-primary-90: light-dark(#ff95c5, #ff95c5); --color-swatch-primary-95: light-dark(#ffa6d5, #ffa6d5); --color-swatch-primary-98: light-dark(#ffb0df, #ffb0df); - --color-secondary: light-dark(#890073, #890073); - --color-secondary-hover: light-dark(#c630aa, #c630aa); - --color-secondary-active: light-dark(#6e005b, #6e005b); - --color-secondary-focus: light-dark(#f05bd1, #f05bd1); - --color-secondary-disabled: light-dark(#73666f, #73666f); - --color-on-secondary: light-dark(#fffffe, #fffffe); - --color-on-secondary-disabled: light-dark(#ffffff, #ffffff); + --color-secondary: light-dark(#d742ba, #d742ba); + --color-secondary-hover: light-dark(#fe69de, #fe69de); + --color-secondary-active: light-dark(#ab0192, #ab0192); + --color-secondary-focus: light-dark(#ff81f7, #ff81f7); + --color-secondary-disabled: light-dark(#aa9ba5, #aa9ba5); + --color-on-secondary: light-dark(#ffffff, #ffffff); + --color-on-secondary-disabled: light-dark(#000000, #000000); + --color-secondary-surface: light-dark(#890073, #890073); + --color-secondary-surface-hover: light-dark(#c630aa, #c630aa); + --color-secondary-surface-active: light-dark(#6e005b, #6e005b); + --color-secondary-surface-focus: light-dark(#f05bd1, #f05bd1); + --color-secondary-surface-disabled: light-dark(#73666f, #73666f); + --color-on-secondary-surface: light-dark(#fffffe, #fffffe); + --color-on-secondary-surface-disabled: light-dark(#ffffff, #ffffff); --color-swatch-secondary-10: light-dark(#23001d, #23001d); --color-swatch-secondary-15: light-dark(#34002a, #34002a); --color-swatch-secondary-20: light-dark(#450038, #450038); @@ -45,13 +59,20 @@ --color-swatch-secondary-90: light-dark(#ff9dff, #ff9dff); --color-swatch-secondary-95: light-dark(#ffaeff, #ffaeff); --color-swatch-secondary-98: light-dark(#ffb8ff, #ffb8ff); - --color-tertiary: light-dark(#a00000, #a00000); - --color-tertiary-hover: light-dark(#e02b00, #e02b00); - --color-tertiary-active: light-dark(#820000, #820000); - --color-tertiary-focus: light-dark(#ff5b1f, #ff5b1f); - --color-tertiary-disabled: light-dark(#776661, #776661); + --color-tertiary: light-dark(#f24000, #f24000); + --color-tertiary-hover: light-dark(#ff6931, #ff6931); + --color-tertiary-active: light-dark(#c40000, #c40000); + --color-tertiary-focus: light-dark(#ff824d, #ff824d); + --color-tertiary-disabled: light-dark(#ae9c97, #ae9c97); --color-on-tertiary: light-dark(#ffffff, #ffffff); - --color-on-tertiary-disabled: light-dark(#ffffff, #ffffff); + --color-on-tertiary-disabled: light-dark(#000000, #000000); + --color-tertiary-surface: light-dark(#a00000, #a00000); + --color-tertiary-surface-hover: light-dark(#e02b00, #e02b00); + --color-tertiary-surface-active: light-dark(#820000, #820000); + --color-tertiary-surface-focus: light-dark(#ff5b1f, #ff5b1f); + --color-tertiary-surface-disabled: light-dark(#776661, #776661); + --color-on-tertiary-surface: light-dark(#ffffff, #ffffff); + --color-on-tertiary-surface-disabled: light-dark(#ffffff, #ffffff); --color-swatch-tertiary-10: light-dark(#310000, #310000); --color-swatch-tertiary-15: light-dark(#440000, #440000); --color-swatch-tertiary-20: light-dark(#560000, #560000); @@ -68,13 +89,20 @@ --color-swatch-tertiary-90: light-dark(#ff9f6a, #ff9f6a); --color-swatch-tertiary-95: light-dark(#ffb07b, #ffb07b); --color-swatch-tertiary-98: light-dark(#ffba85, #ffba85); - --color-accent: light-dark(#00685d, #00685d); - --color-accent-hover: light-dark(#00a091, #00a091); - --color-accent-active: light-dark(#004f47, #004f47); - --color-accent-focus: light-dark(#00c7b6, #00c7b6); - --color-accent-disabled: light-dark(#5c6f6c, #5c6f6c); - --color-on-accent: light-dark(#ffffff, #ffffff); - --color-on-accent-disabled: light-dark(#ffffff, #ffffff); + --color-accent: light-dark(#00b0a0, #00b0a0); + --color-accent-hover: light-dark(#00d4c3, #00d4c3); + --color-accent-active: light-dark(#00877a, #00877a); + --color-accent-focus: light-dark(#00eddb, #00eddb); + --color-accent-disabled: light-dark(#92a5a3, #92a5a3); + --color-on-accent: light-dark(#000000, #000000); + --color-on-accent-disabled: light-dark(#000000, #000000); + --color-accent-surface: light-dark(#00685d, #00685d); + --color-accent-surface-hover: light-dark(#00a091, #00a091); + --color-accent-surface-active: light-dark(#004f47, #004f47); + --color-accent-surface-focus: light-dark(#00c7b6, #00c7b6); + --color-accent-surface-disabled: light-dark(#5c6f6c, #5c6f6c); + --color-on-accent-surface: light-dark(#ffffff, #ffffff); + --color-on-accent-surface-disabled: light-dark(#ffffff, #ffffff); --color-swatch-accent-10: light-dark(#000c0f, #000c0f); --color-swatch-accent-15: light-dark(#001b1b, #001b1b); --color-swatch-accent-20: light-dark(#002927, #002927); @@ -91,13 +119,20 @@ --color-swatch-accent-90: light-dark(#00fff6, #00fff6); --color-swatch-accent-95: light-dark(#00ffff, #00ffff); --color-swatch-accent-98: light-dark(#00ffff, #00ffff); - --color-danger: light-dark(#9a0011, #9a0011); - --color-danger-hover: light-dark(#da3045, #da3045); - --color-danger-active: light-dark(#7d0000, #7d0000); - --color-danger-focus: light-dark(#ff5c68, #ff5c68); - --color-danger-disabled: light-dark(#766665, #766665); + --color-danger: light-dark(#be002f, #be002f); + --color-danger-hover: light-dark(#f44b5a, #f44b5a); + --color-danger-active: light-dark(#9a0011, #9a0011); + --color-danger-focus: light-dark(#ff6e77, #ff6e77); + --color-danger-disabled: light-dark(#8e7d7d, #8e7d7d); --color-on-danger: light-dark(#ffffff, #ffffff); --color-on-danger-disabled: light-dark(#ffffff, #ffffff); + --color-danger-surface: light-dark(#9a0011, #9a0011); + --color-danger-surface-hover: light-dark(#da3045, #da3045); + --color-danger-surface-active: light-dark(#7d0000, #7d0000); + --color-danger-surface-focus: light-dark(#ff5c68, #ff5c68); + --color-danger-surface-disabled: light-dark(#766665, #766665); + --color-on-danger-surface: light-dark(#ffffff, #ffffff); + --color-on-danger-surface-disabled: light-dark(#ffffff, #ffffff); --color-swatch-danger-10: light-dark(#2e0000, #2e0000); --color-swatch-danger-15: light-dark(#400000, #400000); --color-swatch-danger-20: light-dark(#510000, #510000); @@ -114,13 +149,20 @@ --color-swatch-danger-90: light-dark(#ff9fa4, #ff9fa4); --color-swatch-danger-95: light-dark(#ffb0b4, #ffb0b4); --color-swatch-danger-98: light-dark(#ffbabe, #ffbabe); - --color-success: light-dark(#005e00, #005e00); - --color-success-hover: light-dark(#219427, #219427); - --color-success-active: light-dark(#004600, #004600); - --color-success-focus: light-dark(#4fba4f, #4fba4f); - --color-success-disabled: light-dark(#646d64, #646d64); + --color-success: light-dark(#0c8918, #0c8918); + --color-success-hover: light-dark(#48b449, #48b449); + --color-success-active: light-dark(#006800, #006800); + --color-success-focus: light-dark(#67d166, #67d166); + --color-success-disabled: light-dark(#868f85, #868f85); --color-on-success: light-dark(#ffffff, #ffffff); --color-on-success-disabled: light-dark(#ffffff, #ffffff); + --color-success-surface: light-dark(#005e00, #005e00); + --color-success-surface-hover: light-dark(#219427, #219427); + --color-success-surface-active: light-dark(#004600, #004600); + --color-success-surface-focus: light-dark(#4fba4f, #4fba4f); + --color-success-surface-disabled: light-dark(#646d64, #646d64); + --color-on-success-surface: light-dark(#ffffff, #ffffff); + --color-on-success-surface-disabled: light-dark(#ffffff, #ffffff); --color-swatch-success-10: light-dark(#000a00, #000a00); --color-swatch-success-15: light-dark(#001700, #001700); --color-swatch-success-20: light-dark(#002400, #002400); @@ -137,13 +179,20 @@ --color-swatch-success-90: light-dark(#91fc8e, #91fc8e); --color-swatch-success-95: light-dark(#a1ff9e, #a1ff9e); --color-swatch-success-98: light-dark(#abffa8, #abffa8); - --color-warn: light-dark(#832700, #832700); - --color-warn-hover: light-dark(#be5e00, #be5e00); - --color-warn-active: light-dark(#690500, #690500); - --color-warn-focus: light-dark(#e68300, #e68300); - --color-warn-disabled: light-dark(#726961, #726961); - --color-on-warn: light-dark(#fbfcfb, #fbfcfb); - --color-on-warn-disabled: light-dark(#ffffff, #ffffff); + --color-warn: light-dark(#f28e16, #f28e16); + --color-warn-hover: light-dark(#ffa73e, #ffa73e); + --color-warn-active: light-dark(#c06000, #c06000); + --color-warn-focus: light-dark(#ffb852, #ffb852); + --color-warn-disabled: light-dark(#c3b8b0, #c3b8b0); + --color-on-warn: light-dark(#000000, #000000); + --color-on-warn-disabled: light-dark(#000000, #000000); + --color-warn-surface: light-dark(#832700, #832700); + --color-warn-surface-hover: light-dark(#be5e00, #be5e00); + --color-warn-surface-active: light-dark(#690500, #690500); + --color-warn-surface-focus: light-dark(#e68300, #e68300); + --color-warn-surface-disabled: light-dark(#726961, #726961); + --color-on-warn-surface: light-dark(#fbfcfb, #fbfcfb); + --color-on-warn-surface-disabled: light-dark(#ffffff, #ffffff); --color-swatch-warn-10: light-dark(#210000, #210000); --color-swatch-warn-15: light-dark(#310000, #310000); --color-swatch-warn-20: light-dark(#410000, #410000); @@ -160,13 +209,20 @@ --color-swatch-warn-90: light-dark(#ffc35e, #ffc35e); --color-swatch-warn-95: light-dark(#ffd36f, #ffd36f); --color-swatch-warn-98: light-dark(#ffdd7a, #ffdd7a); - --color-info: light-dark(#00586b, #00586b); - --color-info-hover: light-dark(#008ea1, #008ea1); - --color-info-active: light-dark(#004154, #004154); - --color-info-focus: light-dark(#1db3c7, #1db3c7); - --color-info-disabled: light-dark(#636c6e, #636c6e); - --color-on-info: light-dark(#ffffff, #ffffff); - --color-on-info-disabled: light-dark(#ffffff, #ffffff); + --color-info: light-dark(#10aec2, #10aec2); + --color-info-hover: light-dark(#45cce0, #45cce0); + --color-info-active: light-dark(#008397, #008397); + --color-info-focus: light-dark(#5ee1f5, #5ee1f5); + --color-info-disabled: light-dark(#a6b0b2, #a6b0b2); + --color-on-info: light-dark(#000000, #000000); + --color-on-info-disabled: light-dark(#000000, #000000); + --color-info-surface: light-dark(#00586b, #00586b); + --color-info-surface-hover: light-dark(#008ea1, #008ea1); + --color-info-surface-active: light-dark(#004154, #004154); + --color-info-surface-focus: light-dark(#1db3c7, #1db3c7); + --color-info-surface-disabled: light-dark(#636c6e, #636c6e); + --color-on-info-surface: light-dark(#ffffff, #ffffff); + --color-on-info-surface-disabled: light-dark(#ffffff, #ffffff); --color-swatch-info-10: light-dark(#000619, #000619); --color-swatch-info-15: light-dark(#001225, #001225); --color-swatch-info-20: light-dark(#001f32, #001f32); @@ -231,13 +287,20 @@ --color-overlay: light-dark(#040304, #020202); --color-outline: light-dark(#0b090a, #040304); --color-outline-variant: light-dark(#0f0e0e, #010101); - --color-defensive: light-dark(#004c89, #004c89); - --color-defensive-hover: light-dark(#2d81c2, #2d81c2); - --color-defensive-active: light-dark(#003470, #003470); - --color-defensive-focus: light-dark(#55a6ea, #55a6ea); - --color-defensive-disabled: light-dark(#646b71, #646b71); + --color-defensive: light-dark(#2177b8, #2177b8); + --color-defensive-hover: light-dark(#50a1e5, #50a1e5); + --color-defensive-active: light-dark(#005695, #005695); + --color-defensive-focus: light-dark(#6dbdff, #6dbdff); + --color-defensive-disabled: light-dark(#878e94, #878e94); --color-on-defensive: light-dark(#ffffff, #ffffff); --color-on-defensive-disabled: light-dark(#ffffff, #ffffff); + --color-defensive-surface: light-dark(#004c89, #004c89); + --color-defensive-surface-hover: light-dark(#2d81c2, #2d81c2); + --color-defensive-surface-active: light-dark(#003470, #003470); + --color-defensive-surface-focus: light-dark(#55a6ea, #55a6ea); + --color-defensive-surface-disabled: light-dark(#646b71, #646b71); + --color-on-defensive-surface: light-dark(#ffffff, #ffffff); + --color-on-defensive-surface-disabled: light-dark(#ffffff, #ffffff); --color-swatch-defensive-10: light-dark(#00002e, #00002e); --color-swatch-defensive-15: light-dark(#00003d, #00003d); --color-swatch-defensive-20: light-dark(#00104b, #00104b); @@ -254,13 +317,20 @@ --color-swatch-defensive-90: light-dark(#95e6ff, #95e6ff); --color-swatch-defensive-95: light-dark(#a5f7ff, #a5f7ff); --color-swatch-defensive-98: light-dark(#afffff, #afffff); - --color-progressive: light-dark(#9c0000, #9c0000); - --color-progressive-hover: light-dark(#dc3021, #dc3021); - --color-progressive-active: light-dark(#7f0000, #7f0000); - --color-progressive-focus: light-dark(#ff5d49, #ff5d49); - --color-progressive-disabled: light-dark(#766663, #766663); + --color-progressive: light-dark(#d42517, #d42517); + --color-progressive-hover: light-dark(#ff5946, #ff5946); + --color-progressive-active: light-dark(#ac0000, #ac0000); + --color-progressive-focus: light-dark(#ff7761, #ff7761); + --color-progressive-disabled: light-dark(#9b8a87, #9b8a87); --color-on-progressive: light-dark(#ffffff, #ffffff); --color-on-progressive-disabled: light-dark(#ffffff, #ffffff); + --color-progressive-surface: light-dark(#9c0000, #9c0000); + --color-progressive-surface-hover: light-dark(#dc3021, #dc3021); + --color-progressive-surface-active: light-dark(#7f0000, #7f0000); + --color-progressive-surface-focus: light-dark(#ff5d49, #ff5d49); + --color-progressive-surface-disabled: light-dark(#766663, #766663); + --color-on-progressive-surface: light-dark(#ffffff, #ffffff); + --color-on-progressive-surface-disabled: light-dark(#ffffff, #ffffff); --color-swatch-progressive-10: light-dark(#2f0000, #2f0000); --color-swatch-progressive-15: light-dark(#410000, #410000); --color-swatch-progressive-20: light-dark(#530000, #530000);