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(date-picker): add component tokens #8822

Conversation

anveshmekala
Copy link
Contributor

@anveshmekala anveshmekala commented Feb 22, 2024

Related Issue: #

Summary

Adds following tokens for calcite-date-picker component.

 @prop --calcite-date-picker-border-color: Specifies the border color of the component.
 @prop --calcite-date-picker-border-radius: Specifies the border radius of the component.
 @prop --calcite-date-picker-day-background-color-hover: Specifies the background color of the day when hovered.
 @prop --calcite-date-picker-day-background-color-selected: Specifies the background color of the day when selected.
 @prop --calcite-date-picker-day-background-color: Specifies the background color of the day.
 @prop --calcite-date-picker-day-corner-radius: Specifies the corner radius of day.
 @prop --calcite-date-picker-day-font-size: Specifies the font size of the day.
 @prop --calcite-date-picker-day-range-background-color-hover: Specifies the background color of day range when hovered.
 @prop --calcite-date-picker-day-range-background-color-selected: Specifies the background color of day range when selected.
 @prop --calcite-date-picker-day-text-color-hover: Specifies the text color of day when hovered.
 @prop --calcite-date-picker-day-text-color: Specifies the text color of day.
 @prop --calcite-date-picker-day-text-selected: Specifies the text color of day when selected.
 @prop --calcite-date-picker-week-headers-border-color: Specifies the border color of week headers.
 @prop --calcite-date-picker-week-headers-text-color: Specifies the text color of week headers.

@anveshmekala anveshmekala changed the title feat(date-picker-month): add component tokens feat(date-picker,date-picker-month): add component tokens Feb 23, 2024
@anveshmekala anveshmekala added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Feb 24, 2024
@anveshmekala anveshmekala 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 Feb 26, 2024
@anveshmekala anveshmekala 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 Feb 26, 2024
@anveshmekala anveshmekala changed the title feat(date-picker,date-picker-month): add component tokens feat(date-picker,date-picker-month,date-picker-day): add component tokens Feb 26, 2024
@anveshmekala anveshmekala 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 Feb 26, 2024
@anveshmekala anveshmekala changed the title feat(date-picker,date-picker-month,date-picker-day): add component tokens feat(date-picker): add component tokens Feb 26, 2024
@anveshmekala anveshmekala marked this pull request as ready for review February 26, 2024 23:59
@anveshmekala anveshmekala requested a review from a team as a code owner February 26, 2024 23:59
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.

Getting there. Just a few things.

  • Remove "internal" from all component token names that are
    • Background color
    • color
    • border color
    • shadow (box-shadow)
    • icon color (fill/stroke)
    • corner radius (border-radius)
  • Make sure none of the above tokens are assigned values like on date-picker-day.scss:161
  • add some docs to date-picker-day.scss.

@anveshmekala anveshmekala 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 Mar 1, 2024
@anveshmekala anveshmekala 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 Mar 1, 2024
@anveshmekala anveshmekala 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 Mar 1, 2024
@anveshmekala anveshmekala requested a review from alisonailea March 1, 2024 23:26
@anveshmekala anveshmekala 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 Mar 5, 2024
@anveshmekala anveshmekala merged commit 4674100 into epic/7180-component-tokens Mar 5, 2024
8 checks passed
@anveshmekala anveshmekala deleted the anveshmekala/71890-date-picker-month-add-component-tokens branch March 5, 2024 16:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants