vira
Version:
A simple and highly versatile design system using element-vir.
32 lines (31 loc) • 1.15 kB
TypeScript
import { type PartialWithUndefined } from '@augment-vir/common';
/**
* CSS vars for Vira focus colors.
*
* @category CSS Vars
* @category Styles
*/
export declare const viraFocusCssVars: import("lit-css-vars").CssVarDefinitions<{
readonly 'vira-focus-outline-color': "#59b1ff";
readonly 'vira-focus-outline-border-radius': import("element-vir").CSSResult;
}>;
/**
* 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, }: {
/**
* 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: number;
} & PartialWithUndefined<{
outlineGap: number;
outlineWidth: number;
noNesting: boolean;
}>): import("element-vir").CSSResult;