@react-native-rethemed/core 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (104) hide show
  1. package/README.md +2 -0
  2. package/dist/color-mode-store.cjs +57 -0
  3. package/dist/color-mode-store.d.cts +11 -0
  4. package/dist/color-mode-store.d.mts +11 -0
  5. package/dist/color-mode-store.mjs +56 -0
  6. package/dist/config.cjs +26 -0
  7. package/dist/config.d.cts +8 -0
  8. package/dist/config.d.mts +8 -0
  9. package/dist/config.mjs +7 -0
  10. package/dist/create-themed-styles.cjs +31 -0
  11. package/dist/{esm/create-themed-styles.d.ts → create-themed-styles.d.cts} +4 -2
  12. package/dist/{cjs/create-themed-styles.d.ts → create-themed-styles.d.mts} +4 -2
  13. package/dist/create-themed-styles.mjs +31 -0
  14. package/dist/create-themed.cjs +93 -0
  15. package/dist/create-themed.d.cts +48 -0
  16. package/dist/create-themed.d.mts +48 -0
  17. package/dist/create-themed.mjs +93 -0
  18. package/dist/define-theme.cjs +15 -0
  19. package/dist/{esm/define-theme.d.ts → define-theme.d.cts} +3 -1
  20. package/dist/{cjs/define-theme.d.ts → define-theme.d.mts} +3 -1
  21. package/dist/define-theme.mjs +15 -0
  22. package/dist/extend-theme.cjs +109 -0
  23. package/dist/{esm/extend-theme.d.ts → extend-theme.d.cts} +3 -1
  24. package/dist/{cjs/extend-theme.d.ts → extend-theme.d.mts} +3 -1
  25. package/dist/extend-theme.mjs +109 -0
  26. package/dist/index.cjs +30 -0
  27. package/dist/index.d.cts +13 -0
  28. package/dist/index.d.mts +13 -0
  29. package/dist/index.mjs +9 -0
  30. package/dist/resolvers/color-resolver.cjs +23 -0
  31. package/dist/resolvers/color-resolver.d.cts +4 -0
  32. package/dist/resolvers/color-resolver.d.mts +4 -0
  33. package/dist/resolvers/color-resolver.mjs +23 -0
  34. package/dist/resolvers/line-height-resolver.cjs +17 -0
  35. package/dist/{esm/resolvers/line-height-resolver.d.ts → resolvers/line-height-resolver.d.cts} +3 -1
  36. package/dist/{cjs/resolvers/line-height-resolver.d.ts → resolvers/line-height-resolver.d.mts} +3 -1
  37. package/dist/resolvers/line-height-resolver.mjs +16 -0
  38. package/dist/resolvers/style-resolver.cjs +86 -0
  39. package/dist/resolvers/style-resolver.mjs +86 -0
  40. package/dist/semantic-colors.cjs +29 -0
  41. package/dist/{esm/semantic-colors.d.ts → semantic-colors.d.cts} +3 -1
  42. package/dist/{cjs/semantic-colors.d.ts → semantic-colors.d.mts} +3 -1
  43. package/dist/semantic-colors.mjs +28 -0
  44. package/dist/style-props.cjs +103 -0
  45. package/dist/{cjs/style-props.d.ts → style-props.d.cts} +2 -1
  46. package/dist/{esm/style-props.d.ts → style-props.d.mts} +2 -1
  47. package/dist/style-props.mjs +95 -0
  48. package/dist/text-tree.cjs +70 -0
  49. package/dist/{cjs/text-tree.d.ts → text-tree.d.cts} +4 -8
  50. package/dist/{esm/text-tree.d.ts → text-tree.d.mts} +4 -8
  51. package/dist/text-tree.mjs +66 -0
  52. package/dist/text-variants.cjs +25 -0
  53. package/dist/text-variants.mjs +25 -0
  54. package/dist/types.d.cts +280 -0
  55. package/dist/types.d.mts +280 -0
  56. package/package.json +16 -24
  57. package/dist/cjs/color-mode-store.d.ts +0 -32
  58. package/dist/cjs/color-mode-store.js +0 -64
  59. package/dist/cjs/config.d.ts +0 -14
  60. package/dist/cjs/config.js +0 -35
  61. package/dist/cjs/create-themed-styles.js +0 -37
  62. package/dist/cjs/create-themed.d.ts +0 -46
  63. package/dist/cjs/create-themed.js +0 -118
  64. package/dist/cjs/define-theme.js +0 -15
  65. package/dist/cjs/extend-theme.js +0 -118
  66. package/dist/cjs/index.d.ts +0 -4
  67. package/dist/cjs/index.js +0 -22
  68. package/dist/cjs/package.json +0 -1
  69. package/dist/cjs/resolvers/color-resolver.d.ts +0 -10
  70. package/dist/cjs/resolvers/color-resolver.js +0 -26
  71. package/dist/cjs/resolvers/line-height-resolver.js +0 -20
  72. package/dist/cjs/resolvers/style-resolver.d.ts +0 -21
  73. package/dist/cjs/resolvers/style-resolver.js +0 -104
  74. package/dist/cjs/semantic-colors.js +0 -32
  75. package/dist/cjs/style-props.js +0 -95
  76. package/dist/cjs/text-tree.js +0 -79
  77. package/dist/cjs/text-variants.d.ts +0 -22
  78. package/dist/cjs/text-variants.js +0 -29
  79. package/dist/cjs/types.d.ts +0 -281
  80. package/dist/cjs/types.js +0 -2
  81. package/dist/esm/color-mode-store.d.ts +0 -32
  82. package/dist/esm/color-mode-store.js +0 -59
  83. package/dist/esm/config.d.ts +0 -14
  84. package/dist/esm/config.js +0 -13
  85. package/dist/esm/create-themed-styles.js +0 -34
  86. package/dist/esm/create-themed.d.ts +0 -46
  87. package/dist/esm/create-themed.js +0 -115
  88. package/dist/esm/define-theme.js +0 -12
  89. package/dist/esm/extend-theme.js +0 -115
  90. package/dist/esm/index.d.ts +0 -4
  91. package/dist/esm/index.js +0 -3
  92. package/dist/esm/package.json +0 -1
  93. package/dist/esm/resolvers/color-resolver.d.ts +0 -10
  94. package/dist/esm/resolvers/color-resolver.js +0 -23
  95. package/dist/esm/resolvers/line-height-resolver.js +0 -16
  96. package/dist/esm/resolvers/style-resolver.d.ts +0 -21
  97. package/dist/esm/resolvers/style-resolver.js +0 -101
  98. package/dist/esm/semantic-colors.js +0 -28
  99. package/dist/esm/style-props.js +0 -92
  100. package/dist/esm/text-tree.js +0 -72
  101. package/dist/esm/text-variants.d.ts +0 -22
  102. package/dist/esm/text-variants.js +0 -26
  103. package/dist/esm/types.d.ts +0 -281
  104. package/dist/esm/types.js +0 -1
@@ -1,64 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.isColorMode = void 0;
4
- exports.createColorModeStore = createColorModeStore;
5
- const isColorMode = (value) => value === 'light' || value === 'dark' || value === 'system';
6
- exports.isColorMode = isColorMode;
7
- /**
8
- * External store holding the uncontrolled color mode. One is created per
9
- * `createThemed()` call (never at module level) so independent instances
10
- * don't share state.
11
- */
12
- function createColorModeStore() {
13
- let mode = null;
14
- // Set once the user picks a mode, so a late rehydration can't override it.
15
- let userSet = false;
16
- let hydrationStarted = false;
17
- const listeners = new Set();
18
- const emit = () => {
19
- for (const listener of listeners)
20
- listener();
21
- };
22
- return {
23
- /**
24
- * Seeds the mode on first use only. Called during render so the very
25
- * first render already sees `defaultMode`; later calls (e.g. a changed
26
- * `defaultColorMode` prop) are ignored rather than overwriting the
27
- * current mode.
28
- */
29
- init(defaultMode) {
30
- if (mode === null)
31
- mode = defaultMode;
32
- },
33
- subscribe(listener) {
34
- listeners.add(listener);
35
- return () => {
36
- listeners.delete(listener);
37
- };
38
- },
39
- getSnapshot() {
40
- return mode ?? 'system';
41
- },
42
- setMode(next) {
43
- userSet = true;
44
- if (next === mode)
45
- return;
46
- mode = next;
47
- emit();
48
- },
49
- /** Returns `false` if rehydration already ran for this store. */
50
- beginHydration() {
51
- if (hydrationStarted)
52
- return false;
53
- hydrationStarted = true;
54
- return true;
55
- },
56
- /** Applies a stored value unless it's malformed or the user already chose. */
57
- hydrate(saved) {
58
- if (userSet || !(0, exports.isColorMode)(saved) || saved === mode)
59
- return;
60
- mode = saved;
61
- emit();
62
- },
63
- };
64
- }
@@ -1,14 +0,0 @@
1
- /**
2
- * `@react-native-rethemed/core/config` — the React/RN-free part of core.
3
- *
4
- * Apps can import everything from the package root: the CLI stubs
5
- * `react-native` when it evaluates a theme file. Core's own token packages
6
- * still import from here so they never depend on that stub.
7
- */
8
- export { defineTheme } from './define-theme';
9
- export { extendTheme } from './extend-theme';
10
- export { RN_DEFAULT_FONT_SIZE, resolveBaseFontSize, } from './resolvers/line-height-resolver';
11
- export { isSchemeColor, walkSemanticColors } from './semantic-colors';
12
- export { 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';
13
- export { isTextPreset, resolveTextColor, TEXT_TOKEN_FIELDS, walkTextPresets, } from './text-tree';
14
- export type { LooseSchema, SchemeColor, SemanticColors, ShadowToken, TextColor, TextToken, TextTokenTree, ThemeConfig, ThemedSchema, ThemedStyles, TokenizeStyle, } from './types';
@@ -1,35 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.walkTextPresets = exports.TEXT_TOKEN_FIELDS = exports.resolveTextColor = exports.isTextPreset = exports.Z_INDEX_KEYS = exports.SPACING_KEYS = exports.SHADOW_STYLE_PROPS = exports.RADIUS_KEYS = exports.LINE_HEIGHT_KEYS = exports.LETTER_SPACING_KEYS = exports.FONT_WEIGHT_KEYS = exports.FONT_SIZE_KEYS = exports.COLOR_KEYS = exports.walkSemanticColors = exports.isSchemeColor = exports.resolveBaseFontSize = exports.RN_DEFAULT_FONT_SIZE = exports.extendTheme = exports.defineTheme = void 0;
4
- /**
5
- * `@react-native-rethemed/core/config` — the React/RN-free part of core.
6
- *
7
- * Apps can import everything from the package root: the CLI stubs
8
- * `react-native` when it evaluates a theme file. Core's own token packages
9
- * still import from here so they never depend on that stub.
10
- */
11
- var define_theme_1 = require("./define-theme");
12
- Object.defineProperty(exports, "defineTheme", { enumerable: true, get: function () { return define_theme_1.defineTheme; } });
13
- var extend_theme_1 = require("./extend-theme");
14
- Object.defineProperty(exports, "extendTheme", { enumerable: true, get: function () { return extend_theme_1.extendTheme; } });
15
- var line_height_resolver_1 = require("./resolvers/line-height-resolver");
16
- Object.defineProperty(exports, "RN_DEFAULT_FONT_SIZE", { enumerable: true, get: function () { return line_height_resolver_1.RN_DEFAULT_FONT_SIZE; } });
17
- Object.defineProperty(exports, "resolveBaseFontSize", { enumerable: true, get: function () { return line_height_resolver_1.resolveBaseFontSize; } });
18
- var semantic_colors_1 = require("./semantic-colors");
19
- Object.defineProperty(exports, "isSchemeColor", { enumerable: true, get: function () { return semantic_colors_1.isSchemeColor; } });
20
- Object.defineProperty(exports, "walkSemanticColors", { enumerable: true, get: function () { return semantic_colors_1.walkSemanticColors; } });
21
- var style_props_1 = require("./style-props");
22
- Object.defineProperty(exports, "COLOR_KEYS", { enumerable: true, get: function () { return style_props_1.COLOR_KEYS; } });
23
- Object.defineProperty(exports, "FONT_SIZE_KEYS", { enumerable: true, get: function () { return style_props_1.FONT_SIZE_KEYS; } });
24
- Object.defineProperty(exports, "FONT_WEIGHT_KEYS", { enumerable: true, get: function () { return style_props_1.FONT_WEIGHT_KEYS; } });
25
- Object.defineProperty(exports, "LETTER_SPACING_KEYS", { enumerable: true, get: function () { return style_props_1.LETTER_SPACING_KEYS; } });
26
- Object.defineProperty(exports, "LINE_HEIGHT_KEYS", { enumerable: true, get: function () { return style_props_1.LINE_HEIGHT_KEYS; } });
27
- Object.defineProperty(exports, "RADIUS_KEYS", { enumerable: true, get: function () { return style_props_1.RADIUS_KEYS; } });
28
- Object.defineProperty(exports, "SHADOW_STYLE_PROPS", { enumerable: true, get: function () { return style_props_1.SHADOW_STYLE_PROPS; } });
29
- Object.defineProperty(exports, "SPACING_KEYS", { enumerable: true, get: function () { return style_props_1.SPACING_KEYS; } });
30
- Object.defineProperty(exports, "Z_INDEX_KEYS", { enumerable: true, get: function () { return style_props_1.Z_INDEX_KEYS; } });
31
- var text_tree_1 = require("./text-tree");
32
- Object.defineProperty(exports, "isTextPreset", { enumerable: true, get: function () { return text_tree_1.isTextPreset; } });
33
- Object.defineProperty(exports, "resolveTextColor", { enumerable: true, get: function () { return text_tree_1.resolveTextColor; } });
34
- Object.defineProperty(exports, "TEXT_TOKEN_FIELDS", { enumerable: true, get: function () { return text_tree_1.TEXT_TOKEN_FIELDS; } });
35
- Object.defineProperty(exports, "walkTextPresets", { enumerable: true, get: function () { return text_tree_1.walkTextPresets; } });
@@ -1,37 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.createThemedStyles = createThemedStyles;
4
- const style_resolver_1 = require("./resolvers/style-resolver");
5
- const text_tree_1 = require("./text-tree");
6
- const text_variants_1 = require("./text-variants");
7
- /**
8
- * Builds `{ view, text, image }` from a fully resolved `ThemeConfig` for one
9
- * fixed color scheme. No React here — plain data in, plain functions out.
10
- * `createThemed` calls this once per scheme and hands the result out through
11
- * `useThemed()`, so components re-render (and pick up new colors) when the
12
- * scheme changes.
13
- *
14
- * `S` comes from the generated `themed.gen.ts`; without it every token
15
- * prop is loosely typed (`LooseSchema`).
16
- */
17
- function createThemedStyles(config, scheme) {
18
- // One pass over the input's keys per call; see `createStyleResolver`.
19
- const resolveStyle = (0, style_resolver_1.createStyleResolver)(config, scheme);
20
- const text = (input = {}) => resolveStyle(input);
21
- // Preset colors (`{ light, dark }`) are picked for this scheme up front.
22
- const variants = (0, text_variants_1.createTextVariants)((0, text_tree_1.resolveTextTree)(config.semanticTokens?.text, scheme), (input) => resolveStyle(input));
23
- // `Object.assign` would throw for roles that collide with non-writable
24
- // function properties (`name`, `length`); defineProperty overrides them.
25
- for (const [role, sizes] of Object.entries(variants)) {
26
- Object.defineProperty(text, role, {
27
- value: sizes,
28
- enumerable: true,
29
- configurable: true,
30
- });
31
- }
32
- return {
33
- view: resolveStyle,
34
- image: resolveStyle,
35
- text,
36
- };
37
- }
@@ -1,46 +0,0 @@
1
- import { type ReactNode } from 'react';
2
- import { type ColorMode, type ColorModeStorage } from './color-mode-store';
3
- import { type ColorScheme } from './resolvers/color-resolver';
4
- import type { LooseSchema, ThemeConfig, ThemedSchema, ThemedStyles } from './types';
5
- export type { ColorMode, ColorModeStorage, ColorScheme };
6
- export type ThemedProviderProps = {
7
- children?: ReactNode;
8
- /**
9
- * Controlled mode: the app owns the scheme and this value is used as-is.
10
- * When set, `defaultColorMode`/`storage`/`storageKey` are ignored.
11
- */
12
- colorScheme?: ColorScheme;
13
- /** Uncontrolled initial mode. Only read the first time the store is used. */
14
- defaultColorMode?: ColorMode;
15
- /** Uncontrolled persistence, e.g. `expo-secure-store` or `AsyncStorage`. */
16
- storage?: ColorModeStorage;
17
- storageKey?: string;
18
- };
19
- export type UseThemedResult<S extends ThemedSchema = LooseSchema> = {
20
- themed: ThemedStyles<S>;
21
- /** Primitive, scheme-independent tokens exactly as in the config. */
22
- tokens: S['tokens'];
23
- /**
24
- * Semantic tokens with colors (including text preset colors) resolved for
25
- * the current scheme.
26
- */
27
- semanticTokens: S['semanticTokens'];
28
- colorScheme: ColorScheme;
29
- };
30
- export type UseColorModeResult = {
31
- mode: ColorMode;
32
- setMode: (mode: ColorMode) => void;
33
- };
34
- /**
35
- * Binds a theme config to React: returns a provider plus hooks that read
36
- * the current scheme from it. Everything (store, contexts, precomputed
37
- * themes) is scoped to this call, so several instances can coexist.
38
- *
39
- * `S` is supplied by the generated `themed.gen.ts`
40
- * (`@react-native-rethemed/cli codegen`); without it tokens are loosely typed.
41
- */
42
- export declare function createThemed<S extends ThemedSchema = LooseSchema>(config: ThemeConfig): {
43
- ThemedProvider: ({ children, colorScheme, defaultColorMode, storage, storageKey, }: ThemedProviderProps) => import("react").FunctionComponentElement<import("react").ProviderProps<ColorScheme | null>>;
44
- useThemed: () => UseThemedResult<S>;
45
- useColorMode: () => UseColorModeResult;
46
- };
@@ -1,118 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.createThemed = createThemed;
4
- const react_1 = require("react");
5
- const react_native_1 = require("react-native");
6
- const color_mode_store_1 = require("./color-mode-store");
7
- const create_themed_styles_1 = require("./create-themed-styles");
8
- const color_resolver_1 = require("./resolvers/color-resolver");
9
- const text_tree_1 = require("./text-tree");
10
- const DEFAULT_STORAGE_KEY = 'react-native-rethemed.color-mode';
11
- /** RN 0.86 reports `'unspecified'` (and may report `null`); the theme is binary. */
12
- function toColorScheme(value) {
13
- return value === 'dark' ? 'dark' : 'light';
14
- }
15
- /** `Appearance.setColorScheme` is RN 0.73+ only and absent on react-native-web. */
16
- function syncNativeAppearance(mode) {
17
- if (typeof react_native_1.Appearance?.setColorScheme !== 'function')
18
- return;
19
- react_native_1.Appearance.setColorScheme(mode === 'system' ? 'unspecified' : mode);
20
- }
21
- const warnControlledSetMode = () => {
22
- if (__DEV__) {
23
- console.warn('[react-native-rethemed] setMode() was called while <ThemedProvider> is ' +
24
- 'controlled via the `colorScheme` prop. Update that prop instead.');
25
- }
26
- };
27
- /**
28
- * Binds a theme config to React: returns a provider plus hooks that read
29
- * the current scheme from it. Everything (store, contexts, precomputed
30
- * themes) is scoped to this call, so several instances can coexist.
31
- *
32
- * `S` is supplied by the generated `themed.gen.ts`
33
- * (`@react-native-rethemed/cli codegen`); without it tokens are loosely typed.
34
- */
35
- function createThemed(config) {
36
- // Precomputed once per scheme so `useThemed()` returns referentially
37
- // stable objects until the scheme actually changes.
38
- const build = (colorScheme) => ({
39
- themed: (0, create_themed_styles_1.createThemedStyles)(config, colorScheme),
40
- tokens: config.tokens ?? {},
41
- semanticTokens: {
42
- colors: (0, color_resolver_1.resolveSemanticColors)(config, colorScheme),
43
- text: (0, text_tree_1.resolveTextTree)(config.semanticTokens?.text, colorScheme),
44
- },
45
- colorScheme,
46
- });
47
- const themes = {
48
- light: build('light'),
49
- dark: build('dark'),
50
- };
51
- const store = (0, color_mode_store_1.createColorModeStore)();
52
- // Split so a mode change that keeps the same scheme (e.g. 'system' ->
53
- // 'light' while the OS is light) doesn't re-render `useThemed` consumers.
54
- const SchemeContext = (0, react_1.createContext)(null);
55
- const ModeContext = (0, react_1.createContext)(null);
56
- function ThemedProvider({ children, colorScheme, defaultColorMode = 'system', storage, storageKey = DEFAULT_STORAGE_KEY, }) {
57
- const isControlled = colorScheme !== undefined;
58
- // Hooks run unconditionally so switching between controlled and
59
- // uncontrolled never changes hook order or remounts children.
60
- store.init(defaultColorMode);
61
- const storedMode = (0, react_1.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
62
- const systemScheme = toColorScheme((0, react_native_1.useColorScheme)());
63
- (0, react_1.useEffect)(() => {
64
- if (isControlled || !storage || !store.beginHydration())
65
- return;
66
- // The store outlives this provider, so the result is applied even if
67
- // it resolves after unmount; `hydrate` drops it if the user already
68
- // picked a mode. `Promise.resolve().then` also catches a sync throw.
69
- Promise.resolve()
70
- .then(() => storage.getItem(storageKey))
71
- .then((saved) => store.hydrate(saved))
72
- .catch(() => { });
73
- }, [isControlled, storage, storageKey]);
74
- (0, react_1.useEffect)(() => {
75
- if (!isControlled)
76
- syncNativeAppearance(storedMode);
77
- }, [isControlled, storedMode]);
78
- const setUncontrolledMode = (0, react_1.useCallback)((next) => {
79
- // Sync first: when returning to 'system', RN's `useColorScheme()`
80
- // keeps reporting the old override until it's reset.
81
- syncNativeAppearance(next);
82
- store.setMode(next);
83
- if (storage) {
84
- Promise.resolve()
85
- .then(() => storage.setItem(storageKey, next))
86
- .catch(() => { });
87
- }
88
- }, [storage, storageKey]);
89
- const scheme = isControlled
90
- ? colorScheme
91
- : storedMode === 'system'
92
- ? systemScheme
93
- : storedMode;
94
- const mode = isControlled ? colorScheme : storedMode;
95
- const setMode = isControlled ? warnControlledSetMode : setUncontrolledMode;
96
- const modeValue = (0, react_1.useMemo)(() => ({ mode, setMode }), [mode, setMode]);
97
- // `createElement` instead of JSX so consumers type-checking this source
98
- // (it ships as `.ts`) don't need a `jsx` compiler option.
99
- return (0, react_1.createElement)(SchemeContext, { value: scheme }, (0, react_1.createElement)(ModeContext, { value: modeValue }, children));
100
- }
101
- function useThemed() {
102
- const scheme = (0, react_1.useContext)(SchemeContext);
103
- if (scheme === null) {
104
- throw new Error('useThemed() must be used within a <ThemedProvider> returned by the ' +
105
- 'same createThemed() call.');
106
- }
107
- return themes[scheme];
108
- }
109
- function useColorMode() {
110
- const value = (0, react_1.useContext)(ModeContext);
111
- if (value === null) {
112
- throw new Error('useColorMode() must be used within a <ThemedProvider> returned by ' +
113
- 'the same createThemed() call.');
114
- }
115
- return value;
116
- }
117
- return { ThemedProvider, useThemed, useColorMode };
118
- }
@@ -1,15 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.defineTheme = defineTheme;
4
- /**
5
- * Identity function used purely as a type gate: checks `config` against
6
- * `ThemeConfig` (object literals get the usual excess-property check, so a
7
- * misspelled `radius` or `semanticToken` fails to compile).
8
- *
9
- * The return type is deliberately the plain `ThemeConfig` — exact token
10
- * names come from the generated `themed.gen.ts`, not from literal-type
11
- * inference here.
12
- */
13
- function defineTheme(config) {
14
- return config;
15
- }
@@ -1,118 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.extendTheme = extendTheme;
4
- const semantic_colors_1 = require("./semantic-colors");
5
- const text_tree_1 = require("./text-tree");
6
- /**
7
- * Flat `tokens` categories: a one-level merge (`{ ...a, ...b }`, `b` wins per
8
- * key) is enough. `semanticTokens.colors` holds groups (merged one level
9
- * deeper) and top-level colors (replaced whole); `semanticTokens.text` is a tree of any depth — see
10
- * `mergeTextTree`.
11
- *
12
- * Merging is runtime-only: the result is typed as the plain `ThemeConfig`,
13
- * and exact token names come from the generated `themed.gen.ts`.
14
- */
15
- const FLAT_CATEGORY_KEYS = [
16
- 'colors',
17
- 'radii',
18
- 'spacing',
19
- 'fontSizes',
20
- 'fontWeights',
21
- 'lineHeights',
22
- 'letterSpacings',
23
- 'zIndices',
24
- 'shadows',
25
- ];
26
- function mergeFlat(a, b) {
27
- if (!a)
28
- return b;
29
- if (!b)
30
- return a;
31
- return { ...a, ...b };
32
- }
33
- /**
34
- * `semanticTokens.colors`: groups are merged, colors replaced whole, so
35
- * overriding `bg.default` keeps `bg.subtle` and every other group. A
36
- * top-level color (`primary`) is replaced like a token; when a name is a
37
- * color on one side and a group on the other, the later side replaces it.
38
- */
39
- function mergeSemanticColors(a, b) {
40
- if (!a)
41
- return b;
42
- if (!b)
43
- return a;
44
- const result = { ...a };
45
- for (const [key, next] of Object.entries(b)) {
46
- const prev = result[key];
47
- result[key] =
48
- prev && !(0, semantic_colors_1.isSchemeColor)(prev) && !(0, semantic_colors_1.isSchemeColor)(next)
49
- ? { ...prev, ...next }
50
- : next;
51
- }
52
- return result;
53
- }
54
- /**
55
- * `semanticTokens.text`: groups merge recursively, presets (leaves) are
56
- * replaced whole. So overriding `display.lg` keeps `display.md` and every
57
- * other group, at any depth. When a key is a preset on one side and a group
58
- * on the other, the later side replaces it.
59
- */
60
- function mergeTextTree(a, b) {
61
- if (!a)
62
- return b;
63
- if (!b)
64
- return a;
65
- const result = { ...a };
66
- for (const [key, next] of Object.entries(b)) {
67
- const prev = result[key];
68
- result[key] =
69
- prev && !(0, text_tree_1.isTextPreset)(prev) && !(0, text_tree_1.isTextPreset)(next)
70
- ? (mergeTextTree(prev, next) ?? next)
71
- : next;
72
- }
73
- return result;
74
- }
75
- function mergeTokens(a, b) {
76
- if (!a)
77
- return b;
78
- if (!b)
79
- return a;
80
- const merged = {};
81
- for (const key of FLAT_CATEGORY_KEYS) {
82
- const value = mergeFlat(a[key], b[key]);
83
- if (value)
84
- merged[key] = value;
85
- }
86
- return merged;
87
- }
88
- function mergeSemanticTokens(a, b) {
89
- const colors = mergeSemanticColors(a?.colors, b?.colors);
90
- const text = mergeTextTree(a?.text, b?.text);
91
- return {
92
- ...(colors ? { colors } : {}),
93
- ...(text ? { text } : {}),
94
- };
95
- }
96
- function mergeThemeConfig(a, b) {
97
- const defaults = mergeFlat(a.defaults, b.defaults);
98
- return {
99
- tokens: mergeTokens(a.tokens, b.tokens),
100
- semanticTokens: mergeSemanticTokens(a.semanticTokens, b.semanticTokens),
101
- ...(defaults ? { defaults } : {}),
102
- };
103
- }
104
- /**
105
- * Merges N `ThemeConfig`s, folding left-to-right so later themes override
106
- * earlier ones per key:
107
- *
108
- * ```ts
109
- * const config = extendTheme(materialDesignTheme, chakraUiTheme, {
110
- * semanticTokens: {
111
- * text: { display: { lg: { fontSize: 60, lineHeight: 68 } } },
112
- * },
113
- * });
114
- * ```
115
- */
116
- function extendTheme(...themes) {
117
- return themes.reduce(mergeThemeConfig);
118
- }
@@ -1,4 +0,0 @@
1
- export * from './config';
2
- export type { ColorMode, ColorModeStorage, ColorScheme, ThemedProviderProps, UseColorModeResult, UseThemedResult, } from './create-themed';
3
- export { createThemed } from './create-themed';
4
- export { createThemedStyles } from './create-themed-styles';
package/dist/cjs/index.js DELETED
@@ -1,22 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.createThemedStyles = exports.createThemed = void 0;
18
- __exportStar(require("./config"), exports);
19
- var create_themed_1 = require("./create-themed");
20
- Object.defineProperty(exports, "createThemed", { enumerable: true, get: function () { return create_themed_1.createThemed; } });
21
- var create_themed_styles_1 = require("./create-themed-styles");
22
- Object.defineProperty(exports, "createThemedStyles", { enumerable: true, get: function () { return create_themed_styles_1.createThemedStyles; } });
@@ -1 +0,0 @@
1
- {"type":"commonjs"}
@@ -1,10 +0,0 @@
1
- import type { ThemeConfig } from '../types';
2
- export type ColorScheme = 'light' | 'dark';
3
- /**
4
- * `config.semanticTokens.colors` for one scheme, keeping its shape: groups
5
- * become group -> token -> string (`{ fg: { default: '#000' } }`) and
6
- * top-level colors a string (`{ primary: '#171717' }`). Semantic values are
7
- * already concrete strings in the config, so this only picks
8
- * `light`/`dark`.
9
- */
10
- export declare function resolveSemanticColors(config: ThemeConfig, scheme: ColorScheme): Record<string, string | Record<string, string>>;
@@ -1,26 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.resolveSemanticColors = resolveSemanticColors;
4
- const semantic_colors_1 = require("../semantic-colors");
5
- /**
6
- * `config.semanticTokens.colors` for one scheme, keeping its shape: groups
7
- * become group -> token -> string (`{ fg: { default: '#000' } }`) and
8
- * top-level colors a string (`{ primary: '#171717' }`). Semantic values are
9
- * already concrete strings in the config, so this only picks
10
- * `light`/`dark`.
11
- */
12
- function resolveSemanticColors(config, scheme) {
13
- const result = {};
14
- (0, semantic_colors_1.walkSemanticColors)(config.semanticTokens?.colors, (token, color, group) => {
15
- if (group === undefined) {
16
- result[token] = color[scheme];
17
- }
18
- else {
19
- if (result[group] === undefined)
20
- result[group] = {};
21
- const tokens = result[group];
22
- tokens[token.slice(group.length + 1)] = color[scheme];
23
- }
24
- });
25
- return result;
26
- }
@@ -1,20 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.RN_DEFAULT_FONT_SIZE = void 0;
4
- exports.resolveBaseFontSize = resolveBaseFontSize;
5
- /** React Native's own default `fontSize`. */
6
- exports.RN_DEFAULT_FONT_SIZE = 14;
7
- /**
8
- * `defaults.fontSize` as a number: a `tokens.fontSizes` key is looked up,
9
- * a raw number is used as-is, anything else falls back to RN's default.
10
- */
11
- function resolveBaseFontSize(config) {
12
- const base = config.defaults?.fontSize;
13
- if (typeof base === 'number')
14
- return base;
15
- const scale = config.tokens?.fontSizes;
16
- if (typeof base === 'string' && scale && Object.hasOwn(scale, base)) {
17
- return scale[base];
18
- }
19
- return exports.RN_DEFAULT_FONT_SIZE;
20
- }
@@ -1,21 +0,0 @@
1
- import type { ThemeConfig } from '../types';
2
- import type { ColorScheme } from './color-resolver';
3
- /**
4
- * Builds the resolver behind `themed.view()` / `text()` / `image()` for one
5
- * color scheme.
6
- *
7
- * Everything that doesn't depend on the input is done once here: a single
8
- * **prop → token table** lookup (`backgroundColor` → the primitive
9
- * `tokens.colors` plus the flattened `'group.token'` semantic colors for this
10
- * scheme, `padding` → `tokens.spacing`, …).
11
- * Each call then makes **one pass over the input's own keys** (usually a
12
- * handful), rather than scanning every token-aware prop name, and copies the
13
- * input at most once — or not at all when nothing is a token.
14
- *
15
- * Two props need the rest of the style, so they are applied after the pass:
16
- * - `lineHeight` tokens are ratios of the (resolved) `fontSize`, falling back
17
- * to `defaults.fontSize`;
18
- * - the virtual `shadow` prop expands last, so a preset wins over explicit
19
- * `shadow*` props, and the `shadow` key itself is removed.
20
- */
21
- export declare function createStyleResolver(config: ThemeConfig, scheme: ColorScheme): (input: object) => Record<string, unknown>;