diff --git a/projects/packages/forms/changelog/update-forms-wpds-color-token-fallbacks b/projects/packages/forms/changelog/update-forms-wpds-color-token-fallbacks new file mode 100644 index 000000000000..63fa4b184c39 --- /dev/null +++ b/projects/packages/forms/changelog/update-forms-wpds-color-token-fallbacks @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Forms dashboard: reference the new WPDS color token names (--wpds-color-background-*/--wpds-color-foreground-*) with a fallback to the current names, so theming keeps working both before and after the @wordpress/theme 0.16 token rename. diff --git a/projects/packages/forms/src/dashboard/components/dataviews-header-row/style.scss b/projects/packages/forms/src/dashboard/components/dataviews-header-row/style.scss index 99e67f9f43e3..bf82904e1294 100644 --- a/projects/packages/forms/src/dashboard/components/dataviews-header-row/style.scss +++ b/projects/packages/forms/src/dashboard/components/dataviews-header-row/style.scss @@ -25,7 +25,7 @@ // Jetpack Forms specific additions (match Inbox). position: sticky; left: 0; - background: var(--wpds-color-bg-surface-neutral-strong, #fff); + background: var(--wpds-color-background-surface-neutral-strong, var(--wpds-color-bg-surface-neutral-strong, #fff)); justify-content: space-between; gap: 8px; flex-direction: column; @@ -52,14 +52,14 @@ button[role="tab"] { margin: 0; padding: 12px 0; - color: var(--wpds-color-fg-interactive-neutral); + color: var(--wpds-color-foreground-interactive-neutral, var(--wpds-color-fg-interactive-neutral)); &[data-active="true"] { - color: var(--wpds-color-fg-interactive-neutral-active); + color: var(--wpds-color-foreground-interactive-neutral-active, var(--wpds-color-fg-interactive-neutral-active)); } &:hover:not([data-active="true"]) { - color: var(--wpds-color-fg-interactive-neutral-active); + color: var(--wpds-color-foreground-interactive-neutral-active, var(--wpds-color-fg-interactive-neutral-active)); } } } diff --git a/projects/packages/forms/src/dashboard/components/feedback-comments/style.scss b/projects/packages/forms/src/dashboard/components/feedback-comments/style.scss index 322f3d9c4d35..02028c49cfe4 100644 --- a/projects/packages/forms/src/dashboard/components/feedback-comments/style.scss +++ b/projects/packages/forms/src/dashboard/components/feedback-comments/style.scss @@ -50,7 +50,7 @@ // Individual comment (item) .jp-forms__feedback-comments-comment { - background-color: var(--jp-forms-white-off, var(--wpds-color-bg-surface-neutral-weak, #e7e7e7)); + background-color: var(--jp-forms-white-off, var(--wpds-color-background-surface-neutral-weak, var(--wpds-color-bg-surface-neutral-weak, #e7e7e7))); border-radius: var(--jp-forms-border-radius, 4px); padding: 12px; @@ -75,7 +75,7 @@ .jp-forms__feedback-comments-comment-author { font-size: 14px; font-weight: 600; - color: var(--jp-forms-color-darker-20, var(--wpds-color-fg-content-neutral, #1e1e1e)); + color: var(--jp-forms-color-darker-20, var(--wpds-color-foreground-content-neutral, var(--wpds-color-fg-content-neutral, #1e1e1e))); } .jp-forms__feedback-comments-comment-date { diff --git a/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-preview/style.scss b/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-preview/style.scss index 5ee2feeb5996..a31830733f75 100644 --- a/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-preview/style.scss +++ b/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-preview/style.scss @@ -40,7 +40,7 @@ } .jp-forms__field-preview-label { - color: var(--wpds-color-fg-content-neutral-weak, #6d6d6d); + color: var(--wpds-color-foreground-content-neutral-weak, var(--wpds-color-fg-content-neutral-weak, #6d6d6d)); font-weight: 300; } diff --git a/projects/packages/forms/src/dashboard/components/layout/style.scss b/projects/packages/forms/src/dashboard/components/layout/style.scss index b7c9e3b80769..90eacd50adcc 100644 --- a/projects/packages/forms/src/dashboard/components/layout/style.scss +++ b/projects/packages/forms/src/dashboard/components/layout/style.scss @@ -15,7 +15,7 @@ body.jetpack_page_jetpack-forms-admin { height: 100%; display: flex; flex-direction: column; - color: var(--wpds-color-fg-content-neutral); + color: var(--wpds-color-foreground-content-neutral, var(--wpds-color-fg-content-neutral)); // Create an separate stacking context for Base UI portal rendering. // See: https://base-ui.com/react/overview/quick-start#set-up-portals @@ -66,8 +66,8 @@ body.jetpack_page_jetpack-forms-admin { left: 0; right: 0; bottom: 0; - color: var(--wpds-color-fg-content-neutral); - background: var(--wpds-color-bg-surface-neutral); + color: var(--wpds-color-foreground-content-neutral, var(--wpds-color-fg-content-neutral)); + background: var(--wpds-color-background-surface-neutral, var(--wpds-color-bg-surface-neutral)); &.is-inspector { z-index: 3; // Medium surface priority diff --git a/projects/packages/forms/src/dashboard/components/page/style.scss b/projects/packages/forms/src/dashboard/components/page/style.scss index 7f990ae39147..6d4910fa9150 100644 --- a/projects/packages/forms/src/dashboard/components/page/style.scss +++ b/projects/packages/forms/src/dashboard/components/page/style.scss @@ -18,8 +18,8 @@ } .admin-ui-page { - color: var(--wpds-color-fg-content-neutral); - background: var(--wpds-color-bg-surface-neutral-strong); + color: var(--wpds-color-foreground-content-neutral, var(--wpds-color-fg-content-neutral)); + background: var(--wpds-color-background-surface-neutral-strong, var(--wpds-color-bg-surface-neutral-strong)); height: 100%; display: flex; flex-direction: column; @@ -29,7 +29,7 @@ padding: variables.$grid-unit-10 variables.$grid-unit * 2.5; position: sticky; top: 0; - background: var(--wpds-color-bg-surface-neutral-strong); + background: var(--wpds-color-background-surface-neutral-strong, var(--wpds-color-bg-surface-neutral-strong)); transition: padding ease-out 0.1s; flex-shrink: 0; z-index: 10; @@ -38,7 +38,7 @@ .admin-ui-page__header-subtitle { padding-block-end: variables.$grid-unit-10; - color: var(--wpds-color-fg-content-neutral-weak); + color: var(--wpds-color-foreground-content-neutral-weak, var(--wpds-color-fg-content-neutral-weak)); @include mixins.body-medium(); margin: 0; diff --git a/projects/packages/forms/src/dashboard/inbox/style.scss b/projects/packages/forms/src/dashboard/inbox/style.scss index 4f9dd6a82259..abaeda5ff388 100644 --- a/projects/packages/forms/src/dashboard/inbox/style.scss +++ b/projects/packages/forms/src/dashboard/inbox/style.scss @@ -10,7 +10,7 @@ flex-grow: 1; display: flex; flex-direction: column; - background-color: var(--wpds-color-bg-surface-neutral-strong, #fff); + background-color: var(--wpds-color-background-surface-neutral-strong, var(--wpds-color-bg-surface-neutral-strong, #fff)); } /* diff --git a/stylelint.config.mjs b/stylelint.config.mjs index 5a2774c761bd..a26302d8f201 100644 --- a/stylelint.config.mjs +++ b/stylelint.config.mjs @@ -3,6 +3,23 @@ */ const config = { extends: 'jetpack-js-tools/stylelint.config.base.mjs', + overrides: [ + { + // Transitional: the Forms dashboard references the @wordpress/theme 0.16 + // color token names (--wpds-color-background-*/--wpds-color-foreground-*) + // with a fallback to the current 0.15 names, so theming keeps working both + // before and after the bundled @wordpress/* monorepo bump. The DS-token + // linter only knows one token vocabulary at a time (it reads the installed + // @wordpress/theme via @wordpress/stylelint-config), so it can't validate a + // line that intentionally references both. Disable it for these files until + // the bump (theme 0.16 + @wordpress/stylelint-config 23.41) lands on trunk; + // then this override and the old-name fallbacks can be removed. + files: [ 'projects/packages/forms/src/dashboard/**/*.scss' ], + rules: { + 'plugin-wpds/no-unknown-ds-tokens': null, + }, + }, + ], }; export default config;