{"_id":"@atomic-design/styles-base","name":"@atomic-design/styles-base","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.3":{"name":"@atomic-design/styles-base","version":"0.1.3","description":"> Minimal, semantic SCSS tokens for atomic design systems.","type":"module","style":"dist/index.css","sass":"index.scss","main":"./dist/index.umd.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.umd.cjs"},"./index.css":"./dist/index.css"},"scripts":{"install_and_build":"npm i && npm run build","build:scss":"vite build --mode scss","build":"npm run build:scss && npm run test && vite build","preview":"vite preview","test":"tsc --project tsconfig.test.json","lint":"eslint ."},"dependencies":{"@atomic-design/design-tokens":"^0.1.3","@atomic-design/types":"^0.1.1"},"devDependencies":{"@types/node":"^22.14.0","codools":"^0.2.17","prettier":"^3.5.3","sass-embedded":"^1.89.2","typed-scss-modules":"^8.1.1","typescript":"^5.8.2","typescript-eslint":"^8.29.0","vite":"^6.3.5","vite-plugin-dts":"^4.5.3","vite-plugin-pretty-module-classnames":"^1.4.1"},"_id":"@atomic-design/styles-base@0.1.3","gitHead":"1f4020bcb72c2992fc63affd64bc176674669571","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-LZL8Ss2Zr1N6T2FQnhc5N7Og2PyYCDO9V6epwrB8I1t69QHdC7TDRsSeEcy2m9LEG9SR5kc78yIjDppMdIK/9w==","shasum":"e30dbe29103ba3a6113c54b8c112dbaf5288a9de","tarball":"https://registry.npmjs.org/@atomic-design/styles-base/-/styles-base-0.1.3.tgz","fileCount":7,"unpackedSize":31909,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC00umIY4vOgebTmVGZ/UPVZ/Uv8/7v3UXSe8RXb/N+dQIgDiljPwdNkATSL8THMhQni4am0MWjjeN7AxZc1uEA0yo="}]},"_npmUser":{"name":"atomic-design","email":"designtokensnpm@gmail.com"},"directories":{},"maintainers":[{"name":"atomic-design","email":"designtokensnpm@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/styles-base_0.1.3_1755257310386_0.9253879056353609"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-15T11:28:30.313Z","0.1.3":"2025-08-15T11:28:30.616Z","modified":"2025-08-15T11:28:30.846Z"},"maintainers":[{"name":"atomic-design","email":"designtokensnpm@gmail.com"}],"description":"> Minimal, semantic SCSS tokens for atomic design systems.","readme":"# @atomic-design/design-tokens\n\n> Minimal, semantic SCSS tokens for atomic design systems.\n\n## Overview\n\nThis library provides a **minimal**, **semantic** set of SCSS variables and mixins that establish a consistent naming standard for any atomic design system. The goal is _not_ to lock in specific values, but to define a small, opinionated base of token names so that every project starts with the same vocabulary:\n\n```scss\n@use \"@atomic-design/design-tokens\" with (\n  // Override defaults here:\n  $color-secondary-500: blue,\n);\n```\n\nBy focusing on _standardized names_ rather than an exhaustive list of values, you get:\n\n- **Fast start:** minimal cognitive load when setting up a new design system.  \n- **Customizable scale:** change only the tokens you need.  \n- **Consistent language:** every project uses the same variable names.\n\n## Installation\n\n```bash\nnpm install @atomic-design/design-tokens --save\n```\n\nor\n\n```bash\nyarn add @atomic-design/design-tokens\n```\n\n## Usage\n\nImport the tokens in your main SCSS entrypoint:\n\n```scss\n@use \"@atomic-design/design-tokens\" as tokens;\n```\n\nUse variables:\n\n```scss\n.button {\n  background-color: tokens.$color-primary;\n  padding: tokens.$spacing-md;\n  @include tokens.body1;\n}\n```\n\nIf you need to override any default, do so in the `with` block before the import.\n\n## Available Tokens\n\n### Color Palette\n\nDrawing from conventions in Tailwind CSS, Material UI, Ant Design, and common Figma libraries, we offer a **10‑step color scale** (50→950) for each semantic category. This mirrors designers’ mental model of light‑to‑dark ramps:\n\n- **Primary** (`color-primary-50 … color-primary-950`): your brand’s core hue, used for primary buttons, links, highlights. Shortcut: `$color-primary` maps to the 500 shade (midpoint).\n- **Secondary** (`color-secondary-50 … color-secondary-950`): neutral surface tones (backgrounds, cards, forms). Shortcut: `$color-secondary`.\n- **Accent** (`color-accent-50 … color-accent-950`): high‑visibility highlights such as badges or call‑to‑actions where a contrasting accent is needed. Shortcut: `$color-accent`.\n- **Success** (`color-success-50 … color-success-950`): confirmatory actions, positive messages (e.g. success toasts). Shortcut: `$color-success`.\n- **Danger** (`color-danger-50 … color-danger-950`): destructive actions, errors, critical alerts. Shortcut: `$color-danger`.\n- **Warning** (`color-warning-50 … color-warning-950`): cautionary states and warnings. Shortcut: `$color-warning`.\n- **Info** (`color-info-50 … color-info-950`): neutral informational messages, tooltips. Shortcut: `$color-info`.\n\nEach category follows the **50** (lightest) to **950** (darkest) step convention popularized by Tailwind and adopted by MUI and Ant Design. Designers in Figma also use this ramp concept for easy prototyping.\n\nBelow are the tokens available (all use `!default` so you can override):\n\n| Category   | Token Range                            | Default Shortcut |\n|------------|----------------------------------------|------------------|\n| Primary    | `$color-primary-50` … `$color-primary-950` | `$color-primary` |\n| Secondary  | `$color-secondary-50` … `$color-secondary-950` | `$color-secondary` |\n| Accent     | `$color-accent-50` … `$color-accent-950` | `$color-accent` |\n| Success    | `$color-success-50` … `$color-success-950` | `$color-success` |\n| Danger     | `$color-danger-50` … `$color-danger-950` | `$color-danger` |\n| Warning    | `$color-warning-50` … `$color-warning-950` | `$color-warning` |\n| Info       | `$color-info-50` … `$color-info-950`    | `$color-info`    |\n\nAdditional semantic helpers:\n\n- **Derived roles** (tailored for text, background, and borders):\n  - `$color-text`, `$color-background`, `$color-border`\n- **Inverse roles** (for dark interfaces):\n  - `$color-text-inverse`, `$color-background-inverse`, `$color-border-inverse`\n\n_Use these scales to ensure consistency with industry standards and give designers a familiar structure._\n\n### Spacing\n\nConsistent spacing scale for margins, padding, and gaps:\n\n- `$spacing-xs` (4px)\n- `$spacing-sm` (8px)\n- `$spacing-md` (16px)\n- `$spacing-lg` (24px)\n- `$spacing-xl` (32px)\n\n### Borders & Radii\n\nBorder widths:\n\n- `$border-none` (0)\n- `$border-md` (1px)\n- `$border-lg` (2px)\n- `$border-xl` (4px)\n\nBorder radius:\n\n- `$radius-none` (0)\n- `$radius-sm` (4px)\n- `$radius-md` (8px)\n- `$radius-lg` (16px)\n- `$radius-full` (same as `$radius-sm`)\n\n### Breakpoints\n\nResponsive breakpoints for media queries:\n\n- `$breakpoint-xs` (360px)\n- `$breakpoint-sm` (640px)\n- `$breakpoint-md` (768px)\n- `$breakpoint-lg` (1024px)\n- `$breakpoint-xl` (1280px)\n\n### Size Tokens\n\nPreset panel/container sizes:\n\n- **Widths:** `$width-xs`, `$width-sm`, `$width-md`, `$width-lg`, `$width-xl`\n- **Heights:** `$height-xs`, `$height-sm`, `$height-md`, `$height-lg`, `$height-xl`\n\n### Typography\n\nDefines font size, line-height, weight, and letter-spacing tokens, plus mixins to apply them:\n\n- **Titles:**\n    - `title1`, `title2`, `title3`\n    - Tokens: `$text-<titleN>-font-size`, `$text-<titleN>-line-height`, `$text-<titleN>-font-weight`, `$text-<titleN>-letter-spacing`\n- **Subtitles:**\n    - `subtitle1`, `subtitle2`\n    - Tokens: `$text-<subtitleN>-font-size`, `$text-<subtitleN>-...` etc.\n- **Body:**\n    - `body1`, `body2`\n    - Tokens: `$text-<bodyN>-font-size`, `$text-<bodyN>-...` etc.\n- **Captions & Overline:**\n    - `caption1`, `caption2`, `overline`\n    - Tokens: `$text-<captionN>-font-size`, `$text-<captionN>-...` etc.\n\nApply styles via mixins:\n\n```scss\n@mixin body1;\n@mixin title2;\n@mixin caption1;\n``` \n\n### Shadows\n\nElevation shadows:\n\n- `$shadow-xs`\n- `$shadow-sm`\n- `$shadow-md`\n- `$shadow-lg`\n- `$shadow-xl`\n\n### Z-Index\n\nStack context levels:\n\n- `$z-index-dropdown`\n- `$z-index-sticky`\n- `$z-index-modal`\n- `$z-index-popover`\n- `$z-index-tooltip`\n\n## Scripts & Tooling\n\n- **Lint:** `npm run lint` – checks SCSS style via Stylelint.\n- **Docs (optional):** `npm run docs` – generate documentation via `codools`.\n\n## Contributing\n\n1. Fork the repo.\n2. Create a branch: `feature/your-change`.\n3. Commit with descriptive message.\n4. Submit a pull request.\n\nPlease follow the existing naming conventions and SCSS lint rules.\n\n## License\n\nMIT © [Your Name]\n\n","readmeFilename":"README.md","_rev":"1-1b7fec55c686690905d4023386190600"}