@enact/limestone 1.3.0

package/PageViews/PageViews.js

@@ -0,0 +1,440 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.PageViews = void 0;
+var _handle = _interopRequireWildcard(require("@enact/core/handle"));
+var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
+var _I18nDecorator = require("@enact/i18n/I18nDecorator");
+var _SpotlightContainerDecorator = _interopRequireWildcard(require("@enact/spotlight/SpotlightContainerDecorator"));
+var _Changeable = _interopRequireDefault(require("@enact/ui/Changeable"));
+var _Layout = require("@enact/ui/Layout");
+var _ViewManager = _interopRequireWildcard(require("@enact/ui/ViewManager"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _IString = _interopRequireDefault(require("ilib/lib/IString"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _$L = _interopRequireDefault(require("../internal/$L"));
+var _Panels = require("../internal/Panels");
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _Steps = _interopRequireDefault(require("../Steps"));
+var _PageViewsRouter = require("./PageViewsRouter");
+var _PageViewsModule = _interopRequireDefault(require("./PageViews.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["css", "componentRef", "fullContents", "index", "pageIndicatorPosition", "pageIndicatorType", "renderNextButton", "renderPrevButton", "renderViewManager", "stepHintAriaLabel", "steps"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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 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 _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; }
+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); } /**
+ * A PageViews that has page indicator with corresponding pages.
+ *
+ * @example
+ * 	<PageViews>
+ *		<PageViews.Page aria-label="This is a description for page">
+ *			lorem ipsum ...
+ *		</PageViews.Page>
+ *	</PageViews>
+ *
+ * @class PageViewsBase
+ * @memberof limestone/PageViews
+ * @ui
+ * @public
+ */
+var PageViewsBase = (0, _kind["default"])({
+  name: 'PageViews',
+  propTypes: /** @lends limestone/PageViews.PageViewsBase.prototype */{
+    /**
+     * Set of functions that control how the pages are transitioned into and out of the
+     * viewport.
+     *
+     * @see {@link ui/ViewManager.SlideArranger}
+     * @type {ui/ViewManager.Arranger}
+     * @default ui/ViewManager.SlideLeftArranger
+     * @private
+     */
+    arranger: _ViewManager.shape,
+    /**
+     * {@link limestone/PageViews.Page|Page} to be rendered.
+     *
+     * @type {Node}
+     * @public
+     */
+    children: _propTypes2["default"].node,
+    /**
+     * Obtains a reference to the root node.
+     *
+     * @type {Function|Object}
+     * @public
+     */
+    componentRef: _propTypes["default"].ref,
+    /**
+     * Customizes the component by mapping the supplied collection of CSS class names to the
+     * corresponding internal elements and states of this component.
+     *
+     * The following classes are supported:
+     *
+     * * `pageViews` - The root component class
+     * * `contentsArea` - The contentsArea component class
+     * * `navButton` - The navButton component class
+     * * `navButtonContainer` - Applied to the container containing navButtons in fullContents mode
+     * * `stepsRow` - The step component class
+     *
+     * @type {Object}
+     * @public
+     */
+    css: _propTypes2["default"].object,
+    /**
+     * When `true`, maximize its contents area.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    fullContents: _propTypes2["default"].bool,
+    /**
+     * Index of the active page.
+     *
+     * @type {Number}
+     * @default 0
+     * @public
+     */
+    index: _propTypes2["default"].number,
+    /**
+     * Disables page transitions.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    noAnimation: _propTypes2["default"].bool,
+    /**
+     * Called when a transition completes.
+     *
+     * @type {Function}
+     * @public
+     */
+    onTransition: _propTypes2["default"].func,
+    /**
+     * Called before a transition begins.
+     *
+     * @type {Function}
+     * @public
+     */
+    onWillTransition: _propTypes2["default"].func,
+    /**
+     * Specifies on which side (`'top'` or `'bottom'`) the page indicator appears.
+     *
+     * @type {('top'|'bottom')}
+     * @default 'bottom'
+     * @public
+     */
+    pageIndicatorPosition: _propTypes2["default"].oneOf(['top', 'bottom']),
+    /**
+     * Type of page indicator.
+     *
+     * There are two types:
+     *
+     * * `dot` - Indicates pages by dots.
+     * * `number` - Indicates pages by current page number and total number of pages.
+     *
+     * @type {('dot'|'number')}
+     * @default 'dot'
+     * @public
+     */
+    pageIndicatorType: _propTypes2["default"].oneOf(['dot', 'number']),
+    /**
+     * Explicitly sets the ViewManager transition direction.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    reverseTransition: _propTypes2["default"].bool,
+    /**
+     * The total number of pages.
+     *
+     * @type {Number}
+     * @private
+     */
+    totalIndex: _propTypes2["default"].number
+  },
+  defaultProps: {
+    arranger: _Panels.BasicArranger,
+    pageIndicatorPosition: 'bottom',
+    pageIndicatorType: 'dot'
+  },
+  styles: {
+    css: _PageViewsModule["default"],
+    className: 'pageViews',
+    publicClassNames: true
+  },
+  handlers: {
+    onNextClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onNextClick'), function (ev, _ref) {
+      var index = _ref.index,
+        onChange = _ref.onChange,
+        totalIndex = _ref.totalIndex;
+      if (onChange && index !== totalIndex) {
+        var nextIndex = index < totalIndex - 1 ? index + 1 : index;
+        onChange({
+          type: 'onChange',
+          index: nextIndex
+        });
+      }
+    }),
+    onPrevClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onPrevClick'), function (ev, _ref2) {
+      var index = _ref2.index,
+        onChange = _ref2.onChange;
+      if (onChange && index !== 0) {
+        var prevIndex = index > 0 ? index - 1 : index;
+        onChange({
+          type: 'onChange',
+          index: prevIndex
+        });
+      }
+    }),
+    onTransition: function onTransition(ev, _ref3) {
+      var index = _ref3.index,
+        _onTransition = _ref3.onTransition;
+      if (_onTransition) {
+        _onTransition({
+          type: 'onTransition',
+          index: index
+        });
+      }
+    },
+    onWillTransition: function onWillTransition(ev, _ref4) {
+      var index = _ref4.index,
+        _onWillTransition = _ref4.onWillTransition;
+      if (_onWillTransition) {
+        _onWillTransition({
+          type: 'onWillTransition',
+          index: index
+        });
+      }
+    }
+  },
+  computed: {
+    className: function className(_ref5) {
+      var fullContents = _ref5.fullContents,
+        pageIndicatorPosition = _ref5.pageIndicatorPosition,
+        pageIndicatorType = _ref5.pageIndicatorType,
+        styler = _ref5.styler;
+      return styler.append({
+        fullContents: fullContents
+      }, "indicator".concat((0, _util.cap)(pageIndicatorPosition)), pageIndicatorType);
+    },
+    renderNextButton: function renderNextButton(_ref6) {
+      var css = _ref6.css,
+        onNextClick = _ref6.onNextClick,
+        index = _ref6.index,
+        totalIndex = _ref6.totalIndex;
+      var isNextButtonVisible = index < totalIndex - 1;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+        className: css.navButtonCell,
+        shrink: true,
+        children: isNextButtonVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+          "aria-label": (0, _$L["default"])('Next'),
+          className: css.navButton,
+          icon: "arrowlargeright",
+          iconFlip: "auto",
+          id: "NextNavButton",
+          onClick: onNextClick
+        }) : null
+      });
+    },
+    renderPrevButton: function renderPrevButton(_ref7) {
+      var css = _ref7.css,
+        index = _ref7.index,
+        onPrevClick = _ref7.onPrevClick;
+      var isPrevButtonVisible = index !== 0;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+        className: css.navButtonCell,
+        shrink: true,
+        children: isPrevButtonVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+          "aria-label": (0, _$L["default"])('Previous'),
+          className: css.navButton,
+          icon: "arrowlargeleft",
+          iconFlip: "auto",
+          id: "PrevNavButton",
+          onClick: onPrevClick
+        }) : null
+      });
+    },
+    renderViewManager: function renderViewManager(_ref8) {
+      var arranger = _ref8.arranger,
+        css = _ref8.css,
+        index = _ref8.index,
+        noAnimation = _ref8.noAnimation,
+        onTransition = _ref8.onTransition,
+        onWillTransition = _ref8.onWillTransition,
+        reverseTransition = _ref8.reverseTransition,
+        children = _ref8.children;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+        arranger: arranger,
+        className: css.viewManager,
+        component: _ViewManager["default"],
+        duration: 400,
+        index: index,
+        noAnimation: typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION || noAnimation,
+        onTransition: onTransition,
+        onWillTransition: onWillTransition,
+        reverseTransition: reverseTransition,
+        children: children
+      });
+    },
+    stepHintAriaLabel: function stepHintAriaLabel(_ref9) {
+      var _children$index;
+      var children = _ref9.children,
+        index = _ref9.index,
+        totalIndex = _ref9.totalIndex;
+      var pageHint = new _IString["default"]((0, _$L["default"])('Page {current} out of {total}')).format({
+        current: index + 1,
+        total: totalIndex
+      });
+      return "".concat(pageHint, " ").concat((children === null || children === void 0 || (_children$index = children[index]) === null || _children$index === void 0 ? void 0 : _children$index.props['aria-label']) || '');
+    },
+    steps: function steps(_ref0) {
+      var css = _ref0.css,
+        index = _ref0.index,
+        onNextClick = _ref0.onNextClick,
+        onPrevClick = _ref0.onPrevClick,
+        pageIndicatorType = _ref0.pageIndicatorType,
+        totalIndex = _ref0.totalIndex;
+      var isPrevButtonVisible = index !== 0;
+      var isNextButtonVisible = index < totalIndex - 1;
+      var isStepVisible = totalIndex !== 1;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: pageIndicatorType !== 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Row, {
+          className: (0, _classnames["default"])(css.stepsRow, _defineProperty({}, css.hidden, !isStepVisible)),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps["default"], {
+            css: css,
+            current: index + 1,
+            highlightCurrentOnly: true,
+            total: totalIndex
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
+          className: css.stepsRow,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+            className: css.navButtonCell,
+            shrink: true,
+            children: isPrevButtonVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+              "aria-label": (0, _$L["default"])('Previous'),
+              className: css.navButton,
+              icon: "arrowlargeleft",
+              iconFlip: "auto",
+              id: "PrevNavButton",
+              onClick: onPrevClick
+            }) : null
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Cell, {
+            className: css.pageNumber,
+            shrink: true,
+            children: [index + 1, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+              className: css.separator,
+              shrink: true,
+              children: "/"
+            }), totalIndex]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+            className: css.navButtonCell,
+            shrink: true,
+            children: isNextButtonVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+              "aria-label": (0, _$L["default"])('Next'),
+              className: css.navButton,
+              icon: "arrowlargeright",
+              iconFlip: "auto",
+              id: "NextNavButton",
+              onClick: onNextClick
+            }) : null
+          })]
+        })
+      });
+    }
+  },
+  render: function render(_ref1) {
+    var css = _ref1.css,
+      componentRef = _ref1.componentRef,
+      fullContents = _ref1.fullContents,
+      index = _ref1.index,
+      pageIndicatorPosition = _ref1.pageIndicatorPosition,
+      pageIndicatorType = _ref1.pageIndicatorType,
+      renderNextButton = _ref1.renderNextButton,
+      renderPrevButton = _ref1.renderPrevButton,
+      renderViewManager = _ref1.renderViewManager,
+      stepHintAriaLabel = _ref1.stepHintAriaLabel,
+      steps = _ref1.steps,
+      rest = _objectWithoutProperties(_ref1, _excluded);
+    delete rest.arranger;
+    delete rest.children;
+    delete rest.noAnimation;
+    delete rest.onTransition;
+    delete rest.onNextClick;
+    delete rest.onPrevClick;
+    delete rest.onWillTransition;
+    delete rest.reverseTransition;
+    delete rest.totalIndex;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
+      role: "region",
+      "aria-labelledby": "pageViews_index_".concat(index),
+      ref: componentRef
+    }, rest), {}, {
+      children: [!fullContents && pageIndicatorPosition === 'top' ? steps : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Column, {
+        "aria-label": stepHintAriaLabel,
+        className: css.contentsArea,
+        id: "pageViews_index_".concat(index),
+        children: fullContents ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Row, {
+            className: css.horizontalLayout,
+            children: renderViewManager
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
+            className: css.navButtonContainer,
+            children: [pageIndicatorType === 'dot' ? renderPrevButton : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {}), pageIndicatorType === 'dot' ? renderNextButton : null]
+          }), steps]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
+          className: css.horizontalLayout,
+          children: [pageIndicatorType === 'dot' ? renderPrevButton : null, renderViewManager, pageIndicatorType === 'dot' ? renderNextButton : null]
+        })
+      }), !fullContents && pageIndicatorPosition === 'bottom' ? steps : null]
+    }));
+  }
+});
+
+/**
+ * Sets the strategy used to automatically focus an element within the PageViews upon render.
+ * When set to 'none', focus is not set only on the first render.
+ *
+ * @name autoFocus
+ * @type {('default-element'|'last-focused'|'none'|String)}
+ * @memberof limestone/PageViews.PageViews.prototype
+ * @default 'last-focused'
+ * @public
+ */
+
+var PageViewsDecorator = (0, _compose["default"])((0, _Changeable["default"])({
+  prop: 'index'
+}), (0, _SpotlightContainerDecorator["default"])({
+  continue5WayHold: true,
+  defaultElement: [".".concat(_SpotlightContainerDecorator.spotlightDefaultClass), ".".concat(_PageViewsModule["default"].viewManager, " *"), ".".concat(_PageViewsModule["default"].navButtonCell, " *")],
+  enterTo: 'last-focused'
+}), (0, _I18nDecorator.I18nContextDecorator)({
+  rtlProp: 'rtl'
+}), _PageViewsRouter.PageViewsRouter, _Skinnable["default"]);
+
+/**
+ * A PageViews that can navigate through different pages.
+ * Expects {@link limestone/PageViews.Page|Page} as children.
+ *
+ * @class PageViews
+ * @memberof limestone/PageViews
+ * @extends limestone/PageViews.PageViewsBase
+ * @mixes ui/Changeable.Changeable
+ * @ui
+ * @public
+ */
+var PageViews = exports.PageViews = PageViewsDecorator(PageViewsBase);
+var _default = exports["default"] = PageViews;

package/PageViews/PageViews.module.css

@@ -0,0 +1,175 @@
+.pageViews {
+  height: 100%;
+  width: 100%;
+  display: inline-flex;
+  flex-direction: column;
+}
+.pageViews .navButton {
+  /* CSS Overrides */
+}
+.pageViews .navButtonCell {
+  text-align: center;
+  display: flex;
+  align-items: center;
+  width: 4.5rem;
+  justify-content: center;
+}
+.pageViews .navButtonContainer {
+  position: absolute;
+  width: 100%;
+  height: 2.75rem;
+  top: calc(50% - 2.75rem / 2 );
+  z-index: 10;
+  pointer-events: none;
+}
+.pageViews .navButtonContainer [role='button'] {
+  pointer-events: auto;
+}
+.pageViews.number .navButtonCell {
+  width: 2.75rem;
+}
+.pageViews.number .navButtonCell .navButton {
+  margin: 0;
+}
+.pageViews .stepsRow {
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  height: 2rem;
+}
+.pageViews .stepsRow.hidden {
+  min-height: 2.75rem;
+  visibility: hidden;
+}
+.pageViews.number .stepsRow {
+  min-height: 5.25rem;
+}
+.pageViews.number .stepsRow .pageNumber {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  padding: 0 var(--primitive-spacing-36);
+  width: 3.5rem;
+}
+.pageViews.number .stepsRow .pageNumber .separator {
+  width: 0.6875rem;
+}
+.pageViews.dot .steps {
+  display: flex;
+  align-items: center;
+  min-height: 2.75rem;
+  gap: var(--primitive-spacing-24);
+}
+.pageViews.dot .steps .step {
+  height: 0.375rem;
+  width: 0.375rem;
+  margin: 0;
+}
+.pageViews.dot .steps .step.current {
+  height: 0.5rem;
+  width: 0.5rem;
+}
+.pageViews.dot .steps .step.future,
+.pageViews.dot .steps .step.past {
+  opacity: 0.4;
+}
+.pageViews.dot .steps .pageIndicator.past,
+.pageViews.dot .steps .pageIndicator.current,
+.pageViews.dot .steps .pageIndicator.future {
+  /* CSS Overrides */
+}
+.pageViews.fullContents .stepsRow {
+  position: absolute;
+  align-self: center;
+}
+.pageViews.fullContents.indicatorBottom .stepsRow {
+  bottom: 0;
+  pointer-events: none;
+}
+.pageViews.fullContents.indicatorBottom .stepsRow [role='button'] {
+  pointer-events: auto;
+}
+.pageViews .contentsArea {
+  position: relative;
+  overflow: hidden;
+}
+.pageViews .viewManager {
+  overflow: hidden;
+  border-radius: var(--semantic-radius-container);
+}
+.pageViews .horizontalLayout {
+  height: 100%;
+}
+.pageViews:global(.neutral) .viewManager {
+  background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
+}
+.pageViews:global(.neutral) .steps .step {
+  background-color: var(--semantic-color-surface-default-indicator);
+}
+.pageViews:global(.neutral) .steps .step.future,
+.pageViews:global(.neutral) .steps .step.past {
+  background-color: var(--semantic-color-surface-default-indicator);
+}
+:global(.enact-a11y-high-contrast) .pageViews:global(.neutral):global(.highContrast) .viewManager {
+  background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
+}
+:global(.enact-a11y-high-contrast) .pageViews:global(.neutral):global(.highContrast) .steps .step {
+  background-color: var(--semantic-color-surface-default-indicator);
+}
+:global(.enact-a11y-high-contrast) .pageViews:global(.neutral):global(.highContrast) .steps .step.future,
+:global(.enact-a11y-high-contrast) .pageViews:global(.neutral):global(.highContrast) .steps .step.past {
+  background-color: var(--semantic-color-surface-default-indicator);
+}
+.pageViews:global(.light) .viewManager {
+  background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
+}
+.pageViews:global(.light) .steps .step {
+  background-color: var(--semantic-color-surface-default-indicator);
+}
+.pageViews:global(.light) .steps .step.future,
+.pageViews:global(.light) .steps .step.past {
+  background-color: var(--semantic-color-surface-default-indicator);
+}
+.pageViews:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+.pageViews:global(.game) .viewManager {
+  background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
+}
+.pageViews:global(.game) .steps .step {
+  background-color: var(--semantic-color-surface-default-indicator);
+}
+.pageViews:global(.game) .steps .step.future,
+.pageViews:global(.game) .steps .step.past {
+  background-color: var(--semantic-color-surface-default-indicator);
+}
+:global(.green) .pageViews:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) .pageViews:global(.game) .viewManager {
+  background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
+}
+:global(.green) .pageViews:global(.game) .steps .step {
+  background-color: var(--semantic-color-surface-default-indicator);
+}
+:global(.green) .pageViews:global(.game) .steps .step.future,
+:global(.green) .pageViews:global(.game) .steps .step.past {
+  background-color: var(--semantic-color-surface-default-indicator);
+}
+:global(.orange) .pageViews:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) .pageViews:global(.game) .viewManager {
+  background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
+}
+:global(.orange) .pageViews:global(.game) .steps .step {
+  background-color: var(--semantic-color-surface-default-indicator);
+}
+:global(.orange) .pageViews:global(.game) .steps .step.future,
+:global(.orange) .pageViews:global(.game) .steps .step.past {
+  background-color: var(--semantic-color-surface-default-indicator);
+}