tide-design-system 2.0.46 → 2.0.48

package/index.ts

@@ -84,7 +84,7 @@ import { BREAKPOINT, MEDIA } from '@/types/Breakpoint';
 import { CSS } from '@/types/Styles';
 import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
 import { FORMAT, FORMAT_REGEX } from '@/types/Formatted';
-import { ICON } from '@/types/Icon';
+import { ICON, ICON_REALM } from '@/types/Icon';
 import { MEDIA_SLIDE_TYPES } from '@/types/ListingMedia';
 import { ORIENTATION } from '@/types/Orientation';
 import { POSITION_CARD_ICON, TYPE_CARD } from '@/types/Card';
@@ -170,6 +170,7 @@ export {
   FORMAT,
   FORMAT_REGEX,
   ICON,
+  ICON_REALM,
   MEDIA,
   MEDIA_SLIDE_TYPES,
   ORIENTATION,

package/package.json

@@ -38,7 +38,7 @@
   "name": "tide-design-system",
   "scripts": {
     "build": "npm run enforce && npm run build-vite",
-    "build-storybook": "npm run build-vite && storybook build && cp -r src/assets/css/realm/ storybook-static/public/",
+    "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",
     "dev": "vite",
@@ -55,5 +55,5 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.0.46"
+  "version": "2.0.48"
 }

package/src/assets/css/reset.css

@@ -1,6 +1,6 @@
-html,
 body {
   color: var(--tide-on-surface);
+  font-weight: 500;
 }
 
 *,
@@ -12,9 +12,11 @@ body {
   padding: 0;
   color: inherit;
   font-family: Montserrat;
-  font-weight: 400;
+  font-weight: 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 */

package/src/assets/css/utilities.css

@@ -83,6 +83,7 @@
 .tide-margin-y-1    {margin-top: var(--tide-spacing-1);    margin-bottom: var(--tide-spacing-1);}
 .tide-margin-y-2    {margin-top: var(--tide-spacing-2);    margin-bottom: var(--tide-spacing-2);}
 .tide-margin-y-4    {margin-top: var(--tide-spacing-4);    margin-bottom: var(--tide-spacing-4);}
+.tide-margin-y-auto {margin-top: var(--tide-spacing-auto); margin-bottom: var(--tide-spacing-auto);}
 
 .tide-margin-top-0    {margin-top: 0;}
 .tide-margin-top-1\/4 {margin-top: var(--tide-spacing-1\/4);}
@@ -90,6 +91,7 @@
 .tide-margin-top-1    {margin-top: var(--tide-spacing-1);}
 .tide-margin-top-2    {margin-top: var(--tide-spacing-2);}
 .tide-margin-top-4    {margin-top: var(--tide-spacing-4);}
+.tide-margin-top-auto {margin-top: var(--tide-spacing-auto);}
 
 .tide-margin-right-0    {margin-right: 0;}
 .tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -105,8 +107,10 @@
 .tide-margin-bottom-1    {margin-bottom: var(--tide-spacing-1);}
 .tide-margin-bottom-2    {margin-bottom: var(--tide-spacing-2);}
 .tide-margin-bottom-4    {margin-bottom: var(--tide-spacing-4);}
+.tide-margin-bottom-auto {margin-bottom: var(--tide-spacing-auto);}
 
 .tide-margin-left-0    {margin-left: 0;}
+.tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/2);}
 .tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
 .tide-margin-left-1    {margin-left: var(--tide-spacing-1);}
 .tide-margin-left-2    {margin-left: var(--tide-spacing-2);}
@@ -453,6 +457,7 @@
   .sm-tide-margin-top-1    {margin-top: var(--tide-spacing-1);}
   .sm-tide-margin-top-2    {margin-top: var(--tide-spacing-2);}
   .sm-tide-margin-top-4    {margin-top: var(--tide-spacing-4);}
+  .sm-tide-margin-top-auto {margin-top: auto;}
 
   .sm-tide-margin-right-0    {margin-right: 0;}
   .sm-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -468,8 +473,10 @@
   .sm-tide-margin-bottom-1    {margin-bottom: var(--tide-spacing-1);}
   .sm-tide-margin-bottom-2    {margin-bottom: var(--tide-spacing-2);}
   .sm-tide-margin-bottom-4    {margin-bottom: var(--tide-spacing-4);}
+  .sm-tide-margin-bottom-auto {margin-bottom: auto;}
 
   .sm-tide-margin-left-0    {margin-left: 0;}
+  .sm-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
   .sm-tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
   .sm-tide-margin-left-1    {margin-left: var(--tide-spacing-1);}
   .sm-tide-margin-left-2    {margin-left: var(--tide-spacing-2);}
@@ -817,6 +824,7 @@
   .md-tide-margin-top-1    {margin-top: var(--tide-spacing-1);}
   .md-tide-margin-top-2    {margin-top: var(--tide-spacing-2);}
   .md-tide-margin-top-4    {margin-top: var(--tide-spacing-4);}
+  .md-tide-margin-top-auto {margin-top: auto;}
 
   .md-tide-margin-right-0    {margin-right: 0;}
   .md-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -832,8 +840,10 @@
   .md-tide-margin-bottom-1    {margin-bottom: var(--tide-spacing-1);}
   .md-tide-margin-bottom-2    {margin-bottom: var(--tide-spacing-2);}
   .md-tide-margin-bottom-4    {margin-bottom: var(--tide-spacing-4);}
+  .md-tide-margin-bottom-auto {margin-bottom: auto;}
 
   .md-tide-margin-left-0    {margin-left: 0;}
+  .md-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
   .md-tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
   .md-tide-margin-left-1    {margin-left: var(--tide-spacing-1);}
   .md-tide-margin-left-2    {margin-left: var(--tide-spacing-2);}
@@ -1181,6 +1191,7 @@
   .lg-tide-margin-top-1    {margin-top: var(--tide-spacing-1);}
   .lg-tide-margin-top-2    {margin-top: var(--tide-spacing-2);}
   .lg-tide-margin-top-4    {margin-top: var(--tide-spacing-4);}
+  .lg-tide-margin-top-auto {margin-top: auto;}
 
   .lg-tide-margin-right-0    {margin-right: 0;}
   .lg-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -1196,8 +1207,10 @@
   .lg-tide-margin-bottom-1    {margin-bottom: var(--tide-spacing-1);}
   .lg-tide-margin-bottom-2    {margin-bottom: var(--tide-spacing-2);}
   .lg-tide-margin-bottom-4    {margin-bottom: var(--tide-spacing-4);}
+  .lg-tide-margin-bottom-auto {margin-bottom: auto;}
 
   .lg-tide-margin-left-0    {margin-left: 0;}
+  .lg-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
   .lg-tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
   .lg-tide-margin-left-1    {margin-left: var(--tide-spacing-1);}
   .lg-tide-margin-left-2    {margin-left: var(--tide-spacing-2);}
@@ -1545,6 +1558,7 @@
   .xl-tide-margin-top-1    {margin-top: var(--tide-spacing-1);}
   .xl-tide-margin-top-2    {margin-top: var(--tide-spacing-2);}
   .xl-tide-margin-top-4    {margin-top: var(--tide-spacing-4);}
+  .xl-tide-margin-top-auto {margin-top: auto;}
 
   .xl-tide-margin-right-0    {margin-right: 0;}
   .xl-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -1560,8 +1574,10 @@
   .xl-tide-margin-bottom-1    {margin-bottom: var(--tide-spacing-1);}
   .xl-tide-margin-bottom-2    {margin-bottom: var(--tide-spacing-2);}
   .xl-tide-margin-bottom-4    {margin-bottom: var(--tide-spacing-4);}
+  .xl-tide-margin-bottom-auto {margin-bottom: auto;}
 
   .xl-tide-margin-left-0    {margin-left: 0;}
+  .xl-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
   .xl-tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
   .xl-tide-margin-left-1    {margin-left: var(--tide-spacing-1);}
   .xl-tide-margin-left-2    {margin-left: var(--tide-spacing-2);}

package/src/components/TideIcon.vue

@@ -24,16 +24,18 @@
   watch(
     () => props.icon,
     async () => {
-      const id = props.icon as unknown as string;
-      const [prefix, ...rest] = id.split('-');
-      const name = formatPascalCase(rest.length > 0 ? rest.join('-') : prefix);
+      const id: string = props.icon;
+      const name = formatPascalCase(id);
+      const [prefix] = id.split('-');
       const realmFolder = REALM[prefix?.toUpperCase() as keyof typeof REALM];
+      const component = defineAsyncComponent(() => {
+        if (realmFolder) {
+          return import(`../assets/svg/icons/realm/${realmFolder}/Icon${name}.svg?component`);
+        }
 
-      const componentPath: string = realmFolder
-        ? `../assets/svg/icons/realm/${realmFolder}/Icon${formatPascalCase(prefix)}${name}.svg`
-        : `../assets/svg/icons/Icon${name}.svg`;
+        return import(`../assets/svg/icons/Icon${name}.svg?component`);
+      });
 
-      const component = defineAsyncComponent(() => import(componentPath));
       innerSVG.value = markRaw(component);
     },
     { immediate: true }
@@ -57,10 +59,12 @@
     width: 1.5rem;
     height: 1.5rem;
   }
+
   .tide-icon.small {
     width: 1.25rem;
     height: 1.25rem;
   }
+
   .tide-icon svg {
     width: 100%;
     height: 100%;

package/src/components/TideLink.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-  import { computed } from 'vue';
-
   import type { Element } from '@/types/Element';
   import type { Icon } from '@/types/Icon';
 
@@ -16,6 +14,7 @@
     iconTrailing?: Icon;
     isNewTab?: boolean;
     label: string;
+    typography?: (typeof CSS.FONT.ROLE)['LINK_1' | 'LINK_2' | 'LINK_3'];
   };
 
   const props = withDefaults(defineProps<Props>(), {
@@ -25,40 +24,29 @@
     iconTrailing: undefined,
     isNewTab: false,
     label: undefined,
+    typography: CSS.FONT.ROLE.LINK_1,
   });
-
-  const hasIcon = computed(() => props.iconLeading || props.iconTrailing);
 </script>
 
 <template>
   <component
-    :class="[
-      props.element === ELEMENT.LINK ? 'tide-button-as-link' : 'tide-link',
-      hasIcon
-        ? [CSS.DISPLAY.INLINE_FLEX, CSS.AXIS2.CENTER, CSS.GAP.HALF]
-        : [CSS.FONT.WEIGHT.FIVE_HUNDRED, CSS.UNDERLINE.ON],
-    ]"
+    :class="['tide-link', CSS.DISPLAY.INLINE, CSS.UNDERLINE.ON, CSS.ALIGN.X.LEFT, typography]"
     :href="props.href"
     :target="props.isNewTab ? TARGET.BLANK : TARGET.SELF"
     :is="props.element === ELEMENT.LINK ? ELEMENT.LINK : ELEMENT.BUTTON"
   >
     <TideIcon
+      :class="[CSS.DISPLAY.INLINE_BLOCK, CSS.ALIGN.Y.MIDDLE, CSS.MARGIN.RIGHT.QUARTER]"
       :icon="props.iconLeading"
       v-if="props.iconLeading"
     />
 
-    <div
-      :class="[CSS.FONT.WEIGHT.FIVE_HUNDRED, CSS.UNDERLINE.ON]"
-      v-if="hasIcon"
-    >
-      {{ props.label }}
-    </div>
-
-    <template v-else>
+    <span :class="[CSS.ALIGN.Y.MIDDLE]">
       {{ props.label }}
-    </template>
+    </span>
 
     <TideIcon
+      :class="[CSS.DISPLAY.INLINE_BLOCK, CSS.ALIGN.Y.MIDDLE, CSS.MARGIN.LEFT.QUARTER]"
       :icon="props.iconTrailing"
       v-if="props.iconTrailing"
     />

package/src/stories/TideIcon.stories.ts

@@ -1,8 +1,10 @@
+import { ICON as STANDARD_ICON } from '@/types/Icon';
+import { ICON_REALM as STANDARD_ICON_REALM } from '@/types/Icon';
 import * as STANDARD_SIZE from '@/types/Size';
 import TideIcon from '@/components/TideIcon.vue';
-import { ICON } from '@/types/Icon';
 import { formatArgType, parameters, prependNoneAsUndefined } from '@/utilities/storybook';
 
+const ICON = prependNoneAsUndefined({ ...STANDARD_ICON, ...STANDARD_ICON_REALM.RV });
 const SIZE = prependNoneAsUndefined(STANDARD_SIZE.SIZE);
 
 export default {

package/src/types/Styles.ts

@@ -126,7 +126,7 @@ export const CSS = {
     CONTENTS: 'tide-display-contents',
     FLEX: 'tide-display-flex',
     GRID: 'tide-display-grid',
-    INITIAL: 'initial',
+    INITIAL: 'tide-display-initial',
     INLINE: 'tide-display-inline',
     INLINE_BLOCK: 'tide-display-inline-block',
     INLINE_FLEX: 'tide-display-inline-flex',