tide-design-system 2.2.4 → 2.2.6

package/.storybook/main.ts

@@ -1,3 +1,5 @@
+import { isProduction } from '../src/utilities/storybook';
+
 import type { StorybookConfig } from '@storybook/vue3-vite';
 
 const config: StorybookConfig = {
@@ -16,7 +18,7 @@ const config: StorybookConfig = {
     '../src/stories/Welcome.mdx',
     // '../src/stories/*.stories.ts',
 
-    '../src/stories/Demo*.stories.ts',
+    isProduction ? '' : '../src/stories/Demo*.stories.ts',
     '../src/stories/Foundations*.stories.ts',
 
     '../src/stories/TideAccordionItem.stories.ts',

package/.storybook/preview.ts

@@ -10,8 +10,9 @@ import DemoCssUtilities from '../src/stories/DemoCssUtilities.stories';
 import DemoCssUtilitiesByTextInput from '../src/stories/DemoCssUtilitiesByTextInput.stories';
 import FoundationsGrid from '../src/stories/FoundationsGrid.stories';
 import FoundationsMargin from '../src/stories/FoundationsMargin.stories';
+import { isProduction } from '../src/utilities/storybook';
 
-const cssRoot = import.meta.env.PROD ? '/assets/css/realm' : '/src/assets/css/realm';
+const cssRoot = isProduction ? '/assets/css/realm' : '/src/assets/css/realm';
 
 const replaceRealmStyles = (realm: string) => {
     document.getElementById('realmStyles')?.remove();
@@ -177,8 +178,8 @@ const preview: Preview = {
       storySort: {
         order: [
           'Welcome',
-          'Foundations',
-          'Basic Components',
+          'Utilities',
+          'Components',
           'Proof of Concept', [
             'CSS Utilities Demo',
             'CSS Utilities By Text Input',

package/README.md

@@ -1,13 +1,43 @@
 # TIDE Design System
-
-TIDE (**T**rader **I**nteractive **D**esign and **E**ngineering) is a design system created and maintained by the TIDE Task Force of Trader Interactive's All-in Marketplace group, encompassing members of the Design, Development, and Product departments. It was initially developed for use in the `marketplace` repository, but can potentially be incorporated into further Trader projects, subject to the following technical restrictions:
+TIDE (*T*rader *I*nteractive *D*esign and *E*ngineering) is a design system created and maintained by the TIDE Design System product group at Trader Interactive. It was initially developed for use in the `marketplace` repository, but is available for integration into other Trader Interactive projects, subject to the following technical restrictions:
 
 1. CSS utilities can be leveraged by any Node-compiled project.
 2. Types can be leveraged by any TypeScript project.
 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.
+
+## 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
+- **TIDE 1.0**: an unofficial designation that describes the *initial, deprecated* set of standards and guidelines integrated into the redesign of the `marketplace` repository
+- **TIDE 2.0**: an unofficial designation that describes the *revised* set of standards and guidelines implemented as its own GitHub repository (and NPM package), separate from any specific `consumer repository`
+- **TIDE migration**: the process, still underway, of replacing `TIDE 1.0` implementations with those of `TIDE 2.0` within the `marketplace` repository
+- **TIDE team**: the Trader Interactive product group tasked with managing `TIDE` and assisting other Trader Interactive product groups with integrating it into the various `consumer repositories`
+- **Figma**: a third-party design platform that hosts `TIDE`, featuring the ability to create tokens and components to be leveraged across designs
+- **Figma token**: a reusable structure that enables dynamically referencing a stored value (like a color, font, or spacing standard) *within Figma*
+- **Figma component**: a reusable structure that enables dynamically referencing a stored interface element (like a button, form field, or carousel) *within Figma*
+- **TIDE repository**: the GitHub project that stores the code implementing TIDE as a series of utilities and components to be leveraged from within a `consumer repository`
+- **TIDE utility**: a reusable structure that enables dynamically referencing a CSS declaration (like a color, font, or spacing standard) from within the `TIDE repository` or a `consumer repository`
+- **TIDE component**: a reusable structure that enables dynamically referencing a stored interface element (like a button, form field, or carousel) from within the `TIDE repository` or a `consumer repository`
+- **tide-design-system**: the `TIDE` [NPM](https://www.npmjs.com/package/tide-design-system) package that can be added as a dependency to a `consumer repository`
+- **Consumer repository**: any project to which the `tide-design-system` package has been added as a dependency
+- **Storybook**: a third-party library implemented within the `TIDE repository` that aids in generating interactive demonstrations of the design and functionality of `TIDE` utilities and components
+- **Netlify**: a third-party platform that hosts the [TIDE Storybook website](https://tide-design-system.netlify.app)
+
+Note: the `TIDE Figma` and `TIDE repository` are not programmatically bound together, so some structures that exist as designs may not yet have been developed as code, but should be reflected in the [TIDE Jira backlog](https://traderinteractive.atlassian.net/jira/software/c/projects/TIDE/boards/1092/backlog).
 
-- [Storybook](./src/docs/storybook.md): Explore TIDE utilities and components via the Storybook UI.
-- [Integration](./src/docs/integration.md): Leverage TIDE as a dependency from the NPM Registry.
-- [Development](./src/docs/development.md): Contribute to TIDE (TIDE Task Force only).
+## Known consumer repositories:
+(List may not be comprehensive.)
+- [marketplace](https://github.com/traderinteractive/marketplace) (partial integration)
+- [marketplace/frontend](https://github.com/traderinteractive/marketplace/tree/qa/frontend)
+- [marketplace-ssr](https://github.com/traderinteractive/marketplace-ssr)
+- [aim-myt](https://github.com/traderinteractive/aim-myt)
+- [aim-paa](https://github.com/traderinteractive/aim-paa)

package/dist/css/realm/rv.css

@@ -25,8 +25,8 @@
     /* top */
     radial-gradient(
       157.36% 151.94% at 19.69% -3.53%,
-      color-mix(in srgb, var(--tide-realm-pistachio) 42%, transparent) 28.37%,
-      color-mix(in srgb, var(--tide-realm-pistachio) 0%, transparent) 100%
+      color-mix(in srgb, var(--tide-realm-mint) 42%, transparent) 28.37%,
+      color-mix(in srgb, var(--tide-realm-mint) 0%, transparent) 100%
     ),
     /* bottom left */
     radial-gradient(

package/dist/css/utilities-lg.css

@@ -370,17 +370,10 @@
 	.lg-tide-text-transform-none  {text-transform: none;}
 	.lg-tide-text-transform-upper {text-transform: uppercase;}
 
-	.lg-tide-underline,
-	.lg-tide-underline:hover,
-	.lg-tide-underline-hover:hover {
-	  text-decoration: underline;
-	}
-
-	.lg-tide-underline-none,
-	.lg-tide-underline-none:hover,
-	.lg-tide-underline-hover {
-	  text-decoration: none;
-	}
+	.lg-tide-underline                  {text-decoration: underline;}
+	.lg-tide-underline-none             {text-decoration: none;}
+	.lg-tide-underline-hover:hover      {text-decoration: underline;}
+	.lg-tide-underline-hover-none:hover {text-decoration: none;}
 
 	.lg-tide-visible      {visibility: visible;}
 	.lg-tide-visible-none {visibility: hidden;}

package/dist/css/utilities-md.css

@@ -371,17 +371,10 @@
 	.md-tide-text-transform-none  {text-transform: none;}
 	.md-tide-text-transform-upper {text-transform: uppercase;}
 
-	.md-tide-underline,
-	.md-tide-underline:hover,
-	.md-tide-underline-hover:hover {
-	  text-decoration: underline;
-	}
-
-	.md-tide-underline-none,
-	.md-tide-underline-none:hover,
-	.md-tide-underline-hover {
-	  text-decoration: none;
-	}
+	.md-tide-underline                  {text-decoration: underline;}
+	.md-tide-underline-none             {text-decoration: none;}
+	.md-tide-underline-hover:hover      {text-decoration: underline;}
+	.md-tide-underline-hover-none:hover {text-decoration: none;}
 
 	.md-tide-visible      {visibility: visible;}
 	.md-tide-visible-none {visibility: hidden;}

package/dist/css/utilities-sm.css

@@ -370,17 +370,10 @@
 	.sm-tide-text-transform-none  {text-transform: none;}
 	.sm-tide-text-transform-upper {text-transform: uppercase;}
 
-	.sm-tide-underline,
-	.sm-tide-underline:hover,
-	.sm-tide-underline-hover:hover {
-	  text-decoration: underline;
-	}
-
-	.sm-tide-underline-none,
-	.sm-tide-underline-none:hover,
-	.sm-tide-underline-hover {
-	  text-decoration: none;
-	}
+	.sm-tide-underline                  {text-decoration: underline;}
+	.sm-tide-underline-none             {text-decoration: none;}
+	.sm-tide-underline-hover:hover      {text-decoration: underline;}
+	.sm-tide-underline-hover-none:hover {text-decoration: none;}
 
 	.sm-tide-visible      {visibility: visible;}
 	.sm-tide-visible-none {visibility: hidden;}