@atlaskit/tokens 13.2.0 → 13.3.0

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