{"_id":"@emilioocelotl/tokens","name":"@emilioocelotl/tokens","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@emilioocelotl/tokens","version":"0.1.0","description":"Design tokens del sistema ocelotl.cc — tipografía, paleta, escala","keywords":["design-tokens","css","ocelotl"],"author":{"name":"Emilio Ocelotl"},"license":"MIT","main":"index.css","style":"index.css","exports":{".":"./index.css","./dark.css":"./src/dark.css","./paper.css":"./src/paper.css","./scale.css":"./src/scale.css"},"repository":{"type":"git","url":"git+https://github.com/emilioocelotl/tokens.git"},"gitHead":"2ac0c864db919df2ec7a0609311e65864d65c350","bugs":{"url":"https://github.com/emilioocelotl/tokens/issues"},"homepage":"https://github.com/emilioocelotl/tokens#readme","_id":"@emilioocelotl/tokens@0.1.0","_nodeVersion":"22.22.0","_npmVersion":"9.2.0","dist":{"integrity":"sha512-D8Z4BPo5k4nNoIa5lFuIkWSCcq9w4ODZ5dNVzEHTJVHgvWwxaUVB2dZtffIRwqDKUGsGpDTDII1Pfx3NkDJznw==","shasum":"6de998a765d9e76a511f0eb23a70dfbaf0ebb0c9","tarball":"https://registry.npmjs.org/@emilioocelotl/tokens/-/tokens-0.1.0.tgz","fileCount":3,"unpackedSize":4334,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAtXvnaDe+D580lG5zyv77eMiyaXtjYBh6VWZiJLY0u6AiEAma6gt7EWzN4I39pWNxefGaSLpkLgEPYz/lk+A97PgNg="}]},"_npmUser":{"name":"emilioocelotl","email":"emilio.ocelotl@gmail.com"},"directories":{},"maintainers":[{"name":"emilioocelotl","email":"emilio.ocelotl@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tokens_0.1.0_1775781842998_0.8295528872124358"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-10T00:44:02.883Z","0.1.0":"2026-04-10T00:44:03.131Z","modified":"2026-04-10T00:44:03.335Z"},"maintainers":[{"name":"emilioocelotl","email":"emilio.ocelotl@gmail.com"}],"description":"Design tokens del sistema ocelotl.cc — tipografía, paleta, escala","homepage":"https://github.com/emilioocelotl/tokens#readme","keywords":["design-tokens","css","ocelotl"],"repository":{"type":"git","url":"git+https://github.com/emilioocelotl/tokens.git"},"author":{"name":"Emilio Ocelotl"},"bugs":{"url":"https://github.com/emilioocelotl/tokens/issues"},"license":"MIT","readme":"# @emilioocelotl/tokens\n\nDesign tokens del sistema de diseño `ocelotl`. Tipografía, paleta cromática y escala espacial para proyectos web y materiales impresos.\n\n**Tipografía:** Syne 800 (display) + Inconsolata (cuerpo)  \n**Paleta:** Negro profundo · Teal · Papel natura  \n**Modos:** oscuro (interfaces, piezas, 3D) · papel (Riso, documentos, tesis)\n\n---\n\n## Instalación\n\n```bash\nnpm install @emilioocelotl/tokens\n```\n\n## Uso\n\n### Sistema completo (recomendado)\n\n```css\n@import '@emilioocelotl/tokens';\n```\n\nAplica el modo oscuro por defecto en `:root`. Activa el modo papel con `data-mode` o clase:\n\n```html\n<!-- modo oscuro — interfaces, piezas -->\n<html data-mode=\"dark\">\n\n<!-- modo papel — documentos, tesis -->\n<body data-mode=\"paper\">\n\n<!-- por sección -->\n<section class=\"mode-paper\">...</section>\n```\n\n### Solo un modo\n\n```css\n@import '@emilioocelotl/tokens/dark.css';\n@import '@emilioocelotl/tokens/paper.css';\n```\n\n### Solo escala (tipografía + espacio, sin colores)\n\n```css\n@import '@emilioocelotl/tokens/scale.css';\n```\n\n### Sin bundler (CDN)\n\n```html\n<link rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/@emilioocelotl/tokens/index.css\">\n```\n\n---\n\n## Tokens disponibles\n\n### Colores (por modo)\n\n| Token | Modo oscuro | Modo papel |\n|---|---|---|\n| `--color-bg` | `#090D0D` | `#F5F0E8` |\n| `--color-text` | `#E8F0F0` | `#1a1a1a` |\n| `--color-accent` | `#00B5B2` | `#007D7B` |\n| `--color-accent-hi` | `#00D4D0` | `#005F5D` |\n| `--color-accent-lo` | `#004F4E` | `#CCE8E8` |\n| `--color-overprint` | `#002524` | `#002524` |\n| `--color-border` | `rgba(teal, 0.10)` | `rgba(negro, 0.15)` |\n\n### Tipografía\n\n```css\n--font-display: 'Syne', sans-serif;\n--font-body:    'Inconsolata', monospace;\n\n--text-xs:   10.5px;\n--text-sm:   12px;\n--text-base: 14px;\n--text-md:   16px;\n--text-lg:   21px;\n--text-xl:   28px;\n--text-2xl:  37px;\n--text-3xl:  50px;\n--text-4xl:  66px;\n```\n\n> Las fuentes no se cargan automáticamente. Agrega este link en tu HTML:\n> ```html\n> <link href=\"https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Inconsolata:wght@400;700&display=swap\" rel=\"stylesheet\">\n> ```\n\n### Espacio\n\n```css\n--space-1: 4px   --space-6: 24px\n--space-2: 8px   --space-8: 32px\n--space-3: 12px  --space-10: 40px\n--space-4: 16px  --space-12: 48px\n--space-5: 20px  --space-16: 64px\n```\n\n### Radios de borde\n\n```css\n--radius-none: 0px;    /* Riso / brutalismo */\n--radius-sm:   4px;\n--radius-md:   8px;\n--radius-lg:   12px;\n--radius-pill: 999px;\n```\n","readmeFilename":"README.md","_rev":"1-79a179026b17fdd0e59b0d76dcf816c3"}