Design System

import theme from "tailwindcss/defaultTheme";

export default function BorderRadius() {
  return (
    <div className="space-y-3">
      <h2 className="text-sm font-medium">Border Radius</h2>
      <div className="flex flex-wrap gap-6 text-xs font-medium">
        {Object.entries(theme.borderRadius).map(([key, value]) => (
          <div key={key} className="flex flex-col gap-1.5">
            <div
              className="h-8 w-20 border bg-border"
              style={{ borderRadius: String(value) }}
            />
            <div className="flex flex-col">
              <span>{key}</span>
              <span className="text-muted-foreground">{value}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

import theme from "tailwindcss/defaultTheme";

export default function Shadows() {
  return (
    <div className="space-y-3">
      <h2 className="text-sm font-medium">Shadows</h2>
      <div className="flex flex-wrap gap-6 text-xs font-medium">
        {Object.entries(theme.boxShadow).map(([key, value]) => (
          <div key={key} className="flex flex-col gap-1.5">
            <div
              className="h-8 w-20 rounded-md bg-border"
              style={{ boxShadow: String(value) }}
            />
            <div className="flex flex-col">
              <span>{key}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

import theme from "tailwindcss/defaultTheme";

export default function Blur() {
  return (
    <div className="space-y-3">
      <h2 className="text-sm font-medium">Blur</h2>
      <div className="flex flex-wrap gap-6 text-xs font-medium">
        {Object.entries(theme.blur).map(([key, value]) => (
          <div key={key} className="flex flex-col gap-1.5">
            <div
              className="h-8 w-20 rounded-md bg-border"
              style={{ filter: `blur(${value || "0px"})` }}
            />
            <div className="flex flex-col">
              <span>{key}</span>
              <span className="text-muted-foreground">{value}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

import theme from "tailwindcss/defaultTheme";

export default function BackdropBlur() {
  return (
    <div className="space-y-3">
      <h2 className="text-sm font-medium text-white drop-shadow">Backdrop Blur</h2>
      <div className="flex flex-wrap gap-6 text-xs font-medium text-white drop-shadow">
        {Object.entries(theme.blur).map(([key, value]) => (
          <div key={key} className="flex flex-col gap-1.5">
            <div
              className="h-8 w-20 rounded-md bg-white/20"
              style={{ backdropFilter: `blur(${value || "0px"})` }}
            />
            <div className="flex flex-col">
              <span>{key}</span>
              <span className="text-white/80">{value}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

import theme from "tailwindcss/defaultTheme";

export default function Opacity() {
  return (
    <div className="space-y-3">
      <h2 className="text-sm font-medium text-white drop-shadow">Opacity</h2>
      <div className="flex flex-wrap gap-6 text-xs font-medium text-white drop-shadow">
        {Object.entries(theme.opacity).map(([key, value]) => {
          if (key === "__BARE_VALUE__") return null;
          if (typeof value === "function") return null;

          return (
            <div key={key} className="flex flex-col gap-1.5">
              <div
                className="h-8 w-20 rounded-md bg-white"
                style={{ opacity: Number(value) }}
              />
              <div className="flex flex-col">
                <span>{key}</span>
                <span className="text-white/80">{value}</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
import theme from "tailwindcss/defaultTheme";

export default function Spacing() {
  const spacingEntries = Object.entries(theme.spacing).sort(([a], [b]) => {
    if (a === "0") return -1;
    if (b === "0") return 1;
    if (a === "px") return -1;
    if (b === "px") return 1;
    return a.localeCompare(b, undefined, { numeric: true });
  });

  return (
    <div className="space-y-3">
      <h2 className="text-sm font-medium">Spacing</h2>
      <Table>
        <TableBody>
          {spacingEntries.map(([key, value]) => (
            <TableRow key={key}>
              <TableCell className="p-1.5 text-xs font-medium">{key}</TableCell>
              <TableCell className="p-1.5 text-xs text-muted-foreground">{value}</TableCell>
              <TableCell className="p-1.5">
                <div className="h-3 rounded-md bg-primary" style={{ width: value }} />
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

const swatches = [
  { name: "background" },
  { name: "foreground" },
  { name: "muted" },
  { name: "muted-foreground" },
  { name: "card" },
  { name: "card-foreground" },
  { name: "popover" },
  { name: "popover-foreground" },
  { name: "border" },
  { name: "input" },
  { name: "primary" },
  { name: "primary-foreground" },
  { name: "secondary" },
  { name: "secondary-foreground" },
  { name: "accent" },
  { name: "accent-foreground" },
  { name: "destructive" },
  { name: "destructive-foreground", fallback: "--foreground" },
];

export default function ShadcnColors() {
  return (
    <div className="space-y-3">
      <h2 className="text-sm font-medium">shadcn/ui Colors</h2>
      <div className="grid grid-cols-3 gap-6 text-xs font-medium md:grid-cols-6">
        {swatches.map(({ name, fallback }) => (
          <div key={name} className="flex flex-col gap-1.5">
            <div
              className="h-8 w-20 shrink-0 rounded border"
              style={{
                backgroundColor: `var(--${name}${
                  fallback ? `, var(${fallback})` : ""
                })`,
              }}
            />
            <span>{name}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

import colors from "tailwindcss/colors";
import { Fragment } from "react";

const excluded = new Set(["inherit", "current", "transparent", "black", "white"]);

export default function TailwindColors() {
  return (
    <div className="space-y-3">
      <h2 className="text-sm font-medium">Tailwind Colors</h2>
      <div className="flex flex-col gap-x-2 gap-y-4 text-xs font-medium">
        <div className="grid grid-cols-4 gap-2 md:grid-cols-11">
          <div className="flex flex-col gap-1.5">
            <div className="h-8 w-20 shrink-0 rounded border bg-white" />
            <span>white</span>
          </div>
          <div className="flex flex-col gap-1.5">
            <div className="h-8 w-20 shrink-0 rounded border bg-black" />
            <span>black</span>
          </div>
          <div className="flex flex-col gap-1.5">
            <div className="h-8 w-20 shrink-0 rounded border bg-transparent" />
            <span>transparent</span>
          </div>
          <div className="flex flex-col gap-1.5">
            <div className="h-8 w-20 shrink-0 rounded border bg-current" />
            <span>current</span>
          </div>
          <div className="flex flex-col gap-1.5">
            <div className="h-8 w-20 shrink-0 rounded border bg-inherit" />
            <span>inherit</span>
          </div>
        </div>

        {Object.entries(colors).map(([key, value]) => (
          <Fragment key={key}>
            {excluded.has(key) ? null : (
              <div className="grid grid-cols-4 gap-2 md:grid-cols-11">
                {Object.entries(value).map(([shade, color]) => (
                  <div key={`${key}-${shade}`} className="flex flex-col gap-1">
                    <div
                      className="h-8 w-20 shrink-0 rounded"
                      style={{ backgroundColor: color as string }}
                    />
                    <span>{`${key.toLowerCase()}-${shade}`}</span>
                  </div>
                ))}
              </div>
            )}
          </Fragment>
        ))}
      </div>
    </div>
  );
}

import theme from "tailwindcss/defaultTheme";

const weights = [100, 200, 300, 400, 500, 600, 700, 800, 900];

export default function FontSizes() {
  return (
    <div className="space-y-6 text-sm">
      <h2 className="text-sm font-medium">Font Sizes</h2>
      <div className="flex flex-col gap-8">
        {Object.entries(theme.fontSize).map(([sizeKey, [size, lineHeightConfig]]) => {
          const lineHeight = typeof lineHeightConfig === "object"
            ? lineHeightConfig.lineHeight
            : lineHeightConfig;

          return (
            <div key={sizeKey} className="flex flex-col gap-1">
              <p className="font-medium uppercase text-muted-foreground">
                {sizeKey}/{lineHeight}
              </p>
              {weights.map((weight) => (
                <p
                  key={`${sizeKey}-${weight}`}
                  className="truncate"
                  style={{ fontSize: size as string, fontWeight: weight, lineHeight }}
                >
                  The quick brown fox jumps over the lazy dog
                </p>
              ))}
            </div>
          );
        })}
      </div>
    </div>
  );
}