@react-native-rethemed/radix-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,63 @@
+# @react-native-rethemed/radix-ui-tokens
+
+Radix UI Themes tokens (Radix Colors scales, typography, radii, shadows) for React Native, ready for [react-native-rethemed](https://github.com/manakuro/react-native-rethemed).
+
+Radix Themes configured like `<Theme>`: accent / gray scales (12 steps + alpha) for light and dark, panel colors, space, radius, the Text / Heading presets and shadows.
+
+## Installation
+
+```sh
+npm install @react-native-rethemed/core @react-native-rethemed/radix-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 { createRadixUiTheme } from '@react-native-rethemed/radix-ui-tokens';
+
+// Like <Theme accentColor="crimson" grayColor="auto" radius="large">
+export const themeConfig = createRadixUiTheme({
+  accentColor: 'crimson',
+  radius: 'large',
+  colors: ['green', 'red'], // extra scales for status colors
+});
+
+// themed.view({ backgroundColor: 'accent.9', padding: 3 })
+// themed.text.heading['4']({ color: 'gray.12' })
+```
+
+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 |
+| --- | --- |
+| `createRadixUiTheme(options)` | Builds a theme from `accentColor`, `grayColor`, `radius`, `scaling` and extra `colors` |
+| `radixUiTheme` | `createRadixUiTheme()` with Radix's defaults |
+| `getMatchingGrayColor(accent)` | The gray `grayColor: 'auto'` picks |
+| `scales` | Every Radix color scale |
+| `fontWeights` | Font weights |
+
+[`example/`](https://github.com/manakuro/react-native-rethemed/tree/main/packages/react-native-rethemed/radix-ui/example) shows what the CLI generates for `radixUiTheme` (`themed.gen.ts`, `themed.md`).
+
+## License
+
+MIT. Token values are converted from [Radix Themes](https://github.com/radix-ui/themes) (MIT).

package/dist/cjs/index.d.ts

@@ -0,0 +1,2 @@
+export { type AccentColor, createRadixUiTheme, type GrayColor, getMatchingGrayColor, type Radius, type RadixUiThemeOptions, radixUiTheme, type ScaleName, type Scaling, } from './theme';
+export { fontWeights, scales } from './tokens.gen';

package/dist/cjs/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scales = exports.fontWeights = exports.radixUiTheme = exports.getMatchingGrayColor = exports.createRadixUiTheme = void 0;
+var theme_1 = require("./theme");
+Object.defineProperty(exports, "createRadixUiTheme", { enumerable: true, get: function () { return theme_1.createRadixUiTheme; } });
+Object.defineProperty(exports, "getMatchingGrayColor", { enumerable: true, get: function () { return theme_1.getMatchingGrayColor; } });
+Object.defineProperty(exports, "radixUiTheme", { enumerable: true, get: function () { return theme_1.radixUiTheme; } });
+var tokens_gen_1 = require("./tokens.gen");
+Object.defineProperty(exports, "fontWeights", { enumerable: true, get: function () { return tokens_gen_1.fontWeights; } });
+Object.defineProperty(exports, "scales", { enumerable: true, get: function () { return tokens_gen_1.scales; } });

package/dist/cjs/package.json

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

package/dist/cjs/theme.d.ts

@@ -0,0 +1,53 @@
+import { type ThemeConfig } from '@react-native-rethemed/core/config';
+import { radiusFactors, scales, scalings } from './tokens.gen';
+/** Every Radix color scale. */
+export type ScaleName = keyof typeof scales;
+/** `<Theme accentColor>`: every scale except the five tinted grays. */
+export type AccentColor = Exclude<ScaleName, 'mauve' | 'slate' | 'sage' | 'olive' | 'sand'>;
+/** `<Theme grayColor>`. `auto` picks the gray that matches the accent. */
+export type GrayColor = 'auto' | Extract<ScaleName, 'gray' | 'mauve' | 'slate' | 'sage' | 'olive' | 'sand'>;
+export type Radius = keyof typeof radiusFactors;
+export type Scaling = keyof typeof scalings;
+export type RadixUiThemeOptions = {
+    /** Default `indigo`. */
+    accentColor?: AccentColor;
+    /** Default `auto`. */
+    grayColor?: GrayColor;
+    /** Default `medium`. */
+    radius?: Radius;
+    /** Default `100%`. */
+    scaling?: Scaling;
+    /**
+     * More scales to use by name (`'red.9'`, `'green.a3'`), e.g. for status
+     * colors. `accent`, `gray` and `color` are always included; every scale
+     * would add ~870 colors to the generated types, so pick what you use.
+     */
+    colors?: Exclude<ScaleName, 'gray'>[];
+};
+/**
+ * The gray `grayColor: 'auto'` picks for an accent, as Radix Themes'
+ * `getMatchingGrayColor` does.
+ */
+export declare function getMatchingGrayColor(accentColor: AccentColor): Exclude<GrayColor, 'auto'>;
+/**
+ * A Radix Themes theme, configured like `<Theme>`:
+ *
+ * ```ts
+ * createRadixUiTheme({ accentColor: 'blue', radius: 'large', colors: ['red'] })
+ * ```
+ *
+ * - `semanticTokens.colors`: `accent` and `gray` (each `1`–`12`, `a1`–`a12`,
+ *   `contrast`, `surface`, `indicator`, `track`), `color` (`background`,
+ *   `panel-solid`, `panel-translucent`, `surface`, `overlay`), plus the
+ *   scales in `colors`. Every one switches with light/dark.
+ * - `spacing` (`1`–`9`), `fontSizes` (`1`–`9`) and `radii` (`1`–`6`,
+ *   `full`) follow `scaling` and `radius`.
+ * - Text presets: `themed.text.text[3]()` is `<Text size="3">` and
+ *   `themed.text.heading[3]()` is `<Heading size="3">` (bold, tighter line
+ *   height), both with Radix's letter spacing.
+ * - `shadows` `2`–`6`: one layer each, light-mode values; `1` is inset and
+ *   left out.
+ */
+export declare function createRadixUiTheme(options?: RadixUiThemeOptions): ThemeConfig;
+/** Radix Themes' defaults: `indigo` accent, `slate` gray, `medium` radius, `100%` scaling. */
+export declare const radixUiTheme: ThemeConfig;

package/dist/cjs/theme.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.radixUiTheme = void 0;
+exports.getMatchingGrayColor = getMatchingGrayColor;
+exports.createRadixUiTheme = createRadixUiTheme;
+const config_1 = require("@react-native-rethemed/core/config");
+const tokens_gen_1 = require("./tokens.gen");
+/**
+ * The gray `grayColor: 'auto'` picks for an accent, as Radix Themes'
+ * `getMatchingGrayColor` does.
+ */
+function getMatchingGrayColor(accentColor) {
+    switch (accentColor) {
+        case 'tomato':
+        case 'red':
+        case 'ruby':
+        case 'crimson':
+        case 'pink':
+        case 'plum':
+        case 'purple':
+        case 'violet':
+            return 'mauve';
+        case 'iris':
+        case 'indigo':
+        case 'blue':
+        case 'sky':
+        case 'cyan':
+            return 'slate';
+        case 'teal':
+        case 'jade':
+        case 'mint':
+        case 'green':
+            return 'sage';
+        case 'grass':
+        case 'lime':
+            return 'olive';
+        case 'yellow':
+        case 'amber':
+        case 'orange':
+        case 'brown':
+        case 'gold':
+        case 'bronze':
+            return 'sand';
+        case 'gray':
+            return 'gray';
+    }
+}
+const round = (n, digits = 2) => {
+    const factor = 10 ** digits;
+    return Math.round(n * factor) / factor;
+};
+const scaled = (table, factor) => Object.fromEntries(Object.entries(table).map(([key, value]) => [key, round(value * factor)]));
+/** `'gray.a2'` → that step of the theme's gray in `scheme`; hex as-is. */
+function grayRef(value, gray, scheme) {
+    return value.startsWith('gray.') ? gray[value.slice(5)][scheme] : value;
+}
+/** `#rrggbbaa` → `{ color: '#rrggbb', opacity }`. */
+function splitAlpha(hex) {
+    if (hex.length !== 9)
+        return { color: hex, opacity: 1 };
+    return {
+        color: hex.slice(0, 7),
+        opacity: round(Number.parseInt(hex.slice(7), 16) / 255, 3),
+    };
+}
+/** Android elevation per shadow level; CSS has none, so picked by hand. */
+const SHADOW_ELEVATIONS = {
+    2: 2,
+    3: 4,
+    4: 8,
+    5: 12,
+    6: 16,
+};
+/**
+ * A Radix Themes theme, configured like `<Theme>`:
+ *
+ * ```ts
+ * createRadixUiTheme({ accentColor: 'blue', radius: 'large', colors: ['red'] })
+ * ```
+ *
+ * - `semanticTokens.colors`: `accent` and `gray` (each `1`–`12`, `a1`–`a12`,
+ *   `contrast`, `surface`, `indicator`, `track`), `color` (`background`,
+ *   `panel-solid`, `panel-translucent`, `surface`, `overlay`), plus the
+ *   scales in `colors`. Every one switches with light/dark.
+ * - `spacing` (`1`–`9`), `fontSizes` (`1`–`9`) and `radii` (`1`–`6`,
+ *   `full`) follow `scaling` and `radius`.
+ * - Text presets: `themed.text.text[3]()` is `<Text size="3">` and
+ *   `themed.text.heading[3]()` is `<Heading size="3">` (bold, tighter line
+ *   height), both with Radix's letter spacing.
+ * - `shadows` `2`–`6`: one layer each, light-mode values; `1` is inset and
+ *   left out.
+ */
+function createRadixUiTheme(options = {}) {
+    const { accentColor = 'indigo', grayColor = 'auto', radius = 'medium', scaling = '100%', colors = [], } = options;
+    const factor = tokens_gen_1.scalings[scaling];
+    const gray = tokens_gen_1.scales[grayColor === 'auto' ? getMatchingGrayColor(accentColor) : grayColor];
+    const sizes = tokens_gen_1.fontSizes;
+    const spacingsEm = tokens_gen_1.letterSpacings;
+    const preset = (size, lineHeight, extraEm = 0) => {
+        const fontSize = round(sizes[size] * factor);
+        return {
+            fontSize,
+            lineHeight: round(lineHeight * factor),
+            letterSpacing: round((spacingsEm[size] + extraEm) * fontSize, 3),
+        };
+    };
+    return (0, config_1.defineTheme)({
+        tokens: {
+            spacing: scaled(tokens_gen_1.space, factor),
+            radii: {
+                ...scaled(tokens_gen_1.radii, factor * tokens_gen_1.radiusFactors[radius]),
+                full: tokens_gen_1.radiusFull[radius],
+            },
+            fontSizes: scaled(tokens_gen_1.fontSizes, factor),
+            fontWeights: tokens_gen_1.fontWeights,
+            shadows: Object.fromEntries(Object.entries(tokens_gen_1.shadows).map(([key, layer]) => {
+                const { color, opacity } = splitAlpha(grayRef(layer.color, gray, 'light'));
+                return [
+                    key,
+                    {
+                        shadowColor: color,
+                        shadowOffset: { width: layer.x, height: layer.y },
+                        shadowOpacity: opacity,
+                        shadowRadius: layer.blur / 2,
+                        elevation: SHADOW_ELEVATIONS[key],
+                    },
+                ];
+            })),
+        },
+        semanticTokens: {
+            colors: {
+                accent: tokens_gen_1.scales[accentColor],
+                gray,
+                color: Object.fromEntries(Object.entries(tokens_gen_1.backgroundColors).map(([key, value]) => [
+                    key,
+                    {
+                        light: grayRef(value.light, gray, 'light'),
+                        dark: grayRef(value.dark, gray, 'dark'),
+                    },
+                ])),
+                ...Object.fromEntries(colors.map((name) => [name, tokens_gen_1.scales[name]])),
+            },
+            text: {
+                text: Object.fromEntries(Object.entries(tokens_gen_1.lineHeights).map(([size, lineHeight]) => [
+                    size,
+                    preset(size, lineHeight),
+                ])),
+                heading: Object.fromEntries(Object.entries(tokens_gen_1.headingLineHeights).map(([size, lineHeight]) => [
+                    size,
+                    {
+                        ...preset(size, lineHeight, tokens_gen_1.headingLetterSpacing),
+                        fontWeight: 'bold',
+                    },
+                ])),
+            },
+        },
+        defaults: { fontSize: '3' },
+    });
+}
+/** Radix Themes' defaults: `indigo` accent, `slate` gray, `medium` radius, `100%` scaling. */
+exports.radixUiTheme = createRadixUiTheme();