{"_id":"@apiux-ds/cencosud-design-system","name":"@apiux-ds/cencosud-design-system","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@apiux-ds/cencosud-design-system","version":"1.0.0","description":"Sistema de diseño agnóstico basado en la identidad visual de Cencosud (Demo) - Framework agnostic design system","main":"dist/cencosud.css","style":"dist/cencosud.css","scripts":{"build":"npm run build:tokens && npm run build:css","build:tokens":"node scripts/build-tokens.js","build:css":"node scripts/build-css.js","dev":"npm run build:css","format":"prettier --write \"src/**/*.{css,json,md}\"","test":"echo \"Tests not implemented yet\"","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/apiux-ds/cencosud-design-system.git"},"keywords":["design-system","css","design-tokens","cencosud","apiux","apiux-ds","ui","components","framework-agnostic","retail","demo"],"author":{"name":"Apiux"},"license":"MIT","bugs":{"url":"https://github.com/apiux-ds/cencosud-design-system/issues"},"homepage":"https://github.com/apiux-ds/cencosud-design-system#readme","devDependencies":{"autoprefixer":"^10.4.0","cssnano":"^6.0.0","postcss":"^8.4.0","postcss-cli":"^11.0.0","postcss-import":"^16.0.0","prettier":"^3.0.0"},"peerDependencies":{},"exports":{".":"./dist/cencosud.css","./tokens":"./dist/tokens/index.js","./css":"./dist/cencosud.css","./variables":"./dist/variables.css","./components/*":"./dist/components/*.css","./package.json":"./package.json"},"publishConfig":{"access":"public"},"_id":"@apiux-ds/cencosud-design-system@1.0.0","_nodeVersion":"24.7.0","_npmVersion":"11.5.1","dist":{"integrity":"sha512-+GVNtS7byvgSmvTSKmr8RUkJ0Ot3fakMxBNxb5wHfsFrPL9jOtJsztsNeoWGN4FuVX5JaK40YHtJ+x2vFsAAtA==","shasum":"42165a46f33b7a85570607564d110d6bbeae9cd5","tarball":"https://registry.npmjs.org/@apiux-ds/cencosud-design-system/-/cencosud-design-system-1.0.0.tgz","fileCount":17,"unpackedSize":78155,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICzs9Wnc08D+oj0Pa+VkUTOcxWhS+JT1C6tJrKFlkCJzAiEAz+QQHqseEDnuRnFRgko+MaqzkTfTc+3jRPWtfk38Iyw="}]},"_npmUser":{"name":"dkangme2","email":"dkangme@gmail.com"},"directories":{},"maintainers":[{"name":"dkangme2","email":"dkangme@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cencosud-design-system_1.0.0_1778421191192_0.5083876524487196"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-10T13:53:11.082Z","1.0.0":"2026-05-10T13:53:11.353Z","modified":"2026-05-10T13:53:11.598Z"},"maintainers":[{"name":"dkangme2","email":"dkangme@gmail.com"}],"description":"Sistema de diseño agnóstico basado en la identidad visual de Cencosud (Demo) - Framework agnostic design system","homepage":"https://github.com/apiux-ds/cencosud-design-system#readme","keywords":["design-system","css","design-tokens","cencosud","apiux","apiux-ds","ui","components","framework-agnostic","retail","demo"],"repository":{"type":"git","url":"git+https://github.com/apiux-ds/cencosud-design-system.git"},"author":{"name":"Apiux"},"bugs":{"url":"https://github.com/apiux-ds/cencosud-design-system/issues"},"license":"MIT","readme":"# Apiux - Cencosud Design System\n\nSistema de diseño agnóstico basado en la identidad visual de Cencosud. Compatible con React, Vue, Angular, vanilla JavaScript y cualquier framework.\n\n> **Nota:** Este es un proyecto de demostración creado por Apiux.\n\n## 🎯 Características\n\n- ✅ **Framework Agnostic**: Funciona con cualquier tecnología web\n- 🎨 **Design Tokens**: Valores de diseño reutilizables (colores, tipografía, espaciado)\n- 📦 **Componentes CSS**: Componentes puros en CSS sin dependencias\n- 🌓 **Dark Mode**: Soporte nativo para tema oscuro\n- ♿ **Accesible**: Cumple con estándares WCAG 2.1\n- 📱 **Responsive**: Mobile-first design\n- 🚀 **Ligero**: Sin dependencias de JavaScript para estilos base\n- 🔧 **Customizable**: Fácil de personalizar mediante CSS variables\n\n## 📦 Instalación\n\n```bash\nnpm install @apiux-ds/cencosud-design-system\n```\n\nO con yarn:\n\n```bash\nyarn add @apiux-ds/cencosud-design-system\n```\n\n## 🚀 Uso Rápido\n\n### 1. Importar CSS\n\n```javascript\n// En tu archivo principal (main.js, index.js, App.js)\nimport '@apiux-ds/cencosud-design-system/dist/cencosud.css';\n```\n\nO directamente en HTML:\n\n```html\n\n```\n\n### 2. Usar componentes\n\n```html\n\n\n\n\n
\n
\n \"Producto\"\n
\n
\n

Título del producto

\n

Descripción breve del producto.

\n
\n
\n Ver más\n
\n
\n```\n\n## 🎨 Design Tokens\n\nEl sistema utiliza CSS custom properties (variables) que puedes personalizar:\n\n```css\n:root {\n /* Colores principales */\n --apiux-color-primary: #dc2626;\n --apiux-color-secondary: #64748b;\n \n /* Tipografía */\n --apiux-font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;\n --apiux-font-size-base: 1rem;\n \n /* Espaciado */\n --apiux-spacing-4: 1rem;\n --apiux-spacing-6: 1.5rem;\n \n /* Bordes */\n --apiux-radius-md: 0.375rem;\n \n /* Sombras */\n --apiux-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n}\n```\n\n### Personalización\n\nPuedes sobrescribir cualquier variable:\n\n```css\n:root {\n --apiux-color-primary: #your-brand-color;\n --apiux-font-family-primary: 'Your Font', sans-serif;\n}\n```\n\n## 📚 Componentes Disponibles\n\n### Botones\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n### Cards\n\n```html\n\n
\n
\n \n
\n
\n

Título

\n

Descripción

\n
\n
\n\n\n
\n \n
\n\n\n
\n \n
\n```\n\n### Grid de Cards\n\n```html\n
\n
...
\n
...
\n
...
\n
\n```\n\n## 🌓 Modo Oscuro\n\nEl sistema soporta modo oscuro automáticamente:\n\n```html\n\n\n \n\n\n\n\n \n\n```\n\nO vía JavaScript:\n\n```javascript\n// Activar modo oscuro\ndocument.documentElement.setAttribute('data-theme', 'dark');\n\n// Activar modo claro\ndocument.documentElement.setAttribute('data-theme', 'light');\n\n// Usar preferencia del sistema\ndocument.documentElement.setAttribute('data-theme', 'auto');\n```\n\n## 🔧 Uso con Frameworks\n\n### React\n\n```jsx\nimport '@apiux-ds/cencosud-design-system/dist/cencosud.css';\n\nfunction App() {\n return (\n \n );\n}\n```\n\n### Vue\n\n```vue\n\n\n\n```\n\n### Angular\n\n```typescript\n// En angular.json\n\"styles\": [\n \"node_modules/@apiux-ds/cencosud-design-system/dist/cencosud.css\",\n \"src/styles.css\"\n]\n```\n\n## 📖 Documentación Completa\n\n- [Especificación de Componentes](./docs/COMPONENTS.md)\n- [Design Tokens](./src/tokens/)\n- [Ejemplos](./examples/)\n\n## 🏗️ Estructura del Proyecto\n\n```\ncencosud-design-system/\n├── src/\n│ ├── tokens/ # Design tokens (JSON + CSS)\n│ │ ├── colors.json\n│ │ ├── typography.json\n│ │ ├── spacing.json\n│ │ └── variables.css\n│ ├── components/ # Componentes CSS\n│ │ ├── button.css\n│ │ ├── card.css\n│ │ └── ...\n│ └── utils/ # Utilidades\n├── docs/ # Documentación\n│ └── COMPONENTS.md\n├── examples/ # Ejemplos de uso\n├── dist/ # Build output (generado)\n└── package.json\n```\n\n## 🛠️ Development\n\n```bash\n# Instalar dependencias\nnpm install\n\n# Modo desarrollo (watch)\nnpm run dev\n\n# Build para producción\nnpm run build\n\n# Formatear código\nnpm run format\n\n# Lint\nnpm run lint\n```\n\n## 🤝 Contribuir\n\nLas contribuciones son bienvenidas. Por favor:\n\n1. Fork el repositorio\n2. Crea una rama para tu feature (`git checkout -b feature/AmazingFeature`)\n3. Commit tus cambios (`git commit -m 'Add some AmazingFeature'`)\n4. Push a la rama (`git push origin feature/AmazingFeature`)\n5. Abre un Pull Request\n\n## 📄 Licencia\n\nMIT © Apiux\n\n## 🔗 Links\n\n- [Website](https://www.cencosud.com)\n- [Documentación](./docs/)\n- [Issues](https://github.com/apiux/cencosud-design-system/issues)\n\n---\n\nHecho con ❤️ por Apiux basado en Cencosud\n","readmeFilename":"README.md","_rev":"1-12ef892c0e85e143fc5cc0cb1936cb91"}