@patternfly/patternfly 4.195.0 → 4.196.0

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 (14) hide show
  1. package/base/_variables.scss +1 -0
  2. package/base/patternfly-variables.css +1 -0
  3. package/components/Label/label.css +27 -2
  4. package/components/Label/label.scss +30 -2
  5. package/docs/components/FormControl/examples/FormControl.md +2 -0
  6. package/docs/components/Label/examples/Label.md +147 -0
  7. package/package.json +1 -1
  8. package/patternfly-base-no-reset.css +1 -0
  9. package/patternfly-base.css +1 -0
  10. package/patternfly-no-reset.css +28 -2
  11. package/patternfly.css +28 -2
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
  14. package/sass-utilities/colors.scss +1 -0
package/base/_variables.scss CHANGED
@@ -59,6 +59,7 @@
59
59
  --pf-global--palette--light-green-500: #{$pf-color-light-green-500};
60
60
  --pf-global--palette--light-green-600: #{$pf-color-light-green-600};
61
61
  --pf-global--palette--light-green-700: #{$pf-color-light-green-700};
62
+ --pf-global--palette--orange-50: #{$pf-color-orange-50};
62
63
  --pf-global--palette--orange-100: #{$pf-color-orange-100};
63
64
  --pf-global--palette--orange-200: #{$pf-color-orange-200};
64
65
  --pf-global--palette--orange-300: #{$pf-color-orange-300};
package/base/patternfly-variables.css CHANGED
@@ -57,6 +57,7 @@
57
57
  --pf-global--palette--light-green-500: #6ca100;
58
58
  --pf-global--palette--light-green-600: #486b00;
59
59
  --pf-global--palette--light-green-700: #253600;
60
+ --pf-global--palette--orange-50: #fff6ec;
60
61
  --pf-global--palette--orange-100: #f4b678;
61
62
  --pf-global--palette--orange-200: #ef9234;
62
63
  --pf-global--palette--orange-300: #ec7a08;
package/components/Label/label.css CHANGED
@@ -40,9 +40,9 @@
40
40
  --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
41
41
  --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
42
42
  --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
43
- --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--gold-50);
43
+ --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
44
44
  --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
45
- --pf-c-label--m-orange__content--Color: var(--pf-global--palette--gold-700);
45
+ --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
46
46
  --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
47
47
  --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
48
48
  --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
@@ -80,6 +80,16 @@
80
80
  --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
81
81
  --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
82
82
  --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
83
+ --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
84
+ --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
85
+ --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
86
+ --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
87
+ --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
88
+ --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
89
+ --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
90
+ --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100);
91
+ --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
92
+ --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
83
93
  --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
84
94
  --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
85
95
  --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -236,6 +246,21 @@
236
246
  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
237
247
  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
238
248
  }
249
+ .pf-c-label.pf-m-gold {
250
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
251
+ --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
252
+ --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
253
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
254
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
255
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
256
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
257
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
258
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
259
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
260
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
261
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
262
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
263
+ }
239
264
  .pf-c-label.pf-m-outline {
240
265
  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
241
266
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
package/components/Label/label.scss CHANGED
@@ -55,9 +55,9 @@
55
55
  --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
56
56
 
57
57
  // Orange
58
- --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--gold-50);
58
+ --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
59
59
  --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
60
- --pf-c-label--m-orange__content--Color: var(--pf-global--palette--gold-700);
60
+ --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
61
61
  --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
62
62
  --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
63
63
  --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
@@ -102,6 +102,18 @@
102
102
  --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
103
103
  --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
104
104
 
105
+ // Gold
106
+ --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
107
+ --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
108
+ --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
109
+ --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
110
+ --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
111
+ --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
112
+ --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
113
+ --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
114
+ --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
115
+ --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
116
+
105
117
  // Overflow
106
118
  --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
107
119
  --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
@@ -281,6 +293,22 @@
281
293
  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
282
294
  }
283
295
 
296
+ &.pf-m-gold {
297
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
298
+ --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
299
+ --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
300
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
301
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
302
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
303
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
304
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
305
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
306
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
307
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
308
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
309
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
310
+ }
311
+
284
312
  &.pf-m-outline {
285
313
  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
286
314
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
package/docs/components/FormControl/examples/FormControl.md CHANGED
@@ -8,6 +8,8 @@ cssPrefix: pf-c-form-control
8
8
 
9
9
  ### Input
10
10
 
11
+ **Note:** In webkit browsers, inputs with status icons that are autocompleted will have their icons removed by the user agent stylesheet. If the field does not need to use autocomplete, turn it off with `autocomplete="off"` to avoid the problem. Otherwise, use [helper text](/components/helper-text/html-demos) instead to ensure that the status will remain visible if the field is autocompleted.
12
+
11
13
  ```html
12
14
  <input
13
15
  class="pf-c-form-control"
package/docs/components/Label/examples/Label.md CHANGED
@@ -580,6 +580,88 @@ cssPrefix: pf-c-label
580
580
  </button>
581
581
  </span>
582
582
 
583
+ <br />
584
+ <br />
585
+
586
+ <span class="pf-c-label pf-m-gold">
587
+ <span class="pf-c-label__content">Gold</span>
588
+ </span>
589
+
590
+ <span class="pf-c-label pf-m-gold">
591
+ <span class="pf-c-label__content">
592
+ <span class="pf-c-label__icon">
593
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
594
+ </span>
595
+ Gold icon
596
+ </span>
597
+ </span>
598
+
599
+ <span class="pf-c-label pf-m-gold">
600
+ <span class="pf-c-label__content">Gold removable</span>
601
+ <button
602
+ class="pf-c-button pf-m-plain"
603
+ type="button"
604
+ id="gold-removable-button"
605
+ aria-label="Remove"
606
+ aria-labelledby="gold-removable-button gold-removable-text"
607
+ >
608
+ <i class="fas fa-times" aria-hidden="true"></i>
609
+ </button>
610
+ </span>
611
+
612
+ <span class="pf-c-label pf-m-gold">
613
+ <span class="pf-c-label__content">
614
+ <span class="pf-c-label__icon">
615
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
616
+ </span>
617
+ Gold icon removable
618
+ </span>
619
+ <button
620
+ class="pf-c-button pf-m-plain"
621
+ type="button"
622
+ id="gold-icon-removable-button"
623
+ aria-label="Remove"
624
+ aria-labelledby="gold-icon-removable-button gold-icon-removable-text"
625
+ >
626
+ <i class="fas fa-times" aria-hidden="true"></i>
627
+ </button>
628
+ </span>
629
+
630
+ <span class="pf-c-label pf-m-gold">
631
+ <a class="pf-c-label__content" href="#">Gold link</a>
632
+ </span>
633
+
634
+ <span class="pf-c-label pf-m-gold">
635
+ <a class="pf-c-label__content" href="#">Gold link removable</a>
636
+ <button
637
+ class="pf-c-button pf-m-plain"
638
+ type="button"
639
+ id="gold-link-removable-button"
640
+ aria-label="Remove"
641
+ aria-labelledby="gold-link-removable-button gold-link-removable-text"
642
+ >
643
+ <i class="fas fa-times" aria-hidden="true"></i>
644
+ </button>
645
+ </span>
646
+
647
+ <span class="pf-c-label pf-m-gold">
648
+ <span class="pf-c-label__content">
649
+ <span class="pf-c-label__icon">
650
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
651
+ </span>
652
+ <span class="pf-c-label__text">Gold label with icon that truncates</span>
653
+ </span>
654
+ <button
655
+ class="pf-c-button pf-m-plain"
656
+ type="button"
657
+ id="gold-truncate-button"
658
+ aria-label="Remove"
659
+ aria-labelledby="gold-truncate-button gold-truncate-text"
660
+ >
661
+ <i class="fas fa-times" aria-hidden="true"></i>
662
+ </button>
663
+ </span>
664
+
583
665
  ```
584
666
 
585
667
  ### Outline
@@ -1030,6 +1112,70 @@ cssPrefix: pf-c-label
1030
1112
  </button>
1031
1113
  </span>
1032
1114
 
1115
+ <br />
1116
+ <br />
1117
+
1118
+ <span class="pf-c-label pf-m-gold pf-m-outline">
1119
+ <span class="pf-c-label__content">Gold</span>
1120
+ </span>
1121
+
1122
+ <span class="pf-c-label pf-m-gold pf-m-outline">
1123
+ <span class="pf-c-label__content">
1124
+ <span class="pf-c-label__icon">
1125
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1126
+ </span>
1127
+ Gold icon
1128
+ </span>
1129
+ </span>
1130
+
1131
+ <span class="pf-c-label pf-m-gold pf-m-outline">
1132
+ <span class="pf-c-label__content">Gold removable</span>
1133
+ <button
1134
+ class="pf-c-button pf-m-plain"
1135
+ type="button"
1136
+ id="gold-outline-removable-button"
1137
+ aria-label="Remove"
1138
+ aria-labelledby="gold-outline-removable-button gold-outline-removable-text"
1139
+ >
1140
+ <i class="fas fa-times" aria-hidden="true"></i>
1141
+ </button>
1142
+ </span>
1143
+
1144
+ <span class="pf-c-label pf-m-gold pf-m-outline">
1145
+ <span class="pf-c-label__content">
1146
+ <span class="pf-c-label__icon">
1147
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1148
+ </span>
1149
+ Gold icon removable
1150
+ </span>
1151
+ <button
1152
+ class="pf-c-button pf-m-plain"
1153
+ type="button"
1154
+ id="gold-outline-icon-removable-button"
1155
+ aria-label="Remove"
1156
+ aria-labelledby="gold-outline-icon-removable-button gold-outline-icon-removable-text"
1157
+ >
1158
+ <i class="fas fa-times" aria-hidden="true"></i>
1159
+ </button>
1160
+ </span>
1161
+
1162
+ <span class="pf-c-label pf-m-gold pf-m-outline">
1163
+ <a class="pf-c-label__content" href="#">Gold link</a>
1164
+ </span>
1165
+
1166
+ <span class="pf-c-label pf-m-gold pf-m-outline">
1167
+ <a class="pf-c-label__content" href="#">Gold link removable</a>
1168
+ <button
1169
+ class="pf-c-button pf-m-plain"
1170
+ type="button"
1171
+ id="gold-outline-link-removable-button"
1172
+ aria-label="Remove"
1173
+ aria-labelledby="gold-outline-link-removable-button gold-outline-link-removable-text"
1174
+ >
1175
+ <i class="fas fa-times" aria-hidden="true"></i>
1176
+ </button>
1177
+ </span>
1178
+
1033
1179
  ```
1034
1180
 
1035
1181
  ### Compact
@@ -1238,5 +1384,6 @@ This style of label is used to add new labels to a label group.
1238
1384
  | `.pf-m-red` | `.pf-c-label` | Modifies the label to have red colored styling. |
1239
1385
  | `.pf-m-purple` | `.pf-c-label` | Modifies the label to have purple colored styling. |
1240
1386
  | `.pf-m-cyan` | `.pf-c-label` | Modifies the label to have cyan colored styling. |
1387
+ | `.pf-m-gold` | `.pf-c-label` | Modifies the label to have gold colored styling. |
1241
1388
  | `.pf-m-editable` | `.pf-c-label` | Modifies label for editable styles. |
1242
1389
  | `.pf-m-editable-active` | `.pf-c-label.pf-m-editable` | Modifies editable label for active styles. |
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.195.0",
4
+ "version": "4.196.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-reset.css CHANGED
@@ -98,6 +98,7 @@
98
98
  --pf-global--palette--light-green-500: #6ca100;
99
99
  --pf-global--palette--light-green-600: #486b00;
100
100
  --pf-global--palette--light-green-700: #253600;
101
+ --pf-global--palette--orange-50: #fff6ec;
101
102
  --pf-global--palette--orange-100: #f4b678;
102
103
  --pf-global--palette--orange-200: #ef9234;
103
104
  --pf-global--palette--orange-300: #ec7a08;
package/patternfly-base.css CHANGED
@@ -98,6 +98,7 @@
98
98
  --pf-global--palette--light-green-500: #6ca100;
99
99
  --pf-global--palette--light-green-600: #486b00;
100
100
  --pf-global--palette--light-green-700: #253600;
101
+ --pf-global--palette--orange-50: #fff6ec;
101
102
  --pf-global--palette--orange-100: #f4b678;
102
103
  --pf-global--palette--orange-200: #ef9234;
103
104
  --pf-global--palette--orange-300: #ec7a08;
package/patternfly-no-reset.css CHANGED
@@ -171,6 +171,7 @@
171
171
  --pf-global--palette--light-green-500: #6ca100;
172
172
  --pf-global--palette--light-green-600: #486b00;
173
173
  --pf-global--palette--light-green-700: #253600;
174
+ --pf-global--palette--orange-50: #fff6ec;
174
175
  --pf-global--palette--orange-100: #f4b678;
175
176
  --pf-global--palette--orange-200: #ef9234;
176
177
  --pf-global--palette--orange-300: #ec7a08;
@@ -15047,9 +15048,9 @@ label.pf-c-input-group__text {
15047
15048
  --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
15048
15049
  --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
15049
15050
  --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
15050
- --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--gold-50);
15051
+ --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
15051
15052
  --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
15052
- --pf-c-label--m-orange__content--Color: var(--pf-global--palette--gold-700);
15053
+ --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
15053
15054
  --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
15054
15055
  --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
15055
15056
  --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
@@ -15087,6 +15088,16 @@ label.pf-c-input-group__text {
15087
15088
  --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
15088
15089
  --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
15089
15090
  --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
15091
+ --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
15092
+ --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
15093
+ --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
15094
+ --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
15095
+ --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
15096
+ --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
15097
+ --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
15098
+ --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100);
15099
+ --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
15100
+ --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
15090
15101
  --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
15091
15102
  --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
15092
15103
  --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -15243,6 +15254,21 @@ label.pf-c-input-group__text {
15243
15254
  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
15244
15255
  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
15245
15256
  }
15257
+ .pf-c-label.pf-m-gold {
15258
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
15259
+ --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
15260
+ --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
15261
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
15262
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
15263
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
15264
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
15265
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
15266
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
15267
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
15268
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
15269
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
15270
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
15271
+ }
15246
15272
  .pf-c-label.pf-m-outline {
15247
15273
  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
15248
15274
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
package/patternfly.css CHANGED
@@ -171,6 +171,7 @@
171
171
  --pf-global--palette--light-green-500: #6ca100;
172
172
  --pf-global--palette--light-green-600: #486b00;
173
173
  --pf-global--palette--light-green-700: #253600;
174
+ --pf-global--palette--orange-50: #fff6ec;
174
175
  --pf-global--palette--orange-100: #f4b678;
175
176
  --pf-global--palette--orange-200: #ef9234;
176
177
  --pf-global--palette--orange-300: #ec7a08;
@@ -15174,9 +15175,9 @@ label.pf-c-input-group__text {
15174
15175
  --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
15175
15176
  --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
15176
15177
  --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
15177
- --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--gold-50);
15178
+ --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
15178
15179
  --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
15179
- --pf-c-label--m-orange__content--Color: var(--pf-global--palette--gold-700);
15180
+ --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
15180
15181
  --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
15181
15182
  --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
15182
15183
  --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
@@ -15214,6 +15215,16 @@ label.pf-c-input-group__text {
15214
15215
  --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
15215
15216
  --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
15216
15217
  --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
15218
+ --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
15219
+ --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
15220
+ --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
15221
+ --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
15222
+ --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
15223
+ --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
15224
+ --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
15225
+ --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100);
15226
+ --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
15227
+ --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
15217
15228
  --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
15218
15229
  --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
15219
15230
  --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -15370,6 +15381,21 @@ label.pf-c-input-group__text {
15370
15381
  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
15371
15382
  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
15372
15383
  }
15384
+ .pf-c-label.pf-m-gold {
15385
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
15386
+ --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
15387
+ --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
15388
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
15389
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
15390
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
15391
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
15392
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
15393
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
15394
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
15395
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
15396
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
15397
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
15398
+ }
15373
15399
  .pf-c-label.pf-m-outline {
15374
15400
  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
15375
15401
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);