@patternfly/react-styles 4.70.1 → 4.71.1

package/css/components/Page/page.css

@@ -168,6 +168,7 @@
   --pf-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
   --pf-c-page__main-section--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+  --pf-c-page__main-section--m-light-100--BackgroundColor: var(--pf-global--BackgroundColor--150);
   --pf-c-page__main-section--m-dark-100--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-100);
   --pf-c-page__main-section--m-dark-200--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
   --pf-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-global--spacer--md);
@@ -271,11 +272,11 @@
 .pf-c-page__header,
 .pf-c-page > .pf-c-masthead {
   grid-area: header;
+  z-index: var(--pf-c-page__header--ZIndex);
 }
 
 .pf-c-page__header {
   color: var(--pf-global--Color--100);
-  z-index: var(--pf-c-page__header--ZIndex);
   grid-template-columns: auto auto;
   display: grid;
   align-items: center;
@@ -640,6 +641,9 @@
 .pf-c-page__main-section.pf-m-light {
   --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-light--BackgroundColor);
 }
+.pf-c-page__main-section.pf-m-light-100 {
+  --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-light-100--BackgroundColor);
+}
 .pf-c-page__main-section[class*=pf-m-dark-] {
   color: var(--pf-global--Color--100);
 }
@@ -773,4 +777,65 @@
 }
 .pf-c-page__drawer > .pf-c-drawer {
   flex: 1 0 auto;
+}
+
+:where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
+:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
+:where(.pf-theme-dark) .pf-c-page__header {
+  --pf-global--Color--100: #e0e0e0;
+  --pf-global--Color--200: #aaabac;
+  --pf-global--BorderColor--100: #444548;
+  --pf-global--primary-color--100: #1fa7f8;
+  --pf-global--link--Color: #1fa7f8;
+  --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--BackgroundColor--100: #1b1d21;
+}
+:where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button,
+:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button,
+:where(.pf-theme-dark) .pf-c-page__header .pf-c-button {
+  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
+  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
+}
+
+:where(.pf-theme-dark) .pf-c-page {
+  --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-page__header--BackgroundColor: var(--pf-global--palette--black-1000);
+}
+:where(.pf-theme-dark) .pf-c-page__header-tools-item.pf-m-selected .pf-c-button {
+  color: var(--pf-global--Color--100);
+}
+:where(.pf-theme-dark) .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge:hover::before {
+  background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
+}
+:where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-bottom {
+  --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
+}
+:where(.pf-theme-dark) .pf-c-page__main-breadcrumb.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-breadcrumb.pf-m-sticky-bottom {
+  --pf-c-page__main-breadcrumb--BackgroundColor: var(--pf-global--BackgroundColor--300);
+}
+:where(.pf-theme-dark) .pf-c-page__main-group.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-group.pf-m-sticky-bottom {
+  --pf-c-page__main-section--m-light--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-page__main-breadcrumb--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
+}
+:where(.pf-theme-dark) .pf-c-page__main-section.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-section.pf-m-sticky-bottom {
+  --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--300);
+}
+:where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
+:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
+:where(.pf-theme-dark) .pf-c-page__header {
+  color: var(--pf-global--Color--100);
 }

package/css/components/Page/page.d.ts

@@ -36,6 +36,7 @@ declare const _default: {
     "shadowTop": "pf-m-shadow-top",
     "fill": "pf-m-fill",
     "noFill": "pf-m-no-fill",
+    "light_100": "pf-m-light-100",
     "dark_100": "pf-m-dark-100",
     "dark_200": "pf-m-dark-200",
     "padding": "pf-m-padding",
@@ -75,6 +76,7 @@ declare const _default: {
   "pageMainTabs": "pf-c-page__main-tabs",
   "pageMainWizard": "pf-c-page__main-wizard",
   "pageSidebar": "pf-c-page__sidebar",
-  "pageSidebarBody": "pf-c-page__sidebar-body"
+  "pageSidebarBody": "pf-c-page__sidebar-body",
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Page/page.js

@@ -38,6 +38,7 @@ exports.default = {
     "shadowTop": "pf-m-shadow-top",
     "fill": "pf-m-fill",
     "noFill": "pf-m-no-fill",
+    "light_100": "pf-m-light-100",
     "dark_100": "pf-m-dark-100",
     "dark_200": "pf-m-dark-200",
     "padding": "pf-m-padding",
@@ -77,5 +78,6 @@ exports.default = {
   "pageMainTabs": "pf-c-page__main-tabs",
   "pageMainWizard": "pf-c-page__main-wizard",
   "pageSidebar": "pf-c-page__sidebar",
-  "pageSidebarBody": "pf-c-page__sidebar-body"
+  "pageSidebarBody": "pf-c-page__sidebar-body",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Page/page.mjs

@@ -36,6 +36,7 @@ export default {
     "shadowTop": "pf-m-shadow-top",
     "fill": "pf-m-fill",
     "noFill": "pf-m-no-fill",
+    "light_100": "pf-m-light-100",
     "dark_100": "pf-m-dark-100",
     "dark_200": "pf-m-dark-200",
     "padding": "pf-m-padding",
@@ -75,5 +76,6 @@ export default {
   "pageMainTabs": "pf-c-page__main-tabs",
   "pageMainWizard": "pf-c-page__main-wizard",
   "pageSidebar": "pf-c-page__sidebar",
-  "pageSidebarBody": "pf-c-page__sidebar-body"
+  "pageSidebarBody": "pf-c-page__sidebar-body",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Pagination/pagination.css

@@ -331,4 +331,8 @@
     --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
     --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
   }
+}
+
+:where(.pf-theme-dark) .pf-c-pagination {
+  --pf-c-pagination--m-sticky--BackgroundColor: var(--pf-global--BackgroundColor--300);
 }

package/css/components/Pagination/pagination.d.ts

@@ -28,6 +28,7 @@ declare const _default: {
   "paginationNav": "pf-c-pagination__nav",
   "paginationNavControl": "pf-c-pagination__nav-control",
   "paginationNavPageSelect": "pf-c-pagination__nav-page-select",
-  "paginationTotalItems": "pf-c-pagination__total-items"
+  "paginationTotalItems": "pf-c-pagination__total-items",
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Pagination/pagination.js

@@ -30,5 +30,6 @@ exports.default = {
   "paginationNav": "pf-c-pagination__nav",
   "paginationNavControl": "pf-c-pagination__nav-control",
   "paginationNavPageSelect": "pf-c-pagination__nav-page-select",
-  "paginationTotalItems": "pf-c-pagination__total-items"
+  "paginationTotalItems": "pf-c-pagination__total-items",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Pagination/pagination.mjs

@@ -28,5 +28,6 @@ export default {
   "paginationNav": "pf-c-pagination__nav",
   "paginationNavControl": "pf-c-pagination__nav-control",
   "paginationNavPageSelect": "pf-c-pagination__nav-page-select",
-  "paginationTotalItems": "pf-c-pagination__total-items"
+  "paginationTotalItems": "pf-c-pagination__total-items",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Popover/popover.css

@@ -169,4 +169,17 @@
 
 .pf-c-popover__footer {
   margin-top: var(--pf-c-popover__footer--MarginTop);
+}
+
+:where(.pf-theme-dark) .pf-c-popover {
+  --pf-c-popover--BoxShadow: none;
+  --pf-c-popover__arrow--BoxShadow: none;
+  --pf-c-popover__arrow--BackgroundColor: var(--pf-c-popover__content--BackgroundColor);
+  --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
+  --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
+  --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
+}
+:where(.pf-theme-dark) .pf-c-popover,
+:where(.pf-theme-dark) .pf-c-popover .pf-c-popover__arrow {
+  border: 4px solid var(--pf-global--BorderColor--400);
 }

package/css/components/Popover/popover.d.ts

@@ -31,6 +31,7 @@ declare const _default: {
   "popoverTitle": "pf-c-popover__title",
   "popoverTitleIcon": "pf-c-popover__title-icon",
   "popoverTitleText": "pf-c-popover__title-text",
+  "themeDark": "pf-theme-dark",
   "title": "pf-c-title"
 };
 export default _default;

package/css/components/Popover/popover.js

@@ -33,5 +33,6 @@ exports.default = {
   "popoverTitle": "pf-c-popover__title",
   "popoverTitleIcon": "pf-c-popover__title-icon",
   "popoverTitleText": "pf-c-popover__title-text",
+  "themeDark": "pf-theme-dark",
   "title": "pf-c-title"
 };

package/css/components/Popover/popover.mjs

@@ -31,5 +31,6 @@ export default {
   "popoverTitle": "pf-c-popover__title",
   "popoverTitleIcon": "pf-c-popover__title-icon",
   "popoverTitleText": "pf-c-popover__title-text",
+  "themeDark": "pf-theme-dark",
   "title": "pf-c-title"
 };

package/css/components/Progress/progress.css

@@ -154,4 +154,10 @@
   left: 0;
   height: var(--pf-c-progress__indicator--Height);
   background-color: var(--pf-c-progress__indicator--BackgroundColor);
+}
+
+:where(.pf-theme-dark) .pf-c-progress {
+  --pf-c-progress--m-inside__measure--Color: var(--pf-global--palette--black-900);
+  --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--palette--black-900);
+  --pf-c-progress--m-warning--m-inside__measure--Color: var(--pf-global--palette--black-900);
 }

package/css/components/Progress/progress.d.ts

@@ -18,6 +18,7 @@ declare const _default: {
   "progressIndicator": "pf-c-progress__indicator",
   "progressMeasure": "pf-c-progress__measure",
   "progressStatus": "pf-c-progress__status",
-  "progressStatusIcon": "pf-c-progress__status-icon"
+  "progressStatusIcon": "pf-c-progress__status-icon",
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Progress/progress.js

@@ -20,5 +20,6 @@ exports.default = {
   "progressIndicator": "pf-c-progress__indicator",
   "progressMeasure": "pf-c-progress__measure",
   "progressStatus": "pf-c-progress__status",
-  "progressStatusIcon": "pf-c-progress__status-icon"
+  "progressStatusIcon": "pf-c-progress__status-icon",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Progress/progress.mjs

@@ -18,5 +18,6 @@ export default {
   "progressIndicator": "pf-c-progress__indicator",
   "progressMeasure": "pf-c-progress__measure",
   "progressStatus": "pf-c-progress__status",
-  "progressStatusIcon": "pf-c-progress__status-icon"
+  "progressStatusIcon": "pf-c-progress__status-icon",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/SearchInput/search-input.css

@@ -175,4 +175,13 @@
 
 .pf-c-search-input__menu-item-text {
   flex-grow: 1;
+}
+
+:where(.pf-theme-dark) .pf-c-search-input {
+  --pf-c-search-input__text--before--BorderColor: transparent;
+  --pf-c-search-input__text--after--BorderBottomColor: var(--pf-global--BorderColor--400);
+  background-color: var(--pf-global--BackgroundColor--400);
+}
+:where(.pf-theme-dark) .pf-c-search-input__text::before {
+  border-bottom-color: var(--pf-global--BorderColor--400);
 }

package/css/components/SearchInput/search-input.d.ts

@@ -17,6 +17,7 @@ declare const _default: {
   "searchInputNav": "pf-c-search-input__nav",
   "searchInputText": "pf-c-search-input__text",
   "searchInputTextInput": "pf-c-search-input__text-input",
-  "searchInputUtilities": "pf-c-search-input__utilities"
+  "searchInputUtilities": "pf-c-search-input__utilities",
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/SearchInput/search-input.js

@@ -19,5 +19,6 @@ exports.default = {
   "searchInputNav": "pf-c-search-input__nav",
   "searchInputText": "pf-c-search-input__text",
   "searchInputTextInput": "pf-c-search-input__text-input",
-  "searchInputUtilities": "pf-c-search-input__utilities"
+  "searchInputUtilities": "pf-c-search-input__utilities",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/SearchInput/search-input.mjs

@@ -17,5 +17,6 @@ export default {
   "searchInputNav": "pf-c-search-input__nav",
   "searchInputText": "pf-c-search-input__text",
   "searchInputTextInput": "pf-c-search-input__text-input",
-  "searchInputUtilities": "pf-c-search-input__utilities"
+  "searchInputUtilities": "pf-c-search-input__utilities",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Select/select.css

@@ -568,4 +568,20 @@
   margin-top: var(--pf-c-select__menu-footer--MarginTop);
   margin-bottom: var(--pf-c-select__menu-footer--MarginBottom);
   box-shadow: var(--pf-c-select__menu-footer--BoxShadow);
+}
+
+:where(.pf-theme-dark) .pf-c-select {
+  --pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
+  --pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-select__toggle--before--BorderTopColor: transparent;
+  --pf-c-select__toggle--before--BorderRightColor: transparent;
+  --pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--400);
+  --pf-c-select__toggle--before--BorderLeftColor: transparent;
+  --pf-c-select__menu--Top: 100%;
+  --pf-c-select__menu--m-top--TranslateY: -100%;
+  --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-select__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
+}
+:where(.pf-theme-dark) .pf-c-select__toggle:disabled, :where(.pf-theme-dark) .pf-c-select__toggle.pf-m-disabled {
+  color: var(--pf-global--palette--black-100);
 }

package/css/components/Select/select.d.ts

@@ -54,6 +54,7 @@ declare const _default: {
   "selectToggleStatusIcon": "pf-c-select__toggle-status-icon",
   "selectToggleText": "pf-c-select__toggle-text",
   "selectToggleTypeahead": "pf-c-select__toggle-typeahead",
-  "selectToggleWrapper": "pf-c-select__toggle-wrapper"
+  "selectToggleWrapper": "pf-c-select__toggle-wrapper",
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Select/select.js

@@ -56,5 +56,6 @@ exports.default = {
   "selectToggleStatusIcon": "pf-c-select__toggle-status-icon",
   "selectToggleText": "pf-c-select__toggle-text",
   "selectToggleTypeahead": "pf-c-select__toggle-typeahead",
-  "selectToggleWrapper": "pf-c-select__toggle-wrapper"
+  "selectToggleWrapper": "pf-c-select__toggle-wrapper",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Select/select.mjs

@@ -54,5 +54,6 @@ export default {
   "selectToggleStatusIcon": "pf-c-select__toggle-status-icon",
   "selectToggleText": "pf-c-select__toggle-text",
   "selectToggleTypeahead": "pf-c-select__toggle-typeahead",
-  "selectToggleWrapper": "pf-c-select__toggle-wrapper"
+  "selectToggleWrapper": "pf-c-select__toggle-wrapper",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/SimpleList/simple-list.css

@@ -69,4 +69,15 @@
 
 .pf-c-simple-list__section + .pf-c-simple-list__section {
   margin-top: var(--pf-c-simple-list__section--section--MarginTop);
+}
+
+:where(.pf-theme-dark) .pf-c-simple-list {
+  --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--active-color--100);
+  --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
+  --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
+  --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
+  --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
 }

package/css/components/SimpleList/simple-list.d.ts

@@ -6,6 +6,7 @@ declare const _default: {
   "simpleList": "pf-c-simple-list",
   "simpleListItemLink": "pf-c-simple-list__item-link",
   "simpleListSection": "pf-c-simple-list__section",
-  "simpleListTitle": "pf-c-simple-list__title"
+  "simpleListTitle": "pf-c-simple-list__title",
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/SimpleList/simple-list.js

@@ -8,5 +8,6 @@ exports.default = {
   "simpleList": "pf-c-simple-list",
   "simpleListItemLink": "pf-c-simple-list__item-link",
   "simpleListSection": "pf-c-simple-list__section",
-  "simpleListTitle": "pf-c-simple-list__title"
+  "simpleListTitle": "pf-c-simple-list__title",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/SimpleList/simple-list.mjs

@@ -6,5 +6,6 @@ export default {
   "simpleList": "pf-c-simple-list",
   "simpleListItemLink": "pf-c-simple-list__item-link",
   "simpleListSection": "pf-c-simple-list__section",
-  "simpleListTitle": "pf-c-simple-list__title"
+  "simpleListTitle": "pf-c-simple-list__title",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Skeleton/skeleton.css

@@ -159,4 +159,10 @@
   100% {
     transform: translateX(100%);
   }
+}
+:where(.pf-theme-dark) .pf-c-skeleton {
+  --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-skeleton--after--LinearGradientColorStop1: var(--pf-global--palette--black-600);
+  --pf-c-skeleton--after--LinearGradientColorStop2: var(--pf-global--palette--black-500);
+  --pf-c-skeleton--after--LinearGradientColorStop3: var(--pf-global--palette--black-600);
 }

package/css/components/Skeleton/skeleton.d.ts

@@ -28,6 +28,7 @@ declare const _default: {
     "textMd": "pf-m-text-md",
     "textSm": "pf-m-text-sm"
   },
-  "skeleton": "pf-c-skeleton"
+  "skeleton": "pf-c-skeleton",
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Skeleton/skeleton.js

@@ -30,5 +30,6 @@ exports.default = {
     "textMd": "pf-m-text-md",
     "textSm": "pf-m-text-sm"
   },
-  "skeleton": "pf-c-skeleton"
+  "skeleton": "pf-c-skeleton",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Skeleton/skeleton.mjs

@@ -28,5 +28,6 @@ export default {
     "textMd": "pf-m-text-md",
     "textSm": "pf-m-text-sm"
   },
-  "skeleton": "pf-c-skeleton"
+  "skeleton": "pf-c-skeleton",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Switch/switch.css

@@ -134,4 +134,11 @@
   grid-column: 2;
   color: var(--pf-c-switch__label--Color);
   vertical-align: top;
+}
+
+:where(.pf-theme-dark) .pf-c-switch {
+  --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
+  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);
+  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--100);
+  --pf-c-switch__toggle--before--BoxShadow: none;
 }

package/css/components/Switch/switch.d.ts

@@ -9,6 +9,7 @@ declare const _default: {
   "switchInput": "pf-c-switch__input",
   "switchLabel": "pf-c-switch__label",
   "switchToggle": "pf-c-switch__toggle",
-  "switchToggleIcon": "pf-c-switch__toggle-icon"
+  "switchToggleIcon": "pf-c-switch__toggle-icon",
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Switch/switch.js

@@ -11,5 +11,6 @@ exports.default = {
   "switchInput": "pf-c-switch__input",
   "switchLabel": "pf-c-switch__label",
   "switchToggle": "pf-c-switch__toggle",
-  "switchToggleIcon": "pf-c-switch__toggle-icon"
+  "switchToggleIcon": "pf-c-switch__toggle-icon",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Switch/switch.mjs

@@ -9,5 +9,6 @@ export default {
   "switchInput": "pf-c-switch__input",
   "switchLabel": "pf-c-switch__label",
   "switchToggle": "pf-c-switch__toggle",
-  "switchToggleIcon": "pf-c-switch__toggle-icon"
+  "switchToggleIcon": "pf-c-switch__toggle-icon",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Table/table.css

@@ -1059,4 +1059,11 @@
 
 .pf-c-table .pf-m-width-100 {
   --pf-c-table--cell--Width: 100%;
+}
+
+:where(.pf-theme-dark) .pf-c-table {
+  --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--150);
+}
+:where(.pf-theme-dark) .pf-c-table__favorite .pf-c-button:hover, :where(.pf-theme-dark) .pf-c-table__favorite .pf-c-button:focus {
+  --pf-c-button--m-plain--Color: var(--pf-global--palette--gold-100);
 }

package/css/components/Table/table.d.ts

@@ -75,6 +75,7 @@ declare const _default: {
   "tableSubhead": "pf-c-table__subhead",
   "tableText": "pf-c-table__text",
   "tableToggle": "pf-c-table__toggle",
-  "tableToggleIcon": "pf-c-table__toggle-icon"
+  "tableToggleIcon": "pf-c-table__toggle-icon",
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Table/table.js

@@ -77,5 +77,6 @@ exports.default = {
   "tableSubhead": "pf-c-table__subhead",
   "tableText": "pf-c-table__text",
   "tableToggle": "pf-c-table__toggle",
-  "tableToggleIcon": "pf-c-table__toggle-icon"
+  "tableToggleIcon": "pf-c-table__toggle-icon",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Table/table.mjs

@@ -75,5 +75,6 @@ export default {
   "tableSubhead": "pf-c-table__subhead",
   "tableText": "pf-c-table__text",
   "tableToggle": "pf-c-table__toggle",
-  "tableToggleIcon": "pf-c-table__toggle-icon"
+  "tableToggleIcon": "pf-c-table__toggle-icon",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Tabs/tabs.css

@@ -825,4 +825,10 @@
     --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl);
     --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl);
   }
+}
+
+:where(.pf-theme-dark) .pf-c-tabs {
+  --pf-c-tabs__scroll-button--BackgroundColor: transparent;
+  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
 }

package/css/components/Tabs/tabs.d.ts

@@ -78,6 +78,7 @@ declare const _default: {
   "tabsToggle": "pf-c-tabs__toggle",
   "tabsToggleButton": "pf-c-tabs__toggle-button",
   "tabsToggleIcon": "pf-c-tabs__toggle-icon",
-  "tabsToggleText": "pf-c-tabs__toggle-text"
+  "tabsToggleText": "pf-c-tabs__toggle-text",
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Tabs/tabs.js

@@ -80,5 +80,6 @@ exports.default = {
   "tabsToggle": "pf-c-tabs__toggle",
   "tabsToggleButton": "pf-c-tabs__toggle-button",
   "tabsToggleIcon": "pf-c-tabs__toggle-icon",
-  "tabsToggleText": "pf-c-tabs__toggle-text"
+  "tabsToggleText": "pf-c-tabs__toggle-text",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Tabs/tabs.mjs

@@ -78,5 +78,6 @@ export default {
   "tabsToggle": "pf-c-tabs__toggle",
   "tabsToggleButton": "pf-c-tabs__toggle-button",
   "tabsToggleIcon": "pf-c-tabs__toggle-icon",
-  "tabsToggleText": "pf-c-tabs__toggle-text"
+  "tabsToggleText": "pf-c-tabs__toggle-text",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Tile/tile.css

@@ -134,4 +134,11 @@
   margin-right: var(--pf-c-tile__icon--MarginRight);
   font-size: var(--pf-c-tile__icon--FontSize);
   color: var(--pf-c-tile__icon--Color);
+}
+
+:where(.pf-theme-dark) .pf-c-tile {
+  --pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--300);
+  --pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--300);
+  --pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--300);
 }

package/css/components/Tile/tile.d.ts

@@ -6,6 +6,7 @@ declare const _default: {
     "displayLg": "pf-m-display-lg",
     "stacked": "pf-m-stacked"
   },
+  "themeDark": "pf-theme-dark",
   "tile": "pf-c-tile",
   "tileBody": "pf-c-tile__body",
   "tileHeader": "pf-c-tile__header",

package/css/components/Tile/tile.js

@@ -8,6 +8,7 @@ exports.default = {
     "displayLg": "pf-m-display-lg",
     "stacked": "pf-m-stacked"
   },
+  "themeDark": "pf-theme-dark",
   "tile": "pf-c-tile",
   "tileBody": "pf-c-tile__body",
   "tileHeader": "pf-c-tile__header",

package/css/components/Tile/tile.mjs

@@ -6,6 +6,7 @@ export default {
     "displayLg": "pf-m-display-lg",
     "stacked": "pf-m-stacked"
   },
+  "themeDark": "pf-theme-dark",
   "tile": "pf-c-tile",
   "tileBody": "pf-c-tile__body",
   "tileHeader": "pf-c-tile__header",

package/css/components/ToggleGroup/toggle-group.css

@@ -100,4 +100,12 @@
 .pf-c-toggle-group__icon + .pf-c-toggle-group__text,
 .pf-c-toggle-group__text + .pf-c-toggle-group__icon {
   margin-left: var(--pf-c-toggle-group__icon--text--MarginLeft);
+}
+
+:where(.pf-theme-dark) .pf-c-toggle-group {
+  --pf-c-toggle-group__button--hover--BackgroundColor: var(--pf-global--palette--black-700);
+  --pf-c-toggle-group__button--focus--BackgroundColor: var(--pf-global--palette--black-700);
+  --pf-c-toggle-group__button--disabled--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-toggle-group__button--disabled--Color: var(--pf-global--palette--black-100);
+  --pf-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-global--primary-color--300);
 }