milestone 23 s1: stylex build integration, tokens and shared styles

2026-08-12 21:41:32 +02:00
parent 7b0527d271
commit 994bbf922c
12 changed files with 988 additions and 5 deletions
@@ -0,0 +1,190 @@
+/**
+ * The shared style vocabulary (milestone 23, ruling 3; replaces the Tailwind
+ * class constants of milestone 18, ruling 10).
+ *
+ * Every interactive element must carry `focusRing` or `insetFocusRing`; that
+ * is the milestone-9 accessibility floor. Compose at the call site with
+ * `stylex.props(styles.button, extra)` instead of re-spelling a variant.
+ */
+
+import * as stylex from "@stylexjs/stylex";
+import { colors } from "./tokens.stylex";
+
+const FOCUS = ":focus-visible";
+const DISABLED = ":disabled";
+
+export const styles = stylex.create({
+	/** The ring drawn outside the element. */
+	focusRing: {
+		outlineWidth: { default: null, [FOCUS]: 2 },
+		outlineStyle: { default: null, [FOCUS]: "solid" },
+		outlineColor: { default: null, [FOCUS]: colors.focus },
+		outlineOffset: { default: null, [FOCUS]: 2 },
+	},
+	/** The ring drawn inside the element, for controls flush against a panel edge. */
+	insetFocusRing: {
+		outlineWidth: { default: null, [FOCUS]: 2 },
+		outlineStyle: { default: null, [FOCUS]: "solid" },
+		outlineColor: { default: null, [FOCUS]: colors.focus },
+		outlineOffset: { default: null, [FOCUS]: -2 },
+	},
+
+	input: {
+		marginTop: "0.25rem",
+		width: "100%",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.borderStrong,
+		backgroundColor: colors.surfaceRaised,
+		color: colors.text,
+		paddingInline: "0.75rem",
+		paddingBlock: "0.5rem",
+	},
+	smallInput: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.borderStrong,
+		backgroundColor: colors.surfaceRaised,
+		color: colors.text,
+		paddingInline: "0.5rem",
+		paddingBlock: "0.375rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+
+	button: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.borderStrong,
+		paddingInline: "0.75rem",
+		paddingBlock: "0.375rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	smallButton: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.borderStrong,
+		paddingInline: "0.5rem",
+		paddingBlock: "0.25rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	largeButton: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.borderStrong,
+		paddingInline: "0.75rem",
+		paddingBlock: "0.5rem",
+		fontWeight: 500,
+	},
+
+	primaryButton: {
+		borderRadius: "0.25rem",
+		borderStyle: "none",
+		backgroundColor: colors.primary,
+		color: colors.primaryText,
+		paddingInline: "0.75rem",
+		paddingBlock: "0.375rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+		opacity: { default: 1, [DISABLED]: 0.5 },
+	},
+	largePrimaryButton: {
+		borderRadius: "0.25rem",
+		borderStyle: "none",
+		backgroundColor: colors.primary,
+		color: colors.primaryText,
+		paddingInline: "0.75rem",
+		paddingBlock: "0.5rem",
+		fontWeight: 500,
+		opacity: { default: 1, [DISABLED]: 0.5 },
+	},
+
+	rowButton: {
+		borderRadius: "0.25rem",
+		borderStyle: "none",
+		backgroundColor: "transparent",
+		paddingInline: "0.5rem",
+		paddingBlock: "0.25rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.primaryOnSurface,
+	},
+	linkButton: {
+		borderStyle: "none",
+		backgroundColor: "transparent",
+		padding: 0,
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+		color: colors.primaryOnSurface,
+	},
+	dangerLinkButton: {
+		borderStyle: "none",
+		backgroundColor: "transparent",
+		padding: 0,
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+		color: colors.danger,
+		opacity: { default: 1, [DISABLED]: 0.5 },
+	},
+	retryButton: {
+		marginTop: "0.75rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.dangerBorder,
+		backgroundColor: "transparent",
+		paddingInline: "0.75rem",
+		paddingBlock: "0.375rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+		color: colors.dangerText,
+	},
+
+	th: {
+		borderBottomWidth: 1,
+		borderBottomStyle: "solid",
+		borderBottomColor: colors.borderStrong,
+		paddingInline: "0.75rem",
+		paddingBlock: "0.5rem",
+		textAlign: "left",
+		fontWeight: 500,
+	},
+	td: {
+		borderBottomWidth: 1,
+		borderBottomStyle: "solid",
+		borderBottomColor: colors.border,
+		paddingInline: "0.75rem",
+		paddingBlock: "0.5rem",
+	},
+	tableWrap: {
+		marginTop: "1rem",
+		overflowX: "auto",
+	},
+	/**
+	 * `space-y-3` became a flex column with a gap: same rendered rhythm, and it
+	 * does not depend on sibling margin collapsing.
+	 */
+	formCard: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.75rem",
+		marginTop: "1rem",
+		maxWidth: "32rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		padding: "1rem",
+	},
+});