open-props
Version:
<div align="center">
62 lines (51 loc) • 1.25 kB
CSS
:where(:root) {
color-scheme: dark;
--palette-hue: 270;
--palette-hue-rotate-by: -5;
--palette-chroma: 0.1;
--link: oklch(90% 80% var(--palette-hue));
--link-visited: oklch(90% 80% calc(var(--palette-hue) * 1.2));
--surface-1: var(--color-11);
--surface-2: var(--color-12);
--surface-3: var(--color-13);
--surface-document: var(--color-14);
--well-1: var(--color-15);
--well-2: var(--color-16);
--text-1: var(--color-1);
--text-2: var(--color-5);
--scrollthumb-color: var(--text-2);
& :where(dialog) {
background-color: var(--surface-2);
}
& :where(button, .btn) {
--_highlight: var(--_highlight-dark);
--_bg: var(--_bg-dark);
--_ink-shadow: var(--_ink-shadow-dark);
&:where([type='reset']) {
--_text: var(--red-2);
--_border: var(--surface-3);
}
}
/* &
:where(
button,
.btn,
input:is([type='button'], [type='submit'], [type='reset'])
)[disabled] {
--_text: var(--gray-5);
} */
/* &
:where(
textarea,
select,
input:not([type='button'], [type='submit'], [type='reset'])
) {
background-color: hsl(210deg 11% 10%);
} */
& :where([type='submit']),
& :where(form button:not([type='button'])),
& :where([type='reset']),
& :where([disabled]) {
--_bg: var(--surface-1);
}
}