tide-design-system 2.0.1 → 2.0.2

package/dist/assets/style.css

@@ -0,0 +1 @@
+:root{--tide-color1: #4e9ac8;--tide-color2: #006C97;--tide-color3: #83CBFB;--tide-bg-gradient: linear-gradient( to bottom right, var(--tide-color3) 50%, var(--tide-color2) 150% );--tide-floating: rgba(255, 255, 255, 0);--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)}:root{--tide-charcoal: #33383B;--tide-maroon: #9B2702;--tide-orange: #C7521A;--tide-peach: #EFBA88;--tide-bg-gradient: linear-gradient( to bottom right, var(--tide-charcoal) 50%, var(--tide-peach) 150% );--tide-floating: rgba(0, 0, 0, 0);--tide-primary: var(--tide-orange);--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-charcoal);--tide-surface-accent: var(--tide-peach);--tide-surface-accent-variant: var(--tide-maroon);--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-orange);--tide-on-surface-inverse: var(--tide-white);--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-black);--tide-border-floating: var(--tide-gray-300)}:root{--tide-pure-black: #000000;--tide-red: #C50000;--tide-steel-blue: #C9DDE5;--tide-bg-gradient: linear-gradient( to bottom right, var(--tide-steel-blue) 50%, var(--tide-red) 150% );--tide-floating: rgba(255, 255, 255, 0);--tide-primary: var(--tide-pure-black);--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-pure-black);--tide-surface-accent: var(--tide-red);--tide-surface-accent-variant: var(--tide-steel-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-pure-black);--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)}:root{--tide-evergreen: #468200;--tide-steel: #494949;--tide-yellow: #FFCE34;--tide-bg-gradient: linear-gradient( to bottom right, var(--tide-evergreen) 50%, var(--tide-yellow) 150% );--tide-floating: rgba(255, 255, 255, 0);--tide-primary: var(--tide-steel);--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-steel);--tide-surface-accent: var(--tide-yellow);--tide-surface-accent-variant: var(--tide-evergreen);--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-steel);--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)}:root{--tide-color1: #0B72B8;--tide-color2: #085487;--tide-color3: #59A0EB;--tide-gradient: linear-gradient( to bottom right, var(--tide-color2) 50%, var(--tide-color3) 150% );--tide-floating: rgba(255, 255, 255, 0);--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)}:root{--tide-green: #006836;--tide-teal: #8ADCB9;--tide-yellow: #F2B203;--tide-gradient: linear-gradient( to bottom right, var(--tide-teal) 50%, var(--tide-yellow) 150% );--tide-floating: rgba(255, 255, 255, 0);--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)}:root{--tide-color1: #193778;--tide-color2: #10234C;--tide-color3: #4F60A7;--tide-bg-gradient: linear-gradient( to bottom right, var(--tide-color3) 50%, var(--tide-color2) 150% );--tide-floating: rgba(255, 255, 255, 0);--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)}:root{--tide-blue: #005F9E;--tide-midnight-blue: #172C4B;--tide-teal: #97D9E3;--tide-bg-gradient: linear-gradient( to bottom right, var(--tide-midnight-blue) 50%, var(--tide-teal) 150% );--tide-floating: rgba(255, 255, 255, 0);--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/animation.css

@@ -1,6 +1,6 @@
 .slide-down-from-top-enter-active,
 .slide-down-from-top-leave-active {
-  transition: transform var(--animate);
+  transition: transform var(--tide-animate);
 }
 
 .slide-down-from-top-enter-from,

package/dist/css/dynamic-buttons.css

@@ -12,61 +12,61 @@
 
 /* Rest State */
 .primary {
-  background: var(--primary);
-  border: 2px solid var(--primary);
-  color: var(--on-primary);
+  background: var(--tide-primary);
+  border: 2px solid var(--tide-primary);
+  color: var(--tide-on-primary);
 }
 
 .secondary {
-  background: 2px solid var(--surface);
-  border: 2px solid var(--primary);
-  color: var(--primary);
+  background: 2px solid var(--tide-surface);
+  border: 2px solid var(--tide-primary);
+  color: var(--tide-primary);
 }
 
 .tertiary {
-  background: var(--white);
-  border: 1px solid var(--border);
-  color: var(--secondary);
+  background: var(--tide-white);
+  border: 1px solid var(--tide-border);
+  color: var(--tide-secondary);
 }
 
 .quaternary {
-  background: var(--white);
-  color: var(--secondary);
+  background: var(--tide-white);
+  color: var(--tide-secondary);
 }
 
 .floating {
-  background-color: var(--transparent-100);
-  color: var(--secondary);
-  box-shadow: var(--shadow-bottom);
+  background-color: var(--tide-transparent-100);
+  color: var(--tide-secondary);
+  box-shadow: var(--tide-shadow-bottom);
 }
 
 /* Hover State */
 a.primary:hover,
 button.primary:enabled:hover {
-  border: 2px solid var(--primary);
-  background: 2px solid var(--white);
-  color: var(--primary);
+  border: 2px solid var(--tide-primary);
+  background: 2px solid var(--tide-white);
+  color: var(--tide-primary);
 }
 
 a.secondary:hover,
 button.secondary:enabled:hover {
-  background: var(--primary);
-  color: var(--on-primary);
+  background: var(--tide-primary);
+  color: var(--tide-on-primary);
 }
 
 a.tertiary:hover,
 button.tertiary:enabled:hover {
-  border: 1px solid var(--border-high);
+  border: 1px solid var(--tide-border-high);
 }
 
 a.quaternary:hover,
 button.quaternary:enabled:hover {
-  background: var(--surface-variant);
+  background: var(--tide-surface-variant);
 }
 
 .floating:hover,
 button.floating:enabled:hover {
-  background-color: var(--white);
+  background-color: var(--tide-white);
 }
 
 /* Disabled State */

package/dist/css/dynamic-utilities.css

@@ -1,29 +1,29 @@
 /* Background */
-.tide-bg-primary   {background: var(--primary);}
-.tide-bg-secondary {background: var(--secondary);}
+.tide-bg-primary   {background: var(--tide-primary);}
+.tide-bg-secondary {background: var(--tide-secondary);}
 
-.tide-bg-surface                {background: var(--surface);}
-.tide-bg-surface-variant        {background: var(--surface-variant);}
-.tide-bg-surface-brand          {background: var(--surface-brand);}
-.tide-bg-surface-accent         {background: var(--surface-accent);}
-.tide-bg-surface-accent-variant {background: var(--surface-accent-variant);}
-.tide-bg-surface-gradient       {background: var(--surface-gradient);}
-.tide-bg-surface-floating       {background: var(--surface-floating);}
+.tide-bg-surface                {background: var(--tide-surface);}
+.tide-bg-surface-variant        {background: var(--tide-surface-variant);}
+.tide-bg-surface-brand          {background: var(--tide-surface-brand);}
+.tide-bg-surface-accent         {background: var(--tide-surface-accent);}
+.tide-bg-surface-accent-variant {background: var(--tide-surface-accent-variant);}
+.tide-bg-surface-gradient       {background: var(--tide-surface-gradient);}
+.tide-bg-surface-floating       {background: var(--tide-surface-floating);}
 
 /* Border */
-.tide-border-primary   {border-color: var(--primary);}
+.tide-border-primary   {border-color: var(--tide-primary);}
 
-.tide-border          {border-color: var(--border);}
-.tide-border-low      {border-color: var(--border-low);}
-.tide-border-high     {border-color: var(--border-high);}
-.tide-border-floating {border-color: var(--border-floating);}
+.tide-border          {border-color: var(--tide-border);}
+.tide-border-low      {border-color: var(--tide-border-low);}
+.tide-border-high     {border-color: var(--tide-border-high);}
+.tide-border-floating {border-color: var(--tide-border-floating);}
 
 /* Foreground */
-.tide-font-on-primary   {color: var(--on-primary);}
-.tide-font-on-secondary {color: var(--on-secondary);}
+.tide-font-on-primary   {color: var(--tide-on-primary);}
+.tide-font-on-secondary {color: var(--tide-on-secondary);}
 
-.tide-font-on-surface                 {color: var(--on-surface);}
-.tide-font-on-surface-variant         {color: var(--on-surface-variant);}
-.tide-font-on-surface-brand           {color: var(--on-surface-brand);}
-.tide-font-on-surface-inverse         {color: var(--on-surface-inverse);}
-.tide-font-on-surface-variant-inverse {color: var(--on-surface-inverse-variant);}
+.tide-font-on-surface                 {color: var(--tide-on-surface);}
+.tide-font-on-surface-variant         {color: var(--tide-on-surface-variant);}
+.tide-font-on-surface-brand           {color: var(--tide-on-surface-brand);}
+.tide-font-on-surface-inverse         {color: var(--tide-on-surface-inverse);}
+.tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}

package/dist/css/main.css

@@ -1,9 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
-
 @import './variables.css';
-@import './reset.css';
 @import './utilities.css';
 @import './dynamic-buttons.css';
 @import './dynamic-utilities.css';
-@import './animation.css';
 @import './page-layout.css';

package/dist/css/page-layout.css

@@ -1,57 +1,41 @@
-.page-layout {
-  --max-content-width:  1168px;
-  --gap:                0px;
-  --column-count:       12;
-  --min-gutter-width:   var(--spacing-1);
-  --gutter-width:       minmax(var(--min-gutter-width), 1fr);
-  --max-column-size:    calc((var(--max-content-width) - (var(--gap) * (var(--column-count) - 1))) / var(--column-count));
-  --content-columns:    repeat(var(--column-count), minmax(0px, var(--max-column-size)));
+.tide-page-layout {
+  --tide-max-content-width:  1168px;
+  --tide-gap:                0px;
+  --tide-column-count:       6;
+  --tide-min-gutter-width:   var(--tide-spacing-1);
+  --tide-gutter-width:       minmax(var(--tide-min-gutter-width), 1fr);
+  --tide-max-column-size:    calc((var(--tide-max-content-width) - (var(--tide-gap) * (var(--tide-column-count) - 1))) / var(--tide-column-count));
+  --tide-content-columns:    repeat(var(--tide-column-count), minmax(0px, var(--tide-max-column-size)));
 
   display:                grid;
-  gap:                    0 var(--gap);
+  gap:                    0 var(--tide-gap);
   grid-auto-rows:         min-content;
-  grid-template-columns:  [start] var(--gutter-width) [content-start] var(--content-columns) [content-end] var(--gutter-width) [end];
+  grid-template-columns:  [start] var(--tide-gutter-width) [content-start] var(--tide-content-columns) [content-end] var(--tide-gutter-width) [end];
 }
 
-.page-layout > *,
-.layout-item {
-  --start:      calc(var(--column-start) + 1);
-  --end:        calc(var(--column-end) + 2);
-  --start-end:  var(--start, content-start) / var(--end, content-end);
+.tide-page-layout > *,
+.tide-layout-item {
+  --tide-start:      calc(var(--tide-column-start) + 1);
+  --tide-end:        calc(var(--tide-column-end) + 2);
+  --tide-start-end:  var(--tide-start, content-start) / var(--tide-end, content-end);
 
-  grid-column:  var(--column, var(--start-end));
+  grid-column:  var(--tide-column, var(--tide-start-end));
 }
 
 .tide-fluid {grid-column: 1 / -1;}
 
-.tide-start-0 {--column-start: 0;}
-.tide-start-1 {--column-start: 1;}
-.tide-start-2 {--column-start: 2;}
-.tide-start-3 {--column-start: 3;}
-.tide-start-4 {--column-start: 4;}
-.tide-start-5 {--column-start: 5;}
-.tide-start-6 {--column-start: 6;}
-.tide-start-7 {--column-start: 7;}
-.tide-start-8 {--column-start: 8;}
-.tide-start-9 {--column-start: 9;}
-.tide-start-10 {--column-start: 10;}
-.tide-start-11 {--column-start: 11;}
-.tide-start-12 {--column-start: 12;}
+.tide-start-0 {--tide-column-start: 0;}
+.tide-start-1 {--tide-column-start: 1;}
+.tide-start-2 {--tide-column-start: 2;}
+.tide-start-3 {--tide-column-start: 3;}
+.tide-start-4 {--tide-column-start: 4;}
+.tide-start-5 {--tide-column-start: 5;}
+.tide-start-6 {--tide-column-start: 6;}
 
-.tide-end-1 {--column-end: 1;}
-.tide-end-2 {--column-end: 2;}
-.tide-end-3 {--column-end: 3;}
-.tide-end-4 {--column-end: 4;}
-.tide-end-5 {--column-end: 5;}
-.tide-end-6 {--column-end: 6;}
-.tide-end-7 {--column-end: 7;}
-.tide-end-8 {--column-end: 8;}
-.tide-end-9 {--column-end: 9;}
-.tide-end-10 {--column-end: 10;}
-.tide-end-11 {--column-end: 11;}
-.tide-end-12 {--column-end: 12;}
-.tide-end-13 {--column-end: 13;}
-
-.site-main {
-  isolation: isolate;
-}
+.tide-end-1 {--tide-column-end: 1;}
+.tide-end-2 {--tide-column-end: 2;}
+.tide-end-3 {--tide-column-end: 3;}
+.tide-end-4 {--tide-column-end: 4;}
+.tide-end-5 {--tide-column-end: 5;}
+.tide-end-6 {--tide-column-end: 6;}
+.tide-end-7 {--tide-column-end: 7;}

package/dist/css/realm/aero.css

@@ -1,42 +1,42 @@
 /* Aero Trader Realm Colors */
-.aero {
+:root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --color1: #4e9ac8;
-  --color2: #006C97;
-  --color3: #83CBFB;
+  --tide-color1: #4e9ac8;
+  --tide-color2: #006C97;
+  --tide-color3: #83CBFB;
 
-  --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/atv.css

@@ -1,43 +1,43 @@
 /* ATV Trader Realm Colors */
-.atv {
+:root {
     /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-    --charcoal: #33383B;
-    --maroon:   #9B2702;
-    --orange:   #C7521A;
-    --peach:    #EFBA88;
+    --tide-charcoal: #33383B;
+    --tide-maroon:   #9B2702;
+    --tide-orange:   #C7521A;
+    --tide-peach:    #EFBA88;
 
-    --bg-gradient: linear-gradient(
+    --tide-bg-gradient: linear-gradient(
       to bottom right,
-      var(--charcoal) 50%,
-      var(--peach) 150%
+      var(--tide-charcoal) 50%,
+      var(--tide-peach) 150%
     );
 
-    --floating: rgba(0, 0, 0, 0);
+    --tide-floating: rgba(0, 0, 0, 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(--orange);
-  --on-primary: var(--white);
-
-  --secondary:    var(--black);
-  --on-secondary: var(--white);
-
-  --surface:                var(--white);
-  --surface-variant:        var(--gray-200);
-  --surface-brand:          var(--charcoal);
-  --surface-accent:         var(--peach);
-  --surface-accent-variant: var(--maroon);
-  --surface-gradient:       var(--gradient);
-  --surface-floating:       var(--floating);
-
-  --on-surface:         var(--black);
-  --on-surface-variant: var(--gray-800);
-  --on-surface-brand:   var(--orange);
-
-  --on-surface-inverse:         var(--white);
-  --on-surface-inverse-variant: var(--transparent-200);
-
-  --border:          var(--gray-600);
-  --border-low:      var(--gray-400);
-  --border-high:     var(--black);
-  --border-floating: var(--gray-300);
+  --tide-primary:    var(--tide-orange);
+  --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-charcoal);
+  --tide-surface-accent:         var(--tide-peach);
+  --tide-surface-accent-variant: var(--tide-maroon);
+  --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-orange);
+
+  --tide-on-surface-inverse:         var(--tide-white);
+  --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-black);
+  --tide-border-floating: var(--tide-gray-300);
 }

package/dist/css/realm/boatmart.css

@@ -1,42 +1,42 @@
 /* Boatmart Trader Realm Colors */
-.boatmart {
+:root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --navy: #1D4977;
-  --mint:  #46CFD1;
-  --sand:  #FFCF86;
+  --tide-navy: #1D4977;
+  --tide-mint:  #46CFD1;
+  --tide-sand:  #FFCF86;
 
-  --gradient: linear-gradient(
+  --tide-gradient: linear-gradient(
     to bottom right,
-    var(--mint) 50%,
-    var(--sand) 150%
+    var(--tide-mint) 50%,
+    var(--tide-sand) 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(--navy);
-  --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(--navy);
-  --surface-accent:         var(--sand);
-  --surface-accent-variant: var(--mint);
-  --surface-gradient:       var(--gradient);
-  --surface-floating:       var(--floating);
-
-  --on-surface:         var(--gray-900);
-  --on-surface-variant: var(--gray-700);
-  --on-surface-brand:   var(--navy);
-
-  --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-navy);
+  --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-navy);
+  --tide-surface-accent:         var(--tide-sand);
+  --tide-surface-accent-variant: var(--tide-mint);
+  --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-navy);
+
+  --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/cycle.css

@@ -1,42 +1,42 @@
 /* Cycle Trader Realm Colors */
-.cycle {
+:root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --pure-black:  #000000;
-  --red: #C50000;
-  --steel-blue:   #C9DDE5;
+  --tide-pure-black:  #000000;
+  --tide-red: #C50000;
+  --tide-steel-blue:   #C9DDE5;
 
-  --bg-gradient: linear-gradient(
+  --tide-bg-gradient: linear-gradient(
     to bottom right,
-    var(--steel-blue) 50%,
-    var(--red) 150%
+    var(--tide-steel-blue) 50%,
+    var(--tide-red) 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(--pure-black);
-  --on-primary: var(--white);
-
-  --secondary:    var(--black);
-  --on-secondary: var(--white);
-
-  --surface:                var(--white);
-  --surface-variant:        var(--gray-200);
-  --surface-brand:          var(--pure-black);
-  --surface-accent:         var(--red);
-  --surface-accent-variant: var(--steel-blue);
-  --surface-gradient:       var(--gradient);
-  --surface-floating:       var(--floating);
-
-  --on-surface:         var(--black);
-  --on-surface-variant: var(--gray-800);
-  --on-surface-brand:   var(--pure-black);
-
-  --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-pure-black);
+  --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-pure-black);
+  --tide-surface-accent:         var(--tide-red);
+  --tide-surface-accent-variant: var(--tide-steel-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-pure-black);
+
+  --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/equip.css

@@ -1,42 +1,42 @@
 /* Equipment Trader Realm Colors */
-.equip {
+:root {
     /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-    --evergreen: #468200;
-    --steel:     #494949;
-    --yellow:    #FFCE34;
+    --tide-evergreen: #468200;
+    --tide-steel:     #494949;
+    --tide-yellow:    #FFCE34;
 
-    --bg-gradient: linear-gradient(
+    --tide-bg-gradient: linear-gradient(
       to bottom right,
-      var(--evergreen) 50%,
-      var(--yellow) 150%
+      var(--tide-evergreen) 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(--steel);
-  --on-primary: var(--white);
-
-  --secondary:    var(--black);
-  --on-secondary: var(--white);
-
-  --surface:                var(--white);
-  --surface-variant:        var(--gray-200);
-  --surface-brand:          var(--steel);
-  --surface-accent:         var(--yellow);
-  --surface-accent-variant: var(--evergreen);
-  --surface-gradient:       var(--gradient);
-  --surface-floating:       var(--floating);
-
-  --on-surface:         var(--black);
-  --on-surface-variant: var(--gray-800);
-  --on-surface-brand:   var(--steel);
-
-  --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-steel);
+  --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-steel);
+  --tide-surface-accent:         var(--tide-yellow);
+  --tide-surface-accent-variant: var(--tide-evergreen);
+  --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-steel);
+
+  --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);
 }