Skip to content
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

Closed
wants to merge 12 commits into from

Conversation

macandcheese
Copy link
Contributor

@macandcheese macandcheese commented Jan 12, 2024

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.

@macandcheese macandcheese requested a review from a team as a code owner January 12, 2024 20:20
@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Jan 12, 2024
@macandcheese macandcheese added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jan 12, 2024
Copy link
Contributor

@alisonailea alisonailea left a 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

@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 12, 2024
}

.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;
Copy link
Contributor Author

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.

@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 12, 2024
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 12, 2024
@macandcheese macandcheese requested a review from a team January 12, 2024 21:49
@macandcheese macandcheese removed request for a team and alisonailea January 13, 2024 01:42
@macandcheese macandcheese removed enhancement Issues tied to a new feature or request. pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 13, 2024
@macandcheese macandcheese removed their assignment Jan 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants