@microbit/ui 0.0.0-gray.ramp.90

package/src/Button.recipe.ts

@@ -0,0 +1,192 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineRecipe } from "@pandacss/dev";
+
+// Chakra's transition.property.common, inlined (Panda has no transitionProperty
+// token category). Matches Chakra's Button base transition.
+const transitionCommon =
+  "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform";
+
+/**
+ * Button recipe — Chakra's default Button base + sizes, with this app's
+ * borderRadius (`button` = 2rem) and variant set ported from
+ * `components/button.ts`. Interaction conditions (`_hover`/`_active`/
+ * `_disabled`/`_focusVisible`) are widened in the preset to also match
+ * react-aria-components' data attributes, so these Chakra-shaped variant
+ * objects work unchanged on RAC's <Button>.
+ *
+ * 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
+ * Chakra 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).
+ *
+ * Registered in the base preset (base-preset.ts).
+ */
+export const button = defineRecipe({
+  className: "btn",
+  jsx: ["Button", "IconButton"],
+  base: {
+    lineHeight: "1.2",
+    borderRadius: "button",
+    fontWeight: "semibold",
+    transitionProperty: transitionCommon,
+    transitionDuration: "normal",
+    display: "inline-flex",
+    appearance: "none",
+    alignItems: "center",
+    justifyContent: "center",
+    userSelect: "none",
+    position: "relative",
+    whiteSpace: "nowrap",
+    verticalAlign: "middle",
+    outline: "none",
+    _focusVisible: {
+      focusShadow: "outline",
+    },
+    _disabled: {
+      opacity: 0.4,
+      cursor: "not-allowed",
+      boxShadow: "none",
+    },
+    _hover: {
+      _disabled: {
+        bg: "initial",
+      },
+    },
+  },
+  variants: {
+    size: {
+      lg: { h: "12", minW: "12", fontSize: "lg", px: "6" },
+      md: { h: "10", minW: "10", fontSize: "md", px: "4" },
+      sm: { h: "8", minW: "8", fontSize: "sm", px: "3" },
+      xs: { h: "6", minW: "6", fontSize: "xs", px: "2" },
+    },
+    variant: {
+      // Chakra's unstyled reset + this app's border-radius removal.
+      unstyled: {
+        bg: "none",
+        color: "inherit",
+        display: "inline",
+        lineHeight: "inherit",
+        m: "0",
+        p: "0",
+        borderRadius: "unset",
+      },
+      // Chakra's link layout (no padding/height) + this app's colours.
+      link: {
+        padding: 0,
+        height: "auto",
+        lineHeight: "normal",
+        verticalAlign: "baseline",
+        borderWidth: "0",
+        color: "brand.600",
+        fontWeight: "normal",
+        bg: "transparent",
+        _hover: {
+          textDecoration: "underline",
+        },
+      },
+      // Colours come from the `button.*` semantic tokens so the family's two
+      // button idioms (brand-coloured vs black-on-white) share this recipe —
+      // see the token block in base-preset.ts.
+      secondary: {
+        borderWidth: "2px",
+        borderColor: "button.secondaryBorder",
+        color: "button.secondaryText",
+        bg: "transparent",
+        _hover: {
+          borderColor: "button.secondaryHoverBorder",
+          bg: "button.secondaryHoverBg",
+        },
+        _active: {
+          bg: "button.secondaryActiveBg",
+          borderColor: "button.secondaryActiveBorder",
+        },
+      },
+      ghost: {
+        color: "black",
+        bg: "transparent",
+        _hover: { bg: "blackAlpha.50" },
+        _active: { bg: "blackAlpha.100" },
+      },
+      // Chakra had no `plain` variant, so `variant="plain"` fell through to
+      // base-only styling: a transparent, colour-inheriting button. Used for the
+      // action-bar icon-button menu triggers (settings/help), which supply their
+      // own colour and shape via instance styles.
+      plain: {
+        bg: "transparent",
+        color: "inherit",
+      },
+      primary: {
+        color: "white",
+        bg: "button.primaryBg",
+        _hover: {
+          bg: "button.primaryHoverBg",
+          _disabled: { bg: "button.primaryBg" },
+        },
+        _active: { bg: "button.primaryActiveBg" },
+      },
+      // 600/700, matching what python-editor's Chakra outline + red
+      // colorScheme resolved to. (Extracted from ml-trainer at 500/600, but
+      // its one warning button tolerates the darkening; python-editor's
+      // "Reset project" was visibly lighter than its Chakra self.)
+      // NOTE (2026-08-02, from classroom): two Chakra `outline` shapes have
+      // no home here and are currently restated per call site in that app —
+      // worth considering as variants once a second consumer wants them.
+      //   - a neutral outline (transparent, 1px gray.200, inherited text,
+      //     gray.50/gray.100 hover/press): Chakra's default-colorScheme
+      //     `outline`, and python-editor's *default* variant per the
+      //     playbook's cross-app vocabulary, so likely already a 2-app shape.
+      //   - an on-colour outline (white 2px + white text over a coloured bar,
+      //     whiteAlpha hover/press): Chakra's `outline` + `whiteAlpha`.
+      // `warning` below is the *destructive* outline and is not a substitute
+      // for either; `warningSolid` did map exactly onto Chakra solid+red.
+      warning: {
+        borderWidth: "2px",
+        borderColor: "danger.600",
+        color: "danger.600",
+        bg: "transparent",
+        _hover: { borderColor: "danger.700", color: "danger.700" },
+        _active: { bg: "danger.50" },
+      },
+      // Chakra's built-in solid + red colorScheme (destructive confirm
+      // buttons). Same values as `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" },
+      },
+      // Family-wide variants (every censused app has language- and
+      // toolbar-class buttons).
+      toolbar: {
+        color: "black",
+        bg: "white",
+        _hover: { bg: "whiteAlpha.900", _disabled: { bg: "white" } },
+        _active: { bg: "whiteAlpha.800" },
+        _focusVisible: { focusShadow: "outlineDark" },
+      },
+      language: {
+        borderWidth: "2px",
+        borderColor: "gray.200",
+        color: "languageText",
+        // The hover wash reads as a highlight because the app's gray ramp
+        // carries its brand undertone (per-app tinted ramps) — an
+        // achromatic gray.100 here goes drab, a tinted one doesn't.
+        _hover: { color: "languageTextHover", bg: "gray.100" },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "secondary",
+    size: "md",
+  },
+});

package/src/Button.tsx

@@ -0,0 +1,69 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { forwardRef, ReactNode } from "react";
+import {
+  Button as RACButton,
+  ButtonProps as RACButtonProps,
+} from "react-aria-components";
+import { css, cx } from "styled-system/css";
+import { button, ButtonVariantProps } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+import { buttonIcon } from "./button-icon";
+
+export interface ButtonProps
+  extends Omit<RACButtonProps, "className" | "children">,
+    ButtonVariantProps {
+  /** Per-instance style overrides, merged after the recipe. */
+  css?: SystemStyleObject;
+  className?: string;
+  /** Icon rendered before the label, matching Chakra's `leftIcon`. */
+  leftIcon?: ReactNode;
+  /** Icon rendered after the label, matching Chakra's `rightIcon`. */
+  rightIcon?: ReactNode;
+  children?: ReactNode;
+}
+
+/**
+ * Button — react-aria-components <Button> styled with the `button` config
+ * recipe. The recipe's interaction states are driven by RAC's data attributes
+ * (see the preset's widened conditions), so disabled/hover/press/focus all work
+ * without extra wiring.
+ */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    {
+      variant,
+      size,
+      css: cssProp,
+      className,
+      leftIcon,
+      rightIcon,
+      children,
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <RACButton
+        ref={ref}
+        className={cx(
+          button({ variant, size }),
+          cssProp ? css(cssProp) : undefined,
+          className,
+        )}
+        {...rest}
+      >
+        {leftIcon ? (
+          <span className={buttonIcon({ side: "left" })}>{leftIcon}</span>
+        ) : null}
+        {children}
+        {rightIcon ? (
+          <span className={buttonIcon({ side: "right" })}>{rightIcon}</span>
+        ) : null}
+      </RACButton>
+    );
+  },
+);

package/src/ButtonGroup.tsx

@@ -0,0 +1,70 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { forwardRef, HTMLAttributes } from "react";
+import { css, cx } from "styled-system/css";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Square the inner radii so adjacent buttons form one control (Chakra's
+   * `isAttached`). Otherwise buttons get a small gap.
+   */
+  isAttached?: boolean;
+  /** Per-instance style overrides. */
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+/**
+ * ButtonGroup — lays out related buttons in a row. Works with any button
+ * elements (shared-ui or native). Replaces Chakra's ButtonGroup.
+ */
+export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  function ButtonGroup({ isAttached, css: cssProp, className, ...rest }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cx(
+          css({
+            display: "inline-flex",
+            alignItems: "center",
+            // Buttons are position: relative, so without this an attached
+            // sibling paints over the focused button's focus-ring shadow.
+            // Chakra raised on :focus, but with the attached -1px overlap a
+            // raised button also paints over a seam its neighbour draws
+            // (e.g. a solid split button's white borderLeft), so raise only
+            // when the ring is actually shown.
+            "& > *": { _focusVisible: { zIndex: 1 } },
+          }),
+          isAttached
+            ? css({
+                gap: 0,
+                // :first-child/:last-child, not :first-of-type: attached
+                // groups can mix element types (e.g. select + button), and
+                // -of-type matches per element type.
+                // marginEnd -1px (Chakra parity): overlaps adjacent borders
+                // so two 1px inner edges read as a single 1px seam.
+                "& > *:first-child:not(:last-child)": {
+                  borderEndRadius: 0,
+                  marginEnd: "-1px",
+                },
+                "& > *:not(:first-child):not(:last-child)": {
+                  borderRadius: 0,
+                  marginEnd: "-1px",
+                },
+                "& > *:not(:first-child):last-child": {
+                  borderStartRadius: 0,
+                },
+              })
+            : css({ gap: 2 }),
+          cssProp ? css(cssProp) : undefined,
+          className,
+        )}
+        {...rest}
+      />
+    );
+  },
+);

package/src/Card.recipe.ts

@@ -0,0 +1,49 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * Card slot recipe — Chakra's Card at its default md size (light mode), with
+ * the `elevated` (default) and `outline` variants this app uses.
+ *
+ * Registered in the base preset (base-preset.ts); `variant` is
+ * forwarded as a runtime prop so the variants are generated via `staticCss`.
+ */
+export const card = defineSlotRecipe({
+  className: "card",
+  slots: ["container", "body"],
+  base: {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      minWidth: 0,
+      wordWrap: "break-word",
+      bg: "white",
+      borderRadius: "md",
+      color: "inherit",
+    },
+    body: {
+      padding: "5",
+      flex: "1 1 0%",
+    },
+  },
+  variants: {
+    variant: {
+      elevated: {
+        container: { boxShadow: "base" },
+      },
+      outline: {
+        container: {
+          borderWidth: "1px",
+          borderStyle: "solid",
+          borderColor: "gray.200",
+        },
+      },
+    },
+  },
+  defaultVariants: { variant: "elevated" },
+});

package/src/Card.tsx

@@ -0,0 +1,56 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { forwardRef, HTMLAttributes } from "react";
+import { css, cx } from "styled-system/css";
+import { card, CardVariantProps } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface CardProps
+  extends HTMLAttributes<HTMLDivElement>,
+    CardVariantProps {
+  /** Per-instance style overrides, merged after the recipe. */
+  css?: SystemStyleObject;
+}
+
+/**
+ * Card — Chakra's <Card> equivalent (md size). Place a CardBody inside.
+ */
+export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
+  { variant, css: cssProp, className, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={cx(
+        card({ variant }).container,
+        cssProp ? css(cssProp) : undefined,
+        className,
+      )}
+      {...rest}
+    />
+  );
+});
+
+export interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+  css?: SystemStyleObject;
+}
+
+export const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(
+  function CardBody({ css: cssProp, className, ...rest }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cx(
+          card({}).body,
+          cssProp ? css(cssProp) : undefined,
+          className,
+        )}
+        {...rest}
+      />
+    );
+  },
+);

package/src/Checkbox.recipe.ts

@@ -0,0 +1,111 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * Checkbox slot recipe — Chakra's checkbox with the default blue colorScheme
+ * (light mode) and its sm/md/lg size scale. The control's
+ * `borderColor: inherit` picks up a `borderColor` set on the root, matching
+ * Chakra's convention for tinting the box from the call site.
+ *
+ * State styling keys off data attributes stamped on the control by the
+ * shared-ui Checkbox (react-aria provides the state via render props).
+ *
+ * Registered in the base preset (base-preset.ts), which also has the
+ * `staticCss` entry that keeps the runtime-prop size variants generated.
+ */
+export const checkbox = defineSlotRecipe({
+  className: "checkbox",
+  slots: ["root", "control", "icon", "label"],
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      verticalAlign: "top",
+      cursor: "pointer",
+      position: "relative",
+      // The control's `borderColor: inherit` reads this. Stated here rather
+      // than on the control so a call site can still tint the whole control
+      // by setting borderColor on the root. Without it, inherit fell through
+      // to the reset's gray.200 (~1.3:1) — the accessible outline stop, as
+      // the input recipe (docs/gray-ramp.md).
+      borderColor: "gray.400",
+      "&[data-disabled]": { cursor: "not-allowed" },
+    },
+    control: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      transitionProperty: "box-shadow",
+      transitionDuration: "normal",
+      borderWidth: "2px",
+      borderStyle: "solid",
+      borderRadius: "sm",
+      borderColor: "inherit",
+      color: "white",
+      bg: "white",
+      "&[data-selected]": {
+        bg: "controlCheckedBg",
+        borderColor: "controlCheckedBg",
+        color: "white",
+        _hover: {
+          bg: "controlCheckedHoverBg",
+          borderColor: "controlCheckedHoverBg",
+        },
+      },
+      // Chakra's disabled greys; the selected block restates _hover so the
+      // widened native-:hover condition can't re-tint a disabled control.
+      "&[data-disabled]": {
+        bg: "gray.100",
+        borderColor: "gray.100",
+      },
+      "&[data-selected][data-disabled]": {
+        bg: "gray.200",
+        borderColor: "gray.200",
+        color: "gray.500",
+        _hover: { bg: "gray.200", borderColor: "gray.200" },
+      },
+      "&[data-focus-visible]": {
+        focusShadow: "outline",
+      },
+    },
+    icon: {
+      transitionProperty: "transform",
+      transitionDuration: "normal",
+    },
+    label: {
+      userSelect: "none",
+      marginStart: "2",
+      "&[data-disabled]": { opacity: 0.4 },
+    },
+  },
+  variants: {
+    // Chakra's Checkbox size scale. The icon dimensions are Chakra's
+    // 1.2em-wide check glyph at each size's icon fontSize (3xs/2xs/2xs),
+    // resolved to rem.
+    size: {
+      sm: {
+        control: { width: "3", height: "3" },
+        icon: { width: "0.54rem", height: "0.54rem" },
+        label: { fontSize: "sm" },
+      },
+      md: {
+        control: { width: "4", height: "4" },
+        icon: { width: "0.75rem", height: "0.75rem" },
+        label: { fontSize: "md" },
+      },
+      lg: {
+        control: { width: "5", height: "5" },
+        icon: { width: "0.75rem", height: "0.75rem" },
+        label: { fontSize: "lg" },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

package/src/Checkbox.tsx

@@ -0,0 +1,106 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactNode } from "react";
+import {
+  Checkbox as RACCheckbox,
+  CheckboxProps as RACCheckboxProps,
+} from "react-aria-components";
+import { css, cx } from "styled-system/css";
+import { checkbox, CheckboxVariantProps } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+
+/** What a render-prop child is told about the checkbox. */
+export interface CheckboxState {
+  isSelected: boolean;
+  isFocusVisible: boolean;
+  isDisabled: boolean;
+}
+
+export interface CheckboxProps
+  extends Omit<RACCheckboxProps, "className" | "children" | "style">,
+    CheckboxVariantProps {
+  /** Per-instance style overrides for the root, merged after the recipe. */
+  css?: SystemStyleObject;
+  className?: string;
+  /**
+   * The label. A function receives the checkbox's state, for a label that
+   * changes with it.
+   */
+  children?: ReactNode | ((state: CheckboxState) => ReactNode);
+  /**
+   * Whether to draw the box. `false` is for a checkbox whose children draw
+   * the selected state themselves — a selectable tile, or an avatar that
+   * grows a tick. The label wrapper goes with it, so the children own the
+   * whole row, including the focus ring the box would otherwise carry.
+   *
+   * @default true
+   */
+  control?: boolean;
+}
+
+/**
+ * Checkbox — react-aria-components <Checkbox> styled like Chakra's checkbox.
+ * Children render as the label; wrap them in a visually-hidden span for
+ * icon-less checkboxes.
+ */
+export const Checkbox = ({
+  size,
+  css: cssProp,
+  className,
+  children,
+  control,
+  ...rest
+}: CheckboxProps) => {
+  const slots = checkbox({ size });
+  return (
+    <RACCheckbox
+      className={cx(slots.root, cssProp ? css(cssProp) : undefined, className)}
+      {...rest}
+    >
+      {({ isSelected, isFocusVisible, isDisabled }) => {
+        const content =
+          typeof children === "function"
+            ? children({ isSelected, isFocusVisible, isDisabled })
+            : children;
+        if (control === false) {
+          return content;
+        }
+        return (
+          <>
+            <span
+              className={slots.control}
+              data-selected={isSelected || undefined}
+              data-focus-visible={isFocusVisible || undefined}
+              data-disabled={isDisabled || undefined}
+              aria-hidden
+            >
+              {isSelected && (
+                <svg viewBox="0 0 12 10" className={slots.icon} aria-hidden>
+                  <polyline
+                    points="1.5 6 4.5 9 10.5 1"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              )}
+            </span>
+            {content != null && (
+              <span
+                className={slots.label}
+                data-disabled={isDisabled || undefined}
+              >
+                {content}
+              </span>
+            )}
+          </>
+        );
+      }}
+    </RACCheckbox>
+  );
+};