Chi Design System
Colors
Chi defines three primary color palettes and another three extended.
Primary
Green
500
#009f00
100
#edf7e1
200
#cce8a9
300
#a0dd4c
400
#8cc63f
500
#009f00
600
#008100
700
#006c00
800
#205020
Carbon
500
#333333
100
#969696
200
#757575
300
#616161
400
#424242
500
#333333
600
#212121
700
#0e0e0e
800
#000000
Grey
500
#e0e0e0
100
#ffffff
200
#fafafa
300
#f8f8f8
400
#eeeeee
500
#e0e0e0
600
#d5d5d5
700
#cacaca
800
#bdbdbd
Extended
Blue
500
#007ad1
100
#e5f4fb
200
#b8e2f5
300
#a1d0ec
400
#7ec3f4
500
#007ad1
600
#0067b6
700
#00569c
800
#1f3a93
Red
500
#de0c10
100
#fcebea
200
#f9d6d4
300
#ffb4b0
400
#ff6360
500
#de0c10
600
#c32720
700
#9b0000
Yellow
500
#ffa633
100
#fdf9e8
200
#f8e4bc
300
#f6d490
400
#ffba10
500
#ffa633
600
#ff8f00
700
#e8730c
SASS
Chi defines a set of colors in Sass language variables.
$colorscheme: (
green: (
100: #edf7e1,
200: #cce8a9,
300: #a0dd4c,
400: #8cc63f,
500: #009f00,
600: #008100,
700: #006c00,
800: #205020,
),
carbon: (
100: #969696,
200: #757575,
300: #616161,
400: #424242,
500: #333333,
600: #212121,
700: #0e0e0e,
800: #000000,
),
grey: (
100: #ffffff,
200: #fafafa,
300: #f8f8f8,
400: #eeeeee,
500: #e0e0e0,
600: #d5d5d5,
700: #cacaca,
800: #bdbdbd,
),
blue: (
100: #e5f4fb,
200: #b8e2f5,
300: #a1d0ec,
400: #7ec3f4,
500: #007ad1,
600: #0067b6,
700: #00569c,
800: #1f3a93,
),
red: (
100: #fcebea,
200: #f9d6d4,
300: #ffb4b0,
400: #ff6360,
500: #de0c10,
600: #c32720,
700: #9b0000,
),
yellow: (
100: #fdf9e8,
200: #f8e4bc,
300: #f6d490,
400: #ffba10,
500: #ffa633,
600: #ff8f00,
700: #e8730c,
)
);
Also an utility function is created to reference them
set-color($scheme, $tone)
In order to use it, developers only needs to add chi in their project through npm and import the variables and mixins sass files.
@import '@centurylink/chi/src/css/variables';
@import '@centurylink/chi/src/css/mixins';
.example {
color: set-color(carbon, 500);
}