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

package/README.md

@@ -1,5 +1,7 @@
 # @react-native-rethemed/panda-css-tokens
 
+[![npm](https://img.shields.io/npm/v/@react-native-rethemed/panda-css-tokens.svg)](https://www.npmjs.com/package/@react-native-rethemed/panda-css-tokens)
+
 Panda CSS's default theme tokens for React Native, ready for [react-native-rethemed](https://github.com/manakuro/react-native-rethemed).
 
 Panda CSS's default theme (`@pandacss/preset-panda`): colors, radii, spacing, font sizes / weights, line heights, letter spacings and shadows. Panda ships no semantic tokens, so define `semanticTokens` in your app.

package/dist/index.cjs

@@ -0,0 +1,41 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_tokens_gen = require("./tokens.gen.cjs");
+//#region src/index.ts
+/**
+* Panda CSS's default theme (`@pandacss/preset-panda`), converted for React
+* Native. Values are generated by `scripts/generate.ts`; see
+* `src/tokens.gen.ts`.
+*
+* - Lengths: rem → points at 16px; em letter spacings → points at 16px.
+* - `colors`: Panda's (Tailwind's) oklch palette as hex. Color props take
+*   them by name (`themed.view({ backgroundColor: 'red.500' })`).
+* - `shadows`: first layer only; inset shadows are omitted.
+* - No `semanticTokens`: Panda ships none. Define `semanticTokens.colors`
+*   and `semanticTokens.text` in the app (they can reference these values).
+*   Panda's `textStyles` are not converted for the same reason.
+* - Not included (no RN style equivalent): sizes, fonts, blurs, durations,
+*   easings, animations, aspect ratios, borders, breakpoints, keyframes.
+*/
+const pandaCssTheme = (0, require("@react-native-rethemed/core/config").defineTheme)({
+	tokens: {
+		colors: require_tokens_gen.colors,
+		radii: require_tokens_gen.radii,
+		spacing: require_tokens_gen.spacing,
+		fontSizes: require_tokens_gen.fontSizes,
+		fontWeights: require_tokens_gen.fontWeights,
+		lineHeights: require_tokens_gen.lineHeights,
+		letterSpacings: require_tokens_gen.letterSpacings,
+		shadows: require_tokens_gen.shadows
+	},
+	defaults: { fontSize: "md" }
+});
+//#endregion
+exports.colors = require_tokens_gen.colors;
+exports.fontSizes = require_tokens_gen.fontSizes;
+exports.fontWeights = require_tokens_gen.fontWeights;
+exports.letterSpacings = require_tokens_gen.letterSpacings;
+exports.lineHeights = require_tokens_gen.lineHeights;
+exports.pandaCssTheme = pandaCssTheme;
+exports.radii = require_tokens_gen.radii;
+exports.shadows = require_tokens_gen.shadows;
+exports.spacing = require_tokens_gen.spacing;

package/dist/{cjs/index.d.ts → index.d.cts}

@@ -1,4 +1,5 @@
-import { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing } from './tokens.gen';
+import { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing } from "./tokens.gen.cjs";
+//#region src/index.d.ts
 /**
  * Panda CSS's default theme (`@pandacss/preset-panda`), converted for React
  * Native. Values are generated by `scripts/generate.ts`; see
@@ -15,4 +16,5 @@ import { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, sha
  *   easings, animations, aspect ratios, borders, breakpoints, keyframes.
  */
 export declare const pandaCssTheme: import("@react-native-rethemed/core/config").ThemeConfig;
-export { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, };
+//#endregion
+export { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing };

package/dist/{esm/index.d.ts → index.d.mts}

@@ -1,4 +1,5 @@
-import { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing } from './tokens.gen.js';
+import { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing } from "./tokens.gen.mjs";
+//#region src/index.d.ts
 /**
  * Panda CSS's default theme (`@pandacss/preset-panda`), converted for React
  * Native. Values are generated by `scripts/generate.ts`; see
@@ -15,4 +16,5 @@ import { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, sha
  *   easings, animations, aspect ratios, borders, breakpoints, keyframes.
  */
 export declare const pandaCssTheme: import("@react-native-rethemed/core/config").ThemeConfig;
-export { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, };
+//#endregion
+export { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing };

package/dist/index.mjs

@@ -0,0 +1,33 @@
+import { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing } from "./tokens.gen.mjs";
+import { defineTheme } from "@react-native-rethemed/core/config";
+//#region src/index.ts
+/**
+* Panda CSS's default theme (`@pandacss/preset-panda`), converted for React
+* Native. Values are generated by `scripts/generate.ts`; see
+* `src/tokens.gen.ts`.
+*
+* - Lengths: rem → points at 16px; em letter spacings → points at 16px.
+* - `colors`: Panda's (Tailwind's) oklch palette as hex. Color props take
+*   them by name (`themed.view({ backgroundColor: 'red.500' })`).
+* - `shadows`: first layer only; inset shadows are omitted.
+* - No `semanticTokens`: Panda ships none. Define `semanticTokens.colors`
+*   and `semanticTokens.text` in the app (they can reference these values).
+*   Panda's `textStyles` are not converted for the same reason.
+* - Not included (no RN style equivalent): sizes, fonts, blurs, durations,
+*   easings, animations, aspect ratios, borders, breakpoints, keyframes.
+*/
+const pandaCssTheme = defineTheme({
+	tokens: {
+		colors,
+		radii,
+		spacing,
+		fontSizes,
+		fontWeights,
+		lineHeights,
+		letterSpacings,
+		shadows
+	},
+	defaults: { fontSize: "md" }
+});
+//#endregion
+export { colors, fontSizes, fontWeights, letterSpacings, lineHeights, pandaCssTheme, radii, shadows, spacing };

package/dist/tokens.gen.cjs

@@ -0,0 +1,473 @@
+//#region src/tokens.gen.ts
+/** Panda's palette (Tailwind's), converted from oklch to hex. `current` is omitted. */
+const colors = {
+	transparent: "#00000000",
+	black: "#000000",
+	white: "#ffffff",
+	"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",
+	"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"
+};
+/** Border radii, in points (1rem = 16). */
+const radii = {
+	xs: 2,
+	sm: 4,
+	md: 6,
+	lg: 8,
+	xl: 12,
+	"2xl": 16,
+	"3xl": 24,
+	"4xl": 32,
+	full: 9999
+};
+/** Spacing scale, in points (1rem = 16). */
+const spacing = {
+	0: 0,
+	.5: 2,
+	1: 4,
+	1.5: 6,
+	2: 8,
+	2.5: 10,
+	3: 12,
+	3.5: 14,
+	4: 16,
+	4.5: 18,
+	5: 20,
+	5.5: 22,
+	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
+};
+/** Font sizes, in points (1rem = 16). */
+const fontSizes = {
+	"2xs": 8,
+	xs: 12,
+	sm: 14,
+	md: 16,
+	lg: 18,
+	xl: 20,
+	"2xl": 24,
+	"3xl": 30,
+	"4xl": 36,
+	"5xl": 48,
+	"6xl": 60,
+	"7xl": 72,
+	"8xl": 96,
+	"9xl": 128
+};
+/** Font weights. */
+const fontWeights = {
+	thin: "100",
+	extralight: "200",
+	light: "300",
+	normal: "400",
+	medium: "500",
+	semibold: "600",
+	bold: "700",
+	extrabold: "800",
+	black: "900"
+};
+/** Line heights, as ratios of `fontSize`. */
+const lineHeights = {
+	none: 1,
+	tight: 1.25,
+	snug: 1.375,
+	normal: 1.5,
+	relaxed: 1.625,
+	loose: 2
+};
+/** Letter spacings: 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
+};
+/** Box shadows as single-layer RN shadows. Inset shadows are omitted. */
+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
+	}
+};
+//#endregion
+exports.colors = colors;
+exports.fontSizes = fontSizes;
+exports.fontWeights = fontWeights;
+exports.letterSpacings = letterSpacings;
+exports.lineHeights = lineHeights;
+exports.radii = radii;
+exports.shadows = shadows;
+exports.spacing = spacing;