Vibe

Appearance

@vibe-labs/design-colors ​

Color tokens for the Vibe Design System — neutral scale, status colors, main color scales, alternative neutrals, and optional palettes.

Installation ​

css
/* Core: neutral scale + status colors */
@import "@vibe-labs/design-colors";

/* Add individual color scales as needed */
@import "@vibe-labs/design-colors/scales/main/blue";
@import "@vibe-labs/design-colors/scales/main/red";

/* Alternative neutral scales */
@import "@vibe-labs/design-colors/scales/neutral/slate";

/* Optional palettes */
@import "@vibe-labs/design-colors/palettes/flatui";

Tokens ​

Neutral Scale (scales/neutral/scales-neutral.css) ​

Extended precision neutral scale in @layer vibe.tokens, with fine-grained dark-range stops:

--color-neutral-0 (white) → --color-neutral-1000 (black)

Standard stops: 0, 25, 50, 75, 100, 200, 300, 400, 450, 500, 550, 600, 650, 700, 750, 800, 825, 850, 875, 900, 950, 1000

Status Colors (scales/scales-status.css) ​

Each status color provides a 50–600 range:

ScaleToken patternExample 500
Success--color-success-{50–600}#1fae5d
Warning--color-warning-{50–600}#e68b33
Danger--color-danger-{50–600}#d64546
Info--color-info-{50–600}#00b3cc

Main Color Scales (opt-in) ​

Each provides a 50–900 range as --color-{name}-{stop}:

Import pathToken prefix
scales/main/blue--color-blue-*
scales/main/brown--color-brown-*
scales/main/cyan--color-cyan-*
scales/main/green--color-green-*
scales/main/indigo--color-indigo-*
scales/main/orange--color-orange-*
scales/main/pink--color-pink-*
scales/main/purple--color-purple-*
scales/main/red--color-red-*
scales/main/teal--color-teal-*
scales/main/yellow--color-yellow-*

Alternative Neutral Scales (opt-in) ​

Import pathDescription
scales/neutral/slateCool neutral (blue bias), 50–900 + 750/850
scales/neutral/zincSlightly warm neutral, 50–900
scales/neutral/stoneSoft earthy neutral, 50–900
scales/neutral/sandWarm sand tones, 50–400
scales/neutral/charcoalDeep darks only, 700–900

Palettes (opt-in) ​

Import pathDescription
palettes/flatuiFlat UI color palette (original + American + British sets)

Utilities / Generated Classes ​

None — this package defines tokens only.

Dist Structure ​

File/PathDescription
index.cssBarrel — neutral scale + status colors
scales/neutral/Neutral and alternative neutral scales
scales/scales-status.cssStatus color tokens
scales/main/Individual main color scales
palettes/Optional color palettes

Dependencies ​

None — this package is self-contained.

Build ​

bash
npm run build

Usage Guide ​

Provides the full color token vocabulary for the Vibe Design System — neutrals, status, and opt-in named scales.

Import ​

css
@import "@vibe-labs/design-colors";

Common Patterns ​

1. Use neutral tokens for surfaces and text ​

css
.card {
  background: var(--color-neutral-850);
  border: 1px solid var(--color-neutral-700);
  color: var(--color-neutral-100);
}

2. Use status tokens for feedback states ​

css
.alert-success {
  background: var(--color-success-50);
  border-color: var(--color-success-300);
  color: var(--color-success-600);
}

.alert-danger {
  background: var(--color-danger-50);
  border-color: var(--color-danger-300);
  color: var(--color-danger-600);
}

3. Load a named scale for brand colors ​

css
@import "@vibe-labs/design-colors";
@import "@vibe-labs/design-colors/scales/main/blue";
css
.badge-blue {
  background: var(--color-blue-100);
  color: var(--color-blue-700);
}

4. Use the extended neutral range for subtle UI layering ​

The neutral scale has fine-grained dark stops (800, 825, 850, 875, 900) for precise dark-mode depth:

css
.page       { background: var(--color-neutral-950); }
.sidebar    { background: var(--color-neutral-900); }
.card       { background: var(--color-neutral-850); }
.card-hover { background: var(--color-neutral-800); }
.modal      { background: var(--color-neutral-750); }

5. Load an alternative neutral for a different brand tone ​

css
@import "@vibe-labs/design-colors/scales/neutral/slate";
css
:root {
  --color-neutral-900: var(--color-slate-900); /* override in theme */
}

6. Access status colors at specific stops ​

The 50–600 range supports light backgrounds (50–200), borders (300–400), and foreground text (500–600):

css
.tag-warning {
  background: var(--color-warning-100);
  color: var(--color-warning-600);
  border: 1px solid var(--color-warning-300);
}

Token Reference ​

GroupPatternRange
Neutral--color-neutral-{n}0–1000
Success--color-success-{n}50–600
Warning--color-warning-{n}50–600
Danger--color-danger-{n}50–600
Info--color-info-{n}50–600
Named scales--color-{name}-{n}50–900

Vibe