nice-ui
Version:
React design system, components, and utilities
29 lines (28 loc) • 987 B
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const nano_theme_1 = require("nano-theme");
const keyClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.mono,
mar: '0 .1em',
pad: '.3em .7em',
bg: nano_theme_1.theme.g(0, 0.2),
bdt: `1px solid ${nano_theme_1.theme.g(0, 0.3)}`,
bdb: `1px solid ${nano_theme_1.theme.g(0, 0.0)}`,
bdr: `1px solid ${nano_theme_1.theme.g(0, 0.1)}`,
bdrad: '.25em',
lh: '1em',
fz: '.7em',
whiteSpace: 'nowrap',
boxShadow: '0 0 .125em rgba(0,0,0,.5),0 .065em .19em rgba(0,0,0,.5),.065em 0 .125em rgba(0,0,0,.2)',
col: '#fff',
});
const Key = ({ children }) => {
const theme = (0, nano_theme_1.useTheme)();
const style = {};
if (!theme.isLight) {
style.boxShadow = `0 0 0 1px ${theme.g(0.1, 0.16)}`;
}
return (React.createElement("kbd", { className: keyClass, style: style }, children));
};
exports.default = Key;