dmolinari/SIG-CM2.0
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

docs(skill-registry): actualizar compact rules design system v2.3

Browse Source 
Sincroniza con doc Obsidian 2.14 v2.3 y engram sig-cm2/design-system:
- Agrega violet accent y nueva guidance
- Density bumpeada a 40px (input h-10), radius 10px base
- Utilities CSS (.glass/.gradient-mesh/.grid-bg/.surface/.focus-glow)
- Card variants ampliados
- Tooltip Radix obligatorio (no CSS absolute en sidebars)
- Sidebar colapsable con useSidebar
- TooltipProvider y Toaster ya en App.tsx
- Browser autofill fix mencionado
This commit is contained in:
dmolinari
2026-04-16 11:32:07 -03:00
parent 83d76b95d4
commit 5f7d9e6b89
1 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
.atl/skill-registry.md
View File

@@ -60,14 +60,22 @@ Generated: 2026-04-13
- Coverage backend: `dotnet test --collect:"XPlat Code Coverage"`
- Coverage frontend: `vitest --coverage`
### Design System (frontend)
### Design System (frontend) — v2.3
- Source of truth: `Obsidian/02-ARQUITECTURA-y-TECH-STACK/2.14 🎨 Design System.md`. Engram topic_key: `sig-cm2/design-system`
- Brand `#008fbe` (logo) → escalado OKLCH `--brand-50..950`. Neutral cool slate (`--neutral-50..950`). NO usar `gray-*`/`slate-*`/`blue-*` genéricos
- Tokens semánticos: `bg-background`, `text-foreground`, `bg-primary`, `bg-card`, `text-muted-foreground`, `border-border`, `ring-ring`. NUNCA hardcodear `bg-white`/`text-black`/hex inline
- Density compact: button 32-36px, input 36px, table row 40px. Spacing múltiplos de 4
- Light + Dark con default = system preference (`useTheme()` hook). Smoke test en ambos antes de mergear
- Personality: tech sophisticated (Vercel/Linear/Railway). Glass + gradient mesh + multi-layer shadows + glow blobs corners
- Brand `#008fbe` (logo) → escalado OKLCH `--brand-50..950`. **Violet accent** `oklch(0.62 0.20 280)` (`--accent-violet-*`) para combos tech. Neutral cool slate con shift hue 250-252 (`--neutral-50..950`)
- NO usar `gray-*`/`slate-*`/`blue-*` genéricos de Tailwind. Solo brand/neutral/violet/semantic
- Tokens semánticos: `bg-background`, `text-foreground`, `bg-primary`, `bg-card`, `text-muted-foreground`, `border-border`, `ring-ring`, `bg-input` (con `border-input-border`). NUNCA hardcodear `bg-white`/`text-black`/hex inline
- Density compact: button 32-40px, input 40px (`h-10`), table row 40px. `--radius` base 10px (sm/md/lg/xl = 6/8/10/14)
- Light + Dark con default = system preference (`useTheme()` hook). Dark NO es pure black (slate-violet). Smoke test ambos antes de mergear
- Forms: ≤4 campos single col, ≥5 campos `grid grid-cols-1 md:grid-cols-2 gap-4`
- Tablas mobile: priority columns + tap-to-expand (NO cards-on-mobile, NO pure horizontal scroll)
- Toasts via `sonner` (`<Toaster />` ya montado en `App.tsx`). `toast.success()` / `toast.error()`
- **Utilities CSS** (`@layer components` en index.css): `.glass`, `.gradient-mesh`, `.grid-bg` (usar en root layouts), `.surface` (tablas), `.focus-glow`
- **Card variants**: `default` (shadow-md) / `elevated` / `glass` / `flat`
- **Tooltips**: usar SIEMPRE `<Tooltip>` de `@/components/ui/tooltip` (Radix Portal). NO CSS absolute en sidebars/modals — clipping issue
- **Sidebar**: colapsable con `useSidebar()` hook (persiste en localStorage). Toggle en top header al lado del brand
- Toasts via `sonner` (`<Toaster richColors closeButton position="top-right" />` ya montado en `App.tsx`). `toast.success()` / `toast.error()`
- TooltipProvider ya envuelve App con `delayDuration={150}`
- Componentes shadcn: instalar via shadcn MCP server o `npx shadcn@latest add`. NUNCA copy-paste manual del website
- WCAG AA obligatorio: focus rings visibles (ya forzado en CSS base), contrast ≥ 4.5:1 texto normal, aria-label en botones icon-only
- Browser autofill fix ya aplicado en `@layer base` — respeta tokens del DS