Colors
All colors are provided as custom properties.
To access them the var()
CSS function can be called with the color's name:
.some-example {
background-color: var(--theme-color-primary);
}
--theme-color-ghost
--theme-color-ghost--hover
--theme-color-ghost--active
--theme-color-primary
--theme-color-primary--contrast
--theme-color-primary--hover
--theme-color-primary--active
--theme-color-dynamic
--theme-color-secondary
--theme-color-secondary--hover
--theme-color-secondary--active
--theme-color-component-1
--theme-color-component-1--hover
--theme-color-component-1--active
--theme-color-component-2
--theme-color-component-3
--theme-color-component-4
--theme-color-component-5
--theme-color-component-6
--theme-color-component-7--hover
--theme-color-component-7
--theme-color-component-7--active
--theme-color-component-error
--theme-color-component-8
--theme-color-ghost--selected
--theme-color-ghost--selected-hover
--theme-color-ghost--selected-active
--theme-color-ghost-primary--active
--theme-color-ghost-primary--hover
--theme-color-ghost-alt
--theme-color-ghost-alt--hover
--theme-color-ghost-alt--active
--theme-color-ghost-alt--selected
--theme-color-ghost-alt--selected-hover
--theme-color-ghost-alt--selected-active
--theme-color-primary--disabled
--theme-color-dynamic--hover
--theme-color-dynamic--active
--theme-color-dynamic-alt
--theme-color-dynamic-alt--hover
--theme-color-dynamic-alt--active
--theme-color-component-8--hover
--theme-color-component-9
--theme-color-component-9--hover
--theme-color-component-9--active
--theme-color-component-9--disabled
--theme-color-component-10
--theme-color-component-10--hover
--theme-color-component-10--active
--theme-color-component-10--disabled
--theme-color-1--hover
--theme-color-1--active
--theme-color-component-11
--theme-color-0
--theme-color-1
--theme-color-2
--theme-color-3
--theme-color-4
--theme-color-5
--theme-color-6
--theme-color-7
--theme-color-8
--theme-color-std-bdr
--theme-color-soft-bdr
--theme-color-weak-bdr
--theme-color-x-weak-bdr
--theme-color-focus-bdr
--theme-color-contrast-bdr
--theme-color-alarm
--theme-color-alarm--hover
--theme-color-alarm--active
--theme-color-alarm--contrast
--theme-color-alarm-40
--theme-color-alarm-10
--theme-color-warning
--theme-color-warning--hover
--theme-color-warning--active
--theme-color-warning--contrast
--theme-color-warning-40
--theme-color-warning-10
--theme-color-critical
--theme-color-critical--hover
--theme-color-critical--active
--theme-color-critical--contrast
--theme-color-critical-40
--theme-color-success
--theme-color-success--hover
--theme-color-success--active
--theme-color-success--contrast
--theme-color-success-40
--theme-color-info
--theme-color-info--hover
--theme-color-info--active
--theme-color-info--contrast
--theme-color-info-40
--theme-color-neutral
--theme-color-neutral--hover
--theme-color-neutral--active
--theme-color-neutral--contrast
--theme-color-neutral-40
--theme-color-contrast-text
--theme-color-std-text
--theme-color-soft-text
--theme-color-weak-text
--theme-color-inv-contrast-text
--theme-color-inv-std-text
--theme-color-inv-soft-text
--theme-color-inv-weak-text
--theme-color-alarm-text
--theme-color-shadow-1
--theme-color-shadow-2
--theme-color-shadow-3
--theme-color-lightbox
--theme-color-backdrop
--theme-color-backdrop-3
--theme-chart-1
--theme-chart-1-40
--theme-chart-2
--theme-chart-2-40
--theme-chart-3
--theme-chart-3-40
--theme-chart-4
--theme-chart-4-40
--theme-chart-5
--theme-chart-5-40
--theme-chart-6
--theme-chart-6-40
--theme-chart-7
--theme-chart-7-40
--theme-chart-8
--theme-chart-8-40
--theme-chart-9
--theme-chart-9-40
--theme-chart-10
--theme-chart-10-40
--theme-chart-11
--theme-chart-11-40
--theme-chart-12
--theme-chart-12-40
--theme-chart-13
--theme-chart-13-40
--theme-chart-14
--theme-chart-14-40
--theme-chart-15
--theme-chart-15-40
--theme-chart-16
--theme-chart-16-40
--theme-chart-17
--theme-chart-17-40