@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(#fafbe5, #121408);
--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(#f2f2dd, #2f3223);
--md-sys-color-inverse-primary: light-dark(#b6d300, #566500);
--md-sys-color-inverse-surface: light-dark(#2f3223, #e3e4cf);
--md-sys-color-neutral-palette-key-color: light-dark(#767866, #767866);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#767963, #767963);
--md-sys-color-on-background: light-dark(#1b1d10, #e3e4cf);
--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, #2c3400);
--md-sys-color-on-primary-container: light-dark(#404c00, #d0f100);
--md-sys-color-on-primary-fixed: light-dark(#181e00, #181e00);
--md-sys-color-on-primary-fixed-variant: light-dark(#404c00, #404c00);
--md-sys-color-on-secondary: light-dark(#ffffff, #263514);
--md-sys-color-on-secondary-container: light-dark(#3c4c28, #d6e9ba);
--md-sys-color-on-secondary-fixed: light-dark(#111f03, #111f03);
--md-sys-color-on-secondary-fixed-variant: light-dark(#3c4c28, #3c4c28);
--md-sys-color-on-surface: light-dark(#1b1d10, #e3e4cf);
--md-sys-color-on-surface-variant: light-dark(#464835, #c6c8b0);
--md-sys-color-on-tertiary: light-dark(#ffffff, #133813);
--md-sys-color-on-tertiary-container: light-dark(#2a4f28, #c2eeb9);
--md-sys-color-on-tertiary-fixed: light-dark(#002203, #002203);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#2a4f28, #2a4f28);
--md-sys-color-outline: light-dark(#767963, #90937c);
--md-sys-color-outline-variant: light-dark(#c6c8b0, #464835);
--md-sys-color-primary: light-dark(#566500, #b6d300);
--md-sys-color-primary-container: light-dark(#d0f100, #404c00);
--md-sys-color-primary-dim: light-dark(#4b5800, #dbfd00);
--md-sys-color-primary-fixed: light-dark(#d0f100, #d0f100);
--md-sys-color-primary-fixed-dim: light-dark(#b6d300, #b6d300);
--md-sys-color-primary-palette-key-color: light-dark(#dbfd00, #dbfd00);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#53643e, #bacd9f);
--md-sys-color-secondary-container: light-dark(#d6e9ba, #3c4c28);
--md-sys-color-secondary-dim: light-dark(#475833, #d6e9ba);
--md-sys-color-secondary-fixed: light-dark(#d6e9ba, #d6e9ba);
--md-sys-color-secondary-fixed-dim: light-dark(#bacd9f, #bacd9f);
--md-sys-color-secondary-palette-key-color: light-dark(#6b7d55, #6b7d55);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fafbe5, #121408);
--md-sys-color-surface-bright: light-dark(#fafbe5, #383a2c);
--md-sys-color-surface-container: light-dark(#efefda, #1f2113);
--md-sys-color-surface-container-high: light-dark(#e9ead4, #292b1d);
--md-sys-color-surface-container-highest: light-dark(#e3e4cf, #343627);
--md-sys-color-surface-container-low: light-dark(#f4f5df, #1b1d10);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0d0f04);
--md-sys-color-surface-dim: light-dark(#dbdbc6, #121408);
--md-sys-color-surface-tint: light-dark(#566500, #b6d300);
--md-sys-color-surface-variant: light-dark(#e3e4cb, #464835);
--md-sys-color-tertiary: light-dark(#41673d, #a7d29e);
--md-sys-color-tertiary-container: light-dark(#c2eeb9, #2a4f28);
--md-sys-color-tertiary-dim: light-dark(#365b32, #d0fdc6);
--md-sys-color-tertiary-fixed: light-dark(#c2eeb9, #c2eeb9);
--md-sys-color-tertiary-fixed-dim: light-dark(#a7d29e, #a7d29e);
--md-sys-color-tertiary-palette-key-color: light-dark(#5a8154, #5a8154);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fafbe5, #121408);
--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(#989a87, #646655);
--md-sys-color-inverse-primary: light-dark(#6f8200, #768900);
--md-sys-color-inverse-surface: light-dark(#2f3223, #e3e4cf);
--md-sys-color-neutral-palette-key-color: light-dark(#767866, #767866);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#767963, #767963);
--md-sys-color-on-background: light-dark(#90927f, #626453);
--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(#fcffe0, #252d00);
--md-sys-color-on-primary-container: light-dark(#708200, #798d00);
--md-sys-color-on-primary-fixed: light-dark(#455100, #b4d100);
--md-sys-color-on-primary-fixed-variant: light-dark(#5e6d00, #93aa00);
--md-sys-color-on-secondary: light-dark(#f9ffea, #1f2e0e);
--md-sys-color-on-secondary-container: light-dark(#6e8058, #788a61);
--md-sys-color-on-secondary-fixed: light-dark(#41512d, #b7cb9d);
--md-sys-color-on-secondary-fixed-variant: light-dark(#5b6c46, #94a67b);
--md-sys-color-on-surface: light-dark(#5e6050, #a3a491);
--md-sys-color-on-surface-variant: light-dark(#7a7d67, #82856f);
--md-sys-color-on-tertiary: light-dark(#f7fff1, #0b310d);
--md-sys-color-on-tertiary-container: light-dark(#5c8457, #668e60);
--md-sys-color-on-tertiary-fixed: light-dark(#2f552d, #a4cf9c);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#497045, #81ab7a);
--md-sys-color-outline: light-dark(#b2b49c, #535642);
--md-sys-color-outline-variant: light-dark(#d9dbc1, #393c2a);
--md-sys-color-primary: light-dark(#6b7c00, #859a00);
--md-sys-color-primary-container: light-dark(#c7e700, #353e00);
--md-sys-color-primary-dim: light-dark(#5f6f00, #859b00);
--md-sys-color-primary-fixed: light-dark(#c7e700, #4a5700);
--md-sys-color-primary-fixed-dim: light-dark(#aec900, #353e00);
--md-sys-color-primary-palette-key-color: light-dark(#dbfd00, #dbfd00);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#697a53, #84976d);
--md-sys-color-secondary-container: light-dark(#cce0b1, #2f3f1d);
--md-sys-color-secondary-dim: light-dark(#5c6d47, #85976d);
--md-sys-color-secondary-fixed: light-dark(#cce0b1, #465632);
--md-sys-color-secondary-fixed-dim: light-dark(#b1c496, #2f3f1d);
--md-sys-color-secondary-palette-key-color: light-dark(#6b7d55, #6b7d55);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fafbe5, #121408);
--md-sys-color-surface-bright: light-dark(#fafbe5, #383a2c);
--md-sys-color-surface-container: light-dark(#efefda, #1f2113);
--md-sys-color-surface-container-high: light-dark(#e9ead4, #292b1d);
--md-sys-color-surface-container-highest: light-dark(#e3e4cf, #343627);
--md-sys-color-surface-container-low: light-dark(#f4f5df, #1b1d10);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0d0f04);
--md-sys-color-surface-dim: light-dark(#dbdbc6, #121408);
--md-sys-color-surface-tint: light-dark(#566500, #b6d300);
--md-sys-color-surface-variant: light-dark(#e3e4cb, #464835);
--md-sys-color-tertiary: light-dark(#577e52, #729b6c);
--md-sys-color-tertiary-container: light-dark(#b9e5b0, #1d421c);
--md-sys-color-tertiary-dim: light-dark(#4b7146, #739b6c);
--md-sys-color-tertiary-fixed: light-dark(#b9e5b0, #345a31);
--md-sys-color-tertiary-fixed-dim: light-dark(#9ec896, #1d421c);
--md-sys-color-tertiary-palette-key-color: light-dark(#5a8154, #5a8154);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fafbe5, #121408);
--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(#b6d300, #414d00);
--md-sys-color-inverse-surface: light-dark(#2f3223, #e3e4cf);
--md-sys-color-neutral-palette-key-color: light-dark(#767866, #767866);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#767963, #767963);
--md-sys-color-on-background: light-dark(#1b1d10, #e3e4cf);
--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, #090d00);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #0f1300);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #050e00);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #081400);
--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, #000f01);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #001602);
--md-sys-color-outline: light-dark(#2b2e1c, #f0f2d8);
--md-sys-color-outline-variant: light-dark(#484b38, #c2c5ac);
--md-sys-color-primary: light-dark(#283000, #ddff19);
--md-sys-color-primary-container: light-dark(#434e00, #b3cf00);
--md-sys-color-primary-dim: light-dark(#1c2200, #e0ff3b);
--md-sys-color-primary-fixed: light-dark(#434e00, #d0f100);
--md-sys-color-primary-fixed-dim: light-dark(#2e3600, #b6d300);
--md-sys-color-primary-palette-key-color: light-dark(#dbfd00, #dbfd00);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#223010, #e3f7c6);
--md-sys-color-secondary-container: light-dark(#3e4e2b, #b6c99c);
--md-sys-color-secondary-dim: light-dark(#152305, #e4f8c7);
--md-sys-color-secondary-fixed: light-dark(#3e4e2b, #d6e9ba);
--md-sys-color-secondary-fixed-dim: light-dark(#283716, #bacd9f);
--md-sys-color-secondary-palette-key-color: light-dark(#6b7d55, #6b7d55);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fafbe5, #121408);
--md-sys-color-surface-bright: light-dark(#fafbe5, #4f5141);
--md-sys-color-surface-container: light-dark(#e3e4cf, #2f3223);
--md-sys-color-surface-container-high: light-dark(#d5d6c1, #3b3d2e);
--md-sys-color-surface-container-highest: light-dark(#c7c8b3, #464838);
--md-sys-color-surface-container-low: light-dark(#f2f2dd, #1f2113);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b9baa6, #121408);
--md-sys-color-surface-tint: light-dark(#566500, #b6d300);
--md-sys-color-surface-variant: light-dark(#e3e4cb, #464835);
--md-sys-color-tertiary: light-dark(#0e330f, #cffcc6);
--md-sys-color-tertiary-container: light-dark(#2c512a, #a3ce9b);
--md-sys-color-tertiary-dim: light-dark(#012604, #d0fdc6);
--md-sys-color-tertiary-fixed: light-dark(#2c512a, #c2eeb9);
--md-sys-color-tertiary-fixed-dim: light-dark(#153a15, #a7d29e);
--md-sys-color-tertiary-palette-key-color: light-dark(#5a8154, #5a8154);
}