@slep-colchagua/design-system

Sistema de diseño institucional del Servicio Local de Educación Pública Colchagua (SLEP Colchagua), Chile.

Instalación

npm install @slep-colchagua/design-system

Uso

Con Vite / webpack / cualquier bundler

// En tu entry point (main.js, main.ts, etc.)
import '@slep-colchagua/design-system';

/* O en tu CSS principal */
@import '@slep-colchagua/design-system';

/* Solo tokens (sin kit de componentes) */
@import '@slep-colchagua/design-system/tokens';

/* Kit de sitio público completo */
@import '@slep-colchagua/design-system/tokens';
@import '@slep-colchagua/design-system/components';

Con HTML plano

<link rel="stylesheet"
  href="node_modules/@slep-colchagua/design-system/tokens/colors_and_type.css">

Logo

<img src="node_modules/@slep-colchagua/design-system/assets/logo-slep-colchagua.webp"
     alt="SLEP Colchagua">

Contenido del paquete

@slep-colchagua/design-system/
├── tokens/
│   └── colors_and_type.css   ← tokens CSS (colores, tipografía, spacing, motion…)
├── fonts/
│   ├── MuseoSans-100.woff
│   ├── MuseoSans-500.woff
│   ├── MuseoSans-700.woff
│   └── MuseoSans-900.woff
├── assets/
│   └── logo-slep-colchagua.webp
└── components/
    └── kit.css               ← componentes del sitio público

Paleta de colores

| Token | Valor | Uso | |-------|-------|-----| | --slep-navy | #25306B | Dominante institucional | | --slep-royal | #006BB9 | Interactivo / acento | | --slep-coral | #FF1D3D | Alerta / énfasis | | --slep-soft-white | #EDF0F5 | Fondos / espacio negativo |

Iconos (incluidos en el paquete)

// Material Icons — Filled + Outlined (fuentes locales, sin CDN)
import '@slep-colchagua/design-system/icons';

// Íconos de gobierno chileno (ClaveÚnica, ChileAtiende, DocDigital)
import '@slep-colchagua/design-system/icons/government';

/* En CSS */
@import '@slep-colchagua/design-system/icons';
@import '@slep-colchagua/design-system/icons/government';

<!-- HTML plano -->
<link rel="stylesheet" href="node_modules/@slep-colchagua/design-system/icons/material-icons.css">
<link rel="stylesheet" href="node_modules/@slep-colchagua/design-system/icons/government.css">

<!-- Uso -->
<span class="material-icons icon-sm">school</span>
<span class="material-icons-outlined icon-md">assignment</span>
<span class="icon-claveunica s24">CU</span>
<span class="icon-chileatiende s24">CA</span>
<span class="icon-docdigital s24">DD</span>

Versioning

Este paquete sigue Semantic Versioning.

• PATCH (1.0.x): correcciones de bugs, ajustes menores de tokens.
• MINOR (1.x.0): nuevos tokens o componentes, sin romper existentes.
• MAJOR (x.0.0): cambios que rompen la API (renombramiento de tokens, eliminación de componentes).