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