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

package/dist/beta/styles/components/text.css

@@ -0,0 +1,959 @@
+/*! 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;
+}
+
+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). */
+}
+
+/*
+Sections
+========
+*/
+
+body {
+	margin: 0; /* Remove the margin in all browsers. */
+}
+
+/*
+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;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+sup {
+	top: -0.5em;
+}
+
+/*
+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;
+}
+
+/*
+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 */
+}
+
+/*
+Interactive
+===========
+*/
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+	display: list-item;
+}
+
+/* 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.0625rem;
+  --size-2: 0.125rem;
+  --size-3: 0.25rem;
+  --size-4: 0.375rem;
+  --size-5: 0.5rem;
+  --size-6: 0.75rem;
+  --size-7: 0.875rem;
+  --size-8: 1rem;
+  --size-9: 1.25rem;
+  --size-10: 1.5rem;
+  --size-11: 1.75rem;
+  --size-12: 2rem;
+  --size-13: 2.25rem;
+  --size-14: 2.5rem;
+  --size-15: 2.75rem;
+  --size-16: 3rem;
+  --size-17: 3.25rem;
+  --size-18: 3.5rem;
+  --size-19: 4rem;
+  --size-20: 4.5rem;
+  --size-21: 5rem;
+  --size-22: 5.5rem;
+  --size-23: 6rem;
+  --size-24: 6.5rem;
+  --size-25: 7rem;
+  --size-26: 7.5rem;
+  --size-27: 8rem;
+  --size-28: 8.5rem;
+  --size-29: 9rem;
+  --size-30: 9.5rem;
+  --size-31: 10rem;
+}
+
+:root,
+[display-mode=mobile] {
+  /* Mobile/Default mode - number */
+  --font-line-height-body-xs: var(--size-7);
+  --font-line-height-body-s: var(--size-8);
+  --font-line-height-body-lg: var(--size-9);
+  --font-line-height-body-m: var(--size-9);
+  --font-line-height-body-xl: var(--size-10);
+  --font-line-height-heading-s: var(--size-7);
+  --font-line-height-heading-xs: var(--size-7);
+  --font-line-height-heading-m: var(--size-8);
+  --font-line-height-heading-lg: var(--size-9);
+  --font-line-height-heading-xl: var(--size-10);
+  --font-line-height-heading-2xl: var(--size-11);
+  --font-paragraph-spacing-body-xs: var(--size-4);
+  --font-paragraph-spacing-body-s: var(--size-5);
+  --font-paragraph-spacing-body-m: var(--size-7);
+  --font-paragraph-spacing-body-lg: var(--size-8);
+  --font-paragraph-spacing-body-xl: var(--size-8);
+  --font-paragraph-spacing-heading-s: var(--size-4);
+  --font-paragraph-spacing-heading-xs: var(--size-4);
+  --font-paragraph-spacing-heading-lg: var(--size-5);
+  --font-paragraph-spacing-heading-m: var(--size-5);
+  --font-paragraph-spacing-heading-2xl: var(--size-7);
+  --font-paragraph-spacing-heading-xl: var(--size-7);
+  --font-size-body-xs: var(--size-5);
+  --font-size-body-s: var(--size-6);
+  --font-size-body-lg: var(--size-7);
+  --font-size-body-m: var(--size-7);
+  --font-size-body-xl: var(--size-8);
+  --font-size-heading-xs: var(--size-5);
+  --font-size-heading-s: var(--size-6);
+  --font-size-heading-m: var(--size-7);
+  --font-size-heading-lg: var(--size-8);
+  --font-size-heading-xl: var(--size-9);
+  --font-size-heading-2xl: var(--size-10);
+  /* 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 */
+    /* number */
+    --font-line-height-body-xs: var(--size-7);
+    --font-line-height-body-s: var(--size-8);
+    --font-line-height-body-m: var(--size-9);
+    --font-line-height-body-lg: var(--size-10);
+    --font-line-height-body-xl: var(--size-11);
+    --font-line-height-heading-xs: var(--size-7);
+    --font-line-height-heading-s: var(--size-8);
+    --font-line-height-heading-m: var(--size-9);
+    --font-line-height-heading-lg: var(--size-10);
+    --font-line-height-heading-xl: var(--size-12);
+    --font-line-height-heading-2xl: var(--size-14);
+    --font-paragraph-spacing-body-xs: var(--size-4);
+    --font-paragraph-spacing-body-s: var(--size-5);
+    --font-paragraph-spacing-body-m: var(--size-7);
+    --font-paragraph-spacing-body-lg: var(--size-9);
+    --font-paragraph-spacing-body-xl: var(--size-9);
+    --font-paragraph-spacing-heading-xs: var(--size-4);
+    --font-paragraph-spacing-heading-m: var(--size-5);
+    --font-paragraph-spacing-heading-s: var(--size-5);
+    --font-paragraph-spacing-heading-lg: var(--size-7);
+    --font-paragraph-spacing-heading-xl: var(--size-8);
+    --font-paragraph-spacing-heading-2xl: var(--size-9);
+    --font-size-body-xs: var(--size-5);
+    --font-size-body-s: var(--size-6);
+    --font-size-body-m: var(--size-7);
+    --font-size-body-lg: var(--size-8);
+    --font-size-body-xl: var(--size-9);
+    --font-size-heading-xs: var(--size-6);
+    --font-size-heading-s: var(--size-7);
+    --font-size-heading-m: var(--size-8);
+    --font-size-heading-lg: var(--size-9);
+    --font-size-heading-xl: var(--size-11);
+    --font-size-heading-2xl: var(--size-13);
+    /* string */
+    --font-family-nationale: Nationale;
+    --font-weight-body: 500;
+    --font-weight-heading: 600;
+  }
+}
+
+[display-mode=large] {
+  /* number */
+  --font-line-height-body-xs: var(--size-10);
+  --font-line-height-body-s: var(--size-11);
+  --font-line-height-body-m: var(--size-14);
+  --font-line-height-body-lg: var(--size-17);
+  --font-line-height-body-xl: var(--size-18);
+  --font-line-height-heading-xs: var(--size-10);
+  --font-line-height-heading-s: var(--size-12);
+  --font-line-height-heading-m: var(--size-14);
+  --font-line-height-heading-lg: var(--size-17);
+  --font-line-height-heading-xl: var(--size-19);
+  --font-line-height-heading-2xl: var(--size-20);
+  --font-paragraph-spacing-body-xs: var(--size-8);
+  --font-paragraph-spacing-body-s: var(--size-9);
+  --font-paragraph-spacing-body-m: var(--size-11);
+  --font-paragraph-spacing-body-lg: var(--size-13);
+  --font-paragraph-spacing-body-xl: var(--size-15);
+  --font-paragraph-spacing-heading-xs: var(--size-5);
+  --font-paragraph-spacing-heading-s: var(--size-7);
+  --font-paragraph-spacing-heading-m: var(--size-8);
+  --font-paragraph-spacing-heading-lg: var(--size-9);
+  --font-paragraph-spacing-heading-xl: var(--size-11);
+  --font-paragraph-spacing-heading-2xl: var(--size-12);
+  --font-size-body-xs: var(--size-8);
+  --font-size-body-s: var(--size-9);
+  --font-size-body-m: var(--size-11);
+  --font-size-body-lg: var(--size-13);
+  --font-size-body-xl: var(--size-15);
+  --font-size-heading-xs: var(--size-9);
+  --font-size-heading-s: var(--size-11);
+  --font-size-heading-m: var(--size-13);
+  --font-size-heading-lg: var(--size-15);
+  --font-size-heading-xl: var(--size-18);
+  --font-size-heading-2xl: var(--size-19);
+  /* string */
+  --font-family-nationale: Nationale;
+  --font-weight-body: 500;
+  --font-weight-heading: 600;
+}
+
+.eds-text {
+  color: var(--primary-text-color);
+  font-weight: var(--font-weight-body);
+  margin: 0;
+}
+
+.eds-text--xs {
+  font-size: var(--font-size-body-xs);
+  line-height: var(--font-line-height-body-xs);
+}
+
+.eds-text--s {
+  font-size: var(--font-size-body-s);
+  line-height: var(--font-line-height-body-s);
+}
+
+.eds-text--m {
+  font-size: var(--font-size-body-m);
+  line-height: var(--font-line-height-body-m);
+}
+
+.eds-text--xl {
+  font-size: var(--font-size-body-xl);
+  line-height: var(--font-line-height-body-xl);
+}
+
+.eds-text--paragraph:has(+ .eds-heading) {
+  margin-bottom: calc(var(--font-line-height-body-m) + 1rem);
+}
+
+.eds-text--sub-paragraph:has(+ .eds-heading) {
+  margin-bottom: calc(var(--font-line-height-body-s) + 1rem);
+}
+
+.eds-text--leading:has(+ .eds-heading) {
+  margin-bottom: calc(var(--font-line-height-body-xl) + 1rem);
+}
+
+.eds-text--quote:has(+ .eds-heading) {
+  margin-bottom: calc(var(--font-line-height-body-lg) + 1rem);
+}
+
+.eds-text--caption:has(+ .eds-heading) {
+  margin-bottom: calc(var(--font-line-height-body-xs) + 1rem);
+}
+
+.eds-text--label:has(+ .eds-heading) {
+  margin-bottom: calc(var(--font-paragraph-spacing-body-xs) + 1rem);
+}
+
+.eds-text--sublabel:has(+ .eds-heading) {
+  margin-bottom: calc(var(--font-paragraph-spacing-body-xs) + 1rem);
+}
+
+.eds-text--unordered-list:has(+ .eds-heading) {
+  margin-bottom: calc(var(--font-line-height-body-lg) + 1rem);
+}
+
+.eds-text--numbered-list:has(+ .eds-heading) {
+  margin-bottom: calc(var(--font-line-height-body-lg) + 1rem);
+}
+
+.eds-text--blockquote:has(+ .eds-heading) {
+  margin-bottom: calc(var(--font-line-height-body-lg) + 1rem);
+}
+
+.eds-text--preformatted-text:has(+ .eds-heading) {
+  margin-bottom: calc(var(--font-line-height-body-lg) + 1rem);
+}
+
+.eds-text--code-text:has(+ .eds-heading) {
+  margin-bottom: calc(var(--font-line-height-body-lg) + 1rem);
+}
+
+.eds-text--leading {
+  font-size: var(--font-size-body-xl);
+  line-height: var(--font-line-height-body-xl);
+  margin-bottom: var(--font-line-height-body-xl);
+}
+
+.eds-text--quote {
+  font-size: var(--font-size-body-lg);
+  line-height: var(--font-line-height-body-lg);
+  margin-bottom: var(--font-line-height-body-lg);
+}
+
+.eds-text--paragraph {
+  font-size: var(--font-size-body-m);
+  line-height: var(--font-line-height-body-m);
+  margin-bottom: var(--font-line-height-body-m);
+}
+
+.eds-text--sub-paragraph {
+  font-size: var(--font-size-body-s);
+  line-height: var(--font-line-height-body-s);
+  margin-bottom: var(--font-line-height-body-s);
+}
+
+.eds-text--caption {
+  font-size: var(--font-size-body-xs);
+  line-height: var(--font-line-height-body-xs);
+  margin-bottom: var(--font-line-height-body-xs);
+}
+
+.eds-text--label {
+  font-size: var(--font-size-body-m);
+  line-height: var(--font-line-height-body-m);
+  margin-bottom: var(--font-paragraph-spacing-body-xs);
+  font-weight: 600;
+}
+
+.eds-text--sublabel {
+  font-size: var(--font-size-body-s);
+  line-height: var(--font-line-height-body-s);
+  margin-bottom: var(--font-paragraph-spacing-body-xs);
+  font-weight: 600;
+}
+
+.eds-text--overline {
+  font-size: var(--font-size-body-xs);
+  line-height: var(--font-line-height-body-xs);
+  margin-top: var(--font-paragraph-spacing-body-xs);
+  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;
+  margin-bottom: calc(var(--font-line-height-body-lg) + 1rem);
+}
+
+.eds-text--code-text {
+  display: inline-block;
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+  padding: 0 0.25rem;
+}
+
+.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;
+  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: var(--basecolors-stroke-focus-standard);
+  outline-offset: 0.125rem;
+}
+
+.eds-contrast .eds-text--link:focus-visible {
+  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: var(--font-size-body-lg);
+  line-height: var(--font-line-height-body-lg);
+  margin-bottom: var(--font-line-height-body-lg);
+}
+
+.eds-text--blockquote__footer {
+  font-size: var(--font-size-body-s);
+  line-height: 1.375rem;
+  letter-spacing: 1px;
+  margin-top: 1.5rem;
+  text-transform: uppercase;
+}
+
+.eds-text--unordered-list {
+  list-style: none;
+  margin-bottom: var(--font-line-height-body-lg);
+}
+
+.eds-text--unordered-list .eds-text--list-item::before {
+  content: "";
+  background: var(--components-typography-list-standard-border);
+  display: block;
+  height: 0.125rem;
+  left: -1.75rem;
+  top: 0.75rem;
+  position: relative;
+  width: 0.75rem;
+}
+
+.eds-text--numbered-list {
+  counter-reset: eds-numbered-list-counter;
+  list-style: none;
+  margin-bottom: var(--font-line-height-body-lg);
+}
+
+.eds-text--numbered-list--type-a > .eds-text--list-item::before {
+  content: counter(eds-numbered-list-counter, lower-alpha);
+}
+
+.eds-text--numbered-list--type-A > .eds-text--list-item::before {
+  content: counter(eds-numbered-list-counter, upper-alpha);
+}
+
+.eds-text--numbered-list--type-1 > .eds-text--list-item::before {
+  content: counter(eds-numbered-list-counter, decimal);
+}
+
+.eds-text--numbered-list--type-i > .eds-text--list-item::before {
+  content: counter(eds-numbered-list-counter, lower-roman);
+}
+
+.eds-text--numbered-list--type-I > .eds-text--list-item::before {
+  content: counter(eds-numbered-list-counter, upper-roman);
+}
+
+.eds-text--list-item {
+  padding-left: 0.5rem;
+}
+
+.eds-text--numbered-list > .eds-text--list-item {
+  counter-increment: eds-numbered-list-counter;
+  margin-bottom: var(--font-paragraph-spacing-body-m);
+  position: relative;
+}
+
+.eds-text--numbered-list > .eds-text--list-item::before {
+  color: var(--primary-text-color);
+  position: absolute;
+  font-weight: var(--font-weight-heading);
+  left: -2.5rem;
+  border: 0.125rem solid var(--components-typography-list-standard-border);
+  border-radius: 50%;
+  height: 2rem;
+  width: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: -0.25rem;
+}
+
+.eds-text--list-item__title {
+  display: block;
+  font-weight: var(--font-weight-heading);
+  margin-bottom: 0.5rem;
+}