@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(#f3faff, #0d1418);
--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(#eaf2f7, #2a3235);
--md-sys-color-inverse-primary: light-dark(#e7c361, #755b00);
--md-sys-color-inverse-surface: light-dark(#2a3235, #dce4e8);
--md-sys-color-neutral-palette-key-color: light-dark(#70787c, #70787c);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6b7980, #6b7980);
--md-sys-color-on-background: light-dark(#151d20, #dce4e8);
--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, #3d2e00);
--md-sys-color-on-primary-container: light-dark(#584400, #ffdf90);
--md-sys-color-on-primary-fixed: light-dark(#241a00, #241a00);
--md-sys-color-on-primary-fixed-variant: light-dark(#584400, #584400);
--md-sys-color-on-secondary: light-dark(#ffffff, #352b4b);
--md-sys-color-on-secondary-container: light-dark(#4c4163, #eaddff);
--md-sys-color-on-secondary-fixed: light-dark(#1f1635, #1f1635);
--md-sys-color-on-secondary-fixed-variant: light-dark(#4c4163, #4c4163);
--md-sys-color-on-surface: light-dark(#151d20, #dce4e8);
--md-sys-color-on-surface-variant: light-dark(#3b494f, #bac9d0);
--md-sys-color-on-tertiary: light-dark(#ffffff, #003544);
--md-sys-color-on-tertiary-container: light-dark(#004d62, #baeaff);
--md-sys-color-on-tertiary-fixed: light-dark(#001f29, #001f29);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#004d62, #004d62);
--md-sys-color-outline: light-dark(#6b7980, #84939a);
--md-sys-color-outline-variant: light-dark(#bac9d0, #3b494f);
--md-sys-color-primary: light-dark(#755b00, #e7c361);
--md-sys-color-primary-container: light-dark(#ffdf90, #584400);
--md-sys-color-primary-dim: light-dark(#664f00, #fcd672);
--md-sys-color-primary-fixed: light-dark(#ffdf90, #ffdf90);
--md-sys-color-primary-fixed-dim: light-dark(#e7c361, #e7c361);
--md-sys-color-primary-palette-key-color: light-dark(#917317, #917317);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#64597c, #cec0e8);
--md-sys-color-secondary-container: light-dark(#eaddff, #4c4163);
--md-sys-color-secondary-dim: light-dark(#574d6f, #e2d3fd);
--md-sys-color-secondary-fixed: light-dark(#eaddff, #eaddff);
--md-sys-color-secondary-fixed-dim: light-dark(#cec0e8, #cec0e8);
--md-sys-color-secondary-palette-key-color: light-dark(#7d7195, #7d7195);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f3faff, #0d1418);
--md-sys-color-surface-bright: light-dark(#f3faff, #323a3e);
--md-sys-color-surface-container: light-dark(#e7eff4, #192124);
--md-sys-color-surface-container-high: light-dark(#e1e9ee, #232b2f);
--md-sys-color-surface-container-highest: light-dark(#dce4e8, #2e363a);
--md-sys-color-surface-container-low: light-dark(#edf5fa, #151d20);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #080f13);
--md-sys-color-surface-dim: light-dark(#d3dbe0, #0d1418);
--md-sys-color-surface-tint: light-dark(#755b00, #e7c361);
--md-sys-color-surface-variant: light-dark(#d6e5ed, #3b494f);
--md-sys-color-tertiary: light-dark(#25667c, #93cfe8);
--md-sys-color-tertiary-container: light-dark(#baeaff, #004d62);
--md-sys-color-tertiary-dim: light-dark(#13596f, #9edaf4);
--md-sys-color-tertiary-fixed: light-dark(#baeaff, #baeaff);
--md-sys-color-tertiary-fixed-dim: light-dark(#93cfe8, #93cfe8);
--md-sys-color-tertiary-palette-key-color: light-dark(#427f96, #427f96);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#f3faff, #0d1418);
--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(#91999e, #5d666a);
--md-sys-color-inverse-primary: light-dark(#94761a, #9b7d21);
--md-sys-color-inverse-surface: light-dark(#2a3235, #dce4e8);
--md-sys-color-neutral-palette-key-color: light-dark(#70787c, #70787c);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6b7980, #6b7980);
--md-sys-color-on-background: light-dark(#899196, #5b6368);
--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, #352800);
--md-sys-color-on-primary-container: light-dark(#94761b, #9f8025);
--md-sys-color-on-primary-fixed: light-dark(#5f4900, #e4c05f);
--md-sys-color-on-primary-fixed-variant: light-dark(#7e6302, #bd9c3f);
--md-sys-color-on-secondary: light-dark(#fffbff, #2e2444);
--md-sys-color-on-secondary-container: light-dark(#807499, #8a7ea3);
--md-sys-color-on-secondary-fixed: light-dark(#514768, #cbbee6);
--md-sys-color-on-secondary-fixed-variant: light-dark(#6c6184, #a79ac0);
--md-sys-color-on-surface: light-dark(#586064, #9ca4a9);
--md-sys-color-on-surface-variant: light-dark(#6e7d84, #77858c);
--md-sys-color-on-tertiary: light-dark(#fafdff, #002e3c);
--md-sys-color-on-tertiary-container: light-dark(#458298, #508ca3);
--md-sys-color-on-tertiary-fixed: light-dark(#065368, #91cce5);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#2f6e84, #6da8c0);
--md-sys-color-outline: light-dark(#a5b4bc, #48565d);
--md-sys-color-outline-variant: light-dark(#ccdbe3, #2e3c42);
--md-sys-color-primary: light-dark(#8e7115, #ad8d31);
--md-sys-color-primary-container: light-dark(#fad571, #493800);
--md-sys-color-primary-dim: light-dark(#806403, #ad8d31);
--md-sys-color-primary-fixed: light-dark(#fad571, #654e00);
--md-sys-color-primary-fixed-dim: light-dark(#ddb959, #493800);
--md-sys-color-primary-palette-key-color: light-dark(#917317, #917317);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#7a6f93, #978bb0);
--md-sys-color-secondary-container: light-dark(#e1d2fb, #3f3555);
--md-sys-color-secondary-dim: light-dark(#6d6286, #978bb1);
--md-sys-color-secondary-fixed: light-dark(#e1d2fb, #564c6e);
--md-sys-color-secondary-fixed-dim: light-dark(#c4b7df, #3f3555);
--md-sys-color-secondary-palette-key-color: light-dark(#7d7195, #7d7195);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f3faff, #0d1418);
--md-sys-color-surface-bright: light-dark(#f3faff, #323a3e);
--md-sys-color-surface-container: light-dark(#e7eff4, #192124);
--md-sys-color-surface-container-high: light-dark(#e1e9ee, #232b2f);
--md-sys-color-surface-container-highest: light-dark(#dce4e8, #2e363a);
--md-sys-color-surface-container-low: light-dark(#edf5fa, #151d20);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #080f13);
--md-sys-color-surface-dim: light-dark(#d3dbe0, #0d1418);
--md-sys-color-surface-tint: light-dark(#755b00, #e7c361);
--md-sys-color-surface-variant: light-dark(#d6e5ed, #3b494f);
--md-sys-color-tertiary: light-dark(#3f7c93, #5d99b0);
--md-sys-color-tertiary-container: light-dark(#a6e2fb, #004051);
--md-sys-color-tertiary-dim: light-dark(#316f86, #5d99b1);
--md-sys-color-tertiary-fixed: light-dark(#a6e2fb, #11586d);
--md-sys-color-tertiary-fixed-dim: light-dark(#8ac6de, #004051);
--md-sys-color-tertiary-palette-key-color: light-dark(#427f96, #427f96);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#f3faff, #0d1418);
--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(#e7c361, #5a4500);
--md-sys-color-inverse-surface: light-dark(#2a3235, #dce4e8);
--md-sys-color-neutral-palette-key-color: light-dark(#70787c, #70787c);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6b7980, #6b7980);
--md-sys-color-on-background: light-dark(#151d20, #dce4e8);
--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, #100a00);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #181000);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #0f0524);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #150b2a);
--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, #000d13);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #00141b);
--md-sys-color-outline: light-dark(#202e34, #e3f2fa);
--md-sys-color-outline-variant: light-dark(#3d4b52, #b6c5cd);
--md-sys-color-primary: light-dark(#382a00, #ffeecc);
--md-sys-color-primary-container: light-dark(#5b4600, #e3bf5e);
--md-sys-color-primary-dim: light-dark(#291e00, #ffefcf);
--md-sys-color-primary-fixed: light-dark(#5b4600, #ffdf90);
--md-sys-color-primary-fixed-dim: light-dark(#403100, #e7c361);
--md-sys-color-primary-palette-key-color: light-dark(#917317, #917317);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#302746, #f5edff);
--md-sys-color-secondary-container: light-dark(#4e4465, #cabce4);
--md-sys-color-secondary-dim: light-dark(#231a39, #f6edff);
--md-sys-color-secondary-fixed: light-dark(#4e4465, #eaddff);
--md-sys-color-secondary-fixed-dim: light-dark(#372d4d, #cec0e8);
--md-sys-color-secondary-palette-key-color: light-dark(#7d7195, #7d7195);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f3faff, #0d1418);
--md-sys-color-surface-bright: light-dark(#f3faff, #495155);
--md-sys-color-surface-container: light-dark(#dce4e8, #2a3235);
--md-sys-color-surface-container-high: light-dark(#cdd6da, #353d40);
--md-sys-color-surface-container-highest: light-dark(#c0c8cc, #40484c);
--md-sys-color-surface-container-low: light-dark(#eaf2f7, #192124);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b2babe, #0d1418);
--md-sys-color-surface-tint: light-dark(#755b00, #e7c361);
--md-sys-color-surface-variant: light-dark(#d6e5ed, #3b494f);
--md-sys-color-tertiary: light-dark(#00313f, #dcf4ff);
--md-sys-color-tertiary-container: light-dark(#005065, #8fcbe4);
--md-sys-color-tertiary-dim: light-dark(#00232e, #def4ff);
--md-sys-color-tertiary-fixed: light-dark(#005065, #baeaff);
--md-sys-color-tertiary-fixed-dim: light-dark(#003847, #93cfe8);
--md-sys-color-tertiary-palette-key-color: light-dark(#427f96, #427f96);
}