Token

Open source

tokenui.dev-inspired design-token documentation chips — a base name → value token with click-to-copy, plus typed variants for colour, typography, dimension, motion and scalar tokens.

Source Open issues Report a bug

Version: v1.1.1
Stability: stable
License: MIT
Related: Token; Color Token; Typography Token; Font Family Token; Spacing Token; Radius Token; Elevation Token; Duration Token; Number Token; Order Token

5 of 11

Font Weight Token — Documents a font-weight design token as a compact chip with a sample glyph rendered at the real weight, the token name, a hover tooltip, and copy-to-clipboard.

normal medium semibold bold

Side

previews.components.font-weight-token.default.blade.php Blade

<div class="flex flex-wrap items-center gap-3">
    <x-ui.font-weight-token name="normal" value="400" />
    <x-ui.font-weight-token name="medium" value="500" />
    <x-ui.font-weight-token name="semibold" value="600" />
    <x-ui.font-weight-token name="bold" value="700" />
</div>

Top Current

normal medium semibold bold

Right Current

normal medium semibold bold

Bottom Current

normal medium semibold bold

Left Current

normal medium semibold bold

Installation

terminal

php artisan ui:add font-weight-token

Registry contract

php artisan ui:add font-weight-token writes only the files below. The CLI validates each file hash before writing and asks before it replaces a local change, unless you pass --force.

blade resources/views/components/ui/font-weight-token.blade.php

Registry dependencies: token
Packages: composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: install command, usage, props, guidance and the rules. Copy it, or open a prompt about this component in an assistant.

font-weight-token.md

# Brok UI: Font Weight Token (`font-weight-token`)

Documents a font-weight design token as a compact chip with a sample glyph rendered at the real weight, the token name, a hover tooltip, and copy-to-clipboard.

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

## Install

```bash
php artisan ui:add font-weight-token
```

## Usage

```blade
<div class="flex flex-wrap items-center gap-3">
    <x-ui.font-weight-token name="normal" value="400" />
    <x-ui.font-weight-token name="medium" value="500" />
    <x-ui.font-weight-token name="semibold" value="600" />
    <x-ui.font-weight-token name="bold" value="700" />
</div>
```

## Props

- `name` (string, default ``) — Token name shown as the chip label and tooltip trigger.
- `value` (string, default ``) — Token numeric font-weight 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 font-weight token so a reader can see the weight rendered at its real value, not just its number.
- Building a typography reference table alongside typography-token and font-family-token.

## Avoid when

- Do not present token-level controls to end users who only need product functionality.
- Documenting a font family or size token; use font-family-token or typography-token instead.

## Anti-patterns

- Exposing implementation tokens as product settings

## Rules

- Use the `<brok:font-weight-token>` tag (or `<x-ui.font-weight-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/font-weight-token
- Registry JSON (files, props, contract): https://brokui.dev/r/open/font-weight-token.json

Ask about Font Weight Token in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

API

manifest knowledge + registry-derived coverage

Props

Props accepted by this component: name, type, default value and description.
Prop	Type	Default	Description
name	string		Token name shown as the chip label and tooltip trigger.
value	string		Token numeric font-weight value, shown in the tooltip and copied to the clipboard.
copyable	bool	true	Shows the copy button when true.
side	string	top	Tooltip placement side.

Slots

default — Extra content appended inside the chip.

Data slots

Stable hooks for CSS overrides and browser tests.

font-weight-token

Behavior

Composes the base token chip and supplies a sample glyph rendered with an inline font-weight style bound to value, as the indicator.
Declares registry capability flags: a11y, responsive, rtl, darkMode, localized.

Guidance

Design-token documentation

Inspect and govern design-system decisions.

Use when

Use to document, inspect, and apply design-system decisions consistently across teams and AI tooling.
Documenting a font-weight token so a reader can see the weight rendered at its real value, not just its number.
Building a typography reference table alongside typography-token and font-family-token.

Avoid when

Do not present token-level controls to end users who only need product functionality.
Documenting a font family or size token; use font-family-token or typography-token instead.

Use instead

Product-level controls for end users

Anti-patterns

Exposing implementation tokens as product settings

Anatomy: root
Theming hooks: font-weight-token

Accessibility

WCAG 2.2 AA Keyboard focus-visible RTL-ready Localized labels Dark mode

Keyboard: No component-owned keyboard interaction; native element behavior applies.
Focus: none

The sample glyph is decorative and aria-hidden; the token name and tooltip carry the numeric weight.

Semantic HTML and a stable data-slot attribute for styling and scripting hooks.
Focus-visible rings use the ring token, so keyboard focus is always visible.
Disabled and invalid states are conveyed to assistive tech, not by color alone.
Targets WCAG 2.2 AA; verify contrast in light, dark, admin and customer surfaces in the preview.
Labels go through __() and layout uses logical properties (ms-*, text-start), so it mirrors under dir="rtl" — flip the preview to RTL to confirm.
Dark mode uses the same semantic tokens under the dark class; high contrast follows forced-color system tokens.

Livewire

Safe

Livewire can update this component through forwarded wire:* attributes.

Source

The exact, editable file ui:add writes into your app. Previews render this same code; there are no preview-only components.

resources/views/components/ui/font-weight-token.blade.php Blade

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

{{-- Documents a font-weight design token: a chip showing a sample glyph rendered at the
     real weight, the token name, the numeric weight on hover, and a copy button.
     Composes the base `token` chip and supplies the sample glyph through its
     `indicator` slot. --}}

<x-ui.token
    data-slot="font-weight-token"
    :name="$name"
    :value="$value"
    :copyable="$copyable"
    :side="$side"
    {{ $attributes }}
>
    <x-slot:indicator>
        <span class="text-base leading-none text-foreground" style="font-weight: {{ $value }}">Ag</span>
    </x-slot:indicator>
</x-ui.token>

Ownership & lifecycle

Owner, release state, review evidence and adoption for this item.

Owner: Platform UI (@JoshJML)
Current version: 1.1.1
Status: Stable
License: open
Accessibility reviewed: No review date recorded
Last breaking change: No date recorded
Deprecation: Not deprecated
Contract: v6
Foundation: ≥ 1.0.0