@muraldevkit/ds-foundation 2.17.0 → 2.19.0-dev-rMoq.1

package/src/styles/contextual-variables/index.scss

@@ -1,6 +1,3 @@
-@forward 'color';
 @forward 'spacing';
-@forward 'border';
 @forward 'typography';
-@forward 'shadows';
 @forward 'z-index';

package/src/styles/contextual-variables/spacing.scss

@@ -1,178 +1,17 @@
 ////
-/// Contextual Spacing Tokens
-/// Source: see internal documentation on "Spacing"
-/// (NOTE: these values are not finalized yet)
+/// Contextual Spacing Tokens — viewport-responsive overrides only.
+///
+/// Base values for every --mrl-space-* token are generated by Style Dictionary
+/// into src/styles/_tokens.scss from src/tokens/contextual-variables/spacing.json.
+///
+/// This file only carries the values that need to change at a breakpoint, since
+/// Style Dictionary emits a flat :root {} block and cannot model @media overrides.
+/// See architecture.md §2 ("Some token values change with viewport").
 /// @group variables
 ////
 
 :root {
-	// Focus offset
-	// We don't have a global variable for 1px width, so fine must be hard coded:
-	--mrl-space-offset-focus: 1px;
-
-	/* Spacing */
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-stack-components -> --mrl-spacing-06 -> calc(20 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-stack-components: var(--mrl-spacing-06);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-stack-controls -> --mrl-spacing-05 -> calc(16 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-stack-controls: var(--mrl-spacing-05);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-stack-controls-small -> --mrl-spacing-04 -> calc(12 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-stack-controls-small: var(--mrl-spacing-04);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-stack-section -> --mrl-spacing-07 -> calc(24 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-stack-section: var(--mrl-spacing-07);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-stack-section-divider -> --mrl-spacing-04 -> calc(12 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-stack-section-divider: var(--mrl-spacing-04);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-stack-section-divider-small -> --mrl-spacing-03 -> calc(8 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-stack-section-divider-small: var(--mrl-spacing-03);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-stack-section-divider-large -> --mrl-spacing-06 -> calc(20 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-stack-section-divider-large: var(--mrl-spacing-06);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-stack-section-divider-xlarge -> --mrl-spacing-08 -> calc(32 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-stack-section-divider-xlarge: var(--mrl-spacing-08);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-stack-section-divider-label -> --mrl-spacing-05 -> calc(16 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-stack-section-divider-label: var(--mrl-spacing-05);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-stack-siblings -> --mrl-spacing-04 -> calc(12 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-stack-siblings: var(--mrl-spacing-04);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-stack-related -> --mrl-spacing-03 -> calc(8 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-stack-related: var(--mrl-spacing-03);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-stack-related-small -> --mrl-spacing-02 -> calc(4 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-stack-related-small: var(--mrl-spacing-02);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-inset -> --mrl-spacing-03 -> calc(8 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-inset: var(--mrl-spacing-03);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-inset-container -> --mrl-spacing-08 -> calc(32 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-inset-container: var(--mrl-spacing-08);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-inset-container-large -> --mrl-spacing-05 -> calc(16 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-inset-container-large: var(--mrl-spacing-05);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-inset-large -> --mrl-spacing-05 -> calc(16 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-inset-large: var(--mrl-spacing-05);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-inset-control -> --mrl-spacing-06 -> calc(20 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-inset-control: var(--mrl-spacing-06);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-inset-control-large -> --mrl-spacing-05 -> calc(16 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-inset-control-large: var(--mrl-spacing-05);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-inline-related -> --mrl-spacing-03 -> calc(8 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-inline-related: var(--mrl-spacing-03);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-inline-sibling -> --mrl-spacing-04 -> calc(12 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-inline-sibling: var(--mrl-spacing-04);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-inline-sibling-small -> --mrl-spacing-02 -> calc(4 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-inline-sibling-small: var(--mrl-spacing-02);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-gutter -> --mrl-spacing-04 -> calc(12 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-gutter: var(--mrl-spacing-04);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-gutter-label -> --mrl-spacing-05 -> calc(16 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-gutter-label: var(--mrl-spacing-05);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-stack-subheading -> --mrl-spacing-05 -> calc(16 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-stack-subheading: var(--mrl-spacing-05);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-stack-title -> --mrl-spacing-07 -> calc(24 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-stack-title: var(--mrl-spacing-07);
-
-	///
-	/// Contextual spacing token.
-	/// --mrl-space-stack-title-related -> --mrl-spacing-05 -> calc(16 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-space-stack-title-related: var(--mrl-spacing-05);
-
 	@media only screen and (min-width: 600px) {
 		--mrl-space-inset-container-large: var(--mrl-spacing-08);
 	}
-
-	--mrl-space-inline-sibling-xsmall: var(--mrl-space-inline-sibling-small);
-
-	// Exception in Foundation used for controls like form inputs and buttons
-	--mrl-space-inset-control-small: calc(var(--mrl-spacing-03) + var(--mrl-spacing-01));
 }

package/src/styles/contextual-variables/typography.scss

@@ -1,400 +1,35 @@
 ////
-/// Contextual Typography Tokens
+/// Contextual Typography Tokens — viewport-responsive overrides only.
+///
+/// Base values for every --mrl-type-*, --mrl-body-font, and --mrl-heading-font
+/// token are generated by Style Dictionary into src/styles/_tokens.scss from
+/// src/tokens/contextual-variables/typography.json.
+///
+/// This file only carries the values that need to change at a breakpoint, since
+/// Style Dictionary emits a flat :root {} block and cannot model @media overrides.
+/// See architecture.md §2 ("Some token values change with viewport").
 /// @group variables
 ////
 
-// We have 6 different use cases for text: display, headlines, titles, body copy (text),
-// and interactive UI elements. For each category, the default is the medium, [primary] variation.
-// For use cases that have differences between mobile and desktop (display, and headline),
-// we implement mobile as the default since our implementation follows a mobile-first philosophy
-// for performance.
-
-:root {
-	--mrl-body-font: var(--mrl-font-family-01), sans-serif;
-	--mrl-heading-font: var(--mrl-font-family-01), sans-serif;
-	--mrl-heading-font-alt: var(--mrl-font-family-02), serif;
-
-	// Typography - Font Size
-	///
-	/// Contextual typography token.
-	/// --mrl-type-size-display -> --mrl-font-size-08 -> calc(32 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-type-size-display: var(--mrl-font-size-08);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-size-display-large -> --mrl-font-size-09 -> calc(40 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-type-size-display-large: var(--mrl-font-size-09);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-size-display-small -> --mrl-font-size-07 -> calc(24 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-type-size-display-small: var(--mrl-font-size-07);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-size-display-xsmall -> --mrl-font-size-06 -> calc(20 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-type-size-display-xsmall: var(--mrl-font-size-06);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-size-headline -> --mrl-font-size-06 -> calc(20 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-type-size-headline: var(--mrl-font-size-06);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-size-headline-large -> --mrl-font-size-06 -> calc(20 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-type-size-headline-large: var(--mrl-font-size-06);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-size-headline-small -> --mrl-font-size-04 -> calc(16 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-type-size-headline-small: var(--mrl-font-size-04);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-size-text -> --mrl-font-size-04 -> calc(16 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-type-size-text: var(--mrl-font-size-04);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-size-text-large -> --mrl-font-size-05 -> calc(18 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-type-size-text-large: var(--mrl-font-size-05);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-size-text-small -> --mrl-font-size-03 -> calc(14 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-type-size-text-small: var(--mrl-font-size-03);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-size-text-xsmall -> --mrl-font-size-02 -> calc(12 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-type-size-text-xsmall: var(--mrl-font-size-02);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-size-text-xxsmall -> --mrl-font-size-01 -> calc(11 / var(--mrl-baseline) * 1rem).
-	///
-	--mrl-type-size-text-xxsmall: var(--mrl-font-size-01);
-
-	// Typography - Line Height
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-title -> --mrl-line-height-05 -> 1.25.
-	///
-	--mrl-type-line-height-title: var(--mrl-line-height-05);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-title-large -> --mrl-line-height-06 -> 1.333.
-	///
-	--mrl-type-line-height-title-large: var(--mrl-line-height-06);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-title-small -> --mrl-line-height-08 -> 1.429.
-	///
-	--mrl-type-line-height-title-small: var(--mrl-line-height-08);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-title-xsmall -> --mrl-line-height-06 -> 1.333.
-	///
-	--mrl-type-line-height-title-xsmall: var(--mrl-line-height-06);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-title-xxsmall -> --mrl-line-height-06 -> 1.333.
-	///
-	--mrl-type-line-height-title-xxsmall: var(--mrl-line-height-06);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-display -> --mrl-line-height-02 -> 1.
-	///
-	--mrl-type-line-height-display: var(--mrl-line-height-02);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-display-large -> --mrl-line-height-02 -> 1.
-	///
-	--mrl-type-line-height-display-large: var(--mrl-line-height-02);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-display-small -> --mrl-line-height-02 -> 1.
-	///
-	--mrl-type-line-height-display-small: var(--mrl-line-height-02);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-display-xsmall -> --mrl-line-height-02 -> 1.
-	///
-	--mrl-type-line-height-display-xsmall: var(--mrl-line-height-02);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-headline -> --mrl-line-height-07 -> 1.4.
-	///
-	--mrl-type-line-height-headline: var(--mrl-line-height-07);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-headline-large -> --mrl-line-height-07 -> 1.4.
-	///
-	--mrl-type-line-height-headline-large: var(--mrl-line-height-07);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-headline-small -> --mrl-line-height-02 -> 1.
-	///
-	--mrl-type-line-height-headline-small: var(--mrl-line-height-02);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-text -> --mrl-line-height-09 -> 1.5.
-	///
-	--mrl-type-line-height-text: var(--mrl-line-height-09);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-text-large -> --mrl-line-height-10 -> 1.56.
-	///
-	--mrl-type-line-height-text-large: var(--mrl-line-height-10);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-text-small -> --mrl-line-height-08 -> 1.429.
-	///
-	--mrl-type-line-height-text-small: var(--mrl-line-height-08);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-text-xsmall -> --mrl-line-height-06 -> 1.333.
-	///
-	--mrl-type-line-height-text-xsmall: var(--mrl-line-height-06);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-text-xxsmall -> --mrl-line-height-08 -> 1.429.
-	///
-	--mrl-type-line-height-text-xxsmall: var(--mrl-line-height-08);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-interactive -> --mrl-line-height-09 -> 1.5.
-	///
-	--mrl-type-line-height-interactive: var(--mrl-line-height-09);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-interactive-large -> --mrl-line-height-10 -> 1.56.
-	///
-	--mrl-type-line-height-interactive-large: var(--mrl-line-height-10);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-interactive-small -> --mrl-line-height-08 -> 1.429.
-	///
-	--mrl-type-line-height-interactive-small: var(--mrl-line-height-08);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-line-height-interactive-xsmall -> --mrl-line-height-06 -> 1.333.
-	///
-	--mrl-type-line-height-interactive-xsmall: var(--mrl-line-height-06);
-
-	// Typography - Font Weight
-	///
-	/// Contextual typography token.
-	/// --mrl-type-weight-display -> --mrl-font-weight-01 -> 400.
-	///
-	--mrl-type-weight-display: var(--mrl-font-weight-01);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-weight-headline -> --mrl-font-weight-04 -> 700.
-	///
-	--mrl-type-weight-headline: var(--mrl-font-weight-04);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-weight-title -> --mrl-font-weight-04 -> 700.
-	///
-	--mrl-type-weight-title: var(--mrl-font-weight-04);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-weight-title-secondary -> --mrl-font-weight-02 -> 500.
-	///
-	--mrl-type-weight-title-secondary: var(--mrl-font-weight-02);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-weight-text -> --mrl-font-weight-01 -> 400.
-	///
-	--mrl-type-weight-text: var(--mrl-font-weight-01);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-weight-text-bold -> --mrl-font-weight-04 -> 700.
-	///
-	--mrl-type-weight-text-bold: var(--mrl-font-weight-04);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-weight-text-secondary -> --mrl-font-weight-01 -> 400.
-	///
-	--mrl-type-weight-text-secondary: var(--mrl-font-weight-01);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-weight-interactive -> --mrl-font-weight-04 -> 700.
-	///
-	--mrl-type-weight-interactive: var(--mrl-font-weight-04);
-
-	// Typography - Letter Spacing
-	///
-	/// Contextual typography token.
-	/// --mrl-type-spacing-display -> --mrl-letter-spacing-03 -> 0%.
-	///
-	--mrl-type-spacing-display: var(--mrl-letter-spacing-03);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-spacing-display-large -> --mrl-letter-spacing-02 -> -1%.
-	///
-	--mrl-type-spacing-display-large: var(--mrl-letter-spacing-02);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-spacing-display-small -> --mrl-letter-spacing-02 -> -1%.
-	///
-	--mrl-type-spacing-display-small: var(--mrl-letter-spacing-02);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-spacing-display-xsmall -> --mrl-letter-spacing-02 -> -1%.
-	///
-	--mrl-type-spacing-display-xsmall: var(--mrl-letter-spacing-02);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-spacing-headline -> --mrl-letter-spacing-03 -> 0%.
-	///
-	--mrl-type-spacing-headline: var(--mrl-letter-spacing-03);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-spacing-headline-large -> --mrl-letter-spacing-03 -> 0%.
-	///
-	--mrl-type-spacing-headline-large: var(--mrl-letter-spacing-03);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-spacing-headline-small -> --mrl-letter-spacing-04 -> 1%.
-	///
-	--mrl-type-spacing-headline-small: var(--mrl-letter-spacing-04);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-spacing-text -> --mrl-letter-spacing-03 -> 0%.
-	///
-	--mrl-type-spacing-text: var(--mrl-letter-spacing-03);
-
-	///
-	/// Contextual typography token.
-	/// --mrl-type-spacing-interactive-xsmall -> --mrl-letter-spacing-04 -> 1%.
-	///
-	--mrl-type-spacing-interactive-xsmall: var(--mrl-letter-spacing-04);
-
-	// Toggleable label mixin variables
-	// Exceptional value: this mixin renders a 10px font, which we have no variable for
-	--mrl-type-size-toggleable-label: calc(10 / var(--mrl-baseline) * 1rem);
-	--mrl-type-weight-toggleable-label: var(--mrl-font-weight-03);
-}
-
 // @todo - 1779 - Responsive Grid, Phase 1
 // Waiting on Design before we can setup our breakpoint variables with proper values
 @media screen and (min-width: 600px) {
 	:root {
 		// Typography - Font Size
-		///
-		/// Contextual typography token.
-		/// --mrl-type-size-display -> --mrl-font-size-09 -> calc(40 / var(--mrl-baseline) * 1rem).
-		///
 		--mrl-type-size-display: var(--mrl-font-size-09);
-
-		///
-		/// Contextual typography token.
-		/// --mrl-type-size-display-large -> --mrl-font-size-10 -> calc(48 / var(--mrl-baseline) * 1rem).
-		///
 		--mrl-type-size-display-large: var(--mrl-font-size-10);
-
-		///
-		/// Contextual typography token.
-		/// --mrl-type-size-display-small -> --mrl-font-size-08 -> calc(32 / var(--mrl-baseline) * 1rem).
-		///
 		--mrl-type-size-display-small: var(--mrl-font-size-08);
-
-		///
-		/// Contextual typography token.
-		/// --mrl-type-size-display-xsmall -> --mrl-font-size-07 -> calc(24 / var(--mrl-baseline) * 1rem).
-		///
 		--mrl-type-size-display-xsmall: var(--mrl-font-size-07);
-
-		///
-		/// Contextual typography token.
-		/// --mrl-type-size-headline -> --mrl-font-size-06 -> calc(20 / var(--mrl-baseline) * 1rem).
-		///
 		--mrl-type-size-headline: var(--mrl-font-size-06);
-
-		///
-		/// Contextual typography token.
-		/// --mrl-type-size-headline-large -> --mrl-font-size-07 -> calc(24 / var(--mrl-baseline) * 1rem).
-		///
 		--mrl-type-size-headline-large: var(--mrl-font-size-07);
-
-		///
-		/// Contextual typography token.
-		/// --mrl-type-size-headline-small -> --mrl-font-size-04 -> calc(16 / var(--mrl-baseline) * 1rem).
-		///
 		--mrl-type-size-headline-small: var(--mrl-font-size-04);
 
 		// Typography - Line Height
-		///
-		/// Contextual typography token.
-		/// --mrl-type-line-height-headline -> --mrl-line-height-07 -> 1.4.
-		///
 		--mrl-type-line-height-headline: var(--mrl-line-height-07);
-
-		///
-		/// Contextual typography token.
-		/// --mrl-type-line-height-headline-large -> --mrl-line-height-06 -> 1.333.
-		///
 		--mrl-type-line-height-headline-large: var(--mrl-line-height-06);
-
-		///
-		/// Contextual typography token.
-		/// --mrl-type-line-height-headline-small -> --mrl-line-height-09 -> 1.5.
-		///
 		--mrl-type-line-height-headline-small: var(--mrl-line-height-09);
 
 		// Typography - Letter Spacing
-		///
-		/// Contextual typography token.
-		/// --mrl-type-spacing-headline-small -> --mrl-letter-spacing-03 -> 0%.
-		///
 		--mrl-type-spacing-headline-small: var(--mrl-letter-spacing-03);
 	}
 }

package/src/styles/index.scss

@@ -5,13 +5,13 @@
 
 // @todo - some of the following files export CSS, providing an option for adopters
 // who do not want the full CSS output and prefer to use mixins directly without bloating their code base
-@forward "global-variables/index";
-@forward "contextual-variables/index";
-@forward "mixins";
-@forward "focus";
-@forward "functions";
-@forward "baseline";
-@forward "grid";
-@forward "spacing";
-@forward "typography";
-@forward "skeletons/index";
+@forward 'tokens';
+@forward 'contextual-variables/index';
+@forward 'mixins';
+@forward 'focus';
+@forward 'functions';
+@forward 'baseline';
+@forward 'grid';
+@forward 'spacing';
+@forward 'typography';
+@forward 'skeletons/index';

package/dist/tokens/border.json

@@ -1,39 +0,0 @@
-{
-	"radii": {
-		"01": {
-			"value": "2"
-		},
-		"02": {
-			"value": "4"
-		},
-		"03": {
-			"value": "8"
-		},
-		"04": {
-			"value": "12"
-		},
-		"05": {
-			"value": "16"
-		},
-		"06": {
-			"value": "24"
-		},
-		"07": {
-			"value": "32"
-		},
-		"08": {
-			"value": "40"
-		}
-	},
-	"stroke": {
-		"01": {
-			"value": "2"
-		},
-		"02": {
-			"value": "2"
-		},
-		"03": {
-			"value": "2"
-		}
-	}
-}