@muraldevkit/ui-toolkit 2.4.0 → 2.4.2

package/dist/styles/form/variables.scss

@@ -1,14 +1,7 @@
-////
-/// 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);
@@ -16,8 +9,6 @@
 	--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);
@@ -28,8 +19,6 @@
 	--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));
@@ -39,8 +28,6 @@
 	--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);
-
-	// Radio button properties
 	--mrl-radio-button-height: var(--mrl-spacing-06);
 	--mrl-radio-button-width: var(--mrl-spacing-06);
 	--mrl-radio-button-fill-size: var(--mrl-spacing-04);
@@ -50,25 +37,16 @@
 	--mrl-radio-button-background: var(--mrl-color-background);
 	--mrl-radio-button-background-selected: var(--mrl-color-background-highlight-selected);
 }
-
-// State: selected (checked or indeterminate)
 .mrl-checkbox-input:checked ~ .mrl-checkbox-inputDisplay,
 .MrlCheckboxStandalone-input:checked ~ .MrlCheckboxStandalone-inputDisplay,
 .mrl-checkbox-input:indeterminate ~ .mrl-checkbox-inputDisplay,
 .MrlCheckboxStandalone-input:indeterminate ~ .MrlCheckboxStandalone-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/dist/styles/grid/variables.scss

@@ -1,9 +1,4 @@
-////
-//// Grid variables
-//// @group grid
-////
 
-//// Grid customizations
 $grid-breakpoints: (
 	xs: 0,
 	sm: 600px,
@@ -13,9 +8,6 @@ $grid-breakpoints: (
 	xxl: 1440px
 );
 $grid-gutter-width: 1rem;
-
-//// Spacers customization
-// Example of impacted selectors: p-1, px-2, px-lg-4, etc. p-16px
 $spacer: 1rem;
 $spacers: (
 	0: 0,
@@ -25,9 +17,6 @@ $spacers: (
 	4: $spacer * 0.25,
 	5: $spacer * 0.5
 );
-
-//// Gutters customization
-// Example of impacted selectors: g-1, gx-2, gx-lg-4, etc.
 $gutters: (
 	0: 0,
 	1: $spacer,

package/dist/styles/modal/variables.scss

@@ -1,18 +1,8 @@
-////
-/// Modal shared variables
-/// @group modal
-////
 
 @use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
 @use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
-
-// @use '~@muraldevkit/ds-component-button/dist/scss/variables' as *;
-
-// import button.variables.scss from button component in this repositories button component
 @use '../button/button.variables.scss' as *;
-
 $mrl-modal-close-size: $mrl-button-height--default;
-
 .mrl-modal {
 	--mrl-modal-header-text-color: rgba(var(--mrl-gray-100), 1);
 	--mrl-modal-padding-vertical: var(--mrl-spacing-07);
@@ -20,22 +10,18 @@ $mrl-modal-close-size: $mrl-button-height--default;
 	--mrl-modal-close-inline-margin: var(--mrl-space-inline-related);
 	--mrl-modal-close-offset: var(--mrl-spacing-06);
 }
-
-/// Media queries' styles for desktop
 @media screen and (min-width: $mrl-breakpoint-01) {
 	.mrl-modal,
 	.mrl-modal .footer.slotted .mrl-modal-footer,
 	.mrl-modal .header.slotted .mrl-modal-header {
 		--mrl-modal-padding-horizontal: var(--mrl-spacing-08);
 	}
-
 	.mrl-modal--large,
 	.mrl-modal--large .footer.slotted .mrl-modal-footer,
 	.mrl-modal--large .header.slotted .mrl-modal-header {
 		--mrl-modal-padding-horizontal: var(--mrl-spacing-09);
 	}
 }
-
 .mrl-native-modal,
 .mrl-display-modal {
 	--mrl-modal-padding-horizontal: var(--mrl-spacing-05);

package/dist/styles/svg/variables.scss

@@ -1,24 +1,16 @@
-////
-/// SVG component variables
-/// @group svg
-////
 
 .MrlSvgContainer,
 .MrlSvg {
-	// default to `medium` size
 	--mrl-svg-size: var(--mrl-spacing-07);
 }
-
 .MrlSvgContainer--small,
 .MrlSvg--small {
 	--mrl-svg-size: var(--mrl-spacing-06);
 }
-
 .MrlSvgContainer--large,
 .MrlSvg--large {
 	--mrl-svg-size: var(--mrl-spacing-10);
 }
-
 .MrlSvgContainer--auto,
 .MrlSvg--auto {
 	--mrl-svg-size: 100%;

package/dist/styles/table/global.scss

@@ -1,18 +1,9 @@
-////
-/// Table shared styles
-/// @group Table
-////
 
-/// Shared between MrlTableColumn and MrlTableCell
-/// which are functionally very similar.
-///
-/// @example @include mrl-cell-layout;
 @mixin mrl-cell-layout {
 	height: var(--mrl-table-column-height);
 	padding-inline: var(--mrl-table-default-padding-inline);
 	text-align: left;
 	vertical-align: middle;
-
 	&:global(.selection) {
 		max-width: var(--mrl-table-selection-width);
 		padding: unset;

package/dist/styles/table/variables.scss

@@ -1,10 +1,3 @@
-////
-/// Table component style variables
-/// @group Table
-////
-
-// Design System Reference:
-// https: //www.figma.com/file/bd6vLvk4eTVGJcxXDaFeHT/DS-Hana-%7C-Core-Library?node-id=24264%3A44378&mode=dev
 
 .MrlTable {
 	--mrl-table-default-width: calc(100% - 10px);
@@ -25,7 +18,6 @@
 	--mrl-table-call-to-action-width: 92px;
 	--mrl-table-action-width: 48px;
 }
-
 .MrlTableEmptyState {
 	--mrl-table-empty-state-padding-block: 64px;
 	--mrl-table-empty-state-padding-inline: 48px;

package/dist/styles/tooltip/mixins.scss

@@ -1,18 +1,7 @@
-////
-/// Mural's tooltip shared styles
-/// @group tooltip
-////
 
-/// Shared styles for text-related inputs such as text-input and textarea
-/// There are no configurations for this mixin
-///
-/// @example @include mrl-text-inputs;
 @mixin mrl-tooltip-show {
 	opacity: 1;
 	pointer-events: inherit;
-
-	// We set these properties only on show so we don't have a delay/animation
-	// when the tooltip is hidden
 	transition-delay: var(--mrl-duration-03);
 	transition-duration: var(--mrl-duration-03);
 	transition-timing-function: var(--mrl-timing-m2);

package/package.json

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