@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/internal/Picker/Picker.module.css CHANGED
@@ -9,7 +9,7 @@
9
9
  font-family: "Limestone";
10
10
  font-weight: normal;
11
11
  font-size: var(--primitive-font-size-54);
12
- line-height: 1.4em;
12
+ line-height: 1.34em;
13
13
  font-weight: var(--primitive-font-weight-semibold);
14
14
  max-width: 20rem;
15
15
  }
@@ -77,6 +77,7 @@
77
77
  }
78
78
  .picker .item {
79
79
  padding: 0 1rem;
80
+ position: relative;
80
81
  }
81
82
  .picker.small .sizingPlaceholder,
82
83
  .picker.small .item {
@@ -90,9 +91,6 @@
90
91
  .picker .viewManager > .item:nth-child(2) {
91
92
  top: -100%;
92
93
  }
93
- .picker .item {
94
- position: relative;
95
- }
96
94
  .picker .incrementer,
97
95
  .picker .decrementer {
98
96
  cursor: pointer;
@@ -168,25 +166,6 @@
168
166
  .picker.joined.horizontal:not(.arrow) .item {
169
167
  pointer-events: none;
170
168
  }
171
- .picker.joined.horizontal:not(.arrow) .indicatorContainer {
172
- margin: 0 auto;
173
- line-height: 0;
174
- white-space: nowrap;
175
- }
176
- .picker.joined.horizontal:not(.arrow) .indicatorContainer .indicator {
177
- display: inline-block;
178
- width: 0.5rem;
179
- height: 0.5rem;
180
- margin: var(--primitive-spacing-30) var(--primitive-spacing-12) 0;
181
- border-radius: 0.5rem;
182
- transform: scale(0.75);
183
- vertical-align: middle;
184
- will-change: transform;
185
- transition: transform 200ms ease-out;
186
- }
187
- .picker.joined.horizontal:not(.arrow) .indicatorContainer .indicator.active {
188
- transform: scale(1);
189
- }
190
169
  .picker.joined.horizontal.arrow::before,
191
170
  .picker.joined.vertical::before {
192
171
  border-radius: var(--semantic-radius-button);
@@ -212,6 +191,24 @@
212
191
  .picker.large .valueWrapper {
213
192
  width: 9.75rem;
214
193
  }
194
+ .picker:global(.largeText) .valueWrapper {
195
+ font-size: var(--primitive-font-size-66);
196
+ height: 1.75rem;
197
+ line-height: 1.75rem;
198
+ }
199
+ .picker:global(.largeText).joined .valueWrapper {
200
+ line-height: 1.75rem;
201
+ }
202
+ .picker:global(.largeText).joined.horizontal:not(.arrow) .valueWrapper {
203
+ font-size: var(--primitive-font-size-80);
204
+ height: 2.29167rem;
205
+ line-height: 2.29167rem;
206
+ }
207
+ .picker:global(.largeText).joined.vertical .valueWrapper {
208
+ font-size: var(--primitive-font-size-80);
209
+ height: 2.29167rem;
210
+ line-height: 2.29167rem;
211
+ }
215
212
  .picker:global(.neutral) {
216
213
  color: var(--semantic-color-on-background-main);
217
214
  }
@@ -227,13 +224,6 @@
227
224
  will-change: box-shadow;
228
225
  background-color: var(--semantic-color-surface-default);
229
226
  }
230
- .picker:global(.neutral).joined.horizontal:not(.arrow) .indicator {
231
- background-color: var(--semantic-color-on-surface-main);
232
- opacity: 0.4;
233
- }
234
- .picker:global(.neutral).joined.horizontal:not(.arrow) .indicator.active {
235
- opacity: 1;
236
- }
237
227
  .picker:global(.neutral).joined.horizontal.arrow::before,
238
228
  .picker:global(.neutral).joined.vertical::before {
239
229
  opacity: 0;
@@ -296,17 +286,17 @@
296
286
  :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .icon {
297
287
  color: var(--semantic-color-on-surface-main-focused);
298
288
  }
299
- :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .indicator,
300
- :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .indicator,
301
- :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .indicator,
302
- :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .indicator {
289
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .step,
290
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .step,
291
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .step,
292
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .step {
303
293
  background-color: var(--semantic-color-on-surface-main-focused);
304
294
  opacity: 0.4;
305
295
  }
306
- :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .indicator.active,
307
- :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .indicator.active,
308
- :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .indicator.active,
309
- :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .indicator.active {
296
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .step.current,
297
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .step.current,
298
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .step.current,
299
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .step.current {
310
300
  opacity: 1;
311
301
  }
312
302
  :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active,
@@ -347,13 +337,13 @@
347
337
  :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .icon {
348
338
  color: var(--semantic-color-on-surface-main-focused);
349
339
  }
350
- :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .indicator,
351
- :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .indicator {
340
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .step,
341
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .step {
352
342
  background-color: var(--semantic-color-on-surface-main-focused);
353
343
  opacity: 0.4;
354
344
  }
355
- :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .indicator.active,
356
- :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .indicator.active {
345
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .step.current,
346
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .step.current {
357
347
  opacity: 1;
358
348
  }
359
349
  :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) .picker:global(.neutral).joined:global(.spottable):focus.horizontal.arrow::before,
@@ -381,13 +371,6 @@
381
371
  will-change: box-shadow;
382
372
  background-color: var(--semantic-color-surface-default);
383
373
  }
384
- :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined.horizontal:not(.arrow) .indicator {
385
- background-color: var(--semantic-color-on-surface-main);
386
- opacity: 0.4;
387
- }
388
- :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined.horizontal:not(.arrow) .indicator.active {
389
- opacity: 1;
390
- }
391
374
  :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined.horizontal.arrow::before,
392
375
  :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined.vertical::before {
393
376
  opacity: 0;
@@ -450,17 +433,17 @@
450
433
  :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .icon {
451
434
  color: var(--semantic-color-on-surface-main-focused);
452
435
  }
453
- :global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator,
454
- :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator,
455
- :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator,
456
- :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator {
436
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .step,
437
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .step,
438
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .step,
439
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .step {
457
440
  background-color: var(--semantic-color-on-surface-main-focused);
458
441
  opacity: 0.4;
459
442
  }
460
- :global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator.active,
461
- :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator.active,
462
- :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator.active,
463
- :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator.active {
443
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .step.current,
444
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .step.current,
445
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .step.current,
446
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .step.current {
464
447
  opacity: 1;
465
448
  }
466
449
  :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active,
@@ -501,13 +484,13 @@
501
484
  :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .icon {
502
485
  color: var(--semantic-color-on-surface-main-focused);
503
486
  }
504
- :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .indicator,
505
- :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .indicator {
487
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .step,
488
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .step {
506
489
  background-color: var(--semantic-color-on-surface-main-focused);
507
490
  opacity: 0.4;
508
491
  }
509
- :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .indicator.active,
510
- :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .indicator.active {
492
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .step.current,
493
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .step.current {
511
494
  opacity: 1;
512
495
  }
513
496
  :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.horizontal.arrow::before,
@@ -535,13 +518,6 @@
535
518
  will-change: box-shadow;
536
519
  background-color: var(--semantic-color-surface-default);
537
520
  }
538
- .picker:global(.light).joined.horizontal:not(.arrow) .indicator {
539
- background-color: var(--semantic-color-on-surface-main);
540
- opacity: 0.4;
541
- }
542
- .picker:global(.light).joined.horizontal:not(.arrow) .indicator.active {
543
- opacity: 1;
544
- }
545
521
  .picker:global(.light).joined.horizontal.arrow::before,
546
522
  .picker:global(.light).joined.vertical::before {
547
523
  opacity: 0;
@@ -604,17 +580,17 @@
604
580
  :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .icon {
605
581
  color: var(--semantic-color-on-surface-main-focused);
606
582
  }
607
- :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .indicator,
608
- :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .indicator,
609
- :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .indicator,
610
- :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .indicator {
583
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .step,
584
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .step,
585
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .step,
586
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .step {
611
587
  background-color: var(--semantic-color-on-surface-main-focused);
612
588
  opacity: 0.4;
613
589
  }
614
- :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .indicator.active,
615
- :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .indicator.active,
616
- :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .indicator.active,
617
- :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .indicator.active {
590
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .step.current,
591
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .step.current,
592
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .step.current,
593
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .step.current {
618
594
  opacity: 1;
619
595
  }
620
596
  :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active,
@@ -655,13 +631,13 @@
655
631
  :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .icon {
656
632
  color: var(--semantic-color-on-surface-main-focused);
657
633
  }
658
- :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .indicator,
659
- :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .indicator {
634
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .step,
635
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .step {
660
636
  background-color: var(--semantic-color-on-surface-main-focused);
661
637
  opacity: 0.4;
662
638
  }
663
- :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .indicator.active,
664
- :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .indicator.active {
639
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .step.current,
640
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .step.current {
665
641
  opacity: 1;
666
642
  }
667
643
  :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) .picker:global(.light).joined:global(.spottable):focus.horizontal.arrow::before,
@@ -692,13 +668,6 @@
692
668
  will-change: box-shadow;
693
669
  background-color: var(--semantic-color-surface-default);
694
670
  }
695
- .picker:global(.game).joined.horizontal:not(.arrow) .indicator {
696
- background-color: var(--semantic-color-on-surface-main);
697
- opacity: 0.4;
698
- }
699
- .picker:global(.game).joined.horizontal:not(.arrow) .indicator.active {
700
- opacity: 1;
701
- }
702
671
  .picker:global(.game).joined.horizontal.arrow::before,
703
672
  .picker:global(.game).joined.vertical::before {
704
673
  opacity: 0;
@@ -761,17 +730,17 @@
761
730
  :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .icon {
762
731
  color: var(--semantic-color-on-surface-main-focused);
763
732
  }
764
- :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .indicator,
765
- :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .indicator,
766
- :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .indicator,
767
- :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .indicator {
733
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .step,
734
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .step,
735
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .step,
736
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .step {
768
737
  background-color: var(--semantic-color-on-surface-main-focused);
769
738
  opacity: 0.4;
770
739
  }
771
- :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
772
- :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
773
- :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
774
- :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .indicator.active {
740
+ :global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .step.current,
741
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .step.current,
742
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .step.current,
743
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .step.current {
775
744
  opacity: 1;
776
745
  }
777
746
  :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active,
@@ -812,13 +781,13 @@
812
781
  :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .icon {
813
782
  color: var(--semantic-color-on-surface-main-focused);
814
783
  }
815
- :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .indicator,
816
- :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .indicator {
784
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .step,
785
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .step {
817
786
  background-color: var(--semantic-color-on-surface-main-focused);
818
787
  opacity: 0.4;
819
788
  }
820
- :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .indicator.active,
821
- :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .indicator.active {
789
+ :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .step.current,
790
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .step.current {
822
791
  opacity: 1;
823
792
  }
824
793
  :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
@@ -848,13 +817,6 @@
848
817
  will-change: box-shadow;
849
818
  background-color: var(--semantic-color-surface-default);
850
819
  }
851
- :global(.green) .picker:global(.game).joined.horizontal:not(.arrow) .indicator {
852
- background-color: var(--semantic-color-on-surface-main);
853
- opacity: 0.4;
854
- }
855
- :global(.green) .picker:global(.game).joined.horizontal:not(.arrow) .indicator.active {
856
- opacity: 1;
857
- }
858
820
  :global(.green) .picker:global(.game).joined.horizontal.arrow::before,
859
821
  :global(.green) .picker:global(.game).joined.vertical::before {
860
822
  opacity: 0;
@@ -917,17 +879,17 @@
917
879
  :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .icon {
918
880
  color: var(--semantic-color-on-surface-main-focused);
919
881
  }
920
- :global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator,
921
- :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator,
922
- :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator,
923
- :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator {
882
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .step,
883
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .step,
884
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .step,
885
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .step {
924
886
  background-color: var(--semantic-color-on-surface-main-focused);
925
887
  opacity: 0.4;
926
888
  }
927
- :global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
928
- :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
929
- :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
930
- :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator.active {
889
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .step.current,
890
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .step.current,
891
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .step.current,
892
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .step.current {
931
893
  opacity: 1;
932
894
  }
933
895
  :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active,
@@ -968,13 +930,13 @@
968
930
  :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .icon {
969
931
  color: var(--semantic-color-on-surface-main-focused);
970
932
  }
971
- :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .indicator,
972
- :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .indicator {
933
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .step,
934
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .step {
973
935
  background-color: var(--semantic-color-on-surface-main-focused);
974
936
  opacity: 0.4;
975
937
  }
976
- :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .indicator.active,
977
- :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .indicator.active {
938
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .step.current,
939
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .step.current {
978
940
  opacity: 1;
979
941
  }
980
942
  :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) :global(.green) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
@@ -1004,13 +966,6 @@
1004
966
  will-change: box-shadow;
1005
967
  background-color: var(--semantic-color-surface-default);
1006
968
  }
1007
- :global(.orange) .picker:global(.game).joined.horizontal:not(.arrow) .indicator {
1008
- background-color: var(--semantic-color-on-surface-main);
1009
- opacity: 0.4;
1010
- }
1011
- :global(.orange) .picker:global(.game).joined.horizontal:not(.arrow) .indicator.active {
1012
- opacity: 1;
1013
- }
1014
969
  :global(.orange) .picker:global(.game).joined.horizontal.arrow::before,
1015
970
  :global(.orange) .picker:global(.game).joined.vertical::before {
1016
971
  opacity: 0;
@@ -1073,17 +1028,17 @@
1073
1028
  :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .icon {
1074
1029
  color: var(--semantic-color-on-surface-main-focused);
1075
1030
  }
1076
- :global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator,
1077
- :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator,
1078
- :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator,
1079
- :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator {
1031
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .step,
1032
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .step,
1033
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .step,
1034
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .step {
1080
1035
  background-color: var(--semantic-color-on-surface-main-focused);
1081
1036
  opacity: 0.4;
1082
1037
  }
1083
- :global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
1084
- :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
1085
- :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
1086
- :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator.active {
1038
+ :global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .step.current,
1039
+ :global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .step.current,
1040
+ :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .step.current,
1041
+ :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .step.current {
1087
1042
  opacity: 1;
1088
1043
  }
1089
1044
  :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active,
@@ -1124,13 +1079,13 @@
1124
1079
  :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .icon {
1125
1080
  color: var(--semantic-color-on-surface-main-focused);
1126
1081
  }
1127
- :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .indicator,
1128
- :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .indicator {
1082
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .step,
1083
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .step {
1129
1084
  background-color: var(--semantic-color-on-surface-main-focused);
1130
1085
  opacity: 0.4;
1131
1086
  }
1132
- :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .indicator.active,
1133
- :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .indicator.active {
1087
+ :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .step.current,
1088
+ :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .step.current {
1134
1089
  opacity: 1;
1135
1090
  }
1136
1091
  :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enact/limestone",
3
- "version": "1.10.0",
3
+ "version": "1.10.2",
4
4
  "description": "Large-screen/TV support library for Enact, containing a variety of UI components.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -39,20 +39,20 @@
39
39
  "screenTypes": "ThemeDecorator/screenTypes.json"
40
40
  },
41
41
  "dependencies": {
42
- "@enact/core": "^5.5.0",
43
- "@enact/i18n": "^5.5.0",
44
- "@enact/spotlight": "^5.5.0",
45
- "@enact/ui": "^5.5.0",
46
- "@enact/webos": "^5.5.0",
47
- "@enovaui/core-tokens": "^0.15.0",
48
- "@enovaui/webos-tokens": "^0.15.0",
42
+ "@enact/core": "^5.5.2",
43
+ "@enact/i18n": "^5.5.2",
44
+ "@enact/spotlight": "^5.5.2",
45
+ "@enact/ui": "^5.5.2",
46
+ "@enact/webos": "^5.5.2",
47
+ "@enovaui/core-tokens": "^2.0.0",
48
+ "@enovaui/webos-tokens": "^2.0.0",
49
49
  "classnames": "^2.5.1",
50
- "ilib": "^14.21.3",
50
+ "ilib": "^14.22.0",
51
51
  "invariant": "^2.2.4",
52
52
  "prop-types": "^15.8.1",
53
53
  "ramda": "^0.32.0",
54
- "react": "^19.2.6",
55
- "react-dom": "^19.2.6",
54
+ "react": "^19.2.7",
55
+ "react-dom": "^19.2.7",
56
56
  "warning": "^4.0.3"
57
57
  },
58
58
  "peerDependencies": {
@@ -60,13 +60,10 @@
60
60
  },
61
61
  "overrides": {
62
62
  "autolinker": "^4.0.0",
63
- "vue-template-compiler": "@vue/compiler-sfc@3.4.31",
64
- "prop-types": {
65
- "react-is": "^19.2.3"
66
- }
63
+ "vue-template-compiler": "@vue/compiler-sfc@3.4.31"
67
64
  },
68
65
  "devDependencies": {
69
- "@enact/docs-utils": "^0.4.17",
70
- "@enact/ui-test-utils": "^4.0.2"
66
+ "@enact/docs-utils": "^0.5.0",
67
+ "@enact/ui-test-utils": "^4.0.4"
71
68
  }
72
69
  }
package/styles/color-mixins.less CHANGED
@@ -10,64 +10,16 @@
10
10
  // Focus Shadow and background setup
11
11
  // ---------------------------------------
12
12
  .lime-bg-colors (@bg) {
13
- //// Relocate the bg styling to a pseudo-element
14
- // &::after {
15
- @bg();
16
- // }
13
+ @bg();
17
14
  }
18
- // .lime-shadow-colors (@shadow) {
19
- // // &::before {
20
- // @shadow();
21
- // // }
22
- // }
23
15
 
24
16
  // Establish rules assignment for before focus has happened
25
17
  .lime-spotlight-resting-bg-colors (@opacity: 0, @bg: {}, @shadow: {}) {
26
- // These lines are really long, and occasionally repeated. Defining here as shorthand.
27
- // @transition-opacity: opacity @lime-spotlight-focus-animation-duration ease-out;
28
- // @transition-transform: transform @lime-spotlight-focus-animation-duration ease-out;
29
- // @transition-filter: filter @lime-spotlight-focus-animation-duration ease-out;
30
-
31
18
  opacity: @opacity;
32
- // transition+: @transition-opacity;
33
- // will-change+: opacity;
34
-
35
- // Prep common aspects
36
- // @pseudo-element-setup: {
37
- // content: "";
38
- // position: absolute;
39
- // .position(0);
40
- // border-radius: inherit;
41
- // };
42
-
43
- // // Shadow
44
- // .lime-shadow-colors({
45
- // @pseudo-element-setup();
46
- // background-color: @lime-spotlight-bg-color;
47
- // opacity: 0;
48
-
49
- // // filter+: drop-shadow(@lime-spotlight-focus-shadow);
50
- // box-shadow: @lime-spotlight-focus-shadow;
51
-
52
- // //// Include a transform on the shadow for a better effect
53
- // // transform+_: scale(0.9, 0.5); // Hard-coded values, not part of the design. This transform is responsible for tucking the shadow up inside the background so it can transition out.
54
- // // transition+: @transition-opacity, @transition-transform;
55
- // // will-change+: opacity, transition;
56
-
57
- // //// Simple opacity change to the shadow (fade-in)
58
- // transition+: @transition-opacity;
59
- // will-change+: opacity;
60
- // will-change+: box-shadow;
61
-
62
- // @shadow();
63
- // });
64
19
 
65
20
  // Background coloration
66
21
  .lime-bg-colors({
67
- // @pseudo-element-setup();
68
-
69
22
  background-color: @lime-spotlight-bg-color;
70
- // transition+: @transition-filter;
71
23
  will-change+: box-shadow;
72
24
 
73
25
  @bg();
@@ -78,26 +30,18 @@
78
30
  // Establish rules assignment for after focus has happened
79
31
  .lime-spotlight-focus-bg-colors (@bg: {}, @shadow: {}) {
80
32
  opacity: 1;
33
+
34
+ // Background coloration
81
35
  .lime-bg-colors({
82
36
  background-color: @lime-spotlight-bg-color;
83
37
  box-shadow: @lime-spotlight-focus-shadow;
38
+
84
39
  @bg();
85
40
  @shadow();
86
41
  });
87
42
  }
88
43
 
89
- // // Just the spotlight shadow (merge-safe)
90
- // .lime-spotlight-focus-shadow-colors (@shadow: {}) {
91
- // .lime-shadow-colors({
92
- // transform: scale(1);
93
- // opacity: 1;
94
- // box-shadow: @lime-spotlight-focus-shadow;
95
- // @shadow();
96
- // });
97
- // }
98
-
99
44
  .lime-spotlight-focus-text-colors () {
100
- // font-weight: @lime-spotlight-font-weight;
101
45
  color: @lime-spotlight-text-color;
102
46
  }
103
47
 
package/styles/colors-game.less CHANGED
@@ -38,8 +38,8 @@
38
38
 
39
39
  // Button
40
40
  // --------------------------------------
41
- @lime-button-outline-border: fade(@lime-game-skin-color-01, 50%);
42
- @lime-button-icononly-bg-focused: fade(@lime-game-skin-color-02, 50%);
41
+ @lime-button-outline-border-color: fade(@lime-game-skin-color-01, 50%);
42
+ @lime-button-icononly-bg-focused-color: fade(@lime-game-skin-color-02, 50%);
43
43
 
44
44
  // Heading
45
45
  // ---------------------------------------
@@ -48,9 +48,9 @@
48
48
  // Item
49
49
  // ---------------------------------------
50
50
  @lime-item-focus-background: linear-gradient(270deg, @lime-game-skin-item-focus-bg-gradient-1, @lime-game-skin-item-focus-bg-gradient-2);
51
- @lime-item-focus-label-color: #abaeb3;
51
+ @lime-item-label-sub-focused-color: #abaeb3;
52
52
 
53
53
  // RadioItem
54
54
  // ---------------------------------------
55
- @lime-radioitem-icon-bg-selected: @lime-game-skin-color-02;
56
- @lime-radioitem-icon-border-selected: @lime-game-skin-color-02;
55
+ @lime-radioitem-container-selected-color: @lime-game-skin-color-02;
56
+ @lime-radioitem-border-selected-color: @lime-game-skin-color-02;