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.

Sign up for GitHub

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-day): add component tokens #8793

Closed
wants to merge 12 commits into from
Closed

feat(date-picker-day): add component tokens #8793

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e30ecee
feat(date-picker-day): add component tokens
anveshmekala Feb 21, 2024
d59815e
add token for background-color
anveshmekala Feb 21, 2024
435cbef
refactor
anveshmekala Feb 21, 2024
03393ad
fix regression
anveshmekala Feb 22, 2024
137651a
fix padding scale
anveshmekala Feb 22, 2024
c629af8
clean up
anveshmekala Feb 22, 2024
5b2541d
Merge branch 'epic/7180-component-tokens' into anveshmekala/71890-dat…
anveshmekala Feb 22, 2024
07cf5d7
Merge branch 'epic/7180-component-tokens' into anveshmekala/71890-dat…
anveshmekala Feb 22, 2024
ae66260
restore line-height for day
anveshmekala Feb 22, 2024
234eb31
restore tailwind util classes
anveshmekala Feb 22, 2024
31e380b
refactor
anveshmekala Feb 23, 2024
2570456
fix build errors
anveshmekala Feb 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 35 additions & 31 deletions packages/calcite-components/src/components/date-picker-day/date-picker-day.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
:host {
@apply cursor-pointer flex relative text-color-3;
@apply cursor-pointer flex relative;
color: var(--calcite-internal-day-text-color, var(--calcite-color-text-3));
}

@include disabled();
Expand Down Expand Up @@ -42,11 +43,11 @@
@mixin range-part-middle() {
&:before {
inset-inline-end: 50%;
border-radius: 0;
border-radius: var(--calcite-corner-radius);
}
&:after {
inset-inline-start: 50%;
border-radius: 0;
border-radius: var(--calcite-corner-radius);
}
}

Expand All @@ -56,9 +57,9 @@

.day-wrapper {
@apply flex
flex-col
items-center
relative;
flex-col
items-center
relative;
}

:host([range]),
Expand All @@ -69,77 +70,81 @@
}

.day {
@apply text-n2h
text-color-3
flex
@apply flex
transition-default
focus-base
items-center
justify-center
rounded-full
leading-none
transition-default
z-default;
transition-default;
color: var(--calcite-internal-day-text-color);
font-size: var(--calcite-internal-day-font-size, var(--calcite-font-size));
z-index: var(--calcite-z-index);
background: none;
background-color: var(--calcite-internal-day-background-color, var(--calcite-color-background-none));
box-shadow: 0 0 0 2px transparent;
block-size: var(--calcite-internal-day-size);
inline-size: var(--calcite-internal-day-size);
}

.text {
@apply mt-px mb-0;
margin-inline-start: theme("spacing.0");
margin-block-start: var(--calcite-spacing-px);
margin-block-end: 0;
margin-inline-start: 0;
}

:host([scale="s"]) {
--calcite-internal-day-size: 27px;

.day-v-wrapper {
@apply py-0.5;
padding-block: var(--calcite-spacing-base);
}
.day-wrapper {
@apply p-0;
padding: 0;
}
.day {
@apply text-n2;
--calcite-internal-day-font-size: var(--calcite-font-size-sm);
}
}

:host([scale="m"]) {
--calcite-internal-day-size: 33px;

.day-v-wrapper {
@apply py-1;
padding-block: var(--calcite-spacing-xxs);
}
.day-wrapper {
@apply p-0;
padding: 0;
}
.day {
@apply text-n1;
--calcite-internal-day-font-size: var(--calcite-font-size);
}
}

:host([scale="l"]) {
--calcite-internal-day-size: 43px;

.day-v-wrapper {
@apply py-1;
padding-block: var(--calcite-spacing-xxs);
}
.day-wrapper {
@apply px-1;
padding-inline: var(--calcite-spacing-xxs);
}
.day {
@apply text-0;
--calcite-internal-day-font-size: var(--calcite-font-size-md);
}
}

:host(:not([current-month])) .day {
@apply opacity-disabled;
opacity: var(--calcite-opacity-disabled);
}

:host(:hover:not([disabled]):not([selected])),
:host([active]:not([range]):not([selected])) {
& .day {
@apply bg-foreground-2 text-color-1;
--calcite-internal-day-background-color: var(--calcite-color-foreground-2);
color: var(--calcite-internal-day-text-color-active, var(--calcite-color-text-1));
}
}

Expand All @@ -153,9 +158,9 @@
}

:host([selected]) .day {
@apply font-medium;
background-color: var(--calcite-color-brand);
color: var(--calcite-color-foreground-1);
font-weight: var(--calcite-font-weight-medium);
color: var(--calcite-internal-day-text-color-selected, var(--calcite-color-text-inverse));
--calcite-internal-day-background-color: var(--calcite-color-brand);
}

:host(:focus:not([disabled])),
Expand All @@ -171,9 +176,8 @@
.day-wrapper {
@include range-part-middle();
}

.day {
@apply text-color-1;
color: var(--calcite-internal-day-text-color-active, var(--calcite-color-text-1));
}
}

Expand All @@ -191,7 +195,7 @@
.day-wrapper {
&:before,
&:after {
@apply bg-foreground-2;
background-color: var(--calcite-color-foreground-2);
}
}
}
Expand Down Expand Up @@ -240,7 +244,7 @@

@media (forced-colors: active) {
.day {
@apply rounded-none;
border-radius: var(--calcite-corner-radius);
}

:host([selected]) {
Expand Down
Loading