@equinor/eds-tokens 2.0.0 → 2.1.0

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-spacing-inline-md);
+  padding: var(--eds-selectable-space-vertical) var(--eds-selectable-space-horizontal);
   border-radius: var(--eds-spacing-border-radius-rounded);
 }
 ```
@@ -135,201 +135,114 @@ const darkSurface = darkSemanticNested.bg.neutral.surface // "#262626"
 * **Spacing** -- Layout spacing including inline, stack, inset, and border radius
 * **Typography** -- Font sizes, line heights, and font families (requires font files)
 
-### Spacing Density Modes
-
-The spacing system supports different density modes:
-
-* `comfortable` -- Default density for most applications
-* `spacious` -- Increased spacing for better readability
-
-### Foundation CSS (Typography & Spacing)
-
-The foundation stylesheet provides typography and spacing styles for the EDS design system. This includes utility classes and data attributes for:
+### Typography variables that adapt to data-attributes
+  * Font family setup (UI and Header fonts)
+  * Font size data attributes (`[data-text-size='xs']`, `[data-text-size='sm']`, etc.)
+  * Line height data attributes (`[data-line-height='default']`, `[data-line-height='squished']`)
+  * Font weight data attributes (`[data-font-weight='lighter']`, `[data-font-weight='normal']`, `[data-font-weight='bolder']`)
+  * Letter spacing data attributes (`[data-tracking='tight']`, `[data-tracking='normal']`, `[data-tracking='wide']`)
+  * Baseline grid alignment (`[data-baseline='grid']`, `[data-baseline='center']`)
 
-* **Typography:** Font families, sizes, weights, line heights, letter spacing, and baseline alignment
-* **Spacing:** Inline spacing, stack spacing, inset spacing (padding), border radius, and icon spacing
 
-> **Note:** The foundation CSS includes typography and spacing utility classes. For CSS variables (colors, spacing variables, typography variables), import `@equinor/eds-tokens/css/variables` separately.
+#### Using Typography variables
 
-#### Import Foundation CSS
+The data-font-family sets these CSS custom properties:
 
 ```css
-@import '@equinor/eds-tokens/css/foundation';
-```
-
-Or in JavaScript/TypeScript:
-
-```tsx
-import '@equinor/eds-tokens/css/foundation.css'
+[data-font-family] {
+  font-size: var(--eds-typography-font-size);
+  font-family: var(--eds-typography-font-family);
+  font-weight: var(--eds-typography-font-weight);
+  line-height: var(--eds-typography-line-height);
+  letter-spacing: var(--eds-typography-tracking);
+}
 ```
 
-The foundation stylesheet includes:
+**Using Data Attributes**
 
-* **Typography Styles** -- Complete typography system with:
-  * Font family setup (UI and Header fonts)
-  * Font size utilities (`text-xs`, `text-sm`, `text-md`, etc.)
-  * Line height utilities (`line-height-default`, `line-height-squished`)
-  * Font weight utilities (`font-lighter`, `font-normal`, `font-bolder`)
-  * Letter spacing utilities (`tracking-tight`, `tracking-normal`, `tracking-wide`)
-  * Baseline grid alignment (`text-baseline-grid`, `text-baseline-center`)
-  * Icon sizing utilities (`.text-icon`)
-
-* **Spacing Utilities** -- Complete spacing system with:
-  * Inline spacing utilities (`spacing-inline-xs`, `spacing-inline-sm`, `spacing-inline-md`, etc.) for horizontal spacing between elements
-  * Stack spacing utilities (`spacing-stack-xs`, `spacing-stack-sm`, `spacing-stack-md`, etc.) for vertical spacing between stacked elements
-  * Inset spacing utilities (`spacing-inset-xs-inline`, `spacing-inset-md-squared`, etc.) for padding within elements
-  * Border radius utilities (`spacing-border-radius-rounded`, `spacing-border-radius-pill`, `spacing-border-radius-none`)
-  * Icon spacing utilities (`spacing-icon-gap-xs`, `spacing-icon-gap-sm`, etc.) for spacing between icons and text
-
-> **For EDS React components:** When using `@equinor/eds-core-react`, you need to import both the CSS variables and foundation CSS:
->
-> ```tsx
-> import '@equinor/eds-tokens/css/variables.css'
-> import '@equinor/eds-tokens/css/foundation.css'
-> ```
-
-#### Using Typography Classes
-
-The foundation CSS provides utility classes and data attributes for typography:
+Set typography properties using data attributes:
 
 ```html
-<!-- Using data attributes -->
-<div data-font-family="ui" data-text-size="md" data-line-height="default">
-  UI font text
-</div>
-
-<div data-font-family="header" data-text-size="xl" data-font-weight="bolder">
-  Header font text
-</div>
-
-<!-- Using utility classes -->
-<div class="font-ui text-md line-height-default">
+<!-- UI font with medium size -->
+<p data-font-family="ui" data-text-size="md" data-line-height="default">
   UI font text
-</div>
+</p>
 
-<div class="font-heading text-xl font-bolder">
+<!-- Header font with extra large size and bolder weight -->
+<h1 data-font-family="header" data-text-size="xl" data-font-weight="bolder">
   Header font text
-</div>
+</h1>
 
 <!-- Baseline grid alignment -->
-<div class="font-ui text-md text-baseline-grid">
+<p data-font-family="ui" data-text-size="md" data-baseline="grid">
   Aligned to 4px baseline grid
-</div>
+</p>
 ```
+### Spacing variables for consistent spacing that adapt to density modes and space proportions
 
-#### Using Spacing Classes
+#### Density Modes
 
-The foundation CSS provides utility classes and data attributes for spacing:
+The spacing system supports different density modes:
 
-```html
-<!-- Inline spacing - horizontal spacing between elements -->
-<div class="spacing-inline-md">
-  <!-- Uses gap property for horizontal spacing -->
-  <span>Item 1</span>
-  <span>Item 2</span>
-</div>
-
-<!-- Or using data attributes -->
-<div data-spacing-inline="md">
-  <span>Item 1</span>
-  <span>Item 2</span>
-</div>
-
-<!-- Stack spacing - vertical spacing between stacked elements -->
-<div class="spacing-stack-lg">
-  <!-- Uses gap property for vertical spacing -->
-  <div>Item 1</div>
-  <div>Item 2</div>
-</div>
-
-<!-- Or using data attributes -->
-<div data-spacing-stack="lg">
-  <div>Item 1</div>
-  <div>Item 2</div>
-</div>
-
-<!-- Inset spacing - padding within elements -->
-<div class="spacing-inset-md-squared">
-  <!-- Padding both inline and block -->
-  Content with padding
-</div>
-
-<div class="spacing-inset-sm-inline">
-  <!-- Padding only inline (horizontal) -->
-  Content with horizontal padding
-</div>
-
-<div class="spacing-inset-xs-stack-squished">
-  <!-- Padding only block (vertical), squished variant -->
-  Content with vertical padding
-</div>
-
-<!-- Using data attributes for inset -->
-<div data-spacing-inset-size="md" data-spacing-inset-variation="squared">
-  Content with padding
-</div>
-
-<!-- Border radius -->
-<div class="spacing-border-radius-rounded">
-  Rounded corners
-</div>
-
-<div class="spacing-border-radius-pill">
-  Pill-shaped (fully rounded)
-</div>
-
-<!-- Icon spacing -->
-<div class="spacing-icon-gap-md">
-  <icon />Text with icon
-</div>
-```
+* `spacious` -- Default density for most applications 
+* `comfortable` -- All the spacing values goes down one level on the scale in a way to maximize the space. 
+
+#### Using spacing variables with data attributes
 
-#### Spacing Variables
+**Selectable Spacing** (for buttons, cards, and interactive elements)
 
-The spacing system uses CSS custom properties that automatically adapt to density modes (comfortable/spacious). These variables are provided by the CSS variables stylesheet (`@equinor/eds-tokens/css/variables`):
+Adapt to `data-selectable-space` (xs/sm/md/lg/xl) and `data-space-proportions` (squished/squared/stretched):
 
 ```css
-.my-custom-layout {
-  /* Use spacing variables */
-  gap: var(--eds-spacing-inline-md);
-  padding-inline: var(--eds-spacing-inset-md-inline);
-  padding-block: var(--eds-spacing-inset-md-stack-squared);
-  border-radius: var(--eds-spacing-border-radius-rounded);
+.button {
+  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);
 }
+```
 
-.my-flex-container {
-  display: flex;
-  gap: var(--eds-spacing-inline-lg);
-}
+```html
+  <button class="button" data-selectable-space="md" data-space-proportions="squished">
+    Button
+  </button>
+```
+
+**Container Spacing** (for container elements)
 
-.my-stacked-container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--eds-spacing-stack-md);
+Spacing values that adapt to `data-space-proportions`:
+
+```css
+.container {
+  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);
 }
 ```
 
-#### Typography Variables
+**Page Spacing** (for page-level elements)
 
-The typography system uses CSS custom properties that are automatically set based on the font family and size. These variables are provided by the CSS variables stylesheet (`@equinor/eds-tokens/css/variables`):
+Spacing values that adapt to `data-space-proportions`:
 
 ```css
-.my-custom-text {
-  /* Use typography variables */
-  font-family: var(--eds-typography-ui-body-font-family);
-  font-size: var(--eds-typography-ui-body-md-font-size);
-  line-height: var(--eds-typography-ui-body-md-lineheight-default);
-  font-weight: var(--eds-typography-ui-body-md-font-weight-normal);
-  letter-spacing: var(--eds-typography-ui-body-md-tracking-normal);
+.page {
+  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);
 }
 ```
 
 #### Baseline Grid Alignment
 
-The foundation CSS includes baseline grid alignment for consistent vertical rhythm:
+The foundation CSS includes baseline grid alignment for consistent vertical rhythm using data attributes:
 
-* `text-baseline-grid` -- Aligns text baseline to 4px grid intervals
-* `text-baseline-center` -- Centers text vertically while maintaining 4px grid alignment
+* `data-baseline="grid"` -- Aligns text baseline to 4px grid intervals
+* `data-baseline="center"` -- Centers text vertically while maintaining 4px grid alignment
+
+```html
+<p data-font-family="ui" data-text-size="md" data-baseline="grid">
+  Text aligned to baseline grid
+</p>
+```
 
 These utilities use modern CSS features (`text-box-trim`) and gracefully degrade in older browsers.
 

package/build/css/index-variables.css

@@ -2,9 +2,8 @@
 @import 'color/static/variables.css';
 @import 'color/dynamic/variables.css';
 
-@import 'registered-properties.css';
-@import 'spacing/spacious-trimmed.css';
-@import 'spacing/comfortable-trimmed.css';
+@import 'spacing/spacious.css';
+@import 'spacing/comfortable.css';
 
 @import 'spacing/space-proportions-squished.css';
 @import 'spacing/space-proportions-squared.css';
@@ -15,3 +14,88 @@
 @import 'spacing/selectable-space-md.css';
 @import 'spacing/selectable-space-lg.css';
 @import 'spacing/selectable-space-xl.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';