@muraldevkit/ds-foundation 2.16.1 → 2.17.0

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

@@ -3,104 +3,198 @@
 /// @group variables
 ////
 
-$mrl-contextual-border-width-vars: (
-	'border': '01',
-	'border-selected': '01',
-	'focus': '01',
-	'control': '01',
-	'divider': '01'
-);
-$mrl-contextual-border-radius-vars: (
-	'tight': '01',
-	'content': '02',
-	'content-large': '03',
-	'functional': '03',
-	'functional-large': '04',
-	'container': '04',
-	'container-large': '05',
-	'rounded': '07',
-	'rounded-large': '08'
-);
-
-// Setup for contextual border stroke and color combinations
-$mrl-contextual-border-sets: (
-	'',
-	// default color set
-	'emph',
-	'inverse'
-);
-$mrl-contextual-border-states: (
-	'',
-	// default element state
-	'hover',
-	'active',
-	'selected',
-	'disabled'
-);
-$mrl-contextual-border-unique: ('focus', 'divider');
-
 :root {
 	// Border Width
 	// We don't have a global variable for 1px width, so fine must be hard coded:
 	--mrl-line-width-border-fine: 1px;
 
-	// Map over tokens/values for remaining border widths:
-	@each $token-name, $token-value in $mrl-contextual-border-width-vars {
-		--mrl-line-width-#{$token-name}: var(--mrl-stroke-#{$token-value});
-	}
+	///
+	/// Contextual border token.
+	/// --mrl-line-width-border -> --mrl-stroke-01 -> 2px.
+	///
+	--mrl-line-width-border: var(--mrl-stroke-01);
+
+	///
+	/// Contextual border token.
+	/// --mrl-line-width-border-selected -> --mrl-stroke-01 -> 2px.
+	///
+	--mrl-line-width-border-selected: var(--mrl-stroke-01);
+
+	///
+	/// Contextual border token.
+	/// --mrl-line-width-focus -> --mrl-stroke-01 -> 2px.
+	///
+	--mrl-line-width-focus: var(--mrl-stroke-01);
+
+	///
+	/// Contextual border token.
+	/// --mrl-line-width-control -> --mrl-stroke-01 -> 2px.
+	///
+	--mrl-line-width-control: var(--mrl-stroke-01);
+
+	///
+	/// Contextual border token.
+	/// --mrl-line-width-divider -> --mrl-stroke-01 -> 2px.
+	///
+	--mrl-line-width-divider: var(--mrl-stroke-01);
 
 	// Border Radius
-	@each $token-name, $token-value in $mrl-contextual-border-radius-vars {
-		--mrl-border-radius-#{$token-name}: var(--mrl-radii-#{$token-value});
-	}
-
-	// Disabling stylelint rule because this is an intentional nesting to keep DRY code to create a list of CSS variables
-	// stylelint-disable max-nesting-depth
-
-	// Border combinations
-	@each $set in $mrl-contextual-border-sets {
-		@each $state in $mrl-contextual-border-states {
-			$set-token: '-#{$set}';
-			$state-token: '-#{$state}';
-			$width-token: '';
-
-			@if $set == '' {
-				$set-token: '';
-			}
-
-			@if $state == '' {
-				$state-token: '';
-			}
-
-			$color-token: $state-token;
-
-			@if $state == 'selected' {
-				$width-token: '-#{$state}';
-			}
-
-			@if $set == 'inverse' {
-				@if $state != 'disabled' {
-					$color-token: '';
-				}
-			}
-
-			--mrl-border#{$set-token}#{$state-token}: var(--mrl-line-width-border#{$width-token})
-				solid
-				var(--mrl-color-line#{$set-token}#{$color-token});
-		}
-	}
-
-	// Unique border combinations
-	@each $use-case in $mrl-contextual-border-unique {
-		$color-token: 'line-#{$use-case}';
-
-		@if $use-case == 'focus' {
-			$color-token: 'focus';
-		}
-
-		--mrl-border-#{$use-case}: var(--mrl-line-width-#{$use-case})
-			solid
-			var(--mrl-color-#{$color-token});
-	}
-	// stylelint-enable max-nesting-depth
+	///
+	/// Contextual border token.
+	/// --mrl-border-radius-tight -> --mrl-radii-01 -> 2px.
+	///
+	--mrl-border-radius-tight: var(--mrl-radii-01);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-radius-content -> --mrl-radii-02 -> 4px.
+	///
+	--mrl-border-radius-content: var(--mrl-radii-02);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-radius-content-large -> --mrl-radii-03 -> 8px.
+	///
+	--mrl-border-radius-content-large: var(--mrl-radii-03);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-radius-functional -> --mrl-radii-03 -> 8px.
+	///
+	--mrl-border-radius-functional: var(--mrl-radii-03);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-radius-functional-large -> --mrl-radii-04 -> 12px.
+	///
+	--mrl-border-radius-functional-large: var(--mrl-radii-04);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-radius-container -> --mrl-radii-04 -> 12px.
+	///
+	--mrl-border-radius-container: var(--mrl-radii-04);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-radius-container-large -> --mrl-radii-05 -> 16px.
+	///
+	--mrl-border-radius-container-large: var(--mrl-radii-05);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-radius-rounded -> --mrl-radii-07 -> 32px.
+	///
+	--mrl-border-radius-rounded: var(--mrl-radii-07);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-radius-rounded-large -> --mrl-radii-08 -> 40px.
+	///
+	--mrl-border-radius-rounded-large: var(--mrl-radii-08);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border -> --mrl-line-width-border -> --mrl-color-line.
+	///
+	--mrl-border: var(--mrl-line-width-border) solid var(--mrl-color-line);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-hover -> --mrl-line-width-border -> --mrl-color-line-hover.
+	///
+	--mrl-border-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-hover);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-active -> --mrl-line-width-border -> --mrl-color-line-active.
+	///
+	--mrl-border-active: var(--mrl-line-width-border) solid var(--mrl-color-line-active);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-selected -> --mrl-line-width-border-selected -> --mrl-color-line-selected.
+	///
+	--mrl-border-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-selected);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-disabled -> --mrl-line-width-border -> --mrl-color-line-disabled.
+	///
+	--mrl-border-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-disabled);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-emph -> --mrl-line-width-border -> --mrl-color-line-emph.
+	///
+	--mrl-border-emph: var(--mrl-line-width-border) solid var(--mrl-color-line-emph);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-emph-hover -> --mrl-line-width-border -> --mrl-color-line-emph-hover.
+	///
+	--mrl-border-emph-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-hover);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-emph-active -> --mrl-line-width-border -> --mrl-color-line-emph-active.
+	///
+	--mrl-border-emph-active: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-active);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-emph-selected -> --mrl-line-width-border-selected -> --mrl-color-line-emph-selected.
+	///
+	--mrl-border-emph-selected: var(--mrl-line-width-border-selected) solid
+		var(--mrl-color-line-emph-selected);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-emph-disabled -> --mrl-line-width-border -> --mrl-color-line-emph-disabled.
+	///
+	--mrl-border-emph-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-disabled);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-inverse -> --mrl-line-width-border -> --mrl-color-line-inverse.
+	///
+	--mrl-border-inverse: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-inverse-hover -> --mrl-line-width-border -> --mrl-color-line-inverse.
+	///
+	--mrl-border-inverse-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-inverse-active -> --mrl-line-width-border -> --mrl-color-line-inverse.
+	///
+	--mrl-border-inverse-active: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-inverse-selected -> --mrl-line-width-border-selected -> --mrl-color-line-inverse.
+	///
+	--mrl-border-inverse-selected: var(--mrl-line-width-border-selected) solid
+		var(--mrl-color-line-inverse);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-inverse-disabled -> --mrl-line-width-border -> --mrl-color-line-inverse-disabled.
+	///
+	--mrl-border-inverse-disabled: var(--mrl-line-width-border) solid
+		var(--mrl-color-line-inverse-disabled);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-focus -> --mrl-line-width-focus -> --mrl-color-focus.
+	///
+	--mrl-border-focus: var(--mrl-line-width-focus) solid var(--mrl-color-focus);
+
+	///
+	/// Contextual border token.
+	/// --mrl-border-divider -> --mrl-line-width-divider -> --mrl-color-line-divider.
+	///
+	--mrl-border-divider: var(--mrl-line-width-divider) solid var(--mrl-color-line-divider);
 }