@stonedogcode/style 0.9.0

package/src/preset/recipes/drawer.ts

@@ -0,0 +1,125 @@
+import { defineRecipe } from "@pandacss/dev";
+
+export const drawerRecipe = defineRecipe({
+  className: "drawer",
+  base: {
+    position: "fixed",
+    zIndex: "modal",
+    border: "1px solid",
+    borderColor: "borderBgPrimary",
+    px: { base: 2, md: 4 },
+    py: { base: 2, md: 4 },
+    background: "boxBgAccent",
+    color: "textPrimary",
+    boxShadow: "lg", // Use token for shadow
+    outline: "none",
+    transition: "transform 0.3s ease-in-out", // Smooth transition
+    display: "flex",
+    flexDirection: "column",
+    _focusVisible: {
+      outline: "3px solid token(colors.accent)",
+      outlineOffset: "2px",
+    },
+  },
+  variants: {
+    variant: {
+      solid: {
+        bg: "boxBgSecondary",
+        color: "textSecondary", // Updated to match tokens
+      },
+      outline: {
+        bg: "boxBgPrimary", // Changed from inherit to a specific background to avoid transparency issue if that's the intent, or keep inherit if it should be transparent but with border. User complained about transparency. Let's try matching solid but with border.
+        color: "textPrimary",
+        border: "1px solid",
+        borderColor: "borderBgPrimary",
+      },
+      aurora: {
+        // Token references, not literal `var(--hopper-…)`: the custom-property
+        // prefix is configurable per consumer, so a hardcoded namespace paints
+        // nothing for any host that chose a different one.
+        backgroundImage:
+          "linear-gradient(to right, {colors.boxBgAccent}, {colors.boxBgSecondary})",
+        color: "white",
+        borderColor: "transparent",
+        textShadow: "0 1px 2px rgba(0,0,0,0.5)",
+      },
+      glass: {
+        bg: "boxBgSecondary",
+        color: "textSecondary",
+        backdropFilter: "blur(15px)",
+        borderWidth: "1px",
+        borderColor: "borderBgSecondary/20",
+        boxShadow: "2xl",
+        lineHeight: "base",
+      },
+      matte: {
+        bg: "boxBgSecondary",
+        color: "textSecondary",
+        borderColor: "borderBgSecondary",
+      },
+      none: {},
+    },
+    placement: {
+      left: {
+        top: 0,
+        left: 0,
+        height: "100dvh",
+        width: { base: "100%", sm: "375px", md: "450px", lg: "600px" },
+      },
+      right: {
+        top: 0,
+        right: 0,
+        height: "100dvh",
+        width: { base: "100%", sm: "375px", md: "450px", lg: "600px" },
+      },
+      top: {
+        top: 0,
+        left: 0,
+        right: 0,
+        width: "100vw",
+        height: "auto",
+      },
+      bottom: {
+        bottom: 0,
+        left: 0,
+        right: 0,
+        width: "100vw",
+        height: "auto",
+      },
+    },
+    open: {
+      true: {
+        transform: "none", // Drawer is visible
+      },
+      false: {}, // Handled by compound variants
+    },
+  },
+  // Use compound variants to combine placement and state for a clean API
+  compoundVariants: [
+    {
+      placement: "left",
+      open: false,
+      css: { transform: "translateX(-100%)" },
+    },
+    {
+      placement: "right",
+      open: false,
+      css: { transform: "translateX(100%)" },
+    },
+    {
+      placement: "top",
+      open: false,
+      css: { transform: "translateY(-100%)" },
+    },
+    {
+      placement: "bottom",
+      open: false,
+      css: { transform: "translateY(100%)" },
+    },
+  ],
+  defaultVariants: {
+    variant: "solid",
+    placement: "right",
+    open: false,
+  },
+});

package/src/preset/recipes/form.ts

@@ -0,0 +1,95 @@
+import { defineRecipe } from "@pandacss/dev";
+
+export const formRecipe = defineRecipe({
+  className: "form",
+  base: {
+    border: "1px solid",
+    borderRadius: "md",
+    p: "4",
+    "& > li:not(:last-child)": {
+      borderBottom: "1px solid",
+      borderColor: "borderBgPrimary",
+    },
+  },
+  variants: {
+    variant: {
+      solid: {
+        bg: "boxBgAccent",
+        color: "textPrimary",
+        borderColor: "borderBgPrimary",
+        "& > li:not(:last-child)": {
+          borderBottom: "1px solid",
+          borderColor: "borderBgPrimary",
+        },
+      },
+      outline: {
+        borderColor: "borderBgPrimary",
+        color: "textPrimary",
+        _hover: {
+          bg: "boxBgAccent",
+        },
+        "& > li:not(:last-child)": {
+          borderBottom: "1px solid",
+          borderColor: "borderBgPrimary",
+        },
+      },
+      lines: {
+        border: "none",
+        borderRadius: "md",
+        p: "4",
+        color: "black",
+        "& > li:not(:last-child)": {
+          borderBottom: "1px solid",
+          borderColor: "borderBgPrimary",
+        },
+      },
+      aurora: {
+        // Quoted token names are CSS strings, so this gradient was invalid and
+        // never painted (NEH-301). `{colors.X}` is the substituting syntax.
+        backgroundImage: `linear-gradient(to right, {colors.boxBgAccent}, {colors.boxBgSecondary})`,
+        color: "textPrimary",
+        borderColor: "transparent",
+        "& > li:not(:last-child)": {
+          borderBottom: "1px solid",
+          borderColor: "borderBgPrimary",
+        },
+      },
+      glass: {
+        backdropFilter: "blur(10px)",
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        border: "1px solid rgba(255, 255, 255, 0.2)",
+        color: "textPrimary",
+        "& > li:not(:last-child)": {
+          borderBottom: "1px solid rgba(255, 255, 255, 0.2)",
+        },
+      },
+      matte: {
+        // `secondary` was undefined vocabulary — never painted (NEH-301).
+        bg: "boxBgSecondary",
+        color: "textSecondary",
+        borderColor: "borderBgPrimary",
+        "& > li:not(:last-child)": {
+          borderBottom: "1px solid",
+          borderColor: "borderBgPrimary",
+        },
+      },
+      none: {
+        border: "none",
+        backgroundColor: "inherit",
+        "& > li:not(:last-child)": {
+          borderBottom: "1px solid",
+          borderColor: "borderBgPrimary",
+        },
+      },
+      unstyled: {
+        border: "none",
+        p: "0",
+        m: "0",
+        backgroundColor: "inherit",
+        "& > li:not(:last-child)": {
+          borderBottom: "none",
+        },
+      },
+    },
+  },
+});

package/src/preset/recipes/icon-button.ts

@@ -0,0 +1,161 @@
+import { defineRecipe } from "@pandacss/dev";
+
+export const buttonIconRecipe = defineRecipe({
+  className: "iconButton",
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    // A `<button>` does not inherit the page font — see input-surface (NEH-289).
+    fontFamily: "body",
+    borderRadius: "full",
+    padding: "calc(.1rem + var(--panda-density-padding, 8px))",
+    /**
+     * The tap-target floor (NEH-220, NEH-251). See `button.ts` for why this is
+     * a stated constant rather than something padding happens to produce.
+     *
+     * It applies to the BASE, so the `size` variants below shrink the padding
+     * and the glyph but not the hit area. That is deliberate and is the whole
+     * point: `size="1x"` exists to make an icon look small in a dense toolbar,
+     * not to make it hard to hit. A 20px control is a WCAG 2.5.5 failure
+     * whatever it is called, and this audience has elevated rates of motor
+     * impairment.
+     */
+    minHeight: "48px",
+    minWidth: "48px",
+    _hover: {
+      cursor: "pointer",
+    },
+  },
+  variants: {
+    size: {
+      "1x": {
+        padding: "2px",
+        fontSize: "0.75rem",
+      },
+      sm: {
+        padding: "4px",
+        fontSize: "0.875rem",
+      },
+      /**
+       * `md` states its font size rather than inheriting (NEH-251).
+       *
+       * It used to be `{}`. That does not mean "the base size" — the base sets
+       * no `font-size`, so a `<button>` fell through to the USER-AGENT
+       * stylesheet, which in Chrome is `13.3333px`. Three consequences, none
+       * of them visible without measuring:
+       *
+       *   - `md` rendered SMALLER than `sm` (13.33px vs 14px), so the size
+       *     scale ran 12, 14, 13.33, 20 — non-monotonic in the middle
+       *   - the default icon button was the one control in the system not
+       *     using the type scale at all
+       *   - it was a px value, so it ignored the browser's own font setting
+       *
+       * Found by the component tier the moment it started asserting glyph size
+       * instead of box size; the old assertion only required two distinct box
+       * heights, which a broken middle satisfies.
+       */
+      md: {
+        fontSize: "1rem",
+      },
+      lg: {
+        padding: "12px",
+        fontSize: "1.25rem",
+      },
+    },
+    variant: {
+      solid: {
+        bg: "buttonBgAccent",
+        color: "textPrimary",
+        _hover: {
+          bg: "buttonBgSecondary",
+          color: "textPrimary",
+        },
+      },
+      outline: {
+        bg: "buttonBgAccent",
+        color: "textPrimary",
+        border: "1px solid",
+        borderColor: "borderBgSecondary",
+        borderRadius: 0,
+        _hover: {
+          border: "2px solid",
+          bg: "buttonBgAccentHover",
+        },
+      },
+      aurora: {
+        backgroundImage: "linear-gradient(to right, #ff7e5f, #feb47b)",
+        color: "buttonTextPrimary",
+        borderColor: "transparent",
+        _hover: {
+          opacity: 0.9,
+        },
+      },
+      glass: {
+        position: "relative",
+        overflow: "hidden",
+        border: "2px solid",
+        borderColor: "black",
+        borderRadius: "xl",
+        bg: "buttonBgAccent",
+        color: "textPrimary",
+        boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
+        backdropFilter: "blur(12px)",
+        WebkitBackdropFilter: "blur(12px)",
+        fontWeight: "bold",
+        lineHeight: "shorter",
+        transition: "all 0.3s ease",
+        _hover: {
+          bg: "buttonBgSecondary",
+          borderColor: "rgba(255,255,255,0.4)",
+          boxShadow: "0 8px 32px rgba(0,0,0,0.3), inset 0 0 20px rgba(255,255,255,0.1)",
+          transform: "translateY(-1px)",
+          textDecoration: "none",
+        },
+        _active: {
+          transform: "translateY(0)",
+          bg: "rgba(255,255,255,0.15)",
+        },
+        _before: {
+          content: '""',
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: "50%",
+          borderRadius: "inherit",
+          bg: "linear-gradient(to bottom, rgba(255,255,255,0.15), transparent)",
+          zIndex: 0,
+          pointerEvents: "none",
+        },
+      },
+      matte: {
+        bgGradient: "linear(to-b, gray.800, gray.900)",
+        borderColor: "gray.700",
+        borderWidth: "1px",
+        boxShadow: "md",
+        bg: "buttonBgAccent",
+        color: "textPrimary",
+        borderRadius: "lg",
+        fontWeight: "bold",
+      },
+      ghost: {
+        bg: "buttonBgAccent/50",
+        color: "textPrimary",
+        _hover: {
+          bg: "buttonBgAccent",
+          color: "textPrimary",
+          border: "1px solid",
+          borderColor: "gray.700",
+        },
+      },
+      none: {
+        color: "textMain",
+        bg: "gray.300",
+        _hover: {
+          bg: "gray.100",
+        },
+      },
+    },
+  },
+});

package/src/preset/recipes/icon.ts

@@ -0,0 +1,34 @@
+import { defineRecipe } from "@pandacss/dev";
+
+export const iconRecipe = defineRecipe({
+  className: "icon",
+  base: {
+    display: "inline-block",
+    verticalAlign: "middle",
+    lineHeight: 1,
+    fontSize: "var(--font-sizes-2xl, 1.5rem)",
+    "& .fa-secondary": {
+      color: "iconBgPrimary",
+    },
+    "& .fa-primary": {
+      color: "iconBgSecondary",
+    },
+    _hover: {
+      fontSize: "var(--font-sizes-2xl, 1.5rem)",
+      "& .fa-secondary": {
+        color: "iconBgSecondary",
+      },
+      "& .fa-primary": {
+        color: "iconBgPrimary",
+      },
+    },
+  },
+  variants: {
+    size: {
+      sm: { fontSize: "1em" },
+      md: { fontSize: "1.5em" },
+      lg: { fontSize: "2em" },
+      xl: { fontSize: "3em" },
+    },
+  },
+});

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

@@ -0,0 +1,184 @@
+import { defineSlotRecipe } from "@pandacss/dev";
+
+export const inputBoolRecipe = defineSlotRecipe({
+  className: "input-bool",
+  slots: ["root", "control", "label"],
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+    },
+    control: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "var(--panda-density-padding, 8px)",
+      margin: "var(--panda-density-margin, 8px)",
+      minHeight: "48px",
+      width: "48px",
+      /**
+       * This slot is a native `<input type="checkbox">` at `appearance: auto`,
+       * which changes what styling it is even possible to express (NEH-234).
+       *
+       * Verified in the component-test harness rather than assumed: a raw
+       * checkbox given a red 2px border and a slate background paints as the
+       * default white box. The UA draws the widget and discards
+       * `background-color`, `border-*` and `border-radius` — while
+       * `getComputedStyle` cheerfully reports all of them, which is what made
+       * this recipe look styled for so long.
+       *
+       * The three it DOES honour, and therefore the only levers here:
+       * `accent-color` (the checked fill and tick), `box-shadow` (painted
+       * outside the widget) and `outline` (the focus ring).
+       *
+       * The `border`/`background` declarations are kept and pointed at real
+       * tokens anyway: they cost nothing, they say what the control means, and
+       * they are what would render if a consumer ever sets `appearance: none`.
+       */
+      border: "1px solid",
+      borderColor: "borderBgPrimary",
+      borderRadius: "md",
+      backgroundColor: "boxBgMain",
+      // Carries the host's theme into the tick. Without it a checked box is
+      // Chromium's own blue in every theme this package can wear.
+      accentColor: "buttonBgPrimary",
+      cursor: "pointer",
+      "&:focus": {
+        // Was `2px solid var(--colors-blue-500, #3182ce)` — Panda's blue, fixed
+        // in every theme including dark and high-contrast, which is exactly
+        // where a keyboard user cannot afford to lose the focus ring.
+        outline: "2px solid",
+        outlineColor: "textPop",
+        outlineOffset: "2px",
+      },
+      boxShadow: "none",
+      _hover: {
+        cursor: "pointer",
+      },
+      // `primary` was undefined vocabulary, so a ticked checkbox got no fill
+      // of its own and fell back to the UA's (NEH-301).
+      _checked: {
+        bg: "buttonBgPrimary",
+        borderColor: "borderBgPrimary",
+      },
+    },
+    label: {},
+  },
+  variants: {
+    variant: {
+      /**
+       * solid vs outline (NEH-234).
+       *
+       * These were declared identically — same `buttonBgAccent`, same
+       * `textPrimary` — so two of the five appearances a user can pick app-wide
+       * rendered the same checkbox. Worse, neither declaration painted at all
+       * (see the note in `base`), so the variant was doubly a lie.
+       *
+       * `buttonRecipe` expresses outline as a 2px edge with squared corners.
+       * A native checkbox discards `border`, so the same reading is carried by
+       * a `box-shadow` ring, which it does paint — squared to match, and
+       * themed. `solid` states `none` explicitly rather than by omission, so
+       * switching between them cannot leave a ring behind.
+       */
+      solid: {
+        control: {
+          bg: "buttonBgAccent",
+          color: "textPrimary",
+          accentColor: "buttonBgPrimary",
+          boxShadow: "none",
+        },
+      },
+      outline: {
+        control: {
+          bg: "buttonBgAccent",
+          color: "textPrimary",
+          /**
+           * The SAME checked fill as `solid`, deliberately.
+           *
+           * Giving outline a recessive `accentColor` did make the two more
+           * different — and made a ticked outline checkbox a dark box on a dark
+           * surface, which is the checked state, the one thing the control
+           * exists to communicate. Distinguishing an appearance must not cost
+           * state legibility, so the difference is carried entirely by the ring
+           * and the corners.
+           */
+          accentColor: "buttonBgPrimary",
+          boxShadow: "0 0 0 2px {colors.borderBgPrimary}",
+          borderRadius: "0",
+        },
+      },
+      aurora: {
+        control: {
+          backgroundImage: "linear-gradient(to right, #ff7e5f, #feb47b)",
+          color: "buttonTextPrimary",
+        },
+      },
+      glass: {
+        control: {
+          position: "relative",
+          overflow: "hidden",
+          bg: "buttonBgPrimary/20",
+          color: "textPrimary/10",
+          boxShadow: "xl",
+          backdropFilter: "blur(8px)",
+          fontWeight: "bold",
+          lineHeight: "shorter",
+          _before: {
+            content: '""',
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            bgGradient:
+              "linear(to-br, rgba(255,255,255,0.1), rgba(255,255,255,0.05))",
+            zIndex: -1,
+          },
+        },
+      },
+      matte: {
+        control: {
+          bgGradient: "linear(to-b, gray.800, gray.900)",
+          // `whiteAlpha.900` never painted (NEH-301). `white` rather than a
+          // token for the same reason as boxRecipe's matte: the surface above
+          // is a FIXED dark gradient, so themed text on it risks dark-on-dark.
+          color: "white",
+          fontWeight: "bold",
+        },
+      },
+      ghost: {
+        control: {
+          color: "textSecondary",
+          bg: "buttonBgSecondary",
+        },
+      },
+      none: {
+        control: {
+          color: "buttonTextPrimary",
+          bg: "gray.300",
+        },
+      },
+      button: {
+        control: {
+          bg: "gray.200",
+          color: "gray.800",
+          // `primary` / `primary.600` were undefined vocabulary, so the
+          // checked and checked-hover fills never painted (NEH-301). The
+          // hover step is the matching `*Hover` token rather than an invented
+          // darker shade — this package holds no colour scales to step along.
+          _checked: {
+            bg: "buttonBgPrimary",
+            color: "buttonTextPrimary",
+            _hover: {
+              bg: "buttonBgPrimaryHover",
+            },
+          },
+          _hover: {
+            bg: "gray.300",
+          },
+        },
+      },
+    },
+  },
+});

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

@@ -0,0 +1,93 @@
+import { defineRecipe } from "@pandacss/dev";
+import { inputSurfaceBase, inputSurfaceVariants } from "./input-surface";
+
+// Trigger / closed-state appearance.
+//
+// The surface is shared with `inputTextRecipe` — see `input-surface.ts` for
+// why the two must not be maintained separately (NEH-84). Anything specific to
+// a dropdown trigger belongs here; anything that should also be true of a text
+// input belongs in the shared surface.
+export const inputDropdownRecipe = defineRecipe({
+  className: "input-dropdown",
+  base: inputSurfaceBase,
+  variants: {
+    variant: inputSurfaceVariants,
+  },
+});
+
+// Expanded-state appearance: content container, groups, and group labels
+export const inputDropdownContentRecipe = defineRecipe({
+  className: "input-dropdown-content",
+  base: {},
+  variants: {
+    part: {
+      content: {
+        borderRadius: "md",
+        boxShadow: "lg",
+        maxHeight: "widgetBaseHeight",
+        overflowY: "auto",
+      },
+      item: {
+        bg: "boxBgPrimary",
+        borderBottom: "1px solid",
+        borderColor: "borderBgSecondary",
+        padding: "var(--panda-density-padding, 8px)",
+        borderRadius: "sm",
+        cursor: "pointer",
+        "&:hover": {
+          backgroundColor: "boxBgSecondary",
+        },
+        "&[data-highlighted]": {
+          backgroundColor: "boxBgSecondary",
+        },
+      },
+      itemGroup: {
+        zIndex: 30020,
+      },
+      itemGroupLabel: {
+        zIndex: 30020,
+        fontWeight: "bold",
+        // A token, not gray.500: the label sits on boxBgPrimary, whose colour
+        // the theme decides, so a fixed mid-grey is an unverified contrast bet
+        // in every palette but the one it was picked against.
+        color: "textSecondary",
+        fontSize: "sm",
+        padding: "calc(var(--panda-density-padding, 8px) * 0.5)",
+      },
+    },
+  },
+});
+
+// Individual dropdown item styling
+export const inputDropdownItemRecipe = defineRecipe({
+  className: "input-dropdown-item",
+  base: {
+    display: "flex",
+    alignItems: "center",
+    padding: "10px 20px",
+    cursor: "pointer",
+    fontSize: "var(--font-sizes-lg, 0.95rem)",
+    color: "textPrimary",
+    bg: "boxBgPrimary",
+    transition: "background 0.15s ease, color 0.15s ease",
+    "&:hover": {
+      bg: "boxBgSecondary",
+    },
+    "&[data-highlighted]": {
+      bg: "boxBgSecondary",
+    },
+    "&:not(:last-child)": {
+      borderBottom: "1px solid",
+      borderColor: "borderBgSecondary/40",
+    },
+    "&:active": {
+      bg: "boxBgSecondary",
+      opacity: 0.85,
+    },
+  },
+  variants: {
+    part: {
+      item: {},
+    },
+  },
+});