@indico-data/design-system 2.45.0 → 2.45.2

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 (13) hide show
  1. package/lib/index.css +5 -4
  2. package/lib/index.esm.css +5 -4
  3. package/lib/index.esm.js +8 -2
  4. package/lib/index.esm.js.map +1 -1
  5. package/lib/index.js +8 -2
  6. package/lib/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/table/styles/Table.scss +1 -1
  9. package/src/components/table/styles/_variables.scss +1 -0
  10. package/src/legacy/components/modals/ModalBase/ModalBase.stories.tsx +2 -4
  11. package/src/legacy/components/modals/ModalBase/ModalBase.styles.tsx +8 -2
  12. package/src/styles/globals.scss +2 -3
  13. package/src/styles/variables/_borders.scss +1 -0
package/lib/index.css CHANGED
@@ -284,6 +284,7 @@
284
284
  :root {
285
285
  --pf-horizontal-line-color: var(--pf-tertiary-color-800);
286
286
  --pf-border-color: var(--pf-tertiary-color-800);
287
+ --pf-border-color-medium: var(--pf-tertiary-color-500);
287
288
  --pf-border-color-light: var(--pf-white-color-100);
288
289
  }
289
290
 
@@ -397,12 +398,12 @@
397
398
  --pf-white-color: #ffffff;
398
399
  --pf-black-color: #000000;
399
400
  --pf-background-color-light: var(--pf-primary-color);
400
- --pf-background-color: var(--pf-primary-color-600);
401
+ --pf-background-color: var(--pf-primary-color-800);
401
402
  --pf-background-color-dark: var(--pf-primary-color-900);
402
403
  --pf-background-secondary-color-light: var(--pf-secondary-color-300);
403
404
  --pf-background-color-secondary: var(--pf-secondary-color-500);
404
405
  --pf-background-color-secondary-dark: var(--pf-secondary-color-950);
405
- --pf-font-color: var(--pf-gray-color);
406
+ --pf-font-color: var(--pf-white-color);
406
407
  --pf-font-color-emphasis: var(--pf-gray-color-300);
407
408
  --pf-font-color-light: var(--pf-gray-color-100);
408
409
  --pf-font-color-light-header: var(--pf-primary-color-100);
@@ -432,7 +433,6 @@ a:hover,
432
433
 
433
434
  .theme {
434
435
  background-color: var(--pf-background-color);
435
- color: var(--pf-font-color);
436
436
  }
437
437
 
438
438
  :root,
@@ -795,6 +795,7 @@ a:hover,
795
795
  --pf-table-stripe-color: var(--pf-primary-color-700);
796
796
  --pf-table-hover-color: var(--pf-primary-color-600);
797
797
  --pf-table-disabled-color: var(--pf-gray-color-900);
798
+ --pf-table-disabled-button-color: var(--pf-primary-color-100);
798
799
  --pf-table-checked-color: var(--pf-secondary-color-100);
799
800
  --pf-table-highlighted-color: var(--pf-primary-color);
800
801
  --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
@@ -858,7 +859,7 @@ a:hover,
858
859
  fill: var(--pf-table-font-color);
859
860
  }
860
861
  .table button:disabled svg {
861
- fill: var(--pf-table-disabled-color);
862
+ fill: var(--pf-table-disabled-button-color);
862
863
  }
863
864
  .table .rdt_TableHeader {
864
865
  border-radius: var(--pf-rounded) 0;
package/lib/index.esm.css CHANGED
@@ -284,6 +284,7 @@
284
284
  :root {
285
285
  --pf-horizontal-line-color: var(--pf-tertiary-color-800);
286
286
  --pf-border-color: var(--pf-tertiary-color-800);
287
+ --pf-border-color-medium: var(--pf-tertiary-color-500);
287
288
  --pf-border-color-light: var(--pf-white-color-100);
288
289
  }
289
290
 
@@ -397,12 +398,12 @@
397
398
  --pf-white-color: #ffffff;
398
399
  --pf-black-color: #000000;
399
400
  --pf-background-color-light: var(--pf-primary-color);
400
- --pf-background-color: var(--pf-primary-color-600);
401
+ --pf-background-color: var(--pf-primary-color-800);
401
402
  --pf-background-color-dark: var(--pf-primary-color-900);
402
403
  --pf-background-secondary-color-light: var(--pf-secondary-color-300);
403
404
  --pf-background-color-secondary: var(--pf-secondary-color-500);
404
405
  --pf-background-color-secondary-dark: var(--pf-secondary-color-950);
405
- --pf-font-color: var(--pf-gray-color);
406
+ --pf-font-color: var(--pf-white-color);
406
407
  --pf-font-color-emphasis: var(--pf-gray-color-300);
407
408
  --pf-font-color-light: var(--pf-gray-color-100);
408
409
  --pf-font-color-light-header: var(--pf-primary-color-100);
@@ -432,7 +433,6 @@ a:hover,
432
433
 
433
434
  .theme {
434
435
  background-color: var(--pf-background-color);
435
- color: var(--pf-font-color);
436
436
  }
437
437
 
438
438
  :root,
@@ -795,6 +795,7 @@ a:hover,
795
795
  --pf-table-stripe-color: var(--pf-primary-color-700);
796
796
  --pf-table-hover-color: var(--pf-primary-color-600);
797
797
  --pf-table-disabled-color: var(--pf-gray-color-900);
798
+ --pf-table-disabled-button-color: var(--pf-primary-color-100);
798
799
  --pf-table-checked-color: var(--pf-secondary-color-100);
799
800
  --pf-table-highlighted-color: var(--pf-primary-color);
800
801
  --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
@@ -858,7 +859,7 @@ a:hover,
858
859
  fill: var(--pf-table-font-color);
859
860
  }
860
861
  .table button:disabled svg {
861
- fill: var(--pf-table-disabled-color);
862
+ fill: var(--pf-table-disabled-button-color);
862
863
  }
863
864
  .table .rdt_TableHeader {
864
865
  border-radius: var(--pf-rounded) 0;
package/lib/index.esm.js CHANGED
@@ -5904,9 +5904,15 @@ function ModalAdapter(props) {
5904
5904
  const { className } = props;
5905
5905
  const contentClassName = `${className}__content`;
5906
5906
  const overlayClassName = `${className}__overlay`;
5907
- return (jsx(ReactModal, Object.assign({}, props, { portalClassName: className, className: contentClassName, overlayClassName: overlayClassName, closeTimeoutMS: 120, appElement: document.getElementById(props.node || 'root'), children: props.children })));
5907
+ return (jsx(ReactModal, Object.assign({}, props, { portalClassName: className, className: contentClassName, overlayClassName: overlayClassName, closeTimeoutMS: 120, appElement: document.getElementById(props.node || 'root'), children: jsx("div", { className: "modal-content", children: props.children }) })));
5908
5908
  }
5909
5909
  const StyledModalBase = n(ModalAdapter) `
5910
+ .modal-content {
5911
+ background-color: var(--pf-primary-color-600);
5912
+ padding: var(--pf-padding-4);
5913
+ border-radius: var(--pf-rounded-lg);
5914
+ }
5915
+
5910
5916
  .${(props) => props.className}__content {
5911
5917
  position: absolute;
5912
5918
  top: 70px;
@@ -5935,7 +5941,7 @@ const StyledModalBase = n(ModalAdapter) `
5935
5941
 
5936
5942
  .ReactModal__Overlay {
5937
5943
  opacity: 0;
5938
-
5944
+ background-color: rgba(0, 0, 0, 0.5);
5939
5945
  transition: opacity 120ms ease-in-out;
5940
5946
  }
5941
5947