@muraldevkit/ui-toolkit 1.15.6 → 1.15.8

package/dist/styles/MrlBlockNotification/global.scss

@@ -5,7 +5,8 @@
 
 @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
 @use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
-@use './styles.mixins.scss' as *;
+
+@use './MrlBlockNotification.mixins.scss' as *;
 
 // Transition states were not working as expected when migrated to
 // modules, so we are using global styles for now.

package/dist/styles/MrlBlockNotification/module.scss

@@ -6,8 +6,9 @@
 @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
 @use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
 @use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
-@use './styles.variables.scss';
-@use './styles.mixins.scss' as *;
+
+@use './MrlBlockNotification.variables.scss';
+@use './MrlBlockNotification.mixins.scss' as *;
 
 $mrl-notification-close-inset: var(--mrl-spacing-02);
 

package/dist/styles/MrlModal/global.scss

@@ -1,7 +1,7 @@
 @use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
 
-@use './styles.variables.scss';
-@use './styles.mixins.scss' as *;
+@use './MrlModal.variables.scss';
+@use './MrlModal.mixins.scss' as *;
 
 // Modifiers: Sizes
 @media screen and (min-width: $mrl-breakpoint-01) {

package/dist/styles/MrlModal/module.scss

@@ -7,8 +7,8 @@
 @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
 @use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
 
-@use './styles.variables.scss';
-@use './styles.mixins.scss' as *;
+@use './MrlModal.variables.scss';
+@use './MrlModal.mixins.scss' as *;
 
 .mrl-modal-backdrop {
 	align-items: center;

package/dist/styles/MrlModal/variables.scss

@@ -4,7 +4,7 @@
 ////
 
 @use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
-@use '../styles.variables.scss';
+@use '../modal.variables.scss';
 
 .mrl-modal-backdrop {
 	--mrl-modal-backdrop-background: var(--mrl-black-opacity-06);

package/dist/styles/MrlModalContent/module.scss

@@ -9,5 +9,5 @@
 	flex-direction: column;
 	flex-grow: 1;
 	overflow: auto;
-	padding: 0 var(--mrl-modal-padding-horizontal);
+	padding: 0 var(--mrl-modal-padding-horizontal) 4px;
 }

package/dist/styles/MrlModalFooter/module.scss

@@ -5,7 +5,7 @@
 
 @use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
 @use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
-@use './styles.variables.scss';
+@use './MrlModalFooter.variables.scss';
 
 .mrl-modal-footer {
 	display: flex;

package/dist/styles/MrlModalFooter/variables.scss

@@ -3,7 +3,7 @@
 /// @group modal
 ////
 
-@use '../styles.variables.scss';
+@use '../modal.variables.scss';
 
 .mrl-modal-footer {
 	--mrl-modal-footer-inline-margin: var(--mrl-spacing-03);

package/dist/styles/MrlModalHeader/module.scss

@@ -3,7 +3,7 @@
 /// @group modal
 ////
 
-@use '../styles.variables.scss' as *;
+@use '../modal.variables.scss' as *;
 
 .mrl-modal-header {
 	color: var(--mrl-modal-header-text-color);

package/dist/styles/MrlSelect/module.scss

@@ -4,9 +4,10 @@
 ////
 
 @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
-@use '../MrlSelect/variables.scss' as selectItem;
-@use '../styles.scss' as *;
-@use './variables.scss';
+@use '../../forms.variables.scss' as selectItem;
+@use '../../forms.global.scss' as *;
+
+@use './MrlSelect.variables.scss';
 
 .mrl-select {
 	display: block;

package/dist/styles/MrlSelect/variables.scss

@@ -0,0 +1,15 @@
+////
+/// Select component styles
+/// @group select
+////
+@use '../../forms.variables.scss';
+
+.mrl-select {
+	--mrl-select-trigger-indicator-color: var(--mrl-text-input-border-color);
+	--mrl-select-trigger-indicator-color-hover: var(--mrl-text-input-border-color-hover);
+	--mrl-select-trigger-indicator-color-focus: var(--mrl-text-input-border-color-focus);
+}
+
+.mrl-select:focus-within > .mrl-select-trigger--inline {
+	--mrl-text-input-border-color-focus: transparent;
+}

package/dist/styles/MrlSelectItem/module.scss

@@ -4,8 +4,9 @@
 ////
 
 @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
-@use '../styles.scss' as *;
-@use './variables.scss';
+@use '../../forms.global.scss' as *;
+
+@use './MrlSelectItem.variables.scss';
 
 .mrl-select-item {
 	display: block;

package/dist/styles/MrlSelectItem/variables.scss

@@ -0,0 +1,36 @@
+////
+/// Select component styles
+/// @group select
+////
+
+@use '../../forms.variables.scss';
+
+.mrl-selectItem {
+	--mrl-select-item-background: var(--mrl-color-background);
+	--mrl-select-item-color: var(--mrl-color-text-highlight);
+
+	// @todo - v2 - remove --mrl-select-item-padding since it's a duplicate
+	--mrl-select-item-padding: var(--mrl-select-item-padding-vertical)
+		var(--mrl-select-item-padding-horizontal);
+	--mrl-select-item-padding-horizontal: var(--mrl-spacing-04);
+	--mrl-select-item-padding-vertical: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+	--mrl-select-item-border-radius: var(--mrl-border-radius-functional);
+	--mrl-select-item-icon-size: var(--mrl-spacing-06);
+	--mrl-select-item-icon-spacing: var(--mrl-spacing-03);
+}
+
+.mrl-selectItem:hover {
+	--mrl-select-item-background: var(--mrl-color-background-highlight-hover);
+	--mrl-select-item-color: var(--mrl-color-text-highlight-hover);
+}
+
+.mrl-is--selected {
+	--mrl-select-item-background: var(--mrl-color-background-highlight-selected);
+	--mrl-select-item-color: var(--mrl-color-text-highlight-selected);
+}
+
+.mrl-selectItem[aria-disabled='true'],
+.mrl-selectItem[aria-disabled='true']:hover {
+	--mrl-select-item-background: transparent;
+	--mrl-select-item-color: var(--mrl-color-text-disabled);
+}

package/dist/styles/MrlSelectMenu/module.scss

@@ -2,9 +2,10 @@
 /// Select Menu component styles
 /// @group select-menu
 ////
-
+///
 @use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
-@use '../variables.scss';
+
+@use './MrlSelectMenu.variables.scss';
 
 $affordance: var(--mrl-select-item-text-affordance);
 $item-padding: var(--mrl-select-item-padding-vertical);

package/dist/styles/MrlSelectMenu/variables.scss

@@ -0,0 +1,8 @@
+////
+/// Select Menu component styles
+/// @group select-menu
+////
+
+.mrl-selectMenu {
+	// Add the component CSS variables to this file
+}

package/dist/styles/MrlText/module.scss

@@ -1,4 +1,4 @@
-@use './styles.variables.scss';
+@use './MrlText.variables.scss';
 
 ////
 /// Text component styles

package/dist/styles/MrlTextHeading/module.scss

@@ -1,4 +1,4 @@
-@use './styles.variables.scss';
+@use './MrlTextHeading.variables.scss';
 
 ////
 /// Text/Heading component styles

package/dist/styles/MrlTooltipContent/global.scss

@@ -13,8 +13,8 @@ $mrl-tooltip-arrow-vertical-center: calc(var(--mrl-tooltip-arrow-size) * -1 / 2
 // The first number of this calculation needs to match the value of var(--mrl-tooltip-arrow-size)
 $mrl-tooltip-arrow-size: math.hypot(8px, 5px);
 
-@use '../styles.mixins.scss' as *;
-@use './styles.variables.scss';
+@use '../modal.mixins.scss' as *;
+@use './MrlTooltipContent.variables.scss';
 
 .mrl-tooltip-content {
 	background: var(--mrl-tooltip-background-color);

package/dist/styles/form/global.scss

@@ -0,0 +1,160 @@
+////
+/// Mural's form elements shared styles
+/// @group form-elements
+////
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+
+/// Shared styles for text-related inputs such as text-input and textarea
+/// There are no configurations for this mixin
+///
+/// @example @include mrl-text-inputs;
+/// @todo - v2 - this is actually used for non-text inputs too. We should rename
+/// it and it corresponding tokens to just `mrl-inputs`
+@mixin mrl-text-inputs {
+	@include mrl-text-static('small');
+
+	background: var(--mrl-text-input-background);
+	border-color: var(--mrl-text-input-border-color);
+	border-radius: var(--mrl-text-input-border-radius);
+	border-style: solid;
+	border-width: var(--mrl-text-input-border-width);
+	color: var(--mrl-text-input-color);
+
+	// We have to reset the margin on this component since
+	// Safari automatically applies 2 px
+	margin: 0;
+	min-height: var(--mrl-text-input-height);
+	padding: var(--mrl-text-input-inset-vertical) var(--mrl-text-input-inset-horizontal);
+	width: 100%;
+
+	// Need a z-index above 1 which is the focus indicator's z-index to ensure
+	// the user can interact with the input as expected
+	z-index: $mrl-zIndex-focus + 1;
+
+	&::placeholder {
+		color: var(--mrl-text-input-placeholder-color);
+	}
+
+	&:hover {
+		--mrl-text-input-border-color: var(--mrl-text-input-border-color-hover);
+		--mrl-text-input-background: var(--mrl-text-input-background-color-hover);
+	}
+
+	// For text inputs, active and focus are the same state
+	&:focus {
+		--mrl-text-input-border-color: var(--mrl-text-input-border-color-focus);
+
+		color: var(--mrl-text-input-color-focus);
+	}
+
+	// Specifically turning off the outline here as we have a custom
+	// focus indicator
+	&:focus-visible {
+		outline: none;
+	}
+
+	&:disabled {
+		--mrl-text-input-border-color: var(--mrl-text-input-border-color-disabled);
+
+		color: var(--mrl-text-input-color-disabled);
+		pointer-events: none;
+	}
+
+	&:disabled::placeholder {
+		color: var(--mrl-text-input-color-disabled);
+	}
+
+	&[aria-invalid='true'] {
+		border-color: var(--mrl-color-background-error);
+	}
+}
+
+/// Shared styles select item icon when it's displayed in the select trigger
+/// There are no configurations for this mixin
+///
+/// @example @include mrl-selectItem-icon;
+@mixin mrl-selectItem-icon {
+	flex-basis: fit-content;
+	margin-right: var(--mrl-select-item-icon-spacing);
+	max-width: var(--mrl-select-item-icon-size);
+}
+
+/// @access private
+/// @todo this needs applied to text inputs and textareas once ready from Design
+///
+/// Shared variables for inline kind inputs (select, text input, textarea)
+/// This needs to be in a mixin so we can control where it's rendered in
+/// the CSS ordering
+///
+/// @example @include mrl-inline-input-vars
+@mixin mrl-inline-input-vars {
+	--mrl-text-input-border-color: transparent;
+	--mrl-text-input-inset-vertical: var(--mrl-spacing-02);
+	--mrl-text-input-inset-horizontal: var(--mrl-spacing-03);
+	--mrl-text-input-height: var(--mrl-spacing-08);
+
+	&:hover {
+		--mrl-text-input-background-color-hover: var(--mrl-black-opacity-00);
+		--mrl-text-input-border-color: transparent;
+	}
+
+	&:focus-visible {
+		--mrl-text-input-border-color: transparent;
+	}
+}
+
+/// Shared styles for standalone checkbox host and checkbox + label wrapper
+/// There are no configurations for this mixin
+///
+/// @example @include mrl-checkbox-wrapper;
+@mixin mrl-checkbox-wrapper {
+	height: var(--mrl-checkbox-input-affordance);
+	padding: var(--mrl-checkbox-input-inset);
+	width: var(--mrl-checkbox-input-affordance);
+}
+
+/// Shared styles for checkbox input element
+/// There are no configurations for this mixin
+///
+/// @example @include mrl-checkbox-input;
+@mixin mrl-checkbox-input {
+	cursor: pointer;
+	height: var(--mrl-checkbox-input-size);
+	margin: 0;
+	opacity: 0;
+	width: var(--mrl-checkbox-input-size);
+	z-index: $mrl-zIndex-focus + 1;
+}
+
+/// Shared styles for checkbox and checkbox-standalone
+/// @todo - v2 - These should ultimately live in the checkbox-standalone component and the mrl-checkbox
+/// class names should be removed. This will need to be communicated as a breaking change
+/// to take into account anyone referencing these styles outside of component usage.
+.mrl-checkbox,
+.mrl-checkboxStandalone {
+	align-items: center;
+	display: flex;
+	min-height: var(--mrl-checkbox-height);
+	position: relative;
+}
+
+.mrl-checkbox-inputDisplay,
+.mrl-checkboxStandalone-inputDisplay {
+	background: var(--mrl-checkbox-input-background);
+	border-color: var(--mrl-checkbox-input-border-color);
+	border-radius: var(--mrl-checkbox-input-border-radius);
+	border-style: solid;
+	border-width: var(--mrl-checkbox-input-border-width);
+	color: var(--mrl-checkbox-input-color);
+	display: flex;
+	height: var(--mrl-checkbox-input-size);
+	width: var(--mrl-checkbox-input-size);
+	z-index: $mrl-zIndex-base - 1;
+}
+
+.mrl-checkbox-inputDisplay-icon,
+.mrl-checkboxStandalone-inputDisplay-icon {
+	display: none;
+}

package/dist/styles/form/variables.scss

@@ -0,0 +1,63 @@
+////
+/// Shared variables for form inputs
+/// @group form-elements
+////
+
+:root,
+:host {
+	--mrl-text-input-background: var(--mrl-color-background);
+
+	// The default variant of inputs keep consistent background colors
+	// but the inline kind requires us to separate these variables
+	--mrl-text-input-background-color-hover: var(--mrl-color-background);
+	--mrl-text-input-border-color: var(--mrl-color-line);
+	--mrl-text-input-border-width: var(--mrl-line-width-border);
+	--mrl-text-input-border-color-hover: var(--mrl-color-line-hover);
+	--mrl-text-input-border-color-disabled: var(--mrl-color-line-disabled);
+	--mrl-text-input-border-color-focus: var(--mrl-color-line-active);
+	--mrl-text-input-border-radius: var(--mrl-border-radius-functional);
+
+	// Default theme text inputs don't seem to follow the same logic as other interactive elements?
+	--mrl-text-input-color: rgba(var(--mrl-gray-90), 1);
+	--mrl-text-input-color-focus: rgba(var(--mrl-gray-100), 1);
+	--mrl-text-input-color-disabled: var(--mrl-color-text-disabled);
+	--mrl-text-input-height: var(--mrl-spacing-09);
+	--mrl-text-input-placeholder-color: var(--mrl-color-text-secondary);
+	--mrl-text-input-inset-vertical: var(--mrl-space-inset);
+	--mrl-text-input-inset-horizontal: var(--mrl-space-inset-control-small);
+	--mrl-text-input-padding: var(--mrl-text-input-inset-vertical)
+		var(--mrl-text-input-inset-horizontal);
+	--mrl-input-icon-offset: var(--mrl-spacing-03);
+
+	// Checkbox properties
+	--mrl-checkbox-height: var(--mrl-spacing-09);
+	--mrl-checkbox-input-affordance: var(--mrl-spacing-08);
+	--mrl-checkbox-input-inset: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+	--mrl-checkbox-input-size: var(--mrl-spacing-06);
+	--mrl-checkbox-input-background: var(--mrl-color-background);
+	--mrl-checkbox-input-border-color: var(--mrl-color-line);
+	--mrl-checkbox-input-color: var(--mrl-color-text-inverse);
+	--mrl-checkbox-input-border-width: var(--mrl-line-width-control);
+	--mrl-checkbox-input-border-radius: var(--mrl-border-radius-content);
+}
+
+// State: selected (checked or indeterminate)
+.mrl-checkbox-input:checked ~ .mrl-checkbox-inputDisplay,
+.mrl-checkboxStandalone-input:checked ~ .mrl-checkboxStandalone-inputDisplay {
+	// This doesn't align to any of our contextual color tokens
+	--mrl-checkbox-input-background: rgba(var(--mrl-gray-100), 1);
+	--mrl-checkbox-input-border-color: rgba(var(--mrl-gray-100), 1);
+}
+
+// Select shared variables
+:host {
+	--mrl-select-item-padding-vertical: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+	--mrl-select-item-spacing-stack: var(--mrl-spacing-02);
+
+	// The text actually uses a mixin but we need this variable to calculate the
+	// max height of the menu. If you change this value, you must also change
+	// the mixin within the `select-item.scss` file.
+	--mrl-select-item-text-affordance: calc(
+		var(--mrl-type-line-height-text-small) * var(--mrl-type-size-text-small)
+	);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@muraldevkit/ui-toolkit",
-	"version": "1.15.6",
+	"version": "1.15.8",
 	"description": "Mural's UI Toolkit",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",