@lemontech/sour-theme 1.0.0

package/README.md

@@ -0,0 +1,125 @@
+# Sour Theme
+
+Design System basado en Ant Design que exporta tema y tokens reutilizables.
+
+## ¿Qué es?
+
+Librería de diseño que proporciona:
+- **Tema (antdTheme)**: Configuración completa de Ant Design personalizada
+- **Tokens**: Sistema de tokens de diseño (colores, espaciado, tipografía, etc.)
+
+Para ser consumidos en cualquier proyecto React que use Ant Design.
+
+## Requisitos
+
+- Node >= 20.19.0
+- pnpm >= 9.0.0
+
+## Desarrollo
+
+```bash
+nvm install node
+nvm use
+pnpm install
+```
+
+## Storybook (Demos)
+
+Storybook muestra componentes de ejemplo que demuestran los cambios aplicados al tema.
+
+```bash
+pnpm storybook
+```
+
+Build estático:
+
+```bash
+pnpm build-storybook
+```
+
+## Tailwind CSS
+
+- Tailwind está habilitado globalmente en `src/index.css`.
+- Storybook también carga esos estilos desde `.storybook/preview.ts`.
+
+## Build como librería
+
+```bash
+pnpm build:lib
+```
+
+Genera en `dist/`:
+
+- `index.js` (ESM)
+- `index.cjs` (CommonJS)
+- `index.d.ts` (tipos)
+
+## API Exportada
+
+```typescript
+export { 
+  theme,      // Configuración completa del tema de Ant Design
+  tokens      // Sistema de tokens de diseño reutilizables
+}
+```
+
+**`theme`**: Objeto con la configuración completa del tema de Ant Design con personalizaciones.
+
+**`tokens`**: Objeto que agrupa todos los tokens de diseño: `color`, `spacing`, `radius`, `fontSize`, `lineHeight`, `letterSpacing`, `lineWidth`, `fontWeight`, `fontFamily`.
+
+## Instalación y Uso
+
+```bash
+npm install sour-theme antd @ant-design/icons react react-dom
+```
+
+### Aplicar el tema globalmente
+
+```tsx
+import { theme } from 'sour-theme'
+import { ConfigProvider } from 'antd'
+
+export default function App() {
+  return (
+    <ConfigProvider theme={theme}>
+      {/* Tu aplicación aquí */}
+    </ConfigProvider>
+  )
+}
+```
+
+### Usar los tokens
+
+```tsx
+import { tokens } from 'sour-theme'
+
+const { color, spacing, fontSize } = tokens
+
+const Component = () => {
+  return (
+    <div style={{
+      color: color.blue[500],
+      padding: spacing.m,
+      fontSize: fontSize.s,
+    }}>
+      Componente con tokens del tema
+    </div>
+  )
+}
+```
+
+## Cambios de Tema
+
+El tema incluye personalizaciones específicas en componentes. Por ejemplo:
+
+- **Tag**: `borderRadiusSM` modificado de `4px` a `16px`
+
+Puedes ver más detalles en Storybook (ejecutar `pnpm storybook`).
+
+## Publicar en npm
+
+```bash
+npm login
+pnpm build:lib
+npm publish --access public
+```

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x='"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',a={zero:0,xxs:4,xs:8,s:16,m:24,l:32,xl:40,xxl:48},o={xxxs:12,xxs:14,xs:16,s:20,m:24,l:32,xl:40,xxl:48,xxxl:64},i={xxxs:18/o.xxxs,xxs:21/o.xxs,xs:24/o.xs,s:30/o.s,m:36/o.m,l:48/o.l,xl:60/o.xl,xxl:72/o.xxl,xxxl:96/o.xxxl},g={xxxs:.25,xxs:.1,xs:.1,s:0,m:0,l:.25,xl:0,xxl:.5,xxxl:1.5},t={s:4,m:8,l:16},b={xs:1,s:2,m:3,l:8},s={grey:{0:"#fafafa",50:"#f2f2f2",100:"#e3e3e3",200:"#d3d3d3",300:"#b3b3b3",400:"#9c9b9b",500:"#7b7a7a",600:"#5e5e5e",700:"#424242",800:"#303030",900:"#262626"},blue:{0:"#f5faff",50:"#e0f0ff",100:"#cde4f9",200:"#a7cdf1",300:"#7cb3e7",400:"#62a2df",500:"#4681b9",600:"#3f6a92",700:"#2f4d69",800:"#223649",900:"#1b2937"},green:{0:"#f5fffa",50:"#ebfff6",100:"#cdf3e3",200:"#99e1c3",300:"#66cca1",400:"#39bc84",500:"#329f71",600:"#2a7e5b",700:"#26664b",800:"#1e4836",900:"#19382c"},yellow:{0:"#fffdf5",50:"#fffbeb",100:"#fbf1c6",200:"#f6df83",300:"#f3ce3a",400:"#d8ae03",500:"#b28f00",600:"#8a6f00",700:"#685403",800:"#483a04",900:"#3b3107"},red:{0:"#fff5f5",50:"#ffe1e0",100:"#fcccca",200:"#f8a4a0",300:"#f37872",400:"#ef5b53",500:"#cd433c",600:"#b12d25",700:"#861e18",800:"#601410",900:"#450f0c"},charcoal:{0:"#f1efef",50:"#e2dfdf",100:"#cdc6c8",200:"#a99ea0",300:"#87787c",400:"#695d60",500:"#51484a",600:"#41393b",700:"#312b2c",800:"#231f20",900:"#1b1819"},lemon:{0:"#f9fcf7",50:"#e9f4e1",100:"#cbe7bb",200:"#abd991",300:"#8bca68",400:"#6cb940",500:"#5d9f37",600:"#4b812d",700:"#355b20",800:"#254016",900:"#1a2d10"},orange:{0:"#fff9f5",50:"#feede1",100:"#fdd4b9",200:"#fcb688",300:"#fb9756",400:"#fa7b29",500:"#db5a05",600:"#a94504",700:"#773103",800:"#502102",900:"#3c1801"},purple:{0:"#faf6fe",50:"#f0e3fd",100:"#dfc2fa",200:"#c693f6",300:"#ab60f1",400:"#8f2ced",500:"#7112ca",600:"#540d96",700:"#3f0a71",800:"#2c0750",900:"#22053d"},azure:{0:"#f5fbff",50:"#e0f3ff",100:"#bde5ff",200:"#85ceff",300:"#52baff",400:"#059cff",500:"#007bcc",600:"#005c99",700:"#00406b",800:"#003152",900:"#00253d"}},d={light:300,regular:400,semibold:600,bold:700},H={fontFamily:x,spacing:a,fontSize:o,lineHeight:i,letterSpacing:g,radius:t,lineWidth:b,color:s,fontWeight:d},{green:r,yellow:c,red:l,azure:f,grey:e,blue:n}=s,S={token:{fontFamily:x,fontWeightStrong:d.semibold,fontSizeSM:o.xxxs,fontSize:o.xxs,fontSizeLG:o.xs,fontSizeXL:o.s,fontSizeHeading5:o.xs,fontSizeHeading4:o.s,fontSizeHeading3:o.m,fontSizeHeading2:o.l,fontSizeHeading1:o.xl,lineHeightSM:i.xxxs,lineHeight:i.xxs,lineHeightLG:i.xs,lineHeightHeading5:i.xs,lineHeightHeading4:i.s,lineHeightHeading3:i.m,lineHeightHeading2:i.l,lineHeightHeading1:i.xl,colorPrimary:n[500],colorPrimaryBg:n[50],colorPrimaryBgHover:n[100],colorPrimaryBorder:n[200],colorPrimaryBorderHover:n[300],colorPrimaryHover:n[400],colorPrimaryActive:n[600],colorPrimaryTextHover:n[700],colorPrimaryText:n[800],colorPrimaryTextActive:n[900],colorSuccess:r[500],colorSuccessBg:r[50],colorSuccessBgHover:r[100],colorSuccessBorder:r[200],colorSuccessBorderHover:r[300],colorSuccessHover:r[400],colorSuccessActive:r[600],colorSuccessTextHover:r[700],colorSuccessText:r[800],colorSuccessTextActive:r[900],colorWarning:c[500],colorWarningBg:c[50],colorWarningBgHover:c[100],colorWarningBorder:c[200],colorWarningBorderHover:c[300],colorWarningHover:c[400],colorWarningActive:c[600],colorWarningTextHover:c[700],colorWarningText:c[800],colorWarningTextActive:c[900],colorError:l[500],colorErrorBg:l[50],colorErrorBgHover:l[100],colorErrorBorder:l[200],colorErrorBorderHover:l[300],colorErrorHover:l[400],colorErrorActive:l[600],colorErrorTextHover:l[700],colorErrorText:l[800],colorErrorTextActive:l[900],colorInfo:f[500],colorInfoBg:f[50],colorInfoBgHover:f[100],colorInfoBorder:f[200],colorInfoBorderHover:f[300],colorInfoHover:f[400],colorInfoActive:f[600],colorInfoTextHover:f[700],colorInfoText:f[800],colorInfoTextActive:f[900],colorBgLayout:e[0],colorBgContainer:"#FFFFFF",colorBgElevated:"#FFFFFF",colorBorder:e[200],colorBorderSecondary:e[100],colorFill:e[100],colorFillSecondary:e[50],colorFillTertiary:e[0],colorFillQuaternary:e[0],colorText:e[900],colorTextSecondary:e[600],colorTextTertiary:e[400],colorTextQuaternary:e[300],colorTextDisabled:e[300],colorTextPlaceholder:e[400],sizeXXS:a.xxs,sizeXS:a.xs,sizeLG:a.m,sizeXL:a.l,sizeXXL:a.xxl},components:{Tag:{borderRadiusSM:t.l}}};exports.theme=S;exports.tokens=H;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { antdTheme as theme } from "./theme/antdTheme";
+export { tokens } from "./theme/tokens";

package/dist/index.js

@@ -0,0 +1,297 @@
+const i = '"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif', x = {
+  zero: 0,
+  xxs: 4,
+  xs: 8,
+  s: 16,
+  m: 24,
+  l: 32,
+  xl: 40,
+  xxl: 48
+}, o = {
+  xxxs: 12,
+  xxs: 14,
+  xs: 16,
+  s: 20,
+  m: 24,
+  l: 32,
+  xl: 40,
+  xxl: 48,
+  xxxl: 64
+}, a = {
+  xxxs: 18 / o.xxxs,
+  xxs: 21 / o.xxs,
+  xs: 24 / o.xs,
+  s: 30 / o.s,
+  m: 36 / o.m,
+  l: 48 / o.l,
+  xl: 60 / o.xl,
+  xxl: 72 / o.xxl,
+  xxxl: 96 / o.xxxl
+}, g = {
+  xxxs: 0.25,
+  xxs: 0.1,
+  xs: 0.1,
+  s: 0,
+  m: 0,
+  l: 0.25,
+  xl: 0,
+  xxl: 0.5,
+  xxxl: 1.5
+}, t = {
+  s: 4,
+  m: 8,
+  l: 16
+}, b = {
+  xs: 1,
+  s: 2,
+  m: 3,
+  l: 8
+}, s = {
+  grey: {
+    0: "#fafafa",
+    50: "#f2f2f2",
+    100: "#e3e3e3",
+    200: "#d3d3d3",
+    300: "#b3b3b3",
+    400: "#9c9b9b",
+    500: "#7b7a7a",
+    600: "#5e5e5e",
+    700: "#424242",
+    800: "#303030",
+    900: "#262626"
+  },
+  blue: {
+    0: "#f5faff",
+    50: "#e0f0ff",
+    100: "#cde4f9",
+    200: "#a7cdf1",
+    300: "#7cb3e7",
+    400: "#62a2df",
+    500: "#4681b9",
+    600: "#3f6a92",
+    700: "#2f4d69",
+    800: "#223649",
+    900: "#1b2937"
+  },
+  green: {
+    0: "#f5fffa",
+    50: "#ebfff6",
+    100: "#cdf3e3",
+    200: "#99e1c3",
+    300: "#66cca1",
+    400: "#39bc84",
+    500: "#329f71",
+    600: "#2a7e5b",
+    700: "#26664b",
+    800: "#1e4836",
+    900: "#19382c"
+  },
+  yellow: {
+    0: "#fffdf5",
+    50: "#fffbeb",
+    100: "#fbf1c6",
+    200: "#f6df83",
+    300: "#f3ce3a",
+    400: "#d8ae03",
+    500: "#b28f00",
+    600: "#8a6f00",
+    700: "#685403",
+    800: "#483a04",
+    900: "#3b3107"
+  },
+  red: {
+    0: "#fff5f5",
+    50: "#ffe1e0",
+    100: "#fcccca",
+    200: "#f8a4a0",
+    300: "#f37872",
+    400: "#ef5b53",
+    500: "#cd433c",
+    600: "#b12d25",
+    700: "#861e18",
+    800: "#601410",
+    900: "#450f0c"
+  },
+  charcoal: {
+    0: "#f1efef",
+    50: "#e2dfdf",
+    100: "#cdc6c8",
+    200: "#a99ea0",
+    300: "#87787c",
+    400: "#695d60",
+    500: "#51484a",
+    600: "#41393b",
+    700: "#312b2c",
+    800: "#231f20",
+    900: "#1b1819"
+  },
+  lemon: {
+    0: "#f9fcf7",
+    50: "#e9f4e1",
+    100: "#cbe7bb",
+    200: "#abd991",
+    300: "#8bca68",
+    400: "#6cb940",
+    500: "#5d9f37",
+    600: "#4b812d",
+    700: "#355b20",
+    800: "#254016",
+    900: "#1a2d10"
+  },
+  orange: {
+    0: "#fff9f5",
+    50: "#feede1",
+    100: "#fdd4b9",
+    200: "#fcb688",
+    300: "#fb9756",
+    400: "#fa7b29",
+    500: "#db5a05",
+    600: "#a94504",
+    700: "#773103",
+    800: "#502102",
+    900: "#3c1801"
+  },
+  purple: {
+    0: "#faf6fe",
+    50: "#f0e3fd",
+    100: "#dfc2fa",
+    200: "#c693f6",
+    300: "#ab60f1",
+    400: "#8f2ced",
+    500: "#7112ca",
+    600: "#540d96",
+    700: "#3f0a71",
+    800: "#2c0750",
+    900: "#22053d"
+  },
+  azure: {
+    0: "#f5fbff",
+    50: "#e0f3ff",
+    100: "#bde5ff",
+    200: "#85ceff",
+    300: "#52baff",
+    400: "#059cff",
+    500: "#007bcc",
+    600: "#005c99",
+    700: "#00406b",
+    800: "#003152",
+    900: "#00253d"
+  }
+}, d = {
+  light: 300,
+  regular: 400,
+  semibold: 600,
+  bold: 700
+}, H = {
+  fontFamily: i,
+  spacing: x,
+  fontSize: o,
+  lineHeight: a,
+  letterSpacing: g,
+  radius: t,
+  lineWidth: b,
+  color: s,
+  fontWeight: d
+}, { green: r, yellow: c, red: l, azure: f, grey: e, blue: n } = s, S = {
+  token: {
+    fontFamily: i,
+    fontWeightStrong: d.semibold,
+    fontSizeSM: o.xxxs,
+    fontSize: o.xxs,
+    // 14px  (base)
+    fontSizeLG: o.xs,
+    fontSizeXL: o.s,
+    fontSizeHeading5: o.xs,
+    fontSizeHeading4: o.s,
+    fontSizeHeading3: o.m,
+    fontSizeHeading2: o.l,
+    fontSizeHeading1: o.xl,
+    lineHeightSM: a.xxxs,
+    lineHeight: a.xxs,
+    lineHeightLG: a.xs,
+    lineHeightHeading5: a.xs,
+    lineHeightHeading4: a.s,
+    lineHeightHeading3: a.m,
+    lineHeightHeading2: a.l,
+    lineHeightHeading1: a.xl,
+    colorPrimary: n[500],
+    colorPrimaryBg: n[50],
+    colorPrimaryBgHover: n[100],
+    colorPrimaryBorder: n[200],
+    colorPrimaryBorderHover: n[300],
+    colorPrimaryHover: n[400],
+    colorPrimaryActive: n[600],
+    colorPrimaryTextHover: n[700],
+    colorPrimaryText: n[800],
+    colorPrimaryTextActive: n[900],
+    colorSuccess: r[500],
+    colorSuccessBg: r[50],
+    colorSuccessBgHover: r[100],
+    colorSuccessBorder: r[200],
+    colorSuccessBorderHover: r[300],
+    colorSuccessHover: r[400],
+    colorSuccessActive: r[600],
+    colorSuccessTextHover: r[700],
+    colorSuccessText: r[800],
+    colorSuccessTextActive: r[900],
+    colorWarning: c[500],
+    colorWarningBg: c[50],
+    colorWarningBgHover: c[100],
+    colorWarningBorder: c[200],
+    colorWarningBorderHover: c[300],
+    colorWarningHover: c[400],
+    colorWarningActive: c[600],
+    colorWarningTextHover: c[700],
+    colorWarningText: c[800],
+    colorWarningTextActive: c[900],
+    colorError: l[500],
+    colorErrorBg: l[50],
+    colorErrorBgHover: l[100],
+    colorErrorBorder: l[200],
+    colorErrorBorderHover: l[300],
+    colorErrorHover: l[400],
+    colorErrorActive: l[600],
+    colorErrorTextHover: l[700],
+    colorErrorText: l[800],
+    colorErrorTextActive: l[900],
+    colorInfo: f[500],
+    colorInfoBg: f[50],
+    colorInfoBgHover: f[100],
+    colorInfoBorder: f[200],
+    colorInfoBorderHover: f[300],
+    colorInfoHover: f[400],
+    colorInfoActive: f[600],
+    colorInfoTextHover: f[700],
+    colorInfoText: f[800],
+    colorInfoTextActive: f[900],
+    colorBgLayout: e[0],
+    colorBgContainer: "#FFFFFF",
+    colorBgElevated: "#FFFFFF",
+    colorBorder: e[200],
+    colorBorderSecondary: e[100],
+    colorFill: e[100],
+    colorFillSecondary: e[50],
+    colorFillTertiary: e[0],
+    colorFillQuaternary: e[0],
+    colorText: e[900],
+    colorTextSecondary: e[600],
+    colorTextTertiary: e[400],
+    colorTextQuaternary: e[300],
+    colorTextDisabled: e[300],
+    colorTextPlaceholder: e[400],
+    sizeXXS: x.xxs,
+    sizeXS: x.xs,
+    sizeLG: x.m,
+    sizeXL: x.l,
+    sizeXXL: x.xxl
+  },
+  components: {
+    Tag: {
+      borderRadiusSM: t.l
+    }
+  }
+};
+export {
+  S as theme,
+  H as tokens
+};

package/dist/theme/antdTheme.d.ts

@@ -0,0 +1,2 @@
+import type { ThemeConfig } from "antd";
+export declare const antdTheme: ThemeConfig;

package/dist/theme/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Design System - Tokens y Configuración
+ *
+ * Este archivo re-exporta todos los tokens agnósticos de diseño
+ * para su uso en aplicaciones y frameworks externos.
+ */
+export { fontFamily, spacing, fontSize, lineHeight, letterSpacing, radius, lineWidth, color, fontWeight, } from "./tokens";
+export { antdTheme } from "./antdTheme";

package/dist/theme/tokens.d.ts

@@ -0,0 +1,20 @@
+export declare const fontFamily = "\"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+export declare const spacing: Record<string, number>;
+export declare const fontSize: Record<string, number>;
+export declare const lineHeight: Record<string, number>;
+export declare const letterSpacing: Record<string, number>;
+export declare const radius: Record<string, number>;
+export declare const lineWidth: Record<string, number>;
+export declare const color: Record<string, Record<string, string>>;
+export declare const fontWeight: Record<string, number>;
+export declare const tokens: {
+    fontFamily: string;
+    spacing: Record<string, number>;
+    fontSize: Record<string, number>;
+    lineHeight: Record<string, number>;
+    letterSpacing: Record<string, number>;
+    radius: Record<string, number>;
+    lineWidth: Record<string, number>;
+    color: Record<string, Record<string, string>>;
+    fontWeight: Record<string, number>;
+};

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@lemontech/sour-theme",
+  "private": false,
+  "version": "1.0.0",
+  "description": "Tema para antd personalizado para proyectos de Lemontech",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "antd",
+    "react",
+    "design-system",
+    "ui-library",
+    "wrapper"
+  ],
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "dependencies": {
+    "antd": "^6.3.1"
+  },
+  "peerDependencies": {
+    "@ant-design/icons": ">=6.0.0",
+    "antd": ">=6.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
+    "@eslint/js": "^9.39.1",
+    "@storybook/addon-a11y": "^10.2.15",
+    "@storybook/addon-docs": "^10.2.15",
+    "@storybook/addon-onboarding": "^10.2.15",
+    "@storybook/addon-vitest": "^10.2.15",
+    "@storybook/react-vite": "^10.2.15",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@ant-design/icons": "^6.1.0",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "autoprefixer": "^10.4.27",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-storybook": "^10.2.15",
+    "globals": "^16.5.0",
+    "playwright": "^1.58.2",
+    "postcss": "^8.5.8",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "storybook": "^10.2.15",
+    "tailwindcss": "^4.2.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "tsc -b && vite build",
+    "build:lib": "npm run clean && tsc -p tsconfig.lib.json && rm -rf dist/providers && vite build --config vite.lib.config.ts",
+    "build:all": "npm run build && npm run build:lib",
+    "pack:check": "npm pack --dry-run",
+    "lint": "eslint .",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  }
+}