From 328143e4e034a60500ffef95a2fbeec6ef3a04e1 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 14 Jan 2025 11:06:01 -0800 Subject: [PATCH 1/2] feat: control panel header action tokens sepratly --- .../src/components/panel/panel.scss | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 3cb4518df30..388d24456b0 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -26,6 +26,15 @@ * @prop --calcite-panel-content-space: [Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content. * @prop --calcite-panel-footer-padding: [Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer. * @prop --calcite-panel-header-border-block-end: [Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border. + + * @prop --calcite-panel-header-action-menu-items-space: Specifies the space between actions in the header's action menu. + * @prop --calcite-panel-header-action-background-color-hover: Specifies the background color of the component's `calcite-action` items in the panel header when hovered. + * @prop --calcite-panel-header-action-background-color-press: Specifies the background color of the component's `calcite-action` items in the panel header when pressed. + * @prop --calcite-panel-header-action-background-color: Specifies the background color of the component's `calcite-action` items in the panel header. + * @prop --calcite-panel-header-action-corner-radius: Specifies the corner radius of the component's `calcite-action` items in the panel header. + * @prop --calcite-panel-header-action-indicator-color: Specifies the color of the component's `calcite-action` items' indicator in the panel header. + * @prop --calcite-panel-header-action-text-color-press: Specifies the text color of the component's `calcite-action` items in the panel header when pressed. + * @prop --calcite-panel-header-action-text-color: Specifies the text color of the component's `calcite-action` items in the panel header. */ :host { @@ -147,6 +156,26 @@ margin-inline-end: auto; justify-content: center; + .header-actions { + --calcite-action-menu-items-space: var(--calcite-panel-header-action-menu-items-space, 0); + --calcite-action-background-color-hover: var( + --calcite-panel-header-action-background-color-hover, + var(--calcite-color-foreground-2) + ); + --calcite-action-background-color-press: var( + --calcite-panel-header-action-background-color-press, + var(--calcite-color-foreground-3) + ); + --calcite-action-background-color: var( + --calcite-panel-header-action-background-color, + var(--calcite-color-foreground-1) + ); + --calcite-action-corner-radius: var(--calcite-panel-header-action-corner-radius, var(--calcite-corner-radius)); + --calcite-action-indicator-color: var(--calcite-panel-header-action-indicator-color, var(--calcite-color-brand)); + --calcite-action-text-color-press: var(--calcite-panel-header-action-text-color-press, var(--calcite-color-text-1)) + --calcite-action-text-color: var(--calcite-panel-header-action-text-color, var(--calcite-color-text-3)); + } + .heading, .description { @apply block From 7c716d70e57aaea514fec44bb773c9d5982ef62a Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 21 Jan 2025 10:48:58 -0800 Subject: [PATCH 2/2] chore: resolve PR comments --- .../src/components/panel/panel.scss | 30 ++++--------------- 1 file changed, 6 insertions(+), 24 deletions(-) diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 388d24456b0..2ab0af241e3 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -7,31 +7,24 @@ * @prop --calcite-panel-heading-text-color: Specifies the text color of the component's `heading`. * @prop --calcite-panel-description-text-color: Specifies the text color of the component's `description`. * @prop --calcite-panel-border-color: Specifies the component's border color. - * @prop --calcite-panel-background-color: Specifies the component's background color. * @prop --calcite-panel-header-background-color: Specifies the background color of the component's header. * @prop --calcite-panel-footer-background-color: Specifies the background color of the component's footer. - * @prop --calcite-panel-space: Specifies the padding of the component's `"unnamed (default)"` slot. * @prop --calcite-panel-header-content-space: Specifies the padding of the `"header-content"` slot. * @prop --calcite-panel-footer-space: Specifies the padding of the component's footer. - * @prop --calcite-action-background-color: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s. * @prop --calcite-action-background-color-hover: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s. * @prop --calcite-action-background-color-pressed: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s. * @prop --calcite-action-text-color-hover: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s. * @prop --calcite-action-text-color-pressed: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s. * @prop --calcite-popover-border-color: Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s. - * @prop --calcite-panel-content-space: [Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content. * @prop --calcite-panel-footer-padding: [Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer. * @prop --calcite-panel-header-border-block-end: [Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border. - - * @prop --calcite-panel-header-action-menu-items-space: Specifies the space between actions in the header's action menu. * @prop --calcite-panel-header-action-background-color-hover: Specifies the background color of the component's `calcite-action` items in the panel header when hovered. * @prop --calcite-panel-header-action-background-color-press: Specifies the background color of the component's `calcite-action` items in the panel header when pressed. * @prop --calcite-panel-header-action-background-color: Specifies the background color of the component's `calcite-action` items in the panel header. - * @prop --calcite-panel-header-action-corner-radius: Specifies the corner radius of the component's `calcite-action` items in the panel header. * @prop --calcite-panel-header-action-indicator-color: Specifies the color of the component's `calcite-action` items' indicator in the panel header. * @prop --calcite-panel-header-action-text-color-press: Specifies the text color of the component's `calcite-action` items in the panel header when pressed. * @prop --calcite-panel-header-action-text-color: Specifies the text color of the component's `calcite-action` items in the panel header. @@ -157,23 +150,12 @@ justify-content: center; .header-actions { - --calcite-action-menu-items-space: var(--calcite-panel-header-action-menu-items-space, 0); - --calcite-action-background-color-hover: var( - --calcite-panel-header-action-background-color-hover, - var(--calcite-color-foreground-2) - ); - --calcite-action-background-color-press: var( - --calcite-panel-header-action-background-color-press, - var(--calcite-color-foreground-3) - ); - --calcite-action-background-color: var( - --calcite-panel-header-action-background-color, - var(--calcite-color-foreground-1) - ); - --calcite-action-corner-radius: var(--calcite-panel-header-action-corner-radius, var(--calcite-corner-radius)); - --calcite-action-indicator-color: var(--calcite-panel-header-action-indicator-color, var(--calcite-color-brand)); - --calcite-action-text-color-press: var(--calcite-panel-header-action-text-color-press, var(--calcite-color-text-1)) - --calcite-action-text-color: var(--calcite-panel-header-action-text-color, var(--calcite-color-text-3)); + --calcite-action-background-color-hover: var(--calcite-panel-header-action-background-color-hover); + --calcite-action-background-color-press: var(--calcite-panel-header-action-background-color-press); + --calcite-action-background-color: var(--calcite-panel-header-action-background-color); + --calcite-action-indicator-color: var(--calcite-panel-header-action-indicator-color); + --calcite-action-text-color-press: var(--calcite-panel-header-action-text-color-press); + --calcite-action-text-color: var(--calcite-panel-header-action-text-color); } .heading,