Los nombres y valores se sincronizan con src/index.css de la Intranet. Copia la variable o la clase de ejemplo; este producto no tiene modo oscuro.
Paleta
Los 15 colores reales del sistema. Todos los demás tokens de color apuntan a uno de estos: si un color cambia, cambia solo aquí.
| Muestra | Token | Valor | Uso | Ejemplo |
|---|---|---|---|---|
--palette-black | #1D1E20 | Texto principal y fondos institucionales | bg-[color:var(--palette-black)] | |
--palette-graphite | #3A3B3D | Final del degradado institucional | bg-[color:var(--palette-graphite)] | |
--palette-gray-600 | #5D6065 | Texto secundario | bg-[color:var(--palette-gray-600)] | |
--palette-warm-gray | #C7C2BA | Bordes y separadores | bg-[color:var(--palette-warm-gray)] | |
--palette-gray-200 | #E3E1DD | Superficie secundaria | bg-[color:var(--palette-gray-200)] | |
--palette-surface | #F5F4F1 | Paneles y superficie atenuada | bg-[color:var(--palette-surface)] | |
--palette-white | #FFFFFF | Fondo y texto sobre oscuro | bg-[color:var(--palette-white)] | |
--palette-celeste | #6493B5 | Acciones, íconos y foco | bg-[color:var(--palette-celeste)] | |
--palette-celeste-dark | #385F82 | Botón primario y fondos con texto blanco | bg-[color:var(--palette-celeste-dark)] | |
--palette-celeste-light | #A9C3D9 | Bloques secundarios | bg-[color:var(--palette-celeste-light)] | |
--palette-celeste-tint | #E4ECF3 | Fila seleccionada | bg-[color:var(--palette-celeste-tint)] | |
--palette-red | #B62020 | Error y eliminar | bg-[color:var(--palette-red)] | |
--palette-red-tint | #FCEAEC | Urgencias | bg-[color:var(--palette-red-tint)] | |
--palette-green | #16A249 | Aprobado | bg-[color:var(--palette-green)] | |
--palette-amber | #F2B90D | Pendiente | bg-[color:var(--palette-amber)] |
Roles
Un nombre por rol. Usa la clase de Tailwind cuando exista; la variable, en estilos en línea.
| Muestra | Rol | Variable | Clase | Color de paleta |
|---|---|---|---|---|
| Fondo | --background | bg-background | white | |
| Texto | --foreground | text-foreground | black | |
| Texto secundario | --muted-foreground | text-muted-foreground | gray-600 | |
| Fondo atenuado | --muted | bg-muted | surface | |
| Superficie secundaria | --secondary | bg-secondary | gray-200 | |
| Borde | --border | border-border | warm-gray | |
| Acento (solo interacción) | --accent | bg-accent / text-accent | celeste | |
| Texto inverso | --primary-foreground | text-primary-foreground | white | |
| Acento fuerte (fondos con texto blanco) | --color-accent-strong | bg-[color:var(--color-accent-strong)] | celeste-dark | |
| Acento claro | --color-accent-light | bg-[color:var(--color-accent-light)] | celeste-light | |
| Acento tinte (fila seleccionada) | --color-accent-tint | bg-[color:var(--color-accent-tint)] | celeste-tint | |
| Error | --destructive | bg-destructive / text-destructive | red | |
| Éxito | --success | bg-success | green | |
| Advertencia | --warning | bg-warning | amber | |
| Urgencias (superficie) | --color-emergency-surface | bg-[color:var(--color-emergency-surface)] | red-tint | |
| Degradado institucional | --card-bg-institutional | [background:var(--card-bg-institutional)] | black → graphite |
Alias técnicos. --card → --background, --popover → --background, --card-foreground → --foreground, --popover-foreground → --foreground, --primary → --foreground, --secondary-foreground → --foreground, --accent-foreground → --primary-foreground, --destructive-foreground → --primary-foreground, --success-foreground → --primary-foreground, --input → --border, --ring → --accent, --wireframe-placeholder → --muted. Existen solo porque los exigen Tailwind y los componentes ui; no se usan en código nuevo.
Transparencias
| Muestra | Token | Valor | Uso |
|---|---|---|---|
--on-dark-text | rgba(255, 255, 255, 0.8) | Texto secundario sobre fondo oscuro | |
--on-dark-line | rgba(255, 255, 255, 0.2) | Divisores, bordes y hover sobre fondo oscuro | |
--on-light-line | rgba(29, 30, 32, 0.12) | Divisores, bordes y hover sobre fondo claro |
Badges de estado
| Muestra | Token | Valor | Uso | Ejemplo |
|---|---|---|---|---|
--badge-aprobado-bg | color-mix(in srgb, var(--palette-green) 30%, var(--palette-white)) | Aprobado / inscripción abierta | bg-[color:var(--badge-aprobado-bg)] | |
--badge-reprobado-bg | color-mix(in srgb, var(--palette-red) 30%, var(--palette-white)) | Reprobado | bg-[color:var(--badge-reprobado-bg)] | |
--badge-pendiente-bg | color-mix(in srgb, var(--palette-amber) 30%, var(--palette-white)) | Pendiente | bg-[color:var(--badge-pendiente-bg)] |
Encabezado
| Muestra | Token | Valor | Uso | Ejemplo |
|---|---|---|---|---|
--header-overlay | linear-gradient(rgba(29,30,32,0.28), rgba(29,30,32,0.28)) | Capa de contraste del encabezado | [background:var(--header-overlay)] | |
| ↕ | --header-padding-y | 20px | Espaciado vertical del encabezado: 20px; 72px desde 768px | py-[var(--header-padding-y)] |
| ↕ | --tabbar-padding-y | 16px | Espaciado vertical de la barra de pestañas: 16px; 28px desde 768px | py-[var(--tabbar-padding-y)] |
Tipografía
Roboto se usa para todo el texto de la Intranet. Las barras de título de las tarjetas usan la sans-serif del sistema, controlada por Ellucian.
| Muestra | Token | Valor | Uso | Ejemplo |
|---|---|---|---|---|
| Roboto | --font-body | 'Roboto', system-ui, -apple-system, sans-serif | Todo el texto de la Intranet | font-[family-name:var(--font-body)] |
Título de página
30px·Semibold·Encabezado de vista interna
Título de sección
20px·Semibold·Bloques dentro de una vista
Subtítulo
16px·Medium·Agrupaciones y etiquetas de grupo
Texto de contenido
14px·Regular·Listas, tablas, párrafos
Texto de apoyo
11px·Regular·Subtítulos, metadatos, filtros
Etiqueta de estado
10px·Medium·Badges y estados
Radio y sombra
| Muestra | Token | Valor | Uso | Ejemplo |
|---|---|---|---|---|
| 6px | --radius | 0.375rem | Esquinas de tarjeta | rounded-[var(--radius)] |
| Sombra de tarjeta | --card-shadow | 0 1px 2px hsl(220 5% 12% / 0.08), 0 4px 16px -8px hsl(220 5% 12% / 0.16) | Elevación de tarjetas | shadow-[var(--card-shadow)] |
Equivalencias v3.2
Nombres retirados en la versión 3.2 y su reemplazo. Los nombres antiguos ya no existen en el código.
| Nombre retirado | Usar en su lugar |
|---|---|
--color-accent-contrast | --color-accent-strong |
--color-accent-subtle | --background |
--card-bg-subtle | --background |
--color-canvas-muted | --muted |
--color-canvas | --background |
--color-primary-dark | --foreground |
--badge-status-text | --foreground |
--color-neutral | --border |
--color-faculty-accent-fg | --primary-foreground |
--wireframe-solid-fg | --primary-foreground |
--color-text-inverse | --primary-foreground |
--color-faculty-accent | --accent |
--student-faculty-accent | --accent |
--color-accent | --accent |
--table-row-selected | --color-accent-tint |
--wireframe-card-border-top | --on-light-line |
--wireframe-subtle-divider | --on-light-line |
--wireframe-subtle-hover | --on-light-line |
--wireframe-subtle-text-secondary | --muted-foreground |
--wireframe-solid-text-secondary | --on-dark-text |
--wireframe-solid-divider | --on-dark-line |
--wireframe-solid-hover | --on-dark-line |
--card-bg-gradient | --card-bg-institutional |
--palette-gray-100 | --palette-surface |
--font-heading | --font-body |
--font-mono | --font-body |