-
Notifications
You must be signed in to change notification settings - Fork 75
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(chip, chip group): Add component tokens #8607
feat(chip, chip group): Add component tokens #8607
Conversation
box-border | ||
font-medium; | ||
border: var(--calcite-border-width-sm) solid var(--calcite-chip-border-color, var(--calcite-color-border-3)); | ||
border-radius: var(--calcite-chip-corner-radius, 9999px); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This 9999px
needs to made into a token - in TW this is rounded-full
This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions. |
This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Lift all tokens into :host
and only apply each style prop to an HTML element once with a CSS variable (token) then reassign the variable when the host state changes.
11b46f0
into
epic/7180-component-tokens
Related Issue: #7180
Summary
Adds the following public component css properties:
--calcite-chip-background-color
: Specifies the background color of the component.--calcite-chip-border-color
: Specifies the border color of the component.--calcite-chip-shadow
: Specifies the box shadow of the component.--calcite-chip-corner-radius
: Specifies the corner radius of the component.--calcite-chip-icon-color
: Specifies the color of the component's icon property.--calcite-chip-text-color
: Specifies the color of the component's"default"
slot.--calcite-chip-close-icon-color
: Specifies the color of the component'sclosable
icon.--calcite-chip-close-background-color
: Specifies the color of the component'sclosable
background color.--calcite-chip-close-background-color-hover
: Specifies the hover color of the component'sclosable
background color.--calcite-chip-close-background-color-active
: Specifies the active color of the component'sclosable
background color.--calcite-chip-close-background-color-focus
: Specifies the focus color of the component'sclosable
background color.--calcite-chip-close-focus-outline-color
: Specifies the focus color of the component'sclosable
background color.Adds a Chromatic test and a demo page example. Also replaces broken image links in local demo.