From c72befaa578c268f45583ca542da70fae11f4ef6 Mon Sep 17 00:00:00 2001 From: Lucian Stoian Date: Tue, 17 Mar 2026 12:07:59 +0200 Subject: [PATCH 1/3] [SITES-25253] Focus indicator for the Swatch button in Annotation modal is hard to detect --- .../src/styles/index.styl | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/coral-component-colorinput/src/styles/index.styl b/coral-component-colorinput/src/styles/index.styl index c46b67e0dc..944b9b2ba7 100644 --- a/coral-component-colorinput/src/styles/index.styl +++ b/coral-component-colorinput/src/styles/index.styl @@ -261,25 +261,18 @@ coral-colorinput-item { } } -._coral-ColorInput-preview { +._coral-ColorInput-preview.focus-ring { border-radius: $colorinput-button-border-radius; box-sizing: border-box; background-origin: border-box; &:before { - display: block; + content: ''; position: absolute; - left: 0; - top: 0; - z-index: -1; - content: ""; - width: 100%; - height: 100%; - - background-image: svgImport($colorinput-transparency-url); - background-repeat: no-repeat; - background-position: center; - background-size: 100%; + inset: 0; + box-shadow: 0 0 0 var(--spectrum-medium-global-dimension-size-40) var(--spectrum-light-alias-border-color-focus); + border-radius: $colorinput-button-border-radius; + margin: -var(--spectrum-medium-global-dimension-size-50); } } From 992eb83584084bf265ef2c7929440a7812b2c138 Mon Sep 17 00:00:00 2001 From: Lucian Stoian Date: Tue, 17 Mar 2026 12:12:17 +0200 Subject: [PATCH 2/3] [SITES-25253] Focus indicator for the Swatch button in Annotation modal is hard to detect --- coral-component-colorinput/src/styles/index.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/coral-component-colorinput/src/styles/index.styl b/coral-component-colorinput/src/styles/index.styl index 944b9b2ba7..0513bd6d4d 100644 --- a/coral-component-colorinput/src/styles/index.styl +++ b/coral-component-colorinput/src/styles/index.styl @@ -273,7 +273,7 @@ coral-colorinput-item { box-shadow: 0 0 0 var(--spectrum-medium-global-dimension-size-40) var(--spectrum-light-alias-border-color-focus); border-radius: $colorinput-button-border-radius; margin: -var(--spectrum-medium-global-dimension-size-50); - } + } ._coral-ColorInput--novalue ._coral-ColorInput-preview, From 6ce761ecb92bc34cccddd922b6c3e4aa5b6f8957 Mon Sep 17 00:00:00 2001 From: Lucian Stoian Date: Tue, 17 Mar 2026 12:12:37 +0200 Subject: [PATCH 3/3] fix: [SITES-25253] Focus indicator for the Swatch button in Annotation modal is hard to detect --- coral-component-colorinput/src/styles/index.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/coral-component-colorinput/src/styles/index.styl b/coral-component-colorinput/src/styles/index.styl index 0513bd6d4d..944b9b2ba7 100644 --- a/coral-component-colorinput/src/styles/index.styl +++ b/coral-component-colorinput/src/styles/index.styl @@ -273,7 +273,7 @@ coral-colorinput-item { box-shadow: 0 0 0 var(--spectrum-medium-global-dimension-size-40) var(--spectrum-light-alias-border-color-focus); border-radius: $colorinput-button-border-radius; margin: -var(--spectrum-medium-global-dimension-size-50); - + } } ._coral-ColorInput--novalue ._coral-ColorInput-preview,