@lumx/react 3.13.3-alpha.0 → 3.13.3-alpha.2

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.13.3-alpha.0",
-        "@lumx/icons": "^3.13.3-alpha.0",
+        "@lumx/core": "^3.13.3-alpha.2",
+        "@lumx/icons": "^3.13.3-alpha.2",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.13.3-alpha.0"
+    "version": "3.13.3-alpha.2"
 }

package/src/components/avatar/Avatar.stories.tsx

@@ -13,7 +13,7 @@ import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps'
 import { iconArgType } from '@lumx/react/stories/controls/icons';
 import { Avatar } from './Avatar';
 
-const AVATAR_SIZES = [Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
+const AVATAR_SIZES = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
 
 export default {
     title: 'LumX components/avatar/Avatar',

package/src/components/avatar/Avatar.tsx

@@ -12,7 +12,7 @@ import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 /**
  * Avatar sizes.
  */
-export type AvatarSize = Extract<Size, 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+export type AvatarSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
 
 /**
  * Defines the props of the component.

package/src/components/button/IconButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Emphasis, Icon, Size, Theme, Tooltip, TooltipProps } from '@lumx/react';
+import { Emphasis, Icon, Size, Theme, ThemeProvider, Tooltip, TooltipProps } from '@lumx/react';
 import { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';
 import { getRootClassName } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -80,7 +80,9 @@ export const IconButton = forwardRef<IconButtonProps, HTMLButtonElement>((props,
                         src={image}
                     />
                 ) : (
-                    <Icon icon={icon as string} />
+                    <ThemeProvider value={undefined}>
+                        <Icon icon={icon as string} />
+                    </ThemeProvider>
                 )}
             </ButtonRoot>
         </Tooltip>

package/src/components/expansion-panel/ExpansionPanel.stories.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React from 'react';
+
+import { ExpansionPanel, FlexBox } from '@lumx/react';
+import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
+
+export default {
+    title: 'LumX components/expansion-panel/ExpansionPanel',
+    component: ExpansionPanel,
+    args: {
+        'toggleButtonProps.label': 'Toggle',
+        children: 'Content',
+        label: 'Label',
+    },
+    decorators: [withNestedProps()],
+    render({ toggleButtonProps, ...args }: any) {
+        const [isOpen, setOpen] = React.useState(args.isOpen);
+        return (
+            <ExpansionPanel isOpen={isOpen} toggleButtonProps={toggleButtonProps} onToggleOpen={setOpen} {...args} />
+        );
+    },
+};
+
+/** Minimal expansion panel config */
+export const Default = {};
+
+/** hasBackground variant */
+export const HasBackground = {
+    args: {
+        hasBackground: true,
+    },
+};
+
+/** hasHeaderDivider variant */
+export const HasHeaderDivider = {
+    args: {
+        isOpen: true,
+        hasBackground: true,
+        hasHeaderDivider: true,
+    },
+};
+
+/** Test resizable content work */
+export const ResizingContent = {
+    args: {
+        hasBackground: true,
+        children: (
+            <FlexBox
+                style={{ resize: 'both', overflow: 'hidden' }}
+                hAlign="center"
+                vAlign="center"
+                className="lumx-spacing-padding-huge"
+            >
+                Content
+            </FlexBox>
+        ),
+    },
+};

package/src/components/expansion-panel/ExpansionPanel.tsx

@@ -1,12 +1,10 @@
-import React, { Children, PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';
+import React, { Children, PropsWithChildren, ReactNode, useRef } from 'react';
 
 import classNames from 'classnames';
 
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 
-import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
-import isFunction from 'lodash/isFunction';
 
 import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
 import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
@@ -101,13 +99,13 @@ export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((p
     const toggleOpen = (event: React.MouseEvent) => {
         const shouldOpen = !isOpen;
 
-        if (isFunction(onOpen) && shouldOpen) {
+        if (onOpen && shouldOpen) {
             onOpen(event);
         }
-        if (isFunction(onClose) && !shouldOpen) {
+        if (onClose && !shouldOpen) {
             onClose(event);
         }
-        if (isFunction(onToggleOpen)) {
+        if (onToggleOpen) {
             onToggleOpen(shouldOpen, event);
         }
     };
@@ -133,13 +131,6 @@ export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((p
     /** Hide the children at the end of the transition */
     const isChildrenVisible = useTransitionVisibility(wrapperRef, !!isOpen, EXPANSION_PANEL_TRANSITION_DURATION);
 
-    // Switch max height on/off to activate the CSS transition (updates when children changes).
-    const [maxHeight, setMaxHeight] = useState('0');
-    useEffect(() => {
-        const height = isOpen ? get(wrapperRef.current, 'offsetHeight', 0) : 0;
-        setMaxHeight(`${height}px`);
-    }, [children, isOpen]);
-
     return (
         <section ref={ref} {...forwardedProps} className={rootClassName}>
             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
@@ -161,15 +152,15 @@ export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((p
                 </div>
             </header>
 
-            {(isOpen || isChildrenVisible) && (
-                <div className={`${CLASSNAME}__wrapper`} style={{ maxHeight }}>
+            <div className={`${CLASSNAME}__wrapper`}>
+                {(isOpen || isChildrenVisible) && (
                     <div className={`${CLASSNAME}__container`} ref={wrapperRef}>
                         <div className={`${CLASSNAME}__content`}>{content}</div>
 
                         {footer && <div className={`${CLASSNAME}__footer`}>{footer}</div>}
                     </div>
-                </div>
-            )}
+                )}
+            </div>
         </section>
     );
 });

package/src/components/icon/Icon.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { mdiAlertCircle } from '@lumx/icons';
-import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
+import { ColorPalette, ColorVariant, ColorWithVariants, Size, Theme } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses, resolveColorWithVariants } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
@@ -16,7 +16,7 @@ export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'x
  */
 export interface IconProps extends GenericProps, HasTheme {
     /** Color variant. */
-    color?: ColorPalette;
+    color?: ColorWithVariants;
     /** Lightened or darkened variant of the selected icon color. */
     colorVariant?: ColorVariant;
     /** Whether the icon has a shape. */
@@ -58,8 +58,8 @@ export const Icon = forwardRef<IconProps, HTMLElement>((props, ref) => {
     const defaultTheme = useTheme();
     const {
         className,
-        color,
-        colorVariant,
+        color: propColor,
+        colorVariant: propColorVariant,
         hasShape,
         icon,
         size,
@@ -67,6 +67,7 @@ export const Icon = forwardRef<IconProps, HTMLElement>((props, ref) => {
         alt,
         ...forwardedProps
     } = props;
+    const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
     // Color
     let iconColor = color;

package/src/components/image-block/ImageCaption.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties, ReactNode } from 'react';
 
-import { FlexBox, HorizontalAlignment, Text, TextProps } from '@lumx/react';
+import { FlexBox, HorizontalAlignment, Text, TextProps, useTheme } from '@lumx/react';
 import { HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
 import classNames from 'classnames';
 
@@ -36,9 +36,10 @@ export type ImageCaptionProps<AS extends As = 'figcaption'> = HasTheme &
 
 /** Internal component used to render image captions */
 export const ImageCaption = <AS extends As>(props: ImageCaptionProps<AS>) => {
+    const defaultTheme = useTheme();
     const {
         baseClassName,
-        theme,
+        theme = defaultTheme,
         as = 'figcaption',
         title,
         titleProps,

package/src/components/image-lightbox/ImageLightbox.stories.tsx

@@ -24,12 +24,8 @@ const MULTIPLE_IMAGES: ImageLightboxProps['images'] = [
         description: 'A black labrador puppy with big brown eyes, looking up with a curious and innocent expression.',
         tags: (
             <ChipGroup>
-                <Chip theme="dark" size="s">
-                    Tag 1
-                </Chip>
-                <Chip theme="dark" size="s">
-                    Tag 2
-                </Chip>
+                <Chip size="s">Tag 1</Chip>
+                <Chip size="s">Tag 2</Chip>
             </ChipGroup>
         ),
     },

package/src/components/image-lightbox/ImageLightbox.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import { Lightbox } from '@lumx/react';
+import { Lightbox, ThemeProvider } from '@lumx/react';
 import { ClickAwayProvider } from '@lumx/react/utils';
 import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
@@ -60,17 +60,19 @@ const Inner = forwardRef<ImageLightboxProps, HTMLDivElement>((props, ref) => {
             preventAutoClose
         >
             <ClickAwayProvider childrenRefs={clickAwayChildrenRefs} callback={onClickAway}>
-                <ImageSlideshow
-                    activeImageIndex={activeImageIndex}
-                    slideGroupLabel={slideGroupLabel}
-                    slideshowControlsProps={slideshowControlsProps}
-                    images={images}
-                    zoomInButtonProps={zoomInButtonProps}
-                    zoomOutButtonProps={zoomOutButtonProps}
-                    footerRef={footerRef}
-                    activeImageRef={useMergeRefs(propImageRef, imageRef)}
-                    currentPaginationItemRef={currentPaginationItemRef}
-                />
+                <ThemeProvider value="dark">
+                    <ImageSlideshow
+                        activeImageIndex={activeImageIndex}
+                        slideGroupLabel={slideGroupLabel}
+                        slideshowControlsProps={slideshowControlsProps}
+                        images={images}
+                        zoomInButtonProps={zoomInButtonProps}
+                        zoomOutButtonProps={zoomOutButtonProps}
+                        footerRef={footerRef}
+                        activeImageRef={useMergeRefs(propImageRef, imageRef)}
+                        currentPaginationItemRef={currentPaginationItemRef}
+                    />
+                </ThemeProvider>
             </ClickAwayProvider>
         </Lightbox>
     );

package/src/components/image-lightbox/internal/ImageSlideshow.tsx

@@ -48,14 +48,13 @@ export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
     const tags = images[activeIndex]?.tags;
     const metadata =
         title || description || tags ? (
-            <ImageCaption theme="dark" as="div" title={title} description={description} tags={tags} align="center" />
+            <ImageCaption as="div" title={title} description={description} tags={tags} align="center" />
         ) : null;
 
     // Slideshow controls
     const slideShowControls =
         slidesCount > 1 && slideshowControlsProps ? (
             <SlideshowControls
-                theme="dark"
                 activeIndex={activeIndex}
                 slidesCount={slidesCount}
                 onNextClick={onNextClick}
@@ -93,16 +92,9 @@ export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
     }, [activeIndex]);
     const zoomControls = zoomEnabled && (
         <>
-            <IconButton
-                {...zoomInButtonProps}
-                theme="dark"
-                emphasis="low"
-                icon={mdiMagnifyPlusOutline}
-                onClick={zoomIn}
-            />
+            <IconButton {...zoomInButtonProps} emphasis="low" icon={mdiMagnifyPlusOutline} onClick={zoomIn} />
             <IconButton
                 {...zoomOutButtonProps}
-                theme="dark"
                 emphasis="low"
                 isDisabled={!scale || scale <= 1}
                 icon={mdiMagnifyMinusOutline}
@@ -127,7 +119,6 @@ export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
         <>
             <Slides
                 activeIndex={activeIndex}
-                theme="dark"
                 slideGroupLabel={slideGroupLabel}
                 fillHeight
                 id={slideshowId}

package/src/components/index.ts

@@ -19,39 +19,6 @@ export type Alignment = ValueOf<typeof Alignment>;
 export type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
 export type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
 
-/**
- * See SCSS variable $lumx-color-palette
- */
-export const ColorPalette = {
-    primary: 'primary',
-    secondary: 'secondary',
-    blue: 'blue',
-    dark: 'dark',
-    green: 'green',
-    yellow: 'yellow',
-    red: 'red',
-    light: 'light',
-    grey: 'grey',
-} as const;
-export type ColorPalette = ValueOf<typeof ColorPalette>;
-export type Color = ColorPalette | string;
-
-/**
- * See SCSS variable $lumx-color-variants
- */
-export const ColorVariant = {
-    D1: 'D1',
-    D2: 'D2',
-    L1: 'L1',
-    L2: 'L2',
-    L3: 'L3',
-    L4: 'L4',
-    L5: 'L5',
-    L6: 'L6',
-    N: 'N',
-} as const;
-export type ColorVariant = ValueOf<typeof ColorVariant>;
-
 export const Theme = {
     light: 'light',
     dark: 'dark',
@@ -189,3 +156,5 @@ export type WhiteSpace = ValueOf<typeof WhiteSpace>;
  * Re-exporting some utils types.
  */
 export type { HeadingElement, TextElement, GenericProps, Callback } from '../utils/type';
+
+export * from '../utils/type/color';

package/src/components/inline-list/InlineList.tsx

@@ -2,9 +2,9 @@ import React, { Children, isValidElement } from 'react';
 
 import classNames from 'classnames';
 
-import { ColorPalette, ColorVariant, Typography } from '@lumx/react';
+import { ColorVariant, ColorWithVariants, Typography } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getFontColorClassName, getRootClassName, getTypographyClassName } from '@lumx/react/utils/className';
+import { fontColorClass, getRootClassName, getTypographyClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -14,7 +14,7 @@ export interface InlineListProps extends GenericProps {
     /**
      * Text color.
      */
-    color?: ColorPalette;
+    color?: ColorWithVariants;
     /**
      * Lightened or darkened variant of the selected color.
      */
@@ -57,7 +57,6 @@ const DEFAULT_PROPS = {} as const;
  */
 export const InlineList = forwardRef<InlineListProps>((props, ref) => {
     const { className, color, colorVariant, typography, children, wrap, ...forwardedProps } = props;
-    const fontColorClassName = color && getFontColorClassName(color, colorVariant);
     const typographyClassName = typography && getTypographyClassName(typography);
     return (
         // eslint-disable-next-line jsx-a11y/no-redundant-roles
@@ -68,7 +67,7 @@ export const InlineList = forwardRef<InlineListProps>((props, ref) => {
                 className,
                 CLASSNAME,
                 wrap && `${CLASSNAME}--wrap`,
-                fontColorClassName,
+                fontColorClass(color, colorVariant),
                 typographyClassName,
             )}
             // Lists with removed bullet style can lose their a11y list role on some browsers

package/src/components/link/Link.tsx

@@ -2,9 +2,14 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import { ColorPalette, ColorVariant, Icon, Typography } from '@lumx/react';
+import { ColorVariant, ColorWithVariants, Icon, Typography } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, getTypographyClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import {
+    getRootClassName,
+    getTypographyClassName,
+    handleBasicClasses,
+    resolveColorWithVariants,
+} from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';
 
@@ -15,7 +20,7 @@ type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAn
  */
 export interface LinkProps extends GenericProps {
     /** Color variant. */
-    color?: ColorPalette;
+    color?: ColorWithVariants;
     /** Lightened or darkened variant of the selected icon color. */
     colorVariant?: ColorVariant;
     /** Link href. */
@@ -63,8 +68,8 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
     const {
         children,
         className,
-        color,
-        colorVariant,
+        color: propColor,
+        colorVariant: propColorVariant,
         disabled,
         isDisabled = disabled,
         href,
@@ -75,6 +80,7 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
         typography,
         ...forwardedProps
     } = props;
+    const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
     const isLink = linkAs || href;
     const Component = isLink && !isDisabled ? linkAs || 'a' : 'button';

package/src/components/text/Text.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import { ColorPalette, ColorVariant, Typography, WhiteSpace } from '@lumx/react';
+import { ColorWithVariants, ColorVariant, Typography, WhiteSpace } from '@lumx/react';
 import { GenericProps, TextElement } from '@lumx/react/utils/type';
 import {
-    getFontColorClassName,
+    fontColorClass,
     getRootClassName,
     handleBasicClasses,
     getTypographyClassName,
@@ -22,7 +22,7 @@ export interface TextProps extends GenericProps {
     /**
      * Color variant.
      */
-    color?: ColorPalette;
+    color?: ColorWithVariants;
     /**
      * Lightened or darkened variant of the selected color.
      */
@@ -95,7 +95,6 @@ export const Text = forwardRef<TextProps>((props, ref) => {
         ...forwardedProps
     } = props;
 
-    const colorClass = color && getFontColorClassName(color, colorVariant);
     const typographyClass = typography && getTypographyClassName(typography);
 
     // Truncate mode
@@ -126,7 +125,7 @@ export const Text = forwardRef<TextProps>((props, ref) => {
                     isTruncatedMultiline,
                 }),
                 typographyClass,
-                colorClass,
+                fontColorClass(color, colorVariant),
                 noWrap && `${CLASSNAME}--no-wrap`,
             )}
             title={tooltipLabel}

package/src/utils/className/fontColorClass.test.ts

@@ -0,0 +1,15 @@
+import { fontColorClass } from '@lumx/react/utils/className/fontColorClass';
+
+describe(fontColorClass, () => {
+    it('should get lumx class for font color', () => {
+        expect(fontColorClass('dark')).toBe('lumx-color-font-dark-N');
+    });
+
+    it('should get lumx class for font color with variant', () => {
+        expect(fontColorClass('red', 'L2')).toBe('lumx-color-font-red-L2');
+    });
+
+    it('should get lumx class for font color with variant with override', () => {
+        expect(fontColorClass('red-N', 'L2')).toBe('lumx-color-font-red-L2');
+    });
+});

package/src/utils/className/fontColorClass.ts

@@ -0,0 +1,12 @@
+import { ColorVariant, ColorWithVariants } from '@lumx/react';
+import { resolveColorWithVariants } from '@lumx/react/utils/className';
+
+/**
+ * Returns the classname associated to the given color and variant.
+ * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-L2`
+ */
+export function fontColorClass(propColor?: ColorWithVariants, propColorVariant?: ColorVariant) {
+    if (!propColor) return undefined;
+    const [color, colorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
+    return `lumx-color-font-${color}-${colorVariant}`;
+}

package/src/utils/className/index.ts

@@ -1,4 +1,5 @@
 export { getBasicClass, handleBasicClasses } from '@lumx/core/js/utils';
 export { getRootClassName } from './getRootClassName';
 export { getTypographyClassName } from './getTypographyClassName';
-export { getFontColorClassName } from './getFontColorClassName';
+export { fontColorClass } from './fontColorClass';
+export { resolveColorWithVariants } from './resolveColorWithVariants';

package/src/utils/className/resolveColorWithVariants.test.ts

@@ -0,0 +1,33 @@
+import { resolveColorWithVariants } from './resolveColorWithVariants';
+
+describe(resolveColorWithVariants, () => {
+    it('should handle undefined color', () => {
+        const result = resolveColorWithVariants(undefined);
+        expect(result).toEqual([undefined, undefined]);
+    });
+
+    it('should handle undefined color with variant', () => {
+        const result = resolveColorWithVariants(undefined, 'L2');
+        expect(result).toEqual([undefined, 'L2']);
+    });
+
+    it('should handle color with undefined variant', () => {
+        const result = resolveColorWithVariants('primary');
+        expect(result).toEqual(['primary', undefined]);
+    });
+
+    it('should handle color & variant separated', () => {
+        const result = resolveColorWithVariants('primary', 'L2');
+        expect(result).toEqual(['primary', 'L2']);
+    });
+
+    it('should handle color with variant all in one', () => {
+        const result = resolveColorWithVariants('primary-L2');
+        expect(result).toEqual(['primary', 'L2']);
+    });
+
+    it('should override color variant with the given color variant', () => {
+        const result = resolveColorWithVariants('primary-L2', 'D2');
+        expect(result).toEqual(['primary', 'D2']);
+    });
+});

package/src/utils/className/resolveColorWithVariants.ts

@@ -0,0 +1,11 @@
+import { ColorPalette, ColorVariant, ColorWithVariants } from '@lumx/react';
+
+/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
+export function resolveColorWithVariants(
+    colorWithVariants?: ColorWithVariants,
+    colorVariant?: ColorVariant,
+): [color?: ColorPalette, colorVariant?: ColorVariant] {
+    if (!colorWithVariants) return [undefined, colorVariant];
+    const [color, baseColorVariant] = colorWithVariants.split('-');
+    return [color as ColorPalette, (colorVariant || baseColorVariant) as ColorVariant];
+}

package/src/utils/type/color/index.ts

@@ -0,0 +1,43 @@
+import type { ValueOf } from '@lumx/react/utils/type';
+
+/**
+ * See SCSS variable $lumx-color-palette
+ */
+export const ColorPalette = {
+    primary: 'primary',
+    secondary: 'secondary',
+    blue: 'blue',
+    dark: 'dark',
+    green: 'green',
+    yellow: 'yellow',
+    red: 'red',
+    light: 'light',
+    grey: 'grey',
+} as const;
+export type ColorPalette = ValueOf<typeof ColorPalette>;
+export type Color = ColorPalette | string;
+
+/**
+ * See SCSS variable $lumx-color-variants
+ */
+export const ColorVariant = {
+    D1: 'D1',
+    D2: 'D2',
+    L1: 'L1',
+    L2: 'L2',
+    L3: 'L3',
+    L4: 'L4',
+    L5: 'L5',
+    L6: 'L6',
+    N: 'N',
+} as const;
+export type ColorVariant = ValueOf<typeof ColorVariant>;
+
+/** ColorPalette with all possible color variant combination */
+export type ColorWithVariants =
+    | ColorPalette
+    | Exclude<
+          `${ColorPalette}-${ColorVariant}`,
+          // No dark variant for light and dark
+          `light-D${number}` | `dark-D${number}`
+      >;

package/src/utils/className/getFontColorClassName.test.ts

@@ -1,11 +0,0 @@
-import { getFontColorClassName } from '@lumx/react/utils/className/getFontColorClassName';
-
-describe(getFontColorClassName, () => {
-    it('should get lumx class for font color', () => {
-        expect(getFontColorClassName('dark')).toBe('lumx-color-font-dark-N');
-    });
-
-    it('should get lumx class for font color with variant', () => {
-        expect(getFontColorClassName('red', 'L2')).toBe('lumx-color-font-red-L2');
-    });
-});