Skip to content

Commit a8707ef

Browse files
desig9steindesig9stein
committed
fix(calendar): refine range and special date styles across themes
- Adjust colors for special and range states (hover, focus, border). - Move certain transparent styles to a separate selector for clarity. - Add and refine special+current and special+selected combinations. - Update border styles for consistency.
1 parent 1b96667 commit a8707ef

File tree

3 files changed

+138
-77
lines changed

3 files changed

+138
-77
lines changed

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

Lines changed: 109 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -68,16 +68,6 @@ $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-
&::after {
72-
content: '';
73-
position: absolute;
74-
z-index: 0;
75-
border: $border-size solid transparent;
76-
border-radius: inherit;
77-
width: var-get($theme, 'inner-size');
78-
height: var-get($theme, 'inner-size');
79-
}
80-
8171
&[part~='inactive']:not([part~='selected'][part~='range']) {
8272
color: var-get($theme, 'inactive-color');
8373
}
@@ -88,7 +78,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
8878
}
8979
}
9080

91-
&[part~='disabled']:not([part~='special'],[part~='current'], [part~='disabled']) {
81+
&[part~='disabled']:not([part~='special'],[part~='current']) {
9282
color: var-get($theme, 'date-disabled-foreground');
9383
}
9484

@@ -147,23 +137,18 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
147137
[part~='date-inner']:not([part~='inactive']) {
148138
border-color: var-get($theme, 'date-border-color');
149139

150-
&::after {
151-
content: '';
152-
position: absolute;
153-
z-index: 0;
154-
border: $border-size solid transparent;
155-
width: var-get($theme, 'inner-size');
156-
height: var-get($theme, 'inner-size');
157-
}
158-
159140
// This selector works only in range selection since firs and last are present only in the range selection
160141
&[part~='selected'][part~='first'][part~='last'] {
161142
background: transparent;
162143
border-color: var-get($theme, 'date-range-preview-border-color');
163-
}
164144

145+
&:hover,
146+
&:focus {
147+
background: transparent;
148+
}
149+
}
165150

166-
&[part~='selected']:not([part~='range']) {
151+
&[part~='selected']:where(:not([part~='range'])) {
167152
color: var-get($theme, 'date-selected-foreground');
168153
background: var-get($theme, 'date-selected-background');
169154
border-color: var-get($theme, 'date-selected-border-color');
@@ -255,20 +240,90 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
255240
}
256241
}
257242

258-
&[part~='current'] {
259-
position: relative;
260-
overflow: hidden;
261-
color: var-get($theme, 'date-current-foreground');
243+
// SPECIAL
244+
&[part~='special'] {
245+
&::after {
246+
content: '';
247+
position: absolute;
248+
z-index: -1;
249+
border: $border-size solid transparent;
250+
width: var-get($theme, 'inner-size');
251+
height: var-get($theme, 'inner-size');
252+
}
253+
}
254+
255+
&[part~='special']:not([part~='selected'], [part~='current']) {
256+
color: var-get($theme, 'date-special-foreground');
257+
258+
&::after {
259+
background: var-get($theme, 'date-special-background');
260+
border-color: var-get($theme, 'date-special-border-color')
261+
}
262+
263+
&:hover {
264+
color: var-get($theme, 'date-special-hover-foreground');
265+
266+
&::after {
267+
background: var-get($theme, 'date-special-hover-background');
268+
border-color: var-get($theme, 'date-special-hover-border-color')
269+
}
270+
}
271+
272+
&:focus {
273+
color: var-get($theme, 'date-special-focus-foreground');
274+
275+
&::after {
276+
background: var-get($theme, 'date-special-focus-background');
277+
border-color: var-get($theme, 'date-special-hover-border-color')
278+
}
279+
}
280+
}
281+
282+
&[part~='special'][part~='selected']:not([part~='current']) {
283+
color: var-get($theme, 'date-selected-special-foreground');
284+
285+
&::after {
286+
background: var-get($theme, 'date-selected-special-background');
287+
border-color: var-get($theme, 'date-selected-special-border-color');
288+
}
289+
290+
&:hover {
291+
color: var-get($theme, 'date-selected-special-hover-foreground');
292+
293+
&::after {
294+
background: var-get($theme, 'date-selected-special-hover-background');
295+
border-color: var-get($theme, 'date-selected-special-hover-border-color');
296+
}
297+
}
298+
299+
&:focus {
300+
color: var-get($theme, 'date-selected-special-focus-foreground');
301+
302+
&::after {
303+
background: var-get($theme, 'date-selected-special-focus-background');
304+
border-color: var-get($theme, 'date-selected-special-focus-border-color');
305+
}
306+
}
307+
}
262308

309+
// CURRENT
310+
&[part~='current'] {
263311
&::before {
264312
content: '';
265313
position: absolute;
266314
z-index: -1;
267315
width: var-get($theme, 'inner-size');
268316
height: var-get($theme, 'inner-size');
269317
background: var-get($theme, 'date-current-background');
270-
border-color: var-get($theme, 'date-current-border-color');
318+
border: 1px solid var-get($theme, 'date-current-border-color');
319+
box-sizing: border-box;
271320
}
321+
}
322+
323+
&[part~='current']:not([part~='selected'], [part~='special']) {
324+
position: relative;
325+
overflow: hidden;
326+
color: var-get($theme, 'date-current-foreground');
272327

273328
&:hover {
274329
color: var-get($theme, 'date-current-hover-foreground');
@@ -289,7 +344,9 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
289344
}
290345
}
291346

292-
&[part~='selected'][part~='current'] {
347+
&[part~='current'][part~='selected']:not([part~='special']) {
348+
color: var-get($theme, 'date-selected-current-foreground');
349+
293350
&::before {
294351
background: var-get($theme, 'date-selected-current-background');
295352
border-color: var-get($theme, 'date-selected-current-border-color');
@@ -310,72 +367,62 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
310367
}
311368
}
312369

313-
&[part~='special'] {
314-
color: var-get($theme, 'date-special-foreground');
315-
background: var-get($theme, 'date-special-background');
316-
370+
// CURRENT + SPECIAL
371+
&[part~='current'][part~='special'] {
317372
&::after {
318-
border-color: var-get($theme, 'date-special-border-color')
319-
}
320-
321-
&:hover {
322-
color: var-get($theme, 'date-hover-foreground');
323-
background: var-get($theme, 'date-hover-background');
324-
325-
&::after {
326-
border-color: var-get($theme, 'date-special-hover-border-color')
327-
}
328-
}
329-
330-
&:focus {
331-
color: var-get($theme, 'date-focus-foreground');
332-
background: var-get($theme, 'date-focus-background');
333-
334-
&::after {
335-
border-color: var-get($theme, 'date-special-hover-border-color')
336-
}
373+
width: calc(var-get($theme, 'inner-size') - #{rem(4px)});
374+
height: calc(var-get($theme, 'inner-size') - #{rem(4px)});
337375
}
338376
}
339377

340-
&[part~='selected'][part~='special'] {
378+
&[part~='current'][part~='special']:not([part~='selected']) {
379+
color: var-get($theme, 'date-current-foreground');
380+
341381
&::after {
342-
border-color: var-get($theme, 'date-selected-special-border-color');
382+
background: var-get($theme, 'date-current-background');
383+
border-color: var-get($theme, 'date-current-foreground');
343384
}
344385

345386
&:hover {
387+
color: var-get($theme, 'date-current-hover-foreground');
388+
346389
&::after {
347-
border-color: var-get($theme, 'date-selected-special-hover-border-color');
390+
background: var-get($theme, 'date-current-hover-background');
391+
border-color: var-get($theme, 'date-current-hover-foreground');
348392
}
349393
}
350394

351395
&:focus {
396+
color: var-get($theme, 'date-current-focus-foreground');
397+
352398
&::after {
353-
border-color: var-get($theme, 'date-selected-special-focus-border-color');
399+
background: var-get($theme, 'date-current-focus-background');
400+
border-color: var-get($theme, 'date-current-focus-foreground');
354401
}
355402
}
356403
}
357404

358-
&[part~='current'][part~='special'] {
359-
color: var-get($theme, 'date-current-foreground');
405+
&[part~='current'][part~='special'][part~='selected'] {
406+
color: var-get($theme, 'date-selected-current-foreground');
360407

361408
&::after {
409+
background: var-get($theme, 'date-selected-current-background');
362410
border-color: var-get($theme, 'date-selected-current-foreground');
363-
width: calc(var-get($theme, 'inner-size') - #{rem(4px)});
364-
height: calc(var-get($theme, 'inner-size') - #{rem(4px)});
365411
}
366412

367413
&:hover {
368-
color: var-get($theme, 'date-current-hover-foreground');
414+
color: var-get($theme, 'date-selected-current-hover-foreground');
369415

370416
&::after {
371-
border-color: var-get($theme, 'date-selected-current-hover-foreground');
417+
background: var-get($theme, 'date-selected-current-hover-background');
372418
}
373419
}
374420

375421
&:focus {
376-
color: var-get($theme, 'date-current-focus-foreground');
422+
color: var-get($theme, 'date-selected-current-focus-foreground');
377423

378424
&::after {
425+
background: var-get($theme, 'date-selected-current-focus-background');
379426
border-color: var-get($theme, 'date-selected-current-focus-foreground');
380427
}
381428
}

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,13 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
5555

5656
&[part~='range'] {
5757
background: var-get($theme, 'date-selected-range-background');
58+
border-block: $border-width solid var-get($theme, 'date-range-border-color');
5859
}
5960

6061
&[part~='range'][part~='first'],
6162
&[part~='range'][part~='last'] {
6263
background: transparent;
64+
border-block: transparent;
6365

6466
&::before {
6567
height: var-get($theme, 'size');
@@ -71,6 +73,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
7173
&::after {
7274
height: var-get($theme, 'size');
7375
background: var-get($theme, 'date-selected-range-background');
76+
border-block: $border-width solid var-get($theme, 'date-range-border-color');
7477
}
7578
}
7679

@@ -135,7 +138,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
135138
color: var-get($theme, 'date-disabled-foreground');
136139
}
137140

138-
&[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current'], [part~='preview']) {
141+
&[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current'], [part~='preview'], [part~='first'], [part~='last']) {
139142
color: var-get($theme, 'date-disabled-range-foreground');
140143
}
141144

@@ -198,15 +201,18 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
198201
&[part~='selected'] {
199202
color: var-get($theme, 'date-selected-foreground');
200203
background: var-get($theme, 'date-selected-background');
204+
border-color: var-get($theme, 'date-selected-border-color');
201205

202206
&:hover {
203207
color: var-get($theme, 'date-selected-hover-foreground');
204208
background: var-get($theme, 'date-selected-hover-background');
209+
border-color: var-get($theme, 'date-selected-hover-border-color');
205210
}
206211

207212
&:focus {
208213
color: var-get($theme, 'date-selected-focus-foreground');
209214
background: var-get($theme, 'date-selected-focus-background');
215+
border-color: var-get($theme, 'date-selected-focus-border-color');
210216
}
211217

212218
&[part~='range'][part~='special'][part~='first'],
@@ -234,7 +240,6 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
234240

235241
&[part~='range'] {
236242
color: var-get($theme, 'date-selected-range-foreground');
237-
background: transparent;
238243

239244
&:hover {
240245
color: var-get($theme, 'date-selected-range-hover-foreground');
@@ -597,6 +602,12 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
597602
height: var-get($theme, 'inner-size');
598603
}
599604
}
605+
606+
607+
&[part~='range']:not([part~='first'], [part~='last'], [part~='preview'], [part~='special'], [part~='current']) {
608+
background: transparent;
609+
border-color: transparent;
610+
}
600611
}
601612

602613
[part~='date-inner'][part~='selected'][part~='inactive'][part~='first'],

0 commit comments

Comments
 (0)