Woocommerce-admin: Inconsistent color themes and style regressions

Created on 10 Jun 2020  路  3Comments  路  Source: woocommerce/woocommerce-admin

Describe the bug

There are many different (and clashing) color themes at play in master now (see screenshots). We need to decide what colors should replace the purples and pinks. (cc: @jameskoster)

Additionally there are style regressions that need to be fixed.

Screenshots

Screen Shot 2020-06-10 at 1 31 32 PM

Screen Shot 2020-06-10 at 1 31 44 PM

Screen Shot 2020-06-10 at 1 32 00 PM

Screen Shot 2020-06-10 at 1 44 30 PM

Screen Shot 2020-06-10 at 1 44 59 PM

Screen Shot 2020-06-10 at 2 26 05 PM

Screen Shot 2020-06-10 at 2 26 33 PM

Screen Shot 2020-06-10 at 2 26 58 PM

Screen Shot 2020-06-10 at 2 27 17 PM

Screen Shot 2020-06-10 at 2 29 03 PM

Screen Shot 2020-06-10 at 2 30 13 PM

Screen Shot 2020-06-10 at 2 30 35 PM

Screen Shot 2020-06-10 at 2 32 19 PM

Screen Shot 2020-06-10 at 2 40 36 PM

needs design high bug

All 3 comments

Noting here that $theme-color should be used for most of these and is derived from the user chosen theme. Our postCSS process doesn't handle that correctly.

As @psealock says, in most cases we should be using $theme-color for any accent colors in our own components.

Ideally for core components - things like checkboxes, toggles, tabs, buttons, etc - we simply remove any overrides we've added and utilise their included styles.

For clarification around which colors to use for our own unique components (things like check list items, summary numbers, etc), please refer to Figma.

Text links should match core. Without looking I'm not sure exactly which color is used there, but highly likely to be $theme-color :)

One more area looking a bit off too - and mentioned to @octaedro in a DM too:

image

Thanks for adding this issue Jeff, I saw all the OBW on a fresh test site in JN

Was this page helpful?
0 / 5 - 0 ratings