tide-design-system 2.0.1 → 2.0.2

package/dist/css/realm/pwc.css

@@ -1,42 +1,42 @@
 /* PWC Trader Realm Colors */
-.pwc {
+:root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --color1: #0B72B8;
-  --color2: #085487;
-  --color3: #59A0EB;
+  --tide-color1: #0B72B8;
+  --tide-color2: #085487;
+  --tide-color3: #59A0EB;
 
-  --gradient: linear-gradient(
+  --tide-gradient: linear-gradient(
     to bottom right,
-    var(--color2) 50%,
-    var(--color3) 150%
+    var(--tide-color2) 50%,
+    var(--tide-color3) 150%
   );
 
-  --floating: rgba(255, 255, 255, 0);
+  --tide-floating: rgba(255, 255, 255, 0);
 
   /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --primary:    var(--color1);
-  --on-primary: var(--gray-100);
-
-  --secondary:    var(--gray-900);
-  --on-secondary: var(--gray-100);
-
-  --surface:                var(--gray-100);
-  --surface-variant:        var(--gray-200);
-  --surface-brand:          var(--color1);
-  --surface-accent:         var(--color3);
-  --surface-accent-variant: var(--color2);
-  --surface-gradient:       var(--gradient);
-  --surface-floating:       var(--floating);
-
-  --on-surface:         var(--gray-900);
-  --on-surface-variant: var(--gray-700);
-  --on-surface-brand:   var(--color1);
-
-  --on-surface-inverse:         var(--gray-100);
-  --on-surface-inverse-variant: var(--transparent-200);
-
-  --border:          var(--gray-600);
-  --border-low:      var(--gray-400);
-  --border-high:     var(--gray-900);
-  --border-floating: var(--gray-300);
+  --tide-primary:    var(--tide-color1);
+  --tide-on-primary: var(--tide-gray-100);
+
+  --tide-secondary:    var(--tide-gray-900);
+  --tide-on-secondary: var(--tide-gray-100);
+
+  --tide-surface:                var(--tide-gray-100);
+  --tide-surface-variant:        var(--tide-gray-200);
+  --tide-surface-brand:          var(--tide-color1);
+  --tide-surface-accent:         var(--tide-color3);
+  --tide-surface-accent-variant: var(--tide-color2);
+  --tide-surface-gradient:       var(--tide-gradient);
+  --tide-surface-floating:       var(--tide-floating);
+
+  --tide-on-surface:         var(--tide-gray-900);
+  --tide-on-surface-variant: var(--tide-gray-700);
+  --tide-on-surface-brand:   var(--tide-color1);
+
+  --tide-on-surface-inverse:         var(--tide-gray-100);
+  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
+
+  --tide-border:          var(--tide-gray-600);
+  --tide-border-low:      var(--tide-gray-400);
+  --tide-border-high:     var(--tide-gray-900);
+  --tide-border-floating: var(--tide-gray-300);
 }

package/dist/css/realm/rv.css

@@ -1,42 +1,42 @@
 /* RV Trader Realm Colors */
-.rv {
+:root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --green:  #006836;
-  --teal:   #8ADCB9;
-  --yellow: #F2B203;
+  --tide-green:  #006836;
+  --tide-teal:   #8ADCB9;
+  --tide-yellow: #F2B203;
 
-  --gradient: linear-gradient(
+  --tide-gradient: linear-gradient(
     to bottom right,
-    var(--teal) 50%,
-    var(--yellow) 150%
+    var(--tide-teal) 50%,
+    var(--tide-yellow) 150%
   );
 
-  --floating: rgba(255, 255, 255, 0);
+  --tide-floating: rgba(255, 255, 255, 0);
 
   /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --primary:    var(--green);
-  --on-primary: var(--gray-100);
-
-  --secondary:    var(--gray-900);
-  --on-secondary: var(--gray-100);
-
-  --surface:                var(--gray-100);
-  --surface-variant:        var(--gray-200);
-  --surface-brand:          var(--green);
-  --surface-accent:         var(--yellow);
-  --surface-accent-variant: var(--teal);
-  --surface-gradient:       var(--gradient);
-  --surface-floating:       var(--floating);
-
-  --on-surface:         var(--gray-900);
-  --on-surface-variant: var(--gray-700);
-  --on-surface-brand:   var(--green);
-
-  --on-surface-inverse:         var(--gray-100);
-  --on-surface-inverse-variant: var(--transparent-200);
-
-  --border:          var(--gray-600);
-  --border-low:      var(--gray-400);
-  --border-high:     var(--gray-900);
-  --border-floating: var(--gray-300);
+  --tide-primary:    var(--tide-green);
+  --tide-on-primary: var(--tide-gray-100);
+
+  --tide-secondary:    var(--tide-gray-900);
+  --tide-on-secondary: var(--tide-gray-100);
+
+  --tide-surface:                var(--tide-gray-100);
+  --tide-surface-variant:        var(--tide-gray-200);
+  --tide-surface-brand:          var(--tide-green);
+  --tide-surface-accent:         var(--tide-yellow);
+  --tide-surface-accent-variant: var(--tide-teal);
+  --tide-surface-gradient:       var(--tide-gradient);
+  --tide-surface-floating:       var(--tide-floating);
+
+  --tide-on-surface:         var(--tide-gray-900);
+  --tide-on-surface-variant: var(--tide-gray-700);
+  --tide-on-surface-brand:   var(--tide-green);
+
+  --tide-on-surface-inverse:         var(--tide-gray-100);
+  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
+
+  --tide-border:          var(--tide-gray-600);
+  --tide-border-low:      var(--tide-gray-400);
+  --tide-border-high:     var(--tide-gray-900);
+  --tide-border-floating: var(--tide-gray-300);
 }

package/dist/css/realm/snow.css

@@ -1,42 +1,42 @@
 /* Snowmobile Trader Realm Colors */
 :root {
     /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-    --color1: #193778;
-    --color2: #10234C;
-    --color3: #4F60A7;
+    --tide-color1: #193778;
+    --tide-color2: #10234C;
+    --tide-color3: #4F60A7;
 
-    --bg-gradient: linear-gradient(
+    --tide-bg-gradient: linear-gradient(
       to bottom right,
-      var(--color3) 50%,
-      var(--color2) 150%
+      var(--tide-color3) 50%,
+      var(--tide-color2) 150%
     );
 
-  --floating: rgba(255, 255, 255, 0);
+  --tide-floating: rgba(255, 255, 255, 0);
 
   /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --primary:    var(--color1);
-  --on-primary: var(--white);
-
-  --secondary:    var(--black);
-  --on-secondary: var(--white);
-
-  --surface:                var(--white);
-  --surface-variant:        var(--gray-200);
-  --surface-brand:          var(--color1);
-  --surface-accent:         var(--color2);
-  --surface-accent-variant: var(--color3);
-  --surface-gradient:       var(--gradient);
-  --surface-floating:       var(--floating);
-
-  --on-surface:         var(--black);
-  --on-surface-variant: var(--gray-800);
-  --on-surface-brand:   var(--color1);
-
-  --on-surface-inverse:         var(--white);
-  --on-surface-inverse-variant: var(--transparent-200);
-
-  --border:          var(--gray-400);
-  --border-low:      var(--gray-600);
-  --border-high:     var(--black);
-  --border-floating: var(--gray-300);
+  --tide-primary:    var(--tide-color1);
+  --tide-on-primary: var(--tide-white);
+
+  --tide-secondary:    var(--tide-black);
+  --tide-on-secondary: var(--tide-white);
+
+  --tide-surface:                var(--tide-white);
+  --tide-surface-variant:        var(--tide-gray-200);
+  --tide-surface-brand:          var(--tide-color1);
+  --tide-surface-accent:         var(--tide-color2);
+  --tide-surface-accent-variant: var(--tide-color3);
+  --tide-surface-gradient:       var(--tide-gradient);
+  --tide-surface-floating:       var(--tide-floating);
+
+  --tide-on-surface:         var(--tide-black);
+  --tide-on-surface-variant: var(--tide-gray-800);
+  --tide-on-surface-brand:   var(--tide-color1);
+
+  --tide-on-surface-inverse:         var(--tide-white);
+  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
+
+  --tide-border:          var(--tide-gray-400);
+  --tide-border-low:      var(--tide-gray-600);
+  --tide-border-high:     var(--tide-black);
+  --tide-border-floating: var(--tide-gray-300);
 }

package/dist/css/realm/truck.css

@@ -1,42 +1,42 @@
 /* Commercial Truck Trader Realm Colors */
-.truck {
+:root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --blue:  #005F9E;
-  --midnight-blue:   #172C4B;
-  --teal: #97D9E3;
+  --tide-blue:  #005F9E;
+  --tide-midnight-blue:   #172C4B;
+  --tide-teal: #97D9E3;
 
-  --bg-gradient: linear-gradient(
+  --tide-bg-gradient: linear-gradient(
     to bottom right,
-    var(--midnight-blue) 50%,
-    var(--teal) 150%
+    var(--tide-midnight-blue) 50%,
+    var(--tide-teal) 150%
   );
 
-  --floating: rgba(255, 255, 255, 0);
+  --tide-floating: rgba(255, 255, 255, 0);
 
   /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --primary:    var(--blue);
-  --on-primary: var(--white);
-
-  --secondary:    var(--black);
-  --on-secondary: var(--white);
-
-  --surface:                var(--white);
-  --surface-variant:        var(--gray-200);
-  --surface-brand:          var(--blue);
-  --surface-accent:         var(--teal);
-  --surface-accent-variant: var(--midnight-blue);
-  --surface-gradient:       var(--gradient);
-  --surface-floating:       var(--floating);
-
-  --on-surface:         var(--black);
-  --on-surface-variant: var(--gray-800);
-  --on-surface-brand:   var(--blue);
-
-  --on-surface-inverse:         var(--white);
-  --on-surface-inverse-variant: var(--transparent-200);
-
-  --border:          var(--gray-400);
-  --border-low:      var(--gray-600);
-  --border-high:     var(--black);
-  --border-floating: var(--gray-300);
+  --tide-primary:    var(--tide-blue);
+  --tide-on-primary: var(--tide-white);
+
+  --tide-secondary:    var(--tide-black);
+  --tide-on-secondary: var(--tide-white);
+
+  --tide-surface:                var(--tide-white);
+  --tide-surface-variant:        var(--tide-gray-200);
+  --tide-surface-brand:          var(--tide-blue);
+  --tide-surface-accent:         var(--tide-teal);
+  --tide-surface-accent-variant: var(--tide-midnight-blue);
+  --tide-surface-gradient:       var(--tide-gradient);
+  --tide-surface-floating:       var(--tide-floating);
+
+  --tide-on-surface:         var(--tide-black);
+  --tide-on-surface-variant: var(--tide-gray-800);
+  --tide-on-surface-brand:   var(--tide-blue);
+
+  --tide-on-surface-inverse:         var(--tide-white);
+  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
+
+  --tide-border:          var(--tide-gray-400);
+  --tide-border-low:      var(--tide-gray-600);
+  --tide-border-high:     var(--tide-black);
+  --tide-border-floating: var(--tide-gray-300);
 }

package/dist/css/reset.css

@@ -1,6 +1,6 @@
 html,
 body {
-  color: var(--on-surface);
+  color: var(--tide-on-surface);
 }
 
 *,
@@ -12,23 +12,23 @@ body {
   padding: 0;
   color: inherit;
   font-family: Montserrat;
-  font-weight: var(--font-500);
+  font-weight: var(--tide-font-500);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-h1 {font-size: var(--font-32);} /* 32px */
-h2 {font-size: var(--font-24);} /* 24px */
-h3 {font-size: var(--font-20);} /* 20px */
-h4 {font-size: var(--font-16);} /* 16px */
-h5 {font-size: var(--font-16);} /* 16px */
+h1 {font-size: var(--tide-font-32);} /* 32px */
+h2 {font-size: var(--tide-font-24);} /* 24px */
+h3 {font-size: var(--tide-font-20);} /* 20px */
+h4 {font-size: var(--tide-font-16);} /* 16px */
+h5 {font-size: var(--tide-font-16);} /* 16px */
 
 h1,
 h2,
 h3,
 h4,
 h5 {
-  font-weight: var(--font-700);
+  font-weight: var(--tide-font-700);
 }
 
 img,
@@ -66,7 +66,7 @@ button:disabled {
 
 /* cross-browser normalization */
 input::placeholder {
-  color: var(--gray); /* TODO: replace with an accessible light text color from design system */
+  color: var(--tide-gray); /* TODO: replace with an accessible light text color from design system */
   opacity: 1;
 }
 

package/dist/css/sb-rv.css

@@ -0,0 +1 @@
+@import 'rv.css';

package/dist/css/storybook.css

@@ -1,4 +1,5 @@
 /* Styles used for Storybook demonstration purposes only. Not bundled into distribution package. */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
+
 .sb-bg-blue-light {background-color: #CCDEF3;}
 .sb-bg-white {background-color: #FFFFFF;}
-

package/dist/css/utilities.css

@@ -46,11 +46,11 @@
 .tide-axis2-start   {align-items: flex-start;}
 .tide-axis2-stretch {align-items: stretch;}
 
-.tide-gap-1\/4 {gap: var(--spacing-1\/4);}
-.tide-gap-1\/2 {gap: var(--spacing-1\/2);}
-.tide-gap-1    {gap: var(--spacing-1);}
-.tide-gap-2    {gap: var(--spacing-2);}
-.tide-gap-4    {gap: var(--spacing-4);}
+.tide-gap-1\/4 {gap: var(--tide-spacing-1\/4);}
+.tide-gap-1\/2 {gap: var(--tide-spacing-1\/2);}
+.tide-gap-1    {gap: var(--tide-spacing-1);}
+.tide-gap-2    {gap: var(--tide-spacing-2);}
+.tide-gap-4    {gap: var(--tide-spacing-4);}
 
 /* Box Sizing */
 .tide-box-border  {box-sizing: border-box;}
@@ -58,54 +58,54 @@
 
 /* Margin */
 .tide-margin-0    {margin: 0;}
-.tide-margin-1\/4 {margin: var(--spacing-1\/4);}
-.tide-margin-1\/2 {margin: var(--spacing-1\/2);}
-.tide-margin-1    {margin: var(--spacing-1);}
-.tide-margin-2    {margin: var(--spacing-2);}
-.tide-margin-4    {margin: var(--spacing-4);}
+.tide-margin-1\/4 {margin: var(--tide-spacing-1\/4);}
+.tide-margin-1\/2 {margin: var(--tide-spacing-1\/2);}
+.tide-margin-1    {margin: var(--tide-spacing-1);}
+.tide-margin-2    {margin: var(--tide-spacing-2);}
+.tide-margin-4    {margin: var(--tide-spacing-4);}
 
 .tide-margin-x-0    {margin-left: 0;                   margin-right: 0;}
-.tide-margin-x-1\/4 {margin-left: var(--spacing-1\/4); margin-right: var(--spacing-1\/4);}
-.tide-margin-x-1\/2 {margin-left: var(--spacing-1\/2); margin-right: var(--spacing-1\/2);}
-.tide-margin-x-1    {margin-left: var(--spacing-1);    margin-right: var(--spacing-1);}
-.tide-margin-x-2    {margin-left: var(--spacing-2);    margin-right: var(--spacing-2);}
-.tide-margin-x-4    {margin-left: var(--spacing-4);    margin-right: var(--spacing-4);}
+.tide-margin-x-1\/4 {margin-left: var(--tide-spacing-1\/4); margin-right: var(--tide-spacing-1\/4);}
+.tide-margin-x-1\/2 {margin-left: var(--tide-spacing-1\/2); margin-right: var(--tide-spacing-1\/2);}
+.tide-margin-x-1    {margin-left: var(--tide-spacing-1);    margin-right: var(--tide-spacing-1);}
+.tide-margin-x-2    {margin-left: var(--tide-spacing-2);    margin-right: var(--tide-spacing-2);}
+.tide-margin-x-4    {margin-left: var(--tide-spacing-4);    margin-right: var(--tide-spacing-4);}
 .tide-margin-x-auto {margin-left: auto;                margin-right: auto;}
 
 .tide-margin-y-0    {margin-top: 0;                   margin-bottom: 0;}
-.tide-margin-y-1\/4 {margin-top: var(--spacing-1\/4); margin-bottom: var(--spacing-1\/4);}
-.tide-margin-y-1\/2 {margin-top: var(--spacing-1\/2); margin-bottom: var(--spacing-1\/2);}
-.tide-margin-y-1    {margin-top: var(--spacing-1);    margin-bottom: var(--spacing-1);}
-.tide-margin-y-2    {margin-top: var(--spacing-2);    margin-bottom: var(--spacing-2);}
-.tide-margin-y-4    {margin-top: var(--spacing-4);    margin-bottom: var(--spacing-4);}
+.tide-margin-y-1\/4 {margin-top: var(--tide-spacing-1\/4); margin-bottom: var(--tide-spacing-1\/4);}
+.tide-margin-y-1\/2 {margin-top: var(--tide-spacing-1\/2); margin-bottom: var(--tide-spacing-1\/2);}
+.tide-margin-y-1    {margin-top: var(--tide-spacing-1);    margin-bottom: var(--tide-spacing-1);}
+.tide-margin-y-2    {margin-top: var(--tide-spacing-2);    margin-bottom: var(--tide-spacing-2);}
+.tide-margin-y-4    {margin-top: var(--tide-spacing-4);    margin-bottom: var(--tide-spacing-4);}
 
 .tide-margin-top-0    {margin-top: 0;}
-.tide-margin-top-1\/4 {margin-top: var(--spacing-1\/4);}
-.tide-margin-top-1\/2 {margin-top: var(--spacing-1\/2);}
-.tide-margin-top-1    {margin-top: var(--spacing-1);}
-.tide-margin-top-2    {margin-top: var(--spacing-2);}
-.tide-margin-top-4    {margin-top: var(--spacing-4);}
+.tide-margin-top-1\/4 {margin-top: var(--tide-spacing-1\/4);}
+.tide-margin-top-1\/2 {margin-top: var(--tide-spacing-1\/2);}
+.tide-margin-top-1    {margin-top: var(--tide-spacing-1);}
+.tide-margin-top-2    {margin-top: var(--tide-spacing-2);}
+.tide-margin-top-4    {margin-top: var(--tide-spacing-4);}
 
 .tide-margin-right-0    {margin-right: 0;}
-.tide-margin-right-1\/4 {margin-right: var(--spacing-1\/4);}
-.tide-margin-right-1\/2 {margin-right: var(--spacing-1\/2);}
-.tide-margin-right-1    {margin-right: var(--spacing-1);}
-.tide-margin-right-2    {margin-right: var(--spacing-2);}
-.tide-margin-right-4    {margin-right: var(--spacing-4);}
+.tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
+.tide-margin-right-1\/2 {margin-right: var(--tide-spacing-1\/2);}
+.tide-margin-right-1    {margin-right: var(--tide-spacing-1);}
+.tide-margin-right-2    {margin-right: var(--tide-spacing-2);}
+.tide-margin-right-4    {margin-right: var(--tide-spacing-4);}
 .tide-margin-right-auto {margin-right: auto;}
 
 .tide-margin-bottom-0    {margin-bottom: 0;}
-.tide-margin-bottom-1\/4 {margin-bottom: var(--spacing-1\/4);}
-.tide-margin-bottom-1\/2 {margin-bottom: var(--spacing-1\/2);}
-.tide-margin-bottom-1    {margin-bottom: var(--spacing-1);}
-.tide-margin-bottom-2    {margin-bottom: var(--spacing-2);}
-.tide-margin-bottom-4    {margin-bottom: var(--spacing-4);}
+.tide-margin-bottom-1\/4 {margin-bottom: var(--tide-spacing-1\/4);}
+.tide-margin-bottom-1\/2 {margin-bottom: var(--tide-spacing-1\/2);}
+.tide-margin-bottom-1    {margin-bottom: var(--tide-spacing-1);}
+.tide-margin-bottom-2    {margin-bottom: var(--tide-spacing-2);}
+.tide-margin-bottom-4    {margin-bottom: var(--tide-spacing-4);}
 
 .tide-margin-left-0    {margin-left: 0;}
-.tide-margin-left-1\/2 {margin-left: var(--spacing-1\/2);}
-.tide-margin-left-1    {margin-left: var(--spacing-1);}
-.tide-margin-left-2    {margin-left: var(--spacing-2);}
-.tide-margin-left-4    {margin-left: var(--spacing-4);}
+.tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
+.tide-margin-left-1    {margin-left: var(--tide-spacing-1);}
+.tide-margin-left-2    {margin-left: var(--tide-spacing-2);}
+.tide-margin-left-4    {margin-left: var(--tide-spacing-4);}
 .tide-margin-left-auto {margin-left: auto;}
 
 /* Border */
@@ -122,73 +122,73 @@
   border-style: solid;
 }
 
-.tide-border-1 {border-width: var(--border-width-1);}
-.tide-border-2 {border-width: var(--border-width-2);}
+.tide-border-1 {border-width: var(--tide-border-width-1);}
+.tide-border-2 {border-width: var(--tide-border-width-2);}
 
-.tide-border-top-1    {border-top-width:    var(--border-width-1);}
-.tide-border-right-1  {border-right-width:  var(--border-width-1);}
-.tide-border-bottom-1 {border-bottom-width: var(--border-width-1);}
-.tide-border-left-1   {border-left-width:   var(--border-width-1);}
+.tide-border-top-1    {border-top-width:    var(--tide-border-width-1);}
+.tide-border-right-1  {border-right-width:  var(--tide-border-width-1);}
+.tide-border-bottom-1 {border-bottom-width: var(--tide-border-width-1);}
+.tide-border-left-1   {border-left-width:   var(--tide-border-width-1);}
 
-.tide-border-top-2    {border-top-width:    var(--border-width-2);}
-.tide-border-right-2  {border-right-width:  var(--border-width-2);}
-.tide-border-bottom-2 {border-bottom-width: var(--border-width-2);}
-.tide-border-left-2   {border-left-width:   var(--border-width-2);}
+.tide-border-top-2    {border-top-width:    var(--tide-border-width-2);}
+.tide-border-right-2  {border-right-width:  var(--tide-border-width-2);}
+.tide-border-bottom-2 {border-bottom-width: var(--tide-border-width-2);}
+.tide-border-left-2   {border-left-width:   var(--tide-border-width-2);}
 
-.tide-radius-1\/4 {border-radius: var(--radius-1\/4);}
-.tide-radius-1\/2 {border-radius: var(--radius-1\/2);}
-.tide-radius-1    {border-radius: var(--radius-1);}
-.tide-radius-full {border-radius: var(--radius-full);}
+.tide-radius-1\/4 {border-radius: var(--tide-radius-1\/4);}
+.tide-radius-1\/2 {border-radius: var(--tide-radius-1\/2);}
+.tide-radius-1    {border-radius: var(--tide-radius-1);}
+.tide-radius-full {border-radius: var(--tide-radius-full);}
 
 /* Padding */
 .tide-padding-0    {padding: 0;}
-.tide-padding-1\/4 {padding: var(--spacing-1\/4);}
-.tide-padding-1\/2 {padding: var(--spacing-1\/2);}
-.tide-padding-1    {padding: var(--spacing-1);}
-.tide-padding-2    {padding: var(--spacing-2);}
-.tide-padding-4    {padding: var(--spacing-4);}
+.tide-padding-1\/4 {padding: var(--tide-spacing-1\/4);}
+.tide-padding-1\/2 {padding: var(--tide-spacing-1\/2);}
+.tide-padding-1    {padding: var(--tide-spacing-1);}
+.tide-padding-2    {padding: var(--tide-spacing-2);}
+.tide-padding-4    {padding: var(--tide-spacing-4);}
 
 .tide-padding-x-0    {padding-left: 0;                   padding-right: 0;}
-.tide-padding-x-1\/4 {padding-left: var(--spacing-1\/4); padding-right: var(--spacing-1\/4);}
-.tide-padding-x-1\/2 {padding-left: var(--spacing-1\/2); padding-right: var(--spacing-1\/2);}
-.tide-padding-x-1    {padding-left: var(--spacing-1);    padding-right: var(--spacing-1);}
-.tide-padding-x-2    {padding-left: var(--spacing-2);    padding-right: var(--spacing-2);}
-.tide-padding-x-4    {padding-left: var(--spacing-4);    padding-right: var(--spacing-4);}
+.tide-padding-x-1\/4 {padding-left: var(--tide-spacing-1\/4); padding-right: var(--tide-spacing-1\/4);}
+.tide-padding-x-1\/2 {padding-left: var(--tide-spacing-1\/2); padding-right: var(--tide-spacing-1\/2);}
+.tide-padding-x-1    {padding-left: var(--tide-spacing-1);    padding-right: var(--tide-spacing-1);}
+.tide-padding-x-2    {padding-left: var(--tide-spacing-2);    padding-right: var(--tide-spacing-2);}
+.tide-padding-x-4    {padding-left: var(--tide-spacing-4);    padding-right: var(--tide-spacing-4);}
 
 .tide-padding-y-0    {padding-top: 0;                   padding-bottom: 0;}
-.tide-padding-y-1\/4 {padding-top: var(--spacing-1\/4); padding-bottom: var(--spacing-1\/4);}
-.tide-padding-y-1\/2 {padding-top: var(--spacing-1\/2); padding-bottom: var(--spacing-1\/2);}
-.tide-padding-y-1    {padding-top: var(--spacing-1);    padding-bottom: var(--spacing-1);}
-.tide-padding-y-2    {padding-top: var(--spacing-2);    padding-bottom: var(--spacing-2);}
-.tide-padding-y-4    {padding-top: var(--spacing-4);    padding-bottom: var(--spacing-4);}
+.tide-padding-y-1\/4 {padding-top: var(--tide-spacing-1\/4); padding-bottom: var(--tide-spacing-1\/4);}
+.tide-padding-y-1\/2 {padding-top: var(--tide-spacing-1\/2); padding-bottom: var(--tide-spacing-1\/2);}
+.tide-padding-y-1    {padding-top: var(--tide-spacing-1);    padding-bottom: var(--tide-spacing-1);}
+.tide-padding-y-2    {padding-top: var(--tide-spacing-2);    padding-bottom: var(--tide-spacing-2);}
+.tide-padding-y-4    {padding-top: var(--tide-spacing-4);    padding-bottom: var(--tide-spacing-4);}
 
 .tide-padding-top-0    {padding-top: 0;}
-.tide-padding-top-1\/4 {padding-top: var(--spacing-1\/4);}
-.tide-padding-top-1\/2 {padding-top: var(--spacing-1\/2);}
-.tide-padding-top-1    {padding-top: var(--spacing-1);}
-.tide-padding-top-2    {padding-top: var(--spacing-2);}
-.tide-padding-top-4    {padding-top: var(--spacing-4);}
+.tide-padding-top-1\/4 {padding-top: var(--tide-spacing-1\/4);}
+.tide-padding-top-1\/2 {padding-top: var(--tide-spacing-1\/2);}
+.tide-padding-top-1    {padding-top: var(--tide-spacing-1);}
+.tide-padding-top-2    {padding-top: var(--tide-spacing-2);}
+.tide-padding-top-4    {padding-top: var(--tide-spacing-4);}
 
 .tide-padding-right-0    {padding-right: 0;}
-.tide-padding-right-1\/4 {padding-right: var(--spacing-1\/4);}
-.tide-padding-right-1\/2 {padding-right: var(--spacing-1\/2);}
-.tide-padding-right-1    {padding-right: var(--spacing-1);}
-.tide-padding-right-2    {padding-right: var(--spacing-2);}
-.tide-padding-right-4    {padding-right: var(--spacing-4);}
+.tide-padding-right-1\/4 {padding-right: var(--tide-spacing-1\/4);}
+.tide-padding-right-1\/2 {padding-right: var(--tide-spacing-1\/2);}
+.tide-padding-right-1    {padding-right: var(--tide-spacing-1);}
+.tide-padding-right-2    {padding-right: var(--tide-spacing-2);}
+.tide-padding-right-4    {padding-right: var(--tide-spacing-4);}
 
 .tide-padding-bottom-0    {padding-bottom: 0;}
-.tide-padding-bottom-1\/4 {padding-bottom: var(--spacing-1\/4);}
-.tide-padding-bottom-1\/2 {padding-bottom: var(--spacing-1\/2);}
-.tide-padding-bottom-1    {padding-bottom: var(--spacing-1);}
-.tide-padding-bottom-2    {padding-bottom: var(--spacing-2);}
-.tide-padding-bottom-4    {padding-bottom: var(--spacing-4);}
+.tide-padding-bottom-1\/4 {padding-bottom: var(--tide-spacing-1\/4);}
+.tide-padding-bottom-1\/2 {padding-bottom: var(--tide-spacing-1\/2);}
+.tide-padding-bottom-1    {padding-bottom: var(--tide-spacing-1);}
+.tide-padding-bottom-2    {padding-bottom: var(--tide-spacing-2);}
+.tide-padding-bottom-4    {padding-bottom: var(--tide-spacing-4);}
 
 .tide-padding-left-0    {padding-left: 0;}
-.tide-padding-left-1\/4 {padding-left: var(--spacing-1\/4);}
-.tide-padding-left-1\/2 {padding-left: var(--spacing-1\/2);}
-.tide-padding-left-1    {padding-left: var(--spacing-1);}
-.tide-padding-left-2    {padding-left: var(--spacing-2);}
-.tide-padding-left-4    {padding-left: var(--spacing-4);}
+.tide-padding-left-1\/4 {padding-left: var(--tide-spacing-1\/4);}
+.tide-padding-left-1\/2 {padding-left: var(--tide-spacing-1\/2);}
+.tide-padding-left-1    {padding-left: var(--tide-spacing-1);}
+.tide-padding-left-2    {padding-left: var(--tide-spacing-2);}
+.tide-padding-left-4    {padding-left: var(--tide-spacing-4);}
 
 /* Dimension */
 .tide-max-width-full {max-width: 100%;}
@@ -204,19 +204,19 @@
 .tide-height-full {height: 100%;}
 
 /* Backgrounds */
-.tide-transparent-100 {background-color: var(--transparent-100);}
-.tide-transparent-200 {background-color: var(--transparent-200);}
-.tide-transparent-300 {background-color: var(--transparent-300);}
-.tide-transparent-400 {background-color: var(--transparent-400);}
+.tide-transparent-100 {background-color: var(--tide-transparent-100);}
+.tide-transparent-200 {background-color: var(--tide-transparent-200);}
+.tide-transparent-300 {background-color: var(--tide-transparent-300);}
+.tide-transparent-400 {background-color: var(--tide-transparent-400);}
 
 /* Font Size */
-.tide-font-10 {font-size: var(--font-10);}
-.tide-font-12 {font-size: var(--font-12);}
-.tide-font-14 {font-size: var(--font-14);}
-.tide-font-16 {font-size: var(--font-16);}
-.tide-font-20 {font-size: var(--font-20);}
-.tide-font-24 {font-size: var(--font-24);}
-.tide-font-32 {font-size: var(--font-32);}
+.tide-font-10 {font-size: var(--tide-font-10);}
+.tide-font-12 {font-size: var(--tide-font-12);}
+.tide-font-14 {font-size: var(--tide-font-14);}
+.tide-font-16 {font-size: var(--tide-font-16);}
+.tide-font-20 {font-size: var(--tide-font-20);}
+.tide-font-24 {font-size: var(--tide-font-24);}
+.tide-font-32 {font-size: var(--tide-font-32);}
 
 /* Font Weight */
 .tide-font-400 {font-weight: 400;}
@@ -233,6 +233,8 @@
 .tide-cursor-pointer     {cursor: pointer;}
 .tide-cursor-text        {cursor: text;}
 
+.tide-isolate {isolation: isolate;}
+
 .tide-leading-default {line-height: 100%;}
 .tide-leading-normal  {line-height: normal;}
 
@@ -263,8 +265,8 @@
   scroll-snap-align: start;
 }
 
-.tide-shadow-bottom {box-shadow: var(--shadow-bottom);}
-.tide-shadow-top    {box-shadow: var(--shadow-top);}
+.tide-shadow-bottom {box-shadow: var(--tide-shadow-bottom);}
+.tide-shadow-top    {box-shadow: var(--tide-shadow-top);}
 
 .tide-text-center {text-align: center;}
 .tide-text-left   {text-align: left;}