@phillips/seldon 1.213.0 → 1.214.0-beta.1

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:
 ///////////////////////

package/dist/scss/_vars.scss.js

@@ -1,6 +1,76 @@
-const e = `// prefix
+const n = `// 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:
 ///////////////////////
@@ -527,5 +422,5 @@ $radius-2xl: 24px;
 $radius-3xl: 40px;
 `;
 export {
-  e as default
+  n as default
 };