style-guide.less

// -- colors --

// daily stats
@color-up: hsl(163, 72%, 41%);
@color-down: hsl(356, 69%, 56%);

// platforms
@color-facebook: hsl(208, 92%, 53%);
@color-twitter: hsl(203, 89%, 53%);
@color-instagram: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%));
@color-youtube: hsl(348, 97%, 39%);

// dark theme
@color-dark-toggle: linear-gradient(to right,hsl(210, 78%, 56%),hsl(146, 68%, 55%));
@color-dark-bg: hsl(230, 17%, 14%);
@color-dark-top: hsl(232, 19%, 15%);
@color-dark-card: hsl(228, 28%, 20%);
@color-dark-text-hard: hsl(0, 0%, 100%);
@color-dark-text-easy: hsl(228, 34%, 66%);


// light theme
@color-toggle: hsl(230, 22%, 74%);
@color-bg: hsl(0, 0%, 100%);
@color-top: hsl(225, 100%, 98%);
@color-card: hsl(227, 47%, 96%);
@color-text-hard: hsl(230, 17%, 14%);
@color-text-easy: hsl(228, 12%, 44%);


// -- typography --
@font-family: 'Inter', sans-serif;
@font-weight-regular: 400;
@font-weight-bold: 700;

@font-size: 14px;
@font-size-xxl:3em;
@font-size-xl:1.7em;
@font-size-l: 1.5em;
@font-size-m:1.2em;
@font-size-s: 1em;
@font-size-xs: 0.8em;
@font-stats-count: 2.2em;

.transition {
    -webkit-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}