{"_id":"@dreadkn1ght123/tokens","_rev":"2-e10fb7d0b827706dcec10bb8fae010c0","name":"@dreadkn1ght123/tokens","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@dreadkn1ght123/tokens","version":"0.1.0","_id":"@dreadkn1ght123/tokens@0.1.0","maintainers":[{"name":"dreadkn1ght123","email":"dreadkn1ght123@gmail.com"}],"dist":{"shasum":"1adfe89e3caaade5d032c350448cd7339826f4cf","tarball":"https://registry.npmjs.org/@dreadkn1ght123/tokens/-/tokens-0.1.0.tgz","fileCount":10,"integrity":"sha512-ive6zDAs7C5Aytai6BE7n9HJmeIhaZi4fnv5raj95x5Gy973yriDqv9VjaXLqmIeuzpBhDlj76mMBttSRouKPA==","signatures":[{"sig":"MEQCIBOUVNthj14nhO/VFWT5Q7DmWa/+/w5oRPI9AAqD4jXNAiAqhp41BUb7tO/9UisfBKxGTYlqHoc3TxrO/ptHjmRuhA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42190},"main":"./dist/index.js","type":"module","_from":"file:dreadkn1ght123-tokens-0.1.0.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./theme.css":"./theme.css","./tokens.json":"./tokens.json"},"scripts":{"build":"vite build && cp tokens.json dist/tokens.json","typecheck":"tsc -p tsconfig.json --noEmit"},"_npmUser":{"name":"dreadkn1ght123","email":"dreadkn1ght123@gmail.com"},"_resolved":"/tmp/70aba7d933972d0705c621a65c595522/dreadkn1ght123-tokens-0.1.0.tgz","_integrity":"sha512-ive6zDAs7C5Aytai6BE7n9HJmeIhaZi4fnv5raj95x5Gy973yriDqv9VjaXLqmIeuzpBhDlj76mMBttSRouKPA==","_npmVersion":"11.6.2","description":"Shared design tokens for the `@dreadkn1ght123` design system — available in three formats so both **web** and **React Native** apps can consume the same brand values.","directories":{},"_nodeVersion":"24.12.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.2","typescript":"~5.9.3","@types/node":"^25.3.3","vite-plugin-dts":"^4.5.4"},"_npmOperationalInternal":{"tmp":"tmp/tokens_0.1.0_1786993968260_0.5488571694494815","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@dreadkn1ght123/tokens","version":"0.1.1","type":"module","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./theme.css":"./theme.css","./tokens.json":"./tokens.json"},"main":"./dist/index.js","types":"./dist/index.d.ts","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"devDependencies":{"@types/node":"^25.3.3","typescript":"~5.9.3","vite":"^7.3.2","vite-plugin-dts":"^4.5.4"},"scripts":{"build":"vite build && cp tokens.json dist/tokens.json","typecheck":"tsc -p tsconfig.json --noEmit"},"_id":"@dreadkn1ght123/tokens@0.1.1","description":"Shared design tokens for the `@dreadkn1ght123` design system — available in three formats so both **web** and **React Native** apps can consume the same brand values.","_integrity":"sha512-QZbqJTNj00nMNox0E+IfteecCiXvxlTl/sEWSFYsVPFdj6SwBNpblofiuCTK7sC54Hgc2TvQQT0JgfP5roAdug==","_resolved":"/tmp/71bce9b8f4697436e3f7864b19779b53/dreadkn1ght123-tokens-0.1.1.tgz","_from":"file:dreadkn1ght123-tokens-0.1.1.tgz","_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-QZbqJTNj00nMNox0E+IfteecCiXvxlTl/sEWSFYsVPFdj6SwBNpblofiuCTK7sC54Hgc2TvQQT0JgfP5roAdug==","shasum":"7815926db7001ba871a8738612562e1cffb9dc16","tarball":"https://registry.npmjs.org/@dreadkn1ght123/tokens/-/tokens-0.1.1.tgz","fileCount":11,"unpackedSize":45704,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC7nj+JxZjADxvjeMlC529qsd/0L8ZZ9+AIaMzxj+FQDAIgUxnVaRLbKwC/+dCzkHyB71JXetNvhTomW+ozxTtF2LU="}]},"_npmUser":{"name":"dreadkn1ght123","email":"dreadkn1ght123@gmail.com"},"directories":{},"maintainers":[{"name":"dreadkn1ght123","email":"dreadkn1ght123@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tokens_0.1.1_1787089450559_0.00646316753991516"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T19:12:48.018Z","modified":"2026-08-18T21:44:10.863Z","0.1.0":"2026-08-17T19:12:48.407Z","0.1.1":"2026-08-18T21:44:10.719Z"},"description":"Shared design tokens for the `@dreadkn1ght123` design system — available in three formats so both **web** and **React Native** apps can consume the same brand values.","maintainers":[{"name":"dreadkn1ght123","email":"dreadkn1ght123@gmail.com"}],"readme":"# @dreadkn1ght123/tokens\n\nShared design tokens for the `@dreadkn1ght123` design system — available in three formats so both **web** and **React Native** apps can consume the same brand values.\n\n## Installation\n\n```bash\npnpm add @dreadkn1ght123/tokens\n```\n\n---\n\n## Import patterns\n\n### 1. Web CSS — custom properties\n\nImport the CSS file once in your app's CSS entry, **after** `@import \"tailwindcss\"`:\n\n```css\n@import \"tailwindcss\";\n@import \"@dreadkn1ght123/tokens/theme.css\";\n```\n\nAll tokens are exposed as CSS custom properties (`--background`, `--primary`, `--radius`, etc.) and Tailwind v4 utilities are wired up automatically via `@theme inline`.\n\n> Identical to `@dreadkn1ght123/ui/theme.css` — use this package when you need the tokens without the full component library.\n\n---\n\n### 2. React Native — typed JS objects\n\n```tsx\nimport { StyleSheet } from \"react-native\";\nimport { light, dark } from \"@dreadkn1ght123/tokens\";\n\n// Pick the mode that matches the system color scheme\nimport { useColorScheme } from \"react-native\";\n\nexport function useTokens() {\n  const scheme = useColorScheme();\n  return scheme === \"dark\" ? dark : light;\n}\n\n// Example: using tokens in a StyleSheet\nconst tokens = light; // or dark\n\nconst styles = StyleSheet.create({\n  card: {\n    backgroundColor: tokens.colors.card,\n    borderColor: tokens.colors.cardBorder,\n    borderWidth: 1,\n    borderRadius: tokens.radii.lg,\n    padding: 16,\n  },\n  title: {\n    color: tokens.colors.foreground,\n    fontFamily: tokens.fonts.sans,\n    fontSize: 16,\n    fontWeight: \"600\",\n  },\n  button: {\n    backgroundColor: tokens.colors.primary,\n    borderRadius: tokens.radii.md,\n    paddingHorizontal: 16,\n    paddingVertical: 10,\n  },\n  buttonText: {\n    color: tokens.colors.primaryForeground,\n    fontWeight: \"600\",\n  },\n});\n```\n\n#### Token shape\n\n```ts\ninterface Tokens {\n  colors: {\n    background: string;        // e.g. \"#ffffff\"\n    foreground: string;\n    border: string;\n    primary: string;           // brand blue #0f2efd\n    primaryForeground: string;\n    // … full set — see src/index.ts for complete interface\n  };\n  radii: {\n    base: number;  // 10  (0.625 rem)\n    sm: number;    // 6\n    md: number;    // 8\n    lg: number;    // 10\n    xl: number;    // 14\n  };\n  fonts: {\n    sans: string;  // \"'Inter', system-ui, sans-serif\"\n    serif: string;\n    mono: string;\n  };\n  shadows: {\n    \"2xs\": string;\n    xs: string;\n    sm: string;\n    DEFAULT: string;\n    md: string;\n    lg: string;\n    xl: string;\n    \"2xl\": string;\n  };\n}\n```\n\n---\n\n### 3. Tooling / Figma plugins — JSON\n\n```js\n// Node.js / bundler-agnostic\nimport tokens from \"@dreadkn1ght123/tokens/tokens.json\";\n\nconsole.log(tokens.light.colors.primary);  // \"#0f2efd\"\nconsole.log(tokens.dark.colors.background); // \"#18181b\"\n```\n\nThe JSON file has the same `{ light, dark }` structure as the TS exports and can be consumed by Figma plugins, Style Dictionary, token pipelines, or any tooling that can read JSON.\n\n---\n\n## Package exports\n\n| Export | Format | Use case |\n|---|---|---|\n| `@dreadkn1ght123/tokens` | ES module (JS + types) | React Native, bundled web apps |\n| `@dreadkn1ght123/tokens/theme.css` | CSS | Tailwind v4 web apps |\n| `@dreadkn1ght123/tokens/tokens.json` | JSON | Figma plugins, codegen, tooling |\n\n---\n\n## Color palette overview\n\n| Token | Light | Dark |\n|---|---|---|\n| `background` | `#ffffff` | `#18181b` |\n| `foreground` | `#18181b` | `#fafafa` |\n| `primary` | `#0f2efd` | `#0f2efd` |\n| `muted` | `#f4f4f5` | `#3f3f46` |\n| `destructive` | `#ef4444` | `#f87171` |\n| `chart1` | `#a3e635` | `#a3e635` |\n","readmeFilename":"README.md"}