@indico-data/design-system 2.44.0 → 2.45.1

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 (7) hide show
  1. package/lib/index.css +11 -9
  2. package/lib/index.esm.css +11 -9
  3. package/package.json +1 -1
  4. package/src/components/table/styles/Table.scss +1 -1
  5. package/src/components/table/styles/_variables.scss +4 -2
  6. package/src/styles/globals.scss +4 -5
  7. package/src/styles/variables/_borders.scss +2 -1
package/lib/index.css CHANGED
@@ -282,8 +282,9 @@
282
282
 
283
283
  :root [data-theme=dark],
284
284
  :root {
285
- --pf-horizontal-line-color: var(--pf-primary-color-200);
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
 
@@ -396,13 +397,13 @@
396
397
  :root {
397
398
  --pf-white-color: #ffffff;
398
399
  --pf-black-color: #000000;
399
- --pf-background-color-light: var(--pf-primary-color-300);
400
- --pf-background-color: var(--pf-primary-color-600);
400
+ --pf-background-color-light: var(--pf-primary-color);
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
- --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
405
- --pf-font-color: var(--pf-gray-color);
405
+ --pf-background-color-secondary-dark: var(--pf-secondary-color-950);
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,9 +795,11 @@ 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-checked-color: red;
799
- --pf-table-highlighted-color: var(--pf-primary-color-400);
798
+ --pf-table-disabled-button-color: var(--pf-primary-color-100);
799
+ --pf-table-checked-color: var(--pf-secondary-color-100);
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);
802
+ --pf-table-font-size: var(--pf-font-size-body2);
801
803
  }
802
804
 
803
805
  .table-loading {
@@ -857,7 +859,7 @@ a:hover,
857
859
  fill: var(--pf-table-font-color);
858
860
  }
859
861
  .table button:disabled svg {
860
- fill: var(--pf-table-disabled-color);
862
+ fill: var(--pf-table-disabled-button-color);
861
863
  }
862
864
  .table .rdt_TableHeader {
863
865
  border-radius: var(--pf-rounded) 0;
package/lib/index.esm.css CHANGED
@@ -282,8 +282,9 @@
282
282
 
283
283
  :root [data-theme=dark],
284
284
  :root {
285
- --pf-horizontal-line-color: var(--pf-primary-color-200);
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
 
@@ -396,13 +397,13 @@
396
397
  :root {
397
398
  --pf-white-color: #ffffff;
398
399
  --pf-black-color: #000000;
399
- --pf-background-color-light: var(--pf-primary-color-300);
400
- --pf-background-color: var(--pf-primary-color-600);
400
+ --pf-background-color-light: var(--pf-primary-color);
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
- --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
405
- --pf-font-color: var(--pf-gray-color);
405
+ --pf-background-color-secondary-dark: var(--pf-secondary-color-950);
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,9 +795,11 @@ 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-checked-color: red;
799
- --pf-table-highlighted-color: var(--pf-primary-color-400);
798
+ --pf-table-disabled-button-color: var(--pf-primary-color-100);
799
+ --pf-table-checked-color: var(--pf-secondary-color-100);
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);
802
+ --pf-table-font-size: var(--pf-font-size-body2);
801
803
  }
802
804
 
803
805
  .table-loading {
@@ -857,7 +859,7 @@ a:hover,
857
859
  fill: var(--pf-table-font-color);
858
860
  }
859
861
  .table button:disabled svg {
860
- fill: var(--pf-table-disabled-color);
862
+ fill: var(--pf-table-disabled-button-color);
861
863
  }
862
864
  .table .rdt_TableHeader {
863
865
  border-radius: var(--pf-rounded) 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@indico-data/design-system",
3
- "version": "2.44.0",
3
+ "version": "2.45.1",
4
4
  "description": "",
5
5
  "author": "",
6
6
  "main": "lib/index.js",
package/src/components/table/styles/Table.scss CHANGED
@@ -61,7 +61,7 @@
61
61
 
62
62
  &:disabled {
63
63
  svg {
64
- fill: var(--pf-table-disabled-color);
64
+ fill: var(--pf-table-disabled-button-color);
65
65
  }
66
66
  }
67
67
  }
package/src/components/table/styles/_variables.scss CHANGED
@@ -22,7 +22,9 @@
22
22
  --pf-table-stripe-color: var(--pf-primary-color-700);
23
23
  --pf-table-hover-color: var(--pf-primary-color-600);
24
24
  --pf-table-disabled-color: var(--pf-gray-color-900);
25
- --pf-table-checked-color: red;
26
- --pf-table-highlighted-color: var(--pf-primary-color-400);
25
+ --pf-table-disabled-button-color: var(--pf-primary-color-100);
26
+ --pf-table-checked-color: var(--pf-secondary-color-100);
27
+ --pf-table-highlighted-color: var(--pf-primary-color);
27
28
  --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
29
+ --pf-table-font-size: var(--pf-font-size-body2);
28
30
  }
package/src/styles/globals.scss CHANGED
@@ -29,16 +29,16 @@
29
29
  // ***********************************************************************************************************************************
30
30
  --pf-white-color: #ffffff;
31
31
  --pf-black-color: #000000;
32
- --pf-background-color-light: var(--pf-primary-color-300);
33
- --pf-background-color: var(--pf-primary-color-600);
32
+ --pf-background-color-light: var(--pf-primary-color);
33
+ --pf-background-color: var(--pf-primary-color-800);
34
34
  --pf-background-color-dark: var(--pf-primary-color-900);
35
35
  --pf-background-secondary-color-light: var(--pf-secondary-color-300);
36
36
  --pf-background-color-secondary: var(--pf-secondary-color-500);
37
- --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
37
+ --pf-background-color-secondary-dark: var(--pf-secondary-color-950);
38
38
 
39
39
  // Fonts
40
40
  // ***********************************************************************************************************************************
41
- --pf-font-color: var(--pf-gray-color);
41
+ --pf-font-color: var(--pf-white-color);
42
42
  --pf-font-color-emphasis: var(--pf-gray-color-300);
43
43
  --pf-font-color-light: var(--pf-gray-color-100);
44
44
  --pf-font-color-light-header: var(--pf-primary-color-100);
@@ -73,5 +73,4 @@ a,
73
73
 
74
74
  .theme {
75
75
  background-color: var(--pf-background-color);
76
- color: var(--pf-font-color);
77
76
  }
package/src/styles/variables/_borders.scss CHANGED
@@ -23,7 +23,8 @@
23
23
 
24
24
  :root [data-theme='dark'],
25
25
  :root {
26
- --pf-horizontal-line-color: var(--pf-primary-color-200);
26
+ --pf-horizontal-line-color: var(--pf-tertiary-color-800);
27
27
  --pf-border-color: var(--pf-tertiary-color-800);
28
+ --pf-border-color-medium: var(--pf-tertiary-color-500);
28
29
  --pf-border-color-light: var(--pf-white-color-100);
29
30
  }