@enact/limestone 1.3.0

package/Dropdown/Dropdown.js

@@ -0,0 +1,460 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DropdownDecorator = exports.DropdownBase = exports.Dropdown = void 0;
+var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _handle = require("@enact/core/handle");
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
+var _I18nDecorator = require("@enact/i18n/I18nDecorator");
+var _Pause = _interopRequireDefault(require("@enact/spotlight/Pause"));
+var _SpotlightContainerDecorator = _interopRequireDefault(require("@enact/spotlight/SpotlightContainerDecorator"));
+var _Changeable = _interopRequireDefault(require("@enact/ui/Changeable"));
+var _ForwardRef = _interopRequireDefault(require("@enact/ui/ForwardRef"));
+var _IdProvider = _interopRequireDefault(require("@enact/ui/internal/IdProvider"));
+var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
+var _resolution = _interopRequireDefault(require("@enact/ui/resolution"));
+var _Toggleable = _interopRequireDefault(require("@enact/ui/Toggleable"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _warning = _interopRequireDefault(require("warning"));
+var _$L = _interopRequireDefault(require("../internal/$L"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _ContextualPopupDecorator = _interopRequireDefault(require("../ContextualPopupDecorator"));
+var _util2 = require("../internal/util");
+var _Heading = _interopRequireDefault(require("../Heading"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _DropdownList = _interopRequireWildcard(require("./DropdownList"));
+var _DropdownModule = _interopRequireDefault(require("./Dropdown.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["forwardRef"],
+  _excluded2 = ["aria-label", "ariaLabelledBy", "children", "direction", "disabled", "handleSpotlightPause", "onClose", "onOpen", "onSelect", "open", "placeholder", "selected", "size", "title", "width"];
+/**
+ * Limestone styled Dropdown components
+ *
+ * @example
+ * <Dropdown
+ * 		defaultSelected={2}
+ *		inline
+ *		title="Options"
+ * >
+ *   {['Option 1', 'Option 2', 'Option 3', 'Option 4']}
+ * </Dropdown>
+ *
+ * @module limestone/Dropdown
+ * @exports Dropdown
+ * @exports DropdownBase
+ * @exports DropdownBaseDecorator
+ */
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var pause = new _Pause["default"]('dropdown');
+function pauseSpotlight(bool) {
+  if (bool) {
+    pause.pause();
+    return true;
+  } else {
+    return pause.resume();
+  }
+}
+var DropdownButtonBase = (0, _kind["default"])({
+  name: 'DropdownButtonBase',
+  propTypes: {
+    forwardRef: _propTypes["default"].ref
+  },
+  render: function render(_ref) {
+    var forwardRef = _ref.forwardRef,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], _objectSpread(_objectSpread({}, props), {}, {
+      css: _DropdownModule["default"],
+      ref: forwardRef,
+      iconPosition: "after"
+    }));
+  }
+});
+var DropdownButton = (0, _ContextualPopupDecorator["default"])({
+  noArrow: true
+}, (0, _ForwardRef["default"])(DropdownButtonBase));
+DropdownButton.displayName = 'DropdownButton';
+
+/**
+ * A stateless Dropdown component.
+ *
+ * @class DropdownBase
+ * @memberof limestone/Dropdown
+ * @extends limestone/Button.Button
+ * @extends limestone/ContextualPopupDecorator.ContextualPopupDecorator
+ * @omit popupComponent
+ * @ui
+ * @public
+ */
+var DropdownBase = exports.DropdownBase = (0, _kind["default"])({
+  name: 'Dropdown',
+  propTypes: /** @lends limestone/Dropdown.DropdownBase.prototype */{
+    /**
+     * The "aria-label" for the Dropdown.
+     *
+     * @type {String}
+     * @public
+     */
+    'aria-label': _propTypes2["default"].string,
+    /**
+     * Items to be displayed in the `Dropdown` when `open`.
+     *
+     * Takes either an array of strings or an array of objects. When strings, the values will be
+     * used in the generated components as the readable text. When objects, the properties will
+     * be passed onto an `Item` component; `children` as well as a unique `key` properties are
+     * required.
+     *
+     * @type {String[]|Array.<{key: (Number|String), children: (String|Component)}>}
+     * @public
+     */
+    children: _propTypes2["default"].oneOfType([_propTypes2["default"].arrayOf(_propTypes2["default"].string), _propTypes2["default"].arrayOf(_propTypes2["default"].shape({
+      children: _propTypes["default"].renderable.isRequired,
+      key: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].number]).isRequired
+    }))]),
+    /**
+     * Placement of the Dropdown.
+     *
+     * @type {('above'|'below')}
+     * @default 'below'
+     * @public
+     */
+    direction: _propTypes2["default"].oneOf(['above', 'below']),
+    /**
+     * Disables Dropdown, making it non-interactive.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    disabled: _propTypes2["default"].bool,
+    /**
+     * The `id` of Dropdown referred to when generating id for `'title'`.
+     *
+     * @type {String}
+     * @private
+     */
+    id: _propTypes2["default"].string,
+    /**
+     * Called when the Dropdown is closing.
+     *
+     * @type {Function}
+     * @public
+     */
+    onClose: _propTypes2["default"].func,
+    /**
+     * Called when the Dropdown is opening.
+     *
+     * @type {Function}
+     * @public
+     */
+    onOpen: _propTypes2["default"].func,
+    /**
+     * Called when an item is selected.
+     *
+     * The event payload will be an object with the following members:
+     * * `data` - The value for the option as received in the `children` prop
+     * * `selected` - Number representing the selected option, 0 indexed
+     *
+     * @type {Function}
+     * @public
+     */
+    onSelect: _propTypes2["default"].func,
+    /**
+     * Displays the items.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    open: _propTypes2["default"].bool,
+    /**
+     * Text displayed in the Dropdown when nothing is selected.
+     *
+     * The placeholder will be replaced by the selected item.
+     *
+     * @type {String}
+     * @default 'No Selection'
+     * @public
+     */
+    placeholder: _propTypes2["default"].string,
+    /**
+     * Indicates the locale's text direction is right-to-left.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    rtl: _propTypes2["default"].bool,
+    /**
+     * Index of the selected item.
+     *
+     * @type {Number}
+     * @public
+     */
+    selected: _propTypes2["default"].number,
+    /**
+     * The size of the Dropdown's {@link limestone/Button.Button|Button} component.
+     *
+     * @type {('large'|'small')}
+     * @default 'large'
+     * @public
+     */
+    size: _propTypes2["default"].oneOf(['large', 'small']),
+    /**
+     * Primary title text of the Dropdown.
+     *
+     * @type {String}
+     * @public
+     */
+    title: _propTypes2["default"].string,
+    /**
+     * Width of the Dropdown.
+     *
+     * @type {('huge'|'large'|'x-large'|'medium'|'small'|'tiny')|number}
+     * @default 'large'
+     * @public
+     */
+    width: _propTypes2["default"].oneOfType([_propTypes2["default"].oneOf(['tiny', 'small', 'medium', 'large', 'x-large', 'huge']), _propTypes2["default"].number])
+  },
+  defaultProps: {
+    direction: 'below',
+    open: false,
+    size: 'large',
+    width: 'large'
+  },
+  handlers: {
+    onSelect: (0, _handle.handle)((0, _handle.forwardCustom)('onSelect', function (ev) {
+      return ev;
+    }), (0, _handle.forward)('onClose')),
+    onOpen: (0, _handle.handle)((0, _handle.forward)('onClick'), (0, _handle.not)((0, _handle.forProp)('disabled', true)), (0, _handle.not)((0, _handle.forProp)('open', true)), function () {
+      return pauseSpotlight(true);
+    }, (0, _handle.forward)('onOpen'))
+  },
+  styles: {
+    css: _DropdownModule["default"],
+    className: 'dropdown'
+  },
+  computed: {
+    ariaLabelledBy: function ariaLabelledBy(_ref2) {
+      var id = _ref2.id,
+        title = _ref2.title;
+      return title ? "".concat(id, "_title") : void 0;
+    },
+    children: function children(_ref3) {
+      var _children = _ref3.children,
+        selected = _ref3.selected;
+      if (!Array.isArray(_children)) return [];
+      return _children.map(function (child, i) {
+        var aria = {
+          role: 'checkbox',
+          'aria-checked': selected === i,
+          'aria-posinset': i + 1,
+          'aria-setsize': _children.length
+        };
+        process.env.NODE_ENV !== "production" ? (0, _warning["default"])(child != null, "Unsupported null or undefined child provided at index ".concat(i, " which will not be visible when rendered.")) : void 0;
+        if (typeof child === 'string') {
+          return _objectSpread(_objectSpread({}, aria), {}, {
+            children: child,
+            key: "item_".concat(child)
+          });
+        }
+        return _objectSpread(_objectSpread({}, aria), child);
+      });
+    },
+    className: function className(_ref4) {
+      var styler = _ref4.styler,
+        title = _ref4.title,
+        width = _ref4.width;
+      return styler.append(typeof width === 'string' ? "".concat(width, "Width") : null, {
+        hasTitle: Boolean(title)
+      });
+    },
+    direction: function direction(_ref5) {
+      var _direction = _ref5.direction;
+      return "".concat(_direction, " center");
+    },
+    handleSpotlightPause: function handleSpotlightPause() {
+      return pauseSpotlight;
+    },
+    placeholder: function placeholder(_ref6) {
+      var children = _ref6.children,
+        _ref6$placeholder = _ref6.placeholder,
+        _placeholder = _ref6$placeholder === void 0 ? (0, _$L["default"])('No Selection') : _ref6$placeholder,
+        selected = _ref6.selected;
+      if ((0, _DropdownList.isSelectedValid)({
+        children: children,
+        selected: selected
+      })) {
+        var child = children[selected];
+        return typeof child === 'object' ? child.children : child;
+      }
+      return _placeholder;
+    },
+    title: function title(_ref7) {
+      var id = _ref7.id,
+        _title = _ref7.title,
+        width = _ref7.width;
+      return _title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading["default"], {
+        className: _DropdownModule["default"].title,
+        id: "".concat(id, "_title"),
+        size: "tiny",
+        spacing: "small",
+        style: {
+          width: typeof width === 'number' ? _resolution["default"].scaleToRem(width) : null
+        },
+        children: _title
+      });
+    }
+  },
+  render: function render(_ref8) {
+    var ariaLabel = _ref8['aria-label'],
+      ariaLabelledBy = _ref8.ariaLabelledBy,
+      children = _ref8.children,
+      direction = _ref8.direction,
+      disabled = _ref8.disabled,
+      handleSpotlightPause = _ref8.handleSpotlightPause,
+      onClose = _ref8.onClose,
+      onOpen = _ref8.onOpen,
+      onSelect = _ref8.onSelect,
+      open = _ref8.open,
+      placeholder = _ref8.placeholder,
+      selected = _ref8.selected,
+      size = _ref8.size,
+      title = _ref8.title,
+      width = _ref8.width,
+      rest = _objectWithoutProperties(_ref8, _excluded2);
+    delete rest.rtl;
+    var ariaProps = (0, _util.extractAriaProps)(rest);
+    var calcAriaProps = ariaLabel != null ? null : {
+      role: 'region',
+      'aria-labelledby': ariaLabelledBy
+    };
+    var popupProps = {
+      'aria-live': null,
+      children: children,
+      handleSpotlightPause: handleSpotlightPause,
+      onSelect: onSelect,
+      selected: selected,
+      width: width,
+      role: null
+    };
+    var voiceProps = (0, _util2.extractVoiceProps)(rest);
+
+    // `ui/Group`/`ui/Repeater` will throw an error if empty so we disable the Dropdown and
+    // prevent Dropdown to open if there are no children.
+    var hasChildren = children.length > 0;
+    var openDropdown = hasChildren && !disabled && open;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread(_objectSpread({}, calcAriaProps), rest), {}, {
+      children: [title, /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownButton, _objectSpread(_objectSpread(_objectSpread({
+        "aria-label": (ariaLabel || placeholder) + " ".concat((0, _$L["default"])('Dropdown')),
+        direction: direction,
+        disabled: hasChildren ? disabled : true,
+        focusEffect: "static",
+        icon: openDropdown ? 'triangleup' : 'triangledown',
+        popupClassName: _DropdownModule["default"].contextualPopup,
+        popupComponent: _DropdownList["default"],
+        popupProps: popupProps,
+        offset: "large",
+        onClick: onOpen,
+        onClose: onClose,
+        open: openDropdown,
+        size: size,
+        spotlightRestrict: "self-only",
+        style: {
+          width: typeof width === 'number' ? _resolution["default"].scaleToRem(width) : null
+        }
+      }, ariaProps), voiceProps), {}, {
+        children: placeholder
+      }))]
+    }));
+  }
+});
+
+/**
+ * Applies Limestone specific behaviors and functionality to
+ * {@link limestone/Dropdown.DropdownBase|DropdownBase}.
+ *
+ * @hoc
+ * @memberof limestone/Dropdown
+ * @mixes ui/Changeable.Changeable
+ * @mixes ui/Toggleable.Toggleable
+ * @mixes spotlight/SpotlightContainerDecorator.SpotlightContainerDecorator
+ * @omit selected
+ * @omit defaultSelected
+ * @omit value
+ * @omit defaultValue
+ * @omit onChange
+ * @public
+ */
+var DropdownDecorator = exports.DropdownDecorator = (0, _compose["default"])((0, _Pure["default"])({
+  propComparators: {
+    children: _util2.compareChildren
+  }
+}), _SpotlightContainerDecorator["default"], (0, _I18nDecorator.I18nContextDecorator)({
+  rtlProp: 'rtl'
+}), (0, _IdProvider["default"])({
+  generateProp: null,
+  prefix: 'd_'
+}), (0, _Changeable["default"])({
+  change: 'onSelect',
+  prop: 'selected'
+}), (0, _Toggleable["default"])({
+  activate: 'onOpen',
+  deactivate: 'onClose',
+  prop: 'open',
+  toggle: null
+}), _Skinnable["default"]);
+
+/**
+ * Displays the items.
+ *
+ * @name open
+ * @memberof limestone/Dropdown.DropdownDecorator.prototype
+ * @type {Boolean}
+ * @default false
+ * @public
+ */
+
+/**
+ * Index of the selected item.
+ *
+ * @name selected
+ * @memberof limestone/Dropdown.DropdownDecorator.prototype
+ * @type {Number}
+ * @public
+ */
+
+/**
+ * The initial selected index when `selected` is not defined.
+ *
+ * @name defaultSelected
+ * @memberof limestone/Dropdown.DropdownDecorator.prototype
+ * @type {Number}
+ * @public
+ */
+
+/**
+ * A Limestone Dropdown component.
+ *
+ * By default, `Dropdown` maintains the state of its `selected` property. Supply the
+ * `defaultSelected` property to control its initial value. If you wish to directly control updates
+ * to the component, supply a value to `selected` at creation time and update it in response to
+ * `onSelect` events.
+ *
+ * @class Dropdown
+ * @memberof limestone/Dropdown
+ * @extends limestone/Dropdown.DropdownBase
+ * @ui
+ * @public
+ */
+var Dropdown = exports.Dropdown = DropdownDecorator(DropdownBase);
+var _default = exports["default"] = Dropdown;

package/Dropdown/Dropdown.module.css

@@ -0,0 +1,160 @@
+.dropdown {
+  display: inline-block;
+  margin: 0 1rem;
+  min-width: 6.25rem;
+}
+.dropdown.tinyWidth .title {
+  width: 9rem;
+}
+.dropdown.tinyWidth .button {
+  width: 10rem;
+}
+.dropdown.smallWidth .title {
+  width: 10.25rem;
+}
+.dropdown.smallWidth .button {
+  width: 11.25rem;
+}
+.dropdown.mediumWidth .title {
+  width: 13.375rem;
+}
+.dropdown.mediumWidth .button {
+  width: 14.375rem;
+}
+.dropdown.largeWidth .title {
+  width: 16.5rem;
+}
+.dropdown.largeWidth .button {
+  width: 17.5rem;
+}
+.dropdown.x-largeWidth .title {
+  width: 20.875rem;
+}
+.dropdown.x-largeWidth .button {
+  width: 21.875rem;
+}
+.dropdown.hugeWidth .title {
+  width: 27.75rem;
+}
+.dropdown.hugeWidth .button {
+  width: 28.75rem;
+}
+.dropdown .title {
+  min-width: 5.25rem;
+  padding: 0.75rem 0.5rem;
+  margin: 0;
+}
+.dropdown .button {
+  min-width: unset;
+  max-width: unset;
+  padding: 0 var(--primitive-spacing-48);
+  margin: 0;
+}
+:global(.spotlight-input-key) .dropdown .button:not([disabled]):global(.spottable):focus.pressed .bg,
+:global(.spotlight-input-mouse) .dropdown .button:not([disabled]):global(.spottable):focus.pressed .bg,
+:global(.spotlight-input-key) .dropdown .button:not([disabled]):global(.spottable):focus:active .bg,
+:global(.spotlight-input-mouse) .dropdown .button:not([disabled]):global(.spottable):focus:active .bg {
+  animation-name: none;
+}
+:global(.spotlight-input-touch) .dropdown .button:not([disabled]):global(.spottable):active.pressed .bg,
+:global(.spotlight-input-touch) .dropdown .button:not([disabled]):global(.spottable):active:active .bg {
+  animation-name: none;
+}
+.dropdown .button .icon {
+  margin-left: var(--primitive-spacing-36);
+  margin-right: 0;
+}
+:global(.enact-locale-right-to-left) .dropdown .button .icon {
+  margin-left: 0;
+  margin-right: var(--primitive-spacing-36);
+}
+.dropdownList {
+  max-height: 17rem;
+  min-width: 6.25rem;
+}
+.dropdownList.verticalScrollbar .scrollbarTrack {
+  height: calc(100% - 12px);
+}
+.dropdownList.tiny {
+  width: 9.875rem;
+}
+.dropdownList.small {
+  width: 11.125rem;
+}
+.dropdownList.medium {
+  width: 14.25rem;
+}
+.dropdownList.large {
+  width: 17.375rem;
+}
+.dropdownList.x-large {
+  width: 21.75rem;
+}
+.dropdownList.huge {
+  width: 28.625rem;
+}
+.dropdownList:global(.largeText) {
+  max-height: 13.875rem;
+}
+.dropdownList:global(.neutral) [data-selected="true"]:not(:focus) {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+:global(.enact-a11y-high-contrast) .dropdownList:global(.neutral):global(.highContrast) [data-selected="true"]:not(:focus) {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+.dropdownList:global(.light) [data-selected="true"]:not(:focus) {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+.dropdownList:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+.dropdownList:global(.game) [data-selected="true"]:not(:focus) {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+:global(.green) .dropdownList:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) .dropdownList:global(.game) [data-selected="true"]:not(:focus) {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+:global(.orange) .dropdownList:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) .dropdownList:global(.game) [data-selected="true"]:not(:focus) {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+:global(.neutral) .contextualPopup {
+  padding-bottom: 0;
+}
+:global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .contextualPopup {
+  padding-bottom: 0;
+}
+:global(.light) .contextualPopup {
+  padding-bottom: 0;
+}
+:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+:global(.game) .contextualPopup {
+  padding-bottom: 0;
+}
+:global(.green) :global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) :global(.game) .contextualPopup {
+  padding-bottom: 0;
+}
+:global(.orange) :global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) :global(.game) .contextualPopup {
+  padding-bottom: 0;
+}