@microbit/ui 0.1.0-alpha.18 → 0.1.0-alpha.20

package/src/Toast.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { ReactNode, useMemo } from "react";
+import { ReactNode, useMemo, useSyncExternalStore } from "react";
 import {
   Button as RACButton,
   UNSTABLE_Toast as RACToast,
@@ -55,6 +55,10 @@ const statusIcon: Record<ToastStatus, IconType> = {
   error: RiErrorWarningFill,
 };
 
+// Module scope so useSyncExternalStore doesn't resubscribe every render.
+const subscribeToQueue = (fn: () => void) => toastQueue.subscribe(fn);
+const getVisibleCount = () => toastQueue.visibleToasts.length;
+
 /**
  * Mount once near the app root, inside the IntlProvider (the close button's
  * label and the status announcements are react-intl messages).
@@ -63,8 +67,19 @@ const statusIcon: Record<ToastStatus, IconType> = {
 export const ToastProvider = () => {
   const intl = useIntl();
   const slots = toastRecipe();
+  // The region's landmark label counts the visible toasts, so it has to
+  // track the queue.
+  const count = useSyncExternalStore(
+    subscribeToQueue,
+    getVisibleCount,
+    getVisibleCount,
+  );
   return (
-    <RACToastRegion queue={toastQueue} className={slots.region}>
+    <RACToastRegion
+      queue={toastQueue}
+      aria-label={intl.formatMessage(uiMessage("ui.toast-region"), { count })}
+      className={slots.region}
+    >
       {({ toast }) => {
         const status = toast.content.status ?? "info";
         return (

package/src/base-preset.ts

@@ -45,6 +45,43 @@ import { tooltip } from "./Tooltip.recipe";
 import { field } from "./Field.recipe";
 import { toast } from "./Toast.recipe";
 
+// The family gray ramp: pure neutrals as the library default. The two
+// halves have different jobs and different override rules:
+//
+// - 10–300 are surface stops (panels, page backdrops, hairlines, subtle
+//   fills). Presets may freely override these values — pinning an app's
+//   existing surfaces or applying a brand tint — because a few bits of
+//   lightness here reads across a whole viewport.
+// - 350 is the decorative/state fill stop (~2.1:1): avatar discs, skeleton
+//   pulse, pressed fills. Never text or boundaries.
+// - 400–900 are ink stops (outlines, placeholders, text) with a contrast
+//   contract on white: 400 ≥ 3:1, the accessible form-outline stop
+//   (WCAG 1.4.11); 500 ≥ 4.5:1, text-safe secondary (placeholders, muted
+//   icons). Presets may re-tint these only luminance-matched — the
+//   contrast figures are the contract, hue is free.
+//
+// Override values, never names: raw var(--colors-gray-*) references and
+// paired private presets depend on the names, so a rename is a breaking
+// change to both and needs every app and paired preset moved in lockstep
+// (as was done when Chakra's misnamed darker-than-50 stop `25` became
+// `75`). And never override partially in a way that lets a stop fall
+// through to a different grey system.
+const gray = {
+  10: { value: "#fcfcfc" },
+  50: { value: "#f9f9f9" },
+  75: { value: "#f5f5f5" },
+  100: { value: "#f1f1f1" },
+  200: { value: "#e7e7e7" },
+  300: { value: "#d4d4d4" },
+  350: { value: "#b4b4b4" }, // ~2.1:1 — decorative fills only
+  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
@@ -92,16 +129,12 @@ export const basePreset = definePreset({
     tokens: {
       colors: {
         ...colors,
-        gray: {
-          ...colors.gray,
-          // Very light grays the family's designs use below Chakra's 50.
-          10: { value: "#fcfcfc" },
-          25: { value: "#f5f5f5" },
-        },
+        gray,
         // 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).
+        // aliases Chakra blue; `brand2` stays Chakra's slate gray — a frozen
+        // legacy alias, deliberately decoupled from the neutral `gray` above
+        // so ml-trainer's OSS look and `statusBarBg`'s default don't move.
+        // Removing the slot is a follow-up needing an ml-trainer lockstep.
         brand: colors.blue,
         brand2: colors.gray,
       },
@@ -146,15 +179,13 @@ export const basePreset = definePreset({
     },
     semanticTokens: {
       colors: {
-        // Checked/focus states of form controls (Chakra's default blue
-        // colorScheme). Checkbox/Switch checked backgrounds, Input focus
-        // border, and the Slider/ProgressBar fills (the last two are
-        // near-dead defaults - current call sites override them).
-        controlCheckedBg: { value: "{colors.blue.500}" },
-        controlCheckedHoverBg: { value: "{colors.blue.600}" },
-        focusBorder: { value: "{colors.blue.500}" },
-        sliderFilledTrack: { value: "{colors.blue.500}" },
-        progressFilledTrack: { value: "{colors.blue.500}" },
+        // Checked/focus states of form controls: Checkbox/Switch/Radio
+        // checked backgrounds and the Input/Select focus border. Semantic
+        // so a brand can diverge them from its ramp — e.g. a light
+        // brand.500 needing a darker 3:1 focus border.
+        controlCheckedBg: { value: "{colors.brand.500}" },
+        controlCheckedHoverBg: { value: "{colors.brand.600}" },
+        focusBorder: { value: "{colors.brand.500}" },
         // Error/destructive ramp (Chakra red). Destructive button variants,
         // field error states and the error toast; the record* button
         // variants deliberately stay on red.* (recording vocabulary, not