@enact/limestone 1.3.0 → 1.10.0

package/styles/variables.less

@@ -87,9 +87,11 @@
 
 // Generic/Common/Shared
 // ---------------------------------------
-@lime-component-spacing: 36px;
-@lime-component-spacing-bottom: 30px;
-@lime-overlay-outline-width: 0.021rem; // 1px
+@lime-component-spacing: var(--primitive-spacing-36);
+@lime-component-spacing-bottom: var(--primitive-spacing-30);
+@lime-focusexpand-focus-transform: scale(1.1);
+@lime-focusexpand-pressed-transform: scale(1.05);
+@lime-overlay-outline-width: 0.063rem; // 3px
 @lime-smallest-tappable-size: 168px;
 @lime-translate-center: translate(-50%, -50%);
 
@@ -126,13 +128,14 @@
 @lime-button-small-font-size:       var(--primitive-font-size-54);
 @lime-card-caption-font-size:       var(--primitive-font-size-60);
 @lime-card-label-font-size:         var(--primitive-font-size-48);
+@lime-card-split-caption-label-font-size:	var(--primitive-font-size-60);
 @lime-header-compact-title-font-size: #guide.header[compact-title-font-size];
 @lime-header-mini-title-font-size:  #guide.header[mini-title-font-size];
 @lime-header-wizard-title-font-size: #guide.header[wizard-title-font-size];
-@lime-heading-large-font-size:      72px;
-@lime-heading-medium-font-size:     66px;
-@lime-heading-small-font-size:      54px;
-@lime-heading-tiny-font-size:       48px;
+@lime-heading-large-font-size:      var(--primitive-font-size-72);
+@lime-heading-medium-font-size:     var(--primitive-font-size-66);
+@lime-heading-small-font-size:      var(--primitive-font-size-54);
+@lime-heading-tiny-font-size:       var(--primitive-font-size-48);
 @lime-heading-subtitle-font-size:   #guide.header[standard-subtitle-font-size];
 @lime-heading-title-font-size:      #guide.header[standard-title-font-size];
 @lime-iconitem-label-font-size:     var(--primitive-font-size-42);
@@ -168,15 +171,15 @@
 @lime-picker-joined-font-size:      var(--primitive-font-size-66);
 @lime-radioitem-icon-font-size: var(--primitive-font-size-48);
 @lime-steps-step-number-font-size: var(--primitive-font-size-48);
-@lime-switch-icon-font-size:        84px;
+@lime-switch-icon-font-size:        var(--primitive-font-size-84);
 @lime-switch-icon-font-size-large:  138px;
 @lime-tablayout-tab-small-font-size: var(--primitive-font-size-48);
 @lime-tablayout-tab-font-size: var(--primitive-font-size-60);
-@lime-tooltip-label-font-size:      54px;
+@lime-tooltip-label-font-size:      var(--primitive-font-size-54);
 @lime-tallglyph-alert-title-font-size:  @lime-alert-title-font-size;
-@lime-non-latin-body-font-size:         54px;
-@lime-non-latin-body-small-font-size:   48px;
-@lime-tallglyph-body-small-font-size:   48px;
+@lime-non-latin-body-font-size:         var(--primitive-font-size-54);
+@lime-non-latin-body-small-font-size:   var(--primitive-font-size-48);
+@lime-tallglyph-body-small-font-size:   var(--primitive-font-size-48);
 @lime-non-latin-button-large-font-size: var(--primitive-font-size-54);
 @lime-non-latin-button-small-font-size: var(--primitive-font-size-48);
 @lime-non-latin-header-compact-title-font-size: @lime-header-compact-title-font-size;
@@ -184,8 +187,8 @@
 @lime-non-latin-header-wizard-title-font-size: @lime-header-wizard-title-font-size;
 @lime-tallglyph-heading-subtitle-font-size: (@lime-heading-subtitle-font-size - 6px);
 @lime-tallglyph-heading-title-font-size: 114px;
-@lime-tallglyph-imageitem-caption-font-size: 54px;
-@lime-tallglyph-imageitem-label-font-size: 36px;
+@lime-tallglyph-imageitem-caption-font-size: var(--primitive-font-size-54);
+@lime-tallglyph-imageitem-label-font-size: var(--primitive-font-size-36);
 @lime-non-latin-input-fullscreen-title-font-size: @lime-input-fullscreen-title-font-size;
 @lime-non-latin-input-overlay-title-font-size: @lime-input-overlay-title-font-size;
 
@@ -237,6 +240,7 @@
 // Card
 @lime-card-caption-font-weight: var(--primitive-font-weight-semibold);
 @lime-card-label-font-weight: var(--primitive-font-weight-regular);
+@lime-card-split-caption-label-font-weight: var(--primitive-font-weight-semibold);
 
 // Heading
 @lime-heading-line-height: 1.25em;
@@ -314,7 +318,7 @@
 @lime-actionguide-max-width: 1500px;
 @lime-actionguide-label-height: 60px;
 @lime-actionguide-icon-height: 84px;
-@lime-actionguide-icon-margin: 0 0 -12px 0;
+@lime-actionguide-icon-margin: 0 0 ~"calc("var(--primitive-spacing-12) ~"* -1)" 0;
 @lime-actionguide-padding: var(--primitive-spacing-12) 0 var(--primitive-spacing-36) 0;
 
 // Alert
@@ -331,6 +335,7 @@
 @lime-alert-overlay-body-padding: 0 var(--primitive-spacing-84);
 @lime-alert-overlay-image-padding: 0 var(--primitive-spacing-84);
 @lime-alert-overlay-width: 1128px;
+@lime-alert-overlay-max-width: calc(100vw - 2 * @lime-popup-position-corner-margin);
 
 // AlertImage
 // ---------------------------------------
@@ -351,12 +356,12 @@
 @lime-button-transparent-bg-opacity: 0;
 @lime-button-transparent-selected-bg-opacity: 1;
 @lime-button-transparent-disabled-selected-bg-opacity: 0.3;
-@lime-button-margin: 36px;
+@lime-button-margin: var(--primitive-spacing-36);
 @lime-button-focusexpand-margin: 9px .extract(@lime-button-margin, right)[]; // 9px provides enough space for the expanded focus state
-@lime-button-h-padding: 60px;
+@lime-button-h-padding: var(--primitive-spacing-60);
 @lime-button-height-large: 192px;
 @lime-button-height: 132px;
-@lime-button-icon-h-margin: 24px;
+@lime-button-icon-h-margin: var(--primitive-spacing-24);
 @lime-button-icon-margin-end: @lime-button-icon-h-margin;
 @lime-button-icon-margin-start: 0;
 @lime-button-icon-padding: 0 ((@lime-button-height - @lime-icon-large-size) / 2);
@@ -371,31 +376,27 @@
 @lime-button-max-width: 1200px;
 @lime-button-min-width: 300px;
 @lime-button-min-width-default: 840px;
-@lime-button-focusexpand-focus-bg-transform: scale(1.1);
-@lime-button-focusexpand-pressed-bg-transform: scale(1.02);
 @lime-button-focus-duration: @lime-spotlight-focus-animation-duration;
 @lime-button-small-margin: var(--primitive-spacing-24);
 @lime-button-small-focusexpand-margin: @lime-button-focusexpand-margin;
-@lime-button-small-h-padding: 60px;
+@lime-button-small-h-padding: var(--primitive-spacing-60);
 @lime-button-small-height-large: 144px;
 @lime-button-small-height: 108px;
 @lime-button-small-max-width: 1020px;
 @lime-button-small-min-width: 264px;
 @lime-button-small-min-width-default: 720px;
-@lime-button-small-focusexpand-focus-bg-transform: scale(1.1);
-@lime-button-small-focusexpand-pressed-bg-transform: scale(1.04);
 @lime-button-colordot-bottom: var(--primitive-spacing-12);
 @lime-button-colordot-border-radius: var(--semantic-radius-full);
 @lime-button-colordot-width: 60px;
-@lime-button-colordot-h-margin: 84px;
+@lime-button-colordot-h-margin: var(--primitive-spacing-84);
 @lime-button-colordot-height: 12px;
 @lime-button-colordot-h-padding: var(--primitive-spacing-24);
-@lime-button-colordot-padding-start: 36px;
+@lime-button-colordot-padding-start: var(--primitive-spacing-36);
 @lime-button-small-colordot-bottom: var(--primitive-spacing-12);
 @lime-button-small-colordot-width: 51px;
-@lime-button-small-colordot-h-margin: 72px;
+@lime-button-small-colordot-h-margin: var(--primitive-spacing-72);
 @lime-button-small-colordot-height: 9px;
-@lime-button-small-colordot-padding-start: 30px;
+@lime-button-small-colordot-padding-start: var(--primitive-spacing-30);
 @lime-button-icon-only-colordot-width: 66px;
 @lime-button-icon-only-colordot-height: 9px;
 @lime-button-collapse-duration: 300ms;
@@ -404,31 +405,34 @@
 // Card
 // ---------------------------------------
 @lime-card-margin: @lime-item-margin;
-@lime-card-border-radius: 36px;
+@lime-card-border-radius: var(--semantic-radius-container);
 @lime-card-image-border-width: 6px;
 @lime-card-resting-border-width: 3px;
-@lime-card-selection-icon-size: 90px;
+@lime-card-selection-check-icon-size: 90px;
+@lime-card-selection-icon-size: 120px;
 @lime-card-selection-icon-border-radius: 50%;
 @lime-card-selection-icon-margin: 0;
-@lime-card-selection-icon-line-height: 90px;
+@lime-card-selection-check-icon-line-height: 90px;
+@lime-card-selection-icon-line-height: 144px;
 @lime-card-badge-size: 108px;
 @lime-card-badge-margin: 0;
-@lime-card-badge-top: 24px;
-@lime-card-badge-left: 24px;
-@lime-card-badge-right: 24px;
+@lime-card-badge-top: var(--primitive-spacing-24);
+@lime-card-badge-left: var(--primitive-spacing-24);
+@lime-card-badge-right: var(--primitive-spacing-24);
 @lime-card-caption-line-height: 84px;
-@lime-card-caption-height: 84px;
 @lime-card-label-line-height: 60px;
-@lime-card-label-height: 60px;
-@lime-card-vertical-captions-padding: 36px 0;
-@lime-card-vertical-captions-gap: 48px;
+@lime-card-split-caption-label-line-height: 84px;
+@lime-card-split-caption-label-padding: 0 var(--primitive-spacing-48);
+@lime-card-split-caption-lower-label-padding: var(--primitive-spacing-18);
+@lime-card-vertical-captions-padding: var(--primitive-spacing-36) 0;
+@lime-card-vertical-captions-gap: var(--primitive-spacing-48);
 @lime-card-vertical-image-icon-size: 180px;
 @lime-card-vertical-image-icon-margin: 0;
-@lime-card-vertical-caption-overlay-captions-padding: 48px;
-@lime-card-vertical-has-container-captions-padding: 36px 48px;
+@lime-card-vertical-caption-overlay-captions-padding: var(--primitive-spacing-36) var(--primitive-spacing-48);
+@lime-card-vertical-has-container-captions-padding: var(--primitive-spacing-36) var(--primitive-spacing-48);
 @lime-card-horizontal-width: 1320px;
 @lime-card-horizontal-height: 336px;
-@lime-card-horizontal-captions-padding: 48px;
+@lime-card-horizontal-captions-padding: var(--primitive-spacing-48);
 
 // Checkbox
 // ---------------------------------------
@@ -447,9 +451,9 @@
 // Chip
 // ---------------------------------------
 @lime-chip-margin: 0;
-@lime-chip-button-spacing: 12px;
+@lime-chip-button-spacing: var(--primitive-spacing-12);
 @lime-chip-min-width: 108px;
-@lime-chips-gap: 36px;
+@lime-chips-gap: var(--primitive-spacing-36);
 
 // ContextualMenu
 // ---------------------------------------
@@ -464,15 +468,16 @@
 
 // ContextualPopup
 // ---------------------------------------
-@lime-contextualpopup-padding: 36px 0;
+@lime-contextualpopup-padding: var(--primitive-spacing-36) 0;
 @lime-contextualpopup-arrow-height: 60px;
 @lime-contextualpopup-arrow-width: 60px;
-@lime-contextualpopup-offset-overlap: 36px;	// used as inverse of small to cause overlap
-@lime-contextualpopup-offset-small: 18px;
-@lime-contextualpopup-offset-large: 36px;
+@lime-contextualpopup-offset-overlap: var(--primitive-spacing-36);	// used as inverse of small to cause overlap
+@lime-contextualpopup-offset-small: var(--primitive-spacing-18);
+@lime-contextualpopup-offset-large: var(--primitive-spacing-36);
 
 // Date and Time Picker
-@lime-datecomponentpicker-margin: 0 24px;
+@lime-datecomponentpicker-margin: 0 var(--primitive-spacing-24);
+@lime-datetime-fontsize: var(--primitive-font-size-66);
 @lime-datetime-heading-margin: 0 0 var(--primitive-spacing-132);
 @lime-timepicker-colon-margin: 0 var(--primitive-spacing-6);
 
@@ -482,20 +487,21 @@
 @lime-dropdown-padding: 0 var(--primitive-spacing-48);
 @lime-dropdown-min-width: @lime-button-min-width;
 @lime-dropdown-icon-margin: var(--primitive-spacing-36);
-@lime-dropdown-title-padding: 36px 24px;
-@lime-dropdown-title-min-width: (@lime-dropdown-min-width - .extract(@lime-dropdown-title-padding, left)[] * 2);
+@lime-dropdown-title-padding: var(--primitive-spacing-36) var(--primitive-spacing-24);
+@lime-dropdown-title-padding-left: .extract(@lime-dropdown-title-padding, left)[];
+@lime-dropdown-title-min-width: ~"calc(@{lime-dropdown-min-width} - @{lime-dropdown-title-padding-left} * 2)";
 @lime-dropdown-tiny-width: 480px;
-@lime-dropdown-tiny-title-width: (@lime-dropdown-tiny-width - .extract(@lime-dropdown-title-padding, left)[] * 2);
+@lime-dropdown-tiny-title-width: ~"calc(@{lime-dropdown-tiny-width} - @{lime-dropdown-title-padding-left} * 2)";
 @lime-dropdown-small-width: 540px;
-@lime-dropdown-small-title-width: (@lime-dropdown-small-width - .extract(@lime-dropdown-title-padding, left)[] * 2);
+@lime-dropdown-small-title-width: ~"calc(@{lime-dropdown-small-width} - @{lime-dropdown-title-padding-left} * 2)";
 @lime-dropdown-medium-width: 690px;
-@lime-dropdown-medium-title-width: (@lime-dropdown-medium-width - .extract(@lime-dropdown-title-padding, left)[] * 2);
+@lime-dropdown-medium-title-width: ~"calc(@{lime-dropdown-medium-width} - @{lime-dropdown-title-padding-left} * 2)";
 @lime-dropdown-large-width: 840px;
-@lime-dropdown-large-title-width: (@lime-dropdown-large-width - .extract(@lime-dropdown-title-padding, left)[] * 2);
+@lime-dropdown-large-title-width: ~"calc(@{lime-dropdown-large-width} - @{lime-dropdown-title-padding-left} * 2)";
 @lime-dropdown-x-large-width: 1050px;
-@lime-dropdown-x-large-title-width: (@lime-dropdown-x-large-width - .extract(@lime-dropdown-title-padding, left)[] * 2);
+@lime-dropdown-x-large-title-width: ~"calc(@{lime-dropdown-x-large-width} - @{lime-dropdown-title-padding-left} * 2)";
 @lime-dropdown-huge-width: 1380px;
-@lime-dropdown-huge-title-width: (@lime-dropdown-huge-width - .extract(@lime-dropdown-title-padding, left)[] * 2);
+@lime-dropdown-huge-title-width: ~"calc(@{lime-dropdown-huge-width} - @{lime-dropdown-title-padding-left} * 2)";
 @lime-dropdown-list-tiny-width: (@lime-dropdown-tiny-width - @lime-button-border-width);
 @lime-dropdown-list-small-width: (@lime-dropdown-small-width - @lime-button-border-width);
 @lime-dropdown-list-medium-width: (@lime-dropdown-medium-width - @lime-button-border-width);
@@ -511,19 +517,19 @@
 // ---------------------------------------
 @lime-fixedpopuppanels-width: 1200px;
 @lime-fixedpopuppanels-half-width: 1716px;
-@lime-fixedpopuppanels-margin: 60px 60px 132px;
+@lime-fixedpopuppanels-margin: var(--primitive-spacing-60) var(--primitive-spacing-60) var(--primitive-spacing-132);
 @lime-fixedpopuppanels-border-radius: var(--semantic-radius-overlay);
 @lime-fixedpopuppanels-panel-body-padding: var(--primitive-spacing-60);
 
 // FlexiblePopupPanels
 // ---------------------------------------
 @lime-flexiblepopuppanels-min-width: 1140px;
-@lime-flexiblepopuppanels-margin: 60px 0;
-@lime-flexiblepopuppanels-padding: 0 60px (36px + (18px * 1.75));  // Math in an attempt to use the shadow values to calculate the proper margin size so no shadow clipping occurs.
+@lime-flexiblepopuppanels-margin: var(--primitive-spacing-60) 0;
+@lime-flexiblepopuppanels-padding: 0 var(--primitive-spacing-60) ~"calc(var(--primitive-spacing-36) + (var(--primitive-spacing-18) * 1.75))";  // Math in an attempt to use the shadow values to calculate the proper margin size so no shadow clipping occurs.
 @lime-flexiblepopuppanels-panel-border-radius: var(--semantic-radius-overlay);
-@lime-flexiblepopuppanels-panel-margin: 0 60px;
-@lime-flexiblepopuppanels-panel-padding: 60px (60px - @lime-component-spacing);
-@lime-flexiblepopuppanels-body-padding: 0 108px;
+@lime-flexiblepopuppanels-panel-margin: 0 var(--primitive-spacing-60);
+@lime-flexiblepopuppanels-panel-padding: var(--primitive-spacing-60);
+@lime-flexiblepopuppanels-body-padding: 0 var(--primitive-spacing-108);
 @lime-flexiblepopuppanels-navbutton-margin: 0;
 @lime-flexiblepopuppanels-small-width: 600px;
 @lime-flexiblepopuppanels-large-width: 1320px;
@@ -534,10 +540,16 @@
 
 // Header
 // ---------------------------------------
-@lime-header-slotabove-margin: 0 -@lime-component-spacing var(--primitive-spacing-24) -@lime-component-spacing; // Negative margins accommodate the component-spacing
-@lime-header-slotbelow-margin: 18px -@lime-component-spacing 0 -@lime-component-spacing; // Negative margins accommodate the component-spacing
+@lime-header-titleRow-height: 222px;
+@lime-header-centered-titleRow-height: 282px;
+@lime-header-popup-titleRow-height: 204px;
+@lime-header-popup-compact-slotafter-padding-offset: var(--primitive-spacing-24);
+@lime-header-slotabove-margin: 0 ~"calc(@{lime-component-spacing} * -1)" var(--primitive-spacing-24) ~"calc(@{lime-component-spacing} * -1)"; // Negative margins accommodate the component-spacing
+@lime-header-slotbelow-margin: var(--primitive-spacing-18) ~"calc(@{lime-component-spacing} * -1)" 0 ~"calc(@{lime-component-spacing} * -1)"; // Negative margins accommodate the component-spacing
 @lime-header-subtitle-height: (@lime-heading-subtitle-font-size * @lime-heading-subtitle-line-height);
 @lime-header-subtitle-margin-start: var(--primitive-spacing-6);
+@lime-header-tallglyph-titleRow-height: 246px;
+@lime-header-tallglyph-centered-titleRow-height: 306px;
 // STOP! READ THE FOLLOWING BEFORE EDITING.
 //
 // Panel imposes no padding so Header is fully responsible for its own positioning. The code below
@@ -562,21 +574,7 @@
 	.extract(#guide.header[standard-padding], left)[];
 @lime-header-standard-title-padding: 0;
 @lime-header-standard-title-margin-top: var(--primitive-spacing-60);
-@lime-header-standard-subtitle-margin:
-	(
-		.extract(#guide.header[standard-titles-gap], top)[]
-		- #guide.get-edge-size-difference(
-			#guide.header[standard-title-line-height],
-			@lime-heading-title-font-size,
-			@lime-heading-title-line-height
-		)[@result]
-		- #guide.get-edge-size-difference(
-			#guide.header[standard-subtitle-line-height],
-			@lime-heading-subtitle-font-size,
-			@lime-heading-subtitle-line-height
-		)[@result]
-	)
-	0 0 0;
+@lime-header-standard-subtitle-margin: 0;
 @lime-header-standard-slotbefore-margin-end: var(--primitive-spacing-36);
 @lime-header-standard-slotafter-margin-start: var(--primitive-spacing-36);
 @lime-header-compact-margin: 0;
@@ -606,7 +604,7 @@
 @lime-header-compact-slotbefore-margin-end: var(--primitive-spacing-24);
 @lime-header-compact-slotafter-margin-start: var(--primitive-spacing-30);
 @lime-header-mini-margin:
-	6px
+	var(--primitive-spacing-6)
 	@lime-component-spacing
 	.extract(#guide.header[mini-padding], bottom)[]
 	@lime-component-spacing; // 6px top to account for a focused button, so it doesn't clip.
@@ -630,7 +628,7 @@
 		)[@result]
 	)
 	.extract(#guide.header[mini-padding], left)[];
-@lime-header-wizard-nosubtitle-padding-bottom: ~"calc("@lime-header-subtitle-height ~"+ var(--primitive-spacing-6))";
+@lime-header-wizard-nosubtitle-padding-bottom: ~"calc(@{lime-header-subtitle-height} + var(--primitive-spacing-6))";
 @lime-header-wizard-margin: 0;
 @lime-header-wizard-padding:
 	(
@@ -646,7 +644,7 @@
 	.extract(#guide.header[wizard-padding], left)[]; // 66px comes from the GUI guide, as the distance from the bottom of the 2-line subtitle to the top of the content area. We must subtract the padding-top of panel.body to get the total spacing to match the guide.
 @lime-header-wizard-title-padding: 0;
 @lime-header-wizard-subtitle-padding: 0;
-@lime-header-back-container-width: (@lime-button-small-height + @lime-button-icon-small-h-margin);
+@lime-header-back-container-width: ~"calc(@{lime-button-small-height} + @{lime-button-icon-small-h-margin})";
 
 // Heading
 // ---------------------------------------
@@ -659,7 +657,7 @@
 @lime-heading-spacing-large: 78px;
 @lime-heading-spacing-medium: 42px;
 @lime-heading-spacing-small: 18px;
-@lime-heading-spacing-small-margin-bottom: ~"calc(var(--primitive-spacing-36) -" @lime-heading-border-width ~")";
+@lime-heading-spacing-small-margin-bottom: ~"calc(var(--primitive-spacing-36) - @{lime-heading-border-width})";
 
 // HolePunchScrim
 // ---------------------------------------
@@ -670,7 +668,7 @@
 @lime-icon-medium-size: 78px;
 @lime-icon-small-size: 72px;
 @lime-icon-tiny-size: 60px;
-@lime-icon-margin: 24px;
+@lime-icon-margin: var(--primitive-spacing-24);
 @lime-icon-large-size-large: (@lime-icon-large-size * 1.2);
 @lime-icon-small-size-large: (@lime-icon-small-size * 1.2);
 
@@ -682,7 +680,6 @@
 @lime-iconitem-border-radius: var(--semantic-radius-container);
 @lime-iconitem-border-style: solid;
 @lime-iconitem-border-width: 4px;
-@lime-iconitem-focus-transform: scale(1.1);
 @lime-iconitem-icon-margin: 0;
 @lime-iconitem-icon-height: 120px;
 @lime-iconitem-icon-width: @lime-iconitem-icon-height;
@@ -703,7 +700,7 @@
 @lime-imageitem-label-line-height: 60px;
 @lime-imageitem-placeholder-caption-height: 102px;
 @lime-imageitem-placeholder-label-height: 66px;
-@lime-imageitem-horizontal-padding: 30px;
+@lime-imageitem-horizontal-padding: var(--primitive-spacing-30);
 @lime-imageitem-horizontal-image-width: 180px;
 @lime-imageitem-horizontal-image-height: @lime-imageitem-horizontal-image-width;
 @lime-imageitem-horizontal-image-margin: var(--primitive-spacing-48);
@@ -713,7 +710,7 @@
 @lime-imageitem-horizontal-wideimage-image-width: 426px;
 @lime-imageitem-horizontal-wideimage-image-height: 240px;
 @lime-imageitem-vertical-padding: var(--primitive-spacing-24) var(--primitive-spacing-24) var(--primitive-spacing-30);
-@lime-imageitem-vertical-full-image-padding: 60px; // 24px(for expanding) + 36px(for showing shadow)
+@lime-imageitem-vertical-full-image-padding: var(--primitive-spacing-60); // 24px(for expanding) + 36px(for showing shadow)
 @lime-imageitem-vertical-full-image-border-width: 2px;
 @lime-imageitem-vertical-full-image-focus-border-width: 6px;
 @lime-imageitem-vertical-captions-margin-top: var(--primitive-spacing-30);
@@ -730,8 +727,14 @@
 @lime-input-keypad-key-padding: var(--primitive-spacing-24);
 @lime-input-keypad-key-height: 168px;
 @lime-input-keypad-key-width: @lime-input-keypad-key-height;
-@lime-input-fullscreen-padding: (156px - .extract(@lime-popup-padding, top)[]) (324px - .extract(@lime-popup-padding, right)[]) 0 (324px - .extract(@lime-popup-padding, left)[]);
-@lime-portrait-input-fullscreen-padding: (96px - .extract(@lime-popup-padding, top)[]) (132px - .extract(@lime-popup-padding, right)[]) 0 (132px - .extract(@lime-popup-padding, left)[]);
+@lime-input-fullscreen-padding-top: .extract(@lime-popup-padding, top)[];
+@lime-input-fullscreen-padding-right: .extract(@lime-popup-padding, right)[];
+@lime-input-fullscreen-padding-left: .extract(@lime-popup-padding, left)[];
+@lime-input-fullscreen-padding: ~"calc(var(--primitive-spacing-156) - @{lime-input-fullscreen-padding-top})" ~"calc(324px - @{lime-input-fullscreen-padding-right})" 0 ~"calc(324px - @{lime-input-fullscreen-padding-left})";
+@lime-portrait-input-fullscreen-padding-top: .extract(@lime-popup-padding, top)[];
+@lime-portrait-input-fullscreen-padding-right: .extract(@lime-popup-padding, right)[];
+@lime-portrait-input-fullscreen-padding-left: .extract(@lime-popup-padding, left)[];
+@lime-portrait-input-fullscreen-padding: ~"calc(var(--primitive-spacing-96) - @{lime-portrait-input-fullscreen-padding-top})" ~"calc(var(--primitive-spacing-132) - @{lime-portrait-input-fullscreen-padding-right})" 0 ~"calc(var(--primitive-spacing-132) - @{lime-portrait-input-fullscreen-padding-left})";
 @lime-input-fullscreen-title-height: 228px;
 @lime-input-fullscreen-vkb-height: 876px;
 @lime-input-fullscreen-footer-height: 240px;
@@ -741,7 +744,7 @@
 @lime-input-fullscreen-numbercell-width: 180px;
 @lime-input-fullscreen-numbercell-height: 240px;
 @lime-input-fullscreen-numbercell-margin: 0;
-@lime-input-fullscreen-numbercell-gap: 60px;
+@lime-input-fullscreen-numbercell-gap: var(--primitive-spacing-60);
 @lime-input-fullscreen-numberfield-width: 1104px;
 @lime-input-fullscreen-numberfield-height: 132px;
 @lime-input-fullscreen-numberfield-margin: auto;
@@ -750,14 +753,14 @@
 @lime-input-fullscreen-keypad-margin: var(--primitive-spacing-132) auto 0 auto;
 @lime-input-fullscreen-buttonarea-margin: 0;
 @lime-input-fullscreen-invalid-tooltip-width: 3240px;
-@lime-input-fullscreen-back-button-top: 108px;
-@lime-input-fullscreen-back-button-start: 132px;
+@lime-input-fullscreen-back-button-top: var(--primitive-spacing-108);
+@lime-input-fullscreen-back-button-start: var(--primitive-spacing-132);
 @lime-portrait-input-fullscreen-keypad-margin: var(--primitive-spacing-132) auto 0 auto;
 @lime-portrait-input-fullscreen-number-inputarea-margin: var(--primitive-spacing-96) 0 0 0;
 @lime-input-overlay-body-padding: var(--primitive-spacing-84) var(--primitive-spacing-60);
 @lime-input-overlay-border-radius: var(--semantic-radius-popup);
 @lime-input-overlay-width: 1320px;
-@lime-input-overlay-inputarea-margin: var(--primitive-spacing-60) 0 0 0;
+@lime-input-overlay-inputarea-margin: var(--primitive-spacing-60) 0 var(--primitive-spacing-24);
 @lime-input-overlay-numbercell-margin: 0 var(--primitive-spacing-24);
 @lime-input-overlay-numbercell-width: 132px;
 @lime-input-overlay-numbercell-height: 156px;
@@ -767,13 +770,14 @@
 @lime-input-overlay-numberfield-padding: 0 var(--primitive-spacing-48);
 @lime-input-overlay-numberfield-letter-spacing: var(--primitive-spacing-30);
 @lime-input-overlay-keypad-gap: var(--primitive-spacing-60);
-@lime-input-overlay-keypad-margin: var(--primitive-spacing-132) 198px 60px 198px;
+@lime-input-overlay-keypad-margin: var(--primitive-spacing-132) 198px var(--primitive-spacing-60) 198px;
 @lime-input-overlay-keypad-width: 624px;
 @lime-input-overlay-keypad-width-large: 120px + (@lime-button-height-large * 3);
 @lime-input-overlay-buttonarea-margin: 0;
 @lime-input-overlay-submitbutton-margin: var(--primitive-spacing-60) auto 0 auto;
 @lime-input-overlay-invalid-tooltip-width: 738px;
 @lime-input-overlay-textfield-width: 1032px;
+@lime-input-overlay-no-title-height: 120px;
 @lime-input-overlay-title-margin: 0 var(--primitive-spacing-144) 0 var(--primitive-spacing-144);
 @lime-input-invalid-tooltip-margin-top: var(--primitive-spacing-24);
 @lime-input-invalid-tooltip-line-height: 60px;
@@ -790,9 +794,13 @@
 @lime-inputfield-invalid-tooltip-margin-top: var(--primitive-spacing-30);
 @lime-inputfield-height: 168px;
 @lime-inputfield-width: 1560px;
+@lime-inputfield-withoneicon-width: 1386px;
+@lime-inputfield-withtwoicons-width: 1272px;
 @lime-inputfield-small-height: 132px;
 @lime-inputfield-highlight-height: 100%;
 @lime-inputfield-small-width: 1200px;
+@lime-inputfield-small-withoneicon-width: 990px;
+@lime-inputfield-small-withtwoicons-width: 876px;
 
 // Item
 // ---------------------------------------
@@ -822,7 +830,7 @@
 @lime-keyguide-icon-icon-margin-right: var(--primitive-spacing-48);
 @lime-keyguide-icon-gap: var(--primitive-spacing-42);
 @lime-keyguide-icon-padding: var(--primitive-spacing-48);
-@lime-keyguide-icon-position-bottom: 120px;
+@lime-keyguide-icon-position-bottom: var(--primitive-spacing-120);
 @lime-keyguide-icon-position-right: 150px;
 @lime-keyguide-icon-width: 750px;
 @lime-keyguide-image-padding: var(--primitive-spacing-32) var(--primitive-spacing-42);
@@ -849,12 +857,11 @@
 @lime-mediaoverlay-text-margin-bottom: var(--primitive-spacing-36);
 @lime-mediaoverlay-textlayout-margin: var(--primitive-spacing-24) var(--primitive-spacing-60);
 @lime-mediaoverlay-width: 768px;
-@lime-mediaoverlay-focus-media-transform: scale(1.1);
 @lime-mediaoverlay-focus-media-outline-width: 6px;
 
 // MediaPlayer
 // ---------------------------------------
-@lime-mediaplayer-button-client-padding: 0 18px;
+@lime-mediaplayer-button-client-padding: 0 var(--primitive-spacing-18);
 @lime-mediaplayer-button-border-radius: 96px;
 @lime-mediaplayer-button-height: 180px;
 @lime-mediaplayer-button-icon-size: 108px;
@@ -863,16 +870,15 @@
 @lime-mediaplayer-controls-actionguide-padding-bottom: 0;
 @lime-mediaplayer-controls-actionguide-padding-top: var(--primitive-spacing-72);
 @lime-mediaplayer-controls-actionguide-time: 0.2s;		// Length of the animation
-@lime-mediaplayer-controls-button-margin-start: 90px;
+@lime-mediaplayer-controls-button-margin-start: var(--primitive-spacing-90);
 @lime-mediaplayer-controls-gap: var(--primitive-spacing-120);
 @lime-mediaplayer-controls-height: 180px;
-@lime-mediaplayer-controls-margin-top: 36px;
+@lime-mediaplayer-controls-margin-top: var(--primitive-spacing-36);
 @lime-mediaplayer-controls-moreComponents-gap: 204px;
-@lime-mediaplayer-controls-moreComponents-margin-top: 60px;
+@lime-mediaplayer-controls-moreComponents-margin-top: var(--primitive-spacing-60);
 @lime-mediaplayer-controls-moreComponents-time: 0.3s;		// Length of the animation
 @lime-mediaplayer-slider-height: 12px;
-@lime-mediaplayer-slider-knob-resting-state-scale: @lime-slider-knob-resting-state-scale;
-@lime-mediaplayer-slider-knob-size: 48px;
+@lime-mediaplayer-slider-knob-size: 36px;
 @lime-mediaplayer-slider-tap-area: 60px;
 @lime-mediaplayer-times-line-height: 60px;
 @lime-mediaplayer-times-min-width: 192px;
@@ -899,11 +905,14 @@
 // ---------------------------------------
 @lime-panel-padding: 0;
 @lime-panel-body-padding-top: .extract(#guide.panel[body-padding], top)[]; // Used in this file only, for consistency
-@lime-panel-body-padding: @lime-panel-body-padding-top (.extract(#guide.panel[body-padding], right)[] - @lime-component-spacing);
+@lime-panel-body-padding-right: .extract(#guide.panel[body-padding], right)[];
+@lime-panel-body-padding: @lime-panel-body-padding-top ~"calc(@{lime-panel-body-padding-right} - @{lime-component-spacing})";
 
 // Picker
 // ----------------------------------------
-@lime-picker-title-margin-left: @lime-component-spacing + .extract(@lime-button-margin, left)[] + .extract(@lime-button-icon-small-padding, left)[];
+@lime-picker-title-margin-left-button: .extract(@lime-button-margin, left)[];
+@lime-picker-title-margin-left-icon: .extract(@lime-button-icon-small-padding, left)[];
+@lime-picker-title-margin-left: ~"calc(@{lime-component-spacing} + @{lime-picker-title-margin-left-button} + @{lime-picker-title-margin-left-icon})";
 @lime-picker-title-max-width: 480px;
 @lime-picker-margin: 0 @lime-component-spacing;
 @lime-picker-item-padding: 0 @lime-spotlight-outset;
@@ -932,23 +941,25 @@
 
 // Popup
 // ---------------------------------------
-@lime-popup-padding: 48px 72px;
-@lime-popup-border-radius: 24px;
+@lime-popup-padding: var(--primitive-spacing-48) var(--primitive-spacing-72);
+@lime-popup-border-radius: var(--primitive-radius-24);
 // Remove the margin on the leading edge so we're not wasting some of our transition frames on animating empty space, but also account for the shadow.
-@lime-popup-position-top-margin: 150px 120px 78px 120px; // 78px is the amount of space the shadow renders onto, so it's not clipped.
-@lime-popup-position-right-margin: 120px 60px 120px @lime-component-spacing;
-@lime-popup-position-bottom-margin: 0 120px 150px 120px;
-@lime-popup-position-left-margin: 120px @lime-component-spacing 120px 60px;
-@lime-popup-position-corner-margin: 60px;
+@lime-popup-position-top-margin: 150px var(--primitive-spacing-120) 78px var(--primitive-spacing-120); // 78px is the amount of space the shadow renders onto, so it's not clipped.
+@lime-popup-position-right-margin: var(--primitive-spacing-120) var(--primitive-spacing-60) var(--primitive-spacing-120) @lime-component-spacing;
+@lime-popup-position-bottom-margin: 0 var(--primitive-spacing-120) 150px var(--primitive-spacing-120);
+@lime-popup-position-left-margin: var(--primitive-spacing-120) @lime-component-spacing  var(--primitive-spacing-120) var(--primitive-spacing-60);
+@lime-popup-position-corner-margin: var(--primitive-spacing-60);
 
 // PopupTabLayout
 // ---------------------------------------
-@lime-popuptablayout-margin: 60px auto 132px 60px;
+@lime-popuptablayout-margin: var(--primitive-spacing-60) auto var(--primitive-spacing-132) var(--primitive-spacing-60);
+@lime-popuptablayout-tab-icon-size: 96px;
 @lime-popuptablayout-tabs-border-radius: var(--semantic-radius-container);
 @lime-popuptablayout-tabs-content-spacing: var(--primitive-spacing-36);
 @lime-popuptablayout-content-border-radius: var(--semantic-radius-popup);
 @lime-popuptablayout-content-margin: 0;
 @lime-popuptablayout-panel-body-padding: var(--primitive-spacing-60);
+@lime-popuptablayout-panel-min-height: 996px;
 
 // ProgressBar
 // ---------------------------------------
@@ -960,8 +971,8 @@
 @lime-progressbar-radial-thickness: 6px;
 @lime-progressbar-anchor-width: 6px;
 @lime-progressbar-anchor-height: 48px;
-@lime-progressbar-tooltip-offset: 12px;
-@lime-progressbar-tooltip-above-offset: (@lime-progressbar-tooltip-offset + @lime-progressbar-bar-thickness);
+@lime-progressbar-tooltip-offset: var(--primitive-spacing-12);
+@lime-progressbar-tooltip-above-offset: ~"calc(@{lime-progressbar-tooltip-offset} + @{lime-progressbar-bar-thickness})";
 @lime-progressbar-tooltip-below-offset: @lime-progressbar-tooltip-above-offset;
 @lime-progressbar-tooltip-before-offset: @lime-progressbar-tooltip-below-offset;
 @lime-progressbar-tooltip-after-offset: @lime-progressbar-tooltip-above-offset;
@@ -982,8 +993,8 @@
 	)[@result]
 ) + 10px;
 @lime-quickguidepanels-close-button-margin-end: 150px;
-@lime-quickguidepanels-navigation-button-margin: 0 12px;
-@lime-quickguidepanels-steps-margin-top: 90px;
+@lime-quickguidepanels-navigation-button-margin: 0 var(--primitive-spacing-12);
+@lime-quickguidepanels-steps-margin-top: var(--primitive-spacing-90);
 @lime-quickguidepanels-steps-min-height: 48px;
 
 // RadioItem
@@ -1001,11 +1012,11 @@
 
 // Scrollbar
 // ---------------------------------------
-@lime-scrollbar-padding: 12px;
+@lime-scrollbar-padding: var(--primitive-spacing-12);
 @lime-scrollbar-size: 36px;
 @lime-scrollbar-focusable-size: 60px;
-@lime-scrollbar-track-margin: 12px;
-@lime-scrollbar-track-focusable-margin: 24px;
+@lime-scrollbar-track-margin: var(--primitive-spacing-12);
+@lime-scrollbar-track-focusable-margin: var(--primitive-spacing-24);
 @lime-scrollbar-track-width: 12px;
 @lime-scrollbar-track-border-radius: var(--semantic-radius-full);
 @lime-scrollbar-thumb-border-radius: var(--semantic-radius-full);
@@ -1016,30 +1027,39 @@
 @lime-scrollbar-thumb-focus-direction-indicator-width: 18px;
 @lime-scrollbar-thumb-focus-direction-indicator-height: 12px;
 @lime-scrollbar-thumb-focus-direction-indicator-top: 9px;
-@lime-scrollbar-thumb-focus-direction-indicator-left: 6px;
+@lime-scrollbar-thumb-focus-direction-indicator-left: var(--primitive-spacing-6);
 
 // Scroller
 // ---------------------------------------
 @lime-scroll-fade-out-size: 48px;
-@lime-scroll-fade-out-offset: 24px;
+@lime-scroll-fade-out-offset: var(--primitive-spacing-24);
 @lime-scroll-vertical-fade-out-padding: @lime-scroll-fade-out-size 0;
 @lime-scroll-horizontal-fade-out-padding: 0 @lime-scroll-fade-out-size;
 @lime-scroll-hover-area-size: 120px;
-@lime-scroll-focusablebody-padding: 72px 48px 72px 90px;
-@lime-scroll-focusablebody-padding-rtl: 72px 90px 72px 48px;
-@lime-scroll-focusablebody-focus-border-radius: 12px;
+@lime-scroll-focusablebody-padding: var(--primitive-spacing-72) var(--primitive-spacing-48) var(--primitive-spacing-72) var(--primitive-spacing-90);
+@lime-scroll-focusablebody-padding-rtl: var(--primitive-spacing-72) var(--primitive-spacing-90) var(--primitive-spacing-72) var(--primitive-spacing-48);
+@lime-scroll-focusablebody-focus-border-radius: var(--primitive-radius-12);
 
 // Slider
 // ---------------------------------------
+@lime-slider-focusin-transform: scale(1.33);
+@lime-slider-focusout-transform: scale(1);
+@lime-slider-press-transform: scale(1.16);
+@lime-slider-release-transform: @lime-slider-focusin-transform;
 @lime-slider-bar-height: @lime-progressbar-bar-thickness;
 @lime-slider-bar-vertical-min-height: 240px;
-@lime-slider-bar-padding: 24px;
-@lime-slider-knob-width: 48px;
+@lime-slider-bar-min-max-padding-bottom: var(--primitive-spacing-84);
+@lime-slider-bar-padding: var(--primitive-spacing-24);
+@lime-slider-knob-width: 36px;
 @lime-slider-knob-width-large: @lime-slider-knob-width;
 @lime-slider-knob-height: @lime-slider-knob-width;
 @lime-slider-knob-height-large: @lime-slider-knob-height;
 @lime-slider-tooltip-offset: (@lime-slider-knob-height / 2);
-@lime-slider-knob-resting-state-scale: 0.75;
+@lime-slider-min-max-margin-top: var(--primitive-spacing-24);
+@lime-slider-min-max-font-size: var(--primitive-font-size-48);
+@lime-slider-min-max-font-weight: var(--primitive-font-weight-regular);
+@lime-slider-min-max-line-height: 60px;
+@lime-slider-vertical-min-max-margin-left: var(--primitive-spacing-24);
 @lime-slider-tooltip-above-offset: (-@lime-progressbar-bar-thickness);
 @lime-slider-tooltip-below-offset: (@lime-progressbar-bar-thickness);
 @lime-slider-tooltip-before-offset: (-@lime-progressbar-bar-thickness);
@@ -1053,8 +1073,8 @@
 @lime-spinner-time: 1.25s;		// Length of the spinner animation
 @lime-spinner-line-width: 6px;
 @lime-spinner-small-line-width: 6px;
-@lime-spinner-line-margin: 24px;
-@lime-spinner-small-line-margin: 12px;
+@lime-spinner-line-margin: var(--primitive-spacing-24);
+@lime-spinner-small-line-margin: var(--primitive-spacing-12);
 @lime-spinner-font-weight: var(--primitive-font-weight-semibold);
 @lime-spinner-client-height: 132px;
 @lime-spinner-client-line-height: @lime-common-line-height;
@@ -1074,7 +1094,7 @@
 
 // Switch
 // ---------------------------------------
-@lime-switch-border-radius: 30px;
+@lime-switch-border-radius: var(--primitive-radius-30);
 @lime-switch-height: 60px;
 @lime-switch-width: 120px;
 @lime-switch-icon-height: 48px;
@@ -1085,8 +1105,8 @@
 @lime-switch-icon-line-height-large: @lime-switch-icon-height-large;
 @lime-switch-icon-top: ((@lime-switch-height - @lime-switch-icon-height) / 2);
 @lime-switch-spottable-margin: @lime-component-spacing;
-@lime-switch-spottable-border-radius: 24px;
-@lime-switch-spottable-position: -@lime-component-spacing; // These correlate with the numbers from 'margin" above
+@lime-switch-spottable-border-radius: var(--primitive-radius-24);
+@lime-switch-spottable-position: ~"calc(@{lime-component-spacing} * -1)"; // These correlate with the numbers from 'margin" above
 
 // TabLayout
 // ---------------------------------------
@@ -1094,7 +1114,7 @@
 @lime-tablayout-collapse-duration: 250ms;
 @lime-tablayout-vertical-content-margin-top: 0;
 @lime-tablayout-horizontal-content-margin-top: var(--primitive-spacing-96);
-@lime-tablayout-horizontal-tabs-margin: 0 18px;
+@lime-tablayout-horizontal-tabs-margin: 0 var(--primitive-spacing-18);
 @lime-tablayout-horizontal-tabs-padding: var(--primitive-spacing-12);
 @lime-tablayout-horizontal-tabs-spacing: var(--primitive-spacing-48);
 @lime-tablayout-vertical-tabs-padding: var(--primitive-spacing-36);
@@ -1109,7 +1129,7 @@
 @lime-tablayout-tab-horizontal-small-button-line-height: 60px;
 @lime-tablayout-tab-horizontal-padding: var(--primitive-spacing-24);
 @lime-tablayout-tab-group-vertical-height: 1584px;
-@lime-tablayout-tab-group-vertical-scrollbar-track-margin: 36px;
+@lime-tablayout-tab-group-vertical-scrollbar-track-margin: var(--primitive-spacing-36);
 @lime-tablayout-tab-group-vertical-scrollbar-height: calc(100% - 72px);
 @lime-tablayout-tab-margin: 0;
 
@@ -1131,28 +1151,33 @@
 
 // Video
 // ---------------------------------------
-@lime-video-back-button-left:                      132px;
-@lime-video-back-button-top:                       102px;
+@lime-video-back-button-left:                      var(--primitive-spacing-132);
+@lime-video-back-button-top:                       var(--primitive-spacing-102);
 @lime-video-slider-tooltip-arrow-border-left-right: 18px;
 @lime-video-slider-tooltip-arrow-border-top:       24px;
-@lime-video-slider-tooltip-position-bottom:        42px;
-@lime-video-slider-tooltip-shift-position-bottom:  @lime-video-slider-tooltip-position-bottom + @lime-video-slider-tooltip-arrow-border-top;
-@lime-video-slider-tooltip-margin-bottom:          6px;
-@lime-video-slider-tooltip-font-size:              48px;
+@lime-video-slider-tooltip-content-padding:        0 var(--primitive-spacing-36);
+@lime-video-slider-tooltip-position-bottom:        var(--primitive-spacing-42);
+@lime-video-slider-tooltip-shift-position-bottom:  ~"calc(@{lime-video-slider-tooltip-position-bottom} + @{lime-video-slider-tooltip-arrow-border-top})";
+@lime-video-slider-tooltip-margin-bottom:          var(--primitive-spacing-6);
+@lime-video-slider-tooltip-font-size:              var(--primitive-font-size-48);
 @lime-video-slider-tooltip-font-weight:            var(--primitive-font-weight-regular);
 @lime-video-slider-tooltip-line-height:            72px;
-@lime-video-slider-tooltip-gutter-width:           var(--primitive-spacing-12);
-@lime-video-slider-tooltip-thumbnail-border-width: 6px;
+@lime-video-slider-tooltip-gutter-width:           var(--primitive-spacing-42);
+@lime-video-slider-tooltip-thumbnail-content-font-size:     var(--primitive-font-size-54);
+@lime-video-slider-tooltip-thumbnail-content-margin-bottom: var(--primitive-spacing-30);
+@lime-video-slider-tooltip-thumbnail-border-radius: var(--primitive-radius-12);
+@lime-video-slider-tooltip-thumbnail-border-width:  12px;
 @lime-video-slider-tooltip-thumbnail-width:  426px;
 @lime-video-slider-tooltip-thumbnail-height: 240px;
 @lime-video-slider-tooltip-deactivated-thumbnail-opacity: 0.5;
 @lime-video-feedback-icon-font-size:               1.25em;
-@lime-video-feedback-margin:                       24px;
-@lime-video-feedback-mini-font-size:               var(--primitive-font-size-60);
+@lime-video-feedback-mini-font-size:               var(--primitive-font-size-66);
 @lime-video-feedback-mini-font-weight:             var(--primitive-font-weight-regular);
-@lime-video-feedback-mini-height:                  168px;
-@lime-video-feedback-mini-line-height:             @lime-common-line-height;
-@lime-video-feedback-mini-margin-bottom:           72px;
+@lime-video-feedback-mini-padding:                 var(--primitive-spacing-18) var(--primitive-spacing-60);
+@lime-video-feedback-mini-height:                  84px;
+@lime-video-feedback-mini-margin-bottom:           var(--primitive-spacing-72);
+@lime-video-feedback-mini-left:					   276px;
+@lime-video-feedback-mini-top:					   @lime-video-back-button-top;
 @lime-video-feedback-message-font-weight:          var(--primitive-font-weight-semibold);
 @lime-video-player-badge-text-size:                var(--primitive-font-size-48);
 @lime-video-player-info-font-size:                 var(--primitive-font-size-54);
@@ -1160,11 +1185,11 @@
 @lime-video-player-info-height:                    84px;
 @lime-video-player-info-line-height:               72px;
 @lime-video-player-info-padding:                   var(--primitive-spacing-72) var(--primitive-spacing-48) 0;
-@lime-video-player-info-margin-bottom:             60px;
+@lime-video-player-info-margin-bottom:             var(--primitive-spacing-60);
 @lime-video-player-slider-container-height:        132px;
 @lime-video-player-slider-container-padding:       0 var(--primitive-spacing-48);
 @lime-video-player-padding-bottom:                 0;
-@lime-video-player-padding-side:                   132px;
+@lime-video-player-padding-side:                   var(--primitive-spacing-132);
 @lime-video-player-label-font-size:                var(--primitive-font-size-90);
 @lime-video-player-label-font-weight:              var(--primitive-font-weight-semibold);
 @lime-video-player-label-line-height:              120px;
@@ -1176,7 +1201,8 @@
 // WizardPanels
 // ---------------------------------------
 @lime-wizardpanels-steps-height: 60px;
-@lime-wizardpanels-steps-margin-top: ~"calc("var(--primitive-spacing-84) ~"* -1)"; // The negative value (-84px = steps height (60px) + additional spacing between the title and steps (24px)), ensures the steps component doesn't affect the padding between title and top of the container
-@lime-wizardpanels-content-margin: var(--primitive-spacing-60) (324px - .extract(@lime-panel-body-padding, left)[]);
+@lime-wizardpanels-steps-margin-top: ~"calc(var(--primitive-spacing-84) * -1)"; // The negative value (-84px = steps height (60px) + additional spacing between the title and steps (24px)), ensures the steps component doesn't affect the padding between title and top of the container
+@lime-wizardpanels-content-margin-left: .extract(@lime-panel-body-padding, left)[];
+@lime-wizardpanels-content-margin: var(--primitive-spacing-60) ~"calc(324px - @{lime-wizardpanels-content-margin-left})";
 @lime-wizardpanels-footer-margin: 0 0 var(--primitive-spacing-132) 0;
 @lime-wizardpanels-button-icon-text-gap: var(--primitive-spacing-36);