@patternfly/patternfly 4.203.1 → 4.203.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.
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.1",
4
+ "version": "4.203.2",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -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.0.6",
83
83
  "unified": "^9.2.0",
84
84
  "webpack": "^4.43.0"
85
85
  },
@@ -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
  }
@@ -311,4 +311,104 @@
311
311
  .pf-u-background-color-danger-on-2xl {
312
312
  background-color: var(--pf-global--palette--red-50) !important;
313
313
  }
314
+ }
315
+ :where(.pf-theme-dark) .pf-u-background-color-default {
316
+ background-color: var(--pf-global--BackgroundColor--100) !important;
317
+ }
318
+ :where(.pf-theme-dark) .pf-u-background-color-success {
319
+ background-color: var(--pf-global--BackgroundColor--100) !important;
320
+ }
321
+ :where(.pf-theme-dark) .pf-u-background-color-info {
322
+ background-color: var(--pf-global--BackgroundColor--100) !important;
323
+ }
324
+ :where(.pf-theme-dark) .pf-u-background-color-warning {
325
+ background-color: var(--pf-global--BackgroundColor--100) !important;
326
+ }
327
+ :where(.pf-theme-dark) .pf-u-background-color-danger {
328
+ background-color: var(--pf-global--BackgroundColor--100) !important;
329
+ }
330
+ @media screen and (min-width: 576px) {
331
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-sm {
332
+ background-color: var(--pf-global--BackgroundColor--100) !important;
333
+ }
334
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-sm {
335
+ background-color: var(--pf-global--BackgroundColor--100) !important;
336
+ }
337
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-sm {
338
+ background-color: var(--pf-global--BackgroundColor--100) !important;
339
+ }
340
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-sm {
341
+ background-color: var(--pf-global--BackgroundColor--100) !important;
342
+ }
343
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-sm {
344
+ background-color: var(--pf-global--BackgroundColor--100) !important;
345
+ }
346
+ }
347
+ @media screen and (min-width: 768px) {
348
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-md {
349
+ background-color: var(--pf-global--BackgroundColor--100) !important;
350
+ }
351
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-md {
352
+ background-color: var(--pf-global--BackgroundColor--100) !important;
353
+ }
354
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-md {
355
+ background-color: var(--pf-global--BackgroundColor--100) !important;
356
+ }
357
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-md {
358
+ background-color: var(--pf-global--BackgroundColor--100) !important;
359
+ }
360
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-md {
361
+ background-color: var(--pf-global--BackgroundColor--100) !important;
362
+ }
363
+ }
364
+ @media screen and (min-width: 992px) {
365
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-lg {
366
+ background-color: var(--pf-global--BackgroundColor--100) !important;
367
+ }
368
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-lg {
369
+ background-color: var(--pf-global--BackgroundColor--100) !important;
370
+ }
371
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-lg {
372
+ background-color: var(--pf-global--BackgroundColor--100) !important;
373
+ }
374
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-lg {
375
+ background-color: var(--pf-global--BackgroundColor--100) !important;
376
+ }
377
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-lg {
378
+ background-color: var(--pf-global--BackgroundColor--100) !important;
379
+ }
380
+ }
381
+ @media screen and (min-width: 1200px) {
382
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-xl {
383
+ background-color: var(--pf-global--BackgroundColor--100) !important;
384
+ }
385
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-xl {
386
+ background-color: var(--pf-global--BackgroundColor--100) !important;
387
+ }
388
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-xl {
389
+ background-color: var(--pf-global--BackgroundColor--100) !important;
390
+ }
391
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-xl {
392
+ background-color: var(--pf-global--BackgroundColor--100) !important;
393
+ }
394
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-xl {
395
+ background-color: var(--pf-global--BackgroundColor--100) !important;
396
+ }
397
+ }
398
+ @media screen and (min-width: 1450px) {
399
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-2xl {
400
+ background-color: var(--pf-global--BackgroundColor--100) !important;
401
+ }
402
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-2xl {
403
+ background-color: var(--pf-global--BackgroundColor--100) !important;
404
+ }
405
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-2xl {
406
+ background-color: var(--pf-global--BackgroundColor--100) !important;
407
+ }
408
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-2xl {
409
+ background-color: var(--pf-global--BackgroundColor--100) !important;
410
+ }
411
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-2xl {
412
+ background-color: var(--pf-global--BackgroundColor--100) !important;
413
+ }
314
414
  }
@@ -54,5 +54,11 @@ $pf-u-background-color-options: (
54
54
 
55
55
  @include pf-utility-builder($pf-u-background-color-options, $pf-global--breakpoint-list);
56
56
 
57
+ @import "themes/dark/BackgroundColor";
58
+
59
+ @include pf-theme-dark {
60
+ @include pf-theme-dark-background-color;
61
+ }
62
+
57
63
  // stylelint-enable
58
64
 
@@ -0,0 +1,25 @@
1
+ @import "../../../../sass-utilities/themes/dark/all";
2
+
3
+ @mixin pf-theme-dark-background-color() {
4
+ // Background color options to be redefined in theme
5
+ $pf-u-background-color-options: (
6
+ // Note that the status backgrounds are not intended to be used in dark theme; instead, a border or other indication would be used.
7
+ background-color-default: (
8
+ background-color var(--pf-global--BackgroundColor--100)
9
+ ),
10
+ background-color-success: (
11
+ background-color var(--pf-global--BackgroundColor--100)
12
+ ),
13
+ background-color-info: (
14
+ background-color var(--pf-global--BackgroundColor--100)
15
+ ),
16
+ background-color-warning: (
17
+ background-color var(--pf-global--BackgroundColor--100)
18
+ ),
19
+ background-color-danger: (
20
+ background-color var(--pf-global--BackgroundColor--100)
21
+ )
22
+ );
23
+
24
+ @include pf-utility-builder($pf-u-background-color-options, $pf-global--breakpoint-list);
25
+ }
@@ -942,4 +942,177 @@
942
942
  overflow: hidden !important;
943
943
  text-overflow: ellipsis !important;
944
944
  white-space: nowrap !important;
945
+ }
946
+
947
+ :where(.pf-theme-dark) .pf-u-color-300 {
948
+ color: var(--pf-global--Color--100) !important;
949
+ }
950
+ :where(.pf-theme-dark) .pf-u-color-light-100 {
951
+ color: var(--pf-global--Color-100) !important;
952
+ }
953
+ :where(.pf-theme-dark) .pf-u-color-light-200 {
954
+ color: var(--pf-global--Color-200) !important;
955
+ }
956
+ :where(.pf-theme-dark) .pf-u-link-color-visited {
957
+ color: var(--pf-global--palette--purple-200) !important;
958
+ }
959
+ :where(.pf-theme-dark) .pf-u-default-color-300 {
960
+ color: var(--pf-global--default-color--100) !important;
961
+ }
962
+ :where(.pf-theme-dark) .pf-u-success-color-200 {
963
+ color: var(--pf-global--success-color--100) !important;
964
+ }
965
+ :where(.pf-theme-dark) .pf-u-info-color-200 {
966
+ color: var(--pf-global--info-color--100) !important;
967
+ }
968
+ :where(.pf-theme-dark) .pf-u-danger-color-300 {
969
+ color: var(--pf-global--danger-color--100) !important;
970
+ }
971
+ :where(.pf-theme-dark) .pf-u-icon-color-dark {
972
+ color: var(--pf-global--icon--Color--dark) !important;
973
+ }
974
+ @media screen and (min-width: 576px) {
975
+ :where(.pf-theme-dark) .pf-u-color-300-on-sm {
976
+ color: var(--pf-global--Color--100) !important;
977
+ }
978
+ :where(.pf-theme-dark) .pf-u-color-light-100-on-sm {
979
+ color: var(--pf-global--Color-100) !important;
980
+ }
981
+ :where(.pf-theme-dark) .pf-u-color-light-200-on-sm {
982
+ color: var(--pf-global--Color-200) !important;
983
+ }
984
+ :where(.pf-theme-dark) .pf-u-link-color-visited-on-sm {
985
+ color: var(--pf-global--palette--purple-200) !important;
986
+ }
987
+ :where(.pf-theme-dark) .pf-u-default-color-300-on-sm {
988
+ color: var(--pf-global--default-color--100) !important;
989
+ }
990
+ :where(.pf-theme-dark) .pf-u-success-color-200-on-sm {
991
+ color: var(--pf-global--success-color--100) !important;
992
+ }
993
+ :where(.pf-theme-dark) .pf-u-info-color-200-on-sm {
994
+ color: var(--pf-global--info-color--100) !important;
995
+ }
996
+ :where(.pf-theme-dark) .pf-u-danger-color-300-on-sm {
997
+ color: var(--pf-global--danger-color--100) !important;
998
+ }
999
+ :where(.pf-theme-dark) .pf-u-icon-color-dark-on-sm {
1000
+ color: var(--pf-global--icon--Color--dark) !important;
1001
+ }
1002
+ }
1003
+ @media screen and (min-width: 768px) {
1004
+ :where(.pf-theme-dark) .pf-u-color-300-on-md {
1005
+ color: var(--pf-global--Color--100) !important;
1006
+ }
1007
+ :where(.pf-theme-dark) .pf-u-color-light-100-on-md {
1008
+ color: var(--pf-global--Color-100) !important;
1009
+ }
1010
+ :where(.pf-theme-dark) .pf-u-color-light-200-on-md {
1011
+ color: var(--pf-global--Color-200) !important;
1012
+ }
1013
+ :where(.pf-theme-dark) .pf-u-link-color-visited-on-md {
1014
+ color: var(--pf-global--palette--purple-200) !important;
1015
+ }
1016
+ :where(.pf-theme-dark) .pf-u-default-color-300-on-md {
1017
+ color: var(--pf-global--default-color--100) !important;
1018
+ }
1019
+ :where(.pf-theme-dark) .pf-u-success-color-200-on-md {
1020
+ color: var(--pf-global--success-color--100) !important;
1021
+ }
1022
+ :where(.pf-theme-dark) .pf-u-info-color-200-on-md {
1023
+ color: var(--pf-global--info-color--100) !important;
1024
+ }
1025
+ :where(.pf-theme-dark) .pf-u-danger-color-300-on-md {
1026
+ color: var(--pf-global--danger-color--100) !important;
1027
+ }
1028
+ :where(.pf-theme-dark) .pf-u-icon-color-dark-on-md {
1029
+ color: var(--pf-global--icon--Color--dark) !important;
1030
+ }
1031
+ }
1032
+ @media screen and (min-width: 992px) {
1033
+ :where(.pf-theme-dark) .pf-u-color-300-on-lg {
1034
+ color: var(--pf-global--Color--100) !important;
1035
+ }
1036
+ :where(.pf-theme-dark) .pf-u-color-light-100-on-lg {
1037
+ color: var(--pf-global--Color-100) !important;
1038
+ }
1039
+ :where(.pf-theme-dark) .pf-u-color-light-200-on-lg {
1040
+ color: var(--pf-global--Color-200) !important;
1041
+ }
1042
+ :where(.pf-theme-dark) .pf-u-link-color-visited-on-lg {
1043
+ color: var(--pf-global--palette--purple-200) !important;
1044
+ }
1045
+ :where(.pf-theme-dark) .pf-u-default-color-300-on-lg {
1046
+ color: var(--pf-global--default-color--100) !important;
1047
+ }
1048
+ :where(.pf-theme-dark) .pf-u-success-color-200-on-lg {
1049
+ color: var(--pf-global--success-color--100) !important;
1050
+ }
1051
+ :where(.pf-theme-dark) .pf-u-info-color-200-on-lg {
1052
+ color: var(--pf-global--info-color--100) !important;
1053
+ }
1054
+ :where(.pf-theme-dark) .pf-u-danger-color-300-on-lg {
1055
+ color: var(--pf-global--danger-color--100) !important;
1056
+ }
1057
+ :where(.pf-theme-dark) .pf-u-icon-color-dark-on-lg {
1058
+ color: var(--pf-global--icon--Color--dark) !important;
1059
+ }
1060
+ }
1061
+ @media screen and (min-width: 1200px) {
1062
+ :where(.pf-theme-dark) .pf-u-color-300-on-xl {
1063
+ color: var(--pf-global--Color--100) !important;
1064
+ }
1065
+ :where(.pf-theme-dark) .pf-u-color-light-100-on-xl {
1066
+ color: var(--pf-global--Color-100) !important;
1067
+ }
1068
+ :where(.pf-theme-dark) .pf-u-color-light-200-on-xl {
1069
+ color: var(--pf-global--Color-200) !important;
1070
+ }
1071
+ :where(.pf-theme-dark) .pf-u-link-color-visited-on-xl {
1072
+ color: var(--pf-global--palette--purple-200) !important;
1073
+ }
1074
+ :where(.pf-theme-dark) .pf-u-default-color-300-on-xl {
1075
+ color: var(--pf-global--default-color--100) !important;
1076
+ }
1077
+ :where(.pf-theme-dark) .pf-u-success-color-200-on-xl {
1078
+ color: var(--pf-global--success-color--100) !important;
1079
+ }
1080
+ :where(.pf-theme-dark) .pf-u-info-color-200-on-xl {
1081
+ color: var(--pf-global--info-color--100) !important;
1082
+ }
1083
+ :where(.pf-theme-dark) .pf-u-danger-color-300-on-xl {
1084
+ color: var(--pf-global--danger-color--100) !important;
1085
+ }
1086
+ :where(.pf-theme-dark) .pf-u-icon-color-dark-on-xl {
1087
+ color: var(--pf-global--icon--Color--dark) !important;
1088
+ }
1089
+ }
1090
+ @media screen and (min-width: 1450px) {
1091
+ :where(.pf-theme-dark) .pf-u-color-300-on-2xl {
1092
+ color: var(--pf-global--Color--100) !important;
1093
+ }
1094
+ :where(.pf-theme-dark) .pf-u-color-light-100-on-2xl {
1095
+ color: var(--pf-global--Color-100) !important;
1096
+ }
1097
+ :where(.pf-theme-dark) .pf-u-color-light-200-on-2xl {
1098
+ color: var(--pf-global--Color-200) !important;
1099
+ }
1100
+ :where(.pf-theme-dark) .pf-u-link-color-visited-on-2xl {
1101
+ color: var(--pf-global--palette--purple-200) !important;
1102
+ }
1103
+ :where(.pf-theme-dark) .pf-u-default-color-300-on-2xl {
1104
+ color: var(--pf-global--default-color--100) !important;
1105
+ }
1106
+ :where(.pf-theme-dark) .pf-u-success-color-200-on-2xl {
1107
+ color: var(--pf-global--success-color--100) !important;
1108
+ }
1109
+ :where(.pf-theme-dark) .pf-u-info-color-200-on-2xl {
1110
+ color: var(--pf-global--info-color--100) !important;
1111
+ }
1112
+ :where(.pf-theme-dark) .pf-u-danger-color-300-on-2xl {
1113
+ color: var(--pf-global--danger-color--100) !important;
1114
+ }
1115
+ :where(.pf-theme-dark) .pf-u-icon-color-dark-on-2xl {
1116
+ color: var(--pf-global--icon--Color--dark) !important;
1117
+ }
945
1118
  }
@@ -194,4 +194,10 @@ $pf-u-font-alignment-options: (
194
194
  white-space: nowrap !important;
195
195
  }
196
196
 
197
+ @import "themes/dark/text";
198
+
199
+ @include pf-theme-dark {
200
+ @include pf-theme-dark-text;
201
+ }
202
+
197
203
  // stylelint-enable
File without changes
@@ -0,0 +1,36 @@
1
+ @import "../../../../sass-utilities/themes/dark/all";
2
+
3
+ @mixin pf-theme-dark-text() {
4
+ // Font color options to be redefined in theme
5
+ $pf-u-font-color-options: (
6
+ color-300: (
7
+ color var(--pf-global--Color--100)
8
+ ),
9
+ color-light-100: (
10
+ color var(--pf-global--Color-100)
11
+ ),
12
+ color-light-200: (
13
+ color var(--pf-global--Color-200)
14
+ ),
15
+ link-color-visited: (
16
+ color var(--pf-global--palette--purple-200)
17
+ ),
18
+ default-color-300: (
19
+ color var(--pf-global--default-color--100)
20
+ ),
21
+ success-color-200: (
22
+ color var(--pf-global--success-color--100)
23
+ ),
24
+ info-color-200: (
25
+ color var(--pf-global--info-color--100)
26
+ ),
27
+ danger-color-300: (
28
+ color var(--pf-global--danger-color--100)
29
+ ),
30
+ icon-color-dark: (
31
+ color var(--pf-global--icon--Color--dark)
32
+ )
33
+ );
34
+
35
+ @include pf-utility-builder($pf-u-font-color-options, $pf-global--breakpoint-list);
36
+ }