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`