@amboss/design-system 1.16.1 → 1.16.2-canary2

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 (105) hide show
  1. package/build/cjs/src/components/PictogramButton/PictogramButton.js +3 -2
  2. package/build/cjs/src/components/RoundButton/RoundButton.js +3 -2
  3. package/build/esm/src/components/PictogramButton/PictogramButton.js +3 -2
  4. package/build/esm/src/components/PictogramButton/PictogramButton.js.map +1 -1
  5. package/build/esm/src/components/RoundButton/RoundButton.js +3 -2
  6. package/build/esm/src/components/RoundButton/RoundButton.js.map +1 -1
  7. package/package.json +4 -2
  8. package/build/cjs/scss/themes/dark.scss +0 -111
  9. package/build/cjs/scss/themes/light.scss +0 -111
  10. package/build/esm/build-tokens/_breakpoints.json +0 -17
  11. package/build/esm/build-tokens/_colors.json +0 -918
  12. package/build/esm/build-tokens/_icon_sizes_map.json +0 -7
  13. package/build/esm/build-tokens/_sizes.json +0 -782
  14. package/build/esm/build-tokens/_subThemeType.d.ts +0 -1
  15. package/build/esm/build-tokens/_zindex.json +0 -17
  16. package/build/esm/build-tokens/assets/icons.json +0 -142
  17. package/build/esm/build-tokens/assets/icons16.json +0 -153
  18. package/build/esm/build-tokens/assets/logo.json +0 -3
  19. package/build/esm/build-tokens/visualConfig.d.ts +0 -767
  20. package/build/esm/scss/themes/dark.scss +0 -111
  21. package/build/esm/scss/themes/light.scss +0 -111
  22. package/build/esm/src/components/Badge/Badge.d.ts +0 -11
  23. package/build/esm/src/components/Box/Box.d.ts +0 -35
  24. package/build/esm/src/components/Button/Button.d.ts +0 -33
  25. package/build/esm/src/components/Callout/Callout.d.ts +0 -14
  26. package/build/esm/src/components/Card/Card.d.ts +0 -16
  27. package/build/esm/src/components/Card/CardBox.d.ts +0 -6
  28. package/build/esm/src/components/Card/CardHeader/CardHeader.d.ts +0 -12
  29. package/build/esm/src/components/Collapsible/Collapsible.d.ts +0 -15
  30. package/build/esm/src/components/Column/Columns.d.ts +0 -45
  31. package/build/esm/src/components/Container/Container.d.ts +0 -14
  32. package/build/esm/src/components/DataTable/DataTable.d.ts +0 -58
  33. package/build/esm/src/components/DataTable/TableBody.d.ts +0 -9
  34. package/build/esm/src/components/DataTable/TableCell.d.ts +0 -15
  35. package/build/esm/src/components/DataTable/TableHeader.d.ts +0 -9
  36. package/build/esm/src/components/DataTable/index.d.ts +0 -4
  37. package/build/esm/src/components/DataTable/types.d.ts +0 -15
  38. package/build/esm/src/components/DataTable/useDataTableSort.d.ts +0 -14
  39. package/build/esm/src/components/Divider/Divider.d.ts +0 -6
  40. package/build/esm/src/components/DropdownMenu/DropdownMenu.d.ts +0 -35
  41. package/build/esm/src/components/DropdownMenu/MenuItem.d.ts +0 -19
  42. package/build/esm/src/components/Form/Checkbox/Checkbox.d.ts +0 -26
  43. package/build/esm/src/components/Form/FormErrorMessages/FormErrorMessages.d.ts +0 -6
  44. package/build/esm/src/components/Form/FormField/FormField.d.ts +0 -15
  45. package/build/esm/src/components/Form/FormFieldGroup/FormFieldGroup.d.ts +0 -11
  46. package/build/esm/src/components/Form/FormLabelText/FormLabelText.d.ts +0 -7
  47. package/build/esm/src/components/Form/Input/Input.d.ts +0 -78
  48. package/build/esm/src/components/Form/Input/index.d.ts +0 -2
  49. package/build/esm/src/components/Form/PasswordInput/PasswordInput.d.ts +0 -76
  50. package/build/esm/src/components/Form/PasswordInput/index.d.ts +0 -2
  51. package/build/esm/src/components/Form/Radio/Radio.d.ts +0 -24
  52. package/build/esm/src/components/Form/RadioButton/RadioButton.d.ts +0 -17
  53. package/build/esm/src/components/Form/SegmentedControl/SegmentedControl.d.ts +0 -31
  54. package/build/esm/src/components/Form/SegmentedControl/SegmentedControlOption.d.ts +0 -8
  55. package/build/esm/src/components/Form/Select/Select.d.ts +0 -23
  56. package/build/esm/src/components/Form/Textarea/Textarea.d.ts +0 -48
  57. package/build/esm/src/components/Form/Toggle/Toggle.d.ts +0 -32
  58. package/build/esm/src/components/Form/ToggleButton/ToggleButton.d.ts +0 -26
  59. package/build/esm/src/components/Icon/Icon.d.ts +0 -22
  60. package/build/esm/src/components/Inline/Inline.d.ts +0 -30
  61. package/build/esm/src/components/Link/Link.d.ts +0 -14
  62. package/build/esm/src/components/LoadingSpinner/LoadingSpinner.d.ts +0 -11
  63. package/build/esm/src/components/Logo/Logo.d.ts +0 -8
  64. package/build/esm/src/components/MediaItem/MediaItem.d.ts +0 -14
  65. package/build/esm/src/components/MediaViewerBar/MediaViewerBar.d.ts +0 -7
  66. package/build/esm/src/components/Notification/ExpandedContent.d.ts +0 -2
  67. package/build/esm/src/components/Notification/Notification.d.ts +0 -16
  68. package/build/esm/src/components/Pagination/Pagination.d.ts +0 -17
  69. package/build/esm/src/components/Patterns/ButtonGroup/ButtonGroup.d.ts +0 -14
  70. package/build/esm/src/components/Patterns/Modal/Modal.d.ts +0 -28
  71. package/build/esm/src/components/PictogramButton/PictogramButton.d.ts +0 -15
  72. package/build/esm/src/components/Portal/Portal.d.ts +0 -7
  73. package/build/esm/src/components/ProgressBar/ProgressBar.d.ts +0 -15
  74. package/build/esm/src/components/RoundButton/RoundButton.d.ts +0 -12
  75. package/build/esm/src/components/SearchResult/SearchResult.d.ts +0 -39
  76. package/build/esm/src/components/SegmentedProgressBar/SegmentedProgressBar.d.ts +0 -28
  77. package/build/esm/src/components/SegmentedProgressBar/SegmentedProgressBarUtil.d.ts +0 -10
  78. package/build/esm/src/components/ShadowWebComponent/ShadowWebComponent.d.ts +0 -13
  79. package/build/esm/src/components/Stack/Stack.d.ts +0 -20
  80. package/build/esm/src/components/SubThemeProvider/SubThemeProvider.d.ts +0 -8
  81. package/build/esm/src/components/Tabs/Tabs.d.ts +0 -28
  82. package/build/esm/src/components/Tag/Tag.d.ts +0 -19
  83. package/build/esm/src/components/TagGroup/TagGroup.d.ts +0 -17
  84. package/build/esm/src/components/Tooltip/Tooltip.d.ts +0 -23
  85. package/build/esm/src/components/Tooltip/utils.d.ts +0 -11
  86. package/build/esm/src/components/Typography/Header/Header.d.ts +0 -36
  87. package/build/esm/src/components/Typography/StyledText/StyledText.d.ts +0 -11
  88. package/build/esm/src/components/Typography/Text/Text.d.ts +0 -21
  89. package/build/esm/src/components/Typography/TextClamped/TextClamped.d.ts +0 -10
  90. package/build/esm/src/components/VirtualScrollList/VirtualScrollList.d.ts +0 -11
  91. package/build/esm/src/components/VirtualScrollList/VirtualScrollListReducer.d.ts +0 -36
  92. package/build/esm/src/index.d.ts +0 -54
  93. package/build/esm/src/shared/ScreenReaderText.d.ts +0 -5
  94. package/build/esm/src/shared/flattenChildren.d.ts +0 -11
  95. package/build/esm/src/shared/informDeprecation.d.ts +0 -1
  96. package/build/esm/src/shared/mediaQueries.d.ts +0 -14
  97. package/build/esm/src/shared/replaceDeprecated.d.ts +0 -1
  98. package/build/esm/src/shared/useAutoPosition.d.ts +0 -5
  99. package/build/esm/src/shared/useDocument.d.ts +0 -1
  100. package/build/esm/src/shared/useHover.d.ts +0 -2
  101. package/build/esm/src/shared/useKeyboard.d.ts +0 -17
  102. package/build/esm/src/shared/useOnEscapePress.d.ts +0 -2
  103. package/build/esm/src/shared/useOutsideClick.d.ts +0 -11
  104. package/build/esm/src/shared/useWindow.d.ts +0 -1
  105. package/build/esm/src/types/index.d.ts +0 -57
@@ -1,918 +0,0 @@
1
- {
2
- "canvas": {
3
- "color-canvas": {
4
- "name": "canvas",
5
- "description": "Use as the background color of the whole page or view",
6
- "subState": "",
7
- "darkValue": "#1e2125",
8
- "darkOriginalValue": "night-black.dark02",
9
- "lightValue": "#eef2f5",
10
- "lightOriginalValue": "gray.light03"
11
- }
12
- },
13
- "background": {
14
- "color-background-primary-default": {
15
- "name": "background.primary",
16
- "description": "Primary background color for UI elements (e.g. cards)",
17
- "subState": "default",
18
- "darkValue": "#24282d",
19
- "darkOriginalValue": "night-black.dark01",
20
- "lightValue": "#ffffff",
21
- "lightOriginalValue": "neutral.white"
22
- },
23
- "color-background-secondary-default": {
24
- "name": "background.secondary",
25
- "description": "Use as background color for UI elements that are secondary to the main elements",
26
- "subState": "default",
27
- "darkValue": "#282c34",
28
- "darkOriginalValue": "night-black.regular",
29
- "lightValue": "#f5f7f9",
30
- "lightOriginalValue": "gray.light04"
31
- },
32
- "color-background-secondary-hover": {
33
- "name": "background.secondary",
34
- "subState": "hover",
35
- "darkValue": "#393e47",
36
- "darkOriginalValue": "night-black.light02",
37
- "lightValue": "#eef2f5",
38
- "lightOriginalValue": "gray.light03"
39
- },
40
- "color-background-secondary-active": {
41
- "name": "background.secondary",
42
- "subState": "active",
43
- "darkValue": "#393e47",
44
- "darkOriginalValue": "night-black.light02",
45
- "lightValue": "#ffffff",
46
- "lightOriginalValue": "neutral.white"
47
- },
48
- "color-background-accent-default": {
49
- "name": "background.accent",
50
- "description": "Background of interactive elements (e.g. primary buttons), or the most important UI element of a view (e.g. mobile apps top bar)",
51
- "subState": "default",
52
- "darkValue": "#28816b",
53
- "darkOriginalValue": "night-green.regular",
54
- "lightValue": "#0fa980",
55
- "lightOriginalValue": "green.regular"
56
- },
57
- "color-background-accent-hover": {
58
- "name": "background.accent",
59
- "subState": "hover",
60
- "darkValue": "#41a48a",
61
- "darkOriginalValue": "night-green.light01",
62
- "lightValue": "#0b8363",
63
- "lightOriginalValue": "green.dark01"
64
- },
65
- "color-background-accent-active": {
66
- "name": "background.accent",
67
- "subState": "active",
68
- "darkValue": "#233d3d",
69
- "darkOriginalValue": "night-green.dark01",
70
- "lightValue": "#0a5c45",
71
- "lightOriginalValue": "green.dark02"
72
- },
73
- "color-background-accent-disabled": {
74
- "name": "background.accent",
75
- "subState": "disabled",
76
- "darkValue": "rgba(40, 129, 107, 0.3)",
77
- "darkOriginalValue": "night-green.light01-transparent",
78
- "lightValue": "rgba(15, 169, 128, 0.3)",
79
- "lightOriginalValue": "green.regular-transparent"
80
- },
81
- "color-background-onAccent-default": {
82
- "name": "background.onAccent",
83
- "subState": "default",
84
- "darkValue": "#ffffff",
85
- "darkOriginalValue": "neutral.white",
86
- "lightValue": "#ffffff",
87
- "lightOriginalValue": "neutral.white"
88
- },
89
- "color-background-onAccent-hover": {
90
- "name": "background.onAccent",
91
- "subState": "hover",
92
- "darkValue": "#ffffff",
93
- "darkOriginalValue": "neutral.white",
94
- "lightValue": "#ffffff",
95
- "lightOriginalValue": "neutral.white"
96
- },
97
- "color-background-onAccent-active": {
98
- "name": "background.onAccent",
99
- "subState": "active",
100
- "darkValue": "#ffffff",
101
- "darkOriginalValue": "neutral.white",
102
- "lightValue": "#ffffff",
103
- "lightOriginalValue": "neutral.white"
104
- },
105
- "color-background-onAccent-disabled": {
106
- "name": "background.onAccent",
107
- "subState": "disabled",
108
- "darkValue": "rgba(255, 255, 255, 0.6)",
109
- "darkOriginalValue": "neutral.white-transparent02",
110
- "lightValue": "rgba(255, 255, 255, 0.6)",
111
- "lightOriginalValue": "neutral.white-transparent02"
112
- },
113
- "color-background-error-default": {
114
- "name": "background.error",
115
- "subState": "default",
116
- "darkValue": "#a45355",
117
- "darkOriginalValue": "night-red.regular",
118
- "lightValue": "#dc4847",
119
- "lightOriginalValue": "red.dark01"
120
- },
121
- "color-background-error-hover": {
122
- "name": "background.error",
123
- "subState": "hover",
124
- "darkValue": "#d07c7c",
125
- "darkOriginalValue": "night-red.light01",
126
- "lightValue": "#c02725",
127
- "lightOriginalValue": "red.dark02"
128
- },
129
- "color-background-error-active": {
130
- "name": "background.error",
131
- "subState": "active",
132
- "darkValue": "#4d3237",
133
- "darkOriginalValue": "night-red.dark01",
134
- "lightValue": "#c02725",
135
- "lightOriginalValue": "red.dark02"
136
- },
137
- "color-background-error-disabled": {
138
- "name": "background.error",
139
- "subState": "disabled",
140
- "darkValue": "rgba(164, 83, 85, 0.3)",
141
- "darkOriginalValue": "night-red.regular-transparent01",
142
- "lightValue": "rgba(238, 97, 96, 0.3)",
143
- "lightOriginalValue": "red.regular-transparent01"
144
- },
145
- "color-background-success-default": {
146
- "name": "background.success",
147
- "subState": "default",
148
- "darkValue": "#28816b",
149
- "darkOriginalValue": "night-green.regular",
150
- "lightValue": "#0b8363",
151
- "lightOriginalValue": "green.dark01"
152
- },
153
- "color-background-info-default": {
154
- "name": "background.info",
155
- "subState": "default",
156
- "darkValue": "#2f538a",
157
- "darkOriginalValue": "night-blue.regular",
158
- "lightValue": "#295dae",
159
- "lightOriginalValue": "blue.dark01"
160
- },
161
- "color-background-warning-default": {
162
- "name": "background.warning",
163
- "subState": "default",
164
- "darkValue": "#a4792d",
165
- "darkOriginalValue": "night-orange.regular",
166
- "lightValue": "#df9411",
167
- "lightOriginalValue": "orange.dark01"
168
- },
169
- "color-background-accentSubtle-default": {
170
- "name": "background.accentSubtle",
171
- "description": "Use as backgroud color for selected state of certain UI elements, e.g. segmented control",
172
- "subState": "default",
173
- "darkValue": "#233d3d",
174
- "darkOriginalValue": "night-green.dark01",
175
- "lightValue": "#e8f8f4",
176
- "lightOriginalValue": "green.light03"
177
- },
178
- "color-background-errorSubtle-default": {
179
- "name": "background.errorSubtle",
180
- "description": "Use as backgroud color for negative-message callout",
181
- "subState": "default",
182
- "darkValue": "#312b31",
183
- "darkOriginalValue": "night-red.dark02",
184
- "lightValue": "#fde8e8",
185
- "lightOriginalValue": "red.light03"
186
- },
187
- "color-background-successSubtle-default": {
188
- "name": "background.successSubtle",
189
- "description": "Use as backgroud color for positive-message callout",
190
- "subState": "default",
191
- "darkValue": "#262e33",
192
- "darkOriginalValue": "night-green.dark02",
193
- "lightValue": "#e8f8f4",
194
- "lightOriginalValue": "green.light03"
195
- },
196
- "color-background-infoSubtle-default": {
197
- "name": "background.infoSubtle",
198
- "description": "Use as backgroud color for informational callout",
199
- "subState": "default",
200
- "darkValue": "#282e39",
201
- "darkOriginalValue": "night-blue.dark02",
202
- "lightValue": "#e7effe",
203
- "lightOriginalValue": "blue.light03"
204
- },
205
- "color-background-warningSubtle-default": {
206
- "name": "background.warningSubtle",
207
- "description": "Use as backgroud color for warning-message callout",
208
- "subState": "default",
209
- "darkValue": "#32302f",
210
- "darkOriginalValue": "night-orange.dark02",
211
- "lightValue": "#fef3e1",
212
- "lightOriginalValue": "orange.light03"
213
- },
214
- "color-background-highlight-default": {
215
- "name": "background.highlight",
216
- "description": "Use as backgroud color for 'selected / on' state of certain UI elements, e.g. chips",
217
- "subState": "default",
218
- "darkValue": "#40454f",
219
- "darkOriginalValue": "night-black.light03",
220
- "lightValue": "#607585",
221
- "lightOriginalValue": "gray.regular"
222
- },
223
- "color-background-highlight-hover": {
224
- "name": "background.highlight",
225
- "subState": "hover",
226
- "darkValue": "#393e47",
227
- "darkOriginalValue": "night-black.light02",
228
- "lightValue": "#40515e",
229
- "lightOriginalValue": "gray.dark01"
230
- },
231
- "color-background-contrast-default": {
232
- "name": "background.contrast",
233
- "description": "Provides the highest contrast against the canvas and base background, such as in tooltips",
234
- "subState": "default",
235
- "darkValue": "#ced1d6",
236
- "darkOriginalValue": "night-gray.light02",
237
- "lightValue": "#314554",
238
- "lightOriginalValue": "gray.dark02"
239
- },
240
- "color-background-transparent-default": {
241
- "name": "background.transparent",
242
- "description": "Background color of transparent UI elements with states (e.g. secondary and tertiary buttons)",
243
- "subState": "default",
244
- "darkValue": "rgba(255, 255, 255, 0)",
245
- "darkOriginalValue": "neutral.transparent",
246
- "lightValue": "rgba(255, 255, 255, 0)",
247
- "lightOriginalValue": "neutral.transparent"
248
- },
249
- "color-background-transparent-hover": {
250
- "name": "background.transparent",
251
- "subState": "hover",
252
- "darkValue": "rgba(147, 151, 159, 0.08)",
253
- "darkOriginalValue": "night-gray.transparent",
254
- "lightValue": "rgba(96, 117, 133, 0.08)",
255
- "lightOriginalValue": "gray.transparent"
256
- },
257
- "color-background-transparent-active": {
258
- "name": "background.transparent",
259
- "subState": "active",
260
- "darkValue": "rgba(147, 151, 159, 0.08)",
261
- "darkOriginalValue": "night-gray.transparent",
262
- "lightValue": "rgba(96, 117, 133, 0.08)",
263
- "lightOriginalValue": "gray.transparent"
264
- },
265
- "color-background-backdrop-default": {
266
- "name": "background.backdrop",
267
- "description": "Use as the overlay behind UI elements that appear on top of- and block the main interface (e.g. modals or bottom sheets)",
268
- "subState": "default",
269
- "darkValue": "rgba(0, 0, 0, 0.6)",
270
- "darkOriginalValue": "neutral.black-transparent02",
271
- "lightValue": "rgba(0, 0, 0, 0.6)",
272
- "lightOriginalValue": "neutral.black-transparent02"
273
- }
274
- },
275
- "text": {
276
- "color-text-primary-default": {
277
- "name": "text.primary",
278
- "description": "Primary color for text in any given interface",
279
- "subState": "default",
280
- "darkValue": "#ced1d6",
281
- "darkOriginalValue": "night-gray.light02",
282
- "lightValue": "#1a1c1c",
283
- "lightOriginalValue": "neutral.black"
284
- },
285
- "color-text-primary-hover": {
286
- "name": "text.primary",
287
- "subState": "hover",
288
- "darkValue": "#ffffff",
289
- "darkOriginalValue": "neutral.white",
290
- "lightValue": "#1a1c1c",
291
- "lightOriginalValue": "neutral.black"
292
- },
293
- "color-text-secondary-default": {
294
- "name": "text.secondary",
295
- "description": "Use for content that is secondary or that provides additional context",
296
- "subState": "default",
297
- "darkValue": "#b9bcc3",
298
- "darkOriginalValue": "night-gray.light01",
299
- "lightValue": "#40515e",
300
- "lightOriginalValue": "gray.dark01"
301
- },
302
- "color-text-secondary-hover": {
303
- "name": "text.secondary",
304
- "subState": "hover",
305
- "darkValue": "#ced1d6",
306
- "darkOriginalValue": "night-gray.light02",
307
- "lightValue": "#40515e",
308
- "lightOriginalValue": "gray.dark01"
309
- },
310
- "color-text-tertiary-default": {
311
- "name": "text.tertiary",
312
- "description": "Use for placeholder or 'decorative' text that are not critical to understanding the flow of an interface",
313
- "subState": "default",
314
- "darkValue": "#93979f",
315
- "darkOriginalValue": "night-gray.regular",
316
- "lightValue": "#607585",
317
- "lightOriginalValue": "gray.regular"
318
- },
319
- "color-text-tertiary-disabled": {
320
- "name": "text.tertiary",
321
- "subState": "disabled",
322
- "darkValue": "rgba(216, 218, 222, 0.3)",
323
- "darkOriginalValue": "night-gray.light03-transparent",
324
- "lightValue": "rgba(64, 81, 94, 0.3)",
325
- "lightOriginalValue": "gray.dark01-transparent"
326
- },
327
- "color-text-tertiary-hover": {
328
- "name": "text.tertiary",
329
- "subState": "hover",
330
- "darkValue": "#b9bcc3",
331
- "darkOriginalValue": "night-gray.light01",
332
- "lightValue": "#40515e",
333
- "lightOriginalValue": "gray.dark01"
334
- },
335
- "color-text-quaternary-default": {
336
- "name": "text.quaternary",
337
- "subState": "default",
338
- "darkValue": "#757a84",
339
- "darkOriginalValue": "night-gray.dark01",
340
- "lightValue": "#a3b2bd",
341
- "lightOriginalValue": "gray.light01"
342
- },
343
- "color-text-accent-default": {
344
- "name": "text.accent",
345
- "description": "Use for the main variant of interactive text (links)",
346
- "subState": "default",
347
- "darkValue": "#41a48a",
348
- "darkOriginalValue": "night-green.light01",
349
- "lightValue": "#0b8363",
350
- "lightOriginalValue": "green.dark01"
351
- },
352
- "color-text-accent-hover": {
353
- "name": "text.accent",
354
- "subState": "hover",
355
- "darkValue": "#a6f2dd",
356
- "darkOriginalValue": "night-green.light02",
357
- "lightValue": "#0a5c45",
358
- "lightOriginalValue": "green.dark02"
359
- },
360
- "color-text-onAccent-default": {
361
- "name": "text.onAccent",
362
- "description": "Use on top of background.accent or other colored-background (e.g. the text label on primary button)",
363
- "subState": "default",
364
- "darkValue": "#ffffff",
365
- "darkOriginalValue": "neutral.white",
366
- "lightValue": "#ffffff",
367
- "lightOriginalValue": "neutral.white"
368
- },
369
- "color-text-onAccent-disabled": {
370
- "name": "text.onAccent",
371
- "subState": "disabled",
372
- "darkValue": "rgba(216, 218, 222, 0.3)",
373
- "darkOriginalValue": "night-gray.light03-transparent",
374
- "lightValue": "rgba(255, 255, 255, 0.6)",
375
- "lightOriginalValue": "neutral.white-transparent02"
376
- },
377
- "color-text-info-default": {
378
- "name": "text.info",
379
- "description": "Use this text color for neutral information that needs to be elevated from the normal content",
380
- "subState": "default",
381
- "darkValue": "#99c1fa",
382
- "darkOriginalValue": "night-blue.light02",
383
- "lightValue": "#1c427d",
384
- "lightOriginalValue": "blue.dark02"
385
- },
386
- "color-text-error-default": {
387
- "name": "text.error",
388
- "description": "Use in combination with other visual cues to emphasize a negative message",
389
- "subState": "default",
390
- "darkValue": "#f49a9a",
391
- "darkOriginalValue": "night-red.light02",
392
- "lightValue": "#c02725",
393
- "lightOriginalValue": "red.dark02"
394
- },
395
- "color-text-error-disabled": {
396
- "name": "text.error",
397
- "subState": "disabled",
398
- "darkValue": "rgba(244, 154, 154, 0.3)",
399
- "darkOriginalValue": "night-red.light02-transparent",
400
- "lightValue": "rgba(192, 39, 37, 0.3)",
401
- "lightOriginalValue": "red.dark02-transparent"
402
- },
403
- "color-text-warning-default": {
404
- "name": "text.warning",
405
- "description": "Use in combination with other visual cues and warningSubtle background color to emphasize a negative message",
406
- "subState": "default",
407
- "darkValue": "#fae0b3",
408
- "darkOriginalValue": "night-orange.light02",
409
- "lightValue": "#314554",
410
- "lightOriginalValue": "gray.dark02"
411
- },
412
- "color-text-success-default": {
413
- "name": "text.success",
414
- "description": "Use in combination with other visual cues to emphasize a positive message",
415
- "subState": "default",
416
- "darkValue": "#a6f2dd",
417
- "darkOriginalValue": "night-green.light02",
418
- "lightValue": "#0a5c45",
419
- "lightOriginalValue": "green.dark02"
420
- }
421
- },
422
- "icon": {
423
- "color-icon-primary": {
424
- "name": "icon.primary",
425
- "description": "Primary color for icons in any given interface",
426
- "subState": "",
427
- "darkValue": "#d8dade",
428
- "darkOriginalValue": "night-gray.light03",
429
- "lightValue": "#1a1c1c",
430
- "lightOriginalValue": "neutral.black"
431
- },
432
- "color-icon-secondary": {
433
- "name": "icon.secondary",
434
- "description": "Use for icons that are secondary or that provides additional context",
435
- "subState": "",
436
- "darkValue": "#ced1d6",
437
- "darkOriginalValue": "night-gray.light02",
438
- "lightValue": "#40515e",
439
- "lightOriginalValue": "gray.dark01"
440
- },
441
- "color-icon-tertiary": {
442
- "name": "icon.tertiary",
443
- "description": "Use for icons that provides additional context or to display unselected state of certain UI elements, such as mobile app tab bars",
444
- "subState": "",
445
- "darkValue": "#93979f",
446
- "darkOriginalValue": "night-gray.regular",
447
- "lightValue": "#607585",
448
- "lightOriginalValue": "gray.regular"
449
- },
450
- "color-icon-quaternary": {
451
- "name": "icon.quaternary",
452
- "description": "Use for “decorative” icons that are not critical to understanding the flow of an interface, but function as 'visual anchors'",
453
- "subState": "",
454
- "darkValue": "#757a84",
455
- "darkOriginalValue": "night-gray.dark01",
456
- "lightValue": "#a3b2bd",
457
- "lightOriginalValue": "gray.light01"
458
- },
459
- "color-icon-accent": {
460
- "name": "icon.accent",
461
- "description": "Use for icons that accompany the main variant of interactive text (links)",
462
- "subState": "",
463
- "darkValue": "#41a48a",
464
- "darkOriginalValue": "night-green.light01",
465
- "lightValue": "#0b8363",
466
- "lightOriginalValue": "green.dark01"
467
- },
468
- "color-icon-onAccent": {
469
- "name": "icon.onAccent",
470
- "description": "Use for icons that are placed on top of background.accent (e.g. the icon on primary button)",
471
- "subState": "",
472
- "darkValue": "#ffffff",
473
- "darkOriginalValue": "neutral.white",
474
- "lightValue": "#ffffff",
475
- "lightOriginalValue": "neutral.white"
476
- },
477
- "color-icon-info": {
478
- "name": "icon.info",
479
- "description": "Use for icons that accompany neutral information which needs to be elevated from the normal content",
480
- "subState": "",
481
- "darkValue": "#6e95cf",
482
- "darkOriginalValue": "night-blue.light01",
483
- "lightValue": "#295dae",
484
- "lightOriginalValue": "blue.dark01"
485
- },
486
- "color-icon-error": {
487
- "name": "icon.error",
488
- "description": "Use for icons that accompany negative messages",
489
- "subState": "",
490
- "darkValue": "#d07c7c",
491
- "darkOriginalValue": "night-red.light01",
492
- "lightValue": "#dc4847",
493
- "lightOriginalValue": "red.dark01"
494
- },
495
- "color-icon-warning": {
496
- "name": "icon.warning",
497
- "description": "Use for icons that accompany warning messages",
498
- "subState": "",
499
- "darkValue": "#cbac76",
500
- "darkOriginalValue": "night-orange.light01",
501
- "lightValue": "#df9411",
502
- "lightOriginalValue": "orange.dark01"
503
- },
504
- "color-icon-success": {
505
- "name": "icon.success",
506
- "description": "Use for icons that accompany positive messsages",
507
- "subState": "",
508
- "darkValue": "#41a48a",
509
- "darkOriginalValue": "night-green.light01",
510
- "lightValue": "#0b8363",
511
- "lightOriginalValue": "green.dark01"
512
- },
513
- "color-icon-brand": {
514
- "name": "icon.brand",
515
- "description": "Currently used for icons",
516
- "subState": "",
517
- "darkValue": "#62b2bc",
518
- "darkOriginalValue": "night-brand.light01",
519
- "lightValue": "#0aa6b8",
520
- "lightOriginalValue": "brand.regular"
521
- }
522
- },
523
- "border": {
524
- "color-border-primary-default": {
525
- "name": "border.primary",
526
- "description": "Use to create bounds around UI elements (e.g. Secondary buttons and radio buttons)",
527
- "subState": "default",
528
- "darkValue": "#5b5f67",
529
- "darkOriginalValue": "night-gray.dark02",
530
- "lightValue": "#a3b2bd",
531
- "lightOriginalValue": "gray.light01"
532
- },
533
- "color-border-primary-hover": {
534
- "name": "border.primary",
535
- "subState": "hover",
536
- "darkValue": "#757a84",
537
- "darkOriginalValue": "night-gray.dark01",
538
- "lightValue": "#607585",
539
- "lightOriginalValue": "gray.regular"
540
- },
541
- "color-border-primary-active": {
542
- "name": "border.primary",
543
- "subState": "active",
544
- "darkValue": "#93979f",
545
- "darkOriginalValue": "night-gray.regular",
546
- "lightValue": "#40515e",
547
- "lightOriginalValue": "gray.dark01"
548
- },
549
- "color-border-primary-disabled": {
550
- "name": "border.primary",
551
- "subState": "disabled",
552
- "darkValue": "rgba(147, 151, 159, 0.08)",
553
- "darkOriginalValue": "night-gray.transparent",
554
- "lightValue": "rgba(163, 178, 189, 0.3)",
555
- "lightOriginalValue": "gray.light01-transparent"
556
- },
557
- "color-border-secondary-default": {
558
- "name": "border.secondary",
559
- "subState": "default",
560
- "darkValue": "rgba(147, 149, 159, 0.3)",
561
- "darkOriginalValue": "night-gray.regular-transparent",
562
- "lightValue": "rgba(163, 178, 189, 0.3)",
563
- "lightOriginalValue": "gray.light01-transparent"
564
- },
565
- "color-border-accent-default": {
566
- "name": "border.accent",
567
- "description": "Use as selected state or “on” state of certain UI elements (e.g. radio buttons)",
568
- "subState": "default",
569
- "darkValue": "#41a48a",
570
- "darkOriginalValue": "night-green.light01",
571
- "lightValue": "#0b8363",
572
- "lightOriginalValue": "green.dark01"
573
- },
574
- "color-border-error-default": {
575
- "name": "border.error",
576
- "description": "Use in combination with other visual cues to designate an error state of certain UI elements",
577
- "subState": "default",
578
- "darkValue": "#d07c7c",
579
- "darkOriginalValue": "night-red.light01",
580
- "lightValue": "#dc4847",
581
- "lightOriginalValue": "red.dark01"
582
- },
583
- "color-border-accentSubtle-default": {
584
- "name": "border.accentSubtle",
585
- "description": "Use in combination with color.background.accentSubtle to indicate selected state or 'on' state of certain UI elements (e.g. segemented controls)",
586
- "subState": "default",
587
- "darkValue": "#28816b",
588
- "darkOriginalValue": "night-green.regular",
589
- "lightValue": "#8adcc6",
590
- "lightOriginalValue": "green.light01"
591
- }
592
- },
593
- "divider": {
594
- "color-divider-primary": {
595
- "name": "divider.primary",
596
- "description": "Use for dividers to emphasize the separation between items, columns or sections",
597
- "subState": "",
598
- "darkValue": "#40454f",
599
- "darkOriginalValue": "night-black.light03",
600
- "lightValue": "#e0e6eb",
601
- "lightOriginalValue": "gray.light02"
602
- },
603
- "color-divider-secondary": {
604
- "name": "divider.secondary",
605
- "subState": "",
606
- "darkValue": "rgba(147, 151, 159, 0.08)",
607
- "darkOriginalValue": "night-gray.transparent",
608
- "lightValue": "rgba(163, 178, 189, 0.3)",
609
- "lightOriginalValue": "gray.light01-transparent"
610
- }
611
- },
612
- "toggle": {
613
- "color-toggle-background-highlight": {
614
- "name": "toggle.background",
615
- "subState": "highlight",
616
- "darkValue": "#b2ab39",
617
- "darkOriginalValue": "night-yellow.regular",
618
- "lightValue": "#f3eb75",
619
- "lightOriginalValue": "yellow.light01"
620
- },
621
- "color-toggle-border-highlight": {
622
- "name": "toggle.border",
623
- "subState": "highlight",
624
- "darkValue": "#b2ab39",
625
- "darkOriginalValue": "night-yellow.regular",
626
- "lightValue": "#f3eb75",
627
- "lightOriginalValue": "yellow.light01"
628
- }
629
- },
630
- "badge": {
631
- "color-badge-background-default": {
632
- "name": "badge.background",
633
- "subState": "default",
634
- "darkValue": "transparent",
635
- "darkOriginalValue": "",
636
- "lightValue": "#ffffff",
637
- "lightOriginalValue": "neutral.white"
638
- },
639
- "color-badge-background-green": {
640
- "name": "badge.background",
641
- "subState": "green",
642
- "darkValue": "transparent",
643
- "darkOriginalValue": "",
644
- "lightValue": "#e8f8f4",
645
- "lightOriginalValue": "green.light03"
646
- },
647
- "color-badge-background-blue": {
648
- "name": "badge.background",
649
- "subState": "blue",
650
- "darkValue": "transparent",
651
- "darkOriginalValue": "",
652
- "lightValue": "#e7effe",
653
- "lightOriginalValue": "blue.light03"
654
- },
655
- "color-badge-background-yellow": {
656
- "name": "badge.background",
657
- "subState": "yellow",
658
- "darkValue": "transparent",
659
- "darkOriginalValue": "",
660
- "lightValue": "#fef3e1",
661
- "lightOriginalValue": "orange.light03"
662
- },
663
- "color-badge-background-brand": {
664
- "name": "badge.background",
665
- "subState": "brand",
666
- "darkValue": "transparent",
667
- "darkOriginalValue": "",
668
- "lightValue": "#e7f6f8",
669
- "lightOriginalValue": "brand.light03"
670
- },
671
- "color-badge-background-purple": {
672
- "name": "badge.background",
673
- "subState": "purple",
674
- "darkValue": "transparent",
675
- "darkOriginalValue": "",
676
- "lightValue": "#f2effb",
677
- "lightOriginalValue": "purple.light03"
678
- },
679
- "color-badge-background-red": {
680
- "name": "badge.background",
681
- "subState": "red",
682
- "darkValue": "transparent",
683
- "darkOriginalValue": "",
684
- "lightValue": "#fde8e8",
685
- "lightOriginalValue": "red.light03"
686
- },
687
- "color-badge-background-gray": {
688
- "name": "badge.background",
689
- "subState": "gray",
690
- "darkValue": "transparent",
691
- "darkOriginalValue": "",
692
- "lightValue": "#eef2f5",
693
- "lightOriginalValue": "gray.light03"
694
- },
695
- "color-badge-text-default": {
696
- "name": "badge.text",
697
- "subState": "default",
698
- "darkValue": "#ced1d6",
699
- "darkOriginalValue": "night-gray.light02",
700
- "lightValue": "#1a1c1c",
701
- "lightOriginalValue": "neutral.black"
702
- },
703
- "color-badge-text-green": {
704
- "name": "badge.text",
705
- "subState": "green",
706
- "darkValue": "#41a48a",
707
- "darkOriginalValue": "night-green.light01",
708
- "lightValue": "#0b8363",
709
- "lightOriginalValue": "green.dark01"
710
- },
711
- "color-badge-text-blue": {
712
- "name": "badge.text",
713
- "subState": "blue",
714
- "darkValue": "#6e95cf",
715
- "darkOriginalValue": "night-blue.light01",
716
- "lightValue": "#295dae",
717
- "lightOriginalValue": "blue.dark01"
718
- },
719
- "color-badge-text-yellow": {
720
- "name": "badge.text",
721
- "subState": "yellow",
722
- "darkValue": "#cbac76",
723
- "darkOriginalValue": "night-orange.light01",
724
- "lightValue": "#9a6304",
725
- "lightOriginalValue": "orange.dark02"
726
- },
727
- "color-badge-text-brand": {
728
- "name": "badge.text",
729
- "subState": "brand",
730
- "darkValue": "#62b2bc",
731
- "darkOriginalValue": "night-brand.light01",
732
- "lightValue": "#067c89",
733
- "lightOriginalValue": "brand.dark01"
734
- },
735
- "color-badge-text-purple": {
736
- "name": "badge.text",
737
- "subState": "purple",
738
- "darkValue": "#ad97f7",
739
- "darkOriginalValue": "night-purple.light02",
740
- "lightValue": "#5d44ab",
741
- "lightOriginalValue": "purple.dark01"
742
- },
743
- "color-badge-text-red": {
744
- "name": "badge.text",
745
- "subState": "red",
746
- "darkValue": "#d07c7c",
747
- "darkOriginalValue": "night-red.light01",
748
- "lightValue": "#c02725",
749
- "lightOriginalValue": "red.dark02"
750
- },
751
- "color-badge-text-gray": {
752
- "name": "badge.text",
753
- "subState": "gray",
754
- "darkValue": "#93979f",
755
- "darkOriginalValue": "night-gray.regular",
756
- "lightValue": "#607585",
757
- "lightOriginalValue": "gray.regular"
758
- },
759
- "color-badge-border-default": {
760
- "name": "badge.border",
761
- "subState": "default",
762
- "darkValue": "#393e47",
763
- "darkOriginalValue": "night-black.light02",
764
- "lightValue": "#e0e6eb",
765
- "lightOriginalValue": "gray.light02"
766
- },
767
- "color-badge-border-green": {
768
- "name": "badge.border",
769
- "subState": "green",
770
- "darkValue": "#393e47",
771
- "darkOriginalValue": "night-black.light02",
772
- "lightValue": "#e8f8f4",
773
- "lightOriginalValue": "green.light03"
774
- },
775
- "color-badge-border-blue": {
776
- "name": "badge.border",
777
- "subState": "blue",
778
- "darkValue": "#393e47",
779
- "darkOriginalValue": "night-black.light02",
780
- "lightValue": "#e7effe",
781
- "lightOriginalValue": "blue.light03"
782
- },
783
- "color-badge-border-yellow": {
784
- "name": "badge.border",
785
- "subState": "yellow",
786
- "darkValue": "#393e47",
787
- "darkOriginalValue": "night-black.light02",
788
- "lightValue": "#fef3e1",
789
- "lightOriginalValue": "orange.light03"
790
- },
791
- "color-badge-border-brand": {
792
- "name": "badge.border",
793
- "subState": "brand",
794
- "darkValue": "#393e47",
795
- "darkOriginalValue": "night-black.light02",
796
- "lightValue": "#e7f6f8",
797
- "lightOriginalValue": "brand.light03"
798
- },
799
- "color-badge-border-purple": {
800
- "name": "badge.border",
801
- "subState": "purple",
802
- "darkValue": "#393e47",
803
- "darkOriginalValue": "night-black.light02",
804
- "lightValue": "#f2effb",
805
- "lightOriginalValue": "purple.light03"
806
- },
807
- "color-badge-border-red": {
808
- "name": "badge.border",
809
- "subState": "red",
810
- "darkValue": "#393e47",
811
- "darkOriginalValue": "night-black.light02",
812
- "lightValue": "#fde8e8",
813
- "lightOriginalValue": "red.light03"
814
- },
815
- "color-badge-border-gray": {
816
- "name": "badge.border",
817
- "subState": "gray",
818
- "darkValue": "#393e47",
819
- "darkOriginalValue": "night-black.light02",
820
- "lightValue": "#eef2f5",
821
- "lightOriginalValue": "gray.light03"
822
- }
823
- },
824
- "segmented-progress-bar": {
825
- "color-segmented-progress-bar-monochrome": {
826
- "name": "segmented-progress-bar.monochrome",
827
- "subState": "",
828
- "darkValue": "#ced1d6",
829
- "darkOriginalValue": "night-gray.light02",
830
- "lightValue": "#607585",
831
- "lightOriginalValue": "gray.regular"
832
- },
833
- "color-segmented-progress-bar-success": {
834
- "name": "segmented-progress-bar.success",
835
- "subState": "",
836
- "darkValue": "#28816b",
837
- "darkOriginalValue": "night-green.regular",
838
- "lightValue": "#39d6ac",
839
- "lightOriginalValue": "green.regularAlt"
840
- },
841
- "color-segmented-progress-bar-warning": {
842
- "name": "segmented-progress-bar.warning",
843
- "subState": "",
844
- "darkValue": "#a4792d",
845
- "darkOriginalValue": "night-orange.regular",
846
- "lightValue": "#f1d56b",
847
- "lightOriginalValue": "orange.regularAlt"
848
- },
849
- "color-segmented-progress-bar-alert": {
850
- "name": "segmented-progress-bar.alert",
851
- "subState": "",
852
- "darkValue": "#a45355",
853
- "darkOriginalValue": "night-red.regular",
854
- "lightValue": "#f07575",
855
- "lightOriginalValue": "red.light01"
856
- },
857
- "color-segmented-progress-bar-in-progress": {
858
- "name": "segmented-progress-bar.in-progress",
859
- "subState": "",
860
- "darkValue": "#5b5f67",
861
- "darkOriginalValue": "night-gray.dark02",
862
- "lightValue": "#e0e6eb",
863
- "lightOriginalValue": "gray.light02"
864
- }
865
- },
866
- "tag": {
867
- "color-tag-background-gray": {
868
- "name": "tag.background",
869
- "subState": "gray",
870
- "darkValue": "#5b5f67",
871
- "darkOriginalValue": "night-gray.dark02",
872
- "lightValue": "#e0e6eb",
873
- "lightOriginalValue": "gray.light02"
874
- },
875
- "color-tag-background-blue": {
876
- "name": "tag.background",
877
- "subState": "blue",
878
- "darkValue": "#2f538a",
879
- "darkOriginalValue": "night-blue.regular",
880
- "lightValue": "#d2e2f9",
881
- "lightOriginalValue": "blue.light02"
882
- },
883
- "color-tag-text-gray": {
884
- "name": "tag.text",
885
- "subState": "gray",
886
- "darkValue": "#ced1d6",
887
- "darkOriginalValue": "night-gray.light02",
888
- "lightValue": "#40515e",
889
- "lightOriginalValue": "gray.dark01"
890
- },
891
- "color-tag-text-blue": {
892
- "name": "tag.text",
893
- "subState": "blue",
894
- "darkValue": "#e7effe",
895
- "darkOriginalValue": "night-blue.light03",
896
- "lightValue": "#1c427d",
897
- "lightOriginalValue": "blue.dark02"
898
- }
899
- },
900
- "destructive-tertiary-button": {
901
- "color-destructive-tertiary-button-background-hover": {
902
- "name": "destructive-tertiary-button.background",
903
- "subState": "hover",
904
- "darkValue": "rgba(164, 83, 85, 0.08)",
905
- "darkOriginalValue": "night-red.regular-transparent02",
906
- "lightValue": "rgba(238, 97, 96, 0.08)",
907
- "lightOriginalValue": "red.regular-transparent02"
908
- },
909
- "color-destructive-tertiary-button-background-active": {
910
- "name": "destructive-tertiary-button.background",
911
- "subState": "active",
912
- "darkValue": "rgba(164, 83, 85, 0.08)",
913
- "darkOriginalValue": "night-red.regular-transparent02",
914
- "lightValue": "rgba(238, 97, 96, 0.08)",
915
- "lightOriginalValue": "red.regular-transparent02"
916
- }
917
- }
918
- }