Customization

The following table lists the available variables for customizing the Default theme.

Variables

Common

Name Default value Description
$border-radius 2px Border radius for all components.
$base-bg #f6f6f6 The background of the components' chrome area.
$base-text #656565 The text color of the components' chrome area.
$base-border rgba( black, .08 ) The border color of the components' chrome area.
$base-gradient $base-bg, darken( $base-bg, 2% ) The gradient background of the components' chrome area.
$hovered-bg #ededed The background of hovered items.
$hovered-text $base-text The text color of hovered items.
$hovered-border rgba( black, .15 ) The border color of hovered items.
$hovered-gradient $hovered-bg, darken( $hovered-bg, 2% ) The gradient background of hovered items.
$selected-bg $primary The background of selected items.
$selected-text contrast-wcag( $selected-bg ) The text color of selected items.
$selected-border rgba( black, .1 ) The border color of selected items.
$selected-gradient none The gradient background of selected items.

Buttons

Name Default value Description
$button-text $base-text The text color of the buttons.
$button-bg $base-bg The background of the buttons.
$button-border $base-border The border color of the buttons.
$button-gradient $base-gradient The background gradient of the buttons.
$button-hovered-text $hovered-text The text color of hovered buttons.
$button-hovered-bg $hovered-bg The background of hovered buttons.
$button-hovered-border $hovered-border The border color of hovered buttons.
$button-hovered-gradient $hovered-gradient The background gradient of hovered buttons.
$button-pressed-text $button-text The text color of pressed buttons.
$button-pressed-bg $button-bg The background color of pressed buttons.
$button-pressed-border $button-border The border color of pressed buttons.
$button-pressed-gradient none The background gradient of pressed buttons.
$button-focused-shadow 0 3px 4px 0 rgba(0, 0, 0, .06) The shadow of focused buttons.

Charts

Name Default value Description
$series-a #ff6358 The color of the first series.
$series-b #ffd246 The color of the second series.
$series-c #78d237 The color of the third series.
$series-d #28b4c8 The color of the fourth series.
$series-e #2d73f5 The color of the fifth series.
$series-f #aa46be The color of the sixth series.
$chart-major-lines rgba(0, 0, 0, .08) The color of the Chart grid lines (major).
$chart-minor-lines rgba(0, 0, 0, .04) The color of the Chart grid lines (minor).

Color System

Name Default value Description
$accent #ff6358 Deprecated. Will be removed in v5. Use `$primary` variable instead.
$accent-contrast contrast-wcag( $accent ) Deprecated. Will be removed in v5. Use `$primary-contrast` variable instead.
$primary $accent The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$primary-contrast $accent-contrast The color used along with the accent color denoted by $primary.
Used to provide contrast between the background and foreground colors.
$secondary #f6f6f6 The secondary color of the theme.
$secondary-contrast contrast-wcag( $secondary ) The color used along with the secondary color denoted by $secondary.
Used to provide contrast between the background and foreground colors.
$tertiary #03a9f4 The tertiary color of the theme.
$tertiary-contrast contrast-wcag( $tertiary ) The color used along with the tertiary color denoted by $tertiary.
Used to provide contrast between the background and foreground colors.
$info #0058e9 The color for informational messages and states.
$success #37b400 The color for success messages and states.
$warning #ffc000 The color for warning messages and states.
$error #f31700 The color for error messages and states.
$dark #404040 The dark color of the theme.
$light #ebebeb The light color of the theme.
$inverse if( $is-dark-theme, $light, $dark ) Inverse color of the theme. Depending on the theme luminance dark or lught, it will be light or dark

Component

Name Default value Description
$component-bg $body-bg 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 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 ) 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.
$widget-text $component-text Deprecated. Will be removed in v5. Use `$component-text` variable instead.
$widget-border $component-border Deprecated. Will be removed in v5. Use `$component-border` variable instead.

Icons

Name Default value Description
$icon-font-url null 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

Toolbar

Name Default value Description
$toolbar-padding-x $padding-x The horizontal padding of the container.
$toolbar-padding-y $padding-x The vertical padding of the container.

typography

Name Default value Description
$font-size 14px Base font size across all components.
$font-family inherit Font family across all components.
$font-family-monospace SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace Font family for monospaced text. Used for styling the code.
$line-height (20 / 14) 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.

In this article