aboutsummaryrefslogtreecommitdiffstats
path: root/demo/src/sass/settings/colors.scss
blob: 451bc29d95b943e9f67e312ea643cf5143907b3b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// ==========================================================================
// Colors
// ==========================================================================

// Grayscale
$color-gray-900: hsl(210deg 15% 16%);
$color-gray-800: lighten($color-gray-900, 9%);
$color-gray-700: lighten($color-gray-800, 9%);
$color-gray-600: lighten($color-gray-700, 9%);
$color-gray-500: lighten($color-gray-600, 9%);
$color-gray-400: lighten($color-gray-500, 9%);
$color-gray-300: lighten($color-gray-400, 9%);
$color-gray-200: lighten($color-gray-300, 9%);
$color-gray-100: lighten($color-gray-200, 9%);
$color-gray-50: lighten($color-gray-100, 9%);

// Branding
$color-brand-primary: hsl(198deg 100% 50%);

// Text
$color-text: $color-gray-700;
$color-headings: $color-brand-primary;

// Brands
$color-twitter: #4baaf4;

// Elements
$color-link: $color-brand-primary;

// Background
$color-background-from: hsl(198deg 100% 94%);
$color-background-to: hsl(198deg 100% 98%);

// Buttons
$color-button-background: $color-brand-primary;
$color-button-text: #fff;
$color-button-background-hover: hsl(198deg 100% 55%);
$color-button-count-background: #fff;
$color-button-count-text: $color-gray-600;

// Focus
$tab-focus-default-color: #fff;