@microbit/ui 0.0.0-gray.ramp.90 → 0.0.0-gray.ramp.92

package/README.md

@@ -179,7 +179,7 @@ runtime lookup:
 import { token } from "@microbit/ui"; // re-exports styled-system/tokens
 
 token("colors.brand.500"); // "#007dbc" — raw value, safe for colour math
-token("colors.statusBarBg"); // "var(--colors-brand2-500)" — CSS contexts only
+token("colors.statusBarBg"); // "var(--colors-gray-500)" — CSS contexts only
 ```
 
 Base tokens resolve to raw values; **semantic tokens resolve to `var()`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.0.0-gray.ramp.90",
+  "version": "0.0.0-gray.ramp.92",
   "description": "micro:bit design-system primitives: react-aria-components + Panda CSS with a design language ported from Chakra UI v2. Ships as source; see README for the consumption setup.",
   "license": "MIT",
   "type": "module",

package/src/Input.recipe.ts

@@ -17,8 +17,17 @@ const transitionCommon =
  *
  * Focus matches both native `:focus-visible` (plain inputs; browsers treat any
  * focus in a text field as focus-visible) and react-aria's `data-focused`
- * (inputs inside RAC TextField). Focus is declared after invalid so a focused
- * invalid field shows the focus ring, as in Chakra.
+ * (inputs inside RAC TextField).
+ *
+ * Hover, invalid and focus all set `borderColor`, so their precedence has to be
+ * hover < invalid < focus. Declaration order will not buy that: Panda sorts a
+ * recipe's state rules itself, ranking selectors against a fixed
+ * link/visited/focus/hover/active table, which puts `_hover` *after* focus and
+ * after anything the table doesn't mention (`[data-invalid]`). Equal-specificity
+ * rules then leave hover winning. So the ladder is spelled with repeated `&`
+ * instead — `&&` and `&&&` emit `.input.input` and `.input.input.input`, making
+ * precedence specificity rather than order, which nothing downstream can
+ * resort. Variants still override freely; they land in a later cascade layer.
  *
  * Registered in the base preset (base-preset.ts), which also has the
  * `staticCss` entry that keeps the runtime-prop size variants generated.
@@ -42,11 +51,11 @@ export const input = defineRecipe({
     bg: "inherit",
     color: "inherit",
     _hover: { borderColor: "gray.500" },
-    "&[data-invalid], &:user-invalid": {
+    "&&:is([data-invalid], :user-invalid)": {
       borderColor: "danger.500",
       boxShadow: "0 0 0 1px token(colors.danger.500)",
     },
-    "&:is(:focus-visible, [data-focused])": {
+    "&&&:is(:focus-visible, [data-focused])": {
       zIndex: 1,
       borderColor: "focusBorder",
       boxShadow: "0 0 0 1px token(colors.focusBorder)",

package/src/Select.recipe.ts

@@ -85,9 +85,12 @@ export const select = defineSlotRecipe({
       // `> &` rather than a descendant selector, so an app's own invalid form
       // wrapper cannot paint every control inside it red.
       //
-      // Declared after hover and before focus so red beats a hover tint and
-      // the focus ring beats red, as in the input recipe.
-      "[data-invalid] > &": {
+      // Doubled `&` for the same reason as the input recipe: hover, invalid and
+      // focus all set `borderColor`, and Panda sorts state rules by its own
+      // pseudo-class table rather than declaration order, so hover would win
+      // these ties. The repeated `&` makes the hover < invalid < focus ladder a
+      // matter of specificity instead.
+      "[data-invalid] > &&": {
         borderColor: "danger.500",
         boxShadow: "0 0 0 1px token(colors.danger.500)",
       },
@@ -101,7 +104,7 @@ export const select = defineSlotRecipe({
       // focus moves to an option (aria-activedescendant) — which strips RAC's
       // attribute for as long as the list has an active option, real focus
       // never having left. Select's trigger holds no input, so it can't match.
-      "&[data-focus-visible], &:has(input:focus)": {
+      "&&&[data-focus-visible], &&&:has(input:focus)": {
         boxShadow: "0 0 0 1px token(colors.focusBorder)",
         borderColor: "focusBorder",
         outline: "2px solid transparent",

package/src/base-preset.ts

@@ -44,6 +44,35 @@ import { tooltip } from "./Tooltip.recipe";
 import { field } from "./TextField.recipe";
 import { toast } from "./Toast.recipe";
 
+// The family gray ramp: pure neutrals (r=g=b throughout) as the OSS default
+// of the per-app tinted ramps (see docs/gray-ramp.md). Stops keep Chakra's
+// names, and 50–300 match Chakra's *luminance* exactly — big panel surfaces
+// are made of these, and even a few bits of darkening at the near-white end
+// is visible across a viewport (classroom's teacher page caught an earlier
+// draft that darkened 50 for tidier numbering). Departures from Chakra:
+//   - 400 is re-graded darker to 3.05:1 on white, the accessible
+//     form-outline stop; Chakra's 400 (2.26:1) sat uselessly between
+//     roles and the ramp had nothing in the 3:1–4.5:1 band.
+//   - 500 is #767676 (4.54:1) rather than Chakra's 4.0:1, so
+//     placeholders and secondary text pass AA.
+// The sub-100 stops are the family's *panel tints*, named by position:
+// 10 (lighter than 50) and 75 (between 50 and 100 — renamed from a
+// historical "25"; see docs/gray-ramp.md).
+const gray = {
+  10: { value: "#fcfcfc" },
+  50: { value: "#f9f9f9" },
+  75: { value: "#f5f5f5" },
+  100: { value: "#f1f1f1" },
+  200: { value: "#e7e7e7" },
+  300: { value: "#d4d4d4" },
+  400: { value: "#949494" }, // 3.05:1 — accessible outline stop
+  500: { value: "#767676" }, // 4.54:1 — text-safe secondary
+  600: { value: "#575757" },
+  700: { value: "#404040" },
+  800: { value: "#262626" },
+  900: { value: "#1a1a1a" },
+};
+
 /**
  * The base preset: the complete, working micro:bit design system. The base
  * token scales (base-tokens.ts), the micro:bit house style
@@ -58,9 +87,11 @@ import { toast } from "./Toast.recipe";
  * A private brand preset (a sibling repo, e.g. CreateAI) is merged AFTER this
  * one to restyle everything by overriding just these token *values* (never
  * their names — see the CSS-var contract in the README):
- *   - colours: the `brand` and `brand2` ramps (OSS defaults: Chakra
- *     blue / Chakra's unmodified gray). Other ramps a brand tweaks
- *     (teal/purple/pink/…) already exist in the Chakra scales below.
+ *   - colours: the `brand` ramp (OSS default: Chakra blue). Other ramps a
+ *     brand tweaks (teal/purple/pink/…) already exist in the Chakra scales
+ *     below. (There is deliberately no `brand2`: a second accent is an app
+ *     decision, not a library slot — ml-trainer, its only user, defines it
+ *     in its app preset.)
  *   - font: `display` (OSS default: Helvetica; e.g. GT Walsheim privately).
  * The recipes and semantic tokens here reference those, so a brand swap needs
  * no recipe changes. With no private preset, these OSS defaults stand.
@@ -91,43 +122,11 @@ export const basePreset = definePreset({
     tokens: {
       colors: {
         ...colors,
-        // The family gray ramp: pure neutrals (r=g=b throughout) as the OSS
-        // default of the per-app tinted ramps (see docs/gray-ramp.md).
-        // Stops keep Chakra's names, and 50–300 match Chakra's *luminance*
-        // exactly — big panel surfaces are made of these, and even a few
-        // bits of darkening at the near-white end is visible across a
-        // viewport (classroom's teacher page caught an earlier draft that
-        // darkened 50 for tidier numbering). Departures from Chakra:
-        //   - 400 is re-graded darker to 3.05:1 on white, the accessible
-        //     form-outline stop; Chakra's 400 (2.26:1) sat uselessly between
-        //     roles and the ramp had nothing in the 3:1–4.5:1 band.
-        //   - 500 is #767676 (4.54:1) rather than Chakra's 4.0:1, so
-        //     placeholders and secondary text pass AA.
-        // Quirk, kept deliberately: 10/25 are the family's *panel tints*,
-        // which by luminance sit between 50 and 100 — the sub-50 names are
-        // historical. Do not "fix" the ordering; the rendered surfaces are
-        // what matter. (Decided: rename by position — 25 -> 75 — as its own
-        // step before the role-tokens work; see docs/gray-ramp.md.)
-        gray: {
-          10: { value: "#fcfcfc" },
-          25: { value: "#f5f5f5" },
-          50: { value: "#f9f9f9" },
-          100: { value: "#f1f1f1" },
-          200: { value: "#e7e7e7" },
-          300: { value: "#d4d4d4" },
-          400: { value: "#949494" }, // 3.05:1 — accessible outline stop
-          500: { value: "#767676" }, // 4.54:1 — text-safe secondary
-          600: { value: "#575757" },
-          700: { value: "#404040" },
-          800: { value: "#262626" },
-          900: { value: "#1a1a1a" },
-        },
-        // OSS default brand ramps (see the brand contract above). `brand`
-        // aliases Chakra blue; `brand2` Chakra's *unmodified* gray (not the
-        // `gray` above, whose 10/25 additions are lighter — getting this
-        // wrong once made card text near-invisible).
+        gray,
+        // OSS default brand ramp (see the brand contract above): Chakra
+        // blue. (Chakra's slate gray is gone from base-tokens.ts — the
+        // family gray above is the one grey system.)
         brand: colors.blue,
-        brand2: colors.gray,
       },
       spacing,
       sizes,
@@ -221,15 +220,24 @@ export const basePreset = definePreset({
           secondaryActiveBorder: { value: "{colors.brand.700}" },
           secondaryActiveBg: { value: "{colors.brand.50}" },
         },
-        // Toast status colours: the Chakra-era toast Alert restyle (teal for
-        // every status except error) shared across the app family.
-        toastInfoBg: { value: "{colors.teal.800}" },
-        toastSuccessBg: { value: "{colors.teal.800}" },
-        toastWarningBg: { value: "{colors.teal.800}" },
+        // Toast status colours. Unconventional, and worth a design review:
+        // the family's Chakra-era restyle painted every status except error
+        // the same teal, so success/warning/info are indistinguishable by
+        // colour. Kept as-is for now; each brand re-points these values
+        // (blimp teals privately). The OSS literal is Chakra's teal.700 —
+        // the ramp value nearest the brands' teals (white text 7.3:1); the
+        // teal ramp itself is gone from base-tokens.ts (this was its only
+        // consumer).
+        toastInfoBg: { value: "#285E61" },
+        toastSuccessBg: { value: "#285E61" },
+        toastWarningBg: { value: "#285E61" },
         toastErrorBg: { value: "{colors.danger.600}" },
-        // The native app's status-bar area colour, shared by the ActionBar
-        // and the full-size dialog's safe-area gradient.
-        statusBarBg: { value: "{colors.brand2.500}" },
+        // The native app's status-bar area colour, shared by the apps'
+        // ActionBars and the full-size dialog's safe-area gradient. The
+        // default is a deliberately bland grey — it only ever renders on a
+        // notched device, and every native app re-points it (classroom to
+        // black, ml-trainer to its brand2).
+        statusBarBg: { value: "{colors.gray.500}" },
       },
     },
     recipes: {

package/src/base-tokens.ts

@@ -8,8 +8,10 @@
  */
 // The base token scales, in Panda token format. Began as a mechanical
 // snapshot of Chakra UI v2's @chakra-ui/theme defaults; hand-maintained.
-// Deliberately absent: `fonts` (foundation-owned, defined in base-preset.ts)
-// and `transition.property` (no Panda token category; inlined at use sites).
+// Deliberately absent: `fonts` (foundation-owned, defined in base-preset.ts),
+// `transition.property` (no Panda token category; inlined at use sites), and
+// the colour ramps nothing in the family uses — `yellow`, `cyan`, `purple`
+// and `teal` (the toast tokens that referenced it hold literals now).
 
 export const colors = {
   transparent: {
@@ -88,38 +90,9 @@ export const colors = {
       value: "rgba(0, 0, 0, 0.92)",
     },
   },
-  gray: {
-    "50": {
-      value: "#F7FAFC",
-    },
-    "100": {
-      value: "#EDF2F7",
-    },
-    "200": {
-      value: "#E2E8F0",
-    },
-    "300": {
-      value: "#CBD5E0",
-    },
-    "400": {
-      value: "#A0AEC0",
-    },
-    "500": {
-      value: "#718096",
-    },
-    "600": {
-      value: "#4A5568",
-    },
-    "700": {
-      value: "#2D3748",
-    },
-    "800": {
-      value: "#1A202C",
-    },
-    "900": {
-      value: "#171923",
-    },
-  },
+  // Chakra's blue-slate `gray` is deliberately not here: the family gray is
+  // the neutral ramp in base-preset.ts, and keeping the slate around invited
+  // mixing the two. See docs/gray-ramp.md.
   red: {
     "50": {
       value: "#FFF5F5",
@@ -184,38 +157,6 @@ export const colors = {
       value: "#652B19",
     },
   },
-  yellow: {
-    "50": {
-      value: "#FFFFF0",
-    },
-    "100": {
-      value: "#FEFCBF",
-    },
-    "200": {
-      value: "#FAF089",
-    },
-    "300": {
-      value: "#F6E05E",
-    },
-    "400": {
-      value: "#ECC94B",
-    },
-    "500": {
-      value: "#D69E2E",
-    },
-    "600": {
-      value: "#B7791F",
-    },
-    "700": {
-      value: "#975A16",
-    },
-    "800": {
-      value: "#744210",
-    },
-    "900": {
-      value: "#5F370E",
-    },
-  },
   green: {
     "50": {
       value: "#F0FFF4",
@@ -248,38 +189,6 @@ export const colors = {
       value: "#1C4532",
     },
   },
-  teal: {
-    "50": {
-      value: "#E6FFFA",
-    },
-    "100": {
-      value: "#B2F5EA",
-    },
-    "200": {
-      value: "#81E6D9",
-    },
-    "300": {
-      value: "#4FD1C5",
-    },
-    "400": {
-      value: "#38B2AC",
-    },
-    "500": {
-      value: "#319795",
-    },
-    "600": {
-      value: "#2C7A7B",
-    },
-    "700": {
-      value: "#285E61",
-    },
-    "800": {
-      value: "#234E52",
-    },
-    "900": {
-      value: "#1D4044",
-    },
-  },
   blue: {
     "50": {
       value: "#ebf8ff",
@@ -312,70 +221,6 @@ export const colors = {
       value: "#1A365D",
     },
   },
-  cyan: {
-    "50": {
-      value: "#EDFDFD",
-    },
-    "100": {
-      value: "#C4F1F9",
-    },
-    "200": {
-      value: "#9DECF9",
-    },
-    "300": {
-      value: "#76E4F7",
-    },
-    "400": {
-      value: "#0BC5EA",
-    },
-    "500": {
-      value: "#00B5D8",
-    },
-    "600": {
-      value: "#00A3C4",
-    },
-    "700": {
-      value: "#0987A0",
-    },
-    "800": {
-      value: "#086F83",
-    },
-    "900": {
-      value: "#065666",
-    },
-  },
-  purple: {
-    "50": {
-      value: "#FAF5FF",
-    },
-    "100": {
-      value: "#E9D8FD",
-    },
-    "200": {
-      value: "#D6BCFA",
-    },
-    "300": {
-      value: "#B794F4",
-    },
-    "400": {
-      value: "#9F7AEA",
-    },
-    "500": {
-      value: "#805AD5",
-    },
-    "600": {
-      value: "#6B46C1",
-    },
-    "700": {
-      value: "#553C9A",
-    },
-    "800": {
-      value: "#44337A",
-    },
-    "900": {
-      value: "#322659",
-    },
-  },
   pink: {
     "50": {
       value: "#FFF5F7",