You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
2.0 KiB
SCSS
66 lines
2.0 KiB
SCSS
2 years ago
|
// navy-grey
|
||
|
$grey-hue: 205 !default;
|
||
|
$grey-50: hsl($grey-hue, 20%, 94%) !default;
|
||
|
$grey-100: hsl($grey-hue, 18%, 86%) !default;
|
||
|
$grey-200: hsl($grey-hue, 16%, 77%) !default;
|
||
|
$grey-300: hsl($grey-hue, 14%, 68%) !default;
|
||
|
$grey-400: hsl($grey-hue, 12%, 59%) !default;
|
||
|
$grey-500: hsl($grey-hue, 10%, 50%) !default;
|
||
|
$grey-600: hsl($grey-hue, 15%, 41%) !default;
|
||
|
$grey-700: hsl($grey-hue, 20%, 32%) !default;
|
||
|
$grey-800: hsl($grey-hue, 25%, 23%) !default;
|
||
|
$grey-900: hsl($grey-hue, 30%, 15%) !default;
|
||
|
|
||
|
// light blue
|
||
|
$primary-hue: 195 !default;
|
||
|
$primary-50: hsl($primary-hue, 90%, 94%) !default;
|
||
|
$primary-100: hsl($primary-hue, 88%, 86%) !default;
|
||
|
$primary-200: hsl($primary-hue, 86%, 77%) !default;
|
||
|
$primary-300: hsl($primary-hue, 84%, 68%) !default;
|
||
|
$primary-400: hsl($primary-hue, 82%, 59%) !default;
|
||
|
$primary-500: hsl($primary-hue, 80%, 50%) !default;
|
||
|
$primary-600: hsl($primary-hue, 85%, 41%) !default;
|
||
|
$primary-700: hsl($primary-hue, 90%, 32%) !default;
|
||
|
$primary-800: hsl($primary-hue, 95%, 23%) !default;
|
||
|
$primary-900: hsl($primary-hue, 100%, 15%) !default;
|
||
|
|
||
|
// black & white
|
||
|
$black: #000 !default;
|
||
|
$white: #fff !default;
|
||
|
|
||
|
// amber
|
||
|
$amber-50: #fff8e1 !default;
|
||
|
$amber-100: #ffecb3 !default;
|
||
|
$amber-200: #ffe082 !default;
|
||
|
$amber-300: #ffd54f !default;
|
||
|
$amber-400: #ffca28 !default;
|
||
|
$amber-500: #ffc107 !default;
|
||
|
$amber-600: #ffb300 !default;
|
||
|
$amber-700: #ffa000 !default;
|
||
|
$amber-800: #ff8f00 !default;
|
||
|
$amber-900: #ff6f00 !default;
|
||
|
|
||
|
// green
|
||
|
$green-50: #e8f5e9 !default;
|
||
|
$green-100: #c8e6c9 !default;
|
||
|
$green-200: #a5d6a7 !default;
|
||
|
$green-300: #81c784 !default;
|
||
|
$green-400: #66bb6a !default;
|
||
|
$green-500: #4caf50 !default;
|
||
|
$green-600: #43a047 !default;
|
||
|
$green-700: #388e3c !default;
|
||
|
$green-800: #2e7d32 !default;
|
||
|
$green-900: #1b5e20 !default;
|
||
|
|
||
|
// red
|
||
|
$red-50: #ffebee !default;
|
||
|
$red-100: #ffcdd2 !default;
|
||
|
$red-200: #ef9a9a !default;
|
||
|
$red-300: #e57373 !default;
|
||
|
$red-400: #ef5350 !default;
|
||
|
$red-500: #f44336 !default;
|
||
|
$red-600: #e53935 !default;
|
||
|
$red-700: #d32f2f !default;
|
||
|
$red-800: #c62828 !default;
|
||
|
$red-900: #b71c1c !default;
|