milestone 23 s3: remove tailwind, replace its preflight with an explicit reset

2026-08-12 22:50:25 +02:00
parent 122044e6af
commit be12587b87
9 changed files with 128 additions and 378 deletions
@@ -1 +1,124 @@
-@import "tailwindcss";
+/*
+ * The CSS entry (milestone 23, ruling 1). The StyleX plugin emits the compiled
+ * atomic rules into their own layers; what is left here is the element reset
+ * those rules are written against.
+ *
+ * The reset is not optional and not cosmetic. Tailwind's preflight used to
+ * supply it, so every StyleX style in `web/src` is written assuming border-box
+ * sizing, no default margins, unstyled lists and form controls that inherit
+ * their font. Deleting this block does not restore browser defaults — it
+ * silently changes the meaning of every size and spacing value in the app.
+ * Rules are limited to what this app renders; it is not a general reset.
+ */
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+html {
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	font-family:
+		system-ui,
+		-apple-system,
+		"Segoe UI",
+		Roboto,
+		"Helvetica Neue",
+		Arial,
+		sans-serif;
+}
+
+/* Headings carry their scale from StyleX, not from the user agent. */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-size: inherit;
+	font-weight: inherit;
+}
+
+ul,
+ol,
+menu {
+	list-style: none;
+}
+
+/* Links opt into colour and underline; the shell's nav wants neither. */
+a {
+	color: inherit;
+	text-decoration: inherit;
+}
+
+code,
+kbd,
+samp,
+pre {
+	font-size: 1em;
+}
+
+table {
+	border-collapse: collapse;
+	text-indent: 0;
+	border-color: inherit;
+}
+
+/*
+ * Form controls: inherit type and colour, drop the user-agent chrome, and keep
+ * `appearance: button` so iOS Safari honours a button's border radius.
+ */
+button,
+input,
+select,
+optgroup,
+textarea {
+	font: inherit;
+	letter-spacing: inherit;
+	color: inherit;
+	background-color: transparent;
+	border: 0 solid;
+	border-radius: 0;
+	opacity: 1;
+}
+
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+	appearance: button;
+}
+
+/* A checkbox keeps its native chrome; the rules above would erase it. */
+input[type="checkbox"],
+input[type="radio"] {
+	appearance: auto;
+}
+
+::placeholder {
+	opacity: 1;
+	color: color-mix(in oklab, currentcolor 50%, transparent);
+}
+
+/* An inline SVG leaves a baseline gap under a full-width chart. */
+svg,
+img,
+video,
+canvas {
+	display: block;
+	vertical-align: middle;
+}
+
+img,
+video {
+	max-width: 100%;
+	height: auto;
+}
+
+[hidden] {
+	display: none !important;
+}