@react-native-rethemed/tailwind-css-tokens 0.1.0 → 0.1.1

package/dist/tokens.gen.mjs

@@ -0,0 +1,519 @@
+//#region src/tokens.gen.ts
+/** Tailwind's palette (`--color-*`), converted from oklch to hex: `'<hue>.<shade>'`, plus `black` and `white`. */
+const colors = {
+	"red.50": "#fef2f2",
+	"red.100": "#ffe2e2",
+	"red.200": "#ffc9c9",
+	"red.300": "#ffa2a2",
+	"red.400": "#ff6467",
+	"red.500": "#fb2c36",
+	"red.600": "#e7000b",
+	"red.700": "#c10007",
+	"red.800": "#9f0712",
+	"red.900": "#82181a",
+	"red.950": "#460809",
+	"orange.50": "#fff7ed",
+	"orange.100": "#ffedd4",
+	"orange.200": "#ffd6a8",
+	"orange.300": "#ffb86a",
+	"orange.400": "#ff8904",
+	"orange.500": "#ff6900",
+	"orange.600": "#f54a00",
+	"orange.700": "#ca3500",
+	"orange.800": "#9f2d00",
+	"orange.900": "#7e2a0c",
+	"orange.950": "#441306",
+	"amber.50": "#fffbeb",
+	"amber.100": "#fef3c6",
+	"amber.200": "#fee685",
+	"amber.300": "#ffd230",
+	"amber.400": "#ffba00",
+	"amber.500": "#fd9a00",
+	"amber.600": "#e17100",
+	"amber.700": "#bb4d00",
+	"amber.800": "#973c00",
+	"amber.900": "#7b3306",
+	"amber.950": "#461901",
+	"yellow.50": "#fefce8",
+	"yellow.100": "#fef9c2",
+	"yellow.200": "#fff085",
+	"yellow.300": "#ffdf20",
+	"yellow.400": "#fcc800",
+	"yellow.500": "#efb100",
+	"yellow.600": "#d08700",
+	"yellow.700": "#a65f00",
+	"yellow.800": "#894b00",
+	"yellow.900": "#733e0a",
+	"yellow.950": "#432004",
+	"lime.50": "#f7fee7",
+	"lime.100": "#ecfcca",
+	"lime.200": "#d8f999",
+	"lime.300": "#bbf451",
+	"lime.400": "#9ae600",
+	"lime.500": "#7ccf00",
+	"lime.600": "#5ea500",
+	"lime.700": "#497d00",
+	"lime.800": "#3d6300",
+	"lime.900": "#35530e",
+	"lime.950": "#192e03",
+	"green.50": "#f0fdf4",
+	"green.100": "#dcfce7",
+	"green.200": "#b9f8cf",
+	"green.300": "#7bf1a8",
+	"green.400": "#05df72",
+	"green.500": "#00c951",
+	"green.600": "#00a63e",
+	"green.700": "#008236",
+	"green.800": "#016630",
+	"green.900": "#0d542b",
+	"green.950": "#032e15",
+	"emerald.50": "#ecfdf5",
+	"emerald.100": "#d0fae5",
+	"emerald.200": "#a4f4cf",
+	"emerald.300": "#5ee9b5",
+	"emerald.400": "#00d492",
+	"emerald.500": "#00bc7d",
+	"emerald.600": "#009966",
+	"emerald.700": "#007a55",
+	"emerald.800": "#006045",
+	"emerald.900": "#004f3b",
+	"emerald.950": "#002c22",
+	"teal.50": "#f0fdfa",
+	"teal.100": "#cbfbf1",
+	"teal.200": "#96f7e4",
+	"teal.300": "#46ecd5",
+	"teal.400": "#00d5be",
+	"teal.500": "#00bba7",
+	"teal.600": "#009689",
+	"teal.700": "#00786f",
+	"teal.800": "#005f5a",
+	"teal.900": "#0b4f4a",
+	"teal.950": "#022f2e",
+	"cyan.50": "#ecfeff",
+	"cyan.100": "#cefafe",
+	"cyan.200": "#a2f4fd",
+	"cyan.300": "#53eafd",
+	"cyan.400": "#00d3f2",
+	"cyan.500": "#00b8db",
+	"cyan.600": "#0092b8",
+	"cyan.700": "#007595",
+	"cyan.800": "#005f78",
+	"cyan.900": "#104e64",
+	"cyan.950": "#053345",
+	"sky.50": "#f0f9ff",
+	"sky.100": "#dff2fe",
+	"sky.200": "#b8e6fe",
+	"sky.300": "#74d4ff",
+	"sky.400": "#00bcff",
+	"sky.500": "#00a6f4",
+	"sky.600": "#0084d1",
+	"sky.700": "#0069a8",
+	"sky.800": "#00598a",
+	"sky.900": "#024a70",
+	"sky.950": "#052f4a",
+	"blue.50": "#eff6ff",
+	"blue.100": "#dbeafe",
+	"blue.200": "#bedbff",
+	"blue.300": "#8ec5ff",
+	"blue.400": "#51a2ff",
+	"blue.500": "#2b7fff",
+	"blue.600": "#155dfc",
+	"blue.700": "#1447e6",
+	"blue.800": "#193cb8",
+	"blue.900": "#1c398e",
+	"blue.950": "#162456",
+	"indigo.50": "#eef2ff",
+	"indigo.100": "#e0e7ff",
+	"indigo.200": "#c6d2ff",
+	"indigo.300": "#a3b3ff",
+	"indigo.400": "#7c86ff",
+	"indigo.500": "#615fff",
+	"indigo.600": "#4f39f6",
+	"indigo.700": "#432dd7",
+	"indigo.800": "#372aac",
+	"indigo.900": "#312c85",
+	"indigo.950": "#1e1a4d",
+	"violet.50": "#f5f3ff",
+	"violet.100": "#ede9fe",
+	"violet.200": "#ddd6ff",
+	"violet.300": "#c4b4ff",
+	"violet.400": "#a684ff",
+	"violet.500": "#8e51ff",
+	"violet.600": "#7f22fe",
+	"violet.700": "#7008e7",
+	"violet.800": "#5d0ec0",
+	"violet.900": "#4d179a",
+	"violet.950": "#2f0d68",
+	"purple.50": "#faf5ff",
+	"purple.100": "#f3e8ff",
+	"purple.200": "#e9d4ff",
+	"purple.300": "#dab2ff",
+	"purple.400": "#c27aff",
+	"purple.500": "#ad46ff",
+	"purple.600": "#9810fa",
+	"purple.700": "#8200db",
+	"purple.800": "#6e11b0",
+	"purple.900": "#59168b",
+	"purple.950": "#3c0366",
+	"fuchsia.50": "#fdf4ff",
+	"fuchsia.100": "#fae8ff",
+	"fuchsia.200": "#f6cfff",
+	"fuchsia.300": "#f4a8ff",
+	"fuchsia.400": "#ed6bff",
+	"fuchsia.500": "#e12afb",
+	"fuchsia.600": "#c800de",
+	"fuchsia.700": "#a800b7",
+	"fuchsia.800": "#8a0194",
+	"fuchsia.900": "#721378",
+	"fuchsia.950": "#4b004f",
+	"pink.50": "#fdf2f8",
+	"pink.100": "#fce7f3",
+	"pink.200": "#fccee8",
+	"pink.300": "#fda5d5",
+	"pink.400": "#fb64b6",
+	"pink.500": "#f6339a",
+	"pink.600": "#e60076",
+	"pink.700": "#c6005c",
+	"pink.800": "#a3004c",
+	"pink.900": "#861043",
+	"pink.950": "#510424",
+	"rose.50": "#fff1f2",
+	"rose.100": "#ffe4e6",
+	"rose.200": "#ffccd3",
+	"rose.300": "#ffa1ad",
+	"rose.400": "#ff637e",
+	"rose.500": "#ff2056",
+	"rose.600": "#ec003f",
+	"rose.700": "#c70036",
+	"rose.800": "#a50036",
+	"rose.900": "#8b0836",
+	"rose.950": "#4d0218",
+	"slate.50": "#f8fafc",
+	"slate.100": "#f1f5f9",
+	"slate.200": "#e2e8f0",
+	"slate.300": "#cad5e2",
+	"slate.400": "#90a1b9",
+	"slate.500": "#62748e",
+	"slate.600": "#45556c",
+	"slate.700": "#314158",
+	"slate.800": "#1d293d",
+	"slate.900": "#0f172b",
+	"slate.950": "#020618",
+	"gray.50": "#f9fafb",
+	"gray.100": "#f3f4f6",
+	"gray.200": "#e5e7eb",
+	"gray.300": "#d1d5dc",
+	"gray.400": "#99a1af",
+	"gray.500": "#6a7282",
+	"gray.600": "#4a5565",
+	"gray.700": "#364153",
+	"gray.800": "#1e2939",
+	"gray.900": "#101828",
+	"gray.950": "#030712",
+	"zinc.50": "#fafafa",
+	"zinc.100": "#f4f4f5",
+	"zinc.200": "#e4e4e7",
+	"zinc.300": "#d4d4d8",
+	"zinc.400": "#9f9fa9",
+	"zinc.500": "#71717b",
+	"zinc.600": "#52525c",
+	"zinc.700": "#3f3f46",
+	"zinc.800": "#27272a",
+	"zinc.900": "#18181b",
+	"zinc.950": "#09090b",
+	"neutral.50": "#fafafa",
+	"neutral.100": "#f5f5f5",
+	"neutral.200": "#e5e5e5",
+	"neutral.300": "#d4d4d4",
+	"neutral.400": "#a1a1a1",
+	"neutral.500": "#737373",
+	"neutral.600": "#525252",
+	"neutral.700": "#404040",
+	"neutral.800": "#262626",
+	"neutral.900": "#171717",
+	"neutral.950": "#0a0a0a",
+	"stone.50": "#fafaf9",
+	"stone.100": "#f5f5f4",
+	"stone.200": "#e7e5e4",
+	"stone.300": "#d6d3d1",
+	"stone.400": "#a6a09b",
+	"stone.500": "#79716b",
+	"stone.600": "#57534d",
+	"stone.700": "#44403b",
+	"stone.800": "#292524",
+	"stone.900": "#1c1917",
+	"stone.950": "#0c0a09",
+	"mauve.50": "#fafafa",
+	"mauve.100": "#f3f1f3",
+	"mauve.200": "#e7e4e7",
+	"mauve.300": "#d7d0d7",
+	"mauve.400": "#a89ea9",
+	"mauve.500": "#79697b",
+	"mauve.600": "#594c5b",
+	"mauve.700": "#463947",
+	"mauve.800": "#2a212c",
+	"mauve.900": "#1d161e",
+	"mauve.950": "#0c090c",
+	"olive.50": "#fbfbf9",
+	"olive.100": "#f4f4f0",
+	"olive.200": "#e8e8e3",
+	"olive.300": "#d8d8d0",
+	"olive.400": "#abab9c",
+	"olive.500": "#7c7c67",
+	"olive.600": "#5b5b4b",
+	"olive.700": "#474739",
+	"olive.800": "#2b2b22",
+	"olive.900": "#1d1d16",
+	"olive.950": "#0c0c09",
+	"mist.50": "#f9fbfb",
+	"mist.100": "#f1f3f3",
+	"mist.200": "#e3e7e8",
+	"mist.300": "#d0d6d8",
+	"mist.400": "#9ca8ab",
+	"mist.500": "#67787c",
+	"mist.600": "#4b585b",
+	"mist.700": "#394447",
+	"mist.800": "#22292b",
+	"mist.900": "#161b1d",
+	"mist.950": "#090b0c",
+	"taupe.50": "#fbfaf9",
+	"taupe.100": "#f3f1f1",
+	"taupe.200": "#e8e4e3",
+	"taupe.300": "#d8d2d0",
+	"taupe.400": "#aba09c",
+	"taupe.500": "#7c6d67",
+	"taupe.600": "#5b4f4b",
+	"taupe.700": "#473c39",
+	"taupe.800": "#2b2422",
+	"taupe.900": "#1d1816",
+	"taupe.950": "#0c0a09",
+	black: "#000000",
+	white: "#ffffff"
+};
+/** `--spacing` (0.25rem) × n for the steps in Tailwind's docs: `padding: 4` is `p-4` (16). `px` is 1. */
+const spacing = {
+	px: 1,
+	0: 0,
+	.5: 2,
+	1: 4,
+	1.5: 6,
+	2: 8,
+	2.5: 10,
+	3: 12,
+	3.5: 14,
+	4: 16,
+	5: 20,
+	6: 24,
+	7: 28,
+	8: 32,
+	9: 36,
+	10: 40,
+	11: 44,
+	12: 48,
+	14: 56,
+	16: 64,
+	20: 80,
+	24: 96,
+	28: 112,
+	32: 128,
+	36: 144,
+	40: 160,
+	44: 176,
+	48: 192,
+	52: 208,
+	56: 224,
+	60: 240,
+	64: 256,
+	72: 288,
+	80: 320,
+	96: 384
+};
+/** `--radius-*` in points, plus the `rounded-none` / `rounded-full` utilities. */
+const radii = {
+	none: 0,
+	xs: 2,
+	sm: 4,
+	md: 6,
+	lg: 8,
+	xl: 12,
+	"2xl": 16,
+	"3xl": 24,
+	"4xl": 32,
+	full: 9999
+};
+/** `--text-*` sizes in points. */
+const fontSizes = {
+	xs: 12,
+	sm: 14,
+	base: 16,
+	lg: 18,
+	xl: 20,
+	"2xl": 24,
+	"3xl": 30,
+	"4xl": 36,
+	"5xl": 48,
+	"6xl": 60,
+	"7xl": 72,
+	"8xl": 96,
+	"9xl": 128
+};
+/** `--font-weight-*`. */
+const fontWeights = {
+	thin: "100",
+	extralight: "200",
+	light: "300",
+	normal: "400",
+	medium: "500",
+	semibold: "600",
+	bold: "700",
+	extrabold: "800",
+	black: "900"
+};
+/** `--leading-*` as ratios of `fontSize`, plus the `leading-none` utility. */
+const lineHeights = {
+	none: 1,
+	tight: 1.25,
+	snug: 1.375,
+	normal: 1.5,
+	relaxed: 1.625,
+	loose: 2
+};
+/** `--tracking-*`: em values converted to points at a 16px font size. */
+const letterSpacings = {
+	tighter: -.8,
+	tight: -.4,
+	normal: 0,
+	wide: .4,
+	wider: .8,
+	widest: 1.6
+};
+/** `--shadow-*` as single-layer RN shadows (first layer). */
+const shadows = {
+	"2xs": {
+		shadowColor: "#000000",
+		shadowOffset: {
+			width: 0,
+			height: 1
+		},
+		shadowOpacity: .05,
+		shadowRadius: 0,
+		elevation: 1
+	},
+	xs: {
+		shadowColor: "#000000",
+		shadowOffset: {
+			width: 0,
+			height: 1
+		},
+		shadowOpacity: .05,
+		shadowRadius: 1,
+		elevation: 1
+	},
+	sm: {
+		shadowColor: "#000000",
+		shadowOffset: {
+			width: 0,
+			height: 1
+		},
+		shadowOpacity: .1,
+		shadowRadius: 1.5,
+		elevation: 2
+	},
+	md: {
+		shadowColor: "#000000",
+		shadowOffset: {
+			width: 0,
+			height: 4
+		},
+		shadowOpacity: .1,
+		shadowRadius: 3,
+		elevation: 4
+	},
+	lg: {
+		shadowColor: "#000000",
+		shadowOffset: {
+			width: 0,
+			height: 10
+		},
+		shadowOpacity: .1,
+		shadowRadius: 7.5,
+		elevation: 8
+	},
+	xl: {
+		shadowColor: "#000000",
+		shadowOffset: {
+			width: 0,
+			height: 20
+		},
+		shadowOpacity: .1,
+		shadowRadius: 12.5,
+		elevation: 12
+	},
+	"2xl": {
+		shadowColor: "#000000",
+		shadowOffset: {
+			width: 0,
+			height: 25
+		},
+		shadowOpacity: .25,
+		shadowRadius: 25,
+		elevation: 16
+	}
+};
+/** `text-*` as presets: each size with its paired `--text-*--line-height`, made absolute. */
+const text = {
+	xs: {
+		fontSize: 12,
+		lineHeight: 16
+	},
+	sm: {
+		fontSize: 14,
+		lineHeight: 20
+	},
+	base: {
+		fontSize: 16,
+		lineHeight: 24
+	},
+	lg: {
+		fontSize: 18,
+		lineHeight: 28
+	},
+	xl: {
+		fontSize: 20,
+		lineHeight: 28
+	},
+	"2xl": {
+		fontSize: 24,
+		lineHeight: 32
+	},
+	"3xl": {
+		fontSize: 30,
+		lineHeight: 36
+	},
+	"4xl": {
+		fontSize: 36,
+		lineHeight: 40
+	},
+	"5xl": {
+		fontSize: 48,
+		lineHeight: 48
+	},
+	"6xl": {
+		fontSize: 60,
+		lineHeight: 60
+	},
+	"7xl": {
+		fontSize: 72,
+		lineHeight: 72
+	},
+	"8xl": {
+		fontSize: 96,
+		lineHeight: 96
+	},
+	"9xl": {
+		fontSize: 128,
+		lineHeight: 128
+	}
+};
+//#endregion
+export { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, text };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-rethemed/tailwind-css-tokens",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Tailwind CSS's default theme (colors, spacing, text sizes, shadows) for React Native, ready for react-native-rethemed.",
   "keywords": [
     "react-native",
@@ -21,18 +21,11 @@
     "directory": "packages/react-native-rethemed/tailwind-css"
   },
   "sideEffects": false,
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/cjs/index.d.ts",
+  "types": "./dist/index.d.cts",
   "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"
-      }
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
     },
     "./package.json": "./package.json"
   },
@@ -43,26 +36,30 @@
     "access": "public"
   },
   "dependencies": {
-    "@react-native-rethemed/core": "^0.1.0"
+    "@react-native-rethemed/core": "^0.1.1"
   },
   "devDependencies": {
+    "@arethetypeswrong/core": "0.18.5",
     "@biomejs/biome": "2.5.4",
-    "@react-native-rethemed/cli": "0.1.0",
-    "@react-native-rethemed/panda-css-tokens": "0.1.0",
+    "@react-native-rethemed/cli": "0.1.1",
+    "@react-native-rethemed/panda-css-tokens": "0.1.1",
     "@types/culori": "4.0.1",
     "@types/node": "24.10.4",
     "@types/react": "19.2.17",
     "biome-config": "0.0.0",
     "culori": "4.0.2",
     "jiti": "2.7.0",
+    "publint": "0.3.25",
     "react": "19.2.3",
     "react-native": "0.86.2",
     "tailwindcss": "4.3.3",
+    "tsdown": "0.23.0",
+    "tsdown-config": "0.0.0",
     "typescript": "6.0.3",
     "vitest": "4.1.10"
   },
   "scripts": {
-    "build": "node ../../../scripts/build-package.mjs",
+    "build": "tsdown",
     "generate": "jiti scripts/generate.ts",
     "example:codegen": "react-native-rethemed codegen example/theme.ts --docs example/themed.md",
     "lint": "biome check src scripts example",
@@ -70,5 +67,6 @@
     "tsc": "tsc --noEmit",
     "test": "vitest",
     "test:ci": "vitest run"
-  }
+  },
+  "main": "./dist/index.cjs"
 }

package/dist/cjs/index.js

@@ -1,55 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.text = exports.spacing = exports.shadows = exports.radii = exports.lineHeights = exports.letterSpacings = exports.fontWeights = exports.fontSizes = exports.colors = exports.tailwindCssTheme = 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, "fontSizes", { enumerable: true, get: function () { return tokens_gen_1.fontSizes; } });
-Object.defineProperty(exports, "fontWeights", { enumerable: true, get: function () { return tokens_gen_1.fontWeights; } });
-Object.defineProperty(exports, "letterSpacings", { enumerable: true, get: function () { return tokens_gen_1.letterSpacings; } });
-Object.defineProperty(exports, "lineHeights", { enumerable: true, get: function () { return tokens_gen_1.lineHeights; } });
-Object.defineProperty(exports, "radii", { enumerable: true, get: function () { return tokens_gen_1.radii; } });
-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, "text", { enumerable: true, get: function () { return tokens_gen_1.text; } });
-/**
- * Tailwind CSS's default theme (`tailwindcss/theme.css`), converted for
- * React Native with Tailwind's names. Values are generated by
- * `scripts/generate.ts`; see `src/tokens.gen.ts`.
- *
- * - Lengths: rem → points at 16px; em letter spacings → points at 16px.
- * - `colors`: the oklch palette as hex, `'<hue>.<shade>'` (`'sky.500'`).
- *   Fixed in both schemes: Tailwind has no semantic colors (it uses `dark:`
- *   variants), so define `semanticTokens.colors` in the app.
- * - `spacing`: `padding: 4` is `p-4` (16), for the steps Tailwind's docs
- *   list. `radii` / `lineHeights` add the `rounded-none` / `rounded-full` /
- *   `leading-none` utilities.
- * - `text`: `themed.text.sm()` is `text-sm` — font size plus its paired line
- *   height. `fontSizes` (`fontSize: 'sm'`) sets the size alone.
- * - `defaults.fontSize` is `base` (16), the size `lineHeights` ratios use when
- *   a style has no `fontSize` of its own.
- * - `shadows`: first layer only. Not included (no RN equivalent): fonts,
- *   inset / drop / text shadows, blur, perspective, easing, animations,
- *   aspect ratios, breakpoints, containers.
- *
- * The palette, radii and shadows are the same values as
- * `@react-native-rethemed/panda-css-tokens` (Panda's preset uses Tailwind's).
- */
-exports.tailwindCssTheme = (0, config_1.defineTheme)({
-    tokens: {
-        colors: tokens_gen_1.colors,
-        radii: tokens_gen_1.radii,
-        spacing: tokens_gen_1.spacing,
-        fontSizes: tokens_gen_1.fontSizes,
-        fontWeights: tokens_gen_1.fontWeights,
-        lineHeights: tokens_gen_1.lineHeights,
-        letterSpacings: tokens_gen_1.letterSpacings,
-        shadows: tokens_gen_1.shadows,
-    },
-    semanticTokens: {
-        text: tokens_gen_1.text,
-    },
-    defaults: {
-        fontSize: 'base',
-    },
-});

package/dist/cjs/package.json

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