nxdns/web/src/ui/styles.ts

/**
 * 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,
	},

	/** Visible to a screen reader only; the element keeps its place in the a11y tree. */
	srOnly: {
		position: "absolute",
		width: 1,
		height: 1,
		padding: 0,
		margin: -1,
		overflow: "hidden",
		clipPath: "inset(50%)",
		whiteSpace: "nowrap",
		borderWidth: 0,
	},

	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",
	},
	/**
	 * Not a faithful port: `space-y-3` set sibling margins on a block container,
	 * this is a flex formatting context. StyleX has no way to write the `> * + *`
	 * selector that `space-y` compiles to, so the rhythm can only come from
	 * `gap`. Child sizing and margin behaviour differ from the Tailwind original;
	 * both call sites are plain vertical form stacks, where they do not.
	 */
	formCard: {
		display: "flex",
		flexDirection: "column",
		gap: "0.75rem",
		marginTop: "1rem",
		maxWidth: "32rem",
		borderRadius: "0.25rem",
		borderWidth: 1,
		borderStyle: "solid",
		borderColor: colors.border,
		padding: "1rem",
	},
});