@atlaskit/tokens 13.2.0 → 13.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/dist/cjs/artifacts/themes/atlassian-dark-increased-contrast.js +2 -2
- package/dist/cjs/artifacts/themes/atlassian-dark.js +2 -2
- package/dist/cjs/artifacts/themes/atlassian-light-increased-contrast.js +2 -2
- package/dist/cjs/artifacts/themes/atlassian-light.js +2 -2
- package/dist/cjs/artifacts/token-default-values.js +118 -107
- package/dist/cjs/artifacts/token-names.js +118 -107
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +3413 -3171
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +3180 -2938
- package/dist/cjs/artifacts/tokens-raw/atlassian-light-increased-contrast.js +3414 -3172
- package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +3180 -2938
- package/dist/cjs/entry-points/token-metadata.codegen.js +1748 -1649
- package/dist/cjs/utils/token-order.js +1 -1
- package/dist/cjs/utils/token-usage-guidelines.js +14 -1
- package/dist/es2019/artifacts/themes/atlassian-dark-increased-contrast.js +118 -107
- package/dist/es2019/artifacts/themes/atlassian-dark.js +118 -107
- package/dist/es2019/artifacts/themes/atlassian-light-increased-contrast.js +118 -107
- package/dist/es2019/artifacts/themes/atlassian-light.js +118 -107
- package/dist/es2019/artifacts/token-default-values.js +118 -107
- package/dist/es2019/artifacts/token-names.js +118 -107
- package/dist/es2019/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +3413 -3171
- package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +3180 -2938
- package/dist/es2019/artifacts/tokens-raw/atlassian-light-increased-contrast.js +3414 -3172
- package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +3180 -2938
- package/dist/es2019/entry-points/token-metadata.codegen.js +1748 -1649
- package/dist/es2019/utils/token-order.js +1 -1
- package/dist/es2019/utils/token-usage-guidelines.js +14 -1
- package/dist/esm/artifacts/themes/atlassian-dark-increased-contrast.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-dark.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-light-increased-contrast.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-light.js +2 -2
- package/dist/esm/artifacts/token-default-values.js +118 -107
- package/dist/esm/artifacts/token-names.js +118 -107
- package/dist/esm/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +3413 -3171
- package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +3180 -2938
- package/dist/esm/artifacts/tokens-raw/atlassian-light-increased-contrast.js +3414 -3172
- package/dist/esm/artifacts/tokens-raw/atlassian-light.js +3180 -2938
- package/dist/esm/entry-points/token-metadata.codegen.js +1748 -1649
- package/dist/esm/utils/token-order.js +1 -1
- package/dist/esm/utils/token-usage-guidelines.js +14 -1
- package/dist/types/artifacts/themes/atlassian-dark-increased-contrast.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-dark.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-light-increased-contrast.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-light.d.ts +2 -2
- package/dist/types/artifacts/token-default-values.d.ts +118 -107
- package/dist/types/artifacts/token-names.d.ts +235 -213
- package/dist/types/artifacts/tokens-raw/atlassian-dark-increased-contrast.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-light-increased-contrast.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
- package/dist/types/artifacts/types-internal.d.ts +2 -2
- package/dist/types/artifacts/types.d.ts +2 -2
- package/dist/types/entry-points/css-type-schema.codegen.d.ts +6 -6
- package/dist/types/entry-points/token-metadata.codegen.d.ts +1 -1
- package/dist/types/types.d.ts +23 -0
- package/dist/types-ts4.5/artifacts/themes/atlassian-dark-increased-contrast.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/themes/atlassian-dark.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/themes/atlassian-light-increased-contrast.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/themes/atlassian-light.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/token-default-values.d.ts +118 -107
- package/dist/types-ts4.5/artifacts/token-names.d.ts +235 -213
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark-increased-contrast.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-light-increased-contrast.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/types-internal.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/types.d.ts +2 -2
- package/dist/types-ts4.5/entry-points/css-type-schema.codegen.d.ts +6 -6
- package/dist/types-ts4.5/entry-points/token-metadata.codegen.d.ts +1 -1
- package/dist/types-ts4.5/types.d.ts +23 -0
- package/figma/atlassian-dark-increased-contrast.json +1303 -1204
- package/figma/atlassian-dark.json +1301 -1202
- package/figma/atlassian-light-increased-contrast.json +1302 -1203
- package/figma/atlassian-light.json +1297 -1198
- package/package.json +2 -2
|
@@ -1,2768 +1,2741 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "Light",
|
|
3
3
|
"tokens": {
|
|
4
|
-
"Light/color.
|
|
4
|
+
"Light/color.background.accent.lime.subtlest": {
|
|
5
5
|
"attributes": {
|
|
6
6
|
"group": "paint",
|
|
7
7
|
"state": "active",
|
|
8
|
-
"introduced": "
|
|
9
|
-
"description": "Use for
|
|
8
|
+
"introduced": "1.6.0",
|
|
9
|
+
"description": "Use for for backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
|
|
10
10
|
},
|
|
11
|
-
"value": "#
|
|
11
|
+
"value": "#EFFFD6"
|
|
12
12
|
},
|
|
13
|
-
"Light/color.
|
|
13
|
+
"Light/color.background.accent.lime.subtlest.hovered": {
|
|
14
14
|
"attributes": {
|
|
15
15
|
"group": "paint",
|
|
16
16
|
"state": "active",
|
|
17
|
-
"introduced": "1.
|
|
18
|
-
"description": "
|
|
17
|
+
"introduced": "1.19.0",
|
|
18
|
+
"description": "Hovered state of color.background.accent.lime.subtlest."
|
|
19
19
|
},
|
|
20
|
-
"value": "#
|
|
20
|
+
"value": "#D3F1A7"
|
|
21
21
|
},
|
|
22
|
-
"Light/color.
|
|
22
|
+
"Light/color.background.accent.lime.subtlest.pressed": {
|
|
23
23
|
"attributes": {
|
|
24
24
|
"group": "paint",
|
|
25
25
|
"state": "active",
|
|
26
|
-
"introduced": "1.
|
|
27
|
-
"description": "
|
|
26
|
+
"introduced": "1.19.0",
|
|
27
|
+
"description": "Pressed state of color.background.accent.lime.subtlest."
|
|
28
28
|
},
|
|
29
|
-
"value": "#
|
|
29
|
+
"value": "#BDE97C"
|
|
30
30
|
},
|
|
31
|
-
"Light/color.
|
|
31
|
+
"Light/color.background.accent.lime.subtler": {
|
|
32
32
|
"attributes": {
|
|
33
33
|
"group": "paint",
|
|
34
34
|
"state": "active",
|
|
35
|
-
"introduced": "
|
|
36
|
-
"description": "Use for
|
|
35
|
+
"introduced": "1.6.0",
|
|
36
|
+
"description": "Use for for backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
37
37
|
},
|
|
38
|
-
"value": "#
|
|
38
|
+
"value": "#D3F1A7"
|
|
39
39
|
},
|
|
40
|
-
"Light/color.
|
|
40
|
+
"Light/color.background.accent.lime.subtler.hovered": {
|
|
41
41
|
"attributes": {
|
|
42
42
|
"group": "paint",
|
|
43
43
|
"state": "active",
|
|
44
|
-
"introduced": "
|
|
45
|
-
"description": "
|
|
44
|
+
"introduced": "1.19.0",
|
|
45
|
+
"description": "Hovered state of color.background.accent.lime.subtler."
|
|
46
46
|
},
|
|
47
|
-
"value": "#
|
|
47
|
+
"value": "#BDE97C"
|
|
48
48
|
},
|
|
49
|
-
"Light/color.
|
|
49
|
+
"Light/color.background.accent.lime.subtler.pressed": {
|
|
50
50
|
"attributes": {
|
|
51
51
|
"group": "paint",
|
|
52
52
|
"state": "active",
|
|
53
|
-
"introduced": "
|
|
54
|
-
"description": "
|
|
53
|
+
"introduced": "1.19.0",
|
|
54
|
+
"description": "Pressed state of color.background.accent.lime.subtler."
|
|
55
55
|
},
|
|
56
|
-
"value": "#
|
|
56
|
+
"value": "#B3DF72"
|
|
57
57
|
},
|
|
58
|
-
"Light/color.
|
|
58
|
+
"Light/color.background.accent.lime.subtle": {
|
|
59
59
|
"attributes": {
|
|
60
60
|
"group": "paint",
|
|
61
61
|
"state": "active",
|
|
62
|
-
"introduced": "
|
|
63
|
-
"description": "Use for
|
|
62
|
+
"introduced": "1.6.0",
|
|
63
|
+
"description": "Use for vibrant for backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
64
64
|
},
|
|
65
|
-
"value": "#
|
|
65
|
+
"value": "#94C748"
|
|
66
66
|
},
|
|
67
|
-
"Light/color.
|
|
67
|
+
"Light/color.background.accent.lime.subtle.hovered": {
|
|
68
68
|
"attributes": {
|
|
69
69
|
"group": "paint",
|
|
70
70
|
"state": "active",
|
|
71
|
-
"introduced": "
|
|
72
|
-
"description": "
|
|
71
|
+
"introduced": "1.19.0",
|
|
72
|
+
"description": "Hovered state of color.background.accent.lime.subtle."
|
|
73
73
|
},
|
|
74
|
-
"value": "#
|
|
74
|
+
"value": "#B3DF72"
|
|
75
75
|
},
|
|
76
|
-
"Light/color.
|
|
76
|
+
"Light/color.background.accent.lime.subtle.pressed": {
|
|
77
77
|
"attributes": {
|
|
78
78
|
"group": "paint",
|
|
79
79
|
"state": "active",
|
|
80
|
-
"introduced": "
|
|
81
|
-
"description": "
|
|
80
|
+
"introduced": "1.19.0",
|
|
81
|
+
"description": "Pressed state of color.background.accent.lime.subtle."
|
|
82
82
|
},
|
|
83
|
-
"value": "#
|
|
83
|
+
"value": "#BDE97C"
|
|
84
84
|
},
|
|
85
|
-
"Light/color.
|
|
85
|
+
"Light/color.background.accent.lime.bolder": {
|
|
86
86
|
"attributes": {
|
|
87
87
|
"group": "paint",
|
|
88
88
|
"state": "active",
|
|
89
|
-
"introduced": "
|
|
90
|
-
"description": "Use for
|
|
89
|
+
"introduced": "1.6.0",
|
|
90
|
+
"description": "Use for for backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
|
|
91
91
|
},
|
|
92
|
-
"value": "#
|
|
92
|
+
"value": "#5B7F24"
|
|
93
93
|
},
|
|
94
|
-
"Light/color.
|
|
94
|
+
"Light/color.background.accent.lime.bolder.hovered": {
|
|
95
95
|
"attributes": {
|
|
96
96
|
"group": "paint",
|
|
97
97
|
"state": "active",
|
|
98
|
-
"introduced": "
|
|
99
|
-
"description": "
|
|
98
|
+
"introduced": "1.19.0",
|
|
99
|
+
"description": "Hovered state of color.background.accent.lime.bolder."
|
|
100
100
|
},
|
|
101
|
-
"value": "#
|
|
101
|
+
"value": "#4C6B1F"
|
|
102
102
|
},
|
|
103
|
-
"Light/color.
|
|
103
|
+
"Light/color.background.accent.lime.bolder.pressed": {
|
|
104
104
|
"attributes": {
|
|
105
105
|
"group": "paint",
|
|
106
106
|
"state": "active",
|
|
107
|
-
"introduced": "
|
|
108
|
-
"description": "
|
|
107
|
+
"introduced": "1.19.0",
|
|
108
|
+
"description": "Pressed state of color.background.accent.lime.bolder."
|
|
109
109
|
},
|
|
110
|
-
"value": "#
|
|
110
|
+
"value": "#3F5224"
|
|
111
111
|
},
|
|
112
|
-
"Light/color.
|
|
112
|
+
"Light/color.background.accent.red.subtlest": {
|
|
113
113
|
"attributes": {
|
|
114
114
|
"group": "paint",
|
|
115
115
|
"state": "active",
|
|
116
116
|
"introduced": "0.7.0",
|
|
117
|
-
"description": "Use for
|
|
117
|
+
"description": "Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
|
|
118
118
|
},
|
|
119
|
-
"value": "#
|
|
119
|
+
"value": "#FFECEB"
|
|
120
120
|
},
|
|
121
|
-
"Light/color.
|
|
121
|
+
"Light/color.background.accent.red.subtlest.hovered": {
|
|
122
122
|
"attributes": {
|
|
123
123
|
"group": "paint",
|
|
124
124
|
"state": "active",
|
|
125
|
-
"introduced": "
|
|
126
|
-
"description": "
|
|
125
|
+
"introduced": "1.19.0",
|
|
126
|
+
"description": "Hovered state of color.background.accent.red.subtlest."
|
|
127
127
|
},
|
|
128
|
-
"value": "#
|
|
128
|
+
"value": "#FFD5D2"
|
|
129
129
|
},
|
|
130
|
-
"Light/color.
|
|
130
|
+
"Light/color.background.accent.red.subtlest.pressed": {
|
|
131
131
|
"attributes": {
|
|
132
132
|
"group": "paint",
|
|
133
133
|
"state": "active",
|
|
134
|
-
"introduced": "
|
|
135
|
-
"description": "
|
|
134
|
+
"introduced": "1.19.0",
|
|
135
|
+
"description": "Pressed state of color.background.accent.red.subtlest."
|
|
136
136
|
},
|
|
137
|
-
"value": "#
|
|
137
|
+
"value": "#FFB8B2"
|
|
138
138
|
},
|
|
139
|
-
"Light/color.
|
|
139
|
+
"Light/color.background.accent.red.subtler": {
|
|
140
140
|
"attributes": {
|
|
141
141
|
"group": "paint",
|
|
142
142
|
"state": "active",
|
|
143
|
-
"introduced": "0.
|
|
144
|
-
"description": "Use for
|
|
143
|
+
"introduced": "0.7.0",
|
|
144
|
+
"description": "Use for red backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
145
145
|
},
|
|
146
|
-
"value": "#
|
|
146
|
+
"value": "#FFD5D2"
|
|
147
147
|
},
|
|
148
|
-
"Light/color.
|
|
148
|
+
"Light/color.background.accent.red.subtler.hovered": {
|
|
149
149
|
"attributes": {
|
|
150
150
|
"group": "paint",
|
|
151
151
|
"state": "active",
|
|
152
|
-
"introduced": "
|
|
153
|
-
"description": "
|
|
152
|
+
"introduced": "1.19.0",
|
|
153
|
+
"description": "Hovered state of color.background.accent.red.subtler."
|
|
154
154
|
},
|
|
155
|
-
"value": "#
|
|
155
|
+
"value": "#FFB8B2"
|
|
156
156
|
},
|
|
157
|
-
"Light/color.
|
|
157
|
+
"Light/color.background.accent.red.subtler.pressed": {
|
|
158
158
|
"attributes": {
|
|
159
159
|
"group": "paint",
|
|
160
160
|
"state": "active",
|
|
161
|
-
"introduced": "
|
|
162
|
-
"description": "
|
|
161
|
+
"introduced": "1.19.0",
|
|
162
|
+
"description": "Pressed state of color.background.accent.red.subtler."
|
|
163
163
|
},
|
|
164
|
-
"value": "#
|
|
164
|
+
"value": "#FD9891"
|
|
165
165
|
},
|
|
166
|
-
"Light/color.
|
|
166
|
+
"Light/color.background.accent.red.subtle": {
|
|
167
167
|
"attributes": {
|
|
168
168
|
"group": "paint",
|
|
169
169
|
"state": "active",
|
|
170
170
|
"introduced": "0.7.0",
|
|
171
|
-
"description": "Use for
|
|
171
|
+
"description": "Use for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
172
172
|
},
|
|
173
|
-
"value": "#
|
|
173
|
+
"value": "#F87168"
|
|
174
174
|
},
|
|
175
|
-
"Light/color.
|
|
175
|
+
"Light/color.background.accent.red.subtle.hovered": {
|
|
176
176
|
"attributes": {
|
|
177
177
|
"group": "paint",
|
|
178
178
|
"state": "active",
|
|
179
|
-
"introduced": "
|
|
180
|
-
"description": "
|
|
179
|
+
"introduced": "1.19.0",
|
|
180
|
+
"description": "Hovered state of color.background.accent.red.subtle."
|
|
181
181
|
},
|
|
182
|
-
"value": "#
|
|
182
|
+
"value": "#FD9891"
|
|
183
183
|
},
|
|
184
|
-
"Light/color.
|
|
184
|
+
"Light/color.background.accent.red.subtle.pressed": {
|
|
185
185
|
"attributes": {
|
|
186
186
|
"group": "paint",
|
|
187
187
|
"state": "active",
|
|
188
|
-
"introduced": "
|
|
189
|
-
"description": "
|
|
188
|
+
"introduced": "1.19.0",
|
|
189
|
+
"description": "Pressed state of color.background.accent.red.subtle."
|
|
190
190
|
},
|
|
191
|
-
"value": "#
|
|
191
|
+
"value": "#FFB8B2"
|
|
192
192
|
},
|
|
193
|
-
"Light/color.
|
|
193
|
+
"Light/color.background.accent.red.bolder": {
|
|
194
194
|
"attributes": {
|
|
195
195
|
"group": "paint",
|
|
196
196
|
"state": "active",
|
|
197
|
-
"introduced": "0.0
|
|
198
|
-
"description": "Use for
|
|
197
|
+
"introduced": "0.7.0",
|
|
198
|
+
"description": "Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
|
|
199
199
|
},
|
|
200
|
-
"value": "#
|
|
200
|
+
"value": "#C9372C"
|
|
201
201
|
},
|
|
202
|
-
"Light/color.
|
|
202
|
+
"Light/color.background.accent.red.bolder.hovered": {
|
|
203
203
|
"attributes": {
|
|
204
204
|
"group": "paint",
|
|
205
205
|
"state": "active",
|
|
206
|
-
"introduced": "
|
|
207
|
-
"description": "
|
|
206
|
+
"introduced": "1.19.0",
|
|
207
|
+
"description": "Hovered state of color.background.accent.red.bolder."
|
|
208
208
|
},
|
|
209
|
-
"value": "#
|
|
209
|
+
"value": "#AE2E24"
|
|
210
210
|
},
|
|
211
|
-
"Light/color.
|
|
211
|
+
"Light/color.background.accent.red.bolder.pressed": {
|
|
212
212
|
"attributes": {
|
|
213
213
|
"group": "paint",
|
|
214
214
|
"state": "active",
|
|
215
|
-
"introduced": "
|
|
216
|
-
"description": "
|
|
215
|
+
"introduced": "1.19.0",
|
|
216
|
+
"description": "Pressed state of color.background.accent.red.bolder."
|
|
217
217
|
},
|
|
218
|
-
"value": "#
|
|
218
|
+
"value": "#872821"
|
|
219
219
|
},
|
|
220
|
-
"Light/color.
|
|
220
|
+
"Light/color.background.accent.orange.subtlest": {
|
|
221
221
|
"attributes": {
|
|
222
222
|
"group": "paint",
|
|
223
223
|
"state": "active",
|
|
224
|
-
"introduced": "0.
|
|
225
|
-
"description": "Use for
|
|
224
|
+
"introduced": "0.7.0",
|
|
225
|
+
"description": "Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
|
|
226
226
|
},
|
|
227
|
-
"value": "#
|
|
227
|
+
"value": "#FFF5DB"
|
|
228
228
|
},
|
|
229
|
-
"Light/color.
|
|
229
|
+
"Light/color.background.accent.orange.subtlest.hovered": {
|
|
230
230
|
"attributes": {
|
|
231
231
|
"group": "paint",
|
|
232
232
|
"state": "active",
|
|
233
|
-
"introduced": "
|
|
234
|
-
"description": "
|
|
233
|
+
"introduced": "1.19.0",
|
|
234
|
+
"description": "Hovered state of color.background.accent.orange.subtlest."
|
|
235
235
|
},
|
|
236
|
-
"value": "#
|
|
236
|
+
"value": "#FCE4A6"
|
|
237
237
|
},
|
|
238
|
-
"Light/color.
|
|
238
|
+
"Light/color.background.accent.orange.subtlest.pressed": {
|
|
239
239
|
"attributes": {
|
|
240
240
|
"group": "paint",
|
|
241
241
|
"state": "active",
|
|
242
|
-
"introduced": "
|
|
243
|
-
"description": "
|
|
242
|
+
"introduced": "1.19.0",
|
|
243
|
+
"description": "Pressed state of color.background.accent.orange.subtlest."
|
|
244
244
|
},
|
|
245
|
-
"value": "#
|
|
245
|
+
"value": "#FBD779"
|
|
246
246
|
},
|
|
247
|
-
"Light/color.
|
|
247
|
+
"Light/color.background.accent.orange.subtler": {
|
|
248
248
|
"attributes": {
|
|
249
249
|
"group": "paint",
|
|
250
250
|
"state": "active",
|
|
251
|
-
"introduced": "0.0
|
|
252
|
-
"description": "Use for
|
|
251
|
+
"introduced": "0.7.0",
|
|
252
|
+
"description": "Use for orange backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
253
253
|
},
|
|
254
|
-
"value": "#
|
|
254
|
+
"value": "#FCE4A6"
|
|
255
255
|
},
|
|
256
|
-
"Light/color.
|
|
256
|
+
"Light/color.background.accent.orange.subtler.hovered": {
|
|
257
257
|
"attributes": {
|
|
258
258
|
"group": "paint",
|
|
259
259
|
"state": "active",
|
|
260
|
-
"introduced": "
|
|
261
|
-
"description": "
|
|
260
|
+
"introduced": "1.19.0",
|
|
261
|
+
"description": "Hovered state of color.background.accent.orange.subtler."
|
|
262
262
|
},
|
|
263
|
-
"value": "#
|
|
263
|
+
"value": "#FBD779"
|
|
264
264
|
},
|
|
265
|
-
"Light/color.
|
|
265
|
+
"Light/color.background.accent.orange.subtler.pressed": {
|
|
266
266
|
"attributes": {
|
|
267
267
|
"group": "paint",
|
|
268
268
|
"state": "active",
|
|
269
|
-
"introduced": "
|
|
270
|
-
"description": "
|
|
269
|
+
"introduced": "1.19.0",
|
|
270
|
+
"description": "Pressed state of color.background.accent.orange.subtler."
|
|
271
271
|
},
|
|
272
|
-
"value": "#
|
|
272
|
+
"value": "#FBC828"
|
|
273
273
|
},
|
|
274
|
-
"Light/color.
|
|
274
|
+
"Light/color.background.accent.orange.subtle": {
|
|
275
275
|
"attributes": {
|
|
276
276
|
"group": "paint",
|
|
277
277
|
"state": "active",
|
|
278
|
-
"introduced": "0.0
|
|
279
|
-
"description": "Use for
|
|
278
|
+
"introduced": "0.7.0",
|
|
279
|
+
"description": "Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
280
280
|
},
|
|
281
|
-
"value": "#
|
|
281
|
+
"value": "#FCA700"
|
|
282
282
|
},
|
|
283
|
-
"Light/color.
|
|
283
|
+
"Light/color.background.accent.orange.subtle.hovered": {
|
|
284
284
|
"attributes": {
|
|
285
285
|
"group": "paint",
|
|
286
286
|
"state": "active",
|
|
287
|
-
"introduced": "
|
|
288
|
-
"description": "
|
|
287
|
+
"introduced": "1.19.0",
|
|
288
|
+
"description": "Hovered state of color.background.accent.orange.subtle."
|
|
289
289
|
},
|
|
290
|
-
"value": "#
|
|
290
|
+
"value": "#FBC828"
|
|
291
291
|
},
|
|
292
|
-
"Light/color.
|
|
292
|
+
"Light/color.background.accent.orange.subtle.pressed": {
|
|
293
293
|
"attributes": {
|
|
294
294
|
"group": "paint",
|
|
295
295
|
"state": "active",
|
|
296
|
-
"introduced": "
|
|
297
|
-
"description": "
|
|
298
|
-
},
|
|
299
|
-
"value": "#803FA5"
|
|
300
|
-
},
|
|
301
|
-
"Light/color.text.discovery.bolder": {
|
|
302
|
-
"attributes": {
|
|
303
|
-
"group": "paint",
|
|
304
|
-
"state": "active",
|
|
305
|
-
"introduced": "8.1.0",
|
|
306
|
-
"description": "Use for text on top of discovery semantic labels to ensure accessibility and desired visual appearance."
|
|
307
|
-
},
|
|
308
|
-
"value": "#48245D"
|
|
309
|
-
},
|
|
310
|
-
"Light/color.text.information": {
|
|
311
|
-
"attributes": {
|
|
312
|
-
"group": "paint",
|
|
313
|
-
"state": "active",
|
|
314
|
-
"introduced": "0.6.0",
|
|
315
|
-
"description": "Use for informative text or to communicate something is in progress, such as in-progress lozenges."
|
|
296
|
+
"introduced": "1.19.0",
|
|
297
|
+
"description": "Pressed state of color.background.accent.orange.subtle."
|
|
316
298
|
},
|
|
317
|
-
"value": "#
|
|
299
|
+
"value": "#FBD779"
|
|
318
300
|
},
|
|
319
|
-
"Light/color.
|
|
301
|
+
"Light/color.background.accent.orange.bolder": {
|
|
320
302
|
"attributes": {
|
|
321
303
|
"group": "paint",
|
|
322
304
|
"state": "active",
|
|
323
|
-
"introduced": "
|
|
324
|
-
"description": "Use for
|
|
305
|
+
"introduced": "0.7.0",
|
|
306
|
+
"description": "Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
|
|
325
307
|
},
|
|
326
|
-
"value": "#
|
|
308
|
+
"value": "#BD5B00"
|
|
327
309
|
},
|
|
328
|
-
"Light/color.
|
|
310
|
+
"Light/color.background.accent.orange.bolder.hovered": {
|
|
329
311
|
"attributes": {
|
|
330
312
|
"group": "paint",
|
|
331
313
|
"state": "active",
|
|
332
|
-
"introduced": "
|
|
333
|
-
"description": "
|
|
314
|
+
"introduced": "1.19.0",
|
|
315
|
+
"description": "Hovered state of color.background.accent.orange.bolder."
|
|
334
316
|
},
|
|
335
|
-
"value": "#
|
|
317
|
+
"value": "#9E4C00"
|
|
336
318
|
},
|
|
337
|
-
"Light/color.
|
|
319
|
+
"Light/color.background.accent.orange.bolder.pressed": {
|
|
338
320
|
"attributes": {
|
|
339
321
|
"group": "paint",
|
|
340
322
|
"state": "active",
|
|
341
|
-
"introduced": "
|
|
342
|
-
"description": "
|
|
323
|
+
"introduced": "1.19.0",
|
|
324
|
+
"description": "Pressed state of color.background.accent.orange.bolder."
|
|
343
325
|
},
|
|
344
|
-
"value": "#
|
|
326
|
+
"value": "#7A3B00"
|
|
345
327
|
},
|
|
346
|
-
"Light/color.
|
|
328
|
+
"Light/color.background.accent.yellow.subtlest": {
|
|
347
329
|
"attributes": {
|
|
348
330
|
"group": "paint",
|
|
349
331
|
"state": "active",
|
|
350
|
-
"introduced": "0.
|
|
351
|
-
"description": "Use for
|
|
332
|
+
"introduced": "0.7.0",
|
|
333
|
+
"description": "Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
|
|
352
334
|
},
|
|
353
|
-
"value": "#
|
|
335
|
+
"value": "#FEF7C8"
|
|
354
336
|
},
|
|
355
|
-
"Light/color.
|
|
337
|
+
"Light/color.background.accent.yellow.subtlest.hovered": {
|
|
356
338
|
"attributes": {
|
|
357
339
|
"group": "paint",
|
|
358
340
|
"state": "active",
|
|
359
|
-
"introduced": "
|
|
360
|
-
"description": "
|
|
341
|
+
"introduced": "1.19.0",
|
|
342
|
+
"description": "Hovered state of color.background.accent.yellow.subtlest."
|
|
361
343
|
},
|
|
362
|
-
"value": "#
|
|
344
|
+
"value": "#F5E989"
|
|
363
345
|
},
|
|
364
|
-
"Light/color.
|
|
346
|
+
"Light/color.background.accent.yellow.subtlest.pressed": {
|
|
365
347
|
"attributes": {
|
|
366
348
|
"group": "paint",
|
|
367
349
|
"state": "active",
|
|
368
|
-
"introduced": "1.
|
|
369
|
-
"description": "
|
|
350
|
+
"introduced": "1.19.0",
|
|
351
|
+
"description": "Pressed state of color.background.accent.yellow.subtlest."
|
|
370
352
|
},
|
|
371
|
-
"value": "#
|
|
353
|
+
"value": "#EFDD4E"
|
|
372
354
|
},
|
|
373
|
-
"Light/color.
|
|
355
|
+
"Light/color.background.accent.yellow.subtler": {
|
|
374
356
|
"attributes": {
|
|
375
357
|
"group": "paint",
|
|
376
358
|
"state": "active",
|
|
377
|
-
"introduced": "
|
|
378
|
-
"description": "Use for
|
|
359
|
+
"introduced": "0.7.0",
|
|
360
|
+
"description": "Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
379
361
|
},
|
|
380
|
-
"value": "#
|
|
362
|
+
"value": "#F5E989"
|
|
381
363
|
},
|
|
382
|
-
"Light/color.
|
|
364
|
+
"Light/color.background.accent.yellow.subtler.hovered": {
|
|
383
365
|
"attributes": {
|
|
384
366
|
"group": "paint",
|
|
385
367
|
"state": "active",
|
|
386
|
-
"introduced": "
|
|
387
|
-
"description": "
|
|
368
|
+
"introduced": "1.19.0",
|
|
369
|
+
"description": "Hovered state of color.background.accent.yellow.subtler."
|
|
388
370
|
},
|
|
389
|
-
"value": "#
|
|
371
|
+
"value": "#EFDD4E"
|
|
390
372
|
},
|
|
391
|
-
"Light/color.
|
|
373
|
+
"Light/color.background.accent.yellow.subtler.pressed": {
|
|
392
374
|
"attributes": {
|
|
393
375
|
"group": "paint",
|
|
394
376
|
"state": "active",
|
|
395
|
-
"introduced": "1.
|
|
396
|
-
"description": "
|
|
377
|
+
"introduced": "1.19.0",
|
|
378
|
+
"description": "Pressed state of color.background.accent.yellow.subtler."
|
|
397
379
|
},
|
|
398
|
-
"value": "#
|
|
380
|
+
"value": "#EED12B"
|
|
399
381
|
},
|
|
400
|
-
"Light/color.
|
|
382
|
+
"Light/color.background.accent.yellow.subtle": {
|
|
401
383
|
"attributes": {
|
|
402
384
|
"group": "paint",
|
|
403
385
|
"state": "active",
|
|
404
|
-
"introduced": "0.
|
|
405
|
-
"description": "Use for
|
|
386
|
+
"introduced": "0.7.0",
|
|
387
|
+
"description": "Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
406
388
|
},
|
|
407
|
-
"value": "#
|
|
389
|
+
"value": "#EED12B"
|
|
408
390
|
},
|
|
409
|
-
"Light/color.
|
|
391
|
+
"Light/color.background.accent.yellow.subtle.hovered": {
|
|
410
392
|
"attributes": {
|
|
411
393
|
"group": "paint",
|
|
412
394
|
"state": "active",
|
|
413
|
-
"introduced": "
|
|
414
|
-
"description": "
|
|
395
|
+
"introduced": "1.19.0",
|
|
396
|
+
"description": "Hovered state of color.background.accent.yellow.subtle."
|
|
415
397
|
},
|
|
416
|
-
"value": "#
|
|
398
|
+
"value": "#DDB30E"
|
|
417
399
|
},
|
|
418
|
-
"Light/color.
|
|
400
|
+
"Light/color.background.accent.yellow.subtle.pressed": {
|
|
419
401
|
"attributes": {
|
|
420
402
|
"group": "paint",
|
|
421
403
|
"state": "active",
|
|
422
|
-
"introduced": "
|
|
423
|
-
"description": "
|
|
404
|
+
"introduced": "1.19.0",
|
|
405
|
+
"description": "Pressed state of color.background.accent.yellow.subtle."
|
|
424
406
|
},
|
|
425
|
-
"value": "#
|
|
407
|
+
"value": "#EFDD4E"
|
|
426
408
|
},
|
|
427
|
-
"Light/color.
|
|
409
|
+
"Light/color.background.accent.yellow.bolder": {
|
|
428
410
|
"attributes": {
|
|
429
411
|
"group": "paint",
|
|
430
412
|
"state": "active",
|
|
431
|
-
"introduced": "0.
|
|
432
|
-
"description": "Use for
|
|
413
|
+
"introduced": "0.7.0",
|
|
414
|
+
"description": "Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
|
|
433
415
|
},
|
|
434
|
-
"value": "#
|
|
416
|
+
"value": "#946F00"
|
|
435
417
|
},
|
|
436
|
-
"Light/color.
|
|
418
|
+
"Light/color.background.accent.yellow.bolder.hovered": {
|
|
437
419
|
"attributes": {
|
|
438
420
|
"group": "paint",
|
|
439
421
|
"state": "active",
|
|
440
|
-
"introduced": "
|
|
441
|
-
"description": "
|
|
422
|
+
"introduced": "1.19.0",
|
|
423
|
+
"description": "Hovered state of color.background.accent.yellow.bolder."
|
|
442
424
|
},
|
|
443
|
-
"value": "#
|
|
425
|
+
"value": "#7F5F01"
|
|
444
426
|
},
|
|
445
|
-
"Light/color.
|
|
427
|
+
"Light/color.background.accent.yellow.bolder.pressed": {
|
|
446
428
|
"attributes": {
|
|
447
429
|
"group": "paint",
|
|
448
430
|
"state": "active",
|
|
449
|
-
"introduced": "
|
|
450
|
-
"description": "
|
|
431
|
+
"introduced": "1.19.0",
|
|
432
|
+
"description": "Pressed state of color.background.accent.yellow.bolder."
|
|
451
433
|
},
|
|
452
|
-
"value": "#
|
|
434
|
+
"value": "#614A05"
|
|
453
435
|
},
|
|
454
|
-
"Light/color.
|
|
436
|
+
"Light/color.background.accent.green.subtlest": {
|
|
455
437
|
"attributes": {
|
|
456
438
|
"group": "paint",
|
|
457
439
|
"state": "active",
|
|
458
|
-
"introduced": "0.
|
|
459
|
-
"description": "Use for
|
|
440
|
+
"introduced": "0.7.0",
|
|
441
|
+
"description": "Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
|
|
460
442
|
},
|
|
461
|
-
"value": "#
|
|
443
|
+
"value": "#DCFFF1"
|
|
462
444
|
},
|
|
463
|
-
"Light/color.
|
|
445
|
+
"Light/color.background.accent.green.subtlest.hovered": {
|
|
464
446
|
"attributes": {
|
|
465
447
|
"group": "paint",
|
|
466
448
|
"state": "active",
|
|
467
|
-
"introduced": "
|
|
468
|
-
"description": "
|
|
449
|
+
"introduced": "1.19.0",
|
|
450
|
+
"description": "Hovered state of color.background.accent.green.subtlest."
|
|
469
451
|
},
|
|
470
|
-
"value": "#
|
|
452
|
+
"value": "#BAF3DB"
|
|
471
453
|
},
|
|
472
|
-
"Light/color.
|
|
454
|
+
"Light/color.background.accent.green.subtlest.pressed": {
|
|
473
455
|
"attributes": {
|
|
474
456
|
"group": "paint",
|
|
475
457
|
"state": "active",
|
|
476
|
-
"introduced": "
|
|
477
|
-
"description": "
|
|
458
|
+
"introduced": "1.19.0",
|
|
459
|
+
"description": "Pressed state of color.background.accent.green.subtlest."
|
|
478
460
|
},
|
|
479
|
-
"value": "#
|
|
461
|
+
"value": "#97EDC9"
|
|
480
462
|
},
|
|
481
|
-
"Light/color.
|
|
463
|
+
"Light/color.background.accent.green.subtler": {
|
|
482
464
|
"attributes": {
|
|
483
465
|
"group": "paint",
|
|
484
466
|
"state": "active",
|
|
485
|
-
"introduced": "0.
|
|
486
|
-
"description": "Use for
|
|
467
|
+
"introduced": "0.7.0",
|
|
468
|
+
"description": "Use for green backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
487
469
|
},
|
|
488
|
-
"value": "#
|
|
470
|
+
"value": "#BAF3DB"
|
|
489
471
|
},
|
|
490
|
-
"Light/color.
|
|
472
|
+
"Light/color.background.accent.green.subtler.hovered": {
|
|
491
473
|
"attributes": {
|
|
492
474
|
"group": "paint",
|
|
493
475
|
"state": "active",
|
|
494
|
-
"introduced": "
|
|
495
|
-
"description": "
|
|
476
|
+
"introduced": "1.19.0",
|
|
477
|
+
"description": "Hovered state of color.background.accent.green.subtler."
|
|
496
478
|
},
|
|
497
|
-
"value": "#
|
|
479
|
+
"value": "#97EDC9"
|
|
498
480
|
},
|
|
499
|
-
"Light/color.
|
|
481
|
+
"Light/color.background.accent.green.subtler.pressed": {
|
|
500
482
|
"attributes": {
|
|
501
483
|
"group": "paint",
|
|
502
484
|
"state": "active",
|
|
503
|
-
"introduced": "
|
|
504
|
-
"description": "
|
|
485
|
+
"introduced": "1.19.0",
|
|
486
|
+
"description": "Pressed state of color.background.accent.green.subtler."
|
|
505
487
|
},
|
|
506
|
-
"value": "#
|
|
488
|
+
"value": "#7EE2B8"
|
|
507
489
|
},
|
|
508
|
-
"Light/color.
|
|
490
|
+
"Light/color.background.accent.green.subtle": {
|
|
509
491
|
"attributes": {
|
|
510
492
|
"group": "paint",
|
|
511
493
|
"state": "active",
|
|
512
|
-
"introduced": "0.
|
|
513
|
-
"description": "Use for
|
|
494
|
+
"introduced": "0.7.0",
|
|
495
|
+
"description": "Use for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
514
496
|
},
|
|
515
|
-
"value": "#
|
|
497
|
+
"value": "#4BCE97"
|
|
516
498
|
},
|
|
517
|
-
"Light/color.
|
|
499
|
+
"Light/color.background.accent.green.subtle.hovered": {
|
|
518
500
|
"attributes": {
|
|
519
501
|
"group": "paint",
|
|
520
502
|
"state": "active",
|
|
521
|
-
"introduced": "
|
|
522
|
-
"description": "
|
|
503
|
+
"introduced": "1.19.0",
|
|
504
|
+
"description": "Hovered state of color.background.accent.green.subtle."
|
|
523
505
|
},
|
|
524
|
-
"value": "#
|
|
506
|
+
"value": "#7EE2B8"
|
|
525
507
|
},
|
|
526
|
-
"Light/color.
|
|
508
|
+
"Light/color.background.accent.green.subtle.pressed": {
|
|
527
509
|
"attributes": {
|
|
528
510
|
"group": "paint",
|
|
529
511
|
"state": "active",
|
|
530
|
-
"introduced": "
|
|
531
|
-
"description": "
|
|
512
|
+
"introduced": "1.19.0",
|
|
513
|
+
"description": "Pressed state of color.background.accent.green.subtle."
|
|
532
514
|
},
|
|
533
|
-
"value": "#
|
|
515
|
+
"value": "#97EDC9"
|
|
534
516
|
},
|
|
535
|
-
"Light/color.
|
|
517
|
+
"Light/color.background.accent.green.bolder": {
|
|
536
518
|
"attributes": {
|
|
537
519
|
"group": "paint",
|
|
538
520
|
"state": "active",
|
|
539
|
-
"introduced": "0.
|
|
540
|
-
"description": "Use for
|
|
521
|
+
"introduced": "0.7.0",
|
|
522
|
+
"description": "Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
|
|
541
523
|
},
|
|
542
|
-
"value": "#
|
|
524
|
+
"value": "#1F845A"
|
|
543
525
|
},
|
|
544
|
-
"Light/color.
|
|
526
|
+
"Light/color.background.accent.green.bolder.hovered": {
|
|
545
527
|
"attributes": {
|
|
546
528
|
"group": "paint",
|
|
547
529
|
"state": "active",
|
|
548
|
-
"introduced": "
|
|
549
|
-
"description": "
|
|
530
|
+
"introduced": "1.19.0",
|
|
531
|
+
"description": "Hovered state of color.background.accent.green.bolder."
|
|
550
532
|
},
|
|
551
|
-
"value": "#
|
|
533
|
+
"value": "#216E4E"
|
|
552
534
|
},
|
|
553
|
-
"Light/color.
|
|
535
|
+
"Light/color.background.accent.green.bolder.pressed": {
|
|
554
536
|
"attributes": {
|
|
555
537
|
"group": "paint",
|
|
556
538
|
"state": "active",
|
|
557
|
-
"introduced": "
|
|
558
|
-
"description": "
|
|
539
|
+
"introduced": "1.19.0",
|
|
540
|
+
"description": "Pressed state of color.background.accent.green.bolder."
|
|
559
541
|
},
|
|
560
|
-
"value": "#
|
|
542
|
+
"value": "#19573D"
|
|
561
543
|
},
|
|
562
|
-
"Light/color.
|
|
544
|
+
"Light/color.background.accent.teal.subtlest": {
|
|
563
545
|
"attributes": {
|
|
564
546
|
"group": "paint",
|
|
565
547
|
"state": "active",
|
|
566
|
-
"introduced": "0.
|
|
567
|
-
"description": "Use for
|
|
548
|
+
"introduced": "0.7.0",
|
|
549
|
+
"description": "Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
|
|
568
550
|
},
|
|
569
|
-
"value": "#
|
|
551
|
+
"value": "#E7F9FF"
|
|
570
552
|
},
|
|
571
|
-
"Light/color.
|
|
553
|
+
"Light/color.background.accent.teal.subtlest.hovered": {
|
|
572
554
|
"attributes": {
|
|
573
555
|
"group": "paint",
|
|
574
556
|
"state": "active",
|
|
575
|
-
"introduced": "1.
|
|
576
|
-
"description": "
|
|
557
|
+
"introduced": "1.19.0",
|
|
558
|
+
"description": "Hovered state of color.background.accent.teal.subtlest."
|
|
577
559
|
},
|
|
578
|
-
"value": "#
|
|
560
|
+
"value": "#C6EDFB"
|
|
579
561
|
},
|
|
580
|
-
"Light/color.
|
|
562
|
+
"Light/color.background.accent.teal.subtlest.pressed": {
|
|
581
563
|
"attributes": {
|
|
582
564
|
"group": "paint",
|
|
583
565
|
"state": "active",
|
|
584
|
-
"introduced": "
|
|
585
|
-
"description": "
|
|
566
|
+
"introduced": "1.19.0",
|
|
567
|
+
"description": "Pressed state of color.background.accent.teal.subtlest."
|
|
586
568
|
},
|
|
587
|
-
"value": "#
|
|
569
|
+
"value": "#B1E4F7"
|
|
588
570
|
},
|
|
589
|
-
"Light/color.
|
|
571
|
+
"Light/color.background.accent.teal.subtler": {
|
|
590
572
|
"attributes": {
|
|
591
573
|
"group": "paint",
|
|
592
574
|
"state": "active",
|
|
593
|
-
"introduced": "0.
|
|
594
|
-
"description": "Use
|
|
575
|
+
"introduced": "0.7.0",
|
|
576
|
+
"description": "Use for teal backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
595
577
|
},
|
|
596
|
-
"value": "#
|
|
578
|
+
"value": "#C6EDFB"
|
|
597
579
|
},
|
|
598
|
-
"Light/color.
|
|
580
|
+
"Light/color.background.accent.teal.subtler.hovered": {
|
|
599
581
|
"attributes": {
|
|
600
582
|
"group": "paint",
|
|
601
583
|
"state": "active",
|
|
602
|
-
"introduced": "1.
|
|
603
|
-
"description": "
|
|
584
|
+
"introduced": "1.19.0",
|
|
585
|
+
"description": "Hovered state of color.background.accent.teal.subtler."
|
|
604
586
|
},
|
|
605
|
-
"value": "#
|
|
587
|
+
"value": "#B1E4F7"
|
|
606
588
|
},
|
|
607
|
-
"Light/color.
|
|
589
|
+
"Light/color.background.accent.teal.subtler.pressed": {
|
|
608
590
|
"attributes": {
|
|
609
591
|
"group": "paint",
|
|
610
592
|
"state": "active",
|
|
611
|
-
"introduced": "
|
|
612
|
-
"description": "
|
|
593
|
+
"introduced": "1.19.0",
|
|
594
|
+
"description": "Pressed state of color.background.accent.teal.subtler."
|
|
613
595
|
},
|
|
614
|
-
"value": "#
|
|
596
|
+
"value": "#9DD9EE"
|
|
615
597
|
},
|
|
616
|
-
"Light/color.
|
|
598
|
+
"Light/color.background.accent.teal.subtle": {
|
|
617
599
|
"attributes": {
|
|
618
600
|
"group": "paint",
|
|
619
601
|
"state": "active",
|
|
620
|
-
"introduced": "0.
|
|
621
|
-
"description": "Use for
|
|
602
|
+
"introduced": "0.7.0",
|
|
603
|
+
"description": "Use for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
622
604
|
},
|
|
623
|
-
"value": "#
|
|
605
|
+
"value": "#6CC3E0"
|
|
624
606
|
},
|
|
625
|
-
"Light/color.
|
|
607
|
+
"Light/color.background.accent.teal.subtle.hovered": {
|
|
626
608
|
"attributes": {
|
|
627
609
|
"group": "paint",
|
|
628
610
|
"state": "active",
|
|
629
|
-
"introduced": "
|
|
630
|
-
"description": "
|
|
611
|
+
"introduced": "1.19.0",
|
|
612
|
+
"description": "Hovered state of color.background.accent.teal.subtle."
|
|
631
613
|
},
|
|
632
|
-
"value": "#
|
|
614
|
+
"value": "#9DD9EE"
|
|
633
615
|
},
|
|
634
|
-
"Light/color.
|
|
616
|
+
"Light/color.background.accent.teal.subtle.pressed": {
|
|
635
617
|
"attributes": {
|
|
636
618
|
"group": "paint",
|
|
637
619
|
"state": "active",
|
|
638
|
-
"introduced": "
|
|
639
|
-
"description": "
|
|
620
|
+
"introduced": "1.19.0",
|
|
621
|
+
"description": "Pressed state of color.background.accent.teal.subtle."
|
|
640
622
|
},
|
|
641
|
-
"value": "#
|
|
623
|
+
"value": "#B1E4F7"
|
|
642
624
|
},
|
|
643
|
-
"Light/color.
|
|
625
|
+
"Light/color.background.accent.teal.bolder": {
|
|
644
626
|
"attributes": {
|
|
645
627
|
"group": "paint",
|
|
646
628
|
"state": "active",
|
|
647
|
-
"introduced": "
|
|
648
|
-
"description": "Use for
|
|
629
|
+
"introduced": "0.7.0",
|
|
630
|
+
"description": "Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
|
|
649
631
|
},
|
|
650
|
-
"value": "#
|
|
632
|
+
"value": "#227D9B"
|
|
651
633
|
},
|
|
652
|
-
"Light/color.
|
|
634
|
+
"Light/color.background.accent.teal.bolder.hovered": {
|
|
653
635
|
"attributes": {
|
|
654
636
|
"group": "paint",
|
|
655
637
|
"state": "active",
|
|
656
|
-
"introduced": "
|
|
657
|
-
"description": "
|
|
638
|
+
"introduced": "1.19.0",
|
|
639
|
+
"description": "Hovered state of color.background.accent.teal.bolder."
|
|
658
640
|
},
|
|
659
|
-
"value": "#
|
|
641
|
+
"value": "#206A83"
|
|
660
642
|
},
|
|
661
|
-
"Light/color.
|
|
643
|
+
"Light/color.background.accent.teal.bolder.pressed": {
|
|
662
644
|
"attributes": {
|
|
663
645
|
"group": "paint",
|
|
664
646
|
"state": "active",
|
|
665
|
-
"introduced": "
|
|
666
|
-
"description": "
|
|
647
|
+
"introduced": "1.19.0",
|
|
648
|
+
"description": "Pressed state of color.background.accent.teal.bolder."
|
|
667
649
|
},
|
|
668
|
-
"value": "#
|
|
650
|
+
"value": "#1A5265"
|
|
669
651
|
},
|
|
670
|
-
"Light/color.
|
|
652
|
+
"Light/color.background.accent.blue.subtlest": {
|
|
671
653
|
"attributes": {
|
|
672
654
|
"group": "paint",
|
|
673
655
|
"state": "active",
|
|
674
|
-
"introduced": "0.
|
|
675
|
-
"description": "Use for
|
|
656
|
+
"introduced": "0.7.0",
|
|
657
|
+
"description": "Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
|
|
676
658
|
},
|
|
677
|
-
"value": "#
|
|
659
|
+
"value": "#E9F2FE"
|
|
678
660
|
},
|
|
679
|
-
"Light/color.
|
|
661
|
+
"Light/color.background.accent.blue.subtlest.hovered": {
|
|
680
662
|
"attributes": {
|
|
681
663
|
"group": "paint",
|
|
682
664
|
"state": "active",
|
|
683
|
-
"introduced": "
|
|
684
|
-
"description": "
|
|
665
|
+
"introduced": "1.19.0",
|
|
666
|
+
"description": "Hovered state of color.background.accent.blue.subtlest."
|
|
685
667
|
},
|
|
686
|
-
"value": "#
|
|
668
|
+
"value": "#CFE1FD"
|
|
687
669
|
},
|
|
688
|
-
"Light/color.
|
|
670
|
+
"Light/color.background.accent.blue.subtlest.pressed": {
|
|
689
671
|
"attributes": {
|
|
690
672
|
"group": "paint",
|
|
691
673
|
"state": "active",
|
|
692
|
-
"introduced": "
|
|
693
|
-
"description": "
|
|
674
|
+
"introduced": "1.19.0",
|
|
675
|
+
"description": "Pressed state of color.background.accent.blue.subtlest."
|
|
694
676
|
},
|
|
695
|
-
"value": "#
|
|
677
|
+
"value": "#ADCBFB"
|
|
696
678
|
},
|
|
697
|
-
"Light/color.
|
|
679
|
+
"Light/color.background.accent.blue.subtler": {
|
|
698
680
|
"attributes": {
|
|
699
681
|
"group": "paint",
|
|
700
682
|
"state": "active",
|
|
701
|
-
"introduced": "
|
|
702
|
-
"description": "Use for
|
|
683
|
+
"introduced": "0.7.0",
|
|
684
|
+
"description": "Use for blue backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
703
685
|
},
|
|
704
|
-
"value": "#
|
|
686
|
+
"value": "#CFE1FD"
|
|
705
687
|
},
|
|
706
|
-
"Light/color.
|
|
688
|
+
"Light/color.background.accent.blue.subtler.hovered": {
|
|
707
689
|
"attributes": {
|
|
708
690
|
"group": "paint",
|
|
709
691
|
"state": "active",
|
|
710
|
-
"introduced": "
|
|
711
|
-
"description": "
|
|
692
|
+
"introduced": "1.19.0",
|
|
693
|
+
"description": "Hovered state of color.background.accent.blue.subtler."
|
|
712
694
|
},
|
|
713
|
-
"value": "#
|
|
695
|
+
"value": "#ADCBFB"
|
|
714
696
|
},
|
|
715
|
-
"Light/color.
|
|
697
|
+
"Light/color.background.accent.blue.subtler.pressed": {
|
|
716
698
|
"attributes": {
|
|
717
699
|
"group": "paint",
|
|
718
700
|
"state": "active",
|
|
719
|
-
"introduced": "
|
|
720
|
-
"description": "
|
|
701
|
+
"introduced": "1.19.0",
|
|
702
|
+
"description": "Pressed state of color.background.accent.blue.subtler."
|
|
721
703
|
},
|
|
722
704
|
"value": "#8FB8F6"
|
|
723
705
|
},
|
|
724
|
-
"Light/color.
|
|
725
|
-
"attributes": {
|
|
726
|
-
"group": "paint",
|
|
727
|
-
"state": "active",
|
|
728
|
-
"introduced": "0.6.0",
|
|
729
|
-
"description": "Use for purple borders on non-bold backgrounds when there is no meaning tied to the color."
|
|
730
|
-
},
|
|
731
|
-
"value": "#AF59E1"
|
|
732
|
-
},
|
|
733
|
-
"Light/color.border.accent.purple.subtle": {
|
|
734
|
-
"attributes": {
|
|
735
|
-
"group": "paint",
|
|
736
|
-
"state": "active",
|
|
737
|
-
"introduced": "13.2.0",
|
|
738
|
-
"description": "Use for decorative purple borders that do not need to meet 3:1 contrast requirements."
|
|
739
|
-
},
|
|
740
|
-
"value": "#D8A0F7"
|
|
741
|
-
},
|
|
742
|
-
"Light/color.border.accent.magenta": {
|
|
706
|
+
"Light/color.background.accent.blue.subtle": {
|
|
743
707
|
"attributes": {
|
|
744
708
|
"group": "paint",
|
|
745
709
|
"state": "active",
|
|
746
|
-
"introduced": "0.
|
|
747
|
-
"description": "Use for
|
|
710
|
+
"introduced": "0.7.0",
|
|
711
|
+
"description": "Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
748
712
|
},
|
|
749
|
-
"value": "#
|
|
713
|
+
"value": "#669DF1"
|
|
750
714
|
},
|
|
751
|
-
"Light/color.
|
|
715
|
+
"Light/color.background.accent.blue.subtle.hovered": {
|
|
752
716
|
"attributes": {
|
|
753
717
|
"group": "paint",
|
|
754
|
-
"state": "active",
|
|
755
|
-
"introduced": "
|
|
756
|
-
"description": "
|
|
718
|
+
"state": "active",
|
|
719
|
+
"introduced": "1.19.0",
|
|
720
|
+
"description": "Hovered state of color.background.accent.blue.subtle."
|
|
757
721
|
},
|
|
758
|
-
"value": "#
|
|
722
|
+
"value": "#8FB8F6"
|
|
759
723
|
},
|
|
760
|
-
"Light/color.
|
|
724
|
+
"Light/color.background.accent.blue.subtle.pressed": {
|
|
761
725
|
"attributes": {
|
|
762
726
|
"group": "paint",
|
|
763
727
|
"state": "active",
|
|
764
|
-
"introduced": "
|
|
765
|
-
"description": "
|
|
728
|
+
"introduced": "1.19.0",
|
|
729
|
+
"description": "Pressed state of color.background.accent.blue.subtle."
|
|
766
730
|
},
|
|
767
|
-
"value": "#
|
|
731
|
+
"value": "#ADCBFB"
|
|
768
732
|
},
|
|
769
|
-
"Light/color.
|
|
733
|
+
"Light/color.background.accent.blue.bolder": {
|
|
770
734
|
"attributes": {
|
|
771
735
|
"group": "paint",
|
|
772
736
|
"state": "active",
|
|
773
|
-
"introduced": "
|
|
774
|
-
"description": "Use for
|
|
737
|
+
"introduced": "0.7.0",
|
|
738
|
+
"description": "Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
|
|
775
739
|
},
|
|
776
|
-
"value": "#
|
|
740
|
+
"value": "#1868DB"
|
|
777
741
|
},
|
|
778
|
-
"Light/color.
|
|
742
|
+
"Light/color.background.accent.blue.bolder.hovered": {
|
|
779
743
|
"attributes": {
|
|
780
744
|
"group": "paint",
|
|
781
745
|
"state": "active",
|
|
782
|
-
"introduced": "
|
|
783
|
-
"description": "
|
|
746
|
+
"introduced": "1.19.0",
|
|
747
|
+
"description": "Hovered state of color.background.accent.blue.bolder."
|
|
784
748
|
},
|
|
785
|
-
"value": "#
|
|
749
|
+
"value": "#1558BC"
|
|
786
750
|
},
|
|
787
|
-
"Light/color.
|
|
751
|
+
"Light/color.background.accent.blue.bolder.pressed": {
|
|
788
752
|
"attributes": {
|
|
789
753
|
"group": "paint",
|
|
790
754
|
"state": "active",
|
|
791
|
-
"introduced": "
|
|
792
|
-
"description": "
|
|
755
|
+
"introduced": "1.19.0",
|
|
756
|
+
"description": "Pressed state of color.background.accent.blue.bolder."
|
|
793
757
|
},
|
|
794
|
-
"value": "#
|
|
758
|
+
"value": "#144794"
|
|
795
759
|
},
|
|
796
|
-
"Light/color.
|
|
760
|
+
"Light/color.background.accent.purple.subtlest": {
|
|
797
761
|
"attributes": {
|
|
798
762
|
"group": "paint",
|
|
799
763
|
"state": "active",
|
|
800
|
-
"introduced": "0.
|
|
801
|
-
"description": "Use for
|
|
764
|
+
"introduced": "0.7.0",
|
|
765
|
+
"description": "Use for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
|
|
802
766
|
},
|
|
803
|
-
"value": "#
|
|
767
|
+
"value": "#F8EEFE"
|
|
804
768
|
},
|
|
805
|
-
"Light/color.
|
|
769
|
+
"Light/color.background.accent.purple.subtlest.hovered": {
|
|
806
770
|
"attributes": {
|
|
807
771
|
"group": "paint",
|
|
808
772
|
"state": "active",
|
|
809
|
-
"introduced": "
|
|
810
|
-
"description": "
|
|
773
|
+
"introduced": "1.19.0",
|
|
774
|
+
"description": "Hovered state of color.background.accent.purple.subtlest."
|
|
811
775
|
},
|
|
812
|
-
"value": "#
|
|
776
|
+
"value": "#EED7FC"
|
|
813
777
|
},
|
|
814
|
-
"Light/color.
|
|
778
|
+
"Light/color.background.accent.purple.subtlest.pressed": {
|
|
815
779
|
"attributes": {
|
|
816
780
|
"group": "paint",
|
|
817
781
|
"state": "active",
|
|
818
|
-
"introduced": "
|
|
819
|
-
"description": "
|
|
782
|
+
"introduced": "1.19.0",
|
|
783
|
+
"description": "Pressed state of color.background.accent.purple.subtlest."
|
|
820
784
|
},
|
|
821
|
-
"value": "#
|
|
785
|
+
"value": "#E3BDFA"
|
|
822
786
|
},
|
|
823
|
-
"Light/color.
|
|
787
|
+
"Light/color.background.accent.purple.subtler": {
|
|
824
788
|
"attributes": {
|
|
825
789
|
"group": "paint",
|
|
826
790
|
"state": "active",
|
|
827
|
-
"introduced": "0.
|
|
828
|
-
"description": "Use for
|
|
791
|
+
"introduced": "0.7.0",
|
|
792
|
+
"description": "Use for purple backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
829
793
|
},
|
|
830
|
-
"value": "#
|
|
794
|
+
"value": "#EED7FC"
|
|
831
795
|
},
|
|
832
|
-
"Light/color.
|
|
796
|
+
"Light/color.background.accent.purple.subtler.hovered": {
|
|
833
797
|
"attributes": {
|
|
834
798
|
"group": "paint",
|
|
835
799
|
"state": "active",
|
|
836
|
-
"introduced": "
|
|
837
|
-
"description": "
|
|
800
|
+
"introduced": "1.19.0",
|
|
801
|
+
"description": "Hovered state of color.background.accent.purple.subtler."
|
|
838
802
|
},
|
|
839
|
-
"value": "#
|
|
803
|
+
"value": "#E3BDFA"
|
|
840
804
|
},
|
|
841
|
-
"Light/color.
|
|
805
|
+
"Light/color.background.accent.purple.subtler.pressed": {
|
|
842
806
|
"attributes": {
|
|
843
807
|
"group": "paint",
|
|
844
808
|
"state": "active",
|
|
845
|
-
"introduced": "
|
|
846
|
-
"description": "
|
|
809
|
+
"introduced": "1.19.0",
|
|
810
|
+
"description": "Pressed state of color.background.accent.purple.subtler."
|
|
847
811
|
},
|
|
848
|
-
"value": "#
|
|
812
|
+
"value": "#D8A0F7"
|
|
849
813
|
},
|
|
850
|
-
"Light/color.
|
|
814
|
+
"Light/color.background.accent.purple.subtle": {
|
|
851
815
|
"attributes": {
|
|
852
816
|
"group": "paint",
|
|
853
817
|
"state": "active",
|
|
854
|
-
"introduced": "0.
|
|
855
|
-
"description": "Use for
|
|
818
|
+
"introduced": "0.7.0",
|
|
819
|
+
"description": "Use for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
856
820
|
},
|
|
857
|
-
"value": "#
|
|
821
|
+
"value": "#C97CF4"
|
|
858
822
|
},
|
|
859
|
-
"Light/color.
|
|
823
|
+
"Light/color.background.accent.purple.subtle.hovered": {
|
|
860
824
|
"attributes": {
|
|
861
825
|
"group": "paint",
|
|
862
826
|
"state": "active",
|
|
863
|
-
"introduced": "
|
|
864
|
-
"description": "
|
|
827
|
+
"introduced": "1.19.0",
|
|
828
|
+
"description": "Hovered state of color.background.accent.purple.subtle."
|
|
865
829
|
},
|
|
866
|
-
"value": "#
|
|
830
|
+
"value": "#D8A0F7"
|
|
867
831
|
},
|
|
868
|
-
"Light/color.
|
|
832
|
+
"Light/color.background.accent.purple.subtle.pressed": {
|
|
869
833
|
"attributes": {
|
|
870
834
|
"group": "paint",
|
|
871
835
|
"state": "active",
|
|
872
|
-
"introduced": "
|
|
873
|
-
"description": "
|
|
836
|
+
"introduced": "1.19.0",
|
|
837
|
+
"description": "Pressed state of color.background.accent.purple.subtle."
|
|
874
838
|
},
|
|
875
|
-
"value": "#
|
|
839
|
+
"value": "#E3BDFA"
|
|
876
840
|
},
|
|
877
|
-
"Light/color.
|
|
841
|
+
"Light/color.background.accent.purple.bolder": {
|
|
878
842
|
"attributes": {
|
|
879
843
|
"group": "paint",
|
|
880
844
|
"state": "active",
|
|
881
|
-
"introduced": "
|
|
882
|
-
"description": "Use for
|
|
845
|
+
"introduced": "0.7.0",
|
|
846
|
+
"description": "Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
|
|
883
847
|
},
|
|
884
|
-
"value": "#
|
|
848
|
+
"value": "#964AC0"
|
|
885
849
|
},
|
|
886
|
-
"Light/color.
|
|
850
|
+
"Light/color.background.accent.purple.bolder.hovered": {
|
|
887
851
|
"attributes": {
|
|
888
852
|
"group": "paint",
|
|
889
853
|
"state": "active",
|
|
890
|
-
"introduced": "
|
|
891
|
-
"description": "
|
|
854
|
+
"introduced": "1.19.0",
|
|
855
|
+
"description": "Hovered state of color.background.accent.purple.bolder."
|
|
892
856
|
},
|
|
893
|
-
"value": "#
|
|
857
|
+
"value": "#803FA5"
|
|
894
858
|
},
|
|
895
|
-
"Light/color.
|
|
859
|
+
"Light/color.background.accent.purple.bolder.pressed": {
|
|
896
860
|
"attributes": {
|
|
897
861
|
"group": "paint",
|
|
898
862
|
"state": "active",
|
|
899
|
-
"introduced": "
|
|
900
|
-
"description": "
|
|
863
|
+
"introduced": "1.19.0",
|
|
864
|
+
"description": "Pressed state of color.background.accent.purple.bolder."
|
|
901
865
|
},
|
|
902
|
-
"value": "#
|
|
866
|
+
"value": "#673286"
|
|
903
867
|
},
|
|
904
|
-
"Light/color.
|
|
868
|
+
"Light/color.background.accent.magenta.subtlest": {
|
|
905
869
|
"attributes": {
|
|
906
870
|
"group": "paint",
|
|
907
871
|
"state": "active",
|
|
908
|
-
"introduced": "0.
|
|
909
|
-
"description": "Use for
|
|
872
|
+
"introduced": "0.7.0",
|
|
873
|
+
"description": "Use for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
|
|
910
874
|
},
|
|
911
|
-
"value": "#
|
|
875
|
+
"value": "#FFECF8"
|
|
912
876
|
},
|
|
913
|
-
"Light/color.
|
|
877
|
+
"Light/color.background.accent.magenta.subtlest.hovered": {
|
|
914
878
|
"attributes": {
|
|
915
879
|
"group": "paint",
|
|
916
880
|
"state": "active",
|
|
917
|
-
"introduced": "
|
|
918
|
-
"description": "
|
|
881
|
+
"introduced": "1.19.0",
|
|
882
|
+
"description": "Hovered state of color.background.accent.magenta.subtlest."
|
|
919
883
|
},
|
|
920
|
-
"value": "#
|
|
884
|
+
"value": "#FDD0EC"
|
|
921
885
|
},
|
|
922
|
-
"Light/color.
|
|
886
|
+
"Light/color.background.accent.magenta.subtlest.pressed": {
|
|
923
887
|
"attributes": {
|
|
924
888
|
"group": "paint",
|
|
925
889
|
"state": "active",
|
|
926
|
-
"introduced": "
|
|
927
|
-
"description": "
|
|
890
|
+
"introduced": "1.19.0",
|
|
891
|
+
"description": "Pressed state of color.background.accent.magenta.subtlest."
|
|
928
892
|
},
|
|
929
|
-
"value": "#
|
|
893
|
+
"value": "#FCB6E1"
|
|
930
894
|
},
|
|
931
|
-
"Light/color.background.accent.
|
|
895
|
+
"Light/color.background.accent.magenta.subtler": {
|
|
932
896
|
"attributes": {
|
|
933
897
|
"group": "paint",
|
|
934
898
|
"state": "active",
|
|
935
|
-
"introduced": "
|
|
936
|
-
"description": "Use for
|
|
899
|
+
"introduced": "0.7.0",
|
|
900
|
+
"description": "Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
937
901
|
},
|
|
938
|
-
"value": "#
|
|
902
|
+
"value": "#FDD0EC"
|
|
939
903
|
},
|
|
940
|
-
"Light/color.background.accent.
|
|
904
|
+
"Light/color.background.accent.magenta.subtler.hovered": {
|
|
941
905
|
"attributes": {
|
|
942
906
|
"group": "paint",
|
|
943
907
|
"state": "active",
|
|
944
908
|
"introduced": "1.19.0",
|
|
945
|
-
"description": "Hovered state of color.background.accent.
|
|
909
|
+
"description": "Hovered state of color.background.accent.magenta.subtler."
|
|
946
910
|
},
|
|
947
|
-
"value": "#
|
|
911
|
+
"value": "#FCB6E1"
|
|
948
912
|
},
|
|
949
|
-
"Light/color.background.accent.
|
|
913
|
+
"Light/color.background.accent.magenta.subtler.pressed": {
|
|
950
914
|
"attributes": {
|
|
951
915
|
"group": "paint",
|
|
952
916
|
"state": "active",
|
|
953
917
|
"introduced": "1.19.0",
|
|
954
|
-
"description": "Pressed state of color.background.accent.
|
|
918
|
+
"description": "Pressed state of color.background.accent.magenta.subtler."
|
|
955
919
|
},
|
|
956
|
-
"value": "#
|
|
920
|
+
"value": "#F797D2"
|
|
957
921
|
},
|
|
958
|
-
"Light/color.background.accent.
|
|
922
|
+
"Light/color.background.accent.magenta.subtle": {
|
|
959
923
|
"attributes": {
|
|
960
924
|
"group": "paint",
|
|
961
925
|
"state": "active",
|
|
962
|
-
"introduced": "
|
|
963
|
-
"description": "Use for
|
|
926
|
+
"introduced": "0.7.0",
|
|
927
|
+
"description": "Use for vibrant magenta backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
964
928
|
},
|
|
965
|
-
"value": "#
|
|
929
|
+
"value": "#E774BB"
|
|
966
930
|
},
|
|
967
|
-
"Light/color.background.accent.
|
|
931
|
+
"Light/color.background.accent.magenta.subtle.hovered": {
|
|
968
932
|
"attributes": {
|
|
969
933
|
"group": "paint",
|
|
970
934
|
"state": "active",
|
|
971
935
|
"introduced": "1.19.0",
|
|
972
|
-
"description": "Hovered state of color.background.accent.
|
|
936
|
+
"description": "Hovered state of color.background.accent.magenta.subtle."
|
|
973
937
|
},
|
|
974
|
-
"value": "#
|
|
938
|
+
"value": "#F797D2"
|
|
975
939
|
},
|
|
976
|
-
"Light/color.background.accent.
|
|
940
|
+
"Light/color.background.accent.magenta.subtle.pressed": {
|
|
977
941
|
"attributes": {
|
|
978
942
|
"group": "paint",
|
|
979
943
|
"state": "active",
|
|
980
944
|
"introduced": "1.19.0",
|
|
981
|
-
"description": "Pressed state of color.background.accent.
|
|
945
|
+
"description": "Pressed state of color.background.accent.magenta.subtle."
|
|
982
946
|
},
|
|
983
|
-
"value": "#
|
|
947
|
+
"value": "#FCB6E1"
|
|
984
948
|
},
|
|
985
|
-
"Light/color.background.accent.
|
|
949
|
+
"Light/color.background.accent.magenta.bolder": {
|
|
986
950
|
"attributes": {
|
|
987
951
|
"group": "paint",
|
|
988
952
|
"state": "active",
|
|
989
|
-
"introduced": "
|
|
990
|
-
"description": "Use for
|
|
953
|
+
"introduced": "0.7.0",
|
|
954
|
+
"description": "Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
|
|
991
955
|
},
|
|
992
|
-
"value": "#
|
|
956
|
+
"value": "#AE4787"
|
|
993
957
|
},
|
|
994
|
-
"Light/color.background.accent.
|
|
958
|
+
"Light/color.background.accent.magenta.bolder.hovered": {
|
|
995
959
|
"attributes": {
|
|
996
960
|
"group": "paint",
|
|
997
961
|
"state": "active",
|
|
998
962
|
"introduced": "1.19.0",
|
|
999
|
-
"description": "Hovered state of color.background.accent.
|
|
963
|
+
"description": "Hovered state of color.background.accent.magenta.bolder."
|
|
1000
964
|
},
|
|
1001
|
-
"value": "#
|
|
965
|
+
"value": "#943D73"
|
|
1002
966
|
},
|
|
1003
|
-
"Light/color.background.accent.
|
|
967
|
+
"Light/color.background.accent.magenta.bolder.pressed": {
|
|
1004
968
|
"attributes": {
|
|
1005
969
|
"group": "paint",
|
|
1006
970
|
"state": "active",
|
|
1007
971
|
"introduced": "1.19.0",
|
|
1008
|
-
"description": "Pressed state of color.background.accent.
|
|
972
|
+
"description": "Pressed state of color.background.accent.magenta.bolder."
|
|
1009
973
|
},
|
|
1010
|
-
"value": "#
|
|
974
|
+
"value": "#77325B"
|
|
1011
975
|
},
|
|
1012
|
-
"Light/color.background.accent.
|
|
976
|
+
"Light/color.background.accent.gray.subtlest": {
|
|
1013
977
|
"attributes": {
|
|
1014
978
|
"group": "paint",
|
|
1015
979
|
"state": "active",
|
|
1016
|
-
"introduced": "
|
|
1017
|
-
"description": "Use for
|
|
980
|
+
"introduced": "0.7.0",
|
|
981
|
+
"description": "Use for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
|
|
1018
982
|
},
|
|
1019
|
-
"value": "#
|
|
983
|
+
"value": "#F0F1F2"
|
|
1020
984
|
},
|
|
1021
|
-
"Light/color.background.accent.
|
|
985
|
+
"Light/color.background.accent.gray.subtlest.hovered": {
|
|
1022
986
|
"attributes": {
|
|
1023
987
|
"group": "paint",
|
|
1024
988
|
"state": "active",
|
|
1025
989
|
"introduced": "1.19.0",
|
|
1026
|
-
"description": "Hovered state of color.background.accent.
|
|
990
|
+
"description": "Hovered state of color.background.accent.gray.subtlest."
|
|
1027
991
|
},
|
|
1028
|
-
"value": "#
|
|
992
|
+
"value": "#DDDEE1"
|
|
1029
993
|
},
|
|
1030
|
-
"Light/color.background.accent.
|
|
994
|
+
"Light/color.background.accent.gray.subtlest.pressed": {
|
|
1031
995
|
"attributes": {
|
|
1032
996
|
"group": "paint",
|
|
1033
997
|
"state": "active",
|
|
1034
998
|
"introduced": "1.19.0",
|
|
1035
|
-
"description": "Pressed state of color.background.accent.
|
|
999
|
+
"description": "Pressed state of color.background.accent.gray.subtlest."
|
|
1036
1000
|
},
|
|
1037
|
-
"value": "#
|
|
1001
|
+
"value": "#B7B9BE"
|
|
1038
1002
|
},
|
|
1039
|
-
"Light/color.background.accent.
|
|
1003
|
+
"Light/color.background.accent.gray.subtler": {
|
|
1040
1004
|
"attributes": {
|
|
1041
1005
|
"group": "paint",
|
|
1042
1006
|
"state": "active",
|
|
1043
1007
|
"introduced": "0.7.0",
|
|
1044
|
-
"description": "Use for
|
|
1008
|
+
"description": "Use for gray backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
1045
1009
|
},
|
|
1046
|
-
"value": "#
|
|
1010
|
+
"value": "#DDDEE1"
|
|
1047
1011
|
},
|
|
1048
|
-
"Light/color.background.accent.
|
|
1012
|
+
"Light/color.background.accent.gray.subtler.hovered": {
|
|
1049
1013
|
"attributes": {
|
|
1050
1014
|
"group": "paint",
|
|
1051
1015
|
"state": "active",
|
|
1052
1016
|
"introduced": "1.19.0",
|
|
1053
|
-
"description": "Hovered state of color.background.accent.
|
|
1017
|
+
"description": "Hovered state of color.background.accent.gray.subtler."
|
|
1054
1018
|
},
|
|
1055
|
-
"value": "#
|
|
1019
|
+
"value": "#B7B9BE"
|
|
1056
1020
|
},
|
|
1057
|
-
"Light/color.background.accent.
|
|
1021
|
+
"Light/color.background.accent.gray.subtler.pressed": {
|
|
1058
1022
|
"attributes": {
|
|
1059
1023
|
"group": "paint",
|
|
1060
1024
|
"state": "active",
|
|
1061
1025
|
"introduced": "1.19.0",
|
|
1062
|
-
"description": "Pressed state of color.background.accent.
|
|
1026
|
+
"description": "Pressed state of color.background.accent.gray.subtler."
|
|
1063
1027
|
},
|
|
1064
|
-
"value": "#
|
|
1028
|
+
"value": "#8C8F97"
|
|
1065
1029
|
},
|
|
1066
|
-
"Light/color.background.accent.
|
|
1030
|
+
"Light/color.background.accent.gray.subtle": {
|
|
1067
1031
|
"attributes": {
|
|
1068
1032
|
"group": "paint",
|
|
1069
1033
|
"state": "active",
|
|
1070
1034
|
"introduced": "0.7.0",
|
|
1071
|
-
"description": "Use for
|
|
1035
|
+
"description": "Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
1072
1036
|
},
|
|
1073
|
-
"value": "#
|
|
1037
|
+
"value": "#8C8F97"
|
|
1074
1038
|
},
|
|
1075
|
-
"Light/color.background.accent.
|
|
1039
|
+
"Light/color.background.accent.gray.subtle.hovered": {
|
|
1076
1040
|
"attributes": {
|
|
1077
1041
|
"group": "paint",
|
|
1078
1042
|
"state": "active",
|
|
1079
1043
|
"introduced": "1.19.0",
|
|
1080
|
-
"description": "Hovered state of color.background.accent.
|
|
1044
|
+
"description": "Hovered state of color.background.accent.gray.subtle."
|
|
1081
1045
|
},
|
|
1082
|
-
"value": "#
|
|
1046
|
+
"value": "#B7B9BE"
|
|
1083
1047
|
},
|
|
1084
|
-
"Light/color.background.accent.
|
|
1048
|
+
"Light/color.background.accent.gray.subtle.pressed": {
|
|
1085
1049
|
"attributes": {
|
|
1086
1050
|
"group": "paint",
|
|
1087
1051
|
"state": "active",
|
|
1088
1052
|
"introduced": "1.19.0",
|
|
1089
|
-
"description": "Pressed state of color.background.accent.
|
|
1053
|
+
"description": "Pressed state of color.background.accent.gray.subtle."
|
|
1090
1054
|
},
|
|
1091
|
-
"value": "#
|
|
1055
|
+
"value": "#DDDEE1"
|
|
1092
1056
|
},
|
|
1093
|
-
"Light/color.background.accent.
|
|
1057
|
+
"Light/color.background.accent.gray.bolder": {
|
|
1094
1058
|
"attributes": {
|
|
1095
1059
|
"group": "paint",
|
|
1096
1060
|
"state": "active",
|
|
1097
1061
|
"introduced": "0.7.0",
|
|
1098
|
-
"description": "Use for
|
|
1062
|
+
"description": "Use for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
|
|
1099
1063
|
},
|
|
1100
|
-
"value": "#
|
|
1064
|
+
"value": "#6B6E76"
|
|
1101
1065
|
},
|
|
1102
|
-
"Light/color.background.accent.
|
|
1066
|
+
"Light/color.background.accent.gray.bolder.hovered": {
|
|
1103
1067
|
"attributes": {
|
|
1104
1068
|
"group": "paint",
|
|
1105
1069
|
"state": "active",
|
|
1106
1070
|
"introduced": "1.19.0",
|
|
1107
|
-
"description": "Hovered state of color.background.accent.
|
|
1071
|
+
"description": "Hovered state of color.background.accent.gray.bolder."
|
|
1108
1072
|
},
|
|
1109
|
-
"value": "#
|
|
1073
|
+
"value": "#505258"
|
|
1110
1074
|
},
|
|
1111
|
-
"Light/color.background.accent.
|
|
1075
|
+
"Light/color.background.accent.gray.bolder.pressed": {
|
|
1112
1076
|
"attributes": {
|
|
1113
1077
|
"group": "paint",
|
|
1114
1078
|
"state": "active",
|
|
1115
1079
|
"introduced": "1.19.0",
|
|
1116
|
-
"description": "Pressed state of color.background.accent.
|
|
1080
|
+
"description": "Pressed state of color.background.accent.gray.subtlest."
|
|
1117
1081
|
},
|
|
1118
|
-
"value": "#
|
|
1082
|
+
"value": "#3B3D42"
|
|
1119
1083
|
},
|
|
1120
|
-
"Light/color.background.
|
|
1084
|
+
"Light/color.background.disabled": {
|
|
1121
1085
|
"attributes": {
|
|
1122
1086
|
"group": "paint",
|
|
1123
1087
|
"state": "active",
|
|
1124
|
-
"introduced": "0.
|
|
1125
|
-
"description": "Use for
|
|
1088
|
+
"introduced": "0.0.15",
|
|
1089
|
+
"description": "Use for backgrounds of elements in a disabled state."
|
|
1126
1090
|
},
|
|
1127
|
-
"value": "#
|
|
1091
|
+
"value": "#0515240F"
|
|
1128
1092
|
},
|
|
1129
|
-
"Light/color.background.
|
|
1093
|
+
"Light/color.background.input": {
|
|
1130
1094
|
"attributes": {
|
|
1131
1095
|
"group": "paint",
|
|
1132
1096
|
"state": "active",
|
|
1133
|
-
"introduced": "
|
|
1134
|
-
"description": "
|
|
1097
|
+
"introduced": "0.6.0",
|
|
1098
|
+
"description": "Use for background of form UI elements, such as text fields, checkboxes, and radio buttons."
|
|
1135
1099
|
},
|
|
1136
|
-
"value": "#
|
|
1100
|
+
"value": "#FFFFFF"
|
|
1137
1101
|
},
|
|
1138
|
-
"Light/color.background.
|
|
1102
|
+
"Light/color.background.input.hovered": {
|
|
1139
1103
|
"attributes": {
|
|
1140
1104
|
"group": "paint",
|
|
1141
1105
|
"state": "active",
|
|
1142
|
-
"introduced": "
|
|
1143
|
-
"description": "
|
|
1106
|
+
"introduced": "0.6.0",
|
|
1107
|
+
"description": "Hovered state for color.background.input"
|
|
1144
1108
|
},
|
|
1145
|
-
"value": "#
|
|
1109
|
+
"value": "#F8F8F8"
|
|
1146
1110
|
},
|
|
1147
|
-
"Light/color.background.
|
|
1111
|
+
"Light/color.background.input.pressed": {
|
|
1148
1112
|
"attributes": {
|
|
1149
1113
|
"group": "paint",
|
|
1150
1114
|
"state": "active",
|
|
1151
|
-
"introduced": "0.
|
|
1152
|
-
"description": "
|
|
1115
|
+
"introduced": "0.6.0",
|
|
1116
|
+
"description": "Pressed state for color.background.input"
|
|
1153
1117
|
},
|
|
1154
|
-
"value": "#
|
|
1118
|
+
"value": "#FFFFFF"
|
|
1155
1119
|
},
|
|
1156
|
-
"Light/color.background.
|
|
1120
|
+
"Light/color.background.inverse.subtle": {
|
|
1157
1121
|
"attributes": {
|
|
1158
1122
|
"group": "paint",
|
|
1159
1123
|
"state": "active",
|
|
1160
|
-
"introduced": "
|
|
1161
|
-
"description": "
|
|
1124
|
+
"introduced": "0.8.3",
|
|
1125
|
+
"description": "Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards."
|
|
1162
1126
|
},
|
|
1163
|
-
"value": "#
|
|
1127
|
+
"value": "#00000029"
|
|
1164
1128
|
},
|
|
1165
|
-
"Light/color.background.
|
|
1129
|
+
"Light/color.background.inverse.subtle.hovered": {
|
|
1166
1130
|
"attributes": {
|
|
1167
1131
|
"group": "paint",
|
|
1168
1132
|
"state": "active",
|
|
1169
|
-
"introduced": "
|
|
1170
|
-
"description": "
|
|
1133
|
+
"introduced": "0.8.3",
|
|
1134
|
+
"description": "Use for the hovered state of color.background.inverse.subtle"
|
|
1171
1135
|
},
|
|
1172
|
-
"value": "#
|
|
1136
|
+
"value": "#0000003D"
|
|
1173
1137
|
},
|
|
1174
|
-
"Light/color.background.
|
|
1138
|
+
"Light/color.background.inverse.subtle.pressed": {
|
|
1175
1139
|
"attributes": {
|
|
1176
1140
|
"group": "paint",
|
|
1177
1141
|
"state": "active",
|
|
1178
|
-
"introduced": "0.
|
|
1179
|
-
"description": "Use for
|
|
1142
|
+
"introduced": "0.8.3",
|
|
1143
|
+
"description": "Use for the pressed state of color.background.inverse.subtle"
|
|
1180
1144
|
},
|
|
1181
|
-
"value": "#
|
|
1145
|
+
"value": "#00000052"
|
|
1182
1146
|
},
|
|
1183
|
-
"Light/color.background.
|
|
1147
|
+
"Light/color.background.neutral": {
|
|
1184
1148
|
"attributes": {
|
|
1185
1149
|
"group": "paint",
|
|
1186
1150
|
"state": "active",
|
|
1187
|
-
"introduced": "
|
|
1188
|
-
"description": "
|
|
1151
|
+
"introduced": "0.6.0",
|
|
1152
|
+
"description": "The default background for neutral elements, such as default buttons."
|
|
1189
1153
|
},
|
|
1190
|
-
"value": "#
|
|
1154
|
+
"value": "#0515240F"
|
|
1191
1155
|
},
|
|
1192
|
-
"Light/color.background.
|
|
1156
|
+
"Light/color.background.neutral.hovered": {
|
|
1193
1157
|
"attributes": {
|
|
1194
1158
|
"group": "paint",
|
|
1195
1159
|
"state": "active",
|
|
1196
|
-
"introduced": "
|
|
1197
|
-
"description": "
|
|
1160
|
+
"introduced": "0.6.0",
|
|
1161
|
+
"description": "Hovered state for color.background.neutral"
|
|
1198
1162
|
},
|
|
1199
|
-
"value": "#
|
|
1163
|
+
"value": "#0B120E24"
|
|
1200
1164
|
},
|
|
1201
|
-
"Light/color.background.
|
|
1165
|
+
"Light/color.background.neutral.pressed": {
|
|
1202
1166
|
"attributes": {
|
|
1203
1167
|
"group": "paint",
|
|
1204
1168
|
"state": "active",
|
|
1205
|
-
"introduced": "0.
|
|
1206
|
-
"description": "
|
|
1169
|
+
"introduced": "0.6.0",
|
|
1170
|
+
"description": "Pressed state for color.background.neutral"
|
|
1207
1171
|
},
|
|
1208
|
-
"value": "#
|
|
1172
|
+
"value": "#080F214A"
|
|
1209
1173
|
},
|
|
1210
|
-
"Light/color.background.
|
|
1174
|
+
"Light/color.background.neutral.subtle": {
|
|
1211
1175
|
"attributes": {
|
|
1212
1176
|
"group": "paint",
|
|
1213
1177
|
"state": "active",
|
|
1214
|
-
"introduced": "
|
|
1215
|
-
"description": "
|
|
1178
|
+
"introduced": "0.6.0",
|
|
1179
|
+
"description": "Use for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items."
|
|
1216
1180
|
},
|
|
1217
|
-
"value": "#
|
|
1181
|
+
"value": "#00000000"
|
|
1218
1182
|
},
|
|
1219
|
-
"Light/color.background.
|
|
1183
|
+
"Light/color.background.neutral.subtle.hovered": {
|
|
1220
1184
|
"attributes": {
|
|
1221
1185
|
"group": "paint",
|
|
1222
1186
|
"state": "active",
|
|
1223
|
-
"introduced": "
|
|
1224
|
-
"description": "
|
|
1187
|
+
"introduced": "0.6.0",
|
|
1188
|
+
"description": "Hovered state for color.background.neutral.subtle"
|
|
1225
1189
|
},
|
|
1226
|
-
"value": "#
|
|
1190
|
+
"value": "#0515240F"
|
|
1227
1191
|
},
|
|
1228
|
-
"Light/color.background.
|
|
1192
|
+
"Light/color.background.neutral.subtle.pressed": {
|
|
1229
1193
|
"attributes": {
|
|
1230
1194
|
"group": "paint",
|
|
1231
1195
|
"state": "active",
|
|
1232
|
-
"introduced": "0.
|
|
1233
|
-
"description": "
|
|
1196
|
+
"introduced": "0.6.0",
|
|
1197
|
+
"description": "Pressed state for color.background.neutral.subtle"
|
|
1234
1198
|
},
|
|
1235
|
-
"value": "#
|
|
1199
|
+
"value": "#0B120E24"
|
|
1236
1200
|
},
|
|
1237
|
-
"Light/color.background.
|
|
1201
|
+
"Light/color.background.neutral.bold": {
|
|
1238
1202
|
"attributes": {
|
|
1239
1203
|
"group": "paint",
|
|
1240
1204
|
"state": "active",
|
|
1241
|
-
"introduced": "
|
|
1242
|
-
"description": "
|
|
1205
|
+
"introduced": "0.6.0",
|
|
1206
|
+
"description": "A vibrant background option for neutral UI elements, such as announcement banners."
|
|
1243
1207
|
},
|
|
1244
|
-
"value": "#
|
|
1208
|
+
"value": "#292A2E"
|
|
1245
1209
|
},
|
|
1246
|
-
"Light/color.background.
|
|
1210
|
+
"Light/color.background.neutral.bold.hovered": {
|
|
1247
1211
|
"attributes": {
|
|
1248
1212
|
"group": "paint",
|
|
1249
1213
|
"state": "active",
|
|
1250
|
-
"introduced": "
|
|
1251
|
-
"description": "
|
|
1214
|
+
"introduced": "0.6.0",
|
|
1215
|
+
"description": "Hovered state of color.background.neutral.bold"
|
|
1252
1216
|
},
|
|
1253
|
-
"value": "#
|
|
1217
|
+
"value": "#3B3D42"
|
|
1254
1218
|
},
|
|
1255
|
-
"Light/color.background.
|
|
1219
|
+
"Light/color.background.neutral.bold.pressed": {
|
|
1256
1220
|
"attributes": {
|
|
1257
1221
|
"group": "paint",
|
|
1258
1222
|
"state": "active",
|
|
1259
|
-
"introduced": "0.
|
|
1260
|
-
"description": "
|
|
1223
|
+
"introduced": "0.6.0",
|
|
1224
|
+
"description": "Pressed state of color.background.neutral.bold"
|
|
1261
1225
|
},
|
|
1262
|
-
"value": "#
|
|
1226
|
+
"value": "#505258"
|
|
1263
1227
|
},
|
|
1264
|
-
"Light/color.background.
|
|
1228
|
+
"Light/color.background.selected": {
|
|
1265
1229
|
"attributes": {
|
|
1266
1230
|
"group": "paint",
|
|
1267
1231
|
"state": "active",
|
|
1268
|
-
"introduced": "
|
|
1269
|
-
"description": "
|
|
1232
|
+
"introduced": "0.6.2",
|
|
1233
|
+
"description": "Use for the background of elements in a selected state, such as in opened dropdown buttons."
|
|
1270
1234
|
},
|
|
1271
|
-
"value": "#
|
|
1235
|
+
"value": "#E9F2FE"
|
|
1272
1236
|
},
|
|
1273
|
-
"Light/color.background.
|
|
1237
|
+
"Light/color.background.selected.hovered": {
|
|
1274
1238
|
"attributes": {
|
|
1275
1239
|
"group": "paint",
|
|
1276
1240
|
"state": "active",
|
|
1277
|
-
"introduced": "
|
|
1278
|
-
"description": "
|
|
1241
|
+
"introduced": "0.6.2",
|
|
1242
|
+
"description": "Hovered state for color.background.selected"
|
|
1279
1243
|
},
|
|
1280
|
-
"value": "#
|
|
1244
|
+
"value": "#CFE1FD"
|
|
1281
1245
|
},
|
|
1282
|
-
"Light/color.background.
|
|
1246
|
+
"Light/color.background.selected.pressed": {
|
|
1283
1247
|
"attributes": {
|
|
1284
1248
|
"group": "paint",
|
|
1285
1249
|
"state": "active",
|
|
1286
|
-
"introduced": "0.
|
|
1287
|
-
"description": "
|
|
1250
|
+
"introduced": "0.6.2",
|
|
1251
|
+
"description": "Pressed state for color.background.selected"
|
|
1288
1252
|
},
|
|
1289
|
-
"value": "#
|
|
1253
|
+
"value": "#8FB8F6"
|
|
1290
1254
|
},
|
|
1291
|
-
"Light/color.background.
|
|
1255
|
+
"Light/color.background.selected.bold": {
|
|
1292
1256
|
"attributes": {
|
|
1293
1257
|
"group": "paint",
|
|
1294
1258
|
"state": "active",
|
|
1295
|
-
"introduced": "
|
|
1296
|
-
"description": "
|
|
1259
|
+
"introduced": "0.6.2",
|
|
1260
|
+
"description": "Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons."
|
|
1297
1261
|
},
|
|
1298
|
-
"value": "#
|
|
1262
|
+
"value": "#1868DB"
|
|
1299
1263
|
},
|
|
1300
|
-
"Light/color.background.
|
|
1264
|
+
"Light/color.background.selected.bold.hovered": {
|
|
1301
1265
|
"attributes": {
|
|
1302
1266
|
"group": "paint",
|
|
1303
1267
|
"state": "active",
|
|
1304
|
-
"introduced": "
|
|
1305
|
-
"description": "
|
|
1268
|
+
"introduced": "0.6.2",
|
|
1269
|
+
"description": "Hovered state of color.background.selected.bold"
|
|
1306
1270
|
},
|
|
1307
|
-
"value": "#
|
|
1271
|
+
"value": "#1558BC"
|
|
1308
1272
|
},
|
|
1309
|
-
"Light/color.background.
|
|
1273
|
+
"Light/color.background.selected.bold.pressed": {
|
|
1310
1274
|
"attributes": {
|
|
1311
1275
|
"group": "paint",
|
|
1312
1276
|
"state": "active",
|
|
1313
|
-
"introduced": "0.
|
|
1314
|
-
"description": "
|
|
1277
|
+
"introduced": "0.6.2",
|
|
1278
|
+
"description": "Pressed state of color.background.selected.bold"
|
|
1315
1279
|
},
|
|
1316
|
-
"value": "#
|
|
1280
|
+
"value": "#123263"
|
|
1317
1281
|
},
|
|
1318
|
-
"Light/color.background.
|
|
1282
|
+
"Light/color.background.brand.subtlest": {
|
|
1319
1283
|
"attributes": {
|
|
1320
1284
|
"group": "paint",
|
|
1321
1285
|
"state": "active",
|
|
1322
|
-
"introduced": "1.
|
|
1323
|
-
"description": "
|
|
1286
|
+
"introduced": "1.13.0",
|
|
1287
|
+
"description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
|
|
1324
1288
|
},
|
|
1325
|
-
"value": "#
|
|
1289
|
+
"value": "#E9F2FE"
|
|
1326
1290
|
},
|
|
1327
|
-
"Light/color.background.
|
|
1291
|
+
"Light/color.background.brand.subtlest.hovered": {
|
|
1328
1292
|
"attributes": {
|
|
1329
1293
|
"group": "paint",
|
|
1330
1294
|
"state": "active",
|
|
1331
|
-
"introduced": "1.
|
|
1332
|
-
"description": "
|
|
1295
|
+
"introduced": "1.13.0",
|
|
1296
|
+
"description": "Hovered state of color.background.brand.subtlest."
|
|
1333
1297
|
},
|
|
1334
|
-
"value": "#
|
|
1298
|
+
"value": "#CFE1FD"
|
|
1335
1299
|
},
|
|
1336
|
-
"Light/color.background.
|
|
1300
|
+
"Light/color.background.brand.subtlest.pressed": {
|
|
1337
1301
|
"attributes": {
|
|
1338
1302
|
"group": "paint",
|
|
1339
1303
|
"state": "active",
|
|
1340
|
-
"introduced": "
|
|
1341
|
-
"description": "
|
|
1304
|
+
"introduced": "1.13.0",
|
|
1305
|
+
"description": "Pressed state of color.background.brand.subtlest"
|
|
1342
1306
|
},
|
|
1343
|
-
"value": "#
|
|
1307
|
+
"value": "#ADCBFB"
|
|
1344
1308
|
},
|
|
1345
|
-
"Light/color.background.
|
|
1309
|
+
"Light/color.background.brand.bold": {
|
|
1346
1310
|
"attributes": {
|
|
1347
1311
|
"group": "paint",
|
|
1348
1312
|
"state": "active",
|
|
1349
|
-
"introduced": "
|
|
1350
|
-
"description": "
|
|
1313
|
+
"introduced": "0.6.0",
|
|
1314
|
+
"description": "Use for the background of elements used to reinforce our brand, but with more emphasis."
|
|
1351
1315
|
},
|
|
1352
|
-
"value": "#
|
|
1316
|
+
"value": "#1868DB"
|
|
1353
1317
|
},
|
|
1354
|
-
"Light/color.background.
|
|
1318
|
+
"Light/color.background.brand.bold.hovered": {
|
|
1355
1319
|
"attributes": {
|
|
1356
1320
|
"group": "paint",
|
|
1357
1321
|
"state": "active",
|
|
1358
|
-
"introduced": "
|
|
1359
|
-
"description": "
|
|
1322
|
+
"introduced": "0.6.0",
|
|
1323
|
+
"description": "Hovered state of color.background.brand.bold."
|
|
1360
1324
|
},
|
|
1361
|
-
"value": "#
|
|
1325
|
+
"value": "#1558BC"
|
|
1362
1326
|
},
|
|
1363
|
-
"Light/color.background.
|
|
1327
|
+
"Light/color.background.brand.bold.pressed": {
|
|
1364
1328
|
"attributes": {
|
|
1365
1329
|
"group": "paint",
|
|
1366
1330
|
"state": "active",
|
|
1367
|
-
"introduced": "0.
|
|
1368
|
-
"description": "
|
|
1331
|
+
"introduced": "0.6.0",
|
|
1332
|
+
"description": "Pressed state of color.background.brand.bold."
|
|
1369
1333
|
},
|
|
1370
|
-
"value": "#
|
|
1334
|
+
"value": "#144794"
|
|
1371
1335
|
},
|
|
1372
|
-
"Light/color.background.
|
|
1336
|
+
"Light/color.background.brand.boldest": {
|
|
1373
1337
|
"attributes": {
|
|
1374
1338
|
"group": "paint",
|
|
1375
1339
|
"state": "active",
|
|
1376
|
-
"introduced": "1.
|
|
1377
|
-
"description": "
|
|
1340
|
+
"introduced": "1.13.0",
|
|
1341
|
+
"description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
|
|
1378
1342
|
},
|
|
1379
|
-
"value": "#
|
|
1343
|
+
"value": "#1C2B42"
|
|
1380
1344
|
},
|
|
1381
|
-
"Light/color.background.
|
|
1345
|
+
"Light/color.background.brand.boldest.hovered": {
|
|
1382
1346
|
"attributes": {
|
|
1383
1347
|
"group": "paint",
|
|
1384
1348
|
"state": "active",
|
|
1385
|
-
"introduced": "1.
|
|
1386
|
-
"description": "
|
|
1349
|
+
"introduced": "1.13.0",
|
|
1350
|
+
"description": "Hovered state of color.background.brand.boldest."
|
|
1387
1351
|
},
|
|
1388
|
-
"value": "#
|
|
1352
|
+
"value": "#123263"
|
|
1389
1353
|
},
|
|
1390
|
-
"Light/color.background.
|
|
1354
|
+
"Light/color.background.brand.boldest.pressed": {
|
|
1391
1355
|
"attributes": {
|
|
1392
1356
|
"group": "paint",
|
|
1393
1357
|
"state": "active",
|
|
1394
|
-
"introduced": "
|
|
1395
|
-
"description": "
|
|
1358
|
+
"introduced": "1.13.0",
|
|
1359
|
+
"description": "Pressed state of color.background.brand.boldest."
|
|
1396
1360
|
},
|
|
1397
|
-
"value": "#
|
|
1361
|
+
"value": "#144794"
|
|
1398
1362
|
},
|
|
1399
|
-
"Light/color.background.
|
|
1363
|
+
"Light/color.background.danger": {
|
|
1400
1364
|
"attributes": {
|
|
1401
1365
|
"group": "paint",
|
|
1402
1366
|
"state": "active",
|
|
1403
|
-
"introduced": "
|
|
1404
|
-
"description": "
|
|
1367
|
+
"introduced": "0.6.0",
|
|
1368
|
+
"description": "Use for backgrounds communicating critical information, such in error section messages."
|
|
1405
1369
|
},
|
|
1406
|
-
"value": "#
|
|
1370
|
+
"value": "#FFECEB"
|
|
1407
1371
|
},
|
|
1408
|
-
"Light/color.background.
|
|
1372
|
+
"Light/color.background.danger.hovered": {
|
|
1409
1373
|
"attributes": {
|
|
1410
1374
|
"group": "paint",
|
|
1411
1375
|
"state": "active",
|
|
1412
|
-
"introduced": "
|
|
1413
|
-
"description": "
|
|
1376
|
+
"introduced": "0.6.0",
|
|
1377
|
+
"description": "Hovered state for color.background.danger"
|
|
1414
1378
|
},
|
|
1415
|
-
"value": "#
|
|
1379
|
+
"value": "#FFD5D2"
|
|
1416
1380
|
},
|
|
1417
|
-
"Light/color.background.
|
|
1381
|
+
"Light/color.background.danger.pressed": {
|
|
1418
1382
|
"attributes": {
|
|
1419
1383
|
"group": "paint",
|
|
1420
1384
|
"state": "active",
|
|
1421
|
-
"introduced": "0.
|
|
1422
|
-
"description": "
|
|
1385
|
+
"introduced": "0.6.0",
|
|
1386
|
+
"description": "Pressed state for color.background.danger"
|
|
1423
1387
|
},
|
|
1424
|
-
"value": "#
|
|
1388
|
+
"value": "#FFB8B2"
|
|
1425
1389
|
},
|
|
1426
|
-
"Light/color.background.
|
|
1390
|
+
"Light/color.background.danger.subtler": {
|
|
1427
1391
|
"attributes": {
|
|
1428
1392
|
"group": "paint",
|
|
1429
1393
|
"state": "active",
|
|
1430
|
-
"introduced": "1.
|
|
1431
|
-
"description": "
|
|
1394
|
+
"introduced": "8.1.0",
|
|
1395
|
+
"description": "Use for backgrounds of danger lozenges and badges to ensure accessibility and desired visual appearance."
|
|
1432
1396
|
},
|
|
1433
|
-
"value": "#
|
|
1397
|
+
"value": "#FFD5D2"
|
|
1434
1398
|
},
|
|
1435
|
-
"Light/color.background.
|
|
1399
|
+
"Light/color.background.danger.subtler.hovered": {
|
|
1436
1400
|
"attributes": {
|
|
1437
1401
|
"group": "paint",
|
|
1438
1402
|
"state": "active",
|
|
1439
|
-
"introduced": "1.
|
|
1440
|
-
"description": "
|
|
1403
|
+
"introduced": "8.1.0",
|
|
1404
|
+
"description": "Hovered state of color.background.danger.subtler"
|
|
1441
1405
|
},
|
|
1442
|
-
"value": "#
|
|
1406
|
+
"value": "#FFB8B2"
|
|
1443
1407
|
},
|
|
1444
|
-
"Light/color.background.
|
|
1408
|
+
"Light/color.background.danger.subtler.pressed": {
|
|
1445
1409
|
"attributes": {
|
|
1446
1410
|
"group": "paint",
|
|
1447
1411
|
"state": "active",
|
|
1448
|
-
"introduced": "
|
|
1449
|
-
"description": "
|
|
1412
|
+
"introduced": "8.1.0",
|
|
1413
|
+
"description": "Pressed state of color.background.danger.subtler"
|
|
1450
1414
|
},
|
|
1451
|
-
"value": "#
|
|
1415
|
+
"value": "#FD9891"
|
|
1452
1416
|
},
|
|
1453
|
-
"Light/color.background.
|
|
1417
|
+
"Light/color.background.danger.subtle": {
|
|
1454
1418
|
"attributes": {
|
|
1455
1419
|
"group": "paint",
|
|
1456
1420
|
"state": "active",
|
|
1457
|
-
"introduced": "
|
|
1458
|
-
"description": "
|
|
1421
|
+
"introduced": "13.2.0",
|
|
1422
|
+
"description": "Background colour for non-interactive elements communicating critical danger information (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.danger.bold or color.background.danger.subtler for interactive states."
|
|
1459
1423
|
},
|
|
1460
|
-
"value": "#
|
|
1424
|
+
"value": "#FD9891"
|
|
1461
1425
|
},
|
|
1462
|
-
"Light/color.background.
|
|
1426
|
+
"Light/color.background.danger.bold": {
|
|
1463
1427
|
"attributes": {
|
|
1464
1428
|
"group": "paint",
|
|
1465
1429
|
"state": "active",
|
|
1466
|
-
"introduced": "
|
|
1467
|
-
"description": "
|
|
1430
|
+
"introduced": "0.6.0",
|
|
1431
|
+
"description": "A vibrant background option for communicating critical information, such as in danger buttons and error banners."
|
|
1468
1432
|
},
|
|
1469
|
-
"value": "#
|
|
1433
|
+
"value": "#C9372C"
|
|
1470
1434
|
},
|
|
1471
|
-
"Light/color.background.
|
|
1435
|
+
"Light/color.background.danger.bold.hovered": {
|
|
1472
1436
|
"attributes": {
|
|
1473
1437
|
"group": "paint",
|
|
1474
1438
|
"state": "active",
|
|
1475
|
-
"introduced": "0.
|
|
1476
|
-
"description": "
|
|
1439
|
+
"introduced": "0.6.0",
|
|
1440
|
+
"description": "Hovered state of color.background.danger.bold"
|
|
1477
1441
|
},
|
|
1478
|
-
"value": "#
|
|
1442
|
+
"value": "#AE2E24"
|
|
1479
1443
|
},
|
|
1480
|
-
"Light/color.background.
|
|
1444
|
+
"Light/color.background.danger.bold.pressed": {
|
|
1481
1445
|
"attributes": {
|
|
1482
1446
|
"group": "paint",
|
|
1483
1447
|
"state": "active",
|
|
1484
|
-
"introduced": "
|
|
1485
|
-
"description": "
|
|
1448
|
+
"introduced": "0.6.0",
|
|
1449
|
+
"description": "Pressed state of color.background.danger.bold"
|
|
1486
1450
|
},
|
|
1487
|
-
"value": "#
|
|
1451
|
+
"value": "#872821"
|
|
1488
1452
|
},
|
|
1489
|
-
"Light/color.background.
|
|
1453
|
+
"Light/color.background.warning": {
|
|
1490
1454
|
"attributes": {
|
|
1491
1455
|
"group": "paint",
|
|
1492
1456
|
"state": "active",
|
|
1493
|
-
"introduced": "
|
|
1494
|
-
"description": "
|
|
1457
|
+
"introduced": "0.6.0",
|
|
1458
|
+
"description": "Use for backgrounds communicating caution, such as in warning section messages."
|
|
1495
1459
|
},
|
|
1496
|
-
"value": "#
|
|
1460
|
+
"value": "#FFF5DB"
|
|
1497
1461
|
},
|
|
1498
|
-
"Light/color.background.
|
|
1462
|
+
"Light/color.background.warning.hovered": {
|
|
1499
1463
|
"attributes": {
|
|
1500
1464
|
"group": "paint",
|
|
1501
1465
|
"state": "active",
|
|
1502
|
-
"introduced": "0.
|
|
1503
|
-
"description": "
|
|
1466
|
+
"introduced": "0.6.0",
|
|
1467
|
+
"description": "Hovered state for color.background.warning"
|
|
1504
1468
|
},
|
|
1505
|
-
"value": "#
|
|
1469
|
+
"value": "#FCE4A6"
|
|
1506
1470
|
},
|
|
1507
|
-
"Light/color.background.
|
|
1471
|
+
"Light/color.background.warning.pressed": {
|
|
1508
1472
|
"attributes": {
|
|
1509
1473
|
"group": "paint",
|
|
1510
1474
|
"state": "active",
|
|
1511
|
-
"introduced": "
|
|
1512
|
-
"description": "
|
|
1475
|
+
"introduced": "0.6.0",
|
|
1476
|
+
"description": "Pressed state for color.background.warning"
|
|
1513
1477
|
},
|
|
1514
|
-
"value": "#
|
|
1478
|
+
"value": "#FBD779"
|
|
1515
1479
|
},
|
|
1516
|
-
"Light/color.background.
|
|
1480
|
+
"Light/color.background.warning.subtler": {
|
|
1517
1481
|
"attributes": {
|
|
1518
1482
|
"group": "paint",
|
|
1519
1483
|
"state": "active",
|
|
1520
|
-
"introduced": "1.
|
|
1521
|
-
"description": "
|
|
1484
|
+
"introduced": "8.1.0",
|
|
1485
|
+
"description": "Use for backgrounds of warning lozenges and badges to ensure accessibility and desired visual appearance."
|
|
1522
1486
|
},
|
|
1523
|
-
"value": "#
|
|
1487
|
+
"value": "#FCE4A6"
|
|
1524
1488
|
},
|
|
1525
|
-
"Light/color.background.
|
|
1489
|
+
"Light/color.background.warning.subtler.hovered": {
|
|
1526
1490
|
"attributes": {
|
|
1527
1491
|
"group": "paint",
|
|
1528
1492
|
"state": "active",
|
|
1529
|
-
"introduced": "
|
|
1530
|
-
"description": "
|
|
1493
|
+
"introduced": "8.1.0",
|
|
1494
|
+
"description": "Hovered state of color.background.warning.subtler"
|
|
1531
1495
|
},
|
|
1532
|
-
"value": "#
|
|
1496
|
+
"value": "#FBD779"
|
|
1533
1497
|
},
|
|
1534
|
-
"Light/color.background.
|
|
1498
|
+
"Light/color.background.warning.subtler.pressed": {
|
|
1535
1499
|
"attributes": {
|
|
1536
1500
|
"group": "paint",
|
|
1537
1501
|
"state": "active",
|
|
1538
|
-
"introduced": "1.
|
|
1539
|
-
"description": "
|
|
1502
|
+
"introduced": "8.1.0",
|
|
1503
|
+
"description": "Pressed state of color.background.warning.subtler"
|
|
1540
1504
|
},
|
|
1541
|
-
"value": "#
|
|
1505
|
+
"value": "#FBC828"
|
|
1542
1506
|
},
|
|
1543
|
-
"Light/color.background.
|
|
1507
|
+
"Light/color.background.warning.subtle": {
|
|
1544
1508
|
"attributes": {
|
|
1545
1509
|
"group": "paint",
|
|
1546
1510
|
"state": "active",
|
|
1547
|
-
"introduced": "
|
|
1548
|
-
"description": "
|
|
1511
|
+
"introduced": "13.2.0",
|
|
1512
|
+
"description": "Background colour for non-interactive elements communicating caution (e.g. status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.warning.bold or color.background.warning.subtler for interactive states."
|
|
1549
1513
|
},
|
|
1550
|
-
"value": "#
|
|
1514
|
+
"value": "#FBD779"
|
|
1551
1515
|
},
|
|
1552
|
-
"Light/color.background.
|
|
1516
|
+
"Light/color.background.warning.bold": {
|
|
1553
1517
|
"attributes": {
|
|
1554
1518
|
"group": "paint",
|
|
1555
1519
|
"state": "active",
|
|
1556
|
-
"introduced": "0.
|
|
1557
|
-
"description": "
|
|
1520
|
+
"introduced": "0.6.0",
|
|
1521
|
+
"description": "A vibrant background option for communicating caution, such as in warning buttons and warning banners."
|
|
1558
1522
|
},
|
|
1559
|
-
"value": "#
|
|
1523
|
+
"value": "#FBC828"
|
|
1560
1524
|
},
|
|
1561
|
-
"Light/color.background.
|
|
1525
|
+
"Light/color.background.warning.bold.hovered": {
|
|
1562
1526
|
"attributes": {
|
|
1563
1527
|
"group": "paint",
|
|
1564
1528
|
"state": "active",
|
|
1565
|
-
"introduced": "
|
|
1566
|
-
"description": "Hovered state of color.background.
|
|
1529
|
+
"introduced": "0.6.0",
|
|
1530
|
+
"description": "Hovered state of color.background.warning.bold"
|
|
1567
1531
|
},
|
|
1568
|
-
"value": "#
|
|
1532
|
+
"value": "#FCA700"
|
|
1569
1533
|
},
|
|
1570
|
-
"Light/color.background.
|
|
1534
|
+
"Light/color.background.warning.bold.pressed": {
|
|
1571
1535
|
"attributes": {
|
|
1572
1536
|
"group": "paint",
|
|
1573
1537
|
"state": "active",
|
|
1574
|
-
"introduced": "
|
|
1575
|
-
"description": "Pressed state of color.background.
|
|
1538
|
+
"introduced": "0.6.0",
|
|
1539
|
+
"description": "Pressed state of color.background.warning.bold"
|
|
1576
1540
|
},
|
|
1577
|
-
"value": "#
|
|
1541
|
+
"value": "#F68909"
|
|
1578
1542
|
},
|
|
1579
|
-
"Light/color.background.
|
|
1543
|
+
"Light/color.background.success": {
|
|
1580
1544
|
"attributes": {
|
|
1581
1545
|
"group": "paint",
|
|
1582
1546
|
"state": "active",
|
|
1583
|
-
"introduced": "0.
|
|
1584
|
-
"description": "Use for
|
|
1547
|
+
"introduced": "0.6.0",
|
|
1548
|
+
"description": "Use for backgrounds communicating a favorable outcome, such as in success section messages."
|
|
1585
1549
|
},
|
|
1586
|
-
"value": "#
|
|
1550
|
+
"value": "#EFFFD6"
|
|
1587
1551
|
},
|
|
1588
|
-
"Light/color.background.
|
|
1552
|
+
"Light/color.background.success.hovered": {
|
|
1589
1553
|
"attributes": {
|
|
1590
1554
|
"group": "paint",
|
|
1591
1555
|
"state": "active",
|
|
1592
|
-
"introduced": "
|
|
1593
|
-
"description": "Hovered state
|
|
1556
|
+
"introduced": "0.6.0",
|
|
1557
|
+
"description": "Hovered state for color.background.success"
|
|
1594
1558
|
},
|
|
1595
|
-
"value": "#
|
|
1559
|
+
"value": "#D3F1A7"
|
|
1596
1560
|
},
|
|
1597
|
-
"Light/color.background.
|
|
1561
|
+
"Light/color.background.success.pressed": {
|
|
1598
1562
|
"attributes": {
|
|
1599
1563
|
"group": "paint",
|
|
1600
1564
|
"state": "active",
|
|
1601
|
-
"introduced": "
|
|
1602
|
-
"description": "Pressed state
|
|
1565
|
+
"introduced": "0.6.0",
|
|
1566
|
+
"description": "Pressed state for color.background.success"
|
|
1603
1567
|
},
|
|
1604
|
-
"value": "#
|
|
1568
|
+
"value": "#BDE97C"
|
|
1605
1569
|
},
|
|
1606
|
-
"Light/color.background.
|
|
1570
|
+
"Light/color.background.success.subtler": {
|
|
1607
1571
|
"attributes": {
|
|
1608
1572
|
"group": "paint",
|
|
1609
1573
|
"state": "active",
|
|
1610
|
-
"introduced": "
|
|
1611
|
-
"description": "Use for
|
|
1574
|
+
"introduced": "8.1.0",
|
|
1575
|
+
"description": "Use for backgrounds of success lozenges and badges to ensure accessibility and desired visual appearance."
|
|
1612
1576
|
},
|
|
1613
|
-
"value": "#
|
|
1577
|
+
"value": "#D3F1A7"
|
|
1614
1578
|
},
|
|
1615
|
-
"Light/color.background.
|
|
1579
|
+
"Light/color.background.success.subtler.hovered": {
|
|
1616
1580
|
"attributes": {
|
|
1617
1581
|
"group": "paint",
|
|
1618
1582
|
"state": "active",
|
|
1619
|
-
"introduced": "1.
|
|
1620
|
-
"description": "Hovered state of color.background.
|
|
1583
|
+
"introduced": "8.1.0",
|
|
1584
|
+
"description": "Hovered state of color.background.success.subtler"
|
|
1621
1585
|
},
|
|
1622
|
-
"value": "#
|
|
1586
|
+
"value": "#BDE97C"
|
|
1623
1587
|
},
|
|
1624
|
-
"Light/color.background.
|
|
1588
|
+
"Light/color.background.success.subtler.pressed": {
|
|
1625
1589
|
"attributes": {
|
|
1626
1590
|
"group": "paint",
|
|
1627
1591
|
"state": "active",
|
|
1628
|
-
"introduced": "1.
|
|
1629
|
-
"description": "Pressed state of color.background.
|
|
1592
|
+
"introduced": "8.1.0",
|
|
1593
|
+
"description": "Pressed state of color.background.success.subtler"
|
|
1630
1594
|
},
|
|
1631
|
-
"value": "#
|
|
1595
|
+
"value": "#B3DF72"
|
|
1632
1596
|
},
|
|
1633
|
-
"Light/color.background.
|
|
1597
|
+
"Light/color.background.success.subtle": {
|
|
1634
1598
|
"attributes": {
|
|
1635
1599
|
"group": "paint",
|
|
1636
1600
|
"state": "active",
|
|
1637
|
-
"introduced": "
|
|
1638
|
-
"description": "
|
|
1601
|
+
"introduced": "13.2.0",
|
|
1602
|
+
"description": "Background colour for non-interactive elements communicating success (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.success.bold or color.background.success.subtler for interactive states."
|
|
1639
1603
|
},
|
|
1640
|
-
"value": "#
|
|
1604
|
+
"value": "#B3DF72"
|
|
1641
1605
|
},
|
|
1642
|
-
"Light/color.background.
|
|
1606
|
+
"Light/color.background.success.bold": {
|
|
1643
1607
|
"attributes": {
|
|
1644
1608
|
"group": "paint",
|
|
1645
1609
|
"state": "active",
|
|
1646
|
-
"introduced": "
|
|
1647
|
-
"description": "
|
|
1610
|
+
"introduced": "0.6.0",
|
|
1611
|
+
"description": "A vibrant background option for communicating a favorable outcome, such as in checked toggles."
|
|
1648
1612
|
},
|
|
1649
|
-
"value": "#
|
|
1613
|
+
"value": "#5B7F24"
|
|
1650
1614
|
},
|
|
1651
|
-
"Light/color.background.
|
|
1615
|
+
"Light/color.background.success.bold.hovered": {
|
|
1652
1616
|
"attributes": {
|
|
1653
1617
|
"group": "paint",
|
|
1654
1618
|
"state": "active",
|
|
1655
|
-
"introduced": "
|
|
1656
|
-
"description": "
|
|
1619
|
+
"introduced": "0.6.0",
|
|
1620
|
+
"description": "Hovered state of color.background.success.bold"
|
|
1657
1621
|
},
|
|
1658
|
-
"value": "#
|
|
1622
|
+
"value": "#4C6B1F"
|
|
1659
1623
|
},
|
|
1660
|
-
"Light/color.background.
|
|
1624
|
+
"Light/color.background.success.bold.pressed": {
|
|
1661
1625
|
"attributes": {
|
|
1662
1626
|
"group": "paint",
|
|
1663
1627
|
"state": "active",
|
|
1664
|
-
"introduced": "0.
|
|
1665
|
-
"description": "
|
|
1628
|
+
"introduced": "0.6.0",
|
|
1629
|
+
"description": "Pressed state of color.background.success.bold"
|
|
1666
1630
|
},
|
|
1667
|
-
"value": "#
|
|
1631
|
+
"value": "#3F5224"
|
|
1668
1632
|
},
|
|
1669
|
-
"Light/color.background.
|
|
1633
|
+
"Light/color.background.discovery": {
|
|
1670
1634
|
"attributes": {
|
|
1671
1635
|
"group": "paint",
|
|
1672
1636
|
"state": "active",
|
|
1673
|
-
"introduced": "
|
|
1674
|
-
"description": "
|
|
1637
|
+
"introduced": "0.6.0",
|
|
1638
|
+
"description": "Use for backgrounds communicating change or something new, such as in discovery section messages."
|
|
1675
1639
|
},
|
|
1676
|
-
"value": "#
|
|
1640
|
+
"value": "#F8EEFE"
|
|
1677
1641
|
},
|
|
1678
|
-
"Light/color.background.
|
|
1642
|
+
"Light/color.background.discovery.hovered": {
|
|
1679
1643
|
"attributes": {
|
|
1680
1644
|
"group": "paint",
|
|
1681
1645
|
"state": "active",
|
|
1682
|
-
"introduced": "
|
|
1683
|
-
"description": "
|
|
1646
|
+
"introduced": "0.6.0",
|
|
1647
|
+
"description": "Hover state for color.background.discovery"
|
|
1684
1648
|
},
|
|
1685
|
-
"value": "#
|
|
1649
|
+
"value": "#EED7FC"
|
|
1686
1650
|
},
|
|
1687
|
-
"Light/color.background.
|
|
1651
|
+
"Light/color.background.discovery.pressed": {
|
|
1688
1652
|
"attributes": {
|
|
1689
1653
|
"group": "paint",
|
|
1690
1654
|
"state": "active",
|
|
1691
|
-
"introduced": "0.
|
|
1692
|
-
"description": "
|
|
1655
|
+
"introduced": "0.6.0",
|
|
1656
|
+
"description": "Pressed state for color.background.discovery"
|
|
1693
1657
|
},
|
|
1694
|
-
"value": "#
|
|
1658
|
+
"value": "#E3BDFA"
|
|
1695
1659
|
},
|
|
1696
|
-
"Light/color.background.
|
|
1660
|
+
"Light/color.background.discovery.subtler": {
|
|
1697
1661
|
"attributes": {
|
|
1698
1662
|
"group": "paint",
|
|
1699
1663
|
"state": "active",
|
|
1700
|
-
"introduced": "1.
|
|
1701
|
-
"description": "
|
|
1664
|
+
"introduced": "8.1.0",
|
|
1665
|
+
"description": "Use for backgrounds of discovery lozenges and badges to ensure accessibility and desired visual appearance."
|
|
1702
1666
|
},
|
|
1703
1667
|
"value": "#EED7FC"
|
|
1704
1668
|
},
|
|
1705
|
-
"Light/color.background.
|
|
1669
|
+
"Light/color.background.discovery.subtler.hovered": {
|
|
1706
1670
|
"attributes": {
|
|
1707
1671
|
"group": "paint",
|
|
1708
1672
|
"state": "active",
|
|
1709
|
-
"introduced": "1.
|
|
1710
|
-
"description": "
|
|
1673
|
+
"introduced": "8.1.0",
|
|
1674
|
+
"description": "Hovered state of color.background.discovery.subtler"
|
|
1711
1675
|
},
|
|
1712
1676
|
"value": "#E3BDFA"
|
|
1713
1677
|
},
|
|
1714
|
-
"Light/color.background.
|
|
1678
|
+
"Light/color.background.discovery.subtler.pressed": {
|
|
1715
1679
|
"attributes": {
|
|
1716
1680
|
"group": "paint",
|
|
1717
1681
|
"state": "active",
|
|
1718
|
-
"introduced": "
|
|
1719
|
-
"description": "
|
|
1682
|
+
"introduced": "8.1.0",
|
|
1683
|
+
"description": "Pressed state of color.background.discovery.subtler"
|
|
1720
1684
|
},
|
|
1721
|
-
"value": "#
|
|
1685
|
+
"value": "#D8A0F7"
|
|
1722
1686
|
},
|
|
1723
|
-
"Light/color.background.
|
|
1687
|
+
"Light/color.background.discovery.subtle": {
|
|
1724
1688
|
"attributes": {
|
|
1725
1689
|
"group": "paint",
|
|
1726
1690
|
"state": "active",
|
|
1727
|
-
"introduced": "
|
|
1728
|
-
"description": "
|
|
1691
|
+
"introduced": "13.2.0",
|
|
1692
|
+
"description": "Background colour for non-interactive elements communicating discovery (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.discovery.bold or color.background.discovery.subtler for interactive states."
|
|
1729
1693
|
},
|
|
1730
|
-
"value": "#
|
|
1694
|
+
"value": "#D8A0F7"
|
|
1731
1695
|
},
|
|
1732
|
-
"Light/color.background.
|
|
1696
|
+
"Light/color.background.discovery.bold": {
|
|
1733
1697
|
"attributes": {
|
|
1734
1698
|
"group": "paint",
|
|
1735
1699
|
"state": "active",
|
|
1736
|
-
"introduced": "
|
|
1737
|
-
"description": "
|
|
1700
|
+
"introduced": "0.6.0",
|
|
1701
|
+
"description": "A vibrant background option communicating change or something new, such as in onboarding spotlights."
|
|
1738
1702
|
},
|
|
1739
|
-
"value": "#
|
|
1703
|
+
"value": "#964AC0"
|
|
1740
1704
|
},
|
|
1741
|
-
"Light/color.background.
|
|
1705
|
+
"Light/color.background.discovery.bold.hovered": {
|
|
1742
1706
|
"attributes": {
|
|
1743
1707
|
"group": "paint",
|
|
1744
1708
|
"state": "active",
|
|
1745
|
-
"introduced": "0.
|
|
1746
|
-
"description": "
|
|
1709
|
+
"introduced": "0.6.0",
|
|
1710
|
+
"description": "Hovered state of color.background.discovery.bold"
|
|
1747
1711
|
},
|
|
1748
|
-
"value": "#
|
|
1712
|
+
"value": "#803FA5"
|
|
1749
1713
|
},
|
|
1750
|
-
"Light/color.background.
|
|
1714
|
+
"Light/color.background.discovery.bold.pressed": {
|
|
1751
1715
|
"attributes": {
|
|
1752
1716
|
"group": "paint",
|
|
1753
1717
|
"state": "active",
|
|
1754
|
-
"introduced": "
|
|
1755
|
-
"description": "
|
|
1718
|
+
"introduced": "0.6.0",
|
|
1719
|
+
"description": "Pressed state of color.background.discovery.bold"
|
|
1756
1720
|
},
|
|
1757
|
-
"value": "#
|
|
1721
|
+
"value": "#673286"
|
|
1758
1722
|
},
|
|
1759
|
-
"Light/color.background.
|
|
1723
|
+
"Light/color.background.information": {
|
|
1760
1724
|
"attributes": {
|
|
1761
1725
|
"group": "paint",
|
|
1762
1726
|
"state": "active",
|
|
1763
|
-
"introduced": "
|
|
1764
|
-
"description": "
|
|
1727
|
+
"introduced": "0.6.0",
|
|
1728
|
+
"description": "Use for backgrounds communicating information or something in-progress, such as in information section messages."
|
|
1765
1729
|
},
|
|
1766
|
-
"value": "#
|
|
1730
|
+
"value": "#E9F2FE"
|
|
1767
1731
|
},
|
|
1768
|
-
"Light/color.background.
|
|
1732
|
+
"Light/color.background.information.hovered": {
|
|
1769
1733
|
"attributes": {
|
|
1770
1734
|
"group": "paint",
|
|
1771
1735
|
"state": "active",
|
|
1772
|
-
"introduced": "0.
|
|
1773
|
-
"description": "
|
|
1736
|
+
"introduced": "0.6.0",
|
|
1737
|
+
"description": "Hovered state of color.background.information"
|
|
1774
1738
|
},
|
|
1775
|
-
"value": "#
|
|
1739
|
+
"value": "#CFE1FD"
|
|
1776
1740
|
},
|
|
1777
|
-
"Light/color.background.
|
|
1741
|
+
"Light/color.background.information.pressed": {
|
|
1778
1742
|
"attributes": {
|
|
1779
1743
|
"group": "paint",
|
|
1780
1744
|
"state": "active",
|
|
1781
|
-
"introduced": "
|
|
1782
|
-
"description": "
|
|
1745
|
+
"introduced": "0.6.0",
|
|
1746
|
+
"description": "Pressed state of color.background.information"
|
|
1783
1747
|
},
|
|
1784
|
-
"value": "#
|
|
1748
|
+
"value": "#ADCBFB"
|
|
1785
1749
|
},
|
|
1786
|
-
"Light/color.background.
|
|
1750
|
+
"Light/color.background.information.subtler": {
|
|
1787
1751
|
"attributes": {
|
|
1788
1752
|
"group": "paint",
|
|
1789
1753
|
"state": "active",
|
|
1790
|
-
"introduced": "1.
|
|
1791
|
-
"description": "
|
|
1754
|
+
"introduced": "8.1.0",
|
|
1755
|
+
"description": "Use for backgrounds of information lozenges and badges to ensure accessibility and desired visual appearance."
|
|
1792
1756
|
},
|
|
1793
|
-
"value": "#
|
|
1757
|
+
"value": "#CFE1FD"
|
|
1794
1758
|
},
|
|
1795
|
-
"Light/color.background.
|
|
1759
|
+
"Light/color.background.information.subtler.hovered": {
|
|
1796
1760
|
"attributes": {
|
|
1797
1761
|
"group": "paint",
|
|
1798
1762
|
"state": "active",
|
|
1799
|
-
"introduced": "
|
|
1800
|
-
"description": "
|
|
1763
|
+
"introduced": "8.1.0",
|
|
1764
|
+
"description": "Hovered state of color.background.information.subtler"
|
|
1801
1765
|
},
|
|
1802
|
-
"value": "#
|
|
1766
|
+
"value": "#ADCBFB"
|
|
1803
1767
|
},
|
|
1804
|
-
"Light/color.background.
|
|
1768
|
+
"Light/color.background.information.subtler.pressed": {
|
|
1805
1769
|
"attributes": {
|
|
1806
1770
|
"group": "paint",
|
|
1807
1771
|
"state": "active",
|
|
1808
|
-
"introduced": "1.
|
|
1809
|
-
"description": "
|
|
1772
|
+
"introduced": "8.1.0",
|
|
1773
|
+
"description": "Pressed state of color.background.information.subtler"
|
|
1810
1774
|
},
|
|
1811
|
-
"value": "#
|
|
1775
|
+
"value": "#8FB8F6"
|
|
1812
1776
|
},
|
|
1813
|
-
"Light/color.background.
|
|
1777
|
+
"Light/color.background.information.subtle": {
|
|
1814
1778
|
"attributes": {
|
|
1815
1779
|
"group": "paint",
|
|
1816
1780
|
"state": "active",
|
|
1817
|
-
"introduced": "
|
|
1818
|
-
"description": "
|
|
1781
|
+
"introduced": "13.2.0",
|
|
1782
|
+
"description": "Background colour for non-interactive elements communicating information (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.information.bold or color.background.information.subtler for interactive states."
|
|
1819
1783
|
},
|
|
1820
|
-
"value": "#
|
|
1784
|
+
"value": "#8FB8F6"
|
|
1821
1785
|
},
|
|
1822
|
-
"Light/color.background.
|
|
1786
|
+
"Light/color.background.information.bold": {
|
|
1823
1787
|
"attributes": {
|
|
1824
1788
|
"group": "paint",
|
|
1825
1789
|
"state": "active",
|
|
1826
|
-
"introduced": "0.
|
|
1827
|
-
"description": "
|
|
1790
|
+
"introduced": "0.6.0",
|
|
1791
|
+
"description": "A vibrant background option for communicating information or something in-progress."
|
|
1828
1792
|
},
|
|
1829
|
-
"value": "#
|
|
1793
|
+
"value": "#1868DB"
|
|
1830
1794
|
},
|
|
1831
|
-
"Light/color.background.
|
|
1795
|
+
"Light/color.background.information.bold.hovered": {
|
|
1832
1796
|
"attributes": {
|
|
1833
1797
|
"group": "paint",
|
|
1834
1798
|
"state": "active",
|
|
1835
|
-
"introduced": "
|
|
1836
|
-
"description": "Hovered state of color.background.
|
|
1799
|
+
"introduced": "0.6.0",
|
|
1800
|
+
"description": "Hovered state of color.background.information.bold"
|
|
1837
1801
|
},
|
|
1838
|
-
"value": "#
|
|
1802
|
+
"value": "#1558BC"
|
|
1839
1803
|
},
|
|
1840
|
-
"Light/color.background.
|
|
1804
|
+
"Light/color.background.information.bold.pressed": {
|
|
1841
1805
|
"attributes": {
|
|
1842
1806
|
"group": "paint",
|
|
1843
1807
|
"state": "active",
|
|
1844
|
-
"introduced": "
|
|
1845
|
-
"description": "Pressed state of color.background.
|
|
1808
|
+
"introduced": "0.6.0",
|
|
1809
|
+
"description": "Pressed state of color.background.information.bold"
|
|
1846
1810
|
},
|
|
1847
|
-
"value": "#
|
|
1811
|
+
"value": "#144794"
|
|
1848
1812
|
},
|
|
1849
|
-
"Light/color.
|
|
1813
|
+
"Light/color.border": {
|
|
1850
1814
|
"attributes": {
|
|
1851
1815
|
"group": "paint",
|
|
1852
1816
|
"state": "active",
|
|
1853
|
-
"introduced": "0.
|
|
1854
|
-
"description": "Use
|
|
1817
|
+
"introduced": "0.6.0",
|
|
1818
|
+
"description": "Use to visually group or separate UI elements, such as flat cards or side panel dividers."
|
|
1855
1819
|
},
|
|
1856
|
-
"value": "#
|
|
1820
|
+
"value": "#0B120E24"
|
|
1857
1821
|
},
|
|
1858
|
-
"Light/color.
|
|
1822
|
+
"Light/color.border.accent.lime": {
|
|
1859
1823
|
"attributes": {
|
|
1860
1824
|
"group": "paint",
|
|
1861
1825
|
"state": "active",
|
|
1862
|
-
"introduced": "1.
|
|
1863
|
-
"description": "
|
|
1826
|
+
"introduced": "1.6.0",
|
|
1827
|
+
"description": "Use for lime borders on non-bold backgrounds when there is no meaning tied to the color."
|
|
1864
1828
|
},
|
|
1865
|
-
"value": "#
|
|
1829
|
+
"value": "#6A9A23"
|
|
1866
1830
|
},
|
|
1867
|
-
"Light/color.
|
|
1831
|
+
"Light/color.border.accent.lime.subtle": {
|
|
1868
1832
|
"attributes": {
|
|
1869
1833
|
"group": "paint",
|
|
1870
1834
|
"state": "active",
|
|
1871
|
-
"introduced": "
|
|
1872
|
-
"description": "
|
|
1835
|
+
"introduced": "13.2.0",
|
|
1836
|
+
"description": "Use for decorative lime borders that do not need to meet 3:1 contrast requirements."
|
|
1873
1837
|
},
|
|
1874
|
-
"value": "#
|
|
1838
|
+
"value": "#B3DF72"
|
|
1875
1839
|
},
|
|
1876
|
-
"Light/color.
|
|
1840
|
+
"Light/color.border.accent.red": {
|
|
1877
1841
|
"attributes": {
|
|
1878
1842
|
"group": "paint",
|
|
1879
1843
|
"state": "active",
|
|
1880
|
-
"introduced": "0.
|
|
1881
|
-
"description": "Use for
|
|
1844
|
+
"introduced": "0.6.0",
|
|
1845
|
+
"description": "Use for red borders on non-bold backgrounds when there is no meaning tied to the color."
|
|
1882
1846
|
},
|
|
1883
|
-
"value": "#
|
|
1847
|
+
"value": "#E2483D"
|
|
1884
1848
|
},
|
|
1885
|
-
"Light/color.
|
|
1849
|
+
"Light/color.border.accent.red.subtle": {
|
|
1886
1850
|
"attributes": {
|
|
1887
1851
|
"group": "paint",
|
|
1888
1852
|
"state": "active",
|
|
1889
|
-
"introduced": "
|
|
1890
|
-
"description": "
|
|
1853
|
+
"introduced": "13.2.0",
|
|
1854
|
+
"description": "Use for decorative red borders that do not need to meet 3:1 contrast requirements."
|
|
1891
1855
|
},
|
|
1892
|
-
"value": "#
|
|
1856
|
+
"value": "#FD9891"
|
|
1893
1857
|
},
|
|
1894
|
-
"Light/color.
|
|
1858
|
+
"Light/color.border.accent.orange": {
|
|
1895
1859
|
"attributes": {
|
|
1896
1860
|
"group": "paint",
|
|
1897
1861
|
"state": "active",
|
|
1898
|
-
"introduced": "
|
|
1899
|
-
"description": "
|
|
1862
|
+
"introduced": "0.6.0",
|
|
1863
|
+
"description": "Use for orange borders on non-bold backgrounds when there is no meaning tied to the color."
|
|
1900
1864
|
},
|
|
1901
|
-
"value": "#
|
|
1865
|
+
"value": "#E06C00"
|
|
1902
1866
|
},
|
|
1903
|
-
"Light/color.
|
|
1867
|
+
"Light/color.border.accent.orange.subtle": {
|
|
1904
1868
|
"attributes": {
|
|
1905
1869
|
"group": "paint",
|
|
1906
1870
|
"state": "active",
|
|
1907
|
-
"introduced": "
|
|
1908
|
-
"description": "Use for
|
|
1871
|
+
"introduced": "13.2.0",
|
|
1872
|
+
"description": "Use for decorative orange borders that do not need to meet 3:1 contrast requirements."
|
|
1909
1873
|
},
|
|
1910
|
-
"value": "#
|
|
1874
|
+
"value": "#FBC828"
|
|
1911
1875
|
},
|
|
1912
|
-
"Light/color.
|
|
1876
|
+
"Light/color.border.accent.yellow": {
|
|
1913
1877
|
"attributes": {
|
|
1914
1878
|
"group": "paint",
|
|
1915
1879
|
"state": "active",
|
|
1916
|
-
"introduced": "
|
|
1917
|
-
"description": "
|
|
1880
|
+
"introduced": "0.6.0",
|
|
1881
|
+
"description": "Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color."
|
|
1918
1882
|
},
|
|
1919
|
-
"value": "#
|
|
1883
|
+
"value": "#B38600"
|
|
1920
1884
|
},
|
|
1921
|
-
"Light/color.
|
|
1885
|
+
"Light/color.border.accent.yellow.subtle": {
|
|
1922
1886
|
"attributes": {
|
|
1923
1887
|
"group": "paint",
|
|
1924
1888
|
"state": "active",
|
|
1925
|
-
"introduced": "
|
|
1926
|
-
"description": "
|
|
1889
|
+
"introduced": "13.2.0",
|
|
1890
|
+
"description": "Use for decorative yellow borders that do not need to meet 3:1 contrast requirements."
|
|
1927
1891
|
},
|
|
1928
|
-
"value": "#
|
|
1892
|
+
"value": "#EED12B"
|
|
1929
1893
|
},
|
|
1930
|
-
"Light/color.
|
|
1894
|
+
"Light/color.border.accent.green": {
|
|
1931
1895
|
"attributes": {
|
|
1932
1896
|
"group": "paint",
|
|
1933
1897
|
"state": "active",
|
|
1934
|
-
"introduced": "0.
|
|
1935
|
-
"description": "Use for
|
|
1898
|
+
"introduced": "0.6.0",
|
|
1899
|
+
"description": "Use for green borders on non-bold backgrounds when there is no meaning tied to the color."
|
|
1936
1900
|
},
|
|
1937
|
-
"value": "#
|
|
1901
|
+
"value": "#22A06B"
|
|
1938
1902
|
},
|
|
1939
|
-
"Light/color.
|
|
1903
|
+
"Light/color.border.accent.green.subtle": {
|
|
1940
1904
|
"attributes": {
|
|
1941
1905
|
"group": "paint",
|
|
1942
1906
|
"state": "active",
|
|
1943
|
-
"introduced": "
|
|
1944
|
-
"description": "
|
|
1907
|
+
"introduced": "13.2.0",
|
|
1908
|
+
"description": "Use for decorative green borders that do not need to meet 3:1 contrast requirements."
|
|
1945
1909
|
},
|
|
1946
|
-
"value": "#
|
|
1910
|
+
"value": "#7EE2B8"
|
|
1947
1911
|
},
|
|
1948
|
-
"Light/color.
|
|
1912
|
+
"Light/color.border.accent.teal": {
|
|
1949
1913
|
"attributes": {
|
|
1950
1914
|
"group": "paint",
|
|
1951
1915
|
"state": "active",
|
|
1952
|
-
"introduced": "
|
|
1953
|
-
"description": "
|
|
1916
|
+
"introduced": "0.6.0",
|
|
1917
|
+
"description": "Use for teal borders on non-bold backgrounds when there is no meaning tied to the color."
|
|
1954
1918
|
},
|
|
1955
|
-
"value": "#
|
|
1919
|
+
"value": "#2898BD"
|
|
1956
1920
|
},
|
|
1957
|
-
"Light/color.
|
|
1921
|
+
"Light/color.border.accent.teal.subtle": {
|
|
1958
1922
|
"attributes": {
|
|
1959
1923
|
"group": "paint",
|
|
1960
1924
|
"state": "active",
|
|
1961
|
-
"introduced": "
|
|
1962
|
-
"description": "Use for
|
|
1925
|
+
"introduced": "13.2.0",
|
|
1926
|
+
"description": "Use for decorative teal borders that do not need to meet 3:1 contrast requirements."
|
|
1963
1927
|
},
|
|
1964
|
-
"value": "#
|
|
1928
|
+
"value": "#9DD9EE"
|
|
1965
1929
|
},
|
|
1966
|
-
"Light/color.
|
|
1930
|
+
"Light/color.border.accent.blue": {
|
|
1967
1931
|
"attributes": {
|
|
1968
1932
|
"group": "paint",
|
|
1969
1933
|
"state": "active",
|
|
1970
|
-
"introduced": "
|
|
1971
|
-
"description": "
|
|
1934
|
+
"introduced": "0.6.0",
|
|
1935
|
+
"description": "Use for blue borders on non-bold backgrounds when there is no meaning tied to the color."
|
|
1972
1936
|
},
|
|
1973
|
-
"value": "#
|
|
1937
|
+
"value": "#357DE8"
|
|
1974
1938
|
},
|
|
1975
|
-
"Light/color.
|
|
1939
|
+
"Light/color.border.accent.blue.subtle": {
|
|
1976
1940
|
"attributes": {
|
|
1977
1941
|
"group": "paint",
|
|
1978
1942
|
"state": "active",
|
|
1979
|
-
"introduced": "
|
|
1980
|
-
"description": "
|
|
1943
|
+
"introduced": "13.2.0",
|
|
1944
|
+
"description": "Use for decorative blue borders that do not need to meet 3:1 contrast requirements."
|
|
1981
1945
|
},
|
|
1982
|
-
"value": "#
|
|
1946
|
+
"value": "#8FB8F6"
|
|
1983
1947
|
},
|
|
1984
|
-
"Light/color.
|
|
1948
|
+
"Light/color.border.accent.purple": {
|
|
1985
1949
|
"attributes": {
|
|
1986
1950
|
"group": "paint",
|
|
1987
1951
|
"state": "active",
|
|
1988
|
-
"introduced": "0.
|
|
1989
|
-
"description": "Use for
|
|
1952
|
+
"introduced": "0.6.0",
|
|
1953
|
+
"description": "Use for purple borders on non-bold backgrounds when there is no meaning tied to the color."
|
|
1990
1954
|
},
|
|
1991
|
-
"value": "#
|
|
1955
|
+
"value": "#AF59E1"
|
|
1992
1956
|
},
|
|
1993
|
-
"Light/color.
|
|
1957
|
+
"Light/color.border.accent.purple.subtle": {
|
|
1994
1958
|
"attributes": {
|
|
1995
1959
|
"group": "paint",
|
|
1996
1960
|
"state": "active",
|
|
1997
|
-
"introduced": "
|
|
1998
|
-
"description": "
|
|
1961
|
+
"introduced": "13.2.0",
|
|
1962
|
+
"description": "Use for decorative purple borders that do not need to meet 3:1 contrast requirements."
|
|
1999
1963
|
},
|
|
2000
|
-
"value": "#
|
|
1964
|
+
"value": "#D8A0F7"
|
|
2001
1965
|
},
|
|
2002
|
-
"Light/color.
|
|
1966
|
+
"Light/color.border.accent.magenta": {
|
|
2003
1967
|
"attributes": {
|
|
2004
1968
|
"group": "paint",
|
|
2005
1969
|
"state": "active",
|
|
2006
|
-
"introduced": "
|
|
2007
|
-
"description": "
|
|
1970
|
+
"introduced": "0.6.0",
|
|
1971
|
+
"description": "Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color."
|
|
2008
1972
|
},
|
|
2009
|
-
"value": "#
|
|
1973
|
+
"value": "#CD519D"
|
|
2010
1974
|
},
|
|
2011
|
-
"Light/color.
|
|
1975
|
+
"Light/color.border.accent.magenta.subtle": {
|
|
2012
1976
|
"attributes": {
|
|
2013
1977
|
"group": "paint",
|
|
2014
1978
|
"state": "active",
|
|
2015
|
-
"introduced": "
|
|
2016
|
-
"description": "Use for
|
|
1979
|
+
"introduced": "13.2.0",
|
|
1980
|
+
"description": "Use for decorative magenta borders that do not need to meet 3:1 contrast requirements."
|
|
2017
1981
|
},
|
|
2018
|
-
"value": "#
|
|
1982
|
+
"value": "#F797D2"
|
|
2019
1983
|
},
|
|
2020
|
-
"Light/color.
|
|
1984
|
+
"Light/color.border.accent.gray": {
|
|
2021
1985
|
"attributes": {
|
|
2022
1986
|
"group": "paint",
|
|
2023
1987
|
"state": "active",
|
|
2024
|
-
"introduced": "0.
|
|
2025
|
-
"description": "Use for
|
|
1988
|
+
"introduced": "0.10.5",
|
|
1989
|
+
"description": "Use for borders on non-bold gray accent backgrounds."
|
|
2026
1990
|
},
|
|
2027
|
-
"value": "#
|
|
1991
|
+
"value": "#7D818A"
|
|
2028
1992
|
},
|
|
2029
|
-
"Light/color.
|
|
1993
|
+
"Light/color.border.accent.gray.subtle": {
|
|
2030
1994
|
"attributes": {
|
|
2031
1995
|
"group": "paint",
|
|
2032
1996
|
"state": "active",
|
|
2033
|
-
"introduced": "
|
|
2034
|
-
"description": "
|
|
1997
|
+
"introduced": "13.2.0",
|
|
1998
|
+
"description": "Use for decorative gray borders that do not need to meet 3:1 contrast requirements."
|
|
2035
1999
|
},
|
|
2036
|
-
"value": "#
|
|
2000
|
+
"value": "#B7B9BE"
|
|
2037
2001
|
},
|
|
2038
|
-
"Light/color.
|
|
2002
|
+
"Light/color.border.disabled": {
|
|
2039
2003
|
"attributes": {
|
|
2040
2004
|
"group": "paint",
|
|
2041
2005
|
"state": "active",
|
|
2042
2006
|
"introduced": "0.6.0",
|
|
2043
|
-
"description": "
|
|
2007
|
+
"description": "Use for borders of elements in a disabled state."
|
|
2044
2008
|
},
|
|
2045
|
-
"value": "#
|
|
2009
|
+
"value": "#0515240F"
|
|
2046
2010
|
},
|
|
2047
|
-
"Light/color.
|
|
2011
|
+
"Light/color.border.focused": {
|
|
2048
2012
|
"attributes": {
|
|
2049
2013
|
"group": "paint",
|
|
2050
2014
|
"state": "active",
|
|
2051
|
-
"introduced": "0.
|
|
2052
|
-
"description": "Use for
|
|
2015
|
+
"introduced": "0.6.0",
|
|
2016
|
+
"description": "Use for focus rings of elements in a focus state."
|
|
2053
2017
|
},
|
|
2054
|
-
"value": "#
|
|
2018
|
+
"value": "#4688EC"
|
|
2055
2019
|
},
|
|
2056
|
-
"Light/color.
|
|
2020
|
+
"Light/color.border.input": {
|
|
2057
2021
|
"attributes": {
|
|
2058
2022
|
"group": "paint",
|
|
2059
2023
|
"state": "active",
|
|
2060
|
-
"introduced": "0.
|
|
2061
|
-
"description": "Use for
|
|
2024
|
+
"introduced": "0.6.0",
|
|
2025
|
+
"description": "Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons."
|
|
2062
2026
|
},
|
|
2063
|
-
"value": "#
|
|
2027
|
+
"value": "#8C8F97"
|
|
2064
2028
|
},
|
|
2065
|
-
"Light/color.
|
|
2029
|
+
"Light/color.border.inverse": {
|
|
2066
2030
|
"attributes": {
|
|
2067
2031
|
"group": "paint",
|
|
2068
2032
|
"state": "active",
|
|
2069
|
-
"introduced": "0.
|
|
2070
|
-
"description": "Use for
|
|
2033
|
+
"introduced": "0.6.0",
|
|
2034
|
+
"description": "Use for borders on bold backgrounds."
|
|
2071
2035
|
},
|
|
2072
|
-
"value": "#
|
|
2036
|
+
"value": "#FFFFFF"
|
|
2073
2037
|
},
|
|
2074
|
-
"Light/color.
|
|
2038
|
+
"Light/color.border.selected": {
|
|
2075
2039
|
"attributes": {
|
|
2076
2040
|
"group": "paint",
|
|
2077
2041
|
"state": "active",
|
|
2078
|
-
"introduced": "0.6.
|
|
2079
|
-
"description": "
|
|
2042
|
+
"introduced": "0.6.2",
|
|
2043
|
+
"description": "Use for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items."
|
|
2080
2044
|
},
|
|
2081
|
-
"value": "#
|
|
2045
|
+
"value": "#1868DB"
|
|
2082
2046
|
},
|
|
2083
|
-
"Light/color.
|
|
2047
|
+
"Light/color.border.brand": {
|
|
2084
2048
|
"attributes": {
|
|
2085
2049
|
"group": "paint",
|
|
2086
2050
|
"state": "active",
|
|
2087
2051
|
"introduced": "0.6.0",
|
|
2088
|
-
"description": "
|
|
2052
|
+
"description": "Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons."
|
|
2089
2053
|
},
|
|
2090
|
-
"value": "#
|
|
2054
|
+
"value": "#1868DB"
|
|
2091
2055
|
},
|
|
2092
|
-
"Light/color.
|
|
2056
|
+
"Light/color.border.danger": {
|
|
2093
2057
|
"attributes": {
|
|
2094
2058
|
"group": "paint",
|
|
2095
2059
|
"state": "active",
|
|
2096
2060
|
"introduced": "0.6.0",
|
|
2097
|
-
"description": "
|
|
2061
|
+
"description": "Use for borders communicating critical information, such as the borders on invalid text fields."
|
|
2098
2062
|
},
|
|
2099
|
-
"value": "#
|
|
2063
|
+
"value": "#E2483D"
|
|
2100
2064
|
},
|
|
2101
|
-
"Light/color.
|
|
2065
|
+
"Light/color.border.danger.subtle": {
|
|
2102
2066
|
"attributes": {
|
|
2103
2067
|
"group": "paint",
|
|
2104
2068
|
"state": "active",
|
|
2105
|
-
"introduced": "
|
|
2106
|
-
"description": "Use for
|
|
2069
|
+
"introduced": "13.2.0",
|
|
2070
|
+
"description": "Use for decorative danger borders that do not need to meet 3:1 contrast requirements."
|
|
2107
2071
|
},
|
|
2108
|
-
"value": "#
|
|
2072
|
+
"value": "#FD9891"
|
|
2109
2073
|
},
|
|
2110
|
-
"Light/color.
|
|
2074
|
+
"Light/color.border.warning": {
|
|
2111
2075
|
"attributes": {
|
|
2112
2076
|
"group": "paint",
|
|
2113
2077
|
"state": "active",
|
|
2114
2078
|
"introduced": "0.6.0",
|
|
2115
|
-
"description": "
|
|
2079
|
+
"description": "Use for borders communicating caution."
|
|
2116
2080
|
},
|
|
2117
|
-
"value": "#
|
|
2081
|
+
"value": "#E06C00"
|
|
2118
2082
|
},
|
|
2119
|
-
"Light/color.
|
|
2083
|
+
"Light/color.border.warning.subtle": {
|
|
2120
2084
|
"attributes": {
|
|
2121
2085
|
"group": "paint",
|
|
2122
2086
|
"state": "active",
|
|
2123
|
-
"introduced": "
|
|
2124
|
-
"description": "
|
|
2087
|
+
"introduced": "13.2.0",
|
|
2088
|
+
"description": "Use for decorative warning borders that do not need to meet 3:1 contrast requirements."
|
|
2125
2089
|
},
|
|
2126
|
-
"value": "#
|
|
2090
|
+
"value": "#FBC828"
|
|
2127
2091
|
},
|
|
2128
|
-
"Light/color.
|
|
2092
|
+
"Light/color.border.success": {
|
|
2129
2093
|
"attributes": {
|
|
2130
2094
|
"group": "paint",
|
|
2131
2095
|
"state": "active",
|
|
2132
2096
|
"introduced": "0.6.0",
|
|
2133
|
-
"description": "
|
|
2097
|
+
"description": "Use for borders communicating a favorable outcome, such as the borders on validated text fields."
|
|
2134
2098
|
},
|
|
2135
|
-
"value": "#
|
|
2099
|
+
"value": "#6A9A23"
|
|
2136
2100
|
},
|
|
2137
|
-
"Light/color.
|
|
2101
|
+
"Light/color.border.success.subtle": {
|
|
2138
2102
|
"attributes": {
|
|
2139
2103
|
"group": "paint",
|
|
2140
2104
|
"state": "active",
|
|
2141
|
-
"introduced": "
|
|
2142
|
-
"description": "
|
|
2105
|
+
"introduced": "13.2.0",
|
|
2106
|
+
"description": "Use for decorative success borders that do not need to meet 3:1 contrast requirements."
|
|
2143
2107
|
},
|
|
2144
|
-
"value": "#
|
|
2108
|
+
"value": "#B3DF72"
|
|
2145
2109
|
},
|
|
2146
|
-
"Light/color.
|
|
2110
|
+
"Light/color.border.discovery": {
|
|
2147
2111
|
"attributes": {
|
|
2148
2112
|
"group": "paint",
|
|
2149
2113
|
"state": "active",
|
|
2150
2114
|
"introduced": "0.6.0",
|
|
2151
|
-
"description": "
|
|
2115
|
+
"description": "Use for borders communicating change or something new, such as the borders in onboarding spotlights."
|
|
2152
2116
|
},
|
|
2153
|
-
"value": "#
|
|
2117
|
+
"value": "#AF59E1"
|
|
2154
2118
|
},
|
|
2155
|
-
"Light/color.
|
|
2119
|
+
"Light/color.border.discovery.subtle": {
|
|
2156
2120
|
"attributes": {
|
|
2157
2121
|
"group": "paint",
|
|
2158
2122
|
"state": "active",
|
|
2159
|
-
"introduced": "
|
|
2160
|
-
"description": "Use for
|
|
2123
|
+
"introduced": "13.2.0",
|
|
2124
|
+
"description": "Use for decorative discovery borders that do not need to meet 3:1 contrast requirements."
|
|
2161
2125
|
},
|
|
2162
|
-
"value": "#
|
|
2126
|
+
"value": "#D8A0F7"
|
|
2163
2127
|
},
|
|
2164
|
-
"Light/color.
|
|
2128
|
+
"Light/color.border.information": {
|
|
2165
2129
|
"attributes": {
|
|
2166
2130
|
"group": "paint",
|
|
2167
2131
|
"state": "active",
|
|
2168
|
-
"introduced": "0.6.
|
|
2169
|
-
"description": "
|
|
2132
|
+
"introduced": "0.6.0",
|
|
2133
|
+
"description": "Use for borders communicating information or something in-progress."
|
|
2170
2134
|
},
|
|
2171
|
-
"value": "#
|
|
2135
|
+
"value": "#357DE8"
|
|
2172
2136
|
},
|
|
2173
|
-
"Light/color.
|
|
2137
|
+
"Light/color.border.information.subtle": {
|
|
2174
2138
|
"attributes": {
|
|
2175
2139
|
"group": "paint",
|
|
2176
2140
|
"state": "active",
|
|
2177
|
-
"introduced": "
|
|
2178
|
-
"description": "
|
|
2141
|
+
"introduced": "13.2.0",
|
|
2142
|
+
"description": "Use for decorative information borders that do not need to meet 3:1 contrast requirements."
|
|
2179
2143
|
},
|
|
2180
2144
|
"value": "#8FB8F6"
|
|
2181
2145
|
},
|
|
2182
|
-
"Light/color.
|
|
2146
|
+
"Light/color.border.bold": {
|
|
2183
2147
|
"attributes": {
|
|
2184
2148
|
"group": "paint",
|
|
2185
2149
|
"state": "active",
|
|
2186
|
-
"introduced": "0.
|
|
2187
|
-
"description": "
|
|
2150
|
+
"introduced": "0.10.8",
|
|
2151
|
+
"description": "A neutral border option that passes min 3:1 contrast ratios."
|
|
2188
2152
|
},
|
|
2189
|
-
"value": "#
|
|
2153
|
+
"value": "#7D818A"
|
|
2190
2154
|
},
|
|
2191
|
-
"Light/color.
|
|
2155
|
+
"Light/color.text": {
|
|
2192
2156
|
"attributes": {
|
|
2193
2157
|
"group": "paint",
|
|
2194
2158
|
"state": "active",
|
|
2195
|
-
"introduced": "0.6.
|
|
2196
|
-
"description": "
|
|
2159
|
+
"introduced": "0.6.0",
|
|
2160
|
+
"description": "Use for primary text, such as body copy, sentence case headers, and buttons."
|
|
2197
2161
|
},
|
|
2198
|
-
"value": "#
|
|
2162
|
+
"value": "#292A2E"
|
|
2199
2163
|
},
|
|
2200
|
-
"Light/color.
|
|
2164
|
+
"Light/color.text.accent.lime": {
|
|
2201
2165
|
"attributes": {
|
|
2202
2166
|
"group": "paint",
|
|
2203
2167
|
"state": "active",
|
|
2204
|
-
"introduced": "
|
|
2205
|
-
"description": "
|
|
2168
|
+
"introduced": "1.8.0",
|
|
2169
|
+
"description": "Use for lime text on subtlest and subtler lime accent backgrounds when there is no meaning tied to the color."
|
|
2206
2170
|
},
|
|
2207
|
-
"value": "#
|
|
2171
|
+
"value": "#4C6B1F"
|
|
2208
2172
|
},
|
|
2209
|
-
"Light/color.
|
|
2173
|
+
"Light/color.text.accent.lime.bolder": {
|
|
2210
2174
|
"attributes": {
|
|
2211
2175
|
"group": "paint",
|
|
2212
2176
|
"state": "active",
|
|
2213
|
-
"introduced": "1.
|
|
2214
|
-
"description": "Use for
|
|
2177
|
+
"introduced": "1.8.0",
|
|
2178
|
+
"description": "Use for lime text on subtle lime accent backgrounds when there is no meaning tied to the color."
|
|
2215
2179
|
},
|
|
2216
|
-
"value": "#
|
|
2180
|
+
"value": "#37471F"
|
|
2217
2181
|
},
|
|
2218
|
-
"Light/color.
|
|
2182
|
+
"Light/color.text.accent.red": {
|
|
2219
2183
|
"attributes": {
|
|
2220
2184
|
"group": "paint",
|
|
2221
2185
|
"state": "active",
|
|
2222
|
-
"introduced": "
|
|
2223
|
-
"description": "
|
|
2186
|
+
"introduced": "0.6.0",
|
|
2187
|
+
"description": "Use for red text on subtlest and subtler red accent backgrounds when there is no meaning tied to the color."
|
|
2224
2188
|
},
|
|
2225
|
-
"value": "#
|
|
2189
|
+
"value": "#AE2E24"
|
|
2226
2190
|
},
|
|
2227
|
-
"Light/color.
|
|
2191
|
+
"Light/color.text.accent.red.bolder": {
|
|
2228
2192
|
"attributes": {
|
|
2229
2193
|
"group": "paint",
|
|
2230
2194
|
"state": "active",
|
|
2231
|
-
"introduced": "
|
|
2232
|
-
"description": "
|
|
2195
|
+
"introduced": "0.7.0",
|
|
2196
|
+
"description": "Use for red text on subtle red accent backgrounds when there is no meaning tied to the color."
|
|
2233
2197
|
},
|
|
2234
|
-
"value": "#
|
|
2198
|
+
"value": "#5D1F1A"
|
|
2235
2199
|
},
|
|
2236
|
-
"Light/color.
|
|
2200
|
+
"Light/color.text.accent.orange": {
|
|
2237
2201
|
"attributes": {
|
|
2238
2202
|
"group": "paint",
|
|
2239
2203
|
"state": "active",
|
|
2240
2204
|
"introduced": "0.6.0",
|
|
2241
|
-
"description": "Use for
|
|
2205
|
+
"description": "Use for orange text on subtlest and subtler orange accent backgrounds when there is no meaning tied to the color."
|
|
2242
2206
|
},
|
|
2243
|
-
"value": "#
|
|
2207
|
+
"value": "#9E4C00"
|
|
2244
2208
|
},
|
|
2245
|
-
"Light/color.
|
|
2209
|
+
"Light/color.text.accent.orange.bolder": {
|
|
2246
2210
|
"attributes": {
|
|
2247
2211
|
"group": "paint",
|
|
2248
2212
|
"state": "active",
|
|
2249
|
-
"introduced": "0.
|
|
2250
|
-
"description": "
|
|
2213
|
+
"introduced": "0.7.0",
|
|
2214
|
+
"description": "Use for orange text on subtle orange accent backgrounds when there is no meaning tied to the color."
|
|
2251
2215
|
},
|
|
2252
|
-
"value": "#
|
|
2216
|
+
"value": "#693200"
|
|
2253
2217
|
},
|
|
2254
|
-
"Light/color.
|
|
2218
|
+
"Light/color.text.accent.yellow": {
|
|
2255
2219
|
"attributes": {
|
|
2256
2220
|
"group": "paint",
|
|
2257
2221
|
"state": "active",
|
|
2258
2222
|
"introduced": "0.6.0",
|
|
2259
|
-
"description": "
|
|
2223
|
+
"description": "Use for yellow text on subtlest and subtler yellow accent backgrounds when there is no meaning tied to the color."
|
|
2260
2224
|
},
|
|
2261
|
-
"value": "#
|
|
2225
|
+
"value": "#7F5F01"
|
|
2262
2226
|
},
|
|
2263
|
-
"Light/color.
|
|
2227
|
+
"Light/color.text.accent.yellow.bolder": {
|
|
2264
2228
|
"attributes": {
|
|
2265
2229
|
"group": "paint",
|
|
2266
2230
|
"state": "active",
|
|
2267
|
-
"introduced": "
|
|
2268
|
-
"description": "Use for
|
|
2231
|
+
"introduced": "0.7.0",
|
|
2232
|
+
"description": "Use for yellow text on subtle yellow accent backgrounds when there is no meaning tied to the color."
|
|
2269
2233
|
},
|
|
2270
|
-
"value": "#
|
|
2234
|
+
"value": "#533F04"
|
|
2271
2235
|
},
|
|
2272
|
-
"Light/color.
|
|
2236
|
+
"Light/color.text.accent.green": {
|
|
2273
2237
|
"attributes": {
|
|
2274
2238
|
"group": "paint",
|
|
2275
2239
|
"state": "active",
|
|
2276
|
-
"introduced": "
|
|
2277
|
-
"description": "
|
|
2240
|
+
"introduced": "0.6.0",
|
|
2241
|
+
"description": "Use for green text on subtlest and subtler green accent backgrounds when there is no meaning tied to the color."
|
|
2278
2242
|
},
|
|
2279
|
-
"value": "#
|
|
2243
|
+
"value": "#216E4E"
|
|
2280
2244
|
},
|
|
2281
|
-
"Light/color.
|
|
2245
|
+
"Light/color.text.accent.green.bolder": {
|
|
2282
2246
|
"attributes": {
|
|
2283
2247
|
"group": "paint",
|
|
2284
2248
|
"state": "active",
|
|
2285
|
-
"introduced": "
|
|
2286
|
-
"description": "
|
|
2249
|
+
"introduced": "0.7.0",
|
|
2250
|
+
"description": "Use for green text on subtle green accent backgrounds when there is no meaning tied to the color."
|
|
2287
2251
|
},
|
|
2288
|
-
"value": "#
|
|
2252
|
+
"value": "#164B35"
|
|
2289
2253
|
},
|
|
2290
|
-
"Light/color.
|
|
2254
|
+
"Light/color.text.accent.teal": {
|
|
2291
2255
|
"attributes": {
|
|
2292
2256
|
"group": "paint",
|
|
2293
2257
|
"state": "active",
|
|
2294
2258
|
"introduced": "0.6.0",
|
|
2295
|
-
"description": "Use for backgrounds
|
|
2259
|
+
"description": "Use for teal text on subtlest and subtler teal accent backgrounds when there is no meaning tied to the color."
|
|
2296
2260
|
},
|
|
2297
|
-
"value": "#
|
|
2261
|
+
"value": "#206A83"
|
|
2298
2262
|
},
|
|
2299
|
-
"Light/color.
|
|
2263
|
+
"Light/color.text.accent.teal.bolder": {
|
|
2300
2264
|
"attributes": {
|
|
2301
2265
|
"group": "paint",
|
|
2302
2266
|
"state": "active",
|
|
2303
|
-
"introduced": "0.
|
|
2304
|
-
"description": "
|
|
2267
|
+
"introduced": "0.7.0",
|
|
2268
|
+
"description": "Use for teal text on subtle teal accent backgrounds when there is no meaning tied to the color."
|
|
2305
2269
|
},
|
|
2306
|
-
"value": "#
|
|
2270
|
+
"value": "#164555"
|
|
2307
2271
|
},
|
|
2308
|
-
"Light/color.
|
|
2272
|
+
"Light/color.text.accent.blue": {
|
|
2309
2273
|
"attributes": {
|
|
2310
2274
|
"group": "paint",
|
|
2311
2275
|
"state": "active",
|
|
2312
2276
|
"introduced": "0.6.0",
|
|
2313
|
-
"description": "
|
|
2277
|
+
"description": "Use for blue text on subtlest and subtler blue accent backgrounds when there is no meaning tied to the color."
|
|
2314
2278
|
},
|
|
2315
|
-
"value": "#
|
|
2279
|
+
"value": "#1558BC"
|
|
2316
2280
|
},
|
|
2317
|
-
"Light/color.
|
|
2281
|
+
"Light/color.text.accent.blue.bolder": {
|
|
2318
2282
|
"attributes": {
|
|
2319
2283
|
"group": "paint",
|
|
2320
2284
|
"state": "active",
|
|
2321
|
-
"introduced": "
|
|
2322
|
-
"description": "Use for
|
|
2285
|
+
"introduced": "0.7.0",
|
|
2286
|
+
"description": "Use for blue text on subtle blue accent backgrounds when there is no meaning tied to the color."
|
|
2323
2287
|
},
|
|
2324
|
-
"value": "#
|
|
2288
|
+
"value": "#123263"
|
|
2325
2289
|
},
|
|
2326
|
-
"Light/color.
|
|
2290
|
+
"Light/color.text.accent.purple": {
|
|
2327
2291
|
"attributes": {
|
|
2328
2292
|
"group": "paint",
|
|
2329
2293
|
"state": "active",
|
|
2330
|
-
"introduced": "
|
|
2331
|
-
"description": "
|
|
2294
|
+
"introduced": "0.6.0",
|
|
2295
|
+
"description": "Use for purple text on subtlest and subtler purple accent backgrounds when there is no meaning tied to the color."
|
|
2332
2296
|
},
|
|
2333
|
-
"value": "#
|
|
2297
|
+
"value": "#803FA5"
|
|
2334
2298
|
},
|
|
2335
|
-
"Light/color.
|
|
2299
|
+
"Light/color.text.accent.purple.bolder": {
|
|
2336
2300
|
"attributes": {
|
|
2337
2301
|
"group": "paint",
|
|
2338
2302
|
"state": "active",
|
|
2339
|
-
"introduced": "
|
|
2340
|
-
"description": "
|
|
2303
|
+
"introduced": "0.7.0",
|
|
2304
|
+
"description": "Use for purple text on subtle purple accent backgrounds when there is no meaning tied to the color."
|
|
2341
2305
|
},
|
|
2342
|
-
"value": "#
|
|
2306
|
+
"value": "#48245D"
|
|
2343
2307
|
},
|
|
2344
|
-
"Light/color.
|
|
2308
|
+
"Light/color.text.accent.magenta": {
|
|
2345
2309
|
"attributes": {
|
|
2346
2310
|
"group": "paint",
|
|
2347
2311
|
"state": "active",
|
|
2348
|
-
"introduced": "
|
|
2349
|
-
"description": "
|
|
2312
|
+
"introduced": "0.6.0",
|
|
2313
|
+
"description": "Use for magenta text on subtlest and subtler magenta accent backgrounds when there is no meaning tied to the color."
|
|
2350
2314
|
},
|
|
2351
|
-
"value": "#
|
|
2315
|
+
"value": "#943D73"
|
|
2352
2316
|
},
|
|
2353
|
-
"Light/color.
|
|
2317
|
+
"Light/color.text.accent.magenta.bolder": {
|
|
2354
2318
|
"attributes": {
|
|
2355
2319
|
"group": "paint",
|
|
2356
2320
|
"state": "active",
|
|
2357
|
-
"introduced": "0.
|
|
2358
|
-
"description": "
|
|
2321
|
+
"introduced": "0.7.0",
|
|
2322
|
+
"description": "Use for magenta text on subtle magenta accent backgrounds when there is no meaning tied to the color."
|
|
2359
2323
|
},
|
|
2360
|
-
"value": "#
|
|
2324
|
+
"value": "#50253F"
|
|
2361
2325
|
},
|
|
2362
|
-
"Light/color.
|
|
2326
|
+
"Light/color.text.accent.gray": {
|
|
2363
2327
|
"attributes": {
|
|
2364
2328
|
"group": "paint",
|
|
2365
2329
|
"state": "active",
|
|
2366
|
-
"introduced": "0.
|
|
2367
|
-
"description": "
|
|
2330
|
+
"introduced": "0.10.5",
|
|
2331
|
+
"description": "Use for text on non-bold gray accent backgrounds, such as colored tags."
|
|
2368
2332
|
},
|
|
2369
|
-
"value": "#
|
|
2333
|
+
"value": "#505258"
|
|
2370
2334
|
},
|
|
2371
|
-
"Light/color.
|
|
2335
|
+
"Light/color.text.accent.gray.bolder": {
|
|
2372
2336
|
"attributes": {
|
|
2373
2337
|
"group": "paint",
|
|
2374
2338
|
"state": "active",
|
|
2375
|
-
"introduced": "0.
|
|
2376
|
-
"description": "
|
|
2339
|
+
"introduced": "0.10.5",
|
|
2340
|
+
"description": "Use for text and icons on gray subtle accent backgrounds."
|
|
2377
2341
|
},
|
|
2378
|
-
"value": "#
|
|
2342
|
+
"value": "#1E1F21"
|
|
2379
2343
|
},
|
|
2380
|
-
"Light/color.
|
|
2344
|
+
"Light/color.text.disabled": {
|
|
2381
2345
|
"attributes": {
|
|
2382
2346
|
"group": "paint",
|
|
2383
2347
|
"state": "active",
|
|
2384
|
-
"introduced": "0.
|
|
2385
|
-
"description": "Use for
|
|
2348
|
+
"introduced": "0.0.15",
|
|
2349
|
+
"description": "Use for text in a disabled state."
|
|
2386
2350
|
},
|
|
2387
|
-
"value": "#
|
|
2351
|
+
"value": "#080F214A"
|
|
2388
2352
|
},
|
|
2389
|
-
"Light/color.
|
|
2353
|
+
"Light/color.text.inverse": {
|
|
2390
2354
|
"attributes": {
|
|
2391
2355
|
"group": "paint",
|
|
2392
2356
|
"state": "active",
|
|
2393
2357
|
"introduced": "0.6.0",
|
|
2394
|
-
"description": "
|
|
2358
|
+
"description": "Use for text on bold backgrounds."
|
|
2395
2359
|
},
|
|
2396
|
-
"value": "#
|
|
2360
|
+
"value": "#FFFFFF"
|
|
2397
2361
|
},
|
|
2398
|
-
"Light/color.
|
|
2362
|
+
"Light/color.text.selected": {
|
|
2399
2363
|
"attributes": {
|
|
2400
2364
|
"group": "paint",
|
|
2401
2365
|
"state": "active",
|
|
2402
2366
|
"introduced": "0.6.0",
|
|
2403
|
-
"description": "
|
|
2367
|
+
"description": "Use for text in selected or opened states, such as tabs and dropdown buttons."
|
|
2404
2368
|
},
|
|
2405
|
-
"value": "#
|
|
2369
|
+
"value": "#1868DB"
|
|
2406
2370
|
},
|
|
2407
|
-
"Light/color.
|
|
2371
|
+
"Light/color.text.brand": {
|
|
2408
2372
|
"attributes": {
|
|
2409
2373
|
"group": "paint",
|
|
2410
2374
|
"state": "active",
|
|
2411
|
-
"introduced": "
|
|
2412
|
-
"description": "Use for
|
|
2375
|
+
"introduced": "0.6.0",
|
|
2376
|
+
"description": "Use for text that reinforces our brand."
|
|
2413
2377
|
},
|
|
2414
|
-
"value": "#
|
|
2378
|
+
"value": "#1868DB"
|
|
2415
2379
|
},
|
|
2416
|
-
"Light/color.
|
|
2380
|
+
"Light/color.text.danger": {
|
|
2417
2381
|
"attributes": {
|
|
2418
2382
|
"group": "paint",
|
|
2419
2383
|
"state": "active",
|
|
2420
|
-
"introduced": "
|
|
2421
|
-
"description": "
|
|
2384
|
+
"introduced": "0.0.15",
|
|
2385
|
+
"description": "Use for critical text, such as input field error messaging."
|
|
2422
2386
|
},
|
|
2423
|
-
"value": "#
|
|
2387
|
+
"value": "#AE2E24"
|
|
2424
2388
|
},
|
|
2425
|
-
"Light/color.
|
|
2389
|
+
"Light/color.text.danger.bolder": {
|
|
2426
2390
|
"attributes": {
|
|
2427
2391
|
"group": "paint",
|
|
2428
2392
|
"state": "active",
|
|
2429
2393
|
"introduced": "8.1.0",
|
|
2430
|
-
"description": "
|
|
2394
|
+
"description": "Use for text on top of danger semantic labels to ensure accessibility and desired visual appearance."
|
|
2431
2395
|
},
|
|
2432
|
-
"value": "#
|
|
2396
|
+
"value": "#5D1F1A"
|
|
2433
2397
|
},
|
|
2434
|
-
"Light/color.
|
|
2398
|
+
"Light/color.text.warning": {
|
|
2435
2399
|
"attributes": {
|
|
2436
2400
|
"group": "paint",
|
|
2437
2401
|
"state": "active",
|
|
2438
|
-
"introduced": "
|
|
2439
|
-
"description": "
|
|
2402
|
+
"introduced": "0.0.15",
|
|
2403
|
+
"description": "Use for text to emphasize caution, such as in moved lozenges."
|
|
2440
2404
|
},
|
|
2441
|
-
"value": "#
|
|
2405
|
+
"value": "#9E4C00"
|
|
2442
2406
|
},
|
|
2443
|
-
"Light/color.
|
|
2407
|
+
"Light/color.text.warning.inverse": {
|
|
2444
2408
|
"attributes": {
|
|
2445
2409
|
"group": "paint",
|
|
2446
2410
|
"state": "active",
|
|
2447
2411
|
"introduced": "0.6.0",
|
|
2448
|
-
"description": "
|
|
2412
|
+
"description": "Use for text when on bold warning backgrounds."
|
|
2449
2413
|
},
|
|
2450
|
-
"value": "#
|
|
2414
|
+
"value": "#292A2E"
|
|
2451
2415
|
},
|
|
2452
|
-
"Light/color.
|
|
2416
|
+
"Light/color.text.warning.bolder": {
|
|
2453
2417
|
"attributes": {
|
|
2454
2418
|
"group": "paint",
|
|
2455
2419
|
"state": "active",
|
|
2456
|
-
"introduced": "
|
|
2457
|
-
"description": "
|
|
2420
|
+
"introduced": "8.1.0",
|
|
2421
|
+
"description": "Use for text on top of warning semantic labels to ensure accessibility and desired visual appearance."
|
|
2458
2422
|
},
|
|
2459
|
-
"value": "#
|
|
2423
|
+
"value": "#693200"
|
|
2460
2424
|
},
|
|
2461
|
-
"Light/color.
|
|
2425
|
+
"Light/color.text.success": {
|
|
2462
2426
|
"attributes": {
|
|
2463
2427
|
"group": "paint",
|
|
2464
2428
|
"state": "active",
|
|
2465
|
-
"introduced": "0.
|
|
2466
|
-
"description": "
|
|
2429
|
+
"introduced": "0.0.15",
|
|
2430
|
+
"description": "Use for text to communicate a favorable outcome, such as input field success messaging."
|
|
2467
2431
|
},
|
|
2468
|
-
"value": "#
|
|
2432
|
+
"value": "#4C6B1F"
|
|
2469
2433
|
},
|
|
2470
|
-
"Light/color.
|
|
2434
|
+
"Light/color.text.success.bolder": {
|
|
2471
2435
|
"attributes": {
|
|
2472
2436
|
"group": "paint",
|
|
2473
2437
|
"state": "active",
|
|
2474
|
-
"introduced": "
|
|
2475
|
-
"description": "Use for
|
|
2438
|
+
"introduced": "8.1.0",
|
|
2439
|
+
"description": "Use for text on top of success semantic labels to ensure accessibility and desired visual appearance."
|
|
2476
2440
|
},
|
|
2477
|
-
"value": "#
|
|
2441
|
+
"value": "#37471F"
|
|
2478
2442
|
},
|
|
2479
|
-
"Light/color.
|
|
2443
|
+
"Light/color.text.discovery": {
|
|
2480
2444
|
"attributes": {
|
|
2481
2445
|
"group": "paint",
|
|
2482
2446
|
"state": "active",
|
|
2483
|
-
"introduced": "0.
|
|
2484
|
-
"description": "
|
|
2447
|
+
"introduced": "0.0.15",
|
|
2448
|
+
"description": "Use for text to emphasize change or something new, such as in new lozenges."
|
|
2485
2449
|
},
|
|
2486
|
-
"value": "#
|
|
2450
|
+
"value": "#803FA5"
|
|
2487
2451
|
},
|
|
2488
|
-
"Light/color.
|
|
2452
|
+
"Light/color.text.discovery.bolder": {
|
|
2489
2453
|
"attributes": {
|
|
2490
2454
|
"group": "paint",
|
|
2491
2455
|
"state": "active",
|
|
2492
|
-
"introduced": "
|
|
2493
|
-
"description": "
|
|
2456
|
+
"introduced": "8.1.0",
|
|
2457
|
+
"description": "Use for text on top of discovery semantic labels to ensure accessibility and desired visual appearance."
|
|
2494
2458
|
},
|
|
2495
|
-
"value": "#
|
|
2459
|
+
"value": "#48245D"
|
|
2496
2460
|
},
|
|
2497
|
-
"Light/color.
|
|
2461
|
+
"Light/color.text.information": {
|
|
2498
2462
|
"attributes": {
|
|
2499
2463
|
"group": "paint",
|
|
2500
2464
|
"state": "active",
|
|
2501
|
-
"introduced": "
|
|
2502
|
-
"description": "Use for
|
|
2465
|
+
"introduced": "0.6.0",
|
|
2466
|
+
"description": "Use for informative text or to communicate something is in progress, such as in-progress lozenges."
|
|
2503
2467
|
},
|
|
2504
|
-
"value": "#
|
|
2468
|
+
"value": "#1558BC"
|
|
2505
2469
|
},
|
|
2506
|
-
"Light/color.
|
|
2470
|
+
"Light/color.text.information.bolder": {
|
|
2507
2471
|
"attributes": {
|
|
2508
2472
|
"group": "paint",
|
|
2509
2473
|
"state": "active",
|
|
2510
2474
|
"introduced": "8.1.0",
|
|
2511
|
-
"description": "
|
|
2475
|
+
"description": "Use for text on top of information semantic labels to ensure accessibility and desired visual appearance."
|
|
2512
2476
|
},
|
|
2513
|
-
"value": "#
|
|
2477
|
+
"value": "#123263"
|
|
2514
2478
|
},
|
|
2515
|
-
"Light/color.
|
|
2479
|
+
"Light/color.text.subtlest": {
|
|
2516
2480
|
"attributes": {
|
|
2517
2481
|
"group": "paint",
|
|
2518
2482
|
"state": "active",
|
|
2519
|
-
"introduced": "
|
|
2520
|
-
"description": "
|
|
2483
|
+
"introduced": "0.6.0",
|
|
2484
|
+
"description": "Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text."
|
|
2521
2485
|
},
|
|
2522
|
-
"value": "#
|
|
2486
|
+
"value": "#6B6E76"
|
|
2523
2487
|
},
|
|
2524
|
-
"Light/color.
|
|
2488
|
+
"Light/color.text.subtle": {
|
|
2525
2489
|
"attributes": {
|
|
2526
2490
|
"group": "paint",
|
|
2527
2491
|
"state": "active",
|
|
2528
|
-
"introduced": "
|
|
2529
|
-
"description": "
|
|
2492
|
+
"introduced": "0.6.0",
|
|
2493
|
+
"description": "Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings."
|
|
2530
2494
|
},
|
|
2531
|
-
"value": "#
|
|
2495
|
+
"value": "#505258"
|
|
2532
2496
|
},
|
|
2533
|
-
"Light/color.
|
|
2497
|
+
"Light/color.icon": {
|
|
2534
2498
|
"attributes": {
|
|
2535
2499
|
"group": "paint",
|
|
2536
2500
|
"state": "active",
|
|
2537
2501
|
"introduced": "0.6.0",
|
|
2538
|
-
"description": "
|
|
2502
|
+
"description": "Use for icon-only buttons, or icons paired with color.text"
|
|
2539
2503
|
},
|
|
2540
|
-
"value": "#
|
|
2504
|
+
"value": "#292A2E"
|
|
2541
2505
|
},
|
|
2542
|
-
"Light/color.
|
|
2506
|
+
"Light/color.icon.accent.lime": {
|
|
2507
|
+
"attributes": {
|
|
2508
|
+
"group": "paint",
|
|
2509
|
+
"state": "active",
|
|
2510
|
+
"introduced": "1.6.0",
|
|
2511
|
+
"description": "Use for lime icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."
|
|
2512
|
+
},
|
|
2513
|
+
"value": "#6A9A23"
|
|
2514
|
+
},
|
|
2515
|
+
"Light/color.icon.accent.red": {
|
|
2543
2516
|
"attributes": {
|
|
2544
2517
|
"group": "paint",
|
|
2545
2518
|
"state": "active",
|
|
2546
2519
|
"introduced": "0.6.0",
|
|
2547
|
-
"description": "
|
|
2520
|
+
"description": "Use for red icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."
|
|
2548
2521
|
},
|
|
2549
|
-
"value": "#
|
|
2522
|
+
"value": "#C9372C"
|
|
2550
2523
|
},
|
|
2551
|
-
"Light/color.
|
|
2524
|
+
"Light/color.icon.accent.orange": {
|
|
2552
2525
|
"attributes": {
|
|
2553
2526
|
"group": "paint",
|
|
2554
2527
|
"state": "active",
|
|
2555
2528
|
"introduced": "0.6.0",
|
|
2556
|
-
"description": "
|
|
2529
|
+
"description": "Use for orange icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."
|
|
2557
2530
|
},
|
|
2558
|
-
"value": "#
|
|
2531
|
+
"value": "#E06C00"
|
|
2559
2532
|
},
|
|
2560
|
-
"Light/color.
|
|
2533
|
+
"Light/color.icon.accent.yellow": {
|
|
2561
2534
|
"attributes": {
|
|
2562
2535
|
"group": "paint",
|
|
2563
2536
|
"state": "active",
|
|
2564
2537
|
"introduced": "0.6.0",
|
|
2565
|
-
"description": "Use for backgrounds
|
|
2538
|
+
"description": "Use for yellow icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."
|
|
2566
2539
|
},
|
|
2567
|
-
"value": "#
|
|
2540
|
+
"value": "#B38600"
|
|
2568
2541
|
},
|
|
2569
|
-
"Light/color.
|
|
2542
|
+
"Light/color.icon.accent.green": {
|
|
2570
2543
|
"attributes": {
|
|
2571
2544
|
"group": "paint",
|
|
2572
2545
|
"state": "active",
|
|
2573
2546
|
"introduced": "0.6.0",
|
|
2574
|
-
"description": "
|
|
2547
|
+
"description": "Use for green icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."
|
|
2575
2548
|
},
|
|
2576
|
-
"value": "#
|
|
2549
|
+
"value": "#22A06B"
|
|
2577
2550
|
},
|
|
2578
|
-
"Light/color.
|
|
2551
|
+
"Light/color.icon.accent.teal": {
|
|
2579
2552
|
"attributes": {
|
|
2580
2553
|
"group": "paint",
|
|
2581
2554
|
"state": "active",
|
|
2582
2555
|
"introduced": "0.6.0",
|
|
2583
|
-
"description": "
|
|
2556
|
+
"description": "Use for teal icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."
|
|
2584
2557
|
},
|
|
2585
|
-
"value": "#
|
|
2558
|
+
"value": "#2898BD"
|
|
2586
2559
|
},
|
|
2587
|
-
"Light/color.
|
|
2560
|
+
"Light/color.icon.accent.blue": {
|
|
2588
2561
|
"attributes": {
|
|
2589
2562
|
"group": "paint",
|
|
2590
2563
|
"state": "active",
|
|
2591
|
-
"introduced": "
|
|
2592
|
-
"description": "Use for backgrounds
|
|
2564
|
+
"introduced": "0.6.0",
|
|
2565
|
+
"description": "Use for blue icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."
|
|
2593
2566
|
},
|
|
2594
|
-
"value": "#
|
|
2567
|
+
"value": "#357DE8"
|
|
2595
2568
|
},
|
|
2596
|
-
"Light/color.
|
|
2569
|
+
"Light/color.icon.accent.purple": {
|
|
2597
2570
|
"attributes": {
|
|
2598
2571
|
"group": "paint",
|
|
2599
2572
|
"state": "active",
|
|
2600
|
-
"introduced": "
|
|
2601
|
-
"description": "
|
|
2573
|
+
"introduced": "0.6.0",
|
|
2574
|
+
"description": "Use for purple icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."
|
|
2602
2575
|
},
|
|
2603
|
-
"value": "#
|
|
2576
|
+
"value": "#AF59E1"
|
|
2604
2577
|
},
|
|
2605
|
-
"Light/color.
|
|
2578
|
+
"Light/color.icon.accent.magenta": {
|
|
2606
2579
|
"attributes": {
|
|
2607
2580
|
"group": "paint",
|
|
2608
2581
|
"state": "active",
|
|
2609
|
-
"introduced": "
|
|
2610
|
-
"description": "
|
|
2582
|
+
"introduced": "0.6.0",
|
|
2583
|
+
"description": "Use for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."
|
|
2611
2584
|
},
|
|
2612
|
-
"value": "#
|
|
2585
|
+
"value": "#CD519D"
|
|
2613
2586
|
},
|
|
2614
|
-
"Light/color.
|
|
2587
|
+
"Light/color.icon.accent.gray": {
|
|
2615
2588
|
"attributes": {
|
|
2616
2589
|
"group": "paint",
|
|
2617
2590
|
"state": "active",
|
|
2618
|
-
"introduced": "
|
|
2619
|
-
"description": "
|
|
2591
|
+
"introduced": "0.10.5",
|
|
2592
|
+
"description": "Use for icons on non-bold gray accent backgrounds, such as file type icons."
|
|
2620
2593
|
},
|
|
2621
|
-
"value": "#
|
|
2594
|
+
"value": "#7D818A"
|
|
2622
2595
|
},
|
|
2623
|
-
"Light/color.
|
|
2596
|
+
"Light/color.icon.disabled": {
|
|
2624
2597
|
"attributes": {
|
|
2625
2598
|
"group": "paint",
|
|
2626
2599
|
"state": "active",
|
|
2627
2600
|
"introduced": "0.6.0",
|
|
2628
|
-
"description": "
|
|
2601
|
+
"description": "Use for icons in a disabled state."
|
|
2629
2602
|
},
|
|
2630
|
-
"value": "#
|
|
2603
|
+
"value": "#080F214A"
|
|
2631
2604
|
},
|
|
2632
|
-
"Light/color.
|
|
2605
|
+
"Light/color.icon.inverse": {
|
|
2633
2606
|
"attributes": {
|
|
2634
2607
|
"group": "paint",
|
|
2635
2608
|
"state": "active",
|
|
2636
2609
|
"introduced": "0.6.0",
|
|
2637
|
-
"description": "
|
|
2610
|
+
"description": "Use for icons on bold backgrounds."
|
|
2638
2611
|
},
|
|
2639
|
-
"value": "#
|
|
2612
|
+
"value": "#FFFFFF"
|
|
2640
2613
|
},
|
|
2641
|
-
"Light/color.
|
|
2614
|
+
"Light/color.icon.selected": {
|
|
2642
2615
|
"attributes": {
|
|
2643
2616
|
"group": "paint",
|
|
2644
2617
|
"state": "active",
|
|
2645
|
-
"introduced": "0.6.
|
|
2646
|
-
"description": "
|
|
2618
|
+
"introduced": "0.6.2",
|
|
2619
|
+
"description": "Use for icons in selected or opened states, such as those used in dropdown buttons."
|
|
2647
2620
|
},
|
|
2648
|
-
"value": "#
|
|
2621
|
+
"value": "#1868DB"
|
|
2649
2622
|
},
|
|
2650
|
-
"Light/color.
|
|
2623
|
+
"Light/color.icon.brand": {
|
|
2651
2624
|
"attributes": {
|
|
2652
2625
|
"group": "paint",
|
|
2653
2626
|
"state": "active",
|
|
2654
2627
|
"introduced": "0.6.0",
|
|
2655
|
-
"description": "Use for
|
|
2628
|
+
"description": "Use for icons that reinforce our brand."
|
|
2656
2629
|
},
|
|
2657
|
-
"value": "#
|
|
2630
|
+
"value": "#1868DB"
|
|
2658
2631
|
},
|
|
2659
|
-
"Light/color.
|
|
2632
|
+
"Light/color.icon.danger": {
|
|
2660
2633
|
"attributes": {
|
|
2661
2634
|
"group": "paint",
|
|
2662
2635
|
"state": "active",
|
|
2663
2636
|
"introduced": "0.6.0",
|
|
2664
|
-
"description": "
|
|
2637
|
+
"description": "Use for icons communicating critical information, such as those used in error handing."
|
|
2665
2638
|
},
|
|
2666
|
-
"value": "#
|
|
2639
|
+
"value": "#C9372C"
|
|
2667
2640
|
},
|
|
2668
|
-
"Light/color.
|
|
2641
|
+
"Light/color.icon.warning": {
|
|
2669
2642
|
"attributes": {
|
|
2670
2643
|
"group": "paint",
|
|
2671
2644
|
"state": "active",
|
|
2672
2645
|
"introduced": "0.6.0",
|
|
2673
|
-
"description": "
|
|
2646
|
+
"description": "Use for icons communicating caution, such as those used in warning section messages."
|
|
2674
2647
|
},
|
|
2675
|
-
"value": "#
|
|
2648
|
+
"value": "#E06C00"
|
|
2676
2649
|
},
|
|
2677
|
-
"Light/color.
|
|
2650
|
+
"Light/color.icon.warning.inverse": {
|
|
2678
2651
|
"attributes": {
|
|
2679
2652
|
"group": "paint",
|
|
2680
2653
|
"state": "active",
|
|
2681
|
-
"introduced": "
|
|
2682
|
-
"description": "Use for
|
|
2654
|
+
"introduced": "0.6.0",
|
|
2655
|
+
"description": "Use for icons when on bold warning backgrounds."
|
|
2683
2656
|
},
|
|
2684
|
-
"value": "#
|
|
2657
|
+
"value": "#292A2E"
|
|
2685
2658
|
},
|
|
2686
|
-
"Light/color.
|
|
2659
|
+
"Light/color.icon.success": {
|
|
2687
2660
|
"attributes": {
|
|
2688
2661
|
"group": "paint",
|
|
2689
2662
|
"state": "active",
|
|
2690
|
-
"introduced": "
|
|
2691
|
-
"description": "
|
|
2663
|
+
"introduced": "0.6.0",
|
|
2664
|
+
"description": "Use for icons communicating a favorable outcome, such as those used in success section messaged."
|
|
2692
2665
|
},
|
|
2693
|
-
"value": "#
|
|
2666
|
+
"value": "#6A9A23"
|
|
2694
2667
|
},
|
|
2695
|
-
"Light/color.
|
|
2668
|
+
"Light/color.icon.discovery": {
|
|
2696
2669
|
"attributes": {
|
|
2697
2670
|
"group": "paint",
|
|
2698
2671
|
"state": "active",
|
|
2699
|
-
"introduced": "
|
|
2700
|
-
"description": "
|
|
2672
|
+
"introduced": "0.6.0",
|
|
2673
|
+
"description": "Use for icons communicating change or something new, such as discovery section messages."
|
|
2701
2674
|
},
|
|
2702
|
-
"value": "#
|
|
2675
|
+
"value": "#AF59E1"
|
|
2703
2676
|
},
|
|
2704
|
-
"Light/color.
|
|
2677
|
+
"Light/color.icon.information": {
|
|
2705
2678
|
"attributes": {
|
|
2706
2679
|
"group": "paint",
|
|
2707
2680
|
"state": "active",
|
|
2708
|
-
"introduced": "
|
|
2709
|
-
"description": "
|
|
2681
|
+
"introduced": "0.6.0",
|
|
2682
|
+
"description": "Use for icons communicating information or something in-progress, such as information section messages."
|
|
2710
2683
|
},
|
|
2711
|
-
"value": "#
|
|
2684
|
+
"value": "#357DE8"
|
|
2712
2685
|
},
|
|
2713
|
-
"Light/color.
|
|
2686
|
+
"Light/color.icon.subtlest": {
|
|
2714
2687
|
"attributes": {
|
|
2715
2688
|
"group": "paint",
|
|
2716
2689
|
"state": "active",
|
|
2717
|
-
"introduced": "
|
|
2718
|
-
"description": "
|
|
2690
|
+
"introduced": "1.54.0",
|
|
2691
|
+
"description": "Use for icons paired with color.text.subtlest"
|
|
2719
2692
|
},
|
|
2720
|
-
"value": "#
|
|
2693
|
+
"value": "#6B6E76"
|
|
2721
2694
|
},
|
|
2722
|
-
"Light/color.
|
|
2695
|
+
"Light/color.icon.subtle": {
|
|
2723
2696
|
"attributes": {
|
|
2724
2697
|
"group": "paint",
|
|
2725
2698
|
"state": "active",
|
|
2726
2699
|
"introduced": "0.6.0",
|
|
2727
|
-
"description": "
|
|
2700
|
+
"description": "Use for icons paired with color.text.subtle"
|
|
2728
2701
|
},
|
|
2729
|
-
"value": "#
|
|
2702
|
+
"value": "#505258"
|
|
2730
2703
|
},
|
|
2731
|
-
"Light/color.
|
|
2704
|
+
"Light/color.link": {
|
|
2732
2705
|
"attributes": {
|
|
2733
2706
|
"group": "paint",
|
|
2734
2707
|
"state": "active",
|
|
2735
2708
|
"introduced": "0.6.0",
|
|
2736
|
-
"description": "
|
|
2709
|
+
"description": "Use for links in a default or hovered state. Add an underline for hovered states."
|
|
2737
2710
|
},
|
|
2738
|
-
"value": "#
|
|
2711
|
+
"value": "#1868DB"
|
|
2739
2712
|
},
|
|
2740
|
-
"Light/color.
|
|
2713
|
+
"Light/color.link.pressed": {
|
|
2741
2714
|
"attributes": {
|
|
2742
2715
|
"group": "paint",
|
|
2743
2716
|
"state": "active",
|
|
2744
|
-
"introduced": "0.0
|
|
2745
|
-
"description": "Use for
|
|
2717
|
+
"introduced": "0.6.0",
|
|
2718
|
+
"description": "Use for links in a pressed state."
|
|
2746
2719
|
},
|
|
2747
|
-
"value": "#
|
|
2720
|
+
"value": "#1558BC"
|
|
2748
2721
|
},
|
|
2749
|
-
"Light/color.
|
|
2722
|
+
"Light/color.link.visited": {
|
|
2750
2723
|
"attributes": {
|
|
2751
2724
|
"group": "paint",
|
|
2752
2725
|
"state": "active",
|
|
2753
|
-
"introduced": "
|
|
2754
|
-
"description": "Use
|
|
2726
|
+
"introduced": "1.23.0",
|
|
2727
|
+
"description": "Use for visited links."
|
|
2755
2728
|
},
|
|
2756
|
-
"value": "#
|
|
2729
|
+
"value": "#803FA5"
|
|
2757
2730
|
},
|
|
2758
|
-
"Light/color.
|
|
2731
|
+
"Light/color.link.visited.pressed": {
|
|
2759
2732
|
"attributes": {
|
|
2760
2733
|
"group": "paint",
|
|
2761
2734
|
"state": "active",
|
|
2762
|
-
"introduced": "
|
|
2763
|
-
"description": "Use
|
|
2735
|
+
"introduced": "1.43.0",
|
|
2736
|
+
"description": "Use for visited links in a pressed state."
|
|
2764
2737
|
},
|
|
2765
|
-
"value": "#
|
|
2738
|
+
"value": "#48245D"
|
|
2766
2739
|
},
|
|
2767
2740
|
"Light/color.interaction.hovered": {
|
|
2768
2741
|
"attributes": {
|
|
@@ -2800,6 +2773,33 @@
|
|
|
2800
2773
|
},
|
|
2801
2774
|
"value": "#17171708"
|
|
2802
2775
|
},
|
|
2776
|
+
"Light/color.blanket": {
|
|
2777
|
+
"attributes": {
|
|
2778
|
+
"group": "paint",
|
|
2779
|
+
"state": "active",
|
|
2780
|
+
"introduced": "0.0.15",
|
|
2781
|
+
"description": "Use for the screen overlay that appears with modal dialogs"
|
|
2782
|
+
},
|
|
2783
|
+
"value": "#050C1F75"
|
|
2784
|
+
},
|
|
2785
|
+
"Light/color.blanket.selected": {
|
|
2786
|
+
"attributes": {
|
|
2787
|
+
"group": "paint",
|
|
2788
|
+
"state": "active",
|
|
2789
|
+
"introduced": "0.6.0",
|
|
2790
|
+
"description": "Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements"
|
|
2791
|
+
},
|
|
2792
|
+
"value": "#388BFF14"
|
|
2793
|
+
},
|
|
2794
|
+
"Light/color.blanket.danger": {
|
|
2795
|
+
"attributes": {
|
|
2796
|
+
"group": "paint",
|
|
2797
|
+
"state": "active",
|
|
2798
|
+
"introduced": "0.6.0",
|
|
2799
|
+
"description": "Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements"
|
|
2800
|
+
},
|
|
2801
|
+
"value": "#EF5C4814"
|
|
2802
|
+
},
|
|
2803
2803
|
"Light/color.chart.categorical.1": {
|
|
2804
2804
|
"attributes": {
|
|
2805
2805
|
"group": "paint",
|
|
@@ -3700,6 +3700,105 @@
|
|
|
3700
3700
|
},
|
|
3701
3701
|
"value": "#123263"
|
|
3702
3702
|
},
|
|
3703
|
+
"Light/color.rovo.background.brand.bold": {
|
|
3704
|
+
"attributes": {
|
|
3705
|
+
"group": "paint",
|
|
3706
|
+
"state": "active",
|
|
3707
|
+
"introduced": "8.2.0",
|
|
3708
|
+
"description": "Background color for Rovo brand emphasis."
|
|
3709
|
+
},
|
|
3710
|
+
"value": "#000000"
|
|
3711
|
+
},
|
|
3712
|
+
"Light/color.rovo.background.brand.bold.hovered": {
|
|
3713
|
+
"attributes": {
|
|
3714
|
+
"group": "paint",
|
|
3715
|
+
"state": "active",
|
|
3716
|
+
"introduced": "8.2.0",
|
|
3717
|
+
"description": "Hovered state of color.rovo.background.brand.bold."
|
|
3718
|
+
},
|
|
3719
|
+
"value": "#1E1F21"
|
|
3720
|
+
},
|
|
3721
|
+
"Light/color.rovo.background.brand.bold.pressed": {
|
|
3722
|
+
"attributes": {
|
|
3723
|
+
"group": "paint",
|
|
3724
|
+
"state": "active",
|
|
3725
|
+
"introduced": "8.2.0",
|
|
3726
|
+
"description": "Pressed state of color.rovo.background.brand.bold."
|
|
3727
|
+
},
|
|
3728
|
+
"value": "#292A2E"
|
|
3729
|
+
},
|
|
3730
|
+
"Light/color.rovo.border.lime": {
|
|
3731
|
+
"attributes": {
|
|
3732
|
+
"group": "paint",
|
|
3733
|
+
"state": "active",
|
|
3734
|
+
"introduced": "13.1.1",
|
|
3735
|
+
"description": "Use for Rovo lime borders."
|
|
3736
|
+
},
|
|
3737
|
+
"value": "#6A9A23"
|
|
3738
|
+
},
|
|
3739
|
+
"Light/color.rovo.border.saffron": {
|
|
3740
|
+
"attributes": {
|
|
3741
|
+
"group": "paint",
|
|
3742
|
+
"state": "active",
|
|
3743
|
+
"introduced": "13.1.1",
|
|
3744
|
+
"description": "Use for Rovo saffron borders."
|
|
3745
|
+
},
|
|
3746
|
+
"value": "#FCA700"
|
|
3747
|
+
},
|
|
3748
|
+
"Light/color.rovo.border.blue": {
|
|
3749
|
+
"attributes": {
|
|
3750
|
+
"group": "paint",
|
|
3751
|
+
"state": "active",
|
|
3752
|
+
"introduced": "13.1.1",
|
|
3753
|
+
"description": "Use for Rovo blue borders."
|
|
3754
|
+
},
|
|
3755
|
+
"value": "#1868DB"
|
|
3756
|
+
},
|
|
3757
|
+
"Light/color.rovo.border.purple": {
|
|
3758
|
+
"attributes": {
|
|
3759
|
+
"group": "paint",
|
|
3760
|
+
"state": "active",
|
|
3761
|
+
"introduced": "13.1.1",
|
|
3762
|
+
"description": "Use for Rovo purple borders."
|
|
3763
|
+
},
|
|
3764
|
+
"value": "#AF59E1"
|
|
3765
|
+
},
|
|
3766
|
+
"Light/color.rovo.icon.lime": {
|
|
3767
|
+
"attributes": {
|
|
3768
|
+
"group": "paint",
|
|
3769
|
+
"state": "active",
|
|
3770
|
+
"introduced": "13.1.1",
|
|
3771
|
+
"description": "Use for Rovo lime icons."
|
|
3772
|
+
},
|
|
3773
|
+
"value": "#6A9A23"
|
|
3774
|
+
},
|
|
3775
|
+
"Light/color.rovo.icon.saffron": {
|
|
3776
|
+
"attributes": {
|
|
3777
|
+
"group": "paint",
|
|
3778
|
+
"state": "active",
|
|
3779
|
+
"introduced": "13.1.1",
|
|
3780
|
+
"description": "Use for Rovo saffron icons."
|
|
3781
|
+
},
|
|
3782
|
+
"value": "#FCA700"
|
|
3783
|
+
},
|
|
3784
|
+
"Light/color.rovo.icon.blue": {
|
|
3785
|
+
"attributes": {
|
|
3786
|
+
"group": "paint",
|
|
3787
|
+
"state": "active",
|
|
3788
|
+
"introduced": "13.1.1",
|
|
3789
|
+
"description": "Use for Rovo blue icons."
|
|
3790
|
+
},
|
|
3791
|
+
"value": "#1868DB"
|
|
3792
|
+
},
|
|
3793
|
+
"Light/color.rovo.icon.purple": {
|
|
3794
|
+
"attributes": {
|
|
3795
|
+
"group": "paint",
|
|
3796
|
+
"state": "active",
|
|
3797
|
+
"introduced": "13.1.1",
|
|
3798
|
+
"description": "Use for Rovo purple icons."
|
|
3799
|
+
},
|
|
3800
|
+
"value": "#AF59E1"
|
|
3801
|
+
},
|
|
3703
3802
|
"Light/elevation.surface": {
|
|
3704
3803
|
"attributes": {
|
|
3705
3804
|
"group": "paint",
|