From ef86a7f12fc7ffc0a5e056eb1ed987e3bcbdd153 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Tue, 2 Apr 2024 12:16:17 -0500 Subject: [PATCH] feat(input-time-picker): add tokens for toggle icon (#9006) **Related Issue:** #7180 ## Summary Adds following tokens in `calcite-input-time-picker` component: ``` --calcite-input-time-picker-toggle-icon-color-hover: Specifies the icon color of the toggle when hovered. --calcite-input-time-picker-toggle-icon-color: Specifies the icon color of the toggle. ``` Related to https://github.com/Esri/calcite-design-system/pull/8955 --- .../input-time-picker/input-time-picker.scss | 32 +++++++++++-------- .../src/demos/input-time-picker.html | 2 ++ 2 files changed, 21 insertions(+), 13 deletions(-) diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss b/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss index e31e004bb62..feeb514e556 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss @@ -5,27 +5,29 @@ * * @prop --calcite-input-background-color: defines the background color of the component. * @prop --calcite-input-border-color: defines the border color of the component. - * @prop --calcite-input-button-background-color: defines the background color of a button in the component. * @prop --calcite-input-button-background-color-hover: defines the background color of a button in the component when it's hovered. + * @prop --calcite-input-button-background-color: defines the background color of a button in the component. * @prop --calcite-input-button-border-color: defines the border color of a button in the component. - * @prop --calcite-input-button-icon-color: defines the icon color of a button in the component. * @prop --calcite-input-button-icon-color-active: defines the icon color of a button in the component when it's active. * @prop --calcite-input-button-icon-color-hover: defines the icon color of a button in the component when it's hovered. + * @prop --calcite-input-button-icon-color: defines the icon color of a button in the component. * @prop --calcite-input-corner-radius: defines the corner radius of the component. * @prop --calcite-input-icon-color: defines the icon color of the component. * @prop --calcite-input-placeholder-text-color: defines the color of placeholder text in the component. - * @prop --calcite-input-text-color: defines the text color of the component. - * @prop --calcite-input-time-picker-background-color: defines the background color of the time picker sub component. - * @prop --calcite-input-time-picker-background-color-hover: defines the background color of the time picker sub component when hovered. - * @prop --calcite-input-time-picker-background-color-active: defines the background color of the time picker sub component when active. - * @prop --calcite-input-time-picker-text-color: defines the text color of the time picker sub component. - * @prop --calcite-input-time-picker-icon-color: defines the icon color of the time picker sub component. - * @prop --calcite-input-time-picker-box-shadow: defines the box shadow around the numbers inside the open component. - * @prop --calcite-input-time-picker-box-shadow-focus: defines the box shadow around the numbers inside the open component when focused. + * @prop --calcite-input-popover-background-color: defines the background color of the popover sub component. * @prop --calcite-input-popover-background-color: defines the background color of the popover sub component. * @prop --calcite-input-popover-border-color: defines the border color of the popover sub component. * @prop --calcite-input-popover-text-color: defines the text color of the popover sub component. - * @prop --calcite-input-popover-background-color: defines the background color of the popover sub component. + * @prop --calcite-input-text-color: defines the text color of the component. + * @prop --calcite-input-time-picker-background-color-active: defines the background color of the time picker sub component when active. + * @prop --calcite-input-time-picker-background-color-hover: defines the background color of the time picker sub component when hovered. + * @prop --calcite-input-time-picker-background-color: defines the background color of the time picker sub component. + * @prop --calcite-input-time-picker-box-shadow-focus: defines the box shadow around the numbers inside the open component when focused. + * @prop --calcite-input-time-picker-box-shadow: defines the box shadow around the numbers inside the open component. + * @prop --calcite-input-time-picker-icon-color: defines the icon color of the time picker sub component. + * @prop --calcite-input-time-picker-text-color: defines the text color of the time picker sub component. + * @prop --calcite-input-time-picker-toggle-icon-color-hover: Specifies the icon color of the toggle when hovered. + * @prop --calcite-input-time-picker-toggle-icon-color: Specifies the icon color of the toggle. */ :host { @@ -64,12 +66,16 @@ inset-inline-end: 0; inset-block: 0; padding-inline: var(--calcite-toggle-spacing); - --calcite-ui-icon-color: var(--calcite-color-text-3); + & calcite-icon { + --calcite-icon-color: var(--calcite-input-time-picker-toggle-icon-color, var(--calcite-color-text-3)); + } } .input-wrapper:hover .toggle-icon, calcite-input-text:focus + .toggle-icon { - --calcite-ui-icon-color: var(--calcite-color-text-1); + & calcite-icon { + --calcite-icon-color: var(--calcite-input-time-picker-toggle-icon-color-hover, var(--calcite-color-text-1)); + } } calcite-popover { diff --git a/packages/calcite-components/src/demos/input-time-picker.html b/packages/calcite-components/src/demos/input-time-picker.html index 229a8c1cc6e..c7a59051dca 100644 --- a/packages/calcite-components/src/demos/input-time-picker.html +++ b/packages/calcite-components/src/demos/input-time-picker.html @@ -47,6 +47,8 @@ --calcite-input-time-picker-icon-color: white; --calcite-input-time-picker-box-shadow: inset 0 0 0 2px yellow; --calcite-input-time-picker-box-shadow-focus: inset 0 0 0 2px navy; + --calcite-input-time-picker-toggle-icon-color-hover: blue; + --calcite-input-time-picker-toggle-icon-color: yellow; }