In order to understand what a theme is, we need to understand first that the definition of colors, sizes, shapes... is an intrinsic part of a design system. Since these parameters are essential for guaranteeing accessibility and a good user experience, having the ability of changing them, might go frontally against the intentions of the design system.
This is precisely what themes are, just custom defined objects that allow users to override fundamental decisions of Halstack Design System. They are a way of escaping the restrictions imposed by the Design System, and using themes could result in applications not being compliant with the Halstack guidelines, or even introducing many different types of accessibility issues if not used carefully.
Typically, you would create a Halstack Design System application, and after that, only if there is a white-labeling requirement, we would apply a theme on top of the base application. This, and only this, is the whole purpose of using themes.
Different theming strategies
As explained in the previous section, themes are basically a list of properties that allow you to override fundamental decisions of the design system. Based on the amount of decisions that can be overridden, Halstack Design System has two different theming strategies:
Opinionated theme. This theming strategy lets you change some decisions of the design system, but is still opinionated about the ones we consider fundamental. The list of configurable properties is small, but it applies at the component level. You can generate the theme object using our opinionated theme generator.
Advanced theme. This theming strategy lets you change most of the design decisions of the design system (all the design tokens), trying to be as little opinionated as possible. Have in mind that it is impossible to make the components 100% configurable without writing actual code, since some design decisions are structural to the component. The list of configurable properties is large, and it applies at the component level. You can generate the theme object using our advanced theme generator.
Opinionated theme inputs list
Tokens in the second column, which names are in bold, will have the value that results from applying the transformation indicated in brackets to the 'Theme input'. (If nothing, they will have the same value as the 'Theme input').
Theme inputs value must be hexadecimal without alpha channel.
Accordion
Theme Input
Tokens (calculation)
Accent color
arrowColor
iconColor
focusBorderColor
hoverBackgroundColor (16% of opacity)
Font color
assistiveTextFontColor
titleLabelFontColor
Button
Theme Input
Tokens (calculation)
Base color
primaryBackgroundColor
secondaryFontColor
secondaryBorderColor
secondaryHoverBackgroundColor
textFontColor
primaryHoverBackgroundColor (-8% of lightness)
primaryActiveBackgroundColor (-18% of lightness)
secondaryActiveBackgroundColor (-18% of lightness)
textHoverBackgroundColor (+57% of lightness)
textActiveBackgroundColor (+52% of lightness)
Primary font color
primaryFontColor
Secondary hover font color
secondaryHoverFontColor
Checkbox
Theme Input
Tokens (calculation)
Base color
backgroundColorChecked
borderColor
hoverBackgroundColorChecked (-15% of lightness)
hoverBorderColor (-15% of lightness)
Check color
checkColor
Font color
fontColor
Chip
Theme Input
Tokens (calculation)
Base color
backgroundColor
Font color
fontColor
iconColor
Date Input
Theme Input
Tokens (calculation)
Selected date background color
pickerSelectedDateBackgroundColor
pickerHoverDateBackgroundColor (34% of opacity)
Selected date font color
pickerSelectedDateColor
Dropdown
Theme Input
Tokens (calculation)
Base color
buttonBackgroundColor
hoverButtonBackgroundColor (34% of opacity)
activeButtonBackgroundColor (70% of opacity)
hoverOptionBackgroundColor (34% of opacity)
activeOptionBackgroundColor (70% of opacity)
Font color
buttonFontColor
caretIconColor
buttonIconColor
Option font color
optionFontColor
optionIconColor
File input
Theme Input
Tokens (calculation)
Font color
labelFontColor
helperTextFontColor
dropLabelFontColor
fileNameFontColor
Theme Input
Tokens (calculation)
Base color
backgroundColor
Font color
bottomLinksFontColor
copyrightFontColor
socialLinksColor
Accent color
bottomLinksDividerColor
Logo
logo
Header
Theme Input
Tokens (calculation)
Base color
backgroundColor
Accent color
underlinedColor
Font color
hamburguerFontColor
Menu base color
menuBackgroundColor
Hamburguer color
hamburguerIconColor
hamburguerHoverColor (16% of opacity)
Logo
logo
Responsive logo
logoResponsive
Content color
contentColor
Paginator
Theme Input
Tokens (calculation)
Base color
backgroundColor
Font color
fontColor
Progress bar
Theme Input
Tokens (calculation)
Base color
totalLineColor
Accent color
trackLineColor
Font color
labelFontColor
valueFontColor
helperTextFontColor
Radio Group
Theme Input
Tokens (calculation)
Base color
radioInputColor
Font color
labelFontColor
helperTextFontColor
radioInputLabelFontColor
Select
Theme Input
Tokens (calculation)
Selected option background color
selectedListOptionBackgroundColor
selectedHoverListOptionBackgroundColor (-5% of lightness)
selectedActiveListOptionBackgroundColor (-10% of lightness)
Font color
listOptionFontColor
valueFontColor
labelFontColor
helperTextFontColor
placeholderFontColor (50% of opacity)
collapseIndicatorColor
Sidenav
Theme Input
Tokens (calculation)
Base color
backgroundColor
Slider
Theme Input
Tokens (calculation)
Base color
thumbBackgroundColor
tickBackgroundColor
trackLineColor
hoverThumbBackgroundColor (-15% of lightness)
activeThumbBackgroundColor (-15% of lightness)
totalLineColor (34% of opacity)
Font color
labelFontColor
helperTextFontColor
limitValuesFontColor
Spinner
Theme Input
Tokens (calculation)
Base color
totalCircleColor
Accent color
trackCircleColor
Font color
labelFontColor
progressValueFontColor
Switch
Theme Input
Tokens (calculation)
Checked base color
checkedTrackBackgroundColor
disabledCheckedTrackBackgroundColor (34% of opacity)
Table
Theme Input
Tokens (calculation)
Base color
headerBackgroundColor
Header font color
headerFontColor
sortIconColor
Cell font color
dataFontColor
Tabs
Theme Input
Tokens (calculation)
Base color
selectedFontColor
selectedIconColor
selectedUnderlineColor
focusOutline
hoverBackgroundColor (+58% of lightness)
pressedBackgroundColor (+53% of lightness)
Text input
Theme Input
Tokens (calculation)
Font color
labelFontColor
helperTextFontColor
valueFontColor
actionIconColor
hoverActionIconColor
focusActionIconColor
activeActionIconColor
suffixColor (50% of opacity)
prefixColor (50% of opacity)
placeholderFontColor (50% of opacity)
Toggle group
Theme Input
Tokens (calculation)
Selected base color
selectedBackgroundColor
unselectedActiveBackgroundColor
selectedHoverBackgroundColor (-8% of lightness)
selectedActiveBackgroundColor (-18% of lightness)
selectedDisabledBackgroundColor (+57% of lightness)