tide-design-system 2.2.16 → 2.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 (34) hide show
  1. package/dist/css/main.css +0 -6
  2. package/dist/css/utilities-base.css +541 -0
  3. package/dist/css/utilities-responsive.css +2717 -0
  4. package/dist/css/utilities.css +2 -446
  5. package/dist/style.css +1 -1
  6. package/dist/tide-design-system.cjs +2 -2
  7. package/dist/tide-design-system.esm.d.ts +0 -81
  8. package/dist/tide-design-system.esm.js +90 -98
  9. package/dist/utilities/validation.ts +5 -1
  10. package/index.ts +0 -17
  11. package/package.json +1 -1
  12. package/src/assets/css/main.css +0 -6
  13. package/src/assets/css/utilities-base.css +541 -0
  14. package/src/assets/css/utilities-responsive.css +2717 -0
  15. package/src/assets/css/utilities.css +2 -446
  16. package/src/docs/integration-partial.md +0 -7
  17. package/src/utilities/validation.ts +5 -1
  18. package/dist/css/dynamic-buttons.css +0 -346
  19. package/dist/css/dynamic-utilities.css +0 -152
  20. package/dist/css/utilities-lg.css +0 -448
  21. package/dist/css/utilities-md.css +0 -448
  22. package/dist/css/utilities-sm.css +0 -448
  23. package/dist/css/utilities-xl.css +0 -448
  24. package/src/assets/css/dynamic-buttons.css +0 -346
  25. package/src/assets/css/dynamic-utilities.css +0 -152
  26. package/src/assets/css/utilities-lg.css +0 -448
  27. package/src/assets/css/utilities-md.css +0 -448
  28. package/src/assets/css/utilities-sm.css +0 -448
  29. package/src/assets/css/utilities-xl.css +0 -448
  30. package/src/types/Detail.ts +0 -4
  31. package/src/types/FacetRange.ts +0 -84
  32. package/src/types/ListingMedia.ts +0 -43
  33. package/src/types/Raw.ts +0 -5
  34. package/src/types/RealmConfig.ts +0 -14
package/dist/css/dynamic-buttons.css DELETED
@@ -1,346 +0,0 @@
1
- /* Rest State */
2
- .tide-button-primary {
3
- background: var(--tide-primary);
4
- border: 2px solid var(--tide-primary);
5
- color: var(--tide-on-primary);
6
- }
7
-
8
- .tide-button-secondary {
9
- background: var(--tide-surface);
10
- border: 2px solid var(--tide-primary);
11
- color: var(--tide-primary);
12
- }
13
-
14
- .tide-button-tertiary {
15
- background: var(--tide-white);
16
- border: 1px solid var(--tide-border);
17
- color: var(--tide-secondary);
18
- }
19
-
20
- .tide-button-quaternary {
21
- background: var(--tide-white);
22
- color: var(--tide-secondary);
23
- }
24
-
25
- .tide-button-floating {
26
- background-color: var(--tide-transparent-100);
27
- color: var(--tide-secondary);
28
- box-shadow: var(--tide-shadow-bottom);
29
- }
30
-
31
- /* Hover State */
32
- a.tide-button-primary:hover,
33
- button.tide-button-primary:enabled:hover {
34
- border: 2px solid var(--tide-primary);
35
- background: var(--tide-white);
36
- color: var(--tide-primary);
37
- }
38
-
39
- a.tide-button-secondary:hover,
40
- button.tide-button-secondary:enabled:hover {
41
- background: var(--tide-primary);
42
- color: var(--tide-on-primary);
43
- }
44
-
45
- a.tide-button-tertiary:hover,
46
- button.tide-button-tertiary:enabled:hover {
47
- border: 1px solid var(--tide-border-high);
48
- }
49
-
50
- a.tide-button-quaternary:hover,
51
- button.tide-button-quaternary:enabled:hover {
52
- background: var(--tide-surface-variant);
53
- }
54
-
55
- .tide-button-floating:hover,
56
- button.tide-button-floating:enabled:hover {
57
- background-color: var(--tide-white);
58
- }
59
-
60
- /* Disabled State */
61
- button.tide-button-primary:disabled,
62
- button.tide-button-secondary:disabled,
63
- button.tide-button-tertiary:disabled,
64
- button.tide-button-quaternary:disabled,
65
- button.tide-button-floating:disabled {
66
- opacity: 0.32;
67
- }
68
- @media (min-width: 768px) {
69
- /* Rest State */
70
- .sm-tide-button-primary {
71
- background: var(--tide-primary);
72
- border: 2px solid var(--tide-primary);
73
- color: var(--tide-on-primary);
74
- }
75
-
76
- .sm-tide-button-secondary {
77
- background: var(--tide-surface);
78
- border: 2px solid var(--tide-primary);
79
- color: var(--tide-primary);
80
- }
81
-
82
- .sm-tide-button-tertiary {
83
- background: var(--tide-white);
84
- border: 1px solid var(--tide-border);
85
- color: var(--tide-secondary);
86
- }
87
-
88
- .sm-tide-button-quaternary {
89
- background: var(--tide-white);
90
- color: var(--tide-secondary);
91
- }
92
-
93
- .sm-tide-button-floating {
94
- background-color: var(--tide-transparent-100);
95
- color: var(--tide-secondary);
96
- box-shadow: var(--tide-shadow-bottom);
97
- }
98
-
99
- /* Hover State */
100
- a.sm-tide-button-primary:hover,
101
- button.sm-tide-button-primary:enabled:hover {
102
- border: 2px solid var(--tide-primary);
103
- background: var(--tide-white);
104
- color: var(--tide-primary);
105
- }
106
-
107
- a.sm-tide-button-secondary:hover,
108
- button.sm-tide-button-secondary:enabled:hover {
109
- background: var(--tide-primary);
110
- color: var(--tide-on-primary);
111
- }
112
-
113
- a.sm-tide-button-tertiary:hover,
114
- button.sm-tide-button-tertiary:enabled:hover {
115
- border: 1px solid var(--tide-border-high);
116
- }
117
-
118
- a.sm-tide-button-quaternary:hover,
119
- button.sm-tide-button-quaternary:enabled:hover {
120
- background: var(--tide-surface-variant);
121
- }
122
-
123
- .sm-tide-button-floating:hover,
124
- button.sm-tide-button-floating:enabled:hover {
125
- background-color: var(--tide-white);
126
- }
127
-
128
- /* Disabled State */
129
- button.sm-tide-button-primary:disabled,
130
- button.sm-tide-button-secondary:disabled,
131
- button.sm-tide-button-tertiary:disabled,
132
- button.sm-tide-button-quaternary:disabled,
133
- button.sm-tide-button-floating:disabled {
134
- opacity: 0.32;
135
- }
136
- }
137
-
138
- @media (min-width: 992px) {
139
- /* Rest State */
140
- .md-tide-button-primary {
141
- background: var(--tide-primary);
142
- border: 2px solid var(--tide-primary);
143
- color: var(--tide-on-primary);
144
- }
145
-
146
- .md-tide-button-secondary {
147
- background: var(--tide-surface);
148
- border: 2px solid var(--tide-primary);
149
- color: var(--tide-primary);
150
- }
151
-
152
- .md-tide-button-tertiary {
153
- background: var(--tide-white);
154
- border: 1px solid var(--tide-border);
155
- color: var(--tide-secondary);
156
- }
157
-
158
- .md-tide-button-quaternary {
159
- background: var(--tide-white);
160
- color: var(--tide-secondary);
161
- }
162
-
163
- .md-tide-button-floating {
164
- background-color: var(--tide-transparent-100);
165
- color: var(--tide-secondary);
166
- box-shadow: var(--tide-shadow-bottom);
167
- }
168
-
169
- /* Hover State */
170
- a.md-tide-button-primary:hover,
171
- button.md-tide-button-primary:enabled:hover {
172
- border: 2px solid var(--tide-primary);
173
- background: var(--tide-white);
174
- color: var(--tide-primary);
175
- }
176
-
177
- a.md-tide-button-secondary:hover,
178
- button.md-tide-button-secondary:enabled:hover {
179
- background: var(--tide-primary);
180
- color: var(--tide-on-primary);
181
- }
182
-
183
- a.md-tide-button-tertiary:hover,
184
- button.md-tide-button-tertiary:enabled:hover {
185
- border: 1px solid var(--tide-border-high);
186
- }
187
-
188
- a.md-tide-button-quaternary:hover,
189
- button.md-tide-button-quaternary:enabled:hover {
190
- background: var(--tide-surface-variant);
191
- }
192
-
193
- .md-tide-button-floating:hover,
194
- button.md-tide-button-floating:enabled:hover {
195
- background-color: var(--tide-white);
196
- }
197
-
198
- /* Disabled State */
199
- button.md-tide-button-primary:disabled,
200
- button.md-tide-button-secondary:disabled,
201
- button.md-tide-button-tertiary:disabled,
202
- button.md-tide-button-quaternary:disabled,
203
- button.md-tide-button-floating:disabled {
204
- opacity: 0.32;
205
- }
206
- }
207
-
208
- @media (min-width: 1232px) {
209
- /* Rest State */
210
- .lg-tide-button-primary {
211
- background: var(--tide-primary);
212
- border: 2px solid var(--tide-primary);
213
- color: var(--tide-on-primary);
214
- }
215
-
216
- .lg-tide-button-secondary {
217
- background: var(--tide-surface);
218
- border: 2px solid var(--tide-primary);
219
- color: var(--tide-primary);
220
- }
221
-
222
- .lg-tide-button-tertiary {
223
- background: var(--tide-white);
224
- border: 1px solid var(--tide-border);
225
- color: var(--tide-secondary);
226
- }
227
-
228
- .lg-tide-button-quaternary {
229
- background: var(--tide-white);
230
- color: var(--tide-secondary);
231
- }
232
-
233
- .lg-tide-button-floating {
234
- background-color: var(--tide-transparent-100);
235
- color: var(--tide-secondary);
236
- box-shadow: var(--tide-shadow-bottom);
237
- }
238
-
239
- /* Hover State */
240
- a.lg-tide-button-primary:hover,
241
- button.lg-tide-button-primary:enabled:hover {
242
- border: 2px solid var(--tide-primary);
243
- background: var(--tide-white);
244
- color: var(--tide-primary);
245
- }
246
-
247
- a.lg-tide-button-secondary:hover,
248
- button.lg-tide-button-secondary:enabled:hover {
249
- background: var(--tide-primary);
250
- color: var(--tide-on-primary);
251
- }
252
-
253
- a.lg-tide-button-tertiary:hover,
254
- button.lg-tide-button-tertiary:enabled:hover {
255
- border: 1px solid var(--tide-border-high);
256
- }
257
-
258
- a.lg-tide-button-quaternary:hover,
259
- button.lg-tide-button-quaternary:enabled:hover {
260
- background: var(--tide-surface-variant);
261
- }
262
-
263
- .lg-tide-button-floating:hover,
264
- button.lg-tide-button-floating:enabled:hover {
265
- background-color: var(--tide-white);
266
- }
267
-
268
- /* Disabled State */
269
- button.lg-tide-button-primary:disabled,
270
- button.lg-tide-button-secondary:disabled,
271
- button.lg-tide-button-tertiary:disabled,
272
- button.lg-tide-button-quaternary:disabled,
273
- button.lg-tide-button-floating:disabled {
274
- opacity: 0.32;
275
- }
276
- }
277
-
278
- @media (min-width: 1920px) {
279
- /* Rest State */
280
- .xl-tide-button-primary {
281
- background: var(--tide-primary);
282
- border: 2px solid var(--tide-primary);
283
- color: var(--tide-on-primary);
284
- }
285
-
286
- .xl-tide-button-secondary {
287
- background: var(--tide-surface);
288
- border: 2px solid var(--tide-primary);
289
- color: var(--tide-primary);
290
- }
291
-
292
- .xl-tide-button-tertiary {
293
- background: var(--tide-white);
294
- border: 1px solid var(--tide-border);
295
- color: var(--tide-secondary);
296
- }
297
-
298
- .xl-tide-button-quaternary {
299
- background: var(--tide-white);
300
- color: var(--tide-secondary);
301
- }
302
-
303
- .xl-tide-button-floating {
304
- background-color: var(--tide-transparent-100);
305
- color: var(--tide-secondary);
306
- box-shadow: var(--tide-shadow-bottom);
307
- }
308
-
309
- /* Hover State */
310
- a.xl-tide-button-primary:hover,
311
- button.xl-tide-button-primary:enabled:hover {
312
- border: 2px solid var(--tide-primary);
313
- background: var(--tide-white);
314
- color: var(--tide-primary);
315
- }
316
-
317
- a.xl-tide-button-secondary:hover,
318
- button.xl-tide-button-secondary:enabled:hover {
319
- background: var(--tide-primary);
320
- color: var(--tide-on-primary);
321
- }
322
-
323
- a.xl-tide-button-tertiary:hover,
324
- button.xl-tide-button-tertiary:enabled:hover {
325
- border: 1px solid var(--tide-border-high);
326
- }
327
-
328
- a.xl-tide-button-quaternary:hover,
329
- button.xl-tide-button-quaternary:enabled:hover {
330
- background: var(--tide-surface-variant);
331
- }
332
-
333
- .xl-tide-button-floating:hover,
334
- button.xl-tide-button-floating:enabled:hover {
335
- background-color: var(--tide-white);
336
- }
337
-
338
- /* Disabled State */
339
- button.xl-tide-button-primary:disabled,
340
- button.xl-tide-button-secondary:disabled,
341
- button.xl-tide-button-tertiary:disabled,
342
- button.xl-tide-button-quaternary:disabled,
343
- button.xl-tide-button-floating:disabled {
344
- opacity: 0.32;
345
- }
346
- }
package/dist/css/dynamic-utilities.css DELETED
@@ -1,152 +0,0 @@
1
- /* Background */
2
- .tide-bg-primary {background: var(--tide-primary);}
3
- .tide-bg-secondary {background: var(--tide-secondary);}
4
-
5
- .tide-bg-surface {background: var(--tide-surface);}
6
- .tide-bg-surface-variant {background: var(--tide-surface-variant);}
7
- .tide-bg-surface-brand {background: var(--tide-surface-brand);}
8
- .tide-bg-surface-accent {background: var(--tide-surface-accent);}
9
- .tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
10
- .tide-bg-surface-floating {background: var(--tide-surface-floating);}
11
-
12
- /* Border */
13
- .tide-border-primary {border-color: var(--tide-primary);}
14
-
15
- .tide-border {border-color: var(--tide-border);}
16
- .tide-border-low {border-color: var(--tide-border-low);}
17
- .tide-border-high {border-color: var(--tide-border-high);}
18
- .tide-border-floating {border-color: var(--tide-border-floating);}
19
-
20
- /* Foreground */
21
- .tide-font-on-primary {color: var(--tide-on-primary);}
22
- .tide-font-on-secondary {color: var(--tide-on-secondary);}
23
-
24
- .tide-font-on-surface {color: var(--tide-on-surface);}
25
- .tide-font-on-surface-variant {color: var(--tide-on-surface-variant);}
26
- .tide-font-on-surface-brand {color: var(--tide-on-surface-brand);}
27
- .tide-font-on-surface-inverse {color: var(--tide-on-surface-inverse);}
28
- .tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
29
-
30
- @media (min-width: 768px) {
31
- /* Background */
32
- .sm-tide-bg-primary {background: var(--tide-primary);}
33
- .sm-tide-bg-secondary {background: var(--tide-secondary);}
34
-
35
- .sm-tide-bg-surface {background: var(--tide-surface);}
36
- .sm-tide-bg-surface-variant {background: var(--tide-surface-variant);}
37
- .sm-tide-bg-surface-brand {background: var(--tide-surface-brand);}
38
- .sm-tide-bg-surface-accent {background: var(--tide-surface-accent);}
39
- .sm-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
40
- .sm-tide-bg-surface-floating {background: var(--tide-surface-floating);}
41
-
42
- /* Border */
43
- .sm-tide-border-primary {border-color: var(--tide-primary);}
44
-
45
- .sm-tide-border {border-color: var(--tide-border);}
46
- .sm-tide-border-low {border-color: var(--tide-border-low);}
47
- .sm-tide-border-high {border-color: var(--tide-border-high);}
48
- .sm-tide-border-floating {border-color: var(--tide-border-floating);}
49
-
50
- /* Foreground */
51
- .sm-tide-font-on-primary {color: var(--tide-on-primary);}
52
- .sm-tide-font-on-secondary {color: var(--tide-on-secondary);}
53
-
54
- .sm-tide-font-on-surface {color: var(--tide-on-surface);}
55
- .sm-tide-font-on-surface-variant {color: var(--tide-on-surface-variant);}
56
- .sm-tide-font-on-surface-brand {color: var(--tide-on-surface-brand);}
57
- .sm-tide-font-on-surface-inverse {color: var(--tide-on-surface-inverse);}
58
- .sm-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
59
- }
60
-
61
- @media (min-width: 992px) {
62
- /* Background */
63
- .md-tide-bg-primary {background: var(--tide-primary);}
64
- .md-tide-bg-secondary {background: var(--tide-secondary);}
65
-
66
- .md-tide-bg-surface {background: var(--tide-surface);}
67
- .md-tide-bg-surface-variant {background: var(--tide-surface-variant);}
68
- .md-tide-bg-surface-brand {background: var(--tide-surface-brand);}
69
- .md-tide-bg-surface-accent {background: var(--tide-surface-accent);}
70
- .md-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
71
- .md-tide-bg-surface-floating {background: var(--tide-surface-floating);}
72
-
73
- /* Border */
74
- .md-tide-border-primary {border-color: var(--tide-primary);}
75
-
76
- .md-tide-border {border-color: var(--tide-border);}
77
- .md-tide-border-low {border-color: var(--tide-border-low);}
78
- .md-tide-border-high {border-color: var(--tide-border-high);}
79
- .md-tide-border-floating {border-color: var(--tide-border-floating);}
80
-
81
- /* Foreground */
82
- .md-tide-font-on-primary {color: var(--tide-on-primary);}
83
- .md-tide-font-on-secondary {color: var(--tide-on-secondary);}
84
-
85
- .md-tide-font-on-surface {color: var(--tide-on-surface);}
86
- .md-tide-font-on-surface-variant {color: var(--tide-on-surface-variant);}
87
- .md-tide-font-on-surface-brand {color: var(--tide-on-surface-brand);}
88
- .md-tide-font-on-surface-inverse {color: var(--tide-on-surface-inverse);}
89
- .md-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
90
- }
91
-
92
- @media (min-width: 1232px) {
93
- /* Background */
94
- .lg-tide-bg-primary {background: var(--tide-primary);}
95
- .lg-tide-bg-secondary {background: var(--tide-secondary);}
96
-
97
- .lg-tide-bg-surface {background: var(--tide-surface);}
98
- .lg-tide-bg-surface-variant {background: var(--tide-surface-variant);}
99
- .lg-tide-bg-surface-brand {background: var(--tide-surface-brand);}
100
- .lg-tide-bg-surface-accent {background: var(--tide-surface-accent);}
101
- .lg-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
102
- .lg-tide-bg-surface-floating {background: var(--tide-surface-floating);}
103
-
104
- /* Border */
105
- .lg-tide-border-primary {border-color: var(--tide-primary);}
106
-
107
- .lg-tide-border {border-color: var(--tide-border);}
108
- .lg-tide-border-low {border-color: var(--tide-border-low);}
109
- .lg-tide-border-high {border-color: var(--tide-border-high);}
110
- .lg-tide-border-floating {border-color: var(--tide-border-floating);}
111
-
112
- /* Foreground */
113
- .lg-tide-font-on-primary {color: var(--tide-on-primary);}
114
- .lg-tide-font-on-secondary {color: var(--tide-on-secondary);}
115
-
116
- .lg-tide-font-on-surface {color: var(--tide-on-surface);}
117
- .lg-tide-font-on-surface-variant {color: var(--tide-on-surface-variant);}
118
- .lg-tide-font-on-surface-brand {color: var(--tide-on-surface-brand);}
119
- .lg-tide-font-on-surface-inverse {color: var(--tide-on-surface-inverse);}
120
- .lg-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
121
- }
122
-
123
- @media (min-width: 1920px) {
124
- /* Background */
125
- .xl-tide-bg-primary {background: var(--tide-primary);}
126
- .xl-tide-bg-secondary {background: var(--tide-secondary);}
127
-
128
- .xl-tide-bg-surface {background: var(--tide-surface);}
129
- .xl-tide-bg-surface-variant {background: var(--tide-surface-variant);}
130
- .xl-tide-bg-surface-brand {background: var(--tide-surface-brand);}
131
- .xl-tide-bg-surface-accent {background: var(--tide-surface-accent);}
132
- .xl-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
133
- .xl-tide-bg-surface-floating {background: var(--tide-surface-floating);}
134
-
135
- /* Border */
136
- .xl-tide-border-primary {border-color: var(--tide-primary);}
137
-
138
- .xl-tide-border {border-color: var(--tide-border);}
139
- .xl-tide-border-low {border-color: var(--tide-border-low);}
140
- .xl-tide-border-high {border-color: var(--tide-border-high);}
141
- .xl-tide-border-floating {border-color: var(--tide-border-floating);}
142
-
143
- /* Foreground */
144
- .xl-tide-font-on-primary {color: var(--tide-on-primary);}
145
- .xl-tide-font-on-secondary {color: var(--tide-on-secondary);}
146
-
147
- .xl-tide-font-on-surface {color: var(--tide-on-surface);}
148
- .xl-tide-font-on-surface-variant {color: var(--tide-on-surface-variant);}
149
- .xl-tide-font-on-surface-brand {color: var(--tide-on-surface-brand);}
150
- .xl-tide-font-on-surface-inverse {color: var(--tide-on-surface-inverse);}
151
- .xl-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
152
- }