pico/scss/_colors.scss
2019-11-27 15:31:49 +07:00

38 lines
1.4 KiB
SCSS

// Navy-Grey
$grey-hue: 200 !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: 200;
$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;
// Miscs
$amber-200: hsl(45, 100%, 75%) !default;
$green-500: hsl(160, 50%, 40%) !default;
$green-600: hsl(160, 55%, 35%) !default;
$green-700: hsl(160, 60%, 30%) !default;
$red-700: hsl(0, 45%, 50%) !default;
$red-900: hsl(0, 45%, 40%) !default;