nice-ui/lib/1-inline/KeyLite/index.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.KeyLite = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const styles_1 = require("../../styles");
const context_1 = require("../../styles/context");
const keyClass = (0, nano_theme_1.drule)({
    ...styles_1.fonts.get('mono'),
    bdrad: '4px',
    pd: '0 3px',
    fz: '12.1px',
    lh: '1.2em',
    bxz: 'border-box',
});
const KeyLite = (props) => {
    const styles = (0, context_1.useStyles)();
    const style = {
        ...props.style,
    };
    if (!styles.light) {
        style.boxShadow = `0 0 0 1px ${styles.g(0.1, 0.16)}`;
    }
    return (React.createElement("kbd", { ...props, className: keyClass({
            bd: '1px solid ' + styles.g(0.8, 0.4),
            bg: styles.col.g('bg-1'),
            col: styles.g(0.2),
        }) + (props.className || ''), style: style }));
};
exports.KeyLite = KeyLite;