vira
Version:
A simple and highly versatile design system using element-vir.
27 lines (26 loc) • 1.24 kB
TypeScript
import { type PartialWithUndefined } from '@augment-vir/common';
import { type CSSResult } from 'element-vir';
import { type SingleCssVarDefinition } from 'lit-css-vars';
/**
* Create styles that look like an outline for the given selector.
*
* It is recommended to use the pseudo selector chain ":focus:focus-visible:not(:active)" to
* preventing clicking an element from creating focus styles in Chrome.
*
* @category Styles
*/
export declare function createFocusStyles({ elementBorderSize, outlineGap, outlineWidth, noNesting, outlineColor, borderRadius, renderInside, }?: PartialWithUndefined<{
/**
* ElementBorderSize here is used to fix the outline when the element these styles are attached
* to has a border. The dev must specify that border size here for the offsets to be calculated
* correctly.
*/
elementBorderSize: SingleCssVarDefinition | string;
outlineGap: SingleCssVarDefinition | string;
outlineWidth: SingleCssVarDefinition | string;
borderRadius: SingleCssVarDefinition | string;
outlineColor: SingleCssVarDefinition | string;
noNesting: boolean;
/** Render the focus outline inside the element instead of outside. */
renderInside: boolean;
}>): CSSResult;