@equinor/eds-tokens 2.0.1 → 2.1.1

package/README.md

@@ -39,7 +39,7 @@ Then use the CSS custom properties in your styles:
   background-color: var(--eds-color-bg-neutral-surface);
   color: var(--eds-color-text-neutral-strong);
   border: 1px solid var(--eds-color-border-neutral-subtle);
-  padding: var(--eds-selectable-spacing-stack) var(--eds-selectable-spacing-inline);
+  padding: var(--eds-selectable-space-vertical) var(--eds-selectable-space-horizontal);
   border-radius: var(--eds-spacing-border-radius-rounded);
 }
 ```
@@ -195,9 +195,9 @@ Adapt to `data-selectable-space` (xs/sm/md/lg/xl) and `data-space-proportions` (
 
 ```css
 .button {
-  padding-inline: var(--eds-selectable-spacing-inline);
-  padding-block: var(--eds-selectable-spacing-stack);
-  gap: var(--eds-selectable-gap-stack) var(--eds-selectable-gap-inline);
+  padding-inline: var(--eds-selectable-space-horizontal);
+  padding-block: var(--eds-selectable-space-vertical);
+  gap: var(--eds-selectable-gap-vertical) var(--eds-selectable-gap-horizontal);
 }
 ```
 
@@ -213,9 +213,9 @@ Spacing values that adapt to `data-space-proportions`:
 
 ```css
 .container {
-  padding-inline: var(--eds-container-spacing-inline);
-  padding-block: var(--eds-container-spacing-stack);
-  gap: var(--eds-container-gap-inline) var(--eds-container-gap-stack);
+  padding-inline: var(--eds-container-space-horizontal);
+  padding-block: var(--eds-container-space-vertical);
+  gap: var(--eds-container-gap-vertical) var(--eds-container-gap-horizontal);
 }
 ```
 
@@ -225,9 +225,9 @@ Spacing values that adapt to `data-space-proportions`:
 
 ```css
 .page {
-  padding-inline: var(--eds-page-spacing-inline);
-  padding-block: var(--eds-page-spacing-stack);
-  gap: var(--eds-page-gap-inline) var(--eds-page-gap-stack);
+  padding-inline: var(--eds-page-space-horizontal);
+  padding-block: var(--eds-page-space-vertical);
+  gap: var(--eds-page-gap-vertical) var(--eds-page-gap-horizontal);
 }
 ```
 

package/build/css/index-variables.css

@@ -15,5 +15,87 @@
 @import 'spacing/selectable-space-lg.css';
 @import 'spacing/selectable-space-xl.css';
 
-@import './spacing.css';
+@import 'spacing/generic-gap-horizontal-none.css';
+@import 'spacing/generic-gap-horizontal-4xs.css';
+@import 'spacing/generic-gap-horizontal-3xs.css';
+@import 'spacing/generic-gap-horizontal-2xs.css';
+@import 'spacing/generic-gap-horizontal-xs.css';
+@import 'spacing/generic-gap-horizontal-sm.css';
+@import 'spacing/generic-gap-horizontal-md.css';
+@import 'spacing/generic-gap-horizontal-lg.css';
+@import 'spacing/generic-gap-horizontal-xl.css';
+@import 'spacing/generic-gap-horizontal-2xl.css';
+@import 'spacing/generic-gap-horizontal-3xl.css';
+
+@import 'spacing/generic-gap-vertical-none.css';
+@import 'spacing/generic-gap-vertical-4xs.css';
+@import 'spacing/generic-gap-vertical-3xs.css';
+@import 'spacing/generic-gap-vertical-2xs.css';
+@import 'spacing/generic-gap-vertical-xs.css';
+@import 'spacing/generic-gap-vertical-sm.css';
+@import 'spacing/generic-gap-vertical-md.css';
+@import 'spacing/generic-gap-vertical-lg.css';
+@import 'spacing/generic-gap-vertical-xl.css';
+@import 'spacing/generic-gap-vertical-2xl.css';
+@import 'spacing/generic-gap-vertical-3xl.css';
+
+@import 'spacing/generic-space-horizontal-none.css';
+@import 'spacing/generic-space-horizontal-4xs.css';
+@import 'spacing/generic-space-horizontal-3xs.css';
+@import 'spacing/generic-space-horizontal-2xs.css';
+@import 'spacing/generic-space-horizontal-xs.css';
+@import 'spacing/generic-space-horizontal-sm.css';
+@import 'spacing/generic-space-horizontal-md.css';
+@import 'spacing/generic-space-horizontal-lg.css';
+@import 'spacing/generic-space-horizontal-xl.css';
+@import 'spacing/generic-space-horizontal-2xl.css';
+@import 'spacing/generic-space-horizontal-3xl.css';
+
+@import 'spacing/generic-space-vertical-none.css';
+@import 'spacing/generic-space-vertical-4xs.css';
+@import 'spacing/generic-space-vertical-3xs.css';
+@import 'spacing/generic-space-vertical-2xs.css';
+@import 'spacing/generic-space-vertical-xs.css';
+@import 'spacing/generic-space-vertical-sm.css';
+@import 'spacing/generic-space-vertical-md.css';
+@import 'spacing/generic-space-vertical-lg.css';
+@import 'spacing/generic-space-vertical-xl.css';
+@import 'spacing/generic-space-vertical-2xl.css';
+@import 'spacing/generic-space-vertical-3xl.css';
+
+@import 'spacing/container-space.css';
+@import 'spacing/page-space.css';
+
+@import 'spacing/semantic-spacing-gap.css';
 @import './typography.css';
+
+/* Typography: Font Family */
+@import 'typography/font-family-header.css';
+@import 'typography/font-family-ui.css';
+
+/* Typography: Font Size */
+@import 'typography/font-size-xs.css';
+@import 'typography/font-size-sm.css';
+@import 'typography/font-size-md.css';
+@import 'typography/font-size-lg.css';
+@import 'typography/font-size-xl.css';
+@import 'typography/font-size-2xl.css';
+@import 'typography/font-size-3xl.css';
+@import 'typography/font-size-4xl.css';
+@import 'typography/font-size-5xl.css';
+@import 'typography/font-size-6xl.css';
+
+/* Typography: Font Weight */
+@import 'typography/font-weight-lighter.css';
+@import 'typography/font-weight-normal.css';
+@import 'typography/font-weight-bolder.css';
+
+/* Typography: Line Height */
+@import 'typography/line-height-default.css';
+@import 'typography/line-height-squished.css';
+
+/* Typography: Letter Spacing */
+@import 'typography/tracking-tight.css';
+@import 'typography/tracking-normal.css';
+@import 'typography/tracking-wide.css';
+@import 'typography/tracking-loose.css';

package/build/css/spacing/comfortable.css

@@ -3,6 +3,25 @@
  */
 
 [data-density="comfortable"] {
+  --eds-sizing-icon-xs: 0.875rem;
+  --eds-sizing-icon-sm: 1rem;
+  --eds-sizing-icon-md: 1.125rem;
+  --eds-sizing-icon-lg: 1.25rem;
+  --eds-sizing-icon-xl: 1.5rem;
+  --eds-sizing-icon-2xl: 1.75rem;
+  --eds-sizing-icon-3xl: 2rem;
+  --eds-sizing-icon-4xl: 2.313rem;
+  --eds-sizing-icon-5xl: 2.625rem;
+  --eds-sizing-icon-6xl: 3rem;
+  --eds-sizing-selectable-xs: 1rem;
+  --eds-sizing-selectable-sm: 1.25rem;
+  --eds-sizing-selectable-md: 1.5rem;
+  --eds-sizing-selectable-lg: 2.25rem;
+  --eds-sizing-selectable-xl: 2.75rem;
+  --eds-sizing-selectable-2xl: 3.25rem;
+  --eds-sizing-stroke-thin: 0.063rem;
+  --eds-sizing-stroke-thick: 0.125rem;
+  --eds-sizing-stroke-none: 0rem;
   --eds-spacing-icon-xs-gap-horizontal: 0.344rem;
   --eds-spacing-icon-xs-gap-vertical: 0.344rem;
   --eds-spacing-icon-sm-gap-horizontal: 0.406rem;
@@ -26,65 +45,46 @@
   --eds-spacing-border-radius-rounded: 0.188rem;
   --eds-spacing-border-radius-pill: 62.5rem;
   --eds-spacing-border-radius-none: 0rem;
-  --eds-spacing-inset-xs-inline: 0.375rem;
-  --eds-spacing-inset-xs-stack-squished: 0.25rem;
-  --eds-spacing-inset-xs-stack-squared: 0.375rem;
-  --eds-spacing-inset-xs-stack-stretched: 0.5rem;
-  --eds-spacing-inset-sm-inline: 0.5rem;
-  --eds-spacing-inset-sm-stack-squished: 0.375rem;
-  --eds-spacing-inset-sm-stack-squared: 0.5rem;
-  --eds-spacing-inset-sm-stack-stretched: 0.75rem;
-  --eds-spacing-inset-md-inline: 0.75rem;
-  --eds-spacing-inset-md-stack-squished: 0.5rem;
-  --eds-spacing-inset-md-stack-squared: 0.75rem;
-  --eds-spacing-inset-md-stack-stretched: 1rem;
-  --eds-spacing-inset-lg-inline: 1rem;
-  --eds-spacing-inset-lg-stack-squished: 0.75rem;
-  --eds-spacing-inset-lg-stack-squared: 1rem;
-  --eds-spacing-inset-lg-stack-stretched: 1.25rem;
-  --eds-spacing-inset-xl-inline: 1.25rem;
-  --eds-spacing-inset-xl-stack-squished: 1rem;
-  --eds-spacing-inset-xl-stack-squared: 1.25rem;
-  --eds-spacing-inset-xl-stack-stretched: 1.5rem;
-  --eds-spacing-inline-4xs: 0.063rem;
-  --eds-spacing-inline-3xs: 0.125rem;
-  --eds-spacing-inline-2xs: 0.25rem;
-  --eds-spacing-inline-xs: 0.375rem;
-  --eds-spacing-inline-sm: 0.5rem;
-  --eds-spacing-inline-md: 0.75rem;
-  --eds-spacing-inline-lg: 1rem;
-  --eds-spacing-inline-xl: 1.25rem;
-  --eds-spacing-inline-2xl: 1.5rem;
-  --eds-spacing-inline-3xl: 1.75rem;
-  --eds-spacing-stack-4xs: 0.063rem;
-  --eds-spacing-stack-3xs: 0.125rem;
-  --eds-spacing-stack-2xs: 0.25rem;
-  --eds-spacing-stack-xs: 0.375rem;
-  --eds-spacing-stack-sm: 0.5rem;
-  --eds-spacing-stack-md: 0.75rem;
-  --eds-spacing-stack-lg: 1rem;
-  --eds-spacing-stack-xl: 1.25rem;
-  --eds-spacing-stack-2xl: 1.5rem;
-  --eds-spacing-stack-3xl: 1.75rem;
-  --eds-sizing-icon-xs: 0.875rem;
-  --eds-sizing-icon-sm: 1rem;
-  --eds-sizing-icon-md: 1.125rem;
-  --eds-sizing-icon-lg: 1.25rem;
-  --eds-sizing-icon-xl: 1.5rem;
-  --eds-sizing-icon-2xl: 1.75rem;
-  --eds-sizing-icon-3xl: 2rem;
-  --eds-sizing-icon-4xl: 2.313rem;
-  --eds-sizing-icon-5xl: 2.625rem;
-  --eds-sizing-icon-6xl: 3rem;
-  --eds-sizing-selectable-xs: 1rem;
-  --eds-sizing-selectable-sm: 1.25rem;
-  --eds-sizing-selectable-md: 1.5rem;
-  --eds-sizing-selectable-lg: 2.25rem;
-  --eds-sizing-selectable-xl: 2.75rem;
-  --eds-sizing-selectable-2xl: 3.25rem;
-  --eds-sizing-stroke-thin: 0.063rem;
-  --eds-sizing-stroke-thick: 0.125rem;
-  --eds-sizing-stroke-none: 0rem;
+  --eds-spacing-inset-xs-horizontal: 0.375rem;
+  --eds-spacing-inset-xs-vertical-squished: 0.25rem;
+  --eds-spacing-inset-xs-vertical-squared: 0.375rem;
+  --eds-spacing-inset-xs-vertical-stretched: 0.5rem;
+  --eds-spacing-inset-sm-horizontal: 0.5rem;
+  --eds-spacing-inset-sm-vertical-squished: 0.375rem;
+  --eds-spacing-inset-sm-vertical-squared: 0.5rem;
+  --eds-spacing-inset-sm-vertical-stretched: 0.75rem;
+  --eds-spacing-inset-md-horizontal: 0.75rem;
+  --eds-spacing-inset-md-vertical-squished: 0.5rem;
+  --eds-spacing-inset-md-vertical-squared: 0.75rem;
+  --eds-spacing-inset-md-vertical-stretched: 1rem;
+  --eds-spacing-inset-lg-horizontal: 1rem;
+  --eds-spacing-inset-lg-vertical-squished: 0.75rem;
+  --eds-spacing-inset-lg-vertical-squared: 1rem;
+  --eds-spacing-inset-lg-vertical-stretched: 1.25rem;
+  --eds-spacing-inset-xl-horizontal: 1.25rem;
+  --eds-spacing-inset-xl-vertical-squished: 1rem;
+  --eds-spacing-inset-xl-vertical-squared: 1.25rem;
+  --eds-spacing-inset-xl-vertical-stretched: 1.5rem;
+  --eds-spacing-horizontal-4xs: 0.063rem;
+  --eds-spacing-horizontal-3xs: 0.125rem;
+  --eds-spacing-horizontal-2xs: 0.25rem;
+  --eds-spacing-horizontal-xs: 0.375rem;
+  --eds-spacing-horizontal-sm: 0.5rem;
+  --eds-spacing-horizontal-md: 0.75rem;
+  --eds-spacing-horizontal-lg: 1rem;
+  --eds-spacing-horizontal-xl: 1.25rem;
+  --eds-spacing-horizontal-2xl: 1.5rem;
+  --eds-spacing-horizontal-3xl: 1.75rem;
+  --eds-spacing-vertical-4xs: 0.063rem;
+  --eds-spacing-vertical-3xs: 0.125rem;
+  --eds-spacing-vertical-2xs: 0.25rem;
+  --eds-spacing-vertical-xs: 0.375rem;
+  --eds-spacing-vertical-sm: 0.5rem;
+  --eds-spacing-vertical-md: 0.75rem;
+  --eds-spacing-vertical-lg: 1rem;
+  --eds-spacing-vertical-xl: 1.25rem;
+  --eds-spacing-vertical-2xl: 1.5rem;
+  --eds-spacing-vertical-3xl: 1.75rem;
   --eds-typography-ui-body-xs-font-size: 0.563rem;
   --eds-typography-ui-body-xs-tracking-tight: -0.99px;
   --eds-typography-ui-body-xs-tracking-normal: 0px;
@@ -92,8 +92,8 @@
   --eds-typography-ui-body-xs-font-weight-lighter: 300;
   --eds-typography-ui-body-xs-font-weight-normal: 400;
   --eds-typography-ui-body-xs-font-weight-bolder: 500;
-  --eds-typography-ui-body-xs-lineheight-default: 0.75rem;
-  --eds-typography-ui-body-xs-lineheight-squished: 0.75rem;
+  --eds-typography-ui-body-xs-line-height-default: 0.75rem;
+  --eds-typography-ui-body-xs-line-height-squished: 0.75rem;
   --eds-typography-ui-body-sm-font-size: 0.656rem;
   --eds-typography-ui-body-sm-tracking-tight: -1.15px;
   --eds-typography-ui-body-sm-tracking-normal: 0px;
@@ -101,8 +101,8 @@
   --eds-typography-ui-body-sm-font-weight-lighter: 300;
   --eds-typography-ui-body-sm-font-weight-normal: 400;
   --eds-typography-ui-body-sm-font-weight-bolder: 500;
-  --eds-typography-ui-body-sm-lineheight-default: 1rem;
-  --eds-typography-ui-body-sm-lineheight-squished: 0.75rem;
+  --eds-typography-ui-body-sm-line-height-default: 1rem;
+  --eds-typography-ui-body-sm-line-height-squished: 0.75rem;
   --eds-typography-ui-body-font-family: "Inter";
   --eds-typography-ui-body-md-font-size: 0.75rem;
   --eds-typography-ui-body-md-tracking-tight: -1.32px;
@@ -111,8 +111,8 @@
   --eds-typography-ui-body-md-font-weight-lighter: 300;
   --eds-typography-ui-body-md-font-weight-normal: 400;
   --eds-typography-ui-body-md-font-weight-bolder: 500;
-  --eds-typography-ui-body-md-lineheight-default: 1rem;
-  --eds-typography-ui-body-md-lineheight-squished: 0.75rem;
+  --eds-typography-ui-body-md-line-height-default: 1rem;
+  --eds-typography-ui-body-md-line-height-squished: 0.75rem;
   --eds-typography-ui-body-lg-font-size: 0.875rem;
   --eds-typography-ui-body-lg-tracking-tight: -1.54px;
   --eds-typography-ui-body-lg-tracking-normal: 0px;
@@ -120,8 +120,8 @@
   --eds-typography-ui-body-lg-font-weight-lighter: 300;
   --eds-typography-ui-body-lg-font-weight-normal: 400;
   --eds-typography-ui-body-lg-font-weight-bolder: 500;
-  --eds-typography-ui-body-lg-lineheight-default: 1.25rem;
-  --eds-typography-ui-body-lg-lineheight-squished: 1rem;
+  --eds-typography-ui-body-lg-line-height-default: 1.25rem;
+  --eds-typography-ui-body-lg-line-height-squished: 1rem;
   --eds-typography-ui-body-xl-font-size: 1rem;
   --eds-typography-ui-body-xl-tracking-tight: -1.76px;
   --eds-typography-ui-body-xl-tracking-normal: 0px;
@@ -129,8 +129,8 @@
   --eds-typography-ui-body-xl-font-weight-lighter: 300;
   --eds-typography-ui-body-xl-font-weight-normal: 400;
   --eds-typography-ui-body-xl-font-weight-bolder: 500;
-  --eds-typography-ui-body-xl-lineheight-default: 1.5rem;
-  --eds-typography-ui-body-xl-lineheight-squished: 1.25rem;
+  --eds-typography-ui-body-xl-line-height-default: 1.5rem;
+  --eds-typography-ui-body-xl-line-height-squished: 1.25rem;
   --eds-typography-ui-body-2xl-font-size: 1.156rem;
   --eds-typography-ui-body-2xl-tracking-tight: -1.76px;
   --eds-typography-ui-body-2xl-tracking-normal: 0px;
@@ -138,8 +138,8 @@
   --eds-typography-ui-body-2xl-font-weight-lighter: 300;
   --eds-typography-ui-body-2xl-font-weight-normal: 400;
   --eds-typography-ui-body-2xl-font-weight-bolder: 500;
-  --eds-typography-ui-body-2xl-lineheight-default: 1.5rem;
-  --eds-typography-ui-body-2xl-lineheight-squished: 1.25rem;
+  --eds-typography-ui-body-2xl-line-height-default: 1.5rem;
+  --eds-typography-ui-body-2xl-line-height-squished: 1.25rem;
   --eds-typography-ui-body-3xl-font-size: 1.313rem;
   --eds-typography-ui-body-3xl-tracking-tight: -2.31px;
   --eds-typography-ui-body-3xl-tracking-normal: 0px;
@@ -147,8 +147,8 @@
   --eds-typography-ui-body-3xl-font-weight-lighter: 300;
   --eds-typography-ui-body-3xl-font-weight-normal: 400;
   --eds-typography-ui-body-3xl-font-weight-bolder: 500;
-  --eds-typography-ui-body-3xl-lineheight-default: 1.75rem;
-  --eds-typography-ui-body-3xl-lineheight-squished: 1.5rem;
+  --eds-typography-ui-body-3xl-line-height-default: 1.75rem;
+  --eds-typography-ui-body-3xl-line-height-squished: 1.5rem;
   --eds-typography-ui-body-4xl-font-size: 1.531rem;
   --eds-typography-ui-body-4xl-tracking-tight: -2.695px;
   --eds-typography-ui-body-4xl-tracking-normal: 0px;
@@ -156,8 +156,8 @@
   --eds-typography-ui-body-4xl-font-weight-lighter: 300;
   --eds-typography-ui-body-4xl-font-weight-normal: 400;
   --eds-typography-ui-body-4xl-font-weight-bolder: 500;
-  --eds-typography-ui-body-4xl-lineheight-default: 2rem;
-  --eds-typography-ui-body-4xl-lineheight-squished: 1.75rem;
+  --eds-typography-ui-body-4xl-line-height-default: 2rem;
+  --eds-typography-ui-body-4xl-line-height-squished: 1.75rem;
   --eds-typography-ui-body-5xl-font-size: 1.75rem;
   --eds-typography-ui-body-5xl-tracking-tight: -3.08px;
   --eds-typography-ui-body-5xl-tracking-normal: 0px;
@@ -165,8 +165,8 @@
   --eds-typography-ui-body-5xl-font-weight-lighter: 300;
   --eds-typography-ui-body-5xl-font-weight-normal: 400;
   --eds-typography-ui-body-5xl-font-weight-bolder: 500;
-  --eds-typography-ui-body-5xl-lineheight-default: 2rem;
-  --eds-typography-ui-body-5xl-lineheight-squished: 1.75rem;
+  --eds-typography-ui-body-5xl-line-height-default: 2rem;
+  --eds-typography-ui-body-5xl-line-height-squished: 1.75rem;
   --eds-typography-ui-body-6xl-font-size: 2rem;
   --eds-typography-ui-body-6xl-tracking-tight: -3.52px;
   --eds-typography-ui-body-6xl-tracking-normal: 0px;
@@ -174,8 +174,8 @@
   --eds-typography-ui-body-6xl-font-weight-lighter: 300;
   --eds-typography-ui-body-6xl-font-weight-normal: 0px;
   --eds-typography-ui-body-6xl-font-weight-bolder: 500;
-  --eds-typography-ui-body-6xl-lineheight-default: 2.25rem;
-  --eds-typography-ui-body-6xl-lineheight-squished: 2rem;
+  --eds-typography-ui-body-6xl-line-height-default: 2.25rem;
+  --eds-typography-ui-body-6xl-line-height-squished: 2rem;
   --eds-typography-header-font-family: "Equinor";
   --eds-typography-header-xs-font-size: 0.656rem;
   --eds-typography-header-xs-tracking-tight: -0.99px;
@@ -184,8 +184,8 @@
   --eds-typography-header-xs-font-weight-lighter: 300;
   --eds-typography-header-xs-font-weight-normal: 400;
   --eds-typography-header-xs-font-weight-bolder: 500;
-  --eds-typography-header-xs-lineheight-default: 0.75rem;
-  --eds-typography-header-xs-lineheight-squished: 0.75rem;
+  --eds-typography-header-xs-line-height-default: 0.75rem;
+  --eds-typography-header-xs-line-height-squished: 0.75rem;
   --eds-typography-header-sm-font-size: 0.75rem;
   --eds-typography-header-sm-tracking-tight: -1.15px;
   --eds-typography-header-sm-tracking-normal: 0px;
@@ -193,8 +193,8 @@
   --eds-typography-header-sm-font-weight-lighter: 300;
   --eds-typography-header-sm-font-weight-normal: 400;
   --eds-typography-header-sm-font-weight-bolder: 500;
-  --eds-typography-header-sm-lineheight-default: 1rem;
-  --eds-typography-header-sm-lineheight-squished: 0.75rem;
+  --eds-typography-header-sm-line-height-default: 1rem;
+  --eds-typography-header-sm-line-height-squished: 0.75rem;
   --eds-typography-header-md-font-size: 0.875rem;
   --eds-typography-header-md-tracking-tight: -1.32px;
   --eds-typography-header-md-tracking-normal: 0px;
@@ -202,8 +202,8 @@
   --eds-typography-header-md-font-weight-lighter: 300;
   --eds-typography-header-md-font-weight-normal: 400;
   --eds-typography-header-md-font-weight-bolder: 500;
-  --eds-typography-header-md-lineheight-default: 1rem;
-  --eds-typography-header-md-lineheight-squished: 0.75rem;
+  --eds-typography-header-md-line-height-default: 1rem;
+  --eds-typography-header-md-line-height-squished: 0.75rem;
   --eds-typography-header-lg-font-size: 1rem;
   --eds-typography-header-lg-tracking-tight: -1.54px;
   --eds-typography-header-lg-tracking-normal: 0px;
@@ -211,8 +211,8 @@
   --eds-typography-header-lg-font-weight-lighter: 300;
   --eds-typography-header-lg-font-weight-normal: 400;
   --eds-typography-header-lg-font-weight-bolder: 500;
-  --eds-typography-header-lg-lineheight-default: 1.25rem;
-  --eds-typography-header-lg-lineheight-squished: 1rem;
+  --eds-typography-header-lg-line-height-default: 1.25rem;
+  --eds-typography-header-lg-line-height-squished: 1rem;
   --eds-typography-header-xl-font-size: 1.125rem;
   --eds-typography-header-xl-tracking-tight: -1.76px;
   --eds-typography-header-xl-tracking-normal: 0px;
@@ -220,8 +220,8 @@
   --eds-typography-header-xl-font-weight-lighter: 300;
   --eds-typography-header-xl-font-weight-normal: 400;
   --eds-typography-header-xl-font-weight-bolder: 500;
-  --eds-typography-header-xl-lineheight-default: 1.5rem;
-  --eds-typography-header-xl-lineheight-squished: 1.25rem;
+  --eds-typography-header-xl-line-height-default: 1.5rem;
+  --eds-typography-header-xl-line-height-squished: 1.25rem;
   --eds-typography-header-2xl-font-size: 1.313rem;
   --eds-typography-header-2xl-tracking-tight: -1.76px;
   --eds-typography-header-2xl-tracking-normal: 0px;
@@ -229,8 +229,8 @@
   --eds-typography-header-2xl-font-weight-lighter: 300;
   --eds-typography-header-2xl-font-weight-normal: 400;
   --eds-typography-header-2xl-font-weight-bolder: 500;
-  --eds-typography-header-2xl-lineheight-default: 1.5rem;
-  --eds-typography-header-2xl-lineheight-squished: 1.25rem;
+  --eds-typography-header-2xl-line-height-default: 1.5rem;
+  --eds-typography-header-2xl-line-height-squished: 1.25rem;
   --eds-typography-header-3xl-font-size: 1.5rem;
   --eds-typography-header-3xl-tracking-tight: -2.31px;
   --eds-typography-header-3xl-tracking-normal: 0px;
@@ -238,8 +238,8 @@
   --eds-typography-header-3xl-font-weight-lighter: 300;
   --eds-typography-header-3xl-font-weight-normal: 400;
   --eds-typography-header-3xl-font-weight-bolder: 500;
-  --eds-typography-header-3xl-lineheight-default: 1.75rem;
-  --eds-typography-header-3xl-lineheight-squished: 1.5rem;
+  --eds-typography-header-3xl-line-height-default: 1.75rem;
+  --eds-typography-header-3xl-line-height-squished: 1.5rem;
   --eds-typography-header-4xl-font-size: 1.719rem;
   --eds-typography-header-4xl-tracking-tight: -2.695px;
   --eds-typography-header-4xl-tracking-normal: 0px;
@@ -247,8 +247,8 @@
   --eds-typography-header-4xl-font-weight-lighter: 300;
   --eds-typography-header-4xl-font-weight-normal: 400;
   --eds-typography-header-4xl-font-weight-bolder: 500;
-  --eds-typography-header-4xl-lineheight-default: 2rem;
-  --eds-typography-header-4xl-lineheight-squished: 1.75rem;
+  --eds-typography-header-4xl-line-height-default: 2rem;
+  --eds-typography-header-4xl-line-height-squished: 1.75rem;
   --eds-typography-header-5xl-font-size: 1.969rem;
   --eds-typography-header-5xl-tracking-tight: -3.08px;
   --eds-typography-header-5xl-tracking-normal: 0px;
@@ -256,8 +256,8 @@
   --eds-typography-header-5xl-font-weight-lighter: 300;
   --eds-typography-header-5xl-font-weight-normal: 400;
   --eds-typography-header-5xl-font-weight-bolder: 500;
-  --eds-typography-header-5xl-lineheight-default: 2rem;
-  --eds-typography-header-5xl-lineheight-squished: 1.75rem;
+  --eds-typography-header-5xl-line-height-default: 2rem;
+  --eds-typography-header-5xl-line-height-squished: 1.75rem;
   --eds-typography-header-6xl-font-size: 2.281rem;
   --eds-typography-header-6xl-tracking-tight: -3.52px;
   --eds-typography-header-6xl-tracking-normal: 0px;
@@ -265,6 +265,6 @@
   --eds-typography-header-6xl-font-weight-lighter: 300;
   --eds-typography-header-6xl-font-weight-normal: 400;
   --eds-typography-header-6xl-font-weight-bolder: 500;
-  --eds-typography-header-6xl-lineheight-default: 2.25rem;
-  --eds-typography-header-6xl-lineheight-squished: 2rem;
+  --eds-typography-header-6xl-line-height-default: 2.25rem;
+  --eds-typography-header-6xl-line-height-squished: 2rem;
 }

package/build/css/spacing/container-space.css

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root, [data-space-proportions] {
+  --eds-container-space-horizontal: var(--eds-spacing-proportions-md-horizontal);
+  --eds-container-space-vertical: var(--eds-spacing-proportions-md-vertical);
+}

package/build/css/spacing/generic-gap-horizontal-2xl.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-horizontal-gap="2xl"] {
+  --eds-generic-gap-horizontal: var(--eds-spacing-horizontal-2xl);
+}

package/build/css/spacing/generic-gap-horizontal-2xs.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-horizontal-gap="2xs"] {
+  --eds-generic-gap-horizontal: var(--eds-spacing-horizontal-2xs);
+}

package/build/css/spacing/generic-gap-horizontal-3xl.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-horizontal-gap="3xl"] {
+  --eds-generic-gap-horizontal: var(--eds-spacing-horizontal-3xl);
+}

package/build/css/spacing/generic-gap-horizontal-3xs.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-horizontal-gap="3xs"] {
+  --eds-generic-gap-horizontal: var(--eds-spacing-horizontal-3xs);
+}

package/build/css/spacing/generic-gap-horizontal-4xs.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-horizontal-gap="4xs"] {
+  --eds-generic-gap-horizontal: var(--eds-spacing-horizontal-4xs);
+}

package/build/css/spacing/generic-gap-horizontal-lg.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-horizontal-gap="lg"] {
+  --eds-generic-gap-horizontal: var(--eds-spacing-horizontal-lg);
+}

package/build/css/spacing/generic-gap-horizontal-md.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-horizontal-gap="md"] {
+  --eds-generic-gap-horizontal: var(--eds-spacing-horizontal-md);
+}

package/build/css/spacing/generic-gap-horizontal-none.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-horizontal-gap="none"] {
+  --eds-generic-gap-horizontal: 0;
+}

package/build/css/spacing/generic-gap-horizontal-sm.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-horizontal-gap="sm"] {
+  --eds-generic-gap-horizontal: var(--eds-spacing-horizontal-sm);
+}

package/build/css/spacing/generic-gap-horizontal-xl.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-horizontal-gap="xl"] {
+  --eds-generic-gap-horizontal: var(--eds-spacing-horizontal-xl);
+}

package/build/css/spacing/generic-gap-horizontal-xs.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root, [data-horizontal-gap="xs"] {
+  --eds-generic-gap-horizontal: var(--eds-spacing-horizontal-xs);
+}

package/build/css/spacing/generic-gap-vertical-2xl.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-vertical-gap="2xl"] {
+  --eds-generic-gap-vertical: var(--eds-spacing-vertical-2xl);
+}

package/build/css/spacing/generic-gap-vertical-2xs.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-vertical-gap="2xs"] {
+  --eds-generic-gap-vertical: var(--eds-spacing-vertical-2xs);
+}

package/build/css/spacing/generic-gap-vertical-3xl.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-vertical-gap="3xl"] {
+  --eds-generic-gap-vertical: var(--eds-spacing-vertical-3xl);
+}

package/build/css/spacing/generic-gap-vertical-3xs.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-vertical-gap="3xs"] {
+  --eds-generic-gap-vertical: var(--eds-spacing-vertical-3xs);
+}

package/build/css/spacing/generic-gap-vertical-4xs.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-vertical-gap="4xs"] {
+  --eds-generic-gap-vertical: var(--eds-spacing-vertical-4xs);
+}

package/build/css/spacing/generic-gap-vertical-lg.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-vertical-gap="lg"] {
+  --eds-generic-gap-vertical: var(--eds-spacing-vertical-lg);
+}

package/build/css/spacing/generic-gap-vertical-md.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-vertical-gap="md"] {
+  --eds-generic-gap-vertical: var(--eds-spacing-vertical-md);
+}

package/build/css/spacing/generic-gap-vertical-none.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-vertical-gap="none"] {
+  --eds-generic-gap-vertical: 0;
+}