feat: Add component tokens to Calcite Components #8594
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
alisonailea
added
enhancement
jcfranco
changed the title
|
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. |
github-actions
bot
added
the
Stale
alisonailea
removed
the
Stale
alisonailea
added
the
p - high
**Related Issue:** #7180 ## Summary `--calcite-pagination-background-color-active:` Specifies the background color of the pagination items while active. `--calcite-pagination-background-color-hover:` Specifies the background color of the pagination items while hovered. `--calcite-pagination-background-color`: Specifies the background color of the pagination items. `--calcite-pagination-border-color-hover:` Specifies the border color the pagination items while hovered. `--calcite-pagination-border-color-selected:` Specifies the border color of the pagination items when selected. `--calcite-pagination-text-color-hover:` Specifies the text color of the pagination items items while hovered. `--calcite-pagination-text-color-selected:` Specifies the text color of the pagination items when selected. `--calcite-pagination-text-color: Specifies` the text color of the pagination items. `--calcite-pagination-arrow-background-color-active`: Specifies the background color of the arrow items while active. `--calcite-pagination-arrow-background-color-hover`: Specifies the background color of the arrow items while hovered. `--calcite-pagination-arrow-background-color:` Specifies the background color of the arrow items. `--calcite-pagination-arrow-icon-color-active`: Specifies the icon color of the arrow items while active. `--calcite-pagination-arrow-icon-color-hover`: Specifies the icon color of the arrow items while hovered. `--calcite-pagination-arrow-icon-color:` Specifies the icon color of the arrow items. Adds local demo and Chromatic screenshot test.
**Related Issue:** #7180 ## Summary Adds the following component tokens : 🥇 ``` --calcite-progress-background-color: defines the background color of the component. --calcite-progress-bar-fill-color: defines the background color of the progress bar. --calcite-progress-text-color: defines the text color of the component. ``` --------- Co-authored-by: Ali Stump <[email protected]>
**Related Issue:** #7180 ## Summary Adds the following component tokens to the calcite-input component styles ``` --calcite-input-corner-radius: defines the border radius of the component. --calcite-input-text-color: defines the text color of the component. --calcite-input-border-color: defines the border color of the component. --calcite-input-background-color: defines the background color of the component. --calcite-input-button-background-color: defines the background color of a button element in the component. --calcite-input-button-background-color-hover: defines the background color of a :hover-ed button element in the component. --calcite-input-button-background-color-active: defines the background color of an :active button element in the component. --calcite-input-icon-color: defines the color of an icon element in the component. --calcite-input-button-icon-color-hover: defines the color of an icon element when it's parent is hovered in the component. --calcite-input-prefix-text-color: defines the prefix text color in the component. --calcite-input-prefix-background-color: defines the prefix background color in the component. --calcite-input-suffix-text-color: defines the suffix text color in the component. --calcite-input-suffix-background-color: defines the suffix background color in the component. --calcite-input-placeholder-text-color: defines the color of placeholder text in the component. --calcite-input-shadow: defines the box-shadow of the component. ```
**Related Issue:** #7180 ## Summary Adds the following component tokens (CSS props): * `--calcite-switch-handle-background-color` * `--calcite-switch-handle-border-color` * `--calcite-switch-track-background-color` * `--calcite-switch-track-border-color` * `--calcite-switch-corner-radius` * `--calcite-switch-shadow`
**Related Issue:** #7180 ## Summary Make some fixes to the link component tokens to pass E2E tests. Also removes an extraneous unused class from the shadow DOM of the link component.
**Related Issue:** #7180 ## Summary This selects the correct component within the shadow dom. The previous selector included the components <style> tag.
**Related Issue:** #7180 ## Summary The previous selector included the component’s style tag. This allows the test to pass.
**Related Issue:** #7180 ## Summary I don’t know why but adding three items always resulted in an overflow on my machine. I don’t think this change alters the actual intent of the test but it does allow it to pass locally.
**Related Issue:** #7180 ## Summary Adds Checkbox Component tokens
…180-component-tokens
…180-component-tokens
…180-component-tokens # Conflicts: # packages/calcite-components/src/components/card/card.scss # packages/calcite-components/src/components/card/card.stories.ts # packages/calcite-components/src/demos/card.html
**Related Issue:** #7180 ## Summary Adds the following component tokens: ``` --calcite-tabs-background-color --calcite-tabs-border-color ```
**Related Issue:** #7180 ## Summary Refactors avatar for component tokens ### Avatar --calcite-avatar-corner-radius: defines the corner radius of the component. --calcite-avatar-text-color: defines the text color of the component. ### Navigation User --calcite-navigation-user-avatar-corner-radius: defines the corner radius of the component. --calcite-navigation-user-avatar-text-color: defines the text color of the component.
**Related Issue:** #7180 ## Summary Add token theming tests for `shell-center-row`.
**Related Issue:** #7180 ## Summary Made sure components were UTD with /dev to reduce merge conflict churn Updates component tokens Update e2e themed tests
**Related Issue:** #7180 ## Summary Adds token theme tests for `calcite-inline-editable`.
**Related Issue:** #7180 ## Summary Adds token tests for theming to `calcite-rating`.
…80-component-tokens # Conflicts: # packages/calcite-components/src/components/filter/resources.ts # packages/calcite-components/src/components/flow-item/flow-item.e2e.ts # packages/calcite-components/src/components/panel/panel.scss # packages/calcite-components/src/components/panel/panel.stories.ts
**Related Issue:** #9644 ## Summary themed demo helper
…components into epic/7180-component-tokens
# Summary Reset the Chromatic baseline of the epic branch due to invalid snapshots being accepted. The baseline auto accept is disabled until the snapshots issues are resolved. **Snapshots need to be approved/rejected on both the pull request and the squashed commit on `epic/7180-component-tokens`. Things can get out of sync again if the new baseline on the epic branch is not accepted/rejected after installing a PR.** ref: https://www.chromatic.com/docs/branching-and-baselines/#what-if-you-accidentally-reset-your-baselines-and-are-seeing-onl
**Related Issue:** #7180 ## Summary Add theme and spacer helpers to all pages
This was referenced Jul 12, 2024
|
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. |
github-actions
bot
added
the
Stale
|
Closing as we are tackling component tokens in smaller chunks. Thanks, everyone! ✨💪✨ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related Issue: #7180
Summary
Component Tokens