@patternfly/patternfly 5.0.0-alpha.33 → 5.0.0-alpha.34

package/docs/demos/Dashboard/examples/Dashboard.md

@@ -1,7 +1,7 @@
 ---
 id: 'Dashboard'
 beta: true
-section: demos
+section: patterns
 cssPrefix: pf-d-dashboard
 ---## Examples
 

package/docs/demos/Form/examples/BasicForms.md

@@ -1,6 +1,7 @@
 ---
 id: Form
 section: components
+subsection: forms
 ---## Demos
 
 ### Basic

package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md

@@ -1063,7 +1063,7 @@ section: components
                   </li>
 
                   <li
-                    class="pf-c-notification-drawer__list-item pf-m-read pf-m-default"
+                    class="pf-c-notification-drawer__list-item pf-m-read pf-m-custom"
                   >
                     <div class="pf-c-notification-drawer__list-item-header">
                       <span
@@ -1074,7 +1074,7 @@ section: components
                       <h2
                         class="pf-c-notification-drawer__list-item-header-title"
                       >
-                        <span class="pf-screen-reader">Default notification:</span>
+                        <span class="pf-screen-reader">Custom notification:</span>
                         Read
                         recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
                       </h2>
@@ -1138,7 +1138,7 @@ section: components
                   </li>
 
                   <li
-                    class="pf-c-notification-drawer__list-item pf-m-read pf-m-default"
+                    class="pf-c-notification-drawer__list-item pf-m-read pf-m-custom"
                   >
                     <div class="pf-c-notification-drawer__list-item-header">
                       <span
@@ -1149,7 +1149,7 @@ section: components
                       <h2
                         class="pf-c-notification-drawer__list-item-header-title"
                       >
-                        <span class="pf-screen-reader">Default notification:</span>
+                        <span class="pf-screen-reader">Custom notification:</span>
                         Read
                         recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
                       </h2>
@@ -2580,7 +2580,7 @@ section: components
                   </li>
 
                   <li
-                    class="pf-c-notification-drawer__list-item pf-m-read pf-m-default"
+                    class="pf-c-notification-drawer__list-item pf-m-read pf-m-custom"
                   >
                     <div class="pf-c-notification-drawer__list-item-header">
                       <span
@@ -2591,7 +2591,7 @@ section: components
                       <h2
                         class="pf-c-notification-drawer__list-item-header-title"
                       >
-                        <span class="pf-screen-reader">Default notification:</span>
+                        <span class="pf-screen-reader">Custom notification:</span>
                         Read
                         recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
                       </h2>
@@ -2655,7 +2655,7 @@ section: components
                   </li>
 
                   <li
-                    class="pf-c-notification-drawer__list-item pf-m-read pf-m-default"
+                    class="pf-c-notification-drawer__list-item pf-m-read pf-m-custom"
                   >
                     <div class="pf-c-notification-drawer__list-item-header">
                       <span
@@ -2666,7 +2666,7 @@ section: components
                       <h2
                         class="pf-c-notification-drawer__list-item-header-title"
                       >
-                        <span class="pf-screen-reader">Default notification:</span>
+                        <span class="pf-screen-reader">Custom notification:</span>
                         Read
                         recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
                       </h2>
@@ -4103,7 +4103,7 @@ section: components
                   </li>
 
                   <li
-                    class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+                    class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
                     tabindex="0"
                   >
                     <div class="pf-c-notification-drawer__list-item-header">
@@ -4115,7 +4115,7 @@ section: components
                       <h2
                         class="pf-c-notification-drawer__list-item-header-title"
                       >
-                        <span class="pf-screen-reader">Default notification:</span>
+                        <span class="pf-screen-reader">Custom notification:</span>
                         Unread
                         recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
                       </h2>
@@ -4179,7 +4179,7 @@ section: components
                   </li>
 
                   <li
-                    class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+                    class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
                     tabindex="0"
                   >
                     <div class="pf-c-notification-drawer__list-item-header">
@@ -4191,7 +4191,7 @@ section: components
                       <h2
                         class="pf-c-notification-drawer__list-item-header-title"
                       >
-                        <span class="pf-screen-reader">Default notification:</span>
+                        <span class="pf-screen-reader">Custom notification:</span>
                         Unread
                         recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
                       </h2>
@@ -5703,7 +5703,7 @@ section: components
                   </li>
 
                   <li
-                    class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+                    class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
                     tabindex="0"
                   >
                     <div class="pf-c-notification-drawer__list-item-header">
@@ -5715,7 +5715,7 @@ section: components
                       <h2
                         class="pf-c-notification-drawer__list-item-header-title"
                       >
-                        <span class="pf-screen-reader">Default notification:</span>
+                        <span class="pf-screen-reader">Custom notification:</span>
                         Unread
                         recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
                       </h2>
@@ -7181,7 +7181,7 @@ section: components
                       </li>
 
                       <li
-                        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+                        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
                         tabindex="0"
                       >
                         <div class="pf-c-notification-drawer__list-item-header">
@@ -7196,7 +7196,7 @@ section: components
                           <h2
                             class="pf-c-notification-drawer__list-item-header-title"
                           >
-                            <span class="pf-screen-reader">Default notification:</span>
+                            <span class="pf-screen-reader">Custom notification:</span>
                             Unread
                             recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
                           </h2>
@@ -7263,7 +7263,7 @@ section: components
                       </li>
 
                       <li
-                        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+                        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
                         tabindex="0"
                       >
                         <div class="pf-c-notification-drawer__list-item-header">
@@ -7278,7 +7278,7 @@ section: components
                           <h2
                             class="pf-c-notification-drawer__list-item-header-title"
                           >
-                            <span class="pf-screen-reader">Default notification:</span>
+                            <span class="pf-screen-reader">Custom notification:</span>
                             Unread
                             recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
                           </h2>
@@ -7757,7 +7757,7 @@ section: components
                       </li>
 
                       <li
-                        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+                        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
                         tabindex="0"
                       >
                         <div class="pf-c-notification-drawer__list-item-header">
@@ -7772,7 +7772,7 @@ section: components
                           <h2
                             class="pf-c-notification-drawer__list-item-header-title"
                           >
-                            <span class="pf-screen-reader">Default notification:</span>
+                            <span class="pf-screen-reader">Custom notification:</span>
                             Unread
                             recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
                           </h2>
@@ -7839,7 +7839,7 @@ section: components
                       </li>
 
                       <li
-                        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+                        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
                         tabindex="0"
                       >
                         <div class="pf-c-notification-drawer__list-item-header">
@@ -7854,7 +7854,7 @@ section: components
                           <h2
                             class="pf-c-notification-drawer__list-item-header-title"
                           >
-                            <span class="pf-screen-reader">Default notification:</span>
+                            <span class="pf-screen-reader">Custom notification:</span>
                             Unread
                             recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
                           </h2>
@@ -8335,7 +8335,7 @@ section: components
                       </li>
 
                       <li
-                        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+                        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
                         tabindex="0"
                       >
                         <div class="pf-c-notification-drawer__list-item-header">
@@ -8350,7 +8350,7 @@ section: components
                           <h2
                             class="pf-c-notification-drawer__list-item-header-title"
                           >
-                            <span class="pf-screen-reader">Default notification:</span>
+                            <span class="pf-screen-reader">Custom notification:</span>
                             Unread
                             recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
                           </h2>
@@ -8417,7 +8417,7 @@ section: components
                       </li>
 
                       <li
-                        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+                        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
                         tabindex="0"
                       >
                         <div class="pf-c-notification-drawer__list-item-header">
@@ -8432,7 +8432,7 @@ section: components
                           <h2
                             class="pf-c-notification-drawer__list-item-header-title"
                           >
-                            <span class="pf-screen-reader">Default notification:</span>
+                            <span class="pf-screen-reader">Custom notification:</span>
                             Unread
                             recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
                           </h2>
@@ -8913,7 +8913,7 @@ section: components
                       </li>
 
                       <li
-                        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+                        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
                         tabindex="0"
                       >
                         <div class="pf-c-notification-drawer__list-item-header">
@@ -8928,7 +8928,7 @@ section: components
                           <h2
                             class="pf-c-notification-drawer__list-item-header-title"
                           >
-                            <span class="pf-screen-reader">Default notification:</span>
+                            <span class="pf-screen-reader">Custom notification:</span>
                             Unread
                             recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
                           </h2>
@@ -8995,7 +8995,7 @@ section: components
                       </li>
 
                       <li
-                        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+                        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
                         tabindex="0"
                       >
                         <div class="pf-c-notification-drawer__list-item-header">
@@ -9010,7 +9010,7 @@ section: components
                           <h2
                             class="pf-c-notification-drawer__list-item-header-title"
                           >
-                            <span class="pf-screen-reader">Default notification:</span>
+                            <span class="pf-screen-reader">Custom notification:</span>
                             Unread
                             recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
                           </h2>

package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md

@@ -1,6 +1,6 @@
 ---
 id: 'Password generator'
-section: demos
+section: components
 ---## Examples
 
 ### Provide a generated password

package/docs/demos/PasswordStrength/examples/PasswordStrength.md

@@ -1,6 +1,6 @@
 ---
 id: 'Password strength'
-section: demos
+section: components
 ---## Examples
 
 ### Initial state

package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md

@@ -1,6 +1,6 @@
 ---
 id: Primary-detail
-section: demos
+section: patterns
 wrapperTag: div
 ---## Demos
 

package/docs/utilities/Accessibility/examples/Accessibility.md

@@ -1,6 +1,6 @@
 ---
 id: Accessibility
-section: utilities
+section: utility-classes
 ---## Examples
 
 ### Screen reader only

package/docs/utilities/Alignment/examples/Alignment.md

@@ -1,6 +1,6 @@
 ---
 id: Alignment
-section: utilities
+section: utility-classes
 ---import './Alignment.css'
 
 ## Examples

package/docs/utilities/BackgroundColor/examples/BackgroundColor.md

@@ -1,6 +1,6 @@
 ---
 id: Background color
-section: utilities
+section: utility-classes
 ---## Examples
 
 ### Standard background colors

package/docs/utilities/BoxShadow/examples/box-shadow.md

@@ -1,6 +1,6 @@
 ---
 id: Box shadow
-section: utilities
+section: utility-classes
 ---import './box-shadow.css'
 
 ## Examples

package/docs/utilities/Display/examples/Display.md

@@ -1,6 +1,6 @@
 ---
 id: Display
-section: utilities
+section: utility-classes
 ---import './Display.css'
 
 ## Examples

package/docs/utilities/Flex/examples/Flex.md

@@ -1,6 +1,6 @@
 ---
 id: Flex
-section: utilities
+section: utility-classes
 ---import './Flex.css'
 
 ## Examples

package/docs/utilities/Float/examples/Float.md

@@ -1,6 +1,6 @@
 ---
 id: Float
-section: utilities
+section: utility-classes
 ---import './Float.css'
 
 ## Examples

package/docs/utilities/Sizing/examples/Sizing.md

@@ -1,6 +1,6 @@
 ---
 id: Sizing
-section: utilities
+section: utility-classes
 ---import './Sizing.css'
 
 ## Examples

package/docs/utilities/Spacing/examples/Spacing.md

@@ -1,6 +1,6 @@
 ---
 id: Spacing
-section: utilities
+section: utility-classes
 ---import './Spacing.css'
 
 ## Examples

package/docs/utilities/Text/examples/Text.md

@@ -1,6 +1,6 @@
 ---
 id: Text
-section: utilities
+section: utility-classes
 ---import './Text.css'
 
 ## Examples
@@ -87,9 +87,9 @@ These colors are best used with the ["inverse" background colors](/utilities/bac
 ### Status and state text colors
 
 ```html
-<div class="pf-u-default-color-100">Font color default 100</div>
-<div class="pf-u-default-color-200">Font color default 200</div>
-<div class="pf-u-default-color-300">Font color default 300</div>
+<div class="pf-u-custom-color-100">Font color custom 100</div>
+<div class="pf-u-custom-color-200">Font color custom 200</div>
+<div class="pf-u-custom-color-300">Font color custom 300</div>
 <div class="pf-u-success-color-100">Font color success 100</div>
 <div class="pf-u-success-color-200">Font color success 200</div>
 <div class="pf-u-info-color-100">Font color info 100</div>
@@ -185,7 +185,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         |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.0.0-alpha.33",
+  "version": "5.0.0-alpha.34",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-addons.css

@@ -7866,16 +7866,16 @@
   color: var(--pf-global--link--Color--visited) !important;
 }
 
-.pf-u-default-color-100 {
-  color: var(--pf-global--default-color--100) !important;
+.pf-u-custom-color-100 {
+  color: var(--pf-global--custom-color--100) !important;
 }
 
-.pf-u-default-color-200 {
-  color: var(--pf-global--default-color--200) !important;
+.pf-u-custom-color-200 {
+  color: var(--pf-global--custom-color--200) !important;
 }
 
-.pf-u-default-color-300 {
-  color: var(--pf-global--default-color--300) !important;
+.pf-u-custom-color-300 {
+  color: var(--pf-global--custom-color--300) !important;
 }
 
 .pf-u-success-color-100 {
@@ -7979,14 +7979,14 @@
   .pf-u-link-color-visited-on-sm {
     color: var(--pf-global--link--Color--visited) !important;
   }
-  .pf-u-default-color-100-on-sm {
-    color: var(--pf-global--default-color--100) !important;
+  .pf-u-custom-color-100-on-sm {
+    color: var(--pf-global--custom-color--100) !important;
   }
-  .pf-u-default-color-200-on-sm {
-    color: var(--pf-global--default-color--200) !important;
+  .pf-u-custom-color-200-on-sm {
+    color: var(--pf-global--custom-color--200) !important;
   }
-  .pf-u-default-color-300-on-sm {
-    color: var(--pf-global--default-color--300) !important;
+  .pf-u-custom-color-300-on-sm {
+    color: var(--pf-global--custom-color--300) !important;
   }
   .pf-u-success-color-100-on-sm {
     color: var(--pf-global--success-color--100) !important;
@@ -8077,14 +8077,14 @@
   .pf-u-link-color-visited-on-md {
     color: var(--pf-global--link--Color--visited) !important;
   }
-  .pf-u-default-color-100-on-md {
-    color: var(--pf-global--default-color--100) !important;
+  .pf-u-custom-color-100-on-md {
+    color: var(--pf-global--custom-color--100) !important;
   }
-  .pf-u-default-color-200-on-md {
-    color: var(--pf-global--default-color--200) !important;
+  .pf-u-custom-color-200-on-md {
+    color: var(--pf-global--custom-color--200) !important;
   }
-  .pf-u-default-color-300-on-md {
-    color: var(--pf-global--default-color--300) !important;
+  .pf-u-custom-color-300-on-md {
+    color: var(--pf-global--custom-color--300) !important;
   }
   .pf-u-success-color-100-on-md {
     color: var(--pf-global--success-color--100) !important;
@@ -8175,14 +8175,14 @@
   .pf-u-link-color-visited-on-lg {
     color: var(--pf-global--link--Color--visited) !important;
   }
-  .pf-u-default-color-100-on-lg {
-    color: var(--pf-global--default-color--100) !important;
+  .pf-u-custom-color-100-on-lg {
+    color: var(--pf-global--custom-color--100) !important;
   }
-  .pf-u-default-color-200-on-lg {
-    color: var(--pf-global--default-color--200) !important;
+  .pf-u-custom-color-200-on-lg {
+    color: var(--pf-global--custom-color--200) !important;
   }
-  .pf-u-default-color-300-on-lg {
-    color: var(--pf-global--default-color--300) !important;
+  .pf-u-custom-color-300-on-lg {
+    color: var(--pf-global--custom-color--300) !important;
   }
   .pf-u-success-color-100-on-lg {
     color: var(--pf-global--success-color--100) !important;
@@ -8273,14 +8273,14 @@
   .pf-u-link-color-visited-on-xl {
     color: var(--pf-global--link--Color--visited) !important;
   }
-  .pf-u-default-color-100-on-xl {
-    color: var(--pf-global--default-color--100) !important;
+  .pf-u-custom-color-100-on-xl {
+    color: var(--pf-global--custom-color--100) !important;
   }
-  .pf-u-default-color-200-on-xl {
-    color: var(--pf-global--default-color--200) !important;
+  .pf-u-custom-color-200-on-xl {
+    color: var(--pf-global--custom-color--200) !important;
   }
-  .pf-u-default-color-300-on-xl {
-    color: var(--pf-global--default-color--300) !important;
+  .pf-u-custom-color-300-on-xl {
+    color: var(--pf-global--custom-color--300) !important;
   }
   .pf-u-success-color-100-on-xl {
     color: var(--pf-global--success-color--100) !important;
@@ -8371,14 +8371,14 @@
   .pf-u-link-color-visited-on-2xl {
     color: var(--pf-global--link--Color--visited) !important;
   }
-  .pf-u-default-color-100-on-2xl {
-    color: var(--pf-global--default-color--100) !important;
+  .pf-u-custom-color-100-on-2xl {
+    color: var(--pf-global--custom-color--100) !important;
   }
-  .pf-u-default-color-200-on-2xl {
-    color: var(--pf-global--default-color--200) !important;
+  .pf-u-custom-color-200-on-2xl {
+    color: var(--pf-global--custom-color--200) !important;
   }
-  .pf-u-default-color-300-on-2xl {
-    color: var(--pf-global--default-color--300) !important;
+  .pf-u-custom-color-300-on-2xl {
+    color: var(--pf-global--custom-color--300) !important;
   }
   .pf-u-success-color-100-on-2xl {
     color: var(--pf-global--success-color--100) !important;
@@ -8504,8 +8504,8 @@
 :where(.pf-theme-dark) .pf-u-color-light-200 {
   color: var(--pf-global--Color-200) !important;
 }
-:where(.pf-theme-dark) .pf-u-default-color-300 {
-  color: var(--pf-global--default-color--100) !important;
+:where(.pf-theme-dark) .pf-u-custom-color-300 {
+  color: var(--pf-global--custom-color--100) !important;
 }
 :where(.pf-theme-dark) .pf-u-success-color-200 {
   color: var(--pf-global--success-color--100) !important;
@@ -8529,8 +8529,8 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-sm {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-default-color-300-on-sm {
-    color: var(--pf-global--default-color--100) !important;
+  :where(.pf-theme-dark) .pf-u-custom-color-300-on-sm {
+    color: var(--pf-global--custom-color--100) !important;
   }
   :where(.pf-theme-dark) .pf-u-success-color-200-on-sm {
     color: var(--pf-global--success-color--100) !important;
@@ -8555,8 +8555,8 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-md {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-default-color-300-on-md {
-    color: var(--pf-global--default-color--100) !important;
+  :where(.pf-theme-dark) .pf-u-custom-color-300-on-md {
+    color: var(--pf-global--custom-color--100) !important;
   }
   :where(.pf-theme-dark) .pf-u-success-color-200-on-md {
     color: var(--pf-global--success-color--100) !important;
@@ -8581,8 +8581,8 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-lg {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-default-color-300-on-lg {
-    color: var(--pf-global--default-color--100) !important;
+  :where(.pf-theme-dark) .pf-u-custom-color-300-on-lg {
+    color: var(--pf-global--custom-color--100) !important;
   }
   :where(.pf-theme-dark) .pf-u-success-color-200-on-lg {
     color: var(--pf-global--success-color--100) !important;
@@ -8607,8 +8607,8 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-xl {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-default-color-300-on-xl {
-    color: var(--pf-global--default-color--100) !important;
+  :where(.pf-theme-dark) .pf-u-custom-color-300-on-xl {
+    color: var(--pf-global--custom-color--100) !important;
   }
   :where(.pf-theme-dark) .pf-u-success-color-200-on-xl {
     color: var(--pf-global--success-color--100) !important;
@@ -8633,8 +8633,8 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-2xl {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-default-color-300-on-2xl {
-    color: var(--pf-global--default-color--100) !important;
+  :where(.pf-theme-dark) .pf-u-custom-color-300-on-2xl {
+    color: var(--pf-global--custom-color--100) !important;
   }
   :where(.pf-theme-dark) .pf-u-success-color-200-on-2xl {
     color: var(--pf-global--success-color--100) !important;