@groww-tech/mint-css
Version:
A CSS library that provides classes, tokens, variables, fonts and other essential stylings governed under MINT design system, used by Groww
1 lines • 12.4 kB
CSS
html,html[data-theme=dark]{--background-data-viz-lilac:var(--data-viz-lilac);--background-data-viz-lilac-subtle:var(--data-viz-lilac-subtle);--background-data-viz-blue:var(--data-viz-blue);--background-data-viz-blue-subtle:var(--data-viz-blue-subtle);--background-data-viz-sky-blue:var(--data-viz-sky-blue);--background-data-viz-sky-blue-subtle:var(--data-viz-sky-blue-subtle);--background-data-viz-mint-green:var(--data-viz-mint-green);--background-data-viz-mint-green-subtle:var(--data-viz-mint-green-subtle);--background-data-viz-olive-green:var(--data-viz-olive-green);--background-data-viz-olive-green-subtle:var(--data-viz-olive-green-subtle);--background-data-viz-yellow:var(--data-viz-yellow);--background-data-viz-yellow-subtle:var(--data-viz-yellow-subtle);--background-data-viz-orange:var(--data-viz-orange);--background-data-viz-orange-subtle:var(--data-viz-orange-subtle);--background-data-viz-red:var(--data-viz-red);--background-data-viz-red-subtle:var(--data-viz-red-subtle);--background-data-viz-magenta:var(--data-viz-magenta);--background-data-viz-magenta-subtle:var(--data-viz-magenta-subtle);--background-data-viz-brown:var(--data-viz-brown);--background-data-viz-brown-subtle:var(--data-viz-brown-subtle);--background-data-viz-grey:var(--data-viz-grey);--background-data-viz-grey-subtle:var(--data-viz-grey-subtle)}html,html[data-theme=dark]{--border-data-viz-lilac:var(--data-viz-lilac);--border-data-viz-lilac-subtle:var(--data-viz-lilac-subtle);--border-data-viz-blue:var(--data-viz-blue);--border-data-viz-blue-subtle:var(--data-viz-blue-subtle);--border-data-viz-sky-blue:var(--data-viz-sky-blue);--border-data-viz-sky-blue-subtle:var(--data-viz-sky-blue-subtle);--border-data-viz-mint-green:var(--data-viz-mint-green);--border-data-viz-mint-green-subtle:var(--data-viz-mint-green-subtle);--border-data-viz-olive-green:var(--data-viz-olive-green);--border-data-viz-olive-green-subtle:var(--data-viz-olive-green-subtle);--border-data-viz-yellow:var(--data-viz-yellow);--border-data-viz-yellow-subtle:var(--data-viz-yellow-subtle);--border-data-viz-orange:var(--data-viz-orange);--border-data-viz-orange-subtle:var(--data-viz-orange-subtle);--border-data-viz-red:var(--data-viz-red);--border-data-viz-red-subtle:var(--data-viz-red-subtle);--border-data-viz-magenta:var(--data-viz-magenta);--border-data-viz-magenta-subtle:var(--data-viz-magenta-subtle);--border-data-viz-brown:var(--data-viz-brown);--border-data-viz-brown-subtle:var(--data-viz-brown-subtle);--border-data-viz-grey:var(--data-viz-grey);--border-data-viz-grey-subtle:var(--data-viz-grey-subtle)}html,html[data-theme=dark]{--content-data-viz-lilac:var(--data-viz-lilac);--content-data-viz-lilac-subtle:var(--data-viz-lilac-subtle);--content-data-viz-blue:var(--data-viz-blue);--content-data-viz-blue-subtle:var(--data-viz-blue-subtle);--content-data-viz-sky-blue:var(--data-viz-sky-blue);--content-data-viz-sky-blue-subtle:var(--data-viz-sky-blue-subtle);--content-data-viz-mint-green:var(--data-viz-mint-green);--content-data-viz-mint-green-subtle:var(--data-viz-mint-green-subtle);--content-data-viz-olive-green:var(--data-viz-olive-green);--content-data-viz-olive-green-subtle:var(--data-viz-olive-green-subtle);--content-data-viz-yellow:var(--data-viz-yellow);--content-data-viz-yellow-subtle:var(--data-viz-yellow-subtle);--content-data-viz-orange:var(--data-viz-orange);--content-data-viz-orange-subtle:var(--data-viz-orange-subtle);--content-data-viz-red:var(--data-viz-red);--content-data-viz-red-subtle:var(--data-viz-red-subtle);--content-data-viz-magenta:var(--data-viz-magenta);--content-data-viz-magenta-subtle:var(--data-viz-magenta-subtle);--content-data-viz-brown:var(--data-viz-brown);--content-data-viz-brown-subtle:var(--data-viz-brown-subtle);--content-data-viz-grey:var(--data-viz-grey);--content-data-viz-grey-subtle:var(--data-viz-grey-subtle)}html{--background-primary:var(--white);--background-secondary:var(--gray50);--background-tertiary:var(--gray100);--background-disabled:var(--neutral_2);--background-transparent:var(--overlay00);--background-surface-primary:var(--white);--background-surface-secondary:var(--gray50);--background-inverse-primary:var(--gray900);--background-overlay-primary:var(--overlay70);--background-overlay-secondary:var(--overlay30);--background-always-dark:var(--black);--background-always-light:var(--white);--background-accent:var(--green500);--background-positive:var(--green500);--background-negative:var(--red500);--background-warning:var(--yellow500);--background-accent-subtle:var(--green100);--background-positive-subtle:var(--green100);--background-negative-subtle:var(--red100);--background-warning-subtle:var(--yellow100);--background-accent-secondary:var(--purple500);--background-accent-secondary-subtle:var(--purple100);--background-on-warning-subtle:var(--yellow11)}html[data-theme=dark]{--background-primary:var(--black);--background-secondary:var(--gray50);--background-tertiary:var(--gray100);--background-disabled:var(--neutral_2);--background-transparent:var(--overlay00);--background-surface-primary:var(--gray50);--background-surface-secondary:var(--gray100);--background-inverse-primary:var(--white);--background-overlay-primary:var(--overlay70);--background-overlay-secondary:var(--overlay30);--background-always-dark:var(--black);--background-always-light:var(--white);--background-accent:var(--green500);--background-positive:var(--green500);--background-negative:var(--red500);--background-warning:var(--yellow500);--background-accent-subtle:var(--green100);--background-positive-subtle:var(--green100);--background-negative-subtle:var(--red100);--background-warning-subtle:var(--yellow100);--background-accent-secondary:var(--purple500);--background-accent-secondary-subtle:var(--purple100);--background-on-warning-subtle:var(--yellow11)}html,html[data-theme=dark]{--bg-transparent-hover:var(--transparent-selected);--bg-accent-hover:var(--positive-selected);--bg-accent-subtle-hover:var(--positive-subtle-selected);--bg-transparent-accent-hover:var(--transparent-positive-selected);--bg-positive-hover:var(--positive-selected);--bg-positive-subtle-hover:var(--positive-subtle-selected);--bg-transparent-positive-hover:var(--transparent-positive-selected);--bg-negative-hover:var(--negative-selected);--bg-negative-subtle-hover:var(--negative-subtle-selected);--bg-transparent-negative-hover:var(--transparent-negative-selected)}html,html[data-theme=dark]{--bg-transparent-selected:var(--transparent-selected);--bg-accent-selected:var(--positive-selected);--bg-accent-subtle-selected:var(--positive-subtle-selected);--bg-transparent-accent-selected:var(--transparent-positive-selected);--bg-positive-selected:var(--positive-selected);--bg-positive-subtle-selected:var(--positive-subtle-selected);--bg-transparent-positive-selected:var(--transparent-positive-selected);--bg-negative-selected:var(--negative-selected);--bg-negative-subtle-selected:var(--negative-subtle-selected);--bg-transparent-negative-selected:var(--transparent-negative-selected)}html{--border-neutral:var(--gray900)}html,html[data-theme=dark]{--border-primary:var(--gray150);--border-disabled:var(--gray100);--border-accent:var(--green500);--border-positive:var(--green500);--border-negative:var(--red500)}html[data-theme=dark]{--border-neutral:var(--white)}html{--content-primary:var(--gray900);--content-secondary:var(--gray700);--content-tertiary:var(--gray500);--content-inverse-primary:var(--white);--content-inverse-secondary:var(--gray300);--content-disabled:var(--gray400);--content-on-colour:var(--white);--content-on-colour-inverse:var(--gray900);--content-accent:var(--green500);--content-negative:var(--red500);--content-warning:var(--yellow500);--content-positive:var(--green500);--content-accent-secondary:var(--purple500);--content-accent-secondary-subtle:var(--purple300)}html[data-theme=dark]{--content-primary:var(--white);--content-secondary:var(--gray700);--content-tertiary:var(--gray500);--content-inverse-primary:var(--black);--content-inverse-secondary:var(--gray400);--content-disabled:var(--gray500);--content-on-colour:var(--white);--content-on-colour-inverse:var(--black);--content-accent:var(--green500);--content-negative:var(--red500);--content-warning:var(--yellow500);--content-positive:var(--green500);--content-accent-secondary:var(--purple500);--content-accent-secondary-subtle:var(--purple300)}html{--data-viz-lilac:#7a7ac6;--data-viz-lilac-subtle:#dfe0ef;--data-viz-blue:#5669ff;--data-viz-blue-subtle:#cad1fe;--data-viz-sky-blue:#4da4dd;--data-viz-sky-blue-subtle:#c7e2f3;--data-viz-mint-green:#04b488;--data-viz-mint-green-subtle:#b2e7da;--data-viz-olive-green:#a1b55c;--data-viz-olive-green-subtle:#e1e7cd;--data-viz-yellow:#fcce00;--data-viz-yellow-subtle:#fcefb1;--data-viz-orange:#f59817;--data-viz-orange-subtle:#fadfb8;--data-viz-red:#ff5e3b;--data-viz-red-subtle:#f8cbc0;--data-viz-magenta:#c73a75;--data-viz-magenta-subtle:#ecc2d4;--data-viz-brown:#9d615c;--data-viz-brown-subtle:#dfcecd;--data-viz-grey:#808fa3;--data-viz-grey-subtle:#bec6d0}html[data-theme=dark]{--data-viz-lilac:#7a7ac6;--data-viz-lilac-subtle:#1d1e2f;--data-viz-blue:#5669ff;--data-viz-blue-subtle:#1e2553;--data-viz-sky-blue:#4da4dd;--data-viz-sky-blue-subtle:#1b3749;--data-viz-mint-green:#04b488;--data-viz-mint-green-subtle:#053c2f;--data-viz-olive-green:#a1b55c;--data-viz-olive-green-subtle:#353c22;--data-viz-yellow:#fcce00;--data-viz-yellow-subtle:#504306;--data-viz-orange:#f59817;--data-viz-orange-subtle:#4e330d;--data-viz-red:#ff5e3b;--data-viz-red-subtle:#512218;--data-viz-magenta:#c73a75;--data-viz-magenta-subtle:#401729;--data-viz-brown:#9d615c;--data-viz-brown-subtle:#332322;--data-viz-grey:#808fa3;--data-viz-grey-subtle:#434c56}html{--gray900:#44475b;--gray800:#696c7c;--gray700:#7c7e8c;--gray600:#8f919d;--gray500:#a1a3ad;--gray400:#b0b2ba;--gray300:#c7c8ce;--gray200:#dddee1;--gray150:#e9e9eb;--gray100:#f0f0f2;--gray50:#f8f8f8;--green300:#66e3c4;--green100:#e9faf3;--purple500:#5367ff;--purple300:#84a4ff;--purple100:#eef0ff;--yellow500:#ffb61b;--yellow100:#fff5e0;--red500:#ed5533;--red100:#fae9e5;--yellow11:#a16b00;--neutral_2:#f8f8f8}html,html[data-theme=dark]{--black:#121212;--white:#fff;--green500:#04b488;--overlay00:rgba(18,18,18,0);--overlay30:rgba(18,18,18,0.3);--overlay70:rgba(18,18,18,0.7);--transparent-hover:rgba(68,71,91,0.058823529411764705);--accent-hover:#04ad83;--accent-subtle-hover:#ddf5ee;--transparent-accent-hover:rgba(0,179,134,0.058823529411764705);--positive-hover:#04ad83;--positive-subtle-hover:#ddf5ee;--transparent-positive-hover:rgba(0,179,134,0.058823529411764705);--negative-hover:#e15a3e;--negative-subtle-hover:#f9e0db;--transparent-negative-hover:rgba(235,91,60,0.058823529411764705);--transparent-selected:rgba(68,71,91,0.058823529411764705);--accent-selected:#04ad83;--accent-subtle-selected:#ddf5ee;--transparent-accent-selected:rgba(0,179,134,0.058823529411764705);--positive-selected:#04ad83;--positive-subtle-selected:#ddf5ee;--transparent-positive-selected:rgba(0,179,134,0.058823529411764705);--negative-selected:#e15a3e;--negative-subtle-selected:#f9e0db;--transparent-negative-selected:rgba(235,91,60,0.058823529411764705)}html[data-theme=dark]{--gray900:#f8f8f8;--gray800:#d1d1d1;--gray700:#b8b8b8;--gray600:#a0a0a0;--gray500:#888;--gray400:#717171;--gray300:#595959;--gray200:#414141;--gray150:#2e2e2e;--gray100:#252525;--gray50:#1b1b1b;--green300:#0b5e49;--green100:#0f251d;--purple500:#98a4ff;--purple300:#323c89;--purple100:#181a2a;--yellow500:#e7a61a;--yellow100:#46391d;--red500:#ff5e3b;--red100:#411d16;--yellow11:#f5bc56;--neutral_2:#1b1b1b}html.color-theme-in-transition,html.color-theme-in-transition *,html.color-theme-in-transition :after,html.color-theme-in-transition :before{transition:all .3s;transition-delay:0}html{--dangerouslySetPrimaryBg:#fff;--tempNbtPink:#f1e3f3;--tempNbtYellow:#fff3c8;--tempNbtBlue:#d6eeff;--tempNbtGray:#f0f0f2;--tempNbtRed:#ffc7bb}html[data-theme=dark]{--dangerouslySetPrimaryBg:#121212;--tempNbtPink:#9b63a3;--tempNbtYellow:#b27a00;--tempNbtBlue:#3e79a4;--tempNbtGray:#5c5c6f;--tempNbtRed:#c85d0f}html{--font-size-12:0.75rem;--font-size-14:0.875rem;--font-size-16:1rem;--font-size-18:1.125rem;--font-size-20:1.25rem;--font-size-22:1.375rem;--font-size-24:1.5rem;--font-size-28:1.75rem;--font-size-32:2rem;--font-size-40:2.5rem;--font-size-44:2.75rem;--font-size-56:3.5rem;--font-weight-regular:435;--font-weight-medium:535;--font-weight-bold:660}