web-expressive/dist/schemes/sun-vibrant.css

A standard-first frontend toolkit based on Material Expressive design language intent.

@layer design-system.tokens{html,[data-theme=sun-vibrant]{--sys-color-primary:light-dark(#964900,#ffb786);--sys-color-surface-tint:light-dark(#964900,#ffb786);--sys-color-on-primary:light-dark(#fff,#502400);--sys-color-primary-container:light-dark(#ffdcc6,#723600);--sys-color-on-primary-container:light-dark(#723600,#ffdcc6);--sys-color-secondary:light-dark(#795831,#ebbf90);--sys-color-on-secondary:light-dark(#fff,#452b08);--sys-color-secondary-container:light-dark(#ffddba,#5f411c);--sys-color-on-secondary-container:light-dark(#5f411c,#ffddba);--sys-color-tertiary:light-dark(#775a1a,#e9c177);--sys-color-on-tertiary:light-dark(#fff,#412d00);--sys-color-tertiary-container:light-dark(#ffdea5,#5d4202);--sys-color-on-tertiary-container:light-dark(#5d4202,#ffdea5);--sys-color-error:light-dark(#ba1a1a,#ffb4ab);--sys-color-on-error:light-dark(#fff,#690005);--sys-color-error-container:light-dark(#ffdad6,#93000a);--sys-color-on-error-container:light-dark(#93000a,#ffdad6);--sys-color-background:light-dark(#fff8f5,#1d1108);--sys-color-on-background:light-dark(#261910,#f7decf);--sys-color-surface:light-dark(#fff8f5,#1d1108);--sys-color-on-surface:light-dark(#261910,#f7decf);--sys-color-surface-variant:light-dark(#fbddcb,#574336);--sys-color-on-surface-variant:light-dark(#574336,#dec1b0);--sys-color-outline:light-dark(#8a7264,#a58c7c);--sys-color-outline-variant:light-dark(#dec1b0,#574336);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#3c2d23,#f7decf);--sys-color-inverse-on-surface:light-dark(#ffede4,#3c2d23);--sys-color-inverse-primary:light-dark(#ffb786,#964900);--sys-color-primary-fixed:light-dark(#ffdcc6,#ffdcc6);--sys-color-on-primary-fixed:light-dark(#311300,#311300);--sys-color-primary-fixed-dim:light-dark(#ffb786,#ffb786);--sys-color-on-primary-fixed-variant:light-dark(#723600,#723600);--sys-color-secondary-fixed:light-dark(#ffddba,#ffddba);--sys-color-on-secondary-fixed:light-dark(#2b1700,#2b1700);--sys-color-secondary-fixed-dim:light-dark(#ebbf90,#ebbf90);--sys-color-on-secondary-fixed-variant:light-dark(#5f411c,#5f411c);--sys-color-tertiary-fixed:light-dark(#ffdea5,#ffdea5);--sys-color-on-tertiary-fixed:light-dark(#261900,#261900);--sys-color-tertiary-fixed-dim:light-dark(#e9c177,#e9c177);--sys-color-on-tertiary-fixed-variant:light-dark(#5d4202,#5d4202);--sys-color-surface-dim:light-dark(#eed5c7,#1d1108);--sys-color-surface-bright:light-dark(#fff8f5,#46362c);--sys-color-surface-container-lowest:light-dark(#fff,#170b05);--sys-color-surface-container-low:light-dark(#fff1ea,#261910);--sys-color-surface-container:light-dark(#ffeade,#2a1d14);--sys-color-surface-container-high:light-dark(#fde3d4,#35271d);--sys-color-surface-container-highest:light-dark(#f7decf,#413128)}}