Color 色彩

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

提示

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

主色 Primary

primary
#3ca7ff

dark
#208ee8

disabled
#a8d8ff

light
#e9f6ff

定义

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

使用

// 主色 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

Error

// 错误 Error
$see-error: #ff6b6b;
$see-error-dark: #e85b5b;
$see-error-disabled: #ffbaba;
$see-error-light: #fff2f2;

Warning

// 警告 Warning
$see-warning: #ffb645;
$see-warning-dark: #f0a233;
$see-warning-disabled: #ffd9a6;
$see-warning-light: #fff6e8;

Info

// 默认 Info
$see-info: #8a8f99;
$see-info-dark: #6e737c;
$see-info-disabled: #d2d5d9;
$see-info-light: #f5f6f7;

Success

// 成功 Success
$see-success: #37d497;
$see-success-dark: #2bb881;
$see-success-disabled: #b6efd9;
$see-success-light: #f2fff9;

文字颜色

主要文字
#2e2f33

常规文字
#5a5c60

次要文字
#8c8e93

占位文字
#c9ccd1

定义

// 文字颜色
$see-main-color: #2e2f33;
$see-content-color: #5a5c60;
$see-tips-color: #8c8e93;
$see-light-color: #c9ccd1;

使用

// 文字颜色
color: $see-main-color;
color: $see-content-color;
color: $see-tips-color;
color: $see-light-color;

边框颜色

一级边框
#aeb0b4

二级边框
#c3c5c8

三级边框
#d9dadc

四级边框
#eceff1

定义

// 边框颜色
$see-border-color: #aeb0b4;
$see-border-two-color: #c3c5c8;
$see-border-three-color: #d9dadc;
$see-border-four-color: #eceff1;

使用

// 边框颜色
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

暗色

$see-bg-dark-color: #1e222a;

亮色

$see-bg-light-color: #f6faff;