Diamond Diamond

theme

Globals

Global CSS variables (accent, surface, ink, gradient) injected into your `tailwind.css`. Theme-based: pass --theme <name> or a bare flag like --kepler.

npx "@rueda.dev/gems-diamond" add globals

Available themes

Pass --theme <name> or the bare flag --<name> when running add.

  • default(default)
  • kepler
  • high-contrast
  • mars
  • earth
  • ocean
  • sakura
  • noir
  • matrix
  • vaporwave
  • sepia
  • dracula

Usage Guide

How to wire up this component in your app — props, callbacks, customization, and the conventions Diamond shares across the library.

What this is

globals isn't a component — it's a CSS-variable theme that the CLI patches into your project's main stylesheet (typically config.tailwind.css). Every other Diamond component reads these vars at runtime.

Installing a theme

# default theme
npx @rueda.dev/gems-diamond add globals

# any other theme
npx @rueda.dev/gems-diamond add globals --theme kepler
# or the shorthand flag
npx @rueda.dev/gems-diamond add globals --kepler

Reinstalling with a different theme replaces the previous block in-place. Themes are dual-mode: each declares a :root block for light and a :root.dark block for dark.

Canonical CSS variables

  • --diamond-accent / --diamond-on-accent — brand color + readable text on top.
  • --diamond-accent-soft / --diamond-accent-deep — softer / deeper shades.
  • --diamond-surface / --diamond-surface-alt — neutral backgrounds.
  • --diamond-ink / --diamond-muted — text colors.
  • --diamond-border — divider color.
  • --diamond-gradient — optional gradient blob token.

Universal patterns

Every Diamond component shares the same prop conventions, so once you learn one you can predict the others.

  • variant — discriminated union of every visual option. Categories shown above are docs-only metadata; the prop is a flat string union.
  • accent — any CSS color string. Overrides --diamond-accent just for that instance via inline style. Cascades into hover, ring, and selection states.
  • asChild (when present) — renders the underlying primitive via @radix-ui/react-slot, letting you compose with <Link>, motion.button, etc.
  • className — merged with internal Tailwind classes via cn(). Use it to override layout, spacing, or colors.
  • Native HTML attributes (onClick, aria-*, data-*, ref, etc.) flow through to the root element without any whitelist.
  • Diamond is the skin: zero domain state, zero fetch, zero providers. You wire data and reactions in your app code; the components just render and emit events.