newspack-components 4.7.0 → 4.8.0-alpha.1

package/dist/cjs/index.js

@@ -4,18 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Accordion", {
-  enumerable: true,
-  get: function get() {
-    return _accordion["default"];
-  }
-});
-Object.defineProperty(exports, "AccordionPanel", {
-  enumerable: true,
-  get: function get() {
-    return _accordion.AccordionPanel;
-  }
-});
 Object.defineProperty(exports, "ActionCard", {
   enumerable: true,
   get: function get() {
@@ -40,12 +28,6 @@ Object.defineProperty(exports, "AutocompleteWithSuggestions", {
     return _autocompleteWithSuggestions["default"];
   }
 });
-Object.defineProperty(exports, "Badge", {
-  enumerable: true,
-  get: function get() {
-    return _badge["default"];
-  }
-});
 Object.defineProperty(exports, "BoxContrast", {
   enumerable: true,
   get: function get() {
@@ -100,6 +82,12 @@ Object.defineProperty(exports, "CategoryAutocomplete", {
     return _categoryAutocomplete["default"];
   }
 });
+Object.defineProperty(exports, "CollapsibleGroup", {
+  enumerable: true,
+  get: function get() {
+    return _collapsibleGroup["default"];
+  }
+});
 Object.defineProperty(exports, "ColorPicker", {
   enumerable: true,
   get: function get() {
@@ -136,6 +124,12 @@ Object.defineProperty(exports, "Drawer", {
     return _drawer["default"];
   }
 });
+Object.defineProperty(exports, "EmptyState", {
+  enumerable: true,
+  get: function get() {
+    return _emptyState["default"];
+  }
+});
 Object.defineProperty(exports, "Footer", {
   enumerable: true,
   get: function get() {
@@ -262,6 +256,12 @@ Object.defineProperty(exports, "Router", {
     return _router["default"];
   }
 });
+Object.defineProperty(exports, "STAT_CARD_NULL_GLYPH", {
+  enumerable: true,
+  get: function get() {
+    return _statCard.STAT_CARD_NULL_GLYPH;
+  }
+});
 Object.defineProperty(exports, "SectionHeader", {
   enumerable: true,
   get: function get() {
@@ -280,6 +280,18 @@ Object.defineProperty(exports, "Settings", {
     return _settings["default"];
   }
 });
+Object.defineProperty(exports, "StatCard", {
+  enumerable: true,
+  get: function get() {
+    return _statCard["default"];
+  }
+});
+Object.defineProperty(exports, "StatusIndicator", {
+  enumerable: true,
+  get: function get() {
+    return _statusIndicator["default"];
+  }
+});
 Object.defineProperty(exports, "StepsList", {
   enumerable: true,
   get: function get() {
@@ -383,12 +395,10 @@ Object.defineProperty(exports, "withWizardScreen", {
     return _withWizardScreen["default"];
   }
 });
-var _accordion = _interopRequireWildcard(require("./accordion"));
 var _actionCard = _interopRequireDefault(require("./action-card"));
 var _autocompleteTokenfield = _interopRequireDefault(require("./autocomplete-tokenfield"));
 var _autocompleteWithSuggestions = _interopRequireDefault(require("./autocomplete-with-suggestions"));
 var _autocompleteWithLatestPosts = _interopRequireDefault(require("./autocomplete-with-latest-posts"));
-var _badge = _interopRequireDefault(require("./badge"));
 var _breadcrumbs = _interopRequireDefault(require("./breadcrumbs"));
 var _button = _interopRequireDefault(require("./button"));
 var _boxContrast = _interopRequireDefault(require("./box-contrast"));
@@ -399,12 +409,14 @@ var _cardSettingsGroup = _interopRequireDefault(require("./card-settings-group")
 var _cardSortableList = _interopRequireDefault(require("./card-sortable-list"));
 var _integrationIcon = _interopRequireDefault(require("./integration-icon"));
 var _categoryAutocomplete = _interopRequireDefault(require("./category-autocomplete"));
+var _collapsibleGroup = _interopRequireDefault(require("./collapsible-group"));
 var _colorPicker = _interopRequireDefault(require("./color-picker"));
 var _confirmDialog = _interopRequireDefault(require("./confirm-dialog"));
 var _customSelectControl = _interopRequireDefault(require("./custom-select-control"));
 var _dataviews = _interopRequireDefault(require("./dataviews"));
 var _divider = _interopRequireDefault(require("./divider"));
 var _drawer = _interopRequireDefault(require("./drawer"));
+var _emptyState = _interopRequireDefault(require("./empty-state"));
 var _formTokenField = _interopRequireDefault(require("./form-token-field"));
 var _footer = _interopRequireDefault(require("./footer"));
 var _handoff = _interopRequireDefault(require("./handoff"));
@@ -427,6 +439,8 @@ var _radioControl = _interopRequireDefault(require("./radio-control"));
 var _sectionHeader = _interopRequireDefault(require("./section-header"));
 var _selectControl = _interopRequireDefault(require("./select-control"));
 var _settings = _interopRequireDefault(require("./settings"));
+var _statCard = _interopRequireWildcard(require("./stat-card"));
+var _statusIndicator = _interopRequireDefault(require("./status-indicator"));
 var _stepsList = _interopRequireDefault(require("./steps-list"));
 var _stepsListItem = _interopRequireDefault(require("./steps-list-item"));
 var _styleCard = _interopRequireDefault(require("./style-card"));

package/dist/cjs/info-button/index.js

@@ -7,55 +7,71 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _element = require("@wordpress/element");
-var _components = require("@wordpress/components");
+var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _ui = require("@wordpress/ui");
 require("./style.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className"];
-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) { (0, _defineProperty2["default"])(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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
- * Info Button
- */ /**
- * WordPress dependencies.
- */ /**
+var _excluded = ["description", "className", "triggerLabel", "aria-label"];
+/**
  * External dependencies.
- */ /**
+ */
+/**
+ * WordPress dependencies.
+ */
+/**
  * Internal dependencies.
  */
-var InfoButton = /*#__PURE__*/function (_Component) {
-  function InfoButton() {
-    (0, _classCallCheck2["default"])(this, InfoButton);
-    return _callSuper(this, InfoButton, arguments);
+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) { (0, _defineProperty2["default"])(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; }
+/**
+ * Uses `Popover` rather than `Tooltip`: a tooltip never opens from a touch
+ * pointer, and its popup is not exposed to assistive technology.
+ */
+var InfoButton = (0, _element.forwardRef)(function InfoButton(_ref, ref) {
+  var description = _ref.description,
+    className = _ref.className,
+    triggerLabel = _ref.triggerLabel,
+    ariaLabel = _ref['aria-label'],
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  if (!description) {
+    return null;
   }
-  (0, _inherits2["default"])(InfoButton, _Component);
-  return (0, _createClass2["default"])(InfoButton, [{
-    key: "render",
-    value:
-    /**
-     * Render.
-     */
-    function render() {
-      var _this$props = this.props,
-        className = _this$props.className,
-        otherProps = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, _objectSpread(_objectSpread({}, otherProps), {}, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: (0, _classnames["default"])('newspack-info-button', className),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-            icon: _icons.info
-          })
-        })
-      }));
-    }
-  }]);
-}(_element.Component);
+  var name = triggerLabel || ariaLabel || (0, _i18n.__)('More information', 'newspack-plugin');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Popover.Root, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Popover.Trigger, _objectSpread(_objectSpread({
+      ref: ref,
+      openOnHover: true,
+      delay: 200,
+      closeDelay: 200,
+      "aria-label": name,
+      className: (0, _classnames["default"])('newspack-info-button', className)
+    }, rest), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+        icon: _icons.info,
+        size: 20
+      })
+    })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Popover.Popup, {
+      variant: "unstyled",
+      className: "newspack-info-button__popup",
+      portal: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Popover.Portal, {
+        className: "newspack-info-button__portal",
+        container: (0, _ui.getWpCompatOverlaySlot)()
+      }),
+      positioner: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Popover.Positioner, {
+        className: "newspack-info-button__positioner",
+        side: "top",
+        sideOffset: 4
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.VisuallyHidden, {
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Popover.Title, {}),
+        children: name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Popover.Description, {
+        children: description
+      })]
+    })]
+  });
+});
 var _default = exports["default"] = InfoButton;

package/dist/cjs/info-button/index.test.js

@@ -0,0 +1,199 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = require("@testing-library/react");
+var _element = require("@wordpress/element");
+var _ = _interopRequireDefault(require("./"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies.
+ */
+
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+var DESCRIPTION = 'Number of articles read in the last 30 day period.';
+var getTrigger = function getTrigger() {
+  var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'More information';
+  return _react.screen.getByRole('button', {
+    name: name
+  });
+};
+describe('InfoButton', function () {
+  afterEach(function () {
+    jest.useRealTimers();
+  });
+  it('names the trigger briefly rather than with the whole description', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      description: DESCRIPTION
+    }));
+    expect(getTrigger()).toBeInTheDocument();
+    expect(_react.screen.queryByRole('button', {
+      name: DESCRIPTION
+    })).not.toBeInTheDocument();
+  });
+  it('renders nothing at all without a description', function () {
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {})),
+      container = _render.container;
+    expect(_react.screen.queryByRole('button')).not.toBeInTheDocument();
+    expect(container.firstChild).toBeNull();
+  });
+  it('treats an empty description as nothing to explain', function () {
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        description: ""
+      })),
+      container = _render2.container;
+    expect(_react.screen.queryByRole('button')).not.toBeInTheDocument();
+    expect(container.firstChild).toBeNull();
+  });
+  it('lets a consumer name the trigger for its own context', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      description: DESCRIPTION,
+      triggerLabel: "More information about Articles read"
+    }));
+    expect(getTrigger('More information about Articles read')).toBeInTheDocument();
+  });
+  it('leaves the trigger in the tab order', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      description: DESCRIPTION
+    }));
+    expect(getTrigger().tabIndex).toBeGreaterThanOrEqual(0);
+  });
+  it('keeps the description hidden until the trigger is activated', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      description: DESCRIPTION
+    }));
+    expect(_react.screen.queryByText(DESCRIPTION)).not.toBeInTheDocument();
+    expect(getTrigger()).toHaveAttribute('aria-expanded', 'false');
+  });
+  it('reveals the description on click, so touch users can reach it', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      description: DESCRIPTION
+    }));
+    _react.fireEvent.click(getTrigger());
+    expect(_react.screen.getByText(DESCRIPTION)).toBeInTheDocument();
+    expect(getTrigger()).toHaveAttribute('aria-expanded', 'true');
+  });
+  it('reveals the description on hover, once the pointer has rested', function () {
+    jest.useFakeTimers();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      description: DESCRIPTION
+    }));
+    var trigger = getTrigger();
+    _react.fireEvent.mouseEnter(trigger);
+    _react.fireEvent.mouseMove(trigger);
+    expect(_react.screen.queryByText(DESCRIPTION)).not.toBeInTheDocument();
+    (0, _react.act)(function () {
+      return jest.advanceTimersByTime(200);
+    });
+    expect(_react.screen.getByText(DESCRIPTION)).toBeInTheDocument();
+  });
+  it('holds the description open long enough to overshoot the trigger', function () {
+    jest.useFakeTimers();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      description: DESCRIPTION
+    }));
+    var trigger = getTrigger();
+    _react.fireEvent.mouseEnter(trigger);
+    _react.fireEvent.mouseMove(trigger);
+    (0, _react.act)(function () {
+      return jest.advanceTimersByTime(200);
+    });
+    expect(_react.screen.getByText(DESCRIPTION)).toBeInTheDocument();
+    _react.fireEvent.mouseLeave(trigger);
+    expect(_react.screen.getByText(DESCRIPTION)).toBeInTheDocument();
+    (0, _react.act)(function () {
+      return jest.advanceTimersByTime(200);
+    });
+    expect(_react.screen.queryByText(DESCRIPTION)).not.toBeInTheDocument();
+  });
+  it('uses a native button, so Enter and Space activate it', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      description: DESCRIPTION
+    }));
+    var trigger = getTrigger();
+    expect(trigger.tagName).toBe('BUTTON');
+    expect(trigger).toHaveAttribute('type', 'button');
+  });
+  it('closes on Escape and hands focus back to the trigger', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      description: DESCRIPTION
+    }));
+    var trigger = getTrigger();
+    trigger.focus();
+    _react.fireEvent.click(trigger);
+    expect(_react.screen.getByText(DESCRIPTION)).toBeInTheDocument();
+    _react.fireEvent.keyDown(document.activeElement, {
+      key: 'Escape'
+    });
+    expect(_react.screen.queryByText(DESCRIPTION)).not.toBeInTheDocument();
+    expect(trigger).toHaveFocus();
+  });
+  it('gives the popup an accessible name of its own', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      description: DESCRIPTION
+    }));
+    _react.fireEvent.click(getTrigger());
+    expect(_react.screen.getByRole('dialog', {
+      name: 'More information'
+    })).toBeInTheDocument();
+  });
+  it('describes the popup with the description rather than naming it', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      description: DESCRIPTION
+    }));
+    _react.fireEvent.click(getTrigger());
+    var paragraph = _react.screen.getByText(DESCRIPTION);
+    expect(paragraph.id).toBeTruthy();
+    expect(document.querySelector("[aria-describedby=\"".concat(paragraph.id, "\"]"))).toBeInTheDocument();
+  });
+  it('renders through its own portal and positioner', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      description: DESCRIPTION
+    }));
+    _react.fireEvent.click(getTrigger());
+    var paragraph = _react.screen.getByText(DESCRIPTION);
+    expect(paragraph.closest('.newspack-info-button__positioner')).toBeInTheDocument();
+    expect(paragraph.closest('.newspack-info-button__portal')).toBeInTheDocument();
+  });
+  it('forwards unknown props to the trigger', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      description: DESCRIPTION,
+      id: "articles-read-info",
+      "data-testid": "info"
+    }));
+    var trigger = getTrigger();
+    expect(trigger).toHaveAttribute('id', 'articles-read-info');
+    expect(trigger).toHaveAttribute('data-testid', 'info');
+  });
+  it('keeps its own class alongside a consumer className', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      description: DESCRIPTION,
+      className: "custom-class"
+    }));
+    expect(getTrigger()).toHaveClass('newspack-info-button', 'custom-class');
+  });
+  it('hands a consumer ref the trigger itself', function () {
+    var ref = (0, _element.createRef)();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      description: DESCRIPTION,
+      ref: ref
+    }));
+    expect(ref.current).toBe(getTrigger());
+  });
+  it('names the trigger and the popup alike when given an aria-label', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      description: DESCRIPTION,
+      "aria-label": "More information about Articles read"
+    }));
+    _react.fireEvent.click(getTrigger('More information about Articles read'));
+    expect(_react.screen.getByRole('dialog', {
+      name: 'More information about Articles read'
+    })).toBeInTheDocument();
+  });
+});

package/dist/cjs/info-button/style.scss

@@ -1,18 +1,50 @@
-/**
- * Info Button
- */
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+@use "~@wordpress/base-styles/z-index" as wp-z;
 
 .newspack-info-button {
-	display: inline-block;
-	flex: 0 0 24px;
-	height: 24px;
-	margin: 0;
-	margin-left: 4px;
-	width: 24px;
+	align-items: center;
+	background: none;
+	border: none;
+	border-radius: var(--wpds-border-radius-sm, #{wp-vars.$radius-small});
+	color: inherit;
+	cursor: var(--wpds-cursor-control, pointer);
+	display: inline-flex;
+	flex: 0 0 auto;
+	height: wp-vars.$button-size-small;
+	justify-content: center;
+	padding: 0;
 	vertical-align: middle;
+	width: wp-vars.$button-size-small;
 
 	svg {
 		display: block;
 		fill: currentcolor;
 	}
+
+	&:focus-visible {
+		outline: var(--wp-admin-border-width-focus, #{wp-vars.$border-width-focus-fallback}) solid var(--wp-admin-theme-color, #{wp-colors.$gray-900});
+		outline-offset: 0;
+	}
+}
+
+.newspack-info-button__portal {
+	--wp-ui-popover-z-index: #{wp-z.z-index(".components-popover")};
+}
+
+.newspack-info-button__positioner {
+	max-width: var(--wpds-dimension-surface-width-sm, calc(#{wp-vars.$grid-unit} * 40));
+}
+
+.newspack-info-button__popup {
+	background-color: wp-colors.$gray-900;
+	border-radius: var(--wpds-border-radius-md, #{wp-vars.$radius-medium});
+	box-shadow: var(--wpds-elevation-sm, #{wp-vars.$elevation-small});
+	color: wp-colors.$white;
+	outline: 0;
+	padding: var(--wpds-dimension-padding-xs, #{wp-vars.$grid-unit-05}) var(--wpds-dimension-padding-sm, #{wp-vars.$grid-unit-10});
+
+	@media (forced-colors: active) {
+		border: var(--wpds-border-width-xs, #{wp-vars.$border-width}) solid CanvasText;
+	}
 }

package/dist/cjs/modal/style.scss

@@ -2,18 +2,18 @@
  * Modal
  */
 
-@use "../../../colors/colors.module" as colors;
+@use "../../../colors/colors.module" as np-colors;
 
 .newspack-modal {
 	// Color
-	--wp-admin-theme-color: #{colors.$primary-600};
-	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
-	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
-	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
-	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
-	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
+	--wp-admin-theme-color: #{np-colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{np-colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{np-colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{np-colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{np-colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{np-colors.$primary-800--rgb};
+	--wp-admin-theme-color-lighter-10: #{np-colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{np-colors.$primary-000--rgb};
 
 	border-radius: 8px;
 	margin: auto;
@@ -58,11 +58,11 @@
 
 	&--destructive {
 		.components-button.is-primary {
-			background-color: colors.$error-500;
-			color: colors.$neutral-000;
+			background-color: np-colors.$error-500;
+			color: np-colors.$neutral-000;
 			&:hover,
 			&:focus {
-				background-color: colors.$error-600;
+				background-color: np-colors.$error-600;
 			}
 		}
 	}

package/dist/cjs/newspack-icon/style.scss

@@ -1,22 +1,22 @@
-@use '../../../colors/colors.module.scss' as colors;
+@use "../../../colors/colors.module" as np-colors;
 
 /**
  * Newspack Icon
  */
 
 .newspack-icon {
-	background: colors.$primary-600;
+	background: np-colors.$primary-600;
 	fill: white;
 	padding: 12px;
 
 	&--white {
 		background: white;
-		fill: colors.$primary-600;
+		fill: np-colors.$primary-600;
 	}
 
 	&--simple {
 		background: none;
-		fill: colors.$primary-600;
+		fill: np-colors.$primary-600;
 		padding: 0;
 	}
 

package/dist/cjs/notice/style.scss

@@ -4,7 +4,7 @@
 
 @use "sass:color";
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../colors/colors.module" as colors;
+@use "../../../colors/colors.module" as np-colors;
 
 .newspack-notice {
 	align-items: center;
@@ -23,7 +23,7 @@
 	}
 
 	&__is-debug {
-		background: colors.$primary-600;
+		background: np-colors.$primary-600;
 		border-radius: 50%;
 		bottom: 16px;
 		box-shadow: 0 0 8px 4px rgba(black, 0.08);
@@ -63,7 +63,7 @@
 	}
 
 	&__is-help {
-		background: colors.$primary-050;
+		background: np-colors.$primary-050;
 
 		> svg {
 			fill: var(--wp-admin-theme-color);

package/dist/cjs/page/style.scss

@@ -1,4 +1,4 @@
-@use "../../../colors/colors.module" as colors;
+@use "../../../colors/colors.module" as np-colors;
 @use "~@wordpress/base-styles/colors" as wp-colors;
 @use "~@wordpress/base-styles/mixins" as wp-mixins;
 @use "~@wordpress/base-styles/variables" as wp-vars;
@@ -20,21 +20,21 @@
 // without per-component overrides.
 /* stylelint-disable plugin-wpds/no-setting-wpds-custom-properties -- deliberate Newspack brand override of the wpds brand tokens. */
 :root {
-	--wpds-color-background-interactive-brand-strong: #{colors.$primary-600};
-	--wpds-color-background-interactive-brand-strong-active: #{colors.$primary-800};
-	--wpds-color-background-interactive-brand-weak-active: #{colors.$primary-000};
-	--wpds-color-background-surface-brand: #{colors.$primary-000};
-	--wpds-color-background-thumb-brand: #{colors.$primary-600};
-	--wpds-color-background-thumb-brand-active: #{colors.$primary-600};
-	--wpds-color-foreground-interactive-brand: #{colors.$primary-600};
-	--wpds-color-foreground-interactive-brand-active: #{colors.$primary-800};
-	--wpds-color-foreground-interactive-brand-disabled: #{colors.$primary-400};
-	--wpds-color-stroke-focus: #{colors.$primary-600};
-	--wpds-color-stroke-interactive-brand: #{colors.$primary-600};
-	--wpds-color-stroke-interactive-brand-active: #{colors.$primary-800};
-	--wpds-color-stroke-interactive-brand-disabled: #{colors.$primary-100};
-	--wpds-color-stroke-surface-brand: #{colors.$primary-000};
-	--wpds-color-stroke-surface-brand-strong: #{colors.$primary-600};
+	--wpds-color-background-interactive-brand-strong: #{np-colors.$primary-600};
+	--wpds-color-background-interactive-brand-strong-active: #{np-colors.$primary-800};
+	--wpds-color-background-interactive-brand-weak-active: #{np-colors.$primary-000};
+	--wpds-color-background-surface-brand: #{np-colors.$primary-000};
+	--wpds-color-background-thumb-brand: #{np-colors.$primary-600};
+	--wpds-color-background-thumb-brand-active: #{np-colors.$primary-600};
+	--wpds-color-foreground-interactive-brand: #{np-colors.$primary-600};
+	--wpds-color-foreground-interactive-brand-active: #{np-colors.$primary-800};
+	--wpds-color-foreground-interactive-brand-disabled: #{np-colors.$primary-400};
+	--wpds-color-stroke-focus: #{np-colors.$primary-600};
+	--wpds-color-stroke-interactive-brand: #{np-colors.$primary-600};
+	--wpds-color-stroke-interactive-brand-active: #{np-colors.$primary-800};
+	--wpds-color-stroke-interactive-brand-disabled: #{np-colors.$primary-100};
+	--wpds-color-stroke-surface-brand: #{np-colors.$primary-000};
+	--wpds-color-stroke-surface-brand-strong: #{np-colors.$primary-600};
 }
 /* stylelint-enable plugin-wpds/no-setting-wpds-custom-properties */