feat(link): add component tokens #10689
Conversation
|
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. |
# Conflicts: # packages/calcite-components/src/components.d.ts # packages/calcite-components/src/components/link/link.e2e.ts
|
@alisonailea @macandcheese can I get a review of this one? |
|
|
||
| describe("theme", () => { | ||
| describe("default", () => { | ||
| themed(html` <calcite-link href="#" icon-start="banana" icon-end="information">link</calcite-link> `, { |
There was a problem hiding this comment.
Not sure how granular we want to get with these - you could also test against an internal span element rendered without a href - don't know if that's totally duplicative with this or not.
| * These properties can be overridden using the component's tag as selector. | ||
| * | ||
| * @prop --calcite-link-text-color: Specifies the component's text color. | ||
| */ |
There was a problem hiding this comment.
Not actionable: I think this single property works for the time being - in the future I could see the need for --calcite-link-icon-start-color and --calcite-link-icon-end-color.
Users can currently just use --calcite-icon-color - but if they wanted granular control over each icon for whatever reason, we can add those down the road as needed.
| relative | ||
| inline | ||
| border-none | ||
| bg-transparent | ||
| p-0; | ||
| color: var(--calcite-link-text-color, var(--calcite-color-text-link)); | ||
| line-height: inherit; | ||
| white-space: initial; | ||
| background-image: linear-gradient(currentColor, currentColor), |
There was a problem hiding this comment.
For this underline, maybe we could pass it through with --calcite-link-underline ? Kind of a strange prop, I know design was maybe going to re-evaluate this, but for now we'd need to let users override it somehow. If they've overridden the link color they'll need to change this right?
There was a problem hiding this comment.
Lets just think about it. we can add it later.
Related Issue: #7180
Summary
Add
linkcomponent tokens.--calcite-link-text-color: Specifies the component's text color.