{"id":25289205,"url":"https://github.com/Innei/apple-uikit-colors","last_synced_at":"2025-10-27T23:31:00.134Z","repository":{"id":273351748,"uuid":"918563115","full_name":"Innei/react-native-uikit-colors","owner":"Innei","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-26T13:56:43.000Z","size":74,"stargazers_count":10,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-07T05:30:45.986Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Innei.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-18T08:59:52.000Z","updated_at":"2025-01-29T03:34:28.000Z","dependencies_parsed_at":"2025-01-20T12:15:47.897Z","dependency_job_id":null,"html_url":"https://github.com/Innei/react-native-uikit-colors","commit_stats":null,"previous_names":["innei/react-native-uikit-colors"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Innei%2Freact-native-uikit-colors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Innei%2Freact-native-uikit-colors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Innei%2Freact-native-uikit-colors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Innei%2Freact-native-uikit-colors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Innei","download_url":"https://codeload.github.com/Innei/react-native-uikit-colors/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238569596,"owners_count":19493912,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-12T23:52:09.499Z","updated_at":"2025-10-27T23:31:00.129Z","avatar_url":"https://github.com/Innei.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Apple UIKit Colors\n\nAccurate Apple UIKit color system for iOS and macOS with comprehensive platform support. This monorepo provides native Apple colors for TypeScript, React Native, and Tailwind CSS with automatic light/dark mode switching.\n\n## 📦 Packages\n\n| Package | Description | Platform Support |\n|---------|-------------|-------------------|\n| **[apple-uikit-colors](./packages/uikit-colors)** | Core UIKit colors in TypeScript | Universal |\n| **[react-native-uikit-colors](./packages/react-native-uikit-colors)** | React Native bindings with NativeWind integration | iOS, Android, Web |\n| **[tailwindcss-uikit-colors](./packages/tailwindcss-uikit-colors)** | Tailwind CSS plugin with v3 \u0026 v4 support | Web, React Native Web |\n\n## ✨ Features\n\n- 🎨 **Authentic Apple Colors** - Pixel-perfect iOS and macOS system colors\n- 🌓 **Automatic Dark Mode** - Colors adapt to system theme preferences\n- 🔄 **Cross-Platform** - Works on iOS, Android, Web, and React Native\n- 🎯 **TypeScript Ready** - Full type safety and IntelliSense support\n- ⚡ **Multiple Integration Options** - Hooks, CSS variables, Tailwind classes\n- 🎪 **Tailwind CSS v3 \u0026 v4** - Support for both current and next-gen Tailwind\n\n## 🚀 Quick Start\n\n### For React Native Projects\n\n```bash\nnpm install react-native-uikit-colors\n```\n\n```tsx\nimport { useColor } from 'react-native-uikit-colors'\n\nfunction MyComponent() {\n  const backgroundColor = useColor('systemBackground')\n  const textColor = useColor('label')\n  \n  return (\n    \u003cView style={{ backgroundColor }}\u003e\n      \u003cText style={{ color: textColor }}\u003eHello World\u003c/Text\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\n### For Tailwind CSS Projects\n\n```bash\nnpm install tailwindcss-uikit-colors\n```\n\n```js\n// tailwind.config.js\nimport { withUIKit } from 'tailwindcss-uikit-colors'\n\nexport default withUIKit({\n  content: ['./src/**/*.{js,jsx,ts,tsx}'],\n  // ... your config\n})\n```\n\n```css\n/* Import colors CSS */\n@import 'tailwindcss-uikit-colors/selector.css';\n```\n\n```html\n\u003cdiv class=\"bg-system-background text-label\"\u003e\n  \u003ch1 class=\"text-secondary-label\"\u003eHello World\u003c/h1\u003e\n\u003c/div\u003e\n```\n\n### For TypeScript Projects\n\n```bash\nnpm install apple-uikit-colors\n```\n\n```ts\nimport { lightPalette, darkPalette } from 'apple-uikit-colors'\n\nconst theme = {\n  light: lightPalette,\n  dark: darkPalette\n}\n```\n\n## 🎨 Available Colors\n\n### System Colors\n- Background: `system-background`, `secondary-system-background`, `tertiary-system-background`\n- Grouped: `system-grouped-background`, `secondary-system-grouped-background`, `tertiary-system-grouped-background`\n- Labels: `label`, `secondary-label`, `tertiary-label`, `quaternary-label`\n- Fills: `system-fill`, `secondary-system-fill`, `tertiary-system-fill`, `quaternary-system-fill`\n- Separators: `separator`, `opaque-separator`, `non-opaque-separator`\n\n### Semantic Colors\n- Core: `red`, `orange`, `yellow`, `green`, `mint`, `teal`, `cyan`, `blue`, `indigo`, `purple`, `pink`, `brown`\n- Grays: `gray`, `gray2`, `gray3`, `gray4`, `gray5`, `gray6`\n- Interactive: `link`, `placeholder-text`\n\n### Platform-Specific Colors\n- **iOS**: Complete iOS system color palette\n- **macOS**: Extended macOS colors including vibrant fills, materials, and controls\n\n## 🔧 Advanced Usage\n\n### React Native with NativeWind\n\n```tsx\nimport { withUIKit } from 'react-native-uikit-colors/tailwind'\nimport { useCurrentColorsVariants } from 'react-native-uikit-colors'\n\n// Configure Tailwind\nexport default withUIKit({\n  content: ['./src/**/*.{js,jsx,ts,tsx}']\n})\n\n// Use in components\nfunction App() {\n  const currentThemeColors = useCurrentColorsVariants()\n  \n  return (\n    \u003cView style={currentThemeColors} className=\"flex-1\"\u003e\n      \u003cText className=\"text-label text-lg\"\u003eNative + Web\u003c/Text\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\n### Tailwind CSS v4\n\n```css\n/* Import v4 colors */\n@import 'tailwindcss-uikit-colors/v4/ios.css';\n/* or */\n@import 'tailwindcss-uikit-colors/v4/macos.css';\n```\n\n### Dynamic Color Updates\n\n```tsx\nimport { useColor, useColorScheme } from 'react-native-uikit-colors'\n\nfunction ThemedComponent() {\n  const { colorScheme } = useColorScheme()\n  const backgroundColor = useColor('systemBackground')\n  \n  // Colors automatically update when system theme changes\n  return (\n    \u003cView style={{ backgroundColor }}\u003e\n      \u003cText\u003eCurrent theme: {colorScheme}\u003c/Text\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\n## 🏗️ Architecture\n\nThis monorepo uses a clean dependency hierarchy:\n\n```\napple-uikit-colors (core)\n├── react-native-uikit-colors (depends on core + tailwind)\n└── tailwindcss-uikit-colors (depends on core)\n```\n\nColors are stored as space-separated RGB values (`\"255 59 48\"`) for optimal compatibility with modern CSS color functions and alpha compositing.\n\n## 📚 Documentation\n\n- [React Native Package](./packages/react-native-uikit-colors/readme.md)\n- [Tailwind CSS Package](./packages/tailwindcss-uikit-colors/readme.md)\n- [Tailwind CSS v4 Guide](./packages/tailwindcss-uikit-colors/TAILWIND_V4.md)\n- [API Reference](./docs/api.md)\n\n## 🤝 Contributing\n\nContributions are welcome! Please read our [contributing guide](./CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.\n\n## 📄 License\n\n2025 © Innei, Released under the MIT License.\n\n\u003e [Personal Website](https://innei.in/) · GitHub [@Innei](https://github.com/innei/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FInnei%2Fapple-uikit-colors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FInnei%2Fapple-uikit-colors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FInnei%2Fapple-uikit-colors/lists"}