tide-design-system 2.0.0

package/dist/css/realm/aero.css

@@ -0,0 +1,42 @@
+/* Aero Trader Realm Colors */
+.aero {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --color1: #4e9ac8;
+  --color2: #006C97;
+  --color3: #83CBFB;
+
+  --bg-gradient: linear-gradient(
+    to bottom right,
+    var(--color3) 50%,
+    var(--color2) 150%
+  );
+
+  --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);
+}

package/dist/css/realm/atv.css

@@ -0,0 +1,43 @@
+/* ATV Trader Realm Colors */
+.atv {
+    /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+    --charcoal: #33383B;
+    --maroon:   #9B2702;
+    --orange:   #C7521A;
+    --peach:    #EFBA88;
+
+    --bg-gradient: linear-gradient(
+      to bottom right,
+      var(--charcoal) 50%,
+      var(--peach) 150%
+    );
+
+    --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);
+}

package/dist/css/realm/boatmart.css

@@ -0,0 +1,42 @@
+/* Boatmart Trader Realm Colors */
+.boatmart {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --navy: #1D4977;
+  --mint:  #46CFD1;
+  --sand:  #FFCF86;
+
+  --gradient: linear-gradient(
+    to bottom right,
+    var(--mint) 50%,
+    var(--sand) 150%
+  );
+
+  --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);
+}

package/dist/css/realm/cycle.css

@@ -0,0 +1,42 @@
+/* Cycle Trader Realm Colors */
+.cycle {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --pure-black:  #000000;
+  --red: #C50000;
+  --steel-blue:   #C9DDE5;
+
+  --bg-gradient: linear-gradient(
+    to bottom right,
+    var(--steel-blue) 50%,
+    var(--red) 150%
+  );
+
+  --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);
+}

package/dist/css/realm/equip.css

@@ -0,0 +1,42 @@
+/* Equipment Trader Realm Colors */
+.equip {
+    /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+    --evergreen: #468200;
+    --steel:     #494949;
+    --yellow:    #FFCE34;
+
+    --bg-gradient: linear-gradient(
+      to bottom right,
+      var(--evergreen) 50%,
+      var(--yellow) 150%
+    );
+
+  --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);
+}

package/dist/css/realm/pwc.css

@@ -0,0 +1,42 @@
+/* PWC Trader Realm Colors */
+.pwc {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --color1: #0B72B8;
+  --color2: #085487;
+  --color3: #59A0EB;
+
+  --gradient: linear-gradient(
+    to bottom right,
+    var(--color2) 50%,
+    var(--color3) 150%
+  );
+
+  --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);
+}

package/dist/css/realm/rv.css

@@ -0,0 +1,42 @@
+/* RV Trader Realm Colors */
+.rv {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --green:  #006836;
+  --teal:   #8ADCB9;
+  --yellow: #F2B203;
+
+  --gradient: linear-gradient(
+    to bottom right,
+    var(--teal) 50%,
+    var(--yellow) 150%
+  );
+
+  --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);
+}

package/dist/css/realm/snow.css

@@ -0,0 +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;
+
+    --bg-gradient: linear-gradient(
+      to bottom right,
+      var(--color3) 50%,
+      var(--color2) 150%
+    );
+
+  --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);
+}

package/dist/css/realm/truck.css

@@ -0,0 +1,42 @@
+/* Commercial Truck Trader Realm Colors */
+.truck {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --blue:  #005F9E;
+  --midnight-blue:   #172C4B;
+  --teal: #97D9E3;
+
+  --bg-gradient: linear-gradient(
+    to bottom right,
+    var(--midnight-blue) 50%,
+    var(--teal) 150%
+  );
+
+  --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);
+}

package/dist/css/reset.css

@@ -0,0 +1,79 @@
+html,
+body {
+  color: var(--on-surface);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  font-family: Montserrat;
+  font-weight: var(--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,
+h2,
+h3,
+h4,
+h5 {
+  font-weight: var(--font-700);
+}
+
+img,
+label {
+  display: block;
+}
+
+img {
+  max-width: 100%;
+}
+
+p {
+  max-width: 80ch;
+  line-height: 150%;
+}
+
+button,
+input,
+option,
+select,
+textarea {
+  background-color: unset;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+button:enabled,
+select {
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: not-allowed;
+}
+
+/* cross-browser normalization */
+input::placeholder {
+  color: var(--gray); /* TODO: replace with an accessible light text color from design system */
+  opacity: 1;
+}
+
+/* Clears the ‘X’ from Chrome */
+input::-webkit-search-decoration,
+input::-webkit-search-cancel-button,
+input::-webkit-search-results-button,
+input::-webkit-search-results-decoration {
+  display: none;
+}

package/dist/css/storybook.css

@@ -0,0 +1,4 @@
+/* Styles used for Storybook demonstration purposes only. Not bundled into distribution package. */
+.sb-bg-blue-light {background-color: #CCDEF3;}
+.sb-bg-white {background-color: #FFFFFF;}
+