tide-design-system 2.1.11 → 2.1.12

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 (42) hide show
  1. package/dist/css/dynamic-buttons.css +279 -0
  2. package/dist/css/dynamic-utilities.css +123 -0
  3. package/dist/css/main.css +4 -0
  4. package/dist/css/utilities-lg.css +401 -0
  5. package/dist/css/utilities-md.css +403 -0
  6. package/dist/css/utilities-sm.css +401 -0
  7. package/dist/css/utilities-xl.css +401 -0
  8. package/dist/css/utilities.css +2 -1519
  9. package/dist/style.css +1 -1
  10. package/dist/tide-design-system.cjs +2 -2
  11. package/dist/tide-design-system.esm.d.ts +0 -4
  12. package/dist/tide-design-system.esm.js +486 -470
  13. package/package.json +1 -1
  14. package/src/assets/css/dynamic-buttons.css +279 -0
  15. package/src/assets/css/dynamic-utilities.css +123 -0
  16. package/src/assets/css/main.css +4 -0
  17. package/src/assets/css/utilities-lg.css +401 -0
  18. package/src/assets/css/utilities-md.css +403 -0
  19. package/src/assets/css/utilities-sm.css +401 -0
  20. package/src/assets/css/utilities-xl.css +401 -0
  21. package/src/assets/css/utilities.css +2 -1519
  22. package/src/components/TideAccordionItem.vue +7 -3
  23. package/src/components/TideAlert.vue +2 -2
  24. package/src/components/TideBadge.vue +1 -1
  25. package/src/components/TideBadgePremium.vue +1 -1
  26. package/src/components/TideBadgeTrustedPartner.vue +1 -1
  27. package/src/components/TideBreadCrumbs.vue +3 -3
  28. package/src/components/TideButton.vue +1 -1
  29. package/src/components/TideButtonPagination.vue +1 -1
  30. package/src/components/TideButtonSegmented.vue +4 -3
  31. package/src/components/TideChipAction.vue +1 -2
  32. package/src/components/TideChipFilter.vue +2 -3
  33. package/src/components/TideChipInput.vue +1 -2
  34. package/src/components/TideColumns.vue +1 -1
  35. package/src/components/TideIndicator.vue +14 -18
  36. package/src/components/TideInputCheckbox.vue +6 -1
  37. package/src/components/TideInputRadio.vue +14 -2
  38. package/src/components/TideInputSelect.vue +3 -4
  39. package/src/components/TideInputText.vue +17 -6
  40. package/src/components/TideInputTextarea.vue +3 -15
  41. package/src/components/TideLink.vue +1 -3
  42. package/src/components/TideSeoLinks.vue +2 -2
package/dist/css/dynamic-buttons.css CHANGED
@@ -65,3 +65,282 @@ button.tide-button-quaternary:disabled,
65
65
  button.tide-button-floating:disabled {
66
66
  opacity: 0.32;
67
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 CHANGED
@@ -26,3 +26,126 @@
26
26
  .tide-font-on-surface-brand {color: var(--tide-on-surface-brand);}
27
27
  .tide-font-on-surface-inverse {color: var(--tide-on-surface-inverse);}
28
28
  .tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
29
+ @media (min-width: 768px) {
30
+ /* Background */
31
+ .sm-tide-bg-primary {background: var(--tide-primary);}
32
+ .sm-tide-bg-secondary {background: var(--tide-secondary);}
33
+
34
+ .sm-tide-bg-surface {background: var(--tide-surface);}
35
+ .sm-tide-bg-surface-variant {background: var(--tide-surface-variant);}
36
+ .sm-tide-bg-surface-brand {background: var(--tide-surface-brand);}
37
+ .sm-tide-bg-surface-accent {background: var(--tide-surface-accent);}
38
+ .sm-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
39
+ .sm-tide-bg-surface-floating {background: var(--tide-surface-floating);}
40
+
41
+ /* Border */
42
+ .sm-tide-border-primary {border-color: var(--tide-primary);}
43
+
44
+ .sm-tide-border {border-color: var(--tide-border);}
45
+ .sm-tide-border-low {border-color: var(--tide-border-low);}
46
+ .sm-tide-border-high {border-color: var(--tide-border-high);}
47
+ .sm-tide-border-floating {border-color: var(--tide-border-floating);}
48
+
49
+ /* Foreground */
50
+ .sm-tide-font-on-primary {color: var(--tide-on-primary);}
51
+ .sm-tide-font-on-secondary {color: var(--tide-on-secondary);}
52
+
53
+ .sm-tide-font-on-surface {color: var(--tide-on-surface);}
54
+ .sm-tide-font-on-surface-variant {color: var(--tide-on-surface-variant);}
55
+ .sm-tide-font-on-surface-brand {color: var(--tide-on-surface-brand);}
56
+ .sm-tide-font-on-surface-inverse {color: var(--tide-on-surface-inverse);}
57
+ .sm-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
58
+ }
59
+
60
+ @media (min-width: 992px) {
61
+ /* Background */
62
+ .md-tide-bg-primary {background: var(--tide-primary);}
63
+ .md-tide-bg-secondary {background: var(--tide-secondary);}
64
+
65
+ .md-tide-bg-surface {background: var(--tide-surface);}
66
+ .md-tide-bg-surface-variant {background: var(--tide-surface-variant);}
67
+ .md-tide-bg-surface-brand {background: var(--tide-surface-brand);}
68
+ .md-tide-bg-surface-accent {background: var(--tide-surface-accent);}
69
+ .md-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
70
+ .md-tide-bg-surface-floating {background: var(--tide-surface-floating);}
71
+
72
+ /* Border */
73
+ .md-tide-border-primary {border-color: var(--tide-primary);}
74
+
75
+ .md-tide-border {border-color: var(--tide-border);}
76
+ .md-tide-border-low {border-color: var(--tide-border-low);}
77
+ .md-tide-border-high {border-color: var(--tide-border-high);}
78
+ .md-tide-border-floating {border-color: var(--tide-border-floating);}
79
+
80
+ /* Foreground */
81
+ .md-tide-font-on-primary {color: var(--tide-on-primary);}
82
+ .md-tide-font-on-secondary {color: var(--tide-on-secondary);}
83
+
84
+ .md-tide-font-on-surface {color: var(--tide-on-surface);}
85
+ .md-tide-font-on-surface-variant {color: var(--tide-on-surface-variant);}
86
+ .md-tide-font-on-surface-brand {color: var(--tide-on-surface-brand);}
87
+ .md-tide-font-on-surface-inverse {color: var(--tide-on-surface-inverse);}
88
+ .md-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
89
+ }
90
+
91
+ @media (min-width: 1232px) {
92
+ /* Background */
93
+ .lg-tide-bg-primary {background: var(--tide-primary);}
94
+ .lg-tide-bg-secondary {background: var(--tide-secondary);}
95
+
96
+ .lg-tide-bg-surface {background: var(--tide-surface);}
97
+ .lg-tide-bg-surface-variant {background: var(--tide-surface-variant);}
98
+ .lg-tide-bg-surface-brand {background: var(--tide-surface-brand);}
99
+ .lg-tide-bg-surface-accent {background: var(--tide-surface-accent);}
100
+ .lg-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
101
+ .lg-tide-bg-surface-floating {background: var(--tide-surface-floating);}
102
+
103
+ /* Border */
104
+ .lg-tide-border-primary {border-color: var(--tide-primary);}
105
+
106
+ .lg-tide-border {border-color: var(--tide-border);}
107
+ .lg-tide-border-low {border-color: var(--tide-border-low);}
108
+ .lg-tide-border-high {border-color: var(--tide-border-high);}
109
+ .lg-tide-border-floating {border-color: var(--tide-border-floating);}
110
+
111
+ /* Foreground */
112
+ .lg-tide-font-on-primary {color: var(--tide-on-primary);}
113
+ .lg-tide-font-on-secondary {color: var(--tide-on-secondary);}
114
+
115
+ .lg-tide-font-on-surface {color: var(--tide-on-surface);}
116
+ .lg-tide-font-on-surface-variant {color: var(--tide-on-surface-variant);}
117
+ .lg-tide-font-on-surface-brand {color: var(--tide-on-surface-brand);}
118
+ .lg-tide-font-on-surface-inverse {color: var(--tide-on-surface-inverse);}
119
+ .lg-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
120
+ }
121
+
122
+ @media (min-width: 1920px) {
123
+ /* Background */
124
+ .xl-tide-bg-primary {background: var(--tide-primary);}
125
+ .xl-tide-bg-secondary {background: var(--tide-secondary);}
126
+
127
+ .xl-tide-bg-surface {background: var(--tide-surface);}
128
+ .xl-tide-bg-surface-variant {background: var(--tide-surface-variant);}
129
+ .xl-tide-bg-surface-brand {background: var(--tide-surface-brand);}
130
+ .xl-tide-bg-surface-accent {background: var(--tide-surface-accent);}
131
+ .xl-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
132
+ .xl-tide-bg-surface-floating {background: var(--tide-surface-floating);}
133
+
134
+ /* Border */
135
+ .xl-tide-border-primary {border-color: var(--tide-primary);}
136
+
137
+ .xl-tide-border {border-color: var(--tide-border);}
138
+ .xl-tide-border-low {border-color: var(--tide-border-low);}
139
+ .xl-tide-border-high {border-color: var(--tide-border-high);}
140
+ .xl-tide-border-floating {border-color: var(--tide-border-floating);}
141
+
142
+ /* Foreground */
143
+ .xl-tide-font-on-primary {color: var(--tide-on-primary);}
144
+ .xl-tide-font-on-secondary {color: var(--tide-on-secondary);}
145
+
146
+ .xl-tide-font-on-surface {color: var(--tide-on-surface);}
147
+ .xl-tide-font-on-surface-variant {color: var(--tide-on-surface-variant);}
148
+ .xl-tide-font-on-surface-brand {color: var(--tide-on-surface-brand);}
149
+ .xl-tide-font-on-surface-inverse {color: var(--tide-on-surface-inverse);}
150
+ .xl-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
151
+ }
package/dist/css/main.css CHANGED
@@ -2,6 +2,10 @@
2
2
  @import './reset.css';
3
3
  @import './variables.css';
4
4
  @import './utilities.css';
5
+ @import './utilities-sm.css';
6
+ @import './utilities-md.css';
7
+ @import './utilities-lg.css';
8
+ @import './utilities-xl.css';
5
9
  @import './dynamic-buttons.css';
6
10
  @import './dynamic-utilities.css';
7
11
  @import './grid-layout.css';