@julseb-lib/react 0.0.50 → 0.0.52

package/dist/types/types/global.ts

@@ -0,0 +1,443 @@
+/*=============================================== Global types ===============================================*/
+
+import type {
+    HTMLAttributes,
+    ElementType,
+    ReactNode,
+    Dispatch,
+    SetStateAction,
+    MouseEventHandler,
+} from "react"
+import type { Property } from "csstype"
+import type { DefaultTheme } from "styled-components"
+import type { typeValues } from "./type-values"
+import type { RequireAtLeastOne } from "./require-at-least-one"
+
+/*====================== Common types ======================*/
+
+export type LibColors = keyof typeof typeValues.libColors
+export type LibColorsShort = keyof typeof typeValues.colorsShort
+export type LibAllColors = LibColors | LibColorsShort
+export type LibColorsHover = keyof typeof typeValues.colorsHover
+export type LibColorsHoverAndCurrent = LibColorsHover | "currentColor"
+export type LibOverlays = keyof typeof typeValues.overlays
+export type LibAllColorsAndOverlays =
+    | keyof typeof typeValues.libColors
+    | keyof typeof typeValues.colorsShort
+    | keyof typeof typeValues.overlays
+export type LibFontFamilies = keyof typeof typeValues.fontFamilies
+export type LibFontSizes = keyof typeof typeValues.fontSizes
+export type LibFontWeights = keyof typeof typeValues.fontWeights | number
+export type LibLineHeights = keyof typeof typeValues.lineHeights | number
+export type LibShadows = keyof typeof typeValues.shadows
+export type LibSpacers = keyof typeof typeValues.spacers | number | "0px"
+export type LibRadiuses = keyof typeof typeValues.radiuses | number
+export type LibTransitions = keyof typeof typeValues.transitions
+export type LibValidationStatus = boolean | undefined
+export type LibThemeNames = keyof typeof typeValues.theme
+export type LibIcon = string | JSX.Element
+export type LibInputVariant = keyof typeof typeValues.inputVariants
+export type LibInputBackground = keyof typeof typeValues.inputBackgrounds
+export type LibPositionExtract = Extract<
+    Property.Position,
+    "relative" | "absolute" | "fixed"
+>
+
+/*====================== Common component props ======================*/
+
+/* Component base */
+/**
+ * @description Props common to nearly all components
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ */
+export interface LibComponentBase<T> extends HTMLAttributes<T> {
+    "data-testid"?: string
+    as?: ElementType
+}
+
+/* Box shadow */
+/**
+ * @description Props for components with box shadow
+ * @type "xxl" | "xl" | "l" | "m" | "s" | "xs"
+ * @type { default: "xxl" | "xl" | "l" | "m" | "s" | "xs"; hover: "xxl" | "xl" | "l" | "m" | "s" | "xs"; active: "xxl" | "xl" | "l" | "m" | "s" | "xs" }
+ */
+export type ILibBoxShadow =
+    | LibShadows
+    | {
+          default: LibShadows
+          hover: LibShadows
+          active: LibShadows
+      }
+
+/* Border radius */
+/**
+ * @description Props for components with border radius
+ * @type "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number
+ * @type { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
+ */
+export type ILibRadius =
+    | LibRadiuses
+    | number
+    | null
+    | {
+          topLeft?: LibRadiuses | number | null
+          topRight?: LibRadiuses | number | null
+          bottomLeft?: LibRadiuses | number | null
+          bottomRight?: LibRadiuses | number | null
+      }
+
+/* Padding */
+/**
+ * @description Props for components with paddings
+ * @type "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
+ * @type { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }
+ */
+export type ILibPadding =
+    | LibSpacers
+    | {
+          left?: LibSpacers | "auto"
+          top?: LibSpacers | "auto"
+          right?: LibSpacers | "auto"
+          bottom?: LibSpacers | "auto"
+          leftRight?: LibSpacers | "auto"
+          topBottom?: LibSpacers | "auto"
+      }
+
+/* Margins */
+/**
+ * @description Props for components with margins
+ * @type "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | "auto" | "0 auto"
+ * @type { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }
+ */
+export type ILibMargin =
+    | LibSpacers
+    | undefined
+    | "auto"
+    | "0 auto"
+    | {
+          left?: LibSpacers | "auto"
+          top?: LibSpacers | "auto"
+          right?: LibSpacers | "auto"
+          bottom?: LibSpacers | "auto"
+          leftRight?: LibSpacers | "auto"
+          topBottom?: LibSpacers | "auto"
+      }
+
+/* Border */
+/**
+ * @description Props for components with borders
+ * @prop style?: CssBorderStyle
+ * @prop width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
+ * @prop color?: Any color from the library
+ */
+export type ILibBorder = {
+    style?: CssBorderStyle
+    width?: LibSpacers
+    color?: LibAllColors
+}
+
+/* Outline */
+/**
+ * @description Props for components with outlines
+ * @prop style?: CssOutlineStyle
+ * @prop width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
+ * @prop color?: Any color from the library
+ */
+export type ILibOutline = {
+    style?: CssOutlineStyle
+    width?: LibSpacers
+    color?: LibAllColors
+}
+
+/* Position */
+/**
+ * @description Props for components with CSS position
+ * @prop position?: "relative" | "absolute" | "fixed"
+ * @prop left?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
+ * @prop top?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
+ * @prop right?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
+ * @prop bottom?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
+ */
+export interface ILibPosition {
+    position?: LibPositionExtract
+    left?: LibSpacers
+    top?: LibSpacers
+    right?: LibSpacers
+    bottom?: LibSpacers
+    zIndex?: number
+}
+
+/* Links & buttons */
+type LinkTo = { to?: string; href?: never }
+type LinkHref = { to?: never; href?: string }
+
+/**
+ * @description Props for links
+ * @prop to?: string => only if href is not defined
+ * @prop href?: string => only if to is not defined
+ */
+export type LibLink = LinkTo | LinkHref
+
+/**
+ * @description Props for links, to or href are required
+ * @prop to?: string => only if href is not defined
+ * @prop href?: string => only if to is not defined
+ */
+export type LibLinkRequired = RequireAtLeastOne<LibLink, "to" | "href">
+
+/**
+ * @description Props for links
+ * @prop to?: string => only if href is not defined
+ * @prop href?: string => only if to is not defined
+ * @prop blank?: boolean
+ */
+export type LibLinkBlank = LibLink & { blank?: boolean }
+
+/**
+ * @description Props for links, to or href are required
+ * @prop to?: string => only if href is not defined
+ * @prop href?: string => only if to is not defined
+ * @prop blank?: boolean
+ */
+export type LibLinkBlankRequired = LibLinkRequired & { blank?: boolean }
+
+type LibButtonLinkClick = {
+    onClick?: MouseEventHandler<HTMLButtonElement>
+    disabled?: boolean
+    to?: never
+    href?: never
+}
+
+type LibButtonLinkTo = {
+    onClick?: never
+    disabled?: never
+    to?: string | "prev"
+    href?: never
+}
+
+type LibButtonLinkHref = {
+    onClick?: never
+    disabled?: never
+    to?: never
+    href?: string
+}
+
+/**
+ * @description Props for buttons and links
+ * @prop onClick?: void => only if to or href are not defined
+ * @prop disabled?: boolean => only if onClick is defined
+ * @prop to?: string => only if onClick and href are not defined
+ * @prop href?: string => only if onClick and to are not defined
+ */
+export type LibButtonLink =
+    | LibButtonLinkClick
+    | LibButtonLinkTo
+    | LibButtonLinkHref
+
+/**
+ * @description Props for buttons and links, onClick, to or href are required
+ * @prop onClick?: void => only if to or href are not defined
+ * @prop disabled?: boolean => only if onClick is defined
+ * @prop to?: string => only if onClick and href are not defined
+ * @prop href?: string => only if onClick and to are not defined
+ */
+export type LibButtonLinkRequired = RequireAtLeastOne<
+    LibButtonLink,
+    "onClick" | "to" | "href"
+>
+
+/**
+ * @description Props for buttons and links
+ * @prop onClick?: void => only if to or href are not defined
+ * @prop disabled?: boolean => only if onClick is defined
+ * @prop to?: string => only if onClick and href are not defined
+ * @prop href?: string => only if onClick and to are not defined
+ * @prop blank?: boolean => only if to or href are defined
+ */
+export type LibButtonLinkBlank =
+    | (LibButtonLinkClick & { blank?: never })
+    | (LibButtonLinkTo & { blank?: boolean })
+    | (LibButtonLinkHref & { blank?: boolean })
+
+/**
+ * @description Props for buttons and links, onClick, to or href are required
+ * @prop onClick: void => only if to or href are not defined
+ * @prop disabled?: boolean => only if onClick is defined
+ * @prop to: string => only if onClick and href are not defined
+ * @prop href: string => only if onClick and to are not defined
+ * @prop blank?: boolean => only if to or href are defined
+ */
+export type LibButtonLinkBlankRequired = RequireAtLeastOne<
+    LibButtonLinkBlank,
+    "to" | "href" | "onClick"
+>
+
+/* useTranslation hook */
+/**
+ * @description Props for useTranslation hook
+ * @prop [language: string]: { [key: string]: string }
+ */
+export type TranslateLang = {
+    [language: string]: {
+        [key: string]: string
+    }
+}
+
+/* BackgroundImage */
+/**
+ * @description Props for background images
+ * @prop img: string
+ * @prop clip?: CssBackgroundClip
+ * @prop origin?: CssBackgroundOrigin
+ * @prop position?: CssBackgroundPosition
+ * @prop repeat?: CssBackgroundRepeat
+ * @prop size?: CssBackgroundSize
+ */
+export interface ILibBackgroundImage {
+    img: string
+    clip?: Property.BackgroundClip
+    origin?: Property.BackgroundOrigin
+    position?: Property.BackgroundPosition
+    repeat?: Property.BackgroundRepeat
+    size?: Property.BackgroundSize
+}
+
+/* Input phone */
+/**
+ * @description Props for countries used in InputPhone component
+ * @prop name: string
+ * @prop dial_code: string
+ * @prop code: Any Alpha-2 Code from https://www.iban.com/country-codes
+ * @prop flag: string
+ */
+export type LibCountry = {
+    name: string
+    dial_code: string
+    code: CountryCode
+    flag: string
+}
+
+/* BackToTop */
+export interface LibBackToTopPosition {
+    left?: LibSpacers | "unset"
+    top?: LibSpacers | "unset"
+    right?: LibSpacers | "unset"
+    bottom?: LibSpacers | "unset"
+    zIndex?: number
+}
+
+/*====================== Theme ======================*/
+
+/**
+ * @description Props for ThemeContext
+ * @prop theme: DefaultTheme => import from "styled-components"
+ * @prop selectedTheme: "light" | "dark" | undefined
+ * @prop toggleTheme: () => void
+ */
+export interface ILibThemeContext {
+    theme: DefaultTheme
+    selectedTheme: LibThemeNames | undefined
+    toggleTheme: () => void
+}
+
+/*====================== React global ======================*/
+
+export type ReactChildren = ReactNode | Array<ReactNode>
+export type DispatchState<T> = Dispatch<SetStateAction<T>>
+
+/*====================== CSS values ======================*/
+
+export type CssTextAlign = Property.TextAlign
+export type CssVerticalAlign = Property.VerticalAlign
+export type CssTextDecoration = Property.TextDecoration
+export type CssPosition = Property.Position
+export type CssJustifyItems = Property.JustifyItems
+export type CssAlignItems = Property.AlignItems
+export type CssJustifyContent = Property.JustifyContent
+export type CssAlignContent = Property.AlignContent
+export type CssFlexDirection = Property.FlexDirection
+export type CssFlexWrap = Property.FlexWrap
+export type CssObjectFit = Property.ObjectFit
+export type CssCursor = Property.Cursor
+export type CssBorderStyle = Property.BorderStyle
+export type CssOutlineStyle = Property.OutlineStyle
+export type CssFontStyle = Property.FontStyle
+
+/*====================== Components ======================*/
+
+export type LibMainSize = keyof typeof typeValues.mainSizes | number
+export type LibAsideSize = keyof typeof typeValues.asideSizes | number
+export type LibAccordionVariant = keyof typeof typeValues.accordionVariants
+export type LibAccordionIcon =
+    | keyof typeof typeValues.accordionIcons
+    | JSX.Element
+export type LibAvatarBadgePosition = keyof typeof typeValues.avatarBadgePosition
+export type LibBreadcrumbSeparator =
+    | keyof typeof typeValues.breadcrumbSeparators
+    | JSX.Element
+export type LibButtonIconVariant = Extract<
+    LibButtonVariant,
+    "plain" | "transparent" | "ghost"
+>
+export type LibImageBackgroundOverlay = Exclude<
+    LibAllColorsAndOverlays,
+    "gradient-black" | "gradient-white"
+>
+export type LibInputType = keyof typeof typeValues.inputTypes
+export type LibInputCheckVariant = keyof typeof typeValues.checkInputVariants
+export type LibKeySize = keyof typeof typeValues.keySizes
+export type LibLoaderVariant = keyof typeof typeValues.loaderVariants
+export type LibSkeletonAnimation = keyof typeof typeValues.skeletonAnimations
+export type LibStepperDirection = keyof typeof typeValues.stepperDirections
+export type LibTextDisplayTag = keyof typeof typeValues.textDisplayTags
+export type LibTextTag = keyof typeof typeValues.textTags
+export type LibTextAllTag = LibTextDisplayTag | LibTextTag
+export type LibTextIconTag = Exclude<
+    LibTextAllTag,
+    "strong" | "em" | "ul" | "ol" | "dl"
+>
+export type LibTooltipTrigger = keyof typeof typeValues.tooltipTriggers
+export type LibTabVariant = keyof typeof typeValues.tabsVariants
+export type LibTabJustify = keyof typeof typeValues.tabsJustify
+export type LibSlideshowPagination = keyof typeof typeValues.slideshowPagination
+export type LibSlideshowPaginationPosition =
+    keyof typeof typeValues.slideshowPaginationPosition
+export type LibSlideshowButtonPosition =
+    keyof typeof typeValues.slideshowButtonsPositions
+export type LibSlideshowButtonSize =
+    keyof typeof typeValues.slideshowButtonsSizes
+export type LibTableVariant = keyof typeof typeValues.tableVariants
+export type LibMessageType = keyof typeof typeValues.messageType
+export type LibMdEditorEditor = keyof typeof typeValues.markdownEditorEditor
+export type LibMdEditorButton = keyof typeof typeValues.markdownEditorButtons
+export type LibMdEditorTitle = keyof typeof typeValues.markdownEditorTitles
+export type LibNavBurgerPosition = keyof typeof typeValues.navBurgerPositions
+export type LibNavMobileVariant = keyof typeof typeValues.navMobileVariants
+export type LibHeaderVariant = keyof typeof typeValues.headerVariants
+export type LibHeaderPosition = LibPositionExtract
+export type LibIconMenuDirection = keyof typeof typeValues.iconMenuDirections
+export type LibIconMenuIcon = keyof typeof typeValues.iconMenuIcon
+export type LibIconMenuPosition = LibPositionExtract
+export type LibToastStatus = keyof typeof typeValues.toastStatus
+export type LibToasterPosition = keyof typeof typeValues.toasterPositions
+export type LibInputListDirection = keyof typeof typeValues.listInputDirections
+export type LibButtonVariant = keyof typeof typeValues.buttonVariants
+export type LibButtonSize = keyof typeof typeValues.buttonSizes
+export type LibTooltipPosition = keyof typeof typeValues.tooltipPositions
+export type CountryCode = keyof typeof typeValues.countryCodes
+export type LibFooterDirection = keyof typeof typeValues.footerDirections
+export type LibFooterLinksSeparator = keyof typeof typeValues.footerSeparators
+export type LibInputPrefixAndSuffix = string | JSX.Element
+export type LibButtonGroupToggleSelect =
+    keyof typeof typeValues.buttonGroupToggleSelects
+export type LibValueInputPin = { [n: number]: number | "" | undefined }
+export type LibDrawerPosition = keyof typeof typeValues.drawerPositions
+export type LibPageLayoutTemplate = keyof typeof typeValues.pageLayoutTemplates
+export type LibTimepickerSteps = keyof typeof typeValues.timepickerSteps
+export type LibTimepickerHours = keyof typeof typeValues.hours
+export type LibTimepickerHalfTimes = keyof typeof typeValues.halfHours
+export type LibTimepickerQuarterTimes = keyof typeof typeValues.quarterHours
+export type LibTimepickerMinutes = keyof typeof typeValues.minutes
+export type LibMessagingDateFormat =
+    keyof typeof typeValues.messagingDateFormats

package/dist/types/types/index.ts

@@ -0,0 +1,7 @@
+/*=============================================== Exports ===============================================*/
+
+export * from "./type-values"
+export * from "./global"
+export * from "./require-at-least-one"
+export * from "./component-items"
+export * from "./generate-int-range"

package/dist/types/types/require-at-least-one.ts

@@ -0,0 +1,7 @@
+export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<
+    T,
+    Exclude<keyof T, Keys>
+> &
+    {
+        [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>
+    }[Keys]

package/dist/types/types/theme.ts

@@ -0,0 +1,168 @@
+/*=============================================== Theme type ===============================================*/
+
+import { COLORS_LIGHT, COLORS_DARK } from "../Variables"
+import type { LibThemeNames } from "./global"
+
+export const Themes: Record<LibThemeNames, any> = {
+    light: {
+        BLACK: COLORS_LIGHT.BLACK,
+        WHITE: COLORS_LIGHT.WHITE,
+        GRAY_50: COLORS_LIGHT.GRAY_50,
+        GRAY_100: COLORS_LIGHT.GRAY_100,
+        GRAY_200: COLORS_LIGHT.GRAY_200,
+        GRAY_300: COLORS_LIGHT.GRAY_300,
+        GRAY_400: COLORS_LIGHT.GRAY_400,
+        GRAY_500: COLORS_LIGHT.GRAY_500,
+        GRAY_600: COLORS_LIGHT.GRAY_600,
+        GRAY_700: COLORS_LIGHT.GRAY_700,
+        GRAY_800: COLORS_LIGHT.GRAY_800,
+        GRAY_900: COLORS_LIGHT.GRAY_900,
+        PRIMARY_50: COLORS_LIGHT.PRIMARY_50,
+        PRIMARY_100: COLORS_LIGHT.PRIMARY_100,
+        PRIMARY_200: COLORS_LIGHT.PRIMARY_200,
+        PRIMARY_300: COLORS_LIGHT.PRIMARY_300,
+        PRIMARY_400: COLORS_LIGHT.PRIMARY_400,
+        PRIMARY_500: COLORS_LIGHT.PRIMARY_500,
+        PRIMARY_600: COLORS_LIGHT.PRIMARY_600,
+        PRIMARY_700: COLORS_LIGHT.PRIMARY_700,
+        PRIMARY_800: COLORS_LIGHT.PRIMARY_800,
+        PRIMARY_900: COLORS_LIGHT.PRIMARY_900,
+        SECONDARY_50: COLORS_LIGHT.SECONDARY_50,
+        SECONDARY_100: COLORS_LIGHT.SECONDARY_100,
+        SECONDARY_200: COLORS_LIGHT.SECONDARY_200,
+        SECONDARY_300: COLORS_LIGHT.SECONDARY_300,
+        SECONDARY_400: COLORS_LIGHT.SECONDARY_400,
+        SECONDARY_500: COLORS_LIGHT.SECONDARY_500,
+        SECONDARY_600: COLORS_LIGHT.SECONDARY_600,
+        SECONDARY_700: COLORS_LIGHT.SECONDARY_700,
+        SECONDARY_800: COLORS_LIGHT.SECONDARY_800,
+        SECONDARY_900: COLORS_LIGHT.SECONDARY_900,
+        SUCCESS_50: COLORS_LIGHT.SUCCESS_50,
+        SUCCESS_100: COLORS_LIGHT.SUCCESS_100,
+        SUCCESS_200: COLORS_LIGHT.SUCCESS_200,
+        SUCCESS_300: COLORS_LIGHT.SUCCESS_300,
+        SUCCESS_400: COLORS_LIGHT.SUCCESS_400,
+        SUCCESS_500: COLORS_LIGHT.SUCCESS_500,
+        SUCCESS_600: COLORS_LIGHT.SUCCESS_600,
+        SUCCESS_700: COLORS_LIGHT.SUCCESS_700,
+        SUCCESS_800: COLORS_LIGHT.SUCCESS_800,
+        SUCCESS_900: COLORS_LIGHT.SUCCESS_900,
+        DANGER_50: COLORS_LIGHT.DANGER_50,
+        DANGER_100: COLORS_LIGHT.DANGER_100,
+        DANGER_200: COLORS_LIGHT.DANGER_200,
+        DANGER_300: COLORS_LIGHT.DANGER_300,
+        DANGER_400: COLORS_LIGHT.DANGER_400,
+        DANGER_500: COLORS_LIGHT.DANGER_500,
+        DANGER_600: COLORS_LIGHT.DANGER_600,
+        DANGER_700: COLORS_LIGHT.DANGER_700,
+        DANGER_800: COLORS_LIGHT.DANGER_800,
+        DANGER_900: COLORS_LIGHT.DANGER_900,
+        WARNING_50: COLORS_LIGHT.WARNING_50,
+        WARNING_100: COLORS_LIGHT.WARNING_100,
+        WARNING_200: COLORS_LIGHT.WARNING_200,
+        WARNING_300: COLORS_LIGHT.WARNING_300,
+        WARNING_400: COLORS_LIGHT.WARNING_400,
+        WARNING_500: COLORS_LIGHT.WARNING_500,
+        WARNING_600: COLORS_LIGHT.WARNING_600,
+        WARNING_700: COLORS_LIGHT.WARNING_700,
+        WARNING_800: COLORS_LIGHT.WARNING_800,
+        WARNING_900: COLORS_LIGHT.WARNING_900,
+        BACKGROUND: COLORS_LIGHT.BACKGROUND,
+        FONT: COLORS_LIGHT.FONT,
+        CURRENT_COLOR: "currentColor",
+        TRANSPARENT: "transparent",
+        LINK_FONT_DEFAULT: COLORS_LIGHT.LINK_FONT_DEFAULT,
+        LINK_FONT_HOVER: COLORS_LIGHT.LINK_FONT_HOVER,
+        LINK_FONT_ACTIVE: COLORS_LIGHT.LINK_FONT_ACTIVE,
+        LINK_BACKGROUND_DEFAULT: COLORS_LIGHT.LINK_BACKGROUND_DEFAULT,
+        LINK_BACKGROUND_HOVER: COLORS_LIGHT.LINK_BACKGROUND_HOVER,
+        LINK_BACKGROUND_ACTIVE: COLORS_LIGHT.LINK_BACKGROUND_ACTIVE,
+        FONT_GHOST_DEFAULT: COLORS_LIGHT.FONT_GHOST_DEFAULT,
+        FONT_GHOST_HOVER: COLORS_LIGHT.FONT_GHOST_HOVER,
+        FONT_GHOST_ACTIVE: COLORS_LIGHT.FONT_GHOST_ACTIVE,
+        BACKGROUND_GHOST_DEFAULT: COLORS_LIGHT.BACKGROUND_GHOST_DEFAULT,
+        BACKGROUND_GHOST_HOVER: COLORS_LIGHT.BACKGROUND_GHOST_HOVER,
+        BACKGROUND_GHOST_ACTIVE: COLORS_LIGHT.BACKGROUND_GHOST_ACTIVE,
+    },
+
+    dark: {
+        BLACK: COLORS_DARK.BLACK,
+        WHITE: COLORS_DARK.WHITE,
+        GRAY_50: COLORS_DARK.GRAY_50,
+        GRAY_100: COLORS_DARK.GRAY_100,
+        GRAY_200: COLORS_DARK.GRAY_200,
+        GRAY_300: COLORS_DARK.GRAY_300,
+        GRAY_400: COLORS_DARK.GRAY_400,
+        GRAY_500: COLORS_DARK.GRAY_500,
+        GRAY_600: COLORS_DARK.GRAY_600,
+        GRAY_700: COLORS_DARK.GRAY_700,
+        GRAY_800: COLORS_DARK.GRAY_800,
+        GRAY_900: COLORS_DARK.GRAY_900,
+        PRIMARY_50: COLORS_DARK.PRIMARY_50,
+        PRIMARY_100: COLORS_DARK.PRIMARY_100,
+        PRIMARY_200: COLORS_DARK.PRIMARY_200,
+        PRIMARY_300: COLORS_DARK.PRIMARY_300,
+        PRIMARY_400: COLORS_DARK.PRIMARY_400,
+        PRIMARY_500: COLORS_DARK.PRIMARY_500,
+        PRIMARY_600: COLORS_DARK.PRIMARY_600,
+        PRIMARY_700: COLORS_DARK.PRIMARY_700,
+        PRIMARY_800: COLORS_DARK.PRIMARY_800,
+        PRIMARY_900: COLORS_DARK.PRIMARY_900,
+        SECONDARY_50: COLORS_DARK.SECONDARY_50,
+        SECONDARY_100: COLORS_DARK.SECONDARY_100,
+        SECONDARY_200: COLORS_DARK.SECONDARY_200,
+        SECONDARY_300: COLORS_DARK.SECONDARY_300,
+        SECONDARY_400: COLORS_DARK.SECONDARY_400,
+        SECONDARY_500: COLORS_DARK.SECONDARY_500,
+        SECONDARY_600: COLORS_DARK.SECONDARY_600,
+        SECONDARY_700: COLORS_DARK.SECONDARY_700,
+        SECONDARY_800: COLORS_DARK.SECONDARY_800,
+        SECONDARY_900: COLORS_DARK.SECONDARY_900,
+        SUCCESS_50: COLORS_DARK.SUCCESS_50,
+        SUCCESS_100: COLORS_DARK.SUCCESS_100,
+        SUCCESS_200: COLORS_DARK.SUCCESS_200,
+        SUCCESS_300: COLORS_DARK.SUCCESS_300,
+        SUCCESS_400: COLORS_DARK.SUCCESS_400,
+        SUCCESS_500: COLORS_DARK.SUCCESS_500,
+        SUCCESS_600: COLORS_DARK.SUCCESS_600,
+        SUCCESS_700: COLORS_DARK.SUCCESS_700,
+        SUCCESS_800: COLORS_DARK.SUCCESS_800,
+        SUCCESS_900: COLORS_DARK.SUCCESS_900,
+        DANGER_50: COLORS_DARK.DANGER_50,
+        DANGER_100: COLORS_DARK.DANGER_100,
+        DANGER_200: COLORS_DARK.DANGER_200,
+        DANGER_300: COLORS_DARK.DANGER_300,
+        DANGER_400: COLORS_DARK.DANGER_400,
+        DANGER_500: COLORS_DARK.DANGER_500,
+        DANGER_600: COLORS_DARK.DANGER_600,
+        DANGER_700: COLORS_DARK.DANGER_700,
+        DANGER_800: COLORS_DARK.DANGER_800,
+        DANGER_900: COLORS_DARK.DANGER_900,
+        WARNING_50: COLORS_DARK.WARNING_50,
+        WARNING_100: COLORS_DARK.WARNING_100,
+        WARNING_200: COLORS_DARK.WARNING_200,
+        WARNING_300: COLORS_DARK.WARNING_300,
+        WARNING_400: COLORS_DARK.WARNING_400,
+        WARNING_500: COLORS_DARK.WARNING_500,
+        WARNING_600: COLORS_DARK.WARNING_600,
+        WARNING_700: COLORS_DARK.WARNING_700,
+        WARNING_800: COLORS_DARK.WARNING_800,
+        WARNING_900: COLORS_DARK.WARNING_900,
+        BACKGROUND: COLORS_DARK.BACKGROUND,
+        FONT: COLORS_DARK.FONT,
+        CURRENT_COLOR: "currentColor",
+        TRANSPARENT: "transparent",
+        LINK_FONT_DEFAULT: COLORS_DARK.LINK_FONT_DEFAULT,
+        LINK_FONT_HOVER: COLORS_DARK.LINK_FONT_HOVER,
+        LINK_FONT_ACTIVE: COLORS_DARK.LINK_FONT_ACTIVE,
+        LINK_BACKGROUND_DEFAULT: COLORS_DARK.LINK_BACKGROUND_DEFAULT,
+        LINK_BACKGROUND_HOVER: COLORS_DARK.LINK_BACKGROUND_HOVER,
+        LINK_BACKGROUND_ACTIVE: COLORS_DARK.LINK_BACKGROUND_ACTIVE,
+        FONT_GHOST_DEFAULT: COLORS_DARK.FONT_GHOST_DEFAULT,
+        FONT_GHOST_HOVER: COLORS_DARK.FONT_GHOST_HOVER,
+        FONT_GHOST_ACTIVE: COLORS_DARK.FONT_GHOST_ACTIVE,
+        BACKGROUND_GHOST_DEFAULT: COLORS_DARK.BACKGROUND_GHOST_DEFAULT,
+        BACKGROUND_GHOST_HOVER: COLORS_DARK.BACKGROUND_GHOST_HOVER,
+        BACKGROUND_GHOST_ACTIVE: COLORS_DARK.BACKGROUND_GHOST_ACTIVE,
+    },
+}