{"_id":"@beauginbey/vanilla-colors","name":"@beauginbey/vanilla-colors","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@beauginbey/vanilla-colors","version":"0.1.0","description":"Accessible color system for Vanilla Design System","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","sideEffects":["*.css"],"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./css":{"import":"./dist/index.css","require":"./dist/index.css","default":"./dist/index.css"},"./css/*.css":{"import":"./dist/*.css","require":"./dist/*.css","default":"./dist/*.css"}},"dependencies":{"culori":"^4.0.1"},"devDependencies":{"@types/node":"^20.0.0","tsup":"^8.0.0","tsx":"^4.0.0","typescript":"^5.3.3"},"publishConfig":{"access":"public"},"scripts":{"dev":"tsup --watch","build":"tsup","build:css":"tsx scripts/build-css.ts","clean":"rm -rf dist","type-check":"tsc --noEmit"},"_id":"@beauginbey/vanilla-colors@0.1.0","_integrity":"sha512-sFzXsDmlReoQEK3889UOXW+Ok7ulG0rnr2dyFxfBbl2rfKbf0Hpfrh+MSQr1fSMpOcKL7ft1+sQsEfzjhWLBow==","_resolved":"/private/var/folders/8x/q5c5hlfj61dd7rr8b0rbkcm80000gn/T/7ca00ff83bdbdfb8fec0e023f7e912bc/beauginbey-vanilla-colors-0.1.0.tgz","_from":"file:beauginbey-vanilla-colors-0.1.0.tgz","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-sFzXsDmlReoQEK3889UOXW+Ok7ulG0rnr2dyFxfBbl2rfKbf0Hpfrh+MSQr1fSMpOcKL7ft1+sQsEfzjhWLBow==","shasum":"8f19cd3860104aa4dde1bbb544ca94fe84f4ad98","tarball":"https://registry.npmjs.org/@beauginbey/vanilla-colors/-/vanilla-colors-0.1.0.tgz","fileCount":17,"unpackedSize":135278,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDQrRfLlqbbtLEyFRWVTNcv8ib/yUdSKzKek22h2pwgjwIgLUB/eiaWbx2x/9n1EaSwrqfbDkhGAdwCye73ZLmVtXU="}]},"_npmUser":{"name":"bginbey","email":"bginbey@gmail.com"},"directories":{},"maintainers":[{"name":"bginbey","email":"bginbey@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vanilla-colors_0.1.0_1749550796969_0.6403466652367835"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-10T10:19:56.876Z","0.1.0":"2025-06-10T10:19:57.147Z","modified":"2025-06-10T10:19:57.479Z"},"maintainers":[{"name":"bginbey","email":"bginbey@gmail.com"}],"description":"Accessible color system for Vanilla Design System","readme":"# @beauginbey/vanilla-colors\n\nA comprehensive color system inspired by Radix UI Colors, providing accessible color scales with automatic dark mode support.\n\n## Installation\n\n```bash\nnpm install @beauginbey/vanilla-colors\n```\n\n## Usage\n\n### CSS Variables\n\nImport the CSS file to use color variables:\n\n```css\n/* Import all colors */\n@import \"@beauginbey/vanilla-colors/css\";\n\n/* Or import specific colors */\n@import \"@beauginbey/vanilla-colors/css/gray.css\";\n@import \"@beauginbey/vanilla-colors/css/blue.css\";\n```\n\nThen use the CSS variables in your styles:\n\n```css\n.component {\n  background: var(--gray-1);  /* App background */\n  color: var(--gray-12);      /* High-contrast text */\n  border: 1px solid var(--gray-7); /* UI element border */\n}\n\n/* Dark mode automatically applied with .dark class */\n.dark .component {\n  /* Variables automatically switch to dark values */\n}\n```\n\n### JavaScript/TypeScript\n\n```typescript\nimport { gray, blue, green } from '@beauginbey/vanilla-colors';\n\n// Use in CSS-in-JS\nconst styles = {\n  backgroundColor: gray[1],\n  color: gray[12],\n  borderColor: gray[7],\n};\n```\n\n## The 12-Step Scale\n\nEach color scale has 12 steps with specific use cases:\n\n### Background Colors (Steps 1-5)\n- **Step 1**: App background\n- **Step 2**: Subtle background\n- **Step 3**: UI element background\n- **Step 4**: Hovered UI element background\n- **Step 5**: Active/selected UI element background\n\n### Border Colors (Steps 6-8)\n- **Step 6**: Subtle borders and separators\n- **Step 7**: UI element border and focus rings\n- **Step 8**: Hovered UI element border\n\n### Solid Colors (Steps 9-10)\n- **Step 9**: Solid backgrounds (buttons, badges)\n- **Step 10**: Hovered solid backgrounds\n\n### Text Colors (Steps 11-12)\n- **Step 11**: Low-contrast text\n- **Step 12**: High-contrast text\n\n## Available Colors\n\n### Neutrals\n- `gray`, `grayA` - Default neutral scale\n\n### Colors\n- `blue`, `blueA` - Primary brand color\n- `green`, `greenA` - Success states\n- `red`, `redA` - Error/danger states\n- `yellow`, `yellowA` - Warning states (dark text)\n- `orange`, `orangeA` - Alternative accent (dark text)\n- `purple`, `purpleA` - Secondary accent\n\n### Overlays\n- `blackA` - Black with alpha\n- `whiteA` - White with alpha\n\n## Dark Mode\n\nDark mode is automatically enabled when the `.dark` class is applied to the document:\n\n```javascript\n// Enable dark mode\ndocument.documentElement.classList.add('dark');\n\n// Disable dark mode\ndocument.documentElement.classList.remove('dark');\n```\n\n## Creating Custom Scales\n\nGenerate custom color scales from your brand colors:\n\n```typescript\nimport { createCustomScale } from '@beauginbey/vanilla-colors';\n\nconst brandColors = createCustomScale({\n  name: 'brand',\n  baseColor: '#5B21B6', // Your brand color\n});\n\n// Returns:\n// - brand (light scale)\n// - brandDark (dark scale)\n// - brandA (light alpha)\n// - brandDarkA (dark alpha)\n```\n\n## Accessibility\n\nAll color scales are designed with APCA (Accessible Perceptual Contrast Algorithm) to ensure:\n- Step 11 has Lc 60 contrast against step 2 (for body text)\n- Step 12 has Lc 90 contrast against step 2 (for headings)\n- Step 9 is optimized for white foreground text\n\n## Integration with Vanilla Extract\n\n```typescript\nimport { vars } from './theme.css';\n\n// Map to CSS variables\nexport const theme = {\n  color: {\n    gray1: 'var(--gray-1)',\n    gray2: 'var(--gray-2)',\n    // ... etc\n  }\n};\n```","readmeFilename":"README.md","_rev":"1-ab6ef1a34c426ac880893bc2cd64db2c"}