Skip to content

Latest commit

 

History

History
94 lines (85 loc) · 2.87 KB

README.md

File metadata and controls

94 lines (85 loc) · 2.87 KB

Color

Configuration

Colorsets

$colorsets: (
  'primary': (
    'default':  hsl(240, 90, 50),
    'alt':      hsl(240, 90, 40),
    'alt-2':    hsl(240, 90, 30)
  ),
  'secondary': (
    'default':  hsl(27, 100, 53),
    'alt':      hsl(27, 100, 43)
  ),
  'success': (
    'default':  hsl(122, 90, 50),
    'alt':      hsl(122, 90, 40),
  ),
  'error': (
    'default':  hsl(0, 90, 50),
    'alt':      hsl(0, 90, 40),
  )
  'grey': (
    'black': hsl(240, 1, 1),
    '1':     hsl(240, 4, 10),
    '2':     hsl(240, 3, 24),
    '3':     hsl(240, 3, 30),
    '4':     hsl(240, 2, 40),
    '5':     hsl(240, 2, 50),
    '6':     hsl(240, 2, 84),
    '7':     hsl(240, 1, 92),
    '8':     hsl(240, 1, 96),
    'white': hsl(240, 0, 99)
  )
) !default;

Text Color

Class Name Output
c-primary color: hsl(240, 90, 50)
c-primary-alt color: hsl(240, 90, 40)
c-primary-alt-2 color: hsl(240, 90, 30)
c-secondary color: hsl(27, 100, 53)
c-secondary-alt color: hsl(27, 100, 43)
c-success color: hsl(122, 90, 50)
c-success-alt color: hsl(122, 90, 40)
c-error color: hsl(0, 90, 50)
c-error-alt color: hsl(0, 90, 40)
c-grey-black color: hsl(240, 1, 1)
c-grey-1 color: hsl(240, 1, 10)
c-grey-2 color: hsl(240, 4, 24)
c-grey-3 color: hsl(240, 3, 30)
c-grey-4 color: hsl(240, 3, 40)
c-grey-5 color: hsl(240, 2, 50)
c-grey-6 color: hsl(240, 2, 84)
c-grey-7 color: hsl(240, 1, 92)
c-grey-8 color: hsl(240, 1, 96)
c-grey-white color: hsl(240, 0, 99)

Background Color

Class Name Output
cbg-primary background-color: hsl(240, 90, 50)
cbg-primary-alt background-color: hsl(240, 90, 40)
cbg-primary-alt-2 hsl(240, 90, 30)
cbg-secondary background-color: hsl(27, 100, 53)
cbg-secondary-alt background-color: hsl(27, 100, 43)
cbg-success background-color: hsl(122, 90, 50)
cbg-success-alt background-color: hsl(122, 90, 40)
cbg-error background-color: hsl(0, 90, 50)
cbg-error-alt background-color: hsl(0, 90, 40)
cbg-grey-black background-color: hsl(240, 1, 1)
cbg-grey-1 background-color: hsl(240, 1, 10)
cbg-grey-2 background-color: hsl(240, 4, 24)
cbg-grey-3 background-color: hsl(240, 3, 30)
cbg-grey-4 background-color: hsl(240, 3, 40)
cbg-grey-5 background-color: hsl(240, 2, 50)
cbg-grey-6 background-color: hsl(240, 2, 84)
cbg-grey-7 background-color: hsl(240, 1, 92)
cbg-grey-8 background-color: hsl(240, 1, 96)
cbg-grey-white background-color: hsl(240, 0, 99)