@lumx/core 3.19.0 → 3.19.1-alpha.0

package/js/constants/index.js

@@ -32,6 +32,159 @@ const TOOLTIP_LONG_PRESS_DELAY = {
     open: 250,
     close: 3000,
 };
+/**
+ * Alignments.
+ */
+const Alignment = {
+    bottom: 'bottom',
+    center: 'center',
+    end: 'end',
+    left: 'left',
+    right: 'right',
+    spaceAround: 'space-around',
+    spaceBetween: 'space-between',
+    spaceEvenly: 'space-evenly',
+    start: 'start',
+    top: 'top',
+};
+const Theme = {
+    light: 'light',
+    dark: 'dark',
+};
+const Size = {
+    xxs: 'xxs',
+    xs: 'xs',
+    s: 's',
+    m: 'm',
+    l: 'l',
+    xl: 'xl',
+    xxl: 'xxl',
+    tiny: 'tiny',
+    regular: 'regular',
+    medium: 'medium',
+    big: 'big',
+    huge: 'huge',
+};
+const Orientation = {
+    horizontal: 'horizontal',
+    vertical: 'vertical',
+};
+const Emphasis = {
+    low: 'low',
+    medium: 'medium',
+    high: 'high',
+};
+/**
+ * List of typographies that can't be customized.
+ */
+const TypographyInterface = {
+    overline: 'overline',
+    caption: 'caption',
+    body1: 'body1',
+    body2: 'body2',
+    subtitle1: 'subtitle1',
+    subtitle2: 'subtitle2',
+    title: 'title',
+    headline: 'headline',
+    display1: 'display1',
+};
+/**
+ * List of title typographies that can be customized (via CSS variables).
+ */
+const TypographyTitleCustom = {
+    title1: 'custom-title1',
+    title2: 'custom-title2',
+    title3: 'custom-title3',
+    title4: 'custom-title4',
+    title5: 'custom-title5',
+    title6: 'custom-title6',
+};
+/**
+ * List of typographies that can be customized (via CSS variables).
+ */
+const TypographyCustom = {
+    ...TypographyTitleCustom,
+    intro: 'custom-intro',
+    'body-large': 'custom-body-large',
+    body: 'custom-body',
+    quote: 'custom-quote',
+    'publish-info': 'custom-publish-info',
+    button: 'custom-button',
+};
+/**
+ * List of all typographies.
+ */
+const Typography = {
+    ...TypographyInterface,
+    custom: TypographyCustom,
+};
+/**
+ * All available aspect ratios.
+ */
+const AspectRatio = {
+    /** Intrinsic content ratio. */
+    original: 'original',
+    /** Ratio 3:1 */
+    panoramic: 'panoramic',
+    /** Ratio 16:9 */
+    wide: 'wide',
+    /** Ratio 3:2 */
+    horizontal: 'horizontal',
+    /** Ratio 3:2 */
+    vertical: 'vertical',
+    /** Ratio 1:1 */
+    square: 'square',
+    /** Ratio constrained by the parent. */
+    free: 'free',
+};
+/**
+ * Semantic info about the purpose of the component
+ */
+const Kind = {
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+};
+/**
+ * All available white-space values
+ * */
+const WhiteSpace = {
+    normal: 'normal',
+    nowrap: 'nowrap',
+    pre: 'pre',
+    'pre-wrap': 'pre-wrap',
+    'pre-line': 'pre-line',
+    'break-spaces': 'break-spaces',
+};
+/**
+ * See SCSS variable $lumx-color-palette
+ */
+const ColorPalette = {
+    primary: 'primary',
+    secondary: 'secondary',
+    blue: 'blue',
+    dark: 'dark',
+    green: 'green',
+    yellow: 'yellow',
+    red: 'red',
+    light: 'light',
+    grey: 'grey',
+};
+/**
+ * See SCSS variable $lumx-color-variants
+ */
+const ColorVariant = {
+    D1: 'D1',
+    D2: 'D2',
+    L1: 'L1',
+    L2: 'L2',
+    L3: 'L3',
+    L4: 'L4',
+    L5: 'L5',
+    L6: 'L6',
+    N: 'N',
+};
 
 exports.BACKSPACE_KEY_CODE = js_constants_keycodes.BACKSPACE_KEY_CODE;
 exports.DOWN_KEY_CODE = js_constants_keycodes.DOWN_KEY_CODE;
@@ -42,10 +195,24 @@ exports.RIGHT_KEY_CODE = js_constants_keycodes.RIGHT_KEY_CODE;
 exports.SPACE_KEY_CODE = js_constants_keycodes.SPACE_KEY_CODE;
 exports.TAB_KEY_CODE = js_constants_keycodes.TAB_KEY_CODE;
 exports.UP_KEY_CODE = js_constants_keycodes.UP_KEY_CODE;
+exports.Alignment = Alignment;
+exports.AspectRatio = AspectRatio;
 exports.CSS_PREFIX = CSS_PREFIX;
+exports.ColorPalette = ColorPalette;
+exports.ColorVariant = ColorVariant;
 exports.DIALOG_TRANSITION_DURATION = DIALOG_TRANSITION_DURATION;
 exports.EXPANSION_PANEL_TRANSITION_DURATION = EXPANSION_PANEL_TRANSITION_DURATION;
+exports.Emphasis = Emphasis;
+exports.Kind = Kind;
 exports.NOTIFICATION_TRANSITION_DURATION = NOTIFICATION_TRANSITION_DURATION;
+exports.Orientation = Orientation;
 exports.SLIDESHOW_TRANSITION_DURATION = SLIDESHOW_TRANSITION_DURATION;
+exports.Size = Size;
 exports.TOOLTIP_HOVER_DELAY = TOOLTIP_HOVER_DELAY;
 exports.TOOLTIP_LONG_PRESS_DELAY = TOOLTIP_LONG_PRESS_DELAY;
+exports.Theme = Theme;
+exports.Typography = Typography;
+exports.TypographyCustom = TypographyCustom;
+exports.TypographyInterface = TypographyInterface;
+exports.TypographyTitleCustom = TypographyTitleCustom;
+exports.WhiteSpace = WhiteSpace;

package/js/constants/index.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var E=require("./keycodes.min.js");exports.BACKSPACE_KEY_CODE=E.BACKSPACE_KEY_CODE,exports.DOWN_KEY_CODE=E.DOWN_KEY_CODE,exports.ENTER_KEY_CODE=E.ENTER_KEY_CODE,exports.ESCAPE_KEY_CODE=E.ESCAPE_KEY_CODE,exports.LEFT_KEY_CODE=E.LEFT_KEY_CODE,exports.RIGHT_KEY_CODE=E.RIGHT_KEY_CODE,exports.SPACE_KEY_CODE=E.SPACE_KEY_CODE,exports.TAB_KEY_CODE=E.TAB_KEY_CODE,exports.UP_KEY_CODE=E.UP_KEY_CODE,exports.CSS_PREFIX="lumx",exports.DIALOG_TRANSITION_DURATION=400,exports.EXPANSION_PANEL_TRANSITION_DURATION=400,exports.NOTIFICATION_TRANSITION_DURATION=200,exports.SLIDESHOW_TRANSITION_DURATION=5e3,exports.TOOLTIP_HOVER_DELAY={open:500,close:500},exports.TOOLTIP_LONG_PRESS_DELAY={open:250,close:3e3};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./keycodes.min.js");const t={overline:"overline",caption:"caption",body1:"body1",body2:"body2",subtitle1:"subtitle1",subtitle2:"subtitle2",title:"title",headline:"headline",display1:"display1"},o={title1:"custom-title1",title2:"custom-title2",title3:"custom-title3",title4:"custom-title4",title5:"custom-title5",title6:"custom-title6"},r={...o,intro:"custom-intro","body-large":"custom-body-large",body:"custom-body",quote:"custom-quote","publish-info":"custom-publish-info",button:"custom-button"},s={...t,custom:r};exports.BACKSPACE_KEY_CODE=e.BACKSPACE_KEY_CODE,exports.DOWN_KEY_CODE=e.DOWN_KEY_CODE,exports.ENTER_KEY_CODE=e.ENTER_KEY_CODE,exports.ESCAPE_KEY_CODE=e.ESCAPE_KEY_CODE,exports.LEFT_KEY_CODE=e.LEFT_KEY_CODE,exports.RIGHT_KEY_CODE=e.RIGHT_KEY_CODE,exports.SPACE_KEY_CODE=e.SPACE_KEY_CODE,exports.TAB_KEY_CODE=e.TAB_KEY_CODE,exports.UP_KEY_CODE=e.UP_KEY_CODE,exports.Alignment={bottom:"bottom",center:"center",end:"end",left:"left",right:"right",spaceAround:"space-around",spaceBetween:"space-between",spaceEvenly:"space-evenly",start:"start",top:"top"},exports.AspectRatio={original:"original",panoramic:"panoramic",wide:"wide",horizontal:"horizontal",vertical:"vertical",square:"square",free:"free"},exports.CSS_PREFIX="lumx",exports.ColorPalette={primary:"primary",secondary:"secondary",blue:"blue",dark:"dark",green:"green",yellow:"yellow",red:"red",light:"light",grey:"grey"},exports.ColorVariant={D1:"D1",D2:"D2",L1:"L1",L2:"L2",L3:"L3",L4:"L4",L5:"L5",L6:"L6",N:"N"},exports.DIALOG_TRANSITION_DURATION=400,exports.EXPANSION_PANEL_TRANSITION_DURATION=400,exports.Emphasis={low:"low",medium:"medium",high:"high"},exports.Kind={info:"info",success:"success",warning:"warning",error:"error"},exports.NOTIFICATION_TRANSITION_DURATION=200,exports.Orientation={horizontal:"horizontal",vertical:"vertical"},exports.SLIDESHOW_TRANSITION_DURATION=5e3,exports.Size={xxs:"xxs",xs:"xs",s:"s",m:"m",l:"l",xl:"xl",xxl:"xxl",tiny:"tiny",regular:"regular",medium:"medium",big:"big",huge:"huge"},exports.TOOLTIP_HOVER_DELAY={open:500,close:500},exports.TOOLTIP_LONG_PRESS_DELAY={open:250,close:3e3},exports.Theme={light:"light",dark:"dark"},exports.Typography=s,exports.TypographyCustom=r,exports.TypographyInterface=t,exports.TypographyTitleCustom=o,exports.WhiteSpace={normal:"normal",nowrap:"nowrap",pre:"pre","pre-wrap":"pre-wrap","pre-line":"pre-line","break-spaces":"break-spaces"};

package/js/constants/index.ts

@@ -1,3 +1,4 @@
+import { ValueOf } from '../types/ValueOf';
 /**
  * The prefix to use for the CSS classes.
  */
@@ -34,3 +35,197 @@ export const TOOLTIP_LONG_PRESS_DELAY = {
     open: 250,
     close: 3000,
 };
+
+/**
+ * Alignments.
+ */
+export const Alignment = {
+    bottom: 'bottom',
+    center: 'center',
+    end: 'end',
+    left: 'left',
+    right: 'right',
+    spaceAround: 'space-around',
+    spaceBetween: 'space-between',
+    spaceEvenly: 'space-evenly',
+    start: 'start',
+    top: 'top',
+} as const;
+export type Alignment = ValueOf<typeof Alignment>;
+export type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
+export type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
+
+export const Theme = {
+    light: 'light',
+    dark: 'dark',
+} as const;
+export type Theme = ValueOf<typeof Theme>;
+
+export const Size = {
+    xxs: 'xxs',
+    xs: 'xs',
+    s: 's',
+    m: 'm',
+    l: 'l',
+    xl: 'xl',
+    xxl: 'xxl',
+    tiny: 'tiny',
+    regular: 'regular',
+    medium: 'medium',
+    big: 'big',
+    huge: 'huge',
+} as const;
+export type Size = ValueOf<typeof Size>;
+export type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+
+export const Orientation = {
+    horizontal: 'horizontal',
+    vertical: 'vertical',
+} as const;
+export type Orientation = ValueOf<typeof Orientation>;
+
+export const Emphasis = {
+    low: 'low',
+    medium: 'medium',
+    high: 'high',
+} as const;
+export type Emphasis = ValueOf<typeof Emphasis>;
+
+/**
+ * List of typographies that can't be customized.
+ */
+export const TypographyInterface = {
+    overline: 'overline',
+    caption: 'caption',
+    body1: 'body1',
+    body2: 'body2',
+    subtitle1: 'subtitle1',
+    subtitle2: 'subtitle2',
+    title: 'title',
+    headline: 'headline',
+    display1: 'display1',
+} as const;
+export type TypographyInterface = ValueOf<typeof TypographyInterface>;
+
+/**
+ * List of title typographies that can be customized (via CSS variables).
+ */
+export const TypographyTitleCustom = {
+    title1: 'custom-title1',
+    title2: 'custom-title2',
+    title3: 'custom-title3',
+    title4: 'custom-title4',
+    title5: 'custom-title5',
+    title6: 'custom-title6',
+} as const;
+export type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
+
+/**
+ * List of typographies that can be customized (via CSS variables).
+ */
+export const TypographyCustom = {
+    ...TypographyTitleCustom,
+    intro: 'custom-intro',
+    'body-large': 'custom-body-large',
+    body: 'custom-body',
+    quote: 'custom-quote',
+    'publish-info': 'custom-publish-info',
+    button: 'custom-button',
+} as const;
+export type TypographyCustom = ValueOf<typeof TypographyCustom>;
+
+/**
+ * List of all typographies.
+ */
+export const Typography = {
+    ...TypographyInterface,
+    custom: TypographyCustom,
+} as const;
+export type Typography = TypographyInterface | TypographyCustom;
+
+/**
+ * All available aspect ratios.
+ */
+export const AspectRatio = {
+    /** Intrinsic content ratio. */
+    original: 'original',
+    /** Ratio 3:1 */
+    panoramic: 'panoramic',
+    /** Ratio 16:9 */
+    wide: 'wide',
+    /** Ratio 3:2 */
+    horizontal: 'horizontal',
+    /** Ratio 3:2 */
+    vertical: 'vertical',
+    /** Ratio 1:1 */
+    square: 'square',
+    /** Ratio constrained by the parent. */
+    free: 'free',
+} as const;
+export type AspectRatio = ValueOf<typeof AspectRatio>;
+
+/**
+ * Semantic info about the purpose of the component
+ */
+export const Kind = {
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+} as const;
+export type Kind = ValueOf<typeof Kind>;
+
+/**
+ * All available white-space values
+ * */
+export const WhiteSpace = {
+    normal: 'normal',
+    nowrap: 'nowrap',
+    pre: 'pre',
+    'pre-wrap': 'pre-wrap',
+    'pre-line': 'pre-line',
+    'break-spaces': 'break-spaces',
+};
+export type WhiteSpace = ValueOf<typeof WhiteSpace>;
+
+/**
+ * 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/js/types/Callback.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/js/types/Callback.min.js

@@ -0,0 +1 @@
+"use strict";

package/js/types/Callback.ts

@@ -0,0 +1,4 @@
+/**
+ * Callback function type alias (use for readability)
+ */
+export type Callback = () => void;

package/js/types/Falsy.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/js/types/Falsy.min.js

@@ -0,0 +1 @@
+"use strict";

package/js/types/Falsy.ts

@@ -0,0 +1,5 @@
+/**
+ * JS falsy values.
+ * (excluding `NaN` as it can't be distinguished from `number`)
+ */
+export type Falsy = false | undefined | null | 0 | '';

package/js/types/GenericProps.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/js/types/GenericProps.min.js

@@ -0,0 +1 @@
+"use strict";

package/js/types/GenericProps.ts

@@ -0,0 +1,11 @@
+import type { HasClassName } from './HasClassName';
+
+/**
+ * Define a generic props types.
+ */
+export interface GenericProps extends HasClassName {
+    /**
+     * Any prop (particularly any supported prop for a HTML element).
+     */
+    [propName: string]: any;
+}

package/js/types/HasAriaLabelOrLabelledBy.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/js/types/HasAriaLabelOrLabelledBy.min.js

@@ -0,0 +1 @@
+"use strict";

package/js/types/HasAriaLabelOrLabelledBy.ts

@@ -0,0 +1,19 @@
+/**
+ * Require either `aria-label` or `arial-labelledby` prop.
+ * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
+ * needs a visible element.
+ */
+export type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string
+    ? {
+          /**
+           * The id of the element to use as title of the dialog. Can be within or out of the dialog.
+           * Although it is not recommended, aria-label can be used instead if no visible element is available.
+           */
+          'aria-labelledby': T;
+          /** The label of the dialog. */
+          'aria-label'?: undefined;
+      }
+    : {
+          'aria-label': string;
+          'aria-labelledby'?: undefined;
+      };

package/js/types/HasClassName.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/js/types/HasClassName.min.js

@@ -0,0 +1 @@
+"use strict";

package/js/types/HasClassName.ts

@@ -0,0 +1,6 @@
+export interface HasClassName {
+    /**
+     * Class name forwarded to the root element of the component.
+     */
+    className?: string;
+}

package/js/types/HasCloseMode.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/js/types/HasCloseMode.min.js

@@ -0,0 +1 @@
+"use strict";

package/js/types/HasCloseMode.ts

@@ -0,0 +1,7 @@
+export interface HasCloseMode {
+    /**
+     * Choose how the children are hidden when closed
+     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+     */
+    closeMode?: 'hide' | 'unmount';
+}

package/js/types/HasTheme.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/js/types/HasTheme.min.js

@@ -0,0 +1 @@
+"use strict";

package/js/types/HasTheme.ts

@@ -0,0 +1,8 @@
+import type { Theme } from '../constants';
+
+export interface HasTheme {
+    /**
+     * Theme adapting the component to light or dark background.
+     */
+    theme?: Theme;
+}

package/js/types/HeadingElement.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/js/types/HeadingElement.min.js

@@ -0,0 +1 @@
+"use strict";

package/js/types/HeadingElement.ts

@@ -0,0 +1,2 @@
+/** Union type of all heading elements */
+export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/js/types/Point.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/js/types/Point.min.js

@@ -0,0 +1 @@
+"use strict";

package/js/types/Point.ts

@@ -0,0 +1,4 @@
+/**
+ * A point coordinate in 2D space
+ */
+export type Point = { x: number; y: number };

package/js/types/Predicate.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/js/types/Predicate.min.js

@@ -0,0 +1 @@
+"use strict";

package/js/types/Predicate.ts

@@ -0,0 +1,2 @@
+/** Predicate function type */
+export type Predicate<T> = (t: T) => boolean;

package/js/types/RectSize.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/js/types/RectSize.min.js

@@ -0,0 +1 @@
+"use strict";

package/js/types/RectSize.ts

@@ -0,0 +1,4 @@
+/**
+ * Rectangle size
+ */
+export type RectSize = { width: number; height: number };

package/js/types/TextElement.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/js/types/TextElement.min.js

@@ -0,0 +1 @@
+"use strict";

package/js/types/TextElement.ts

@@ -0,0 +1,4 @@
+import type { HeadingElement } from './HeadingElement';
+
+/** Union type of all text elements */
+export type TextElement = 'span' | 'p' | HeadingElement;

package/js/types/ValueOf.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/js/types/ValueOf.min.js

@@ -0,0 +1 @@
+"use strict";

package/js/types/ValueOf.ts

@@ -0,0 +1,2 @@
+/** Get types of the values of a record. */
+export type ValueOf<T extends Record<any, any>> = T[keyof T];

package/js/types/index.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/js/types/index.min.js

@@ -0,0 +1 @@
+"use strict";

package/js/types/index.ts

@@ -0,0 +1,13 @@
+export type { Callback } from './Callback';
+export type { Falsy } from './Falsy';
+export type { HasAriaLabelOrLabelledBy } from './HasAriaLabelOrLabelledBy';
+export type { HasClassName } from './HasClassName';
+export type { HasCloseMode } from './HasCloseMode';
+export type { HasTheme } from './HasTheme';
+export type { GenericProps } from './GenericProps';
+export type { HeadingElement } from './HeadingElement';
+export type { Point } from './Point';
+export type { Predicate } from './Predicate';
+export type { RectSize } from './RectSize';
+export type { TextElement } from './TextElement';
+export type { ValueOf } from './ValueOf';

package/js/utils/className/fontColorClass.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var js_constants_index = require('../../constants/index.js');
+var js_utils_className_resolveColorWithVariants = require('./resolveColorWithVariants.js');
+require('../../constants/keycodes.js');
+
+/**
+ * Returns the classname associated to the given color and variant.
+ * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-L2`
+ */
+function fontColorClass(propColor, propColorVariant) {
+    if (!propColor)
+        return undefined;
+    const [color, colorVariant = js_constants_index.ColorVariant.N] = js_utils_className_resolveColorWithVariants.resolveColorWithVariants(propColor, propColorVariant);
+    return `lumx-color-font-${color}-${colorVariant}`;
+}
+
+exports.fontColorClass = fontColorClass;

package/js/utils/className/fontColorClass.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../../constants/index.min.js"),e=require("./resolveColorWithVariants.min.js");require("../../constants/keycodes.min.js"),exports.fontColorClass=function(o,t){if(!o)return;const[s,n=r.ColorVariant.N]=e.resolveColorWithVariants(o,t);return`lumx-color-font-${s}-${n}`};

package/js/utils/className/fontColorClass.test.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var js_utils_className_fontColorClass = require('./fontColorClass.js');
+require('../../constants/index.js');
+require('../../constants/keycodes.js');
+require('./resolveColorWithVariants.js');
+
+describe(js_utils_className_fontColorClass.fontColorClass, () => {
+    it('should get lumx class for font color', () => {
+        expect(js_utils_className_fontColorClass.fontColorClass('dark')).toBe('lumx-color-font-dark-N');
+    });
+    it('should get lumx class for font color with variant', () => {
+        expect(js_utils_className_fontColorClass.fontColorClass('red', 'L2')).toBe('lumx-color-font-red-L2');
+    });
+    it('should get lumx class for font color with variant with override', () => {
+        expect(js_utils_className_fontColorClass.fontColorClass('red-N', 'L2')).toBe('lumx-color-font-red-L2');
+    });
+});