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-padding-x $padding-x
Description
Horizontal padding of buttons
$button-padding-y $padding-y
Description
Vertical padding 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 light, 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
$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.

In this article