tide-design-system 2.0.53 → 2.1.0

package/src/assets/css/realm/snow.css

@@ -1,43 +1,37 @@
 /* Snowmobile Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-color1: #193778;
-  --tide-color2: #10234C;
-  --tide-color3: #4F60A7;
-  --tide-frost:  #E3E8F2;
-
-  --tide-gradient: linear-gradient(
-    to bottom right,
-    var(--tide-color3) 50%,
-    var(--tide-color2) 150%
-  );
-
-  --tide-floating: rgba(255, 255, 255, 0);
+  --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-color1);
-  --tide-on-primary: var(--tide-white);
-
-  --tide-secondary:    var(--tide-black);
-  --tide-on-secondary: var(--tide-white);
-
-  --tide-surface:                var(--tide-white);
-  --tide-surface-variant:        var(--tide-gray-200);
-  --tide-surface-brand:          var(--tide-color1);
-  --tide-surface-accent:         var(--tide-frost);
-  --tide-surface-accent-variant: var(--tide-color3);
-  --tide-surface-gradient:       var(--tide-gradient);
-  --tide-surface-floating:       var(--tide-floating);
-
-  --tide-on-surface:         var(--tide-black);
-  --tide-on-surface-variant: var(--tide-gray-800);
-  --tide-on-surface-brand:   var(--tide-color1);
-
-  --tide-on-surface-inverse:         var(--tide-white);
-  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
-
-  --tide-border:          var(--tide-gray-400);
-  --tide-border-low:      var(--tide-gray-600);
-  --tide-border-high:     var(--tide-black);
-  --tide-border-floating: var(--tide-gray-300);
+  --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-surface-gradient:
+    /* bottom right */
+    radial-gradient(
+      57.27% 60.26% at 100% 103.53%,
+      color-mix(in srgb, var(--tide-realm-ice) 33%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-ice) 0%, transparent) 100%
+    ),  
+    /* top */
+    radial-gradient(
+      157.36% 151.94% at 19.69% -3.53%,
+      color-mix(in srgb, var(--tide-realm-twilight) 42%, transparent) 28.37%,
+      color-mix(in srgb, var(--tide-realm-twilight) 0%, transparent) 100%
+    ),
+    /* bottom left */
+    radial-gradient(
+      41.93% 63.48% at -2.12% 103.9%,
+      color-mix(in srgb, var(--tide-realm-sapphire) 44%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-sapphire) 0%, transparent) 100%
+    );
 }

package/src/assets/css/realm/truck.css

@@ -1,43 +1,37 @@
 /* Commercial Truck Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-blue:          #005F9E;
-  --tide-midnight-blue: #172C4B;
-  --tide-teal:          #97D9E3;
-  --tide-cloud:         #DEECF6;
-
-  --tide-gradient: linear-gradient(
-    to bottom right,
-    var(--tide-midnight-blue) 50%,
-    var(--tide-teal) 150%
-  );
-
-  --tide-floating: rgba(255, 255, 255, 0);
+  --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-blue);
-  --tide-on-primary: var(--tide-white);
-
-  --tide-secondary:    var(--tide-black);
-  --tide-on-secondary: var(--tide-white);
-
-  --tide-surface:                var(--tide-white);
-  --tide-surface-variant:        var(--tide-gray-200);
-  --tide-surface-brand:          var(--tide-blue);
-  --tide-surface-accent:         var(--tide-cloud);
-  --tide-surface-accent-variant: var(--tide-midnight-blue);
-  --tide-surface-gradient:       var(--tide-gradient);
-  --tide-surface-floating:       var(--tide-floating);
-
-  --tide-on-surface:         var(--tide-black);
-  --tide-on-surface-variant: var(--tide-gray-800);
-  --tide-on-surface-brand:   var(--tide-blue);
-
-  --tide-on-surface-inverse:         var(--tide-white);
-  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
-
-  --tide-border:          var(--tide-gray-400);
-  --tide-border-low:      var(--tide-gray-600);
-  --tide-border-high:     var(--tide-black);
-  --tide-border-floating: var(--tide-gray-300);
+  --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-surface-gradient:
+    /* bottom right */
+    radial-gradient(
+      57.27% 60.26% at 100% 103.53%,
+      color-mix(in srgb, var(--tide-realm-granny-smith) 28%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-granny-smith) 0%, transparent) 100%
+    ),  
+    /* top */
+    radial-gradient(
+      157.36% 151.94% at 19.69% -3.53%,
+      color-mix(in srgb, var(--tide-realm-baby-blue) 42%, transparent) 28.37%,
+      color-mix(in srgb, var(--tide-realm-baby-blue) 0%, transparent) 100%
+    ),
+    /* bottom left */
+    radial-gradient(
+      41.93% 63.48% at -2.12% 103.9%,
+      color-mix(in srgb, var(--tide-realm-blue) 36%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-blue) 0%, transparent) 100%
+    );
 }

package/src/assets/css/variables.css

@@ -110,4 +110,22 @@
   --tide-warning-primary-border: var(--tide-yellow-300);
   --tide-warning-surface:        var(--tide-yellow-100);
   --tide-warning-border:         var(--tide-yellow-200);
+
+  /* Global color roles (defined in realm tonal palettes in Figma) */
+  --tide-secondary:    var(--tide-gray-900);
+  --tide-on-secondary: var(--tide-gray-100);
+
+  --tide-surface:          var(--tide-gray-100);
+  --tide-surface-variant:  var(--tide-gray-200);
+  --tide-surface-floating: var(--tide-transparent-100);
+  
+  --tide-on-surface:                 var(--tide-gray-900);
+  --tide-on-surface-variant:         var(--tide-gray-700);
+  --tide-on-surface-inverse:         var(--tide-gray-100);
+  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
+
+  --tide-border-low:      var(--tide-gray-400);
+  --tide-border:          var(--tide-gray-600);
+  --tide-border-high:     var(--tide-gray-900);
+  --tide-border-floating: var(--tide-transparent-300);
 }

package/src/components/TideAccordionItem.vue

@@ -1,62 +1,30 @@
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue';
-
   import TideDivider from '@/components/TideDivider.vue';
   import TideIcon from '@/components/TideIcon.vue';
-  import TideIndicator from '@/components/TideIndicator.vue';
   import { ICON } from '@/types/Icon';
   import { CSS } from '@/types/Styles';
 
-  const props = defineProps({
-    hasBottomDivider: {
-      default: false,
-      required: false,
-      type: Boolean,
-    },
-    hasTopDivider: {
-      default: false,
-      required: false,
-      type: Boolean,
-    },
-    isActive: {
-      default: false,
-      required: false,
-      type: Boolean,
-    },
-    isExpandedInitial: {
-      default: false,
-      required: false,
-      type: Boolean,
-    },
-    isOptional: {
-      default: false,
-      required: false,
-      type: Boolean,
-    },
-    label: {
-      default: '',
-      required: true,
-      type: String,
-    },
-  });
-
-  const isExpanded = ref(props.isExpandedInitial);
-
-  let accordionBody = ref();
+  const emit = defineEmits(['toggle']);
 
-  const toggleIsExpanded = () => {
-    const element = accordionBody.value as HTMLElement;
-
-    isExpanded.value = !isExpanded.value;
-
-    element.style.gridTemplateRows = isExpanded.value ? '1fr' : '0fr';
+  type Props = {
+    hasBottomDivider?: boolean;
+    hasTopDivider?: boolean;
+    isExpanded?: boolean;
+    isOptional?: boolean;
+    label: string;
   };
 
-  onMounted(() => {
-    const element = accordionBody.value as HTMLElement;
-
-    element.style.gridTemplateRows = isExpanded.value ? '1fr' : '0fr';
+  const props = withDefaults(defineProps<Props>(), {
+    hasBottomDivider: false,
+    hasTopDivider: false,
+    isExpanded: false,
+    isOptional: false,
+    label: '',
   });
+
+  const handleToggleClick = () => {
+    emit('toggle');
+  };
 </script>
 
 <template>
@@ -65,7 +33,7 @@
 
     <div
       :class="['tide-accordion-head', CSS.DISPLAY.FLEX, CSS.AXIS1.BETWEEN, CSS.PADDING.Y.HALF, CSS.CURSOR.POINTER]"
-      @click="toggleIsExpanded"
+      @click="handleToggleClick"
     >
       <div :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.HALF, CSS.FONT.WEIGHT.SEVEN_HUNDRED]">
         <span>{{ props.label }}</span>
@@ -76,17 +44,12 @@
         >
           (optional)
         </span>
-
-        <TideIndicator v-if="props.isActive" />
       </div>
 
       <TideIcon :icon="isExpanded ? ICON.EXPAND_LESS : ICON.EXPAND_MORE" />
     </div>
 
-    <div
-      :class="['tide-accordion-body', CSS.DISPLAY.GRID]"
-      ref="accordionBody"
-    >
+    <div :class="['tide-accordion-body', props.isExpanded ? 'expanded' : 'collapsed', CSS.DISPLAY.GRID]">
       <div :class="[CSS.OVERFLOW.Y.HIDDEN]">
         <div :class="[CSS.MARGIN.Y.ONE, CSS.FONT.WEIGHT.FOUR_HUNDRED, CSS.FONT.COLOR.SURFACE.DEFAULT]">
           <slot />
@@ -102,4 +65,12 @@
   .tide-accordion-body {
     transition: grid-template-rows var(--tide-animate);
   }
+
+  .tide-accordion-body.expanded {
+    grid-template-rows: 1fr;
+  }
+
+  .tide-accordion-body.collapsed {
+    grid-template-rows: 0fr;
+  }
 </style>

package/src/components/TideAlert.vue

@@ -24,7 +24,7 @@
   });
 
   const icon = computed(() => {
-    let icon: Icon = ICON.VIEW_IN_AR;
+    let icon: Icon = ICON.INFO;
 
     switch (props.type) {
       case ALERT.ERROR:
@@ -52,6 +52,7 @@
       props.type,
       'tide-alert',
       CSS.DISPLAY.GRID,
+      CSS.AXIS2.CENTER,
       CSS.BORDER.RADIUS.HALF,
       CSS.PADDING.FULL.ONE,
       props.type === ALERT.ERROR && CSS.BG.SURFACE.ERROR,
@@ -61,20 +62,19 @@
       props.isToast ? CSS.SHADOW.BOTTOM : '',
     ]"
   >
-    <div :class="['tide-alert-icon', CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER]">
-      <TideIcon
-        :class="[
-          props.type,
-          CSS.BORDER.RADIUS.FULL,
-          CSS.PADDING.FULL.HALF,
-          CSS.FONT.COLOR.SURFACE.INVERSE,
-          props.type === ALERT.ERROR && CSS.BG.ERROR,
-          props.type === ALERT.INFO && CSS.BG.INFO,
-          props.type === ALERT.SUCCESS && CSS.BG.SUCCESS,
-          props.type === ALERT.WARNING && CSS.BG.WARNING,
-        ]"
-        :icon="icon"
-      />
+    <div
+      :class="[
+        'tide-alert-icon',
+        CSS.PADDING.FULL.HALF,
+        CSS.BORDER.RADIUS.FULL,
+        CSS.FONT.COLOR.SURFACE.INVERSE,
+        props.type === ALERT.ERROR && CSS.BG.ERROR,
+        props.type === ALERT.INFO && CSS.BG.INFO,
+        props.type === ALERT.SUCCESS && CSS.BG.SUCCESS,
+        props.type === ALERT.WARNING && CSS.BG.WARNING,
+      ]"
+    >
+      <TideIcon :icon="icon" />
     </div>
 
     <div :class="['tide-alert-heading', CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER]">

package/src/components/TideBreadCrumbs.vue

@@ -5,14 +5,13 @@
   import { CSS } from '@/types/Styles';
 
   import type { BreadCrumb } from '@/types/BreadCrumb';
-  import type { PropType } from 'vue';
 
-  const props = defineProps({
-    breadCrumbs: {
-      default: undefined,
-      required: true,
-      type: Object as PropType<BreadCrumb[]>,
-    },
+  type Props = {
+    breadCrumbs: BreadCrumb[];
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    breadCrumbs: undefined,
   });
 </script>
 

package/src/components/{TideTabs.vue → TideButtonSegmented.vue}

@@ -1,34 +1,28 @@
 <script lang="ts" setup>
-  import { ref } from 'vue';
-
   import { CSS } from '@/types/Styles';
 
   import type { Tab } from '@/types/Tab';
 
   type Props = {
-    activeTabInitial?: number;
+    activeTab: number;
     tabs: Tab[];
   };
 
   const props = withDefaults(defineProps<Props>(), {
-    activeTabInitial: 0,
+    activeTab: 0,
   });
 
   const emit = defineEmits(['change']);
 
-  const activeTab = ref(props.activeTabInitial);
-
-  const handleClick = (event: Event, index: number) => {
-    activeTab.value = index;
-
-    emit('change', event, index);
+  const handleClick = (index: number) => {
+    emit('change', index);
   };
 </script>
 
 <template>
   <div
     :class="[
-      'tide-tabs',
+      'tide-button-segmented',
       CSS.BG.SURFACE.VARIANT,
       CSS.DISPLAY.FLEX,
       CSS.GAP.QUARTER,
@@ -40,7 +34,7 @@
   >
     <button
       :class="[
-        'tide-tabs-tab',
+        'tide-button-segmented-tab',
         index === activeTab
           ? [CSS.BG.SURFACE.DEFAULT, CSS.FONT.COLOR.SURFACE.DEFAULT, CSS.SHADOW.BOTTOM]
           : ['inactive', CSS.FONT.COLOR.SURFACE.VARIANT],
@@ -53,7 +47,7 @@
       ]"
       :data-track="tab.dataTrack || undefined"
       :key="tab.label"
-      @click="(event: Event) => handleClick(event, index)"
+      @click="handleClick(index)"
       v-for="(tab, index) in props.tabs"
     >
       <span :class="[CSS.FONT.WEIGHT.SIX_HUNDRED]">
@@ -70,11 +64,11 @@
 </template>
 
 <style scoped>
-  .tide-tabs {
+  .tide-button-segmented {
     max-width: 23.3rem;
   }
 
-  .tide-tabs-tab {
+  .tide-button-segmented-tab {
     flex: 1;
     transition: background-color var(--tide-animate);
   }

package/src/components/TideCarousel.vue

@@ -129,7 +129,7 @@
 
 <template>
   <section
-    :class="['tide-carousel', CSS.POSITION.RELATIVE, CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.WIDTH.FULL]"
+    :class="['tide-carousel', CSS.POSITION.RELATIVE, CSS.DISPLAY.FLEX, CSS.WIDTH.FULL]"
     ref="carouselRef"
   >
     <div

package/src/components/TideModal.vue

@@ -18,11 +18,11 @@
   const isOpen = ref(props.isOpen);
   const savedScrollPosition = ref<number | null>(null); // TODO: replace body scroll lock with global structure?
 
-  const handleClose = (event: Event) => {
+  const handleClose = () => {
     isOpen.value = false;
 
     updateModalDisplay();
-    emit('close', event);
+    emit('close');
   };
 
   const updateModalDisplay = () => {
@@ -42,7 +42,7 @@
   const handleKeyDown = (event: KeyboardEvent) => {
     if (event.key === 'Escape') {
       event.stopPropagation();
-      handleClose(event);
+      handleClose();
     }
   };
 

package/src/components/TidePagination.vue

@@ -23,7 +23,7 @@
 
   const paginationButtons = computed(() => new Array(props.pageTotal).fill('').map((empty, index) => index + 1));
 
-  const handleClick = (event: Event, index: number) => {
+  const handleClick = (index: number) => {
     pageCurrent.value = index;
 
     emit('change', event, index);
@@ -38,7 +38,7 @@
       :disabled="pageCurrent === 1"
       :icon="ICON.CHEVRON_LEFT"
       :priority="PRIORITY.QUATERNARY"
-      @click="(event: Event) => handleClick(event, pageCurrent - 1)"
+      @click="handleClick(pageCurrent - 1)"
     />
 
     <ul :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.LIST_BULLETS.OFF]">
@@ -50,7 +50,7 @@
           :disabled="pageCurrent === paginationButton"
           :label="paginationButton"
           :priority="PRIORITY.QUATERNARY"
-          @click="(event: Event) => handleClick(event, paginationButton)"
+          @click="handleClick(paginationButton)"
         />
       </li>
     </ul>
@@ -59,7 +59,7 @@
       :disabled="pageCurrent === paginationButtons[paginationButtons.length - 1]"
       :icon="ICON.CHEVRON_RIGHT"
       :priority="PRIORITY.QUATERNARY"
-      @click="(event: Event) => handleClick(event, pageCurrent + 1)"
+      @click="handleClick(pageCurrent + 1)"
     />
   </section>
 </template>

package/src/components/{TideToggle.vue → TideSwitch.vue}

@@ -1,32 +1,24 @@
 <script lang="ts" setup>
-  import { ref } from 'vue';
-
   import TideIcon from '@/components/TideIcon.vue';
   import { ICON } from '@/types/Icon';
   import { SIZE } from '@/types/Size';
   import { CSS } from '@/types/Styles';
 
-  const props = defineProps({
-    disabled: {
-      default: false,
-      required: false,
-      type: Boolean,
-    },
-    isActive: {
-      required: true,
-      type: Boolean,
-    },
+  type Props = {
+    disabled?: boolean;
+    isActive?: boolean;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    disabled: false,
+    isActive: false,
   });
 
   const emit = defineEmits(['change']);
 
-  const isActive = ref(props.isActive);
-
-  const handleClick = (event: Event) => {
+  const handleClick = () => {
     if (!props.disabled) {
-      isActive.value = !isActive.value;
-
-      emit('change', event, isActive.value);
+      emit('change');
     }
   };
 </script>
@@ -34,7 +26,7 @@
 <template>
   <button
     :class="[
-      'tide-toggle',
+      'tide-switch',
       props.isActive ? 'active' : '',
       CSS.DISPLAY.FLEX,
       CSS.AXIS2.CENTER,
@@ -46,11 +38,11 @@
     ]"
     :disabled="props.disabled"
     @click="handleClick"
-    aria-label="Toggle"
+    aria-label="Switch"
   >
     <div
       :class="[
-        'tide-toggle-indicator',
+        'tide-switch-indicator',
         CSS.POSITION.RELATIVE,
         CSS.DISPLAY.FLEX,
         CSS.AXIS1.CENTER,
@@ -68,26 +60,26 @@
 </template>
 
 <style scoped>
-  .tide-toggle {
+  .tide-switch {
     width: 64px;
     height: 32px;
     transition: var(--tide-animate);
     transition-property: background-color;
   }
 
-  .tide-toggle:disabled {
+  .tide-switch:disabled {
     opacity: 0.32;
   }
 
-  .tide-toggle.active {
+  .tide-switch.active {
     border-color: var(--tide-secondary);
   }
 
-  .tide-toggle.active .tide-toggle-indicator {
+  .tide-switch.active .tide-switch-indicator {
     left: 36px;
   }
 
-  .tide-toggle-indicator {
+  .tide-switch-indicator {
     left: 4px;
     transition: var(--tide-animate);
     transition-property: left, border-color, background-color;