@mirohq/design-system-themes 0.7.2 → 0.7.3-style-dictionary.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 (9) hide show
  1. package/dist/main.js +240 -267
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +240 -267
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +15 -16
  6. package/package.json +11 -13
  7. package/base-theme.css +0 -150
  8. package/dark-theme.css +0 -150
  9. package/light-theme.css +0 -150
package/dist/main.js CHANGED
@@ -3,134 +3,248 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const colors$1 = {
6
- "background-alpha-active": "#0909094D",
7
- "background-alpha-hover": "#09090933",
8
- "background-danger-prominent": "$red-500",
9
- "background-danger-prominent-active": "$red-600",
10
- "background-danger-prominent-hover": "$red-550",
11
- "background-danger-subtle": "$red-100",
12
- "background-danger-subtle-active": "$red-200",
13
- "background-danger-subtle-hover": "$red-150",
6
+ "background-alpha": "$alphaGray100",
7
+ "background-alpha-subtle": "$alphaGray50",
8
+ "background-neutrals-overlay": "$alphaBlack300",
9
+ "background-neutrals-overlay-subtle": "$alphaBlack200",
10
+ "background-danger-prominent": "$red500",
11
+ "background-danger-prominent-hover": "$red550",
12
+ "background-danger-prominent-pressed": "$red600",
13
+ "background-danger-subtle": "$red50",
14
+ "background-danger-subtle-hover": "$red100",
15
+ "background-danger-subtle-pressed": "$red150",
14
16
  "background-neutrals": "$white",
15
- "background-neutrals-active": "$gray-150",
16
- "background-neutrals-container": "$white",
17
- "background-neutrals-controls-disabled": "$gray-250",
18
- "background-neutrals-disabled": "$gray-150",
19
- "background-neutrals-hover": "$gray-100",
20
- "background-neutrals-inactive": "$gray-450",
21
- "background-neutrals-inactive-hover": "$gray-500",
22
- "background-neutrals-inverted": "$gray-950",
23
- "background-neutrals-inverted-subtle": "$gray-800",
24
- "background-neutrals-page": "$gray-100",
25
- "background-neutrals-page-subtle": "$gray-150",
26
- "background-neutrals-scrollbar": "$gray-300",
27
- "background-neutrals-scrollbar-active": "$gray-400",
28
- "background-neutrals-scrollbar-hover": "$gray-350",
29
- "background-neutrals-subtle": "$gray-100",
30
- "background-neutrals-subtle-active": "$gray-200",
31
- "background-neutrals-subtle-hover": "$gray-150",
32
- "background-primary-prominent": "$blue-500",
33
- "background-primary-prominent-active": "$blue-600",
34
- "background-primary-prominent-hover": "$blue-550",
35
- "background-primary-prominent-selected": "$blue-500",
36
- "background-primary-subtle": "$blue-100",
37
- "background-primary-subtle-active": "$blue-200",
38
- "background-primary-subtle-hover": "$blue-150",
39
- "background-primary-subtle-selected": "$blue-200",
40
- "background-success": "$green-100",
41
- "background-success-prominent": "$green-500",
42
- "background-success-prominent-active": "$green-700",
43
- "background-success-prominent-hover": "$green-550",
44
- "background-warning-prominent": "$yellow-500",
45
- "background-warning-subtle": "$yellow-100",
46
- "border-danger": "$red-550",
47
- "border-danger-active": "$red-650",
48
- "border-danger-hover": "$red-600",
49
- "border-focus-error-inner": "$white",
50
- "border-focus-error-middle": "$red-400",
51
- "border-focus-error-outer": "$red-200",
52
- "border-focus-inner": "$white",
53
- "border-focus-middle": "$blue-400",
54
- "border-focus-outer": "$blue-200",
55
- "border-focus-success-inner": "$white",
56
- "border-focus-success-middle": "$green-400",
57
- "border-focus-success-outer": "$green-200",
58
- "border-neutrals": "$gray-250",
59
- "border-neutrals-active": "$gray-350",
60
- "border-neutrals-controls": "$gray-200",
61
- "border-neutrals-controls-disabled": "$gray-150",
62
- "border-neutrals-disabled": "$gray-150",
63
- "border-neutrals-hover": "$gray-300",
17
+ "background-neutrals-control": "$gray300",
18
+ "background-neutrals-control-hover": "$gray350",
19
+ "background-neutrals-control-pressed": "$gray400",
20
+ "background-neutrals-disabled": "$alphaBlack100",
21
+ "background-neutrals-hover": "$gray100",
22
+ "background-neutrals-inverted": "$gray950",
23
+ "background-neutrals-inverted-subtle": "$gray800",
24
+ "background-neutrals-pressed": "$gray150",
25
+ "background-neutrals-subtle": "$gray100",
26
+ "background-neutrals-subtle-hover": "$gray150",
27
+ "background-neutrals-subtle-pressed": "$gray200",
28
+ "background-neutrals-transparent": "$transparent",
29
+ "background-primary-prominent": "$blue500",
30
+ "background-primary-prominent-hover": "$blue550",
31
+ "background-primary-prominent-pressed": "$blue600",
32
+ "background-primary-prominent-selected": "$blue500",
33
+ "background-primary-subtle": "$blue100",
34
+ "background-primary-subtle-hover": "$blue150",
35
+ "background-primary-subtle-pressed": "$blue200",
36
+ "background-primary-subtle-selected": "$blue200",
37
+ "background-success-prominent": "$green500",
38
+ "background-success-prominent-hover": "$green550",
39
+ "background-success-prominent-pressed": "$green600",
40
+ "background-success-subtle": "$green50",
41
+ "background-warning-prominent": "$yellow500",
42
+ "background-warning-subtle": "$yellow50",
43
+ "border-danger": "$red500",
44
+ "border-danger-hover": "$red550",
45
+ "border-danger-pressed": "$red600",
46
+ "focus-keyboard": "#2B4DF8",
47
+ "border-neutrals": "$gray200",
48
+ "border-neutrals-disabled": "$alphaGray50",
49
+ "border-neutrals-hover": "$gray300",
64
50
  "border-neutrals-inverted": "$white",
65
- "border-neutrals-subtle": "$gray-150",
66
- "border-neutrals-text": "$gray-900",
67
- "border-neutrals-text-active": "$gray-950",
68
- "border-neutrals-text-hover": "$gray-950",
69
- "border-neutrals-text-subtle": "$gray-500",
70
- "border-neutrals-text-subtle-active": "$gray-600",
71
- "border-neutrals-text-subtle-hover": "$gray-550",
51
+ "border-neutrals-pressed": "$gray350",
52
+ "border-neutrals-subtle": "$gray100",
53
+ "border-neutrals-subtle-hover": "$gray200",
54
+ "border-neutrals-subtle-pressed": "$gray250",
72
55
  "border-neutrals-transparent": "$transparent",
73
- "border-primary": "$blue-500",
74
- "border-primary-active": "$blue-600",
75
- "border-primary-hover": "$blue-550",
76
- "border-primary-inverted": "$blue-100",
77
- "border-success": "$green-550",
78
- "border-success-active": "$green-650",
79
- "border-success-hover": "$green-600",
80
- "border-warning": "$yellow-500",
81
- "icon-danger": "$red-550",
82
- "icon-danger-active": "$red-650",
83
- "icon-danger-hover": "$red-600",
84
- "icon-danger-inverted": "$white",
85
- "icon-neutrals": "$gray-900",
86
- "icon-neutrals-disabled": "$gray-350",
87
- "icon-neutrals-inactive": "$gray-450",
88
- "icon-neutrals-inactive-hover": "$gray-500",
89
- "icon-neutrals-inverted": "$gray-50",
90
- "icon-neutrals-search": "$gray-500",
91
- "icon-neutrals-subtle": "$gray-500",
92
- "icon-neutrals-text": "$gray-700",
93
- "icon-primary": "$blue-500",
94
- "icon-primary-active": "$blue-600",
95
- "icon-primary-hover": "$blue-550",
96
- "icon-primary-inverted": "$white",
97
- "icon-primary-selected": "$blue-500",
98
- "icon-success": "$green-550",
99
- "icon-success-active": "$green-650",
100
- "icon-success-hover": "$green-600",
101
- "icon-success-inverted": "$green-200",
102
- "icon-warning": "$yellow-700",
103
- "icon-warning-prominent": "$yellow-700",
104
- "icon-warning-subtle": "$yellow-600",
105
- "text-danger": "$red-550",
106
- "text-danger-active": "$red-650",
107
- "text-danger-hover": "$red-600",
108
- "text-danger-inverted": "$white",
109
- "text-neutrals": "$gray-900",
110
- "text-neutrals-active": "$gray-950",
111
- "text-neutrals-disabled": "$gray-350",
112
- "text-neutrals-hover": "$gray-950",
113
- "text-neutrals-inverted": "$gray-50",
114
- "text-neutrals-placeholder": "$gray-500",
115
- "text-neutrals-placeholder-only": "$gray-500",
116
- "text-neutrals-subtle": "$gray-500",
117
- "text-neutrals-subtle-active": "$gray-600",
118
- "text-neutrals-subtle-hover": "$gray-550",
119
- "text-primary": "$blue-500",
120
- "text-primary-active": "$blue-600",
121
- "text-primary-hover": "$blue-550",
122
- "text-primary-inverted": "$white",
123
- "text-primary-inverted-subtle": "$blue-300",
124
- "text-primary-selected": "$blue-500",
125
- "text-success": "$green-550",
126
- "text-success-active": "$green-650",
127
- "text-success-hover": "$green-600",
128
- "text-success-inverted": "$green-200",
129
- "text-warning": "$yellow-700",
130
- "text-warning-subtle": "$yellow-600"
56
+ "border-primary": "$blue500",
57
+ "border-primary-hover": "$blue550",
58
+ "border-primary-inverted": "$blue50",
59
+ "border-primary-pressed": "$blue600",
60
+ "border-primary-selected": "$blue500",
61
+ "border-success": "$green500",
62
+ "border-success-hover": "$green550",
63
+ "border-success-pressed": "$green600",
64
+ "border-warning": "$yellow500",
65
+ "icon-danger": "$red500",
66
+ "icon-danger-hover": "$red550",
67
+ "icon-danger-inverted": "$red50",
68
+ "icon-danger-pressed": "$red600",
69
+ "icon-neutrals": "$gray900",
70
+ "icon-neutrals-disabled": "$alphaGray600",
71
+ "icon-neutrals-hover": "$gray950",
72
+ "icon-neutrals-inverted": "$white",
73
+ "icon-neutrals-inverted-hover": "$gray50",
74
+ "icon-neutrals-inverted-subtle": "$alphaWhite700",
75
+ "icon-neutrals-inverted-subtle-hover": "$alphaWhite600",
76
+ "icon-neutrals-placeholder": "$gray500",
77
+ "icon-neutrals-pressed": "$gray950",
78
+ "icon-neutrals-subtle": "$gray600",
79
+ "icon-neutrals-subtle-hover": "$gray650",
80
+ "icon-neutrals-subtle-pressed": "$gray700",
81
+ "icon-primary": "$blue500",
82
+ "icon-primary-hover": "$blue550",
83
+ "icon-primary-inverted": "$blue50",
84
+ "icon-primary-inverted-hover": "$blue100",
85
+ "icon-primary-pressed": "$blue600",
86
+ "icon-primary-selected": "$blue500",
87
+ "icon-success": "$green600",
88
+ "icon-success-hover": "$green650",
89
+ "icon-success-inverted": "$green50",
90
+ "icon-success-pressed": "$green700",
91
+ "icon-warning": "$yellow800",
92
+ "text-danger": "$red500",
93
+ "text-danger-hover": "$red550",
94
+ "text-danger-inverted": "$red50",
95
+ "text-danger-pressed": "$red600",
96
+ "text-neutrals": "$gray900",
97
+ "text-neutrals-disabled": "$alphaGray300",
98
+ "text-neutrals-hover": "$gray950",
99
+ "text-neutrals-inverted": "$white",
100
+ "text-neutrals-inverted-hover": "$gray50",
101
+ "text-neutrals-inverted-subtle": "$alphaWhite700",
102
+ "text-neutrals-inverted-subtle-hover": "$alphaWhite600",
103
+ "text-neutrals-placeholder": "$gray500",
104
+ "text-neutrals-pressed": "$gray950",
105
+ "text-neutrals-subtle": "$gray600",
106
+ "text-neutrals-subtle-hover": "$gray650",
107
+ "text-neutrals-subtle-pressed": "$gray700",
108
+ "text-primary": "$blue500",
109
+ "text-primary-hover": "$blue550",
110
+ "text-primary-inverted": "$blue50",
111
+ "text-primary-inverted-subtle": "$blue100",
112
+ "text-primary-pressed": "$blue600",
113
+ "text-primary-selected": "$blue500",
114
+ "text-success": "$green600",
115
+ "text-success-hover": "$green650",
116
+ "text-success-inverted": "$green50",
117
+ "text-success-pressed": "$green700",
118
+ "text-warning": "$yellow800"
131
119
  };
132
120
 
133
- const focusShadows = {
121
+ const colors = {
122
+ "background-alpha": "$alphaBlack100",
123
+ "background-alpha-subtle": "$alphaBlack50",
124
+ "background-neutrals-overlay": "$alphaBlack300",
125
+ "background-neutrals-overlay-subtle": "$alphaBlack200",
126
+ "background-danger-prominent": "$red500",
127
+ "background-danger-prominent-hover": "$red450",
128
+ "background-danger-prominent-pressed": "$red400",
129
+ "background-danger-subtle": "$red600",
130
+ "background-danger-subtle-hover": "$red550",
131
+ "background-danger-subtle-pressed": "$red500",
132
+ "background-neutrals": "$gray950",
133
+ "background-neutrals-control": "$gray700",
134
+ "background-neutrals-control-hover": "$gray650",
135
+ "background-neutrals-control-pressed": "$gray600",
136
+ "background-neutrals-disabled": "$alphaWhite100",
137
+ "background-neutrals-hover": "$gray900",
138
+ "background-neutrals-inverted": "$white",
139
+ "background-neutrals-inverted-subtle": "$gray150",
140
+ "background-neutrals-pressed": "$gray850",
141
+ "background-neutrals-subtle": "$gray750",
142
+ "background-neutrals-subtle-hover": "$gray700",
143
+ "background-neutrals-subtle-pressed": "$gray650",
144
+ "background-neutrals-transparent": "$transparent",
145
+ "background-primary-prominent": "$blue400",
146
+ "background-primary-prominent-hover": "$blue350",
147
+ "background-primary-prominent-pressed": "$blue300",
148
+ "background-primary-prominent-selected": "$blue400",
149
+ "background-primary-subtle": "$blue700",
150
+ "background-primary-subtle-hover": "$blue650",
151
+ "background-primary-subtle-pressed": "$blue600",
152
+ "background-primary-subtle-selected": "$blue700",
153
+ "background-success-prominent": "$green500",
154
+ "background-success-prominent-hover": "$green450",
155
+ "background-success-prominent-pressed": "$green400",
156
+ "background-success-subtle": "$green600",
157
+ "background-warning-prominent": "$yellow500",
158
+ "background-warning-subtle": "$yellow50",
159
+ "border-danger": "$red500",
160
+ "border-danger-hover": "$red450",
161
+ "border-danger-pressed": "$red400",
162
+ "focus-keyboard": "#2B4DF8",
163
+ "border-neutrals": "$gray550",
164
+ "border-neutrals-disabled": "$alphaGray50",
165
+ "border-neutrals-hover": "$gray400",
166
+ "border-neutrals-inverted": "$gray950",
167
+ "border-neutrals-pressed": "$gray350",
168
+ "border-neutrals-subtle": "$gray800",
169
+ "border-neutrals-subtle-hover": "$gray700",
170
+ "border-neutrals-subtle-pressed": "$gray650",
171
+ "border-neutrals-transparent": "$transparent",
172
+ "border-primary": "$blue400",
173
+ "border-primary-hover": "$blue350",
174
+ "border-primary-inverted": "$blue900",
175
+ "border-primary-pressed": "$blue300",
176
+ "border-primary-selected": "$blue400",
177
+ "border-success": "$green500",
178
+ "border-success-hover": "$green450",
179
+ "border-success-pressed": "$green400",
180
+ "border-warning": "$yellow500",
181
+ "icon-danger": "$red400",
182
+ "icon-danger-hover": "$red350",
183
+ "icon-danger-inverted": "$red900",
184
+ "icon-danger-pressed": "$red300",
185
+ "icon-neutrals": "$gray50",
186
+ "icon-neutrals-disabled": "$alphaBlack300",
187
+ "icon-neutrals-hover": "$gray100",
188
+ "icon-neutrals-inverted": "$gray950",
189
+ "icon-neutrals-inverted-hover": "$gray900",
190
+ "icon-neutrals-inverted-subtle": "$alphaBlack700",
191
+ "icon-neutrals-inverted-subtle-hover": "$alphaBlack800",
192
+ "icon-neutrals-placeholder": "$gray300",
193
+ "icon-neutrals-pressed": "$gray150",
194
+ "icon-neutrals-subtle": "$gray300",
195
+ "icon-neutrals-subtle-hover": "$gray250",
196
+ "icon-neutrals-subtle-pressed": "$gray200",
197
+ "icon-primary": "$blue400",
198
+ "icon-primary-hover": "$blue350",
199
+ "icon-primary-inverted": "$blue900",
200
+ "icon-primary-inverted-hover": "$gray850",
201
+ "icon-primary-pressed": "$blue300",
202
+ "icon-primary-selected": "$blue400",
203
+ "icon-success": "$green400",
204
+ "icon-success-hover": "$green350",
205
+ "icon-success-inverted": "$green900",
206
+ "icon-success-pressed": "$green300",
207
+ "icon-warning": "$yellow200",
208
+ "text-danger": "$red500",
209
+ "text-danger-hover": "$red450",
210
+ "text-danger-inverted": "$red900",
211
+ "text-danger-pressed": "$red400",
212
+ "text-neutrals": "$gray50",
213
+ "text-neutrals-disabled": "$alphaBlack300",
214
+ "text-neutrals-hover": "$gray100",
215
+ "text-neutrals-inverted": "$gray900",
216
+ "text-neutrals-inverted-hover": "$gray850",
217
+ "text-neutrals-inverted-subtle": "$alphaBlack700",
218
+ "text-neutrals-inverted-subtle-hover": "$alphaBlack800",
219
+ "text-neutrals-placeholder": "$gray300",
220
+ "text-neutrals-pressed": "$gray150",
221
+ "text-neutrals-subtle": "$gray300",
222
+ "text-neutrals-subtle-hover": "$gray250",
223
+ "text-neutrals-subtle-pressed": "$gray200",
224
+ "text-primary": "$blue400",
225
+ "text-primary-hover": "$blue350",
226
+ "text-primary-inverted": "$blue900",
227
+ "text-primary-inverted-subtle": "$blue850",
228
+ "text-primary-pressed": "$blue300",
229
+ "text-primary-selected": "$blue400",
230
+ "text-success": "$green400",
231
+ "text-success-hover": "$green350",
232
+ "text-success-inverted": "$green900",
233
+ "text-success-pressed": "$green300",
234
+ "text-warning": "$yellow200"
235
+ };
236
+
237
+ const shadows = {
238
+ dark: {
239
+ 50: "0px 0px 8px 0px rgba(9,9,9,.65)",
240
+ 100: "0px 0px 16px 0px rgba(9,9,9,.65)"
241
+ },
242
+ light: {
243
+ 50: "0 4px 16px #05003812",
244
+ 100: "0 8px 32px #05003808"
245
+ }
246
+ };
247
+ const focus = {
134
248
  "focus-small": "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner",
135
249
  "focus-small-outline": "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 1px $colors$border-focus-middle, inset 0 0 0 2px $colors$border-focus-inner",
136
250
  "focus-large": "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer",
@@ -140,154 +254,13 @@ const focusShadows = {
140
254
  "focus-controls-success": "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$background-success-prominent, 0 0 0 5px $colors$background-success"
141
255
  };
142
256
 
143
- const shadows$1 = Object.freeze({
144
- 50: "0 4px 16px #05003812",
145
- 100: "0 8px 32px #05003808",
146
- ...focusShadows
147
- });
148
-
149
257
  const light = Object.freeze({
150
258
  colors: colors$1,
151
- shadows: shadows$1
259
+ shadows: { ...shadows.light, ...focus }
152
260
  });
153
-
154
- const colors = {
155
- "background-alpha-active": "#FFFFFF4D",
156
- "background-alpha-hover": "#FFFFFF33",
157
- "background-danger-prominent": "$red-500",
158
- "background-danger-prominent-active": "$red-400",
159
- "background-danger-prominent-hover": "$red-450",
160
- "background-danger-subtle": "$red-800",
161
- "background-danger-subtle-active": "$red-700",
162
- "background-danger-subtle-hover": "$red-750",
163
- "background-neutrals": "$gray-950",
164
- "background-neutrals-active": "$gray-700",
165
- "background-neutrals-container": "$gray-850",
166
- "background-neutrals-controls-disabled": "$gray-700",
167
- "background-neutrals-disabled": "$gray-700",
168
- "background-neutrals-hover": "$gray-800",
169
- "background-neutrals-inactive": "$gray-500",
170
- "background-neutrals-inactive-hover": "$gray-600",
171
- "background-neutrals-inverted": "$white",
172
- "background-neutrals-inverted-subtle": "$gray-100",
173
- "background-neutrals-page": "$gray-850",
174
- "background-neutrals-page-subtle": "$gray-800",
175
- "background-neutrals-scrollbar": "$gray-700",
176
- "background-neutrals-scrollbar-active": "$gray-600",
177
- "background-neutrals-scrollbar-hover": "$gray-650",
178
- "background-neutrals-subtle": "$gray-750",
179
- "background-neutrals-subtle-active": "$gray-650",
180
- "background-neutrals-subtle-hover": "$gray-700",
181
- "background-primary-prominent": "$blue-500",
182
- "background-primary-prominent-active": "$blue-600",
183
- "background-primary-prominent-hover": "$blue-550",
184
- "background-primary-prominent-selected": "$blue-500",
185
- "background-primary-subtle": "$blue-800",
186
- "background-primary-subtle-active": "$blue-700",
187
- "background-primary-subtle-hover": "$blue-750",
188
- "background-primary-subtle-selected": "$blue-700",
189
- "background-success": "$green-800",
190
- "background-success-prominent": "$green-500",
191
- "background-success-prominent-active": "$green-400",
192
- "background-success-prominent-hover": "$green-450",
193
- "background-warning-prominent": "$yellow-400",
194
- "background-warning-subtle": "$yellow-900",
195
- "border-danger": "$red-300",
196
- "border-danger-active": "$red-200",
197
- "border-danger-hover": "$red-250",
198
- "border-focus-error-inner": "$gray-950",
199
- "border-focus-error-middle": "$red-350",
200
- "border-focus-error-outer": "$red-550",
201
- "border-focus-inner": "$gray-950",
202
- "border-focus-middle": "$blue-350",
203
- "border-focus-outer": "$blue-550",
204
- "border-focus-success-inner": "$gray-950",
205
- "border-focus-success-middle": "$green-350",
206
- "border-focus-success-outer": "$green-550",
207
- "border-neutrals": "$gray-550",
208
- "border-neutrals-active": "$gray-450",
209
- "border-neutrals-controls": "$gray-600",
210
- "border-neutrals-controls-disabled": "$gray-800",
211
- "border-neutrals-disabled": "$gray-800",
212
- "border-neutrals-hover": "$gray-500",
213
- "border-neutrals-inverted": "$gray-950",
214
- "border-neutrals-subtle": "$gray-800",
215
- "border-neutrals-text": "$gray-100",
216
- "border-neutrals-text-active": "$gray-50",
217
- "border-neutrals-text-hover": "$gray-50",
218
- "border-neutrals-text-subtle": "$gray-300",
219
- "border-neutrals-text-subtle-active": "$gray-100",
220
- "border-neutrals-text-subtle-hover": "$gray-200",
221
- "border-neutrals-transparent": "$transparent",
222
- "border-primary": "$blue-300",
223
- "border-primary-active": "$blue-200",
224
- "border-primary-hover": "$blue-250",
225
- "border-primary-inverted": "$blue-900",
226
- "border-success": "$green-300",
227
- "border-success-active": "$green-200",
228
- "border-success-hover": "$green-250",
229
- "border-warning": "$yellow-700",
230
- "icon-danger": "$red-200",
231
- "icon-danger-active": "$red-100",
232
- "icon-danger-hover": "$red-150",
233
- "icon-danger-inverted": "$white",
234
- "icon-neutrals": "$gray-100",
235
- "icon-neutrals-disabled": "$gray-600",
236
- "icon-neutrals-inactive": "$gray-400",
237
- "icon-neutrals-inactive-hover": "$gray-300",
238
- "icon-neutrals-inverted": "$gray-900",
239
- "icon-neutrals-search": "$gray-400",
240
- "icon-neutrals-subtle": "$gray-200",
241
- "icon-neutrals-text": "$gray-300",
242
- "icon-primary": "$blue-300",
243
- "icon-primary-active": "$blue-200",
244
- "icon-primary-hover": "$blue-250",
245
- "icon-primary-inverted": "$white",
246
- "icon-primary-selected": "$blue-200",
247
- "icon-success": "$green-200",
248
- "icon-success-active": "$green-100",
249
- "icon-success-hover": "$green-150",
250
- "icon-success-inverted": "$green-800",
251
- "icon-warning": "$yellow-200",
252
- "icon-warning-prominent": "$yellow-200",
253
- "icon-warning-subtle": "$yellow-300",
254
- "text-danger": "$red-200",
255
- "text-danger-active": "$red-100",
256
- "text-danger-hover": "$red-150",
257
- "text-danger-inverted": "$white",
258
- "text-neutrals": "$gray-100",
259
- "text-neutrals-active": "$gray-50",
260
- "text-neutrals-disabled": "$gray-600",
261
- "text-neutrals-hover": "$gray-50",
262
- "text-neutrals-inverted": "$gray-950",
263
- "text-neutrals-placeholder": "$gray-300",
264
- "text-neutrals-placeholder-only": "$gray-300",
265
- "text-neutrals-subtle": "$gray-300",
266
- "text-neutrals-subtle-active": "$gray-100",
267
- "text-neutrals-subtle-hover": "$gray-200",
268
- "text-primary": "$blue-300",
269
- "text-primary-active": "$blue-200",
270
- "text-primary-hover": "$blue-250",
271
- "text-primary-inverted": "$white",
272
- "text-primary-inverted-subtle": "$blue-400",
273
- "text-primary-selected": "$blue-300",
274
- "text-success": "$green-200",
275
- "text-success-active": "$green-100",
276
- "text-success-hover": "$green-150",
277
- "text-success-inverted": "$green-800",
278
- "text-warning": "$yellow-200",
279
- "text-warning-subtle": "$yellow-300"
280
- };
281
-
282
- const shadows = Object.freeze({
283
- 50: "0px 0px 8px 0px rgba(9,9,9,.65)",
284
- 100: "0px 0px 16px 0px rgba(9,9,9,.65)",
285
- ...focusShadows
286
- });
287
-
288
261
  const dark = Object.freeze({
289
- colors,
290
- shadows
262
+ colors: colors,
263
+ shadows: { ...shadows.dark, ...focus }
291
264
  });
292
265
 
293
266
  const base = light;