@enact/limestone 1.10.0 → 1.10.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (133) hide show
  1. package/.github/PULL_REQUEST_TEMPLATE.md +1 -0
  2. package/ActionGuide/ActionGuide.d.ts +1 -1
  3. package/ActionGuide/ActionGuide.module.css +7 -0
  4. package/Alert/Alert.d.ts +9 -0
  5. package/Alert/Alert.js +63 -21
  6. package/Alert/Alert.module.css +41 -9
  7. package/Alert/AlertImage.module.css +5 -1
  8. package/Alert/tests/Alert-specs.js +6 -2
  9. package/BodyText/BodyText.d.ts +1 -1
  10. package/BodyText/BodyText.js +14 -9
  11. package/BodyText/BodyText.module.css +22 -1
  12. package/Button/Button.d.ts +3 -3
  13. package/Button/Button.module.css +81 -63
  14. package/CHANGELOG.md +87 -0
  15. package/Card/Card.d.ts +81 -9
  16. package/Card/Card.js +324 -84
  17. package/Card/Card.module.css +200 -25
  18. package/Card/tests/Card-specs.js +100 -0
  19. package/Checkbox/Checkbox.d.ts +2 -2
  20. package/Checkbox/Checkbox.module.css +2 -5
  21. package/CheckboxItem/CheckboxItem.d.ts +8 -1
  22. package/CheckboxItem/CheckboxItem.js +39 -12
  23. package/CheckboxItem/CheckboxItem.module.css +228 -4
  24. package/Chips/Chip.module.css +5 -2
  25. package/ContextualMenuDecorator/ContextualMenuDecorator.d.ts +2 -2
  26. package/ContextualPopupDecorator/ContextualPopup.module.css +1 -1
  27. package/ContextualPopupDecorator/ContextualPopupDecorator.js +2 -4
  28. package/ContextualPopupDecorator/tests/ContextualPopupDecorator-specs.js +39 -2
  29. package/Dropdown/Dropdown.d.ts +2 -2
  30. package/Dropdown/Dropdown.module.css +7 -7
  31. package/FixedPopupPanels/FixedPopupPanels.d.ts +2 -2
  32. package/FlexiblePopupPanels/FlexiblePopupPanels.module.css +15 -3
  33. package/FlexiblePopupPanels/index.d.ts +2 -2
  34. package/FormCheckboxItem/FormCheckboxItem.d.ts +1 -1
  35. package/FormCheckboxItem/FormCheckboxItem.js +1 -0
  36. package/FormCheckboxItem/FormCheckboxItem.module.css +1 -1
  37. package/Heading/Heading.d.ts +2 -2
  38. package/Heading/Heading.module.css +16 -0
  39. package/Icon/Icon.d.ts +22 -1
  40. package/Icon/Icon.js +21 -0
  41. package/Icon/Icon.module.css +12 -0
  42. package/Icon/IconList.js +43 -1
  43. package/IconItem/IconItem.d.ts +2 -2
  44. package/IconItem/IconItem.module.css +27 -14
  45. package/Image/Image.d.ts +1 -1
  46. package/Image/Image.module.css +1 -1
  47. package/ImageItem/ImageItem.d.ts +2 -2
  48. package/ImageItem/ImageItem.js +3 -16
  49. package/ImageItem/ImageItem.module.css +122 -97
  50. package/ImageItem/tests/ImageItem-specs.js +6 -5
  51. package/Input/Input.module.css +33 -16
  52. package/Input/InputField.module.css +22 -4
  53. package/Input/index.d.ts +1 -1
  54. package/Input/tests/Input-specs.js +2 -2
  55. package/Input/tests/InputField-specs.js +1 -1
  56. package/Item/Item.d.ts +2 -2
  57. package/Item/Item.module.css +29 -16
  58. package/KeyGuide/KeyGuide.d.ts +2 -2
  59. package/KeyGuide/KeyGuide.module.css +10 -0
  60. package/MediaOverlay/MediaOverlay.d.ts +2 -2
  61. package/MediaOverlay/MediaOverlay.module.css +18 -9
  62. package/MediaPlayer/MediaControls.module.css +3 -0
  63. package/MediaPlayer/MediaSlider.module.css +1 -0
  64. package/MediaPlayer/Times.module.css +5 -1
  65. package/MediaPlayer/index.d.ts +2 -2
  66. package/PageViews/PageViews.module.css +6 -1
  67. package/Panels/Header.module.css +74 -56
  68. package/Panels/Panel.module.css +1 -1
  69. package/Panels/index.d.ts +1 -1
  70. package/Picker/Picker.d.ts +1 -1
  71. package/Popup/Popup.module.css +4 -1
  72. package/PopupTabLayout/PopupTabLayout.d.ts +6 -6
  73. package/PopupTabLayout/PopupTabLayout.module.css +24 -6
  74. package/ProgressBar/ProgressBar.d.ts +1 -1
  75. package/ProgressBar/ProgressBar.module.css +12 -12
  76. package/ProgressBar/ProgressBarTooltip.module.css +7 -7
  77. package/ProgressButton/ProgressButton.d.ts +2 -2
  78. package/QuickGuidePanels/QuickGuidePanels.module.css +1 -1
  79. package/RadioItem/RadioItem.d.ts +1 -1
  80. package/RadioItem/RadioItem.module.css +21 -18
  81. package/Scroller/EditableWrapper.js +2 -1
  82. package/Scroller/Scroller.d.ts +12 -0
  83. package/Scroller/Scroller.js +15 -0
  84. package/Scroller/Scroller.module.css +10 -0
  85. package/Scroller/tests/Scroller-specs.js +120 -2
  86. package/Scroller/useThemeScroller.js +25 -2
  87. package/Slider/Slider.d.ts +1 -1
  88. package/Slider/Slider.module.css +539 -303
  89. package/Spinner/Spinner.d.ts +1 -1
  90. package/Spinner/Spinner.module.css +2 -2
  91. package/Steps/Steps.d.ts +1 -1
  92. package/Steps/Steps.js +12 -6
  93. package/Steps/Steps.module.css +19 -2
  94. package/Switch/Switch.module.css +17 -6
  95. package/SwitchItem/SwitchItem.d.ts +1 -1
  96. package/TabLayout/RefocusDecorator.js +1 -1
  97. package/TabLayout/TabGroup.module.css +13 -7
  98. package/TabLayout/TabLayout.js +4 -0
  99. package/ThemeDecorator/ThemeDecorator.d.ts +1 -1
  100. package/ThemeDecorator/ThemeDecorator.module.css +22 -1
  101. package/TimePicker/TimePicker.module.css +3 -0
  102. package/TooltipDecorator/Tooltip.js +68 -7
  103. package/TooltipDecorator/Tooltip.module.css +44 -23
  104. package/TooltipDecorator/TooltipDecorator.d.ts +52 -0
  105. package/TooltipDecorator/TooltipDecorator.js +42 -0
  106. package/TooltipDecorator/TooltipLabel.js +67 -14
  107. package/TooltipDecorator/tests/TooltipDecorator-specs.js +46 -0
  108. package/TooltipDecorator/useTooltip.js +14 -2
  109. package/VideoPlayer/Feedback.module.css +3 -0
  110. package/VideoPlayer/FeedbackTooltip.module.css +7 -0
  111. package/VideoPlayer/MediaTitle.module.css +9 -1
  112. package/VirtualList/VirtualList.d.ts +24 -0
  113. package/VirtualList/VirtualList.js +30 -0
  114. package/VirtualList/tests/stickTo-specs.js +115 -0
  115. package/VirtualList/tests/useEvent-specs.js +39 -0
  116. package/VirtualList/useEvent.js +45 -10
  117. package/VirtualList/useThemeVirtualList.js +20 -2
  118. package/WizardPanels/WizardPanels.module.css +1 -1
  119. package/fonts/Limestone_Icons.ttf +0 -0
  120. package/internal/DateComponentPicker/DateComponentPicker.module.css +3 -3
  121. package/internal/DateTime/DateTime.module.css +3 -0
  122. package/internal/Picker/Picker.js +8 -10
  123. package/internal/Picker/Picker.module.css +92 -137
  124. package/package.json +14 -17
  125. package/styles/color-mixins.less +4 -60
  126. package/styles/colors-game.less +5 -5
  127. package/styles/colors.less +9 -10
  128. package/styles/mixins.less +0 -46
  129. package/styles/motion-mixins.less +16 -7
  130. package/styles/motions.less +2 -2
  131. package/styles/variables.less +186 -69
  132. package/useScroll/ScrollbarPlaceholder.js +8 -3
  133. package/useScroll/useScroll.js +3 -1
package/styles/variables.less CHANGED
@@ -69,7 +69,9 @@
69
69
  standard-title-line-height: 144px;
70
70
  standard-titles-gap: 18px;
71
71
  standard-subtitle-font-size: 54px;
72
+ standard-subtitle-font-size-large: 66px;
72
73
  standard-subtitle-line-height: 72px;
74
+ standard-subtitle-line-height-large: 84px;
73
75
 
74
76
  wizard-padding: 156px 132px 6px 132px;
75
77
  wizard-title-font-size: 108px;
@@ -98,7 +100,7 @@
98
100
  // Locale
99
101
  // ---------------------------------------
100
102
  // Cambodian(km), Sinhala(si), Thai(th), Vietnamse(vi)
101
- @locale-tallglyph-languages: km, si, th, vi;
103
+ @locale-tallglyph-languages: km, si, th, vi; // used by the enact-locale-tallglyph enact mixin
102
104
 
103
105
  // Spotlight
104
106
  // ---------------------------------------
@@ -115,71 +117,115 @@
115
117
  // Font Sizes
116
118
  // ---------------------------------------
117
119
  @lime-actionguide-label-font-size: var(--primitive-font-size-48);
120
+ @lime-actionguide-label-font-size-large: var(--primitive-font-size-60);
118
121
  @lime-actionguide-label-font-weight: var(--primitive-font-weight-regular);
119
122
  @lime-alert-overlay-font-size: var(--primitive-font-size-60);
123
+ @lime-alert-overlay-font-size-large: var(--primitive-font-size-72);
120
124
  @lime-alert-subtitle-font-size: @lime-heading-subtitle-font-size;
121
125
  @lime-alert-title-font-size: var(--primitive-font-size-108);
126
+ @lime-alert-overlay-large-title-font-size: var(--primitive-font-size-90);
122
127
  @lime-base-font-size: var(--primitive-font-size-60);
128
+ @lime-base-font-size-large: var(--primitive-font-size-72);
123
129
  @lime-body-font-size: @lime-base-font-size;
130
+ @lime-body-font-size-large: @lime-base-font-size-large;
124
131
  @lime-body-small-font-size: var(--primitive-font-size-54);
125
- @lime-button-font-size-large: var(--primitive-font-size-96);
132
+ @lime-body-small-font-size-large: var(--primitive-font-size-66);
133
+ @lime-button-font-size-large: var(--primitive-font-size-72);
126
134
  @lime-button-font-size: var(--primitive-font-size-60);
127
- @lime-button-small-font-size-large: var(--primitive-font-size-72);
135
+ @lime-button-small-font-size-large: var(--primitive-font-size-66);
128
136
  @lime-button-small-font-size: var(--primitive-font-size-54);
129
137
  @lime-card-caption-font-size: var(--primitive-font-size-60);
138
+ @lime-card-caption-font-size-large: var(--primitive-font-size-72);
139
+ @lime-card-duration-font-size: var(--primitive-font-size-48);
140
+ @lime-card-duration-font-size-large: var(--primitive-font-size-58);
130
141
  @lime-card-label-font-size: var(--primitive-font-size-48);
142
+ @lime-card-label-font-size-large: var(--primitive-font-size-58);
131
143
  @lime-card-split-caption-label-font-size: var(--primitive-font-size-60);
144
+ @lime-card-split-caption-label-font-size-large: var(--primitive-font-size-72);
132
145
  @lime-header-compact-title-font-size: #guide.header[compact-title-font-size];
133
146
  @lime-header-mini-title-font-size: #guide.header[mini-title-font-size];
134
147
  @lime-header-wizard-title-font-size: #guide.header[wizard-title-font-size];
135
148
  @lime-heading-large-font-size: var(--primitive-font-size-72);
149
+ @lime-heading-large-font-size-large: var(--primitive-font-size-86);
136
150
  @lime-heading-medium-font-size: var(--primitive-font-size-66);
151
+ @lime-heading-medium-font-size-large: var(--primitive-font-size-80);
137
152
  @lime-heading-small-font-size: var(--primitive-font-size-54);
153
+ @lime-heading-small-font-size-large: var(--primitive-font-size-66);
138
154
  @lime-heading-tiny-font-size: var(--primitive-font-size-48);
155
+ @lime-heading-tiny-font-size-large: var(--primitive-font-size-58);
139
156
  @lime-heading-subtitle-font-size: #guide.header[standard-subtitle-font-size];
157
+ @lime-heading-subtitle-font-size-large: #guide.header[standard-subtitle-font-size-large];
140
158
  @lime-heading-title-font-size: #guide.header[standard-title-font-size];
141
159
  @lime-iconitem-label-font-size: var(--primitive-font-size-42);
160
+ @lime-iconitem-label-font-size-large: var(--primitive-font-size-50);
142
161
  @lime-iconitem-title-font-size: var(--primitive-font-size-48);
162
+ @lime-iconitem-title-font-size-large: var(--primitive-font-size-58);
143
163
  @lime-imageitem-caption-font-size: var(--primitive-font-size-60);
164
+ @lime-imageitem-caption-font-size-large: var(--primitive-font-size-72);
144
165
  @lime-imageitem-label-font-size: var(--primitive-font-size-48);
166
+ @lime-imageitem-label-font-size-large: var(--primitive-font-size-58);
145
167
  @lime-input-font-size: var(--primitive-font-size-78);
168
+ @lime-input-font-size-large: var(--primitive-font-size-94);
146
169
  @lime-input-keypad-key-font-size: var(--primitive-font-size-90);
170
+ @lime-input-keypad-key-font-size-large: var(--primitive-font-size-108);
147
171
  @lime-input-fullscreen-title-font-size: var(--primitive-font-size-108);
148
172
  @lime-input-fullscreen-numbercell-font-size: 126px;
149
173
  @lime-input-fullscreen-numbercell-password-font-size: var(--primitive-font-size-48);
174
+ @lime-input-fullscreen-numbercell-password-font-size-large: var(--primitive-font-size-56);
150
175
  @lime-input-fullscreen-numberfield-font-size: @lime-input-font-size;
176
+ @lime-input-fullscreen-numberfield-font-size-large: @lime-input-font-size-large;
151
177
  @lime-input-overlay-title-font-size: var(--primitive-font-size-90);
152
178
  @lime-input-overlay-numbercell-font-size: var(--primitive-font-size-108);
153
179
  @lime-input-overlay-numbercell-password-font-size: var(--primitive-font-size-40);
180
+ @lime-input-overlay-numbercell-password-font-size-large: var(--primitive-font-size-48);
154
181
  @lime-input-overlay-numberfield-font-size: @lime-input-font-size;
182
+ @lime-input-overlay-numberfield-font-size-large: @lime-input-font-size-large;
155
183
  @lime-input-invalid-tooltip-font-size: @lime-inputfield-invalid-tooltip-font-size;
156
184
  @lime-inputfield-invalid-tooltip-font-size: var(--primitive-font-size-48);
185
+ @lime-input-invalid-tooltip-font-size-large: @lime-inputfield-invalid-tooltip-font-size-large;
186
+ @lime-inputfield-invalid-tooltip-font-size-large: var(--primitive-font-size-58);
157
187
  @lime-inputfield-small-font-size: var(--primitive-font-size-60);
188
+ @lime-inputfield-small-font-size-large: var(--primitive-font-size-72);
158
189
  @lime-item-font-size: var(--primitive-font-size-60);
159
190
  @lime-item-font-size-large: var(--primitive-font-size-72);
160
191
  @lime-item-label-font-size: var(--primitive-font-size-48);
161
- @lime-item-label-font-size-large: var(--primitive-font-size-54);
192
+ @lime-item-label-font-size-large: var(--primitive-font-size-58);
162
193
  @lime-item-small-font-size: var(--primitive-font-size-60);
163
194
  @lime-item-small-font-size-large: var(--primitive-font-size-72);
164
195
  @lime-item-small-label-font-size: var(--primitive-font-size-48);
165
196
  @lime-keyguide-font-size: var(--primitive-font-size-60);
197
+ @lime-keyguide-font-size-large: var(--primitive-font-size-72);
166
198
  @lime-mediaoverlay-caption-font-size: var(--primitive-font-size-60);
199
+ @lime-mediaoverlay-caption-font-size-large: var(--primitive-font-size-72);
167
200
  @lime-mediaoverlay-text-font-size: var(--primitive-font-size-48);
201
+ @lime-mediaoverlay-text-font-size-large: var(--primitive-font-size-60);
168
202
  @lime-mediaoverlay-subtitle-font-size: var(--primitive-font-size-48);
203
+ @lime-mediaoverlay-subtitle-font-size-large: var(--primitive-font-size-58);
169
204
  @lime-mediaplayer-times-text-size: var(--primitive-font-size-48);
205
+ @lime-mediaplayer-times-text-size-large: var(--primitive-font-size-58);
206
+ @lime-pageviews-number-steps-number-font-size: @lime-base-font-size;
207
+ @lime-pageviews-number-steps-number-font-size-large: @lime-base-font-size-large;
170
208
  @lime-picker-font-size: var(--primitive-font-size-54);
209
+ @lime-picker-font-size-large: var(--primitive-font-size-66);
171
210
  @lime-picker-joined-font-size: var(--primitive-font-size-66);
211
+ @lime-picker-joined-font-size-large: var(--primitive-font-size-80);
172
212
  @lime-radioitem-icon-font-size: var(--primitive-font-size-48);
213
+ @lime-radioitem-icon-font-size-large: var(--primitive-font-size-56);
173
214
  @lime-steps-step-number-font-size: var(--primitive-font-size-48);
215
+ @lime-steps-step-number-font-size-large: var(--primitive-font-size-58);
174
216
  @lime-switch-icon-font-size: var(--primitive-font-size-84);
175
- @lime-switch-icon-font-size-large: 138px;
176
217
  @lime-tablayout-tab-small-font-size: var(--primitive-font-size-48);
218
+ @lime-tablayout-tab-small-font-size-large: var(--primitive-font-size-58);
177
219
  @lime-tablayout-tab-font-size: var(--primitive-font-size-60);
220
+ @lime-tablayout-tab-font-size-large: var(--primitive-font-size-72);
178
221
  @lime-tooltip-label-font-size: var(--primitive-font-size-54);
222
+ @lime-tooltip-label-font-size-large: var(--primitive-font-size-66);
179
223
  @lime-tallglyph-alert-title-font-size: @lime-alert-title-font-size;
180
224
  @lime-non-latin-body-font-size: var(--primitive-font-size-54);
181
225
  @lime-non-latin-body-small-font-size: var(--primitive-font-size-48);
226
+ @lime-non-latin-body-small-font-size-large: var(--primitive-font-size-60);
182
227
  @lime-tallglyph-body-small-font-size: var(--primitive-font-size-48);
228
+ @lime-tallglyph-body-small-font-size-large: var(--primitive-font-size-60);
183
229
  @lime-non-latin-button-large-font-size: var(--primitive-font-size-54);
184
230
  @lime-non-latin-button-small-font-size: var(--primitive-font-size-48);
185
231
  @lime-non-latin-header-compact-title-font-size: @lime-header-compact-title-font-size;
@@ -201,17 +247,18 @@
201
247
  @lime-non-latin-font-family: "Limestone";
202
248
  @lime-non-latin-font-family-light: "Limestone"; // Formerly weight: Light
203
249
  @lime-non-latin-font-family-bold: "Limestone"; // Formerly weight: Bold
250
+ @lime-title-font-family: "Limestone Title", "Limestone"; // fallback to Limestone default font-family
204
251
  @lime-non-latin-font-weight: var(--primitive-font-weight-regular);
205
252
  @lime-non-latin-font-weight-light: var(--primitive-font-weight-light);
206
253
  @lime-non-latin-font-weight-bold: var(--primitive-font-weight-bold);
207
254
  @lime-spottable-font-weight: var(--primitive-font-weight-semibold);
208
- @lime-common-line-height: 1.4em;
255
+ @lime-common-line-height: 1.34em;
209
256
  @lime-tallglyph-line-height: 1.5em;
210
257
 
211
258
  // Alert
212
259
  @lime-alert-font-family: @lime-font-family;
213
260
  @lime-alert-font-weight: var(--primitive-font-weight-semibold);
214
- @lime-alert-line-height: 84px;
261
+ @lime-alert-line-height: @lime-common-line-height;
215
262
 
216
263
  // Body
217
264
  @lime-body-font-family: @lime-font-family;
@@ -239,6 +286,7 @@
239
286
 
240
287
  // Card
241
288
  @lime-card-caption-font-weight: var(--primitive-font-weight-semibold);
289
+ @lime-card-duration-font-weight: var(--primitive-font-weight-semibold);
242
290
  @lime-card-label-font-weight: var(--primitive-font-weight-regular);
243
291
  @lime-card-split-caption-label-font-weight: var(--primitive-font-weight-semibold);
244
292
 
@@ -251,6 +299,7 @@
251
299
  @lime-heading-subtitle-font-family: @lime-font-family;
252
300
  @lime-heading-subtitle-font-weight: var(--primitive-font-weight-regular);
253
301
  @lime-heading-subtitle-line-height: @lime-heading-title-line-height;
302
+ @lime-heading-subtitle-line-height-large: #guide.header[standard-subtitle-line-height-large];
254
303
  @lime-heading-large-font-family: @lime-font-family;
255
304
  @lime-heading-large-font-weight: @lime-spottable-font-weight;
256
305
  @lime-heading-medium-font-family: @lime-heading-large-font-family;
@@ -260,7 +309,6 @@
260
309
  @lime-heading-tiny-font-family: @lime-heading-large-font-family;
261
310
  @lime-heading-tiny-font-weight: @lime-heading-large-font-weight;
262
311
  @lime-heading-letter-spacing: 0;
263
- @lime-non-latin-heading-font-family: @lime-non-latin-font-family-bold;
264
312
  @lime-tallglyph-heading-line-height: @lime-tallglyph-heading-title-line-height;
265
313
  @lime-tallglyph-heading-subtitle-line-height: @lime-tallglyph-heading-title-line-height;
266
314
  @lime-tallglyph-heading-title-line-height: 1.5em;
@@ -293,6 +341,7 @@
293
341
  @lime-item-line-height: @lime-common-line-height;
294
342
  @lime-item-line-height-large: @lime-item-line-height;
295
343
  @lime-item-label-line-height: 1.25em;
344
+ @lime-item-label-line-height-large: 1.2em;
296
345
  @lime-item-small-font-weight: @lime-item-font-weight;
297
346
  @lime-item-small-label-font-weight: @lime-item-label-font-weight;
298
347
  @lime-item-small-line-height: @lime-common-line-height;
@@ -303,7 +352,6 @@
303
352
  @lime-tallglyph-item-label-line-height: @lime-tallglyph-item-line-height;
304
353
  @lime-tallglyph-item-small-line-height: @lime-tallglyph-line-height;
305
354
  @lime-tallglyph-item-small-line-height-large: @lime-tallglyph-item-small-line-height;
306
- @lime-tallglyph-item-small-label-line-height: @lime-tallglyph-item-small-line-height;
307
355
 
308
356
  // Picker
309
357
  @lime-tallglyph-picker-line-height: @lime-tallglyph-body-line-height;
@@ -317,30 +365,36 @@
317
365
  // ---------------------------------------
318
366
  @lime-actionguide-max-width: 1500px;
319
367
  @lime-actionguide-label-height: 60px;
368
+ @lime-actionguide-label-height-large: 70px;
320
369
  @lime-actionguide-icon-height: 84px;
321
370
  @lime-actionguide-icon-margin: 0 0 ~"calc("var(--primitive-spacing-12) ~"* -1)" 0;
322
371
  @lime-actionguide-padding: var(--primitive-spacing-12) 0 var(--primitive-spacing-36) 0;
323
372
 
324
373
  // Alert
325
374
  // ---------------------------------------
326
- @lime-alert-buttons-margin-top: var(--primitive-spacing-96);
375
+ @lime-alert-buttons-margin-top: var(--primitive-spacing-120);
327
376
  @lime-alert-fullscreen-content-margin: var(--primitive-spacing-36) 0 0 0;
328
377
  @lime-alert-fullscreen-image-spacing: var(--primitive-spacing-60);
329
378
  @lime-alert-fullscreen-max-width: 2400px;
330
379
  @lime-portrait-alert-fullscreen-max-width: 1896px;
331
- @lime-alert-overlay-buttons-margin-top: var(--primitive-spacing-36);
380
+ @lime-alert-overlay-buttons-margin-top: var(--primitive-spacing-72);
332
381
  @lime-alert-overlay-max-height: 2028px;
333
382
  @lime-alert-overlay-image-margin-bottom: var(--primitive-spacing-36);
334
- @lime-alert-overlay-padding: var(--primitive-spacing-84) 0;
335
- @lime-alert-overlay-body-padding: 0 var(--primitive-spacing-84);
336
- @lime-alert-overlay-image-padding: 0 var(--primitive-spacing-84);
383
+ @lime-alert-overlay-padding: var(--primitive-spacing-90) 0;
384
+ @lime-alert-overlay-body-padding: 0 var(--primitive-spacing-90);
385
+ @lime-alert-overlay-image-padding: 0 var(--primitive-spacing-90);
337
386
  @lime-alert-overlay-width: 1128px;
387
+ @lime-alert-overlay-medium-width: 1656px;
388
+ @lime-alert-overlay-large-width: 2184px;
389
+ @lime-alert-overlay-large-title-margin-bottom: var(--primitive-spacing-36);
338
390
  @lime-alert-overlay-max-width: calc(100vw - 2 * @lime-popup-position-corner-margin);
339
391
 
340
392
  // AlertImage
341
393
  // ---------------------------------------
342
394
  @lime-alert-image-thumbnail-width: 960px;
343
395
  @lime-alert-image-thumbnail-height: 540px;
396
+ @lime-alert-image-thumbnail-large-width: 2004px;
397
+ @lime-alert-image-thumbnail-large-height: 855px;
344
398
  @lime-alert-image-icon-large-size: 252px;
345
399
  @lime-alert-image-icon-small-size: 180px;
346
400
 
@@ -359,8 +413,8 @@
359
413
  @lime-button-margin: var(--primitive-spacing-36);
360
414
  @lime-button-focusexpand-margin: 9px .extract(@lime-button-margin, right)[]; // 9px provides enough space for the expanded focus state
361
415
  @lime-button-h-padding: var(--primitive-spacing-60);
362
- @lime-button-height-large: 192px;
363
416
  @lime-button-height: 132px;
417
+ @lime-button-height-large: @lime-button-height;
364
418
  @lime-button-icon-h-margin: var(--primitive-spacing-24);
365
419
  @lime-button-icon-margin-end: @lime-button-icon-h-margin;
366
420
  @lime-button-icon-margin-start: 0;
@@ -380,57 +434,79 @@
380
434
  @lime-button-small-margin: var(--primitive-spacing-24);
381
435
  @lime-button-small-focusexpand-margin: @lime-button-focusexpand-margin;
382
436
  @lime-button-small-h-padding: var(--primitive-spacing-60);
383
- @lime-button-small-height-large: 144px;
384
437
  @lime-button-small-height: 108px;
438
+ @lime-button-small-height-large: @lime-button-small-height;
385
439
  @lime-button-small-max-width: 1020px;
386
440
  @lime-button-small-min-width: 264px;
387
441
  @lime-button-small-min-width-default: 720px;
388
442
  @lime-button-colordot-bottom: var(--primitive-spacing-12);
389
443
  @lime-button-colordot-border-radius: var(--semantic-radius-full);
390
444
  @lime-button-colordot-width: 60px;
445
+ @lime-button-colordot-width-font-size-large: 72px;
391
446
  @lime-button-colordot-h-margin: var(--primitive-spacing-84);
392
- @lime-button-colordot-height: 12px;
447
+ @lime-button-colordot-height: 24px;
448
+ @lime-button-colordot-height-font-size-large: 30px;
393
449
  @lime-button-colordot-h-padding: var(--primitive-spacing-24);
394
450
  @lime-button-colordot-padding-start: var(--primitive-spacing-36);
395
451
  @lime-button-small-colordot-bottom: var(--primitive-spacing-12);
396
452
  @lime-button-small-colordot-width: 51px;
453
+ @lime-button-small-colordot-width-font-size-large: 60px;
397
454
  @lime-button-small-colordot-h-margin: var(--primitive-spacing-72);
398
- @lime-button-small-colordot-height: 9px;
455
+ @lime-button-small-colordot-height: 21px;
456
+ @lime-button-small-colordot-height-font-size-large: 24px;
399
457
  @lime-button-small-colordot-padding-start: var(--primitive-spacing-30);
400
- @lime-button-icon-only-colordot-width: 66px;
401
- @lime-button-icon-only-colordot-height: 9px;
458
+ @lime-button-icon-only-colordot-width: 30px;
459
+ @lime-button-icon-only-colordot-height: 12px;
402
460
  @lime-button-collapse-duration: 300ms;
403
461
  @lime-button-collapsable-icon-margin: 0 var(--primitive-spacing-24);
404
462
 
405
463
  // Card
406
464
  // ---------------------------------------
465
+ @lime-card-caption-image-icon-size: 96px;
466
+ @lime-card-caption-image-icon-margin: var(--primitive-spacing-24);
467
+ @lime-card-caption-image-icon-spacing: var(--primitive-spacing-24);
407
468
  @lime-card-margin: @lime-item-margin;
408
469
  @lime-card-border-radius: var(--semantic-radius-container);
409
470
  @lime-card-image-border-width: 6px;
410
471
  @lime-card-resting-border-width: 3px;
411
- @lime-card-selection-check-icon-size: 90px;
412
- @lime-card-selection-icon-size: 120px;
472
+ @lime-card-selection-check-icon-size: 48px;
473
+ @lime-card-selection-check-icon-size-large: 58px;
474
+ @lime-card-selection-icon-size: 144px;
475
+ @lime-card-selection-icon-size-large: (@lime-card-selection-icon-size * 1.2);
413
476
  @lime-card-selection-icon-border-radius: 50%;
414
477
  @lime-card-selection-icon-margin: 0;
415
- @lime-card-selection-check-icon-line-height: 90px;
416
- @lime-card-selection-icon-line-height: 144px;
478
+ @lime-card-selection-check-icon-container-large: 72px;
479
+ @lime-card-selection-check-icon-line-height: 60px;
480
+ @lime-card-selection-check-icon-line-height-large: 70px;
481
+ @lime-card-selection-icon-line-height: 180px;
417
482
  @lime-card-badge-size: 108px;
418
483
  @lime-card-badge-margin: 0;
419
484
  @lime-card-badge-top: var(--primitive-spacing-24);
420
485
  @lime-card-badge-left: var(--primitive-spacing-24);
421
486
  @lime-card-badge-right: var(--primitive-spacing-24);
422
487
  @lime-card-caption-line-height: 84px;
488
+ @lime-card-caption-line-height-large: 100px;
489
+ @lime-card-duration-border-radius: var(--primitive-radius-12);
490
+ @lime-card-duration-line-height: 60px;
491
+ @lime-card-duration-line-height-large: 70px;
492
+ @lime-card-duration-padding: var(--primitive-spacing-6) var(--primitive-spacing-12);
493
+ @lime-card-label-container-spacing: var(--primitive-spacing-12);
494
+ @lime-card-label-icon-margin: var(--primitive-spacing-6);
423
495
  @lime-card-label-line-height: 60px;
424
- @lime-card-split-caption-label-line-height: 84px;
496
+ @lime-card-label-line-height-large: 70px;
425
497
  @lime-card-split-caption-label-padding: 0 var(--primitive-spacing-48);
426
498
  @lime-card-split-caption-lower-label-padding: var(--primitive-spacing-18);
427
499
  @lime-card-vertical-captions-padding: var(--primitive-spacing-36) 0;
500
+ @lime-card-vertical-captions-overflow-width: 1140px;
428
501
  @lime-card-vertical-captions-gap: var(--primitive-spacing-48);
502
+ @lime-card-vertical-captions-centered-title-gap: var(--primitive-spacing-24);
503
+ @lime-card-vertical-duration-spacing: var(--primitive-spacing-24);
504
+ @lime-card-vertical-progress-spacing: var(--primitive-spacing-48);
429
505
  @lime-card-vertical-image-icon-size: 180px;
430
506
  @lime-card-vertical-image-icon-margin: 0;
431
507
  @lime-card-vertical-caption-overlay-captions-padding: var(--primitive-spacing-36) var(--primitive-spacing-48);
432
508
  @lime-card-vertical-has-container-captions-padding: var(--primitive-spacing-36) var(--primitive-spacing-48);
433
- @lime-card-horizontal-width: 1320px;
509
+ @lime-card-horizontal-width: 1192px;
434
510
  @lime-card-horizontal-height: 336px;
435
511
  @lime-card-horizontal-captions-padding: var(--primitive-spacing-48);
436
512
 
@@ -444,9 +520,8 @@
444
520
  // CheckboxItem
445
521
  // ---------------------------------------
446
522
  @lime-checkboxitem-padding: var(--primitive-spacing-36) var(--primitive-spacing-48) var(--primitive-spacing-36) var(--primitive-spacing-60);
447
- @lime-checkboxitem-padding-rtl: var(--primitive-spacing-36) var(--primitive-spacing-60) var(--primitive-spacing-36) var(--primitive-spacing-48);
448
523
  @lime-checkboxitem-withlabel-padding: var(--primitive-spacing-48) var(--primitive-spacing-48) var(--primitive-spacing-48) var(--primitive-spacing-60);
449
- @lime-checkboxitem-withlabel-padding-rtl: var(--primitive-spacing-48) var(--primitive-spacing-60) var(--primitive-spacing-48) var(--primitive-spacing-48);
524
+ @lime-checkboxitem-form-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.
450
525
 
451
526
  // Chip
452
527
  // ---------------------------------------
@@ -478,7 +553,9 @@
478
553
  // Date and Time Picker
479
554
  @lime-datecomponentpicker-margin: 0 var(--primitive-spacing-24);
480
555
  @lime-datetime-fontsize: var(--primitive-font-size-66);
556
+ @lime-datetime-fontsize-large: var(--primitive-font-size-80);
481
557
  @lime-datetime-heading-margin: 0 0 var(--primitive-spacing-132);
558
+ @lime-timepicker-colon-fontsize-large: var(--primitive-font-size-72);
482
559
  @lime-timepicker-colon-margin: 0 var(--primitive-spacing-6);
483
560
 
484
561
  // Dropdown
@@ -601,13 +678,8 @@
601
678
  @lime-header-compact-titles-row-padding: 0 0 #guide.header[compact-subtitle-height];
602
679
  @lime-header-compact-subtitle-padding: 0;
603
680
  @lime-header-compact-subtitle-margin-top: (#guide.header[compact-subtitle-height] - #guide.header[compact-subtitle-line-height]);
604
- @lime-header-compact-slotbefore-margin-end: var(--primitive-spacing-24);
605
- @lime-header-compact-slotafter-margin-start: var(--primitive-spacing-30);
606
- @lime-header-mini-margin:
607
- var(--primitive-spacing-6)
608
- @lime-component-spacing
609
- .extract(#guide.header[mini-padding], bottom)[]
610
- @lime-component-spacing; // 6px top to account for a focused button, so it doesn't clip.
681
+ @lime-header-compact-slotbefore-margin-end: var(--primitive-spacing-12);
682
+ @lime-header-compact-slotafter-margin-start: var(--primitive-spacing-12);
611
683
  @lime-header-mini-margin: #guide.header[mini-margin];
612
684
  @lime-header-mini-padding:
613
685
  (
@@ -628,6 +700,8 @@
628
700
  )[@result]
629
701
  )
630
702
  .extract(#guide.header[mini-padding], left)[];
703
+ @lime-header-mini-slotbefore-margin-end: var(--primitive-spacing-12);
704
+ @lime-header-mini-slotafter-margin-start: var(--primitive-spacing-12);
631
705
  @lime-header-wizard-nosubtitle-padding-bottom: ~"calc(@{lime-header-subtitle-height} + var(--primitive-spacing-6))";
632
706
  @lime-header-wizard-margin: 0;
633
707
  @lime-header-wizard-padding:
@@ -642,9 +716,9 @@
642
716
  .extract(#guide.header[wizard-padding], right)[]
643
717
  .extract(#guide.header[wizard-padding], bottom)[]
644
718
  .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.
719
+ @lime-header-wizard-title-line-height: #guide.header[wizard-title-line-height];
645
720
  @lime-header-wizard-title-padding: 0;
646
721
  @lime-header-wizard-subtitle-padding: 0;
647
- @lime-header-back-container-width: ~"calc(@{lime-button-small-height} + @{lime-button-icon-small-h-margin})";
648
722
 
649
723
  // Heading
650
724
  // ---------------------------------------
@@ -665,31 +739,41 @@
665
739
  // Icon
666
740
  // ---------------------------------------
667
741
  @lime-icon-large-size: 84px;
742
+ @lime-icon-large-size-large: (@lime-icon-large-size * 1.2);
668
743
  @lime-icon-medium-size: 78px;
744
+ @lime-icon-medium-size-large: (@lime-icon-medium-size * 1.2);
669
745
  @lime-icon-small-size: 72px;
746
+ @lime-icon-small-size-large: (@lime-icon-small-size * 1.2);
670
747
  @lime-icon-tiny-size: 60px;
748
+ @lime-icon-tiny-size-large: (@lime-icon-tiny-size * 1.2);
671
749
  @lime-icon-margin: var(--primitive-spacing-24);
672
- @lime-icon-large-size-large: (@lime-icon-large-size * 1.2);
673
- @lime-icon-small-size-large: (@lime-icon-small-size * 1.2);
674
750
 
675
751
  // IconItem
676
752
  // ---------------------------------------
677
753
  @lime-iconitem-height: 256px;
678
754
  @lime-iconitem-width: 334px;
679
755
  @lime-iconitem-title-height: ~"calc("@lime-iconitem-height ~"+ "@lime-iconitem-title-line-height ~"+ 24px)";
756
+ @lime-iconitem-title-height-large: ~"calc("@lime-iconitem-height ~"+ "@lime-iconitem-title-line-height-large ~"+ 24px)";
680
757
  @lime-iconitem-border-radius: var(--semantic-radius-container);
681
758
  @lime-iconitem-border-style: solid;
682
759
  @lime-iconitem-border-width: 4px;
683
760
  @lime-iconitem-icon-margin: 0;
684
761
  @lime-iconitem-icon-height: 120px;
762
+ @lime-iconitem-icon-height-large: 146px;
685
763
  @lime-iconitem-icon-width: @lime-iconitem-icon-height;
764
+ @lime-iconitem-icon-width-large: @lime-iconitem-icon-height-large;
686
765
  @lime-iconitem-image-height: 230px;
687
766
  @lime-iconitem-image-width: @lime-iconitem-image-height;
688
767
  @lime-iconitem-label-image-height: ~"calc("@lime-iconitem-height ~"- "@lime-iconitem-label-line-height ~"- 24px)";
689
768
  @lime-iconitem-label-line-height: 54px;
769
+ @lime-iconitem-label-line-height-large: 64px;
690
770
  @lime-iconitem-label-padding: 0 var(--primitive-spacing-12);
691
771
  @lime-iconitem-title-line-height: 60px;
772
+ @lime-iconitem-title-line-height-large: 70px;
692
773
  @lime-iconitem-title-margin: var(--primitive-spacing-24) 0 0 0;
774
+ @lime-iconitem-focus-transform: scale(1.2);
775
+ @lime-iconitem-pressed-transform: scale(1.1);
776
+ @lime-iconitem-release-transform: @lime-iconitem-focus-transform;
693
777
 
694
778
  // ImageItem
695
779
  // ---------------------------------------
@@ -697,18 +781,20 @@
697
781
  @lime-imageitem-border-radius: var(--semantic-radius-button);
698
782
  @lime-imageitem-image-border-width: 6px;
699
783
  @lime-imageitem-caption-line-height: 84px;
784
+ @lime-imageitem-caption-line-height-large: 100px;
700
785
  @lime-imageitem-label-line-height: 60px;
786
+ @lime-imageitem-label-line-height-large: 70px;
701
787
  @lime-imageitem-placeholder-caption-height: 102px;
702
788
  @lime-imageitem-placeholder-label-height: 66px;
703
789
  @lime-imageitem-horizontal-padding: var(--primitive-spacing-30);
704
790
  @lime-imageitem-horizontal-image-width: 180px;
705
791
  @lime-imageitem-horizontal-image-height: @lime-imageitem-horizontal-image-width;
706
792
  @lime-imageitem-horizontal-image-margin: var(--primitive-spacing-48);
707
- @lime-imageitem-horizontal-selection-icon-margin-left: var(--primitive-spacing-12);
708
- @lime-imageitem-horizontal-selection-icon-margin-right: var(--primitive-spacing-48);
709
793
  @lime-imageitem-horizontal-wideimage-padding: var(--primitive-spacing-48);
710
794
  @lime-imageitem-horizontal-wideimage-image-width: 426px;
711
795
  @lime-imageitem-horizontal-wideimage-image-height: 240px;
796
+ @lime-imageitem-horizontal-selection-icon-size: 60px;
797
+ @lime-imageitem-horizontal-selection-icon-size-large: (@lime-imageitem-horizontal-selection-icon-size * 1.2);
712
798
  @lime-imageitem-vertical-padding: var(--primitive-spacing-24) var(--primitive-spacing-24) var(--primitive-spacing-30);
713
799
  @lime-imageitem-vertical-full-image-padding: var(--primitive-spacing-60); // 24px(for expanding) + 36px(for showing shadow)
714
800
  @lime-imageitem-vertical-full-image-border-width: 2px;
@@ -718,7 +804,9 @@
718
804
  @lime-imageitem-vertical-focus-image-transform: scale(1.1);
719
805
  @lime-imageitem-vertical-image-icon-margin: 0 var(--primitive-spacing-24) 0 0;
720
806
  @lime-imageitem-vertical-image-icon-size: 132px;
807
+ @lime-imageitem-vertical-image-icon-size-large: (@lime-imageitem-vertical-image-icon-size * 1.2);
721
808
  @lime-imageitem-vertical-selection-icon-size: 120px;
809
+ @lime-imageitem-vertical-selection-icon-size-large: (@lime-imageitem-vertical-selection-icon-size * 1.2);
722
810
 
723
811
  // Input
724
812
  // ---------------------------------------
@@ -772,7 +860,6 @@
772
860
  @lime-input-overlay-keypad-gap: var(--primitive-spacing-60);
773
861
  @lime-input-overlay-keypad-margin: var(--primitive-spacing-132) 198px var(--primitive-spacing-60) 198px;
774
862
  @lime-input-overlay-keypad-width: 624px;
775
- @lime-input-overlay-keypad-width-large: 120px + (@lime-button-height-large * 3);
776
863
  @lime-input-overlay-buttonarea-margin: 0;
777
864
  @lime-input-overlay-submitbutton-margin: var(--primitive-spacing-60) auto 0 auto;
778
865
  @lime-input-overlay-invalid-tooltip-width: 738px;
@@ -781,6 +868,7 @@
781
868
  @lime-input-overlay-title-margin: 0 var(--primitive-spacing-144) 0 var(--primitive-spacing-144);
782
869
  @lime-input-invalid-tooltip-margin-top: var(--primitive-spacing-24);
783
870
  @lime-input-invalid-tooltip-line-height: 60px;
871
+ @lime-input-invalid-tooltip-line-height-large: 70px;
784
872
 
785
873
  // InputField
786
874
  // ---------------------------------------
@@ -792,11 +880,14 @@
792
880
  @lime-inputfield-text-indent: 0.2em;
793
881
  @lime-inputfield-border-radius: var(--semantic-radius-button);
794
882
  @lime-inputfield-invalid-tooltip-margin-top: var(--primitive-spacing-30);
883
+ @lime-inputfield-invalid-tooltip-line-height: @lime-input-invalid-tooltip-line-height;
884
+ @lime-inputfield-invalid-tooltip-line-height-large: @lime-input-invalid-tooltip-line-height-large;
795
885
  @lime-inputfield-height: 168px;
796
886
  @lime-inputfield-width: 1560px;
797
887
  @lime-inputfield-withoneicon-width: 1386px;
798
888
  @lime-inputfield-withtwoicons-width: 1272px;
799
889
  @lime-inputfield-small-height: 132px;
890
+ @lime-inputfield-small-height-large: 156px;
800
891
  @lime-inputfield-highlight-height: 100%;
801
892
  @lime-inputfield-small-width: 1200px;
802
893
  @lime-inputfield-small-withoneicon-width: 990px;
@@ -805,12 +896,11 @@
805
896
  // Item
806
897
  // ---------------------------------------
807
898
  @lime-item-height: 156px;
808
- @lime-item-height-large: @lime-item-height;
809
899
  @lime-item-shadow-height: @lime-spotlight-focus-shadow-height;
810
900
  @lime-item-withlabel-height: 240px;
811
901
  @lime-item-withlabel-padding: var(--primitive-spacing-48) var(--primitive-spacing-48);
812
902
  @lime-item-inline-max-width: 480px;
813
- @lime-item-border-radius: var(--semantic-radius-container);
903
+ @lime-item-border-radius: var(--semantic-radius-button);
814
904
  @lime-item-slotafter-spacing: var(--primitive-spacing-48);
815
905
  @lime-item-slotbefore-spacing: var(--primitive-spacing-48);
816
906
  @lime-item-margin: 0 @lime-component-spacing @lime-component-spacing-bottom @lime-component-spacing;
@@ -822,8 +912,10 @@
822
912
  // Keyguide
823
913
  // ---------------------------------------
824
914
  @lime-keyguide-colordot-height: 12px;
915
+ @lime-keyguide-colordot-height-large: calc(@lime-keyguide-colordot-height * 1.2);
825
916
  @lime-keyguide-colordot-margin: 0 ((@lime-icon-large-size - @lime-keyguide-colordot-width) / 2); // Keep this centered by adapting its margins
826
917
  @lime-keyguide-colordot-width: 60px;
918
+ @lime-keyguide-colordot-width-large: calc(@lime-keyguide-colordot-width * 1.2);
827
919
  @lime-keyguide-colordot-border-radius: var(--semantic-radius-full);
828
920
  @lime-keyguide-font-weight: var(--primitive-font-weight-regular);
829
921
  @lime-keyguide-icon-border-radius: var(--semantic-radius-container);
@@ -850,7 +942,8 @@
850
942
  @lime-mediaoverlay-caption-margin-bottom: var(--primitive-spacing-36);
851
943
  @lime-mediaoverlay-caption-font-weight: var(--primitive-font-weight-semibold);
852
944
  @lime-mediaoverlay-font-weight: var(--primitive-font-weight-regular);
853
- @lime-mediaoverlay-line-height: 1.3em;
945
+ @lime-mediaoverlay-line-height: 60px;
946
+ @lime-mediaoverlay-line-height-large: 70px;
854
947
  @lime-mediaoverlay-caption-line-height: 1.4em;
855
948
  @lime-mediaoverlay-padding: var(--primitive-spacing-24);
856
949
  @lime-mediaoverlay-progressbar-margin: var(--primitive-spacing-24);
@@ -861,26 +954,25 @@
861
954
 
862
955
  // MediaPlayer
863
956
  // ---------------------------------------
864
- @lime-mediaplayer-button-client-padding: 0 var(--primitive-spacing-18);
865
957
  @lime-mediaplayer-button-border-radius: 96px;
866
958
  @lime-mediaplayer-button-height: 180px;
867
959
  @lime-mediaplayer-button-icon-size: 108px;
960
+ @lime-mediaplayer-button-icon-size-large: 130px;
868
961
  @lime-mediaplayer-button-padding: var(--primitive-spacing-36);
869
962
  @lime-mediaplayer-controls-actionguide-height: 168px;
870
963
  @lime-mediaplayer-controls-actionguide-padding-bottom: 0;
871
964
  @lime-mediaplayer-controls-actionguide-padding-top: var(--primitive-spacing-72);
872
965
  @lime-mediaplayer-controls-actionguide-time: 0.2s; // Length of the animation
873
- @lime-mediaplayer-controls-button-margin-start: var(--primitive-spacing-90);
874
966
  @lime-mediaplayer-controls-gap: var(--primitive-spacing-120);
875
967
  @lime-mediaplayer-controls-height: 180px;
876
968
  @lime-mediaplayer-controls-margin-top: var(--primitive-spacing-36);
877
969
  @lime-mediaplayer-controls-moreComponents-gap: 204px;
878
970
  @lime-mediaplayer-controls-moreComponents-margin-top: var(--primitive-spacing-60);
879
- @lime-mediaplayer-controls-moreComponents-time: 0.3s; // Length of the animation
880
971
  @lime-mediaplayer-slider-height: 12px;
881
972
  @lime-mediaplayer-slider-knob-size: 36px;
882
973
  @lime-mediaplayer-slider-tap-area: 60px;
883
974
  @lime-mediaplayer-times-line-height: 60px;
975
+ @lime-mediaplayer-times-line-height-large: 70px;
884
976
  @lime-mediaplayer-times-min-width: 192px;
885
977
 
886
978
  // PageViews
@@ -918,6 +1010,7 @@
918
1010
  @lime-picker-item-padding: 0 @lime-spotlight-outset;
919
1011
  @lime-picker-focus-duration: @lime-spotlight-focus-animation-duration;
920
1012
  @lime-picker-value-height: 72px;
1013
+ @lime-picker-value-height-large: 84px;
921
1014
  @lime-picker-vertical-height: 362px;
922
1015
  @lime-picker-vertical-large-value-width: 696px;
923
1016
  @lime-picker-joined-horizontal-border-radius: var(--semantic-radius-full);
@@ -927,20 +1020,16 @@
927
1020
  @lime-picker-joined-horizontal-value-margin: 0 0 var(--primitive-spacing-48) 0;
928
1021
  @lime-picker-joined-vertical-border-radius: var(--semantic-radius-button);
929
1022
  @lime-picker-joined-value-height: 90px;
1023
+ @lime-picker-joined-value-height-large: 110px;
930
1024
  @lime-picker-small-value-width: (@lime-icon-large-size + (@lime-spotlight-outset * 3));
931
1025
  @lime-picker-medium-value-width: 360px;
932
1026
  @lime-picker-large-value-width: 468px;
933
1027
  @lime-picker-incrementer-margin: var(--primitive-spacing-36);
934
1028
  @lime-picker-incrementer-width: 120px;
935
- @lime-picker-indicator-width: 24px;
936
- @lime-picker-indicator-height: 24px;
937
- @lime-picker-indicator-border-radius: @lime-picker-indicator-width;
938
- @lime-picker-indicator-inactive-scale: 0.75;
939
- @lime-picker-indicator-active-scale: 1;
940
- @lime-picker-indicator-margin: var(--primitive-spacing-30) var(--primitive-spacing-12) 0;
941
1029
 
942
1030
  // Popup
943
1031
  // ---------------------------------------
1032
+ @lime-popup-body-font-size-large: var(--primitive-font-size-72);
944
1033
  @lime-popup-padding: var(--primitive-spacing-48) var(--primitive-spacing-72);
945
1034
  @lime-popup-border-radius: var(--primitive-radius-24);
946
1035
  // 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.
@@ -954,9 +1043,10 @@
954
1043
  // ---------------------------------------
955
1044
  @lime-popuptablayout-margin: var(--primitive-spacing-60) auto var(--primitive-spacing-132) var(--primitive-spacing-60);
956
1045
  @lime-popuptablayout-tab-icon-size: 96px;
1046
+ @lime-popuptablayout-tab-icon-size-large: (@lime-popuptablayout-tab-icon-size * 1.2);
957
1047
  @lime-popuptablayout-tabs-border-radius: var(--semantic-radius-container);
958
1048
  @lime-popuptablayout-tabs-content-spacing: var(--primitive-spacing-36);
959
- @lime-popuptablayout-content-border-radius: var(--semantic-radius-popup);
1049
+ @lime-popuptablayout-content-border-radius: var(--semantic-radius-overlay);
960
1050
  @lime-popuptablayout-content-margin: 0;
961
1051
  @lime-popuptablayout-panel-body-padding: var(--primitive-spacing-60);
962
1052
  @lime-popuptablayout-panel-min-height: 996px;
@@ -1037,28 +1127,35 @@
1037
1127
  @lime-scroll-horizontal-fade-out-padding: 0 @lime-scroll-fade-out-size;
1038
1128
  @lime-scroll-hover-area-size: 120px;
1039
1129
  @lime-scroll-focusablebody-padding: var(--primitive-spacing-72) var(--primitive-spacing-48) var(--primitive-spacing-72) var(--primitive-spacing-90);
1040
- @lime-scroll-focusablebody-padding-rtl: var(--primitive-spacing-72) var(--primitive-spacing-90) var(--primitive-spacing-72) var(--primitive-spacing-48);
1041
1130
  @lime-scroll-focusablebody-focus-border-radius: var(--primitive-radius-12);
1042
1131
 
1043
1132
  // Slider
1044
1133
  // ---------------------------------------
1045
- @lime-slider-focusin-transform: scale(1.33);
1134
+ @lime-slider-focus-scale: 1.33;
1135
+ @lime-slider-focusin-transform: scale(@lime-slider-focus-scale);
1046
1136
  @lime-slider-focusout-transform: scale(1);
1047
1137
  @lime-slider-press-transform: scale(1.16);
1048
1138
  @lime-slider-release-transform: @lime-slider-focusin-transform;
1049
1139
  @lime-slider-bar-height: @lime-progressbar-bar-thickness;
1140
+ @lime-slider-color-picker-bar-height: 48px;
1141
+ @lime-slider-color-picker-bar-border-radius: (@lime-slider-color-picker-bar-height / 2);
1142
+ @lime-slider-color-picker-knob-container-size: (@lime-slider-knob-width + 12px);
1143
+ @lime-slider-color-picker-knob-container-size-focused: (@lime-slider-knob-width-large + 12px);
1144
+ @lime-slider-color-picker-knob-outline-width: 6px;
1050
1145
  @lime-slider-bar-vertical-min-height: 240px;
1051
1146
  @lime-slider-bar-min-max-padding-bottom: var(--primitive-spacing-84);
1052
- @lime-slider-bar-padding: var(--primitive-spacing-24);
1053
- @lime-slider-knob-width: 36px;
1054
- @lime-slider-knob-width-large: @lime-slider-knob-width;
1147
+ @lime-slider-bar-padding: var(--primitive-spacing-60);
1148
+ @lime-slider-knob-width: 48px;
1149
+ @lime-slider-knob-width-large: 60px;
1055
1150
  @lime-slider-knob-height: @lime-slider-knob-width;
1056
- @lime-slider-knob-height-large: @lime-slider-knob-height;
1057
1151
  @lime-slider-tooltip-offset: (@lime-slider-knob-height / 2);
1152
+ @lime-slider-tooltip-offset-focused: (@lime-slider-knob-width * @lime-slider-focus-scale / 2);
1058
1153
  @lime-slider-min-max-margin-top: var(--primitive-spacing-24);
1059
1154
  @lime-slider-min-max-font-size: var(--primitive-font-size-48);
1155
+ @lime-slider-min-max-font-size-large: var(--primitive-font-size-60);
1060
1156
  @lime-slider-min-max-font-weight: var(--primitive-font-weight-regular);
1061
1157
  @lime-slider-min-max-line-height: 60px;
1158
+ @lime-slider-min-max-line-height-large: 70px;
1062
1159
  @lime-slider-vertical-min-max-margin-left: var(--primitive-spacing-24);
1063
1160
  @lime-slider-tooltip-above-offset: (-@lime-progressbar-bar-thickness);
1064
1161
  @lime-slider-tooltip-below-offset: (@lime-progressbar-bar-thickness);
@@ -1087,34 +1184,38 @@
1087
1184
  @lime-steps-step-future-opacity: 1;
1088
1185
  @lime-steps-step-highlight-current-only-future-opacity: 1;
1089
1186
  @lime-steps-pageindicator-size: 18px;
1090
- @lime-steps-pageindicator-margin: 0 var(--primitive-spacing-12);
1187
+ @lime-steps-pageindicator-size-large: calc(@lime-steps-pageindicator-size * 1.2);
1091
1188
  @lime-steps-pageindicator-border-radius: var(--semantic-radius-full);
1092
1189
  @lime-steps-pageindicator-current-size: 24px;
1093
- @lime-steps-pageindicator-current-margin: 0 var(--primitive-spacing-6);
1190
+ @lime-steps-pageindicator-current-size-large: calc(@lime-steps-pageindicator-current-size * 1.2);
1191
+ @lime-steps-highlight-current-only-gap: var(--primitive-spacing-24);
1192
+ @lime-steps-highlight-current-only-margin-top: var(--primitive-spacing-30);
1094
1193
 
1095
1194
  // Switch
1096
1195
  // ---------------------------------------
1097
- @lime-switch-border-radius: var(--primitive-radius-30);
1196
+ @lime-switch-border-radius: var(--primitive-radius-999);
1098
1197
  @lime-switch-height: 60px;
1099
1198
  @lime-switch-width: 120px;
1100
1199
  @lime-switch-icon-height: 48px;
1200
+ @lime-switch-icon-height-large: 57px;
1101
1201
  @lime-switch-icon-line-height: @lime-switch-height;
1102
- @lime-switch-height-large: @lime-icon-small-size-large;
1103
- @lime-switch-width-large: 162px;
1104
- @lime-switch-icon-height-large: @lime-icon-small-size-large;
1105
- @lime-switch-icon-line-height-large: @lime-switch-icon-height-large;
1202
+ @lime-switch-icon-line-height-large: @lime-switch-height-large;
1203
+ @lime-switch-height-large: 72px;
1204
+ @lime-switch-width-large: 144px;
1106
1205
  @lime-switch-icon-top: ((@lime-switch-height - @lime-switch-icon-height) / 2);
1206
+ @lime-switch-icon-top-large: ((@lime-switch-height-large - @lime-switch-icon-height-large) / 2);
1107
1207
  @lime-switch-spottable-margin: @lime-component-spacing;
1108
1208
  @lime-switch-spottable-border-radius: var(--primitive-radius-24);
1109
1209
  @lime-switch-spottable-position: ~"calc(@{lime-component-spacing} * -1)"; // These correlate with the numbers from 'margin" above
1110
1210
 
1111
1211
  // TabLayout
1112
1212
  // ---------------------------------------
1113
- @lime-tablayout-border-radius: var(--semantic-radius-container);
1213
+ @lime-tablayout-border-radius-horizontal: var(--primitive-radius-44);
1214
+ @lime-tablayout-border-radius-vertical: var(--semantic-radius-container);
1114
1215
  @lime-tablayout-collapse-duration: 250ms;
1115
1216
  @lime-tablayout-vertical-content-margin-top: 0;
1116
1217
  @lime-tablayout-horizontal-content-margin-top: var(--primitive-spacing-96);
1117
- @lime-tablayout-horizontal-tabs-margin: 0 var(--primitive-spacing-18);
1218
+ @lime-tablayout-horizontal-scrollable-tabs-padding: 0 var(--primitive-spacing-132);
1118
1219
  @lime-tablayout-horizontal-tabs-padding: var(--primitive-spacing-12);
1119
1220
  @lime-tablayout-horizontal-tabs-spacing: var(--primitive-spacing-48);
1120
1221
  @lime-tablayout-vertical-tabs-padding: var(--primitive-spacing-36);
@@ -1127,6 +1228,7 @@
1127
1228
  @lime-tablayout-tab-horizontal-button-height: 108px;
1128
1229
  @lime-tablayout-tab-horizontal-small-button-height: 96px;
1129
1230
  @lime-tablayout-tab-horizontal-small-button-line-height: 60px;
1231
+ @lime-tablayout-tab-horizontal-small-button-line-height-large: 70px;
1130
1232
  @lime-tablayout-tab-horizontal-padding: var(--primitive-spacing-24);
1131
1233
  @lime-tablayout-tab-group-vertical-height: 1584px;
1132
1234
  @lime-tablayout-tab-group-vertical-scrollbar-track-margin: var(--primitive-spacing-36);
@@ -1143,7 +1245,14 @@
1143
1245
  @lime-tooltip-point-width: 31px; // actual value is 30px. +1px to ensure no gaps
1144
1246
  @lime-tooltip-point-height: 37px; // actual value is 36px. +1px to ensure no gaps
1145
1247
  @lime-tooltip-border-radius: var(--semantic-radius-button);
1248
+ @lime-tooltip-image-border-radius: var(--semantic-radius-button);
1249
+ @lime-tooltip-image-container-border-radius: var(--semantic-radius-container);
1250
+ @lime-tooltip-image-gap: var(--primitive-spacing-36);
1251
+ @lime-tooltip-image-height: 540px;
1252
+ @lime-tooltip-image-padding: var(--primitive-spacing-60);
1253
+ @lime-tooltip-image-width: 960px;
1146
1254
  @lime-tooltip-label-line-height: 72px;
1255
+ @lime-tooltip-label-line-height-large: 84px;
1147
1256
  @lime-tooltip-padding: var(--primitive-spacing-12) var(--primitive-spacing-48);
1148
1257
  @lime-tooltip-margin-offset: var(--primitive-spacing-18); // GUI for the length of the arrow
1149
1258
  @lime-tooltip-marquee-width: 600px;
@@ -1160,10 +1269,13 @@
1160
1269
  @lime-video-slider-tooltip-shift-position-bottom: ~"calc(@{lime-video-slider-tooltip-position-bottom} + @{lime-video-slider-tooltip-arrow-border-top})";
1161
1270
  @lime-video-slider-tooltip-margin-bottom: var(--primitive-spacing-6);
1162
1271
  @lime-video-slider-tooltip-font-size: var(--primitive-font-size-48);
1272
+ @lime-video-slider-tooltip-font-size-large: var(--primitive-font-size-58);
1163
1273
  @lime-video-slider-tooltip-font-weight: var(--primitive-font-weight-regular);
1164
1274
  @lime-video-slider-tooltip-line-height: 72px;
1275
+ @lime-video-slider-tooltip-line-height-large: 84px;
1165
1276
  @lime-video-slider-tooltip-gutter-width: var(--primitive-spacing-42);
1166
1277
  @lime-video-slider-tooltip-thumbnail-content-font-size: var(--primitive-font-size-54);
1278
+ @lime-video-slider-tooltip-thumbnail-content-font-size-large: var(--primitive-font-size-56);
1167
1279
  @lime-video-slider-tooltip-thumbnail-content-margin-bottom: var(--primitive-spacing-30);
1168
1280
  @lime-video-slider-tooltip-thumbnail-border-radius: var(--primitive-radius-12);
1169
1281
  @lime-video-slider-tooltip-thumbnail-border-width: 12px;
@@ -1171,6 +1283,7 @@
1171
1283
  @lime-video-slider-tooltip-thumbnail-height: 240px;
1172
1284
  @lime-video-slider-tooltip-deactivated-thumbnail-opacity: 0.5;
1173
1285
  @lime-video-feedback-icon-font-size: 1.25em;
1286
+ @lime-video-feedback-icon-font-size-large: 1.5em;
1174
1287
  @lime-video-feedback-mini-font-size: var(--primitive-font-size-66);
1175
1288
  @lime-video-feedback-mini-font-weight: var(--primitive-font-weight-regular);
1176
1289
  @lime-video-feedback-mini-padding: var(--primitive-spacing-18) var(--primitive-spacing-60);
@@ -1181,9 +1294,11 @@
1181
1294
  @lime-video-feedback-message-font-weight: var(--primitive-font-weight-semibold);
1182
1295
  @lime-video-player-badge-text-size: var(--primitive-font-size-48);
1183
1296
  @lime-video-player-info-font-size: var(--primitive-font-size-54);
1297
+ @lime-video-player-info-font-size-large: var(--primitive-font-size-66);
1184
1298
  @lime-video-player-info-font-weight: var(--primitive-font-weight-regular);
1185
1299
  @lime-video-player-info-height: 84px;
1186
1300
  @lime-video-player-info-line-height: 72px;
1301
+ @lime-video-player-info-line-height-large: 84px;
1187
1302
  @lime-video-player-info-padding: var(--primitive-spacing-72) var(--primitive-spacing-48) 0;
1188
1303
  @lime-video-player-info-margin-bottom: var(--primitive-spacing-60);
1189
1304
  @lime-video-player-slider-container-height: 132px;
@@ -1191,8 +1306,10 @@
1191
1306
  @lime-video-player-padding-bottom: 0;
1192
1307
  @lime-video-player-padding-side: var(--primitive-spacing-132);
1193
1308
  @lime-video-player-label-font-size: var(--primitive-font-size-90);
1309
+ @lime-video-player-label-font-size-large: var(--primitive-font-size-108);
1194
1310
  @lime-video-player-label-font-weight: var(--primitive-font-weight-semibold);
1195
1311
  @lime-video-player-label-line-height: 120px;
1312
+ @lime-video-player-label-line-height-large: 146px;
1196
1313
 
1197
1314
  // VirtualList
1198
1315
  // ---------------------------------------