@react-native-rethemed/chakra-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,59 @@
+# @react-native-rethemed/chakra-ui-tokens
+
+Chakra UI's default design tokens for React Native, ready for [react-native-rethemed](https://github.com/manakuro/react-native-rethemed).
+
+## Installation
+
+```sh
+npm install @react-native-rethemed/core @react-native-rethemed/chakra-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 { extendTheme } from '@react-native-rethemed/core';
+import { chakraUiTheme } from '@react-native-rethemed/chakra-ui-tokens';
+
+export const themeConfig = extendTheme(chakraUiTheme, {
+  semanticTokens: {
+    text: {
+      heading: { fontSize: '2xl', fontWeight: 'bold', color: 'fg.default' },
+    },
+  },
+});
+```
+
+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 |
+| --- | --- |
+| `chakraUiTheme` | The full theme, ready for `createThemed` / the CLI |
+| `colors` | Color palette (`'blue.500'`) |
+| `semanticColors` | Light/dark semantic colors (`'fg.default'`, `'bg.subtle'`) |
+| `radii`, `spacing`, `fontSizes`, `fontWeights`, `lineHeights`, `letterSpacings`, `shadows`, `zIndices` | Individual token scales |
+
+[`example/`](https://github.com/manakuro/react-native-rethemed/tree/main/packages/react-native-rethemed/chakra-ui/example) shows what the CLI generates for `chakraUiTheme` (`themed.gen.ts`, `themed.md`).
+
+## License
+
+MIT. Token values are converted from [Chakra UI](https://github.com/chakra-ui/chakra-ui) (MIT).

package/dist/cjs/colors.d.ts

@@ -0,0 +1,599 @@
+/**
+ * Color tokens mirroring Chakra UI's Color Tokens / Semantic Tokens.
+ * https://www.chakra-ui.com/docs/theming/colors
+ */
+export declare const colors: {
+    readonly white: "#ffffff";
+    readonly black: "#000000";
+    readonly 'gray.50': "#fafafa";
+    readonly 'gray.100': "#f4f4f5";
+    readonly 'gray.200': "#e4e4e7";
+    readonly 'gray.300': "#d4d4d8";
+    readonly 'gray.400': "#a1a1aa";
+    readonly 'gray.500': "#71717a";
+    readonly 'gray.600': "#52525b";
+    readonly 'gray.700': "#3f3f46";
+    readonly 'gray.800': "#27272a";
+    readonly 'gray.900': "#18181b";
+    readonly 'gray.950': "#111111";
+    readonly 'neutral.50': "#fafafa";
+    readonly 'neutral.100': "#f5f5f5";
+    readonly 'neutral.200': "#e5e5e5";
+    readonly 'neutral.300': "#d4d4d4";
+    readonly 'neutral.400': "#a3a3a3";
+    readonly 'neutral.500': "#737373";
+    readonly 'neutral.600': "#525252";
+    readonly 'neutral.700': "#404040";
+    readonly 'neutral.800': "#262626";
+    readonly 'neutral.900': "#171717";
+    readonly 'neutral.950': "#0a0a0a";
+    readonly 'red.50': "#fef2f2";
+    readonly 'red.100': "#fee2e2";
+    readonly 'red.200': "#fecaca";
+    readonly 'red.300': "#fca5a5";
+    readonly 'red.400': "#f87171";
+    readonly 'red.500': "#ef4444";
+    readonly 'red.600': "#dc2626";
+    readonly 'red.700': "#991919";
+    readonly 'red.800': "#511111";
+    readonly 'red.900': "#300c0c";
+    readonly 'red.950': "#1f0808";
+    readonly 'orange.50': "#fff7ed";
+    readonly 'orange.100': "#ffedd5";
+    readonly 'orange.200': "#fed7aa";
+    readonly 'orange.300': "#fdba74";
+    readonly 'orange.400': "#fb923c";
+    readonly 'orange.500': "#f97316";
+    readonly 'orange.600': "#ea580c";
+    readonly 'orange.700': "#92310a";
+    readonly 'orange.800': "#6c2710";
+    readonly 'orange.900': "#3b1106";
+    readonly 'orange.950': "#220a04";
+    readonly 'yellow.50': "#fefce8";
+    readonly 'yellow.100': "#fef9c3";
+    readonly 'yellow.200': "#fef08a";
+    readonly 'yellow.300': "#fde047";
+    readonly 'yellow.400': "#facc15";
+    readonly 'yellow.500': "#eab308";
+    readonly 'yellow.600': "#ca8a04";
+    readonly 'yellow.700': "#845209";
+    readonly 'yellow.800': "#713f12";
+    readonly 'yellow.900': "#422006";
+    readonly 'yellow.950': "#281304";
+    readonly 'green.50': "#f0fdf4";
+    readonly 'green.100': "#dcfce7";
+    readonly 'green.200': "#bbf7d0";
+    readonly 'green.300': "#86efac";
+    readonly 'green.400': "#4ade80";
+    readonly 'green.500': "#22c55e";
+    readonly 'green.600': "#16a34a";
+    readonly 'green.700': "#116932";
+    readonly 'green.800': "#124a28";
+    readonly 'green.900': "#042713";
+    readonly 'green.950': "#03190c";
+    readonly 'teal.50': "#f0fdfa";
+    readonly 'teal.100': "#ccfbf1";
+    readonly 'teal.200': "#99f6e4";
+    readonly 'teal.300': "#5eead4";
+    readonly 'teal.400': "#2dd4bf";
+    readonly 'teal.500': "#14b8a6";
+    readonly 'teal.600': "#0d9488";
+    readonly 'teal.700': "#0c5d56";
+    readonly 'teal.800': "#114240";
+    readonly 'teal.900': "#032726";
+    readonly 'teal.950': "#021716";
+    readonly 'blue.50': "#eff6ff";
+    readonly 'blue.100': "#dbeafe";
+    readonly 'blue.200': "#bfdbfe";
+    readonly 'blue.300': "#a3cfff";
+    readonly 'blue.400': "#60a5fa";
+    readonly 'blue.500': "#3b82f6";
+    readonly 'blue.600': "#2563eb";
+    readonly 'blue.700': "#173da6";
+    readonly 'blue.800': "#1a3478";
+    readonly 'blue.900': "#14204a";
+    readonly 'blue.950': "#0c142e";
+    readonly 'cyan.50': "#ecfeff";
+    readonly 'cyan.100': "#cffafe";
+    readonly 'cyan.200': "#a5f3fc";
+    readonly 'cyan.300': "#67e8f9";
+    readonly 'cyan.400': "#22d3ee";
+    readonly 'cyan.500': "#06b6d4";
+    readonly 'cyan.600': "#0891b2";
+    readonly 'cyan.700': "#0c5c72";
+    readonly 'cyan.800': "#134152";
+    readonly 'cyan.900': "#072a38";
+    readonly 'cyan.950': "#051b24";
+    readonly 'purple.50': "#faf5ff";
+    readonly 'purple.100': "#f3e8ff";
+    readonly 'purple.200': "#e9d5ff";
+    readonly 'purple.300': "#d8b4fe";
+    readonly 'purple.400': "#c084fc";
+    readonly 'purple.500': "#a855f7";
+    readonly 'purple.600': "#9333ea";
+    readonly 'purple.700': "#641ba3";
+    readonly 'purple.800': "#4a1772";
+    readonly 'purple.900': "#2f0553";
+    readonly 'purple.950': "#1a032e";
+    readonly 'pink.50': "#fdf2f8";
+    readonly 'pink.100': "#fce7f3";
+    readonly 'pink.200': "#fbcfe8";
+    readonly 'pink.300': "#f9a8d4";
+    readonly 'pink.400': "#f472b6";
+    readonly 'pink.500': "#ec4899";
+    readonly 'pink.600': "#db2777";
+    readonly 'pink.700': "#a41752";
+    readonly 'pink.800': "#6d0e34";
+    readonly 'pink.900': "#45061f";
+    readonly 'pink.950': "#2c0514";
+};
+/**
+ * Scheme-dependent colors in `ThemeConfig['semanticTokens']['colors']`'s
+ * shape: group -> token -> scheme, so `'fg.default'` resolves in one lookup.
+ */
+export declare const semanticColors: {
+    readonly primary: {
+        readonly bg: {
+            readonly light: "#000000";
+            readonly dark: "#ffffff";
+        };
+        readonly fg: {
+            readonly light: "#ffffff";
+            readonly dark: "#000000";
+        };
+    };
+    readonly bg: {
+        readonly default: {
+            readonly light: "#ffffff";
+            readonly dark: "#000000";
+        };
+        readonly subtle: {
+            readonly light: "#fafafa";
+            readonly dark: "#111111";
+        };
+        readonly muted: {
+            readonly light: "#f4f4f5";
+            readonly dark: "#18181b";
+        };
+        readonly emphasized: {
+            readonly light: "#e4e4e7";
+            readonly dark: "#3f3f46";
+        };
+        readonly inverted: {
+            readonly light: "#000000";
+            readonly dark: "#ffffff";
+        };
+        readonly panel: {
+            readonly light: "#ffffff";
+            readonly dark: "#111111";
+        };
+        readonly error: {
+            readonly light: "#fef2f2";
+            readonly dark: "#1f0808";
+        };
+        readonly warning: {
+            readonly light: "#fefce8";
+            readonly dark: "#281304";
+        };
+        readonly success: {
+            readonly light: "#f0fdf4";
+            readonly dark: "#03190c";
+        };
+        readonly info: {
+            readonly light: "#eff6ff";
+            readonly dark: "#0c142e";
+        };
+    };
+    readonly border: {
+        readonly default: {
+            readonly light: "#e4e4e7";
+            readonly dark: "#27272a";
+        };
+        readonly muted: {
+            readonly light: "#f4f4f5";
+            readonly dark: "#18181b";
+        };
+        readonly subtle: {
+            readonly light: "#fafafa";
+            readonly dark: "#111111";
+        };
+        readonly emphasized: {
+            readonly light: "#d4d4d8";
+            readonly dark: "#3f3f46";
+        };
+        readonly inverted: {
+            readonly light: "#27272a";
+            readonly dark: "#e4e4e7";
+        };
+        readonly error: {
+            readonly light: "#ef4444";
+            readonly dark: "#f87171";
+        };
+        readonly warning: {
+            readonly light: "#f97316";
+            readonly dark: "#fb923c";
+        };
+        readonly success: {
+            readonly light: "#22c55e";
+            readonly dark: "#4ade80";
+        };
+        readonly info: {
+            readonly light: "#3b82f6";
+            readonly dark: "#60a5fa";
+        };
+    };
+    readonly fg: {
+        readonly default: {
+            readonly light: "#000000";
+            readonly dark: "#fafafa";
+        };
+        readonly muted: {
+            readonly light: "#52525b";
+            readonly dark: "#a1a1aa";
+        };
+        readonly subtle: {
+            readonly light: "#a1a1aa";
+            readonly dark: "#71717a";
+        };
+        readonly inverted: {
+            readonly light: "#fafafa";
+            readonly dark: "#000000";
+        };
+        readonly error: {
+            readonly light: "#ef4444";
+            readonly dark: "#f87171";
+        };
+        readonly warning: {
+            readonly light: "#ea580c";
+            readonly dark: "#fdba74";
+        };
+        readonly success: {
+            readonly light: "#16a34a";
+            readonly dark: "#86efac";
+        };
+        readonly info: {
+            readonly light: "#2563eb";
+            readonly dark: "#a3cfff";
+        };
+    };
+    readonly gray: {
+        readonly contrast: {
+            readonly light: "#ffffff";
+            readonly dark: "#000000";
+        };
+        readonly fg: {
+            readonly light: "#27272a";
+            readonly dark: "#e4e4e7";
+        };
+        readonly subtle: {
+            readonly light: "#f4f4f5";
+            readonly dark: "#18181b";
+        };
+        readonly muted: {
+            readonly light: "#e4e4e7";
+            readonly dark: "#27272a";
+        };
+        readonly emphasized: {
+            readonly light: "#d4d4d8";
+            readonly dark: "#3f3f46";
+        };
+        readonly solid: {
+            readonly light: "#18181b";
+            readonly dark: "#ffffff";
+        };
+        readonly focusRing: {
+            readonly light: "#a1a1aa";
+            readonly dark: "#a1a1aa";
+        };
+        readonly border: {
+            readonly light: "#e4e4e7";
+            readonly dark: "#27272a";
+        };
+    };
+    readonly red: {
+        readonly contrast: {
+            readonly light: "#ffffff";
+            readonly dark: "#ffffff";
+        };
+        readonly fg: {
+            readonly light: "#991919";
+            readonly dark: "#fca5a5";
+        };
+        readonly subtle: {
+            readonly light: "#fee2e2";
+            readonly dark: "#300c0c";
+        };
+        readonly muted: {
+            readonly light: "#fecaca";
+            readonly dark: "#511111";
+        };
+        readonly emphasized: {
+            readonly light: "#fca5a5";
+            readonly dark: "#991919";
+        };
+        readonly solid: {
+            readonly light: "#dc2626";
+            readonly dark: "#dc2626";
+        };
+        readonly focusRing: {
+            readonly light: "#ef4444";
+            readonly dark: "#ef4444";
+        };
+        readonly border: {
+            readonly light: "#ef4444";
+            readonly dark: "#f87171";
+        };
+    };
+    readonly pink: {
+        readonly contrast: {
+            readonly light: "#ffffff";
+            readonly dark: "#ffffff";
+        };
+        readonly fg: {
+            readonly light: "#a41752";
+            readonly dark: "#f9a8d4";
+        };
+        readonly subtle: {
+            readonly light: "#fce7f3";
+            readonly dark: "#45061f";
+        };
+        readonly muted: {
+            readonly light: "#fbcfe8";
+            readonly dark: "#6d0e34";
+        };
+        readonly emphasized: {
+            readonly light: "#f9a8d4";
+            readonly dark: "#a41752";
+        };
+        readonly solid: {
+            readonly light: "#db2777";
+            readonly dark: "#db2777";
+        };
+        readonly focusRing: {
+            readonly light: "#ec4899";
+            readonly dark: "#ec4899";
+        };
+        readonly border: {
+            readonly light: "#ec4899";
+            readonly dark: "#f472b6";
+        };
+    };
+    readonly purple: {
+        readonly contrast: {
+            readonly light: "#ffffff";
+            readonly dark: "#ffffff";
+        };
+        readonly fg: {
+            readonly light: "#641ba3";
+            readonly dark: "#d8b4fe";
+        };
+        readonly subtle: {
+            readonly light: "#f3e8ff";
+            readonly dark: "#2f0553";
+        };
+        readonly muted: {
+            readonly light: "#e9d5ff";
+            readonly dark: "#4a1772";
+        };
+        readonly emphasized: {
+            readonly light: "#d8b4fe";
+            readonly dark: "#641ba3";
+        };
+        readonly solid: {
+            readonly light: "#9333ea";
+            readonly dark: "#9333ea";
+        };
+        readonly focusRing: {
+            readonly light: "#a855f7";
+            readonly dark: "#a855f7";
+        };
+        readonly border: {
+            readonly light: "#a855f7";
+            readonly dark: "#c084fc";
+        };
+    };
+    readonly cyan: {
+        readonly contrast: {
+            readonly light: "#ffffff";
+            readonly dark: "#ffffff";
+        };
+        readonly fg: {
+            readonly light: "#0c5c72";
+            readonly dark: "#67e8f9";
+        };
+        readonly subtle: {
+            readonly light: "#cffafe";
+            readonly dark: "#072a38";
+        };
+        readonly muted: {
+            readonly light: "#a5f3fc";
+            readonly dark: "#134152";
+        };
+        readonly emphasized: {
+            readonly light: "#67e8f9";
+            readonly dark: "#0c5c72";
+        };
+        readonly solid: {
+            readonly light: "#0891b2";
+            readonly dark: "#0891b2";
+        };
+        readonly focusRing: {
+            readonly light: "#06b6d4";
+            readonly dark: "#06b6d4";
+        };
+        readonly border: {
+            readonly light: "#06b6d4";
+            readonly dark: "#22d3ee";
+        };
+    };
+    readonly blue: {
+        readonly contrast: {
+            readonly light: "#ffffff";
+            readonly dark: "#ffffff";
+        };
+        readonly fg: {
+            readonly light: "#173da6";
+            readonly dark: "#a3cfff";
+        };
+        readonly subtle: {
+            readonly light: "#dbeafe";
+            readonly dark: "#14204a";
+        };
+        readonly muted: {
+            readonly light: "#bfdbfe";
+            readonly dark: "#1a3478";
+        };
+        readonly emphasized: {
+            readonly light: "#a3cfff";
+            readonly dark: "#173da6";
+        };
+        readonly solid: {
+            readonly light: "#2563eb";
+            readonly dark: "#2563eb";
+        };
+        readonly focusRing: {
+            readonly light: "#3b82f6";
+            readonly dark: "#3b82f6";
+        };
+        readonly border: {
+            readonly light: "#3b82f6";
+            readonly dark: "#60a5fa";
+        };
+    };
+    readonly teal: {
+        readonly contrast: {
+            readonly light: "#ffffff";
+            readonly dark: "#ffffff";
+        };
+        readonly fg: {
+            readonly light: "#0c5d56";
+            readonly dark: "#5eead4";
+        };
+        readonly subtle: {
+            readonly light: "#ccfbf1";
+            readonly dark: "#032726";
+        };
+        readonly muted: {
+            readonly light: "#99f6e4";
+            readonly dark: "#114240";
+        };
+        readonly emphasized: {
+            readonly light: "#5eead4";
+            readonly dark: "#0c5d56";
+        };
+        readonly solid: {
+            readonly light: "#0d9488";
+            readonly dark: "#0d9488";
+        };
+        readonly focusRing: {
+            readonly light: "#14b8a6";
+            readonly dark: "#14b8a6";
+        };
+        readonly border: {
+            readonly light: "#14b8a6";
+            readonly dark: "#2dd4bf";
+        };
+    };
+    readonly green: {
+        readonly contrast: {
+            readonly light: "#ffffff";
+            readonly dark: "#ffffff";
+        };
+        readonly fg: {
+            readonly light: "#116932";
+            readonly dark: "#86efac";
+        };
+        readonly subtle: {
+            readonly light: "#dcfce7";
+            readonly dark: "#042713";
+        };
+        readonly muted: {
+            readonly light: "#bbf7d0";
+            readonly dark: "#124a28";
+        };
+        readonly emphasized: {
+            readonly light: "#86efac";
+            readonly dark: "#116932";
+        };
+        readonly solid: {
+            readonly light: "#16a34a";
+            readonly dark: "#16a34a";
+        };
+        readonly focusRing: {
+            readonly light: "#22c55e";
+            readonly dark: "#22c55e";
+        };
+        readonly border: {
+            readonly light: "#22c55e";
+            readonly dark: "#4ade80";
+        };
+    };
+    readonly yellow: {
+        readonly contrast: {
+            readonly light: "#000000";
+            readonly dark: "#000000";
+        };
+        readonly fg: {
+            readonly light: "#713f12";
+            readonly dark: "#fde047";
+        };
+        readonly subtle: {
+            readonly light: "#fef9c3";
+            readonly dark: "#422006";
+        };
+        readonly muted: {
+            readonly light: "#fef08a";
+            readonly dark: "#713f12";
+        };
+        readonly emphasized: {
+            readonly light: "#fde047";
+            readonly dark: "#845209";
+        };
+        readonly solid: {
+            readonly light: "#fde047";
+            readonly dark: "#fde047";
+        };
+        readonly focusRing: {
+            readonly light: "#eab308";
+            readonly dark: "#eab308";
+        };
+        readonly border: {
+            readonly light: "#eab308";
+            readonly dark: "#eab308";
+        };
+    };
+    readonly orange: {
+        readonly contrast: {
+            readonly light: "#ffffff";
+            readonly dark: "#000000";
+        };
+        readonly fg: {
+            readonly light: "#92310a";
+            readonly dark: "#fdba74";
+        };
+        readonly subtle: {
+            readonly light: "#ffedd5";
+            readonly dark: "#3b1106";
+        };
+        readonly muted: {
+            readonly light: "#fed7aa";
+            readonly dark: "#6c2710";
+        };
+        readonly emphasized: {
+            readonly light: "#fdba74";
+            readonly dark: "#92310a";
+        };
+        readonly solid: {
+            readonly light: "#ea580c";
+            readonly dark: "#ea580c";
+        };
+        readonly focusRing: {
+            readonly light: "#f97316";
+            readonly dark: "#f97316";
+        };
+        readonly border: {
+            readonly light: "#f97316";
+            readonly dark: "#fb923c";
+        };
+    };
+};