@automattic/jetpack-components 1.12.13 → 1.12.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/build/components/admin-page/style.module.scss +2 -2
  3. package/build/components/icons/index.d.ts +1 -0
  4. package/build/components/icons/index.js +1 -0
  5. package/build/components/icons/style.module.scss +12 -12
  6. package/build/components/jetpack-footer/style.scss +2 -2
  7. package/build/components/number-slider/style.scss +1 -1
  8. package/build/components/pricing-table/styles.module.scss +1 -7
  9. package/build/components/status/index.d.ts +1 -1
  10. package/build/components/status/index.js +1 -1
  11. package/components/admin-page/style.module.scss +2 -2
  12. package/components/icons/index.tsx +1 -0
  13. package/components/icons/style.module.scss +12 -12
  14. package/components/jetpack-footer/style.scss +2 -2
  15. package/components/number-slider/style.scss +1 -1
  16. package/components/pricing-table/styles.module.scss +1 -7
  17. package/components/status/index.tsx +1 -1
  18. package/package.json +22 -22
package/CHANGELOG.md CHANGED
@@ -2,6 +2,19 @@
2
2
 
3
3
  ### This is a list detailing changes for the Jetpack RNA Components package releases.
4
4
 
5
+ ## [1.12.16] - 2026-07-13
6
+ ### Fixed
7
+ - Pricing table: Align the highlighted column's gradient background to the right edge of the card. [#50346]
8
+
9
+ ## [1.12.15] - 2026-07-09
10
+ ### Changed
11
+ - Update package dependencies. [#49272]
12
+ - Update WPDS design tokens to the @wordpress/theme 0.16/0.17 names (see https://github.com/WordPress/gutenberg/blob/trunk/packages/theme/CHANGELOG.md#0160-2026-06-24 ). [#49272]
13
+
14
+ ## [1.12.14] - 2026-07-06
15
+ ### Changed
16
+ - Update package dependencies. [#50097] [#50183] [#50212]
17
+
5
18
  ## [1.12.13] - 2026-06-26
6
19
  ### Changed
7
20
  - Internal updates.
@@ -1864,6 +1877,9 @@
1864
1877
  ### Changed
1865
1878
  - Update node version requirement to 14.16.1
1866
1879
 
1880
+ [1.12.16]: https://github.com/Automattic/jetpack-components/compare/1.12.15...1.12.16
1881
+ [1.12.15]: https://github.com/Automattic/jetpack-components/compare/1.12.14...1.12.15
1882
+ [1.12.14]: https://github.com/Automattic/jetpack-components/compare/1.12.13...1.12.14
1867
1883
  [1.12.13]: https://github.com/Automattic/jetpack-components/compare/1.12.12...1.12.13
1868
1884
  [1.12.12]: https://github.com/Automattic/jetpack-components/compare/1.12.11...1.12.12
1869
1885
  [1.12.11]: https://github.com/Automattic/jetpack-components/compare/1.12.10...1.12.11
package/build/components/admin-page/style.module.scss CHANGED
@@ -105,9 +105,9 @@
105
105
  // We override only the bits that need to differ from those defaults.
106
106
  float: none;
107
107
  text-align: right;
108
- background: var(--wpds-color-bg-surface-neutral-strong, #fff);
108
+ background: var(--wpds-color-background-surface-neutral-strong, #fff);
109
109
  font-style: italic;
110
- color: var(--wpds-color-fg-content-neutral-weak, #87a6bc);
110
+ color: var(--wpds-color-foreground-content-neutral-weak, #87a6bc);
111
111
  border-bottom: none;
112
112
 
113
113
  @media (max-width: 659px) {
package/build/components/icons/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { SocialLogo } from 'social-logos';
2
+ import 'social-logos/colors.css';
2
3
  import { BaseIconProps } from './types.ts';
3
4
  import type { ComponentProps, FC } from 'react';
4
5
  export declare const AntiSpamIcon: FC<BaseIconProps>;
package/build/components/icons/index.js CHANGED
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Path, SVG, G, Polygon } from '@wordpress/components';
3
3
  import clsx from 'clsx';
4
4
  import { SocialLogo } from 'social-logos';
5
+ import 'social-logos/colors.css';
5
6
  import styles from './style.module.scss';
6
7
  /**
7
8
  * Icon Wrapper component.
package/build/components/icons/style.module.scss CHANGED
@@ -13,11 +13,11 @@
13
13
  fill: gb.$gray-700;
14
14
 
15
15
  &.bluesky {
16
- fill: var(--color-bluesky);
16
+ fill: var(--jetpack-social-logo-color-bluesky);
17
17
  }
18
18
 
19
19
  &.facebook {
20
- fill: var(--color-facebook);
20
+ fill: var(--jetpack-social-logo-color-facebook);
21
21
  // Add some specificity to override the border-radius on Jetpack settings page
22
22
  &:global(.social-logo) {
23
23
  border-radius: 50%;
@@ -25,27 +25,27 @@
25
25
  }
26
26
 
27
27
  &.twitter {
28
- fill: var(--color-twitter);
28
+ fill: var(--jetpack-social-logo-color-twitter);
29
29
  }
30
30
 
31
31
  &.linkedin {
32
- fill: var(--color-linkedin);
32
+ fill: var(--jetpack-social-logo-color-linkedin);
33
33
  }
34
34
 
35
35
  &.tumblr {
36
- fill: var(--color-tumblr);
36
+ fill: var(--jetpack-social-logo-color-tumblr);
37
37
  }
38
38
 
39
39
  &.google {
40
- fill: var(--color-gplus);
40
+ fill: var(--jetpack-social-logo-color-google-plus);
41
41
  }
42
42
 
43
43
  &.mastodon {
44
- fill: var(--color-mastodon);
44
+ fill: var(--jetpack-social-logo-color-mastodon);
45
45
  }
46
46
 
47
47
  &.nextdoor {
48
- fill: var(--color-nextdoor);
48
+ fill: var(--jetpack-social-logo-color-nextdoor);
49
49
  // Add some specificity to override the border-radius on Jetpack settings page
50
50
  &:global(.social-logo) {
51
51
  border-radius: 50%;
@@ -53,15 +53,15 @@
53
53
  }
54
54
 
55
55
  &.instagram {
56
- fill: var(--color-instagram);
56
+ fill: var(--jetpack-social-logo-color-instagram);
57
57
  }
58
58
 
59
59
  &.whatsapp {
60
- fill: var(--color-whatsapp);
60
+ fill: var(--jetpack-social-logo-color-whatsapp);
61
61
  }
62
62
 
63
63
  &.threads {
64
- fill: var(--color-threads);
64
+ fill: var(--jetpack-social-logo-color-threads);
65
65
 
66
66
  &:global(.social-logo) {
67
67
  border-radius: 40%;
@@ -69,7 +69,7 @@
69
69
  }
70
70
 
71
71
  &.x {
72
- fill: var(--color-x);
72
+ fill: var(--jetpack-social-logo-color-x);
73
73
  }
74
74
  }
75
75
 
package/build/components/jetpack-footer/style.scss CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  &:any-link,
14
14
  &[role="button"] {
15
- color: var(--wpds-color-fg-interactive-neutral-weak);
15
+ color: var(--wpds-color-foreground-interactive-neutral-weak);
16
16
  cursor: pointer;
17
17
  text-decoration: none;
18
18
  }
@@ -44,6 +44,6 @@ a.jetpack-footer__a8c {
44
44
  }
45
45
 
46
46
  svg {
47
- fill: var(--wpds-color-fg-interactive-neutral-weak);
47
+ fill: var(--wpds-color-foreground-interactive-neutral-weak);
48
48
  }
49
49
  }
package/build/components/number-slider/style.scss CHANGED
@@ -5,7 +5,7 @@ $track-height: 8px;
5
5
 
6
6
  @mixin adjust-track-rail-styles {
7
7
  height: $track-height;
8
- border-radius: 8px; /* stylelint-disable-line scales/radii */
8
+ border-radius: 8px;
9
9
  }
10
10
 
11
11
  // On holding thumb styling
package/build/components/pricing-table/styles.module.scss CHANGED
@@ -1,5 +1,3 @@
1
- @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
2
-
3
1
  .container {
4
2
  --padding: calc(var(--spacing-base) * 4);
5
3
  --padding-horizontal: calc(var(--spacing-base) * 3);
@@ -98,11 +96,7 @@
98
96
  background-image: url(./gradient.svg);
99
97
  background-repeat: no-repeat;
100
98
  background-size: 450px;
101
- background-position-x: center;
102
-
103
- @media (max-width: gb.$break-large) {
104
- background-position-x: right;
105
- }
99
+ background-position-x: right;
106
100
  }
107
101
 
108
102
  > :last-child {
package/build/components/status/index.d.ts CHANGED
@@ -7,7 +7,7 @@ export interface StatusProps {
7
7
  /**
8
8
  * Status component.
9
9
  *
10
- * @deprecated Inline the equivalent JSX using `Text` from `@wordpress/ui` and a small color-coded indicator span. The wrapper renders a flex container at `body-sm` size with `font-weight: 600` and a `0.666em` round indicator coloured by status using WPDS design tokens (`var(--wpds-color-fg-content-success-weak)` for `active`, `--wpds-color-fg-content-error-weak` for `error`, `--wpds-color-fg-content-neutral-weak` for `inactive`, `--wpds-color-fg-content-warning-weak` for `action`, `--wpds-color-fg-content-info-weak` for `initializing`). Include a fallback hex for surfaces that don't load `@wordpress/theme/design-tokens.css` (e.g. the legacy Jetpack settings dashboard).
10
+ * @deprecated Inline the equivalent JSX using `Text` from `@wordpress/ui` and a small color-coded indicator span. The wrapper renders a flex container at `body-sm` size with `font-weight: 600` and a `0.666em` round indicator coloured by status using WPDS design tokens (`var(--wpds-color-foreground-content-success-weak)` for `active`, `--wpds-color-foreground-content-error-weak` for `error`, `--wpds-color-foreground-content-neutral-weak` for `inactive`, `--wpds-color-foreground-content-warning-weak` for `action`, `--wpds-color-foreground-content-info-weak` for `initializing`). Include a fallback hex for surfaces that don't load `@wordpress/theme/design-tokens.css` (e.g. the legacy Jetpack settings dashboard).
11
11
  *
12
12
  * @param {StatusProps} props - The component properties.
13
13
  * @param {string} props.className - Optional className forwarded to the outer element.
package/build/components/status/index.js CHANGED
@@ -6,7 +6,7 @@ import styles from './style.module.scss';
6
6
  /**
7
7
  * Status component.
8
8
  *
9
- * @deprecated Inline the equivalent JSX using `Text` from `@wordpress/ui` and a small color-coded indicator span. The wrapper renders a flex container at `body-sm` size with `font-weight: 600` and a `0.666em` round indicator coloured by status using WPDS design tokens (`var(--wpds-color-fg-content-success-weak)` for `active`, `--wpds-color-fg-content-error-weak` for `error`, `--wpds-color-fg-content-neutral-weak` for `inactive`, `--wpds-color-fg-content-warning-weak` for `action`, `--wpds-color-fg-content-info-weak` for `initializing`). Include a fallback hex for surfaces that don't load `@wordpress/theme/design-tokens.css` (e.g. the legacy Jetpack settings dashboard).
9
+ * @deprecated Inline the equivalent JSX using `Text` from `@wordpress/ui` and a small color-coded indicator span. The wrapper renders a flex container at `body-sm` size with `font-weight: 600` and a `0.666em` round indicator coloured by status using WPDS design tokens (`var(--wpds-color-foreground-content-success-weak)` for `active`, `--wpds-color-foreground-content-error-weak` for `error`, `--wpds-color-foreground-content-neutral-weak` for `inactive`, `--wpds-color-foreground-content-warning-weak` for `action`, `--wpds-color-foreground-content-info-weak` for `initializing`). Include a fallback hex for surfaces that don't load `@wordpress/theme/design-tokens.css` (e.g. the legacy Jetpack settings dashboard).
10
10
  *
11
11
  * @param {StatusProps} props - The component properties.
12
12
  * @param {string} props.className - Optional className forwarded to the outer element.
package/components/admin-page/style.module.scss CHANGED
@@ -105,9 +105,9 @@
105
105
  // We override only the bits that need to differ from those defaults.
106
106
  float: none;
107
107
  text-align: right;
108
- background: var(--wpds-color-bg-surface-neutral-strong, #fff);
108
+ background: var(--wpds-color-background-surface-neutral-strong, #fff);
109
109
  font-style: italic;
110
- color: var(--wpds-color-fg-content-neutral-weak, #87a6bc);
110
+ color: var(--wpds-color-foreground-content-neutral-weak, #87a6bc);
111
111
  border-bottom: none;
112
112
 
113
113
  @media (max-width: 659px) {
package/components/icons/index.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { Path, SVG, G, Polygon } from '@wordpress/components';
2
2
  import clsx from 'clsx';
3
3
  import { SocialLogo } from 'social-logos';
4
+ import 'social-logos/colors.css';
4
5
  import styles from './style.module.scss';
5
6
  import { BaseIconProps } from './types.ts';
6
7
  import type { ComponentProps, ComponentType, FC, ReactNode } from 'react';
package/components/icons/style.module.scss CHANGED
@@ -13,11 +13,11 @@
13
13
  fill: gb.$gray-700;
14
14
 
15
15
  &.bluesky {
16
- fill: var(--color-bluesky);
16
+ fill: var(--jetpack-social-logo-color-bluesky);
17
17
  }
18
18
 
19
19
  &.facebook {
20
- fill: var(--color-facebook);
20
+ fill: var(--jetpack-social-logo-color-facebook);
21
21
  // Add some specificity to override the border-radius on Jetpack settings page
22
22
  &:global(.social-logo) {
23
23
  border-radius: 50%;
@@ -25,27 +25,27 @@
25
25
  }
26
26
 
27
27
  &.twitter {
28
- fill: var(--color-twitter);
28
+ fill: var(--jetpack-social-logo-color-twitter);
29
29
  }
30
30
 
31
31
  &.linkedin {
32
- fill: var(--color-linkedin);
32
+ fill: var(--jetpack-social-logo-color-linkedin);
33
33
  }
34
34
 
35
35
  &.tumblr {
36
- fill: var(--color-tumblr);
36
+ fill: var(--jetpack-social-logo-color-tumblr);
37
37
  }
38
38
 
39
39
  &.google {
40
- fill: var(--color-gplus);
40
+ fill: var(--jetpack-social-logo-color-google-plus);
41
41
  }
42
42
 
43
43
  &.mastodon {
44
- fill: var(--color-mastodon);
44
+ fill: var(--jetpack-social-logo-color-mastodon);
45
45
  }
46
46
 
47
47
  &.nextdoor {
48
- fill: var(--color-nextdoor);
48
+ fill: var(--jetpack-social-logo-color-nextdoor);
49
49
  // Add some specificity to override the border-radius on Jetpack settings page
50
50
  &:global(.social-logo) {
51
51
  border-radius: 50%;
@@ -53,15 +53,15 @@
53
53
  }
54
54
 
55
55
  &.instagram {
56
- fill: var(--color-instagram);
56
+ fill: var(--jetpack-social-logo-color-instagram);
57
57
  }
58
58
 
59
59
  &.whatsapp {
60
- fill: var(--color-whatsapp);
60
+ fill: var(--jetpack-social-logo-color-whatsapp);
61
61
  }
62
62
 
63
63
  &.threads {
64
- fill: var(--color-threads);
64
+ fill: var(--jetpack-social-logo-color-threads);
65
65
 
66
66
  &:global(.social-logo) {
67
67
  border-radius: 40%;
@@ -69,7 +69,7 @@
69
69
  }
70
70
 
71
71
  &.x {
72
- fill: var(--color-x);
72
+ fill: var(--jetpack-social-logo-color-x);
73
73
  }
74
74
  }
75
75
 
package/components/jetpack-footer/style.scss CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  &:any-link,
14
14
  &[role="button"] {
15
- color: var(--wpds-color-fg-interactive-neutral-weak);
15
+ color: var(--wpds-color-foreground-interactive-neutral-weak);
16
16
  cursor: pointer;
17
17
  text-decoration: none;
18
18
  }
@@ -44,6 +44,6 @@ a.jetpack-footer__a8c {
44
44
  }
45
45
 
46
46
  svg {
47
- fill: var(--wpds-color-fg-interactive-neutral-weak);
47
+ fill: var(--wpds-color-foreground-interactive-neutral-weak);
48
48
  }
49
49
  }
package/components/number-slider/style.scss CHANGED
@@ -5,7 +5,7 @@ $track-height: 8px;
5
5
 
6
6
  @mixin adjust-track-rail-styles {
7
7
  height: $track-height;
8
- border-radius: 8px; /* stylelint-disable-line scales/radii */
8
+ border-radius: 8px;
9
9
  }
10
10
 
11
11
  // On holding thumb styling
package/components/pricing-table/styles.module.scss CHANGED
@@ -1,5 +1,3 @@
1
- @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
2
-
3
1
  .container {
4
2
  --padding: calc(var(--spacing-base) * 4);
5
3
  --padding-horizontal: calc(var(--spacing-base) * 3);
@@ -98,11 +96,7 @@
98
96
  background-image: url(./gradient.svg);
99
97
  background-repeat: no-repeat;
100
98
  background-size: 450px;
101
- background-position-x: center;
102
-
103
- @media (max-width: gb.$break-large) {
104
- background-position-x: right;
105
- }
99
+ background-position-x: right;
106
100
  }
107
101
 
108
102
  > :last-child {
package/components/status/index.tsx CHANGED
@@ -13,7 +13,7 @@ export interface StatusProps {
13
13
  /**
14
14
  * Status component.
15
15
  *
16
- * @deprecated Inline the equivalent JSX using `Text` from `@wordpress/ui` and a small color-coded indicator span. The wrapper renders a flex container at `body-sm` size with `font-weight: 600` and a `0.666em` round indicator coloured by status using WPDS design tokens (`var(--wpds-color-fg-content-success-weak)` for `active`, `--wpds-color-fg-content-error-weak` for `error`, `--wpds-color-fg-content-neutral-weak` for `inactive`, `--wpds-color-fg-content-warning-weak` for `action`, `--wpds-color-fg-content-info-weak` for `initializing`). Include a fallback hex for surfaces that don't load `@wordpress/theme/design-tokens.css` (e.g. the legacy Jetpack settings dashboard).
16
+ * @deprecated Inline the equivalent JSX using `Text` from `@wordpress/ui` and a small color-coded indicator span. The wrapper renders a flex container at `body-sm` size with `font-weight: 600` and a `0.666em` round indicator coloured by status using WPDS design tokens (`var(--wpds-color-foreground-content-success-weak)` for `active`, `--wpds-color-foreground-content-error-weak` for `error`, `--wpds-color-foreground-content-neutral-weak` for `inactive`, `--wpds-color-foreground-content-warning-weak` for `action`, `--wpds-color-foreground-content-info-weak` for `initializing`). Include a fallback hex for surfaces that don't load `@wordpress/theme/design-tokens.css` (e.g. the legacy Jetpack settings dashboard).
17
17
  *
18
18
  * @param {StatusProps} props - The component properties.
19
19
  * @param {string} props.className - Optional className forwarded to the outer element.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/jetpack-components",
3
- "version": "1.12.13",
3
+ "version": "1.12.16",
4
4
  "description": "Jetpack Components Package",
5
5
  "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
6
6
  "bugs": {
@@ -73,39 +73,39 @@
73
73
  ],
74
74
  "dependencies": {
75
75
  "@automattic/format-currency": "1.0.1",
76
- "@automattic/jetpack-api": "^1.0.30",
77
- "@automattic/jetpack-boost-score-api": "^1.0.51",
78
- "@automattic/jetpack-script-data": "^0.6.4",
79
- "@automattic/number-formatters": "^1.2.5",
76
+ "@automattic/jetpack-api": "^1.0.31",
77
+ "@automattic/jetpack-boost-score-api": "^1.0.54",
78
+ "@automattic/jetpack-script-data": "^0.6.5",
79
+ "@automattic/number-formatters": "^1.2.6",
80
80
  "@babel/runtime": "^7",
81
81
  "@gravatar-com/hovercards": "0.16.0",
82
- "@wordpress/admin-ui": "2.1.0",
83
- "@wordpress/browserslist-config": "6.48.1",
84
- "@wordpress/components": "35.0.1",
85
- "@wordpress/compose": "8.1.1",
86
- "@wordpress/data": "10.48.1",
87
- "@wordpress/date": "5.48.1",
88
- "@wordpress/element": "8.0.1",
89
- "@wordpress/i18n": "6.21.1",
90
- "@wordpress/icons": "13.1.0",
91
- "@wordpress/notices": "5.48.1",
92
- "@wordpress/theme": "0.15.1",
93
- "@wordpress/ui": "0.13.0",
82
+ "@wordpress/admin-ui": "2.5.0",
83
+ "@wordpress/browserslist-config": "6.50.0",
84
+ "@wordpress/components": "36.1.0",
85
+ "@wordpress/compose": "8.3.0",
86
+ "@wordpress/data": "10.50.0",
87
+ "@wordpress/date": "5.50.0",
88
+ "@wordpress/element": "8.2.0",
89
+ "@wordpress/i18n": "6.23.0",
90
+ "@wordpress/icons": "15.1.0",
91
+ "@wordpress/notices": "5.50.0",
92
+ "@wordpress/theme": "0.17.0",
93
+ "@wordpress/ui": "0.17.0",
94
94
  "clsx": "2.1.1",
95
95
  "js-sha256": "0.11.1",
96
96
  "prop-types": "^15.7.2",
97
97
  "qrcode.react": "4.2.0",
98
98
  "react-slider": "2.0.5",
99
- "social-logos": "^3.3.16",
99
+ "social-logos": "^3.3.17",
100
100
  "uplot": "1.6.31",
101
101
  "uplot-react": "1.1.4"
102
102
  },
103
103
  "devDependencies": {
104
- "@automattic/jetpack-base-styles": "^1.2.7",
104
+ "@automattic/jetpack-base-styles": "^1.2.9",
105
105
  "@babel/core": "7.29.7",
106
106
  "@jest/globals": "30.4.1",
107
- "@storybook/addon-docs": "10.3.6",
108
- "@storybook/react": "10.3.6",
107
+ "@storybook/addon-docs": "10.4.6",
108
+ "@storybook/react": "10.4.6",
109
109
  "@testing-library/dom": "10.4.1",
110
110
  "@testing-library/react": "16.3.2",
111
111
  "@testing-library/user-event": "14.6.1",
@@ -118,7 +118,7 @@
118
118
  "react": "18.3.1",
119
119
  "react-dom": "18.3.1",
120
120
  "require-from-string": "2.0.2",
121
- "storybook": "10.3.6",
121
+ "storybook": "10.4.6",
122
122
  "ts-dedent": "2.2.0",
123
123
  "typescript": "5.9.3",
124
124
  "webpack": "5.107.2",