Dimming center
The Dimming center is a controller for palette and dimming in the system. It is accessible at the top-right in the Topbar.
Variations
The standard button can be used in a normal and raised version, each with an option to use icon in addition to the label.
Dimming center in Topbar
The standard dimming center is accessible from the Topbar.
Specs
How the Dimming center are built up and styled.
Anatomy
The Dimming center is built up by multiple UI components
Colors
The app button uses the raised style.
Element
Color / Style name
1
Topbar border + Text
color-on-background-active
2
Title text + Icons
style-raised-enabled
3
Divider
color-border-divider
4
Outline
color-border-outline
5
Container
color-surface-global
6
Container button
color-surface-section
Typography and icons
The titles are in the overlain style, and labels are in body style.
Text category
Text attributes
1
Overline
AA
Typeface: Open Sans
Weight: Regular
Size: 12px
Lineheight: 24px
2
Body
AA
Typeface: Open Sans
Weight: Regular
Size: 16px
Lineheight: 24px
3
Dimming icon
Library: Material icons
Name: brightness_4
Size: 24px
Measures and spacing
The app button is built up by a circular container with a centered icon.
1
Component measures
2
Spacing
3
Border sizes