@sandlada/material-design-css
Version:
A ready-made npm package for a collection of css styles in the material design style.
184 lines (183 loc) • 11.9 kB
CSS
:root {
--md-sys-color-background: light-dark(#fff7fa, #161215);
--md-sys-color-error: light-dark(#ba1a1a, #ffb4ab);
--md-sys-color-error-container: light-dark(#ffdad6, #93000a);
--md-sys-color-error-dim: light-dark(#a80710, #ff554a);
--md-sys-color-error-palette-key-color: light-dark(#de3730, #de3730);
--md-sys-color-inverse-on-surface: light-dark(#f7eef2, #332f32);
--md-sys-color-inverse-primary: light-dark(#e6b8e3, #775277);
--md-sys-color-inverse-surface: light-dark(#332f32, #e9e0e4);
--md-sys-color-neutral-palette-key-color: light-dark(#7b7578, #7b7578);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7f747c, #7f747c);
--md-sys-color-on-background: light-dark(#1e1b1d, #e9e0e4);
--md-sys-color-on-error: light-dark(#ffffff, #690005);
--md-sys-color-on-error-container: light-dark(#93000a, #ffdad6);
--md-sys-color-on-primary: light-dark(#ffffff, #452447);
--md-sys-color-on-primary-container: light-dark(#fffbff, #110014);
--md-sys-color-on-primary-fixed: light-dark(#2e0f30, #2e0f30);
--md-sys-color-on-primary-fixed-variant: light-dark(#5e3a5e, #5e3a5e);
--md-sys-color-on-secondary: light-dark(#ffffff, #3b2b3a);
--md-sys-color-on-secondary-container: light-dark(#715f6f, #c5aec1);
--md-sys-color-on-secondary-fixed: light-dark(#251725, #251725);
--md-sys-color-on-secondary-fixed-variant: light-dark(#524151, #524151);
--md-sys-color-on-surface: light-dark(#1e1b1d, #e9e0e4);
--md-sys-color-on-surface-variant: light-dark(#4d444b, #d0c3cc);
--md-sys-color-on-tertiary: light-dark(#ffffff, #512225);
--md-sys-color-on-tertiary-container: light-dark(#150002, #150002);
--md-sys-color-on-tertiary-fixed: light-dark(#360d12, #360d12);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#6c373b, #6c373b);
--md-sys-color-outline: light-dark(#7f747c, #998d96);
--md-sys-color-outline-variant: light-dark(#d0c3cc, #4d444b);
--md-sys-color-primary: light-dark(#754f75, #e6b8e3);
--md-sys-color-primary-container: light-dark(#8f678e, #ad83ac);
--md-sys-color-primary-dim: light-dark(#6a466b, #f8c8f4);
--md-sys-color-primary-fixed: light-dark(#ffd6fb, #ffd6fb);
--md-sys-color-primary-fixed-dim: light-dark(#e6b8e3, #e6b8e3);
--md-sys-color-primary-palette-key-color: light-dark(#926a91, #926a91);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#6b5969, #d7c0d3);
--md-sys-color-secondary-container: light-dark(#f4dbef, #524151);
--md-sys-color-secondary-dim: light-dark(#5f4d5d, #f4dbef);
--md-sys-color-secondary-fixed: light-dark(#f4dbef, #f4dbef);
--md-sys-color-secondary-fixed-dim: light-dark(#d7c0d3, #d7c0d3);
--md-sys-color-secondary-palette-key-color: light-dark(#857182, #857182);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #161215);
--md-sys-color-surface-bright: light-dark(#fff7fa, #3c383b);
--md-sys-color-surface-container: light-dark(#f4ecef, #221f21);
--md-sys-color-surface-container-high: light-dark(#eee6ea, #2d292c);
--md-sys-color-surface-container-highest: light-dark(#e9e0e4, #383436);
--md-sys-color-surface-container-low: light-dark(#faf1f5, #1e1b1d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #100d10);
--md-sys-color-surface-dim: light-dark(#e0d8db, #161215);
--md-sys-color-surface-tint: light-dark(#775277, #e6b8e3);
--md-sys-color-surface-variant: light-dark(#eddfe8, #4d444b);
--md-sys-color-tertiary: light-dark(#884e51, #fdb3b6);
--md-sys-color-tertiary-container: light-dark(#a46669, #a46669);
--md-sys-color-tertiary-dim: light-dark(#7a4246, #fdb3b6);
--md-sys-color-tertiary-fixed: light-dark(#ffdada, #ffdada);
--md-sys-color-tertiary-fixed-dim: light-dark(#fdb3b6, #fdb3b6);
--md-sys-color-tertiary-palette-key-color: light-dark(#a46669, #a46669);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff7fa, #161215);
--md-sys-color-error: light-dark(#da342e, #ff5449);
--md-sys-color-error-container: light-dark(#ffcdc7, #7b0007);
--md-sys-color-error-dim: light-dark(#c82623, #ff554a);
--md-sys-color-error-palette-key-color: light-dark(#de3730, #de3730);
--md-sys-color-inverse-on-surface: light-dark(#9d969a, #686366);
--md-sys-color-inverse-primary: light-dark(#956c94, #9c739b);
--md-sys-color-inverse-surface: light-dark(#332f32, #e9e0e4);
--md-sys-color-neutral-palette-key-color: light-dark(#7b7578, #7b7578);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7f747c, #7f747c);
--md-sys-color-on-background: light-dark(#958e92, #666164);
--md-sys-color-on-error: light-dark(#fffbff, #5c0003);
--md-sys-color-on-error-container: light-dark(#e23a32, #f0443b);
--md-sys-color-on-primary: light-dark(#fffbff, #3e1d3f);
--md-sys-color-on-primary-container: light-dark(#956d94, #a0779e);
--md-sys-color-on-primary-fixed: light-dark(#644064, #e4b5e1);
--md-sys-color-on-primary-fixed-variant: light-dark(#80597f, #be92bc);
--md-sys-color-on-secondary: light-dark(#fffbff, #342533);
--md-sys-color-on-secondary-container: light-dark(#887485, #927e90);
--md-sys-color-on-secondary-fixed: light-dark(#584757, #d4bdd0);
--md-sys-color-on-secondary-fixed-variant: light-dark(#736171, #af9aac);
--md-sys-color-on-surface: light-dark(#635e61, #a8a1a4);
--md-sys-color-on-surface-variant: light-dark(#827880, #8b8088);
--md-sys-color-on-tertiary: light-dark(#fffbff, #481b1f);
--md-sys-color-on-tertiary-container: light-dark(#a7696c, #b37376);
--md-sys-color-on-tertiary-fixed: light-dark(#723c40, #fbb1b4);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#915659, #d28e91);
--md-sys-color-outline: light-dark(#bbaeb7, #5b5159);
--md-sys-color-outline-variant: light-dark(#e3d5de, #40383f);
--md-sys-color-primary: light-dark(#8f678e, #ad83ac);
--md-sys-color-primary-container: light-dark(#facaf6, #502e51);
--md-sys-color-primary-dim: light-dark(#825b81, #ae83ac);
--md-sys-color-primary-fixed: light-dark(#facaf6, #694469);
--md-sys-color-primary-fixed-dim: light-dark(#dcafda, #502e51);
--md-sys-color-primary-palette-key-color: light-dark(#926a91, #926a91);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#826f80, #9f8a9c);
--md-sys-color-secondary-container: light-dark(#ead2e5, #453544);
--md-sys-color-secondary-dim: light-dark(#756273, #a08b9d);
--md-sys-color-secondary-fixed: light-dark(#ead2e5, #5d4c5c);
--md-sys-color-secondary-fixed-dim: light-dark(#cdb6c9, #453544);
--md-sys-color-secondary-palette-key-color: light-dark(#857182, #857182);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #161215);
--md-sys-color-surface-bright: light-dark(#fff7fa, #3c383b);
--md-sys-color-surface-container: light-dark(#f4ecef, #221f21);
--md-sys-color-surface-container-high: light-dark(#eee6ea, #2d292c);
--md-sys-color-surface-container-highest: light-dark(#e9e0e4, #383436);
--md-sys-color-surface-container-low: light-dark(#faf1f5, #1e1b1d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #100d10);
--md-sys-color-surface-dim: light-dark(#e0d8db, #161215);
--md-sys-color-surface-tint: light-dark(#775277, #e6b8e3);
--md-sys-color-surface-variant: light-dark(#eddfe8, #4d444b);
--md-sys-color-tertiary: light-dark(#a16467, #c17f82);
--md-sys-color-tertiary-container: light-dark(#ffcdce, #5d2b2e);
--md-sys-color-tertiary-dim: light-dark(#93575a, #c27f82);
--md-sys-color-tertiary-fixed: light-dark(#ffcdce, #784144);
--md-sys-color-tertiary-fixed-dim: light-dark(#f3aaad, #5d2b2e);
--md-sys-color-tertiary-palette-key-color: light-dark(#a46669, #a46669);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff7fa, #161215);
--md-sys-color-error: light-dark(#600004, #ffece9);
--md-sys-color-error-container: light-dark(#98000a, #ffaea4);
--md-sys-color-error-dim: light-dark(#480002, #ffedea);
--md-sys-color-error-palette-key-color: light-dark(#de3730, #de3730);
--md-sys-color-inverse-on-surface: light-dark(#ffffff, #000000);
--md-sys-color-inverse-primary: light-dark(#e6b8e3, #5f3b5f);
--md-sys-color-inverse-surface: light-dark(#332f32, #e9e0e4);
--md-sys-color-neutral-palette-key-color: light-dark(#7b7578, #7b7578);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7f747c, #7f747c);
--md-sys-color-on-background: light-dark(#1e1b1d, #e9e0e4);
--md-sys-color-on-error: light-dark(#ffffff, #000000);
--md-sys-color-on-error-container: light-dark(#ffffff, #220001);
--md-sys-color-on-primary: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-container: light-dark(#ffffff, #110014);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #220425);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #130714);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #1a0c1a);
--md-sys-color-on-surface: light-dark(#000000, #ffffff);
--md-sys-color-on-surface-variant: light-dark(#000000, #ffffff);
--md-sys-color-on-tertiary: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-container: light-dark(#ffffff, #150002);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #290408);
--md-sys-color-outline: light-dark(#322a30, #faecf5);
--md-sys-color-outline-variant: light-dark(#4f464e, #ccbfc8);
--md-sys-color-primary: light-dark(#402042, #ffeafa);
--md-sys-color-primary-container: light-dark(#603d61, #e2b4df);
--md-sys-color-primary-dim: light-dark(#321334, #ffebfa);
--md-sys-color-primary-fixed: light-dark(#603d61, #ffd6fb);
--md-sys-color-primary-fixed-dim: light-dark(#482649, #e6b8e3);
--md-sys-color-primary-palette-key-color: light-dark(#926a91, #926a91);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#362736, #ffeafa);
--md-sys-color-secondary-container: light-dark(#554454, #d3bccf);
--md-sys-color-secondary-dim: light-dark(#291b29, #ffebfa);
--md-sys-color-secondary-fixed: light-dark(#554454, #f4dbef);
--md-sys-color-secondary-fixed-dim: light-dark(#3d2e3c, #d7c0d3);
--md-sys-color-secondary-palette-key-color: light-dark(#857182, #857182);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #161215);
--md-sys-color-surface-bright: light-dark(#fff7fa, #544f52);
--md-sys-color-surface-container: light-dark(#e9e0e4, #332f32);
--md-sys-color-surface-container-high: light-dark(#dad2d6, #3f3a3d);
--md-sys-color-surface-container-highest: light-dark(#ccc4c8, #4a4548);
--md-sys-color-surface-container-low: light-dark(#f7eef2, #221f21);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#beb7ba, #161215);
--md-sys-color-surface-tint: light-dark(#775277, #e6b8e3);
--md-sys-color-surface-variant: light-dark(#eddfe8, #4d444b);
--md-sys-color-tertiary: light-dark(#4b1d21, #ffeceb);
--md-sys-color-tertiary-container: light-dark(#6f3a3d, #f9b0b2);
--md-sys-color-tertiary-dim: light-dark(#3b1115, #ffedec);
--md-sys-color-tertiary-fixed: light-dark(#6f3a3d, #ffdada);
--md-sys-color-tertiary-fixed-dim: light-dark(#542427, #fdb3b6);
--md-sys-color-tertiary-palette-key-color: light-dark(#a46669, #a46669);
}