romfast/roa2web-service-auto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1bb3a382defb86de5c6d30e655882c7d0982f2cb
roa2web-service-auto/.claude/rules/css-design-system.md
Claude Agent 1bb3a382de feat: Add PWA support and consolidate CSS design system 
- Add PWA manifest, icons (192x192, 512x512), and service worker
- Register service worker in index.html with Apple mobile web app support
- Consolidate CSS variables and design tokens documentation
- Update PrimeVue overrides for consistent theming
- Refactor data-entry components to use shared CSS patterns
- Add frontend-style-auditor agent for style consistency checks
- Minor OCR validation and job worker improvements
- Update start-prod.sh configuration

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-06 14:00:21 +00:00

2.8 KiB
Raw Blame History

paths
paths
src/modules/**/*.{vue,css}

CSS Design System Rules

Documentation (READ FIRST)

  • Quick Start: docs/ONBOARDING_CSS.md (5 min read)
  • Complete Patterns: docs/CSS_PATTERNS.md (cards, forms, buttons, tables, etc.)
  • Design Tokens: docs/DESIGN_TOKENS.md (colors, spacing, typography variables)

Core Principles

  • Use CSS variables from design tokens, NEVER hardcoded values
  • Check CSS_PATTERNS.md BEFORE writing any CSS
  • Import shared styles from shared/frontend/styles/

Dark Mode Support (CRITICAL)

Dark mode is ACTIVE via @media (prefers-color-scheme: dark).

Use semantic surface tokens for backgrounds:

Token Light Dark Use For
--surface-card white dark Card/container backgrounds
--surface-ground light gray darker Page background
--surface-hover hover gray dark hover Hover states
--surface-border light border dark border Borders
--text-color dark light Primary text
--text-color-secondary gray light gray Secondary text

For status colors, use scales:

  • Success: --green-50 to --green-900 (bg: 50/100, text: 500/600)
  • Warning: --yellow-50 to --yellow-900
  • Error: --red-50 to --red-900
  • Info: --blue-50 to --blue-900

Color Variable Quick Reference

Backgrounds

background: var(--surface-card);     /* Cards, modals, containers */
background: var(--surface-ground);   /* Page background */
background: var(--surface-hover);    /* Hover states */

Text

color: var(--text-color);            /* Primary text */
color: var(--text-color-secondary);  /* Secondary/muted text */

Borders

border-color: var(--surface-border); /* Standard borders */

Status Colors

/* Success */
background: var(--green-50);         /* Light success bg */
color: var(--green-600);             /* Success text */

/* Warning */
background: var(--yellow-50);        /* Light warning bg */
color: var(--yellow-700);            /* Warning text */

/* Error */
background: var(--red-50);           /* Light error bg */
color: var(--red-600);               /* Error text */

Shared Styles to Import

  • Login: @import 'shared/frontend/styles/login.css'
  • Header: @import 'shared/frontend/styles/layout/header.css'
  • Navigation: @import 'shared/frontend/styles/layout/navigation.css'

NEVER

  • Use :deep() for PrimeVue overrides (use vendor/ files)
  • Duplicate patterns that exist in CSS_PATTERNS.md
  • Use hardcoded colors like #2563eb (use var(--color-primary))
  • Use hardcoded backgrounds like #ffffff or white (use var(--surface-card))
  • Create scoped CSS for patterns that already exist in shared files
  • Forget dark mode - always test with prefers-color-scheme: dark