@enact/limestone 1.3.0

package/styles/variables.less

@@ -0,0 +1,1182 @@
+// Variables
+//
+@import "~@enact/ui/styles/variables.less";
+
+//
+// GUI Guide definition library
+//
+// These values come directly from the design guide file. Any changes to that file should be set
+// here first, with measurement adjustments to be preformed on the component value definition lines
+// below.
+//
+// Usage:
+//   * These values should be the most basic literal values. Do not use math in this library;
+//     those belong in the component definitions.
+//   * Always use the full 4-value format for margin and padding defined here for predictability.
+//   * Keep the mixins and their rules alphabetized.
+//   * Spacing for readability is OK.
+//   * Each mixin represents a top-level component.
+//
+#guide() {
+	// Common sizes
+	// 60px - tiny
+	// 78px - small
+	// 90px - medium
+	// 108px - large
+	// 150px - huge
+
+	// Standard Mixins
+
+	// .get-edge-size-difference
+	//
+	// Given the GUI guide line-height and the Enact framework line-height, calculate the difference
+	.get-size-difference(@guide-size, @font-size, @line-height) when ((isem(@line-height)) or (ispercentage(@line-height))) {
+		@result: #guide.get-size-difference(@guide-size, (@font-size * @line-height))[@result];
+	}
+	.get-size-difference(@guide-size, @size) {
+		@result: (@size - @guide-size);
+	}
+
+	// .get-edge-size-difference
+	//
+	// Given the GUI guide line-height and the Enact framework line-height, calculate the difference
+	// in one of the edges.
+	// Results returned in `@results`
+	.get-edge-size-difference(@guide-size, @font-size, @line-height) when ((isem(@line-height)) or (ispercentage(@line-height))) { // Repeating `when` clause here for slightly more descriptive error messages
+		@result: (#guide.get-size-difference(@guide-size, @font-size, @line-height)[@result] / 2);
+	}
+	.get-edge-size-difference(@guide-size, @size) {
+		@result: (#guide.get-size-difference(@guide-size, @size)[@result] / 2);
+	}
+
+
+	// Component Definition Mixins
+	.header() {
+		compact-padding: 60px 60px 0 60px;
+		compact-title-font-size: 90px;
+		compact-title-line-height: 120px;
+		compact-subtitle-font-size: 54px;
+		compact-subtitle-line-height: 72px;
+		compact-subtitle-height: 84px;
+
+		mini-margin: 0 0 36px 0;
+		mini-padding: 60px 60px 45px 60px;
+		mini-title-font-size: 90px;
+		mini-title-line-height: 80px;
+
+		standard-padding: 96px 132px 6px 132px;
+		standard-title-font-size: 108px;
+		standard-title-line-height: 144px;
+		standard-titles-gap: 18px;
+		standard-subtitle-font-size: 54px;
+		standard-subtitle-line-height: 72px;
+
+		wizard-padding: 156px 132px 6px 132px;
+		wizard-title-font-size: 108px;
+		wizard-title-line-height: 144px;
+	}
+
+	.panel() {
+		body-padding: 0 132px;
+	}
+}
+
+// App
+// ---------------------------------------
+@lime-app-keepout: 48px;
+
+// Generic/Common/Shared
+// ---------------------------------------
+@lime-component-spacing: 36px;
+@lime-component-spacing-bottom: 30px;
+@lime-overlay-outline-width: 0.021rem; // 1px
+@lime-smallest-tappable-size: 168px;
+@lime-translate-center: translate(-50%, -50%);
+
+// Locale
+// ---------------------------------------
+// Cambodian(km), Sinhala(si), Thai(th), Vietnamse(vi)
+@locale-tallglyph-languages: km, si, th, vi;
+
+// Spotlight
+// ---------------------------------------
+@lime-spotlight-font-weight: var(--primitive-font-weight-semibold);
+@lime-spotlight-outset: 48px;
+@lime-spotlight-focus-animation-duration: 200ms;
+@lime-spotlight-focus-shadow-height: 36px;
+
+
+// ---------------------------------------
+// Font Rules
+// ---------------------------------------
+
+// Font Sizes
+// ---------------------------------------
+@lime-actionguide-label-font-size:  var(--primitive-font-size-48);
+@lime-actionguide-label-font-weight: var(--primitive-font-weight-regular);
+@lime-alert-overlay-font-size:      var(--primitive-font-size-60);
+@lime-alert-subtitle-font-size:     @lime-heading-subtitle-font-size;
+@lime-alert-title-font-size:        var(--primitive-font-size-108);
+@lime-base-font-size:               var(--primitive-font-size-60);
+@lime-body-font-size:               @lime-base-font-size;
+@lime-body-small-font-size:         var(--primitive-font-size-54);
+@lime-button-font-size-large:       var(--primitive-font-size-96);
+@lime-button-font-size:             var(--primitive-font-size-60);
+@lime-button-small-font-size-large: var(--primitive-font-size-72);
+@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-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-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);
+@lime-iconitem-title-font-size:     var(--primitive-font-size-48);
+@lime-imageitem-caption-font-size:  var(--primitive-font-size-60);
+@lime-imageitem-label-font-size:    var(--primitive-font-size-48);
+@lime-input-font-size:              var(--primitive-font-size-78);
+@lime-input-keypad-key-font-size: var(--primitive-font-size-90);
+@lime-input-fullscreen-title-font-size: var(--primitive-font-size-108);
+@lime-input-fullscreen-numbercell-font-size:  126px;
+@lime-input-fullscreen-numbercell-password-font-size:  var(--primitive-font-size-48);
+@lime-input-fullscreen-numberfield-font-size: @lime-input-font-size;
+@lime-input-overlay-title-font-size:          var(--primitive-font-size-90);
+@lime-input-overlay-numbercell-font-size:     var(--primitive-font-size-108);
+@lime-input-overlay-numbercell-password-font-size:  var(--primitive-font-size-40);
+@lime-input-overlay-numberfield-font-size:    @lime-input-font-size;
+@lime-input-invalid-tooltip-font-size:        @lime-inputfield-invalid-tooltip-font-size;
+@lime-inputfield-invalid-tooltip-font-size:   var(--primitive-font-size-48);
+@lime-inputfield-small-font-size:	var(--primitive-font-size-60);
+@lime-item-font-size:               var(--primitive-font-size-60);
+@lime-item-font-size-large:         var(--primitive-font-size-72);
+@lime-item-label-font-size:         var(--primitive-font-size-48);
+@lime-item-label-font-size-large:   var(--primitive-font-size-54);
+@lime-item-small-font-size:         var(--primitive-font-size-60);
+@lime-item-small-font-size-large:   var(--primitive-font-size-72);
+@lime-item-small-label-font-size:   var(--primitive-font-size-48);
+@lime-keyguide-font-size:           var(--primitive-font-size-60);
+@lime-mediaoverlay-caption-font-size:  var(--primitive-font-size-60);
+@lime-mediaoverlay-text-font-size:     var(--primitive-font-size-48);
+@lime-mediaoverlay-subtitle-font-size: var(--primitive-font-size-48);
+@lime-mediaplayer-times-text-size:    var(--primitive-font-size-48);
+@lime-picker-font-size:             var(--primitive-font-size-54);
+@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-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-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-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;
+@lime-non-latin-header-mini-title-font-size: @lime-header-mini-title-font-size;
+@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-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;
+
+// Other Font Properties
+// ---------------------------------------
+@lime-font-family: "Limestone";        // Formerly weight: 700
+@lime-font-family-bold: "Limestone";   // Formerly weight: 900
+@lime-alt-font-family: "Limestone";
+@lime-number-font-family: "Limestone Number";
+@lime-non-latin-font-family: "Limestone";
+@lime-non-latin-font-family-light: "Limestone";  // Formerly weight: Light
+@lime-non-latin-font-family-bold: "Limestone";   // Formerly weight: Bold
+@lime-non-latin-font-weight: var(--primitive-font-weight-regular);
+@lime-non-latin-font-weight-light: var(--primitive-font-weight-light);
+@lime-non-latin-font-weight-bold: var(--primitive-font-weight-bold);
+@lime-spottable-font-weight: var(--primitive-font-weight-semibold);
+@lime-common-line-height: 1.4em;
+@lime-tallglyph-line-height: 1.5em;
+
+// Alert
+@lime-alert-font-family: @lime-font-family;
+@lime-alert-font-weight: var(--primitive-font-weight-semibold);
+@lime-alert-line-height: 84px;
+
+// Body
+@lime-body-font-family: @lime-font-family;
+@lime-body-font-style: normal;
+@lime-body-font-weight: var(--primitive-font-weight-regular);
+@lime-body-line-height: @lime-common-line-height;
+@lime-body-small-line-height: 1.3em;
+@lime-non-latin-body-font-weight: @lime-non-latin-font-weight-light;
+@lime-non-latin-body-font-style: @lime-body-font-style;
+@lime-tallglyph-body-line-height: 1.7em;
+@lime-non-latin-body-line-height: 66px;
+
+// Button
+@lime-button-font-family: @lime-alt-font-family;
+@lime-button-font-style: normal;
+@lime-button-font-weight: @lime-spottable-font-weight;
+@lime-button-small-font-family: @lime-button-font-family;
+@lime-button-small-font-style: @lime-button-font-style;
+@lime-button-small-font-weight: @lime-button-font-weight;
+@lime-non-latin-button-font-family: @lime-non-latin-font-family-bold;
+@lime-non-latin-button-font-style: @lime-button-font-style;
+@lime-non-latin-button-font-weight: @lime-non-latin-font-weight-bold;
+@lime-non-latin-button-small-font-style: @lime-button-small-font-style;
+@lime-non-latin-button-small-font-weight: @lime-non-latin-font-weight-bold;
+
+// Card
+@lime-card-caption-font-weight: var(--primitive-font-weight-semibold);
+@lime-card-label-font-weight: var(--primitive-font-weight-regular);
+
+// Heading
+@lime-heading-line-height: 1.25em;
+@lime-heading-font-style: normal;
+@lime-heading-title-font-family: @lime-alt-font-family;
+@lime-heading-title-font-weight: var(--primitive-font-weight-semibold);
+@lime-heading-title-line-height: 1.3em;
+@lime-heading-subtitle-font-family: @lime-font-family;
+@lime-heading-subtitle-font-weight: var(--primitive-font-weight-regular);
+@lime-heading-subtitle-line-height: @lime-heading-title-line-height;
+@lime-heading-large-font-family: @lime-font-family;
+@lime-heading-large-font-weight: @lime-spottable-font-weight;
+@lime-heading-medium-font-family: @lime-heading-large-font-family;
+@lime-heading-medium-font-weight: @lime-heading-large-font-weight;
+@lime-heading-small-font-family: @lime-heading-large-font-family;
+@lime-heading-small-font-weight: @lime-heading-large-font-weight;
+@lime-heading-tiny-font-family: @lime-heading-large-font-family;
+@lime-heading-tiny-font-weight: @lime-heading-large-font-weight;
+@lime-heading-letter-spacing: 0;
+@lime-non-latin-heading-font-family: @lime-non-latin-font-family-bold;
+@lime-tallglyph-heading-line-height: @lime-tallglyph-heading-title-line-height;
+@lime-tallglyph-heading-subtitle-line-height: @lime-tallglyph-heading-title-line-height;
+@lime-tallglyph-heading-title-line-height: 1.5em;
+
+// Icon
+@lime-icon-font-family: "Limestone Icons";
+@lime-icon-other-font-family: "LG Icons";
+
+// IconItem
+@lime-iconitem-label-font-weight: var(--primitive-font-weight-semibold);
+@lime-iconitem-title-font-weight: var(--primitive-font-weight-semibold);
+
+// ImageItem
+@lime-imageitem-font-weight: @lime-spottable-font-weight;
+@lime-imageitem-label-font-weight: var(--primitive-font-weight-regular);
+
+// Input
+@lime-input-invalid-tooltip-font-weight: @lime-inputfield-invalid-tooltip-font-weight;
+
+// InputField
+@lime-inputfield-font-weight: @lime-spottable-font-weight;
+@lime-inputfield-invalid-tooltip-font-weight: var(--primitive-font-weight-semibold);
+
+// InputNumber
+@lime-input-number-font-family: @lime-body-font-family;
+
+// Item
+@lime-item-font-weight: @lime-spottable-font-weight;
+@lime-item-label-font-weight: var(--primitive-font-weight-regular);
+@lime-item-line-height: @lime-common-line-height;
+@lime-item-line-height-large: @lime-item-line-height;
+@lime-item-label-line-height: 1.25em;
+@lime-item-small-font-weight: @lime-item-font-weight;
+@lime-item-small-label-font-weight: @lime-item-label-font-weight;
+@lime-item-small-line-height: @lime-common-line-height;
+@lime-item-small-line-height-large: @lime-item-small-line-height;
+@lime-item-small-label-line-height: @lime-item-small-line-height;
+@lime-tallglyph-item-line-height: @lime-tallglyph-line-height;
+@lime-tallglyph-item-line-height-large: @lime-tallglyph-item-line-height;
+@lime-tallglyph-item-label-line-height: @lime-tallglyph-item-line-height;
+@lime-tallglyph-item-small-line-height: @lime-tallglyph-line-height;
+@lime-tallglyph-item-small-line-height-large: @lime-tallglyph-item-small-line-height;
+@lime-tallglyph-item-small-label-line-height: @lime-tallglyph-item-small-line-height;
+
+// Picker
+@lime-tallglyph-picker-line-height: @lime-tallglyph-body-line-height;
+@lime-picker-font-weight: var(--primitive-font-weight-semibold);
+
+// ---------------------------------------
+// Component Rules
+// ---------------------------------------
+
+// ActionGuide
+// ---------------------------------------
+@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-padding: var(--primitive-spacing-12) 0 var(--primitive-spacing-36) 0;
+
+// Alert
+// ---------------------------------------
+@lime-alert-buttons-margin-top: var(--primitive-spacing-96);
+@lime-alert-fullscreen-content-margin: var(--primitive-spacing-36) 0 0 0;
+@lime-alert-fullscreen-image-spacing: var(--primitive-spacing-60);
+@lime-alert-fullscreen-max-width: 2400px;
+@lime-portrait-alert-fullscreen-max-width: 1896px;
+@lime-alert-overlay-buttons-margin-top: var(--primitive-spacing-36);
+@lime-alert-overlay-max-height: 2028px;
+@lime-alert-overlay-image-margin-bottom: var(--primitive-spacing-36);
+@lime-alert-overlay-padding: var(--primitive-spacing-84) 0;
+@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;
+
+// AlertImage
+// ---------------------------------------
+@lime-alert-image-thumbnail-width: 960px;
+@lime-alert-image-thumbnail-height: 540px;
+@lime-alert-image-icon-large-size: 252px;
+@lime-alert-image-icon-small-size: 180px;
+
+// BodyText
+// ---------------------------------------
+@lime-bodytext-margin: 0 @lime-component-spacing @lime-body-font-size @lime-component-spacing;
+@lime-bodytext-padding: 0;
+
+// Button
+// ---------------------------------------
+@lime-button-border-width: 6px;
+@lime-button-bg-opacity: 1;
+@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-focusexpand-margin: 9px .extract(@lime-button-margin, right)[]; // 9px provides enough space for the expanded focus state
+@lime-button-h-padding: 60px;
+@lime-button-height-large: 192px;
+@lime-button-height: 132px;
+@lime-button-icon-h-margin: 24px;
+@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);
+@lime-button-icon-position-after-margin-end: @lime-button-icon-margin-start;
+@lime-button-icon-position-after-margin-start: @lime-button-icon-margin-end;
+@lime-button-icon-position-after-small-margin-end: 0;
+@lime-button-icon-position-after-small-margin-start: @lime-button-icon-small-margin-end;
+@lime-button-icon-small-h-margin: @lime-button-icon-h-margin;
+@lime-button-icon-small-margin-end: @lime-button-icon-small-h-margin;
+@lime-button-icon-small-margin-start: 0;
+@lime-button-icon-small-padding: 0 ((@lime-button-small-height - @lime-icon-small-size) / 2);
+@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-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-height: 12px;
+@lime-button-colordot-h-padding: var(--primitive-spacing-24);
+@lime-button-colordot-padding-start: 36px;
+@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-height: 9px;
+@lime-button-small-colordot-padding-start: 30px;
+@lime-button-icon-only-colordot-width: 66px;
+@lime-button-icon-only-colordot-height: 9px;
+@lime-button-collapse-duration: 300ms;
+@lime-button-collapsable-icon-margin: 0 var(--primitive-spacing-24);
+
+// Card
+// ---------------------------------------
+@lime-card-margin: @lime-item-margin;
+@lime-card-border-radius: 36px;
+@lime-card-image-border-width: 6px;
+@lime-card-resting-border-width: 3px;
+@lime-card-selection-icon-size: 90px;
+@lime-card-selection-icon-border-radius: 50%;
+@lime-card-selection-icon-margin: 0;
+@lime-card-selection-icon-line-height: 90px;
+@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-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-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-horizontal-width: 1320px;
+@lime-card-horizontal-height: 336px;
+@lime-card-horizontal-captions-padding: 48px;
+
+// Checkbox
+// ---------------------------------------
+@lime-checkbox-border-radius: var(--semantic-radius-full);
+@lime-checkbox-border-width: 4px;
+@lime-checkbox-container-position: ((@lime-icon-tiny-size - 132px) / 2);  // Container's total dimensions should be `132px` defined in the GUI spec
+@lime-checkbox-container-border-radius: var(--semantic-radius-button);
+
+// CheckboxItem
+// ---------------------------------------
+@lime-checkboxitem-padding: var(--primitive-spacing-36) var(--primitive-spacing-48) var(--primitive-spacing-36) var(--primitive-spacing-60);
+@lime-checkboxitem-padding-rtl: var(--primitive-spacing-36) var(--primitive-spacing-60) var(--primitive-spacing-36) var(--primitive-spacing-48);
+@lime-checkboxitem-withlabel-padding: var(--primitive-spacing-48) var(--primitive-spacing-48) var(--primitive-spacing-48) var(--primitive-spacing-60);
+@lime-checkboxitem-withlabel-padding-rtl: var(--primitive-spacing-48) var(--primitive-spacing-60) var(--primitive-spacing-48) var(--primitive-spacing-48);
+
+// Chip
+// ---------------------------------------
+@lime-chip-margin: 0;
+@lime-chip-button-spacing: 12px;
+@lime-chip-min-width: 108px;
+@lime-chips-gap: 36px;
+
+// ContextualMenu
+// ---------------------------------------
+@lime-contextualmenu-container-padding: var(--primitive-spacing-36) 0;
+@lime-contextualmenu-max-items: 5;
+@lime-contextualmenu-innercontainer-max-height: @lime-contextualmenu-max-items * @lime-item-small-height;
+@lime-contextualmenu-max-height: (@lime-contextualmenu-innercontainer-max-height + 72px);
+@lime-contextualmenu-large-width: 960px;
+@lime-contextualmenu-large-withScrollbar-width: 984px;
+@lime-contextualmenu-small-width: 612px;
+@lime-contextualmenu-small-withScrollbar-width: 636px;
+
+// ContextualPopup
+// ---------------------------------------
+@lime-contextualpopup-padding: 36px 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;
+
+// Date and Time Picker
+@lime-datecomponentpicker-margin: 0 24px;
+@lime-datetime-heading-margin: 0 0 var(--primitive-spacing-132);
+@lime-timepicker-colon-margin: 0 var(--primitive-spacing-6);
+
+// Dropdown
+// ---------------------------------------
+@lime-dropdown-margin: 0 @lime-spotlight-outset; // this extra margin used to align dropdown container with the outer element
+@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-tiny-width: 480px;
+@lime-dropdown-tiny-title-width: (@lime-dropdown-tiny-width - .extract(@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-medium-width: 690px;
+@lime-dropdown-medium-title-width: (@lime-dropdown-medium-width - .extract(@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-x-large-width: 1050px;
+@lime-dropdown-x-large-title-width: (@lime-dropdown-x-large-width - .extract(@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-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);
+@lime-dropdown-list-large-width: (@lime-dropdown-large-width - @lime-button-border-width);
+@lime-dropdown-list-x-large-width: (@lime-dropdown-x-large-width - @lime-button-border-width);
+@lime-dropdown-list-huge-width: (@lime-dropdown-huge-width - @lime-button-border-width);
+@lime-dropdown-max-items: 5;
+@lime-dropdown-list-min-width: @lime-dropdown-min-width;
+@lime-dropdown-list-max-height: (@lime-dropdown-max-items * @lime-item-height + @lime-item-shadow-height);
+@lime-dropdown-list-max-height-large: (@lime-dropdown-max-items * @lime-item-small-height-large + @lime-item-shadow-height);
+
+// FixedPopupPanels
+// ---------------------------------------
+@lime-fixedpopuppanels-width: 1200px;
+@lime-fixedpopuppanels-half-width: 1716px;
+@lime-fixedpopuppanels-margin: 60px 60px 132px;
+@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-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-navbutton-margin: 0;
+@lime-flexiblepopuppanels-small-width: 600px;
+@lime-flexiblepopuppanels-large-width: 1320px;
+
+// FormCheckboxItem
+// ---------------------------------------
+@lime-formcheckboxitem-checkbox-margin-end: abs(.extract(@lime-checkbox-container-position, right)[]); // checkbox container is a negative value, but we're only interested in positive margin values for this. It's also currently just one value, but could be more in the future, so we'll extract the "right" value.
+
+// 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-subtitle-height: (@lime-heading-subtitle-font-size * @lime-heading-subtitle-line-height);
+@lime-header-subtitle-margin-start: var(--primitive-spacing-6);
+// STOP! READ THE FOLLOWING BEFORE EDITING.
+//
+// Panel imposes no padding so Header is fully responsible for its own positioning. The code below
+// reads values out of the guide definition library and uses them as the basis for calculations when
+// determining the correct padding (positioning) for Header. The GUI guide differs in its
+// line-height vs the framework's line-height due to the framework accounting for tall-glyphs during
+// localization. The visual result of the below calculations is expected to be a match with the
+// guide. Inspecting the Header's padding will result in intentional different values than the
+// values in the guide.
+@lime-header-standard-margin: 0;
+@lime-header-standard-padding:
+	(
+		.extract(#guide.header[standard-padding], top)[]
+		- #guide.get-edge-size-difference(
+			#guide.header[standard-title-line-height],
+			@lime-heading-title-font-size,
+			@lime-heading-title-line-height
+		)[@result]
+	)
+	.extract(#guide.header[standard-padding], right)[]
+	.extract(#guide.header[standard-padding], bottom)[]
+	.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-slotbefore-margin-end: var(--primitive-spacing-36);
+@lime-header-standard-slotafter-margin-start: var(--primitive-spacing-36);
+@lime-header-compact-margin: 0;
+@lime-header-compact-padding:
+	(
+		.extract(#guide.header[compact-padding], top)[]
+		- #guide.get-edge-size-difference(
+			#guide.header[compact-title-line-height],
+			@lime-header-compact-title-font-size,
+			@lime-heading-title-line-height
+		)[@result]
+	)
+	.extract(#guide.header[compact-padding], right)[]
+	(
+		.extract(#guide.header[compact-padding], bottom)[]
+		- #guide.get-edge-size-difference(
+			#guide.header[compact-title-line-height],
+			@lime-header-compact-title-font-size,
+			@lime-heading-title-line-height
+		)[@result]
+	)
+	.extract(#guide.header[compact-padding], left)[];
+@lime-header-compact-title-padding: 0;
+@lime-header-compact-titles-row-padding: 0 0 #guide.header[compact-subtitle-height];
+@lime-header-compact-subtitle-padding: 0;
+@lime-header-compact-subtitle-margin-top: (#guide.header[compact-subtitle-height] - #guide.header[compact-subtitle-line-height]);
+@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
+	@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.
+@lime-header-mini-margin: #guide.header[mini-margin];
+@lime-header-mini-padding:
+	(
+		.extract(#guide.header[mini-padding], top)[]
+		- #guide.get-edge-size-difference(
+			#guide.header[mini-title-line-height],
+			@lime-header-mini-title-font-size,
+			@lime-heading-title-line-height
+		)[@result]
+	)
+	.extract(#guide.header[mini-padding], right)[]
+	(
+		.extract(#guide.header[mini-padding], bottom)[]
+		- #guide.get-edge-size-difference(
+			#guide.header[mini-title-line-height],
+			@lime-header-mini-title-font-size,
+			@lime-heading-title-line-height
+		)[@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-margin: 0;
+@lime-header-wizard-padding:
+	(
+		.extract(#guide.header[wizard-padding], top)[]
+		- #guide.get-edge-size-difference(
+			#guide.header[wizard-title-line-height],
+			@lime-header-wizard-title-font-size,
+			@lime-heading-title-line-height
+		)[@result]
+	)
+	.extract(#guide.header[wizard-padding], right)[]
+	.extract(#guide.header[wizard-padding], bottom)[]
+	.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);
+
+// Heading
+// ---------------------------------------
+@lime-heading-border-width: 1px;
+@lime-heading-margin: 0 var(--primitive-spacing-24) var(--primitive-spacing-36);
+@lime-heading-margin-tiny: var(--primitive-spacing-36) var(--primitive-spacing-24);
+@lime-heading-padding: 0;
+@lime-heading-spacing-title: 0;
+@lime-heading-spacing-subtitle: 0;
+@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 ~")";
+
+// HolePunchScrim
+// ---------------------------------------
+
+// Icon
+// ---------------------------------------
+@lime-icon-large-size: 84px;
+@lime-icon-medium-size: 78px;
+@lime-icon-small-size: 72px;
+@lime-icon-tiny-size: 60px;
+@lime-icon-margin: 24px;
+@lime-icon-large-size-large: (@lime-icon-large-size * 1.2);
+@lime-icon-small-size-large: (@lime-icon-small-size * 1.2);
+
+// IconItem
+// ---------------------------------------
+@lime-iconitem-height: 256px;
+@lime-iconitem-width: 334px;
+@lime-iconitem-title-height: ~"calc("@lime-iconitem-height ~"+ "@lime-iconitem-title-line-height ~"+ 24px)";
+@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;
+@lime-iconitem-image-height: 230px;
+@lime-iconitem-image-width: @lime-iconitem-image-height;
+@lime-iconitem-label-image-height: ~"calc("@lime-iconitem-height ~"- "@lime-iconitem-label-line-height ~"- 24px)";
+@lime-iconitem-label-line-height: 54px;
+@lime-iconitem-label-padding: 0 var(--primitive-spacing-12);
+@lime-iconitem-title-line-height: 60px;
+@lime-iconitem-title-margin: var(--primitive-spacing-24) 0 0 0;
+
+// ImageItem
+// ---------------------------------------
+@lime-imageitem-margin: @lime-item-margin;
+@lime-imageitem-border-radius: var(--semantic-radius-button);
+@lime-imageitem-image-border-width: 6px;
+@lime-imageitem-caption-line-height: 84px;
+@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-image-width: 180px;
+@lime-imageitem-horizontal-image-height: @lime-imageitem-horizontal-image-width;
+@lime-imageitem-horizontal-image-margin: var(--primitive-spacing-48);
+@lime-imageitem-horizontal-selection-icon-margin-left: var(--primitive-spacing-12);
+@lime-imageitem-horizontal-selection-icon-margin-right: var(--primitive-spacing-48);
+@lime-imageitem-horizontal-wideimage-padding: var(--primitive-spacing-48);
+@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-border-width: 2px;
+@lime-imageitem-vertical-full-image-focus-border-width: 6px;
+@lime-imageitem-vertical-captions-margin-top: var(--primitive-spacing-30);
+@lime-imageitem-vertical-label-height: 60px;
+@lime-imageitem-vertical-focus-image-transform: scale(1.1);
+@lime-imageitem-vertical-image-icon-margin: 0 var(--primitive-spacing-24) 0 0;
+@lime-imageitem-vertical-image-icon-size: 132px;
+@lime-imageitem-vertical-selection-icon-size: 120px;
+
+// Input
+// ---------------------------------------
+@lime-input-numbercell-border-radius: var(--semantic-radius-button);
+@lime-input-keypad-key-margin: 0;
+@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-title-height: 228px;
+@lime-input-fullscreen-vkb-height: 876px;
+@lime-input-fullscreen-footer-height: 240px;
+@lime-input-fullscreen-footer-withbuttons-height: 300px;
+@lime-input-fullscreen-numbertype-margin: var(--primitive-spacing-120) 0 0 0;
+@lime-input-fullscreen-numbertype-withbuttons-margin: var(--primitive-spacing-60) 0 0 0;
+@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-numberfield-width: 1104px;
+@lime-input-fullscreen-numberfield-height: 132px;
+@lime-input-fullscreen-numberfield-margin: auto;
+@lime-input-fullscreen-numberfield-padding: 0 var(--primitive-spacing-48);
+@lime-input-fullscreen-numberfield-letter-spacing: var(--primitive-spacing-30);
+@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-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-numbercell-margin: 0 var(--primitive-spacing-24);
+@lime-input-overlay-numbercell-width: 132px;
+@lime-input-overlay-numbercell-height: 156px;
+@lime-input-overlay-numberfield-width: 936px;
+@lime-input-overlay-numberfield-height: 132px;
+@lime-input-overlay-numberfield-margin: @lime-input-fullscreen-numberfield-margin;
+@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-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-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;
+
+// InputField
+// ---------------------------------------
+@lime-inputfield-margin: 0;
+@lime-inputfield-icon-margin: var(--primitive-spacing-30);
+@lime-inputfield-padding: var(--primitive-spacing-24) var(--primitive-spacing-48);
+@lime-inputfield-padding-large: 0 @lime-inputfield-icon-margin;
+@lime-inputfield-password-spacing: var(--primitive-spacing-30);
+@lime-inputfield-text-indent: 0.2em;
+@lime-inputfield-border-radius: var(--semantic-radius-button);
+@lime-inputfield-invalid-tooltip-margin-top: var(--primitive-spacing-30);
+@lime-inputfield-height: 168px;
+@lime-inputfield-width: 1560px;
+@lime-inputfield-small-height: 132px;
+@lime-inputfield-highlight-height: 100%;
+@lime-inputfield-small-width: 1200px;
+
+// Item
+// ---------------------------------------
+@lime-item-height: 156px;
+@lime-item-height-large: @lime-item-height;
+@lime-item-shadow-height: @lime-spotlight-focus-shadow-height;
+@lime-item-withlabel-height: 240px;
+@lime-item-withlabel-padding: var(--primitive-spacing-48) var(--primitive-spacing-48);
+@lime-item-inline-max-width: 480px;
+@lime-item-border-radius: var(--semantic-radius-container);
+@lime-item-slotafter-spacing: var(--primitive-spacing-48);
+@lime-item-slotbefore-spacing: var(--primitive-spacing-48);
+@lime-item-margin: 0 @lime-component-spacing @lime-component-spacing-bottom @lime-component-spacing;
+@lime-item-padding: var(--primitive-spacing-36) var(--primitive-spacing-48);
+@lime-item-small-height: 126px;
+@lime-item-small-height-large: @lime-item-small-height;
+@lime-item-small-withlabel-height: 210px;
+
+// Keyguide
+// ---------------------------------------
+@lime-keyguide-colordot-height: 12px;
+@lime-keyguide-colordot-margin: 0 ((@lime-icon-large-size - @lime-keyguide-colordot-width) / 2); // Keep this centered by adapting its margins
+@lime-keyguide-colordot-width: 60px;
+@lime-keyguide-colordot-border-radius: var(--semantic-radius-full);
+@lime-keyguide-font-weight: var(--primitive-font-weight-regular);
+@lime-keyguide-icon-border-radius: var(--semantic-radius-container);
+@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-right: 150px;
+@lime-keyguide-icon-width: 750px;
+@lime-keyguide-image-padding: var(--primitive-spacing-32) var(--primitive-spacing-42);
+@lime-keyguide-image-margin: 0;
+@lime-keyguide-item-height: 84px;
+@lime-keyguide-image-item-height: 252px;
+@lime-keyguide-image-item-width: 856px;
+@lime-keyguide-image-image-width: 180px;
+@lime-keyguide-image-image-height: 180px;
+@lime-keyguide-image-image-margin-right: var(--primitive-spacing-48);
+@lime-keyguide-arrow-border-width: 30px;
+
+// MediaOverlay
+// ---------------------------------------
+@lime-mediaoverlay-border-radius: var(--primitive-radius-12);
+@lime-mediaoverlay-caption-margin-top: var(--primitive-spacing-36);
+@lime-mediaoverlay-caption-margin-bottom: var(--primitive-spacing-36);
+@lime-mediaoverlay-caption-font-weight: var(--primitive-font-weight-semibold);
+@lime-mediaoverlay-font-weight: var(--primitive-font-weight-regular);
+@lime-mediaoverlay-line-height: 1.3em;
+@lime-mediaoverlay-caption-line-height: 1.4em;
+@lime-mediaoverlay-padding: var(--primitive-spacing-24);
+@lime-mediaoverlay-progressbar-margin: var(--primitive-spacing-24);
+@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-border-radius: 96px;
+@lime-mediaplayer-button-height: 180px;
+@lime-mediaplayer-button-icon-size: 108px;
+@lime-mediaplayer-button-padding: var(--primitive-spacing-36);
+@lime-mediaplayer-controls-actionguide-height: 168px;
+@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-gap: var(--primitive-spacing-120);
+@lime-mediaplayer-controls-height: 180px;
+@lime-mediaplayer-controls-margin-top: 36px;
+@lime-mediaplayer-controls-moreComponents-gap: 204px;
+@lime-mediaplayer-controls-moreComponents-margin-top: 60px;
+@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-tap-area: 60px;
+@lime-mediaplayer-times-line-height: 60px;
+@lime-mediaplayer-times-min-width: 192px;
+
+// PageViews
+// ---------------------------------------
+@lime-pageviews-contents-border-radius: var(--semantic-radius-container);
+@lime-pageviews-navigation-button-area-width: 216px;
+@lime-pageviews-steps-area-min-height: 132px;
+@lime-pageviews-steps-height: 96px;
+@lime-pageviews-dot-highlighted-step-size: 24px;
+@lime-pageviews-dot-step-size: 18px;
+@lime-pageviews-dot-steps-area-min-height: @lime-pageviews-steps-area-min-height;
+@lime-pageviews-full-contents-bottom-steps-bottom: 0;
+@lime-pageviews-number-navigation-button-area-width: 132px;
+@lime-pageviews-number-steps-area-min-height: 252px;
+@lime-pageviews-number-steps-number-width: 168px;
+@lime-pageviews-number-steps-separator-width: 33px;
+@lime-pageviews-indicator-icon-opacity: 0.4;
+@lime-pageviews-indicator-icon-gap: var(--primitive-spacing-24);
+@lime-pageviews-navigation-text-area-padding: 0 var(--primitive-spacing-36);
+
+// Panels
+// ---------------------------------------
+@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);
+
+// Picker
+// ----------------------------------------
+@lime-picker-title-margin-left: @lime-component-spacing + .extract(@lime-button-margin, left)[] + .extract(@lime-button-icon-small-padding, left)[];
+@lime-picker-title-max-width: 480px;
+@lime-picker-margin: 0 @lime-component-spacing;
+@lime-picker-item-padding: 0 @lime-spotlight-outset;
+@lime-picker-focus-duration: @lime-spotlight-focus-animation-duration;
+@lime-picker-value-height: 72px;
+@lime-picker-vertical-height: 362px;
+@lime-picker-vertical-large-value-width: 696px;
+@lime-picker-joined-horizontal-border-radius: var(--semantic-radius-full);
+@lime-picker-joined-horizontal-height: 210px;
+@lime-picker-joined-horizontal-large-value-width: 696px;
+@lime-picker-joined-horizontal-padding: var(--primitive-spacing-36) var(--primitive-spacing-48);
+@lime-picker-joined-horizontal-value-margin: 0 0 var(--primitive-spacing-48) 0;
+@lime-picker-joined-vertical-border-radius: var(--semantic-radius-button);
+@lime-picker-joined-value-height: 90px;
+@lime-picker-small-value-width: (@lime-icon-large-size + (@lime-spotlight-outset * 3));
+@lime-picker-medium-value-width: 360px;
+@lime-picker-large-value-width: 468px;
+@lime-picker-incrementer-margin: var(--primitive-spacing-36);
+@lime-picker-incrementer-width: 120px;
+@lime-picker-indicator-width: 24px;
+@lime-picker-indicator-height: 24px;
+@lime-picker-indicator-border-radius: @lime-picker-indicator-width;
+@lime-picker-indicator-inactive-scale: 0.75;
+@lime-picker-indicator-active-scale: 1;
+@lime-picker-indicator-margin: var(--primitive-spacing-30) var(--primitive-spacing-12) 0;
+
+// Popup
+// ---------------------------------------
+@lime-popup-padding: 48px 72px;
+@lime-popup-border-radius: 24px;
+// 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;
+
+// PopupTabLayout
+// ---------------------------------------
+@lime-popuptablayout-margin: 60px auto 132px 60px;
+@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);
+
+// ProgressBar
+// ---------------------------------------
+@lime-progressbar-bar-thickness: 12px;
+@lime-progressbar-bar-border-radius: var(--semantic-radius-full);
+@lime-progressbar-margin: var(--primitive-spacing-24) 0;
+@lime-progressbar-vertical-min-height: 240px;
+@lime-progressbar-radial-size: 68px;
+@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-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;
+@lime-progressbar-tooltip-radial-offset: @lime-progressbar-tooltip-above-offset;
+
+// ProgressButton
+// ---------------------------------------
+@lime-progressbutton-icon-font-size: (@lime-icon-tiny-size / 2);
+
+// QuickGuidePanels
+// ---------------------------------------
+@lime-quickguidepanels-close-button-margin-top: (
+	.extract(#guide.header[standard-padding], top)[]
+	- #guide.get-edge-size-difference(
+		#guide.header[standard-title-line-height],
+		@lime-heading-title-font-size,
+		@lime-heading-title-line-height
+	)[@result]
+) + 10px;
+@lime-quickguidepanels-close-button-margin-end: 150px;
+@lime-quickguidepanels-navigation-button-margin: 0 12px;
+@lime-quickguidepanels-steps-margin-top: 90px;
+@lime-quickguidepanels-steps-min-height: 48px;
+
+// RadioItem
+// ---------------------------------------
+@lime-radioitem-icon-border-width: 4px; // ### Exceptional Case ###
+	// 4px, not being a multiple of 3, poses special problems. Any math or assignment related to
+	// this value must be specifically considered as to not impose layout issues related to, for
+	// example a width of 39.9996px, which can be treated by 38px or 40px, depending on the case.
+@lime-radioitem-icon-border-radius: var(--semantic-radius-full);
+@lime-radioitem-icon-margin: var(--primitive-spacing-24);
+
+// Scrim
+// ---------------------------------------
+@lime-scrim-color: fade(black, 30%);
+
+// Scrollbar
+// ---------------------------------------
+@lime-scrollbar-padding: 12px;
+@lime-scrollbar-size: 36px;
+@lime-scrollbar-focusable-size: 60px;
+@lime-scrollbar-track-margin: 12px;
+@lime-scrollbar-track-focusable-margin: 24px;
+@lime-scrollbar-track-width: 12px;
+@lime-scrollbar-track-border-radius: var(--semantic-radius-full);
+@lime-scrollbar-thumb-border-radius: var(--semantic-radius-full);
+@lime-scrollbar-thumb-focus-width: 30px;
+@lime-scrollbar-thumb-focus-left: -9px;
+@lime-scrollbar-thumb-focus-border-radius: var(--semantic-radius-full);
+@lime-scrollbar-thumb-focus-box-shadow: 0 6px 18px;
+@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;
+
+// Scroller
+// ---------------------------------------
+@lime-scroll-fade-out-size: 48px;
+@lime-scroll-fade-out-offset: 24px;
+@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;
+
+// Slider
+// ---------------------------------------
+@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-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-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);
+@lime-slider-tooltip-after-offset: (@lime-progressbar-bar-thickness);
+
+// Spinner
+// ---------------------------------------
+@lime-spinner-size: 96px;
+@lime-spinner-small-size: 48px;
+@lime-spinner-small-size-large: 84px;
+@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-font-weight: var(--primitive-font-weight-semibold);
+@lime-spinner-client-height: 132px;
+@lime-spinner-client-line-height: @lime-common-line-height;
+
+// Steps
+// ---------------------------------------
+@lime-steps-step-number-font-weight: var(--primitive-font-weight-semibold);
+@lime-steps-step-margin: 0 var(--primitive-spacing-30);
+@lime-steps-step-current-opacity: 1;
+@lime-steps-step-future-opacity: 1;
+@lime-steps-step-highlight-current-only-future-opacity: 1;
+@lime-steps-pageindicator-size: 18px;
+@lime-steps-pageindicator-margin: 0 var(--primitive-spacing-12);
+@lime-steps-pageindicator-border-radius: var(--semantic-radius-full);
+@lime-steps-pageindicator-current-size: 24px;
+@lime-steps-pageindicator-current-margin: 0 var(--primitive-spacing-6);
+
+// Switch
+// ---------------------------------------
+@lime-switch-border-radius: 30px;
+@lime-switch-height: 60px;
+@lime-switch-width: 120px;
+@lime-switch-icon-height: 48px;
+@lime-switch-icon-line-height: @lime-switch-height;
+@lime-switch-height-large: @lime-icon-small-size-large;
+@lime-switch-width-large: 162px;
+@lime-switch-icon-height-large: @lime-icon-small-size-large;
+@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
+
+// TabLayout
+// ---------------------------------------
+@lime-tablayout-border-radius: var(--semantic-radius-container);
+@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-padding: var(--primitive-spacing-12);
+@lime-tablayout-horizontal-tabs-spacing: var(--primitive-spacing-48);
+@lime-tablayout-vertical-tabs-padding: var(--primitive-spacing-36);
+@lime-tablayout-vertical-tabs-spacing: @lime-tablayout-vertical-tabs-padding;
+@lime-tablayout-tab-vertical-button-height: 156px;
+@lime-tablayout-tab-vertical-margin: var(--primitive-spacing-30);
+@lime-tablayout-tab-vertical-padding: var(--primitive-spacing-36) var(--primitive-spacing-48);
+@lime-tablayout-tab-vertical-icon-padding: var(--primitive-spacing-30);
+@lime-tablayout-tab-vertical-icon-padding-right: var(--primitive-spacing-48);
+@lime-tablayout-tab-horizontal-button-height: 108px;
+@lime-tablayout-tab-horizontal-small-button-height: 96px;
+@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-height: calc(100% - 72px);
+@lime-tablayout-tab-margin: 0;
+
+// Tooltip
+// ---------------------------------------
+@lime-tooltip-font-weight: var(--primitive-font-weight-semibold);
+@lime-tooltip-transparent-font-weight: var(--primitive-font-weight-regular);
+@lime-tooltip-offset: var(--primitive-spacing-24);
+@lime-tooltip-transparent-label-offset: 0px;
+@lime-tooltip-arrow-offset: 0;
+@lime-tooltip-point-width: 31px; // actual value is 30px. +1px to ensure no gaps
+@lime-tooltip-point-height: 37px; // actual value is 36px. +1px to ensure no gaps
+@lime-tooltip-border-radius: var(--semantic-radius-button);
+@lime-tooltip-label-line-height: 72px;
+@lime-tooltip-padding: var(--primitive-spacing-12) var(--primitive-spacing-48);
+@lime-tooltip-margin-offset: var(--primitive-spacing-18); // GUI for the length of the arrow
+@lime-tooltip-marquee-width: 600px;
+@lime-tooltip-max-width: 1200px;
+
+// Video
+// ---------------------------------------
+@lime-video-back-button-left:                      132px;
+@lime-video-back-button-top:                       102px;
+@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-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-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-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-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);
+@lime-video-player-info-font-weight:               var(--primitive-font-weight-regular);
+@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-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-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;
+
+// VirtualList
+// ---------------------------------------
+@lime-virtuallist-container-border-radius: var(--semantic-radius-container);
+
+// 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-footer-margin: 0 0 var(--primitive-spacing-132) 0;
+@lime-wizardpanels-button-icon-text-gap: var(--primitive-spacing-36);