@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, #191119);
--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(#fdecf8, #382d36);
--md-sys-color-inverse-primary: light-dark(#fea9ff, #a400b6);
--md-sys-color-inverse-surface: light-dark(#382d36, #efdeea);
--md-sys-color-neutral-palette-key-color: light-dark(#81737e, #81737e);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#827280, #827280);
--md-sys-color-on-background: light-dark(#221921, #efdeea);
--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, #580063);
--md-sys-color-on-primary-container: light-dark(#7d008b, #ffd6fb);
--md-sys-color-on-primary-fixed: light-dark(#36003d, #36003d);
--md-sys-color-on-primary-fixed-variant: light-dark(#7d008b, #7d008b);
--md-sys-color-on-secondary: light-dark(#ffffff, #45263c);
--md-sys-color-on-secondary-container: light-dark(#5e3c53, #ffd7ee);
--md-sys-color-on-secondary-fixed: light-dark(#2e1126, #2e1126);
--md-sys-color-on-secondary-fixed-variant: light-dark(#5e3c53, #5e3c53);
--md-sys-color-on-surface: light-dark(#221921, #efdeea);
--md-sys-color-on-surface-variant: light-dark(#50434f, #d4c1d0);
--md-sys-color-on-tertiary: light-dark(#ffffff, #502036);
--md-sys-color-on-tertiary-container: light-dark(#6a364d, #ffd9e5);
--md-sys-color-on-tertiary-fixed: light-dark(#360b21, #360b21);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#6a364d, #6a364d);
--md-sys-color-outline: light-dark(#827280, #9d8c9a);
--md-sys-color-outline-variant: light-dark(#d4c1d0, #50434f);
--md-sys-color-primary: light-dark(#a400b6, #fea9ff);
--md-sys-color-primary-container: light-dark(#ffd6fb, #7d008b);
--md-sys-color-primary-dim: light-dark(#9000a0, #ec3dff);
--md-sys-color-primary-fixed: light-dark(#ffd6fb, #ffd6fb);
--md-sys-color-primary-fixed-dim: light-dark(#fea9ff, #fea9ff);
--md-sys-color-primary-palette-key-color: light-dark(#e600fe, #e600fe);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#78536b, #e7b9d5);
--md-sys-color-secondary-container: light-dark(#ffd7ee, #5e3c53);
--md-sys-color-secondary-dim: light-dark(#6b475f, #ffcfec);
--md-sys-color-secondary-fixed: light-dark(#ffd7ee, #ffd7ee);
--md-sys-color-secondary-fixed-dim: light-dark(#e7b9d5, #e7b9d5);
--md-sys-color-secondary-palette-key-color: light-dark(#926b84, #926b84);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #191119);
--md-sys-color-surface-bright: light-dark(#fff7fa, #41363f);
--md-sys-color-surface-container: light-dark(#fbe9f6, #261d25);
--md-sys-color-surface-container-high: light-dark(#f5e3f0, #312730);
--md-sys-color-surface-container-highest: light-dark(#efdeea, #3c313b);
--md-sys-color-surface-container-low: light-dark(#ffeffa, #221921);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #140b14);
--md-sys-color-surface-dim: light-dark(#e6d5e2, #191119);
--md-sys-color-surface-tint: light-dark(#a400b6, #fea9ff);
--md-sys-color-surface-variant: light-dark(#f1ddec, #50434f);
--md-sys-color-tertiary: light-dark(#854d65, #fab2ce);
--md-sys-color-tertiary-container: light-dark(#ffd9e5, #6a364d);
--md-sys-color-tertiary-dim: light-dark(#784159, #fdb5d1);
--md-sys-color-tertiary-fixed: light-dark(#ffd9e5, #ffd9e5);
--md-sys-color-tertiary-fixed-dim: light-dark(#fab2ce, #fab2ce);
--md-sys-color-tertiary-palette-key-color: light-dark(#a1657e, #a1657e);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff7fa, #191119);
--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(#a3949f, #6d616b);
--md-sys-color-inverse-primary: light-dark(#d100e7, #dc00f3);
--md-sys-color-inverse-surface: light-dark(#382d36, #efdeea);
--md-sys-color-neutral-palette-key-color: light-dark(#81737e, #81737e);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#827280, #827280);
--md-sys-color-on-background: light-dark(#9a8c97, #6b5e69);
--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, #4d0056);
--md-sys-color-on-primary-container: light-dark(#d100e7, #e200fa);
--md-sys-color-on-primary-fixed: light-dark(#860095, #fea5ff);
--md-sys-color-on-primary-fixed-variant: light-dark(#b100c4, #f263ff);
--md-sys-color-on-secondary: light-dark(#fffbff, #3e1f35);
--md-sys-color-on-secondary-container: light-dark(#966e87, #a07892);
--md-sys-color-on-secondary-fixed: light-dark(#644158, #e5b7d3);
--md-sys-color-on-secondary-fixed-variant: light-dark(#805b73, #be94ae);
--md-sys-color-on-surface: light-dark(#685b66, #ae9eaa);
--md-sys-color-on-surface-variant: light-dark(#867683, #8f7e8c);
--md-sys-color-on-tertiary: light-dark(#fffbff, #48192f);
--md-sys-color-on-tertiary-container: light-dark(#a56881, #b0728b);
--md-sys-color-on-tertiary-fixed: light-dark(#703b52, #f7b0cb);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#8f556d, #cf8da7);
--md-sys-color-outline: light-dark(#bfadbb, #5e505c);
--md-sys-color-outline-variant: light-dark(#e7d3e2, #433642);
--md-sys-color-primary: light-dark(#c800de, #eb3bff);
--md-sys-color-primary-container: light-dark(#ffc7fc, #680074);
--md-sys-color-primary-dim: light-dark(#b400c7, #ec3dff);
--md-sys-color-primary-fixed: light-dark(#ffc7fc, #8e009d);
--md-sys-color-primary-fixed-dim: light-dark(#fc9aff, #680074);
--md-sys-color-primary-palette-key-color: light-dark(#e600fe, #e600fe);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#906982, #ae859f);
--md-sys-color-secondary-container: light-dark(#fbcbe8, #503046);
--md-sys-color-secondary-dim: light-dark(#825c75, #ae859f);
--md-sys-color-secondary-fixed: light-dark(#fbcbe8, #69465d);
--md-sys-color-secondary-fixed-dim: light-dark(#ddb0cc, #503046);
--md-sys-color-secondary-palette-key-color: light-dark(#926b84, #926b84);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #191119);
--md-sys-color-surface-bright: light-dark(#fff7fa, #41363f);
--md-sys-color-surface-container: light-dark(#fbe9f6, #261d25);
--md-sys-color-surface-container-high: light-dark(#f5e3f0, #312730);
--md-sys-color-surface-container-highest: light-dark(#efdeea, #3c313b);
--md-sys-color-surface-container-low: light-dark(#ffeffa, #221921);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #140b14);
--md-sys-color-surface-dim: light-dark(#e6d5e2, #191119);
--md-sys-color-surface-tint: light-dark(#a400b6, #fea9ff);
--md-sys-color-surface-variant: light-dark(#f1ddec, #50434f);
--md-sys-color-tertiary: light-dark(#9f637b, #be7e98);
--md-sys-color-tertiary-container: light-dark(#ffcbdd, #5b2940);
--md-sys-color-tertiary-dim: light-dark(#90566e, #bf7e98);
--md-sys-color-tertiary-fixed: light-dark(#ffcbdd, #764057);
--md-sys-color-tertiary-fixed-dim: light-dark(#efa9c4, #5b2940);
--md-sys-color-tertiary-palette-key-color: light-dark(#a1657e, #a1657e);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff7fa, #191119);
--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(#fea9ff, #7f008d);
--md-sys-color-inverse-surface: light-dark(#382d36, #efdeea);
--md-sys-color-neutral-palette-key-color: light-dark(#81737e, #81737e);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#827280, #827280);
--md-sys-color-on-background: light-dark(#221921, #efdeea);
--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, #1b001f);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #25002a);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #1b0315);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #22071b);
--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, #200010);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #290216);
--md-sys-color-outline: light-dark(#342834, #ffeafa);
--md-sys-color-outline-variant: light-dark(#534551, #d0bdcc);
--md-sys-color-primary: light-dark(#51005b, #ffeafa);
--md-sys-color-primary-container: light-dark(#81008f, #fda3ff);
--md-sys-color-primary-dim: light-dark(#3d0044, #ffebfa);
--md-sys-color-primary-fixed: light-dark(#81008f, #ffd6fb);
--md-sys-color-primary-fixed-dim: light-dark(#5c0067, #fea9ff);
--md-sys-color-primary-palette-key-color: light-dark(#e600fe, #e600fe);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#412237, #ffebf4);
--md-sys-color-secondary-container: light-dark(#613e55, #e3b6d1);
--md-sys-color-secondary-dim: light-dark(#32152a, #ffecf5);
--md-sys-color-secondary-fixed: light-dark(#613e55, #ffd7ee);
--md-sys-color-secondary-fixed-dim: light-dark(#48283e, #e7b9d5);
--md-sys-color-secondary-palette-key-color: light-dark(#926b84, #926b84);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #191119);
--md-sys-color-surface-bright: light-dark(#fff7fa, #584c57);
--md-sys-color-surface-container: light-dark(#efdeea, #382d36);
--md-sys-color-surface-container-high: light-dark(#e0d0dc, #433842);
--md-sys-color-surface-container-highest: light-dark(#d2c2ce, #4f434d);
--md-sys-color-surface-container-low: light-dark(#fdecf8, #261d25);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#c4b4c0, #191119);
--md-sys-color-surface-tint: light-dark(#a400b6, #fea9ff);
--md-sys-color-surface-variant: light-dark(#f1ddec, #50434f);
--md-sys-color-tertiary: light-dark(#4b1c32, #ffebf0);
--md-sys-color-tertiary-container: light-dark(#6d384f, #f5afca);
--md-sys-color-tertiary-dim: light-dark(#3b0f25, #ffecf1);
--md-sys-color-tertiary-fixed: light-dark(#6d384f, #ffd9e5);
--md-sys-color-tertiary-fixed-dim: light-dark(#522238, #fab2ce);
--md-sys-color-tertiary-palette-key-color: light-dark(#a1657e, #a1657e);
}