@chayns-components/core/lib/cjs/utils/keyboardFocusHighlighting.styles.js

A set of beautiful React components for developing your own applications with chayns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.keyboardFocusHighlightingRingCss = exports.keyboardFocusHighlightingCircleRingCss = void 0;
var _styledComponents = require("styled-components");
/**
 * Shared focus ring for components with keyboard-only highlighting.
 * Apply this only when keyboard highlighting is enabled/active.
 */
const keyboardFocusHighlightingRingCss = exports.keyboardFocusHighlightingRingCss = (0, _styledComponents.css)`
    outline: solid 2px color-mix(in srgb, white 70%, transparent);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
    border-radius: 3px;
    outline-offset: 1px;
`;

/**
 * Circular focus ring variant for round controls (e.g. RadioButton).
 */
const keyboardFocusHighlightingCircleRingCss = exports.keyboardFocusHighlightingCircleRingCss = (0, _styledComponents.css)`
    outline: solid 2px color-mix(in srgb, white 70%, transparent);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
    border-radius: 50%;
    outline-offset: 1px;
    color: white;
`;
//# sourceMappingURL=keyboardFocusHighlighting.styles.js.map