@react-native-rethemed/material-design-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,56 @@
+# @react-native-rethemed/material-design-tokens
+
+Material Design 3 type scale and tokens for React Native, ready for [react-native-rethemed](https://github.com/manakuro/react-native-rethemed).
+
+Material Design 3's baseline type scale — 5 roles (display / headline / title / body / label) × 3 sizes (lg / md / sm) — and spacing.
+
+## Installation
+
+```sh
+npm install @react-native-rethemed/core @react-native-rethemed/material-design-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 { materialDesignTheme } from '@react-native-rethemed/material-design-tokens';
+
+export const themeConfig = materialDesignTheme;
+
+// themed.text.title.lg()
+// themed.text.body.md()
+```
+
+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 |
+| --- | --- |
+| `materialDesignTheme` | The full theme |
+| `typescale` | The type scale as text presets |
+| `spacing` | Spacing scale |
+
+[`example/`](https://github.com/manakuro/react-native-rethemed/tree/main/packages/react-native-rethemed/material-design/example) shows what the CLI generates for `materialDesignTheme` (`themed.gen.ts`, `themed.md`).
+
+## License
+
+MIT. Token values are converted from the [Material Design 3](https://m3.material.io/) specification.

package/dist/cjs/index.d.ts

@@ -0,0 +1,144 @@
+/**
+ * Material Design 3's baseline type scale — 5 roles (display/headline/title/
+ * body/label) × 3 sizes (lg/md/sm).
+ * https://m3.material.io/styles/typography/type-scale-tokens
+ *
+ * MD3 Expressive's additional 15 "Emphasized" styles are intentionally left
+ * out — their values are less stable/well-documented across sources than
+ * this baseline scale.
+ */
+export declare const typescale: {
+    readonly display: {
+        readonly lg: {
+            readonly fontSize: 57;
+            readonly lineHeight: 64;
+            readonly letterSpacing: -0.25;
+            readonly fontWeight: "400";
+        };
+        readonly md: {
+            readonly fontSize: 45;
+            readonly lineHeight: 52;
+            readonly letterSpacing: 0;
+            readonly fontWeight: "400";
+        };
+        readonly sm: {
+            readonly fontSize: 36;
+            readonly lineHeight: 44;
+            readonly letterSpacing: 0;
+            readonly fontWeight: "400";
+        };
+    };
+    readonly headline: {
+        readonly lg: {
+            readonly fontSize: 32;
+            readonly lineHeight: 40;
+            readonly letterSpacing: 0;
+            readonly fontWeight: "400";
+        };
+        readonly md: {
+            readonly fontSize: 28;
+            readonly lineHeight: 36;
+            readonly letterSpacing: 0;
+            readonly fontWeight: "400";
+        };
+        readonly sm: {
+            readonly fontSize: 24;
+            readonly lineHeight: 32;
+            readonly letterSpacing: 0;
+            readonly fontWeight: "400";
+        };
+    };
+    readonly title: {
+        readonly lg: {
+            readonly fontSize: 22;
+            readonly lineHeight: 28;
+            readonly letterSpacing: 0;
+            readonly fontWeight: "400";
+        };
+        readonly md: {
+            readonly fontSize: 16;
+            readonly lineHeight: 24;
+            readonly letterSpacing: 0.15;
+            readonly fontWeight: "500";
+        };
+        readonly sm: {
+            readonly fontSize: 14;
+            readonly lineHeight: 20;
+            readonly letterSpacing: 0.1;
+            readonly fontWeight: "500";
+        };
+    };
+    readonly body: {
+        readonly lg: {
+            readonly fontSize: 16;
+            readonly lineHeight: 24;
+            readonly letterSpacing: 0.5;
+            readonly fontWeight: "400";
+        };
+        readonly md: {
+            readonly fontSize: 14;
+            readonly lineHeight: 20;
+            readonly letterSpacing: 0.25;
+            readonly fontWeight: "400";
+        };
+        readonly sm: {
+            readonly fontSize: 12;
+            readonly lineHeight: 16;
+            readonly letterSpacing: 0.4;
+            readonly fontWeight: "400";
+        };
+    };
+    readonly label: {
+        readonly lg: {
+            readonly fontSize: 14;
+            readonly lineHeight: 20;
+            readonly letterSpacing: 0.1;
+            readonly fontWeight: "500";
+        };
+        readonly md: {
+            readonly fontSize: 12;
+            readonly lineHeight: 16;
+            readonly letterSpacing: 0.5;
+            readonly fontWeight: "500";
+        };
+        readonly sm: {
+            readonly fontSize: 11;
+            readonly lineHeight: 16;
+            readonly letterSpacing: 0.5;
+            readonly fontWeight: "500";
+        };
+    };
+};
+/**
+ * Material Design 3's system spacing tokens (`md.sys.measurement.space*`),
+ * keyed by their dp value: `space100` (8dp) → `8`, so
+ * `themed.view({ padding: 8 })` is 8. React Native style numbers are already
+ * density-independent (1dp = 1), so values are used as-is.
+ *
+ * | M3 token | key / value (dp) |
+ * |:--|--:|
+ * | `space0` | 0 |
+ * | `space25` / `space50` / `space75` | 2 / 4 / 6 |
+ * | `space100` / `space125` | 8 / 10 |
+ * | `space200` … `space900` | 16 … 72 (8dp steps) |
+ *
+ * https://m3.material.io/styles/spacing/tokens (checked 2026-10-02; M3 notes
+ * these tokens are so far only used by Jetpack Compose).
+ */
+export declare const spacing: {
+    readonly 0: 0;
+    readonly 2: 2;
+    readonly 4: 4;
+    readonly 6: 6;
+    readonly 8: 8;
+    readonly 10: 10;
+    readonly 16: 16;
+    readonly 24: 24;
+    readonly 32: 32;
+    readonly 40: 40;
+    readonly 48: 48;
+    readonly 56: 56;
+    readonly 64: 64;
+    readonly 72: 72;
+};
+export declare const materialDesignTheme: import("@react-native-rethemed/core/config").ThemeConfig;

package/dist/cjs/index.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.materialDesignTheme = exports.spacing = exports.typescale = void 0;
+const config_1 = require("@react-native-rethemed/core/config");
+/**
+ * Material Design 3's baseline type scale — 5 roles (display/headline/title/
+ * body/label) × 3 sizes (lg/md/sm).
+ * https://m3.material.io/styles/typography/type-scale-tokens
+ *
+ * MD3 Expressive's additional 15 "Emphasized" styles are intentionally left
+ * out — their values are less stable/well-documented across sources than
+ * this baseline scale.
+ */
+exports.typescale = {
+    display: {
+        lg: {
+            fontSize: 57,
+            lineHeight: 64,
+            letterSpacing: -0.25,
+            fontWeight: '400',
+        },
+        md: {
+            fontSize: 45,
+            lineHeight: 52,
+            letterSpacing: 0,
+            fontWeight: '400',
+        },
+        sm: {
+            fontSize: 36,
+            lineHeight: 44,
+            letterSpacing: 0,
+            fontWeight: '400',
+        },
+    },
+    headline: {
+        lg: {
+            fontSize: 32,
+            lineHeight: 40,
+            letterSpacing: 0,
+            fontWeight: '400',
+        },
+        md: {
+            fontSize: 28,
+            lineHeight: 36,
+            letterSpacing: 0,
+            fontWeight: '400',
+        },
+        sm: {
+            fontSize: 24,
+            lineHeight: 32,
+            letterSpacing: 0,
+            fontWeight: '400',
+        },
+    },
+    title: {
+        lg: {
+            fontSize: 22,
+            lineHeight: 28,
+            letterSpacing: 0,
+            fontWeight: '400',
+        },
+        md: {
+            fontSize: 16,
+            lineHeight: 24,
+            letterSpacing: 0.15,
+            fontWeight: '500',
+        },
+        sm: {
+            fontSize: 14,
+            lineHeight: 20,
+            letterSpacing: 0.1,
+            fontWeight: '500',
+        },
+    },
+    body: {
+        lg: {
+            fontSize: 16,
+            lineHeight: 24,
+            letterSpacing: 0.5,
+            fontWeight: '400',
+        },
+        md: {
+            fontSize: 14,
+            lineHeight: 20,
+            letterSpacing: 0.25,
+            fontWeight: '400',
+        },
+        sm: {
+            fontSize: 12,
+            lineHeight: 16,
+            letterSpacing: 0.4,
+            fontWeight: '400',
+        },
+    },
+    label: {
+        lg: {
+            fontSize: 14,
+            lineHeight: 20,
+            letterSpacing: 0.1,
+            fontWeight: '500',
+        },
+        md: {
+            fontSize: 12,
+            lineHeight: 16,
+            letterSpacing: 0.5,
+            fontWeight: '500',
+        },
+        sm: {
+            fontSize: 11,
+            lineHeight: 16,
+            letterSpacing: 0.5,
+            fontWeight: '500',
+        },
+    },
+};
+/**
+ * Material Design 3's system spacing tokens (`md.sys.measurement.space*`),
+ * keyed by their dp value: `space100` (8dp) → `8`, so
+ * `themed.view({ padding: 8 })` is 8. React Native style numbers are already
+ * density-independent (1dp = 1), so values are used as-is.
+ *
+ * | M3 token | key / value (dp) |
+ * |:--|--:|
+ * | `space0` | 0 |
+ * | `space25` / `space50` / `space75` | 2 / 4 / 6 |
+ * | `space100` / `space125` | 8 / 10 |
+ * | `space200` … `space900` | 16 … 72 (8dp steps) |
+ *
+ * https://m3.material.io/styles/spacing/tokens (checked 2026-10-02; M3 notes
+ * these tokens are so far only used by Jetpack Compose).
+ */
+exports.spacing = {
+    0: 0,
+    2: 2,
+    4: 4,
+    6: 6,
+    8: 8,
+    10: 10,
+    16: 16,
+    24: 24,
+    32: 32,
+    40: 40,
+    48: 48,
+    56: 56,
+    64: 64,
+    72: 72,
+};
+exports.materialDesignTheme = (0, config_1.defineTheme)({
+    // Spacing is a scale, not a role, so it is a primitive `tokens` entry.
+    tokens: { spacing: exports.spacing },
+    // Type-scale styles are role-named (MD3 also places them under
+    // `md.sys.typescale.*`, not the reference layer), so they live in
+    // `semanticTokens`. Values stay raw: MD3 has its own scale and does not
+    // reference another theme's primitives.
+    semanticTokens: { text: exports.typescale },
+});

package/dist/cjs/package.json

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

package/dist/esm/index.d.ts

@@ -0,0 +1,144 @@
+/**
+ * Material Design 3's baseline type scale — 5 roles (display/headline/title/
+ * body/label) × 3 sizes (lg/md/sm).
+ * https://m3.material.io/styles/typography/type-scale-tokens
+ *
+ * MD3 Expressive's additional 15 "Emphasized" styles are intentionally left
+ * out — their values are less stable/well-documented across sources than
+ * this baseline scale.
+ */
+export declare const typescale: {
+    readonly display: {
+        readonly lg: {
+            readonly fontSize: 57;
+            readonly lineHeight: 64;
+            readonly letterSpacing: -0.25;
+            readonly fontWeight: "400";
+        };
+        readonly md: {
+            readonly fontSize: 45;
+            readonly lineHeight: 52;
+            readonly letterSpacing: 0;
+            readonly fontWeight: "400";
+        };
+        readonly sm: {
+            readonly fontSize: 36;
+            readonly lineHeight: 44;
+            readonly letterSpacing: 0;
+            readonly fontWeight: "400";
+        };
+    };
+    readonly headline: {
+        readonly lg: {
+            readonly fontSize: 32;
+            readonly lineHeight: 40;
+            readonly letterSpacing: 0;
+            readonly fontWeight: "400";
+        };
+        readonly md: {
+            readonly fontSize: 28;
+            readonly lineHeight: 36;
+            readonly letterSpacing: 0;
+            readonly fontWeight: "400";
+        };
+        readonly sm: {
+            readonly fontSize: 24;
+            readonly lineHeight: 32;
+            readonly letterSpacing: 0;
+            readonly fontWeight: "400";
+        };
+    };
+    readonly title: {
+        readonly lg: {
+            readonly fontSize: 22;
+            readonly lineHeight: 28;
+            readonly letterSpacing: 0;
+            readonly fontWeight: "400";
+        };
+        readonly md: {
+            readonly fontSize: 16;
+            readonly lineHeight: 24;
+            readonly letterSpacing: 0.15;
+            readonly fontWeight: "500";
+        };
+        readonly sm: {
+            readonly fontSize: 14;
+            readonly lineHeight: 20;
+            readonly letterSpacing: 0.1;
+            readonly fontWeight: "500";
+        };
+    };
+    readonly body: {
+        readonly lg: {
+            readonly fontSize: 16;
+            readonly lineHeight: 24;
+            readonly letterSpacing: 0.5;
+            readonly fontWeight: "400";
+        };
+        readonly md: {
+            readonly fontSize: 14;
+            readonly lineHeight: 20;
+            readonly letterSpacing: 0.25;
+            readonly fontWeight: "400";
+        };
+        readonly sm: {
+            readonly fontSize: 12;
+            readonly lineHeight: 16;
+            readonly letterSpacing: 0.4;
+            readonly fontWeight: "400";
+        };
+    };
+    readonly label: {
+        readonly lg: {
+            readonly fontSize: 14;
+            readonly lineHeight: 20;
+            readonly letterSpacing: 0.1;
+            readonly fontWeight: "500";
+        };
+        readonly md: {
+            readonly fontSize: 12;
+            readonly lineHeight: 16;
+            readonly letterSpacing: 0.5;
+            readonly fontWeight: "500";
+        };
+        readonly sm: {
+            readonly fontSize: 11;
+            readonly lineHeight: 16;
+            readonly letterSpacing: 0.5;
+            readonly fontWeight: "500";
+        };
+    };
+};
+/**
+ * Material Design 3's system spacing tokens (`md.sys.measurement.space*`),
+ * keyed by their dp value: `space100` (8dp) → `8`, so
+ * `themed.view({ padding: 8 })` is 8. React Native style numbers are already
+ * density-independent (1dp = 1), so values are used as-is.
+ *
+ * | M3 token | key / value (dp) |
+ * |:--|--:|
+ * | `space0` | 0 |
+ * | `space25` / `space50` / `space75` | 2 / 4 / 6 |
+ * | `space100` / `space125` | 8 / 10 |
+ * | `space200` … `space900` | 16 … 72 (8dp steps) |
+ *
+ * https://m3.material.io/styles/spacing/tokens (checked 2026-10-02; M3 notes
+ * these tokens are so far only used by Jetpack Compose).
+ */
+export declare const spacing: {
+    readonly 0: 0;
+    readonly 2: 2;
+    readonly 4: 4;
+    readonly 6: 6;
+    readonly 8: 8;
+    readonly 10: 10;
+    readonly 16: 16;
+    readonly 24: 24;
+    readonly 32: 32;
+    readonly 40: 40;
+    readonly 48: 48;
+    readonly 56: 56;
+    readonly 64: 64;
+    readonly 72: 72;
+};
+export declare const materialDesignTheme: import("@react-native-rethemed/core/config").ThemeConfig;

package/dist/esm/index.js

@@ -0,0 +1,153 @@
+import { defineTheme, } from '@react-native-rethemed/core/config';
+/**
+ * Material Design 3's baseline type scale — 5 roles (display/headline/title/
+ * body/label) × 3 sizes (lg/md/sm).
+ * https://m3.material.io/styles/typography/type-scale-tokens
+ *
+ * MD3 Expressive's additional 15 "Emphasized" styles are intentionally left
+ * out — their values are less stable/well-documented across sources than
+ * this baseline scale.
+ */
+export const typescale = {
+    display: {
+        lg: {
+            fontSize: 57,
+            lineHeight: 64,
+            letterSpacing: -0.25,
+            fontWeight: '400',
+        },
+        md: {
+            fontSize: 45,
+            lineHeight: 52,
+            letterSpacing: 0,
+            fontWeight: '400',
+        },
+        sm: {
+            fontSize: 36,
+            lineHeight: 44,
+            letterSpacing: 0,
+            fontWeight: '400',
+        },
+    },
+    headline: {
+        lg: {
+            fontSize: 32,
+            lineHeight: 40,
+            letterSpacing: 0,
+            fontWeight: '400',
+        },
+        md: {
+            fontSize: 28,
+            lineHeight: 36,
+            letterSpacing: 0,
+            fontWeight: '400',
+        },
+        sm: {
+            fontSize: 24,
+            lineHeight: 32,
+            letterSpacing: 0,
+            fontWeight: '400',
+        },
+    },
+    title: {
+        lg: {
+            fontSize: 22,
+            lineHeight: 28,
+            letterSpacing: 0,
+            fontWeight: '400',
+        },
+        md: {
+            fontSize: 16,
+            lineHeight: 24,
+            letterSpacing: 0.15,
+            fontWeight: '500',
+        },
+        sm: {
+            fontSize: 14,
+            lineHeight: 20,
+            letterSpacing: 0.1,
+            fontWeight: '500',
+        },
+    },
+    body: {
+        lg: {
+            fontSize: 16,
+            lineHeight: 24,
+            letterSpacing: 0.5,
+            fontWeight: '400',
+        },
+        md: {
+            fontSize: 14,
+            lineHeight: 20,
+            letterSpacing: 0.25,
+            fontWeight: '400',
+        },
+        sm: {
+            fontSize: 12,
+            lineHeight: 16,
+            letterSpacing: 0.4,
+            fontWeight: '400',
+        },
+    },
+    label: {
+        lg: {
+            fontSize: 14,
+            lineHeight: 20,
+            letterSpacing: 0.1,
+            fontWeight: '500',
+        },
+        md: {
+            fontSize: 12,
+            lineHeight: 16,
+            letterSpacing: 0.5,
+            fontWeight: '500',
+        },
+        sm: {
+            fontSize: 11,
+            lineHeight: 16,
+            letterSpacing: 0.5,
+            fontWeight: '500',
+        },
+    },
+};
+/**
+ * Material Design 3's system spacing tokens (`md.sys.measurement.space*`),
+ * keyed by their dp value: `space100` (8dp) → `8`, so
+ * `themed.view({ padding: 8 })` is 8. React Native style numbers are already
+ * density-independent (1dp = 1), so values are used as-is.
+ *
+ * | M3 token | key / value (dp) |
+ * |:--|--:|
+ * | `space0` | 0 |
+ * | `space25` / `space50` / `space75` | 2 / 4 / 6 |
+ * | `space100` / `space125` | 8 / 10 |
+ * | `space200` … `space900` | 16 … 72 (8dp steps) |
+ *
+ * https://m3.material.io/styles/spacing/tokens (checked 2026-10-02; M3 notes
+ * these tokens are so far only used by Jetpack Compose).
+ */
+export const spacing = {
+    0: 0,
+    2: 2,
+    4: 4,
+    6: 6,
+    8: 8,
+    10: 10,
+    16: 16,
+    24: 24,
+    32: 32,
+    40: 40,
+    48: 48,
+    56: 56,
+    64: 64,
+    72: 72,
+};
+export const materialDesignTheme = defineTheme({
+    // Spacing is a scale, not a role, so it is a primitive `tokens` entry.
+    tokens: { spacing },
+    // Type-scale styles are role-named (MD3 also places them under
+    // `md.sys.typescale.*`, not the reference layer), so they live in
+    // `semanticTokens`. Values stay raw: MD3 has its own scale and does not
+    // reference another theme's primitives.
+    semanticTokens: { text: typescale },
+});

package/dist/esm/package.json

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

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@react-native-rethemed/material-design-tokens",
+  "version": "0.1.0",
+  "description": "Material Design 3 type scale and tokens for React Native, ready for react-native-rethemed.",
+  "keywords": [
+    "react-native",
+    "react-native-rethemed",
+    "material-design",
+    "material-3",
+    "design-tokens"
+  ],
+  "license": "MIT",
+  "author": "manakuro",
+  "homepage": "https://github.com/manakuro/react-native-rethemed/tree/main/packages/react-native-rethemed/material-design#readme",
+  "bugs": {
+    "url": "https://github.com/manakuro/react-native-rethemed/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/manakuro/react-native-rethemed.git",
+    "directory": "packages/react-native-rethemed/material-design"
+  },
+  "sideEffects": false,
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/cjs/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@react-native-rethemed/core": "^0.1.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.5.4",
+    "@react-native-rethemed/cli": "0.1.0",
+    "@types/node": "24.10.4",
+    "@types/react": "19.2.17",
+    "biome-config": "0.0.0",
+    "react": "19.2.3",
+    "react-native": "0.86.2",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  },
+  "scripts": {
+    "build": "node ../../../scripts/build-package.mjs",
+    "example:codegen": "react-native-rethemed codegen example/theme.ts --docs example/themed.md",
+    "lint": "biome check src example",
+    "lint:fix": "biome check --write --unsafe src example",
+    "tsc": "tsc --noEmit",
+    "test": "vitest",
+    "test:ci": "vitest run"
+  }
+}