tide-design-system 2.2.5 → 2.2.7

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 (26) hide show
  1. package/dist/css/realm/rv.css +2 -2
  2. package/dist/css/utilities-lg.css +9 -5
  3. package/dist/css/utilities-md.css +9 -6
  4. package/dist/css/utilities-sm.css +9 -5
  5. package/dist/css/utilities-xl.css +301 -297
  6. package/dist/css/utilities.css +9 -5
  7. package/dist/style.css +1 -1
  8. package/dist/tide-design-system.cjs +2 -2
  9. package/dist/tide-design-system.esm.d.ts +3 -0
  10. package/dist/tide-design-system.esm.js +50 -47
  11. package/dist/utilities/viewport.ts +2 -1
  12. package/package.json +1 -1
  13. package/src/assets/css/realm/rv.css +2 -2
  14. package/src/assets/css/utilities-lg.css +9 -5
  15. package/src/assets/css/utilities-md.css +9 -6
  16. package/src/assets/css/utilities-sm.css +9 -5
  17. package/src/assets/css/utilities-xl.css +301 -297
  18. package/src/assets/css/utilities.css +9 -5
  19. package/src/docs/development.md +6 -1
  20. package/src/docs/integration-full.md +5 -1
  21. package/src/docs/integration-partial.md +5 -1
  22. package/src/docs/migration.md +9 -0
  23. package/src/stories/DemoCssUtilities.stories.ts +2 -2
  24. package/src/stories/{FoundationsGap.stories.ts → FoundationsFlexbox.stories.ts} +6 -6
  25. package/src/types/Styles.ts +3 -0
  26. package/src/utilities/viewport.ts +2 -1
package/dist/utilities/viewport.ts CHANGED
@@ -49,13 +49,14 @@ export const setScrollLock = async (isLocked: boolean) => {
49
49
  }
50
50
  };
51
51
 
52
- export const TOP_LAYER_ID = 'tideTopLayer';
52
+ export const TOP_LAYER_ID = 'tide-top-layer';
53
53
 
54
54
  export const initFauxTopLayer = () => {
55
55
  let topLayer = document.getElementById(TOP_LAYER_ID);
56
56
  if (!topLayer) {
57
57
  topLayer = document.createElement('div');
58
58
  topLayer.id = TOP_LAYER_ID;
59
+ topLayer.setAttribute('data-css-scope', '');
59
60
  document.body.appendChild(topLayer);
60
61
  }
61
62
  topLayer.style.isolation = 'isolate';
package/package.json CHANGED
@@ -61,7 +61,7 @@
61
61
  "main": "dist/tide-design-system.cjs",
62
62
  "module": "dist/tide-design-system.esm.js",
63
63
  "types": "dist/tide-design-system.esm.d.ts",
64
- "version": "2.2.5",
64
+ "version": "2.2.7",
65
65
  "dependencies": {
66
66
  "@floating-ui/vue": "^1.1.6"
67
67
  }
package/src/assets/css/realm/rv.css CHANGED
@@ -25,8 +25,8 @@
25
25
  /* top */
26
26
  radial-gradient(
27
27
  157.36% 151.94% at 19.69% -3.53%,
28
- color-mix(in srgb, var(--tide-realm-pistachio) 42%, transparent) 28.37%,
29
- color-mix(in srgb, var(--tide-realm-pistachio) 0%, transparent) 100%
28
+ color-mix(in srgb, var(--tide-realm-mint) 42%, transparent) 28.37%,
29
+ color-mix(in srgb, var(--tide-realm-mint) 0%, transparent) 100%
30
30
  ),
31
31
  /* bottom left */
32
32
  radial-gradient(
package/src/assets/css/utilities-lg.css CHANGED
@@ -41,6 +41,7 @@
41
41
  .lg-tide-axis1-between {justify-content: space-between;}
42
42
  .lg-tide-axis1-center {justify-content: center;}
43
43
  .lg-tide-axis1-end {justify-content: end;}
44
+ .lg-tide-axis1-start {justify-content: start;}
44
45
 
45
46
  .lg-tide-axis2-around {align-items: space-around;}
46
47
  .lg-tide-axis2-center {align-items: center;}
@@ -69,6 +70,7 @@
69
70
  .lg-tide-margin-1 {margin: var(--tide-spacing-1);}
70
71
  .lg-tide-margin-2 {margin: var(--tide-spacing-2);}
71
72
  .lg-tide-margin-4 {margin: var(--tide-spacing-4);}
73
+ .lg-tide-margin-auto {margin: auto;}
72
74
 
73
75
  .lg-tide-margin-x-0 {margin-left: 0; margin-right: 0;}
74
76
  .lg-tide-margin-x-1\/4 {margin-left: var(--tide-spacing-1\/4); margin-right: var(--tide-spacing-1\/4);}
@@ -84,7 +86,7 @@
84
86
  .lg-tide-margin-y-1 {margin-top: var(--tide-spacing-1); margin-bottom: var(--tide-spacing-1);}
85
87
  .lg-tide-margin-y-2 {margin-top: var(--tide-spacing-2); margin-bottom: var(--tide-spacing-2);}
86
88
  .lg-tide-margin-y-4 {margin-top: var(--tide-spacing-4); margin-bottom: var(--tide-spacing-4);}
87
- .lg-tide-margin-y-auto {margin-top: var(--tide-spacing-auto); margin-bottom: var(--tide-spacing-auto);}
89
+ .lg-tide-margin-y-auto {margin-top: auto; margin-bottom: auto;}
88
90
 
89
91
  .lg-tide-margin-top-0 {margin-top: 0;}
90
92
  .lg-tide-margin-top-1\/4 {margin-top: var(--tide-spacing-1\/4);}
@@ -92,7 +94,7 @@
92
94
  .lg-tide-margin-top-1 {margin-top: var(--tide-spacing-1);}
93
95
  .lg-tide-margin-top-2 {margin-top: var(--tide-spacing-2);}
94
96
  .lg-tide-margin-top-4 {margin-top: var(--tide-spacing-4);}
95
- .lg-tide-margin-top-auto {margin-top: var(--tide-spacing-auto);}
97
+ .lg-tide-margin-top-auto {margin-top: auto;}
96
98
 
97
99
  .lg-tide-margin-right-0 {margin-right: 0;}
98
100
  .lg-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -108,7 +110,7 @@
108
110
  .lg-tide-margin-bottom-1 {margin-bottom: var(--tide-spacing-1);}
109
111
  .lg-tide-margin-bottom-2 {margin-bottom: var(--tide-spacing-2);}
110
112
  .lg-tide-margin-bottom-4 {margin-bottom: var(--tide-spacing-4);}
111
- .lg-tide-margin-bottom-auto {margin-bottom: var(--tide-spacing-auto);}
113
+ .lg-tide-margin-bottom-auto {margin-bottom: auto;}
112
114
 
113
115
  .lg-tide-margin-left-0 {margin-left: 0;}
114
116
  .lg-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
@@ -222,8 +224,6 @@
222
224
  .lg-tide-max-height-full {max-height: 100%;}
223
225
  .lg-tide-min-height-0 {min-height: 0;}
224
226
 
225
- .lg-tide-width-container {max-width: 1168px;}
226
-
227
227
  .lg-tide-width-auto {width: auto;}
228
228
  .lg-tide-width-0 {width: 0;}
229
229
  .lg-tide-width-full {width: 100%;}
@@ -232,6 +232,9 @@
232
232
  .lg-tide-height-0 {height: 0;}
233
233
  .lg-tide-height-full {height: 100%;}
234
234
 
235
+ /* Deprecated */
236
+ .lg-tide-width-container {max-width: 1168px;}
237
+
235
238
  /* Background */
236
239
  .lg-tide-bg-initial {background-color: initial;}
237
240
 
@@ -320,6 +323,7 @@
320
323
 
321
324
  .lg-tide-isolate {isolation: isolate;}
322
325
 
326
+ /* Deprecated */
323
327
  .lg-tide-leading-default {line-height: 1.4;}
324
328
  .lg-tide-leading-normal {line-height: normal;}
325
329
 
package/src/assets/css/utilities-md.css CHANGED
@@ -1,4 +1,3 @@
1
- /* Medium breakpoint */
2
1
  @media (min-width: 992px) {
3
2
  /* Reusable CSS Utility Library */
4
3
  /* Position */
@@ -42,6 +41,7 @@
42
41
  .md-tide-axis1-between {justify-content: space-between;}
43
42
  .md-tide-axis1-center {justify-content: center;}
44
43
  .md-tide-axis1-end {justify-content: end;}
44
+ .md-tide-axis1-start {justify-content: start;}
45
45
 
46
46
  .md-tide-axis2-around {align-items: space-around;}
47
47
  .md-tide-axis2-center {align-items: center;}
@@ -70,6 +70,7 @@
70
70
  .md-tide-margin-1 {margin: var(--tide-spacing-1);}
71
71
  .md-tide-margin-2 {margin: var(--tide-spacing-2);}
72
72
  .md-tide-margin-4 {margin: var(--tide-spacing-4);}
73
+ .md-tide-margin-auto {margin: auto;}
73
74
 
74
75
  .md-tide-margin-x-0 {margin-left: 0; margin-right: 0;}
75
76
  .md-tide-margin-x-1\/4 {margin-left: var(--tide-spacing-1\/4); margin-right: var(--tide-spacing-1\/4);}
@@ -85,7 +86,7 @@
85
86
  .md-tide-margin-y-1 {margin-top: var(--tide-spacing-1); margin-bottom: var(--tide-spacing-1);}
86
87
  .md-tide-margin-y-2 {margin-top: var(--tide-spacing-2); margin-bottom: var(--tide-spacing-2);}
87
88
  .md-tide-margin-y-4 {margin-top: var(--tide-spacing-4); margin-bottom: var(--tide-spacing-4);}
88
- .md-tide-margin-y-auto {margin-top: var(--tide-spacing-auto); margin-bottom: var(--tide-spacing-auto);}
89
+ .md-tide-margin-y-auto {margin-top: auto; margin-bottom: auto;}
89
90
 
90
91
  .md-tide-margin-top-0 {margin-top: 0;}
91
92
  .md-tide-margin-top-1\/4 {margin-top: var(--tide-spacing-1\/4);}
@@ -93,7 +94,7 @@
93
94
  .md-tide-margin-top-1 {margin-top: var(--tide-spacing-1);}
94
95
  .md-tide-margin-top-2 {margin-top: var(--tide-spacing-2);}
95
96
  .md-tide-margin-top-4 {margin-top: var(--tide-spacing-4);}
96
- .md-tide-margin-top-auto {margin-top: var(--tide-spacing-auto);}
97
+ .md-tide-margin-top-auto {margin-top: auto;}
97
98
 
98
99
  .md-tide-margin-right-0 {margin-right: 0;}
99
100
  .md-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -109,7 +110,7 @@
109
110
  .md-tide-margin-bottom-1 {margin-bottom: var(--tide-spacing-1);}
110
111
  .md-tide-margin-bottom-2 {margin-bottom: var(--tide-spacing-2);}
111
112
  .md-tide-margin-bottom-4 {margin-bottom: var(--tide-spacing-4);}
112
- .md-tide-margin-bottom-auto {margin-bottom: var(--tide-spacing-auto);}
113
+ .md-tide-margin-bottom-auto {margin-bottom: auto;}
113
114
 
114
115
  .md-tide-margin-left-0 {margin-left: 0;}
115
116
  .md-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
@@ -223,8 +224,6 @@
223
224
  .md-tide-max-height-full {max-height: 100%;}
224
225
  .md-tide-min-height-0 {min-height: 0;}
225
226
 
226
- .md-tide-width-container {max-width: 1168px;}
227
-
228
227
  .md-tide-width-auto {width: auto;}
229
228
  .md-tide-width-0 {width: 0;}
230
229
  .md-tide-width-full {width: 100%;}
@@ -233,6 +232,9 @@
233
232
  .md-tide-height-0 {height: 0;}
234
233
  .md-tide-height-full {height: 100%;}
235
234
 
235
+ /* Deprecated */
236
+ .md-tide-width-container {max-width: 1168px;}
237
+
236
238
  /* Background */
237
239
  .md-tide-bg-initial {background-color: initial;}
238
240
 
@@ -321,6 +323,7 @@
321
323
 
322
324
  .md-tide-isolate {isolation: isolate;}
323
325
 
326
+ /* Deprecated */
324
327
  .md-tide-leading-default {line-height: 1.4;}
325
328
  .md-tide-leading-normal {line-height: normal;}
326
329
 
package/src/assets/css/utilities-sm.css CHANGED
@@ -41,6 +41,7 @@
41
41
  .sm-tide-axis1-between {justify-content: space-between;}
42
42
  .sm-tide-axis1-center {justify-content: center;}
43
43
  .sm-tide-axis1-end {justify-content: end;}
44
+ .sm-tide-axis1-start {justify-content: start;}
44
45
 
45
46
  .sm-tide-axis2-around {align-items: space-around;}
46
47
  .sm-tide-axis2-center {align-items: center;}
@@ -69,6 +70,7 @@
69
70
  .sm-tide-margin-1 {margin: var(--tide-spacing-1);}
70
71
  .sm-tide-margin-2 {margin: var(--tide-spacing-2);}
71
72
  .sm-tide-margin-4 {margin: var(--tide-spacing-4);}
73
+ .sm-tide-margin-auto {margin: auto;}
72
74
 
73
75
  .sm-tide-margin-x-0 {margin-left: 0; margin-right: 0;}
74
76
  .sm-tide-margin-x-1\/4 {margin-left: var(--tide-spacing-1\/4); margin-right: var(--tide-spacing-1\/4);}
@@ -84,7 +86,7 @@
84
86
  .sm-tide-margin-y-1 {margin-top: var(--tide-spacing-1); margin-bottom: var(--tide-spacing-1);}
85
87
  .sm-tide-margin-y-2 {margin-top: var(--tide-spacing-2); margin-bottom: var(--tide-spacing-2);}
86
88
  .sm-tide-margin-y-4 {margin-top: var(--tide-spacing-4); margin-bottom: var(--tide-spacing-4);}
87
- .sm-tide-margin-y-auto {margin-top: var(--tide-spacing-auto); margin-bottom: var(--tide-spacing-auto);}
89
+ .sm-tide-margin-y-auto {margin-top: auto; margin-bottom: auto;}
88
90
 
89
91
  .sm-tide-margin-top-0 {margin-top: 0;}
90
92
  .sm-tide-margin-top-1\/4 {margin-top: var(--tide-spacing-1\/4);}
@@ -92,7 +94,7 @@
92
94
  .sm-tide-margin-top-1 {margin-top: var(--tide-spacing-1);}
93
95
  .sm-tide-margin-top-2 {margin-top: var(--tide-spacing-2);}
94
96
  .sm-tide-margin-top-4 {margin-top: var(--tide-spacing-4);}
95
- .sm-tide-margin-top-auto {margin-top: var(--tide-spacing-auto);}
97
+ .sm-tide-margin-top-auto {margin-top: auto;}
96
98
 
97
99
  .sm-tide-margin-right-0 {margin-right: 0;}
98
100
  .sm-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -108,7 +110,7 @@
108
110
  .sm-tide-margin-bottom-1 {margin-bottom: var(--tide-spacing-1);}
109
111
  .sm-tide-margin-bottom-2 {margin-bottom: var(--tide-spacing-2);}
110
112
  .sm-tide-margin-bottom-4 {margin-bottom: var(--tide-spacing-4);}
111
- .sm-tide-margin-bottom-auto {margin-bottom: var(--tide-spacing-auto);}
113
+ .sm-tide-margin-bottom-auto {margin-bottom: auto;}
112
114
 
113
115
  .sm-tide-margin-left-0 {margin-left: 0;}
114
116
  .sm-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
@@ -222,8 +224,6 @@
222
224
  .sm-tide-max-height-full {max-height: 100%;}
223
225
  .sm-tide-min-height-0 {min-height: 0;}
224
226
 
225
- .sm-tide-width-container {max-width: 1168px;}
226
-
227
227
  .sm-tide-width-auto {width: auto;}
228
228
  .sm-tide-width-0 {width: 0;}
229
229
  .sm-tide-width-full {width: 100%;}
@@ -232,6 +232,9 @@
232
232
  .sm-tide-height-0 {height: 0;}
233
233
  .sm-tide-height-full {height: 100%;}
234
234
 
235
+ /* Deprecated */
236
+ .sm-tide-width-container {max-width: 1168px;}
237
+
235
238
  /* Background */
236
239
  .sm-tide-bg-initial {background-color: initial;}
237
240
 
@@ -320,6 +323,7 @@
320
323
 
321
324
  .sm-tide-isolate {isolation: isolate;}
322
325
 
326
+ /* Deprecated */
323
327
  .sm-tide-leading-default {line-height: 1.4;}
324
328
  .sm-tide-leading-normal {line-height: normal;}
325
329