@tamagui/core 1.0.1-beta.136 → 1.0.1-beta.139
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.
- package/dist/cjs/addTheme.js +74 -0
- package/dist/cjs/addTheme.js.map +7 -0
- package/dist/cjs/contexts/TextAncestorContext.js +44 -0
- package/dist/cjs/contexts/TextAncestorContext.js.map +7 -0
- package/dist/cjs/contexts/ThemeContext.js +30 -0
- package/dist/cjs/contexts/ThemeContext.js.map +7 -0
- package/dist/cjs/createComponent.js +10 -17
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/createTamagui.js +18 -118
- package/dist/cjs/createTamagui.js.map +2 -2
- package/dist/cjs/createTheme.js +2 -5
- package/dist/cjs/createTheme.js.map +2 -2
- package/dist/cjs/ensureThemeVariable.js +152 -0
- package/dist/cjs/ensureThemeVariable.js.map +7 -0
- package/dist/cjs/helpers/ThemeManager.js +209 -0
- package/dist/cjs/helpers/ThemeManager.js.map +7 -0
- package/dist/cjs/helpers/assignNativePropsToWeb.js +1 -0
- package/dist/cjs/helpers/assignNativePropsToWeb.js.map +2 -2
- package/dist/cjs/helpers/createPropMapper.js +2 -3
- package/dist/cjs/helpers/createPropMapper.js.map +2 -2
- package/dist/cjs/helpers/createTamaguiProvider.js +3 -1
- package/dist/cjs/helpers/createTamaguiProvider.js.map +2 -2
- package/dist/cjs/helpers/ensureThemeVariable.js +152 -0
- package/dist/cjs/helpers/ensureThemeVariable.js.map +7 -0
- package/dist/cjs/helpers/getSplitStyles.js +11 -2
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/getThemeCSSRules.js +98 -0
- package/dist/cjs/helpers/getThemeCSSRules.js.map +7 -0
- package/dist/cjs/helpers/getThemeCSSRules.native.js +31 -0
- package/dist/cjs/helpers/getThemeCSSRules.native.js.map +7 -0
- package/dist/cjs/helpers/getVariantExtras.js +6 -6
- package/dist/cjs/helpers/getVariantExtras.js.map +2 -2
- package/dist/cjs/helpers/insertStyleRule.js +6 -1
- package/dist/cjs/helpers/insertStyleRule.js.map +2 -2
- package/dist/cjs/helpers/mergeProps.js +18 -14
- package/dist/cjs/helpers/mergeProps.js.map +2 -2
- package/dist/cjs/helpers/themes.js +79 -0
- package/dist/cjs/helpers/themes.js.map +7 -0
- package/dist/cjs/hooks/useId.js +2 -32
- package/dist/cjs/hooks/useId.js.map +2 -2
- package/dist/cjs/hooks/useMedia.js +75 -92
- package/dist/cjs/hooks/useMedia.js.map +2 -2
- package/dist/cjs/hooks/useSafeRef.js +60 -0
- package/dist/cjs/hooks/useSafeRef.js.map +7 -0
- package/dist/cjs/hooks/useTheme.js +20 -11
- package/dist/cjs/hooks/useTheme.js.map +2 -2
- package/dist/cjs/index.js +23 -4
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/loadTheme.js +64 -0
- package/dist/cjs/loadTheme.js.map +7 -0
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/updateTheme.js +44 -0
- package/dist/cjs/updateTheme.js.map +7 -0
- package/dist/cjs/vendor/Pressability.js +32 -0
- package/dist/cjs/vendor/Pressability.js.map +7 -0
- package/dist/cjs/vendor/Pressability.native.js +32 -0
- package/dist/cjs/vendor/Pressability.native.js.map +7 -0
- package/dist/cjs/views/Slot.js +2 -2
- package/dist/cjs/views/Slot.js.map +2 -2
- package/dist/cjs/views/Theme.js +1 -1
- package/dist/cjs/views/Theme.js.map +2 -2
- package/dist/cjs/views/ThemeProvider.js +1 -1
- package/dist/cjs/views/ThemeProvider.js.map +1 -1
- package/dist/cjs/views/ThemeReset.js +1 -1
- package/dist/cjs/views/ThemeReset.js.map +1 -1
- package/dist/esm/addTheme.js +50 -0
- package/dist/esm/addTheme.js.map +7 -0
- package/dist/esm/contexts/TextAncestorContext.js +15 -0
- package/dist/esm/contexts/TextAncestorContext.js.map +7 -0
- package/dist/esm/contexts/ThemeContext.js +6 -0
- package/dist/esm/contexts/ThemeContext.js.map +7 -0
- package/dist/esm/createComponent.js +10 -17
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/createTamagui.js +17 -117
- package/dist/esm/createTamagui.js.map +2 -2
- package/dist/esm/createTheme.js +1 -3
- package/dist/esm/createTheme.js.map +2 -2
- package/dist/esm/ensureThemeVariable.js +125 -0
- package/dist/esm/ensureThemeVariable.js.map +7 -0
- package/dist/esm/helpers/ThemeManager.js +183 -0
- package/dist/esm/helpers/ThemeManager.js.map +7 -0
- package/dist/esm/helpers/assignNativePropsToWeb.js +1 -0
- package/dist/esm/helpers/assignNativePropsToWeb.js.map +2 -2
- package/dist/esm/helpers/createPropMapper.js +2 -3
- package/dist/esm/helpers/createPropMapper.js.map +2 -2
- package/dist/esm/helpers/createTamaguiProvider.js +3 -1
- package/dist/esm/helpers/createTamaguiProvider.js.map +2 -2
- package/dist/esm/helpers/ensureThemeVariable.js +125 -0
- package/dist/esm/helpers/ensureThemeVariable.js.map +7 -0
- package/dist/esm/helpers/getSplitStyles.js +11 -2
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getThemeCSSRules.js +74 -0
- package/dist/esm/helpers/getThemeCSSRules.js.map +7 -0
- package/dist/esm/helpers/getThemeCSSRules.native.js +7 -0
- package/dist/esm/helpers/getThemeCSSRules.native.js.map +7 -0
- package/dist/esm/helpers/getVariantExtras.js +6 -6
- package/dist/esm/helpers/getVariantExtras.js.map +2 -2
- package/dist/esm/helpers/insertStyleRule.js +6 -1
- package/dist/esm/helpers/insertStyleRule.js.map +2 -2
- package/dist/esm/helpers/mergeProps.js +18 -14
- package/dist/esm/helpers/mergeProps.js.map +2 -2
- package/dist/esm/helpers/themes.js +54 -0
- package/dist/esm/helpers/themes.js.map +7 -0
- package/dist/esm/hooks/useId.js +1 -28
- package/dist/esm/hooks/useId.js.map +2 -2
- package/dist/esm/hooks/useMedia.js +74 -92
- package/dist/esm/hooks/useMedia.js.map +2 -2
- package/dist/esm/hooks/useSafeRef.js +36 -0
- package/dist/esm/hooks/useSafeRef.js.map +7 -0
- package/dist/esm/hooks/useTheme.js +23 -11
- package/dist/esm/hooks/useTheme.js.map +2 -2
- package/dist/esm/index.js +23 -3
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/loadTheme.js +40 -0
- package/dist/esm/loadTheme.js.map +7 -0
- package/dist/esm/updateTheme.js +20 -0
- package/dist/esm/updateTheme.js.map +7 -0
- package/dist/esm/vendor/Pressability.js +7 -0
- package/dist/esm/vendor/Pressability.js.map +7 -0
- package/dist/esm/vendor/Pressability.native.js +7 -0
- package/dist/esm/vendor/Pressability.native.js.map +7 -0
- package/dist/esm/views/Slot.js +2 -2
- package/dist/esm/views/Slot.js.map +2 -2
- package/dist/esm/views/Theme.js +1 -1
- package/dist/esm/views/Theme.js.map +1 -1
- package/dist/esm/views/ThemeProvider.js +1 -1
- package/dist/esm/views/ThemeProvider.js.map +1 -1
- package/dist/esm/views/ThemeReset.js +1 -1
- package/dist/esm/views/ThemeReset.js.map +1 -1
- package/package.json +8 -8
- package/types/addTheme.d.ts +11 -0
- package/types/{views → contexts}/TextAncestorContext.d.ts +0 -0
- package/types/{ThemeContext.d.ts → contexts/ThemeContext.d.ts} +1 -1
- package/types/createTheme.d.ts +0 -1
- package/types/{ThemeManager.d.ts → helpers/ThemeManager.d.ts} +5 -5
- package/types/helpers/getSplitStyles.d.ts +1 -0
- package/types/helpers/getThemeCSSRules.d.ts +8 -0
- package/types/helpers/getThemeCSSRules.native.d.ts +2 -0
- package/types/helpers/mergeProps.d.ts +3 -1
- package/types/helpers/themes.d.ts +4 -0
- package/types/hooks/useId.d.ts +1 -8
- package/types/hooks/useMedia.d.ts +2 -1
- package/types/hooks/useSafeRef.d.ts +4 -0
- package/types/hooks/useTheme.d.ts +2 -1
- package/types/index.d.ts +5 -2
- package/types/types.d.ts +2 -2
- package/types/updateTheme.d.ts +9 -0
- package/types/{Pressability.d.ts → vendor/Pressability.d.ts} +0 -0
- package/types/{Pressability.native.d.ts → vendor/Pressability.native.d.ts} +0 -0
- package/types/views/Theme.d.ts +1 -1
- package/types/defaultComponentState.d.ts +0 -1
- package/types/helpers/nativeGestureHandler.native.d.ts +0 -2
|
@@ -22,15 +22,13 @@ __export(createTamagui_exports, {
|
|
|
22
22
|
});
|
|
23
23
|
module.exports = __toCommonJS(createTamagui_exports);
|
|
24
24
|
var import_conf = require("./conf");
|
|
25
|
-
var import_constants = require("./constants/constants");
|
|
26
25
|
var import_platform = require("./constants/platform");
|
|
27
|
-
var import_createTheme = require("./createTheme");
|
|
28
|
-
var import_createVariable = require("./createVariable");
|
|
29
26
|
var import_createVariables = require("./createVariables");
|
|
30
27
|
var import_createTamaguiProvider = require("./helpers/createTamaguiProvider");
|
|
28
|
+
var import_getThemeCSSRules = require("./helpers/getThemeCSSRules");
|
|
31
29
|
var import_insertStyleRule = require("./helpers/insertStyleRule");
|
|
32
30
|
var import_registerCSSVariable = require("./helpers/registerCSSVariable");
|
|
33
|
-
var
|
|
31
|
+
var import_themes = require("./helpers/themes");
|
|
34
32
|
var import_useMedia = require("./hooks/useMedia");
|
|
35
33
|
var import_insertFont = require("./insertFont");
|
|
36
34
|
var import_Tamagui = require("./Tamagui");
|
|
@@ -64,7 +62,7 @@ function createTamagui(config) {
|
|
|
64
62
|
})();
|
|
65
63
|
const themeConfig = (() => {
|
|
66
64
|
const themes = { ...config.themes };
|
|
67
|
-
|
|
65
|
+
let cssRuleSets = [];
|
|
68
66
|
if (import_platform.isWeb) {
|
|
69
67
|
let declarationsToRuleSet2 = function(decs, selector = "") {
|
|
70
68
|
return `:root${selector} {${sep}${[...decs].join(`;${sep}`)}${sep}}`;
|
|
@@ -89,17 +87,15 @@ function createTamagui(config) {
|
|
|
89
87
|
cssRuleSets.push(declarationsToRuleSet2(declarations));
|
|
90
88
|
if (fontDeclarations) {
|
|
91
89
|
for (const key in fontDeclarations) {
|
|
92
|
-
const { name, declarations: declarations2, language } = fontDeclarations[key];
|
|
93
|
-
const languageSelector = ` .t_lang-${name}-${language || "default"}`;
|
|
90
|
+
const { name, declarations: declarations2, language = "default" } = fontDeclarations[key];
|
|
94
91
|
const fontSelector = `.font_${name}`;
|
|
95
|
-
const
|
|
92
|
+
const langSelector = `:root .t_lang-${name}-${language} ${fontSelector}`;
|
|
93
|
+
const selectors = language === "default" ? ` ${fontSelector}, ${langSelector}` : langSelector;
|
|
96
94
|
const specificRuleSet = declarationsToRuleSet2(declarations2, selectors);
|
|
97
95
|
cssRuleSets.push(specificRuleSet);
|
|
98
96
|
}
|
|
99
97
|
}
|
|
100
98
|
}
|
|
101
|
-
const hasDarkLight = "light" in config.themes && "dark" in config.themes;
|
|
102
|
-
const CNP = `.${import_constants.THEME_CLASSNAME_PREFIX}`;
|
|
103
99
|
const dedupedThemes = {};
|
|
104
100
|
const existing = /* @__PURE__ */ new WeakMap();
|
|
105
101
|
for (const themeName in themes) {
|
|
@@ -110,108 +106,31 @@ function createTamagui(config) {
|
|
|
110
106
|
e.names.push(themeName);
|
|
111
107
|
continue;
|
|
112
108
|
}
|
|
113
|
-
const theme = { ...
|
|
109
|
+
const theme = { ...rawTheme };
|
|
114
110
|
for (const key in theme) {
|
|
115
|
-
ensureThemeVariable(theme, key);
|
|
111
|
+
(0, import_themes.ensureThemeVariable)(theme, key);
|
|
116
112
|
}
|
|
117
113
|
themes[themeName] = theme;
|
|
118
114
|
dedupedThemes[themeName] = {
|
|
119
115
|
names: [themeName],
|
|
120
116
|
theme
|
|
121
117
|
};
|
|
122
|
-
existing.set(
|
|
118
|
+
existing.set(rawTheme, dedupedThemes[themeName]);
|
|
123
119
|
}
|
|
124
120
|
if (import_platform.isWeb) {
|
|
125
121
|
for (const themeName in dedupedThemes) {
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
varToValMap[variable.variable] = variable.val;
|
|
135
|
-
}
|
|
136
|
-
if (variable.isFloating || !import_registerCSSVariable.tokensValueToVariable.has(variable.val)) {
|
|
137
|
-
value = variable.val;
|
|
138
|
-
} else {
|
|
139
|
-
value = import_registerCSSVariable.tokensValueToVariable.get(variable.val).variable;
|
|
140
|
-
}
|
|
141
|
-
vars += `--${themeKey}:${value};`;
|
|
142
|
-
}
|
|
143
|
-
const isDarkOrLightBase = themeName === "dark" || themeName === "light";
|
|
144
|
-
const selectors = names.map((name) => {
|
|
145
|
-
return `${CNP}${name}`;
|
|
146
|
-
});
|
|
147
|
-
if (hasDarkLight) {
|
|
148
|
-
for (const subName of names) {
|
|
149
|
-
const isDark = isDarkOrLightBase || subName.startsWith("dark_");
|
|
150
|
-
const childSelector = `${CNP}${subName.replace(isDark ? "dark_" : "light_", "")}`;
|
|
151
|
-
const order = isDark ? ["dark", "light"] : ["light", "dark"];
|
|
152
|
-
if (isDarkOrLightBase) {
|
|
153
|
-
order.reverse();
|
|
154
|
-
}
|
|
155
|
-
const [stronger, weaker] = order;
|
|
156
|
-
const max = config.maxDarkLightNesting ?? 3;
|
|
157
|
-
new Array(Math.round(max * 1.5)).fill(void 0).forEach((_, pi) => {
|
|
158
|
-
const isOdd = pi % 2 === 1;
|
|
159
|
-
if (isOdd && pi < 3)
|
|
160
|
-
return;
|
|
161
|
-
const parents = new Array(pi + 1).fill(void 0).map((_2, psi) => {
|
|
162
|
-
return `${CNP}${psi % 2 === 0 ? stronger : weaker}`;
|
|
163
|
-
});
|
|
164
|
-
let parentSelectors = parents.length > 1 ? parents.slice(1) : parents;
|
|
165
|
-
if (isOdd) {
|
|
166
|
-
const [_first, second, ...rest] = parentSelectors;
|
|
167
|
-
parentSelectors = [second, ...rest, second];
|
|
168
|
-
}
|
|
169
|
-
const lastParentSelector = parentSelectors[parentSelectors.length - 1];
|
|
170
|
-
selectors.push(`${parentSelectors.join(" ")} ${childSelector === lastParentSelector ? "" : childSelector}`);
|
|
171
|
-
});
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
const rootSep = config.themeClassNameOnRoot ? "" : " ";
|
|
175
|
-
const css2 = `${selectors.map((x) => `:root${rootSep}${x}`).join(", ")} {${vars}}`;
|
|
176
|
-
cssRuleSets.push(css2);
|
|
177
|
-
if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {
|
|
178
|
-
const isDark = themeName.startsWith("dark");
|
|
179
|
-
cssRuleSets.push(`@media(prefers-color-scheme: ${isDark ? "dark" : "light"}) {
|
|
180
|
-
body { background:${theme.background}; color: ${theme.color} }
|
|
181
|
-
:root {${vars} }
|
|
182
|
-
}`);
|
|
183
|
-
}
|
|
122
|
+
cssRuleSets = [
|
|
123
|
+
...cssRuleSets,
|
|
124
|
+
...(0, import_getThemeCSSRules.getThemeCSSRules)({
|
|
125
|
+
config,
|
|
126
|
+
themeName,
|
|
127
|
+
...dedupedThemes[themeName]
|
|
128
|
+
})
|
|
129
|
+
];
|
|
184
130
|
}
|
|
185
131
|
}
|
|
186
132
|
for (const themeName in themes) {
|
|
187
|
-
|
|
188
|
-
const parents = themeName.split("_").slice(0, -1).map((part) => {
|
|
189
|
-
cur.push(part);
|
|
190
|
-
return cur.join("_");
|
|
191
|
-
});
|
|
192
|
-
if (!parents.length)
|
|
193
|
-
continue;
|
|
194
|
-
const og = themes[themeName];
|
|
195
|
-
themes[themeName] = new Proxy(og, {
|
|
196
|
-
get(target, key) {
|
|
197
|
-
if (key === import_getThemeUnwrapped.GetThemeUnwrapped) {
|
|
198
|
-
return og;
|
|
199
|
-
}
|
|
200
|
-
if (Reflect.has(target, key)) {
|
|
201
|
-
return Reflect.get(target, key);
|
|
202
|
-
}
|
|
203
|
-
for (let i = parents.length - 1; i >= 0; i--) {
|
|
204
|
-
const parent = themes[parents[i]];
|
|
205
|
-
if (!parent) {
|
|
206
|
-
continue;
|
|
207
|
-
}
|
|
208
|
-
if (Reflect.has(parent, key)) {
|
|
209
|
-
return Reflect.get(parent, key);
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
return Reflect.get(target, key);
|
|
213
|
-
}
|
|
214
|
-
});
|
|
133
|
+
themes[themeName] = (0, import_themes.proxyThemeToParents)(themeName, themes[themeName], themes);
|
|
215
134
|
}
|
|
216
135
|
import_registerCSSVariable.tokensValueToVariable.clear();
|
|
217
136
|
Object.freeze(cssRuleSets);
|
|
@@ -268,25 +187,6 @@ const parseTokens = (tokens) => {
|
|
|
268
187
|
}
|
|
269
188
|
return res;
|
|
270
189
|
};
|
|
271
|
-
function ensureThemeVariable(theme, key) {
|
|
272
|
-
const val = theme[key];
|
|
273
|
-
const themeKey = key;
|
|
274
|
-
if (!(0, import_createVariable.isVariable)(val)) {
|
|
275
|
-
theme[key] = (0, import_createVariable.createVariable)({
|
|
276
|
-
key: themeKey,
|
|
277
|
-
name: themeKey,
|
|
278
|
-
val
|
|
279
|
-
});
|
|
280
|
-
} else {
|
|
281
|
-
if (val.name !== themeKey) {
|
|
282
|
-
theme[key] = (0, import_createVariable.createVariable)({
|
|
283
|
-
key: val.name,
|
|
284
|
-
name: themeKey,
|
|
285
|
-
val: val.val
|
|
286
|
-
});
|
|
287
|
-
}
|
|
288
|
-
}
|
|
289
|
-
}
|
|
290
190
|
// Annotate the CommonJS export names for ESM import in node:
|
|
291
191
|
0 && (module.exports = {
|
|
292
192
|
createTamagui
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createTamagui.ts"],
|
|
4
|
-
"sourcesContent": ["import { simpleHash } from '@tamagui/helpers'\n\nimport { configListeners, setConfig } from './conf'\nimport { THEME_CLASSNAME_PREFIX } from './constants/constants'\nimport { isWeb } from './constants/platform'\nimport { themeToVariableToValueMap } from './createTheme'\nimport { Variable, createVariable, isVariable } from './createVariable'\nimport { createVariables } from './createVariables'\nimport { createTamaguiProvider } from './helpers/createTamaguiProvider'\nimport { getFontLanguage } from './helpers/getFontLanguage'\nimport { getAtomicStyle } from './helpers/getStylesAtomic'\nimport { getAllRules } from './helpers/insertStyleRule'\nimport {\n registerCSSVariable,\n tokensValueToVariable,\n variableToCSS,\n} from './helpers/registerCSSVariable'\nimport { GetThemeUnwrapped } from './hooks/getThemeUnwrapped'\nimport { configureMedia } from './hooks/useMedia'\nimport { parseFont, registerFontVariables } from './insertFont'\nimport { Tamagui } from './Tamagui'\nimport { CreateTamaguiProps, InferTamaguiConfig, TamaguiInternalConfig, ThemeObject } from './types'\n\n// config is re-run by the @tamagui/static, dont double validate\nconst createdConfigs = new WeakMap<any, boolean>()\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n config: Conf\n): InferTamaguiConfig<Conf> {\n if (createdConfigs.has(config)) {\n return config as any\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (!config.tokens) {\n throw new Error(`Must define tokens`)\n }\n if (!config.themes) {\n throw new Error(`Must define themes`)\n }\n if (!config.fonts) {\n throw new Error(`Must define fonts`)\n }\n }\n\n configureMedia({\n queries: config.media as any,\n defaultActive: config.mediaQueryDefaultActive,\n })\n\n const fontTokens = createVariables(config.fonts!, '', true)\n const fontsParsed = (() => {\n const res = {} as typeof fontTokens\n for (const familyName in fontTokens) {\n res[`$${familyName}`] = parseFont(fontTokens[familyName])\n }\n return res!\n })()\n\n const themeConfig = (() => {\n const themes = { ...config.themes }\n const cssRuleSets: string[] = []\n\n if (isWeb) {\n const declarations: string[] = []\n const fontDeclarations: Record<\n string,\n { name: string; declarations: string[]; language?: string }\n > = {}\n\n for (const key in config.tokens) {\n for (const skey in config.tokens[key]) {\n const val = config.tokens[key][skey]\n registerCSSVariable(val)\n declarations.push(variableToCSS(val))\n }\n }\n\n for (const key in fontsParsed) {\n const fontParsed = fontsParsed[key]\n const [name, language] = key.includes('_') ? key.split('_') : [key]\n const fontVars = registerFontVariables(fontParsed)\n fontDeclarations[key] = { name: name.slice(1), declarations: fontVars, language }\n }\n\n const sep = process.env.NODE_ENV === 'development' ? config.cssStyleSeparator || ' ' : ''\n\n function declarationsToRuleSet(decs: string[], selector = '') {\n return `:root${selector} {${sep}${[...decs].join(`;${sep}`)}${sep}}`\n }\n\n // non-font\n cssRuleSets.push(declarationsToRuleSet(declarations))\n\n // fonts\n if (fontDeclarations) {\n for (const key in fontDeclarations) {\n const { name, declarations, language } = fontDeclarations[key]\n const languageSelector = ` .t_lang-${name}-${language || 'default'}`\n const fontSelector = `.font_${name}`\n const selectors = ` ${fontSelector}, :root ${languageSelector} ${fontSelector}`\n const specificRuleSet = declarationsToRuleSet(declarations, selectors)\n cssRuleSets.push(specificRuleSet)\n }\n }\n }\n\n // special case for SSR\n const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n const CNP = `.${THEME_CLASSNAME_PREFIX}`\n\n // dedupe themes to avoid duplicate CSS generation\n type DedupedTheme = {\n names: string[]\n theme: ThemeObject\n }\n const dedupedThemes: {\n [key: string]: DedupedTheme\n } = {}\n const existing = new WeakMap<ThemeObject, DedupedTheme>()\n\n // first, de-dupe and parse them\n for (const themeName in themes) {\n const rawTheme = themes[themeName]\n\n // if existing, avoid\n if (existing.has(rawTheme)) {\n const e = existing.get(rawTheme)!\n themes[themeName] = e.theme\n e.names.push(themeName)\n continue\n }\n\n // parse into variables\n const theme = { ...config.themes[themeName] }\n for (const key in theme) {\n // make sure properly names theme variables\n ensureThemeVariable(theme, key)\n }\n themes[themeName] = theme\n\n // set deduped\n dedupedThemes[themeName] = {\n names: [themeName],\n theme,\n }\n existing.set(config.themes[themeName], dedupedThemes[themeName])\n }\n\n // then, generate from de-duped\n if (isWeb) {\n for (const themeName in dedupedThemes) {\n const { theme, names } = dedupedThemes[themeName]\n let vars = ''\n\n themeToVariableToValueMap.set(theme, {})\n const varToValMap = themeToVariableToValueMap.get(theme)\n for (const themeKey in theme) {\n const variable = theme[themeKey] as Variable\n let value: any = null\n if (varToValMap) {\n varToValMap[variable.variable] = variable.val\n }\n if (variable.isFloating || !tokensValueToVariable.has(variable.val)) {\n value = variable.val\n } else {\n value = tokensValueToVariable.get(variable.val)!.variable\n }\n vars += `--${themeKey}:${value};`\n }\n\n const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'\n const selectors = names.map((name) => {\n return `${CNP}${name}`\n })\n\n // since we dont specify dark/light in classnames we have to do an awkward specificity war\n // use config.maxDarkLightNesting to determine how deep you can nest until it breaks\n if (hasDarkLight) {\n for (const subName of names) {\n const isDark = isDarkOrLightBase || subName.startsWith('dark_')\n const childSelector = `${CNP}${subName.replace(isDark ? 'dark_' : 'light_', '')}`\n const order = isDark ? ['dark', 'light'] : ['light', 'dark']\n if (isDarkOrLightBase) {\n order.reverse()\n }\n const [stronger, weaker] = order\n const max = config.maxDarkLightNesting ?? 3\n\n new Array(Math.round(max * 1.5)).fill(undefined).forEach((_, pi) => {\n const isOdd = pi % 2 === 1\n if (isOdd && pi < 3) return\n const parents = new Array(pi + 1).fill(undefined).map((_, psi) => {\n return `${CNP}${psi % 2 === 0 ? stronger : weaker}`\n })\n let parentSelectors = parents.length > 1 ? parents.slice(1) : parents\n if (isOdd) {\n const [_first, second, ...rest] = parentSelectors\n parentSelectors = [second, ...rest, second]\n }\n // avoid .t_light .t_light at the end (make sure child is unique from last parent)\n const lastParentSelector = parentSelectors[parentSelectors.length - 1]\n selectors.push(\n `${parentSelectors.join(' ')} ${\n childSelector === lastParentSelector ? '' : childSelector\n }`\n )\n })\n }\n }\n\n const rootSep = config.themeClassNameOnRoot ? '' : ' '\n const css = `${selectors.map((x) => `:root${rootSep}${x}`).join(', ')} {${vars}}`\n cssRuleSets.push(css)\n\n if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {\n // add media prefers for dark/light base\n const isDark = themeName.startsWith('dark')\n cssRuleSets.push(\n `@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {\n body { background:${theme.background}; color: ${theme.color} }\n :root {${vars} } \n }`\n )\n }\n }\n }\n\n // proxy upwards to get parent variables (themes are subset going down)\n for (const themeName in themes) {\n // we could test if this is better as just a straight object spread or fancier proxy\n const cur: string[] = []\n // if theme is dark_blue_alt1_Button\n // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1\"]\n const parents = themeName\n .split('_')\n .slice(0, -1)\n .map((part) => {\n cur.push(part)\n return cur.join('_')\n })\n\n if (!parents.length) continue\n\n // proxy fallback values to parent theme values\n const og = themes[themeName]\n themes[themeName] = new Proxy(og, {\n get(target, key) {\n if (key === GetThemeUnwrapped) {\n return og\n }\n if (Reflect.has(target, key)) {\n return Reflect.get(target, key)\n }\n // check parents\n for (let i = parents.length - 1; i >= 0; i--) {\n const parent = themes[parents[i]]\n if (!parent) {\n continue\n }\n if (Reflect.has(parent, key)) {\n return Reflect.get(parent, key)\n }\n }\n return Reflect.get(target, key)\n },\n })\n }\n\n tokensValueToVariable.clear()\n Object.freeze(cssRuleSets)\n const css = cssRuleSets.join('\\n')\n\n return {\n themes,\n cssRuleSets,\n css,\n }\n })()\n\n // faster lookups token keys become $keys to match input\n const tokensParsed: any = parseTokens(config.tokens)\n\n const getCSS = () => {\n return `${themeConfig.css}\\n${getAllRules().join('\\n')}`\n }\n\n const shorthands = config.shorthands || {}\n\n const next: TamaguiInternalConfig = {\n fontLanguages: [],\n defaultTheme: 'light',\n animations: {} as any,\n media: {},\n ...config,\n shorthands,\n inverseShorthands: shorthands\n ? Object.fromEntries(Object.entries(shorthands).map(([k, v]) => [v, k]))\n : {},\n themes: themeConfig.themes,\n fontsParsed,\n themeConfig,\n tokensParsed,\n parsed: true,\n getCSS,\n Provider: null as any,\n }\n\n next.Provider = createTamaguiProvider(next)\n\n setConfig(next)\n\n if (configListeners.size) {\n configListeners.forEach((cb) => cb(next))\n configListeners.clear()\n }\n\n createdConfigs.set(next, true)\n\n if (process.env.NODE_ENV === 'development') {\n if (!globalThis['Tamagui']) {\n globalThis['Tamagui'] = Tamagui\n }\n }\n\n // @ts-expect-error\n return next\n}\n\nconst parseTokens = (tokens: any) => {\n const res: any = {}\n for (const key in tokens) {\n res[key] = {}\n for (const skey in tokens[key]) {\n res[key][`$${skey}`] = tokens[key][skey]\n }\n }\n return res\n}\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nfunction ensureThemeVariable(theme: any, key: string) {\n const val = theme[key]\n const themeKey = key\n if (!isVariable(val)) {\n theme[key] = createVariable({\n key: themeKey,\n name: themeKey,\n val,\n })\n } else {\n if (val.name !== themeKey) {\n // rename to theme name\n theme[key] = createVariable({\n key: val.name,\n name: themeKey,\n val: val.val,\n })\n }\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { configListeners, setConfig } from './conf'\nimport { isWeb } from './constants/platform'\nimport { createVariables } from './createVariables'\nimport { createTamaguiProvider } from './helpers/createTamaguiProvider'\nimport { getThemeCSSRules } from './helpers/getThemeCSSRules'\nimport { getAllRules } from './helpers/insertStyleRule'\nimport {\n registerCSSVariable,\n tokensValueToVariable,\n variableToCSS,\n} from './helpers/registerCSSVariable'\nimport { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'\nimport { configureMedia } from './hooks/useMedia'\nimport { parseFont, registerFontVariables } from './insertFont'\nimport { Tamagui } from './Tamagui'\nimport { CreateTamaguiProps, InferTamaguiConfig, TamaguiInternalConfig, ThemeObject } from './types'\n\n// config is re-run by the @tamagui/static, dont double validate\nconst createdConfigs = new WeakMap<any, boolean>()\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n config: Conf\n): InferTamaguiConfig<Conf> {\n if (createdConfigs.has(config)) {\n return config as any\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (!config.tokens) {\n throw new Error(`Must define tokens`)\n }\n if (!config.themes) {\n throw new Error(`Must define themes`)\n }\n if (!config.fonts) {\n throw new Error(`Must define fonts`)\n }\n }\n\n configureMedia({\n queries: config.media as any,\n defaultActive: config.mediaQueryDefaultActive,\n })\n\n const fontTokens = createVariables(config.fonts!, '', true)\n const fontsParsed = (() => {\n const res = {} as typeof fontTokens\n for (const familyName in fontTokens) {\n res[`$${familyName}`] = parseFont(fontTokens[familyName])\n }\n return res!\n })()\n\n const themeConfig = (() => {\n const themes = { ...config.themes }\n let cssRuleSets: string[] = []\n\n if (isWeb) {\n const declarations: string[] = []\n const fontDeclarations: Record<\n string,\n { name: string; declarations: string[]; language?: string }\n > = {}\n\n for (const key in config.tokens) {\n for (const skey in config.tokens[key]) {\n const val = config.tokens[key][skey]\n registerCSSVariable(val)\n declarations.push(variableToCSS(val))\n }\n }\n\n for (const key in fontsParsed) {\n const fontParsed = fontsParsed[key]\n const [name, language] = key.includes('_') ? key.split('_') : [key]\n const fontVars = registerFontVariables(fontParsed)\n fontDeclarations[key] = { name: name.slice(1), declarations: fontVars, language }\n }\n\n const sep = process.env.NODE_ENV === 'development' ? config.cssStyleSeparator || ' ' : ''\n\n function declarationsToRuleSet(decs: string[], selector = '') {\n return `:root${selector} {${sep}${[...decs].join(`;${sep}`)}${sep}}`\n }\n\n // non-font\n cssRuleSets.push(declarationsToRuleSet(declarations))\n\n // fonts\n if (fontDeclarations) {\n for (const key in fontDeclarations) {\n const { name, declarations, language = 'default' } = fontDeclarations[key]\n const fontSelector = `.font_${name}`\n const langSelector = `:root .t_lang-${name}-${language} ${fontSelector}`\n const selectors =\n language === 'default' ? ` ${fontSelector}, ${langSelector}` : langSelector\n const specificRuleSet = declarationsToRuleSet(declarations, selectors)\n cssRuleSets.push(specificRuleSet)\n }\n }\n }\n\n // dedupe themes to avoid duplicate CSS generation\n type DedupedTheme = {\n names: string[]\n theme: ThemeObject\n }\n const dedupedThemes: {\n [key: string]: DedupedTheme\n } = {}\n const existing = new WeakMap<ThemeObject, DedupedTheme>()\n\n // first, de-dupe and parse them\n for (const themeName in themes) {\n const rawTheme = themes[themeName]\n\n // if existing, avoid\n if (existing.has(rawTheme)) {\n const e = existing.get(rawTheme)!\n themes[themeName] = e.theme\n e.names.push(themeName)\n continue\n }\n\n // ensure each theme object unique for dedupe\n const theme = { ...rawTheme }\n // parse into variables\n for (const key in theme) {\n // make sure properly names theme variables\n ensureThemeVariable(theme, key)\n }\n themes[themeName] = theme\n\n // set deduped\n dedupedThemes[themeName] = {\n names: [themeName],\n theme,\n }\n existing.set(rawTheme, dedupedThemes[themeName])\n }\n\n // then, generate CSS from de-duped\n if (isWeb) {\n for (const themeName in dedupedThemes) {\n cssRuleSets = [\n ...cssRuleSets,\n ...getThemeCSSRules({\n config,\n themeName,\n ...dedupedThemes[themeName],\n }),\n ]\n }\n }\n\n // proxy upwards to get parent variables (themes are subset going down)\n for (const themeName in themes) {\n themes[themeName] = proxyThemeToParents(themeName, themes[themeName], themes)\n }\n\n tokensValueToVariable.clear()\n Object.freeze(cssRuleSets)\n const css = cssRuleSets.join('\\n')\n\n return {\n themes,\n cssRuleSets,\n css,\n }\n })()\n\n // faster lookups token keys become $keys to match input\n const tokensParsed: any = parseTokens(config.tokens)\n\n const getCSS = () => {\n return `${themeConfig.css}\\n${getAllRules().join('\\n')}`\n }\n\n const shorthands = config.shorthands || {}\n\n const next: TamaguiInternalConfig = {\n fontLanguages: [],\n defaultTheme: 'light',\n animations: {} as any,\n media: {},\n ...config,\n shorthands,\n inverseShorthands: shorthands\n ? Object.fromEntries(Object.entries(shorthands).map(([k, v]) => [v, k]))\n : {},\n themes: themeConfig.themes,\n fontsParsed,\n themeConfig,\n tokensParsed,\n parsed: true,\n getCSS,\n Provider: null as any,\n }\n\n next.Provider = createTamaguiProvider(next)\n\n setConfig(next)\n\n if (configListeners.size) {\n configListeners.forEach((cb) => cb(next))\n configListeners.clear()\n }\n\n createdConfigs.set(next, true)\n\n if (process.env.NODE_ENV === 'development') {\n if (!globalThis['Tamagui']) {\n globalThis['Tamagui'] = Tamagui\n }\n }\n\n // @ts-expect-error\n return next\n}\n\nconst parseTokens = (tokens: any) => {\n const res: any = {}\n for (const key in tokens) {\n res[key] = {}\n for (const skey in tokens[key]) {\n res[key][`$${skey}`] = tokens[key][skey]\n }\n }\n return res\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/createTheme.js
CHANGED
|
@@ -18,17 +18,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
19
|
var createTheme_exports = {};
|
|
20
20
|
__export(createTheme_exports, {
|
|
21
|
-
createTheme: () => createTheme
|
|
22
|
-
themeToVariableToValueMap: () => themeToVariableToValueMap
|
|
21
|
+
createTheme: () => createTheme
|
|
23
22
|
});
|
|
24
23
|
module.exports = __toCommonJS(createTheme_exports);
|
|
25
|
-
const themeToVariableToValueMap = /* @__PURE__ */ new WeakMap();
|
|
26
24
|
const createTheme = (theme) => {
|
|
27
25
|
return theme;
|
|
28
26
|
};
|
|
29
27
|
// Annotate the CommonJS export names for ESM import in node:
|
|
30
28
|
0 && (module.exports = {
|
|
31
|
-
createTheme
|
|
32
|
-
themeToVariableToValueMap
|
|
29
|
+
createTheme
|
|
33
30
|
});
|
|
34
31
|
//# sourceMappingURL=createTheme.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createTheme.ts"],
|
|
4
|
-
"sourcesContent": ["import { Variable } from './createVariable'\n\ntype GenericTheme = { [key: string]: string | Variable }\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { Variable } from './createVariable'\n\ntype GenericTheme = { [key: string]: string | Variable }\n\n// export const themeToVariableToValueMap = new WeakMap<any, Record<string, string>>()\n\nexport const createTheme = <Theme extends GenericTheme>(\n theme: Theme\n): {\n [K in keyof Theme]: Theme[K] | string | Variable\n} => {\n return theme\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMO,MAAM,cAAc,CACzB,UAGG;AACH,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var ensureThemeVariable_exports = {};
|
|
20
|
+
__export(ensureThemeVariable_exports, {
|
|
21
|
+
ensureThemeVariable: () => ensureThemeVariable,
|
|
22
|
+
getThemeCSSRules: () => getThemeCSSRules,
|
|
23
|
+
proxyThemeToParents: () => proxyThemeToParents,
|
|
24
|
+
themes: () => themes
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(ensureThemeVariable_exports);
|
|
27
|
+
var import_constants = require("./constants/constants");
|
|
28
|
+
var import_createVariable = require("./createVariable");
|
|
29
|
+
var import_registerCSSVariable = require("./helpers/registerCSSVariable");
|
|
30
|
+
var import_getThemeUnwrapped = require("./hooks/getThemeUnwrapped");
|
|
31
|
+
const themes = {};
|
|
32
|
+
function ensureThemeVariable(theme, key) {
|
|
33
|
+
const val = theme[key];
|
|
34
|
+
const themeKey = key;
|
|
35
|
+
if (!(0, import_createVariable.isVariable)(val)) {
|
|
36
|
+
theme[key] = (0, import_createVariable.createVariable)({
|
|
37
|
+
key: themeKey,
|
|
38
|
+
name: themeKey,
|
|
39
|
+
val
|
|
40
|
+
});
|
|
41
|
+
} else {
|
|
42
|
+
if (val.name !== themeKey) {
|
|
43
|
+
theme[key] = (0, import_createVariable.createVariable)({
|
|
44
|
+
key: val.name,
|
|
45
|
+
name: themeKey,
|
|
46
|
+
val: val.val
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
function proxyThemeToParents(themeName, themes2) {
|
|
52
|
+
const cur = [];
|
|
53
|
+
const parents = themeName.split("_").slice(0, -1).map((part) => {
|
|
54
|
+
cur.push(part);
|
|
55
|
+
return cur.join("_");
|
|
56
|
+
});
|
|
57
|
+
if (!parents.length) {
|
|
58
|
+
return themes2[themeName];
|
|
59
|
+
}
|
|
60
|
+
const og = themes2[themeName];
|
|
61
|
+
return new Proxy(og, {
|
|
62
|
+
get(target, key) {
|
|
63
|
+
if (key === import_getThemeUnwrapped.GetThemeUnwrapped) {
|
|
64
|
+
return og;
|
|
65
|
+
}
|
|
66
|
+
if (Reflect.has(target, key)) {
|
|
67
|
+
return Reflect.get(target, key);
|
|
68
|
+
}
|
|
69
|
+
for (let i = parents.length - 1; i >= 0; i--) {
|
|
70
|
+
const parent = themes2[parents[i]];
|
|
71
|
+
if (!parent) {
|
|
72
|
+
continue;
|
|
73
|
+
}
|
|
74
|
+
if (Reflect.has(parent, key)) {
|
|
75
|
+
return Reflect.get(parent, key);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
return Reflect.get(target, key);
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
function getThemeCSSRules({
|
|
83
|
+
config,
|
|
84
|
+
themeName,
|
|
85
|
+
theme,
|
|
86
|
+
names
|
|
87
|
+
}) {
|
|
88
|
+
const cssRuleSets = [];
|
|
89
|
+
const hasDarkLight = "light" in config.themes && "dark" in config.themes;
|
|
90
|
+
const CNP = `.${import_constants.THEME_CLASSNAME_PREFIX}`;
|
|
91
|
+
let vars = "";
|
|
92
|
+
for (const themeKey in theme) {
|
|
93
|
+
const variable = theme[themeKey];
|
|
94
|
+
let value = null;
|
|
95
|
+
if (variable.isFloating || !import_registerCSSVariable.tokensValueToVariable.has(variable.val)) {
|
|
96
|
+
value = variable.val;
|
|
97
|
+
} else {
|
|
98
|
+
value = import_registerCSSVariable.tokensValueToVariable.get(variable.val).variable;
|
|
99
|
+
}
|
|
100
|
+
vars += `--${themeKey}:${value};`;
|
|
101
|
+
}
|
|
102
|
+
const isDarkOrLightBase = themeName === "dark" || themeName === "light";
|
|
103
|
+
const selectors = names.map((name) => {
|
|
104
|
+
return `${CNP}${name}`;
|
|
105
|
+
});
|
|
106
|
+
if (hasDarkLight) {
|
|
107
|
+
for (const subName of names) {
|
|
108
|
+
const isDark = isDarkOrLightBase || subName.startsWith("dark_");
|
|
109
|
+
const childSelector = `${CNP}${subName.replace(isDark ? "dark_" : "light_", "")}`;
|
|
110
|
+
const order = isDark ? ["dark", "light"] : ["light", "dark"];
|
|
111
|
+
if (isDarkOrLightBase) {
|
|
112
|
+
order.reverse();
|
|
113
|
+
}
|
|
114
|
+
const [stronger, weaker] = order;
|
|
115
|
+
const max = config.maxDarkLightNesting ?? 3;
|
|
116
|
+
new Array(Math.round(max * 1.5)).fill(void 0).forEach((_, pi) => {
|
|
117
|
+
const isOdd = pi % 2 === 1;
|
|
118
|
+
if (isOdd && pi < 3)
|
|
119
|
+
return;
|
|
120
|
+
const parents = new Array(pi + 1).fill(void 0).map((_2, psi) => {
|
|
121
|
+
return `${CNP}${psi % 2 === 0 ? stronger : weaker}`;
|
|
122
|
+
});
|
|
123
|
+
let parentSelectors = parents.length > 1 ? parents.slice(1) : parents;
|
|
124
|
+
if (isOdd) {
|
|
125
|
+
const [_first, second, ...rest] = parentSelectors;
|
|
126
|
+
parentSelectors = [second, ...rest, second];
|
|
127
|
+
}
|
|
128
|
+
const lastParentSelector = parentSelectors[parentSelectors.length - 1];
|
|
129
|
+
selectors.push(`${parentSelectors.join(" ")} ${childSelector === lastParentSelector ? "" : childSelector}`);
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
const rootSep = config.themeClassNameOnRoot ? "" : " ";
|
|
134
|
+
const css = `${selectors.map((x) => `:root${rootSep}${x}`).join(", ")} {${vars}}`;
|
|
135
|
+
cssRuleSets.push(css);
|
|
136
|
+
if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {
|
|
137
|
+
const isDark = themeName.startsWith("dark");
|
|
138
|
+
cssRuleSets.push(`@media(prefers-color-scheme: ${isDark ? "dark" : "light"}) {
|
|
139
|
+
body { background:${theme.background}; color: ${theme.color} }
|
|
140
|
+
:root {${vars} }
|
|
141
|
+
}`);
|
|
142
|
+
}
|
|
143
|
+
return cssRuleSets;
|
|
144
|
+
}
|
|
145
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
146
|
+
0 && (module.exports = {
|
|
147
|
+
ensureThemeVariable,
|
|
148
|
+
getThemeCSSRules,
|
|
149
|
+
proxyThemeToParents,
|
|
150
|
+
themes
|
|
151
|
+
});
|
|
152
|
+
//# sourceMappingURL=ensureThemeVariable.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/ensureThemeVariable.ts"],
|
|
4
|
+
"sourcesContent": ["import { THEME_CLASSNAME_PREFIX } from './constants/constants'\nimport { Variable, createVariable, isVariable } from './createVariable'\nimport { tokensValueToVariable } from './helpers/registerCSSVariable'\nimport { GetThemeUnwrapped } from './hooks/getThemeUnwrapped'\nimport { CreateTamaguiProps, ThemeObject } from './types'\n\nexport const themes = {}\n// mutates, freeze after\n// shared by createTamagui so extracted here\nexport function ensureThemeVariable(theme: any, key: string) {\n const val = theme[key]\n const themeKey = key\n if (!isVariable(val)) {\n theme[key] = createVariable({\n key: themeKey,\n name: themeKey,\n val,\n })\n } else {\n if (val.name !== themeKey) {\n // rename to theme name\n theme[key] = createVariable({\n key: val.name,\n name: themeKey,\n val: val.val,\n })\n }\n }\n}\nexport function proxyThemeToParents(themeName: string, themes: CreateTamaguiProps['themes']) {\n // we could test if this is better as just a straight object spread or fancier proxy\n const cur: string[] = []\n // if theme is dark_blue_alt1_Button\n // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1\"]\n const parents = themeName\n .split('_')\n .slice(0, -1)\n .map((part) => {\n cur.push(part)\n return cur.join('_')\n })\n\n if (!parents.length) {\n return themes[themeName]\n }\n\n // proxy fallback values to parent theme values\n const og = themes[themeName]\n return new Proxy(og, {\n get(target, key) {\n if (key === GetThemeUnwrapped) {\n return og\n }\n if (Reflect.has(target, key)) {\n return Reflect.get(target, key)\n }\n // check parents\n for (let i = parents.length - 1; i >= 0; i--) {\n const parent = themes[parents[i]]\n if (!parent) {\n continue\n }\n if (Reflect.has(parent, key)) {\n return Reflect.get(parent, key)\n }\n }\n return Reflect.get(target, key)\n },\n })\n}\nexport function getThemeCSSRules({\n config,\n themeName,\n theme,\n names,\n}: {\n config: CreateTamaguiProps\n themeName: string\n theme: ThemeObject\n names: string[]\n}) {\n const cssRuleSets: string[] = []\n\n // special case for SSR\n const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n const CNP = `.${THEME_CLASSNAME_PREFIX}`\n let vars = ''\n\n // themeToVariableToValueMap.set(theme, {})\n // const varToValMap = themeToVariableToValueMap.get(theme)\n for (const themeKey in theme) {\n const variable = theme[themeKey] as Variable\n let value: any = null\n // if (varToValMap) {\n // varToValMap[variable.variable] = variable.val\n // }\n if (variable.isFloating || !tokensValueToVariable.has(variable.val)) {\n value = variable.val\n } else {\n value = tokensValueToVariable.get(variable.val)!.variable\n }\n vars += `--${themeKey}:${value};`\n }\n\n const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'\n const selectors = names.map((name) => {\n return `${CNP}${name}`\n })\n\n // since we dont specify dark/light in classnames we have to do an awkward specificity war\n // use config.maxDarkLightNesting to determine how deep you can nest until it breaks\n if (hasDarkLight) {\n for (const subName of names) {\n const isDark = isDarkOrLightBase || subName.startsWith('dark_')\n const childSelector = `${CNP}${subName.replace(isDark ? 'dark_' : 'light_', '')}`\n const order = isDark ? ['dark', 'light'] : ['light', 'dark']\n if (isDarkOrLightBase) {\n order.reverse()\n }\n const [stronger, weaker] = order\n const max = config.maxDarkLightNesting ?? 3\n\n new Array(Math.round(max * 1.5)).fill(undefined).forEach((_, pi) => {\n const isOdd = pi % 2 === 1\n if (isOdd && pi < 3) return\n const parents = new Array(pi + 1).fill(undefined).map((_, psi) => {\n return `${CNP}${psi % 2 === 0 ? stronger : weaker}`\n })\n let parentSelectors = parents.length > 1 ? parents.slice(1) : parents\n if (isOdd) {\n const [_first, second, ...rest] = parentSelectors\n parentSelectors = [second, ...rest, second]\n }\n // avoid .t_light .t_light at the end (make sure child is unique from last parent)\n const lastParentSelector = parentSelectors[parentSelectors.length - 1]\n selectors.push(\n `${parentSelectors.join(' ')} ${\n childSelector === lastParentSelector ? '' : childSelector\n }`\n )\n })\n }\n }\n\n const rootSep = config.themeClassNameOnRoot ? '' : ' '\n const css = `${selectors.map((x) => `:root${rootSep}${x}`).join(', ')} {${vars}}`\n cssRuleSets.push(css)\n\n if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {\n // add media prefers for dark/light base\n const isDark = themeName.startsWith('dark')\n cssRuleSets.push(\n `@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {\nbody { background:${theme.background}; color: ${theme.color} }\n:root {${vars} } \n}`\n )\n }\n\n return cssRuleSets\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|