Skip to content

Color 色彩

SeeYouUI 定义了一套色彩系统,用于统一组件的颜色表现。

提示

SeeYouUI 色彩已通过 uni.scss 引入 请勿再次定义。

主色 Primary

primary
#3ca7ff
dark
#208ee8
disabled
#a8d8ff
light
#e9f6ff
scss
// 主色 Primary
$see-primary: #3ca7ff;
$see-primary-dark: #208ee8;
$see-primary-disabled: #a8d8ff;
$see-primary-light: #e9f6ff;
scss
// 主色 Primary
color: $see-primary;
color: $see-primary-dark;
color: $see-primary-disabled;
color: $see-primary-light;

辅助色 Error、Success、Warning、Info

error
#ff6b6b
dark
#e85b5b
disabled
#ffbaba
light
#fff2f2
warning
#ffb645
dark
#f0a233
disabled
#ffd9a6
light
#fff6e8
info
#8a8f99
dark
#6e737c
disabled
#d2d5d9
light
#f5f6f7
success
#37d497
dark
#2bb881
disabled
#b6efd9
light
#f2fff9
scss
// 错误 Error
$see-error: #ff6b6b;
$see-error-dark: #e85b5b;
$see-error-disabled: #ffbaba;
$see-error-light: #fff2f2;
scss
// 警告 Warning
$see-warning: #ffb645;
$see-warning-dark: #f0a233;
$see-warning-disabled: #ffd9a6;
$see-warning-light: #fff6e8;
scss
// 默认 Info
$see-info: #8a8f99;
$see-info-dark: #6e737c;
$see-info-disabled: #d2d5d9;
$see-info-light: #f5f6f7;
scss
// 成功 Success
$see-success: #37d497;
$see-success-dark: #2bb881;
$see-success-disabled: #b6efd9;
$see-success-light: #f2fff9;

文字颜色

主要文字
#2e2f33
常规文字
#5a5c60
次要文字
#8c8e93
占位文字
#c9ccd1
scss
// 文字颜色
$see-main-color: #2e2f33;
$see-content-color: #5a5c60;
$see-tips-color: #8c8e93;
$see-light-color: #c9ccd1;
scss
// 文字颜色
color: $see-main-color;
color: $see-content-color;
color: $see-tips-color;
color: $see-light-color;

边框颜色

一级边框
#aeb0b4
二级边框
#c3c5c8
三级边框
#d9dadc
四级边框
#eceff1
scss
// 边框颜色
$see-border-color: #aeb0b4;
$see-border-two-color: #c3c5c8;
$see-border-three-color: #d9dadc;
$see-border-four-color: #eceff1;
scss
// 边框颜色
border-color: $see-border-color;
border-color: $see-border-two-color;
border-color: $see-border-three-color;
border-color: $see-border-four-color;

背景颜色

暗色
#1e222a
亮色
#f6faff
scss
$see-bg-dark-color: #1e222a;
scss
$see-bg-light-color: #f6faff;

基于 MIT 许可发布