@patternfly/react-core 4.221.0 → 4.221.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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 4.221.1 (2022-06-01)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-core
9
+
10
+
11
+
12
+
13
+
6
14
  # 4.221.0 (2022-06-01)
7
15
 
8
16
 
@@ -0,0 +1,4 @@
1
+ <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
2
+ <title>GitHub logo</title>
3
+ <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
4
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#4285F4">
2
+ <title>Google logo</title>
3
+ <path d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"/>
4
+ </svg>
@@ -0,0 +1 @@
1
+ <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 145"><defs><style>.cls-1{fill:#e00;}</style></defs><title>RedHat-Logo-Hat-Color</title><path d="M157.77,62.61a14,14,0,0,1,.31,3.42c0,14.88-18.1,17.46-30.61,17.46C78.83,83.49,42.53,53.26,42.53,44a6.43,6.43,0,0,1,.22-1.94l-3.66,9.06a18.45,18.45,0,0,0-1.51,7.33c0,18.11,41,45.48,87.74,45.48,20.69,0,36.43-7.76,36.43-21.77,0-1.08,0-1.94-1.73-10.13Z"/><path class="cls-1" d="M127.47,83.49c12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89,8.69,103.76.5,97.51.5,91.69.5,90,8,83.06,8c-6.68,0-11.64-5.6-17.89-5.6-6,0-9.91,4.09-12.93,12.5,0,0-8.41,23.72-9.49,27.16A6.43,6.43,0,0,0,42.53,44c0,9.22,36.3,39.45,84.94,39.45M160,72.07c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C78.54,104,37.58,76.6,37.58,58.49a18.45,18.45,0,0,1,1.51-7.33C22.27,52,.5,55,.5,74.22c0,31.48,74.59,70.28,133.65,70.28,45.28,0,56.7-20.48,56.7-36.65,0-12.72-11-27.16-30.83-35.78"/></svg>
@@ -100,6 +100,7 @@
100
100
  --pf-global--palette--light-green-500: #6ca100;
101
101
  --pf-global--palette--light-green-600: #486b00;
102
102
  --pf-global--palette--light-green-700: #253600;
103
+ --pf-global--palette--orange-50: #fff6ec;
103
104
  --pf-global--palette--orange-100: #f4b678;
104
105
  --pf-global--palette--orange-200: #ef9234;
105
106
  --pf-global--palette--orange-300: #ec7a08;
@@ -123,6 +124,7 @@
123
124
  --pf-global--palette--red-500: #2c0000;
124
125
  --pf-global--palette--white: #fff;
125
126
  --pf-global--BackgroundColor--100: #fff;
127
+ --pf-global--BackgroundColor--150: #fafafa;
126
128
  --pf-global--BackgroundColor--200: #f0f0f0;
127
129
  --pf-global--BackgroundColor--light-100: #fff;
128
130
  --pf-global--BackgroundColor--light-200: #fafafa;
@@ -298,6 +300,89 @@
298
300
  --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--redhatVF--monospace);
299
301
  }
300
302
 
303
+ :root:where(.pf-theme-dark) {
304
+ --pf-global--palette--black-50: #e0e0e0;
305
+ --pf-global--palette--black-100: #c6c7c8;
306
+ --pf-global--palette--black-200: #aaabac;
307
+ --pf-global--palette--black-300: #868789;
308
+ --pf-global--palette--black-400: #57585a;
309
+ --pf-global--palette--black-500: #444548;
310
+ --pf-global--palette--black-600: #36373a;
311
+ --pf-global--palette--black-700: #26292d;
312
+ --pf-global--palette--black-800: #1b1d21;
313
+ --pf-global--palette--black-900: #0f1214;
314
+ --pf-global--palette--red-9999: #fe5142;
315
+ --pf-global--palette--red-8888: #fe6a5d;
316
+ --pf-global--palette--blue-300: #1fa7f8;
317
+ --pf-global--BackgroundColor--100: #1b1d21;
318
+ --pf-global--BackgroundColor--150: #212427;
319
+ --pf-global--BackgroundColor--200: #0f1214;
320
+ --pf-global--BackgroundColor--300: #26292d;
321
+ --pf-global--BackgroundColor--400: #36373a;
322
+ --pf-global--BorderColor--100: #444548;
323
+ --pf-global--BorderColor--200: #444548;
324
+ --pf-global--BorderColor--300: #57585a;
325
+ --pf-global--BorderColor--400: #aaabac;
326
+ --pf-global--Color--100: #e0e0e0;
327
+ --pf-global--Color--200: #aaabac;
328
+ --pf-global--active-color--100: #1fa7f8;
329
+ --pf-global--primary-color--100: #1fa7f8;
330
+ --pf-global--primary-color--300: #06c;
331
+ --pf-global--success-color--100: #5ba352;
332
+ --pf-global--warning-color--100: #f0ab00;
333
+ --pf-global--warning-color--200: #f4c145;
334
+ --pf-global--danger-color--100: #fe5142;
335
+ --pf-global--danger-color--200: #fe6a5d;
336
+ --pf-global--link--Color: #1fa7f8;
337
+ --pf-global--link--Color--hover: #73bcf7;
338
+ --pf-global--disabled-color--100: #57585a;
339
+ --pf-global--disabled-color--200: #444548;
340
+ --pf-global--disabled-color--300: #aaabac;
341
+ --pf-global--icon--Color--light: #aaabac;
342
+ --pf-global--icon--Color--dark: #aaabac;
343
+ --pf-global--Color--dark-100: #e0e0e0;
344
+ --pf-global--Color--dark-200: #aaabac;
345
+ --pf-global--Color--light-100: #e0e0e0;
346
+ --pf-global--Color--light-200: #aaabac;
347
+ --pf-global--Color--light-300: #3c3f42;
348
+ --pf-global--BorderColor--dark-100: #444548;
349
+ --pf-global--BorderColor--light-100: #444548;
350
+ --pf-global--primary-color--light-100: #1fa7f8;
351
+ --pf-global--primary-color--dark-100: #1fa7f8;
352
+ --pf-global--link--Color--light: #1fa7f8;
353
+ --pf-global--link--Color--light--hover: #73bcf7;
354
+ --pf-global--link--Color--dark: #1fa7f8;
355
+ --pf-global--link--Color--dark--hover: #73bcf7;
356
+ --pf-global--BackgroundColor--light-100: #1b1d21;
357
+ --pf-global--BackgroundColor--light-200: #0f1214;
358
+ --pf-global--BackgroundColor--light-300: #26292d;
359
+ --pf-global--BackgroundColor--dark-100: #1b1d21;
360
+ --pf-global--BackgroundColor--dark-200: #0f1214;
361
+ --pf-global--BackgroundColor--dark-300: #26292d;
362
+ --pf-global--BackgroundColor--dark-400: #36373a;
363
+ --pf-global--BoxShadow--sm: 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.48), 0 0 0.125rem 0 rgba(3, 3, 3, 0.24);
364
+ --pf-global--BoxShadow--sm-top: 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
365
+ --pf-global--BoxShadow--sm-right: 0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
366
+ --pf-global--BoxShadow--sm-bottom: 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
367
+ --pf-global--BoxShadow--sm-left: -0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
368
+ --pf-global--BoxShadow--md: 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.48), 0 0 0.25rem 0 rgba(3, 3, 3, 0.24);
369
+ --pf-global--BoxShadow--md-top: 0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
370
+ --pf-global--BoxShadow--md-right: 0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
371
+ --pf-global--BoxShadow--md-bottom: 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
372
+ --pf-global--BoxShadow--md-left: -0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
373
+ --pf-global--BoxShadow--lg: 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.64), 0 0 0.375rem 0 rgba(3, 3, 3, 0.32);
374
+ --pf-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
375
+ --pf-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
376
+ --pf-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
377
+ --pf-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
378
+ --pf-global--BoxShadow--xl: 0 1rem 2rem 0 rgba(3, 3, 3, 0.64), 0 0 0.5rem 0 rgba(3, 3, 3, 0.4);
379
+ --pf-global--BoxShadow--xl-top: 0 -1rem 1rem -0.5rem rgba(3, 3, 3, 0.8);
380
+ --pf-global--BoxShadow--xl-right: 1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.8);
381
+ --pf-global--BoxShadow--xl-bottom: 0 1rem 1rem -0.5rem rgba(3, 3, 3, 0.8);
382
+ --pf-global--BoxShadow--xl-left: -1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.8);
383
+ --pf-global--BoxShadow--inset: inset 0 0 0.625rem 0 #030303;
384
+ }
385
+
301
386
  @font-face {
302
387
  font-family: "RedHatDisplay";
303
388
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff") format("woff");
@@ -600,6 +685,10 @@ html {
600
685
  font-variant-numeric: tabular-nums;
601
686
  }
602
687
 
688
+ :root:where(.pf-theme-dark) {
689
+ color-scheme: dark;
690
+ }
691
+
603
692
  .pf-t-dark.pf-m-transparent {
604
693
  background-color: transparent;
605
694
  }
@@ -613,11 +702,11 @@ html {
613
702
  }
614
703
 
615
704
  .pf-t-dark.pf-m-opaque-100 {
616
- background-color: #3c3f42;
705
+ background-color: #1b1d21;
617
706
  }
618
707
 
619
708
  .pf-t-dark.pf-m-opaque-200 {
620
- background-color: #151515;
709
+ background-color: #0f1214;
621
710
  }
622
711
 
623
712
  .pf-t-light.pf-m-transparent {
@@ -629,11 +718,11 @@ html {
629
718
  }
630
719
 
631
720
  .pf-t-light.pf-m-opaque-200 {
632
- background-color: #fafafa;
721
+ background-color: #c6c7c8;
633
722
  }
634
723
 
635
724
  .pf-t-light.pf-m-opaque-300 {
636
- background-color: #f0f0f0;
725
+ background-color: #aaabac;
637
726
  }
638
727
 
639
728
  @font-face {
@@ -100,6 +100,7 @@
100
100
  --pf-global--palette--light-green-500: #6ca100;
101
101
  --pf-global--palette--light-green-600: #486b00;
102
102
  --pf-global--palette--light-green-700: #253600;
103
+ --pf-global--palette--orange-50: #fff6ec;
103
104
  --pf-global--palette--orange-100: #f4b678;
104
105
  --pf-global--palette--orange-200: #ef9234;
105
106
  --pf-global--palette--orange-300: #ec7a08;
@@ -123,6 +124,7 @@
123
124
  --pf-global--palette--red-500: #2c0000;
124
125
  --pf-global--palette--white: #fff;
125
126
  --pf-global--BackgroundColor--100: #fff;
127
+ --pf-global--BackgroundColor--150: #fafafa;
126
128
  --pf-global--BackgroundColor--200: #f0f0f0;
127
129
  --pf-global--BackgroundColor--light-100: #fff;
128
130
  --pf-global--BackgroundColor--light-200: #fafafa;
@@ -298,6 +300,89 @@
298
300
  --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--redhatVF--monospace);
299
301
  }
300
302
 
303
+ :root:where(.pf-theme-dark) {
304
+ --pf-global--palette--black-50: #e0e0e0;
305
+ --pf-global--palette--black-100: #c6c7c8;
306
+ --pf-global--palette--black-200: #aaabac;
307
+ --pf-global--palette--black-300: #868789;
308
+ --pf-global--palette--black-400: #57585a;
309
+ --pf-global--palette--black-500: #444548;
310
+ --pf-global--palette--black-600: #36373a;
311
+ --pf-global--palette--black-700: #26292d;
312
+ --pf-global--palette--black-800: #1b1d21;
313
+ --pf-global--palette--black-900: #0f1214;
314
+ --pf-global--palette--red-9999: #fe5142;
315
+ --pf-global--palette--red-8888: #fe6a5d;
316
+ --pf-global--palette--blue-300: #1fa7f8;
317
+ --pf-global--BackgroundColor--100: #1b1d21;
318
+ --pf-global--BackgroundColor--150: #212427;
319
+ --pf-global--BackgroundColor--200: #0f1214;
320
+ --pf-global--BackgroundColor--300: #26292d;
321
+ --pf-global--BackgroundColor--400: #36373a;
322
+ --pf-global--BorderColor--100: #444548;
323
+ --pf-global--BorderColor--200: #444548;
324
+ --pf-global--BorderColor--300: #57585a;
325
+ --pf-global--BorderColor--400: #aaabac;
326
+ --pf-global--Color--100: #e0e0e0;
327
+ --pf-global--Color--200: #aaabac;
328
+ --pf-global--active-color--100: #1fa7f8;
329
+ --pf-global--primary-color--100: #1fa7f8;
330
+ --pf-global--primary-color--300: #06c;
331
+ --pf-global--success-color--100: #5ba352;
332
+ --pf-global--warning-color--100: #f0ab00;
333
+ --pf-global--warning-color--200: #f4c145;
334
+ --pf-global--danger-color--100: #fe5142;
335
+ --pf-global--danger-color--200: #fe6a5d;
336
+ --pf-global--link--Color: #1fa7f8;
337
+ --pf-global--link--Color--hover: #73bcf7;
338
+ --pf-global--disabled-color--100: #57585a;
339
+ --pf-global--disabled-color--200: #444548;
340
+ --pf-global--disabled-color--300: #aaabac;
341
+ --pf-global--icon--Color--light: #aaabac;
342
+ --pf-global--icon--Color--dark: #aaabac;
343
+ --pf-global--Color--dark-100: #e0e0e0;
344
+ --pf-global--Color--dark-200: #aaabac;
345
+ --pf-global--Color--light-100: #e0e0e0;
346
+ --pf-global--Color--light-200: #aaabac;
347
+ --pf-global--Color--light-300: #3c3f42;
348
+ --pf-global--BorderColor--dark-100: #444548;
349
+ --pf-global--BorderColor--light-100: #444548;
350
+ --pf-global--primary-color--light-100: #1fa7f8;
351
+ --pf-global--primary-color--dark-100: #1fa7f8;
352
+ --pf-global--link--Color--light: #1fa7f8;
353
+ --pf-global--link--Color--light--hover: #73bcf7;
354
+ --pf-global--link--Color--dark: #1fa7f8;
355
+ --pf-global--link--Color--dark--hover: #73bcf7;
356
+ --pf-global--BackgroundColor--light-100: #1b1d21;
357
+ --pf-global--BackgroundColor--light-200: #0f1214;
358
+ --pf-global--BackgroundColor--light-300: #26292d;
359
+ --pf-global--BackgroundColor--dark-100: #1b1d21;
360
+ --pf-global--BackgroundColor--dark-200: #0f1214;
361
+ --pf-global--BackgroundColor--dark-300: #26292d;
362
+ --pf-global--BackgroundColor--dark-400: #36373a;
363
+ --pf-global--BoxShadow--sm: 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.48), 0 0 0.125rem 0 rgba(3, 3, 3, 0.24);
364
+ --pf-global--BoxShadow--sm-top: 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
365
+ --pf-global--BoxShadow--sm-right: 0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
366
+ --pf-global--BoxShadow--sm-bottom: 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
367
+ --pf-global--BoxShadow--sm-left: -0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
368
+ --pf-global--BoxShadow--md: 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.48), 0 0 0.25rem 0 rgba(3, 3, 3, 0.24);
369
+ --pf-global--BoxShadow--md-top: 0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
370
+ --pf-global--BoxShadow--md-right: 0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
371
+ --pf-global--BoxShadow--md-bottom: 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
372
+ --pf-global--BoxShadow--md-left: -0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
373
+ --pf-global--BoxShadow--lg: 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.64), 0 0 0.375rem 0 rgba(3, 3, 3, 0.32);
374
+ --pf-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
375
+ --pf-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
376
+ --pf-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
377
+ --pf-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
378
+ --pf-global--BoxShadow--xl: 0 1rem 2rem 0 rgba(3, 3, 3, 0.64), 0 0 0.5rem 0 rgba(3, 3, 3, 0.4);
379
+ --pf-global--BoxShadow--xl-top: 0 -1rem 1rem -0.5rem rgba(3, 3, 3, 0.8);
380
+ --pf-global--BoxShadow--xl-right: 1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.8);
381
+ --pf-global--BoxShadow--xl-bottom: 0 1rem 1rem -0.5rem rgba(3, 3, 3, 0.8);
382
+ --pf-global--BoxShadow--xl-left: -1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.8);
383
+ --pf-global--BoxShadow--inset: inset 0 0 0.625rem 0 #030303;
384
+ }
385
+
301
386
  @font-face {
302
387
  font-family: "RedHatDisplay";
303
388
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff") format("woff");
@@ -728,6 +813,10 @@ a {
728
813
  font-weight: var(--pf-global--FontWeight--semi-bold);
729
814
  }
730
815
 
816
+ :root:where(.pf-theme-dark) {
817
+ color-scheme: dark;
818
+ }
819
+
731
820
  .pf-t-dark.pf-m-transparent {
732
821
  background-color: transparent;
733
822
  }
@@ -741,11 +830,11 @@ a {
741
830
  }
742
831
 
743
832
  .pf-t-dark.pf-m-opaque-100 {
744
- background-color: #3c3f42;
833
+ background-color: #1b1d21;
745
834
  }
746
835
 
747
836
  .pf-t-dark.pf-m-opaque-200 {
748
- background-color: #151515;
837
+ background-color: #0f1214;
749
838
  }
750
839
 
751
840
  .pf-t-light.pf-m-transparent {
@@ -757,11 +846,11 @@ a {
757
846
  }
758
847
 
759
848
  .pf-t-light.pf-m-opaque-200 {
760
- background-color: #fafafa;
849
+ background-color: #c6c7c8;
761
850
  }
762
851
 
763
852
  .pf-t-light.pf-m-opaque-300 {
764
- background-color: #f0f0f0;
853
+ background-color: #aaabac;
765
854
  }
766
855
 
767
856
  @font-face {