@patternfly/patternfly 4.194.4 → 4.196.1

package/components/SearchInput/search-input.css

@@ -175,4 +175,13 @@
 
 .pf-c-search-input__menu-item-text {
   flex-grow: 1;
+}
+
+:where(.pf-theme-dark) .pf-c-search-input {
+  --pf-c-search-input__text--before--BorderColor: transparent;
+  --pf-c-search-input__text--after--BorderBottomColor: var(--pf-global--BorderColor--400);
+  background-color: var(--pf-global--BackgroundColor--400);
+}
+:where(.pf-theme-dark) .pf-c-search-input__text::before {
+  border-bottom-color: var(--pf-global--BorderColor--400);
 }

package/components/SearchInput/search-input.scss

@@ -206,3 +206,10 @@
 .pf-c-search-input__menu-item-text {
   flex-grow: 1;
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/search-input";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-search-input;
+}

package/components/SearchInput/themes/dark/search-input.scss

@@ -1,4 +1,6 @@
-@mixin search-input() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-search-input() {
   .pf-c-search-input {
     --pf-c-search-input__text--before--BorderColor: transparent;
     --pf-c-search-input__text--after--BorderBottomColor: var(--pf-global--BorderColor--400);

package/components/Select/select.css

@@ -568,4 +568,20 @@
   margin-top: var(--pf-c-select__menu-footer--MarginTop);
   margin-bottom: var(--pf-c-select__menu-footer--MarginBottom);
   box-shadow: var(--pf-c-select__menu-footer--BoxShadow);
+}
+
+:where(.pf-theme-dark) .pf-c-select {
+  --pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
+  --pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-select__toggle--before--BorderTopColor: transparent;
+  --pf-c-select__toggle--before--BorderRightColor: transparent;
+  --pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--400);
+  --pf-c-select__toggle--before--BorderLeftColor: transparent;
+  --pf-c-select__menu--Top: 100%;
+  --pf-c-select__menu--m-top--TranslateY: -100%;
+  --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-select__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
+}
+:where(.pf-theme-dark) .pf-c-select__toggle:disabled, :where(.pf-theme-dark) .pf-c-select__toggle.pf-m-disabled {
+  color: var(--pf-global--palette--black-100);
 }

package/components/Select/select.scss

@@ -694,3 +694,10 @@
   margin-bottom: var(--pf-c-select__menu-footer--MarginBottom);
   box-shadow: var(--pf-c-select__menu-footer--BoxShadow);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/select";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-select;
+}

package/components/Select/themes/dark/select.scss

@@ -1,4 +1,6 @@
-@mixin select() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-select() {
   .pf-c-select {
     --pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
     --pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);

package/components/SimpleList/simple-list.css

@@ -69,4 +69,15 @@
 
 .pf-c-simple-list__section + .pf-c-simple-list__section {
   margin-top: var(--pf-c-simple-list__section--section--MarginTop);
+}
+
+:where(.pf-theme-dark) .pf-c-simple-list {
+  --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--active-color--100);
+  --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
+  --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
+  --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
+  --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
 }

package/components/SimpleList/simple-list.scss

@@ -80,3 +80,10 @@
 .pf-c-simple-list__section + .pf-c-simple-list__section {
   margin-top: var(--pf-c-simple-list__section--section--MarginTop);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/simple-list";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-simple-list;
+}

package/components/SimpleList/themes/dark/simple-list.scss

@@ -1,4 +1,6 @@
-@mixin simple-list() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-simple-list() {
   .pf-c-simple-list {
     --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--active-color--100);
     --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--400);

package/components/Skeleton/skeleton.css

@@ -159,4 +159,10 @@
   100% {
     transform: translateX(100%);
   }
+}
+:where(.pf-theme-dark) .pf-c-skeleton {
+  --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-skeleton--after--LinearGradientColorStop1: var(--pf-global--palette--black-600);
+  --pf-c-skeleton--after--LinearGradientColorStop2: var(--pf-global--palette--black-500);
+  --pf-c-skeleton--after--LinearGradientColorStop3: var(--pf-global--palette--black-600);
 }

package/components/Skeleton/skeleton.scss

@@ -206,3 +206,10 @@
     transform: translateX(100%);
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/skeleton";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-skeleton;
+}

package/components/Skeleton/themes/dark/skeleton.scss

@@ -1,4 +1,6 @@
-@mixin skeleton() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-skeleton() {
   .pf-c-skeleton {
     --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
     --pf-c-skeleton--after--LinearGradientColorStop1: var(--pf-global--palette--black-600);

package/components/Switch/switch.css

@@ -134,4 +134,11 @@
   grid-column: 2;
   color: var(--pf-c-switch__label--Color);
   vertical-align: top;
+}
+
+:where(.pf-theme-dark) .pf-c-switch {
+  --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
+  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);
+  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--100);
+  --pf-c-switch__toggle--before--BoxShadow: none;
 }

package/components/Switch/switch.scss

@@ -170,3 +170,10 @@
   color: var(--pf-c-switch__label--Color);
   vertical-align: top;
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/switch";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-switch;
+}

package/components/Switch/themes/dark/switch.scss

@@ -1,4 +1,6 @@
-@mixin switch() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-switch() {
   .pf-c-switch {
     --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
     --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);

package/components/Table/table.css

@@ -1059,4 +1059,11 @@
 
 .pf-c-table .pf-m-width-100 {
   --pf-c-table--cell--Width: 100%;
+}
+
+:where(.pf-theme-dark) .pf-c-table {
+  --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--150);
+}
+:where(.pf-theme-dark) .pf-c-table__favorite .pf-c-button:hover, :where(.pf-theme-dark) .pf-c-table__favorite .pf-c-button:focus {
+  --pf-c-button--m-plain--Color: var(--pf-global--palette--gold-100);
 }

package/components/Table/table.scss

@@ -1366,3 +1366,10 @@
   --pf-c-table--cell--Width: 100%;
 }
 // stylelint-enable
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/table";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-table;
+}

package/components/Table/themes/dark/table.scss

@@ -1,4 +1,10 @@
-@mixin table() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-table() {
+  .pf-c-table {
+    --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--150);
+  }
+
   .pf-c-table__favorite {
     .pf-c-button {
       &:hover,

package/components/Tabs/tabs.css

@@ -825,4 +825,10 @@
     --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl);
     --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl);
   }
+}
+
+:where(.pf-theme-dark) .pf-c-tabs {
+  --pf-c-tabs__scroll-button--BackgroundColor: transparent;
+  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
 }

package/components/Tabs/tabs.scss

@@ -755,3 +755,10 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   }
 }
 // stylelint-enable
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/tabs";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-tabs;
+}

package/components/Tabs/themes/dark/tabs.scss

@@ -1,4 +1,6 @@
-@mixin tabs() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-tabs() {
   .pf-c-tabs {
     --pf-c-tabs__scroll-button--BackgroundColor: transparent;
     --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);

package/components/Tile/themes/dark/tile.scss

@@ -1,4 +1,6 @@
-@mixin tile() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-tile() {
   .pf-c-tile {
     --pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
     --pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--300);

package/components/Tile/tile.css

@@ -134,4 +134,11 @@
   margin-right: var(--pf-c-tile__icon--MarginRight);
   font-size: var(--pf-c-tile__icon--FontSize);
   color: var(--pf-c-tile__icon--Color);
+}
+
+:where(.pf-theme-dark) .pf-c-tile {
+  --pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--300);
+  --pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--300);
+  --pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--300);
 }

package/components/Tile/tile.scss

@@ -172,3 +172,10 @@
   font-size: var(--pf-c-tile__icon--FontSize);
   color: var(--pf-c-tile__icon--Color);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/tile";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-tile;
+}

package/components/ToggleGroup/themes/dark/toggle-group.scss

@@ -1,4 +1,6 @@
-@mixin toggle-group() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-toggle-group() {
   .pf-c-toggle-group {
     --pf-c-toggle-group__button--hover--BackgroundColor: var(--pf-global--palette--black-700);
     --pf-c-toggle-group__button--focus--BackgroundColor: var(--pf-global--palette--black-700);

package/components/ToggleGroup/toggle-group.css

@@ -100,4 +100,12 @@
 .pf-c-toggle-group__icon + .pf-c-toggle-group__text,
 .pf-c-toggle-group__text + .pf-c-toggle-group__icon {
   margin-left: var(--pf-c-toggle-group__icon--text--MarginLeft);
+}
+
+:where(.pf-theme-dark) .pf-c-toggle-group {
+  --pf-c-toggle-group__button--hover--BackgroundColor: var(--pf-global--palette--black-700);
+  --pf-c-toggle-group__button--focus--BackgroundColor: var(--pf-global--palette--black-700);
+  --pf-c-toggle-group__button--disabled--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-toggle-group__button--disabled--Color: var(--pf-global--palette--black-100);
+  --pf-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-global--primary-color--300);
 }

package/components/ToggleGroup/toggle-group.scss

@@ -134,3 +134,10 @@
 .pf-c-toggle-group__text + .pf-c-toggle-group__icon {
   margin-left: var(--pf-c-toggle-group__icon--text--MarginLeft);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/toggle-group";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-toggle-group;
+}

package/components/Tooltip/themes/dark/tooltip.scss

@@ -1,4 +1,6 @@
-@mixin tooltip() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-tooltip() {
   .pf-c-tooltip {
     --pf-c-tooltip--BoxShadow: none;
     --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);

package/components/Tooltip/tooltip.css

@@ -80,4 +80,17 @@
   height: var(--pf-c-tooltip__arrow--Height);
   pointer-events: none;
   background-color: var(--pf-c-tooltip__content--BackgroundColor);
+}
+
+:where(.pf-theme-dark) .pf-c-tooltip {
+  --pf-c-tooltip--BoxShadow: none;
+  --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
+}
+:where(.pf-theme-dark) .pf-c-tooltip,
+:where(.pf-theme-dark) .pf-c-tooltip__arrow {
+  border: var(--pf-global--BorderWidth--lg) solid var(--pf-global--BorderColor--300);
+}
+:where(.pf-theme-dark) .pf-c-tooltip__arrow {
+  --pf-c-tooltip__arrow--Width: 0.9375rem;
+  --pf-c-tooltip__arrow--Height: 0.9375rem;
 }

package/components/Tooltip/tooltip.scss

@@ -124,3 +124,10 @@
   pointer-events: none;
   background-color: var(--pf-c-tooltip__content--BackgroundColor);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/tooltip";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-tooltip;
+}

package/components/TreeView/themes/dark/tree-view.scss

@@ -1,4 +1,6 @@
-@mixin tree-view() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-tree-view() {
   .pf-c-tree-view {
     --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
     --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);

package/components/TreeView/tree-view.css

@@ -425,4 +425,9 @@
   --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
   --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 9 + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
   --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
+}
+
+:where(.pf-theme-dark) .pf-c-tree-view {
+  --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
 }

package/components/TreeView/tree-view.scss

@@ -486,3 +486,10 @@ $pf-c-tree-view--MaxNesting: 10;
   }
 }
 // stylelint-enable
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/tree-view";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-tree-view;
+}

package/components/Wizard/themes/dark/wizard.scss

@@ -1,4 +1,6 @@
-@mixin wizard() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-wizard() {
   .pf-c-wizard {
     --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--disabled-color--300);
     --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--disabled-color--300);
@@ -7,6 +9,6 @@
   }
 
   .pf-c-wizard__header {
-    @include pf-t-dark;
+    @include pf-theme-dark--t-dark;
   }
 }

package/components/Wizard/wizard.css

@@ -509,4 +509,38 @@
 
 .pf-c-wizard__footer-cancel {
   margin-left: var(--pf-c-wizard__footer-cancel--MarginLeft);
+}
+
+:where(.pf-theme-dark) .pf-c-wizard__header {
+  --pf-global--Color--100: #fff;
+  --pf-global--Color--200: #aaabac;
+  --pf-global--BorderColor--100: #444548;
+  --pf-global--primary-color--100: #1fa7f8;
+  --pf-global--link--Color: #1fa7f8;
+  --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--BackgroundColor--100: #1b1d21;
+}
+:where(.pf-theme-dark) .pf-c-wizard__header .pf-c-button {
+  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
+  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
+}
+
+:where(.pf-theme-dark) .pf-c-wizard {
+  --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--disabled-color--300);
+  --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--disabled-color--300);
+  --pf-c-wizard__nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-wizard__outer-wrap--BackgroundColor: var(--pf-global--BackgroundColor--300);
+}
+:where(.pf-theme-dark) .pf-c-wizard__header {
+  color: var(--pf-global--Color--100);
 }

package/components/Wizard/wizard.scss

@@ -557,3 +557,10 @@
 .pf-c-wizard__footer-cancel {
   margin-left: var(--pf-c-wizard__footer-cancel--MarginLeft);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/wizard";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-wizard;
+}

package/docs/components/FormControl/examples/FormControl.md

@@ -8,6 +8,8 @@ cssPrefix: pf-c-form-control
 
 ### Input
 
+**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.
+
 ```html
 <input
   class="pf-c-form-control"

package/docs/components/Label/examples/Label.md

@@ -580,6 +580,88 @@ cssPrefix: pf-c-label
   </button>
 </span>
 
+<br />
+<br />
+
+<span class="pf-c-label pf-m-gold">
+  <span class="pf-c-label__content">Gold</span>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <span class="pf-c-label__content">
+    <span class="pf-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    Gold icon
+  </span>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <span class="pf-c-label__content">Gold removable</span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-removable-button gold-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <span class="pf-c-label__content">
+    <span class="pf-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    Gold icon removable
+  </span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-icon-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-icon-removable-button gold-icon-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <a class="pf-c-label__content" href="#">Gold link</a>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <a class="pf-c-label__content" href="#">Gold link removable</a>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-link-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-link-removable-button gold-link-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <span class="pf-c-label__content">
+    <span class="pf-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    <span class="pf-c-label__text">Gold label with icon that truncates</span>
+  </span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-truncate-button"
+    aria-label="Remove"
+    aria-labelledby="gold-truncate-button gold-truncate-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
 ```
 
 ### Outline
@@ -1030,6 +1112,70 @@ cssPrefix: pf-c-label
   </button>
 </span>
 
+<br />
+<br />
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <span class="pf-c-label__content">Gold</span>
+</span>
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <span class="pf-c-label__content">
+    <span class="pf-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    Gold icon
+  </span>
+</span>
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <span class="pf-c-label__content">Gold removable</span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-outline-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-outline-removable-button gold-outline-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <span class="pf-c-label__content">
+    <span class="pf-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    Gold icon removable
+  </span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-outline-icon-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-outline-icon-removable-button gold-outline-icon-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <a class="pf-c-label__content" href="#">Gold link</a>
+</span>
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <a class="pf-c-label__content" href="#">Gold link removable</a>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-outline-link-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-outline-link-removable-button gold-outline-link-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
 ```
 
 ### Compact
@@ -1238,5 +1384,6 @@ This style of label is used to add new labels to a label group.
 | `.pf-m-red`                  | `.pf-c-label`               | Modifies the label to have red colored styling.                                                                                                                                                                          |
 | `.pf-m-purple`               | `.pf-c-label`               | Modifies the label to have purple colored styling.                                                                                                                                                                       |
 | `.pf-m-cyan`                 | `.pf-c-label`               | Modifies the label to have cyan colored styling.                                                                                                                                                                         |
+| `.pf-m-gold`                 | `.pf-c-label`               | Modifies the label to have gold colored styling.                                                                                                                                                                         |
 | `.pf-m-editable`             | `.pf-c-label`               | Modifies label for editable styles.                                                                                                                                                                                      |
 | `.pf-m-editable-active`      | `.pf-c-label.pf-m-editable` | Modifies editable label for active styles.                                                                                                                                                                               |