sonatype · Deniro5 · Nov 10, 2023 · rpokorny · Nov 10, 2023
diff --git a/..._/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-focused-1.png b/..._/nx-color-picker-js-nx-color-picker-looks-right-when-hovered-and-focused-1.png
diff --git a/...or-picker-js-nx-color-picker-looks-right-when-hovered-and-shows-a-tooltip-1.png b/...or-picker-js-nx-color-picker-looks-right-when-hovered-and-shows-a-tooltip-1.png
diff --git a/...olor-picker-when-a-color-is-selected-looks-right-when-hovered-and-focused-1.png b/...olor-picker-when-a-color-is-selected-looks-right-when-hovered-and-focused-1.png
diff --git a/...ker-when-a-color-is-selected-looks-right-when-hovered-and-shows-a-tooltip-1.png b/...ker-when-a-color-is-selected-looks-right-when-hovered-and-shows-a-tooltip-1.png
diff --git a/...color-picker-js-nx-color-picker-looks-right-when-hovered-and-focused-1-dark.png b/...color-picker-js-nx-color-picker-looks-right-when-hovered-and-focused-1-dark.png
diff --git a/...cker-js-nx-color-picker-looks-right-when-hovered-and-shows-a-tooltip-1-dark.png b/...cker-js-nx-color-picker-looks-right-when-hovered-and-shows-a-tooltip-1-dark.png
diff --git a/...picker-when-a-color-is-selected-looks-right-when-hovered-and-focused-1-dark.png b/...picker-when-a-color-is-selected-looks-right-when-hovered-and-focused-1-dark.png
diff --git a/...hen-a-color-is-selected-looks-right-when-hovered-and-shows-a-tooltip-1-dark.png b/...hen-a-color-is-selected-looks-right-when-hovered-and-shows-a-tooltip-1-dark.png
diff --git 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
@@ -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);
+}