| 1. Initial variables | |
|---|---|
| 1. Initial variables | |
|---|---|
| Colors | |
| Colors | |
$black |
+ + + #0a0a0a + | +
$grey-darker |
+ + + #363636 + | +
$grey-dark |
+ + + #4a4a4a + | +
$grey |
+ + + #7a7a7a + | +
$grey-light |
+ + + #b5b5b5 + | +
$grey-lighter |
+ + + #dbdbdb + | +
$white |
+ + + #fff + | +
$blue |
+ + + #3273dc + | +
$green |
+ + + #23d160 + | +
$orange |
+ + + #ff470f + | +
$purple |
+ + + #b86bff + | +
$red |
+ + + #ff3860 + | +
$turquoise |
+ + + #00d1b2 + | +
$yellow |
+ + + #ffdd57 + | +
$black |
- - - #0a0a0a - | -
$grey-darker |
- - - #363636 - | -
$grey-dark |
- - - #4a4a4a - | -
$grey |
- - - #7a7a7a - | -
$grey-light |
- - - #b5b5b5 - | -
$grey-lighter |
- - - #dbdbdb - | -
$white |
- - - #fff - | -
$blue |
- - - #3273dc - | -
$green |
- - - #23d160 - | -
$orange |
- - - #ff470f - | -
$purple |
- - - #b86bff - | -
$red |
- - - #ff3860 - | -
$turquoise |
- - - #00d1b2 - | -
$yellow |
- - - #ffdd57 - | -
| Typography | |
$family-sans-serif |
+ -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif | +
$family-monospace |
+ "Inconsolata", "Consolas", "Monaco", monospace | +
$size-1 |
+ 48px | +
$size-2 |
+ 40px | +
$size-3 |
+ 28px | +
$size-4 |
+ 24px | +
$size-5 |
+ 18px | +
$size-6 |
+ 14px | +
$size-7 |
+ 11px | +
$weight-normal |
+ 400 | +
$weight-bold |
+ 700 | +
$weight-title-normal |
+ 300 | +
$weight-title-bold |
+ 500 | +
| Typography | |
| Breakpoints | |
$tablet |
+ 769px | +
$desktop |
+ 980px | +
$widescreen |
+ 1180px | +
$family-sans-serif | -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif |
$family-monospace | "Inconsolata", "Consolas", "Monaco", monospace |
| Miscellaneous | |
$easing |
+ ease-out | +
$radius |
+ 3px | +
$speed |
+ 86ms | +
$size-1 | 48px |
$size-2 | 40px |
$size-3 | 28px |
$size-4 | 24px |
$size-5 | 18px |
$size-6 | 14px |
| 2. Primary colors | |
$primary |
+ $turquoise | +
$info |
+ $blue | +
$success |
+ $green | +
$warning |
+ $yellow | +
$danger |
+ $red | +
$light |
+ $grey-lighter | +
$dark |
+ $grey-dark | +
$text |
+ $grey-dark | +
$size-7 | 11px |
| 3. Generated variables | |
$weight-normal | 400 |
$weight-bold | 700 |
$weight-title-normal | 300 |
$weight-title-bold | 500 |
| Invert colors | |
$primary-invert |
+ findColorInvert($primary) | +
$info-invert |
+ findColorInvert($info) | +
$success-invert |
+ findColorInvert($success) | +
$warning-invert |
+ findColorInvert($warning) | +
$danger-invert |
+ findColorInvert($danger) | +
$light-invert |
+ $dark | +
$dark-invert |
+ $light | +
| Breakpoints | |
| General colors | |
$body-background |
+ $grey-lighter | +
$background |
+ $grey-lighter | +
$border |
+ $grey-light | +
$border-hover |
+ $grey | +
$tablet | 769px |
$desktop | 980px |
$widescreen | 1180px |
| Text colors | |
$text-invert |
+ findColorInvert($text) | +
$text-light |
+ $grey | +
$text-strong |
+ $grey-darker | +
| Miscellaneous | |
| Code colors | |
$code |
+ $red | +
$code-background |
+ $background | +
$pre |
+ $text | +
$pre-background |
+ $background | +
$easing | ease-out |
$radius | 3px |
$speed | 86ms |
| Link colors | |
$link |
+ $primary | +
$link-invert |
+ $primary-invert | +
$link-visited |
+ $purple | +
$link-hover |
+ $grey-darker | +
$link-hover-background |
+ $grey-lighter | +
$link-hover-border |
+ $grey-darker | +
$link-active |
+ $grey-darker | +
$link-active-border |
+ $grey-darker | +
| 2. Primary colors | |
| Control colors | |
$control |
+ $text-strong | +
$control-background |
+ $text-invert | +
$control-border |
+ $border | +
$control-hover |
+ $link-hover | +
$control-hover-border |
+ $border-hover | +
$control-active |
+ $link | +
$control-active-background |
+ $link | +
$control-active-background-invert |
+ $link-invert | +
$control-active-border |
+ $link | +
$primary | $turquoise |
| Typography | |
$family-primary |
+ $family-sans-serif | +
$family-code |
+ $family-monospace | +
$size-small |
+ $size-7 | +
$size-normal |
+ $size-6 | +
$size-medium |
+ $size-5 | +
$size-large |
+ $size-3 | +
$size-huge |
+ $size-1 | +
$info | $blue |
$success | $green |
$warning | $yellow |
$danger | $red |
$light | $grey-lighter |
$dark | $grey-dark |
$text | $grey-dark |
| 3. Generated variables | |
| Invert colors | |
$primary-invert | findColorInvert($primary) |
$info-invert | findColorInvert($info) |
$success-invert | findColorInvert($success) |
$warning-invert | findColorInvert($warning) |
$danger-invert | findColorInvert($danger) |
$light-invert | $dark |
$dark-invert | $light |
| General colors | |
$body-background | $grey-lighter |
$background | $grey-lighter |
$border | $grey-light |
$border-hover | $grey |
| Text colors | |
$text-invert | findColorInvert($text) |
$text-light | $grey |
$text-strong | $grey-darker |
| Code colors | |
$code | $red |
$code-background | $background |
$pre | $text |
$pre-background | $background |
| Link colors | |
$link | $primary |
$link-invert | $primary-invert |
$link-visited | $purple |
$link-hover | $grey-darker |
$link-hover-background | $grey-lighter |
$link-hover-border | $grey-darker |
$link-active | $grey-darker |
$link-active-border | $grey-darker |
| Control colors | |
$control | $text-strong |
$control-background | $text-invert |
$control-border | $border |
$control-hover | $link-hover |
$control-hover-border | $border-hover |
$control-active | $link |
$control-active-background | $link |
$control-active-background-invert | $link-invert |
$control-active-border | $link |
| Typography | |
$family-primary | $family-sans-serif |
$family-code | $family-monospace |
$size-small | $size-7 |
$size-normal | $size-6 |
$size-medium | $size-5 |
$size-large | $size-3 |
$size-huge | $size-1 |
| 4. Lists and maps | |
$colors
- |
- (white: ($white, $black), - black: ($black, $white), - light: ($light, $light-invert), - dark: ($dark, $dark-invert), - primary: ($primary, $primary-invert), - info: ($info, $info-invert), - success: ($success, $success-invert), - warning: ($warning, $warning-invert), - danger: ($danger, $danger-invert)) - |
-
$sizes | $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 |
$colors
+ $sizes