@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

package/components/CalendarMonth/calendar-month.css

@@ -1,70 +1,65 @@
-.pf-v5-c-calendar-month {
-  --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
-  --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
-  --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
-  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
-  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
-  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
-  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
-  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
-}
-
-.pf-v5-c-calendar-month {
-  --pf-v5-c-calendar-month--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-calendar-month--PaddingTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-calendar-month--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-calendar-month--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-calendar-month--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-calendar-month--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-calendar-month__header--MarginBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-calendar-month__header-year--Width: 8.5ch;
+:where(:root),
+:where(.pf-v5-c-calendar-month) {
+  --pf-v5-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-calendar-month--PaddingTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-calendar-month--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-calendar-month--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-calendar-month--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-calendar-month--FontSize: var(--pf-t--global--font--size--sm);
+  --pf-v5-c-calendar-month__header--MarginBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-calendar-month__header--Gap: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-calendar-month__header-year--Width: 9ch;
   --pf-v5-c-calendar-month__header-nav-control--MarginRight: 0;
   --pf-v5-c-calendar-month__header-nav-control--MarginLeft: 0;
-  --pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight: 0;
-  --pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft: 0;
-  --pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginRight: 0;
-  --pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginLeft: 0;
-  --pf-v5-c-calendar-month__days--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-calendar-month__days--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-calendar-month__day--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-calendar-month__day--FontWeight: var(--pf-v5-global--FontWeight--normal);
+  --pf-v5-c-calendar-month__days--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-calendar-month__days--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-calendar-month__day--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-calendar-month__day--FontWeight: var(--pf-t--global--font--weight--body);
+  --pf-v5-c-calendar-month__day--Color: var(--pf-t--global--text--color--regular);
   --pf-v5-c-calendar-month__dates-cell--PaddingTop: 0.125rem;
   --pf-v5-c-calendar-month__dates-cell--PaddingRight: 0.125rem;
   --pf-v5-c-calendar-month__dates-cell--PaddingBottom: 0.125rem;
   --pf-v5-c-calendar-month__dates-cell--PaddingLeft: 0.125rem;
-  --pf-v5-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-v5-global--primary-color--200);
-  --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor: var(--pf-v5-global--primary-color--200);
-  --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow: 0 0 0.3125rem var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-v5-global--Color--light-100);
+  --pf-v5-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+  --pf-v5-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-t--global--text--color--on-brand--default);
   --pf-v5-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
   --pf-v5-c-calendar-month__dates-cell--before--Top: 0;
   --pf-v5-c-calendar-month__dates-cell--before--Right: 0;
   --pf-v5-c-calendar-month__dates-cell--before--Bottom: var(--pf-v5-c-calendar-month__dates-cell--PaddingBottom);
   --pf-v5-c-calendar-month__dates-cell--before--Left: 0;
-  --pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-v5-global--palette--blue-50);
+  --pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v5-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left: 50%;
   --pf-v5-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right: 50%;
-  --pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-v5-global--palette--blue-100);
-  --pf-v5-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-v5-global--palette--blue-100);
-  --pf-v5-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-v5-global--Color--200);
+  --pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
+  --pf-v5-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
   --pf-v5-c-calendar-month__date--Width: 4ch;
   --pf-v5-c-calendar-month__date--Height: 4ch;
-  --pf-v5-c-calendar-month__date--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
-  --pf-v5-c-calendar-month__date--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-calendar-month__date--BorderRadius: var(--pf-t--global--border--radius--large);
+  --pf-v5-c-calendar-month__date--Color: var(--pf-t--global--text--color--regular);
   --pf-v5-c-calendar-month__date--BackgroundColor: transparent;
-  --pf-v5-c-calendar-month__date--disabled--Color: var(--pf-v5-global--disabled-color--200);
-  --pf-v5-c-calendar-month__date--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
+  --pf-v5-c-calendar-month__date--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --pf-v5-c-calendar-month__date--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --pf-v5-c-calendar-month__date--after--BorderWidth: var(--pf-t--global--border--width--regular);
   --pf-v5-c-calendar-month__date--after--BorderColor: transparent;
-  --pf-v5-c-calendar-month__date--hover--BackgroundColor: var(--pf-v5-global--palette--blue-50);
-  --pf-v5-c-calendar-month__date--focus--BackgroundColor: var(--pf-v5-global--palette--blue-50);
-  --pf-v5-c-calendar-month__date--focus--after--BorderColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-calendar-month__date--focus--BoxShadow: none;
-  color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-calendar-month__date--after--OutlineOffset: 0;
+  --pf-v5-c-calendar-month__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-calendar-month__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v5-c-calendar-month__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
+  --pf-v5-c-calendar-month__date--focus--Color: var(--pf-t--global--icon--color--on-brand--clicked);
+  --pf-v5-c-calendar-month__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-calendar-month__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
+  --pf-v5-c-calendar-month__date--after--focus--OutlineOffset: -2px;
+}
+
+:where(.pf-v5-c-calendar-month) {
   display: inline-flex;
   flex-direction: column;
   padding-block-start: var(--pf-v5-c-calendar-month--PaddingTop);
@@ -77,6 +72,7 @@
 
 .pf-v5-c-calendar-month__header {
   display: flex;
+  gap: var(--pf-v5-c-calendar-month__header--Gap);
   margin-block-end: var(--pf-v5-c-calendar-month__header--MarginBottom);
 }
 
@@ -88,18 +84,12 @@
   scale: -1 1;
 }
 
-.pf-v5-c-calendar-month__header-nav-control.pf-m-prev-month {
-  --pf-v5-c-calendar-month__header-nav-control--MarginRight: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
-  --pf-v5-c-calendar-month__header-nav-control--MarginLeft: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);
-}
-.pf-v5-c-calendar-month__header-nav-control.pf-m-next-month {
-  --pf-v5-c-calendar-month__header-nav-control--MarginRight: var(--pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginRight);
-  --pf-v5-c-calendar-month__header-nav-control--MarginLeft: var(--pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginLeft);
-}
-
 .pf-v5-c-calendar-month__header-month {
   flex-grow: 1;
 }
+.pf-v5-c-calendar-month__header-month > .pf-v5-c-menu-toggle {
+  width: 100%;
+}
 
 .pf-v5-c-calendar-month__header-year {
   width: var(--pf-v5-c-calendar-month__header-year--Width);
@@ -110,6 +100,7 @@
 }
 
 .pf-v5-c-calendar-month__days {
+  color: var(--pf-v5-c-calendar-month__day--Color);
   border-block-end: var(--pf-v5-c-calendar-month__days--BorderBottomWidth) solid var(--pf-v5-c-calendar-month__days--BorderBottomColor);
 }
 
@@ -147,6 +138,8 @@
 .pf-v5-c-calendar-month__dates-cell.pf-m-in-range {
   --pf-v5-c-calendar-month__dates-cell--before--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor);
   --pf-v5-c-calendar-month__date--hover--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor);
+  --pf-v5-c-calendar-month__date--hover--BorderWidth: var(--pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth);
+  --pf-v5-c-calendar-month__date--hover--BorderColor: var(--pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BorderColor);
   --pf-v5-c-calendar-month__date--focus--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor);
 }
 .pf-v5-c-calendar-month__dates-cell.pf-m-start-range {
@@ -160,11 +153,12 @@
 }
 .pf-v5-c-calendar-month__dates-cell.pf-m-selected {
   --pf-v5-c-calendar-month__date--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor);
+  --pf-v5-c-calendar-month__date--Color: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--Color);
   --pf-v5-c-calendar-month__date--hover--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor);
+  --pf-v5-c-calendar-month__date--hover--BorderWidth: 0;
   --pf-v5-c-calendar-month__date--focus--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor);
   --pf-v5-c-calendar-month__date--focus--after--BorderColor: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor);
-  --pf-v5-c-calendar-month__date--focus--BoxShadow: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow);
-  --pf-v5-c-calendar-month__date--Color: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--Color);
+  --pf-v5-c-calendar-month__date--after--OutlineOffset: var(--pf-v5-c-calendar-month__date--after--focus--OutlineOffset);
 }
 .pf-v5-c-calendar-month__dates-cell.pf-m-disabled {
   --pf-v5-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
@@ -185,10 +179,10 @@
 }
 .pf-v5-c-calendar-month__date::after {
   position: absolute;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
+  inset-block-start: var(--pf-v5-c-calendar-month__date--after--OutlineOffset);
+  inset-block-end: var(--pf-v5-c-calendar-month__date--after--OutlineOffset);
+  inset-inline-start: var(--pf-v5-c-calendar-month__date--after--OutlineOffset);
+  inset-inline-end: var(--pf-v5-c-calendar-month__date--after--OutlineOffset);
   content: "";
   border: var(--pf-v5-c-calendar-month__date--after--BorderWidth) solid var(--pf-v5-c-calendar-month__date--after--BorderColor);
 }
@@ -197,40 +191,15 @@
 }
 .pf-v5-c-calendar-month__date:hover, .pf-v5-c-calendar-month__date.pf-m-hover {
   --pf-v5-c-calendar-month__date--BackgroundColor: var(--pf-v5-c-calendar-month__date--hover--BackgroundColor);
+  border: var(--pf-v5-c-calendar-month__date--hover--BorderColor) solid var(--pf-v5-c-calendar-month__date--hover--BorderWidth);
 }
 .pf-v5-c-calendar-month__date:focus, .pf-v5-c-calendar-month__date.pf-m-focus {
-  --pf-v5-c-calendar-month__date--BackgroundColor: var(--pf-v5-c-calendar-month__date--focus--BackgroundColor);
   --pf-v5-c-calendar-month__date--after--BorderColor: var(--pf-v5-c-calendar-month__date--focus--after--BorderColor);
   outline: 0;
-  box-shadow: var(--pf-v5-c-calendar-month__date--focus--BoxShadow);
 }
 .pf-v5-c-calendar-month__date:disabled {
+  --pf-v5-c-calendar-month__date--BackgroundColor: var(--pf-v5-c-calendar-month__date--disabled--BackgroundColor);
   --pf-v5-c-calendar-month__date--Color: var(--pf-v5-c-calendar-month__date--disabled--Color);
   --pf-v5-c-calendar-month__date--hover--focus--BorderColor: transparent;
   pointer-events: none;
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-calendar-month {
-  --pf-v5-c-calendar-month--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-v5-global--palette--black-500);
-  --pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-v5-global--primary-color--300);
-  --pf-v5-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-v5-global--primary-color--400);
-  --pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-v5-global--palette--black-900);
-  --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-v5-global--palette--blue-400);
-  --pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-calendar-month__date--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-calendar-month__date--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-calendar-month__date--focus--after--BorderColor: transparent;
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date:hover, :where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date.pf-m-hover {
-  --pf-v5-c-calendar-month__date--after--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-calendar-month__date--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date:focus, :where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date.pf-m-focus {
-  --pf-v5-c-calendar-month__date--after--BorderColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-calendar-month__date--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-calendar-month__date--BackgroundColor: var(--pf-v5-global--primary-color--300);
-  --pf-v5-c-calendar-month__date--Color: var(--pf-v5-global--primary-color--400);
 }

package/components/CalendarMonth/calendar-month.scss

@@ -1,70 +1,76 @@
-.#{$calendar-month} {
-  --#{$calendar-month}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$calendar-month}--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$calendar-month}--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$calendar-month}--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$calendar-month}--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$calendar-month}--FontSize: var(--#{$pf-global}--FontSize--sm);
+:where(:root),
+:where(.#{$calendar-month}) {
+  --#{$calendar-month}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$calendar-month}--PaddingTop: var(--pf-t--global--spacer--lg);
+  --#{$calendar-month}--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$calendar-month}--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$calendar-month}--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$calendar-month}--FontSize: var(--pf-t--global--font--size--sm);
 
   // header
-  --#{$calendar-month}__header--MarginBottom: var(--#{$pf-global}--spacer--md);
-  --#{$calendar-month}__header-year--Width: 8.5ch;
+  --#{$calendar-month}__header--MarginBottom: var(--pf-t--global--spacer--md);
+  --#{$calendar-month}__header--Gap: var(--pf-t--global--spacer--xs);
+  --#{$calendar-month}__header-year--Width: 9ch;
   --#{$calendar-month}__header-nav-control--MarginRight: 0;
   --#{$calendar-month}__header-nav-control--MarginLeft: 0;
-  --#{$calendar-month}__header-nav-control--m-prev-month--MarginRight: 0; // remove in breaking change
-  --#{$calendar-month}__header-nav-control--m-prev-month--MarginLeft: 0; // remove in breaking change
-  --#{$calendar-month}__header-nav-control--m-next-month--MarginRight: 0; // remove in breaking change
-  --#{$calendar-month}__header-nav-control--m-next-month--MarginLeft: 0; // remove in breaking change
 
   // week days thead
-  --#{$calendar-month}__days--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$calendar-month}__days--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$calendar-month}__days--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$calendar-month}__days--BorderBottomColor: var(--pf-t--global--border--color--default);
 
   // day th
-  --#{$calendar-month}__day--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$calendar-month}__day--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$calendar-month}__day--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$calendar-month}__day--FontWeight: var(--pf-t--global--font--weight--body);  
+  --#{$calendar-month}__day--Color: var(--pf-t--global--text--color--regular);
+
 
   // dates td
   --#{$calendar-month}__dates-cell--PaddingTop: #{pf-size-prem(2px)};
   --#{$calendar-month}__dates-cell--PaddingRight: #{pf-size-prem(2px)};
   --#{$calendar-month}__dates-cell--PaddingBottom: #{pf-size-prem(2px)};
   --#{$calendar-month}__dates-cell--PaddingLeft: #{pf-size-prem(2px)};
-  --#{$calendar-month}__dates-row--first-child__dates-cell--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$calendar-month}__dates-cell--m-current__date--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$calendar-month}__dates-cell--m-selected__date--BackgroundColor: var(--#{$pf-global}--active-color--100);
-  --#{$calendar-month}__dates-cell--m-selected__date--hover--BackgroundColor: var(--#{$pf-global}--active-color--100);
-  --#{$calendar-month}__dates-cell--m-selected__date--focus--BackgroundColor: var(--#{$pf-global}--primary-color--200);
-  --#{$calendar-month}__dates-cell--m-selected__date--focus--after--BorderColor: var(--#{$pf-global}--primary-color--200);
-  --#{$calendar-month}__dates-cell--m-selected__date--focus--BoxShadow: 0 0 #{pf-size-prem(5px)} var(--#{$pf-global}--primary-color--100);
-  --#{$calendar-month}__dates-cell--m-selected__date--Color: var(--#{$pf-global}--Color--light-100);
+  --#{$calendar-month}__dates-row--first-child__dates-cell--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$calendar-month}__dates-cell--m-current__date--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$calendar-month}__dates-cell--m-selected__date--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --#{$calendar-month}__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --#{$calendar-month}__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --#{$calendar-month}__dates-cell--m-selected__date--focus--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+  --#{$calendar-month}__dates-cell--m-selected__date--Color: var(--pf-t--global--text--color--on-brand--default);
   --#{$calendar-month}__dates-cell--before--BackgroundColor: transparent;
   --#{$calendar-month}__dates-cell--before--Top: 0;
   --#{$calendar-month}__dates-cell--before--Right: 0;
   --#{$calendar-month}__dates-cell--before--Bottom: var(--#{$calendar-month}__dates-cell--PaddingBottom);
   --#{$calendar-month}__dates-cell--before--Left: 0;
-  --#{$calendar-month}__dates-cell--m-in-range--before--BackgroundColor: var(--#{$pf-global}--palette--blue-50);
+  --#{$calendar-month}__dates-cell--m-in-range--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$calendar-month}__dates-cell--m-in-range--m-start-range--before--Left: 50%;
   --#{$calendar-month}__dates-cell--m-in-range--m-end-range--before--Right: 50%;
-  --#{$calendar-month}__dates-cell--m-in-range__date--hover--BackgroundColor: var(--#{$pf-global}--palette--blue-100);
-  --#{$calendar-month}__dates-cell--m-in-range__date--focus--BackgroundColor: var(--#{$pf-global}--palette--blue-100);
-  --#{$calendar-month}__dates-cell--m-adjacent-month__date--Color: var(--#{$pf-global}--Color--200);
+  --#{$calendar-month}__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$calendar-month}__dates-cell--m-in-range__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
+  --#{$calendar-month}__dates-cell--m-in-range__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
+  --#{$calendar-month}__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$calendar-month}__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
 
   // date button
   --#{$calendar-month}__date--Width: 4ch;
   --#{$calendar-month}__date--Height: 4ch;
-  --#{$calendar-month}__date--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
-  --#{$calendar-month}__date--Color: var(--#{$pf-global}--Color--100);
+  --#{$calendar-month}__date--BorderRadius: var(--pf-t--global--border--radius--large);
+  --#{$calendar-month}__date--Color: var(--pf-t--global--text--color--regular);
   --#{$calendar-month}__date--BackgroundColor: transparent;
-  --#{$calendar-month}__date--disabled--Color: var(--#{$pf-global}--disabled-color--200);
-  --#{$calendar-month}__date--after--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
+  --#{$calendar-month}__date--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --#{$calendar-month}__date--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --#{$calendar-month}__date--after--BorderWidth: var(--pf-t--global--border--width--regular);
   --#{$calendar-month}__date--after--BorderColor: transparent;
-  --#{$calendar-month}__date--hover--BackgroundColor: var(--#{$pf-global}--palette--blue-50);
-  --#{$calendar-month}__date--focus--BackgroundColor: var(--#{$pf-global}--palette--blue-50);
-  --#{$calendar-month}__date--focus--after--BorderColor: var(--#{$pf-global}--active-color--100);
-  --#{$calendar-month}__date--focus--BoxShadow: none;
-
-  @include pf-v5-t-light;
+  --#{$calendar-month}__date--after--OutlineOffset: 0;
+  --#{$calendar-month}__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$calendar-month}__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
+  --#{$calendar-month}__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
+  --#{$calendar-month}__date--focus--Color: var(--pf-t--global--icon--color--on-brand--clicked);
+  --#{$calendar-month}__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --#{$calendar-month}__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
+  --#{$calendar-month}__date--after--focus--OutlineOffset: -2px;
+}
 
+:where(.#{$calendar-month}) {
   display: inline-flex;
   flex-direction: column;
   padding-block-start: var(--#{$calendar-month}--PaddingTop);
@@ -77,6 +83,7 @@
 
 .#{$calendar-month}__header {
   display: flex;
+  gap: var(--#{$calendar-month}__header--Gap);
   margin-block-end: var(--#{$calendar-month}__header--MarginBottom);
 }
 
@@ -86,19 +93,14 @@
   margin-inline-start: var(--#{$calendar-month}__header-nav-control--MarginLeft);
   margin-inline-end: var(--#{$calendar-month}__header-nav-control--MarginRight);
 
-  &.pf-m-prev-month {
-    --#{$calendar-month}__header-nav-control--MarginRight: var(--#{$calendar-month}__header-nav-control--m-prev-month--MarginRight);
-    --#{$calendar-month}__header-nav-control--MarginLeft: var(--#{$calendar-month}__header-nav-control--m-prev-month--MarginLeft);
-  }
-
-  &.pf-m-next-month {
-    --#{$calendar-month}__header-nav-control--MarginRight: var(--#{$calendar-month}__header-nav-control--m-next-month--MarginRight);
-    --#{$calendar-month}__header-nav-control--MarginLeft: var(--#{$calendar-month}__header-nav-control--m-next-month--MarginLeft);
-  }
 }
 
 .#{$calendar-month}__header-month {
   flex-grow: 1;
+
+  & > .#{$menu-toggle} {
+    width: 100%;
+  }
 }
 
 .#{$calendar-month}__header-year {
@@ -110,6 +112,7 @@
 }
 
 .#{$calendar-month}__days {
+  color: var(--#{$calendar-month}__day--Color);
   border-block-end: var(--#{$calendar-month}__days--BorderBottomWidth) solid var(--#{$calendar-month}__days--BorderBottomColor);
 }
 
@@ -150,7 +153,10 @@
   &.pf-m-in-range {
     --#{$calendar-month}__dates-cell--before--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-in-range--before--BackgroundColor);
     --#{$calendar-month}__date--hover--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-in-range__date--hover--BackgroundColor);
+    --#{$calendar-month}__date--hover--BorderWidth: var(--#{$calendar-month}__dates-cell--m-in-range__date--hover--BorderWidth);
+    --#{$calendar-month}__date--hover--BorderColor: var(--#{$calendar-month}__dates-cell--m-in-range__date--hover--BorderColor);
     --#{$calendar-month}__date--focus--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-in-range__date--focus--BackgroundColor);
+    
   }
 
   &.pf-m-start-range {
@@ -167,11 +173,16 @@
 
   &.pf-m-selected {
     --#{$calendar-month}__date--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-selected__date--BackgroundColor);
+    --#{$calendar-month}__date--Color: var(--#{$calendar-month}__dates-cell--m-selected__date--Color);
+
+    // tweak the hover styling for a selected date
     --#{$calendar-month}__date--hover--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-selected__date--hover--BackgroundColor);
+    --#{$calendar-month}__date--hover--BorderWidth: 0;
+
+    // tweak the focus styling for a selected date
     --#{$calendar-month}__date--focus--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-selected__date--focus--BackgroundColor);
     --#{$calendar-month}__date--focus--after--BorderColor: var(--#{$calendar-month}__dates-cell--m-selected__date--focus--after--BorderColor);
-    --#{$calendar-month}__date--focus--BoxShadow: var(--#{$calendar-month}__dates-cell--m-selected__date--focus--BoxShadow);
-    --#{$calendar-month}__date--Color: var(--#{$calendar-month}__dates-cell--m-selected__date--Color);
+    --#{$calendar-month}__date--after--OutlineOffset: var(--#{$calendar-month}__date--after--focus--OutlineOffset);
   }
 
   &.pf-m-disabled {
@@ -194,10 +205,10 @@
 
   &::after {
     position: absolute;
-    inset-block-start: 0;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
+    inset-block-start: var(--#{$calendar-month}__date--after--OutlineOffset);
+    inset-block-end: var(--#{$calendar-month}__date--after--OutlineOffset);
+    inset-inline-start: var(--#{$calendar-month}__date--after--OutlineOffset);
+    inset-inline-end: var(--#{$calendar-month}__date--after--OutlineOffset);
     content: "";
     border: var(--#{$calendar-month}__date--after--BorderWidth) solid var(--#{$calendar-month}__date--after--BorderColor);
   }
@@ -210,28 +221,22 @@
   &:hover,
   &.pf-m-hover {
     --#{$calendar-month}__date--BackgroundColor: var(--#{$calendar-month}__date--hover--BackgroundColor);
+    
+    border: var(--#{$calendar-month}__date--hover--BorderColor) solid var(--#{$calendar-month}__date--hover--BorderWidth);
   }
 
   &:focus,
   &.pf-m-focus {
-    --#{$calendar-month}__date--BackgroundColor: var(--#{$calendar-month}__date--focus--BackgroundColor);
     --#{$calendar-month}__date--after--BorderColor: var(--#{$calendar-month}__date--focus--after--BorderColor);
 
     outline: 0;
-    box-shadow: var(--#{$calendar-month}__date--focus--BoxShadow);
   }
 
   &:disabled {
+    --#{$calendar-month}__date--BackgroundColor: var(--#{$calendar-month}__date--disabled--BackgroundColor);
     --#{$calendar-month}__date--Color: var(--#{$calendar-month}__date--disabled--Color);
     --#{$calendar-month}__date--hover--focus--BorderColor: transparent;
 
     pointer-events: none;
   }
 }
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/calendar-month";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-calendar-month;
-}