@phillips/seldon 1.212.0 → 1.214.0-beta.0

package/dist/patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js

@@ -1,20 +1,27 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { getCommonProps as m } from "../../utils/index.js";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { getCommonProps as i } from "../../utils/index.js";
 import { TextVariants as n } from "../../components/Text/types.js";
 import l from "../../components/Text/Text.js";
 import "../../components/Link/types.js";
 import c from "../../components/Link/Link.js";
-const d = i(
-  ({ ctaText: r = "View Calendar", ctaLabel: a = "Browse Upcoming Sale", className: f, ...o }, p) => {
-    const { className: s } = m(o, "SaleHeaderBanner");
-    return /* @__PURE__ */ t("div", { className: `${s}__occurrence-details-text`, children: [
-      /* @__PURE__ */ e(l, { variant: n.string2, children: a }),
-      /* @__PURE__ */ e(c, { href: "/calendar", children: r })
-    ] });
+import d from "../../node_modules/classnames/index.js";
+const f = m(
+  ({ ctaText: a = "View Calendar", ctaLabel: o = "Browse Upcoming Sale", className: p, ...s }, u) => {
+    const { className: e } = i(s, "SaleHeaderBanner");
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        className: d(`${e}__occurrence-details-text`, `${e}__browse-auctions-text`),
+        children: [
+          /* @__PURE__ */ r(l, { variant: n.labelMedium, children: o }),
+          /* @__PURE__ */ r(c, { href: "/calendar", children: a })
+        ]
+      }
+    );
   }
 );
-d.displayName = "SaleHeaderBrowseAuctions";
+f.displayName = "SaleHeaderBrowseAuctions";
 export {
-  d as default
+  f as default
 };

package/dist/patterns/Social/Social.js

@@ -1,25 +1,25 @@
-import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import f from "../../node_modules/classnames/index.js";
-import { getCommonProps as p } from "../../utils/index.js";
-import d from "../../components/Button/Button.js";
-import { forwardRef as N } from "react";
-import { ButtonVariants as u } from "../../components/Button/types.js";
-import { TextVariants as h } from "../../components/Text/types.js";
-import x from "../../components/Text/Text.js";
-const b = N(
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import p from "../../node_modules/classnames/index.js";
+import { getCommonProps as u } from "../../utils/index.js";
+import N from "../../components/Button/Button.js";
+import { forwardRef as h } from "react";
+import { ButtonVariants as S } from "../../components/Button/types.js";
+import { TextVariants as t } from "../../components/Text/types.js";
+import m from "../../components/Text/Text.js";
+const b = h(
   ({
-    className: t,
-    children: e,
-    titleText: m = "Never Miss A Moment",
-    buttonText: s = "Subscribe To Our Newsletter",
-    onSubscribeClick: i,
+    className: e,
+    children: s,
+    titleText: i = "Never miss a moment",
+    buttonText: l = "Subscribe to our newsletter",
+    onSubscribeClick: n,
     ...o
-  }, n) => {
-    const { className: r, ...c } = p(o, "Social");
-    return /* @__PURE__ */ l("div", { ref: n, ...c, className: f(r, t), ...o, children: [
-      /* @__PURE__ */ a(x, { variant: h.heading4, className: `${r}__header`, children: m }),
-      /* @__PURE__ */ a(d, { onClick: i, variant: u.tertiary, className: `${r}__button`, children: s }),
-      e
+  }, c) => {
+    const { className: a, ...f } = u(o, "Social");
+    return /* @__PURE__ */ d("div", { ref: c, ...f, className: p(a, e), ...o, children: [
+      /* @__PURE__ */ r(m, { variant: t.headingSmall, className: `${a}__header`, children: i }),
+      /* @__PURE__ */ r(N, { onClick: n, variant: S.tertiary, className: `${a}__button`, children: /* @__PURE__ */ r(m, { variant: t.labelSmall, children: l }) }),
+      s
     ] });
   }
 );

package/dist/patterns/Subscribe/Subscribe.stories.d.ts

@@ -15,7 +15,6 @@ export declare const Playground: {
         blurb: string;
         subscriptionState: SubscriptionState;
         invalidText: string;
-        warn: boolean;
         successText: string;
     };
 };

package/dist/patterns/TextBanner/TextBanner.js

@@ -1,15 +1,15 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { getCommonProps as p } from "../../utils/index.js";
-import n from "../../node_modules/classnames/index.js";
-import { TextVariants as d } from "../../components/Text/types.js";
-import f from "../../components/Text/Text.js";
-const x = c(
-  ({ headerText: o, className: t, description: a, ...s }, m) => {
-    const { className: e, ...i } = p(s, "TextBanner");
-    return /* @__PURE__ */ r("header", { ...i, className: n(e, t), ref: m, ...s, children: /* @__PURE__ */ l("span", { className: n(`${e}__content-wrapper`), children: [
-      /* @__PURE__ */ r(f, { variant: d.snwHeadingHero1, children: o }),
-      a ? /* @__PURE__ */ r("p", { className: `${e}__text-description`, children: a }) : null
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { getCommonProps as d } from "../../utils/index.js";
+import s from "../../node_modules/classnames/index.js";
+import { TextVariants as f } from "../../components/Text/types.js";
+import t from "../../components/Text/Text.js";
+const x = p(
+  ({ headerText: n, className: o, description: r, ...m }, l) => {
+    const { className: e, ...c } = d(m, "TextBanner");
+    return /* @__PURE__ */ a("header", { ...c, className: s(e, o), ref: l, ...m, children: /* @__PURE__ */ i("span", { className: s(`${e}__content-wrapper`), children: [
+      /* @__PURE__ */ a(t, { className: `${e}__header-text`, variant: f.displaySmall, children: n }),
+      r ? /* @__PURE__ */ a(t, { element: "p", children: r }) : null
     ] }) });
   }
 );

package/dist/patterns/UserManagement/UserManagement.js

@@ -1,30 +1,30 @@
-import { jsx as o, Fragment as x, jsxs as s } from "react/jsx-runtime";
+import { jsx as o, Fragment as x, jsxs as m } from "react/jsx-runtime";
 import { forwardRef as A } from "react";
 import { getCommonProps as w, noOp as C } from "../../utils/index.js";
 import $ from "../../node_modules/classnames/index.js";
-import { AuthState as t } from "./types.js";
-import { TextVariants as i } from "../../components/Text/types.js";
-import r from "../../components/Text/Text.js";
-import m from "../../components/Icon/Icon.js";
+import { AuthState as a } from "./types.js";
+import { TextVariants as s } from "../../components/Text/types.js";
+import i from "../../components/Text/Text.js";
+import r from "../../components/Icon/Icon.js";
 const b = A(
   ({
     accountDetailsLinkComponent: l = "a",
     className: d,
     onLogin: g = C,
-    authState: a = t.LoggedOut,
+    authState: t = a.LoggedOut,
     loginLabel: h = "Login",
     accountLabel: u = "Account",
     href: f = "/account",
     disabled: e = !1,
     ...c
   }, p) => {
-    const { className: n, ...N } = w(c, "UserManagement"), _ = a === t.LoggedIn, L = a !== t.Loading;
-    return /* @__PURE__ */ o("div", { ...N, className: $(n, d), ...c, ref: p, children: L && /* @__PURE__ */ o(x, { children: _ ? /* @__PURE__ */ s(l, { className: `${n}__login`, href: f, disabled: e, children: [
-      /* @__PURE__ */ o(m, { icon: "Account", className: `${n}__account-icon`, height: "100%", width: "100%" }),
-      /* @__PURE__ */ o(r, { variant: i.body3, children: u })
-    ] }) : /* @__PURE__ */ s("button", { className: `${n}__login`, onClick: g, disabled: e, children: [
-      /* @__PURE__ */ o(m, { icon: "Account", className: `${n}__account-icon`, height: "100%", width: "100%" }),
-      /* @__PURE__ */ o(r, { variant: i.body3, children: h })
+    const { className: n, ...N } = w(c, "UserManagement"), _ = t === a.LoggedIn, L = t !== a.Loading;
+    return /* @__PURE__ */ o("div", { ...N, className: $(n, d), ...c, ref: p, children: L && /* @__PURE__ */ o(x, { children: _ ? /* @__PURE__ */ m(l, { className: `${n}__login`, href: f, disabled: e, children: [
+      /* @__PURE__ */ o(r, { icon: "Account", className: `${n}__account-icon`, height: "100%", width: "100%" }),
+      /* @__PURE__ */ o(i, { variant: s.bodySmall, children: u })
+    ] }) : /* @__PURE__ */ m("button", { className: `${n}__login`, onClick: g, disabled: e, children: [
+      /* @__PURE__ */ o(r, { icon: "Account", className: `${n}__account-icon`, height: "100%", width: "100%" }),
+      /* @__PURE__ */ o(i, { variant: s.bodySmall, children: h })
     ] }) }) });
   }
 );

package/dist/patterns/ViewingDetails/ViewingDetails.d.ts

@@ -27,6 +27,10 @@ export interface ViewingDetailsProps extends ComponentProps<'div'> {
      * Session Times data array
      */
     sessionTimes?: ViewingSessionProps[];
+    /**
+     * Viewing Times label text for Viewings Details
+     */
+    viewingTimesLabel?: string;
     /**
      * Viewing Times string array
      */

package/dist/patterns/ViewingDetails/ViewingDetails.js

@@ -1,48 +1,50 @@
-import { jsx as a, jsxs as _ } from "react/jsx-runtime";
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
 import v from "../../node_modules/classnames/index.js";
-import { forwardRef as b } from "react";
-import "../../components/Link/types.js";
-import g from "../../components/Link/Link.js";
-import { TextVariants as i } from "../../components/Text/types.js";
-import l from "../../components/Text/Text.js";
-import { getCommonProps as x } from "../../utils/index.js";
-const y = b(
+import { forwardRef as x } from "react";
+import { LinkVariants as u } from "../../components/Link/types.js";
+import V from "../../components/Link/Link.js";
+import { TextVariants as r } from "../../components/Text/types.js";
+import i from "../../components/Text/Text.js";
+import { getCommonProps as b } from "../../utils/index.js";
+const k = x(
   ({
-    className: p,
-    children: m,
-    label: s,
-    sessionTimesLabel: o,
-    sessionTimes: n,
-    viewingTimes: t,
-    location: c,
-    mapLink: d,
-    onClose: V,
-    linkElement: N = g,
-    ...h
+    className: N,
+    children: s,
+    label: p,
+    sessionTimesLabel: t,
+    sessionTimes: m,
+    viewingTimes: n,
+    viewingTimesLabel: c,
+    location: d,
+    mapLink: o,
+    onClose: M,
+    linkElement: $ = V,
+    ..._
   }, f) => {
-    const { className: e, ...$ } = x(h, "ViewingDetails");
-    return /* @__PURE__ */ a("div", { ...$, ...h, className: v(e, p), ref: f, children: /* @__PURE__ */ _("div", { className: `${e}__content`, children: [
-      m && /* @__PURE__ */ a("div", { className: `${e}__children`, children: m }),
-      o && /* @__PURE__ */ a(l, { variant: i.heading4, children: o }),
-      n && n.length > 0 && n.map((r) => /* @__PURE__ */ _(
+    const { className: a, ...g } = b(_, "ViewingDetails");
+    return /* @__PURE__ */ e("div", { ...g, ..._, className: v(a, N), ref: f, children: /* @__PURE__ */ h("div", { className: `${a}__content`, children: [
+      /* @__PURE__ */ e(i, { variant: r.headingMedium, className: `${a}__title`, children: p }),
+      s && /* @__PURE__ */ e("div", { className: `${a}__children`, children: s }),
+      t && /* @__PURE__ */ e(i, { variant: r.headingSmall, className: `${a}__heading`, children: t }),
+      m && m.length > 0 && m.map((l) => /* @__PURE__ */ h(
         "div",
         {
-          className: `${e}__session`,
+          className: `${a}__session`,
           children: [
-            r.sessionLabel && /* @__PURE__ */ a(l, { variant: i.heading5, className: `${e}__label`, children: r.sessionLabel }),
-            r.sessionTime && /* @__PURE__ */ a(l, { variant: i.body2, className: `${e}__text`, children: r.sessionTime })
+            l.sessionLabel && /* @__PURE__ */ e(i, { variant: r.labelMedium, className: `${a}__label`, children: l.sessionLabel }),
+            l.sessionTime && /* @__PURE__ */ e(i, { className: `${a}__text`, children: l.sessionTime })
           ]
         },
-        `${r.sessionLabel ?? ""}-${r.sessionTime ?? ""}`
+        `${l.sessionLabel ?? ""}-${l.sessionTime ?? ""}`
       )),
-      s && /* @__PURE__ */ a(l, { variant: i.heading4, children: s }),
-      t && t.length > 0 && t.map((r) => /* @__PURE__ */ a(l, { variant: i.body2, className: `${e}__label`, children: r }, r)),
-      c && /* @__PURE__ */ a(l, { variant: i.body2, className: `${e}__location`, children: c }),
-      d && /* @__PURE__ */ a(l, { variant: i.body2, className: `${e}__map-link`, children: /* @__PURE__ */ a(N, { href: d, children: "(Map)" }) })
+      c && /* @__PURE__ */ e(i, { variant: r.headingSmall, className: `${a}__heading`, children: c }),
+      n && n.length > 0 && n.map((l) => /* @__PURE__ */ e(i, { className: `${a}__viewing-time`, children: l }, l)),
+      d && /* @__PURE__ */ e(i, { className: `${a}__location`, children: d }),
+      o && /* @__PURE__ */ e(i, { className: `${a}__map-link`, children: /* @__PURE__ */ e($, { href: o, variant: u.linkMedium, children: "(Map)" }) })
     ] }) });
   }
 );
-y.displayName = "ViewingDetails";
+k.displayName = "ViewingDetails";
 export {
-  y as default
+  k as default
 };

package/dist/patterns/ViewingDetails/ViewingDetails.stories.d.ts

@@ -14,6 +14,7 @@ export declare const Playground: {
             sessionTime: string;
         }[];
         viewingTimes: string[];
+        viewingTimesLabel: string;
         location: string;
         mapLink: string;
     };
@@ -34,6 +35,7 @@ export declare const CenterAlignText: {
             sessionTime: string;
         }[];
         viewingTimes: string[];
+        viewingTimesLabel: string;
         location: string;
         mapLink: string;
     };

package/dist/patterns/ViewingDetails/ViewingDetailsMock.d.ts

@@ -7,6 +7,7 @@ export declare const viewingDetailsProps: {
         sessionTime: string;
     }[];
     viewingTimes: string[];
+    viewingTimesLabel: string;
     location: string;
     mapLink: string;
 };
@@ -24,6 +25,7 @@ export declare const viewingDetailsWithChildrenProps: {
         sessionTime: string;
     }[];
     viewingTimes: string[];
+    viewingTimesLabel: string;
     location: string;
     mapLink: string;
 };

package/dist/scss/_reset.scss

@@ -58,3 +58,7 @@ li {
 #root {
   isolation: isolate;
 }
+
+label {
+  cursor: inherit;
+}

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);
+  }
 }