@prolibu-suite/cobalt-tokens 0.1.0 → 0.1.1
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 +65 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# @prolibu-suite/cobalt-tokens
|
|
2
|
+
|
|
3
|
+
Design tokens del **Cobalt Design System** — colores, tipografía, spacing, radius y sombras como CSS variables, SCSS y JS/TS.
|
|
4
|
+
|
|
5
|
+
> Elemento #27. El azul que no se desvanece. La estructura invisible que hace que todo funcione.
|
|
6
|
+
|
|
7
|
+
## Instalación
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @prolibu-suite/cobalt-tokens
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Uso
|
|
14
|
+
|
|
15
|
+
### CSS
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
@import '@prolibu-suite/cobalt-tokens/css'; /* tema claro */
|
|
19
|
+
@import '@prolibu-suite/cobalt-tokens/css/dark'; /* tokens dark mode (auto via prefers-color-scheme) */
|
|
20
|
+
|
|
21
|
+
.miCard {
|
|
22
|
+
background: var(--co-semantic-surface-primary);
|
|
23
|
+
color: var(--co-semantic-text-default);
|
|
24
|
+
padding: var(--co-spacing-lg);
|
|
25
|
+
border-radius: var(--co-border-radius-sm);
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### SCSS
|
|
30
|
+
|
|
31
|
+
```scss
|
|
32
|
+
@use '@prolibu-suite/cobalt-tokens/scss' as tokens;
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### JS / TS
|
|
36
|
+
|
|
37
|
+
```ts
|
|
38
|
+
import { tokens } from '@prolibu-suite/cobalt-tokens';
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Sin build · vía CDN
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<link rel="stylesheet" href="https://unpkg.com/@prolibu-suite/cobalt-tokens@0.1.1/build/css/tokens.css">
|
|
45
|
+
<link rel="stylesheet" href="https://unpkg.com/@prolibu-suite/cobalt-tokens@0.1.1/build/css/tokens-dark.css">
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Cuatro colores de marca
|
|
49
|
+
|
|
50
|
+
Cuatro compuestos químicos del mismo elemento:
|
|
51
|
+
|
|
52
|
+
| Token | Compuesto | Hex | Uso |
|
|
53
|
+
|---|---|---|---|
|
|
54
|
+
| `--co-color-primary-azul` | CoAl₂O₄ | `#2563EB` | Acciones primarias, links |
|
|
55
|
+
| `--co-color-primary-verde` | CoCO₃ | `#02A270` | Success, estados activos |
|
|
56
|
+
| `--co-color-primary-rosado` | Co(OH)₂ | `#F32A73` | Acentos, badges |
|
|
57
|
+
| `--co-color-primary-amarillo` | CoC₂O₄ | `#FDBF00` | Warnings, highlights |
|
|
58
|
+
|
|
59
|
+
## Documentación
|
|
60
|
+
|
|
61
|
+
→ [cobalt-docs](https://dev10.prolibu.com/ui/static/cobalt-docs/theming/tokens/) — referencia completa de tokens, dark mode, theming.
|
|
62
|
+
|
|
63
|
+
## License
|
|
64
|
+
|
|
65
|
+
MIT
|