@chroma-yesid/tokens 0.1.0 → 0.1.2
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 +74 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# @chroma-yesid/tokens
|
|
2
|
+
|
|
3
|
+
Design tokens del sistema `@chroma-yesid`, definidos en formato [DTCG](https://design-tokens.github.io/community-group/format/) y compilados con Style Dictionary a:
|
|
4
|
+
|
|
5
|
+
- CSS para **Tailwind v4** (web) y **Uniwind** (React Native).
|
|
6
|
+
- Constantes y tipos de **TypeScript**.
|
|
7
|
+
- Un `tokens.json` plano.
|
|
8
|
+
- La configuración de `tailwind-merge` que entiende las clases de texto del sistema.
|
|
9
|
+
|
|
10
|
+
Los componentes viven en [`@chroma-yesid/ui`](https://www.npmjs.com/package/@chroma-yesid/ui), que ya incluye estos tokens. Instala este paquete solo si quieres usar los tokens por separado.
|
|
11
|
+
|
|
12
|
+
## Instalación
|
|
13
|
+
|
|
14
|
+
```sh
|
|
15
|
+
npm i @chroma-yesid/tokens
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Uso
|
|
19
|
+
|
|
20
|
+
### Web (Tailwind v4)
|
|
21
|
+
|
|
22
|
+
```css
|
|
23
|
+
@import 'tailwindcss';
|
|
24
|
+
@import '@chroma-yesid/tokens/web.css';
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Después usa clases semánticas: `bg-primary`, `text-foreground`, `text-body-md`, `rounded-lg`. El tema oscuro se aplica con la clase o atributo que defina el CSS generado.
|
|
28
|
+
|
|
29
|
+
### React Native (Uniwind)
|
|
30
|
+
|
|
31
|
+
```css
|
|
32
|
+
@import 'tailwindcss';
|
|
33
|
+
@import 'uniwind';
|
|
34
|
+
@import '@chroma-yesid/tokens/native.css';
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Importa los tokens directamente en tu CSS de entrada: Uniwind no descubre los temas a través de imports anidados.
|
|
38
|
+
|
|
39
|
+
### TypeScript
|
|
40
|
+
|
|
41
|
+
```ts
|
|
42
|
+
import { colors, radius, text, shadow, duration, ease, breakpoint, fontFamily } from '@chroma-yesid/tokens';
|
|
43
|
+
|
|
44
|
+
colors.light.primary; // valor del color en el tema claro
|
|
45
|
+
radius.md; // número, en px
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Los tipos `ColorToken`, `RadiusToken`, `TextToken` y `ThemeName` también se exportan.
|
|
49
|
+
|
|
50
|
+
### `tailwind-merge`
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
import { extendTailwindMerge } from 'tailwind-merge';
|
|
54
|
+
import { twMergeConfig } from '@chroma-yesid/tokens/tw-merge';
|
|
55
|
+
|
|
56
|
+
const twMerge = extendTailwindMerge(twMergeConfig);
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Sin esta configuración, `tailwind-merge` confunde `text-body-md` (tamaño) con un color de texto.
|
|
60
|
+
|
|
61
|
+
## Exports
|
|
62
|
+
|
|
63
|
+
| Ruta | Contenido |
|
|
64
|
+
| --- | --- |
|
|
65
|
+
| `@chroma-yesid/tokens` | Constantes y tipos de TypeScript |
|
|
66
|
+
| `@chroma-yesid/tokens/web.css` | Tema para Tailwind v4 |
|
|
67
|
+
| `@chroma-yesid/tokens/native.css` | Tema para Uniwind |
|
|
68
|
+
| `@chroma-yesid/tokens/tokens.json` | Tokens en JSON plano |
|
|
69
|
+
| `@chroma-yesid/tokens/tw-merge` | Configuración de `tailwind-merge` |
|
|
70
|
+
|
|
71
|
+
## Más información
|
|
72
|
+
|
|
73
|
+
- Código y decisiones de diseño: [github.com/YesidCarrillo26/design-system](https://github.com/YesidCarrillo26/design-system)
|
|
74
|
+
- Licencia: MIT
|