@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
49 lines • 3.29 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SemanticTokens = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const Components_1 = require("../Components");
const CoreComponents_1 = require("../Components/CoreComponents");
const CoreComponents_2 = require("../Components/CoreComponents");
const utils_1 = require("../Foundations/utils");
const borderRadius_1 = require("./borderRadius");
const semanticTokens_1 = require("./semanticTokens");
const shadows_1 = require("./shadows");
const classes = {
example: (0, css_1.css)({
width: "8rem",
height: "2rem",
borderRadius: borderRadius_1.borderRadiusMd,
boxShadow: shadows_1.shadowInner,
display: "inline-flex",
}),
code: (0, css_1.css)({
backgroundColor: "rgba(0, 0, 0, 0.05)",
padding: "0.1rem 0.3rem",
borderRadius: "0.2rem",
cursor: "pointer",
}),
};
const meta = {
title: "Foundations/SemanticTokens",
parameters: {
viewMode: "docs",
showPanel: { disable: true },
addon: { disable: true },
layout: "fullscreen",
controls: { disable: true, expanded: false },
},
};
exports.default = meta;
exports.SemanticTokens = {
parameters: {
layout: "padded",
options: { showPanel: false },
},
render: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { variant: "h2", children: "Semantic tokens" }), (0, jsx_runtime_1.jsxs)(CoreComponents_2.Table, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_2.TableHead, { children: (0, jsx_runtime_1.jsxs)(CoreComponents_2.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: "Example" }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: "Token" }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: "Value (default)" }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: "Value (dark)" })] }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableBody, { children: Object.keys(semanticTokens_1.semanticTokens).map((key) => ((0, jsx_runtime_1.jsxs)(CoreComponents_2.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("span", { className: classes.example, style: {
backgroundColor: semanticTokens_1.semanticTokens[key]
.default,
} }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)(Components_1.BlokTooltip, { title: "Copy to clipboard", children: (0, jsx_runtime_1.jsx)("code", { className: classes.code, onClick: () => (0, utils_1.copyToClipboard)(`semanticTokens.${key}.default`), children: key }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: semanticTokens_1.semanticTokens[key].default }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: semanticTokens_1.semanticTokens[key].dark }) })] }, key))) })] })] })),
};
//# sourceMappingURL=semanticTokens.stories.js.map