API
Primary Colors
--mat-sys-primary--mat-sys-on-primary--mat-sys-primary-container--mat-sys-on-primary-container--mat-sys-primary-fixed--mat-sys-primary-fixed-dim--mat-sys-on-priprimarymary-fixed--mat-sys-on-primary-fixed-variant--mat-sys-inverse-primary
Secondary Colors
--mat-sys-secondary--mat-sys-on-secondary--mat-sys-secondary-container--mat-sys-on-secondary-container--mat-sys-secondary-fixed--mat-sys-secondary-fixed-dim--mat-sys-on-prisecondarymary-fixed--mat-sys-on-secondary-fixed-variant--mat-sys-inverse-secondary
Tertiary Colors
--mat-sys-tertiary--mat-sys-on-tertiary--mat-sys-tertiary-container--mat-sys-on-tertiary-container--mat-sys-tertiary-fixed--mat-sys-tertiary-fixed-dim--mat-sys-on-pritertiarymary-fixed--mat-sys-on-tertiary-fixed-variant--mat-sys-inverse-tertiary
Error Colors
--mat-sys-error--mat-sys-on-error--mat-sys-error-container--mat-sys-on-error-container--mat-sys-error-fixed--mat-sys-error-fixed-dim--mat-sys-on-prierrormary-fixed--mat-sys-on-error-fixed-variant--mat-sys-inverse-error
Neutral Colors
--mat-sys-neutral--mat-sys-on-neutral--mat-sys-neutral-container--mat-sys-on-neutral-container--mat-sys-neutral-fixed--mat-sys-neutral-fixed-dim--mat-sys-on-prineutralmary-fixed--mat-sys-on-neutral-fixed-variant--mat-sys-inverse-neutral
Neutral-variant Colors
--mat-sys-neutral-variant--mat-sys-on-neutral-variant--mat-sys-neutral-variant-container--mat-sys-on-neutral-variant-container--mat-sys-neutral-variant-fixed--mat-sys-neutral-variant-fixed-dim--mat-sys-on-prineutral-variantmary-fixed--mat-sys-on-neutral-variant-fixed-variant--mat-sys-inverse-neutral-variant
--mat-sys-primary-0--mat-sys-primary-4--mat-sys-primary-6--mat-sys-primary-10--mat-sys-primary-12--mat-sys-primary-17--mat-sys-primary-20--mat-sys-primary-22--mat-sys-primary-24--mat-sys-primary-25--mat-sys-primary-30--mat-sys-primary-35--mat-sys-primary-40--mat-sys-primary-50--mat-sys-primary-60--mat-sys-primary-70--mat-sys-primary-80--mat-sys-primary-87--mat-sys-primary-90--mat-sys-primary-92--mat-sys-primary-94--mat-sys-primary-95--mat-sys-primary-96--mat-sys-primary-98--mat-sys-primary-99--mat-sys-primary-100
--mat-sys-secondary-0--mat-sys-secondary-4--mat-sys-secondary-6--mat-sys-secondary-10--mat-sys-secondary-12--mat-sys-secondary-17--mat-sys-secondary-20--mat-sys-secondary-22--mat-sys-secondary-24--mat-sys-secondary-25--mat-sys-secondary-30--mat-sys-secondary-35--mat-sys-secondary-40--mat-sys-secondary-50--mat-sys-secondary-60--mat-sys-secondary-70--mat-sys-secondary-80--mat-sys-secondary-87--mat-sys-secondary-90--mat-sys-secondary-92--mat-sys-secondary-94--mat-sys-secondary-95--mat-sys-secondary-96--mat-sys-secondary-98--mat-sys-secondary-99--mat-sys-secondary-100
--mat-sys-tertiary-0--mat-sys-tertiary-4--mat-sys-tertiary-6--mat-sys-tertiary-10--mat-sys-tertiary-12--mat-sys-tertiary-17--mat-sys-tertiary-20--mat-sys-tertiary-22--mat-sys-tertiary-24--mat-sys-tertiary-25--mat-sys-tertiary-30--mat-sys-tertiary-35--mat-sys-tertiary-40--mat-sys-tertiary-50--mat-sys-tertiary-60--mat-sys-tertiary-70--mat-sys-tertiary-80--mat-sys-tertiary-87--mat-sys-tertiary-90--mat-sys-tertiary-92--mat-sys-tertiary-94--mat-sys-tertiary-95--mat-sys-tertiary-96--mat-sys-tertiary-98--mat-sys-tertiary-99--mat-sys-tertiary-100
--mat-sys-error-0--mat-sys-error-4--mat-sys-error-6--mat-sys-error-10--mat-sys-error-12--mat-sys-error-17--mat-sys-error-20--mat-sys-error-22--mat-sys-error-24--mat-sys-error-25--mat-sys-error-30--mat-sys-error-35--mat-sys-error-40--mat-sys-error-50--mat-sys-error-60--mat-sys-error-70--mat-sys-error-80--mat-sys-error-87--mat-sys-error-90--mat-sys-error-92--mat-sys-error-94--mat-sys-error-95--mat-sys-error-96--mat-sys-error-98--mat-sys-error-99--mat-sys-error-100
--mat-sys-neutral-0--mat-sys-neutral-4--mat-sys-neutral-6--mat-sys-neutral-10--mat-sys-neutral-12--mat-sys-neutral-17--mat-sys-neutral-20--mat-sys-neutral-22--mat-sys-neutral-24--mat-sys-neutral-25--mat-sys-neutral-30--mat-sys-neutral-35--mat-sys-neutral-40--mat-sys-neutral-50--mat-sys-neutral-60--mat-sys-neutral-70--mat-sys-neutral-80--mat-sys-neutral-87--mat-sys-neutral-90--mat-sys-neutral-92--mat-sys-neutral-94--mat-sys-neutral-95--mat-sys-neutral-96--mat-sys-neutral-98--mat-sys-neutral-99--mat-sys-neutral-100
--mat-sys-neutral-variant-0--mat-sys-neutral-variant-4--mat-sys-neutral-variant-6--mat-sys-neutral-variant-10--mat-sys-neutral-variant-12--mat-sys-neutral-variant-17--mat-sys-neutral-variant-20--mat-sys-neutral-variant-22--mat-sys-neutral-variant-24--mat-sys-neutral-variant-25--mat-sys-neutral-variant-30--mat-sys-neutral-variant-35--mat-sys-neutral-variant-40--mat-sys-neutral-variant-50--mat-sys-neutral-variant-60--mat-sys-neutral-variant-70--mat-sys-neutral-variant-80--mat-sys-neutral-variant-87--mat-sys-neutral-variant-90--mat-sys-neutral-variant-92--mat-sys-neutral-variant-94--mat-sys-neutral-variant-95--mat-sys-neutral-variant-96--mat-sys-neutral-variant-98--mat-sys-neutral-variant-99--mat-sys-neutral-variant-100
--mat-seed-primary--mat-seed-secondary:--mat-seed-tertiary--mat-seed-error
.my-custom-element {
// Use primary color with 70% opacity
background-color: rgba(var(--mat-sys-primary-rgb), 0.7);
// Use on-surface color for text
color: var(--mat-sys-on-surface);
// Use error container for highlights
border: 2px solid var(--mat-sys-error-container);
}