@entur/typography 1.10.0-beta.9 → 2.0.0-beta.0

package/dist/styles.css

@@ -1,817 +1,181 @@
-@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;
+/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
+/*
+Document
+========
+*/
+/**
+Use a better box model (opinionated).
+*/
+*,
+::before,
+::after {
+  box-sizing: border-box;
 }
 
-[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;
+html {
+  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
+  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  line-height: 1.15; /* 1. Correct the line height in all browsers. */
+  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
+  tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
 }
 
 /*
- * 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;
+Sections
+========
+*/
+body {
+  margin: 0; /* Remove the margin in all browsers. */
 }
 
-: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;
-  }
+/*
+Text-level semantics
+====================
+*/
+/**
+Add the correct font weight in Chrome and Safari.
+*/
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+small {
+  font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
 }
 
-[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;
+sub {
+  bottom: -0.25em;
 }
 
-[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;
-  }
+sup {
+  top: -0.5em;
 }
 
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-  font-weight: inherit;
+/*
+Tabular data
+============
+*/
+/**
+Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+table {
+  border-color: currentcolor;
 }
 
-.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;
+/*
+Forms
+=====
+*/
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+legend {
+  padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+progress {
+  vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+[type=search] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
 }
 
-.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;
+/*
+Interactive
+===========
+*/
+/*
+Add the correct display in Chrome and Safari.
+*/
+summary {
+  display: list-item;
 }
-@import '~modern-normalize/modern-normalize.css';
+
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 /* DO NOT CHANGE!*/
@@ -1082,9 +446,7 @@ p .eds-text--link--ext-icon {
   --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;
@@ -1097,9 +459,7 @@ p .eds-text--link--ext-icon {
   --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) {
@@ -1124,7 +484,6 @@ p .eds-text--link--ext-icon {
 .eds-h4,
 .eds-h5,
 .eds-h6 {
-  color: #181c56;
   color: var(--primary-text-color);
   font-weight: 600;
   -webkit-font-smoothing: antialiased;
@@ -1203,7 +562,6 @@ p .eds-text--link--ext-icon {
 }
 
 .eds-paragraph {
-  color: #181c56;
   color: var(--primary-text-color);
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1217,7 +575,6 @@ p .eds-text--link--ext-icon {
 }
 
 .eds-lead-paragraph {
-  color: #181c56;
   color: var(--primary-text-color);
   font-size: 1.25rem;
   line-height: 1.875rem;
@@ -1231,7 +588,6 @@ p .eds-text--link--ext-icon {
 }
 
 .eds-sub-paragraph {
-  color: #181c56;
   color: var(--primary-text-color);
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1243,7 +599,6 @@ p .eds-text--link--ext-icon {
 }
 
 .eds-small-text {
-  color: #181c56;
   color: var(--primary-text-color);
   font-size: 0.625rem;
   line-height: 1rem;
@@ -1256,15 +611,12 @@ p .eds-text--link--ext-icon {
 }
 
 .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;
@@ -1284,12 +636,10 @@ p .eds-text--link--ext-icon {
 }
 .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) {
@@ -1307,7 +657,6 @@ p .eds-link--ext-icon {
 
 .eds-label,
 .eds-sub-label {
-  color: #626493;
   color: var(--primary-label-color);
 }
 
@@ -1341,12 +690,9 @@ 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;
@@ -1361,7 +707,7 @@ p .eds-link--ext-icon {
 .eds-code-text {
   display: inline-block;
   word-wrap: break-word;
-  word-wrap: anywhere;
+  overflow-wrap: anywhere;
   padding: 0.125rem 0.25rem;
 }
 
@@ -1375,7 +721,6 @@ 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;
@@ -1415,12 +760,10 @@ 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;
@@ -1441,7 +784,6 @@ 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;
@@ -1518,4 +860,4 @@ p .eds-link--ext-icon {
   100% {
     width: 100%;
   }
-}
+}