@microbit/ui 0.0.0-gray.ramp.92 → 0.0.0-gray.ramp.v2.106

package/src/base-preset.ts

@@ -24,6 +24,7 @@ import {
 // Config recipes are colocated with the shared-ui components they style; this
 // preset registers them so Panda merges them at codegen time.
 import { avatar } from "./Avatar.recipe";
+import { breadcrumb } from "./Breadcrumb.recipe";
 import { button } from "./Button.recipe";
 import { card } from "./Card.recipe";
 import { checkbox } from "./Checkbox.recipe";
@@ -41,30 +42,36 @@ import { switchRecipe } from "./Switch.recipe";
 import { dialog } from "./Modal.recipe";
 import { text } from "./Text.recipe";
 import { tooltip } from "./Tooltip.recipe";
-import { field } from "./TextField.recipe";
+import { field } from "./Field.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:
+// The family gray ramp: pure neutrals (r=g=b throughout) as the library
+// default (docs/gray-ramp.md). Stops keep Chakra's names — including the
+// historical `25`, which sits darker than 50 exactly as it did against
+// Chakra's 50 (renaming it was tried in the first spike and orphaned raw
+// var() references and a stale paired-preset build; not worth it. See the
+// doc's no-renames rule). 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 shows across a viewport. Apps may override the light-stop
+// VALUES in their presets (byte-pinning today's surfaces, or a coherent
+// per-brand tint later); the dark half is family-shared so the re-grades
+// below hold everywhere:
 //   - 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).
+//     form-outline stop (WCAG 1.4.11); Chakra's 400 (2.26:1) sat uselessly
+//     between roles.
+//   - 500 is #767676 (4.54:1) rather than Chakra's 4.0:1, so placeholders
+//     and secondary text pass AA.
 const gray = {
   10: { value: "#fcfcfc" },
+  25: { value: "#f5f5f5" },
   50: { value: "#f9f9f9" },
-  75: { value: "#f5f5f5" },
   100: { value: "#f1f1f1" },
   200: { value: "#e7e7e7" },
   300: { value: "#d4d4d4" },
+  // The press-weight grey: fills the deliberate 300→400 gap for transient
+  // state fills (pressed pills, heavy hovers) that want more than 300 but
+  // must not read as an outline. ~2.1:1 — never for text or boundaries.
+  350: { value: "#b4b4b4" },
   400: { value: "#949494" }, // 3.05:1 — accessible outline stop
   500: { value: "#767676" }, // 4.54:1 — text-safe secondary
   600: { value: "#575757" },
@@ -87,11 +94,9 @@ const gray = {
  * 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` 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.)
+ *   - 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.
  *   - 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.
@@ -123,10 +128,15 @@ export const basePreset = definePreset({
       colors: {
         ...colors,
         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.)
+        // OSS default brand ramps (see the brand contract above). `brand`
+        // aliases Chakra blue; `brand2` stays Chakra's slate gray — a frozen
+        // legacy alias, now deliberately decoupled from the neutral `gray`
+        // above (it exists so ml-trainer's OSS look and `statusBarBg`'s
+        // default don't move; a second accent is really an app decision and
+        // removing the slot entirely is recorded in docs/gray-ramp.md as a
+        // follow-up needing an ml-trainer lockstep).
         brand: colors.blue,
+        brand2: colors.gray,
       },
       spacing,
       sizes,
@@ -199,6 +209,12 @@ export const basePreset = definePreset({
         // follows; OSS language buttons are brand blue.)
         languageText: { value: "{colors.brand.500}" },
         languageTextHover: { value: "{colors.brand.600}" },
+        // The `label`/`subtitle` heading variants' colour (page-title chrome).
+        // classroom and data-microbit-org carried byte-identical variants with
+        // a hardcoded #cd0365 — the brand deep pink, which is data's
+        // `pink.500`; both override this to it. The OSS default follows the
+        // languageText precedent: the primary interactive brand.
+        headingAccent: { value: "{colors.brand.500}" },
         // The `primary`/`secondary` button variants' colours. Two brand
         // idioms exist in the family: brand-coloured buttons (ml-trainer,
         // python-editor — the defaults below) and a black-on-white system
@@ -220,24 +236,15 @@ export const basePreset = definePreset({
           secondaryActiveBorder: { value: "{colors.brand.700}" },
           secondaryActiveBg: { value: "{colors.brand.50}" },
         },
-        // 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" },
+        // 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}" },
         toastErrorBg: { value: "{colors.danger.600}" },
-        // 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}" },
+        // 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}" },
       },
     },
     recipes: {
@@ -249,6 +256,7 @@ export const basePreset = definePreset({
     },
     slotRecipes: {
       avatar,
+      breadcrumb,
       card,
       checkbox,
       dialog,
@@ -329,9 +337,11 @@ export const basePreset = definePreset({
       // as a runtime prop, so generate the breakpoint-prefixed variants too.
       dialog: [{ size: ["*"], responsive: true }, { centered: ["*"] }],
       drawer: ["*"],
+      field: ["*"],
       gridList: ["*"],
       listBox: ["*"],
       input: ["*"],
+      numberField: ["*"],
       radio: ["*"],
       select: ["*"],
       switchRecipe: ["*"],

package/src/base-tokens.ts

@@ -8,10 +8,8 @@
  */
 // 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),
-// `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).
+// Deliberately absent: `fonts` (foundation-owned, defined in base-preset.ts)
+// and `transition.property` (no Panda token category; inlined at use sites).
 
 export const colors = {
   transparent: {
@@ -90,9 +88,38 @@ export const colors = {
       value: "rgba(0, 0, 0, 0.92)",
     },
   },
-  // 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.
+  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",
+    },
+  },
   red: {
     "50": {
       value: "#FFF5F5",
@@ -157,6 +184,38 @@ 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",
@@ -189,6 +248,38 @@ 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",
@@ -221,6 +312,70 @@ 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",

package/src/index.ts

@@ -10,20 +10,25 @@
  */
 export * from "./system";
 export * from "./Avatar";
+export * from "./Breadcrumb";
 export * from "./Button";
 export * from "./LinkButton";
 export * from "./ButtonGroup";
 export * from "./Card";
 export * from "./Checkbox";
+export * from "./CheckboxGroup";
+export * from "./Field";
 export * from "./IconButton";
 export * from "./Image";
 export * from "./Input";
 export * from "./InputGroup";
 export * from "./LinkBox";
 export * from "./NativeSelect";
+export * from "./NativeSelectField";
 export * from "./NumberField";
 export * from "./ProgressBar";
 export * from "./Radio";
+export * from "./RadioGroup";
 export * from "./Skeleton";
 export * from "./Slide";
 export * from "./Slider";

package/src/rac-locale.ts

@@ -0,0 +1,33 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Sanitizes one of our locale ids for react-aria's I18nProvider.
+ *
+ * No mapping is needed to reach react-aria's own strings: its fallback chain
+ * runs exact tag, then the bare language, then any variant of that language,
+ * then en-US — so `fr` finds fr-FR, `ja` finds ja-JP, and the locales it has no
+ * strings for at all (ca, cy, ga-IE, and our `lol` pseudo-locale) land on
+ * English.
+ *
+ * What does need handling is a malformed tag: I18nProvider's explicit-locale
+ * path feeds it straight to `new Intl.Locale` with no guard of its own (unlike
+ * its browser-locale path), so a bad tag throws during render and takes out the
+ * tree. Only reachable through SharedUIProvider's `locale` prop in practice —
+ * react-intl rejects a malformed locale before we could read it from context.
+ */
+export const racLocale = (locale: string | undefined): string | undefined => {
+  if (locale === undefined) {
+    // Leave react-aria on its browser-locale default.
+    return undefined;
+  }
+  try {
+    Intl.DateTimeFormat.supportedLocalesOf([locale]);
+  } catch {
+    return "en-GB";
+  }
+  return locale;
+};

package/src/TextField.recipe.ts

@@ -1,54 +0,0 @@
-/**
- * (c) 2026, Micro:bit Educational Foundation and contributors
- *
- * SPDX-License-Identifier: MIT
- */
-import { defineSlotRecipe } from "@pandacss/dev";
-
-/**
- * Field slot recipe — Chakra's FormControl parts (FormLabel/FormHelperText/
- * FormErrorMessage, light mode). Consumed by the shared-ui TextField, which
- * maps the slots onto react-aria-components' TextField/Label/Text/FieldError;
- * the input itself is styled by the `input` recipe (Input.recipe.ts).
- *
- * Registered in the base preset (base-preset.ts). No variants, so it
- * needs no `staticCss` entry.
- */
-export const field = defineSlotRecipe({
-  className: "field",
-  slots: ["root", "label", "requiredIndicator", "helperText", "errorMessage"],
-  base: {
-    root: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "stretch",
-      width: "100%",
-    },
-    label: {
-      display: "block",
-      fontSize: "md",
-      fontWeight: "medium",
-      marginEnd: "3",
-      mb: "2",
-      "&[data-disabled]": { opacity: 0.4 },
-    },
-    requiredIndicator: {
-      marginStart: "1",
-      color: "danger.500",
-    },
-    helperText: {
-      mt: "2",
-      fontSize: "sm",
-      lineHeight: "normal",
-      color: "gray.600",
-    },
-    errorMessage: {
-      display: "flex",
-      alignItems: "center",
-      mt: "2",
-      fontSize: "sm",
-      lineHeight: "normal",
-      color: "danger.500",
-    },
-  },
-});