@react-native-rethemed/shadcn-ui-tokens 0.1.0 → 0.1.1

package/README.md

@@ -1,5 +1,7 @@
 # @react-native-rethemed/shadcn-ui-tokens
 
+[![npm](https://img.shields.io/npm/v/@react-native-rethemed/shadcn-ui-tokens.svg)](https://www.npmjs.com/package/@react-native-rethemed/shadcn-ui-tokens)
+
 shadcn/ui's theme (semantic colors, radii, all base colors) for React Native, ready for [react-native-rethemed](https://github.com/manakuro/react-native-rethemed).
 
 shadcn/ui is Tailwind CSS plus CSS variables, so `shadcnUiTheme` is `tailwindCssTheme` with shadcn/ui's light/dark semantic colors (named like the class names: `'primary'`, `'muted-foreground'`) and `--radius` scale on top. All seven base colors are exported as `baseColors`.

package/dist/index.cjs

@@ -0,0 +1,35 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_tokens_gen = require("./tokens.gen.cjs");
+let _react_native_rethemed_core_config = require("@react-native-rethemed/core/config");
+let _react_native_rethemed_tailwind_css_tokens = require("@react-native-rethemed/tailwind-css-tokens");
+//#region src/index.ts
+/** The default base color's semantic colors (`neutral`). */
+const semanticColors = require_tokens_gen.baseColors.neutral;
+/**
+* shadcn/ui's default theme (base color `neutral`), converted for React
+* Native. shadcn/ui is Tailwind CSS plus CSS variables, so this is
+* `tailwindCssTheme` (spacing, typography, shadows, the color palette) with
+* shadcn/ui's colors and radii on top, the same layering as a shadcn/ui
+* project's `globals.css`.
+*
+* - Semantic colors use shadcn/ui's names as top-level colors, so styles
+*   read like the class names: `bg-primary text-primary-foreground` is
+*   `themed.view({ backgroundColor: 'primary' })` /
+*   `themed.text({ color: 'primary-foreground' })`. oklch is converted to
+*   hex; translucent dark-mode borders become 8-digit hex.
+* - `radii`: `--radius` (10) and the `radius-sm`…`radius-4xl` scale derived
+*   from it replace Tailwind's, like shadcn/ui's `@theme inline`.
+* - Other base colors: `baseColors.zinc`, … — switch with
+*   `extendTheme(shadcnUiTheme, { semanticTokens: { colors: baseColors.zinc } })`.
+* - Values come from the shadcn/ui registry snapshot in `scripts/registry/`
+*   (`pnpm sync`), converted by `scripts/generate.ts`.
+*/
+const shadcnUiTheme = (0, _react_native_rethemed_core_config.extendTheme)(_react_native_rethemed_tailwind_css_tokens.tailwindCssTheme, {
+	tokens: { radii: require_tokens_gen.radii },
+	semanticTokens: { colors: semanticColors }
+});
+//#endregion
+exports.baseColors = require_tokens_gen.baseColors;
+exports.radii = require_tokens_gen.radii;
+exports.semanticColors = semanticColors;
+exports.shadcnUiTheme = shadcnUiTheme;

package/dist/index.d.cts

@@ -0,0 +1,153 @@
+import { baseColors, radii } from "./tokens.gen.cjs";
+//#region src/index.d.ts
+/** A shadcn/ui base color: `neutral` (the default), `stone`, `zinc`, … */
+export type BaseColor = keyof typeof baseColors;
+/** The default base color's semantic colors (`neutral`). */
+export declare const semanticColors: {
+  readonly background: {
+    readonly light: "#ffffff";
+    readonly dark: "#0a0a0a";
+  };
+  readonly foreground: {
+    readonly light: "#0a0a0a";
+    readonly dark: "#fafafa";
+  };
+  readonly card: {
+    readonly light: "#ffffff";
+    readonly dark: "#171717";
+  };
+  readonly 'card-foreground': {
+    readonly light: "#0a0a0a";
+    readonly dark: "#fafafa";
+  };
+  readonly popover: {
+    readonly light: "#ffffff";
+    readonly dark: "#171717";
+  };
+  readonly 'popover-foreground': {
+    readonly light: "#0a0a0a";
+    readonly dark: "#fafafa";
+  };
+  readonly primary: {
+    readonly light: "#171717";
+    readonly dark: "#e5e5e5";
+  };
+  readonly 'primary-foreground': {
+    readonly light: "#fafafa";
+    readonly dark: "#171717";
+  };
+  readonly secondary: {
+    readonly light: "#f5f5f5";
+    readonly dark: "#262626";
+  };
+  readonly 'secondary-foreground': {
+    readonly light: "#171717";
+    readonly dark: "#fafafa";
+  };
+  readonly muted: {
+    readonly light: "#f5f5f5";
+    readonly dark: "#262626";
+  };
+  readonly 'muted-foreground': {
+    readonly light: "#737373";
+    readonly dark: "#a1a1a1";
+  };
+  readonly accent: {
+    readonly light: "#f5f5f5";
+    readonly dark: "#262626";
+  };
+  readonly 'accent-foreground': {
+    readonly light: "#171717";
+    readonly dark: "#fafafa";
+  };
+  readonly destructive: {
+    readonly light: "#e7000b";
+    readonly dark: "#ff6467";
+  };
+  readonly border: {
+    readonly light: "#e5e5e5";
+    readonly dark: "#ffffff1a";
+  };
+  readonly input: {
+    readonly light: "#e5e5e5";
+    readonly dark: "#ffffff26";
+  };
+  readonly ring: {
+    readonly light: "#a1a1a1";
+    readonly dark: "#737373";
+  };
+  readonly 'chart-1': {
+    readonly light: "#d4d4d4";
+    readonly dark: "#d4d4d4";
+  };
+  readonly 'chart-2': {
+    readonly light: "#737373";
+    readonly dark: "#737373";
+  };
+  readonly 'chart-3': {
+    readonly light: "#525252";
+    readonly dark: "#525252";
+  };
+  readonly 'chart-4': {
+    readonly light: "#404040";
+    readonly dark: "#404040";
+  };
+  readonly 'chart-5': {
+    readonly light: "#262626";
+    readonly dark: "#262626";
+  };
+  readonly sidebar: {
+    readonly light: "#fafafa";
+    readonly dark: "#171717";
+  };
+  readonly 'sidebar-foreground': {
+    readonly light: "#0a0a0a";
+    readonly dark: "#fafafa";
+  };
+  readonly 'sidebar-primary': {
+    readonly light: "#171717";
+    readonly dark: "#1447e6";
+  };
+  readonly 'sidebar-primary-foreground': {
+    readonly light: "#fafafa";
+    readonly dark: "#fafafa";
+  };
+  readonly 'sidebar-accent': {
+    readonly light: "#f5f5f5";
+    readonly dark: "#262626";
+  };
+  readonly 'sidebar-accent-foreground': {
+    readonly light: "#171717";
+    readonly dark: "#fafafa";
+  };
+  readonly 'sidebar-border': {
+    readonly light: "#e5e5e5";
+    readonly dark: "#ffffff1a";
+  };
+  readonly 'sidebar-ring': {
+    readonly light: "#a1a1a1";
+    readonly dark: "#737373";
+  };
+};
+/**
+ * shadcn/ui's default theme (base color `neutral`), converted for React
+ * Native. shadcn/ui is Tailwind CSS plus CSS variables, so this is
+ * `tailwindCssTheme` (spacing, typography, shadows, the color palette) with
+ * shadcn/ui's colors and radii on top, the same layering as a shadcn/ui
+ * project's `globals.css`.
+ *
+ * - Semantic colors use shadcn/ui's names as top-level colors, so styles
+ *   read like the class names: `bg-primary text-primary-foreground` is
+ *   `themed.view({ backgroundColor: 'primary' })` /
+ *   `themed.text({ color: 'primary-foreground' })`. oklch is converted to
+ *   hex; translucent dark-mode borders become 8-digit hex.
+ * - `radii`: `--radius` (10) and the `radius-sm`…`radius-4xl` scale derived
+ *   from it replace Tailwind's, like shadcn/ui's `@theme inline`.
+ * - Other base colors: `baseColors.zinc`, … — switch with
+ *   `extendTheme(shadcnUiTheme, { semanticTokens: { colors: baseColors.zinc } })`.
+ * - Values come from the shadcn/ui registry snapshot in `scripts/registry/`
+ *   (`pnpm sync`), converted by `scripts/generate.ts`.
+ */
+export declare const shadcnUiTheme: import("@react-native-rethemed/core/config").ThemeConfig;
+//#endregion
+export { baseColors, radii };

package/dist/index.d.mts

@@ -0,0 +1,153 @@
+import { baseColors, radii } from "./tokens.gen.mjs";
+//#region src/index.d.ts
+/** A shadcn/ui base color: `neutral` (the default), `stone`, `zinc`, … */
+export type BaseColor = keyof typeof baseColors;
+/** The default base color's semantic colors (`neutral`). */
+export declare const semanticColors: {
+  readonly background: {
+    readonly light: "#ffffff";
+    readonly dark: "#0a0a0a";
+  };
+  readonly foreground: {
+    readonly light: "#0a0a0a";
+    readonly dark: "#fafafa";
+  };
+  readonly card: {
+    readonly light: "#ffffff";
+    readonly dark: "#171717";
+  };
+  readonly 'card-foreground': {
+    readonly light: "#0a0a0a";
+    readonly dark: "#fafafa";
+  };
+  readonly popover: {
+    readonly light: "#ffffff";
+    readonly dark: "#171717";
+  };
+  readonly 'popover-foreground': {
+    readonly light: "#0a0a0a";
+    readonly dark: "#fafafa";
+  };
+  readonly primary: {
+    readonly light: "#171717";
+    readonly dark: "#e5e5e5";
+  };
+  readonly 'primary-foreground': {
+    readonly light: "#fafafa";
+    readonly dark: "#171717";
+  };
+  readonly secondary: {
+    readonly light: "#f5f5f5";
+    readonly dark: "#262626";
+  };
+  readonly 'secondary-foreground': {
+    readonly light: "#171717";
+    readonly dark: "#fafafa";
+  };
+  readonly muted: {
+    readonly light: "#f5f5f5";
+    readonly dark: "#262626";
+  };
+  readonly 'muted-foreground': {
+    readonly light: "#737373";
+    readonly dark: "#a1a1a1";
+  };
+  readonly accent: {
+    readonly light: "#f5f5f5";
+    readonly dark: "#262626";
+  };
+  readonly 'accent-foreground': {
+    readonly light: "#171717";
+    readonly dark: "#fafafa";
+  };
+  readonly destructive: {
+    readonly light: "#e7000b";
+    readonly dark: "#ff6467";
+  };
+  readonly border: {
+    readonly light: "#e5e5e5";
+    readonly dark: "#ffffff1a";
+  };
+  readonly input: {
+    readonly light: "#e5e5e5";
+    readonly dark: "#ffffff26";
+  };
+  readonly ring: {
+    readonly light: "#a1a1a1";
+    readonly dark: "#737373";
+  };
+  readonly 'chart-1': {
+    readonly light: "#d4d4d4";
+    readonly dark: "#d4d4d4";
+  };
+  readonly 'chart-2': {
+    readonly light: "#737373";
+    readonly dark: "#737373";
+  };
+  readonly 'chart-3': {
+    readonly light: "#525252";
+    readonly dark: "#525252";
+  };
+  readonly 'chart-4': {
+    readonly light: "#404040";
+    readonly dark: "#404040";
+  };
+  readonly 'chart-5': {
+    readonly light: "#262626";
+    readonly dark: "#262626";
+  };
+  readonly sidebar: {
+    readonly light: "#fafafa";
+    readonly dark: "#171717";
+  };
+  readonly 'sidebar-foreground': {
+    readonly light: "#0a0a0a";
+    readonly dark: "#fafafa";
+  };
+  readonly 'sidebar-primary': {
+    readonly light: "#171717";
+    readonly dark: "#1447e6";
+  };
+  readonly 'sidebar-primary-foreground': {
+    readonly light: "#fafafa";
+    readonly dark: "#fafafa";
+  };
+  readonly 'sidebar-accent': {
+    readonly light: "#f5f5f5";
+    readonly dark: "#262626";
+  };
+  readonly 'sidebar-accent-foreground': {
+    readonly light: "#171717";
+    readonly dark: "#fafafa";
+  };
+  readonly 'sidebar-border': {
+    readonly light: "#e5e5e5";
+    readonly dark: "#ffffff1a";
+  };
+  readonly 'sidebar-ring': {
+    readonly light: "#a1a1a1";
+    readonly dark: "#737373";
+  };
+};
+/**
+ * shadcn/ui's default theme (base color `neutral`), converted for React
+ * Native. shadcn/ui is Tailwind CSS plus CSS variables, so this is
+ * `tailwindCssTheme` (spacing, typography, shadows, the color palette) with
+ * shadcn/ui's colors and radii on top, the same layering as a shadcn/ui
+ * project's `globals.css`.
+ *
+ * - Semantic colors use shadcn/ui's names as top-level colors, so styles
+ *   read like the class names: `bg-primary text-primary-foreground` is
+ *   `themed.view({ backgroundColor: 'primary' })` /
+ *   `themed.text({ color: 'primary-foreground' })`. oklch is converted to
+ *   hex; translucent dark-mode borders become 8-digit hex.
+ * - `radii`: `--radius` (10) and the `radius-sm`…`radius-4xl` scale derived
+ *   from it replace Tailwind's, like shadcn/ui's `@theme inline`.
+ * - Other base colors: `baseColors.zinc`, … — switch with
+ *   `extendTheme(shadcnUiTheme, { semanticTokens: { colors: baseColors.zinc } })`.
+ * - Values come from the shadcn/ui registry snapshot in `scripts/registry/`
+ *   (`pnpm sync`), converted by `scripts/generate.ts`.
+ */
+export declare const shadcnUiTheme: import("@react-native-rethemed/core/config").ThemeConfig;
+//#endregion
+export { baseColors, radii };

package/dist/index.mjs

@@ -0,0 +1,31 @@
+import { baseColors, radii } from "./tokens.gen.mjs";
+import { extendTheme } from "@react-native-rethemed/core/config";
+import { tailwindCssTheme } from "@react-native-rethemed/tailwind-css-tokens";
+//#region src/index.ts
+/** The default base color's semantic colors (`neutral`). */
+const semanticColors = baseColors.neutral;
+/**
+* shadcn/ui's default theme (base color `neutral`), converted for React
+* Native. shadcn/ui is Tailwind CSS plus CSS variables, so this is
+* `tailwindCssTheme` (spacing, typography, shadows, the color palette) with
+* shadcn/ui's colors and radii on top, the same layering as a shadcn/ui
+* project's `globals.css`.
+*
+* - Semantic colors use shadcn/ui's names as top-level colors, so styles
+*   read like the class names: `bg-primary text-primary-foreground` is
+*   `themed.view({ backgroundColor: 'primary' })` /
+*   `themed.text({ color: 'primary-foreground' })`. oklch is converted to
+*   hex; translucent dark-mode borders become 8-digit hex.
+* - `radii`: `--radius` (10) and the `radius-sm`…`radius-4xl` scale derived
+*   from it replace Tailwind's, like shadcn/ui's `@theme inline`.
+* - Other base colors: `baseColors.zinc`, … — switch with
+*   `extendTheme(shadcnUiTheme, { semanticTokens: { colors: baseColors.zinc } })`.
+* - Values come from the shadcn/ui registry snapshot in `scripts/registry/`
+*   (`pnpm sync`), converted by `scripts/generate.ts`.
+*/
+const shadcnUiTheme = extendTheme(tailwindCssTheme, {
+	tokens: { radii },
+	semanticTokens: { colors: semanticColors }
+});
+//#endregion
+export { baseColors, radii, semanticColors, shadcnUiTheme };