Style ~ Inversion
Support a light design, dark design, or both
An inversion toggle can be placed at document level or any level below. Child elements below the toggle will take on inverted styles. If you do not need inverted styles at all, a single boolean disables it from compilation.
Intro
Inversion is a toggle class that inverts the background and foreground colors of a scope. The scope of the inversion depends on where the class is applied; page level or element level. All childs elements of the scope will be impacted. It is the responsibility of a module to implement inverted colors or not. Inversion compilation can be enabled in SCSS using a global toggle.
Normal
No inversion
This is a normal panel
Inverted
Large scope
This is an inverted panel
Inverted
Small scope
This is a normal panel with inline inverted components
Link button Link button with icon Text
| Column one | Column two | Column three |
|---|---|---|
| 1.1 | 2.1 | 3.1 |
| 1.2 | 2.2 | 3.2 |
| 1.3 | 2.3 | 3.3 |