feat(input): add component tokens

[alisonailea]

Related Issue: #7180

Summary

Adds the following component tokens to the calcite-input component styles

--calcite-input-corner-radius: defines the border radius of the component.
--calcite-input-text-color: defines the text color of the component.
--calcite-input-border-color: defines the border color of the component.
--calcite-input-background-color: defines the background color of the component.
--calcite-input-button-background-color: defines the background color of a button element in the component.
--calcite-input-button-background-color-hover: defines the background color of a :hover-ed button element in the component.
--calcite-input-button-background-color-active: defines the background color of an :active button element in the component.
--calcite-input-icon-color: defines the color of an icon element in the component.
--calcite-input-button-icon-color-hover: defines the color of an icon element when it's parent is hovered in the component.
--calcite-input-prefix-text-color: defines the prefix text color in the component.
--calcite-input-prefix-background-color: defines the prefix background color in the component.
--calcite-input-suffix-text-color: defines the suffix text color in the component.
--calcite-input-suffix-background-color: defines the suffix background color in the component.
--calcite-input-placeholder-text-color: defines the color of placeholder text in the component.
--calcite-input-shadow: defines the box-shadow of the component.

[macandcheese]

I could see users wanting to customize these individually pretty easily, wdyt cc @SkyeSeitz @ashetland

[macandcheese]

Can the user set this with calcite-input: hover or is it for a different icon besides the one from ‘icon’ prop?

[alisonailea]

it's different.

[macandcheese]

Maybe input-button-icon-color and input-button-icon-color-hover just to be clearer? From the name / description it just sounds like the hover color for the icon set above (which can be affected with a parent-level pseudo state override)

[alisonailea]

input-icon-color is used for static icons as well. I'll keep this name but update the input-button-icon-color-hover to be clearer.

[macandcheese]

Can we add an input-shadow that defaults to none?

[macandcheese]

Conditionally handle the closable button with this value:

[alisonailea]

I already have the styles there to prevent an example like you've shown above. The input will not add a rounded border when a ::slotted action is added. However, I can not style the button as shown above as the button is not currently styled in such a way as to allow that.

[macandcheese]

Agreed, we shouldn't apply it to slotted content. But that clear button is rendered internally, IMO we should treat it like the number buttons which you already handle:

border-start-start-radius: var(--calcite-input-corner-radius);
border-end-start-radius: var(--calcite-input-corner-radius);

It's only an issue when the close button is adjacent to the edge, you're already handling it in these cases, I think it just needs a conditional for the above state:

[macandcheese]

Looking really good! Two main things:

• Handle the clearable case when its the last rendered element.
• I think there are some extra border colors being set on focus / invalid.

Previously:

With this PR:

I don't mind the invalid styling around the suffix / prefix, but the focus color around number spinners shouldn't be applied I don't think.

[macandcheese]

Colors look good! Can we fire off a Chromatic build for this?

Border radius looks good on close button in some states :

But I think it might need another pass for certain states :

[alisonailea]

@macandcheese Thanks for the catch! I did find one error but I also updated the storybook story to remove empty "prefix-text" and "suffix-text" which were causing some of the unexpected layout bugs you saw.

Latest screenshots

[macandcheese]

🏅