@enact/limestone 1.3.0 → 1.10.0

package/Chips/tests/Chip-specs.js

@@ -9,15 +9,30 @@ describe('Chip', function () {
     var icon = 'star';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
-      icon: icon
+      icon: icon,
+      id: "minimal-chip",
+      children: "Chip"
     }));
     var expected = 983080; // decimal converted charCode of Unicode 'star' character
     var actual = _react.screen.getByTestId('chip').textContent.codePointAt();
     expect(actual).toBe(expected);
   });
+  test('should support image if prop `isImage` is `true', function () {
+    var svg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MDAiIGhlaWdodD0iNzAwIiB2aWV3Qm94PSIwIDAgNzAwIDcwMCI+PGRlZnM+PHN0eWxlPi5hLC5ie2ZpbGw6I2ZmZjt9LmJ7b3BhY2l0eTowLjg7fTwvc3R5bGU+PC9kZWZzPjxwb2x5Z29uIGNsYXNzPSJhIiBwb2ludHM9IjM0OS45IDUyNy44IDE5OS45IDQyOS44IDE5OS45IDM3NC40IDM1MC4xIDQ3Mi43IDM0OS45IDM0OC41IDE5OS45IDI2MS4xIDE5OS45IDIwOS4zIDM1MCAyOTMuNiAzNTAgMjkzLjYgMzUwLjIgMjkzLjcgMzQ5LjkgMTY5LjMgMTAyLjcgNDguNSAxMDIuNyA0NzIuNiAzNTAuMSA2NTEuNiAzNDkuOSA1MjcuOCIvPjxwb2x5Z29uIGNsYXNzPSJiIiBwb2ludHM9IjM1MC4xIDY1MS42IDU5Ny4zIDQ3Mi44IDU5Ny4zIDM2Ni4zIDM0OS45IDUyNy44IDM1MC4xIDY1MS42Ii8+PHBvbHlnb24gY2xhc3M9ImIiIHBvaW50cz0iMzUwLjEgNDcyLjcgNTIzLjUgMzU5LjMgNTIzLjUgMjQ3LjQgMzQ5LjkgMzQ4LjUgMzUwLjEgNDcyLjciLz48cG9seWdvbiBjbGFzcz0iYiIgcG9pbnRzPSIzNTAgMjkzLjYgMzUwIDI5My42IDM1MC4yIDI5My43IDU5Ny4zIDE1NC44IDU5Ny4zIDQ4LjQgMzQ5LjkgMTY5LjMgMzUwIDI5My42Ii8+PC9zdmc+';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      "data-testid": "chip",
+      id: "chip",
+      icon: svg,
+      isImage: true,
+      children: "Chip"
+    }));
+    var actual = _react.screen.queryAllByRole('img')[0].firstChild;
+    expect(actual).toHaveAttribute('src', svg);
+  });
   test('should support `children` prop', function () {
     var children = 'label';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      id: "chip",
       children: children
     }));
     var expected = children;
@@ -28,9 +43,11 @@ describe('Chip', function () {
     var position = 'top';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       deleteButton: {
         position: position
-      }
+      },
+      children: "Chip"
     }));
     var chip = _react.screen.getByTestId('chip');
     var deleteButton = chip.querySelector('.deleteButtonContainer');
@@ -41,9 +58,11 @@ describe('Chip', function () {
     var position = 'bottom';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       deleteButton: {
         position: position
-      }
+      },
+      children: "Chip"
     }));
     var chip = _react.screen.getByTestId('chip');
     var deleteButton = chip.querySelector('.deleteButtonContainer');
@@ -54,9 +73,11 @@ describe('Chip', function () {
     var position = 'right';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       deleteButton: {
         position: position
-      }
+      },
+      children: "Chip"
     }));
     var chip = _react.screen.getByTestId('chip');
     var deleteButton = chip.querySelector('.deleteButtonContainer');
@@ -66,6 +87,7 @@ describe('Chip', function () {
   test('should render without delete button when deleteButton is false', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       deleteButton: false,
       children: "Test Chip"
     }));
@@ -76,6 +98,7 @@ describe('Chip', function () {
   test('should render without delete button when deleteButton is undefined', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       children: "Test Chip"
     }));
     var chip = _react.screen.getByTestId('chip');
@@ -85,29 +108,32 @@ describe('Chip', function () {
   test('should handle disabled state', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       disabled: true,
       children: "Disabled Chip"
     }));
-    var chipButton = _react.screen.getByRole('button');
+    var chipButton = _react.screen.getByRole('checkbox');
     expect(chipButton).toHaveAttribute('aria-disabled', 'true');
   });
   test('should handle disabled state with delete button', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       disabled: true,
       deleteButton: {
         position: 'right'
       },
       children: "Disabled Chip"
     }));
-    var allButtons = _react.screen.getAllByRole('button');
-    allButtons.forEach(function (button) {
-      expect(button).toHaveAttribute('aria-disabled', 'true');
-    });
+    var chip = _react.screen.getByRole('checkbox');
+    var deleteButton = _react.screen.getByRole('button');
+    expect(chip).toHaveAttribute('aria-disabled', 'true');
+    expect(deleteButton).toHaveAttribute('aria-disabled', 'true');
   });
   test('should use default delete button icon when not specified', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       deleteButton: {
         position: 'right'
       },
@@ -120,6 +146,7 @@ describe('Chip', function () {
   test('should use custom delete button icon when specified', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       deleteButton: {
         position: 'right',
         icon: 'trash'
@@ -136,16 +163,17 @@ describe('Chip', function () {
       id: chipId,
       children: "Test Chip"
     }));
-    var chipButton = _react.screen.getByRole('button');
+    var chipButton = _react.screen.getByRole('checkbox');
     expect(chipButton).toHaveAttribute('data-chip-index', chipId);
   });
   test('should handle onClick events', function () {
     var mockOnClick = jest.fn();
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      id: "chip",
       onClick: mockOnClick,
       children: "Clickable Chip"
     }));
-    var chipButton = _react.screen.getByRole('button');
+    var chipButton = _react.screen.getByRole('checkbox');
     _react.fireEvent.click(chipButton);
     expect(mockOnClick).toHaveBeenCalledTimes(1);
   });
@@ -154,6 +182,7 @@ describe('Chip', function () {
     var children = 'Star Chip';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       "data-testid": "chip",
+      id: "chip",
       icon: icon,
       children: children
     }));
@@ -168,9 +197,10 @@ describe('Chip', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
       className: customClass,
       "data-testid": "chip",
+      id: "chip",
       children: "Test Chip"
     }));
-    var chipButton = _react.screen.getByRole('button');
+    var chipButton = _react.screen.getByRole('checkbox');
     expect(chipButton).toHaveClass(customClass);
   });
   test('should render chip with required props only', function () {
@@ -180,7 +210,7 @@ describe('Chip', function () {
     }));
     var chipText = _react.screen.getByText('Minimal Chip');
     expect(chipText).toBeInTheDocument();
-    var chipButton = _react.screen.getByRole('button');
+    var chipButton = _react.screen.getByRole('checkbox');
     expect(chipButton).toHaveAttribute('data-chip-index', 'minimal-chip');
   });
 });

package/Chips/tests/Chips-specs.js

@@ -15,6 +15,7 @@ describe('Chips', function () {
   var defaultProps = {
     orientation: 'vertical',
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      id: "chip1",
       deleteButton: {
         icon: 'closex',
         position: 'right',
@@ -22,6 +23,7 @@ describe('Chips', function () {
       },
       children: "Chip 1"
     }, "chip1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      id: "chip2",
       deleteButton: {
         icon: 'closex',
         position: 'right',
@@ -46,13 +48,13 @@ describe('Chips', function () {
   it('should render correctly with default props', function () {
     var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, defaultProps))),
       container = _render.container;
-    expect(container.firstChild).toHaveClass('chips');
-    expect(container.firstChild).toHaveClass('vertical');
+    expect(container.firstChild.firstChild).toHaveClass('chips');
+    expect(container.firstChild.firstChild).toHaveClass('vertical');
   });
   it('should focus the correct chip on navigation', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, defaultProps)));
-    var chip1 = _react.screen.getByText('Chip 1').closest('[role="button"]');
-    var chip2 = _react.screen.getByText('Chip 2').closest('[role="button"]');
+    var chip1 = _react.screen.getByText('Chip 1').closest('[role="checkbox"]');
+    var chip2 = _react.screen.getByText('Chip 2').closest('[role="checkbox"]');
     chip1.setAttribute('tabIndex', '0');
     chip2.setAttribute('tabIndex', '0');
     chip1.focus();
@@ -72,7 +74,7 @@ describe('Chips', function () {
   });
   it('should call handleDelete when delete button is clicked', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, defaultProps)));
-    var chipButtons = _react.screen.getAllByRole('button', {
+    var chipButtons = _react.screen.getAllByRole('checkbox', {
       name: /Chip [12]/i
     });
     _react.fireEvent.focus(chipButtons[0]);
@@ -87,16 +89,16 @@ describe('Chips', function () {
     });
     var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, horizontalProps))),
       container = _render2.container;
-    expect(container.firstChild).toHaveClass('chips');
-    expect(container.firstChild).toHaveClass('horizontal');
+    expect(container.firstChild.firstChild).toHaveClass('chips');
+    expect(container.firstChild.firstChild).toHaveClass('horizontal');
   });
   it('should handle navigation in horizontal orientation', function () {
     var horizontalProps = _objectSpread(_objectSpread({}, defaultProps), {}, {
       orientation: 'horizontal'
     });
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, horizontalProps)));
-    var chip1 = _react.screen.getByText('Chip 1').closest('[role="button"]');
-    var chip2 = _react.screen.getByText('Chip 2').closest('[role="button"]');
+    var chip1 = _react.screen.getByText('Chip 1').closest('[role="checkbox"]');
+    var chip2 = _react.screen.getByText('Chip 2').closest('[role="checkbox"]');
     chip1.setAttribute('tabIndex', '0');
     chip2.setAttribute('tabIndex', '0');
     chip1.focus();
@@ -173,7 +175,7 @@ describe('Chips', function () {
       }, "chip1")]
     };
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, clickableProps)));
-    var chipButton = _react.screen.getByText('Chip 1').closest('[role="button"]');
+    var chipButton = _react.screen.getByText('Chip 1').closest('[role="checkbox"]');
     _react.fireEvent.click(chipButton);
     expect(mockOnClick).toHaveBeenCalledTimes(1);
   });
@@ -213,7 +215,7 @@ describe('Chips', function () {
       }, "chip2")]
     };
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, disabledProps)));
-    var disabledChips = _react.screen.getAllByRole('button');
+    var disabledChips = _react.screen.getAllByRole('checkbox');
     disabledChips.forEach(function (chip) {
       expect(chip).toHaveAttribute('aria-disabled', 'true');
     });
@@ -243,9 +245,9 @@ describe('Chips', function () {
     };
     var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, emptyProps))),
       container = _render3.container;
-    expect(container.firstChild).toHaveClass('chips');
-    expect(container.firstChild).toHaveClass('vertical');
-    var buttons = _react.screen.queryAllByRole('button');
+    expect(container.firstChild.firstChild).toHaveClass('chips');
+    expect(container.firstChild.firstChild).toHaveClass('vertical');
+    var buttons = _react.screen.queryAllByRole('checkbox');
     expect(buttons).toHaveLength(0);
   });
   it('should handle custom className', function () {
@@ -254,17 +256,17 @@ describe('Chips', function () {
     });
     var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, customProps))),
       container = _render4.container;
-    expect(container.firstChild).toHaveClass('chips');
-    expect(container.firstChild).toHaveClass('vertical');
-    expect(container.firstChild).toHaveClass('custom-chips-class');
+    expect(container.firstChild.firstChild).toHaveClass('chips');
+    expect(container.firstChild.firstChild).toHaveClass('vertical');
+    expect(container.firstChild.firstChild).toHaveClass('custom-chips-class');
   });
   it('should handle keyboard navigation with mixed orientations', function () {
     var verticalProps = _objectSpread(_objectSpread({}, defaultProps), {}, {
       orientation: 'vertical'
     });
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, verticalProps)));
-    var chip1 = _react.screen.getByText('Chip 1').closest('[role="button"]');
-    var chip2 = _react.screen.getByText('Chip 2').closest('[role="button"]');
+    var chip1 = _react.screen.getByText('Chip 1').closest('[role="checkbox"]');
+    var chip2 = _react.screen.getByText('Chip 2').closest('[role="checkbox"]');
     chip1.setAttribute('tabIndex', '0');
     chip2.setAttribute('tabIndex', '0');
 
@@ -296,8 +298,16 @@ describe('Chips', function () {
           position: 'right',
           onDelete: mockDeleteWithParams
         },
-        children: "Test Chip"
-      }, "chip1")]
+        children: "Chip 1"
+      }, "chip1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+        id: "chip2",
+        deleteButton: {
+          icon: 'closex',
+          position: 'right',
+          onDelete: mockDeleteWithParams
+        },
+        children: "Chip 2"
+      }, "chip2")]
     };
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, propsWithParams)));
     var deleteButtons = getAllDeleteButtons();

package/ColorPicker/ColorPicker.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.ColorPickerDecorator = exports.ColorPickerBase = exports.ColorPicker = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
 var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
 var _Layout = require("@enact/ui/Layout");
 var _Toggleable = _interopRequireDefault(require("@enact/ui/Toggleable"));
@@ -63,11 +64,12 @@ var SpottableButton = (0, _Spottable["default"])(_Button.ButtonBase);
  * @ui
  * @private
  */
-var PopupContent = function PopupContent(_ref) {
-  var color = _ref.color,
-    colorHandler = _ref.colorHandler,
-    css = _ref.css,
-    presetColors = _ref.presetColors;
+var _PopupContent = function PopupContent(props) {
+  (0, _util.checkPropTypes)(_PopupContent, props);
+  var color = props.color,
+    colorHandler = props.colorHandler,
+    css = props.css,
+    presetColors = props.presetColors;
   var _useState = (0, _react.useState)(0),
     _useState2 = _slicedToArray(_useState, 2),
     hue = _useState2[0],
@@ -173,7 +175,7 @@ var PopupContent = function PopupContent(_ref) {
     })]
   });
 };
-PopupContent.propTypes = {
+_PopupContent.propTypes = {
   /**
    * Indicates the color.
    *
@@ -295,13 +297,13 @@ var ColorPickerBase = exports.ColorPickerBase = (0, _kind["default"])({
     text: _propTypes["default"].string
   },
   handlers: {
-    handleClosePopup: function handleClosePopup(ev, _ref2) {
-      var onTogglePopup = _ref2.onTogglePopup;
+    handleClosePopup: function handleClosePopup(ev, _ref) {
+      var onTogglePopup = _ref.onTogglePopup;
       onTogglePopup();
     },
-    handleOpenPopup: function handleOpenPopup(ev, _ref3) {
-      var disabled = _ref3.disabled,
-        onTogglePopup = _ref3.onTogglePopup;
+    handleOpenPopup: function handleOpenPopup(ev, _ref2) {
+      var disabled = _ref2.disabled,
+        onTogglePopup = _ref2.onTogglePopup;
       if (!disabled) {
         onTogglePopup();
       }
@@ -311,19 +313,19 @@ var ColorPickerBase = exports.ColorPickerBase = (0, _kind["default"])({
     css: _ColorPickerModule["default"],
     publicClassNames: true
   },
-  render: function render(_ref4) {
-    var color = _ref4.color,
-      colorHandler = _ref4.colorHandler,
-      css = _ref4.css,
-      _ref4$disabled = _ref4.disabled,
-      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
-      handleClosePopup = _ref4.handleClosePopup,
-      handleOpenPopup = _ref4.handleOpenPopup,
-      _ref4$popupOpen = _ref4.popupOpen,
-      popupOpen = _ref4$popupOpen === void 0 ? false : _ref4$popupOpen,
-      presetColors = _ref4.presetColors,
-      text = _ref4.text,
-      rest = _objectWithoutProperties(_ref4, _excluded);
+  render: function render(_ref3) {
+    var color = _ref3.color,
+      colorHandler = _ref3.colorHandler,
+      css = _ref3.css,
+      _ref3$disabled = _ref3.disabled,
+      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+      handleClosePopup = _ref3.handleClosePopup,
+      handleOpenPopup = _ref3.handleOpenPopup,
+      _ref3$popupOpen = _ref3.popupOpen,
+      popupOpen = _ref3$popupOpen === void 0 ? false : _ref3$popupOpen,
+      presetColors = _ref3.presetColors,
+      text = _ref3.text,
+      rest = _objectWithoutProperties(_ref3, _excluded);
     delete rest.onTogglePopup;
     var CloseIcon = (0, _react.useCallback)(function (props) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], _objectSpread(_objectSpread({}, props), {}, {
@@ -377,7 +379,7 @@ var ColorPickerBase = exports.ColorPickerBase = (0, _kind["default"])({
               size: "small"
             })
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PopupContent, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupContent, {
           color: color,
           colorHandler: colorHandler,
           css: css,

package/ContextualMenuDecorator/ContextualMenuDecorator.d.ts

@@ -18,11 +18,10 @@ wrapped component.
  */
   openProp?: string;
 }
-export interface ContextualMenuDecoratorProps
-  extends Merge<
-    Merge<ui_Toggleable_ToggleableProps, limestone_Skinnable_SkinnableProps>,
-    limestone_ContextualPopupDecorator_ContextualPopupDecoratorProps
-  > {
+export interface ContextualMenuDecoratorProps extends Merge<
+  Merge<ui_Toggleable_ToggleableProps, limestone_Skinnable_SkinnableProps>,
+  limestone_ContextualPopupDecorator_ContextualPopupDecoratorProps
+> {
   /**
    * Direction of popup with respect to the wrapped component.
    */

package/ContextualPopupDecorator/ContextualPopup.module.css

@@ -12,7 +12,7 @@
 :global(.enact-locale-non-latin) .contextualPopup {
   font-family: "Limestone";
   font-weight: var(--primitive-font-weight-light);
-  font-size: 1.125rem;
+  font-size: var(--primitive-font-size-54);
   font-style: normal;
 }
 :global(.enact-locale-km) .contextualPopup {
@@ -47,7 +47,7 @@
   position: absolute;
   min-height: 4rem;
   min-width: 4rem;
-  padding: 0.75rem 0;
+  padding: var(--primitive-spacing-36) 0;
   background-clip: padding-box;
   box-sizing: border-box;
 }
@@ -56,52 +56,52 @@
   /* Needed to prevent global class being added in the DOM */
 }
 .contextualPopup .container.above.overlap {
-  margin-top: 0.75rem;
+  margin-top: var(--primitive-spacing-36);
 }
 .contextualPopup .container.above.small {
-  margin-top: -0.375rem;
+  margin-top: calc(var(--primitive-spacing-18) * -1);
 }
 .contextualPopup .container.above.large {
-  margin-top: -0.75rem;
+  margin-top: calc(var(--primitive-spacing-36) * -1);
 }
 .contextualPopup .container.below.overlap {
-  margin-top: -0.75rem;
+  margin-top: calc(var(--primitive-spacing-36) * -1);
 }
 .contextualPopup .container.below.small {
-  margin-top: 0.375rem;
+  margin-top: var(--primitive-spacing-18);
 }
 .contextualPopup .container.below.large {
-  margin-top: 0.75rem;
+  margin-top: var(--primitive-spacing-36);
 }
 .contextualPopup .container.right.top.overlap,
 .contextualPopup .container.right.middle.overlap,
 .contextualPopup .container.right.bottom.overlap {
-  margin-left: -0.75rem;
+  margin-left: calc(var(--primitive-spacing-36) * -1);
 }
 .contextualPopup .container.right.top.small,
 .contextualPopup .container.right.middle.small,
 .contextualPopup .container.right.bottom.small {
-  margin-left: 0.375rem;
+  margin-left: var(--primitive-spacing-18);
 }
 .contextualPopup .container.right.top.large,
 .contextualPopup .container.right.middle.large,
 .contextualPopup .container.right.bottom.large {
-  margin-left: 0.75rem;
+  margin-left: var(--primitive-spacing-36);
 }
 .contextualPopup .container.left.top.overlap,
 .contextualPopup .container.left.middle.overlap,
 .contextualPopup .container.left.bottom.overlap {
-  margin-left: 0.75rem;
+  margin-left: var(--primitive-spacing-36);
 }
 .contextualPopup .container.left.top.small,
 .contextualPopup .container.left.middle.small,
 .contextualPopup .container.left.bottom.small {
-  margin-left: -0.375rem;
+  margin-left: calc(var(--primitive-spacing-18) * -1);
 }
 .contextualPopup .container.left.top.large,
 .contextualPopup .container.left.middle.large,
 .contextualPopup .container.left.bottom.large {
-  margin-left: -0.75rem;
+  margin-left: calc(var(--primitive-spacing-36) * -1);
 }
 .contextualPopup .container.fixedSize {
   overflow: hidden;
@@ -134,7 +134,7 @@
 }
 .contextualPopup:global(.neutral) .arrow {
   stroke: var(--semantic-color-stroke-overlay-default);
-  stroke-width: 0.021rem;
+  stroke-width: 0.063rem;
 }
 .contextualPopup:global(.neutral) .arrow .arrowFill {
   fill: var(--semantic-color-surface-context-group);
@@ -142,8 +142,8 @@
 .contextualPopup:global(.neutral) .outline {
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: calc(0.063rem * -1);
 }
 :global(.enact-a11y-high-contrast) .contextualPopup:global(.neutral):global(.highContrast) .container {
   background-color: var(--semantic-color-surface-context-group);
@@ -155,17 +155,17 @@
   box-shadow: none;
 }
 :global(.enact-a11y-high-contrast) .contextualPopup:global(.neutral):global(.highContrast) .arrow {
-  stroke: #7c848b;
-  stroke-width: 0.021rem;
+  stroke: var(--semantic-color-stroke-main);
+  stroke-width: 0.063rem;
 }
 :global(.enact-a11y-high-contrast) .contextualPopup:global(.neutral):global(.highContrast) .arrow .arrowFill {
   fill: var(--semantic-color-surface-context-group);
 }
 :global(.enact-a11y-high-contrast) .contextualPopup:global(.neutral):global(.highContrast) .outline {
-  outline-color: #7c848b;
+  outline-color: var(--semantic-color-stroke-main);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: calc(0.063rem * -1);
 }
 .contextualPopup:global(.light) .container {
   background-color: var(--semantic-color-surface-context-group);
@@ -178,7 +178,7 @@
 }
 .contextualPopup:global(.light) .arrow {
   stroke: var(--semantic-color-stroke-overlay-default);
-  stroke-width: 0.021rem;
+  stroke-width: 0.063rem;
 }
 .contextualPopup:global(.light) .arrow .arrowFill {
   fill: var(--semantic-color-surface-context-group);
@@ -186,8 +186,8 @@
 .contextualPopup:global(.light) .outline {
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: calc(0.063rem * -1);
 }
 .contextualPopup:global(.game) {
   --semantic-color-surface-default: #2d224c;
@@ -205,7 +205,7 @@
 }
 .contextualPopup:global(.game) .arrow {
   stroke: var(--semantic-color-stroke-overlay-default);
-  stroke-width: 0.021rem;
+  stroke-width: 0.063rem;
 }
 .contextualPopup:global(.game) .arrow .arrowFill {
   fill: var(--semantic-color-surface-context-group);
@@ -213,8 +213,8 @@
 .contextualPopup:global(.game) .outline {
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: calc(0.063rem * -1);
 }
 :global(.green) .contextualPopup:global(.game) {
   --semantic-color-surface-default: #1F2C24;
@@ -231,7 +231,7 @@
 }
 :global(.green) .contextualPopup:global(.game) .arrow {
   stroke: var(--semantic-color-stroke-overlay-default);
-  stroke-width: 0.021rem;
+  stroke-width: 0.063rem;
 }
 :global(.green) .contextualPopup:global(.game) .arrow .arrowFill {
   fill: var(--semantic-color-surface-context-group);
@@ -239,8 +239,8 @@
 :global(.green) .contextualPopup:global(.game) .outline {
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: calc(0.063rem * -1);
 }
 :global(.orange) .contextualPopup:global(.game) {
   --semantic-color-surface-default: #422923;
@@ -257,7 +257,7 @@
 }
 :global(.orange) .contextualPopup:global(.game) .arrow {
   stroke: var(--semantic-color-stroke-overlay-default);
-  stroke-width: 0.021rem;
+  stroke-width: 0.063rem;
 }
 :global(.orange) .contextualPopup:global(.game) .arrow .arrowFill {
   fill: var(--semantic-color-surface-context-group);
@@ -265,6 +265,6 @@
 :global(.orange) .contextualPopup:global(.game) .outline {
   outline-color: var(--semantic-color-stroke-overlay-default);
   outline-style: solid;
-  outline-width: 0.021rem;
-  outline-offset: -0.021rem;
+  outline-width: 0.063rem;
+  outline-offset: calc(0.063rem * -1);
 }