Radius

PyColors UI defines a small set of radius tokens to keep corners consistent across components and layouts.

All radii are derived from a single base variable, ensuring global consistency and easy theming.

Base radius

:root {
  --radius: 0.625rem;
}

From this base, derived tokens are generated:

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

If you maintain an explicit Tailwind configuration, you can optionally map these tokens:

borderRadius: {
  sm: "var(--radius-sm)",
  DEFAULT: "var(--radius-md)",
  md: "var(--radius-md)",
  lg: "var(--radius-lg)",
  xl: "var(--radius-xl)",
},

This ensures all components using Tailwind’s rounded-* utilities remain aligned with the PyColors design system.

Radius tokens

Defined once in app/global.css and consumed everywhere through Tailwind utilities.

Token	Maps to
`--radius-sm`	Compact elements, inputs, pills
`--radius-md`	Default UI radius (buttons, chips)
`--radius-lg`	Cards, panels, content containers
`--radius-xl`	Modals, overlays, featured surfaces

When you use rounded-sm, rounded-md, rounded-lg, or rounded-xl, Tailwind resolves the correct token automatically.

Visual examples

rounded-sm

Small radius (--radius-sm)

rounded-md

Default radius (--radius-md)

rounded-lg

Large radius (--radius-lg)

rounded-xl

Extra-large radius (--radius-xl)

export function RadiusExample() {
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      <div className="rounded-sm border bg-card px-4 py-3 text-sm">
        <div className="text-xs font-medium text-muted-foreground mb-1">
          rounded-sm
        </div>
        <div>Small radius (--radius-sm)</div>
      </div>

      <div className="rounded-md border bg-card px-4 py-3 text-sm">
        <div className="text-xs font-medium text-muted-foreground mb-1">
          rounded-md
        </div>
        <div>Default radius (--radius-md)</div>
      </div>

      <div className="rounded-lg border bg-card px-4 py-3 text-sm">
        <div className="text-xs font-medium text-muted-foreground mb-1">
          rounded-lg
        </div>
        <div>Large radius (--radius-lg)</div>
      </div>

      <div className="rounded-xl border bg-card px-4 py-3 text-sm">
        <div className="text-xs font-medium text-muted-foreground mb-1">
          rounded-xl
        </div>
        <div>Extra large radius (--radius-xl)</div>
      </div>
    </div>
  );
}

Usage guidelines

Use rounded-md as the default radius for most interactive elements.
Use rounded-lg for primary surfaces such as cards and panels.
Use rounded-xl sparingly for standout elements like modals or featured cards.
Use rounded-sm for dense UIs or subtle decorative elements.
Avoid raw values like rounded-[11px] in components. If a new radius is needed, introduce a token.