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

package/dist/colors.mjs

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

package/dist/index.cjs

@@ -0,0 +1,31 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_colors = require("./colors.cjs");
+const require_scales = require("./scales.cjs");
+//#region src/index.ts
+const chakraUiTheme = (0, require("@react-native-rethemed/core/config").defineTheme)({
+	tokens: {
+		colors: require_colors.colors,
+		radii: require_scales.radii,
+		spacing: require_scales.spacing,
+		fontSizes: require_scales.fontSizes,
+		fontWeights: require_scales.fontWeights,
+		lineHeights: require_scales.lineHeights,
+		letterSpacings: require_scales.letterSpacings,
+		zIndices: require_scales.zIndices,
+		shadows: require_scales.shadows
+	},
+	semanticTokens: { colors: require_colors.semanticColors },
+	defaults: { fontSize: "md" }
+});
+//#endregion
+exports.chakraUiTheme = chakraUiTheme;
+exports.colors = require_colors.colors;
+exports.fontSizes = require_scales.fontSizes;
+exports.fontWeights = require_scales.fontWeights;
+exports.letterSpacings = require_scales.letterSpacings;
+exports.lineHeights = require_scales.lineHeights;
+exports.radii = require_scales.radii;
+exports.semanticColors = require_colors.semanticColors;
+exports.shadows = require_scales.shadows;
+exports.spacing = require_scales.spacing;
+exports.zIndices = require_scales.zIndices;

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

@@ -1,4 +1,6 @@
-import { colors, semanticColors } from './colors.js';
-import { fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, zIndices } from './scales.js';
+import { colors, semanticColors } from "./colors.cjs";
+import { fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, zIndices } from "./scales.cjs";
+//#region src/index.d.ts
 export declare const chakraUiTheme: import("@react-native-rethemed/core/config").ThemeConfig;
-export { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, semanticColors, shadows, spacing, zIndices, };
+//#endregion
+export { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, semanticColors, shadows, spacing, zIndices };

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

@@ -1,4 +1,6 @@
-import { colors, semanticColors } from './colors';
-import { fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, zIndices } from './scales';
+import { colors, semanticColors } from "./colors.mjs";
+import { fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, zIndices } from "./scales.mjs";
+//#region src/index.d.ts
 export declare const chakraUiTheme: import("@react-native-rethemed/core/config").ThemeConfig;
-export { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, semanticColors, shadows, spacing, zIndices, };
+//#endregion
+export { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, semanticColors, shadows, spacing, zIndices };

package/dist/index.mjs

@@ -0,0 +1,21 @@
+import { colors, semanticColors } from "./colors.mjs";
+import { fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, zIndices } from "./scales.mjs";
+import { defineTheme } from "@react-native-rethemed/core/config";
+//#region src/index.ts
+const chakraUiTheme = defineTheme({
+	tokens: {
+		colors,
+		radii,
+		spacing,
+		fontSizes,
+		fontWeights,
+		lineHeights,
+		letterSpacings,
+		zIndices,
+		shadows
+	},
+	semanticTokens: { colors: semanticColors },
+	defaults: { fontSize: "md" }
+});
+//#endregion
+export { chakraUiTheme, colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, semanticColors, shadows, spacing, zIndices };