0f6387ab46
- renombrar openspec/ a _openspec/ (carpeta auxiliar) - mover specs de features a changes/ - crear specs base: arquitectura-limpia, estandares-codigo, nomenclatura - migrar _planificacion/ con design-system y roi-theme-template - agregar especificacion recaptcha anti-spam (proposal, tasks, spec) - corregir rutas y referencias en todas las specs Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
359 lines
11 KiB
SCSS
359 lines
11 KiB
SCSS
// =============================================================================
|
|
// APUS ADMIN PANEL - DESIGN TOKENS
|
|
// =============================================================================
|
|
// Este archivo contiene todas las variables de diseño del sistema de
|
|
// administración de APU México.
|
|
//
|
|
// Uso:
|
|
// @import 'design-tokens-apus-admin';
|
|
// =============================================================================
|
|
|
|
// =============================================================================
|
|
// COLORES
|
|
// =============================================================================
|
|
|
|
// Navy Brand Colors
|
|
// -----------------------------------------------------------------------------
|
|
$color-navy-dark: #0E2337; // Fondo principal, headers
|
|
$color-navy-primary: #1e3a5f; // Títulos, bordes importantes
|
|
$color-navy-light: #2c5282; // Variaciones secundarias
|
|
|
|
// Orange Accent Colors
|
|
// -----------------------------------------------------------------------------
|
|
$color-orange-primary: #FF8600; // Acción primaria, iconos destacados
|
|
$color-orange-hover: #FF6B35; // Hover states
|
|
$color-orange-light: #FFB800; // Badges, alerts suaves
|
|
|
|
// Neutral Colors
|
|
// -----------------------------------------------------------------------------
|
|
$color-neutral-50: #f8f9fa; // Fondo general del body
|
|
$color-neutral-100: #e9ecef; // Bordes, separadores
|
|
$color-neutral-200: #dee2e6; // Bordes sutiles
|
|
$color-neutral-600: #495057; // Texto principal
|
|
$color-neutral-700: #6c757d; // Texto secundario
|
|
$color-neutral-900: #212529; // Texto muy oscuro
|
|
|
|
// Semantic Colors
|
|
// -----------------------------------------------------------------------------
|
|
$color-success: #28a745; // Acciones exitosas
|
|
$color-danger: #dc3545; // Errores, acciones destructivas
|
|
$color-warning: #ffc107; // Advertencias
|
|
$color-info: #17a2b8; // Información
|
|
|
|
// Background Colors
|
|
// -----------------------------------------------------------------------------
|
|
$bg-body: $color-neutral-50;
|
|
$bg-card: #ffffff;
|
|
$bg-header: linear-gradient(135deg, $color-navy-dark 0%, $color-navy-primary 100%);
|
|
|
|
// =============================================================================
|
|
// TIPOGRAFÍA
|
|
// =============================================================================
|
|
|
|
// Font Family
|
|
// -----------------------------------------------------------------------------
|
|
$font-family-base: 'Poppins', sans-serif;
|
|
|
|
// Font Sizes
|
|
// -----------------------------------------------------------------------------
|
|
$font-size-base: 1rem; // 16px
|
|
$font-size-sm: 0.875rem; // 14px (labels, small text)
|
|
$font-size-xs: 0.75rem; // 12px (hints, badges)
|
|
|
|
$font-size-h1: 2rem; // 32px
|
|
$font-size-h2: 1.75rem; // 28px
|
|
$font-size-h3: 1.5rem; // 24px (título principal del tab)
|
|
$font-size-h4: 1.25rem; // 20px (subtítulos grandes)
|
|
$font-size-h5: 1rem; // 16px (títulos de cards)
|
|
$font-size-h6: 0.875rem; // 14px
|
|
|
|
// Font Weights
|
|
// -----------------------------------------------------------------------------
|
|
$font-weight-light: 300;
|
|
$font-weight-normal: 400;
|
|
$font-weight-medium: 500;
|
|
$font-weight-semibold: 600;
|
|
$font-weight-bold: 700;
|
|
|
|
// Line Heights
|
|
// -----------------------------------------------------------------------------
|
|
$line-height-base: 1.5;
|
|
$line-height-tight: 1.2; // Para títulos
|
|
$line-height-relaxed: 1.6;
|
|
|
|
// =============================================================================
|
|
// ESPACIADO
|
|
// =============================================================================
|
|
|
|
// Spacing Scale (rem)
|
|
// -----------------------------------------------------------------------------
|
|
$spacing-0: 0;
|
|
$spacing-1: 0.25rem; // 4px
|
|
$spacing-2: 0.5rem; // 8px
|
|
$spacing-3: 1rem; // 16px
|
|
$spacing-4: 1.5rem; // 24px
|
|
$spacing-5: 3rem; // 48px
|
|
|
|
// Specific Usage
|
|
// -----------------------------------------------------------------------------
|
|
$spacing-field-margin: $spacing-2; // mb-2 en campos
|
|
$spacing-card-margin: $spacing-3; // mb-3 en cards
|
|
$spacing-header-margin: $spacing-4; // mb-4 en headers
|
|
$spacing-icon-margin: $spacing-2; // me-2 en iconos grandes
|
|
$spacing-icon-small-margin: $spacing-1; // me-1 en iconos pequeños
|
|
$spacing-card-padding: $spacing-3; // p-3 en card-body
|
|
$spacing-container-padding: $spacing-4; // py-4 en container
|
|
|
|
// =============================================================================
|
|
// LAYOUT
|
|
// =============================================================================
|
|
|
|
// Container
|
|
// -----------------------------------------------------------------------------
|
|
$container-max-width: 1400px;
|
|
$container-padding-x: 0.75rem;
|
|
|
|
// Grid
|
|
// -----------------------------------------------------------------------------
|
|
$grid-gutter-width: 1.5rem;
|
|
$grid-gutter-sm: 1rem; // g-3
|
|
$grid-gutter-xs: 0.5rem; // g-2
|
|
|
|
// Breakpoints
|
|
// -----------------------------------------------------------------------------
|
|
$breakpoint-xs: 0;
|
|
$breakpoint-sm: 576px;
|
|
$breakpoint-md: 768px;
|
|
$breakpoint-lg: 992px; // Punto de quiebre principal
|
|
$breakpoint-xl: 1200px;
|
|
$breakpoint-xxl: 1400px;
|
|
|
|
// =============================================================================
|
|
// BORDES
|
|
// =============================================================================
|
|
|
|
// Border Width
|
|
// -----------------------------------------------------------------------------
|
|
$border-width-thin: 1px;
|
|
$border-width-thick: 4px;
|
|
|
|
// Border Radius
|
|
// -----------------------------------------------------------------------------
|
|
$border-radius-sm: 0.25rem; // 4px
|
|
$border-radius: 0.375rem; // 6px (default Bootstrap)
|
|
$border-radius-lg: 0.5rem; // 8px
|
|
|
|
// Border Colors
|
|
// -----------------------------------------------------------------------------
|
|
$border-color: $color-neutral-200;
|
|
$border-color-card: $color-navy-primary;
|
|
$border-color-preview: $color-orange-primary;
|
|
|
|
// =============================================================================
|
|
// SOMBRAS
|
|
// =============================================================================
|
|
|
|
$shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
$shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
$shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
|
|
|
// =============================================================================
|
|
// COMPONENTES
|
|
// =============================================================================
|
|
|
|
// Cards
|
|
// -----------------------------------------------------------------------------
|
|
$card-border-width: 0;
|
|
$card-border-left-width: $border-width-thick;
|
|
$card-border-radius: $border-radius;
|
|
$card-shadow: $shadow-sm;
|
|
$card-padding: $spacing-card-padding;
|
|
$card-margin: $spacing-card-margin;
|
|
|
|
// Buttons
|
|
// -----------------------------------------------------------------------------
|
|
$btn-border-radius: $border-radius;
|
|
$btn-padding-y: 0.375rem;
|
|
$btn-padding-x: 0.75rem;
|
|
$btn-padding-y-sm: 0.25rem;
|
|
$btn-padding-x-sm: 0.5rem;
|
|
|
|
// Inputs
|
|
// -----------------------------------------------------------------------------
|
|
$input-border-radius: $border-radius;
|
|
$input-border-color: $color-neutral-300;
|
|
$input-focus-border-color: $color-orange-primary;
|
|
$input-padding-y: 0.375rem;
|
|
$input-padding-x: 0.75rem;
|
|
$input-padding-y-sm: 0.25rem;
|
|
$input-padding-x-sm: 0.5rem;
|
|
|
|
// Badges
|
|
// -----------------------------------------------------------------------------
|
|
$badge-font-size: 0.65rem;
|
|
$badge-padding-y: 0.25rem;
|
|
$badge-padding-x: 0.5rem;
|
|
|
|
// Progress Bar
|
|
// -----------------------------------------------------------------------------
|
|
$progress-height: 3px;
|
|
$progress-bar-bg: $color-orange-primary;
|
|
$progress-bar-warning: $color-warning;
|
|
$progress-bar-danger: $color-danger;
|
|
|
|
// =============================================================================
|
|
// TRANSICIONES
|
|
// =============================================================================
|
|
|
|
$transition-base: all 0.3s ease-in-out;
|
|
$transition-fast: all 0.15s ease-in-out;
|
|
$transition-slow: all 0.5s ease-in-out;
|
|
|
|
// =============================================================================
|
|
// Z-INDEX
|
|
// =============================================================================
|
|
|
|
$z-index-notification: 9999;
|
|
$z-index-modal: 1050;
|
|
$z-index-dropdown: 1000;
|
|
$z-index-sticky: 1020;
|
|
|
|
// =============================================================================
|
|
// MIXINS
|
|
// =============================================================================
|
|
|
|
// Media Query Mixins
|
|
// -----------------------------------------------------------------------------
|
|
@mixin media-xs {
|
|
@media (max-width: #{$breakpoint-sm - 1px}) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin media-sm {
|
|
@media (min-width: $breakpoint-sm) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin media-md {
|
|
@media (min-width: $breakpoint-md) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin media-lg {
|
|
@media (min-width: $breakpoint-lg) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin media-xl {
|
|
@media (min-width: $breakpoint-xl) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin media-xxl {
|
|
@media (min-width: $breakpoint-xxl) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// Component Mixins
|
|
// -----------------------------------------------------------------------------
|
|
@mixin card-base {
|
|
border: $card-border-width;
|
|
border-radius: $card-border-radius;
|
|
box-shadow: $card-shadow;
|
|
background-color: $bg-card;
|
|
margin-bottom: $card-margin;
|
|
}
|
|
|
|
@mixin card-border-left($color: $border-color-card) {
|
|
border-left: $border-width-thick solid $color;
|
|
}
|
|
|
|
@mixin text-truncate {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@mixin center-flex {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
// =============================================================================
|
|
// UTILITY CLASSES (Opcional - si no usas Bootstrap utilities)
|
|
// =============================================================================
|
|
|
|
// Solo descomentar si necesitas clases que no están en Bootstrap
|
|
|
|
/*
|
|
.text-navy {
|
|
color: $color-navy-primary;
|
|
}
|
|
|
|
.text-orange {
|
|
color: $color-orange-primary;
|
|
}
|
|
|
|
.bg-navy {
|
|
background-color: $color-navy-primary;
|
|
}
|
|
|
|
.bg-orange {
|
|
background-color: $color-orange-primary;
|
|
}
|
|
|
|
.border-navy {
|
|
border-color: $color-navy-primary !important;
|
|
}
|
|
|
|
.border-orange {
|
|
border-color: $color-orange-primary !important;
|
|
}
|
|
*/
|
|
|
|
// =============================================================================
|
|
// EJEMPLO DE USO
|
|
// =============================================================================
|
|
|
|
/*
|
|
// En tu archivo SCSS:
|
|
@import 'design-tokens-apus-admin';
|
|
|
|
.custom-header {
|
|
background: $bg-header;
|
|
color: white;
|
|
padding: $spacing-card-padding;
|
|
border-left: $border-width-thick solid $color-orange-primary;
|
|
|
|
h1 {
|
|
font-size: $font-size-h3;
|
|
font-weight: $font-weight-bold;
|
|
margin-bottom: $spacing-1;
|
|
}
|
|
}
|
|
|
|
.custom-card {
|
|
@include card-base;
|
|
@include card-border-left($color-navy-primary);
|
|
|
|
&.preview {
|
|
@include card-border-left($color-orange-primary);
|
|
}
|
|
}
|
|
|
|
.responsive-text {
|
|
font-size: $font-size-sm;
|
|
|
|
@include media-lg {
|
|
font-size: $font-size-base;
|
|
}
|
|
}
|
|
*/
|