From 657062cd796b54a8bad6c258ea65e409413580b9 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Fri, 27 Jun 2025 11:24:55 -0500 Subject: [PATCH 1/3] fix(input-number): add token to customize icon color --- .../src/components/input-number/input-number.e2e.ts | 5 +++++ .../src/components/input-number/input-number.scss | 11 +++++++---- .../src/custom-theme/input-number.ts | 1 + .../calcite-components/src/demos/input-number.html | 2 ++ 4 files changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/input-number/input-number.e2e.ts b/packages/calcite-components/src/components/input-number/input-number.e2e.ts index 632bfb2873d..0e28b07c1d1 100644 --- a/packages/calcite-components/src/components/input-number/input-number.e2e.ts +++ b/packages/calcite-components/src/components/input-number/input-number.e2e.ts @@ -1974,6 +1974,7 @@ describe("calcite-input-number", () => { value="2" clearable loading + icon="layers" > `, { @@ -2095,6 +2096,10 @@ describe("calcite-input-number", () => { targetProp: "color", state: "focus", }, + "--calcite-input-number-icon-color": { + shadowSelector: `.${CSS.inputIcon}`, + targetProp: "color", + }, "--calcite-input-prefix-background-color": { shadowSelector: `.${CSS.prefix}`, targetProp: "backgroundColor", diff --git a/packages/calcite-components/src/components/input-number/input-number.scss b/packages/calcite-components/src/components/input-number/input-number.scss index 4cc0ea6a582..730458b06d3 100755 --- a/packages/calcite-components/src/components/input-number/input-number.scss +++ b/packages/calcite-components/src/components/input-number/input-number.scss @@ -14,6 +14,7 @@ * @prop --calcite-input-number-background-color: Specifies the background color of the component. * @prop --calcite-input-number-border-color: Specifies the border color of the component. * @prop --calcite-input-number-corner-radius: Specifies the border radius of the component. + * @prop --calcite-input-number-icon-color: Specifies the component's icon color. * @prop --calcite-input-number-height: Specifies the height of the component. * @prop --calcite-input-number-placeholder-text-color: Specifies the text color of the placeholder in the component. * @prop --calcite-input-number-text-color: Specifies the text color of the component. @@ -134,10 +135,6 @@ input[readonly]:focus { color: var(--calcite-input-number-text-color-focus, var(--calcite-color-text-1)); } -calcite-icon { - color: var(--calcite-input-actions-icon-color, var(--calcite-color-text-3)); -} - //focus input { @apply focus-base; @@ -202,6 +199,7 @@ input:focus { absolute block z-default; // needed for firefox to display the icon properly + color: var(--calcite-input-number-icon-color, var(--calcite-color-text-3)); } .clear-button { @@ -223,6 +221,10 @@ input:focus { background-color: var(--calcite-input-actions-background-color, var(--calcite-color-foreground-1)); border-inline-start-width: theme("borderWidth.0"); + calcite-icon { + color: var(--calcite-input-actions-icon-color, var(--calcite-color-text-3)); + } + &:hover { @apply transition-default; background-color: var(--calcite-input-actions-background-color-hover, var(--calcite-color-foreground-2)); @@ -385,6 +387,7 @@ input:focus { & calcite-icon { @apply transition-default pointer-events-none; + color: var(--calcite-input-actions-icon-color, var(--calcite-color-text-3)); } &:disabled { diff --git a/packages/calcite-components/src/custom-theme/input-number.ts b/packages/calcite-components/src/custom-theme/input-number.ts index d1288a899d3..25bb032beb5 100644 --- a/packages/calcite-components/src/custom-theme/input-number.ts +++ b/packages/calcite-components/src/custom-theme/input-number.ts @@ -12,6 +12,7 @@ export const inputNumberTokens = { calciteInputNumberBackgroundColor: "", calciteInputNumberBorderColor: "", calciteInputNumberCornerRadius: "", + calciteInputNumberIconColor: "", calciteInputNumberHeight: "", calciteInputNumberPlaceholderTextColor: "", calciteInputNumberTextColor: "", diff --git a/packages/calcite-components/src/demos/input-number.html b/packages/calcite-components/src/demos/input-number.html index fc15dda92c2..c71acd2f215 100644 --- a/packages/calcite-components/src/demos/input-number.html +++ b/packages/calcite-components/src/demos/input-number.html @@ -68,6 +68,7 @@ --calcite-input-number-background-color: yellow; --calcite-input-number-border-color: #1e88e5; --calcite-input-number-corner-radius: 4px; + --calcite-input-number-icon-color: red; --calcite-input-number-height: 40px; --calcite-input-number-placeholder-text-color: #9e9e9e; --calcite-input-number-text-color: #212121; @@ -712,6 +713,7 @@ clearable value="100" loading + icon="layers" > From a5056e3b5b36a0fde1919047bd8333a09e4d1b80 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Wed, 2 Jul 2025 15:27:39 -0500 Subject: [PATCH 2/3] override static values with tokens --- .../src/components/input-number/input-number.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/calcite-components/src/components/input-number/input-number.scss b/packages/calcite-components/src/components/input-number/input-number.scss index 730458b06d3..d9eef07da76 100755 --- a/packages/calcite-components/src/components/input-number/input-number.scss +++ b/packages/calcite-components/src/components/input-number/input-number.scss @@ -199,7 +199,7 @@ input:focus { absolute block z-default; // needed for firefox to display the icon properly - color: var(--calcite-input-number-icon-color, var(--calcite-color-text-3)); + --calcite-icon-color: var(--calcite-input-number-icon-color, var(--calcite-color-text-3)); } .clear-button { @@ -222,7 +222,7 @@ input:focus { border-inline-start-width: theme("borderWidth.0"); calcite-icon { - color: var(--calcite-input-actions-icon-color, var(--calcite-color-text-3)); + --calcite-icon-color: var(--calcite-input-actions-icon-color, var(--calcite-color-text-3)); } &:hover { @@ -230,13 +230,13 @@ input:focus { background-color: var(--calcite-input-actions-background-color-hover, var(--calcite-color-foreground-2)); calcite-icon { @apply transition-default; - color: var(--calcite-input-actions-icon-color-hover, var(--calcite-color-text-1)); + --calcite-icon-color: var(--calcite-input-actions-icon-color-hover, var(--calcite-color-text-1)); } } &:active { background-color: var(--calcite-input-actions-background-color-press, var(--calcite-color-foreground-3)); calcite-icon { - color: var(--calcite-input-actions-icon-color-press, var(--calcite-color-text-1)); + --calcite-icon-color: var(--calcite-input-actions-icon-color-press, var(--calcite-color-text-1)); } } &:focus { @@ -387,7 +387,7 @@ input:focus { & calcite-icon { @apply transition-default pointer-events-none; - color: var(--calcite-input-actions-icon-color, var(--calcite-color-text-3)); + --calcite-icon-color: var(--calcite-input-actions-icon-color, var(--calcite-color-text-3)); } &:disabled { @@ -397,14 +397,14 @@ input:focus { &:hover { background-color: var(--calcite-input-actions-background-color-hover, var(--calcite-color-foreground-2)); calcite-icon { - color: var(--calcite-input-actions-icon-color-hover, var(--calcite-color-text-1)); + --calcite-icon-color: var(--calcite-input-actions-icon-color-hover, var(--calcite-color-text-1)); } } &:active { background-color: var(--calcite-input-actions-background-color-press, var(--calcite-color-foreground-3)); calcite-icon { - color: var(--calcite-input-actions-icon-color-press, var(--calcite-color-text-1)); + --calcite-icon-color: var(--calcite-input-actions-icon-color-press, var(--calcite-color-text-1)); } } } From 9d7bd8b1233bce9b8126275e09ad952a6fc6d93e Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Wed, 2 Jul 2025 15:36:06 -0500 Subject: [PATCH 3/3] fix tests --- .../src/components/input-number/input-number.e2e.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/input-number/input-number.e2e.ts b/packages/calcite-components/src/components/input-number/input-number.e2e.ts index 0e28b07c1d1..08a4658c3e8 100644 --- a/packages/calcite-components/src/components/input-number/input-number.e2e.ts +++ b/packages/calcite-components/src/components/input-number/input-number.e2e.ts @@ -2014,11 +2014,11 @@ describe("calcite-input-number", () => { ], "--calcite-input-actions-icon-color": { shadowSelector: `calcite-icon`, - targetProp: "color", + targetProp: "--calcite-icon-color", }, "--calcite-input-actions-icon-color-hover": { shadowSelector: `calcite-icon`, - targetProp: "color", + targetProp: "--calcite-icon-color", state: "hover", }, "--calcite-input-loading-background-color": { @@ -2098,7 +2098,7 @@ describe("calcite-input-number", () => { }, "--calcite-input-number-icon-color": { shadowSelector: `.${CSS.inputIcon}`, - targetProp: "color", + targetProp: "--calcite-icon-color", }, "--calcite-input-prefix-background-color": { shadowSelector: `.${CSS.prefix}`,