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