26cac676f0
Color Contrast (WCAG AA 4.5:1 compliance): - accent-highlight: #cd853f → #7a4f1d (5.23:1) - warning: #b8860b → #705308 (5.29:1) - dark theme muted: #8a7e6e → #9a8e7e (5.39:1) - dark theme warning: #d4a32c → #c99020 (6.17:1) Accessibility Utilities (_base.scss): - .sr-only for screen reader only content - .skip-link visible on focus - .interactive-row with focus-visible styles - prefers-reduced-motion media query support Interactive Element Improvements: - Save/attack rows: role="button", tabindex="0", aria-label - Stat inputs: proper label for= associations - Decorative icons: aria-hidden="true" - Keyboard activation via _setupKeyboardAccessibility() Editor Fix: - Simplified editor-wrapper styles to restore ProseMirror toggle button - Resize feature remains deferred to Task 5.11 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
106 lines
2.9 KiB
SCSS
106 lines
2.9 KiB
SCSS
// Vagabond RPG - SCSS Variables
|
|
// ==============================
|
|
|
|
// Color Palette - Parchment Theme
|
|
// Designed for WCAG AA accessibility (4.5:1 contrast ratio minimum)
|
|
|
|
// Background colors (parchment tones)
|
|
$color-parchment-light: #f5f0e1;
|
|
$color-parchment: #e8dcc8;
|
|
$color-parchment-dark: #d4c4a8;
|
|
$color-parchment-darker: #c4b08c;
|
|
|
|
// Text colors (high contrast)
|
|
$color-text-primary: #2c2416; // Main text - dark brown/black
|
|
$color-text-secondary: #4a3f2f; // Secondary text
|
|
$color-text-muted: #6b5d4d; // Muted/disabled text
|
|
$color-text-inverse: #f5f0e1; // Text on dark backgrounds
|
|
|
|
// Accent colors
|
|
$color-accent-primary: #8b4513; // Saddle brown - primary actions
|
|
$color-accent-secondary: #654321; // Dark brown - secondary
|
|
$color-accent-highlight: #7a4f1d; // Dark bronze - highlights/hover (5.23:1 WCAG AA)
|
|
|
|
// Semantic colors
|
|
$color-success: #2d5a27; // Dark green - success/healing
|
|
$color-danger: #8b0000; // Dark red - damage/danger
|
|
$color-warning: #705308; // Dark gold - warnings (5.29:1 WCAG AA)
|
|
$color-info: #2f4f4f; // Dark slate gray - info
|
|
|
|
// Stat colors (for visual distinction)
|
|
$color-might: #8b0000; // Red - strength/power
|
|
$color-dexterity: #228b22; // Green - agility
|
|
$color-awareness: #4169e1; // Royal blue - perception
|
|
$color-reason: #9932cc; // Purple - intellect
|
|
$color-presence: #daa520; // Goldenrod - charisma
|
|
$color-luck: #20b2aa; // Light sea green - fortune
|
|
|
|
// Borders
|
|
$color-border: #8b7355;
|
|
$color-border-light: #a08060;
|
|
$color-border-dark: #5c4a3a;
|
|
|
|
// Shadows
|
|
$shadow-light: rgba(0, 0, 0, 0.1);
|
|
$shadow-medium: rgba(0, 0, 0, 0.2);
|
|
$shadow-dark: rgba(0, 0, 0, 0.3);
|
|
|
|
// Typography
|
|
$font-family-header: "Modesto Condensed", "Roboto Slab", "Georgia", serif;
|
|
$font-family-body: "Signika", "Roboto", "Helvetica Neue", sans-serif;
|
|
$font-family-mono: "Roboto Mono", "Consolas", monospace;
|
|
|
|
// Font sizes (using rem for accessibility)
|
|
$font-size-xs: 0.75rem; // 12px
|
|
$font-size-sm: 0.875rem; // 14px
|
|
$font-size-base: 1rem; // 16px
|
|
$font-size-lg: 1.125rem; // 18px
|
|
$font-size-xl: 1.25rem; // 20px
|
|
$font-size-2xl: 1.5rem; // 24px
|
|
$font-size-3xl: 1.875rem; // 30px
|
|
$font-size-4xl: 2.25rem; // 36px
|
|
|
|
// Font weights
|
|
$font-weight-normal: 400;
|
|
$font-weight-medium: 500;
|
|
$font-weight-semibold: 600;
|
|
$font-weight-bold: 700;
|
|
|
|
// Line heights
|
|
$line-height-tight: 1.25;
|
|
$line-height-normal: 1.5;
|
|
$line-height-relaxed: 1.75;
|
|
|
|
// Spacing scale
|
|
$spacing-0: 0;
|
|
$spacing-1: 0.25rem; // 4px
|
|
$spacing-2: 0.5rem; // 8px
|
|
$spacing-3: 0.75rem; // 12px
|
|
$spacing-4: 1rem; // 16px
|
|
$spacing-5: 1.25rem; // 20px
|
|
$spacing-6: 1.5rem; // 24px
|
|
$spacing-8: 2rem; // 32px
|
|
$spacing-10: 2.5rem; // 40px
|
|
|
|
// Border radius
|
|
$radius-sm: 2px;
|
|
$radius-md: 4px;
|
|
$radius-lg: 8px;
|
|
$radius-full: 9999px;
|
|
|
|
// Transitions
|
|
$transition-fast: 150ms ease;
|
|
$transition-base: 250ms ease;
|
|
$transition-slow: 350ms ease;
|
|
|
|
// Z-index scale
|
|
$z-dropdown: 100;
|
|
$z-sticky: 200;
|
|
$z-fixed: 300;
|
|
$z-modal-backdrop: 400;
|
|
$z-modal: 500;
|
|
$z-tooltip: 600;
|
|
|
|
// Breakpoints for responsive layouts
|
|
$breakpoint-narrow: 700px;
|