From 3af68c404710503e4edb0f160d48807c662a9c3f Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 23 Jan 2024 08:08:52 +0900 Subject: [PATCH 1/8] Components: Expand theming support in COLORS --- .../components/src/utils/colors-values.js | 55 +++++++++++++------ 1 file changed, 39 insertions(+), 16 deletions(-) diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js index 1f2cdab672909..fb90a54e851b9 100644 --- a/packages/components/src/utils/colors-values.js +++ b/packages/components/src/utils/colors-values.js @@ -36,34 +36,57 @@ const ADMIN = { 'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))', }; -const UI = { - background: white, - backgroundDisabled: GRAY[ 100 ], - border: GRAY[ 600 ], - borderHover: GRAY[ 700 ], - borderFocus: ADMIN.theme, - borderDisabled: GRAY[ 400 ], - textDisabled: GRAY[ 600 ], - textDark: white, - - // Matches @wordpress/base-styles - darkGrayPlaceholder: rgba( GRAY[ 900 ], 0.62 ), - lightGrayPlaceholder: rgba( white, 0.65 ), -}; - +// Should match packages/components/src/utils/theme-variables.scss const THEME = { accent: ADMIN.theme, accentDarker10: ADMIN.themeDark10, + background: `var(--wp-components-color-background, ${ white })`, + foreground: `var(--wp-components-color-foreground, ${ GRAY[ 900 ] })`, + gray: { + 900: `var(--wp-components-color-gray-900, ${ GRAY[ 900 ] })`, + 800: `var(--wp-components-color-gray-800, ${ GRAY[ 800 ] })`, + 700: `var(--wp-components-color-gray-700, ${ GRAY[ 700 ] })`, + 600: `var(--wp-components-color-gray-600, ${ GRAY[ 600 ] })`, + 400: `var(--wp-components-color-gray-400, ${ GRAY[ 400 ] })`, + 300: `var(--wp-components-color-gray-300, ${ GRAY[ 300 ] })`, + 200: `var(--wp-components-color-gray-200, ${ GRAY[ 200 ] })`, + 100: `var(--wp-components-color-gray-100, ${ GRAY[ 100 ] })`, + }, +}; + +const UI = { + background: THEME.background, + backgroundDisabled: THEME.gray[ 100 ], + border: THEME.gray[ 600 ], + borderHover: THEME.gray[ 700 ], + borderFocus: THEME.accent, + borderDisabled: THEME.gray[ 400 ], + textDisabled: THEME.gray[ 600 ], + textDark: white, // TODO: Make this Theme-ready + + // Matches @wordpress/base-styles + darkGrayPlaceholder: rgba( GRAY[ 900 ], 0.62 ), // TODO: Make this work with CSS vars + lightGrayPlaceholder: rgba( white, 0.65 ), // TODO: Make this work with CSS vars }; export const COLORS = Object.freeze( { /** * The main gray color object. + * + * @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`. */ - gray: GRAY, + gray: GRAY, // TODO: Stop exporting this when everything is migrated to `theme` or `ui` white, alert: ALERT, + /** + * Theme-ready variables with fallbacks. + * + * Prefer semantic aliases in `COLORS.ui` when applicable. + */ theme: THEME, + /** + * Semantic aliases (prefer these over raw variables when applicable). + */ ui: UI, } ); From 10768424eccc6b3e976624bad60bb71787ae7eb5 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 23 Jan 2024 08:15:15 +0900 Subject: [PATCH 2/8] Update changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 92ce15dc425f6..c9b1286c996bf 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -18,6 +18,7 @@ ### Experimental - `BoxControl`: Update design ([#56665](https://github.com/WordPress/gutenberg/pull/56665)). +- Expand theming support in the `COLORS` variable object ([#58097](https://github.com/WordPress/gutenberg/pull/58097)). - `CustomSelect`: adjust `renderSelectedValue` to fix sizing ([#57865](https://github.com/WordPress/gutenberg/pull/57865)). ## 25.15.0 (2024-01-10) From 14733ddf7a3606af208d47d6702274e81ff4b425 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 23 Jan 2024 23:58:43 +0900 Subject: [PATCH 3/8] Update snapshots --- .../src/card/test/__snapshots__/index.tsx.snap | 6 +++--- .../test/__snapshots__/index.test.js.snap | 16 ++++++++-------- .../test/__snapshots__/index.tsx.snap | 16 ++++++++-------- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/components/src/card/test/__snapshots__/index.tsx.snap b/packages/components/src/card/test/__snapshots__/index.tsx.snap index b86714d86636a..0b723732e3dba 100644 --- a/packages/components/src/card/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/card/test/__snapshots__/index.tsx.snap @@ -26,7 +26,7 @@ Snapshot Diff:
@@ -43,7 +43,7 @@ Snapshot Diff:
@@ -77,7 +77,7 @@ Snapshot Diff:
diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap index 9b3f8b2d90e98..9827e818b332f 100644 --- a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap +++ b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap @@ -96,7 +96,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = ` -ms-flex: 1; flex: 1; position: relative; - background-color: #fff; + background-color: var(--wp-components-color-background, #fff); width: 100%; } @@ -174,7 +174,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = ` position: absolute; right: 0; top: 0; - border-color: #949494; + border-color: var(--wp-components-color-gray-600, #949494); border-style: solid; border-width: 1px; padding-left: 2px; @@ -367,7 +367,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = ` -ms-flex: 1; flex: 1; position: relative; - background-color: #fff; + background-color: var(--wp-components-color-background, #fff); width: 100%; } @@ -445,7 +445,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = ` position: absolute; right: 0; top: 0; - border-color: #949494; + border-color: var(--wp-components-color-gray-600, #949494); border-style: solid; border-width: 1px; padding-left: 2px; @@ -648,7 +648,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`] -ms-flex: 1; flex: 1; position: relative; - background-color: #fff; + background-color: var(--wp-components-color-background, #fff); width: 100%; } @@ -726,7 +726,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`] position: absolute; right: 0; top: 0; - border-color: #949494; + border-color: var(--wp-components-color-gray-600, #949494); border-style: solid; border-width: 1px; padding-left: 2px; @@ -941,7 +941,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`] -ms-flex: 1; flex: 1; position: relative; - background-color: #fff; + background-color: var(--wp-components-color-background, #fff); width: 100%; } @@ -1019,7 +1019,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`] position: absolute; right: 0; top: 0; - border-color: #949494; + border-color: var(--wp-components-color-gray-600, #949494); border-style: solid; border-width: 1px; padding-left: 2px; diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap index bac30669f1851..d672cfa76a8c5 100644 --- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap @@ -39,7 +39,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = } .emotion-8 { - background: #fff; + background: var(--wp-components-color-background, #fff); border: 1px solid transparent; border-radius: 2px; display: -webkit-inline-box; @@ -53,7 +53,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = } .emotion-8:hover { - border-color: #757575; + border-color: var(--wp-components-color-gray-700, #757575); } .emotion-8:focus-within { @@ -366,7 +366,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options } .emotion-8 { - background: #fff; + background: var(--wp-components-color-background, #fff); border: 1px solid transparent; border-radius: 2px; display: -webkit-inline-box; @@ -380,7 +380,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options } .emotion-8:hover { - border-color: #757575; + border-color: var(--wp-components-color-gray-700, #757575); } .emotion-8:focus-within { @@ -586,7 +586,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] } .emotion-8 { - background: #fff; + background: var(--wp-components-color-background, #fff); border: 1px solid transparent; border-radius: 2px; display: -webkit-inline-box; @@ -600,7 +600,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] } .emotion-8:hover { - border-color: #757575; + border-color: var(--wp-components-color-gray-700, #757575); } .emotion-8:focus-within { @@ -907,7 +907,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio } .emotion-8 { - background: #fff; + background: var(--wp-components-color-background, #fff); border: 1px solid transparent; border-radius: 2px; display: -webkit-inline-box; @@ -921,7 +921,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio } .emotion-8:hover { - border-color: #757575; + border-color: var(--wp-components-color-gray-700, #757575); } .emotion-8:focus-within { From 8b321ab3dc989e303a031f2eeabc637b11a3e00c Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 25 Jan 2024 23:48:26 +0900 Subject: [PATCH 4/8] Fix gray-900 var I'll leave this here with a deprecation marking, just to inform people that they should be using `foreground` when they try and reach for gray-900. --- packages/components/src/utils/colors-values.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js index fb90a54e851b9..3cde57519fa48 100644 --- a/packages/components/src/utils/colors-values.js +++ b/packages/components/src/utils/colors-values.js @@ -43,7 +43,8 @@ const THEME = { background: `var(--wp-components-color-background, ${ white })`, foreground: `var(--wp-components-color-foreground, ${ GRAY[ 900 ] })`, gray: { - 900: `var(--wp-components-color-gray-900, ${ GRAY[ 900 ] })`, + /** @deprecated Use `COLORS.theme.foreground` instead. */ + 900: `var(--wp-components-color-foreground, ${ GRAY[ 900 ] })`, 800: `var(--wp-components-color-gray-800, ${ GRAY[ 800 ] })`, 700: `var(--wp-components-color-gray-700, ${ GRAY[ 700 ] })`, 600: `var(--wp-components-color-gray-600, ${ GRAY[ 600 ] })`, From e6027506ab437dcb6c3659dbf57b6fc2273c2e86 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 26 Jan 2024 00:23:25 +0900 Subject: [PATCH 5/8] Completely match theme-variables scss --- .../components/src/utils/colors-values.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js index 3cde57519fa48..208d7d48d7d9c 100644 --- a/packages/components/src/utils/colors-values.js +++ b/packages/components/src/utils/colors-values.js @@ -29,19 +29,20 @@ const ALERT = { green: '#4ab866', }; -// Matches the Modern admin scheme in @wordpress/base-styles -const ADMIN = { - theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))', - themeDark10: - 'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))', -}; - // Should match packages/components/src/utils/theme-variables.scss const THEME = { - accent: ADMIN.theme, - accentDarker10: ADMIN.themeDark10, + accent: `var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))`, + accentDarker10: `var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))`, + accentDarker20: `var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6))`, + /** Used when placing text on the accent color. */ + accentInverted: `var(--wp-components-color-accent-inverted, ${ white })`, + background: `var(--wp-components-color-background, ${ white })`, + foreground: `var(--wp-components-color-foreground, ${ GRAY[ 900 ] })`, + /** Used when placing text on the foreground color. */ + foregroundInverted: `var(--wp-components-color-foreground-inverted, ${ white })`, + gray: { /** @deprecated Use `COLORS.theme.foreground` instead. */ 900: `var(--wp-components-color-foreground, ${ GRAY[ 900 ] })`, From f0f2710fe4daf73cda0b13274b0780c95d3cbab3 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 26 Jan 2024 00:25:28 +0900 Subject: [PATCH 6/8] Replace `ui.textDark` to `theme.foregroundInverted` --- .../resize-tooltip/styles/resize-tooltip.styles.ts | 6 +++--- packages/components/src/utils/colors-values.js | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.ts b/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.ts index 399fe92616d56..acd015687f81b 100644 --- a/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.ts +++ b/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.ts @@ -30,12 +30,12 @@ export const TooltipWrapper = styled.div` `; export const Tooltip = styled.div` - background: ${ COLORS.gray[ 900 ] }; + background: ${ COLORS.theme.foreground }; border-radius: 2px; box-sizing: border-box; font-family: ${ font( 'default.fontFamily' ) }; font-size: 12px; - color: ${ COLORS.ui.textDark }; + color: ${ COLORS.theme.foregroundInverted }; padding: 4px 8px; position: relative; `; @@ -45,7 +45,7 @@ export const Tooltip = styled.div` export const LabelText = styled( Text )` &&& { - color: ${ COLORS.ui.textDark }; + color: ${ COLORS.theme.foregroundInverted }; display: block; font-size: 13px; line-height: 1.4; diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js index 208d7d48d7d9c..8ccdd03850d72 100644 --- a/packages/components/src/utils/colors-values.js +++ b/packages/components/src/utils/colors-values.js @@ -64,7 +64,6 @@ const UI = { borderFocus: THEME.accent, borderDisabled: THEME.gray[ 400 ], textDisabled: THEME.gray[ 600 ], - textDark: white, // TODO: Make this Theme-ready // Matches @wordpress/base-styles darkGrayPlaceholder: rgba( GRAY[ 900 ], 0.62 ), // TODO: Make this work with CSS vars From c9020bdc1211e79e05e718415380c73115ade4cc Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 26 Jan 2024 01:19:14 +0900 Subject: [PATCH 7/8] Replace with color-mix --- packages/components/src/utils/colors-values.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js index 8ccdd03850d72..1ad528d13f010 100644 --- a/packages/components/src/utils/colors-values.js +++ b/packages/components/src/utils/colors-values.js @@ -1,8 +1,6 @@ /** * Internal dependencies */ -import { rgba } from './colors'; - const white = '#fff'; // Matches the grays in @wordpress/base-styles @@ -66,8 +64,8 @@ const UI = { textDisabled: THEME.gray[ 600 ], // Matches @wordpress/base-styles - darkGrayPlaceholder: rgba( GRAY[ 900 ], 0.62 ), // TODO: Make this work with CSS vars - lightGrayPlaceholder: rgba( white, 0.65 ), // TODO: Make this work with CSS vars + darkGrayPlaceholder: `color-mix(in srgb, ${ THEME.foreground }, transparent 38%)`, + lightGrayPlaceholder: `color-mix(in srgb, ${ THEME.background }, transparent 35%)`, }; export const COLORS = Object.freeze( { From 88025c1880577286669ccbfcc50029adcf813329 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 26 Jan 2024 03:26:13 +0900 Subject: [PATCH 8/8] Fix changelog placement --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 12568061240d4..59cce32e06e84 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -10,6 +10,7 @@ - `Guide`, `Modal`: Restore accent color themability ([#58098](https://github.com/WordPress/gutenberg/pull/58098)). - `DropdownMenuV2`: Restore accent color themability ([#58130](https://github.com/WordPress/gutenberg/pull/58130)). +- Expand theming support in the `COLORS` variable object ([#58097](https://github.com/WordPress/gutenberg/pull/58097)). ## 25.16.0 (2024-01-24) @@ -34,7 +35,6 @@ ### Experimental - `BoxControl`: Update design ([#56665](https://github.com/WordPress/gutenberg/pull/56665)). -- Expand theming support in the `COLORS` variable object ([#58097](https://github.com/WordPress/gutenberg/pull/58097)). - `CustomSelect`: adjust `renderSelectedValue` to fix sizing ([#57865](https://github.com/WordPress/gutenberg/pull/57865)). - `Theme`: Set `color` on wrapper div ([#58095](https://github.com/WordPress/gutenberg/pull/58095)).