@stonedogcode/style 0.9.0

package/src/preset/index.ts

@@ -0,0 +1,243 @@
+import { definePreset } from "@pandacss/dev";
+
+import { arrowRecipe } from "./recipes/arrows";
+import { boxRecipe } from "./recipes/box";
+import { buttonRecipe } from "./recipes/button";
+import { buttonIconRecipe } from "./recipes/icon-button";
+import { dlRecipe } from "./recipes/dl-list";
+import { drawerRecipe } from "./recipes/drawer";
+import { formRecipe } from "./recipes/form";
+import { iconRecipe } from "./recipes/icon";
+import { inputBoolRecipe } from "./recipes/input-bool";
+import {
+  inputDropdownContentRecipe,
+  inputDropdownItemRecipe,
+  inputDropdownRecipe,
+} from "./recipes/input-dropdown";
+import { inputRadioRootRecipe } from "./recipes/input-radio";
+import { inputTextRecipe } from "./recipes/input-text";
+import { listRecipe } from "./recipes/list";
+import { menuRecipe } from "./recipes/menu";
+import {
+  separatorHorizontalRecipe,
+  separatorVerticalRecipe,
+} from "./recipes/separator";
+import { stackRecipe } from "./recipes/stack";
+import { stripedRecipe } from "./recipes/striped";
+import { textRecipe } from "./recipes/text";
+import { tooltipRecipe } from "./recipes/tooltip";
+
+import {
+  DEFAULT_CSS_VAR_PREFIX,
+  createSemanticColors,
+  createSemanticFontWeights,
+  createSemanticFonts,
+  createSemanticSizes,
+} from "./semantic-variables";
+
+export interface StonedogStylePresetOptions {
+  /**
+   * Namespace for the CSS custom properties the colour tokens read.
+   *
+   * `"hopper"` yields `var(--hopper-box-primary-bg)`; `"optima"` yields
+   * `var(--optima-box-primary-bg)`. Only change this if the host application
+   * emits its theme under a different namespace — the value must match whatever
+   * writes those properties at runtime, and a mismatch renders every colour as
+   * nothing at all (see semantic-variables.ts).
+   *
+   * @default "hopper"
+   */
+  cssVarPrefix?: string;
+}
+
+/**
+ * Every recipe, keyed by the name it is exported under in `styled-system/recipes`.
+ *
+ * Four of these (`listRecipe`, `menuRecipe`, `inputBoolRecipe`,
+ * `inputRadioRootRecipe`) are slot recipes declared with `defineSlotRecipe`.
+ * Panda accepts them here rather than under `slotRecipes` and generates them
+ * correctly — verified against HopperGuard's own generated output. Moving them
+ * to `slotRecipes` would be more "correct" by the docs and would change the
+ * generated surface, so it is deliberately not done during extraction.
+ */
+const recipes = {
+  arrowRecipe,
+  boxRecipe,
+  buttonRecipe,
+  buttonIconRecipe,
+  dlRecipe,
+  drawerRecipe,
+  formRecipe,
+  iconRecipe,
+  inputBoolRecipe,
+  inputDropdownRecipe,
+  inputDropdownContentRecipe,
+  inputDropdownItemRecipe,
+  inputRadioRootRecipe,
+  inputTextRecipe,
+  listRecipe,
+  menuRecipe,
+  separatorHorizontalRecipe,
+  separatorVerticalRecipe,
+  stackRecipe,
+  stripedRecipe,
+  textRecipe,
+  tooltipRecipe,
+};
+
+/**
+ * Force every variant of every recipe into the stylesheet.
+ *
+ * The style variant (`solid | outline | aurora | glass | matte`) is chosen by
+ * the *user* at runtime, not by the code, so Panda's static extractor has no way
+ * to know which classes will be needed — it only ever sees `variant={variant}`.
+ * Without this, switching variants at runtime yields elements with class names
+ * that have no corresponding CSS, which fails as an unstyled component rather
+ * than as an error.
+ */
+const staticCssRecipes = Object.fromEntries(
+  Object.keys(recipes).map((name) => [name, ["*"]]),
+) as Record<keyof typeof recipes, ["*"]>;
+
+/**
+ * Force the flexbox alignment utilities into the stylesheet (NEH-288).
+ *
+ * Same reasoning as the recipes above, one layer down. `StyledHStack` and
+ * `StyledVStack` accept `align`/`justify` as aliases and rename them to
+ * `alignItems`/`justifyContent` at runtime. Panda's extractor only reads source
+ * text: it sees `align="baseline"`, finds no utility by that name, and generates
+ * nothing — yet the component emits `ai_baseline`. Same for any value the caller
+ * computes rather than writes as a literal.
+ *
+ * That is this package's recurring failure mode: a class name with no rule
+ * behind it, which produces no build error, no console warning, and renders as
+ * silently-wrong layout. Fourteen declarations is a cheap price for closing it.
+ */
+const staticCssAlignment = [
+  {
+    properties: {
+      alignItems: ["flex-start", "flex-end", "center", "baseline", "stretch", "start", "end"],
+      justifyContent: [
+        "flex-start",
+        "flex-end",
+        "center",
+        "space-between",
+        "space-around",
+        "space-evenly",
+        "start",
+        "end",
+      ],
+    },
+  },
+];
+
+/**
+ * The @stonedogcode/style Panda preset: colour tokens, breakpoints, keyframes, and
+ * the 22 recipes the component library is built on.
+ *
+ * Deliberately does NOT set `globalCss`, `preflight`, `include`, or `outdir` —
+ * those are application decisions, and a preset that quietly restyles `body` is
+ * a preset that is hard to adopt. The consuming app owns them. See CLAUDE.md.
+ */
+export function stonedogStylePreset(options: StonedogStylePresetOptions = {}) {
+  const { cssVarPrefix = DEFAULT_CSS_VAR_PREFIX } = options;
+
+  return definePreset({
+    name: "@stonedogcode/style",
+    theme: {
+      extend: {
+        /**
+         * The full responsive scale, declared here rather than only the one
+         * value that differs from Panda's default.
+         *
+         * The originating app declared only `3xl` and inherited `sm`–`2xl` from
+         * `@pandacss/preset-panda`. That works right up until a consumer passes
+         * a `presets` array — which **replaces** Panda's defaults rather than
+         * adding to them — at which point `md` silently stops being a valid
+         * breakpoint and every responsive prop in the library becomes a type
+         * error, or worse, a dropped style. Restating all six makes the preset
+         * self-sufficient for the values its components actually reference.
+         *
+         * The base presets are still required for tokens and utilities — see
+         * the consumer wiring in CLAUDE.md.
+         */
+        breakpoints: {
+          sm: "640px",
+          md: "768px",
+          lg: "1024px",
+          xl: "1280px",
+          "2xl": "1536px",
+          "3xl": "1600px",
+        },
+        tokens: {
+          colors: createSemanticColors(cssVarPrefix),
+          sizes: createSemanticSizes(cssVarPrefix),
+          /**
+           * The host's typeface (NEH-289). `fontWeights` deliberately reuses
+           * Panda's own token names, so the `fontWeight: "bold"` already
+           * written across seven recipes starts reading the theme without a
+           * call site moving. Both carry fallbacks — see semantic-variables.
+           */
+          fonts: createSemanticFonts(cssVarPrefix),
+          fontWeights: createSemanticFontWeights(cssVarPrefix),
+        },
+        keyframes: {
+          spin: {
+            "0%": { transform: "rotate(0deg)" },
+            "100%": { transform: "rotate(360deg)" },
+          },
+          // The disabled strike-through on StyledInputToggle. A keyframe rather
+          // than a transition because it plays once on appearance, and there is
+          // no "before" state to transition from.
+          stonedogStrikeIn: {
+            "0%": { transform: "scaleX(0)" },
+            "100%": { transform: "scaleX(1)" },
+          },
+        },
+        recipes,
+      },
+    },
+    staticCss: {
+      recipes: staticCssRecipes,
+      css: staticCssAlignment,
+    },
+  });
+}
+
+export {
+  DEFAULT_CSS_VAR_PREFIX,
+  TEXT_BACKGROUND_PAIRS,
+  colorTokenNames,
+  createSemanticColors,
+  createSemanticFontWeights,
+  createSemanticFonts,
+  createSemanticSizes,
+  fontTokenNames,
+  fontWeightTokenNames,
+  getBackgroundForText,
+  requiredCssCustomProperties,
+} from "./semantic-variables";
+
+export { recipes as stonedogStyleRecipes };
+
+/* ------------------------------------------------------------------------- *
+ * Deprecated `hopper*` aliases — NEH-251.
+ *
+ * The package renamed hopper-style → @stonedogcode/style. These re-exports exist so
+ * each consumer can bump its submodule pointer on its own schedule instead of
+ * every repo having to move in one lockstep sweep, which is what would make an
+ * ordered set of PRs impossible.
+ *
+ * They are a migration seam with an end date, not a compatibility promise.
+ * Remove them once HopperGuard, optima-filings and optima-cloud-saas have all
+ * landed their consumer PRs.
+ * ------------------------------------------------------------------------- */
+
+/** @deprecated Renamed to `stonedogStylePreset`. Removed once every consumer has migrated (NEH-251). */
+export const hopperStylePreset = stonedogStylePreset;
+
+/** @deprecated Renamed to `StonedogStylePresetOptions`. Removed once every consumer has migrated (NEH-251). */
+export type HopperStylePresetOptions = StonedogStylePresetOptions;
+
+/** @deprecated Renamed to `stonedogStyleRecipes`. Removed once every consumer has migrated (NEH-251). */
+export { recipes as hopperStyleRecipes };

package/src/preset/recipes/arrows.ts

@@ -0,0 +1,29 @@
+import { defineRecipe } from "@pandacss/dev";
+
+export const arrowRecipe = defineRecipe({
+  className: "arrow",
+  description: "The style for an arrow",
+  base: {
+    width: "0",
+    height: "0",
+  },
+  variants: {
+    variant: {
+      solid: {
+        "--arrow-color": "red",
+      },
+      outline: {
+        "--arrow-color": "red",
+      },
+      aurora: {
+        "--arrow-color": "red",
+      },
+      glass: {
+        "--arrow-color": "red",
+      },
+      matte: {
+        "--arrow-color": "red",
+      },
+    },
+  },
+});

package/src/preset/recipes/box.ts

@@ -0,0 +1,122 @@
+import { defineRecipe } from "@pandacss/dev";
+
+export const boxRecipe = defineRecipe({
+  className: "box",
+  description: "The styles for the Box component",
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+  },
+  variants: {
+    variant: {
+      none: {
+        border: "none",
+        backgroundColor: "transparent",
+      },
+      unstyled: {
+        border: "none",
+        backgroundColor: "transparent",
+      },
+      solid: {
+        px: { base: 6, md: 8 },
+        py: { base: 2, md: 4 },
+        bg: "boxBgPrimary",
+        color: "textPrimary",
+      },
+      outline: {
+        px: { base: 6, md: 8 },
+        py: { base: 2, md: 4 },
+        border: "1px solid",
+        borderColor: "borderBgSecondary",
+        color: "textPrimary",
+        bg: "boxBgPrimary",
+      },
+      link: {
+        bg: "boxBgPrimary",
+        _hover: {
+          textDecoration: "underline",
+        },
+      },
+      aurora: {
+        px: { base: 6, md: 8 },
+        py: { base: 2, md: 4 },
+        border: "1px solid",
+        borderRadius: "md",
+        backgroundImage: "linear-gradient(to right, #ff7e5f, #feb47b)",
+        color: "textPrimary",
+        borderColor: "borderBgSecondary",
+      },
+      glass: {
+        px: { base: 6, md: 8 },
+        py: { base: 2, md: 4 },
+        position: "relative",
+        overflow: "hidden",
+        borderRadius: "2xl", // more rounded for curved glass effect
+        borderWidth: "2px",
+        borderStyle: "solid",
+        bg: "boxBgSecondary/60",
+        color: "textPrimary",
+        boxShadow: "xl",
+        fontWeight: "bold",
+        borderColor: "borderBgPrimary/10",
+        _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: {
+        px: { base: 6, md: 8 },
+        py: { base: 2, md: 4 },
+        bgGradient: "linear(to-b, gray.800, gray.900)",
+        borderColor: "gray.700",
+        borderWidth: "1px",
+        boxShadow: "md",
+        /**
+         * `whiteAlpha.900` was undefined vocabulary, so this never painted and
+         * matte text inherited whatever it landed on — dark-on-dark against
+         * the fixed gradient above (NEH-301).
+         *
+         * `white`, not a token, and that is deliberate. The surface here is
+         * `gray.800`→`gray.900`: a FIXED dark gradient that does not follow the
+         * host's theme. Pointing the text at a host token while the surface
+         * stays fixed is how you get dark-on-dark in a light theme — a
+         * contrast regression traded for a style-rule win. The literal is the
+         * honest description of what matte currently is, and it joins the
+         * tracked literal-colour cleanup (`gray.*`, `black`/`white` in
+         * input-text.ts) that has to move the surface and the text together.
+         */
+        color: "white",
+        borderRadius: "lg",
+        fontWeight: "bold",
+      },
+      ghost: {
+        px: { base: 6, md: 8 },
+        py: { base: 2, md: 4 },
+        color: "textSecondary",
+        bg: "boxBgSecondary",
+      },
+    },
+    layout: {
+      vertical: {}, // Base is already vertical
+      horizontal: {
+        flexDirection: { base: "column", lg: "row" },
+        gap: 4,
+        alignItems: "center",
+      },
+    },
+    clickable: {
+      true: {
+        cursor: "pointer",
+      },
+    },
+  },
+});

package/src/preset/recipes/button.ts

@@ -0,0 +1,161 @@
+import { defineRecipe } from "@pandacss/dev";
+
+export const buttonRecipe = defineRecipe({
+  className: "button",
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    // A `<button>` does not inherit the page font — see input-surface (NEH-289).
+    fontFamily: "body",
+    fontWeight: "semibold",
+    padding: "calc(.2rem + var(--panda-density-padding, 8px))",
+    /**
+     * The tap-target floor, enforced structurally (NEH-220, NEH-251).
+     *
+     * Until now this recipe set no minimum and the button's size *emerged*
+     * from padding plus the inherited font size. That looked fine and was not:
+     * a short label produced a 42.375px-tall control against a 44px
+     * requirement, and the two component tests asserting the floor were marked
+     * `test.fail()` — the requirement was documented, visible, and unmet.
+     *
+     * Emergent sizing is also fragile in a way a constant is not. The font
+     * scale is host-tunable and just moved (md 1.375rem -> 1rem), which drops
+     * every button that depends on font size for its height. A floor that
+     * survives a typography change has to be stated, not derived.
+     */
+    minHeight: "48px",
+    minWidth: "48px",
+    _hover: {
+      cursor: "pointer",
+    },
+    border: "1px solid",
+    borderColor: "borderBgPrimary",
+    borderRadius: "var(--radii-md, 0.375rem)",
+  },
+  variants: {
+    variant: {
+      solid: {
+        bg: "buttonBgAccent",
+        color: "textPrimary",
+        _hover: {
+          bg: "buttonBgSecondary",
+          color: "textPrimary",
+        },
+      },
+      outline: {
+        bg: "buttonBgAccent",
+        border: "2px solid",
+        borderRadius: 0,
+        _hover: {
+          border: "2px solid",
+          bg: "buttonBgAccentHover",
+        },
+      },
+      aurora: {
+        backgroundImage: "linear-gradient(to right, #ff7e5f, #feb47b)",
+        color: "buttonTextPrimary",
+        _hover: {
+          opacity: 0.9,
+        },
+      },
+      glass: {
+        position: "relative",
+        overflow: "hidden",
+        border: "2px solid",
+        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: "boxBgSecondary/90",
+        color: "textPrimary",
+        _hover: {
+          bg: "boxBgSecondary",
+        },
+      },
+      selected: {
+        color: "textPrimary",
+        border: "3px dashed black",
+        borderRadius: "xl",
+        bg: "boxBgAccent",
+      },
+      none: {
+        color: "textMain",
+        bg: "white"
+      },
+      unstyled: {
+        color: "inherit",
+        border: "none",
+        backgroundColor: "transparent",
+      },
+      link: {
+        color: "textMain",
+        /**
+         * Stated, not omitted (NEH-307).
+         *
+         * A `<button>` that declares no background does not render
+         * transparent — the user agent paints its own `ButtonFace`, a system
+         * grey that ignores the theme and moves with the browser's colour
+         * scheme (measured: `rgb(239,239,239)` light, `rgb(107,107,107)`
+         * dark). This preset sets `preflight: false` and imposes no reset on
+         * its consumers, so there is nothing between this recipe and the UA's
+         * paint except this line. `unstyled` has always said it; `link` was
+         * the only one of the ten variants that did not.
+         *
+         * Transparent is the right answer for a link-styled button — the
+         * themed surface behind it should show through — but silence gets the
+         * browser's grey, not transparency.
+         */
+        backgroundColor: "transparent",
+        border: "1px solid transparent",
+        textDecoration: "underline",
+        _hover: {
+          color: "buttonTextAccent",
+        },
+        _active: {
+          color: "buttonTextSecondary",
+        },
+      },
+    },
+  },
+});

package/src/preset/recipes/dl-list.ts

@@ -0,0 +1,109 @@
+import { defineRecipe } from "@pandacss/dev";
+
+export const dlRecipe = defineRecipe({
+  className: "dl-list",
+  base: {
+    border: "1px solid",
+    borderRadius: "md",
+    // Was a literal `purple` (NEH-301): it rendered, but it was the same
+    // purple in every theme and in every colour mode. The row separators
+    // below already use this token — the outer border had simply never been
+    // moved onto it.
+    borderColor: "borderBgPrimary",
+    // Add vertical padding and margin between dt/dd pairs
+    "& > dt, & > dd": {
+      paddingTop: "0.5rem",
+      paddingBottom: "0.5rem",
+    },
+    "& > dt:not(:first-child), & > dd:not(:first-child)": {
+      marginTop: "0.5rem",
+    },
+    // The separator was `& > li`, which a `<dl>` never contains — the rule was
+    // valid, and matched nothing, so the row separators had never once
+    // rendered (NEH-167, cycle 9). `dd` puts the line after each completed
+    // pair; `dt` would have drawn it between a term and its own definition.
+    //
+    // Merged into the existing `dd` rule rather than added beside it: a second
+    // key with the same selector is a duplicate object key, and the later one
+    // replaces the earlier wholesale — which would have dropped this margin.
+    "& > dd:not(:last-child)": {
+      marginBottom: "0.5rem",
+      borderBottom: "1px solid",
+      borderColor: "borderBgPrimary",
+    },
+  },
+  variants: {
+    variant: {
+      solid: {
+        // `bgAccent` was Chakra vocabulary this package never defined, so the
+        // surface never painted (NEH-301). `textAccent` rather than
+        // `textPrimary` because TEXT_BACKGROUND_PAIRS is what a host's
+        // contrast check reads: text on `boxBgAccent` must be `textAccent`, or
+        // the pair that gets validated is not the pair that renders.
+        bg: "boxBgAccent",
+        color: "textAccent",
+        borderColor: "borderBgPrimary",
+      },
+      outline: {
+        borderColor: "borderBgSecondary",
+        color: "textPrimary",
+        "& > dd:not(:last-child)": {
+          borderBottom: "1px solid",
+          borderColor: "borderBgSecondary",
+        },
+      },
+      aurora: {
+        // The token names were QUOTED, so they were CSS strings, so the whole
+        // gradient was invalid and this variant had no background at all
+        // (NEH-301). `{colors.X}` is the syntax that actually substitutes a
+        // token inside an arbitrary value — see drawerRecipe, the one aurora
+        // that has been rendering. Surface tokens, not `textPrimary`: this is
+        // a background.
+        backgroundImage: `linear-gradient(to right, {colors.boxBgAccent}, {colors.boxBgSecondary})`,
+        color: "textPrimary",
+        borderColor: "transparent",
+        "& > dd: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",
+        "& > dd:not(:last-child)": {
+          borderBottom: "1px solid rgba(255, 255, 255, 0.2)",
+        },
+      },
+      matte: {
+        // `secondary` was undefined vocabulary — the surface never painted
+        // (NEH-301). Paired text, per TEXT_BACKGROUND_PAIRS.
+        bg: "boxBgSecondary",
+        color: "textSecondary",
+        borderColor: "borderBgPrimary",
+        "& > dd:not(:last-child)": {
+          borderBottom: "1px solid",
+          borderColor: "borderBgPrimary",
+        },
+      },
+      none: {
+        border: "none",
+        backgroundColor: "inherit",
+        "& > dd:not(:last-child)": {
+          borderBottom: "1px solid",
+          borderColor: "borderBgPrimary",
+        },
+      },
+      unstyled: {
+        border: "none",
+        p: "0",
+        m: "0",
+        backgroundColor: "inherit",
+        "& > dd:not(:last-child)": {
+          borderBottom: "none",
+        },
+      },
+    },
+  },
+});