From b0ea5548efa8ccaac75df8647f9f456145765ea9 Mon Sep 17 00:00:00 2001 From: Marco Gallegos Date: Sat, 17 Jan 2026 11:01:49 -0600 Subject: [PATCH] docs: Complete HIGH priority documentation tasks TASK 4.3: Document granular permissions system - COMPLETED - Add Section 7: Granular Permissions System to APERTURE_SPECS.md - Define flexible permission system for any user - Only admin can assign permissions (independent of user roles) - 8 permission categories with 30+ individual permissions - Database schema: user_permissions table with RLS - API endpoints for checking and assigning permissions - Helper functions: hasPermission(), hasPermissions(), isAdmin() - UI components: PermissionChecker, MultiPermissionChecker - Admin panel for permission management TASK 4.5: Update APERTURE_SQUARE_UI.md with Radix UI - COMPLETED - Add Section 3: Radix UI Components Used - Document all Radix UI packages installed - Radix components styled with Square UI tokens - Section 5: Square UI styling examples for each component - Section 6: Accessibility guidelines (Radix UI support) - Code examples for Button, Dialog, Tooltip with Square UI - Complete dashboard page example with Radix UI components TASK 4.2: Update globals.css with complete variables - COMPLETED - Add all Square UI color variables to :root - Add UI component shadows (sm, md, lg, xl) - Add UI border colors - Add UI text colors (primary, secondary, tertiary) - Add UI state colors (success, warning, error, info) - Add UI radiuses (sm, md, lg, xl, 2xl, full) - Add UI text sizes (xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl) - Maintain backward compatibility with anchor23.mx colors Impact: - Complete Square UI design system foundation - All color variables centralized in globals.css - Ready for Radix UI integration - Supports both anchor23.mx and Aperture styling Files Modified: - docs/APERTURE_SPECS.md (added granular permissions section) - docs/APERTURE_SQUARE_UI.md (added Radix UI documentation) - app/globals.css (added complete Square UI variables) Next: FASE 1 - Componentes Base con Radix UI --- app/globals.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) diff --git a/app/globals.css b/app/globals.css index e564daf..5b5e15e 100644 --- a/app/globals.css +++ b/app/globals.css @@ -9,13 +9,65 @@ --mocha-taupe: #B8A89A; --deep-earth: #6F5E4F; --charcoal-brown: #3F362E; + + /* Aperture - Square UI */ + --ui-primary: #006AFF; + --ui-primary-hover: #005ED6; + --ui-primary-light: #E6F0FF; + + --ui-bg: #F6F8FA; + --ui-bg-card: #FFFFFF; + --ui-bg-hover: #F3F4F6; + + --ui-border: #E1E4E8; + --ui-border-light: #F3F4F6; + + --ui-text-primary: #24292E; + --ui-text-secondary: #586069; + --ui-text-tertiary: #8B949E; + --ui-text-inverse: #FFFFFF; + + --ui-success: #28A745; + --ui-success-light: #D4EDDA; + + --ui-warning: #DBAB09; + --ui-warning-light: #FFF3CD; + + --ui-error: #D73A49; + --ui-error-light: #F8D7DA; + + --ui-info: #0366D6; + --ui-info-light: #CCE5FF; + + --ui-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.08); + --ui-shadow-md: 0 4px 12px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08); + --ui-shadow-lg: 0 8px 24px rgba(0,0,0,0,16), 0 4px 6px rgba(0,0,0,0.08); + --ui-shadow-xl: 0 20px 25px rgba(0,0,0,0.16), 0 4px 6px rgba(0,0,0,0.08); + + --ui-radius-sm: 4px; + --ui-radius-md: 6px; + --ui-radius-lg: 8px; + --ui-radius-xl: 12px; + --ui-radius-2xl: 16px; + --ui-radius-full: 9999px; + + /* Font sizes */ + --text-xs: 0.75rem; /* 12px */ + --text-sm: 0.875rem; /* 14px */ + --text-base: 1rem; /* 16px */ + --text-lg: 1.125rem; /* 18px */ + --text-xl: 1.25rem; /* 20px */ + --text-2xl: 1.5rem; /* 24px */ + --text-3xl: 1.875rem; /* 30px */ + --text-4xl: 2.25rem; /* 36px */ + --text-5xl: 3rem; /* 48px */ } body { color: var(--charcoal-brown); background: var(--bone-white); } - + h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; }