forked from canonical/vanilla-framework
/
_settings_colors.scss
83 lines (68 loc) · 3.36 KB
/
_settings_colors.scss
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
// Global color settings
$color-transparent: transparent !default;
$color-brand: #333 !default;
$color-link: #007aa6 !default;
$color-x-light: #fff !default;
$color-light: #f7f7f7 !default;
$color-mid-x-light: #e5e5e5 !default;
$color-mid-light: #cdcdcd !default;
$color-mid: #999 !default;
$color-mid-dark: #666 !default;
$color-dark: #111 !default;
$color-x-dark: #000 !default;
$color-negative: #c7162b !default;
$color-caution: #f99b11 !default;
$color-positive: #0e8420 !default;
$color-information: #335280 !default;
$color-label-validated: #006b75;
$color-input-shadow: rgba($color-x-dark, 0.12) !default;
$color-accent: $color-brand !default;
$color-accent-background: $color-accent !default;
// for visual outline on :active / :focus elements
$color-focus: #19b6ee !default;
$states: (
error: $color-negative,
caution: $color-caution,
success: $color-positive,
information: $color-information
);
// THEME COLORS
// ==============
//
// Text colors:
// --text-default - default text color
// --text-hover - dimmed version of default text color, to be used in hover effects (when background doesn't change)
// --text-disabled - dimmed version of default text color, to be used on disabled controls
// --text-muted - muted version of default text color, to be used on elements with less prominence
//
// Background colors:
// --background - default background color
// --background-alt - alternative version of background color, to be used to diffrenciate given surface
// --background-highlight - background used on highlighted elements (for example selected elements in the navigation)
//
// Border colors:
// --border-default - default border color
// --border-high-contrast - high contrast version of border color, to be used when border needs more visibility (form inputs, etc)
// --border-low-contrast - low contrast version of border color, to be used when border needs more visibility (separators)
// Light theme
$colors--light-theme--text-default: #111 !default;
$colors--light-theme--text-hover: #757575 !default;
$colors--light-theme--text-disabled: #666 !default;
$colors--light-theme--text-muted: #666 !default;
$colors--light-theme--background-default: #fff !default;
$colors--light-theme--background-alt: #f7f7f7 !default;
$colors--light-theme--background-highlight: #f7f7f7 !default;
$colors--light-theme--border-default: #cdcdcd !default;
$colors--light-theme--border-high-contrast: #999 !default;
$colors--light-theme--border-low-contrast: #e5e5e5 !default;
// Dark theme
$colors--dark-theme--text-default: hsl(0, 0%, 100%) !default;
$colors--dark-theme--text-hover: hsl(0, 0%, 56%) !default; // minimum contrast on primary that satisfies contrast checker AA
$colors--dark-theme--text-disabled: rgba($colors--dark-theme--text-default, 0.55) !default;
$colors--dark-theme--text-muted: rgba($colors--dark-theme--text-default, 0.55) !default;
$colors--dark-theme--background-default: hsl(0, 0%, 15%) !default;
$colors--dark-theme--background-alt: hsl(0, 0%, 20%) !default;
$colors--dark-theme--background-highlight: rgba($colors--dark-theme--text-default, 0.05) !default;
$colors--dark-theme--border-default: rgba($colors--dark-theme--text-default, 0.2) !default;
$colors--dark-theme--border-high-contrast: rgba($colors--dark-theme--text-default, 0.4) !default;
$colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default, 0.1) !default;