-
Notifications
You must be signed in to change notification settings - Fork 77
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(card): Add component tokens #8597
Conversation
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.
Looks pretty good!
I think we can reduce overhead by reducing internal variables and using Semantic CSS tokens instead of SCSS
} | ||
|
||
.container { | ||
@apply relative flex flex-auto flex-col; | ||
} | ||
|
||
:host([loading]) .calcite-card-container *:not(calcite-loader):not(.calcite-card-loader-container) { | ||
@apply pointer-events-none opacity-0; | ||
@apply pointer-events-none; | ||
opacity: $calcite-opacity-0; |
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.
@alisonailea leaving this for now, need to add a token here.
Related Issue: #7180
Summary
Adds the following public component css properties:
--calcite-card-background-color
: Specifies the background color of the component.--calcite-card-border-color
: Specifies the border color of the component.--calcite-card-box-shadow
: Specifies the box shadow of the component.--calcite-card-corner-radius
: Specifies the corner radius of the component.--calcite-card-subtitle-color
: Specifies the color of the component's"subtitle"
slot.--calcite-card-title-color
: Specifies the color of the component's"title"
slot.Adds a Chromatic test and a demo page example. Also replaces broken image links in local demo.