@react-native-rethemed/core 0.1.0 → 0.1.2

package/dist/extend-theme.cjs

@@ -0,0 +1,109 @@
+const require_semantic_colors = require("./semantic-colors.cjs");
+const require_text_tree = require("./text-tree.cjs");
+//#region src/extend-theme.ts
+/**
+* Flat `tokens` categories: a one-level merge (`{ ...a, ...b }`, `b` wins per
+* key) is enough. `semanticTokens.colors` holds groups (merged one level
+* deeper) and top-level colors (replaced whole); `semanticTokens.text` is a tree of any depth — see
+* `mergeTextTree`.
+*
+* Merging is runtime-only: the result is typed as the plain `ThemeConfig`,
+* and exact token names come from the generated `themed.gen.ts`.
+*/
+const FLAT_CATEGORY_KEYS = [
+	"colors",
+	"radii",
+	"spacing",
+	"fontSizes",
+	"fontWeights",
+	"lineHeights",
+	"letterSpacings",
+	"zIndices",
+	"shadows"
+];
+function mergeFlat(a, b) {
+	if (!a) return b;
+	if (!b) return a;
+	return {
+		...a,
+		...b
+	};
+}
+/**
+* `semanticTokens.colors`: groups are merged, colors replaced whole, so
+* overriding `bg.default` keeps `bg.subtle` and every other group. A
+* top-level color (`primary`) is replaced like a token; when a name is a
+* color on one side and a group on the other, the later side replaces it.
+*/
+function mergeSemanticColors(a, b) {
+	if (!a) return b;
+	if (!b) return a;
+	const result = { ...a };
+	for (const [key, next] of Object.entries(b)) {
+		const prev = result[key];
+		result[key] = prev && !require_semantic_colors.isSchemeColor(prev) && !require_semantic_colors.isSchemeColor(next) ? {
+			...prev,
+			...next
+		} : next;
+	}
+	return result;
+}
+/**
+* `semanticTokens.text`: groups merge recursively, presets (leaves) are
+* replaced whole. So overriding `display.lg` keeps `display.md` and every
+* other group, at any depth. When a key is a preset on one side and a group
+* on the other, the later side replaces it.
+*/
+function mergeTextTree(a, b) {
+	if (!a) return b;
+	if (!b) return a;
+	const result = { ...a };
+	for (const [key, next] of Object.entries(b)) {
+		const prev = result[key];
+		result[key] = prev && !require_text_tree.isTextPreset(prev) && !require_text_tree.isTextPreset(next) ? mergeTextTree(prev, next) ?? next : next;
+	}
+	return result;
+}
+function mergeTokens(a, b) {
+	if (!a) return b;
+	if (!b) return a;
+	const merged = {};
+	for (const key of FLAT_CATEGORY_KEYS) {
+		const value = mergeFlat(a[key], b[key]);
+		if (value) merged[key] = value;
+	}
+	return merged;
+}
+function mergeSemanticTokens(a, b) {
+	const colors = mergeSemanticColors(a?.colors, b?.colors);
+	const text = mergeTextTree(a?.text, b?.text);
+	return {
+		...colors ? { colors } : {},
+		...text ? { text } : {}
+	};
+}
+function mergeThemeConfig(a, b) {
+	const defaults = mergeFlat(a.defaults, b.defaults);
+	return {
+		tokens: mergeTokens(a.tokens, b.tokens),
+		semanticTokens: mergeSemanticTokens(a.semanticTokens, b.semanticTokens),
+		...defaults ? { defaults } : {}
+	};
+}
+/**
+* Merges N `ThemeConfig`s, folding left-to-right so later themes override
+* earlier ones per key:
+*
+* ```ts
+* const config = extendTheme(materialDesignTheme, chakraUiTheme, {
+*   semanticTokens: {
+*     text: { display: { lg: { fontSize: 60, lineHeight: 68 } } },
+*   },
+* });
+* ```
+*/
+function extendTheme(...themes) {
+	return themes.reduce(mergeThemeConfig);
+}
+//#endregion
+exports.extendTheme = extendTheme;

package/dist/{esm/extend-theme.d.ts → extend-theme.d.cts}

@@ -1,4 +1,5 @@
-import type { ThemeConfig } from './types.js';
+import { ThemeConfig } from "./types.cjs";
+//#region src/extend-theme.d.ts
 /**
  * Merges N `ThemeConfig`s, folding left-to-right so later themes override
  * earlier ones per key:
@@ -12,3 +13,4 @@ import type { ThemeConfig } from './types.js';
  * ```
  */
 export declare function extendTheme(...themes: [ThemeConfig, ...ThemeConfig[]]): ThemeConfig;
+//#endregion

package/dist/{cjs/extend-theme.d.ts → extend-theme.d.mts}

@@ -1,4 +1,5 @@
-import type { ThemeConfig } from './types';
+import { ThemeConfig } from "./types.mjs";
+//#region src/extend-theme.d.ts
 /**
  * Merges N `ThemeConfig`s, folding left-to-right so later themes override
  * earlier ones per key:
@@ -12,3 +13,4 @@ import type { ThemeConfig } from './types';
  * ```
  */
 export declare function extendTheme(...themes: [ThemeConfig, ...ThemeConfig[]]): ThemeConfig;
+//#endregion

package/dist/extend-theme.mjs

@@ -0,0 +1,109 @@
+import { isSchemeColor } from "./semantic-colors.mjs";
+import { isTextPreset } from "./text-tree.mjs";
+//#region src/extend-theme.ts
+/**
+* Flat `tokens` categories: a one-level merge (`{ ...a, ...b }`, `b` wins per
+* key) is enough. `semanticTokens.colors` holds groups (merged one level
+* deeper) and top-level colors (replaced whole); `semanticTokens.text` is a tree of any depth — see
+* `mergeTextTree`.
+*
+* Merging is runtime-only: the result is typed as the plain `ThemeConfig`,
+* and exact token names come from the generated `themed.gen.ts`.
+*/
+const FLAT_CATEGORY_KEYS = [
+	"colors",
+	"radii",
+	"spacing",
+	"fontSizes",
+	"fontWeights",
+	"lineHeights",
+	"letterSpacings",
+	"zIndices",
+	"shadows"
+];
+function mergeFlat(a, b) {
+	if (!a) return b;
+	if (!b) return a;
+	return {
+		...a,
+		...b
+	};
+}
+/**
+* `semanticTokens.colors`: groups are merged, colors replaced whole, so
+* overriding `bg.default` keeps `bg.subtle` and every other group. A
+* top-level color (`primary`) is replaced like a token; when a name is a
+* color on one side and a group on the other, the later side replaces it.
+*/
+function mergeSemanticColors(a, b) {
+	if (!a) return b;
+	if (!b) return a;
+	const result = { ...a };
+	for (const [key, next] of Object.entries(b)) {
+		const prev = result[key];
+		result[key] = prev && !isSchemeColor(prev) && !isSchemeColor(next) ? {
+			...prev,
+			...next
+		} : next;
+	}
+	return result;
+}
+/**
+* `semanticTokens.text`: groups merge recursively, presets (leaves) are
+* replaced whole. So overriding `display.lg` keeps `display.md` and every
+* other group, at any depth. When a key is a preset on one side and a group
+* on the other, the later side replaces it.
+*/
+function mergeTextTree(a, b) {
+	if (!a) return b;
+	if (!b) return a;
+	const result = { ...a };
+	for (const [key, next] of Object.entries(b)) {
+		const prev = result[key];
+		result[key] = prev && !isTextPreset(prev) && !isTextPreset(next) ? mergeTextTree(prev, next) ?? next : next;
+	}
+	return result;
+}
+function mergeTokens(a, b) {
+	if (!a) return b;
+	if (!b) return a;
+	const merged = {};
+	for (const key of FLAT_CATEGORY_KEYS) {
+		const value = mergeFlat(a[key], b[key]);
+		if (value) merged[key] = value;
+	}
+	return merged;
+}
+function mergeSemanticTokens(a, b) {
+	const colors = mergeSemanticColors(a?.colors, b?.colors);
+	const text = mergeTextTree(a?.text, b?.text);
+	return {
+		...colors ? { colors } : {},
+		...text ? { text } : {}
+	};
+}
+function mergeThemeConfig(a, b) {
+	const defaults = mergeFlat(a.defaults, b.defaults);
+	return {
+		tokens: mergeTokens(a.tokens, b.tokens),
+		semanticTokens: mergeSemanticTokens(a.semanticTokens, b.semanticTokens),
+		...defaults ? { defaults } : {}
+	};
+}
+/**
+* Merges N `ThemeConfig`s, folding left-to-right so later themes override
+* earlier ones per key:
+*
+* ```ts
+* const config = extendTheme(materialDesignTheme, chakraUiTheme, {
+*   semanticTokens: {
+*     text: { display: { lg: { fontSize: 60, lineHeight: 68 } } },
+*   },
+* });
+* ```
+*/
+function extendTheme(...themes) {
+	return themes.reduce(mergeThemeConfig);
+}
+//#endregion
+export { extendTheme };

package/dist/index.cjs

@@ -0,0 +1,30 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_define_theme = require("./define-theme.cjs");
+const require_semantic_colors = require("./semantic-colors.cjs");
+const require_text_tree = require("./text-tree.cjs");
+const require_extend_theme = require("./extend-theme.cjs");
+const require_line_height_resolver = require("./resolvers/line-height-resolver.cjs");
+const require_style_props = require("./style-props.cjs");
+const require_create_themed_styles = require("./create-themed-styles.cjs");
+const require_create_themed = require("./create-themed.cjs");
+exports.COLOR_KEYS = require_style_props.COLOR_KEYS;
+exports.FONT_SIZE_KEYS = require_style_props.FONT_SIZE_KEYS;
+exports.FONT_WEIGHT_KEYS = require_style_props.FONT_WEIGHT_KEYS;
+exports.LETTER_SPACING_KEYS = require_style_props.LETTER_SPACING_KEYS;
+exports.LINE_HEIGHT_KEYS = require_style_props.LINE_HEIGHT_KEYS;
+exports.RADIUS_KEYS = require_style_props.RADIUS_KEYS;
+exports.RN_DEFAULT_FONT_SIZE = require_line_height_resolver.RN_DEFAULT_FONT_SIZE;
+exports.SHADOW_STYLE_PROPS = require_style_props.SHADOW_STYLE_PROPS;
+exports.SPACING_KEYS = require_style_props.SPACING_KEYS;
+exports.TEXT_TOKEN_FIELDS = require_text_tree.TEXT_TOKEN_FIELDS;
+exports.Z_INDEX_KEYS = require_style_props.Z_INDEX_KEYS;
+exports.createThemed = require_create_themed.createThemed;
+exports.createThemedStyles = require_create_themed_styles.createThemedStyles;
+exports.defineTheme = require_define_theme.defineTheme;
+exports.extendTheme = require_extend_theme.extendTheme;
+exports.isSchemeColor = require_semantic_colors.isSchemeColor;
+exports.isTextPreset = require_text_tree.isTextPreset;
+exports.resolveBaseFontSize = require_line_height_resolver.resolveBaseFontSize;
+exports.resolveTextColor = require_text_tree.resolveTextColor;
+exports.walkSemanticColors = require_semantic_colors.walkSemanticColors;
+exports.walkTextPresets = require_text_tree.walkTextPresets;

package/dist/index.d.cts

@@ -0,0 +1,13 @@
+import { COLOR_KEYS, FONT_SIZE_KEYS, FONT_WEIGHT_KEYS, LETTER_SPACING_KEYS, LINE_HEIGHT_KEYS, RADIUS_KEYS, SHADOW_STYLE_PROPS, SPACING_KEYS, Z_INDEX_KEYS } from "./style-props.cjs";
+import { LooseSchema, SchemeColor, SemanticColors, ShadowToken, TextColor, TextToken, TextTokenTree, ThemeConfig, ThemedSchema, ThemedStyles, TokenizeStyle } from "./types.cjs";
+import { defineTheme } from "./define-theme.cjs";
+import { extendTheme } from "./extend-theme.cjs";
+import { RN_DEFAULT_FONT_SIZE, resolveBaseFontSize } from "./resolvers/line-height-resolver.cjs";
+import { isSchemeColor, walkSemanticColors } from "./semantic-colors.cjs";
+import { ColorScheme } from "./resolvers/color-resolver.cjs";
+import { TEXT_TOKEN_FIELDS, isTextPreset, resolveTextColor, walkTextPresets } from "./text-tree.cjs";
+import "./config.cjs";
+import { ColorMode, ColorModeStorage } from "./color-mode-store.cjs";
+import { ThemedProviderProps, UseColorModeResult, UseThemedResult, createThemed } from "./create-themed.cjs";
+import { createThemedStyles } from "./create-themed-styles.cjs";
+export { COLOR_KEYS, type ColorMode, type ColorModeStorage, type ColorScheme, FONT_SIZE_KEYS, FONT_WEIGHT_KEYS, LETTER_SPACING_KEYS, LINE_HEIGHT_KEYS, type LooseSchema, RADIUS_KEYS, RN_DEFAULT_FONT_SIZE, SHADOW_STYLE_PROPS, SPACING_KEYS, type SchemeColor, type SemanticColors, type ShadowToken, TEXT_TOKEN_FIELDS, type TextColor, type TextToken, type TextTokenTree, type ThemeConfig, type ThemedProviderProps, type ThemedSchema, type ThemedStyles, type TokenizeStyle, type UseColorModeResult, type UseThemedResult, Z_INDEX_KEYS, createThemed, createThemedStyles, defineTheme, extendTheme, isSchemeColor, isTextPreset, resolveBaseFontSize, resolveTextColor, walkSemanticColors, walkTextPresets };

package/dist/index.d.mts

@@ -0,0 +1,13 @@
+import { COLOR_KEYS, FONT_SIZE_KEYS, FONT_WEIGHT_KEYS, LETTER_SPACING_KEYS, LINE_HEIGHT_KEYS, RADIUS_KEYS, SHADOW_STYLE_PROPS, SPACING_KEYS, Z_INDEX_KEYS } from "./style-props.mjs";
+import { LooseSchema, SchemeColor, SemanticColors, ShadowToken, TextColor, TextToken, TextTokenTree, ThemeConfig, ThemedSchema, ThemedStyles, TokenizeStyle } from "./types.mjs";
+import { defineTheme } from "./define-theme.mjs";
+import { extendTheme } from "./extend-theme.mjs";
+import { RN_DEFAULT_FONT_SIZE, resolveBaseFontSize } from "./resolvers/line-height-resolver.mjs";
+import { isSchemeColor, walkSemanticColors } from "./semantic-colors.mjs";
+import { ColorScheme } from "./resolvers/color-resolver.mjs";
+import { TEXT_TOKEN_FIELDS, isTextPreset, resolveTextColor, walkTextPresets } from "./text-tree.mjs";
+import "./config.mjs";
+import { ColorMode, ColorModeStorage } from "./color-mode-store.mjs";
+import { ThemedProviderProps, UseColorModeResult, UseThemedResult, createThemed } from "./create-themed.mjs";
+import { createThemedStyles } from "./create-themed-styles.mjs";
+export { COLOR_KEYS, type ColorMode, type ColorModeStorage, type ColorScheme, FONT_SIZE_KEYS, FONT_WEIGHT_KEYS, LETTER_SPACING_KEYS, LINE_HEIGHT_KEYS, type LooseSchema, RADIUS_KEYS, RN_DEFAULT_FONT_SIZE, SHADOW_STYLE_PROPS, SPACING_KEYS, type SchemeColor, type SemanticColors, type ShadowToken, TEXT_TOKEN_FIELDS, type TextColor, type TextToken, type TextTokenTree, type ThemeConfig, type ThemedProviderProps, type ThemedSchema, type ThemedStyles, type TokenizeStyle, type UseColorModeResult, type UseThemedResult, Z_INDEX_KEYS, createThemed, createThemedStyles, defineTheme, extendTheme, isSchemeColor, isTextPreset, resolveBaseFontSize, resolveTextColor, walkSemanticColors, walkTextPresets };

package/dist/index.mjs

@@ -0,0 +1,9 @@
+import { defineTheme } from "./define-theme.mjs";
+import { isSchemeColor, walkSemanticColors } from "./semantic-colors.mjs";
+import { TEXT_TOKEN_FIELDS, isTextPreset, resolveTextColor, walkTextPresets } from "./text-tree.mjs";
+import { extendTheme } from "./extend-theme.mjs";
+import { RN_DEFAULT_FONT_SIZE, resolveBaseFontSize } from "./resolvers/line-height-resolver.mjs";
+import { COLOR_KEYS, FONT_SIZE_KEYS, FONT_WEIGHT_KEYS, LETTER_SPACING_KEYS, LINE_HEIGHT_KEYS, RADIUS_KEYS, SHADOW_STYLE_PROPS, SPACING_KEYS, Z_INDEX_KEYS } from "./style-props.mjs";
+import { createThemedStyles } from "./create-themed-styles.mjs";
+import { createThemed } from "./create-themed.mjs";
+export { COLOR_KEYS, FONT_SIZE_KEYS, FONT_WEIGHT_KEYS, LETTER_SPACING_KEYS, LINE_HEIGHT_KEYS, RADIUS_KEYS, RN_DEFAULT_FONT_SIZE, SHADOW_STYLE_PROPS, SPACING_KEYS, TEXT_TOKEN_FIELDS, Z_INDEX_KEYS, createThemed, createThemedStyles, defineTheme, extendTheme, isSchemeColor, isTextPreset, resolveBaseFontSize, resolveTextColor, walkSemanticColors, walkTextPresets };

package/dist/resolvers/color-resolver.cjs

@@ -0,0 +1,23 @@
+const require_semantic_colors = require("../semantic-colors.cjs");
+//#region src/resolvers/color-resolver.ts
+/**
+* `config.semanticTokens.colors` for one scheme, keeping its shape: groups
+* become group -> token -> string (`{ fg: { default: '#000' } }`) and
+* top-level colors a string (`{ primary: '#171717' }`). Semantic values are
+* already concrete strings in the config, so this only picks
+* `light`/`dark`.
+*/
+function resolveSemanticColors(config, scheme) {
+	const result = {};
+	require_semantic_colors.walkSemanticColors(config.semanticTokens?.colors, (token, color, group) => {
+		if (group === void 0) result[token] = color[scheme];
+		else {
+			if (result[group] === void 0) result[group] = {};
+			const tokens = result[group];
+			tokens[token.slice(group.length + 1)] = color[scheme];
+		}
+	});
+	return result;
+}
+//#endregion
+exports.resolveSemanticColors = resolveSemanticColors;

package/dist/resolvers/color-resolver.d.cts

@@ -0,0 +1,4 @@
+import "../types.cjs";
+//#region src/resolvers/color-resolver.d.ts
+export type ColorScheme = 'light' | 'dark';
+//#endregion

package/dist/resolvers/color-resolver.d.mts

@@ -0,0 +1,4 @@
+import "../types.mjs";
+//#region src/resolvers/color-resolver.d.ts
+export type ColorScheme = 'light' | 'dark';
+//#endregion

package/dist/resolvers/color-resolver.mjs

@@ -0,0 +1,23 @@
+import { walkSemanticColors } from "../semantic-colors.mjs";
+//#region src/resolvers/color-resolver.ts
+/**
+* `config.semanticTokens.colors` for one scheme, keeping its shape: groups
+* become group -> token -> string (`{ fg: { default: '#000' } }`) and
+* top-level colors a string (`{ primary: '#171717' }`). Semantic values are
+* already concrete strings in the config, so this only picks
+* `light`/`dark`.
+*/
+function resolveSemanticColors(config, scheme) {
+	const result = {};
+	walkSemanticColors(config.semanticTokens?.colors, (token, color, group) => {
+		if (group === void 0) result[token] = color[scheme];
+		else {
+			if (result[group] === void 0) result[group] = {};
+			const tokens = result[group];
+			tokens[token.slice(group.length + 1)] = color[scheme];
+		}
+	});
+	return result;
+}
+//#endregion
+export { resolveSemanticColors };

package/dist/resolvers/line-height-resolver.cjs

@@ -0,0 +1,17 @@
+//#region src/resolvers/line-height-resolver.ts
+/** React Native's own default `fontSize`. */
+const RN_DEFAULT_FONT_SIZE = 14;
+/**
+* `defaults.fontSize` as a number: a `tokens.fontSizes` key is looked up,
+* a raw number is used as-is, anything else falls back to RN's default.
+*/
+function resolveBaseFontSize(config) {
+	const base = config.defaults?.fontSize;
+	if (typeof base === "number") return base;
+	const scale = config.tokens?.fontSizes;
+	if (typeof base === "string" && scale && Object.hasOwn(scale, base)) return scale[base];
+	return 14;
+}
+//#endregion
+exports.RN_DEFAULT_FONT_SIZE = RN_DEFAULT_FONT_SIZE;
+exports.resolveBaseFontSize = resolveBaseFontSize;

package/dist/{esm/resolvers/line-height-resolver.d.ts → resolvers/line-height-resolver.d.cts}

@@ -1,4 +1,5 @@
-import type { ThemeConfig } from '../types.js';
+import { ThemeConfig } from "../types.cjs";
+//#region src/resolvers/line-height-resolver.d.ts
 /** React Native's own default `fontSize`. */
 export declare const RN_DEFAULT_FONT_SIZE = 14;
 /**
@@ -6,3 +7,4 @@ export declare const RN_DEFAULT_FONT_SIZE = 14;
  * a raw number is used as-is, anything else falls back to RN's default.
  */
 export declare function resolveBaseFontSize(config: ThemeConfig): number;
+//#endregion

package/dist/{cjs/resolvers/line-height-resolver.d.ts → resolvers/line-height-resolver.d.mts}

@@ -1,4 +1,5 @@
-import type { ThemeConfig } from '../types';
+import { ThemeConfig } from "../types.mjs";
+//#region src/resolvers/line-height-resolver.d.ts
 /** React Native's own default `fontSize`. */
 export declare const RN_DEFAULT_FONT_SIZE = 14;
 /**
@@ -6,3 +7,4 @@ export declare const RN_DEFAULT_FONT_SIZE = 14;
  * a raw number is used as-is, anything else falls back to RN's default.
  */
 export declare function resolveBaseFontSize(config: ThemeConfig): number;
+//#endregion

package/dist/resolvers/line-height-resolver.mjs

@@ -0,0 +1,16 @@
+//#region src/resolvers/line-height-resolver.ts
+/** React Native's own default `fontSize`. */
+const RN_DEFAULT_FONT_SIZE = 14;
+/**
+* `defaults.fontSize` as a number: a `tokens.fontSizes` key is looked up,
+* a raw number is used as-is, anything else falls back to RN's default.
+*/
+function resolveBaseFontSize(config) {
+	const base = config.defaults?.fontSize;
+	if (typeof base === "number") return base;
+	const scale = config.tokens?.fontSizes;
+	if (typeof base === "string" && scale && Object.hasOwn(scale, base)) return scale[base];
+	return 14;
+}
+//#endregion
+export { RN_DEFAULT_FONT_SIZE, resolveBaseFontSize };

package/dist/resolvers/style-resolver.cjs

@@ -0,0 +1,86 @@
+const require_semantic_colors = require("../semantic-colors.cjs");
+const require_line_height_resolver = require("./line-height-resolver.cjs");
+const require_style_props = require("../style-props.cjs");
+//#region src/resolvers/style-resolver.ts
+/** Avoids float noise like `17.600000000000001` without pixel-snapping. */
+const round2 = (value) => Math.round(value * 100) / 100;
+const hasToken = (table, value) => (typeof value === "string" || typeof value === "number") && Object.hasOwn(table, value);
+/**
+* Builds the resolver behind `themed.view()` / `text()` / `image()` for one
+* color scheme.
+*
+* Everything that doesn't depend on the input is done once here: a single
+* **prop → token table** lookup (`backgroundColor` → the primitive
+* `tokens.colors` plus the flattened `'group.token'` semantic colors for this
+* scheme, `padding` → `tokens.spacing`, …).
+* Each call then makes **one pass over the input's own keys** (usually a
+* handful), rather than scanning every token-aware prop name, and copies the
+* input at most once — or not at all when nothing is a token.
+*
+* Two props need the rest of the style, so they are applied after the pass:
+* - `lineHeight` tokens are ratios of the (resolved) `fontSize`, falling back
+*   to `defaults.fontSize`;
+* - the virtual `shadow` prop expands last, so a preset wins over explicit
+*   `shadow*` props, and the `shadow` key itself is removed.
+*/
+function createStyleResolver(config, scheme) {
+	const tokens = config.tokens ?? {};
+	const byProp = Object.create(null);
+	const register = (props, table) => {
+		if (!table) return;
+		for (const prop of props) byProp[prop] = table;
+	};
+	const colors = { ...tokens.colors };
+	require_semantic_colors.walkSemanticColors(config.semanticTokens?.colors, (token, color) => {
+		colors[token] = color[scheme];
+	});
+	if (tokens.colors || config.semanticTokens?.colors) register(require_style_props.COLOR_KEYS, colors);
+	register(require_style_props.RADIUS_KEYS, tokens.radii);
+	register(require_style_props.SPACING_KEYS, tokens.spacing);
+	register(require_style_props.FONT_SIZE_KEYS, tokens.fontSizes);
+	register(require_style_props.FONT_WEIGHT_KEYS, tokens.fontWeights);
+	register(require_style_props.LETTER_SPACING_KEYS, tokens.letterSpacings);
+	register(require_style_props.Z_INDEX_KEYS, tokens.zIndices);
+	const lineHeights = tokens.lineHeights;
+	const shadows = tokens.shadows;
+	const baseFontSize = require_line_height_resolver.resolveBaseFontSize(config);
+	return function resolveStyle(input) {
+		const source = input;
+		let result = null;
+		let lineHeightRatio;
+		let shadowPreset;
+		let hasShadow = false;
+		for (const key in source) {
+			const value = source[key];
+			if (key === "lineHeight") {
+				if (lineHeights && hasToken(lineHeights, value)) lineHeightRatio = lineHeights[value];
+				continue;
+			}
+			if (key === "shadow") {
+				if (shadows) {
+					hasShadow = true;
+					shadowPreset = hasToken(shadows, value) ? shadows[value] : void 0;
+				}
+				continue;
+			}
+			const table = byProp[key];
+			if (table === void 0 || !hasToken(table, value)) continue;
+			result ?? (result = { ...source });
+			result[key] = table[value];
+		}
+		if (lineHeightRatio !== void 0) {
+			result ?? (result = { ...source });
+			const fontSize = typeof result.fontSize === "number" ? result.fontSize : baseFontSize;
+			result.lineHeight = round2(fontSize * lineHeightRatio);
+		}
+		if (hasShadow) {
+			const base = result ?? source;
+			const expanded = {};
+			for (const key in base) if (key !== "shadow") expanded[key] = base[key];
+			result = shadowPreset ? Object.assign(expanded, shadowPreset) : expanded;
+		}
+		return result ?? source;
+	};
+}
+//#endregion
+exports.createStyleResolver = createStyleResolver;

package/dist/resolvers/style-resolver.mjs

@@ -0,0 +1,86 @@
+import { walkSemanticColors } from "../semantic-colors.mjs";
+import { resolveBaseFontSize } from "./line-height-resolver.mjs";
+import { COLOR_KEYS, FONT_SIZE_KEYS, FONT_WEIGHT_KEYS, LETTER_SPACING_KEYS, RADIUS_KEYS, SPACING_KEYS, Z_INDEX_KEYS } from "../style-props.mjs";
+//#region src/resolvers/style-resolver.ts
+/** Avoids float noise like `17.600000000000001` without pixel-snapping. */
+const round2 = (value) => Math.round(value * 100) / 100;
+const hasToken = (table, value) => (typeof value === "string" || typeof value === "number") && Object.hasOwn(table, value);
+/**
+* Builds the resolver behind `themed.view()` / `text()` / `image()` for one
+* color scheme.
+*
+* Everything that doesn't depend on the input is done once here: a single
+* **prop → token table** lookup (`backgroundColor` → the primitive
+* `tokens.colors` plus the flattened `'group.token'` semantic colors for this
+* scheme, `padding` → `tokens.spacing`, …).
+* Each call then makes **one pass over the input's own keys** (usually a
+* handful), rather than scanning every token-aware prop name, and copies the
+* input at most once — or not at all when nothing is a token.
+*
+* Two props need the rest of the style, so they are applied after the pass:
+* - `lineHeight` tokens are ratios of the (resolved) `fontSize`, falling back
+*   to `defaults.fontSize`;
+* - the virtual `shadow` prop expands last, so a preset wins over explicit
+*   `shadow*` props, and the `shadow` key itself is removed.
+*/
+function createStyleResolver(config, scheme) {
+	const tokens = config.tokens ?? {};
+	const byProp = Object.create(null);
+	const register = (props, table) => {
+		if (!table) return;
+		for (const prop of props) byProp[prop] = table;
+	};
+	const colors = { ...tokens.colors };
+	walkSemanticColors(config.semanticTokens?.colors, (token, color) => {
+		colors[token] = color[scheme];
+	});
+	if (tokens.colors || config.semanticTokens?.colors) register(COLOR_KEYS, colors);
+	register(RADIUS_KEYS, tokens.radii);
+	register(SPACING_KEYS, tokens.spacing);
+	register(FONT_SIZE_KEYS, tokens.fontSizes);
+	register(FONT_WEIGHT_KEYS, tokens.fontWeights);
+	register(LETTER_SPACING_KEYS, tokens.letterSpacings);
+	register(Z_INDEX_KEYS, tokens.zIndices);
+	const lineHeights = tokens.lineHeights;
+	const shadows = tokens.shadows;
+	const baseFontSize = resolveBaseFontSize(config);
+	return function resolveStyle(input) {
+		const source = input;
+		let result = null;
+		let lineHeightRatio;
+		let shadowPreset;
+		let hasShadow = false;
+		for (const key in source) {
+			const value = source[key];
+			if (key === "lineHeight") {
+				if (lineHeights && hasToken(lineHeights, value)) lineHeightRatio = lineHeights[value];
+				continue;
+			}
+			if (key === "shadow") {
+				if (shadows) {
+					hasShadow = true;
+					shadowPreset = hasToken(shadows, value) ? shadows[value] : void 0;
+				}
+				continue;
+			}
+			const table = byProp[key];
+			if (table === void 0 || !hasToken(table, value)) continue;
+			result ?? (result = { ...source });
+			result[key] = table[value];
+		}
+		if (lineHeightRatio !== void 0) {
+			result ?? (result = { ...source });
+			const fontSize = typeof result.fontSize === "number" ? result.fontSize : baseFontSize;
+			result.lineHeight = round2(fontSize * lineHeightRatio);
+		}
+		if (hasShadow) {
+			const base = result ?? source;
+			const expanded = {};
+			for (const key in base) if (key !== "shadow") expanded[key] = base[key];
+			result = shadowPreset ? Object.assign(expanded, shadowPreset) : expanded;
+		}
+		return result ?? source;
+	};
+}
+//#endregion
+export { createStyleResolver };

package/dist/semantic-colors.cjs

@@ -0,0 +1,29 @@
+//#region src/semantic-colors.ts
+/**
+* A color of `semanticTokens.colors` (as opposed to a group of them): an
+* object whose `light` or `dark` is a string. A group's values are objects,
+* so a group may still name a token `light` or `dark` (Material UI's
+* `primary.light`).
+*/
+function isSchemeColor(node) {
+	if (typeof node !== "object" || node === null) return false;
+	const { light, dark } = node;
+	return typeof light === "string" || typeof dark === "string";
+}
+/**
+* Visits every semantic color in definition order with its token name:
+* `'group.token'` inside a group, or the bare name for a top-level color
+* (`'primary'`, `'primary-foreground'`).
+*/
+function walkSemanticColors(colors, visit) {
+	for (const [key, node] of Object.entries(colors ?? {})) {
+		if (isSchemeColor(node)) {
+			visit(key, node, void 0);
+			continue;
+		}
+		for (const [name, color] of Object.entries(node)) visit(`${key}.${name}`, color, key);
+	}
+}
+//#endregion
+exports.isSchemeColor = isSchemeColor;
+exports.walkSemanticColors = walkSemanticColors;

package/dist/{esm/semantic-colors.d.ts → semantic-colors.d.cts}

@@ -1,4 +1,5 @@
-import type { SchemeColor, SemanticColors } from './types.js';
+import { SchemeColor, SemanticColors } from "./types.cjs";
+//#region src/semantic-colors.d.ts
 /**
  * A color of `semanticTokens.colors` (as opposed to a group of them): an
  * object whose `light` or `dark` is a string. A group's values are objects,
@@ -12,3 +13,4 @@ export declare function isSchemeColor(node: unknown): node is SchemeColor;
  * (`'primary'`, `'primary-foreground'`).
  */
 export declare function walkSemanticColors(colors: SemanticColors | undefined, visit: (token: string, color: SchemeColor, group: string | undefined) => void): void;
+//#endregion

package/dist/{cjs/semantic-colors.d.ts → semantic-colors.d.mts}

@@ -1,4 +1,5 @@
-import type { SchemeColor, SemanticColors } from './types';
+import { SchemeColor, SemanticColors } from "./types.mjs";
+//#region src/semantic-colors.d.ts
 /**
  * A color of `semanticTokens.colors` (as opposed to a group of them): an
  * object whose `light` or `dark` is a string. A group's values are objects,
@@ -12,3 +13,4 @@ export declare function isSchemeColor(node: unknown): node is SchemeColor;
  * (`'primary'`, `'primary-foreground'`).
  */
 export declare function walkSemanticColors(colors: SemanticColors | undefined, visit: (token: string, color: SchemeColor, group: string | undefined) => void): void;
+//#endregion