@indico-data/design-system 3.2.1 → 3.3.0

package/lib/index.css

@@ -439,8 +439,10 @@
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {
-  --pf-dropshadow: 5px 0 10px rgba(0, 0, 0, 0.3);
-  --pf-focus-box-shadow-alignment: 0px 0px 0px 4px;
+  --pf-shadow-1: 1px 2px 4px 0px rgba(0, 0, 0, 0.1);
+  --pf-shadow-2: 5px 0 10px rgba(0, 0, 0, 0.3);
+  --pf-shadow-3: 0px 4px 12px rgba(0, 0, 0, 0.15);
+  --pf-focus-alignment: 0px 0px 0px 4px;
 }
 
 .cursor--pointer {
@@ -5361,68 +5363,12 @@ p,
     transform: rotate(360deg);
   }
 }
-:root [data-theme=light] {
-  --pf-white-color: #ffffff;
-  --pf-black-color: #000000;
-  --pf-page-background-color: var(--pf-gray-color-100);
-  --pf-background-color-primary: var(--pf-gray-color-150);
-  --pf-background-color-secondary: var(--pf-gray-color-50);
-  --pf-background-color-tertiary: var(--pf-gray-color-200);
-  --pf-background-color-quaternary: var(--pf-gray-color-250);
-  --pf-background-color-accent: var(--pf-secondary-color-200);
-  --pf-background-color-highlight: var(--pf-brand-color-250);
-  --pf-background-brand-solid: var(--pf-brand-color-500);
-  --pf-background-brand-hover: var(--pf-brand-color-600);
-  --pf-background-color-inverted: var(--pf-tertiary-color-900);
-  --pf-font-color: var(--pf-gray-color-900);
-  --pf-font-color-inverted: var(--pf-gray-color-50);
-  --pf-font-color-soft: var(--pf-gray-color-700);
-  --pf-font-color-muted: var(--pf-gray-color-800);
-  --pf-font-color-placeholder: var(--pf-gray-color-450);
-  --pf-font-color-accent: var(--pf-brand-color-500);
-  --pf-font-color-disabled: var(--pf-gray-color-400);
-  --pf-font-color-error: var(--pf-error-color);
-  --pf-font-color-warning: var(--pf-warning-color);
-  --pf-font-color-info: var(--pf-info-color);
-  --pf-font-color-success: var(--pf-success-color);
-  --pf-font-color-neutral: var(--pf-neutral-color);
-  --pf-font-color-pending: var(--pf-pending-color);
-  --pf-font-color-brand: var(--pf-brand-color);
-  --pf-link-color: var(--pf-brand-color-500);
-  --pf-link-hover-color: var(--pf-brand-color-600);
-  --pf-secondary-link-color: var(--pf-tertiary-color-700);
-  --pf-secondary-link-hover-color: var(--pf-tertiary-color-800);
-  --pf-active-link-color: var(--pf-brand-color-500);
-  --pf-line-chart-color-one: #2b97af;
-  --pf-line-chart-color-two: #3ca7bd;
-  --pf-line-chart-color-three: #4db8cb;
-  --pf-line-chart-color-four: #67c4d5;
-  --pf-line-chart-color-five: #81d1df;
-  --pf-line-chart-color-six: #b5e4ec;
-  --pf-line-chart-color-seven: #c6eaf1;
-  --pf-line-chart-color-eight: #d7f1f6;
-}
-
-:root [data-theme=dark],
 :root {
+  --pf-shadow-surface: var(--pf-shadow-1);
+  --pf-shadow-elevated: var(--pf-shadow-2);
+  --pf-shadow-floating: var(--pf-shadow-3);
   --pf-white-color: #ffffff;
   --pf-black-color: #000000;
-  --pf-page-background-color: var(--pf-primary-color-700);
-  --pf-background-color-primary: var(--pf-primary-color-900);
-  --pf-background-color-secondary: var(--pf-primary-color-800);
-  --pf-background-color-tertiary: var(--pf-primary-color-600);
-  --pf-background-color-quaternary: var(--pf-primary-color-500);
-  --pf-background-color-accent: var(--pf-brand-color-800);
-  --pf-background-color-highlight: var(--pf-brand-color-700);
-  --pf-background-brand-solid: var(--pf-secondary-color-450);
-  --pf-background-brand-hover: var(--pf-secondary-color-600);
-  --pf-background-color-inverted: var(--pf-tertiary-color-50);
-  --pf-font-color: var(--pf-gray-color-50);
-  --pf-font-color-inverted: var(--pf-gray-color-900);
-  --pf-font-color-soft: var(--pf-tertiary-color-300);
-  --pf-font-color-placeholder: var(--pf-tertiary-color-500);
-  --pf-font-color-accent: var(--pf-secondary-color-400);
-  --pf-font-color-disabled: var(--pf-primary-color-500);
   --pf-font-color-error: var(--pf-error-color);
   --pf-font-color-warning: var(--pf-warning-color);
   --pf-font-color-info: var(--pf-info-color);
@@ -5485,6 +5431,59 @@ p,
   --pf-item-teal-3-color: var(--pf-teal-color-550);
   --pf-item-teal-4-color: var(--pf-teal-color-600);
   --pf-item-teal-5-color: var(--pf-teal-color-700);
+}
+
+:root [data-theme=light] {
+  --pf-page-background-color: var(--pf-gray-color-100);
+  --pf-background-color-primary: var(--pf-gray-color-150);
+  --pf-background-color-secondary: var(--pf-gray-color-50);
+  --pf-background-color-tertiary: var(--pf-gray-color-200);
+  --pf-background-color-quaternary: var(--pf-gray-color-250);
+  --pf-background-color-accent: var(--pf-secondary-color-200);
+  --pf-background-color-highlight: var(--pf-brand-color-250);
+  --pf-background-brand-solid: var(--pf-brand-color-500);
+  --pf-background-brand-hover: var(--pf-brand-color-600);
+  --pf-background-color-inverted: var(--pf-tertiary-color-900);
+  --pf-font-color: var(--pf-gray-color-900);
+  --pf-font-color-inverted: var(--pf-gray-color-50);
+  --pf-font-color-soft: var(--pf-gray-color-700);
+  --pf-font-color-muted: var(--pf-gray-color-800);
+  --pf-font-color-placeholder: var(--pf-gray-color-450);
+  --pf-font-color-accent: var(--pf-brand-color-500);
+  --pf-font-color-disabled: var(--pf-gray-color-400);
+  --pf-link-color: var(--pf-brand-color-500);
+  --pf-link-hover-color: var(--pf-brand-color-600);
+  --pf-secondary-link-color: var(--pf-tertiary-color-700);
+  --pf-secondary-link-hover-color: var(--pf-tertiary-color-800);
+  --pf-active-link-color: var(--pf-brand-color-500);
+  --pf-line-chart-color-one: #2b97af;
+  --pf-line-chart-color-two: #3ca7bd;
+  --pf-line-chart-color-three: #4db8cb;
+  --pf-line-chart-color-four: #67c4d5;
+  --pf-line-chart-color-five: #81d1df;
+  --pf-line-chart-color-six: #b5e4ec;
+  --pf-line-chart-color-seven: #c6eaf1;
+  --pf-line-chart-color-eight: #d7f1f6;
+}
+
+:root [data-theme=dark],
+:root {
+  --pf-page-background-color: var(--pf-primary-color-700);
+  --pf-background-color-primary: var(--pf-primary-color-900);
+  --pf-background-color-secondary: var(--pf-primary-color-800);
+  --pf-background-color-tertiary: var(--pf-primary-color-600);
+  --pf-background-color-quaternary: var(--pf-primary-color-500);
+  --pf-background-color-accent: var(--pf-brand-color-800);
+  --pf-background-color-highlight: var(--pf-brand-color-700);
+  --pf-background-brand-solid: var(--pf-secondary-color-450);
+  --pf-background-brand-hover: var(--pf-secondary-color-600);
+  --pf-background-color-inverted: var(--pf-tertiary-color-50);
+  --pf-font-color: var(--pf-gray-color-50);
+  --pf-font-color-inverted: var(--pf-gray-color-900);
+  --pf-font-color-soft: var(--pf-tertiary-color-300);
+  --pf-font-color-placeholder: var(--pf-tertiary-color-500);
+  --pf-font-color-accent: var(--pf-secondary-color-400);
+  --pf-font-color-disabled: var(--pf-primary-color-500);
   --pf-link-color: var(--pf-secondary-color-400);
   --pf-link-hover-color: var(--pf-secondary-color-400);
   --pf-secondary-link-color: var(--pf-tertiary-color-450);
@@ -6808,82 +6807,43 @@ body div[class*=select__single-value] {
   }
 }
 
-:root {
-  --pf-card-rounded: var(--pf-rounded);
-  --pf-card-box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.1);
-}
-
-:root [data-theme=light] {
-  --pf-card-background-color: var(--pf-page-background-color);
-  --pf-card-border-color: var(--pf-border-color-secondary);
-  --pf-card-heading-color: var(--pf-font-color-soft);
-  --pf-card-font-color: var(--pf-font-color);
-}
-
-:root [data-theme=dark],
-:root {
-  --pf-card-background-color: var(--pf-page-background-color);
-  --pf-card-border-color: var(--pf-border-color-secondary);
-  --pf-card-heading-color: var(--pf-font-color-soft);
-  --pf-card-font-color: var(--pf-font-color);
-}
-
 .card {
   border-radius: var(--pf-rounded-lg);
   padding: var(--pf-padding-3);
-  background: var(--pf-card-background-color);
+  background: var(--pf-page-background-color);
   box-sizing: border-box;
-  color: var(--pf-card-font-color);
-  border: var(--pf-border-thin) solid var(--pf-card-border-color);
-  box-shadow: var(--pf-card-box-shadow);
+  color: var(--pf-font-color);
+  border: var(--pf-border-thin) solid var(--pf-border-color-secondary);
+  box-shadow: var(--pf-shadow-surface);
 }
 
 .card__header {
   margin-bottom: var(--pf-margin-2);
-  color: var(--pf-card-heading-color);
+  color: var(--pf-font-color-soft);
 }
 .card__header p {
-  color: var(--pf-card-font-color);
+  color: var(--pf-font-color);
   font-size: var(--pf-font-size-subtitle2);
 }
 
 .card__content hr {
-  border: var(--pf-border-thin) solid var(--pf-card-border-color);
+  border: var(--pf-border-thin) solid var(--pf-border-color-secondary);
   border-bottom: none;
   margin-bottom: var(--pf-margin-3);
   margin-top: var(--pf-margin-3);
 }
 
 .card--box-shadow {
-  box-shadow: var(--pf-dropshadow);
-}
-
-:root {
-  --pf-menu-rounded: var(--pf-rounded);
-}
-
-:root [data-theme=light] {
-  --pf-menu-item-hover-color: var(--pf-background-color-highlight);
-  --pf-menu-item-background-color: var(--pf-background-color-secondary);
-  --pf-menu-item-color: var(--pf-font-color);
-  --pf-menu-item-focus-color: var(--pf-background-color-accent);
-}
-
-:root [data-theme=dark],
-:root {
-  --pf-menu-item-hover-color: var(--pf-background-color-highlight);
-  --pf-menu-item-background-color: var(--pf-background-color-secondary);
-  --pf-menu-item-color: var(--pf-font-color);
-  --pf-menu-item-focus-color: var(--pf-background-color-accent);
+  box-shadow: var(--pf-shadow-elevated);
 }
 
 .menu {
-  border-radius: var(--pf-menu-rounded);
+  border-radius: var(--pf-rounded);
 }
 .menu .menu-item {
   width: 100%;
-  background: var(--pf-menu-item-background-color);
-  color: var(--pf-menu-item-color);
+  background: var(--pf-background-color-secondary);
+  color: var(--pf-font-color);
   display: block;
   width: 100%;
   text-align: left;
@@ -6892,34 +6852,18 @@ body div[class*=select__single-value] {
   box-shadow: none;
 }
 .menu .menu-item:first-child {
-  border-top-left-radius: var(--pf-menu-rounded);
-  border-top-right-radius: var(--pf-menu-rounded);
+  border-top-left-radius: var(--pf-rounded);
+  border-top-right-radius: var(--pf-rounded);
 }
 .menu .menu-item:last-child {
-  border-bottom-left-radius: var(--pf-menu-rounded);
-  border-bottom-right-radius: var(--pf-menu-rounded);
+  border-bottom-left-radius: var(--pf-rounded);
+  border-bottom-right-radius: var(--pf-rounded);
 }
 .menu .menu-item:hover {
-  background: var(--pf-menu-item-hover-color);
+  background: var(--pf-background-color-highlight);
 }
 .menu .menu-item:focus {
-  background-color: var(--pf-menu-item-focus-color);
-}
-
-:root {
-  --pf-floatui-border-radius: var(--pf-rounded);
-  --pf-floatui-box-shadow: var(--pf-dropshadow);
-  --pf-floatui-border: none;
-  --pf-floatui-border-color: var(--pf-border-color-secondary);
-}
-
-:root [data-theme=light] {
-  --pf-floatui-background-color: var(--pf-background-color-secondary);
-}
-
-:root [data-theme=dark],
-:root {
-  --pf-floatui-background-color: var(--pf-background-color-secondary);
+  background-color: var(--pf-background-color-accent);
 }
 
 .floatui-container {
@@ -6928,30 +6872,17 @@ body div[class*=select__single-value] {
 
 .floatui-content {
   border: solid var(--pf-border-thin) var(--pf-border-color-secondary);
-  border-radius: var(--pf-floatui-border-radius);
-  box-shadow: var(--pf-floatui-box-shadow);
-  background: var(--pf-floatui-background-color);
+  border-radius: var(--pf-rounded);
+  box-shadow: var(--pf-shadow-floating);
+  background: var(--pf-background-color-secondary);
 }
 
-:root [data-theme=light] {
-  --pf-date-picker-background-color: var(--pf-background-color-secondary);
-  --pf-date-picker-selected-date-background-color: var(--pf-background-brand-solid);
-  --pf-date-picker-selected-date-font-color: var(--pf-font-color-inverted);
-  --pf-date-picker-today-background-color: var(--pf-background-color-highlight);
-}
 :root [data-theme=light] .rdp-root {
   --rdp-accent-color: var(--pf-link-color);
   --rdp-font-family: var(--pf-font-family-base);
   --rdp-range_middle-background-color: var(--pf-page-background-color);
 }
 
-:root [data-theme=dark],
-:root {
-  --pf-date-picker-background-color: var(--pf-background-color-secondary);
-  --pf-date-picker-selected-date-background-color: var(--pf-background-brand-solid);
-  --pf-date-picker-selected-date-font-color: var(--pf-font-color);
-  --pf-date-picker-today-background-color: var(--pf-background-color-highlight);
-}
 :root [data-theme=dark] .rdp-root,
 :root .rdp-root {
   --rdp-accent-color: var(--pf-link-color);
@@ -6965,7 +6896,7 @@ body div[class*=select__single-value] {
 
 .rdp-months {
   color: var(--pf-font-color);
-  background-color: var(--pf-date-picker-background-color);
+  background-color: var(--pf-background-color-secondary);
   padding: var(--pf-padding-3);
   border-radius: var(--pf-rounded);
   border: solid var(--pf-border-thin) var(--pf-border-color-primary);
@@ -6986,13 +6917,12 @@ body div[class*=select__single-value] {
   border: none;
 }
 .rdp-day.rdp-today .rdp-day_button {
-  background-color: var(--pf-date-picker-today-background-color);
-  color: var(--pf-date-picker-selected-date-font-color);
+  background-color: var(--pf-background-color-highlight);
+  color: var(--pf-font-color-inverted);
   border: none;
 }
 .rdp-day.rdp-selected .rdp-day_button {
-  background-color: var(--pf-date-picker-selected-date-background-color);
-  color: var(--pf-date-picker-selected-date-font-color);
+  background-color: var(--pf-background-brand-solid);
   border: none;
 }
 .rdp-day.rdp-range_middle .rdp-day_button {
@@ -7000,6 +6930,15 @@ body div[class*=select__single-value] {
   background-color: transparent;
 }
 
+:root [data-theme=light] .rdp-day.rdp-selected .rdp-day_button {
+  color: var(--pf-font-color-inverted);
+}
+
+:root [data-theme=dark] .rdp-day.rdp-selected .rdp-day_button,
+:root .rdp-day.rdp-selected .rdp-day_button {
+  color: var(--pf-font-color);
+}
+
 .time-picker-wrapper {
   margin-bottom: var(--pf-margin-3);
   width: 348px;
@@ -7011,34 +6950,19 @@ body div[class*=select__single-value] {
   padding: var(--pf-padding-2);
   border-radius: var(--pf-rounded);
   width: 200px;
-  box-shadow: var(--pf-dropshadow);
+  box-shadow: var(--pf-shadow-elevated);
   font-size: var(--pf-font-size-overline);
 }
 
-:root [data-theme=light] {
-  --pf-badge-background-color: var(--pf-page-background-color);
-  --pf-badge-font-color: var(--pf-font-color);
-  --pf-badge-rounded: var(--pf-rounded);
-  --pf-badge-border-color: var(--pf-border-color-secondary);
-}
-
-:root [data-theme=dark],
-:root {
-  --pf-badge-background-color: var(--pf-page-background-color);
-  --pf-badge-font-color: var(--pf-font-color);
-  --pf-badge-rounded: var(--pf-rounded);
-  --pf-badge-border-color: var(--pf-border-color-secondary);
-}
-
 .badge {
-  border: var(--pf-border-sm) solid var(--pf-badge-border-color);
+  border: var(--pf-border-sm) solid var(--pf-border-color-secondary);
   border-radius: var(--pf-rounded-lg);
   padding: var(--pf-padding-3);
-  background: var(--pf-badge-background-color);
+  background: var(--pf-page-background-color);
   box-sizing: border-box;
   width: -moz-fit-content;
   width: fit-content;
-  color: var(--pf-badge-font-color);
+  color: var(--pf-font-color);
 }
 .badge--xs {
   padding: var(--pf-padding-1);
@@ -7208,43 +7132,6 @@ body div[class*=select__single-value] {
   border-color: var(--pf-error-color);
 }
 
-:root [data-theme=light] {
-  --pf-tanstack-table-background-color: var(--pf-page-background-color);
-  --pf-tanstack-table-header-background-color: var(--pf-background-color-primary);
-  --pf-tanstack-table-font-color: var(--pf-font-color);
-  --pf-tanstack-table-border-color: var(--pf-border-color-secondary);
-  --pf-tanstack-table-stripe-color: var(--pf-background-color-secondary);
-  --pf-tanstack-table-hover-color: var(--pf-background-color-tertiary);
-  --pf-tanstack-table-disabled-color: var(--pf-background-color-quaternary);
-  --pf-tanstack-table-checked-color: var(--pf-background-color-accent);
-  --pf-tanstack-table-clicked-color: var(--pf-background-color-highlight);
-  --pf-tanstack-table-highlighted-color: var(--pf-tanstack-table-font-color);
-  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
-    0 4px 8px rgba(0, 0, 0, 0.1);
-  --pf-tanstack-table-font-size: var(--pf-font-size-body2);
-  --pf-tanstack-table-pagination-background-color: var(--pf-tanstack-table-background-color);
-  --pf-tanstack-table-pagination-font-color: var(--pf-tanstack-table-font-color);
-}
-
-:root [data-theme=dark],
-:root {
-  --pf-tanstack-table-background-color: var(--pf-page-background-color);
-  --pf-tanstack-table-header-background-color: var(--pf-background-color-primary);
-  --pf-tanstack-table-font-color: var(--pf-font-color);
-  --pf-tanstack-table-border-color: var(--pf-border-color-secondary);
-  --pf-tanstack-table-stripe-color: var(--pf-background-color-secondary);
-  --pf-tanstack-table-hover-color: var(--pf-background-color-tertiary);
-  --pf-tanstack-table-disabled-color: var(--pf-background-color-quaternary);
-  --pf-tanstack-table-checked-color: var(--pf-background-color-accent);
-  --pf-tanstack-table-clicked-color: var(--pf-background-color-highlight);
-  --pf-tanstack-table-highlighted-color: var(--pf-tanstack-table-font-color);
-  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
-    0 4px 8px rgba(0, 0, 0, 0.1);
-  --pf-tanstack-table-font-size: var(--pf-font-size-body2);
-  --pf-tanstack-table-pagination-background-color: var(--pf-tanstack-table-background-color);
-  --pf-tanstack-table-pagination-font-color: var(--pf-tanstack-table-font-color);
-}
-
 .tanstack-table__action-bar {
   position: fixed;
   bottom: 170px;
@@ -7285,10 +7172,10 @@ body div[class*=select__single-value] {
 .tanstack-table__no-results__text {
   font-size: var(--pf-line-height-md);
   font-weight: var(--pf-font-weight-medium);
-  color: var(--pf-tanstack-table-font-color);
+  color: var(--pf-font-color);
 }
 .tanstack-table__no-results__text span {
-  color: var(--pf-tanstack-table-font-color);
+  color: var(--pf-font-color);
   cursor: pointer;
 }
 .tanstack-table__no-results__text span:hover {
@@ -7310,13 +7197,13 @@ body div[class*=select__single-value] {
   grid-template-columns: 1fr;
   overflow-x: auto;
   overflow-y: auto;
-  background-color: var(--pf-tanstack-table-background-color);
+  background-color: var(--pf-page-background-color);
   border-radius: var(--pf-rounded-lg);
-  border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
-  border-right: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
-  border-bottom: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+  border-left: var(--pf-border-sm) solid var(--pf-border-color-secondary);
+  border-right: var(--pf-border-sm) solid var(--pf-border-color-secondary);
+  border-bottom: var(--pf-border-sm) solid var(--pf-border-color-secondary);
   scrollbar-width: thin;
-  scrollbar-color: var(--pf-tanstack-table-border-color) var(--pf-tanstack-table-background-color);
+  scrollbar-color: var(--pf-border-color-secondary) var(--pf-page-background-color);
 }
 .tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar {
   width: var(--pf-size-2);
@@ -7324,12 +7211,12 @@ body div[class*=select__single-value] {
   cursor: pointer;
 }
 .tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar-track {
-  background: var(--pf-tanstack-table-background-color);
+  background: var(--pf-page-background-color);
   border-radius: var(--pf-rounded);
   cursor: pointer;
 }
 .tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar-thumb {
-  background: var(--pf-tanstack-table-border-color);
+  background: var(--pf-border-color-secondary);
   border-radius: var(--pf-rounded);
   cursor: pointer;
 }
@@ -7349,14 +7236,14 @@ body div[class*=select__single-value] {
   padding: var(--pf-padding-2) var(--pf-padding-3);
 }
 .tanstack-table.is-striped .tanstack-table__tbody tr:nth-child(odd) td {
-  background-color: var(--pf-tanstack-table-stripe-color);
+  background-color: var(--pf-background-color-secondary);
 }
 .tanstack-table__thead {
   position: sticky;
   top: 0;
   z-index: 3;
   box-sizing: border-box;
-  background-color: var(--pf-tanstack-table-background-color);
+  background-color: var(--pf-background-color-primary);
 }
 .tanstack-table__thead tr:first-child th:first-child {
   border-left: none;
@@ -7365,14 +7252,14 @@ body div[class*=select__single-value] {
   border-right: none;
 }
 .tanstack-table__thead__th {
-  color: var(--pf-tanstack-table-font-color);
-  background: var(--pf-tanstack-table-header-background-color);
-  font-size: var(--pf-tanstack-table-font-size);
+  color: var(--pf-font-color);
+  background: var(--pf-background-color-primary);
+  font-size: var(--pf-font-size-body2);
   font-weight: var(--pf-font-weight-medium);
   box-sizing: border-box;
-  border-top: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
-  border-bottom: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
-  border-right: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+  border-top: var(--pf-border-sm) solid var(--pf-border-color-secondary);
+  border-bottom: var(--pf-border-sm) solid var(--pf-border-color-secondary);
+  border-right: var(--pf-border-sm) solid var(--pf-border-color-secondary);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -7400,22 +7287,22 @@ body div[class*=select__single-value] {
   border-right: none;
 }
 .tanstack-table__tbody__tr.is-selected td {
-  background: var(--pf-tanstack-table-checked-color) !important;
+  background: var(--pf-background-color-accent) !important;
 }
 .tanstack-table__tbody__tr.show-hover:hover td {
-  background-color: var(--pf-tanstack-table-hover-color) !important;
+  background-color: var(--pf-background-color-tertiary) !important;
   cursor: pointer;
 }
 .tanstack-table__tbody__tr.is-clicked td {
-  background-color: var(--pf-tanstack-table-clicked-color) !important;
+  background-color: var(--pf-background-color-highlight) !important;
 }
 .tanstack-table__tbody__td {
   font-size: var(--pf-font-size-base);
   font-weight: var(--pf-font-weight-medium);
-  color: var(--pf-tanstack-table-font-color);
-  background: var(--pf-tanstack-table-background-color);
-  border-right: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
-  border-bottom: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+  color: var(--pf-font-color);
+  background: var(--pf-page-background-color);
+  border-right: var(--pf-border-sm) solid var(--pf-border-color-secondary);
+  border-bottom: var(--pf-border-sm) solid var(--pf-border-color-secondary);
   box-sizing: border-box;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -7446,8 +7333,8 @@ body div[class*=select__single-value] {
 .table__pagination {
   padding-bottom: var(--pf-padding-4);
   padding-top: var(--pf-padding-4);
-  color: var(--pf-tanstack-table-pagination-font-color);
-  background-color: var(--pf-tanstack-table-pagination-background-color);
+  color: var(--pf-font-color);
+  background-color: var(--pf-page-background-color);
   padding-left: var(--pf-padding-4);
 }