158 lines
3.8 KiB
TypeScript
158 lines
3.8 KiB
TypeScript
/**
|
|
* The vocabulary the three configuration pages share. Both renderings — the
|
|
* editable forms and the file-mode definition lists — sit on the same panels
|
|
* and headings, so the page keeps its shape when authority changes.
|
|
*/
|
|
|
|
import * as stylex from "@stylexjs/stylex";
|
|
import { colors, metrics } from "@/ui/tokens.stylex";
|
|
|
|
export const styles = stylex.create({
|
|
heading: {
|
|
fontSize: "1.5rem",
|
|
lineHeight: "2rem",
|
|
fontWeight: 600,
|
|
},
|
|
intro: {
|
|
marginTop: "0.25rem",
|
|
maxWidth: "48rem",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
color: colors.textMuted,
|
|
},
|
|
/** The card chrome (`ui/Card.tsx`), on panels whose heading carries a key or a control the Card head cannot. */
|
|
panel: {
|
|
marginTop: "1rem",
|
|
borderRadius: metrics.radius,
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
borderColor: colors.border,
|
|
backgroundColor: colors.surfaceRaised,
|
|
padding: metrics.cardPadding,
|
|
},
|
|
panelHeading: {
|
|
margin: 0,
|
|
fontSize: "1.4rem",
|
|
lineHeight: 1.2,
|
|
fontWeight: 650,
|
|
letterSpacing: "-0.015em",
|
|
},
|
|
/** The card head's one-line description (`ui/Card.tsx`), under a panel heading. */
|
|
panelDescription: {
|
|
margin: 0,
|
|
marginTop: "0.25rem",
|
|
marginBottom: "1.25rem",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
color: colors.textMuted,
|
|
textWrap: "pretty",
|
|
},
|
|
/** The collection's own key in the configuration file, beside its heading. */
|
|
panelKey: {
|
|
marginLeft: "0.5rem",
|
|
fontSize: "0.75rem",
|
|
lineHeight: "1rem",
|
|
fontWeight: 400,
|
|
color: colors.textMuted,
|
|
},
|
|
note: {
|
|
marginTop: "0.5rem",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
color: colors.textMuted,
|
|
},
|
|
/** The file-mode page note: where edits happen, and what applies them. */
|
|
fileNote: {
|
|
marginTop: "1rem",
|
|
borderRadius: metrics.radius,
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
borderColor: colors.border,
|
|
backgroundColor: colors.surfaceHover,
|
|
paddingInline: "0.75rem",
|
|
paddingBlock: "0.5rem",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
color: colors.textSecondary,
|
|
},
|
|
table: {
|
|
width: "100%",
|
|
borderCollapse: "collapse",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
},
|
|
empty: {
|
|
marginTop: "0.5rem",
|
|
color: colors.textMuted,
|
|
},
|
|
/** Master/detail: the group list beside the selected group. */
|
|
split: {
|
|
marginTop: "1rem",
|
|
display: "grid",
|
|
gap: "1rem",
|
|
gridTemplateColumns: {
|
|
default: "repeat(1, minmax(0, 1fr))",
|
|
"@media (min-width: 900px)": "16rem 1fr",
|
|
},
|
|
alignItems: "start",
|
|
},
|
|
masterList: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "0.25rem",
|
|
},
|
|
/** A group name can be one unbroken string wider than a phone's line. */
|
|
masterLink: {
|
|
display: "block",
|
|
overflowWrap: "anywhere",
|
|
borderRadius: metrics.radius,
|
|
paddingInline: "0.75rem",
|
|
paddingBlock: "0.375rem",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
textDecorationLine: "none",
|
|
color: colors.textSecondary,
|
|
backgroundColor: { default: "transparent", ":hover": colors.surfaceHover },
|
|
},
|
|
masterLinkActive: {
|
|
backgroundColor: colors.surfaceHover,
|
|
color: colors.text,
|
|
fontWeight: 500,
|
|
},
|
|
actionRow: {
|
|
marginTop: "1rem",
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
alignItems: "center",
|
|
gap: "0.75rem",
|
|
},
|
|
success: {
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
color: colors.primaryOnSurface,
|
|
},
|
|
/** The authority error state: no forms, no definition list, one way forward. */
|
|
blocked: {
|
|
marginTop: "1rem",
|
|
borderRadius: metrics.radius,
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
borderColor: colors.warnBorder,
|
|
backgroundColor: colors.warnSurface,
|
|
color: colors.warnText,
|
|
padding: "1rem",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
},
|
|
pending: {
|
|
marginTop: "1rem",
|
|
color: colors.textMuted,
|
|
},
|
|
restartTag: {
|
|
marginLeft: "0.375rem",
|
|
fontSize: "0.75rem",
|
|
lineHeight: "1rem",
|
|
color: colors.textMuted,
|
|
},
|
|
});
|