@react-native-rethemed/shadcn-ui-tokens 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 manato
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,58 @@
+# @react-native-rethemed/shadcn-ui-tokens
+
+shadcn/ui's theme (semantic colors, radii, all base colors) for React Native, ready for [react-native-rethemed](https://github.com/manakuro/react-native-rethemed).
+
+shadcn/ui is Tailwind CSS plus CSS variables, so `shadcnUiTheme` is `tailwindCssTheme` with shadcn/ui's light/dark semantic colors (named like the class names: `'primary'`, `'muted-foreground'`) and `--radius` scale on top. All seven base colors are exported as `baseColors`.
+
+## Installation
+
+```sh
+npm install @react-native-rethemed/core @react-native-rethemed/shadcn-ui-tokens
+npm install --save-dev @react-native-rethemed/cli
+```
+
+`react` and `react-native` are peer dependencies of `@react-native-rethemed/core`.
+
+## Usage
+
+```ts
+// src/theme/theme.ts
+import { shadcnUiTheme } from '@react-native-rethemed/shadcn-ui-tokens';
+
+export const themeConfig = shadcnUiTheme;
+
+// bg-primary text-primary-foreground rounded-md px-4
+// themed.view({ backgroundColor: 'primary', borderRadius: 'md', paddingHorizontal: 4 })
+// themed.text.sm({ color: 'primary-foreground' })
+```
+
+Then generate the typed bindings (and the token reference for AI agents):
+
+```sh
+npx @react-native-rethemed/cli codegen src/theme/theme.ts --docs docs/themed.md
+```
+
+and use them in components:
+
+```tsx
+import { useThemed } from './theme/themed.gen';
+
+const { themed } = useThemed();
+```
+
+See the [main README](https://github.com/manakuro/react-native-rethemed#readme) for the full setup (`ThemedProvider`, color mode, `extendTheme`).
+
+## Exports
+
+| Export | Description |
+| --- | --- |
+| `shadcnUiTheme` | The full theme (base color `neutral`) |
+| `semanticColors` | The `neutral` semantic colors |
+| `baseColors` | Semantic colors for every base color (`baseColors.zinc`, …) |
+| `radii` | The `--radius` scale |
+
+[`example/`](https://github.com/manakuro/react-native-rethemed/tree/main/packages/react-native-rethemed/shadcn-ui/example) shows what the CLI generates for `shadcnUiTheme` (`themed.gen.ts`, `themed.md`).
+
+## License
+
+MIT. Token values are converted from [shadcn/ui](https://github.com/shadcn-ui/ui) (MIT).

package/dist/cjs/index.d.ts

@@ -0,0 +1,151 @@
+import { baseColors, radii } from './tokens.gen';
+/** A shadcn/ui base color: `neutral` (the default), `stone`, `zinc`, … */
+export type BaseColor = keyof typeof baseColors;
+/** The default base color's semantic colors (`neutral`). */
+export declare const semanticColors: {
+    readonly background: {
+        readonly light: "#ffffff";
+        readonly dark: "#0a0a0a";
+    };
+    readonly foreground: {
+        readonly light: "#0a0a0a";
+        readonly dark: "#fafafa";
+    };
+    readonly card: {
+        readonly light: "#ffffff";
+        readonly dark: "#171717";
+    };
+    readonly 'card-foreground': {
+        readonly light: "#0a0a0a";
+        readonly dark: "#fafafa";
+    };
+    readonly popover: {
+        readonly light: "#ffffff";
+        readonly dark: "#171717";
+    };
+    readonly 'popover-foreground': {
+        readonly light: "#0a0a0a";
+        readonly dark: "#fafafa";
+    };
+    readonly primary: {
+        readonly light: "#171717";
+        readonly dark: "#e5e5e5";
+    };
+    readonly 'primary-foreground': {
+        readonly light: "#fafafa";
+        readonly dark: "#171717";
+    };
+    readonly secondary: {
+        readonly light: "#f5f5f5";
+        readonly dark: "#262626";
+    };
+    readonly 'secondary-foreground': {
+        readonly light: "#171717";
+        readonly dark: "#fafafa";
+    };
+    readonly muted: {
+        readonly light: "#f5f5f5";
+        readonly dark: "#262626";
+    };
+    readonly 'muted-foreground': {
+        readonly light: "#737373";
+        readonly dark: "#a1a1a1";
+    };
+    readonly accent: {
+        readonly light: "#f5f5f5";
+        readonly dark: "#262626";
+    };
+    readonly 'accent-foreground': {
+        readonly light: "#171717";
+        readonly dark: "#fafafa";
+    };
+    readonly destructive: {
+        readonly light: "#e7000b";
+        readonly dark: "#ff6467";
+    };
+    readonly border: {
+        readonly light: "#e5e5e5";
+        readonly dark: "#ffffff1a";
+    };
+    readonly input: {
+        readonly light: "#e5e5e5";
+        readonly dark: "#ffffff26";
+    };
+    readonly ring: {
+        readonly light: "#a1a1a1";
+        readonly dark: "#737373";
+    };
+    readonly 'chart-1': {
+        readonly light: "#d4d4d4";
+        readonly dark: "#d4d4d4";
+    };
+    readonly 'chart-2': {
+        readonly light: "#737373";
+        readonly dark: "#737373";
+    };
+    readonly 'chart-3': {
+        readonly light: "#525252";
+        readonly dark: "#525252";
+    };
+    readonly 'chart-4': {
+        readonly light: "#404040";
+        readonly dark: "#404040";
+    };
+    readonly 'chart-5': {
+        readonly light: "#262626";
+        readonly dark: "#262626";
+    };
+    readonly sidebar: {
+        readonly light: "#fafafa";
+        readonly dark: "#171717";
+    };
+    readonly 'sidebar-foreground': {
+        readonly light: "#0a0a0a";
+        readonly dark: "#fafafa";
+    };
+    readonly 'sidebar-primary': {
+        readonly light: "#171717";
+        readonly dark: "#1447e6";
+    };
+    readonly 'sidebar-primary-foreground': {
+        readonly light: "#fafafa";
+        readonly dark: "#fafafa";
+    };
+    readonly 'sidebar-accent': {
+        readonly light: "#f5f5f5";
+        readonly dark: "#262626";
+    };
+    readonly 'sidebar-accent-foreground': {
+        readonly light: "#171717";
+        readonly dark: "#fafafa";
+    };
+    readonly 'sidebar-border': {
+        readonly light: "#e5e5e5";
+        readonly dark: "#ffffff1a";
+    };
+    readonly 'sidebar-ring': {
+        readonly light: "#a1a1a1";
+        readonly dark: "#737373";
+    };
+};
+/**
+ * shadcn/ui's default theme (base color `neutral`), converted for React
+ * Native. shadcn/ui is Tailwind CSS plus CSS variables, so this is
+ * `tailwindCssTheme` (spacing, typography, shadows, the color palette) with
+ * shadcn/ui's colors and radii on top, the same layering as a shadcn/ui
+ * project's `globals.css`.
+ *
+ * - Semantic colors use shadcn/ui's names as top-level colors, so styles
+ *   read like the class names: `bg-primary text-primary-foreground` is
+ *   `themed.view({ backgroundColor: 'primary' })` /
+ *   `themed.text({ color: 'primary-foreground' })`. oklch is converted to
+ *   hex; translucent dark-mode borders become 8-digit hex.
+ * - `radii`: `--radius` (10) and the `radius-sm`…`radius-4xl` scale derived
+ *   from it replace Tailwind's, like shadcn/ui's `@theme inline`.
+ * - Other base colors: `baseColors.zinc`, … — switch with
+ *   `extendTheme(shadcnUiTheme, { semanticTokens: { colors: baseColors.zinc } })`.
+ * - Values come from the shadcn/ui registry snapshot in `scripts/registry/`
+ *   (`pnpm sync`), converted by `scripts/generate.ts`.
+ */
+export declare const shadcnUiTheme: import("@react-native-rethemed/core/config").ThemeConfig;
+export { baseColors, radii };

package/dist/cjs/index.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.radii = exports.baseColors = exports.shadcnUiTheme = exports.semanticColors = void 0;
+const config_1 = require("@react-native-rethemed/core/config");
+const tailwind_css_tokens_1 = require("@react-native-rethemed/tailwind-css-tokens");
+const tokens_gen_1 = require("./tokens.gen");
+Object.defineProperty(exports, "baseColors", { enumerable: true, get: function () { return tokens_gen_1.baseColors; } });
+Object.defineProperty(exports, "radii", { enumerable: true, get: function () { return tokens_gen_1.radii; } });
+/** The default base color's semantic colors (`neutral`). */
+exports.semanticColors = tokens_gen_1.baseColors.neutral;
+/**
+ * shadcn/ui's default theme (base color `neutral`), converted for React
+ * Native. shadcn/ui is Tailwind CSS plus CSS variables, so this is
+ * `tailwindCssTheme` (spacing, typography, shadows, the color palette) with
+ * shadcn/ui's colors and radii on top, the same layering as a shadcn/ui
+ * project's `globals.css`.
+ *
+ * - Semantic colors use shadcn/ui's names as top-level colors, so styles
+ *   read like the class names: `bg-primary text-primary-foreground` is
+ *   `themed.view({ backgroundColor: 'primary' })` /
+ *   `themed.text({ color: 'primary-foreground' })`. oklch is converted to
+ *   hex; translucent dark-mode borders become 8-digit hex.
+ * - `radii`: `--radius` (10) and the `radius-sm`…`radius-4xl` scale derived
+ *   from it replace Tailwind's, like shadcn/ui's `@theme inline`.
+ * - Other base colors: `baseColors.zinc`, … — switch with
+ *   `extendTheme(shadcnUiTheme, { semanticTokens: { colors: baseColors.zinc } })`.
+ * - Values come from the shadcn/ui registry snapshot in `scripts/registry/`
+ *   (`pnpm sync`), converted by `scripts/generate.ts`.
+ */
+exports.shadcnUiTheme = (0, config_1.extendTheme)(tailwind_css_tokens_1.tailwindCssTheme, {
+    tokens: { radii: tokens_gen_1.radii },
+    semanticTokens: { colors: exports.semanticColors },
+});

package/dist/cjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}