tide-design-system 2.1.11 → 2.1.13

package/src/assets/css/variables.css

@@ -44,6 +44,7 @@
   /* Shadow */
   --tide-shadow-bottom: 0px  2px 8px 2px rgba(0, 0, 0, 0.07);
   --tide-shadow-top:    0px -2px 8px 2px rgba(0, 0, 0, 0.07);
+  --tide-shadow-text:   0px  0px 5px rgba(0, 0, 0, 0.6);
 
   /* Transparency */
   --tide-transparent-100: color-mix(in srgb, white 90%, transparent);
@@ -52,10 +53,8 @@
   --tide-transparent-400: color-mix(in srgb, black 50%, transparent);
 
   /* Global tonal palette */
-  --tide-blue-100:  #D1E0EB;
-  --tide-blue-200:  #A4C1D7;
-  --tide-blue-300:  #76A3C4;
-  --tide-blue-400:  #4984B0;
+  --tide-blue-100:  #EBF1FD;
+  --tide-blue-400:  #3870E9;
 
   --tide-gray-100:  #FFFFFF;
   --tide-gray-200:  #F5F5F5;
@@ -68,20 +67,13 @@
   --tide-gray-900:  #252526;
   --tide-gray-1000: #000000;
 
-  --tide-green-100:  #E6EFCF;
-  --tide-green-200:  #CDE09E;
-  --tide-green-300:  #B4D06E;
-  --tide-green-400:  #9BC13D;
+  --tide-green-100:  #E7F6ED;
+  --tide-green-400:  #30B351;
 
-  --tide-red-100:  #EFCFCF;
-  --tide-red-200:  #E09E9E;
-  --tide-red-300:  #D06E6E;
-  --tide-red-400:  #C13D3D;
-  --tide-red-500:  #912E2E;
+  --tide-red-100:  #FBE9EA;
+  --tide-red-400:  #D8202E;
 
   --tide-yellow-100:  #FEF2CC;
-  --tide-yellow-200:  #FCE499;
-  --tide-yellow-300:  #FBD766;
   --tide-yellow-400:  #FACA33;
 
   /* Global color roles */

package/src/assets/svg/icons/IconVerified.svg

@@ -1,3 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M7 8H17V16H7V8Z" fill="white"/>
   <path d="m8.6 22.5-1.9-3.2-3.6-.8.35-3.7L1 12l2.45-2.8-.35-3.7 3.6-.8 1.9-3.2L12 2.95l3.4-1.45 1.9 3.2 3.6.8-.35 3.7L23 12l-2.45 2.8.35 3.7-3.6.8-1.9 3.2-3.4-1.45-3.4 1.45Zm2.35-6.95L16.6 9.9l-1.4-1.45-4.25 4.25-2.15-2.1L7.4 12l3.55 3.55Z" />
 </svg>

package/src/components/TideAccordionItem.vue

@@ -2,6 +2,7 @@
   import TideDivider from '@/components/TideDivider.vue';
   import TideIcon from '@/components/TideIcon.vue';
   import { ICON } from '@/types/Icon';
+  import { SIZE } from '@/types/Size';
   import { CSS } from '@/types/Styles';
 
   const emit = defineEmits(['toggle']);
@@ -35,7 +36,7 @@
       :class="['tide-accordion-head', CSS.DISPLAY.FLEX, CSS.AXIS1.BETWEEN, CSS.PADDING.Y.HALF, CSS.CURSOR.POINTER]"
       @click="handleToggleClick"
     >
-      <div :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.HALF, CSS.FONT.WEIGHT.SEVEN_HUNDRED]">
+      <div :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.HALF, CSS.FONT.ROLE.LABEL_1_SEMIBOLD]">
         <span>{{ props.label }}</span>
 
         <span
@@ -46,14 +47,15 @@
         </span>
       </div>
 
-      <TideIcon :icon="isExpanded ? ICON.EXPAND_LESS : ICON.EXPAND_MORE" />
+      <TideIcon
+        :icon="isExpanded ? ICON.EXPAND_LESS : ICON.EXPAND_MORE"
+        :size="SIZE.LARGE"
+      />
     </div>
 
     <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 />
-        </div>
+      <div :class="[CSS.OVERFLOW.Y.HIDDEN, CSS.MARGIN.Y.ONE, CSS.FONT.ROLE.BODY_1, CSS.FONT.COLOR.SURFACE.DEFAULT]">
+        <slot />
       </div>
     </div>
 

package/src/components/TideAlert.vue

@@ -78,7 +78,7 @@
     </div>
 
     <div :class="['tide-alert-heading', CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER]">
-      <h2 :class="[CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.SIX_HUNDRED, CSS.FONT.COLOR.SURFACE.DEFAULT]">
+      <h2 :class="[CSS.FONT.ROLE.LABEL_1_SEMIBOLD, CSS.FONT.COLOR.SURFACE.DEFAULT]">
         {{ props.heading }}
       </h2>
     </div>
@@ -90,7 +90,7 @@
       aria-label="Close alert"
     />
 
-    <div :class="['tide-alert-body', CSS.FONT.WEIGHT.FIVE_HUNDRED, CSS.FONT.COLOR.SURFACE.VARIANT]">
+    <div :class="['tide-alert-body', CSS.FONT.ROLE.LABEL_1, CSS.FONT.COLOR.SURFACE.VARIANT]">
       <slot />
     </div>
   </div>

package/src/components/TideBadge.vue

@@ -1,30 +1,41 @@
 <script lang="ts" setup>
+  import TideIcon from '@/components/TideIcon.vue';
   import { CSS } from '@/types/Styles';
 
+  import type { Icon } from '@/types/Icon';
+
   type Props = {
+    iconLeading?: Icon;
+    isFloating?: boolean;
     label: string;
   };
 
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    iconLeading: undefined,
+    isFloating: false,
+  });
 </script>
 
 <template>
   <div
     :class="[
       'tide-badge',
-      CSS.FONT.COLOR.SURFACE.DEFAULT,
-      CSS.BG.SURFACE.FLOATING,
+      props.isFloating
+        ? [CSS.BG.SURFACE.FLOATING, CSS.FONT.ROLE.LABEL_3, CSS.SHADOW.BOTTOM]
+        : [CSS.BG.SURFACE.VARIANT, CSS.FONT.ROLE.LABEL_2],
       CSS.DISPLAY.INLINE_FLEX,
       CSS.AXIS2.CENTER,
       CSS.GAP.QUARTER,
       CSS.BORDER.RADIUS.QUARTER,
       CSS.PADDING.Y.QUARTER,
       CSS.PADDING.X.HALF,
-      CSS.FONT.SIZE.FOURTEEN,
     ]"
   >
+    <TideIcon
+      :icon="props.iconLeading"
+      v-if="props.iconLeading"
+    />
+
     {{ props.label }}
   </div>
 </template>
-
-<style scoped></style>

package/src/components/TideBadgeTrustedPartner.vue

@@ -25,10 +25,10 @@
       CSS.GAP.QUARTER,
       CSS.PADDING.Y.QUARTER,
       CSS.PADDING.X.HALF,
-      CSS.FONT.SIZE.FOURTEEN,
+      CSS.FONT.ROLE.LABEL_2,
     ]"
   >
-    <TideIcon :icon="ICON.VIEW_IN_AR" />
+    <TideIcon :icon="ICON.AWARD_STAR" />
     <div :class="[]">
       <span>{{ props.years }} year trusted partner</span>
     </div>

package/src/components/TideBadgeVerifiedVehicle.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+  import TideIcon from '@/components/TideIcon.vue';
+  import { ICON } from '@/types/Icon';
+  import { CSS } from '@/types/Styles';
+</script>
+
+<template>
+  <div
+    :class="[
+      'tide-badge-verified-vehicle',
+      CSS.BG.SECONDARY,
+      CSS.FONT.ROLE.LABEL_2,
+      CSS.FONT.COLOR.SECONDARY,
+      CSS.DISPLAY.INLINE_FLEX,
+      CSS.AXIS2.CENTER,
+      CSS.GAP.QUARTER,
+      CSS.BORDER.RADIUS.QUARTER,
+      CSS.PADDING.Y.QUARTER,
+      CSS.PADDING.X.HALF,
+    ]"
+  >
+    <TideIcon :icon="ICON.VERIFIED" />
+
+    <span>Verified vehicle</span>
+  </div>
+</template>
+
+<style scoped>
+  .tide-icon {
+    color: var(--tide-blue-400);
+  }
+</style>

package/src/components/TideBreadCrumbs.vue

@@ -21,9 +21,9 @@
       :key="crumb.label"
       v-for="(crumb, index) in props.breadCrumbs"
     >
-      <li :class="[CSS.FONT.SIZE.FOURTEEN]">
+      <li :class="[CSS.FONT.ROLE.BODY_2]">
         <a
-          :class="[CSS.FONT.WEIGHT.SEVEN_HUNDRED, CSS.FONT.COLOR.SURFACE.DEFAULT]"
+          :class="[CSS.FONT.ROLE.LINK_2, CSS.FONT.COLOR.SURFACE.DEFAULT]"
           :data-track="crumb.dataTrack || undefined"
           :href="crumb.url"
           v-if="crumb.url"
@@ -32,7 +32,7 @@
         </a>
 
         <span
-          :class="[CSS.FONT.WEIGHT.FIVE_HUNDRED, CSS.FONT.COLOR.SURFACE.VARIANT]"
+          :class="[CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]"
           :data-track="crumb.dataTrack || undefined"
           v-else
         >

package/src/components/TideButton.vue

@@ -49,7 +49,7 @@
       CSS.AXIS2.CENTER,
       CSS.GAP.HALF,
       CSS.BORDER.RADIUS.HALF,
-      CSS.FONT.WEIGHT.SIX_HUNDRED,
+      CSS.FONT.ROLE.LABEL_1_SEMIBOLD,
     ]"
     :disabled="props.element === ELEMENT.BUTTON && props.disabled"
     :href="props.element === ELEMENT.LINK && props.href ? props.href : undefined"

package/src/components/TideButtonPagination.vue

@@ -26,7 +26,7 @@
       [CSS.DISPLAY.INLINE_BLOCK, CSS.BORDER.RADIUS.FULL, CSS.PADDING.FULL.HALF],
       props.element === ELEMENT_TEXT_AS_ICON.LINK ? [CSS.UNDERLINE.OFF] : '',
       props.element === ELEMENT_TEXT_AS_ICON.DIV ? [CSS.CURSOR.POINTER] : '',
-      [CSS.FONT.WEIGHT.SEVEN_HUNDRED],
+      [CSS.FONT.ROLE.HEADLINE_3],
     ]"
     :disabled="props.element === ELEMENT_TEXT_AS_ICON.BUTTON && props.disabled"
     :href="props.element === ELEMENT_TEXT_AS_ICON.LINK && props.href ? props.href : undefined"

package/src/components/TideButtonSegmented.vue

@@ -42,7 +42,7 @@
         CSS.BORDER.RADIUS.QUARTER,
         CSS.PADDING.Y.QUARTER,
         CSS.WIDTH.FULL,
-        CSS.FONT.WEIGHT.SIX_HUNDRED,
+        CSS.FONT.ROLE.BUTTON_1,
         CSS.WHITESPACE_WRAP.OFF,
       ]"
       :data-track="tab.dataTrack || undefined"
@@ -50,11 +50,12 @@
       @click="handleClick(index)"
       v-for="(tab, index) in props.tabs"
     >
-      <span :class="[CSS.FONT.WEIGHT.SIX_HUNDRED]">
+      <span :class="[CSS.FONT.ROLE.LABEL_1_SEMIBOLD]">
         {{ tab.label }}
       </span>
+
       <span
-        :class="[CSS.FONT.WEIGHT.SIX_HUNDRED]"
+        :class="[CSS.FONT.ROLE.LABEL_1_SEMIBOLD]"
         v-if="tab.count && tab.count > 0"
       >
         ({{ tab.count }})

package/src/components/TideChipAction.vue

@@ -27,8 +27,7 @@
       CSS.PADDING.X.ONE,
       CSS.PADDING.Y.HALF,
       CSS.BG.SURFACE.DEFAULT,
-      CSS.FONT.SIZE.FOURTEEN,
-      CSS.FONT.WEIGHT.FIVE_HUNDRED,
+      CSS.FONT.ROLE.LINK_2,
       CSS.FONT.COLOR.SURFACE.DEFAULT,
       CSS.UNDERLINE.OFF,
     ]"

package/src/components/TideChipFilter.vue

@@ -23,14 +23,13 @@
       CSS.BORDER.RADIUS.FULL,
       CSS.PADDING.X.ONE,
       CSS.PADDING.Y.HALF,
-      CSS.FONT.SIZE.FOURTEEN,
-      CSS.FONT.WEIGHT.FIVE_HUNDRED,
+      CSS.FONT.ROLE.LABEL_2,
       props.isActive ? 'active' : '',
     ]"
   >
     <slot />
     <div :class="[CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.GAP.HALF]">
-      <span :class="[props.isActive ? '' : 'icon-spacing', CSS.FONT.WEIGHT.FIVE_HUNDRED, CSS.WHITESPACE_WRAP.OFF]">
+      <span :class="[props.isActive ? '' : 'icon-spacing', CSS.FONT.ROLE.LABEL_1, CSS.WHITESPACE_WRAP.OFF]">
         {{ props.label }}
       </span>
     </div>

package/src/components/TideChipInput.vue

@@ -23,8 +23,7 @@
       CSS.BORDER.RADIUS.FULL,
       CSS.PADDING.X.ONE,
       CSS.PADDING.Y.HALF,
-      CSS.FONT.SIZE.FOURTEEN,
-      CSS.FONT.WEIGHT.FIVE_HUNDRED,
+      CSS.FONT.ROLE.LABEL_2,
     ]"
   >
     <span>{{ props.label }}</span>

package/src/components/TideColumns.vue

@@ -12,7 +12,7 @@
 
 <template>
   <section class="tide-columns">
-    <h2 :class="[CSS.MARGIN.BOTTOM.HALF, CSS.FONT.SIZE.SIXTEEN]">
+    <h2 :class="[CSS.MARGIN.BOTTOM.HALF]">
       {{ props.heading }}
     </h2>
 

package/src/components/TideIndicator.vue

@@ -14,20 +14,15 @@
   <div
     :class="[
       'tide-indicator',
-      props.label && 'tide-indicator-background',
-      CSS.BG.SURFACE.ACCENT,
+      props.label ? '' : 'dot',
+      CSS.DISPLAY.INLINE_BLOCK,
+      CSS.ALIGN.X.CENTER,
+      CSS.BG.GLOBAL.PRIMARY.ERROR,
       CSS.BORDER.RADIUS.FULL,
+      props.label && props.label.toString().length > 1 ? [CSS.PADDING.X.HALF] : [],
       props.label
-        ? [
-            CSS.POSITION.RELATIVE,
-            CSS.FONT.SIZE.TWELVE,
-            CSS.FONT.WEIGHT.SEVEN_HUNDRED,
-            CSS.FONT.COLOR.SURFACE.DEFAULT,
-            CSS.DISPLAY.FLEX,
-            CSS.AXIS1.CENTER,
-            CSS.AXIS2.CENTER,
-          ]
-        : [],
+        ? [CSS.POSITION.RELATIVE, CSS.FONT.ROLE.LABEL_3, CSS.FONT.COLOR.SURFACE.INVERSE]
+        : [CSS.BORDER.FULL.ONE],
     ]"
   >
     <div
@@ -40,14 +35,15 @@
 </template>
 
 <style scoped>
-  .tide-indicator {
-    width: 0.5rem;
-    height: 0.5rem;
+  .tide-indicator:not(.dot) {
+    min-width: 1rem;
+    min-height: 1rem;
   }
 
-  .tide-indicator-background {
-    width: 1.125rem;
-    height: 1.125rem;
+  .tide-indicator.dot {
+    border-color: var(--tide-gray-100);
+    width: 10px;
+    height: 10px;
   }
 
   .tide-indicator-label {

package/src/components/TideInputCheckbox.vue

@@ -78,7 +78,12 @@
     </div>
 
     <label
-      :class="[CSS.DISPLAY.FLEX, CSS.GAP.HALF, disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER]"
+      :class="[
+        CSS.DISPLAY.FLEX,
+        CSS.GAP.HALF,
+        CSS.FONT.ROLE.LABEL_1,
+        disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER,
+      ]"
       :for="props.inputId"
       @click.prevent
       v-if="label"

package/src/components/TideInputRadio.vue

@@ -33,7 +33,16 @@
 </script>
 
 <template>
-  <div :class="['tide-input-radio', CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.HALF, props.disabled && 'disabled']">
+  <div
+    :class="[
+      'tide-input-radio',
+      CSS.DISPLAY.FLEX,
+      CSS.AXIS2.CENTER,
+      CSS.GAP.HALF,
+      CSS.POINTER_EVENTS.OFF,
+      props.disabled && 'disabled',
+    ]"
+  >
     <input
       :checked="checked"
       :class="[CSS.DISPLAY.NONE]"
@@ -53,6 +62,9 @@
         CSS.BORDER.FULL.ONE,
         checked ? CSS.BORDER.COLOR.HIGH : CSS.BORDER.COLOR.DEFAULT,
         CSS.BORDER.RADIUS.FULL,
+        CSS.BG.SURFACE.DEFAULT,
+        CSS.CURSOR.POINTER,
+        CSS.POINTER_EVENTS.ON,
         checked && 'checked',
       ]"
     >
@@ -60,7 +72,7 @@
     </div>
 
     <label
-      :class="CSS.FONT.WEIGHT.FOUR_HUNDRED"
+      :class="[CSS.FONT.ROLE.BODY_1, CSS.CURSOR.POINTER, CSS.POINTER_EVENTS.ON]"
       :for="props.inputId"
     >
       {{ props.label }}

package/src/components/TideInputSelect.vue

@@ -90,13 +90,12 @@
       <div :class="[CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.WIDTH.FULL]">
         <label
           :class="[
-            hasMinilabel ? ['minilabel', CSS.FONT.SIZE.TWELVE] : CSS.FONT.SIZE.SIXTEEN,
+            hasMinilabel ? ['minilabel', CSS.FONT.ROLE.LABEL_3] : CSS.FONT.ROLE.LABEL_1,
             CSS.POSITION.ABSOLUTE,
             CSS.POSITIONING.LEFT,
             CSS.MARGIN.TOP.HALF,
             CSS.MARGIN.LEFT.ONE,
             !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
-            CSS.FONT.WEIGHT.FIVE_HUNDRED,
             CSS.POINTER_EVENTS.OFF,
           ]"
           :for="props.inputId"
@@ -164,7 +163,7 @@
     </div>
 
     <div
-      :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.MARGIN.LEFT.ONE]"
+      :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER]"
       v-if="props.supportingText || hasError"
     >
       <TideIcon
@@ -174,7 +173,7 @@
         v-if="hasError"
       />
 
-      <div :class="[CSS.FONT.SIZE.TWELVE, CSS.FONT.WEIGHT.FIVE_HUNDRED]">
+      <div :class="[CSS.FONT.ROLE.LABEL_3]">
         {{ hasError ? errorMessage : props.supportingText }}
       </div>
     </div>

package/src/components/TideInputText.vue

@@ -160,6 +160,7 @@
       ]"
     >
       <TideIcon
+        :class="[CSS.FONT.COLOR.SURFACE.VARIANT]"
         :icon="props.iconLeading"
         :size="SIZE.SMALL"
         v-if="props.iconLeading"
@@ -167,7 +168,13 @@
 
       <div :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.WIDTH.FULL]">
         <div
-          :class="['tide-input-text-prefix', !hasError && CSS.FONT.COLOR.SURFACE.VARIANT, hasMinilabel ? '' : 'offset']"
+          :class="[
+            'tide-input-text-prefix',
+            CSS.FONT.ROLE.BODY_1,
+            ,
+            !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
+            hasMinilabel ? '' : 'offset',
+          ]"
           v-if="props.prefix"
         >
           {{ props.prefix }}
@@ -179,9 +186,8 @@
         >
           <label
             :class="[
-              hasMinilabel ? ['minilabel', CSS.FONT.SIZE.TWELVE] : CSS.FONT.SIZE.SIXTEEN,
+              hasMinilabel ? ['minilabel', CSS.FONT.ROLE.LABEL_3] : CSS.FONT.ROLE.LABEL_1,
               !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
-              CSS.FONT.WEIGHT.FIVE_HUNDRED,
               CSS.CURSOR.TEXT,
               CSS.POINTER_EVENTS.OFF,
             ]"
@@ -212,7 +218,12 @@
         </div>
 
         <div
-          :class="['tide-input-text-suffix', !hasError && CSS.FONT.COLOR.SURFACE.VARIANT, hasMinilabel ? '' : 'offset']"
+          :class="[
+            'tide-input-text-suffix',
+            CSS.FONT.ROLE.BODY_1,
+            !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
+            hasMinilabel ? '' : 'offset',
+          ]"
           v-if="props.suffix"
         >
           {{ props.suffix }}
@@ -237,7 +248,7 @@
     </div>
 
     <div
-      :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.MARGIN.LEFT.ONE]"
+      :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER]"
       v-if="props.supportingText || hasError"
     >
       <TideIcon
@@ -247,7 +258,7 @@
         v-if="hasError"
       />
 
-      <div :class="[CSS.FONT.SIZE.TWELVE, CSS.FONT.WEIGHT.FIVE_HUNDRED]">
+      <div :class="[CSS.FONT.ROLE.LABEL_3]">
         {{ hasError ? errorMessage : props.supportingText }}
       </div>
     </div>

package/src/components/TideInputTextarea.vue

@@ -107,9 +107,8 @@
     >
       <label
         :class="[
-          hasMinilabel ? ['minilabel', CSS.FONT.SIZE.TWELVE] : CSS.FONT.SIZE.SIXTEEN,
+          hasMinilabel ? ['minilabel', CSS.FONT.ROLE.LABEL_3] : CSS.FONT.ROLE.LABEL_1,
           !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
-          CSS.FONT.WEIGHT.FIVE_HUNDRED,
           CSS.CURSOR.TEXT,
           CSS.POINTER_EVENTS.OFF,
         ]"
@@ -138,7 +137,7 @@
     </div>
 
     <div
-      :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.MARGIN.LEFT.ONE]"
+      :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER]"
       v-if="props.supportingText || hasError"
     >
       <TideIcon
@@ -147,7 +146,7 @@
         v-if="hasError"
       />
 
-      <div :class="[CSS.FONT.SIZE.TWELVE, CSS.FONT.WEIGHT.FIVE_HUNDRED]">
+      <div :class="[CSS.FONT.ROLE.LABEL_3]">
         {{ hasError ? errorMessage : props.supportingText }}
       </div>
     </div>
@@ -166,17 +165,6 @@
     transition: font-size var(--tide-animate), transform var(--tide-animate);
   }
 
-  label:not(.minilabel),
-  .tide-input-textarea-prefix:not(.offset),
-  .tide-input-textarea-suffix:not(.offset) {
-    transform: translate(0, calc(9 / 16 * 1rem));
-  }
-
-  .tide-input-textarea-prefix,
-  .tide-input-textarea-suffix {
-    transition: transform var(--tide-animate);
-  }
-
   .tide-input-textarea.error {
     color: var(--tide-error-primary);
   }

package/src/components/TideLink.vue

@@ -14,7 +14,6 @@
     iconTrailing?: Icon;
     isNewTab?: boolean;
     label: string;
-    typography?: (typeof CSS.FONT.ROLE)['LINK_1' | 'LINK_2' | 'LINK_3'];
   };
 
   const props = withDefaults(defineProps<Props>(), {
@@ -24,13 +23,12 @@
     iconTrailing: undefined,
     isNewTab: false,
     label: undefined,
-    typography: CSS.FONT.ROLE.LINK_1,
   });
 </script>
 
 <template>
   <component
-    :class="['tide-link', CSS.DISPLAY.INLINE, CSS.UNDERLINE.ON, CSS.ALIGN.X.LEFT, typography]"
+    :class="['tide-link', CSS.DISPLAY.INLINE, CSS.UNDERLINE.ON, CSS.ALIGN.X.LEFT]"
     :href="props.href"
     :target="props.isNewTab ? TARGET.BLANK : TARGET.SELF"
     :is="props.element === ELEMENT.LINK ? ELEMENT.LINK : ELEMENT.BUTTON"

package/src/components/TideSeoLinks.vue

@@ -16,13 +16,13 @@
 
 <template>
   <section class="tide-seo-links">
-    <h2 :class="[CSS.MARGIN.BOTTOM.HALF, CSS.FONT.SIZE.SIXTEEN]">
+    <h2 :class="[CSS.MARGIN.BOTTOM.HALF]">
       {{ props.heading }}
     </h2>
 
     <ul :class="[CSS.DISPLAY.FLEX, CSS.FLEX.WRAP, CSS.GAP.TWO, CSS.LIST_BULLETS.OFF]">
       <li
-        :class="['tide-seo-link', CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.QUARTER, CSS.FONT.SIZE.FOURTEEN]"
+        :class="['tide-seo-link', CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.QUARTER, CSS.FONT.ROLE.BODY_2]"
         :key="link.label"
         v-for="link in props.links"
       >