tide-design-system 2.0.21 → 2.0.23

package/src/assets/css/realm/rv.css

@@ -0,0 +1,50 @@
+/* RV Trader Realm Colors */
+:root {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-green:  #006836;
+  --tide-teal:   #8ADCB9;
+  --tide-yellow: #F2B203;
+
+  --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. */
+  --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-brand:          var(--tide-green);
+  --tide-surface-accent:         var(--tide-yellow);
+  --tide-surface-accent-variant: var(--tide-teal);
+  --tide-surface-variant:        var(--tide-gray-200);
+  --tide-surface-floating:       var(--tide-floating);
+  --tide-surface-gradient:
+      radial-gradient(
+        60.04% 38.7% at -2.12% 103.9%,
+        color-mix(in srgb, var(--tide-surface-accent-variant) 72%, transparent) 0%,
+        color-mix(in srgb, var(--tide-surface-accent-variant)  0%, transparent) 100%
+      ),
+      radial-gradient(
+        154.63% 148.88% at 19.69% -3.53%, #B8DACC 28.37%,
+        color-mix(in srgb, var(--tide-surface-brand) 0%, transparent) 100%
+      ),
+      radial-gradient(
+        50% 46.35% at 100% 103.53%,
+        color-mix(in srgb, var(--tide-surface-accent) 22%, transparent) 0%,
+        color-mix(in srgb, var(--tide-surface-accent)  0%, transparent) 100%
+      );
+
+  --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/src/assets/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. */
+    --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);
+
+  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
+  --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/src/assets/css/realm/truck.css

@@ -0,0 +1,42 @@
+/* Commercial Truck Trader Realm Colors */
+:root {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --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);
+
+  /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
+  --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/src/assets/css/reset.css

@@ -0,0 +1,79 @@
+html,
+body {
+  color: var(--tide-on-surface);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  font-family: Montserrat;
+  font-weight: var(--tide-font-500);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+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(--tide-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(--tide-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/src/assets/css/storybook.css

@@ -0,0 +1,9 @@
+/* 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-border-blue-light {border: 1px solid #CCDEF3;}
+
+.sb-bg-blue-light {background-color: #CCDEF3;}
+.sb-bg-white {background-color: #FFFFFF;}
+
+.sb-font-blue-light {color: #CCDEF3;}