Theming

import { Badge, Card, CardBody, CardHeader, ToggleGroup, ToggleGroupItem } from "cennge-ui";

function Token({ children }: { children: string }) {
  return <code className="rounded-small bg-default-bg px-1.5 py-0.5 font-mono text-xs text-muted">{children}</code>;
}

function Layer({ name, token }: { name: string; token: string }) {
  return (
    <div className="flex items-center justify-between gap-3">
      <span className="text-sm font-medium text-muted">{name}</span>
      <Token>{token}</Token>
    </div>
  );
}

export default function Surfaces() {
  return (
    <div className="flex w-full flex-col gap-3 rounded-large border border-border bg-surface-1 p-3 sm:p-4">
      <Layer name="Page" token="bg-surface-1" />
      <div className="flex flex-col gap-3 rounded-large bg-surface-2 p-3 sm:p-4">
        <Layer name="Panel" token="bg-surface-2" />
        <Card>
          <CardHeader className="items-start justify-between">
            <div className="min-w-0">
              <p className="font-semibold">payload-cache</p>
              <p className="text-sm text-muted">Deploy from main</p>
            </div>
            <Token>bg-surface-3</Token>
          </CardHeader>
          <CardBody className="flex-row flex-wrap items-center justify-between gap-3">
            <div className="flex flex-wrap items-center gap-3">
              <ToggleGroup aria-label="Environment" size="sm" defaultValue="production">
                <ToggleGroupItem value="production">Production</ToggleGroupItem>
                <ToggleGroupItem value="preview">Preview</ToggleGroupItem>
              </ToggleGroup>
              <Badge color="success" variant="dot">
                Ready
              </Badge>
            </div>
            <span className="flex items-center gap-2 text-xs text-muted">
              Selected segment <Token>bg-surface-4</Token>
            </span>
          </CardBody>
        </Card>
      </div>
    </div>
  );
}

import { Fragment } from "react";
import type { CenngeColor } from "cennge-ui";

const roles: { name: CenngeColor; label: string }[] = [
  { name: "default", label: "Archived" },
  { name: "primary", label: "Featured" },
  { name: "secondary", label: "Beta" },
  { name: "success", label: "Passed" },
  { name: "warning", label: "Flaky" },
  { name: "danger", label: "Failed" },
  { name: "info", label: "Queued" },
];

// Whole class names, so Tailwind finds them in the source.
const solid: Record<CenngeColor, string> = {
  default: "bg-default text-default-foreground",
  primary: "bg-primary text-primary-foreground",
  secondary: "bg-secondary text-secondary-foreground",
  success: "bg-success text-success-foreground",
  warning: "bg-warning text-warning-foreground",
  danger: "bg-danger text-danger-foreground",
  info: "bg-info text-info-foreground",
};

const tint: Record<CenngeColor, string> = {
  default: "bg-default-bg",
  primary: "bg-primary-bg",
  secondary: "bg-secondary-bg",
  success: "bg-success-bg",
  warning: "bg-warning-bg",
  danger: "bg-danger-bg",
  info: "bg-info-bg",
};

const highlight: Record<CenngeColor, string> = {
  default: "bg-default-highlight",
  primary: "bg-primary-highlight",
  secondary: "bg-secondary-highlight",
  success: "bg-success-highlight",
  warning: "bg-warning-highlight",
  danger: "bg-danger-highlight",
  info: "bg-info-highlight",
};

const text: Record<CenngeColor, string> = {
  default: "text-default-text",
  primary: "text-primary-text",
  secondary: "text-secondary-text",
  success: "text-success-text",
  warning: "text-warning-text",
  danger: "text-danger-text",
  info: "text-info-text",
};

const chip = "inline-flex h-7 items-center rounded-small px-2.5 text-xs font-medium";

export default function ColourRoles() {
  return (
    <div className="grid w-full grid-cols-[auto_auto_auto_1fr] items-center gap-2 sm:gap-x-4">
      {["Solid", "-bg", "-highlight", "-text"].map((heading) => (
        <span key={heading} className="pb-1 font-mono text-xs text-muted">
          {heading}
        </span>
      ))}
      {roles.map(({ name, label }) => (
        <Fragment key={name}>
          <span className={`${chip} ${solid[name]}`}>{name}</span>
          <span className={`${chip} ${tint[name]} ${text[name]}`}>{label}</span>
          <span className={`${chip} ${highlight[name]} ${text[name]}`}>{label}</span>
          <span className={`text-sm font-medium ${text[name]}`}>{label}</span>
        </Fragment>
      ))}
    </div>
  );
}

import { Badge, Button } from "cennge-ui";

const accents = ["orange", "blue", "green", "violet", "red"] as const;

// The chart palette in order: each preset sets its own.
const slots = [
  "bg-chart-1", "bg-chart-2", "bg-chart-3", "bg-chart-4",
  "bg-chart-5", "bg-chart-6", "bg-chart-7", "bg-chart-8",
];

export default function AccentPresets() {
  return (
    <div className="flex w-full flex-col gap-2">
      {accents.map((accent) => (
        <div
          key={accent}
          data-accent={accent}
          className="flex flex-wrap items-center gap-x-5 gap-y-3 rounded-medium bg-surface-3 px-4 py-3"
        >
          <code className="w-36 font-mono text-xs text-primary-text">data-accent="{accent}"</code>
          <div className="flex items-center gap-2">
            <Button size="sm" color="primary">
              Deploy
            </Button>
            <Badge color="primary">Live</Badge>
          </div>
          <div className="ml-auto flex items-center gap-2.5">
            <span className="font-mono text-xs text-muted">chart-1…8</span>
            <span className="flex gap-1" aria-hidden="true">
              {slots.map((slot) => (
                <span key={slot} className={`size-3 rounded-full ${slot}`} />
              ))}
            </span>
          </div>
        </div>
      ))}
    </div>
  );
}

import { Button, Input } from "cennge-ui";

// The three radii, set on one element for everything inside it.
const tighter = [
  "[--cennge-radius-small:0.125rem]",
  "[--cennge-radius-medium:0.25rem]",
  "[--cennge-radius-large:0.375rem]",
].join(" ");

function InviteForm({ title, className = "" }: { title: string; className?: string }) {
  return (
    <div className={`flex w-full max-w-72 flex-col gap-3 rounded-large border border-border p-4 ${className}`}>
      <p className="text-sm font-semibold">{title}</p>
      <Input label="Invite by email" type="email" defaultValue="dev@example.com" />
      <Button color="primary">Send invite</Button>
    </div>
  );
}

export default function Radius() {
  return (
    <div className="flex w-full flex-wrap gap-4">
      <InviteForm title="As shipped" />
      <InviteForm title="Tighter corners" className={tighter} />
    </div>
  );
}