@enact/limestone 1.3.0 → 1.9.4

package/Icon/IconList.js

@@ -79,8 +79,12 @@ var _default = exports["default"] = {
   // pausejumpbackward
   jumpforward: 0x0EFFE7,
   // indicator_end
+  next: 0x0EFFE7,
+  // indicator_end
   jumpbackward: 0x0EFFE8,
   // indicator_begin
+  previous: 0x0EFFE8,
+  // indicator_begin
   skip: 0x0EFFE9,
   // skip
   list: 0x0EFFEB,
@@ -607,5 +611,25 @@ var _default = exports["default"] = {
   // soundbar_line
   jumpforward2: 0x0F01ED,
   // jumpforward
-  jumpbackward2: 0x0F01EE // jumpbackward
+  jumpbackward2: 0x0F01EE,
+  // jumpbackward
+  link2: 0x0F01EF,
+  // Link
+  btspeakermute: 0x0F01F0,
+  // bt_speaker_mute
+  system: 0x0F01F1,
+  // system
+  remotecontrolsetting: 0x0F01F2,
+  // remote_control_setting
+  warning: 0x0F01F3,
+  // warning
+  filepdf: 0x0F01F4,
+  // file_pdf
+  filedoc: 0x0F01F5,
+  // file_doc
+  filexls: 0x0F01F6,
+  // file_xls
+  subtitleru: 0x10017F,
+  // subtitleru
+  mypageru: 0x0F01F7 // mypageru
 };

package/IconItem/IconItem.d.ts

@@ -18,11 +18,11 @@ The following properties should be provided:
  * *  `height`  - The height of the image
  * *  `width`  - The width of the image
  */
-  size: object /**
+  size: object; /**
  * Source for the image.
 String value or Object of values used to determine which image will appear on
 a specific screenSize.
- */;
+ */
   src: string | object;
 }
 export interface IconItemBaseProps {
@@ -103,20 +103,21 @@ export class IconItemBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, IconItemBaseProps>
 > {}
 
-export interface IconItemDecoratorProps
-  extends Merge<
-    Merge<
-      limestone_Marquee_MarqueeControllerProps,
-      spotlight_Spottable_SpottableProps
-    >,
-    limestone_Skinnable_SkinnableProps
-  > {}
+export interface IconItemDecoratorProps extends Merge<
+  Merge<
+    limestone_Marquee_MarqueeControllerProps,
+    spotlight_Spottable_SpottableProps
+  >,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function IconItemDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & IconItemDecoratorProps>;
 
-export interface IconItemProps
-  extends Merge<IconItemBaseProps, IconItemDecoratorProps> {}
+export interface IconItemProps extends Merge<
+  IconItemBaseProps,
+  IconItemDecoratorProps
+> {}
 /**
  * A limestone-styled icon item, Marquee and Spottable applied.
  * 

package/IconItem/IconItem.js

@@ -14,6 +14,7 @@ var _Image = _interopRequireDefault(require("../Image"));
 var _Marquee = require("../Marquee");
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _IconItemModule = _interopRequireDefault(require("./IconItem.module.css"));
+var _Touchable = _interopRequireDefault(require("@enact/ui/Touchable"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "disabled"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -191,6 +192,14 @@ var IconItemBase = exports.IconItemBase = (0, _kind["default"])({
      * @private
      */
     order: _propTypes["default"].number,
+    /**
+     * Indicates if the component is pressed.
+     *
+     * @type {Boolean}
+     * @default false
+     * @private
+     */
+    pressed: _propTypes["default"].bool,
     /**
      * Title text showing below the icon.
      *
@@ -211,6 +220,7 @@ var IconItemBase = exports.IconItemBase = (0, _kind["default"])({
     'data-webos-voice-intent': 'Select',
     labelColor: 'light',
     labelOn: 'render',
+    pressed: false,
     titleOn: 'render'
   },
   styles: {
@@ -224,11 +234,13 @@ var IconItemBase = exports.IconItemBase = (0, _kind["default"])({
         label = _ref2.label,
         labelColor = _ref2.labelColor,
         labelOn = _ref2.labelOn,
+        pressed = _ref2.pressed,
         styler = _ref2.styler,
         title = _ref2.title,
         titleOn = _ref2.titleOn;
       return styler.append({
         bordered: bordered,
+        pressed: pressed,
         hasLabel: !!label,
         hasTitle: !!title,
         labelOnFocus: labelOn === 'focus',
@@ -310,6 +322,7 @@ var IconItemBase = exports.IconItemBase = (0, _kind["default"])({
     delete rest.label;
     delete rest.labelColor;
     delete rest.labelOn;
+    delete rest.pressed;
     delete rest.title;
     delete rest.titleOn;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
@@ -333,6 +346,8 @@ var IconItemBase = exports.IconItemBase = (0, _kind["default"])({
  */
 var IconItemDecorator = exports.IconItemDecorator = (0, _compose["default"])((0, _Marquee.MarqueeController)({
   marqueeOnFocus: true
+}), (0, _Touchable["default"])({
+  activeProp: 'pressed'
 }), _Spottable["default"], _Skinnable["default"]);
 
 /**

package/IconItem/IconItem.module.css

@@ -1,6 +1,89 @@
+/* ---------------------------------------
+Animations
+------------------------------------------ */
+:root {
+  /* Bounce
+	------------------------------------------ */
+  --lime-bounce-motion: var(--lime-bounce-animation-name) var(--lime-bounce-motion-duration) var(--lime-bounce-motion-easing-function);
+  --lime-check-motion: var(--lime-check-animation-name) var(--lime-check-motion-duration) forwards;
+}
+/* ---------------------------------------
+Animations properties
+------------------------------------------ */
+:root {
+  /* ---------------------------------------
+	Durations
+	------------------------------------------ */
+  --lime-motion-default-duration: 200ms;
+  --lime-motion-medium1-duration: 250ms;
+  --lime-motion-medium2-duration: 300ms;
+  --lime-motion-medium4-duration: 400ms;
+  --lime-motion-long2-duration: 500ms;
+  --lime-bounce-motion-duration: var(--lime-motion-medium2-duration);
+  --lime-check-motion-duration: var(--lime-motion-medium4-duration);
+  --lime-focus-in-motion-duration: var(--lime-motion-medium2-duration);
+  --lime-focus-out-motion-duration: var(--lime-motion-long2-duration);
+  --lime-press-motion-duration: var(--lime-motion-medium1-duration);
+  --lime-release-motion-duration: var(--lime-motion-medium2-duration);
+  /* ---------------------------------------
+	Easing functions
+	------------------------------------------ */
+  --lime-default-motion-easing-function: ease-out;
+  --lime-EIO-motion-easing-function: cubic-bezier(0.2, 0, 0.05, 1);
+  --lime-EO-motion-easing-function: cubic-bezier(0.1, 0.6, 0.15, 1);
+  --lime-bounce-motion-easing-function: var(--lime-default-motion-easing-function);
+  --lime-focus-in-motion-easing-function: var(--lime-EIO-motion-easing-function);
+  --lime-focus-out-motion-easing-function: var(--lime-EO-motion-easing-function);
+  --lime-press-motion-easing-function: var(--lime-EIO-motion-easing-function);
+  --lime-release-motion-easing-function: var(--lime-EO-motion-easing-function);
+  /* ---------------------------------------
+	Keyframes names
+	------------------------------------------ */
+  --lime-bounce-animation-name: bounce-motion;
+  --lime-check-animation-name: check-motion;
+  /* ---------------------------------------
+	Keyframes values
+	------------------------------------------ */
+  --lime-bounce-motion-offset-default-value: 0.125rem;
+}
+/* ---------------------------------------
+Keyframes
+------------------------------------------ */
+/* Bounce
+	------------------------------------------ */
+@keyframes bounce-motion {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(var(--lime-bounce-motion-offset-value, --lime-bounce-motion-offset-default-value));
+  }
+  80% {
+    transform: translateX(calc(var(--lime-bounce-motion-offset-value, --lime-bounce-motion-offset-default-value) / -2));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+/* Check
+	------------------------------------------ */
+@keyframes check-motion {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+/* ---------------------------------------
+Motion Variables
+------------------------------------------ */
+/* ---------------------------------------
+Motion Mixins
+------------------------------------------ */
 .iconItem {
   position: relative;
-  transition: transform 200ms ease-in-out;
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
   will-change: transform;
   height: 5.33333rem;
   width: 6.95833rem;
@@ -57,6 +140,7 @@
 :global(.spotlight-input-key) .iconItem:global(.spottable):focus,
 :global(.spotlight-input-mouse) .iconItem:global(.spottable):focus {
   transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) .iconItem:global(.spottable):focus.labelOnFocus .label,
 :global(.spotlight-input-mouse) .iconItem:global(.spottable):focus.labelOnFocus .label,
@@ -70,6 +154,7 @@
 }
 :global(.spotlight-input-touch) .iconItem:global(.spottable):active {
   transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-touch) .iconItem:global(.spottable):active.labelOnFocus .label,
 :global(.spotlight-input-touch) .iconItem:global(.spottable):active.labelOnFocus .labelContainer {
@@ -78,6 +163,27 @@
 :global(.spotlight-input-touch) .iconItem:global(.spottable):active.titleOnFocus .title {
   visibility: visible;
 }
+:global(.spotlight-input-key) .iconItem:not([disabled]):global(.spottable):focus.pressed,
+:global(.spotlight-input-mouse) .iconItem:not([disabled]):global(.spottable):focus.pressed,
+:global(.spotlight-input-key) .iconItem:not([disabled]):global(.spottable):focus:active,
+:global(.spotlight-input-mouse) .iconItem:not([disabled]):global(.spottable):focus:active {
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-key) .iconItem:not([disabled]):global(.spottable):focus:not(.pressed),
+:global(.spotlight-input-mouse) .iconItem:not([disabled]):global(.spottable):focus:not(.pressed) {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
+}
+:global(.spotlight-input-touch) .iconItem:not([disabled]):global(.spottable):active.pressed,
+:global(.spotlight-input-touch) .iconItem:not([disabled]):global(.spottable):active:active {
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-touch) .iconItem:not([disabled]):global(.spottable):active:not(.pressed) {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
+}
 :global(.noAnimation) .iconItem {
   transition: none;
 }

package/Image/Image.d.ts

@@ -32,14 +32,15 @@ export class ImageBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, ImageBaseProps>
 > {}
 
-export interface ImageDecoratorProps
-  extends limestone_Skinnable_SkinnableProps {}
+export interface ImageDecoratorProps extends limestone_Skinnable_SkinnableProps {}
 export function ImageDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & ImageDecoratorProps>;
 
-export interface ImageProps
-  extends Merge<ImageBaseProps, ImageDecoratorProps> {}
+export interface ImageProps extends Merge<
+  ImageBaseProps,
+  ImageDecoratorProps
+> {}
 /**
  * A Limestone-styled image component
  * ```

package/ImageItem/ImageItem.d.ts

@@ -99,20 +99,21 @@ export class ImageItemBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, ImageItemBaseProps>
 > {}
 
-export interface ImageItemDecoratorProps
-  extends Merge<
-    Merge<
-      limestone_Marquee_MarqueeControllerProps,
-      spotlight_Spottable_SpottableProps
-    >,
-    limestone_Skinnable_SkinnableProps
-  > {}
+export interface ImageItemDecoratorProps extends Merge<
+  Merge<
+    limestone_Marquee_MarqueeControllerProps,
+    spotlight_Spottable_SpottableProps
+  >,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function ImageItemDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & ImageItemDecoratorProps>;
 
-export interface ImageItemProps
-  extends Merge<ImageItemBaseProps, ImageItemDecoratorProps> {}
+export interface ImageItemProps extends Merge<
+  ImageItemBaseProps,
+  ImageItemDecoratorProps
+> {}
 /**
  * A limestone-styled image item, Marquee and Spottable applied.
  * 

package/ImageItem/ImageItem.js

@@ -11,6 +11,7 @@ var _ImageItem = require("@enact/ui/ImageItem");
 var _Layout = require("@enact/ui/Layout");
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _$L = _interopRequireDefault(require("../internal/$L"));
 var _Checkbox = require("../Checkbox");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Image = _interopRequireDefault(require("../Image"));
@@ -225,15 +226,24 @@ var ImageItemBase = exports.ImageItemBase = (0, _kind["default"])({
     publicClassNames: ['imageItem', 'caption', 'fullImage', 'horizontal', 'image', 'imageIcon', 'label', 'selected', 'selectionIcon', 'vertical']
   },
   computed: {
-    children: function children(_ref) {
-      var centered = _ref.centered,
-        _children = _ref.children,
-        css = _ref.css,
-        index = _ref['data-index'],
-        imageIconComponent = _ref.imageIconComponent,
-        imageIconSrc = _ref.imageIconSrc,
+    'aria-label': function ariaLabel(_ref) {
+      var customAriaLabel = _ref['aria-label'],
+        children = _ref.children,
         label = _ref.label,
-        orientation = _ref.orientation;
+        selected = _ref.selected,
+        showSelection = _ref.showSelection;
+      var defaultAriaLabel = "".concat(children || '').concat(label ? " ".concat(label) : '');
+      return "".concat(customAriaLabel || defaultAriaLabel).concat(selected && showSelection ? ' ' + (0, _$L["default"])('Selected') : '');
+    },
+    children: function children(_ref2) {
+      var centered = _ref2.centered,
+        _children = _ref2.children,
+        css = _ref2.css,
+        index = _ref2['data-index'],
+        imageIconComponent = _ref2.imageIconComponent,
+        imageIconSrc = _ref2.imageIconSrc,
+        label = _ref2.label,
+        orientation = _ref2.orientation;
       var hasImageIcon = imageIconSrc && orientation === 'vertical';
       if (!hasImageIcon && !_children && !label) return;
       var alignment = orientation === 'vertical' && centered ? {
@@ -270,23 +280,23 @@ var ImageItemBase = exports.ImageItemBase = (0, _kind["default"])({
         children: captions
       }) : captions;
     },
-    className: function className(_ref2) {
-      var children = _ref2.children,
-        imageIconSrc = _ref2.imageIconSrc,
-        label = _ref2.label,
-        orientation = _ref2.orientation,
-        styler = _ref2.styler,
-        wideImage = _ref2.wideImage;
+    className: function className(_ref3) {
+      var children = _ref3.children,
+        imageIconSrc = _ref3.imageIconSrc,
+        label = _ref3.label,
+        orientation = _ref3.orientation,
+        styler = _ref3.styler,
+        wideImage = _ref3.wideImage;
       return styler.append({
         fullImage: orientation === 'vertical' && !children && !label && !imageIconSrc,
         wideImage: orientation === 'horizontal' && wideImage
       });
     },
-    selectionComponent: function selectionComponent(_ref3) {
-      var css = _ref3.css,
-        orientation = _ref3.orientation,
-        selected = _ref3.selected,
-        SelectionComponent = _ref3.selectionComponent;
+    selectionComponent: function selectionComponent(_ref4) {
+      var css = _ref4.css,
+        orientation = _ref4.orientation,
+        selected = _ref4.selected,
+        SelectionComponent = _ref4.selectionComponent;
       if (SelectionComponent) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectionComponent, {});
       } else if (orientation === 'vertical') {
@@ -303,23 +313,19 @@ var ImageItemBase = exports.ImageItemBase = (0, _kind["default"])({
       }
     }
   },
-  render: function render(_ref4) {
-    var css = _ref4.css,
-      disabled = _ref4.disabled,
-      orientation = _ref4.orientation,
-      SelectionComponent = _ref4.selectionComponent,
-      showSelection = _ref4.showSelection,
-      rest = _objectWithoutProperties(_ref4, _excluded);
+  render: function render(_ref5) {
+    var css = _ref5.css,
+      disabled = _ref5.disabled,
+      orientation = _ref5.orientation,
+      SelectionComponent = _ref5.selectionComponent,
+      showSelection = _ref5.showSelection,
+      rest = _objectWithoutProperties(_ref5, _excluded);
     var isSlotBefore = orientation === 'horizontal' && showSelection;
     delete rest.centered;
     delete rest.imageIconComponent;
     delete rest.imageIconSrc;
     delete rest.label;
     delete rest.wideImage;
-    if (showSelection) {
-      rest['role'] = 'checkbox';
-      rest['aria-checked'] = rest.selected;
-    }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageItem.ImageItem, _objectSpread(_objectSpread({}, rest), {}, {
       "aria-disabled": disabled,
       css: css,

package/ImageItem/ImageItem.module.css

@@ -20,16 +20,16 @@
   line-height: 1.75rem;
 }
 :global(.enact-locale-km) .imageItem .caption {
-  font-size: 1.125rem;
+  font-size: var(--primitive-font-size-54);
 }
 :global(.enact-locale-si) .imageItem .caption {
-  font-size: 1.125rem;
+  font-size: var(--primitive-font-size-54);
 }
 :global(.enact-locale-th) .imageItem .caption {
-  font-size: 1.125rem;
+  font-size: var(--primitive-font-size-54);
 }
 :global(.enact-locale-vi) .imageItem .caption {
-  font-size: 1.125rem;
+  font-size: var(--primitive-font-size-54);
 }
 .imageItem .label {
   font-size: var(--primitive-font-size-48);
@@ -37,20 +37,20 @@
   line-height: 1.25rem;
 }
 :global(.enact-locale-km) .imageItem .label {
-  font-size: 0.75rem;
+  font-size: var(--primitive-font-size-36);
 }
 :global(.enact-locale-si) .imageItem .label {
-  font-size: 0.75rem;
+  font-size: var(--primitive-font-size-36);
 }
 :global(.enact-locale-th) .imageItem .label {
-  font-size: 0.75rem;
+  font-size: var(--primitive-font-size-36);
 }
 :global(.enact-locale-vi) .imageItem .label {
-  font-size: 0.75rem;
+  font-size: var(--primitive-font-size-36);
 }
 .imageItem.vertical.fullImage {
   border-radius: 0;
-  padding: 1.25rem;
+  padding: var(--primitive-spacing-60);
 }
 .imageItem.vertical.fullImage .image {
   transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
@@ -71,7 +71,7 @@
 }
 .imageItem.vertical:not(.fullImage) {
   padding: var(--primitive-spacing-24) var(--primitive-spacing-24) var(--primitive-spacing-30);
-  margin: 0 0.75rem 0.625rem 0.75rem;
+  margin: 0 var(--primitive-spacing-36) var(--primitive-spacing-30) var(--primitive-spacing-36);
 }
 .imageItem.vertical .selectionContainer {
   background-color: transparent;
@@ -123,9 +123,9 @@
   height: 1.375rem;
 }
 .imageItem.horizontal {
-  padding: 0.625rem 1rem;
+  padding: var(--primitive-spacing-30) 1rem;
   align-items: center;
-  margin: 0 0.75rem 0.625rem 0.75rem;
+  margin: 0 var(--primitive-spacing-36) var(--primitive-spacing-30) var(--primitive-spacing-36);
 }
 .imageItem.horizontal .image {
   width: 3.75rem;
@@ -180,7 +180,7 @@
   border-color: color(from var(--semantic-color-on-surface-main-selected) srgb r g b / 0.7);
 }
 .imageItem:global(.neutral).selected.vertical .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 .imageItem:global(.neutral).vertical.fullImage .selectionContainer::after {
@@ -248,7 +248,7 @@
 }
 :global(.spotlight-input-key) .imageItem:global(.neutral):global(.spottable):focus.vertical.selected .selectionIcon,
 :global(.spotlight-input-mouse) .imageItem:global(.neutral):global(.spottable):focus.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.spotlight-input-touch) .imageItem:global(.neutral):global(.spottable):active {
@@ -284,7 +284,7 @@
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
 :global(.spotlight-input-touch) .imageItem:global(.neutral):global(.spottable):active.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.noAnimation) .imageItem:global(.neutral).vertical.fullImage .image {
@@ -332,7 +332,7 @@
   border-color: color(from var(--semantic-color-on-surface-main-selected) srgb r g b / 0.7);
 }
 :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast).selected.vertical .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast).vertical.fullImage .selectionContainer::after {
@@ -400,7 +400,7 @@
 }
 :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast):global(.spottable):focus.vertical.selected .selectionIcon,
 :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast):global(.spottable):focus.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast):global(.spottable):active {
@@ -436,7 +436,7 @@
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast):global(.spottable):active.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.noAnimation) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast).vertical.fullImage .image {
@@ -484,7 +484,7 @@
   border-color: color(from var(--semantic-color-on-surface-main-selected) srgb r g b / 0.7);
 }
 .imageItem:global(.light).selected.vertical .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 .imageItem:global(.light).vertical.fullImage .selectionContainer::after {
@@ -552,7 +552,7 @@
 }
 :global(.spotlight-input-key) .imageItem:global(.light):global(.spottable):focus.vertical.selected .selectionIcon,
 :global(.spotlight-input-mouse) .imageItem:global(.light):global(.spottable):focus.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.spotlight-input-touch) .imageItem:global(.light):global(.spottable):active {
@@ -588,7 +588,7 @@
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
 :global(.spotlight-input-touch) .imageItem:global(.light):global(.spottable):active.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.noAnimation) .imageItem:global(.light).vertical.fullImage .image {
@@ -641,7 +641,7 @@
   border-color: color(from var(--semantic-color-on-surface-main-selected) srgb r g b / 0.7);
 }
 .imageItem:global(.game).selected.vertical .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 .imageItem:global(.game).vertical.fullImage .selectionContainer::after {
@@ -709,7 +709,7 @@
 }
 :global(.spotlight-input-key) .imageItem:global(.game):global(.spottable):focus.vertical.selected .selectionIcon,
 :global(.spotlight-input-mouse) .imageItem:global(.game):global(.spottable):focus.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.spotlight-input-touch) .imageItem:global(.game):global(.spottable):active {
@@ -745,7 +745,7 @@
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
 :global(.spotlight-input-touch) .imageItem:global(.game):global(.spottable):active.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.noAnimation) .imageItem:global(.game).vertical.fullImage .image {
@@ -797,7 +797,7 @@
   border-color: color(from var(--semantic-color-on-surface-main-selected) srgb r g b / 0.7);
 }
 :global(.green) .imageItem:global(.game).selected.vertical .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.green) .imageItem:global(.game).vertical.fullImage .selectionContainer::after {
@@ -865,7 +865,7 @@
 }
 :global(.spotlight-input-key) :global(.green) .imageItem:global(.game):global(.spottable):focus.vertical.selected .selectionIcon,
 :global(.spotlight-input-mouse) :global(.green) .imageItem:global(.game):global(.spottable):focus.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.spotlight-input-touch) :global(.green) .imageItem:global(.game):global(.spottable):active {
@@ -901,7 +901,7 @@
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
 :global(.spotlight-input-touch) :global(.green) .imageItem:global(.game):global(.spottable):active.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.noAnimation) :global(.green) .imageItem:global(.game).vertical.fullImage .image {
@@ -953,7 +953,7 @@
   border-color: color(from var(--semantic-color-on-surface-main-selected) srgb r g b / 0.7);
 }
 :global(.orange) .imageItem:global(.game).selected.vertical .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.orange) .imageItem:global(.game).vertical.fullImage .selectionContainer::after {
@@ -1021,7 +1021,7 @@
 }
 :global(.spotlight-input-key) :global(.orange) .imageItem:global(.game):global(.spottable):focus.vertical.selected .selectionIcon,
 :global(.spotlight-input-mouse) :global(.orange) .imageItem:global(.game):global(.spottable):focus.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.spotlight-input-touch) :global(.orange) .imageItem:global(.game):global(.spottable):active {
@@ -1057,7 +1057,7 @@
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
 :global(.spotlight-input-touch) :global(.orange) .imageItem:global(.game):global(.spottable):active.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.noAnimation) :global(.orange) .imageItem:global(.game).vertical.fullImage .image {