@enact/limestone 1.3.0

package/Spinner/Spinner.d.ts

@@ -0,0 +1,64 @@
+// Type definitions for limestone/Spinner
+
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SpinnerBaseProps as ui_Spinner_SpinnerBaseProps } from "@enact/ui/Spinner";
+import * as React from "react";
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
+
+export interface SpinnerBaseProps extends ui_Spinner_SpinnerBaseProps {
+  /**
+ * 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:
+ * *  `spinner`  - The root component class, unless there is a scrim. The scrim and floating
+layer can be a sibling or parent to this root "spinner" element.
+ */
+  css?: object;
+  /**
+ * Customize the size of this component.
+ * 
+ * Recommended usage is "medium" (default) for standalone and popup scenarios, while "small"
+is best suited for use inside other elements, like   .
+ */
+  size?: "medium" | "small";
+  /**
+   * Removes the background color (making it transparent).
+   */
+  transparent?: boolean;
+}
+/**
+ * The base component, defining all the properties.
+ */
+
+export class SpinnerBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, SpinnerBaseProps>
+> {}
+
+export interface SpinnerProps
+  extends Merge<SpinnerBaseProps, SpinnerDecoratorProps> {
+  /**
+ * Determines how far the click-blocking should extend.
+ * 
+ * It can be either  `'screen'` ,  `'container'` , or  `null` .  `'screen'`  pauses spotlight.
+Changing this property to  `'screen'`  after creation is not supported.
+ */
+  blockClickOn?: "screen" | "container";
+}
+/**
+ * A Limestone-styled Spinner.
+ */
+
+export class Spinner extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, SpinnerProps>
+> {}
+
+export interface SpinnerDecoratorProps
+  extends limestone_Skinnable_SkinnableProps {}
+export function SpinnerDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & SpinnerDecoratorProps>;
+
+export default Spinner;

package/Spinner/Spinner.js

@@ -0,0 +1,254 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SpinnerDecorator = exports.SpinnerBase = exports.Spinner = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _react = require("react");
+var _Pause = _interopRequireDefault(require("@enact/spotlight/Pause"));
+var _Spinner = _interopRequireDefault(require("@enact/ui/Spinner"));
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+var _$L = _interopRequireDefault(require("../internal/$L"));
+var _Marquee = _interopRequireDefault(require("../Marquee"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _SpinnerModule = _interopRequireDefault(require("./Spinner.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "css"],
+  _excluded2 = ["children", "css"];
+/**
+ * Provides Limestone-themed indeterminate progress indicator (spinner) components and behaviors.
+ *
+ * Used for indicating to the user that something is busy and interaction is temporarily suspended.
+ *
+ * @example
+ * <Spinner>Loading message...</Spinner>
+ *
+ * @module limestone/Spinner
+ * @exports Spinner
+ * @exports SpinnerBase
+ * @exports SpinnerDecorator
+ */
+/**
+ * A component that shows spinning balls, with optional text as children.
+ *
+ * @class SpinnerCore
+ * @memberof limestone/Spinner
+ * @ui
+ * @private
+ */
+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 SpinnerCore = (0, _kind["default"])({
+  name: 'SpinnerCore',
+  propTypes: {
+    css: _propTypes["default"].object
+  },
+  styles: {
+    css: _SpinnerModule["default"]
+  },
+  computed: {
+    'aria-label': function ariaLabel(_ref) {
+      var aria = _ref['aria-label'],
+        children = _ref.children;
+      if (aria) {
+        return aria;
+      } else if (!children) {
+        return (0, _$L["default"])('Loading');
+      }
+    }
+  },
+  render: function render(_ref2) {
+    var children = _ref2.children,
+      css = _ref2.css,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
+      "aria-live": "off",
+      role: "alert"
+    }, rest), {}, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: css.bg,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: css.decorator,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: css.fan1
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: css.fan2
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: css.fan3
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: css.fan4
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: css.cap
+          })]
+        })
+      }), children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee["default"], {
+        className: css.client,
+        marqueeOn: "render",
+        alignment: "center",
+        children: children
+      }) : null]
+    }));
+  }
+});
+
+/**
+ * The base component, defining all the properties.
+ *
+ * @class SpinnerBase
+ * @memberof limestone/Spinner
+ * @extends ui/Spinner.SpinnerBase
+ * @ui
+ * @public
+ */
+var SpinnerBase = exports.SpinnerBase = (0, _kind["default"])({
+  name: 'Spinner',
+  propTypes: /** @lends limestone/Spinner.SpinnerBase.prototype */{
+    /**
+     * 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:
+     *
+     * * `spinner` - The root component class, unless there is a scrim. The scrim and floating
+     *	layer can be a sibling or parent to this root "spinner" element.
+     *
+     * @type {Object}
+     * @public
+     */
+    css: _propTypes["default"].object,
+    /**
+     * Customize the size of this component.
+     *
+     * Recommended usage is "medium" (default) for standalone and popup scenarios, while "small"
+     * is best suited for use inside other elements, like {@link limestone/Item.Item}.
+     *
+     * @type {('medium'|'small')}
+     * @default 'medium'
+     * @public
+     */
+    size: _propTypes["default"].oneOf(['medium', 'small']),
+    /**
+     * Removes the background color (making it transparent).
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    transparent: _propTypes["default"].bool
+  },
+  defaultProps: {
+    size: 'medium',
+    transparent: false
+  },
+  styles: {
+    css: _SpinnerModule["default"],
+    publicClassNames: 'spinner'
+  },
+  computed: {
+    className: function className(_ref3) {
+      var children = _ref3.children,
+        size = _ref3.size,
+        transparent = _ref3.transparent,
+        styler = _ref3.styler;
+      return styler.append(size, {
+        content: !!children,
+        transparent: transparent
+      });
+    }
+  },
+  render: function render(_ref4) {
+    var children = _ref4.children,
+      css = _ref4.css,
+      rest = _objectWithoutProperties(_ref4, _excluded2);
+    delete rest.transparent;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner["default"], _objectSpread(_objectSpread({}, rest), {}, {
+      css: css,
+      component: SpinnerCore,
+      children: children
+    }));
+  }
+});
+
+/**
+ * A higher-order component that pauses spotlight when `blockClickOn` prop is `'screen'`.
+ *
+ * Resumes spotlight when unmounted. However, spotlight is not paused when `blockClickOn` prop is
+ * `'container'`. Blocking spotlight within the container is up to app implementation.
+ *
+ * @hoc
+ * @memberof limestone/Spinner
+ * @private
+ */
+var SpinnerSpotlightDecorator = (0, _hoc["default"])(function (config, Wrapped) {
+  var SpinnerSpotlight = function SpinnerSpotlight(props) {
+    var paused = (0, _react.useMemo)(function () {
+      return new _Pause["default"]('Spinner');
+    }, []);
+    var blockClickOn = props.blockClickOn;
+    var current = _spotlight["default"].getCurrent();
+    if (blockClickOn === 'screen') {
+      paused.pause();
+      if (current) {
+        current.blur();
+      }
+    }
+    (0, _react.useEffect)(function () {
+      return function () {
+        if (blockClickOn === 'screen') {
+          _spotlight["default"].focus();
+          paused.resume();
+        }
+      };
+    }, [blockClickOn, paused]);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({}, props));
+  };
+  SpinnerSpotlight.displayName = 'SpinnerSpotlightDecorator';
+  SpinnerSpotlight.propTypes = /** @lends limestone/Spinner.Spinner.prototype */{
+    /**
+     * Determines how far the click-blocking should extend.
+     *
+     * It can be either `'screen'`, `'container'`, or `null`. `'screen'` pauses spotlight.
+     * Changing this property to `'screen'` after creation is not supported.
+     *
+     * @type {('screen'|'container')}
+     * @default null
+     * @public
+     */
+    blockClickOn: _propTypes["default"].oneOf(['screen', 'container', null])
+  };
+  return SpinnerSpotlight;
+});
+
+/**
+ * Limestone-specific Spinner behaviors to apply to {@link limestone/Spinner.Spinner|Spinner}.
+ *
+ * @hoc
+ * @memberof limestone/Spinner
+ * @mixes limestone/Skinnable.Skinnable
+ * @public
+ */
+var SpinnerDecorator = exports.SpinnerDecorator = (0, _compose["default"])(_Pure["default"], SpinnerSpotlightDecorator, _Skinnable["default"]);
+
+/**
+ * A Limestone-styled Spinner.
+ *
+ * @class Spinner
+ * @memberof limestone/Spinner
+ * @extends limestone/Spinner.SpinnerBase
+ * @mixes limestone/Spinner.SpinnerDecorator
+ * @ui
+ * @public
+ */
+var Spinner = exports.Spinner = SpinnerDecorator(SpinnerBase);
+var _default = exports["default"] = Spinner;

package/Spinner/Spinner.module.css

@@ -0,0 +1,368 @@
+@keyframes spin {
+  0% {
+    transform: rotate(0.25turn);
+  }
+  33% {
+    transform: rotate(0.5turn);
+  }
+  80% {
+    transform: rotate(0.95turn);
+  }
+  85% {
+    transform: rotate(1turn);
+  }
+  100% {
+    transform: rotate(1.25turn);
+  }
+}
+@keyframes rotate1 {
+  0%,
+  100% {
+    transform: rotate(0turn);
+  }
+  33% {
+    transform: rotate(0.125turn);
+  }
+}
+@keyframes rotate2 {
+  0%,
+  100% {
+    transform: rotate(0turn);
+  }
+  33% {
+    transform: rotate(0.25turn);
+  }
+}
+@keyframes rotate3 {
+  0%,
+  100% {
+    transform: rotate(0turn);
+  }
+  33% {
+    transform: rotate(0.375turn);
+  }
+}
+@keyframes rotate4 {
+  0%,
+  100% {
+    transform: rotate(0turn);
+  }
+  33% {
+    transform: rotate(0.5turn);
+  }
+}
+.spinner {
+  line-height: 1.4em;
+  vertical-align: middle;
+}
+.spinner .bg {
+  position: relative;
+  border-radius: 20.8125rem;
+  width: 2rem;
+  height: 2rem;
+  padding: 0.5rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.spinner .decorator {
+  width: 2rem;
+  height: 2rem;
+  position: relative;
+  background-size: cover;
+  border-radius: 20.8125rem;
+  overflow: hidden;
+  margin: 0 auto;
+  -webkit-mask-image: radial-gradient(transparent 0.85417rem, black 0.875rem);
+  animation: none 1.25s linear infinite;
+  animation-name: spin;
+  animation-play-state: paused;
+}
+.spinner .decorator .fan1,
+.spinner .decorator .fan2,
+.spinner .decorator .fan3,
+.spinner .decorator .fan4 {
+  content: "";
+  top: 0;
+  right: 50%;
+  bottom: 50%;
+  left: 0;
+  clip-path: polygon(100% 0, 0 3%, 100% 100%);
+  transform-origin: bottom right;
+}
+.spinner .decorator .fan1,
+.spinner .decorator .fan2,
+.spinner .decorator .fan3,
+.spinner .decorator .fan4,
+.spinner .decorator .cap {
+  position: absolute;
+  animation: none 1.25s linear infinite;
+  animation-name: rotate1;
+  animation-play-state: paused;
+  animation-fill-mode: both;
+}
+.spinner .decorator .fan2 {
+  animation-name: rotate2;
+}
+.spinner .decorator .fan3 {
+  animation-name: rotate3;
+}
+.spinner .decorator .fan4,
+.spinner .decorator .cap {
+  animation-name: rotate4;
+}
+.spinner .decorator .cap {
+  top: 0;
+  right: 0;
+  bottom: 50%;
+  left: 0;
+  clip-path: circle(1px at 50% 1px);
+  transform-origin: bottom;
+}
+.spinner .client {
+  font-weight: var(--primitive-font-weight-regular);
+  font-size: var(--primitive-font-size-60);
+  font-style: normal;
+  font-family: "Limestone";
+  align-content: center;
+  height: 2.75rem;
+  font-weight: var(--primitive-font-weight-semibold);
+  line-height: 1.4em;
+  max-width: 14.5rem;
+}
+:global(.enact-locale-non-latin) .spinner .client {
+  font-family: "Limestone";
+}
+:global(.enact-locale-non-latin) .spinner .client {
+  font-family: "Limestone";
+  font-weight: var(--primitive-font-weight-light);
+  font-size: 1.125rem;
+  font-style: normal;
+}
+:global(.enact-locale-km) .spinner .client {
+  line-height: 1.7em;
+}
+:global(.enact-locale-si) .spinner .client {
+  line-height: 1.7em;
+}
+:global(.enact-locale-th) .spinner .client {
+  line-height: 1.7em;
+}
+:global(.enact-locale-vi) .spinner .client {
+  line-height: 1.7em;
+}
+.spinner .client a:link {
+  color: inherit;
+  text-decoration: none;
+}
+.spinner .client a:visited {
+  color: inherit;
+  text-decoration: none;
+}
+.spinner .client a:hover {
+  color: inherit;
+  text-decoration: none;
+}
+.spinner .client a:active {
+  color: inherit;
+  text-decoration: none;
+}
+.spinner.medium {
+  /* Needed to prevent global class being added in the DOM */
+}
+.spinner.small .bg,
+.spinner.small .decorator {
+  width: 1rem;
+  height: 1rem;
+}
+.spinner.small .bg {
+  padding: 0.25rem;
+}
+.spinner.small .decorator {
+  -webkit-mask-image: radial-gradient(transparent 0.35417rem, black 0.375rem);
+}
+.spinner.small .decorator .cap {
+  clip-path: circle(1px at 50% 1px);
+}
+.spinner.small:global(.largeText) .bg,
+.spinner.small:global(.largeText) .decorator {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.spinner.small:global(.largeText) .decorator {
+  -webkit-mask-image: radial-gradient(transparent 0.72917rem, black 0.75rem);
+}
+.spinner.content {
+  padding: 0.375rem;
+}
+.spinner.running .decorator,
+.spinner.running .decorator .fan1,
+.spinner.running .decorator .fan2,
+.spinner.running .decorator .fan3,
+.spinner.running .decorator .fan4,
+.spinner.running .decorator .cap {
+  animation-play-state: running;
+}
+.spinner:global(.neutral) {
+  color: var(--semantic-color-on-background-sub);
+}
+.spinner:global(.neutral) .bg {
+  background-color: var(--semantic-color-surface-default);
+}
+.spinner:global(.neutral) .decorator {
+  background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);
+}
+.spinner:global(.neutral) .decorator .fan1,
+.spinner:global(.neutral) .decorator .fan2,
+.spinner:global(.neutral) .decorator .fan3,
+.spinner:global(.neutral) .decorator .fan4 {
+  background-color: var(--semantic-color-on-background-main);
+}
+.spinner:global(.neutral) .decorator .cap {
+  background-color: var(--semantic-color-on-background-main);
+}
+.spinner:global(.neutral).transparent .bg {
+  background-color: transparent;
+}
+:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) {
+  color: var(--semantic-color-on-background-sub);
+}
+:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .bg {
+  background-color: var(--semantic-color-surface-default);
+}
+:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .decorator {
+  background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);
+}
+:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .decorator .fan1,
+:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .decorator .fan2,
+:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .decorator .fan3,
+:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .decorator .fan4 {
+  background-color: var(--semantic-color-on-background-main);
+}
+:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .decorator .cap {
+  background-color: var(--semantic-color-on-background-main);
+}
+:global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast).transparent .bg {
+  background-color: transparent;
+}
+.spinner:global(.light) {
+  color: var(--semantic-color-on-background-sub);
+}
+.spinner:global(.light) .bg {
+  background-color: var(--semantic-color-surface-default);
+}
+.spinner:global(.light) .decorator {
+  background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);
+}
+.spinner:global(.light) .decorator .fan1,
+.spinner:global(.light) .decorator .fan2,
+.spinner:global(.light) .decorator .fan3,
+.spinner:global(.light) .decorator .fan4 {
+  background-color: var(--semantic-color-on-background-main);
+}
+.spinner:global(.light) .decorator .cap {
+  background-color: var(--semantic-color-on-background-main);
+}
+.spinner:global(.light).transparent .bg {
+  background-color: transparent;
+}
+.spinner:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+  color: var(--semantic-color-on-background-sub);
+}
+.spinner:global(.game) .bg {
+  background-color: var(--semantic-color-surface-default);
+}
+.spinner:global(.game) .decorator {
+  background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);
+}
+.spinner:global(.game) .decorator .fan1,
+.spinner:global(.game) .decorator .fan2,
+.spinner:global(.game) .decorator .fan3,
+.spinner:global(.game) .decorator .fan4 {
+  background-color: var(--semantic-color-on-background-main);
+}
+.spinner:global(.game) .decorator .cap {
+  background-color: var(--semantic-color-on-background-main);
+}
+.spinner:global(.game).transparent .bg {
+  background-color: transparent;
+}
+:global(.green) .spinner:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+  color: var(--semantic-color-on-background-sub);
+}
+:global(.green) .spinner:global(.game) .bg {
+  background-color: var(--semantic-color-surface-default);
+}
+:global(.green) .spinner:global(.game) .decorator {
+  background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);
+}
+:global(.green) .spinner:global(.game) .decorator .fan1,
+:global(.green) .spinner:global(.game) .decorator .fan2,
+:global(.green) .spinner:global(.game) .decorator .fan3,
+:global(.green) .spinner:global(.game) .decorator .fan4 {
+  background-color: var(--semantic-color-on-background-main);
+}
+:global(.green) .spinner:global(.game) .decorator .cap {
+  background-color: var(--semantic-color-on-background-main);
+}
+:global(.green) .spinner:global(.game).transparent .bg {
+  background-color: transparent;
+}
+:global(.orange) .spinner:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+  color: var(--semantic-color-on-background-sub);
+}
+:global(.orange) .spinner:global(.game) .bg {
+  background-color: var(--semantic-color-surface-default);
+}
+:global(.orange) .spinner:global(.game) .decorator {
+  background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);
+}
+:global(.orange) .spinner:global(.game) .decorator .fan1,
+:global(.orange) .spinner:global(.game) .decorator .fan2,
+:global(.orange) .spinner:global(.game) .decorator .fan3,
+:global(.orange) .spinner:global(.game) .decorator .fan4 {
+  background-color: var(--semantic-color-on-background-main);
+}
+:global(.orange) .spinner:global(.game) .decorator .cap {
+  background-color: var(--semantic-color-on-background-main);
+}
+:global(.orange) .spinner:global(.game).transparent .bg {
+  background-color: transparent;
+}
+.spinnerContainer:global(.neutral) .blockClickOn .scrim {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+:global(.enact-a11y-high-contrast) .spinnerContainer:global(.neutral):global(.highContrast) .blockClickOn .scrim {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.spinnerContainer:global(.light) .blockClickOn .scrim {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.spinnerContainer:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+.spinnerContainer:global(.game) .blockClickOn .scrim {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+:global(.green) .spinnerContainer:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) .spinnerContainer:global(.game) .blockClickOn .scrim {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+:global(.orange) .spinnerContainer:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) .spinnerContainer:global(.game) .blockClickOn .scrim {
+  background-color: rgba(0, 0, 0, 0.3);
+}

package/Spinner/package.json

@@ -0,0 +1,3 @@
+{
+	"main": "Spinner.js"
+}