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

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

import { css, cssVar, keyframes } from "antd-style";
//#region src/base-ui/focusRing.ts
const tint = (color, alpha) => `color-mix(in srgb, ${color} ${alpha}%, transparent)`;
const glow = (color, scale = 1) => `0 0 0 ${3 * scale}px ${tint(color, 70)}, 0 0 ${5 * scale}px ${4 * scale}px ${tint(color, 35)}`;
const ringIn = (color) => keyframes`
  from {
    box-shadow: ${glow(color, 2.5)};
  }
`;
const ring = (color) => css`
  &:focus-visible {
    outline: none;
    box-shadow: ${glow(color)};
    animation: ${ringIn(color)} 560ms cubic-bezier(0.32, 0.72, 0, 1);

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

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

//# sourceMappingURL=focusRing.mjs.map