milestone 23 s3: convert features/pause/PauseWidget.tsx to stylex

web/src/ui/styles.ts

@@ -13,6 +13,11 @@ import { colors } from "./tokens.stylex";
 const FOCUS = ":focus-visible";
 const DISABLED = ":disabled";
 
+/** The half-fade loop a placeholder runs while its data is in flight. */
+const pulseFrames = stylex.keyframes({
+	"50%": { opacity: 0.5 },
+});
+
 export const styles = stylex.create({
 	/** The ring drawn outside the element. */
 	focusRing: {
@@ -151,6 +156,13 @@ export const styles = stylex.create({
 		color: colors.dangerText,
 	},
 
+	/** Marks an element as waiting on data. Carries no colour of its own. */
+	pulse: {
+		animationName: pulseFrames,
+		animationDuration: "2s",
+		animationTimingFunction: "cubic-bezier(0.4, 0, 0.6, 1)",
+		animationIterationCount: "infinite",
+	},
 	/** Digits of equal width, so a column of counts does not jitter as it updates. */
 	tabularNums: {
 		fontVariantNumeric: "tabular-nums",

web/src/ui/tokens.stylex.ts

@@ -20,6 +20,8 @@ export const colors = stylex.defineVars({
 	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)" },
+	/** The fill under a pointer on a nav item or a menu row. */
+	surfaceHover: { default: "oklch(96.7% 0.001 286.375)", [DARK]: "oklch(27.4% 0.006 286.033)" },
 	/** 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. */