@muraldevkit/ds-foundation 2.25.0 → 2.27.0

package/src/styles/_tokens.scss

@@ -230,17 +230,17 @@
 	--mrl-letter-spacing-03: 0%; /** Letter spacing token. */
 	--mrl-letter-spacing-04: 1%; /** Letter spacing token. */
 	--mrl-letter-spacing-05: 2%; /** Letter spacing token. */
-	--mrl-font-weight-01: 400; /** Font weight token. */
-	--mrl-font-weight-02: 500; /** Font weight token. */
-	--mrl-font-weight-03: 600; /** Font weight token. */
-	--mrl-font-weight-04: 700; /** Font weight token. */
-	--mrl-font-weight-05: 800; /** Font weight token. */
+	--mrl-font-weight-01: 400; /** Regular. Font weight token. */
+	--mrl-font-weight-02: 500; /** Medium. Font weight token. */
+	--mrl-font-weight-03: 600; /** Semi-bold. Font weight token. */
+	--mrl-font-weight-04: 700; /** Bold. Font weight token. */
+	--mrl-font-weight-05: 800; /** Extra-bold. Font weight token. */
 	--mrl-line-width-border-fine: 1px; /** Fine border width. No global stroke token for 1px, so this is hard-coded. */
 	--mrl-color-background-page: rgb(
 		243,
 		245,
 		246
-	); /** Intentional one-off page background (#f3f5f6). */
+	); /** This is an intentional one-off contextual token that does not use our standard color scales. It should only be used as the background color for non-canvas pages. */
 
 	--mrl-space-offset-focus: 1px; /** Focus ring offset. No global spacing token for 1px, so this is hard-coded. */
 	--mrl-space-inset-control-small: calc(
@@ -262,20 +262,32 @@
 	--mrl-line-width-focus: var(--mrl-stroke-01); /** Focus ring width. */
 	--mrl-line-width-control: var(--mrl-stroke-01); /** Border width for controls. */
 	--mrl-line-width-divider: var(--mrl-stroke-01); /** Width for divider lines. */
-	--mrl-border-radius-tight: var(--mrl-radii-01); /** Tight corner radius. */
-	--mrl-border-radius-content: var(--mrl-radii-02); /** Default content corner radius. */
+	--mrl-border-radius-tight: var(
+		--mrl-radii-01
+	); /** When the content has tight spacing considerations. */
+
+	--mrl-border-radius-content: var(--mrl-radii-02); /** For elements that are static content. */
 	--mrl-border-radius-content-large: var(--mrl-radii-03); /** Large content corner radius. */
-	--mrl-border-radius-functional: var(--mrl-radii-03); /** Corner radius for functional elements. */
+	--mrl-border-radius-functional: var(
+		--mrl-radii-03
+	); /** For interactive elements. If a component can be both static and functional (e.g., Avatars), use the functional token over the "Content" token. */
+
 	--mrl-border-radius-functional-large: var(
 		--mrl-radii-04
 	); /** Large corner radius for functional elements. */
 
-	--mrl-border-radius-container: var(--mrl-radii-04); /** Corner radius for containers. */
+	--mrl-border-radius-container: var(
+		--mrl-radii-04
+	); /** For components/elements that are shells, meaning that the element itself doesn't typically know or care what the child elements are and simply provide a bounding element, for example, drawers, popovers, etc. */
+
 	--mrl-border-radius-container-large: var(
 		--mrl-radii-05
-	); /** Large corner radius for containers. */
+	); /** For components/elements that are large, shell containers (e.g., modals or other near full-page elements). */
+
+	--mrl-border-radius-rounded: var(
+		--mrl-radii-07
+	); /** For components/elements that intentionally have an overly rounded appearance. Special note for elements that are pure circles (e.g. spinner, radio button, etc.), in these cases use a component token overwrite to make it 100% rounded. */
 
-	--mrl-border-radius-rounded: var(--mrl-radii-07); /** Rounded corner radius. */
 	--mrl-border-radius-rounded-large: var(--mrl-radii-08); /** Large rounded corner radius. */
 	--mrl-color-focus: rgba(var(--mrl-blue-70), 1); /** Focus ring on interactive elements. */
 	--mrl-color-focus-inverse: rgba(
@@ -327,47 +339,47 @@
 	--mrl-color-background-info: rgba(
 		var(--mrl-status-info),
 		1
-	); /** Background for info status surfaces. */
+	); /** Use for all use cases where we denote a status and there is a colored background. Use --mrl-color-text-inverse with these background colors. */
 
 	--mrl-color-background-info-light: rgba(
 		var(--mrl-status-info-light),
 		1
-	); /** Light background for info status surfaces. */
+	); /** Use for background of inline block notifications and badges. */
 
 	--mrl-color-background-success: rgba(
 		var(--mrl-status-success),
 		1
-	); /** Background for success status surfaces. */
+	); /** Use for all use cases where we denote a status and there is a colored background. Use --mrl-color-text-inverse with these background colors. */
 
 	--mrl-color-background-success-light: rgba(
 		var(--mrl-status-success-light),
 		1
-	); /** Light background for success status surfaces. */
+	); /** Use for background of inline block notifications and badges. */
 
 	--mrl-color-background-warning: rgba(
 		var(--mrl-status-warning),
 		1
-	); /** Background for warning status surfaces. */
+	); /** Use for all use cases where we denote a status and there is a colored background. Use --mrl-color-text-inverse with these background colors. */
 
 	--mrl-color-background-warning-light: rgba(
 		var(--mrl-status-warning-light),
 		1
-	); /** Light background for warning status surfaces. */
+	); /** Use for background of inline block notifications and badges. */
 
 	--mrl-color-background-error: rgba(
 		var(--mrl-status-error),
 		1
-	); /** Background for error status surfaces. */
+	); /** Use for all use cases where we denote a status and there is a colored background. Use --mrl-color-text-inverse with these background colors. */
 
 	--mrl-color-background-error-light: rgba(
 		var(--mrl-status-error-light),
 		1
-	); /** Light background for error status surfaces. */
+	); /** Use for background of inline block notifications and badges. */
 
 	--mrl-color-background-private: rgba(
 		var(--mrl-gray-100),
 		1
-	); /** Background for private content warnings. */
+	); /** Use for all use cases where we denote a status and there is a colored background. Use --mrl-color-text-inverse with these background colors. The private variable is deprecated and will be removed in v2. */
 
 	--mrl-color-background-inverse: rgba(
 		var(--mrl-gray-100),
@@ -377,40 +389,52 @@
 	--mrl-color-background-inverse-hover: rgba(
 		var(--mrl-gray-90),
 		1
-	); /** Inverse surface background, hover state. */
+	); /** Use only with --mrl-color-background-inverse; other colored backgrounds will have a different style set that's TBD. */
 
 	--mrl-color-background-disabled: rgba(
 		var(--mrl-gray-40),
 		1
-	); /** Background for disabled controls. */
+	); /** Use only when there is a background on a disabled element and the text used would be --mrl-color-text-inverse. In the product the current usage aligns to --mrl-gray-50 but Design provided new guidelines for all future work. */
+
+	--mrl-color-line: rgba(var(--mrl-gray-70), 1); /** Use with the Base style set. */
+	--mrl-color-line-hover: rgba(var(--mrl-gray-90), 1); /** Use with the Base style set. */
+	--mrl-color-line-active: rgba(var(--mrl-gray-100), 1); /** Use with the Base style set. */
+	--mrl-color-line-selected: rgba(var(--mrl-gray-90), 1); /** Use with the Base style set. */
+	--mrl-color-line-disabled: rgba(
+		var(--mrl-gray-40),
+		1
+	); /** In the product the current usage aligns to --mrl-gray-50 but Design provided new guidelines for all future work. */
 
-	--mrl-color-line: rgba(var(--mrl-gray-70), 1); /** Default line/border color. */
-	--mrl-color-line-hover: rgba(var(--mrl-gray-90), 1); /** Line color, hover state. */
-	--mrl-color-line-active: rgba(var(--mrl-gray-100), 1); /** Line color, active state. */
-	--mrl-color-line-selected: rgba(var(--mrl-gray-90), 1); /** Line color, selected state. */
-	--mrl-color-line-disabled: rgba(var(--mrl-gray-40), 1); /** Line color for disabled controls. */
 	--mrl-color-line-secondary: rgba(var(--mrl-gray-30), 1); /** Secondary line color. */
 	--mrl-color-line-decorative: rgba(
 		var(--mrl-blue-20),
 		1
 	); /** Line color for decorative, non-interactive surfaces. */
 
-	--mrl-color-line-divider: rgba(var(--mrl-gray-20), 1); /** Divider line color. */
+	--mrl-color-line-divider: rgba(
+		var(--mrl-gray-20),
+		1
+	); /** Design calls this Light but we want a more semantic name in the code base. */
+
 	--mrl-color-line-divider-inverse: rgba(
 		var(--mrl-gray-80),
 		1
-	); /** Divider line color on inverse surfaces. */
+	); /** Design calls this Dark but we want a more semantic name in the code base. This is intended for use on dark or saturated backgrounds. */
+
+	--mrl-color-line-emph: rgba(
+		var(--mrl-gray-20),
+		1
+	); /** Use with the Base with Emphasis style set. */
 
-	--mrl-color-line-emph: rgba(var(--mrl-gray-20), 1); /** Emphasized line color. */
 	--mrl-color-line-emph-hover: rgba(
 		var(--mrl-gray-90),
 		1
-	); /** Emphasized line color, hover state. */
+	); /** Use with the Base with Emphasis style set. */
 
 	--mrl-color-line-emph-active: rgba(
 		var(--mrl-black),
 		1
-	); /** Emphasized line color, active state. */
+	); /** Use with the Base with Emphasis style set. */
 
 	--mrl-color-line-inverse: rgba(var(--mrl-white), 1); /** Line color on inverse surfaces. */
 	--mrl-color-line-inverse-disabled: rgba(
@@ -424,67 +448,107 @@
 	--mrl-color-icon-emph-selected: rgba(
 		var(--mrl-gray-100),
 		1
-	); /** Emphasized icon color, selected state. */
+	); /** Used when there is an icon and you're following the Base with Emphasis style set. For all other states, the icon is the same color as the text. */
 
 	--mrl-color-input-icon-default: rgba(
 		var(--mrl-gray-70),
 		1
 	); /** Default icon color inside form inputs. */
 
-	--mrl-color-text: rgba(var(--mrl-gray-80), 1); /** Default body text color. */
-	--mrl-color-text-hover: rgba(var(--mrl-gray-90), 1); /** Text color, hover state. */
-	--mrl-color-text-active: rgba(var(--mrl-gray-90), 1); /** Text color, active state. */
-	--mrl-color-text-selected: rgba(var(--mrl-gray-100), 1); /** Text color, selected state. */
-	--mrl-color-text-disabled: rgba(var(--mrl-gray-40), 1); /** Text color for disabled controls. */
+	--mrl-color-text: rgba(var(--mrl-gray-80), 1); /** Use for the Base style set. */
+	--mrl-color-text-hover: rgba(var(--mrl-gray-90), 1); /** Use for the Base style set. */
+	--mrl-color-text-active: rgba(var(--mrl-gray-90), 1); /** Use for the Base style set. */
+	--mrl-color-text-selected: rgba(var(--mrl-gray-100), 1); /** Use for the Base style set. */
+	--mrl-color-text-disabled: rgba(
+		var(--mrl-gray-40),
+		1
+	); /** In the product the current usage aligns to --mrl-gray-50 but Design provided new guidelines for all future work. */
+
 	--mrl-color-text-disabled-inverse: rgba(
 		var(--mrl-white),
 		1
-	); /** Disabled text color on inverse surfaces. */
+	); /** Use when the background of the element uses --mrl-color-background-disabled. */
+
+	--mrl-color-text-emph: rgba(
+		var(--mrl-gray-90),
+		1
+	); /** Use for the Base with Emphasis style set. */
 
-	--mrl-color-text-emph: rgba(var(--mrl-gray-90), 1); /** Emphasized text color. */
 	--mrl-color-text-emph-hover: rgba(
 		var(--mrl-gray-90),
 		1
-	); /** Emphasized text color, hover state. */
+	); /** Use for the Base with Emphasis style set. */
 
 	--mrl-color-text-emph-active: rgba(
 		var(--mrl-black),
 		1
-	); /** Emphasized text color, active state. */
+	); /** Use for the Base with Emphasis style set. */
+
+	--mrl-color-text-inverse: rgba(
+		var(--mrl-white),
+		1
+	); /** Use for Inverse or any saturated background color, such as statuses. */
 
-	--mrl-color-text-inverse: rgba(var(--mrl-white), 1); /** Text color on inverse surfaces. */
 	--mrl-color-text-inverse-secondary: rgba(
 		var(--mrl-gray-10),
 		1
-	); /** Secondary text color on inverse surfaces. */
+	); /** Use for Inverse or any saturated background color, such as statuses. This should only be used when there are multiple text colors within a single element. If there is only one color, always use --mrl-color-text-inverse to create consistency. */
+
+	--mrl-color-text-inverse-hover: rgba(
+		var(--mrl-white),
+		1
+	); /** Use for Inverse or any saturated background color, such as statuses. */
 
-	--mrl-color-text-inverse-hover: rgba(var(--mrl-white), 1); /** Inverse text color, hover state. */
 	--mrl-color-text-inverse-active: rgba(
 		var(--mrl-white),
 		1
-	); /** Inverse text color, active state. */
+	); /** Use for Inverse or any saturated background color, such as statuses. */
 
 	--mrl-color-text-inverse-selected: rgba(
 		var(--mrl-white),
 		1
-	); /** Inverse text color, selected state. */
+	); /** Use for Inverse or any saturated background color, such as statuses. */
+
+	--mrl-color-text-secondary: rgba(
+		var(--mrl-gray-70),
+		1
+	); /** Use for static text only; if you're working on an interactive element, use one of the defined style sets. This is also used for placeholder text within form elements. */
+
+	--mrl-color-text-label: rgba(
+		var(--mrl-gray-100),
+		1
+	); /** Use for static text only; if you're working on an interactive element, use one of the defined style sets. */
+
+	--mrl-color-text-heading: rgba(
+		var(--mrl-gray-100),
+		1
+	); /** Use for static text only; if you're working on an interactive element, use one of the defined style sets. */
 
-	--mrl-color-text-secondary: rgba(var(--mrl-gray-70), 1); /** Secondary text color. */
-	--mrl-color-text-label: rgba(var(--mrl-gray-100), 1); /** Text color for form labels. */
-	--mrl-color-text-heading: rgba(var(--mrl-gray-100), 1); /** Text color for headings. */
 	--mrl-color-text-success: rgba(
 		var(--mrl-status-success),
 		1
-	); /** Text color for success messages. */
+	); /** Use when the background is white/transparent only; for elements with a status color background use --mrl-color-text-inverse. */
+
+	--mrl-color-text-warning: rgba(
+		var(--mrl-gray-90),
+		1
+	); /** Use when the background is white/transparent only; for elements with a status color background use --mrl-color-text-inverse. */
 
-	--mrl-color-text-warning: rgba(var(--mrl-gray-90), 1); /** Text color for warning messages. */
 	--mrl-color-text-warning-light: rgba(
 		var(--mrl-gray-80),
 		1
 	); /** Text color for light-warning messages. */
 
-	--mrl-color-text-error: rgba(var(--mrl-status-error), 1); /** Text color for error messages. */
-	--mrl-color-text-info: rgba(var(--mrl-status-info), 1); /** Text color for info messages. */
+	--mrl-color-text-error: rgba(
+		var(--mrl-status-error),
+		1
+	); /** Use when the background is white/transparent only; for elements with a status color background use --mrl-color-text-inverse. */
+
+	--mrl-color-text-info: rgba(
+		var(--mrl-status-info),
+		1
+	); /** Use when the background is white/transparent only; for elements with a status color background use --mrl-color-text-inverse. */
+
 	--mrl-color-text-private: rgba(var(--mrl-gray-100), 1); /** Text color for private content. */
 	--mrl-color-background-hover: var(--mrl-black-opacity-00); /** Hover overlay. */
 	--mrl-color-background-inverse-hover-opacity: var(
@@ -570,31 +634,57 @@
 
 	--mrl-space-gutter: var(--mrl-spacing-04); /** Default grid/layout gutter. */
 	--mrl-space-gutter-label: var(--mrl-spacing-05); /** Gutter spacing around labels. */
-	--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;
-	--mrl-type-size-display: var(--mrl-font-size-08); /** Contextual typography token. */
-	--mrl-type-size-display-large: var(--mrl-font-size-09); /** Contextual typography token. */
-	--mrl-type-size-display-small: var(--mrl-font-size-07); /** Contextual typography token. */
-	--mrl-type-size-display-xsmall: var(--mrl-font-size-06); /** Contextual typography token. */
+	--mrl-body-font: var(--mrl-font-family-01), sans-serif; /** Used for all body copy. */
+	--mrl-heading-font: var(--mrl-font-family-01), sans-serif; /** Used for most headings. */
+	--mrl-heading-font-alt:
+		var(--mrl-font-family-02), serif; /** Used for headings with kind="display". */
+
+	--mrl-type-size-display: var(
+		--mrl-font-size-08
+	); /** When the viewport is 600px or wider, this token uses --mrl-font-size-09. */
+
+	--mrl-type-size-display-large: var(
+		--mrl-font-size-09
+	); /** When the viewport is 600px or wider, this token uses --mrl-font-size-10. */
+
+	--mrl-type-size-display-small: var(
+		--mrl-font-size-07
+	); /** When the viewport is 600px or wider, this token uses --mrl-font-size-08. */
+
+	--mrl-type-size-display-xsmall: var(
+		--mrl-font-size-06
+	); /** When the viewport is 600px or wider, this token uses --mrl-font-size-07. */
+
 	--mrl-type-size-headline: var(--mrl-font-size-06); /** Contextual typography token. */
-	--mrl-type-size-headline-large: var(--mrl-font-size-06); /** Contextual typography token. */
+	--mrl-type-size-headline-large: var(
+		--mrl-font-size-06
+	); /** When the viewport is 600px or wider, this token uses --mrl-font-size-07. */
+
 	--mrl-type-size-headline-small: var(--mrl-font-size-04); /** Contextual typography token. */
 	--mrl-type-size-text: var(--mrl-font-size-04); /** Contextual typography token. */
 	--mrl-type-size-text-large: var(--mrl-font-size-05); /** Contextual typography token. */
 	--mrl-type-size-text-small: var(--mrl-font-size-03); /** Contextual typography token. */
 	--mrl-type-size-text-xsmall: var(--mrl-font-size-02); /** Contextual typography token. */
 	--mrl-type-size-text-xxsmall: var(--mrl-font-size-01); /** Contextual typography token. */
-	--mrl-type-line-height-title: var(--mrl-line-height-05); /** Contextual typography token. */
-	--mrl-type-line-height-title-large: var(--mrl-line-height-06); /** Contextual typography token. */
-	--mrl-type-line-height-title-small: var(--mrl-line-height-08); /** Contextual typography token. */
+	--mrl-type-line-height-title: var(
+		--mrl-line-height-05
+	); /** The title use case follows the same line-height scale as text. */
+
+	--mrl-type-line-height-title-large: var(
+		--mrl-line-height-06
+	); /** The title use case follows the same line-height scale as text. */
+
+	--mrl-type-line-height-title-small: var(
+		--mrl-line-height-08
+	); /** The title use case follows the same line-height scale as text. */
+
 	--mrl-type-line-height-title-xsmall: var(
 		--mrl-line-height-06
-	); /** Contextual typography token. */
+	); /** The title use case follows the same line-height scale as text. */
 
 	--mrl-type-line-height-title-xxsmall: var(
 		--mrl-line-height-06
-	); /** Contextual typography token. */
+	); /** The title use case follows the same line-height scale as text. */
 
 	--mrl-type-line-height-display: var(--mrl-line-height-02); /** Contextual typography token. */
 	--mrl-type-line-height-display-large: var(
@@ -612,11 +702,11 @@
 	--mrl-type-line-height-headline: var(--mrl-line-height-07); /** Contextual typography token. */
 	--mrl-type-line-height-headline-large: var(
 		--mrl-line-height-07
-	); /** Contextual typography token. */
+	); /** When the viewport is 600px or wider, this token uses --mrl-line-height-06. */
 
 	--mrl-type-line-height-headline-small: var(
 		--mrl-line-height-02
-	); /** Contextual typography token. */
+	); /** When the viewport is 600px or wider, this token uses --mrl-line-height-09. */
 
 	--mrl-type-line-height-text: var(--mrl-line-height-09); /** Contextual typography token. */
 	--mrl-type-line-height-text-large: var(--mrl-line-height-10); /** Contextual typography token. */
@@ -671,7 +761,7 @@
 
 	--mrl-type-spacing-headline-small: var(
 		--mrl-letter-spacing-04
-	); /** Contextual typography token. */
+	); /** When the viewport is 600px or wider, this token uses --mrl-letter-spacing-03. */
 
 	--mrl-type-spacing-text: var(--mrl-letter-spacing-03); /** Contextual typography token. */
 	--mrl-type-spacing-interactive-xsmall: var(
@@ -700,85 +790,21 @@
 
 	--mrl-border-focus: var(--mrl-line-width-focus) solid var(--mrl-color-focus); /** Focus ring border shorthand. */
 	--mrl-border-divider: var(--mrl-line-width-divider) solid var(--mrl-color-line-divider); /** Divider line border shorthand. */
-	--mrl-color-background-highlight-secondary: var(
-		--mrl-color-background-decorative
-	); /** Deprecated — use `background-decorative` instead. */
-
-	--mrl-color-background-highlight-hover: var(
-		--mrl-color-background-hover
-	); /** Deprecated — use `background-hover` instead. */
-
-	--mrl-color-background-highlight-active: var(
-		--mrl-color-background-active
-	); /** Deprecated — use `background-active` instead. */
-
-	--mrl-color-background-highlight-selected: var(
-		--mrl-color-background-selected
-	); /** Deprecated — use `background-selected` instead. */
-
-	--mrl-color-background-highlight-emph-active: var(
-		--mrl-color-background-emph-active
-	); /** Deprecated — use `background-emph-active` instead. */
-
-	--mrl-color-background-highlight-emph-selected: var(
-		--mrl-color-background-active
-	); /** Deprecated — use `background-active` instead. */
-
-	--mrl-color-line-highlight-secondary: var(
-		--mrl-color-line-secondary
-	); /** Deprecated — use `line-secondary` instead. */
-
-	--mrl-color-text-highlight: var(
-		--mrl-color-text-emph
-	); /** Deprecated — use `text-emph` instead. */
-
-	--mrl-color-text-highlight-hover: var(
-		--mrl-color-text-emph-hover
-	); /** Deprecated — use `text-emph-hover` instead. */
-
-	--mrl-color-text-highlight-active: var(
-		--mrl-color-text-emph-active
-	); /** Deprecated — use `text-emph-active` instead. */
-
-	--mrl-color-text-highlight-selected: var(
-		--mrl-color-text-inverse-selected
-	); /** Deprecated — use `text-inverse-selected` instead. */
-
-	--mrl-color-text-highlight-emph: var(
-		--mrl-color-text-emph
-	); /** Deprecated — use `text-emph` instead. */
-
-	--mrl-color-text-highlight-emph-hover: var(
-		--mrl-color-text-emph-hover
-	); /** Deprecated — use `text-emph-hover` instead. */
-
-	--mrl-color-text-highlight-emph-active: var(
-		--mrl-color-text-emph-active
-	); /** Deprecated — use `text-emph-active` instead. */
-
-	--mrl-color-text-highlight-emph-selected: var(
-		--mrl-color-text-inverse-selected
-	); /** Deprecated — use `text-inverse-selected` instead. */
-
-	--mrl-color-text-02: var(
-		--mrl-color-text-heading
-	); /** Deprecated — use `text-heading` instead. */
-
 	--mrl-color-background-inverse-active: var(
 		--mrl-color-accent
-	); /** Inverse surface background, active state. */
+	); /** Use only with --mrl-color-background-inverse; other colored backgrounds will have a different style set that's TBD. */
 
 	--mrl-color-background-inverse-selected: var(
 		--mrl-color-accent
-	); /** Inverse surface background, selected state. */
+	); /** Use only with --mrl-color-background-inverse; other colored backgrounds will have a different style set that's TBD. */
 
 	--mrl-color-line-emph-selected: var(
 		--mrl-color-accent
-	); /** Emphasized line color, selected state. */
+	); /** Use with the Base with Emphasis style set. */
 
 	--mrl-color-text-emph-selected: var(
 		--mrl-color-accent
-	); /** Emphasized text color, selected state. */
+	); /** Use for the Base with Emphasis style set. */
 
 	--mrl-space-inline-sibling-xsmall: var(
 		--mrl-space-inline-sibling-small