Commit b3fcdec4ef7 for woocommerce
commit b3fcdec4ef74c1b974ad336d0e814fa820d862ad
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Tue May 26 10:20:37 2026 +0200
Updates to color swatch styles (#65260)
* Apply Chips border colors to color swatches
* Make color swatches in the admin a circle
* Add changelog
* Decrease specificity
* Reorder code
* Fix no-color line overflowing the circle
* Reduce specificity
* Hide unnecessary color attributes in Chips block when used in a color attribute
diff --git a/plugins/woocommerce/changelog/update-swatches-styles b/plugins/woocommerce/changelog/update-swatches-styles
new file mode 100644
index 00000000000..d03a60db39e
--- /dev/null
+++ b/plugins/woocommerce/changelog/update-swatches-styles
@@ -0,0 +1,5 @@
+Significance: patch
+Type: update
+Comment: Updates to color swatches styles
+
+
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/edit.tsx
index d277d8ba6a5..54496e8e607 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/edit.tsx
@@ -163,25 +163,33 @@ const Edit = ( props: EditProps ): JSX.Element => {
<ColorGradientSettingsDropdown
__experimentalIsRenderedInSidebar
settings={ [
- {
- label: __(
- 'Unselected Chip Text',
- 'woocommerce'
- ),
- colorValue: chipText.color || customChipText,
- onColorChange: ( colorValue: string ) => {
- setChipText( colorValue );
- setAttributes( {
- customChipText: colorValue,
- } );
- },
- resetAllFilter: () => {
- setChipText( '' );
- setAttributes( {
- customChipText: '',
- } );
- },
- },
+ ...( ! hasColorSwatches
+ ? [
+ {
+ label: __(
+ 'Unselected Chip Text',
+ 'woocommerce'
+ ),
+ colorValue:
+ chipText.color ||
+ customChipText,
+ onColorChange: (
+ colorValue: string
+ ) => {
+ setChipText( colorValue );
+ setAttributes( {
+ customChipText: colorValue,
+ } );
+ },
+ resetAllFilter: () => {
+ setChipText( '' );
+ setAttributes( {
+ customChipText: '',
+ } );
+ },
+ },
+ ]
+ : [] ),
{
label: __(
'Unselected Chip Border',
@@ -202,48 +210,60 @@ const Edit = ( props: EditProps ): JSX.Element => {
} );
},
},
- {
- label: __(
- 'Unselected Chip Background',
- 'woocommerce'
- ),
- colorValue:
- chipBackground.color ||
- customChipBackground,
- onColorChange: ( colorValue: string ) => {
- setChipBackground( colorValue );
- setAttributes( {
- customChipBackground: colorValue,
- } );
- },
- resetAllFilter: () => {
- setChipBackground( '' );
- setAttributes( {
- customChipBackground: '',
- } );
- },
- },
- {
- label: __(
- 'Selected Chip Text',
- 'woocommerce'
- ),
- colorValue:
- selectedChipText.color ||
- customSelectedChipText,
- onColorChange: ( colorValue: string ) => {
- setSelectedChipText( colorValue );
- setAttributes( {
- customSelectedChipText: colorValue,
- } );
- },
- resetAllFilter: () => {
- setSelectedChipText( '' );
- setAttributes( {
- customSelectedChipText: '',
- } );
- },
- },
+ ...( ! hasColorSwatches
+ ? [
+ {
+ label: __(
+ 'Unselected Chip Background',
+ 'woocommerce'
+ ),
+ colorValue:
+ chipBackground.color ||
+ customChipBackground,
+ onColorChange: (
+ colorValue: string
+ ) => {
+ setChipBackground( colorValue );
+ setAttributes( {
+ customChipBackground:
+ colorValue,
+ } );
+ },
+ resetAllFilter: () => {
+ setChipBackground( '' );
+ setAttributes( {
+ customChipBackground: '',
+ } );
+ },
+ },
+ {
+ label: __(
+ 'Selected Chip Text',
+ 'woocommerce'
+ ),
+ colorValue:
+ selectedChipText.color ||
+ customSelectedChipText,
+ onColorChange: (
+ colorValue: string
+ ) => {
+ setSelectedChipText(
+ colorValue
+ );
+ setAttributes( {
+ customSelectedChipText:
+ colorValue,
+ } );
+ },
+ resetAllFilter: () => {
+ setSelectedChipText( '' );
+ setAttributes( {
+ customSelectedChipText: '',
+ } );
+ },
+ },
+ ]
+ : [] ),
{
label: __(
'Selected Chip Border',
@@ -265,28 +285,37 @@ const Edit = ( props: EditProps ): JSX.Element => {
} );
},
},
- {
- label: __(
- 'Selected Chip Background',
- 'woocommerce'
- ),
- colorValue:
- selectedChipBackground.color ||
- customSelectedChipBackground,
- onColorChange: ( colorValue: string ) => {
- setSelectedChipBackground( colorValue );
- setAttributes( {
- customSelectedChipBackground:
- colorValue,
- } );
- },
- resetAllFilter: () => {
- setSelectedChipBackground( '' );
- setAttributes( {
- customSelectedChipBackground: '',
- } );
- },
- },
+ ...( ! hasColorSwatches
+ ? [
+ {
+ label: __(
+ 'Selected Chip Background',
+ 'woocommerce'
+ ),
+ colorValue:
+ selectedChipBackground.color ||
+ customSelectedChipBackground,
+ onColorChange: (
+ colorValue: string
+ ) => {
+ setSelectedChipBackground(
+ colorValue
+ );
+ setAttributes( {
+ customSelectedChipBackground:
+ colorValue,
+ } );
+ },
+ resetAllFilter: () => {
+ setSelectedChipBackground( '' );
+ setAttributes( {
+ customSelectedChipBackground:
+ '',
+ } );
+ },
+ },
+ ]
+ : [] ),
] }
panelId={ clientId }
{ ...colorGradientSettings }
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/style.scss
index dec85799c21..27b9aa22f04 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/style.scss
@@ -76,19 +76,6 @@
vertical-align: bottom;
}
-.wc-block-product-filter-chips__swatch {
- display: inline-block;
- width: 1.25em;
- height: 1.25em;
- border-radius: 50%;
- border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
- flex-shrink: 0;
-
- &--no-color {
- display: none;
- }
-}
-
.wc-block-product-filter-chips__text {
display: contents;
}
@@ -150,19 +137,33 @@
justify-content: center;
}
- .wc-block-product-filter-chips__swatch {
- &--no-color {
- display: inline-block;
- background: linear-gradient(
- to top left,
- transparent calc(50% - 0.5px),
- color-mix(in srgb, currentColor 20%, transparent)
- calc(50% - 0.5px),
- color-mix(in srgb, currentColor 20%, transparent)
- calc(50% + 0.5px),
- transparent calc(50% + 0.5px)
- );
- }
+ :where(.wc-block-product-filter-chips__swatch) {
+ display: inline-block;
+ width: 1.25em;
+ height: 1.25em;
+ border-radius: 50%;
+ border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+ flex-shrink: 0;
+ }
+
+ :where(.wc-block-product-filter-chips__swatch--no-color) {
+ display: inline-block;
+ background: linear-gradient(
+ to top left,
+ transparent calc(50% - 0.5px),
+ color-mix(in srgb, currentColor 20%, transparent)
+ calc(50% - 0.5px),
+ color-mix(in srgb, currentColor 20%, transparent)
+ calc(50% + 0.5px),
+ transparent calc(50% + 0.5px)
+ );
+ }
+
+ &.has-chip-border-color :where(.wc-block-product-filter-chips__item:not([aria-checked="true"]) .wc-block-product-filter-chips__swatch) {
+ border-color: var(--wc-product-filter-chips-border);
+ }
+ &.has-selected-chip-border-color :where(.wc-block-product-filter-chips__item[aria-checked="true"] .wc-block-product-filter-chips__swatch) {
+ border-color: transparent;
}
.wc-block-product-filter-chips__text,
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 90fcffa7520..690d3297ff3 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -9685,7 +9685,7 @@ body.woocommerce-settings-payments-section_legacy {
display: inline-block;
vertical-align: middle;
border: 1px solid #7e8993;
- border-radius: 2px;
+ border-radius: 50%;
margin-right: 0.5em;
height: 1em;
width: 1em;
@@ -9694,6 +9694,7 @@ body.woocommerce-settings-payments-section_legacy {
&.is-empty::before {
content: '';
+ border-radius: 50%;
position: absolute;
top: 0;
right: 0;