Skip to content
Merged
Changes from 1 commit
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
Prev Previous commit
Next Next commit
update ToolsPanel color variable
  • Loading branch information
chad1008 committed Nov 1, 2022
commit a03c416536c92c241e33888143f1e86d9426d57b
2 changes: 1 addition & 1 deletion packages/components/src/tools-panel/styles.ts
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.borderFocus };
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Along with this change, there are a couple of other pre-existing places in the codebase where this variable is being used for things other than a border... do we want to consider renaming it in utils/color-values.js in a followup PR?

Copy link
Member

Choose a reason for hiding this comment

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

We haven't yet audited these "semantic" color variables yet, so I don't know whether any of them are still relevant. The semantics are potentially useful when theming so we should keep them around until we audit them. That also means I don't want to force any new usages into these existing semantics if it doesn't make sense.

This ResetLabel isn't related to a borderFocus, so I would consider exposing a COLORS.ui.themeDark10 that we can use here. (Aaand it looks like you already did that! 😄)

Also unclear why this ResetLabel is a darker-10 and not just the theme color 🤔 Do you remember, @aaronrobertshaw?

Copy link
Contributor

Choose a reason for hiding this comment

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

Also unclear why this ResetLabel is a darker-10 and not just the theme color 🤔 Do you remember

Thanks for the ping.

I'm drawing a blank on why that CSS var was actually used.

As long as the color of the ResetLabel matches the "Saved" in the top toolbar when saving a draft post it will satisfy the request here.

Further context and history can be found in #44260.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Was looking at this with @mirka a little and this button doesn't have a disabled state, the 'reset' just isn't displayed when it isn't an option.

Looking at the focused/hovered state, I think I'd recommend we keep the current darker color. If the Reset span is given the same accent color as the rest of the list item, it becomes difficult to differentiate which button you're actually interacting with:

Screen.Recording.2022-11-03.at.11.36.59.mov

With the current darker color, there's at least a little contrast creating some distinction, though it is really subtle. We may want something with more contrast/decoration, but probably not something for this PR.

Any objection to keeping the slightly darker reset for now, using the newly exposed variable?

Copy link
Member

Choose a reason for hiding this comment

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

Yeah, we can keep it as is 👍 Thanks for looking into it.

font-size: 11px;
font-weight: 500;
line-height: 1.4;
Expand Down