@lobehub/ui/es/base-ui/focusRing.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

import { focusRingColor as focusRingColor$1 } from "../GlobalFocusRing/style.mjs";
import { css, cssVar, keyframes } from "antd-style";
//#region src/base-ui/focusRing.ts
const ringIn = keyframes`
  from {
    outline-color: transparent;
    outline-offset: 5px;
  }
`;
const ring = (color) => css`
  --lobe-focus-ring-color: ${color};

  &:focus-visible:not([data-lobe-focus-ring='managed']) {
    outline: 2px solid ${focusRingColor$1(color)};
    outline-offset: 2px;
    animation: ${ringIn} 200ms cubic-bezier(0.22, 1, 0.36, 1);

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }

    @media (forced-colors: active) {
      outline-color: CanvasText;
      animation: none;
    }
  }
`;
const focusRing = ring(cssVar.colorInfo);
const focusRingColor = ring;
//#endregion
export { focusRing, focusRingColor };

//# sourceMappingURL=focusRing.mjs.map