From 964d5414237e539e1c2558391b028f3831086e7c Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 15 Jan 2025 13:47:55 -0800 Subject: [PATCH 1/3] refactor(block): heading text color --- packages/calcite-components/src/components/block/block.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss index 82c1cbc0954..2332d861df5 100644 --- a/packages/calcite-components/src/components/block/block.scss +++ b/packages/calcite-components/src/components/block/block.scss @@ -9,7 +9,7 @@ * @prop --calcite-block-header-text-color: Specifies the component's `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. + * @prop --calcite-block-heading-text-color-press: Specifies the heading text color when the component is open. */ :host { @@ -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)); } } From fa1694e123d8fad9a9f39198c3552c4f4589fc78 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 15 Jan 2025 13:55:36 -0800 Subject: [PATCH 2/3] dos --- packages/calcite-components/src/components/block/block.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss index 2332d861df5..a65393af9de 100644 --- a/packages/calcite-components/src/components/block/block.scss +++ b/packages/calcite-components/src/components/block/block.scss @@ -9,7 +9,7 @@ * @prop --calcite-block-header-text-color: Specifies the component's `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-heading-text-color-press: Specifies the heading text color when the component is open. + * @prop --calcite-block-heading-text-color-press: When the component is `open`, specifies the `heading` text color. */ :host { From d574e412886aa6317b14f1ee26888f7bde5327e9 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 15 Jan 2025 14:27:52 -0800 Subject: [PATCH 3/3] rename -header- to -heading- --- .../src/components/block/block.e2e.ts | 19 +++++++++++++------ .../src/components/block/block.scss | 6 +++--- .../src/custom-theme/block.ts | 9 ++++----- 3 files changed, 20 insertions(+), 14 deletions(-) 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 a65393af9de..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-heading-text-color-press: When the component is `open`, specifies the `heading` text color. */ :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 { 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`