@entur/typography 1.9.13 → 1.10.0-beta.10

package/dist/styles.css

@@ -1,3 +1,817 @@
+@import '~modern-normalize/modern-normalize.css';
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+[data-color-mode=light],
+:root {
+  --basecolors-frame-contrast: #181c56;
+  --basecolors-frame-contrastalt: #393d79;
+  --basecolors-frame-contrastalt-2: #292b6a;
+  --basecolors-frame-default: #ffffff;
+  --basecolors-frame-elevated: #ffffff;
+  --basecolors-frame-elevatedalt: #f6f6f9;
+  --basecolors-frame-subdued: #d9dae8;
+  --basecolors-frame-tint: #f6f6f9;
+  --basecolors-shape-accent: #181c56;
+  --basecolors-shape-bicycle-contrast: #00db9b;
+  --basecolors-shape-bicycle-default: #388f76;
+  --basecolors-shape-bus-contrast: #ff6392;
+  --basecolors-shape-bus-default: #c5044e;
+  --basecolors-shape-cableway-contrast: #b482fb;
+  --basecolors-shape-cableway-default: #78469a;
+  --basecolors-shape-disabled: #6e6f73;
+  --basecolors-shape-disabledalt: #b6b8ba;
+  --basecolors-shape-ferry-contrast: #6fdfff;
+  --basecolors-shape-ferry-default: #0c6693;
+  --basecolors-shape-funicular-contrast: #b482fb;
+  --basecolors-shape-funicular-default: #78469a;
+  --basecolors-shape-helicopter-contrast: #fbafea;
+  --basecolors-shape-helicopter-default: #800664;
+  --basecolors-shape-highlight: #ff5959;
+  --basecolors-shape-light: #ffffff;
+  --basecolors-shape-mask: #ffffff;
+  --basecolors-shape-maskalt: #ffffff;
+  --basecolors-shape-metro-contrast: #f08901;
+  --basecolors-shape-metro-default: #bf5826;
+  --basecolors-shape-mobility-contrast: #00db9b;
+  --basecolors-shape-mobility-default: #388f76;
+  --basecolors-shape-plane-contrast: #fbafea;
+  --basecolors-shape-plane-default: #800664;
+  --basecolors-shape-subdued: #626493;
+  --basecolors-shape-subduedalt: #d9dae8;
+  --basecolors-shape-taxi-contrast: #ffe082;
+  --basecolors-shape-taxi-default: #3d3e40;
+  --basecolors-shape-train-contrast: #42a5f5;
+  --basecolors-shape-train-default: #00367f;
+  --basecolors-shape-tram-contrast: #b482fb;
+  --basecolors-shape-tram-default: #78469a;
+  --basecolors-shape-walk-contrast: #8284ab;
+  --basecolors-shape-walk-default: #8d8e9c;
+  --basecolors-shape-airportlinkbus-contrast: #fbafea;
+  --basecolors-shape-airportlinkbus-default: #800664;
+  --basecolors-shape-airportlinkrail-contrast: #fbafea;
+  --basecolors-shape-airportlinkrail-default: #800664;
+  --basecolors-stroke-contrast: #aeb7e2;
+  --basecolors-stroke-default: #181c56;
+  --basecolors-stroke-disabled: #949699;
+  --basecolors-stroke-focus-contrast: #aeb7e2;
+  --basecolors-stroke-focus-standard: #181c56;
+  --basecolors-stroke-highlight: #ff5959;
+  --basecolors-stroke-light: #ffffff;
+  --basecolors-stroke-subdued: #8284ab;
+  --basecolors-stroke-subduedalt: #e3e6e8;
+  --basecolors-text-accent: #181c56;
+  --basecolors-text-disabled: #6e6f73;
+  --basecolors-text-disabledalt: #b6b8ba;
+  --basecolors-text-highlight: #ff5959;
+  --basecolors-text-light: #ffffff;
+  --basecolors-text-subdued: #626493;
+  --basecolors-text-subduedalt: #d9dae8;
+}
+
+[data-color-mode=dark] {
+  --basecolors-frame-contrast: #212233;
+  --basecolors-frame-contrastalt: #141527;
+  --basecolors-frame-contrastalt-2: #08091c;
+  --basecolors-frame-default: #08091c;
+  --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
+  --basecolors-frame-elevatedalt: #464755;
+  --basecolors-frame-subdued: #2d2e3e;
+  --basecolors-frame-tint: #141527;
+  --basecolors-shape-accent: #e5e5e9;
+  --basecolors-shape-bicycle-contrast: #4db295;
+  --basecolors-shape-bicycle-default: #4db295;
+  --basecolors-shape-bus-contrast: #ef7398;
+  --basecolors-shape-bus-default: #ef7398;
+  --basecolors-shape-cableway-contrast: #b898e5;
+  --basecolors-shape-cableway-default: #b898e5;
+  --basecolors-shape-disabled: #b6b8ba;
+  --basecolors-shape-disabledalt: #b3b4bd;
+  --basecolors-shape-ferry-contrast: #8ccfe2;
+  --basecolors-shape-ferry-default: #8ccfe2;
+  --basecolors-shape-funicular-contrast: #b898e5;
+  --basecolors-shape-funicular-default: #b898e5;
+  --basecolors-shape-helicopter-contrast: #f2b8e5;
+  --basecolors-shape-helicopter-default: #f2b8e5;
+  --basecolors-shape-highlight: #ff9494;
+  --basecolors-shape-light: #e5e5e9;
+  --basecolors-shape-mask: #2d2e3e;
+  --basecolors-shape-maskalt: #393a49;
+  --basecolors-shape-metro-contrast: #dd973c;
+  --basecolors-shape-metro-default: #dd973c;
+  --basecolors-shape-mobility-contrast: #4db295;
+  --basecolors-shape-mobility-default: #4db295;
+  --basecolors-shape-plane-contrast: #f2b8e5;
+  --basecolors-shape-plane-default: #f2b8e5;
+  --basecolors-shape-subdued: #b3b4bd;
+  --basecolors-shape-subduedalt: #b3b4bd;
+  --basecolors-shape-taxi-contrast: #ffe082;
+  --basecolors-shape-taxi-default: #ffe082;
+  --basecolors-shape-train-contrast: #60a2d7;
+  --basecolors-shape-train-default: #60a2d7;
+  --basecolors-shape-tram-contrast: #b898e5;
+  --basecolors-shape-tram-default: #b898e5;
+  --basecolors-shape-walk-contrast: #8d8e9c;
+  --basecolors-shape-walk-default: #8d8e9c;
+  --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
+  --basecolors-shape-airportlinkbus-default: #f2b8e5;
+  --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
+  --basecolors-shape-airportlinkrail-default: #f2b8e5;
+  --basecolors-stroke-contrast: #aeb7e2;
+  --basecolors-stroke-default: #b3b4bd;
+  --basecolors-stroke-disabled: #e3e6e8;
+  --basecolors-stroke-focus-contrast: #aeb7e2;
+  --basecolors-stroke-focus-standard: #aeb7e2;
+  --basecolors-stroke-highlight: #ff9494;
+  --basecolors-stroke-light: #b3b4bd;
+  --basecolors-stroke-subdued: #81828f;
+  --basecolors-stroke-subduedalt: #949699;
+  --basecolors-text-accent: #e5e5e9;
+  --basecolors-text-disabled: #b6b8ba;
+  --basecolors-text-disabledalt: #b6b8ba;
+  --basecolors-text-highlight: #ff9494;
+  --basecolors-text-light: #e5e5e9;
+  --basecolors-text-subdued: #b3b4bd;
+  --basecolors-text-subduedalt: #b3b4bd;
+}
+
+/*
+ * Typography Display Modes
+ * 
+ * This system allows you to control typography scaling based on display size.
+ * Use the display-mode attribute to switch between different typography scales:
+ * 
+ * - Default/Mobile: [display-mode='mobile'] or no attribute (responsive)
+ * - Large Display: [display-mode='large'] for big screens, kiosks, etc.
+ * 
+ * Usage:
+ * <html display-mode="large"> or <div display-mode="large">
+ * 
+ * The system automatically handles responsive behavior within each mode.
+ */
+/* Primitive size */
+:root {
+  /* Mode 1 */
+  /* number */
+  --size-0: 0rem;
+  --size-1: 0.125rem;
+  --size-2: 0.25rem;
+  --size-3: 0.5rem;
+  --size-4: 0.75rem;
+  --size-5: 0.875rem;
+  --size-6: 1rem;
+  --size-7: 1.25rem;
+  --size-8: 1.5rem;
+  --size-9: 1.75rem;
+  --size-10: 2rem;
+  --size-11: 2.25rem;
+  --size-12: 2.5rem;
+  --size-13: 2.75rem;
+  --size-14: 3rem;
+  --size-15: 3.25rem;
+  --size-16: 3.5rem;
+  --size-17: 4rem;
+  --size-18: 4.5rem;
+  --size-19: 5rem;
+  --size-20: 5.5rem;
+  --size-21: 6rem;
+  --size-22: 6.5rem;
+  --size-23: 7rem;
+  --size-24: 7.5rem;
+  --size-25: 8.5rem;
+  --size-26: 10rem;
+}
+
+:root,
+[display-mode=mobile] {
+  /* Mobile/Default mode - number */
+  --font-line-height-body-lg: var(--size-8);
+  --font-line-height-body-m: var(--size-8);
+  --font-line-height-body-s: var(--size-7);
+  --font-line-height-body-xl: var(--size-9);
+  --font-line-height-body-xs: var(--size-6);
+  --font-line-height-heading-2xl: var(--size-10);
+  --font-line-height-heading-lg: var(--size-8);
+  --font-line-height-heading-m: var(--size-7);
+  --font-line-height-heading-s: var(--size-6);
+  --font-line-height-heading-xl: var(--size-9);
+  --font-line-height-heading-xs: var(--size-6);
+  --font-paragraph-spacing-body-lg: var(--size-7);
+  --font-paragraph-spacing-body-m: var(--size-6);
+  --font-paragraph-spacing-body-s: var(--size-4);
+  --font-paragraph-spacing-body-xl: var(--size-7);
+  --font-paragraph-spacing-body-xs: var(--size-3);
+  --font-paragraph-spacing-heading-2xl: var(--size-6);
+  --font-paragraph-spacing-heading-lg: var(--size-4);
+  --font-paragraph-spacing-heading-m: var(--size-4);
+  --font-paragraph-spacing-heading-s: var(--size-3);
+  --font-paragraph-spacing-heading-xl: var(--size-6);
+  --font-paragraph-spacing-heading-xs: var(--size-3);
+  --font-size-body-lg: var(--size-6);
+  --font-size-body-m: var(--size-6);
+  --font-size-body-s: var(--size-5);
+  --font-size-body-xl: var(--size-7);
+  --font-size-body-xs: var(--size-4);
+  --font-size-heading-2xl: var(--size-9);
+  --font-size-heading-lg: var(--size-7);
+  --font-size-heading-m: var(--size-6);
+  --font-size-heading-s: var(--size-5);
+  --font-size-heading-xl: var(--size-8);
+  --font-size-heading-xs: var(--size-4);
+  /* string */
+  --font-family-nationale: Nationale;
+  --font-weight-body: 500;
+  --font-weight-heading: 600;
+}
+@media screen and (min-width: 50rem) {
+  :root,
+  [display-mode=mobile] {
+    /* Desktop override for mobile mode - number */
+    --font-line-height-body-lg: var(--size-9);
+    --font-line-height-body-m: var(--size-8);
+    --font-line-height-body-s: var(--size-7);
+    --font-line-height-body-xl: var(--size-10);
+    --font-line-height-body-xs: var(--size-6);
+    --font-line-height-heading-2xl: var(--size-13);
+    --font-line-height-heading-lg: var(--size-9);
+    --font-line-height-heading-m: var(--size-8);
+    --font-line-height-heading-s: var(--size-7);
+    --font-line-height-heading-xl: var(--size-11);
+    --font-line-height-heading-xs: var(--size-6);
+    --font-paragraph-spacing-body-lg: var(--size-8);
+    --font-paragraph-spacing-body-m: var(--size-6);
+    --font-paragraph-spacing-body-s: var(--size-4);
+    --font-paragraph-spacing-body-xl: var(--size-8);
+    --font-paragraph-spacing-body-xs: var(--size-3);
+    --font-paragraph-spacing-heading-2xl: var(--size-8);
+    --font-paragraph-spacing-heading-lg: var(--size-6);
+    --font-paragraph-spacing-heading-m: var(--size-4);
+    --font-paragraph-spacing-heading-s: var(--size-4);
+    --font-paragraph-spacing-heading-xl: var(--size-7);
+    --font-paragraph-spacing-heading-xs: var(--size-3);
+    --font-size-body-lg: var(--size-7);
+    --font-size-body-m: var(--size-6);
+    --font-size-body-s: var(--size-5);
+    --font-size-body-xl: var(--size-8);
+    --font-size-body-xs: var(--size-4);
+    --font-size-heading-2xl: var(--size-12);
+    --font-size-heading-lg: var(--size-8);
+    --font-size-heading-m: var(--size-7);
+    --font-size-heading-s: var(--size-6);
+    --font-size-heading-xl: var(--size-10);
+    --font-size-heading-xs: var(--size-5);
+    /* string */
+    --font-family-nationale: Nationale;
+    --font-weight-body: 500;
+    --font-weight-heading: 600;
+  }
+}
+
+[display-mode=large] {
+  /* Large display mode - optimized for big screens - number */
+  --font-line-height-body-lg: var(--size-16);
+  --font-line-height-body-m: var(--size-13);
+  --font-line-height-body-s: var(--size-10);
+  --font-line-height-body-xl: var(--size-17);
+  --font-line-height-body-xs: var(--size-9);
+  --font-line-height-heading-2xl: var(--size-19);
+  --font-line-height-heading-lg: var(--size-16);
+  --font-line-height-heading-m: var(--size-13);
+  --font-line-height-heading-s: var(--size-11);
+  --font-line-height-heading-xl: var(--size-18);
+  --font-line-height-heading-xs: var(--size-9);
+  --font-paragraph-spacing-body-lg: var(--size-12);
+  --font-paragraph-spacing-body-m: var(--size-10);
+  --font-paragraph-spacing-body-s: var(--size-8);
+  --font-paragraph-spacing-body-xl: var(--size-14);
+  --font-paragraph-spacing-body-xs: var(--size-7);
+  --font-paragraph-spacing-heading-2xl: var(--size-11);
+  --font-paragraph-spacing-heading-lg: var(--size-8);
+  --font-paragraph-spacing-heading-m: var(--size-7);
+  --font-paragraph-spacing-heading-s: var(--size-6);
+  --font-paragraph-spacing-heading-xl: var(--size-10);
+  --font-paragraph-spacing-heading-xs: var(--size-4);
+  --font-size-body-lg: var(--size-12);
+  --font-size-body-m: var(--size-10);
+  --font-size-body-s: var(--size-8);
+  --font-size-body-xl: var(--size-14);
+  --font-size-body-xs: var(--size-7);
+  --font-size-heading-2xl: var(--size-18);
+  --font-size-heading-lg: var(--size-14);
+  --font-size-heading-m: var(--size-12);
+  --font-size-heading-s: var(--size-10);
+  --font-size-heading-xl: var(--size-17);
+  --font-size-heading-xs: var(--size-8);
+  /* string */
+  --font-family-nationale: Nationale;
+  --font-weight-body: 500;
+  --font-weight-heading: 600;
+}
+
+[data-color-mode=light],
+[data-color-mode=dark],
+:root {
+  --eds-typography: 1;
+  --primary-background-color: var(--basecolors-frame-default);
+  --primary-text-color: var(--components-typography-basetext-standard-text-accent);
+  --primary-label-color: var(--components-typography-label-standard-text-accent);
+  --eds-font-family: "Nationale", Arial, "Gotham Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+    "Helvetica Neue", sans-serif;
+  color: var(--primary-text-color);
+  background-color: #ffffff;
+  background-color: var(--primary-background-color);
+  font-family: "Nationale", Arial, "Gotham Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-weight: 500;
+  font-weight: var(--font-weight-body);
+  font-size: 1rem;
+  font-size: var(--font-size-body-m);
+  line-height: 1.375rem;
+}
+[data-color-mode=light] .eds-contrast,
+[data-color-mode=dark] .eds-contrast,
+:root .eds-contrast {
+  --primary-background-color: var(--basecolors-frame-contrast);
+  --primary-text-color: var(--components-typography-basetext-contrast-text-accent);
+  --primary-label-color: var(--components-typography-label-contrast-text-accent);
+  color: var(--primary-text-color);
+  background-color: #181c56;
+  background-color: var(--primary-background-color);
+}
+@media screen and (min-width: 50rem) {
+  [data-color-mode=light],
+  [data-color-mode=dark],
+  :root {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+  font-weight: inherit;
+}
+
+.eds-heading {
+  color: var(--primary-text-color);
+  font-weight: 600;
+  font-weight: var(--font-weight-heading);
+  -webkit-font-smoothing: antialiased;
+  margin: 0;
+}
+.eds-heading--2xl {
+  font-size: 1.75rem;
+  font-size: var(--font-size-heading-2xl);
+  line-height: 2rem;
+  line-height: var(--font-line-height-heading-2xl);
+}
+.eds-heading--xl {
+  font-size: 1.5rem;
+  font-size: var(--font-size-heading-xl);
+  line-height: 1.75rem;
+  line-height: var(--font-line-height-heading-xl);
+}
+.eds-heading--lg {
+  font-size: 1.25rem;
+  font-size: var(--font-size-heading-lg);
+  line-height: 1.5rem;
+  line-height: var(--font-line-height-heading-lg);
+}
+.eds-heading--m {
+  font-size: 1rem;
+  font-size: var(--font-size-heading-m);
+  line-height: 1.25rem;
+  line-height: var(--font-line-height-heading-m);
+}
+.eds-heading--s {
+  font-size: 0.875rem;
+  font-size: var(--font-size-heading-s);
+  line-height: 1rem;
+  line-height: var(--font-line-height-heading-s);
+}
+.eds-heading--xs {
+  font-size: 0.75rem;
+  font-size: var(--font-size-heading-xs);
+  line-height: 1rem;
+  line-height: var(--font-line-height-heading-xs);
+}
+.eds-heading--title-1 {
+  font-size: 1.75rem;
+  font-size: var(--font-size-heading-2xl);
+  line-height: 2rem;
+  line-height: var(--font-line-height-heading-2xl);
+  margin-bottom: 0.75rem;
+  margin-bottom: var(--font-paragraph-spacing-heading-lg);
+}
+.eds-heading--title-2 {
+  font-size: 1.5rem;
+  font-size: var(--font-size-heading-xl);
+  line-height: 1.75rem;
+  line-height: var(--font-line-height-heading-xl);
+  margin-top: 1rem;
+  margin-top: var(--font-paragraph-spacing-heading-xl);
+  margin-bottom: 1rem;
+  margin-bottom: var(--font-paragraph-spacing-heading-xl);
+}
+.eds-heading--subtitle-1 {
+  font-size: 1.25rem;
+  font-size: var(--font-size-heading-lg);
+  line-height: 1.5rem;
+  line-height: var(--font-line-height-heading-lg);
+  margin-top: 0.75rem;
+  margin-top: var(--font-paragraph-spacing-heading-lg);
+  margin-bottom: 0.75rem;
+  margin-bottom: var(--font-paragraph-spacing-heading-lg);
+}
+.eds-heading--subtitle-2 {
+  font-size: 1rem;
+  font-size: var(--font-size-heading-m);
+  line-height: 1.25rem;
+  line-height: var(--font-line-height-heading-m);
+  margin-top: 1rem;
+  margin-top: var(--font-paragraph-spacing-heading-xl);
+  margin-bottom: 0.75rem;
+  margin-bottom: var(--font-paragraph-spacing-heading-m);
+}
+.eds-heading--section-1 {
+  font-size: 0.875rem;
+  font-size: var(--font-size-heading-s);
+  line-height: 1rem;
+  line-height: var(--font-line-height-heading-s);
+  margin-top: 0.75rem;
+  margin-top: var(--font-paragraph-spacing-heading-lg);
+  margin-bottom: 0.5rem;
+  margin-bottom: var(--font-paragraph-spacing-heading-s);
+}
+.eds-heading--section-2 {
+  font-size: 0.875rem;
+  font-size: var(--font-size-heading-s);
+  line-height: 1rem;
+  line-height: var(--font-line-height-heading-s);
+  margin-top: 0.75rem;
+  margin-top: var(--font-paragraph-spacing-heading-lg);
+  margin-bottom: 0.5rem;
+  margin-bottom: var(--font-paragraph-spacing-heading-xs);
+}
+.eds-heading--spacing-none {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.eds-heading--spacing-xs2 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.eds-heading--spacing-xs2-top {
+  margin-top: 0.25rem;
+  margin-bottom: 0;
+}
+.eds-heading--spacing-xs2-bottom {
+  margin-top: 0;
+  margin-bottom: 0.25rem;
+}
+.eds-heading--spacing-xs {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.eds-heading--spacing-xs-top {
+  margin-top: 0.5rem;
+  margin-bottom: 0;
+}
+.eds-heading--spacing-xs-bottom {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.eds-heading--spacing-sm {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+.eds-heading--spacing-sm-top {
+  margin-top: 0.75rem;
+  margin-bottom: 0;
+}
+.eds-heading--spacing-sm-bottom {
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+}
+.eds-heading--spacing-md {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+.eds-heading--spacing-md-top {
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+.eds-heading--spacing-md-bottom {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+.eds-heading--spacing-lg {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+.eds-heading--spacing-lg-top {
+  margin-top: 1.5rem;
+  margin-bottom: 0;
+}
+.eds-heading--spacing-lg-bottom {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+}
+.eds-heading--spacing-xl {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+.eds-heading--spacing-xl-top {
+  margin-top: 2rem;
+  margin-bottom: 0;
+}
+.eds-heading--spacing-xl-bottom {
+  margin-top: 0;
+  margin-bottom: 2rem;
+}
+
+.eds-text {
+  color: var(--primary-text-color);
+  font-weight: 500;
+  font-weight: var(--font-weight-body);
+  margin: 0;
+}
+.eds-text--xs {
+  font-size: 0.75rem;
+  font-size: var(--font-size-body-xs);
+  line-height: 1rem;
+  line-height: var(--font-line-height-body-xs);
+}
+.eds-text--s {
+  font-size: 0.875rem;
+  font-size: var(--font-size-body-s);
+  line-height: 1.25rem;
+  line-height: var(--font-line-height-body-s);
+}
+.eds-text--m {
+  font-size: 1rem;
+  font-size: var(--font-size-body-m);
+  line-height: 1.5rem;
+  line-height: var(--font-line-height-body-m);
+}
+.eds-text--xl {
+  font-size: 1.25rem;
+  font-size: var(--font-size-body-xl);
+  line-height: 1.75rem;
+  line-height: var(--font-line-height-body-xl);
+}
+.eds-text--leading {
+  font-size: 1.25rem;
+  font-size: var(--font-size-body-xl);
+  line-height: 1.75rem;
+  line-height: var(--font-line-height-body-xl);
+  margin: 1.25rem 0;
+  margin: var(--font-paragraph-spacing-body-xl) 0;
+}
+.eds-text--quote {
+  font-size: 1rem;
+  font-size: var(--font-size-body-lg);
+  line-height: 1.5rem;
+  line-height: var(--font-line-height-body-lg);
+  margin: 1.25rem 0;
+  margin: var(--font-paragraph-spacing-body-lg) 0;
+}
+.eds-text--paragraph {
+  font-size: 1rem;
+  font-size: var(--font-size-body-m);
+  line-height: 1.5rem;
+  line-height: var(--font-line-height-body-m);
+  margin: 1rem 0;
+  margin: var(--font-paragraph-spacing-body-m) 0;
+}
+.eds-text--sub-paragraph {
+  font-size: 0.875rem;
+  font-size: var(--font-size-body-s);
+  line-height: 1.25rem;
+  line-height: var(--font-line-height-body-s);
+  margin: 0.75rem 0;
+  margin: var(--font-paragraph-spacing-body-s) 0;
+}
+.eds-text--caption {
+  font-size: 0.75rem;
+  font-size: var(--font-size-body-xs);
+  line-height: 1rem;
+  line-height: var(--font-line-height-body-xs);
+  margin-bottom: 0.5rem;
+  margin-bottom: var(--font-paragraph-spacing-body-xs);
+}
+.eds-text--label {
+  font-size: 1rem;
+  font-size: var(--font-size-body-m);
+  line-height: 1.5rem;
+  line-height: var(--font-line-height-body-m);
+  margin-bottom: 0.5rem;
+  margin-bottom: var(--font-paragraph-spacing-body-xs);
+  font-weight: 600;
+}
+.eds-text--sublabel {
+  font-size: 0.875rem;
+  font-size: var(--font-size-body-s);
+  line-height: 1.25rem;
+  line-height: var(--font-line-height-body-s);
+  margin-bottom: 0.5rem;
+  margin-bottom: var(--font-paragraph-spacing-body-xs);
+  font-weight: 600;
+}
+.eds-text--overline {
+  font-size: 0.75rem;
+  font-size: var(--font-size-body-xs);
+  line-height: 1rem;
+  line-height: var(--font-line-height-body-xs);
+  margin-top: 0.5rem;
+  margin-top: var(--font-paragraph-spacing-body-xs);
+  margin-bottom: 1rem;
+  margin-bottom: var(--font-paragraph-spacing-body-m);
+  font-weight: 500;
+  text-transform: uppercase;
+}
+.eds-text--emphasized {
+  font-style: italic;
+  font-weight: 500;
+}
+.eds-text--code-text, .eds-text--preformatted-text {
+  background-color: var(--components-typography-codetext-standard-fill);
+  border: 0.0625rem solid var(--components-typography-codetext-standard-border);
+  border-radius: 0.25rem;
+  color: var(--components-typography-codetext-standard-text);
+  font-family: "Monaco", monospace;
+  font-size: 0.875rem;
+}
+.eds-text--preformatted-text {
+  padding: 1rem;
+  white-space: pre-wrap;
+  word-break: keep-all;
+}
+.eds-text--weight-400, .eds-text--weight-regular {
+  font-weight: 400;
+}
+.eds-text--weight-500, .eds-text--weight-medium {
+  font-weight: 500;
+}
+.eds-text--weight-600, .eds-text--weight-semibold {
+  font-weight: 600;
+}
+.eds-text--weight-700, .eds-text--weight-bold {
+  font-weight: 700;
+}
+.eds-text--spacing-none {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.eds-text--spacing-xs2 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.eds-text--spacing-xs2-top {
+  margin-top: 0.25rem;
+  margin-bottom: 0;
+}
+.eds-text--spacing-xs2-bottom {
+  margin-top: 0;
+  margin-bottom: 0.25rem;
+}
+.eds-text--spacing-xs {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.eds-text--spacing-xs-top {
+  margin-top: 0.5rem;
+  margin-bottom: 0;
+}
+.eds-text--spacing-xs-bottom {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.eds-text--spacing-sm {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+.eds-text--spacing-sm-top {
+  margin-top: 0.75rem;
+  margin-bottom: 0;
+}
+.eds-text--spacing-sm-bottom {
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+}
+.eds-text--spacing-md {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+.eds-text--spacing-md-top {
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+.eds-text--spacing-md-bottom {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+.eds-text--spacing-lg {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+.eds-text--spacing-lg-top {
+  margin-top: 1.5rem;
+  margin-bottom: 0;
+}
+.eds-text--spacing-lg-bottom {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+}
+.eds-text--spacing-xl {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+.eds-text--spacing-xl-top {
+  margin-top: 2rem;
+  margin-bottom: 0;
+}
+.eds-text--spacing-xl-bottom {
+  margin-top: 0;
+  margin-bottom: 2rem;
+}
+.eds-text--link {
+  color: var(--primary-text-color);
+}
+.eds-text--link, .eds-text--link:link, .eds-text--link:visited {
+  font-size: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  position: relative;
+  background-image: linear-gradient(120deg, var(--primary-text-color) 0%, var(--primary-text-color) 100%);
+  background-repeat: no-repeat;
+  background-size: 100% 0.125rem;
+  background-position: 0 100%;
+}
+.eds-text--link:hover {
+  animation: eds-link-underline 0.3s ease-in;
+  cursor: pointer;
+}
+@keyframes eds-link-underline {
+  from {
+    background-size: 0% 0.125rem;
+  }
+  to {
+    background-size: 100% 0.125rem;
+  }
+}
+.eds-text--link:focus-visible {
+  outline: 2px solid #181c56;
+  outline-color: #181c56;
+  outline-color: var(--basecolors-stroke-focus-standard);
+  outline-offset: 0.125rem;
+}
+.eds-contrast .eds-text--link:focus-visible {
+  outline-color: #aeb7e2;
+  outline-color: var(--basecolors-stroke-focus-contrast);
+}
+@media screen and (min-width: 50rem) {
+  .eds-text--link {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+}
+.eds-text--link--ext-icon {
+  margin-left: 0.25rem;
+}
+p .eds-text--link--ext-icon {
+  top: 0;
+}
+.eds-text--blockquote {
+  border-left: 0.25rem solid var(--components-typography-blockquote-standard-stroke);
+  font-family: inherit;
+  margin: 0;
+  padding: 0.5rem;
+  padding-left: 2rem;
+  font-size: 1rem;
+  font-size: var(--font-size-body-lg);
+  line-height: 1.5rem;
+  line-height: var(--font-line-height-body-lg);
+  margin-bottom: 1.25rem;
+  margin-bottom: var(--font-paragraph-spacing-body-lg);
+}
+.eds-text--blockquote__footer {
+  font-size: 0.875rem;
+  font-size: var(--font-size-body-s);
+  line-height: 1.375rem;
+  letter-spacing: 1px;
+  margin-top: 1.5rem;
+  text-transform: uppercase;
+}
+@import '~modern-normalize/modern-normalize.css';
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 /* DO NOT CHANGE!*/
@@ -268,7 +1082,9 @@
   --eds-font-family: "Nationale", Arial, "Gotham Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
     "Helvetica Neue", sans-serif;
   box-sizing: border-box;
+  color: #181c56;
   color: var(--primary-text-color);
+  background-color: #ffffff;
   background-color: var(--primary-background-color);
   font-family: "Nationale", Arial, "Gotham Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-weight: 500;
@@ -281,7 +1097,9 @@
   --primary-background-color: var(--basecolors-frame-contrast);
   --primary-text-color: var(--components-typography-basetext-contrast-text-accent);
   --primary-label-color: var(--components-typography-label-contrast-text-accent);
+  color: #ffffff;
   color: var(--primary-text-color);
+  background-color: #181c56;
   background-color: var(--primary-background-color);
 }
 @media screen and (min-width: 50rem) {
@@ -306,6 +1124,7 @@
 .eds-h4,
 .eds-h5,
 .eds-h6 {
+  color: #181c56;
   color: var(--primary-text-color);
   font-weight: 600;
   -webkit-font-smoothing: antialiased;
@@ -384,6 +1203,7 @@
 }
 
 .eds-paragraph {
+  color: #181c56;
   color: var(--primary-text-color);
   font-size: 1rem;
   line-height: 1.5rem;
@@ -397,6 +1217,7 @@
 }
 
 .eds-lead-paragraph {
+  color: #181c56;
   color: var(--primary-text-color);
   font-size: 1.25rem;
   line-height: 1.875rem;
@@ -410,6 +1231,7 @@
 }
 
 .eds-sub-paragraph {
+  color: #181c56;
   color: var(--primary-text-color);
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -421,6 +1243,7 @@
 }
 
 .eds-small-text {
+  color: #181c56;
   color: var(--primary-text-color);
   font-size: 0.625rem;
   line-height: 1rem;
@@ -433,12 +1256,15 @@
 }
 
 .eds-link {
+  color: #181c56;
   color: var(--primary-text-color);
 }
 .eds-link, .eds-link:link, .eds-link:visited {
   font-size: inherit;
+  -webkit-text-decoration: none;
   text-decoration: none;
   position: relative;
+  background-image: linear-gradient(120deg, #181c56 0%, #181c56 100%);
   background-image: linear-gradient(120deg, var(--primary-text-color) 0%, var(--primary-text-color) 100%);
   background-repeat: no-repeat;
   background-size: 100% 0.125rem;
@@ -458,10 +1284,12 @@
 }
 .eds-link:focus-visible {
   outline: 2px solid #181c56;
+  outline-color: #181c56;
   outline-color: var(--basecolors-stroke-focus-standard);
   outline-offset: 0.125rem;
 }
 .eds-contrast .eds-link:focus-visible {
+  outline-color: #aeb7e2;
   outline-color: var(--basecolors-stroke-focus-contrast);
 }
 @media screen and (min-width: 50rem) {
@@ -479,6 +1307,7 @@ p .eds-link--ext-icon {
 
 .eds-label,
 .eds-sub-label {
+  color: #626493;
   color: var(--primary-label-color);
 }
 
@@ -512,9 +1341,12 @@ p .eds-link--ext-icon {
 
 .eds-preformatted-text,
 .eds-code-text {
+  background-color: #f6f6f9;
   background-color: var(--components-typography-codetext-standard-fill);
+  border: 0.0625rem solid rgba(84, 86, 140, 0.4);
   border: 0.0625rem solid var(--components-typography-codetext-standard-border);
   border-radius: 0.25rem;
+  color: #181c56;
   color: var(--components-typography-codetext-standard-text);
   font-family: "Monaco", monospace;
   font-size: 0.875rem;
@@ -529,7 +1361,7 @@ p .eds-link--ext-icon {
 .eds-code-text {
   display: inline-block;
   word-wrap: break-word;
-  overflow-wrap: anywhere;
+  word-wrap: anywhere;
   padding: 0.125rem 0.25rem;
 }
 
@@ -543,6 +1375,7 @@ p .eds-link--ext-icon {
 }
 .eds-unordered-list .eds-list-item::before {
   content: "";
+  background: #aeb7e2;
   background: var(--components-typography-list-standard-border);
   display: block;
   height: 0.125rem;
@@ -582,10 +1415,12 @@ p .eds-link--ext-icon {
   position: relative;
 }
 .eds-numbered-list > .eds-list-item::before {
+  color: #181c56;
   color: var(--primary-text-color);
   position: absolute;
   font-weight: 600;
   left: -2.5rem;
+  border: 0.125rem solid #aeb7e2;
   border: 0.125rem solid var(--components-typography-list-standard-border);
   border-radius: 50%;
   height: 2rem;
@@ -606,6 +1441,7 @@ p .eds-link--ext-icon {
 }
 
 .eds-blockquote {
+  border-left: 0.25rem solid #8284ab;
   border-left: 0.25rem solid var(--components-typography-blockquote-standard-stroke);
   font-family: inherit;
   font-size: 1.25rem;
@@ -682,4 +1518,4 @@ p .eds-link--ext-icon {
   100% {
     width: 100%;
   }
-}
+}