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

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

@@ -0,0 +1,458 @@
+/* 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-heading {
+  color: var(--primary-text-color);
+  font-weight: var(--font-weight-heading);
+  -webkit-font-smoothing: antialiased;
+  margin: 0;
+}
+.eds-heading--2xl {
+  font-size: var(--font-size-heading-2xl);
+  line-height: var(--font-line-height-heading-2xl);
+}
+.eds-heading--xl {
+  font-size: var(--font-size-heading-xl);
+  line-height: var(--font-line-height-heading-xl);
+}
+.eds-heading--lg {
+  font-size: var(--font-size-heading-lg);
+  line-height: var(--font-line-height-heading-lg);
+}
+.eds-heading--m {
+  font-size: var(--font-size-heading-m);
+  line-height: var(--font-line-height-heading-m);
+}
+.eds-heading--s {
+  font-size: var(--font-size-heading-s);
+  line-height: var(--font-line-height-heading-s);
+}
+.eds-heading--xs {
+  font-size: var(--font-size-heading-xs);
+  line-height: var(--font-line-height-heading-xs);
+}
+.eds-heading--title-1 {
+  font-size: var(--font-size-heading-2xl);
+  line-height: var(--font-line-height-heading-2xl);
+  margin-bottom: var(--font-paragraph-spacing-heading-lg);
+}
+.eds-heading--title-2 {
+  font-size: var(--font-size-heading-xl);
+  line-height: var(--font-line-height-heading-xl);
+  margin-bottom: var(--font-paragraph-spacing-heading-xl);
+}
+.eds-heading--subtitle-1 {
+  font-size: var(--font-size-heading-lg);
+  line-height: var(--font-line-height-heading-lg);
+  margin-bottom: var(--font-paragraph-spacing-heading-lg);
+}
+.eds-heading--subtitle-2 {
+  font-size: var(--font-size-heading-m);
+  line-height: var(--font-line-height-heading-m);
+  margin-bottom: var(--font-paragraph-spacing-heading-m);
+}
+.eds-heading--section-1 {
+  font-size: var(--font-size-heading-s);
+  line-height: var(--font-line-height-heading-s);
+  margin-bottom: var(--font-paragraph-spacing-heading-s);
+}
+.eds-heading--section-2 {
+  font-size: var(--font-size-heading-s);
+  line-height: var(--font-line-height-heading-s);
+  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;
+}