@lumx/react 3.10.0 → 3.10.1-alpha.0

package/src/components/input-label/InputLabel.tsx

@@ -3,6 +3,7 @@ import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import React, { forwardRef, ReactNode } from 'react';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -29,9 +30,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<InputLabelProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<InputLabelProps> = {};
 
 /**
  * InputLabel component.
@@ -41,7 +40,8 @@ const DEFAULT_PROPS: Partial<InputLabelProps> = {
  * @return React element.
  */
 export const InputLabel: Comp<InputLabelProps, HTMLLabelElement> = forwardRef((props, ref) => {
-    const { children, className, htmlFor, isRequired, theme, ...forwardedProps } = props;
+    const defaultTheme = useTheme() || Theme.light;
+    const { children, className, htmlFor, isRequired, theme = defaultTheme, ...forwardedProps } = props;
 
     return (
         <label

package/src/components/lightbox/Lightbox.test.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { ThemeSentinel } from '@lumx/react/testing/utils/ThemeSentinel';
 
 import { Lightbox, LightboxProps } from './Lightbox';
 
 const CLASSNAME = Lightbox.className as string;
 
-const setup = (props: Partial<LightboxProps> = {}) => {
-    const propsOverride = { isOpen: true, ...props } as any;
-    const { container } = render(<Lightbox {...propsOverride} />);
+const setup = (props: Partial<LightboxProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const propsOverride = {
+        isOpen: true,
+        children: <ThemeSentinel />,
+        ...props,
+    } as any;
+    const { container } = render(<Lightbox {...propsOverride} />, { wrapper });
     const lightbox = queryByClassName(document.body, CLASSNAME);
-    return { props, container, lightbox };
+    const themeSentinel = screen.queryByTestId(ThemeSentinel.testId);
+    return { props, container, lightbox, themeSentinel };
 };
 
 describe(`<${Lightbox.displayName}>`, () => {
@@ -22,5 +28,10 @@ describe(`<${Lightbox.displayName}>`, () => {
         forwardClassName: 'lightbox',
         forwardAttributes: 'lightbox',
         forwardRef: 'lightbox',
+        applyTheme: {
+            affects: [{ not: { element: 'themeSentinel' } }],
+            viaProp: true,
+            viaContext: true,
+        },
     });
 });

package/src/components/lightbox/Lightbox.tsx

@@ -15,6 +15,7 @@ import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
+import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -158,11 +159,13 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
                     />
                 </div>
             )}
-            <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>
-                <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">
-                    {children}
-                </div>
-            </ClickAwayProvider>
+            <ThemeProvider value={undefined}>
+                <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>
+                    <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">
+                        {children}
+                    </div>
+                </ClickAwayProvider>
+            </ThemeProvider>
         </div>,
         document.body,
     );

package/src/components/link-preview/LinkPreview.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { Thumbnail } from '@lumx/react';
 import { render, screen, within } from '@testing-library/react';
 import { getByClassName, queryByClassName, queryAllByClassName } from '@lumx/react/testing/utils/queries';
@@ -15,10 +15,10 @@ type SetupProps = Partial<LinkPreviewProps>;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: SetupProps = {}) => {
+const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props: any = { ...propsOverride };
 
-    render(<LinkPreview {...props} />);
+    render(<LinkPreview {...props} />, { wrapper });
     const linkPreview = getByClassName(document.body, CLASSNAME);
     const thumbnail = queryByClassName(linkPreview, Thumbnail.className as string);
     const title = queryByClassName(linkPreview, `${CLASSNAME}__title`);
@@ -97,5 +97,11 @@ describe(`<${LinkPreview.displayName}>`, () => {
         forwardClassName: 'linkPreview',
         forwardAttributes: 'linkPreview',
         forwardRef: 'linkPreview',
+        applyTheme: {
+            affects: [{ element: 'linkPreview' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/link-preview/LinkPreview.tsx

@@ -16,6 +16,7 @@ import {
 
 import { Comp, GenericProps, HeadingElement, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -54,7 +55,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS = {
     size: Size.regular,
-    theme: Theme.light,
     titleHeading: 'h2',
 } as const;
 
@@ -66,6 +66,7 @@ const DEFAULT_PROPS = {
  * @return React element.
  */
 export const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         className,
         description,
@@ -73,7 +74,7 @@ export const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((p
         linkAs,
         linkProps,
         size,
-        theme,
+        theme = defaultTheme,
         thumbnailProps,
         title,
         titleHeading,

package/src/components/mosaic/Mosaic.test.tsx

@@ -4,14 +4,14 @@ import { Mosaic, MosaicProps } from '@lumx/react/components/mosaic/Mosaic';
 import { render, screen, within } from '@testing-library/react';
 import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { Thumbnail } from '@lumx/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import range from 'lodash/range';
 import userEvent from '@testing-library/user-event';
 
 const CLASSNAME = Mosaic.className as string;
 
-const setup = (props: Partial<MosaicProps> = {}) => {
-    render(<Mosaic thumbnails={[]} {...props} />);
+const setup = (props: Partial<MosaicProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<Mosaic thumbnails={[]} {...props} />, { wrapper });
     const mosaic = getByClassName(document.body, CLASSNAME);
     const thumbnails = queryAllByClassName(mosaic, Thumbnail.className as string);
     const overlay = queryByClassName(mosaic, `${CLASSNAME}__overlay`);
@@ -69,5 +69,11 @@ describe(`<${Mosaic.displayName}>`, () => {
         forwardClassName: 'mosaic',
         forwardAttributes: 'mosaic',
         forwardRef: 'mosaic',
+        applyTheme: {
+            affects: [{ element: 'mosaic' }, { element: 'thumbnails' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/mosaic/Mosaic.tsx

@@ -5,6 +5,7 @@ import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import take from 'lodash/take';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -29,9 +30,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<MosaicProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<MosaicProps> = {};
 
 /**
  * Mosaic component.
@@ -41,7 +40,8 @@ const DEFAULT_PROPS: Partial<MosaicProps> = {
  * @return React element.
  */
 export const Mosaic: Comp<MosaicProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, theme, thumbnails, onImageClick, ...forwardedProps } = props;
+    const defaultTheme = useTheme() || Theme.light;
+    const { className, theme = defaultTheme, thumbnails, onImageClick, ...forwardedProps } = props;
     const handleImageClick = useMemo(() => {
         if (!onImageClick) return undefined;
 

package/src/components/navigation/Navigation.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { getAllByClassName, getByClassName } from '@lumx/react/testing/utils/queries';
 import { Navigation, NavigationProps } from '.';
 import { Orientation } from '..';
 
@@ -14,7 +14,7 @@ type SetupProps = Partial<NavigationProps>;
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
 
-const setup = (propsOverride: SetupProps = {}) => {
+const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props = { 'aria-label': 'navigation', ...propsOverride } as any;
     const { container } = render(
         <Navigation {...props}>
@@ -22,13 +22,12 @@ const setup = (propsOverride: SetupProps = {}) => {
             <Navigation.Item label="A link" as="button" />
             <Navigation.Item label="A link" href="" />
         </Navigation>,
+        { wrapper },
     );
 
-    return {
-        container,
-        element: getByClassName(container, CLASSNAME),
-        props,
-    };
+    const element = getByClassName(container, CLASSNAME);
+    const items = getAllByClassName(element, Navigation.Item.className as string);
+    return { container, element, items, props };
 };
 
 describe(`<${Navigation.displayName}>`, () => {
@@ -54,5 +53,15 @@ describe(`<${Navigation.displayName}>`, () => {
     });
 
     // Common tests suite.
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'element', forwardAttributes: 'element' });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'element',
+        forwardAttributes: 'element',
+        applyTheme: {
+            affects: [{ element: 'element' }, { element: 'items' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
 });

package/src/components/navigation/Navigation.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { HasAriaLabelOrLabelledBy, HasClassName, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { Orientation, Theme } from '@lumx/react';
-import { ThemeContext } from '@lumx/react/utils/ThemeContext';
+import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { NavigationSection } from './NavigationSection';
 import { NavigationItem } from './NavigationItem';
 import { NavigationContext } from './context';
@@ -26,12 +26,20 @@ const COMPONENT_NAME = 'Navigation';
  */
 const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
+/**
+ * Component default props
+ */
+const DEFAULT_PROPS = {
+    orientation: Orientation.vertical,
+};
+
 export const Navigation = Object.assign(
     // eslint-disable-next-line react/display-name
     forwardRef<HTMLElement, NavigationProps>((props, ref) => {
-        const { children, className, theme, orientation, ...forwardedProps } = props;
+        const defaultTheme = useTheme() || Theme.light;
+        const { children, className, theme = defaultTheme, orientation, ...forwardedProps } = props;
         return (
-            <ThemeContext.Provider value={theme}>
+            <ThemeProvider value={theme}>
                 <nav
                     className={classNames(
                         className,
@@ -48,13 +56,13 @@ export const Navigation = Object.assign(
                         <ul className={`${CLASSNAME}__list`}>{children}</ul>
                     </NavigationContext.Provider>
                 </nav>
-            </ThemeContext.Provider>
+            </ThemeProvider>
         );
     }),
     {
         displayName: COMPONENT_NAME,
         className: CLASSNAME,
-        defaultProps: { theme: Theme.light, orientation: Orientation.vertical },
+        defaultProps: DEFAULT_PROPS,
         // Sub components
         Section: NavigationSection,
         Item: NavigationItem,

package/src/components/navigation/NavigationItem.tsx

@@ -1,10 +1,10 @@
-import React, { ElementType, ReactNode, useContext } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { ComponentRef, HasClassName, HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
 import classNames from 'classnames';
 import { forwardRefPolymorphic } from '@lumx/react/utils/forwardRefPolymorphic';
-import { ThemeContext } from '@lumx/react/utils/ThemeContext';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
 
 type BaseNavigationItemProps = {
@@ -41,7 +41,7 @@ export const CLASSNAME = getRootClassName(COMPONENT_NAME);
 export const NavigationItem = Object.assign(
     forwardRefPolymorphic(<E extends ElementType = 'a'>(props: NavigationItemProps<E>, ref: ComponentRef<E>) => {
         const { className, icon, label, isCurrentPage, as: Element = 'a', ...forwardedProps } = props;
-        const theme = useContext(ThemeContext);
+        const theme = useTheme();
         const { tooltipLabel, labelRef } = useOverflowTooltipLabel();
 
         const buttonProps = Element === 'button' ? { type: 'button' } : {};

package/src/components/navigation/NavigationSection.tsx

@@ -5,7 +5,7 @@ import { Icon, Size, Text, Orientation, Popover, Placement, Theme } from '@lumx/
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { HasClassName } from '@lumx/react/utils/type';
-import { ThemeContext } from '@lumx/react/utils/ThemeContext';
+import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useId } from '@lumx/react/hooks/useId';
 
 import { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';
@@ -37,7 +37,7 @@ export const NavigationSection = Object.assign(
         const buttonRef = useRef<HTMLButtonElement>(null);
         const sectionId = useId();
         const { orientation } = useContext(NavigationContext) || {};
-        const theme = useContext(ThemeContext);
+        const theme = useTheme();
         const isDropdown = orientation === Orientation.horizontal;
         return (
             <li
@@ -87,13 +87,13 @@ export const NavigationSection = Object.assign(
                             onClose={() => setIsOpen(false)}
                             zIndex={996}
                         >
-                            <ThemeContext.Provider value={Theme.light}>
+                            <ThemeProvider value={Theme.light}>
                                 <ul className={`${CLASSNAME}__drawer--popover`} id={sectionId}>
                                     <NavigationContext.Provider value={{ orientation: Orientation.vertical }}>
                                         {children}
                                     </NavigationContext.Provider>
                                 </ul>
-                            </ThemeContext.Provider>
+                            </ThemeProvider>
                         </Popover>
                     ) : (
                         <ul className={`${CLASSNAME}__drawer`} id={sectionId}>

package/src/components/notification/Notification.tsx

@@ -14,6 +14,7 @@ import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/classNam
 
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -51,7 +52,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<NotificationProps> = {
-    theme: Theme.light,
     zIndex: 9999,
     usePortal: true,
 };
@@ -65,6 +65,7 @@ const DEFAULT_PROPS: Partial<NotificationProps> = {
  * @return React element.
  */
 export const Notification: Comp<NotificationProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         actionLabel,
         className,
@@ -72,7 +73,7 @@ export const Notification: Comp<NotificationProps, HTMLDivElement> = forwardRef(
         isOpen,
         onActionClick,
         onClick,
-        theme,
+        theme = defaultTheme,
         type,
         zIndex,
         usePortal,

package/src/components/popover/Popover.test.tsx

@@ -1,18 +1,27 @@
 import React from 'react';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, screen } from '@testing-library/react';
+import { ThemeSentinel } from '@lumx/react/testing/utils/ThemeSentinel';
 import { Popover, PopoverProps } from './Popover';
 
 const CLASSNAME = Popover.className as string;
 
-const setup = (props: Partial<PopoverProps> = {}) => {
+const setup = (props: Partial<PopoverProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     const { container } = render(
         <Popover isOpen anchorRef={{ current: null }} usePortal={false} {...props} data-testid="popover">
-            {props.children || 'Popover content'}
+            {props.children || (
+                <>
+                    Popover content
+                    <ThemeSentinel />
+                </>
+            )}
         </Popover>,
+        { wrapper },
     );
-    return { props, container, element: screen.getByTestId('popover') };
+    const element = screen.getByTestId('popover');
+    const themeSentinel = screen.getByTestId(ThemeSentinel.testId);
+    return { props, container, element, themeSentinel };
 };
 
 describe(`<${Popover.displayName}>`, () => {
@@ -41,5 +50,10 @@ describe(`<${Popover.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'element',
         forwardAttributes: 'element',
+        applyTheme: {
+            affects: [{ element: 'element' }, { not: { element: 'themeSentinel' } }],
+            viaProp: true,
+            viaContext: false,
+        },
     });
 });

package/src/components/popover/Popover.tsx

@@ -13,6 +13,7 @@ import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { skipRender } from '@lumx/react/utils/skipRender';
 
+import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
 import { useRestoreFocusOnClose } from './useRestoreFocusOnClose';
 import { usePopoverStyle } from './usePopoverStyle';
 import { Elevation, FitAnchorWidth, Offset, Placement, POPOVER_ZINDEX } from './constants';
@@ -179,7 +180,7 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
                               </svg>
                           </div>
                       )}
-                      {children}
+                      <ThemeProvider value={undefined}>{children}</ThemeProvider>
                   </ClickAwayProvider>
               </Component>,
               usePortal,

package/src/components/post-block/PostBlock.test.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { PostBlock, PostBlockProps } from './PostBlock';
 
 const CLASSNAME = PostBlock.className as string;
 
-const setup = (props: Partial<PostBlockProps> = {}) => {
-    render(<PostBlock {...(props as any)} />);
+const setup = (props: Partial<PostBlockProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<PostBlock {...(props as any)} />, { wrapper });
     const postBlock = queryByClassName(document.body, CLASSNAME);
     return { props, postBlock };
 };
@@ -19,5 +19,11 @@ describe(`<${PostBlock.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'postBlock',
         forwardAttributes: 'postBlock',
+        applyTheme: {
+            affects: [{ element: 'postBlock' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/post-block/PostBlock.tsx

@@ -8,6 +8,7 @@ import { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } from
 
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -50,7 +51,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<PostBlockProps> = {
     orientation: Orientation.horizontal,
-    theme: Theme.light,
 };
 
 /**
@@ -61,6 +61,7 @@ const DEFAULT_PROPS: Partial<PostBlockProps> = {
  * @return React element.
  */
 export const PostBlock: Comp<PostBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         actions,
         attachments,
@@ -71,7 +72,7 @@ export const PostBlock: Comp<PostBlockProps, HTMLDivElement> = forwardRef((props
         orientation,
         tags,
         text,
-        theme,
+        theme = defaultTheme,
         thumbnailProps,
         title,
         ...forwardedProps

package/src/components/progress/Progress.tsx

@@ -6,6 +6,7 @@ import { Theme } from '@lumx/react';
 
 import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { ProgressLinear } from './ProgressLinear';
 import { ProgressCircular } from './ProgressCircular';
 
@@ -37,7 +38,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<ProgressProps> = {
-    theme: Theme.light,
     variant: ProgressVariant.circular,
 };
 
@@ -50,7 +50,8 @@ const DEFAULT_PROPS: Partial<ProgressProps> = {
  * @return React element.
  */
 export const Progress: Comp<ProgressProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, theme, variant, ...forwardedProps } = props;
+    const defaultTheme = useTheme() || Theme.light;
+    const { className, theme = defaultTheme, variant, ...forwardedProps } = props;
 
     return (
         <div

package/src/components/progress/ProgressCircular.test.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
 import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
-import { Theme } from '@lumx/react';
 
 import { ProgressCircular, ProgressCircularProps } from './ProgressCircular';
 
@@ -12,8 +11,8 @@ const CLASSNAME = ProgressCircular.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (props: Partial<ProgressCircularProps> = {}) => {
-    const { container } = render(<ProgressCircular {...(props as any)} />);
+const setup = (props: Partial<ProgressCircularProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const { container } = render(<ProgressCircular {...(props as any)} />, { wrapper });
     const element = getByClassName(container, CLASSNAME);
     return { container, element, props };
 };
@@ -21,23 +20,11 @@ const setup = (props: Partial<ProgressCircularProps> = {}) => {
 describe(`<${ProgressCircular.displayName}>`, () => {
     it('should render default', () => {
         const { element } = setup();
-        expect(element).toBeInTheDocument();
-        expect(element).toHaveClass(CLASSNAME);
-        expect(element).toHaveClass(`${CLASSNAME}--theme-light`);
         expect(element).toHaveClass(`${CLASSNAME}--size-m`);
     });
 
-    it('should render dark theme', () => {
-        const { element } = setup({ theme: Theme.dark });
-        expect(element).toBeInTheDocument();
-        expect(element).toHaveClass(CLASSNAME);
-        expect(element).toHaveClass(`${CLASSNAME}--theme-dark`);
-    });
-
     it('should render size xs', () => {
         const { element } = setup({ size: 'xs' });
-        expect(element).toBeInTheDocument();
-        expect(element).toHaveClass(CLASSNAME);
         expect(element).toHaveClass(`${CLASSNAME}--size-xs`);
     });
 
@@ -45,5 +32,11 @@ describe(`<${ProgressCircular.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'element',
         forwardAttributes: 'element',
+        applyTheme: {
+            affects: [{ element: 'element' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/progress/ProgressCircular.tsx

@@ -6,6 +6,7 @@ import { Theme, Size } from '@lumx/react';
 
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Progress sizes.
@@ -34,7 +35,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<ProgressCircularProps> = {
-    theme: Theme.light,
     size: Size.m,
 };
 
@@ -46,7 +46,8 @@ const DEFAULT_PROPS: Partial<ProgressCircularProps> = {
  * @return React element.
  */
 export const ProgressCircular: Comp<ProgressCircularProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, theme, size, ...forwardedProps } = props;
+    const defaultTheme = useTheme() || Theme.light;
+    const { className, theme = defaultTheme, size, ...forwardedProps } = props;
 
     return (
         <div