feat(input): Add component tokens #10820
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
enhancement
macandcheese
requested review from
driskull,
alisonailea,
SkyeSeitz and
ashetland
macandcheese
added
pr ready for visual snapshots
alisonailea
approved these changes
Nov 20, 2024
macandcheese
added
pr ready for visual snapshots
macandcheese
commented
Nov 20, 2024
This was referenced Nov 21, 2024
macandcheese
added
pr ready for visual snapshots
|
@alisonailea @jcfranco - Could you give this a look again? the "text area grab handle" changes were pulled in from |
macandcheese
added
pr ready for visual snapshots
github-actions
bot
added this to the 2024-11-26 - 3.0.0 Nov Breaking Change Milestone milestone
benelan
pushed a commit
that referenced
this pull request
Feb 8, 2025
**Related Issue:** #7180 This will also serve as a pattern for related component like Input Text, Input Number, etc. ## Summary `--calcite-input-background-color`: Specifies the background color of the component. `--calcite-input-border-color`: Specifies the border color of the component. `--calcite-input-corner-radius`: Specifies the corner radius of the component. `--calcite-input-shadow`: Specifies the shadow of the component. `--calcite-input-icon-color`: Specifies the icon color of the component. `--calcite-input-text-color`: Specifies the text color of the component. `--calcite-input-placeholder-text-color`: Specifies the color of placeholder text in the component. `--calcite-input-actions-background-color`: Specifies the background color of Input's `clearable` and `number-button-type` elements. `--calcite-input-actions-background-color-hover`: Specifies the background color of Input's `clearable` and `number-button-type` elements when hovered. `--calcite-input-actions-background-color-press`: Specifies the background color of Input's `clearable` and `number-button-type` elements when pressed. `--calcite-input-actions-icon-color`: Specifies the icon color of Input's `clearable` and `number-button-type` elements. `--calcite-input-actions-icon-color-hover`: Specifies the icon color of Input's `clearable` and `number-button-type` elements when hovered. `--calcite-input-actions-icon-color-press`: Specifies the icon color of Input's `clearable` and `number-button-type` elements when pressed. `--calcite-input-loading-background-color`: Specifies the background color of the `loading` element, when present. `--calcite-input-loading-fill-color`: Specifies the fill color of the `loading` element, when present. `--calcite-input-prefix-background-color`: Specifies the background color of the component's prefix, when present. `--calcite-input-prefix-text-color`: Specifies the text color of the prefix of the component's prefix, when present. `--calcite-input-suffix-background-color`: Specifies the background color of the component's suffix, when present. `--calcite-input-suffix-text-color`: Specifies the text color of the component's suffix, when present. `--calcite-input-prefix-size`: Specifies the component's prefix width, when present. _[existing]_ `--calcite-input-suffix-size`: Specifies the component's suffix width, when present. _[existing]_
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related Issue: #7180
This will also serve as a pattern for related component like Input Text, Input Number, etc.
Summary
--calcite-input-background-color: Specifies the background color of the component.--calcite-input-border-color: Specifies the border color of the component.--calcite-input-corner-radius: Specifies the corner radius of the component.--calcite-input-shadow: Specifies the shadow of the component.--calcite-input-icon-color: Specifies the icon color of the component.--calcite-input-text-color: Specifies the text color of the component.--calcite-input-placeholder-text-color: Specifies the color of placeholder text in the component.--calcite-input-actions-background-color: Specifies the background color of Input'sclearableandnumber-button-typeelements.--calcite-input-actions-background-color-hover: Specifies the background color of Input'sclearableandnumber-button-typeelements when hovered.--calcite-input-actions-background-color-press: Specifies the background color of Input'sclearableandnumber-button-typeelements when pressed.--calcite-input-actions-icon-color: Specifies the icon color of Input'sclearableandnumber-button-typeelements.--calcite-input-actions-icon-color-hover: Specifies the icon color of Input'sclearableandnumber-button-typeelements when hovered.--calcite-input-actions-icon-color-press: Specifies the icon color of Input'sclearableandnumber-button-typeelements when pressed.--calcite-input-loading-background-color: Specifies the background color of theloadingelement, when present.--calcite-input-loading-fill-color: Specifies the fill color of theloadingelement, when present.--calcite-input-prefix-background-color: Specifies the background color of the component's prefix, when present.--calcite-input-prefix-text-color: Specifies the text color of the prefix of the component's prefix, when present.--calcite-input-suffix-background-color: Specifies the background color of the component's suffix, when present.--calcite-input-suffix-text-color: Specifies the text color of the component's suffix, when present.--calcite-input-prefix-size: Specifies the component's prefix width, when present. [existing]--calcite-input-suffix-size: Specifies the component's suffix width, when present. [existing]