Skip to content
Byos
ComponentsDocs
XFigma3.4k
Overview
  • Introduction
  • Get Started
  • Styling
  • Registry
  • Roadmap
Components
  • Alert
  • Autocomplete
  • Badge
  • Cascader
  • Code Block
  • Data GridVirtualization and row pinning support added
  • Date Selector
  • Event Calendar
  • File Upload
  • Filters
  • Frame
  • Gantt
  • Icon Stack
  • Icon Tile
  • Kanban
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • Sortable
  • Stepper
  • Timeline
  • Tree

Product

  • Components
  • Docs

Community

  • GitHub
  • X / Twitter
  • Figma

© 2026 Byos. Released under the MIT License.

3.4k

Styling

PreviousNext

A guide for extended styling options with the ByosUI color system.

Overview

ByosUI extends the standard Tailwind color tokens with additional semantic tokens that enable precise, context-aware UI states.

You can use standard Tailwind themes as-is, but adopting these tokens keeps design quality and contrast consistent across component states such as Alerts and Badges.

Extended Tokens

To support advanced state communication in components like Alerts, Badges, and Data Grids, the base palette is extended with additional semantic tokens:

  • --destructive-foreground: Foreground color specifically for destructive actions.
  • --info & --info-foreground: Background and text colors for informational states.
  • --success & --success-foreground: Background and text colors for success/positive outcomes.
  • --warning & --warning-foreground: Background and text colors for cautionary states.
  • --invert & --invert-foreground: Background and text colors for invert states.
app/globals.css
Get StartedRegistry

On This Page

OverviewExtended Tokens
@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-invert: var(--invert);
  --color-invert-foreground: var(--invert-foreground);
}
 
:root {
  --destructive-foreground: var(--color-red-800);
  --info: var(--color-violet-500);
  --info-foreground: var(--color-violet-900);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-900);
  --warning: var(--color-yellow-500);
  --warning-foreground: var(--color-yellow-900);
  --invert: var(--color-zinc-900);
  --invert-foreground: var(--color-zinc-50);
}
 
.dark {
  --destructive-foreground: var(--color-red-600);
  --info: var(--color-violet-500);
  --info-foreground: var(--color-violet-600);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-600);
  --warning: var(--color-yellow-500);
  --warning-foreground: var(--color-yellow-600);
  --invert: var(--color-zinc-700);
  --invert-foreground: var(--color-zinc-50);
}

For general customization guidelines such as adding your own custom colors, see the Tailwind CSS documentation.