@patternfly/patternfly 4.203.0 → 4.203.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 (19) hide show
  1. package/components/Drawer/drawer.css +2 -2
  2. package/components/Drawer/drawer.scss +2 -2
  3. package/components/Page/page.css +11 -5
  4. package/components/Page/page.scss +8 -4
  5. package/components/Page/themes/dark/page.scss +4 -0
  6. package/package.json +4 -4
  7. package/patternfly-addons.css +274 -0
  8. package/patternfly-no-reset.css +13 -7
  9. package/patternfly.css +13 -7
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
  12. package/utilities/BackgroundColor/BackgroundColor.css +100 -0
  13. package/utilities/BackgroundColor/BackgroundColor.scss +6 -0
  14. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  15. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +25 -0
  16. package/utilities/Text/text.css +173 -0
  17. package/utilities/Text/text.scss +6 -0
  18. package/utilities/Text/themes/dark/text.css +0 -0
  19. package/utilities/Text/themes/dark/text.scss +36 -0
package/components/Drawer/drawer.css CHANGED
@@ -89,8 +89,8 @@
89
89
  --pf-c-drawer__splitter-handle--after--Height: 0.25rem;
90
90
  --pf-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
91
91
  --pf-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
92
- --pf-c-drawer__actions--MarginTop: calc(var(pf-global--spacer--form-element) * -1);
93
- --pf-c-drawer__actions--MarginRight: calc(var(pf-global--spacer--form-element) * -1);
92
+ --pf-c-drawer__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
93
+ --pf-c-drawer__actions--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
94
94
  --pf-c-drawer__panel--BoxShadow: none;
95
95
  --pf-c-drawer--m-expanded__panel--BoxShadow: var(--pf-global--BoxShadow--lg-left);
96
96
  --pf-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-global--BoxShadow--lg-right);
package/components/Drawer/drawer.scss CHANGED
@@ -141,8 +141,8 @@ $pf-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
141
141
  }
142
142
 
143
143
  // Actions
144
- --pf-c-drawer__actions--MarginTop: calc(var(pf-global--spacer--form-element) * -1);
145
- --pf-c-drawer__actions--MarginRight: calc(var(pf-global--spacer--form-element) * -1);
144
+ --pf-c-drawer__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
145
+ --pf-c-drawer__actions--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
146
146
 
147
147
  // Box shadow
148
148
  --pf-c-drawer__panel--BoxShadow: none;
package/components/Page/page.css CHANGED
@@ -143,6 +143,8 @@
143
143
  --pf-c-page__sidebar--Width: 18.125rem;
144
144
  --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
145
145
  --pf-c-page__sidebar--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
146
+ --pf-c-page__sidebar--m-light--BorderRightWidth: var(--pf-global--BorderWidth--sm);
147
+ --pf-c-page__sidebar--m-light--BorderRightColor: var(--pf-global--BorderColor--100);
146
148
  --pf-c-page__sidebar--BoxShadow: var(--pf-global--BoxShadow--lg-right);
147
149
  --pf-c-page__sidebar--Transition: var(--pf-global--Transition);
148
150
  --pf-c-page__sidebar--TranslateX: -100%;
@@ -415,15 +417,15 @@
415
417
  transition: var(--pf-c-page__sidebar--Transition);
416
418
  transform: translateX(var(--pf-c-page__sidebar--TranslateX)) translateZ(var(--pf-c-page__sidebar--TranslateZ));
417
419
  }
418
- @media screen and (min-width: 1200px) {
419
- .pf-c-page__sidebar {
420
- box-shadow: var(--pf-c-page__sidebar--BoxShadow);
421
- }
422
- }
423
420
  .pf-c-page__sidebar.pf-m-expanded {
424
421
  --pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--m-expanded--TranslateX);
425
422
  box-shadow: var(--pf-c-page__sidebar--BoxShadow);
426
423
  }
424
+ @media screen and (min-width: 1200px) {
425
+ .pf-c-page__sidebar.pf-m-expanded {
426
+ --pf-c-page__sidebar--BoxShadow: none;
427
+ }
428
+ }
427
429
  .pf-c-page__sidebar.pf-m-collapsed {
428
430
  max-width: 0;
429
431
  overflow: hidden;
@@ -431,6 +433,7 @@
431
433
  .pf-c-page__sidebar.pf-m-light {
432
434
  color: var(--pf-global--Color--100);
433
435
  --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
436
+ border-right: var(--pf-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-c-page__sidebar--m-light--BorderRightColor);
434
437
  }
435
438
 
436
439
  .pf-c-page__sidebar-body {
@@ -954,6 +957,9 @@
954
957
  :where(.pf-theme-dark) .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge:hover::before {
955
958
  background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
956
959
  }
960
+ :where(.pf-theme-dark) .pf-c-page__sidebar {
961
+ border-right: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
962
+ }
957
963
  :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-bottom {
958
964
  --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
959
965
  }
package/components/Page/page.scss CHANGED
@@ -74,6 +74,8 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
74
74
  --pf-c-page__sidebar--Width: #{pf-size-prem(290px)};
75
75
  --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
76
76
  --pf-c-page__sidebar--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
77
+ --pf-c-page__sidebar--m-light--BorderRightWidth: var(--pf-global--BorderWidth--sm);
78
+ --pf-c-page__sidebar--m-light--BorderRightColor: var(--pf-global--BorderColor--100);
77
79
  --pf-c-page__sidebar--BoxShadow: var(--pf-global--BoxShadow--lg-right);
78
80
  --pf-c-page__sidebar--Transition: var(--pf-global--Transition);
79
81
  --pf-c-page__sidebar--TranslateX: -100%;
@@ -389,16 +391,16 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
389
391
  transition: var(--pf-c-page__sidebar--Transition);
390
392
  transform: translateX(var(--pf-c-page__sidebar--TranslateX)) translateZ(var(--pf-c-page__sidebar--TranslateZ));
391
393
 
392
- @media screen and (min-width: $pf-global--breakpoint--xl) {
393
- box-shadow: var(--pf-c-page__sidebar--BoxShadow);
394
- }
395
-
396
394
  // Mobile
397
395
  // Expanded nav
398
396
  &.pf-m-expanded {
399
397
  --pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--m-expanded--TranslateX);
400
398
 
401
399
  box-shadow: var(--pf-c-page__sidebar--BoxShadow);
400
+
401
+ @media screen and (min-width: $pf-global--breakpoint--xl) {
402
+ --pf-c-page__sidebar--BoxShadow: none;
403
+ }
402
404
  }
403
405
 
404
406
  // Desktop
@@ -412,6 +414,8 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
412
414
  @include pf-t-light;
413
415
 
414
416
  --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
417
+
418
+ border-right: var(--pf-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-c-page__sidebar--m-light--BorderRightColor);
415
419
  }
416
420
  }
417
421
 
package/components/Page/themes/dark/page.scss CHANGED
@@ -26,6 +26,10 @@
26
26
  }
27
27
  }
28
28
 
29
+ .pf-c-page__sidebar {
30
+ border-right: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
31
+ }
32
+
29
33
  .pf-c-page__main-nav {
30
34
  &.pf-m-sticky-top,
31
35
  &.pf-m-sticky-bottom {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.203.0",
4
+ "version": "4.203.3",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -34,8 +34,8 @@
34
34
  "@fortawesome/fontawesome": "^1.1.8",
35
35
  "@octokit/rest": "^16.40.1",
36
36
  "@patternfly/patternfly-a11y": "4.3.1",
37
- "@patternfly/react-charts": "6.15.23",
38
- "@patternfly/react-code-editor": "4.3.61",
37
+ "@patternfly/react-charts": "6.77.1",
38
+ "@patternfly/react-code-editor": "4.65.1",
39
39
  "@patternfly/react-table": "4.93.1",
40
40
  "@starptech/prettyhtml": "^0.10.0",
41
41
  "babel-eslint": "^8.2.3",
@@ -79,7 +79,7 @@
79
79
  "stylelint-scss": "^4.0.0",
80
80
  "stylelint-value-no-unknown-custom-properties": "^3.0.0",
81
81
  "surge": "^0.21.3",
82
- "@patternfly/documentation-framework": "^1.0.0",
82
+ "@patternfly/documentation-framework": "1.1.0",
83
83
  "unified": "^9.2.0",
84
84
  "webpack": "^4.43.0"
85
85
  },
package/patternfly-addons.css CHANGED
@@ -560,6 +560,107 @@
560
560
  background-color: var(--pf-global--palette--red-50) !important;
561
561
  }
562
562
  }
563
+ :where(.pf-theme-dark) .pf-u-background-color-default {
564
+ background-color: var(--pf-global--BackgroundColor--100) !important;
565
+ }
566
+ :where(.pf-theme-dark) .pf-u-background-color-success {
567
+ background-color: var(--pf-global--BackgroundColor--100) !important;
568
+ }
569
+ :where(.pf-theme-dark) .pf-u-background-color-info {
570
+ background-color: var(--pf-global--BackgroundColor--100) !important;
571
+ }
572
+ :where(.pf-theme-dark) .pf-u-background-color-warning {
573
+ background-color: var(--pf-global--BackgroundColor--100) !important;
574
+ }
575
+ :where(.pf-theme-dark) .pf-u-background-color-danger {
576
+ background-color: var(--pf-global--BackgroundColor--100) !important;
577
+ }
578
+ @media screen and (min-width: 576px) {
579
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-sm {
580
+ background-color: var(--pf-global--BackgroundColor--100) !important;
581
+ }
582
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-sm {
583
+ background-color: var(--pf-global--BackgroundColor--100) !important;
584
+ }
585
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-sm {
586
+ background-color: var(--pf-global--BackgroundColor--100) !important;
587
+ }
588
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-sm {
589
+ background-color: var(--pf-global--BackgroundColor--100) !important;
590
+ }
591
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-sm {
592
+ background-color: var(--pf-global--BackgroundColor--100) !important;
593
+ }
594
+ }
595
+ @media screen and (min-width: 768px) {
596
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-md {
597
+ background-color: var(--pf-global--BackgroundColor--100) !important;
598
+ }
599
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-md {
600
+ background-color: var(--pf-global--BackgroundColor--100) !important;
601
+ }
602
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-md {
603
+ background-color: var(--pf-global--BackgroundColor--100) !important;
604
+ }
605
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-md {
606
+ background-color: var(--pf-global--BackgroundColor--100) !important;
607
+ }
608
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-md {
609
+ background-color: var(--pf-global--BackgroundColor--100) !important;
610
+ }
611
+ }
612
+ @media screen and (min-width: 992px) {
613
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-lg {
614
+ background-color: var(--pf-global--BackgroundColor--100) !important;
615
+ }
616
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-lg {
617
+ background-color: var(--pf-global--BackgroundColor--100) !important;
618
+ }
619
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-lg {
620
+ background-color: var(--pf-global--BackgroundColor--100) !important;
621
+ }
622
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-lg {
623
+ background-color: var(--pf-global--BackgroundColor--100) !important;
624
+ }
625
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-lg {
626
+ background-color: var(--pf-global--BackgroundColor--100) !important;
627
+ }
628
+ }
629
+ @media screen and (min-width: 1200px) {
630
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-xl {
631
+ background-color: var(--pf-global--BackgroundColor--100) !important;
632
+ }
633
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-xl {
634
+ background-color: var(--pf-global--BackgroundColor--100) !important;
635
+ }
636
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-xl {
637
+ background-color: var(--pf-global--BackgroundColor--100) !important;
638
+ }
639
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-xl {
640
+ background-color: var(--pf-global--BackgroundColor--100) !important;
641
+ }
642
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-xl {
643
+ background-color: var(--pf-global--BackgroundColor--100) !important;
644
+ }
645
+ }
646
+ @media screen and (min-width: 1450px) {
647
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-2xl {
648
+ background-color: var(--pf-global--BackgroundColor--100) !important;
649
+ }
650
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-2xl {
651
+ background-color: var(--pf-global--BackgroundColor--100) !important;
652
+ }
653
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-2xl {
654
+ background-color: var(--pf-global--BackgroundColor--100) !important;
655
+ }
656
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-2xl {
657
+ background-color: var(--pf-global--BackgroundColor--100) !important;
658
+ }
659
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-2xl {
660
+ background-color: var(--pf-global--BackgroundColor--100) !important;
661
+ }
662
+ }
663
+
563
664
  .pf-u-box-shadow-sm {
564
665
  box-shadow: var(--pf-global--BoxShadow--sm) !important;
565
666
  }
@@ -8392,4 +8493,177 @@
8392
8493
  overflow: hidden !important;
8393
8494
  text-overflow: ellipsis !important;
8394
8495
  white-space: nowrap !important;
8496
+ }
8497
+
8498
+ :where(.pf-theme-dark) .pf-u-color-300 {
8499
+ color: var(--pf-global--Color--100) !important;
8500
+ }
8501
+ :where(.pf-theme-dark) .pf-u-color-light-100 {
8502
+ color: var(--pf-global--Color-100) !important;
8503
+ }
8504
+ :where(.pf-theme-dark) .pf-u-color-light-200 {
8505
+ color: var(--pf-global--Color-200) !important;
8506
+ }
8507
+ :where(.pf-theme-dark) .pf-u-link-color-visited {
8508
+ color: var(--pf-global--palette--purple-200) !important;
8509
+ }
8510
+ :where(.pf-theme-dark) .pf-u-default-color-300 {
8511
+ color: var(--pf-global--default-color--100) !important;
8512
+ }
8513
+ :where(.pf-theme-dark) .pf-u-success-color-200 {
8514
+ color: var(--pf-global--success-color--100) !important;
8515
+ }
8516
+ :where(.pf-theme-dark) .pf-u-info-color-200 {
8517
+ color: var(--pf-global--info-color--100) !important;
8518
+ }
8519
+ :where(.pf-theme-dark) .pf-u-danger-color-300 {
8520
+ color: var(--pf-global--danger-color--100) !important;
8521
+ }
8522
+ :where(.pf-theme-dark) .pf-u-icon-color-dark {
8523
+ color: var(--pf-global--icon--Color--dark) !important;
8524
+ }
8525
+ @media screen and (min-width: 576px) {
8526
+ :where(.pf-theme-dark) .pf-u-color-300-on-sm {
8527
+ color: var(--pf-global--Color--100) !important;
8528
+ }
8529
+ :where(.pf-theme-dark) .pf-u-color-light-100-on-sm {
8530
+ color: var(--pf-global--Color-100) !important;
8531
+ }
8532
+ :where(.pf-theme-dark) .pf-u-color-light-200-on-sm {
8533
+ color: var(--pf-global--Color-200) !important;
8534
+ }
8535
+ :where(.pf-theme-dark) .pf-u-link-color-visited-on-sm {
8536
+ color: var(--pf-global--palette--purple-200) !important;
8537
+ }
8538
+ :where(.pf-theme-dark) .pf-u-default-color-300-on-sm {
8539
+ color: var(--pf-global--default-color--100) !important;
8540
+ }
8541
+ :where(.pf-theme-dark) .pf-u-success-color-200-on-sm {
8542
+ color: var(--pf-global--success-color--100) !important;
8543
+ }
8544
+ :where(.pf-theme-dark) .pf-u-info-color-200-on-sm {
8545
+ color: var(--pf-global--info-color--100) !important;
8546
+ }
8547
+ :where(.pf-theme-dark) .pf-u-danger-color-300-on-sm {
8548
+ color: var(--pf-global--danger-color--100) !important;
8549
+ }
8550
+ :where(.pf-theme-dark) .pf-u-icon-color-dark-on-sm {
8551
+ color: var(--pf-global--icon--Color--dark) !important;
8552
+ }
8553
+ }
8554
+ @media screen and (min-width: 768px) {
8555
+ :where(.pf-theme-dark) .pf-u-color-300-on-md {
8556
+ color: var(--pf-global--Color--100) !important;
8557
+ }
8558
+ :where(.pf-theme-dark) .pf-u-color-light-100-on-md {
8559
+ color: var(--pf-global--Color-100) !important;
8560
+ }
8561
+ :where(.pf-theme-dark) .pf-u-color-light-200-on-md {
8562
+ color: var(--pf-global--Color-200) !important;
8563
+ }
8564
+ :where(.pf-theme-dark) .pf-u-link-color-visited-on-md {
8565
+ color: var(--pf-global--palette--purple-200) !important;
8566
+ }
8567
+ :where(.pf-theme-dark) .pf-u-default-color-300-on-md {
8568
+ color: var(--pf-global--default-color--100) !important;
8569
+ }
8570
+ :where(.pf-theme-dark) .pf-u-success-color-200-on-md {
8571
+ color: var(--pf-global--success-color--100) !important;
8572
+ }
8573
+ :where(.pf-theme-dark) .pf-u-info-color-200-on-md {
8574
+ color: var(--pf-global--info-color--100) !important;
8575
+ }
8576
+ :where(.pf-theme-dark) .pf-u-danger-color-300-on-md {
8577
+ color: var(--pf-global--danger-color--100) !important;
8578
+ }
8579
+ :where(.pf-theme-dark) .pf-u-icon-color-dark-on-md {
8580
+ color: var(--pf-global--icon--Color--dark) !important;
8581
+ }
8582
+ }
8583
+ @media screen and (min-width: 992px) {
8584
+ :where(.pf-theme-dark) .pf-u-color-300-on-lg {
8585
+ color: var(--pf-global--Color--100) !important;
8586
+ }
8587
+ :where(.pf-theme-dark) .pf-u-color-light-100-on-lg {
8588
+ color: var(--pf-global--Color-100) !important;
8589
+ }
8590
+ :where(.pf-theme-dark) .pf-u-color-light-200-on-lg {
8591
+ color: var(--pf-global--Color-200) !important;
8592
+ }
8593
+ :where(.pf-theme-dark) .pf-u-link-color-visited-on-lg {
8594
+ color: var(--pf-global--palette--purple-200) !important;
8595
+ }
8596
+ :where(.pf-theme-dark) .pf-u-default-color-300-on-lg {
8597
+ color: var(--pf-global--default-color--100) !important;
8598
+ }
8599
+ :where(.pf-theme-dark) .pf-u-success-color-200-on-lg {
8600
+ color: var(--pf-global--success-color--100) !important;
8601
+ }
8602
+ :where(.pf-theme-dark) .pf-u-info-color-200-on-lg {
8603
+ color: var(--pf-global--info-color--100) !important;
8604
+ }
8605
+ :where(.pf-theme-dark) .pf-u-danger-color-300-on-lg {
8606
+ color: var(--pf-global--danger-color--100) !important;
8607
+ }
8608
+ :where(.pf-theme-dark) .pf-u-icon-color-dark-on-lg {
8609
+ color: var(--pf-global--icon--Color--dark) !important;
8610
+ }
8611
+ }
8612
+ @media screen and (min-width: 1200px) {
8613
+ :where(.pf-theme-dark) .pf-u-color-300-on-xl {
8614
+ color: var(--pf-global--Color--100) !important;
8615
+ }
8616
+ :where(.pf-theme-dark) .pf-u-color-light-100-on-xl {
8617
+ color: var(--pf-global--Color-100) !important;
8618
+ }
8619
+ :where(.pf-theme-dark) .pf-u-color-light-200-on-xl {
8620
+ color: var(--pf-global--Color-200) !important;
8621
+ }
8622
+ :where(.pf-theme-dark) .pf-u-link-color-visited-on-xl {
8623
+ color: var(--pf-global--palette--purple-200) !important;
8624
+ }
8625
+ :where(.pf-theme-dark) .pf-u-default-color-300-on-xl {
8626
+ color: var(--pf-global--default-color--100) !important;
8627
+ }
8628
+ :where(.pf-theme-dark) .pf-u-success-color-200-on-xl {
8629
+ color: var(--pf-global--success-color--100) !important;
8630
+ }
8631
+ :where(.pf-theme-dark) .pf-u-info-color-200-on-xl {
8632
+ color: var(--pf-global--info-color--100) !important;
8633
+ }
8634
+ :where(.pf-theme-dark) .pf-u-danger-color-300-on-xl {
8635
+ color: var(--pf-global--danger-color--100) !important;
8636
+ }
8637
+ :where(.pf-theme-dark) .pf-u-icon-color-dark-on-xl {
8638
+ color: var(--pf-global--icon--Color--dark) !important;
8639
+ }
8640
+ }
8641
+ @media screen and (min-width: 1450px) {
8642
+ :where(.pf-theme-dark) .pf-u-color-300-on-2xl {
8643
+ color: var(--pf-global--Color--100) !important;
8644
+ }
8645
+ :where(.pf-theme-dark) .pf-u-color-light-100-on-2xl {
8646
+ color: var(--pf-global--Color-100) !important;
8647
+ }
8648
+ :where(.pf-theme-dark) .pf-u-color-light-200-on-2xl {
8649
+ color: var(--pf-global--Color-200) !important;
8650
+ }
8651
+ :where(.pf-theme-dark) .pf-u-link-color-visited-on-2xl {
8652
+ color: var(--pf-global--palette--purple-200) !important;
8653
+ }
8654
+ :where(.pf-theme-dark) .pf-u-default-color-300-on-2xl {
8655
+ color: var(--pf-global--default-color--100) !important;
8656
+ }
8657
+ :where(.pf-theme-dark) .pf-u-success-color-200-on-2xl {
8658
+ color: var(--pf-global--success-color--100) !important;
8659
+ }
8660
+ :where(.pf-theme-dark) .pf-u-info-color-200-on-2xl {
8661
+ color: var(--pf-global--info-color--100) !important;
8662
+ }
8663
+ :where(.pf-theme-dark) .pf-u-danger-color-300-on-2xl {
8664
+ color: var(--pf-global--danger-color--100) !important;
8665
+ }
8666
+ :where(.pf-theme-dark) .pf-u-icon-color-dark-on-2xl {
8667
+ color: var(--pf-global--icon--Color--dark) !important;
8668
+ }
8395
8669
  }
package/patternfly-no-reset.css CHANGED
@@ -12919,8 +12919,8 @@ label.pf-c-check, .pf-c-check__label,
12919
12919
  --pf-c-drawer__splitter-handle--after--Height: 0.25rem;
12920
12920
  --pf-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
12921
12921
  --pf-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
12922
- --pf-c-drawer__actions--MarginTop: calc(var(pf-global--spacer--form-element) * -1);
12923
- --pf-c-drawer__actions--MarginRight: calc(var(pf-global--spacer--form-element) * -1);
12922
+ --pf-c-drawer__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
12923
+ --pf-c-drawer__actions--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
12924
12924
  --pf-c-drawer__panel--BoxShadow: none;
12925
12925
  --pf-c-drawer--m-expanded__panel--BoxShadow: var(--pf-global--BoxShadow--lg-left);
12926
12926
  --pf-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-global--BoxShadow--lg-right);
@@ -21458,6 +21458,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21458
21458
  --pf-c-page__sidebar--Width: 18.125rem;
21459
21459
  --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
21460
21460
  --pf-c-page__sidebar--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
21461
+ --pf-c-page__sidebar--m-light--BorderRightWidth: var(--pf-global--BorderWidth--sm);
21462
+ --pf-c-page__sidebar--m-light--BorderRightColor: var(--pf-global--BorderColor--100);
21461
21463
  --pf-c-page__sidebar--BoxShadow: var(--pf-global--BoxShadow--lg-right);
21462
21464
  --pf-c-page__sidebar--Transition: var(--pf-global--Transition);
21463
21465
  --pf-c-page__sidebar--TranslateX: -100%;
@@ -21730,15 +21732,15 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21730
21732
  transition: var(--pf-c-page__sidebar--Transition);
21731
21733
  transform: translateX(var(--pf-c-page__sidebar--TranslateX)) translateZ(var(--pf-c-page__sidebar--TranslateZ));
21732
21734
  }
21733
- @media screen and (min-width: 1200px) {
21734
- .pf-c-page__sidebar {
21735
- box-shadow: var(--pf-c-page__sidebar--BoxShadow);
21736
- }
21737
- }
21738
21735
  .pf-c-page__sidebar.pf-m-expanded {
21739
21736
  --pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--m-expanded--TranslateX);
21740
21737
  box-shadow: var(--pf-c-page__sidebar--BoxShadow);
21741
21738
  }
21739
+ @media screen and (min-width: 1200px) {
21740
+ .pf-c-page__sidebar.pf-m-expanded {
21741
+ --pf-c-page__sidebar--BoxShadow: none;
21742
+ }
21743
+ }
21742
21744
  .pf-c-page__sidebar.pf-m-collapsed {
21743
21745
  max-width: 0;
21744
21746
  overflow: hidden;
@@ -21746,6 +21748,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21746
21748
  .pf-c-page__sidebar.pf-m-light {
21747
21749
  color: var(--pf-global--Color--100);
21748
21750
  --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
21751
+ border-right: var(--pf-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-c-page__sidebar--m-light--BorderRightColor);
21749
21752
  }
21750
21753
 
21751
21754
  .pf-c-page__sidebar-body {
@@ -22272,6 +22275,9 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22272
22275
  :where(.pf-theme-dark) .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge:hover::before {
22273
22276
  background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
22274
22277
  }
22278
+ :where(.pf-theme-dark) .pf-c-page__sidebar {
22279
+ border-right: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
22280
+ }
22275
22281
  :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-bottom {
22276
22282
  --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
22277
22283
  }
package/patternfly.css CHANGED
@@ -13046,8 +13046,8 @@ label.pf-c-check, .pf-c-check__label,
13046
13046
  --pf-c-drawer__splitter-handle--after--Height: 0.25rem;
13047
13047
  --pf-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
13048
13048
  --pf-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
13049
- --pf-c-drawer__actions--MarginTop: calc(var(pf-global--spacer--form-element) * -1);
13050
- --pf-c-drawer__actions--MarginRight: calc(var(pf-global--spacer--form-element) * -1);
13049
+ --pf-c-drawer__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
13050
+ --pf-c-drawer__actions--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
13051
13051
  --pf-c-drawer__panel--BoxShadow: none;
13052
13052
  --pf-c-drawer--m-expanded__panel--BoxShadow: var(--pf-global--BoxShadow--lg-left);
13053
13053
  --pf-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-global--BoxShadow--lg-right);
@@ -21585,6 +21585,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21585
21585
  --pf-c-page__sidebar--Width: 18.125rem;
21586
21586
  --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
21587
21587
  --pf-c-page__sidebar--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
21588
+ --pf-c-page__sidebar--m-light--BorderRightWidth: var(--pf-global--BorderWidth--sm);
21589
+ --pf-c-page__sidebar--m-light--BorderRightColor: var(--pf-global--BorderColor--100);
21588
21590
  --pf-c-page__sidebar--BoxShadow: var(--pf-global--BoxShadow--lg-right);
21589
21591
  --pf-c-page__sidebar--Transition: var(--pf-global--Transition);
21590
21592
  --pf-c-page__sidebar--TranslateX: -100%;
@@ -21857,15 +21859,15 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21857
21859
  transition: var(--pf-c-page__sidebar--Transition);
21858
21860
  transform: translateX(var(--pf-c-page__sidebar--TranslateX)) translateZ(var(--pf-c-page__sidebar--TranslateZ));
21859
21861
  }
21860
- @media screen and (min-width: 1200px) {
21861
- .pf-c-page__sidebar {
21862
- box-shadow: var(--pf-c-page__sidebar--BoxShadow);
21863
- }
21864
- }
21865
21862
  .pf-c-page__sidebar.pf-m-expanded {
21866
21863
  --pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--m-expanded--TranslateX);
21867
21864
  box-shadow: var(--pf-c-page__sidebar--BoxShadow);
21868
21865
  }
21866
+ @media screen and (min-width: 1200px) {
21867
+ .pf-c-page__sidebar.pf-m-expanded {
21868
+ --pf-c-page__sidebar--BoxShadow: none;
21869
+ }
21870
+ }
21869
21871
  .pf-c-page__sidebar.pf-m-collapsed {
21870
21872
  max-width: 0;
21871
21873
  overflow: hidden;
@@ -21873,6 +21875,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21873
21875
  .pf-c-page__sidebar.pf-m-light {
21874
21876
  color: var(--pf-global--Color--100);
21875
21877
  --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
21878
+ border-right: var(--pf-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-c-page__sidebar--m-light--BorderRightColor);
21876
21879
  }
21877
21880
 
21878
21881
  .pf-c-page__sidebar-body {
@@ -22399,6 +22402,9 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22399
22402
  :where(.pf-theme-dark) .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge:hover::before {
22400
22403
  background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
22401
22404
  }
22405
+ :where(.pf-theme-dark) .pf-c-page__sidebar {
22406
+ border-right: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
22407
+ }
22402
22408
  :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-bottom {
22403
22409
  --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
22404
22410
  }