@up_si_vale/sivale-design-styles

v1.0.17

Published

7 days ago

Biblioteca de estilos SCSS bajo el estandar WCAG para la landing de Sí vale MX

Downloads

529

0High
0Medium
0Low

scss css darkmode nextjs inputs alerts cards

@up_si_vale/sivale-design-styles

Biblioteca de estilos SCSS bajo el estandar WCAG para proyectos Si Vale MX.

Componentes incluidos

| Categoria | Componentes | |-----------|-------------| | Fundamentos | Variables (paleta, tokens), Dark mode, Tipografia, Iconos | | Layout | Grid 12 columnas, Container, Row/Col responsive, Utilities (spacing, display, flex) | | Formularios | Input, Select, Select nativo, Multiselect, Checkbox, Radio, Phone input, Date picker, Copy input | | Botones | Sistema .sv-button (primary, secondary, tertiary, orange, black), Sistema .svu-btn (primary, secondary, outline, ghost, danger, success) con loading state | | Cards | Card base, Card highlight, Card product, Card post | | Datos | Table, Order list, Stepper, Badge | | Feedback | Alert, Snackbar (success, error, warning, info), Tooltip, Modal dialog, Skeleton loader | | Navegacion | Navbar con mega menu | | Media | Collage de imagenes, Product slide | | Carga | Loader pantalla completa con dots animados |

Instalacion

npm install @up_si_vale/sivale-design-styles

Uso

Opcion 1 — CSS compilado (recomendado para inicio rapido)

Importar el CSS compilado en tu archivo de estilos globales:

// styles.scss o styles.css
@import '@up_si_vale/sivale-design-styles/dist/index.css';

O en Angular (angular.json):

{
  "styles": [
    "node_modules/@up_si_vale/sivale-design-styles/dist/index.css",
    "src/styles.scss"
  ]
}

Opcion 2 — SCSS completo

Importar todos los modulos SCSS para tener acceso a variables y mixins:

@import '@up_si_vale/sivale-design-styles/dist/scss/index';

Opcion 3 — Modulos individuales

Importar solo los modulos que necesites:

// Solo variables y tipografia
@use '@up_si_vale/sivale-design-styles/scss/variables';
@use '@up_si_vale/sivale-design-styles/scss/typography';

// Solo botones y formularios
@use '@up_si_vale/sivale-design-styles/scss/button';
@use '@up_si_vale/sivale-design-styles/scss/input';
@use '@up_si_vale/sivale-design-styles/scss/form';

JavaScript — Mega Menu Toggle

import { initMegaMenuToggle } from '@up_si_vale/sivale-design-styles/mega-menu-toggle';

initMegaMenuToggle();

Dark Mode

Agregar el atributo data-theme="dark" al elemento raiz:

<html data-theme="dark">

Las variables CSS se actualizan automaticamente.

Grid System

Sistema de 12 columnas responsive con breakpoints: xs, sm (576px), md (768px), lg (992px), xl (1200px), xxl (1400px).

<div class="container">
  <div class="row gap-3">
    <div class="col-12 col-md-6 col-lg-4">Columna 1</div>
    <div class="col-12 col-md-6 col-lg-4">Columna 2</div>
    <div class="col-12 col-lg-4">Columna 3</div>
  </div>
</div>

Utilidades incluidas: d-flex, d-none, d-block, justify-content-*, align-items-*, m-*, p-*, gap-*, w-*, h-*, y variantes responsive (d-md-none, d-lg-flex, etc).

Publicacion

Requisitos previos

Node.js >= 18
npm >= 9
Acceso al registry de npm (o registry privado configurado en .npmrc)

Pasos para publicar una nueva version

# 1. Asegurar que estas en la rama correcta y con cambios committeados
git status

# 2. Actualizar la version en package.json
#    - patch (1.0.16 → 1.0.17): correcciones de bugs
#    - minor (1.0.16 → 1.1.0): nuevos componentes o features
#    - major (1.0.16 → 2.0.0): cambios que rompen compatibilidad
npm version patch   # o minor / major

# 3. Compilar (se ejecuta automaticamente con prepublishOnly)
npm run build

# 4. Verificar el contenido que se publicara
npm pack --dry-run

# 5. Publicar al registry
npm publish --access public

# 6. Push del tag de version a git
git push && git push --tags

Publicar a un registry privado (Azure Artifacts, etc)

Crear o editar .npmrc en la raiz del proyecto:

registry=https://pkgs.dev.azure.com/<org>/<project>/_packaging/<feed>/npm/registry/
always-auth=true

Autenticarse:

npx vsts-npm-auth -config .npmrc

Luego publicar normalmente:

npm publish

Verificar la publicacion

# Ver la version publicada
npm view @up_si_vale/sivale-design-styles version

# Instalar en otro proyecto para probar
npm install @up_si_vale/sivale-design-styles@latest

Build local

# Instalar dependencias
npm install

# Compilar SCSS a CSS + copiar assets
npm run build

El build genera:

dist/
├── index.css          # CSS compilado (todo incluido)
├── index.css.map      # Source map
├── scss/              # Archivos SCSS individuales (para imports selectivos)
├── js/                # JavaScript (mega-menu-toggle)
└── assets/            # Iconos SVG

Estructura del proyecto

src/
├── index.scss              # Entry point (forwards de todos los modulos)
├── index.js                # JS exports
├── _palette.scss           # Paleta de colores
├── _variables.scss         # Design tokens (CSS custom properties)
├── _variables.dark.scss    # Overrides dark mode
├── _typography.scss        # Tipografia (DM Sans, Quicksand)
├── _utilities.scss         # Grid, spacing, display, flex utilities
├── _button.scss            # Botones (sv-button + svu-btn)
├── _input.scss             # Inputs
├── _form.scss              # Layout de formularios
├── _select.scss            # Select custom
├── _select-native.scss     # Select nativo
├── _multiselect.scss       # Multi-select con checkboxes
├── _checkbox.scss          # Checkbox custom
├── _radio.scss             # Radio button custom
├── _date-picker.scss       # Date picker con calendario
├── _phone-input.scss       # Input de telefono con pais
├── _copy-input.scss        # Input de copiar al portapapeles
├── _loader.scss            # Loader pantalla completa
├── _card.scss              # Card base
├── _card-highlight.scss    # Card highlight
├── _card-product.scss      # Card producto
├── _card-post.scss         # Card post/blog
├── _table.scss             # Tabla con paginacion
├── _order-list.scss        # Lista de ordenes
├── _stepper-orderlist.scss # Stepper/progreso
├── _alert.scss             # Alertas
├── _snackbar.scss          # Notificaciones toast
├── _tooltip.scss           # Tooltips
├── _modal-dialog.scss      # Modales
├── _badge.scss             # Badges
├── _skeleton.scss          # Skeleton loaders
├── _navbar.scss            # Barra de navegacion
├── _icons.scss             # Sistema de iconos
├── _collage.scss           # Collage de imagenes
├── _faq.scss               # Acordeon FAQ
├── _product-slide.scss     # Producto con slide
├── assets/
│   └── icons/              # 27 iconos SVG
└── js/
    └── mega-menu-toggle.js # Toggle del mega menu

Contribuir

Crear una rama desde main con el prefijo del tipo de cambio (feat/, fix/, refactor/)
Agregar el nuevo archivo SCSS en src/ con prefijo _ (ej: _mi-componente.scss)
Registrarlo en src/index.scss con @forward 'mi-componente'
Compilar y verificar: npm run build
Crear Pull Request

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@up_si_vale/sivale-design-styles

Componentes incluidos

Instalacion

Uso

Opcion 1 — CSS compilado (recomendado para inicio rapido)

Opcion 2 — SCSS completo

Opcion 3 — Modulos individuales

JavaScript — Mega Menu Toggle

Dark Mode

Grid System

Publicacion

Requisitos previos

Pasos para publicar una nueva version

Publicar a un registry privado (Azure Artifacts, etc)

Verificar la publicacion

Build local

Estructura del proyecto

Contribuir