@lemontech/sour-theme 1.3.4 → 1.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +124 -75
- package/dist/tailwind-casetracking-firms.css +100 -0
- package/dist/tailwind-casetracking.css +100 -0
- package/dist/tailwind-lemonsuite.css +100 -0
- package/dist/tailwind-theme.css +89 -0
- package/package.json +6 -2
package/README.md
CHANGED
|
@@ -1,126 +1,175 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @lemontech/sour-theme
|
|
2
2
|
|
|
3
|
-
Design
|
|
3
|
+
Design system basado en Ant Design que exporta tema, tokens y temas por producto para proyectos Lemontech.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
📖 **[Documentación en Storybook](https://lemontechsa.github.io/sour-theme/)**
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
| Sección | Link |
|
|
8
|
+
| --- | --- |
|
|
9
|
+
| Instalación y uso | [Getting Started](https://lemontechsa.github.io/sour-theme/?path=/docs/getting-started-installation--docs) |
|
|
10
|
+
| Tokens de diseño | [Tokens](https://lemontechsa.github.io/sour-theme/?path=/docs/getting-started-tokens--docs) |
|
|
11
|
+
| Integración Tailwind CSS | [Tailwind CSS](https://lemontechsa.github.io/sour-theme/?path=/docs/getting-started-tailwind-css--docs) |
|
|
12
|
+
| Paleta de colores | [Color Palette](https://lemontechsa.github.io/sour-theme/?path=/docs/design-tokens-color-palette--docs) |
|
|
13
|
+
| Componentes | [Components](https://lemontechsa.github.io/sour-theme/?path=/docs/components-tag--docs) |
|
|
14
|
+
| Arquitectura y mantenibilidad | [Maintainability](https://lemontechsa.github.io/sour-theme/?path=/docs/maintainability-overview--docs) |
|
|
10
15
|
|
|
11
|
-
|
|
16
|
+
## Versiones requeridas
|
|
12
17
|
|
|
13
|
-
|
|
18
|
+
| Herramienta | Versión |
|
|
19
|
+
|-------------|-----------|
|
|
20
|
+
| Node.js | lts/krypton (`>=20.19.0`) |
|
|
21
|
+
| pnpm | `9.0.0` |
|
|
22
|
+
| Ant Design | `>=6.0.0` |
|
|
14
23
|
|
|
15
|
-
|
|
16
|
-
- pnpm >= 9.0.0
|
|
17
|
-
|
|
18
|
-
## Desarrollo
|
|
24
|
+
## Levantar el proyecto
|
|
19
25
|
|
|
20
26
|
```bash
|
|
21
|
-
|
|
27
|
+
# 1. Usar la versión correcta de Node
|
|
28
|
+
nvm install
|
|
22
29
|
nvm use
|
|
23
|
-
pnpm install
|
|
24
|
-
```
|
|
25
30
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
Storybook muestra componentes de ejemplo que demuestran los cambios aplicados al tema.
|
|
31
|
+
# 2. Instalar dependencias
|
|
32
|
+
pnpm install
|
|
29
33
|
|
|
30
|
-
|
|
34
|
+
# 3. Levantar Storybook en http://localhost:6006
|
|
31
35
|
pnpm storybook
|
|
32
36
|
```
|
|
33
37
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
```bash
|
|
37
|
-
pnpm build-storybook
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
## Tailwind CSS
|
|
38
|
+
## Scripts disponibles
|
|
41
39
|
|
|
42
|
-
|
|
43
|
-
|
|
40
|
+
| Script | Descripción |
|
|
41
|
+
|---------------------|----------------------------------------------------------|
|
|
42
|
+
| `pnpm storybook` | Inicia Storybook en modo desarrollo (puerto 6006) |
|
|
43
|
+
| `pnpm build:lib` | Compila la librería en `dist/` (ESM + CJS + tipos) |
|
|
44
|
+
| `pnpm build-storybook` | Genera el build estático de Storybook |
|
|
45
|
+
| `pnpm lint` | Corre ESLint sobre todo el proyecto |
|
|
46
|
+
| `pnpm pack --dry-run` | Previsualiza qué archivos se publicarían en npm |
|
|
44
47
|
|
|
45
|
-
##
|
|
48
|
+
## Instalación como dependencia
|
|
46
49
|
|
|
47
50
|
```bash
|
|
48
|
-
|
|
51
|
+
npm install @lemontech/sour-theme
|
|
52
|
+
# o
|
|
53
|
+
pnpm add @lemontech/sour-theme
|
|
49
54
|
```
|
|
50
55
|
|
|
51
|
-
|
|
56
|
+
> Requiere `antd >= 6.0.0`, `@ant-design/icons >= 6.0.0`, `react >= 18` como peer dependencies.
|
|
52
57
|
|
|
53
|
-
|
|
54
|
-
- `index.cjs` (CommonJS)
|
|
55
|
-
- `index.d.ts` (tipos)
|
|
58
|
+
### Fuente requerida
|
|
56
59
|
|
|
57
|
-
|
|
60
|
+
El tema usa **Open Sans** como fuente principal. Agrégala en tu `index.html`:
|
|
58
61
|
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
62
|
+
```html
|
|
63
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
64
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
65
|
+
<link
|
|
66
|
+
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
|
|
67
|
+
rel="stylesheet"
|
|
68
|
+
/>
|
|
64
69
|
```
|
|
65
70
|
|
|
66
|
-
|
|
71
|
+
## Uso
|
|
67
72
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
## Instalación y Uso
|
|
71
|
-
|
|
72
|
-
```bash
|
|
73
|
-
npm install sour-theme antd @ant-design/icons react react-dom
|
|
74
|
-
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
### Aplicar el tema globalmente
|
|
73
|
+
### Tema por producto
|
|
78
74
|
|
|
79
75
|
```tsx
|
|
80
|
-
import {
|
|
76
|
+
import { lemonsuiteTheme } from '@lemontech/sour-theme'
|
|
81
77
|
import { ConfigProvider } from 'antd'
|
|
82
78
|
|
|
83
79
|
export default function App() {
|
|
84
80
|
return (
|
|
85
|
-
<ConfigProvider theme={
|
|
86
|
-
{/*
|
|
81
|
+
<ConfigProvider theme={lemonsuiteTheme}>
|
|
82
|
+
{/* tu app */}
|
|
87
83
|
</ConfigProvider>
|
|
88
84
|
)
|
|
89
85
|
}
|
|
90
86
|
```
|
|
91
87
|
|
|
92
|
-
|
|
88
|
+
Temas disponibles:
|
|
89
|
+
|
|
90
|
+
| Export | Producto | Color primario |
|
|
91
|
+
|----------------------------|---------------------|----------------|
|
|
92
|
+
| `lemonsuiteTheme` | LemonSuite | Blue |
|
|
93
|
+
| `casetrackingFirmsTheme` | Casetracking Firms | Orange |
|
|
94
|
+
| `casetrackingTheme` | Casetracking | Purple |
|
|
95
|
+
| `rawTheme` | Base (sin primario) | — |
|
|
96
|
+
|
|
97
|
+
### Tokens de diseño
|
|
93
98
|
|
|
94
99
|
```tsx
|
|
95
|
-
import { tokens } from 'sour-theme'
|
|
100
|
+
import { tokens } from '@lemontech/sour-theme'
|
|
96
101
|
|
|
97
102
|
const { color, spacing, fontSize } = tokens
|
|
98
103
|
|
|
99
|
-
const Component = () =>
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
)
|
|
109
|
-
}
|
|
104
|
+
const Component = () => (
|
|
105
|
+
<div style={{
|
|
106
|
+
color: color.blue[500],
|
|
107
|
+
padding: spacing.m,
|
|
108
|
+
fontSize: fontSize.s,
|
|
109
|
+
}}>
|
|
110
|
+
Componente con tokens del tema
|
|
111
|
+
</div>
|
|
112
|
+
)
|
|
110
113
|
```
|
|
111
114
|
|
|
112
|
-
|
|
115
|
+
Grupos de tokens disponibles: `color`, `spacing`, `fontSize`, `lineHeight`, `letterSpacing`, `radius`, `lineWidth`, `fontWeight`, `fontFamily`.
|
|
116
|
+
|
|
117
|
+
## Tailwind CSS
|
|
118
|
+
|
|
119
|
+
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`.
|
|
113
120
|
|
|
114
|
-
|
|
121
|
+
```css
|
|
122
|
+
/* src/index.css */
|
|
123
|
+
@import "tailwindcss";
|
|
124
|
+
@import "@lemontech/sour-theme/tailwind-lemonsuite.css";
|
|
125
|
+
/* @import "@lemontech/sour-theme/tailwind-casetracking.css"; */
|
|
126
|
+
/* @import "@lemontech/sour-theme/tailwind-casetracking-firms.css"; */
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
| Archivo | Producto | `primary` |
|
|
130
|
+
| --- | --- | --- |
|
|
131
|
+
| `tailwind-lemonsuite.css` | LemonSuite | `blue` |
|
|
132
|
+
| `tailwind-casetracking.css` | Casetracking | `purple` |
|
|
133
|
+
| `tailwind-casetracking-firms.css` | Casetracking Firms | `orange` |
|
|
134
|
+
| `tailwind-theme.css` | Base sin primary | — |
|
|
135
|
+
|
|
136
|
+
Colores disponibles como clases: `neutral`, `primary`, `secondary`, `success`, `warning`, `danger`, `info` — cada uno con su escala 0–900.
|
|
137
|
+
|
|
138
|
+
```tsx
|
|
139
|
+
<div className="bg-neutral-0 text-neutral-900 rounded-m p-m" />
|
|
140
|
+
<button className="bg-primary-500 hover:bg-primary-600 text-white rounded-l" />
|
|
141
|
+
<span className="text-danger-600 bg-danger-50 border border-danger-200" />
|
|
142
|
+
```
|
|
115
143
|
|
|
116
|
-
|
|
144
|
+
> 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.
|
|
117
145
|
|
|
118
|
-
|
|
146
|
+
Para Tailwind v3, importa `tokens` directamente en `tailwind.config.js`. Ver [documentación completa](https://lemontechsa.github.io/sour-theme/?path=/docs/getting-started-tailwind-css--docs).
|
|
119
147
|
|
|
120
|
-
##
|
|
148
|
+
## Build de la librería
|
|
121
149
|
|
|
122
150
|
```bash
|
|
123
|
-
npm login
|
|
124
151
|
pnpm build:lib
|
|
125
|
-
|
|
126
|
-
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
Genera en `dist/`:
|
|
155
|
+
|
|
156
|
+
```
|
|
157
|
+
dist/
|
|
158
|
+
├── index.js # ESM (import)
|
|
159
|
+
├── index.cjs # CommonJS (require)
|
|
160
|
+
├── index.d.ts # Tipos
|
|
161
|
+
├── tailwind-theme.css # Tailwind v4 — base sin primary
|
|
162
|
+
├── tailwind-lemonsuite.css # Tailwind v4 — LemonSuite
|
|
163
|
+
├── tailwind-casetracking.css # Tailwind v4 — Casetracking
|
|
164
|
+
└── tailwind-casetracking-firms.css # Tailwind v4 — Casetracking Firms
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
## Release
|
|
168
|
+
|
|
169
|
+
El release se gestiona desde **GitHub Actions → Release → Run workflow**. Selecciona el tipo de bump:
|
|
170
|
+
|
|
171
|
+
- `patch` — bug fixes o ajustes menores → `1.3.3 → 1.3.4`
|
|
172
|
+
- `minor` — nuevo componente o variante → `1.3.3 → 1.4.0`
|
|
173
|
+
- `major` — cambio de API incompatible → `1.3.3 → 2.0.0`
|
|
174
|
+
|
|
175
|
+
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.
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
@theme {
|
|
2
|
+
--color-neutral-0: #fafafa;
|
|
3
|
+
--color-neutral-50: #f2f2f2;
|
|
4
|
+
--color-neutral-100: #e3e3e3;
|
|
5
|
+
--color-neutral-200: #d3d3d3;
|
|
6
|
+
--color-neutral-300: #b3b3b3;
|
|
7
|
+
--color-neutral-400: #9c9b9b;
|
|
8
|
+
--color-neutral-500: #7b7a7a;
|
|
9
|
+
--color-neutral-600: #5e5e5e;
|
|
10
|
+
--color-neutral-700: #424242;
|
|
11
|
+
--color-neutral-800: #303030;
|
|
12
|
+
--color-neutral-900: #262626;
|
|
13
|
+
--color-success-0: #f5fffa;
|
|
14
|
+
--color-success-50: #ebfff6;
|
|
15
|
+
--color-success-100: #cdf3e3;
|
|
16
|
+
--color-success-200: #99e1c3;
|
|
17
|
+
--color-success-300: #66cca1;
|
|
18
|
+
--color-success-400: #39bc84;
|
|
19
|
+
--color-success-500: #329f71;
|
|
20
|
+
--color-success-600: #2a7e5b;
|
|
21
|
+
--color-success-700: #26664b;
|
|
22
|
+
--color-success-800: #1e4836;
|
|
23
|
+
--color-success-900: #19382c;
|
|
24
|
+
--color-warning-0: #fffdf5;
|
|
25
|
+
--color-warning-50: #fffbeb;
|
|
26
|
+
--color-warning-100: #fbf1c6;
|
|
27
|
+
--color-warning-200: #f6df83;
|
|
28
|
+
--color-warning-300: #f3ce3a;
|
|
29
|
+
--color-warning-400: #d8ae03;
|
|
30
|
+
--color-warning-500: #b28f00;
|
|
31
|
+
--color-warning-600: #8a6f00;
|
|
32
|
+
--color-warning-700: #685403;
|
|
33
|
+
--color-warning-800: #483a04;
|
|
34
|
+
--color-warning-900: #3b3107;
|
|
35
|
+
--color-danger-0: #fff5f5;
|
|
36
|
+
--color-danger-50: #ffe1e0;
|
|
37
|
+
--color-danger-100: #fcccca;
|
|
38
|
+
--color-danger-200: #f8a4a0;
|
|
39
|
+
--color-danger-300: #f37872;
|
|
40
|
+
--color-danger-400: #ef5b53;
|
|
41
|
+
--color-danger-500: #cd433c;
|
|
42
|
+
--color-danger-600: #b12d25;
|
|
43
|
+
--color-danger-700: #861e18;
|
|
44
|
+
--color-danger-800: #601410;
|
|
45
|
+
--color-danger-900: #450f0c;
|
|
46
|
+
--color-info-0: #f5faff;
|
|
47
|
+
--color-info-50: #e0f0ff;
|
|
48
|
+
--color-info-100: #cde4f9;
|
|
49
|
+
--color-info-200: #a7cdf1;
|
|
50
|
+
--color-info-300: #7cb3e7;
|
|
51
|
+
--color-info-400: #62a2df;
|
|
52
|
+
--color-info-500: #4681b9;
|
|
53
|
+
--color-info-600: #3f6a92;
|
|
54
|
+
--color-info-700: #2f4d69;
|
|
55
|
+
--color-info-800: #223649;
|
|
56
|
+
--color-info-900: #1b2937;
|
|
57
|
+
--color-secondary-0: #f1efef;
|
|
58
|
+
--color-secondary-50: #e2dfdf;
|
|
59
|
+
--color-secondary-100: #cdc6c8;
|
|
60
|
+
--color-secondary-200: #a99ea0;
|
|
61
|
+
--color-secondary-300: #87787c;
|
|
62
|
+
--color-secondary-400: #695d60;
|
|
63
|
+
--color-secondary-500: #51484a;
|
|
64
|
+
--color-secondary-600: #41393b;
|
|
65
|
+
--color-secondary-700: #312b2c;
|
|
66
|
+
--color-secondary-800: #231f20;
|
|
67
|
+
--color-secondary-900: #1b1819;
|
|
68
|
+
--spacing-zero: 0px;
|
|
69
|
+
--spacing-xxs: 4px;
|
|
70
|
+
--spacing-xs: 8px;
|
|
71
|
+
--spacing-s: 16px;
|
|
72
|
+
--spacing-m: 24px;
|
|
73
|
+
--spacing-l: 32px;
|
|
74
|
+
--spacing-xl: 40px;
|
|
75
|
+
--spacing-xxl: 48px;
|
|
76
|
+
--radius-s: 4px;
|
|
77
|
+
--radius-m: 8px;
|
|
78
|
+
--radius-l: 16px;
|
|
79
|
+
--text-xxxs: 12px;
|
|
80
|
+
--text-xxs: 14px;
|
|
81
|
+
--text-xs: 16px;
|
|
82
|
+
--text-s: 20px;
|
|
83
|
+
--text-m: 24px;
|
|
84
|
+
--text-l: 32px;
|
|
85
|
+
--text-xl: 40px;
|
|
86
|
+
--text-xxl: 48px;
|
|
87
|
+
--text-xxxl: 64px;
|
|
88
|
+
--font-sans: "Open Sans", system-ui, -apple-system, sans-serif;
|
|
89
|
+
--color-primary-0: #fff9f5;
|
|
90
|
+
--color-primary-50: #feede1;
|
|
91
|
+
--color-primary-100: #fdd4b9;
|
|
92
|
+
--color-primary-200: #fcb688;
|
|
93
|
+
--color-primary-300: #fb9756;
|
|
94
|
+
--color-primary-400: #fa7b29;
|
|
95
|
+
--color-primary-500: #db5a05;
|
|
96
|
+
--color-primary-600: #a94504;
|
|
97
|
+
--color-primary-700: #773103;
|
|
98
|
+
--color-primary-800: #502102;
|
|
99
|
+
--color-primary-900: #3c1801;
|
|
100
|
+
}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
@theme {
|
|
2
|
+
--color-neutral-0: #fafafa;
|
|
3
|
+
--color-neutral-50: #f2f2f2;
|
|
4
|
+
--color-neutral-100: #e3e3e3;
|
|
5
|
+
--color-neutral-200: #d3d3d3;
|
|
6
|
+
--color-neutral-300: #b3b3b3;
|
|
7
|
+
--color-neutral-400: #9c9b9b;
|
|
8
|
+
--color-neutral-500: #7b7a7a;
|
|
9
|
+
--color-neutral-600: #5e5e5e;
|
|
10
|
+
--color-neutral-700: #424242;
|
|
11
|
+
--color-neutral-800: #303030;
|
|
12
|
+
--color-neutral-900: #262626;
|
|
13
|
+
--color-success-0: #f5fffa;
|
|
14
|
+
--color-success-50: #ebfff6;
|
|
15
|
+
--color-success-100: #cdf3e3;
|
|
16
|
+
--color-success-200: #99e1c3;
|
|
17
|
+
--color-success-300: #66cca1;
|
|
18
|
+
--color-success-400: #39bc84;
|
|
19
|
+
--color-success-500: #329f71;
|
|
20
|
+
--color-success-600: #2a7e5b;
|
|
21
|
+
--color-success-700: #26664b;
|
|
22
|
+
--color-success-800: #1e4836;
|
|
23
|
+
--color-success-900: #19382c;
|
|
24
|
+
--color-warning-0: #fffdf5;
|
|
25
|
+
--color-warning-50: #fffbeb;
|
|
26
|
+
--color-warning-100: #fbf1c6;
|
|
27
|
+
--color-warning-200: #f6df83;
|
|
28
|
+
--color-warning-300: #f3ce3a;
|
|
29
|
+
--color-warning-400: #d8ae03;
|
|
30
|
+
--color-warning-500: #b28f00;
|
|
31
|
+
--color-warning-600: #8a6f00;
|
|
32
|
+
--color-warning-700: #685403;
|
|
33
|
+
--color-warning-800: #483a04;
|
|
34
|
+
--color-warning-900: #3b3107;
|
|
35
|
+
--color-danger-0: #fff5f5;
|
|
36
|
+
--color-danger-50: #ffe1e0;
|
|
37
|
+
--color-danger-100: #fcccca;
|
|
38
|
+
--color-danger-200: #f8a4a0;
|
|
39
|
+
--color-danger-300: #f37872;
|
|
40
|
+
--color-danger-400: #ef5b53;
|
|
41
|
+
--color-danger-500: #cd433c;
|
|
42
|
+
--color-danger-600: #b12d25;
|
|
43
|
+
--color-danger-700: #861e18;
|
|
44
|
+
--color-danger-800: #601410;
|
|
45
|
+
--color-danger-900: #450f0c;
|
|
46
|
+
--color-info-0: #f5faff;
|
|
47
|
+
--color-info-50: #e0f0ff;
|
|
48
|
+
--color-info-100: #cde4f9;
|
|
49
|
+
--color-info-200: #a7cdf1;
|
|
50
|
+
--color-info-300: #7cb3e7;
|
|
51
|
+
--color-info-400: #62a2df;
|
|
52
|
+
--color-info-500: #4681b9;
|
|
53
|
+
--color-info-600: #3f6a92;
|
|
54
|
+
--color-info-700: #2f4d69;
|
|
55
|
+
--color-info-800: #223649;
|
|
56
|
+
--color-info-900: #1b2937;
|
|
57
|
+
--color-secondary-0: #f1efef;
|
|
58
|
+
--color-secondary-50: #e2dfdf;
|
|
59
|
+
--color-secondary-100: #cdc6c8;
|
|
60
|
+
--color-secondary-200: #a99ea0;
|
|
61
|
+
--color-secondary-300: #87787c;
|
|
62
|
+
--color-secondary-400: #695d60;
|
|
63
|
+
--color-secondary-500: #51484a;
|
|
64
|
+
--color-secondary-600: #41393b;
|
|
65
|
+
--color-secondary-700: #312b2c;
|
|
66
|
+
--color-secondary-800: #231f20;
|
|
67
|
+
--color-secondary-900: #1b1819;
|
|
68
|
+
--spacing-zero: 0px;
|
|
69
|
+
--spacing-xxs: 4px;
|
|
70
|
+
--spacing-xs: 8px;
|
|
71
|
+
--spacing-s: 16px;
|
|
72
|
+
--spacing-m: 24px;
|
|
73
|
+
--spacing-l: 32px;
|
|
74
|
+
--spacing-xl: 40px;
|
|
75
|
+
--spacing-xxl: 48px;
|
|
76
|
+
--radius-s: 4px;
|
|
77
|
+
--radius-m: 8px;
|
|
78
|
+
--radius-l: 16px;
|
|
79
|
+
--text-xxxs: 12px;
|
|
80
|
+
--text-xxs: 14px;
|
|
81
|
+
--text-xs: 16px;
|
|
82
|
+
--text-s: 20px;
|
|
83
|
+
--text-m: 24px;
|
|
84
|
+
--text-l: 32px;
|
|
85
|
+
--text-xl: 40px;
|
|
86
|
+
--text-xxl: 48px;
|
|
87
|
+
--text-xxxl: 64px;
|
|
88
|
+
--font-sans: "Open Sans", system-ui, -apple-system, sans-serif;
|
|
89
|
+
--color-primary-0: #faf6fe;
|
|
90
|
+
--color-primary-50: #f0e3fd;
|
|
91
|
+
--color-primary-100: #dfc2fa;
|
|
92
|
+
--color-primary-200: #c693f6;
|
|
93
|
+
--color-primary-300: #ab60f1;
|
|
94
|
+
--color-primary-400: #8f2ced;
|
|
95
|
+
--color-primary-500: #7112ca;
|
|
96
|
+
--color-primary-600: #540d96;
|
|
97
|
+
--color-primary-700: #3f0a71;
|
|
98
|
+
--color-primary-800: #2c0750;
|
|
99
|
+
--color-primary-900: #22053d;
|
|
100
|
+
}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
@theme {
|
|
2
|
+
--color-neutral-0: #fafafa;
|
|
3
|
+
--color-neutral-50: #f2f2f2;
|
|
4
|
+
--color-neutral-100: #e3e3e3;
|
|
5
|
+
--color-neutral-200: #d3d3d3;
|
|
6
|
+
--color-neutral-300: #b3b3b3;
|
|
7
|
+
--color-neutral-400: #9c9b9b;
|
|
8
|
+
--color-neutral-500: #7b7a7a;
|
|
9
|
+
--color-neutral-600: #5e5e5e;
|
|
10
|
+
--color-neutral-700: #424242;
|
|
11
|
+
--color-neutral-800: #303030;
|
|
12
|
+
--color-neutral-900: #262626;
|
|
13
|
+
--color-success-0: #f5fffa;
|
|
14
|
+
--color-success-50: #ebfff6;
|
|
15
|
+
--color-success-100: #cdf3e3;
|
|
16
|
+
--color-success-200: #99e1c3;
|
|
17
|
+
--color-success-300: #66cca1;
|
|
18
|
+
--color-success-400: #39bc84;
|
|
19
|
+
--color-success-500: #329f71;
|
|
20
|
+
--color-success-600: #2a7e5b;
|
|
21
|
+
--color-success-700: #26664b;
|
|
22
|
+
--color-success-800: #1e4836;
|
|
23
|
+
--color-success-900: #19382c;
|
|
24
|
+
--color-warning-0: #fffdf5;
|
|
25
|
+
--color-warning-50: #fffbeb;
|
|
26
|
+
--color-warning-100: #fbf1c6;
|
|
27
|
+
--color-warning-200: #f6df83;
|
|
28
|
+
--color-warning-300: #f3ce3a;
|
|
29
|
+
--color-warning-400: #d8ae03;
|
|
30
|
+
--color-warning-500: #b28f00;
|
|
31
|
+
--color-warning-600: #8a6f00;
|
|
32
|
+
--color-warning-700: #685403;
|
|
33
|
+
--color-warning-800: #483a04;
|
|
34
|
+
--color-warning-900: #3b3107;
|
|
35
|
+
--color-danger-0: #fff5f5;
|
|
36
|
+
--color-danger-50: #ffe1e0;
|
|
37
|
+
--color-danger-100: #fcccca;
|
|
38
|
+
--color-danger-200: #f8a4a0;
|
|
39
|
+
--color-danger-300: #f37872;
|
|
40
|
+
--color-danger-400: #ef5b53;
|
|
41
|
+
--color-danger-500: #cd433c;
|
|
42
|
+
--color-danger-600: #b12d25;
|
|
43
|
+
--color-danger-700: #861e18;
|
|
44
|
+
--color-danger-800: #601410;
|
|
45
|
+
--color-danger-900: #450f0c;
|
|
46
|
+
--color-info-0: #f5faff;
|
|
47
|
+
--color-info-50: #e0f0ff;
|
|
48
|
+
--color-info-100: #cde4f9;
|
|
49
|
+
--color-info-200: #a7cdf1;
|
|
50
|
+
--color-info-300: #7cb3e7;
|
|
51
|
+
--color-info-400: #62a2df;
|
|
52
|
+
--color-info-500: #4681b9;
|
|
53
|
+
--color-info-600: #3f6a92;
|
|
54
|
+
--color-info-700: #2f4d69;
|
|
55
|
+
--color-info-800: #223649;
|
|
56
|
+
--color-info-900: #1b2937;
|
|
57
|
+
--color-secondary-0: #f1efef;
|
|
58
|
+
--color-secondary-50: #e2dfdf;
|
|
59
|
+
--color-secondary-100: #cdc6c8;
|
|
60
|
+
--color-secondary-200: #a99ea0;
|
|
61
|
+
--color-secondary-300: #87787c;
|
|
62
|
+
--color-secondary-400: #695d60;
|
|
63
|
+
--color-secondary-500: #51484a;
|
|
64
|
+
--color-secondary-600: #41393b;
|
|
65
|
+
--color-secondary-700: #312b2c;
|
|
66
|
+
--color-secondary-800: #231f20;
|
|
67
|
+
--color-secondary-900: #1b1819;
|
|
68
|
+
--spacing-zero: 0px;
|
|
69
|
+
--spacing-xxs: 4px;
|
|
70
|
+
--spacing-xs: 8px;
|
|
71
|
+
--spacing-s: 16px;
|
|
72
|
+
--spacing-m: 24px;
|
|
73
|
+
--spacing-l: 32px;
|
|
74
|
+
--spacing-xl: 40px;
|
|
75
|
+
--spacing-xxl: 48px;
|
|
76
|
+
--radius-s: 4px;
|
|
77
|
+
--radius-m: 8px;
|
|
78
|
+
--radius-l: 16px;
|
|
79
|
+
--text-xxxs: 12px;
|
|
80
|
+
--text-xxs: 14px;
|
|
81
|
+
--text-xs: 16px;
|
|
82
|
+
--text-s: 20px;
|
|
83
|
+
--text-m: 24px;
|
|
84
|
+
--text-l: 32px;
|
|
85
|
+
--text-xl: 40px;
|
|
86
|
+
--text-xxl: 48px;
|
|
87
|
+
--text-xxxl: 64px;
|
|
88
|
+
--font-sans: "Open Sans", system-ui, -apple-system, sans-serif;
|
|
89
|
+
--color-primary-0: #f5faff;
|
|
90
|
+
--color-primary-50: #e0f0ff;
|
|
91
|
+
--color-primary-100: #cde4f9;
|
|
92
|
+
--color-primary-200: #a7cdf1;
|
|
93
|
+
--color-primary-300: #7cb3e7;
|
|
94
|
+
--color-primary-400: #62a2df;
|
|
95
|
+
--color-primary-500: #4681b9;
|
|
96
|
+
--color-primary-600: #3f6a92;
|
|
97
|
+
--color-primary-700: #2f4d69;
|
|
98
|
+
--color-primary-800: #223649;
|
|
99
|
+
--color-primary-900: #1b2937;
|
|
100
|
+
}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
@theme {
|
|
2
|
+
--color-neutral-0: #fafafa;
|
|
3
|
+
--color-neutral-50: #f2f2f2;
|
|
4
|
+
--color-neutral-100: #e3e3e3;
|
|
5
|
+
--color-neutral-200: #d3d3d3;
|
|
6
|
+
--color-neutral-300: #b3b3b3;
|
|
7
|
+
--color-neutral-400: #9c9b9b;
|
|
8
|
+
--color-neutral-500: #7b7a7a;
|
|
9
|
+
--color-neutral-600: #5e5e5e;
|
|
10
|
+
--color-neutral-700: #424242;
|
|
11
|
+
--color-neutral-800: #303030;
|
|
12
|
+
--color-neutral-900: #262626;
|
|
13
|
+
--color-success-0: #f5fffa;
|
|
14
|
+
--color-success-50: #ebfff6;
|
|
15
|
+
--color-success-100: #cdf3e3;
|
|
16
|
+
--color-success-200: #99e1c3;
|
|
17
|
+
--color-success-300: #66cca1;
|
|
18
|
+
--color-success-400: #39bc84;
|
|
19
|
+
--color-success-500: #329f71;
|
|
20
|
+
--color-success-600: #2a7e5b;
|
|
21
|
+
--color-success-700: #26664b;
|
|
22
|
+
--color-success-800: #1e4836;
|
|
23
|
+
--color-success-900: #19382c;
|
|
24
|
+
--color-warning-0: #fffdf5;
|
|
25
|
+
--color-warning-50: #fffbeb;
|
|
26
|
+
--color-warning-100: #fbf1c6;
|
|
27
|
+
--color-warning-200: #f6df83;
|
|
28
|
+
--color-warning-300: #f3ce3a;
|
|
29
|
+
--color-warning-400: #d8ae03;
|
|
30
|
+
--color-warning-500: #b28f00;
|
|
31
|
+
--color-warning-600: #8a6f00;
|
|
32
|
+
--color-warning-700: #685403;
|
|
33
|
+
--color-warning-800: #483a04;
|
|
34
|
+
--color-warning-900: #3b3107;
|
|
35
|
+
--color-danger-0: #fff5f5;
|
|
36
|
+
--color-danger-50: #ffe1e0;
|
|
37
|
+
--color-danger-100: #fcccca;
|
|
38
|
+
--color-danger-200: #f8a4a0;
|
|
39
|
+
--color-danger-300: #f37872;
|
|
40
|
+
--color-danger-400: #ef5b53;
|
|
41
|
+
--color-danger-500: #cd433c;
|
|
42
|
+
--color-danger-600: #b12d25;
|
|
43
|
+
--color-danger-700: #861e18;
|
|
44
|
+
--color-danger-800: #601410;
|
|
45
|
+
--color-danger-900: #450f0c;
|
|
46
|
+
--color-info-0: #f5faff;
|
|
47
|
+
--color-info-50: #e0f0ff;
|
|
48
|
+
--color-info-100: #cde4f9;
|
|
49
|
+
--color-info-200: #a7cdf1;
|
|
50
|
+
--color-info-300: #7cb3e7;
|
|
51
|
+
--color-info-400: #62a2df;
|
|
52
|
+
--color-info-500: #4681b9;
|
|
53
|
+
--color-info-600: #3f6a92;
|
|
54
|
+
--color-info-700: #2f4d69;
|
|
55
|
+
--color-info-800: #223649;
|
|
56
|
+
--color-info-900: #1b2937;
|
|
57
|
+
--color-secondary-0: #f1efef;
|
|
58
|
+
--color-secondary-50: #e2dfdf;
|
|
59
|
+
--color-secondary-100: #cdc6c8;
|
|
60
|
+
--color-secondary-200: #a99ea0;
|
|
61
|
+
--color-secondary-300: #87787c;
|
|
62
|
+
--color-secondary-400: #695d60;
|
|
63
|
+
--color-secondary-500: #51484a;
|
|
64
|
+
--color-secondary-600: #41393b;
|
|
65
|
+
--color-secondary-700: #312b2c;
|
|
66
|
+
--color-secondary-800: #231f20;
|
|
67
|
+
--color-secondary-900: #1b1819;
|
|
68
|
+
--spacing-zero: 0px;
|
|
69
|
+
--spacing-xxs: 4px;
|
|
70
|
+
--spacing-xs: 8px;
|
|
71
|
+
--spacing-s: 16px;
|
|
72
|
+
--spacing-m: 24px;
|
|
73
|
+
--spacing-l: 32px;
|
|
74
|
+
--spacing-xl: 40px;
|
|
75
|
+
--spacing-xxl: 48px;
|
|
76
|
+
--radius-s: 4px;
|
|
77
|
+
--radius-m: 8px;
|
|
78
|
+
--radius-l: 16px;
|
|
79
|
+
--text-xxxs: 12px;
|
|
80
|
+
--text-xxs: 14px;
|
|
81
|
+
--text-xs: 16px;
|
|
82
|
+
--text-s: 20px;
|
|
83
|
+
--text-m: 24px;
|
|
84
|
+
--text-l: 32px;
|
|
85
|
+
--text-xl: 40px;
|
|
86
|
+
--text-xxl: 48px;
|
|
87
|
+
--text-xxxl: 64px;
|
|
88
|
+
--font-sans: "Open Sans", system-ui, -apple-system, sans-serif;
|
|
89
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lemontech/sour-theme",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.3.
|
|
4
|
+
"version": "1.3.6",
|
|
5
5
|
"description": "Tema para antd personalizado para proyectos de Lemontech",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"type": "module",
|
|
@@ -19,7 +19,11 @@
|
|
|
19
19
|
"types": "./dist/index.d.ts",
|
|
20
20
|
"import": "./dist/index.js",
|
|
21
21
|
"require": "./dist/index.cjs"
|
|
22
|
-
}
|
|
22
|
+
},
|
|
23
|
+
"./tailwind-theme.css": "./dist/tailwind-theme.css",
|
|
24
|
+
"./tailwind-lemonsuite.css": "./dist/tailwind-lemonsuite.css",
|
|
25
|
+
"./tailwind-casetracking.css": "./dist/tailwind-casetracking.css",
|
|
26
|
+
"./tailwind-casetracking-firms.css": "./dist/tailwind-casetracking-firms.css"
|
|
23
27
|
},
|
|
24
28
|
"publishConfig": {
|
|
25
29
|
"access": "public"
|