@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
384 lines • 10.4 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ColorsPage.tsx";
import classnames from 'classnames';
import Library from '../Library';
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "preact/jsx-dev-runtime";
function ColorSwatch({
colorClass,
colorName
}) {
return _jsxDEV("div", {
children: [_jsxDEV("div", {
className: classnames(colorClass, 'w-64 h-8 mr-4')
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 7
}, this), _jsxDEV("p", {
children: _jsxDEV("i", {
children: colorName
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 14,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 5
}, this);
}
const brandExamples = _jsxDEV(_Fragment, {
children: [_jsxDEV(ColorSwatch, {
colorClass: "bg-brand",
colorName: "brand"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-brand-dark",
colorName: "brand-dark"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 5
}, this)]
}, void 0, true);
const greyExamples = _jsxDEV(_Fragment, {
children: [_jsxDEV(ColorSwatch, {
colorClass: "bg-white",
colorName: "white"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-grey-0",
colorName: "grey-0"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-grey-1",
colorName: "grey-1"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-grey-2",
colorName: "grey-2"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-grey-3",
colorName: "grey-3"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-grey-4",
colorName: "grey-4"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-grey-5",
colorName: "grey-5"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-grey-6",
colorName: "grey-6"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-grey-7",
colorName: "grey-7"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-grey-8",
colorName: "grey-8"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-grey-9",
colorName: "grey-9"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-black",
colorName: "black"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 5
}, this)]
}, void 0, true);
const slateExamples = _jsxDEV(_Fragment, {
children: [_jsxDEV(ColorSwatch, {
colorClass: "bg-slate-0",
colorName: "slate-0"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-slate-1",
colorName: "slate-1"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-slate-3",
colorName: "slate-3"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-slate-5",
colorName: "slate-5"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-slate-7",
colorName: "slate-7"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-slate-9",
colorName: "slate-9"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 5
}, this)]
}, void 0, true);
const stateExamples = _jsxDEV(_Fragment, {
children: [_jsxDEV(ColorSwatch, {
colorClass: "bg-green-success",
colorName: "green-success (green alias)"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-yellow-notice",
colorName: "yellow-notice (yellow alias)"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-red-error",
colorName: "red-error (red alias)"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 5
}, this)]
}, void 0, true);
const highlightingExamples = _jsxDEV(_Fragment, {
children: [_jsxDEV(ColorSwatch, {
colorClass: "bg-green-light",
colorName: "green-light"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-green",
colorName: "green"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-green-dark",
colorName: "green-dark"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-yellow-light",
colorName: "yellow-light"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-yellow",
colorName: "yellow"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-yellow-dark",
colorName: "yellow-dark"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-red-light",
colorName: "red-light"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-red",
colorName: "red"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 5
}, this), _jsxDEV(ColorSwatch, {
colorClass: "bg-red-dark",
colorName: "red-dark"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 5
}, this)]
}, void 0, true);
const focusExamples = _jsxDEV(_Fragment, {
children: _jsxDEV(ColorSwatch, {
colorClass: "bg-blue-focus",
colorName: "blue-focus"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 5
}, this)
}, void 0, false);
export default function ColorsPage() {
return _jsxDEV(Library.Page, {
title: "Colors",
children: [_jsxDEV(Library.SectionL2, {
title: "Brand red",
children: _jsxDEV("div", {
className: "my-4 flex flex-row flex-wrap gap-4",
children: brandExamples
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 7
}, this), _jsxDEV(Library.SectionL2, {
title: "Greys",
children: _jsxDEV("div", {
className: "my-4 flex flex-row flex-wrap gap-4",
children: greyExamples
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 7
}, this), _jsxDEV(Library.SectionL2, {
title: "Slates",
children: [_jsxDEV("p", {
children: "These slightly blue greys may be used sparingly to help with differentiation and clarity within interfaces."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 9
}, this), _jsxDEV("div", {
className: "my-4 flex flex-row flex-wrap gap-4",
children: slateExamples
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 7
}, this), _jsxDEV(Library.SectionL2, {
title: "Highlighting",
children: _jsxDEV("div", {
className: "my-4 flex flex-row flex-wrap gap-4",
children: highlightingExamples
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 114,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 7
}, this), _jsxDEV(Library.SectionL2, {
title: "State indicators",
children: _jsxDEV("div", {
className: "my-4 flex flex-row flex-wrap gap-4",
children: stateExamples
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 7
}, this), _jsxDEV(Library.SectionL2, {
title: "Focus indicators",
children: _jsxDEV("div", {
className: "my-4 flex flex-row flex-wrap gap-4",
children: focusExamples
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 5
}, this);
}
//# sourceMappingURL=ColorsPage.js.map