@gogitcms/design-system 0.15.0-next.3

package/src/theme.ts

@@ -0,0 +1,116 @@
+import { Platform } from "react-native";
+
+// Go Git CMS design system — monochrome, terminal-adjacent, desktop-first.
+// A single neutral ink ramp carries the entire UI; the only chromatic tokens
+// are the git diff signals (add/remove). Light and dark are the same semantic
+// mapping over an inverted ink ramp.
+
+export type ThemeMode = "light" | "dark";
+
+type Ink = Record<0 | 50 | 100 | 150 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000, string>;
+
+const inkLight: Ink = {
+  0: "#ffffff", 50: "#f7f7f7", 100: "#ededed", 150: "#e4e4e4", 200: "#dcdcdc",
+  300: "#c9c9c9", 400: "#a6a6a6", 500: "#808080", 600: "#5c5c5c", 700: "#3d3d3d",
+  800: "#242424", 900: "#151515", 1000: "#0a0a0a",
+};
+
+const inkDark: Ink = {
+  0: "#0b0b0b", 50: "#151515", 100: "#1e1e1e", 150: "#242424", 200: "#2d2d2d",
+  300: "#3a3a3a", 400: "#585858", 500: "#808080", 600: "#a2a2a2", 700: "#c4c4c4",
+  800: "#dcdcdc", 900: "#ececec", 1000: "#f4f4f4",
+};
+
+// Font stacks: Geist / Geist Mono on web (loaded via <link> in the host page),
+// falling back to platform system fonts on native.
+const fontSans = Platform.select({
+  web: "Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
+  default: "System",
+}) as string;
+
+const fontMono = Platform.select({
+  web: "'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
+  ios: "Menlo",
+  android: "monospace",
+  default: "monospace",
+}) as string;
+
+export function makeTheme(mode: ThemeMode) {
+  const ink = mode === "dark" ? inkDark : inkLight;
+  const dark = mode === "dark";
+  return {
+    mode,
+    ink,
+    color: {
+      // Text
+      textPrimary: ink[1000],
+      textSecondary: ink[600],
+      textTertiary: ink[500],
+      textDisabled: ink[400],
+      textInverted: ink[0],
+      // Surfaces
+      surfacePage: ink[0],
+      surfaceRaised: dark ? ink[50] : ink[0],
+      // The top bar is a permanent dark chrome in both modes: near-black in
+      // light, a slightly-raised charcoal in dark so it reads above the page.
+      // Its inline contents render under the dark theme to stay legible.
+      surfaceTopBar: dark ? "#1e1e1e" : "#1a1a1a",
+      surfaceSunken: ink[50],
+      surfaceHover: ink[50],
+      surfaceActive: ink[100],
+      surfaceInverted: ink[1000],
+      overlay: "rgba(10,10,10,0.45)",
+      // Borders — hairlines carry structure
+      borderSubtle: ink[100],
+      borderDefault: ink[200],
+      borderHover: ink[400],
+      borderStrong: ink[1000],
+      borderFocus: ink[1000],
+      // Active-column/tab accent rule. A mid-gray in both modes: the rule sits
+      // directly beneath the dark top bar, so pure black (light) merges into it
+      // and pure white (dark) glares — ink[600] reads as an accent against both
+      // the bar above and the column below.
+      borderActive: ink[600],
+      // Git diff signals — the only permitted color
+      diffAddFg: dark ? "#3fb950" : "#1a7f37",
+      diffAddBg: dark ? "#12261a" : "#e6f4ea",
+      diffDelFg: dark ? "#f85149" : "#b42318",
+      diffDelBg: dark ? "#2a1615" : "#fbeae8",
+    },
+    // 4px base grid
+    space: (n: number) => n * 4,
+    radius: { sm: 3, md: 5, lg: 8, pill: 999 },
+    control: { sm: 28, md: 34, lg: 40 },
+    layout: { sidebar: 260, column: 300, topbar: 48, container: 1200 },
+    font: { sans: fontSans, mono: fontMono },
+    type: {
+      display: { size: 40, line: 44 },
+      h1: { size: 28, line: 34 },
+      h2: { size: 22, line: 28 },
+      h3: { size: 17, line: 24 },
+      body: { size: 14, line: 21 },
+      bodyLg: { size: 16, line: 24 },
+      sm: { size: 13, line: 18 },
+      xs: { size: 11, line: 16 },
+      mono: { size: 13, line: 20 },
+      monoSm: { size: 12, line: 18 },
+    },
+    weight: {
+      light: "300" as const,
+      regular: "400" as const,
+      medium: "500" as const,
+      semibold: "600" as const,
+      bold: "700" as const,
+    },
+    letterSpacing: { tight: -0.4, normal: 0, wide: 0.3, label: 0.9 },
+    duration: { fast: 90, base: 150, slow: 240 },
+  };
+}
+
+export type Theme = ReturnType<typeof makeTheme>;
+export const lightTheme = makeTheme("light");
+export const darkTheme = makeTheme("dark");
+
+// Responsive breakpoint: at/above this width the desktop multi-pane layout is
+// used; below it, the mobile drill-down layout.
+export const DESKTOP_BREAKPOINT = 900;

package/src/web/Button.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import { Icon } from "./Icon";
+import type { IconName } from "../icons";
+
+export type ButtonVariant = "primary" | "default" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+
+type Common = {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  iconLeft?: IconName | React.ReactNode;
+  fullWidth?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export type ButtonProps = Common &
+  Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className">;
+
+export type ButtonLinkProps = Common &
+  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "className">;
+
+function classes({ variant = "default", size = "md", fullWidth, className }: Common) {
+  return [
+    "ds-btn",
+    `ds-btn--${variant}`,
+    size !== "md" && `ds-btn--${size}`,
+    fullWidth && "ds-btn--full",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+}
+
+function leading(iconLeft: Common["iconLeft"], size: ButtonSize) {
+  if (iconLeft == null) return null;
+  if (typeof iconLeft !== "string") return iconLeft;
+  return <Icon name={iconLeft as IconName} size={size === "sm" ? 14 : 16} />;
+}
+
+/** The monochrome action button, mirroring the native Button's variant x size. */
+export function Button({
+  variant = "default",
+  size = "md",
+  iconLeft,
+  fullWidth,
+  className,
+  children,
+  type = "button",
+  ...rest
+}: ButtonProps) {
+  return (
+    <button type={type} className={classes({ variant, size, fullWidth, className })} {...rest}>
+      {leading(iconLeft, size)}
+      {children != null && <span>{children}</span>}
+    </button>
+  );
+}
+
+/** The same button rendered as an anchor, for navigation rather than an action. */
+export function ButtonLink({
+  variant = "default",
+  size = "md",
+  iconLeft,
+  fullWidth,
+  className,
+  children,
+  ...rest
+}: ButtonLinkProps) {
+  return (
+    <a className={classes({ variant, size, fullWidth, className })} {...rest}>
+      {leading(iconLeft, size)}
+      {children != null && <span>{children}</span>}
+    </a>
+  );
+}
+
+export type IconButtonProps = {
+  name: IconName;
+  /** Required — an icon-only control has no visible text to name it. */
+  label: string;
+  size?: "sm" | "md";
+  /** Drop the border and surface, leaving just the glyph. */
+  bare?: boolean;
+  className?: string;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className">;
+
+export function IconButton({
+  name,
+  label,
+  size = "md",
+  bare,
+  className,
+  type = "button",
+  ...rest
+}: IconButtonProps) {
+  return (
+    <button
+      type={type}
+      title={label}
+      aria-label={label}
+      className={["ds-iconbtn", size === "sm" && "ds-iconbtn--sm", bare && "ds-iconbtn--bare", className]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      <Icon name={name} size={size === "sm" ? 14 : 16} />
+    </button>
+  );
+}

package/src/web/Icon.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { icons, type IconName } from "../icons";
+
+export type IconProps = {
+  name: IconName;
+  size?: number;
+  /** Any CSS color, including a token: `var(--text-secondary)`. Defaults to the
+   *  inherited text color so an icon takes on the ink of whatever contains it. */
+  color?: string;
+  strokeWidth?: number;
+  /** Icons are decorative by default; pass a label when one carries meaning. */
+  label?: string;
+  className?: string;
+};
+
+/**
+ * The product icon set rendered as a plain <svg>, for web surfaces that don't
+ * run react-native-svg. Same paths as the native Icon — both read ../icons.
+ */
+export function Icon({
+  name,
+  size = 18,
+  color = "currentColor",
+  strokeWidth = 1.5,
+  label,
+  className,
+}: IconProps) {
+  return (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role={label ? "img" : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+      focusable="false"
+      style={{ display: "block", flexShrink: 0 }}
+    >
+      {icons[name].map((d, i) => (
+        <path key={i} d={d} />
+      ))}
+    </svg>
+  );
+}
+
+export type { IconName };

package/src/web/Input.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+type Shared = {
+  /** Mono for anything technical: paths, branches, hashes, config keys. */
+  mono?: boolean;
+  size?: "sm" | "md";
+  className?: string;
+};
+
+export type InputProps = Shared &
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "size">;
+
+export type TextareaProps = Shared &
+  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "className">;
+
+export type SelectProps = Shared &
+  Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "className" | "size">;
+
+function classes({ mono, size, className }: Shared) {
+  return ["ds-input", mono && "ds-input--mono", size === "sm" && "ds-input--sm", className]
+    .filter(Boolean)
+    .join(" ");
+}
+
+export function Input({ mono, size, className, ...rest }: InputProps) {
+  return <input className={classes({ mono, size, className })} {...rest} />;
+}
+
+export function Textarea({ mono, size, className, ...rest }: TextareaProps) {
+  return <textarea className={classes({ mono, size, className })} {...rest} />;
+}
+
+export function Select({ mono, size, className, children, ...rest }: SelectProps) {
+  return (
+    <select className={classes({ mono, size, className })} {...rest}>
+      {children}
+    </select>
+  );
+}

package/src/web/index.ts

@@ -0,0 +1,43 @@
+// @gogitcms/design-system/web — the design system for surfaces that render to
+// plain DOM instead of react-native-web: the Astro docs site, marketing pages,
+// anything server-rendered.
+//
+// Same tokens, same icon paths, same visual decisions as the native components
+// next door in ../components; the difference is that these emit HTML elements
+// and read their styling from ../../css/components.css, so a button looks right
+// in server HTML with no hydration. Import both stylesheets once in the host
+// page:
+//
+//   import "@gogitcms/design-system/css/tokens.css";
+//   import "@gogitcms/design-system/css/components.css";
+
+export { Icon } from "./Icon";
+export type { IconProps, IconName } from "./Icon";
+
+export { Button, ButtonLink, IconButton } from "./Button";
+export type {
+  ButtonProps,
+  ButtonLinkProps,
+  ButtonVariant,
+  ButtonSize,
+  IconButtonProps,
+} from "./Button";
+
+export { Input, Textarea, Select } from "./Input";
+export type { InputProps, TextareaProps, SelectProps } from "./Input";
+
+export { Badge, Avatar, Card, CardLink, SectionLabel, Divider, Meta } from "./primitives";
+export type {
+  BadgeProps,
+  BadgeTone,
+  AvatarProps,
+  CardProps,
+  CardLinkProps,
+  SectionLabelProps,
+  DividerProps,
+  MetaProps,
+} from "./primitives";
+
+// Nothing here re-exports ../theme: it imports react-native for Platform.select,
+// which a plain-DOM consumer has no reason to install. Web surfaces read token
+// values from the CSS custom properties instead.

package/src/web/primitives.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+
+export type BadgeTone = "neutral" | "add" | "del" | "strong";
+
+export type BadgeProps = {
+  tone?: BadgeTone;
+  /** Badges are mono by default — they carry counts and git status letters. */
+  mono?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, "className" | "children">;
+
+export function Badge({ tone = "neutral", mono = true, className, children, ...rest }: BadgeProps) {
+  return (
+    <span
+      className={["ds-badge", `ds-badge--${tone}`, !mono && "ds-badge--sans", className]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+}
+
+export type AvatarProps = {
+  initials: string;
+  size?: number;
+  className?: string;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, "className">;
+
+/** Square initials tile — the product has no uploaded-avatar surface. */
+export function Avatar({ initials, size = 28, className, style, ...rest }: AvatarProps) {
+  return (
+    <span
+      className={["ds-avatar", className].filter(Boolean).join(" ")}
+      style={{ width: size, height: size, ...style }}
+      {...rest}
+    >
+      {initials}
+    </span>
+  );
+}
+
+export type CardProps = {
+  /** Sunken cards sit on --surface-sunken; use for asides, not content rows. */
+  sunken?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "children">;
+
+export function Card({ sunken, className, children, ...rest }: CardProps) {
+  return (
+    <div
+      className={["ds-card", sunken && "ds-card--sunken", className].filter(Boolean).join(" ")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+export type CardLinkProps = {
+  href: string;
+  className?: string;
+  children?: React.ReactNode;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "className" | "children" | "href">;
+
+/** A card that is itself the link target — the docs home grid is built of these. */
+export function CardLink({ href, className, children, ...rest }: CardLinkProps) {
+  return (
+    <a
+      href={href}
+      className={["ds-card", "ds-card--interactive", className].filter(Boolean).join(" ")}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+}
+
+export type SectionLabelProps = {
+  className?: string;
+  children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "children">;
+
+/** The uppercase mono micro-label that heads a group. */
+export function SectionLabel({ className, children, ...rest }: SectionLabelProps) {
+  return (
+    <div className={["ds-label", className].filter(Boolean).join(" ")} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+export type DividerProps = {
+  vertical?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export function Divider({ vertical, className, style }: DividerProps) {
+  const cls = ["ds-divider", vertical && "ds-divider--vertical", className].filter(Boolean).join(" ");
+  return vertical ? <span className={cls} style={style} /> : <hr className={cls} style={style} />;
+}
+
+export type MetaProps = {
+  className?: string;
+  children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, "className" | "children">;
+
+/** Mono metadata: paths, hashes, branch names, timestamps, counts. */
+export function Meta({ className, children, ...rest }: MetaProps) {
+  return (
+    <span className={["ds-meta", className].filter(Boolean).join(" ")} {...rest}>
+      {children}
+    </span>
+  );
+}