@stonedogcode/style 0.9.0

package/src/preset/recipes/input-radio.ts

@@ -0,0 +1,158 @@
+import { defineSlotRecipe } from "@pandacss/dev";
+
+export const inputRadioRootRecipe = defineSlotRecipe({
+  className: "input-radio",
+  slots: ["root", "item", "input", "control", "indicator"],
+  base: {
+    root: {
+      display: "flex",
+    },
+    item: {
+      display: "inline-flex",
+      alignItems: "center",
+      cursor: "pointer",
+      padding: "var(--panda-density-padding, 8px)",
+      margin: "var(--panda-density-margin, 8px)",
+      minHeight: "48px",
+      borderRadius: "md",
+      borderWidth: "1px",
+      borderColor: "transparent",
+      "&[data-checked]": {
+        borderColor: "boxBgSecondary",
+        bg: "rgba(0, 123, 255, 0.2)",
+      },
+    },
+    // Visually hidden, NOT `display: none` — which is what this was.
+    //
+    // `display: none` takes the input out of the accessibility tree and out of
+    // the tab order, so the group could not be reached or operated by keyboard
+    // at all, and a screen reader never saw the radios. Clicking the label with
+    // a pointer was the only way to choose anything: a WCAG 2.1.1 (Keyboard)
+    // failure at Level A, on a control whose whole job is making a choice.
+    //
+    // Transparent and laid over the control instead, so it keeps its semantics,
+    // its focus, and its hit area. The focus ring is drawn on `control` below,
+    // since an invisible element cannot show one.
+    input: {
+      position: "absolute",
+      width: "1.25rem",
+      height: "1.25rem",
+      margin: "0",
+      opacity: 0,
+      cursor: "pointer",
+    },
+    control: {
+      width: "1.25rem",
+      height: "1.25rem",
+      borderRadius: "50%",
+      border: "2px solid",
+      borderColor: "gray.400",
+      // The focus ring for the transparent input above. Keyboard reachability
+      // is worth nothing if the user cannot see where they are.
+      ".input-radio__input:focus-visible + &": {
+        outline: "2px solid",
+        outlineColor: "borderBgAccent",
+        outlineOffset: "2px",
+      },
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      marginRight: "0.5rem",
+      transition: "border-color 0.2s",
+      [`.input-radio__item[data-checked] > &,
+      &[data-checked]`]: {
+        borderColor: "boxBgSecondary",
+      },
+    },
+    indicator: {
+      width: "0.75rem",
+      height: "0.75rem",
+      borderRadius: "50%",
+      backgroundColor: "textPop",
+      transform: "scale(0)",
+      transition: "transform 0.2s",
+      [`.input-radio__item[data-checked] &,
+      &[data-checked]`]: {
+        transform: "scale(1)",
+      },
+    },
+  },
+  variants: {
+    variant: {
+      solid: {
+        item: {
+          bg: "boxBgAccent",
+          color: "textPrimary",
+          borderColor: "borderBgPrimary",
+        },
+      },
+      outline: {
+        item: {
+          borderColor: "borderBgSecondary",
+          color: "textPrimary",
+          borderRadius: "0",
+        },
+      },
+      aurora: {
+        item: {
+          // Bare token names do not substitute inside an arbitrary value, so
+          // this gradient was invalid and never painted (NEH-301). `{colors.X}`
+          // is the syntax that does.
+          backgroundImage:
+            "linear-gradient(to right, {colors.boxBgAccent}, {colors.boxBgSecondary})",
+          color: "textPrimary",
+          borderColor: "transparent",
+        },
+      },
+      glass: {
+        item: {
+          backdropFilter: "blur(10px)",
+          backgroundColor: "rgba(255, 255, 255, 0.1)",
+          border: "1px solid",
+          borderColor: "borderBgPrimary",
+          color: "textPrimary",
+        },
+      },
+      matte: {
+        item: {
+          bg: "buttonBgSecondary",
+          color: "textAccent",
+        },
+      },
+      ghost: {
+        item: {
+          color: "textSecondary",
+          bg: "buttonBgSecondary",
+          border: "none",
+        },
+      },
+      none: {
+        item: {
+          border: "none",
+          backgroundColor: "white",
+        },
+      },
+    },
+    size: {
+      sm: {
+        control: { width: "4", height: "4" },
+        indicator: { width: "2", height: "2" },
+        item: { fontSize: "sm", marginLeft: "2" },
+      },
+      md: {
+        control: { width: "5", height: "5" },
+        indicator: { width: "2.5", height: "2.5" },
+        item: { fontSize: "md", marginLeft: "2.5" },
+      },
+      lg: {
+        control: { width: "6", height: "6" },
+        indicator: { width: "3", height: "3" },
+        item: { fontSize: "lg", marginLeft: "3" },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "solid",
+    size: "md",
+  },
+});

package/src/preset/recipes/input-surface.ts

@@ -0,0 +1,152 @@
+/**
+ * The one definition of what a form control looks like.
+ *
+ * A text input and a dropdown that sit next to each other in a form are the
+ * same object to the person filling it in, so they must be pixel-identical
+ * apart from the dropdown's indicator. They stopped being identical because
+ * `input-text.ts` and `input-dropdown.ts` were copy-pasted and then edited
+ * separately: the dropdown grew a per-variant `borderColor` and the text input
+ * did not, so their borders diverged at `outline`, `aurora`, and `glass` — and
+ * `glass` is the app-wide default (`lib/slices/configSlice.ts`). Everything
+ * else — padding, the 44px minimum target, the focus ring, the disabled
+ * treatment — was duplicated verbatim and would have drifted next (NEH-84).
+ *
+ * Both recipes now spread these. A control that needs to differ should say so
+ * in its own recipe, deliberately, rather than by having been forked.
+ */
+
+/**
+ * Everything true of a control regardless of variant.
+ *
+ * `minHeight: 44px` is the WCAG 2.5.5 (AAA) target size and is not negotiable
+ * downward — see the UX & accessibility floor in CLAUDE.md. Padding keys off
+ * `--panda-density-padding` so the control tracks Settings → Density.
+ */
+export const inputSurfaceBase = {
+  width: "100%",
+  minWidth: 0,
+  display: "block",
+  boxSizing: "border-box",
+  outline: "none",
+  border: "1px solid",
+  borderColor: "borderBgPrimary",
+  borderRadius: "var(--radii-md, 0.375rem)",
+  padding:
+    "calc(var(--panda-density-padding, 8px) + 4px) calc(var(--panda-density-padding, 8px) + 8px)",
+  margin: 0,
+  minHeight: "48px",
+  // Stated, not inherited (NEH-289): a native form control uses the UA's own
+  // font unless told otherwise, so without this a themed typeface reaches the
+  // page and stops at the edge of every input on it.
+  fontFamily: "body",
+  fontSize: "var(--font-sizes-xl, 1.25rem)",
+  transition: "box-shadow 0.2s, border-color 0.2s",
+  // A token, not `black`: the base has to be legible on whatever the variant
+  // paints, and in dark mode. The one variant that hard-codes a white
+  // background states its own colour.
+  color: "textPrimary",
+  _hover: {
+    cursor: "pointer",
+  },
+  "&:focus": {
+    borderColor: "borderBgSecondary",
+    boxShadow: "0 0 0 1px boxBgSecondary",
+  },
+  "&:disabled": {
+    opacity: 0.4,
+    cursor: "not-allowed",
+  },
+  "&::placeholder": {
+    color: "textPrimary",
+    opacity: 1,
+  },
+} as const;
+
+/**
+ * The variant map. Every variant states its own `bg`, `color`, and
+ * `borderColor` rather than inheriting some and not others — that asymmetry is
+ * what let the two recipes disagree without either looking wrong on its own.
+ */
+export const inputSurfaceVariants = {
+  solid: {
+    bg: "boxBgAccent",
+    color: "textPrimary",
+    borderColor: "borderBgPrimary",
+  },
+  outline: {
+    // Stated, not omitted. An outline control is meant to show whatever is
+    // behind it, and saying so is what stops the next editor from "fixing" the
+    // missing background with a colour.
+    bg: "transparent",
+    color: "textPrimary",
+    borderColor: "borderBgSecondary",
+    borderRadius: "0",
+  },
+  aurora: {
+    // Bare token names do not substitute inside an arbitrary value, so this
+    // gradient was invalid and never painted (NEH-301).
+    backgroundImage:
+      "linear-gradient(to right, {colors.boxBgAccent}, {colors.boxBgSecondary})",
+    color: "textPrimary",
+    borderColor: "borderBgAccent",
+  },
+  glass: {
+    position: "relative",
+    overflow: "hidden",
+    borderWidth: "2px",
+    borderStyle: "solid",
+    borderRadius: "xl",
+    bg: "boxBgAccent",
+    color: "textPrimary",
+    borderColor: "borderBgSecondary",
+    backdropFilter: "blur(12px)",
+    fontWeight: "normal",
+    _placeholder: {
+      color: "textPrimary",
+      opacity: 0.8,
+    },
+    _focusVisible: {
+      borderColor: "borderBgPrimary",
+      boxShadow: "borderBgPrimary",
+      zIndex: 1,
+    },
+    _disabled: {
+      opacity: 0.5,
+      cursor: "not-allowed",
+      boxShadow: "none",
+    },
+    _before: {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: "inherit",
+      bgGradient:
+        "linear(to-br, rgba(255,255,255,0.08), rgba(255,255,255,0.02))",
+      zIndex: -1,
+    },
+  },
+  matte: {
+    bg: "buttonBgSecondary",
+    color: "textSecondary",
+    borderColor: "borderBgPrimary",
+  },
+  ghost: {
+    color: "textSecondary",
+    bg: "buttonBgSecondary",
+    borderColor: "borderBgPrimary",
+    "&::placeholder": {
+      color: "textSecondary/60",
+    },
+  },
+  none: {
+    border: "none",
+    backgroundColor: "white",
+    // Explicit because the background is a literal white that no theme can
+    // change; inheriting the base token would put light text on it in dark
+    // mode. The hard-coded white itself is NEH-86's to remove.
+    color: "black",
+  },
+} as const;

package/src/preset/recipes/input-text.ts

@@ -0,0 +1,17 @@
+import { defineRecipe } from "@pandacss/dev";
+import { inputSurfaceBase, inputSurfaceVariants } from "./input-surface";
+
+/**
+ * Text-like controls: `input`, `textarea`, the date input, the phone input.
+ *
+ * The surface is shared with `inputDropdownRecipe` — see `input-surface.ts`
+ * for why (NEH-84). Anything specific to a text control belongs here; anything
+ * that should also be true of a dropdown belongs in the shared surface.
+ */
+export const inputTextRecipe = defineRecipe({
+  className: "input-text",
+  base: inputSurfaceBase,
+  variants: {
+    variant: inputSurfaceVariants,
+  },
+});

package/src/preset/recipes/list.ts

@@ -0,0 +1,196 @@
+import { defineSlotRecipe } from "@pandacss/dev";
+
+export const listRecipe = defineSlotRecipe({
+  className: "list",
+  slots: ["root", "item"],
+  description: "A recipe for lists with various styles",
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+    },
+    item: {
+      width: "full",
+      padding: "4", // Default padding for list items
+    },
+  },
+  variants: {
+    variant: {
+      solid: {
+        root: {
+          bg: "boxBgPrimary",
+          // Paired with the surface, per TEXT_BACKGROUND_PAIRS. Without it the
+          // rows inherit whatever colour the page has — and on a dark
+          // `boxBgPrimary` that is dark-on-dark, unreadable. This recipe was
+          // the only one setting a background without its partner; `dlRecipe`
+          // beside it has always paired them. Found by screenshotting the
+          // component rather than by any test (NEH-167, cycle 9), which is the
+          // same way NEH-278 was found.
+          color: "textPrimary",
+          borderWidth: "1px",
+          // Same omission as the item slot below: no `border-style`, so the
+          // outer border of a solid or outline list computed to 0px and never
+          // painted either.
+          borderStyle: "solid",
+          borderColor: "borderBgPrimary",
+          borderRadius: "lg",
+        },
+        item: {
+          borderBottomWidth: "1px",
+          // `border-style` defaults to `none`, and a border with no style
+          // computes to a width of ZERO however many pixels you ask for — so
+          // these row separators had never rendered (NEH-167, cycle 9). The
+          // aurora/glass/matte variants below use the `borderBottom`
+          // shorthand, which carries the style, which is why only these three
+          // were dead.
+          borderBottomStyle: "solid",
+          borderColor: "borderBgSecondary",
+          _last: {
+            borderBottom: "none",
+          },
+        },
+      },
+      outline: {
+        root: {
+          borderWidth: "1px",
+          // Same omission as the item slot below: no `border-style`, so the
+          // outer border of a solid or outline list computed to 0px and never
+          // painted either.
+          borderStyle: "solid",
+          borderColor: "borderBgPrimary",
+          borderRadius: "lg",
+        },
+        item: {
+          borderBottomWidth: "1px",
+          // `border-style` defaults to `none`, and a border with no style
+          // computes to a width of ZERO however many pixels you ask for — so
+          // these row separators had never rendered (NEH-167, cycle 9). The
+          // aurora/glass/matte variants below use the `borderBottom`
+          // shorthand, which carries the style, which is why only these three
+          // were dead.
+          borderBottomStyle: "solid",
+          borderColor: "borderBgSecondary",
+          _last: {
+            borderBottom: "none",
+          },
+        },
+      },
+      lines: {
+        item: {
+          borderBottomWidth: "1px",
+          // `border-style` defaults to `none`, and a border with no style
+          // computes to a width of ZERO however many pixels you ask for — so
+          // these row separators had never rendered (NEH-167, cycle 9). The
+          // aurora/glass/matte variants below use the `borderBottom`
+          // shorthand, which carries the style, which is why only these three
+          // were dead.
+          borderBottomStyle: "solid",
+          borderColor: "borderBgSecondary",
+          _last: {
+            borderBottom: "none",
+          },
+        },
+      },
+      aurora: {
+        root: {
+          position: "relative",
+          overflow: "hidden",
+          px: { base: 6, md: 8 },
+          py: { base: 2, md: 4 },
+          border: "1px solid",
+          backgroundImage: "linear-gradient(to right, #ff7e5f, #feb47b)",
+          color: "textPrimary",
+          borderColor: "borderBgSecondary",
+          _before: {
+            content: '""',
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: "250%",
+            height: "250%",
+            zIndex: -1,
+            background:
+              "conic-gradient(from 180deg at 50% 50%, #ff006e, #8338ec, #3a86ff, #ff006e)",
+            filter: "blur(80px)",
+            animation: "rotateGradient 8s linear infinite",
+          },
+        },
+        item: {
+          borderBottom: "1px solid",
+          // `whiteAlpha.300` was Chakra vocabulary this package never defined,
+          // so these row separators never painted (NEH-301). Half-strength so
+          // the divider still reads as subordinate to the outer border, which
+          // is what the alpha was buying.
+          borderColor: "borderBgPrimary/30",
+          _last: {
+            borderBottom: "none",
+          },
+        },
+      },
+      glass: {
+        root: {
+          backdropFilter: "blur(10px)",
+          bg: "rgba(255, 255, 255, 0.05)",
+          border: "1px solid rgba(255, 255, 255, 0.2)",
+          borderRadius: "lg",
+        },
+        item: {
+          borderBottom: "1px solid rgba(255, 255, 255, 0.2)",
+          _last: {
+            borderBottom: "none",
+          },
+        },
+      },
+      matte: {
+        root: {
+          bgGradient: "linear(to-b, gray.800, gray.900)",
+          // A deliberate literal, matching `box.ts` and `input-bool.ts`: this
+          // variant's surface is a FIXED dark gradient rather than a token, so
+          // themed text renders dark-on-dark in a light theme. The literal is
+          // correct until the surface and the text move onto tokens together.
+          color: "white",
+          borderColor: "gray.700",
+          borderWidth: "1px",
+          borderRadius: "lg",
+        },
+        item: {
+          borderBottom: "1px solid",
+          borderColor: "gray.700",
+          _last: {
+            borderBottom: "none",
+          },
+        },
+      },
+      ghost: {
+        item: {
+          color: "textSecondary",
+          bg: "buttonBgSecondary",
+          borderRadius: "md",
+          cursor: "pointer",
+          _hover: {
+            bg: "boxBgAccent",
+          },
+        },
+      },
+      none: {
+        // Keeps base padding but removes borders and backgrounds
+        item: {
+          border: "none",
+        },
+      },
+      unstyled: {
+        root: {
+          p: "0",
+          m: "0",
+          listStyle: "none",
+        },
+        item: {
+          p: "0",
+          m: "0",
+          border: "none",
+        },
+      },
+    },
+  },
+});

package/src/preset/recipes/menu.ts

@@ -0,0 +1,28 @@
+import { defineSlotRecipe } from "@pandacss/dev";
+
+export const menuRecipe = defineSlotRecipe({
+  className: "menu",
+  description: "Styles for the Menu component",
+  slots: ["item"],
+  base: {
+    item: {
+      w: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      gap: 3,
+      px: 4,
+      py: 2,
+      borderRadius: "md",
+      cursor: "pointer",
+      _hover: {
+        backgroundColor: "boxBgAccent",
+      },
+      _dark: {
+        _hover: {
+          backgroundColor: "gray.800",
+        },
+      },
+    },
+  },
+});

package/src/preset/recipes/separator.ts

@@ -0,0 +1,89 @@
+import { defineRecipe } from "@pandacss/dev";
+
+export const separatorVerticalRecipe = defineRecipe({
+  className: "separator-v",
+  description: "The vertical styles for the StyledSeparator component",
+  base: {
+    width: "1px",
+    height: "full",
+  },
+  variants: {
+    variant: {
+      solid: {
+        backgroundColor: "gray.800",
+        _dark: { backgroundColor: "gray.200" },
+      },
+      glass: {
+        // `whiteAlpha.500` / `blackAlpha.500` were Chakra vocabulary this
+        // package never defined, so the glass separator was invisible in both
+        // colour modes (NEH-301). Panda's `/50` modifier keeps the
+        // translucency the alpha scale was there for — it emits a
+        // `color-mix(…, transparent)` over the token, and falls back to the
+        // solid token where `color-mix` is unsupported, so the separator is
+        // never invisible again.
+        backgroundColor: "borderBgPrimary/50",
+        _dark: { backgroundColor: "borderBgSecondary/50" },
+      },
+      outline: {
+        backgroundColor: "transparent",
+        borderLeft: "1px dashed",
+        borderColor: "gray.400",
+      },
+      aurora: {
+        bgGradient: "linear(to-b, purple.400, cyan.400)",
+      },
+      matte: {
+        backgroundColor: "gray.700",
+        _dark: { backgroundColor: "gray.300" },
+      },
+      ghost: {
+        backgroundColor: "gray.800/20",
+        _dark: { backgroundColor: "gray.200/20" },
+      },
+      none: {
+        backgroundColor: "transparent",
+      },
+    },
+  },
+});
+
+export const separatorHorizontalRecipe = defineRecipe({
+  className: "separator-h",
+  description: "The horizontal styles for the StyledSeparator component",
+  base: {
+    height: "1px",
+    width: "full",
+  },
+  variants: {
+    variant: {
+      solid: {
+        backgroundColor: "gray.800",
+        _dark: { backgroundColor: "gray.200" },
+      },
+      glass: {
+        // See the vertical recipe above — same defect, same fix (NEH-301).
+        backgroundColor: "borderBgPrimary/50",
+        _dark: { backgroundColor: "borderBgSecondary/50" },
+      },
+      outline: {
+        backgroundColor: "transparent",
+        borderTop: "1px dashed",
+        borderColor: "gray.400",
+      },
+      aurora: {
+        bgGradient: "linear(to-r, purple.400, cyan.400)",
+      },
+      matte: {
+        backgroundColor: "gray.700",
+        _dark: { backgroundColor: "gray.300" },
+      },
+      ghost: {
+        backgroundColor: "gray.800/20",
+        _dark: { backgroundColor: "gray.200/20" },
+      },
+      none: {
+        backgroundColor: "transparent",
+      },
+    },
+  },
+});