diff --git a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts index 67739ca78ae..71790ea00c2 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts +++ b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts @@ -2511,18 +2511,6 @@ describe("calcite-color-picker", () => { targetProp: "--calcite-color-picker-hex-input-background-color", }, ], - "--calcite-color-picker-input-background-color-hover": [ - { - shadowSelector: `.${CSS.channel}`, - targetProp: "--calcite-input-background-color", - state: "hover", - }, - { - shadowSelector: `.${CSS.hexInput}`, - targetProp: "--calcite-color-picker-hex-input-background-color", - state: "hover", - }, - ], "--calcite-color-picker-input-border-color": [ { shadowSelector: `.${CSS.channel}`, @@ -2589,18 +2577,10 @@ describe("calcite-color-picker", () => { shadowSelector: `.${CSS.colorModes}`, targetProp: "--calcite-tab-nav-indicator-color", }, - "--calcite-color-picker-tab-title-background-color": { - shadowSelector: `.${CSS.colorMode}`, - targetProp: "--calcite-tab-title-background-color", - }, "--calcite-color-picker-tab-title-text-color": { shadowSelector: `.${CSS.colorMode}`, targetProp: "--calcite-tab-title-text-color", }, - "--calcite-color-picker-tabs-background-color": { - shadowSelector: `.${CSS.colorModeContainer}`, - targetProp: "--calcite-tabs-background-color", - }, "--calcite-color-picker-tabs-border-color": { shadowSelector: `.${CSS.colorModeContainer}`, targetProp: "--calcite-tabs-border-color", diff --git a/packages/calcite-components/src/components/color-picker/color-picker.scss b/packages/calcite-components/src/components/color-picker/color-picker.scss index e73805a43a7..01376930c19 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.scss +++ b/packages/calcite-components/src/components/color-picker/color-picker.scss @@ -16,7 +16,6 @@ * @prop --calcite-color-picker-button-text-color-hover: defines the text color of the button when in a hover state in the component. * @prop --calcite-color-picker-button-text-color: defines the text color of the button in the component. * @prop --calcite-color-picker-input-background-color: defines the background color of the input in the component. - * @prop --calcite-color-picker-input-background-color-hover: defines the background color of the input when in a hover state in the component. * @prop --calcite-color-picker-input-border-color: defines the border color of the input in the component. * @prop --calcite-color-picker-input-corner-radius: defines the corner radius of the input in the component. * @prop --calcite-color-picker-input-prefix-background-color: defines the background color of the prefix sub-component. @@ -25,9 +24,7 @@ * @prop --calcite-color-picker-input-suffix-text-color: defines the text color of the suffix sub-component. * @prop --calcite-color-picker-input-text-color: defines the text color of the input in the component. * @prop --calcite-color-picker-tab-nav-indicator-color: Specifies the color of the active tab indicator. - * @prop --calcite-color-picker-tab-title-background-color: Specifies the background color of the sub-component. * @prop --calcite-color-picker-tab-title-text-color: Specifies the text color of the sub-component. - * @prop --calcite-color-picker-tabs-background-color: The background color of the sub-component. * @prop --calcite-color-picker-tabs-border-color: The border color of the sub-component. * @prop --calcite-color-picker-text-color: Specifies the background color of the component. */ @@ -234,7 +231,7 @@ calcite-button { --calcite-button-corner-radius: var(--calcite-color-picker-button-corner-radius); --calcite-button-text-color: var(--calcite-color-picker-button-text-color); --calcite-button-background-color: var(--calcite-color-picker-button-background-color); - --calcite-button-icon-color: var(--calcite-color-picker-button-icon-color-hover); + --calcite-button-icon-color: var(--calcite-color-picker-button-icon-color); &:hover { --calcite-button-text-color: var(--calcite-color-picker-button-text-color-hover); diff --git a/packages/calcite-components/src/components/input/common/_mixins.scss b/packages/calcite-components/src/components/input/common/_mixins.scss index 9e7ffb92840..35d12297896 100644 --- a/packages/calcite-components/src/components/input/common/_mixins.scss +++ b/packages/calcite-components/src/components/input/common/_mixins.scss @@ -163,7 +163,7 @@ } .suffix { @apply order-5; - color: var(--calcite-input-prefix-text-color, var(--calcite-color-text-2)); + color: var(--calcite-input-suffix-text-color, var(--calcite-color-text-2)); background-color: var(--calcite-input-suffix-background-color, var(--calcite-color-background)); border-inline-start-width: var(--calcite-border-width-none); }