-
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(meter): Add component tokens #8606
feat(meter): Add component tokens #8606
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. |
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.
Meter's an odd one. I think it can be simplified but it might require a non-breaking-change-refactor.
Reviewer note: The font color change for unit are expected and verified by cc @SkyeSeitz @ashetland |
--calcite-meter-space-internal: theme("spacing[0.5]"); | ||
--calcite-meter-height-internal: theme("spacing.4"); | ||
--calcite-meter-font-size-internal: var(--calcite-font-size--1); | ||
--calcite-internal-meter-space: var(--calcite-spacing-base); |
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.
can we add these other internal vars to the Local props list?
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.
Done!
Related Issue: #7180
Summary
Adds the following public component css properties:
--calcite-meter-background-color
: Specifies the background color of the component.--calcite-meter-border-color
: Specifies the border color of the component and displayed step lines.--calcite-meter-shadow
: Specifies the box shadow of the component.--calcite-meter-corner-radius
: Specifies the corner radius of the component.--calcite-meter-fill-color
: Specifies the color of the component's fill.--calcite-meter-range-text-color
: Specifies the color of the component's range labels.--calcite-meter-value-text-color
: Specifies the color of the component's value label.Adds a Chromatic test and a demo page example.