{"_id":"@astacinco/rn-theming","_rev":"2-9511b3c97c749663e9c1c22c24c28edd","name":"@astacinco/rn-theming","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@astacinco/rn-theming","version":"0.1.0","keywords":["react-native","theming","dark-mode","design-system"],"author":{"name":"Spark Labs","email":"hello@sparklabs.dev"},"license":"MIT","_id":"@astacinco/rn-theming@0.1.0","maintainers":[{"name":"sparklabs343","email":"gomez.rudy@gmail.com"}],"homepage":"https://github.com/jrudydev/rn-toolkit#readme","bugs":{"url":"https://github.com/jrudydev/rn-toolkit/issues"},"dist":{"shasum":"3429e53d6357c9cb44542da243029da9c1de1dbb","tarball":"https://registry.npmjs.org/@astacinco/rn-theming/-/rn-theming-0.1.0.tgz","fileCount":12,"integrity":"sha512-M/0pSC6unpMoLittdiFQmKTWJoLsov+8JxjorCBWDfBrsHWsUxyPQAb0/3oPxDPQWrLoDkH2ZYLpP6RDnecx/Q==","signatures":[{"sig":"MEYCIQCLjEBRGBNLlsomCv0JsQMGIrxofYRpu3w03RbeuMY//QIhAPB1U3g7te+0wV+60ZdlS5lJq28oDwODvsMOuDzhugNw","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20516},"main":"src/index.ts","types":"src/index.ts","gitHead":"6fa965625ad344ec91902e42e12b2000624373ea","scripts":{"lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsc"},"_npmUser":{"name":"sparklabs343","email":"gomez.rudy@gmail.com"},"repository":{"url":"git+https://github.com/jrudydev/rn-toolkit.git","type":"git","directory":"packages/theming"},"_npmVersion":"10.8.2","description":"Scope-based theming system for React Native","directories":{},"_nodeVersion":"20.19.6","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"18.2.0","typescript":"^5.3.3","@types/react":"^18.2.48","react-native":"0.73.4","react-test-renderer":"18.2.0","@testing-library/react-native":"^12.4.3"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.72.0"},"_npmOperationalInternal":{"tmp":"tmp/rn-theming_0.1.0_1772793169585_0.7214514007447761","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@astacinco/rn-theming","version":"0.2.0","description":"Scope-based theming system for React Native","main":"src/index.ts","types":"src/index.ts","repository":{"type":"git","url":"git+https://github.com/jrudydev/rn-toolkit.git","directory":"packages/theming"},"publishConfig":{"access":"public"},"author":{"name":"Spark Labs","email":"hello@sparklabs.dev"},"homepage":"https://github.com/jrudydev/rn-toolkit#readme","scripts":{"build":"tsc","test":"jest","lint":"eslint src --ext .ts,.tsx"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.72.0"},"devDependencies":{"@testing-library/react-native":"^12.4.3","@types/react":"~19.1.0","react-test-renderer":"19.1.0","typescript":"^5.3.3"},"keywords":["react-native","theming","dark-mode","design-system"],"license":"MIT","_id":"@astacinco/rn-theming@0.2.0","gitHead":"ebaf6560babf6a6b935f53166ba59d28be7f4033","bugs":{"url":"https://github.com/jrudydev/rn-toolkit/issues"},"_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-zoKVO7MYkPa3eqs/lkYimzId6GTzTKHWoMGnQN6WmmDkoUwN29bprQCSaKjadH9U2nbOYZPXU16HPB8zA4+lAA==","shasum":"ee0a011fdf75e76804d19d491a056d408b065d27","tarball":"https://registry.npmjs.org/@astacinco/rn-theming/-/rn-theming-0.2.0.tgz","fileCount":14,"unpackedSize":27513,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIET9QrCjMObytUUkVdx5+hY3m/VkZewCJglSMOZ+XrO6AiEAjG2ibjHTNlxeoW3Z6BJdofAWJ+MeW3C7jE95JI+YvAk="}]},"_npmUser":{"name":"sparklabs343","email":"gomez.rudy@gmail.com"},"directories":{},"maintainers":[{"name":"sparklabs343","email":"gomez.rudy@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rn-theming_0.2.0_1773450951938_0.47050181658799795"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-06T10:32:49.488Z","modified":"2026-03-14T01:15:52.220Z","0.1.0":"2026-03-06T10:32:49.730Z","0.2.0":"2026-03-14T01:15:52.084Z"},"bugs":{"url":"https://github.com/jrudydev/rn-toolkit/issues"},"author":{"name":"Spark Labs","email":"hello@sparklabs.dev"},"license":"MIT","homepage":"https://github.com/jrudydev/rn-toolkit#readme","keywords":["react-native","theming","dark-mode","design-system"],"repository":{"type":"git","url":"git+https://github.com/jrudydev/rn-toolkit.git","directory":"packages/theming"},"description":"Scope-based theming system for React Native","maintainers":[{"name":"sparklabs343","email":"gomez.rudy@gmail.com"}],"readme":"# @astacinco/rn-theming\n\nScope-based theming system for React Native with dark/light mode support.\n\n## Features\n\n- **ThemeProvider** with scope support\n- **useTheme()** hook for components\n- **Dark/Light mode** detection and manual override\n- **Theme tokens**: colors, spacing, typography, shadows\n- **Scope-based theming** (different themes for different UI sections)\n\n## Installation\n\n```bash\nyarn add @astacinco/rn-theming\n```\n\n## Quick Start\n\n```tsx\nimport { ThemeProvider, useTheme } from '@astacinco/rn-theming';\n\n// Wrap your app\nfunction App() {\n  return (\n    <ThemeProvider mode=\"auto\">\n      <MyScreen />\n    </ThemeProvider>\n  );\n}\n\n// Use in components\nfunction MyScreen() {\n  const { colors, spacing, mode } = useTheme();\n\n  return (\n    <View style={{ backgroundColor: colors.background, padding: spacing.md }}>\n      <Text style={{ color: colors.text }}>\n        Current mode: {mode}\n      </Text>\n    </View>\n  );\n}\n```\n\n## API\n\n### ThemeProvider\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `mode` | `'light' \\| 'dark' \\| 'auto'` | `'auto'` | Theme mode |\n| `theme` | `ThemeTokens` | `defaultTheme` | Custom theme tokens |\n| `scope` | `string` | `'global'` | Theme scope identifier |\n\n### useTheme()\n\nReturns the current theme context:\n\n```typescript\ninterface ThemeContext {\n  mode: 'light' | 'dark';\n  colors: ColorTokens;\n  spacing: SpacingTokens;\n  typography: TypographyTokens;\n  shadows: ShadowTokens;\n  setMode: (mode: 'light' | 'dark' | 'auto') => void;\n}\n```\n\n### Theme Tokens\n\n```typescript\ninterface ColorTokens {\n  // Backgrounds\n  background: string;\n  backgroundSecondary: string;\n  surface: string;\n\n  // Text\n  text: string;\n  textSecondary: string;\n  textMuted: string;\n\n  // Brand\n  primary: string;\n  primaryLight: string;\n  primaryDark: string;\n\n  // Semantic\n  success: string;\n  error: string;\n  warning: string;\n  info: string;\n\n  // Borders\n  border: string;\n  borderLight: string;\n}\n\ninterface SpacingTokens {\n  xs: number;  // 4\n  sm: number;  // 8\n  md: number;  // 16\n  lg: number;  // 24\n  xl: number;  // 32\n  xxl: number; // 48\n}\n```\n\n## Scoped Themes\n\nUse different themes for different parts of your app:\n\n```tsx\n<ThemeProvider scope=\"global\" mode=\"light\">\n  <MainApp />\n\n  {/* Modal has its own dark theme */}\n  <ThemeProvider scope=\"modal\" mode=\"dark\">\n    <Modal />\n  </ThemeProvider>\n</ThemeProvider>\n```\n\n## Testing\n\nThe package exports test utilities:\n\n```tsx\nimport { TestThemeProvider } from '@astacinco/rn-theming/testing';\n\n// Render component in both themes\nrenderWithThemes(<MyComponent />);\n```\n","readmeFilename":"README.md"}