Skip to content

Commit 9ff157f

Browse files
desig9steindesig9stein
committed
refactor(calendar): refine inactive and selected state styles across themes
1 parent e6831b3 commit 9ff157f

File tree

4 files changed

+72
-17
lines changed

4 files changed

+72
-17
lines changed

‎src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,6 @@ $border-size: rem(1px);
7575
color: var-get($theme, 'weekend-color');
7676
}
7777

78-
[part~='inactive'] {
79-
color: var-get($theme, 'inactive-color');
80-
}
81-
8278
[part~='date'] {
8379
height: var-get($theme, 'size');
8480
border-top: $border-size solid transparent;
@@ -147,6 +143,10 @@ $border-size: rem(1px);
147143
border-color: var-get($theme, 'date-focus-border-color');
148144
}
149145

146+
&[part~='inactive']:not([part~='selected'][part~='range'], [part~='disabled']) {
147+
color: var-get($theme, 'inactive-color');
148+
}
149+
150150
&[part~='preview'][part~='first'],
151151
&[part~='preview'][part~='last'] {
152152
color: var-get($theme, 'date-selected-foreground');
@@ -448,3 +448,23 @@ $border-size: rem(1px);
448448
}
449449
}
450450
}
451+
452+
[part~='date-inner'][part~='selected'][part~='inactive'][part~='first'],
453+
[part~='date-inner'][part~='selected'][part~='inactive'][part~='last'] {
454+
color: var-get($theme, 'date-selected-foreground');
455+
background: var-get($theme, 'date-selected-background');
456+
border-color: var-get($theme, 'date-selected-border-color');
457+
458+
&:hover {
459+
color: var-get($theme, 'date-selected-hover-foreground');
460+
background: var-get($theme, 'date-selected-hover-background');
461+
border-color: var-get($theme, 'date-selected-hover-border-color');
462+
}
463+
464+
&:focus {
465+
color: var-get($theme, 'date-selected-focus-foreground');
466+
background: var-get($theme, 'date-selected-focus-background');
467+
border-color: var-get($theme, 'date-selected-focus-border-color');
468+
}
469+
}
470+

‎src/components/calendar/themes/shared/fluent/days-view.fluent.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
6868
height: var-get($theme, 'size');
6969
border-radius: var-get($theme, 'date-border-radius');
7070

71-
&[part~='inactive']:not([part~='selected']) {
71+
&[part~='inactive']:not([part~='selected'][part~='range']) {
7272
color: var-get($theme, 'inactive-color');
7373
}
7474

@@ -82,7 +82,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
8282
height: var-get($theme, 'inner-size');
8383
}
8484

85-
&[part~='disabled']:not([part~='special'],[part~='current']) {
85+
&[part~='disabled']:not([part~='special'],[part~='current'], [part~='disabled']) {
8686
color: var-get($theme, 'date-disabled-foreground');
8787
}
8888

‎src/components/calendar/themes/shared/indigo/days-view.indigo.scss‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -105,21 +105,15 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
105105
background: var-get($theme, 'date-hover-background');
106106
}
107107

108-
// inactive dates should not have different styles for selected, current or special states
109-
// so we reset everything to the inactive state.
110-
&[part~='inactive'] {
108+
&[part~='inactive']:not([part~='selected'][part~='range'], [part~='disabled']) {
111109
color: var-get($theme, 'inactive-color');
112-
113-
&:hover {
114-
color: var-get($theme, 'inactive-color');
115-
}
116110
}
117111

118112
&[part~='disabled']:not([part~='selected'],[part~='special'],[part~='current']) {
119113
color: var-get($theme, 'date-disabled-foreground');
120114
}
121115

122-
&[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current']) {
116+
&[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current'], [part~='preview']) {
123117
color: var-get($theme, 'date-disabled-range-foreground');
124118
}
125119
}
@@ -543,3 +537,22 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
543537
}
544538
}
545539
}
540+
541+
[part~='date-inner'][part~='selected'][part~='inactive'][part~='first'],
542+
[part~='date-inner'][part~='selected'][part~='inactive'][part~='last'] {
543+
color: var-get($theme, 'date-selected-foreground');
544+
background: var-get($theme, 'date-selected-background');
545+
border-color: var-get($theme, 'date-selected-border-color');
546+
547+
&:hover {
548+
color: var-get($theme, 'date-selected-hover-foreground');
549+
background: var-get($theme, 'date-selected-hover-background');
550+
border-color: var-get($theme, 'date-selected-hover-border-color');
551+
}
552+
553+
&:focus {
554+
color: var-get($theme, 'date-selected-focus-foreground');
555+
background: var-get($theme, 'date-selected-focus-background');
556+
border-color: var-get($theme, 'date-selected-focus-border-color');
557+
}
558+
}

‎src/components/calendar/themes/shared/material/days-view.material.scss‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -106,15 +106,16 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
106106
background: var-get($theme, 'date-hover-background');
107107
}
108108

109-
&[part~='inactive'] {
109+
&[part~='inactive']:not([part~='selected'][part~='range'], [part~='disabled']) {
110110
color: var-get($theme, 'inactive-color');
111111
}
112112

113113
&[part~='disabled']:not([part~='selected'],[part~='special'],[part~='current']) {
114114
color: var-get($theme, 'date-disabled-foreground');
115115
}
116116

117-
&[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current']) {
117+
&[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current'], [part~='preview']),
118+
&[part~='disabled'][part~='range'][part~='inactive']:not([part~='special'],[part~='current'], [part~='preview'], [part~='first'], [part~='last']) {
118119
color: var-get($theme, 'date-disabled-range-foreground');
119120
}
120121
}
@@ -298,6 +299,8 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
298299
}
299300
}
300301

302+
&[part~='selected'][part~='special'][part~='first'],
303+
&[part~='selected'][part~='special'][part~='last'],
301304
&[part~='special'][part~='range'][part~='first']:not([part~='preview']),
302305
&[part~='special'][part~='range'][part~='last']:not([part~='preview']) {
303306
&:hover {
@@ -358,7 +361,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
358361
}
359362

360363
// Dates inside the range, but not the first or last date of the range
361-
&[part~='range']:not([part~='first'], [part~='last'], [part~='preview']) {
364+
&[part~='range']:not([part~='first'], [part~='last'], [part~='preview'], [part~='disabled']) {
362365
color: var-get($theme, 'date-selected-range-foreground');
363366

364367
// Since for the idle: selected, current and special dates we have background, we need to
@@ -376,3 +379,22 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
376379
}
377380
}
378381
}
382+
383+
[part~='date-inner'][part~='selected'][part~='inactive'][part~='first'],
384+
[part~='date-inner'][part~='selected'][part~='inactive'][part~='last'] {
385+
color: var-get($theme, 'date-selected-foreground');
386+
background: var-get($theme, 'date-selected-background');
387+
border-color: var-get($theme, 'date-selected-border-color');
388+
389+
&:hover {
390+
color: var-get($theme, 'date-selected-hover-foreground');
391+
background: var-get($theme, 'date-selected-hover-background');
392+
border-color: var-get($theme, 'date-selected-hover-border-color');
393+
}
394+
395+
&:focus {
396+
color: var-get($theme, 'date-selected-focus-foreground');
397+
background: var-get($theme, 'date-selected-focus-background');
398+
border-color: var-get($theme, 'date-selected-focus-border-color');
399+
}
400+
}

0 commit comments

Comments
 (0)