Dimming center
Updated:
February 3, 2020
The Dimming center is a controller for palette and dimming in the system. It is accessible at the top-right in the Topbar.
Variations
Dimming center in topbar
The standard dimming center is accessible from the Topbar.
Dimming center in topbar
The standard dimming center is accessible from the Topbar.
Component building blocks
How the Dimming center is built up and styled.
Anatomy
The Dimming center is built up by multiple UI components
Component elements
1
Container
2
Top border
3
Title
4
Label
5
Toggle switch
6
Divider
7
Toggle button
8
Border
9
10
Container
11
Stepper Container
12
Label
Colors and styles
The dimming center use the same container color as the topbar. Note that the labels changes color in the night palette.
Element
Color / Style name
1
Top border
This is some text inside of a div block.
2
Stepper Container
This is some text inside of a div block.
4
Divider
This is some text inside of a div block.
5
Container
This is some text inside of a div block.
6
Container
This is some text inside of a div block.
Element
Color / Style name
1
Top border
This is some text inside of a div block.
This is some text inside of a div block.
2
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
4
Divider
This is some text inside of a div block.
This is some text inside of a div block.
5
Container
This is some text inside of a div block.
This is some text inside of a div block.
6
Container
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Top border
This is some text inside of a div block.
This is some text inside of a div block.
2
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
4
Divider
This is some text inside of a div block.
This is some text inside of a div block.
5
Container
This is some text inside of a div block.
This is some text inside of a div block.
6
Container
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Top border
This is some text inside of a div block.
This is some text inside of a div block.
2
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
4
Divider
This is some text inside of a div block.
This is some text inside of a div block.
5
Container
This is some text inside of a div block.
This is some text inside of a div block.
6
Container
This is some text inside of a div block.
This is some text inside of a div block.
Typography and icons
The label tells you about your location in the application and makes it easy to access other parts.
Specs
This component is built up by a oval slider and icons.
1
Component measures
2
Spacing
3
Border sizes
1
Component measures
2
Spacing
3
Border sizes
States
No items found.
