@test-runner/web
Version:
88 lines (78 loc) • 2.59 kB
CSS
:root {
/* primary colour */
--primary-hue: 38;
--primary-lightness-step: 20%;
--primary-lighter: hsl(var(--primary-hue), 100%, calc(50% + (2 * var(--primary-lightness-step))));
--primary-light: hsl(var(--primary-hue), 100%, calc(50% + (1 * var(--primary-lightness-step))));
--primary: hsl(var(--primary-hue), 100%, 50%);
--primary-dark: hsl(var(--primary-hue), 100%, calc(50% - (1 * var(--primary-lightness-step))));
--primary-darker: hsl(var(--primary-hue), 100%, calc(50% - (2 * var(--primary-lightness-step))));
/* secondary colour */
--secondary-hue: 223;
--secondary-lightness-step: 20%;
--secondary-lighter: hsl(var(--secondary-hue), 100%, calc(50% + (2 * var(--secondary-lightness-step))));
--secondary-light: hsl(var(--secondary-hue), 100%, calc(50% + (1 * var(--secondary-lightness-step))));
--secondary: hsl(var(--secondary-hue), 100%, 50%);
--secondary-dark: hsl(var(--secondary-hue), 100%, calc(50% - (1 * var(--secondary-lightness-step))));
--secondary-darker: hsl(
var(--secondary-hue),
100%,
calc(50% - (2 * var(--secondary-lightness-step)))
);
/* background colour */
--background-hue: 0;
--background-saturation: 0%;
--background-lightness: 14%;
--background-lightness-step: 5%;
--background-lighter: hsl(
var(--background-hue),
var(--background-saturation),
calc(var(--background-lightness) + (2 * var(--background-lightness-step)))
);
--background-light: hsl(
var(--background-hue),
var(--background-saturation),
calc(var(--background-lightness) + (1 * var(--background-lightness-step)))
);
--background: hsl(
var(--background-hue),
var(--background-saturation),
var(--background-lightness)
);
--background-dark: hsl(
var(--background-hue),
var(--background-saturation),
calc(var(--background-lightness) - (1 * var(--background-lightness-step)))
);
--background-darker: hsl(
var(--background-hue),
var(--background-saturation),
calc(var(--background-lightness) - (2 * var(--background-lightness-step)))
);
/* text colour */
--text-light: white;
--text-dark: black;
--text-on-primary: var(--text-dark);
--text-on-secondary: var(--text-light);
--text-on-background: hsl(0, 0%, 70%);
/* misc */
--border-colour: hsl(0, 0%, 35%);
--gutter: 1.3rem;
}
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
font-size: 14px;
line-height: 1.6;
background-color: var(--background);
color: var(--text-on-background);
}
body {
padding: 0;
margin: 0;
}
a {
color: var(--text-on-background);
}