@react-native-rethemed/material-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/material-ui-tokens
+
+Material UI's default theme (palette, colors, typography) for React Native, ready for [react-native-rethemed](https://github.com/manakuro/react-native-rethemed).
+
+Material UI's default theme (`createTheme()`, Material Design 2): palette in light and dark mode with Material UI's names (`'primary.main'`, `'text.secondary'`), `@mui/material/colors`, the 13 typography variants as text presets (`button` / `overline` keep `textTransform: 'uppercase'`), spacing, shape and elevations 0–24.
+
+## Installation
+
+```sh
+npm install @react-native-rethemed/core @react-native-rethemed/material-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 { materialUiTheme } from '@react-native-rethemed/material-ui-tokens';
+
+export const themeConfig = materialUiTheme;
+
+// themed.view({ backgroundColor: 'background.paper', padding: 2 })
+// themed.text.h6({ color: 'text.secondary' })
+```
+
+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 |
+| --- | --- |
+| `materialUiTheme` | The full theme |
+| `semanticColors` | The light/dark `palette` |
+| `colors` | `@mui/material/colors` (`'deepPurple.A200'`) |
+| `typography` | The 13 variants (`h1`…`overline`) as text presets |
+| `spacing`, `radii`, `fontWeights`, `shadows`, `zIndices` | Individual token scales |
+
+[`example/`](https://github.com/manakuro/react-native-rethemed/tree/main/packages/react-native-rethemed/material-ui/example) shows what the CLI generates for `materialUiTheme` (`themed.gen.ts`, `themed.md`).
+
+## License
+
+MIT. Token values are converted from [Material UI](https://github.com/mui/material-ui) (MIT).

package/dist/cjs/index.d.ts

@@ -0,0 +1,25 @@
+import { colors, fontWeights, radii, semanticColors, shadows, spacing, typography, zIndices } from './tokens.gen';
+/**
+ * Material UI's default theme (`createTheme()` from `@mui/material`, which
+ * follows Material Design 2), converted for React Native. Values are
+ * generated by `scripts/generate.ts`; see `src/tokens.gen.ts`.
+ *
+ * - `semanticColors`: the default `palette` in light and dark mode, as
+ *   `'<group>.<key>'` with Material UI's own names: `'primary.main'`,
+ *   `'primary.contrastText'`, `'text.secondary'`, `'background.paper'`,
+ *   `'action.hover'`, `'divider.default'`.
+ * - `colors`: `@mui/material/colors` as `'<hue>.<shade>'` (`'red.500'`,
+ *   `'deepPurple.A200'`), plus `black` and `white`. Fixed in both schemes.
+ * - `typography`: the 13 variants (`h1`…`overline`) as text presets,
+ *   `themed.text.h1()`. rem/em → points at `htmlFontSize` (16); line heights
+ *   absolute; `button` / `overline` keep `textTransform: 'uppercase'`.
+ * - `spacing`: `theme.spacing(n)`, so `padding: 2` is 16. `radii`: multiples
+ *   of `shape.borderRadius`, so `borderRadius: 2` is 8 — both like `sx`.
+ * - `shadows`: elevations 0–24, first layer only; `elevation` matches the
+ *   Material elevation on Android exactly.
+ * - Not included (no RN equivalent): `fontFamily` (Roboto, Android's default
+ *   anyway), breakpoints, transitions, mixins, component overrides, the
+ *   `action.*Opacity` numbers and dark mode's `text.icon`.
+ */
+export declare const materialUiTheme: import("@react-native-rethemed/core/config").ThemeConfig;
+export { colors, fontWeights, radii, semanticColors, shadows, spacing, typography, zIndices, };

package/dist/cjs/index.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.zIndices = exports.typography = exports.spacing = exports.shadows = exports.semanticColors = exports.radii = exports.fontWeights = exports.colors = exports.materialUiTheme = 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, "fontWeights", { enumerable: true, get: function () { return tokens_gen_1.fontWeights; } });
+Object.defineProperty(exports, "radii", { enumerable: true, get: function () { return tokens_gen_1.radii; } });
+Object.defineProperty(exports, "semanticColors", { enumerable: true, get: function () { return tokens_gen_1.semanticColors; } });
+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, "typography", { enumerable: true, get: function () { return tokens_gen_1.typography; } });
+Object.defineProperty(exports, "zIndices", { enumerable: true, get: function () { return tokens_gen_1.zIndices; } });
+/**
+ * Material UI's default theme (`createTheme()` from `@mui/material`, which
+ * follows Material Design 2), converted for React Native. Values are
+ * generated by `scripts/generate.ts`; see `src/tokens.gen.ts`.
+ *
+ * - `semanticColors`: the default `palette` in light and dark mode, as
+ *   `'<group>.<key>'` with Material UI's own names: `'primary.main'`,
+ *   `'primary.contrastText'`, `'text.secondary'`, `'background.paper'`,
+ *   `'action.hover'`, `'divider.default'`.
+ * - `colors`: `@mui/material/colors` as `'<hue>.<shade>'` (`'red.500'`,
+ *   `'deepPurple.A200'`), plus `black` and `white`. Fixed in both schemes.
+ * - `typography`: the 13 variants (`h1`…`overline`) as text presets,
+ *   `themed.text.h1()`. rem/em → points at `htmlFontSize` (16); line heights
+ *   absolute; `button` / `overline` keep `textTransform: 'uppercase'`.
+ * - `spacing`: `theme.spacing(n)`, so `padding: 2` is 16. `radii`: multiples
+ *   of `shape.borderRadius`, so `borderRadius: 2` is 8 — both like `sx`.
+ * - `shadows`: elevations 0–24, first layer only; `elevation` matches the
+ *   Material elevation on Android exactly.
+ * - Not included (no RN equivalent): `fontFamily` (Roboto, Android's default
+ *   anyway), breakpoints, transitions, mixins, component overrides, the
+ *   `action.*Opacity` numbers and dark mode's `text.icon`.
+ */
+exports.materialUiTheme = (0, config_1.defineTheme)({
+    tokens: {
+        colors: tokens_gen_1.colors,
+        radii: tokens_gen_1.radii,
+        spacing: tokens_gen_1.spacing,
+        fontWeights: tokens_gen_1.fontWeights,
+        zIndices: tokens_gen_1.zIndices,
+        shadows: tokens_gen_1.shadows,
+    },
+    semanticTokens: {
+        colors: tokens_gen_1.semanticColors,
+        text: tokens_gen_1.typography,
+    },
+});

package/dist/cjs/package.json

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