@entur/typography 2.1.0 → 2.1.1-beta-automat.0

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

@@ -0,0 +1,595 @@
+[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:#00dbb6;
+  --basecolors-shape-bicycle-default:#0d827e;
+  --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:#00dbb6;
+  --basecolors-shape-mobility-default:#0d827e;
+  --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:#4db2a1;
+  --basecolors-shape-bicycle-default:#4db2a1;
+  --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:#4db2a1;
+  --basecolors-shape-mobility-default:#4db2a1;
+  --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;
+}
+[data-color-mode=light],
+:root{
+  --components-typography-basetext-contrast-text-accent:#ffffff;
+  --components-typography-basetext-standard-text-accent:#181c56;
+  --components-typography-blockquote-contrast-stroke:#8284ab;
+  --components-typography-blockquote-contrast-text-accent:#ffffff;
+  --components-typography-blockquote-contrast-text-subdued:#d9dae8;
+  --components-typography-blockquote-standard-stroke:#8284ab;
+  --components-typography-blockquote-standard-text-accent:#181c56;
+  --components-typography-blockquote-standard-text-subdued:#626493;
+  --components-typography-codetext-contrast-border:rgba(255, 255, 255, 0);
+  --components-typography-codetext-contrast-border-interactive:#aeb7e2;
+  --components-typography-codetext-contrast-fill:#f6f6f9;
+  --components-typography-codetext-contrast-text:#181c56;
+  --components-typography-codetext-standard-border:rgba(84, 86, 140, 0.4);
+  --components-typography-codetext-standard-border-interactive:#181c56;
+  --components-typography-codetext-standard-fill:#f6f6f9;
+  --components-typography-codetext-standard-text:#181c56;
+  --components-typography-label-contrast-text-accent:#d9dae8;
+  --components-typography-label-standard-text-accent:#626493;
+  --components-typography-list-contrast-border:#aeb7e2;
+  --components-typography-list-contrast-text-accent:#ffffff;
+  --components-typography-list-standard-border:#aeb7e2;
+  --components-typography-list-standard-text-accent:#181c56;
+}
+
+[data-color-mode=dark]{
+  --components-typography-basetext-contrast-text-accent:#e5e5e9;
+  --components-typography-basetext-standard-text-accent:#e5e5e9;
+  --components-typography-blockquote-contrast-stroke:#81828f;
+  --components-typography-blockquote-contrast-text-accent:#e5e5e9;
+  --components-typography-blockquote-contrast-text-subdued:#b3b4bd;
+  --components-typography-blockquote-standard-stroke:#81828f;
+  --components-typography-blockquote-standard-text-accent:#e5e5e9;
+  --components-typography-blockquote-standard-text-subdued:#b3b4bd;
+  --components-typography-codetext-contrast-border:rgba(255, 255, 255, 0);
+  --components-typography-codetext-contrast-border-interactive:#e5e5e9;
+  --components-typography-codetext-contrast-fill:#393a49;
+  --components-typography-codetext-contrast-text:#e5e5e9;
+  --components-typography-codetext-standard-border:rgba(255, 255, 255, 0);
+  --components-typography-codetext-standard-border-interactive:#e5e5e9;
+  --components-typography-codetext-standard-fill:#393a49;
+  --components-typography-codetext-standard-text:#e5e5e9;
+  --components-typography-label-contrast-text-accent:#e5e5e9;
+  --components-typography-label-standard-text-accent:#e5e5e9;
+  --components-typography-list-contrast-border:#aeb7e2;
+  --components-typography-list-contrast-text-accent:#e5e5e9;
+  --components-typography-list-standard-border:#aeb7e2;
+  --components-typography-list-standard-text-accent:#e5e5e9;
+}
+
+/*
+ * Typography Display Modes
+ * 
+ * This system allows you to control typography scaling based on view size.
+ * Use the vie-mode attribute to switch between different typography scales:
+ * 
+ * - Compact: [view-mode='compact'] or no attribute (responsive)
+ * - Display: [view-mode='display'] for big screens, kiosks, etc.
+ * 
+ * Usage:
+ * <html view-mode="display"> or <div view-mode="display">
+ * 
+ * The system automatically handles responsive behavior within each mode.
+ */
+/* Primitive size */
+:root{
+  /* 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,
+[view-mode=standard]{
+  /* number */
+  --font-line-height-body-xs:var(--size-8);
+  --font-line-height-body-s:var(--size-9);
+  --font-line-height-body-lg:var(--size-10);
+  --font-line-height-body-m:var(--size-10);
+  --font-line-height-body-xl:var(--size-11);
+  --font-line-height-heading-s:var(--size-8);
+  --font-line-height-heading-xs: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-11);
+  --font-line-height-heading-2xl:var(--size-12);
+  --font-paragraph-spacing-body-xs:var(--size-5);
+  --font-paragraph-spacing-body-s:var(--size-6);
+  --font-paragraph-spacing-body-m:var(--size-8);
+  --font-paragraph-spacing-body-lg:var(--size-9);
+  --font-paragraph-spacing-body-xl:var(--size-9);
+  --font-paragraph-spacing-heading-s:var(--size-5);
+  --font-paragraph-spacing-heading-xs:var(--size-5);
+  --font-paragraph-spacing-heading-lg:var(--size-6);
+  --font-paragraph-spacing-heading-m:var(--size-6);
+  --font-paragraph-spacing-heading-2xl:var(--size-8);
+  --font-paragraph-spacing-heading-xl:var(--size-8);
+  --font-size-body-xs:var(--size-6);
+  --font-size-body-s:var(--size-7);
+  --font-size-body-lg:var(--size-8);
+  --font-size-body-m: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-10);
+  --font-size-heading-2xl:var(--size-11);
+  /* string */
+  --font-family-nationale:Nationale;
+  --font-weight-body:500;
+  --font-weight-heading:600;
+}
+@media screen and (min-width: 50rem){
+  :root,
+  [view-mode=standard]{
+    --font-line-height-body-xs:var(--size-8);
+    --font-line-height-body-s:var(--size-9);
+    --font-line-height-body-m:var(--size-10);
+    --font-line-height-body-lg:var(--size-11);
+    --font-line-height-body-xl:var(--size-12);
+    --font-line-height-heading-xs:var(--size-8);
+    --font-line-height-heading-s:var(--size-9);
+    --font-line-height-heading-m:var(--size-10);
+    --font-line-height-heading-lg:var(--size-11);
+    --font-line-height-heading-xl:var(--size-13);
+    --font-line-height-heading-2xl:var(--size-15);
+    --font-paragraph-spacing-body-xs:var(--size-5);
+    --font-paragraph-spacing-body-s:var(--size-6);
+    --font-paragraph-spacing-body-m:var(--size-8);
+    --font-paragraph-spacing-body-lg:var(--size-10);
+    --font-paragraph-spacing-body-xl:var(--size-10);
+    --font-paragraph-spacing-heading-xs:var(--size-5);
+    --font-paragraph-spacing-heading-m:var(--size-6);
+    --font-paragraph-spacing-heading-s:var(--size-6);
+    --font-paragraph-spacing-heading-lg:var(--size-8);
+    --font-paragraph-spacing-heading-xl:var(--size-9);
+    --font-paragraph-spacing-heading-2xl:var(--size-10);
+    --font-size-body-xs:var(--size-6);
+    --font-size-body-s:var(--size-7);
+    --font-size-body-m:var(--size-8);
+    --font-size-body-lg:var(--size-9);
+    --font-size-body-xl:var(--size-10);
+    --font-size-heading-xs:var(--size-7);
+    --font-size-heading-s:var(--size-8);
+    --font-size-heading-m:var(--size-9);
+    --font-size-heading-lg:var(--size-10);
+    --font-size-heading-xl:var(--size-12);
+    --font-size-heading-2xl:var(--size-14);
+    /* string */
+    --font-family-nationale:Nationale;
+    --font-weight-body:500;
+    --font-weight-heading:600;
+  }
+}
+
+[view-mode=compact]{
+  /* number */
+  --font-line-height-body-xs:var(--size-8);
+  --font-line-height-body-s:var(--size-9);
+  --font-line-height-body-lg:var(--size-10);
+  --font-line-height-body-m:var(--size-10);
+  --font-line-height-body-xl:var(--size-11);
+  --font-line-height-heading-s:var(--size-8);
+  --font-line-height-heading-xs: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-11);
+  --font-line-height-heading-2xl:var(--size-12);
+  --font-paragraph-spacing-body-xs:var(--size-5);
+  --font-paragraph-spacing-body-s:var(--size-6);
+  --font-paragraph-spacing-body-m:var(--size-8);
+  --font-paragraph-spacing-body-lg:var(--size-9);
+  --font-paragraph-spacing-body-xl:var(--size-9);
+  --font-paragraph-spacing-heading-s:var(--size-5);
+  --font-paragraph-spacing-heading-xs:var(--size-5);
+  --font-paragraph-spacing-heading-lg:var(--size-6);
+  --font-paragraph-spacing-heading-m:var(--size-6);
+  --font-paragraph-spacing-heading-2xl:var(--size-8);
+  --font-paragraph-spacing-heading-xl:var(--size-8);
+  --font-size-body-xs:var(--size-6);
+  --font-size-body-s:var(--size-7);
+  --font-size-body-lg:var(--size-8);
+  --font-size-body-m: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-10);
+  --font-size-heading-2xl:var(--size-11);
+  /* string */
+  --font-family-nationale:Nationale;
+  --font-weight-body:500;
+  --font-weight-heading:600;
+}
+
+[view-mode=display]{
+  /* number */
+  --font-line-height-body-xs:var(--size-11);
+  --font-line-height-body-s:var(--size-12);
+  --font-line-height-body-m:var(--size-15);
+  --font-line-height-body-lg:var(--size-18);
+  --font-line-height-body-xl:var(--size-19);
+  --font-line-height-heading-xs:var(--size-11);
+  --font-line-height-heading-s:var(--size-13);
+  --font-line-height-heading-m:var(--size-15);
+  --font-line-height-heading-lg:var(--size-18);
+  --font-line-height-heading-xl:var(--size-20);
+  --font-line-height-heading-2xl:var(--size-21);
+  --font-paragraph-spacing-body-xs:var(--size-9);
+  --font-paragraph-spacing-body-s:var(--size-10);
+  --font-paragraph-spacing-body-m:var(--size-12);
+  --font-paragraph-spacing-body-lg:var(--size-14);
+  --font-paragraph-spacing-body-xl:var(--size-16);
+  --font-paragraph-spacing-heading-xs:var(--size-6);
+  --font-paragraph-spacing-heading-s:var(--size-8);
+  --font-paragraph-spacing-heading-m:var(--size-9);
+  --font-paragraph-spacing-heading-lg:var(--size-10);
+  --font-paragraph-spacing-heading-xl:var(--size-12);
+  --font-paragraph-spacing-heading-2xl:var(--size-13);
+  --font-size-body-xs:var(--size-9);
+  --font-size-body-s:var(--size-10);
+  --font-size-body-m:var(--size-12);
+  --font-size-body-lg:var(--size-14);
+  --font-size-body-xl:var(--size-16);
+  --font-size-heading-xs:var(--size-10);
+  --font-size-heading-s:var(--size-12);
+  --font-size-heading-m:var(--size-14);
+  --font-size-heading-lg:var(--size-16);
+  --font-size-heading-xl:var(--size-19);
+  --font-size-heading-2xl:var(--size-20);
+  /* string */
+  --font-family-nationale:Nationale;
+  --font-weight-body:500;
+  --font-weight-heading:600;
+}
+
+.eds-heading{
+  color:#181c56;
+  color:var(--components-typography-basetext-standard-text-accent);
+  font-weight:600;
+  font-weight:var(--font-weight-heading);
+  margin:0;
+}
+.eds-contrast .eds-heading{
+  color:#ffffff;
+  color:var(--components-typography-basetext-contrast-text-accent);
+}
+.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-1:not(:first-child){
+  margin-top:0.75rem;
+  margin-top: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-bottom:1rem;
+  margin-bottom:var(--font-paragraph-spacing-heading-xl);
+}
+.eds-heading--title-2:not(:first-child){
+  margin-top:1rem;
+  margin-top: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-bottom:0.75rem;
+  margin-bottom:var(--font-paragraph-spacing-heading-lg);
+}
+.eds-heading--subtitle-1:not(:first-child){
+  margin-top:0.75rem;
+  margin-top: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-bottom:0.75rem;
+  margin-bottom:var(--font-paragraph-spacing-heading-m);
+}
+.eds-heading--subtitle-2:not(:first-child){
+  margin-top:0.75rem;
+  margin-top: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-bottom:0.5rem;
+  margin-bottom:var(--font-paragraph-spacing-heading-s);
+}
+.eds-heading--section-1:not(:first-child){
+  margin-top:0.5rem;
+  margin-top: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-bottom:0.5rem;
+  margin-bottom:var(--font-paragraph-spacing-heading-xs);
+}
+.eds-heading--section-2:not(:first-child){
+  margin-top:0.5rem;
+  margin-top: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;
+}