1.1.1 • Published 11 months ago
@alsacia/style-dictionary v1.1.1
🎨 Design Tokens - Style Dictionary
Este paquete contiene design tokens generados automáticamente con Style Dictionary para Tailwind CSS v4.
📌 Repositorio del código fuente y estructura del paquete:
🔗 Ver código en npm
🔗 También disponible en Flutter: alsacia_style_dictionary
📌 Instalación
Para instalar el paquete en tu proyecto:
npm install @alsacia/style-dictionaryY asegurate de que tu archivo tailwind.config.js importe correctamente los tokens si estás usando PostCSS:
📌 Uso en Tailwind CSS 4
Los tokens están disponibles como un archivo CSS en build/tailwind/tokens.css.
🔧 Importalo en tu CSS raíz (donde importás Tailwind):
@import 'tailwind';
@import "@alsacia/style-dictionary";📌 Usar los tokens en clases de Tailwind
<div class="bg-primary p-md">
Hola, este es un componente con tokens de diseño.
</div>🎨 Tokens agrupados por Namespace
| Namespace | Variable | Valor | Clase Tailwind |
|---|---|---|---|
color | --color-dark-danger | #e63946 | dark-danger |
color | --color-dark-link | #007aff | dark-link |
color | --color-dark-text_80 | rgba(239, 239, 239, 0.8) | dark-text_80 |
color | --color-dark-warning | #f4b51c | dark-warning |
color | --color-dark-text | #efefef | dark-text |
color | --color-dark-background700 | #282828 | dark-background700 |
color | --color-dark-text_60 | rgba(239, 239, 239, 0.6) | dark-text_60 |
color | --color-dark-background600 | #383838 | dark-background600 |
color | --color-dark-background | #1f1f1f | dark-background |
color | --color-dark-success | #1db954 | dark-success |
color | --color-dark-success_40 | rgba(29, 185, 84, 0.4) | dark-success_40 |
color | --color-dark-danger_40 | rgba(230, 57, 70, 0.4) | dark-danger_40 |
color | --color-dark-background700_40 | rgba(40, 40, 40, 0.4) | dark-background700_40 |
color | --color-brand-primary300 | #ffa366 | brand-primary300 |
color | --color-brand-primary | #ff6600 | brand-primary |
color | --color-brand-primary400 | #ff8533 | brand-primary400 |
color | --color-light-text_60 | rgba(51, 51, 51, 0.6) | light-text_60 |
color | --color-light-text_80 | rgba(51, 51, 51, 0.8) | light-text_80 |
color | --color-light-text | #333333 | light-text |
color | --color-light-danger | #c71926 | light-danger |
color | --color-light-warning | #f4b51c | light-warning |
color | --color-light-success | #46e27d | light-success |
color | --color-light-background600 | #c7c7c7 | light-background600 |
color | --color-light-background | #fcfcfc | light-background |
color | --color-light-background700 | #efefef | light-background700 |
color | --color-light-link | #007aff | light-link |
color | --color-light-success_40 | rgba(70, 226, 125, 0.4) | light-success_40 |
color | --color-light-danger_40 | rgba(199, 25, 38, 0.4) | light-danger_40 |
spacing | --spacing-xs | 0.5rem | xs |
spacing | --spacing-3xl | 3rem | 3xl |
spacing | --spacing-2xl | 2.5rem | 2xl |
spacing | --spacing-xl | 2rem | xl |
spacing | --spacing-md | 1.5rem | md |
spacing | --spacing-base | 1rem | base |
spacing | --spacing-sm | 0.75rem | sm |
spacing | --spacing-4xl | 4rem | 4xl |
spacing | --spacing-lg | 1.75rem | lg |
spacing | --spacing-2xs | 0.25rem | 2xs |
radius | --radius-full | 360px | full |
radius | --radius-base | 16px | base |
font-weight | --font-weight-light | 300 | light |
font-weight | --font-weight-regular | 400 | regular |
font-weight | --font-weight-bold | 700 | bold |
text-size | --text-hero | 2.5rem | hero |
text-size | --text-small | 0.75rem | small |
text-size | --text-p | 1rem | p |
text-size | --text-h3 | 1.5rem | h3 |
text-size | --text-h2 | 1.75rem | h2 |
text-size | --text-h1 | 2rem | h1 |
leading | --leading-small | 1rem | small |
leading | --leading-p | 1.5rem | p |
leading | --leading-h3 | 2rem | h3 |
leading | --leading-h2 | 2.25rem | h2 |
leading | --leading-h1 | 2.5rem | h1 |
leading | --leading-hero | 3rem | hero |
blur | --blur-soft | 8px | blur-soft |
blur | --blur-hard | 32px | blur-hard |
shadow | --shadow-elevation1 | 0px 1px 3px 0px #0000004d | elevation1 |
shadow | --shadow-elevation2 | 0px 5px 5px 0px #00000066 | elevation2 |
shadow | --inset-shadow-sinking1 | inset 0px 1px 3px 0px #0000004d | sinking1 |
shadow | --inset-shadow-sinking2 | inset 0px 5px 5px 0px #00000066 | sinking2 |
📚 ¿Estás usando Flutter?
👉 Consultá la versión del paquete para Dart:alsacia_style_dictionary en pub.dev