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/shared/bootstrap/days-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss
index 3d32ab207..c74e56f37 100644
--- a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss
+++ b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss
@@ -12,6 +12,13 @@ $border-size: rem(1px);
 
 [part~='days-row'] {
     padding: 0 pad-inline(rem(12px));
+
+    &: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');
+        }
+    }
 }
 
 :host([part='days-view']) + :host([part='days-view']) {
@@ -21,16 +28,7 @@ $border-size: rem(1px);
 [part~='days-row'][part~='first'] {
     background: var-get($theme, 'header-background');
     position: relative;
-
-    &::after {
-        content: '';
-        position: absolute;
-        width: 100%;
-        inset-block-start: 100%;
-        inset-inline-start: 0;
-        height: rem(1px);
-        background: var-get($theme, 'border-color');
-    }
+    border-block-end: rem(1px) solid var-get($theme, 'border-color');
 }
 
 [part~='week-number'] {
@@ -47,19 +45,22 @@ $border-size: rem(1px);
 
     &::after {
         width: var-get($theme, 'size');
-        inset-block-end: 100%;
+        inset-block-start: 100%;
         background: var-get($theme, 'week-number-background');
     }
 }
 
 [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');
+    background: transparent;
 }
 
 [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');
+
+    &::after {
+        display: none;
+    }
 }
 
 [part~='label'] {
@@ -82,16 +83,20 @@ $border-size: rem(1px);
 
 [part~='date'] {
     height: var-get($theme, 'size');
-    border-top: $border-size solid transparent;
-    border-bottom: $border-size solid transparent;
+    border-block: $border-size solid transparent;
 
     &[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'][part~='preview'] {
+        border-block-color: var-get($theme, 'date-range-preview-border-color');
+
+        &::after {
+            border-block-color: var-get($theme, 'date-range-preview-border-color');
+        }
     }
 
     &[part~='range'][part~='selected'][part~='first'],
@@ -100,15 +105,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~='first'],
     &[part~='range'][part~='last'] {
         background: transparent;
-        border-top-color: transparent;
-        border-bottom-color: transparent;
+        border-block-color: transparent;
 
         &::before {
             height: var-get($theme, 'size');
@@ -127,8 +130,14 @@ $border-size: rem(1px);
     &[part~='range'][part~='preview'][part~='first'],
     &[part~='range'][part~='preview'][part~='last'] {
         background: transparent;
-        border-top-color: transparent;
-        border-bottom-color: transparent;
+        border-block-color: transparent;
+    }
+
+    &[part~='range'][part~='first']:not([part~='preview']),
+    &[part~='range'][part~='last']:not([part~='preview']) {
+        &::after {
+            border-block-color: transparent;
+        }
     }
 }
 
@@ -145,9 +154,9 @@ $border-size: rem(1px);
     }
 
     &:focus {
-        color: var-get($theme, 'date-hover-foreground');
-        background: var-get($theme, 'date-hover-background');
-        border-color: var-get($theme, 'date-hover-border-color');
+        color: var-get($theme, 'date-focus-foreground');
+        background: var-get($theme, 'date-focus-background');
+        border-color: var-get($theme, 'date-focus-border-color');
     }
 
     &::after {
@@ -298,31 +307,31 @@ $border-size: rem(1px);
         border-color: var-get($theme, 'date-selected-current-border-color');
 
         &:hover {
-            color: var-get($theme, 'date-selected-current-hover-foreground');
+            color: var-get($theme, 'date-selected-hover-foreground');
             border-color: var-get($theme, 'date-selected-current-hover-border-color');
         }
 
         &:focus {
-            color: var-get($theme, 'date-selected-current-focus-foreground');
+            color: var-get($theme, 'date-selected-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');
+        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-current-hover-foreground');
-            background: var-get($theme, 'date-selected-current-hover-background');
+            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-current-focus-foreground');
-            background: var-get($theme, 'date-selected-current-focus-background');
+            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');
         }
     }
@@ -356,7 +365,8 @@ $border-size: rem(1px);
         }
     }
 
-    &[part~='special'] {
+    &[part~='special'],
+    &[part~='special'][part~='range'] {
         color: var-get($theme, 'date-special-foreground');
         background: var-get($theme, 'date-special-background');
 
@@ -365,8 +375,8 @@ $border-size: rem(1px);
         }
 
         &:hover {
-            color: var-get($theme, 'date-hover-foreground');
-            background: var-get($theme, 'date-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');
@@ -374,8 +384,8 @@ $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-focus-foreground');
+            background: var-get($theme, 'date-special-focus-background');
 
             &::after {
                 border-color: var-get($theme, 'date-special-hover-border-color');
@@ -388,7 +398,7 @@ $border-size: rem(1px);
         background: var-get($theme, 'date-selected-background');
 
         &::after {
-            border-color: var-get($theme, 'date-selected-special-border-color');
+            border-color: var-get($theme, 'date-special-foreground');
         }
 
         &:hover {
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..3cc2b5f93 100644
--- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss
+++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss
@@ -32,7 +32,6 @@ $row-gap: rem(6px);
     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');
@@ -42,9 +41,12 @@ $row-gap: rem(6px);
         border-inline-end-color: var-get($theme, 'date-border-color');
     }
 
-    &[part~='first'],
+    &[part~='first'] {
+        border-radius: var-get($theme, 'week-number-border-radius') var-get($theme, 'week-number-border-radius') 0 0;
+    }
+
     &[part~='last'] {
-        border-radius: 0;
+        border-radius: 0 0 var-get($theme, 'week-number-border-radius') var-get($theme, 'week-number-border-radius');
     }
 }
 
@@ -53,12 +55,8 @@ $row-gap: rem(6px);
     color: var-get($theme, 'weekday-color')
 }
 
-[part~='weekend'] {
-    color: var-get($theme, 'weekend-color');
-}
-
 [part~='inactive']:not([part~='range']) {
-    color: var-get($theme, 'inactive-color') !important;
+    color: var-get($theme, 'inactive-color');
     border-color: transparent !important;
 
     &:hover {
@@ -74,7 +72,21 @@ $row-gap: rem(6px);
     }
 }
 
+[part~='inactive'][part~='disabled'] {
+    color: var-get($theme, 'date-disabled-foreground');
+
+    &:hover {
+        color: var-get($theme, 'date-disabled-foreground');
+    }
+}
+
+[part~='inactive'][part~='disabled'][part~='preview'] {
+    color: var-get($theme, 'date-disabled-foreground');
+}
+
 [part~='date-inner'] {
+    position: relative;
+    overflow: hidden;
     width: var-get($theme, 'size');
     height: var-get($theme, 'size');
     border-radius: var-get($theme, 'date-border-radius');
@@ -84,70 +96,87 @@ $row-gap: rem(6px);
         position: absolute;
         z-index: 0;
         border: $border-size solid transparent;
-        border-radius: 50%;
+        border-radius: var-get($theme, 'date-border-radius');
         width: var-get($theme, 'inner-size');
         height: var-get($theme, 'inner-size');
     }
 
-    &:hover {
+    &:where(:hover):not([part~='preview']),
+    &:where(:hover):focus:not([part~='preview']) {
         color: var-get($theme, 'date-hover-foreground');
         background: var-get($theme, 'date-hover-background');
         border-color: var-get($theme, 'date-hover-border-color');
     }
 
-    &:focus {
+    &:where(:focus):not([part~='preview']) {
         color: var-get($theme, 'date-focus-foreground');
         background: var-get($theme, 'date-focus-background');
         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;
-        border-color: var-get($theme, 'date-range-preview-border-color');
-        border-radius: var-get($theme, 'date-range-border-radius');
+    &[part~='weekend'] {
+        color: var-get($theme, 'weekend-color');
+    }
+
+    &[part~='weekend']:where(:not([part~='inactive'])) {
+        &:hover {
+            color: var-get($theme, 'date-hover-foreground');
+        }
+
+        &:focus {
+            color: var-get($theme, 'date-focus-foreground');
+        }
+    }
+
+    &[part~='inactive'] {
+        color: var-get($theme, 'inactive-color');
     }
 
     &[part~='disabled'] {
         color: var-get($theme, 'date-disabled-foreground');
     }
 
-    &[part~='disabled'][part~='range'] {
+    &[part~='disabled'][part~='range']:not([part~='preview']) {
         color: var-get($theme, 'date-disabled-range-foreground');
     }
 
-    &[part~='range'] {
-        height: 100%;
+    &[part~='selected'][part~='first'][part~='last'] {
+        border-color: var-get($theme, 'date-range-preview-border-color');
+    }
 
-        &[part~='selected'][part~='first'][part~='last'] {
-            color: var-get($theme, 'date-selected-foreground') !important;
-            background: var-get($theme, 'date-selected-background') !important;
+    &[part~='selected'][part~='first'][part~='last']:not([part~='preview']) {
+        color: var-get($theme, 'content-foreground');
+    }
 
-            &:hover {
-                color: var-get($theme, 'date-selected-hover-foreground');
-                background: var-get($theme, 'date-selected-hover-background');
-            }
+    &[part~='selected'][part~='current'][part~='first'][part~='last'] {
+        color: var-get($theme, 'date-current-foreground');
+    }
 
-            &:focus {
-                color: var-get($theme, 'date-selected-hover-foreground');
-                background: var-get($theme, 'date-selected-hover-background');
-            }
+    &[part~='selected'][part~='first'][part~='last']:not([part~='preview']),
+    &[part~='selected'][part~='special'][part~='first'][part~='last']:not([part~='preview']) {
+        background: transparent;
+    }
+
+    &[part~='range']:not([part~='preview']) {
+        height: 100%;
+        color: var-get($theme, 'date-selected-range-foreground');
+
+        &:hover,
+        &:where(:hover):focus {
+            color: var-get($theme, 'date-selected-range-hover-foreground');
+            background: var-get($theme, 'date-selected-range-hover-background');
         }
 
-        &[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');
+        &:focus {
+            color: var-get($theme, 'date-selected-range-focus-foreground');
+            background: var-get($theme, 'date-selected-range-focus-background');
         }
 
-        &[part~='selected'][part~='first'] {
+        &[part~='first'][part~='last'] {
             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');
+            border-color: var-get($theme, 'date-range-preview-border-color');
+            border-radius: var-get($theme, 'date-range-border-radius');
 
             &:hover {
                 color: var-get($theme, 'date-selected-hover-foreground');
@@ -158,42 +187,16 @@ $row-gap: rem(6px);
                 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');
+        &[part~='first'],
+        &[part~='last'] {
+            color: var-get($theme, 'date-selected-range-foreground');
+            background: var-get($theme, 'date-selected-range-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');
-
-            &:hover {
-                color: var-get($theme, 'date-selected-hover-foreground');
-                background: var-get($theme, 'date-selected-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;
-            }
-        }
-
-        &[part~='selected'] {
-            color: var-get($theme, 'date-selected-range-foreground');
-
-            &:hover {
+            &:where(:hover):focus {
                 color: var-get($theme, 'date-selected-range-hover-foreground');
                 background: var-get($theme, 'date-selected-range-hover-background');
             }
@@ -202,36 +205,51 @@ $row-gap: rem(6px);
                 color: var-get($theme, 'date-selected-range-focus-foreground');
                 background: var-get($theme, 'date-selected-range-focus-background');
             }
-        }
 
-        &[part~='selected'][part~='current']:not([part~='inactive']) {
-            color: var-get($theme, 'date-selected-current-foreground');
+            // &:hover,
+            // &:focus {
+            //     border-inline-start-color: transparent;
+            // }
+        }
 
-            &:focus {
-                color: var-get($theme, 'date-selected-current-focus-foreground');
-            }
+        &[part~='first'] {
+            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-current-hover-foreground');
-            }
+        &[part~='last'] {
+            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'][part~='current'] {
-            color: var-get($theme, 'date-selected-foreground');
+        &[part~='preview'][part~='weekend'][part~='first'][part~='last']:not([part~='current']),
+        &[part~='preview'][part~='weekend'][part~='first']:not([part~='current']),
+        &[part~='preview'][part~='weekend'][part~='last']:not([part~='current']),
+        &[part~='preview'][part~='weekend']:not([part~='current']) {
+            color: var-get($theme, 'weekend-color');
         }
 
-        &[part~='preview'] {
-            background: transparent !important;
+        &[part~='current'] {
+            color: var-get($theme, 'date-current-foreground');
 
-            &::after {
-                background: transparent;
+            &:hover,
+            &:where(:hover):focus {
+                color: var-get($theme, 'date-current-hover-foreground');
+            }
+
+            &:focus {
+                color: var-get($theme, 'date-current-focus-foreground');
             }
         }
     }
 
+    // In fluent theme the current background is set on the ::before element,
+    // only the foreground colors are set to the date-cell
     &[part~='current'] {
-        position: relative;
-        overflow: hidden;
         color: var-get($theme, 'date-current-foreground');
 
         &::before {
@@ -240,16 +258,17 @@ $row-gap: rem(6px);
             z-index: -1;
             width: var-get($theme, 'inner-size');
             height: var-get($theme, 'inner-size');
-            border-radius: 50%;
+            border-radius: calc(var-get($theme, 'date-current-border-radius') - ($border-size * 2));
             background: var-get($theme, 'date-current-background');
             border-color: var-get($theme, 'date-current-border-color');
         }
 
-        &:hover {
+        &:hover,
+        &:where(:hover):focus {
             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,23 +277,48 @@ $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~='current'][part~='disabled'] {
+        color: var-get($theme, 'date-current-foreground');
+    }
+
+    &[part~='current'][part~='range'][part~='disabled'] {
+        color: var-get($theme, 'date-selected-current-range-foreground');
+    }
+
     &[part~='special'] {
-        color: var-get($theme, 'date-special-foreground');
-        background: var-get($theme, 'date-special-background');
+        &::after {
+            border-radius: calc(var-get($theme, 'date-current-border-radius') - ($border-size * 2))
+        }
+    }
 
+    &[part~='special']:not([part~='current']),
+    &[part~='special'][part~='range']:not([part~='current']),
+    &[part~='special'][part~='range'][part~='first']:not([part~='current']),
+    &[part~='special'][part~='range'][part~='last']:not([part~='current']) {
         &::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');
+        &:where(:hover):focus {
+            color: var-get($theme, 'date-special-hover-foreground');
+            background: var-get($theme, 'date-special-hover-background');
+        }
+    }
+
+    &[part~='special']:not([part~='current'], [part~='preview']) {
+        color: var-get($theme, 'date-special-foreground');
+        background: var-get($theme, 'date-special-background');
+
+        &:hover,
+        &:where(:hover):focus {
+            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')
@@ -282,8 +326,9 @@ $row-gap: rem(6px);
         }
 
         &:focus {
-            color: var-get($theme, 'date-focus-foreground');
-            background: var-get($theme, 'date-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-hover-border-color')
@@ -291,6 +336,68 @@ $row-gap: rem(6px);
         }
     }
 
+    &[part~='special'][part~='range']:not([part~='current'], [part~='preview']) {
+        color: var-get($theme, 'date-special-range-foreground');
+        background: var-get($theme, 'date-special-range-background');
+
+        &:hover,
+        &:where(:hover):focus {
+            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');
+        }
+    }
+
+    &[part~='special'][part~='range']:not([part~='current'], [part~='preview']),
+    &[part~='special'][part~='first']:not([part~='current'], [part~='preview']),
+    &[part~='special'][part~='last']:not([part~='current'], [part~='preview']) {
+        background: var-get($theme, 'date-special-range-background');
+
+        &:hover,
+        &:where(:hover):focus {
+            background: var-get($theme, 'date-special-range-hover-background');
+        }
+
+        &:focus {
+            background: var-get($theme, 'date-special-range-focus-background');
+        }
+    }
+
+    &[part~='special'][part~='range'][part~='first']:not([part~='current']),
+    &[part~='special'][part~='range'][part~='last']:not([part~='current']) {
+        position: relative;
+
+        &:hover {
+            &::before {
+                background: var-get($theme, 'date-selected-range-hover-background');
+            }
+        }
+
+        &:focus {
+            &::before {
+                background: var-get($theme, 'date-selected-range-focus-background');
+            }
+        }
+
+        &:where(:hover):focus {
+            &::before {
+                background: var-get($theme, 'date-selected-range-hover-background');
+            }
+        }
+
+        &:hover,
+        &:focus,
+        &:where(:hover):focus {
+            &::before {
+                display: none;
+            }
+        }
+    }
+
     &[part~='selected'][part~='special']:not([part~='current']) {
         &::after {
             border-color: var-get($theme, 'date-selected-special-border-color');
@@ -341,21 +448,10 @@ $row-gap: rem(6px);
 }
 
 [part~='date-inner'][part~='single'] {
-    &[part~='weekend']:not([part~='inactive']) {
-        &:hover {
-            color: var-get($theme, 'date-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');
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..671a2b472 100644
--- a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss
+++ b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss
@@ -58,11 +58,14 @@ $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-color: transparent;
 
         &::before {
             height: var-get($theme, 'size');
@@ -74,6 +77,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');
         }
     }
 
@@ -138,110 +142,38 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
         }
     }
 
-    &[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;
-
-        &: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');
-        }
-
-        &: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');
-        }
-
-        &::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']:not([part~='preview']) {
-            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');
-            }
-        }
-
-        &[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 {
-                background: var-get($theme, 'date-selected-hover-background');
-            }
-
-            &:focus {
-                background: var-get($theme, 'date-selected-focus-background');
-            }
-
-        }
-
-        &[part~='range'][part~='first']:not([part~='current']),
-        &[part~='range'][part~='last']:not([part~='current']), {
-            border-color: transparent;
-        }
-
-        &[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'] {
         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~='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');
+            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-current-hover-border-color');
+                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-current-focus-border-color');
+                border-color: var-get($theme, 'date-selected-current-focus-border-color');
             }
 
             &::after {
@@ -252,18 +184,18 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
         &[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');
+            border-color: var-get($theme, 'date-selected-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');
+                color: var-get($theme, 'date-selected-current-range-hover-foreground');
+                border-color: var-get($theme, 'date-selected-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');
+                color: var-get($theme, 'date-selected-current-range-focus-foreground');
+                border-color: var-get($theme, 'date-selected-current-focus-border-color');
             }
 
             &::after {
@@ -306,6 +238,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
         &[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;
@@ -314,13 +247,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');
             }
         }
 
@@ -456,8 +389,79 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
         }
     }
 
-    &[part~='disabled'][part~='range']:not([part~='preview']) {
-        color: var-get($theme, 'date-disabled-range-foreground');
+    &[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;
+
+        &: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');
+        }
+
+        &: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');
+        }
+
+        &::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']: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-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');
+            }
+        }
+
+        &[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 {
+                background: var-get($theme, 'date-selected-hover-background');
+            }
+
+            &:focus {
+                background: var-get($theme, 'date-selected-focus-background');
+            }
+
+        }
+
+        &[part~='range'][part~='first']:not([part~='current']),
+        &[part~='range'][part~='last']:not([part~='current']), {
+            border-color: transparent;
+        }
+
+        &[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~='disabled'][part~='first'],
@@ -473,6 +477,22 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
        }
     }
 
+    &[part~='disabled'][part~='range']:where(:not([part~='preview'])) {
+        color: var-get($theme, 'date-disabled-range-foreground');
+
+        &:hover {
+            color: var-get($theme, 'date-disabled-range-foreground');
+        }
+    }
+
+    &[part~='disabled'][part~='special'] {
+        color: var-get($theme, 'date-special-foreground');
+
+        &:hover {
+            color: var-get($theme, 'date-special-foreground');
+        }
+    }
+
     &[part~='selected'][part~='special']:not([part~='current'], [part~='range']) {
         border-color: var-get($theme, 'date-selected-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 1ae853079..42f35b9b9 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');
     }
 }
 
@@ -65,11 +65,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-color: transparent;
 
         &::before {
             height: var-get($theme, 'size');
@@ -81,6 +83,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');
         }
     }
 
@@ -145,10 +148,20 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
         }
 
         &[part~='current'][part~='range']:not([part~='last'], [part~='first']) {
-            color: var-get($theme, 'date-current-foreground');
+            color: var-get($theme, 'date-selected-current-range-foreground');
+            background: var-get($theme, 'date-selected-current-range-background');
+            border-color: var-get($theme, 'date-selected-current-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-selected-current-hover-border-color');
+            }
 
             &:focus {
-                border-color: var-get($theme, 'date-current-focus-border-color');
+                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-selected-current-focus-border-color');
             }
         }
 
@@ -264,6 +277,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,6 +286,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-special-focus-background');
 
             &::after {
                 border-color: var-get($theme, 'date-special-hover-border-color')
@@ -287,8 +302,8 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
             }
 
             &:hover {
-                color: var-get($theme, 'date-special-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');
 
                 // stylelint-disable-next-line
                 &::after {
@@ -297,8 +312,8 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
             }
 
             &:focus {
-                color: var-get($theme, 'date-special-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');
 
                 // stylelint-disable-next-line
                 &::after {
diff --git a/src/components/calendar/themes/shared/material/year-month-view.material.scss b/src/components/calendar/themes/shared/material/year-month-view.material.scss
index 4a80e75c7..404397f64 100644
--- a/src/components/calendar/themes/shared/material/year-month-view.material.scss
+++ b/src/components/calendar/themes/shared/material/year-month-view.material.scss
@@ -64,7 +64,7 @@ $theme: $material;
     &[part~='selected'][part~='current'] {
         color: var-get($theme, 'ym-selected-current-foreground');
         background: var-get($theme, 'ym-selected-current-background');
-        box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-current-outline-color');
+        box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'ym-selected-current-outline-color');
 
         &:focus,
         &:hover {
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}
   `,
 };