Buttons Theme Settings

The examples in this setting are the default theme's values.

fillStyle

Possible values are: FILLED, OUTLINED

"fillStyle" : "OUTLINED",

borderRadiusSm

CSS variable: --lia-bs-btn-border-radius-sm

"borderRadiusSm" : "100vw",

borderRadius

CSS variable: --lia-bs-btn-border-radius

"borderRadius" : "100vw",

borderRadiusLg

CSS variable: --lia-bs-btn-border-radius-lg

"borderRadiusLg" : "100vw",

paddingX

CSS variable: --lia-bs-btn-padding-x

"paddingX" : "12px",

paddingXLg

CSS variable: --lia-bs-btn-padding-x-lg

"paddingXLg" : "16px",

paddingXHero

CSS variable: --lia-btn-padding-x-hero

"paddingXHero" : "60px",

fontStyle

CSS variable: --lia-btn-font-style. Possible values are: ITALIC, NORMAL

"fontStyle" : "NORMAL",

fontWeight

CSS variable: --lia-bs-btn-font-weight

"fontWeight" : "700",

textTransform

CSS variable: --lia-btn-text-transform.

Possible values are: NONE, CAPITALIZE, UPPERCASE, LOWERCASE, FULL_WIDTH, FULL_SIZE_KANA

"textTransform" : "NONE",

disabledOpacity

CSS variable: --lia-bs-btn-disabled-opacity

"disabledOpacity" : 0.5,

primaryTextColor

CSS variable: --lia-btn-primary-text-color

"primaryTextColor" : "var(--lia-bs-primary)",

primaryTextHoverColor

CSS variable: --lia-btn-primary-text-hover-color

"primaryTextHoverColor" : "hsl(var(--lia-bs-primary-h), var(--lia-bs-primary-s), calc(var(--lia-bs-primary-l) * 0.95))",

primaryTextActiveColor

CSS variable: --lia-btn-primary-text-active-color

"primaryTextActiveColor" : "hsl(var(--lia-bs-primary-h), var(--lia-bs-primary-s), calc(var(--lia-bs-primary-l) * 0.9))",

primaryBgColor

CSS variable: --lia-btn-primary-bg-color

"primaryBgColor" : "transparent",

primaryBgHoverColor

CSS variable: --lia-btn-primary-bg-hover-color

"primaryBgHoverColor" : "hsla(var(--lia-bs-primary-h), var(--lia-bs-primary-s), var(--lia-bs-primary-l), 0.15)",

primaryBgActiveColor

CSS variable: --lia-btn-primary-bg-active-color

"primaryBgActiveColor" : "hsla(var(--lia-bs-primary-h), var(--lia-bs-primary-s), var(--lia-bs-primary-l), 0.25)",

primaryBorder

CSS variable: --lia-btn-primary-border

"primaryBorder" : "1px solid var(--lia-bs-primary)",

primaryBorderHover

CSS variable: --lia-btn-primary-border-hover

"primaryBorderHover" : "1px solid var(--lia-bs-primary)",

primaryBorderActive

CSS variable: --lia-btn-primary-border-active

"primaryBorderActive" : "1px solid var(--lia-bs-primary)",

primaryBorderFocus

CSS variable: --lia-btn-primary-border-focus

"primaryBorderFocus" : "1px solid var(--lia-bs-white)",

primaryBoxShadowFocus

CSS variable: --lia-btn-primary-box-shadow-focus

"primaryBoxShadowFocus" : "inset 0 0 0 1px var(--lia-bs-primary), 0 0 0 1px var(--lia-bs-primary), 0 0 0 4px hsla(var(--lia-bs-primary-h), var(--lia-bs-primary-s), var(--lia-bs-primary-l), 0.2)",

secondaryTextColor

CSS variable: --lia-btn-secondary-text-color

"secondaryTextColor" : "var(--lia-bs-gray-900)",

secondaryTextHoverColor

CSS variable: --lia-btn-secondary-text-hover-color

"secondaryTextHoverColor" : "hsl(var(--lia-bs-gray-900-h), var(--lia-bs-gray-900-s), calc(var(--lia-bs-gray-900-l) * 0.95))",

secondaryTextActiveColor

CSS variable: --lia-btn-secondary-text-active-color

"secondaryTextActiveColor" : "hsl(var(--lia-bs-gray-900-h), var(--lia-bs-gray-900-s), calc(var(--lia-bs-gray-900-l) * 0.9))",

secondaryBgColor

CSS variable: --lia-btn-secondary-bg-color

"secondaryBgColor" : "transparent",

secondaryBgHoverColor

CSS variable: --lia-btn-secondary-bg-hover-color

"secondaryBgHoverColor" : "hsla(var(--lia-bs-black-h), var(--lia-bs-black-s), var(--lia-bs-black-l), 0.15)",

secondaryBgActiveColor

CSS variable: --lia-btn-secondary-bg-active-color

"secondaryBgActiveColor" : "hsla(var(--lia-bs-black-h), var(--lia-bs-black-s), var(--lia-bs-black-l), 0.25)",

secondaryBorder

CSS variable: --lia-btn-secondary-border

"secondaryBorder" : "1px solid hsla(var(--lia-bs-black-h), var(--lia-bs-black-s), var(--lia-bs-black-l), 0.15)",

secondaryBorderHover

CSS variable: --lia-btn-secondary-border-hover

"secondaryBorderHover" : "1px solid hsla(var(--lia-bs-black-h), var(--lia-bs-black-s), var(--lia-bs-black-l), 0.15)",

secondaryBorderActive

CSS variable: --lia-btn-secondary-border-active

"secondaryBorderActive" : "1px solid hsla(var(--lia-bs-black-h), var(--lia-bs-black-s), var(--lia-bs-black-l), 0.15)",

secondaryBorderFocus

CSS variable: --lia-btn-secondary-border-focus

"secondaryBorderFocus" : "1px solid transparent",

secondaryBoxShadowFocus

CSS variable: --lia-btn-secondary-box-shadow-focus

"secondaryBoxShadowFocus" : "0 0 0 1px var(--lia-bs-primary), 0 0 0 4px hsla(var(--lia-bs-primary-h), var(--lia-bs-primary-s), var(--lia-bs-primary-l), 0.2)",

tertiaryTextColor

CSS variable: --lia-btn-tertiary-text-color

"tertiaryTextColor" : "var(--lia-bs-gray-900)",

tertiaryTextHoverColor

CSS variable: --lia-btn-tertiary-text-hover-color

"tertiaryTextHoverColor" : "hsl(var(--lia-bs-gray-900-h), var(--lia-bs-gray-900-s), calc(var(--lia-bs-gray-900-l) * 0.95))",

tertiaryTextActiveColor

CSS variable: --lia-btn-tertiary-text-active-color

"tertiaryTextActiveColor" : "hsl(var(--lia-bs-gray-900-h), var(--lia-bs-gray-900-s), calc(var(--lia-bs-gray-900-l) * 0.9))",

tertiaryBgColor

CSS variable: --lia-btn-tertiary-bg-color

"tertiaryBgColor" : "transparent",

tertiaryBgHoverColor

CSS variable: --lia-btn-tertiary-bg-hover-color

"tertiaryBgHoverColor" : "transparent",

tertiaryBgActiveColor

CSS variable: --lia-btn-tertiary-bg-active-color

"tertiaryBgActiveColor" : "hsla(var(--lia-bs-black-h), var(--lia-bs-black-s), var(--lia-bs-black-l), 0.04)",

tertiaryBorder

CSS variable: --lia-btn-tertiary-border

"tertiaryBorder" : "1px solid transparent",

tertiaryBorderHover

CSS variable: --lia-btn-tertiary-border-hover

"tertiaryBorderHover" : "1px solid hsla(var(--lia-bs-black-h), var(--lia-bs-black-s), var(--lia-bs-black-l), 0.15)",

tertiaryBorderActive

CSS variable: --lia-btn-tertiary-border-active

"tertiaryBorderActive" : "1px solid hsla(var(--lia-bs-black-h), var(--lia-bs-black-s), var(--lia-bs-black-l), 0.15)",

tertiaryBorderFocus

CSS variable: --lia-btn-tertiary-border-focus

"tertiaryBorderFocus" : "1px solid transparent",

tertiaryBoxShadowFocus

CSS variable: --lia-btn-tertiary-box-shadow-focus

"tertiaryBoxShadowFocus" : "0 0 0 1px var(--lia-bs-primary), 0 0 0 4px hsla(var(--lia-bs-primary-h), var(--lia-bs-primary-s), var(--lia-bs-primary-l