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(panel): Add component tokens #8670

Merged
merged 8 commits into from
Feb 10, 2024

Conversation

driskull
Copy link
Member

@driskull driskull commented Jan 30, 2024

Related Issue: #7180

Summary

  • Adds screenshot theming test

Adds the following public component css properties:

  • --calcite-panel-background-color: Specifies the background color of the component.
  • --calcite-panel-border-color: Specifies the border color of the component.
  • --calcite-panel-description-text-color: Specifies the color of the component's description.
  • --calcite-panel-footer-background-color: Specifies the background color of the component's footer.
  • --calcite-panel-footer-space: Specifies the spacing of the component's footer.
  • --calcite-panel-header-background-color: Specifies the component header's background color.
  • --calcite-panel-heading-text-color: Specifies the component header's color.
  • --calcite-panel-header-z-index: Specifies the component header's z-index.
  • --calcite-panel-fab-z-index: Specifies the component fab's z-index.

Deprecates the following public component css properties:

  • --calcite-panel-footer-padding: [Deprecated] Use --calcite-panel-footer-space instead. Specifies the padding of the component's footer.
  • --calcite-panel-header-border-block-end: [Deprecated] No longer necessary. Specifies the component header's block end border.
  • --calcite-panel-header-color: [Deprecated] Use --calcite-panel-heading-text-color instead. Specifies the component header's color.

@driskull driskull changed the title feat(panel): Add component tokens. #7180 feat(panel): Add component tokens Jan 30, 2024
@driskull driskull marked this pull request as ready for review January 30, 2024 01:12
@driskull driskull requested a review from a team as a code owner January 30, 2024 01:12
@alisonailea
Copy link
Contributor

Looks good! Just a few little things.

@driskull driskull requested a review from alisonailea January 30, 2024 18:15
Copy link
Contributor

@macandcheese macandcheese left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

I can do a quick follow up for #8675 after this lands - we showed a lot of demo with those customizations this morning 😄

@driskull driskull merged commit 94b090b into epic/7180-component-tokens Feb 10, 2024
5 checks passed
@driskull driskull deleted the dris0000/7180-panel branch February 10, 2024 00:55
Elijbet pushed a commit that referenced this pull request Feb 15, 2024
**Related Issue:** #7180

## Summary

- Adds screenshot theming test

### Adds the following public component css properties:
 
* `--calcite-panel-background-color`: Specifies the background color of
the component.
* `--calcite-panel-border-color`: Specifies the border color of the
component.
* `--calcite-panel-description-text-color`: Specifies the color of the
component's description.
* `--calcite-panel-footer-background-color`: Specifies the background
color of the component's footer.
* `--calcite-panel-footer-space`: Specifies the spacing of the
component's footer.
* `--calcite-panel-header-background-color`: Specifies the component
header's background color.
* `--calcite-panel-heading-text-color`: Specifies the component header's
color.
* `--calcite-panel-header-z-index`: Specifies the component header's
z-index.
 * `--calcite-panel-fab-z-index`: Specifies the component fab's z-index.


## Deprecates the following public component css properties:

- `--calcite-panel-footer-padding`: [Deprecated] Use
`--calcite-panel-footer-space` instead. Specifies the padding of the
component's footer.
- `--calcite-panel-header-border-block-end`: [Deprecated] No longer
necessary. Specifies the component header's block end border.
- `--calcite-panel-header-color`: [Deprecated] Use
`--calcite-panel-heading-text-color` instead. Specifies the component
header's color.
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.

3 participants