@react-native-rethemed/tailwind-css-tokens 0.0.0-stage → 0.1.1

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,67 @@
-# 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.
+[![npm](https://img.shields.io/npm/v/@react-native-rethemed/tailwind-css-tokens.svg)](https://www.npmjs.com/package/@react-native-rethemed/tailwind-css-tokens)
+
+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/index.cjs

@@ -0,0 +1,51 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_tokens_gen = require("./tokens.gen.cjs");
+//#region src/index.ts
+/**
+* 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).
+*/
+const tailwindCssTheme = (0, require("@react-native-rethemed/core/config").defineTheme)({
+	tokens: {
+		colors: require_tokens_gen.colors,
+		radii: require_tokens_gen.radii,
+		spacing: require_tokens_gen.spacing,
+		fontSizes: require_tokens_gen.fontSizes,
+		fontWeights: require_tokens_gen.fontWeights,
+		lineHeights: require_tokens_gen.lineHeights,
+		letterSpacings: require_tokens_gen.letterSpacings,
+		shadows: require_tokens_gen.shadows
+	},
+	semanticTokens: { text: require_tokens_gen.text },
+	defaults: { fontSize: "base" }
+});
+//#endregion
+exports.colors = require_tokens_gen.colors;
+exports.fontSizes = require_tokens_gen.fontSizes;
+exports.fontWeights = require_tokens_gen.fontWeights;
+exports.letterSpacings = require_tokens_gen.letterSpacings;
+exports.lineHeights = require_tokens_gen.lineHeights;
+exports.radii = require_tokens_gen.radii;
+exports.shadows = require_tokens_gen.shadows;
+exports.spacing = require_tokens_gen.spacing;
+exports.tailwindCssTheme = tailwindCssTheme;
+exports.text = require_tokens_gen.text;

package/dist/index.d.cts

@@ -0,0 +1,28 @@
+import { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, text } from "./tokens.gen.cjs";
+//#region src/index.d.ts
+/**
+ * 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;
+//#endregion
+export { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, text };

package/dist/index.d.mts

@@ -0,0 +1,28 @@
+import { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, text } from "./tokens.gen.mjs";
+//#region src/index.d.ts
+/**
+ * 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;
+//#endregion
+export { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, text };

package/dist/index.mjs

@@ -0,0 +1,42 @@
+import { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, text } from "./tokens.gen.mjs";
+import { defineTheme } from "@react-native-rethemed/core/config";
+//#region src/index.ts
+/**
+* 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).
+*/
+const tailwindCssTheme = defineTheme({
+	tokens: {
+		colors,
+		radii,
+		spacing,
+		fontSizes,
+		fontWeights,
+		lineHeights,
+		letterSpacings,
+		shadows
+	},
+	semanticTokens: { text },
+	defaults: { fontSize: "base" }
+});
+//#endregion
+export { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, tailwindCssTheme, text };