default

Examples

Example 1

import { Badge, Button, Table } from "@esolia/marquis";

// Use class getters in templates
const badgeClasses = Badge.getBadgeClasses({ variant: 'success' });

// Or create DOM elements directly
const button = Button.createButton('Save', { variant: 'primary' });

Functions

f
clsx(...inputs: ClassValue[]): string

Filters and joins class names, removing falsy values

f
cn(...inputs: ClassValue[]): string

Combines class names and resolves Tailwind conflicts

f
createActionGroup(
actions: ActionDefinition[],
size?: IconButtonSize
): HTMLDivElement

Create an action button group (view, edit, delete pattern)

f
createAvatarWithInfo(props: AvatarProps & { subtitle?: string; }): HTMLDivElement

Create avatar with name and metadata (e.g., for user lists)

f
createShortcut(
keys: string[],
props?: KbdProps
): string

Create keyboard shortcut HTML (multiple keys)

f
createSpinner(props?: SpinnerProps): string

Create spinner HTML string using Phosphor Icons

f
createTheme(primaryColor?: PrimaryColor): Theme

Create a theme with a specific primary color

f
createToggleWithInput(options: CreateToggleOptions & { name: string; }): { toggle: HTMLElement; input: HTMLInputElement; }

Create a hidden checkbox input that syncs with a toggle Useful for form submissions

f
dismissAllToasts(): void

Dismiss all toasts

f
getAlertClasses(props?: AlertProps): string

Get Tailwind classes for an alert

f
getAlertContentClasses(): string

Get content wrapper classes

f
getAlertTitleClasses(): string

Get title classes for alerts with titles

f
getAvatarClasses(props?: AvatarProps): string

Get classes for avatar container

f
getAvatarImageClasses(): string

Get classes for avatar image

f
getAvatarPlaceholderClasses(darkMode?: boolean): string

Get classes for placeholder avatar (no image, no name)

f
getBadgeClasses(props?: BadgeProps): string

Get Tailwind classes for a badge

f
getButtonClasses(props?: ButtonProps): string

Get Tailwind classes for a button

f
getCardClasses(props?: CardProps): string

Get Tailwind classes for a card

f
getCardFooterClasses(props?: CardSectionProps): string

Get classes for card footer section

f
getCardHeaderClasses(props?: CardSectionProps): string

Get classes for card header section

f
getCircularProgressCSS(): string

Get CSS for circular progress animation

f
getCodeBlockClasses(props?: CodeBlockProps): string

Get Tailwind classes for code blocks

f
getCodeClasses(props?: CodeProps): string

Get Tailwind classes for inline code

f
getColorFromString(str: string): PrimaryColor

Generate a consistent color based on a string (for initials avatars)

f
getCompleteFaviconHtml(
variant?: FaviconVariant,
baseUrl?: string
): string

Generate complete meta and link tags for favicons including theme color

f
getDropdownClasses(props?: DropdownProps): string

Get classes for dropdown container

f
getDropdownCSS(): string

CSS required for dropdown functionality. Add this to your page's <style> or stylesheet.

f
getDropdownDividerClasses(): string

Get classes for dropdown divider

f
getDropdownHeaderClasses(): string

Get classes for dropdown section header

f
getFaviconThemeColor(variant?: FaviconVariant): string

Get the theme color for a favicon variant

f
getFilterBarClasses(props?: FilterBarProps): string

Get classes for filter bar container

f
getFilterButtonClasses(props?: FilterButtonProps): string

Get classes for filter action buttons (Clear, Apply, etc.)

f
getFilterSearchContainerClasses(props?: FilterSearchProps): string

Get classes for search input container (includes icon)

f
getFilterSelectClasses(props?: FilterSelectProps): string

Get classes for filter select/dropdown

f
getHeaderCSS(): string

Get CSS required for header functionality Includes dropdown CSS

f
getIconButtonClasses(props?: IconButtonProps): string

Get Tailwind classes for an icon button

f
getInteractiveColorClasses(variant: InteractiveColorKey)

Helper to get combined light+dark mode classes for interactive colors

f
getKbdClasses(props?: KbdProps): string

Get Tailwind classes for keyboard shortcuts

f
getLogoDataUri(variant?: LogoVariant): string

Get logo as a data URI for use in img src attributes

f
getNeutralClasses()

Get neutral color classes that work in both light and dark mode

f
getNeutralColorClasses()

Helper to get combined light+dark mode classes for neutral colors

f
getPrimaryClasses(primaryColor?: PrimaryColor)

Get primary color classes that work in both light and dark mode

f
getProgressCSS(): string

Get CSS for striped and indeterminate animations

f
getSkeletonClasses(props?: SkeletonProps): string

Get classes for a skeleton element

f
getSkeletonCSS(): string

Get CSS for skeleton animations

f
getSpinIconClasses(props?: Pick<SpinnerProps, "speed">): string

Get just the icon spin class (for adding to existing icons)

f
getSpinnerClasses(props?: SpinnerProps): string

Get Tailwind classes for a spinner

f
getSpinnerCSS(): string

Get CSS required for spinner animation. Add this to your page's <style> or stylesheet.

f
getStatCardLabelClasses(darkMode?: boolean): string

Get Tailwind classes for stat card label

f
getStatusClasses(status: "success" | "warning" | "error" | "info")

Get status color classes that work in both light and dark mode

f
getStatusColorClasses(status: StatusColorKey)

Helper to get combined light+dark mode classes for a status color

f
getTabClasses(props?: TabProps): string

Get classes for individual tab button

f
getTabDraftClasses(darkMode?: boolean): string

Get classes for draft indicator

f
getTableClasses(props?: TableProps): string

Get classes for table element

f
getTableWrapperClasses(props?: TableWrapperProps): string

Get classes for a table wrapper/container

f
getToastActionClasses(darkMode?: boolean): string

Get classes for toast action button

f
getToastContentClasses(): string

Get classes for toast content

f
getToastCSS(): string

Get CSS for toast animations

f
getToastDismissClasses(darkMode?: boolean): string

Get classes for toast dismiss button

f
getToggleClasses(props?: ToggleProps): string

Get classes for toggle track (background)

f
getToggleCSS(themeColor?: string): string

Get CSS for toggle switches using hidden checkbox + label pattern.

Interfaces

I
AlertProps

Alert props

I
AvatarGroupProps
I
AvatarProps
I
BadgeProps
I
ButtonProps
I
CardProps
I
CircularProgressProps
I
CodeBlockProps

Code block props

I
CodeProps

Code props

I
ColorScale

Color scale definition for a single color

I
CreateButtonOptions
I
CreateDropdownOptions

Full dropdown configuration

I
CreateIconButtonOptions
I
DropdownItem

Dropdown menu item

I
DropdownProps

Dropdown props

I
FaviconPaths

Favicon file paths for a variant

I
HeaderProps

Header props

I
KbdProps

Kbd props

I
LanguageConfig

Language toggle config

I
LogoConfig

Logo configuration

I
ProgressProps
I
SkeletonProps
I
SpinnerProps

Spinner props

I
StatCardProps
I
SwitcherConfig

Switcher config (e.g., client switcher)

I
TabItem
I
TableProps
I
TableWrapperProps
I
TabProps
I
ThemeConfig

Full theme definition

I
ToastContainerProps
I
ToastProps
I
ToggleProps
I
UserConfig

User info for dropdown

I
UserDropdownOptions

Create a user dropdown for headers

Type Aliases

T
BadgeVariant =
"default"
| "primary"
| "success"
| "warning"
| "error"
| "info"
| "draft"

Badge variants map to semantic meaning, not colors. This allows the color palette to evolve independently.

T
DropdownVariant = "default" | "header"

Dropdown variants for styling context

T
ThemeMode = "light" | "dark" | "system"

Theme mode for light/dark styling

Variables

v
brandColors: { primary: string; accent: string; secondary: string; white: string; textLight: string; textDark: string; }

eSolia brand color palette

v
favicon

Favicon SVG - simplified symbol for small sizes (16x16, 32x32)

v
FAVICON_SIZES: 16 | 32 | 48 | 180 | 192 | 512[]

Standard favicon sizes included in each variant

v
FAVICON_THEME_COLORS: Record<FaviconVariant, string>

Theme colors for each variant (for meta theme-color tag)

v
FAVICON_VARIANTS: FaviconVariant[]

List of all available favicon variants

v
icons: { eye: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>`; pencil: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>`; trash: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>`; check: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>`; x: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>`; plus: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>`; }

Common icon SVGs (16x16 viewBox)

v
interactiveColors: { primary: { bg: string; bgHover: string; bgActive: string; text: string; border: string; textColored: string; textColoredHover: string; bgSubtle: string; bgSubtleHover: string; bgDark: string; bgHoverDark: string; bgActiveDark: string; textColoredDark: string; textColoredHoverDark: string; bgSubtleDark: string; bgSubtleHoverDark: string; borderDark: string; }; secondary: { bg: string; bgHover: string; bgActive: string; text: string; border: string; bgDark: string; bgHoverDark: string; bgActiveDark: string; textDark: string; borderDark: string; }; danger: { bg: string; bgHover: string; bgActive: string; text: string; border: string; textColored: string; textColoredHover: string; bgSubtle: string; bgSubtleHover: string; bgDark: string; bgHoverDark: string; bgActiveDark: string; textColoredDark: string; textColoredHoverDark: string; bgSubtleDark: string; bgSubtleHoverDark: string; borderDark: string; }; success: { bg: string; bgHover: string; bgActive: string; text: string; border: string; textColored: string; textColoredHover: string; bgSubtle: string; bgSubtleHover: string; bgDark: string; bgHoverDark: string; bgActiveDark: string; textColoredDark: string; textColoredHoverDark: string; bgSubtleDark: string; bgSubtleHoverDark: string; borderDark: string; }; }

Interactive/Primary colors for buttons and links Now with dark mode support

v
logoHorizontal: `<svg width="454" height="120" viewBox="0 0 454 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>eSolia Logo</title> <defs> <polygon id="esolia-horiz-path-1" points="0 0 80.7099981 0 80.7099981 109.483298 0 109.483298"></polygon> <polygon id="esolia-horiz-path-3" points="0 120 453.571394 120 453.571394 0 0 0"></polygon> </defs> <g id="logo_horiz_darkblue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Group-21-Copy"> <path d="M156.656889,52.9978908 C147.810075,52.6564968 139.181047,54.0397312 131.058223,56.8768333 C132.812282,45.6696915 132.676902,32.0257027 128.980429,15.5858145 L127.844411,10.5119929 L123.04135,12.4897238 C103.935057,20.3535586 89.6553686,35.4926178 82.8333742,55.1227743 C76.647079,72.9341247 77.724236,92.0521901 85.7057929,106.261245 L86.1472507,107.044097 C85.4938932,110.440379 85.1112964,113.836661 85.1642713,117.168195 L85.1878158,118.934027 L86.8947859,119.375484 C88.2368176,119.728651 90.2969539,119.999411 92.9398146,119.999411 C97.7723059,119.999411 104.523667,119.081179 112.275666,115.996861 C127.809094,109.822338 148.486977,94.3830873 158.805317,55.9173983 L159.558738,53.1097268 L156.656889,52.9978908 Z" id="Fill-1" fill="#FFBC68"></path> <path d="M43.4682886,5.83077451 L41.4670133,4.41222348 L40.8018836,6.62539854 C31.9668416,36.0735763 48.9894541,49.711679 56.7179085,54.2027763 L58.3836759,55.1739834 L59.125325,53.5317604 C66.9538431,36.1265512 61.1030559,18.2975426 43.4682886,5.83077451" id="Fill-3" fill="#2D2F63"></path> <g id="Group-7" transform="translate(68.3362, 0)"> <mask id="esolia-horiz-mask-2" fill="white"> <use xlink:href="#esolia-horiz-path-1"></use> </mask> <path d="M31.7081832,101.172119 C22.4728862,104.845048 14.8915844,105.157012 10.959667,104.686124 C11.0303002,102.443518 11.3363776,100.171482 11.7484049,97.8994457 C17.4108368,97.4285574 27.4584162,91.9191642 35.722506,82.6308922 C37.4824511,80.6531613 39.1423324,78.5341639 40.6550611,76.3386472 C44.7517894,70.3995684 48.8249733,62.2532006 51.2029593,51.6405553 C58.607678,48.7033894 66.5244877,47.1141414 74.6708555,47.0670525 C64.6291622,81.5772796 45.8701491,95.5391181 31.7081832,101.172119 M45.7524271,54.1127189 C43.7805823,61.2761073 40.8551886,67.8803159 36.8408658,73.7075587 C35.4340869,75.7441507 33.8919277,77.7101094 32.2555908,79.5465738 C25.0627719,87.6399666 17.1165316,91.9603669 12.8726507,93.04341 C15.6685501,83.2253887 21.4369319,73.5662922 29.5597553,65.678913 C34.4452215,60.9347133 39.9075259,57.0852014 45.7524271,54.1127189 M8.36389516,46.131162 C14.703229,27.8606955 27.9469628,13.7575906 45.6700216,6.37641634 C49.0957341,21.7626919 49.4665586,35.8893412 47.0591421,48.4090842 C39.5131569,51.7465051 32.4792628,56.3729828 26.3282842,62.3532643 C18.2290053,70.2229852 12.2722681,79.7761318 9.04668321,89.6235837 C3.49020114,77.0390935 3.14880711,61.1407269 8.36389516,46.131162 M52.2035969,46.3607201 C53.9576559,35.1476922 53.8222755,21.5095894 50.1316884,5.06970128 L48.9956703,-0.00412027272 L44.1867234,1.97361063 C25.0804302,9.83155933 10.8007422,24.9765046 3.98463387,44.6066611 C-2.20754743,62.4180115 -1.13039041,81.5360769 6.85116646,95.7451317 L7.29262425,96.5279835 C6.63926672,99.9242655 6.26255607,103.320547 6.3096449,106.652082 L6.33907542,108.417913 L8.04604555,108.859371 C9.38219113,109.212537 11.4482136,109.483298 14.0851881,109.483298 C18.9176794,109.483298 25.6690406,108.565066 33.4210394,105.480748 C48.9544676,99.3062246 69.6382367,83.8669741 79.9565768,45.4012851 L80.7099981,42.5936136 L77.8081489,42.4817776 C68.9554486,42.1403836 60.3264203,43.523618 52.2035969,46.3607201" id="Fill-5" fill="#2D2F63" mask="url(#esolia-horiz-mask-2)"></path> </g> <path d="M0,37.6963751 C5.03850493,69.1399421 32.9033207,97.3814686 61.1801638,95.9982342 C60.6092118,68.733801 32.0321774,38.9442292 0,37.6963751" id="Fill-8" fill="#2D2F63"></path> <path d="M192.310786,55.6266248 C193.340854,48.7928582 197.555305,46.0793643 202.234757,46.0793643 C207.661745,46.0793643 211.405307,50.2938147 211.68784,55.6266248 L192.310786,55.6266248 Z M202.046402,32.6001864 C186.789621,32.6001864 176.871536,43.8308726 176.871536,58.9934762 C176.871536,76.4987492 188.567224,85.8576544 206.91421,85.8576544 C212.435375,85.8576544 217.491539,85.2042969 221.982636,83.6150488 L220.764212,72.1018296 C217.397361,73.3202531 213.842154,73.879433 209.533526,73.879433 C200.733801,73.879433 194.930103,70.9775838 193.064208,64.5205278 L224.884485,64.5205278 C225.25531,62.831216 225.355374,60.5886104 225.355374,58.528474 C225.355374,44.7667631 217.585716,32.6001864 202.046402,32.6001864 L202.046402,32.6001864 Z" id="Fill-10" fill="#2D2F63"></path> <path d="M260.156374,44.7691176 C252.386717,42.9915142 250.049934,41.3022024 250.049934,38.2178839 C250.049934,34.5684995 253.322608,32.4141855 259.873841,32.4141855 C265.960073,32.4141855 271.104527,33.5384314 276.443224,35.2218571 L277.284936,19.3117183 C272.040418,17.1574042 267.360965,16.0331584 259.032128,16.0331584 C241.903566,16.0331584 234.51062,25.2037082 234.51062,37.3761711 C234.51062,49.9194585 241.903566,55.0639133 254.817678,57.8715848 C262.310688,59.5550105 265.583362,61.2443224 265.583362,65.0820621 C265.583362,69.1022711 261.8398,71.4449404 254.258498,71.4449404 C247.053907,71.4449404 240.408496,69.8556924 236.00569,67.9839113 L235.258155,82.1164468 C240.873498,84.2648747 245.647128,85.8600088 255.194389,85.8600088 C273.258841,85.8600088 281.122676,76.6835729 281.122676,64.7053514 C281.122676,52.3504194 273.353019,47.6709668 260.156374,44.7691176" id="Fill-12" fill="#2D2F63"></path> <path d="M316.017266,72.4738314 C309.466032,72.4738314 304.598224,67.6060234 304.598224,60.0247216 C304.598224,52.7259528 309.371855,47.4814342 316.017266,47.4814342 C322.5685,47.4814342 327.530485,52.7259528 327.530485,60.0247216 C327.530485,67.6060234 322.662677,72.4738314 316.017266,72.4738314 M316.017266,32.6013636 C300.289596,32.6013636 289.341443,43.7378722 289.341443,59.1830088 C289.341443,74.5339677 300.383774,85.8588316 316.017266,85.8588316 C331.833227,85.8588316 342.693089,74.5339677 342.693089,59.1830088 C342.693089,43.7378722 331.833227,32.6013636 316.017266,32.6013636" id="Fill-14" fill="#2D2F63"></path> <mask id="esolia-horiz-mask-4" fill="white"> <use xlink:href="#esolia-horiz-path-3"></use> </mask> <polygon id="Fill-16" fill="#2D2F63" mask="url(#esolia-horiz-mask-4)" points="354.184529 84.6421739 368.693775 84.6421739 368.693775 13.5086084 354.184529 13.5086084"></polygon> <path d="M390.120959,11.7268848 C384.976505,11.7268848 381.227056,15.0996223 381.227056,20.3382548 C381.227056,25.5768872 385.064796,28.9496248 390.120959,28.9496248 C395.177123,28.9496248 399.014862,25.5768872 399.014862,20.3382548 C399.014862,15.0996223 395.365478,11.7268848 390.120959,11.7268848" id="Fill-18" fill="#2D2F63" mask="url(#esolia-horiz-mask-4)"></path> <polygon id="Fill-19" fill="#2D2F63" mask="url(#esolia-horiz-mask-4)" points="382.914602 84.6421739 397.423849 84.6421739 397.423849 33.821553 382.914602 33.821553"></polygon> <path d="M438.787266,70.7892284 C437.380488,73.879433 434.384461,76.4045715 430.264188,76.4045715 C426.714867,76.4045715 423.90131,74.8153235 423.90131,71.442586 C423.90131,67.2340217 426.897337,66.0155982 431.765144,64.8913523 C434.855349,64.2379948 437.28631,63.3021043 438.787266,62.5545691 L438.787266,70.7892284 Z M430.829254,32.6001864 C423.059597,32.6001864 416.414186,34.4719674 412.017266,36.8146368 L413.047334,51.3238829 C417.538431,49.2637465 423.247952,47.480257 429.328297,47.480257 C435.602884,47.480257 438.598911,49.3579242 438.598911,52.3480649 C438.598911,53.6606661 438.2222,54.4082013 436.632952,55.0615588 C434.666994,55.8149801 432.418502,56.37416 428.304115,57.1216952 C417.444254,58.9051847 408.738706,62.0836808 408.738706,72.9376563 C408.738706,81.4607348 414.824937,85.8576544 423.247952,85.8576544 C430.735076,85.8576544 435.043704,82.9558052 438.787266,78.4647079 L438.787266,84.6392309 L453.573159,84.6392309 L453.573159,53.6606661 C453.573159,39.9931329 446.745279,32.6001864 430.829254,32.6001864 L430.829254,32.6001864 Z" id="Fill-20" fill="#2D2F63" mask="url(#esolia-horiz-mask-4)"></path> </g> </g> </svg>`

eSolia horizontal logo - dark blue wordmark on transparent background

v
logoHorizontalLight: `<svg width="454" height="111" viewBox="0 0 454 111" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>eSolia Logo Light</title> <defs> <polygon id="esolia-horiz-light-path-1" points="0 0 80.7099981 0 80.7099981 109.483298 0 109.483298"></polygon> <polygon id="esolia-horiz-light-path-3" points="0 120 453.571394 120 453.571394 0 0 0"></polygon> </defs> <g id="logo_horiz_white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Group-4-Copy"> <path d="M43.4682886,5.83077451 L41.4670133,4.41222348 L40.8018836,6.62539854 C31.9668416,36.0735763 48.9894541,49.711679 56.7179085,54.2027763 L58.3836759,55.1739834 L59.125325,53.5317604 C66.9538431,36.1265512 61.1030559,18.2975426 43.4682886,5.83077451" id="Fill-3" fill="#FFFFFF"></path> <g id="Group-7" transform="translate(68.3362, 0)"> <mask id="esolia-horiz-light-mask-2" fill="white"> <use xlink:href="#esolia-horiz-light-path-1"></use> </mask> <path d="M31.7081832,101.172119 C22.4728862,104.845048 14.8915844,105.157012 10.959667,104.686124 C11.0303002,102.443518 11.3363776,100.171482 11.7484049,97.8994457 C17.4108368,97.4285574 27.4584162,91.9191642 35.722506,82.6308922 C37.4824511,80.6531613 39.1423324,78.5341639 40.6550611,76.3386472 C44.7517894,70.3995684 48.8249733,62.2532006 51.2029593,51.6405553 C58.607678,48.7033894 66.5244877,47.1141414 74.6708555,47.0670525 C64.6291622,81.5772796 45.8701491,95.5391181 31.7081832,101.172119 M45.7524271,54.1127189 C43.7805823,61.2761073 40.8551886,67.8803159 36.8408658,73.7075587 C35.4340869,75.7441507 33.8919277,77.7101094 32.2555908,79.5465738 C25.0627719,87.6399666 17.1165316,91.9603669 12.8726507,93.04341 C15.6685501,83.2253887 21.4369319,73.5662922 29.5597553,65.678913 C34.4452215,60.9347133 39.9075259,57.0852014 45.7524271,54.1127189 M8.36389516,46.131162 C14.703229,27.8606955 27.9469628,13.7575906 45.6700216,6.37641634 C49.0957341,21.7626919 49.4665586,35.8893412 47.0591421,48.4090842 C39.5131569,51.7465051 32.4792628,56.3729828 26.3282842,62.3532643 C18.2290053,70.2229852 12.2722681,79.7761318 9.04668321,89.6235837 C3.49020114,77.0390935 3.14880711,61.1407269 8.36389516,46.131162 M52.2035969,46.3607201 C53.9576559,35.1476922 53.8222755,21.5095894 50.1316884,5.06970128 L48.9956703,-0.00412027272 L44.1867234,1.97361063 C25.0804302,9.83155933 10.8007422,24.9765046 3.98463387,44.6066611 C-2.20754743,62.4180115 -1.13039041,81.5360769 6.85116646,95.7451317 L7.29262425,96.5279835 C6.63926672,99.9242655 6.26255607,103.320547 6.3096449,106.652082 L6.33907542,108.417913 L8.04604555,108.859371 C9.38219113,109.212537 11.4482136,109.483298 14.0851881,109.483298 C18.9176794,109.483298 25.6690406,108.565066 33.4210394,105.480748 C48.9544676,99.3062246 69.6382367,83.8669741 79.9565768,45.4012851 L80.7099981,42.5936136 L77.8081489,42.4817776 C68.9554486,42.1403836 60.3264203,43.523618 52.2035969,46.3607201" id="Fill-5" fill="#FFFFFF" mask="url(#esolia-horiz-light-mask-2)"></path> </g> <path d="M0,37.6963751 C5.03850493,69.1399421 32.9033207,97.3814686 61.1801638,95.9982342 C60.6092118,68.733801 32.0321774,38.9442292 0,37.6963751" id="Fill-8" fill="#FFFFFF"></path> <path d="M192.310786,55.6266248 C193.340854,48.7928582 197.555305,46.0793643 202.234757,46.0793643 C207.661745,46.0793643 211.405307,50.2938147 211.68784,55.6266248 L192.310786,55.6266248 Z M202.046402,32.6001864 C186.789621,32.6001864 176.871536,43.8308726 176.871536,58.9934762 C176.871536,76.4987492 188.567224,85.8576544 206.91421,85.8576544 C212.435375,85.8576544 217.491539,85.2042969 221.982636,83.6150488 L220.764212,72.1018296 C217.397361,73.3202531 213.842154,73.879433 209.533526,73.879433 C200.733801,73.879433 194.930103,70.9775838 193.064208,64.5205278 L224.884485,64.5205278 C225.25531,62.831216 225.355374,60.5886104 225.355374,58.528474 C225.355374,44.7667631 217.585716,32.6001864 202.046402,32.6001864 L202.046402,32.6001864 Z" id="Fill-10" fill="#FFFFFF"></path> <path d="M260.156374,44.7691176 C252.386717,42.9915142 250.049934,41.3022024 250.049934,38.2178839 C250.049934,34.5684995 253.322608,32.4141855 259.873841,32.4141855 C265.960073,32.4141855 271.104527,33.5384314 276.443224,35.2218571 L277.284936,19.3117183 C272.040418,17.1574042 267.360965,16.0331584 259.032128,16.0331584 C241.903566,16.0331584 234.51062,25.2037082 234.51062,37.3761711 C234.51062,49.9194585 241.903566,55.0639133 254.817678,57.8715848 C262.310688,59.5550105 265.583362,61.2443224 265.583362,65.0820621 C265.583362,69.1022711 261.8398,71.4449404 254.258498,71.4449404 C247.053907,71.4449404 240.408496,69.8556924 236.00569,67.9839113 L235.258155,82.1164468 C240.873498,84.2648747 245.647128,85.8600088 255.194389,85.8600088 C273.258841,85.8600088 281.122676,76.6835729 281.122676,64.7053514 C281.122676,52.3504194 273.353019,47.6709668 260.156374,44.7691176" id="Fill-12" fill="#FFFFFF"></path> <path d="M316.017266,72.4738314 C309.466032,72.4738314 304.598224,67.6060234 304.598224,60.0247216 C304.598224,52.7259528 309.371855,47.4814342 316.017266,47.4814342 C322.5685,47.4814342 327.530485,52.7259528 327.530485,60.0247216 C327.530485,67.6060234 322.662677,72.4738314 316.017266,72.4738314 M316.017266,32.6013636 C300.289596,32.6013636 289.341443,43.7378722 289.341443,59.1830088 C289.341443,74.5339677 300.383774,85.8588316 316.017266,85.8588316 C331.833227,85.8588316 342.693089,74.5339677 342.693089,59.1830088 C342.693089,43.7378722 331.833227,32.6013636 316.017266,32.6013636" id="Fill-14" fill="#FFFFFF"></path> <mask id="esolia-horiz-light-mask-4" fill="white"> <use xlink:href="#esolia-horiz-light-path-3"></use> </mask> <polygon id="Fill-16" fill="#FFFFFF" mask="url(#esolia-horiz-light-mask-4)" points="354.184529 84.6421739 368.693775 84.6421739 368.693775 13.5086084 354.184529 13.5086084"></polygon> <path d="M390.120959,11.7268848 C384.976505,11.7268848 381.227056,15.0996223 381.227056,20.3382548 C381.227056,25.5768872 385.064796,28.9496248 390.120959,28.9496248 C395.177123,28.9496248 399.014862,25.5768872 399.014862,20.3382548 C399.014862,15.0996223 395.365478,11.7268848 390.120959,11.7268848" id="Fill-18" fill="#FFFFFF" mask="url(#esolia-horiz-light-mask-4)"></path> <polygon id="Fill-19" fill="#FFFFFF" mask="url(#esolia-horiz-light-mask-4)" points="382.914602 84.6421739 397.423849 84.6421739 397.423849 33.821553 382.914602 33.821553"></polygon> <path d="M438.787266,70.7892284 C437.380488,73.879433 434.384461,76.4045715 430.264188,76.4045715 C426.714867,76.4045715 423.90131,74.8153235 423.90131,71.442586 C423.90131,67.2340217 426.897337,66.0155982 431.765144,64.8913523 C434.855349,64.2379948 437.28631,63.3021043 438.787266,62.5545691 L438.787266,70.7892284 Z M430.829254,32.6001864 C423.059597,32.6001864 416.414186,34.4719674 412.017266,36.8146368 L413.047334,51.3238829 C417.538431,49.2637465 423.247952,47.480257 429.328297,47.480257 C435.602884,47.480257 438.598911,49.3579242 438.598911,52.3480649 C438.598911,53.6606661 438.2222,54.4082013 436.632952,55.0615588 C434.666994,55.8149801 432.418502,56.37416 428.304115,57.1216952 C417.444254,58.9051847 408.738706,62.0836808 408.738706,72.9376563 C408.738706,81.4607348 414.824937,85.8576544 423.247952,85.8576544 C430.735076,85.8576544 435.043704,82.9558052 438.787266,78.4647079 L438.787266,84.6392309 L453.573159,84.6392309 L453.573159,53.6606661 C453.573159,39.9931329 446.745279,32.6001864 430.829254,32.6001864 L430.829254,32.6001864 Z" id="Fill-20" fill="#FFFFFF" mask="url(#esolia-horiz-light-mask-4)"></path> </g> </g> </svg>`

eSolia horizontal logo - white wordmark on transparent background

v
logoSymbol: `<svg width="170" height="170" viewBox="0 0 170 170" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>eSolia Symbol</title> <defs> <polygon id="esolia-path-1" points="0 0 68.1262984 0 68.1262984 92.4134806 0 92.4134806"></polygon> </defs> <g id="symbol_darkblue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Group-10" transform="translate(18, 34)"> <path d="M132.232118,44.7348558 C124.764633,44.4466893 117.480978,45.6142602 110.624605,48.0090225 C112.105184,38.5492145 111.990911,27.0324944 108.870764,13.1557908 L107.911866,8.87304156 L103.857662,10.5424194 C87.7302794,17.1801839 75.6769736,29.9588741 69.9186136,46.5284433 C64.6968393,61.5627811 65.606054,77.7001006 72.3431862,89.6937858 L72.7158152,90.3545812 C72.1643243,93.2213402 71.8413792,96.0880993 71.8860946,98.9002061 L71.9059682,100.390722 L73.3468003,100.763351 C74.4795924,101.061454 76.2185277,101.29 78.4493333,101.29 C82.5283787,101.29 88.2271181,100.514932 94.7704832,97.9114971 C107.882055,92.6996596 125.335997,79.6675817 134.045579,47.1991755 L134.681532,44.8292551 L132.232118,44.7348558 Z" id="Fill-1" fill="#C8C8C8"></path> <path d="M36.6910379,4.92168373 L35.0017865,3.72430257 L34.4403588,5.59241591 C26.9828106,30.4492539 41.3513845,41.9610055 47.8748761,45.7518845 L49.2809295,46.5716683 L49.9069462,45.1854884 C56.5149003,30.4939694 51.5763241,15.4447265 36.6910379,4.92168373" id="Fill-3" fill="#2D2F63"></path> <g id="Group-7" transform="translate(57.6817, 0)"> <mask id="esolia-mask-2" fill="white"> <use xlink:href="#esolia-path-1"></use> </mask> <path d="M26.7644802,85.3981187 C18.9690817,88.498392 12.5697998,88.7617164 9.25091761,88.3642455 C9.31053825,86.4712902 9.56889435,84.553493 9.91668141,82.6356958 C14.6962693,82.2382249 23.1773051,77.5878151 30.1529199,69.7477011 C31.6384675,68.0783232 33.0395525,66.289704 34.3164278,64.4364958 C37.7744249,59.4233938 41.2125484,52.5471468 43.2197765,43.5891458 C49.4700068,41.1099209 56.1524868,39.7684566 63.0287338,39.7287095 C54.5526663,68.8583599 38.7184183,80.6433728 26.7644802,85.3981187 M38.6190506,45.6758682 C36.9546411,51.7223946 34.485353,57.2969243 31.0969133,62.215627 C29.9094689,63.9346888 28.6077517,65.5941299 27.2265402,67.1442665 C21.1551718,73.975798 14.44785,77.6225938 10.8656432,78.5367769 C13.2256269,70.2495081 18.0946457,62.0963858 24.9510191,55.4387478 C29.07478,51.4342282 33.6854427,48.1849034 38.6190506,45.6758682 M7.05985914,38.938736 C12.4108115,23.5168641 23.5896812,11.6126099 38.5494932,5.38225316 C41.4410941,18.3696156 41.7541025,30.2937434 39.7220324,40.8615016 C33.3525608,43.6785768 27.4153389,47.5837286 22.2233749,52.6316094 C15.386875,59.2743422 10.3588678,67.3380336 7.63619198,75.6501443 C2.94603506,65.0277338 2.65786864,51.6081217 7.05985914,38.938736 M44.0644022,39.1325031 C45.5449814,29.6677267 45.4307086,18.155975 42.3155302,4.27927135 L41.3566316,-0.00347787059 L37.2974598,1.66590001 C21.170077,8.29869607 9.11677117,21.0823547 3.36337953,37.6519239 C-1.86336313,52.6862616 -0.954148389,68.8235812 5.78298379,80.8172663 L6.15561278,81.4780617 C5.60412187,84.3448208 5.28614513,87.2115798 5.32589222,90.0236866 L5.35073416,91.5142026 L6.79156626,91.8868316 C7.91939001,92.1849348 9.66329369,92.4134806 11.8891309,92.4134806 C15.9681762,92.4134806 21.6669156,91.6384123 28.2102807,89.0349777 C41.3218529,83.8231402 58.7807632,70.7910623 67.4903449,38.3226561 L68.1262984,35.9527357 L65.6768838,35.8583363 C58.2044304,35.5701699 50.9207757,36.7377408 44.0644022,39.1325031" id="Fill-5" fill="#2D2F63" mask="url(#esolia-mask-2)"></path> </g> <path d="M0,31.8190381 C4.2529389,58.3601591 27.7732809,82.1984778 51.6414099,81.030907 C51.1594764,58.0173404 27.0379597,32.872336 0,31.8190381" id="Fill-8" fill="#2D2F63"></path> </g> </g> </svg>`

eSolia symbol logo - dark blue on transparent background

v
logoSymbolLight: `<svg width="170" height="170" viewBox="0 0 170 170" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>eSolia Symbol Light</title> <defs> <polygon id="esolia-light-path-1" points="0 0 74.6633584 0 74.6633584 101.29 0 101.29"></polygon> </defs> <g id="symbol_white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Group-8" transform="translate(16, 34)"> <path d="M40.21378,5.39748659 L38.3623419,4.0851437 L37.747011,6.13261642 C29.5734563,33.3759834 45.3215709,45.9929895 52.4713892,50.1478344 L54.0124392,51.0463264 L54.6985603,49.5270581 C61.9409505,33.4249921 56.5282168,16.9308568 40.21378,5.39748659" id="Fill-1" fill="#FFFFFF"></path> <g id="Group-5" transform="translate(63.2198, 0)"> <mask id="esolia-light-mask-2" fill="white"> <use xlink:href="#esolia-light-path-1"></use> </mask> <path d="M29.3341639,93.6010865 C20.7903216,96.9990199 13.7766385,97.2876265 10.1391072,96.851994 C10.204452,94.7772942 10.4876131,92.6753675 10.8687916,90.5734407 C16.1072723,90.1378082 25.4025806,85.040908 33.0479309,76.4480571 C34.6761073,74.6184006 36.2117119,72.6580544 37.6111812,70.6269179 C41.4011839,65.1325031 45.169405,57.596061 47.3693491,47.7779937 C54.21967,45.060736 61.5437413,43.5904763 69.0801834,43.5469131 C59.7903205,75.4733294 42.4358111,88.3898328 29.3341639,93.6010865 M42.326903,50.0650642 C40.5026919,56.6921235 37.796325,62.8018693 34.082558,68.1928214 C32.781106,70.0769319 31.3544096,71.8956975 29.8405866,73.5946643 C23.1863003,81.0820977 15.835002,85.0790259 11.9088642,86.0809806 C14.4954321,76.9980431 19.8319301,68.0621316 27.3465906,60.7652874 C31.8662777,56.37629 36.9196147,52.8149944 42.326903,50.0650642 M7.73768304,42.6810935 C13.6023855,25.7785528 25.8545493,12.7313596 42.2506673,5.90282028 C45.4198937,20.137112 45.7629543,33.2060868 43.5357831,44.7884657 C36.5547724,47.876011 30.0475121,52.1561002 24.3570626,57.6886329 C16.8641838,64.9691409 11.3534327,73.8070351 8.36935015,82.9171996 C3.22888674,71.2749212 2.91305318,56.5668792 7.73768304,42.6810935 M48.2950681,42.8934643 C49.9177992,32.5199656 49.7925548,19.9029595 46.3782852,4.69394011 L45.3273218,0 L40.8784249,1.82965647 C23.2026365,9.09927369 9.99208119,23.1103037 3.68630085,41.2707333 C-2.04226643,57.7485323 -1.0457571,75.4352115 6.33821366,88.580422 L6.74661912,89.304661 C6.14217903,92.4466604 5.79367304,95.5886597 5.83723629,98.6707596 L5.86446332,100.304381 L7.44363111,100.712787 C8.6797383,101.039511 10.5910759,101.29 13.0306178,101.29 C17.5012963,101.29 23.7471772,100.440517 30.9187771,97.5871238 C45.2892039,91.8748927 64.4243612,77.5915924 73.9701582,42.0058631 L74.6671702,39.4084044 L71.9825849,39.3049417 C63.7926941,38.9891081 55.8097286,40.2687786 48.2950681,42.8934643" id="Fill-3" fill="#FFFFFF" mask="url(#esolia-light-mask-2)"></path> </g> <path d="M0,34.8772819 C4.66126767,63.9666416 30.4398204,90.0937004 56.5995516,88.8140299 C56.0713472,63.5909086 29.6339003,36.031708 0,34.8772819" id="Fill-6" fill="#FFFFFF"></path> </g> </g> </svg>`

eSolia symbol logo - white on transparent background

v
primaryColors: Record<PrimaryColor, { light: ColorScale; dark: ColorScale; }>

Primary color definitions with light and dark mode variants

v
statusColors: { success: { bg: string; bgStrong: string; bgSolid: string; text: string; textOnSolid: string; border: string; ring: string; ringStrong: string; bgDual: string; bgStrongDual: string; bgSolidDual: string; textDual: string; borderDual: string; ringDual: string; }; warning: { bg: string; bgStrong: string; bgSolid: string; text: string; textOnSolid: string; border: string; ring: string; ringStrong: string; bgDual: string; bgStrongDual: string; bgSolidDual: string; textDual: string; borderDual: string; ringDual: string; }; error: { bg: string; bgStrong: string; bgSolid: string; text: string; textOnSolid: string; border: string; ring: string; ringStrong: string; bgDual: string; bgStrongDual: string; bgSolidDual: string; textDual: string; borderDual: string; ringDual: string; }; info: { bg: string; bgStrong: string; bgSolid: string; text: string; textOnSolid: string; border: string; ring: string; ringStrong: string; bgDual: string; bgStrongDual: string; bgSolidDual: string; textDual: string; borderDual: string; ringDual: string; }; }

Status colors for badges, alerts, and status indicators Each status has light mode and dark mode variants

v
statusColorsDark: { success: { light: { bg: string; bgStrong: string; bgSolid: string; text: string; textOnSolid: string; border: string; ring: string; }; dark: { bg: string; bgStrong: string; bgSolid: string; text: string; textOnSolid: string; border: string; ring: string; }; }; warning: { light: { bg: string; bgStrong: string; bgSolid: string; text: string; textOnSolid: string; border: string; ring: string; }; dark: { bg: string; bgStrong: string; bgSolid: string; text: string; textOnSolid: string; border: string; ring: string; }; }; error: { light: { bg: string; bgStrong: string; bgSolid: string; text: string; textOnSolid: string; border: string; ring: string; }; dark: { bg: string; bgStrong: string; bgSolid: string; text: string; textOnSolid: string; border: string; ring: string; }; }; info: { light: { bg: string; bgStrong: string; bgSolid: string; text: string; textOnSolid: string; border: string; ring: string; }; dark: { bg: string; bgStrong: string; bgSolid: string; text: string; textOnSolid: string; border: string; ring: string; }; }; }

Status colors with dark mode support