@indico-data/design-system 2.59.1 → 2.60.0

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 (16) hide show
  1. package/.harness/pipeline.yaml +9 -2
  2. package/lib/index.css +66 -41
  3. package/lib/index.esm.css +66 -41
  4. package/package.json +2 -2
  5. package/src/components/badge/styles/Badge.scss +1 -1
  6. package/src/components/button/styles/_variables.scss +18 -18
  7. package/src/components/forms/form/styles/Form.scss +3 -3
  8. package/src/components/forms/select/styles/Select.scss +2 -2
  9. package/src/components/menu/styles/_variables.scss +2 -2
  10. package/src/components/skeleton/styles/Skeleton.scss +7 -7
  11. package/src/components/stepper/styles/Stepper.scss +30 -9
  12. package/src/components/table/Table.mdx +1 -1
  13. package/src/components/table/Table.stories.tsx +1 -1
  14. package/src/components/toast/styles/Toast.scss +8 -6
  15. package/src/styles/globals.scss +2 -2
  16. package/src/styles/variables/_borders.scss +1 -1
package/.harness/pipeline.yaml CHANGED
@@ -3,12 +3,19 @@ pipeline:
3
3
  identifier: design_system
4
4
  tags: {}
5
5
  template:
6
- templateRef: Design_System
7
- versionLabel: 3.0.0
6
+ templateRef: account.storybook_lib
7
+ versionLabel: 1.0.0
8
8
  templateInputs:
9
9
  properties:
10
10
  ci:
11
11
  codebase:
12
12
  build: <+input>
13
+ variables:
14
+ - name: repo
15
+ type: String
16
+ value: permafrost
17
+ - name: bucket_name
18
+ type: String
19
+ value: ds
13
20
  projectIdentifier: Insights
14
21
  orgIdentifier: default
package/lib/index.css CHANGED
@@ -370,7 +370,7 @@
370
370
  }
371
371
 
372
372
  :root [data-theme=light] {
373
- --pf-border-color: var(--pf-gray-color-300);
373
+ --pf-border-color: var(--pf-gray-color-800);
374
374
  --pf-border-color-light: var(--pf-gray-color-100);
375
375
  --pf-horizontal-line-color: var(--pf-gray-color-200);
376
376
  }
@@ -474,9 +474,9 @@
474
474
  :root [data-theme=light] {
475
475
  --pf-white-color: #ffffff;
476
476
  --pf-black-color: #000000;
477
- --pf-background-color-light: var(--pf-gray-color-100);
477
+ --pf-background-color-light: var(--pf-gray-color-900);
478
478
  --pf-background-color: var(--pf-white-color);
479
- --pf-background-color-dark: var(--pf-gray-color-300);
479
+ --pf-background-color-dark: var(--pf-gray-color-100);
480
480
  --pf-background-secondary-color-light: var(--pf-secondary-color-300);
481
481
  --pf-background-color-secondary: var(--pf-secondary-color-500);
482
482
  --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
@@ -563,33 +563,33 @@ a:hover,
563
563
  }
564
564
 
565
565
  :root [data-theme=light] {
566
- --pf-button-solid-background-color: var(--pf-primary-color);
566
+ --pf-button-solid-background-color: var(--pf-secondary-color-400);
567
567
  --pf-button-solid-color: var(--pf-white-color);
568
- --pf-button-solid-hover-background-color: var(--pf-primary-color-400);
569
- --pf-button-solid-focus-background-color: var(--pf-primary-color);
568
+ --pf-button-solid-hover-background-color: var(--pf-secondary-color-500);
569
+ --pf-button-solid-focus-background-color: var(--pf-secondary-color-400);
570
570
  --pf-button-solid-disabled-background-color: var(--pf-primary-color-300);
571
- --pf-button-solid-disabled-color: var(--pf-gray-color-100);
572
- --pf-button-outline-color: var(--pf-primary-color);
573
- --pf-button-outline-border-color: var(--pf-primary-color);
574
- --pf-button-outline-hover-color: var(--pf-primary-color-400);
571
+ --pf-button-solid-disabled-color: var(--pf-gray-color-800);
572
+ --pf-button-outline-color: var(--pf-secondary-color-400);
573
+ --pf-button-outline-border-color: var(--pf-secondary-color-400);
574
+ --pf-button-outline-hover-color: var(--pf-secondary-color-500);
575
575
  --pf-button-outline-disabled-color: var(--pf-primary-color-300);
576
- --pf-button-link-color: var(--pf-primary-color);
577
- --pf-button-link-hover-color: var(--pf-primary-color-400);
576
+ --pf-button-link-color: var(--pf-secondary-color-400);
577
+ --pf-button-link-hover-color: var(--pf-secondary-color-500);
578
578
  --pf-button-link-disabled-color: var(--pf-primary-color-300);
579
- --pf-button-action-color: var(--pf-primary-color);
580
- --pf-button-action-border-color: var(--pf-primary-color);
581
- --pf-button-action-hover-background-color: var(--pf-primary-color-200);
582
- --pf-button-action-hover-border-color: var(--pf-primary-color-400);
583
- --pf-button-action-hover-color: var(--pf-primary-color);
584
- --pf-button-action-disabled-border-color: var(--pf-primary-color-300);
579
+ --pf-button-action-color: var(--pf-secondary-color-400);
580
+ --pf-button-action-border-color: var(--pf-secondary-color-400);
581
+ --pf-button-action-hover-background-color: var(--pf-secondary-color-500);
582
+ --pf-button-action-hover-border-color: var(--pf-secondary-color-500);
583
+ --pf-button-action-hover-color: var(--pf-white-color);
584
+ --pf-button-action-disabled-border-color: var(--pf-secondary-color-400);
585
585
  --pf-button-action-disabled-color: var(--pf-primary-color-300);
586
- --pf-button-destructive-background-color: var(--pf-error-color);
586
+ --pf-button-destructive-background-color: var(--pf-red-color-400);
587
587
  --pf-button-destructive-color: var(--pf-white-color);
588
- --pf-button-destructive-hover-background-color: var(--pf-red-color-400);
588
+ --pf-button-destructive-hover-background-color: var(--pf-red-color-500);
589
589
  --pf-button-destructive-hover-color: var(--pf-white-color);
590
590
  --pf-button-destructive-focus-background-color: var(--pf-red-color);
591
591
  --pf-button-destructive-focus-color: var(--pf-white-color);
592
- --pf-button-destructive-disabled-background-color: var(--pf-red-color-300);
592
+ --pf-button-destructive-disabled-background-color: var(--pf-red-color-100);
593
593
  --pf-button-destructive-disabled-color: var(--pf-white-color);
594
594
  --pf-button-soft-color: var(--pf-primary-color-300);
595
595
  --pf-button-soft-border-color: var(--pf-primary-color-300);
@@ -1389,11 +1389,11 @@ form {
1389
1389
  --pf-form-input-color: var(--pf-gray-color);
1390
1390
  --pf-form-input-placeholder-color: var(--pf-gray-color-300);
1391
1391
  --pf-form-input-help-color: var(--pf-gray-color-400);
1392
- --pf-form-input-hover-background-color: var(--pf-gray-color-100);
1393
- --pf-form-input-focus-background-color: var(--pf-gray-color-100);
1392
+ --pf-form-input-hover-background-color: var(--pf-gray-color-900);
1393
+ --pf-form-input-focus-background-color: var(--pf-gray-color-950);
1394
1394
  --pf-form-input-focus-border-color: var(--pf-secondary-color-800);
1395
1395
  --pf-form-input-focus-outline-color: var(--pf-primary-color);
1396
- --pf-form-input-disabled-background-color: var(--pf-gray-color-100);
1396
+ --pf-form-input-disabled-background-color: var(--pf-gray-color-700);
1397
1397
  --pf-form-input-disabled-border-color: var(--pf-gray-color-100);
1398
1398
  --pf-form-input-disabled-color: var(--pf-gray-color-400);
1399
1399
  }
@@ -1555,9 +1555,9 @@ form {
1555
1555
 
1556
1556
  :root [data-theme=light] {
1557
1557
  --pf-select-indicator-color: var(--pf-gray-color);
1558
- --pf-select-option-selected-color: var(--pf-primary-color-100);
1558
+ --pf-select-option-selected-color: var(--pf-gray-color-950);
1559
1559
  --pf-select-option-color: var(--pf-gray-color);
1560
- --pf-select-option-hover-color: var(--pf-primary-color-100);
1560
+ --pf-select-option-hover-color: var(--pf-gray-color-900);
1561
1561
  }
1562
1562
 
1563
1563
  :root [data-theme=dark],
@@ -1727,21 +1727,21 @@ form {
1727
1727
  margin-left: var(--pf-margin-2);
1728
1728
  }
1729
1729
 
1730
- :root,
1731
- :root [data-theme=light],
1732
- :root [data-theme=dark] {
1733
- --pf-skeleton-color-one: var(--pf-gray-color-200);
1734
- --pf-skeleton-color-two: var(--pf-gray-color-100);
1730
+ :root [data-theme=light] {
1731
+ --pf-skeleton-color-one: var(--pf-gray-color-800);
1732
+ --pf-skeleton-color-two: var(--pf-gray-color-950);
1733
+ --pf-skeleton-background-color: var(--pf-gray-color-700);
1735
1734
  }
1736
1735
 
1737
1736
  :root [data-theme=dark] {
1738
1737
  --pf-skeleton-color-one: var(--pf-primary-color-500);
1739
1738
  --pf-skeleton-color-two: var(--pf-primary-color-400);
1739
+ --pf-skeleton-background-color: var(--pf-gray-color-900);
1740
1740
  }
1741
1741
 
1742
1742
  .skeleton {
1743
1743
  border-radius: var(--pf-rounded);
1744
- background-color: var(--pf-gray-color-100);
1744
+ background-color: var(--pf-skeleton-background-color);
1745
1745
  opacity: 0.7;
1746
1746
  animation: skeleton-loading 1s linear infinite alternate;
1747
1747
  display: flex;
@@ -1810,10 +1810,10 @@ form {
1810
1810
  }
1811
1811
 
1812
1812
  :root [data-theme=light] {
1813
- --pf-menu-item-hover-color: var(--pf-primary-color-100);
1813
+ --pf-menu-item-hover-color: var(--pf-gray-color-950);
1814
1814
  --pf-menu-item-background-color: var(--pf-white-color);
1815
1815
  --pf-menu-item-color: var(--pf-gray-color);
1816
- --pf-menu-item-focus-color: var(--pf-primary-color-300);
1816
+ --pf-menu-item-focus-color: var(--pf-gray-color-900);
1817
1817
  }
1818
1818
 
1819
1819
  :root [data-theme=dark],
@@ -1957,7 +1957,7 @@ form {
1957
1957
  }
1958
1958
 
1959
1959
  :root [data-theme=light] {
1960
- --pf-badge-background-color: var(--pf-white-color);
1960
+ --pf-badge-background-color: var(--pf-primary-color-950);
1961
1961
  --pf-badge-border-color: var(--pf-border-color);
1962
1962
  }
1963
1963
 
@@ -2658,13 +2658,14 @@ form {
2658
2658
  width: 100%;
2659
2659
  }
2660
2660
 
2661
- :root,
2662
- :root [data-theme=light],
2663
- :root [data-theme=dark] {
2664
- --toastify-color-dark: var(--pf-background-color-light);
2665
- --toastify-color-progress-dark: var(--pf-primary-color-400);
2661
+ :root [data-theme=light] {
2662
+ --toastify-color-dark: var(--pf-white-color);
2663
+ --toastify-color-progress-dark: var(--pf-primary-color-200);
2666
2664
  --toastify-icon-color-success: var(--pf-success-color);
2667
2665
  --toastify-color-progress-bgo: 0.2;
2666
+ --toastify-text-color-dark: var(
2667
+ --pf-gray-color-600
2668
+ );
2668
2669
  }
2669
2670
 
2670
2671
  :root [data-theme=dark] {
@@ -2672,6 +2673,25 @@ form {
2672
2673
  --toastify-color-progress-dark: var(--pf-primary-color-400);
2673
2674
  --toastify-icon-color-success: var(--pf-success-color);
2674
2675
  --toastify-color-progress-bgo: 0.2;
2676
+ --toastify-text-color-dark: var(--pf-font-color);
2677
+ }
2678
+
2679
+ :root [data-theme=light] {
2680
+ --pf-stepper-background-color: var(--pf-gray-color-900);
2681
+ --pf-stepper-legend-background-color: var(--pf-gray-color-950);
2682
+ --pf-stepper-legend-circle-background-color: var(--pf-gray-color-800);
2683
+ --pf-stepper-legend-circle-text-color: var(--pf-white-color);
2684
+ --pf-stepper-legend-line-background-color: var(--pf-gray-color-800);
2685
+ --pf-stepper-legend-step-text-color: var(--pf-white-color);
2686
+ --pf-stepper-legend-step-disabled-text-color: var(--pf-gray-color-800);
2687
+ --pf-stepper-legend-circle-completed-background-color: var(--pf-secondary-color);
2688
+ --pf-stepper-legend-circle-completed-text-color: var(--pf-white-color);
2689
+ --pf-stepper-legend-line-completed-background-color: var(--pf-secondary-color);
2690
+ --pf-stepper-legend-step-completed-text-color: var(--pf-secondary-color);
2691
+ --pf-stepper-legend-circle-current-background-color: var(--pf-secondary-color);
2692
+ --pf-stepper-legend-circle-current-border-color: var(--pf-white-color);
2693
+ --pf-stepper-legend-circle-current-text-color: var(--pf-white-color);
2694
+ --pf-stepper-legend-step-current-text-color: var(--pf-secondary-color);
2675
2695
  }
2676
2696
 
2677
2697
  :root [data-theme=dark] {
@@ -2684,10 +2704,11 @@ form {
2684
2704
  --pf-stepper-legend-step-disabled-text-color: var(--pf-tertiary-color-450);
2685
2705
  --pf-stepper-legend-circle-completed-background-color: var(--pf-secondary-color);
2686
2706
  --pf-stepper-legend-circle-completed-text-color: var(--pf-white-color);
2707
+ --pf-stepper-legend-step-completed-text-color: var(--pf-secondary-color);
2687
2708
  --pf-stepper-legend-line-completed-background-color: var(--pf-secondary-color);
2688
2709
  --pf-stepper-legend-circle-current-background-color: var(--pf-secondary-color);
2689
2710
  --pf-stepper-legend-circle-current-border-color: var(--pf-white-color);
2690
- --pf-stepper-legend-step-current-text-color: var(--pf-white-color);
2711
+ --pf-stepper-legend-circle-current-text-color: var(--pf-white-color);
2691
2712
  --pf-stepper-legend-step-current-text-color: var(--pf-secondary-color);
2692
2713
  }
2693
2714
 
@@ -2744,6 +2765,7 @@ form {
2744
2765
  }
2745
2766
  .stepper .stepper-legend-circle.current {
2746
2767
  background-color: var(--pf-stepper-legend-circle-current-background-color);
2768
+ color: var(--pf-stepper-legend-circle-current-text-color);
2747
2769
  }
2748
2770
  .stepper .stepper-legend-line {
2749
2771
  width: 1px;
@@ -2764,6 +2786,9 @@ form {
2764
2786
  margin-left: var(--pf-margin-2);
2765
2787
  color: var(--pf-stepper-legend-step-text-color);
2766
2788
  }
2789
+ .stepper .stepper-legend-step--completed-step .btn {
2790
+ color: var(--pf-stepper-legend-step-completed-text-color);
2791
+ }
2767
2792
  .stepper .stepper-legend-step--current-step .btn {
2768
2793
  color: var(--pf-stepper-legend-step-current-text-color);
2769
2794
  text-decoration: underline;
package/lib/index.esm.css CHANGED
@@ -370,7 +370,7 @@
370
370
  }
371
371
 
372
372
  :root [data-theme=light] {
373
- --pf-border-color: var(--pf-gray-color-300);
373
+ --pf-border-color: var(--pf-gray-color-800);
374
374
  --pf-border-color-light: var(--pf-gray-color-100);
375
375
  --pf-horizontal-line-color: var(--pf-gray-color-200);
376
376
  }
@@ -474,9 +474,9 @@
474
474
  :root [data-theme=light] {
475
475
  --pf-white-color: #ffffff;
476
476
  --pf-black-color: #000000;
477
- --pf-background-color-light: var(--pf-gray-color-100);
477
+ --pf-background-color-light: var(--pf-gray-color-900);
478
478
  --pf-background-color: var(--pf-white-color);
479
- --pf-background-color-dark: var(--pf-gray-color-300);
479
+ --pf-background-color-dark: var(--pf-gray-color-100);
480
480
  --pf-background-secondary-color-light: var(--pf-secondary-color-300);
481
481
  --pf-background-color-secondary: var(--pf-secondary-color-500);
482
482
  --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
@@ -563,33 +563,33 @@ a:hover,
563
563
  }
564
564
 
565
565
  :root [data-theme=light] {
566
- --pf-button-solid-background-color: var(--pf-primary-color);
566
+ --pf-button-solid-background-color: var(--pf-secondary-color-400);
567
567
  --pf-button-solid-color: var(--pf-white-color);
568
- --pf-button-solid-hover-background-color: var(--pf-primary-color-400);
569
- --pf-button-solid-focus-background-color: var(--pf-primary-color);
568
+ --pf-button-solid-hover-background-color: var(--pf-secondary-color-500);
569
+ --pf-button-solid-focus-background-color: var(--pf-secondary-color-400);
570
570
  --pf-button-solid-disabled-background-color: var(--pf-primary-color-300);
571
- --pf-button-solid-disabled-color: var(--pf-gray-color-100);
572
- --pf-button-outline-color: var(--pf-primary-color);
573
- --pf-button-outline-border-color: var(--pf-primary-color);
574
- --pf-button-outline-hover-color: var(--pf-primary-color-400);
571
+ --pf-button-solid-disabled-color: var(--pf-gray-color-800);
572
+ --pf-button-outline-color: var(--pf-secondary-color-400);
573
+ --pf-button-outline-border-color: var(--pf-secondary-color-400);
574
+ --pf-button-outline-hover-color: var(--pf-secondary-color-500);
575
575
  --pf-button-outline-disabled-color: var(--pf-primary-color-300);
576
- --pf-button-link-color: var(--pf-primary-color);
577
- --pf-button-link-hover-color: var(--pf-primary-color-400);
576
+ --pf-button-link-color: var(--pf-secondary-color-400);
577
+ --pf-button-link-hover-color: var(--pf-secondary-color-500);
578
578
  --pf-button-link-disabled-color: var(--pf-primary-color-300);
579
- --pf-button-action-color: var(--pf-primary-color);
580
- --pf-button-action-border-color: var(--pf-primary-color);
581
- --pf-button-action-hover-background-color: var(--pf-primary-color-200);
582
- --pf-button-action-hover-border-color: var(--pf-primary-color-400);
583
- --pf-button-action-hover-color: var(--pf-primary-color);
584
- --pf-button-action-disabled-border-color: var(--pf-primary-color-300);
579
+ --pf-button-action-color: var(--pf-secondary-color-400);
580
+ --pf-button-action-border-color: var(--pf-secondary-color-400);
581
+ --pf-button-action-hover-background-color: var(--pf-secondary-color-500);
582
+ --pf-button-action-hover-border-color: var(--pf-secondary-color-500);
583
+ --pf-button-action-hover-color: var(--pf-white-color);
584
+ --pf-button-action-disabled-border-color: var(--pf-secondary-color-400);
585
585
  --pf-button-action-disabled-color: var(--pf-primary-color-300);
586
- --pf-button-destructive-background-color: var(--pf-error-color);
586
+ --pf-button-destructive-background-color: var(--pf-red-color-400);
587
587
  --pf-button-destructive-color: var(--pf-white-color);
588
- --pf-button-destructive-hover-background-color: var(--pf-red-color-400);
588
+ --pf-button-destructive-hover-background-color: var(--pf-red-color-500);
589
589
  --pf-button-destructive-hover-color: var(--pf-white-color);
590
590
  --pf-button-destructive-focus-background-color: var(--pf-red-color);
591
591
  --pf-button-destructive-focus-color: var(--pf-white-color);
592
- --pf-button-destructive-disabled-background-color: var(--pf-red-color-300);
592
+ --pf-button-destructive-disabled-background-color: var(--pf-red-color-100);
593
593
  --pf-button-destructive-disabled-color: var(--pf-white-color);
594
594
  --pf-button-soft-color: var(--pf-primary-color-300);
595
595
  --pf-button-soft-border-color: var(--pf-primary-color-300);
@@ -1389,11 +1389,11 @@ form {
1389
1389
  --pf-form-input-color: var(--pf-gray-color);
1390
1390
  --pf-form-input-placeholder-color: var(--pf-gray-color-300);
1391
1391
  --pf-form-input-help-color: var(--pf-gray-color-400);
1392
- --pf-form-input-hover-background-color: var(--pf-gray-color-100);
1393
- --pf-form-input-focus-background-color: var(--pf-gray-color-100);
1392
+ --pf-form-input-hover-background-color: var(--pf-gray-color-900);
1393
+ --pf-form-input-focus-background-color: var(--pf-gray-color-950);
1394
1394
  --pf-form-input-focus-border-color: var(--pf-secondary-color-800);
1395
1395
  --pf-form-input-focus-outline-color: var(--pf-primary-color);
1396
- --pf-form-input-disabled-background-color: var(--pf-gray-color-100);
1396
+ --pf-form-input-disabled-background-color: var(--pf-gray-color-700);
1397
1397
  --pf-form-input-disabled-border-color: var(--pf-gray-color-100);
1398
1398
  --pf-form-input-disabled-color: var(--pf-gray-color-400);
1399
1399
  }
@@ -1555,9 +1555,9 @@ form {
1555
1555
 
1556
1556
  :root [data-theme=light] {
1557
1557
  --pf-select-indicator-color: var(--pf-gray-color);
1558
- --pf-select-option-selected-color: var(--pf-primary-color-100);
1558
+ --pf-select-option-selected-color: var(--pf-gray-color-950);
1559
1559
  --pf-select-option-color: var(--pf-gray-color);
1560
- --pf-select-option-hover-color: var(--pf-primary-color-100);
1560
+ --pf-select-option-hover-color: var(--pf-gray-color-900);
1561
1561
  }
1562
1562
 
1563
1563
  :root [data-theme=dark],
@@ -1727,21 +1727,21 @@ form {
1727
1727
  margin-left: var(--pf-margin-2);
1728
1728
  }
1729
1729
 
1730
- :root,
1731
- :root [data-theme=light],
1732
- :root [data-theme=dark] {
1733
- --pf-skeleton-color-one: var(--pf-gray-color-200);
1734
- --pf-skeleton-color-two: var(--pf-gray-color-100);
1730
+ :root [data-theme=light] {
1731
+ --pf-skeleton-color-one: var(--pf-gray-color-800);
1732
+ --pf-skeleton-color-two: var(--pf-gray-color-950);
1733
+ --pf-skeleton-background-color: var(--pf-gray-color-700);
1735
1734
  }
1736
1735
 
1737
1736
  :root [data-theme=dark] {
1738
1737
  --pf-skeleton-color-one: var(--pf-primary-color-500);
1739
1738
  --pf-skeleton-color-two: var(--pf-primary-color-400);
1739
+ --pf-skeleton-background-color: var(--pf-gray-color-900);
1740
1740
  }
1741
1741
 
1742
1742
  .skeleton {
1743
1743
  border-radius: var(--pf-rounded);
1744
- background-color: var(--pf-gray-color-100);
1744
+ background-color: var(--pf-skeleton-background-color);
1745
1745
  opacity: 0.7;
1746
1746
  animation: skeleton-loading 1s linear infinite alternate;
1747
1747
  display: flex;
@@ -1810,10 +1810,10 @@ form {
1810
1810
  }
1811
1811
 
1812
1812
  :root [data-theme=light] {
1813
- --pf-menu-item-hover-color: var(--pf-primary-color-100);
1813
+ --pf-menu-item-hover-color: var(--pf-gray-color-950);
1814
1814
  --pf-menu-item-background-color: var(--pf-white-color);
1815
1815
  --pf-menu-item-color: var(--pf-gray-color);
1816
- --pf-menu-item-focus-color: var(--pf-primary-color-300);
1816
+ --pf-menu-item-focus-color: var(--pf-gray-color-900);
1817
1817
  }
1818
1818
 
1819
1819
  :root [data-theme=dark],
@@ -1957,7 +1957,7 @@ form {
1957
1957
  }
1958
1958
 
1959
1959
  :root [data-theme=light] {
1960
- --pf-badge-background-color: var(--pf-white-color);
1960
+ --pf-badge-background-color: var(--pf-primary-color-950);
1961
1961
  --pf-badge-border-color: var(--pf-border-color);
1962
1962
  }
1963
1963
 
@@ -2658,13 +2658,14 @@ form {
2658
2658
  width: 100%;
2659
2659
  }
2660
2660
 
2661
- :root,
2662
- :root [data-theme=light],
2663
- :root [data-theme=dark] {
2664
- --toastify-color-dark: var(--pf-background-color-light);
2665
- --toastify-color-progress-dark: var(--pf-primary-color-400);
2661
+ :root [data-theme=light] {
2662
+ --toastify-color-dark: var(--pf-white-color);
2663
+ --toastify-color-progress-dark: var(--pf-primary-color-200);
2666
2664
  --toastify-icon-color-success: var(--pf-success-color);
2667
2665
  --toastify-color-progress-bgo: 0.2;
2666
+ --toastify-text-color-dark: var(
2667
+ --pf-gray-color-600
2668
+ );
2668
2669
  }
2669
2670
 
2670
2671
  :root [data-theme=dark] {
@@ -2672,6 +2673,25 @@ form {
2672
2673
  --toastify-color-progress-dark: var(--pf-primary-color-400);
2673
2674
  --toastify-icon-color-success: var(--pf-success-color);
2674
2675
  --toastify-color-progress-bgo: 0.2;
2676
+ --toastify-text-color-dark: var(--pf-font-color);
2677
+ }
2678
+
2679
+ :root [data-theme=light] {
2680
+ --pf-stepper-background-color: var(--pf-gray-color-900);
2681
+ --pf-stepper-legend-background-color: var(--pf-gray-color-950);
2682
+ --pf-stepper-legend-circle-background-color: var(--pf-gray-color-800);
2683
+ --pf-stepper-legend-circle-text-color: var(--pf-white-color);
2684
+ --pf-stepper-legend-line-background-color: var(--pf-gray-color-800);
2685
+ --pf-stepper-legend-step-text-color: var(--pf-white-color);
2686
+ --pf-stepper-legend-step-disabled-text-color: var(--pf-gray-color-800);
2687
+ --pf-stepper-legend-circle-completed-background-color: var(--pf-secondary-color);
2688
+ --pf-stepper-legend-circle-completed-text-color: var(--pf-white-color);
2689
+ --pf-stepper-legend-line-completed-background-color: var(--pf-secondary-color);
2690
+ --pf-stepper-legend-step-completed-text-color: var(--pf-secondary-color);
2691
+ --pf-stepper-legend-circle-current-background-color: var(--pf-secondary-color);
2692
+ --pf-stepper-legend-circle-current-border-color: var(--pf-white-color);
2693
+ --pf-stepper-legend-circle-current-text-color: var(--pf-white-color);
2694
+ --pf-stepper-legend-step-current-text-color: var(--pf-secondary-color);
2675
2695
  }
2676
2696
 
2677
2697
  :root [data-theme=dark] {
@@ -2684,10 +2704,11 @@ form {
2684
2704
  --pf-stepper-legend-step-disabled-text-color: var(--pf-tertiary-color-450);
2685
2705
  --pf-stepper-legend-circle-completed-background-color: var(--pf-secondary-color);
2686
2706
  --pf-stepper-legend-circle-completed-text-color: var(--pf-white-color);
2707
+ --pf-stepper-legend-step-completed-text-color: var(--pf-secondary-color);
2687
2708
  --pf-stepper-legend-line-completed-background-color: var(--pf-secondary-color);
2688
2709
  --pf-stepper-legend-circle-current-background-color: var(--pf-secondary-color);
2689
2710
  --pf-stepper-legend-circle-current-border-color: var(--pf-white-color);
2690
- --pf-stepper-legend-step-current-text-color: var(--pf-white-color);
2711
+ --pf-stepper-legend-circle-current-text-color: var(--pf-white-color);
2691
2712
  --pf-stepper-legend-step-current-text-color: var(--pf-secondary-color);
2692
2713
  }
2693
2714
 
@@ -2744,6 +2765,7 @@ form {
2744
2765
  }
2745
2766
  .stepper .stepper-legend-circle.current {
2746
2767
  background-color: var(--pf-stepper-legend-circle-current-background-color);
2768
+ color: var(--pf-stepper-legend-circle-current-text-color);
2747
2769
  }
2748
2770
  .stepper .stepper-legend-line {
2749
2771
  width: 1px;
@@ -2764,6 +2786,9 @@ form {
2764
2786
  margin-left: var(--pf-margin-2);
2765
2787
  color: var(--pf-stepper-legend-step-text-color);
2766
2788
  }
2789
+ .stepper .stepper-legend-step--completed-step .btn {
2790
+ color: var(--pf-stepper-legend-step-completed-text-color);
2791
+ }
2767
2792
  .stepper .stepper-legend-step--current-step .btn {
2768
2793
  color: var(--pf-stepper-legend-step-current-text-color);
2769
2794
  text-decoration: underline;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@indico-data/design-system",
3
- "version": "2.59.1",
3
+ "version": "2.60.0",
4
4
  "description": "",
5
5
  "author": "",
6
6
  "main": "lib/index.js",
@@ -15,7 +15,7 @@
15
15
  "dev": "storybook dev -p 6006",
16
16
  "lint": "yarn eslint src --ext ts,js,tsx,jsx",
17
17
  "build": "rollup -c",
18
- "build storybook": "storybook build",
18
+ "build-storybook": "storybook build",
19
19
  "test-storybook": "test-storybook",
20
20
  "test": "DEBUG_PRINT_LIMIT=10000 jest",
21
21
  "test:watch": "DEBUG_PRINT_LIMIT=10000 jest --watch",
package/src/components/badge/styles/Badge.scss CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  // Light Theme Specific Variables
7
7
  :root [data-theme='light'] {
8
- --pf-badge-background-color: var(--pf-white-color);
8
+ --pf-badge-background-color: var(--pf-primary-color-950);
9
9
  --pf-badge-border-color: var(--pf-border-color);
10
10
  }
11
11
 
package/src/components/button/styles/_variables.scss CHANGED
@@ -31,41 +31,41 @@
31
31
  // Light Theme Specific Variables
32
32
  :root [data-theme='light'] {
33
33
  // solid colors
34
- --pf-button-solid-background-color: var(--pf-primary-color);
34
+ --pf-button-solid-background-color: var(--pf-secondary-color-400);
35
35
  --pf-button-solid-color: var(--pf-white-color);
36
- --pf-button-solid-hover-background-color: var(--pf-primary-color-400);
37
- --pf-button-solid-focus-background-color: var(--pf-primary-color);
36
+ --pf-button-solid-hover-background-color: var(--pf-secondary-color-500);
37
+ --pf-button-solid-focus-background-color: var(--pf-secondary-color-400);
38
38
  --pf-button-solid-disabled-background-color: var(--pf-primary-color-300);
39
- --pf-button-solid-disabled-color: var(--pf-gray-color-100);
39
+ --pf-button-solid-disabled-color: var(--pf-gray-color-800);
40
40
 
41
41
  // outline colors
42
- --pf-button-outline-color: var(--pf-primary-color);
43
- --pf-button-outline-border-color: var(--pf-primary-color);
44
- --pf-button-outline-hover-color: var(--pf-primary-color-400);
42
+ --pf-button-outline-color: var(--pf-secondary-color-400);
43
+ --pf-button-outline-border-color: var(--pf-secondary-color-400);
44
+ --pf-button-outline-hover-color: var(--pf-secondary-color-500);
45
45
  --pf-button-outline-disabled-color: var(--pf-primary-color-300);
46
46
 
47
47
  // link
48
- --pf-button-link-color: var(--pf-primary-color);
49
- --pf-button-link-hover-color: var(--pf-primary-color-400);
48
+ --pf-button-link-color: var(--pf-secondary-color-400);
49
+ --pf-button-link-hover-color: var(--pf-secondary-color-500);
50
50
  --pf-button-link-disabled-color: var(--pf-primary-color-300);
51
51
 
52
52
  // action
53
- --pf-button-action-color: var(--pf-primary-color);
54
- --pf-button-action-border-color: var(--pf-primary-color);
55
- --pf-button-action-hover-background-color: var(--pf-primary-color-200);
56
- --pf-button-action-hover-border-color: var(--pf-primary-color-400);
57
- --pf-button-action-hover-color: var(--pf-primary-color);
58
- --pf-button-action-disabled-border-color: var(--pf-primary-color-300);
53
+ --pf-button-action-color: var(--pf-secondary-color-400);
54
+ --pf-button-action-border-color: var(--pf-secondary-color-400);
55
+ --pf-button-action-hover-background-color: var(--pf-secondary-color-500);
56
+ --pf-button-action-hover-border-color: var(--pf-secondary-color-500);
57
+ --pf-button-action-hover-color: var(--pf-white-color);
58
+ --pf-button-action-disabled-border-color: var(--pf-secondary-color-400);
59
59
  --pf-button-action-disabled-color: var(--pf-primary-color-300);
60
60
 
61
61
  // destructive
62
- --pf-button-destructive-background-color: var(--pf-error-color);
62
+ --pf-button-destructive-background-color: var(--pf-red-color-400);
63
63
  --pf-button-destructive-color: var(--pf-white-color);
64
- --pf-button-destructive-hover-background-color: var(--pf-red-color-400);
64
+ --pf-button-destructive-hover-background-color: var(--pf-red-color-500);
65
65
  --pf-button-destructive-hover-color: var(--pf-white-color);
66
66
  --pf-button-destructive-focus-background-color: var(--pf-red-color);
67
67
  --pf-button-destructive-focus-color: var(--pf-white-color);
68
- --pf-button-destructive-disabled-background-color: var(--pf-red-color-300);
68
+ --pf-button-destructive-disabled-background-color: var(--pf-red-color-100);
69
69
  --pf-button-destructive-disabled-color: var(--pf-white-color);
70
70
 
71
71
  // soft
package/src/components/forms/form/styles/Form.scss CHANGED
@@ -11,11 +11,11 @@ form {
11
11
  --pf-form-input-color: var(--pf-gray-color);
12
12
  --pf-form-input-placeholder-color: var(--pf-gray-color-300);
13
13
  --pf-form-input-help-color: var(--pf-gray-color-400);
14
- --pf-form-input-hover-background-color: var(--pf-gray-color-100);
15
- --pf-form-input-focus-background-color: var(--pf-gray-color-100);
14
+ --pf-form-input-hover-background-color: var(--pf-gray-color-900);
15
+ --pf-form-input-focus-background-color: var(--pf-gray-color-950);
16
16
  --pf-form-input-focus-border-color: var(--pf-secondary-color-800);
17
17
  --pf-form-input-focus-outline-color: var(--pf-primary-color);
18
- --pf-form-input-disabled-background-color: var(--pf-gray-color-100);
18
+ --pf-form-input-disabled-background-color: var(--pf-gray-color-700);
19
19
  --pf-form-input-disabled-border-color: var(--pf-gray-color-100);
20
20
  --pf-form-input-disabled-color: var(--pf-gray-color-400);
21
21
  }
package/src/components/forms/select/styles/Select.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  // Light Theme Specific Variables
2
2
  :root [data-theme='light'] {
3
3
  --pf-select-indicator-color: var(--pf-gray-color);
4
- --pf-select-option-selected-color: var(--pf-primary-color-100);
4
+ --pf-select-option-selected-color: var(--pf-gray-color-950);
5
5
  --pf-select-option-color: var(--pf-gray-color);
6
- --pf-select-option-hover-color: var(--pf-primary-color-100);
6
+ --pf-select-option-hover-color: var(--pf-gray-color-900);
7
7
  }
8
8
 
9
9
  // Dark Theme and Default Variables
package/src/components/menu/styles/_variables.scss CHANGED
@@ -4,10 +4,10 @@
4
4
 
5
5
  // Light Theme Specific Variables
6
6
  :root [data-theme='light'] {
7
- --pf-menu-item-hover-color: var(--pf-primary-color-100);
7
+ --pf-menu-item-hover-color: var(--pf-gray-color-950);
8
8
  --pf-menu-item-background-color: var(--pf-white-color);
9
9
  --pf-menu-item-color: var(--pf-gray-color);
10
- --pf-menu-item-focus-color: var(--pf-primary-color-300);
10
+ --pf-menu-item-focus-color: var(--pf-gray-color-900);
11
11
  }
12
12
 
13
13
  // Dark Theme Specific Variables
package/src/components/skeleton/styles/Skeleton.scss CHANGED
@@ -1,20 +1,20 @@
1
- // Common Variables
2
- :root,
3
- :root [data-theme='light'],
4
- :root [data-theme='dark'] {
5
- --pf-skeleton-color-one: var(--pf-gray-color-200);
6
- --pf-skeleton-color-two: var(--pf-gray-color-100);
1
+ // Light Theme Specific Variables
2
+ :root [data-theme='light'] {
3
+ --pf-skeleton-color-one: var(--pf-gray-color-800);
4
+ --pf-skeleton-color-two: var(--pf-gray-color-950);
5
+ --pf-skeleton-background-color: var(--pf-gray-color-700);
7
6
  }
8
7
 
9
8
  // Dark Theme Specific Variables
10
9
  :root [data-theme='dark'] {
11
10
  --pf-skeleton-color-one: var(--pf-primary-color-500);
12
11
  --pf-skeleton-color-two: var(--pf-primary-color-400);
12
+ --pf-skeleton-background-color: var(--pf-gray-color-900);
13
13
  }
14
14
 
15
15
  .skeleton {
16
16
  border-radius: var(--pf-rounded);
17
- background-color: var(--pf-gray-color-100);
17
+ background-color: var(--pf-skeleton-background-color);
18
18
  opacity: 0.7;
19
19
  animation: skeleton-loading 1s linear infinite alternate;
20
20
  display: flex;
package/src/components/stepper/styles/Stepper.scss CHANGED
@@ -1,11 +1,25 @@
1
- // Common Variables
2
- :root,
3
- :root [data-theme='light'],
4
- :root [data-theme='dark'] {
5
- }
6
-
7
1
  // Light Theme Specific Variables
8
2
  :root [data-theme='light'] {
3
+ // Stepper Legend
4
+ --pf-stepper-background-color: var(--pf-gray-color-900);
5
+ --pf-stepper-legend-background-color: var(--pf-gray-color-950);
6
+ // Default Step
7
+ --pf-stepper-legend-circle-background-color: var(--pf-gray-color-800);
8
+ --pf-stepper-legend-circle-text-color: var(--pf-white-color);
9
+ --pf-stepper-legend-line-background-color: var(--pf-gray-color-800);
10
+ --pf-stepper-legend-step-text-color: var(--pf-white-color);
11
+ --pf-stepper-legend-step-disabled-text-color: var(--pf-gray-color-800);
12
+
13
+ // Completed Step
14
+ --pf-stepper-legend-circle-completed-background-color: var(--pf-secondary-color);
15
+ --pf-stepper-legend-circle-completed-text-color: var(--pf-white-color);
16
+ --pf-stepper-legend-line-completed-background-color: var(--pf-secondary-color);
17
+ --pf-stepper-legend-step-completed-text-color: var(--pf-secondary-color);
18
+ // Current Step
19
+ --pf-stepper-legend-circle-current-background-color: var(--pf-secondary-color);
20
+ --pf-stepper-legend-circle-current-border-color: var(--pf-white-color);
21
+ --pf-stepper-legend-circle-current-text-color: var(--pf-white-color);
22
+ --pf-stepper-legend-step-current-text-color: var(--pf-secondary-color);
9
23
  }
10
24
 
11
25
  // Dark Theme Specific Variables
@@ -23,11 +37,12 @@
23
37
  // Completed Step
24
38
  --pf-stepper-legend-circle-completed-background-color: var(--pf-secondary-color);
25
39
  --pf-stepper-legend-circle-completed-text-color: var(--pf-white-color);
40
+ --pf-stepper-legend-step-completed-text-color: var(--pf-secondary-color);
26
41
  --pf-stepper-legend-line-completed-background-color: var(--pf-secondary-color);
27
42
  // Current Step
28
43
  --pf-stepper-legend-circle-current-background-color: var(--pf-secondary-color);
29
44
  --pf-stepper-legend-circle-current-border-color: var(--pf-white-color);
30
- --pf-stepper-legend-step-current-text-color: var(--pf-white-color);
45
+ --pf-stepper-legend-circle-current-text-color: var(--pf-white-color);
31
46
  --pf-stepper-legend-step-current-text-color: var(--pf-secondary-color);
32
47
  }
33
48
 
@@ -43,8 +58,7 @@
43
58
  flex-direction: column;
44
59
  justify-content: space-between;
45
60
  height: 100%;
46
- .stepper-content {
47
- }
61
+
48
62
  .stepper-actions {
49
63
  display: flex;
50
64
  justify-content: end;
@@ -91,6 +105,7 @@
91
105
 
92
106
  &.current {
93
107
  background-color: var(--pf-stepper-legend-circle-current-background-color);
108
+ color: var(--pf-stepper-legend-circle-current-text-color);
94
109
  }
95
110
  }
96
111
 
@@ -115,6 +130,12 @@
115
130
  color: var(--pf-stepper-legend-step-text-color);
116
131
  }
117
132
 
133
+ &--completed-step {
134
+ .btn {
135
+ color: var(--pf-stepper-legend-step-completed-text-color);
136
+ }
137
+ }
138
+
118
139
  &--current-step {
119
140
  .btn {
120
141
  color: var(--pf-stepper-legend-step-current-text-color);
package/src/components/table/Table.mdx CHANGED
@@ -3,7 +3,7 @@ import * as TableStories from './Table.stories';
3
3
 
4
4
 
5
5
 
6
- <Meta title="Layout/Table" name="Table" />
6
+ <Meta title="Layout/Table(Use Tanstack Table Instead)" name="Table" />
7
7
 
8
8
  # Table
9
9
 
package/src/components/table/Table.stories.tsx CHANGED
@@ -8,7 +8,7 @@ import { useState } from 'react';
8
8
  registerFontAwesomeIcons(...Object.values(indiconDefinitions));
9
9
 
10
10
  const meta: Meta = {
11
- title: 'Layout/Table',
11
+ title: 'Layout/Table(Use Tanstack Table Instead)',
12
12
  component: Table,
13
13
  argTypes: {
14
14
  columns: {
package/src/components/toast/styles/Toast.scss CHANGED
@@ -1,11 +1,12 @@
1
- // Common Variables
2
- :root,
3
- :root [data-theme='light'],
4
- :root [data-theme='dark'] {
5
- --toastify-color-dark: var(--pf-background-color-light);
6
- --toastify-color-progress-dark: var(--pf-primary-color-400);
1
+ // Light Theme Specific Variables
2
+ :root [data-theme='light'] {
3
+ --toastify-color-dark: var(--pf-white-color);
4
+ --toastify-color-progress-dark: var(--pf-primary-color-200);
7
5
  --toastify-icon-color-success: var(--pf-success-color);
8
6
  --toastify-color-progress-bgo: 0.2;
7
+ --toastify-text-color-dark: var(
8
+ --pf-gray-color-600
9
+ ); // This is accurate since the library uses css-in-js but we use data-theme instead.
9
10
  }
10
11
 
11
12
  // Dark Theme Specific Variables
@@ -14,4 +15,5 @@
14
15
  --toastify-color-progress-dark: var(--pf-primary-color-400);
15
16
  --toastify-icon-color-success: var(--pf-success-color);
16
17
  --toastify-color-progress-bgo: 0.2;
18
+ --toastify-text-color-dark: var(--pf-font-color);
17
19
  }
package/src/styles/globals.scss CHANGED
@@ -3,9 +3,9 @@
3
3
  // ***********************************************************************************************************************************
4
4
  --pf-white-color: #ffffff;
5
5
  --pf-black-color: #000000;
6
- --pf-background-color-light: var(--pf-gray-color-100);
6
+ --pf-background-color-light: var(--pf-gray-color-900);
7
7
  --pf-background-color: var(--pf-white-color);
8
- --pf-background-color-dark: var(--pf-gray-color-300);
8
+ --pf-background-color-dark: var(--pf-gray-color-100);
9
9
  --pf-background-secondary-color-light: var(--pf-secondary-color-300);
10
10
  --pf-background-color-secondary: var(--pf-secondary-color-500);
11
11
  --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
package/src/styles/variables/_borders.scss CHANGED
@@ -16,7 +16,7 @@
16
16
  }
17
17
 
18
18
  :root [data-theme='light'] {
19
- --pf-border-color: var(--pf-gray-color-300);
19
+ --pf-border-color: var(--pf-gray-color-800);
20
20
  --pf-border-color-light: var(--pf-gray-color-100);
21
21
  --pf-horizontal-line-color: var(--pf-gray-color-200);
22
22
  }