-
Notifications
You must be signed in to change notification settings - Fork 920
/
_settings-color.scss
133 lines (119 loc) · 6.2 KB
/
_settings-color.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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS COLOR SETTINGS
----------------------------------------
-
Read more about settings and
USWDS color tokens in the documentation:
https://v2.designsystem.digital.gov/style-tokens/color
-
----------------------------------------
*/
/*
----------------------------------------
Theme palette colors
----------------------------------------
*/
// Base colors
$theme-color-base-family: 'gray' !default;
$theme-color-base-lightest: '#{$theme-color-base-family}-5' !default;
$theme-color-base-lighter: 'gray-cool-10' !default;
$theme-color-base-light: '#{$theme-color-base-family}-30' !default;
$theme-color-base: '#{$theme-color-base-family}-50' !default;
$theme-color-base-dark: 'gray-cool-60' !default;
$theme-color-base-darker: 'gray-cool-80' !default;
$theme-color-base-darkest: '#{$theme-color-base-family}-90' !default;
$theme-color-base-ink: '#{$theme-color-base-family}-90' !default;
// Primary colors
$theme-color-primary-family: 'blue' !default;
$theme-color-primary-lightest: false !default;
$theme-color-primary-lighter: '#{$theme-color-primary-family}-10' !default;
$theme-color-primary-light: '#{$theme-color-primary-family}-30' !default;
$theme-color-primary: '#{$theme-color-primary-family}-60v' !default;
$theme-color-primary-vivid: 'blue-warm-60v' !default;
$theme-color-primary-dark: 'blue-warm-70v' !default;
$theme-color-primary-darker: 'blue-warm-80v' !default;
$theme-color-primary-darkest: false !default;
// Secondary colors
$theme-color-secondary-family: 'red' !default;
$theme-color-secondary-lightest: false !default;
$theme-color-secondary-lighter: '#{$theme-color-secondary-family}-10' !default;
$theme-color-secondary-light: '#{$theme-color-secondary-family}-30' !default;
$theme-color-secondary: '#{$theme-color-secondary-family}-50' !default;
$theme-color-secondary-vivid: '#{$theme-color-secondary-family}-50v' !default;
$theme-color-secondary-dark: '#{$theme-color-secondary-family}-60v' !default;
$theme-color-secondary-darker: '#{$theme-color-secondary-family}-70v' !default;
$theme-color-secondary-darkest: false;
// Accent warm colors
$theme-color-accent-warm-family: 'orange' !default;
$theme-color-accent-warm-lightest: false !default;
$theme-color-accent-warm-lighter: '#{$theme-color-accent-warm-family}-10' !default;
$theme-color-accent-warm-light: '#{$theme-color-accent-warm-family}-20v' !default;
$theme-color-accent-warm: '#{$theme-color-accent-warm-family}-30v' !default;
$theme-color-accent-warm-dark: '#{$theme-color-accent-warm-family}-50v' !default;
$theme-color-accent-warm-darker: '#{$theme-color-accent-warm-family}-60' !default;
$theme-color-accent-warm-darkest: false !default;
// Accent cool colors
$theme-color-accent-cool-family: 'cyan' !default;
$theme-color-accent-cool-lightest: false !default;
$theme-color-accent-cool-lighter: '#{$theme-color-accent-cool-family}-5' !default;
$theme-color-accent-cool-light: '#{$theme-color-accent-cool-family}-20' !default;
$theme-color-accent-cool: '#{$theme-color-accent-cool-family}-30v' !default;
$theme-color-accent-cool-dark: '#{$theme-color-accent-cool-family}-40v' !default;
$theme-color-accent-cool-darker: 'blue-cool-60' !default;
$theme-color-accent-cool-darkest: false !default;
/*
----------------------------------------
State palette colors
----------------------------------------
*/
// Error colors
$theme-color-error-family: 'red' !default;
$theme-color-error-lighter: '#{$theme-color-error-family}-10' !default;
$theme-color-error-light: '#{$theme-color-error-family}-40v' !default;
$theme-color-error: '#{$theme-color-error-family}-50' !default;
$theme-color-error-dark: '#{$theme-color-error-family}-60v' !default;
$theme-color-error-darker: '#{$theme-color-error-family}-70v' !default;
// Warning colors
$theme-color-warning-family: 'gold' !default;
$theme-color-warning-lighter: '#{$theme-color-warning-family}-5v' !default;
$theme-color-warning-light: '#{$theme-color-warning-family}-10v' !default;
$theme-color-warning: '#{$theme-color-warning-family}-20v' !default;
$theme-color-warning-dark: '#{$theme-color-warning-family}-30v' !default;
$theme-color-warning-darker: '#{$theme-color-warning-family}-40v' !default;
// Success colors
$theme-color-success-family: 'green-cool' !default;
$theme-color-success-lighter: '#{$theme-color-success-family}-5' !default;
$theme-color-success-light: '#{$theme-color-success-family}-30v' !default;
$theme-color-success: '#{$theme-color-success-family}-40v' !default;
$theme-color-success-dark: '#{$theme-color-success-family}-50' !default;
$theme-color-success-darker: '#{$theme-color-success-family}-70' !default;
// Info colors
$theme-color-info-family: 'cyan' !default;
$theme-color-info-lighter: '#{$theme-color-info-family}-5' !default;
$theme-color-info-light: '#{$theme-color-info-family}-20' !default;
$theme-color-info: '#{$theme-color-info-family}-30v' !default;
$theme-color-info-dark: '#{$theme-color-info-family}-40v' !default;
$theme-color-info-darker: 'blue-60' !default;
// Disabled colors
$theme-color-disabled-family: 'gray' !default;
$theme-color-disabled-light: '#{$theme-color-disabled-family}-10' !default;
$theme-color-disabled: '#{$theme-color-disabled-family}-20' !default;
$theme-color-disabled-dark: '#{$theme-color-disabled-family}-30' !default;
/*
----------------------------------------
General colors
----------------------------------------
*/
// Links
$theme-link-color: 'primary' !default;
$theme-link-visited-color: 'violet-70v' !default;
$theme-link-hover-color: 'primary-darker' !default;
$theme-link-active-color: 'primary-darker' !default;