@apiux-ds/cencosud-design-system

v1.0.0

Published

2 months ago

Sistema de diseño agnóstico basado en la identidad visual de Cencosud (Demo) - Framework agnostic design system

0High
0Medium
0Low

dkangme2

design-system css design-tokens cencosud apiux apiux-ds ui components framework-agnostic retail demo

Apiux - Cencosud Design System

Sistema de diseño agnóstico basado en la identidad visual de Cencosud. Compatible con React, Vue, Angular, vanilla JavaScript y cualquier framework.

Nota: Este es un proyecto de demostración creado por Apiux.

🎯 Características

✅ Framework Agnostic: Funciona con cualquier tecnología web
🎨 Design Tokens: Valores de diseño reutilizables (colores, tipografía, espaciado)
📦 Componentes CSS: Componentes puros en CSS sin dependencias
🌓 Dark Mode: Soporte nativo para tema oscuro
♿ Accesible: Cumple con estándares WCAG 2.1
📱 Responsive: Mobile-first design
🚀 Ligero: Sin dependencias de JavaScript para estilos base
🔧 Customizable: Fácil de personalizar mediante CSS variables

📦 Instalación

npm install @apiux-ds/cencosud-design-system

O con yarn:

yarn add @apiux-ds/cencosud-design-system

🚀 Uso Rápido

1. Importar CSS

// En tu archivo principal (main.js, index.js, App.js)
import '@apiux-ds/cencosud-design-system/dist/cencosud.css';

O directamente en HTML:

<link rel="stylesheet" href="node_modules/@apiux-ds/cencosud-design-system/dist/cencosud.css">

2. Usar componentes

<!-- Botón primario -->
<button class="apiux-button cds-button--primary">
  Comprar ahora
</button>

<!-- Card con imagen -->
<div class="apiux-card">
  <div class="apiux-card__image-container cds-card__image-container--16-9">
    <img src="product.jpg" alt="Producto" class="apiux-card__image">
  </div>
  <div class="apiux-card__content">
    <h3 class="apiux-card__title">Título del producto</h3>
    <p class="apiux-card__description">Descripción breve del producto.</p>
  </div>
  <div class="apiux-card__actions">
    <a href="#" class="apiux-card__link">Ver más</a>
  </div>
</div>

🎨 Design Tokens

El sistema utiliza CSS custom properties (variables) que puedes personalizar:

:root {
  /* Colores principales */
  --apiux-color-primary: #dc2626;
  --apiux-color-secondary: #64748b;
  
  /* Tipografía */
  --apiux-font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --apiux-font-size-base: 1rem;
  
  /* Espaciado */
  --apiux-spacing-4: 1rem;
  --apiux-spacing-6: 1.5rem;
  
  /* Bordes */
  --apiux-radius-md: 0.375rem;
  
  /* Sombras */
  --apiux-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

Personalización

Puedes sobrescribir cualquier variable:

:root {
  --apiux-color-primary: #your-brand-color;
  --apiux-font-family-primary: 'Your Font', sans-serif;
}

📚 Componentes Disponibles

Botones

<!-- Variantes -->
<button class="apiux-button cds-button--primary">Primario</button>
<button class="apiux-button cds-button--secondary">Secundario</button>
<button class="apiux-button cds-button--ghost">Ghost</button>

<!-- Tamaños -->
<button class="apiux-button cds-button--primary cds-button--small">Pequeño</button>
<button class="apiux-button cds-button--primary">Mediano</button>
<button class="apiux-button cds-button--primary cds-button--large">Grande</button>

<!-- Estados -->
<button class="apiux-button cds-button--primary" disabled>Deshabilitado</button>
<button class="apiux-button cds-button--primary cds-button--loading">Cargando</button>

Cards

<!-- Card vertical (default) -->
<div class="apiux-card">
  <div class="apiux-card__image-container">
    <img src="image.jpg" class="apiux-card__image">
  </div>
  <div class="apiux-card__content">
    <h3 class="apiux-card__title">Título</h3>
    <p class="apiux-card__description">Descripción</p>
  </div>
</div>

<!-- Card horizontal -->
<div class="apiux-card cds-card--horizontal">
  <!-- contenido -->
</div>

<!-- Card destacada con overlay -->
<div class="apiux-card cds-card--featured">
  <!-- contenido -->
</div>

Grid de Cards

<div class="apiux-card-grid cds-card-grid--3-col">
  <div class="apiux-card">...</div>
  <div class="apiux-card">...</div>
  <div class="apiux-card">...</div>
</div>

🌓 Modo Oscuro

El sistema soporta modo oscuro automáticamente:

<!-- Activar modo oscuro manualmente -->
<html data-theme="dark">
  <!-- Tu contenido -->
</html>

<!-- Usar preferencia del sistema -->
<html data-theme="auto">
  <!-- Tu contenido -->
</html>

O vía JavaScript:

// Activar modo oscuro
document.documentElement.setAttribute('data-theme', 'dark');

// Activar modo claro
document.documentElement.setAttribute('data-theme', 'light');

// Usar preferencia del sistema
document.documentElement.setAttribute('data-theme', 'auto');

🔧 Uso con Frameworks

React

import '@apiux-ds/cencosud-design-system/dist/cencosud.css';

function App() {
  return (
    <button className="cds-button cds-button--primary">
      Click me
    </button>
  );
}

Vue

<template>
  <button class="apiux-button cds-button--primary">
    Click me
  </button>
</template>

<style>
@import '@apiux-ds/cencosud-design-system/dist/cencosud.css';
</style>

Angular

// En angular.json
"styles": [
  "node_modules/@apiux-ds/cencosud-design-system/dist/cencosud.css",
  "src/styles.css"
]

📖 Documentación Completa

🏗️ Estructura del Proyecto

cencosud-design-system/
├── src/
│   ├── tokens/              # Design tokens (JSON + CSS)
│   │   ├── colors.json
│   │   ├── typography.json
│   │   ├── spacing.json
│   │   └── variables.css
│   ├── components/          # Componentes CSS
│   │   ├── button.css
│   │   ├── card.css
│   │   └── ...
│   └── utils/               # Utilidades
├── docs/                    # Documentación
│   └── COMPONENTS.md
├── examples/                # Ejemplos de uso
├── dist/                    # Build output (generado)
└── package.json

🛠️ Development

# Instalar dependencias
npm install

# Modo desarrollo (watch)
npm run dev

# Build para producción
npm run build

# Formatear código
npm run format

# Lint
npm run lint

🤝 Contribuir

Las contribuciones son bienvenidas. Por favor:

Fork el repositorio
Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
Commit tus cambios (git commit -m 'Add some AmazingFeature')
Push a la rama (git push origin feature/AmazingFeature)
Abre un Pull Request

📄 Licencia

MIT © Apiux

🔗 Links

Hecho con ❤️ por Apiux basado en Cencosud