WUI logo

Customize

By default, we use our default theme create by createTheme() function. We also also create a dark theme and a welcome theme for our products.

You can customize your theme with some options:

  • customize the theme values like colors, fonts, spacing etc.
  • customize the component styles, changing the variants, sizes etc.
  • customize the global style if you want to disable or not our reset css

Customize theme values #

To create your theme, use need to add some values from object on createTheme() function.

import React from 'react'
// import the theme provider and create theme util
import { createTheme, WuiProvider } from '@welcome-ui/core'
import { Button } from '@welcome-ui/button'
// Create your theme with specific colors, spacing etc.
const theme = createTheme({
colors: {
primary: {
500: '#FF0000'
},
secondary: {
500: '#00FF00'
}
},
spacing: {
3xl: 50,
4xl: 70
},
space: {
lg: 24
},
breakpoints: {
xl: 1024
}
})
export default function Root() {
return (
// Wrap your components with <WuiProvider /> and your theme at the root of your app
// Here we add reset styles to have consistency across different browsers (https://github.com/WTTJ/welcome-ui/blob/main/packages/Core/utils/reset.ts)
<WuiProvider theme={theme} useReset>
<Button variant="secondary">Welcome!</Button>
</WuiProvider>
)
}

Reset styles #

To provide consistency across browsers we provide two options:

  1. Pass useReset in the WuiProvider to use a custom reset
  2. Don't pass useReset to just reset box-sizing e.g.
const baseBoxSizing = css`
* {
&, &::before, &::after {
box-sizing: border-box;
}
}
`

Customizing component #

An example of the theme.js file for the Tag component. You can customize the variants, sizes and shapes.

{
"default": {
"fontWeight": 500,
"backgroundColor": "rgba(255, 255, 255, 1)",
"color": "#464A4A"
},
"variants": {
"1": {
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "#8CB3DB",
"backgroundColor": "#8CB3DB",
"color": "rgba(0, 0, 0, 1)"
},
"2": {
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "#3B52D0",
"backgroundColor": "#3B52D0",
"color": "rgba(255, 255, 255, 1)"
},
"3": {
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "#EE4B65",
"backgroundColor": "#EE4B65",
"color": "rgba(255, 255, 255, 1)"
},
"4": {
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "#F79D85",
"backgroundColor": "#F79D85",
"color": "rgba(0, 0, 0, 1)"
},
"5": {
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "#A5D0A8",
"backgroundColor": "#A5D0A8",
"color": "rgba(0, 0, 0, 1)"
},
"6": {
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "#267566",
"backgroundColor": "#267566",
"color": "rgba(255, 255, 255, 1)"
},
"7": {
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "#9B8CC0",
"backgroundColor": "#9B8CC0",
"color": "rgba(0, 0, 0, 1)"
},
"default": {
"backgroundColor": "#E9F6F6",
"borderColor": "#D2DDDD",
"borderWidth": "1px",
"borderStyle": "solid"
},
"primary": {
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "#36D2C9",
"backgroundColor": "#36D2C9",
"color": "rgba(0, 0, 0, 1)"
},
"secondary": {
"backgroundColor": "#A5D0A8",
"color": "rgba(0, 0, 0, 1)",
"borderColor": "rgba(0, 0, 0, 0.1)",
"borderWidth": "1px",
"borderStyle": "solid"
},
"success": {
"backgroundColor": "#E3F0EC",
"color": "#00875C",
"borderColor": "#99DCC7",
"borderWidth": "1px",
"borderStyle": "solid"
},
"error": {
"backgroundColor": "#FFE7E7",
"color": "#AF4636",
"borderColor": "#EBBDB5",
"borderWidth": "1px",
"borderStyle": "solid"
},
"warning": {
"backgroundColor": "#FFF2DC",
"color": "#B97F22",
"borderColor": "#F4DFBB",
"borderWidth": "1px",
"borderStyle": "solid"
},
"info": {
"backgroundColor": "#EDF3FE",
"color": "#106DD1",
"borderColor": "#9AC7F7",
"borderWidth": "1px",
"borderStyle": "solid"
}
},
"hover": {
"1": {
"borderColor": "rgba(0, 0, 0, 0.17)"
},
"2": {
"borderColor": "rgba(0, 0, 0, 0.17)"
},
"3": {
"borderColor": "rgba(0, 0, 0, 0.17)"
},
"4": {
"borderColor": "rgba(0, 0, 0, 0.17)"
},
"5": {
"borderColor": "rgba(0, 0, 0, 0.17)"
},
"6": {
"borderColor": "rgba(0, 0, 0, 0.17)"
},
"7": {
"borderColor": "rgba(0, 0, 0, 0.17)"
},
"default": {
"borderColor": "#8C9494"
},
"primary": {},
"secondary": {
"borderColor": "rgba(0, 0, 0, 0.4)"
},
"success": {
"borderColor": "#00875C"
},
"error": {
"borderColor": "#AF4636"
},
"warning": {
"borderColor": "#B97F22"
},
"info": {
"borderColor": "#106DD1"
}
},
"sizes": {
"xs": {
"padding": "0.125rem 0.25rem",
"height": "1.25rem",
"fontSize": "0.75rem",
"gap": "0.25rem"
},
"sm": {
"padding": "0.25rem 0.5rem",
"height": "1.5rem",
"fontSize": "0.75rem",
"gap": "0.25rem"
},
"md": {
"padding": "0.25rem 0.5rem",
"height": "2rem",
"fontSize": "0.875rem",
"gap": "0.5rem"
}
},
"icon": {
"xs": "0.75rem",
"sm": "0.75rem",
"md": "1rem"
},
"shape": {
"xs": {
"width": "1.25rem",
"height": "1.25rem"
},
"sm": {
"width": "1.5rem",
"height": "1.5rem"
},
"md": {
"width": "2rem",
"height": "2rem"
}
}
}

You can check all our theme objects on each packages/component on file theme.js.

How to customize the component #

The entry is always in plurial (tags, buttons, etc.)

import React from 'react'
import { createTheme, WuiProvider } from '@welcome-ui/core'
import { Button } from '@welcome-ui/button'
const yourTheme = {
tags: {
variants: {
default: {
backgroundColor: '#010101',
color: '#FFF',
},
primary: {
backgroundColor: '#FFF000',
color: '#000',
},
},
sizes: {
sm: {
padding: 10,
height: 10,
fontSize: 12,
},
md: {
padding: 10,
height: 14,
fontSize: 14,
},
},
},
}
const theme = createTheme(yourTheme)
export default function Root() {
return (
<WuiProvider theme={theme}>
<Button variant="secondary">Welcome!</Button>
</WuiProvider>
)
}

Change fonts #

If you want to change the url path for the fonts, you can change the property fontsUrl on createTheme(). By default the fonts are served from the welcome-ui.com domain. In our case at Welcome to the Jungle, we want to have the fonts served from the same domain name as our main website.

const theme = createTheme({ fontsUrl: 'https://cdn.welcometothejungle.com/fonts', ...yourTheme })

You can also overload the fonts used (for example to subset the fonts) by merging a font object with the theme. For example to replace the work-sans font with subsetted versions, host your subsetted versions somewhere then update the fontFaces object:

const fontFaces = {
'work-sans': [
{
url: 'https://my_website.com/public/work-sans-variable-latin-ext',
uniCodeRange:
'U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF',
weight: '400-600',
},
{
url: 'https://my_website.com/public/work-sans-variable-latin',
uniCodeRange:
'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
weight: '400-600',
},
],
}
const theme = createTheme({ fontFaces, ...yourTheme })

All theme values #

Here are all the possible values for your theme.
These will be merged with the default theme.

{
"transformers": {},
"colors": {
"primary-100": "#EBFAFA",
"primary-200": "#86E4DF",
"primary-500": "#36D2C9",
"primary-600": "#31BDB5",
"primary-700": "#207E79",
"primary-800": "#185F5B",
"primary-900": "#103F3C",
"success-100": "#E3F0EC",
"success-200": "#99DCC7",
"success-300": "#45BE98",
"success-400": "#00A772",
"success-500": "#00875C",
"danger-100": "#FFE7E7",
"danger-200": "#EBBDB5",
"danger-300": "#D87C6E",
"danger-400": "#CE5947",
"danger-500": "#AF4636",
"warning-100": "#FFF2DC",
"warning-200": "#F4DFBB",
"warning-300": "#EBC484",
"warning-400": "#E4AE56",
"warning-500": "#B97F22",
"info-100": "#EDF3FE",
"info-200": "#B7D7F9",
"info-300": "#9AC7F7",
"info-400": "#4B9BF1",
"info-500": "#106DD1",
"light-100": "rgba(255, 255, 255, 0.1)",
"light-200": "rgba(255, 255, 255, 0.17)",
"light-400": "rgba(255, 255, 255, 0.4)",
"light-500": "rgba(255, 255, 255, 0.55)",
"light-700": "rgba(255, 255, 255, 0.7)",
"light-900": "rgba(255, 255, 255, 1)",
"dark-100": "rgba(0, 0, 0, 0.1)",
"dark-200": "rgba(0, 0, 0, 0.17)",
"dark-400": "rgba(0, 0, 0, 0.4)",
"dark-500": "rgba(0, 0, 0, 0.55)",
"dark-700": "rgba(0, 0, 0, 0.7)",
"dark-900": "rgba(0, 0, 0, 1)",
"nude-100": "#F3FAFA",
"nude-200": "#E9F6F6",
"nude-400": "#D2DDDD",
"nude-600": "#8C9494",
"nude-700": "#696F6F",
"nude-900": "#464A4A",
"sub-1": "#8CB3DB",
"sub-2": "#3B52D0",
"sub-3": "#EE4B65",
"sub-4": "#F79D85",
"sub-5": "#A5D0A8",
"sub-6": "#267566",
"sub-7": "#9B8CC0",
"black": "rgba(0, 0, 0, 1)",
"white": "rgba(255, 255, 255, 1)",
"overlay": "rgba(0, 0, 0, 0.55)",
"border": "rgba(0, 0, 0, 0.1)",
"underline": "#36D2C9"
},
"fontsUrl": "https://cdn.welcome-ui.com/fonts",
"fontFaces": {
"welcome-font": [
{
"url": "https://cdn.welcome-ui.com/fonts/welcome-font-regular",
"weight": "400"
},
{
"url": "https://cdn.welcome-ui.com/fonts/welcome-font-medium",
"weight": "500"
},
{
"url": "https://cdn.welcome-ui.com/fonts/welcome-font-bold",
"weight": "600"
},
{
"url": "https://cdn.welcome-ui.com/fonts/welcome-font-regular-italic",
"style": "italic",
"weight": "400"
},
{
"url": "https://cdn.welcome-ui.com/fonts/welcome-font-medium-italic",
"style": "italic",
"weight": "500"
},
{
"url": "https://cdn.welcome-ui.com/fonts/welcome-font-bold-italic",
"style": "italic",
"weight": "600"
}
],
"welcome-icon-font": [
{
"url": "https://cdn.welcome-ui.com/fonts/icon-font/d0c5c3369cc571864773fb934ac1ecef5bd653a4/welcome-icon-font",
"display": "block"
}
],
"work-sans": [
{
"url": "https://cdn.welcome-ui.com/fonts/work-sans-variable",
"isVariable": true,
"stretch": "75% 125%",
"weight": "100 1000"
}
]
},
"fontSizes": {
"h0": "4.0625rem",
"h1": "2.8125rem",
"h2": "2.25rem",
"h3": "1.625rem",
"h4": "1.25rem",
"h5": "1rem",
"h6": "0.875rem",
"lg": "1.125rem",
"md": "1rem",
"sm": "0.875rem",
"xs": "0.75rem",
"subtitle-md": "0.8125rem",
"subtitle-sm": "0.6875rem"
},
"defaultLineHeight": 1.15,
"defaultLetterSpacing": "-0.019rem",
"lineHeights": {
"html": 1.15,
"h0": "4.5rem",
"h1": "3rem",
"h2": "2.5rem",
"h3": "2rem",
"h4": "1.5rem",
"h5": "1.125rem",
"h6": "1rem",
"lg": "1.5rem",
"md": "1.125rem",
"sm": "1.125rem",
"xs": "0.875rem",
"subtitle-md": 1.15,
"subtitle-sm": 1.15
},
"fontWeights": {
"regular": 400,
"medium": 500,
"bold": 600
},
"letterSpacings": {
"html": "-0.019rem",
"h0": "-0.10625rem",
"h1": "-0.075rem",
"h2": "-0.0625rem",
"h3": "-0.05625rem",
"h4": "-0.0375rem",
"h5": "-0.03125rem",
"h6": "-0.03125rem",
"lg": "-0.019rem",
"md": "-0.019rem",
"sm": "-0.019rem",
"xs": "-0.0125rem",
"subtitle-md": "-0.0125rem",
"subtitle-sm": "-0.0125rem"
},
"fonts": {
"texts": "work-sans, sans-serif",
"headings": "welcome-font, sans-serif",
"icons": "welcome-icon-font"
},
"borderWidths": {
"sm": "1px",
"md": "2px",
"lg": "3px"
},
"screens": {
"xs": 0,
"sm": 480,
"md": 736,
"lg": 980,
"xl": 1280,
"xxl": 1440,
"3xl": 1620,
"4xl": 1920
},
"space": {
"xxs": "0.125rem",
"xs": "0.25rem",
"sm": "0.5rem",
"md": "0.75rem",
"lg": "1rem",
"xl": "1.5rem",
"xxl": "2rem",
"3xl": "3rem",
"4xl": "4rem",
"5xl": "6rem",
"6xl": "8rem",
"7xl": "12rem"
},
"inset": {
"xxs": "0.125rem",
"xs": "0.25rem",
"sm": "0.5rem",
"md": "0.75rem",
"lg": "1rem",
"xl": "1.5rem",
"xxl": "2rem",
"3xl": "3rem",
"4xl": "4rem",
"5xl": "6rem",
"6xl": "8rem",
"7xl": "12rem"
},
"icons": {
"xs": "0.75rem",
"sm": "1rem",
"md": "1.5rem",
"lg": "2rem",
"xl": "3rem",
"xxl": "4rem"
},
"radii": {
"none": "0",
"sm": "0.125rem",
"md": "0.25rem",
"lg": "0.5rem",
"xl": "1rem"
},
"transitions": {
"slow": "500ms cubic-bezier(0.41, 0.094, 0.54, 0.07)",
"medium": "300ms ease",
"fast": "100ms linear"
},
"timingFunction": {
"primary": "ease",
"secondary": "linear",
"tertiary": "cubic-bezier(0.41, 0.094, 0.54, 0.07)"
},
"shadows": {
"sm": "1px 2px 4px 0 rgba(0,0,0,0.05)",
"md": "3px 4px 10px 0 rgba(0,0,0,0.07)"
},
"selection": {
"backgroundColor": "#36D2C9",
"color": "rgba(0, 0, 0, 1)"
},
"underline": {
"default": [
"\n background-image: linear-gradient(0deg, ",
"#36D2C9",
", ",
"#36D2C9",
" 100%);\n background-repeat: no-repeat;\n background-size: 100% 50%;\n background-position-y: calc(200% - 2px);\n transition: background-position-y 250ms, background-size 250ms, color 250ms;\n "
],
"hover": [
"\n opacity: 1;\n background-position-y: 100%;\n background-size: 100% 100%;\n "
]
},
"defaultCards": {
"backgroundColor": "rgba(255, 255, 255, 1)",
"borderStyle": "solid",
"borderWidth": "1px",
"borderColor": "rgba(0, 0, 0, 0.1)"
},
"textsFontWeights": {
"h0": 600,
"h1": 600,
"h2": 600,
"h3": 600,
"h4": 600,
"h5": 600,
"h6": 600,
"lg": 400,
"md": 400,
"sm": 400,
"xs": 400,
"subtitle-md": 600,
"subtitle-sm": 500
},
"textsFontFamily": {
"h0": "welcome-font, sans-serif",
"h1": "welcome-font, sans-serif",
"h2": "welcome-font, sans-serif",
"h3": "welcome-font, sans-serif",
"h4": "welcome-font, sans-serif",
"h5": "welcome-font, sans-serif",
"h6": "welcome-font, sans-serif",
"subtitle-md": "welcome-font, sans-serif",
"subtitle-sm": "welcome-font, sans-serif"
},
"textsFontColors": {
"h0": "rgba(0, 0, 0, 1)",
"h1": "rgba(0, 0, 0, 1)",
"h2": "rgba(0, 0, 0, 1)",
"h3": "rgba(0, 0, 0, 1)",
"h4": "rgba(0, 0, 0, 1)",
"h5": "rgba(0, 0, 0, 1)",
"h6": "rgba(0, 0, 0, 1)"
},
"textsTextTransform": {
"subtitle-md": "uppercase",
"subtitle-sm": "uppercase"
},
"texts": {
"h0": {
"color": "rgba(0, 0, 0, 1)",
"fontFamily": "welcome-font, sans-serif",
"fontWeight": 600,
"fontSize": "4.0625rem",
"lineHeight": "4.5rem",
"letterSpacing": "-0.10625rem"
},
"h1": {
"color": "rgba(0, 0, 0, 1)",
"fontFamily": "welcome-font, sans-serif",
"fontWeight": 600,
"fontSize": "2.8125rem",
"lineHeight": "3rem",
"letterSpacing": "-0.075rem"
},
"h2": {
"color": "rgba(0, 0, 0, 1)",
"fontFamily": "welcome-font, sans-serif",
"fontWeight": 600,
"fontSize": "2.25rem",
"lineHeight": "2.5rem",
"letterSpacing": "-0.0625rem"
},
"h3": {
"color": "rgba(0, 0, 0, 1)",
"fontFamily": "welcome-font, sans-serif",
"fontWeight": 600,
"fontSize": "1.625rem",
"lineHeight": "2rem",
"letterSpacing": "-0.05625rem"
},
"h4": {
"color": "rgba(0, 0, 0, 1)",
"fontFamily": "welcome-font, sans-serif",
"fontWeight": 600,
"fontSize": "1.25rem",
"lineHeight": "1.5rem",
"letterSpacing": "-0.0375rem"
},
"h5": {
"color": "rgba(0, 0, 0, 1)",
"fontFamily": "welcome-font, sans-serif",
"fontWeight": 600,
"fontSize": "1rem",
"lineHeight": "1.125rem",
"letterSpacing": "-0.03125rem"
},
"h6": {
"color": "rgba(0, 0, 0, 1)",
"fontFamily": "welcome-font, sans-serif",
"fontWeight": 600,
"fontSize": "0.875rem",
"lineHeight": "1rem",
"letterSpacing": "-0.03125rem"
},
"lg": {
"fontWeight": 400,
"fontSize": "1.125rem",
"lineHeight": "1.5rem",
"letterSpacing": "-0.019rem"
},
"md": {
"fontWeight": 400,
"fontSize": "1rem",
"lineHeight": "1.125rem",
"letterSpacing": "-0.019rem"
},
"sm": {
"fontWeight": 400,
"fontSize": "0.875rem",
"lineHeight": "1.125rem",
"letterSpacing": "-0.019rem"
},
"xs": {
"fontWeight": 400,
"fontSize": "0.75rem",
"lineHeight": "0.875rem",
"letterSpacing": "-0.0125rem"
},
"subtitle-md": {
"fontFamily": "welcome-font, sans-serif",
"fontWeight": 600,
"fontSize": "0.8125rem",
"lineHeight": 1.15,
"letterSpacing": "-0.0125rem",
"textTransform": "uppercase"
},
"subtitle-sm": {
"fontFamily": "welcome-font, sans-serif",
"fontWeight": 500,
"fontSize": "0.6875rem",
"lineHeight": 1.15,
"letterSpacing": "-0.0125rem",
"textTransform": "uppercase"
}
},
"alerts": {
"default": {
"fontSize": "0.875rem",
"borderWidth": "1px",
"borderStyle": "solid",
"color": "rgba(0, 0, 0, 0.7)",
"backgroundColor": "rgba(255, 255, 255, 1)",
"borderColor": "rgba(0, 0, 0, 0.1)"
},
"error": {
"backgroundColor": "#FFE7E7",
"borderColor": "#AF4636"
},
"warning": {
"backgroundColor": "#FFF2DC",
"borderColor": "#B97F22"
},
"info": {
"backgroundColor": "#EDF3FE",
"borderColor": "#106DD1"
},
"success": {
"backgroundColor": "#E3F0EC",
"borderColor": "#00875C"
},
"sizes": {
"sm": {
"padding": "1rem"
},
"md": {
"padding": "1.5rem"
}
},
"title": {
"default": {
"color": "rgba(0, 0, 0, 1)"
},
"error": {
"color": "rgba(0, 0, 0, 1)"
},
"warning": {
"color": "rgba(0, 0, 0, 1)"
},
"info": {
"color": "rgba(0, 0, 0, 1)"
},
"success": {
"color": "rgba(0, 0, 0, 1)"
}
}
},
"avatars": {
"sizes": {
"sm": "1.25rem",
"md": "1.875rem",
"lg": "2.5rem",
"xl": "3.125rem",
"xxl": "3.75rem"
},
"text": {
"color": "rgba(255, 255, 255, 1)",
"fontWeight": 600
}
},
"badges": {
"default": {
"fontFamily": "welcome-font, sans-serif",
"fontWeight": 500,
"fontSize": "0.75rem",
"lineHeight": "0.875rem",
"letterSpacing": "-0.0125rem"
},
"variants": {
"default": {
"color": "#696F6F",
"backgroundColor": "#E9F6F6"
},
"primary": {
"color": "rgba(0, 0, 0, 1)",
"backgroundColor": "#36D2C9"
}
},
"disabled": {
"default": {
"color": "#D2DDDD",
"backgroundColor": "#F3FAFA"
},
"primary": {
"color": "#185F5B",
"backgroundColor": "#31BDB5"
}
},
"sizes": {
"sm": {
"padding": "0.125rem",
"height": "1rem",
"borderRadius": "0.875rem"
},
"md": {
"padding": "0.25rem",
"height": "1.25rem",
"borderRadius": "0.875rem"
}
}
},
"buttons": {
"primary": {
"color": "rgba(0, 0, 0, 1)",
"fontWeight": 600,
"fontSize": "0.75rem",
"lineHeight": "0.875rem",
"letterSpacing": 0,
"backgroundColor": "#36D2C9",
"borderColor": "#36D2C9"
},
"secondary": {
"color": "rgba(255, 255, 255, 1)",
"fontWeight": 600,
"fontSize": "0.75rem",
"lineHeight": "0.875rem",
"letterSpacing": 0,
"backgroundColor": "rgba(0, 0, 0, 1)",
"borderColor": "rgba(0, 0, 0, 1)"
},
"tertiary": {
"color": "rgba(0, 0, 0, 1)",
"fontWeight": 600,
"fontSize": "0.75rem",
"lineHeight": "0.875rem",
"letterSpacing": 0,
"backgroundColor": "transparent",
"borderColor": "rgba(0, 0, 0, 1)"
},
"primary-success": {
"color": "rgba(255, 255, 255, 1)",
"fontWeight": 600,
"fontSize": "0.75rem",
"lineHeight": "0.875rem",
"letterSpacing": 0,
"backgroundColor": "#00875C",
"borderColor": "#00875C"
},
"secondary-success": {
"color": "#00875C",
"fontWeight": 600,
"fontSize": "0.75rem",
"lineHeight": "0.875rem",
"letterSpacing": 0,
"backgroundColor": "rgba(255, 255, 255, 1)",
"borderColor": "#00875C"
},
"primary-warning": {
"color": "rgba(255, 255, 255, 1)",
"fontWeight": 600,
"fontSize": "0.75rem",
"lineHeight": "0.875rem",
"letterSpacing": 0,
"backgroundColor": "#B97F22",
"borderColor": "#B97F22"
},
"secondary-warning": {
"color": "#B97F22",
"fontWeight": 600,
"fontSize": "0.75rem",
"lineHeight": "0.875rem",
"letterSpacing": 0,
"backgroundColor": "rgba(255, 255, 255, 1)",
"borderColor": "#B97F22"
},
"primary-danger": {
"color": "rgba(255, 255, 255, 1)",
"fontWeight": 600,
"fontSize": "0.75rem",
"lineHeight": "0.875rem",
"letterSpacing": 0,
"backgroundColor": "#AF4636",
"borderColor": "#AF4636"
},
"secondary-danger": {
"color": "#AF4636",
"fontWeight": 600,
"fontSize": "0.75rem",
"lineHeight": "0.875rem",
"letterSpacing": 0,
"backgroundColor": "rgba(255, 255, 255, 1)",
"borderColor": "#AF4636"
},
"primary-info": {
"color": "rgba(255, 255, 255, 1)",
"fontWeight": 600,
"fontSize": "0.75rem",
"lineHeight": "0.875rem",
"letterSpacing": 0,
"backgroundColor": "#106DD1",
"borderColor": "#106DD1"
},
"secondary-info": {
"color": "#106DD1",
"fontWeight": 600,
"fontSize": "0.75rem",
"lineHeight": "0.875rem",
"letterSpacing": 0,
"backgroundColor": "rgba(255, 255, 255, 1)",
"borderColor": "#106DD1"
},
"ghost": {
"color": "rgba(0, 0, 0, 1)",
"fontWeight": 600,
"fontSize": "0.75rem",
"lineHeight": "0.875rem",
"letterSpacing": 0,
"backgroundColor": "transparent",
"borderColor": "transparent"
},
"hover": {
"primary": {
"backgroundColor": "#86E4DF",
"borderColor": "#86E4DF"
},
"secondary": {
"backgroundColor": "rgba(0, 0, 0, 0.7)",
"borderColor": "transparent"
},
"tertiary": {
"backgroundColor": "rgba(0, 0, 0, 0.1)"
},
"primary-success": {
"backgroundColor": "#00A772",
"borderColor": "#00A772"
},
"secondary-success": {
"backgroundColor": "rgba(0, 135, 92, 0.1)"
},
"primary-warning": {
"backgroundColor": "#E4AE56",
"borderColor": "#E4AE56"
},
"secondary-warning": {
"backgroundColor": "#FFF2DC"
},
"primary-danger": {
"backgroundColor": "#CE5947",
"borderColor": "#CE5947"
},
"secondary-danger": {
"backgroundColor": "#FFE7E7"
},
"primary-info": {
"backgroundColor": "#4B9BF1",
"borderColor": "#4B9BF1"
},
"secondary-info": {
"backgroundColor": "#EDF3FE"
},
"ghost": {
"backgroundColor": "rgba(0, 0, 0, 0.1)"
}
},
"focus": {
"primary": {
"boxShadow": "0 0 0 2px rgba(54, 210, 201, 0.5)"
},
"secondary": {
"boxShadow": "0 0 0 2px rgba(0, 0, 0, 0.55)"
},
"tertiary": {
"boxShadow": "0 0 0 2px rgba(0, 0, 0, 0.55)"
},
"ghost": {
"boxShadow": "0 0 0 2px rgba(0, 0, 0, 0.1)"
},
"primary-success": {
"boxShadow": "0 0 0 2px rgba(0, 135, 92, 0.5)"
},
"secondary-success": {
"boxShadow": "0 0 0 2px rgba(0, 135, 92, 0.5)"
},
"primary-warning": {
"boxShadow": "0 0 0 2px rgba(185, 127, 34, 0.5)"
},
"secondary-warning": {
"boxShadow": "0 0 0 2px rgba(185, 127, 34, 0.5)"
},
"primary-danger": {
"boxShadow": "0 0 0 2px rgba(175, 70, 54, 0.5)"
},
"secondary-danger": {
"boxShadow": "0 0 0 2px rgba(175, 70, 54, 0.5)"
},
"primary-info": {
"boxShadow": "0 0 0 2px rgba(16, 109, 209, 0.5)"
},
"secondary-info": {
"boxShadow": "0 0 0 2px rgba(16, 109, 209, 0.5)"
}
},
"active": {
"primary": {
"backgroundColor": "#EBFAFA",
"borderColor": "#EBFAFA"
},
"secondary": {
"backgroundColor": "rgba(0, 0, 0, 0.17)",
"borderColor": "rgba(0, 0, 0, 0.17)"
},
"tertiary": {
"backgroundColor": "rgba(0, 0, 0, 0.4)"
},
"primary-success": {
"backgroundColor": "#45BE98",
"borderColor": "#45BE98"
},
"secondary-success": {
"backgroundColor": "rgba(0, 135, 92, 0.4)"
},
"primary-warning": {
"backgroundColor": "#EBC484",
"borderColor": "#EBC484"
},
"secondary-warning": {
"backgroundColor": "rgba(185, 127, 34, 0.4)"
},
"primary-danger": {
"backgroundColor": "#D87C6E",
"borderColor": "#D87C6E"
},
"secondary-danger": {
"backgroundColor": "rgba(175, 70, 54, 0.4)"
},
"primary-info": {
"backgroundColor": "#9AC7F7",
"borderColor": "#9AC7F7"
},
"secondary-info": {
"backgroundColor": "rgba(16, 109, 209, 0.4)"
},
"ghost": {
"backgroundColor": "rgba(0, 0, 0, 0.4)"
}
},
"disabled": {
"color": "#696F6F",
"fontWeight": 600,
"fontSize": "0.75rem",
"lineHeight": "0.875rem",
"letterSpacing": 0,
"backgroundColor": "#D2DDDD",
"borderColor": "#D2DDDD",
"&:focus": {
"boxShadow": "0 0 0 2px rgba(210, 221, 221, 0.5)"
}
},
"sizes": {
"xxs": {
"height": "1rem",
"padding": "0.125rem 0.25rem"
},
"xs": {
"height": "1.5rem",
"padding": "0.25rem 0.5rem"
},
"sm": {
"height": "2rem",
"padding": "0.5rem 0.75rem"
},
"md": {
"fontWeight": 600,
"fontSize": "0.875rem",
"lineHeight": "1.125rem",
"letterSpacing": "-0.019rem",
"height": "2.5rem",
"padding": "0.5rem 1rem"
},
"lg": {
"fontWeight": 600,
"fontSize": "0.875rem",
"lineHeight": "1.125rem",
"letterSpacing": "-0.019rem",
"height": "3rem",
"padding": "0.75rem 1.5rem"
}
},
"icon": {
"only": {
"xxs": "1rem",
"xs": "1rem",
"sm": "1rem",
"md": "1rem",
"lg": "1.5rem"
},
"default": {
"xxs": "0.75rem",
"xs": "0.75rem",
"sm": "1rem",
"md": "1rem",
"lg": "1rem"
}
}
},
"breadcrumbs": {
"list": {
"fontFamily": "welcome-font, sans-serif",
"fontWeight": 500,
"fontSize": "0.6875rem",
"lineHeight": 1.15,
"letterSpacing": "-0.0125rem",
"textTransform": "uppercase",
"padding": "0.5rem 0"
},
"item": {
"default": {
"color": "rgba(0, 0, 0, 0.4)",
"textDecoration": "none"
},
"hover": {
"color": "rgba(0, 0, 0, 0.7)"
},
"active": {
"color": "rgba(0, 0, 0, 0.7)"
}
},
"separator": {
"padding": "0 0.25rem",
"color": "rgba(0, 0, 0, 0.4)"
}
},
"toasts": {
"default": {
"paddingLeft": "0.5rem",
"paddingRight": "0.5rem"
},
"top": {
"paddingTop": "1rem"
},
"bottom": {
"paddingBottom": "1rem"
},
"growls": {
"default": {
"fontWeight": 400,
"fontSize": "0.875rem",
"lineHeight": "1.125rem",
"letterSpacing": "-0.019rem",
"borderWidth": "1px",
"borderStyle": "solid"
},
"title": {
"fontWeight": 600,
"color": "rgba(0, 0, 0, 1)"
}
}
},
"paginations": {
"default": {
"width": "2rem",
"height": "2rem",
"color": "rgba(0, 0, 0, 1)",
"fontWeight": 600,
"fontSize": "0.75rem"
},
"item": {
"&:hover, &:focus": {
"backgroundColor": "rgba(0, 0, 0, 0.1)"
},
"&:focus": {
"boxShadow": "0 0 0 2px rgba(0, 0, 0, 0.55)"
}
},
"active": {
"backgroundColor": "rgba(0, 0, 0, 1)",
"color": "rgba(255, 255, 255, 1)",
"&:hover, &:focus": {
"backgroundColor": "rgba(0, 0, 0, 1)"
}
},
"disabled": {
"backgroundColor": "#D2DDDD",
"color": "#696F6F"
}
},
"tabs": {
"tabsBorder": {
"horizontal": {
"boxShadow": "inset 0 -1px 0 rgba(0, 0, 0, 0.1)"
},
"vertical": {
"boxShadow": "inset -1px 0 0 rgba(0, 0, 0, 0.1)"
}
},
"item": {
"default": {
"color": "rgba(0, 0, 0, 0.7)",
"fontWeight": 500,
"fontSize": "1rem",
"textDecoration": "none",
"lineHeight": "1.125rem"
},
"active": {
"color": "rgba(0, 0, 0, 1)"
},
"focus": {
"color": "rgba(0, 0, 0, 1)"
},
"disabled": {
"color": "rgba(0, 0, 0, 0.4)"
}
},
"panel": {
"vertical": {
"&:focus": {
"outline": "none"
}
},
"horizontal": {
"marginTop": "1.5rem",
"&:focus": {
"outline": "none"
}
}
},
"activeBar": {
"horizontal": {
"background": "#36D2C9",
"height": "2px"
},
"vertical": {
"background": "#36D2C9",
"width": "2px"
}
},
"size": {
"sm": {
"marginRight": "0.75rem",
"fontSize": "0.875rem"
},
"md": {
"marginRight": "1.5rem"
}
},
"icon": {
"maxWidth": "1rem",
"maxHeight": "1rem"
},
"badge": {
"maxHeight": "1rem"
}
},
"tags": {
"default": {
"fontWeight": 500,
"backgroundColor": "rgba(255, 255, 255, 1)",
"color": "#464A4A"
},
"variants": {
"1": {
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "#8CB3DB",
"backgroundColor": "#8CB3DB",
"color": "rgba(0, 0, 0, 1)"
},
"2": {
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "#3B52D0",
"backgroundColor": "#3B52D0",
"color": "rgba(255, 255, 255, 1)"
},
"3": {
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "#EE4B65",
"backgroundColor": "#EE4B65",
"color": "rgba(255, 255, 255, 1)"
},
"4": {
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "#F79D85",
"backgroundColor": "#F79D85",
"color": "rgba(0, 0, 0, 1)"
},
"5": {
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "#A5D0A8",
"backgroundColor": "#A5D0A8",
"color": "rgba(0, 0, 0, 1)"
},
"6": {
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "#267566",
"backgroundColor": "#267566",
"color": "rgba(255, 255, 255, 1)"
},
"7": {
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "#9B8CC0",
"backgroundColor": "#9B8CC0",
"color": "rgba(0, 0, 0, 1)"
},
"default": {
"backgroundColor": "#E9F6F6",
"borderColor": "#D2DDDD",
"borderWidth": "1px",
"borderStyle": "solid"
},
"primary": {
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "#36D2C9",
"backgroundColor": "#36D2C9",
"color": "rgba(0, 0, 0, 1)"
},
"secondary": {
"backgroundColor": "#A5D0A8",
"color": "rgba(0, 0, 0, 1)",
"borderColor": "rgba(0, 0, 0, 0.1)",
"borderWidth": "1px",
"borderStyle": "solid"
},
"success": {
"backgroundColor": "#E3F0EC",
"color": "#00875C",
"borderColor": "#99DCC7",
"borderWidth": "1px",
"borderStyle": "solid"
},
"error": {
"backgroundColor": "#FFE7E7",
"color": "#AF4636",
"borderColor": "#EBBDB5",
"borderWidth": "1px",
"borderStyle": "solid"
},
"warning": {
"backgroundColor": "#FFF2DC",
"color": "#B97F22",
"borderColor": "#F4DFBB",
"borderWidth": "1px",
"borderStyle": "solid"
},
"info": {
"backgroundColor": "#EDF3FE",
"color": "#106DD1",
"borderColor": "#9AC7F7",
"borderWidth": "1px",
"borderStyle": "solid"
}
},
"hover": {
"1": {
"borderColor": "rgba(0, 0, 0, 0.17)"
},
"2": {
"borderColor": "rgba(0, 0, 0, 0.17)"
},
"3": {
"borderColor": "rgba(0, 0, 0, 0.17)"
},
"4": {
"borderColor": "rgba(0, 0, 0, 0.17)"
},
"5": {
"borderColor": "rgba(0, 0, 0, 0.17)"
},
"6": {
"borderColor": "rgba(0, 0, 0, 0.17)"
},
"7": {
"borderColor": "rgba(0, 0, 0, 0.17)"
},
"default": {
"borderColor": "#8C9494"
},
"primary": {},
"secondary": {
"borderColor": "rgba(0, 0, 0, 0.4)"
},
"success": {
"borderColor": "#00875C"
},
"error": {
"borderColor": "#AF4636"
},
"warning": {
"borderColor": "#B97F22"
},
"info": {
"borderColor": "#106DD1"
}
},
"sizes": {
"xs": {
"padding": "0.125rem 0.25rem",
"height": "1.25rem",
"fontSize": "0.75rem",
"gap": "0.25rem"
},
"sm": {
"padding": "0.25rem 0.5rem",
"height": "1.5rem",
"fontSize": "0.75rem",
"gap": "0.25rem"
},
"md": {
"padding": "0.25rem 0.5rem",
"height": "2rem",
"fontSize": "0.875rem",
"gap": "0.5rem"
}
},
"icon": {
"xs": "0.75rem",
"sm": "0.75rem",
"md": "1rem"
},
"shape": {
"xs": {
"width": "1.25rem",
"height": "1.25rem"
},
"sm": {
"width": "1.5rem",
"height": "1.5rem"
},
"md": {
"width": "2rem",
"height": "2rem"
}
}
},
"tooltips": {
"maxWidth": "12.5rem",
"backgroundColor": "rgba(0, 0, 0, 1)",
"color": "rgba(255, 255, 255, 1)",
"padding": "0.25rem 0.5rem",
"fontSize": "0.75rem",
"lineHeight": "0.875rem",
"border": "1px solid rgba(255, 255, 255, 0.4)",
"boxSizing": "border-box"
},
"links": {
"default": {
"color": "rgba(0, 0, 0, 1)",
"fontWeight": 500,
"transition": "300ms ease"
},
"withExternalLink": {
"backgroundSize": "calc(100% - 1rem - 0.5rem) 50%"
},
"disabled": {
"color": "rgba(0, 0, 0, 0.4)",
"backgroundImage": "linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 100%)"
},
"primary": {
"default": {},
"hover": {}
},
"secondary": {
"default": {
"backgroundImage": "linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 100%)"
},
"hover": {
"color": "rgba(255, 255, 255, 1)"
}
}
},
"dropdownMenu": {
"inner": {
"fontSize": "0.875rem",
"minWidth": "8.125rem"
},
"item": {
"backgroundColor": "transparent",
"color": "#696F6F",
"&:hover": {
"backgroundColor": "#E9F6F6",
"color": "rgba(0, 0, 0, 1)"
},
"&:focus": {
"backgroundColor": "#E9F6F6",
"color": "rgba(0, 0, 0, 1)"
},
"&[disabled]": {
"backgroundColor": "transparent",
"color": "#D2DDDD",
"cursor": "not-allowed"
}
},
"separator": {
"backgroundColor": "#E9F6F6"
}
},
"tables": {
"th": {
"color": "rgba(0, 0, 0, 0.55)",
"fontWeight": 500,
"textAlign": "left",
"borderBottomColor": "rgba(0, 0, 0, 1)",
"borderBottomWidth": "1px",
"borderBottomStyle": "solid"
},
"td": {
"textAlign": "left",
"padding": "1.5rem"
},
"tr": {
"default": {
"borderBottomColor": "rgba(0, 0, 0, 0.1)",
"borderBottomWidth": "1px",
"borderBottomStyle": "solid"
},
"error": {
"backgroundColor": "#FFE7E7",
"color": "#AF4636"
},
"warning": {
"backgroundColor": "#FFF2DC",
"color": "#B97F22"
},
"info": {
"backgroundColor": "#EDF3FE",
"color": "#106DD1"
},
"success": {
"backgroundColor": "#E3F0EC",
"color": "#00875C"
},
"clickable": {
"cursor": "pointer"
}
}
},
"cards": {
"default": {
"overflow": "hidden"
}
},
"modals": {
"backdrop": {
"backgroundColor": "rgba(0, 0, 0, 0.55)",
"zIndex": 999
},
"default": {
"zIndex": 999
},
"header": {
"backgroundColor": "rgba(255, 255, 255, 1)",
"paddingTop": "2rem",
"paddingRight": "3rem",
"paddingBottom": "2rem",
"paddingLeft": "2rem",
"subtitle": {
"color": "rgba(0, 0, 0, 0.7)",
"variant": "sm",
"margin": 0
}
},
"body": {
"color": "rgba(0, 0, 0, 1)",
"paddingRight": "3rem",
"paddingBottom": "2rem",
"paddingLeft": "2rem"
},
"footer": {
"backgroundColor": "rgba(255, 255, 255, 1)",
"borderTop": "solid rgba(0, 0, 0, 0.1)",
"children": {
"paddingRight": "2rem",
"paddingLeft": "2rem",
"paddingTop": "1rem",
"paddingBottom": "1.5rem"
},
"information": {
"backgroundColor": "#F3FAFA",
"paddingRight": "2rem",
"paddingLeft": "2rem",
"paddingTop": "1.5rem",
"paddingBottom": "2rem"
}
},
"gutter": "2rem",
"sizes": {
"xs": {
"width": "20rem"
},
"sm": {
"width": "28.125rem"
},
"md": {
"width": "37.5rem"
},
"lg": {
"width": "45.625rem"
},
"auto": {}
},
"cover": {}
},
"drawers": {
"backdrop": {
"backgroundColor": "rgba(0, 0, 0, 0.55)",
"zIndex": 999
},
"default": {
"zIndex": 999
},
"closeButton": {},
"title": {
"margin": 0,
"backgroundColor": "rgba(255, 255, 255, 1)",
"padding": "1.5rem 6rem 1.5rem 1.5rem"
},
"content": {
"padding": "1.5rem"
},
"footer": {
"backgroundColor": "rgba(255, 255, 255, 1)",
"padding": "1.5rem"
},
"sizes": {
"horizontal": {
"sm": {
"width": "25rem"
},
"md": {
"width": "34.375rem"
},
"lg": {
"width": "42.5rem"
}
},
"vertical": {
"sm": {
"height": "25rem"
},
"md": {
"height": "34.375rem"
},
"lg": {
"height": "42.5rem"
}
}
}
},
"loaders": {
"xs": "0.5rem",
"sm": "0.625rem",
"md": "0.9375rem",
"lg": "1.25rem"
},
"accordions": {
"padding": "1rem",
"wrapper": {
"backgroundColor": "rgba(255, 255, 255, 1)",
"transition": "300ms ease",
"border": "1px solid rgba(0, 0, 0, 0.1)"
},
"icon": {
"color": "rgba(0, 0, 0, 1)"
},
"content": {
"fontSize": "0.875rem"
},
"title": {
"color": "rgba(0, 0, 0, 1)",
"fontFamily": "welcome-font, sans-serif",
"fontWeight": 600,
"fontSize": "1rem",
"lineHeight": "1.125rem",
"letterSpacing": "-0.03125rem"
}
},
"swipers": {
"navigation": {
"bullet": {
"active": {
"backgroundColor": "#36D2C9"
},
"default": {
"backgroundColor": "#D2DDDD"
}
}
}
},
"labels": {
"color": "rgba(0, 0, 0, 0.55)",
"fontSize": "0.875rem",
"fontWeight": 500
},
"popovers": {
"default": {
"color": "rgba(255, 255, 255, 1)",
"fontWeight": 400,
"fontSize": "0.875rem",
"lineHeight": "1.125rem",
"letterSpacing": "-0.019rem",
"backgroundColor": "rgba(0, 0, 0, 1)",
"maxWidth": "43.75rem",
"zIndex": 1
},
"content": {
"display": "block",
"padding": "0.75rem"
},
"title": {
"color": "rgba(255, 255, 255, 1)",
"fontFamily": "welcome-font, sans-serif",
"fontWeight": 600,
"fontSize": "0.875rem",
"lineHeight": "1rem",
"letterSpacing": "-0.03125rem",
"padding": "0.75rem 0.75rem 0.25rem",
"borderBottomColor": "rgba(255, 255, 255, 0.17)",
"borderBottomWidth": "1px",
"borderBottomStyle": "solid"
}
},
"defaultFields": {
"default": {
"color": "rgba(0, 0, 0, 1)",
"fontSize": "0.875rem",
"lineHeight": "1rem",
"fontWeight": 400,
"backgroundColor": "rgba(255, 255, 255, 1)",
"borderColor": "rgba(0, 0, 0, 0.1)",
"borderWidth": "1px",
"borderStyle": "solid",
"outline": "none"
},
"sizes": {
"xs": {
"height": "1.5rem",
"paddingTop": "0.25rem",
"paddingRight": "0.5rem",
"paddingBottom": "0.25rem",
"paddingLeft": "0.5rem"
},
"sm": {
"height": "2rem",
"paddingTop": "0.5rem",
"paddingRight": "0.75rem",
"paddingBottom": "0.5rem",
"paddingLeft": "0.75rem"
},
"md": {
"height": "2.5rem",
"paddingTop": "0.75rem",
"paddingRight": "0.75rem",
"paddingBottom": "0.75rem",
"paddingLeft": "0.75rem"
},
"lg": {
"height": "3rem",
"paddingTop": "1rem",
"paddingRight": "0.75rem",
"paddingBottom": "1rem",
"paddingLeft": "0.75rem"
}
},
"iconPlacement": {
"xs": {
"left": "0.5rem",
"right": "0.5rem"
},
"sm": {
"left": "0.75rem",
"right": "0.75rem"
},
"md": {
"left": "0.75rem",
"right": "0.75rem"
},
"lg": {
"left": "0.75rem",
"right": "0.75rem"
}
},
"checkableField": {
"checked": {
"color": "black"
},
"disabled": {
"opacity": 0.4
}
},
"disabled": {
"backgroundColor": "#D2DDDD",
"color": "#696F6F",
"cursor": "not-allowed"
},
"placeholder": {
"color": "rgba(0, 0, 0, 0.4)"
},
"focused": {
"default": {
"boxShadow": "0 0 0 2px rgba(134, 228, 223, 1)",
"borderColor": "transparent"
},
"error": {
"boxShadow": "0 0 0 2px rgba(216, 124, 110, 1)"
},
"warning": {
"boxShadow": "0 0 0 2px rgba(228, 174, 86, 1)"
},
"success": {
"boxShadow": "0 0 0 2px rgba(69, 190, 152, 1)"
},
"info": {
"boxShadow": "0 0 0 2px rgba(75, 155, 241, 1)"
}
},
"checkablelabel": {
"default": {},
"checked": {
"color": "rgba(0, 0, 0, 1)",
"-webkit-text-stroke": "0.04em"
}
},
"select": {
"default": {
"maxHeight": "9.6875rem"
},
"existing": {
"color": "#D2DDDD",
"cursor": "not-allowed"
},
"highlighted": {
"backgroundColor": "#F3FAFA",
"cursor": "default"
},
"selectedAndHighlighted": {
"backgroundImage": "linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 100%)"
},
"selected": {
"color": "rgba(0, 0, 0, 1)",
"fontWeight": 600
},
"disabled": {
"color": "#8C9494",
"cursor": "not-allowed"
}
},
"fieldset": {
"border-width": "0"
}
},
"hints": {
"color": "rgba(0, 0, 0, 0.55)",
"fontWeight": 400,
"fontSize": "0.75rem",
"lineHeight": "0.875rem",
"letterSpacing": "-0.0125rem"
},
"checkboxes": {
"default": {
"width": "1rem",
"height": "1rem",
"flexShrink": 0
},
"disabled": {
"borderColor": "#8C9494"
},
"checked": {
"color": "rgba(0, 0, 0, 1)",
"backgroundColor": "#36D2C9",
"borderColor": "#36D2C9"
}
},
"toggles": {
"item": {
"default": {
"backgroundColor": "rgba(255, 255, 255, 1)",
"borderColor": "rgba(0, 0, 0, 0.1)",
"borderWidth": "1px",
"borderStyle": "solid",
"borderRadius": "1rem",
"&:focus": {
"borderColor": "#86E4DF",
"boxShadow": "0 0 0 2px rgba(134, 228, 223, 1)"
}
},
"sizes": {
"xs": {
"width": "1.75rem",
"height": "1rem",
"marginTop": "0.32rem !important"
},
"sm": {
"width": "2.25rem",
"height": "1.25rem",
"marginTop": "0.12rem ! important"
},
"md": {
"width": "2.75rem",
"height": "1.5rem",
"marginTop": "0 !important"
}
},
"checked": {
"backgroundColor": "#36D2C9",
"borderColor": "#36D2C9"
},
"disabled": {
"borderColor": "#8C9494",
"backgroundColor": "#D2DDDD"
}
},
"after": {
"default": {
"backgroundColor": "rgba(255, 255, 255, 1)",
"borderColor": "rgba(0, 0, 0, 0.4)",
"borderWidth": "1px",
"borderStyle": "solid",
"borderRadius": "50%"
},
"checked": {
"backgroundColor": "rgba(255, 255, 255, 1)",
"borderColor": "rgba(255, 255, 255, 1)"
},
"disabled": {
"borderColor": "transparent",
"backgroundColor": "#8C9494"
},
"sizes": {
"xs": {
"width": "0.75rem",
"height": "0.75rem"
},
"sm": {
"width": "1rem",
"height": "1rem"
},
"md": {
"width": "1.25rem",
"height": "1.25rem"
}
}
},
"icon": {
"position": {
"xs": {
"left": "2px",
"right": "2px"
},
"sm": {
"left": "4px",
"right": "4px"
},
"md": {
"left": "4px",
"right": "4px"
}
},
"sizes": {
"xs": {
"width": "0.625rem",
"height": "0.625rem",
"fontSize": "0.625rem"
},
"sm": {
"width": "0.75rem",
"height": "0.75rem",
"fontSize": "0.75rem"
},
"md": {
"width": "1rem",
"height": "1rem",
"fontSize": "1rem"
}
}
}
},
"dateTimePickerCommon": {
"item": {
"selected": {
"color": "rgba(0, 0, 0, 1)",
"fontWeight": 600,
"backgroundColor": "#36D2C9",
"outline": "none"
},
"today": {
"color": "rgba(0, 0, 0, 1)",
"fontWeight": 600
}
}
},
"textareas": {
"minHeight": "8.125rem",
"padding": "0.75rem"
},
"filedrops": {
"default": {
"minHeight": "12.5rem",
"borderStyle": "dashed"
},
"dragAccept": {},
"dragReject": {},
"disabled": {
"backgroundColor": "#E9F6F6"
}
},
"radios": {
"default": {
"width": "1rem",
"height": "1rem"
},
"checked": {
"color": "rgba(0, 0, 0, 1)",
"borderColor": "#36D2C9"
},
"checkedCenteredColor": {
"default": "#36D2C9",
"disabled": "#8C9494"
}
},
"radioTabs": {
"default": {
"&:hover": {
"backgroundColor": "#E9F6F6"
}
},
"checked": {
"backgroundColor": "#36D2C9",
"color": "rgba(0, 0, 0, 1)",
"borderColor": "#36D2C9",
"&:hover": {
"backgroundColor": "#86E4DF"
}
}
},
"sliders": {
"default": {
"backgroundColor": "#D2DDDD",
"backgroundImage": "linear-gradient(#36D2C9, #36D2C9)"
},
"selector": {
"backgroundColor": "rgba(0, 0, 0, 1)",
"borderRadius": "50%",
"border": "2px solid",
"disabled": {
"backgroundColor": "#8C9494"
}
},
"output": {
"tooltip": {
"backgroundColor": "rgba(0, 0, 0, 1)",
"border": "1px solid rgba(0, 0, 0, 0.7)}",
"color": "rgba(255, 255, 255, 1)"
}
},
"focused": {
"outline": "2px solid #36D2C9",
"disabled": {
"outline": "none"
}
},
"disabled": {
"backgroundImage": "linear-gradient(#8C9494, #8C9494)"
},
"rangeInput": {
"disabled": {
"backgroundColor": "#8C9494"
}
}
},
"states": {
"_": null,
"motionSafe": "@media (prefers-reduced-motion: no-preference)",
"motionReduce": "@media (prefers-reduced-motion: reduce)",
"first": "&:first-child",
"last": "&:last-child",
"odd": "&:odd",
"even": "&:even",
"visited": "&:visited",
"checked": "&:checked",
"focusWithin": "&:focus-within",
"hover": "&:hover",
"focus": "&:focus",
"focusVisible": "&:focus-visible",
"active": "&:active",
"disabled": "&:disabled, &[aria-disabled=true]",
"placeholder": "&::placeholder"
}
}