tide-design-system 2.4.2 → 2.4.3

package/README.md

@@ -6,15 +6,16 @@ TIDE (*T*rader *I*nteractive *D*esign and *E*ngineering) is a design system crea
 3. Basic components can be leveraged by any Vue 3 project.
 
 ## Guides
-- [Figma](./src/docs/figma.md): Explore `TIDE` standards, tokens, and components as maintained by the `TIDE team`.
-- [Storybook](./src/docs/storybook.md): Explore `TIDE` utilities and components to generate working code implementations.
-- [Marketplace Style Guides](./src/docs/style-guide.md): Explore `TIDE` utilities and components in a realm-specific production environment.
-- [Full Integration (Vue 3)](./src/docs/integration-full.md): Leverage `TIDE` utilities and components from a compatible `consumer repository`.
-- [Partial Integration (CSS only)](./src/docs/integration-partial.md): Leverage `TIDE` utilties from any `consumer repository`.
-- [Migration](./src/docs/development.md): Replace local structures with `TIDE` utilities and components.
-- [Workflows](./src/docs/workflows.md): Collaborate with the `TIDE team` on feature enhancements.
-- [Development](./src/docs/development.md): Contribute to the `tide-design-system` NPM package.
-- [Upgrade guide](./src/docs/upgrading.md): How to upgrade versions of the `tide-design-system` npm package
+- [Figma](./docs/figma.md): Explore `TIDE` standards, tokens, and components as maintained by the `TIDE team`.
+- [Storybook](./docs/storybook.md): Explore `TIDE` utilities and components to generate working code implementations.
+- [Marketplace Style Guides](./docs/style-guide.md): Explore `TIDE` utilities and components in a realm-specific production environment.
+- [Full Integration (Vue 3)](./docs/integration-full.md): Leverage `TIDE` utilities and components from a compatible `consumer repository`.
+- [Partial Integration (CSS only)](./docs/integration-partial.md): Leverage `TIDE` utilties from any `consumer repository`.
+- [Migration](./docs/development.md): Replace local structures with `TIDE` utilities and components.
+- [Workflows](./docs/workflows.md): Collaborate with the `TIDE team` on feature enhancements.
+- [Development](./docs/development.md): Contribute to the `tide-design-system` NPM package.
+- [Upgrade guide](./docs/upgrading.md): Upgrade versions of the `tide-design-system` npm package
+- [Figma Token Cheatsheet](./docs/token-cheatsheet.md): Remember how to implement Figma tokens from code
 
 ## Glossary
 - **TIDE**: the design system itself - a series of conceptual, agreed-upon standards and guidelines meant to emphasize a consistent, scalable user experience across the suite of Trader Interactive websites

package/dist/css/fonts.css

@@ -0,0 +1,36 @@
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 500;
+  font-display: block;
+  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-display: block;
+  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/dist/css/grid-layout.css

@@ -0,0 +1,34 @@
+:root {
+  --tide-1232px: 73rem;
+  --tide-1920px: 120rem;
+}
+
+.tide-grid-layout {
+  --tide-max-content-width: var(--tide-1232px);
+  --tide-column-width:      minmax(0, var(--tide-max-content-width));
+  --tide-gutter-width:      var(--tide-spacing-1);
+
+  display: grid;
+  grid-auto-rows: min-content;
+  grid-template-columns:
+    minmax(var(--tide-gutter-width), 1fr)
+    var(--tide-column-width)
+    minmax(var(--tide-gutter-width), 1fr);
+}
+
+@media (min-width: 768px) {
+  .tide-grid-layout {--tide-gutter-width: var(--tide-spacing-2);}
+}
+
+@media (min-width: 1232px) {
+  .tide-grid-layout {--tide-gutter-width: var(--tide-spacing-4);}
+}
+
+.tide-grid-xl {--tide-max-content-width: var(--tide-1920px);}
+
+.tide-grid-layout > *,
+.tide-grid-item {
+  grid-column: 2 / -2;
+}
+
+.tide-fluid {grid-column: 1 / -1;}

package/dist/css/main.css

@@ -0,0 +1,5 @@
+@import './fonts.css';
+@import './reset.css';
+@import './variables.css';
+@import './utilities.css';
+@import './grid-layout.css';

package/dist/css/realm/aero.css

@@ -0,0 +1,25 @@
+/* Aero Trader Realm Colors */
+:root {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-realm-aqua:       #A2DEE5;
+  --tide-realm-atmosphere: #3F6EBD;
+  --tide-realm-cloud:      #E3E8F1;
+  --tide-realm-sky:        #AAD4F0;
+  --tide-realm-starry:     #3F6EBD;
+
+  /* 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-realm-atmosphere);
+  --tide-surface-accent: var(--tide-realm-cloud);
+  --tide-surface-brand:  var(--tide-realm-starry);
+
+  --tide-on-primary:       var(--tide-gray-100);
+  --tide-on-surface-brand: var(--tide-realm-starry);
+
+  --tide-gradient-bottom-right-color: var(--tide-realm-sky);
+  --tide-gradient-top-color: var(--tide-realm-aqua);
+  --tide-gradient-bottom-left-color: var(--tide-realm-atmosphere);
+
+  --tide-gradient-bottom-right-opacity: 65%;
+  --tide-gradient-top-opacity: 42%;
+  --tide-gradient-bottom-left-opacity: 32%;
+}

package/dist/css/realm/atv.css

@@ -0,0 +1,25 @@
+/* ATV Trader Realm Colors */
+:root {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-realm-charcoal: #33383B;
+  --tide-realm-maroon:   #9B2702;
+  --tide-realm-orange:   #C7521A;
+  --tide-realm-peach:    #E59A49;
+  --tide-realm-sand:     #F8EADD;
+
+  /* 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-realm-orange);
+  --tide-surface-accent: var(--tide-realm-sand);
+  --tide-surface-brand:  var(--tide-realm-charcoal);
+
+  --tide-on-primary:       var(--tide-gray-100);
+  --tide-on-surface-brand: var(--tide-realm-orange);
+
+  --tide-gradient-bottom-right-color: var(--tide-realm-maroon);
+  --tide-gradient-top-color: var(--tide-realm-peach);
+  --tide-gradient-bottom-left-color: var(--tide-realm-orange);
+
+  --tide-gradient-bottom-right-opacity: 27%;
+  --tide-gradient-top-opacity: 37%;
+  --tide-gradient-bottom-left-opacity: 44%;
+}

package/dist/css/realm/boatmart.css

@@ -0,0 +1,25 @@
+/* Boatmart Trader Realm Colors */
+:root {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-realm-blue:      #499CC7;
+  --tide-realm-mist:      #DBEDFC;
+  --tide-realm-navy-dark: #143353;
+  --tide-realm-navy:      #1D4977;
+  --tide-realm-orange:    #D24614;
+
+  /* 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-realm-navy);
+  --tide-surface-accent: var(--tide-realm-mist);
+  --tide-surface-brand:  var(--tide-realm-navy-dark);
+
+  --tide-on-primary:       var(--tide-gray-100);
+  --tide-on-surface-brand: var(--tide-realm-navy);
+
+  --tide-gradient-bottom-right-color: var(--tide-realm-orange);
+  --tide-gradient-top-color: var(--tide-realm-blue);
+  --tide-gradient-bottom-left-color: var(--tide-realm-navy);
+
+  --tide-gradient-bottom-right-opacity: 12%;
+  --tide-gradient-top-opacity: 27%;
+  --tide-gradient-bottom-left-opacity: 32%;
+}

package/dist/css/realm/cycle.css

@@ -0,0 +1,24 @@
+/* Cycle Trader Realm Colors */
+:root {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-realm-light-blue: #DFECF2;
+  --tide-realm-pure-black: #000000;
+  --tide-realm-red:        #C50000;
+  --tide-realm-steel-blue: #253E51;
+
+  /* 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-realm-pure-black);
+  --tide-surface-accent: var(--tide-realm-light-blue);
+  --tide-surface-brand:  var(--tide-gray-900);
+
+  --tide-on-primary:       var(--tide-gray-100);
+  --tide-on-surface-brand: var(--tide-realm-steel-blue);
+
+  --tide-gradient-bottom-right-color: var(--tide-realm-red);
+  --tide-gradient-top-color: var(--tide-realm-steel-blue);
+  --tide-gradient-bottom-left-color: var(--tide-realm-pure-black);
+
+  --tide-gradient-bottom-right-opacity: 8%;
+  --tide-gradient-top-opacity: 28%;
+  --tide-gradient-bottom-left-opacity: 17%;
+}

package/dist/css/realm/equipment.css

@@ -0,0 +1,25 @@
+/* Equipment Trader Realm Colors */
+:root {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-realm-charcoal:  #333333;
+  --tide-realm-evergreen: #468200;
+  --tide-realm-moss:      #EEF6D7;
+  --tide-realm-steel:     #494949;
+  --tide-realm-yellow:    #FFCE34;
+
+  /* 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-realm-steel);
+  --tide-surface-accent: var(--tide-realm-moss);
+  --tide-surface-brand:  var(--tide-realm-charcoal);
+
+  --tide-on-primary:       var(--tide-gray-100);
+  --tide-on-surface-brand: var(--tide-realm-evergreen);
+
+  --tide-gradient-bottom-right-color: var(--tide-realm-evergreen);
+  --tide-gradient-top-color: var(--tide-realm-yellow);
+  --tide-gradient-bottom-left-color: var(--tide-realm-steel);
+
+  --tide-gradient-bottom-right-opacity: 22%;
+  --tide-gradient-top-opacity: 29%;
+  --tide-gradient-bottom-left-opacity: 39%;
+}

package/dist/css/realm/pwc.css

@@ -0,0 +1,25 @@
+/* PWC Trader Realm Colors */
+:root {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-realm-baby-blue:     #86C0F4;
+  --tide-realm-blue:          #0B72B8;
+  --tide-realm-cantaloupe:    #ECA26A;
+  --tide-realm-foam:          #E0EBF5;
+  --tide-realm-midnight-blue: #002344;
+
+  /* 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-realm-blue);
+  --tide-surface-accent: var(--tide-realm-foam);
+  --tide-surface-brand:  var(--tide-realm-midnight-blue);
+
+  --tide-on-primary:       var(--tide-gray-100);
+  --tide-on-surface-brand: var(--tide-realm-blue);
+
+  --tide-gradient-bottom-right-color: var(--tide-realm-cantaloupe);
+  --tide-gradient-top-color: var(--tide-realm-baby-blue);
+  --tide-gradient-bottom-left-color: var(--tide-realm-blue);
+
+  --tide-gradient-bottom-right-opacity: 22%;
+  --tide-gradient-top-opacity: 39%;
+  --tide-gradient-bottom-left-opacity: 36%;
+}

package/dist/css/realm/rv.css

@@ -0,0 +1,25 @@
+/* RV Trader Realm Colors */
+:root {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-realm-dark-green: #004926;
+  --tide-realm-green:      #006836;
+  --tide-realm-mint:       #98CFB6;
+  --tide-realm-pistachio:  #E0EDE7;
+  --tide-realm-yellow:     #F2B203;
+
+  /* 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-realm-green);
+  --tide-surface-accent: var(--tide-realm-pistachio);
+  --tide-surface-brand:  var(--tide-realm-dark-green);
+
+  --tide-on-primary:       var(--tide-gray-100);
+  --tide-on-surface-brand: var(--tide-realm-green);
+
+  --tide-gradient-bottom-right-color: var(--tide-realm-yellow);
+  --tide-gradient-top-color: var(--tide-realm-mint);
+  --tide-gradient-bottom-left-color: var(--tide-realm-green);
+
+  --tide-gradient-bottom-right-opacity: 15%;
+  --tide-gradient-top-opacity: 42%;
+  --tide-gradient-bottom-left-opacity: 36%;
+}

package/dist/css/realm/snow.css

@@ -0,0 +1,25 @@
+/* Snowmobile Trader Realm Colors */
+:root {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-realm-frost:         #E3E8F2;
+  --tide-realm-ice:           #81C9DF;
+  --tide-realm-sapphire-dark: #122754;
+  --tide-realm-sapphire:      #193778;
+  --tide-realm-twilight:      #CCC5E7;
+
+  /* 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-realm-sapphire);
+  --tide-surface-accent: var(--tide-realm-frost);
+  --tide-surface-brand:  var(--tide-realm-sapphire-dark);
+
+  --tide-on-primary:       var(--tide-gray-100);
+  --tide-on-surface-brand: var(--tide-realm-sapphire);
+
+  --tide-gradient-bottom-right-color: var(--tide-realm-ice);
+  --tide-gradient-top-color: var(--tide-realm-twilight);
+  --tide-gradient-bottom-left-color: var(--tide-realm-sapphire);
+
+  --tide-gradient-bottom-right-opacity: 32%;
+  --tide-gradient-top-opacity: 42%;
+  --tide-gradient-bottom-left-opacity: 44%;
+}

package/dist/css/realm/truck.css

@@ -0,0 +1,25 @@
+/* Commercial Truck Trader Realm Colors */
+:root {
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-realm-baby-blue:     #97D1E3;
+  --tide-realm-blue:          #005F9E;
+  --tide-realm-cloud:         #DBEDF7;
+  --tide-realm-granny-smith:  #A6E6A7;
+  --tide-realm-midnight-blue: #172C4B;
+
+  /* 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-realm-blue);
+  --tide-surface-accent: var(--tide-realm-cloud);
+  --tide-surface-brand:  var(--tide-realm-midnight-blue);
+
+  --tide-on-primary:       var(--tide-gray-100);
+  --tide-on-surface-brand: var(--tide-realm-blue);
+
+  --tide-gradient-bottom-right-color: var(--tide-realm-granny-smith);
+  --tide-gradient-top-color: var(--tide-realm-baby-blue);
+  --tide-gradient-bottom-left-color: var(--tide-realm-blue);
+
+  --tide-gradient-bottom-right-opacity: 28%;
+  --tide-gradient-top-opacity: 42%;
+  --tide-gradient-bottom-left-opacity: 36%;
+}

package/dist/css/reset.css

@@ -0,0 +1,95 @@
+:root {
+  font-size: 16px;
+}
+
+body {
+  color: var(--tide-on-surface);
+  font-size: var(--tide-font-16);
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+/* Cannot be applied to body tag in marketplace repo due to data-css-scope */
+.body-scroll-lock {
+  inset: 0;
+  margin-top: calc(0px - var(--saved-scroll-y, 0px));
+  overflow-y: scroll;
+  position: fixed;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  font-family: Montserrat;
+  font-weight: inherit;
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-underline-offset: .2em;
+  text-decoration-skip-ink: none;
+}
+
+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: 700;
+}
+
+img,
+label {
+  display: block;
+}
+
+img {
+  max-width: 100%;
+}
+
+p {
+  max-width: 80ch;
+}
+
+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-700);
+  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,17 @@
+/* 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-black      {border: 1px solid #000000;}
+.sb-border-blue-light {border: 1px solid #CCDEF3;}
+.sb-border-white      {border: 1px solid #FFFFFF;}
+
+.sb-bg-black      {background-color: #000000;}
+.sb-bg-blue       {background-color: #0000FF;}
+.sb-bg-blue-light {background-color: #CCDEF3;}
+.sb-bg-green      {background-color: #00FF00;}
+.sb-bg-red        {background-color: #FF0000;}
+.sb-bg-white      {background-color: #FFFFFF;}
+
+.sb-font-black      {color: #000000;}
+.sb-font-blue-light {color: #CCDEF3;}
+.sb-font-white      {color: #FFFFFF;}