@aivenio/aquarium 1.72.0 → 1.73.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 (35) hide show
  1. package/dist/_variables.scss +255 -244
  2. package/dist/atoms.cjs +1084 -947
  3. package/dist/atoms.mjs +1084 -947
  4. package/dist/src/atoms/Banner/Banner.js +3 -7
  5. package/dist/src/atoms/DataList/DataList.js +2 -2
  6. package/dist/src/atoms/Select/Select.js +2 -2
  7. package/dist/src/atoms/Toast/Toast.js +2 -2
  8. package/dist/src/atoms/Typography/Typography.js +3 -3
  9. package/dist/src/icons/award.d.ts +9 -0
  10. package/dist/src/icons/award.js +11 -0
  11. package/dist/src/icons/index.d.ts +1 -0
  12. package/dist/src/icons/index.js +2 -1
  13. package/dist/src/molecules/Box/Box.d.ts +5 -6
  14. package/dist/src/molecules/Box/Box.js +13 -7
  15. package/dist/src/molecules/Grid/Grid.js +4 -4
  16. package/dist/src/molecules/Section/Section.js +3 -3
  17. package/dist/src/molecules/Tailwindify/Tailwindify.d.ts +2 -1
  18. package/dist/src/molecules/Tailwindify/Tailwindify.js +1 -1
  19. package/dist/src/system.d.ts +1 -6
  20. package/dist/src/system.js +2 -11
  21. package/dist/src/tokens/tokens.json +647 -0
  22. package/dist/src/utils/breakpoints.js +3 -3
  23. package/dist/src/utils/useStyle.js +6 -2
  24. package/dist/styles.css +2074 -1473
  25. package/dist/system.cjs +1103 -971
  26. package/dist/system.mjs +1103 -973
  27. package/dist/tailwind.config.js +73 -161
  28. package/dist/tailwind.theme.json +383 -331
  29. package/dist/tokens.json +644 -562
  30. package/dist/tsconfig.module.tsbuildinfo +1 -1
  31. package/dist/types/designTokens.d.ts +12 -11
  32. package/dist/types/tailwindGenerated.d.ts +1 -1
  33. package/package.json +10 -8
  34. package/dist/src/js/resolveTheme.d.ts +0 -8
  35. package/dist/src/js/resolveTheme.js +0 -10
@@ -1,246 +1,257 @@
1
1
 
2
- // Do not edit directly
3
- // Generated on Tue, 23 Jul 2024 11:58:37 GMT
2
+ // This file is autogenerated. Do not edit directly.
4
3
 
5
- $border-radius-none: 0px !default;
6
- $border-radius-sm: 0.125rem !default;
7
- $border-radius-default: 4px !default;
8
- $border-radius-md: 0.375rem !default;
9
- $border-radius-lg: 0.5rem !default;
10
- $border-radius-xl: 0.75rem !default;
11
- $border-radius-2xl: 1rem !default;
12
- $border-radius-3xl: 1.5rem !default;
13
- $border-radius-full: 9999px !default;
14
- $colors-error-100: #aa0000 !default;
15
- $colors-error-90: #b90000 !default;
16
- $colors-error-80: #c50001 !default;
17
- $colors-error-70: #d80005 !default;
18
- $colors-error-60: #e70000 !default;
19
- $colors-error-50: #e62728 !default;
20
- $colors-error-40: #e0504f !default;
21
- $colors-error-30: #ed7975 !default;
22
- $colors-error-20: #ffadb3 !default;
23
- $colors-error-10: #ffcbd2 !default;
24
- $colors-error-5: #fee8e7 !default;
25
- $colors-error-0: #fef2f1 !default;
26
- $colors-warning-100: #fe6d00 !default;
27
- $colors-warning-90: #ff9003 !default;
28
- $colors-warning-80: #fd9f00 !default;
29
- $colors-warning-70: #ffb300 !default;
30
- $colors-warning-60: #ffc107 !default;
31
- $colors-warning-50: #fdc926 !default;
32
- $colors-warning-40: #fdd44d !default;
33
- $colors-warning-30: #fddf81 !default;
34
- $colors-warning-20: #feebb2 !default;
35
- $colors-warning-10: #fff2cd !default;
36
- $colors-warning-5: #fff8ea !default;
37
- $colors-warning-0: #fffdf9 !default;
38
- $colors-success-100: #006f00 !default;
39
- $colors-success-90: #008e00 !default;
40
- $colors-success-80: #009f00 !default;
41
- $colors-success-70: #00b300 !default;
42
- $colors-success-60: #00c300 !default;
43
- $colors-success-50: #40ce37 !default;
44
- $colors-success-40: #60db57 !default;
45
- $colors-success-30: #89eb80 !default;
46
- $colors-success-20: #afffa7 !default;
47
- $colors-success-10: #cbffc9 !default;
48
- $colors-success-5: #ecf7ed !default;
49
- $colors-success-0: #f5faf5 !default;
50
- $colors-info-100: #02569a !default;
51
- $colors-info-90: #0174ba !default;
52
- $colors-info-80: #0788d1 !default;
53
- $colors-info-70: #0399e3 !default;
54
- $colors-info-60: #02a8f3 !default;
55
- $colors-info-50: #28b4f4 !default;
56
- $colors-info-40: #4cc2f7 !default;
57
- $colors-info-30: #7fd1f7 !default;
58
- $colors-info-20: #b4e5fb !default;
59
- $colors-info-10: #e0f5fe !default;
60
- $colors-info-5: #effaff !default;
61
- $colors-info-0: #f9fdff !default;
62
- $colors-grey-100: #19191d !default;
63
- $colors-grey-90: #292a31 !default;
64
- $colors-grey-80: #3a3a44 !default;
65
- $colors-grey-70: #4a4b57 !default;
66
- $colors-grey-60: #5a5b6a !default;
67
- $colors-grey-50: #787885 !default;
68
- $colors-grey-40: #9696a0 !default;
69
- $colors-grey-30: #b4b4bb !default;
70
- $colors-grey-20: #d2d2d6 !default;
71
- $colors-grey-10: #e1e1e3 !default;
72
- $colors-grey-5: #ededf0 !default;
73
- $colors-grey-0: #f7f7fa !default;
74
- $colors-secondary-100: #e11d16 !default;
75
- $colors-secondary-90: #eb4610 !default;
76
- $colors-secondary-80: #f3580d !default;
77
- $colors-secondary-70: #f96a02 !default;
78
- $colors-secondary-60: #ff7700 !default;
79
- $colors-secondary-50: #fc871a !default;
80
- $colors-secondary-40: #fb9a3e !default;
81
- $colors-secondary-30: #fab26e !default;
82
- $colors-secondary-20: #f8c99c !default;
83
- $colors-secondary-10: #fee8d0 !default;
84
- $colors-secondary-5: #fff3e8 !default;
85
- $colors-secondary-0: #fffbf8 !default;
86
- $colors-primary-100: #0e1652 !default;
87
- $colors-primary-90: #222f95 !default;
88
- $colors-primary-80: #3545be !default;
89
- $colors-primary-70: #5865cd !default;
90
- $colors-primary-60: #818eec !default;
91
- $colors-primary-50: #9daaee !default;
92
- $colors-primary-40: #b9c5ef !default;
93
- $colors-primary-30: #c7d1f4 !default;
94
- $colors-primary-20: #d5ddfa !default;
95
- $colors-primary-10: #e3e9ff !default;
96
- $colors-primary-5: #f3f6ff !default;
97
- $colors-primary-0: #ffffff !default;
98
- $colors-transparent: transparent !default;
99
- $colors-current: currentColor !default;
100
- $colors-white: white !default;
101
- $colors-black: black !default;
102
- $box-shadow-24dp: 0px 24px 48px rgba(90, 91, 106, 0.08), 0px 12px 24px rgba(58, 58, 68, 0.08) !default;
103
- $box-shadow-16dp: 0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 58, 68, 0.12) !default;
104
- $box-shadow-8dp: 0px 8px 16px rgba(90, 91, 106, 0.16), 0px 4px 8px rgba(58, 58, 68, 0.16) !default;
105
- $box-shadow-4dp: 0px 4px 8px rgba(90, 91, 106, 0.20), 0px 2px 4px rgba(58, 58, 68, 0.20) !default;
106
- $box-shadow-2dp: 0px 2px 4px rgba(90, 91, 106, 0.24), 0px 1px 2px rgba(58, 58, 68, 0.24) !default;
107
- $box-shadow-white-inset: inset 0 0 0 3px rgba(255,255,255,1) !default;
108
- $screens-default: 0px !default;
109
- $screens-xs: 320px !default;
110
- $screens-sm: 672px !default;
111
- $screens-md: 1056px !default;
112
- $screens-lg: 1312px !default;
113
- $screens-xl: 1536px !default;
114
- $background-color-body: var(--aquarium-colors-white) !default;
115
- $background-color-body-intense: var(--aquarium-colors-grey-80) !default;
116
- $background-color-popover-content: var(--aquarium-colors-white) !default;
117
- $background-color-muted: var(--aquarium-colors-grey-0) !default;
118
- $background-color-default: var(--aquarium-colors-grey-5) !default;
119
- $background-color-intense: var(--aquarium-colors-grey-20) !default;
120
- $background-color-primary-muted: var(--aquarium-colors-primary-40) !default;
121
- $background-color-primary-default: var(--aquarium-colors-primary-80) !default;
122
- $background-color-primary-intense: var(--aquarium-colors-primary-90) !default;
123
- $background-color-primary-active: var(--aquarium-colors-primary-5) !default;
124
- $background-color-primary-hover: var(--aquarium-colors-primary-5) !default;
125
- $background-color-info-muted: var(--aquarium-colors-info-10) !default;
126
- $background-color-info-default: var(--aquarium-colors-info-70) !default;
127
- $background-color-info-intense: var(--aquarium-colors-info-90) !default;
128
- $background-color-success-muted: var(--aquarium-colors-success-5) !default;
129
- $background-color-success-default: var(--aquarium-colors-success-70) !default;
130
- $background-color-success-intense: var(--aquarium-colors-success-90) !default;
131
- $background-color-warning-muted: var(--aquarium-colors-warning-5) !default;
132
- $background-color-warning-default: var(--aquarium-colors-warning-70) !default;
133
- $background-color-warning-intense: var(--aquarium-colors-warning-90) !default;
134
- $background-color-danger-muted: var(--aquarium-colors-error-10) !default;
135
- $background-color-danger-default: var(--aquarium-colors-error-20) !default;
136
- $background-color-danger-intense: var(--aquarium-colors-error-50) !default;
137
- $background-color-status-announcement: var(--aquarium-colors-primary-5) !default;
138
- $background-color-status-info: var(--aquarium-colors-info-10) !default;
139
- $background-color-status-warning: var(--aquarium-colors-warning-5) !default;
140
- $background-color-status-danger: var(--aquarium-colors-error-5) !default;
141
- $background-color-status-success: var(--aquarium-colors-success-5) !default;
142
- $background-color-icon-button-hover: rgba(25,25,29,.05) !default;
143
- $border-color-muted: var(--aquarium-colors-grey-5) !default;
144
- $border-color-default: var(--aquarium-colors-grey-20) !default;
145
- $border-color-intense: var(--aquarium-colors-grey-50) !default;
146
- $border-color-primary-muted: var(--aquarium-colors-primary-60) !default;
147
- $border-color-primary-default: var(--aquarium-colors-primary-80) !default;
148
- $border-color-primary-intense: var(--aquarium-colors-primary-100) !default;
149
- $border-color-info-muted: var(--aquarium-colors-info-50) !default;
150
- $border-color-info-default: var(--aquarium-colors-info-70) !default;
151
- $border-color-info-intense: var(--aquarium-colors-info-90) !default;
152
- $border-color-success-muted: var(--aquarium-colors-success-10) !default;
153
- $border-color-success-default: var(--aquarium-colors-success-40) !default;
154
- $border-color-success-intense: var(--aquarium-colors-success-70) !default;
155
- $border-color-warning-muted: var(--aquarium-colors-warning-20) !default;
156
- $border-color-warning-default: var(--aquarium-colors-warning-70) !default;
157
- $border-color-warning-intense: var(--aquarium-colors-warning-90) !default;
158
- $border-color-danger-muted: var(--aquarium-colors-error-10) !default;
159
- $border-color-danger-default: var(--aquarium-colors-error-50) !default;
160
- $border-color-danger-intense: var(--aquarium-colors-error-80) !default;
161
- $border-width-0: 0px !default;
162
- $border-width-2: 2px !default;
163
- $border-width-4: 4px !default;
164
- $border-width-8: 8px !default;
165
- $border-width-default: 1px !default;
166
- $font-family-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !default;
167
- $font-family-serif: ui-serif,Georgia,Cambria,"Times New Roman",Times,serif !default;
168
- $font-family-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace !default;
169
- $font-size-xs: 0.75rem !default;
170
- $font-size-xs-line-height: 1rem !default;
171
- $font-size-sm: 0.875rem !default;
172
- $font-size-sm-line-height: 1.25rem !default;
173
- $font-size-base: 1rem !default;
174
- $font-size-base-line-height: 1.5rem !default;
175
- $font-size-lg: 1.125rem !default;
176
- $font-size-lg-line-height: 1.75rem !default;
177
- $font-size-xl: 1.25rem !default;
178
- $font-size-xl-line-height: 1.75rem !default;
179
- $font-size-2xl: 1.5rem !default;
180
- $font-size-2xl-line-height: 2rem !default;
181
- $font-size-3xl: 1.875rem !default;
182
- $font-size-3xl-line-height: 2.25rem !default;
183
- $font-size-4xl: 2.25rem !default;
184
- $font-size-4xl-line-height: 2.5rem !default;
185
- $font-size-5xl: 3rem !default;
186
- $font-size-5xl-line-height: 1 !default;
187
- $font-size-6xl: 3.75rem !default;
188
- $font-size-6xl-line-height: 1 !default;
189
- $font-size-7xl: 4.5rem !default;
190
- $font-size-7xl-line-height: 1 !default;
191
- $font-size-8xl: 6rem !default;
192
- $font-size-8xl-line-height: 1 !default;
193
- $font-size-9xl: 8rem !default;
194
- $font-size-9xl-line-height: 1 !default;
195
- $font-weight-thin: 100 !default;
196
- $font-weight-extralight: 200 !default;
197
- $font-weight-light: 300 !default;
198
- $font-weight-normal: 400 !default;
199
- $font-weight-medium: 500 !default;
200
- $font-weight-semibold: 600 !default;
201
- $font-weight-bold: 700 !default;
202
- $font-weight-extrabold: 800 !default;
203
- $font-weight-black: 900 !default;
204
- $spacing-0: 0 !default;
205
- $spacing-1: 2px !default;
206
- $spacing-2: 4px !default;
207
- $spacing-3: 8px !default;
208
- $spacing-4: 12px !default;
209
- $spacing-5: 16px !default;
210
- $spacing-6: 24px !default;
211
- $spacing-7: 32px !default;
212
- $spacing-8: 40px !default;
213
- $spacing-9: 48px !default;
214
- $spacing-1px: 1px !default;
215
- $spacing-l1: 16px !default;
216
- $spacing-l2: 24px !default;
217
- $spacing-l3: 32px !default;
218
- $spacing-l4: 48px !default;
219
- $spacing-l5: 64px !default;
220
- $spacing-l6: 96px !default;
221
- $spacing-l7: 160px !default;
222
- $text-color-inactive: var(--aquarium-colors-grey-40) !default;
223
- $text-color-muted: var(--aquarium-colors-grey-50) !default;
224
- $text-color-default: var(--aquarium-colors-grey-70) !default;
225
- $text-color-intense: var(--aquarium-colors-grey-90) !default;
226
- $text-color-primary-inactive: var(--aquarium-colors-primary-40) !default;
227
- $text-color-primary-active: var(--aquarium-colors-primary-90) !default;
228
- $text-color-primary-muted: var(--aquarium-colors-primary-60) !default;
229
- $text-color-primary-default: var(--aquarium-colors-primary-70) !default;
230
- $text-color-primary-intense: var(--aquarium-colors-primary-80) !default;
231
- $text-color-info-inactive: var(--aquarium-colors-info-20) !default;
232
- $text-color-info-muted: var(--aquarium-colors-info-40) !default;
233
- $text-color-info-default: var(--aquarium-colors-info-70) !default;
234
- $text-color-info-intense: var(--aquarium-colors-info-90) !default;
235
- $text-color-success-inactive: var(--aquarium-colors-success-10) !default;
236
- $text-color-success-muted: var(--aquarium-colors-success-30) !default;
237
- $text-color-success-default: var(--aquarium-colors-success-70) !default;
238
- $text-color-success-intense: var(--aquarium-colors-success-90) !default;
239
- $text-color-warning-inactive: var(--aquarium-colors-warning-20) !default;
240
- $text-color-warning-muted: var(--aquarium-colors-warning-40) !default;
241
- $text-color-warning-default: var(--aquarium-colors-warning-80) !default;
242
- $text-color-warning-intense: var(--aquarium-colors-warning-100) !default;
243
- $text-color-danger-inactive: var(--aquarium-colors-error-10) !default;
244
- $text-color-danger-muted: var(--aquarium-colors-error-20) !default;
245
- $text-color-danger-default: var(--aquarium-colors-error-50) !default;
246
- $text-color-danger-intense: var(--aquarium-colors-error-80) !default;
4
+ $font-size-9xl: 8rem;
5
+ $font-size-9xl-line-height: 1;
6
+ $font-size-8xl: 6rem;
7
+ $font-size-8xl-line-height: 1;
8
+ $font-size-7xl: 4.5rem;
9
+ $font-size-7xl-line-height: 1;
10
+ $font-size-6xl: 3.75rem;
11
+ $font-size-6xl-line-height: 1;
12
+ $font-size-5xl: 3rem;
13
+ $font-size-5xl-line-height: 1;
14
+ $font-size-4xl: 2.25rem;
15
+ $font-size-4xl-line-height: 2.5rem;
16
+ $font-size-3xl: 1.875rem;
17
+ $font-size-3xl-line-height: 2.25rem;
18
+ $font-size-2xl: 1.5rem;
19
+ $font-size-2xl-line-height: 2rem;
20
+ $font-size-xl: 1.25rem;
21
+ $font-size-xl-line-height: 1.75rem;
22
+ $font-size-lg: 1.125rem;
23
+ $font-size-lg-line-height: 1.75rem;
24
+ $font-size-sm-line-height: 1.25rem;
25
+ $font-size-sm: 0.875rem;
26
+ $font-size-xs-line-height: 1rem;
27
+ $font-size-xs: 0.75rem;
28
+ $font-size-base-line-height: 1.5rem;
29
+ $font-size-base: 1rem;
30
+ $spacing-l7: 160px;
31
+ $spacing-l6: 96px;
32
+ $spacing-l5: 64px;
33
+ $spacing-l4: 48px;
34
+ $spacing-l3: 32px;
35
+ $spacing-l2: 24px;
36
+ $spacing-l1: 16px;
37
+ $spacing-1px: 1px;
38
+ $spacing-9: 48px;
39
+ $spacing-8: 40px;
40
+ $spacing-7: 32px;
41
+ $spacing-6: 24px;
42
+ $spacing-5: 16px;
43
+ $spacing-4: 12px;
44
+ $spacing-3: 8px;
45
+ $spacing-2: 4px;
46
+ $spacing-1: 2px;
47
+ $spacing-0: 0px;
48
+ $screens-xl: 1536px;
49
+ $screens-lg: 1312px;
50
+ $screens-md: 1056px;
51
+ $screens-sm: 672px;
52
+ $screens-xs: 320px;
53
+ $screens-default: 0px;
54
+ $elevations-2dp: 0px 2px 4px rgba(90, 91, 106, 0.24), 0px 1px 2px rgba(58, 58, 68, 0.24);
55
+ $elevations-4dp: 0px 4px 8px rgba(90, 91, 106, 0.20), 0px 2px 4px rgba(58, 58, 68, 0.20);
56
+ $elevations-8dp: 0px 8px 16px rgba(90, 91, 106, 0.16), 0px 4px 8px rgba(58, 58, 68, 0.16);
57
+ $elevations-16dp: 0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 58, 68, 0.12);
58
+ $elevations-24dp: 0px 24px 48px rgba(90, 91, 106, 0.08), 0px 12px 24px rgba(58, 58, 68, 0.08);
59
+ $box-shadow-white-inset: inset 0 0 0 3px rgba(255,255,255,1);
60
+ $colors-primary-100: #0e1652;
61
+ $colors-primary-90: #222f95;
62
+ $colors-primary-80: #3545be;
63
+ $colors-primary-70: #5865cd;
64
+ $colors-primary-60: #818eec;
65
+ $colors-primary-50: #9daaee;
66
+ $colors-primary-40: #b9c5ef;
67
+ $colors-primary-30: #c7d1f4;
68
+ $colors-primary-20: #d5ddfa;
69
+ $colors-primary-10: #e3e9ff;
70
+ $colors-primary-5: #f3f6ff;
71
+ $colors-primary-0: #ffffff;
72
+ $colors-secondary-100: #e11d16;
73
+ $colors-secondary-90: #eb4610;
74
+ $colors-secondary-80: #f3580d;
75
+ $colors-secondary-70: #f96a02;
76
+ $colors-secondary-60: #ff7700;
77
+ $colors-secondary-50: #fc871a;
78
+ $colors-secondary-40: #fb9a3e;
79
+ $colors-secondary-30: #fab26e;
80
+ $colors-secondary-20: #f8c99c;
81
+ $colors-secondary-10: #fee8d0;
82
+ $colors-secondary-5: #fff3e8;
83
+ $colors-secondary-0: #fffbf8;
84
+ $colors-grey-100: #19191d;
85
+ $colors-grey-90: #292a31;
86
+ $colors-grey-80: #3a3a44;
87
+ $colors-grey-70: #4a4b57;
88
+ $colors-grey-60: #5a5b6a;
89
+ $colors-grey-50: #787885;
90
+ $colors-grey-40: #9696a0;
91
+ $colors-grey-30: #b4b4bb;
92
+ $colors-grey-20: #d2d2d6;
93
+ $colors-grey-10: #e1e1e3;
94
+ $colors-grey-5: #ededf0;
95
+ $colors-grey-0: #f7f7fa;
96
+ $colors-info-100: #02569a;
97
+ $colors-info-90: #0174ba;
98
+ $colors-info-80: #0788d1;
99
+ $colors-info-70: #0399e3;
100
+ $colors-info-60: #02a8f3;
101
+ $colors-info-50: #28b4f4;
102
+ $colors-info-40: #4cc2f7;
103
+ $colors-info-30: #7fd1f7;
104
+ $colors-info-20: #b4e5fb;
105
+ $colors-info-10: #e0f5fe;
106
+ $colors-info-5: #effaff;
107
+ $colors-info-0: #f9fdff;
108
+ $colors-success-100: #006f00;
109
+ $colors-success-90: #008e00;
110
+ $colors-success-80: #009f00;
111
+ $colors-success-70: #00b300;
112
+ $colors-success-60: #00c300;
113
+ $colors-success-50: #40ce37;
114
+ $colors-success-40: #60db57;
115
+ $colors-success-30: #89eb80;
116
+ $colors-success-20: #afffa7;
117
+ $colors-success-10: #cbffc9;
118
+ $colors-success-5: #ecf7ed;
119
+ $colors-success-0: #f5faf5;
120
+ $colors-warning-100: #fe6d00;
121
+ $colors-warning-90: #ff9003;
122
+ $colors-warning-80: #fd9f00;
123
+ $colors-warning-70: #ffb300;
124
+ $colors-warning-60: #ffc107;
125
+ $colors-warning-50: #fdc926;
126
+ $colors-warning-40: #fdd44d;
127
+ $colors-warning-30: #fddf81;
128
+ $colors-warning-20: #feebb2;
129
+ $colors-warning-10: #fff2cd;
130
+ $colors-warning-5: #fff8ea;
131
+ $colors-warning-0: #fffdf9;
132
+ $colors-error-100: #aa0000;
133
+ $colors-error-90: #b90000;
134
+ $colors-error-80: #c50001;
135
+ $colors-error-70: #d80005;
136
+ $colors-error-60: #e70000;
137
+ $colors-error-50: #e62728;
138
+ $colors-error-40: #e0504f;
139
+ $colors-error-30: #ed7975;
140
+ $colors-error-20: #ffadb3;
141
+ $colors-error-10: #ffcbd2;
142
+ $colors-error-5: #fee8e7;
143
+ $colors-error-0: #fef2f1;
144
+ $colors-current: currentColor;
145
+ $colors-transparent: transparent;
146
+ $colors-black: black;
147
+ $colors-white: white;
148
+ $background-color-icon-button-hover: rgba(25,25,29,.05);
149
+ $border-width-default: 1px;
150
+ $border-width-8: 8px;
151
+ $border-width-4: 4px;
152
+ $border-width-2: 2px;
153
+ $border-width-1: 1px;
154
+ $border-width-0: 0px;
155
+ $border-radius-none: 0px;
156
+ $border-radius-sm: 0.125rem;
157
+ $border-radius-md: 0.375rem;
158
+ $border-radius-lg: 0.5rem;
159
+ $border-radius-xl: 0.75rem;
160
+ $border-radius-2xl: 1rem;
161
+ $border-radius-3xl: 1.5rem;
162
+ $border-radius-full: 9999px;
163
+ $border-radius-default: 4px;
164
+ $margin-l7: $spacing-l7;
165
+ $margin-l6: $spacing-l6;
166
+ $margin-l5: $spacing-l5;
167
+ $margin-l4: $spacing-l4;
168
+ $margin-l3: $spacing-l3;
169
+ $margin-l2: $spacing-l2;
170
+ $margin-l1: $spacing-l1;
171
+ $margin-1px: $spacing-1px;
172
+ $margin-9: $spacing-9;
173
+ $margin-8: $spacing-8;
174
+ $margin-7: $spacing-7;
175
+ $margin-6: $spacing-6;
176
+ $margin-5: $spacing-5;
177
+ $margin-4: $spacing-4;
178
+ $margin-3: $spacing-3;
179
+ $margin-2: $spacing-2;
180
+ $margin-1: $spacing-1;
181
+ $margin-0: $spacing-0;
182
+ $box-shadow-2dp: $elevations-2dp;
183
+ $box-shadow-4dp: $elevations-4dp;
184
+ $box-shadow-8dp: $elevations-8dp;
185
+ $box-shadow-16dp: $elevations-16dp;
186
+ $box-shadow-24dp: $elevations-24dp;
187
+ $text-color-danger-intense: $colors-error-80;
188
+ $text-color-danger-default: $colors-error-50;
189
+ $text-color-danger-muted: $colors-error-20;
190
+ $text-color-danger-inactive: $colors-error-10;
191
+ $text-color-warning-intense: $colors-warning-100;
192
+ $text-color-warning-default: $colors-warning-80;
193
+ $text-color-warning-muted: $colors-warning-40;
194
+ $text-color-warning-inactive: $colors-warning-20;
195
+ $text-color-success-intense: $colors-success-90;
196
+ $text-color-success-default: $colors-success-70;
197
+ $text-color-success-muted: $colors-success-30;
198
+ $text-color-success-inactive: $colors-success-10;
199
+ $text-color-info-intense: $colors-info-90;
200
+ $text-color-info-default: $colors-info-70;
201
+ $text-color-info-muted: $colors-info-40;
202
+ $text-color-info-inactive: $colors-info-20;
203
+ $text-color-primary-intense: $colors-primary-80;
204
+ $text-color-primary-default: $colors-primary-70;
205
+ $text-color-primary-muted: $colors-primary-60;
206
+ $text-color-primary-active: $colors-primary-90;
207
+ $text-color-primary-inactive: $colors-primary-40;
208
+ $text-color-intense: $colors-grey-90;
209
+ $text-color-default: $colors-grey-70;
210
+ $text-color-muted: $colors-grey-50;
211
+ $text-color-inactive: $colors-grey-40;
212
+ $border-color-danger-intense: $colors-error-80;
213
+ $border-color-danger-default: $colors-error-50;
214
+ $border-color-danger-muted: $colors-error-10;
215
+ $border-color-warning-intense: $colors-warning-90;
216
+ $border-color-warning-default: $colors-warning-70;
217
+ $border-color-warning-muted: $colors-warning-20;
218
+ $border-color-success-intense: $colors-success-70;
219
+ $border-color-success-default: $colors-success-40;
220
+ $border-color-success-muted: $colors-success-10;
221
+ $border-color-info-intense: $colors-info-90;
222
+ $border-color-info-default: $colors-info-70;
223
+ $border-color-info-muted: $colors-info-50;
224
+ $border-color-primary-intense: $colors-primary-100;
225
+ $border-color-primary-default: $colors-primary-80;
226
+ $border-color-primary-muted: $colors-primary-60;
227
+ $border-color-intense: $colors-grey-50;
228
+ $border-color-default: $colors-grey-20;
229
+ $border-color-muted: $colors-grey-5;
230
+ $background-color-status-success: $colors-success-5;
231
+ $background-color-status-danger: $colors-error-5;
232
+ $background-color-status-warning: $colors-warning-5;
233
+ $background-color-status-info: $colors-info-10;
234
+ $background-color-status-announcement: $colors-primary-5;
235
+ $background-color-danger-intense: $colors-error-50;
236
+ $background-color-danger-default: $colors-error-20;
237
+ $background-color-danger-muted: $colors-error-10;
238
+ $background-color-warning-intense: $colors-warning-90;
239
+ $background-color-warning-default: $colors-warning-70;
240
+ $background-color-warning-muted: $colors-warning-5;
241
+ $background-color-success-intense: $colors-success-90;
242
+ $background-color-success-default: $colors-success-70;
243
+ $background-color-success-muted: $colors-success-5;
244
+ $background-color-info-intense: $colors-info-90;
245
+ $background-color-info-default: $colors-info-70;
246
+ $background-color-info-muted: $colors-info-10;
247
+ $background-color-primary-hover: $colors-primary-5;
248
+ $background-color-primary-active: $colors-primary-5;
249
+ $background-color-primary-intense: $colors-primary-90;
250
+ $background-color-primary-default: $colors-primary-80;
251
+ $background-color-primary-muted: $colors-primary-40;
252
+ $background-color-intense: $colors-grey-20;
253
+ $background-color-default: $colors-grey-5;
254
+ $background-color-muted: $colors-grey-0;
255
+ $background-color-popover-content: $colors-white;
256
+ $background-color-body-intense: $colors-grey-80;
257
+ $background-color-body: $colors-white;