Color

SeeYouUI defines a color system to unify the color performance of components.

Tip

SeeYouUI colors have been imported via uni.scss. Please do not define them again.

Primary Color

primary
#3ca7ff

dark
#208ee8

disabled
#a8d8ff

light
#e9f6ff

Definition

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

usage

// Primary Color
color: $see-primary;
color: $see-primary-dark;
color: $see-primary-disabled;
color: $see-primary-light;

Support Colors: 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

// Default 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;

Text Colors

Primary Text
#2e2f33

Regular Text
#5a5c60

Secondary Text
#8c8e93

Placeholder Text
#c9ccd1

definition

// Text Colors
$see-main-color: #2e2f33;
$see-content-color: #5a5c60;
$see-tips-color: #8c8e93;
$see-light-color: #c9ccd1;

usage

// Text Colors
color: $see-main-color;
color: $see-content-color;
color: $see-tips-color;
color: $see-light-color;

Border Colors

Tier 1 Border
#aeb0b4

Tier 2 Border
#c3c5c8

Tier 3 Border
#d9dadc

Tier 4 Border
#eceff1

definition

// Border Colors
$see-border-color: #aeb0b4;
$see-border-two-color: #c3c5c8;
$see-border-three-color: #d9dadc;
$see-border-four-color: #eceff1;

usage

// Border Colors
border-color: $see-border-color;
border-color: $see-border-two-color;
border-color: $see-border-three-color;
border-color: $see-border-four-color;

Background Colors

Dark
#1e222a

Light
#f6faff

dark

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

light

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