Themes
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.
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 which will be explained below:
- Opinionated theme.
- Advanced 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.
information
We strongly recommend using the opinionated theme generator to create the theme, but you can also create it yourself from scratch.
Either through the theme-generator or by creating it from scratch, you will have to build a theme containing as many objects as components you want to customize. The props of each component are a key-value pair where:
- key: Corresponds to the 'Theme input' column of the tables that you can see in the Opinionated theme input list section.
- value: The color, must be hexadecimal without alpha channel.
In the opinionated theme we must take into account that some of the colours that affect the component will be calculated based on the theme inputs of the component. As you can see as follows:
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.
| Theme Input | Tokens (calculation) |
|---|---|
| Base color | primaryBackgroundColorsecondaryFontColorsecondaryBorderColorsecondaryHoverBackgroundColortextFontColorprimaryHoverBackgroundColor (-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 |
| Theme Input | Tokens (calculation) |
|---|---|
| Accent color | selectedMenuItemBackgroundColorhoverSelectedMenuItemBackgroundColor (-5% of lightness)activeSelectedMenuItemBackgroundColor (-5% of lightness) |
| Base color | backgroundColorhoverMenuItemBackgroundColor (-5% of lightness)activeMenuItemBackgroundColor (-5% of lightness) |
| Font color | menuItemFontColorsectionFontColor |
| Icon color | iconColor |
| Theme Input | Tokens (calculation) |
|---|---|
| Base color | pickerSelectedBackgroundColorpickerCurrentYearFontColorpickerActiveBackgroundColor (-8% of lightness)pickerHeaderActiveBackgroundColor (-8% of lightness)pickerHoverBackgroundColor (+52% lightness)pickerCurrentDateBorderColor (+42% lightness)pickerHeaderHoverBackgroundColor (+52% lightness) |
| Selected font color | pickerSelectedFontColorpickerActiveFontColorpickerHeaderActiveFontColor |
| Theme Input | Tokens (calculation) |
|---|---|
| Base color | buttonBackgroundColorhoverButtonBackgroundColor (-5% of lightness)activeButtonBackgroundColor (-12% of lightness)hoverOptionBackgroundColor (-5% of lightness)activeOptionBackgroundColor (-20% of lightness) |
| Font color | buttonFontColorbuttonIconColorcaretIconColor |
| Option font color | optionFontColoroptionIconColor |
| Theme Input | Tokens (calculation) |
|---|---|
| Base color | backgroundColor |
| Font color | bottomLinksFontColorcopyrightFontColorsocialLinksColor |
| Accent color | bottomLinksDividerColor |
| Logo | logo |
| Theme Input | Tokens (calculation) |
|---|---|
| Base color | backgroundColor |
| Accent color | underlinedColor |
| Font color | hamburguerFontColor |
| Menu base color | menuBackgroundColor |
| Hamburguer color | hamburguerIconColorhamburguerHoverColor (+90% of lightness) |
| Logo | logo |
| Logo responsive | logoResponsive |
| Content color | contentColor |
| Overlay color | overlayColor |
| Theme Input | Tokens (calculation) |
|---|---|
| Base color | selectedFontColorunselectedFontColorselectedIconColorunselectedIconColorhoverBackgroundColor (+55% of lightness)pressedBackgroundColor (+50% of lightness) |
| Accent color | selectedUnderlineColor |
| Theme Input | Tokens (calculation) |
|---|---|
| Accent color | hoverFontColor |
| Font color | fontColor |
| Theme Input | Tokens (calculation) |
|---|---|
| Selected option background color | selectedListOptionBackgroundColorselectedHoverListOptionBackgroundColor (-5% of lightness)selectedActiveListOptionBackgroundColor (-15% of lightness) |
| Font color | valueFontColorlabelFontColorhelperTextFontColorplaceholderFontColor (+30% of lightness)collapseIndicatorColor |
| Option font color | listOptionFontColor |
| Hover border color | hoverInputBorderColor |
| Theme Input | Tokens (calculation) |
|---|---|
| Base color | backgroundColor |
| Theme Input | Tokens (calculation) |
|---|---|
| Base color | thumbBackgroundColorfocusThumbBackgroundColortickBackgroundColortrackLineColorhoverThumbBackgroundColor (-15% of lightness)activeThumbBackgroundColor (-15% of lightness) |
| Total line color | totalLineColor |
| Font color | labelFontColorhelperTextFontColorlimitValuesFontColor |
| Theme Input | Tokens (calculation) |
|---|---|
| Font color | labelFontColorhelperTextFontColorvalueFontColoractionIconColorhoverActionIconColorfocusActionIconColoractiveActionIconColorsuffixColor (+40% of lightness)prefixColor (+40% of lightness)placeholderFontColor (+30% of lightness) |
| Hover border color | hoverBorderColor |
| Theme Input | Tokens (calculation) |
|---|---|
| Selected base color | selectedBackgroundColorunselectedActiveBackgroundColorselectedHoverBackgroundColor (-8% of lightness)selectedActiveBackgroundColor (-18% of lightness)selectedDisabledBackgroundColor (+57% of lightness)selectedDisabledFontColor (+42% of lightness) |
| Selected font color | selectedFontColor |
| Unselected base color | unselectedBackgroundColorunselectedHoverBackgroundColor (-10% of lightness) |
| Unselected font color | unselectedFontColor |
| Theme Input | Tokens (calculation) |
|---|---|
| Base color | selectedStepBackgroundColorselectedStepBorderColor |
| Selected step font color | selectedStepFontColor |
| Font color | visitedLabelFontColorselectedLabelFontColorvisitedHelperTextFontColorselectedHelperTextFontColorunvisitedStepBorderColor (+40% of lightness)unvisitedStepFontColor (+40% of lightness)unvisitedLabelFontColor (+40% of lightness)unvisitedHelperTextFontColor (+40% of lightness) |
Finally, here you can see an example of an opinionated theme object:
{
"accordion": {
"accentColor": "#1b75bb",
"fontColor": "#666666"
},
"button": {
"baseColor": "#1b75bb",
"primaryFontColor": "#ffffff",
"secondaryHoverFontColor": "#ffffff"
},
"checkbox": {
"baseColor": "#1b75bb",
"checkColor": "#000000",
"fontColor": "#000000"
},
"chip": {
"baseColor": "#e6e6e6",
"fontColor": "#000000"
},
"dateInput": {
"selectedDateBackgroundColor": "#1b75bb",
"selectedDateFontColor": "#ffffff"
},
"dropdown": {
"baseColor": "#ffffff",
"fontColor": "#000000",
"optionFontColor": "#000000"
},
"fileInput": {
"fontColor": "#000000"
},
"footer": {
"baseColor": "#1b75bb",
"fontColor": "#ffffff",
"accentColor": "#0095ff",
"logo": "https://assure.proxy.lambda/image/image_1674206626901.jpg"
},
"header": {
"baseColor": "#ffffff",
"accentColor": "#000000",
"fontColor": "#000000",
"menuBaseColor": "#ffffff",
"hamburguerColor": "#000000",
"logo": "https://assure.proxy.lambda/image/image_1674206652560.jpg",
"logoResponsive": "https://assure.proxy.lambda/image/image_1674206660896.jpg",
"contentColor": "#000000"
},
"paginator": {
"baseColor": "#eeeeee",
"fontColor": "#000000"
},
"progressBar": {
"accentColor": "#8bc53f",
"baseColor": "#cecece",
"fontColor": "#000000"
},
"quickNav": {
"fontColor": "#666666",
"accentColor": "#1b75bb"
},
"radioGroup": {
"baseColor": "#000000",
"fontColor": "#000000"
},
"select": {
"selectedOptionBackgroundColor": "#d9d9d9",
"fontColor": "#000000",
"optionFontColor": "#000000"
},
"sidenav": {
"baseColor": "#F2F2F2"
},
"slider": {
"baseColor": "#0067b3",
"fontColor": "#000000"
},
"spinner": {
"accentColor": "#8bc53f",
"baseColor": "#ffffff",
"fontColor": "#000000"
},
"switch": {
"checkedBaseColor": "#1b75bb",
"fontColor": "#000000"
},
"table": {
"baseColor": "#f2f7f6",
"headerFontColor": "#000000",
"cellFontColor": "#000000"
},
"tabs": {
"baseColor": "#1b75bb"
},
"textInput": {
"fontColor": "#000000"
},
"toggleGroup": {
"selectedBaseColor": "#8bc53f",
"selectedFontColor": "#ffffff",
"unselectedBaseColor": "#e6e6e6",
"unselectedFontColor": "#808285"
},
"wizard": {
"baseColor": "#1b75bb",
"fontColor": "#000000",
"selectedFontColor": "#ffffff"
}
}More examples can be found in the Halstack Provider section.
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.
information
We strongly recommend using the advanced theme generator to create the theme, but you can also create it yourself from scratch.
Below is an example of a default advanced theme. The number of configurable properties is significantly higher than in the previous strategy.
{
"accordion": {
"backgroundColor": "#ffffff",
"hoverBackgroundColor": "#f2eafa",
"arrowColor": "#5f249f",
"disabledArrowColor": "#999999",
"assistiveTextFontFamily": "Open Sans, sans-serif",
"assistiveTextFontSize": "1rem",
"assistiveTextFontWeight": "300",
"assistiveTextFontStyle": "italic",
"assistiveTextLetterSpacing": "0.025em",
"assistiveTextFontColor": "#666666",
"disabledAssistiveTextFontColor": "#999999",
"assistiveTextMinWidth": "100px",
"assistiveTextPaddingRight": "1.5rem",
"assistiveTextPaddingLeft": "0rem",
"titleLabelFontFamily": "Open Sans, sans-serif",
"titleLabelFontSize": "1rem",
"titleLabelFontWeight": "400",
"titleLabelFontStyle": "normal",
"titleLabelFontColor": "#000000",
"disabledTitleLabelFontColor": "#999999",
"titleLabelPaddingTop": "0rem",
"titleLabelPaddingBottom": "0rem",
"titleLabelPaddingLeft": "0rem",
"titleLabelPaddingRight": "1rem",
"focusBorderColor": "#0095ff",
"focusBorderStyle": "solid",
"focusBorderThickness": "2px",
"borderRadius": "4px",
"boxShadowOffsetX": "0px",
"boxShadowOffsetY": "6px",
"boxShadowBlur": "10px",
"boxShadowColor": "#0000001a",
"iconColor": "#5f249f",
"disabledIconColor": "#999999",
"iconSize": "24px",
"iconMarginLeft": "0rem",
"iconMarginRight": "0.75rem",
"accordionGroupSeparatorBorderColor": "#0000001a",
"accordionGroupSeparatorBorderThickness": "1px",
"accordionGroupSeparatorBorderRadius": "0px",
"accordionGroupSeparatorBorderStyle": "solid"
},
"alert": {
"titleFontFamily": "Open Sans, sans-serif",
"titleFontColor": "#000000",
"titleFontSize": "0.75rem",
"titleFontStyle": "normal",
"titleFontWeight": "bold",
"titleTextTransform": "uppercase",
"titlePaddingRight": "0rem",
"titlePaddingLeft": "0rem",
"inlineTextFontFamily": "Open Sans, sans-serif",
"inlineTextFontColor": "#000000",
"inlineTextFontSize": "0.75rem",
"inlineTextFontStyle": "normal",
"inlineTextFontWeight": "400",
"inlineTextPaddingLeft": "0rem",
"inlineTextPaddingRight": "0rem",
"contentPaddingLeft": "0rem",
"contentPaddingRight": "0rem",
"contentPaddingTop": "20px",
"contentPaddingBottom": "30px",
"borderRadius": "4px",
"borderStyle": "solid",
"borderThickness": "1px",
"infoBorderColor": "#0067b3",
"successBorderColor": "#24a148",
"warningBorderColor": "#c59f07",
"errorBorderColor": "#d0011b",
"iconSize": "24px",
"iconPaddingLeft": "0rem",
"iconPaddingRight": "0rem",
"infoIconColor": "#0067b3",
"successIconColor": "#24a148",
"warningIconColor": "#c59f07",
"errorIconColor": "#d0011b",
"infoBackgroundColor": "#e6f4ff",
"successBackgroundColor": "#eafaef",
"warningBackgroundColor": "#fef9e6",
"errorBackgroundColor": "#ffe6e9",
"hoverActionBackgroundColor": "#0000000d",
"activeActionBackgroundColor": "#0000001a",
"focusActionBorderColor": "#0095ff",
"overlayColor": "#000000b3"
},
"bulletedList": {
"fontColor": "#000000",
"bulletIconHeight": "1.5rem",
"bulletIconWidth": "1.5rem",
"bulletHeight": "5px",
"bulletWidth": "5px",
"bulletMarginRight": "0.5rem"
},
"button": {
"labelFontLineHeight": "1.5em",
"labelLetterSpacing": "0.025em",
"paddingSmallTop": "0rem",
"paddingSmallLeft": "0.5rem",
"paddingSmallBottom": "0rem",
"paddingSmallRight": "0.5rem",
"paddingSmallOnlyIconTop": "0rem",
"paddingSmallOnlyIconLeft": "0.25rem",
"paddingSmallOnlyIconBottom": "0rem",
"paddingSmallOnlyIconRight": "0.25rem",
"paddingMediumTop": "0rem",
"paddingMediumLeft": "0.5rem",
"paddingMediumBottom": "0rem",
"paddingMediumRight": "0.5rem",
"paddingMediumOnlyIconTop": "0rem",
"paddingMediumOnlyIconLeft": "0.5rem",
"paddingMediumOnlyIconBottom": "0rem",
"paddingMediumOnlyIconRight": "0.5rem",
"paddingLargeTop": "0rem",
"paddingLargeLeft": "1rem",
"paddingLargeBottom": "0rem",
"paddingLargeRight": "1rem",
"paddingLargeOnlyIconTop": "0rem",
"paddingLargeOnlyIconLeft": "0.5rem",
"paddingLargeOnlyIconBottom": "0rem",
"paddingLargeOnlyIconRight": "0.5rem",
"focusBorderColor": "#33aaff",
"primaryDefaultBackgroundColor": "#5f249f",
"primaryErrorBackgroundColor": "#d0011b",
"primaryWarningBackgroundColor": "#c26c0a",
"primarySuccessBackgroundColor": "#24a148",
"primaryInfoBackgroundColor": "#0086e6",
"primaryDefaultFontColor": "#ffffff",
"primaryErrorFontColor": "#ffffff",
"primaryWarningFontColor": "#ffffff",
"primarySuccessFontColor": "#ffffff",
"primaryInfoFontColor": "#ffffff",
"primaryHoverDefaultBackgroundColor": "#4b1c7d",
"primaryHoverErrorBackgroundColor": "#980115",
"primaryHoverWarningBackgroundColor": "#915108",
"primaryHoverSuccessBackgroundColor": "#1c7d38",
"primaryHoverInfoBackgroundColor": "#0067b3",
"primaryActiveDefaultBackgroundColor": "#321353",
"primaryActiveErrorBackgroundColor": "#65010e",
"primaryActiveWarningBackgroundColor": "#613605",
"primaryActiveSuccessBackgroundColor": "#135325",
"primaryActiveInfoBackgroundColor": "#003c66",
"primaryDisabledDefaultBackgroundColor": "#f2eafa",
"primaryDisabledErrorBackgroundColor": "#ffe6e9",
"primaryDisabledWarningBackgroundColor": "#fef3e7",
"primaryDisabledSuccessBackgroundColor": "#eafaef",
"primaryDisabledInfoBackgroundColor": "#e6f4ff",
"primaryDisabledDefaultFontColor": "#cbacec",
"primaryDisabledErrorFontColor": "#fe9aa7",
"primaryDisabledWarningFontColor": "#facf9e",
"primaryDisabledSuccessFontColor": "#acecbe",
"primaryDisabledInfoFontColor": "#99d5ff",
"primaryBorderThickness": "0px",
"primaryBorderStyle": "none",
"primaryBorderRadius": "0.25rem",
"primaryFontFamily": "Open Sans, sans-serif",
"primarySmallFontSize": "0.875rem",
"primaryMediumFontSize": "0.875rem",
"primaryLargeFontSize": "1rem",
"primaryFontWeight": "600",
"secondaryDefaultBackgroundColor": "transparent",
"secondaryErrorBackgroundColor": "transparent",
"secondaryWarningBackgroundColor": "transparent",
"secondarySuccessBackgroundColor": "transparent",
"secondaryInfoBackgroundColor": "transparent",
"secondaryDefaultFontColor": "#5f249f",
"secondaryErrorFontColor": "#d0011b",
"secondaryWarningFontColor": "#c26c0a",
"secondarySuccessFontColor": "#24a148",
"secondaryInfoFontColor": "#0086e6",
"secondaryDefaultBorderColor": "#5f249f",
"secondaryErrorBorderColor": "#d0011b",
"secondaryWarningBorderColor": "#c26c0a",
"secondarySuccessBorderColor": "#24a148",
"secondaryInfoBorderColor": "#0086e6",
"secondaryHoverDefaultBackgroundColor": "#5f249f",
"secondaryHoverErrorBackgroundColor": "#d0011b",
"secondaryHoverWarningBackgroundColor": "#c26c0a",
"secondaryHoverSuccessBackgroundColor": "#24a148",
"secondaryHoverInfoBackgroundColor": "#0086e6",
"secondaryHoverDefaultFontColor": "#ffffff",
"secondaryHoverErrorFontColor": "#ffffff",
"secondaryHoverWarningFontColor": "#ffffff",
"secondaryHoverSuccessFontColor": "#ffffff",
"secondaryHoverInfoFontColor": "#ffffff",
"secondaryActiveDefaultBackgroundColor": "#4b1c7d",
"secondaryActiveErrorBackgroundColor": "#980115",
"secondaryActiveWarningBackgroundColor": "#915108",
"secondaryActiveSuccessBackgroundColor": "#1c7d38",
"secondaryActiveInfoBackgroundColor": "#0067b3",
"secondaryDisabledDefaultBackgroundColor": "transparent",
"secondaryDisabledErrorBackgroundColor": "transparent",
"secondaryDisabledWarningBackgroundColor": "transparent",
"secondaryDisabledSuccessBackgroundColor": "transparent",
"secondaryDisabledInfoBackgroundColor": "transparent",
"secondaryDisabledDefaultFontColor": "#cbacec",
"secondaryDisabledErrorFontColor": "#fe9aa7",
"secondaryDisabledWarningFontColor": "#facf9e",
"secondaryDisabledSuccessFontColor": "#acecbe",
"secondaryDisabledInfoFontColor": "#99d5ff",
"secondaryDisabledDefaultBorderColor": "#cbacec",
"secondaryDisabledErrorBorderColor": "#fe9aa7",
"secondaryDisabledWarningBorderColor": "#facf9e",
"secondaryDisabledSuccessBorderColor": "#acecbe",
"secondaryDisabledInfoBorderColor": "#99d5ff",
"secondaryBorderThickness": "1px",
"secondaryBorderStyle": "solid",
"secondaryBorderRadius": "0.25rem",
"secondaryFontFamily": "Open Sans, sans-serif",
"secondarySmallFontSize": "0.875rem",
"secondaryMediumFontSize": "0.875rem",
"secondaryLargeFontSize": "1rem",
"secondaryFontWeight": "600",
"tertiaryDefaultBackgroundColor": "transparent",
"tertiaryErrorBackgroundColor": "transparent",
"tertiaryWarningBackgroundColor": "transparent",
"tertiarySuccessBackgroundColor": "transparent",
"tertiaryInfoBackgroundColor": "transparent",
"tertiaryDefaultFontColor": "#5f249f",
"tertiaryErrorFontColor": "#d0011b",
"tertiaryWarningFontColor": "#c26c0a",
"tertiarySuccessFontColor": "#24a148",
"tertiaryInfoFontColor": "#0086e6",
"tertiaryHoverDefaultBackgroundColor": "#f2eafa",
"tertiaryHoverErrorBackgroundColor": "#ffe6e9",
"tertiaryHoverWarningBackgroundColor": "#fef3e7",
"tertiaryHoverSuccessBackgroundColor": "#eafaef",
"tertiaryHoverInfoBackgroundColor": "#e6f4ff",
"tertiaryActiveDefaultBackgroundColor": "#e5d5f6",
"tertiaryActiveErrorBackgroundColor": "#ffccd3",
"tertiaryActiveWarningBackgroundColor": "#fce7cf",
"tertiaryActiveSuccessBackgroundColor": "#d5f6df",
"tertiaryActiveInfoBackgroundColor": "#cceaff",
"tertiaryDisabledDefaultBackgroundColor": "transparent",
"tertiaryDisabledErrorBackgroundColor": "transparent",
"tertiaryDisabledWarningBackgroundColor": "transparent",
"tertiaryDisabledSuccessBackgroundColor": "transparent",
"tertiaryDisabledInfoBackgroundColor": "transparent",
"tertiaryDisabledDefaultFontColor": "#cbacec",
"tertiaryDisabledErrorFontColor": "#fe9aa7",
"tertiaryDisabledWarningFontColor": "#facf9e",
"tertiaryDisabledSuccessFontColor": "#acecbe",
"tertiaryDisabledInfoFontColor": "#99d5ff",
"tertiaryBorderThickness": "0px",
"tertiaryBorderStyle": "none",
"tertiaryBorderRadius": "0.25rem",
"tertiaryFontFamily": "Open Sans, sans-serif",
"tertiarySmallFontSize": "0.875rem",
"tertiaryMediumFontSize": "0.875rem",
"tertiaryLargeFontSize": "1rem",
"tertiaryFontWeight": "600"
},
"card": {
"height": "220px",
"width": "400px"
},
"checkbox": {
"backgroundColorChecked": "#0067b3",
"hoverBackgroundColorChecked": "#003c66",
"disabledBackgroundColorChecked": "#999999",
"readOnlyBackgroundColorChecked": "#999999",
"hoverReadOnlyBackgroundColorChecked": "#808080",
"borderColor": "#0067b3",
"hoverBorderColor": "#003c66",
"disabledBorderColor": "#999999",
"readOnlyBorderColor": "#999999",
"hoverReadOnlyBorderColor": "#808080",
"checkColor": "#ffffff",
"disabledCheckColor": "#ffffff",
"readOnlyCheckColor": "#ffffff",
"fontFamily": "Open Sans, sans-serif",
"fontSize": "0.875rem",
"fontWeight": "400",
"fontColor": "#000000",
"disabledFontColor": "#999999",
"focusColor": "#0095ff",
"checkLabelSpacing": "0.5rem"
},
"chip": {
"backgroundColor": "#e6e6e6",
"disabledBackgroundColor": "#f2f2f2",
"fontFamily": "Open Sans, sans-serif",
"fontSize": "1rem",
"fontStyle": "normal",
"fontWeight": "400",
"fontColor": "#000000",
"disabledFontColor": "#999999",
"borderColor": "transparent",
"borderRadius": "80px",
"borderThickness": "0px",
"borderStyle": "solid",
"contentPaddingLeft": "1rem",
"contentPaddingRight": "1rem",
"contentPaddingTop": "0rem",
"contentPaddingBottom": "0rem",
"iconSize": "24px",
"iconSpacing": "0.5rem",
"iconColor": "#4d4d4d",
"hoverIconColor": "#333333",
"activeIconColor": "#000000",
"disabledIconColor": "#999999",
"focusColor": "#0095ff",
"focusBorderStyle": "solid",
"focusBorderThickness": "2px",
"focusBorderRadius": "0.25rem"
},
"contextualMenu": {
"fontFamily": "Open Sans, sans-serif",
"backgroundColor": "#ffffff",
"borderColor": "#e6e6e6",
"menuItemFontColor": "#333333",
"menuItemFontSize": "0.875rem",
"menuItemFontStyle": "normal",
"menuItemFontWeight": "400",
"menuItemLineHeight": "24px",
"hoverMenuItemBackgroundColor": "#f2f2f2",
"activeMenuItemBackgroundColor": "#f2f2f2",
"selectedMenuItemBackgroundColor": "#f2eafa",
"hoverSelectedMenuItemBackgroundColor": "#e5d5f6",
"activeSelectedMenuItemBackgroundColor": "#e5d5f6",
"selectedMenuItemFontWeight": "600",
"sectionTitleFontColor": "#333333",
"sectionTitleFontSize": "1rem",
"sectionTitleFontStyle": "normal",
"sectionTitleFontWeight": "600",
"sectionTitleLineHeight": "24px",
"iconColor": "#333333",
"iconSize": "16px"
},
"dataGrid": {
"rowSeparatorThickness": "1px",
"rowSeparatorStyle": "solid",
"rowSeparatorColor": "#cccccc",
"dataBackgroundColor": "#ffffff",
"dataFontFamily": "Open Sans, sans-serif",
"dataFontSize": "0.875rem",
"dataFontStyle": "normal",
"dataFontWeight": "400",
"dataFontColor": "#000000",
"dataFontTextTransform": "none",
"dataPaddingRight": "0.5rem",
"dataPaddingLeft": "0.5rem",
"dataRowHeight": "36",
"dataTextLineHeight": "normal",
"headerBackgroundColor": "#5f249f",
"headerBorderRadius": "4px",
"headerFontFamily": "Open Sans, sans-serif",
"headerFontSize": "0.875rem",
"headerFontStyle": "normal",
"headerFontWeight": "bold",
"headerFontColor": "#ffffff",
"headerFontTextTransform": "none",
"headerPaddingRight": "0.5rem",
"headerPaddingLeft": "0.5rem",
"headerRowHeight": "36",
"headerTextLineHeight": "normal",
"headerCheckboxBackgroundColorChecked": "#ffffff",
"headerCheckboxHoverBackgroundColorChecked": "#e6e6e6",
"headerCheckboxBorderColor": "#ffffff",
"headerCheckboxHoverBorderColor": "#ffffff",
"headerCheckboxCheckColor": "#5f249f",
"summaryRowHeight": "36",
"focusColor": "#0095ff",
"scrollBarThumbColor": "#666666",
"scrollBarTrackColor": "#cccccc"
},
"dateInput": {
"pickerBackgroundColor": "#ffffff",
"pickerFontColor": "#000000",
"pickerBorderColor": "#bfbfbf",
"pickerSelectedBackgroundColor": "#5f249f",
"pickerSelectedFontColor": "#ffffff",
"pickerHoverBackgroundColor": "#e5d5f6",
"pickerHoverFontColor": "#000000",
"pickerActiveBackgroundColor": "#4b1c7d",
"pickerActiveFontColor": "#ffffff",
"pickerNonCurrentMonthFontColor": "#999999",
"pickerCurrentDateBorderColor": "#cbacec",
"pickerCurrentDateFontColor": "#000000",
"pickerCurrentYearFontColor": "#5f249f",
"pickerHeaderBackgroundColor": "transparent",
"pickerHeaderFontColor": "#000000",
"pickerHeaderHoverBackgroundColor": "#e5d5f6",
"pickerHeaderHoverFontColor": "#000000",
"pickerHeaderActiveBackgroundColor": "#4b1c7d",
"pickerHeaderActiveFontColor": "#ffffff",
"pickerFocusColor": "#0095ff",
"pickerBorderWidth": "1px",
"pickerBorderStyle": "solid",
"pickerFocusWidth": "2px",
"pickerCurrentDateBorderWidth": "1px",
"pickerFontFamily": "Open Sans, sans-serif",
"pickerFontSize": "0.875rem",
"pickerFontWeight": "400",
"pickerInteractedYearFontSize": "1.5rem",
"pickerHeaderFontSize": "0.875rem"
},
"dialog": {
"overlayColor": "#000000b3",
"backgroundColor": "#ffffff",
"closeIconSize": "24px",
"closeIconTopPosition": "20px",
"closeIconRightPosition": "20px",
"closeIconBackgroundColor": "transparent",
"closeIconBorderColor": "none",
"closeIconColor": "#000000",
"closeIconBorderThickness": "0px",
"closeIconBorderStyle": "solid",
"closeIconBorderRadius": "2px",
"boxShadowOffsetX": "0px",
"boxShadowOffsetY": "1px",
"boxShadowBlur": "3px",
"boxShadowColor": "#00000033"
},
"dropdown": {
"buttonBackgroundColor": "#ffffff",
"hoverButtonBackgroundColor": "#f2f2f2",
"activeButtonBackgroundColor": "#cccccc",
"buttonFontFamily": "Open Sans, sans-serif",
"buttonFontSize": "1rem",
"buttonFontStyle": "normal",
"buttonFontWeight": "400",
"buttonFontColor": "#000000",
"buttonIconSize": "20px",
"buttonIconSpacing": "10px",
"buttonIconColor": "#000000",
"buttonPaddingTop": "0rem",
"buttonPaddingBottom": "0rem",
"buttonPaddingLeft": "1rem",
"buttonPaddingRight": "1rem",
"buttonHeight": "40px",
"buttonBorderRadius": "4px",
"buttonBorderStyle": "none",
"buttonBorderThickness": "0px",
"buttonBorderColor": "transparent",
"disabledColor": "#999999",
"disabledButtonBackgroundColor": "transparent",
"disabledButtonBorderColor": "transparent",
"optionBackgroundColor": "#ffffff",
"hoverOptionBackgroundColor": "#f2f2f2",
"activeOptionBackgroundColor": "#cccccc",
"optionFontFamily": "Open Sans, sans-serif",
"optionFontSize": "1rem",
"optionFontStyle": "normal",
"optionFontWeight": "400",
"optionFontColor": "#000000",
"optionIconSize": "20px",
"optionIconSpacing": "10px",
"optionIconColor": "#000000",
"optionPaddingTop": "6px",
"optionPaddingBottom": "6px",
"optionPaddingLeft": "1rem",
"optionPaddingRight": "1rem",
"caretIconSize": "24px",
"caretIconColor": "#000000",
"caretIconSpacing": "0.75rem",
"borderRadius": "4px",
"borderStyle": "none",
"borderThickness": "0px",
"borderColor": "transparent",
"scrollBarThumbColor": "#666666",
"scrollBarTrackColor": "#cccccc",
"focusColor": "#0095ff"
},
"fileInput": {
"dropBorderColor": "#000000",
"fileItemBorderColor": "#cccccc",
"fileNameFontColor": "#000000",
"labelFontColor": "#000000",
"helperTextFontColor": "#000000",
"dropLabelFontColor": "#000000",
"disabledLabelFontColor": "#999999",
"disabledHelperTextFontColor": "#999999",
"disabledDropLabelFontColor": "#999999",
"focusDropBorderColor": "#0095ff",
"disabledDropBorderColor": "#999999",
"dragoverDropBackgroundColor": "#f5fbff",
"errorFileItemBorderColor": "#d0011b",
"errorFileItemBackgroundColor": "#fff5f6",
"errorFilePreviewBackgroundColor": "#ffccd3",
"errorFileItemIconColor": "#d0011b",
"fileItemIconBackgroundColor": "#f2f2f2",
"deleteFileItemColor": "#000000",
"errorMessageFontColor": "#d0011b",
"labelFontFamily": "Open Sans, sans-serif",
"labelFontSize": "0.875rem",
"labelFontWeight": "600",
"labelLineHeight": "1.715em",
"fileItemFontFamily": "Open Sans, sans-serif",
"fileItemFontSize": "0.875rem",
"fileItemFontWeight": "400",
"fileItemLineHeight": "1.5em",
"helperTextFontFamily": "Open Sans, sans-serif",
"helperTextFontSize": "0.75rem",
"helperTextFontWeight": "400",
"helperTextLineHeight": "1.5em",
"dropLabelFontFamily": "Open Sans, sans-serif",
"dropLabelFontSize": "1rem",
"dropLabelFontWeight": "400",
"errorMessageFontFamily": "Open Sans, sans-serif",
"errorMessageFontSize": "0.75rem",
"errorMessageFontWeight": "400",
"errorMessageLineHeight": "1.5em",
"dropBorderThickness": "1px",
"dropBorderStyle": "dashed",
"dropBorderRadius": "0.375rem",
"fileItemBorderThickness": "1px",
"fileItemBorderStyle": "solid",
"fileItemBorderRadius": "0.25rem",
"hoverDeleteFileItemBackgroundColor": "#0000000d",
"activeDeleteFileItemBackgroundColor": "#00000033",
"focusDeleteFileItemBorderColor": "#0095ff",
"filePreviewBackgroundColor": "#f2f2f2",
"filePreviewIconColor": "#808080",
"errorFilePreviewIconColor": "#d0011b"
},
"footer": {
"height": "124px",
"backgroundColor": "#000000",
"bottomLinksDividerColor": "#0095ff",
"bottomLinksDividerThickness": "1px",
"bottomLinksDividerStyle": "solid",
"bottomLinksDividerSpacing": "0.5rem",
"bottomLinksFontFamily": "Open Sans, sans-serif",
"bottomLinksFontSize": "0.75rem",
"bottomLinksFontStyle": "normal",
"bottomLinksFontWeight": "400",
"bottomLinksFontColor": "#ffffff",
"bottomLinksTextDecoration": "none",
"copyrightFontFamily": "Open Sans, sans-serif",
"copyrightFontSize": "0.75rem",
"copyrightFontStyle": "normal",
"copyrightFontWeight": "400",
"copyrightFontColor": "#ffffff",
"logo": "",
"logoHeight": "32px",
"logoWidth": "auto",
"socialLinksSize": "24px",
"socialLinksGutter": "1rem",
"socialLinksColor": "#ffffff"
},
"header": {
"backgroundColor": "#ffffff",
"hamburguerFocusColor": "#0095ff",
"hamburguerFontFamily": "Open Sans, sans-serif",
"hamburguerFontStyle": "normal",
"hamburguerFontColor": "#000000",
"hamburguerFontSize": "10px",
"hamburguerFontWeight": "600",
"hamburguerTextTransform": "uppercase",
"hamburguerIconColor": "#000000",
"hamburguerHoverColor": "#e6e6e6",
"logo": "",
"logoResponsive": "",
"logoHeight": "40px",
"logoWidth": "auto",
"menuBackgroundColor": "#ffffff",
"menuZindex": "2000",
"menuTabletWidth": "60vw",
"menuMobileWidth": "100vw",
"minHeight": "64px",
"overlayColor": "#000000b3",
"overlayOpacity": "0.7",
"overlayZindex": "1600",
"paddingTop": "0rem",
"paddingBottom": "0rem",
"paddingRight": "1.5rem",
"paddingLeft": "1.5rem",
"underlinedColor": "#000000",
"underlinedThickness": "2px",
"underlinedStyle": "solid",
"contentColor": "#000000"
},
"heading": {
"level1FontColor": "inherit",
"level1FontFamily": "Open Sans, sans-serif",
"level1FontSize": "2.5rem",
"level1FontStyle": "normal",
"level1FontWeight": "600",
"level1LineHeight": "1.365em",
"level1LetterSpacing": "-0.025em",
"level2FontColor": "inherit",
"level2FontFamily": "Open Sans, sans-serif",
"level2FontSize": "1.5rem",
"level2FontStyle": "normal",
"level2FontWeight": "600",
"level2LineHeight": "1.5em",
"level2LetterSpacing": "0em",
"level3FontColor": "inherit",
"level3FontFamily": "Open Sans, sans-serif",
"level3FontSize": "1.25rem",
"level3FontStyle": "normal",
"level3FontWeight": "600",
"level3LineHeight": "1.365em",
"level3LetterSpacing": "0.025em",
"level4FontColor": "inherit",
"level4FontFamily": "Open Sans, sans-serif",
"level4FontSize": "1rem",
"level4FontStyle": "normal",
"level4FontWeight": "600",
"level4LineHeight": "1.5em",
"level4LetterSpacing": "0em",
"level5FontColor": "inherit",
"level5FontFamily": "Open Sans, sans-serif",
"level5FontSize": "0.875rem",
"level5FontStyle": "normal",
"level5FontWeight": "600",
"level5LineHeight": "1.5em",
"level5LetterSpacing": "0.025em"
},
"image": {
"captionFontColor": "#333333",
"captionFontFamily": "Open Sans, sans-serif",
"captionFontSize": "0.875rem",
"captionFontStyle": "normal",
"captionFontWeight": "400",
"captionLineHeight": "1.5em"
},
"link": {
"fontColor": "#0067b3",
"fontFamily": "inherit",
"fontSize": "inherit",
"fontStyle": "normal",
"fontWeight": "400",
"iconSize": "16px",
"iconSpacing": "0.25rem",
"underlineSpacing": "0rem",
"underlineStyle": "solid",
"underlineThickness": "1px",
"disabledFontColor": "#999999",
"hoverFontColor": "#0067b3",
"hoverUnderlineColor": "#0067b3",
"visitedFontColor": "#5f249f",
"visitedUnderlineColor": "#5f249f",
"activeFontColor": "#000000",
"activeUnderlineColor": "#000000",
"focusColor": "#0095ff"
},
"navTabs": {
"selectedBackgroundColor": "#ffffff",
"unselectedBackgroundColor": "#ffffff",
"hoverBackgroundColor": "#f2f2f2",
"pressedBackgroundColor": "#e6e6e6",
"selectedFontColor": "#666666",
"unselectedFontColor": "#666666",
"disabledFontColor": "#999999",
"focusOutline": "#0095ff",
"selectedUnderlineColor": "#5f249f",
"dividerColor": "#bfbfbf",
"fontFamily": "Open Sans, sans-serif",
"fontSize": "1rem",
"fontStyle": "normal",
"fontWeight": "400",
"selectedIconColor": "#666666",
"unselectedIconColor": "#666666",
"disabledIconColor": "#999999"
},
"paginator": {
"backgroundColor": "#f2f2f2",
"fontColor": "#000000",
"fontFamily": "Open Sans, sans-serif",
"fontSize": "0.875rem",
"fontStyle": "normal",
"fontWeight": "400",
"fontTextTransform": "none",
"verticalPadding": "0.75rem",
"horizontalPadding": "2rem",
"marginRight": "2.5rem",
"marginLeft": "20px",
"itemsPerPageSelectorMarginLeft": "0rem",
"itemsPerPageSelectorMarginRight": "0.5rem",
"pageSelectorMarginRight": "30px",
"pageSelectorMarginLeft": "0rem",
"totalItemsContainerMarginRight": "2.5rem",
"totalItemsContainerMarginLeft": "0rem"
},
"paragraph": {
"display": "block",
"fontColor": "#000000",
"fontSize": "1rem",
"fontWeight": "400"
},
"progressBar": {
"trackLineColor": "#5f249f",
"totalLineColor": "#e6e6e6",
"labelFontFamily": "Open Sans, sans-serif",
"labelFontSize": "0.75rem",
"labelFontStyle": "normal",
"labelFontWeight": "400",
"labelFontColor": "#000000",
"labelFontTextTransform": "uppercase",
"valueFontFamily": "Open Sans, sans-serif",
"valueFontSize": "0.75rem",
"valueFontStyle": "normal",
"valueFontWeight": "400",
"valueFontColor": "#000000",
"valueFontTextTransform": "uppercase",
"helperTextFontColor": "#000000",
"helperTextFontSize": "0.75rem",
"helperTextFontStyle": "normal",
"helperTextFontWeight": "400",
"helperTextFontFamily": "Open Sans, sans-serif",
"thickness": "9px",
"borderRadius": "5px",
"overlayColor": "#000000b3",
"overlayFontColor": "#ffffff"
},
"quickNav": {
"fontColor": "#666666",
"hoverFontColor": "#7d2fd0",
"dividerBorderColor": "#bfbfbf",
"focusBorderColor": "#0095ff",
"focusBorderStyle": "solid",
"focusBorderThickness": "2px",
"focusBorderRadius": "2px",
"paddingTop": "0.5rem",
"paddingBottom": "0.5rem",
"paddingLeft": "1rem",
"paddingRight": "1rem",
"fontFamily": "Open Sans, sans-serif",
"fontSize": "0.875rem",
"fontStyle": "normal",
"fontWeight": "400"
},
"radioGroup": {
"fontFamily": "Open Sans, sans-serif",
"radioInputColor": "#0086e6",
"hoverRadioInputColor": "#0067b3",
"focusBorderColor": "#0095ff",
"activeRadioInputColor": "#003c66",
"errorRadioInputColor": "#d0011b",
"hoverErrorRadioInputColor": "#980115",
"activeErrorRadioInputColor": "#65010e",
"readOnlyRadioInputColor": "#999999",
"hoverReadOnlyRadioInputColor": "#808080",
"activeReadOnlyRadioInputColor": "#666666",
"disabledRadioInputColor": "#999999",
"disabledLabelFontColor": "#999999",
"disabledHelperTextFontColor": "#999999",
"disabledRadioInputLabelFontColor": "#999999",
"errorMessageColor": "#d0011b",
"labelFontColor": "#000000",
"labelFontSize": "0.875rem",
"labelFontStyle": "normal",
"labelFontWeight": "600",
"labelLineHeight": "1.715em",
"optionalLabelFontWeight": "400",
"helperTextFontColor": "#000000",
"helperTextFontSize": "0.75rem",
"helperTextFontStyle": "normal",
"helperTextFontWeight": "400",
"helperTextLineHeight": "1.5em",
"radioInputLabelFontColor": "#000000",
"radioInputLabelFontSize": "0.875rem",
"radioInputLabelFontStyle": "normal",
"radioInputLabelFontWeight": "400",
"radioInputLabelLineHeight": "1.715em",
"groupLabelMargin": "0.5rem",
"radioInputLabelMargin": "0.5rem",
"groupVerticalGutter": "0.25rem",
"groupHorizontalGutter": "2rem"
},
"select": {
"fontFamily": "Open Sans, sans-serif",
"disabledColor": "#999999",
"enabledInputBorderColor": "#000000",
"hoverInputBorderColor": "#a46ede",
"focusInputBorderColor": "#0095ff",
"errorInputBorderColor": "#d0011b",
"hoverInputErrorBorderColor": "#fe0123",
"disabledInputBorderColor": "#999999",
"disabledInputBackgroundColor": "#f2f2f2",
"inputMarginTop": "0.25rem",
"inputMarginBottom": "0.25rem",
"errorMessageColor": "#d0011b",
"errorIconColor": "#d0011b",
"labelFontColor": "#000000",
"labelFontSize": "0.875rem",
"labelFontStyle": "normal",
"labelFontWeight": "600",
"labelLineHeight": "1.715em",
"optionalLabelFontWeight": "400",
"helperTextFontColor": "#000000",
"helperTextFontSize": "0.75rem",
"helperTextFontStyle": "normal",
"helperTextFontWeight": "400",
"helperTextLineHeight": "1.5em",
"placeholderFontColor": "#000000b3",
"valueFontColor": "#000000",
"valueFontSize": "1rem",
"valueFontStyle": "normal",
"valueFontWeight": "400",
"actionIconColor": "#000000",
"hoverActionIconColor": "#000000",
"activeActionIconColor": "#000000",
"actionBackgroundColor": "transparent",
"hoverActionBackgroundColor": "#f2f2f2",
"activeActionBackgroundColor": "#cccccc",
"listOptionFontColor": "#000000",
"listOptionFontSize": "0.875rem",
"listOptionFontStyle": "normal",
"listOptionFontWeight": "400",
"listOptionIconColor": "#000000",
"listOptionDividerColor": "#e6e6e6",
"listGroupLabelFontWeight": "600",
"focusListOptionBorderColor": "#0095ff",
"systemMessageFontColor": "#666666",
"collapseIndicatorColor": "#000000",
"listDialogBackgroundColor": "#ffffff",
"listDialogBorderColor": "#bfbfbf",
"selectedListOptionBackgroundColor": "#e6f4ff",
"selectedHoverListOptionBackgroundColor": "#cceaff",
"selectedActiveListOptionBackgroundColor": "#99d5ff",
"selectedListOptionIconColor": "#003c66",
"unselectedHoverListOptionBackgroundColor": "#f2f2f2",
"unselectedActiveListOptionBackgroundColor": "#e6e6e6",
"selectionIndicatorFontColor": "#000000",
"selectionIndicatorFontSize": "0.75rem",
"selectionIndicatorFontStyle": "400",
"selectionIndicatorFontWeight": "normal",
"selectionIndicatorBorderColor": "#bfbfbf",
"selectionIndicatorBackgroundColor": "#fafafa",
"enabledSelectionIndicatorActionBackgroundColor": "transparent",
"enabledSelectionIndicatorActionIconColor": "#000000",
"hoverSelectionIndicatorActionBackgroundColor": "#f2f2f2",
"hoverSelectionIndicatorActionIconColor": "#000000",
"activeSelectionIndicatorActionBackgroundColor": "#cccccc",
"activeSelectionIndicatorActionIconColor": "#000000"
},
"sidenav": {
"backgroundColor": "#f2f2f2",
"titleFontFamily": "Open Sans, sans-serif",
"titleFontSize": "1.25rem",
"titleFontStyle": "normal",
"titleFontWeight": "600",
"titleFontColor": "#4d4d4d",
"titleFontTextTransform": "none",
"titleFontLetterSpacing": "0em",
"groupTitleFontFamily": "Open Sans, sans-serif",
"groupTitleFontSize": "0.875rem",
"groupTitleFontStyle": "normal",
"groupTitleFontWeight": "600",
"groupTitleFontColor": "#000000",
"groupTitleHoverBackgroundColor": "#e6e6e6",
"groupTitleActiveBackgroundColor": "#4d4d4d",
"groupTitleSelectedFontColor": "#ffffff",
"groupTitleSelectedBackgroundColor": "#4d4d4d",
"groupTitleSelectedHoverFontColor": "#ffffff",
"groupTitleSelectedHoverBackgroundColor": "#333333",
"groupTitleFontTextTransform": "uppercase",
"groupTitleFontLetterSpacing": "0.05em",
"linkFontFamily": "Open Sans, sans-serif",
"linkFontSize": "0.875rem",
"linkFontStyle": "normal",
"linkFontWeight": "400",
"linkFontColor": "#4d4d4d",
"linkHoverBackgroundColor": "#e6e6e6",
"linkSelectedFontColor": "#ffffff",
"linkSelectedBackgroundColor": "#4d4d4d",
"linkSelectedHoverFontColor": "#ffffff",
"linkSelectedHoverBackgroundColor": "#333333",
"linkFontTextTransform": "none",
"linkFontLetterSpacing": "0.025em",
"linkTextDecoration": "none",
"linkMarginTop": "0.25rem",
"linkMarginBottom": "0.25rem",
"linkMarginRight": "1rem",
"linkMarginLeft": "1rem",
"linkFocusColor": "#0095ff",
"scrollBarThumbColor": "#0000001a",
"scrollBarTrackColor": "transparent"
},
"slider": {
"fontFamily": "Open Sans, sans-serif",
"limitValuesFontColor": "#000000",
"limitValuesFontSize": "1rem",
"limitValuesFontStyle": "normal",
"limitValuesFontWeight": "400",
"limitValuesFontLetterSpacing": "0em",
"disabledLimitValuesFontColor": "#999999",
"labelFontFamily": "Open Sans, sans-serif",
"labelFontSize": "0.875rem",
"labelFontStyle": "normal",
"labelFontWeight": "600",
"labelLineHeight": "1.715em",
"helperTextFontFamily": "Open Sans, sans-serif",
"helperTextFontSize": "0.75rem",
"helperTextFontStyle": "normal",
"helperTextFontWeight": "400",
"helperTextLineHeight": "1.5em",
"fontColor": "#000000",
"labelFontColor": "#000000",
"helperTextFontColor": "#000000",
"disabledLabelFontColor": "#999999",
"disabledHelperTextFontColor": "#999999",
"thumbHeight": "12px",
"thumbWidth": "12px",
"hoverThumbHeight": "14px",
"hoverThumbWidth": "14px",
"thumbVerticalPosition": "12px",
"hoverThumbVerticalPosition": "11px",
"thumbBackgroundColor": "#0067b3",
"hoverThumbScale": "1.166666",
"hoverThumbBackgroundColor": "#003c66",
"activeThumbScale": "1.166666",
"activeThumbBackgroundColor": "#003c66",
"focusThumbBackgroundColor": "#0067b3",
"tickHeight": "4px",
"tickWidth": "4px",
"tickVerticalPosition": "11px",
"tickBackgroundColor": "#0067b3",
"trackLineThickness": "2px",
"trackLineVerticalPosition": "50%",
"trackLineColor": "#0067b3",
"totalLineThickness": "2px",
"totalLineVerticalPosition": "50%",
"totalLineColor": "#0000001a",
"disabledThumbVerticalPosition": "10px",
"disabledThumbBackgroundColor": "#999999",
"disabledTickVerticalPosition": "11px",
"disabledTickBackgroundColor": "#999999",
"disabledTrackLineColor": "#999999",
"disabledTotalLineColor": "#f2f2f2",
"focusColor": "#0095ff",
"floorLabelMarginRight": "1rem",
"ceilLabelMarginLeft": "1rem",
"inputMarginLeft": "2rem"
},
"spinner": {
"trackCircleColor": "#5f249f",
"trackCircleColorOverlay": "#a46ede",
"totalCircleColor": "#ffffff",
"labelFontFamily": "Open Sans, sans-serif",
"labelFontSize": "0.875rem",
"labelFontStyle": "normal",
"labelFontWeight": "400",
"labelFontColor": "#000000",
"labelTextAlign": "center",
"progressValueFontFamily": "Open Sans, sans-serif",
"progressValueFontSize": "0.875rem",
"progressValueFontStyle": "normal",
"progressValueFontWeight": "bold",
"progressValueFontColor": "inherit",
"progressValueTextAlign": "center",
"overlayBackgroundColor": "#000000",
"overlayOpacity": "0.8",
"overlayLabelFontFamily": "Open Sans, sans-serif",
"overlayLabelFontSize": "0.875rem",
"overlayLabelFontStyle": "normal",
"overlayLabelFontWeight": "400",
"overlayLabelFontColor": "#ffffff",
"overlayLabelTextAlign": "center",
"overlayProgressValueFontFamily": "Open Sans, sans-serif",
"overlayProgressValueFontSize": "0.875rem",
"overlayProgressValueFontStyle": "normal",
"overlayProgressValueFontWeight": "bold",
"overlayProgressValueFontColor": "#ffffff",
"overlayProgressValueTextAlign": "center"
},
"switch": {
"checkedTrackBackgroundColor": "#5f249f",
"checkedThumbBackgroundColor": "#ffffff",
"uncheckedTrackBackgroundColor": "#bfbfbf",
"uncheckedThumbBackgroundColor": "#ffffff",
"disabledCheckedTrackBackgroundColor": "#f2eafa",
"disabledCheckedThumbBackgroundColor": "#ffffff",
"disabledUncheckedTrackBackgroundColor": "#f2f2f2",
"disabledUncheckedThumbBackgroundColor": "#ffffff",
"disabledLabelFontColor": "#999999",
"disabledLabelFontStyle": "normal",
"labelFontFamily": "Open Sans, sans-serif",
"labelFontSize": "1rem",
"labelFontStyle": "normal",
"labelFontWeight": "400",
"labelFontColor": "#000000",
"thumbFocusColor": "#0095ff",
"thumbHeight": "24px",
"thumbWidth": "24px",
"thumbShift": "1.25rem",
"trackHeight": "12px",
"trackWidth": "36px",
"spaceBetweenLabelSwitch": "0.5rem"
},
"table": {
"rowSeparatorThickness": "1px",
"rowSeparatorStyle": "solid",
"rowSeparatorColor": "#cccccc",
"dataBackgroundColor": "#ffffff",
"dataFontFamily": "Open Sans, sans-serif",
"dataFontSize": "0.875rem",
"dataFontStyle": "normal",
"dataFontWeight": "400",
"dataFontColor": "#000000",
"dataFontTextTransform": "none",
"dataPaddingTop": "1rem",
"dataPaddingBottom": "1rem",
"dataPaddingRight": "20px",
"dataPaddingLeft": "20px",
"dataPaddingTopReduced": "0.5rem",
"dataPaddingBottomReduced": "0.5rem",
"dataPaddingRightReduced": "1rem",
"dataPaddingLeftReduced": "1rem",
"dataTextAlign": "left",
"dataTextLineHeight": "normal",
"firstChildPaddingLeft": "1.5rem",
"lastChildPaddingRight": "1.5rem",
"firstChildPaddingLeftReduced": "20px",
"lastChildPaddingRightReduced": "20px",
"headerBackgroundColor": "#5f249f",
"headerBorderRadius": "4px",
"headerFontFamily": "Open Sans, sans-serif",
"headerFontSize": "0.875rem",
"headerFontStyle": "normal",
"headerFontWeight": "400",
"headerFontColor": "#ffffff",
"headerFontTextTransform": "none",
"headerPaddingTop": "1rem",
"headerPaddingBottom": "1rem",
"headerPaddingRight": "20px",
"headerPaddingLeft": "20px",
"headerPaddingTopReduced": "0.5rem",
"headerPaddingBottomReduced": "0.5rem",
"headerPaddingRightReduced": "1rem",
"headerPaddingLeftReduced": "1rem",
"headerTextAlign": "left",
"headerTextLineHeight": "normal",
"scrollBarThumbColor": "#666666",
"scrollBarTrackColor": "#cccccc",
"sortIconColor": "#ffffff",
"actionIconColor": "#5f249f",
"disabledActionIconColor": "#999999",
"hoverActionIconColor": "#5f249f",
"focusActionIconColor": "#5f249f",
"activeActionIconColor": "#5f249f",
"actionBackgroundColor": "transparent",
"disabledActionBackgroundColor": "transparent",
"hoverActionBackgroundColor": "#f2f2f2",
"focusActionBorderColor": "#0095ff",
"activeActionBackgroundColor": "#cccccc"
},
"tabs": {
"fontFamily": "Open Sans, sans-serif",
"fontSize": "1rem",
"fontStyle": "normal",
"fontWeight": "600",
"fontTextTransform": "none",
"selectedBackgroundColor": "#ffffff",
"selectedFontColor": "#5f249f",
"selectedIconColor": "#5f249f",
"selectedUnderlineColor": "#5f249f",
"selectedUnderlineThickness": "2px",
"unselectedBackgroundColor": "#ffffff",
"unselectedFontColor": "#666666",
"unselectedIconColor": "#666666",
"disabledFontColor": "#999999",
"disabledIconColor": "#999999",
"disabledFontStyle": "normal",
"hoverBackgroundColor": "#f2eafa",
"pressedBackgroundColor": "#e5d5f6",
"pressedFontWeight": "600",
"dividerColor": "#bfbfbf",
"dividerThickness": "1px",
"focusOutline": "#5f249f",
"scrollButtonsWidth": "48px"
},
"tag": {
"fontFamily": "Open Sans, sans-serif",
"fontColor": "#000000",
"fontSize": "0.875rem",
"fontStyle": "normal",
"fontWeight": "400",
"labelPaddingTop": "0rem",
"labelPaddingBottom": "0rem",
"labelPaddingLeft": "1rem",
"labelPaddingRight": "1rem",
"height": "40px",
"iconColor": "#ffffff",
"iconSectionWidth": "40px",
"iconHeight": "24px",
"iconWidth": "auto",
"focusColor": "#0095ff"
},
"textarea": {
"fontFamily": "Open Sans, sans-serif",
"enabledBorderColor": "#000000",
"hoverBorderColor": "#a46ede",
"focusBorderColor": "#0095ff",
"disabledBorderColor": "#999999",
"disabledContainerFillColor": "#f2f2f2",
"readOnlyBorderColor": "#999999",
"hoverReadOnlyBorderColor": "#808080",
"errorBorderColor": "#d0011b",
"hoverErrorBorderColor": "#fe0123",
"inputMarginTop": "0.25rem",
"inputMarginBottom": "0.25rem",
"errorMessageColor": "#d0011b",
"labelFontColor": "#000000",
"labelFontSize": "0.875rem",
"labelFontStyle": "normal",
"labelFontWeight": "600",
"labelLineHeight": "1.715em",
"disabledLabelFontColor": "#999999",
"optionalLabelFontWeight": "400",
"helperTextFontColor": "#000000",
"helperTextFontSize": "0.75rem",
"helperTextFontStyle": "normal",
"helperTextFontWeight": "400",
"helperTextLineHeight": "1.5em",
"disabledHelperTextFontColor": "#999999",
"placeholderFontColor": "#000000b3",
"disabledPlaceholderFontColor": "#999999",
"valueFontColor": "#000000",
"valueFontSize": "1rem",
"valueFontStyle": "normal",
"valueFontWeight": "400",
"disabledValueFontColor": "#999999"
},
"textInput": {
"fontFamily": "Open Sans, sans-serif",
"enabledBorderColor": "#000000",
"hoverBorderColor": "#a46ede",
"focusBorderColor": "#0095ff",
"disabledBorderColor": "#999999",
"disabledContainerFillColor": "#f2f2f2",
"readOnlyBorderColor": "#999999",
"hoverReadOnlyBorderColor": "#808080",
"errorBorderColor": "#d0011b",
"hoverErrorBorderColor": "#fe0123",
"inputMarginTop": "0.25rem",
"inputMarginBottom": "0.25rem",
"errorMessageColor": "#d0011b",
"errorIconColor": "#d0011b",
"labelFontColor": "#000000",
"labelFontSize": "0.875rem",
"labelFontStyle": "normal",
"labelFontWeight": "600",
"labelLineHeight": "1.715em",
"disabledLabelFontColor": "#999999",
"optionalLabelFontWeight": "400",
"helperTextFontColor": "#000000",
"helperTextFontSize": "0.75rem",
"helperTextFontStyle": "normal",
"helperTextFontWeight": "400",
"helperTextLineHeight": "1.5em",
"disabledHelperTextFontColor": "#999999",
"prefixColor": "#666666",
"prefixDividerBorderWidth": "1px",
"prefixDividerBorderStyle": "solid",
"prefixDividerPaddingRight": "0.5rem",
"suffixColor": "#666666",
"suffixDividerBorderStyle": "solid",
"suffixDividerBorderWidth": "1px",
"suffixDividerPaddingLeft": "0.5rem",
"disabledPrefixColor": "#bfbfbf",
"disabledSuffixColor": "#bfbfbf",
"placeholderFontColor": "#000000b3",
"disabledPlaceholderFontColor": "#999999",
"valueFontColor": "#000000",
"valueFontSize": "1rem",
"valueFontStyle": "normal",
"valueFontWeight": "400",
"disabledValueFontColor": "#999999",
"actionIconColor": "#000000",
"disabledActionIconColor": "#999999",
"hoverActionIconColor": "#000000",
"focusActionIconColor": "#000000",
"activeActionIconColor": "#000000",
"actionBackgroundColor": "transparent",
"disabledActionBackgroundColor": "transparent",
"hoverActionBackgroundColor": "#f2f2f2",
"focusActionBorderColor": "#0095ff",
"activeActionBackgroundColor": "#cccccc",
"listDialogBackgroundColor": "#ffffff",
"listDialogBorderColor": "#bfbfbf",
"listOptionDividerColor": "#e6e6e6",
"listOptionFontColor": "#000000",
"listOptionFontSize": "0.875rem",
"listOptionFontStyle": "normal",
"listOptionFontWeight": "400",
"systemMessageFontColor": "#666666",
"errorListDialogFontColor": "#000000",
"errorListDialogBackgroundColor": "#fff5f6",
"errorListDialogBorderColor": "#d0011b",
"hoverListOptionBackgroundColor": "#f2f2f2",
"activeListOptionBackgroundColor": "#e6e6e6",
"focusListOptionBorderColor": "#0095ff"
},
"toggleGroup": {
"containerBackgroundColor": "#fafafa",
"containerBorderColor": "#999999",
"labelFontColor": "#000000",
"disabledLabelFontColor": "#999999",
"helperTextFontColor": "#000000",
"disabledHelperTextFontColor": "#999999",
"unselectedBackgroundColor": "#e6e6e6",
"unselectedHoverBackgroundColor": "#cccccc",
"unselectedActiveBackgroundColor": "#5f249f",
"unselectedDisabledBackgroundColor": "#f2f2f2",
"unselectedFontColor": "#000000",
"unselectedDisabledFontColor": "#999999",
"selectedBackgroundColor": "#5f249f",
"selectedHoverBackgroundColor": "#4b1c7d",
"selectedActiveBackgroundColor": "#321353",
"selectedDisabledBackgroundColor": "#f2eafa",
"selectedFontColor": "#ffffff",
"selectedDisabledFontColor": "#cbacec",
"focusColor": "#0095ff",
"labelFontFamily": "Open Sans, sans-serif",
"labelFontSize": "0.875rem",
"labelFontStyle": "normal",
"labelFontWeight": "600",
"labelLineHeight": "1.715em",
"helperTextFontFamily": "Open Sans, sans-serif",
"helperTextFontSize": "0.75rem",
"helperTextFontStyle": "normal",
"helperTextFontWeight": "400",
"helperTextLineHeight": "1.5em",
"optionLabelFontFamily": "Open Sans, sans-serif",
"optionLabelFontSize": "1rem",
"optionLabelFontStyle": "normal",
"optionLabelFontWeight": "400",
"iconPaddingRight": "0.5rem",
"iconPaddingLeft": "0.5rem",
"labelPaddingLeft": "1.5rem",
"labelPaddingRight": "1.5rem",
"iconMarginRight": "0.5rem",
"containerMarginTop": "0.25rem",
"optionBorderThickness": "0px",
"optionBorderStyle": "none",
"optionBorderRadius": "0.25rem",
"containerBorderThickness": "1px",
"containerBorderStyle": "solid",
"containerBorderRadius": "0.375rem",
"optionFocusBorderThickness": "2px"
},
"wizard": {
"visitedStepFontColor": "#000000",
"visitedStepBackgroundColor": "#ffffff",
"visitedStepBorderColor": "#000000",
"unvisitedStepFontColor": "#666666",
"unvisitedLabelFontColor": "#666666",
"unvisitedHelperTextFontColor": "#666666",
"unvisitedStepBackgroundColor": "transparent",
"unvisitedStepBorderColor": "#666666",
"selectedStepFontColor": "#ffffff",
"selectedStepBackgroundColor": "#5f249f",
"selectedStepBorderColor": "#5f249f",
"selectedLabelFontColor": "#000000",
"selectedHelperTextFontColor": "#000000",
"selectedStepWidth": "32px",
"selectedStepHeight": "32px",
"selectedStepBorderThickness": "2px",
"selectedStepBorderStyle": "solid",
"selectedStepBorderRadius": "45px",
"stepFontSize": "1rem",
"stepFontFamily": "Open Sans, sans-serif",
"stepFontStyle": "normal",
"stepFontWeight": "400",
"stepFontTracking": "0.05em",
"stepIconSize": "20px",
"stepWidth": "32px",
"stepHeight": "32px",
"stepBorderThickness": "2px",
"stepBorderStyle": "solid",
"stepBorderRadius": "45px",
"visitedLabelFontColor": "#000000",
"labelFontSize": "1rem",
"labelFontFamily": "Open Sans, sans-serif",
"labelFontStyle": "normal",
"labelFontWeight": "400",
"labelFontTracking": "0em",
"labelFontTextTransform": "none",
"labelTextAlign": "left",
"helperTextFontSize": "0.875rem",
"helperTextFontFamily": "Open Sans, sans-serif",
"helperTextFontStyle": "normal",
"helperTextFontWeight": "400",
"helperTextFontTracking": "0em",
"helperTextFontTextTransform": "none",
"visitedHelperTextFontColor": "#000000",
"helperTextTextAlign": "left",
"disabledStepBackgroundColor": "#f2f2f2",
"disabledStepFontColor": "#999999",
"disabledLabelFontColor": "#999999",
"disabledHelperTextFontColor": "#999999",
"disabledStepBorderColor": "#f2f2f2",
"disabledStepWidth": "32px",
"disabledStepHeight": "32px",
"disabledStepBorderThickness": "2px",
"disabledStepBorderStyle": "solid",
"disabledStepBorderRadius": "45px",
"separatorBorderThickness": "1px",
"separatorBorderStyle": "solid",
"separatorColor": "#666666",
"focusColor": "#0095ff"
}
}More examples can be found in the Halstack Provider section.