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

Jump to bottom

Fix hardcoded admin colors, use admin theme colors #39182

Merged
merged 30 commits into from Jul 26, 2023
Merged

Fix hardcoded admin colors, use admin theme colors #39182

Show file tree
Hide file tree
Changes from 29 commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
903ce08
Change default WooCommerce color
PanosSynetos Jul 11, 2023
eee7c0a
Blankstate buttons follow theme colors
PanosSynetos Jul 11, 2023
a697949
WooCommerce message use admin theme color
PanosSynetos Jul 11, 2023
54bdd0d
Input toggles use admin theme color
PanosSynetos Jul 11, 2023
76af662
Email status use admin theme color
PanosSynetos Jul 11, 2023
6263316
Breadcrump up link use admin theme color
PanosSynetos Jul 11, 2023
5b72907
Importer/Exporter use admin theme color
PanosSynetos Jul 11, 2023
4c19633
Auth page uses Woo colors, according to branding
PanosSynetos Jul 11, 2023
c80b0bc
Untested extensions modal uses theme colors
PanosSynetos Jul 11, 2023
9412de1
Use page-title-action instead of deprecated add-new-h2
PanosSynetos Jul 11, 2023
b467c0f
Shipping methods empty state follow theme colors (and minor improveme…
PanosSynetos Jul 11, 2023
111841f
Use new branding colors in activation and wc setup
PanosSynetos Jul 11, 2023
6ee83e0
Fix activation css to use wp-admin-theme-color
PanosSynetos Jul 11, 2023
4bbc7b3
Remove hardcoded text color wherever variable background color is used
PanosSynetos Jul 11, 2023
ec6ab3b
Merge branch 'trunk' into fix/admin-colors-use-theme
PanosSynetos Jul 11, 2023
658e119
Merge branch 'trunk' into fix/admin-colors-use-theme
PanosSynetos Jul 12, 2023
5fe4a08
Applied review comments
PanosSynetos Jul 12, 2023
2c1fe3e
Remove styles from buttons, as theme colors.css is taking care of them
PanosSynetos Jul 12, 2023
e7b3f9f
Changelog
PanosSynetos Jul 12, 2023
1290484
Changelog (again)
PanosSynetos Jul 12, 2023
9dd71e8
Changelog
PanosSynetos Jul 12, 2023
269d893
Finally, that's the changelog :)
PanosSynetos Jul 12, 2023
cfff3c6
Components empty content icon color
PanosSynetos Jul 14, 2023
81f0f78
Store alerts update - use admin theme colors
PanosSynetos Jul 14, 2023
f1ff6b0
Hover on orders view icon, use admin theme color
PanosSynetos Jul 14, 2023
6260251
Changelog
PanosSynetos Jul 14, 2023
89784c0
Update helper css to use admin theme color
PanosSynetos Jul 14, 2023
d7930bc
Update count color, use admin theme
PanosSynetos Jul 18, 2023
ea1d08c
Merge branch 'trunk' into fix/admin-colors-use-theme
PanosSynetos Jul 19, 2023
155420f
Merge branch 'trunk' into fix/admin-colors-use-theme
PanosSynetos Jul 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/js/components/changelog/fix-admin-colors-use-theme
View file
Open in desktop
@@ -0,0 +1,4 @@
Significance: patch
Type: fix

Fixed empty component logo color, used generic rather than old pink
5 changes: 3 additions & 2 deletions packages/js/components/src/empty-content/index.js
View file
Open in desktop
Expand Up @@ -174,8 +174,9 @@ EmptyContent.propTypes = {
EmptyContent.defaultProps = {
// eslint-disable-next-line max-len
illustration:
'data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"%3E%3Cpath d="M226.153073,88.3099993 L355.380187,301.446227 C363.970299,315.614028 359.448689,334.062961 345.280888,342.653073 C340.591108,345.496544 335.21158,347 329.727115,347 L71.2728854,347 C54.7043429,347 41.2728854,333.568542 41.2728854,317 C41.2728854,311.515534 42.7763415,306.136007 45.6198127,301.446227 L174.846927,88.3099993 C183.437039,74.1421985 201.885972,69.6205881 216.053773,78.2106999 C220.184157,80.7150022 223.64877,84.1796157 226.153073,88.3099993 Z M184.370159,153 L186.899684,255.024156 L213.459691,255.024156 L215.989216,153 L184.370159,153 Z M200.179688,307.722584 C209.770801,307.722584 217.359375,300.450201 217.359375,291.175278 C217.359375,281.900355 209.770801,274.627972 200.179688,274.627972 C190.588574,274.627972 183,281.900355 183,291.175278 C183,300.450201 190.588574,307.722584 200.179688,307.722584 Z" id="Combined-Shape" stroke="%23979797" fill="%2395588A" fill-rule="nonzero"%3E%3C/path%3E%3C/svg%3E',
illustrationWidth: 400,
'data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"%3E%3Cpath d="M226.153073,88.3099993 L355.380187,301.446227 C363.970299,315.614028 359.448689,334.062961 345.280888,342.653073 C340.591108,345.496544 335.21158,347 329.727115,347 L71.2728854,347 C54.7043429,347 41.2728854,333.568542 41.2728854,317 C41.2728854,311.515534 42.7763415,306.136007 45.6198127,301.446227 L174.846927,88.3099993 C183.437039,74.1421985 201.885972,69.6205881 216.053773,78.2106999 C220.184157,80.7150022 223.64877,84.1796157 226.153073,88.3099993 Z M184.370159,153 L186.899684,255.024156 L213.459691,255.024156 L215.989216,153 L184.370159,153 Z M200.179688,307.722584 C209.770801,307.722584 217.359375,300.450201 217.359375,291.175278 C217.359375,281.900355 209.770801,274.627972 200.179688,274.627972 C190.588574,274.627972 183,281.900355 183,291.175278 C183,300.450201 190.588574,307.722584 200.179688,307.722584 Z" id="Combined-Shape" stroke="%23c0c0c0" fill="%23c0c0c0"' +
' fill-rule="nonzero"%3E%3C/path%3E%3C/svg%3E',
illustrationWidth: 100,
};

export default EmptyContent;
2 changes: 1 addition & 1 deletion plugins/woocommerce-admin/client/layout/store-alerts/style.scss
View file
Open in desktop
Expand Up @@ -76,7 +76,7 @@
}

.is-alert-update {
$alert-color: #11a0d2;
$alert-color: var(--wp-admin-theme-color);

&::before {
background-color: $alert-color;
Expand Down
4 changes: 4 additions & 0 deletions plugins/woocommerce/changelog/fix-admin-colors-use-theme
View file
Open in desktop
@@ -0,0 +1,4 @@
Significance: patch
Type: fix

Use admin theme color instead of old pink. Update old pink to the new brand color.
4 changes: 2 additions & 2 deletions plugins/woocommerce/client/legacy/css/_variables.scss
View file
Open in desktop
Expand Up @@ -2,13 +2,13 @@
* WooCommerce CSS Variables
*/

$woocommerce: #a46497 !default;
$woocommerce: #7F54B3 !default;
$green: #7ad03a !default;
$red: #a00 !default;
$orange: #ffba00 !default;
$blue: #2ea2cc !default;

$primary: #a46497 !default; // Primary color for buttons (alt)
$primary: #7F54B3 !default; // Primary color for buttons (alt)
$primarytext: desaturate(lighten($primary, 50%), 18%) !default; // Text on primary color bg

$secondary: desaturate(lighten($primary, 40%), 21%) !default; // Secondary buttons
Expand Down
18 changes: 1 addition & 17 deletions plugins/woocommerce/client/legacy/css/activation.scss
View file
Open in desktop
Expand Up @@ -11,29 +11,13 @@ div.woocommerce-message {
position: relative;

&.updated {
border-left-color: #cc99c2 !important;
border-left-color: var(--wp-admin-theme-color) !important;
}
}

p.woocommerce-actions,
.woocommerce-message {

.button-primary {
background: #bb77ae;
border-color: #a36597;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597;
color: #fff;
text-shadow: 0 -1px 1px #a36597, 1px 0 1px #a36597, 0 1px 1px #a36597, -1px 0 1px #a36597;

&:hover,
&:focus,
&:active {
background: #a36597;
border-color: #a36597;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597;
}
}

a.woocommerce-message-close {
position: static;
float: right;
Expand Down
118 changes: 35 additions & 83 deletions plugins/woocommerce/client/legacy/css/admin.scss
View file
Open in desktop
Expand Up @@ -199,7 +199,7 @@
}

.update-plugins .update-count {
background-color: #d54e21;
background-color: var(--wp-admin-theme-color);
border-radius: 10px;
color: #fff;
display: inline-block;
Expand Down Expand Up @@ -477,7 +477,7 @@

.addon-product-group-see-more,
.addon-product-group-see-more:visited {
color: #007cba;
color: var(--wp-admin-theme-color);
/* Primary / Blue */
display: block;
font-size: 13px;
Expand Down Expand Up @@ -582,7 +582,7 @@

h2,
h3 {
color: #007cba;
color: var(--wp-admin-theme-color);
font-size: 20px;
font-weight: 400;
letter-spacing: -0.32px;
Expand Down Expand Up @@ -620,7 +620,7 @@
}

h2 {
color: #2c3338;
color: var(--wp-admin-theme-color);
}
}

Expand Down Expand Up @@ -718,8 +718,8 @@

.button {
background-color: #fff;
border-color: #007cba;
color: #007cba;
border-color: var(--wp-admin-theme-color);
color: var(--wp-admin-theme-color);
float: right;
font-size: 13px;
height: 36px;
Expand Down Expand Up @@ -857,7 +857,7 @@
max-width: 1200px;

.update-plugins .update-count {
background-color: #d54e21;
background-color: var(--wp-admin-theme-color);
border-radius: 10px;
color: #fff;
display: inline-block;
Expand Down Expand Up @@ -902,21 +902,7 @@
.woocommerce-BlankState {
a.button-primary,
button.button-primary {
background: #bb77ae;
border-color: #a36597;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597;
color: #fff;
text-shadow: 0 -1px 1px #a36597, 1px 0 1px #a36597, 0 1px 1px #a36597,
-1px 0 1px #a36597;
display: inline-block;

&:hover,
&:focus,
&:active {
background: #a36597;
border-color: #a36597;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597;
}
}
}

Expand All @@ -925,7 +911,7 @@
overflow: hidden;

&.updated {
border-left-color: #cc99c2 !important;
border-left-color: var(--wp-admin-theme-color) !important;
}

a.skip,
Expand Down Expand Up @@ -2870,7 +2856,7 @@ ul.wc_coupon_list_block {
}

&:hover {
border: 2px solid #00a0d2;
border: 2px solid var(--wp-admin-theme-color);
}
}

Expand Down Expand Up @@ -3929,11 +3915,9 @@ table.wc-shipping-classes {

td.wc-shipping-zones-blank-state,
td.wc-shipping-zone-method-blank-state {
background: #f7f1f6 !important;
overflow: hidden;
position: relative;
padding: 7.5em 7.5% !important;
border-bottom: 2px solid #eee2ec;

&.wc-shipping-zone-method-blank-state {
padding: 2em !important;
Expand All @@ -3945,16 +3929,16 @@ table.wc-shipping-classes {

p,
li {
color: #a46497;
font-size: 1.5em;
line-height: 1.5em;
margin: 0 0 1em;
color: var(--wc-secondary-text);
font-size: 1.2em;
line-height: 1.2em;
margin: 0 0 1.5em;
position: relative;
z-index: 1;
text-shadow: 1px 1px 1px white;

&.main {
font-size: 2em;
font-size: 1.6em;
}
}

Expand All @@ -3968,7 +3952,7 @@ table.wc-shipping-classes {
font-family: "WooCommerce";
text-align: center;
line-height: 1;
color: #eee2ec;
color: #e9e9e9;
display: block;
width: 1em;
font-size: 40em;
Expand All @@ -3979,16 +3963,9 @@ table.wc-shipping-classes {
}

.button-primary {
background-color: #804877;
border-color: #804877;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 1px 0 rgba(0, 0, 0, 0.15);
margin: 0;
opacity: 1;
text-shadow: 0 -1px 1px #8a4f7f, 1px 0 1px #8a4f7f,
0 1px 1px #8a4f7f, -1px 0 1px #8a4f7f;
font-size: 1.5em;
padding: 0.75em 1em;
font-size: 1.2em;
padding: 0.75em 1.5em;
margin: 0 0.25em;
height: auto;
position: relative;
z-index: 1;
Expand Down Expand Up @@ -4205,8 +4182,8 @@ table.wc-shipping-classes {
.woocommerce-input-toggle {
height: 16px;
width: 32px;
border: 2px solid #935687;
background-color: #935687;
border: 2px solid var(--wp-admin-theme-color);
background-color: var(--wp-admin-theme-color);
display: inline-block;
text-indent: -9999px;
border-radius: 10em;
Expand Down Expand Up @@ -4341,7 +4318,7 @@ img.help_tip {

.status-enabled::before {
@include icon("\e015");
color: $woocommerce;
color: var(--wp-admin-theme-color);
}

.status-disabled::before {
Expand All @@ -4366,7 +4343,7 @@ img.help_tip {
margin-left: 0.5em;

a {
color: #a46497;
color: var(--wp-admin-theme-color);
}
}

Expand Down Expand Up @@ -7499,21 +7476,21 @@ table.bar_chart {
}

li.active {
border-color: #a16696;
color: #a16696;
border-color: var(--wp-admin-theme-color);
color: var(--wp-admin-theme-color);

&::before {
border-color: #a16696;
border-color: var(--wp-admin-theme-color);
}
}

li.done {
border-color: #a16696;
color: #a16696;
border-color: var(--wp-admin-theme-color);
color: var(--wp-admin-theme-color);

&::before {
border-color: #a16696;
background: #a16696;
border-color: var(--wp-admin-theme-color);
background: var(--wp-admin-theme-color);
}
}
}
Expand All @@ -7522,29 +7499,7 @@ table.bar_chart {
font-size: 1.25em;
padding: 0.5em 1em !important;
line-height: 1.5em !important;
margin-right: 0.5em;
margin-bottom: 2px;
height: auto !important;
border-radius: 4px;
background-color: #bb77ae;
border-color: #a36597;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 0 #a36597;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597;
text-shadow: 0 -1px 1px #a36597, 1px 0 1px #a36597, 0 1px 1px #a36597,
-1px 0 1px #a36597;
margin: 0;
opacity: 1;

&:hover,
&:focus,
&:active {
background: #a36597;
border-color: #a36597;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 0 #a36597;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597;
}
}

.error .button {
Expand Down Expand Up @@ -7701,24 +7656,21 @@ table.bar_chart {
progress::-webkit-progress-value {
border-radius: 3px;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
background: #a46497;
background: linear-gradient(to bottom, #a46497, #66405f), #a46497;
background: var(--wp-admin-theme-color);
transition: width 1s ease;
}

progress::-moz-progress-bar {
border-radius: 3px;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
background: #a46497;
background: linear-gradient(to bottom, #a46497, #66405f), #a46497;
background: var(--wp-admin-theme-color);
transition: width 1s ease;
}

progress::-ms-fill {
border-radius: 3px;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
background: #a46497;
background: linear-gradient(to bottom, #a46497, #66405f), #a46497;
background: var(--wp-admin-theme-color);
transition: width 1s ease;
}

Expand Down Expand Up @@ -7811,7 +7763,7 @@ table.bar_chart {

&::before {
@include icon("\e015");
color: #a16696;
color: var(--wp-admin-theme-color);
position: static;
font-size: 100px;
display: block;
Expand Down Expand Up @@ -7922,8 +7874,8 @@ table.bar_chart {
margin: 12px 12px 0 0;

&.current {
background: #007cba;
border: 1px solid #007cba;
background: var(--wp-admin-theme-color);
border: 1px solid var(--wp-admin-theme-color);

a {
color: #fff;
Expand Down