From f7ae18844614989cf239057c02692b10e174d72b Mon Sep 17 00:00:00 2001 From: Dean Towheed Date: Fri, 10 Nov 2023 11:50:45 -0500 Subject: [PATCH] Update color picker hover colors - RSC-1547 --- ...looks-right-when-hovered-and-focused-1.png | 4 +- ...ght-when-hovered-and-shows-a-tooltip-1.png | 4 +- ...looks-right-when-hovered-and-focused-1.png | 4 +- ...ght-when-hovered-and-shows-a-tooltip-1.png | 4 +- ...-right-when-hovered-and-focused-1-dark.png | 4 +- ...hen-hovered-and-shows-a-tooltip-1-dark.png | 4 +- ...-right-when-hovered-and-focused-1-dark.png | 4 +- ...hen-hovered-and-shows-a-tooltip-1-dark.png | 4 +- .../NxColorPicker/NxColorPicker.scss | 2 + .../_nx-color-picker-variables.scss | 46 +++++++++++++++++++ 10 files changed, 64 insertions(+), 16 deletions(-) create mode 100644 lib/src/scss-shared/_nx-color-picker-variables.scss diff --git a/gallery/visualtests/__image_snapshots__/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-focused-1.png b/gallery/visualtests/__image_snapshots__/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-focused-1.png index a8bbb5d1ee..faac142789 100644 --- a/gallery/visualtests/__image_snapshots__/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-focused-1.png +++ b/gallery/visualtests/__image_snapshots__/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-focused-1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4eaf24b2182978346a29375bce457f5757d7249a0b913738ae1c5bbd0276f8b2 -size 8852 +oid sha256:c3a99a2b0164b07373df85703cb66450ff6a212ef42fa7349aa7abfa96679e1f +size 8845 diff --git a/gallery/visualtests/__image_snapshots__/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-shows-a-tooltip-1.png b/gallery/visualtests/__image_snapshots__/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-shows-a-tooltip-1.png index 4197de94fe..3a80b31f49 100644 --- a/gallery/visualtests/__image_snapshots__/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-shows-a-tooltip-1.png +++ b/gallery/visualtests/__image_snapshots__/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-shows-a-tooltip-1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4fd6744f83f84bb6979456325e3c812f56c5c668d920ba51998e4b81be6d4734 -size 7739 +oid sha256:50e21366144b11a8c9daf0851412b3a0b2bec2854267768272d5200e7f81d1f5 +size 7730 diff --git a/gallery/visualtests/__image_snapshots__/nx-color-picker-js-nx-color-picker-when-a-color-is-selected-looks-right-when-hovered-and-focused-1.png b/gallery/visualtests/__image_snapshots__/nx-color-picker-js-nx-color-picker-when-a-color-is-selected-looks-right-when-hovered-and-focused-1.png index 1cac7f12d5..643595dc46 100644 --- a/gallery/visualtests/__image_snapshots__/nx-color-picker-js-nx-color-picker-when-a-color-is-selected-looks-right-when-hovered-and-focused-1.png +++ b/gallery/visualtests/__image_snapshots__/nx-color-picker-js-nx-color-picker-when-a-color-is-selected-looks-right-when-hovered-and-focused-1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d32e22a41d876e8cbf18104b4785c6285982cdc0f15b8bfb2d7f417380499b37 -size 8832 +oid sha256:0614128adb310e87b8fdf64ddaecdd06e8249ea4d843f57fecd556f7b1d2368b +size 8826 diff --git a/gallery/visualtests/__image_snapshots__/nx-color-picker-js-nx-color-picker-when-a-color-is-selected-looks-right-when-hovered-and-shows-a-tooltip-1.png b/gallery/visualtests/__image_snapshots__/nx-color-picker-js-nx-color-picker-when-a-color-is-selected-looks-right-when-hovered-and-shows-a-tooltip-1.png index cf44e80575..9c560fc547 100644 --- a/gallery/visualtests/__image_snapshots__/nx-color-picker-js-nx-color-picker-when-a-color-is-selected-looks-right-when-hovered-and-shows-a-tooltip-1.png +++ b/gallery/visualtests/__image_snapshots__/nx-color-picker-js-nx-color-picker-when-a-color-is-selected-looks-right-when-hovered-and-shows-a-tooltip-1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f6d73b091ae143ce1968e452cdaa26b0aaab3b4ea4940351f6aa075054a91222 -size 8191 +oid sha256:c440677071baab3aff2bb530a1c7fad6e4424f5e63868f49b7ab2a8749404096 +size 8155 diff --git a/gallery/visualtests/__image_snapshots_dark__/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-focused-1-dark.png b/gallery/visualtests/__image_snapshots_dark__/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-focused-1-dark.png index 7617365824..6e04c3a14a 100644 --- a/gallery/visualtests/__image_snapshots_dark__/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-focused-1-dark.png +++ b/gallery/visualtests/__image_snapshots_dark__/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-focused-1-dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5d6a35cb6d196d152db29f09698db2cfeba4a863d4e534352e36c4e0f4916f9c -size 10100 +oid sha256:13b65d1b6560c63cb7801ce6430592990f9ce96352f9834430a323a76c01d944 +size 10053 diff --git a/gallery/visualtests/__image_snapshots_dark__/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-shows-a-tooltip-1-dark.png b/gallery/visualtests/__image_snapshots_dark__/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-shows-a-tooltip-1-dark.png index 11440f4335..0dc9604859 100644 --- a/gallery/visualtests/__image_snapshots_dark__/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-shows-a-tooltip-1-dark.png +++ b/gallery/visualtests/__image_snapshots_dark__/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-shows-a-tooltip-1-dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8a95f4992114de8629c7d5d60889ee4d8c414d20e7cdacc6998986dd164f7dfc -size 8384 +oid sha256:a38b4a62ab2974fc9197d993ab21e8d57211605c930ef82cb03f87916f779e38 +size 8854 diff --git a/gallery/visualtests/__image_snapshots_dark__/nx-color-picker-js-nx-color-picker-when-a-color-is-selected-looks-right-when-hovered-and-focused-1-dark.png b/gallery/visualtests/__image_snapshots_dark__/nx-color-picker-js-nx-color-picker-when-a-color-is-selected-looks-right-when-hovered-and-focused-1-dark.png index 11e08b2903..e6d14c79cd 100644 --- a/gallery/visualtests/__image_snapshots_dark__/nx-color-picker-js-nx-color-picker-when-a-color-is-selected-looks-right-when-hovered-and-focused-1-dark.png +++ b/gallery/visualtests/__image_snapshots_dark__/nx-color-picker-js-nx-color-picker-when-a-color-is-selected-looks-right-when-hovered-and-focused-1-dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2c306e911b5097d68d084899467d938c2ad9e3742f2124e1783b49a919f42d45 -size 9958 +oid sha256:d5787dcc76dbfb1f29d5ec0a0c24731e651a14d834f10026078e47a4306f2d3d +size 9994 diff --git a/gallery/visualtests/__image_snapshots_dark__/nx-color-picker-js-nx-color-picker-when-a-color-is-selected-looks-right-when-hovered-and-shows-a-tooltip-1-dark.png b/gallery/visualtests/__image_snapshots_dark__/nx-color-picker-js-nx-color-picker-when-a-color-is-selected-looks-right-when-hovered-and-shows-a-tooltip-1-dark.png index 92ca8af9da..d0b7b2585f 100644 --- a/gallery/visualtests/__image_snapshots_dark__/nx-color-picker-js-nx-color-picker-when-a-color-is-selected-looks-right-when-hovered-and-shows-a-tooltip-1-dark.png +++ b/gallery/visualtests/__image_snapshots_dark__/nx-color-picker-js-nx-color-picker-when-a-color-is-selected-looks-right-when-hovered-and-shows-a-tooltip-1-dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a55354a1c7375e328e0e0765fc566788051a1f99a6eb39ae929c35d99ccb8faf -size 8709 +oid sha256:2a76a7cf191e4a6a93d548ff8efe284183bf497776c89cd983bcfe26a51c52b4 +size 9345 diff --git a/lib/src/components/NxColorPicker/NxColorPicker.scss b/lib/src/components/NxColorPicker/NxColorPicker.scss index 60240744cc..86501a23b8 100644 --- a/lib/src/components/NxColorPicker/NxColorPicker.scss +++ b/lib/src/components/NxColorPicker/NxColorPicker.scss @@ -6,6 +6,7 @@ */ @use 'sass:math'; @use "../../scss-shared/nx-container-helpers"; +@use '../../scss-shared/nx-color-picker-variables'; .nx-color-picker { @include nx-container-helpers.container-horizontal; @@ -28,6 +29,7 @@ &:hover { .nx-color-picker__color { stroke: var(--nx-color-text-stark); + fill: var(--nx-color-picker-hover-background); } } diff --git a/lib/src/scss-shared/_nx-color-picker-variables.scss b/lib/src/scss-shared/_nx-color-picker-variables.scss new file mode 100644 index 0000000000..fbb817a079 --- /dev/null +++ b/lib/src/scss-shared/_nx-color-picker-variables.scss @@ -0,0 +1,46 @@ +/* + * Copyright (c) 2019-present Sonatype, Inc. + * This program and the accompanying materials are made available under + * the terms of the Eclipse Public License 2.0 which accompanies this + * distribution and is available at https://www.eclipse.org/legal/epl-2.0/. + */ + +.nx-selectable-color--purple { + --nx-color-picker-hover-background: var(--nx-swatch-purple-70); +} + +.nx-selectable-color--pink { + --nx-color-picker-hover-background: var(--nx-swatch-pink-70); +} + +.nx-selectable-color--blue { + --nx-color-picker-hover-background: var(--nx-swatch-teal-40); +} + +.nx-selectable-color--red { + --nx-color-picker-hover-background: var(--nx-swatch-red-70); +} + +.nx-selectable-color--turquoise { + --nx-color-picker-hover-background: var(--nx-swatch-turquoise-30); +} + +.nx-selectable-color--orange { + --nx-color-picker-hover-background: var(--nx-swatch-orange-50); +} + +.nx-selectable-color--yellow { + --nx-color-picker-hover-background: var(--nx-swatch-yellow-55); +} + +.nx-selectable-color--kiwi { + --nx-color-picker-hover-background: var(--nx-swatch-green-30); +} + +.nx-selectable-color--sky { + --nx-color-picker-hover-background: var(--nx-swatch-blue-70); +} + +.nx-selectable-color--indigo { + --nx-color-picker-hover-background: var(--nx-swatch-indigo-60); +}