@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(#f6faf7, #0f1413);
--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(#edf2ef, #2c3130);
--md-sys-color-inverse-primary: light-dark(#72d8c2, #006b5b);
--md-sys-color-inverse-surface: light-dark(#2c3130, #dfe4e1);
--md-sys-color-neutral-palette-key-color: light-dark(#737876, #737876);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6e7a76, #6e7a76);
--md-sys-color-on-background: light-dark(#171d1b, #dfe4e1);
--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, #00382f);
--md-sys-color-on-primary-container: light-dark(#ffffff, #ffffff);
--md-sys-color-on-primary-fixed: light-dark(#00201a, #00201a);
--md-sys-color-on-primary-fixed-variant: light-dark(#005144, #005144);
--md-sys-color-on-secondary: light-dark(#ffffff, #11362f);
--md-sys-color-on-secondary-container: light-dark(#476b62, #97bdb2);
--md-sys-color-on-secondary-fixed: light-dark(#00201a, #00201a);
--md-sys-color-on-secondary-fixed-variant: light-dark(#294d45, #294d45);
--md-sys-color-on-surface: light-dark(#171d1b, #dfe4e1);
--md-sys-color-on-surface-variant: light-dark(#3e4946, #bdc9c4);
--md-sys-color-on-tertiary: light-dark(#ffffff, #5a1b0b);
--md-sys-color-on-tertiary-container: light-dark(#ffffff, #ffffff);
--md-sys-color-on-tertiary-fixed: light-dark(#3c0800, #3c0800);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#77311f, #77311f);
--md-sys-color-outline: light-dark(#6d7a76, #87938f);
--md-sys-color-outline-variant: light-dark(#bdc9c4, #3e4946);
--md-sys-color-primary: light-dark(#006a5b, #72d8c2);
--md-sys-color-primary-container: light-dark(#008673, #008673);
--md-sys-color-primary-dim: light-dark(#005e50, #97fee6);
--md-sys-color-primary-fixed: light-dark(#8ff5de, #8ff5de);
--md-sys-color-primary-fixed-dim: light-dark(#72d8c2, #72d8c2);
--md-sys-color-primary-palette-key-color: light-dark(#008673, #008673);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#41655c, #a8cfc4);
--md-sys-color-secondary-container: light-dark(#c3ebdf, #294d45);
--md-sys-color-secondary-dim: light-dark(#355951, #c3ebdf);
--md-sys-color-secondary-fixed: light-dark(#c3ebdf, #c3ebdf);
--md-sys-color-secondary-fixed-dim: light-dark(#a8cfc4, #a8cfc4);
--md-sys-color-secondary-palette-key-color: light-dark(#5a7e75, #5a7e75);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f6faf7, #0f1413);
--md-sys-color-surface-bright: light-dark(#f6faf7, #353a38);
--md-sys-color-surface-container: light-dark(#eaefec, #1b211f);
--md-sys-color-surface-container-high: light-dark(#e4e9e6, #262b29);
--md-sys-color-surface-container-highest: light-dark(#dfe4e1, #313634);
--md-sys-color-surface-container-low: light-dark(#f0f5f2, #171d1b);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0a0f0e);
--md-sys-color-surface-dim: light-dark(#d6dbd8, #0f1413);
--md-sys-color-surface-tint: light-dark(#006b5b, #72d8c2);
--md-sys-color-surface-variant: light-dark(#d9e5e0, #3e4946);
--md-sys-color-tertiary: light-dark(#954733, #ffb4a1);
--md-sys-color-tertiary-container: light-dark(#b35f49, #b35f49);
--md-sys-color-tertiary-dim: light-dark(#863c29, #ff9c83);
--md-sys-color-tertiary-fixed: light-dark(#ffdbd2, #ffdbd2);
--md-sys-color-tertiary-fixed-dim: light-dark(#ffb4a1, #ffb4a1);
--md-sys-color-tertiary-palette-key-color: light-dark(#b35f49, #b35f49);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#f6faf7, #0f1413);
--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(#949997, #606563);
--md-sys-color-inverse-primary: light-dark(#0b8976, #1c907d);
--md-sys-color-inverse-surface: light-dark(#2c3130, #dfe4e1);
--md-sys-color-neutral-palette-key-color: light-dark(#737876, #737876);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6e7a76, #6e7a76);
--md-sys-color-on-background: light-dark(#8c918f, #5e6361);
--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(#f4fffa, #003028);
--md-sys-color-on-primary-container: light-dark(#0b8976, #229480);
--md-sys-color-on-primary-fixed: light-dark(#00574a, #6fd6c0);
--md-sys-color-on-primary-fixed-variant: light-dark(#007463, #48b19c);
--md-sys-color-on-secondary: light-dark(#f4fffa, #082f28);
--md-sys-color-on-secondary-container: light-dark(#5d8178, #678b82);
--md-sys-color-on-secondary-fixed: light-dark(#2f534a, #a6ccc1);
--md-sys-color-on-secondary-fixed-variant: light-dark(#496d64, #82a89e);
--md-sys-color-on-surface: light-dark(#5b605e, #9fa4a1);
--md-sys-color-on-surface-variant: light-dark(#717d79, #798682);
--md-sys-color-on-tertiary: light-dark(#fffbff, #511505);
--md-sys-color-on-tertiary-container: light-dark(#b7624c, #c36c55);
--md-sys-color-on-tertiary-fixed: light-dark(#7e3623, #ffb19d);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#9f4f3b, #e5876f);
--md-sys-color-outline: light-dark(#a8b5b0, #4b5753);
--md-sys-color-outline-variant: light-dark(#cfdcd7, #313c39);
--md-sys-color-primary: light-dark(#008471, #35a18d);
--md-sys-color-primary-container: light-dark(#85ebd4, #004238);
--md-sys-color-primary-dim: light-dark(#007565, #35a18d);
--md-sys-color-primary-fixed: light-dark(#85ebd4, #005c4e);
--md-sys-color-primary-fixed-dim: light-dark(#68cfb9, #004238);
--md-sys-color-primary-palette-key-color: light-dark(#008673, #008673);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#577c72, #73988e);
--md-sys-color-secondary-container: light-dark(#bae1d6, #1c4038);
--md-sys-color-secondary-dim: light-dark(#4b6f66, #73998f);
--md-sys-color-secondary-fixed: light-dark(#bae1d6, #34584f);
--md-sys-color-secondary-fixed-dim: light-dark(#9fc5ba, #1c4038);
--md-sys-color-secondary-palette-key-color: light-dark(#5a7e75, #5a7e75);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f6faf7, #0f1413);
--md-sys-color-surface-bright: light-dark(#f6faf7, #353a38);
--md-sys-color-surface-container: light-dark(#eaefec, #1b211f);
--md-sys-color-surface-container-high: light-dark(#e4e9e6, #262b29);
--md-sys-color-surface-container-highest: light-dark(#dfe4e1, #313634);
--md-sys-color-surface-container-low: light-dark(#f0f5f2, #171d1b);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0a0f0e);
--md-sys-color-surface-dim: light-dark(#d6dbd8, #0f1413);
--md-sys-color-surface-tint: light-dark(#006b5b, #72d8c2);
--md-sys-color-surface-variant: light-dark(#d9e5e0, #3e4946);
--md-sys-color-tertiary: light-dark(#b15d47, #d37861);
--md-sys-color-tertiary-container: light-dark(#ffcec2, #672513);
--md-sys-color-tertiary-dim: light-dark(#a1513c, #d37961);
--md-sys-color-tertiary-fixed: light-dark(#ffcec2, #843b28);
--md-sys-color-tertiary-fixed-dim: light-dark(#ffa790, #672513);
--md-sys-color-tertiary-palette-key-color: light-dark(#b35f49, #b35f49);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#f6faf7, #0f1413);
--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(#72d8c2, #005246);
--md-sys-color-inverse-surface: light-dark(#2c3130, #dfe4e1);
--md-sys-color-neutral-palette-key-color: light-dark(#737876, #737876);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6e7a76, #6e7a76);
--md-sys-color-on-background: light-dark(#171d1b, #dfe4e1);
--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, #000e0a);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #001510);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #000e0a);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #001510);
--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, #1f0200);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #290400);
--md-sys-color-outline: light-dark(#232e2b, #e6f3ee);
--md-sys-color-outline-variant: light-dark(#404c48, #b9c5c1);
--md-sys-color-primary: light-dark(#00332a, #b2ffec);
--md-sys-color-primary-container: light-dark(#005347, #6ed4be);
--md-sys-color-primary-dim: light-dark(#00251e, #b6ffed);
--md-sys-color-primary-fixed: light-dark(#005347, #8ff5de);
--md-sys-color-primary-fixed-dim: light-dark(#003a31, #72d8c2);
--md-sys-color-primary-palette-key-color: light-dark(#008673, #008673);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#0c322b, #d1f8ed);
--md-sys-color-secondary-container: light-dark(#2c5047, #a4cbc0);
--md-sys-color-secondary-dim: light-dark(#00251e, #d2f9ee);
--md-sys-color-secondary-fixed: light-dark(#2c5047, #c3ebdf);
--md-sys-color-secondary-fixed-dim: light-dark(#143931, #a8cfc4);
--md-sys-color-secondary-palette-key-color: light-dark(#5a7e75, #5a7e75);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f6faf7, #0f1413);
--md-sys-color-surface-bright: light-dark(#f6faf7, #4c514f);
--md-sys-color-surface-container: light-dark(#dfe4e1, #2c3130);
--md-sys-color-surface-container-high: light-dark(#d1d5d3, #373d3b);
--md-sys-color-surface-container-highest: light-dark(#c3c8c5, #434846);
--md-sys-color-surface-container-low: light-dark(#edf2ef, #1b211f);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b5bab7, #0f1413);
--md-sys-color-surface-tint: light-dark(#006b5b, #72d8c2);
--md-sys-color-surface-variant: light-dark(#d9e5e0, #3e4946);
--md-sys-color-tertiary: light-dark(#541707, #ffece7);
--md-sys-color-tertiary-container: light-dark(#7a3321, #ffaf9a);
--md-sys-color-tertiary-dim: light-dark(#420a00, #ffede9);
--md-sys-color-tertiary-fixed: light-dark(#7a3321, #ffdbd2);
--md-sys-color-tertiary-fixed-dim: light-dark(#5d1e0d, #ffb4a1);
--md-sys-color-tertiary-palette-key-color: light-dark(#b35f49, #b35f49);
}