@helpwave/hightide
Version:
helpwave's component and theming library
34 lines (27 loc) • 869 B
CSS
@utility focus-style-outline {
--focus-outline: 2px solid var(--color-focus);
--focus-outline-offset: calc(var(--spacing) * 0.25);
--focus-outline-transition: outline-offset var(--animation-duration-in, 250ms);
}
@utility focus-style-border {
--focus-border-color: var(--color-focus);
}
@utility focus-style-shadow {
--focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, transparent);
}
@utility focus-style-none {
--focus-outline: none;
--focus-outline-offset: 0;
--focus-outline-transition: none;
--focus-box-shadow: none;
--focus-border-color: inherit;
}
@utility focusable {
transition: var(--focus-outline-transition);
&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
box-shadow: var(--focus-box-shadow);
border-color: var(--focus-border-color);
}
}