@enact/limestone 1.3.0 → 1.9.4

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 (166) hide show
  1. package/.github/workflows/ci-branch.yml +21 -0
  2. package/.github/workflows/ci-pull-request.yml +16 -0
  3. package/.github/workflows/ci-reusable.yml +73 -0
  4. package/ActionGuide/ActionGuide.d.ts +5 -4
  5. package/ActionGuide/ActionGuide.module.css +1 -1
  6. package/Alert/Alert.d.ts +4 -2
  7. package/Alert/Alert.js +4 -1
  8. package/Alert/Alert.module.css +36 -0
  9. package/BodyText/BodyText.d.ts +5 -4
  10. package/BodyText/BodyText.module.css +7 -7
  11. package/Button/Button.d.ts +17 -12
  12. package/Button/Button.js +1 -1
  13. package/Button/Button.module.css +195 -268
  14. package/CHANGELOG.md +226 -0
  15. package/Card/Card.d.ts +36 -8
  16. package/Card/Card.js +157 -20
  17. package/Card/Card.module.css +277 -58
  18. package/Card/tests/Card-specs.js +30 -0
  19. package/Checkbox/Checkbox.d.ts +8 -7
  20. package/Checkbox/Checkbox.js +3 -1
  21. package/Checkbox/Checkbox.module.css +213 -120
  22. package/Checkbox/tests/Checkbox-specs.js +1 -1
  23. package/CheckboxItem/CheckboxItem.d.ts +22 -7
  24. package/CheckboxItem/CheckboxItem.js +69 -4
  25. package/Chips/Chip.js +60 -7
  26. package/Chips/Chip.module.css +3 -3
  27. package/Chips/Chips.js +26 -12
  28. package/Chips/Chips.module.css +1 -1
  29. package/Chips/tests/Chip-specs.js +19 -9
  30. package/Chips/tests/Chips-specs.js +19 -19
  31. package/ContextualMenuDecorator/ContextualMenuDecorator.d.ts +4 -5
  32. package/ContextualPopupDecorator/ContextualPopup.module.css +34 -34
  33. package/ContextualPopupDecorator/ContextualPopupDecorator.js +557 -549
  34. package/DatePicker/DatePicker.d.ts +4 -5
  35. package/DayPicker/DayPicker.d.ts +8 -7
  36. package/Dropdown/Dropdown.d.ts +11 -13
  37. package/Dropdown/Dropdown.module.css +9 -9
  38. package/Dropdown/DropdownList.js +16 -11
  39. package/FixedPopupPanels/FixedPopupPanels.d.ts +4 -2
  40. package/FixedPopupPanels/FixedPopupPanels.module.css +18 -18
  41. package/FlexiblePopupPanels/FlexiblePopupPanels.module.css +23 -23
  42. package/FormCheckboxItem/FormCheckboxItem.d.ts +5 -4
  43. package/Heading/Heading.d.ts +8 -7
  44. package/Heading/Heading.module.css +5 -5
  45. package/Icon/Icon.d.ts +14 -4
  46. package/Icon/Icon.js +48 -2
  47. package/Icon/Icon.module.css +1 -1
  48. package/Icon/IconList.js +25 -1
  49. package/IconItem/IconItem.d.ts +13 -12
  50. package/IconItem/IconItem.js +15 -0
  51. package/IconItem/IconItem.module.css +107 -1
  52. package/Image/Image.d.ts +5 -4
  53. package/ImageItem/ImageItem.d.ts +11 -10
  54. package/ImageItem/ImageItem.js +37 -31
  55. package/ImageItem/ImageItem.module.css +30 -30
  56. package/ImageItem/tests/ImageItem-specs.js +3 -10
  57. package/Input/Input.js +9 -2
  58. package/Input/Input.module.css +37 -8
  59. package/Input/InputField.js +5 -1
  60. package/Input/InputField.module.css +17 -2
  61. package/Input/InputFieldSpotlightDecorator.js +213 -229
  62. package/Input/index.d.ts +15 -18
  63. package/Input/tests/InputField-specs.js +21 -0
  64. package/Item/Item.d.ts +16 -9
  65. package/Item/Item.js +20 -2
  66. package/Item/Item.module.css +1 -1
  67. package/KeyGuide/KeyGuide.d.ts +8 -7
  68. package/KeyGuide/KeyGuide.module.css +25 -1
  69. package/Marquee/Marquee.d.ts +2 -4
  70. package/MediaOverlay/MediaOverlay.d.ts +12 -11
  71. package/MediaOverlay/MediaOverlay.js +43 -21
  72. package/MediaOverlay/MediaOverlay.module.css +114 -15
  73. package/MediaPlayer/MediaControls.js +195 -13
  74. package/MediaPlayer/MediaControls.module.css +3 -2
  75. package/MediaPlayer/MediaSlider.module.css +7 -20
  76. package/MediaPlayer/index.d.ts +59 -7
  77. package/PageViews/PageViews.js +165 -80
  78. package/PageViews/PageViewsRouter.js +9 -0
  79. package/PageViews/tests/PageViews-specs.js +84 -0
  80. package/Panels/Header.js +48 -30
  81. package/Panels/Header.module.css +83 -31
  82. package/Panels/Panel.module.css +1 -1
  83. package/Panels/index.d.ts +7 -8
  84. package/Picker/Picker.d.ts +4 -5
  85. package/Picker/Picker.module.css +2 -2
  86. package/Popup/Popup.js +242 -240
  87. package/Popup/Popup.module.css +24 -24
  88. package/PopupTabLayout/PopupTabLayout.d.ts +5 -7
  89. package/PopupTabLayout/PopupTabLayout.js +15 -9
  90. package/PopupTabLayout/PopupTabLayout.module.css +53 -16
  91. package/PopupTabLayout/PopupTabLayoutStateContext.js +8 -0
  92. package/ProgressBar/ProgressBar.d.ts +5 -4
  93. package/ProgressBar/ProgressBarTooltip.module.css +12 -12
  94. package/ProgressButton/ProgressButton.d.ts +4 -5
  95. package/QuickGuidePanels/QuickGuidePanels.module.css +2 -2
  96. package/RadioItem/RadioItem.d.ts +18 -5
  97. package/RadioItem/RadioItem.js +67 -2
  98. package/RadioItem/RadioItem.module.css +36 -36
  99. package/RangePicker/RangePicker.module.css +2 -2
  100. package/Scroller/EditableWrapper.js +11 -4
  101. package/Scroller/Scroller.d.ts +20 -16
  102. package/Scroller/Scroller.js +9 -3
  103. package/Scroller/Scroller.module.css +4 -4
  104. package/Slider/Slider.d.ts +16 -14
  105. package/Slider/Slider.js +37 -4
  106. package/Slider/Slider.module.css +314 -91
  107. package/Slider/tests/Slider-specs.js +2 -1
  108. package/Spinner/Spinner.d.ts +5 -4
  109. package/Spinner/Spinner.module.css +9 -9
  110. package/Steps/Steps.d.ts +5 -4
  111. package/Steps/Steps.js +9 -5
  112. package/Switch/Switch.d.ts +8 -7
  113. package/Switch/Switch.module.css +100 -13
  114. package/SwitchItem/SwitchItem.d.ts +9 -6
  115. package/TabLayout/RefocusDecorator.js +15 -9
  116. package/TabLayout/TabGroup.js +3 -2
  117. package/TabLayout/TabGroup.module.css +2 -2
  118. package/TabLayout/TabLayout.d.ts +6 -0
  119. package/TabLayout/TabLayout.js +11 -1
  120. package/TabLayout/TabLayout.module.css +18 -0
  121. package/TabLayout/tests/TabLayout-specs.js +52 -0
  122. package/ThemeDecorator/ThemeDecorator.d.ts +9 -10
  123. package/ThemeDecorator/fontGenerator.js +1 -1
  124. package/ThemeDecorator/screenTypes.json +1 -0
  125. package/TimePicker/TimePicker.module.css +1 -1
  126. package/TooltipDecorator/Tooltip.module.css +1 -2
  127. package/TooltipDecorator/tests/util-specs.js +12 -0
  128. package/TooltipDecorator/useTooltip.js +1 -1
  129. package/TooltipDecorator/util.js +18 -11
  130. package/VideoPlayer/Feedback.js +3 -0
  131. package/VideoPlayer/Feedback.module.css +5 -9
  132. package/VideoPlayer/FeedbackIcons.js +1 -1
  133. package/VideoPlayer/FeedbackTooltip.module.css +55 -11
  134. package/VideoPlayer/VideoPlayer.d.ts +44 -18
  135. package/VideoPlayer/VideoPlayer.js +128 -23
  136. package/VideoPlayer/VideoPlayer.module.css +28 -11
  137. package/VirtualList/VirtualList.d.ts +9 -2
  138. package/VirtualList/VirtualList.js +31 -6
  139. package/VirtualList/tests/VirtualGridList-translate-specs.js +3 -0
  140. package/VirtualList/tests/VirtualList-specs.js +28 -1
  141. package/VirtualList/tests/VirtualList-translate-specs.js +4 -1
  142. package/VirtualList/tests/useEvent-specs.js +39 -0
  143. package/VirtualList/useEvent.js +45 -10
  144. package/VirtualList/useThemeVirtualList.js +3 -0
  145. package/WizardPanels/WizardPanels.module.css +2 -2
  146. package/WizardPanels/index.d.ts +4 -2
  147. package/fonts/Limestone_Icons.ttf +0 -0
  148. package/internal/$L/$L.js +3 -3
  149. package/internal/DateComponentPicker/DateComponentPicker.module.css +2 -2
  150. package/internal/DateTime/DateTime.module.css +1 -0
  151. package/internal/Panels/PanelsRouter.js +16 -5
  152. package/internal/Picker/Picker.module.css +2 -2
  153. package/internal/SharedStateDecorator/SharedStateDecorator.js +76 -99
  154. package/internal/validators/validators.js +21 -2
  155. package/package.json +14 -14
  156. package/styles/colors-highcontrast.less +9 -1
  157. package/styles/colors.less +11 -7
  158. package/styles/motion-mixins.less +66 -0
  159. package/styles/motions.less +78 -0
  160. package/styles/variables.less +176 -150
  161. package/useScroll/HoverToScroll.js +8 -5
  162. package/useScroll/ScrollbarTrack.module.css +8 -8
  163. package/useScroll/useEvent.js +7 -1
  164. package/useScroll/useScroll.js +2 -0
  165. package/useScroll/useScroll.module.css +6 -6
  166. package/.travis.yml +0 -40
package/Checkbox/Checkbox.module.css CHANGED
@@ -1,3 +1,86 @@
1
+ /* ---------------------------------------
2
+ Animations
3
+ ------------------------------------------ */
4
+ :root {
5
+ /* Bounce
6
+ ------------------------------------------ */
7
+ --lime-bounce-motion: var(--lime-bounce-animation-name) var(--lime-bounce-motion-duration) var(--lime-bounce-motion-easing-function);
8
+ --lime-check-motion: var(--lime-check-animation-name) var(--lime-check-motion-duration) forwards;
9
+ }
10
+ /* ---------------------------------------
11
+ Animations properties
12
+ ------------------------------------------ */
13
+ :root {
14
+ /* ---------------------------------------
15
+ Durations
16
+ ------------------------------------------ */
17
+ --lime-motion-default-duration: 200ms;
18
+ --lime-motion-medium1-duration: 250ms;
19
+ --lime-motion-medium2-duration: 300ms;
20
+ --lime-motion-medium4-duration: 400ms;
21
+ --lime-motion-long2-duration: 500ms;
22
+ --lime-bounce-motion-duration: var(--lime-motion-medium2-duration);
23
+ --lime-check-motion-duration: var(--lime-motion-medium4-duration);
24
+ --lime-focus-in-motion-duration: var(--lime-motion-medium2-duration);
25
+ --lime-focus-out-motion-duration: var(--lime-motion-long2-duration);
26
+ --lime-press-motion-duration: var(--lime-motion-medium1-duration);
27
+ --lime-release-motion-duration: var(--lime-motion-medium2-duration);
28
+ /* ---------------------------------------
29
+ Easing functions
30
+ ------------------------------------------ */
31
+ --lime-default-motion-easing-function: ease-out;
32
+ --lime-EIO-motion-easing-function: cubic-bezier(0.2, 0, 0.05, 1);
33
+ --lime-EO-motion-easing-function: cubic-bezier(0.1, 0.6, 0.15, 1);
34
+ --lime-bounce-motion-easing-function: var(--lime-default-motion-easing-function);
35
+ --lime-focus-in-motion-easing-function: var(--lime-EIO-motion-easing-function);
36
+ --lime-focus-out-motion-easing-function: var(--lime-EO-motion-easing-function);
37
+ --lime-press-motion-easing-function: var(--lime-EIO-motion-easing-function);
38
+ --lime-release-motion-easing-function: var(--lime-EO-motion-easing-function);
39
+ /* ---------------------------------------
40
+ Keyframes names
41
+ ------------------------------------------ */
42
+ --lime-bounce-animation-name: bounce-motion;
43
+ --lime-check-animation-name: check-motion;
44
+ /* ---------------------------------------
45
+ Keyframes values
46
+ ------------------------------------------ */
47
+ --lime-bounce-motion-offset-default-value: 0.125rem;
48
+ }
49
+ /* ---------------------------------------
50
+ Keyframes
51
+ ------------------------------------------ */
52
+ /* Bounce
53
+ ------------------------------------------ */
54
+ @keyframes bounce-motion {
55
+ 0% {
56
+ transform: translateX(0);
57
+ }
58
+ 50% {
59
+ transform: translateX(var(--lime-bounce-motion-offset-value, --lime-bounce-motion-offset-default-value));
60
+ }
61
+ 80% {
62
+ transform: translateX(calc(var(--lime-bounce-motion-offset-value, --lime-bounce-motion-offset-default-value) / -2));
63
+ }
64
+ 100% {
65
+ transform: translateX(0);
66
+ }
67
+ }
68
+ /* Check
69
+ ------------------------------------------ */
70
+ @keyframes check-motion {
71
+ 0% {
72
+ transform: translateX(0);
73
+ }
74
+ 100% {
75
+ transform: translateX(100%);
76
+ }
77
+ }
78
+ /* ---------------------------------------
79
+ Motion Variables
80
+ ------------------------------------------ */
81
+ /* ---------------------------------------
82
+ Motion Mixins
83
+ ------------------------------------------ */
1
84
  .checkbox {
2
85
  display: inline-block;
3
86
  position: relative;
@@ -9,6 +92,16 @@
9
92
  position: relative;
10
93
  text-align: center;
11
94
  }
95
+ .checkbox.selected.checkmark .icon::after {
96
+ content: '';
97
+ position: absolute;
98
+ top: 0;
99
+ right: 0;
100
+ bottom: 0;
101
+ left: 0;
102
+ background-color: inherit;
103
+ animation: var(--lime-check-animation-name) var(--lime-check-motion-duration) forwards;
104
+ }
12
105
  .checkbox:global(.neutral).standalone .bg {
13
106
  position: absolute;
14
107
  top: -0.75rem;
@@ -38,8 +131,8 @@
38
131
  }
39
132
  .checkbox:global(.neutral).selected .icon {
40
133
  color: var(--semantic-color-on-surface-main-selected);
41
- background-color: var(--semantic-color-surface-accent);
42
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
134
+ background-color: var(--semantic-color-surface-highlight);
135
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
43
136
  }
44
137
  .checkbox:global(.neutral).indeterminate .icon {
45
138
  color: var(--semantic-color-stroke-selection-inactive);
@@ -61,8 +154,8 @@
61
154
  :global(.spotlight-input-key) .checkbox:global(.neutral):global(.spottable):focus.selected .icon,
62
155
  :global(.spotlight-input-mouse) .checkbox:global(.neutral):global(.spottable):focus.selected .icon {
63
156
  color: var(--semantic-color-on-surface-main-selected);
64
- background-color: var(--semantic-color-surface-accent);
65
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
157
+ background-color: var(--semantic-color-surface-highlight);
158
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
66
159
  }
67
160
  :global(.spotlight-input-key) .checkbox:global(.neutral):global(.spottable):focus.indeterminate .icon,
68
161
  :global(.spotlight-input-mouse) .checkbox:global(.neutral):global(.spottable):focus.indeterminate .icon {
@@ -82,8 +175,8 @@
82
175
  }
83
176
  :global(.spotlight-input-touch) .checkbox:global(.neutral):global(.spottable):active.selected .icon {
84
177
  color: var(--semantic-color-on-surface-main-selected);
85
- background-color: var(--semantic-color-surface-accent);
86
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
178
+ background-color: var(--semantic-color-surface-highlight);
179
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
87
180
  }
88
181
  :global(.spotlight-input-touch) .checkbox:global(.neutral):global(.spottable):active.indeterminate .icon {
89
182
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -110,8 +203,8 @@
110
203
  :global(.spotlight-input-key) .checkbox:global(.neutral)[disabled]:global(.spottable):focus.selected .icon,
111
204
  :global(.spotlight-input-mouse) .checkbox:global(.neutral)[disabled]:global(.spottable):focus.selected .icon {
112
205
  color: var(--semantic-color-on-surface-main-selected);
113
- background-color: var(--semantic-color-surface-accent);
114
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
206
+ background-color: var(--semantic-color-surface-highlight);
207
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
115
208
  }
116
209
  :global(.spotlight-input-key) .checkbox:global(.neutral)[disabled]:global(.spottable):focus.indeterminate .icon,
117
210
  :global(.spotlight-input-mouse) .checkbox:global(.neutral)[disabled]:global(.spottable):focus.indeterminate .icon {
@@ -128,8 +221,8 @@
128
221
  }
129
222
  :global(.spotlight-input-touch) .checkbox:global(.neutral)[disabled]:global(.spottable):active.selected .icon {
130
223
  color: var(--semantic-color-on-surface-main-selected);
131
- background-color: var(--semantic-color-surface-accent);
132
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
224
+ background-color: var(--semantic-color-surface-highlight);
225
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
133
226
  }
134
227
  :global(.spotlight-input-touch) .checkbox:global(.neutral)[disabled]:global(.spottable):active.indeterminate .icon {
135
228
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -168,8 +261,8 @@
168
261
  }
169
262
  :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast).selected .icon {
170
263
  color: var(--semantic-color-on-surface-main-selected);
171
- background-color: var(--semantic-color-surface-accent);
172
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
264
+ background-color: var(--semantic-color-surface-highlight);
265
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
173
266
  }
174
267
  :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast).indeterminate .icon {
175
268
  color: var(--semantic-color-stroke-selection-inactive);
@@ -191,8 +284,8 @@
191
284
  :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):focus.selected .icon,
192
285
  :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):focus.selected .icon {
193
286
  color: var(--semantic-color-on-surface-main-selected);
194
- background-color: var(--semantic-color-surface-accent);
195
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
287
+ background-color: var(--semantic-color-surface-highlight);
288
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
196
289
  }
197
290
  :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):focus.indeterminate .icon,
198
291
  :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):focus.indeterminate .icon {
@@ -212,8 +305,8 @@
212
305
  }
213
306
  :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):active.selected .icon {
214
307
  color: var(--semantic-color-on-surface-main-selected);
215
- background-color: var(--semantic-color-surface-accent);
216
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
308
+ background-color: var(--semantic-color-surface-highlight);
309
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
217
310
  }
218
311
  :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast):global(.spottable):active.indeterminate .icon {
219
312
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -240,8 +333,8 @@
240
333
  :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus.selected .icon,
241
334
  :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus.selected .icon {
242
335
  color: var(--semantic-color-on-surface-main-selected);
243
- background-color: var(--semantic-color-surface-accent);
244
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
336
+ background-color: var(--semantic-color-surface-highlight);
337
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
245
338
  }
246
339
  :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus.indeterminate .icon,
247
340
  :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus.indeterminate .icon {
@@ -258,8 +351,8 @@
258
351
  }
259
352
  :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):active.selected .icon {
260
353
  color: var(--semantic-color-on-surface-main-selected);
261
- background-color: var(--semantic-color-surface-accent);
262
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
354
+ background-color: var(--semantic-color-surface-highlight);
355
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
263
356
  }
264
357
  :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .checkbox:global(.neutral):global(.highContrast)[disabled]:global(.spottable):active.indeterminate .icon {
265
358
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -298,8 +391,8 @@
298
391
  }
299
392
  .checkbox:global(.light).selected .icon {
300
393
  color: var(--semantic-color-on-surface-main-selected);
301
- background-color: var(--semantic-color-surface-accent);
302
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
394
+ background-color: var(--semantic-color-surface-highlight);
395
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
303
396
  }
304
397
  .checkbox:global(.light).indeterminate .icon {
305
398
  color: var(--semantic-color-stroke-selection-inactive);
@@ -321,8 +414,8 @@
321
414
  :global(.spotlight-input-key) .checkbox:global(.light):global(.spottable):focus.selected .icon,
322
415
  :global(.spotlight-input-mouse) .checkbox:global(.light):global(.spottable):focus.selected .icon {
323
416
  color: var(--semantic-color-on-surface-main-selected);
324
- background-color: var(--semantic-color-surface-accent);
325
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
417
+ background-color: var(--semantic-color-surface-highlight);
418
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
326
419
  }
327
420
  :global(.spotlight-input-key) .checkbox:global(.light):global(.spottable):focus.indeterminate .icon,
328
421
  :global(.spotlight-input-mouse) .checkbox:global(.light):global(.spottable):focus.indeterminate .icon {
@@ -342,8 +435,8 @@
342
435
  }
343
436
  :global(.spotlight-input-touch) .checkbox:global(.light):global(.spottable):active.selected .icon {
344
437
  color: var(--semantic-color-on-surface-main-selected);
345
- background-color: var(--semantic-color-surface-accent);
346
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
438
+ background-color: var(--semantic-color-surface-highlight);
439
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
347
440
  }
348
441
  :global(.spotlight-input-touch) .checkbox:global(.light):global(.spottable):active.indeterminate .icon {
349
442
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -370,8 +463,8 @@
370
463
  :global(.spotlight-input-key) .checkbox:global(.light)[disabled]:global(.spottable):focus.selected .icon,
371
464
  :global(.spotlight-input-mouse) .checkbox:global(.light)[disabled]:global(.spottable):focus.selected .icon {
372
465
  color: var(--semantic-color-on-surface-main-selected);
373
- background-color: var(--semantic-color-surface-accent);
374
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
466
+ background-color: var(--semantic-color-surface-highlight);
467
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
375
468
  }
376
469
  :global(.spotlight-input-key) .checkbox:global(.light)[disabled]:global(.spottable):focus.indeterminate .icon,
377
470
  :global(.spotlight-input-mouse) .checkbox:global(.light)[disabled]:global(.spottable):focus.indeterminate .icon {
@@ -388,8 +481,8 @@
388
481
  }
389
482
  :global(.spotlight-input-touch) .checkbox:global(.light)[disabled]:global(.spottable):active.selected .icon {
390
483
  color: var(--semantic-color-on-surface-main-selected);
391
- background-color: var(--semantic-color-surface-accent);
392
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
484
+ background-color: var(--semantic-color-surface-highlight);
485
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
393
486
  }
394
487
  :global(.spotlight-input-touch) .checkbox:global(.light)[disabled]:global(.spottable):active.indeterminate .icon {
395
488
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -433,8 +526,8 @@
433
526
  }
434
527
  .checkbox:global(.game).selected .icon {
435
528
  color: var(--semantic-color-on-surface-main-selected);
436
- background-color: var(--semantic-color-surface-accent);
437
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
529
+ background-color: var(--semantic-color-surface-highlight);
530
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
438
531
  }
439
532
  .checkbox:global(.game).indeterminate .icon {
440
533
  color: var(--semantic-color-stroke-selection-inactive);
@@ -456,8 +549,8 @@
456
549
  :global(.spotlight-input-key) .checkbox:global(.game):global(.spottable):focus.selected .icon,
457
550
  :global(.spotlight-input-mouse) .checkbox:global(.game):global(.spottable):focus.selected .icon {
458
551
  color: var(--semantic-color-on-surface-main-selected);
459
- background-color: var(--semantic-color-surface-accent);
460
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
552
+ background-color: var(--semantic-color-surface-highlight);
553
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
461
554
  }
462
555
  :global(.spotlight-input-key) .checkbox:global(.game):global(.spottable):focus.indeterminate .icon,
463
556
  :global(.spotlight-input-mouse) .checkbox:global(.game):global(.spottable):focus.indeterminate .icon {
@@ -477,8 +570,8 @@
477
570
  }
478
571
  :global(.spotlight-input-touch) .checkbox:global(.game):global(.spottable):active.selected .icon {
479
572
  color: var(--semantic-color-on-surface-main-selected);
480
- background-color: var(--semantic-color-surface-accent);
481
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
573
+ background-color: var(--semantic-color-surface-highlight);
574
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
482
575
  }
483
576
  :global(.spotlight-input-touch) .checkbox:global(.game):global(.spottable):active.indeterminate .icon {
484
577
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -505,8 +598,8 @@
505
598
  :global(.spotlight-input-key) .checkbox:global(.game)[disabled]:global(.spottable):focus.selected .icon,
506
599
  :global(.spotlight-input-mouse) .checkbox:global(.game)[disabled]:global(.spottable):focus.selected .icon {
507
600
  color: var(--semantic-color-on-surface-main-selected);
508
- background-color: var(--semantic-color-surface-accent);
509
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
601
+ background-color: var(--semantic-color-surface-highlight);
602
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
510
603
  }
511
604
  :global(.spotlight-input-key) .checkbox:global(.game)[disabled]:global(.spottable):focus.indeterminate .icon,
512
605
  :global(.spotlight-input-mouse) .checkbox:global(.game)[disabled]:global(.spottable):focus.indeterminate .icon {
@@ -523,8 +616,8 @@
523
616
  }
524
617
  :global(.spotlight-input-touch) .checkbox:global(.game)[disabled]:global(.spottable):active.selected .icon {
525
618
  color: var(--semantic-color-on-surface-main-selected);
526
- background-color: var(--semantic-color-surface-accent);
527
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
619
+ background-color: var(--semantic-color-surface-highlight);
620
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
528
621
  }
529
622
  :global(.spotlight-input-touch) .checkbox:global(.game)[disabled]:global(.spottable):active.indeterminate .icon {
530
623
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -567,8 +660,8 @@
567
660
  }
568
661
  :global(.green) .checkbox:global(.game).selected .icon {
569
662
  color: var(--semantic-color-on-surface-main-selected);
570
- background-color: var(--semantic-color-surface-accent);
571
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
663
+ background-color: var(--semantic-color-surface-highlight);
664
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
572
665
  }
573
666
  :global(.green) .checkbox:global(.game).indeterminate .icon {
574
667
  color: var(--semantic-color-stroke-selection-inactive);
@@ -590,8 +683,8 @@
590
683
  :global(.spotlight-input-key) :global(.green) .checkbox:global(.game):global(.spottable):focus.selected .icon,
591
684
  :global(.spotlight-input-mouse) :global(.green) .checkbox:global(.game):global(.spottable):focus.selected .icon {
592
685
  color: var(--semantic-color-on-surface-main-selected);
593
- background-color: var(--semantic-color-surface-accent);
594
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
686
+ background-color: var(--semantic-color-surface-highlight);
687
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
595
688
  }
596
689
  :global(.spotlight-input-key) :global(.green) .checkbox:global(.game):global(.spottable):focus.indeterminate .icon,
597
690
  :global(.spotlight-input-mouse) :global(.green) .checkbox:global(.game):global(.spottable):focus.indeterminate .icon {
@@ -611,8 +704,8 @@
611
704
  }
612
705
  :global(.spotlight-input-touch) :global(.green) .checkbox:global(.game):global(.spottable):active.selected .icon {
613
706
  color: var(--semantic-color-on-surface-main-selected);
614
- background-color: var(--semantic-color-surface-accent);
615
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
707
+ background-color: var(--semantic-color-surface-highlight);
708
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
616
709
  }
617
710
  :global(.spotlight-input-touch) :global(.green) .checkbox:global(.game):global(.spottable):active.indeterminate .icon {
618
711
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -639,8 +732,8 @@
639
732
  :global(.spotlight-input-key) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):focus.selected .icon,
640
733
  :global(.spotlight-input-mouse) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):focus.selected .icon {
641
734
  color: var(--semantic-color-on-surface-main-selected);
642
- background-color: var(--semantic-color-surface-accent);
643
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
735
+ background-color: var(--semantic-color-surface-highlight);
736
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
644
737
  }
645
738
  :global(.spotlight-input-key) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):focus.indeterminate .icon,
646
739
  :global(.spotlight-input-mouse) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):focus.indeterminate .icon {
@@ -657,8 +750,8 @@
657
750
  }
658
751
  :global(.spotlight-input-touch) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):active.selected .icon {
659
752
  color: var(--semantic-color-on-surface-main-selected);
660
- background-color: var(--semantic-color-surface-accent);
661
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
753
+ background-color: var(--semantic-color-surface-highlight);
754
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
662
755
  }
663
756
  :global(.spotlight-input-touch) :global(.green) .checkbox:global(.game)[disabled]:global(.spottable):active.indeterminate .icon {
664
757
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -701,8 +794,8 @@
701
794
  }
702
795
  :global(.orange) .checkbox:global(.game).selected .icon {
703
796
  color: var(--semantic-color-on-surface-main-selected);
704
- background-color: var(--semantic-color-surface-accent);
705
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
797
+ background-color: var(--semantic-color-surface-highlight);
798
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
706
799
  }
707
800
  :global(.orange) .checkbox:global(.game).indeterminate .icon {
708
801
  color: var(--semantic-color-stroke-selection-inactive);
@@ -724,8 +817,8 @@
724
817
  :global(.spotlight-input-key) :global(.orange) .checkbox:global(.game):global(.spottable):focus.selected .icon,
725
818
  :global(.spotlight-input-mouse) :global(.orange) .checkbox:global(.game):global(.spottable):focus.selected .icon {
726
819
  color: var(--semantic-color-on-surface-main-selected);
727
- background-color: var(--semantic-color-surface-accent);
728
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
820
+ background-color: var(--semantic-color-surface-highlight);
821
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
729
822
  }
730
823
  :global(.spotlight-input-key) :global(.orange) .checkbox:global(.game):global(.spottable):focus.indeterminate .icon,
731
824
  :global(.spotlight-input-mouse) :global(.orange) .checkbox:global(.game):global(.spottable):focus.indeterminate .icon {
@@ -745,8 +838,8 @@
745
838
  }
746
839
  :global(.spotlight-input-touch) :global(.orange) .checkbox:global(.game):global(.spottable):active.selected .icon {
747
840
  color: var(--semantic-color-on-surface-main-selected);
748
- background-color: var(--semantic-color-surface-accent);
749
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
841
+ background-color: var(--semantic-color-surface-highlight);
842
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
750
843
  }
751
844
  :global(.spotlight-input-touch) :global(.orange) .checkbox:global(.game):global(.spottable):active.indeterminate .icon {
752
845
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -773,8 +866,8 @@
773
866
  :global(.spotlight-input-key) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):focus.selected .icon,
774
867
  :global(.spotlight-input-mouse) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):focus.selected .icon {
775
868
  color: var(--semantic-color-on-surface-main-selected);
776
- background-color: var(--semantic-color-surface-accent);
777
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
869
+ background-color: var(--semantic-color-surface-highlight);
870
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
778
871
  }
779
872
  :global(.spotlight-input-key) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):focus.indeterminate .icon,
780
873
  :global(.spotlight-input-mouse) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):focus.indeterminate .icon {
@@ -791,8 +884,8 @@
791
884
  }
792
885
  :global(.spotlight-input-touch) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):active.selected .icon {
793
886
  color: var(--semantic-color-on-surface-main-selected);
794
- background-color: var(--semantic-color-surface-accent);
795
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
887
+ background-color: var(--semantic-color-surface-highlight);
888
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
796
889
  }
797
890
  :global(.spotlight-input-touch) :global(.orange) .checkbox:global(.game)[disabled]:global(.spottable):active.indeterminate .icon {
798
891
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -817,8 +910,8 @@
817
910
  :global(.spotlight-input-key) :global(.neutral):global(.spottable):focus .checkbox.selected .icon,
818
911
  :global(.spotlight-input-mouse) :global(.neutral):global(.spottable):focus .checkbox.selected .icon {
819
912
  color: var(--semantic-color-on-surface-main-selected);
820
- background-color: var(--semantic-color-surface-accent);
821
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
913
+ background-color: var(--semantic-color-surface-highlight);
914
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
822
915
  }
823
916
  :global(.spotlight-input-key) :global(.neutral):global(.spottable):focus .checkbox.indeterminate .icon,
824
917
  :global(.spotlight-input-mouse) :global(.neutral):global(.spottable):focus .checkbox.indeterminate .icon {
@@ -838,8 +931,8 @@
838
931
  }
839
932
  :global(.spotlight-input-touch) :global(.neutral):global(.spottable):active .checkbox.selected .icon {
840
933
  color: var(--semantic-color-on-surface-main-selected);
841
- background-color: var(--semantic-color-surface-accent);
842
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
934
+ background-color: var(--semantic-color-surface-highlight);
935
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
843
936
  }
844
937
  :global(.spotlight-input-touch) :global(.neutral):global(.spottable):active .checkbox.indeterminate .icon {
845
938
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -868,8 +961,8 @@
868
961
  :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus .checkbox.selected .icon,
869
962
  :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus .checkbox.selected .icon {
870
963
  color: var(--semantic-color-on-surface-main-selected);
871
- background-color: var(--semantic-color-surface-accent);
872
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
964
+ background-color: var(--semantic-color-surface-highlight);
965
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
873
966
  }
874
967
  :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus .checkbox.indeterminate .icon,
875
968
  :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus .checkbox.indeterminate .icon {
@@ -889,8 +982,8 @@
889
982
  }
890
983
  :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):active .checkbox.selected .icon {
891
984
  color: var(--semantic-color-on-surface-main-selected);
892
- background-color: var(--semantic-color-surface-accent);
893
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
985
+ background-color: var(--semantic-color-surface-highlight);
986
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
894
987
  }
895
988
  :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):active .checkbox.indeterminate .icon {
896
989
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -919,8 +1012,8 @@
919
1012
  :global(.spotlight-input-key) :global(.light):global(.spottable):focus .checkbox.selected .icon,
920
1013
  :global(.spotlight-input-mouse) :global(.light):global(.spottable):focus .checkbox.selected .icon {
921
1014
  color: var(--semantic-color-on-surface-main-selected);
922
- background-color: var(--semantic-color-surface-accent);
923
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1015
+ background-color: var(--semantic-color-surface-highlight);
1016
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
924
1017
  }
925
1018
  :global(.spotlight-input-key) :global(.light):global(.spottable):focus .checkbox.indeterminate .icon,
926
1019
  :global(.spotlight-input-mouse) :global(.light):global(.spottable):focus .checkbox.indeterminate .icon {
@@ -940,8 +1033,8 @@
940
1033
  }
941
1034
  :global(.spotlight-input-touch) :global(.light):global(.spottable):active .checkbox.selected .icon {
942
1035
  color: var(--semantic-color-on-surface-main-selected);
943
- background-color: var(--semantic-color-surface-accent);
944
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1036
+ background-color: var(--semantic-color-surface-highlight);
1037
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
945
1038
  }
946
1039
  :global(.spotlight-input-touch) :global(.light):global(.spottable):active .checkbox.indeterminate .icon {
947
1040
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -975,8 +1068,8 @@
975
1068
  :global(.spotlight-input-key) :global(.game):global(.spottable):focus .checkbox.selected .icon,
976
1069
  :global(.spotlight-input-mouse) :global(.game):global(.spottable):focus .checkbox.selected .icon {
977
1070
  color: var(--semantic-color-on-surface-main-selected);
978
- background-color: var(--semantic-color-surface-accent);
979
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1071
+ background-color: var(--semantic-color-surface-highlight);
1072
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
980
1073
  }
981
1074
  :global(.spotlight-input-key) :global(.game):global(.spottable):focus .checkbox.indeterminate .icon,
982
1075
  :global(.spotlight-input-mouse) :global(.game):global(.spottable):focus .checkbox.indeterminate .icon {
@@ -996,8 +1089,8 @@
996
1089
  }
997
1090
  :global(.spotlight-input-touch) :global(.game):global(.spottable):active .checkbox.selected .icon {
998
1091
  color: var(--semantic-color-on-surface-main-selected);
999
- background-color: var(--semantic-color-surface-accent);
1000
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1092
+ background-color: var(--semantic-color-surface-highlight);
1093
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1001
1094
  }
1002
1095
  :global(.spotlight-input-touch) :global(.game):global(.spottable):active .checkbox.indeterminate .icon {
1003
1096
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -1030,8 +1123,8 @@
1030
1123
  :global(.spotlight-input-key) :global(.green) :global(.game):global(.spottable):focus .checkbox.selected .icon,
1031
1124
  :global(.spotlight-input-mouse) :global(.green) :global(.game):global(.spottable):focus .checkbox.selected .icon {
1032
1125
  color: var(--semantic-color-on-surface-main-selected);
1033
- background-color: var(--semantic-color-surface-accent);
1034
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1126
+ background-color: var(--semantic-color-surface-highlight);
1127
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1035
1128
  }
1036
1129
  :global(.spotlight-input-key) :global(.green) :global(.game):global(.spottable):focus .checkbox.indeterminate .icon,
1037
1130
  :global(.spotlight-input-mouse) :global(.green) :global(.game):global(.spottable):focus .checkbox.indeterminate .icon {
@@ -1051,8 +1144,8 @@
1051
1144
  }
1052
1145
  :global(.spotlight-input-touch) :global(.green) :global(.game):global(.spottable):active .checkbox.selected .icon {
1053
1146
  color: var(--semantic-color-on-surface-main-selected);
1054
- background-color: var(--semantic-color-surface-accent);
1055
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1147
+ background-color: var(--semantic-color-surface-highlight);
1148
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1056
1149
  }
1057
1150
  :global(.spotlight-input-touch) :global(.green) :global(.game):global(.spottable):active .checkbox.indeterminate .icon {
1058
1151
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -1085,8 +1178,8 @@
1085
1178
  :global(.spotlight-input-key) :global(.orange) :global(.game):global(.spottable):focus .checkbox.selected .icon,
1086
1179
  :global(.spotlight-input-mouse) :global(.orange) :global(.game):global(.spottable):focus .checkbox.selected .icon {
1087
1180
  color: var(--semantic-color-on-surface-main-selected);
1088
- background-color: var(--semantic-color-surface-accent);
1089
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1181
+ background-color: var(--semantic-color-surface-highlight);
1182
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1090
1183
  }
1091
1184
  :global(.spotlight-input-key) :global(.orange) :global(.game):global(.spottable):focus .checkbox.indeterminate .icon,
1092
1185
  :global(.spotlight-input-mouse) :global(.orange) :global(.game):global(.spottable):focus .checkbox.indeterminate .icon {
@@ -1106,8 +1199,8 @@
1106
1199
  }
1107
1200
  :global(.spotlight-input-touch) :global(.orange) :global(.game):global(.spottable):active .checkbox.selected .icon {
1108
1201
  color: var(--semantic-color-on-surface-main-selected);
1109
- background-color: var(--semantic-color-surface-accent);
1110
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1202
+ background-color: var(--semantic-color-surface-highlight);
1203
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1111
1204
  }
1112
1205
  :global(.spotlight-input-touch) :global(.orange) :global(.game):global(.spottable):active .checkbox.indeterminate .icon {
1113
1206
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -1123,18 +1216,18 @@
1123
1216
  }
1124
1217
  :global(.neutral)[disabled].checkbox.selected .icon {
1125
1218
  color: var(--semantic-color-on-surface-main-selected);
1126
- background-color: var(--semantic-color-surface-accent);
1127
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1219
+ background-color: var(--semantic-color-surface-highlight);
1220
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1128
1221
  }
1129
1222
  :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast)[disabled].checkbox.selected .icon {
1130
1223
  color: var(--semantic-color-on-surface-main-selected);
1131
- background-color: var(--semantic-color-surface-accent);
1132
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1224
+ background-color: var(--semantic-color-surface-highlight);
1225
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1133
1226
  }
1134
1227
  :global(.light)[disabled].checkbox.selected .icon {
1135
1228
  color: var(--semantic-color-on-surface-main-selected);
1136
- background-color: var(--semantic-color-surface-accent);
1137
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1229
+ background-color: var(--semantic-color-surface-highlight);
1230
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1138
1231
  }
1139
1232
  :global(.game) {
1140
1233
  --semantic-color-surface-default: #2d224c;
@@ -1143,8 +1236,8 @@
1143
1236
  }
1144
1237
  :global(.game)[disabled].checkbox.selected .icon {
1145
1238
  color: var(--semantic-color-on-surface-main-selected);
1146
- background-color: var(--semantic-color-surface-accent);
1147
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1239
+ background-color: var(--semantic-color-surface-highlight);
1240
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1148
1241
  }
1149
1242
  :global(.green) :global(.game) {
1150
1243
  --semantic-color-surface-default: #1F2C24;
@@ -1152,8 +1245,8 @@
1152
1245
  }
1153
1246
  :global(.green) :global(.game)[disabled].checkbox.selected .icon {
1154
1247
  color: var(--semantic-color-on-surface-main-selected);
1155
- background-color: var(--semantic-color-surface-accent);
1156
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1248
+ background-color: var(--semantic-color-surface-highlight);
1249
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1157
1250
  }
1158
1251
  :global(.orange) :global(.game) {
1159
1252
  --semantic-color-surface-default: #422923;
@@ -1161,8 +1254,8 @@
1161
1254
  }
1162
1255
  :global(.orange) :global(.game)[disabled].checkbox.selected .icon {
1163
1256
  color: var(--semantic-color-on-surface-main-selected);
1164
- background-color: var(--semantic-color-surface-accent);
1165
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1257
+ background-color: var(--semantic-color-surface-highlight);
1258
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1166
1259
  }
1167
1260
  :global(.spotlight-input-key) :global(.neutral):global(.spottable):focus[disabled] .checkbox .bg,
1168
1261
  :global(.spotlight-input-mouse) :global(.neutral):global(.spottable):focus[disabled] .checkbox .bg {
@@ -1171,8 +1264,8 @@
1171
1264
  :global(.spotlight-input-key) :global(.neutral):global(.spottable):focus[disabled] .checkbox.selected .icon,
1172
1265
  :global(.spotlight-input-mouse) :global(.neutral):global(.spottable):focus[disabled] .checkbox.selected .icon {
1173
1266
  color: var(--semantic-color-on-surface-main-selected);
1174
- background-color: var(--semantic-color-surface-accent);
1175
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1267
+ background-color: var(--semantic-color-surface-highlight);
1268
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1176
1269
  }
1177
1270
  :global(.spotlight-input-key) :global(.neutral):global(.spottable):focus[disabled] .checkbox.indeterminate .icon,
1178
1271
  :global(.spotlight-input-mouse) :global(.neutral):global(.spottable):focus[disabled] .checkbox.indeterminate .icon {
@@ -1189,8 +1282,8 @@
1189
1282
  }
1190
1283
  :global(.spotlight-input-touch) :global(.neutral):global(.spottable):active[disabled] .checkbox.selected .icon {
1191
1284
  color: var(--semantic-color-on-surface-main-selected);
1192
- background-color: var(--semantic-color-surface-accent);
1193
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1285
+ background-color: var(--semantic-color-surface-highlight);
1286
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1194
1287
  }
1195
1288
  :global(.spotlight-input-touch) :global(.neutral):global(.spottable):active[disabled] .checkbox.indeterminate .icon {
1196
1289
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -1207,8 +1300,8 @@
1207
1300
  :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .checkbox.selected .icon,
1208
1301
  :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .checkbox.selected .icon {
1209
1302
  color: var(--semantic-color-on-surface-main-selected);
1210
- background-color: var(--semantic-color-surface-accent);
1211
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1303
+ background-color: var(--semantic-color-surface-highlight);
1304
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1212
1305
  }
1213
1306
  :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .checkbox.indeterminate .icon,
1214
1307
  :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .checkbox.indeterminate .icon {
@@ -1225,8 +1318,8 @@
1225
1318
  }
1226
1319
  :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):active[disabled] .checkbox.selected .icon {
1227
1320
  color: var(--semantic-color-on-surface-main-selected);
1228
- background-color: var(--semantic-color-surface-accent);
1229
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1321
+ background-color: var(--semantic-color-surface-highlight);
1322
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1230
1323
  }
1231
1324
  :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast):global(.spottable):active[disabled] .checkbox.indeterminate .icon {
1232
1325
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -1243,8 +1336,8 @@
1243
1336
  :global(.spotlight-input-key) :global(.light):global(.spottable):focus[disabled] .checkbox.selected .icon,
1244
1337
  :global(.spotlight-input-mouse) :global(.light):global(.spottable):focus[disabled] .checkbox.selected .icon {
1245
1338
  color: var(--semantic-color-on-surface-main-selected);
1246
- background-color: var(--semantic-color-surface-accent);
1247
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1339
+ background-color: var(--semantic-color-surface-highlight);
1340
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1248
1341
  }
1249
1342
  :global(.spotlight-input-key) :global(.light):global(.spottable):focus[disabled] .checkbox.indeterminate .icon,
1250
1343
  :global(.spotlight-input-mouse) :global(.light):global(.spottable):focus[disabled] .checkbox.indeterminate .icon {
@@ -1261,8 +1354,8 @@
1261
1354
  }
1262
1355
  :global(.spotlight-input-touch) :global(.light):global(.spottable):active[disabled] .checkbox.selected .icon {
1263
1356
  color: var(--semantic-color-on-surface-main-selected);
1264
- background-color: var(--semantic-color-surface-accent);
1265
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1357
+ background-color: var(--semantic-color-surface-highlight);
1358
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1266
1359
  }
1267
1360
  :global(.spotlight-input-touch) :global(.light):global(.spottable):active[disabled] .checkbox.indeterminate .icon {
1268
1361
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -1284,8 +1377,8 @@
1284
1377
  :global(.spotlight-input-key) :global(.game):global(.spottable):focus[disabled] .checkbox.selected .icon,
1285
1378
  :global(.spotlight-input-mouse) :global(.game):global(.spottable):focus[disabled] .checkbox.selected .icon {
1286
1379
  color: var(--semantic-color-on-surface-main-selected);
1287
- background-color: var(--semantic-color-surface-accent);
1288
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1380
+ background-color: var(--semantic-color-surface-highlight);
1381
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1289
1382
  }
1290
1383
  :global(.spotlight-input-key) :global(.game):global(.spottable):focus[disabled] .checkbox.indeterminate .icon,
1291
1384
  :global(.spotlight-input-mouse) :global(.game):global(.spottable):focus[disabled] .checkbox.indeterminate .icon {
@@ -1302,8 +1395,8 @@
1302
1395
  }
1303
1396
  :global(.spotlight-input-touch) :global(.game):global(.spottable):active[disabled] .checkbox.selected .icon {
1304
1397
  color: var(--semantic-color-on-surface-main-selected);
1305
- background-color: var(--semantic-color-surface-accent);
1306
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1398
+ background-color: var(--semantic-color-surface-highlight);
1399
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1307
1400
  }
1308
1401
  :global(.spotlight-input-touch) :global(.game):global(.spottable):active[disabled] .checkbox.indeterminate .icon {
1309
1402
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -1324,8 +1417,8 @@
1324
1417
  :global(.spotlight-input-key) :global(.green) :global(.game):global(.spottable):focus[disabled] .checkbox.selected .icon,
1325
1418
  :global(.spotlight-input-mouse) :global(.green) :global(.game):global(.spottable):focus[disabled] .checkbox.selected .icon {
1326
1419
  color: var(--semantic-color-on-surface-main-selected);
1327
- background-color: var(--semantic-color-surface-accent);
1328
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1420
+ background-color: var(--semantic-color-surface-highlight);
1421
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1329
1422
  }
1330
1423
  :global(.spotlight-input-key) :global(.green) :global(.game):global(.spottable):focus[disabled] .checkbox.indeterminate .icon,
1331
1424
  :global(.spotlight-input-mouse) :global(.green) :global(.game):global(.spottable):focus[disabled] .checkbox.indeterminate .icon {
@@ -1342,8 +1435,8 @@
1342
1435
  }
1343
1436
  :global(.spotlight-input-touch) :global(.green) :global(.game):global(.spottable):active[disabled] .checkbox.selected .icon {
1344
1437
  color: var(--semantic-color-on-surface-main-selected);
1345
- background-color: var(--semantic-color-surface-accent);
1346
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1438
+ background-color: var(--semantic-color-surface-highlight);
1439
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1347
1440
  }
1348
1441
  :global(.spotlight-input-touch) :global(.green) :global(.game):global(.spottable):active[disabled] .checkbox.indeterminate .icon {
1349
1442
  color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -1364,8 +1457,8 @@
1364
1457
  :global(.spotlight-input-key) :global(.orange) :global(.game):global(.spottable):focus[disabled] .checkbox.selected .icon,
1365
1458
  :global(.spotlight-input-mouse) :global(.orange) :global(.game):global(.spottable):focus[disabled] .checkbox.selected .icon {
1366
1459
  color: var(--semantic-color-on-surface-main-selected);
1367
- background-color: var(--semantic-color-surface-accent);
1368
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1460
+ background-color: var(--semantic-color-surface-highlight);
1461
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1369
1462
  }
1370
1463
  :global(.spotlight-input-key) :global(.orange) :global(.game):global(.spottable):focus[disabled] .checkbox.indeterminate .icon,
1371
1464
  :global(.spotlight-input-mouse) :global(.orange) :global(.game):global(.spottable):focus[disabled] .checkbox.indeterminate .icon {
@@ -1382,8 +1475,8 @@
1382
1475
  }
1383
1476
  :global(.spotlight-input-touch) :global(.orange) :global(.game):global(.spottable):active[disabled] .checkbox.selected .icon {
1384
1477
  color: var(--semantic-color-on-surface-main-selected);
1385
- background-color: var(--semantic-color-surface-accent);
1386
- box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
1478
+ background-color: var(--semantic-color-surface-highlight);
1479
+ box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
1387
1480
  }
1388
1481
  :global(.spotlight-input-touch) :global(.orange) :global(.game):global(.spottable):active[disabled] .checkbox.indeterminate .icon {
1389
1482
  color: var(--semantic-color-stroke-selection-inactive-focused);