@atlaskit/tokens 13.2.0 → 13.3.0
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 +9 -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 +3415 -3173
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +3183 -2941
- package/dist/cjs/artifacts/tokens-raw/atlassian-light-increased-contrast.js +3415 -3173
- package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +3183 -2941
- package/dist/cjs/entry-points/token-metadata.codegen.js +1751 -1652
- 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 +3415 -3173
- package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +3183 -2941
- package/dist/es2019/artifacts/tokens-raw/atlassian-light-increased-contrast.js +3415 -3173
- package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +3183 -2941
- package/dist/es2019/entry-points/token-metadata.codegen.js +1751 -1652
- 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 +3415 -3173
- package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +3183 -2941
- package/dist/esm/artifacts/tokens-raw/atlassian-light-increased-contrast.js +3415 -3173
- package/dist/esm/artifacts/tokens-raw/atlassian-light.js +3183 -2941
- package/dist/esm/entry-points/token-metadata.codegen.js +1751 -1652
- 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 +1301 -1202
- package/figma/atlassian-dark.json +1299 -1200
- package/figma/atlassian-light-increased-contrast.json +1301 -1202
- package/figma/atlassian-light.json +1304 -1205
- package/package.json +1 -1
|
@@ -1,2768 +1,2741 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "Dark",
|
|
3
3
|
"tokens": {
|
|
4
|
-
"Dark/color.
|
|
4
|
+
"Dark/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": "#28311B"
|
|
12
12
|
},
|
|
13
|
-
"Dark/color.
|
|
13
|
+
"Dark/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": "#37471F"
|
|
21
21
|
},
|
|
22
|
-
"Dark/color.
|
|
22
|
+
"Dark/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": "#3F5224"
|
|
30
30
|
},
|
|
31
|
-
"Dark/color.
|
|
31
|
+
"Dark/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": "#37471F"
|
|
39
39
|
},
|
|
40
|
-
"Dark/color.
|
|
40
|
+
"Dark/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": "#3F5224"
|
|
48
48
|
},
|
|
49
|
-
"Dark/color.
|
|
49
|
+
"Dark/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": "#4C6B1F"
|
|
57
57
|
},
|
|
58
|
-
"Dark/color.
|
|
58
|
+
"Dark/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": "#4C6B1F"
|
|
66
66
|
},
|
|
67
|
-
"Dark/color.
|
|
67
|
+
"Dark/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": "#3F5224"
|
|
75
75
|
},
|
|
76
|
-
"Dark/color.
|
|
76
|
+
"Dark/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": "#37471F"
|
|
84
84
|
},
|
|
85
|
-
"Dark/color.
|
|
85
|
+
"Dark/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": "#94C748"
|
|
93
93
|
},
|
|
94
|
-
"Dark/color.
|
|
94
|
+
"Dark/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": "#B3DF72"
|
|
102
102
|
},
|
|
103
|
-
"Dark/color.
|
|
103
|
+
"Dark/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": "#BDE97C"
|
|
111
111
|
},
|
|
112
|
-
"Dark/color.
|
|
112
|
+
"Dark/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": "#42221F"
|
|
120
120
|
},
|
|
121
|
-
"Dark/color.
|
|
121
|
+
"Dark/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": "#5D1F1A"
|
|
129
129
|
},
|
|
130
|
-
"Dark/color.
|
|
130
|
+
"Dark/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": "#872821"
|
|
138
138
|
},
|
|
139
|
-
"Dark/color.
|
|
139
|
+
"Dark/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": "#5D1F1A"
|
|
147
147
|
},
|
|
148
|
-
"Dark/color.
|
|
148
|
+
"Dark/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": "#872821"
|
|
156
156
|
},
|
|
157
|
-
"Dark/color.
|
|
157
|
+
"Dark/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": "#AE2E24"
|
|
165
165
|
},
|
|
166
|
-
"Dark/color.
|
|
166
|
+
"Dark/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": "#AE2E24"
|
|
174
174
|
},
|
|
175
|
-
"Dark/color.
|
|
175
|
+
"Dark/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": "#872821"
|
|
183
183
|
},
|
|
184
|
-
"Dark/color.
|
|
184
|
+
"Dark/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": "#5D1F1A"
|
|
192
192
|
},
|
|
193
|
-
"Dark/color.
|
|
193
|
+
"Dark/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": "#F87168"
|
|
201
201
|
},
|
|
202
|
-
"Dark/color.
|
|
202
|
+
"Dark/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": "#FD9891"
|
|
210
210
|
},
|
|
211
|
-
"Dark/color.
|
|
211
|
+
"Dark/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": "#FFB8B2"
|
|
219
219
|
},
|
|
220
|
-
"Dark/color.
|
|
220
|
+
"Dark/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": "#3A2C1F"
|
|
228
228
|
},
|
|
229
|
-
"Dark/color.
|
|
229
|
+
"Dark/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": "#693200"
|
|
237
237
|
},
|
|
238
|
-
"Dark/color.
|
|
238
|
+
"Dark/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": "#7A3B00"
|
|
246
246
|
},
|
|
247
|
-
"Dark/color.
|
|
247
|
+
"Dark/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": "#693200"
|
|
255
255
|
},
|
|
256
|
-
"Dark/color.
|
|
256
|
+
"Dark/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": "#7A3B00"
|
|
264
264
|
},
|
|
265
|
-
"Dark/color.
|
|
265
|
+
"Dark/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": "#9E4C00"
|
|
273
273
|
},
|
|
274
|
-
"Dark/color.
|
|
274
|
+
"Dark/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": "#9E4C00"
|
|
282
282
|
},
|
|
283
|
-
"Dark/color.
|
|
283
|
+
"Dark/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": "#7A3B00"
|
|
291
291
|
},
|
|
292
|
-
"Dark/color.
|
|
292
|
+
"Dark/color.background.accent.orange.subtle.pressed": {
|
|
293
293
|
"attributes": {
|
|
294
294
|
"group": "paint",
|
|
295
295
|
"state": "active",
|
|
296
|
-
"introduced": "
|
|
297
|
-
"description": "
|
|
296
|
+
"introduced": "1.19.0",
|
|
297
|
+
"description": "Pressed state of color.background.accent.orange.subtle."
|
|
298
298
|
},
|
|
299
|
-
"value": "#
|
|
299
|
+
"value": "#693200"
|
|
300
300
|
},
|
|
301
|
-
"Dark/color.
|
|
301
|
+
"Dark/color.background.accent.orange.bolder": {
|
|
302
302
|
"attributes": {
|
|
303
303
|
"group": "paint",
|
|
304
304
|
"state": "active",
|
|
305
|
-
"introduced": "
|
|
306
|
-
"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."
|
|
307
307
|
},
|
|
308
|
-
"value": "#
|
|
308
|
+
"value": "#FCA700"
|
|
309
309
|
},
|
|
310
|
-
"Dark/color.
|
|
310
|
+
"Dark/color.background.accent.orange.bolder.hovered": {
|
|
311
311
|
"attributes": {
|
|
312
312
|
"group": "paint",
|
|
313
313
|
"state": "active",
|
|
314
|
-
"introduced": "
|
|
315
|
-
"description": "
|
|
314
|
+
"introduced": "1.19.0",
|
|
315
|
+
"description": "Hovered state of color.background.accent.orange.bolder."
|
|
316
316
|
},
|
|
317
|
-
"value": "#
|
|
317
|
+
"value": "#FBC828"
|
|
318
318
|
},
|
|
319
|
-
"Dark/color.
|
|
319
|
+
"Dark/color.background.accent.orange.bolder.pressed": {
|
|
320
320
|
"attributes": {
|
|
321
321
|
"group": "paint",
|
|
322
322
|
"state": "active",
|
|
323
|
-
"introduced": "
|
|
324
|
-
"description": "
|
|
323
|
+
"introduced": "1.19.0",
|
|
324
|
+
"description": "Pressed state of color.background.accent.orange.bolder."
|
|
325
325
|
},
|
|
326
|
-
"value": "#
|
|
326
|
+
"value": "#FBD779"
|
|
327
327
|
},
|
|
328
|
-
"Dark/color.
|
|
328
|
+
"Dark/color.background.accent.yellow.subtlest": {
|
|
329
329
|
"attributes": {
|
|
330
330
|
"group": "paint",
|
|
331
331
|
"state": "active",
|
|
332
|
-
"introduced": "0.
|
|
333
|
-
"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."
|
|
334
334
|
},
|
|
335
|
-
"value": "#
|
|
335
|
+
"value": "#332E1B"
|
|
336
336
|
},
|
|
337
|
-
"Dark/color.
|
|
337
|
+
"Dark/color.background.accent.yellow.subtlest.hovered": {
|
|
338
338
|
"attributes": {
|
|
339
339
|
"group": "paint",
|
|
340
340
|
"state": "active",
|
|
341
|
-
"introduced": "
|
|
342
|
-
"description": "
|
|
341
|
+
"introduced": "1.19.0",
|
|
342
|
+
"description": "Hovered state of color.background.accent.yellow.subtlest."
|
|
343
343
|
},
|
|
344
|
-
"value": "#
|
|
344
|
+
"value": "#533F04"
|
|
345
345
|
},
|
|
346
|
-
"Dark/color.
|
|
346
|
+
"Dark/color.background.accent.yellow.subtlest.pressed": {
|
|
347
347
|
"attributes": {
|
|
348
348
|
"group": "paint",
|
|
349
349
|
"state": "active",
|
|
350
|
-
"introduced": "
|
|
351
|
-
"description": "
|
|
350
|
+
"introduced": "1.19.0",
|
|
351
|
+
"description": "Pressed state of color.background.accent.yellow.subtlest."
|
|
352
352
|
},
|
|
353
|
-
"value": "#
|
|
353
|
+
"value": "#614A05"
|
|
354
354
|
},
|
|
355
|
-
"Dark/color.
|
|
355
|
+
"Dark/color.background.accent.yellow.subtler": {
|
|
356
356
|
"attributes": {
|
|
357
357
|
"group": "paint",
|
|
358
358
|
"state": "active",
|
|
359
|
-
"introduced": "0.
|
|
360
|
-
"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."
|
|
361
361
|
},
|
|
362
|
-
"value": "#
|
|
362
|
+
"value": "#533F04"
|
|
363
363
|
},
|
|
364
|
-
"Dark/color.
|
|
364
|
+
"Dark/color.background.accent.yellow.subtler.hovered": {
|
|
365
365
|
"attributes": {
|
|
366
366
|
"group": "paint",
|
|
367
367
|
"state": "active",
|
|
368
|
-
"introduced": "1.
|
|
369
|
-
"description": "
|
|
368
|
+
"introduced": "1.19.0",
|
|
369
|
+
"description": "Hovered state of color.background.accent.yellow.subtler."
|
|
370
370
|
},
|
|
371
|
-
"value": "#
|
|
371
|
+
"value": "#614A05"
|
|
372
372
|
},
|
|
373
|
-
"Dark/color.
|
|
373
|
+
"Dark/color.background.accent.yellow.subtler.pressed": {
|
|
374
374
|
"attributes": {
|
|
375
375
|
"group": "paint",
|
|
376
376
|
"state": "active",
|
|
377
|
-
"introduced": "1.
|
|
378
|
-
"description": "
|
|
377
|
+
"introduced": "1.19.0",
|
|
378
|
+
"description": "Pressed state of color.background.accent.yellow.subtler."
|
|
379
379
|
},
|
|
380
|
-
"value": "#
|
|
380
|
+
"value": "#7F5F01"
|
|
381
381
|
},
|
|
382
|
-
"Dark/color.
|
|
382
|
+
"Dark/color.background.accent.yellow.subtle": {
|
|
383
383
|
"attributes": {
|
|
384
384
|
"group": "paint",
|
|
385
385
|
"state": "active",
|
|
386
|
-
"introduced": "0.
|
|
387
|
-
"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."
|
|
388
388
|
},
|
|
389
|
-
"value": "#
|
|
389
|
+
"value": "#7F5F01"
|
|
390
390
|
},
|
|
391
|
-
"Dark/color.
|
|
391
|
+
"Dark/color.background.accent.yellow.subtle.hovered": {
|
|
392
392
|
"attributes": {
|
|
393
393
|
"group": "paint",
|
|
394
394
|
"state": "active",
|
|
395
|
-
"introduced": "1.
|
|
396
|
-
"description": "
|
|
395
|
+
"introduced": "1.19.0",
|
|
396
|
+
"description": "Hovered state of color.background.accent.yellow.subtle."
|
|
397
397
|
},
|
|
398
|
-
"value": "#
|
|
398
|
+
"value": "#614A05"
|
|
399
399
|
},
|
|
400
|
-
"Dark/color.
|
|
400
|
+
"Dark/color.background.accent.yellow.subtle.pressed": {
|
|
401
401
|
"attributes": {
|
|
402
402
|
"group": "paint",
|
|
403
403
|
"state": "active",
|
|
404
|
-
"introduced": "
|
|
405
|
-
"description": "
|
|
404
|
+
"introduced": "1.19.0",
|
|
405
|
+
"description": "Pressed state of color.background.accent.yellow.subtle."
|
|
406
406
|
},
|
|
407
|
-
"value": "#
|
|
407
|
+
"value": "#533F04"
|
|
408
408
|
},
|
|
409
|
-
"Dark/color.
|
|
409
|
+
"Dark/color.background.accent.yellow.bolder": {
|
|
410
410
|
"attributes": {
|
|
411
411
|
"group": "paint",
|
|
412
412
|
"state": "active",
|
|
413
|
-
"introduced": "0.
|
|
414
|
-
"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."
|
|
415
415
|
},
|
|
416
|
-
"value": "#
|
|
416
|
+
"value": "#DDB30E"
|
|
417
417
|
},
|
|
418
|
-
"Dark/color.
|
|
418
|
+
"Dark/color.background.accent.yellow.bolder.hovered": {
|
|
419
419
|
"attributes": {
|
|
420
420
|
"group": "paint",
|
|
421
421
|
"state": "active",
|
|
422
|
-
"introduced": "
|
|
423
|
-
"description": "
|
|
422
|
+
"introduced": "1.19.0",
|
|
423
|
+
"description": "Hovered state of color.background.accent.yellow.bolder."
|
|
424
424
|
},
|
|
425
425
|
"value": "#EED12B"
|
|
426
426
|
},
|
|
427
|
-
"Dark/color.
|
|
427
|
+
"Dark/color.background.accent.yellow.bolder.pressed": {
|
|
428
428
|
"attributes": {
|
|
429
429
|
"group": "paint",
|
|
430
430
|
"state": "active",
|
|
431
|
-
"introduced": "
|
|
432
|
-
"description": "
|
|
431
|
+
"introduced": "1.19.0",
|
|
432
|
+
"description": "Pressed state of color.background.accent.yellow.bolder."
|
|
433
433
|
},
|
|
434
|
-
"value": "#
|
|
434
|
+
"value": "#EFDD4E"
|
|
435
435
|
},
|
|
436
|
-
"Dark/color.
|
|
436
|
+
"Dark/color.background.accent.green.subtlest": {
|
|
437
437
|
"attributes": {
|
|
438
438
|
"group": "paint",
|
|
439
439
|
"state": "active",
|
|
440
|
-
"introduced": "0.
|
|
441
|
-
"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."
|
|
442
442
|
},
|
|
443
|
-
"value": "#
|
|
443
|
+
"value": "#1C3329"
|
|
444
444
|
},
|
|
445
|
-
"Dark/color.
|
|
445
|
+
"Dark/color.background.accent.green.subtlest.hovered": {
|
|
446
446
|
"attributes": {
|
|
447
447
|
"group": "paint",
|
|
448
448
|
"state": "active",
|
|
449
|
-
"introduced": "
|
|
450
|
-
"description": "
|
|
449
|
+
"introduced": "1.19.0",
|
|
450
|
+
"description": "Hovered state of color.background.accent.green.subtlest."
|
|
451
451
|
},
|
|
452
|
-
"value": "#
|
|
452
|
+
"value": "#164B35"
|
|
453
453
|
},
|
|
454
|
-
"Dark/color.
|
|
454
|
+
"Dark/color.background.accent.green.subtlest.pressed": {
|
|
455
455
|
"attributes": {
|
|
456
456
|
"group": "paint",
|
|
457
457
|
"state": "active",
|
|
458
|
-
"introduced": "
|
|
459
|
-
"description": "
|
|
458
|
+
"introduced": "1.19.0",
|
|
459
|
+
"description": "Pressed state of color.background.accent.green.subtlest."
|
|
460
460
|
},
|
|
461
|
-
"value": "#
|
|
461
|
+
"value": "#19573D"
|
|
462
462
|
},
|
|
463
|
-
"Dark/color.
|
|
463
|
+
"Dark/color.background.accent.green.subtler": {
|
|
464
464
|
"attributes": {
|
|
465
465
|
"group": "paint",
|
|
466
466
|
"state": "active",
|
|
467
|
-
"introduced": "0.
|
|
468
|
-
"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."
|
|
469
469
|
},
|
|
470
|
-
"value": "#
|
|
470
|
+
"value": "#164B35"
|
|
471
471
|
},
|
|
472
|
-
"Dark/color.
|
|
472
|
+
"Dark/color.background.accent.green.subtler.hovered": {
|
|
473
473
|
"attributes": {
|
|
474
474
|
"group": "paint",
|
|
475
475
|
"state": "active",
|
|
476
|
-
"introduced": "
|
|
477
|
-
"description": "
|
|
476
|
+
"introduced": "1.19.0",
|
|
477
|
+
"description": "Hovered state of color.background.accent.green.subtler."
|
|
478
478
|
},
|
|
479
|
-
"value": "#
|
|
479
|
+
"value": "#19573D"
|
|
480
480
|
},
|
|
481
|
-
"Dark/color.
|
|
481
|
+
"Dark/color.background.accent.green.subtler.pressed": {
|
|
482
482
|
"attributes": {
|
|
483
483
|
"group": "paint",
|
|
484
484
|
"state": "active",
|
|
485
|
-
"introduced": "
|
|
486
|
-
"description": "
|
|
485
|
+
"introduced": "1.19.0",
|
|
486
|
+
"description": "Pressed state of color.background.accent.green.subtler."
|
|
487
487
|
},
|
|
488
|
-
"value": "#
|
|
488
|
+
"value": "#216E4E"
|
|
489
489
|
},
|
|
490
|
-
"Dark/color.
|
|
490
|
+
"Dark/color.background.accent.green.subtle": {
|
|
491
491
|
"attributes": {
|
|
492
492
|
"group": "paint",
|
|
493
493
|
"state": "active",
|
|
494
|
-
"introduced": "0.
|
|
495
|
-
"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."
|
|
496
496
|
},
|
|
497
|
-
"value": "#
|
|
497
|
+
"value": "#216E4E"
|
|
498
498
|
},
|
|
499
|
-
"Dark/color.
|
|
499
|
+
"Dark/color.background.accent.green.subtle.hovered": {
|
|
500
500
|
"attributes": {
|
|
501
501
|
"group": "paint",
|
|
502
502
|
"state": "active",
|
|
503
|
-
"introduced": "
|
|
504
|
-
"description": "
|
|
503
|
+
"introduced": "1.19.0",
|
|
504
|
+
"description": "Hovered state of color.background.accent.green.subtle."
|
|
505
505
|
},
|
|
506
|
-
"value": "#
|
|
506
|
+
"value": "#19573D"
|
|
507
507
|
},
|
|
508
|
-
"Dark/color.
|
|
508
|
+
"Dark/color.background.accent.green.subtle.pressed": {
|
|
509
509
|
"attributes": {
|
|
510
510
|
"group": "paint",
|
|
511
511
|
"state": "active",
|
|
512
|
-
"introduced": "
|
|
513
|
-
"description": "
|
|
512
|
+
"introduced": "1.19.0",
|
|
513
|
+
"description": "Pressed state of color.background.accent.green.subtle."
|
|
514
514
|
},
|
|
515
|
-
"value": "#
|
|
515
|
+
"value": "#164B35"
|
|
516
516
|
},
|
|
517
|
-
"Dark/color.
|
|
517
|
+
"Dark/color.background.accent.green.bolder": {
|
|
518
518
|
"attributes": {
|
|
519
519
|
"group": "paint",
|
|
520
520
|
"state": "active",
|
|
521
|
-
"introduced": "0.
|
|
522
|
-
"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."
|
|
523
523
|
},
|
|
524
|
-
"value": "#
|
|
524
|
+
"value": "#4BCE97"
|
|
525
525
|
},
|
|
526
|
-
"Dark/color.
|
|
526
|
+
"Dark/color.background.accent.green.bolder.hovered": {
|
|
527
527
|
"attributes": {
|
|
528
528
|
"group": "paint",
|
|
529
529
|
"state": "active",
|
|
530
|
-
"introduced": "
|
|
531
|
-
"description": "
|
|
530
|
+
"introduced": "1.19.0",
|
|
531
|
+
"description": "Hovered state of color.background.accent.green.bolder."
|
|
532
532
|
},
|
|
533
|
-
"value": "#
|
|
533
|
+
"value": "#7EE2B8"
|
|
534
534
|
},
|
|
535
|
-
"Dark/color.
|
|
535
|
+
"Dark/color.background.accent.green.bolder.pressed": {
|
|
536
536
|
"attributes": {
|
|
537
537
|
"group": "paint",
|
|
538
538
|
"state": "active",
|
|
539
|
-
"introduced": "
|
|
540
|
-
"description": "
|
|
539
|
+
"introduced": "1.19.0",
|
|
540
|
+
"description": "Pressed state of color.background.accent.green.bolder."
|
|
541
541
|
},
|
|
542
|
-
"value": "#
|
|
542
|
+
"value": "#97EDC9"
|
|
543
543
|
},
|
|
544
|
-
"Dark/color.
|
|
544
|
+
"Dark/color.background.accent.teal.subtlest": {
|
|
545
545
|
"attributes": {
|
|
546
546
|
"group": "paint",
|
|
547
547
|
"state": "active",
|
|
548
|
-
"introduced": "0.
|
|
549
|
-
"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."
|
|
550
550
|
},
|
|
551
|
-
"value": "#
|
|
551
|
+
"value": "#1E3137"
|
|
552
552
|
},
|
|
553
|
-
"Dark/color.
|
|
553
|
+
"Dark/color.background.accent.teal.subtlest.hovered": {
|
|
554
554
|
"attributes": {
|
|
555
555
|
"group": "paint",
|
|
556
556
|
"state": "active",
|
|
557
|
-
"introduced": "
|
|
558
|
-
"description": "
|
|
557
|
+
"introduced": "1.19.0",
|
|
558
|
+
"description": "Hovered state of color.background.accent.teal.subtlest."
|
|
559
559
|
},
|
|
560
|
-
"value": "#
|
|
560
|
+
"value": "#164555"
|
|
561
561
|
},
|
|
562
|
-
"Dark/color.
|
|
562
|
+
"Dark/color.background.accent.teal.subtlest.pressed": {
|
|
563
563
|
"attributes": {
|
|
564
564
|
"group": "paint",
|
|
565
565
|
"state": "active",
|
|
566
|
-
"introduced": "
|
|
567
|
-
"description": "
|
|
566
|
+
"introduced": "1.19.0",
|
|
567
|
+
"description": "Pressed state of color.background.accent.teal.subtlest."
|
|
568
568
|
},
|
|
569
|
-
"value": "#
|
|
569
|
+
"value": "#1A5265"
|
|
570
570
|
},
|
|
571
|
-
"Dark/color.
|
|
571
|
+
"Dark/color.background.accent.teal.subtler": {
|
|
572
572
|
"attributes": {
|
|
573
573
|
"group": "paint",
|
|
574
574
|
"state": "active",
|
|
575
|
-
"introduced": "
|
|
576
|
-
"description": "Use for
|
|
575
|
+
"introduced": "0.7.0",
|
|
576
|
+
"description": "Use for teal backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
577
577
|
},
|
|
578
|
-
"value": "#
|
|
578
|
+
"value": "#164555"
|
|
579
579
|
},
|
|
580
|
-
"Dark/color.
|
|
580
|
+
"Dark/color.background.accent.teal.subtler.hovered": {
|
|
581
581
|
"attributes": {
|
|
582
582
|
"group": "paint",
|
|
583
583
|
"state": "active",
|
|
584
|
-
"introduced": "
|
|
585
|
-
"description": "
|
|
584
|
+
"introduced": "1.19.0",
|
|
585
|
+
"description": "Hovered state of color.background.accent.teal.subtler."
|
|
586
586
|
},
|
|
587
|
-
"value": "#
|
|
588
|
-
},
|
|
589
|
-
"Dark/color.border": {
|
|
590
|
-
"attributes": {
|
|
591
|
-
"group": "paint",
|
|
592
|
-
"state": "active",
|
|
593
|
-
"introduced": "0.6.0",
|
|
594
|
-
"description": "Use to visually group or separate UI elements, such as flat cards or side panel dividers."
|
|
595
|
-
},
|
|
596
|
-
"value": "#E3E4F21F"
|
|
587
|
+
"value": "#1A5265"
|
|
597
588
|
},
|
|
598
|
-
"Dark/color.
|
|
589
|
+
"Dark/color.background.accent.teal.subtler.pressed": {
|
|
599
590
|
"attributes": {
|
|
600
591
|
"group": "paint",
|
|
601
592
|
"state": "active",
|
|
602
|
-
"introduced": "1.
|
|
603
|
-
"description": "
|
|
593
|
+
"introduced": "1.19.0",
|
|
594
|
+
"description": "Pressed state of color.background.accent.teal.subtler."
|
|
604
595
|
},
|
|
605
|
-
"value": "#
|
|
596
|
+
"value": "#206A83"
|
|
606
597
|
},
|
|
607
|
-
"Dark/color.
|
|
598
|
+
"Dark/color.background.accent.teal.subtle": {
|
|
608
599
|
"attributes": {
|
|
609
600
|
"group": "paint",
|
|
610
601
|
"state": "active",
|
|
611
|
-
"introduced": "
|
|
612
|
-
"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."
|
|
613
604
|
},
|
|
614
|
-
"value": "#
|
|
605
|
+
"value": "#206A83"
|
|
615
606
|
},
|
|
616
|
-
"Dark/color.
|
|
607
|
+
"Dark/color.background.accent.teal.subtle.hovered": {
|
|
617
608
|
"attributes": {
|
|
618
609
|
"group": "paint",
|
|
619
610
|
"state": "active",
|
|
620
|
-
"introduced": "
|
|
621
|
-
"description": "
|
|
611
|
+
"introduced": "1.19.0",
|
|
612
|
+
"description": "Hovered state of color.background.accent.teal.subtle."
|
|
622
613
|
},
|
|
623
|
-
"value": "#
|
|
614
|
+
"value": "#1A5265"
|
|
624
615
|
},
|
|
625
|
-
"Dark/color.
|
|
616
|
+
"Dark/color.background.accent.teal.subtle.pressed": {
|
|
626
617
|
"attributes": {
|
|
627
618
|
"group": "paint",
|
|
628
619
|
"state": "active",
|
|
629
|
-
"introduced": "
|
|
630
|
-
"description": "
|
|
620
|
+
"introduced": "1.19.0",
|
|
621
|
+
"description": "Pressed state of color.background.accent.teal.subtle."
|
|
631
622
|
},
|
|
632
|
-
"value": "#
|
|
623
|
+
"value": "#164555"
|
|
633
624
|
},
|
|
634
|
-
"Dark/color.
|
|
625
|
+
"Dark/color.background.accent.teal.bolder": {
|
|
635
626
|
"attributes": {
|
|
636
627
|
"group": "paint",
|
|
637
628
|
"state": "active",
|
|
638
|
-
"introduced": "0.
|
|
639
|
-
"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."
|
|
640
631
|
},
|
|
641
|
-
"value": "#
|
|
632
|
+
"value": "#6CC3E0"
|
|
642
633
|
},
|
|
643
|
-
"Dark/color.
|
|
634
|
+
"Dark/color.background.accent.teal.bolder.hovered": {
|
|
644
635
|
"attributes": {
|
|
645
636
|
"group": "paint",
|
|
646
637
|
"state": "active",
|
|
647
|
-
"introduced": "
|
|
648
|
-
"description": "
|
|
638
|
+
"introduced": "1.19.0",
|
|
639
|
+
"description": "Hovered state of color.background.accent.teal.bolder."
|
|
649
640
|
},
|
|
650
|
-
"value": "#
|
|
641
|
+
"value": "#9DD9EE"
|
|
651
642
|
},
|
|
652
|
-
"Dark/color.
|
|
643
|
+
"Dark/color.background.accent.teal.bolder.pressed": {
|
|
653
644
|
"attributes": {
|
|
654
645
|
"group": "paint",
|
|
655
646
|
"state": "active",
|
|
656
|
-
"introduced": "
|
|
657
|
-
"description": "
|
|
647
|
+
"introduced": "1.19.0",
|
|
648
|
+
"description": "Pressed state of color.background.accent.teal.bolder."
|
|
658
649
|
},
|
|
659
|
-
"value": "#
|
|
650
|
+
"value": "#B1E4F7"
|
|
660
651
|
},
|
|
661
|
-
"Dark/color.
|
|
652
|
+
"Dark/color.background.accent.blue.subtlest": {
|
|
662
653
|
"attributes": {
|
|
663
654
|
"group": "paint",
|
|
664
655
|
"state": "active",
|
|
665
|
-
"introduced": "
|
|
666
|
-
"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."
|
|
667
658
|
},
|
|
668
|
-
"value": "#
|
|
659
|
+
"value": "#1C2B42"
|
|
669
660
|
},
|
|
670
|
-
"Dark/color.
|
|
661
|
+
"Dark/color.background.accent.blue.subtlest.hovered": {
|
|
671
662
|
"attributes": {
|
|
672
663
|
"group": "paint",
|
|
673
664
|
"state": "active",
|
|
674
|
-
"introduced": "
|
|
675
|
-
"description": "
|
|
665
|
+
"introduced": "1.19.0",
|
|
666
|
+
"description": "Hovered state of color.background.accent.blue.subtlest."
|
|
676
667
|
},
|
|
677
|
-
"value": "#
|
|
668
|
+
"value": "#123263"
|
|
678
669
|
},
|
|
679
|
-
"Dark/color.
|
|
670
|
+
"Dark/color.background.accent.blue.subtlest.pressed": {
|
|
680
671
|
"attributes": {
|
|
681
672
|
"group": "paint",
|
|
682
673
|
"state": "active",
|
|
683
|
-
"introduced": "
|
|
684
|
-
"description": "
|
|
674
|
+
"introduced": "1.19.0",
|
|
675
|
+
"description": "Pressed state of color.background.accent.blue.subtlest."
|
|
685
676
|
},
|
|
686
|
-
"value": "#
|
|
677
|
+
"value": "#144794"
|
|
687
678
|
},
|
|
688
|
-
"Dark/color.
|
|
679
|
+
"Dark/color.background.accent.blue.subtler": {
|
|
689
680
|
"attributes": {
|
|
690
681
|
"group": "paint",
|
|
691
682
|
"state": "active",
|
|
692
|
-
"introduced": "0.
|
|
693
|
-
"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."
|
|
694
685
|
},
|
|
695
|
-
"value": "#
|
|
686
|
+
"value": "#123263"
|
|
696
687
|
},
|
|
697
|
-
"Dark/color.
|
|
688
|
+
"Dark/color.background.accent.blue.subtler.hovered": {
|
|
698
689
|
"attributes": {
|
|
699
690
|
"group": "paint",
|
|
700
691
|
"state": "active",
|
|
701
|
-
"introduced": "
|
|
702
|
-
"description": "
|
|
692
|
+
"introduced": "1.19.0",
|
|
693
|
+
"description": "Hovered state of color.background.accent.blue.subtler."
|
|
703
694
|
},
|
|
704
|
-
"value": "#
|
|
695
|
+
"value": "#144794"
|
|
705
696
|
},
|
|
706
|
-
"Dark/color.
|
|
697
|
+
"Dark/color.background.accent.blue.subtler.pressed": {
|
|
707
698
|
"attributes": {
|
|
708
699
|
"group": "paint",
|
|
709
700
|
"state": "active",
|
|
710
|
-
"introduced": "
|
|
711
|
-
"description": "
|
|
701
|
+
"introduced": "1.19.0",
|
|
702
|
+
"description": "Pressed state of color.background.accent.blue.subtler."
|
|
712
703
|
},
|
|
713
|
-
"value": "#
|
|
704
|
+
"value": "#1558BC"
|
|
714
705
|
},
|
|
715
|
-
"Dark/color.
|
|
706
|
+
"Dark/color.background.accent.blue.subtle": {
|
|
716
707
|
"attributes": {
|
|
717
708
|
"group": "paint",
|
|
718
709
|
"state": "active",
|
|
719
|
-
"introduced": "
|
|
720
|
-
"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."
|
|
721
712
|
},
|
|
722
713
|
"value": "#1558BC"
|
|
723
714
|
},
|
|
724
|
-
"Dark/color.
|
|
715
|
+
"Dark/color.background.accent.blue.subtle.hovered": {
|
|
725
716
|
"attributes": {
|
|
726
717
|
"group": "paint",
|
|
727
718
|
"state": "active",
|
|
728
|
-
"introduced": "
|
|
729
|
-
"description": "
|
|
719
|
+
"introduced": "1.19.0",
|
|
720
|
+
"description": "Hovered state of color.background.accent.blue.subtle."
|
|
730
721
|
},
|
|
731
|
-
"value": "#
|
|
722
|
+
"value": "#144794"
|
|
732
723
|
},
|
|
733
|
-
"Dark/color.
|
|
724
|
+
"Dark/color.background.accent.blue.subtle.pressed": {
|
|
734
725
|
"attributes": {
|
|
735
726
|
"group": "paint",
|
|
736
727
|
"state": "active",
|
|
737
|
-
"introduced": "
|
|
738
|
-
"description": "
|
|
728
|
+
"introduced": "1.19.0",
|
|
729
|
+
"description": "Pressed state of color.background.accent.blue.subtle."
|
|
739
730
|
},
|
|
740
|
-
"value": "#
|
|
731
|
+
"value": "#123263"
|
|
741
732
|
},
|
|
742
|
-
"Dark/color.
|
|
733
|
+
"Dark/color.background.accent.blue.bolder": {
|
|
743
734
|
"attributes": {
|
|
744
735
|
"group": "paint",
|
|
745
736
|
"state": "active",
|
|
746
|
-
"introduced": "0.
|
|
747
|
-
"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."
|
|
748
739
|
},
|
|
749
|
-
"value": "#
|
|
740
|
+
"value": "#669DF1"
|
|
750
741
|
},
|
|
751
|
-
"Dark/color.
|
|
742
|
+
"Dark/color.background.accent.blue.bolder.hovered": {
|
|
752
743
|
"attributes": {
|
|
753
744
|
"group": "paint",
|
|
754
745
|
"state": "active",
|
|
755
|
-
"introduced": "
|
|
756
|
-
"description": "
|
|
746
|
+
"introduced": "1.19.0",
|
|
747
|
+
"description": "Hovered state of color.background.accent.blue.bolder."
|
|
757
748
|
},
|
|
758
|
-
"value": "#
|
|
749
|
+
"value": "#8FB8F6"
|
|
759
750
|
},
|
|
760
|
-
"Dark/color.
|
|
751
|
+
"Dark/color.background.accent.blue.bolder.pressed": {
|
|
761
752
|
"attributes": {
|
|
762
753
|
"group": "paint",
|
|
763
754
|
"state": "active",
|
|
764
|
-
"introduced": "
|
|
765
|
-
"description": "
|
|
755
|
+
"introduced": "1.19.0",
|
|
756
|
+
"description": "Pressed state of color.background.accent.blue.bolder."
|
|
766
757
|
},
|
|
767
|
-
"value": "#
|
|
758
|
+
"value": "#ADCBFB"
|
|
768
759
|
},
|
|
769
|
-
"Dark/color.
|
|
760
|
+
"Dark/color.background.accent.purple.subtlest": {
|
|
770
761
|
"attributes": {
|
|
771
762
|
"group": "paint",
|
|
772
763
|
"state": "active",
|
|
773
|
-
"introduced": "
|
|
774
|
-
"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."
|
|
775
766
|
},
|
|
776
|
-
"value": "#
|
|
767
|
+
"value": "#35243F"
|
|
777
768
|
},
|
|
778
|
-
"Dark/color.
|
|
769
|
+
"Dark/color.background.accent.purple.subtlest.hovered": {
|
|
779
770
|
"attributes": {
|
|
780
771
|
"group": "paint",
|
|
781
772
|
"state": "active",
|
|
782
|
-
"introduced": "
|
|
783
|
-
"description": "
|
|
773
|
+
"introduced": "1.19.0",
|
|
774
|
+
"description": "Hovered state of color.background.accent.purple.subtlest."
|
|
784
775
|
},
|
|
785
|
-
"value": "#
|
|
776
|
+
"value": "#48245D"
|
|
786
777
|
},
|
|
787
|
-
"Dark/color.
|
|
778
|
+
"Dark/color.background.accent.purple.subtlest.pressed": {
|
|
788
779
|
"attributes": {
|
|
789
780
|
"group": "paint",
|
|
790
781
|
"state": "active",
|
|
791
|
-
"introduced": "
|
|
792
|
-
"description": "
|
|
782
|
+
"introduced": "1.19.0",
|
|
783
|
+
"description": "Pressed state of color.background.accent.purple.subtlest."
|
|
793
784
|
},
|
|
794
|
-
"value": "#
|
|
785
|
+
"value": "#673286"
|
|
795
786
|
},
|
|
796
|
-
"Dark/color.
|
|
787
|
+
"Dark/color.background.accent.purple.subtler": {
|
|
797
788
|
"attributes": {
|
|
798
789
|
"group": "paint",
|
|
799
790
|
"state": "active",
|
|
800
|
-
"introduced": "0.
|
|
801
|
-
"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."
|
|
802
793
|
},
|
|
803
|
-
"value": "#
|
|
794
|
+
"value": "#48245D"
|
|
804
795
|
},
|
|
805
|
-
"Dark/color.
|
|
796
|
+
"Dark/color.background.accent.purple.subtler.hovered": {
|
|
806
797
|
"attributes": {
|
|
807
798
|
"group": "paint",
|
|
808
799
|
"state": "active",
|
|
809
|
-
"introduced": "
|
|
810
|
-
"description": "
|
|
800
|
+
"introduced": "1.19.0",
|
|
801
|
+
"description": "Hovered state of color.background.accent.purple.subtler."
|
|
811
802
|
},
|
|
812
|
-
"value": "#
|
|
803
|
+
"value": "#673286"
|
|
813
804
|
},
|
|
814
|
-
"Dark/color.
|
|
805
|
+
"Dark/color.background.accent.purple.subtler.pressed": {
|
|
815
806
|
"attributes": {
|
|
816
807
|
"group": "paint",
|
|
817
808
|
"state": "active",
|
|
818
|
-
"introduced": "
|
|
819
|
-
"description": "
|
|
809
|
+
"introduced": "1.19.0",
|
|
810
|
+
"description": "Pressed state of color.background.accent.purple.subtler."
|
|
820
811
|
},
|
|
821
|
-
"value": "#
|
|
812
|
+
"value": "#803FA5"
|
|
822
813
|
},
|
|
823
|
-
"Dark/color.
|
|
814
|
+
"Dark/color.background.accent.purple.subtle": {
|
|
824
815
|
"attributes": {
|
|
825
816
|
"group": "paint",
|
|
826
817
|
"state": "active",
|
|
827
|
-
"introduced": "0.
|
|
828
|
-
"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."
|
|
829
820
|
},
|
|
830
|
-
"value": "#
|
|
821
|
+
"value": "#803FA5"
|
|
831
822
|
},
|
|
832
|
-
"Dark/color.
|
|
823
|
+
"Dark/color.background.accent.purple.subtle.hovered": {
|
|
833
824
|
"attributes": {
|
|
834
825
|
"group": "paint",
|
|
835
826
|
"state": "active",
|
|
836
|
-
"introduced": "
|
|
837
|
-
"description": "
|
|
827
|
+
"introduced": "1.19.0",
|
|
828
|
+
"description": "Hovered state of color.background.accent.purple.subtle."
|
|
838
829
|
},
|
|
839
|
-
"value": "#
|
|
830
|
+
"value": "#673286"
|
|
840
831
|
},
|
|
841
|
-
"Dark/color.
|
|
832
|
+
"Dark/color.background.accent.purple.subtle.pressed": {
|
|
842
833
|
"attributes": {
|
|
843
834
|
"group": "paint",
|
|
844
835
|
"state": "active",
|
|
845
|
-
"introduced": "
|
|
846
|
-
"description": "
|
|
836
|
+
"introduced": "1.19.0",
|
|
837
|
+
"description": "Pressed state of color.background.accent.purple.subtle."
|
|
847
838
|
},
|
|
848
|
-
"value": "#
|
|
839
|
+
"value": "#48245D"
|
|
849
840
|
},
|
|
850
|
-
"Dark/color.
|
|
841
|
+
"Dark/color.background.accent.purple.bolder": {
|
|
851
842
|
"attributes": {
|
|
852
843
|
"group": "paint",
|
|
853
844
|
"state": "active",
|
|
854
|
-
"introduced": "0.
|
|
855
|
-
"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."
|
|
856
847
|
},
|
|
857
|
-
"value": "#
|
|
848
|
+
"value": "#C97CF4"
|
|
858
849
|
},
|
|
859
|
-
"Dark/color.
|
|
850
|
+
"Dark/color.background.accent.purple.bolder.hovered": {
|
|
860
851
|
"attributes": {
|
|
861
852
|
"group": "paint",
|
|
862
853
|
"state": "active",
|
|
863
|
-
"introduced": "
|
|
864
|
-
"description": "
|
|
854
|
+
"introduced": "1.19.0",
|
|
855
|
+
"description": "Hovered state of color.background.accent.purple.bolder."
|
|
865
856
|
},
|
|
866
|
-
"value": "#
|
|
857
|
+
"value": "#D8A0F7"
|
|
867
858
|
},
|
|
868
|
-
"Dark/color.
|
|
859
|
+
"Dark/color.background.accent.purple.bolder.pressed": {
|
|
869
860
|
"attributes": {
|
|
870
861
|
"group": "paint",
|
|
871
862
|
"state": "active",
|
|
872
|
-
"introduced": "
|
|
873
|
-
"description": "
|
|
863
|
+
"introduced": "1.19.0",
|
|
864
|
+
"description": "Pressed state of color.background.accent.purple.bolder."
|
|
874
865
|
},
|
|
875
|
-
"value": "#
|
|
866
|
+
"value": "#E3BDFA"
|
|
876
867
|
},
|
|
877
|
-
"Dark/color.
|
|
868
|
+
"Dark/color.background.accent.magenta.subtlest": {
|
|
878
869
|
"attributes": {
|
|
879
870
|
"group": "paint",
|
|
880
871
|
"state": "active",
|
|
881
|
-
"introduced": "
|
|
882
|
-
"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."
|
|
883
874
|
},
|
|
884
|
-
"value": "#
|
|
875
|
+
"value": "#3D2232"
|
|
885
876
|
},
|
|
886
|
-
"Dark/color.
|
|
877
|
+
"Dark/color.background.accent.magenta.subtlest.hovered": {
|
|
887
878
|
"attributes": {
|
|
888
879
|
"group": "paint",
|
|
889
880
|
"state": "active",
|
|
890
|
-
"introduced": "
|
|
891
|
-
"description": "
|
|
881
|
+
"introduced": "1.19.0",
|
|
882
|
+
"description": "Hovered state of color.background.accent.magenta.subtlest."
|
|
892
883
|
},
|
|
893
|
-
"value": "#
|
|
884
|
+
"value": "#50253F"
|
|
894
885
|
},
|
|
895
|
-
"Dark/color.
|
|
886
|
+
"Dark/color.background.accent.magenta.subtlest.pressed": {
|
|
896
887
|
"attributes": {
|
|
897
888
|
"group": "paint",
|
|
898
889
|
"state": "active",
|
|
899
|
-
"introduced": "
|
|
900
|
-
"description": "
|
|
890
|
+
"introduced": "1.19.0",
|
|
891
|
+
"description": "Pressed state of color.background.accent.magenta.subtlest."
|
|
901
892
|
},
|
|
902
|
-
"value": "#
|
|
893
|
+
"value": "#77325B"
|
|
903
894
|
},
|
|
904
|
-
"Dark/color.
|
|
895
|
+
"Dark/color.background.accent.magenta.subtler": {
|
|
905
896
|
"attributes": {
|
|
906
897
|
"group": "paint",
|
|
907
898
|
"state": "active",
|
|
908
|
-
"introduced": "0.
|
|
909
|
-
"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."
|
|
910
901
|
},
|
|
911
|
-
"value": "#
|
|
902
|
+
"value": "#50253F"
|
|
912
903
|
},
|
|
913
|
-
"Dark/color.
|
|
904
|
+
"Dark/color.background.accent.magenta.subtler.hovered": {
|
|
914
905
|
"attributes": {
|
|
915
906
|
"group": "paint",
|
|
916
907
|
"state": "active",
|
|
917
|
-
"introduced": "
|
|
918
|
-
"description": "
|
|
908
|
+
"introduced": "1.19.0",
|
|
909
|
+
"description": "Hovered state of color.background.accent.magenta.subtler."
|
|
919
910
|
},
|
|
920
|
-
"value": "#
|
|
911
|
+
"value": "#77325B"
|
|
921
912
|
},
|
|
922
|
-
"Dark/color.
|
|
913
|
+
"Dark/color.background.accent.magenta.subtler.pressed": {
|
|
923
914
|
"attributes": {
|
|
924
915
|
"group": "paint",
|
|
925
916
|
"state": "active",
|
|
926
|
-
"introduced": "
|
|
927
|
-
"description": "
|
|
917
|
+
"introduced": "1.19.0",
|
|
918
|
+
"description": "Pressed state of color.background.accent.magenta.subtler."
|
|
928
919
|
},
|
|
929
|
-
"value": "#
|
|
920
|
+
"value": "#943D73"
|
|
930
921
|
},
|
|
931
|
-
"Dark/color.background.accent.
|
|
922
|
+
"Dark/color.background.accent.magenta.subtle": {
|
|
932
923
|
"attributes": {
|
|
933
924
|
"group": "paint",
|
|
934
925
|
"state": "active",
|
|
935
|
-
"introduced": "
|
|
936
|
-
"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."
|
|
937
928
|
},
|
|
938
|
-
"value": "#
|
|
929
|
+
"value": "#943D73"
|
|
939
930
|
},
|
|
940
|
-
"Dark/color.background.accent.
|
|
931
|
+
"Dark/color.background.accent.magenta.subtle.hovered": {
|
|
941
932
|
"attributes": {
|
|
942
933
|
"group": "paint",
|
|
943
934
|
"state": "active",
|
|
944
935
|
"introduced": "1.19.0",
|
|
945
|
-
"description": "Hovered state of color.background.accent.
|
|
936
|
+
"description": "Hovered state of color.background.accent.magenta.subtle."
|
|
946
937
|
},
|
|
947
|
-
"value": "#
|
|
938
|
+
"value": "#77325B"
|
|
948
939
|
},
|
|
949
|
-
"Dark/color.background.accent.
|
|
940
|
+
"Dark/color.background.accent.magenta.subtle.pressed": {
|
|
950
941
|
"attributes": {
|
|
951
942
|
"group": "paint",
|
|
952
943
|
"state": "active",
|
|
953
944
|
"introduced": "1.19.0",
|
|
954
|
-
"description": "Pressed state of color.background.accent.
|
|
945
|
+
"description": "Pressed state of color.background.accent.magenta.subtle."
|
|
955
946
|
},
|
|
956
|
-
"value": "#
|
|
947
|
+
"value": "#50253F"
|
|
957
948
|
},
|
|
958
|
-
"Dark/color.background.accent.
|
|
949
|
+
"Dark/color.background.accent.magenta.bolder": {
|
|
959
950
|
"attributes": {
|
|
960
951
|
"group": "paint",
|
|
961
952
|
"state": "active",
|
|
962
|
-
"introduced": "
|
|
963
|
-
"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."
|
|
964
955
|
},
|
|
965
|
-
"value": "#
|
|
956
|
+
"value": "#E774BB"
|
|
966
957
|
},
|
|
967
|
-
"Dark/color.background.accent.
|
|
958
|
+
"Dark/color.background.accent.magenta.bolder.hovered": {
|
|
968
959
|
"attributes": {
|
|
969
960
|
"group": "paint",
|
|
970
961
|
"state": "active",
|
|
971
962
|
"introduced": "1.19.0",
|
|
972
|
-
"description": "Hovered state of color.background.accent.
|
|
963
|
+
"description": "Hovered state of color.background.accent.magenta.bolder."
|
|
973
964
|
},
|
|
974
|
-
"value": "#
|
|
965
|
+
"value": "#F797D2"
|
|
975
966
|
},
|
|
976
|
-
"Dark/color.background.accent.
|
|
967
|
+
"Dark/color.background.accent.magenta.bolder.pressed": {
|
|
977
968
|
"attributes": {
|
|
978
969
|
"group": "paint",
|
|
979
970
|
"state": "active",
|
|
980
971
|
"introduced": "1.19.0",
|
|
981
|
-
"description": "Pressed state of color.background.accent.
|
|
972
|
+
"description": "Pressed state of color.background.accent.magenta.bolder."
|
|
982
973
|
},
|
|
983
|
-
"value": "#
|
|
974
|
+
"value": "#FCB6E1"
|
|
984
975
|
},
|
|
985
|
-
"Dark/color.background.accent.
|
|
976
|
+
"Dark/color.background.accent.gray.subtlest": {
|
|
986
977
|
"attributes": {
|
|
987
978
|
"group": "paint",
|
|
988
979
|
"state": "active",
|
|
989
|
-
"introduced": "
|
|
990
|
-
"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."
|
|
991
982
|
},
|
|
992
|
-
"value": "#
|
|
983
|
+
"value": "#303134"
|
|
993
984
|
},
|
|
994
|
-
"Dark/color.background.accent.
|
|
985
|
+
"Dark/color.background.accent.gray.subtlest.hovered": {
|
|
995
986
|
"attributes": {
|
|
996
987
|
"group": "paint",
|
|
997
988
|
"state": "active",
|
|
998
989
|
"introduced": "1.19.0",
|
|
999
|
-
"description": "Hovered state of color.background.accent.
|
|
990
|
+
"description": "Hovered state of color.background.accent.gray.subtlest."
|
|
1000
991
|
},
|
|
1001
|
-
"value": "#
|
|
992
|
+
"value": "#3D3F43"
|
|
1002
993
|
},
|
|
1003
|
-
"Dark/color.background.accent.
|
|
994
|
+
"Dark/color.background.accent.gray.subtlest.pressed": {
|
|
1004
995
|
"attributes": {
|
|
1005
996
|
"group": "paint",
|
|
1006
997
|
"state": "active",
|
|
1007
998
|
"introduced": "1.19.0",
|
|
1008
|
-
"description": "Pressed state of color.background.accent.
|
|
999
|
+
"description": "Pressed state of color.background.accent.gray.subtlest."
|
|
1009
1000
|
},
|
|
1010
|
-
"value": "#
|
|
1001
|
+
"value": "#4B4D51"
|
|
1011
1002
|
},
|
|
1012
|
-
"Dark/color.background.accent.
|
|
1003
|
+
"Dark/color.background.accent.gray.subtler": {
|
|
1013
1004
|
"attributes": {
|
|
1014
1005
|
"group": "paint",
|
|
1015
1006
|
"state": "active",
|
|
1016
|
-
"introduced": "
|
|
1017
|
-
"description": "Use for
|
|
1007
|
+
"introduced": "0.7.0",
|
|
1008
|
+
"description": "Use for gray backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
1018
1009
|
},
|
|
1019
|
-
"value": "#
|
|
1010
|
+
"value": "#4B4D51"
|
|
1020
1011
|
},
|
|
1021
|
-
"Dark/color.background.accent.
|
|
1012
|
+
"Dark/color.background.accent.gray.subtler.hovered": {
|
|
1022
1013
|
"attributes": {
|
|
1023
1014
|
"group": "paint",
|
|
1024
1015
|
"state": "active",
|
|
1025
1016
|
"introduced": "1.19.0",
|
|
1026
|
-
"description": "Hovered state of color.background.accent.
|
|
1017
|
+
"description": "Hovered state of color.background.accent.gray.subtler."
|
|
1027
1018
|
},
|
|
1028
|
-
"value": "#
|
|
1019
|
+
"value": "#63666B"
|
|
1029
1020
|
},
|
|
1030
|
-
"Dark/color.background.accent.
|
|
1021
|
+
"Dark/color.background.accent.gray.subtler.pressed": {
|
|
1031
1022
|
"attributes": {
|
|
1032
1023
|
"group": "paint",
|
|
1033
1024
|
"state": "active",
|
|
1034
1025
|
"introduced": "1.19.0",
|
|
1035
|
-
"description": "Pressed state of color.background.accent.
|
|
1026
|
+
"description": "Pressed state of color.background.accent.gray.subtler."
|
|
1036
1027
|
},
|
|
1037
|
-
"value": "#
|
|
1028
|
+
"value": "#7E8188"
|
|
1038
1029
|
},
|
|
1039
|
-
"Dark/color.background.accent.
|
|
1030
|
+
"Dark/color.background.accent.gray.subtle": {
|
|
1040
1031
|
"attributes": {
|
|
1041
1032
|
"group": "paint",
|
|
1042
1033
|
"state": "active",
|
|
1043
1034
|
"introduced": "0.7.0",
|
|
1044
|
-
"description": "Use for
|
|
1045
|
-
},
|
|
1046
|
-
"value": "#42221F"
|
|
1047
|
-
},
|
|
1048
|
-
"Dark/color.background.accent.red.subtlest.hovered": {
|
|
1049
|
-
"attributes": {
|
|
1050
|
-
"group": "paint",
|
|
1051
|
-
"state": "active",
|
|
1052
|
-
"introduced": "1.19.0",
|
|
1053
|
-
"description": "Hovered state of color.background.accent.red.subtlest."
|
|
1035
|
+
"description": "Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
1054
1036
|
},
|
|
1055
|
-
"value": "#
|
|
1037
|
+
"value": "#63666B"
|
|
1056
1038
|
},
|
|
1057
|
-
"Dark/color.background.accent.
|
|
1039
|
+
"Dark/color.background.accent.gray.subtle.hovered": {
|
|
1058
1040
|
"attributes": {
|
|
1059
1041
|
"group": "paint",
|
|
1060
1042
|
"state": "active",
|
|
1061
1043
|
"introduced": "1.19.0",
|
|
1062
|
-
"description": "
|
|
1063
|
-
},
|
|
1064
|
-
"value": "#872821"
|
|
1065
|
-
},
|
|
1066
|
-
"Dark/color.background.accent.red.subtler": {
|
|
1067
|
-
"attributes": {
|
|
1068
|
-
"group": "paint",
|
|
1069
|
-
"state": "active",
|
|
1070
|
-
"introduced": "0.7.0",
|
|
1071
|
-
"description": "Use for red backgrounds when there is no meaning tied to the color, such as colored tags."
|
|
1044
|
+
"description": "Hovered state of color.background.accent.gray.subtle."
|
|
1072
1045
|
},
|
|
1073
|
-
"value": "#
|
|
1046
|
+
"value": "#4B4D51"
|
|
1074
1047
|
},
|
|
1075
|
-
"Dark/color.background.accent.
|
|
1048
|
+
"Dark/color.background.accent.gray.subtle.pressed": {
|
|
1076
1049
|
"attributes": {
|
|
1077
1050
|
"group": "paint",
|
|
1078
1051
|
"state": "active",
|
|
1079
1052
|
"introduced": "1.19.0",
|
|
1080
|
-
"description": "
|
|
1053
|
+
"description": "Pressed state of color.background.accent.gray.subtle."
|
|
1081
1054
|
},
|
|
1082
|
-
"value": "#
|
|
1055
|
+
"value": "#3D3F43"
|
|
1083
1056
|
},
|
|
1084
|
-
"Dark/color.background.accent.
|
|
1057
|
+
"Dark/color.background.accent.gray.bolder": {
|
|
1085
1058
|
"attributes": {
|
|
1086
1059
|
"group": "paint",
|
|
1087
1060
|
"state": "active",
|
|
1088
|
-
"introduced": "
|
|
1089
|
-
"description": "
|
|
1061
|
+
"introduced": "0.7.0",
|
|
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."
|
|
1090
1063
|
},
|
|
1091
|
-
"value": "#
|
|
1064
|
+
"value": "#96999E"
|
|
1092
1065
|
},
|
|
1093
|
-
"Dark/color.background.accent.
|
|
1066
|
+
"Dark/color.background.accent.gray.bolder.hovered": {
|
|
1094
1067
|
"attributes": {
|
|
1095
1068
|
"group": "paint",
|
|
1096
1069
|
"state": "active",
|
|
1097
|
-
"introduced": "
|
|
1098
|
-
"description": "
|
|
1070
|
+
"introduced": "1.19.0",
|
|
1071
|
+
"description": "Hovered state of color.background.accent.gray.bolder."
|
|
1099
1072
|
},
|
|
1100
|
-
"value": "#
|
|
1073
|
+
"value": "#A9ABAF"
|
|
1101
1074
|
},
|
|
1102
|
-
"Dark/color.background.accent.
|
|
1075
|
+
"Dark/color.background.accent.gray.bolder.pressed": {
|
|
1103
1076
|
"attributes": {
|
|
1104
1077
|
"group": "paint",
|
|
1105
1078
|
"state": "active",
|
|
1106
1079
|
"introduced": "1.19.0",
|
|
1107
|
-
"description": "
|
|
1080
|
+
"description": "Pressed state of color.background.accent.gray.subtlest."
|
|
1108
1081
|
},
|
|
1109
|
-
"value": "#
|
|
1082
|
+
"value": "#BFC1C4"
|
|
1110
1083
|
},
|
|
1111
|
-
"Dark/color.background.
|
|
1084
|
+
"Dark/color.background.disabled": {
|
|
1112
1085
|
"attributes": {
|
|
1113
1086
|
"group": "paint",
|
|
1114
1087
|
"state": "active",
|
|
1115
|
-
"introduced": "
|
|
1116
|
-
"description": "
|
|
1088
|
+
"introduced": "0.0.15",
|
|
1089
|
+
"description": "Use for backgrounds of elements in a disabled state."
|
|
1117
1090
|
},
|
|
1118
|
-
"value": "#
|
|
1091
|
+
"value": "#E3E4F21F"
|
|
1119
1092
|
},
|
|
1120
|
-
"Dark/color.background.
|
|
1093
|
+
"Dark/color.background.input": {
|
|
1121
1094
|
"attributes": {
|
|
1122
1095
|
"group": "paint",
|
|
1123
1096
|
"state": "active",
|
|
1124
|
-
"introduced": "0.
|
|
1125
|
-
"description": "Use for
|
|
1097
|
+
"introduced": "0.6.0",
|
|
1098
|
+
"description": "Use for background of form UI elements, such as text fields, checkboxes, and radio buttons."
|
|
1126
1099
|
},
|
|
1127
|
-
"value": "#
|
|
1100
|
+
"value": "#242528"
|
|
1128
1101
|
},
|
|
1129
|
-
"Dark/color.background.
|
|
1102
|
+
"Dark/color.background.input.hovered": {
|
|
1130
1103
|
"attributes": {
|
|
1131
1104
|
"group": "paint",
|
|
1132
1105
|
"state": "active",
|
|
1133
|
-
"introduced": "
|
|
1134
|
-
"description": "Hovered state
|
|
1106
|
+
"introduced": "0.6.0",
|
|
1107
|
+
"description": "Hovered state for color.background.input"
|
|
1135
1108
|
},
|
|
1136
|
-
"value": "#
|
|
1109
|
+
"value": "#2B2C2F"
|
|
1137
1110
|
},
|
|
1138
|
-
"Dark/color.background.
|
|
1111
|
+
"Dark/color.background.input.pressed": {
|
|
1139
1112
|
"attributes": {
|
|
1140
1113
|
"group": "paint",
|
|
1141
1114
|
"state": "active",
|
|
1142
|
-
"introduced": "
|
|
1143
|
-
"description": "Pressed state
|
|
1115
|
+
"introduced": "0.6.0",
|
|
1116
|
+
"description": "Pressed state for color.background.input"
|
|
1144
1117
|
},
|
|
1145
|
-
"value": "#
|
|
1118
|
+
"value": "#242528"
|
|
1146
1119
|
},
|
|
1147
|
-
"Dark/color.background.
|
|
1120
|
+
"Dark/color.background.inverse.subtle": {
|
|
1148
1121
|
"attributes": {
|
|
1149
1122
|
"group": "paint",
|
|
1150
1123
|
"state": "active",
|
|
1151
|
-
"introduced": "0.
|
|
1152
|
-
"description": "Use for
|
|
1124
|
+
"introduced": "0.8.3",
|
|
1125
|
+
"description": "Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards."
|
|
1153
1126
|
},
|
|
1154
|
-
"value": "#
|
|
1127
|
+
"value": "#FFFFFF29"
|
|
1155
1128
|
},
|
|
1156
|
-
"Dark/color.background.
|
|
1129
|
+
"Dark/color.background.inverse.subtle.hovered": {
|
|
1157
1130
|
"attributes": {
|
|
1158
1131
|
"group": "paint",
|
|
1159
1132
|
"state": "active",
|
|
1160
|
-
"introduced": "
|
|
1161
|
-
"description": "
|
|
1133
|
+
"introduced": "0.8.3",
|
|
1134
|
+
"description": "Use for the hovered state of color.background.inverse.subtle"
|
|
1162
1135
|
},
|
|
1163
|
-
"value": "#
|
|
1136
|
+
"value": "#FFFFFF3D"
|
|
1164
1137
|
},
|
|
1165
|
-
"Dark/color.background.
|
|
1138
|
+
"Dark/color.background.inverse.subtle.pressed": {
|
|
1166
1139
|
"attributes": {
|
|
1167
1140
|
"group": "paint",
|
|
1168
1141
|
"state": "active",
|
|
1169
|
-
"introduced": "
|
|
1170
|
-
"description": "
|
|
1142
|
+
"introduced": "0.8.3",
|
|
1143
|
+
"description": "Use for the pressed state of color.background.inverse.subtle"
|
|
1171
1144
|
},
|
|
1172
|
-
"value": "#
|
|
1145
|
+
"value": "#FFFFFF52"
|
|
1173
1146
|
},
|
|
1174
|
-
"Dark/color.background.
|
|
1147
|
+
"Dark/color.background.neutral": {
|
|
1175
1148
|
"attributes": {
|
|
1176
1149
|
"group": "paint",
|
|
1177
1150
|
"state": "active",
|
|
1178
|
-
"introduced": "0.
|
|
1179
|
-
"description": "
|
|
1151
|
+
"introduced": "0.6.0",
|
|
1152
|
+
"description": "The default background for neutral elements, such as default buttons."
|
|
1180
1153
|
},
|
|
1181
|
-
"value": "#
|
|
1154
|
+
"value": "#CECED912"
|
|
1182
1155
|
},
|
|
1183
|
-
"Dark/color.background.
|
|
1156
|
+
"Dark/color.background.neutral.hovered": {
|
|
1184
1157
|
"attributes": {
|
|
1185
1158
|
"group": "paint",
|
|
1186
1159
|
"state": "active",
|
|
1187
|
-
"introduced": "
|
|
1188
|
-
"description": "Hovered state
|
|
1160
|
+
"introduced": "0.6.0",
|
|
1161
|
+
"description": "Hovered state for color.background.neutral"
|
|
1189
1162
|
},
|
|
1190
|
-
"value": "#
|
|
1163
|
+
"value": "#E3E4F21F"
|
|
1191
1164
|
},
|
|
1192
|
-
"Dark/color.background.
|
|
1165
|
+
"Dark/color.background.neutral.pressed": {
|
|
1193
1166
|
"attributes": {
|
|
1194
1167
|
"group": "paint",
|
|
1195
1168
|
"state": "active",
|
|
1196
|
-
"introduced": "
|
|
1197
|
-
"description": "Pressed state
|
|
1169
|
+
"introduced": "0.6.0",
|
|
1170
|
+
"description": "Pressed state for color.background.neutral"
|
|
1198
1171
|
},
|
|
1199
|
-
"value": "#
|
|
1172
|
+
"value": "#E5E9F640"
|
|
1200
1173
|
},
|
|
1201
|
-
"Dark/color.background.
|
|
1174
|
+
"Dark/color.background.neutral.subtle": {
|
|
1202
1175
|
"attributes": {
|
|
1203
1176
|
"group": "paint",
|
|
1204
1177
|
"state": "active",
|
|
1205
|
-
"introduced": "0.
|
|
1206
|
-
"description": "Use for
|
|
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."
|
|
1207
1180
|
},
|
|
1208
|
-
"value": "#
|
|
1181
|
+
"value": "#00000000"
|
|
1209
1182
|
},
|
|
1210
|
-
"Dark/color.background.
|
|
1183
|
+
"Dark/color.background.neutral.subtle.hovered": {
|
|
1211
1184
|
"attributes": {
|
|
1212
1185
|
"group": "paint",
|
|
1213
1186
|
"state": "active",
|
|
1214
|
-
"introduced": "
|
|
1215
|
-
"description": "Hovered state
|
|
1187
|
+
"introduced": "0.6.0",
|
|
1188
|
+
"description": "Hovered state for color.background.neutral.subtle"
|
|
1216
1189
|
},
|
|
1217
|
-
"value": "#
|
|
1190
|
+
"value": "#CECED912"
|
|
1218
1191
|
},
|
|
1219
|
-
"Dark/color.background.
|
|
1192
|
+
"Dark/color.background.neutral.subtle.pressed": {
|
|
1220
1193
|
"attributes": {
|
|
1221
1194
|
"group": "paint",
|
|
1222
1195
|
"state": "active",
|
|
1223
|
-
"introduced": "
|
|
1224
|
-
"description": "Pressed state
|
|
1196
|
+
"introduced": "0.6.0",
|
|
1197
|
+
"description": "Pressed state for color.background.neutral.subtle"
|
|
1225
1198
|
},
|
|
1226
|
-
"value": "#
|
|
1199
|
+
"value": "#E3E4F21F"
|
|
1227
1200
|
},
|
|
1228
|
-
"Dark/color.background.
|
|
1201
|
+
"Dark/color.background.neutral.bold": {
|
|
1229
1202
|
"attributes": {
|
|
1230
1203
|
"group": "paint",
|
|
1231
1204
|
"state": "active",
|
|
1232
|
-
"introduced": "0.
|
|
1233
|
-
"description": "
|
|
1205
|
+
"introduced": "0.6.0",
|
|
1206
|
+
"description": "A vibrant background option for neutral UI elements, such as announcement banners."
|
|
1234
1207
|
},
|
|
1235
|
-
"value": "#
|
|
1208
|
+
"value": "#CECFD2"
|
|
1236
1209
|
},
|
|
1237
|
-
"Dark/color.background.
|
|
1210
|
+
"Dark/color.background.neutral.bold.hovered": {
|
|
1238
1211
|
"attributes": {
|
|
1239
1212
|
"group": "paint",
|
|
1240
1213
|
"state": "active",
|
|
1241
|
-
"introduced": "
|
|
1242
|
-
"description": "Hovered state of color.background.
|
|
1214
|
+
"introduced": "0.6.0",
|
|
1215
|
+
"description": "Hovered state of color.background.neutral.bold"
|
|
1243
1216
|
},
|
|
1244
|
-
"value": "#
|
|
1217
|
+
"value": "#BFC1C4"
|
|
1245
1218
|
},
|
|
1246
|
-
"Dark/color.background.
|
|
1219
|
+
"Dark/color.background.neutral.bold.pressed": {
|
|
1247
1220
|
"attributes": {
|
|
1248
1221
|
"group": "paint",
|
|
1249
1222
|
"state": "active",
|
|
1250
|
-
"introduced": "
|
|
1251
|
-
"description": "Pressed state of color.background.
|
|
1223
|
+
"introduced": "0.6.0",
|
|
1224
|
+
"description": "Pressed state of color.background.neutral.bold"
|
|
1252
1225
|
},
|
|
1253
|
-
"value": "#
|
|
1226
|
+
"value": "#A9ABAF"
|
|
1254
1227
|
},
|
|
1255
|
-
"Dark/color.background.
|
|
1228
|
+
"Dark/color.background.selected": {
|
|
1256
1229
|
"attributes": {
|
|
1257
1230
|
"group": "paint",
|
|
1258
1231
|
"state": "active",
|
|
1259
|
-
"introduced": "0.
|
|
1260
|
-
"description": "Use for
|
|
1232
|
+
"introduced": "0.6.2",
|
|
1233
|
+
"description": "Use for the background of elements in a selected state, such as in opened dropdown buttons."
|
|
1261
1234
|
},
|
|
1262
|
-
"value": "#
|
|
1235
|
+
"value": "#1C2B42"
|
|
1263
1236
|
},
|
|
1264
|
-
"Dark/color.background.
|
|
1237
|
+
"Dark/color.background.selected.hovered": {
|
|
1265
1238
|
"attributes": {
|
|
1266
1239
|
"group": "paint",
|
|
1267
1240
|
"state": "active",
|
|
1268
|
-
"introduced": "
|
|
1269
|
-
"description": "Hovered state
|
|
1241
|
+
"introduced": "0.6.2",
|
|
1242
|
+
"description": "Hovered state for color.background.selected"
|
|
1270
1243
|
},
|
|
1271
|
-
"value": "#
|
|
1244
|
+
"value": "#123263"
|
|
1272
1245
|
},
|
|
1273
|
-
"Dark/color.background.
|
|
1246
|
+
"Dark/color.background.selected.pressed": {
|
|
1274
1247
|
"attributes": {
|
|
1275
1248
|
"group": "paint",
|
|
1276
1249
|
"state": "active",
|
|
1277
|
-
"introduced": "
|
|
1278
|
-
"description": "Pressed state
|
|
1250
|
+
"introduced": "0.6.2",
|
|
1251
|
+
"description": "Pressed state for color.background.selected"
|
|
1279
1252
|
},
|
|
1280
|
-
"value": "#
|
|
1253
|
+
"value": "#1558BC"
|
|
1281
1254
|
},
|
|
1282
|
-
"Dark/color.background.
|
|
1255
|
+
"Dark/color.background.selected.bold": {
|
|
1283
1256
|
"attributes": {
|
|
1284
1257
|
"group": "paint",
|
|
1285
1258
|
"state": "active",
|
|
1286
|
-
"introduced": "0.
|
|
1287
|
-
"description": "Use for
|
|
1259
|
+
"introduced": "0.6.2",
|
|
1260
|
+
"description": "Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons."
|
|
1288
1261
|
},
|
|
1289
|
-
"value": "#
|
|
1262
|
+
"value": "#669DF1"
|
|
1290
1263
|
},
|
|
1291
|
-
"Dark/color.background.
|
|
1264
|
+
"Dark/color.background.selected.bold.hovered": {
|
|
1292
1265
|
"attributes": {
|
|
1293
1266
|
"group": "paint",
|
|
1294
1267
|
"state": "active",
|
|
1295
|
-
"introduced": "
|
|
1296
|
-
"description": "Hovered state of color.background.
|
|
1268
|
+
"introduced": "0.6.2",
|
|
1269
|
+
"description": "Hovered state of color.background.selected.bold"
|
|
1297
1270
|
},
|
|
1298
|
-
"value": "#
|
|
1271
|
+
"value": "#8FB8F6"
|
|
1299
1272
|
},
|
|
1300
|
-
"Dark/color.background.
|
|
1273
|
+
"Dark/color.background.selected.bold.pressed": {
|
|
1301
1274
|
"attributes": {
|
|
1302
1275
|
"group": "paint",
|
|
1303
1276
|
"state": "active",
|
|
1304
|
-
"introduced": "
|
|
1305
|
-
"description": "Pressed state of color.background.
|
|
1277
|
+
"introduced": "0.6.2",
|
|
1278
|
+
"description": "Pressed state of color.background.selected.bold"
|
|
1306
1279
|
},
|
|
1307
|
-
"value": "#
|
|
1280
|
+
"value": "#CFE1FD"
|
|
1308
1281
|
},
|
|
1309
|
-
"Dark/color.background.
|
|
1282
|
+
"Dark/color.background.brand.subtlest": {
|
|
1310
1283
|
"attributes": {
|
|
1311
1284
|
"group": "paint",
|
|
1312
1285
|
"state": "active",
|
|
1313
|
-
"introduced": "
|
|
1314
|
-
"description": "Use for
|
|
1286
|
+
"introduced": "1.13.0",
|
|
1287
|
+
"description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
|
|
1315
1288
|
},
|
|
1316
|
-
"value": "#
|
|
1289
|
+
"value": "#1C2B42"
|
|
1317
1290
|
},
|
|
1318
|
-
"Dark/color.background.
|
|
1291
|
+
"Dark/color.background.brand.subtlest.hovered": {
|
|
1319
1292
|
"attributes": {
|
|
1320
1293
|
"group": "paint",
|
|
1321
1294
|
"state": "active",
|
|
1322
|
-
"introduced": "1.
|
|
1323
|
-
"description": "Hovered state of color.background.
|
|
1295
|
+
"introduced": "1.13.0",
|
|
1296
|
+
"description": "Hovered state of color.background.brand.subtlest."
|
|
1324
1297
|
},
|
|
1325
|
-
"value": "#
|
|
1298
|
+
"value": "#123263"
|
|
1326
1299
|
},
|
|
1327
|
-
"Dark/color.background.
|
|
1300
|
+
"Dark/color.background.brand.subtlest.pressed": {
|
|
1328
1301
|
"attributes": {
|
|
1329
1302
|
"group": "paint",
|
|
1330
1303
|
"state": "active",
|
|
1331
|
-
"introduced": "1.
|
|
1332
|
-
"description": "Pressed state of color.background.
|
|
1304
|
+
"introduced": "1.13.0",
|
|
1305
|
+
"description": "Pressed state of color.background.brand.subtlest"
|
|
1333
1306
|
},
|
|
1334
|
-
"value": "#
|
|
1307
|
+
"value": "#144794"
|
|
1335
1308
|
},
|
|
1336
|
-
"Dark/color.background.
|
|
1309
|
+
"Dark/color.background.brand.bold": {
|
|
1337
1310
|
"attributes": {
|
|
1338
1311
|
"group": "paint",
|
|
1339
1312
|
"state": "active",
|
|
1340
|
-
"introduced": "0.
|
|
1341
|
-
"description": "Use for
|
|
1313
|
+
"introduced": "0.6.0",
|
|
1314
|
+
"description": "Use for the background of elements used to reinforce our brand, but with more emphasis."
|
|
1342
1315
|
},
|
|
1343
|
-
"value": "#
|
|
1316
|
+
"value": "#669DF1"
|
|
1344
1317
|
},
|
|
1345
|
-
"Dark/color.background.
|
|
1318
|
+
"Dark/color.background.brand.bold.hovered": {
|
|
1346
1319
|
"attributes": {
|
|
1347
1320
|
"group": "paint",
|
|
1348
1321
|
"state": "active",
|
|
1349
|
-
"introduced": "
|
|
1350
|
-
"description": "Hovered state of color.background.
|
|
1322
|
+
"introduced": "0.6.0",
|
|
1323
|
+
"description": "Hovered state of color.background.brand.bold."
|
|
1351
1324
|
},
|
|
1352
|
-
"value": "#
|
|
1325
|
+
"value": "#8FB8F6"
|
|
1353
1326
|
},
|
|
1354
|
-
"Dark/color.background.
|
|
1327
|
+
"Dark/color.background.brand.bold.pressed": {
|
|
1355
1328
|
"attributes": {
|
|
1356
1329
|
"group": "paint",
|
|
1357
1330
|
"state": "active",
|
|
1358
|
-
"introduced": "
|
|
1359
|
-
"description": "Pressed state of color.background.
|
|
1331
|
+
"introduced": "0.6.0",
|
|
1332
|
+
"description": "Pressed state of color.background.brand.bold."
|
|
1360
1333
|
},
|
|
1361
|
-
"value": "#
|
|
1334
|
+
"value": "#ADCBFB"
|
|
1362
1335
|
},
|
|
1363
|
-
"Dark/color.background.
|
|
1336
|
+
"Dark/color.background.brand.boldest": {
|
|
1364
1337
|
"attributes": {
|
|
1365
1338
|
"group": "paint",
|
|
1366
1339
|
"state": "active",
|
|
1367
|
-
"introduced": "
|
|
1368
|
-
"description": "Use for
|
|
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."
|
|
1369
1342
|
},
|
|
1370
|
-
"value": "#
|
|
1343
|
+
"value": "#E9F2FE"
|
|
1371
1344
|
},
|
|
1372
|
-
"Dark/color.background.
|
|
1345
|
+
"Dark/color.background.brand.boldest.hovered": {
|
|
1373
1346
|
"attributes": {
|
|
1374
1347
|
"group": "paint",
|
|
1375
1348
|
"state": "active",
|
|
1376
|
-
"introduced": "1.
|
|
1377
|
-
"description": "Hovered state of color.background.
|
|
1349
|
+
"introduced": "1.13.0",
|
|
1350
|
+
"description": "Hovered state of color.background.brand.boldest."
|
|
1378
1351
|
},
|
|
1379
|
-
"value": "#
|
|
1352
|
+
"value": "#CFE1FD"
|
|
1380
1353
|
},
|
|
1381
|
-
"Dark/color.background.
|
|
1354
|
+
"Dark/color.background.brand.boldest.pressed": {
|
|
1382
1355
|
"attributes": {
|
|
1383
1356
|
"group": "paint",
|
|
1384
1357
|
"state": "active",
|
|
1385
|
-
"introduced": "1.
|
|
1386
|
-
"description": "Pressed state of color.background.
|
|
1358
|
+
"introduced": "1.13.0",
|
|
1359
|
+
"description": "Pressed state of color.background.brand.boldest."
|
|
1387
1360
|
},
|
|
1388
|
-
"value": "#
|
|
1361
|
+
"value": "#ADCBFB"
|
|
1389
1362
|
},
|
|
1390
|
-
"Dark/color.background.
|
|
1363
|
+
"Dark/color.background.danger": {
|
|
1391
1364
|
"attributes": {
|
|
1392
1365
|
"group": "paint",
|
|
1393
1366
|
"state": "active",
|
|
1394
|
-
"introduced": "0.
|
|
1395
|
-
"description": "Use for
|
|
1367
|
+
"introduced": "0.6.0",
|
|
1368
|
+
"description": "Use for backgrounds communicating critical information, such in error section messages."
|
|
1396
1369
|
},
|
|
1397
|
-
"value": "#
|
|
1370
|
+
"value": "#42221F"
|
|
1398
1371
|
},
|
|
1399
|
-
"Dark/color.background.
|
|
1372
|
+
"Dark/color.background.danger.hovered": {
|
|
1400
1373
|
"attributes": {
|
|
1401
1374
|
"group": "paint",
|
|
1402
1375
|
"state": "active",
|
|
1403
|
-
"introduced": "
|
|
1404
|
-
"description": "Hovered state
|
|
1376
|
+
"introduced": "0.6.0",
|
|
1377
|
+
"description": "Hovered state for color.background.danger"
|
|
1405
1378
|
},
|
|
1406
|
-
"value": "#
|
|
1379
|
+
"value": "#5D1F1A"
|
|
1407
1380
|
},
|
|
1408
|
-
"Dark/color.background.
|
|
1381
|
+
"Dark/color.background.danger.pressed": {
|
|
1409
1382
|
"attributes": {
|
|
1410
1383
|
"group": "paint",
|
|
1411
1384
|
"state": "active",
|
|
1412
|
-
"introduced": "
|
|
1413
|
-
"description": "Pressed state
|
|
1385
|
+
"introduced": "0.6.0",
|
|
1386
|
+
"description": "Pressed state for color.background.danger"
|
|
1414
1387
|
},
|
|
1415
|
-
"value": "#
|
|
1388
|
+
"value": "#872821"
|
|
1416
1389
|
},
|
|
1417
|
-
"Dark/color.background.
|
|
1390
|
+
"Dark/color.background.danger.subtler": {
|
|
1418
1391
|
"attributes": {
|
|
1419
1392
|
"group": "paint",
|
|
1420
1393
|
"state": "active",
|
|
1421
|
-
"introduced": "
|
|
1422
|
-
"description": "Use for
|
|
1394
|
+
"introduced": "8.1.0",
|
|
1395
|
+
"description": "Use for backgrounds of danger lozenges and badges to ensure accessibility and desired visual appearance."
|
|
1423
1396
|
},
|
|
1424
|
-
"value": "#
|
|
1397
|
+
"value": "#5D1F1A"
|
|
1425
1398
|
},
|
|
1426
|
-
"Dark/color.background.
|
|
1399
|
+
"Dark/color.background.danger.subtler.hovered": {
|
|
1427
1400
|
"attributes": {
|
|
1428
1401
|
"group": "paint",
|
|
1429
1402
|
"state": "active",
|
|
1430
|
-
"introduced": "1.
|
|
1431
|
-
"description": "Hovered state of color.background.
|
|
1403
|
+
"introduced": "8.1.0",
|
|
1404
|
+
"description": "Hovered state of color.background.danger.subtler"
|
|
1432
1405
|
},
|
|
1433
|
-
"value": "#
|
|
1406
|
+
"value": "#872821"
|
|
1434
1407
|
},
|
|
1435
|
-
"Dark/color.background.
|
|
1408
|
+
"Dark/color.background.danger.subtler.pressed": {
|
|
1436
1409
|
"attributes": {
|
|
1437
1410
|
"group": "paint",
|
|
1438
1411
|
"state": "active",
|
|
1439
|
-
"introduced": "1.
|
|
1440
|
-
"description": "Pressed state of color.background.
|
|
1412
|
+
"introduced": "8.1.0",
|
|
1413
|
+
"description": "Pressed state of color.background.danger.subtler"
|
|
1441
1414
|
},
|
|
1442
|
-
"value": "#
|
|
1415
|
+
"value": "#AE2E24"
|
|
1443
1416
|
},
|
|
1444
|
-
"Dark/color.background.
|
|
1417
|
+
"Dark/color.background.danger.subtle": {
|
|
1445
1418
|
"attributes": {
|
|
1446
1419
|
"group": "paint",
|
|
1447
1420
|
"state": "active",
|
|
1448
|
-
"introduced": "
|
|
1449
|
-
"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."
|
|
1450
1423
|
},
|
|
1451
|
-
"value": "#
|
|
1424
|
+
"value": "#AE2E24"
|
|
1452
1425
|
},
|
|
1453
|
-
"Dark/color.background.
|
|
1426
|
+
"Dark/color.background.danger.bold": {
|
|
1454
1427
|
"attributes": {
|
|
1455
1428
|
"group": "paint",
|
|
1456
1429
|
"state": "active",
|
|
1457
|
-
"introduced": "
|
|
1458
|
-
"description": "
|
|
1430
|
+
"introduced": "0.6.0",
|
|
1431
|
+
"description": "A vibrant background option for communicating critical information, such as in danger buttons and error banners."
|
|
1459
1432
|
},
|
|
1460
|
-
"value": "#
|
|
1433
|
+
"value": "#F87168"
|
|
1461
1434
|
},
|
|
1462
|
-
"Dark/color.background.
|
|
1435
|
+
"Dark/color.background.danger.bold.hovered": {
|
|
1463
1436
|
"attributes": {
|
|
1464
1437
|
"group": "paint",
|
|
1465
1438
|
"state": "active",
|
|
1466
|
-
"introduced": "
|
|
1467
|
-
"description": "
|
|
1439
|
+
"introduced": "0.6.0",
|
|
1440
|
+
"description": "Hovered state of color.background.danger.bold"
|
|
1468
1441
|
},
|
|
1469
|
-
"value": "#
|
|
1442
|
+
"value": "#FD9891"
|
|
1470
1443
|
},
|
|
1471
|
-
"Dark/color.background.
|
|
1444
|
+
"Dark/color.background.danger.bold.pressed": {
|
|
1472
1445
|
"attributes": {
|
|
1473
1446
|
"group": "paint",
|
|
1474
1447
|
"state": "active",
|
|
1475
|
-
"introduced": "0.
|
|
1476
|
-
"description": "
|
|
1448
|
+
"introduced": "0.6.0",
|
|
1449
|
+
"description": "Pressed state of color.background.danger.bold"
|
|
1477
1450
|
},
|
|
1478
|
-
"value": "#
|
|
1451
|
+
"value": "#FFB8B2"
|
|
1479
1452
|
},
|
|
1480
|
-
"Dark/color.background.
|
|
1453
|
+
"Dark/color.background.warning": {
|
|
1481
1454
|
"attributes": {
|
|
1482
1455
|
"group": "paint",
|
|
1483
1456
|
"state": "active",
|
|
1484
|
-
"introduced": "
|
|
1485
|
-
"description": "
|
|
1457
|
+
"introduced": "0.6.0",
|
|
1458
|
+
"description": "Use for backgrounds communicating caution, such as in warning section messages."
|
|
1486
1459
|
},
|
|
1487
|
-
"value": "#
|
|
1460
|
+
"value": "#3A2C1F"
|
|
1488
1461
|
},
|
|
1489
|
-
"Dark/color.background.
|
|
1462
|
+
"Dark/color.background.warning.hovered": {
|
|
1490
1463
|
"attributes": {
|
|
1491
1464
|
"group": "paint",
|
|
1492
1465
|
"state": "active",
|
|
1493
|
-
"introduced": "
|
|
1494
|
-
"description": "
|
|
1466
|
+
"introduced": "0.6.0",
|
|
1467
|
+
"description": "Hovered state for color.background.warning"
|
|
1495
1468
|
},
|
|
1496
|
-
"value": "#
|
|
1469
|
+
"value": "#693200"
|
|
1497
1470
|
},
|
|
1498
|
-
"Dark/color.background.
|
|
1471
|
+
"Dark/color.background.warning.pressed": {
|
|
1499
1472
|
"attributes": {
|
|
1500
1473
|
"group": "paint",
|
|
1501
1474
|
"state": "active",
|
|
1502
|
-
"introduced": "0.
|
|
1503
|
-
"description": "
|
|
1475
|
+
"introduced": "0.6.0",
|
|
1476
|
+
"description": "Pressed state for color.background.warning"
|
|
1504
1477
|
},
|
|
1505
|
-
"value": "#
|
|
1478
|
+
"value": "#7A3B00"
|
|
1506
1479
|
},
|
|
1507
|
-
"Dark/color.background.
|
|
1480
|
+
"Dark/color.background.warning.subtler": {
|
|
1508
1481
|
"attributes": {
|
|
1509
1482
|
"group": "paint",
|
|
1510
1483
|
"state": "active",
|
|
1511
|
-
"introduced": "1.
|
|
1512
|
-
"description": "
|
|
1484
|
+
"introduced": "8.1.0",
|
|
1485
|
+
"description": "Use for backgrounds of warning lozenges and badges to ensure accessibility and desired visual appearance."
|
|
1513
1486
|
},
|
|
1514
|
-
"value": "#
|
|
1487
|
+
"value": "#693200"
|
|
1515
1488
|
},
|
|
1516
|
-
"Dark/color.background.
|
|
1489
|
+
"Dark/color.background.warning.subtler.hovered": {
|
|
1517
1490
|
"attributes": {
|
|
1518
1491
|
"group": "paint",
|
|
1519
1492
|
"state": "active",
|
|
1520
|
-
"introduced": "1.
|
|
1521
|
-
"description": "
|
|
1493
|
+
"introduced": "8.1.0",
|
|
1494
|
+
"description": "Hovered state of color.background.warning.subtler"
|
|
1522
1495
|
},
|
|
1523
|
-
"value": "#
|
|
1496
|
+
"value": "#7A3B00"
|
|
1524
1497
|
},
|
|
1525
|
-
"Dark/color.background.
|
|
1498
|
+
"Dark/color.background.warning.subtler.pressed": {
|
|
1526
1499
|
"attributes": {
|
|
1527
1500
|
"group": "paint",
|
|
1528
1501
|
"state": "active",
|
|
1529
|
-
"introduced": "
|
|
1530
|
-
"description": "
|
|
1502
|
+
"introduced": "8.1.0",
|
|
1503
|
+
"description": "Pressed state of color.background.warning.subtler"
|
|
1531
1504
|
},
|
|
1532
|
-
"value": "#
|
|
1505
|
+
"value": "#9E4C00"
|
|
1533
1506
|
},
|
|
1534
|
-
"Dark/color.background.
|
|
1507
|
+
"Dark/color.background.warning.subtle": {
|
|
1535
1508
|
"attributes": {
|
|
1536
1509
|
"group": "paint",
|
|
1537
1510
|
"state": "active",
|
|
1538
|
-
"introduced": "
|
|
1539
|
-
"description": "
|
|
1511
|
+
"introduced": "13.2.0",
|
|
1512
|
+
"description": "Background colour for non-interactive elements communicating caution (e.g. semantic badges, 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."
|
|
1540
1513
|
},
|
|
1541
|
-
"value": "#
|
|
1514
|
+
"value": "#9E4C00"
|
|
1542
1515
|
},
|
|
1543
|
-
"Dark/color.background.
|
|
1516
|
+
"Dark/color.background.warning.bold": {
|
|
1544
1517
|
"attributes": {
|
|
1545
1518
|
"group": "paint",
|
|
1546
1519
|
"state": "active",
|
|
1547
|
-
"introduced": "
|
|
1548
|
-
"description": "
|
|
1520
|
+
"introduced": "0.6.0",
|
|
1521
|
+
"description": "A vibrant background option for communicating caution, such as in warning buttons and warning banners."
|
|
1549
1522
|
},
|
|
1550
|
-
"value": "#
|
|
1523
|
+
"value": "#FBC828"
|
|
1551
1524
|
},
|
|
1552
|
-
"Dark/color.background.
|
|
1525
|
+
"Dark/color.background.warning.bold.hovered": {
|
|
1553
1526
|
"attributes": {
|
|
1554
1527
|
"group": "paint",
|
|
1555
1528
|
"state": "active",
|
|
1556
|
-
"introduced": "0.
|
|
1557
|
-
"description": "
|
|
1529
|
+
"introduced": "0.6.0",
|
|
1530
|
+
"description": "Hovered state of color.background.warning.bold"
|
|
1558
1531
|
},
|
|
1559
|
-
"value": "#
|
|
1532
|
+
"value": "#FCA700"
|
|
1560
1533
|
},
|
|
1561
|
-
"Dark/color.background.
|
|
1534
|
+
"Dark/color.background.warning.bold.pressed": {
|
|
1562
1535
|
"attributes": {
|
|
1563
1536
|
"group": "paint",
|
|
1564
1537
|
"state": "active",
|
|
1565
|
-
"introduced": "
|
|
1566
|
-
"description": "
|
|
1538
|
+
"introduced": "0.6.0",
|
|
1539
|
+
"description": "Pressed state of color.background.warning.bold"
|
|
1567
1540
|
},
|
|
1568
|
-
"value": "#
|
|
1541
|
+
"value": "#F68909"
|
|
1569
1542
|
},
|
|
1570
|
-
"Dark/color.background.
|
|
1543
|
+
"Dark/color.background.success": {
|
|
1571
1544
|
"attributes": {
|
|
1572
1545
|
"group": "paint",
|
|
1573
1546
|
"state": "active",
|
|
1574
|
-
"introduced": "
|
|
1575
|
-
"description": "
|
|
1547
|
+
"introduced": "0.6.0",
|
|
1548
|
+
"description": "Use for backgrounds communicating a favorable outcome, such as in success section messages."
|
|
1576
1549
|
},
|
|
1577
|
-
"value": "#
|
|
1550
|
+
"value": "#28311B"
|
|
1578
1551
|
},
|
|
1579
|
-
"Dark/color.background.
|
|
1552
|
+
"Dark/color.background.success.hovered": {
|
|
1580
1553
|
"attributes": {
|
|
1581
1554
|
"group": "paint",
|
|
1582
1555
|
"state": "active",
|
|
1583
|
-
"introduced": "0.
|
|
1584
|
-
"description": "
|
|
1556
|
+
"introduced": "0.6.0",
|
|
1557
|
+
"description": "Hovered state for color.background.success"
|
|
1585
1558
|
},
|
|
1586
|
-
"value": "#
|
|
1559
|
+
"value": "#37471F"
|
|
1587
1560
|
},
|
|
1588
|
-
"Dark/color.background.
|
|
1561
|
+
"Dark/color.background.success.pressed": {
|
|
1589
1562
|
"attributes": {
|
|
1590
1563
|
"group": "paint",
|
|
1591
1564
|
"state": "active",
|
|
1592
|
-
"introduced": "
|
|
1593
|
-
"description": "
|
|
1565
|
+
"introduced": "0.6.0",
|
|
1566
|
+
"description": "Pressed state for color.background.success"
|
|
1594
1567
|
},
|
|
1595
|
-
"value": "#
|
|
1568
|
+
"value": "#3F5224"
|
|
1596
1569
|
},
|
|
1597
|
-
"Dark/color.background.
|
|
1570
|
+
"Dark/color.background.success.subtler": {
|
|
1598
1571
|
"attributes": {
|
|
1599
1572
|
"group": "paint",
|
|
1600
1573
|
"state": "active",
|
|
1601
|
-
"introduced": "1.
|
|
1602
|
-
"description": "
|
|
1574
|
+
"introduced": "8.1.0",
|
|
1575
|
+
"description": "Use for backgrounds of success lozenges and badges to ensure accessibility and desired visual appearance."
|
|
1603
1576
|
},
|
|
1604
|
-
"value": "#
|
|
1577
|
+
"value": "#37471F"
|
|
1605
1578
|
},
|
|
1606
|
-
"Dark/color.background.
|
|
1579
|
+
"Dark/color.background.success.subtler.hovered": {
|
|
1607
1580
|
"attributes": {
|
|
1608
1581
|
"group": "paint",
|
|
1609
1582
|
"state": "active",
|
|
1610
|
-
"introduced": "
|
|
1611
|
-
"description": "
|
|
1583
|
+
"introduced": "8.1.0",
|
|
1584
|
+
"description": "Hovered state of color.background.success.subtler"
|
|
1612
1585
|
},
|
|
1613
|
-
"value": "#
|
|
1586
|
+
"value": "#3F5224"
|
|
1614
1587
|
},
|
|
1615
|
-
"Dark/color.background.
|
|
1588
|
+
"Dark/color.background.success.subtler.pressed": {
|
|
1616
1589
|
"attributes": {
|
|
1617
1590
|
"group": "paint",
|
|
1618
1591
|
"state": "active",
|
|
1619
|
-
"introduced": "1.
|
|
1620
|
-
"description": "
|
|
1592
|
+
"introduced": "8.1.0",
|
|
1593
|
+
"description": "Pressed state of color.background.success.subtler"
|
|
1621
1594
|
},
|
|
1622
|
-
"value": "#
|
|
1595
|
+
"value": "#4C6B1F"
|
|
1623
1596
|
},
|
|
1624
|
-
"Dark/color.background.
|
|
1597
|
+
"Dark/color.background.success.subtle": {
|
|
1625
1598
|
"attributes": {
|
|
1626
1599
|
"group": "paint",
|
|
1627
1600
|
"state": "active",
|
|
1628
|
-
"introduced": "
|
|
1629
|
-
"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."
|
|
1630
1603
|
},
|
|
1631
|
-
"value": "#
|
|
1604
|
+
"value": "#4C6B1F"
|
|
1632
1605
|
},
|
|
1633
|
-
"Dark/color.background.
|
|
1606
|
+
"Dark/color.background.success.bold": {
|
|
1634
1607
|
"attributes": {
|
|
1635
1608
|
"group": "paint",
|
|
1636
1609
|
"state": "active",
|
|
1637
|
-
"introduced": "0.
|
|
1638
|
-
"description": "
|
|
1610
|
+
"introduced": "0.6.0",
|
|
1611
|
+
"description": "A vibrant background option for communicating a favorable outcome, such as in checked toggles."
|
|
1639
1612
|
},
|
|
1640
|
-
"value": "#
|
|
1613
|
+
"value": "#94C748"
|
|
1641
1614
|
},
|
|
1642
|
-
"Dark/color.background.
|
|
1615
|
+
"Dark/color.background.success.bold.hovered": {
|
|
1643
1616
|
"attributes": {
|
|
1644
1617
|
"group": "paint",
|
|
1645
1618
|
"state": "active",
|
|
1646
|
-
"introduced": "
|
|
1647
|
-
"description": "Hovered state of color.background.
|
|
1619
|
+
"introduced": "0.6.0",
|
|
1620
|
+
"description": "Hovered state of color.background.success.bold"
|
|
1648
1621
|
},
|
|
1649
|
-
"value": "#
|
|
1622
|
+
"value": "#B3DF72"
|
|
1650
1623
|
},
|
|
1651
|
-
"Dark/color.background.
|
|
1624
|
+
"Dark/color.background.success.bold.pressed": {
|
|
1652
1625
|
"attributes": {
|
|
1653
1626
|
"group": "paint",
|
|
1654
1627
|
"state": "active",
|
|
1655
|
-
"introduced": "
|
|
1656
|
-
"description": "Pressed state of color.background.
|
|
1628
|
+
"introduced": "0.6.0",
|
|
1629
|
+
"description": "Pressed state of color.background.success.bold"
|
|
1657
1630
|
},
|
|
1658
|
-
"value": "#
|
|
1631
|
+
"value": "#BDE97C"
|
|
1659
1632
|
},
|
|
1660
|
-
"Dark/color.background.
|
|
1633
|
+
"Dark/color.background.discovery": {
|
|
1661
1634
|
"attributes": {
|
|
1662
1635
|
"group": "paint",
|
|
1663
1636
|
"state": "active",
|
|
1664
|
-
"introduced": "0.
|
|
1665
|
-
"description": "Use for
|
|
1637
|
+
"introduced": "0.6.0",
|
|
1638
|
+
"description": "Use for backgrounds communicating change or something new, such as in discovery section messages."
|
|
1666
1639
|
},
|
|
1667
|
-
"value": "#
|
|
1640
|
+
"value": "#35243F"
|
|
1668
1641
|
},
|
|
1669
|
-
"Dark/color.background.
|
|
1642
|
+
"Dark/color.background.discovery.hovered": {
|
|
1670
1643
|
"attributes": {
|
|
1671
1644
|
"group": "paint",
|
|
1672
1645
|
"state": "active",
|
|
1673
|
-
"introduced": "
|
|
1674
|
-
"description": "
|
|
1646
|
+
"introduced": "0.6.0",
|
|
1647
|
+
"description": "Hover state for color.background.discovery"
|
|
1675
1648
|
},
|
|
1676
|
-
"value": "#
|
|
1649
|
+
"value": "#48245D"
|
|
1677
1650
|
},
|
|
1678
|
-
"Dark/color.background.
|
|
1651
|
+
"Dark/color.background.discovery.pressed": {
|
|
1679
1652
|
"attributes": {
|
|
1680
1653
|
"group": "paint",
|
|
1681
1654
|
"state": "active",
|
|
1682
|
-
"introduced": "
|
|
1683
|
-
"description": "Pressed state
|
|
1655
|
+
"introduced": "0.6.0",
|
|
1656
|
+
"description": "Pressed state for color.background.discovery"
|
|
1684
1657
|
},
|
|
1685
|
-
"value": "#
|
|
1658
|
+
"value": "#673286"
|
|
1686
1659
|
},
|
|
1687
|
-
"Dark/color.background.
|
|
1660
|
+
"Dark/color.background.discovery.subtler": {
|
|
1688
1661
|
"attributes": {
|
|
1689
1662
|
"group": "paint",
|
|
1690
1663
|
"state": "active",
|
|
1691
|
-
"introduced": "
|
|
1692
|
-
"description": "Use for
|
|
1664
|
+
"introduced": "8.1.0",
|
|
1665
|
+
"description": "Use for backgrounds of discovery lozenges and badges to ensure accessibility and desired visual appearance."
|
|
1693
1666
|
},
|
|
1694
|
-
"value": "#
|
|
1667
|
+
"value": "#48245D"
|
|
1695
1668
|
},
|
|
1696
|
-
"Dark/color.background.
|
|
1669
|
+
"Dark/color.background.discovery.subtler.hovered": {
|
|
1697
1670
|
"attributes": {
|
|
1698
1671
|
"group": "paint",
|
|
1699
1672
|
"state": "active",
|
|
1700
|
-
"introduced": "1.
|
|
1701
|
-
"description": "Hovered state of color.background.
|
|
1673
|
+
"introduced": "8.1.0",
|
|
1674
|
+
"description": "Hovered state of color.background.discovery.subtler"
|
|
1702
1675
|
},
|
|
1703
|
-
"value": "#
|
|
1676
|
+
"value": "#673286"
|
|
1704
1677
|
},
|
|
1705
|
-
"Dark/color.background.
|
|
1678
|
+
"Dark/color.background.discovery.subtler.pressed": {
|
|
1706
1679
|
"attributes": {
|
|
1707
1680
|
"group": "paint",
|
|
1708
1681
|
"state": "active",
|
|
1709
|
-
"introduced": "1.
|
|
1710
|
-
"description": "Pressed state of color.background.
|
|
1682
|
+
"introduced": "8.1.0",
|
|
1683
|
+
"description": "Pressed state of color.background.discovery.subtler"
|
|
1711
1684
|
},
|
|
1712
|
-
"value": "#
|
|
1685
|
+
"value": "#803FA5"
|
|
1713
1686
|
},
|
|
1714
|
-
"Dark/color.background.
|
|
1687
|
+
"Dark/color.background.discovery.subtle": {
|
|
1715
1688
|
"attributes": {
|
|
1716
1689
|
"group": "paint",
|
|
1717
1690
|
"state": "active",
|
|
1718
|
-
"introduced": "
|
|
1719
|
-
"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."
|
|
1720
1693
|
},
|
|
1721
|
-
"value": "#
|
|
1694
|
+
"value": "#803FA5"
|
|
1722
1695
|
},
|
|
1723
|
-
"Dark/color.background.
|
|
1696
|
+
"Dark/color.background.discovery.bold": {
|
|
1724
1697
|
"attributes": {
|
|
1725
1698
|
"group": "paint",
|
|
1726
1699
|
"state": "active",
|
|
1727
|
-
"introduced": "
|
|
1728
|
-
"description": "
|
|
1700
|
+
"introduced": "0.6.0",
|
|
1701
|
+
"description": "A vibrant background option communicating change or something new, such as in onboarding spotlights."
|
|
1729
1702
|
},
|
|
1730
|
-
"value": "#
|
|
1703
|
+
"value": "#C97CF4"
|
|
1731
1704
|
},
|
|
1732
|
-
"Dark/color.background.
|
|
1705
|
+
"Dark/color.background.discovery.bold.hovered": {
|
|
1733
1706
|
"attributes": {
|
|
1734
1707
|
"group": "paint",
|
|
1735
1708
|
"state": "active",
|
|
1736
|
-
"introduced": "
|
|
1737
|
-
"description": "
|
|
1709
|
+
"introduced": "0.6.0",
|
|
1710
|
+
"description": "Hovered state of color.background.discovery.bold"
|
|
1738
1711
|
},
|
|
1739
|
-
"value": "#
|
|
1712
|
+
"value": "#D8A0F7"
|
|
1740
1713
|
},
|
|
1741
|
-
"Dark/color.background.
|
|
1714
|
+
"Dark/color.background.discovery.bold.pressed": {
|
|
1742
1715
|
"attributes": {
|
|
1743
1716
|
"group": "paint",
|
|
1744
1717
|
"state": "active",
|
|
1745
|
-
"introduced": "0.
|
|
1746
|
-
"description": "
|
|
1718
|
+
"introduced": "0.6.0",
|
|
1719
|
+
"description": "Pressed state of color.background.discovery.bold"
|
|
1747
1720
|
},
|
|
1748
|
-
"value": "#
|
|
1721
|
+
"value": "#E3BDFA"
|
|
1749
1722
|
},
|
|
1750
|
-
"Dark/color.background.
|
|
1723
|
+
"Dark/color.background.information": {
|
|
1751
1724
|
"attributes": {
|
|
1752
1725
|
"group": "paint",
|
|
1753
1726
|
"state": "active",
|
|
1754
|
-
"introduced": "
|
|
1755
|
-
"description": "
|
|
1727
|
+
"introduced": "0.6.0",
|
|
1728
|
+
"description": "Use for backgrounds communicating information or something in-progress, such as in information section messages."
|
|
1756
1729
|
},
|
|
1757
|
-
"value": "#
|
|
1730
|
+
"value": "#1C2B42"
|
|
1758
1731
|
},
|
|
1759
|
-
"Dark/color.background.
|
|
1732
|
+
"Dark/color.background.information.hovered": {
|
|
1760
1733
|
"attributes": {
|
|
1761
1734
|
"group": "paint",
|
|
1762
1735
|
"state": "active",
|
|
1763
|
-
"introduced": "
|
|
1764
|
-
"description": "
|
|
1736
|
+
"introduced": "0.6.0",
|
|
1737
|
+
"description": "Hovered state of color.background.information"
|
|
1765
1738
|
},
|
|
1766
|
-
"value": "#
|
|
1739
|
+
"value": "#123263"
|
|
1767
1740
|
},
|
|
1768
|
-
"Dark/color.background.
|
|
1741
|
+
"Dark/color.background.information.pressed": {
|
|
1769
1742
|
"attributes": {
|
|
1770
1743
|
"group": "paint",
|
|
1771
1744
|
"state": "active",
|
|
1772
|
-
"introduced": "0.
|
|
1773
|
-
"description": "
|
|
1745
|
+
"introduced": "0.6.0",
|
|
1746
|
+
"description": "Pressed state of color.background.information"
|
|
1774
1747
|
},
|
|
1775
|
-
"value": "#
|
|
1748
|
+
"value": "#144794"
|
|
1776
1749
|
},
|
|
1777
|
-
"Dark/color.background.
|
|
1750
|
+
"Dark/color.background.information.subtler": {
|
|
1778
1751
|
"attributes": {
|
|
1779
1752
|
"group": "paint",
|
|
1780
1753
|
"state": "active",
|
|
1781
|
-
"introduced": "1.
|
|
1782
|
-
"description": "
|
|
1754
|
+
"introduced": "8.1.0",
|
|
1755
|
+
"description": "Use for backgrounds of information lozenges and badges to ensure accessibility and desired visual appearance."
|
|
1783
1756
|
},
|
|
1784
|
-
"value": "#
|
|
1757
|
+
"value": "#123263"
|
|
1785
1758
|
},
|
|
1786
|
-
"Dark/color.background.
|
|
1759
|
+
"Dark/color.background.information.subtler.hovered": {
|
|
1787
1760
|
"attributes": {
|
|
1788
1761
|
"group": "paint",
|
|
1789
1762
|
"state": "active",
|
|
1790
|
-
"introduced": "1.
|
|
1791
|
-
"description": "
|
|
1763
|
+
"introduced": "8.1.0",
|
|
1764
|
+
"description": "Hovered state of color.background.information.subtler"
|
|
1792
1765
|
},
|
|
1793
|
-
"value": "#
|
|
1766
|
+
"value": "#144794"
|
|
1794
1767
|
},
|
|
1795
|
-
"Dark/color.background.
|
|
1768
|
+
"Dark/color.background.information.subtler.pressed": {
|
|
1796
1769
|
"attributes": {
|
|
1797
1770
|
"group": "paint",
|
|
1798
1771
|
"state": "active",
|
|
1799
|
-
"introduced": "
|
|
1800
|
-
"description": "
|
|
1772
|
+
"introduced": "8.1.0",
|
|
1773
|
+
"description": "Pressed state of color.background.information.subtler"
|
|
1801
1774
|
},
|
|
1802
|
-
"value": "#
|
|
1775
|
+
"value": "#1558BC"
|
|
1803
1776
|
},
|
|
1804
|
-
"Dark/color.background.
|
|
1777
|
+
"Dark/color.background.information.subtle": {
|
|
1805
1778
|
"attributes": {
|
|
1806
1779
|
"group": "paint",
|
|
1807
1780
|
"state": "active",
|
|
1808
|
-
"introduced": "
|
|
1809
|
-
"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."
|
|
1810
1783
|
},
|
|
1811
|
-
"value": "#
|
|
1784
|
+
"value": "#1558BC"
|
|
1812
1785
|
},
|
|
1813
|
-
"Dark/color.background.
|
|
1786
|
+
"Dark/color.background.information.bold": {
|
|
1814
1787
|
"attributes": {
|
|
1815
1788
|
"group": "paint",
|
|
1816
1789
|
"state": "active",
|
|
1817
|
-
"introduced": "
|
|
1818
|
-
"description": "
|
|
1790
|
+
"introduced": "0.6.0",
|
|
1791
|
+
"description": "A vibrant background option for communicating information or something in-progress."
|
|
1819
1792
|
},
|
|
1820
|
-
"value": "#
|
|
1793
|
+
"value": "#669DF1"
|
|
1821
1794
|
},
|
|
1822
|
-
"Dark/color.background.
|
|
1795
|
+
"Dark/color.background.information.bold.hovered": {
|
|
1823
1796
|
"attributes": {
|
|
1824
1797
|
"group": "paint",
|
|
1825
1798
|
"state": "active",
|
|
1826
|
-
"introduced": "0.
|
|
1827
|
-
"description": "
|
|
1799
|
+
"introduced": "0.6.0",
|
|
1800
|
+
"description": "Hovered state of color.background.information.bold"
|
|
1828
1801
|
},
|
|
1829
|
-
"value": "#
|
|
1802
|
+
"value": "#8FB8F6"
|
|
1830
1803
|
},
|
|
1831
|
-
"Dark/color.background.
|
|
1804
|
+
"Dark/color.background.information.bold.pressed": {
|
|
1832
1805
|
"attributes": {
|
|
1833
1806
|
"group": "paint",
|
|
1834
1807
|
"state": "active",
|
|
1835
|
-
"introduced": "
|
|
1836
|
-
"description": "
|
|
1808
|
+
"introduced": "0.6.0",
|
|
1809
|
+
"description": "Pressed state of color.background.information.bold"
|
|
1837
1810
|
},
|
|
1838
|
-
"value": "#
|
|
1811
|
+
"value": "#ADCBFB"
|
|
1839
1812
|
},
|
|
1840
|
-
"Dark/color.
|
|
1813
|
+
"Dark/color.border": {
|
|
1841
1814
|
"attributes": {
|
|
1842
1815
|
"group": "paint",
|
|
1843
1816
|
"state": "active",
|
|
1844
|
-
"introduced": "
|
|
1845
|
-
"description": "
|
|
1817
|
+
"introduced": "0.6.0",
|
|
1818
|
+
"description": "Use to visually group or separate UI elements, such as flat cards or side panel dividers."
|
|
1846
1819
|
},
|
|
1847
|
-
"value": "#
|
|
1820
|
+
"value": "#E3E4F21F"
|
|
1848
1821
|
},
|
|
1849
|
-
"Dark/color.
|
|
1822
|
+
"Dark/color.border.accent.lime": {
|
|
1850
1823
|
"attributes": {
|
|
1851
1824
|
"group": "paint",
|
|
1852
1825
|
"state": "active",
|
|
1853
|
-
"introduced": "
|
|
1854
|
-
"description": "Use for
|
|
1826
|
+
"introduced": "1.6.0",
|
|
1827
|
+
"description": "Use for lime borders on non-bold backgrounds when there is no meaning tied to the color."
|
|
1855
1828
|
},
|
|
1856
|
-
"value": "#
|
|
1829
|
+
"value": "#82B536"
|
|
1857
1830
|
},
|
|
1858
|
-
"Dark/color.
|
|
1831
|
+
"Dark/color.border.accent.lime.subtle": {
|
|
1859
1832
|
"attributes": {
|
|
1860
1833
|
"group": "paint",
|
|
1861
1834
|
"state": "active",
|
|
1862
|
-
"introduced": "
|
|
1863
|
-
"description": "
|
|
1835
|
+
"introduced": "13.2.0",
|
|
1836
|
+
"description": "Use for decorative lime borders that do not need to meet 3:1 contrast requirements."
|
|
1864
1837
|
},
|
|
1865
|
-
"value": "#
|
|
1838
|
+
"value": "#4C6B1F"
|
|
1866
1839
|
},
|
|
1867
|
-
"Dark/color.
|
|
1840
|
+
"Dark/color.border.accent.red": {
|
|
1868
1841
|
"attributes": {
|
|
1869
1842
|
"group": "paint",
|
|
1870
1843
|
"state": "active",
|
|
1871
|
-
"introduced": "
|
|
1872
|
-
"description": "
|
|
1844
|
+
"introduced": "0.6.0",
|
|
1845
|
+
"description": "Use for red borders on non-bold backgrounds when there is no meaning tied to the color."
|
|
1873
1846
|
},
|
|
1874
|
-
"value": "#
|
|
1847
|
+
"value": "#F15B50"
|
|
1875
1848
|
},
|
|
1876
|
-
"Dark/color.
|
|
1849
|
+
"Dark/color.border.accent.red.subtle": {
|
|
1877
1850
|
"attributes": {
|
|
1878
1851
|
"group": "paint",
|
|
1879
1852
|
"state": "active",
|
|
1880
|
-
"introduced": "
|
|
1881
|
-
"description": "Use for
|
|
1853
|
+
"introduced": "13.2.0",
|
|
1854
|
+
"description": "Use for decorative red borders that do not need to meet 3:1 contrast requirements."
|
|
1882
1855
|
},
|
|
1883
|
-
"value": "#
|
|
1856
|
+
"value": "#AE2E24"
|
|
1884
1857
|
},
|
|
1885
|
-
"Dark/color.
|
|
1858
|
+
"Dark/color.border.accent.orange": {
|
|
1886
1859
|
"attributes": {
|
|
1887
1860
|
"group": "paint",
|
|
1888
1861
|
"state": "active",
|
|
1889
|
-
"introduced": "
|
|
1890
|
-
"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."
|
|
1891
1864
|
},
|
|
1892
|
-
"value": "#
|
|
1865
|
+
"value": "#F68909"
|
|
1893
1866
|
},
|
|
1894
|
-
"Dark/color.
|
|
1867
|
+
"Dark/color.border.accent.orange.subtle": {
|
|
1895
1868
|
"attributes": {
|
|
1896
1869
|
"group": "paint",
|
|
1897
1870
|
"state": "active",
|
|
1898
|
-
"introduced": "
|
|
1899
|
-
"description": "
|
|
1871
|
+
"introduced": "13.2.0",
|
|
1872
|
+
"description": "Use for decorative orange borders that do not need to meet 3:1 contrast requirements."
|
|
1900
1873
|
},
|
|
1901
|
-
"value": "#
|
|
1874
|
+
"value": "#9E4C00"
|
|
1902
1875
|
},
|
|
1903
|
-
"Dark/color.
|
|
1876
|
+
"Dark/color.border.accent.yellow": {
|
|
1904
1877
|
"attributes": {
|
|
1905
1878
|
"group": "paint",
|
|
1906
1879
|
"state": "active",
|
|
1907
|
-
"introduced": "0.
|
|
1908
|
-
"description": "Use for
|
|
1880
|
+
"introduced": "0.6.0",
|
|
1881
|
+
"description": "Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color."
|
|
1909
1882
|
},
|
|
1910
|
-
"value": "#
|
|
1883
|
+
"value": "#CF9F02"
|
|
1911
1884
|
},
|
|
1912
|
-
"Dark/color.
|
|
1885
|
+
"Dark/color.border.accent.yellow.subtle": {
|
|
1913
1886
|
"attributes": {
|
|
1914
1887
|
"group": "paint",
|
|
1915
1888
|
"state": "active",
|
|
1916
|
-
"introduced": "
|
|
1917
|
-
"description": "
|
|
1889
|
+
"introduced": "13.2.0",
|
|
1890
|
+
"description": "Use for decorative yellow borders that do not need to meet 3:1 contrast requirements."
|
|
1918
1891
|
},
|
|
1919
|
-
"value": "#
|
|
1892
|
+
"value": "#7F5F01"
|
|
1920
1893
|
},
|
|
1921
|
-
"Dark/color.
|
|
1894
|
+
"Dark/color.border.accent.green": {
|
|
1922
1895
|
"attributes": {
|
|
1923
1896
|
"group": "paint",
|
|
1924
1897
|
"state": "active",
|
|
1925
|
-
"introduced": "
|
|
1926
|
-
"description": "
|
|
1898
|
+
"introduced": "0.6.0",
|
|
1899
|
+
"description": "Use for green borders on non-bold backgrounds when there is no meaning tied to the color."
|
|
1927
1900
|
},
|
|
1928
|
-
"value": "#
|
|
1901
|
+
"value": "#2ABB7F"
|
|
1929
1902
|
},
|
|
1930
|
-
"Dark/color.
|
|
1903
|
+
"Dark/color.border.accent.green.subtle": {
|
|
1931
1904
|
"attributes": {
|
|
1932
1905
|
"group": "paint",
|
|
1933
1906
|
"state": "active",
|
|
1934
|
-
"introduced": "
|
|
1935
|
-
"description": "Use for
|
|
1907
|
+
"introduced": "13.2.0",
|
|
1908
|
+
"description": "Use for decorative green borders that do not need to meet 3:1 contrast requirements."
|
|
1936
1909
|
},
|
|
1937
|
-
"value": "#
|
|
1910
|
+
"value": "#216E4E"
|
|
1938
1911
|
},
|
|
1939
|
-
"Dark/color.
|
|
1912
|
+
"Dark/color.border.accent.teal": {
|
|
1940
1913
|
"attributes": {
|
|
1941
1914
|
"group": "paint",
|
|
1942
1915
|
"state": "active",
|
|
1943
|
-
"introduced": "
|
|
1944
|
-
"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."
|
|
1945
1918
|
},
|
|
1946
|
-
"value": "#
|
|
1919
|
+
"value": "#42B2D7"
|
|
1947
1920
|
},
|
|
1948
|
-
"Dark/color.
|
|
1921
|
+
"Dark/color.border.accent.teal.subtle": {
|
|
1949
1922
|
"attributes": {
|
|
1950
1923
|
"group": "paint",
|
|
1951
1924
|
"state": "active",
|
|
1952
|
-
"introduced": "
|
|
1953
|
-
"description": "
|
|
1925
|
+
"introduced": "13.2.0",
|
|
1926
|
+
"description": "Use for decorative teal borders that do not need to meet 3:1 contrast requirements."
|
|
1954
1927
|
},
|
|
1955
|
-
"value": "#
|
|
1928
|
+
"value": "#206A83"
|
|
1956
1929
|
},
|
|
1957
|
-
"Dark/color.
|
|
1930
|
+
"Dark/color.border.accent.blue": {
|
|
1958
1931
|
"attributes": {
|
|
1959
1932
|
"group": "paint",
|
|
1960
1933
|
"state": "active",
|
|
1961
|
-
"introduced": "0.
|
|
1962
|
-
"description": "Use for
|
|
1934
|
+
"introduced": "0.6.0",
|
|
1935
|
+
"description": "Use for blue borders on non-bold backgrounds when there is no meaning tied to the color."
|
|
1963
1936
|
},
|
|
1964
|
-
"value": "#
|
|
1937
|
+
"value": "#4688EC"
|
|
1965
1938
|
},
|
|
1966
|
-
"Dark/color.
|
|
1939
|
+
"Dark/color.border.accent.blue.subtle": {
|
|
1967
1940
|
"attributes": {
|
|
1968
1941
|
"group": "paint",
|
|
1969
1942
|
"state": "active",
|
|
1970
|
-
"introduced": "
|
|
1971
|
-
"description": "
|
|
1943
|
+
"introduced": "13.2.0",
|
|
1944
|
+
"description": "Use for decorative blue borders that do not need to meet 3:1 contrast requirements."
|
|
1972
1945
|
},
|
|
1973
|
-
"value": "#
|
|
1946
|
+
"value": "#1558BC"
|
|
1974
1947
|
},
|
|
1975
|
-
"Dark/color.
|
|
1948
|
+
"Dark/color.border.accent.purple": {
|
|
1976
1949
|
"attributes": {
|
|
1977
1950
|
"group": "paint",
|
|
1978
1951
|
"state": "active",
|
|
1979
|
-
"introduced": "
|
|
1980
|
-
"description": "
|
|
1952
|
+
"introduced": "0.6.0",
|
|
1953
|
+
"description": "Use for purple borders on non-bold backgrounds when there is no meaning tied to the color."
|
|
1981
1954
|
},
|
|
1982
|
-
"value": "#
|
|
1955
|
+
"value": "#BF63F3"
|
|
1983
1956
|
},
|
|
1984
|
-
"Dark/color.
|
|
1957
|
+
"Dark/color.border.accent.purple.subtle": {
|
|
1985
1958
|
"attributes": {
|
|
1986
1959
|
"group": "paint",
|
|
1987
1960
|
"state": "active",
|
|
1988
|
-
"introduced": "
|
|
1989
|
-
"description": "Use for
|
|
1961
|
+
"introduced": "13.2.0",
|
|
1962
|
+
"description": "Use for decorative purple borders that do not need to meet 3:1 contrast requirements."
|
|
1990
1963
|
},
|
|
1991
|
-
"value": "#
|
|
1964
|
+
"value": "#803FA5"
|
|
1992
1965
|
},
|
|
1993
|
-
"Dark/color.
|
|
1966
|
+
"Dark/color.border.accent.magenta": {
|
|
1994
1967
|
"attributes": {
|
|
1995
1968
|
"group": "paint",
|
|
1996
1969
|
"state": "active",
|
|
1997
|
-
"introduced": "
|
|
1998
|
-
"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."
|
|
1999
1972
|
},
|
|
2000
|
-
"value": "#
|
|
1973
|
+
"value": "#DA62AC"
|
|
2001
1974
|
},
|
|
2002
|
-
"Dark/color.
|
|
1975
|
+
"Dark/color.border.accent.magenta.subtle": {
|
|
2003
1976
|
"attributes": {
|
|
2004
1977
|
"group": "paint",
|
|
2005
1978
|
"state": "active",
|
|
2006
|
-
"introduced": "
|
|
2007
|
-
"description": "
|
|
1979
|
+
"introduced": "13.2.0",
|
|
1980
|
+
"description": "Use for decorative magenta borders that do not need to meet 3:1 contrast requirements."
|
|
2008
1981
|
},
|
|
2009
|
-
"value": "#
|
|
1982
|
+
"value": "#943D73"
|
|
2010
1983
|
},
|
|
2011
|
-
"Dark/color.
|
|
1984
|
+
"Dark/color.border.accent.gray": {
|
|
2012
1985
|
"attributes": {
|
|
2013
1986
|
"group": "paint",
|
|
2014
1987
|
"state": "active",
|
|
2015
|
-
"introduced": "0.
|
|
2016
|
-
"description": "Use for
|
|
1988
|
+
"introduced": "0.10.5",
|
|
1989
|
+
"description": "Use for borders on non-bold gray accent backgrounds."
|
|
2017
1990
|
},
|
|
2018
|
-
"value": "#
|
|
1991
|
+
"value": "#7E8188"
|
|
2019
1992
|
},
|
|
2020
|
-
"Dark/color.
|
|
1993
|
+
"Dark/color.border.accent.gray.subtle": {
|
|
2021
1994
|
"attributes": {
|
|
2022
1995
|
"group": "paint",
|
|
2023
1996
|
"state": "active",
|
|
2024
|
-
"introduced": "
|
|
2025
|
-
"description": "Use for
|
|
1997
|
+
"introduced": "13.2.0",
|
|
1998
|
+
"description": "Use for decorative gray borders that do not need to meet 3:1 contrast requirements."
|
|
2026
1999
|
},
|
|
2027
|
-
"value": "#
|
|
2000
|
+
"value": "#4B4D51"
|
|
2028
2001
|
},
|
|
2029
|
-
"Dark/color.
|
|
2002
|
+
"Dark/color.border.disabled": {
|
|
2030
2003
|
"attributes": {
|
|
2031
2004
|
"group": "paint",
|
|
2032
2005
|
"state": "active",
|
|
2033
2006
|
"introduced": "0.6.0",
|
|
2034
|
-
"description": "
|
|
2007
|
+
"description": "Use for borders of elements in a disabled state."
|
|
2035
2008
|
},
|
|
2036
|
-
"value": "#
|
|
2009
|
+
"value": "#CECED912"
|
|
2037
2010
|
},
|
|
2038
|
-
"Dark/color.
|
|
2011
|
+
"Dark/color.border.focused": {
|
|
2039
2012
|
"attributes": {
|
|
2040
2013
|
"group": "paint",
|
|
2041
2014
|
"state": "active",
|
|
2042
2015
|
"introduced": "0.6.0",
|
|
2043
|
-
"description": "
|
|
2016
|
+
"description": "Use for focus rings of elements in a focus state."
|
|
2044
2017
|
},
|
|
2045
|
-
"value": "#
|
|
2018
|
+
"value": "#8FB8F6"
|
|
2046
2019
|
},
|
|
2047
|
-
"Dark/color.
|
|
2020
|
+
"Dark/color.border.input": {
|
|
2048
2021
|
"attributes": {
|
|
2049
2022
|
"group": "paint",
|
|
2050
2023
|
"state": "active",
|
|
2051
|
-
"introduced": "0.
|
|
2052
|
-
"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."
|
|
2053
2026
|
},
|
|
2054
|
-
"value": "#
|
|
2027
|
+
"value": "#7E8188"
|
|
2055
2028
|
},
|
|
2056
|
-
"Dark/color.
|
|
2029
|
+
"Dark/color.border.inverse": {
|
|
2057
2030
|
"attributes": {
|
|
2058
2031
|
"group": "paint",
|
|
2059
2032
|
"state": "active",
|
|
2060
|
-
"introduced": "0.
|
|
2061
|
-
"description": "Use for
|
|
2033
|
+
"introduced": "0.6.0",
|
|
2034
|
+
"description": "Use for borders on bold backgrounds."
|
|
2062
2035
|
},
|
|
2063
|
-
"value": "#
|
|
2036
|
+
"value": "#18191A"
|
|
2064
2037
|
},
|
|
2065
|
-
"Dark/color.
|
|
2038
|
+
"Dark/color.border.selected": {
|
|
2066
2039
|
"attributes": {
|
|
2067
2040
|
"group": "paint",
|
|
2068
2041
|
"state": "active",
|
|
2069
|
-
"introduced": "0.
|
|
2070
|
-
"description": "Use for
|
|
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."
|
|
2071
2044
|
},
|
|
2072
|
-
"value": "#
|
|
2045
|
+
"value": "#669DF1"
|
|
2073
2046
|
},
|
|
2074
|
-
"Dark/color.
|
|
2047
|
+
"Dark/color.border.brand": {
|
|
2075
2048
|
"attributes": {
|
|
2076
2049
|
"group": "paint",
|
|
2077
2050
|
"state": "active",
|
|
2078
2051
|
"introduced": "0.6.0",
|
|
2079
|
-
"description": "
|
|
2052
|
+
"description": "Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons."
|
|
2080
2053
|
},
|
|
2081
|
-
"value": "#
|
|
2054
|
+
"value": "#669DF1"
|
|
2082
2055
|
},
|
|
2083
|
-
"Dark/color.
|
|
2056
|
+
"Dark/color.border.danger": {
|
|
2084
2057
|
"attributes": {
|
|
2085
2058
|
"group": "paint",
|
|
2086
2059
|
"state": "active",
|
|
2087
2060
|
"introduced": "0.6.0",
|
|
2088
|
-
"description": "
|
|
2061
|
+
"description": "Use for borders communicating critical information, such as the borders on invalid text fields."
|
|
2089
2062
|
},
|
|
2090
|
-
"value": "#
|
|
2063
|
+
"value": "#F15B50"
|
|
2091
2064
|
},
|
|
2092
|
-
"Dark/color.
|
|
2065
|
+
"Dark/color.border.danger.subtle": {
|
|
2093
2066
|
"attributes": {
|
|
2094
2067
|
"group": "paint",
|
|
2095
2068
|
"state": "active",
|
|
2096
|
-
"introduced": "
|
|
2097
|
-
"description": "
|
|
2069
|
+
"introduced": "13.2.0",
|
|
2070
|
+
"description": "Use for decorative danger borders that do not need to meet 3:1 contrast requirements."
|
|
2098
2071
|
},
|
|
2099
|
-
"value": "#
|
|
2072
|
+
"value": "#AE2E24"
|
|
2100
2073
|
},
|
|
2101
|
-
"Dark/color.
|
|
2074
|
+
"Dark/color.border.warning": {
|
|
2102
2075
|
"attributes": {
|
|
2103
2076
|
"group": "paint",
|
|
2104
2077
|
"state": "active",
|
|
2105
2078
|
"introduced": "0.6.0",
|
|
2106
|
-
"description": "Use for
|
|
2079
|
+
"description": "Use for borders communicating caution."
|
|
2107
2080
|
},
|
|
2108
|
-
"value": "#
|
|
2081
|
+
"value": "#F68909"
|
|
2109
2082
|
},
|
|
2110
|
-
"Dark/color.
|
|
2083
|
+
"Dark/color.border.warning.subtle": {
|
|
2111
2084
|
"attributes": {
|
|
2112
2085
|
"group": "paint",
|
|
2113
2086
|
"state": "active",
|
|
2114
|
-
"introduced": "
|
|
2115
|
-
"description": "
|
|
2087
|
+
"introduced": "13.2.0",
|
|
2088
|
+
"description": "Use for decorative warning borders that do not need to meet 3:1 contrast requirements."
|
|
2116
2089
|
},
|
|
2117
|
-
"value": "#
|
|
2090
|
+
"value": "#9E4C00"
|
|
2118
2091
|
},
|
|
2119
|
-
"Dark/color.
|
|
2092
|
+
"Dark/color.border.success": {
|
|
2120
2093
|
"attributes": {
|
|
2121
2094
|
"group": "paint",
|
|
2122
2095
|
"state": "active",
|
|
2123
2096
|
"introduced": "0.6.0",
|
|
2124
|
-
"description": "
|
|
2097
|
+
"description": "Use for borders communicating a favorable outcome, such as the borders on validated text fields."
|
|
2125
2098
|
},
|
|
2126
|
-
"value": "#
|
|
2099
|
+
"value": "#82B536"
|
|
2127
2100
|
},
|
|
2128
|
-
"Dark/color.
|
|
2101
|
+
"Dark/color.border.success.subtle": {
|
|
2129
2102
|
"attributes": {
|
|
2130
2103
|
"group": "paint",
|
|
2131
2104
|
"state": "active",
|
|
2132
|
-
"introduced": "
|
|
2133
|
-
"description": "
|
|
2105
|
+
"introduced": "13.2.0",
|
|
2106
|
+
"description": "Use for decorative success borders that do not need to meet 3:1 contrast requirements."
|
|
2134
2107
|
},
|
|
2135
|
-
"value": "#
|
|
2108
|
+
"value": "#4C6B1F"
|
|
2136
2109
|
},
|
|
2137
|
-
"Dark/color.
|
|
2110
|
+
"Dark/color.border.discovery": {
|
|
2138
2111
|
"attributes": {
|
|
2139
2112
|
"group": "paint",
|
|
2140
2113
|
"state": "active",
|
|
2141
2114
|
"introduced": "0.6.0",
|
|
2142
|
-
"description": "
|
|
2115
|
+
"description": "Use for borders communicating change or something new, such as the borders in onboarding spotlights."
|
|
2143
2116
|
},
|
|
2144
|
-
"value": "#
|
|
2117
|
+
"value": "#BF63F3"
|
|
2145
2118
|
},
|
|
2146
|
-
"Dark/color.
|
|
2119
|
+
"Dark/color.border.discovery.subtle": {
|
|
2147
2120
|
"attributes": {
|
|
2148
2121
|
"group": "paint",
|
|
2149
2122
|
"state": "active",
|
|
2150
|
-
"introduced": "
|
|
2151
|
-
"description": "
|
|
2123
|
+
"introduced": "13.2.0",
|
|
2124
|
+
"description": "Use for decorative discovery borders that do not need to meet 3:1 contrast requirements."
|
|
2152
2125
|
},
|
|
2153
|
-
"value": "#
|
|
2126
|
+
"value": "#803FA5"
|
|
2154
2127
|
},
|
|
2155
|
-
"Dark/color.
|
|
2128
|
+
"Dark/color.border.information": {
|
|
2156
2129
|
"attributes": {
|
|
2157
2130
|
"group": "paint",
|
|
2158
2131
|
"state": "active",
|
|
2159
|
-
"introduced": "0.6.
|
|
2160
|
-
"description": "Use for
|
|
2132
|
+
"introduced": "0.6.0",
|
|
2133
|
+
"description": "Use for borders communicating information or something in-progress."
|
|
2161
2134
|
},
|
|
2162
|
-
"value": "#
|
|
2135
|
+
"value": "#4688EC"
|
|
2163
2136
|
},
|
|
2164
|
-
"Dark/color.
|
|
2137
|
+
"Dark/color.border.information.subtle": {
|
|
2165
2138
|
"attributes": {
|
|
2166
2139
|
"group": "paint",
|
|
2167
2140
|
"state": "active",
|
|
2168
|
-
"introduced": "
|
|
2169
|
-
"description": "
|
|
2141
|
+
"introduced": "13.2.0",
|
|
2142
|
+
"description": "Use for decorative information borders that do not need to meet 3:1 contrast requirements."
|
|
2170
2143
|
},
|
|
2171
|
-
"value": "#
|
|
2144
|
+
"value": "#1558BC"
|
|
2172
2145
|
},
|
|
2173
|
-
"Dark/color.
|
|
2146
|
+
"Dark/color.border.bold": {
|
|
2174
2147
|
"attributes": {
|
|
2175
2148
|
"group": "paint",
|
|
2176
2149
|
"state": "active",
|
|
2177
|
-
"introduced": "0.
|
|
2178
|
-
"description": "
|
|
2150
|
+
"introduced": "0.10.8",
|
|
2151
|
+
"description": "A neutral border option that passes min 3:1 contrast ratios."
|
|
2179
2152
|
},
|
|
2180
|
-
"value": "#
|
|
2153
|
+
"value": "#7E8188"
|
|
2181
2154
|
},
|
|
2182
|
-
"Dark/color.
|
|
2155
|
+
"Dark/color.text": {
|
|
2183
2156
|
"attributes": {
|
|
2184
2157
|
"group": "paint",
|
|
2185
2158
|
"state": "active",
|
|
2186
|
-
"introduced": "0.6.
|
|
2187
|
-
"description": "Use for
|
|
2159
|
+
"introduced": "0.6.0",
|
|
2160
|
+
"description": "Use for primary text, such as body copy, sentence case headers, and buttons."
|
|
2188
2161
|
},
|
|
2189
|
-
"value": "#
|
|
2162
|
+
"value": "#CECFD2"
|
|
2190
2163
|
},
|
|
2191
|
-
"Dark/color.
|
|
2164
|
+
"Dark/color.text.accent.lime": {
|
|
2192
2165
|
"attributes": {
|
|
2193
2166
|
"group": "paint",
|
|
2194
2167
|
"state": "active",
|
|
2195
|
-
"introduced": "
|
|
2196
|
-
"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."
|
|
2197
2170
|
},
|
|
2198
|
-
"value": "#
|
|
2171
|
+
"value": "#B3DF72"
|
|
2199
2172
|
},
|
|
2200
|
-
"Dark/color.
|
|
2173
|
+
"Dark/color.text.accent.lime.bolder": {
|
|
2201
2174
|
"attributes": {
|
|
2202
2175
|
"group": "paint",
|
|
2203
2176
|
"state": "active",
|
|
2204
|
-
"introduced": "
|
|
2205
|
-
"description": "
|
|
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."
|
|
2206
2179
|
},
|
|
2207
|
-
"value": "#
|
|
2180
|
+
"value": "#D3F1A7"
|
|
2208
2181
|
},
|
|
2209
|
-
"Dark/color.
|
|
2182
|
+
"Dark/color.text.accent.red": {
|
|
2210
2183
|
"attributes": {
|
|
2211
2184
|
"group": "paint",
|
|
2212
2185
|
"state": "active",
|
|
2213
|
-
"introduced": "
|
|
2214
|
-
"description": "Use for
|
|
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."
|
|
2215
2188
|
},
|
|
2216
|
-
"value": "#
|
|
2189
|
+
"value": "#FD9891"
|
|
2217
2190
|
},
|
|
2218
|
-
"Dark/color.
|
|
2191
|
+
"Dark/color.text.accent.red.bolder": {
|
|
2219
2192
|
"attributes": {
|
|
2220
2193
|
"group": "paint",
|
|
2221
2194
|
"state": "active",
|
|
2222
|
-
"introduced": "
|
|
2223
|
-
"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."
|
|
2224
2197
|
},
|
|
2225
|
-
"value": "#
|
|
2198
|
+
"value": "#FFD5D2"
|
|
2226
2199
|
},
|
|
2227
|
-
"Dark/color.
|
|
2200
|
+
"Dark/color.text.accent.orange": {
|
|
2228
2201
|
"attributes": {
|
|
2229
2202
|
"group": "paint",
|
|
2230
2203
|
"state": "active",
|
|
2231
|
-
"introduced": "
|
|
2232
|
-
"description": "
|
|
2204
|
+
"introduced": "0.6.0",
|
|
2205
|
+
"description": "Use for orange text on subtlest and subtler orange accent backgrounds when there is no meaning tied to the color."
|
|
2233
2206
|
},
|
|
2234
|
-
"value": "#
|
|
2207
|
+
"value": "#FBC828"
|
|
2235
2208
|
},
|
|
2236
|
-
"Dark/color.
|
|
2209
|
+
"Dark/color.text.accent.orange.bolder": {
|
|
2237
2210
|
"attributes": {
|
|
2238
2211
|
"group": "paint",
|
|
2239
2212
|
"state": "active",
|
|
2240
|
-
"introduced": "0.
|
|
2241
|
-
"description": "Use for
|
|
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."
|
|
2242
2215
|
},
|
|
2243
|
-
"value": "#
|
|
2216
|
+
"value": "#FCE4A6"
|
|
2244
2217
|
},
|
|
2245
|
-
"Dark/color.
|
|
2218
|
+
"Dark/color.text.accent.yellow": {
|
|
2246
2219
|
"attributes": {
|
|
2247
2220
|
"group": "paint",
|
|
2248
2221
|
"state": "active",
|
|
2249
2222
|
"introduced": "0.6.0",
|
|
2250
|
-
"description": "
|
|
2223
|
+
"description": "Use for yellow text on subtlest and subtler yellow accent backgrounds when there is no meaning tied to the color."
|
|
2251
2224
|
},
|
|
2252
|
-
"value": "#
|
|
2225
|
+
"value": "#EED12B"
|
|
2253
2226
|
},
|
|
2254
|
-
"Dark/color.
|
|
2227
|
+
"Dark/color.text.accent.yellow.bolder": {
|
|
2255
2228
|
"attributes": {
|
|
2256
2229
|
"group": "paint",
|
|
2257
2230
|
"state": "active",
|
|
2258
|
-
"introduced": "0.
|
|
2259
|
-
"description": "
|
|
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."
|
|
2260
2233
|
},
|
|
2261
|
-
"value": "#
|
|
2234
|
+
"value": "#F5E989"
|
|
2262
2235
|
},
|
|
2263
|
-
"Dark/color.
|
|
2236
|
+
"Dark/color.text.accent.green": {
|
|
2264
2237
|
"attributes": {
|
|
2265
2238
|
"group": "paint",
|
|
2266
2239
|
"state": "active",
|
|
2267
|
-
"introduced": "
|
|
2268
|
-
"description": "Use for
|
|
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."
|
|
2269
2242
|
},
|
|
2270
|
-
"value": "#
|
|
2243
|
+
"value": "#7EE2B8"
|
|
2271
2244
|
},
|
|
2272
|
-
"Dark/color.
|
|
2245
|
+
"Dark/color.text.accent.green.bolder": {
|
|
2273
2246
|
"attributes": {
|
|
2274
2247
|
"group": "paint",
|
|
2275
2248
|
"state": "active",
|
|
2276
|
-
"introduced": "
|
|
2277
|
-
"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."
|
|
2278
2251
|
},
|
|
2279
|
-
"value": "#
|
|
2252
|
+
"value": "#BAF3DB"
|
|
2280
2253
|
},
|
|
2281
|
-
"Dark/color.
|
|
2254
|
+
"Dark/color.text.accent.teal": {
|
|
2282
2255
|
"attributes": {
|
|
2283
2256
|
"group": "paint",
|
|
2284
2257
|
"state": "active",
|
|
2285
|
-
"introduced": "
|
|
2286
|
-
"description": "
|
|
2258
|
+
"introduced": "0.6.0",
|
|
2259
|
+
"description": "Use for teal text on subtlest and subtler teal accent backgrounds when there is no meaning tied to the color."
|
|
2287
2260
|
},
|
|
2288
|
-
"value": "#
|
|
2261
|
+
"value": "#9DD9EE"
|
|
2289
2262
|
},
|
|
2290
|
-
"Dark/color.
|
|
2263
|
+
"Dark/color.text.accent.teal.bolder": {
|
|
2291
2264
|
"attributes": {
|
|
2292
2265
|
"group": "paint",
|
|
2293
2266
|
"state": "active",
|
|
2294
|
-
"introduced": "0.
|
|
2295
|
-
"description": "Use for backgrounds
|
|
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."
|
|
2296
2269
|
},
|
|
2297
|
-
"value": "#
|
|
2270
|
+
"value": "#C6EDFB"
|
|
2298
2271
|
},
|
|
2299
|
-
"Dark/color.
|
|
2272
|
+
"Dark/color.text.accent.blue": {
|
|
2300
2273
|
"attributes": {
|
|
2301
2274
|
"group": "paint",
|
|
2302
2275
|
"state": "active",
|
|
2303
2276
|
"introduced": "0.6.0",
|
|
2304
|
-
"description": "
|
|
2277
|
+
"description": "Use for blue text on subtlest and subtler blue accent backgrounds when there is no meaning tied to the color."
|
|
2305
2278
|
},
|
|
2306
|
-
"value": "#
|
|
2279
|
+
"value": "#8FB8F6"
|
|
2307
2280
|
},
|
|
2308
|
-
"Dark/color.
|
|
2281
|
+
"Dark/color.text.accent.blue.bolder": {
|
|
2309
2282
|
"attributes": {
|
|
2310
2283
|
"group": "paint",
|
|
2311
2284
|
"state": "active",
|
|
2312
|
-
"introduced": "0.
|
|
2313
|
-
"description": "
|
|
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."
|
|
2314
2287
|
},
|
|
2315
|
-
"value": "#
|
|
2288
|
+
"value": "#CFE1FD"
|
|
2316
2289
|
},
|
|
2317
|
-
"Dark/color.
|
|
2290
|
+
"Dark/color.text.accent.purple": {
|
|
2318
2291
|
"attributes": {
|
|
2319
2292
|
"group": "paint",
|
|
2320
2293
|
"state": "active",
|
|
2321
|
-
"introduced": "
|
|
2322
|
-
"description": "Use for
|
|
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."
|
|
2323
2296
|
},
|
|
2324
|
-
"value": "#
|
|
2297
|
+
"value": "#D8A0F7"
|
|
2325
2298
|
},
|
|
2326
|
-
"Dark/color.
|
|
2299
|
+
"Dark/color.text.accent.purple.bolder": {
|
|
2327
2300
|
"attributes": {
|
|
2328
2301
|
"group": "paint",
|
|
2329
2302
|
"state": "active",
|
|
2330
|
-
"introduced": "
|
|
2331
|
-
"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."
|
|
2332
2305
|
},
|
|
2333
|
-
"value": "#
|
|
2306
|
+
"value": "#EED7FC"
|
|
2334
2307
|
},
|
|
2335
|
-
"Dark/color.
|
|
2308
|
+
"Dark/color.text.accent.magenta": {
|
|
2336
2309
|
"attributes": {
|
|
2337
2310
|
"group": "paint",
|
|
2338
2311
|
"state": "active",
|
|
2339
|
-
"introduced": "
|
|
2340
|
-
"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."
|
|
2341
2314
|
},
|
|
2342
|
-
"value": "#
|
|
2315
|
+
"value": "#F797D2"
|
|
2343
2316
|
},
|
|
2344
|
-
"Dark/color.
|
|
2317
|
+
"Dark/color.text.accent.magenta.bolder": {
|
|
2345
2318
|
"attributes": {
|
|
2346
2319
|
"group": "paint",
|
|
2347
2320
|
"state": "active",
|
|
2348
|
-
"introduced": "
|
|
2349
|
-
"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."
|
|
2350
2323
|
},
|
|
2351
|
-
"value": "#
|
|
2324
|
+
"value": "#FDD0EC"
|
|
2352
2325
|
},
|
|
2353
|
-
"Dark/color.
|
|
2326
|
+
"Dark/color.text.accent.gray": {
|
|
2354
2327
|
"attributes": {
|
|
2355
2328
|
"group": "paint",
|
|
2356
2329
|
"state": "active",
|
|
2357
|
-
"introduced": "0.
|
|
2358
|
-
"description": "
|
|
2330
|
+
"introduced": "0.10.5",
|
|
2331
|
+
"description": "Use for text on non-bold gray accent backgrounds, such as colored tags."
|
|
2359
2332
|
},
|
|
2360
|
-
"value": "#
|
|
2333
|
+
"value": "#A9ABAF"
|
|
2361
2334
|
},
|
|
2362
|
-
"Dark/color.
|
|
2335
|
+
"Dark/color.text.accent.gray.bolder": {
|
|
2363
2336
|
"attributes": {
|
|
2364
2337
|
"group": "paint",
|
|
2365
2338
|
"state": "active",
|
|
2366
|
-
"introduced": "0.
|
|
2367
|
-
"description": "
|
|
2339
|
+
"introduced": "0.10.5",
|
|
2340
|
+
"description": "Use for text and icons on gray subtle accent backgrounds."
|
|
2368
2341
|
},
|
|
2369
|
-
"value": "#
|
|
2342
|
+
"value": "#E2E3E4"
|
|
2370
2343
|
},
|
|
2371
|
-
"Dark/color.
|
|
2344
|
+
"Dark/color.text.disabled": {
|
|
2372
2345
|
"attributes": {
|
|
2373
2346
|
"group": "paint",
|
|
2374
2347
|
"state": "active",
|
|
2375
|
-
"introduced": "0.
|
|
2376
|
-
"description": "
|
|
2348
|
+
"introduced": "0.0.15",
|
|
2349
|
+
"description": "Use for text in a disabled state."
|
|
2377
2350
|
},
|
|
2378
|
-
"value": "#
|
|
2351
|
+
"value": "#E5E9F640"
|
|
2379
2352
|
},
|
|
2380
|
-
"Dark/color.
|
|
2353
|
+
"Dark/color.text.inverse": {
|
|
2381
2354
|
"attributes": {
|
|
2382
2355
|
"group": "paint",
|
|
2383
2356
|
"state": "active",
|
|
2384
2357
|
"introduced": "0.6.0",
|
|
2385
|
-
"description": "Use for
|
|
2358
|
+
"description": "Use for text on bold backgrounds."
|
|
2386
2359
|
},
|
|
2387
|
-
"value": "#
|
|
2360
|
+
"value": "#1F1F21"
|
|
2388
2361
|
},
|
|
2389
|
-
"Dark/color.
|
|
2362
|
+
"Dark/color.text.selected": {
|
|
2390
2363
|
"attributes": {
|
|
2391
2364
|
"group": "paint",
|
|
2392
2365
|
"state": "active",
|
|
2393
2366
|
"introduced": "0.6.0",
|
|
2394
|
-
"description": "
|
|
2367
|
+
"description": "Use for text in selected or opened states, such as tabs and dropdown buttons."
|
|
2395
2368
|
},
|
|
2396
|
-
"value": "#
|
|
2369
|
+
"value": "#669DF1"
|
|
2397
2370
|
},
|
|
2398
|
-
"Dark/color.
|
|
2371
|
+
"Dark/color.text.brand": {
|
|
2399
2372
|
"attributes": {
|
|
2400
2373
|
"group": "paint",
|
|
2401
2374
|
"state": "active",
|
|
2402
2375
|
"introduced": "0.6.0",
|
|
2403
|
-
"description": "
|
|
2376
|
+
"description": "Use for text that reinforces our brand."
|
|
2404
2377
|
},
|
|
2405
|
-
"value": "#
|
|
2378
|
+
"value": "#669DF1"
|
|
2406
2379
|
},
|
|
2407
|
-
"Dark/color.
|
|
2380
|
+
"Dark/color.text.danger": {
|
|
2408
2381
|
"attributes": {
|
|
2409
2382
|
"group": "paint",
|
|
2410
2383
|
"state": "active",
|
|
2411
|
-
"introduced": "
|
|
2412
|
-
"description": "Use for
|
|
2384
|
+
"introduced": "0.0.15",
|
|
2385
|
+
"description": "Use for critical text, such as input field error messaging."
|
|
2413
2386
|
},
|
|
2414
|
-
"value": "#
|
|
2387
|
+
"value": "#FD9891"
|
|
2415
2388
|
},
|
|
2416
|
-
"Dark/color.
|
|
2389
|
+
"Dark/color.text.danger.bolder": {
|
|
2417
2390
|
"attributes": {
|
|
2418
2391
|
"group": "paint",
|
|
2419
2392
|
"state": "active",
|
|
2420
2393
|
"introduced": "8.1.0",
|
|
2421
|
-
"description": "
|
|
2394
|
+
"description": "Use for text on top of danger semantic labels to ensure accessibility and desired visual appearance."
|
|
2422
2395
|
},
|
|
2423
|
-
"value": "#
|
|
2396
|
+
"value": "#FFD5D2"
|
|
2424
2397
|
},
|
|
2425
|
-
"Dark/color.
|
|
2398
|
+
"Dark/color.text.warning": {
|
|
2426
2399
|
"attributes": {
|
|
2427
2400
|
"group": "paint",
|
|
2428
2401
|
"state": "active",
|
|
2429
|
-
"introduced": "
|
|
2430
|
-
"description": "
|
|
2402
|
+
"introduced": "0.0.15",
|
|
2403
|
+
"description": "Use for text to emphasize caution, such as in moved lozenges."
|
|
2431
2404
|
},
|
|
2432
|
-
"value": "#
|
|
2405
|
+
"value": "#FBC828"
|
|
2433
2406
|
},
|
|
2434
|
-
"Dark/color.
|
|
2407
|
+
"Dark/color.text.warning.inverse": {
|
|
2435
2408
|
"attributes": {
|
|
2436
2409
|
"group": "paint",
|
|
2437
2410
|
"state": "active",
|
|
2438
|
-
"introduced": "
|
|
2439
|
-
"description": "
|
|
2411
|
+
"introduced": "0.6.0",
|
|
2412
|
+
"description": "Use for text when on bold warning backgrounds."
|
|
2440
2413
|
},
|
|
2441
|
-
"value": "#
|
|
2414
|
+
"value": "#1F1F21"
|
|
2442
2415
|
},
|
|
2443
|
-
"Dark/color.
|
|
2416
|
+
"Dark/color.text.warning.bolder": {
|
|
2444
2417
|
"attributes": {
|
|
2445
2418
|
"group": "paint",
|
|
2446
2419
|
"state": "active",
|
|
2447
|
-
"introduced": "
|
|
2448
|
-
"description": "
|
|
2420
|
+
"introduced": "8.1.0",
|
|
2421
|
+
"description": "Use for text on top of warning semantic labels to ensure accessibility and desired visual appearance."
|
|
2449
2422
|
},
|
|
2450
|
-
"value": "#
|
|
2423
|
+
"value": "#FCE4A6"
|
|
2451
2424
|
},
|
|
2452
|
-
"Dark/color.
|
|
2425
|
+
"Dark/color.text.success": {
|
|
2453
2426
|
"attributes": {
|
|
2454
2427
|
"group": "paint",
|
|
2455
2428
|
"state": "active",
|
|
2456
|
-
"introduced": "0.
|
|
2457
|
-
"description": "
|
|
2429
|
+
"introduced": "0.0.15",
|
|
2430
|
+
"description": "Use for text to communicate a favorable outcome, such as input field success messaging."
|
|
2458
2431
|
},
|
|
2459
|
-
"value": "#
|
|
2432
|
+
"value": "#B3DF72"
|
|
2460
2433
|
},
|
|
2461
|
-
"Dark/color.
|
|
2434
|
+
"Dark/color.text.success.bolder": {
|
|
2462
2435
|
"attributes": {
|
|
2463
2436
|
"group": "paint",
|
|
2464
2437
|
"state": "active",
|
|
2465
|
-
"introduced": "
|
|
2466
|
-
"description": "
|
|
2438
|
+
"introduced": "8.1.0",
|
|
2439
|
+
"description": "Use for text on top of success semantic labels to ensure accessibility and desired visual appearance."
|
|
2467
2440
|
},
|
|
2468
|
-
"value": "#
|
|
2441
|
+
"value": "#D3F1A7"
|
|
2469
2442
|
},
|
|
2470
|
-
"Dark/color.
|
|
2443
|
+
"Dark/color.text.discovery": {
|
|
2471
2444
|
"attributes": {
|
|
2472
2445
|
"group": "paint",
|
|
2473
2446
|
"state": "active",
|
|
2474
|
-
"introduced": "0.
|
|
2475
|
-
"description": "Use for
|
|
2447
|
+
"introduced": "0.0.15",
|
|
2448
|
+
"description": "Use for text to emphasize change or something new, such as in new lozenges."
|
|
2476
2449
|
},
|
|
2477
|
-
"value": "#
|
|
2450
|
+
"value": "#D8A0F7"
|
|
2478
2451
|
},
|
|
2479
|
-
"Dark/color.
|
|
2452
|
+
"Dark/color.text.discovery.bolder": {
|
|
2480
2453
|
"attributes": {
|
|
2481
2454
|
"group": "paint",
|
|
2482
2455
|
"state": "active",
|
|
2483
|
-
"introduced": "
|
|
2484
|
-
"description": "
|
|
2456
|
+
"introduced": "8.1.0",
|
|
2457
|
+
"description": "Use for text on top of discovery semantic labels to ensure accessibility and desired visual appearance."
|
|
2485
2458
|
},
|
|
2486
|
-
"value": "#
|
|
2459
|
+
"value": "#EED7FC"
|
|
2487
2460
|
},
|
|
2488
|
-
"Dark/color.
|
|
2461
|
+
"Dark/color.text.information": {
|
|
2489
2462
|
"attributes": {
|
|
2490
2463
|
"group": "paint",
|
|
2491
2464
|
"state": "active",
|
|
2492
2465
|
"introduced": "0.6.0",
|
|
2493
|
-
"description": "
|
|
2466
|
+
"description": "Use for informative text or to communicate something is in progress, such as in-progress lozenges."
|
|
2494
2467
|
},
|
|
2495
|
-
"value": "#
|
|
2468
|
+
"value": "#8FB8F6"
|
|
2496
2469
|
},
|
|
2497
|
-
"Dark/color.
|
|
2470
|
+
"Dark/color.text.information.bolder": {
|
|
2498
2471
|
"attributes": {
|
|
2499
2472
|
"group": "paint",
|
|
2500
2473
|
"state": "active",
|
|
2501
2474
|
"introduced": "8.1.0",
|
|
2502
|
-
"description": "Use for
|
|
2475
|
+
"description": "Use for text on top of information semantic labels to ensure accessibility and desired visual appearance."
|
|
2503
2476
|
},
|
|
2504
|
-
"value": "#
|
|
2477
|
+
"value": "#CFE1FD"
|
|
2505
2478
|
},
|
|
2506
|
-
"Dark/color.
|
|
2479
|
+
"Dark/color.text.subtlest": {
|
|
2507
2480
|
"attributes": {
|
|
2508
2481
|
"group": "paint",
|
|
2509
2482
|
"state": "active",
|
|
2510
|
-
"introduced": "
|
|
2511
|
-
"description": "
|
|
2483
|
+
"introduced": "0.6.0",
|
|
2484
|
+
"description": "Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text."
|
|
2512
2485
|
},
|
|
2513
|
-
"value": "#
|
|
2486
|
+
"value": "#96999E"
|
|
2514
2487
|
},
|
|
2515
|
-
"Dark/color.
|
|
2488
|
+
"Dark/color.text.subtle": {
|
|
2516
2489
|
"attributes": {
|
|
2517
2490
|
"group": "paint",
|
|
2518
2491
|
"state": "active",
|
|
2519
|
-
"introduced": "
|
|
2520
|
-
"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."
|
|
2521
2494
|
},
|
|
2522
|
-
"value": "#
|
|
2495
|
+
"value": "#A9ABAF"
|
|
2523
2496
|
},
|
|
2524
|
-
"Dark/color.
|
|
2497
|
+
"Dark/color.icon": {
|
|
2525
2498
|
"attributes": {
|
|
2526
2499
|
"group": "paint",
|
|
2527
2500
|
"state": "active",
|
|
2528
|
-
"introduced": "
|
|
2529
|
-
"description": "
|
|
2501
|
+
"introduced": "0.6.0",
|
|
2502
|
+
"description": "Use for icon-only buttons, or icons paired with color.text"
|
|
2530
2503
|
},
|
|
2531
|
-
"value": "#
|
|
2504
|
+
"value": "#CECFD2"
|
|
2532
2505
|
},
|
|
2533
|
-
"Dark/color.
|
|
2506
|
+
"Dark/color.icon.accent.lime": {
|
|
2534
2507
|
"attributes": {
|
|
2535
2508
|
"group": "paint",
|
|
2536
2509
|
"state": "active",
|
|
2537
|
-
"introduced": "
|
|
2538
|
-
"description": "
|
|
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."
|
|
2539
2512
|
},
|
|
2540
|
-
"value": "#
|
|
2513
|
+
"value": "#82B536"
|
|
2541
2514
|
},
|
|
2542
|
-
"Dark/color.
|
|
2515
|
+
"Dark/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": "#E2483D"
|
|
2550
2523
|
},
|
|
2551
|
-
"Dark/color.
|
|
2524
|
+
"Dark/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": "#F68909"
|
|
2559
2532
|
},
|
|
2560
|
-
"Dark/color.
|
|
2533
|
+
"Dark/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": "#EED12B"
|
|
2568
2541
|
},
|
|
2569
|
-
"Dark/color.
|
|
2542
|
+
"Dark/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": "#2ABB7F"
|
|
2577
2550
|
},
|
|
2578
|
-
"Dark/color.
|
|
2551
|
+
"Dark/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": "#42B2D7"
|
|
2586
2559
|
},
|
|
2587
|
-
"Dark/color.
|
|
2560
|
+
"Dark/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": "#4688EC"
|
|
2595
2568
|
},
|
|
2596
|
-
"Dark/color.
|
|
2569
|
+
"Dark/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": "#BF63F3"
|
|
2604
2577
|
},
|
|
2605
|
-
"Dark/color.
|
|
2578
|
+
"Dark/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": "#DA62AC"
|
|
2613
2586
|
},
|
|
2614
|
-
"Dark/color.
|
|
2587
|
+
"Dark/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": "#7E8188"
|
|
2622
2595
|
},
|
|
2623
|
-
"Dark/color.
|
|
2596
|
+
"Dark/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": "#E5E9F640"
|
|
2631
2604
|
},
|
|
2632
|
-
"Dark/color.
|
|
2605
|
+
"Dark/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": "#1F1F21"
|
|
2640
2613
|
},
|
|
2641
|
-
"Dark/color.
|
|
2614
|
+
"Dark/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": "#669DF1"
|
|
2649
2622
|
},
|
|
2650
|
-
"Dark/color.
|
|
2623
|
+
"Dark/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": "#669DF1"
|
|
2658
2631
|
},
|
|
2659
|
-
"Dark/color.
|
|
2632
|
+
"Dark/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": "#F15B50"
|
|
2667
2640
|
},
|
|
2668
|
-
"Dark/color.
|
|
2641
|
+
"Dark/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": "#FBC828"
|
|
2676
2649
|
},
|
|
2677
|
-
"Dark/color.
|
|
2650
|
+
"Dark/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": "#1F1F21"
|
|
2685
2658
|
},
|
|
2686
|
-
"Dark/color.
|
|
2659
|
+
"Dark/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": "#82B536"
|
|
2694
2667
|
},
|
|
2695
|
-
"Dark/color.
|
|
2668
|
+
"Dark/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": "#BF63F3"
|
|
2703
2676
|
},
|
|
2704
|
-
"Dark/color.
|
|
2677
|
+
"Dark/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": "#4688EC"
|
|
2712
2685
|
},
|
|
2713
|
-
"Dark/color.
|
|
2686
|
+
"Dark/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": "#96999E"
|
|
2721
2694
|
},
|
|
2722
|
-
"Dark/color.
|
|
2695
|
+
"Dark/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": "#A9ABAF"
|
|
2730
2703
|
},
|
|
2731
|
-
"Dark/color.
|
|
2704
|
+
"Dark/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": "#669DF1"
|
|
2739
2712
|
},
|
|
2740
|
-
"Dark/color.
|
|
2713
|
+
"Dark/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": "#8FB8F6"
|
|
2748
2721
|
},
|
|
2749
|
-
"Dark/color.
|
|
2722
|
+
"Dark/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": "#D8A0F7"
|
|
2757
2730
|
},
|
|
2758
|
-
"Dark/color.
|
|
2731
|
+
"Dark/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": "#EED7FC"
|
|
2766
2739
|
},
|
|
2767
2740
|
"Dark/color.interaction.hovered": {
|
|
2768
2741
|
"attributes": {
|
|
@@ -2800,6 +2773,33 @@
|
|
|
2800
2773
|
},
|
|
2801
2774
|
"value": "#BDBDBD0A"
|
|
2802
2775
|
},
|
|
2776
|
+
"Dark/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": "#10121499"
|
|
2784
|
+
},
|
|
2785
|
+
"Dark/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": "#1D7AFC14"
|
|
2793
|
+
},
|
|
2794
|
+
"Dark/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": "#E3493514"
|
|
2802
|
+
},
|
|
2803
2803
|
"Dark/color.chart.categorical.1": {
|
|
2804
2804
|
"attributes": {
|
|
2805
2805
|
"group": "paint",
|
|
@@ -3700,6 +3700,105 @@
|
|
|
3700
3700
|
},
|
|
3701
3701
|
"value": "#CFE1FD"
|
|
3702
3702
|
},
|
|
3703
|
+
"Dark/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": "#FFFFFF"
|
|
3711
|
+
},
|
|
3712
|
+
"Dark/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": "#E2E3E4"
|
|
3720
|
+
},
|
|
3721
|
+
"Dark/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": "#CECFD2"
|
|
3729
|
+
},
|
|
3730
|
+
"Dark/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": "#82B536"
|
|
3738
|
+
},
|
|
3739
|
+
"Dark/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
|
+
"Dark/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": "#357DE8"
|
|
3756
|
+
},
|
|
3757
|
+
"Dark/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": "#BF63F3"
|
|
3765
|
+
},
|
|
3766
|
+
"Dark/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": "#82B536"
|
|
3774
|
+
},
|
|
3775
|
+
"Dark/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
|
+
"Dark/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": "#357DE8"
|
|
3792
|
+
},
|
|
3793
|
+
"Dark/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": "#BF63F3"
|
|
3801
|
+
},
|
|
3703
3802
|
"Dark/elevation.surface": {
|
|
3704
3803
|
"attributes": {
|
|
3705
3804
|
"group": "paint",
|