tide-design-system 2.4.1 → 2.4.3

package/{src/docs → docs}/integration-full.md

@@ -81,4 +81,4 @@
 
 6. Storybook
 
-   Working implementations of TIDE utilities and components can be dynamically-generated from the publicly-served [Storybook](https://tide-design-system.netlify.app) interface layer of the TIDE repository. See [Using Storybook](./src/docs/storybook.md#using-storybook) for details.
+   Working implementations of TIDE utilities and components can be dynamically-generated from the publicly-served [Storybook](https://tide-design-system.netlify.app) interface layer of the TIDE repository. See [Using Storybook](./docs/storybook.md#using-storybook) for details.

package/{src/docs → docs}/integration-partial.md

@@ -36,4 +36,4 @@
    4. Leverage responsive CSS utilities:
 
          `<div class="tide-position-relative md-tide-position-absolute" />`
-3. Working implementations of TIDE utilities can be dynamically-generated from the publicly-served [Storybook](https://tide-design-system.netlify.app) interface layer of the TIDE repository. See [Utilities](./src/docs/storybook.md#utilities) under [Using Storybook](./src/docs/storybook.md#using-storybook) for details.
+3. Working implementations of TIDE utilities can be dynamically-generated from the publicly-served [Storybook](https://tide-design-system.netlify.app) interface layer of the TIDE repository. See [Utilities](./docs/storybook.md#utilities) under [Using Storybook](./docs/storybook.md#using-storybook) for details.

package/docs/token-cheatsheet.md

@@ -0,0 +1,63 @@
+# TIDE Figma Token Cheatsheet
+
+## Terminology
+- [**Figma Token**](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=0-1&p=f&m=dev): the name that appears in the "Layer properties" section of the right sidebar when inspecting an element of a Figma mock
+- [**JS Constant**](../src/types/Styles.ts): the standard JavaScript structure to use when implementing a TIDE Figma token from within a JS file and/or framework (`.vue`, `.ts`, `.js`)
+- [**CSS Utility**](../src/assets/css/utilities-base.css): the CSS class to use when implementing a TIDE Figma token from **legacy** frameworks (`.html`, `.php`, `.phtml`).
+
+## Typography
+|[Figma Token](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=0-1&p=f&m=dev)|[JS Constant](../src/types/Styles.ts)|[CSS Utility](../src/assets/css/utilities-base.css)|
+|-|-|-|
+|Role/Display/Display 1|`CSS.FONT.ROLE.DISPLAY_1`|`tide-typography-display-1`|
+|Role/Headline/Headline 1|`CSS.FONT.ROLE.HEADLINE_1`|`tide-typography-headline-1`|
+|Role/Headline/Headline 2|`CSS.FONT.ROLE.HEADLINE_2`|`tide-typography-headline-2`|
+|Role/Headline/Headline 3|`CSS.FONT.ROLE.HEADLINE_3`|`tide-typography-headline-3`|
+|Role/Title/Title 1|`CSS.FONT.ROLE.TITLE_1`|`tide-typography-title-1`|
+|Role/Title/Title 2|`CSS.FONT.ROLE.TITLE_2`|`tide-typography-title-2`|
+|Role/Body/Body 1*|`CSS.FONT.ROLE.BODY_1`|`tide-typography-body-1`|
+|Role/Body/Body 2|`CSS.FONT.ROLE.BODY_2`|`tide-typography-body-2`|
+|Role/Label/Label 1|`CSS.FONT.ROLE.LABEL_1`|`tide-typography-label-1`|
+|Role/Label/Label 1 Semibold|`CSS.FONT.ROLE.LABEL_1_SEMIBOLD`|`tide-typography-label-1-semibold`|
+|Role/Label/Label 2|`CSS.FONT.ROLE.LABEL_2`|`tide-typography-label-2`|
+|Role/Label/Label 2 Semibold|`CSS.FONT.ROLE.LABEL_2_SEMIBOLD`|`tide-typography-label-2-semibold`|
+|Role/Label/Label 3|`CSS.FONT.ROLE.LABEL_3`|`tide-typography-label-3`|
+|Role/Link/Link 1|`CSS.FONT.ROLE.LINK_1`|`tide-typography-link-1`|
+|Role/Link/Link 2|`CSS.FONT.ROLE.LINK_2`|`tide-typography-link-2`|
+|Role/Button/Button 1|`CSS.FONT.ROLE.BUTTON_1`|`tide-typography-button-1`|
+|Role/Button/Button 2|`CSS.FONT.ROLE.BUTTON_2`|`tide-typography-button-2`|
+
+\* **Body/Body 1** is applied to all site text by default in the [CSS Reset](../src/assets/css/reset.css), so it doesn't need to be specified unless overriding an inherited font role.
+
+## Color
+
+### Background Color
+|[Figma Token](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=0-1&p=f&m=dev)|[JS Constant](../src/types/Styles.ts)|[CSS Utility](../src/assets/css/utilities-base.css)
+|-|-|-|
+|Colors/Primary/Primary|`CSS.BG.PRIMARY`|`tide-bg-primary`|
+|Colors/Secondary/Secondary|`CSS.BG.SECONDARY`|`tide-bg-secondary`|
+|Colors/Surface/Surface|`CSS.BG.SURFACE.DEFAULT`|`tide-bg-surface`|
+|Colors/Surface/Surface brand|`CSS.BG.SURFACE.BRAND`|`tide-bg-surface-brand`|
+|Colors/Surface/Surface brand|`CSS.BG.SURFACE.BRAND`|`tide-bg-surface-brand`|
+|Colors/Surface/Surface accent|`CSS.BG.SURFACE.ACCENT`|`tide-bg-surface-accent`|
+|Colors/Surface/Surface variant|`CSS.BG.SURFACE.VARIANT`|`tide-bg-surface-variant`|
+|Colors/Surface/Surface gradient|`CSS.BG.SURFACE.GRADIENT`|`tide-bg-surface-gradient`|
+|Colors/Surface/Surface floating|`CSS.BG.SURFACE.FLOATING`|`tide-bg-surface-floating`|
+
+### Border Color
+|[Figma Token](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=0-1&p=f&m=dev)|[JS Constant](../src/types/Styles.ts)|[CSS Utility](../src/assets/css/utilities-base.css)
+|-|-|-|
+|Colors/Border/Border|`CSS.BORDER.COLOR.DEFAULT`|`tide-border`|
+|Colors/Border/Border low|`CSS.BORDER.COLOR.LOW`|`tide-border-low`|
+|Colors/Border/Border high|`CSS.BORDER.COLOR.HGIH`|`tide-border-high`|
+|Colors/Border/Border floating|`CSS.BORDER.COLOR.FLOATING`|`tide-border-floating`|
+
+### Font Color
+|[Figma Token](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=0-1&p=f&m=dev)|[JS Constant](../src/types/Styles.ts)|[CSS Utility](../src/assets/css/utilities-base.css)
+|-|-|-|
+|Colors/Primary/On primary|`CSS.BG.PRIMARY`|`tide-font-on-primary`|
+|Colors/Secondary/Secondary|`CSS.BG.SECONDARY`|`tide-font-on-secondary`|
+|Colors/Surface/On surface|`CSS.BG.SURFACE.DEFAULT`|`tide-font-on-surface`|
+|Colors/Surface/On surface brand|`CSS.BG.SURFACE.BRAND`|`tide-font-on-surface-brand`|
+|Colors/Surface/On surface inverse|`CSS.BG.SURFACE.INVERSE`|`tide-font-on-surface-inverse`|
+|Colors/Surface/On surface variant|`CSS.BG.SURFACE.VARIANT`|`tide-font-on-surface-variant`|
+|Colors/Surface/On surface variant inverse|`CSS.BG.SURFACE.VARIANT_INVERSE`|`tide-font-on-surface-variant-inverse`|

package/netlify.toml

@@ -0,0 +1,3 @@
+[context."sandbox"]
+  command = "npm run build-sandbox"
+  publish = "/dist"

package/package.json

@@ -44,6 +44,7 @@
   },
   "scripts": {
     "build": "npm run enforce && npm run build-vite",
+    "build-sandbox": "vite build --config vite.config.sandbox.ts",
     "build-storybook": "npm run build-vite && storybook build && cp -r src/assets/ storybook-static/",
     "build-vite": "vite build && cp -r src/assets/css/ dist/css/ && cp -r src/utilities/ dist/utilities/",
     "coverage": "vitest run --coverage",
@@ -52,7 +53,8 @@
     "lint": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore",
     "lint:fix": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore --fix",
     "precommit": "npm run lint:fix && npm run type-check && npm run test",
-    "preview": "npm run build-storybook && npx http-server -a localhost storybook-static/",
+    "preview-sandbox": "npm run build-sandbox && npx http-server -a localhost dist/",
+    "preview-storybook": "npm run build && npx http-server -a localhost storybook-static/",
     "storybook": "storybook dev -p 6006",
     "test": "vitest run",
     "type-check": "vue-tsc --noEmit"
@@ -61,7 +63,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/components/TideChipAction.vue

@@ -8,7 +8,7 @@
   import type { Element } from '@/types/Element';
 
   type Props = {
-    element: Element;
+    element?: Element;
     href?: string;
     isNewTab?: boolean;
     label: string;

package/src/components/TideImageBackground.vue

@@ -6,8 +6,8 @@
   import type { Source } from '@/types/Source';
 
   type Props = {
-    alt: string;
-    isLazy: boolean;
+    alt?: string;
+    isLazy?: boolean;
     sources?: Source[];
     src?: string;
   };

package/src/components/TideInputCheckboxDeprecated.vue

@@ -19,8 +19,8 @@
     disabled?: boolean;
     indeterminate?: boolean;
     inputId?: string;
-    label: string;
-    name: string;
+    label?: string;
+    name?: string;
     number?: number;
   };
 

package/src/components/TideInputRadioDeprecated.vue

@@ -15,8 +15,8 @@
     checked?: boolean;
     disabled?: boolean;
     inputId?: string;
-    label: string;
-    name: string;
+    label?: string;
+    name?: string;
     number?: number;
   };
 
@@ -25,6 +25,7 @@
     disabled: false,
     inputId: undefined,
     label: undefined,
+    name: undefined,
     number: undefined,
   });
 

package/src/components/TideInputTextDeprecated.vue

@@ -27,10 +27,10 @@
     hasClear?: boolean;
     iconLeading?: Icon;
     inputId?: string;
-    label: string;
+    label?: string;
     maxlength?: number | undefined;
     minlength?: number | undefined;
-    name: string;
+    name?: string;
     prefix?: string;
     required?: boolean;
     suffix?: string;
@@ -51,6 +51,7 @@
     label: undefined,
     maxlength: undefined,
     minlength: undefined,
+    name: undefined,
     prefix: undefined,
     required: false,
     suffix: undefined,

package/src/stories/FoundationsTypography.stories.ts

@@ -4,6 +4,8 @@ import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utili
 import type { StoryContext } from '@storybook/vue3';
 
 const TYPOGRAPHY = prependNoneAsEmpty(STYLES.TYPOGRAPHY);
+const TEXT_DECORATION = prependNoneAsEmpty(STYLES.TEXT_DECORATION);
+const TEXT_TRANSFORM = prependNoneAsEmpty(STYLES.TEXT_TRANSFORM);
 
 const formatArgs = (args: any) => {
   args.class = formatClassNames(args).join(' ');
@@ -15,6 +17,8 @@ const formatClassNames = (args: any) => {
   const classNames: string[] = [];
 
   if (args.type) classNames.push(args.type);
+  if (args.textDecoration) classNames.push(args.textDecoration);
+  if (args.textTransform) classNames.push(args.textTransform);
 
   return classNames;
 };
@@ -63,6 +67,24 @@ export default {
         type: { summary: 'string' },
       },
     },
+    textDecoration: {
+      ...formatArgType({ TEXT_DECORATION }),
+      description: 'Applies text decoration styles',
+      name: 'Text Decoration',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'CSS.STRIKETHROUGH | CSS.UNDERLINE' },
+      },
+    },
+    textTransform: {
+      ...formatArgType({ TEXT_TRANSFORM }),
+      description: 'Applies text transformation styles',
+      name: 'Text Transform',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'CSS.TEXT_TRANSFORM' },
+      },
+    },
     type: {
       ...formatArgType({ TYPOGRAPHY }),
       description: `Applies font rules`,
@@ -75,6 +97,8 @@ export default {
   },
   args: {
     label: 'Aa',
+    textDecoration: TEXT_DECORATION.None,
+    textTransform: TEXT_TRANSFORM.None,
     type: TYPOGRAPHY.None,
   },
   parameters,

package/src/types/Storybook.ts

@@ -217,6 +217,16 @@ export const SHADOW = {
   Top: CSS.SHADOW.TOP,
 };
 
+export const TEXT_DECORATION = {
+  Strikethrough: CSS.STRIKETHROUGH.ON,
+  Underline: CSS.UNDERLINE.REST.ON,
+};
+
+export const TEXT_TRANSFORM = {
+  Lowercase: CSS.TEXT_TRANSFORM.LOWER,
+  Uppercase: CSS.TEXT_TRANSFORM.UPPER,
+};
+
 export const TRANSPARENT = {
   '100: 90% White': CSS.BG.TRANSPARENT.ONE_HUNDRED,
   '200: 75% White': CSS.BG.TRANSPARENT.TWO_HUNDRED,

package/vite.config.sandbox.ts

@@ -0,0 +1,29 @@
+import vue from '@vitejs/plugin-vue';
+import { URL, fileURLToPath } from 'node:url';
+import { defineConfig } from 'vite';
+import ViteDts from 'vite-plugin-dts';
+import svgLoader from 'vite-svg-loader';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    cssCodeSplit: false,
+    outDir: 'dist',
+    sourcemap: true,
+  },
+  plugins: [
+    vue(),
+    svgLoader({
+      svgo: false,
+    }),
+    ViteDts({
+      insertTypesEntry: true,
+      rollupTypes: true,
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+});