@muraldevkit/ds-foundation 1.0.0

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

@@ -0,0 +1,165 @@
+////
+/// Contextual Color Tokens
+/// @group variables
+////
+
+$mrl-contextual-color-vars: (
+	// --------- Misc --------------
+	// Miscellaneous color tokens
+	"focus": "blue-70",
+	"focus-inverse": "white",
+	"shadows": "black",
+	"brand": "red-70",
+	"brand-hover": "red-80",
+	"brand-active": "red-90",
+	"accent": "blue-70",
+	"skeleton": "gray-20",
+	"skeleton-inverse": "white",
+
+	// --------- Background --------------
+	"background": "white",
+	"background-secondary": "gray-80",
+	"background-decorative": "gray-20",
+
+	// Status use cases
+	"background-info": "status-info",
+	"background-success": "status-success",
+	"background-warning": "status-warning",
+	"background-error": "status-error",
+	"background-private": "status-private",
+
+	// This is our primary inverse background color
+	// but our status colors also use inverse text colors
+	"background-inverse": "gray-100",
+
+	// Used only when the background is using "background-inverse"
+	// other colored backgrounds will have a different rule set that's TBD
+	"background-inverse-hover": "gray-90",
+
+	// Used only when there is a background on the element being disabled
+	"background-disabled": "gray-40",
+
+	// Used for Highlight
+	"background-highlight-hover": "gray-20",
+	"background-highlight-active": "gray-90",
+	"background-highlight-selected": "gray-90",
+
+	// Use to extend Highlight to add emphasis
+	"background-highlight-emph-active": "gray-30",
+
+	// --------- Line --------------
+	"line": "gray-70",
+	"line-hover": "gray-90",
+	"line-active": "gray-100",
+	"line-selected": "gray-90",
+	"line-disabled": "gray-40",
+
+	// Design calls this "Light" but it's semantically used for dividers
+	"line-divider": "gray-20",
+	// Design calls this "Dark" but it's semantically used for dividers. This is intended for use on dark or saturated backgrounds
+	"line-divider-inverse": "gray-80",
+
+	// Used for Base with Emphasis
+	"line-emph": "gray-20",
+	"line-emph-hover": "gray-90",
+	"line-emph-active": "black",
+
+	// Inverse
+	"line-inverse": "white",
+	"line-inverse-disabled": "white",
+	// @todo active and selected are TBD as Design finishes the inverse-secondary button
+
+	// --------- Text --------------
+	"text": "gray-80",
+	"text-hover": "gray-90",
+	"text-active": "gray-90",
+	"text-selected": "gray-90",
+	"text-disabled": "gray-40",
+	// Used when the background of the element uses the disabled color
+	"text-disabled-inverse": "white",
+
+	// Use for Base with Emphasis
+	"text-emph": "gray-20",
+	"text-emph-hover": "gray-90",
+	"text-emph-active": "black",
+
+	// Use for Highlight
+	"text-highlight": "gray-80",
+	"text-highlight-hover": "gray-90",
+	"text-highlight-active": "white",
+	"text-highlight-selected": "white",
+
+	// Alternative to add emphasis to Highlight
+	"text-highlight-emph": "gray-90",
+	"text-highlight-emph-hover": "gray-100",
+	"text-highlight-emph-active": "black",
+	"text-highlight-emph-selected": "white",
+
+	// Use for Inverse or any saturated background color (e.g. statuses)
+	"text-inverse": "white",
+	"text-inverse-secondary": "gray-10",
+	"text-inverse-hover": "white",
+	"text-inverse-active": "white",
+	"text-inverse-selected": "white",
+
+	// Static text color options
+	"text-02": "gray-90",
+	// Also used for placeholders
+	"text-secondary": "gray-70",
+	"text-label": "gray-90",
+	"text-heading": "gray-100",
+
+	// Status colors
+	"text-success": "gray-90", // For success messages on a white background
+	"text-warning": "gray-90", // For warning messages on a white background
+	"text-error": "status-error", // For error messages on a white background
+	"text-info": "gray-90", // For info messages on a white background
+	"text-private": "status-private", // For private messages on a white background
+
+	// --------- Icon --------------
+	// 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
+	"icon-emph-selected": "gray-100"
+);
+
+// These variables are referencing other contextual tokens and should not be wrapped by rgba
+$mrl-contextual-color-vars-2: (
+	// --------- Background --------------
+
+	// Used only when the background is using "background-inverse"
+	// other colored backgrounds will have a different rule set that's TBD
+	"background-inverse-active": "color-accent",
+	"background-inverse-selected": "color-accent",
+
+	// Use to extend Highlight to add emphasis
+	"background-highlight-emph-selected": "color-accent",
+
+	// --------- Line --------------
+
+	// Used for Base with Emphasis
+	"line-emph-selected": "color-accent",
+
+	// --------- Text --------------
+
+	// Use for Base with Emphasis
+	"text-emph-selected": "color-accent"
+);
+
+:root {
+	/* Color */
+	@each $token-name, $token-value in $mrl-contextual-color-vars {
+		--mrl-color-#{$token-name}: rgba(var(--mrl-#{$token-value}), 1);
+	}
+
+	/* Color tokens that are set to non-global tokens */
+	@each $token-name, $token-value in $mrl-contextual-color-vars-2 {
+		--mrl-color-#{$token-name}: var(--mrl-#{$token-value});
+	}
+
+	// This is an intentional one-off contextual token
+	--mrl-color-background-page: rgb(245, 245, 245);
+
+	/* Colors with opacity */
+	--mrl-color-background-hover-opacity: rgba(var(--mrl-gray-30), 0.2);
+	--mrl-color-background-inverse-hover-opacity: rgba(var(--mrl-black), 0.2);
+}

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

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

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

@@ -0,0 +1,28 @@
+////
+/// Contextual Shadow Tokens
+/// @group variables
+////
+
+/**
+ * Please note!
+ * If you make a change to these tokens, please make sure that the
+ * mrl-shadow mixin is changed as well. We need the tokens
+ * to map to the drop-shadow filter!
+*/
+
+/* Contextual Shadow Tokens */
+$mrl-contextual-shadow-vars: (
+	/* Base */
+	"lifted": "01",
+	"raised": "02",
+	"floating": "03",
+	/* Interactive */
+	"hover": "interactive-01",
+	"drag": "interactive-02"
+);
+
+:root {
+	@each $token-name, $token-value in $mrl-contextual-shadow-vars {
+		--mrl-shadows-#{$token-name}:  var(--mrl-shadow-#{$token-value});
+	}
+}

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

@@ -0,0 +1,63 @@
+////
+/// Contextual Spacing Tokens
+/// Source: see internal documentation on "Spacing"
+/// (NOTE: these values are not finalized yet)
+/// @group variables
+////
+$mrl-contextual-spacing-vars: (
+	// Vertical spacing (stack)
+	'stack-components': '06',
+	'stack-controls': '05',
+	'stack-controls-small': '04',
+	'stack-section': '07',
+	'stack-section-divider': '04',
+	'stack-section-divider-small': '03',
+	'stack-section-divider-large': '06',
+	'stack-section-divider-label': '05',
+	'stack-siblings': '04',
+	'stack-related': '03',
+	'stack-related-small': '02',
+
+	// Internal spacing (inset, squish, and stretch)
+	'inset': '03',
+	'inset-container': '08',
+	// ↓ Default value here is for mobile, desktop value overrides below under media section
+	'inset-container-large': '05',
+	'inset-large': '05',
+	'inset-control': '06',
+	'inset-control-large': '05',
+
+	// Horizontal spacing (inline)
+	'inline-related': '03',
+	'inline-sibling': '04',
+	'inline-sibling-small': '02',
+
+	// Grid spacing (gutter)
+	'gutter': '04',
+	'gutter-label': '05',
+
+	// Miscellaneous spacing tokens
+	'offset-focus': '01',
+
+	// Type related spacing
+	'stack-subheading': '05',
+	'stack-title': '07',
+	'stack-title-related': '05'
+);
+
+:root {
+	/* Spacing */
+	@each $token-name, $token-value in $mrl-contextual-spacing-vars {
+		--mrl-space-#{$token-name}: var(--mrl-spacing-#{$token-value});
+	}
+	@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

@@ -0,0 +1,167 @@
+////
+/// Contextual Typography Tokens
+/// @group variables
+////
+
+// We have 6 different use cases for text: poster, 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 (poster, display, and headline),
+// we implement mobile as the default since our implementation follows a mobile-first philosophy
+// for performance.
+
+/* Font Size Tokens */
+$mrl-contextual-font-size-vars: (
+	"poster": "10",
+	"poster-large": "11",
+	"poster-small": "09",
+
+	"display": "08",
+	"display-large": "09",
+	"display-small": "07",
+
+	"headline": "05",
+	"headline-large": "06",
+	"headline-small": "02",
+
+	// Title & Interactive use cases follow Text's scale
+	"text": "04",
+	"text-large": "05",
+	"text-small": "03",
+	"text-xsmall": "02",
+	"text-xxsmall": "01",
+);
+$mrl-contextual-font-size-vars-large-viewport: (
+	"poster": "12",
+	"poster-large": "13",
+	"poster-small": "11",
+
+	"display": "09",
+	"display-large": "10",
+	"display-small": "08",
+
+	"headline": "06",
+	"headline-large": "07",
+	"headline-small": "04"
+);
+
+/* Line Height Tokens */
+$mrl-contextual-line-height-vars: (
+	"poster": "04",
+	"poster-large": "03",
+	"poster-small": "05",
+
+	"display": "03",
+	"display-large": "05",
+	"display-small": "06",
+
+	"headline": "09",
+	"headline-large": "07",
+	"headline-small": "09",
+
+	// Title use cases follow Text's scale
+	"text": "09",
+	"text-large": "10",
+	"text-small": "08",
+	"text-xsmall": "06",
+	"text-xxsmall": "08",
+
+	"interactive": "09",
+	"interactive-large": "10",
+	"interactive-small": "08",
+	"interactive-xsmall": "06"
+);
+$mrl-contextual-line-height-vars-large-viewport: (
+	"poster": "02",
+	"poster-large": "02",
+	"poster-small": "02",
+
+	"display": "05",
+	"display-large": "04",
+	"display-small": "03",
+
+	"headline": "07",
+	"headline-large": "06",
+	"headline-small": "03"
+);
+
+/* Font Weight Tokens */
+$mrl-contextual-font-weight-vars: (
+	"poster": "05",
+	"display": "05",
+	"headline": "05",
+	"title": "04",
+	"title-secondary": "03",
+	"text": "02",
+	"text-secondary": "01",
+	"interactive": "04"
+);
+
+/* Letter Spacing Tokens */
+$mrl-contextual-letter-spacing-vars: (
+	"poster": "02",
+	"poster-large": "01",
+	"poster-small": "02",
+
+	"display": "03",
+	"display-large": "02",
+	"display-small": "03",
+
+	"headline": "03",
+	"headline-large": "03",
+	"headline-small": "04",
+
+	// title and interactive use cases follow the same scale as text
+	"text": "03",
+	"interactive-xsmall": "04"
+);
+$mrl-contextual-letter-spacing-vars-large-viewport: (
+	"headline-small": "03"
+);
+
+:root {
+	// Typography - Font Size
+	@each $token-name, $token-value in $mrl-contextual-font-size-vars {
+		--mrl-type-size-#{$token-name}: var(--mrl-font-size-#{$token-value});
+	}
+
+	// Typography - Line Height
+	@each $token-name, $token-value in $mrl-contextual-line-height-vars {
+		--mrl-type-line-height-#{$token-name}: var(--mrl-line-height-#{$token-value});
+	}
+
+	// Typography - Font Weight
+	@each $token-name, $token-value in $mrl-contextual-font-weight-vars {
+		--mrl-type-weight-#{$token-name}: var(--mrl-font-weight-#{$token-value});
+	}
+
+	// Typography - Letter Spacing
+	@each $token-name, $token-value in $mrl-contextual-letter-spacing-vars {
+		--mrl-type-spacing-#{$token-name}: var(--mrl-letter-spacing-#{$token-value});
+	}
+
+	// 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
+		@each $token-name, $token-value in $mrl-contextual-font-size-vars-large-viewport {
+			--mrl-type-size-#{$token-name}: var(--mrl-font-size-#{$token-value});
+		}
+
+		// Typography - Line Height
+		@each $token-name, $token-value in $mrl-contextual-line-height-vars-large-viewport {
+			--mrl-type-line-height-#{$token-name}: var(--mrl-line-height-#{$token-value});
+		}
+
+		// Typography - Letter Spacing
+		@each $token-name, $token-value in $mrl-contextual-letter-spacing-vars-large-viewport {
+			--mrl-type-spacing-#{$token-name}: var(--mrl-letter-spacing-#{$token-value});
+		}
+	}
+}

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

@@ -0,0 +1,24 @@
+////
+/// Contextual z-index tokens
+/// @group variables
+///
+/// Note: this file uses Sass variables so developers can perform calculations to create scalable extensions
+////
+
+$mrl-zIndex-increment: 100;
+$mrl-zIndex-base: 0;
+$mrl-zIndex-focus: $mrl-zIndex-base + 1;
+$mrl-zIndex-notifications: $mrl-zIndex-base + $mrl-zIndex-increment !default;
+
+// @todo - once integrated in in the product, we need to determine if these are higher or lower
+// than panels for animations but we are keeping this as a separate category to prevent a future
+// breaking change if needed.
+$mrl-zIndex-toolbars: $mrl-zIndex-notifications + $mrl-zIndex-increment !default;
+$mrl-zIndex-toolbars-contextual: $mrl-zIndex-toolbars + $mrl-zIndex-increment !default;
+$mrl-zIndex-panels: $mrl-zIndex-toolbars-contextual + $mrl-zIndex-increment !default;
+$mrl-zIndex-menus: $mrl-zIndex-panels + $mrl-zIndex-increment !default;
+$mrl-zIndex-popovers: $mrl-zIndex-menus + $mrl-zIndex-increment !default;
+$mrl-zIndex-menus-contextual: $mrl-zIndex-popovers + $mrl-zIndex-increment !default;
+$mrl-zIndex-notifications-toast: $mrl-zIndex-menus-contextual + $mrl-zIndex-increment !default;
+$mrl-zIndex-tooltips: $mrl-zIndex-notifications-toast + $mrl-zIndex-increment !default;
+$mrl-zIndex-overlays: $mrl-zIndex-tooltips + $mrl-zIndex-increment !default;

package/src/styles/focus.scss

@@ -0,0 +1,87 @@
+@use "sass:string";
+@use './contextual-variables/z-index.scss' as *;
+
+.mrl-u-focus-wrapper {
+	position: relative;
+}
+
+/// Used to create a consistent focus indicator for interactive elements
+/// @group mixins
+/// @param {String} $style - Determines how the focus indicator is implemented. Options are to use the traditional
+/// 	outline setup or to use a custom pseudo-element.  Available options are: "outline" and "element" (default)
+/// @param {String} $is-inverse - Used when the element is an inverse use case so colors are updated accordingly.
+/// 	Available options are "false" (default) and "true"
+/// @param {String} $element-radius - Used with "element" setup to apply a border radius to the focus indicator
+/// 	Should be set to a CSS token. Default is var(--mrl-border-radius-functional).
+/// @param {String} $pseudo-element - Used with the "element" setup to allow developers to choose which pseudo element
+/// 	is used.  Available options are "before" (default) and "after"
+/// @param {String} $is-inline-element - Used with the "element" setup with a self-closing element. Requires wrapping the
+/// 	element with `div.mrl-u-focus-wrapper` and have an immediate sibling `span.mrl-u-focus-indicator`. See the text-input
+/// 	as an example. Available options are "true", "false" (default)
+/// @param {String} $focus-selector - Allows overwriting the default ":focus-visible" CSS selector for when to apply the styles.
+/// 	Typical use includes ":focus" or ":focus-within"
+///
+/// @example @include mrl-focus; // Generates the default outline version
+/// @example @include mrl-focus($is-inverse: 'true'); // Generates an inverse outline
+/// Generate the element version in the default color on a control element that has a border using the after pseudo element
+/// @example @include mrl-focus('element', 'false', 'var(--mrl-border-radius-control)', 'after');
+@mixin mrl-focus($style: 'element', $is-inverse: 'false', $element-radius: 'var(--mrl-border-radius-functional)', $pseudo-element: 'after', $is-inline-element: 'false', $focus-selector: ':focus-visible') {
+	$color-token: '';
+
+	@if $is-inverse == 'true' {
+		$color-token: '-inverse';
+	}
+
+	@if $is-inline-element == 'true' {
+		$focus-selector: ':focus-visible + .mrl-u-focus-indicator';
+
+		+ .mrl-u-focus-indicator {
+			display: block;
+			height: 100%;
+			left: 0;
+			top: 0;
+			width: 100%;
+		}
+	}
+
+	@if $style == 'element' {
+		position: relative;
+	}
+
+	&#{string.unquote($focus-selector)} {
+		@if $style == 'outline' {
+			outline: var(--mrl-line-width-focus) solid var(--mrl-color-focus#{$color-token});
+			outline-offset: var(--mrl-space-offset-focus);
+		}
+
+		@if $style == 'element' {
+			&::#{string.unquote($pseudo-element)} {
+				@include mrl-focus-pseudo-element($element-radius, $color-token);
+			}
+		}
+	}
+}
+
+/// Used to create a consistent focus indicator for shadow DOM elements using the mrl-focus "element" technique
+/// Important: For internal use only as there are likely breaking changes coming.
+/// @group mixins
+/// @param {String} $element-radius - Applies a border radius to the focus indicator
+/// 	Should be set to a CSS token. Default is var(--mrl-border-radius-functional).
+/// @param {String} $color-token - Suffix applied to the color token to change it to the inverse color if needed.
+/// 	Default is '' which uses the default focus color. To change to the inverse base '-inverse'
+/// @param {String} $border-width - the border width of the element having focus applied to ensure the offset
+/// 	is correct. Default is '0px'
+///
+/// @example :host(:focus-visible)::after { @include mrl-focus-shadow(); } // Generates the default version
+@mixin mrl-focus-pseudo-element($element-radius: 'var(--mrl-border-radius-functional)', $color-token: '', $border-width: '0px') {
+	border: var(--mrl-line-width-focus) solid var(--mrl-color-focus#{$color-token});
+	border-radius: calc(#{string.unquote($element-radius)} + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));
+	bottom: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + #{string.unquote($border-width)}) * -1);
+	content: '';
+	display: block;
+	left: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + #{string.unquote($border-width)}) * -1);
+	position: absolute;
+	right: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + #{string.unquote($border-width)}) * -1);
+	top: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + #{string.unquote($border-width)}) * -1);
+	z-index: $mrl-zIndex-focus;
+}

package/src/styles/fonts.scss

@@ -0,0 +1,19 @@
+@use "mixins" as *;
+
+// SCSS map of proxima-nova font weights
+$mrl-font-weights: (
+	"regular": 400,
+	"medium": 500,
+	"semibold": 600,
+	"bold": 700,
+	"extrabold": 800,
+);
+$mrl-font-dir: '../assets/fonts' !default;
+
+@each $font-weight-name, $font-weight-value in $mrl-font-weights {
+	// we can't use var(--mrl-font-family-01) in here
+	// because of how sass handles this string value
+	$font-family: proxima-nova;
+	$font-path: "#{$mrl-font-dir}/proximanova-#{$font-weight-name}";
+	@include font-face($font-family, $font-path, $font-weight-value);
+}

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

@@ -0,0 +1,40 @@
+////
+/// Global Border Tokens
+/// @group variables
+////
+
+/* Border Radius Tokens */
+// Values in the map is the number of pixels provided by design.
+$mrl-global-border-radius-vars: (
+	"01": 2,
+	"02": 4,
+	"03": 8,
+	"04": 12,
+	"05": 16,
+	"06": 24,
+	"07": 32,
+	"08": 40,
+);
+
+/* Border Width Tokens */
+// Values in the map is the number of pixels provided by design.
+// Note: We have to add 02 and 03 to have parity with Classic theme, which has 3
+// different line widths. We set them all to the same value (2px) in Foundation and these tokens are then overwritten in Classic. 
+// This approach reduces the risk of breaking visual updates when Classic is disabled. When Classic
+// is deprecated, we should be able to deprecate and remove these tokens.
+$mrl-global-border-width-vars: (
+	"01": 2,
+	"02": 2,
+	"03": 2,
+);
+
+:root {
+	@each $token-name, $token-value in $mrl-global-border-radius-vars {
+		--mrl-radii-#{$token-name}: #{$token-value}px;
+	}
+
+	@each $token-name, $token-value in $mrl-global-border-width-vars {
+		--mrl-stroke-#{$token-name}: #{$token-value}px;
+	}
+}
+

package/src/styles/global-variables/breakpoints.scss

@@ -0,0 +1,14 @@
+////
+/// Global Breakpoint Tokens
+/// @group variables
+////
+
+@use '../functions' as *;
+
+// Media queries do NOT support CSS Variables so breakpoint tokens
+// are delivered as Sass variables intentionally.
+$mrl-breakpoint-01: mrl-rem(600) !default;
+$mrl-breakpoint-02: mrl-rem(834) !default;
+$mrl-breakpoint-03: mrl-rem(1024) !default;
+$mrl-breakpoint-04: mrl-rem(1280) !default;
+$mrl-breakpoint-05: mrl-rem(1440) !default;