@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(#e7b8e4, #785177);
--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(#1e1a1d, #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(#6b466b, #6b466b);
--md-sys-color-on-primary-fixed: light-dark(#2e0e31, #2e0e31);
--md-sys-color-on-primary-fixed-variant: light-dark(#5e3a5f, #5e3a5f);
--md-sys-color-on-secondary: light-dark(#ffffff, #3b2b3a);
--md-sys-color-on-secondary-container: light-dark(#6e5b6c, #c5aec1);
--md-sys-color-on-secondary-fixed: light-dark(#251725, #251725);
--md-sys-color-on-secondary-fixed-variant: light-dark(#534151, #534151);
--md-sys-color-on-surface: light-dark(#1e1a1d, #e9e0e4);
--md-sys-color-on-surface-variant: light-dark(#4d444b, #d0c3cc);
--md-sys-color-on-tertiary: light-dark(#ffffff, #512127);
--md-sys-color-on-tertiary-container: light-dark(#7a4247, #7a4247);
--md-sys-color-on-tertiary-fixed: light-dark(#370c13, #370c13);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#6c373c, #6c373c);
--md-sys-color-outline: light-dark(#7f747c, #998d96);
--md-sys-color-outline-variant: light-dark(#d0c3cc, #4d444b);
--md-sys-color-primary: light-dark(#785177, #ffd6fb);
--md-sys-color-primary-container: light-dark(#e7b8e4, #e7b8e4);
--md-sys-color-primary-dim: light-dark(#6b466b, #f8c8f5);
--md-sys-color-primary-fixed: light-dark(#ffd6fb, #ffd6fb);
--md-sys-color-primary-fixed-dim: light-dark(#e7b8e4, #e7b8e4);
--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(#eed6ea, #534151);
--md-sys-color-secondary-dim: light-dark(#5f4d5d, #f1d8ed);
--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, #221e21);
--md-sys-color-surface-container-high: light-dark(#eee6ea, #2d292c);
--md-sys-color-surface-container-highest: light-dark(#e9e0e4, #383336);
--md-sys-color-surface-container-low: light-dark(#faf1f5, #1e1a1d);
--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(#785177, #e7b8e4);
--md-sys-color-surface-variant: light-dark(#eddfe8, #4d444b);
--md-sys-color-tertiary: light-dark(#884e53, #ffdadb);
--md-sys-color-tertiary-container: light-dark(#feb3b8, #feb3b8);
--md-sys-color-tertiary-dim: light-dark(#7a4247, #feb3b8);
--md-sys-color-tertiary-fixed: light-dark(#ffdadb, #ffdadb);
--md-sys-color-tertiary-fixed-dim: light-dark(#feb3b8, #feb3b8);
--md-sys-color-tertiary-palette-key-color: light-dark(#feb3b8, #feb3b8);
}
: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, #3e1d40);
--md-sys-color-on-primary-container: light-dark(#956c94, #a0769f);
--md-sys-color-on-primary-fixed: light-dark(#643f64, #e4b5e1);
--md-sys-color-on-primary-fixed-variant: light-dark(#805980, #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, #d5bdd1);
--md-sys-color-on-secondary-fixed-variant: light-dark(#746172, #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, #491b20);
--md-sys-color-on-tertiary-container: light-dark(#a8686d, #b37277);
--md-sys-color-on-tertiary-fixed: light-dark(#733c41, #fbb0b5);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#91555a, #d38d92);
--md-sys-color-outline: light-dark(#bbaeb7, #5b5159);
--md-sys-color-outline-variant: light-dark(#e3d5de, #40383f);
--md-sys-color-primary: light-dark(#90678f, #ae83ac);
--md-sys-color-primary-container: light-dark(#facaf7, #502e51);
--md-sys-color-primary-dim: light-dark(#825b81, #ae83ac);
--md-sys-color-primary-fixed: light-dark(#facaf7, #694469);
--md-sys-color-primary-fixed-dim: light-dark(#ddafda, #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, #a08a9d);
--md-sys-color-secondary-container: light-dark(#ead2e6, #453544);
--md-sys-color-secondary-dim: light-dark(#756273, #a08b9d);
--md-sys-color-secondary-fixed: light-dark(#ead2e6, #5d4b5c);
--md-sys-color-secondary-fixed-dim: light-dark(#cdb6ca, #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, #221e21);
--md-sys-color-surface-container-high: light-dark(#eee6ea, #2d292c);
--md-sys-color-surface-container-highest: light-dark(#e9e0e4, #383336);
--md-sys-color-surface-container-low: light-dark(#faf1f5, #1e1a1d);
--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(#785177, #e7b8e4);
--md-sys-color-surface-variant: light-dark(#eddfe8, #4d444b);
--md-sys-color-tertiary: light-dark(#a26368, #c27e83);
--md-sys-color-tertiary-container: light-dark(#ffcdcf, #5d2a30);
--md-sys-color-tertiary-dim: light-dark(#93575c, #c27f84);
--md-sys-color-tertiary-fixed: light-dark(#ffcdcf, #784146);
--md-sys-color-tertiary-fixed-dim: light-dark(#f3aaaf, #5d2a30);
--md-sys-color-tertiary-palette-key-color: light-dark(#feb3b8, #feb3b8);
}
: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(#e7b8e4, #5f3b60);
--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(#1e1a1d, #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, #230426);
--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, #290309);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #290309);
--md-sys-color-outline: light-dark(#322a31, #faecf5);
--md-sys-color-outline-variant: light-dark(#50464e, #ccbfc8);
--md-sys-color-primary: light-dark(#412042, #ffeafa);
--md-sys-color-primary-container: light-dark(#613c61, #e7b8e4);
--md-sys-color-primary-dim: light-dark(#321335, #ffebfa);
--md-sys-color-primary-fixed: light-dark(#613c61, #ffd6fb);
--md-sys-color-primary-fixed-dim: light-dark(#482649, #e7b8e4);
--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(#372736, #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(#3d2e3d, #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, #221e21);
--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(#785177, #e7b8e4);
--md-sys-color-surface-variant: light-dark(#eddfe8, #4d444b);
--md-sys-color-tertiary: light-dark(#4c1d22, #ffebec);
--md-sys-color-tertiary-container: light-dark(#6f393e, #feb3b8);
--md-sys-color-tertiary-dim: light-dark(#3c1016, #ffeced);
--md-sys-color-tertiary-fixed: light-dark(#6f393e, #ffdadb);
--md-sys-color-tertiary-fixed-dim: light-dark(#542329, #feb3b8);
--md-sys-color-tertiary-palette-key-color: light-dark(#feb3b8, #feb3b8);
}