feat(主题): 添加多种颜色调板配置
- 增加了危险色、成功色、警告色、信息色、中性色等多种调板配置 - 移除并重新添加了进步色调板配置 - 增加了各种状态下的颜色定义,包括悬停、激活、焦点等 - 优化了颜色调板的完整性和可扩展性
This commit is contained in:
154
src/theme.css
154
src/theme.css
@@ -91,6 +91,98 @@
|
|||||||
--color-swatch-accent-90: light-dark(#00fff6, #00fff6);
|
--color-swatch-accent-90: light-dark(#00fff6, #00fff6);
|
||||||
--color-swatch-accent-95: light-dark(#00ffff, #00ffff);
|
--color-swatch-accent-95: light-dark(#00ffff, #00ffff);
|
||||||
--color-swatch-accent-98: 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-on-danger: light-dark(#ffffff, #ffffff);
|
||||||
|
--color-on-danger-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);
|
||||||
|
--color-swatch-danger-25: light-dark(#630000, #630000);
|
||||||
|
--color-swatch-danger-30: light-dark(#740000, #740000);
|
||||||
|
--color-swatch-danger-35: light-dark(#860000, #860000);
|
||||||
|
--color-swatch-danger-40: light-dark(#98000f, #98000f);
|
||||||
|
--color-swatch-danger-50: light-dark(#bc002d, #bc002d);
|
||||||
|
--color-swatch-danger-60: light-dark(#e0374a, #e0374a);
|
||||||
|
--color-swatch-danger-70: light-dark(#ff5b67, #ff5b67);
|
||||||
|
--color-swatch-danger-75: light-dark(#ff6c76, #ff6c76);
|
||||||
|
--color-swatch-danger-80: light-dark(#ff7d85, #ff7d85);
|
||||||
|
--color-swatch-danger-85: light-dark(#ff8e94, #ff8e94);
|
||||||
|
--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-on-success: light-dark(#ffffff, #ffffff);
|
||||||
|
--color-on-success-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);
|
||||||
|
--color-swatch-success-25: light-dark(#003200, #003200);
|
||||||
|
--color-swatch-success-30: light-dark(#004000, #004000);
|
||||||
|
--color-swatch-success-35: light-dark(#004e00, #004e00);
|
||||||
|
--color-swatch-success-40: light-dark(#005c00, #005c00);
|
||||||
|
--color-swatch-success-50: light-dark(#007a00, #007a00);
|
||||||
|
--color-swatch-success-60: light-dark(#29992d, #29992d);
|
||||||
|
--color-swatch-success-70: light-dark(#4eb94e, #4eb94e);
|
||||||
|
--color-swatch-success-75: light-dark(#5fc95e, #5fc95e);
|
||||||
|
--color-swatch-success-80: light-dark(#70da6e, #70da6e);
|
||||||
|
--color-swatch-success-85: light-dark(#80eb7e, #80eb7e);
|
||||||
|
--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-swatch-warn-10: light-dark(#210000, #210000);
|
||||||
|
--color-swatch-warn-15: light-dark(#310000, #310000);
|
||||||
|
--color-swatch-warn-20: light-dark(#410000, #410000);
|
||||||
|
--color-swatch-warn-25: light-dark(#510000, #510000);
|
||||||
|
--color-swatch-warn-30: light-dark(#610000, #610000);
|
||||||
|
--color-swatch-warn-35: light-dark(#711100, #711100);
|
||||||
|
--color-swatch-warn-40: light-dark(#812400, #812400);
|
||||||
|
--color-swatch-warn-50: light-dark(#a24400, #a24400);
|
||||||
|
--color-swatch-warn-60: light-dark(#c36300, #c36300);
|
||||||
|
--color-swatch-warn-70: light-dark(#e58200, #e58200);
|
||||||
|
--color-swatch-warn-75: light-dark(#f6921e, #f6921e);
|
||||||
|
--color-swatch-warn-80: light-dark(#ffa237, #ffa237);
|
||||||
|
--color-swatch-warn-85: light-dark(#ffb24b, #ffb24b);
|
||||||
|
--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-swatch-info-10: light-dark(#000619, #000619);
|
||||||
|
--color-swatch-info-15: light-dark(#001225, #001225);
|
||||||
|
--color-swatch-info-20: light-dark(#001f32, #001f32);
|
||||||
|
--color-swatch-info-25: light-dark(#002d3f, #002d3f);
|
||||||
|
--color-swatch-info-30: light-dark(#003a4d, #003a4d);
|
||||||
|
--color-swatch-info-35: light-dark(#00485b, #00485b);
|
||||||
|
--color-swatch-info-40: light-dark(#005669, #005669);
|
||||||
|
--color-swatch-info-50: light-dark(#007487, #007487);
|
||||||
|
--color-swatch-info-60: light-dark(#0092a6, #0092a6);
|
||||||
|
--color-swatch-info-70: light-dark(#1ab2c6, #1ab2c6);
|
||||||
|
--color-swatch-info-75: light-dark(#37c2d6, #37c2d6);
|
||||||
|
--color-swatch-info-80: light-dark(#4dd2e6, #4dd2e6);
|
||||||
|
--color-swatch-info-85: light-dark(#60e3f7, #60e3f7);
|
||||||
|
--color-swatch-info-90: light-dark(#73f3ff, #73f3ff);
|
||||||
|
--color-swatch-info-95: light-dark(#85ffff, #85ffff);
|
||||||
|
--color-swatch-info-98: light-dark(#8fffff, #8fffff);
|
||||||
--color-neutral: light-dark(#908f8e, #3c3a3a);
|
--color-neutral: light-dark(#908f8e, #3c3a3a);
|
||||||
--color-neutral-hover: light-dark(#b0afae, #71706f);
|
--color-neutral-hover: light-dark(#b0afae, #71706f);
|
||||||
--color-neutral-active: light-dark(#696968, #2a2828);
|
--color-neutral-active: light-dark(#696968, #2a2828);
|
||||||
@@ -119,33 +211,26 @@
|
|||||||
--color-surface-variant-disabled: light-dark(#d7d7d7, #3d3d3d);
|
--color-surface-variant-disabled: light-dark(#d7d7d7, #3d3d3d);
|
||||||
--color-on-surface-variant: light-dark(#000000, #c4c4c3);
|
--color-on-surface-variant: light-dark(#000000, #c4c4c3);
|
||||||
--color-on-surface-variant-disabled: light-dark(#000000, #d1d1d0);
|
--color-on-surface-variant-disabled: light-dark(#000000, #d1d1d0);
|
||||||
|
--color-swatch-neutral-10: light-dark(#040303, #040303);
|
||||||
|
--color-swatch-neutral-15: light-dark(#0c0b0b, #0c0b0b);
|
||||||
|
--color-swatch-neutral-20: light-dark(#171616, #171616);
|
||||||
|
--color-swatch-neutral-25: light-dark(#232121, #232121);
|
||||||
|
--color-swatch-neutral-30: light-dark(#2f2d2d, #2f2d2d);
|
||||||
|
--color-swatch-neutral-35: light-dark(#3c3a3a, #3c3a3a);
|
||||||
|
--color-swatch-neutral-40: light-dark(#494747, #494747);
|
||||||
|
--color-swatch-neutral-50: light-dark(#646362, #646362);
|
||||||
|
--color-swatch-neutral-60: light-dark(#81807f, #81807f);
|
||||||
|
--color-swatch-neutral-70: light-dark(#9f9e9d, #9f9e9d);
|
||||||
|
--color-swatch-neutral-75: light-dark(#aeaead, #aeaead);
|
||||||
|
--color-swatch-neutral-80: light-dark(#bebebd, #bebebd);
|
||||||
|
--color-swatch-neutral-85: light-dark(#cececd, #cececd);
|
||||||
|
--color-swatch-neutral-90: light-dark(#dededd, #dededd);
|
||||||
|
--color-swatch-neutral-95: light-dark(#eeeeee, #eeeeee);
|
||||||
|
--color-swatch-neutral-98: light-dark(#f8f9f8, #f8f9f8);
|
||||||
--color-shadow: light-dark(#040303, #040303);
|
--color-shadow: light-dark(#040303, #040303);
|
||||||
--color-overlay: light-dark(#040304, #020202);
|
--color-overlay: light-dark(#040304, #020202);
|
||||||
--color-outline: light-dark(#0b090a, #040304);
|
--color-outline: light-dark(#0b090a, #040304);
|
||||||
--color-outline-variant: light-dark(#0f0e0e, #010101);
|
--color-outline-variant: light-dark(#0f0e0e, #010101);
|
||||||
--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-on-progressive: light-dark(#ffffff, #ffffff);
|
|
||||||
--color-on-progressive-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);
|
|
||||||
--color-swatch-progressive-25: light-dark(#650000, #650000);
|
|
||||||
--color-swatch-progressive-30: light-dark(#770000, #770000);
|
|
||||||
--color-swatch-progressive-35: light-dark(#880000, #880000);
|
|
||||||
--color-swatch-progressive-40: light-dark(#9a0000, #9a0000);
|
|
||||||
--color-swatch-progressive-50: light-dark(#be0000, #be0000);
|
|
||||||
--color-swatch-progressive-60: light-dark(#e23627, #e23627);
|
|
||||||
--color-swatch-progressive-70: light-dark(#ff5c48, #ff5c48);
|
|
||||||
--color-swatch-progressive-75: light-dark(#ff6d58, #ff6d58);
|
|
||||||
--color-swatch-progressive-80: light-dark(#ff7e68, #ff7e68);
|
|
||||||
--color-swatch-progressive-85: light-dark(#ff8f77, #ff8f77);
|
|
||||||
--color-swatch-progressive-90: light-dark(#ffa087, #ffa087);
|
|
||||||
--color-swatch-progressive-95: light-dark(#ffb197, #ffb197);
|
|
||||||
--color-swatch-progressive-98: light-dark(#ffbba1, #ffbba1);
|
|
||||||
--color-defensive: light-dark(#004c89, #004c89);
|
--color-defensive: light-dark(#004c89, #004c89);
|
||||||
--color-defensive-hover: light-dark(#2d81c2, #2d81c2);
|
--color-defensive-hover: light-dark(#2d81c2, #2d81c2);
|
||||||
--color-defensive-active: light-dark(#003470, #003470);
|
--color-defensive-active: light-dark(#003470, #003470);
|
||||||
@@ -169,6 +254,29 @@
|
|||||||
--color-swatch-defensive-90: light-dark(#95e6ff, #95e6ff);
|
--color-swatch-defensive-90: light-dark(#95e6ff, #95e6ff);
|
||||||
--color-swatch-defensive-95: light-dark(#a5f7ff, #a5f7ff);
|
--color-swatch-defensive-95: light-dark(#a5f7ff, #a5f7ff);
|
||||||
--color-swatch-defensive-98: light-dark(#afffff, #afffff);
|
--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-on-progressive: light-dark(#ffffff, #ffffff);
|
||||||
|
--color-on-progressive-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);
|
||||||
|
--color-swatch-progressive-25: light-dark(#650000, #650000);
|
||||||
|
--color-swatch-progressive-30: light-dark(#770000, #770000);
|
||||||
|
--color-swatch-progressive-35: light-dark(#880000, #880000);
|
||||||
|
--color-swatch-progressive-40: light-dark(#9a0000, #9a0000);
|
||||||
|
--color-swatch-progressive-50: light-dark(#be0000, #be0000);
|
||||||
|
--color-swatch-progressive-60: light-dark(#e23627, #e23627);
|
||||||
|
--color-swatch-progressive-70: light-dark(#ff5c48, #ff5c48);
|
||||||
|
--color-swatch-progressive-75: light-dark(#ff6d58, #ff6d58);
|
||||||
|
--color-swatch-progressive-80: light-dark(#ff7e68, #ff7e68);
|
||||||
|
--color-swatch-progressive-85: light-dark(#ff8f77, #ff8f77);
|
||||||
|
--color-swatch-progressive-90: light-dark(#ffa087, #ffa087);
|
||||||
|
--color-swatch-progressive-95: light-dark(#ffb197, #ffb197);
|
||||||
|
--color-swatch-progressive-98: light-dark(#ffbba1, #ffbba1);
|
||||||
|
|
||||||
--breakpoint-*: initial;
|
--breakpoint-*: initial;
|
||||||
--breakpoint-md: 600px;
|
--breakpoint-md: 600px;
|
||||||
|
Reference in New Issue
Block a user