@indico-data/design-system 3.0.1 → 3.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/lib/components/forms/checkbox/Checkbox.d.ts +1 -0
  2. package/lib/components/tanstackTable/TankstackTable.types.d.ts +1 -0
  3. package/lib/components/tanstackTable/TanstackTable.d.ts +1 -1
  4. package/lib/components/tanstackTable/components/TableBody/TableBody.d.ts +1 -3
  5. package/lib/components/tanstackTable/components/TableLoading/TableLoading.d.ts +6 -0
  6. package/lib/index.css +71 -77
  7. package/lib/index.d.ts +3 -1
  8. package/lib/index.esm.css +71 -77
  9. package/lib/index.esm.js +31 -27
  10. package/lib/index.esm.js.map +1 -1
  11. package/lib/index.js +31 -27
  12. package/lib/index.js.map +1 -1
  13. package/package.json +1 -1
  14. package/src/components/floatUI/styles/FloatUI.scss +1 -0
  15. package/src/components/forms/checkbox/Checkbox.tsx +7 -2
  16. package/src/components/pagination/Pagination.tsx +1 -1
  17. package/src/components/pagination/__tests__/Pagination.test.tsx +5 -0
  18. package/src/components/pill/styles/Pill.scss +33 -33
  19. package/src/components/tanstackTable/TankstackTable.types.ts +1 -0
  20. package/src/components/tanstackTable/TanstackTable.stories.tsx +10 -0
  21. package/src/components/tanstackTable/TanstackTable.tsx +6 -3
  22. package/src/components/tanstackTable/components/NoResults/NoResults.scss +2 -2
  23. package/src/components/tanstackTable/components/TableBody/TableBody.tsx +1 -25
  24. package/src/components/tanstackTable/components/TableLoading/TableLoading.tsx +18 -0
  25. package/src/components/tanstackTable/mock-data/table-configuration.tsx +6 -7
  26. package/src/components/tanstackTable/styles/table.scss +0 -25
  27. package/src/components/tooltip/Tooltip.tsx +0 -1
  28. package/src/styles/globals.scss +1 -1
  29. package/src/styles/variables/themes/dark.scss +17 -2
  30. package/src/styles/variables/themes/light.scss +17 -2
  31. package/src/components/tanstackTable/styles/test.scss +0 -19
package/lib/components/forms/checkbox/Checkbox.d.ts CHANGED
@@ -9,5 +9,6 @@ export interface CheckboxProps {
9
9
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
10
10
  isDisabled?: boolean;
11
11
  defaultChecked?: boolean;
12
+ className?: string;
12
13
  }
13
14
  export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
package/lib/components/tanstackTable/TankstackTable.types.d.ts CHANGED
@@ -36,6 +36,7 @@ export type Props<T extends object> = {
36
36
  clearFilters?: () => void;
37
37
  hasFilters?: boolean;
38
38
  isLoading?: boolean;
39
+ isLoadingMessage?: string;
39
40
  defaultPinnedColumns?: string[];
40
41
  onClickRow?: ((row: Row<T>) => void) | null;
41
42
  onRowClick?: (row: T) => void;
package/lib/components/tanstackTable/TanstackTable.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { Props } from './TankstackTable.types';
2
- 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, defaultSorting, ...rest }: Props<T & {
2
+ export declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, isLoadingMessage, defaultPinnedColumns, onRowClick, activeRows, isStriped, actionBarClassName, defaultSorting, ...rest }: Props<T & {
3
3
  id: string;
4
4
  }>): import("react/jsx-runtime").JSX.Element;
package/lib/components/tanstackTable/components/TableBody/TableBody.d.ts CHANGED
@@ -4,8 +4,6 @@ export type Props<T> = {
4
4
  onRowClick?: ((row: T & {
5
5
  id: string;
6
6
  }) => void) | null | undefined;
7
- isLoading: boolean;
8
- columnsLength: number;
9
7
  activeRows: string[];
10
8
  };
11
- export declare const TableBody: <T>({ table, onRowClick, isLoading, columnsLength, activeRows, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
9
+ export declare const TableBody: <T>({ table, onRowClick, activeRows }: Props<T>) => import("react/jsx-runtime").JSX.Element;
package/lib/components/tanstackTable/components/TableLoading/TableLoading.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ColumnDef } from '@tanstack/react-table';
2
+ export type Props<T> = {
3
+ columns: ColumnDef<T>[];
4
+ message?: string;
5
+ };
6
+ export declare const TableLoading: <T>({ columns, message }: Props<T>) => import("react/jsx-runtime").JSX.Element;
package/lib/index.css CHANGED
@@ -141,6 +141,7 @@
141
141
  --pf-yellow-color-400: #eaab3e;
142
142
  --pf-yellow-color-450: #dc9518;
143
143
  --pf-yellow-color-500: #ad791f;
144
+ --pf-yellow-color-550: #976f00;
144
145
  --pf-yellow-color-600: #825b17;
145
146
  --pf-yellow-color-700: #58421d;
146
147
  --pf-yellow-color-800: #32291b;
@@ -232,12 +233,26 @@
232
233
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
233
234
  --pf-black-color-100: rgba(0, 0, 0, 1);
234
235
  --pf-error-color: var(--pf-red-color-450);
236
+ --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
237
+ --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
235
238
  --pf-success-color: var(--pf-green-color-500);
236
- --pf-warning-color: var(--pf-yellow-color-400);
239
+ --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
240
+ --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
241
+ --pf-warning-color: var(--pf-yellow-color-450);
242
+ --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
243
+ --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
237
244
  --pf-neutral-color: var(--pf-gray-color-500);
245
+ --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
246
+ --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
238
247
  --pf-info-color: var(--pf-secondary-color-450);
248
+ --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
249
+ --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
239
250
  --pf-brand-color: var(--pf-brand-color-450);
240
- --pf-pending-color: var(--pf-orange-color-400);
251
+ --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
252
+ --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
253
+ --pf-pending-color: var(--pf-pink-color-450);
254
+ --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
255
+ --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
241
256
  }
242
257
 
243
258
  :root [data-theme=dark],
@@ -350,6 +365,7 @@
350
365
  --pf-yellow-color-400: #eaab3e;
351
366
  --pf-yellow-color-450: #dc9518;
352
367
  --pf-yellow-color-500: #ad791f;
368
+ --pf-yellow-color-550: #976f00;
353
369
  --pf-yellow-color-600: #825b17;
354
370
  --pf-yellow-color-700: #58421d;
355
371
  --pf-yellow-color-800: #32291b;
@@ -441,12 +457,26 @@
441
457
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
442
458
  --pf-black-color-100: rgba(0, 0, 0, 1);
443
459
  --pf-error-color: var(--pf-red-color-450);
460
+ --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
461
+ --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
444
462
  --pf-success-color: var(--pf-green-color-500);
445
- --pf-warning-color: var(--pf-yellow-color-400);
463
+ --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
464
+ --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
465
+ --pf-warning-color: var(--pf-yellow-color-450);
466
+ --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
467
+ --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
446
468
  --pf-neutral-color: var(--pf-gray-color-500);
469
+ --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
470
+ --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
447
471
  --pf-info-color: var(--pf-secondary-color-450);
472
+ --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
473
+ --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
448
474
  --pf-brand-color: var(--pf-brand-color-450);
449
- --pf-pending-color: var(--pf-orange-color-400);
475
+ --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
476
+ --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
477
+ --pf-pending-color: var(--pf-pink-color-450);
478
+ --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
479
+ --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
450
480
  }
451
481
 
452
482
  :root {
@@ -723,7 +753,7 @@ a:hover,
723
753
  .react-tooltip {
724
754
  z-index: 5;
725
755
  background-color: var(--pf-tooltip-background-color);
726
- border: var(--pf-border-sm) solid var(--pf-border-color-primary);
756
+ color: var(--pf-tooltip-font-color);
727
757
  opacity: 1 !important;
728
758
  text-wrap: wrap;
729
759
  }
@@ -2121,6 +2151,7 @@ body div[class*=select__single-value] {
2121
2151
  }
2122
2152
 
2123
2153
  .floatui-content {
2154
+ border: solid var(--pf-border-thin) var(--pf-border-color-secondary);
2124
2155
  border-radius: var(--pf-floatui-border-radius);
2125
2156
  box-shadow: var(--pf-floatui-box-shadow);
2126
2157
  background: var(--pf-floatui-background-color);
@@ -2428,23 +2459,6 @@ body div[class*=select__single-value] {
2428
2459
  --pf-tanstack-table-pagination-font-color: var(--pf-tanstack-table-font-color);
2429
2460
  }
2430
2461
 
2431
- .tanstack-table__action-bar-test {
2432
- left: 20% !important;
2433
- }
2434
-
2435
- .tanstack-table__action-bar-docs {
2436
- bottom: unset !important;
2437
- top: 50% !important;
2438
- transform: translate(-50%, -50%) !important;
2439
- }
2440
-
2441
- .tanstack-table__column.is-pinned {
2442
- opacity: 1;
2443
- }
2444
- .tanstack-table__column.is-not-pinned {
2445
- opacity: 0.3;
2446
- }
2447
-
2448
2462
  .tanstack-table__action-bar {
2449
2463
  position: fixed;
2450
2464
  bottom: 170px;
@@ -2485,10 +2499,10 @@ body div[class*=select__single-value] {
2485
2499
  .tanstack-table__no-results__text {
2486
2500
  font-size: var(--pf-line-height-md);
2487
2501
  font-weight: var(--pf-font-weight-medium);
2488
- color: var(--pf-primary-color-50);
2502
+ color: var(--pf-tanstack-table-font-color);
2489
2503
  }
2490
2504
  .tanstack-table__no-results__text span {
2491
- color: var(--pf-white-color);
2505
+ color: var(--pf-tanstack-table-font-color);
2492
2506
  cursor: pointer;
2493
2507
  }
2494
2508
  .tanstack-table__no-results__text span:hover {
@@ -2551,11 +2565,6 @@ body div[class*=select__single-value] {
2551
2565
  .tanstack-table.is-striped .tanstack-table__tbody tr:nth-child(odd) td {
2552
2566
  background-color: var(--pf-tanstack-table-stripe-color);
2553
2567
  }
2554
- .tanstack-table .is-loading {
2555
- border: var(--pf-border-thin) solid var(--pf-border-color-primary);
2556
- height: 350px;
2557
- width: 100%;
2558
- }
2559
2568
  .tanstack-table__thead {
2560
2569
  position: sticky;
2561
2570
  top: 0;
@@ -2642,21 +2651,6 @@ body div[class*=select__single-value] {
2642
2651
  vertical-align: middle;
2643
2652
  height: 100%;
2644
2653
  border: var(--pf-border-sm) solid var(--pf-border-color-primary);
2645
- animation: none;
2646
- }
2647
- @keyframes shimmer {
2648
- 0% {
2649
- background-color: var(--pf-primary-color-700) 40;
2650
- }
2651
- 50% {
2652
- background-color: var(--pf-primary-color-700);
2653
- }
2654
- 100% {
2655
- background-color: var(--pf-primary-color-700) 40;
2656
- }
2657
- }
2658
- .tanstack-table__centered-row.is-loading {
2659
- animation: shimmer 3s ease-in-out infinite;
2660
2654
  }
2661
2655
  .tanstack-table__centered-row svg {
2662
2656
  margin: 0 auto;
@@ -2672,64 +2666,64 @@ body div[class*=select__single-value] {
2672
2666
  }
2673
2667
 
2674
2668
  :root [data-theme=light] {
2675
- --pf-pill-info-background-color: var(--pf-secondary-color-500);
2669
+ --pf-pill-info-background-color: var(--pf-info-color-dark);
2676
2670
  --pf-pill-info-font-color: var(--pf-secondary-color-50);
2677
- --pf-pill-info-border-color: var(--pf-secondary-color-500);
2678
- --pf-pill-error-background-color: var(--pf-red-color-450);
2671
+ --pf-pill-info-border-color: var(--pf-info-color-dark);
2672
+ --pf-pill-error-background-color: var(--pf-error-color-dark);
2679
2673
  --pf-pill-error-font-color: var(--pf-red-color-50);
2680
- --pf-pill-error-border-color: var(--pf-red-color-450);
2681
- --pf-pill-warning-background-color: var(--pf-yellow-color-450);
2674
+ --pf-pill-error-border-color: var(--pf-error-color-dark);
2675
+ --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2682
2676
  --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2683
- --pf-pill-warning-border-color: var(--pf-yellow-color-450);
2677
+ --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2684
2678
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2685
2679
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2686
2680
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2687
- --pf-pill-success-background-color: var(--pf-green-color-600);
2681
+ --pf-pill-success-background-color: var(--pf-success-color-dark);
2688
2682
  --pf-pill-success-font-color: var(--pf-green-color-50);
2689
- --pf-pill-success-border-color: var(--pf-green-color-600);
2690
- --pf-pill-purple-background-color: var(--pf-purple-color-450);
2683
+ --pf-pill-success-border-color: var(--pf-success-color-dark);
2684
+ --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2691
2685
  --pf-pill-purple-font-color: var(--pf-purple-color-50);
2692
- --pf-pill-purple-border-color: var(--pf-purple-color-450);
2693
- --pf-pill-pending-background-color: var(--pf-pink-color-450);
2686
+ --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2687
+ --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2694
2688
  --pf-pill-pending-font-color: var(--pf-pink-color-50);
2695
- --pf-pill-pending-border-color: var(--pf-pink-color-450);
2696
- --pf-pill-orange-background-color: var(--pf-orange-color-450);
2689
+ --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2690
+ --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2697
2691
  --pf-pill-orange-font-color: var(--pf-orange-color-50);
2698
- --pf-pill-orange-border-color: var(--pf-orange-color-450);
2699
- --pf-pill-teal-background-color: var(--pf-teal-color-600);
2692
+ --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2693
+ --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2700
2694
  --pf-pill-teal-font-color: var(--pf-teal-color-50);
2701
- --pf-pill-teal-border-color: var(--pf-teal-color-600);
2695
+ --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2702
2696
  }
2703
2697
 
2704
2698
  :root [data-theme=dark],
2705
2699
  :root {
2706
- --pf-pill-info-background-color: var(--pf-secondary-color-500);
2700
+ --pf-pill-info-background-color: var(--pf-info-color-dark);
2707
2701
  --pf-pill-info-font-color: var(--pf-secondary-color-50);
2708
- --pf-pill-info-border-color: var(--pf-secondary-color-500);
2709
- --pf-pill-error-background-color: var(--pf-red-color-450);
2702
+ --pf-pill-info-border-color: var(--pf-info-color-dark);
2703
+ --pf-pill-error-background-color: var(--pf-error-color-dark);
2710
2704
  --pf-pill-error-font-color: var(--pf-red-color-50);
2711
- --pf-pill-error-border-color: var(--pf-red-color-450);
2712
- --pf-pill-warning-background-color: var(--pf-yellow-color-450);
2705
+ --pf-pill-error-border-color: var(--pf-error-color-dark);
2706
+ --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2713
2707
  --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2714
- --pf-pill-warning-border-color: var(--pf-yellow-color-450);
2708
+ --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2715
2709
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2716
2710
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2717
2711
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2718
- --pf-pill-success-background-color: var(--pf-green-color-600);
2712
+ --pf-pill-success-background-color: var(--pf-success-color-dark);
2719
2713
  --pf-pill-success-font-color: var(--pf-green-color-50);
2720
- --pf-pill-success-border-color: var(--pf-green-color-600);
2721
- --pf-pill-purple-background-color: var(--pf-purple-color-450);
2714
+ --pf-pill-success-border-color: var(--pf-success-color-dark);
2715
+ --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2722
2716
  --pf-pill-purple-font-color: var(--pf-purple-color-50);
2723
- --pf-pill-purple-border-color: var(--pf-purple-color-450);
2724
- --pf-pill-pending-background-color: var(--pf-pink-color-450);
2725
- --pf-pill-pipendingnk-font-color: var(--pf-pink-color-50);
2726
- --pf-pill-pending-border-color: var(--pf-pink-color-450);
2727
- --pf-pill-orange-background-color: var(--pf-orange-color-450);
2717
+ --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2718
+ --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2719
+ --pf-pill-pending-font-color: var(--pf-pink-color-50);
2720
+ --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2721
+ --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2728
2722
  --pf-pill-orange-font-color: var(--pf-orange-color-50);
2729
- --pf-pill-orange-border-color: var(--pf-orange-color-450);
2730
- --pf-pill-teal-background-color: var(--pf-teal-color-600);
2723
+ --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2724
+ --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2731
2725
  --pf-pill-teal-font-color: var(--pf-teal-color-50);
2732
- --pf-pill-teal-border-color: var(--pf-teal-color-600);
2726
+ --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2733
2727
  }
2734
2728
 
2735
2729
  .pill {
package/lib/index.d.ts CHANGED
@@ -311,6 +311,7 @@ interface CheckboxProps {
311
311
  onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
312
312
  isDisabled?: boolean;
313
313
  defaultChecked?: boolean;
314
+ className?: string;
314
315
  }
315
316
  declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
316
317
 
@@ -617,6 +618,7 @@ type Props<T extends object> = {
617
618
  clearFilters?: () => void;
618
619
  hasFilters?: boolean;
619
620
  isLoading?: boolean;
621
+ isLoadingMessage?: string;
620
622
  defaultPinnedColumns?: string[];
621
623
  onClickRow?: ((row: Row$1<T>) => void) | null;
622
624
  onRowClick?: (row: T) => void;
@@ -627,7 +629,7 @@ type Props<T extends object> = {
627
629
  defaultSorting?: SortingState;
628
630
  } & PaginationProps$1;
629
631
 
630
- 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, defaultSorting, ...rest }: Props<T & {
632
+ declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, isLoadingMessage, defaultPinnedColumns, onRowClick, activeRows, isStriped, actionBarClassName, defaultSorting, ...rest }: Props<T & {
631
633
  id: string;
632
634
  }>): react_jsx_runtime.JSX.Element;
633
635
 
package/lib/index.esm.css CHANGED
@@ -141,6 +141,7 @@
141
141
  --pf-yellow-color-400: #eaab3e;
142
142
  --pf-yellow-color-450: #dc9518;
143
143
  --pf-yellow-color-500: #ad791f;
144
+ --pf-yellow-color-550: #976f00;
144
145
  --pf-yellow-color-600: #825b17;
145
146
  --pf-yellow-color-700: #58421d;
146
147
  --pf-yellow-color-800: #32291b;
@@ -232,12 +233,26 @@
232
233
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
233
234
  --pf-black-color-100: rgba(0, 0, 0, 1);
234
235
  --pf-error-color: var(--pf-red-color-450);
236
+ --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
237
+ --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
235
238
  --pf-success-color: var(--pf-green-color-500);
236
- --pf-warning-color: var(--pf-yellow-color-400);
239
+ --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
240
+ --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
241
+ --pf-warning-color: var(--pf-yellow-color-450);
242
+ --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
243
+ --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
237
244
  --pf-neutral-color: var(--pf-gray-color-500);
245
+ --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
246
+ --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
238
247
  --pf-info-color: var(--pf-secondary-color-450);
248
+ --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
249
+ --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
239
250
  --pf-brand-color: var(--pf-brand-color-450);
240
- --pf-pending-color: var(--pf-orange-color-400);
251
+ --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
252
+ --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
253
+ --pf-pending-color: var(--pf-pink-color-450);
254
+ --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
255
+ --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
241
256
  }
242
257
 
243
258
  :root [data-theme=dark],
@@ -350,6 +365,7 @@
350
365
  --pf-yellow-color-400: #eaab3e;
351
366
  --pf-yellow-color-450: #dc9518;
352
367
  --pf-yellow-color-500: #ad791f;
368
+ --pf-yellow-color-550: #976f00;
353
369
  --pf-yellow-color-600: #825b17;
354
370
  --pf-yellow-color-700: #58421d;
355
371
  --pf-yellow-color-800: #32291b;
@@ -441,12 +457,26 @@
441
457
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
442
458
  --pf-black-color-100: rgba(0, 0, 0, 1);
443
459
  --pf-error-color: var(--pf-red-color-450);
460
+ --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
461
+ --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
444
462
  --pf-success-color: var(--pf-green-color-500);
445
- --pf-warning-color: var(--pf-yellow-color-400);
463
+ --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
464
+ --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
465
+ --pf-warning-color: var(--pf-yellow-color-450);
466
+ --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
467
+ --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
446
468
  --pf-neutral-color: var(--pf-gray-color-500);
469
+ --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
470
+ --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
447
471
  --pf-info-color: var(--pf-secondary-color-450);
472
+ --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
473
+ --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
448
474
  --pf-brand-color: var(--pf-brand-color-450);
449
- --pf-pending-color: var(--pf-orange-color-400);
475
+ --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
476
+ --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
477
+ --pf-pending-color: var(--pf-pink-color-450);
478
+ --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
479
+ --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
450
480
  }
451
481
 
452
482
  :root {
@@ -723,7 +753,7 @@ a:hover,
723
753
  .react-tooltip {
724
754
  z-index: 5;
725
755
  background-color: var(--pf-tooltip-background-color);
726
- border: var(--pf-border-sm) solid var(--pf-border-color-primary);
756
+ color: var(--pf-tooltip-font-color);
727
757
  opacity: 1 !important;
728
758
  text-wrap: wrap;
729
759
  }
@@ -2121,6 +2151,7 @@ body div[class*=select__single-value] {
2121
2151
  }
2122
2152
 
2123
2153
  .floatui-content {
2154
+ border: solid var(--pf-border-thin) var(--pf-border-color-secondary);
2124
2155
  border-radius: var(--pf-floatui-border-radius);
2125
2156
  box-shadow: var(--pf-floatui-box-shadow);
2126
2157
  background: var(--pf-floatui-background-color);
@@ -2428,23 +2459,6 @@ body div[class*=select__single-value] {
2428
2459
  --pf-tanstack-table-pagination-font-color: var(--pf-tanstack-table-font-color);
2429
2460
  }
2430
2461
 
2431
- .tanstack-table__action-bar-test {
2432
- left: 20% !important;
2433
- }
2434
-
2435
- .tanstack-table__action-bar-docs {
2436
- bottom: unset !important;
2437
- top: 50% !important;
2438
- transform: translate(-50%, -50%) !important;
2439
- }
2440
-
2441
- .tanstack-table__column.is-pinned {
2442
- opacity: 1;
2443
- }
2444
- .tanstack-table__column.is-not-pinned {
2445
- opacity: 0.3;
2446
- }
2447
-
2448
2462
  .tanstack-table__action-bar {
2449
2463
  position: fixed;
2450
2464
  bottom: 170px;
@@ -2485,10 +2499,10 @@ body div[class*=select__single-value] {
2485
2499
  .tanstack-table__no-results__text {
2486
2500
  font-size: var(--pf-line-height-md);
2487
2501
  font-weight: var(--pf-font-weight-medium);
2488
- color: var(--pf-primary-color-50);
2502
+ color: var(--pf-tanstack-table-font-color);
2489
2503
  }
2490
2504
  .tanstack-table__no-results__text span {
2491
- color: var(--pf-white-color);
2505
+ color: var(--pf-tanstack-table-font-color);
2492
2506
  cursor: pointer;
2493
2507
  }
2494
2508
  .tanstack-table__no-results__text span:hover {
@@ -2551,11 +2565,6 @@ body div[class*=select__single-value] {
2551
2565
  .tanstack-table.is-striped .tanstack-table__tbody tr:nth-child(odd) td {
2552
2566
  background-color: var(--pf-tanstack-table-stripe-color);
2553
2567
  }
2554
- .tanstack-table .is-loading {
2555
- border: var(--pf-border-thin) solid var(--pf-border-color-primary);
2556
- height: 350px;
2557
- width: 100%;
2558
- }
2559
2568
  .tanstack-table__thead {
2560
2569
  position: sticky;
2561
2570
  top: 0;
@@ -2642,21 +2651,6 @@ body div[class*=select__single-value] {
2642
2651
  vertical-align: middle;
2643
2652
  height: 100%;
2644
2653
  border: var(--pf-border-sm) solid var(--pf-border-color-primary);
2645
- animation: none;
2646
- }
2647
- @keyframes shimmer {
2648
- 0% {
2649
- background-color: var(--pf-primary-color-700) 40;
2650
- }
2651
- 50% {
2652
- background-color: var(--pf-primary-color-700);
2653
- }
2654
- 100% {
2655
- background-color: var(--pf-primary-color-700) 40;
2656
- }
2657
- }
2658
- .tanstack-table__centered-row.is-loading {
2659
- animation: shimmer 3s ease-in-out infinite;
2660
2654
  }
2661
2655
  .tanstack-table__centered-row svg {
2662
2656
  margin: 0 auto;
@@ -2672,64 +2666,64 @@ body div[class*=select__single-value] {
2672
2666
  }
2673
2667
 
2674
2668
  :root [data-theme=light] {
2675
- --pf-pill-info-background-color: var(--pf-secondary-color-500);
2669
+ --pf-pill-info-background-color: var(--pf-info-color-dark);
2676
2670
  --pf-pill-info-font-color: var(--pf-secondary-color-50);
2677
- --pf-pill-info-border-color: var(--pf-secondary-color-500);
2678
- --pf-pill-error-background-color: var(--pf-red-color-450);
2671
+ --pf-pill-info-border-color: var(--pf-info-color-dark);
2672
+ --pf-pill-error-background-color: var(--pf-error-color-dark);
2679
2673
  --pf-pill-error-font-color: var(--pf-red-color-50);
2680
- --pf-pill-error-border-color: var(--pf-red-color-450);
2681
- --pf-pill-warning-background-color: var(--pf-yellow-color-450);
2674
+ --pf-pill-error-border-color: var(--pf-error-color-dark);
2675
+ --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2682
2676
  --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2683
- --pf-pill-warning-border-color: var(--pf-yellow-color-450);
2677
+ --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2684
2678
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2685
2679
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2686
2680
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2687
- --pf-pill-success-background-color: var(--pf-green-color-600);
2681
+ --pf-pill-success-background-color: var(--pf-success-color-dark);
2688
2682
  --pf-pill-success-font-color: var(--pf-green-color-50);
2689
- --pf-pill-success-border-color: var(--pf-green-color-600);
2690
- --pf-pill-purple-background-color: var(--pf-purple-color-450);
2683
+ --pf-pill-success-border-color: var(--pf-success-color-dark);
2684
+ --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2691
2685
  --pf-pill-purple-font-color: var(--pf-purple-color-50);
2692
- --pf-pill-purple-border-color: var(--pf-purple-color-450);
2693
- --pf-pill-pending-background-color: var(--pf-pink-color-450);
2686
+ --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2687
+ --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2694
2688
  --pf-pill-pending-font-color: var(--pf-pink-color-50);
2695
- --pf-pill-pending-border-color: var(--pf-pink-color-450);
2696
- --pf-pill-orange-background-color: var(--pf-orange-color-450);
2689
+ --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2690
+ --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2697
2691
  --pf-pill-orange-font-color: var(--pf-orange-color-50);
2698
- --pf-pill-orange-border-color: var(--pf-orange-color-450);
2699
- --pf-pill-teal-background-color: var(--pf-teal-color-600);
2692
+ --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2693
+ --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2700
2694
  --pf-pill-teal-font-color: var(--pf-teal-color-50);
2701
- --pf-pill-teal-border-color: var(--pf-teal-color-600);
2695
+ --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2702
2696
  }
2703
2697
 
2704
2698
  :root [data-theme=dark],
2705
2699
  :root {
2706
- --pf-pill-info-background-color: var(--pf-secondary-color-500);
2700
+ --pf-pill-info-background-color: var(--pf-info-color-dark);
2707
2701
  --pf-pill-info-font-color: var(--pf-secondary-color-50);
2708
- --pf-pill-info-border-color: var(--pf-secondary-color-500);
2709
- --pf-pill-error-background-color: var(--pf-red-color-450);
2702
+ --pf-pill-info-border-color: var(--pf-info-color-dark);
2703
+ --pf-pill-error-background-color: var(--pf-error-color-dark);
2710
2704
  --pf-pill-error-font-color: var(--pf-red-color-50);
2711
- --pf-pill-error-border-color: var(--pf-red-color-450);
2712
- --pf-pill-warning-background-color: var(--pf-yellow-color-450);
2705
+ --pf-pill-error-border-color: var(--pf-error-color-dark);
2706
+ --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2713
2707
  --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2714
- --pf-pill-warning-border-color: var(--pf-yellow-color-450);
2708
+ --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2715
2709
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2716
2710
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2717
2711
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2718
- --pf-pill-success-background-color: var(--pf-green-color-600);
2712
+ --pf-pill-success-background-color: var(--pf-success-color-dark);
2719
2713
  --pf-pill-success-font-color: var(--pf-green-color-50);
2720
- --pf-pill-success-border-color: var(--pf-green-color-600);
2721
- --pf-pill-purple-background-color: var(--pf-purple-color-450);
2714
+ --pf-pill-success-border-color: var(--pf-success-color-dark);
2715
+ --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2722
2716
  --pf-pill-purple-font-color: var(--pf-purple-color-50);
2723
- --pf-pill-purple-border-color: var(--pf-purple-color-450);
2724
- --pf-pill-pending-background-color: var(--pf-pink-color-450);
2725
- --pf-pill-pipendingnk-font-color: var(--pf-pink-color-50);
2726
- --pf-pill-pending-border-color: var(--pf-pink-color-450);
2727
- --pf-pill-orange-background-color: var(--pf-orange-color-450);
2717
+ --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2718
+ --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2719
+ --pf-pill-pending-font-color: var(--pf-pink-color-50);
2720
+ --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2721
+ --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2728
2722
  --pf-pill-orange-font-color: var(--pf-orange-color-50);
2729
- --pf-pill-orange-border-color: var(--pf-orange-color-450);
2730
- --pf-pill-teal-background-color: var(--pf-teal-color-600);
2723
+ --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2724
+ --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2731
2725
  --pf-pill-teal-font-color: var(--pf-teal-color-50);
2732
- --pf-pill-teal-border-color: var(--pf-teal-color-600);
2726
+ --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2733
2727
  }
2734
2728
 
2735
2729
  .pill {