newspack-components 4.7.0 → 4.8.0

package/dist/esm/stat-card/label.js

@@ -0,0 +1,61 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["suffix", "heading", "className", "children"];
+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; }
+/**
+ * WordPress dependencies.
+ */
+import { forwardRef, useEffect } from '@wordpress/element';
+import { Stack } from '@wordpress/ui';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import { useStatCardContext } from './context';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var headings = {
+  2: 'h2',
+  3: 'h3',
+  4: 'h4',
+  5: 'h5',
+  6: 'h6'
+};
+var Label = forwardRef(function Label(_ref, ref) {
+  var suffix = _ref.suffix,
+    heading = _ref.heading,
+    className = _ref.className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var context = useStatCardContext();
+  var level = heading !== null && heading !== void 0 ? heading : context.heading;
+  // Consumers are largely untyped JS, where an out-of-range level would
+  // otherwise render an <h7>, which carries no heading role at all.
+  var Heading = headings[level] || headings[3];
+  useEffect(function () {
+    if ('production' === process.env.NODE_ENV || headings[level]) {
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.warn("StatCard: unknown heading level \"".concat(level, "\", falling back to 3. Set `heading` on StatCard.Root or StatCard.Label to one of ").concat(Object.keys(headings).join(', '), "."));
+  }, [level]);
+  return /*#__PURE__*/_jsxs(Stack, _objectSpread(_objectSpread({
+    ref: ref,
+    direction: "row",
+    align: "flex-start",
+    justify: "space-between",
+    gap: "sm",
+    className: classnames('newspack-stat-card__label', className)
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(Heading, {
+      className: "newspack-stat-card__label-text",
+      children: children
+    }), suffix]
+  }));
+});
+export default Label;

package/dist/esm/stat-card/root.js

@@ -0,0 +1,64 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["heading", "labels", "className", "children"];
+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; }
+/**
+ * WordPress dependencies.
+ */
+import { forwardRef, useMemo } from '@wordpress/element';
+// Aliased: this package exports a different `Card` of its own.
+import { Card as UICard, Stack } from '@wordpress/ui';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import { resolveStatCardLabels, StatCardContext } from './context';
+import './style.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Root = forwardRef(function Root(_ref, ref) {
+  var _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? 3 : _ref$heading,
+    labels = _ref.labels,
+    className = _ref.className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Keyed on the strings rather than the object: a caller writing `labels` inline
+  // hands over a fresh object each render, which would defeat the memo entirely.
+  var _ref2 = labels !== null && labels !== void 0 ? labels : {},
+    notApplicable = _ref2.notApplicable,
+    up = _ref2.up,
+    down = _ref2.down;
+  var context = useMemo(function () {
+    return {
+      heading: heading,
+      labels: resolveStatCardLabels({
+        notApplicable: notApplicable,
+        up: up,
+        down: down
+      })
+    };
+  }, [heading, notApplicable, up, down]);
+  return /*#__PURE__*/_jsx(StatCardContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(UICard.Root, _objectSpread(_objectSpread({
+      ref: ref,
+      className: classnames('newspack-stat-card', className)
+    }, props), {}, {
+      children: /*#__PURE__*/_jsx(UICard.Content, {
+        render: /*#__PURE__*/_jsx(Stack, {
+          direction: "column",
+          gap: "sm"
+        }),
+        className: "newspack-stat-card__content",
+        children: children
+      })
+    }))
+  });
+});
+export default Root;

package/dist/esm/stat-card/secondary.js

@@ -0,0 +1,33 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "children"];
+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; }
+/**
+ * WordPress dependencies.
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import { useStatCardContext } from './context';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Secondary = forwardRef(function Secondary(_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  useStatCardContext();
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    ref: ref,
+    className: classnames('newspack-stat-card__secondary', className)
+  }, props), {}, {
+    children: children
+  }));
+});
+export default Secondary;

package/dist/esm/stat-card/style.scss

@@ -0,0 +1,89 @@
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "../../../colors/colors.module" as colors;
+@use "../variables" as np-vars;
+
+$stat-card-min-height: wp-vars.$grid-unit * 21;
+
+.newspack-stat-card {
+	--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};
+
+	container-type: inline-size;
+	display: flex;
+	flex-direction: column;
+	min-height: $stat-card-min-height;
+
+	&__content {
+		flex: 1;
+	}
+
+	&__label .newspack-info-button {
+		margin-block: calc((#{wp-vars.$font-line-height-small} - #{wp-vars.$button-size-small}) / 2);
+	}
+
+	&__label-text {
+		@include wp-mixins.heading-large();
+		color: wp-colors.$gray-900;
+		margin: 0;
+	}
+
+	&__body {
+		flex: 1;
+	}
+
+	&__value {
+		color: var(--wp-admin-theme-color);
+		font-size: np-vars.$font-size-3x-large;
+		font-size: clamp(#{wp-vars.$font-size-x-large}, 14cqi, #{np-vars.$font-size-3x-large});
+		font-variant-numeric: tabular-nums;
+		font-weight: wp-vars.$font-weight-medium;
+		line-height: np-vars.$font-line-height-3x-large;
+
+		&--text {
+			font-size: wp-vars.$font-size-x-large;
+			line-height: wp-vars.$font-line-height-x-large;
+		}
+	}
+
+	&__delta {
+		@include wp-mixins.heading-medium();
+		color: wp-colors.$gray-700;
+
+		&--positive {
+			color: colors.$success-600;
+		}
+
+		&--negative {
+			color: colors.$error-600;
+		}
+	}
+
+	&__action,
+	&__action.components-button {
+		font-size: wp-vars.$helptext-font-size;
+		line-height: wp-vars.$font-line-height-x-small;
+	}
+
+	&__secondary {
+		@include wp-mixins.heading-medium();
+		color: var(--wp-admin-theme-color);
+		margin: 0;
+		text-wrap: balance;
+	}
+
+	&__description {
+		color: wp-colors.$gray-700;
+		font-size: wp-vars.$helptext-font-size;
+		line-height: wp-vars.$font-line-height-x-small;
+		margin: 0;
+		text-wrap: balance;
+	}
+}

package/dist/esm/stat-card/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/stat-card/value.js

@@ -0,0 +1,73 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value", "valueLabel", "variant", "suffix", "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) { _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; }
+/**
+ * WordPress dependencies.
+ */
+import { forwardRef, useEffect } from '@wordpress/element';
+import { Stack, VisuallyHidden } from '@wordpress/ui';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import { STAT_CARD_NULL_GLYPH } from './constants';
+import { useStatCardContext } from './context';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var variants = ['figure', 'text'];
+var Value = forwardRef(function Value(_ref, ref) {
+  var value = _ref.value,
+    valueLabel = _ref.valueLabel,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'figure' : _ref$variant,
+    suffix = _ref.suffix,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStatCardContext = useStatCardContext(),
+    labels = _useStatCardContext.labels;
+  useEffect(function () {
+    if ('production' === process.env.NODE_ENV || variants.includes(variant)) {
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.warn("StatCard.Value: unknown variant \"".concat(variant, "\", falling back to figure. Use one of ").concat(variants.join(', '), "."));
+  }, [variant]);
+
+  // A blank string is a missing figure too, and an empty hero would read as one
+  // that never loaded. A zero is a figure, so it stays out of this.
+  var isNull = null === value || undefined === value || 'string' === typeof value && '' === value.trim();
+  var shown = isNull ? STAT_CARD_NULL_GLYPH : value;
+  // Trimmed, and `||` not `??`: a blank label is a missing one, and the glyph must never be left unnamed.
+  var spoken = (valueLabel === null || valueLabel === void 0 ? void 0 : valueLabel.trim()) || (isNull ? labels.notApplicable : undefined);
+  var figure = /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
+    ref: ref,
+    className: classnames('newspack-stat-card__value', 'text' === variant && 'newspack-stat-card__value--text', className)
+  }, props), {}, {
+    children: spoken ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        children: shown
+      }), /*#__PURE__*/_jsx(VisuallyHidden, {
+        render: /*#__PURE__*/_jsx("span", {}),
+        children: spoken
+      })]
+    }) : shown
+  }));
+  if (!suffix) {
+    return figure;
+  }
+  return /*#__PURE__*/_jsxs(Stack, {
+    direction: "row",
+    align: "baseline",
+    gap: "sm",
+    className: "newspack-stat-card__figure",
+    children: [figure, suffix]
+  });
+});
+export default Value;

package/dist/esm/status-indicator/index.js

@@ -0,0 +1,52 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["status", "icon", "className", "children"];
+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; }
+/**
+ * StatusIndicator
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { Icon } from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+import { Stack } from '@wordpress/ui';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+
+import { statusGlyph } from './statuses';
+import './style.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var StatusIndicator = forwardRef(function StatusIndicator(_ref, ref) {
+  var status = _ref.status,
+    icon = _ref.icon,
+    className = _ref.className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsxs(Stack, _objectSpread(_objectSpread({
+    ref: ref,
+    direction: "row",
+    align: "center",
+    gap: "sm",
+    className: classnames('newspack-status-indicator', className)
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(Icon, {
+      className: "newspack-status-indicator__icon",
+      icon: status ? statusGlyph(status) : icon,
+      size: 24
+    }), /*#__PURE__*/_jsx("span", {
+      children: children
+    })]
+  }));
+});
+export { statusGlyph, STATUS_NAMES } from './statuses';
+export default StatusIndicator;

package/dist/esm/status-indicator/index.test.js

@@ -0,0 +1,96 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { drafts, gift, published } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import StatusIndicator, { statusGlyph, STATUS_NAMES } from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+describe('StatusIndicator', function () {
+  it('renders the glyph alongside the label', function () {
+    var _render = render(/*#__PURE__*/_jsx(StatusIndicator, {
+        status: "active",
+        children: "Active"
+      })),
+      container = _render.container;
+    expect(screen.getByText('Active')).toBeInTheDocument();
+    expect(container.querySelector('svg.newspack-status-indicator__icon')).toBeInTheDocument();
+  });
+
+  // The trim is what makes the 8px gap measure 8px, so it is styled through a
+  // class rather than left to the consumer.
+  it('carries the class the icon trim is scoped to', function () {
+    var _render2 = render(/*#__PURE__*/_jsx(StatusIndicator, {
+        status: "active",
+        children: "Active"
+      })),
+      container = _render2.container;
+    expect(container.querySelector('.newspack-status-indicator')).toBeInTheDocument();
+    expect(container.querySelector('.newspack-status-indicator__icon')).toBeInTheDocument();
+  });
+  it('draws a named status the way the vocabulary says', function () {
+    var _render3 = render(/*#__PURE__*/_jsx(StatusIndicator, {
+        status: "draft",
+        children: "Draft"
+      })),
+      named = _render3.container;
+    var _render4 = render(/*#__PURE__*/_jsx(StatusIndicator, {
+        icon: drafts,
+        children: "Draft"
+      })),
+      given = _render4.container;
+    expect(named.querySelector('svg').innerHTML).toBe(given.querySelector('svg').innerHTML);
+  });
+  it('draws the glyph it is given when there is no name for it', function () {
+    var _render5 = render(/*#__PURE__*/_jsx(StatusIndicator, {
+        icon: gift,
+        children: "Free"
+      })),
+      free = _render5.container;
+    var _render6 = render(/*#__PURE__*/_jsx(StatusIndicator, {
+        icon: published,
+        children: "Active"
+      })),
+      active = _render6.container;
+    expect(free.querySelector('svg').innerHTML).not.toBe(active.querySelector('svg').innerHTML);
+  });
+  it('keeps the consumer class and passes the rest through', function () {
+    var _render7 = render(/*#__PURE__*/_jsx(StatusIndicator, {
+        className: "custom",
+        "data-testid": "status",
+        status: "active",
+        children: "Active"
+      })),
+      container = _render7.container;
+    var root = container.querySelector('.newspack-status-indicator');
+    expect(root).toHaveClass('custom');
+    expect(root).toHaveAttribute('data-testid', 'status');
+  });
+});
+describe('statusGlyph', function () {
+  it('draws every name in the vocabulary', function () {
+    STATUS_NAMES.forEach(function (name) {
+      return expect(statusGlyph(name)).toBeTruthy();
+    });
+  });
+
+  // Pinning the complete list is what lets a column assert its own distinctness:
+  // any pair not named here reads apart.
+  it('shares a mark only where two names mean the same to a reader', function () {
+    var byGlyph = new Map();
+    STATUS_NAMES.forEach(function (name) {
+      return byGlyph.set(statusGlyph(name), [].concat(_toConsumableArray(byGlyph.get(statusGlyph(name)) || []), [name]));
+    });
+    expect(_toConsumableArray(byGlyph.values()).filter(function (names) {
+      return names.length > 1;
+    })).toEqual([['active', 'done'], ['cancelled', 'ended']]);
+  });
+});

package/dist/esm/status-indicator/statuses.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies.
+ */
+import { caution, drafts, error, notAllowed, pending, published, scheduled, trash, update, lock } from '@wordpress/icons';
+
+/**
+ * The glyph for each status a list can report.
+ *
+ * Two names may resolve to the same glyph where they read differently at the call
+ * site but mean the same to a reader: a sent newsletter is finished rather than
+ * live, and an ad that expired was not cancelled. Splitting them leaves room to
+ * draw them apart later without touching a consumer, and it means the rule a
+ * Status column keeps is about glyphs rather than names. `statusGlyph` is
+ * exported so a column's own test can assert it.
+ */
+var STATUS_GLYPHS = {
+  active: published,
+  done: published,
+  scheduled: scheduled,
+  draft: drafts,
+  pending: pending,
+  attention: caution,
+  error: error,
+  progress: update,
+  cancelled: notAllowed,
+  ended: notAllowed,
+  "private": lock,
+  trash: trash
+};
+export var statusGlyph = function statusGlyph(status) {
+  return STATUS_GLYPHS[status];
+};
+export var STATUS_NAMES = Object.freeze(Object.keys(STATUS_GLYPHS));

package/dist/esm/status-indicator/style.scss

@@ -0,0 +1,9 @@
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+.newspack-status-indicator {
+	&__icon {
+		fill: currentcolor;
+		flex-shrink: 0;
+		margin: calc((#{wp-vars.$grid-unit-20} - #{wp-vars.$icon-size}) / 2);
+	}
+}

package/dist/esm/status-indicator/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/style.scss

@@ -1,16 +1,16 @@
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../colors/colors.module" as colors;
+@use "../../colors/colors.module" as np-colors;
 
 :root {
 	// WP Admin
-	--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};
 }
 
 // Buttons Card

package/dist/esm/tabbed-navigation/style.scss

@@ -2,7 +2,8 @@
  * Tabbed Navigation
  */
 
-@use "../../../colors/colors.module" as colors;
+@use "../../../colors/colors.module" as np-colors;
+@use "../mixins" as mixins;
 @use "~@wordpress/base-styles/colors" as wp-colors;
 @use "~@wordpress/base-styles/variables" as wp-vars;
 
@@ -18,7 +19,7 @@
 	width: 100%;
 
 	/* stylelint-disable-next-line plugin-wpds/no-setting-wpds-custom-properties -- deliberate Newspack brand override of the indicator token. */
-	--wpds-color-stroke-interactive-neutral-strong: #{colors.$primary-600};
+	--wpds-color-stroke-interactive-neutral-strong: #{np-colors.$primary-600};
 
 	a[role="tab"] {
 		text-decoration: none;
@@ -53,6 +54,7 @@
 
 		&[data-disabled],
 		&[aria-disabled="true"] {
+			/* stylelint-disable-next-line plugin-wpds/no-unknown-ds-tokens -- the plugin's token list lags the prebuilt design-tokens.css names. */
 			color: var( --wpds-color-foreground-interactive-neutral-disabled, #{wp-colors.$gray-600} );
 			pointer-events: none;
 		}
@@ -91,12 +93,12 @@
 		}
 
 		&:focus-visible {
-			outline: var( --wpds-border-width-focus, var( --wp-admin-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) ) solid var( --wpds-color-stroke-focus, var( --wp-admin-theme-color ) );
+			@include mixins.wpds-focus-ring;
 			outline-offset: calc( var( --wpds-dimension-padding-md, #{wp-vars.$grid-unit-15} ) * -1 );
 		}
 
 		&[aria-current="page"] {
-			box-shadow: inset 0 calc( var( --wpds-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) * -1 ) 0 var( --wpds-color-stroke-interactive-neutral-strong, #{colors.$primary-600} );
+			box-shadow: inset 0 calc( var( --wpds-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) * -1 ) 0 var( --wpds-color-stroke-interactive-neutral-strong, #{np-colors.$primary-600} );
 		}
 	}
 }

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/web-preview/style.scss

@@ -3,20 +3,20 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../colors/colors.module" as colors;
+@use "../../../colors/colors.module" as np-colors;
 
 .newspack-web-preview {
 	// 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};
-
-	background: color-mix(in srgb, colors.$neutral-1000, transparent 65%);
+	--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};
+
+	background: color-mix(in srgb, np-colors.$neutral-1000, transparent 65%);
 	box-sizing: border-box;
 	height: 100%;
 	left: 0;

package/dist/esm/with-wizard/style.scss

@@ -3,19 +3,19 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../colors/colors.module" as colors;
+@use "../../../colors/colors.module" as np-colors;
 
 // Styling for full-page-react Wizards (ignoring admin-header-only wizards).
 body.newspack-wizard-page:not(.newspack-admin-header) {
-	--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-components-color-accent: #{colors.$primary-600};
+	--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};
+	--wp-components-color-accent: #{np-colors.$primary-600};
 
 	background: #{wp-colors.$white};