@enact/limestone 1.3.0 → 1.10.0

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 (200) 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 +13 -2
  7. package/Alert/Alert.js +39 -5
  8. package/Alert/Alert.module.css +48 -1
  9. package/Alert/tests/Alert-specs.js +91 -0
  10. package/BodyText/BodyText.d.ts +5 -4
  11. package/BodyText/BodyText.module.css +7 -7
  12. package/Button/Button.d.ts +17 -12
  13. package/Button/Button.js +1 -1
  14. package/Button/Button.module.css +195 -268
  15. package/Button/tests/Button-specs.js +26 -0
  16. package/CHANGELOG.md +254 -0
  17. package/Card/Card.d.ts +40 -12
  18. package/Card/Card.js +164 -28
  19. package/Card/Card.module.css +277 -58
  20. package/Card/tests/Card-specs.js +67 -3
  21. package/Checkbox/Checkbox.d.ts +8 -7
  22. package/Checkbox/Checkbox.js +3 -1
  23. package/Checkbox/Checkbox.module.css +213 -120
  24. package/Checkbox/tests/Checkbox-specs.js +1 -1
  25. package/CheckboxItem/CheckboxItem.d.ts +22 -7
  26. package/CheckboxItem/CheckboxItem.js +71 -4
  27. package/Chips/Chip.js +72 -13
  28. package/Chips/Chip.module.css +3 -3
  29. package/Chips/Chips.js +37 -17
  30. package/Chips/Chips.module.css +1 -1
  31. package/Chips/tests/Chip-specs.js +43 -13
  32. package/Chips/tests/Chips-specs.js +31 -21
  33. package/ColorPicker/ColorPicker.js +27 -25
  34. package/ContextualMenuDecorator/ContextualMenuDecorator.d.ts +4 -5
  35. package/ContextualPopupDecorator/ContextualPopup.module.css +34 -34
  36. package/ContextualPopupDecorator/ContextualPopupDecorator.js +567 -549
  37. package/DatePicker/DatePicker.d.ts +4 -5
  38. package/DayPicker/DayPicker.d.ts +8 -7
  39. package/DayPicker/DaySelectorDecorator.js +12 -7
  40. package/Dropdown/Dropdown.d.ts +11 -13
  41. package/Dropdown/Dropdown.module.css +13 -9
  42. package/Dropdown/DropdownList.js +80 -54
  43. package/FixedPopupPanels/FixedPopupPanels.d.ts +4 -2
  44. package/FixedPopupPanels/FixedPopupPanels.module.css +18 -18
  45. package/FlexiblePopupPanels/FlexiblePopupPanels.module.css +23 -23
  46. package/FlexiblePopupPanels/useNavButtonFocus.js +7 -10
  47. package/FormCheckboxItem/FormCheckboxItem.d.ts +5 -4
  48. package/Heading/Heading.d.ts +9 -8
  49. package/Heading/Heading.js +2 -2
  50. package/Heading/Heading.module.css +5 -5
  51. package/Icon/Icon.d.ts +15 -4
  52. package/Icon/Icon.js +49 -2
  53. package/Icon/Icon.module.css +1 -1
  54. package/Icon/IconList.js +27 -1
  55. package/IconItem/IconItem.d.ts +13 -12
  56. package/IconItem/IconItem.js +15 -0
  57. package/IconItem/IconItem.module.css +107 -1
  58. package/IconItem/tests/IconItem-specs.js +30 -1
  59. package/Image/Image.d.ts +5 -4
  60. package/Image/Image.js +6 -4
  61. package/ImageItem/ImageItem.d.ts +11 -10
  62. package/ImageItem/ImageItem.js +37 -31
  63. package/ImageItem/ImageItem.module.css +30 -30
  64. package/ImageItem/tests/ImageItem-specs.js +3 -10
  65. package/Input/Input.js +21 -3
  66. package/Input/Input.module.css +37 -8
  67. package/Input/InputField.js +79 -24
  68. package/Input/InputField.module.css +273 -41
  69. package/Input/InputFieldDecoratorIcon.js +1 -0
  70. package/Input/InputFieldSpotlightDecorator.js +257 -228
  71. package/Input/index.d.ts +120 -111
  72. package/Input/tests/Input-specs.js +26 -0
  73. package/Input/tests/InputField-specs.js +170 -3
  74. package/Input/tests/InputPopup-specs.js +1 -1
  75. package/Item/Item.d.ts +16 -9
  76. package/Item/Item.js +20 -2
  77. package/Item/Item.module.css +1 -1
  78. package/KeyGuide/KeyGuide.d.ts +8 -7
  79. package/KeyGuide/KeyGuide.js +29 -27
  80. package/KeyGuide/KeyGuide.module.css +25 -1
  81. package/Marquee/Marquee.d.ts +2 -4
  82. package/MediaOverlay/MediaOverlay.d.ts +12 -11
  83. package/MediaOverlay/MediaOverlay.js +43 -21
  84. package/MediaOverlay/MediaOverlay.module.css +114 -15
  85. package/MediaOverlay/tests/MediaOverlay-specs.js +29 -0
  86. package/MediaPlayer/MediaControls.js +195 -13
  87. package/MediaPlayer/MediaControls.module.css +3 -2
  88. package/MediaPlayer/MediaSlider.module.css +7 -20
  89. package/MediaPlayer/index.d.ts +59 -7
  90. package/MediaPlayer/tests/util-specs.js +4 -1
  91. package/PageViews/PageViews.js +232 -82
  92. package/PageViews/PageViews.module.css +3 -0
  93. package/PageViews/PageViewsRouter.js +100 -42
  94. package/PageViews/tests/PageViews-specs.js +171 -0
  95. package/Panels/Header.js +54 -34
  96. package/Panels/Header.module.css +83 -31
  97. package/Panels/Panel.module.css +1 -1
  98. package/Panels/index.d.ts +7 -8
  99. package/Picker/Picker.d.ts +4 -5
  100. package/Picker/Picker.module.css +2 -2
  101. package/Popup/Popup.js +245 -242
  102. package/Popup/Popup.module.css +24 -24
  103. package/PopupTabLayout/PopupTabLayout.d.ts +5 -7
  104. package/PopupTabLayout/PopupTabLayout.js +26 -18
  105. package/PopupTabLayout/PopupTabLayout.module.css +53 -16
  106. package/PopupTabLayout/PopupTabLayoutStateContext.js +8 -0
  107. package/ProgressBar/ProgressBar.d.ts +5 -4
  108. package/ProgressBar/ProgressBarTooltip.module.css +12 -12
  109. package/ProgressButton/ProgressButton.d.ts +4 -5
  110. package/QuickGuidePanels/QuickGuidePanels.module.css +2 -2
  111. package/RadioItem/RadioItem.d.ts +18 -5
  112. package/RadioItem/RadioItem.js +69 -2
  113. package/RadioItem/RadioItem.module.css +36 -36
  114. package/RangePicker/RangePicker.module.css +2 -2
  115. package/Scroller/EditableWrapper.js +28 -18
  116. package/Scroller/Scroller.d.ts +20 -16
  117. package/Scroller/Scroller.js +20 -13
  118. package/Scroller/Scroller.module.css +4 -4
  119. package/Scroller/useThemeScroller.js +3 -3
  120. package/Slider/Slider.d.ts +20 -14
  121. package/Slider/Slider.js +71 -14
  122. package/Slider/Slider.module.css +464 -91
  123. package/Slider/SliderBehaviorDecorator.js +16 -14
  124. package/Slider/tests/Slider-specs.js +53 -1
  125. package/Slider/utils.js +23 -7
  126. package/Spinner/Spinner.d.ts +5 -4
  127. package/Spinner/Spinner.js +10 -8
  128. package/Spinner/Spinner.module.css +9 -9
  129. package/Steps/Steps.d.ts +5 -4
  130. package/Steps/Steps.js +9 -5
  131. package/Switch/Switch.d.ts +8 -7
  132. package/Switch/Switch.module.css +100 -13
  133. package/SwitchItem/SwitchItem.d.ts +9 -6
  134. package/TabLayout/RefocusDecorator.js +26 -18
  135. package/TabLayout/TabGroup.js +3 -2
  136. package/TabLayout/TabGroup.module.css +2 -2
  137. package/TabLayout/TabLayout.d.ts +6 -0
  138. package/TabLayout/TabLayout.js +11 -1
  139. package/TabLayout/TabLayout.module.css +18 -0
  140. package/TabLayout/tests/TabGroup-specs.js +1 -1
  141. package/TabLayout/tests/TabLayout-specs.js +52 -0
  142. package/ThemeDecorator/AccessibilityDecorator.js +12 -11
  143. package/ThemeDecorator/I18nFontDecorator.js +6 -4
  144. package/ThemeDecorator/ThemeDecorator.d.ts +16 -10
  145. package/ThemeDecorator/ThemeDecorator.js +24 -9
  146. package/ThemeDecorator/fontGenerator.js +1 -1
  147. package/ThemeDecorator/screenTypes.json +1 -0
  148. package/TimePicker/TimePicker.module.css +1 -1
  149. package/TimePicker/TimePickerBase.js +5 -3
  150. package/TooltipDecorator/Tooltip.module.css +1 -2
  151. package/TooltipDecorator/TooltipDecorator.js +12 -7
  152. package/TooltipDecorator/tests/useTooltip-specs.js +5 -2
  153. package/TooltipDecorator/tests/util-specs.js +12 -0
  154. package/TooltipDecorator/useTooltip.js +1 -1
  155. package/TooltipDecorator/util.js +18 -11
  156. package/VideoPlayer/Feedback.js +3 -0
  157. package/VideoPlayer/Feedback.module.css +5 -9
  158. package/VideoPlayer/FeedbackIcons.js +1 -1
  159. package/VideoPlayer/FeedbackTooltip.module.css +55 -11
  160. package/VideoPlayer/VideoPlayer.d.ts +44 -18
  161. package/VideoPlayer/VideoPlayer.js +153 -47
  162. package/VideoPlayer/VideoPlayer.module.css +28 -11
  163. package/VirtualList/VirtualList.d.ts +9 -2
  164. package/VirtualList/VirtualList.js +51 -24
  165. package/VirtualList/tests/VirtualGridList-translate-specs.js +3 -0
  166. package/VirtualList/tests/VirtualList-specs.js +28 -1
  167. package/VirtualList/tests/VirtualList-translate-specs.js +4 -1
  168. package/VirtualList/useSpotlight.js +1 -1
  169. package/WizardPanels/WizardPanels.module.css +2 -2
  170. package/WizardPanels/index.d.ts +4 -2
  171. package/fonts/Limestone_Icons.ttf +0 -0
  172. package/internal/$L/$L.js +3 -3
  173. package/internal/AsyncRenderChildren/AsyncRenderChildren.js +9 -5
  174. package/internal/AsyncRenderChildren/tests/AsyncRenderChildren-specs.js +4 -1
  175. package/internal/DateComponentPicker/DateComponentPicker.module.css +2 -2
  176. package/internal/DateTime/DateTime.module.css +1 -0
  177. package/internal/DateTime/DateTimeDecorator.js +5 -4
  178. package/internal/Panels/PanelsRouter.js +48 -31
  179. package/internal/Panels/useAutoFocus.js +10 -6
  180. package/internal/Panels/useFocusOnTransition.js +4 -3
  181. package/internal/Picker/Picker.js +7 -5
  182. package/internal/Picker/Picker.module.css +2 -2
  183. package/internal/Picker/SpottablePicker.js +15 -13
  184. package/internal/SharedStateDecorator/SharedStateDecorator.js +78 -99
  185. package/internal/validators/validators.js +21 -2
  186. package/package.json +18 -15
  187. package/styles/colors-highcontrast.less +9 -1
  188. package/styles/colors.less +12 -7
  189. package/styles/motion-mixins.less +66 -0
  190. package/styles/motions.less +78 -0
  191. package/styles/variables.less +176 -150
  192. package/useScroll/HoverToScroll.js +23 -17
  193. package/useScroll/Scrollbar.js +14 -10
  194. package/useScroll/ScrollbarPlaceholder.js +3 -5
  195. package/useScroll/ScrollbarTrack.js +7 -5
  196. package/useScroll/ScrollbarTrack.module.css +8 -8
  197. package/useScroll/useEvent.js +14 -3
  198. package/useScroll/useScroll.js +12 -2
  199. package/useScroll/useScroll.module.css +6 -6
  200. 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);