open-props
Version:
<div align="center">
55 lines (45 loc) • 1.09 kB
CSS
:where(:root) {
color-scheme: light;
--palette-hue: 270;
--palette-hue-rotate-by: -5;
--palette-chroma: 0.1;
--link: oklch(50% 100% var(--palette-hue));
--link-visited: oklch(50% 100% calc(var(--palette-hue) * 1.2));
--surface-1: white;
--surface-2: var(--color-1);
--surface-3: var(--color-3);
--surface-document: var(--color-4);
--well-1: var(--color-5);
--well-2: var(--color-6);
--text-1: var(--color-16);
--text-2: var(--color-12);
--scrollthumb-color: var(--text-2);
& :where(dialog) {
background-color: var(--surface-1);
}
& :where(button, .btn) {
--_highlight: var(--_highlight-light);
--_bg: var(--_bg-light);
--_ink-shadow: var(--_ink-shadow-light);
& :where([type='reset']) {
--_text: var(--red-6, #fa5252);
--_border: var(--red-3, #ffa8a8);
}
}
&
:where(
button,
.btn,
input:is([type='button'], [type='submit'], [type='reset'])
)[disabled] {
box-shadow: none;
}
&
:where(
textarea,
select,
input:not([type='button'], [type='submit'], [type='reset'])
) {
background-color: var(--surface-2);
}
}