From 47a223d2944af224c81a9ac2a1cdd4665baf8ee4 Mon Sep 17 00:00:00 2001
From: Michael Coker <35148959+mcoker@users.noreply.github.com>
Date: Mon, 20 Mar 2023 20:18:48 -0500
Subject: [PATCH] fix(global): rename default status color to custom (#5418)

* fix(global): rename default status color to custom

* chore(text): update default/custom docs

* chore(examples): update example text

* chore(notification-drawer): updated list-item docs

removed explicit state classes, unbolded that part to match alert and button, which say the same thing.
---
 src/patternfly/base/_variables.scss           |  6 ++---
 src/patternfly/components/Alert/alert.scss    | 22 +++++++++++++---
 .../components/Alert/examples/Alert.md        | 26 +++++++++----------
 .../components/Alert/themes/dark/alert.scss   |  2 +-
 .../AlertGroup/examples/AlertGroup.md         |  8 +++---
 .../components/Icon/examples/Icon.md          |  4 +--
 src/patternfly/components/Icon/icon.scss      |  6 ++---
 src/patternfly/components/Label/label.scss    |  8 +++---
 .../components/Label/themes/dark/label.scss   |  4 +--
 .../components/ModalBox/examples/ModalBox.md  | 10 +++----
 .../ModalBox/modal-box-title-icon.hbs         |  2 +-
 .../components/ModalBox/modal-box-title.hbs   |  2 +-
 .../components/ModalBox/modal-box.hbs         |  2 +-
 .../components/ModalBox/modal-box.scss        |  6 ++---
 .../examples/NotificationDrawer.md            |  4 +--
 .../notification-drawer-basic-list.hbs        |  4 +--
 ...ification-drawer-list-item-header-icon.hbs |  2 +-
 ...fication-drawer-list-item-header-title.hbs |  4 +--
 .../notification-drawer-list-item.hbs         |  4 +--
 .../notification-drawer.scss                  | 10 +++----
 .../components/Popover/examples/Popover.md    | 12 ++++-----
 .../components/Popover/popover-title-text.hbs |  4 +--
 .../components/Popover/popover-title.hbs      |  2 +-
 src/patternfly/components/Popover/popover.hbs |  2 +-
 .../components/Popover/popover.scss           | 10 +++----
 .../Popover/themes/dark/popover.scss          |  2 +-
 .../sass-utilities/scss-variables.scss        |  6 ++---
 .../utilities/Text/examples/Text.md           | 14 +++++-----
 src/patternfly/utilities/Text/text.scss       | 12 ++++-----
 .../utilities/Text/themes/dark/text.scss      |  4 +--
 30 files changed, 109 insertions(+), 95 deletions(-)

diff --git a/src/patternfly/base/_variables.scss b/src/patternfly/base/_variables.scss
index 74f601fb35..7b16de5f1c 100644
--- a/src/patternfly/base/_variables.scss
+++ b/src/patternfly/base/_variables.scss
@@ -123,9 +123,9 @@
   --pf-global--primary-color--light-100: #{$pf-global--primary-color--light-100};
   --pf-global--primary-color--dark-100: #{$pf-global--primary-color--dark-100};
   --pf-global--secondary-color--100: #{$pf-global--secondary-color--100};
-  --pf-global--default-color--100: #{$pf-global--default-color--100};
-  --pf-global--default-color--200: #{$pf-global--default-color--200};
-  --pf-global--default-color--300: #{$pf-global--default-color--300};
+  --pf-global--custom-color--100: #{$pf-global--custom-color--100};
+  --pf-global--custom-color--200: #{$pf-global--custom-color--200};
+  --pf-global--custom-color--300: #{$pf-global--custom-color--300};
   --pf-global--success-color--100: #{$pf-global--success-color--100};
   --pf-global--success-color--200: #{$pf-global--success-color--200};
   --pf-global--info-color--100: #{$pf-global--info-color--100};
diff --git a/src/patternfly/components/Alert/alert.scss b/src/patternfly/components/Alert/alert.scss
index 25d9805438..1ee86faa21 100644
--- a/src/patternfly/components/Alert/alert.scss
+++ b/src/patternfly/components/Alert/alert.scss
@@ -8,7 +8,7 @@
     ". description description"
     ". actiongroup actiongroup";
   --pf-c-alert--BorderTopWidth: var(--pf-global--BorderWidth--md);
-  --pf-c-alert--BorderTopColor: var(--pf-global--default-color--200);
+  --pf-c-alert--BorderTopColor: var(--pf-global--BorderColor--100);
   --pf-c-alert--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-alert--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-alert--PaddingBottom: var(--pf-global--spacer--md);
@@ -25,14 +25,14 @@
   --pf-c-alert__toggle-icon--Transition: var(--pf-global--Transition);
 
   // Icon
-  --pf-c-alert__icon--Color: var(--pf-global--default-color--200);
+  --pf-c-alert__icon--Color: var(--pf-global--Color--100);
   --pf-c-alert__icon--MarginTop: #{pf-size-prem(1px)};
   --pf-c-alert__icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-alert__icon--FontSize: var(--pf-global--icon--FontSize--md);
 
   // Title
   --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--bold);
-  --pf-c-alert__title--Color: var(--pf-global--default-color--300);
+  --pf-c-alert__title--Color: var(--pf-global--Color--100);
   --pf-c-alert__title--max-lines: 1;
 
   // Action
@@ -51,6 +51,11 @@
   --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
   --pf-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-global--spacer--lg);
 
+  // Custom
+  --pf-c-alert--m-custom--BorderTopColor: var(--pf-global--custom-color--200);
+  --pf-c-alert--m-custom__icon--Color: var(--pf-global--custom-color--200);
+  --pf-c-alert--m-custom__title--Color: var(--pf-global--custom-color--300);
+
   // Success
   --pf-c-alert--m-success--BorderTopColor: var(--pf-global--success-color--100);
   --pf-c-alert--m-success__icon--Color: var(--pf-global--success-color--100);
@@ -73,7 +78,9 @@
 
   // Inline
   --pf-c-alert--m-inline--BoxShadow: none;
-  --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--cyan-50);
+
+  // Inline custom
+  --pf-c-alert--m-inline--m-custom--BackgroundColor: var(--pf-global--palette--cyan-50);
 
   // Inline success
   --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--green-50);
@@ -119,6 +126,13 @@
   border-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor);
   box-shadow: var(--pf-c-alert--BoxShadow);
 
+  &.pf-m-custom {
+    --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-custom--BorderTopColor);
+    --pf-c-alert__icon--Color: var(--pf-c-alert--m-custom__icon--Color);
+    --pf-c-alert__title--Color: var(--pf-c-alert--m-custom__title--Color);
+    --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-custom--BackgroundColor);
+  }
+  
   &.pf-m-success {
     --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor);
     --pf-c-alert__icon--Color: var(--pf-c-alert--m-success__icon--Color);
diff --git a/src/patternfly/components/Alert/examples/Alert.md b/src/patternfly/components/Alert/examples/Alert.md
index a937dae28f..82f1203d12 100644
--- a/src/patternfly/components/Alert/examples/Alert.md
+++ b/src/patternfly/components/Alert/examples/Alert.md
@@ -7,11 +7,11 @@ cssPrefix: pf-c-alert
 ## Examples
 ### Types
 ```hbs
-{{#> alert alert--attribute='aria-label="Default alert"'}}
+{{#> alert alert--modifier="pf-m-custom" alert--attribute='aria-label="Custom alert"'}}
   {{> alert-icon alert-icon--type="bell"}}
   {{#> alert-title}}
-    {{#> screen-reader}}Default alert:{{/screen-reader}}
-    Default alert title
+    {{#> screen-reader}}Custom alert:{{/screen-reader}}
+    Custom alert title
   {{/alert-title}}
 {{/alert}}
 <br>
@@ -157,11 +157,11 @@ cssPrefix: pf-c-alert
 
 ### Inline types
 ```hbs
-{{#> alert alert--modifier="pf-m-inline" alert--attribute='aria-label="Inline default alert"'}}
+{{#> alert alert--modifier="pf-m-custom pf-m-inline" alert--attribute='aria-label="Inline custom alert"'}}
   {{> alert-icon alert-icon--type="bell"}}
   {{#> alert-title}}
-    {{#> screen-reader}}Default inline alert:{{/screen-reader}}
-    Default inline alert title
+    {{#> screen-reader}}Custom inline alert:{{/screen-reader}}
+    Custom inline alert title
   {{/alert-title}}
 {{/alert}}
 <br>
@@ -404,13 +404,10 @@ cssPrefix: pf-c-alert
 ```
 
 ## Documentation
-### Overview
-Add a modifier class to the default alert to change the color: `.pf-m-success`, `.pf-m-danger`, `.pf-m-warning`, or `.pf-m-info`.
-
 ### Usage
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-c-alert` | `<div>` | Applies default alert styling. Always use with a modifier class. **Required** |
+| `.pf-c-alert` | `<div>` | Initiates the alert component. Always use with a status modifier class. **Required** |
 | `.pf-c-alert__toggle` | `<div>` | Defines the expandable alert toggle icon. **Required for expandable alerts** |
 | `.pf-c-alert__toggle-icon` | `<span>` | Defines the expandable alert toggle icon. **Required for expandable alerts** |
 | `.pf-c-alert__icon` | `<div>` | Defines the alert icon. **Required** |
@@ -418,10 +415,11 @@ Add a modifier class to the default alert to change the color: `.pf-m-success`,
 | `.pf-c-alert__description` | `<div>` | Defines the alert description area. |
 | `.pf-c-alert__action` | `<div>` | Defines the action button wrapper. Should contain `.pf-c-button.pf-m-plain` for close action or `.pf-c-button.pf-m-link` for link text. It should only include one action. |
 | `.pf-c-alert__action-group` | `<div>` | Defines the action button group. Should contain `.pf-c-button.pf-m-link.pf-m-inline` for inline link text. **Note:** only inline link buttons are supported in the alert action group. |
-| `.pf-m-success` | `.pf-c-alert` | Applies success styling. |
-| `.pf-m-danger` | `.pf-c-alert` | Applies danger styling. |
-| `.pf-m-warning` | `.pf-c-alert` | Applies warning styling. |
-| `.pf-m-info` | `.pf-c-alert` | Applies info styling. |
+| `.pf-m-custom` | `.pf-c-alert` | Applies custom status styling. |
+| `.pf-m-success` | `.pf-c-alert` | Applies success status styling. |
+| `.pf-m-danger` | `.pf-c-alert` | Applies danger status styling. |
+| `.pf-m-warning` | `.pf-c-alert` | Applies warning status styling. |
+| `.pf-m-info` | `.pf-c-alert` | Applies info status styling. |
 | `.pf-m-inline` | `.pf-c-alert` | Applies inline styling. |
 | `.pf-m-plain` | `.pf-c-alert.pf-m-inline` | Applies plain styling to an inline alert. |
 | `.pf-m-expandable` | `.pf-c-alert` | Applies expandable styles to the alert. |
diff --git a/src/patternfly/components/Alert/themes/dark/alert.scss b/src/patternfly/components/Alert/themes/dark/alert.scss
index 46428f9da3..e3ade9ceac 100644
--- a/src/patternfly/components/Alert/themes/dark/alert.scss
+++ b/src/patternfly/components/Alert/themes/dark/alert.scss
@@ -3,7 +3,7 @@
 @mixin pf-theme-dark-alert() {
   .pf-c-alert {
     --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-600);
-    --pf-c-alert__title--Color: var(--pf-global--default-color--200);
+    --pf-c-alert__title--Color: var(--pf-global--custom-color--200);
     --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--100);
     --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--100);
     --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--100);
diff --git a/src/patternfly/components/AlertGroup/examples/AlertGroup.md b/src/patternfly/components/AlertGroup/examples/AlertGroup.md
index fabeaa50e9..3e16da8bbf 100644
--- a/src/patternfly/components/AlertGroup/examples/AlertGroup.md
+++ b/src/patternfly/components/AlertGroup/examples/AlertGroup.md
@@ -48,6 +48,7 @@ cssPrefix: pf-c-alert-group
 
 ### Overview
 `.pf-c-alert-group` is optional when only one alert is needed. It becomes required when more than one alert is used in a list.
+
 ### Usage
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
@@ -125,11 +126,12 @@ For sighted users, interactive elements can be included in this message in one o
 - Using a link to the Builds page: “The build is complete. Go to the [Builds]() page to download” using `<a href="url">Builds</a>`
 - Using a button to download: “The build is complete. Go to the Builds page to [download]()" using `<button class="pf-c-button pf-m-link pf-m-inline type="button">download</button>`
 
+## Documentation
+### Overview
+Alert groups are used to contain and align consecutive alerts. Groups can either be embedded alongside a page's content or in the top-right corner as a toast group using the `.pf-m-toast` modifier.
+
 ### Modifiers
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-m-toast`| `.pf-c-alert-group` | Applies toast alert styling to an alert group. |
 | `.pf-c-alert-group__overflow-button` | `<button>` | Applies overflow button styling to an alert group overflow button. |
-## Documentation
-### Overview
-Alert groups are used to contain and align consecutive alerts. Groups can either be embedded alongside a page's content or in the top-right corner as a toast group using the `.pf-m-toast` modifier.
diff --git a/src/patternfly/components/Icon/examples/Icon.md b/src/patternfly/components/Icon/examples/Icon.md
index 3b04386f06..cd4856b29c 100644
--- a/src/patternfly/components/Icon/examples/Icon.md
+++ b/src/patternfly/components/Icon/examples/Icon.md
@@ -80,7 +80,7 @@ cssPrefix: pf-c-icon
   {{/icon-content}}
 {{/icon}}
 {{#> icon}}
-  {{#> icon-content icon-content--modifier="pf-m-default"}}
+  {{#> icon-content icon-content--modifier="pf-m-custom"}}
     <i class="fas fa-bell" aria-hidden="true"></i>
   {{/icon-content}}
 {{/icon}}
@@ -213,4 +213,4 @@ Refer to the [icons](/guidelines/icons) page for information about the PatternFl
 | `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon` | Modifies the icon container to be small, medium, large, or extra large. |
 | `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon__content`, `pf-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
 | `.pf-m-in-progress` | `.pf-c-icon` | Shows the progress element in place of the icon content.  |
-| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-default`  | `.pf-c-icon__content` | Modifies the icon content to use a status color.  |
+| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-custom`  | `.pf-c-icon__content` | Modifies the icon content to use a status color.  |
diff --git a/src/patternfly/components/Icon/icon.scss b/src/patternfly/components/Icon/icon.scss
index c91ea03e4e..9d0247a0dd 100644
--- a/src/patternfly/components/Icon/icon.scss
+++ b/src/patternfly/components/Icon/icon.scss
@@ -25,7 +25,7 @@
   --pf-c-icon__content--m-warning--Color: var(--pf-global--warning-color--100);
   --pf-c-icon__content--m-success--Color: var(--pf-global--success-color--100);
   --pf-c-icon__content--m-info--Color: var(--pf-global--info-color--100);
-  --pf-c-icon__content--m-default--Color: var(--pf-global--default-color--100);
+  --pf-c-icon__content--m-custom--Color: var(--pf-global--custom-color--100);
   --pf-c-icon__content--FontSize: var(--pf-global--icon--FontSize--md);
   --pf-c-icon--m-inline__content--FontSize: 1em;
   --pf-c-icon__content--svg--VerticalAlign: -.125em;
@@ -135,8 +135,8 @@
     --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
   }
 
-  &.pf-m-default {
-    --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
+  &.pf-m-custom {
+    --pf-c-icon__content--Color: var(--pf-c-icon__content--m-custom--Color);
   }
 }
 
diff --git a/src/patternfly/components/Label/label.scss b/src/patternfly/components/Label/label.scss
index 20587ed170..48cf51de04 100644
--- a/src/patternfly/components/Label/label.scss
+++ b/src/patternfly/components/Label/label.scss
@@ -93,11 +93,11 @@
 
   // Cyan
   --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--palette--cyan-50);
-  --pf-c-label--m-cyan__icon--Color: var(--pf-global--default-color--200);
-  --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--300);
+  --pf-c-label--m-cyan__icon--Color: var(--pf-global--custom-color--200);
+  --pf-c-label--m-cyan__content--Color: var(--pf-global--custom-color--300);
   --pf-c-label--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
-  --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--default-color--200);
-  --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--default-color--200);
+  --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--custom-color--200);
+  --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--custom-color--200);
   --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--palette--cyan-400);
   --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
   --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
diff --git a/src/patternfly/components/Label/themes/dark/label.scss b/src/patternfly/components/Label/themes/dark/label.scss
index 8773e20503..e0f8c2a9e4 100644
--- a/src/patternfly/components/Label/themes/dark/label.scss
+++ b/src/patternfly/components/Label/themes/dark/label.scss
@@ -38,8 +38,8 @@
     --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-100);
     --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-100);
     --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-300);
-    --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--200);
-    --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--default-color--200);
+    --pf-c-label--m-cyan__content--Color: var(--pf-global--custom-color--200);
+    --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--custom-color--200);
     --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
     --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--palette--cyan-100);
     --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
diff --git a/src/patternfly/components/ModalBox/examples/ModalBox.md b/src/patternfly/components/ModalBox/examples/ModalBox.md
index 2b12992b1a..a4437f77d2 100644
--- a/src/patternfly/components/ModalBox/examples/ModalBox.md
+++ b/src/patternfly/components/ModalBox/examples/ModalBox.md
@@ -189,14 +189,14 @@ import './ModalBox.css'
 {{/modal-example}}
 ```
 
-### Default alert
+### Custom alert
 ```hbs isFullscreen
-{{#> modal-example modal-example--id="default-alert"}}
-  {{#> modal-box modal-box--attribute=(concat 'aria-labelledby="' modal-example--id '-title" aria-describedby="' modal-example--id '-description"') modal-box--IsAlert="true" modal-box--IsDefaultAlert="true"}}
+{{#> modal-example modal-example--id="custom-alert"}}
+  {{#> modal-box modal-box--attribute=(concat 'aria-labelledby="' modal-example--id '-title" aria-describedby="' modal-example--id '-description"') modal-box--IsAlert="true" modal-box--IsCustomAlert="true"}}
     {{> modal-box-close}}
     {{#> modal-box-header}}
       {{#> modal-box-title modal-box-title--IsIcon="true" modal-box-title--attribute=(concat 'id="' modal-example--id '-title"')}}
-        Default alert modal title
+        Custom alert modal title
       {{/modal-box-title}}
     {{/modal-box-header}}
     {{#> modal-box-body modal-box-body--attribute=(concat 'id="' modal-example--id '-description"')}}
@@ -327,7 +327,7 @@ A modal box is a generic rectangular container that can be used to build modals.
 | `.pf-m-lg` | `.pf-c-modal-box` | Modifies for a large modal box width. |
 | `.pf-m-align-top` | `.pf-c-modal-box` | Modifies for top alignment.  |
 | `.pf-m-icon` | `.pf-c-modal-box__title` | Modifies the title layout to accommodate an icon. |
-| `.pf-m-default` | `.pf-c-modal-box` | Modifies for the default alert state. |
+| `.pf-m-custom` | `.pf-c-modal-box` | Modifies for the custom alert state. |
 | `.pf-m-info` | `.pf-c-modal-box` | Modifies for the info alert state. |
 | `.pf-m-success` | `.pf-c-modal-box` | Modifies for the success alert state. |
 | `.pf-m-warning` | `.pf-c-modal-box` | Modifies for the warning alert state. |
diff --git a/src/patternfly/components/ModalBox/modal-box-title-icon.hbs b/src/patternfly/components/ModalBox/modal-box-title-icon.hbs
index fcf2c6a30a..2f56ddeac9 100644
--- a/src/patternfly/components/ModalBox/modal-box-title-icon.hbs
+++ b/src/patternfly/components/ModalBox/modal-box-title-icon.hbs
@@ -2,7 +2,7 @@
   {{#if modal-box-title-icon--attribute}}
     {{{modal-box-title-icon--attribute}}}
   {{/if}}>
-  {{#if modal-box--IsDefaultAlert}}
+  {{#if modal-box--IsCustomAlert}}
     <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
   {{else if modal-box--IsInfoAlert}}
     <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
diff --git a/src/patternfly/components/ModalBox/modal-box-title.hbs b/src/patternfly/components/ModalBox/modal-box-title.hbs
index f81097cca1..3c75c8c4f7 100644
--- a/src/patternfly/components/ModalBox/modal-box-title.hbs
+++ b/src/patternfly/components/ModalBox/modal-box-title.hbs
@@ -7,7 +7,7 @@
   {{/if}}
   {{#if modal-box--IsAlert}}
     <span class="pf-u-screen-reader">
-      {{#if modal-box--IsDefaultAlert}}
+      {{#if modal-box--IsCustomAlert}}
         Default
       {{else if modal-box--IsInfoAlert}}
         Info
diff --git a/src/patternfly/components/ModalBox/modal-box.hbs b/src/patternfly/components/ModalBox/modal-box.hbs
index 4652375da4..6a673a95a0 100644
--- a/src/patternfly/components/ModalBox/modal-box.hbs
+++ b/src/patternfly/components/ModalBox/modal-box.hbs
@@ -1,4 +1,4 @@
-<div class="pf-c-modal-box{{#if modal-box--IsDangerAlert}} pf-m-danger{{else if modal-box--IsWarningAlert}} pf-m-warning{{else if modal-box--IsSuccessAlert}} pf-m-success{{else if modal-box--IsInfoAlert}} pf-m-info{{else if modal-box--IsDefaultAlert}} pf-m-default{{/if}}{{#if modal-box--modifier}} {{modal-box--modifier}}{{/if}}"
+<div class="pf-c-modal-box{{#if modal-box--IsDangerAlert}} pf-m-danger{{else if modal-box--IsWarningAlert}} pf-m-warning{{else if modal-box--IsSuccessAlert}} pf-m-success{{else if modal-box--IsInfoAlert}} pf-m-info{{else if modal-box--IsCustomAlert}} pf-m-custom{{/if}}{{#if modal-box--modifier}} {{modal-box--modifier}}{{/if}}"
   role="dialog"
   aria-modal="true"
   {{#if modal-box--attribute}}
diff --git a/src/patternfly/components/ModalBox/modal-box.scss b/src/patternfly/components/ModalBox/modal-box.scss
index e9d1d4b6ad..5b28ad17bb 100644
--- a/src/patternfly/components/ModalBox/modal-box.scss
+++ b/src/patternfly/components/ModalBox/modal-box.scss
@@ -19,7 +19,7 @@
   --pf-c-modal-box--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
   --pf-c-modal-box--m-success__title-icon--Color: var(--pf-global--success-color--100);
   --pf-c-modal-box--m-info__title-icon--Color: var(--pf-global--info-color--100);
-  --pf-c-modal-box--m-default__title-icon--Color: var(--pf-global--default-color--200);
+  --pf-c-modal-box--m-custom__title-icon--Color: var(--pf-global--custom-color--200);
 
   @media (min-width: $pf-global--breakpoint--xl) {
     --pf-c-modal-box--m-align-top--spacer: var(--pf-c-modal-box--m-align-top--xl--spacer);
@@ -107,8 +107,8 @@
     --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-success__title-icon--Color);
   }
 
-  &.pf-m-default {
-    --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-default__title-icon--Color);
+  &.pf-m-custom {
+    --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-custom__title-icon--Color);
   }
 
   &.pf-m-info {
diff --git a/src/patternfly/components/NotificationDrawer/examples/NotificationDrawer.md b/src/patternfly/components/NotificationDrawer/examples/NotificationDrawer.md
index 1f69535026..01bd199955 100644
--- a/src/patternfly/components/NotificationDrawer/examples/NotificationDrawer.md
+++ b/src/patternfly/components/NotificationDrawer/examples/NotificationDrawer.md
@@ -124,7 +124,7 @@ cssPrefix: pf-c-notification-drawer
 | `.pf-c-notification-drawer__header-action-close` | `<div>` | Initiates the notification drawer header action button. |
 | `.pf-c-notification-drawer__body` | `<div>` | Initiates the notification drawer body. **Required** |
 | `.pf-c-notification-drawer__list` | `<ul>` | Initiates a notification list. **Required** |
-| `.pf-c-notification-drawer__list-item` | `<li>` | Initiates a notification list item. **Always use with a state modifier - one of `.pf-m-info`, `.pf-m-warning`, `.pf-m-danger`, `.pf-m-success`.** **Required** |
+| `.pf-c-notification-drawer__list-item` | `<li>` | Initiates a notification list item. Always use with a state modifier class. **Required** |
 | `.pf-c-notification-drawer__list-item-header` | `<div>` | Initiates a notification list item header. **Required** |
 | `.pf-c-notification-drawer__list-item-header-icon` | `<span>` | Initiates a notification list item header icon. **Required** |
 | `.pf-c-notification-drawer__list-item-header-title` | `<h2>` | Initiates a notification list item header title. **Required** |
@@ -137,7 +137,7 @@ cssPrefix: pf-c-notification-drawer
 | `.pf-c-notification-drawer__group-title` | `<div>` | Initiates a notification group toggle title. **Required** |
 | `.pf-c-notification-drawer__group-count` | `<div>` | Initiates a notification group toggle count. |
 | `.pf-c-notification-drawer__group-icon` | `<span>` | Initiates a notification group toggle icon. **Required** |
-| `.pf-m-default` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the default state. |
+| `.pf-m-custom` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the custom state. |
 | `.pf-m-info` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the info state. |
 | `.pf-m-warning` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the warning state. |
 | `.pf-m-danger` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the danger state. |
diff --git a/src/patternfly/components/NotificationDrawer/notification-drawer-basic-list.hbs b/src/patternfly/components/NotificationDrawer/notification-drawer-basic-list.hbs
index 5b19e139d9..d21e39803e 100644
--- a/src/patternfly/components/NotificationDrawer/notification-drawer-basic-list.hbs
+++ b/src/patternfly/components/NotificationDrawer/notification-drawer-basic-list.hbs
@@ -41,7 +41,7 @@
       {{/notification-drawer-list-item-timestamp}}
     {{/notification-drawer-list-item}}
   {{else}}
-    {{#> notification-drawer-list-item notification-drawer-list-item--IsDefault="true" notification-drawer-list-item--IsRead=notification-drawer-basic-list--AllRead}}
+    {{#> notification-drawer-list-item notification-drawer-list-item--IsCustom="true" notification-drawer-list-item--IsRead=notification-drawer-basic-list--AllRead}}
       {{#> notification-drawer-list-item-header}}
         {{> notification-drawer-list-item-header-icon}}
         {{#> notification-drawer-list-item-header-title}}
@@ -65,7 +65,7 @@
     {{/notification-drawer-list-item}}
   {{/if}}
 
-  {{#> notification-drawer-list-item notification-drawer-list-item--IsDefault="true" notification-drawer-list-item--IsRead=notification-drawer-basic-list--AllRead}}
+  {{#> notification-drawer-list-item notification-drawer-list-item--IsCustom="true" notification-drawer-list-item--IsRead=notification-drawer-basic-list--AllRead}}
     {{#> notification-drawer-list-item-header}}
       {{> notification-drawer-list-item-header-icon}}
       {{#> notification-drawer-list-item-header-title}}
diff --git a/src/patternfly/components/NotificationDrawer/notification-drawer-list-item-header-icon.hbs b/src/patternfly/components/NotificationDrawer/notification-drawer-list-item-header-icon.hbs
index 2255244fb5..2f75222bde 100644
--- a/src/patternfly/components/NotificationDrawer/notification-drawer-list-item-header-icon.hbs
+++ b/src/patternfly/components/NotificationDrawer/notification-drawer-list-item-header-icon.hbs
@@ -10,7 +10,7 @@
     <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
   {{else if notification-drawer-list-item--IsSuccess}}
     <i class="fas fa-check-circle" aria-hidden="true"></i>
-  {{else if notification-drawer-list-item--IsDefault}}
+  {{else if notification-drawer-list-item--IsCustom}}
     <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
   {{/if}}
 </span>
diff --git a/src/patternfly/components/NotificationDrawer/notification-drawer-list-item-header-title.hbs b/src/patternfly/components/NotificationDrawer/notification-drawer-list-item-header-title.hbs
index 2e86146622..7f42d2b788 100644
--- a/src/patternfly/components/NotificationDrawer/notification-drawer-list-item-header-title.hbs
+++ b/src/patternfly/components/NotificationDrawer/notification-drawer-list-item-header-title.hbs
@@ -11,8 +11,8 @@
       Danger notification:
     {{else if notification-drawer-list-item--IsSuccess}}
       Success notification:
-    {{else if notification-drawer-list-item--IsDefault}}
-      Default notification:
+    {{else if notification-drawer-list-item--IsCustom}}
+      Custom notification:
     {{/if}}
   </span>
   {{> @partial-block}}
diff --git a/src/patternfly/components/NotificationDrawer/notification-drawer-list-item.hbs b/src/patternfly/components/NotificationDrawer/notification-drawer-list-item.hbs
index 566756bb13..35c87e5961 100644
--- a/src/patternfly/components/NotificationDrawer/notification-drawer-list-item.hbs
+++ b/src/patternfly/components/NotificationDrawer/notification-drawer-list-item.hbs
@@ -12,8 +12,8 @@
     pf-m-danger
   {{else if notification-drawer-list-item--IsSuccess}}
     pf-m-success
-  {{else if notification-drawer-list-item--IsDefault}}
-    pf-m-default
+  {{else if notification-drawer-list-item--IsCustom}}
+    pf-m-custom
   {{/if}}
   {{#if notification-drawer-list-item--modifier}} {{notification-drawer-list-item--modifier}}{{/if}}"
   {{#unless notification-drawer-list-item--IsRead}}
diff --git a/src/patternfly/components/NotificationDrawer/notification-drawer.scss b/src/patternfly/components/NotificationDrawer/notification-drawer.scss
index f4f9b6244a..0f01c26de4 100644
--- a/src/patternfly/components/NotificationDrawer/notification-drawer.scss
+++ b/src/patternfly/components/NotificationDrawer/notification-drawer.scss
@@ -38,8 +38,8 @@
   --pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor: var(--pf-global--danger-color--100);
   --pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color: var(--pf-global--success-color--100);
   --pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor: var(--pf-global--success-color--100);
-  --pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color: var(--pf-global--default-color--200);
-  --pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor: var(--pf-global--default-color--200);
+  --pf-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color: var(--pf-global--custom-color--200);
+  --pf-c-notification-drawer__list-item--m-custom__list-item--before--BackgroundColor: var(--pf-global--custom-color--200);
   --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-notification-drawer__list-item--m-read--BorderBottomColor: var(--pf-global--BorderColor--100);
   --pf-c-notification-drawer__list-item--m-read--before--Top: calc(var(--pf-c-notification-drawer__list-item--BorderBottomWidth) * -1);
@@ -183,9 +183,9 @@
     --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color);
   }
 
-  &.pf-m-default {
-    --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor);
-    --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color);
+  &.pf-m-custom {
+    --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-custom__list-item--before--BackgroundColor);
+    --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color);
   }
 
   &.pf-m-read {
diff --git a/src/patternfly/components/Popover/examples/Popover.md b/src/patternfly/components/Popover/examples/Popover.md
index 11db56e94b..6632431cc8 100644
--- a/src/patternfly/components/Popover/examples/Popover.md
+++ b/src/patternfly/components/Popover/examples/Popover.md
@@ -293,9 +293,9 @@ import './Popover.css'
   {{/popover-content}}
 {{/popover}}
 ```
-### Default alert popover
+### Custom alert popover
 ```hbs isFullscreen
-{{#> popover popover--IsAlert="true" popover--IsDefaultAlert="true" popover--modifier="pf-m-left" popover--attribute='aria-labelledby="popover-default-alert-header" aria-describedby="popover-default-alert-body"'}}
+{{#> popover popover--IsAlert="true" popover--IsCustomAlert="true" popover--modifier="pf-m-left" popover--attribute='aria-labelledby="popover-custom-alert-header" aria-describedby="popover-custom-alert-body"'}}
   {{#> popover-content}}
     {{#> popover-close}}
       {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close"'}}
@@ -303,13 +303,13 @@ import './Popover.css'
       {{/button}}
     {{/popover-close}}
     {{#> popover-header}}
-      {{#> popover-title popover-title--id="popover-default-alert-header"}}
+      {{#> popover-title popover-title--id="popover-custom-alert-header"}}
         {{#> popover-title-text}}
-          Default popover title
+          Custom popover title
         {{/popover-title-text}}
       {{/popover-title}}
     {{/popover-header}}
-    {{#> popover-body popover-body--attribute='id="popover-default-alert-body"'}}
+    {{#> popover-body popover-body--attribute='id="popover-custom-alert-body"'}}
       Popovers are triggered by click rather than hover. Click again to close.
     {{/popover-body}}
     {{#> popover-footer}}
@@ -458,7 +458,7 @@ A popover is used to provide contextual information for another component on cli
 | `.pf-m-bottom{-left/right}` | `.pf-c-popover` | Positions the popover to the bottom (or bottom left/bottom right) of the element. |
 | `.pf-m-no-padding` | `.pf-c-popover` | Removes the outer padding from the popover content. |
 | `.pf-m-width-auto` | `.pf-c-popover` | Allows popover width to be defined by the popover content. |
-| `.pf-m-default` | `.pf-c-popover` | Modifies for the default alert state. |
+| `.pf-m-custom` | `.pf-c-popover` | Modifies for the custom alert state. |
 | `.pf-m-info` | `.pf-c-popover` | Modifies for the info alert state. |
 | `.pf-m-success` | `.pf-c-popover` | Modifies for the success alert state. |
 | `.pf-m-warning` | `.pf-c-popover` | Modifies for the warning alert state. |
diff --git a/src/patternfly/components/Popover/popover-title-text.hbs b/src/patternfly/components/Popover/popover-title-text.hbs
index a038f8bf80..f7a95a4e27 100644
--- a/src/patternfly/components/Popover/popover-title-text.hbs
+++ b/src/patternfly/components/Popover/popover-title-text.hbs
@@ -4,8 +4,8 @@
   {{/if}}>
     {{#if popover--IsAlert}}
       {{#> screen-reader}}
-      {{#if popover--IsDefaultAlert}}
-        Default
+      {{#if popover--IsCustomAlert}}
+        Custom
       {{else if popover--IsInfoAlert}}
         Info
       {{else if popover--IsSuccessAlert}}
diff --git a/src/patternfly/components/Popover/popover-title.hbs b/src/patternfly/components/Popover/popover-title.hbs
index 4ebdeba952..556c03c449 100644
--- a/src/patternfly/components/Popover/popover-title.hbs
+++ b/src/patternfly/components/Popover/popover-title.hbs
@@ -6,7 +6,7 @@
     {{{popover-title--attribute}}}
   {{/if}}>
   {{#> wrapper popover-title-icon--type=(ternary popover-title-icon--type popover-title-icon--type
-        (ternary popover--IsDefaultAlert "bell"
+        (ternary popover--IsCustomAlert "bell"
         (ternary popover--IsInfoAlert "info-circle"
         (ternary popover--IsSuccessAlert "check-circle"
         (ternary popover--IsWarningAlert "exclamation-triangle"
diff --git a/src/patternfly/components/Popover/popover.hbs b/src/patternfly/components/Popover/popover.hbs
index 7b6f57b151..796d37c47c 100644
--- a/src/patternfly/components/Popover/popover.hbs
+++ b/src/patternfly/components/Popover/popover.hbs
@@ -1,4 +1,4 @@
-<div class="pf-c-popover{{#if popover--IsDangerAlert}} pf-m-danger{{else if popover--IsWarningAlert}} pf-m-warning{{else if popover--IsSuccessAlert}} pf-m-success{{else if popover--IsInfoAlert}} pf-m-info{{else if popover--IsDefaultAlert}} pf-m-default{{/if}}{{#if popover--modifier}} {{popover--modifier}}{{/if}}"
+<div class="pf-c-popover{{#if popover--IsDangerAlert}} pf-m-danger{{else if popover--IsWarningAlert}} pf-m-warning{{else if popover--IsSuccessAlert}} pf-m-success{{else if popover--IsInfoAlert}} pf-m-info{{else if popover--IsCustomAlert}} pf-m-custom{{/if}}{{#if popover--modifier}} {{popover--modifier}}{{/if}}"
   role="dialog"
   aria-modal="true"
   {{#if popover--attribute}}
diff --git a/src/patternfly/components/Popover/popover.scss b/src/patternfly/components/Popover/popover.scss
index e9e5487db1..eac3296732 100644
--- a/src/patternfly/components/Popover/popover.scss
+++ b/src/patternfly/components/Popover/popover.scss
@@ -10,14 +10,14 @@
   --pf-c-popover--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
   --pf-c-popover--m-success__title-icon--Color: var(--pf-global--success-color--100);
   --pf-c-popover--m-info__title-icon--Color: var(--pf-global--info-color--100);
-  --pf-c-popover--m-default__title-icon--Color: var(--pf-global--default-color--200);
+  --pf-c-popover--m-custom__title-icon--Color: var(--pf-global--custom-color--200);
 
   // Title text colors for states
   --pf-c-popover--m-danger__title-text--Color: var(--pf-global--danger-color--200);
   --pf-c-popover--m-warning__title-text--Color: var(--pf-global--warning-color--200);
   --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--200);
   --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--200);
-  --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--300);
+  --pf-c-popover--m-custom__title-text--Color: var(--pf-global--custom-color--300);
 
   // Content
   --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
@@ -171,9 +171,9 @@
     --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
   }
 
-  &.pf-m-default {
-    --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-default__title-icon--Color);
-    --pf-c-popover__title-text--Color: var(--pf-c-popover--m-default__title-text--Color);
+  &.pf-m-custom {
+    --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-custom__title-icon--Color);
+    --pf-c-popover__title-text--Color: var(--pf-c-popover--m-custom__title-text--Color);
   }
 
   &.pf-m-info {
diff --git a/src/patternfly/components/Popover/themes/dark/popover.scss b/src/patternfly/components/Popover/themes/dark/popover.scss
index 5a4eb1e9aa..06c0a2d809 100644
--- a/src/patternfly/components/Popover/themes/dark/popover.scss
+++ b/src/patternfly/components/Popover/themes/dark/popover.scss
@@ -4,7 +4,7 @@
   .pf-c-popover {
     --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
     --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
-    --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
+    --pf-c-popover--m-default__title-text--Color: var(--pf-global--custom-color--200);
     --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
     --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
   }
diff --git a/src/patternfly/sass-utilities/scss-variables.scss b/src/patternfly/sass-utilities/scss-variables.scss
index 12f53a881f..9293e990b7 100644
--- a/src/patternfly/sass-utilities/scss-variables.scss
+++ b/src/patternfly/sass-utilities/scss-variables.scss
@@ -70,9 +70,9 @@ $pf-global--disabled-color--300: $pf-color-black-200 !default;
 $pf-global--primary-color--100:         $pf-color-blue-400 !default;
 $pf-global--primary-color--200:         $pf-color-blue-500 !default;
 $pf-global--secondary-color--100:       $pf-color-black-600 !default;
-$pf-global--default-color--100:         $pf-color-cyan-200 !default;
-$pf-global--default-color--200:         $pf-color-cyan-300 !default;
-$pf-global--default-color--300:         $pf-color-cyan-500 !default;
+$pf-global--custom-color--100:         $pf-color-cyan-200 !default;
+$pf-global--custom-color--200:         $pf-color-cyan-300 !default;
+$pf-global--custom-color--300:         $pf-color-cyan-500 !default;
 $pf-global--success-color--100:         $pf-color-green-500 !default;
 $pf-global--success-color--200:         $pf-color-green-600 !default;
 $pf-global--info-color--100:            $pf-color-blue-300 !default;
diff --git a/src/patternfly/utilities/Text/examples/Text.md b/src/patternfly/utilities/Text/examples/Text.md
index 42d9678e40..2bc43cbd33 100644
--- a/src/patternfly/utilities/Text/examples/Text.md
+++ b/src/patternfly/utilities/Text/examples/Text.md
@@ -136,14 +136,14 @@ These colors are best used with the ["inverse" background colors](/utilities/bac
 ```
 ### Status and state text colors
 ```hbs
-{{#> text text--modifier="pf-u-default-color-100"}}
-  Font color default 100
+{{#> text text--modifier="pf-u-custom-color-100"}}
+  Font color custom 100
 {{/text}}
-{{#> text text--modifier="pf-u-default-color-200"}}
-  Font color default 200
+{{#> text text--modifier="pf-u-custom-color-200"}}
+  Font color custom 200
 {{/text}}
-{{#> text text--modifier="pf-u-default-color-300"}}
-  Font color default 300
+{{#> text text--modifier="pf-u-custom-color-300"}}
+  Font color custom 300
 {{/text}}
 {{#> text text--modifier="pf-u-success-color-100"}}
   Font color success 100
@@ -251,7 +251,7 @@ Care should be taken especially when applying text colors, as this can have a ne
 | `.pf-u-link-color-dark{-on-[breakpoint]}`                              | `*`        | Sets font-color to dark link color                  |
 | `.pf-u-link-color-dark-hover{-on-[breakpoint]}`                        | `*`        | Sets font-color to dark hover link color            |
 | `.pf-u-link-color-visited{-on-[breakpoint]}`                           | `*`        | Sets font-color to visited link color               |
-| `.pf-u-default-color-{100, 200, 300}{-on-[breakpoint]}`                | `*`        | Sets font-color to default color 100, 200, or 300   |
+| `.pf-u-custom-color-{100, 200, 300}{-on-[breakpoint]}`                 | `*`        | Sets font-color to custom color 100, 200, or 300   |
 | `.pf-u-success-color-{100, 200}{-on-[breakpoint]}`                     | `*`        | Sets font-color to success color 100 or 200         |
 | `.pf-u-info-color-{100, 200}{-on-[breakpoint]}`                        | `*`        | Sets font-color to info color 100 or 200            |
 | `.pf-u-warning-color-{100, 200}{-on-[breakpoint]}`                     | `*`        | Sets font-color to warning color 100 or 200         |
diff --git a/src/patternfly/utilities/Text/text.scss b/src/patternfly/utilities/Text/text.scss
index 7ce3c94367..5e97068e07 100644
--- a/src/patternfly/utilities/Text/text.scss
+++ b/src/patternfly/utilities/Text/text.scss
@@ -119,14 +119,14 @@ $pf-u-font-color-options: (
   link-color-visited: (
     color var(--pf-global--link--Color--visited)
   ),
-  default-color-100: (
-    color var(--pf-global--default-color--100)
+  custom-color-100: (
+    color var(--pf-global--custom-color--100)
   ),
-  default-color-200: (
-    color var(--pf-global--default-color--200)
+  custom-color-200: (
+    color var(--pf-global--custom-color--200)
   ),
-  default-color-300: (
-    color var(--pf-global--default-color--300)
+  custom-color-300: (
+    color var(--pf-global--custom-color--300)
   ),
   success-color-100: (
     color var(--pf-global--success-color--100)
diff --git a/src/patternfly/utilities/Text/themes/dark/text.scss b/src/patternfly/utilities/Text/themes/dark/text.scss
index 3b62f7c200..3988e6e588 100644
--- a/src/patternfly/utilities/Text/themes/dark/text.scss
+++ b/src/patternfly/utilities/Text/themes/dark/text.scss
@@ -12,8 +12,8 @@
     color-light-200: (
       color var(--pf-global--Color-200)
     ),
-    default-color-300: (
-      color var(--pf-global--default-color--100)
+    custom-color-300: (
+      color var(--pf-global--custom-color--100)
     ),
     success-color-200: (
       color var(--pf-global--success-color--100)