@indico-data/design-system 2.59.2 → 2.60.1

package/lib/components/tanstackTable/TankstackTable.types.d.ts

@@ -18,6 +18,7 @@ export type WithoutPaginationProps = {
 export type PaginationProps = WithPaginationProps | WithoutPaginationProps;
 export type Props<T extends object> = {
     data: T[];
+    isStriped?: boolean;
     columns: ColumnDef<T & {
         id: string;
     }>[];

package/lib/components/tanstackTable/TanstackTable.d.ts

@@ -1,4 +1,4 @@
 import { Props } from './TankstackTable.types';
-export declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onRowClick, activeRows, actionBarClassName, ...rest }: Props<T & {
+export declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onRowClick, activeRows, isStriped, actionBarClassName, ...rest }: Props<T & {
     id: string;
 }>): import("react/jsx-runtime").JSX.Element;

package/lib/index.css

@@ -370,7 +370,7 @@
 }
 
 :root [data-theme=light] {
-  --pf-border-color: var(--pf-gray-color-300);
+  --pf-border-color: var(--pf-gray-color-800);
   --pf-border-color-light: var(--pf-gray-color-100);
   --pf-horizontal-line-color: var(--pf-gray-color-200);
 }
@@ -474,9 +474,9 @@
 :root [data-theme=light] {
   --pf-white-color: #ffffff;
   --pf-black-color: #000000;
-  --pf-background-color-light: var(--pf-gray-color-100);
+  --pf-background-color-light: var(--pf-gray-color-900);
   --pf-background-color: var(--pf-white-color);
-  --pf-background-color-dark: var(--pf-gray-color-300);
+  --pf-background-color-dark: var(--pf-gray-color-100);
   --pf-background-secondary-color-light: var(--pf-secondary-color-300);
   --pf-background-color-secondary: var(--pf-secondary-color-500);
   --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
@@ -563,33 +563,33 @@ a:hover,
 }
 
 :root [data-theme=light] {
-  --pf-button-solid-background-color: var(--pf-primary-color);
+  --pf-button-solid-background-color: var(--pf-secondary-color-400);
   --pf-button-solid-color: var(--pf-white-color);
-  --pf-button-solid-hover-background-color: var(--pf-primary-color-400);
-  --pf-button-solid-focus-background-color: var(--pf-primary-color);
+  --pf-button-solid-hover-background-color: var(--pf-secondary-color-500);
+  --pf-button-solid-focus-background-color: var(--pf-secondary-color-400);
   --pf-button-solid-disabled-background-color: var(--pf-primary-color-300);
-  --pf-button-solid-disabled-color: var(--pf-gray-color-100);
-  --pf-button-outline-color: var(--pf-primary-color);
-  --pf-button-outline-border-color: var(--pf-primary-color);
-  --pf-button-outline-hover-color: var(--pf-primary-color-400);
+  --pf-button-solid-disabled-color: var(--pf-gray-color-800);
+  --pf-button-outline-color: var(--pf-secondary-color-400);
+  --pf-button-outline-border-color: var(--pf-secondary-color-400);
+  --pf-button-outline-hover-color: var(--pf-secondary-color-500);
   --pf-button-outline-disabled-color: var(--pf-primary-color-300);
-  --pf-button-link-color: var(--pf-primary-color);
-  --pf-button-link-hover-color: var(--pf-primary-color-400);
+  --pf-button-link-color: var(--pf-secondary-color-400);
+  --pf-button-link-hover-color: var(--pf-secondary-color-500);
   --pf-button-link-disabled-color: var(--pf-primary-color-300);
-  --pf-button-action-color: var(--pf-primary-color);
-  --pf-button-action-border-color: var(--pf-primary-color);
-  --pf-button-action-hover-background-color: var(--pf-primary-color-200);
-  --pf-button-action-hover-border-color: var(--pf-primary-color-400);
-  --pf-button-action-hover-color: var(--pf-primary-color);
-  --pf-button-action-disabled-border-color: var(--pf-primary-color-300);
+  --pf-button-action-color: var(--pf-secondary-color-400);
+  --pf-button-action-border-color: var(--pf-secondary-color-400);
+  --pf-button-action-hover-background-color: var(--pf-secondary-color-500);
+  --pf-button-action-hover-border-color: var(--pf-secondary-color-500);
+  --pf-button-action-hover-color: var(--pf-white-color);
+  --pf-button-action-disabled-border-color: var(--pf-secondary-color-400);
   --pf-button-action-disabled-color: var(--pf-primary-color-300);
-  --pf-button-destructive-background-color: var(--pf-error-color);
+  --pf-button-destructive-background-color: var(--pf-red-color-400);
   --pf-button-destructive-color: var(--pf-white-color);
-  --pf-button-destructive-hover-background-color: var(--pf-red-color-400);
+  --pf-button-destructive-hover-background-color: var(--pf-red-color-500);
   --pf-button-destructive-hover-color: var(--pf-white-color);
   --pf-button-destructive-focus-background-color: var(--pf-red-color);
   --pf-button-destructive-focus-color: var(--pf-white-color);
-  --pf-button-destructive-disabled-background-color: var(--pf-red-color-300);
+  --pf-button-destructive-disabled-background-color: var(--pf-red-color-100);
   --pf-button-destructive-disabled-color: var(--pf-white-color);
   --pf-button-soft-color: var(--pf-primary-color-300);
   --pf-button-soft-border-color: var(--pf-primary-color-300);
@@ -1045,13 +1045,6 @@ a:hover,
   background-color: var(--pf-table-highlighted-color) !important;
 }
 
-.table__pagination {
-  padding-bottom: var(--pf-padding-4);
-  padding-top: var(--pf-padding-4);
-  background-color: var(--pf-table-pagination-background-color);
-  padding-left: var(--pf-padding-4);
-}
-
 .input {
   padding: 10px;
 }
@@ -1389,11 +1382,11 @@ form {
   --pf-form-input-color: var(--pf-gray-color);
   --pf-form-input-placeholder-color: var(--pf-gray-color-300);
   --pf-form-input-help-color: var(--pf-gray-color-400);
-  --pf-form-input-hover-background-color: var(--pf-gray-color-100);
-  --pf-form-input-focus-background-color: var(--pf-gray-color-100);
+  --pf-form-input-hover-background-color: var(--pf-gray-color-900);
+  --pf-form-input-focus-background-color: var(--pf-gray-color-950);
   --pf-form-input-focus-border-color: var(--pf-secondary-color-800);
   --pf-form-input-focus-outline-color: var(--pf-primary-color);
-  --pf-form-input-disabled-background-color: var(--pf-gray-color-100);
+  --pf-form-input-disabled-background-color: var(--pf-gray-color-700);
   --pf-form-input-disabled-border-color: var(--pf-gray-color-100);
   --pf-form-input-disabled-color: var(--pf-gray-color-400);
 }
@@ -1555,9 +1548,9 @@ form {
 
 :root [data-theme=light] {
   --pf-select-indicator-color: var(--pf-gray-color);
-  --pf-select-option-selected-color: var(--pf-primary-color-100);
+  --pf-select-option-selected-color: var(--pf-gray-color-950);
   --pf-select-option-color: var(--pf-gray-color);
-  --pf-select-option-hover-color: var(--pf-primary-color-100);
+  --pf-select-option-hover-color: var(--pf-gray-color-900);
 }
 
 :root [data-theme=dark],
@@ -1727,21 +1720,21 @@ form {
   margin-left: var(--pf-margin-2);
 }
 
-:root,
-:root [data-theme=light],
-:root [data-theme=dark] {
-  --pf-skeleton-color-one: var(--pf-gray-color-200);
-  --pf-skeleton-color-two: var(--pf-gray-color-100);
+:root [data-theme=light] {
+  --pf-skeleton-color-one: var(--pf-gray-color-800);
+  --pf-skeleton-color-two: var(--pf-gray-color-950);
+  --pf-skeleton-background-color: var(--pf-gray-color-700);
 }
 
 :root [data-theme=dark] {
   --pf-skeleton-color-one: var(--pf-primary-color-500);
   --pf-skeleton-color-two: var(--pf-primary-color-400);
+  --pf-skeleton-background-color: var(--pf-gray-color-900);
 }
 
 .skeleton {
   border-radius: var(--pf-rounded);
-  background-color: var(--pf-gray-color-100);
+  background-color: var(--pf-skeleton-background-color);
   opacity: 0.7;
   animation: skeleton-loading 1s linear infinite alternate;
   display: flex;
@@ -1810,10 +1803,10 @@ form {
 }
 
 :root [data-theme=light] {
-  --pf-menu-item-hover-color: var(--pf-primary-color-100);
+  --pf-menu-item-hover-color: var(--pf-gray-color-950);
   --pf-menu-item-background-color: var(--pf-white-color);
   --pf-menu-item-color: var(--pf-gray-color);
-  --pf-menu-item-focus-color: var(--pf-primary-color-300);
+  --pf-menu-item-focus-color: var(--pf-gray-color-900);
 }
 
 :root [data-theme=dark],
@@ -1957,7 +1950,7 @@ form {
 }
 
 :root [data-theme=light] {
-  --pf-badge-background-color: var(--pf-white-color);
+  --pf-badge-background-color: var(--pf-primary-color-950);
   --pf-badge-border-color: var(--pf-border-color);
 }
 
@@ -2121,22 +2114,25 @@ form {
 
 :root [data-theme=light] {
   --pf-tanstack-table-background-color: var(--pf-white-color);
-  --pf-tanstack-table-font-color: var(--pf-gray-color);
-  --pf-tanstack-table-border-color: var(--pf-gray-color-200);
-  --pf-tanstack-table-stripe-color: var(--pf-gray-color-100);
-  --pf-tanstack-table-hover-color: var(--pf-gray-color-200);
+  --pf-tanstack-table-header-background-color: var(--pf-gray-color-900);
+  --pf-tanstack-table-font-color: var(--pf-gray-color-300);
+  --pf-tanstack-table-border-color: var(--pf-gray-color-700);
+  --pf-tanstack-table-stripe-color: var(--pf-gray-color-950);
+  --pf-tanstack-table-hover-color: var(--pf-secondary-color-900);
   --pf-tanstack-table-disabled-color: var(--pf-gray-color-300);
-  --pf-tanstack-table-checked-color: var(--pf-secondary-color-950);
-  --pf-tanstack-table-clicked-color: var(--pf-secondary-color-100);
-  --pf-tanstack-table-highlighted-color: var(--pf-gray-color-200);
-  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
-    0 8px 16px rgba(0, 0, 0, 0.2);
+  --pf-tanstack-table-checked-color: var(--pf-gray-color-900);
+  --pf-tanstack-table-clicked-color: var(--pf-gray-color-800);
+  --pf-tanstack-table-highlighted-color: var(--pf-gray-color-700);
+  --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-gray-color-900);
 }
 
 :root [data-theme=dark],
 :root {
   --pf-tanstack-table-background-color: var(--pf-primary-color-800);
+  --pf-tanstack-table-header-background-color: var(--pf-primary-color-800);
   --pf-tanstack-table-font-color: var(--pf-white-color);
   --pf-tanstack-table-border-color: var(--pf-tertiary-color-800);
   --pf-tanstack-table-stripe-color: var(--pf-primary-color-700);
@@ -2175,7 +2171,7 @@ form {
   left: 50%;
   transform: translateX(-50%);
   z-index: 90;
-  box-shadow: 3px 1px 15px 0 rgba(0, 0, 0, 0.85);
+  box-shadow: 3px 1px 15px 0 rgba(0, 0, 0, 0.45);
 }
 .tanstack-table__action-bar__container {
   display: flex;
@@ -2269,6 +2265,9 @@ form {
   border-radius: var(--pf-rounded-lg);
   width: 100%;
 }
+.tanstack-table.is-striped .tanstack-table__tbody tr:nth-child(odd) td {
+  background-color: var(--pf-tanstack-table-stripe-color);
+}
 .tanstack-table .is-loading {
   border: var(--pf-border-thin) solid var(--pf-border-color);
   height: 350px;
@@ -2289,7 +2288,7 @@ form {
 }
 .tanstack-table__thead__th {
   color: var(--pf-tanstack-table-font-color);
-  background: var(--pf-tanstack-table-background-color);
+  background: var(--pf-tanstack-table-header-background-color);
   font-size: var(--pf-tanstack-table-font-size);
   font-weight: var(--pf-font-weight-medium);
   box-sizing: border-box;
@@ -2323,14 +2322,14 @@ form {
   border-right: none;
 }
 .tanstack-table__tbody__tr.is-selected td {
-  background: var(--pf-tanstack-table-checked-color);
+  background: var(--pf-tanstack-table-checked-color) !important;
 }
 .tanstack-table__tbody__tr.show-hover:hover td {
-  background-color: var(--pf-tanstack-table-hover-color);
+  background-color: var(--pf-tanstack-table-hover-color) !important;
   cursor: pointer;
 }
 .tanstack-table__tbody__tr.is-clicked td {
-  background-color: var(--pf-tanstack-table-clicked-color);
+  background-color: var(--pf-tanstack-table-clicked-color) !important;
 }
 .tanstack-table__tbody__td {
   font-size: var(--pf-font-size-base);
@@ -2381,6 +2380,13 @@ form {
   display: block;
 }
 
+.table__pagination {
+  padding-bottom: var(--pf-padding-4);
+  padding-top: var(--pf-padding-4);
+  background-color: var(--pf-tanstack-table-pagination-background-color);
+  padding-left: var(--pf-padding-4);
+}
+
 :root [data-theme=light] {
   --pf-pill-primary-background-color: var(--pf-primary-color);
   --pf-pill-primary-font-color: var(--pf-white-color);
@@ -2658,13 +2664,14 @@ form {
   width: 100%;
 }
 
-:root,
-:root [data-theme=light],
-:root [data-theme=dark] {
-  --toastify-color-dark: var(--pf-background-color-light);
-  --toastify-color-progress-dark: var(--pf-primary-color-400);
+:root [data-theme=light] {
+  --toastify-color-dark: var(--pf-white-color);
+  --toastify-color-progress-dark: var(--pf-primary-color-200);
   --toastify-icon-color-success: var(--pf-success-color);
   --toastify-color-progress-bgo: 0.2;
+  --toastify-text-color-dark: var(
+    --pf-gray-color-600
+  );
 }
 
 :root [data-theme=dark] {
@@ -2672,6 +2679,25 @@ form {
   --toastify-color-progress-dark: var(--pf-primary-color-400);
   --toastify-icon-color-success: var(--pf-success-color);
   --toastify-color-progress-bgo: 0.2;
+  --toastify-text-color-dark: var(--pf-font-color);
+}
+
+:root [data-theme=light] {
+  --pf-stepper-background-color: var(--pf-gray-color-900);
+  --pf-stepper-legend-background-color: var(--pf-gray-color-950);
+  --pf-stepper-legend-circle-background-color: var(--pf-gray-color-800);
+  --pf-stepper-legend-circle-text-color: var(--pf-white-color);
+  --pf-stepper-legend-line-background-color: var(--pf-gray-color-800);
+  --pf-stepper-legend-step-text-color: var(--pf-white-color);
+  --pf-stepper-legend-step-disabled-text-color: var(--pf-gray-color-800);
+  --pf-stepper-legend-circle-completed-background-color: var(--pf-secondary-color);
+  --pf-stepper-legend-circle-completed-text-color: var(--pf-white-color);
+  --pf-stepper-legend-line-completed-background-color: var(--pf-secondary-color);
+  --pf-stepper-legend-step-completed-text-color: var(--pf-secondary-color);
+  --pf-stepper-legend-circle-current-background-color: var(--pf-secondary-color);
+  --pf-stepper-legend-circle-current-border-color: var(--pf-white-color);
+  --pf-stepper-legend-circle-current-text-color: var(--pf-white-color);
+  --pf-stepper-legend-step-current-text-color: var(--pf-secondary-color);
 }
 
 :root [data-theme=dark] {
@@ -2684,10 +2710,11 @@ form {
   --pf-stepper-legend-step-disabled-text-color: var(--pf-tertiary-color-450);
   --pf-stepper-legend-circle-completed-background-color: var(--pf-secondary-color);
   --pf-stepper-legend-circle-completed-text-color: var(--pf-white-color);
+  --pf-stepper-legend-step-completed-text-color: var(--pf-secondary-color);
   --pf-stepper-legend-line-completed-background-color: var(--pf-secondary-color);
   --pf-stepper-legend-circle-current-background-color: var(--pf-secondary-color);
   --pf-stepper-legend-circle-current-border-color: var(--pf-white-color);
-  --pf-stepper-legend-step-current-text-color: var(--pf-white-color);
+  --pf-stepper-legend-circle-current-text-color: var(--pf-white-color);
   --pf-stepper-legend-step-current-text-color: var(--pf-secondary-color);
 }
 
@@ -2744,6 +2771,7 @@ form {
 }
 .stepper .stepper-legend-circle.current {
   background-color: var(--pf-stepper-legend-circle-current-background-color);
+  color: var(--pf-stepper-legend-circle-current-text-color);
 }
 .stepper .stepper-legend-line {
   width: 1px;
@@ -2764,6 +2792,9 @@ form {
   margin-left: var(--pf-margin-2);
   color: var(--pf-stepper-legend-step-text-color);
 }
+.stepper .stepper-legend-step--completed-step .btn {
+  color: var(--pf-stepper-legend-step-completed-text-color);
+}
 .stepper .stepper-legend-step--current-step .btn {
   color: var(--pf-stepper-legend-step-current-text-color);
   text-decoration: underline;

package/lib/index.d.ts

@@ -551,6 +551,7 @@ type WithoutPaginationProps = {
 type PaginationProps$1 = WithPaginationProps | WithoutPaginationProps;
 type Props<T extends object> = {
     data: T[];
+    isStriped?: boolean;
     columns: ColumnDef<T & {
         id: string;
     }>[];
@@ -577,7 +578,7 @@ type Props<T extends object> = {
     onSelectAllChange?: (isSelected: boolean) => void;
 } & PaginationProps$1;
 
-declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onRowClick, activeRows, actionBarClassName, ...rest }: Props<T & {
+declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onRowClick, activeRows, isStriped, actionBarClassName, ...rest }: Props<T & {
     id: string;
 }>): react_jsx_runtime.JSX.Element;