Customization
The following table lists the available variables for customizing the Default theme.
Variables
Common
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $border-radius | 2px | 2px | |
|
Description
Border radius for all components.
|
|||
| $base-bg | #f6f6f6 | #f6f6f6 | |
|
Description
The background of the components' chrome area.
|
|||
| $base-text | #656565 | #656565 | |
|
Description
The text color of the components' chrome area.
|
|||
| $base-border | rgba( black, .08 ) | rgba( black, .08 ) | |
|
Description
The border color of the components' chrome area.
|
|||
| $base-gradient | $base-bg, darken( $base-bg, 2% ) | $base-bg, darken( $base-bg, 2% ) | |
|
Description
The gradient background of the components' chrome area.
|
|||
| $hovered-bg | #ededed | #ededed | |
|
Description
The background of hovered items.
|
|||
| $hovered-text | $base-text | #656565 | |
|
Description
The text color of hovered items.
|
|||
| $hovered-border | rgba( black, .15 ) | rgba( black, .15 ) | |
|
Description
The border color of hovered items.
|
|||
| $hovered-gradient | $hovered-bg, darken( $hovered-bg, 2% ) | $hovered-bg, darken( $hovered-bg, 2% ) | |
|
Description
The gradient background of hovered items.
|
|||
| $selected-bg | $primary | #ff6358 | |
|
Description
The background of selected items.
|
|||
| $selected-text | contrast-wcag( $selected-bg ) | contrast-wcag( $selected-bg ) | |
|
Description
The text color of selected items.
|
|||
| $selected-border | rgba( black, .1 ) | rgba( black, .1 ) | |
|
Description
The border color of selected items.
|
|||
| $selected-gradient | none | none | |
|
Description
The gradient background of selected items.
|
|||
Buttons
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $button-border-width | 1px | 1px | |
|
Description
Width of border around buttons
|
|||
| $button-border-radius | $border-radius | 2px | |
|
Description
Border radius of buttons
|
|||
| $button-text | $base-text | #656565 | |
|
Description
The text color of the buttons.
|
|||
| $button-bg | $base-bg | #f6f6f6 | |
|
Description
The background of the buttons.
|
|||
| $button-border | $base-border | rgba( black, .08 ) | |
|
Description
The border color of the buttons.
|
|||
| $button-gradient | $base-gradient | $base-bg, darken( $base-bg, 2% ) | |
|
Description
The background gradient of the buttons.
|
|||
| $button-hovered-text | $hovered-text | $base-text | |
|
Description
The text color of hovered buttons.
|
|||
| $button-hovered-bg | $hovered-bg | #ededed | |
|
Description
The background of hovered buttons.
|
|||
| $button-hovered-border | $hovered-border | rgba( black, .15 ) | |
|
Description
The border color of hovered buttons.
|
|||
| $button-hovered-gradient | $hovered-gradient | $hovered-bg, darken( $hovered-bg, 2% ) | |
|
Description
The background gradient of hovered buttons.
|
|||
| $button-pressed-text | $button-text | #656565 | |
|
Description
The text color of pressed buttons.
|
|||
| $button-pressed-bg | $button-bg | #f6f6f6 | |
|
Description
The background color of pressed buttons.
|
|||
| $button-pressed-border | $button-border | rgba( black, .08 ) | |
|
Description
The border color of pressed buttons.
|
|||
| $button-pressed-gradient | none | none | |
|
Description
The background gradient of pressed buttons.
|
|||
| $button-focused-shadow | 0 3px 4px 0 rgba(0, 0, 0, .06) | 0 3px 4px 0 rgba(0, 0, 0, .06) | |
|
Description
The shadow of focused buttons.
|
|||
Charts
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $series-a | #ff6358 | #ff6358 | |
|
Description
The color of the first series.
|
|||
| $series-b | #ffd246 | #ffd246 | |
|
Description
The color of the second series.
|
|||
| $series-c | #78d237 | #78d237 | |
|
Description
The color of the third series.
|
|||
| $series-d | #28b4c8 | #28b4c8 | |
|
Description
The color of the fourth series.
|
|||
| $series-e | #2d73f5 | #2d73f5 | |
|
Description
The color of the fifth series.
|
|||
| $series-f | #aa46be | #aa46be | |
|
Description
The color of the sixth series.
|
|||
| $chart-major-lines | rgba(0, 0, 0, .08) | rgba(0, 0, 0, .08) | |
|
Description
The color of the Chart grid lines (major).
|
|||
| $chart-minor-lines | rgba(0, 0, 0, .04) | rgba(0, 0, 0, .04) | |
|
Description
The color of the Chart grid lines (minor).
|
|||
Color System
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $accent | Color | #ff6358 | #ff6358 |
|
Deprecated
Will be removed in v5. Use `$primary` variable instead.
Description
The color that focuses the user attention.
|
|||
| $accent-contrast | Color | contrast-wcag( $accent ) | contrast-wcag( $accent ) |
|
Deprecated
Will be removed in v5. Use `$primary-contrast` variable instead.
Description
The color used along with the accent color denoted by $primary.
|
|||
| $primary | Color | $accent | #ff6358 |
|
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme. |
|||
| $primary-contrast | Color | $accent-contrast | contrast-wcag( $accent ) |
|
Description
The color used along with the accent color denoted by $primary.
Used to provide contrast between the background and foreground colors. |
|||
| $secondary | Color | #f6f6f6 | #f6f6f6 |
|
Description
The secondary color of the theme.
|
|||
| $secondary-contrast | Color | contrast-wcag( $secondary ) | contrast-wcag( $secondary ) |
|
Description
The color used along with the secondary color denoted by $secondary.
Used to provide contrast between the background and foreground colors. |
|||
| $tertiary | Color | #03a9f4 | #03a9f4 |
|
Description
The tertiary color of the theme.
|
|||
| $tertiary-contrast | Color | contrast-wcag( $tertiary ) | contrast-wcag( $tertiary ) |
|
Description
The color used along with the tertiary color denoted by $tertiary.
Used to provide contrast between the background and foreground colors. |
|||
| $info | Color | #0058e9 | #0058e9 |
|
Description
The color for informational messages and states.
|
|||
| $success | Color | #37b400 | #37b400 |
|
Description
The color for success messages and states.
|
|||
| $warning | Color | #ffc000 | #ffc000 |
|
Description
The color for warning messages and states.
|
|||
| $error | Color | #f31700 | #f31700 |
|
Description
The color for error messages and states.
|
|||
| $dark | Color | #404040 | #404040 |
|
Description
The dark color of the theme.
|
|||
| $light | Color | #ebebeb | #ebebeb |
|
Description
The light color of the theme.
|
|||
| $inverse | if( $is-dark-theme, $light, $dark ) | if( $is-dark-theme, $light, $dark ) | |
|
Description
Inverse color of the theme. Depending on the theme luminance dark or lught, it will be light or dark
|
|||
Component
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $component-bg | $body-bg | ||
|
Description
Background color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`. |
|||
| $component-text | $body-text | ||
|
Description
Text color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$grid-text: component-text !default;`. |
|||
| $component-border | rgba( black, .08 ) | rgba( black, .08 ) | |
|
Description
Border color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`. |
|||
| $widget-bg | $component-bg | ||
|
Deprecated
Will be removed in v5. Use `$component-bg` variable instead.
Description
Background color of a component.
|
|||
| $widget-text | $component-text | ||
|
Deprecated
Will be removed in v5. Use `$component-text` variable instead.
Description
Text color of a component.
|
|||
| $widget-border | $component-border | rgba( black, .08 ) | |
|
Deprecated
Will be removed in v5. Use `$component-border` variable instead.
Description
Border color of a component.
|
|||
Grid
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $grid-bg | $component-bg | ||
|
Description
Background color of the grid component
|
|||
| $grid-text | $component-text | ||
|
Description
Text color of the grid component
|
|||
| $grid-border | $component-border | rgba( black, .08 ) | |
|
Description
Border color of the grid component
|
|||
| $grid-header-bg | $header-bg | ||
|
Description
Background color of grid header
|
|||
| $grid-header-text | $header-text | ||
|
Description
Text color of grid header
|
|||
| $grid-header-border | $grid-border | rgba( black, .08 ) | |
|
Description
Border color of grid header
|
|||
| $grid-header-gradient | $header-gradient | ||
|
Description
Background gradient of grid header
|
|||
| $grid-alt-bg | rgba( contrast-wcag( $grid-bg ), .04 ) | rgba( contrast-wcag( $grid-bg ), .04 ) | |
|
Description
Background color of alternating rows in grid
|
|||
| $grid-alt-text | null | null | |
|
Description
Text color of alternating rows in grid
|
|||
| $grid-alt-border | null | null | |
|
Description
Border color of alternating rows in grid
|
|||
| $grid-hovered-bg | darken($grid-bg, 7%) | darken($grid-bg, 7%) | |
|
Description
Background color of hovered rows in grid
|
|||
| $grid-hovered-text | null | null | |
|
Description
Text color of hovered rows in grid
|
|||
| $grid-hovered-border | null | null | |
|
Description
Border color of hovered rows in grid
|
|||
| $grid-selected-bg | rgba($selected-bg, .25) | rgba($selected-bg, .25) | |
|
Description
Background color of selected rows in grid
|
|||
| $grid-selected-text | null | null | |
|
Description
Text color of selected rows in grid
|
|||
| $grid-selected-border | null | null | |
|
Description
Border color of selected rows in grid
|
|||
Icons
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $icon-font-url | null | null | |
|
Description
The URL to the icon font that will be used by the theme
The default value of `null` embeds the package font with a `data:` URL |
|||
Tabstrip
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $button-padding-x | $padding-x | ||
|
Description
Horizontal padding of buttons
|
|||
| $button-padding-y | $padding-y | ||
|
Description
Vertical padding of buttons
|
|||
| $tabstrip-bg | null | null | |
|
Description
Background color of tabstrip component
|
|||
| $tabstrip-text | $component-text | ||
|
Description
Text color of tabstrip component
|
|||
| $tabstrip-border | $component-border | rgba( black, .08 ) | |
|
Description
Border color of tabstrip component
|
|||
| $tabstrip-item-padding-x | $nav-item-padding-x | ||
|
Description
Horizontal padding of tabs
|
|||
| $tabstrip-item-padding-y | $nav-item-padding-y | ||
|
Description
Vertical padding of tabs
|
|||
| $tabstrip-item-border-width | 1px | 1px | |
|
Description
Width of border around tabs
|
|||
| $tabstrip-item-border-radius | $border-radius | 2px | |
|
Description
Border radius of tabs
|
|||
| $tabstrip-item-gap | $nav-item-margin | ||
|
Description
Spacing between tabs
|
|||
| $tabstrip-item-bg | null | null | |
|
Description
Background color of tabs
|
|||
| $tabstrip-item-text | $link-text | ||
|
Description
Text color of tabs
|
|||
| $tabstrip-item-border | null | null | |
|
Description
Border color of tabs
|
|||
| $tabstrip-item-gradient | null | null | |
|
Description
Background gradient of tabs
|
|||
| $tabstrip-item-hovered-bg | null | null | |
|
Description
Background color of hovered tabs
|
|||
| $tabstrip-item-hovered-text | $link-hover-text | ||
|
Description
Text color of hovered tabs
|
|||
| $tabstrip-item-hovered-border | null | null | |
|
Description
Border color of hovered tabs
|
|||
| $tabstrip-item-hovered-gradient | null | null | |
|
Description
Background gradient of hovered tabs
|
|||
| $tabstrip-item-selected-bg | $component-bg | ||
|
Description
Background color of selected tabs
|
|||
| $tabstrip-item-selected-text | $component-text | ||
|
Description
Text color of selected tabs
|
|||
| $tabstrip-item-selected-border | $component-border | rgba( black, .08 ) | |
|
Description
Border color of selected tabs
|
|||
| $tabstrip-item-selected-gradient | null | null | |
|
Description
Background gradient of selected tabs
|
|||
| $tabstrip-content-padding-x | $tabstrip-item-padding-x | ||
|
Description
Horizontal padding of tabstrip content
|
|||
| $tabstrip-content-padding-y | $tabstrip-item-padding-y | ||
|
Description
Vertical padding of tabstrip content
|
|||
| $tabstrip-content-border-width | 1px | 1px | |
|
Description
Width of border around tabstrip content
|
|||
| $tabstrip-content-bg | $component-bg | ||
|
Description
Background color of tabstrip content
|
|||
| $tabstrip-content-text | $component-text | ||
|
Description
Text color of tabstrip content
|
|||
| $tabstrip-content-border | $component-border | rgba( black, .08 ) | |
|
Description
Border color of tabstrip content
|
|||
Toolbar
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $toolbar-padding-x | $padding-x | ||
|
Description
The horizontal padding of the container.
|
|||
| $toolbar-padding-y | $padding-x | ||
|
Description
The vertical padding of the container.
|
|||
Typography
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $font-size | 14px | 14px | |
|
Description
Base font size across all components.
|
|||
| $font-family | inherit | inherit | |
|
Description
Font family across all components.
|
|||
| $font-family-monospace | SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace | SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace | |
|
Description
Font family for monospaced text. Used for styling the code.
|
|||
| $line-height | (20 / 14) | (20 / 14) | |
|
Description
Line height used along with $font-size.
|
|||
Mixins
exports
Outputs a module once, no matter how many times it is included.
Parameters
- name :
String- The name of the exported module.