@lemontech/sour-theme

Design system basado en Ant Design que exporta tema, tokens y temas por producto para proyectos Lemontech.

📖 Documentación en Storybook

| Sección | Link | | --- | --- | | Instalación y uso | Getting Started | | Tokens de diseño | Tokens | | Integración Tailwind CSS | Tailwind CSS | | Paleta de colores | Semantic Colors | | Componentes | Components | | Arquitectura y mantenibilidad | Maintainability |

Versiones requeridas

| Herramienta | Versión | |-------------|-----------| | Node.js | lts/krypton (>=20.19.0) | | pnpm | 9.0.0 | | Ant Design | >=6.0.0 |

Levantar el proyecto

# 1. Usar la versión correcta de Node
nvm install
nvm use

# 2. Instalar dependencias
pnpm install

# 3. Levantar Storybook en http://localhost:6006
pnpm storybook

Scripts disponibles

| Script | Descripción | |---------------------|----------------------------------------------------------| | pnpm storybook | Inicia Storybook en modo desarrollo (puerto 6006) | | pnpm build:lib | Compila la librería en dist/ (ESM + CJS + tipos) | | pnpm build-storybook | Genera el build estático de Storybook | | pnpm lint | Corre ESLint sobre todo el proyecto | | pnpm pack --dry-run | Previsualiza qué archivos se publicarían en npm |

Instalación como dependencia

npm install @lemontech/sour-theme
# o
pnpm add @lemontech/sour-theme

Requiere antd >= 6.0.0, @ant-design/icons >= 6.0.0, react >= 18 como peer dependencies.

Fuente requerida

El tema usa Open Sans como fuente principal. Agrégala en tu index.html:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
  rel="stylesheet"
/>

Uso

Tema por producto

import { lemonsuiteTheme } from '@lemontech/sour-theme'
import { ConfigProvider } from 'antd'

export default function App() {
  return (
    <ConfigProvider theme={lemonsuiteTheme}>
      {/* tu app */}
    </ConfigProvider>
  )
}

Temas disponibles:

| Export | Producto | Color primario | |----------------------------|---------------------|----------------| | lemonsuiteTheme | LemonSuite | Azure | | casetrackingFirmsTheme | Casetracking Firms | Orange | | casetrackingTheme | Casetracking | Purple | | rawTheme | Base (sin primario) | — |

Tokens de diseño

import { tokens } from '@lemontech/sour-theme'

const { color, spacing, fontSize } = tokens

const Component = () => (
  <div style={{
    color: color.azure[500],
    padding: spacing.m,
    fontSize: fontSize.s,
  }}>
    Componente con tokens del tema
  </div>
)

Grupos de tokens disponibles: color, spacing, fontSize, lineHeight, letterSpacing, radius, lineWidth, fontWeight, fontFamily.

Tailwind CSS

El paquete incluye archivos CSS pre-generados para Tailwind v4 con tokens semánticos. Cada producto tiene su propio archivo — los nombres de clases son iguales en todos, solo cambia qué color hex hay detrás de primary.

/* src/index.css */
@import "tailwindcss";
@import "@lemontech/sour-theme/tailwind-lemonsuite.css";
/* @import "@lemontech/sour-theme/tailwind-casetracking.css";       */
/* @import "@lemontech/sour-theme/tailwind-casetracking-firms.css"; */

| Archivo | Producto | primary | | --- | --- | --- | | tailwind-lemonsuite.css | LemonSuite | azure | | tailwind-casetracking.css | Casetracking | purple | | tailwind-casetracking-firms.css | Casetracking Firms | orange | | tailwind-theme.css | Base sin primary | — |

Colores disponibles como clases: neutral, primary, secondary, success, warning, danger, info — cada uno con su escala 0–900.

<div className="bg-neutral-0 text-neutral-900 rounded-m p-m" />
<button className="bg-primary-500 hover:bg-primary-600 text-white rounded-l" />
<span className="text-danger-600 bg-danger-50 border border-danger-200" />

Cuando el diseño especifique un color, usa siempre un valor concreto de los tokens disponibles — por ejemplo bg-primary-500, text-neutral-700 o border-danger-200. Los tokens cubren la escala completa (0–900) para cada color semántico.

Para Tailwind v3, importa tokens directamente en tailwind.config.js. Ver documentación completa.

Build de la librería

pnpm build:lib

Genera en dist/:

dist/
├── index.js                       # ESM (import)
├── index.cjs                      # CommonJS (require)
├── index.d.ts                     # Tipos
├── tailwind-theme.css             # Tailwind v4 — base sin primary
├── tailwind-lemonsuite.css        # Tailwind v4 — LemonSuite
├── tailwind-casetracking.css      # Tailwind v4 — Casetracking
└── tailwind-casetracking-firms.css # Tailwind v4 — Casetracking Firms

Release

El release se gestiona desde GitHub Actions → Release → Run workflow. Selecciona el tipo de bump:

• patch — bug fixes o ajustes menores → 1.3.3 → 1.3.4
• minor — nuevo componente o variante → 1.3.3 → 1.4.0
• major — cambio de API incompatible → 1.3.3 → 2.0.0

El workflow hace bump de versión, compila, crea el tag en git y publica en npm automáticamente. Storybook se redespliega en GitHub Pages al finalizar.