Token

# Brok UI: Color Token (`color-token`)

Documents a single colour design token — a round swatch plus the token name, with the colour value revealed in a tooltip on hover and click-to-copy.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add color-token
```

## Usage

```blade
<div class="flex flex-wrap items-center gap-3">
    <x-ui.color-token name="primary" value="#6366f1" />
    <x-ui.color-token name="success" value="#22c55e" />
    <x-ui.color-token name="warning" value="#f59e0b" />
    <x-ui.color-token name="destructive" value="#ef4444" />
    <x-ui.color-token name="muted" value="#94a3b8" />
</div>
```

## Props

- `name` (string, default ``) — Token name shown as the chip label and tooltip trigger.
- `value` (string, default ``) — Token colour value, shown in the tooltip and copied to the clipboard.
- `copyable` (bool, default `true`) — Shows the copy button when true.
- `side` (string, default `top`) — Tooltip placement side.

## Use when

- Use to document, inspect, and apply design-system decisions consistently across teams and AI tooling.
- Documenting a colour design token in a palette table or style guide.
- Letting a reader copy a token's exact colour value while keeping the swatch small.

## Avoid when

- Do not present token-level controls to end users who only need product functionality.
- Documenting a non-colour token; use the matching specialised token component (typography-token, spacing-token, radius-token, …) instead.

## Anti-patterns

- Exposing implementation tokens as product settings

## Rules

- Use the `<brok:color-token>` tag (or `<x-ui.color-token>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/color-token
- Registry JSON (files, props, contract): https://brokui.dev/r/open/color-token.json

@props([
    'name' => '',
    'value' => '',
    'copyable' => true,
    'side' => 'top',
])

{{--
    Color Token (tokenui.dev-inspired) — documents a single colour design token.
    A round swatch indicator plus the token name; the colour value is revealed in
    a tooltip on hover/focus and copied with one click. Implements the `color`
    type from the W3C Design Tokens spec. Composes the base `token` chip and
    supplies the swatch through its `indicator` slot.
--}}

<x-ui.token
    data-slot="color-token"
    :name="$name"
    :value="$value"
    :copyable="$copyable"
    :side="$side"
    {{ $attributes }}
>
    <x-slot:indicator>
        {{-- The swatch background is arbitrary user colour data (any CSS colour string), never a palette utility. --}}
        <span class="size-4 rounded-full border border-border" style="background-color: {{ $value }}"></span>
    </x-slot:indicator>
</x-ui.token>