amis2/packages/amis-ui/scss/themes/_dark-variables.scss
qkiroc fcf6300b7b
feat: 完善黑暗模式UI (#9443)
* feat: 支持黑暗模式

* 升级发布脚本版本

---------

Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>
2024-01-16 15:46:55 +08:00

230 lines
7.4 KiB
SCSS

@import '../functions';
// dark 主题
// 参考: https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/
$ns: 'dark-';
:root {
--colors-error-main: #ff4242;
--colors-error-1: #ff8875;
--colors-error-2: #ff7869;
--colors-error-3: #ff675c;
--colors-error-4: #ff554f;
--colors-error-5: #ff4242;
--colors-error-6: #ff1d20;
--colors-error-7: #ff0008;
--colors-error-8: #ff000d;
--colors-error-9: #ff0011;
--colors-error-10: #ff0015;
--colors-warning-main: #ff9326;
--colors-warning-1: #ffc259;
--colors-warning-2: #ffb84d;
--colors-warning-3: #ffac40;
--colors-warning-4: #ffa033;
--colors-warning-5: #ff9326;
--colors-warning-6: #ff7b00;
--colors-warning-7: #ff7700;
--colors-warning-8: #ff7300;
--colors-warning-9: #ff6f00;
--colors-warning-10: #ff6a00;
--colors-success-main: #2fc40e;
--colors-success-1: #62c435;
--colors-success-2: #57c42b;
--colors-success-3: #4ac421;
--colors-success-4: #3dc418;
--colors-success-5: #2fc40e;
--colors-success-6: #1fb800;
--colors-success-7: #1aab00;
--colors-success-8: #159e00;
--colors-success-9: #119100;
--colors-success-10: #0d8500;
--colors-link-1: #001259;
--colors-link-2: #001e80;
--colors-link-3: #0832a6;
--colors-link-4: #144bcc;
--colors-link-5: #2468f2;
--colors-link-6: #528eff;
--colors-link-7: #7dadff;
--colors-link-8: #a8caff;
--colors-link-9: #d4e5ff;
--colors-link-10: #e6f0ff;
--colors-info-1: #001259;
--colors-info-2: #001e80;
--colors-info-3: #0832a6;
--colors-info-4: #144bcc;
--colors-info-5: #2468f2;
--colors-info-6: #528eff;
--colors-info-7: #7dadff;
--colors-info-8: #a8caff;
--colors-info-9: #d4e5ff;
--colors-info-10: #e6f0ff;
--colors-other-main: #2468f2;
--colors-other-1: #001259;
--colors-other-2: #001e80;
--colors-other-3: #0832a6;
--colors-other-4: #144bcc;
--colors-other-5: #2468f2;
--colors-other-6: #528eff;
--colors-other-7: #7dadff;
--colors-other-8: #a8caff;
--colors-other-9: #d4e5ff;
--colors-other-10: #e6f0ff;
--colors-brand-main: #1677ff;
--colors-brand-1: #4aaeff;
--colors-brand-2: #3da1ff;
--colors-brand-3: #3094ff;
--colors-brand-4: #2486ff;
--colors-brand-5: #1677ff;
--colors-brand-6: #0061f2;
--colors-brand-7: #0058e6;
--colors-brand-8: #004fd9;
--colors-brand-9: #0047cc;
--colors-brand-10: #0040bf;
--colors-neutral-text-1: #ffffff;
--colors-neutral-text-2: #f7f8fa;
--colors-neutral-text-3: #f2f3f5;
--colors-neutral-text-4: #e8e9eb;
--colors-neutral-text-5: #d4d6d9;
--colors-neutral-text-6: #b8bbbf;
--colors-neutral-text-7: #84878c;
--colors-neutral-text-8: #5c6066;
--colors-neutral-text-9: #303640;
--colors-neutral-text-10: #151c26;
--colors-neutral-text-11: #070d14;
--colors-neutral-fill-1: #ffffff;
--colors-neutral-fill-2: #f7f8fa;
--colors-neutral-fill-3: #f2f3f5;
--colors-neutral-fill-4: #e8e9eb;
--colors-neutral-fill-5: #d4d6d9;
--colors-neutral-fill-6: #b8bbbf;
--colors-neutral-fill-7: #84878c;
--colors-neutral-fill-8: #5c6066;
--colors-neutral-fill-9: #303640;
--colors-neutral-fill-10: #151c26;
--colors-neutral-fill-11: #070d14;
--colors-neutral-line-1: #ffffff;
--colors-neutral-line-2: #f7f8fa;
--colors-neutral-line-3: #f2f3f5;
--colors-neutral-line-4: #e8e9eb;
--colors-neutral-line-5: #d4d6d9;
--colors-neutral-line-6: #b8bbbf;
--colors-neutral-line-7: #84878c;
--colors-neutral-line-8: #5c6066;
--colors-neutral-line-9: #303640;
--colors-neutral-line-10: #151c26;
--colors-neutral-line-11: #070d14;
--fonts-base-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica,
'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB',
'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN',
'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti',
SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
--fonts-size-1: 48px;
--fonts-size-2: 40px;
--fonts-size-3: 32px;
--fonts-size-4: 24px;
--fonts-size-5: 18px;
--fonts-size-6: 16px;
--fonts-size-7: 14px;
--fonts-size-8: 12px;
--fonts-size-9: 12px;
--fonts-weight-1: 900;
--fonts-weight-2: 800;
--fonts-weight-3: 700;
--fonts-weight-4: 600;
--fonts-weight-5: 500;
--fonts-weight-6: 400;
--fonts-weight-7: 300;
--fonts-weight-8: 200;
--fonts-weight-9: 100;
--fonts-lineHeight-1: 1.3;
--fonts-lineHeight-2: 1.5;
--fonts-lineHeight-3: 1.7;
--borders-style-1: none;
--borders-style-2: solid;
--borders-style-3: dashed;
--borders-style-4: dotted;
--borders-width-1: 0px;
--borders-width-2: 1px;
--borders-width-3: 2px;
--borders-width-4: 4px;
--borders-radius-1: 0px;
--borders-radius-2: 1px;
--borders-radius-3: 2px;
--borders-radius-4: 6px;
--borders-radius-5: 8px;
--borders-radius-6: 10px;
--borders-radius-7: 50%;
--sizes-size-0: 0rem;
--sizes-size-1: auto;
--sizes-size-2: #{px2rem(2px)};
--sizes-size-3: #{px2rem(4px)};
--sizes-size-4: #{px2rem(6px)};
--sizes-size-5: #{px2rem(8px)};
--sizes-size-6: #{px2rem(10px)};
--sizes-size-7: #{px2rem(12px)};
--sizes-size-8: #{px2rem(14px)};
--sizes-size-9: #{px2rem(16px)};
--sizes-base-1: #{px2rem(2px)};
--sizes-base-2: #{px2rem(4px)};
--sizes-base-3: #{px2rem(6px)};
--sizes-base-4: #{px2rem(8px)};
--sizes-base-5: #{px2rem(10px)};
--sizes-base-6: #{px2rem(12px)};
--sizes-base-7: #{px2rem(14px)};
--sizes-base-8: #{px2rem(16px)};
--sizes-base-9: #{px2rem(18px)};
--sizes-base-10: #{px2rem(20px)};
--sizes-base-11: #{px2rem(22px)};
--sizes-base-12: #{px2rem(24px)};
--sizes-base-13: #{px2rem(26px)};
--sizes-base-14: #{px2rem(28px)};
--sizes-base-15: #{px2rem(30px)};
--sizes-base-16: #{px2rem(32px)};
--sizes-base-17: #{px2rem(34px)};
--sizes-base-18: #{px2rem(36px)};
--sizes-base-19: #{px2rem(38px)};
--sizes-base-20: #{px2rem(40px)};
--sizes-base-21: #{px2rem(42px)};
--sizes-base-22: #{px2rem(44px)};
--sizes-base-23: #{px2rem(46px)};
--sizes-base-24: #{px2rem(48px)};
--sizes-base-25: #{px2rem(50px)};
--sizes-base-26: #{px2rem(52px)};
--sizes-base-27: #{px2rem(54px)};
--sizes-base-28: #{px2rem(56px)};
--sizes-base-29: #{px2rem(58px)};
--sizes-base-30: #{px2rem(60px)};
--sizes-base-31: #{px2rem(62px)};
--sizes-base-32: #{px2rem(64px)};
--sizes-base-33: #{px2rem(66px)};
--sizes-base-34: #{px2rem(68px)};
--sizes-base-35: #{px2rem(70px)};
--sizes-base-36: #{px2rem(72px)};
--sizes-base-37: #{px2rem(74px)};
--sizes-base-38: #{px2rem(76px)};
--sizes-base-39: #{px2rem(78px)};
--sizes-base-40: #{px2rem(80px)};
--sizes-base-41: #{px2rem(82px)};
--sizes-base-42: #{px2rem(84px)};
--sizes-base-43: #{px2rem(86px)};
--sizes-base-44: #{px2rem(88px)};
--sizes-base-45: #{px2rem(90px)};
--sizes-base-46: #{px2rem(92px)};
--sizes-base-47: #{px2rem(94px)};
--sizes-base-48: #{px2rem(96px)};
--sizes-base-49: #{px2rem(98px)};
--sizes-base-50: #{px2rem(100px)};
--shadows-shadow-none: 0px 0px 0px 0px transparent;
--shadows-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--shadows-shadow-normal: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
0px 1px 2px 0px rgba(0, 0, 0, 0.06);
--shadows-shadow-md: 0px 4px -1px 0px rgba(0, 0, 0, 0.1),
0px 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadows-shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
0px 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadows-shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.1),
0px 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadows-shadow-2xl: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
}