@microbit/ui 0.1.0-alpha.28 → 0.1.0-alpha.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.1.0-alpha.28",
+  "version": "0.1.0-alpha.29",
   "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/Button.recipe.ts

@@ -20,11 +20,9 @@ const transitionCommon =
  *
  * A config recipe (not a component cva): styles land in the `recipes` layer so
  * call sites can override with plain style props, and presets extend the
- * variants. This file holds the brand-independent variant set — the core
- * variants plus the family-wide `language`/`toolbar` variants; a
- * consuming app's preset extends it with app vocabulary (e.g. ml-trainer's
- * `led`/`record*`/`secondary-disabled`). Brand divergence within a variant is
- * token-driven (see the `button.*` and `languageText` semantic tokens).
+ * variants. Colour reaches a variant either through the `button.*` semantic
+ * tokens (the app's button idiom) or through `tone`, never through a per-app
+ * fork of a shape.
  *
  * Registered in the base preset (base-preset.ts).
  */
@@ -131,29 +129,40 @@ export const button = defineRecipe({
         },
         _active: { bg: "button.primaryActiveBg" },
       },
-      // The *destructive* outline (text darker than 500 for contrast).
-      // Two other outline shapes are currently restated per call site in
-      // classroom — a neutral outline (1px gray.200, inherited text,
-      // gray.50/gray.100 hover/press) and an on-colour outline (white 2px +
-      // white text over a coloured bar, whiteAlpha hover/press) — worth
-      // considering as variants if a second consumer wants them.
-      warning: {
+      // `solid`/`outline` are coloured by `tone`, and reference only the
+      // stops it guarantees (50/500/600/700). They are not `primary`/
+      // `secondary` in another colour: those follow the app's button idiom,
+      // which is black-on-white in half the family and so can't be a palette.
+      solid: {
+        color: "white",
+        bg: "colorPalette.500",
+        _hover: {
+          bg: "colorPalette.600",
+          _disabled: { bg: "colorPalette.500" },
+        },
+        _active: { bg: "colorPalette.700" },
+      },
+      // Border at 500 (a boundary needs only 3:1) so a `solid`/`outline`
+      // toggle pair shows the same edge either way; the label needs 600.
+      //
+      // Classroom restates two other outlines per call site — a neutral 1px
+      // grey one and a white-on-colour one. Promote either if a second
+      // consumer appears.
+      outline: {
         borderWidth: "2px",
-        borderColor: "danger.600",
-        color: "danger.600",
+        borderColor: "colorPalette.500",
+        color: "colorPalette.600",
         bg: "transparent",
-        _hover: { borderColor: "danger.700", color: "danger.700" },
-        _active: { bg: "danger.50" },
+        _hover: { borderColor: "colorPalette.600", color: "colorPalette.700" },
+        _active: { bg: "colorPalette.50" },
       },
-      // The destructive solid (confirm buttons). Same values as ml-trainer's
-      // `record` today, but a separate variant so recording UI and
-      // destructive actions can diverge - hence danger tokens here, red.*
-      // literals there.
-      warningSolid: {
-        color: "white",
-        bg: "danger.500",
-        _hover: { bg: "danger.600", _disabled: { bg: "danger.500" } },
-        _active: { bg: "danger.700" },
+      // Not a palette shape: a light fill under dark text is a different
+      // button from `solid`, and 350 exists in no other ramp.
+      neutral: {
+        color: "gray.800",
+        bg: "gray.100",
+        _hover: { bg: "gray.300", _disabled: { bg: "gray.100" } },
+        _active: { bg: "gray.350" },
       },
       // Family-wide variant (every censused app has toolbar-class buttons).
       // No ring override: the bar decides, and a dark one must spread
@@ -165,9 +174,27 @@ export const button = defineRecipe({
         _active: { bg: "whiteAlpha.800" },
       },
     },
+    /**
+     * The palette behind `solid`/`outline`. An allowlist rather than Panda's
+     * open `colorPalette` prop, because a palette missing a stop a shape
+     * reads renders it as nothing at all, with no error anywhere
+     * (docs/hints.md): this is where a palette is vetted. A tone should
+     * alias a whole ramp, so it has nowhere to fall through. Apps may add
+     * their own.
+     */
+    tone: {
+      brand: { colorPalette: "brand" },
+      // The destructive role, which a brand preset can re-point.
+      danger: { colorPalette: "danger" },
+      // Conventional red that isn't destructive (record buttons), so
+      // deliberately not following a brand's error colour.
+      red: { colorPalette: "red" },
+    },
   },
   defaultVariants: {
     variant: "secondary",
     size: "md",
+    // Never absent: a shape with no palette renders nothing.
+    tone: "brand",
   },
 });

package/src/Button.tsx

@@ -71,6 +71,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     {
       variant,
       size,
+      tone,
       css: cssProp,
       className,
       leftIcon,
@@ -96,7 +97,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       <RACButton
         ref={ref}
         className={cx(
-          button({ variant, size }),
+          button({ variant, size, tone }),
           cssProp ? css(cssProp) : undefined,
           className,
         )}

package/src/Field.recipe.ts

@@ -52,8 +52,7 @@ export const field = defineSlotRecipe({
     },
     requiredIndicator: {
       marginStart: "1",
-      // 600: red-as-text needs 4.5:1; danger.500 is border-grade (~4.1:1).
-      color: "danger.600",
+      color: "danger.500",
     },
     helperText: {
       // RAC's Text renders a span, and RadioGroup/CheckboxGroup roots are not
@@ -71,8 +70,7 @@ export const field = defineSlotRecipe({
       mt: "2",
       fontSize: "sm",
       lineHeight: "normal",
-      // 600: red-as-text needs 4.5:1 (the invalid border stays 500).
-      color: "danger.600",
+      color: "danger.500",
     },
   },
   variants: {

package/src/LinkButton.tsx

@@ -48,6 +48,7 @@ export const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
     {
       variant,
       size,
+      tone,
       css: cssProp,
       className,
       leftIcon,
@@ -61,7 +62,7 @@ export const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
       <RACLink
         ref={ref}
         className={cx(
-          button({ variant, size }),
+          button({ variant, size, tone }),
           css(linkReset, cssProp),
           className,
         )}

package/src/base-preset.ts

@@ -83,6 +83,25 @@ const gray = {
   900: { value: "#1a1a1a" },
 };
 
+// The family red, on the gray ramp's ladder — it is the conventional colour
+// for errors and recording, not a brand colour, so it can be graded rather
+// than negotiated. 400 was already exactly gray's 3:1 and stays verbatim,
+// anchoring the hue and saturation the darker stops hold while their
+// lightness solves for gray's ratio. The washes have no contract and keep
+// their values.
+const red = {
+  50: { value: "#FFF5F5" },
+  100: { value: "#FED7D7" },
+  200: { value: "#FEB2B2" },
+  300: { value: "#FC8181" },
+  400: { value: "#F56565" }, // 3.03:1
+  500: { value: "#e22b2b" }, // 4.55:1 — the white-text fill stop
+  600: { value: "#ac1818" },
+  700: { value: "#811212" },
+  800: { value: "#4f0b0b" },
+  900: { value: "#380808" },
+};
+
 /**
  * The base preset: the complete, working micro:bit design system. The base
  * token scales (base-tokens.ts), the micro:bit house style
@@ -141,6 +160,7 @@ export const basePreset = definePreset({
       colors: {
         ...colors,
         gray,
+        red,
         // OSS default brand ramps (see the brand contract above). `brand`
         // aliases the blue ramp; `brand2` is a frozen legacy alias of the
         // slate gray in base-tokens, deliberately decoupled from the neutral
@@ -208,16 +228,20 @@ export const basePreset = definePreset({
         focusRing: {
           value: { base: "{colors.gray.900}", _onDark: "{colors.white}" },
         },
-        // Error/destructive ramp. Destructive button variants,
-        // field error states and the error toast; the record* button
-        // variants deliberately stay on red.* (recording vocabulary, not
-        // danger).
+        // Error/destructive ramp: field error states, the error toast, and
+        // the `danger` button tone. Aliased whole, not just at the stops in
+        // use, so a tone has nowhere to fall through (Button.recipe.ts).
         danger: {
           50: { value: "{colors.red.50}" },
           100: { value: "{colors.red.100}" },
+          200: { value: "{colors.red.200}" },
+          300: { value: "{colors.red.300}" },
+          400: { value: "{colors.red.400}" },
           500: { value: "{colors.red.500}" },
           600: { value: "{colors.red.600}" },
           700: { value: "{colors.red.700}" },
+          800: { value: "{colors.red.800}" },
+          900: { value: "{colors.red.900}" },
         },
         // The language-dialog cards' text colour (@microbit/ui-patterns'
         // LanguageDialog) follows the primary interactive brand: every
@@ -259,7 +283,9 @@ export const basePreset = definePreset({
         toastInfoBg: { value: "{colors.teal.800}" },
         toastSuccessBg: { value: "{colors.teal.800}" },
         toastWarningBg: { value: "{colors.teal.800}" },
-        toastErrorBg: { value: "{colors.danger.600}" },
+        // 500, the text-safe stop, rather than following the teal toasts'
+        // 800: white on it is 4.55:1 and an error toast should read as red.
+        toastErrorBg: { value: "{colors.danger.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}" },
@@ -384,7 +410,13 @@ export const basePreset = definePreset({
       // too — otherwise the class lands on the element with no rule behind it
       // and the button silently falls back to the base size.
       avatar: ["*"],
-      button: [{ size: ["*"], responsive: true }, { variant: ["*"] }],
+      // `tone` generates as its own rule, not crossed with `variant`: it
+      // only assigns the palette custom properties a shape reads.
+      button: [
+        { size: ["*"], responsive: true },
+        { variant: ["*"] },
+        { tone: ["*"] },
+      ],
       checkbox: ["*"],
       heading: ["*"],
       card: ["*"],