Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Components: use new theming accent color in all components #45289

Merged
merged 35 commits into from
Nov 9, 2022
+53 −46
Merged

Components: use new theming accent color in all components #45289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
32ea922
update emotion color value variables
chad1008 Oct 25, 2022
bd8d776
update AnglePickerControl component color variables
chad1008 Oct 25, 2022
19a4342
simplify AnglePickerControl color declaration
chad1008 Oct 26, 2022
3ca9aac
update Autocomplete color variable
chad1008 Oct 26, 2022
2b4b9d3
update BaseField snapshot color variable
chad1008 Oct 26, 2022
d4738d9
update CheckboxControl color variables
chad1008 Oct 26, 2022
6c927e0
add explicit border color to CheckboxControl input when focused
chad1008 Oct 26, 2022
6ab0cd9
update ColorPalette color variable
chad1008 Oct 26, 2022
f60dd7b
update DropZone color variable
chad1008 Oct 26, 2022
ce2d6b6
update FormToggle color variable
chad1008 Oct 26, 2022
014fc5d
update FormTokenfield color variables
chad1008 Oct 26, 2022
4ca7afb
update navigate-regions color variables
chad1008 Oct 26, 2022
0be1ffb
update CheckboxControl's overrides for @wordpress/base-styles mixins
chad1008 Oct 26, 2022
324fd16
update FormTokenField's overrides for @wordpress/base-styles mixins
chad1008 Oct 26, 2022
c9183b0
update MenuItem color variable
chad1008 Oct 26, 2022
3b9fc6d
update Notice color variable
chad1008 Oct 26, 2022
63ce620
update Panel color variable
chad1008 Oct 26, 2022
487d7ec
update RangeControl color variables
chad1008 Oct 26, 2022
c8b8872
update ResizableBox color variables
chad1008 Oct 26, 2022
8cc2715
update SearchControl color variable
chad1008 Oct 26, 2022
f66c05f
update SearchControl's override for @wordpress/base-styles mixins
chad1008 Oct 26, 2022
891fc6f
update SnackBar color variable
chad1008 Oct 26, 2022
98f1898
update Spinner color variable
chad1008 Oct 26, 2022
1bd21f4
update TabPanel color variables
chad1008 Oct 27, 2022
f0c9bfb
update ToggleGroupControl snapshot color variables
chad1008 Oct 27, 2022
a03c416
update ToolsPanel color variable
chad1008 Oct 27, 2022
920fc07
update utils/input color variables (used for TextAreaControl)
chad1008 Oct 27, 2022
95a90a0
Add override for block mover handle focused state
chad1008 Oct 27, 2022
06ac815
update CHANGELOG
chad1008 Oct 27, 2022
b46a409
update `Notice` Readme
chad1008 Oct 27, 2022
afbde74
update preferences modal unit test snapshot
chad1008 Nov 1, 2022
ed277e0
update post-publish-panel unit test snapshot
chad1008 Nov 1, 2022
7b5a322
add missing semicolon
chad1008 Nov 1, 2022
78fe867
Revert all @base-styles overrides to be addressed separately
chad1008 Nov 3, 2022
a4151e4
expose COLORS.ui.themeDark10 for uses where it makes more sense seman…
chad1008 Nov 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,10 @@
- `Autocomplete`: use Popover's new `placement` prop instead of legacy `position` prop ([#44396](https://github.com/WordPress/gutenberg/pull/44396/)).
- `FontSizePicker`: Add more comprehensive tests ([#45298](https://github.com/WordPress/gutenberg/pull/45298)).

### Experimental
- Theming: updated Components package to utilize the new `accent` prop of the experimental `Theme` component.


## 21.3.0 (2022-10-19)

### Bug Fix
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/angle-picker-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { Root } from './styles/angle-picker-control-styles';
import { space } from '../ui/utils/space';
import { Text } from '../text';
import { Spacer } from '../spacer';
import { COLORS } from '../utils/colors-values';

export default function AnglePickerControl( {
/** Start opting into the new margin-free styles that will become the default in a future version. */
Expand Down Expand Up @@ -70,7 +71,7 @@ export default function AnglePickerControl( {
marginBottom={ 0 }
marginRight={ space( 3 ) }
style={ {
color: 'var( --wp-admin-theme-color )',
color: COLORS.ui.theme,
} }
>
°
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/autocomplete/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@
width: 100%;

&.is-selected {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
}
}
4 changes: 2 additions & 2 deletions packages/components/src/base-field/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,8 +127,8 @@ exports[`base field should render correctly 1`] = `

.emotion-0:focus,
.emotion-0[data-focused='true'] {
border-color: var( --wp-admin-theme-color, #007cba);
box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
}

<div
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/checkbox-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,16 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
@include reduce-motion("transition");

&:focus {
box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) var(--wp-admin-theme-color);
box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) $components-color-accent;

// Only visible in Windows High Contrast mode.
outline: 2px solid transparent;
}

&:checked,
&:indeterminate {
background: var(--wp-admin-theme-color);
border-color: var(--wp-admin-theme-color);
background: $components-color-accent;
border-color: $components-color-accent;

// Hide default checkbox styles in IE.
&::-ms-check {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/color-palette/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
outline: 1px solid transparent;

&:focus {
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
// Show a outline in Windows high contrast mode.
outline-width: 2px;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/drop-zone/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
height: 100%;
width: 100%;
display: flex;
background-color: var(--wp-admin-theme-color);
background-color: $components-color-accent;
align-items: center;
justify-content: center;
z-index: z-index(".components-drop-zone__content");
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/form-toggle/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,13 @@ $toggle-border-width: 1px;

// Checked state.
&.is-checked .components-form-toggle__track {
background-color: var(--wp-admin-theme-color);
border: $toggle-border-width solid var(--wp-admin-theme-color);
background-color: $components-color-accent;
border: $toggle-border-width solid $components-color-accent;
border: #{ $toggle-height * 0.5 } solid transparent; // Expand the border to fake a solid in Windows High Contrast Mode.
}

.components-form-toggle__input:focus + .components-form-toggle__track {
box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) var(--wp-admin-theme-color);
box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) $components-color-accent;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/form-token-field/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@

.components-form-token-field__token-text {
background: transparent;
color: var(--wp-admin-theme-color);
color: $components-color-accent;
}

.components-form-token-field__remove-token {
Expand Down Expand Up @@ -183,7 +183,7 @@
cursor: pointer;

&.is-selected {
background: var(--wp-admin-theme-color);
background: $components-color-accent;
color: $white;
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/higher-order/navigate-regions/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
right: 0;
pointer-events: none;
outline: 4px solid transparent; // Shown in Windows High Contrast mode.
box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color);
box-shadow: inset 0 0 0 4px $components-color-accent;
}

@supports ( outline-offset: 1px ) {
Expand All @@ -24,7 +24,7 @@

&:focus {
outline-style: solid;
outline-color: var(--wp-admin-theme-color);
outline-color: $components-color-accent;
outline-width: 4px;
outline-offset: -4px;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/menu-item/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
// Override the button component's tertiary background and color.
&.is-tertiary {
background: none;
color: var(--wp-admin-theme-color-darker-10);
color: $components-color-accent-darker-10;
opacity: 0.3;
}
}
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/notice/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ Notices display at the top of the screen, below any toolbars anchored to the top
Notices are color-coded to indicate the type of message being communicated:

- **Default** notices have **no background**.
- **Informational** notices are **blue.**
- **Informational** notices are **blue** by default.
- If there is a parent `Theme` component with an `accent` color prop, informational notices will take on that color instead.
- **Success** notices are **green.**
- **Warning** notices are **yellow\*\***.\*\*
- **Error** notices are **red.**
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/notice/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
font-family: $default-font;
font-size: $default-font-size;
background-color: $white;
border-left: 4px solid var(--wp-admin-theme-color);
border-left: 4px solid $components-color-accent;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an interesting case for theming... on some themes (like the "Sunset" theme we're currently using in Storybook) the notices can take on an orange color. With another theme it could even be red. These colors on notices usually have more meaning than they would in other components, indicating the severity/urgency of the notice.

Not sure if/how that impacts how we'd want to apply theming on this component.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's an interesting point. I will note that the success, warning and error statues of notice already have a hardcoded border color (a few lines below in this file), and so this specific rule would only affect the "default" and
"informational" statuses.

Current behaviour is also explained in the README — we should keep that in mind in case it needs updating too

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Current behaviour is also explained in the README — we should keep that in mind in case it needs updating too

Good call. I've added an update to the README ✅

margin: 5px 15px 2px;
padding: 8px 12px;
align-items: center;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@
height: auto;

&:focus {
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
border-radius: 0;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/range-control/styles/range-control-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ const thumbColor = ( { disabled }: ThumbProps ) =>
background-color: ${ COLORS.gray[ 400 ] };
`
: css`
background-color: var( --wp-admin-theme-color );
background-color: ${ COLORS.ui.theme };
`;

export const ThumbWrapper = styled.span`
Expand Down Expand Up @@ -205,7 +205,7 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
&::before {
content: ' ';
position: absolute;
background-color: var( --wp-admin-theme-color );
background-color: ${ COLORS.ui.theme };
opacity: 0.4;
border-radius: 50%;
height: ${ thumbSize + 8 }px;
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/resizable-box/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
top: calc(50% - #{ceil($resize-handler-size * 0.5)});
right: calc(50% - #{ceil($resize-handler-size * 0.5)});

box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
// Only visible in Windows High Contrast mode.
outline: 2px solid transparent;
}
Expand All @@ -47,7 +47,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
content: "";
width: 3px;
height: 3px;
background: var(--wp-admin-theme-color);
background: $components-color-accent;
cursor: inherit;
position: absolute;
top: calc(50% - 1px);
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/search-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

&:focus {
background: $white;
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
}

&::placeholder {
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/snackbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
&:focus {
box-shadow:
0 0 0 1px $white,
0 0 0 3px var(--wp-admin-theme-color);
0 0 0 3px $components-color-accent;
}

&.components-snackbar-explicit-dismiss {
Expand Down Expand Up @@ -64,7 +64,7 @@
}

&:hover {
color: var(--wp-admin-theme-color);
color: $components-color-accent;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/spinner/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const StyledSpinner = styled.svg`
display: inline-block;
margin: 5px 11px 0;
position: relative;
color: var( --wp-admin-theme-color );
color: ${ COLORS.ui.theme };
overflow: visible;
`;

Expand Down
9 changes: 4 additions & 5 deletions packages/components/src/tab-panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,12 @@
}

&:focus:not(:disabled) {
box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
box-shadow: inset 0 var(--wp-admin-border-width-focus) $components-color-accent;
}


&.is-active {
// The transparent shadow ensures no jumpiness when focus animates on an active tab.
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 $components-color-accent;
position: relative;

// This border appears in Windows High Contrast mode instead of the box-shadow.
Expand All @@ -55,10 +54,10 @@
}

&:focus {
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
}

&.is-active:focus {
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -#{$border-width-tab * 2} 0 0 var(--wp-admin-theme-color);
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent, inset 0 -#{$border-width-tab * 2} 0 0 $components-color-accent;
}
}
8 changes: 4 additions & 4 deletions packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,8 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
}

.emotion-8:focus-within {
border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
outline: none;
z-index: 1;
}
Expand Down Expand Up @@ -402,8 +402,8 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
}

.emotion-8:focus-within {
border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
outline: none;
z-index: 1;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/tools-panel/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ export const DropdownMenu = css`
`;

export const ResetLabel = styled.span`
color: var( --wp-admin-theme-color-darker-10 );
color: ${ COLORS.ui.themeDark10 };
font-size: 11px;
font-weight: 500;
line-height: 1.4;
Expand Down
6 changes: 4 additions & 2 deletions packages/components/src/utils/colors-values.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,14 @@ const ALERT = {

// Matches @wordpress/base-styles
const ADMIN = {
theme: 'var( --wp-admin-theme-color, #007cba)',
themeDark10: 'var( --wp-admin-theme-color-darker-10, #006ba1)',
theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba))',
themeDark10:
'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1))',
};

const UI = {
theme: ADMIN.theme,
themeDark10: ADMIN.themeDark10,
background: white,
backgroundDisabled: GRAY[ 100 ],
border: GRAY[ 700 ],
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/utils/input/base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ export const inputStyleNeutral = css`
`;

export const inputStyleFocus = css`
border-color: var( --wp-admin-theme-color );
border-color: ${ COLORS.ui.theme };
box-shadow: 0 0 0
calc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )
var( --wp-admin-theme-color );
${ COLORS.ui.theme };

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
Expand Down
6 changes: 3 additions & 3 deletions packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -580,13 +580,13 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
}

.emotion-13:hover {
color: var( --wp-admin-theme-color, #007cba);
color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
}

.emotion-13:focus {
background-color: transparent;
color: var( --wp-admin-theme-color, #007cba);
border-color: var( --wp-admin-theme-color, #007cba);
color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
outline: 3px solid transparent;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -609,7 +609,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
display: inline-block;
margin: 5px 11px 0;
position: relative;
color: var( --wp-admin-theme-color );
color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
overflow: visible;
}

Expand Down