@phillips/seldon 1.214.0 → 1.216.0

package/dist/scss/_type.scss

@@ -110,131 +110,238 @@
   }
 }
 
-@mixin text($token) {
-  // Labels
-  @if $token == 'button' {
-    @include labelText($button);
-  }
+@mixin display-styles($font-size, $font-weight: 400, $text-transform: unset, $font-style: unset) {
+  @include DistinctDisplay;
 
-  @if $token == 'link' {
-    @include labelText($link);
-  }
+  font-size: $font-size;
+  font-style: $font-style;
+  font-variation-settings: 'wght' $font-weight;
+  letter-spacing: 0;
+  line-height: 1.2;
+  text-transform: $text-transform;
+}
 
-  @if $token == 'email' {
-    @include labelText($email);
-  }
+@mixin heading-styles($font-size, $font-weight: 400, $text-transform: unset, $font-style: unset) {
+  @include display-styles($font-size, $font-weight, $text-transform, $font-style);
+}
 
-  @if $token == 'label' {
-    @include labelText($label);
-  }
+@mixin body-styles($font-size, $font-weight: 400, $text-transform: unset, $font-style: unset) {
+  @include Montserrat;
 
-  @if $token == 'badge' {
-    @include labelText($badge);
-  }
+  font-size: $font-size;
+  font-style: $font-style;
+  font-variation-settings: 'wght' $font-weight;
+  letter-spacing: 0;
+  line-height: 1.4;
+  text-transform: $text-transform;
+}
+
+@mixin label-styles($font-size: $font-size-label-small, $font-weight: 400, $text-transform: unset, $font-style: unset) {
+  @include Montserrat;
+
+  font-size: $font-size;
+  font-style: $font-style;
+  font-variation-settings: 'wght' $font-weight;
+  letter-spacing: 0;
+  line-height: 1.2;
+  text-transform: $text-transform;
+}
+
+@mixin link-styles(
+  $font-size,
+  $font-weight: 400,
+  $text-transform: unset,
+  $font-style: unset,
+  $text-decoration: underline
+) {
+  @include Montserrat;
+
+  font-size: $font-size;
+  font-style: $font-style;
+  font-variation-settings: 'wght' $font-weight;
+  letter-spacing: 0;
+  line-height: 1.2;
+  text-decoration: $text-decoration;
+  text-transform: $text-transform;
+}
 
-  // Headings
+@mixin text($token, $font-weight: 400, $text-transform: unset, $font-style: unset, $text-decoration: unset) {
   @if $token == 'blockquote' {
-    @include hText(
-      $heading-size1,
-      $color: $primary-black,
-      $transform-style: initial,
-      $line-height: $heading-line-height-size1
-    );
+    @include heading-styles($font-size-heading-large, $font-weight, $text-transform, $font-style);
   }
 
   @if $token == 'heading1' {
-    @include hText($heading-size1, $line-height: $heading-line-height-size1, $transform-style: capitalize);
+    @include heading-styles($font-size-heading-large, $font-weight, $text-transform, $font-style);
   }
 
   @if $token == 'heading2' {
-    @include hText($heading-size2, $line-height: $heading-line-height-size2, $transform-style: capitalize);
+    @include heading-styles($font-size-heading-large, $font-weight, $text-transform, $font-style);
   }
 
   @if $token == 'heading3' {
-    @include hText($heading-size3, $line-height: $heading-line-height-size3, $transform-style: capitalize);
+    @include heading-styles($font-size-heading-medium, $font-weight, $text-transform, $font-style);
   }
 
   @if $token == 'heading4' {
-    @include hText($heading-size4, $line-height: $heading-line-height-size4, $transform-style: capitalize);
+    @include heading-styles($font-size-heading-small, $font-weight, $text-transform, $font-style);
   }
 
   @if $token == 'heading5' {
-    @include hText($heading-size5, $line-height: $heading-line-height-size5, $transform-style: capitalize);
-  }
-
-  @if $token == 'title1' {
-    @include hText($heading-size1, $line-height: $heading-line-height-size1, $transform-style: uppercase);
+    @include body-styles($font-size-body-small, $font-weight, $text-transform, $font-style);
   }
 
-  // the title2 token skips heading 2 because it's the same size currently as heading1
-  @if $token == 'title2' {
-    @include hText($heading-size3, $line-height: $heading-line-height-size3, $transform-style: uppercase);
+  @if $token == 'string1' {
+    @include heading-styles($font-size-heading-medium, $font-weight, $text-transform, $font-style);
   }
 
-  @if $token == 'title3' {
-    @include hText($heading-size4, $line-height: $heading-line-height-size4, $transform-style: uppercase);
+  @if $token == 'string2' {
+    @include body-styles($font-size-body-small, $font-weight, $text-transform, $font-style);
   }
 
-  @if $token == 'title4' {
-    @include hText($heading-size5, $line-height: $heading-line-height-size5, $transform-style: uppercase);
+  @if $token == 'string3' {
+    @include body-styles($font-size-body-small, $font-weight, $text-transform, $font-style);
   }
 
-  // Body
   @if $token == 'body1' {
-    @include pText($body-size1, $line-height: $body-line-height-size1);
+    @include body-styles($font-size-body-large, $font-weight, $text-transform, $font-style);
   }
 
   @if $token == 'body2' {
-    @include pText($body-size2, $line-height: $body-line-height-size2);
+    @include body-styles($font-size-body-medium, $font-weight, $text-transform, $font-style);
   }
 
   @if $token == 'body3' {
-    @include pText($body-size3, $line-height: $body-line-height-size3);
+    @include body-styles($font-size-body-small, $font-weight, $text-transform, $font-style);
   }
 
-  // String
-  @if $token == 'string1' {
-    @include pText($string-size1, $line-height: $string-line-height-size1);
+  @if $token == 'link' {
+    @include link-styles($font-size: $font-size-link-medium);
   }
 
-  @if $token == 'string2' {
-    @include pText($string-size2, $line-height: $string-line-height-size2);
+  @if $token == 'button' {
+    @include body-styles($font-size-body-small, $font-weight, $text-transform, $font-style);
   }
 
-  @if $token == 'string3' {
-    @include pText($string-size3, $line-height: $string-line-height-size3);
+  @if $token == 'badge' {
+    @include label-styles($font-size: $font-size-label-small, $font-weight: 400, $text-transform: uppercase);
   }
 
-  // SNW
   @if $token == 'snwHeaderLink' {
+    @include link-styles(
+      $font-size: $font-size-link-stylised,
+      $font-weight: 600,
+      $text-transform: uppercase,
+      $text-decoration: unset
+    );
     @include DistinctDisplay;
 
-    font-size: $snw-header-link-size;
-    font-variation-settings: 'wght' 400;
     letter-spacing: 1px;
-    line-height: $snw-header-link-line-height;
-    text-transform: uppercase;
   }
 
   @if $token == 'snwFlyoutLink' {
-    @include Montserrat;
-
-    font-size: $snw-flyout-link-size;
-    font-variation-settings: 'wght' 400;
-    letter-spacing: 1px;
-    line-height: $snw-flyout-link-line-height;
-    text-transform: capitalize;
+    @include link-styles($font-size: $font-size-link-large, $text-decoration: unset);
   }
 
   @if $token == 'snwHeadingHero1' {
-    @include hText($snw-heading-hero-size1, $line-height: $snw-heading-hero-line-height1, $transform-style: uppercase);
+    @include display-styles($font-size-display-small, $font-weight, $text-transform: uppercase, $font-style: unset);
 
     text-align: center;
   }
 
   @if $token == 'snwHeadingHero2' {
-    @include hText($snw-heading-hero-size2, $line-height: $snw-heading-hero-line-height2, $transform-style: uppercase);
+    @include heading-styles($font-size-heading-large, $font-weight, uppercase, $font-style);
 
     text-align: center;
   }
+
+  @if $token == 'title1' {
+    @include heading-styles($font-size-heading-large, $font-weight, uppercase, $font-style);
+  }
+
+  @if $token == 'title2' {
+    @include heading-styles($font-size-heading-medium, $font-weight, uppercase, $font-style);
+  }
+
+  @if $token == 'title3' {
+    @include heading-styles($font-size-heading-small, $font-weight, uppercase, $font-style);
+  }
+
+  @if $token == 'title4' {
+    @include body-styles($font-size-body-small, $font-weight, uppercase, $font-style);
+  }
+
+  @if $token == 'email' {
+    @include labelText($email);
+  }
+
+  @if $token == 'label' {
+    @include labelText($label);
+  }
+
+  @if $token == $displayMedium {
+    @include display-styles($font-size-display-medium, $font-weight, $text-transform: uppercase, $font-style: unset);
+  }
+
+  @if $token == $displaySmall {
+    @include display-styles($font-size-display-small, $font-weight, $text-transform: uppercase, $font-style: unset);
+  }
+
+  @if $token == $headingLarge {
+    @include heading-styles($font-size-heading-large, $font-weight, $text-transform, $font-style);
+  }
+
+  @if $token == $headingMedium {
+    @include heading-styles($font-size-heading-medium, $font-weight, $text-transform, $font-style);
+  }
+
+  @if $token == $headingSmall {
+    @include heading-styles($font-size-heading-small, $font-weight, $text-transform, $font-style);
+  }
+
+  @if $token == $headingExtraSmall {
+    @include heading-styles($font-size-heading-extra-small, $font-weight, $text-transform, $font-style);
+  }
+
+  @if $token == $bodyLarge {
+    @include body-styles($font-size-body-large, $font-weight, $text-transform, $font-style);
+  }
+
+  @if $token == $bodyMedium {
+    @include body-styles($font-size-body-medium, $font-weight, $text-transform, $font-style);
+  }
+
+  @if $token == $bodySmall {
+    @include body-styles($font-size-body-small, $font-weight, $text-transform, $font-style);
+  }
+
+  @if $token == $labelLarge {
+    @include label-styles($font-size: $font-size-label-large);
+  }
+
+  @if $token == $labelMedium {
+    @include label-styles($font-size: $font-size-label-medium);
+  }
+
+  @if $token == $labelSmall {
+    @include label-styles($font-size: $font-size-label-small);
+  }
+
+  @if $token == $linkStylised {
+    @include link-styles($font-size: $font-size-link-stylised, $text-transform: uppercase, $text-decoration: unset);
+    @include DistinctDisplay;
+
+    letter-spacing: 1px;
+  }
+
+  @if $token == $linkLarge {
+    @include link-styles($font-size-link-large);
+  }
+
+  @if $token == $linkMedium {
+    @include link-styles($font-size-link-medium);
+  }
+
+  @if $token == $linkSmall {
+    @include link-styles($font-size-link-small);
+  }
 }

package/dist/scss/_vars.scss

@@ -1,6 +1,76 @@
 // prefix
 $px: seldon;
 
+// TODO: make design team to follow something like https://tailwindcss.com/docs/font-size
+@mixin font-size-vars--sm {
+  --font-size-display-medium: 2.5rem; // 40px
+  --font-size-display-small: 2rem; // 32px
+  --font-size-heading-large: 1.5rem; // 24px
+  --font-size-heading-medium: 1.25rem; // 20px
+  --font-size-heading-small: 1rem; // 16px
+  --font-size-heading-extra-small: 0.75rem; // 12px
+  --font-size-body-large: 1rem; // 16px
+  --font-size-body-medium: 0.875rem; // 14px
+  --font-size-body-small: 0.75rem; // 12px
+  --font-size-label-large: 1rem; // 16px
+  --font-size-label-medium: 0.875rem; // 14px
+  --font-size-label-small: 0.75rem; // 12px
+  --font-size-link-stylised: 1rem; // 16px
+  --font-size-link-large: 1rem; // 16px
+  --font-size-link-medium: 0.875rem; // 14px
+  --font-size-link-small: 0.75rem; // 12px
+}
+
+@mixin font-size-vars--md {
+  @include font-size-vars--sm;
+}
+
+@mixin font-size-vars--lg {
+  --font-size-display-medium: 3rem; // 48px
+  --font-size-display-small: 2.5rem; // 40px
+  --font-size-heading-large: 1.75rem; // 28px
+  --font-size-heading-medium: 1.5rem; // 24px
+  --font-size-heading-small: 1.25rem; // 20px
+  --font-size-heading-extra-small: 1rem; // 16px
+  --font-size-body-large: 1.25rem; // 20px
+  --font-size-body-medium: 1.125rem; // 18px
+  --font-size-body-small: 1rem; // 16px
+  --font-size-label-large: 1.25rem; // 20px
+  --font-size-label-medium: 1.125rem; // 18px
+  --font-size-label-small: 1rem; // 16px
+  --font-size-link-stylised: 1.25rem; // 20px
+  --font-size-link-large: 1.25rem; // 20px
+  --font-size-link-medium: 1.125rem; // 18px
+  --font-size-link-small: 1rem; // 16px
+}
+
+$font-size-xs: var(--font-size-xs);
+$font-size-s: var(--font-size-s);
+$font-size-m: var(--font-size-m);
+$font-size-l: var(--font-size-l);
+$font-size-xl: var(--font-size-xl);
+$font-size-2xl: var(--font-size-2xl);
+$font-size-3xl: var(--font-size-3xl);
+$font-size-4xl: var(--font-size-4xl);
+
+////////////////////////
+$font-size-display-medium: var(--font-size-display-medium);
+$font-size-display-small: var(--font-size-display-small);
+$font-size-heading-large: var(--font-size-heading-large);
+$font-size-heading-medium: var(--font-size-heading-medium);
+$font-size-heading-small: var(--font-size-heading-small);
+$font-size-heading-extra-small: var(--font-size-heading-extra-small);
+$font-size-body-large: var(--font-size-body-large);
+$font-size-body-medium: var(--font-size-body-medium);
+$font-size-body-small: var(--font-size-body-small);
+$font-size-label-large: var(--font-size-label-large);
+$font-size-label-medium: var(--font-size-label-medium);
+$font-size-label-small: var(--font-size-label-small);
+$font-size-link-stylised: var(--font-size-link-stylised);
+$font-size-link-large: var(--font-size-link-large);
+$font-size-link-medium: var(--font-size-link-medium);
+$font-size-link-small: var(--font-size-link-small);
+
 ////////////////////////
 /// COlORS:
 ///////////////////////
@@ -168,9 +238,29 @@ $snwHeaderLink: 'snwHeaderLink';
 $snwFlyoutLink: 'snwFlyoutLink';
 $snwHeadingHero1: 'snwHeadingHero1';
 $snwHeadingHero2: 'snwHeadingHero2';
+
+// New Typography Variables
+$displayMedium: 'displayMedium';
+$displaySmall: 'displaySmall';
+$headingLarge: 'headingLarge';
+$headingMedium: 'headingMedium';
+$headingSmall: 'headingSmall';
+$headingExtraSmall: 'headingExtraSmall';
+$bodyLarge: 'bodyLarge';
+$bodyMedium: 'bodyMedium';
+$bodySmall: 'bodySmall';
+$labelLarge: 'labelLarge';
+$labelMedium: 'labelMedium';
+$labelSmall: 'labelSmall';
+$linkStylised: 'linkStylised';
+$linkLarge: 'linkLarge';
+$linkMedium: 'linkMedium';
+$linkSmall: 'linkSmall';
 $text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5,
   $title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
-  $snwHeaderLink, $snwHeadingHero1, $snwHeadingHero2;
+  $snwHeaderLink, $snwHeadingHero1, $snwHeadingHero2, $displayMedium, $displaySmall, $headingLarge, $headingMedium,
+  $headingSmall, $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall,
+  $linkStylised, $linkLarge, $linkMedium, $linkSmall;
 
 ////////////////////////
 /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts
@@ -188,142 +278,6 @@ $breakpoint-snw-mobile: 768px;
 ///////////////////////
 // @TODO: These tokens need to be aligned with the new values from the design system https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=7263-1361&node-type=canvas&m=dev
 // Once we update ObjectTile and other components will need to be updated to match the new token.
-:root {
-  --desktop-max-width: 120rem;
-  --quote-size: 1.5rem;
-  --quote-line-height: 2rem;
-  --heading-size1: 1.5rem;
-  --heading-line-height-size1: 1.75rem;
-  --heading-size2: 1.5rem;
-  --heading-line-height-size2: 1.75rem;
-  --heading-size3: 1.25rem;
-  --heading-line-height-size3: 1.5rem;
-  --heading-size4: 1rem;
-  --heading-line-height-size4: 1.25rem;
-  --heading-size5: 0.75rem;
-  --heading-line-height-size5: 1rem;
-  --string-size1: 1rem;
-  --string-line-height-size1: 1.25rem;
-  --string-size2: 0.75rem;
-  --string-line-height-size2: 1rem;
-  --string-size3: 0.5rem;
-  --string-line-height-size3: 0.75rem;
-  --body-size1: 1rem;
-  --body-line-height-size1: 1.5rem;
-  --body-size2: 0.75rem;
-  --body-line-height-size2: 1.25rem;
-  --body-size3: 0.5rem;
-  --body-line-height-size3: 1rem;
-  --label-size1: 1rem;
-  --label-size2: 0.75rem;
-  --label-size3: 0.56rem;
-  --label-size4: 0.56rem;
-  --link-label-size: 0.75rem;
-  --link-label-line-height: 0.75rem;
-  --button-label-size: 0.75rem;
-  --button-label-line-height: 1rem;
-  --button-tertiary-height: 1.75rem;
-  --badge-label-size: 0.5rem;
-  --badge-label-line-height: 0.67rem;
-  --snw-header-link-size: 1rem;
-  --snw-header-link-line-height: 1.5rem;
-  --snw-flyout-link-size: 1rem;
-  --snw-flyout-link-line-height: 1.75rem;
-  --snw-heading-hero-size1: 2rem;
-  --snw-heading-hero-line-height-size1: 2.375rem;
-  --snw-heading-hero-size2: 1.625rem;
-  --snw-heading-hero-line-height-size2: 1.9375rem;
-  --snw-note-size: 0.75rem;
-  --snw-note-line-height: 1rem;
-
-  @media (min-width: $breakpoint-md) {
-    --quote-size: 1.75rem;
-    --quote-line-height: 2.25rem;
-    --heading-size1: 1.75rem;
-    --heading-line-height-size1: 2rem;
-    --heading-size2: 1.75rem;
-    --heading-line-height-size2: 2rem;
-    --heading-size3: 1.5rem;
-    --heading-line-height-size3: 1.75rem;
-    --heading-size4: 1.25rem;
-    --heading-line-height-size4: 1.5rem;
-    --heading-size5: 1rem;
-    --heading-line-height-size5: 1.25rem;
-    --string-size1: 1.25rem;
-    --string-line-height-size1: 1.5rem;
-    --string-size2: 1rem;
-    --string-line-height-size2: 1.25rem;
-    --string-size3: 0.75rem;
-    --string-line-height-size3: 1rem;
-    --body-size1: 1.25rem;
-    --body-line-height-size1: 1.75rem;
-    --body-size2: 1rem;
-    --body-line-height-size2: 1.5rem;
-    --body-size3: 0.75rem;
-    --body-line-height-size3: 1.25rem;
-    --label-size1: 1.25rem;
-    --label-size2: 1rem;
-    --label-size3: 0.75rem;
-    --label-size4: 0.75rem;
-    --link-label-size: 1rem;
-    --link-label-line-height: 1rem;
-    --button-label-size: 1rem;
-    --button-label-line-height: 1.25rem;
-    --badge-label-size: 0.75rem;
-    --badge-label-line-height: 1rem;
-    --snw-header-link-size: 1rem;
-    --snw-header-link-line-height: 1.5rem;
-    --snw-flyout-link-size: 0.875rem;
-    --snw-flyout-link-line-height: 1.75rem;
-    --snw-heading-hero-size1: 2.375rem;
-    --snw-heading-hero-line-height-size1: 2.875rem;
-  }
-
-  @media (min-width: $breakpoint-lg) {
-    --snw-flyout-link-size: 0.875rem;
-    --snw-flyout-link-line-height: 1.75rem;
-  }
-
-  @media (min-width: $breakpoint-xl) {
-    --quote-size: 2rem;
-    --quote-line-height: 2.5rem;
-    --heading-size1: 2rem;
-    --heading-line-height-size1: 2.25rem;
-    --heading-size2: 2rem;
-    --heading-line-height-size2: 2.25rem;
-    --heading-size3: 1.75rem;
-    --heading-line-height-size3: 2rem;
-    --heading-size4: 1.5rem;
-    --heading-line-height-size4: 1.75rem;
-    --heading-size5: 1.25rem;
-    --heading-line-height-size5: 1.5rem;
-    --string-size1: 1.5rem;
-    --string-line-height-size1: 1.75rem;
-    --string-size2: 1.25rem;
-    --string-line-height-size2: 1.5rem;
-    --string-size3: 1rem;
-    --string-line-height-size3: 1.25rem;
-    --body-size1: 1.5rem;
-    --body-line-height-size1: 2rem;
-    --body-size2: 1.25rem;
-    --body-line-height-size2: 1.75rem;
-    --body-size3: 1rem;
-    --body-line-height-size3: 1.5rem;
-    --label-size1: 1.56rem;
-    --label-size2: 1.25rem;
-    --label-size3: 1rem;
-    --link-label-size: 1.25rem;
-    --link-label-line-height: 1.25rem;
-    --button-label-size: 1.25rem;
-    --button-label-line-height: 1.5rem;
-    --badge-label-size: 1rem;
-    --badge-label-line-height: 1.5rem;
-    --snw-header-link-size: 1.125rem;
-    --snw-header-link-line-height: 1.75rem;
-    --snw-flyout-link-size: 1.125rem;
-    --snw-flyout-link-line-height: 2.125rem;
-  }
-}
 
 // TITLE
 $title-size1: var(--heading-size1);
@@ -360,7 +314,7 @@ $string-size3: var(--string-size3);
 $string-line-height-size3: var(--string-line-height-size3);
 
 // LABELS
-$email-label-size: var(--label-size2);
+$email-label-size: var(--font-size-link-medium);
 $text-label-size: var(--label-size3);
 $badge-label-size: var(--label-size3);
 $link-label-size: var(--link-label-size);
@@ -385,46 +339,6 @@ $snw-heading-hero-line-height2: var(--snw-heading-hero-line-height-size2);
 
 // SNOWFLAKES
 $snowflake-menu-padding: 1.25rem;
-$snowflake-note-size: var(--snw-note-size);
-$snowflake-note-line-height: var(--snw-note-line-height);
-
-/* stylelint-disable-next-line no-duplicate-selectors */
-:root {
-  --snw-button-padding: 0.8125rem;
-  --spacing-micro: 0.25rem;
-  --spacing-xsm: 0.5rem;
-  --spacing-sm: 0.75rem;
-  --spacing-md: 1.75rem;
-  --spacing-lg: 2.75rem;
-  --spacing-xl: 3.75rem;
-  --spacing-xxl: 4.75rem;
-  --spacing-xxxl: 5.75rem;
-
-  @media (min-width: $breakpoint-md) {
-    --snw-button-padding: 0.8125rem;
-    --spacing-micro: 0.25rem;
-    --spacing-xsm: 0.5rem;
-    --spacing-sm: 1rem;
-    --spacing-md: 2rem;
-    --spacing-lg: 3rem;
-    --spacing-xl: 4rem;
-    --spacing-xxl: 5rem;
-    --spacing-xxxl: 6rem;
-  }
-
-  @media (min-width: $breakpoint-xl) {
-    --snw-button-padding: 0.813rem;
-    --spacing-micro: 0.5rem;
-    --spacing-xsm: 0.75rem;
-    --spacing-sm: 1.25rem;
-    --spacing-md: 2.25rem;
-    --spacing-lg: 3.25rem;
-    --spacing-xl: 4.25rem;
-    --spacing-xxl: 5.25rem;
-    --spacing-xxxl: 6.25rem;
-  }
-}
-
 $spacing-micro: var(--spacing-micro);
 $spacing-xsm: var(--spacing-xsm);
 $spacing-sm: var(--spacing-sm);
@@ -455,25 +369,6 @@ $margin-lg: var(--spacing-lg);
 $margin-xl: var(--spacing-xl);
 $margin-xxl: var(--spacing-xxl);
 
-////////////////////////
-/// HEADER TOKENS:
-///////////////////////
-/* stylelint-disable-next-line no-duplicate-selectors */
-:root {
-  --header-height: 56px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
-  --search-size: 2.625rem; // This should be calculated from the scaling text and scaling spacing tokens instead of hardcoding in case they change
-  --banner-height: 0px;
-
-  @media (min-width: $breakpoint-md) {
-    --header-height: 123px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
-  }
-
-  @media (min-width: $breakpoint-xl) {
-    --header-height: 135px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
-    --search-size: 2.875rem; // This should be calculated from the scaling text and scaling spacing tokens instead of hardcoding in case they change
-  }
-}
-
 ////////////////////////
 /// max-site-width TOKEN:
 ///////////////////////