tide-design-system 2.2.10 → 2.2.11

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 (76) hide show
  1. package/.storybook/main.ts +1 -0
  2. package/dist/IconArrowUp-75edebad.js +16 -0
  3. package/dist/IconArrowUp-c0afd43d.cjs +2 -0
  4. package/dist/IconAssignment-7171d067.cjs +2 -0
  5. package/dist/IconAssignment-b1d2ffa2.js +16 -0
  6. package/dist/IconClear-4db1f7d4.cjs +2 -0
  7. package/dist/IconClear-5cf9e8be.js +16 -0
  8. package/dist/IconFacebook-a83c1949.cjs +2 -0
  9. package/dist/IconFacebook-fb3f93e3.js +16 -0
  10. package/dist/IconInstagram-9f642623.cjs +2 -0
  11. package/dist/IconInstagram-db345e15.js +16 -0
  12. package/dist/IconLayout-6963184f.js +16 -0
  13. package/dist/IconLayout-d0d278c5.cjs +2 -0
  14. package/dist/IconLinkedIn-2fa1ac20.cjs +2 -0
  15. package/dist/IconLinkedIn-9c4740a6.js +16 -0
  16. package/dist/IconStarFilled-9f4d0d62.cjs +2 -0
  17. package/dist/IconStarFilled-b73e12dc.js +16 -0
  18. package/dist/IconStarHalf-0b663cd6.js +16 -0
  19. package/dist/IconStarHalf-65db4ff6.cjs +2 -0
  20. package/dist/css/dynamic-utilities.css +30 -30
  21. package/dist/css/utilities-lg.css +43 -1
  22. package/dist/css/utilities-md.css +43 -1
  23. package/dist/css/utilities-sm.css +43 -1
  24. package/dist/css/utilities-xl.css +43 -1
  25. package/dist/css/utilities.css +43 -1
  26. package/dist/css/variables.css +3 -0
  27. package/dist/style.css +1 -1
  28. package/dist/tide-design-system.cjs +2 -2
  29. package/dist/tide-design-system.esm.d.ts +111 -5
  30. package/dist/tide-design-system.esm.js +1591 -1396
  31. package/index.ts +6 -2
  32. package/package.json +1 -1
  33. package/src/assets/css/dynamic-utilities.css +30 -30
  34. package/src/assets/css/utilities-lg.css +43 -1
  35. package/src/assets/css/utilities-md.css +43 -1
  36. package/src/assets/css/utilities-sm.css +43 -1
  37. package/src/assets/css/utilities-xl.css +43 -1
  38. package/src/assets/css/utilities.css +43 -1
  39. package/src/assets/css/variables.css +3 -0
  40. package/src/assets/svg/icons/IconArrowUp.svg +3 -0
  41. package/src/assets/svg/icons/IconAssignment.svg +1 -3
  42. package/src/assets/svg/icons/IconClear.svg +1 -3
  43. package/src/assets/svg/icons/IconFacebook.svg +1 -3
  44. package/src/assets/svg/icons/IconInstagram.svg +1 -3
  45. package/src/assets/svg/icons/IconLayout.svg +1 -3
  46. package/src/assets/svg/icons/IconLinkedIn.svg +1 -3
  47. package/src/assets/svg/icons/IconStarFilled.svg +3 -0
  48. package/src/assets/svg/icons/IconStarHalf.svg +3 -0
  49. package/src/components/TideBadge.vue +7 -2
  50. package/src/components/TideChipAction.vue +10 -3
  51. package/src/components/TideImage.vue +19 -2
  52. package/src/components/TideImageBackground.vue +2 -0
  53. package/src/components/TideModal.vue +2 -2
  54. package/src/components/TidePopover.vue +4 -1
  55. package/src/components/TideSheet.vue +166 -0
  56. package/src/stories/FoundationsColor.stories.ts +161 -13
  57. package/src/stories/TideBadge.stories.ts +51 -1
  58. package/src/stories/TideChipAction.stories.ts +28 -1
  59. package/src/stories/TideImage.stories.ts +22 -2
  60. package/src/stories/TideSheet.stories.ts +142 -0
  61. package/src/types/Badge.ts +65 -0
  62. package/src/types/Image.ts +7 -0
  63. package/src/types/Styles.ts +42 -2
  64. package/tests/svg-icons.spec.ts +74 -0
  65. package/dist/IconAssignment-1983e555.js +0 -16
  66. package/dist/IconAssignment-915702cc.cjs +0 -2
  67. package/dist/IconClear-489c5a46.cjs +0 -2
  68. package/dist/IconClear-9419bf17.js +0 -16
  69. package/dist/IconFacebook-4658b533.js +0 -16
  70. package/dist/IconFacebook-9c43095a.cjs +0 -2
  71. package/dist/IconInstagram-43bb02ea.cjs +0 -2
  72. package/dist/IconInstagram-57188d29.js +0 -16
  73. package/dist/IconLayout-2865e0eb.js +0 -16
  74. package/dist/IconLayout-e663120e.cjs +0 -2
  75. package/dist/IconLinkedIn-088a3792.cjs +0 -2
  76. package/dist/IconLinkedIn-f29c217d.js +0 -16
package/dist/css/utilities-xl.css CHANGED
@@ -128,6 +128,16 @@
128
128
  .xl-tide-border-success {border-color: var(--tide-success-border);}
129
129
  .xl-tide-border-warning {border-color: var(--tide-warning-border);}
130
130
 
131
+ .xl-tide-border-blue {border-color: var(--tide-blue-border);}
132
+ .xl-tide-border-green {border-color: var(--tide-green-border);}
133
+ .xl-tide-border-lime {border-color: var(--tide-lime-border);}
134
+ .xl-tide-border-orange {border-color: var(--tide-orange-border);}
135
+ .xl-tide-border-purple {border-color: var(--tide-purple-border);}
136
+ .xl-tide-border-red {border-color: var(--tide-red-border);}
137
+ .xl-tide-border-salmon {border-color: var(--tide-salmon-border);}
138
+ .xl-tide-border-teal {border-color: var(--tide-teal-border);}
139
+ .xl-tide-border-yellow {border-color: var(--tide-yellow-border);}
140
+
131
141
  /* Border Width */
132
142
  .xl-tide-border-1,
133
143
  .xl-tide-border-2,
@@ -241,6 +251,7 @@
241
251
  /* Background */
242
252
  .xl-tide-bg-initial {background-color: initial;}
243
253
 
254
+ /* Icon background colors only */
244
255
  .xl-tide-bg-primary-error {background-color: var(--tide-error-primary);}
245
256
  .xl-tide-bg-primary-info {background-color: var(--tide-info-primary);}
246
257
  .xl-tide-bg-primary-success {background-color: var(--tide-success-primary);}
@@ -251,6 +262,16 @@
251
262
  .xl-tide-bg-surface-success {background-color: var(--tide-success-surface);}
252
263
  .xl-tide-bg-surface-warning {background-color: var(--tide-warning-surface);}
253
264
 
265
+ .xl-tide-bg-surface-blue {background-color: var(--tide-blue-surface);}
266
+ .xl-tide-bg-surface-green {background-color: var(--tide-green-surface);}
267
+ .xl-tide-bg-surface-lime {background-color: var(--tide-lime-surface);}
268
+ .xl-tide-bg-surface-orange {background-color: var(--tide-orange-surface);}
269
+ .xl-tide-bg-surface-purple {background-color: var(--tide-purple-surface);}
270
+ .xl-tide-bg-surface-red {background-color: var(--tide-red-surface);}
271
+ .xl-tide-bg-surface-salmon {background-color: var(--tide-salmon-surface);}
272
+ .xl-tide-bg-surface-teal {background-color: var(--tide-teal-surface);}
273
+ .xl-tide-bg-surface-yellow {background-color: var(--tide-yellow-surface);}
274
+
254
275
  .xl-tide-transparent-100 {background-color: var(--tide-transparent-100);}
255
276
  .xl-tide-transparent-200 {background-color: var(--tide-transparent-200);}
256
277
  .xl-tide-transparent-300 {background-color: var(--tide-transparent-300);}
@@ -282,6 +303,27 @@
282
303
  .xl-tide-font-success {color: var(--tide-success-primary);}
283
304
  .xl-tide-font-warning {color: var(--tide-warning-primary);}
284
305
 
306
+ .xl-tide-font-blue {color: var(--tide-blue-on-surface);}
307
+ .xl-tide-font-green {color: var(--tide-green-on-surface);}
308
+ .xl-tide-font-lime {color: var(--tide-lime-on-surface);}
309
+ .xl-tide-font-orange {color: var(--tide-orange-on-surface);}
310
+ .xl-tide-font-purple {color: var(--tide-purple-on-surface);}
311
+ .xl-tide-font-red {color: var(--tide-red-on-surface);}
312
+ .xl-tide-font-salmon {color: var(--tide-salmon-on-surface);}
313
+ .xl-tide-font-teal {color: var(--tide-teal-on-surface);}
314
+ .xl-tide-font-yellow {color: var(--tide-yellow-on-surface);}
315
+
316
+ /* Badge icon colors only */
317
+ .xl-tide-font-primary-blue {color: var(--tide-blue-primary);}
318
+ .xl-tide-font-primary-green {color: var(--tide-green-primary);}
319
+ .xl-tide-font-primary-lime {color: var(--tide-lime-primary);}
320
+ .xl-tide-font-primary-orange {color: var(--tide-orange-primary);}
321
+ .xl-tide-font-primary-purple {color: var(--tide-purple-primary);}
322
+ .xl-tide-font-primary-red {color: var(--tide-red-primary);}
323
+ .xl-tide-font-primary-salmon {color: var(--tide-salmon-primary);}
324
+ .xl-tide-font-primary-teal {color: var(--tide-teal-primary);}
325
+ .xl-tide-font-primary-yellow {color: var(--tide-yellow-primary);}
326
+
285
327
  /* Font Size */
286
328
  .xl-tide-font-10 {font-size: var(--tide-font-10);}
287
329
  .xl-tide-font-12 {font-size: var(--tide-font-12);}
@@ -301,7 +343,7 @@
301
343
  .xl-tide-align-middle {vertical-align: middle;}
302
344
  .xl-tide-align-initial {vertical-align: initial;}
303
345
 
304
- .xl-tide-bg-blur {backdrop-filter: blur(8px);}
346
+ .xl-tide-bg-blur {backdrop-filter: var(--tide-bg-blur);}
305
347
 
306
348
  .xl-tide-break-initial {overflow-wrap: initial;}
307
349
  .xl-tide-break-word {overflow-wrap: break-word;}
package/dist/css/utilities.css CHANGED
@@ -127,6 +127,16 @@
127
127
  .tide-border-success {border-color: var(--tide-success-border);}
128
128
  .tide-border-warning {border-color: var(--tide-warning-border);}
129
129
 
130
+ .tide-border-blue {border-color: var(--tide-blue-border);}
131
+ .tide-border-green {border-color: var(--tide-green-border);}
132
+ .tide-border-lime {border-color: var(--tide-lime-border);}
133
+ .tide-border-orange {border-color: var(--tide-orange-border);}
134
+ .tide-border-purple {border-color: var(--tide-purple-border);}
135
+ .tide-border-red {border-color: var(--tide-red-border);}
136
+ .tide-border-salmon {border-color: var(--tide-salmon-border);}
137
+ .tide-border-teal {border-color: var(--tide-teal-border);}
138
+ .tide-border-yellow {border-color: var(--tide-yellow-border);}
139
+
130
140
  /* Border Width */
131
141
  .tide-border-1,
132
142
  .tide-border-2,
@@ -240,6 +250,7 @@
240
250
  /* Background */
241
251
  .tide-bg-initial {background-color: initial;}
242
252
 
253
+ /* Icon background colors only */
243
254
  .tide-bg-primary-error {background-color: var(--tide-error-primary);}
244
255
  .tide-bg-primary-info {background-color: var(--tide-info-primary);}
245
256
  .tide-bg-primary-success {background-color: var(--tide-success-primary);}
@@ -250,6 +261,16 @@
250
261
  .tide-bg-surface-success {background-color: var(--tide-success-surface);}
251
262
  .tide-bg-surface-warning {background-color: var(--tide-warning-surface);}
252
263
 
264
+ .tide-bg-surface-blue {background-color: var(--tide-blue-surface);}
265
+ .tide-bg-surface-green {background-color: var(--tide-green-surface);}
266
+ .tide-bg-surface-lime {background-color: var(--tide-lime-surface);}
267
+ .tide-bg-surface-orange {background-color: var(--tide-orange-surface);}
268
+ .tide-bg-surface-purple {background-color: var(--tide-purple-surface);}
269
+ .tide-bg-surface-red {background-color: var(--tide-red-surface);}
270
+ .tide-bg-surface-salmon {background-color: var(--tide-salmon-surface);}
271
+ .tide-bg-surface-teal {background-color: var(--tide-teal-surface);}
272
+ .tide-bg-surface-yellow {background-color: var(--tide-yellow-surface);}
273
+
253
274
  .tide-transparent-100 {background-color: var(--tide-transparent-100);}
254
275
  .tide-transparent-200 {background-color: var(--tide-transparent-200);}
255
276
  .tide-transparent-300 {background-color: var(--tide-transparent-300);}
@@ -281,6 +302,27 @@
281
302
  .tide-font-success {color: var(--tide-success-primary);}
282
303
  .tide-font-warning {color: var(--tide-warning-primary);}
283
304
 
305
+ .tide-font-blue {color: var(--tide-blue-on-surface);}
306
+ .tide-font-green {color: var(--tide-green-on-surface);}
307
+ .tide-font-lime {color: var(--tide-lime-on-surface);}
308
+ .tide-font-orange {color: var(--tide-orange-on-surface);}
309
+ .tide-font-purple {color: var(--tide-purple-on-surface);}
310
+ .tide-font-red {color: var(--tide-red-on-surface);}
311
+ .tide-font-salmon {color: var(--tide-salmon-on-surface);}
312
+ .tide-font-teal {color: var(--tide-teal-on-surface);}
313
+ .tide-font-yellow {color: var(--tide-yellow-on-surface);}
314
+
315
+ /* Badge icon colors only */
316
+ .tide-font-primary-blue {color: var(--tide-blue-primary);}
317
+ .tide-font-primary-green {color: var(--tide-green-primary);}
318
+ .tide-font-primary-lime {color: var(--tide-lime-primary);}
319
+ .tide-font-primary-orange {color: var(--tide-orange-primary);}
320
+ .tide-font-primary-purple {color: var(--tide-purple-primary);}
321
+ .tide-font-primary-red {color: var(--tide-red-primary);}
322
+ .tide-font-primary-salmon {color: var(--tide-salmon-primary);}
323
+ .tide-font-primary-teal {color: var(--tide-teal-primary);}
324
+ .tide-font-primary-yellow {color: var(--tide-yellow-primary);}
325
+
284
326
  /* Font Size */
285
327
  .tide-font-10 {font-size: var(--tide-font-10);}
286
328
  .tide-font-12 {font-size: var(--tide-font-12);}
@@ -300,7 +342,7 @@
300
342
  .tide-align-middle {vertical-align: middle;}
301
343
  .tide-align-initial {vertical-align: initial;}
302
344
 
303
- .tide-bg-blur {backdrop-filter: blur(8px);}
345
+ .tide-bg-blur {backdrop-filter: var(--tide-bg-blur);}
304
346
 
305
347
  .tide-break-initial {overflow-wrap: initial;}
306
348
  .tide-break-word {overflow-wrap: break-word;}
package/dist/css/variables.css CHANGED
@@ -52,6 +52,9 @@
52
52
  --tide-transparent-300: color-mix(in srgb, black 10%, transparent);
53
53
  --tide-transparent-400: color-mix(in srgb, black 50%, transparent);
54
54
 
55
+ /* Blur */
56
+ --tide-bg-blur: var(--tide-bg-blur);
57
+
55
58
  /* Global tonal palette */
56
59
  --tide-gray-100: #FFFFFF;
57
60
  --tide-gray-200: #F5F5F5;