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