tide-design-system 2.5.4 → 2.5.8

package/dist/utilities/realm.ts

@@ -0,0 +1,17 @@
+import { REALM } from '@/types/Realm';
+
+import type { Realm, RealmKey } from '@/types/Realm';
+
+export const getRealmKeyFromRealm = (realm: Realm): RealmKey => {
+  const entries = Object.entries(REALM) as [RealmKey, Realm][];
+
+  const match = entries.find((entry): entry is [RealmKey, Realm] => {
+    return entry[1] === realm;
+  });
+
+  if (!match) {
+    throw new Error(`Mapping for ${realm} not found`);
+  }
+
+  return match[0];
+};

package/dist/utilities/viewport.ts

@@ -34,8 +34,8 @@ export const setScrollLock = async (isLocked: boolean) => {
       // body.classList.remove(BODY_LOCK_CLASS);
 
       body.style.removeProperty('inset');
-      body.style.removeProperty('marginTop');
-      body.style.removeProperty('overflowY');
+      body.style.removeProperty('margin-top');
+      body.style.removeProperty('overflow-y');
       body.style.removeProperty('position');
       body.style.removeProperty('--saved-scroll-y');
 

package/docs/toast.md

@@ -0,0 +1,61 @@
+# TIDE Toaster
+
+A global toast notification system for TIDE applications.
+
+---
+
+## Setup
+
+Place the `<TideToaster />` component once at the top level of your app (for example, in `app.vue`).
+
+You must also initialize the toaster at the root so it is properly provided to the entire app tree.
+
+```vue
+<script setup lang="ts">
+import { useTideToaster } from 'tide-design-system';
+
+// Initialize and provide the toaster at the app root
+useTideToaster();
+</script>
+
+<template>
+  <NuxtRouteAnnouncer />
+  <NuxtPage />
+  <TideToaster />
+</template>
+```
+
+---
+
+## Using the Composable
+
+You can trigger toasts from anywhere in your application using the `useTideToaster` composable.
+
+```ts
+import { useTideToaster } from 'tide-design-system';
+
+const { addToast, clearToasts } = useTideToaster();
+
+// Pop an informational toast
+addToast({
+  heading: 'Saved',
+  description: 'Your changes have been saved.',
+});
+
+// Pop an actionable toast
+addToast({
+  heading: 'Undo changes?',
+  description: 'You can revert this action.',
+  action: {
+    label: 'Undo',
+    callback: () => {
+      // handle undo
+    },
+  },
+});
+
+// Manually clear the current toast
+clearToasts();
+```
+
+> Note: Only one toast is displayed at a time. Calling `addToast` will clear any existing toast before showing the new one.

package/index.ts

@@ -7,6 +7,7 @@ import TideBreadCrumbs from '@/components/TideBreadCrumbs.vue';
 import TideButton from '@/components/TideButton.vue';
 import TideButtonIcon from '@/components/TideButtonIcon.vue';
 import TideButtonPagination from '@/components/TideButtonPagination.vue';
+import TideButtonSave from '@/components/TideButtonSave.vue';
 import TideButtonSegmented from '@/components/TideButtonSegmented.vue';
 import TideCard from '@/components/TideCard.vue';
 import TideCarousel from '@/components/TideCarousel.vue';
@@ -36,12 +37,15 @@ import TideModal from '@/components/TideModal.vue';
 import TidePagination from '@/components/TidePagination.vue';
 import TidePopover from '@/components/TidePopover.vue';
 import TideRating from '@/components/TideRating.vue';
+import TideRealmLogo from '@/components/TideRealmLogo.vue';
 import TideSeoLinks from '@/components/TideSeoLinks.vue';
 import TideSheet from '@/components/TideSheet.vue';
 import TideSwitch from '@/components/TideSwitch.vue';
 import TideTabs from '@/components/TideTabs.vue';
+import TideToaster from '@/components/TideToaster.vue';
 import { provideTideConfig } from '@/composables/useTideConfig';
 import { useTideForm } from '@/composables/useTideForm';
+import { useTideToaster } from '@/composables/useTideToaster';
 import { ALERT } from '@/types/Alert';
 import { BADGE_COLOR, BADGE_COLOR_DETAILS, BADGE_TRUSTED } from '@/types/Badge';
 import { BREAKPOINT, MEDIA } from '@/types/Breakpoint';
@@ -53,6 +57,7 @@ import { OBJECT_FIT } from '@/types/Image';
 import { ORIENTATION } from '@/types/Orientation';
 import { PRIORITY } from '@/types/Priority';
 import { REALM } from '@/types/Realm';
+import { SIZE_LOGO } from '@/types/RealmLogo';
 import { SIZE, SIZE_BUTTON } from '@/types/Size';
 import { CSS } from '@/types/Styles';
 import { TARGET } from '@/types/Target';
@@ -74,6 +79,7 @@ import type { Link } from '@/types/Link';
 import type { Orientation } from '@/types/Orientation';
 import type { Priority } from '@/types/Priority';
 import type { Realm } from '@/types/Realm';
+import type { SizeLogo } from '@/types/RealmLogo';
 import type { SelectOption, SelectOptionGroup } from '@/types/Select';
 import type { Size, SizeButton } from '@/types/Size';
 import type { Source } from '@/types/Source';
@@ -115,6 +121,7 @@ export type {
   ValidationLength,
   ValidationResult,
   Validator,
+  SizeLogo,
 };
 
 export {
@@ -138,13 +145,14 @@ export {
   REALM,
   SIZE,
   SIZE_BUTTON,
+  SIZE_LOGO,
   TARGET,
   TEXT_INPUT_TYPE,
   TYPE_CARD,
   VALIDATOR,
 };
 
-export { useTideForm, provideTideConfig };
+export { useTideForm, provideTideConfig, useTideToaster };
 
 export {
   TideAccordionItem,
@@ -156,6 +164,7 @@ export {
   TideButton,
   TideButtonIcon,
   TideButtonPagination,
+  TideButtonSave,
   TideButtonSegmented,
   TideCard,
   TideCarousel,
@@ -185,8 +194,10 @@ export {
   TidePagination,
   TidePopover,
   TideRating,
+  TideRealmLogo,
   TideSeoLinks,
   TideSheet,
   TideSwitch,
   TideTabs,
+  TideToaster,
 };

package/package.json

@@ -10,7 +10,7 @@
     "@storybook/vue3": "^8.0.9",
     "@storybook/vue3-vite": "^8.0.9",
     "@tsconfig/node18": "^2.0.1",
-    "@types/node": "^18.16.16",
+    "@types/node": "^18.19.130",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitest/coverage-c8": "^0.32.0",
     "@vue/eslint-config-airbnb-with-typescript": "^7.0.0",
@@ -34,7 +34,7 @@
     "vite-svg-loader": "^5.1.0",
     "vitest": "^0.31.0",
     "vue": "^3.5.22",
-    "vue-tsc": "^1.0.12"
+    "vue-tsc": "^3.2.5"
   },
   "homepage": "https://tide-design-system.netlify.app",
   "license": "MIT",
@@ -63,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.5.4",
+  "version": "2.5.8",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/assets/css/reset.css

@@ -5,7 +5,7 @@
 body {
   color: var(--tide-on-surface);
   font-size: var(--tide-font-16);
-  font-weight: 400;
+  font-weight: var(--tide-font-regular);
   line-height: 1.4;
   text-wrap: pretty;
 }
@@ -48,7 +48,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: 700;
+  font-weight: var(--tide-font-semibold);
   text-wrap: balance;
 }
 

package/src/assets/css/utilities-base.css

@@ -246,6 +246,10 @@
 .tide-width-auto {width: auto;}
 .tide-width-0    {width: 0;}
 .tide-width-full {width: 100%;}
+.tide-width-stretch {
+  width: -webkit-fill-available;
+  width: stretch;
+}
 
 .tide-height-auto {height: auto;}
 .tide-height-0    {height: 0;}
@@ -294,24 +298,24 @@
 .tide-transparent-400 {background-color: var(--tide-transparent-400);}
 
 /* Typographic roles */
-.tide-typography-display-1        {font-size: var(--tide-font-32); font-weight: 700; text-wrap: balance;}
-.tide-typography-headline-1       {font-size: var(--tide-font-24); font-weight: 700; text-wrap: balance;}
-.tide-typography-headline-2       {font-size: var(--tide-font-20); font-weight: 700; text-wrap: balance;}
-.tide-typography-headline-3       {font-size: var(--tide-font-16); font-weight: 700; text-wrap: balance;}
-.tide-typography-title-1          {font-size: var(--tide-font-20); font-weight: 600; text-wrap: balance;}
-.tide-typography-title-2          {font-size: var(--tide-font-18); font-weight: 600; text-wrap: balance;}
-.tide-typography-body-1           {font-size: var(--tide-font-16); font-weight: 400;}
-.tide-typography-body-2           {font-size: var(--tide-font-14); font-weight: 400;}
-.tide-typography-label-1          {font-size: var(--tide-font-16); font-weight: 500;}
-.tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: 600;}
-.tide-typography-label-2          {font-size: var(--tide-font-14); font-weight: 500;}
-.tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: 600;}
-.tide-typography-label-3          {font-size: var(--tide-font-12); font-weight: 500;}
-.tide-typography-link-1           {font-size: var(--tide-font-16); font-weight: 500;}
-.tide-typography-link-2           {font-size: var(--tide-font-14); font-weight: 500;}
-.tide-typography-link-3           {font-size: var(--tide-font-12); font-weight: 500;}
-.tide-typography-button-1         {font-size: var(--tide-font-16); font-weight: 600;}
-.tide-typography-button-2         {font-size: var(--tide-font-14); font-weight: 600;}
+.tide-typography-display-1        {font-size: var(--tide-font-32); font-weight: var(--tide-font-semibold); text-wrap: balance;}
+.tide-typography-headline-1       {font-size: var(--tide-font-24); font-weight: var(--tide-font-semibold); text-wrap: balance;}
+.tide-typography-headline-2       {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
+.tide-typography-headline-3       {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold); text-wrap: balance;}
+.tide-typography-title-1          {font-size: var(--tide-font-20); font-weight: var(--tide-font-semibold); text-wrap: balance;}
+.tide-typography-title-2          {font-size: var(--tide-font-18); font-weight: var(--tide-font-semibold); text-wrap: balance;}
+.tide-typography-body-1           {font-size: var(--tide-font-16); font-weight: var(--tide-font-regular);}
+.tide-typography-body-2           {font-size: var(--tide-font-14); font-weight: var(--tide-font-regular);}
+.tide-typography-label-1          {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
+.tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
+.tide-typography-label-2          {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
+.tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
+.tide-typography-label-3          {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
+.tide-typography-link-1           {font-size: var(--tide-font-16); font-weight: var(--tide-font-medium);}
+.tide-typography-link-2           {font-size: var(--tide-font-14); font-weight: var(--tide-font-medium);}
+.tide-typography-link-3           {font-size: var(--tide-font-12); font-weight: var(--tide-font-medium);}
+.tide-typography-button-1         {font-size: var(--tide-font-16); font-weight: var(--tide-font-semibold);}
+.tide-typography-button-2         {font-size: var(--tide-font-14); font-weight: var(--tide-font-semibold);}
 
 /* Font Color */
 .tide-font-on-primary   {color: var(--tide-on-primary);}
@@ -359,9 +363,9 @@
 .tide-font-32 {font-size: var(--tide-font-32);}
 
 /* Font Weight */
-.tide-font-400 {font-weight: 400;}
-.tide-font-500 {font-weight: 500;}
-.tide-font-600 {font-weight: 600;}
+.tide-font-400 {font-weight: var(--tide-font-regular);}
+.tide-font-500 {font-weight: var(--tide-font-medium);}
+.tide-font-600 {font-weight: var(--tide-font-semibold);}
 .tide-font-700 {font-weight: 700;}
 
 /* Misc */
@@ -477,62 +481,86 @@
 
 /* Buttons */
 /* Rest State */
+.tide-button-primary,
+.tide-button-secondary,
+.tide-button-tertiary,
+.tide-button-quaternary,
+.tide-button-floating {
+  border: var(--tide-border-width-2) solid;
+}
+
+.tide-button-primary,
+.tide-button-secondary,
+.tide-button-tertiary,
+.tide-button-quaternary {
+  box-shadow: none;
+}
+
 .tide-button-primary {
-  background: var(--tide-primary);
-  border: 2px solid var(--tide-primary);
+  background-color: var(--tide-primary);
+  border-color: var(--tide-primary);
   color: var(--tide-on-primary);
 }
 
 .tide-button-secondary {
-  background: var(--tide-surface);
-  border: 2px solid var(--tide-primary);
-  color: var(--tide-primary);
+  background-color: var(--tide-secondary);
+  border-color: var(--tide-secondary);
+  color: var(--tide-on-secondary);
 }
 
 .tide-button-tertiary {
-  background: var(--tide-white);
-  border: 1px solid var(--tide-border);
+  background-color: var(--tide-surface-variant);
+  border-color: var(--tide-surface-variant);
   color: var(--tide-secondary);
 }
 
 .tide-button-quaternary {
-  background: var(--tide-white);
+  background-color: var(--tide-surface);
+  border-color: var(--tide-surface);
   color: var(--tide-secondary);
 }
 
 .tide-button-floating {
-  background-color: var(--tide-transparent-100);
-  color: var(--tide-secondary);
+  background-color: var(--tide-surface);
+  border-color: var(--tide-surface);
   box-shadow: var(--tide-shadow-bottom);
+  color: var(--tide-secondary);
 }
 
 /* Hover State */
 a.tide-button-primary:hover,
 button.tide-button-primary:enabled:hover {
-  border: 2px solid var(--tide-primary);
-  background: var(--tide-white);
+  background-color: var(--tide-surface);
+  border-color: var(--tide-primary);
   color: var(--tide-primary);
 }
 
 a.tide-button-secondary:hover,
 button.tide-button-secondary:enabled:hover {
-  background: var(--tide-primary);
-  color: var(--tide-on-primary);
+  background-color: var(--tide-surface);
+  border-color: var(--tide-secondary);
+  color: var(--tide-on-surface);
 }
 
 a.tide-button-tertiary:hover,
 button.tide-button-tertiary:enabled:hover {
-  border: 1px solid var(--tide-border-high);
+  background-color: var(--tide-surface-variant);
+  border-color: var(--tide-border);
+  color: var(--tide-secondary);
 }
 
 a.tide-button-quaternary:hover,
 button.tide-button-quaternary:enabled:hover {
-  background: var(--tide-surface-variant);
+  background-color: var(--tide-surface-variant);
+  border-color: var(--tide-surface-variant);
+  color: var(--tide-secondary);
 }
 
 .tide-button-floating:hover,
 button.tide-button-floating:enabled:hover {
-  background-color: var(--tide-white);
+  background-color: var(--tide-surface);
+  border-color: var(--tide-surface);
+  color: var(--tide-secondary);
 }
 
 /* Disabled State */