From 2928216029e9abdfc26619ea14e340c754192f8c Mon Sep 17 00:00:00 2001 From: "Panos (Panagiotis) Synetos" <2484390+PanosSynetos@users.noreply.github.com> Date: Thu, 30 Nov 2023 11:53:12 +0200 Subject: [PATCH 1/8] Use fallback colors wherever CSS variables are used in WooCommerce admin --- .../client/layout/store-alerts/style.scss | 2 +- .../client/legacy/css/activation.scss | 2 +- .../woocommerce/client/legacy/css/admin.scss | 69 +++++++++---------- 3 files changed, 35 insertions(+), 38 deletions(-) diff --git a/plugins/woocommerce-admin/client/layout/store-alerts/style.scss b/plugins/woocommerce-admin/client/layout/store-alerts/style.scss index 3879ba7b35d..0736829438f 100644 --- a/plugins/woocommerce-admin/client/layout/store-alerts/style.scss +++ b/plugins/woocommerce-admin/client/layout/store-alerts/style.scss @@ -76,7 +76,7 @@ } .is-alert-update { - $alert-color: var(--wp-admin-theme-color); + $alert-color: var(--wp-admin-theme-color, #11a0d2); &::before { background-color: $alert-color; diff --git a/plugins/woocommerce/client/legacy/css/activation.scss b/plugins/woocommerce/client/legacy/css/activation.scss index 219d0b9698f..f579c2e1835 100644 --- a/plugins/woocommerce/client/legacy/css/activation.scss +++ b/plugins/woocommerce/client/legacy/css/activation.scss @@ -11,7 +11,7 @@ div.woocommerce-message { position: relative; &.updated { - border-left-color: var(--wp-admin-theme-color) !important; + border-left-color: var(--wp-admin-theme-color, #7F54B3) !important; } } diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss index 91bef1f8347..161ada1e958 100644 --- a/plugins/woocommerce/client/legacy/css/admin.scss +++ b/plugins/woocommerce/client/legacy/css/admin.scss @@ -202,7 +202,7 @@ $font-sf-pro-text: helveticaneue-light, "Helvetica Neue Light", } .update-plugins .update-count { - background-color: var(--wp-admin-theme-color); + background-color: var(--wp-admin-theme-color, #d54e21); border-radius: 10px; color: #fff; display: inline-block; @@ -477,7 +477,7 @@ $font-sf-pro-text: helveticaneue-light, "Helvetica Neue Light", .addon-product-group-see-more, .addon-product-group-see-more:visited { - color: var(--wp-admin-theme-color); + color: var(--wp-admin-theme-color, #007cba); /* Primary / Blue */ display: block; font-size: 13px; @@ -582,7 +582,7 @@ $font-sf-pro-text: helveticaneue-light, "Helvetica Neue Light", h2, h3 { - color: var(--wp-admin-theme-color); + color: var(--wp-admin-theme-color, #007cba); font-size: 20px; font-weight: 400; letter-spacing: -0.32px; @@ -620,7 +620,7 @@ $font-sf-pro-text: helveticaneue-light, "Helvetica Neue Light", } h2 { - color: var(--wp-admin-theme-color); + color: var(--wp-admin-theme-color, #2c3338); } } @@ -718,8 +718,8 @@ $font-sf-pro-text: helveticaneue-light, "Helvetica Neue Light", .button { background-color: #fff; - border-color: var(--wp-admin-theme-color); - color: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color, #007cba); + color: var(--wp-admin-theme-color, #007cba); float: right; font-size: 13px; height: 36px; @@ -857,7 +857,7 @@ $font-sf-pro-text: helveticaneue-light, "Helvetica Neue Light", max-width: 1200px; .update-plugins .update-count { - background-color: var(--wp-admin-theme-color); + background-color: var(--wp-admin-theme-color, #d54e21); border-radius: 10px; color: #fff; display: inline-block; @@ -912,7 +912,7 @@ $font-sf-pro-text: helveticaneue-light, "Helvetica Neue Light", overflow: hidden; &.updated { - border-left-color: var(--wp-admin-theme-color) !important; + border-left-color: var(--wp-admin-theme-color, #7F54B3) !important; } a.skip, @@ -2993,7 +2993,7 @@ ul.wc_coupon_list_block { } &:hover { - border: 2px solid var(--wp-admin-theme-color); + border: 2px solid var(--wp-admin-theme-color, #00a0d2); } } @@ -4051,7 +4051,6 @@ table.wc_shipping { .wc-backbone-modal-main article { padding: 0 32px 32px 32px; - } .wc-backbone-modal-main header{ @@ -4060,7 +4059,6 @@ table.wc_shipping { .wc-backbone-modal-main footer { padding: 20px 32px 12px 32px; - } .wc-backbone-modal-main .wc-backbone-modal-header h1 { @@ -4104,7 +4102,6 @@ table.wc_shipping { display: none; } } - } .wc-shipping-method-add-class-costs { @@ -4122,7 +4119,7 @@ table.wc_shipping { height: 1px; overflow: hidden; position: absolute; - white-space: nowrap; + white-space: nowrap; width: 1px; &:checked + label { @@ -4173,7 +4170,7 @@ table.wc_shipping { font-size: 24px; } } - + .wc-shipping-zone-method-fields { & > label { @@ -4194,7 +4191,7 @@ table.wc_shipping { margin-bottom: 24px; position: relative; - input, + input, select { margin: 6px 0; padding: 12px; @@ -4298,7 +4295,7 @@ table { .edit { margin: 5px 0; } - + .edit > input, .edit > select { width: 100%; @@ -4326,7 +4323,7 @@ table { } } -.wc-shipping-class-hide-sibling-view + .view { +.wc-shipping-class-hide-sibling-view + .view { display: none; } @@ -4338,7 +4335,7 @@ table { display: inline-block; margin: 0 12px; } -} +} .wc-shipping-zone-heading-help-text { max-width: 800px; @@ -4444,7 +4441,7 @@ table.wc-shipping-classes { p, li { - color: var(--wc-secondary-text); + color: var(--wc-secondary-text, #7F54B3); font-size: 1.2em; line-height: 1.2em; margin: 0 0 1.5em; @@ -4691,8 +4688,8 @@ table.wc-shipping-classes { .woocommerce-input-toggle { height: 16px; width: 32px; - border: 2px solid var(--wp-admin-theme-color); - background-color: var(--wp-admin-theme-color); + border: 2px solid var(--wp-admin-theme-color, #7F54B3); + background-color: var(--wp-admin-theme-color, #7F54B3); display: inline-block; text-indent: -9999px; border-radius: 10em; @@ -4808,7 +4805,7 @@ img.help_tip { .status-enabled::before { @include icon("\e015"); - color: var(--wp-admin-theme-color); + color: var(--wp-admin-theme-color, $woocommerce); } .status-disabled::before { @@ -4833,7 +4830,7 @@ img.help_tip { margin-left: 0.5em; a { - color: var(--wp-admin-theme-color); + color: var(--wp-admin-theme-color, $woocommerce); } } @@ -7981,21 +7978,21 @@ table.bar_chart { } li.active { - border-color: var(--wp-admin-theme-color); - color: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color, $woocommerce); + color: var(--wp-admin-theme-color, $woocommerce); &::before { - border-color: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color, $woocommerce); } } li.done { - border-color: var(--wp-admin-theme-color); - color: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color, $woocommerce); + color: var(--wp-admin-theme-color, $woocommerce); &::before { - border-color: var(--wp-admin-theme-color); - background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color, $woocommerce); + background: var(--wp-admin-theme-color, $woocommerce); } } } @@ -8161,21 +8158,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: var(--wp-admin-theme-color); + background: var(--wp-admin-theme-color, $woocommerce); 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: var(--wp-admin-theme-color); + background: var(--wp-admin-theme-color, $woocommerce); transition: width 1s ease; } progress::-ms-fill { border-radius: 3px; box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4); - background: var(--wp-admin-theme-color); + background: var(--wp-admin-theme-color, $woocommerce); transition: width 1s ease; } @@ -8268,7 +8265,7 @@ table.bar_chart { &::before { @include icon("\e015"); - color: var(--wp-admin-theme-color); + color: var(--wp-admin-theme-color, $woocommerce); position: static; font-size: 100px; display: block; @@ -8379,8 +8376,8 @@ table.bar_chart { margin: 12px 12px 0 0; &.current { - background: var(--wp-admin-theme-color); - border: 1px solid var(--wp-admin-theme-color); + background: var(--wp-admin-theme-color, #007cba); + border: 1px solid var(--wp-admin-theme-color, #007cba); a { color: #fff; From 69299e949928e5858b4e3f69894cbe06cd76489b Mon Sep 17 00:00:00 2001 From: github-actions Date: Thu, 30 Nov 2023 10:17:42 +0000 Subject: [PATCH 2/8] Add changefile(s) from automation for the following project(s): woocommerce --- .../41803-fix-41774-use-fallback-colors-css-variables | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 plugins/woocommerce/changelog/41803-fix-41774-use-fallback-colors-css-variables diff --git a/plugins/woocommerce/changelog/41803-fix-41774-use-fallback-colors-css-variables b/plugins/woocommerce/changelog/41803-fix-41774-use-fallback-colors-css-variables new file mode 100644 index 00000000000..c4d2d1b07ef --- /dev/null +++ b/plugins/woocommerce/changelog/41803-fix-41774-use-fallback-colors-css-variables @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Use fallback colors when CSS variables are not available in admin. \ No newline at end of file From 4abab55dd2f1a3b88f4ab7eff3fabae0e4a3b437 Mon Sep 17 00:00:00 2001 From: "Panos (Panagiotis) Synetos" <2484390+PanosSynetos@users.noreply.github.com> Date: Thu, 30 Nov 2023 13:06:30 +0200 Subject: [PATCH 3/8] Update changelog --- .../changelog/41803-fix-41774-use-fallback-colors-css-variables | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce/changelog/41803-fix-41774-use-fallback-colors-css-variables b/plugins/woocommerce/changelog/41803-fix-41774-use-fallback-colors-css-variables index c4d2d1b07ef..dfbf40805c3 100644 --- a/plugins/woocommerce/changelog/41803-fix-41774-use-fallback-colors-css-variables +++ b/plugins/woocommerce/changelog/41803-fix-41774-use-fallback-colors-css-variables @@ -1,4 +1,4 @@ Significance: patch Type: fix -Use fallback colors when CSS variables are not available in admin. \ No newline at end of file +Use fallback colors when CSS color variables are not available in admin. From eef1ac92728bd23f9a5ba3147ed440099cc5677e Mon Sep 17 00:00:00 2001 From: github-actions Date: Thu, 30 Nov 2023 11:08:10 +0000 Subject: [PATCH 4/8] Add changefile(s) from automation for the following project(s): woocommerce --- .../changelog/41803-fix-41774-use-fallback-colors-css-variables | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce/changelog/41803-fix-41774-use-fallback-colors-css-variables b/plugins/woocommerce/changelog/41803-fix-41774-use-fallback-colors-css-variables index dfbf40805c3..c4d2d1b07ef 100644 --- a/plugins/woocommerce/changelog/41803-fix-41774-use-fallback-colors-css-variables +++ b/plugins/woocommerce/changelog/41803-fix-41774-use-fallback-colors-css-variables @@ -1,4 +1,4 @@ Significance: patch Type: fix -Use fallback colors when CSS color variables are not available in admin. +Use fallback colors when CSS variables are not available in admin. \ No newline at end of file From 62aaa746e87dd5daa16b7f22c276bbd720986d8f Mon Sep 17 00:00:00 2001 From: "Panos (Panagiotis) Synetos" <2484390+PanosSynetos@users.noreply.github.com> Date: Thu, 30 Nov 2023 13:10:47 +0200 Subject: [PATCH 5/8] Wake up github actions --- plugins/woocommerce/client/legacy/css/admin.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss index 161ada1e958..c5ed3940ca7 100644 --- a/plugins/woocommerce/client/legacy/css/admin.scss +++ b/plugins/woocommerce/client/legacy/css/admin.scss @@ -8473,3 +8473,4 @@ table.bar_chart { width: calc(100% - 24px); } } + From e06c442aff21f46cc412d95f4b451adb82fbda19 Mon Sep 17 00:00:00 2001 From: "Panos (Panagiotis) Synetos" <2484390+PanosSynetos@users.noreply.github.com> Date: Thu, 30 Nov 2023 13:13:17 +0200 Subject: [PATCH 6/8] Revert commit --- plugins/woocommerce/client/legacy/css/admin.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss index c5ed3940ca7..161ada1e958 100644 --- a/plugins/woocommerce/client/legacy/css/admin.scss +++ b/plugins/woocommerce/client/legacy/css/admin.scss @@ -8473,4 +8473,3 @@ table.bar_chart { width: calc(100% - 24px); } } - From a9ae5a72f1ea8b00cdda5426cd56471bc82ee6ab Mon Sep 17 00:00:00 2001 From: Jason Kytros Date: Thu, 30 Nov 2023 16:54:14 +0200 Subject: [PATCH 7/8] Use `$woocommerce` variable instead of a hardcoded color --- plugins/woocommerce/client/legacy/css/activation.scss | 2 +- plugins/woocommerce/client/legacy/css/admin.scss | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/plugins/woocommerce/client/legacy/css/activation.scss b/plugins/woocommerce/client/legacy/css/activation.scss index f579c2e1835..fca85efd725 100644 --- a/plugins/woocommerce/client/legacy/css/activation.scss +++ b/plugins/woocommerce/client/legacy/css/activation.scss @@ -11,7 +11,7 @@ div.woocommerce-message { position: relative; &.updated { - border-left-color: var(--wp-admin-theme-color, #7F54B3) !important; + border-left-color: var(--wp-admin-theme-color, $woocommerce) !important; } } diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss index 59b10551fd5..c03168ddcec 100644 --- a/plugins/woocommerce/client/legacy/css/admin.scss +++ b/plugins/woocommerce/client/legacy/css/admin.scss @@ -912,7 +912,7 @@ $font-sf-pro-text: helveticaneue-light, "Helvetica Neue Light", overflow: hidden; &.updated { - border-left-color: var(--wp-admin-theme-color, #7F54B3) !important; + border-left-color: var(--wp-admin-theme-color, $woocommerce) !important; } a.skip, @@ -4505,7 +4505,7 @@ table.wc-shipping-classes { p, li { - color: var(--wc-secondary-text, #7F54B3); + color: var(--wc-secondary-text, $woocommerce); font-size: 1.2em; line-height: 1.2em; margin: 0 0 1.5em; @@ -4752,8 +4752,8 @@ table.wc-shipping-classes { .woocommerce-input-toggle { height: 16px; width: 32px; - border: 2px solid var(--wp-admin-theme-color, #7F54B3); - background-color: var(--wp-admin-theme-color, #7F54B3); + border: 2px solid var(--wp-admin-theme-color, $woocommerce); + background-color: var(--wp-admin-theme-color, $woocommerce); display: inline-block; text-indent: -9999px; border-radius: 10em; From 2ab2862185a3a6608835f9c171937bc39a5565d3 Mon Sep 17 00:00:00 2001 From: "Panos (Panagiotis) Synetos" <2484390+PanosSynetos@users.noreply.github.com> Date: Mon, 4 Dec 2023 08:50:58 +0200 Subject: [PATCH 8/8] activation.css does not have access to $woocommerce variable --- plugins/woocommerce/client/legacy/css/activation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce/client/legacy/css/activation.scss b/plugins/woocommerce/client/legacy/css/activation.scss index fca85efd725..f579c2e1835 100644 --- a/plugins/woocommerce/client/legacy/css/activation.scss +++ b/plugins/woocommerce/client/legacy/css/activation.scss @@ -11,7 +11,7 @@ div.woocommerce-message { position: relative; &.updated { - border-left-color: var(--wp-admin-theme-color, $woocommerce) !important; + border-left-color: var(--wp-admin-theme-color, #7F54B3) !important; } }