milestone 23 s1: stylex build integration, tokens and shared styles
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import * as stylex from "@stylexjs/stylex";
|
||||
import { styles } from "./styles";
|
||||
|
||||
/**
|
||||
* The StyleX compile-time transform must run in the vitest pipeline, not just
|
||||
* in `vite build`. `runtimeInjection` is off, so an untransformed
|
||||
* `stylex.props` call yields no class name at all — this probe fails loudly if
|
||||
* the plugin ever drops out of the test config (milestone 23, ruling 1).
|
||||
*/
|
||||
describe("the StyleX build integration", () => {
|
||||
it("compiles stylex.props into a class name", () => {
|
||||
render(
|
||||
<button type="button" {...stylex.props(styles.button, styles.focusRing)}>
|
||||
probe
|
||||
</button>,
|
||||
);
|
||||
const probe = screen.getByRole("button", { name: "probe" });
|
||||
expect(probe.className).not.toBe("");
|
||||
});
|
||||
|
||||
it("keeps composed styles distinct from a single style", () => {
|
||||
const one = stylex.props(styles.button).className;
|
||||
const two = stylex.props(styles.button, styles.focusRing).className;
|
||||
expect(one).toBeTruthy();
|
||||
expect(two).not.toBe(one);
|
||||
});
|
||||
});
|
||||
@@ -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",
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* The design tokens (milestone 23, ruling 2).
|
||||
*
|
||||
* Values are the Tailwind 4 zinc/blue/red ramps the app rendered before the
|
||||
* StyleX conversion, carried over verbatim so the palette does not shift.
|
||||
* Each token holds its dark value under `prefers-color-scheme: dark` — the
|
||||
* same media strategy Tailwind 4 defaulted to. There is no theme toggle and
|
||||
* no `data-theme` attribute; the scheme follows the operating system.
|
||||
*
|
||||
* Name tokens by role, never by shade: a call site asks for `border`, not for
|
||||
* zinc-200.
|
||||
*/
|
||||
|
||||
import * as stylex from "@stylexjs/stylex";
|
||||
|
||||
const DARK = "@media (prefers-color-scheme: dark)";
|
||||
|
||||
export const colors = stylex.defineVars({
|
||||
/** The page ground. */
|
||||
surface: { default: "oklch(98.5% 0 none)", [DARK]: "oklch(14.1% 0.005 285.823)" },
|
||||
/** Cards, dialogs and inputs sitting on top of the ground. */
|
||||
surfaceRaised: { default: "#fff", [DARK]: "oklch(21% 0.006 285.885)" },
|
||||
/** Hairlines between rows and around cards. */
|
||||
border: { default: "oklch(92% 0.004 286.32)", [DARK]: "oklch(27.4% 0.006 286.033)" },
|
||||
/** Control outlines, which need more contrast than a row divider. */
|
||||
borderStrong: { default: "oklch(87.1% 0.006 286.286)", [DARK]: "oklch(37% 0.013 285.805)" },
|
||||
text: { default: "oklch(21% 0.006 285.885)", [DARK]: "oklch(96.7% 0.001 286.375)" },
|
||||
textMuted: { default: "oklch(55.2% 0.016 285.938)", [DARK]: "oklch(70.5% 0.015 286.067)" },
|
||||
/** Primary actions. Identical in both schemes, as before the conversion. */
|
||||
primary: { default: "oklch(54.6% 0.245 262.881)", [DARK]: "oklch(54.6% 0.245 262.881)" },
|
||||
primaryText: { default: "#fff", [DARK]: "#fff" },
|
||||
/** Primary as foreground: lightened in dark so it clears the ground. */
|
||||
primaryOnSurface: { default: "oklch(54.6% 0.245 262.881)", [DARK]: "oklch(70.7% 0.165 254.624)" },
|
||||
danger: { default: "oklch(57.7% 0.245 27.325)", [DARK]: "oklch(70.4% 0.191 22.216)" },
|
||||
dangerSurface: { default: "oklch(97.1% 0.013 17.38)", [DARK]: "oklch(25.8% 0.092 26.042)" },
|
||||
dangerBorder: { default: "oklch(80.8% 0.114 19.571)", [DARK]: "oklch(44.4% 0.177 26.899)" },
|
||||
dangerText: { default: "oklch(44.4% 0.177 26.899)", [DARK]: "oklch(88.5% 0.062 18.334)" },
|
||||
/** The focus ring colour. The ring itself is a floor, not a variant. */
|
||||
focus: { default: "oklch(54.6% 0.245 262.881)", [DARK]: "oklch(54.6% 0.245 262.881)" },
|
||||
});
|
||||
Reference in New Issue
Block a user