From 503730ec36fda164f6f7680353d916a5f1c751f4 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Sat, 15 Jun 2024 00:36:44 -0700 Subject: [PATCH 1/3] test(color-picker): add component token E2E tests --- .../color-picker-hex-input.e2e.ts | 79 ++++- .../color-picker/color-picker.e2e.ts | 282 +++++++++++++++++- .../components/color-picker/color-picker.scss | 8 +- .../components/color-picker/color-picker.tsx | 12 +- .../src/components/color-picker/resources.ts | 2 + 5 files changed, 374 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts index 2466e3e2538..33436043daa 100644 --- a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts +++ b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts @@ -1,7 +1,8 @@ import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, focusable, hidden, reflects, renders } from "../../tests/commonTests"; +import { accessible, defaults, focusable, hidden, reflects, renders, themed } from "../../tests/commonTests"; import { selectText } from "../../tests/utils"; import { canConvertToHexa, isValidHex, normalizeHex } from "../color-picker/utils"; +import { html } from "../../../support/formatting"; import { CSS } from "./resources"; describe("calcite-color-picker-hex-input", () => { @@ -572,4 +573,80 @@ describe("calcite-color-picker-hex-input", () => { }); }); }); + + describe("theme", () => { + describe("default", () => { + themed("calcite-color-picker-hex-input", { + "--calcite-color-picker-hex-input-background-color": { + targetProp: "--calcite-input-background-color", + shadowSelector: `.${CSS.hexInput}`, + }, + "--calcite-color-picker-hex-input-border-color": { + targetProp: "--calcite-input-border-color", + shadowSelector: `.${CSS.hexInput}`, + }, + "--calcite-color-picker-hex-input-corner-radius": { + targetProp: "--calcite-input-corner-radius", + shadowSelector: `.${CSS.hexInput}`, + }, + "--calcite-color-picker-hex-input-prefix-background-color": { + targetProp: "--calcite-input-prefix-background-color", + shadowSelector: `.${CSS.hexInput}`, + }, + "--calcite-color-picker-hex-input-prefix-text-color": { + targetProp: "--calcite-input-prefix-text-color", + shadowSelector: `.${CSS.hexInput}`, + }, + "--calcite-color-picker-hex-input-suffix-background-color": { + targetProp: "--calcite-input-suffix-background-color", + shadowSelector: `.${CSS.hexInput}`, + }, + "--calcite-color-picker-hex-input-suffix-text-color": { + targetProp: "--calcite-input-suffix-text-color", + shadowSelector: `.${CSS.hexInput}`, + }, + "--calcite-color-picker-hex-input-text-color": { + targetProp: "--calcite-input-text-color", + shadowSelector: `.${CSS.hexInput}`, + }, + }); + }); + + describe("opacity enabled", () => { + themed(html``, { + "--calcite-color-picker-hex-input-background-color": { + targetProp: "--calcite-input-background-color", + shadowSelector: `.${CSS.opacityInput}`, + }, + "--calcite-color-picker-hex-input-border-color": { + targetProp: "--calcite-input-border-color", + shadowSelector: `.${CSS.opacityInput}`, + }, + "--calcite-color-picker-hex-input-corner-radius": { + targetProp: "--calcite-input-corner-radius", + shadowSelector: `.${CSS.opacityInput}`, + }, + "--calcite-color-picker-hex-input-prefix-background-color": { + targetProp: "--calcite-input-prefix-background-color", + shadowSelector: `.${CSS.opacityInput}`, + }, + "--calcite-color-picker-hex-input-prefix-text-color": { + targetProp: "--calcite-input-prefix-text-color", + shadowSelector: `.${CSS.opacityInput}`, + }, + "--calcite-color-picker-hex-input-suffix-background-color": { + targetProp: "--calcite-input-suffix-background-color", + shadowSelector: `.${CSS.opacityInput}`, + }, + "--calcite-color-picker-hex-input-suffix-text-color": { + targetProp: "--calcite-input-suffix-text-color", + shadowSelector: `.${CSS.opacityInput}`, + }, + "--calcite-color-picker-hex-input-text-color": { + targetProp: "--calcite-input-text-color", + shadowSelector: `.${CSS.opacityInput}`, + }, + }); + }); + }); }); 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 2c6536ade0f..67739ca78ae 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 @@ -1,5 +1,15 @@ import { E2EElement, E2EPage, EventSpy, newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, hidden, reflects, renders, focusable, disabled, t9n } from "../../tests/commonTests"; +import { + accessible, + defaults, + hidden, + reflects, + renders, + focusable, + disabled, + t9n, + themed, +} from "../../tests/commonTests"; import { GlobalTestProps, selectText, @@ -2345,4 +2355,274 @@ describe("calcite-color-picker", () => { }); }); }); + + describe("theme", () => { + describe("default", () => { + themed(`calcite-color-picker`, { + "--calcite-color-picker-background-color": { + shadowSelector: `.${CSS.container}`, + targetProp: "backgroundColor", + }, + "--calcite-color-picker-button-background-color": [ + { + shadowSelector: `.${CSS.deleteColor}`, + targetProp: "--calcite-button-background-color", + }, + { + shadowSelector: `.${CSS.saveColor}`, + targetProp: "--calcite-button-background-color", + }, + ], + "--calcite-color-picker-button-background-color-active": [ + { + shadowSelector: `.${CSS.deleteColor}`, + targetProp: "--calcite-button-background-color", + state: { press: { attribute: "class", value: CSS.deleteColor } }, + }, + { + shadowSelector: `.${CSS.saveColor}`, + targetProp: "--calcite-button-background-color", + state: { press: { attribute: "class", value: CSS.saveColor } }, + }, + ], + "--calcite-color-picker-button-background-color-focus": [ + { + shadowSelector: `.${CSS.deleteColor}`, + targetProp: "--calcite-button-background-color", + state: { focus: { attribute: "class", value: CSS.deleteColor } }, + }, + { + shadowSelector: `.${CSS.saveColor}`, + targetProp: "--calcite-button-background-color", + state: { focus: { attribute: "class", value: CSS.saveColor } }, + }, + ], + "--calcite-color-picker-button-background-color-hover": [ + { + shadowSelector: `.${CSS.deleteColor}`, + targetProp: "--calcite-button-background-color", + state: "hover", + }, + { + shadowSelector: `.${CSS.saveColor}`, + targetProp: "--calcite-button-background-color", + state: "hover", + }, + ], + "--calcite-color-picker-button-icon-color": [ + { + shadowSelector: `.${CSS.deleteColor}`, + targetProp: "--calcite-button-icon-color", + }, + { + shadowSelector: `.${CSS.saveColor}`, + targetProp: "--calcite-button-icon-color", + }, + ], + "--calcite-color-picker-button-icon-color-active": [ + { + shadowSelector: `.${CSS.deleteColor}`, + targetProp: "--calcite-button-icon-color", + state: { press: { attribute: "class", value: CSS.deleteColor } }, + }, + { + shadowSelector: `.${CSS.saveColor}`, + targetProp: "--calcite-button-icon-color", + state: { press: { attribute: "class", value: CSS.saveColor } }, + }, + ], + "--calcite-color-picker-button-icon-color-focus": [ + { + shadowSelector: `.${CSS.deleteColor}`, + targetProp: "--calcite-button-icon-color", + state: { focus: { attribute: "class", value: CSS.deleteColor } }, + }, + { + shadowSelector: `.${CSS.saveColor}`, + targetProp: "--calcite-button-icon-color", + state: { focus: { attribute: "class", value: CSS.saveColor } }, + }, + ], + "--calcite-color-picker-button-icon-color-hover": [ + { + shadowSelector: `.${CSS.deleteColor}`, + targetProp: "--calcite-button-icon-color", + state: "hover", + }, + { + shadowSelector: `.${CSS.saveColor}`, + targetProp: "--calcite-button-icon-color", + state: "hover", + }, + ], + "--calcite-color-picker-button-text-color": [ + { + shadowSelector: `.${CSS.deleteColor}`, + targetProp: "--calcite-button-text-color", + }, + { + shadowSelector: `.${CSS.saveColor}`, + targetProp: "--calcite-button-text-color", + }, + ], + "--calcite-color-picker-button-text-color-active": [ + { + shadowSelector: `.${CSS.deleteColor}`, + targetProp: "--calcite-button-text-color", + state: { press: { attribute: "class", value: CSS.deleteColor } }, + }, + { + shadowSelector: `.${CSS.saveColor}`, + targetProp: "--calcite-button-text-color", + state: { press: { attribute: "class", value: CSS.saveColor } }, + }, + ], + "--calcite-color-picker-button-text-color-focus": [ + { + shadowSelector: `.${CSS.deleteColor}`, + targetProp: "--calcite-button-text-color", + state: { focus: { attribute: "class", value: CSS.deleteColor } }, + }, + { + shadowSelector: `.${CSS.saveColor}`, + targetProp: "--calcite-button-text-color", + state: { focus: { attribute: "class", value: CSS.saveColor } }, + }, + ], + "--calcite-color-picker-button-text-color-hover": [ + { + shadowSelector: `.${CSS.deleteColor}`, + targetProp: "--calcite-button-text-color", + state: "hover", + }, + { + shadowSelector: `.${CSS.saveColor}`, + targetProp: "--calcite-button-text-color", + state: "hover", + }, + ], + "--calcite-color-picker-input-background-color": [ + { + shadowSelector: `.${CSS.channel}`, + targetProp: "--calcite-input-background-color", + }, + { + shadowSelector: `.${CSS.hexInput}`, + 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}`, + targetProp: "--calcite-input-border-color", + }, + { + shadowSelector: `.${CSS.hexInput}`, + targetProp: "--calcite-color-picker-hex-input-border-color", + }, + ], + "--calcite-color-picker-input-corner-radius": [ + { + shadowSelector: `.${CSS.channel}`, + targetProp: "--calcite-input-corner-radius", + }, + { + shadowSelector: `.${CSS.hexInput}`, + targetProp: "--calcite-color-picker-hex-input-corner-radius", + }, + ], + "--calcite-color-picker-input-prefix-background-color": [ + { + shadowSelector: `.${CSS.hexInput}`, + targetProp: "--calcite-color-picker-hex-input-prefix-background-color", + }, + ], + "--calcite-color-picker-input-prefix-text-color": [ + { + shadowSelector: `.${CSS.hexInput}`, + targetProp: "--calcite-color-picker-hex-input-prefix-text-color", + }, + ], + "--calcite-color-picker-input-suffix-background-color": [ + { + shadowSelector: `.${CSS.channel}`, + targetProp: "--calcite-input-suffix-background-color", + }, + { + shadowSelector: `.${CSS.hexInput}`, + targetProp: "--calcite-color-picker-hex-input-suffix-background-color", + }, + ], + "--calcite-color-picker-input-suffix-text-color": [ + { + shadowSelector: `.${CSS.channel}`, + targetProp: "--calcite-input-suffix-text-color", + }, + { + shadowSelector: `.${CSS.hexInput}`, + targetProp: "--calcite-color-picker-hex-input-suffix-text-color", + }, + ], + "--calcite-color-picker-input-text-color": [ + { + shadowSelector: `.${CSS.channel}`, + targetProp: "--calcite-input-text-color", + }, + { + shadowSelector: `.${CSS.hexInput}`, + targetProp: "--calcite-color-picker-hex-input-text-color", + }, + ], + "--calcite-color-picker-tab-nav-indicator-color": { + 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", + }, + "--calcite-color-picker-text-color": { + shadowSelector: `.${CSS.header}`, + targetProp: "color", + }, + }); + }); + + describe("opacity enabled", () => { + themed(html``, { + "--calcite-color-picker-input-suffix-background-color": { + shadowSelector: `.${CSS.channel}[data-channel-index="3"]`, + targetProp: "--calcite-input-suffix-background-color", + }, + "--calcite-color-picker-input-suffix-text-color": { + shadowSelector: `.${CSS.channel}[data-channel-index="3"]`, + targetProp: "--calcite-input-suffix-text-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 2d3408202dc..e73805a43a7 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.scss +++ b/packages/calcite-components/src/components/color-picker/color-picker.scss @@ -11,12 +11,12 @@ * @prop --calcite-color-picker-button-icon-color-active: defines the icon color of the button when in a active state in the component. * @prop --calcite-color-picker-button-icon-color-focus: defines the icon color of the button when in a focus state in the component. * @prop --calcite-color-picker-button-icon-color-hover: defines the icon color of the button when in a hover state in the component. - * @prop --calcite-color-picker-button-loader-color: defines the loader color in the button in the component. * @prop --calcite-color-picker-button-text-color-active: defines the text color of the button when in a active state in the component. * @prop --calcite-color-picker-button-text-color-focus: defines the text color of the button when in a focus state in the component. * @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. @@ -232,26 +232,24 @@ calcite-button { --calcite-button-corner-radius: var(--calcite-color-picker-button-corner-radius); - --calcite-button-loader-color: var(--calcite-color-picker-button-loader-color); --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); &:hover { --calcite-button-text-color: var(--calcite-color-picker-button-text-color-hover); --calcite-button-background-color: var(--calcite-color-picker-button-background-color-hover); --calcite-button-icon-color: var(--calcite-color-picker-button-icon-color-hover); - --calcite-button-border-color: var(--calcite-color-picker-button-icon-color-hover); } &:focus { --calcite-button-text-color: var(--calcite-color-picker-button-text-color-focus); --calcite-button-background-color: var(--calcite-color-picker-button-background-color-focus); --calcite-button-icon-color: var(--calcite-color-picker-button-icon-color-focus); - --calcite-button-border-color: var(--calcite-color-picker-button-icon-color-focus); } &:active { --calcite-button-text-color: var(--calcite-color-picker-button-text-color-active); --calcite-button-background-color: var(--calcite-color-picker-button-background-color-active); --calcite-button-icon-color: var(--calcite-color-picker-button-icon-color-active); - --calcite-button-border-color: var(--calcite-color-picker-button-icon-color-active); } } diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx index cc6f8d9b68d..f934eed5d3f 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.tsx +++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx @@ -888,7 +888,10 @@ export class ColorPicker - + {this.renderChannelsTabTitle("rgb")} {this.renderChannelsTabTitle("hsv")} diff --git a/packages/calcite-components/src/components/color-picker/resources.ts b/packages/calcite-components/src/components/color-picker/resources.ts index a8e090c2b86..150285c3803 100644 --- a/packages/calcite-components/src/components/color-picker/resources.ts +++ b/packages/calcite-components/src/components/color-picker/resources.ts @@ -7,6 +7,7 @@ export const CSS = { colorFieldScope: "scope--color-field", colorMode: "color-mode", colorModeContainer: "color-mode-container", + colorModes: "color-modes", container: "container", control: "control", controlAndScope: "control-and-scope", @@ -14,6 +15,7 @@ export const CSS = { deleteColor: "delete-color", header: "header", hexAndChannelsGroup: "hex-and-channels-group", + hexInput: "hex-input", hexOptions: "color-hex-options", hueScope: "scope--hue", hueSlider: "hue-slider", From 2c9474003a0a4647b1554aa91a820cc58e7ef9fb Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 16 Jul 2024 15:09:53 -0700 Subject: [PATCH 2/3] fix and clean up component CSS props --- .../color-picker/color-picker.e2e.ts | 20 ------------------- .../components/color-picker/color-picker.scss | 5 +---- .../src/components/input/common/_mixins.scss | 2 +- 3 files changed, 2 insertions(+), 25 deletions(-) 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); } From d895873634c66062cefb42dc3d9c2db1f0b0ca22 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 16 Jul 2024 15:47:53 -0700 Subject: [PATCH 3/3] simplify CSS props --- .../color-picker-hex-input.e2e.ts | 72 +++++----- .../color-picker-hex-input.scss | 14 +- .../color-picker/color-picker.e2e.ts | 136 ++++-------------- .../components/color-picker/color-picker.scss | 33 ++--- 4 files changed, 79 insertions(+), 176 deletions(-) diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts index 33436043daa..e792053eab3 100644 --- a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts +++ b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts @@ -577,6 +577,26 @@ describe("calcite-color-picker-hex-input", () => { describe("theme", () => { describe("default", () => { themed("calcite-color-picker-hex-input", { + "--calcite-color-picker-hex-input-affix-background-color": [ + { + targetProp: "--calcite-input-prefix-background-color", + shadowSelector: `.${CSS.hexInput}`, + }, + { + targetProp: "--calcite-input-suffix-background-color", + shadowSelector: `.${CSS.hexInput}`, + }, + ], + "--calcite-color-picker-hex-input-affix-text-color": [ + { + targetProp: "--calcite-input-prefix-text-color", + shadowSelector: `.${CSS.hexInput}`, + }, + { + targetProp: "--calcite-input-suffix-text-color", + shadowSelector: `.${CSS.hexInput}`, + }, + ], "--calcite-color-picker-hex-input-background-color": { targetProp: "--calcite-input-background-color", shadowSelector: `.${CSS.hexInput}`, @@ -589,22 +609,6 @@ describe("calcite-color-picker-hex-input", () => { targetProp: "--calcite-input-corner-radius", shadowSelector: `.${CSS.hexInput}`, }, - "--calcite-color-picker-hex-input-prefix-background-color": { - targetProp: "--calcite-input-prefix-background-color", - shadowSelector: `.${CSS.hexInput}`, - }, - "--calcite-color-picker-hex-input-prefix-text-color": { - targetProp: "--calcite-input-prefix-text-color", - shadowSelector: `.${CSS.hexInput}`, - }, - "--calcite-color-picker-hex-input-suffix-background-color": { - targetProp: "--calcite-input-suffix-background-color", - shadowSelector: `.${CSS.hexInput}`, - }, - "--calcite-color-picker-hex-input-suffix-text-color": { - targetProp: "--calcite-input-suffix-text-color", - shadowSelector: `.${CSS.hexInput}`, - }, "--calcite-color-picker-hex-input-text-color": { targetProp: "--calcite-input-text-color", shadowSelector: `.${CSS.hexInput}`, @@ -626,22 +630,26 @@ describe("calcite-color-picker-hex-input", () => { targetProp: "--calcite-input-corner-radius", shadowSelector: `.${CSS.opacityInput}`, }, - "--calcite-color-picker-hex-input-prefix-background-color": { - targetProp: "--calcite-input-prefix-background-color", - shadowSelector: `.${CSS.opacityInput}`, - }, - "--calcite-color-picker-hex-input-prefix-text-color": { - targetProp: "--calcite-input-prefix-text-color", - shadowSelector: `.${CSS.opacityInput}`, - }, - "--calcite-color-picker-hex-input-suffix-background-color": { - targetProp: "--calcite-input-suffix-background-color", - shadowSelector: `.${CSS.opacityInput}`, - }, - "--calcite-color-picker-hex-input-suffix-text-color": { - targetProp: "--calcite-input-suffix-text-color", - shadowSelector: `.${CSS.opacityInput}`, - }, + "--calcite-color-picker-hex-input-affix-background-color": [ + { + targetProp: "--calcite-input-prefix-background-color", + shadowSelector: `.${CSS.opacityInput}`, + }, + { + targetProp: "--calcite-input-suffix-background-color", + shadowSelector: `.${CSS.opacityInput}`, + }, + ], + "--calcite-color-picker-hex-input-affix-text-color": [ + { + targetProp: "--calcite-input-prefix-text-color", + shadowSelector: `.${CSS.opacityInput}`, + }, + { + targetProp: "--calcite-input-suffix-text-color", + shadowSelector: `.${CSS.opacityInput}`, + }, + ], "--calcite-color-picker-hex-input-text-color": { targetProp: "--calcite-input-text-color", shadowSelector: `.${CSS.opacityInput}`, diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.scss b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.scss index bd2a4e75223..ee39f43a868 100644 --- a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.scss +++ b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.scss @@ -3,13 +3,11 @@ * * These properties can be overridden using the component's tag as selector. * + * @prop --calcite-color-picker-hex-input-affix-background-color: defines the background color of the prefix and suffix of the sub-component. + * @prop --calcite-color-picker-hex-input-affix-text-color: defines the text color of the prefix and suffix of the sub-component. * @prop --calcite-color-picker-hex-input-background-color: defines the background color of the input sub-component. * @prop --calcite-color-picker-hex-input-border-color: defines the border color of the input sub-component. * @prop --calcite-color-picker-hex-input-corner-radius: defines the corner radius of the input sub-component. - * @prop --calcite-color-picker-hex-input-prefix-background-color: defines the background color of the prefix sub-component. - * @prop --calcite-color-picker-hex-input-prefix-text-color: defines the text color of the prefix sub-component. - * @prop --calcite-color-picker-hex-input-suffix-background-color: defines the background color of the suffix sub-component. - * @prop --calcite-color-picker-hex-input-suffix-text-color: defines the text color of the suffix sub-component. * @prop --calcite-color-picker-hex-input-text-color: defines the text color of the input sub-component. */ @@ -49,10 +47,10 @@ calcite-input-text, calcite-input-number { - --calcite-input-suffix-background-color: var(--calcite-color-picker-hex-input-suffix-background-color); - --calcite-input-suffix-text-color: var(--calcite-color-picker-hex-input-suffix-text-color); - --calcite-input-prefix-background-color: var(--calcite-color-picker-hex-input-prefix-background-color); - --calcite-input-prefix-text-color: var(--calcite-color-picker-hex-input-prefix-text-color); + --calcite-input-suffix-background-color: var(--calcite-color-picker-hex-input-affix-background-color); + --calcite-input-suffix-text-color: var(--calcite-color-picker-hex-input-affix-text-color); + --calcite-input-prefix-background-color: var(--calcite-color-picker-hex-input-affix-background-color); + --calcite-input-prefix-text-color: var(--calcite-color-picker-hex-input-affix-text-color); --calcite-input-text-color: var(--calcite-color-picker-hex-input-text-color); --calcite-input-background-color: var(--calcite-color-picker-hex-input-background-color); --calcite-input-border-color: var(--calcite-color-picker-hex-input-border-color); 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 71790ea00c2..700aea3b76f 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 @@ -2409,98 +2409,6 @@ describe("calcite-color-picker", () => { state: "hover", }, ], - "--calcite-color-picker-button-icon-color": [ - { - shadowSelector: `.${CSS.deleteColor}`, - targetProp: "--calcite-button-icon-color", - }, - { - shadowSelector: `.${CSS.saveColor}`, - targetProp: "--calcite-button-icon-color", - }, - ], - "--calcite-color-picker-button-icon-color-active": [ - { - shadowSelector: `.${CSS.deleteColor}`, - targetProp: "--calcite-button-icon-color", - state: { press: { attribute: "class", value: CSS.deleteColor } }, - }, - { - shadowSelector: `.${CSS.saveColor}`, - targetProp: "--calcite-button-icon-color", - state: { press: { attribute: "class", value: CSS.saveColor } }, - }, - ], - "--calcite-color-picker-button-icon-color-focus": [ - { - shadowSelector: `.${CSS.deleteColor}`, - targetProp: "--calcite-button-icon-color", - state: { focus: { attribute: "class", value: CSS.deleteColor } }, - }, - { - shadowSelector: `.${CSS.saveColor}`, - targetProp: "--calcite-button-icon-color", - state: { focus: { attribute: "class", value: CSS.saveColor } }, - }, - ], - "--calcite-color-picker-button-icon-color-hover": [ - { - shadowSelector: `.${CSS.deleteColor}`, - targetProp: "--calcite-button-icon-color", - state: "hover", - }, - { - shadowSelector: `.${CSS.saveColor}`, - targetProp: "--calcite-button-icon-color", - state: "hover", - }, - ], - "--calcite-color-picker-button-text-color": [ - { - shadowSelector: `.${CSS.deleteColor}`, - targetProp: "--calcite-button-text-color", - }, - { - shadowSelector: `.${CSS.saveColor}`, - targetProp: "--calcite-button-text-color", - }, - ], - "--calcite-color-picker-button-text-color-active": [ - { - shadowSelector: `.${CSS.deleteColor}`, - targetProp: "--calcite-button-text-color", - state: { press: { attribute: "class", value: CSS.deleteColor } }, - }, - { - shadowSelector: `.${CSS.saveColor}`, - targetProp: "--calcite-button-text-color", - state: { press: { attribute: "class", value: CSS.saveColor } }, - }, - ], - "--calcite-color-picker-button-text-color-focus": [ - { - shadowSelector: `.${CSS.deleteColor}`, - targetProp: "--calcite-button-text-color", - state: { focus: { attribute: "class", value: CSS.deleteColor } }, - }, - { - shadowSelector: `.${CSS.saveColor}`, - targetProp: "--calcite-button-text-color", - state: { focus: { attribute: "class", value: CSS.saveColor } }, - }, - ], - "--calcite-color-picker-button-text-color-hover": [ - { - shadowSelector: `.${CSS.deleteColor}`, - targetProp: "--calcite-button-text-color", - state: "hover", - }, - { - shadowSelector: `.${CSS.saveColor}`, - targetProp: "--calcite-button-text-color", - state: "hover", - }, - ], "--calcite-color-picker-input-background-color": [ { shadowSelector: `.${CSS.channel}`, @@ -2531,36 +2439,32 @@ describe("calcite-color-picker", () => { targetProp: "--calcite-color-picker-hex-input-corner-radius", }, ], - "--calcite-color-picker-input-prefix-background-color": [ - { - shadowSelector: `.${CSS.hexInput}`, - targetProp: "--calcite-color-picker-hex-input-prefix-background-color", - }, - ], - "--calcite-color-picker-input-prefix-text-color": [ + "--calcite-color-picker-input-affix-background-color": [ { shadowSelector: `.${CSS.hexInput}`, - targetProp: "--calcite-color-picker-hex-input-prefix-text-color", + targetProp: "--calcite-color-picker-hex-input-affix-background-color", }, - ], - "--calcite-color-picker-input-suffix-background-color": [ { shadowSelector: `.${CSS.channel}`, targetProp: "--calcite-input-suffix-background-color", }, { shadowSelector: `.${CSS.hexInput}`, - targetProp: "--calcite-color-picker-hex-input-suffix-background-color", + targetProp: "--calcite-color-picker-hex-input-affix-background-color", }, ], - "--calcite-color-picker-input-suffix-text-color": [ + "--calcite-color-picker-input-affix-text-color": [ + { + shadowSelector: `.${CSS.hexInput}`, + targetProp: "--calcite-color-picker-hex-input-affix-text-color", + }, { shadowSelector: `.${CSS.channel}`, targetProp: "--calcite-input-suffix-text-color", }, { shadowSelector: `.${CSS.hexInput}`, - targetProp: "--calcite-color-picker-hex-input-suffix-text-color", + targetProp: "--calcite-color-picker-hex-input-affix-text-color", }, ], "--calcite-color-picker-input-text-color": [ @@ -2585,20 +2489,30 @@ describe("calcite-color-picker", () => { shadowSelector: `.${CSS.colorModeContainer}`, targetProp: "--calcite-tabs-border-color", }, - "--calcite-color-picker-text-color": { - shadowSelector: `.${CSS.header}`, - targetProp: "color", - }, + "--calcite-color-picker-text-color": [ + { + shadowSelector: `.${CSS.deleteColor}`, + targetProp: "--calcite-button-text-color", + }, + { + shadowSelector: `.${CSS.saveColor}`, + targetProp: "--calcite-button-text-color", + }, + { + shadowSelector: `.${CSS.header}`, + targetProp: "color", + }, + ], }); }); describe("opacity enabled", () => { themed(html``, { - "--calcite-color-picker-input-suffix-background-color": { + "--calcite-color-picker-input-affix-background-color": { shadowSelector: `.${CSS.channel}[data-channel-index="3"]`, targetProp: "--calcite-input-suffix-background-color", }, - "--calcite-color-picker-input-suffix-text-color": { + "--calcite-color-picker-input-affix-text-color": { shadowSelector: `.${CSS.channel}[data-channel-index="3"]`, targetProp: "--calcite-input-suffix-text-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 01376930c19..a130a9b87a7 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.scss +++ b/packages/calcite-components/src/components/color-picker/color-picker.scss @@ -8,20 +8,11 @@ * @prop --calcite-color-picker-button-background-color-focus: defines the background color of the button when in a focus state in the component. * @prop --calcite-color-picker-button-background-color-hover: defines the background color of the button when in a hover state in the component. * @prop --calcite-color-picker-button-corner-radius: defines the corner radius of the button in the component. - * @prop --calcite-color-picker-button-icon-color-active: defines the icon color of the button when in a active state in the component. - * @prop --calcite-color-picker-button-icon-color-focus: defines the icon color of the button when in a focus state in the component. - * @prop --calcite-color-picker-button-icon-color-hover: defines the icon color of the button when in a hover state in the component. - * @prop --calcite-color-picker-button-text-color-active: defines the text color of the button when in a active state in the component. - * @prop --calcite-color-picker-button-text-color-focus: defines the text color of the button when in a focus state in the component. - * @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-affix-background-color: defines the background color of the prefix and suffix of the sub-component. + * @prop --calcite-color-picker-input-affix-text-color: defines the text color of the prefix and suffix of the sub-component. * @prop --calcite-color-picker-input-background-color: defines the background color of the input 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. - * @prop --calcite-color-picker-input-prefix-text-color: defines the text color of the prefix sub-component. - * @prop --calcite-color-picker-input-suffix-background-color: defines the background color of the suffix sub-component. - * @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-text-color: Specifies the text color of the sub-component. @@ -229,32 +220,24 @@ 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-text-color: var(--calcite-color-picker-text-color); --calcite-button-background-color: var(--calcite-color-picker-button-background-color); - --calcite-button-icon-color: var(--calcite-color-picker-button-icon-color); + --calcite-button-icon-color: var(--calcite-color-picker-text-color); &:hover { - --calcite-button-text-color: var(--calcite-color-picker-button-text-color-hover); --calcite-button-background-color: var(--calcite-color-picker-button-background-color-hover); - --calcite-button-icon-color: var(--calcite-color-picker-button-icon-color-hover); } &:focus { - --calcite-button-text-color: var(--calcite-color-picker-button-text-color-focus); --calcite-button-background-color: var(--calcite-color-picker-button-background-color-focus); - --calcite-button-icon-color: var(--calcite-color-picker-button-icon-color-focus); } &:active { - --calcite-button-text-color: var(--calcite-color-picker-button-text-color-active); --calcite-button-background-color: var(--calcite-color-picker-button-background-color-active); - --calcite-button-icon-color: var(--calcite-color-picker-button-icon-color-active); } } calcite-color-picker-hex-input { - --calcite-color-picker-hex-input-prefix-background-color: var(--calcite-color-picker-input-prefix-background-color); - --calcite-color-picker-hex-input-prefix-text-color: var(--calcite-color-picker-input-prefix-text-color); - --calcite-color-picker-hex-input-suffix-background-color: var(--calcite-color-picker-input-suffix-background-color); - --calcite-color-picker-hex-input-suffix-text-color: var(--calcite-color-picker-input-suffix-text-color); + --calcite-color-picker-hex-input-affix-background-color: var(--calcite-color-picker-input-affix-background-color); + --calcite-color-picker-hex-input-affix-text-color: var(--calcite-color-picker-input-affix-text-color); --calcite-color-picker-hex-input-background-color: var(--calcite-color-picker-input-background-color); --calcite-color-picker-hex-input-border-color: var(--calcite-color-picker-input-border-color); --calcite-color-picker-hex-input-corner-radius: var(--calcite-color-picker-input-corner-radius); @@ -265,8 +248,8 @@ calcite-input-number { --calcite-input-background-color: var(--calcite-color-picker-input-background-color); --calcite-input-border-color: var(--calcite-color-picker-input-border-color); --calcite-input-text-color: var(--calcite-color-picker-input-text-color); - --calcite-input-suffix-background-color: var(--calcite-color-picker-input-suffix-background-color); - --calcite-input-suffix-text-color: var(--calcite-color-picker-input-suffix-background-color); + --calcite-input-suffix-background-color: var(--calcite-color-picker-input-affix-background-color); + --calcite-input-suffix-text-color: var(--calcite-color-picker-input-affix-background-color); --calcite-input-corner-radius: var(--calcite-color-picker-input-corner-radius); }