@react-native-rethemed/tailwind-css-tokens 0.0.0-stage → 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

@@ -1,3 +1,65 @@
-# Temporary Holding Version
+# @react-native-rethemed/tailwind-css-tokens
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Tailwind CSS's default theme (colors, spacing, text sizes, shadows) for React Native, ready for [react-native-rethemed](https://github.com/manakuro/react-native-rethemed).
+
+Tailwind CSS's default `theme.css` with Tailwind's names: `padding: 4` is `p-4`, `themed.text.sm()` is `text-sm` (font size plus its paired line height).
+
+## Installation
+
+```sh
+npm install @react-native-rethemed/core @react-native-rethemed/tailwind-css-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 { extendTheme } from '@react-native-rethemed/core';
+import { colors, tailwindCssTheme } from '@react-native-rethemed/tailwind-css-tokens';
+
+// Tailwind has no semantic colors (it uses `dark:`), so define your own.
+export const themeConfig = extendTheme(tailwindCssTheme, {
+  semanticTokens: {
+    colors: {
+      fg: { default: { light: colors['gray.900'], dark: colors['gray.50'] } },
+    },
+  },
+});
+
+// themed.view({ padding: 4, borderRadius: 'lg' })   // p-4 rounded-lg
+// themed.text.sm({ color: 'fg.default' })           // text-sm
+```
+
+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 |
+| --- | --- |
+| `tailwindCssTheme` | The full theme |
+| `colors` | The oklch palette as hex (`'sky.500'`) |
+| `text` | `text-*` presets with paired line heights |
+| `spacing`, `radii`, `fontSizes`, `fontWeights`, `lineHeights`, `letterSpacings`, `shadows` | Individual token scales |
+
+[`example/`](https://github.com/manakuro/react-native-rethemed/tree/main/packages/react-native-rethemed/tailwind-css/example) shows what the CLI generates for `tailwindCssTheme` (`themed.gen.ts`, `themed.md`).
+
+## License
+
+MIT. Token values are converted from [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) (MIT).

package/dist/cjs/index.d.ts

@@ -0,0 +1,26 @@
+import { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, text } from './tokens.gen';
+/**
+ * Tailwind CSS's default theme (`tailwindcss/theme.css`), converted for
+ * React Native with Tailwind's names. Values are generated by
+ * `scripts/generate.ts`; see `src/tokens.gen.ts`.
+ *
+ * - Lengths: rem → points at 16px; em letter spacings → points at 16px.
+ * - `colors`: the oklch palette as hex, `'<hue>.<shade>'` (`'sky.500'`).
+ *   Fixed in both schemes: Tailwind has no semantic colors (it uses `dark:`
+ *   variants), so define `semanticTokens.colors` in the app.
+ * - `spacing`: `padding: 4` is `p-4` (16), for the steps Tailwind's docs
+ *   list. `radii` / `lineHeights` add the `rounded-none` / `rounded-full` /
+ *   `leading-none` utilities.
+ * - `text`: `themed.text.sm()` is `text-sm` — font size plus its paired line
+ *   height. `fontSizes` (`fontSize: 'sm'`) sets the size alone.
+ * - `defaults.fontSize` is `base` (16), the size `lineHeights` ratios use when
+ *   a style has no `fontSize` of its own.
+ * - `shadows`: first layer only. Not included (no RN equivalent): fonts,
+ *   inset / drop / text shadows, blur, perspective, easing, animations,
+ *   aspect ratios, breakpoints, containers.
+ *
+ * The palette, radii and shadows are the same values as
+ * `@react-native-rethemed/panda-css-tokens` (Panda's preset uses Tailwind's).
+ */
+export declare const tailwindCssTheme: import("@react-native-rethemed/core/config").ThemeConfig;
+export { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, text, };

package/dist/cjs/index.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.text = exports.spacing = exports.shadows = exports.radii = exports.lineHeights = exports.letterSpacings = exports.fontWeights = exports.fontSizes = exports.colors = exports.tailwindCssTheme = void 0;
+const config_1 = require("@react-native-rethemed/core/config");
+const tokens_gen_1 = require("./tokens.gen");
+Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return tokens_gen_1.colors; } });
+Object.defineProperty(exports, "fontSizes", { enumerable: true, get: function () { return tokens_gen_1.fontSizes; } });
+Object.defineProperty(exports, "fontWeights", { enumerable: true, get: function () { return tokens_gen_1.fontWeights; } });
+Object.defineProperty(exports, "letterSpacings", { enumerable: true, get: function () { return tokens_gen_1.letterSpacings; } });
+Object.defineProperty(exports, "lineHeights", { enumerable: true, get: function () { return tokens_gen_1.lineHeights; } });
+Object.defineProperty(exports, "radii", { enumerable: true, get: function () { return tokens_gen_1.radii; } });
+Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return tokens_gen_1.shadows; } });
+Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return tokens_gen_1.spacing; } });
+Object.defineProperty(exports, "text", { enumerable: true, get: function () { return tokens_gen_1.text; } });
+/**
+ * Tailwind CSS's default theme (`tailwindcss/theme.css`), converted for
+ * React Native with Tailwind's names. Values are generated by
+ * `scripts/generate.ts`; see `src/tokens.gen.ts`.
+ *
+ * - Lengths: rem → points at 16px; em letter spacings → points at 16px.
+ * - `colors`: the oklch palette as hex, `'<hue>.<shade>'` (`'sky.500'`).
+ *   Fixed in both schemes: Tailwind has no semantic colors (it uses `dark:`
+ *   variants), so define `semanticTokens.colors` in the app.
+ * - `spacing`: `padding: 4` is `p-4` (16), for the steps Tailwind's docs
+ *   list. `radii` / `lineHeights` add the `rounded-none` / `rounded-full` /
+ *   `leading-none` utilities.
+ * - `text`: `themed.text.sm()` is `text-sm` — font size plus its paired line
+ *   height. `fontSizes` (`fontSize: 'sm'`) sets the size alone.
+ * - `defaults.fontSize` is `base` (16), the size `lineHeights` ratios use when
+ *   a style has no `fontSize` of its own.
+ * - `shadows`: first layer only. Not included (no RN equivalent): fonts,
+ *   inset / drop / text shadows, blur, perspective, easing, animations,
+ *   aspect ratios, breakpoints, containers.
+ *
+ * The palette, radii and shadows are the same values as
+ * `@react-native-rethemed/panda-css-tokens` (Panda's preset uses Tailwind's).
+ */
+exports.tailwindCssTheme = (0, config_1.defineTheme)({
+    tokens: {
+        colors: tokens_gen_1.colors,
+        radii: tokens_gen_1.radii,
+        spacing: tokens_gen_1.spacing,
+        fontSizes: tokens_gen_1.fontSizes,
+        fontWeights: tokens_gen_1.fontWeights,
+        lineHeights: tokens_gen_1.lineHeights,
+        letterSpacings: tokens_gen_1.letterSpacings,
+        shadows: tokens_gen_1.shadows,
+    },
+    semanticTokens: {
+        text: tokens_gen_1.text,
+    },
+    defaults: {
+        fontSize: 'base',
+    },
+});

package/dist/cjs/package.json

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