.primary { background-color: var(--md-sys-color-primary); } .primary-text { color: var(--md-sys-color-primary); } .on-primary { background-color: var(--md-sys-color-on-primary); } .on-primary-text { color: var(--md-sys-color-on-primary); } .primary-container { background-color: var(--md-sys-color-primary-container); } .primary-container-text { color: var(--md-sys-color-primary-container); } .on-primary-container { background-color: var(--md-sys-color-on-primary-container); } .on-primary-container-text { color: var(--md-sys-color-on-primary-container); } .primary-fixed { background-color: var(--md-sys-color-primary-fixed); } .primary-fixed-text { color: var(--md-sys-color-primary-fixed); } .on-primary-fixed { background-color: var(--md-sys-color-on-primary-fixed); } .on-primary-fixed-text { color: var(--md-sys-color-on-primary-fixed); } .primary-fixed-dim { background-color: var(--md-sys-color-primary-fixed-dim); } .primary-fixed-dim-text { color: var(--md-sys-color-primary-fixed-dim); } .on-primary-fixed-variant { background-color: var(--md-sys-color-on-primary-fixed-variant); } .on-primary-fixed-variant-text { color: var(--md-sys-color-on-primary-fixed-variant); } .secondary { background-color: var(--md-sys-color-secondary); } .secondary-text { color: var(--md-sys-color-secondary); } .on-secondary { background-color: var(--md-sys-color-on-secondary); } .on-secondary-text { color: var(--md-sys-color-on-secondary); } .secondary-container { background-color: var(--md-sys-color-secondary-container); } .secondary-container-text { color: var(--md-sys-color-secondary-container); } .on-secondary-container { background-color: var(--md-sys-color-on-secondary-container); } .on-secondary-container-text { color: var(--md-sys-color-on-secondary-container); } .secondary-fixed { background-color: var(--md-sys-color-secondary-fixed); } .secondary-fixed-text { color: var(--md-sys-color-secondary-fixed); } .on-secondary-fixed { background-color: var(--md-sys-color-on-secondary-fixed); } .on-secondary-fixed-text { color: var(--md-sys-color-on-secondary-fixed); } .secondary-fixed-dim { background-color: var(--md-sys-color-secondary-fixed-dim); } .secondary-fixed-dim-text { color: var(--md-sys-color-secondary-fixed-dim); } .on-secondary-fixed-variant { background-color: var(--md-sys-color-on-secondary-fixed-variant); } .on-secondary-fixed-variant-text { color: var(--md-sys-color-on-secondary-fixed-variant); } .tertiary { background-color: var(--md-sys-color-tertiary); } .tertiary-text { color: var(--md-sys-color-tertiary); } .on-tertiary { background-color: var(--md-sys-color-on-tertiary); } .on-tertiary-text { color: var(--md-sys-color-on-tertiary); } .tertiary-container { background-color: var(--md-sys-color-tertiary-container); } .tertiary-container-text { color: var(--md-sys-color-tertiary-container); } .on-tertiary-container { background-color: var(--md-sys-color-on-tertiary-container); } .on-tertiary-container-text { color: var(--md-sys-color-on-tertiary-container); } .tertiary-fixed { background-color: var(--md-sys-color-tertiary-fixed); } .tertiary-fixed-text { color: var(--md-sys-color-tertiary-fixed); } .on-tertiary-fixed { background-color: var(--md-sys-color-on-tertiary-fixed); } .on-tertiary-fixed-text { color: var(--md-sys-color-on-tertiary-fixed); } .tertiary-fixed-dim { background-color: var(--md-sys-color-tertiary-fixed-dim); } .tertiary-fixed-dim-text { color: var(--md-sys-color-tertiary-fixed-dim); } .on-tertiary-fixed-variant { background-color: var(--md-sys-color-on-tertiary-fixed-variant); } .on-tertiary-fixed-variant-text { color: var(--md-sys-color-on-tertiary-fixed-variant); } .error { background-color: var(--md-sys-color-error); } .error-text { color: var(--md-sys-color-error); } .on-error { background-color: var(--md-sys-color-on-error); } .on-error-text { color: var(--md-sys-color-on-error); } .error-container { background-color: var(--md-sys-color-error-container); } .error-container-text { color: var(--md-sys-color-error-container); } .on-error-container { background-color: var(--md-sys-color-on-error-container); } .on-error-container-text { color: var(--md-sys-color-on-error-container); } .outline { background-color: var(--md-sys-color-outline); } .outline-text { color: var(--md-sys-color-outline); } .background { background-color: var(--md-sys-color-background); } .background-text { color: var(--md-sys-color-background); } .on-background { background-color: var(--md-sys-color-on-background); } .on-background-text { color: var(--md-sys-color-on-background); } .surface { background-color: var(--md-sys-color-surface); } .surface-text { color: var(--md-sys-color-surface); } .on-surface { background-color: var(--md-sys-color-on-surface); } .on-surface-text { color: var(--md-sys-color-on-surface); } .surface-variant { background-color: var(--md-sys-color-surface-variant); } .surface-variant-text { color: var(--md-sys-color-surface-variant); } .on-surface-variant { background-color: var(--md-sys-color-on-surface-variant); } .on-surface-variant-text { color: var(--md-sys-color-on-surface-variant); } .inverse-surface { background-color: var(--md-sys-color-inverse-surface); } .inverse-surface-text { color: var(--md-sys-color-inverse-surface); } .inverse-on-surface { background-color: var(--md-sys-color-inverse-on-surface); } .inverse-on-surface-text { color: var(--md-sys-color-inverse-on-surface); } .inverse-primary { background-color: var(--md-sys-color-inverse-primary); } .inverse-primary-text { color: var(--md-sys-color-inverse-primary); } .shadow { background-color: var(--md-sys-color-shadow); } .shadow-text { color: var(--md-sys-color-shadow); } .surface-tint { background-color: var(--md-sys-color-surface-tint); } .surface-tint-text { color: var(--md-sys-color-surface-tint); } .outline-variant { background-color: var(--md-sys-color-outline-variant); } .outline-variant-text { color: var(--md-sys-color-outline-variant); } .scrim { background-color: var(--md-sys-color-scrim); } .scrim-text { color: var(--md-sys-color-scrim); } .surface-container-highest { background-color: var(--md-sys-color-surface-container-highest); } .surface-container-highest-text { color: var(--md-sys-color-surface-container-highest); } .surface-container-high { background-color: var(--md-sys-color-surface-container-high); } .surface-container-high-text { color: var(--md-sys-color-surface-container-high); } .surface-container { background-color: var(--md-sys-color-surface-container); } .surface-container-text { color: var(--md-sys-color-surface-container); } .surface-container-low { background-color: var(--md-sys-color-surface-container-low); } .surface-container-low-text { color: var(--md-sys-color-surface-container-low); } .surface-container-lowest { background-color: var(--md-sys-color-surface-container-lowest); } .surface-container-lowest-text { color: var(--md-sys-color-surface-container-lowest); } .surface-bright { background-color: var(--md-sys-color-surface-bright); } .surface-bright-text { color: var(--md-sys-color-surface-bright); } .surface-dim { background-color: var(--md-sys-color-surface-dim); } .surface-dim-text { color: var(--md-sys-color-surface-dim); }