| version | alpha | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| name | Sink | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| description | Semantic design tokens and component guidance for the Sink interface. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| colors |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| typography |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| rounded |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| components |
|
This file is a derived summary for design-aware agents. If it conflicts with app/assets/css/tailwind.css or a component under app/components/ui/**, the CSS and UI component implementation are authoritative.
The unprefixed tokens reproduce the semantic roles in :root; dark-* tokens flatten the corresponding .dark values. Always use roles as intended and keep each background paired with its foreground. The green chart-1 through chart-5 sequence is for charts only. Use success for positive status and completion indicators, ring for focus emphasis, and destructive for destructive or invalid states, including their dark-mode counterparts.
Use IBM Plex Sans for interface text. heading is an alias of the same family, not a separate display face. Components choose font size, weight, and line height with local utilities; this file does not define a global type scale.
The repository does not define a global grid, container, breakpoint, or spacing scale. Follow adjacent implementations when composing screens. Sidebar widths and responsive behavior belong to the sidebar component and are not global layout tokens.
Base surfaces establish depth with semantic backgrounds, borders, and rings. Dialogs and floating content use overlays, rings, and shadows where their implementations specify them. Shadows are component implementation details, not global elevation tokens.
The base radius is 0.625rem. Derived CSS radii are sm = calc(var(--radius) - 4px), md = calc(var(--radius) - 2px), lg = var(--radius), and xl = calc(var(--radius) + 4px). Utilities such as rounded-2xl and rounded-4xl are local component choices, not global design tokens.
Generous component radii coexist with compact density; a larger radius does not imply a larger control.
- Buttons provide default, outline, secondary, ghost, destructive, and link variants, multiple text and icon sizes, focus/invalid rings, active movement, and disabled treatment.
- Inputs and select triggers use input surfaces and borders with placeholder, hover where implemented, focus, invalid, and disabled states; select content uses popover colors and floating-content treatment.
- Cards pair card background and foreground colors, use a subtle ring, and provide default and small density variants. Use small density for repeated dashboard collections and default density for standalone sections, forms, and empty states.
- Standard dialogs use popover colors, an overlay, open/closed motion, and a subtle ring. The scrollable dialog variant instead uses the background role, a border, and a local shadow; other floating content follows its own implementation.
- Tabs provide default filled and line variants with active, hover, focus, disabled, horizontal, and vertical states. When a horizontal list does not fit, scrolling belongs to an outer wrapper, focus-ring clearance is preserved, and the active trigger remains visible.
- The sidebar uses its dedicated background, foreground, accent, border, and ring roles across responsive, collapsible, floating, and inset variants. Primary navigation uses the default shape while idle and a stronger pill treatment for both hover and active states. Secondary utilities are compact icon-only controls and rely on native collapsed behavior. Sidebar primary roles are defined but are not currently consumed by these components.
Components expose stable data-slot attributes for composition and styling. Reuse the existing UI components and their variants; do not hand-edit generated components under app/components/ui/**.
- Mobile keeps registry control sizes by default and uses larger official variants only when context needs a larger touch target.
- Use menus for compact contextual action lists and popovers for richer anchored content.
- When an overlay opens another, focus moves directly into the new surface and returns to the initiating control when the flow ends.
Do use semantic colors, preserve background/foreground pairings in both themes, reuse existing components, and keep hover, focus, active, invalid, expanded, and disabled states consistent with nearby implementations.
Don't invent tokens, promote generated utility choices to global tokens, or hand-edit app/components/ui/**.