release: Storybook v0.2.0 - Major syntax and features update
BREAKING CHANGES: - Relationship syntax now requires blocks for all participants - Removed self/other perspective blocks from relationships - Replaced 'guard' keyword with 'if' for behavior tree decorators Language Features: - Add tree-sitter grammar with improved if/condition disambiguation - Add comprehensive tutorial and reference documentation - Add SBIR v0.2.0 binary format specification - Add resource linking system for behaviors and schedules - Add year-long schedule patterns (day, season, recurrence) - Add behavior tree enhancements (named nodes, decorators) Documentation: - Complete tutorial series (9 chapters) with baker family examples - Complete reference documentation for all language features - SBIR v0.2.0 specification with binary format details - Added locations and institutions documentation Examples: - Convert all examples to baker family scenario - Add comprehensive working examples Tooling: - Zed extension with LSP integration - Tree-sitter grammar for syntax highlighting - Build scripts and development tools Version Updates: - Main package: 0.1.0 → 0.2.0 - Tree-sitter grammar: 0.1.0 → 0.2.0 - Zed extension: 0.1.0 → 0.2.0 - Storybook editor: 0.1.0 → 0.2.0
This commit is contained in:
160
design/color-palette.md
Normal file
160
design/color-palette.md
Normal file
@@ -0,0 +1,160 @@
|
||||
# Storybook Editor Color Palette
|
||||
|
||||
> Aubergine sophistication meets gold energy
|
||||
|
||||
## Primary Colors (Aubergine Foundation)
|
||||
|
||||
```
|
||||
████ aubergine-900 #1a0f1e RGB(26, 15, 30) Background (darkest)
|
||||
████ aubergine-800 #2b1a33 RGB(43, 26, 51) Surface (panels, cards)
|
||||
████ aubergine-750 #382444 RGB(56, 36, 68) Alternate row color
|
||||
████ aubergine-700 #3d2447 RGB(61, 36, 71) Surface hover
|
||||
████ aubergine-600 #4f2e5b RGB(79, 46, 91) Borders, dividers
|
||||
████ aubergine-500 #61386f RGB(97, 56, 111) Subtle highlights
|
||||
████ aubergine-400 #805793 RGB(128, 87, 147) Active elements
|
||||
████ aubergine-300 #9f76a7 RGB(159,118,167) Muted text, info
|
||||
```
|
||||
|
||||
## Accent Colors (Gold/Orange)
|
||||
|
||||
```
|
||||
████ gold-600 #e89350 RGB(232,147, 80) Deeper accent (optional)
|
||||
████ gold-500 #f4a261 RGB(244,162, 97) PRIMARY ACCENT ⭐
|
||||
████ gold-400 #f6b47a RGB(246,180,122) Hover state
|
||||
████ gold-300 #f8c594 RGB(248,197,148) Pressed/active state
|
||||
████ gold-200 #fad6ad RGB(250,214,173) Very subtle highlight
|
||||
```
|
||||
|
||||
## Neutral Colors
|
||||
|
||||
```
|
||||
████ cream #fdf8f3 RGB(253,248,243) Primary text, high contrast
|
||||
████ warm-gray-100 #e8e3dd RGB(232,227,221) Secondary text
|
||||
████ warm-gray-200 #d1cbc3 RGB(209,203,195) Tertiary text
|
||||
████ warm-gray-400 #8b8680 RGB(139,134,128) Muted text, placeholders
|
||||
████ warm-gray-700 #4a4845 RGB(74, 72, 69) Disabled elements
|
||||
████ charcoal #1f1f1f RGB(31, 31, 31) Pure dark (code bg)
|
||||
```
|
||||
|
||||
## Semantic Colors
|
||||
|
||||
```
|
||||
████ success-light #8ab864 RGB(138,184,100) Success hover
|
||||
████ success #6a994e RGB(106,153, 78) Validation passed, success ✓
|
||||
████ success-dark #558039 RGB(85, 128, 57) Success pressed
|
||||
|
||||
████ warning-light #f6b47a RGB(246,180,122) Warning hover (reuse gold-400)
|
||||
████ warning #f4a261 RGB(244,162, 97) Warning, attention ⚠
|
||||
████ warning-dark #e89350 RGB(232,147, 80) Warning pressed
|
||||
|
||||
████ error-light #e54545 RGB(229, 69, 69) Error hover
|
||||
████ error #d62828 RGB(214, 40, 40) Parse errors, failures ✗
|
||||
████ error-dark #b81e1e RGB(184, 30, 30) Error pressed
|
||||
|
||||
████ info #9f76a7 RGB(159,118,167) Info, hints ℹ (reuse aubergine-300)
|
||||
```
|
||||
|
||||
## Color Combinations (Contrast Ratios)
|
||||
|
||||
### Text on Backgrounds
|
||||
|
||||
| Foreground | Background | Ratio | Grade | Use |
|
||||
|------------|------------|-------|-------|-----|
|
||||
| cream | aubergine-900 | 15.2:1 | AAA | Primary text |
|
||||
| warm-gray-100 | aubergine-900 | 11.8:1 | AAA | Secondary text |
|
||||
| warm-gray-400 | aubergine-900 | 4.9:1 | AA | Muted text |
|
||||
| gold-500 | aubergine-900 | 7.1:1 | AA Large | Accent text |
|
||||
| aubergine-900 | gold-500 | 7.1:1 | AA Large | Gold buttons |
|
||||
|
||||
### Interactive Elements
|
||||
|
||||
| Element | Default | Hover | Active | Focus |
|
||||
|---------|---------|-------|--------|-------|
|
||||
| Primary Button | gold-500 bg | gold-400 bg | gold-300 bg | gold-500 + glow |
|
||||
| Secondary Button | transparent | aubergine-700 | aubergine-600 | gold-500 border |
|
||||
| Input Field | aubergine-800 | - | - | gold-500 border |
|
||||
| List Item | transparent | aubergine-700 | aubergine-600 | gold-500 left border |
|
||||
|
||||
## Usage Guidelines
|
||||
|
||||
### Do's ✓
|
||||
|
||||
- Use **aubergine-900** for main background
|
||||
- Use **aubergine-800** for panels and cards
|
||||
- Use **cream** for all primary text
|
||||
- Use **gold-500** sparingly for accents (buttons, highlights, selected states)
|
||||
- Use semantic colors (success, error, warning) only for their purpose
|
||||
- Maintain visual hierarchy with size + weight + color
|
||||
|
||||
### Don'ts ✗
|
||||
|
||||
- Don't use gold for large backgrounds (overwhelming)
|
||||
- Don't use more than 2-3 colors in a single component
|
||||
- Don't rely on color alone for information (use icons + text)
|
||||
- Don't use pure black (#000) or pure white (#fff)
|
||||
- Don't mix warm and cool grays
|
||||
|
||||
## Code Syntax Highlighting
|
||||
|
||||
Muted versions of semantic colors on dark background:
|
||||
|
||||
```rust
|
||||
// Example syntax theme
|
||||
Keywords: #f4a261 (gold-500) - fn, let, pub, impl
|
||||
Types: #9f76a7 (aubergine-300) - String, Vec, Option
|
||||
Functions: #fad6ad (gold-200) - function_name()
|
||||
Strings: #8ab864 (success-light) - "hello"
|
||||
Numbers: #f6b47a (gold-400) - 42, 3.14
|
||||
Comments: #8b8680 (warm-gray-400) - // comment
|
||||
Operators: #e8e3dd (warm-gray-100) - +, =, ->
|
||||
Punctuation: #d1cbc3 (warm-gray-200) - {}, (), ;
|
||||
```
|
||||
|
||||
## Gradients (Optional, Use Sparingly)
|
||||
|
||||
```
|
||||
Gold Shimmer (for loading states):
|
||||
linear-gradient(90deg,
|
||||
gold-500 0%,
|
||||
gold-400 50%,
|
||||
gold-500 100%)
|
||||
|
||||
Aubergine Depth (for hero sections):
|
||||
linear-gradient(180deg,
|
||||
aubergine-800 0%,
|
||||
aubergine-900 100%)
|
||||
```
|
||||
|
||||
## Opacity Scale
|
||||
|
||||
For overlays and transparency:
|
||||
|
||||
```
|
||||
10%: rgba(color, 0.1) - Very subtle tint
|
||||
20%: rgba(color, 0.2) - Subtle overlay
|
||||
40%: rgba(color, 0.4) - Muted element
|
||||
60%: rgba(color, 0.6) - Semi-transparent
|
||||
80%: rgba(color, 0.8) - Mostly opaque
|
||||
```
|
||||
|
||||
## Color Psychology
|
||||
|
||||
| Color | Emotion | Usage |
|
||||
|-------|---------|-------|
|
||||
| Aubergine | Sophisticated, creative, mysterious | Base, establishes tone |
|
||||
| Gold | Energetic, optimistic, valuable | Accents, calls-to-action |
|
||||
| Cream | Calm, clean, readable | Text, content |
|
||||
| Green | Success, growth, go | Validation, success states |
|
||||
| Red | Error, stop, urgent | Errors, destructive actions |
|
||||
|
||||
## Accessibility Notes
|
||||
|
||||
- All text meets **WCAG AAA** for contrast
|
||||
- Gold accent meets **WCAG AA** for large text
|
||||
- Focus indicators are clearly visible (gold-500 + glow)
|
||||
- Never use color as the only indicator (pair with icons/text)
|
||||
- Test with colorblind simulators (deuteranopia, protanopia)
|
||||
|
||||
---
|
||||
|
||||
*Pair this palette with Geist (UI) and Monaspace Neon (code) for optimal effect.*
|
||||
Reference in New Issue
Block a user