{"_id":"@alessandrogiordano/stk","name":"@alessandrogiordano/stk","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@alessandrogiordano/stk","version":"1.1.0","description":"AI driven design system & workflow — OKLCH design tokens","type":"module","main":"build/js/tokens.js","exports":{".":"./build/js/tokens.js","./css":"./build/css/tokens.css","./json":"./build/json/tokens.json"},"publishConfig":{"access":"public"},"scripts":{"generate-shades":"node scripts/generate-shades.js","build-tokens":"cd style-dictionary && style-dictionary build --config config.cjs","sync-tokens":"cp tokens/base/shades.json ../../apps/storybook/src/tokens/shades.json && cp tokens/base/opacity.json ../../apps/storybook/src/tokens/opacity.json && cp tokens/semantic/*.json ../../apps/storybook/src/tokens/semantic/ && cp build/css/tokens.css ../../apps/storybook/src/tokens/tokens.css","build":"npm run generate-shades && npm run build-tokens && npm run sync-tokens","build-plugin":"node scripts/build-plugin.js","proxy":"node figma-plugin/proxy.cjs","storybook":"cd ../../apps/storybook && npm run storybook","storybook:build":"cd ../../apps/storybook && npm run build-storybook","pull-from-figma":"node --env-file=.env scripts/pull-from-figma.js","audit":"node scripts/audit-components.js","audit:a11y":"node scripts/a11y/build-audit-json.js","audit:playwright":"node scripts/a11y/playwright-runner.js","playwright:install":"playwright install chromium","generate-component":"node --env-file=.env scripts/generate-component.js"},"devDependencies":{"@anthropic-ai/sdk":"^0.36.0","@figma/code-connect":"^1.4.2","@playwright/test":"^1.59.1","axe-core":"^4.11.4","jsdom":"^29.1.1","style-dictionary":"^3.9.2"},"gitHead":"63b21bb63d4f4feab9603ae6df2558a81b3ddbad","_id":"@alessandrogiordano/stk@1.1.0","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-rZumrSDR2yt5GAuDMiN0MVJ84u3hQKMGBLnhaRyAIobB8PdwyJxzDQb0BfXoGzbCsW1Uy+ushVKwoJsCbGDwhg==","shasum":"16ed0fe25a7145f7f186713dee4e91d678e1cd76","tarball":"https://registry.npmjs.org/@alessandrogiordano/stk/-/stk-1.1.0.tgz","fileCount":31,"unpackedSize":175449,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDNRGR58U9Wn3o3OUAuNuThR3DwafrLXCLsKUnsqNworwIhAIadMEfrmB9n8TH0liXxe5hrsxO88Qpi+CCMX+r++HUD"}]},"_npmUser":{"name":"alessandrogiordano","email":"a.giordano.mi@gmail.com"},"directories":{},"maintainers":[{"name":"alessandrogiordano","email":"a.giordano.mi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/stk_1.1.0_1778918840803_0.9057223045545739"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-16T08:07:20.688Z","1.1.0":"2026-05-16T08:07:20.963Z","modified":"2026-05-16T08:07:21.193Z"},"maintainers":[{"name":"alessandrogiordano","email":"a.giordano.mi@gmail.com"}],"description":"AI driven design system & workflow — OKLCH design tokens","readme":"# Design System\n\nToken-based design system con OKLCH color shades e Storybook React.\n\n## Struttura\n\n```\ndesign-system/\n├── tokens/\n│   └── base/\n│       ├── colors.json              # Raw brand colors (edit questi)\n│       └── shades.json              # Auto-generato — non editare a mano\n├── scripts/\n│   └── generate-shades.js          # Genera 16 shades OKLCH + brand token\n├── style-dictionary/\n│   └── config.js                   # Build CSS vars / JSON / ES6\n├── storybook/\n│   ├── .storybook/\n│   │   ├── main.js                  # @storybook/react-webpack5\n│   │   └── preview.js\n│   └── src/\n│       ├── components/\n│       │   ├── ColorPalette.jsx     # Componente principale\n│       │   └── ColorSwatch.jsx      # ShadeCell + BrandTokenRow\n│       ├── stories/\n│       │   └── ColorPalette.stories.jsx  # CSF3 stories\n│       └── utils/\n│           └── contrast.js          # WCAG contrast utilities\n└── package.json\n```\n\n## Setup\n\n### 1. Generare i token\n\n```bash\n# Root del progetto\nnpm install\nnpm run generate-shades   # → tokens/base/shades.json\nnpm run build-tokens      # → build/css, build/json, build/js\n```\n\n### 2. Avviare Storybook\n\n```bash\ncd storybook\nnpm install\nnpm run storybook         # → http://localhost:6006\n```\n\n## Token structure\n\n### `color.shade.<name>.<1-16>`\n16 shades OKLCH per ogni hue.\n- `1` = più vicino al bianco (lightness ~97%)\n- `16` = più vicino al nero (lightness ~10%)\n- La chroma segue una curva naturale: picco a metà scala, compressa agli estremi\n\n### `color.brand.<name>`\nHex esatto del brand color originale. **Non fa parte della scala shades.**\nUsare solo per momenti specifici in cui serve il colore di brand preciso\n(es. logo, brand moment), non per le scale UI.\n\n## Aggiungere un colore\n\nIn `tokens/base/colors.json`:\n\n```json\n\"emerald\": { \"value\": \"#059669\", \"comment\": \"Brand Emerald\" }\n```\n\nPoi:\n```bash\nnpm run generate-shades\nnpm run build-tokens\n```\n\n## Stories disponibili\n\n| Story         | Descrizione                                      |\n|---------------|--------------------------------------------------|\n| Full Palette  | Tutti i colori con brand token                   |\n| Cool Hues     | Blue, indigo, violet, cyan, teal                 |\n| Warm Hues     | Red, orange, amber, pink                         |\n| Shades Only   | Tutti i colori senza brand token row             |\n| Single Color  | Un singolo hue (selezionabile via controls)      |\n\n## Controls Storybook\n\n- **colors** (checkbox) — seleziona quali hue visualizzare\n- **showBrandToken** (boolean) — mostra/nasconde la riga brand token\n\n## Output StyleDictionary\n\n```\nbuild/\n├── css/tokens.css   → :root { --ds-color-shade-blue-1: oklch(...) }\n├── json/tokens.json → { \"ds-color-shade-blue-1\": \"oklch(...)\" }\n└── js/tokens.js     → export const DsColorShadeBlue1 = \"oklch(...)\"\n```\n","readmeFilename":"README.md","_rev":"1-6bb48096b82a003945c591e5b04e958e"}