From 634a5c471060afb5b4482a28c633e8afc6230c2f Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 16 Oct 2025 10:33:30 +0300 Subject: [PATCH 01/31] refactor(calendar): remove repeating schemas --- src/components/calendar/themes/days.ts | 34 +++++--------------- src/components/calendar/themes/year-month.ts | 34 +++++--------------- 2 files changed, 16 insertions(+), 52 deletions(-) diff --git a/src/components/calendar/themes/days.ts b/src/components/calendar/themes/days.ts index d6a76671b..8fb0b974d 100644 --- a/src/components/calendar/themes/days.ts +++ b/src/components/calendar/themes/days.ts @@ -1,56 +1,38 @@ import { css } from 'lit'; import type { Themes } from '../../../theming/types.js'; -// Dark Overrides -import { styles as bootstrapDark } from './dark/calendar.bootstrap.css.js'; -import { styles as fluentDark } from './dark/calendar.fluent.css.js'; -import { styles as indigoDark } from './dark/calendar.indigo.css.js'; -import { styles as materialDark } from './dark/calendar.material.css.js'; -// Light Overrides -import { styles as bootstrapLight } from './light/calendar.bootstrap.css.js'; -import { styles as fluentLight } from './light/calendar.fluent.css.js'; -import { styles as indigoLight } from './light/calendar.indigo.css.js'; -import { styles as materialLight } from './light/calendar.material.css.js'; -import { styles as shared } from './light/calendar.shared.css.js'; -// Shared Styles import { styles as bootstrap } from './shared/bootstrap/days-view.bootstrap.css.js'; import { styles as fluent } from './shared/fluent/days-view.fluent.css.js'; import { styles as indigo } from './shared/indigo/days-view.indigo.css.js'; import { styles as material } from './shared/material/days-view.material.css.js'; const light = { - shared: css` - ${shared} - `, bootstrap: css` - ${bootstrap} ${bootstrapLight} + ${bootstrap} `, material: css` - ${material} ${materialLight} + ${material} `, fluent: css` - ${fluent} ${fluentLight} + ${fluent} `, indigo: css` - ${indigo} ${indigoLight} + ${indigo} `, }; const dark = { - shared: css` - ${shared} - `, bootstrap: css` - ${bootstrap} ${bootstrapDark} + ${bootstrap} `, material: css` - ${material} ${materialDark} + ${material} `, fluent: css` - ${fluent} ${fluentDark} + ${fluent} `, indigo: css` - ${indigo} ${indigoDark} + ${indigo} `, }; diff --git a/src/components/calendar/themes/year-month.ts b/src/components/calendar/themes/year-month.ts index 26ff42874..5fa6ec2bc 100644 --- a/src/components/calendar/themes/year-month.ts +++ b/src/components/calendar/themes/year-month.ts @@ -1,56 +1,38 @@ import { css } from 'lit'; import type { Themes } from '../../../theming/types.js'; -// Dark Overrides -import { styles as bootstrapDark } from './dark/calendar.bootstrap.css.js'; -import { styles as fluentDark } from './dark/calendar.fluent.css.js'; -import { styles as indigoDark } from './dark/calendar.indigo.css.js'; -import { styles as materialDark } from './dark/calendar.material.css.js'; -// Light Overrides -import { styles as bootstrapLight } from './light/calendar.bootstrap.css.js'; -import { styles as fluentLight } from './light/calendar.fluent.css.js'; -import { styles as indigoLight } from './light/calendar.indigo.css.js'; -import { styles as materialLight } from './light/calendar.material.css.js'; -import { styles as shared } from './light/calendar.shared.css.js'; -// Shared Styles import { styles as bootstrap } from './shared/bootstrap/year-month-view.bootstrap.css.js'; import { styles as fluent } from './shared/fluent/year-month-view.fluent.css.js'; import { styles as indigo } from './shared/indigo/year-month-view.indigo.css.js'; import { styles as material } from './shared/material/year-month-view.material.css.js'; const light = { - shared: css` - ${shared} - `, bootstrap: css` - ${bootstrap} ${bootstrapLight} + ${bootstrap} `, material: css` - ${material} ${materialLight} + ${material} `, fluent: css` - ${fluent} ${fluentLight} + ${fluent} `, indigo: css` - ${indigo} ${indigoLight} + ${indigo} `, }; const dark = { - shared: css` - ${shared} - `, bootstrap: css` - ${bootstrap} ${bootstrapDark} + ${bootstrap} `, material: css` - ${material} ${materialDark} + ${material} `, fluent: css` - ${fluent} ${fluentDark} + ${fluent} `, indigo: css` - ${indigo} ${indigoDark} + ${indigo} `, }; From 0cfc90327275a19046bcda3d072e83be5f8d34d3 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 16 Oct 2025 10:34:27 +0300 Subject: [PATCH 02/31] refactor(calendar): refactor material theme --- .../shared/material/days-view.material.scss | 379 ++++++++---------- 1 file changed, 176 insertions(+), 203 deletions(-) diff --git a/src/components/calendar/themes/shared/material/days-view.material.scss b/src/components/calendar/themes/shared/material/days-view.material.scss index 1ae853079..6c75c361f 100644 --- a/src/components/calendar/themes/shared/material/days-view.material.scss +++ b/src/components/calendar/themes/shared/material/days-view.material.scss @@ -3,9 +3,9 @@ $theme: $material; $border-width: rem(1px); +$inner-border-width: rem(1px); $week-number-radius: var-get($theme, 'week-number-border-radius'); - [part~='label'] { height: var-get($theme, 'size'); color: var-get($theme, 'weekday-color'); @@ -15,24 +15,12 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } } -[part~='weekend'] { - color: var-get($theme, 'weekend-color'); -} - -[part~='inactive'] { - color: var-get($theme, 'inactive-color'); - - &:hover { - color: var-get($theme, 'inactive-color'); - } -} - -[part='week-number-inner first'] { +[part~='week-number-inner'][part~='first'] { border-top-left-radius: $week-number-radius; border-top-right-radius: $week-number-radius; } -[part='week-number-inner last'] { +[part~='week-number-inner'][part~='last'] { border-bottom-left-radius: $week-number-radius; border-bottom-right-radius: $week-number-radius; } @@ -65,11 +53,13 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &[part~='range'] { background: var-get($theme, 'date-selected-range-background'); + border-block: rem(1px) solid var-get($theme, 'date-range-border-color'); } &[part~='range'][part~='first'], &[part~='range'][part~='last'] { background: transparent; + border-block-color: transparent; &::before { height: var-get($theme, 'size'); @@ -81,6 +71,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &::after { height: var-get($theme, 'size'); background: var-get($theme, 'date-selected-range-background'); + border-block: rem(1px) solid var-get($theme, 'date-range-border-color'); } } @@ -106,10 +97,51 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } [part~='date-inner'] { - border: rem(1px) solid var-get($theme, 'date-border-color'); - border-radius: var-get($theme, 'date-border-radius'); width: var-get($theme, 'size'); height: var-get($theme, 'size'); + border: $inner-border-width solid transparent; + border-radius: var-get($theme, 'date-border-radius'); + + &:hover { + background: var-get($theme, 'date-hover-background'); + } + + // inactive dates should not have different styles for selected, current or special states + // so we reset everything to the inactive state. + &[part~='inactive'] { + color: var-get($theme, 'inactive-color'); + + &:hover { + color: var-get($theme, 'inactive-color'); + } + } + + &[part~='disabled']:not([part~='selected'],[part~='special'],[part~='current']) { + color: var-get($theme, 'date-disabled-foreground'); + } + + &[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current']) { + color: var-get($theme, 'date-disabled-range-foreground'); + } +} + +[part~='date-inner']:not([part~='inactive']) { + border-color: var-get($theme, 'date-border-color'); + + &:hover { + color: var-get($theme, 'date-hover-foreground'); + border-color: var-get($theme, 'date-hover-border-color'); + } + + &:focus { + color: var-get($theme, 'date-focus-foreground'); + background: var-get($theme, 'date-focus-background'); + border-color: var-get($theme, 'date-focus-border-color'); + } + + [part~='weekend'] { + color: var-get($theme, 'weekend-color'); + } &[part~='selected'] { color: var-get($theme, 'date-selected-foreground'); @@ -127,106 +159,6 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); background: var-get($theme, 'date-selected-focus-background'); border-color: var-get($theme, 'date-selected-focus-border-color'); } - - &[part~='current'] { - color: var-get($theme, 'date-selected-current-foreground'); - background: var-get($theme, 'date-selected-current-background'); - border-color: var-get($theme, 'date-selected-current-border-color'); - - &:hover { - color: var-get($theme, 'date-selected-current-hover-foreground'); - background: var-get($theme, 'date-selected-current-hover-background'); - } - - &:focus { - color: var-get($theme, 'date-selected-current-focus-foreground'); - background: var-get($theme, 'date-selected-current-focus-background'); - } - } - - &[part~='current'][part~='range']:not([part~='last'], [part~='first']) { - color: var-get($theme, 'date-current-foreground'); - - &:focus { - border-color: var-get($theme, 'date-current-focus-border-color'); - } - } - - &[part~='range'] { - color: var-get($theme, 'date-selected-range-foreground'); - background: transparent; - - &:hover { - color: var-get($theme, 'date-selected-range-hover-foreground'); - background: var-get($theme, 'date-selected-range-hover-background'); - } - - &:focus { - color: var-get($theme, 'date-selected-range-focus-foreground'); - background: var-get($theme, 'date-selected-range-focus-background'); - } - } - - &[part~='first'], - &[part~='last'] { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); - - &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); - } - - &:focus { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); - } - } - - &[part~='special'] { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); - - &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); - - - /* stylelint-disable max-nesting-depth */ - &::after { - border-color: var-get($theme, 'date-selected-special-hover-border-color'); - } - /* stylelint-enable max-nesting-depth */ - } - - &:focus { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); - - /* stylelint-disable max-nesting-depth */ - &::after { - border-color: var-get($theme, 'date-selected-special-focus-border-color'); - } - /* stylelint-enable max-nesting-depth */ - } - - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); - } - } - } - - &[part~='disabled'] { - color: var-get($theme, 'date-disabled-foreground'); - - &[part~='first'], - &[part~='last'] { - color: var-get($theme, 'date-selected-foreground'); - } - } - - &[part~='disabled'][part~='range']:not([part~='preview']) { - color: var-get($theme, 'date-disabled-range-foreground'); } &[part~='current'] { @@ -247,6 +179,39 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } } + &[part~='selected'][part~='current'] { + color: var-get($theme, 'date-selected-current-foreground'); + background: var-get($theme, 'date-selected-current-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); + + &:hover { + color: var-get($theme, 'date-selected-current-hover-foreground'); + background: var-get($theme, 'date-selected-current-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + + &:focus { + color: var-get($theme, 'date-selected-current-focus-foreground'); + background: var-get($theme, 'date-selected-current-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + } + + &[part~='current'][part~='range']:not([part~='special'], [part~='last'], [part~='first'], [part~='preview']) { + color: var-get($theme, 'date-selected-current-range-foreground'); + background: var-get($theme, 'date-selected-current-range-background'); + + &:hover { + color: var-get($theme, 'date-selected-current-range-hover-foreground'); + background: var-get($theme, 'date-selected-current-range-hover-background'); + } + + &:focus { + color: var-get($theme, 'date-selected-current-range-foreground'); + background: var-get($theme, 'date-selected-current-range-focus-background'); + } + } + &[part~='special'] { color: var-get($theme, 'date-special-foreground'); background: var-get($theme, 'date-special-background'); @@ -255,7 +220,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); content: ""; position: absolute; z-index: 0; - border: rem(1px) solid var-get($theme, 'date-special-border-color'); + border: $inner-border-width solid var-get($theme, 'date-special-border-color'); border-radius: inherit; width: var-get($theme, 'size'); height: var-get($theme, 'size'); @@ -264,6 +229,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &:hover { color: var-get($theme, 'date-special-hover-foreground'); + background: var-get($theme, 'date-special-hover-background'); &::after { border-color: var-get($theme, 'date-special-hover-border-color') @@ -272,140 +238,147 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &:focus { color: var-get($theme, 'date-special-focus-foreground'); + background: var-get($theme, 'date-special-focus-background'); &::after { - border-color: var-get($theme, 'date-special-hover-border-color') + border-color: var-get($theme, 'date-special-focus-border-color') } } + } - &[part~='range']:not([part~='preview']) { - color: var-get($theme, 'date-special-range-foreground'); - background: var-get($theme, 'date-special-range-background'); + &[part~='selected'][part~='special'] { + color: var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-special-background'); - &::after { - border-color: var-get($theme, 'date-special-range-border-color'); - } + &::after { + border-color: var-get($theme, 'date-selected-special-border-color'); + } - &:hover { - color: var-get($theme, 'date-special-hover-foreground'); - background: var-get($theme, 'date-hover-background'); + &:hover { + color: var-get($theme, 'date-selected-special-hover-foreground'); + background: var-get($theme, 'date-selected-special-hover-background'); - // stylelint-disable-next-line - &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); - } + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); } + } - &:focus { - color: var-get($theme, 'date-special-focus-foreground'); - background: var-get($theme, 'date-focus-background'); + &:focus { + color: var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-special-focus-background'); - // stylelint-disable-next-line - &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); - } + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); } } + } - &[part~='range'][part~='first']:not([part~='preview']), - &[part~='range'][part~='last']:not([part~='preview']), - { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); + &[part~='special'][part~='range'] { + &:not([part~='preview']) { + color: var-get($theme, 'date-special-range-foreground'); + background: var-get($theme, 'date-special-range-background'); - &:hover { - background: var-get($theme, 'date-selected-hover-background'); + &::after { + border-color: var-get($theme, 'date-special-range-border-color'); } + } - &:focus { - background: var-get($theme, 'date-selected-focus-background'); - } + &:hover { + color: var-get($theme, 'date-special-range-hover-foreground'); + background: var-get($theme, 'date-special-range-hover-background'); + // stylelint-disable-next-line &::after { - border-color: var-get($theme, 'date-selected-foreground'); + border-color: var-get($theme, 'date-special-hover-border-color'); } } - &[part~='first'][part~='selected'], - &[part~='last'][part~='selected'], - &[part~='selected']:not([part~='range']), - &[part~='current'] { + &:focus { + color: var-get($theme, 'date-special-range-focus-foreground'); + background: var-get($theme, 'date-special-range-focus-background'); + + // stylelint-disable-next-line &::after { - width: var-get($theme, 'inner-size'); - height: var-get($theme, 'inner-size'); + border-color: var-get($theme, 'date-special-focus-border-color'); } } } - &:hover { - color: var-get($theme, 'date-hover-foreground'); - background: var-get($theme, 'date-hover-background'); - border-color: var-get($theme, 'date-hover-border-color'); - } + &[part~='special'][part~='range'][part~='first']:not([part~='preview']), + &[part~='special'][part~='range'][part~='last']:not([part~='preview']) { + &:hover { + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + } - &:focus { - color: var-get($theme, 'date-focus-foreground'); - background: var-get($theme, 'date-focus-background'); - border-color: var-get($theme, 'date-focus-border-color'); - } + &:focus { + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); + } + } - &[part~='inactive'] { &::after { - display: none; + border-color: var-get($theme, 'date-selected-special-border-color'); } + } - &:hover { - color: var-get($theme, 'inactive-color'); + // The ::after element is used for the special dates to create a border around them. + // For the selected + special, current + special dates and non-range special dates, + // we want the ::after element to be smaller than the date size, so we set it to inner-size. + // for the dates in a range, the ::after element should be the same size as the date, + // so we leave it as is (size). + &[part~='selected'][part~='special']:not([part~='range']), + &[part~='selected'][part~='special'][part~='first'], + &[part~='selected'][part~='special'][part~='last'], + &[part~='special'][part~='current']{ + &::after { + width: var-get($theme, 'inner-size'); + height: var-get($theme, 'inner-size'); } } - &[part~='inactive'][part~='selected']:not([part~='range']) { - color: var-get($theme, 'inactive-color'); - background: transparent; + + // This part is making sure that the first and last dates + // that are also inactive, current or special have the same styles as the normal selected date. + &[part~='selected'][part~='inactive'][part~='first'], + &[part~='selected'][part~='inactive'][part~='last'], + &[part~='selected'][part~='current'][part~='first'], + &[part~='selected'][part~='current'][part~='last'], + &[part~='selected'][part~='special'][part~='first'], + &[part~='selected'][part~='special'][part~='last'], + &[part~='selected'][part~='current'][part~='special'][part~='first'], + &[part~='selected'][part~='current'][part~='special'][part~='last'] { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); &:hover { - background: var-get($theme, 'date-hover-background'); - border-color: var-get($theme, 'date-hover-border-color'); + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); } - } - - &[part~='inactive'][part~='special'] { - color: var-get($theme, 'inactive-color'); - &:hover { - color: var-get($theme, 'inactive-color'); + &:focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); } } - &[part~='inactive'][part~='special'][part~='range'] { + // Dates inside the range, but not the first or last date of the range + &[part~='range']:not([part~='first'], [part~='last'], [part~='preview']) { color: var-get($theme, 'date-selected-range-foreground'); - &:hover { - color: var-get($theme, 'date-selected-range-foreground'); - } - } - - &[part~='inactive'][part~='current']:not([part~='range']) { - color: var-get($theme, 'inactive-color'); - border-color: transparent; + // Since for the idle: selected, current and special dates we have background, we need to + // override it here for the range dates, so the range background is visible. + background: transparent; &:hover { - background: var-get($theme, 'date-hover-background'); - border-color: var-get($theme, 'date-hover-border-color'); + color: var-get($theme, 'date-selected-range-hover-foreground'); + background: var-get($theme, 'date-selected-range-hover-background'); } - } - - &[part~='inactive'][part~='selected'][part~='current'] { - border-color: transparent; - } - - &[part~='inactive'][part~='selected'][part~='current']:not([part~='range']) { - background: transparent; - &:hover, &:focus { - background: var-get($theme, 'date-hover-background'); - border-color: var-get($theme, 'date-hover-border-color'); + color: var-get($theme, 'date-selected-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); } } } From 67c15c190752ed21f0f5711c0ba22a4cc9b2fcc1 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 16 Oct 2025 10:34:40 +0300 Subject: [PATCH 03/31] refactor(calendar): refactor indigo theme --- .../shared/indigo/days-view.indigo.scss | 577 ++++++++---------- 1 file changed, 255 insertions(+), 322 deletions(-) diff --git a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss index aa8de74e2..2b1d3177c 100644 --- a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss @@ -1,8 +1,13 @@ @use 'styles/utilities' as *; @use '../../light/themes' as *; +// In indigo theme the current date background has higher specificity then the special date background +// so when user change the special date background the current date background will be applied when both states are set +// However the text color and the inner circle border color of the special date will be visible to make the special date recognizable + $theme: $indigo; $border-width: rem(1px); +$inner-border-width: rem(2px); $week-number-radius: var-get($theme, 'week-number-border-radius'); [part~='label-inner'] { @@ -13,14 +18,6 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); height: var-get($theme, 'size'); } -[part~='weekend'] { - color: var-get($theme, 'weekend-color'); -} - -[part~='inactive'] { - color: var-get($theme, 'inactive-color'); -} - [part='week-number-inner first'] { border-top-left-radius: $week-number-radius; border-top-right-radius: $week-number-radius; @@ -99,18 +96,39 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } [part~='date-inner'] { - border: rem(2px) solid var-get($theme, 'date-border-color'); - border-radius: var-get($theme, 'date-border-radius'); width: var-get($theme, 'size'); height: var-get($theme, 'size'); + border: $inner-border-width solid transparent; + border-radius: var-get($theme, 'date-border-radius'); + + &:hover { + background: var-get($theme, 'date-hover-background'); + } + + // inactive dates should not have different styles for selected, current or special states + // so we reset everything to the inactive state. + &[part~='inactive'] { + color: var-get($theme, 'inactive-color'); - &[part~='disabled'] { + &:hover { + color: var-get($theme, 'inactive-color'); + } + } + + &[part~='disabled']:not([part~='selected'],[part~='special'],[part~='current']) { color: var-get($theme, 'date-disabled-foreground'); } + &[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current']) { + color: var-get($theme, 'date-disabled-range-foreground'); + } +} + +[part~='date-inner']:not([part~='inactive']) { + border-color: var-get($theme, 'date-border-color'); + &:hover { color: var-get($theme, 'date-hover-foreground'); - background: var-get($theme, 'date-hover-background'); border-color: var-get($theme, 'date-hover-border-color'); } @@ -120,368 +138,321 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); border-color: var-get($theme, 'date-focus-border-color'); } - &[part~='current'] { - color: var-get($theme, 'date-current-foreground'); - background: var-get($theme, 'date-current-background'); - border-color: var-get($theme, 'date-current-border-color'); - - &:hover { - color: var-get($theme, 'date-current-hover-foreground'); - background: var-get($theme, 'date-current-hover-background'); - border-color: var-get($theme, 'date-current-hover-border-color'); - } - - &:focus { - color: var-get($theme, 'date-current-focus-foreground'); - background: var-get($theme, 'date-current-focus-background'); - border-color: var-get($theme, 'date-current-focus-border-color'); - } + [part~='weekend'] { + color: var-get($theme, 'weekend-color'); } - &[part~='special'] { - color: var-get($theme, 'date-special-foreground'); - background: var-get($theme, 'date-special-background'); - border-color: var-get($theme, 'date-special-border-color'); - font-weight: 700; + &[part~='selected'] { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); &:hover { - color: var-get($theme, 'date-special-hover-foreground'); - background: var-get($theme, 'date-special-hover-background'); - border-color: var-get($theme, 'date-special-hover-border-color'); + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); } &:focus { - color: var-get($theme, 'date-special-focus-foreground'); - background: var-get($theme, 'date-special-focus-background'); - border-color: var-get($theme, 'date-special-hover-border-color'); + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); } - &::after { - content: ''; - position: absolute; - z-index: 0; - border: rem(2px) solid transparent; - border-radius: inherit; - width: var-get($theme, 'inner-size'); - height: var-get($theme, 'inner-size'); - box-sizing: border-box; + &[part~='range'][part~='special'][part~='first'], + &[part~='range'][part~='special'][part~='last'] { + &::after { + border-color: var-get($theme, 'date-selected-special-border-color'); + } + + &:hover { + /* stylelint-disable max-nesting-depth */ + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + /* stylelint-enable max-nesting-depth */ + } + + &:focus { + /* stylelint-disable max-nesting-depth */ + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); + } + /* stylelint-enable max-nesting-depth */ + } } - &[part~='range']:not([part~='preview']) { - color: var-get($theme, 'date-special-foreground'); - background: var-get($theme, 'date-special-background'); + &[part~='range'] { + color: var-get($theme, 'date-selected-range-foreground'); + background: transparent; &:hover { - color: var-get($theme, 'date-special-hover-foreground'); - background: var-get($theme, 'date-special-hover-background'); + color: var-get($theme, 'date-selected-range-hover-foreground'); + background: var-get($theme, 'date-selected-range-hover-background'); } &:focus { - color: var-get($theme, 'date-special-focus-foreground'); - background: var-get($theme, 'date-special-focus-background'); + color: var-get($theme, 'date-selected-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); } } - &[part~='range'][part~='first']:not([part~='preview']), - &[part~='range'][part~='last']:not([part~='preview']), - { + &[part~='first'], + &[part~='last'] { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); background: var-get($theme, 'date-selected-hover-background'); } &:focus { + color: var-get($theme, 'date-selected-focus-foreground'); background: var-get($theme, 'date-selected-focus-background'); } + } + } + &[part~='selected'][part~='current'][part~='range'] { + color: var-get($theme, 'date-selected-current-range-foreground'); + background: var-get($theme, 'date-selected-current-range-background'); + border-color: var-get($theme, 'date-current-border-color'); + + &:hover { + background: var-get($theme, 'date-selected-current-range-hover-background'); + color: var-get($theme, 'date-current-hover-foreground'); + border-color: var-get($theme, 'date-current-hover-border-color'); } - &[part~='range'][part~='first']:not([part~='current']), - &[part~='range'][part~='last']:not([part~='current']), { + &:focus { + background: var-get($theme, 'date-selected-current-range-focus-background'); + color: var-get($theme, 'date-current-focus-foreground'); + border-color: var-get($theme, 'date-current-focus-border-color'); + } + + &::after { border-color: transparent; } + } - &[part~='first'][part~='selected'], - &[part~='last'][part~='selected'], - &[part~='selected']:not([part~='range']) { + &[part~='selected'][part~='current'][part~='range'][part~='special'] { + color: var-get($theme, 'date-special-foreground'); + background: var-get($theme, 'date-current-background'); + + &:hover { + color: var-get($theme, 'date-special-hover-foreground'); + background: var-get($theme, 'date-selected-current-range-hover-background'); + + /* stylelint-disable max-nesting-depth */ &::after { - width: calc(var-get($theme, 'inner-size') - #{rem(4px)}); - height: calc(var-get($theme, 'inner-size') - #{rem(4px)}); + border-color: var-get($theme, 'date-special-hover-border-color'); } + /* stylelint-enable */ + } + + &:focus { + color: var-get($theme, 'date-special-focus-foreground'); + background: var-get($theme, 'date-selected-current-range-focus-background'); + + /* stylelint-disable max-nesting-depth */ + &::after { + border-color: var-get($theme, 'date-special-hover-border-color'); + } + /* stylelint-enable */ + } + + &::after { + border-color: var-get($theme, 'date-special-border-color'); } } - &[part~='selected'] { + &[part~='selected'][part~='current'][part~='range'][part~='first'], + &[part~='selected'][part~='current'][part~='range'][part~='last'] { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); + &::after { + border-color: transparent; + } + &:hover { color: var-get($theme, 'date-selected-hover-foreground'); background: var-get($theme, 'date-selected-hover-background'); + border-color: var-get($theme, 'date-current-hover-border-color'); } &:focus { color: var-get($theme, 'date-selected-focus-foreground'); background: var-get($theme, 'date-selected-focus-background'); + border-color: var-get($theme, 'date-current-focus-border-color'); } + } - &[part~='current'] { - color: var-get($theme, 'date-selected-current-foreground'); - background: var-get($theme, 'date-selected-current-background'); - border-color: var-get($theme, 'date-current-border-color'); - - &:hover { - color: var-get($theme, 'date-selected-current-hover-foreground'); - background: var-get($theme, 'date-selected-current-hover-background'); - border-color: var-get($theme, 'date-current-hover-border-color'); - } - - &:focus { - color: var-get($theme, 'date-selected-current-focus-foreground'); - background: var-get($theme, 'date-selected-current-focus-background'); - border-color: var-get($theme, 'date-current-focus-border-color'); - } + &[part~='selected'][part~='current'][part~='range'][part~='special'][part~='first'], + &[part~='selected'][part~='current'][part~='range'][part~='special'][part~='last'] { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); - &::after { - border-color: transparent; - } + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); } - &[part~='current'][part~='range'] { - color: var-get($theme, 'date-selected-current-range-foreground'); - background: var-get($theme, 'date-selected-current-range-background'); - border-color: var-get($theme, 'date-current-border-color'); - - &:hover { - background: var-get($theme, 'date-selected-current-range-hover-background'); - color: var-get($theme, 'date-current-hover-foreground'); - border-color: var-get($theme, 'date-current-hover-border-color'); - } - - &:focus { - background: var-get($theme, 'date-selected-current-range-focus-background'); - color: var-get($theme, 'date-current-focus-foreground'); - border-color: var-get($theme, 'date-current-focus-border-color'); - } - - &::after { - border-color: transparent; - } + &:focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); } + } - &[part~='current'][part~='range'][part~='special'] { - color: var-get($theme, 'date-special-foreground'); - background: var-get($theme, 'date-current-background'); - - &:hover { - color: var-get($theme, 'date-special-hover-foreground'); - background: var-get($theme, 'date-selected-current-range-hover-background'); - - /* stylelint-disable max-nesting-depth */ - &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); - } - /* stylelint-enable */ - } - - &:focus { - color: var-get($theme, 'date-special-focus-foreground'); - background: var-get($theme, 'date-selected-current-range-focus-background'); - - /* stylelint-disable max-nesting-depth */ - &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); - } - /* stylelint-enable */ - } + &[part~='selected'][part~='current'][part~='special'][part~='first'], + &[part~='selected'][part~='current'][part~='special'][part~='last'], + &[part~='selected'][part~='current'][part~='special']:not([part~='range']) { + &::after { + border-color: var-get($theme, 'date-selected-special-border-color'); + } + &:hover { + /* stylelint-disable max-nesting-depth */ &::after { - border-color: var-get($theme, 'date-special-border-color'); + border-color: var-get($theme, 'date-selected-special-hover-border-color'); } + /* stylelint-enable max-nesting-depth */ } - &[part~='current'][part~='range'][part~='first'], - &[part~='current'][part~='range'][part~='last'] { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); - + &:focus { + /* stylelint-disable max-nesting-depth */ &::after { - border-color: transparent; + border-color: var-get($theme, 'date-selected-special-focus-border-color'); } + /* stylelint-enable max-nesting-depth */ + } + } - &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); - border-color: var-get($theme, 'date-current-hover-border-color'); - } + &[part~='selected'][part~='special'] { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); - &:focus { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); - border-color: var-get($theme, 'date-current-focus-border-color'); - } + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); } - &[part~='current'][part~='range'][part~='special'][part~='first'], - &[part~='current'][part~='range'][part~='special'][part~='last'] { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); - - &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); - } + &:focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + } + } - &:focus { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); - } + &[part~='selected'][part~='special']:not([part~='range']) { + &::after { + border-color: var-get($theme, 'date-selected-special-border-color'); } - &[part~='current'][part~='special'][part~='first'], - &[part~='current'][part~='special'][part~='last'], - &[part~='current'][part~='special']:not([part~='range']) { + &:hover { + /* stylelint-disable max-nesting-depth */ &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); - } - - &:hover { - /* stylelint-disable max-nesting-depth */ - &::after { - border-color: var-get($theme, 'date-selected-special-hover-border-color'); - } - /* stylelint-enable max-nesting-depth */ - } - - &:focus { - /* stylelint-disable max-nesting-depth */ - &::after { - border-color: var-get($theme, 'date-selected-special-focus-border-color'); - } - /* stylelint-enable max-nesting-depth */ + border-color: var-get($theme, 'date-selected-special-hover-border-color'); } + /* stylelint-enable max-nesting-depth */ } - &[part~='range'][part~='special'][part~='first'], - &[part~='range'][part~='special'][part~='last'] { + &:focus { + /* stylelint-disable max-nesting-depth */ &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); + border-color: var-get($theme, 'date-selected-special-focus-border-color'); } + /* stylelint-enable max-nesting-depth */ + } + } - &:hover { - /* stylelint-disable max-nesting-depth */ - &::after { - border-color: var-get($theme, 'date-selected-special-hover-border-color'); - } - /* stylelint-enable max-nesting-depth */ - } + &[part~='special'] { + color: var-get($theme, 'date-special-foreground'); + background: var-get($theme, 'date-special-background'); + border-color: var-get($theme, 'date-special-border-color'); + font-weight: 700; - &:focus { - /* stylelint-disable max-nesting-depth */ - &::after { - border-color: var-get($theme, 'date-selected-special-focus-border-color'); - } - /* stylelint-enable max-nesting-depth */ - } + &:hover { + color: var-get($theme, 'date-special-hover-foreground'); + background: var-get($theme, 'date-special-hover-background'); + border-color: var-get($theme, 'date-special-hover-border-color'); } - &[part~='range'] { - color: var-get($theme, 'date-selected-range-foreground'); - background: transparent; - - &:hover { - color: var-get($theme, 'date-selected-range-hover-foreground'); - background: var-get($theme, 'date-selected-range-hover-background'); - } + &:focus { + color: var-get($theme, 'date-special-focus-foreground'); + background: var-get($theme, 'date-special-focus-background'); + border-color: var-get($theme, 'date-special-focus-border-color'); + } - &:focus { - color: var-get($theme, 'date-selected-range-focus-foreground'); - background: var-get($theme, 'date-selected-range-focus-background'); - } + &::after { + content: ''; + position: absolute; + z-index: 0; + border: rem(2px) solid transparent; + border-radius: inherit; + width: var-get($theme, 'inner-size'); + height: var-get($theme, 'inner-size'); + box-sizing: border-box; } - &[part~='first'], - &[part~='last'] { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); + &[part~='range']:not([part~='preview']) { + color: var-get($theme, 'date-special-range-foreground'); + background: var-get($theme, 'date-special-range-background'); &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); + color: var-get($theme, 'date-special-range-hover-foreground'); + background: var-get($theme, 'date-special-range-hover-background'); } &:focus { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); + color: var-get($theme, 'date-special-range-focus-foreground'); + background: var-get($theme, 'date-special-range-focus-background'); } } - &[part~='special'] { + &[part~='range'][part~='first']:not([part~='preview']), + &[part~='range'][part~='last']:not([part~='preview']), + { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); background: var-get($theme, 'date-selected-hover-background'); } &:focus { - color: var-get($theme, 'date-selected-focus-foreground'); background: var-get($theme, 'date-selected-focus-background'); } - } - - &[part~='special']:not([part~='range']) { - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); - } - - &:hover { - /* stylelint-disable max-nesting-depth */ - &::after { - border-color: var-get($theme, 'date-selected-special-hover-border-color'); - } - /* stylelint-enable max-nesting-depth */ - } - &:focus { - /* stylelint-disable max-nesting-depth */ - &::after { - border-color: var-get($theme, 'date-selected-special-focus-border-color'); - } - /* stylelint-enable max-nesting-depth */ - } } - } - &[part~='disabled'][part~='range']:not([part~='preview']) { - color: var-get($theme, 'date-disabled-range-foreground'); - } - - &[part~='disabled'][part~='first'], - &[part~='disabled'][part~='last'] { - color: var-get($theme, 'date-selected-foreground'); - - &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); + &[part~='range'][part~='first']:not([part~='current']), + &[part~='range'][part~='last']:not([part~='current']), { + border-color: transparent; } - &:focus { - color: var-get($theme, 'date-selected-focus-foreground'); - } + &[part~='first'][part~='selected'], + &[part~='last'][part~='selected'], + &[part~='selected']:not([part~='range']) { + &::after { + width: calc(var-get($theme, 'inner-size') - #{rem(4px)}); + height: calc(var-get($theme, 'inner-size') - #{rem(4px)}); + } + } } - &[part~='selected'][part~='special']:not([part~='current'], [part~='range']) { - border-color: var-get($theme, 'date-selected-border-color'); + &[part~='current'] { + color: var-get($theme, 'date-current-foreground'); + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-border-color'); &:hover { - border-color: var-get($theme, 'date-selected-hover-border-color'); + color: var-get($theme, 'date-current-hover-foreground'); + background: var-get($theme, 'date-current-hover-background'); + border-color: var-get($theme, 'date-current-hover-border-color'); } &:focus { - border-color: var-get($theme, 'date-selected-focus-border-color'); + color: var-get($theme, 'date-current-focus-foreground'); + background: var-get($theme, 'date-current-focus-background'); + border-color: var-get($theme, 'date-current-focus-border-color'); } } @@ -503,6 +474,28 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } } + &[part~='selected'][part~='current'] { + color: var-get($theme, 'date-selected-current-foreground'); + background: var-get($theme, 'date-selected-current-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); + + &:hover { + color: var-get($theme, 'date-selected-current-hover-foreground'); + background: var-get($theme, 'date-selected-current-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + + &:focus { + color: var-get($theme, 'date-selected-current-focus-foreground'); + background: var-get($theme, 'date-selected-current-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + + &::after { + border-color: transparent; + } + } + &[part~='special'][part~='current']:not([part~='selected']) { background: var-get($theme, 'date-current-background'); border-color: var-get($theme, 'date-current-border-color'); @@ -521,7 +514,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); border-color: var-get($theme, 'date-current-focus-border-color'); &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); + border-color: var-get($theme, 'date-special-focus-border-color'); } } @@ -530,8 +523,8 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } } - &[part~='special'][part~='range'][part~='preview'][part~='first'], - &[part~='special'][part~='range'][part~='preview'][part~='last'] { + &[part~='special'][part~='range'][part~='preview'][part~='first']:not([part~='current']), + &[part~='special'][part~='range'][part~='preview'][part~='last']:not([part~='current']) { &:hover { border-color: var-get($theme, 'date-special-hover-border-color') } @@ -549,64 +542,4 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); height: var-get($theme, 'inner-size'); } } - - &[part~='inactive'] { - &::after { - display: none; - } - - &:hover { - color: var-get($theme, 'inactive-color'); - } - } - - &[part~='inactive'][part~='selected']:not([part~='range']) { - color: var-get($theme, 'inactive-color'); - background: transparent; - - &:hover { - background: var-get($theme, 'date-hover-background'); - border-color: var-get($theme, 'date-hover-border-color'); - } - } - - &[part~='inactive'][part~='special'] { - color: var-get($theme, 'inactive-color'); - - &:hover { - color: var-get($theme, 'inactive-color'); - } - } - - &[part~='inactive'][part~='special'][part~='range'] { - color: var-get($theme, 'date-selected-range-foreground'); - - &:hover { - color: var-get($theme, 'date-selected-range-foreground'); - } - } - - &[part~='inactive'][part~='current']:not([part~='range']) { - color: var-get($theme, 'inactive-color'); - border-color: transparent; - - &:hover { - background: var-get($theme, 'date-hover-background'); - border-color: var-get($theme, 'date-hover-border-color'); - } - } - - &[part~='inactive'][part~='selected'][part~='current'] { - border-color: transparent; - } - - &[part~='inactive'][part~='selected'][part~='current']:not([part~='range']) { - background: transparent; - - &:hover, - &:focus { - background: var-get($theme, 'date-hover-background'); - border-color: var-get($theme, 'date-hover-border-color'); - } - } } From 4b3e1a152d863bf552fc28ae4f0a4833bd5d6bf9 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 20 Oct 2025 10:20:36 +0300 Subject: [PATCH 04/31] refactor(calendar): refactor bootstrap theme --- .../shared/bootstrap/days-view.bootstrap.scss | 424 +++++++++--------- 1 file changed, 212 insertions(+), 212 deletions(-) diff --git a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss index 3d32ab207..60f4cc6d1 100644 --- a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss +++ b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss @@ -12,64 +12,63 @@ $border-size: rem(1px); [part~='days-row'] { padding: 0 pad-inline(rem(12px)); -} -:host([part='days-view']) + :host([part='days-view']) { - margin-inline-start: pad-inline(rem(8px)); + &:nth-child(2) { + [part='week-number-inner'] { + border-top-left-radius: var-get($theme, 'week-number-border-radius'); + border-top-right-radius: var-get($theme, 'week-number-border-radius'); + } + } } [part~='days-row'][part~='first'] { - background: var-get($theme, 'header-background'); position: relative; + background: var-get($theme, 'header-background'); + border-block-end: rem(1px) solid var-get($theme, 'border-color'); +} - &::after { - content: ''; - position: absolute; - width: 100%; - inset-block-start: 100%; - inset-inline-start: 0; - height: rem(1px); - background: var-get($theme, 'border-color'); - } +:host([part='days-view']) + :host([part='days-view']) { + margin-inline-start: pad-inline(rem(8px)); } -[part~='week-number'] { +[part~='week-number'], +[part~='week-number-inner'] { width: var-get($theme, 'size'); } [part~='week-number-inner'] { - width: var-get($theme, 'size'); height: var-get($theme, 'size'); - color: var-get($theme, 'week-number-foreground'); - background: var-get($theme, 'week-number-background'); border: none; font-style: italic; - &::after { - width: var-get($theme, 'size'); - inset-block-end: 100%; - background: var-get($theme, 'week-number-background'); + &[part~='first'] { + border-top-left-radius: var-get($theme, 'week-number-border-radius'); + border-top-right-radius: var-get($theme, 'week-number-border-radius'); } -} -[part='week-number-inner first'] { - border-top-left-radius: var-get($theme, 'week-number-border-radius'); - border-top-right-radius: var-get($theme, 'week-number-border-radius'); -} + &[part~='last'] { + border-bottom-left-radius: var-get($theme, 'week-number-border-radius'); + border-bottom-right-radius: var-get($theme, 'week-number-border-radius'); + } + + &:not([part~='first']) { + color: var-get($theme, 'week-number-foreground'); + background: var-get($theme, 'week-number-background'); + } -[part='week-number-inner last'] { - border-bottom-left-radius: var-get($theme, 'week-number-border-radius'); - border-bottom-right-radius: var-get($theme, 'week-number-border-radius'); + &:not([part~='last']) { + &::after { + width: var-get($theme, 'size'); + inset-block-start: 100%; + background: var-get($theme, 'week-number-background'); + } + } } [part~='label'] { height: var-get($theme, 'size'); font-style: italic; color: var-get($theme, 'weekday-color'); - - [part~='week-number-inner'] { - color: var-get($theme, 'weekday-color'); - } } [part~='weekend'] { @@ -139,49 +138,77 @@ $border-size: rem(1px); border-radius: var-get($theme, 'date-border-radius'); &:hover { - color: var-get($theme, 'date-hover-foreground'); background: var-get($theme, 'date-hover-background'); border-color: var-get($theme, 'date-hover-border-color'); } &:focus { + background: var-get($theme, 'date-focus-background'); + border-color: var-get($theme, 'date-focus-border-color'); + } + + &[part~='preview'][part~='first'], + &[part~='preview'][part~='last'] { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); + border-color: var-get($theme, 'date-selected-border-color'); + + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); + border-color: var-get($theme, 'date-selected-hover-border-color'); + } + + &:focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + border-color: var-get($theme, 'date-selected-focus-border-color'); + } + } + + &[part~='disabled']:not([part~='selected'],[part~='special'],[part~='current']) { + color: var-get($theme, 'date-disabled-foreground'); + } + + &[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current']) { + color: var-get($theme, 'date-disabled-range-foreground'); + } +} + +[part~='date-inner']:not([part~='inactive']) { + &:hover { color: var-get($theme, 'date-hover-foreground'); - background: var-get($theme, 'date-hover-background'); - border-color: var-get($theme, 'date-hover-border-color'); } - &::after { - content: ""; - position: absolute; - z-index: 0; - border: 0.0625rem solid transparent; - border-radius: calc(var-get($theme, 'size') / 2); - width: var-get($theme, 'size'); - height: var-get($theme, 'size'); - box-sizing: border-box; + &:focus { + color: var-get($theme, 'date-hover-foreground'); + } + + &[part~='range'][part~='selected']:not([part~='current'], [part~='special'], [part~='first'], [part~='last'], [part~='first'][part~='last']), + &[part~='range'][part~='preview']:not([part~='current'], [part~='special'], [part~='first'], [part~='last'], [part~='disabled'], [part~='first'][part~='last']) { + color: var-get($theme, 'date-selected-range-foreground'); + + &:hover { + color: var-get($theme, 'date-selected-range-hover-foreground'); + background: var-get($theme, 'date-selected-range-hover-background'); + } + + &:focus { + color: var-get($theme, 'date-selected-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); + } } &[part~='special'][part~='selected']:not([part~='range']), &[part~='special'][part~='selected'][part~='first'], &[part~='special'][part~='selected'][part~='last'], - &[part~='special'][part~='current'], - &[part~='range'][part~='preview'][part~='first'], - &[part~='range'][part~='preview'][part~='last'] { + &[part~='special'][part~='current'] { &::after { width: var-get($theme, 'inner-size'); height: var-get($theme, 'inner-size'); } } - &[part~='range'][part~='preview'], - &[part~='range'] { - color: var-get($theme, 'date-selected-range-foreground'); - } - - &[part~='disabled'] { - color: var-get($theme, 'date-disabled-foreground'); - } - &[part~='current'] { position: relative; color: var-get($theme, 'date-current-foreground'); @@ -199,68 +226,79 @@ $border-size: rem(1px); background: var-get($theme, 'date-current-focus-background'); border-color: var-get($theme, 'date-current-focus-border-color'); } - } - &[part~='disabled'][part~='range'] { - color: var-get($theme, 'date-disabled-range-foreground'); - } + &[part~='range']:not([part~='first'], [part~='last'], [part~='preview']) { + color: var-get($theme, 'date-selected-current-range-foreground'); + background: var-get($theme, 'date-selected-current-range-background'); + border-color: var-get($theme, 'date-current-border-color'); - &[part~='selected'] { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); - border-color: var-get($theme, 'date-selected-border-color'); - - &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); - border-color: var-get($theme, 'date-selected-hover-border-color'); - } + &:hover { + color: var-get($theme, 'date-selected-current-range-hover-foreground'); + background: var-get($theme, 'date-selected-current-range-hover-background'); + border-color: var-get($theme, 'date-current-hover-border-color'); + } - &:focus { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); - border-color: var-get($theme, 'date-selected-focus-border-color'); + &:focus { + color: var-get($theme, 'date-selected-current-range-focus-foreground'); + background: var-get($theme, 'date-selected-current-range-focus-background'); + border-color: var-get($theme, 'date-current-focus-border-color'); + } } - } - &[part~='selected'][part~='current'], - &[part~='selected'][part~='current'][part~='range'], - &[part~='current'][part~='preview'] { - border-color: var-get($theme, 'date-selected-current-border-color'); + &[part~='selected'][part~='first'], + &[part~='selected'][part~='last'] { + border-color: var-get($theme, 'date-selected-current-border-color'); - &:hover { - border-color: var-get($theme, 'date-selected-current-hover-border-color'); - } + &:hover { + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } - &:focus { - border-color: var-get($theme, 'date-selected-current-focus-border-color'); + &:focus { + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } } } - &[part~='range'][part~='selected'], - &[part~='range'][part~='selected'][part~='preview'], - &[part~='range'][part~='selected'][part~='current'] { - color: var-get($theme, 'date-selected-range-foreground'); - background: transparent; + &[part~='special'] { + color: var-get($theme, 'date-special-foreground'); + background: var-get($theme, 'date-special-background'); + + &::after { + content: ""; + position: absolute; + z-index: 0; + border: rem(1px) solid var-get($theme, 'date-special-border-color'); + border-radius: calc(var-get($theme, 'size') / 2); + width: var-get($theme, 'size'); + height: var-get($theme, 'size'); + box-sizing: border-box; + } &:hover { - color: var-get($theme, 'date-selected-range-hover-foreground'); - background: var-get($theme, 'date-selected-range-hover-background'); + color: var-get($theme, 'date-special-hover-foreground'); + background: var-get($theme, 'date-special-hover-background'); + + &::after { + border-color: var-get($theme, 'date-special-hover-border-color'); + } } &:focus { - color: var-get($theme, 'date-selected-range-focus-foreground'); - background: var-get($theme, 'date-selected-range-focus-background'); - } + color: var-get($theme, 'date-special-focus-foreground'); + background: var-get($theme, 'date-special-focus-background'); + &::after { + border-color: var-get($theme, 'date-special-focus-border-color'); + } + } } - &[part~='range'][part~='selected'][part~='first'], - &[part~='range'][part~='preview'][part~='first'], - &[part~='range'][part~='current'][part~='preview'][part~='first'], - &[part~='range'][part~='selected'][part~='last'], - &[part~='range'][part~='preview'][part~='last'], - &[part~='range'][part~='current'][part~='preview'][part~='last'] { + // FIRST AND LAST DATES IN RANGE SELECTION SHOULDN'T LOOK THE SAME AS SELECTED DATES + &[part~='selected'][part~='first'], + &[part~='selected'][part~='last'], + &[part~='selected'][part~='first'][part~='last'], + &[part~='preview'][part~='first'], + &[part~='preview'][part~='last'] { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); border-color: var-get($theme, 'date-selected-border-color'); @@ -278,95 +316,98 @@ $border-size: rem(1px); } } - &[part~='special'][part~='range'][part~='selected'][part~='first'][part~='last'], - &[part~='special'][part~='range'][part~='preview'][part~='first'][part~='last'], - &[part~='special'][part~='range'][part~='current'][part~='preview'][part~='first'][part~='last'], - &[part~='special'][part~='range'][part~='selected'][part~='last'], - &[part~='special'][part~='range'][part~='preview'][part~='last'], - &[part~='special'][part~='range'][part~='current'][part~='preview'][part~='last'], - &[part~='special'][part~='range'][part~='selected'][part~='first'], - &[part~='special'][part~='range'][part~='preview'][part~='first'], - &[part~='special'][part~='range'][part~='current'][part~='preview'][part~='first'] { - &::after { - border-color: var-get($theme, 'date-selected-foreground'); - } - } - - &[part~='selected'][part~='current'][part~='first'][part~='last'], - &[part~='range'][part~='current'][part~='preview'][part~='last'], - &[part~='range'][part~='current'][part~='preview'][part~='first'] { + &[part~='preview'][part~='first'][part~='current'], + &[part~='preview'][part~='last'][part~='current'] { border-color: var-get($theme, 'date-selected-current-border-color'); &:hover { - color: var-get($theme, 'date-selected-current-hover-foreground'); border-color: var-get($theme, 'date-selected-current-hover-border-color'); } &:focus { - color: var-get($theme, 'date-selected-current-focus-foreground'); border-color: var-get($theme, 'date-selected-current-focus-border-color'); } } - &[part~='range'][part~='selected'][part~='current'][part~='first'], - &[part~='range'][part~='selected'][part~='current'][part~='last'] { - color: var-get($theme, 'date-selected-current-foreground'); - background: var-get($theme, 'date-selected-current-background'); - border-color: var-get($theme, 'date-selected-current-border-color'); + &:not([part~='range']) { + &[part~='selected'] { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); + border-color: var-get($theme, 'date-selected-border-color'); - &:hover { - color: var-get($theme, 'date-selected-current-hover-foreground'); - background: var-get($theme, 'date-selected-current-hover-background'); - border-color: var-get($theme, 'date-selected-current-hover-border-color'); - } + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); + border-color: var-get($theme, 'date-selected-hover-border-color'); + } - &:focus { - color: var-get($theme, 'date-selected-current-focus-foreground'); - background: var-get($theme, 'date-selected-current-focus-background'); - border-color: var-get($theme, 'date-selected-current-focus-border-color'); + &:focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + border-color: var-get($theme, 'date-selected-focus-border-color'); + } } - } - &[part~='range'][part~='selected'][part~='current'][part~='special'][part~='first'], - &[part~='range'][part~='selected'][part~='current'][part~='special'][part~='last'] { - border-color: var-get($theme, 'date-current-border-color'); + &[part~='selected'][part~='current'] { + color: var-get($theme, 'date-selected-current-foreground'); + background: var-get($theme, 'date-selected-current-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); - &:hover { - color: var-get($theme, 'date-selected-current-hover-foreground'); - border-color: var-get($theme, 'date-current-hover-border-color'); - } + &:hover { + color: var-get($theme, 'date-selected-current-hover-foreground'); + background: var-get($theme, 'date-selected-current-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } - &:focus { - color: var-get($theme, 'date-selected-current-focus-foreground'); - border-color: var-get($theme, 'date-current-focus-border-color'); + &:focus { + color: var-get($theme, 'date-selected-current-focus-foreground'); + background: var-get($theme, 'date-selected-current-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } } - } - &[part~='range'][part~='selected'][part~='current'] { - color: var-get($theme, 'date-selected-current-range-foreground'); + &[part~='selected'][part~='special'] { + color: var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-special-background'); - &:hover { - color: var-get($theme, 'date-selected-current-range-hover-foreground'); - background: var-get($theme, 'date-selected-current-range-hover-background'); - } + &::after { + border-color: var-get($theme, 'date-selected-special-border-color'); + } - &:focus { - color: var-get($theme, 'date-selected-current-range-focus-foreground'); - background: var-get($theme, 'date-selected-current-range-focus-background'); + &:hover { + color: var-get($theme, 'date-selected-special-hover-foreground'); + background: var-get($theme, 'date-selected-special-hover-background'); + + /* stylelint-disable-next-line max-nesting-depth */ + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + } + + &:focus { + color: var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-special-focus-background'); + + /* stylelint-disable-next-line max-nesting-depth */ + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); + } + } } } - &[part~='special'] { - color: var-get($theme, 'date-special-foreground'); - background: var-get($theme, 'date-special-background'); + + &[part~='range'][part~='selected'][part~='special']:not([part~='first'], [part~='last']) { + color: var-get($theme, 'date-special-range-foreground'); + background: var-get($theme, 'date-special-range-background'); &::after { - border-color: var-get($theme, 'date-special-border-color'); + border-color: var-get($theme, 'date-special-range-border-color'); } &:hover { - color: var-get($theme, 'date-hover-foreground'); - background: var-get($theme, 'date-hover-background'); + color: var-get($theme, 'date-special-range-hover-foreground'); + background: var-get($theme, 'date-special-range-hover-background'); &::after { border-color: var-get($theme, 'date-special-hover-border-color'); @@ -374,77 +415,36 @@ $border-size: rem(1px); } &:focus { - color: var-get($theme, 'date-focus-foreground'); - background: var-get($theme, 'date-focus-background'); + color: var-get($theme, 'date-special-range-focus-foreground'); + background: var-get($theme, 'date-special-range-focus-background'); &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); + border-color: var-get($theme, 'date-special-focus-border-color'); } } } - &[part~='selected'][part~='special']:not([part~='range']) { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); - + // IN THE PREVIEW STATE, FIRST AND LAST DATES SHOULD LOOK THE SAME AS SELECTED DATES + &[part~='preview'][part~='special'][part~='first'], + &[part~='preview'][part~='special'][part~='last'], + &[part~='selected'][part~='special'][part~='range'][part~='first'], + &[part~='selected'][part~='special'][part~='range'][part~='last'] { &::after { + width: var-get($theme, 'inner-size'); + height: var-get($theme, 'inner-size'); border-color: var-get($theme, 'date-selected-special-border-color'); } &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); - &::after { border-color: var-get($theme, 'date-selected-special-hover-border-color'); } } &:focus { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); - &::after { border-color: var-get($theme, 'date-selected-special-focus-border-color'); } } } - - &[part~='inactive'] { - &::after { - display: none; - } - - &:hover { - color: var-get($theme, 'inactive-color'); - } - } - - &[part~='inactive'][part~='special']:not([part~='range']) { - &:hover { - color: var-get($theme, 'inactive-color'); - } - } - - &[part~='inactive'][part~='selected']:not([part~='range']), - &[part~='inactive'][part~='current']:not([part~='range']) { - color: var-get($theme, 'inactive-color'); - background: transparent; - - &:hover { - background: var-get($theme, 'date-hover-background'); - border-color: var-get($theme, 'date-hover-border-color'); - } - } - - &[part~='inactive'][part~='current'], - &[part~='inactive'][part~='current'][part~='selected'][part~='first'], - &[part~='inactive'][part~='current'][part~='selected'][part~='last'], - &[part~='inactive'][part~='current'][part~='selected'], { - border-color: transparent; - - &:hover { - border-color: transparent; - } - } } From 9181d20e930af6b530105cee2ccc8f34269e81c5 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 21 Oct 2025 10:09:14 +0300 Subject: [PATCH 05/31] refactor(calendar): refactor material theme --- .../themes/shared/material/days-view.material.scss | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/calendar/themes/shared/material/days-view.material.scss b/src/components/calendar/themes/shared/material/days-view.material.scss index 6c75c361f..9c4d9b476 100644 --- a/src/components/calendar/themes/shared/material/days-view.material.scss +++ b/src/components/calendar/themes/shared/material/days-view.material.scss @@ -106,14 +106,8 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); background: var-get($theme, 'date-hover-background'); } - // inactive dates should not have different styles for selected, current or special states - // so we reset everything to the inactive state. &[part~='inactive'] { color: var-get($theme, 'inactive-color'); - - &:hover { - color: var-get($theme, 'inactive-color'); - } } &[part~='disabled']:not([part~='selected'],[part~='special'],[part~='current']) { @@ -139,7 +133,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); border-color: var-get($theme, 'date-focus-border-color'); } - [part~='weekend'] { + &[part~='weekend'] { color: var-get($theme, 'weekend-color'); } From e6831b332f2ced080c69b5cf3166a67ab16d9305 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 21 Oct 2025 10:09:41 +0300 Subject: [PATCH 06/31] refactor(calendar): refactor fluent theme --- .../shared/fluent/days-view.fluent.scss | 265 +++++++++--------- 1 file changed, 134 insertions(+), 131 deletions(-) diff --git a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss index 9bbf753ec..53ae33351 100644 --- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss @@ -4,6 +4,9 @@ $theme: $fluent; $border-size: rem(1px); $row-gap: rem(6px); +$week-number-radius: var-get($theme, 'week-number-border-radius'); +$fake-bg-size: calc(50% + (var-get($theme, 'size') / 2)); +$fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); :host { --date-size: #{sizable(rem(12px), rem(14px), rem(16px))}; @@ -31,8 +34,6 @@ $row-gap: rem(6px); height: var-get($theme, 'size'); color: var-get($theme, 'week-number-foreground'); background: var-get($theme, 'week-number-background'); - border-inline-end-color: var-get($theme, 'date-border-color'); - border-radius: var-get($theme, 'week-number-border-radius'); &::after { width: var-get($theme, 'size'); @@ -41,11 +42,16 @@ $row-gap: rem(6px); border-inline-end: rem(1px) solid var-get($theme, 'week-number-background'); border-inline-end-color: var-get($theme, 'date-border-color'); } +} - &[part~='first'], - &[part~='last'] { - border-radius: 0; - } +[part~='week-number-inner'][part~='first'] { + border-top-left-radius: $week-number-radius; + border-top-right-radius: $week-number-radius; +} + +[part~='week-number-inner'][part~='last'] { + border-bottom-left-radius: $week-number-radius; + border-bottom-right-radius: $week-number-radius; } [part~='label'] { @@ -57,28 +63,15 @@ $row-gap: rem(6px); color: var-get($theme, 'weekend-color'); } -[part~='inactive']:not([part~='range']) { - color: var-get($theme, 'inactive-color') !important; - border-color: transparent !important; - - &:hover { - color: var-get($theme, 'inactive-color'); - } -} - -[part~='inactive']:not([part~='preview']) { - color: var-get($theme, 'inactive-color'); - - &:hover { - color: var-get($theme, 'inactive-color'); - } -} - [part~='date-inner'] { width: var-get($theme, 'size'); height: var-get($theme, 'size'); border-radius: var-get($theme, 'date-border-radius'); + &[part~='inactive']:not([part~='selected']) { + color: var-get($theme, 'inactive-color'); + } + &::after { content: ''; position: absolute; @@ -89,6 +82,25 @@ $row-gap: rem(6px); height: var-get($theme, 'inner-size'); } + &[part~='disabled']:not([part~='special'],[part~='current']) { + color: var-get($theme, 'date-disabled-foreground'); + } + + &[part~='disabled'][part~='range']:not([part~='special'],[part~='current'],[part~='preview']) { + color: var-get($theme, 'date-disabled-range-foreground'); + } + + &[part~='disabled'][part~='selected'][part~='first']:not([part~='special'],[part~='current'],[part~='preview']), + &[part~='disabled'][part~='selected'][part~='last']:not([part~='special'],[part~='current'],[part~='preview']) { + opacity: 1; + } + + &[part~='range'] { + height: 100%; + } +} + +[part~='date-inner']:not([part~='preview']) { &:hover { color: var-get($theme, 'date-hover-foreground'); background: var-get($theme, 'date-hover-background'); @@ -100,6 +112,20 @@ $row-gap: rem(6px); background: var-get($theme, 'date-focus-background'); border-color: var-get($theme, 'date-focus-border-color'); } +} + +[part~='date-inner']:not([part~='inactive']) { + border-color: var-get($theme, 'date-border-color'); + + &::after { + content: ''; + position: absolute; + z-index: 0; + border: $border-size solid transparent; + border-radius: 50%; + width: var-get($theme, 'inner-size'); + height: var-get($theme, 'inner-size'); + } // This selector works only in range selection since firs and last are present only in the range selection &[part~='selected'][part~='first'][part~='last'] { @@ -108,29 +134,47 @@ $row-gap: rem(6px); border-radius: var-get($theme, 'date-range-border-radius'); } - &[part~='disabled'] { - color: var-get($theme, 'date-disabled-foreground'); + &[part~='selected'] { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); + + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); + } + + &:focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + } } - &[part~='disabled'][part~='range'] { - color: var-get($theme, 'date-disabled-range-foreground'); + &[part~='selected']:not(&[part~='range']) { + border-color: var-get($theme, 'date-selected-border-color'); + + &:hover { + border-color: var-get($theme, 'date-selected-hover-border-color'); + + } + + &:focus { + border-color: var-get($theme, 'date-selected-focus-border-color'); + } } &[part~='range'] { - height: 100%; - &[part~='selected'][part~='first'][part~='last'] { - color: var-get($theme, 'date-selected-foreground') !important; - background: var-get($theme, 'date-selected-background') !important; + color: var-get($theme, 'date-selected-range-foreground'); + background: var-get($theme, 'date-selected-range-background'); &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); + color: var-get($theme, 'date-selected-range-hover-foreground'); + background: var-get($theme, 'date-selected-range-hover-background'); } &:focus { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); + color: var-get($theme, 'date-selected-range-hover-foreground'); + background: var-get($theme, 'date-selected-range-hover-background'); } } @@ -138,69 +182,48 @@ $row-gap: rem(6px); &[part~='selected'][part~='last'] { border-top-color: var-get($theme, 'date-range-border-color'); border-bottom-color: var-get($theme, 'date-range-border-color'); + + &:hover, + &:focus { + border-inline-start-color: transparent; + } } &[part~='selected'][part~='first'] { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); border-color: transparent; border-start-start-radius: var-get($theme, 'date-range-border-radius'); border-end-start-radius: var-get($theme, 'date-range-border-radius'); border-start-end-radius: var-get($theme, 'date-border-radius'); border-end-end-radius: var-get($theme, 'date-border-radius'); - - &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); - } - - &:focus { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); - } - - &:hover, - &:focus { - border-inline-start-color: transparent; - } } &[part~='selected'][part~='last'] { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); border-color: transparent; border-start-end-radius: var-get($theme, 'date-range-border-radius'); border-end-end-radius: var-get($theme, 'date-range-border-radius'); border-start-start-radius: var-get($theme, 'date-border-radius'); border-end-start-radius: var-get($theme, 'date-border-radius'); + } + &[part~='selected'] { &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); + background: var-get($theme, 'date-selected-range-hover-background'); } &:focus { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); - } - - &:hover, - &:focus { - border-inline-start-color: transparent; + background: var-get($theme, 'date-selected-range-focus-background'); } } - &[part~='selected'] { + &[part~='selected']:not([part~='disabled']) { color: var-get($theme, 'date-selected-range-foreground'); &:hover { color: var-get($theme, 'date-selected-range-hover-foreground'); - background: var-get($theme, 'date-selected-range-hover-background'); } &:focus { color: var-get($theme, 'date-selected-range-focus-foreground'); - background: var-get($theme, 'date-selected-range-focus-background'); } } @@ -249,7 +272,7 @@ $row-gap: rem(6px); color: var-get($theme, 'date-current-hover-foreground'); &::before { - background: var-get($theme, 'date-current-background'); + background: var-get($theme, 'date-current-hover-background'); border-color: var-get($theme, 'date-current-hover-border-color'); } } @@ -258,12 +281,33 @@ $row-gap: rem(6px); color: var-get($theme, 'date-current-focus-foreground'); &::before { - background: var-get($theme, 'date-current-background'); + background: var-get($theme, 'date-current-focus-background'); border-color: var-get($theme, 'date-current-focus-border-color'); } } } + &[part~='selected'][part~='current'] { + &::before { + background: var-get($theme, 'date-selected-current-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); + } + + &:hover { + &::before { + background: var-get($theme, 'date-selected-current-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + } + + &:focus { + &::before { + background: var-get($theme, 'date-selected-current-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + } + } + &[part~='special'] { color: var-get($theme, 'date-special-foreground'); background: var-get($theme, 'date-special-background'); @@ -291,7 +335,7 @@ $row-gap: rem(6px); } } - &[part~='selected'][part~='special']:not([part~='current']) { + &[part~='selected'][part~='special'] { &::after { border-color: var-get($theme, 'date-selected-special-border-color'); } @@ -313,77 +357,28 @@ $row-gap: rem(6px); color: var-get($theme, 'date-current-foreground'); &::after { - border-color: var-get($theme, 'date-current-foreground'); - width: sizable(rem(22px), rem(24px), rem(28px)); - height: sizable(rem(22px), rem(24px), rem(28px)); - } - } - - &[part~='special'][part~='inactive']:not([part~='range']), - &[part~='current'][part~='inactive']:not([part~='range']) { - color: var-get($theme, 'inactive-color'); - } - - &[part~='special'][part~='inactive'], - &[part~='current'][part~='inactive'] { - &::before { - background: transparent; - } - - &::after { - border-color: transparent; + border-color: var-get($theme, 'date-selected-current-foreground'); + width: calc(var-get($theme, 'inner-size') - #{rem(4px)}); + height: calc(var-get($theme, 'inner-size') - #{rem(4px)}); } - } - &[part~='inactive'][part~='selected']:not([part~='range']) { - background: transparent; - } -} - -[part~='date-inner'][part~='single'] { - &[part~='weekend']:not([part~='inactive']) { &:hover { - color: var-get($theme, 'date-hover-foreground'); + &::after { + border-color: var-get($theme, 'date-selected-current-hover-foreground'); + } } &:focus { - color: var-get($theme, 'date-focus-foreground'); - } - } - - &[part~='selected'] { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); - border-color: var-get($theme, 'date-selected-border-color'); - border-radius: 0; - - &:focus { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); - border-color: var-get($theme, 'date-selected-focus-border-color'); - } - - &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); - border-color: var-get($theme, 'date-selected-hover-border-color'); - } - - &[part~='first'][part~='last'] { - border-color: var-get($theme, 'date-selected-border-color'); + &::after { + border-color: var-get($theme, 'date-selected-current-focus-foreground'); + } } } +} - &[part~='selected'][part~='current'] { - color: var-get($theme, 'date-selected-current-foreground'); - - &:focus { - color: var-get($theme, 'date-selected-current-focus-foreground'); - } - - &:hover { - color: var-get($theme, 'date-selected-current-hover-foreground'); - } +[part~='date'][part~='range'] + [part~='date'][part~='range'][part~='last'] { + &::after { + inset-inline-end: $fake-bg-position; } } @@ -393,6 +388,10 @@ $row-gap: rem(6px); &[part~='first'], &[part~='last'] { + &::after { + width: $fake-bg-size; + } + background: transparent; &::before, @@ -416,6 +415,10 @@ $row-gap: rem(6px); } &[part~='first'] { + &::after { + inset-inline-start: $fake-bg-position; + } + &::before { inset-inline-end: initial; border-inline: $border-size solid; From 9ff157f0f87af8b27b1289e8b8820185c1efa1b1 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 21 Oct 2025 12:38:31 +0300 Subject: [PATCH 07/31] refactor(calendar): refine inactive and selected state styles across themes --- .../shared/bootstrap/days-view.bootstrap.scss | 28 +++++++++++++++--- .../shared/fluent/days-view.fluent.scss | 4 +-- .../shared/indigo/days-view.indigo.scss | 29 ++++++++++++++----- .../shared/material/days-view.material.scss | 28 ++++++++++++++++-- 4 files changed, 72 insertions(+), 17 deletions(-) diff --git a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss index 60f4cc6d1..c1baafb6f 100644 --- a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss +++ b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss @@ -75,10 +75,6 @@ $border-size: rem(1px); color: var-get($theme, 'weekend-color'); } -[part~='inactive'] { - color: var-get($theme, 'inactive-color'); -} - [part~='date'] { height: var-get($theme, 'size'); border-top: $border-size solid transparent; @@ -147,6 +143,10 @@ $border-size: rem(1px); border-color: var-get($theme, 'date-focus-border-color'); } + &[part~='inactive']:not([part~='selected'][part~='range'], [part~='disabled']) { + color: var-get($theme, 'inactive-color'); + } + &[part~='preview'][part~='first'], &[part~='preview'][part~='last'] { color: var-get($theme, 'date-selected-foreground'); @@ -448,3 +448,23 @@ $border-size: rem(1px); } } } + +[part~='date-inner'][part~='selected'][part~='inactive'][part~='first'], +[part~='date-inner'][part~='selected'][part~='inactive'][part~='last'] { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); + border-color: var-get($theme, 'date-selected-border-color'); + + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); + border-color: var-get($theme, 'date-selected-hover-border-color'); + } + + &:focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + border-color: var-get($theme, 'date-selected-focus-border-color'); + } +} + diff --git a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss index 53ae33351..74ef9c345 100644 --- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss @@ -68,7 +68,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); height: var-get($theme, 'size'); border-radius: var-get($theme, 'date-border-radius'); - &[part~='inactive']:not([part~='selected']) { + &[part~='inactive']:not([part~='selected'][part~='range']) { color: var-get($theme, 'inactive-color'); } @@ -82,7 +82,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); height: var-get($theme, 'inner-size'); } - &[part~='disabled']:not([part~='special'],[part~='current']) { + &[part~='disabled']:not([part~='special'],[part~='current'], [part~='disabled']) { color: var-get($theme, 'date-disabled-foreground'); } diff --git a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss index 2b1d3177c..1f0e95c20 100644 --- a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss @@ -105,21 +105,15 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); background: var-get($theme, 'date-hover-background'); } - // inactive dates should not have different styles for selected, current or special states - // so we reset everything to the inactive state. - &[part~='inactive'] { + &[part~='inactive']:not([part~='selected'][part~='range'], [part~='disabled']) { color: var-get($theme, 'inactive-color'); - - &:hover { - color: var-get($theme, 'inactive-color'); - } } &[part~='disabled']:not([part~='selected'],[part~='special'],[part~='current']) { color: var-get($theme, 'date-disabled-foreground'); } - &[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current']) { + &[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current'], [part~='preview']) { color: var-get($theme, 'date-disabled-range-foreground'); } } @@ -543,3 +537,22 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } } } + +[part~='date-inner'][part~='selected'][part~='inactive'][part~='first'], +[part~='date-inner'][part~='selected'][part~='inactive'][part~='last'] { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); + border-color: var-get($theme, 'date-selected-border-color'); + + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); + border-color: var-get($theme, 'date-selected-hover-border-color'); + } + + &:focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + border-color: var-get($theme, 'date-selected-focus-border-color'); + } +} diff --git a/src/components/calendar/themes/shared/material/days-view.material.scss b/src/components/calendar/themes/shared/material/days-view.material.scss index 9c4d9b476..59b574fe7 100644 --- a/src/components/calendar/themes/shared/material/days-view.material.scss +++ b/src/components/calendar/themes/shared/material/days-view.material.scss @@ -106,7 +106,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); background: var-get($theme, 'date-hover-background'); } - &[part~='inactive'] { + &[part~='inactive']:not([part~='selected'][part~='range'], [part~='disabled']) { color: var-get($theme, 'inactive-color'); } @@ -114,7 +114,8 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); color: var-get($theme, 'date-disabled-foreground'); } - &[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current']) { + &[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current'], [part~='preview']), + &[part~='disabled'][part~='range'][part~='inactive']:not([part~='special'],[part~='current'], [part~='preview'], [part~='first'], [part~='last']) { color: var-get($theme, 'date-disabled-range-foreground'); } } @@ -298,6 +299,8 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } } + &[part~='selected'][part~='special'][part~='first'], + &[part~='selected'][part~='special'][part~='last'], &[part~='special'][part~='range'][part~='first']:not([part~='preview']), &[part~='special'][part~='range'][part~='last']:not([part~='preview']) { &:hover { @@ -358,7 +361,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } // Dates inside the range, but not the first or last date of the range - &[part~='range']:not([part~='first'], [part~='last'], [part~='preview']) { + &[part~='range']:not([part~='first'], [part~='last'], [part~='preview'], [part~='disabled']) { color: var-get($theme, 'date-selected-range-foreground'); // 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'); } } } + +[part~='date-inner'][part~='selected'][part~='inactive'][part~='first'], +[part~='date-inner'][part~='selected'][part~='inactive'][part~='last'] { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); + border-color: var-get($theme, 'date-selected-border-color'); + + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); + border-color: var-get($theme, 'date-selected-hover-border-color'); + } + + &:focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + border-color: var-get($theme, 'date-selected-focus-border-color'); + } +} From 9664ae2874c18783f54e6f4cd84543bd492a25d4 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 21 Oct 2025 13:47:14 +0300 Subject: [PATCH 08/31] refactor(calendar): adjust inactive and disabled state per theme --- .../themes/shared/bootstrap/days-view.bootstrap.scss | 7 ++++++- .../calendar/themes/shared/fluent/days-view.fluent.scss | 6 ++++++ .../calendar/themes/shared/indigo/days-view.indigo.scss | 2 +- .../themes/shared/material/days-view.material.scss | 1 + 4 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss index c1baafb6f..6bb4c1706 100644 --- a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss +++ b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss @@ -143,7 +143,12 @@ $border-size: rem(1px); border-color: var-get($theme, 'date-focus-border-color'); } - &[part~='inactive']:not([part~='selected'][part~='range'], [part~='disabled']) { + &[part~='inactive'][part~='preview']:not([part~='disabled']), + &[part~='inactive'][part~='range']:not([part~='first'], [part~='last']) { + color: var-get($theme, 'date-selected-range-foreground'); + } + + &[part~='inactive']:not([part~='disabled']) { color: var-get($theme, 'inactive-color'); } diff --git a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss index 74ef9c345..90452d3c8 100644 --- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss @@ -72,6 +72,12 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); color: var-get($theme, 'inactive-color'); } + &[part~='inactive']:not([part~='preview']) { + &:hover { + color: var-get($theme, 'date-hover-foreground'); + } + } + &::after { content: ''; position: absolute; diff --git a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss index 1f0e95c20..38c450daa 100644 --- a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss @@ -105,7 +105,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); background: var-get($theme, 'date-hover-background'); } - &[part~='inactive']:not([part~='selected'][part~='range'], [part~='disabled']) { + &[part~='inactive']:not([part~='selected'][part~='range'] , [part~='disabled']) { color: var-get($theme, 'inactive-color'); } diff --git a/src/components/calendar/themes/shared/material/days-view.material.scss b/src/components/calendar/themes/shared/material/days-view.material.scss index 59b574fe7..7e8fc0b0e 100644 --- a/src/components/calendar/themes/shared/material/days-view.material.scss +++ b/src/components/calendar/themes/shared/material/days-view.material.scss @@ -110,6 +110,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); color: var-get($theme, 'inactive-color'); } + &[part~='disabled']:not([part~='selected'],[part~='special'],[part~='current']) { color: var-get($theme, 'date-disabled-foreground'); } From a45391bbe06ff04069e5e75b99f0b00cf03bbdfe Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 21 Oct 2025 14:24:36 +0300 Subject: [PATCH 09/31] fix(calendar): fix special + hover + preview + first/last --- .../shared/material/days-view.material.scss | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/components/calendar/themes/shared/material/days-view.material.scss b/src/components/calendar/themes/shared/material/days-view.material.scss index 7e8fc0b0e..c7db31b9b 100644 --- a/src/components/calendar/themes/shared/material/days-view.material.scss +++ b/src/components/calendar/themes/shared/material/days-view.material.scss @@ -274,28 +274,28 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); color: var-get($theme, 'date-special-range-foreground'); background: var-get($theme, 'date-special-range-background'); - &::after { - border-color: var-get($theme, 'date-special-range-border-color'); + &:hover { + color: var-get($theme, 'date-special-range-hover-foreground'); + background: var-get($theme, 'date-special-range-hover-background'); + + // stylelint-disable-next-line + &::after { + border-color: var-get($theme, 'date-special-hover-border-color'); + } } - } - &:hover { - color: var-get($theme, 'date-special-range-hover-foreground'); - background: var-get($theme, 'date-special-range-hover-background'); + &:focus { + color: var-get($theme, 'date-special-range-focus-foreground'); + background: var-get($theme, 'date-special-range-focus-background'); - // stylelint-disable-next-line - &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); + // stylelint-disable-next-line + &::after { + border-color: var-get($theme, 'date-special-focus-border-color'); + } } - } - - &:focus { - color: var-get($theme, 'date-special-range-focus-foreground'); - background: var-get($theme, 'date-special-range-focus-background'); - // stylelint-disable-next-line &::after { - border-color: var-get($theme, 'date-special-focus-border-color'); + border-color: var-get($theme, 'date-special-range-border-color'); } } } From 7d487efa34a0a82f5093f82b6f9ef77f862da4df Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 22 Oct 2025 11:47:46 +0300 Subject: [PATCH 10/31] refactor(calendar): add hover and focus styles for inactive and weekend states across themes --- .../shared/bootstrap/days-view.bootstrap.scss | 30 +++++++++++++------ .../shared/indigo/days-view.indigo.scss | 20 +++++++++++-- .../shared/material/days-view.material.scss | 19 ++++++++++-- 3 files changed, 56 insertions(+), 13 deletions(-) diff --git a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss index 6bb4c1706..6c3a54946 100644 --- a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss +++ b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss @@ -71,10 +71,6 @@ $border-size: rem(1px); color: var-get($theme, 'weekday-color'); } -[part~='weekend'] { - color: var-get($theme, 'weekend-color'); -} - [part~='date'] { height: var-get($theme, 'size'); border-top: $border-size solid transparent; @@ -143,13 +139,17 @@ $border-size: rem(1px); border-color: var-get($theme, 'date-focus-border-color'); } - &[part~='inactive'][part~='preview']:not([part~='disabled']), - &[part~='inactive'][part~='range']:not([part~='first'], [part~='last']) { - color: var-get($theme, 'date-selected-range-foreground'); - } - &[part~='inactive']:not([part~='disabled']) { + &[part~='inactive']:not([part~='selected'][part~='range'], [part~='range'], [part~='disabled'], [part~='first'], [part~='last']) { color: var-get($theme, 'inactive-color'); + + &:hover { + color: var-get($theme, 'date-hover-foreground'); + } + + &:focus { + color: var-get($theme, 'date-focus-foreground'); + } } &[part~='preview'][part~='first'], @@ -189,6 +189,18 @@ $border-size: rem(1px); color: var-get($theme, 'date-hover-foreground'); } + &[part~='weekend']:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='selected'], [part~='preview'], [part~='disabled']) { + color: var-get($theme, 'weekend-color'); + + &:hover { + color: var-get($theme, 'date-hover-foreground'); + } + + &:focus { + color: var-get($theme, 'date-focus-foreground'); + } + } + &[part~='range'][part~='selected']:not([part~='current'], [part~='special'], [part~='first'], [part~='last'], [part~='first'][part~='last']), &[part~='range'][part~='preview']:not([part~='current'], [part~='special'], [part~='first'], [part~='last'], [part~='disabled'], [part~='first'][part~='last']) { color: var-get($theme, 'date-selected-range-foreground'); diff --git a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss index 38c450daa..303d68619 100644 --- a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss @@ -105,8 +105,16 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); background: var-get($theme, 'date-hover-background'); } - &[part~='inactive']:not([part~='selected'][part~='range'] , [part~='disabled']) { + &[part~='inactive']:not([part~='selected'][part~='range'], [part~='disabled']) { color: var-get($theme, 'inactive-color'); + + &:hover { + color: var-get($theme, 'date-hover-foreground'); + } + + &:focus { + color: var-get($theme, 'date-focus-foreground'); + } } &[part~='disabled']:not([part~='selected'],[part~='special'],[part~='current']) { @@ -132,8 +140,16 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); border-color: var-get($theme, 'date-focus-border-color'); } - [part~='weekend'] { + &[part~='weekend']:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='selected'], [part~='disabled']) { color: var-get($theme, 'weekend-color'); + + &:hover { + color: var-get($theme, 'date-hover-foreground'); + } + + &:focus { + color: var-get($theme, 'date-focus-foreground'); + } } &[part~='selected'] { diff --git a/src/components/calendar/themes/shared/material/days-view.material.scss b/src/components/calendar/themes/shared/material/days-view.material.scss index c7db31b9b..f2c62764c 100644 --- a/src/components/calendar/themes/shared/material/days-view.material.scss +++ b/src/components/calendar/themes/shared/material/days-view.material.scss @@ -108,8 +108,15 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &[part~='inactive']:not([part~='selected'][part~='range'], [part~='disabled']) { color: var-get($theme, 'inactive-color'); - } + &:hover { + color: var-get($theme, 'date-hover-foreground'); + } + + &:focus { + color: var-get($theme, 'date-focus-foreground'); + } + } &[part~='disabled']:not([part~='selected'],[part~='special'],[part~='current']) { color: var-get($theme, 'date-disabled-foreground'); @@ -135,8 +142,16 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); border-color: var-get($theme, 'date-focus-border-color'); } - &[part~='weekend'] { + &[part~='weekend']:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='selected'], [part~='disabled']) { color: var-get($theme, 'weekend-color'); + + &:hover { + color: var-get($theme, 'date-hover-foreground'); + } + + &:focus { + color: var-get($theme, 'date-focus-foreground'); + } } &[part~='selected'] { From bec56592f4d92c359b01c030254796ec475eb49f Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 23 Oct 2025 11:22:28 +0300 Subject: [PATCH 11/31] fix(calendar): correct week number color in material theme --- .../calendar/themes/shared/material/days-view.material.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/calendar/themes/shared/material/days-view.material.scss b/src/components/calendar/themes/shared/material/days-view.material.scss index f2c62764c..60ca183ab 100644 --- a/src/components/calendar/themes/shared/material/days-view.material.scss +++ b/src/components/calendar/themes/shared/material/days-view.material.scss @@ -11,7 +11,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); color: var-get($theme, 'weekday-color'); [part~='week-number-inner'] { - color: var-get($theme, 'weekday-color'); + color: var-get($theme, 'week-number-foreground'); } } From 63a6223278cf4bfcd6f24e5925c643c47c8f70db Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 23 Oct 2025 15:14:08 +0300 Subject: [PATCH 12/31] fix(calendar): update border-radius styles for date states across all themes --- .../shared/bootstrap/days-view.bootstrap.scss | 46 +++++++- .../shared/fluent/days-view.fluent.scss | 111 +++++++++--------- .../shared/indigo/days-view.indigo.scss | 46 +++++++- .../shared/material/days-view.material.scss | 46 +++++++- 4 files changed, 190 insertions(+), 59 deletions(-) diff --git a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss index 6c3a54946..5d226fdbe 100644 --- a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss +++ b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss @@ -105,7 +105,7 @@ $border-size: rem(1px); height: var-get($theme, 'size'); width: var-get($theme, 'size'); background: var-get($theme, 'content-background'); - border-radius: var-get($theme, 'date-border-radius'); + border-radius: var-get($theme, 'date-range-border-radius'); } &::after { @@ -115,6 +115,20 @@ $border-size: rem(1px); } } + &[part~='range'][part~='first'][part~='special'], + &[part~='range'][part~='last'][part~='special'] { + &::before { + border-radius: var-get($theme, 'date-special-border-radius'); + } + } + + &[part~='range'][part~='first'][part~='current'], + &[part~='range'][part~='last'][part~='current'] { + &::before { + border-radius: var-get($theme, 'date-current-border-radius'); + } + } + &[part~='range'][part~='preview'][part~='first'], &[part~='range'][part~='preview'][part~='last'] { background: transparent; @@ -178,6 +192,35 @@ $border-size: rem(1px); &[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current']) { color: var-get($theme, 'date-disabled-range-foreground'); } + + &[part~='first'], + &[part~='last'] { + border-radius: var-get($theme, 'date-range-border-radius'); + + &::after { + border-radius: var-get($theme, 'date-range-border-radius'); + } + } + + &[part~='special'] { + border-radius: var-get($theme, 'date-special-border-radius'); + + &::after { + border-radius: var-get($theme, 'date-special-border-radius'); + } + } + + &[part~='current'] { + border-radius: var-get($theme, 'date-current-border-radius'); + } + + &[part~='special'][part~='current'] { + border-radius: var-get($theme, 'date-current-border-radius'); + + &::after { + border-radius: var-get($theme, 'date-current-border-radius'); + } + } } [part~='date-inner']:not([part~='inactive']) { @@ -285,7 +328,6 @@ $border-size: rem(1px); position: absolute; z-index: 0; border: rem(1px) solid var-get($theme, 'date-special-border-color'); - border-radius: calc(var-get($theme, 'size') / 2); width: var-get($theme, 'size'); height: var-get($theme, 'size'); box-sizing: border-box; diff --git a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss index 90452d3c8..c9f46efef 100644 --- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss @@ -68,6 +68,16 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); height: var-get($theme, 'size'); border-radius: var-get($theme, 'date-border-radius'); + &::after { + content: ''; + position: absolute; + z-index: 0; + border: $border-size solid transparent; + border-radius: inherit; + width: var-get($theme, 'inner-size'); + height: var-get($theme, 'inner-size'); + } + &[part~='inactive']:not([part~='selected'][part~='range']) { color: var-get($theme, 'inactive-color'); } @@ -78,16 +88,6 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } - &::after { - content: ''; - position: absolute; - z-index: 0; - border: $border-size solid transparent; - border-radius: 50%; - width: var-get($theme, 'inner-size'); - height: var-get($theme, 'inner-size'); - } - &[part~='disabled']:not([part~='special'],[part~='current'], [part~='disabled']) { color: var-get($theme, 'date-disabled-foreground'); } @@ -103,6 +103,30 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); &[part~='range'] { height: 100%; + border-radius: var-get($theme, 'date-range-border-radius'); + } + + &[part~='selected'][part~='first'][part~='last'] { + border-radius: var-get($theme, 'date-range-border-radius'); + } + + &[part~='special'] { + &::after { + border-radius: var-get($theme, 'date-special-border-radius'); + } + } + + &[part~='current'] { + &::before { + border-radius: var-get($theme, 'date-current-border-radius'); + } + } + + &[part~='current'][part~='special'] { + &::before, + &::after { + border-radius: var-get($theme, 'date-current-border-radius'); + } } } @@ -128,7 +152,6 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); position: absolute; z-index: 0; border: $border-size solid transparent; - border-radius: 50%; width: var-get($theme, 'inner-size'); height: var-get($theme, 'inner-size'); } @@ -137,33 +160,24 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); &[part~='selected'][part~='first'][part~='last'] { background: transparent; border-color: var-get($theme, 'date-range-preview-border-color'); - border-radius: var-get($theme, 'date-range-border-radius'); } - &[part~='selected'] { + + &[part~='selected']:not([part~='range']) { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); + border-color: var-get($theme, 'date-selected-border-color'); &:hover { color: var-get($theme, 'date-selected-hover-foreground'); background: var-get($theme, 'date-selected-hover-background'); - } - - &:focus { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); - } - } - - &[part~='selected']:not(&[part~='range']) { - border-color: var-get($theme, 'date-selected-border-color'); - - &:hover { border-color: var-get($theme, 'date-selected-hover-border-color'); } &:focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); border-color: var-get($theme, 'date-selected-focus-border-color'); } } @@ -186,8 +200,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); &[part~='selected'][part~='first'], &[part~='selected'][part~='last'] { - border-top-color: var-get($theme, 'date-range-border-color'); - border-bottom-color: var-get($theme, 'date-range-border-color'); + border-inline-color: transparent; &:hover, &:focus { @@ -195,22 +208,6 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } - &[part~='selected'][part~='first'] { - border-color: transparent; - border-start-start-radius: var-get($theme, 'date-range-border-radius'); - border-end-start-radius: var-get($theme, 'date-range-border-radius'); - border-start-end-radius: var-get($theme, 'date-border-radius'); - border-end-end-radius: var-get($theme, 'date-border-radius'); - } - - &[part~='selected'][part~='last'] { - border-color: transparent; - border-start-end-radius: var-get($theme, 'date-range-border-radius'); - border-end-end-radius: var-get($theme, 'date-range-border-radius'); - border-start-start-radius: var-get($theme, 'date-border-radius'); - border-end-start-radius: var-get($theme, 'date-border-radius'); - } - &[part~='selected'] { &:hover { background: var-get($theme, 'date-selected-range-hover-background'); @@ -269,7 +266,6 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); z-index: -1; width: var-get($theme, 'inner-size'); height: var-get($theme, 'inner-size'); - border-radius: 50%; background: var-get($theme, 'date-current-background'); border-color: var-get($theme, 'date-current-border-color'); } @@ -369,12 +365,16 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } &:hover { + color: var-get($theme, 'date-current-hover-foreground'); + &::after { border-color: var-get($theme, 'date-selected-current-hover-foreground'); } } &:focus { + color: var-get($theme, 'date-current-focus-foreground'); + &::after { border-color: var-get($theme, 'date-selected-current-focus-foreground'); } @@ -394,10 +394,6 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); &[part~='first'], &[part~='last'] { - &::after { - width: $fake-bg-size; - } - background: transparent; &::before, @@ -405,11 +401,6 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); height: var-get($theme, 'size'); } - &::after { - background: var-get($theme, 'date-selected-range-background'); - border-block: $border-size solid var-get($theme, 'date-selected-range-background'); - } - &::before { content: ''; position: absolute; @@ -418,11 +409,19 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); z-index: 3; pointer-events: none; } + + &::after { + width: $fake-bg-size; + background: var-get($theme, 'date-selected-range-background'); + border-block: $border-size solid var-get($theme, 'date-selected-range-background'); + } } &[part~='first'] { &::after { inset-inline-start: $fake-bg-position; + border-start-start-radius: var-get($theme, 'date-range-border-radius'); + border-end-start-radius: var-get($theme, 'date-range-border-radius'); } &::before { @@ -438,6 +437,12 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } &[part~='last'] { + &::after { + inset-inline-end: $fake-bg-position; + border-start-end-radius: var-get($theme, 'date-range-border-radius'); + border-end-end-radius: var-get($theme, 'date-range-border-radius'); + } + &::before { inset-inline-start: initial; border-inline: $border-size solid; diff --git a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss index 303d68619..9ee8dec1c 100644 --- a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss @@ -65,7 +65,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); height: var-get($theme, 'size'); width: var-get($theme, 'size'); background: var-get($theme, 'content-background'); - border-radius: var-get($theme, 'date-border-radius'); + border-radius: var-get($theme, 'date-range-border-radius'); } &::after { @@ -74,6 +74,20 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } } + &[part~='range'][part~='first'][part~='special'], + &[part~='range'][part~='last'][part~='special'] { + &::before { + border-radius: var-get($theme, 'date-special-border-radius'); + } + } + + &[part~='range'][part~='first'][part~='current'], + &[part~='range'][part~='last'][part~='current'] { + &::before { + border-radius: var-get($theme, 'date-current-border-radius'); + } + } + &[part~='range'][part~='preview'] { background: transparent; border-top: $border-width dashed var-get($theme, 'date-range-preview-border-color'); @@ -124,6 +138,35 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current'], [part~='preview']) { color: var-get($theme, 'date-disabled-range-foreground'); } + + &[part~='first'], + &[part~='last'] { + border-radius: var-get($theme, 'date-range-border-radius'); + + &::after { + border-radius: var-get($theme, 'date-range-border-radius'); + } + } + + &[part~='special'] { + border-radius: var-get($theme, 'date-special-border-radius'); + + &::after { + border-radius: var-get($theme, 'date-special-border-radius'); + } + } + + &[part~='current'] { + border-radius: var-get($theme, 'date-current-border-radius'); + } + + &[part~='special'][part~='current'] { + border-radius: var-get($theme, 'date-current-border-radius'); + + &::after { + border-radius: var-get($theme, 'date-current-border-radius'); + } + } } [part~='date-inner']:not([part~='inactive']) { @@ -396,7 +439,6 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); position: absolute; z-index: 0; border: rem(2px) solid transparent; - border-radius: inherit; width: var-get($theme, 'inner-size'); height: var-get($theme, 'inner-size'); box-sizing: border-box; diff --git a/src/components/calendar/themes/shared/material/days-view.material.scss b/src/components/calendar/themes/shared/material/days-view.material.scss index 60ca183ab..31f0850fe 100644 --- a/src/components/calendar/themes/shared/material/days-view.material.scss +++ b/src/components/calendar/themes/shared/material/days-view.material.scss @@ -65,7 +65,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); height: var-get($theme, 'size'); width: var-get($theme, 'size'); background: var-get($theme, 'content-background'); - border-radius: var-get($theme, 'date-border-radius'); + border-radius: var-get($theme, 'date-range-border-radius'); } &::after { @@ -75,6 +75,20 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } } + &[part~='range'][part~='first'][part~='special'], + &[part~='range'][part~='last'][part~='special'] { + &::before { + border-radius: var-get($theme, 'date-special-border-radius'); + } + } + + &[part~='range'][part~='first'][part~='current'], + &[part~='range'][part~='last'][part~='current'] { + &::before { + border-radius: var-get($theme, 'date-current-border-radius'); + } + } + &[part~='range'][part~='preview'] { background: transparent; border-top: $border-width dashed var-get($theme, 'date-range-preview-border-color'); @@ -126,6 +140,35 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &[part~='disabled'][part~='range'][part~='inactive']:not([part~='special'],[part~='current'], [part~='preview'], [part~='first'], [part~='last']) { color: var-get($theme, 'date-disabled-range-foreground'); } + + &[part~='first'], + &[part~='last'] { + border-radius: var-get($theme, 'date-range-border-radius'); + + &::after { + border-radius: var-get($theme, 'date-range-border-radius'); + } + } + + &[part~='special'] { + border-radius: var-get($theme, 'date-special-border-radius'); + + &::after { + border-radius: var-get($theme, 'date-special-border-radius'); + } + } + + &[part~='current'] { + border-radius: var-get($theme, 'date-current-border-radius'); + } + + &[part~='special'][part~='current'] { + border-radius: var-get($theme, 'date-current-border-radius'); + + &::after { + border-radius: var-get($theme, 'date-current-border-radius'); + } + } } [part~='date-inner']:not([part~='inactive']) { @@ -232,7 +275,6 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); position: absolute; z-index: 0; border: $inner-border-width solid var-get($theme, 'date-special-border-color'); - border-radius: inherit; width: var-get($theme, 'size'); height: var-get($theme, 'size'); box-sizing: border-box; From b0557026dca7b2b630ca3be6e04d2982c50d045d Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 23 Oct 2025 17:12:03 +0300 Subject: [PATCH 13/31] fix(calendar): fix bootstrap radius regression - update the selected date border in range selection in material theme --- .../themes/shared/bootstrap/days-view.bootstrap.scss | 2 +- .../themes/shared/material/days-view.material.scss | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss index 5d226fdbe..7501c0676 100644 --- a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss +++ b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss @@ -218,7 +218,7 @@ $border-size: rem(1px); border-radius: var-get($theme, 'date-current-border-radius'); &::after { - border-radius: var-get($theme, 'date-current-border-radius'); + border-radius: var-get($theme, 'date-special-border-radius'); } } } diff --git a/src/components/calendar/themes/shared/material/days-view.material.scss b/src/components/calendar/themes/shared/material/days-view.material.scss index 31f0850fe..0cb5b3733 100644 --- a/src/components/calendar/themes/shared/material/days-view.material.scss +++ b/src/components/calendar/themes/shared/material/days-view.material.scss @@ -419,12 +419,13 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } // Dates inside the range, but not the first or last date of the range - &[part~='range']:not([part~='first'], [part~='last'], [part~='preview'], [part~='disabled']) { + &[part~='range']:not([part~='first'], [part~='last'], [part~='preview'], [part~='disabled'], [part~='special'], [part~='current']) { color: var-get($theme, 'date-selected-range-foreground'); - // Since for the idle: selected, current and special dates we have background, we need to - // override it here for the range dates, so the range background is visible. + // Since for the idle selected dates we have background and border, we need to + // override it here, so the range background is visible. background: transparent; + border-color: transparent; &:hover { color: var-get($theme, 'date-selected-range-hover-foreground'); From 1b96667db2030d5fbcd7b574740667f98ebc7ec6 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 23 Oct 2025 22:33:09 +0300 Subject: [PATCH 14/31] fix(calendar): refine special date styles for indigo theme - Update color values for special range states (hover, focus, border, etc.). - Add foreground color for non-selected special+current date states. --- .../themes/shared/indigo/days-view.indigo.scss | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss index 9ee8dec1c..5174968b2 100644 --- a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss @@ -287,33 +287,33 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } &[part~='selected'][part~='current'][part~='range'][part~='special'] { - color: var-get($theme, 'date-special-foreground'); + color: var-get($theme, 'date-special-range-foreground'); background: var-get($theme, 'date-current-background'); &:hover { - color: var-get($theme, 'date-special-hover-foreground'); + color: var-get($theme, 'date-special-range-hover-foreground'); background: var-get($theme, 'date-selected-current-range-hover-background'); /* stylelint-disable max-nesting-depth */ &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); + border-color: var-get($theme, 'date-special-range-hover-border-color'); } /* stylelint-enable */ } &:focus { - color: var-get($theme, 'date-special-focus-foreground'); + color: var-get($theme, 'date-special-range-focus-foreground'); background: var-get($theme, 'date-selected-current-range-focus-background'); /* stylelint-disable max-nesting-depth */ &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); + border-color: var-get($theme, 'date-special-range-hover-border-color'); } /* stylelint-enable */ } &::after { - border-color: var-get($theme, 'date-special-border-color'); + border-color: var-get($theme, 'date-special-range-border-color'); } } @@ -549,10 +549,12 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } &[part~='special'][part~='current']:not([part~='selected']) { + color: var-get($theme, 'date-special-foreground'); background: var-get($theme, 'date-current-background'); border-color: var-get($theme, 'date-current-border-color'); &:hover { + color: var-get($theme, 'date-special-hover-foreground'); background: var-get($theme, 'date-current-hover-background'); border-color: var-get($theme, 'date-current-hover-border-color'); @@ -562,6 +564,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } &:focus { + color: var-get($theme, 'date-special-focus-foreground'); background: var-get($theme, 'date-current-focus-background'); border-color: var-get($theme, 'date-current-focus-border-color'); From a8707ef8d5ec2bc71e8d638dc36bb009fbe8f679 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 27 Oct 2025 17:10:43 +0200 Subject: [PATCH 15/31] 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. --- .../shared/fluent/days-view.fluent.scss | 171 +++++++++++------- .../shared/indigo/days-view.indigo.scss | 15 +- .../shared/material/days-view.material.scss | 29 +-- 3 files changed, 138 insertions(+), 77 deletions(-) diff --git a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss index c9f46efef..295cb6bc3 100644 --- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss @@ -68,16 +68,6 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); height: var-get($theme, 'size'); border-radius: var-get($theme, 'date-border-radius'); - &::after { - content: ''; - position: absolute; - z-index: 0; - border: $border-size solid transparent; - border-radius: inherit; - width: var-get($theme, 'inner-size'); - height: var-get($theme, 'inner-size'); - } - &[part~='inactive']:not([part~='selected'][part~='range']) { color: var-get($theme, 'inactive-color'); } @@ -88,7 +78,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } - &[part~='disabled']:not([part~='special'],[part~='current'], [part~='disabled']) { + &[part~='disabled']:not([part~='special'],[part~='current']) { color: var-get($theme, 'date-disabled-foreground'); } @@ -147,23 +137,18 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); [part~='date-inner']:not([part~='inactive']) { border-color: var-get($theme, 'date-border-color'); - &::after { - content: ''; - position: absolute; - z-index: 0; - border: $border-size solid transparent; - width: var-get($theme, 'inner-size'); - height: var-get($theme, 'inner-size'); - } - // This selector works only in range selection since firs and last are present only in the range selection &[part~='selected'][part~='first'][part~='last'] { background: transparent; border-color: var-get($theme, 'date-range-preview-border-color'); - } + &:hover, + &:focus { + background: transparent; + } + } - &[part~='selected']:not([part~='range']) { + &[part~='selected']:where(:not([part~='range'])) { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); border-color: var-get($theme, 'date-selected-border-color'); @@ -255,11 +240,74 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } - &[part~='current'] { - position: relative; - overflow: hidden; - color: var-get($theme, 'date-current-foreground'); + // SPECIAL + &[part~='special'] { + &::after { + content: ''; + position: absolute; + z-index: -1; + border: $border-size solid transparent; + width: var-get($theme, 'inner-size'); + height: var-get($theme, 'inner-size'); + } + } + + &[part~='special']:not([part~='selected'], [part~='current']) { + color: var-get($theme, 'date-special-foreground'); + + &::after { + background: var-get($theme, 'date-special-background'); + border-color: var-get($theme, 'date-special-border-color') + } + + &:hover { + color: var-get($theme, 'date-special-hover-foreground'); + + &::after { + background: var-get($theme, 'date-special-hover-background'); + border-color: var-get($theme, 'date-special-hover-border-color') + } + } + + &:focus { + color: var-get($theme, 'date-special-focus-foreground'); + + &::after { + background: var-get($theme, 'date-special-focus-background'); + border-color: var-get($theme, 'date-special-hover-border-color') + } + } + } + + &[part~='special'][part~='selected']:not([part~='current']) { + color: var-get($theme, 'date-selected-special-foreground'); + + &::after { + background: var-get($theme, 'date-selected-special-background'); + border-color: var-get($theme, 'date-selected-special-border-color'); + } + + &:hover { + color: var-get($theme, 'date-selected-special-hover-foreground'); + + &::after { + background: var-get($theme, 'date-selected-special-hover-background'); + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + } + + &:focus { + color: var-get($theme, 'date-selected-special-focus-foreground'); + + &::after { + background: var-get($theme, 'date-selected-special-focus-background'); + border-color: var-get($theme, 'date-selected-special-focus-border-color'); + } + } + } + // CURRENT + &[part~='current'] { &::before { content: ''; position: absolute; @@ -267,8 +315,15 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); width: var-get($theme, 'inner-size'); height: var-get($theme, 'inner-size'); background: var-get($theme, 'date-current-background'); - border-color: var-get($theme, 'date-current-border-color'); + border: 1px solid var-get($theme, 'date-current-border-color'); + box-sizing: border-box; } + } + + &[part~='current']:not([part~='selected'], [part~='special']) { + position: relative; + overflow: hidden; + color: var-get($theme, 'date-current-foreground'); &:hover { color: var-get($theme, 'date-current-hover-foreground'); @@ -289,7 +344,9 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } - &[part~='selected'][part~='current'] { + &[part~='current'][part~='selected']:not([part~='special']) { + color: var-get($theme, 'date-selected-current-foreground'); + &::before { background: var-get($theme, 'date-selected-current-background'); border-color: var-get($theme, 'date-selected-current-border-color'); @@ -310,72 +367,62 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } - &[part~='special'] { - color: var-get($theme, 'date-special-foreground'); - background: var-get($theme, 'date-special-background'); - + // CURRENT + SPECIAL + &[part~='current'][part~='special'] { &::after { - border-color: var-get($theme, 'date-special-border-color') - } - - &:hover { - color: var-get($theme, 'date-hover-foreground'); - background: var-get($theme, 'date-hover-background'); - - &::after { - border-color: var-get($theme, 'date-special-hover-border-color') - } - } - - &:focus { - color: var-get($theme, 'date-focus-foreground'); - background: var-get($theme, 'date-focus-background'); - - &::after { - border-color: var-get($theme, 'date-special-hover-border-color') - } + width: calc(var-get($theme, 'inner-size') - #{rem(4px)}); + height: calc(var-get($theme, 'inner-size') - #{rem(4px)}); } } - &[part~='selected'][part~='special'] { + &[part~='current'][part~='special']:not([part~='selected']) { + color: var-get($theme, 'date-current-foreground'); + &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-foreground'); } &:hover { + color: var-get($theme, 'date-current-hover-foreground'); + &::after { - border-color: var-get($theme, 'date-selected-special-hover-border-color'); + background: var-get($theme, 'date-current-hover-background'); + border-color: var-get($theme, 'date-current-hover-foreground'); } } &:focus { + color: var-get($theme, 'date-current-focus-foreground'); + &::after { - border-color: var-get($theme, 'date-selected-special-focus-border-color'); + background: var-get($theme, 'date-current-focus-background'); + border-color: var-get($theme, 'date-current-focus-foreground'); } } } - &[part~='current'][part~='special'] { - color: var-get($theme, 'date-current-foreground'); + &[part~='current'][part~='special'][part~='selected'] { + color: var-get($theme, 'date-selected-current-foreground'); &::after { + background: var-get($theme, 'date-selected-current-background'); border-color: var-get($theme, 'date-selected-current-foreground'); - width: calc(var-get($theme, 'inner-size') - #{rem(4px)}); - height: calc(var-get($theme, 'inner-size') - #{rem(4px)}); } &:hover { - color: var-get($theme, 'date-current-hover-foreground'); + color: var-get($theme, 'date-selected-current-hover-foreground'); &::after { - border-color: var-get($theme, 'date-selected-current-hover-foreground'); + background: var-get($theme, 'date-selected-current-hover-background'); } } &:focus { - color: var-get($theme, 'date-current-focus-foreground'); + color: var-get($theme, 'date-selected-current-focus-foreground'); &::after { + background: var-get($theme, 'date-selected-current-focus-background'); border-color: var-get($theme, 'date-selected-current-focus-foreground'); } } diff --git a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss index 5174968b2..78a1457e3 100644 --- a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss @@ -55,11 +55,13 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &[part~='range'] { background: var-get($theme, 'date-selected-range-background'); + border-block: $border-width solid var-get($theme, 'date-range-border-color'); } &[part~='range'][part~='first'], &[part~='range'][part~='last'] { background: transparent; + border-block: transparent; &::before { height: var-get($theme, 'size'); @@ -71,6 +73,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &::after { height: var-get($theme, 'size'); background: var-get($theme, 'date-selected-range-background'); + border-block: $border-width solid var-get($theme, 'date-range-border-color'); } } @@ -135,7 +138,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); color: var-get($theme, 'date-disabled-foreground'); } - &[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current'], [part~='preview']) { + &[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current'], [part~='preview'], [part~='first'], [part~='last']) { color: var-get($theme, 'date-disabled-range-foreground'); } @@ -198,15 +201,18 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &[part~='selected'] { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); + border-color: var-get($theme, 'date-selected-border-color'); &:hover { color: var-get($theme, 'date-selected-hover-foreground'); background: var-get($theme, 'date-selected-hover-background'); + border-color: var-get($theme, 'date-selected-hover-border-color'); } &:focus { color: var-get($theme, 'date-selected-focus-foreground'); background: var-get($theme, 'date-selected-focus-background'); + border-color: var-get($theme, 'date-selected-focus-border-color'); } &[part~='range'][part~='special'][part~='first'], @@ -234,7 +240,6 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &[part~='range'] { color: var-get($theme, 'date-selected-range-foreground'); - background: transparent; &:hover { color: var-get($theme, 'date-selected-range-hover-foreground'); @@ -597,6 +602,12 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); height: var-get($theme, 'inner-size'); } } + + + &[part~='range']:not([part~='first'], [part~='last'], [part~='preview'], [part~='special'], [part~='current']) { + background: transparent; + border-color: transparent; + } } [part~='date-inner'][part~='selected'][part~='inactive'][part~='first'], diff --git a/src/components/calendar/themes/shared/material/days-view.material.scss b/src/components/calendar/themes/shared/material/days-view.material.scss index 0cb5b3733..d564cdb37 100644 --- a/src/components/calendar/themes/shared/material/days-view.material.scss +++ b/src/components/calendar/themes/shared/material/days-view.material.scss @@ -136,8 +136,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); color: var-get($theme, 'date-disabled-foreground'); } - &[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current'], [part~='preview']), - &[part~='disabled'][part~='range'][part~='inactive']:not([part~='special'],[part~='current'], [part~='preview'], [part~='first'], [part~='last']) { + &[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current'], [part~='preview'], [part~='first'], [part~='last']) { color: var-get($theme, 'date-disabled-range-foreground'); } @@ -331,13 +330,17 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); color: var-get($theme, 'date-special-range-foreground'); background: var-get($theme, 'date-special-range-background'); + &::after { + border-color: var-get($theme, 'date-special-range-border-color'); + } + &:hover { color: var-get($theme, 'date-special-range-hover-foreground'); background: var-get($theme, 'date-special-range-hover-background'); // stylelint-disable-next-line &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); + border-color: var-get($theme, 'date-special-range-hover-border-color'); } } @@ -347,13 +350,9 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); // stylelint-disable-next-line &::after { - border-color: var-get($theme, 'date-special-focus-border-color'); + border-color: var-get($theme, 'date-special-range-focus-border-color'); } } - - &::after { - border-color: var-get($theme, 'date-special-range-border-color'); - } } } @@ -422,11 +421,6 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &[part~='range']:not([part~='first'], [part~='last'], [part~='preview'], [part~='disabled'], [part~='special'], [part~='current']) { color: var-get($theme, 'date-selected-range-foreground'); - // Since for the idle selected dates we have background and border, we need to - // override it here, so the range background is visible. - background: transparent; - border-color: transparent; - &:hover { color: var-get($theme, 'date-selected-range-hover-foreground'); background: var-get($theme, 'date-selected-range-hover-background'); @@ -437,6 +431,15 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); background: var-get($theme, 'date-selected-range-focus-background'); } } + + &[part~='range']:not([part~='first'], [part~='last'], [part~='preview'], [part~='special'], [part~='current']) { + background: transparent; + border-color: transparent; + } + + &[part~='disabled']:not([part~='first'], [part~='last'], [part~='special'], [part~='current']) { + border-color: transparent; + } } [part~='date-inner'][part~='selected'][part~='inactive'][part~='first'], From edd1978dbf9d3c51ec29005bd0e393d9279fa751 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 29 Oct 2025 09:21:43 +0200 Subject: [PATCH 16/31] fix(calendar): fix some issues in fluent theme --- .../shared/fluent/days-view.fluent.scss | 122 ++++++++++++++---- 1 file changed, 97 insertions(+), 25 deletions(-) diff --git a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss index 295cb6bc3..4c16395c5 100644 --- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss @@ -68,7 +68,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); height: var-get($theme, 'size'); border-radius: var-get($theme, 'date-border-radius'); - &[part~='inactive']:not([part~='selected'][part~='range']) { + &[part~='inactive']:where(:not([part~='selected'][part~='range'])) { color: var-get($theme, 'inactive-color'); } @@ -178,8 +178,8 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } &:focus { - color: var-get($theme, 'date-selected-range-hover-foreground'); - background: var-get($theme, 'date-selected-range-hover-background'); + color: var-get($theme, 'date-selected-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); } } @@ -274,7 +274,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); &::after { background: var-get($theme, 'date-special-focus-background'); - border-color: var-get($theme, 'date-special-hover-border-color') + border-color: var-get($theme, 'date-special-focus-border-color') } } } @@ -318,55 +318,66 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); border: 1px solid var-get($theme, 'date-current-border-color'); box-sizing: border-box; } - } - - &[part~='current']:not([part~='selected'], [part~='special']) { - position: relative; - overflow: hidden; - color: var-get($theme, 'date-current-foreground'); &:hover { - color: var-get($theme, 'date-current-hover-foreground'); - &::before { - background: var-get($theme, 'date-current-hover-background'); border-color: var-get($theme, 'date-current-hover-border-color'); } } &:focus { - color: var-get($theme, 'date-current-focus-foreground'); - &::before { - background: var-get($theme, 'date-current-focus-background'); border-color: var-get($theme, 'date-current-focus-border-color'); } } } - &[part~='current'][part~='selected']:not([part~='special']) { - color: var-get($theme, 'date-selected-current-foreground'); - + &[part~='current'][part~='selected'] { &::before { - background: var-get($theme, 'date-selected-current-background'); border-color: var-get($theme, 'date-selected-current-border-color'); } &:hover { &::before { - background: var-get($theme, 'date-selected-current-hover-background'); border-color: var-get($theme, 'date-selected-current-hover-border-color'); } } &:focus { &::before { - background: var-get($theme, 'date-selected-current-focus-background'); border-color: var-get($theme, 'date-selected-current-focus-border-color'); } } } + &[part~='current']:not([part~='selected'], [part~='special']) { + position: relative; + overflow: hidden; + color: var-get($theme, 'date-current-foreground'); + + &:hover { + color: var-get($theme, 'date-current-hover-foreground'); + + &::before { + background: var-get($theme, 'date-current-hover-background'); + border-color: var-get($theme, 'date-current-hover-border-color'); + } + } + + &:focus { + color: var-get($theme, 'date-current-focus-foreground'); + + &::before { + background: var-get($theme, 'date-current-focus-background'); + border-color: var-get($theme, 'date-current-focus-border-color'); + } + } + } + + &[part~='current'][part~='selected']:not([part~='special']) { + color: var-get($theme, 'date-selected-current-foreground'); + } + // CURRENT + SPECIAL &[part~='current'][part~='special'] { &::after { @@ -427,6 +438,64 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } } + + // RANGE + // special + range + &[part~='special'][part~='range']:where(:not([part~='current'], [part~='preview'])) { + color: var-get($theme, 'date-special-range-foreground'); + + &::after { + background: var-get($theme, 'date-special-range-background'); + border-color: var-get($theme, 'date-special-range-border-color') + } + + &:hover { + color: var-get($theme, 'date-special-range-hover-foreground'); + + &::after { + background: var-get($theme, 'date-special-range-hover-background'); + border-color: var-get($theme, 'date-special-range-hover-border-color') + } + } + + &:focus { + color: var-get($theme, 'date-special-range-focus-foreground'); + + &::after { + background: var-get($theme, 'date-special-range-focus-background'); + border-color: var-get($theme, 'date-special-range-focus-border-color') + } + } + } + + &[part~='special'][part~='preview']:not([part~='current']), + &[part~='special'][part~='first'][part~='last']:not([part~='current']), + &[part~='special'][part~='selected'][part~='preview']:not([part~='current']) { + color: var-get($theme, 'date-special-foreground'); + + &::after { + background: var-get($theme, 'date-special-background'); + border-color: var-get($theme, 'date-special-border-color') + } + + &:hover { + color: var-get($theme, 'date-special-foreground'); + + &::after { + background: var-get($theme, 'date-special-background'); + border-color: var-get($theme, 'date-special-border-color') + } + } + + &:focus { + color: var-get($theme, 'date-special-foreground'); + + &::after { + background: var-get($theme, 'date-special-background'); + border-color: var-get($theme, 'date-special-border-color') + } + } + } } [part~='date'][part~='range'] + [part~='date'][part~='range'][part~='last'] { @@ -441,8 +510,6 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); &[part~='first'], &[part~='last'] { - background: transparent; - &::before, &::after { height: var-get($theme, 'size'); @@ -460,10 +527,15 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); &::after { width: $fake-bg-size; background: var-get($theme, 'date-selected-range-background'); - border-block: $border-size solid var-get($theme, 'date-selected-range-background'); + border-block: $border-size solid var-get($theme, 'date-range-border-color'); } } + &[part~='first']:not([part~='disabled']), + &[part~='last']:not([part~='disabled']) { + background: transparent; + } + &[part~='first'] { &::after { inset-inline-start: $fake-bg-position; From 23c1a3af69e08d7feb8db92419c8c5348f50f932 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 29 Oct 2025 14:47:36 +0200 Subject: [PATCH 17/31] fix(calendar): refine hover and selected styles in fluent theme - Exclude first/last and preview parts from hover and selected state styles. --- .../calendar/themes/shared/fluent/days-view.fluent.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss index 4c16395c5..997e37f05 100644 --- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss @@ -120,7 +120,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } -[part~='date-inner']:not([part~='preview']) { +[part~='date-inner']:not([part~='preview'], [part~='first'][part~='last']) { &:hover { color: var-get($theme, 'date-hover-foreground'); background: var-get($theme, 'date-hover-background'); @@ -148,7 +148,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } - &[part~='selected']:where(:not([part~='range'])) { + &[part~='selected']:where(:not([part~='range'], [part~='first'][part~='last'])) { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); border-color: var-get($theme, 'date-selected-border-color'); @@ -203,7 +203,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } - &[part~='selected']:not([part~='disabled']) { + &[part~='selected']:not([part~='disabled'], [part~='preview']) { color: var-get($theme, 'date-selected-range-foreground'); &:hover { From f4e27326d61e19cb39f8feb158a16ba7d76a9ef1 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 30 Oct 2025 14:21:08 +0200 Subject: [PATCH 18/31] fix(calendar): refine fluent theme date styles - Adjust hover, focus, and border styles for improved clarity and consistency. - Add specific styles for selected, range, preview, and current date combinations. - Update range preview styles and refine special+current+range states. --- .../shared/fluent/days-view.fluent.scss | 95 ++++++++++++++----- 1 file changed, 72 insertions(+), 23 deletions(-) diff --git a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss index 997e37f05..6375776ae 100644 --- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss @@ -40,7 +40,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); background: var-get($theme, 'week-number-background'); border-inline-start: rem(1px) solid var-get($theme, 'week-number-background'); border-inline-end: rem(1px) solid var-get($theme, 'week-number-background'); - border-inline-end-color: var-get($theme, 'date-border-color'); + border-inline-end-color: var-get($theme, 'week-number-background'); } } @@ -124,18 +124,27 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); &:hover { color: var-get($theme, 'date-hover-foreground'); background: var-get($theme, 'date-hover-background'); - border-color: var-get($theme, 'date-hover-border-color'); } &:focus { color: var-get($theme, 'date-focus-foreground'); background: var-get($theme, 'date-focus-background'); - border-color: var-get($theme, 'date-focus-border-color'); } } [part~='date-inner']:not([part~='inactive']) { - border-color: var-get($theme, 'date-border-color'); + &:not([part~='selected'], [part~='preview'], [part~='range'], [part~='first'][part~='last']) + { + border-color: var-get($theme, 'date-border-color'); + + &:hover { + border-color: var-get($theme, 'date-hover-border-color'); + } + + &:focus { + border-color: var-get($theme, 'date-focus-border-color'); + } + } // This selector works only in range selection since firs and last are present only in the range selection &[part~='selected'][part~='first'][part~='last'] { @@ -215,22 +224,6 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } - &[part~='selected'][part~='current']:not([part~='inactive']) { - color: var-get($theme, 'date-selected-current-foreground'); - - &:focus { - color: var-get($theme, 'date-selected-current-focus-foreground'); - } - - &:hover { - color: var-get($theme, 'date-selected-current-hover-foreground'); - } - } - - &[part~='selected'][part~='current'] { - color: var-get($theme, 'date-selected-foreground'); - } - &[part~='preview'] { background: transparent !important; @@ -335,17 +328,20 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); &[part~='current'][part~='selected'] { &::before { border-color: var-get($theme, 'date-selected-current-border-color'); + background: var-get($theme, 'date-selected-current-background'); } &:hover { &::before { border-color: var-get($theme, 'date-selected-current-hover-border-color'); + background: var-get($theme, 'date-selected-current-hover-background'); } } &:focus { &::before { border-color: var-get($theme, 'date-selected-current-focus-border-color'); + background: var-get($theme, 'date-selected-current-focus-background'); } } } @@ -426,6 +422,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); &::after { background: var-get($theme, 'date-selected-current-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-foreground'); } } @@ -439,9 +436,37 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } + &[part~='current'][part~='special'][part~='range']:not([part~='preview'], [part~='first'][part~='last']), + &[part~='current'][part~='range']:not([part~='preview'], [part~='first'][part~='last']) { + color: var-get($theme, 'date-selected-current-range-foreground'); + + &::before, + &::after { + background: var-get($theme, 'date-selected-current-range-background'); + } + + &:hover { + color: var-get($theme, 'date-selected-current-range-hover-foreground'); + + &::before, + &::after { + background: var-get($theme, 'date-selected-current-range-hover-background'); + } + } + + &:focus { + color: var-get($theme, 'date-selected-current-range-focus-foreground'); + + &::before, + &::after { + background: var-get($theme, 'date-selected-current-range-focus-background'); + } + } + } + // RANGE // special + range - &[part~='special'][part~='range']:where(:not([part~='current'], [part~='preview'])) { + &[part~='special'][part~='range'][part~='selected']:where(:not([part~='current'], [part~='preview'])) { color: var-get($theme, 'date-special-range-foreground'); &::after { @@ -574,13 +599,29 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } + &[part~='preview'][part~='first'] { + &::before { + border-inline-start-color: var-get($theme, 'date-range-preview-border-color'); + } + } + + &[part~='preview'][part~='last'] { + &::before { + border-inline-end-color: var-get($theme, 'date-range-preview-border-color'); + } + } + &[part~='preview'][part~='first'], &[part~='preview'][part~='last'] { border-block-color: transparent; + &::before { + border-block-color: var-get($theme, 'date-range-preview-border-color'); + } + &::after { background: transparent !important; - border-block-color: var-get($theme, 'date-range-border-color'); + border-block-color: var-get($theme, 'date-range-preview-border-color'); } } @@ -599,9 +640,17 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } + &[part~='selected'][part~='preview'][part~='first'], + &[part~='selected'][part~='preview'][part~='last'] { + &::after { + border-block-color: var-get($theme, 'date-range-preview-border-color'); + } + } + + &[part~='preview'] { background: transparent; - border-block-color: var-get($theme, 'date-range-border-color'); + border-block-color: var-get($theme, 'date-range-preview-border-color'); } &[part~='first'][part~='disabled'], From d7a54efdeaf74ac4108e4008bab4d84e99f5e3b4 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 4 Nov 2025 11:41:10 +0200 Subject: [PATCH 19/31] fix(calendar): refine bootstrap theme date styles - Adjust border styles to use `border-block` for better alignment. - Add border radius updates for range, special, and current date combinations. - Improve hover, focus, range, and preview state styles for consistency and clarity. - Refactor selected and special date styles to enhance maintainability. --- .../shared/bootstrap/days-view.bootstrap.scss | 143 ++++++++++++------ 1 file changed, 93 insertions(+), 50 deletions(-) diff --git a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss index 7501c0676..b0c0a1393 100644 --- a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss +++ b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss @@ -79,10 +79,15 @@ $border-size: rem(1px); &[part~='range'], &[part~='range'][part~='preview'] { background: var-get($theme, 'date-selected-range-background'); - border-top-style: solid; - border-bottom-style: solid; - border-top-color: var-get($theme, 'date-range-preview-border-color'); - border-bottom-color: var-get($theme, 'date-range-preview-border-color'); + border-block-style: solid; + } + + &[part~='range'] { + border-block-color: var-get($theme, 'date-range-border-color'); + } + + &[part~='range'][part~='preview'] { + border-block-color: var-get($theme, 'date-range-preview-border-color'); } &[part~='range'][part~='selected'][part~='first'], @@ -91,7 +96,13 @@ $border-size: rem(1px); &[part~='range'][part~='preview'][part~='last'] { &::after { background: var-get($theme, 'date-selected-range-background'); - border-color: transparent; + } + } + + &[part~='range'][part~='selected'][part~='first'], + &[part~='range'][part~='selected'][part~='last'] { + &::after { + border-block-color: var-get($theme, 'date-range-border-color'); } } @@ -117,6 +128,8 @@ $border-size: rem(1px); &[part~='range'][part~='first'][part~='special'], &[part~='range'][part~='last'][part~='special'] { + border-radius: var-get($theme, 'date-range-border-radius'); + &::before { border-radius: var-get($theme, 'date-special-border-radius'); } @@ -124,8 +137,10 @@ $border-size: rem(1px); &[part~='range'][part~='first'][part~='current'], &[part~='range'][part~='last'][part~='current'] { + border-radius: var-get($theme, 'date-range-border-radius'); + &::before { - border-radius: var-get($theme, 'date-current-border-radius'); + border-radius: var-get($theme, 'date-range-border-radius'); } } @@ -134,26 +149,27 @@ $border-size: rem(1px); background: transparent; border-top-color: transparent; border-bottom-color: transparent; + + &::after { + border-block-color: var-get($theme, 'date-range-preview-border-color'); + } } } [part~='date-inner'] { width: var-get($theme, 'size'); height: var-get($theme, 'size'); - border: $border-size solid var-get($theme, 'date-border-color'); + border: $border-size solid transparent; border-radius: var-get($theme, 'date-border-radius'); &:hover { background: var-get($theme, 'date-hover-background'); - border-color: var-get($theme, 'date-hover-border-color'); } &:focus { background: var-get($theme, 'date-focus-background'); - border-color: var-get($theme, 'date-focus-border-color'); } - &[part~='inactive']:not([part~='selected'][part~='range'], [part~='range'], [part~='disabled'], [part~='first'], [part~='last']) { color: var-get($theme, 'inactive-color'); @@ -203,13 +219,17 @@ $border-size: rem(1px); } &[part~='special'] { - border-radius: var-get($theme, 'date-special-border-radius'); + border-radius: var-get($theme, 'date-border-radius'); &::after { border-radius: var-get($theme, 'date-special-border-radius'); } } + &[part~='special'][part~='selected'] { + border-radius: var-get($theme, 'date-border-radius'); + } + &[part~='current'] { border-radius: var-get($theme, 'date-current-border-radius'); } @@ -221,15 +241,28 @@ $border-size: rem(1px); border-radius: var-get($theme, 'date-special-border-radius'); } } + + &[part~='current'][part~='first'], + &[part~='current'][part~='last'], + &[part~='current'][part~='special'][part~='first'], + &[part~='current'][part~='special'][part~='last'], + &[part~='special'][part~='first'], + &[part~='special'][part~='last'] { + border-radius: var-get($theme, 'date-range-border-radius'); + } } [part~='date-inner']:not([part~='inactive']) { + border-color: var-get($theme, 'date-border-color'); + &:hover { color: var-get($theme, 'date-hover-foreground'); + border-color: var-get($theme, 'date-hover-border-color'); } &:focus { color: var-get($theme, 'date-hover-foreground'); + border-color: var-get($theme, 'date-focus-border-color'); } &[part~='weekend']:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='selected'], [part~='preview'], [part~='disabled']) { @@ -304,19 +337,6 @@ $border-size: rem(1px); border-color: var-get($theme, 'date-current-focus-border-color'); } } - - &[part~='selected'][part~='first'], - &[part~='selected'][part~='last'] { - border-color: var-get($theme, 'date-selected-current-border-color'); - - &:hover { - border-color: var-get($theme, 'date-selected-current-hover-border-color'); - } - - &:focus { - border-color: var-get($theme, 'date-selected-current-focus-border-color'); - } - } } &[part~='special'] { @@ -356,6 +376,9 @@ $border-size: rem(1px); &[part~='selected'][part~='first'], &[part~='selected'][part~='last'], &[part~='selected'][part~='first'][part~='last'], + &[part~='selected'][part~='first'][part~='range'], + &[part~='selected'][part~='last'][part~='range'], + &[part~='selected'][part~='first'][part~='last'][part~='range'], &[part~='preview'][part~='first'], &[part~='preview'][part~='last'] { color: var-get($theme, 'date-selected-foreground'); @@ -375,6 +398,19 @@ $border-size: rem(1px); } } + &[part~='current'][part~='selected'][part~='first'], + &[part~='current'][part~='selected'][part~='last'] { + border-color: var-get($theme, 'date-selected-current-border-color'); + + &:hover { + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + + &:focus { + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + } + &[part~='preview'][part~='first'][part~='current'], &[part~='preview'][part~='last'][part~='current'] { border-color: var-get($theme, 'date-selected-current-border-color'); @@ -408,35 +444,23 @@ $border-size: rem(1px); } &[part~='selected'][part~='current'] { - color: var-get($theme, 'date-selected-current-foreground'); - background: var-get($theme, 'date-selected-current-background'); border-color: var-get($theme, 'date-selected-current-border-color'); &:hover { - color: var-get($theme, 'date-selected-current-hover-foreground'); - background: var-get($theme, 'date-selected-current-hover-background'); border-color: var-get($theme, 'date-selected-current-hover-border-color'); } &:focus { - color: var-get($theme, 'date-selected-current-focus-foreground'); - background: var-get($theme, 'date-selected-current-focus-background'); border-color: var-get($theme, 'date-selected-current-focus-border-color'); } } &[part~='selected'][part~='special'] { - color: var-get($theme, 'date-selected-special-foreground'); - background: var-get($theme, 'date-selected-special-background'); - &::after { border-color: var-get($theme, 'date-selected-special-border-color'); } &:hover { - color: var-get($theme, 'date-selected-special-hover-foreground'); - background: var-get($theme, 'date-selected-special-hover-background'); - /* stylelint-disable-next-line max-nesting-depth */ &::after { border-color: var-get($theme, 'date-selected-special-hover-border-color'); @@ -444,9 +468,6 @@ $border-size: rem(1px); } &:focus { - color: var-get($theme, 'date-selected-special-focus-foreground'); - background: var-get($theme, 'date-selected-special-focus-background'); - /* stylelint-disable-next-line max-nesting-depth */ &::after { border-color: var-get($theme, 'date-selected-special-focus-border-color'); @@ -455,30 +476,52 @@ $border-size: rem(1px); } } + &:not([part~='range'], [part~='first'][part~='last']) { + &[part~='selected'][part~='current'] { + color: var-get($theme, 'date-selected-current-foreground'); + background: var-get($theme, 'date-selected-current-background'); - &[part~='range'][part~='selected'][part~='special']:not([part~='first'], [part~='last']) { - color: var-get($theme, 'date-special-range-foreground'); - background: var-get($theme, 'date-special-range-background'); + &:hover { + color: var-get($theme, 'date-selected-current-hover-foreground'); + background: var-get($theme, 'date-selected-current-hover-background'); + } + + &:focus { + color: var-get($theme, 'date-selected-current-focus-foreground'); + background: var-get($theme, 'date-selected-current-focus-background'); + } + } + + &[part~='selected'][part~='special'] { + color: var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-special-background'); + + &:hover { + color: var-get($theme, 'date-selected-special-hover-foreground'); + background: var-get($theme, 'date-selected-special-hover-background'); + } + &:focus { + color: var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-special-focus-background'); + } + } + } + + &[part~='range'][part~='selected'][part~='special']:not([part~='first'], [part~='last']) { &::after { border-color: var-get($theme, 'date-special-range-border-color'); } &:hover { - color: var-get($theme, 'date-special-range-hover-foreground'); - background: var-get($theme, 'date-special-range-hover-background'); - &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); + border-color: var-get($theme, 'date-special-range-hover-border-color'); } } &:focus { - color: var-get($theme, 'date-special-range-focus-foreground'); - background: var-get($theme, 'date-special-range-focus-background'); - &::after { - border-color: var-get($theme, 'date-special-focus-border-color'); + border-color: var-get($theme, 'date-special-range-focus-border-color'); } } } From 9ec4cecf979d3e46aae374cde1cb895aebbe428d Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 4 Nov 2025 14:13:32 +0200 Subject: [PATCH 20/31] fix(calendar): add selected+special styles for indigo theme - Introduce border styles for selected+special dates (hover, focus states included). - Enhance consistency with other theme combinations. --- .../themes/shared/indigo/days-view.indigo.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss index 78a1457e3..e2c89fcbd 100644 --- a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss @@ -421,6 +421,18 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } } + &[part~='selected'][part~='special']:not([part~='range'], [part~='current']) { + border-color: var-get($theme, 'date-selected-border-color'); + + &:hover { + border-color: var-get($theme, 'date-selected-hover-border-color'); + } + + &:focus { + border-color: var-get($theme, 'date-selected-focus-border-color'); + } + } + &[part~='special'] { color: var-get($theme, 'date-special-foreground'); background: var-get($theme, 'date-special-background'); From 790bdae81a1f2e0bf042d4bacc37d6ae57c6cb03 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 4 Nov 2025 14:40:12 +0200 Subject: [PATCH 21/31] fix(calendar): update indigo theme styles for selected and special dates - Add border color styles for selected+current dates (hover, focus states included). - Refine foreground and background styles for selected+special dates (hover, focus states included). --- .../themes/shared/indigo/days-view.indigo.scss | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss index e2c89fcbd..ea5708b12 100644 --- a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss @@ -348,15 +348,18 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &[part~='selected'][part~='current'][part~='range'][part~='special'][part~='last'] { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); &:hover { color: var-get($theme, 'date-selected-hover-foreground'); background: var-get($theme, 'date-selected-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); } &:focus { color: var-get($theme, 'date-selected-focus-foreground'); background: var-get($theme, 'date-selected-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); } } @@ -385,17 +388,17 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } &[part~='selected'][part~='special'] { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); + color: var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-special-background'); &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); + color: var-get($theme, 'date-selected-special-hover-foreground'); + background: var-get($theme, 'date-selected-special-hover-background'); } &:focus { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); + color: var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-special-focus-background'); } } From 641b04d40c20839f8ffad72bce678ef3141960e2 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 4 Nov 2025 16:19:41 +0200 Subject: [PATCH 22/31] fix(calendar): update indigo theme border styles for selected+current dates - Add new border color for selected+current dates. - Update hover and focus border color variables for consistency. --- .../calendar/themes/shared/indigo/days-view.indigo.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss index ea5708b12..bd7335e36 100644 --- a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss @@ -326,6 +326,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &[part~='selected'][part~='current'][part~='range'][part~='last'] { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); &::after { border-color: transparent; @@ -334,13 +335,13 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &:hover { color: var-get($theme, 'date-selected-hover-foreground'); background: var-get($theme, 'date-selected-hover-background'); - border-color: var-get($theme, 'date-current-hover-border-color'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); } &:focus { color: var-get($theme, 'date-selected-focus-foreground'); background: var-get($theme, 'date-selected-focus-background'); - border-color: var-get($theme, 'date-current-focus-border-color'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); } } From c41598267b92d49e999bdbdb60781e6ab17d656c Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 4 Nov 2025 19:35:14 +0200 Subject: [PATCH 23/31] fix(calendar): refactor indigo theme styles for selected, special, and range states - Consolidate and reorder styles for selected, special, current, and range states. - Refine hover and focus border/foreground/background colors for consistency. - Remove redundant selectors and improve maintainability. --- .../shared/indigo/days-view.indigo.scss | 237 +++++++++--------- 1 file changed, 125 insertions(+), 112 deletions(-) diff --git a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss index bd7335e36..760394b13 100644 --- a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss @@ -214,58 +214,56 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); background: var-get($theme, 'date-selected-focus-background'); border-color: var-get($theme, 'date-selected-focus-border-color'); } + } - &[part~='range'][part~='special'][part~='first'], - &[part~='range'][part~='special'][part~='last'] { - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); - } + &[part~='selected'][part~='range'] { + color: var-get($theme, 'date-selected-range-foreground'); - &:hover { - /* stylelint-disable max-nesting-depth */ - &::after { - border-color: var-get($theme, 'date-selected-special-hover-border-color'); - } - /* stylelint-enable max-nesting-depth */ - } + &:hover { + color: var-get($theme, 'date-selected-range-hover-foreground'); + background: var-get($theme, 'date-selected-range-hover-background'); + } - &:focus { - /* stylelint-disable max-nesting-depth */ - &::after { - border-color: var-get($theme, 'date-selected-special-focus-border-color'); - } - /* stylelint-enable max-nesting-depth */ - } + &:focus { + color: var-get($theme, 'date-selected-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); } + } - &[part~='range'] { - color: var-get($theme, 'date-selected-range-foreground'); + &[part~='selected'][part~='current'] { + color: var-get($theme, 'date-selected-current-foreground'); + background: var-get($theme, 'date-selected-current-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); - &:hover { - color: var-get($theme, 'date-selected-range-hover-foreground'); - background: var-get($theme, 'date-selected-range-hover-background'); - } + &:hover { + color: var-get($theme, 'date-selected-current-hover-foreground'); + background: var-get($theme, 'date-selected-current-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } - &:focus { - color: var-get($theme, 'date-selected-range-focus-foreground'); - background: var-get($theme, 'date-selected-range-focus-background'); - } + &:focus { + color: var-get($theme, 'date-selected-current-focus-foreground'); + background: var-get($theme, 'date-selected-current-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); } - &[part~='first'], - &[part~='last'] { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); + &::after { + border-color: transparent; + } + } - &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); - } + &[part~='selected'][part~='special'] { + color: var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-special-background'); - &:focus { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); - } + &:hover { + color: var-get($theme, 'date-selected-special-hover-foreground'); + background: var-get($theme, 'date-selected-special-hover-background'); + } + + &:focus { + color: var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-special-focus-background'); } } @@ -275,50 +273,36 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); border-color: var-get($theme, 'date-current-border-color'); &:hover { + color: var-get($theme, 'date-selected-current-range-hover-foreground'); background: var-get($theme, 'date-selected-current-range-hover-background'); - color: var-get($theme, 'date-current-hover-foreground'); border-color: var-get($theme, 'date-current-hover-border-color'); } &:focus { + color: var-get($theme, 'date-selected-current-range-focus-foreground'); background: var-get($theme, 'date-selected-current-range-focus-background'); - color: var-get($theme, 'date-current-focus-foreground'); border-color: var-get($theme, 'date-current-focus-border-color'); } - &::after { - border-color: transparent; - } + // + // &::after { + // border-color: transparent; + // } } - &[part~='selected'][part~='current'][part~='range'][part~='special'] { - color: var-get($theme, 'date-special-range-foreground'); - background: var-get($theme, 'date-current-background'); + &[part~='selected'][part~='first'], + &[part~='selected'][part~='last'] { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); &:hover { - color: var-get($theme, 'date-special-range-hover-foreground'); - background: var-get($theme, 'date-selected-current-range-hover-background'); - - /* stylelint-disable max-nesting-depth */ - &::after { - border-color: var-get($theme, 'date-special-range-hover-border-color'); - } - /* stylelint-enable */ + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); } &:focus { - color: var-get($theme, 'date-special-range-focus-foreground'); - background: var-get($theme, 'date-selected-current-range-focus-background'); - - /* stylelint-disable max-nesting-depth */ - &::after { - border-color: var-get($theme, 'date-special-range-hover-border-color'); - } - /* stylelint-enable */ - } - - &::after { - border-color: var-get($theme, 'date-special-range-border-color'); + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); } } @@ -345,8 +329,71 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } } - &[part~='selected'][part~='current'][part~='range'][part~='special'][part~='first'], - &[part~='selected'][part~='current'][part~='range'][part~='special'][part~='last'] { + &[part~='selected'][part~='special'][part~='range'][part~='first'], + &[part~='selected'][part~='special'][part~='range'][part~='last'] { + &::after { + border-color: var-get($theme, 'date-selected-special-border-color'); + } + + &:hover { + /* stylelint-disable max-nesting-depth */ + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + /* stylelint-enable max-nesting-depth */ + } + + &:focus { + /* stylelint-disable max-nesting-depth */ + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); + } + /* stylelint-enable max-nesting-depth */ + } + } + + &[part~='selected'][part~='current'][part~='special'] { + border-color: var-get($theme, 'date-selected-current-border-color'); + + &:hover { + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + + &:focus { + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + } + + &[part~='selected'][part~='current'][part~='special'][part~='range'] { + color: var-get($theme, 'date-special-range-foreground'); + + &:hover { + color: var-get($theme, 'date-special-range-hover-foreground'); + + /* stylelint-disable max-nesting-depth */ + &::after { + border-color: var-get($theme, 'date-special-range-hover-border-color'); + } + /* stylelint-enable */ + } + + &:focus { + color: var-get($theme, 'date-special-range-focus-foreground'); + + /* stylelint-disable max-nesting-depth */ + &::after { + border-color: var-get($theme, 'date-special-range-hover-border-color'); + } + /* stylelint-enable */ + } + + &::after { + border-color: var-get($theme, 'date-special-range-border-color'); + } + } + + &[part~='selected'][part~='current'][part~='special'][part~='range'][part~='first'], + &[part~='selected'][part~='current'][part~='special'][part~='range'][part~='last'] { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); border-color: var-get($theme, 'date-selected-current-border-color'); @@ -388,20 +435,6 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } } - &[part~='selected'][part~='special'] { - color: var-get($theme, 'date-selected-special-foreground'); - background: var-get($theme, 'date-selected-special-background'); - - &:hover { - color: var-get($theme, 'date-selected-special-hover-foreground'); - background: var-get($theme, 'date-selected-special-hover-background'); - } - - &:focus { - color: var-get($theme, 'date-selected-special-focus-foreground'); - background: var-get($theme, 'date-selected-special-focus-background'); - } - } &[part~='selected'][part~='special']:not([part~='range']) { &::after { @@ -458,31 +491,33 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &::after { content: ''; position: absolute; - z-index: 0; + z-index: -1; border: rem(2px) solid transparent; width: var-get($theme, 'inner-size'); height: var-get($theme, 'inner-size'); box-sizing: border-box; } - &[part~='range']:not([part~='preview']) { + &[part~='range']:not([part~='preview'], [part~='current']) { color: var-get($theme, 'date-special-range-foreground'); background: var-get($theme, 'date-special-range-background'); + border-color: var-get($theme, 'date-special-range-border-color'); &:hover { color: var-get($theme, 'date-special-range-hover-foreground'); background: var-get($theme, 'date-special-range-hover-background'); + border-color: var-get($theme, 'date-special-range-hover-border-color'); } &:focus { color: var-get($theme, 'date-special-range-focus-foreground'); background: var-get($theme, 'date-special-range-focus-background'); + border-color: var-get($theme, 'date-special-range-focus-border-color'); } } &[part~='range'][part~='first']:not([part~='preview']), - &[part~='range'][part~='last']:not([part~='preview']), - { + &[part~='range'][part~='last']:not([part~='preview']) { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); @@ -497,7 +532,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } &[part~='range'][part~='first']:not([part~='current']), - &[part~='range'][part~='last']:not([part~='current']), { + &[part~='range'][part~='last']:not([part~='current']) { border-color: transparent; } @@ -547,28 +582,6 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } } - &[part~='selected'][part~='current'] { - color: var-get($theme, 'date-selected-current-foreground'); - background: var-get($theme, 'date-selected-current-background'); - border-color: var-get($theme, 'date-selected-current-border-color'); - - &:hover { - color: var-get($theme, 'date-selected-current-hover-foreground'); - background: var-get($theme, 'date-selected-current-hover-background'); - border-color: var-get($theme, 'date-selected-current-hover-border-color'); - } - - &:focus { - color: var-get($theme, 'date-selected-current-focus-foreground'); - background: var-get($theme, 'date-selected-current-focus-background'); - border-color: var-get($theme, 'date-selected-current-focus-border-color'); - } - - &::after { - border-color: transparent; - } - } - &[part~='special'][part~='current']:not([part~='selected']) { color: var-get($theme, 'date-special-foreground'); background: var-get($theme, 'date-current-background'); From e806e543bc71be69e0b5e03fb2d04cfc261d98b3 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 6 Nov 2025 10:08:23 +0200 Subject: [PATCH 24/31] fix(calendar): refine indigo theme border styles for selected+current+special dates --- .../shared/indigo/days-view.indigo.scss | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss index 760394b13..8e701292d 100644 --- a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss @@ -283,11 +283,6 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); background: var-get($theme, 'date-selected-current-range-focus-background'); border-color: var-get($theme, 'date-current-focus-border-color'); } - - // - // &::after { - // border-color: transparent; - // } } &[part~='selected'][part~='first'], @@ -366,9 +361,11 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &[part~='selected'][part~='current'][part~='special'][part~='range'] { color: var-get($theme, 'date-special-range-foreground'); + border-color: var-get($theme, 'date-current-border-color'); &:hover { color: var-get($theme, 'date-special-range-hover-foreground'); + border-color: var-get($theme, 'date-current-hover-border-color'); /* stylelint-disable max-nesting-depth */ &::after { @@ -379,6 +376,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); &:focus { color: var-get($theme, 'date-special-range-focus-foreground'); + border-color: var-get($theme, 'date-current-focus-border-color'); /* stylelint-disable max-nesting-depth */ &::after { @@ -435,6 +433,20 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } } + &[part~='selected'][part~='current'][part~='special'][part~='first'], + &[part~='selected'][part~='current'][part~='special'][part~='last'] { + border-color: var-get($theme, 'date-selected-current-border-color'); + + &:hover { + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + + } + + &:focus { + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + } + &[part~='selected'][part~='special']:not([part~='range']) { &::after { From dfcfce3327e83be2d793b4d861638e87973393d0 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Fri, 7 Nov 2025 11:52:53 +0200 Subject: [PATCH 25/31] fix(calendar): refine fluent theme styles for current date states - Add hover styles for current dates excluding selected, special, and preview states. --- .../calendar/themes/shared/fluent/days-view.fluent.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss index 6375776ae..6eb3a299e 100644 --- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss @@ -350,7 +350,9 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); position: relative; overflow: hidden; color: var-get($theme, 'date-current-foreground'); + } + &[part~='current']:not([part~='selected'], [part~='special'], [part~='preview']) { &:hover { color: var-get($theme, 'date-current-hover-foreground'); From b78138a91f4bc17f2588b413858ee481bf52e71d Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 12 Nov 2025 14:34:54 +0200 Subject: [PATCH 26/31] fix(calendar): refine bootstrap theme date styles for selected states --- .../shared/bootstrap/days-view.bootstrap.scss | 81 +++++++++++++------ 1 file changed, 55 insertions(+), 26 deletions(-) diff --git a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss index b0c0a1393..a1cfa6594 100644 --- a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss +++ b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss @@ -253,16 +253,24 @@ $border-size: rem(1px); } [part~='date-inner']:not([part~='inactive']) { - border-color: var-get($theme, 'date-border-color'); + &:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='first'], [part~='last'], [part~='range'], [part~='preview'][part~='disabled']) { + border-color: var-get($theme, 'date-border-color'); + + &:hover { + border-color: var-get($theme, 'date-hover-border-color'); + } + + &:focus { + border-color: var-get($theme, 'date-focus-border-color'); + } + } &:hover { color: var-get($theme, 'date-hover-foreground'); - border-color: var-get($theme, 'date-hover-border-color'); } &:focus { color: var-get($theme, 'date-hover-foreground'); - border-color: var-get($theme, 'date-focus-border-color'); } &[part~='weekend']:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='selected'], [part~='preview'], [part~='disabled']) { @@ -340,9 +348,6 @@ $border-size: rem(1px); } &[part~='special'] { - color: var-get($theme, 'date-special-foreground'); - background: var-get($theme, 'date-special-background'); - &::after { content: ""; position: absolute; @@ -354,24 +359,33 @@ $border-size: rem(1px); } &:hover { - color: var-get($theme, 'date-special-hover-foreground'); - background: var-get($theme, 'date-special-hover-background'); - &::after { border-color: var-get($theme, 'date-special-hover-border-color'); } } &:focus { - color: var-get($theme, 'date-special-focus-foreground'); - background: var-get($theme, 'date-special-focus-background'); - &::after { border-color: var-get($theme, 'date-special-focus-border-color'); } } } + &[part~='special']:not([part~='current']) { + color: var-get($theme, 'date-special-foreground'); + background: var-get($theme, 'date-special-background'); + + &:hover { + color: var-get($theme, 'date-special-hover-foreground'); + background: var-get($theme, 'date-special-hover-background'); + } + + &:focus { + color: var-get($theme, 'date-special-focus-foreground'); + background: var-get($theme, 'date-special-focus-background'); + } + } + // FIRST AND LAST DATES IN RANGE SELECTION SHOULDN'T LOOK THE SAME AS SELECTED DATES &[part~='selected'][part~='first'], &[part~='selected'][part~='last'], @@ -477,33 +491,33 @@ $border-size: rem(1px); } &:not([part~='range'], [part~='first'][part~='last']) { - &[part~='selected'][part~='current'] { - color: var-get($theme, 'date-selected-current-foreground'); - background: var-get($theme, 'date-selected-current-background'); + &[part~='selected'][part~='special'] { + color: var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-special-background'); &:hover { - color: var-get($theme, 'date-selected-current-hover-foreground'); - background: var-get($theme, 'date-selected-current-hover-background'); + color: var-get($theme, 'date-selected-special-hover-foreground'); + background: var-get($theme, 'date-selected-special-hover-background'); } &:focus { - color: var-get($theme, 'date-selected-current-focus-foreground'); - background: var-get($theme, 'date-selected-current-focus-background'); + color: var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-special-focus-background'); } } - &[part~='selected'][part~='special'] { - color: var-get($theme, 'date-selected-special-foreground'); - background: var-get($theme, 'date-selected-special-background'); + &[part~='selected'][part~='current'] { + color: var-get($theme, 'date-selected-current-foreground'); + background: var-get($theme, 'date-selected-current-background'); &:hover { - color: var-get($theme, 'date-selected-special-hover-foreground'); - background: var-get($theme, 'date-selected-special-hover-background'); + color: var-get($theme, 'date-selected-current-hover-foreground'); + background: var-get($theme, 'date-selected-current-hover-background'); } &:focus { - color: var-get($theme, 'date-selected-special-focus-foreground'); - background: var-get($theme, 'date-selected-special-focus-background'); + color: var-get($theme, 'date-selected-current-focus-foreground'); + background: var-get($theme, 'date-selected-current-focus-background'); } } } @@ -526,6 +540,21 @@ $border-size: rem(1px); } } + &[part~='range'][part~='selected'][part~='special']:not([part~='first'], [part~='last'], [part~='current']) { + color: var-get($theme, 'date-special-range-foreground'); + background: var-get($theme, 'date-special-range-background'); + + &:hover { + color: var-get($theme, 'date-special-range-hover-foreground'); + background: var-get($theme, 'date-special-range-hover-background'); + } + + &:focus { + color: var-get($theme, 'date-special-range-hover-foreground'); + background: var-get($theme, 'date-special-range-hover-background'); + } + } + // IN THE PREVIEW STATE, FIRST AND LAST DATES SHOULD LOOK THE SAME AS SELECTED DATES &[part~='preview'][part~='special'][part~='first'], &[part~='preview'][part~='special'][part~='last'], From 3311ca119c8192d4b3f29daff3e08dbbc72dd534 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 13 Nov 2025 09:50:40 +0200 Subject: [PATCH 27/31] fix(calendar): refine fluent theme styles for current and selected date states --- .../shared/fluent/days-view.fluent.scss | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss index 6eb3a299e..b24c4cf36 100644 --- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss @@ -301,6 +301,8 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); // CURRENT &[part~='current'] { + color: var-get($theme, 'date-current-foreground'); + &::before { content: ''; position: absolute; @@ -311,7 +313,9 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); border: 1px solid var-get($theme, 'date-current-border-color'); box-sizing: border-box; } + } + &[part~='current']:not([part~='preview'], [part~='first'], [part~='last']) { &:hover { &::before { border-color: var-get($theme, 'date-current-hover-border-color'); @@ -325,12 +329,14 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } - &[part~='current'][part~='selected'] { + &[part~='current'][part~='selected']:not([part~='first'][part~='last'], [part~='first'], [part~='last']) { &::before { border-color: var-get($theme, 'date-selected-current-border-color'); background: var-get($theme, 'date-selected-current-background'); } + } + &[part~='current'][part~='selected']:not([part~='preview'], [part~='first'], [part~='last']) { &:hover { &::before { border-color: var-get($theme, 'date-selected-current-hover-border-color'); @@ -372,7 +378,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } - &[part~='current'][part~='selected']:not([part~='special']) { + &[part~='current'][part~='selected']:not([part~='special'], [part~='preview'], [part~='first'][part~='last']) { color: var-get($theme, 'date-selected-current-foreground'); } @@ -381,6 +387,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); &::after { width: calc(var-get($theme, 'inner-size') - #{rem(4px)}); height: calc(var-get($theme, 'inner-size') - #{rem(4px)}); + border-color: var-get($theme, 'date-current-foreground'); } } @@ -389,9 +396,10 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); &::after { background: var-get($theme, 'date-current-background'); - border-color: var-get($theme, 'date-current-foreground'); } + } + &[part~='current'][part~='special']:not([part~='selected'], [part~='preview'], [part~='first'][part~='last']) { &:hover { color: var-get($theme, 'date-current-hover-foreground'); @@ -411,7 +419,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } - &[part~='current'][part~='special'][part~='selected'] { + &[part~='current'][part~='special'][part~='selected']:not([part~='first'][part~='last'], [part~='preview']) { color: var-get($theme, 'date-selected-current-foreground'); &::after { @@ -447,6 +455,10 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); background: var-get($theme, 'date-selected-current-range-background'); } + &::before { + border-color: var-get($theme, 'date-selected-current-border-color'); + } + &:hover { color: var-get($theme, 'date-selected-current-range-hover-foreground'); @@ -454,6 +466,10 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); &::after { background: var-get($theme, 'date-selected-current-range-hover-background'); } + + &::before { + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } } &:focus { @@ -463,6 +479,10 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); &::after { background: var-get($theme, 'date-selected-current-range-focus-background'); } + + &::before { + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } } } From a592ab38b362b67d8226543dd87f3a9e6fad0498 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 13 Nov 2025 14:49:38 +0200 Subject: [PATCH 28/31] fix(calendar): revert visual breaking change for border-color --- .../shared/bootstrap/days-view.bootstrap.scss | 24 +++++++++--------- .../shared/fluent/days-view.fluent.scss | 25 +++++++++---------- .../shared/indigo/days-view.indigo.scss | 11 ++++---- .../shared/material/days-view.material.scss | 20 +++++++++------ 4 files changed, 42 insertions(+), 38 deletions(-) diff --git a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss index a1cfa6594..95496bee5 100644 --- a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss +++ b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss @@ -170,6 +170,18 @@ $border-size: rem(1px); background: var-get($theme, 'date-focus-background'); } + &:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='first'], [part~='last'], [part~='range'], [part~='preview'][part~='disabled']) { + border-color: var-get($theme, 'date-border-color'); + + &:hover { + border-color: var-get($theme, 'date-hover-border-color'); + } + + &:focus { + border-color: var-get($theme, 'date-focus-border-color'); + } + } + &[part~='inactive']:not([part~='selected'][part~='range'], [part~='range'], [part~='disabled'], [part~='first'], [part~='last']) { color: var-get($theme, 'inactive-color'); @@ -253,18 +265,6 @@ $border-size: rem(1px); } [part~='date-inner']:not([part~='inactive']) { - &:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='first'], [part~='last'], [part~='range'], [part~='preview'][part~='disabled']) { - border-color: var-get($theme, 'date-border-color'); - - &:hover { - border-color: var-get($theme, 'date-hover-border-color'); - } - - &:focus { - border-color: var-get($theme, 'date-focus-border-color'); - } - } - &:hover { color: var-get($theme, 'date-hover-foreground'); } diff --git a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss index b24c4cf36..50c560900 100644 --- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss @@ -121,6 +121,18 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } [part~='date-inner']:not([part~='preview'], [part~='first'][part~='last']) { + &:not([part~='selected'], [part~='preview'], [part~='range'], [part~='first'][part~='last']) { + border-color: var-get($theme, 'date-border-color'); + + &:hover { + border-color: var-get($theme, 'date-hover-border-color'); + } + + &:focus { + border-color: var-get($theme, 'date-focus-border-color'); + } + } + &:hover { color: var-get($theme, 'date-hover-foreground'); background: var-get($theme, 'date-hover-background'); @@ -133,19 +145,6 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } [part~='date-inner']:not([part~='inactive']) { - &:not([part~='selected'], [part~='preview'], [part~='range'], [part~='first'][part~='last']) - { - border-color: var-get($theme, 'date-border-color'); - - &:hover { - border-color: var-get($theme, 'date-hover-border-color'); - } - - &:focus { - border-color: var-get($theme, 'date-focus-border-color'); - } - } - // This selector works only in range selection since firs and last are present only in the range selection &[part~='selected'][part~='first'][part~='last'] { background: transparent; diff --git a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss index 8e701292d..3bf41cb0b 100644 --- a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss @@ -115,13 +115,18 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); [part~='date-inner'] { width: var-get($theme, 'size'); height: var-get($theme, 'size'); - border: $inner-border-width solid transparent; + border: $inner-border-width solid var-get($theme, 'date-border-color'); border-radius: var-get($theme, 'date-border-radius'); &:hover { + border-color: var-get($theme, 'date-hover-border-color'); background: var-get($theme, 'date-hover-background'); } + &:focus { + border-color: var-get($theme, 'date-focus-border-color'); + } + &[part~='inactive']:not([part~='selected'][part~='range'], [part~='disabled']) { color: var-get($theme, 'inactive-color'); @@ -173,17 +178,13 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } [part~='date-inner']:not([part~='inactive']) { - border-color: var-get($theme, 'date-border-color'); - &:hover { color: var-get($theme, 'date-hover-foreground'); - border-color: var-get($theme, 'date-hover-border-color'); } &:focus { color: var-get($theme, 'date-focus-foreground'); background: var-get($theme, 'date-focus-background'); - border-color: var-get($theme, 'date-focus-border-color'); } &[part~='weekend']:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='selected'], [part~='disabled']) { diff --git a/src/components/calendar/themes/shared/material/days-view.material.scss b/src/components/calendar/themes/shared/material/days-view.material.scss index d564cdb37..230d6c55a 100644 --- a/src/components/calendar/themes/shared/material/days-view.material.scss +++ b/src/components/calendar/themes/shared/material/days-view.material.scss @@ -120,6 +120,18 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); background: var-get($theme, 'date-hover-background'); } + &:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='first'], [part~='last'], [part~='range'], [part~='preview'][part~='disabled']) { + border-color: var-get($theme, 'date-border-color'); + + &:hover { + border-color: var-get($theme, 'date-hover-border-color'); + } + + &:focus { + border-color: var-get($theme, 'date-focus-border-color'); + } + } + &[part~='inactive']:not([part~='selected'][part~='range'], [part~='disabled']) { color: var-get($theme, 'inactive-color'); @@ -171,17 +183,13 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); } [part~='date-inner']:not([part~='inactive']) { - border-color: var-get($theme, 'date-border-color'); - &:hover { color: var-get($theme, 'date-hover-foreground'); - border-color: var-get($theme, 'date-hover-border-color'); } &:focus { color: var-get($theme, 'date-focus-foreground'); background: var-get($theme, 'date-focus-background'); - border-color: var-get($theme, 'date-focus-border-color'); } &[part~='weekend']:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='selected'], [part~='disabled']) { @@ -436,10 +444,6 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); background: transparent; border-color: transparent; } - - &[part~='disabled']:not([part~='first'], [part~='last'], [part~='special'], [part~='current']) { - border-color: transparent; - } } [part~='date-inner'][part~='selected'][part~='inactive'][part~='first'], From 10a9fffec3aa94525941e8b2701588bfdbd0dd11 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 13 Nov 2025 15:41:28 +0200 Subject: [PATCH 29/31] fix(calendar): refine bootstrap theme --- .../shared/bootstrap/days-view.bootstrap.scss | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss index 95496bee5..b65e46aab 100644 --- a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss +++ b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss @@ -170,6 +170,7 @@ $border-size: rem(1px); background: var-get($theme, 'date-focus-background'); } + &:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='first'], [part~='last'], [part~='range'], [part~='preview'][part~='disabled']) { border-color: var-get($theme, 'date-border-color'); @@ -270,7 +271,7 @@ $border-size: rem(1px); } &:focus { - color: var-get($theme, 'date-hover-foreground'); + color: var-get($theme, 'date-focus-foreground'); } &[part~='weekend']:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='selected'], [part~='preview'], [part~='disabled']) { @@ -580,6 +581,21 @@ $border-size: rem(1px); } } +[part~='date-inner'][part~='inactive'][part~='range']:not([part~='first'], [part~='last']), +[part~='date-inner'][part~='inactive'][part~='preview']:not([part~='first'], [part~='last']) { + color: var-get($theme, 'date-selected-range-foreground'); + + &:hover { + color: var-get($theme, 'date-selected-range-hover-foreground'); + background: var-get($theme, 'date-selected-range-hover-background'); + } + + &:focus { + color: var-get($theme, 'date-selected-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); + } +} + [part~='date-inner'][part~='selected'][part~='inactive'][part~='first'], [part~='date-inner'][part~='selected'][part~='inactive'][part~='last'] { color: var-get($theme, 'date-selected-foreground'); From 69a3b7e7d29b3f0ee45fd1d0016614a204a4f59a Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 13 Nov 2025 16:03:21 +0200 Subject: [PATCH 30/31] fix(calendar): add inactive range styles for material, indigo, and fluent themes --- .../themes/shared/fluent/days-view.fluent.scss | 14 ++++++++++++++ .../themes/shared/indigo/days-view.indigo.scss | 15 +++++++++++++++ .../shared/material/days-view.material.scss | 14 ++++++++++++++ 3 files changed, 43 insertions(+) diff --git a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss index 50c560900..9837441cc 100644 --- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss @@ -682,3 +682,17 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } } + +[part~='date-inner'][part~='inactive'][part~='range']:not([part~='first'], [part~='last'], [part~='preview']) { + color: var-get($theme, 'date-selected-range-foreground'); + + &:hover { + color: var-get($theme, 'date-selected-range-hover-foreground'); + background: var-get($theme, 'date-selected-range-hover-background'); + } + + &:focus { + color: var-get($theme, 'date-selected-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); + } +} diff --git a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss index 3bf41cb0b..e0d348bf2 100644 --- a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss @@ -670,3 +670,18 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); border-color: var-get($theme, 'date-selected-focus-border-color'); } } + +[part~='date-inner'][part~='inactive'][part~='range']:not([part~='first'], [part~='last'], [part~='preview']) { + color: var-get($theme, 'date-selected-range-foreground'); + border-color: transparent; + + &:hover { + color: var-get($theme, 'date-selected-range-hover-foreground'); + background: var-get($theme, 'date-selected-range-hover-background'); + } + + &:focus { + color: var-get($theme, 'date-selected-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); + } +} diff --git a/src/components/calendar/themes/shared/material/days-view.material.scss b/src/components/calendar/themes/shared/material/days-view.material.scss index 230d6c55a..9e20be652 100644 --- a/src/components/calendar/themes/shared/material/days-view.material.scss +++ b/src/components/calendar/themes/shared/material/days-view.material.scss @@ -464,3 +464,17 @@ $week-number-radius: var-get($theme, 'week-number-border-radius'); border-color: var-get($theme, 'date-selected-focus-border-color'); } } + +[part~='date-inner'][part~='inactive'][part~='range']:not([part~='first'], [part~='last'], [part~='preview']) { + color: var-get($theme, 'date-selected-range-foreground'); + + &:hover { + color: var-get($theme, 'date-selected-range-hover-foreground'); + background: var-get($theme, 'date-selected-range-hover-background'); + } + + &:focus { + color: var-get($theme, 'date-selected-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); + } +} From 48f39cd73b454e47fdd2123cf11762c9abdb9602 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 13 Nov 2025 16:19:59 +0200 Subject: [PATCH 31/31] fix(calendar): refine fluent theme styles for inactive range states --- .../calendar/themes/shared/fluent/days-view.fluent.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss index 9837441cc..ac7e81d27 100644 --- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss @@ -683,7 +683,7 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); } } -[part~='date-inner'][part~='inactive'][part~='range']:not([part~='first'], [part~='last'], [part~='preview']) { +[part~='date-inner'][part~='inactive'][part~='range']:not([part~='preview']) { color: var-get($theme, 'date-selected-range-foreground'); &:hover {