feat(date-picker): add component tokens #11380
Merged
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
github-actions
bot
added
the
enhancement
|
@alisonailea can we add a core token for box-shadow here |
anveshmekala
added
the
pr ready for visual snapshots
driskull
reviewed
Jan 29, 2025
| block-size: var(--calcite-internal-day-size); | ||
| outline-color: var(--calcite-color-transparent); | ||
| background: var(--calcite-date-picker-day-background-color, none); |
There was a problem hiding this comment.
Should this be background-color so that the token isn't allowed to do other background things? I wonder why none is even necessary?
There was a problem hiding this comment.
It should be background-color and default value isn't required.
| @@ -99,8 +99,7 @@ select:disabled { | |||
| @apply border-color-input text-color-2 pointer-events-none absolute inset-y-0 flex items-center border-0 border-solid bg-transparent; | |||
| inset-inline-end: theme("inset.0"); | |||
| border-color: var(--calcite-select-border-color, var(--calcite-color-border-input)); | |||
| border-inline-width: theme("borderWidth.0") | |||
| var(--calcite-select-internal-icon-border-inline-end-width, theme("borderWidth.DEFAULT")); | |||
| border-inline-width: theme("borderWidth.0") theme("borderWidth.DEFAULT"); | |||
There was a problem hiding this comment.
nitpick: can we use tokens here instead of the theme() if possible?
There was a problem hiding this comment.
Would select modifications be out of scope?
There was a problem hiding this comment.
In terms of tokens, there is scope for refactoring internal tokens in select added as part of date-picker enhancement.
(Ex: using border-color instead of border-width
anveshmekala
added
pr ready for visual snapshots
anveshmekala
added
pr ready for visual snapshots
anveshmekala
added
pr ready for visual snapshots
|
screenshot changes are expected due to change in border-width for month select menu. In current version, border-width is set to |
driskull
approved these changes
Jan 30, 2025
There was a problem hiding this comment.
LGTM! Should we get another review before merging? Maybe @alisonailea
If we need to consider a new box shadow can you open an issue and/or post in the tokens channel so we can discuss it with the rest of design? |
|
Chromatic test diffs look good as well. Thanks @anveshmekala! LGTM! |
alisonailea
approved these changes
Feb 3, 2025
Actually can you comment on this issue #10050 which design is using to review shadow tokens? |
anveshmekala
added
pr ready for visual snapshots
anveshmekala
added
pr ready for visual snapshots
anveshmekala
added
pr ready for visual snapshots
github-actions
bot
added this to the 2025-02-06 - 3.0.0 Feb Breaking Change Release milestone
benelan
pushed a commit
that referenced
this pull request
Feb 8, 2025
**Related Issue:** #7180 ## Summary Adds following tokens for `calcite-date-picker` component: `--calcite-date-picker-border-color`: Specifies the component's border color. `--calcite-date-picker-corner-radius`: Specifies the component's border radius. `--calcite-date-picker-range-calendar-divider-color`: Specifies the divider color between calendar's when `range="true"`. `--calcite-date-picker-week-header-text-color`: Specifies the week header text color. `--calcite-date-picker-header-action-background-color`: Specifies the background color of header action's of the component. `--calcite-date-picker-header-action-background-color-hover`: Specifies the background color of header action's of the component when hovered. `--calcite-date-picker-header-action-background-color-press`: Specifies the background color of header action's of the component when pressed. `--calcite-date-picker-header-action-text-color`: Specifies the text color of header action's of the component. `--calcite-date-picker-header-action-text-color-press`: Specifies the text color of header action's of the component when pressed. `--calcite-date-picker-year-text-color`: Specifies the text color of year & suffix of the component. `--calcite-date-picker-month-select-font-size`: Specifies the font size of month select of the component. `--calcite-date-picker-month-select-text-color`: Specifies the text color of month select of the component. `--calcite-date-picker-month-select-icon-color`: Specifies the icon color of month select of the component. `--calcite-date-picker-month-select-icon-color-hover`: Specifies the icon color of month select of the component when hovered. `--calcite-date-picker-day-background-color`: Specifies the background color of day of the component. `--calcite-date-picker-day-background-color-hover`: Specifies the background color of day of the component when hovered. `--calcite-date-picker-day-text-color`: Specifies the text color of day of the component. `--calcite-date-picker-day-text-color-hover`: Specifies the text color of day of the component when hovered. `--calcite-date-picker-current-day-text-color`: Specifies the text color of current day of the component. `--calcite-date-picker-day-background-color-selected`: Specifies the background color of selected day of the component. `--calcite-date-picker-day-text-color-selected`: Specifies the text color of selected day of the component. `--calcite-date-picker-day-range-text-color`: Specifies the text color of select day range of the component. `--calcite-date-picker-day-range-background-color`: Specifies the background color of select day range of the component. `--calcite-date-picker-day-outside-range-background-color-hover`: Specifies the background color of day's outside current range when hovered. `--calcite-date-picker-day-outside-range-text-color-hover`: Specifies the text color of day's outside current range when hovered.
Merged
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
Adds following tokens for
calcite-date-pickercomponent:--calcite-date-picker-border-color: Specifies the component's border color.--calcite-date-picker-corner-radius: Specifies the component's border radius.--calcite-date-picker-range-calendar-divider-color: Specifies the divider color between calendar's whenrange="true".--calcite-date-picker-week-header-text-color: Specifies the week header text color.--calcite-date-picker-header-action-background-color: Specifies the background color of header action's of the component.--calcite-date-picker-header-action-background-color-hover: Specifies the background color of header action's of the component when hovered.--calcite-date-picker-header-action-background-color-press: Specifies the background color of header action's of the component when pressed.--calcite-date-picker-header-action-text-color: Specifies the text color of header action's of the component.--calcite-date-picker-header-action-text-color-press: Specifies the text color of header action's of the component when pressed.--calcite-date-picker-year-text-color: Specifies the text color of year & suffix of the component.--calcite-date-picker-month-select-font-size: Specifies the font size of month select of the component.--calcite-date-picker-month-select-text-color: Specifies the text color of month select of the component.--calcite-date-picker-month-select-icon-color: Specifies the icon color of month select of the component.--calcite-date-picker-month-select-icon-color-hover: Specifies the icon color of month select of the component when hovered.--calcite-date-picker-day-background-color: Specifies the background color of day of the component.--calcite-date-picker-day-background-color-hover: Specifies the background color of day of the component when hovered.--calcite-date-picker-day-text-color: Specifies the text color of day of the component.--calcite-date-picker-day-text-color-hover: Specifies the text color of day of the component when hovered.--calcite-date-picker-current-day-text-color: Specifies the text color of current day of the component.--calcite-date-picker-day-background-color-selected: Specifies the background color of selected day of the component.--calcite-date-picker-day-text-color-selected: Specifies the text color of selected day of the component.--calcite-date-picker-day-range-text-color: Specifies the text color of select day range of the component.--calcite-date-picker-day-range-background-color: Specifies the background color of select day range of the component.--calcite-date-picker-day-outside-range-background-color-hover: Specifies the background color of day's outside current range when hovered.--calcite-date-picker-day-outside-range-text-color-hover: Specifies the text color of day's outside current range when hovered.