refactor(block): heading text color (#11314)

**Related Issue:** #7180 ## Summary Refactor block heading text color. `open/close` icon shares a hover state with the color of the heading text when the component is open. Adds the following component token: `--calcite-block-heading-text-color-press`
Esri · Jan 16, 2025 · 4dde26f · 4dde26f
1 parent 1044878
commit 4dde26f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git 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 heading="heading"></calcite-block>`, {
-        "--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
@@ -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
@@ -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` <calcite-block