diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts index 46597ebeaf0..b5d093b745d 100644 --- a/packages/calcite-components/src/components/block/block.e2e.ts +++ b/packages/calcite-components/src/components/block/block.e2e.ts @@ -459,17 +459,24 @@ describe("calcite-block", () => { { shadowSelector: `.${CSS.iconStart}`, targetProp: "color" }, { shadowSelector: `.${CSS.toggleIcon}`, targetProp: "color" }, ], - "--calcite-block-text-color-hover": { - shadowSelector: `.${CSS.toggleIcon}`, - targetProp: "color", - state: "hover", - }, + "--calcite-block-heading-text-color-press": [ + { + shadowSelector: `.${CSS.toggleIcon}`, + targetProp: "color", + state: "hover", + }, + { + shadowSelector: `.${CSS.heading}`, + targetProp: "color", + state: { press: { attribute: "class", value: CSS.heading } }, + }, + ], }, ); }); describe("closed", () => { themed(html``, { - "--calcite-block-header-text-color": { shadowSelector: `.${CSS.heading}`, targetProp: "color" }, + "--calcite-block-heading-text-color": { shadowSelector: `.${CSS.heading}`, targetProp: "color" }, }); }); }); diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss index 82c1cbc0954..26b5df89a82 100644 --- a/packages/calcite-components/src/components/block/block.scss +++ b/packages/calcite-components/src/components/block/block.scss @@ -6,10 +6,10 @@ * @prop --calcite-block-border-color: Specifies the component's border color. * @prop --calcite-block-header-background-color: Specifies the component's `heading` background color. * @prop --calcite-block-header-background-color-hover: Specifies the component's `heading` background color when hovered. - * @prop --calcite-block-header-text-color: Specifies the component's `heading` text color. + * @prop --calcite-block-heading-text-color: Specifies the component's `heading` text color. + * @prop --calcite-block-heading-text-color-press: When the component is `open`, specifies the `heading` text color. * @prop --calcite-block-padding: [Deprecated] Specifies the padding of the component's `default` slot. * @prop --calcite-block-text-color: Specifies the component's text color. - * @prop --calcite-block-text-color-hover: Specifies the component's text color when hovered. */ :host { @@ -119,7 +119,7 @@ calcite-handle { ease-in-out p-0; - color: var(--calcite-block-header-text-color, var(--calcite-color-text-2)); + color: var(--calcite-block-heading-text-color, var(--calcite-color-text-2)); } .description { @@ -173,7 +173,7 @@ calcite-handle { } .toggle:hover .toggle-icon { - color: var(--calcite-block-text-color-hover, var(--calcite-color-text-1)); + color: var(--calcite-block-heading-text-color-press, var(--calcite-color-text-1)); } .container { @@ -209,7 +209,7 @@ calcite-action-menu { @apply my-2; .header .title .heading { - color: var(--calcite-block-text-color-hover, var(--calcite-color-text-1)); + color: var(--calcite-block-heading-text-color-press, var(--calcite-color-text-1)); } } diff --git a/packages/calcite-components/src/custom-theme/block.ts b/packages/calcite-components/src/custom-theme/block.ts index d20a6731c36..80d8d1112f7 100644 --- a/packages/calcite-components/src/custom-theme/block.ts +++ b/packages/calcite-components/src/custom-theme/block.ts @@ -2,12 +2,11 @@ import { html } from "../../support/formatting"; export const blockTokens = { calciteBlockBorderColor: "", - calciteBlockContentStartColor: "", calciteBlockHeaderBackgroundColor: "", - calciteBlockHeaderDescriptionColor: "", - calciteBlockHeaderIconColor: "", - calciteBlockIconColorEnd: "", - calciteBlockIconColorStart: "", + calciteBlockHeaderBackgroundColorHover: "", + calciteBlockTextColor: "", + calciteBlockHeadingTextColor: "", + calciteBlockHeadingTextColorPress: "", }; export const block = html`