@patternfly/react-core 5.2.0-prerelease.1 → 5.2.0-prerelease.11

package/src/components/Backdrop/__tests__/Backdrop.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Backdrop } from '../Backdrop';
+import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the pf-v5-c-backdrop', () => {
+test(`Renders with the ${styles.backdrop}`, () => {
   render(<Backdrop>Test</Backdrop>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-backdrop');
+  expect(screen.getByText('Test')).toHaveClass(styles.backdrop);
 });
 
-test('Renders with only the class pf-v5-c-backdrop by default', () => {
+test(`Renders with only the class ${styles.backdrop} by default`, () => {
   render(<Backdrop>Test</Backdrop>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-backdrop', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.backdrop, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {

package/src/components/BackgroundImage/BackgroundImage.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image';
+import cssBackgroundImage from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage';
 
 export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement> {
   /** The URL or file path of the image for the background */
@@ -19,7 +20,7 @@ export const BackgroundImage: React.FunctionComponent<BackgroundImageProps> = ({
     className={css(styles.backgroundImage, className)}
     style={
       {
-        '--pf-v5-c-background-image--BackgroundImage': `url(${src})`
+        [cssBackgroundImage.name]: `url(${src})`
       } as React.CSSProperties
     }
     {...props}

package/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { BackgroundImage } from '../BackgroundImage';
 import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image';
+import cssBackgroundImage from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage';
 
 test(`renders with default className ${styles.backgroundImage}`, () => {
   render(<BackgroundImage src="/image/url.png" data-testid="test-id" />);
@@ -15,11 +16,7 @@ test('spreads additional props', () => {
 
 test('has src URL applied to style', () => {
   render(<BackgroundImage src="/image/url.png" data-testid="test-id" />);
-
-  expect(screen.getByTestId('test-id')).toHaveAttribute(
-    'style',
-    '--pf-v5-c-background-image--BackgroundImage: url(/image/url.png);'
-  );
+  expect(screen.getByTestId('test-id')).toHaveAttribute('style', `${cssBackgroundImage.name}: url(/image/url.png);`);
 });
 
 test('renders with custom className when one is provided', () => {

package/src/components/Badge/__tests__/Badge.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Badge } from '../Badge';
+import styles from '@patternfly/react-styles/css/components/Badge/badge';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-v5-c-badge', () => {
+test(`Renders with class name ${styles.badge}`, () => {
   render(<Badge>Test</Badge>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-badge');
+  expect(screen.getByText('Test')).toHaveClass(styles.badge);
 });
 
-test('Renders with class name pf-m-unread by default', () => {
+test(`Renders with class name ${styles.modifiers.unread} by default`, () => {
   render(<Badge>Test</Badge>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-unread');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.unread);
 });
 
 test('Renders with class name pf-m-read when isRead prop is true', () => {

package/src/components/Banner/__tests__/Banner.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Banner } from '../Banner';
+import styles from '@patternfly/react-styles/css/components/Banner/banner';
 
 test('Renders without children', () => {
   render(
@@ -16,9 +17,9 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-v5-c-banner', () => {
+test(`Renders with class name ${styles.banner}`, () => {
   render(<Banner>Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-banner');
+  expect(screen.getByText('Test')).toHaveClass(styles.banner);
 });
 
 test('Renders with custom class name when className prop is provided', () => {
@@ -28,7 +29,7 @@ test('Renders with custom class name when className prop is provided', () => {
 
 test('Renders without any modifier class when variant prop is not passed', () => {
   render(<Banner>Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-banner', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.banner, { exact: true });
 });
 
 test('Renders with class name pf-m-green when "green" is passed to variant prop', () => {

package/src/components/Brand/Brand.tsx

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Brand/brand';
 import { setBreakpointCssVars } from '../../helpers';
+import cssBrandHeight from '@patternfly/react-tokens/dist/esm/c_brand_Height';
+import cssBrandWidth from '@patternfly/react-tokens/dist/esm/c_brand_Width';
+
 export interface BrandProps
   extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
   /** Transforms the Brand into a <picture> element from an <img> element. Container for <source> child elements. */
@@ -45,14 +48,14 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
   let responsiveStyles;
   if (widths !== undefined) {
     responsiveStyles = {
-      ...setBreakpointCssVars(widths, '--pf-v5-c-brand--Width')
+      ...setBreakpointCssVars(widths, cssBrandWidth.name)
     };
   }
 
   if (heights !== undefined) {
     responsiveStyles = {
       ...responsiveStyles,
-      ...setBreakpointCssVars(heights, '--pf-v5-c-brand--Height')
+      ...setBreakpointCssVars(heights, cssBrandHeight.name)
     };
   }
 

package/src/components/Button/examples/Button.md

@@ -32,7 +32,7 @@ PatternFly supports several button styling variants to be used in different scen
 | Warning | Warning buttons may be used for actions that change an important setting or behavior, but not in a destructive or irreversible way. |
 | Link | Links are labeled, but have no background or border. Use for actions that require less emphasis, actions that navigate users to another page within the same window, and/or actions that navigate to external pages in a new window. Links may be placed inline with text using the `isInline` property.|
 | Plain | Plain buttons have no styling and are intended to be labeled with icons. |
-| Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](https://www.patternfly.org/v4/components/input-group). | 
+| Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](/components/input-group). |
 
 ### Disabled buttons
 

package/src/components/Checkbox/__tests__/Checkbox.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Checkbox } from '../Checkbox';
+import styles from '@patternfly/react-styles/css/components/Check/check';
 
 describe('Checkbox', () => {
   test('controlled', () => {
@@ -90,6 +91,6 @@ describe('Checkbox', () => {
       <Checkbox component="span" label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />
     );
     const span = container.querySelector('span');
-    expect(span).toHaveClass('pf-v5-c-check');
+    expect(span).toHaveClass(styles.check);
   });
 });

package/src/components/Chip/Chip.tsx

@@ -6,6 +6,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import styles from '@patternfly/react-styles/css/components/Chip/chip';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import cssChipTextMaxWidth from '@patternfly/react-tokens/dist/esm/c_chip__text_MaxWidth';
 
 export interface ChipProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Badge to add to the chip. The badge will be rendered after the chip text. */
@@ -81,7 +82,7 @@ class Chip extends React.Component<ChipProps, ChipState> {
   }
 
   setChipStyle = () => ({
-    '--pf-v5-c-chip__text--MaxWidth': this.props.textMaxWidth
+    [cssChipTextMaxWidth.name]: this.props.textMaxWidth
   });
 
   renderOverflowChip = () => {

package/src/components/CodeBlock/CodeBlockAction.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/CodeBlock/code-block';
 
 export interface CodeBlockActionProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the code block action */
@@ -13,7 +14,7 @@ export const CodeBlockAction: React.FunctionComponent<CodeBlockActionProps> = ({
   className,
   ...props
 }: CodeBlockActionProps) => (
-  <div className={css('pf-v5-c-code-block__actions-item', className)} {...props}>
+  <div className={css(`${styles.codeBlockActions}-item`, className)} {...props}>
     {children}
   </div>
 );

package/src/components/DataList/__tests__/DataList.test.tsx

@@ -14,6 +14,7 @@ import { DataListContent } from '../DataListContent';
 import { Button } from '../../Button';
 import { Dropdown, DropdownList, DropdownItem } from '../../Dropdown';
 import { MenuToggle } from '../../MenuToggle';
+import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 
 describe('DataList', () => {
   test('List default', () => {
@@ -176,7 +177,7 @@ describe('DataList', () => {
         test
       </DataListItem>
     );
-    expect(screen.getByRole('listitem')).toHaveClass('pf-v5-c-data-list__item pf-m-expanded');
+    expect(screen.getByRole('listitem')).toHaveClass(`${styles.dataListItem} ${styles.modifiers.expanded}`);
   });
 
   test('Item', () => {
@@ -233,8 +234,8 @@ describe('DataList', () => {
       const dataListCell = screen.getByTestId(testId);
 
       testCase.class === ''
-        ? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell')
-        : expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`);
+        ? expect(dataListCell).toHaveClass(styles.dataListCell)
+        : expect(dataListCell).toHaveClass(`${styles.dataListCell} ${testCase.class}`);
     });
   });
 
@@ -256,8 +257,8 @@ describe('DataList', () => {
       const dataListCell = screen.getByTestId(testId);
 
       testCase.class === ''
-        ? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell')
-        : expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`);
+        ? expect(dataListCell).toHaveClass(styles.dataListCell)
+        : expect(dataListCell).toHaveClass(`${styles.dataListCell} ${testCase.class}`);
     });
   });
 

package/src/components/DataList/examples/DataList.md

@@ -23,6 +23,10 @@ import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-ico
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { css } from '@patternfly/react-styles';
+import global_Color_100 from '@patternfly/react-tokens/dist/esm/global_Color_100';
+import global_BackgroundColor_200 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_200';
+import global_BorderColor_100 from '@patternfly/react-tokens/dist/esm/global_BorderColor_100';
+import global_BorderWidth_sm from '@patternfly/react-tokens/dist/esm/global_BorderWidth_sm';
 
 ## Examples
 

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -19,6 +19,11 @@ import {
   MenuToggleElement
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+/* eslint-disable camelcase */
+import global_Color_100 from '@patternfly/react-tokens/dist/esm/global_Color_100';
+import global_BackgroundColor_200 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_200';
+import global_BorderColor_100 from '@patternfly/react-tokens/dist/esm/global_BorderColor_100';
+import global_BorderWidth_sm from '@patternfly/react-tokens/dist/esm/global_BorderWidth_sm';
 
 export const DataListWidthModifiers: React.FunctionComponent = () => {
   const [show, setShow] = React.useState(true);
@@ -45,9 +50,9 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
     display: 'block',
     width: '100%',
     padding: '.25rem .5rem',
-    color: 'var(--pf-v5-global--Color--100)',
-    backgroundColor: 'var(--pf-v5-global--BackgroundColor--200)',
-    border: 'var(--pf-v5-global--BorderWidth--sm) var(--pf-v5-global--BorderColor--100) solid'
+    color: global_Color_100.var,
+    backgroundColor: global_BackgroundColor_200.var,
+    border: `${global_BorderWidth_sm.var} ${global_BorderColor_100.var} solid`
   };
 
   return (

package/src/components/DatePicker/DatePicker.tsx

@@ -12,6 +12,7 @@ import { useImperativeHandle } from 'react';
 import { KeyTypes } from '../../helpers';
 import { isValidDate } from '../../helpers/datetimeUtils';
 import { HelperText, HelperTextItem } from '../HelperText';
+import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_date_picker__input_c_form_control_width_chars';
 
 /** Props that customize the requirement of a date */
 export interface DatePickerRequiredObject {
@@ -131,7 +132,7 @@ const DatePickerBase = (
   const [pristine, setPristine] = React.useState(true);
   const [textInputFocused, setTextInputFocused] = React.useState(false);
   const widthChars = React.useMemo(() => Math.max(dateFormat(new Date()).length, placeholder.length), [dateFormat]);
-  const style = { '--pf-v5-c-date-picker__input--c-form-control--width-chars': widthChars, ...styleProps };
+  const style = { [cssFormControlWidthChars.name]: widthChars, ...styleProps };
   const buttonRef = React.useRef<HTMLButtonElement>();
   const datePickerWrapperRef = React.useRef<HTMLDivElement>();
   const triggerRef = React.useRef<HTMLDivElement>();

package/src/components/DescriptionList/DescriptionList.tsx

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
 import { formatBreakpointMods } from '../../helpers';
+import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/c_description_list_GridTemplateColumns_min';
+import cssTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list__term_width';
+import cssHorizontalTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list_m_horizontal__term_width';
 
 export interface BreakpointModifiers {
   default?: string;
@@ -102,19 +105,19 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
   if (isAutoFit && autoFitMinModifier) {
     style = {
       ...style,
-      ...setBreakpointModifiers('--pf-v5-c-description-list--GridTemplateColumns--min', autoFitMinModifier)
+      ...setBreakpointModifiers(cssGridTemplateColumnsMin.name, autoFitMinModifier)
     };
   }
   if (termWidth) {
     style = {
       ...style,
-      ...{ '--pf-v5-c-description-list__term--width': termWidth }
+      ...{ [cssTermWidth.name]: termWidth }
     };
   }
   if (isHorizontal && horizontalTermWidthModifier) {
     style = {
       ...style,
-      ...setBreakpointModifiers('--pf-v5-c-description-list--m-horizontal__term--width', horizontalTermWidthModifier)
+      ...setBreakpointModifiers(cssHorizontalTermWidth.name, horizontalTermWidthModifier)
     };
   }
 

package/src/components/DragDrop/Draggable.tsx

@@ -3,6 +3,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
 import { DroppableContext } from './DroppableContext';
 import { DragDropContext } from './DragDrop';
+import cssDraggingBackgroundColor from '@patternfly/react-tokens/dist/esm/c_draggable_m_dragging_BackgroundColor';
 
 export interface DraggableProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside DragDrop */
@@ -276,7 +277,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
       left: rect.x,
       width: rect.width,
       height: rect.height,
-      '--pf-v5-c-draggable--m-dragging--BackgroundColor': getInheritedBackgroundColor(dragging),
+      [cssDraggingBackgroundColor.name]: getInheritedBackgroundColor(dragging),
       position: 'fixed',
       zIndex: 5000
     } as any;

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -5,6 +5,9 @@ import { DrawerColorVariant, DrawerContext } from './Drawer';
 import { formatBreakpointMods } from '../../helpers/util';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { FocusTrap } from '../../helpers/FocusTrap/FocusTrap';
+import cssPanelMdFlexBasis from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis';
+import cssPanelMdFlexBasisMin from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_min';
+import cssPanelMdFlexBasisMax from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_max';
 
 export interface DrawerPanelFocusTrapObject {
   /** Enables a focus trap on the drawer panel content. This will also automatically
@@ -227,7 +230,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     if (position === 'bottom') {
       panel.current.style.overflowAnchor = 'none';
     }
-    panel.current.style.setProperty('--pf-v5-c-drawer__panel--md--FlexBasis', newSize + 'px');
+    panel.current.style.setProperty(cssPanelMdFlexBasis.name, newSize + 'px');
     currWidth = newSize;
     setSeparatorValue(calcValueNow());
   };
@@ -306,19 +309,19 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     if (position === 'bottom') {
       panel.current.style.overflowAnchor = 'none';
     }
-    panel.current.style.setProperty('--pf-v5-c-drawer__panel--md--FlexBasis', newSize + 'px');
+    panel.current.style.setProperty(cssPanelMdFlexBasis.name, newSize + 'px');
     currWidth = newSize;
     setSeparatorValue(calcValueNow());
   };
   const boundaryCssVars: any = {};
   if (defaultSize) {
-    boundaryCssVars['--pf-v5-c-drawer__panel--md--FlexBasis'] = defaultSize;
+    boundaryCssVars[cssPanelMdFlexBasis.name] = defaultSize;
   }
   if (minSize) {
-    boundaryCssVars['--pf-v5-c-drawer__panel--md--FlexBasis--min'] = minSize;
+    boundaryCssVars[cssPanelMdFlexBasisMin.name] = minSize;
   }
   if (maxSize) {
-    boundaryCssVars['--pf-v5-c-drawer__panel--md--FlexBasis--max'] = maxSize;
+    boundaryCssVars[cssPanelMdFlexBasisMax.name] = maxSize;
   }
 
   const isValidFocusTrap = focusTrap?.enabled && !isStatic;

package/src/components/Drawer/examples/Drawer.md

@@ -18,6 +18,8 @@ propComponents:
 section: components
 ---
 
+import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
+
 ## Examples
 
 ### Basic

package/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx

@@ -8,7 +8,8 @@ import {
   DrawerActions,
   DrawerCloseButton,
   DrawerPanelBody,
-  Button
+  Button,
+  Title
 } from '@patternfly/react-core';
 
 export const DrawerStackedContentBodyElements: React.FunctionComponent = () => {
@@ -30,9 +31,9 @@ export const DrawerStackedContentBodyElements: React.FunctionComponent = () => {
   const panelContent = (
     <DrawerPanelContent>
       <DrawerHead>
-        <h3 className="pf-v5-c-title pf-m-2xl" tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+        <Title headingLevel="h3" size="2xl" tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
           drawer title{' '}
-        </h3>
+        </Title>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
         </DrawerActions>

package/src/components/Drawer/examples/DrawerStatic.tsx

@@ -9,6 +9,7 @@ import {
   DrawerCloseButton,
   Button
 } from '@patternfly/react-core';
+import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 export const DrawerStatic: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
@@ -44,7 +45,7 @@ export const DrawerStatic: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Button className="pf-v5-u-hidden-on-md" aria-expanded={isExpanded} onClick={onClick}>
+      <Button className={accessibility.hiddenOnMd} aria-expanded={isExpanded} onClick={onClick}>
         Toggle drawer
       </Button>
       <Drawer isStatic isExpanded={isExpanded} onExpand={onExpand}>

package/src/components/DualListSelector/DualListSelectorControl.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Button, ButtonVariant } from '../Button';
 import { Tooltip } from '../Tooltip';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 
 /** Renders an individual control button for moving selected options between each
  * dual list selector pane.
@@ -40,7 +41,7 @@ export const DualListSelectorControlBase: React.FunctionComponent<DualListSelect
   const privateRef = React.useRef(null);
   const ref = innerRef || privateRef;
   return (
-    <div className={css('pf-v5-c-dual-list-selector__controls-item', className)} {...props}>
+    <div className={css(styles.dualListSelectorControlsItem, className)} {...props}>
       <Button
         isDisabled={isDisabled}
         aria-disabled={isDisabled}

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -7,6 +7,7 @@ import { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
 import { DualListSelectorContext, DualListSelectorPaneContext } from './DualListSelectorContext';
 import { DualListSelectorList } from './DualListSelectorList';
 import { SearchInput } from '../SearchInput';
+import cssMenuMinHeight from '@patternfly/react-tokens/dist/esm/c_dual_list_selector__menu_MinHeight';
 
 /** Acts as the container for a list of options that are either available or chosen,
  * depending on the pane type (available or chosen). A search input and other actions,
@@ -151,7 +152,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
     >
       {title && (
         <div className={css(styles.dualListSelectorHeader)}>
-          <div className="pf-v5-c-dual-list-selector__title">
+          <div className={`${styles.dualListSelector}__title`}>
             <div className={css(styles.dualListSelectorTitleText)}>{title}</div>
           </div>
         </div>
@@ -201,7 +202,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
             id={`${id}-list`}
             isDisabled={isDisabled}
             {...(listMinHeight && {
-              style: { '--pf-v5-c-dual-list-selector__menu--MinHeight': listMinHeight } as React.CSSProperties
+              style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
             })}
           >
             {children}
@@ -212,7 +213,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
             aria-labelledby={`${id}-status`}
             id={`${id}-list`}
             {...(listMinHeight && {
-              style: { '--pf-v5-c-dual-list-selector__menu--MinHeight': listMinHeight } as React.CSSProperties
+              style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
             })}
           >
             {options.length > 0 ? (

package/src/components/EmptyState/EmptyStateHeader.tsx

@@ -27,10 +27,10 @@ export const EmptyStateHeader: React.FunctionComponent<EmptyStateHeaderProps> =
   icon,
   ...props
 }: EmptyStateHeaderProps) => (
-  <div className={css('pf-v5-c-empty-state__header', className)} {...props}>
+  <div className={css(`${styles.emptyState}__header`, className)} {...props}>
     {icon}
     {(titleText || children) && (
-      <div className={css('pf-v5-c-empty-state__title')}>
+      <div className={css(`${styles.emptyState}__title`)}>
         {titleText && (
           <HeadingLevel className={css(styles.emptyStateTitleText, titleClassName)}>{titleText}</HeadingLevel>
         )}

package/src/components/EmptyState/EmptyStateIcon.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 import { Spinner } from '../Spinner';
+import cssIconColor from '@patternfly/react-tokens/dist/esm/c_empty_state__icon_Color';
 
 export interface IconProps extends Omit<React.HTMLProps<SVGElement>, 'size'> {
   /** Changes the color of the icon.  */
@@ -27,8 +28,7 @@ export const EmptyStateIcon: React.FunctionComponent<EmptyStateIconProps> = ({
   return (
     <div
       className={css(styles.emptyStateIcon)}
-      {...(color &&
-        !iconIsSpinner && { style: { ['--pf-v5-c-empty-state__icon--Color']: color } as React.CSSProperties })}
+      {...(color && !iconIsSpinner && { style: { [cssIconColor.name]: color } as React.CSSProperties })}
     >
       <IconComponent className={className} aria-hidden={!iconIsSpinner} {...props} />
     </div>

package/src/components/EmptyState/__tests__/EmptyState.test.tsx

@@ -11,6 +11,7 @@ import { Button } from '../../Button';
 import { EmptyStateHeader } from '../EmptyStateHeader';
 import { EmptyStateFooter } from '../EmptyStateFooter';
 import { EmptyStateIcon } from '../../../../dist/esm';
+import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 
 describe('EmptyState', () => {
   test('Main', () => {
@@ -64,12 +65,12 @@ describe('EmptyState', () => {
 
   test('Body', () => {
     render(<EmptyStateBody className="custom-empty-state-body" data-testid="body-test-id" />);
-    expect(screen.getByTestId('body-test-id')).toHaveClass('pf-v5-c-empty-state__body custom-empty-state-body');
+    expect(screen.getByTestId('body-test-id')).toHaveClass(`${styles.emptyStateBody} custom-empty-state-body`);
   });
 
   test('Actions', () => {
     render(<EmptyStateActions className="custom-empty-state-secondary" data-testid="actions-test-id" />);
-    expect(screen.getByTestId('actions-test-id')).toHaveClass('pf-v5-c-empty-state__actions');
+    expect(screen.getByTestId('actions-test-id')).toHaveClass(styles.emptyStateActions);
   });
 
   test('Full height', () => {
@@ -88,9 +89,7 @@ describe('EmptyState', () => {
 
   test('Header with title text renders heading level 1 by default', () => {
     render(<EmptyStateHeader titleText="Empty state" />);
-    expect(screen.getByRole('heading', { level: 1, name: 'Empty state' })).toHaveClass(
-      'pf-v5-c-empty-state__title-text'
-    );
+    expect(screen.getByRole('heading', { level: 1, name: 'Empty state' })).toHaveClass(styles.emptyStateTitleText);
   });
 
   test('Header renders custom class passed via titleClassName', () => {
@@ -100,9 +99,7 @@ describe('EmptyState', () => {
 
   test('Header renders the title as other heading levels when one is passed using headingLevel', () => {
     render(<EmptyStateHeader titleText="Empty state" headingLevel="h3" />);
-    expect(screen.getByRole('heading', { level: 3, name: 'Empty state' })).toHaveClass(
-      'pf-v5-c-empty-state__title-text'
-    );
+    expect(screen.getByRole('heading', { level: 3, name: 'Empty state' })).toHaveClass(styles.emptyStateTitleText);
   });
 
   test('Headers render children', () => {

package/src/components/EmptyState/examples/EmptyState.md

@@ -7,6 +7,7 @@ propComponents: ['EmptyState', 'EmptyStateHeader', 'EmptyStateIcon', 'EmptyState
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
 
 ## Examples
 ### Basic

package/src/components/EmptyState/examples/EmptyStateCustomIconColor.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import { EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+/* eslint-disable camelcase */
+import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
 
 export const EmptyStateCustomIconColor: React.FunctionComponent = () => (
   <EmptyState>
     <EmptyStateHeader
       titleText="Custom icon color"
       headingLevel="h4"
-      icon={<EmptyStateIcon icon={CheckIcon} color="var(--pf-v5-global--success-color--100)" />}
+      icon={<EmptyStateIcon icon={CheckIcon} color={global_success_color_100.var} />}
     />
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly with a custom icon color. Hopefully it's simple enough to

package/src/components/FileUpload/examples/FileUploadCustomPreview.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FileUpload } from '@patternfly/react-core';
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const [value, setValue] = React.useState<File>();
@@ -28,7 +29,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
       browseButtonText="Upload"
     >
       {value && (
-        <div className="pf-v5-u-m-md">
+        <div className={spacing.mMd}>
           <FileUploadIcon width="2em" height="2em" /> Custom preview here for your {value.size}-byte file named{' '}
           {value.name}
         </div>