sitezump design guide
Generated from the component catalog. Every specimen below carries NO style leaves, so what you see is the theme.
Grid
background
(unset)
Aa
_PRIMARYBG
Aa
_SECONDARYBG
Aa
_TERTIARYBG
Aa
_QUATERNARYBG
Aa
_QUINARYBG
Aa
_SENARYBG
Aa
_SEPTENARYBG
Aa
_OCTONARYBG
Aa
_NONARYBG
Aa
_PRIMARYGRADBG
Aa
_SECONDARYGRADBG
Aa
_TERTIARYGRADBG
Aa
_QUATERNARYGRADBG
Aa
_QUINARYGRADBG
Aa
_SENARYGRADBG
Aa
_SEPTENARYGRADBG
Aa
_OCTONARYGRADBG
Aa
_NONARYGRADBG
Aa
padding
_NONE
Aa
_PADDINGONE
Aa
_PADDINGTWO
Aa
_PADDINGTHREE
Aa
_PADDINGFOUR
Aa
_PADDINGFIVE
Aa
_PADDINGSIX
Aa
borderRadius
_STRAIGHT
Aa
_SLIGHTROUND
Aa
_ROUND
Aa
_EXTRAROUND
Aa
_VERYROUND
Aa
_FULLROUND
Aa
border
_NONE
Aa
_LIGHT
Aa
_MEDIUM
Aa
_HEAVY
Aa
_EXTREME
Aa
_ULTRA
Aa
_MAXIMUM
Aa
boxShadow
_NONE
Aa
_DARKLOW
Aa
_DARKMEDIUM
Aa
_DARKHIGH
Aa
_LIGHTLOW
Aa
_LIGHTMEDIUM
Aa
_LIGHTHIGH
Aa
Text
primaryText
The quick brown fox
subText
The quick brown fox
labelText
The quick brown fox
paragraphText
The quick brown fox
lightPrimaryText
The quick brown fox
lightSubText
The quick brown fox
lightLabelText
The quick brown fox
lightParagraphText
The quick brown fox
coloredText1
The quick brown fox
coloredText2
The quick brown fox
coloredText3
The quick brown fox
coloredText4
The quick brown fox
coloredText5
The quick brown fox
primaryText
The quick brown fox
subText
The quick brown fox
labelText
The quick brown fox
paragraphText
The quick brown fox
lightPrimaryText
The quick brown fox
lightSubText
The quick brown fox
lightLabelText
The quick brown fox
lightParagraphText
The quick brown fox
coloredText1
The quick brown fox
coloredText2
The quick brown fox
coloredText3
The quick brown fox
coloredText4
The quick brown fox
coloredText5
The quick brown fox
data shapes
empty
long
A single unbroken token averyveryverylongunbrokenidentifierthatcannotwrap followed by more words than the column can hold
multiline
first line
second line
theme levers
textColor: _primaryText _subText _labelText _paragraphText _lightPrimaryText _lightSubText _lightLabelText _lightParagraphText _coloredText1 _coloredText2 _coloredText3 _coloredText4 _coloredText5
links (13 surfaces) via .comp.compText._textMarkdown<textColor> ._markdown ._links
color, font, margin, padding, text-decoration, text-decoration-color
variable: mDLinkColorPrimaryText
h1 (6 surfaces) via .comp.compText._textMarkdown<textColor> ._markdown ._h1
color, font, margin, padding, text-decoration, text-decoration-color
variable: mDHeading1ColorPrimaryText
h2 (6 surfaces) via .comp.compText._textMarkdown<textColor> ._markdown ._h2
color, font, margin, padding, text-decoration, text-decoration-color
variable: mDHeading2ColorPrimaryText
h3 (6 surfaces) via .comp.compText._textMarkdown<textColor> ._markdown ._h3
color, font, margin, padding, text-decoration, text-decoration-color
variable: mDHeading3ColorPrimaryText
h4 (6 surfaces) via .comp.compText._textMarkdown<textColor> ._markdown ._h4
color, font, margin, padding, text-decoration, text-decoration-color
variable: mDHeading4ColorPrimaryText
h5 (6 surfaces) via .comp.compText._textMarkdown<textColor> ._markdown ._h5
color, font, margin, padding, text-decoration, text-decoration-color
variable: mDHeading5ColorPrimaryText
+4 more sub-components: h6, p, (root), textContainer
UNPAINTED by this theme (56): (root).text-decoration, h1.color, h1.font, h1.margin, h1.padding, h1.text-decoration, h1.text-decoration-color, h2.color, h2.font, h2.margin, h2.padding, h2.text-decoration
Image
default
data shapes
missing
theme levers
(root) (7 surfaces)
background-color, border, border-radius, box-shadow, color, image-rendering, padding
variable: sliderLineColor
Button
default primary
default secondary
default tertiary
default quaternary
default quinary
outlined primary
outlined secondary
outlined tertiary
outlined quaternary
outlined quinary
smallOutlined primary
smallOutlined secondary
smallOutlined tertiary
smallOutlined quaternary
smallOutlined quinary
text primary
text secondary
text tertiary
text quaternary
text quinary
iconButton primary
iconButton secondary
iconButton tertiary
iconButton quaternary
iconButton quinary
iconPrimaryButton primary
iconPrimaryButton secondary
iconPrimaryButton tertiary
iconPrimaryButton quaternary
iconPrimaryButton quinary
data shapes
disabled
withIcon
longLabel
theme levers
designType: _outlined _smallOutlined _text _iconButton _iconPrimaryButton _fabButton _fabButtonMini _decorative _bigDesign1
colorScheme: _primary _secondary _tertiary _quaternary _quinary
(root) (20 surfaces)
background, border, border-color, border-radius, box-shadow, color, cursor, font, height, padding, width
variable: buttonBackgroundColorDefaultPrimary
shortcutHint (6 surfaces) via .comp.compButton<designType><colorScheme> ._shortcutHint
background, border-radius, color, font-size, margin, padding
variable: buttonShortcutHintBackgroundDefaultPrimary
icon (5 surfaces) via .comp.compButton<designType><colorScheme> ._icon
background, color, font-size
variable: buttonIconBackgroundColorDefaultPrimary
leftButtonIcon (4 surfaces) via .comp.compButton<designType><colorScheme> ._leftButtonIcon
border-radius, margin, padding, width
variable: buttonLeftIconBorderRadiusDefaultPrimary
rightButtonIcon (4 surfaces) via .comp.compButton<designType><colorScheme> ._rightButtonIcon
border-radius, margin, padding, width
variable: buttonRightIconBorderRadiusDefaultPrimary
leftButtonActiveImage (2 surfaces) via .comp.compButton<designType><colorScheme> ._leftButtonActiveImage
margin, padding
variable: buttonLeftActiveImageMarginDefaultPrimary
+3 more sub-components: leftButtonImage, rightButtonActiveImage, rightButtonImage
UNPAINTED by this theme (11): (root).background:disabled:hover, (root).box-shadow, (root).box-shadow:hover, (root).color:disabled:hover, (root).width, icon.background, icon.background:hover, leftButtonIcon.border-radius, leftButtonIcon.width, rightButtonIcon.border-radius, rightButtonIcon.width
Icon
default defaultIcon
default lightIcon
outlined defaultIcon
outlined lightIcon
filled defaultIcon
filled lightIcon
rounded defaultIcon
rounded lightIcon
theme levers
designType: _outlined _filled _rounded
colorScheme: _defaultIcon _lightIcon
(root) (6 surfaces)
background, border, border-color, border-radius, color, padding
variable: iconBackgroundRoundedDefaultDefaultIcon
TextBox
default primary
default secondary
default tertiary
default quaternary
default quinary
outlined primary
outlined secondary
outlined tertiary
outlined quaternary
outlined quinary
filled primary
filled secondary
filled tertiary
filled quaternary
filled quinary
bigDesign1 primary
bigDesign1 secondary
bigDesign1 tertiary
bigDesign1 quaternary
bigDesign1 quinary
editOnReq primary
editOnReq secondary
editOnReq tertiary
editOnReq quaternary
editOnReq quinary
data shapes
disabled
withValue
theme levers
designType: _outlined _filled _bigDesign1 _editOnReq
colorScheme: _primary _secondary _tertiary _quaternary _quinary
(root) (10 surfaces)
background, border, border-color, border-radius, box-shadow, color, font, height, padding
variable: textBoxValueBackgroundDefaultPrimary
shortcutHint (6 surfaces) via .comp.compTextBox<designType><colorScheme> ._shortcutHint
background, border-radius, color, font-size, margin, padding
variable: textBoxShortcutHintBackgroundDefaultPrimary
label (5 surfaces) via .comp.compTextBox<designType>._hasValue<colorScheme> ._label
color, font, letter-spacing, margin, text-transform
variable: textBoxValueLabelColorDefaultPrimary
comp.compTextBox<designType><colorScheme>._hasValue._hasError (3 surfaces) via .comp.compTextBox<designType><colorScheme>._hasError, .comp.compTextBox<designType><colorScheme>._isActive._hasError, .comp.compTextBox<designType><colorScheme>._hasValue._hasError
background, border-color, box-shadow
variable: textBoxErrorBackgroundDefaultPrimary
comp.compTextBox<designType><colorScheme>._hasValue._validationSuccess (3 surfaces) via .comp.compTextBox<designType><colorScheme>._validationSuccess, .comp.compTextBox<designType><colorScheme>._isActive._validationSuccess, .comp.compTextBox<designType><colorScheme>._hasValue._validationSuccess
background, border-color, box-shadow
variable: textBoxSuccessBackgroundDefaultPrimary
leftIcon (3 surfaces) via .comp.compTextBox<designType><colorScheme>._hasError ._leftIcon
color, font-size, padding
variable: textBoxErrorLeftIconColorDefaultPrimary
+11 more sub-components: rightIcon, input, placeholder, supportText, asterisk, comp.compTextBox<designType><colorScheme>._editMode, errorIcon, errorIcon._rightIcon, select, successIcon, successIcon._rightIcon
UNPAINTED by this theme (19): (root).background:hover, (root).box-shadow, comp.compTextBox<designType><colorScheme>._editMode.background:hover, comp.compTextBox<designType><colorScheme>._hasValue._hasError.background, comp.compTextBox<designType><colorScheme>._hasValue._hasError.border-color, comp.compTextBox<designType><colorScheme>._hasValue._hasError.box-shadow, comp.compTextBox<designType><colorScheme>._hasValue._validationSuccess.background, comp.compTextBox<designType><colorScheme>._hasValue._validationSuccess.border-color, comp.compTextBox<designType><colorScheme>._hasValue._validationSuccess.box-shadow, errorIcon._rightIcon.color, input.color:placeholder, input.font:placeholder
Link
default primary
default secondary
default tertiary
default quaternary
default quinary
underLine primary
underLine secondary
underLine tertiary
underLine quaternary
underLine quinary
underAboveLine primary
underAboveLine secondary
underAboveLine tertiary
underAboveLine quaternary
underAboveLine quinary
sideLines primary
sideLines secondary
sideLines tertiary
sideLines quaternary
sideLines quinary
theme levers
designType: _underLine _underAboveLine _sideLines
colorScheme: _primary _secondary _tertiary _quaternary _quinary
(root) (7 surfaces)
border, color, font, margin, padding, text-decoration, text-decoration-color
variable: iconBorderDefaultPrimary
comp.compLink<designType><colorScheme>._showLines (2 surfaces) via .comp.compLink<designType><colorScheme>:hover, .comp.compLink<designType><colorScheme>._showLines
border, text-decoration
variable: iconBorderShowLinesDefaultPrimary
comp.compLink._sideLines<colorScheme>._showLines (1 surfaces) via .comp.compLink._sideLines<colorScheme>:hover, .comp.compLink._sideLines<colorScheme>._showLines
border-color
variable: iconBorderColorShowLinesDefaultPrimary
UNPAINTED by this theme (1): (root).margin
Dropdown
default primary
default secondary
default tertiary
default quaternary
default quinary
outlined primary
outlined secondary
outlined tertiary
outlined quaternary
outlined quinary
filled primary
filled secondary
filled tertiary
filled quaternary
filled quinary
bigDesign1 primary
bigDesign1 secondary
bigDesign1 tertiary
bigDesign1 quaternary
bigDesign1 quinary
text primary
text secondary
text tertiary
text quaternary
text quinary
editOnReq primary
editOnReq secondary
editOnReq tertiary
editOnReq quaternary
editOnReq quinary
theme levers
designType: _outlined _filled _bigDesign1 _text _editOnReq
colorScheme: _primary _secondary _tertiary _quaternary _quinary
(root) (12 surfaces)
background, border, border-color, border-radius, box-shadow, color, font, height, padding, width
variable: dropdownBackgroundDefaultPrimary
dropdownContainer (9 surfaces) via .comp.compDropdown<designType>._isActive<colorScheme>, .comp.compDropdown<designType>._isActive<colorScheme> ._dropdownContainer, .comp.compDropdown<designType>._hasValue<colorScheme>, .comp.compDropdown<designType>._hasValue<colorScheme> ._dropdownContainer
background, border, border-color, border-radius, box-shadow, margin, max-height, overflow, padding
variable: dropdownBackgroundDropdownContainerValueActiveDefaultPrimary
dropdownSearchBox (8 surfaces) via .comp.compDropdown<designType><colorScheme> ._dropdownSearchBox
border, border-color, border-radius, color, height, padding, width
variable: dropdownBorderDropdownSearchBoxDefaultPrimary
dropdownItem (6 surfaces) via .comp.compDropdown<designType><colorScheme> ._dropdownItem
background, border-radius, color, font, margin, padding
variable: dropdownBackgroundDropdownItemDefaultPrimary
dropdownSearchBoxContainer (6 surfaces) via .comp.compDropdown<designType><colorScheme> ._dropdownSearchBoxContainer
background, border, border-color, border-radius, color, padding
variable: dropdownBackgroundDropdownSearchBoxContainerDefaultPrimary
label (5 surfaces) via .comp.compDropdown._hasValue<designType><colorScheme> ._label
color, font, letter-spacing, margin, text-transform
variable: dropdownColorLabelValueDefaultPrimary
+23 more sub-components: commonCheckbox, dropdownCheckIcon, dropdownItem._hover, leftIcon, rightIcon, checked, commonCheckbox._checked, comp.compDropdown<designType><colorScheme>._isActive._hasError, successIcon, supportText, asterisk, commonCheckbox.radio, comp.compDropdown<designType><colorScheme>._editMode, comp.compDropdown<designType><colorScheme>._hasError, comp.compDropdown<designType><colorScheme>._isActive._hasValue, dropdownItem._selected, errorIcon, errorIcon._rightIcon, input, placeholder, select, successIcon._rightIcon, thumb
UNPAINTED by this theme (35): (root).background:hover, (root).border:before, (root).box-shadow, checked.background, checked.border-color, commonCheckbox.border-color, commonCheckbox.height, commonCheckbox.width, commonCheckbox._checked.background, commonCheckbox._checked.border-color, commonCheckbox.radio.background, comp.compDropdown<designType><colorScheme>._editMode.background:hover
Menu
default primary
default secondary
default tertiary
default quaternary
default quinary
outlined primary
outlined secondary
outlined tertiary
outlined quaternary
outlined quinary
text primary
text secondary
text tertiary
text quaternary
text quinary
sides primary
sides secondary
sides tertiary
sides quaternary
sides quinary
topbottom primary
topbottom secondary
topbottom tertiary
topbottom quaternary
topbottom quinary
theme levers
designType: _outlined _text _sides _topbottom
colorScheme: _primary _secondary _tertiary _quaternary _quinary
(root) (11 surfaces)
background-color, border, border-radius, border-style, border-width, color, font, font-weight, padding, text-align, text-decoration
variable: menuBackgroundColorActiveOnlyDefaultPrimary
icon (7 surfaces) via .comp.compMenu<designType><colorScheme>._isActive ._icon
color, margin, padding
variable: menuColorIconActiveOnlyDefaultPrimary
comp.compMenu<designType><colorScheme> (6 surfaces) via .comp.compMenu<designType><colorScheme>, .comp.compMenu<designType><colorScheme>:visited
background-color, border, color, font, text-decoration
variable: menuBackgroundColorDefaultPrimary
comp.compMenu<designType><colorScheme>._isActive (4 surfaces) via .comp.compMenu<designType><colorScheme>:hover, .comp.compMenu<designType><colorScheme>._isActive
background-color, border, color, font
variable: menuBackgroundColorIsActiveActiveDefaultPrimary
comp.compMenu<designType><colorScheme>._disabled (3 surfaces) via .comp.compMenu<designType><colorScheme>._disabled, .comp.compMenu<designType><colorScheme>._disabled:visited
background-color, border, color
variable: menuBackgroundColorDisabledvisitedDefaultPrimary
comp.compMenu<designType>._quinary (1 surfaces) via .comp.compMenu<designType><colorScheme>._isActive, .comp.compMenu<designType><colorScheme>:hover, .comp.compMenu<designType>._secondary._isActive, .comp.compMenu<designType>._secondary:hover, .comp.compMenu<designType>._tertiary._isActive, .comp.compMenu<designType>._tertiary:hover, .comp.compMenu<designType>._quaternary._isActive, .comp.compMenu<designType>._quaternary:hover, .comp.compMenu<designType>._quinary._isActive, .comp.compMenu<designType>._quinary:hover
font-weight
variable: menuFontWeightQuinaryhoverActiveDefaultPrimary
UNPAINTED by this theme (25): (root).border, (root).border-style, (root).border-width, (root).font-weight, (root).text-align, (root).text-decoration, comp.compMenu<designType>._quinary.font-weight:hover, comp.compMenu<designType><colorScheme>.background-color:visited, comp.compMenu<designType><colorScheme>.border:hover, comp.compMenu<designType><colorScheme>.border:visited, comp.compMenu<designType><colorScheme>.font:visited, comp.compMenu<designType><colorScheme>.text-decoration:visited
Popup
background
(unset)
Aa
_PRIMARYBG
Aa
_SECONDARYBG
Aa
_TERTIARYBG
Aa
_QUATERNARYBG
Aa
_QUINARYBG
Aa
_SENARYBG
Aa
_SEPTENARYBG
Aa
_OCTONARYBG
Aa
_NONARYBG
Aa
_PRIMARYGRADBG
Aa
_SECONDARYGRADBG
Aa
_TERTIARYGRADBG
Aa
_QUATERNARYGRADBG
Aa
_QUINARYGRADBG
Aa
_SENARYGRADBG
Aa
_SEPTENARYGRADBG
Aa
_OCTONARYGRADBG
Aa
_NONARYGRADBG
Aa
designType
_design1
Aa
_design2
Aa
CheckBox
default primary
default secondary
default tertiary
default quaternary
default quinary
outlined primary
outlined secondary
outlined tertiary
outlined quaternary
outlined quinary
filled primary
filled secondary
filled tertiary
filled quaternary
filled quinary
theme levers
designType: _outlined _filled
colorScheme: _primary _secondary _tertiary _quaternary _quinary
commonCheckbox (4 surfaces) via .comp.compCheckbox<designType><colorScheme> .commonCheckbox
background, border, border-color, border-radius
variable: checkBoxBackgroundCommonCheckboxDefaultPrimary
commonCheckbox._checked (3 surfaces) via .comp.compCheckbox<designType><colorScheme> .commonCheckbox._checked
background, border, border-color
variable: checkBoxBackgroundCheckedDefaultPrimary
commonCheckbox._disabled (2 surfaces) via .comp.compCheckbox<designType><colorScheme> .commonCheckbox._disabled
background, border-color
variable: checkBoxBackgroundCommonCheckBoxDisabledDefaultPrimary
(root) (1 surfaces)
color
variable: checkBoxColorDefaultPrimary
label (1 surfaces) via .comp.compCheckbox<designType><colorScheme> label
font
variable: checkBoxFontDefaultPrimary
label._disabled (1 surfaces) via .comp.compCheckbox<designType><colorScheme> label._disabled
color
variable: checkBoxColorDisabledDefaultPrimary
+1 more sub-components: thumb
FileUpload
primary
secondary
tertiary
quaternary
quinary
theme levers
colorScheme: _primary _secondary _tertiary _quaternary _quinary
fileUploadText (12 surfaces) via .comp.compFileUpload._inline_design1 ._fileUploadText
border, border-bottom, border-color, border-left, border-right, border-top, color, flex, height, margin-right, padding-top, width
variable: fileuploadborderinlinedesign1Border
(root) (8 surfaces)
background, border, border-color, border-radius, flex-direction, height, justify-content, padding
variable: fileUploadTextBackgroundInlineDesignOneTextBackground
fileUploadButton (7 surfaces) via .comp.compFileUpload._primary ._fileUploadButton
background, border, border-radius, color, padding, width
variable: primaryFileUploadBackgroundColorforButtonBackground
subtext (3 surfaces) via .comp.compFileUpload._droparea_design3 ._subtext
bottom, color, font
variable: fileUploadBottomDropAreaDesign3
uploadIcon (3 surfaces) via .comp.compFileUpload._droparea_design1._primary ._uploadIcon, .comp.compFileUpload._droparea_design2._primary ._uploadIcon, .comp.compFileUpload._droparea_design3._primary ._uploadIcon, .comp.compFileUpload._only_icon_design1._primary ._uploadIcon, .comp.compFileUpload._only_icon_design2._primary ._uploadIcon
color, font-size, height
variable: primaryFileUploadIconColorDropareadesignIconColor
mainText (2 surfaces) via .comp.compFileUpload._droparea_design3 ._mainText
border-bottom, border-color
variable: fileUploadBorderDropAreaDesign3BorderBottom
+2 more sub-components: uploadIcon._upload_icon_1, uploadIcon._upload_icon_2
UNPAINTED by this theme (2): fileUploadText.border, fileUploadText.border-right
Popover
default
theme levers
(root) (8 surfaces)
background-color, border, border-radius, box-shadow
variable: popoverContainerBackgroundColor
UNPAINTED by this theme (8): (root).background-color, (root).background-color:before, (root).border, (root).border:before, (root).border-radius, (root).border-radius:before, (root).box-shadow, (root).box-shadow:before
ToggleButton
default gradient1
outlined gradient1
squared gradient1
bigknob gradient1
small gradient1
theme levers
designType: _outlined _squared _bigknob _small
colorScheme: _gradient1
(root) (6 surfaces)
background, border, border-color, border-radius, height, width
variable: primaryDefaultDesignOnToggleButtonDisabledBackgroundColor
knob (6 surfaces) via .comp.compToggleButton._default._primary._on, .comp.compToggleButton._outlined._primary._on, .comp.compToggleButton._squared._primary._on, .comp.compToggleButton._bigknob._primary._on, .comp.compToggleButton._small._primary._on, .comp.compToggleButton._outlined._primary ._knob
background, border-radius, box-shadow, height, margin, width
variable: primaryToggleCompBGColor
knob._withText (3 surfaces) via .comp.compToggleButton._default, .comp.compToggleButton._outlined, .comp.compToggleButton._bigknob, .comp.compToggleButton._bigknob ._knob, .comp.compToggleButton._default ._knob._withText, .comp.compToggleButton._outlined ._knob._withText, .comp.compToggleButton._bigknob ._knob._withText, .comp.compToggleButton._small ._knob._withText
border-radius, padding, width
variable: toggleCompRoundBorderWithWidth
comp.compToggleButton._small (1 surfaces) via .comp.compToggleButton._default, .comp.compToggleButton._squared, .comp.compToggleButton._bigknob, .comp.compToggleButton._small
background
variable: greyToggleCompBgColor
toggleButtonLabel (1 surfaces) via .comp.compToggleButton._default ._toggleButtonLabel, .comp.compToggleButton._outlined ._toggleButtonLabel, .comp.compToggleButton._squared ._toggleButtonLabel, .comp.compToggleButton._bigknob ._toggleButtonLabel, .comp.compToggleButton._small ._toggleButtonLabel, .comp.compToggleButton._default._on ._knob._withText ._toggleButtonLabel, .comp.compToggleButton._outlined._on ._knob._withText ._toggleButtonLabel, .comp.compToggleButton._squared._on ._knob._withText ._toggleButtonLabel, .comp.compToggleButton._bigknob._on ._knob._withText ._toggleButtonLabel, .comp.compToggleButton._small._on ._knob._withText ._toggleButtonLabel
color
variable: greyToggleCompTextColor
toggleButtonLabel._ontrack (1 surfaces) via .comp.compToggleButton._default._off ._toggleButtonLabel._ontrack
margin
variable: defaultToggleLabelMarginOnState
TextList
default
TextArea
default primary
default secondary
default tertiary
default quaternary
default quinary
outlined primary
outlined secondary
outlined tertiary
outlined quaternary
outlined quinary
filled primary
filled secondary
filled tertiary
filled quaternary
filled quinary
editOnReq primary
editOnReq secondary
editOnReq tertiary
editOnReq quaternary
editOnReq quinary
theme levers
designType: _outlined _filled _editOnReq
colorScheme: _primary _secondary _tertiary _quaternary _quinary
(root) (14 surfaces)
background, border, border-bottom, border-color, border-left, border-radius, border-right, border-top, box-shadow, color, font, height, padding
variable: textAreaBackgroundHasValuecolorSchemeValueDefaultPrimary
label (5 surfaces) via .comp.compTextArea<designType>._hasValue<colorScheme> ._label
color, font, letter-spacing, margin, text-transform
variable: textAreaColorLabelValueDefaultPrimary
comp.compTextArea<designType><colorScheme>._hasValue._hasError (2 surfaces) via .comp.compTextArea<designType><colorScheme>._hasError, .comp.compTextArea<designType><colorScheme>._isActive._hasError, .comp.compTextArea<designType><colorScheme>._hasValue._hasError
border-color, box-shadow
variable: textAreaBorderColorHasErrorValueActiveErrorDefaultPrimary
comp.compTextArea<designType><colorScheme>._hasValue._validationSuccess (2 surfaces) via .comp.compTextArea<designType><colorScheme>._validationSuccess, .comp.compTextArea<designType><colorScheme>._isActive._validationSuccess, .comp.compTextArea<designType><colorScheme>._hasValue._validationSuccess
background, border-color
variable: textAreaBackgroundValidationSuccessValueActiveDefaultPrimary
leftIcon (2 surfaces) via .comp.compTextArea<designType>._hasValue<colorScheme> ._leftIcon
color, padding
variable: textAreaColorLeftIconValueDefaultPrimary
rightIcon (2 surfaces) via .comp.compTextArea<designType>._hasValue<colorScheme> ._rightIcon
color, padding
variable: textAreaColorRightIconValueDefaultPrimary
+9 more sub-components: supportText, asterisk, comp.compTextArea<designType><colorScheme>._editMode, errorIcon, errorIcon._rightIcon, placeholder, successIcon, successIcon._rightIcon, textarea
UNPAINTED by this theme (18): (root).background:hover, (root).border-bottom, (root).border-left, (root).border-right, (root).border-top, (root).box-shadow, (root).height, comp.compTextArea<designType><colorScheme>._editMode.background:hover, comp.compTextArea<designType><colorScheme>._hasValue._hasError.border-color, comp.compTextArea<designType><colorScheme>._hasValue._hasError.box-shadow, comp.compTextArea<designType><colorScheme>._hasValue._validationSuccess.background, comp.compTextArea<designType><colorScheme>._hasValue._validationSuccess.border-color
Calendar
default primary
default secondary
default tertiary
default quaternary
default quinary
outlined primary
outlined secondary
outlined tertiary
outlined quaternary
outlined quinary
filled primary
filled secondary
filled tertiary
filled quaternary
filled quinary
bigDesign1 primary
bigDesign1 secondary
bigDesign1 tertiary
bigDesign1 quaternary
bigDesign1 quinary
text primary
text secondary
text tertiary
text quaternary
text quinary
editOnReq primary
editOnReq secondary
editOnReq tertiary
editOnReq quaternary
editOnReq quinary
theme levers
designType: _outlined _filled _bigDesign1 _text _editOnReq
colorScheme: _primary _secondary _tertiary _quaternary _quinary
(root) (10 surfaces)
Border, background, border, border-color, border-radius, box-shadow, color, font, height, padding
variable: calendarBorderDefaultDefaultPrimary
date (9 surfaces) via .comp.compCalendar<calendarDesignType><designType><colorScheme> ._date
background, border, border-color, border-radius, color, font, height, padding, width
variable: calendarBackgroundDateDefaultDefaultPrimary
ampmDropdown (6 surfaces) via .comp.compCalendar<calendarDesignType><designType><colorScheme> ._ampmDropdown
background, border, border-radius, color, font, padding
variable: calendarBackgroundAmPmDropdownDefaultDefaultPrimary
dayDropdown (6 surfaces) via .comp.compCalendar<calendarDesignType><designType><colorScheme> ._dayDropdown
background, border, border-radius, color, font, padding
variable: calendarBackgroundDayDropdownDefaultDefaultPrimary
hourDropdown (6 surfaces) via .comp.compCalendar<calendarDesignType><designType><colorScheme> ._hourDropdown
background, border, border-radius, color, font, padding
variable: calendarBackgroundHourDropdownDefaultDefaultPrimary
minuteDropdown (6 surfaces) via .comp.compCalendar<calendarDesignType><designType><colorScheme> ._minuteDropdown
background, border, border-radius, color, font, padding
variable: calendarBackgroundMinuteDropdownDefaultDefaultPrimary
+46 more sub-components: monthDropdown, secondDropdown, yearDropdown, calendarDropdownBody, rightArrow, calendarDropdownOption, calendarHeader, date._dateSelected._dateNotInMonth, leftArrow, calendarBodyMonths, calendarHeaderMonths, date._dateToday, date._dateWeekend, dropdownContainer, label, monthName, supportText, yearNumber, ampmDropdownWrapper, calendarDropdownOption._hovered, calendarDropdownOption._selected, calendarDropdownRow, calendarHeaderMonthsContainer, comp.compCalendar<designType><calendarDesignType>._hasValue<colorScheme>, date._dateNotInMonth, dayDropdownWrapper, hourDropdownWrapper, input, leftIcon, minuteDropdownWrapper, month, monthDropdownWrapper, placeholder, rightIcon, secondDropdownWrapper, yearDropdownWrapper, asterisk, calendarBodyBrowseMonths, calendarHeaderTitle, comp.compCalendar<designType><calendarDesignType><colorScheme>._editMode, comp.compCalendar<designType><calendarDesignType><colorScheme>._hasError, comp.compCalendar<designType><calendarDesignType><colorScheme>._isActive._hasError, comp.compCalendar<designType><calendarDesignType><colorScheme>._readOnly, errorIcon, select, successIcon
UNPAINTED by this theme (101): (root).Border, (root).border, (root).border-color, (root).border-radius, (root).box-shadow, (root).font, (root).height, (root).padding, ampmDropdownWrapper.margin, ampmDropdownWrapper.width, calendarBodyBrowseMonths.background, calendarBodyMonths.border-radius
FileSelector
default primary
default secondary
default tertiary
default quaternary
default quinary
button primary
button secondary
button tertiary
button quaternary
button quinary
browser primary
browser secondary
browser tertiary
browser quaternary
browser quinary
fileUploadWithProgressBar primary
fileUploadWithProgressBar secondary
fileUploadWithProgressBar tertiary
fileUploadWithProgressBar quaternary
fileUploadWithProgressBar quinary
theme levers
designType: button browser fileUploadWithProgressBar
colorScheme: _primary _secondary _tertiary _quaternary _quinary
(root) (12 surfaces)
backgroundColor, border, borderRadius, boxShadow, color, font, height, margin, minWidth, padding, stroke, width
variable: progressBarBackgroundColor
comp.compFileSelector._previewImage<colorScheme> (2 surfaces) via .comp.compFileSelector._previewImageContainer<colorScheme>, .comp.compFileSelector._previewImage<colorScheme>
height, width
variable: previewContainerHeight
UNPAINTED by this theme (7): (root).border, (root).boxShadow, (root).minWidth, (root).stroke, (root).width, comp.compFileSelector._previewImage<colorScheme>.height, comp.compFileSelector._previewImage<colorScheme>.width
Iframe
default
RadioButton
default primary
default secondary
default tertiary
default quaternary
default quinary
outlined primary
outlined secondary
outlined tertiary
outlined quaternary
outlined quinary
theme levers
designType: _outlined
colorScheme: _primary _secondary _tertiary _quaternary _quinary
layout: ROWLAYOUT ROWCOLUMNLAYOUT SINGLECOLUMNLAYOUT TWOCOLUMNSLAYOUT THREECOLUMNSLAYOUT FOURCOLUMNSLAYOUT FIVECOLUMNSLAYOUT
label (6 surfaces) via .comp.compRadioButton<designType><colorScheme> label
border, border-radius, font, height, padding, width
variable: radioButtonBorderDefaultPrimary
commonCheckbox (3 surfaces) via .comp.compRadioButton<designType><colorScheme> .commonCheckbox
background, border, border-color
variable: radioButtonBackgroundCommonCheckboxDefaultPrimary
(root) (2 surfaces)
color, gap
variable: radioButtonColorDefaultPrimary
commonCheckbox._disabled (2 surfaces) via .comp.compRadioButton<designType><colorScheme> .commonCheckbox._disabled
background, border-color
variable: radioButtonBackgroundDisabledDefaultPrimary
label._selected (2 surfaces) via .comp.compRadioButton<designType><colorScheme> label._selected
border-color, box-shadow
variable: radioButtonBorderColorSelectedDefaultPrimary
commonCheckbox._checked (1 surfaces) via .comp.compRadioButton<designType><colorScheme> .commonCheckbox._checked
border-color
variable: radioButtonBorderColorCheckedDefaultPrimary
+2 more sub-components: label._disabled, thumb
UNPAINTED by this theme (8): commonCheckbox._checked.border-color, label.border, label.border-radius, label.height, label.padding, label.width, label._selected.border-color, label._selected.box-shadow
PhoneNumber
default primary
default secondary
default tertiary
default quaternary
default quinary
outlined primary
outlined secondary
outlined tertiary
outlined quaternary
outlined quinary
filled primary
filled secondary
filled tertiary
filled quaternary
filled quinary
bigDesign1 primary
bigDesign1 secondary
bigDesign1 tertiary
bigDesign1 quaternary
bigDesign1 quinary
editOnReq primary
editOnReq secondary
editOnReq tertiary
editOnReq quaternary
editOnReq quinary
theme levers
designType: _outlined _filled _bigDesign1 _editOnReq
colorScheme: _primary _secondary _tertiary _quaternary _quinary
(root) (14 surfaces)
background, border, border-bottom, border-color, border-left, border-radius, border-right, border-top, box-shadow, color, font, height, padding
variable: phoneNumberBackgroundHasValuecolorSchemeValueDefaultPrimary
dropdownBody (7 surfaces) via .comp.compPhoneNumber<designType><colorScheme> ._dropdownBody
background, border, border-color, border-radius, box-shadow, color, padding
variable: phoneNumberBackgroundDropdownBodyDefaultPrimary
dropdownOption (6 surfaces) via .comp.compPhoneNumber<designType><colorScheme> ._dropdownBody ._dropdownOption
background, border-bottom, border-color, border-radius, color, padding
variable: phoneNumberBorderRadiusDropdownOptionDefaultPrimary
inputBox (5 surfaces) via .comp.compPhoneNumber<designType>._hasValue<colorScheme>, .comp.compPhoneNumber<designType>._hasValue<colorScheme> ._inputBox
border-color, border-left, color, font, padding
variable: phoneNumberBorderColorInputBoxValueDefaultPrimary
label (4 surfaces) via .comp.compPhoneNumber<designType>._hasValue<colorScheme> ._label
color, font, margin, padding-left
variable: phoneNumberColorLabelValueDefaultPrimary
arrowIcon (3 surfaces) via .comp.compPhoneNumber<designType><colorScheme> ._dropdownSelect ._arrowIcon
color, opacity, width
variable: phoneNumberColorArrowIconDefaultPrimary
+19 more sub-components: comp.compPhoneNumber<designType><colorScheme>._hasValue._hasError, comp.compPhoneNumber<designType><colorScheme>._hasValue._validationSuccess, dropdownOption._nextSeperator, input._inputBox, searchBoxContainer, dropdownOption._hovered, dropdownOption._selected, supportText, asterisk, comp.compPhoneNumber<designType><colorScheme>._editMode, dropdownSelect, errorIcon, errorIcon._leftIcon, leftIcon, searchIcon, select, selectedOption, successIcon, successIcon._leftIcon
UNPAINTED by this theme (25): (root).background:hover, (root).border-bottom, (root).border-left, (root).border-right, (root).border-top, (root).box-shadow, arrowIcon.opacity, comp.compPhoneNumber<designType><colorScheme>._editMode.background:hover, comp.compPhoneNumber<designType><colorScheme>._hasValue._hasError.background, comp.compPhoneNumber<designType><colorScheme>._hasValue._hasError.border-color, comp.compPhoneNumber<designType><colorScheme>._hasValue._hasError.box-shadow, comp.compPhoneNumber<designType><colorScheme>._hasValue._validationSuccess.background
Video
default primary
default secondary
default tertiary
default quaternary
default quinary
videoDesign1 primary
videoDesign1 secondary
videoDesign1 tertiary
videoDesign1 quaternary
videoDesign1 quinary
videoDesign2 primary
videoDesign2 secondary
videoDesign2 tertiary
videoDesign2 quaternary
videoDesign2 quinary
videoDesign3 primary
videoDesign3 secondary
videoDesign3 tertiary
videoDesign3 quaternary
videoDesign3 quinary
videoDesign4 primary
videoDesign4 secondary
videoDesign4 tertiary
videoDesign4 quaternary
videoDesign4 quinary
theme levers
colorScheme: _primary _secondary _tertiary _quaternary _quinary
designType: _videoDesign1 _videoDesign2 _videoDesign3 _videoDesign4
playAndFullscreenGrid (7 surfaces) via .comp.compVideo<designType><colorScheme> ._playAndFullscreenGrid
display, justify-content, padding-Left, padding-bottom, padding-right, padding-top, width
variable: videoDisplayPlayAndFullscreenGridDefaultPrimary
pauseIcon (5 surfaces) via .comp.compVideo<designType><colorScheme> ._pauseIcon
color, left, position, top, width
variable: videoColorPauseIconDefaultPrimary
playIcon (5 surfaces) via .comp.compVideo<designType><colorScheme> ._playIcon
color, left, position, top, width
variable: videoColorPlayIconDefaultPrimary
playAndVolumeGrid (4 surfaces) via .comp.compVideo<designType><colorScheme> ._playAndVolumeGrid
align-items, display, gap, height
variable: videoAlignItemsPlayAndVolumeGridDefaultPrimary
volumeControls (4 surfaces) via .comp.compVideo<designType><colorScheme> ._volumeControls
left, position, top, z-index
variable: videoLeftVolumeControlsDefaultPrimary
fullScreen (2 surfaces) via .comp.compVideo<designType><colorScheme> ._fullScreen
color, width
variable: videoColorFullScreenDefaultPrimary
+10 more sub-components: input[type="range"], input[type=range], pip, pipAndFullScreenGrid, progressBar, progressBarContainer, volumeButton, time, toolTip, videoControlsContainer
UNPAINTED by this theme (38): fullScreen.color, fullScreen.width, input[type="range"].accent-color, input[type="range"].height, input[type=range].accent-color, input[type=range].height, pauseIcon.color, pauseIcon.left, pauseIcon.position, pauseIcon.top, pauseIcon.width, pip.color
Tabs
default primary
default secondary
default tertiary
default quaternary
default quinary
line primary
line secondary
line tertiary
line quaternary
line quinary
highlight primary
highlight secondary
highlight tertiary
highlight quaternary
highlight quinary
underLine primary
underLine secondary
underLine tertiary
underLine quaternary
underLine quinary
theme levers
designType: _line _highlight _underLine
colorScheme: _primary _secondary _tertiary _quaternary _quinary
tabHighlighter (6 surfaces) via .comp.compTabs<designType><colorScheme> > .tabsContainer > .tabHighlighter
background, border, border-color, border-radius, box-shadow, transform
variable: tabsBackgroundTabHighlighterDefaultPrimary
tabDiv (4 surfaces) via .comp.compTabs<designType><colorScheme> > .tabsContainer > .tabDiv
color, font, gap, padding
variable: tabsColorTabDivDefaultPrimary
tabGridDiv (2 surfaces) via .comp.compTabs<designType><colorScheme> > .tabGridDiv
background, padding
variable: tabsBackgroundTabGridDivDefaultPrimary
tabsContainer (2 surfaces) via .comp.compTabs<designType><colorScheme> .tabsContainer
background, gap
variable: tabsBackgroundTabsContainerDefaultPrimary
tabDiv._active (1 surfaces) via .comp.compTabs._line<colorScheme> > .tabsContainer > .tabDiv._active, .comp.compTabs<designType><colorScheme> > .tabsContainer > .tabDiv._active, .comp.compTabs._underLine<colorScheme> > .tabsContainer > .tabDiv._active
color
variable: tabsColorActiveDefaultPrimary
tabsSeperator (1 surfaces) via .comp.compTabs<designType><colorScheme>._horizontal > .tabsContainer > .tabsSeperator
border
variable: tabsBorderHorizontalTabsSeperatorDefaultPrimary
ProgressBar
default
theme levers
(root) (3 surfaces)
font, padding-left, padding-right
variable: DefaultDesignProgressBarTextFont
progress (3 surfaces) via .comp.compProgressBar._default._primary ._progress
background, border-radius, color
variable: primaryDefaultDesignProgressBarProgressBg
bottom (2 surfaces) via .comp.compProgressBar._default._primary > ._top, .comp.compProgressBar._default._primary > ._bottom
color, padding-top
variable: primaryDefaultDesignProgressBarOutsideTextColor
circular_progres_text_bg (2 surfaces) via .comp.compProgressBar._circular._primary ._circular_progres_text_bg
fill, r
variable: primaryCircularDesignProgressBarTextBackgroundColor
progress._bottom (2 surfaces) via .comp.compProgressBar._default ._progress._top, .comp.compProgressBar._default ._progress._bottom, .comp.compProgressBar._striped ._progress._top, .comp.compProgressBar._striped ._progress._bottom
color, padding-bottom
variable: progressBarDarkFontColor
track (2 surfaces) via .comp.compProgressBar._default ._track, .comp.compProgressBar._striped ._track
background, height
variable: progressBarBackgroundColor
+7 more sub-components: circular_label, circular_progress_indicator, circular_track, progress._left, progress._right, progress._top, top
UNPAINTED by this theme (1): (root).font
Stepper
primary
secondary
tertiary
quaternary
quinary
theme levers
colorScheme: _primary _secondary _tertiary _quaternary _quinary
line (11 surfaces) via .comp.compStepper._default._primary ._listItem ._line
background, border, height, margin, margin-bottom, margin-left, margin-right, margin-top, min-height, min-width, width
variable: primaryStepperStepLineColorHorizontalDesignDefault
step (10 surfaces) via .comp.compStepper._pills._primary ._step
background-color, border, border-color, border-radius, box-shadow, color, font, height, margin, width
variable: primaryStepperStepBackgroundColorDefaultStateDesignPills
listItem (7 surfaces) via .comp.compStepper._rectangle_arrow._primary ._listItem
background, background-color, border, border-radius, height, margin, padding
variable: primaryStepperStepBackgroundColorDefaultStateDesignRectangleArrow
listItem._active (5 surfaces) via .comp.compStepper._rectangle_arrow._primary ._listItem._active
background, background-color, border, border-radius, padding
variable: primaryStepperStepBackgroundColorActiveStateDesignRectangleArrow
step._active (5 surfaces) via .comp.compStepper._big_circle._primary ._step._active
background-color, border, border-color, color, font
variable: primaryStepperStepBackgroundColorActiveStateDesignBigCircle
step._done (5 surfaces) via .comp.compStepper._default._primary ._step._done
background-color, border, border-color, color, font
variable: primaryStepperStepBackgroundColorDoneStateDesignDefault
+11 more sub-components: (root), line._active, line._activeBeforeLine, line._done, listItem._done, title, title._active, title._done, itemContainer, listItem._nextItem, listItem._previousItem
UNPAINTED by this theme (28): line.border, line.margin, line._active.background, line._active.border, line._active.margin, line._activeBeforeLine.background, line._activeBeforeLine.border, line._activeBeforeLine.margin, line._done.background, line._done.border, line._done.margin, listItem.border