@tamagui/web 3.0.0-beta.1169.1 → 3.0.0-beta.1177.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.
|
@@ -46,13 +46,15 @@ function getThemeCSSRules(props) {
|
|
|
46
46
|
const isLightBase = themeName === "light";
|
|
47
47
|
const baseSelectors = names.map((name) => `${CNP}${name}`);
|
|
48
48
|
const selectorsSet = new Set(isDarkBase || isLightBase ? baseSelectors : []);
|
|
49
|
+
const selectorScheme = /* @__PURE__ */ new Map();
|
|
49
50
|
for (const name of names) selectorsSet.add(`${CNP}${name}:not(#t_theme_full_name)`);
|
|
50
51
|
if (hasDarkLight) {
|
|
51
52
|
const maxDepth = 2;
|
|
52
53
|
for (const subName of names) {
|
|
53
|
-
const
|
|
54
|
-
const
|
|
55
|
-
|
|
54
|
+
const hasDarkPrefix = subName === "dark" || subName.startsWith("dark_");
|
|
55
|
+
const hasLightPrefix = subName === "light" || subName.startsWith("light_");
|
|
56
|
+
const isDark = hasDarkPrefix || !hasLightPrefix && isDarkBase;
|
|
57
|
+
if (!(isDark || hasLightPrefix || !hasDarkPrefix && isLightBase)) {
|
|
56
58
|
selectorsSet.add(`${CNP}${subName}`);
|
|
57
59
|
continue;
|
|
58
60
|
}
|
|
@@ -75,8 +77,9 @@ function getThemeCSSRules(props) {
|
|
|
75
77
|
];
|
|
76
78
|
}
|
|
77
79
|
const nextChildSelector = childSelector === parentSelectors[parentSelectors.length - 1] ? "" : childSelector;
|
|
78
|
-
const
|
|
79
|
-
selectorsSet.add(
|
|
80
|
+
const selector = `${parentSelectors.join(" ")} ${nextChildSelector}`;
|
|
81
|
+
selectorsSet.add(selector);
|
|
82
|
+
selectorScheme.set(selector, isDark ? "dark" : "light");
|
|
80
83
|
}
|
|
81
84
|
}
|
|
82
85
|
}
|
|
@@ -88,26 +91,33 @@ function getThemeCSSRules(props) {
|
|
|
88
91
|
}).join(", ") + `, .tm_xxt`} {${vars}}`;
|
|
89
92
|
cssRuleSets.push(css);
|
|
90
93
|
if ((0, import_config.getSetting)("shouldAddPrefersColorThemes")) {
|
|
91
|
-
const
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
if (x
|
|
95
|
-
if (
|
|
96
|
-
return
|
|
97
|
-
}
|
|
98
|
-
const
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
94
|
+
const schemeOf = (x) => {
|
|
95
|
+
if (x === darkSelector) return "dark";
|
|
96
|
+
if (x === lightSelector) return "light";
|
|
97
|
+
if (x.startsWith(`${darkSelector} `)) return "dark";
|
|
98
|
+
if (x.startsWith(`${lightSelector} `)) return "light";
|
|
99
|
+
return selectorScheme.get(x);
|
|
100
|
+
};
|
|
101
|
+
for (const baseName of lightDark) {
|
|
102
|
+
const lessSpecificSelectors = selectors.map((x) => {
|
|
103
|
+
if (x === darkSelector || x === lightSelector) return schemeOf(x) === baseName ? ":root" : void 0;
|
|
104
|
+
const scheme = schemeOf(x);
|
|
105
|
+
if (scheme && scheme !== baseName) return;
|
|
106
|
+
return x.replace(/^\.t_(dark|light) /, "").trim();
|
|
107
|
+
}).filter(Boolean).join(", ");
|
|
108
|
+
if (!lessSpecificSelectors) continue;
|
|
109
|
+
const isBase = !themeName.includes("_");
|
|
110
|
+
let bodyRulesString = "";
|
|
111
|
+
if (isBase && themeName === baseName) {
|
|
112
|
+
const bgString = theme.background ? `background:${(0, import_createVariable.variableToString)(theme.background)};` : "";
|
|
113
|
+
const fgString = theme.color ? `color:${(0, import_createVariable.variableToString)(theme.color)}` : "";
|
|
114
|
+
bodyRulesString = bgString || fgString ? `body{${bgString}${fgString}}
|
|
104
115
|
` : "";
|
|
116
|
+
}
|
|
117
|
+
cssRuleSets.push(`@media(prefers-color-scheme:${baseName}){
|
|
118
|
+
${bodyRulesString}${lessSpecificSelectors} {${vars}}
|
|
119
|
+
}`);
|
|
105
120
|
}
|
|
106
|
-
const themeRules = `${lessSpecificSelectors} {${vars}}`;
|
|
107
|
-
const prefersMediaSelectors = `@media(prefers-color-scheme:${baseName}){
|
|
108
|
-
${bodyRulesString}${themeRules}
|
|
109
|
-
}`;
|
|
110
|
-
cssRuleSets.push(prefersMediaSelectors);
|
|
111
121
|
}
|
|
112
122
|
const selectionStyles = (0, import_config.getSetting)("selectionStyles");
|
|
113
123
|
if (selectionStyles) {
|
|
@@ -24,13 +24,15 @@ function getThemeCSSRules(props) {
|
|
|
24
24
|
const isLightBase = themeName === "light";
|
|
25
25
|
const baseSelectors = names.map((name) => `${CNP}${name}`);
|
|
26
26
|
const selectorsSet = new Set(isDarkBase || isLightBase ? baseSelectors : []);
|
|
27
|
+
const selectorScheme = /* @__PURE__ */ new Map();
|
|
27
28
|
for (const name of names) selectorsSet.add(`${CNP}${name}:not(#t_theme_full_name)`);
|
|
28
29
|
if (hasDarkLight) {
|
|
29
30
|
const maxDepth = 2;
|
|
30
31
|
for (const subName of names) {
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
|
|
32
|
+
const hasDarkPrefix = subName === "dark" || subName.startsWith("dark_");
|
|
33
|
+
const hasLightPrefix = subName === "light" || subName.startsWith("light_");
|
|
34
|
+
const isDark = hasDarkPrefix || !hasLightPrefix && isDarkBase;
|
|
35
|
+
if (!(isDark || hasLightPrefix || !hasDarkPrefix && isLightBase)) {
|
|
34
36
|
selectorsSet.add(`${CNP}${subName}`);
|
|
35
37
|
continue;
|
|
36
38
|
}
|
|
@@ -53,8 +55,9 @@ function getThemeCSSRules(props) {
|
|
|
53
55
|
];
|
|
54
56
|
}
|
|
55
57
|
const nextChildSelector = childSelector === parentSelectors[parentSelectors.length - 1] ? "" : childSelector;
|
|
56
|
-
const
|
|
57
|
-
selectorsSet.add(
|
|
58
|
+
const selector = `${parentSelectors.join(" ")} ${nextChildSelector}`;
|
|
59
|
+
selectorsSet.add(selector);
|
|
60
|
+
selectorScheme.set(selector, isDark ? "dark" : "light");
|
|
58
61
|
}
|
|
59
62
|
}
|
|
60
63
|
}
|
|
@@ -66,26 +69,33 @@ function getThemeCSSRules(props) {
|
|
|
66
69
|
}).join(", ") + `, .tm_xxt`} {${vars}}`;
|
|
67
70
|
cssRuleSets.push(css);
|
|
68
71
|
if (getSetting("shouldAddPrefersColorThemes")) {
|
|
69
|
-
const
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
if (x
|
|
73
|
-
if (
|
|
74
|
-
return
|
|
75
|
-
}
|
|
76
|
-
const
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
72
|
+
const schemeOf = (x) => {
|
|
73
|
+
if (x === darkSelector) return "dark";
|
|
74
|
+
if (x === lightSelector) return "light";
|
|
75
|
+
if (x.startsWith(`${darkSelector} `)) return "dark";
|
|
76
|
+
if (x.startsWith(`${lightSelector} `)) return "light";
|
|
77
|
+
return selectorScheme.get(x);
|
|
78
|
+
};
|
|
79
|
+
for (const baseName of lightDark) {
|
|
80
|
+
const lessSpecificSelectors = selectors.map((x) => {
|
|
81
|
+
if (x === darkSelector || x === lightSelector) return schemeOf(x) === baseName ? ":root" : void 0;
|
|
82
|
+
const scheme = schemeOf(x);
|
|
83
|
+
if (scheme && scheme !== baseName) return;
|
|
84
|
+
return x.replace(/^\.t_(dark|light) /, "").trim();
|
|
85
|
+
}).filter(Boolean).join(", ");
|
|
86
|
+
if (!lessSpecificSelectors) continue;
|
|
87
|
+
const isBase = !themeName.includes("_");
|
|
88
|
+
let bodyRulesString = "";
|
|
89
|
+
if (isBase && themeName === baseName) {
|
|
90
|
+
const bgString = theme.background ? `background:${variableToString(theme.background)};` : "";
|
|
91
|
+
const fgString = theme.color ? `color:${variableToString(theme.color)}` : "";
|
|
92
|
+
bodyRulesString = bgString || fgString ? `body{${bgString}${fgString}}
|
|
82
93
|
` : "";
|
|
94
|
+
}
|
|
95
|
+
cssRuleSets.push(`@media(prefers-color-scheme:${baseName}){
|
|
96
|
+
${bodyRulesString}${lessSpecificSelectors} {${vars}}
|
|
97
|
+
}`);
|
|
83
98
|
}
|
|
84
|
-
const themeRules = `${lessSpecificSelectors} {${vars}}`;
|
|
85
|
-
const prefersMediaSelectors = `@media(prefers-color-scheme:${baseName}){
|
|
86
|
-
${bodyRulesString}${themeRules}
|
|
87
|
-
}`;
|
|
88
|
-
cssRuleSets.push(prefersMediaSelectors);
|
|
89
99
|
}
|
|
90
100
|
const selectionStyles = getSetting("selectionStyles");
|
|
91
101
|
if (selectionStyles) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getThemeCSSRules.js","names":[],"sources":["esm/helpers/getThemeCSSRules.js"],"sourcesContent":["import { simpleHash } from \"@tamagui/helpers\";\nimport { getSetting } from \"../config\";\nimport { THEME_CLASSNAME_PREFIX } from \"../constants/constants\";\nimport { variableToString } from \"../createVariable\";\nimport { getOrCreateMutatedVariable, getOrCreateVariable } from \"./registerCSSVariable\";\nimport { sortString } from \"./sortString\";\n\nconst darkLight = [\"dark\", \"light\"];\nconst lightDark = [\"light\", \"dark\"];\nfunction getThemeCSSRules(props) {\n\tif (process.env.TAMAGUI_DID_OUTPUT_CSS) {} else if (!process.env.TAMAGUI_DOES_SSR_CSS || process.env.TAMAGUI_DOES_SSR_CSS === \"mutates-themes\" || process.env.TAMAGUI_DOES_SSR_CSS === \"false\") {\n\t\tconst cssRuleSets = [];\n\t\tconst { config, themeName, theme, names } = props;\n\t\tconst hasDarkLight = props.hasDarkLight ?? (config.themes && (\"light\" in config.themes || \"dark\" in config.themes));\n\t\tconst CNP = `.${THEME_CLASSNAME_PREFIX}`;\n\t\tlet vars = \"\";\n\t\tconst variableCreator = props.useMutatedVariables ? getOrCreateMutatedVariable : getOrCreateVariable;\n\t\tfor (const themeKey in theme) {\n\t\t\tconst variable = theme[themeKey];\n\t\t\tconst value = variableCreator(variable.needsPx ? `${variable.val}px` : variable.val).variable;\n\t\t\tvars += `--${process.env.TAMAGUI_CSS_VARIABLE_PREFIX || \"\"}${simpleHash(themeKey, 40)}:${value};`;\n\t\t}\n\t\tconst isDarkBase = themeName === \"dark\";\n\t\tconst isLightBase = themeName === \"light\";\n\t\tconst baseSelectors = names.map((name) => `${CNP}${name}`);\n\t\tconst selectorsSet = new Set(isDarkBase || isLightBase ? baseSelectors : []);\n\t\tfor (const name of names) selectorsSet.add(`${CNP}${name}:not(#t_theme_full_name)`);\n\t\tif (hasDarkLight) {\n\t\t\tconst maxDepth = 2;\n\t\t\tfor (const subName of names) {\n\t\t\t\tconst
|
|
1
|
+
{"version":3,"file":"getThemeCSSRules.js","names":[],"sources":["esm/helpers/getThemeCSSRules.js"],"sourcesContent":["import { simpleHash } from \"@tamagui/helpers\";\nimport { getSetting } from \"../config\";\nimport { THEME_CLASSNAME_PREFIX } from \"../constants/constants\";\nimport { variableToString } from \"../createVariable\";\nimport { getOrCreateMutatedVariable, getOrCreateVariable } from \"./registerCSSVariable\";\nimport { sortString } from \"./sortString\";\n\nconst darkLight = [\"dark\", \"light\"];\nconst lightDark = [\"light\", \"dark\"];\nfunction getThemeCSSRules(props) {\n\tif (process.env.TAMAGUI_DID_OUTPUT_CSS) {} else if (!process.env.TAMAGUI_DOES_SSR_CSS || process.env.TAMAGUI_DOES_SSR_CSS === \"mutates-themes\" || process.env.TAMAGUI_DOES_SSR_CSS === \"false\") {\n\t\tconst cssRuleSets = [];\n\t\tconst { config, themeName, theme, names } = props;\n\t\tconst hasDarkLight = props.hasDarkLight ?? (config.themes && (\"light\" in config.themes || \"dark\" in config.themes));\n\t\tconst CNP = `.${THEME_CLASSNAME_PREFIX}`;\n\t\tlet vars = \"\";\n\t\tconst variableCreator = props.useMutatedVariables ? getOrCreateMutatedVariable : getOrCreateVariable;\n\t\tfor (const themeKey in theme) {\n\t\t\tconst variable = theme[themeKey];\n\t\t\tconst value = variableCreator(variable.needsPx ? `${variable.val}px` : variable.val).variable;\n\t\t\tvars += `--${process.env.TAMAGUI_CSS_VARIABLE_PREFIX || \"\"}${simpleHash(themeKey, 40)}:${value};`;\n\t\t}\n\t\tconst isDarkBase = themeName === \"dark\";\n\t\tconst isLightBase = themeName === \"light\";\n\t\tconst baseSelectors = names.map((name) => `${CNP}${name}`);\n\t\tconst selectorsSet = new Set(isDarkBase || isLightBase ? baseSelectors : []);\n\t\tconst selectorScheme = /* @__PURE__ */ new Map();\n\t\tfor (const name of names) selectorsSet.add(`${CNP}${name}:not(#t_theme_full_name)`);\n\t\tif (hasDarkLight) {\n\t\t\tconst maxDepth = 2;\n\t\t\tfor (const subName of names) {\n\t\t\t\tconst hasDarkPrefix = subName === \"dark\" || subName.startsWith(\"dark_\");\n\t\t\t\tconst hasLightPrefix = subName === \"light\" || subName.startsWith(\"light_\");\n\t\t\t\tconst isDark = hasDarkPrefix || !hasLightPrefix && isDarkBase;\n\t\t\t\tif (!(isDark || hasLightPrefix || !hasDarkPrefix && isLightBase)) {\n\t\t\t\t\tselectorsSet.add(`${CNP}${subName}`);\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\tconst childSelector = `${CNP}${subName.replace(/^(dark|light)_/, \"\")}`;\n\t\t\t\tconst [stronger, weaker] = isDark ? darkLight : lightDark;\n\t\t\t\tconst numSelectors = Math.round(maxDepth * 1.5);\n\t\t\t\tfor (let depth = 0; depth < numSelectors; depth++) {\n\t\t\t\t\tconst isOdd = depth % 2 === 1;\n\t\t\t\t\tif (isOdd && depth < 3) continue;\n\t\t\t\t\tconst parents = new Array(depth + 1).fill(0).map((_, idx) => {\n\t\t\t\t\t\treturn `${CNP}${idx % 2 === 0 ? stronger : weaker}`;\n\t\t\t\t\t});\n\t\t\t\t\tlet parentSelectors = parents.length > 1 ? parents.slice(1) : parents;\n\t\t\t\t\tif (isOdd) {\n\t\t\t\t\t\tconst [_first, second, ...rest] = parentSelectors;\n\t\t\t\t\t\tparentSelectors = [\n\t\t\t\t\t\t\tsecond,\n\t\t\t\t\t\t\t...rest,\n\t\t\t\t\t\t\tsecond\n\t\t\t\t\t\t];\n\t\t\t\t\t}\n\t\t\t\t\tconst nextChildSelector = childSelector === parentSelectors[parentSelectors.length - 1] ? \"\" : childSelector;\n\t\t\t\t\tconst selector = `${parentSelectors.join(\" \")} ${nextChildSelector}`;\n\t\t\t\t\tselectorsSet.add(selector);\n\t\t\t\t\tselectorScheme.set(selector, isDark ? \"dark\" : \"light\");\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tconst selectors = [...selectorsSet].sort(sortString);\n\t\tconst css = `${selectors.map((x) => {\n\t\t\tconst addTo = getSetting(\"addThemeClassName\");\n\t\t\tif (!(isBaseTheme(x) && (addTo === \"html\" || addTo === \"body\"))) return `:root ${x}`;\n\t\t\treturn `${addTo === \"body\" ? \"body\" : \":root\"}${x}`;\n\t\t}).join(\", \") + `, .tm_xxt`} {${vars}}`;\n\t\tcssRuleSets.push(css);\n\t\tif (getSetting(\"shouldAddPrefersColorThemes\")) {\n\t\t\tconst schemeOf = (x) => {\n\t\t\t\tif (x === darkSelector) return \"dark\";\n\t\t\t\tif (x === lightSelector) return \"light\";\n\t\t\t\tif (x.startsWith(`${darkSelector} `)) return \"dark\";\n\t\t\t\tif (x.startsWith(`${lightSelector} `)) return \"light\";\n\t\t\t\treturn selectorScheme.get(x);\n\t\t\t};\n\t\t\tfor (const baseName of lightDark) {\n\t\t\t\tconst lessSpecificSelectors = selectors.map((x) => {\n\t\t\t\t\tif (x === darkSelector || x === lightSelector) return schemeOf(x) === baseName ? \":root\" : void 0;\n\t\t\t\t\tconst scheme = schemeOf(x);\n\t\t\t\t\tif (scheme && scheme !== baseName) return;\n\t\t\t\t\treturn x.replace(/^\\.t_(dark|light) /, \"\").trim();\n\t\t\t\t}).filter(Boolean).join(\", \");\n\t\t\t\tif (!lessSpecificSelectors) continue;\n\t\t\t\tconst isBase = !themeName.includes(\"_\");\n\t\t\t\tlet bodyRulesString = \"\";\n\t\t\t\tif (isBase && themeName === baseName) {\n\t\t\t\t\tconst bgString = theme.background ? `background:${variableToString(theme.background)};` : \"\";\n\t\t\t\t\tconst fgString = theme.color ? `color:${variableToString(theme.color)}` : \"\";\n\t\t\t\t\tbodyRulesString = bgString || fgString ? `body{${bgString}${fgString}}\n ` : \"\";\n\t\t\t\t}\n\t\t\t\tcssRuleSets.push(`@media(prefers-color-scheme:${baseName}){\n ${bodyRulesString}${lessSpecificSelectors} {${vars}}\n }`);\n\t\t\t}\n\t\t}\n\t\tconst selectionStyles = getSetting(\"selectionStyles\");\n\t\tif (selectionStyles) {\n\t\t\tconst rules = selectionStyles(theme);\n\t\t\tif (rules) {\n\t\t\t\tconst selectionSelectors = baseSelectors.map((s) => `${s} ::selection`).join(\", \");\n\t\t\t\tconst styles = Object.entries(rules).flatMap(([k, v]) => v ? `${k === \"backgroundColor\" ? \"background\" : k}:${variableToString(v)}` : []).join(\";\");\n\t\t\t\tif (styles) {\n\t\t\t\t\tconst css2 = `${selectionSelectors}{${styles}}`;\n\t\t\t\t\tcssRuleSets.push(css2);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn cssRuleSets;\n\t}\n\treturn [];\n}\nconst darkSelector = \".t_dark\";\nconst lightSelector = \".t_light\";\nconst isBaseTheme = (x) => x === darkSelector || x === lightSelector || x.startsWith(\".t_dark \") || x.startsWith(\".t_light \");\n\nexport { getThemeCSSRules };"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/web",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.1177.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Nate Wienert"
|
|
@@ -100,24 +100,24 @@
|
|
|
100
100
|
"test:web": "vitest --typecheck --run"
|
|
101
101
|
},
|
|
102
102
|
"dependencies": {
|
|
103
|
-
"@tamagui/animation-helpers": "3.0.0-beta.
|
|
104
|
-
"@tamagui/compose-refs": "3.0.0-beta.
|
|
105
|
-
"@tamagui/constants": "3.0.0-beta.
|
|
106
|
-
"@tamagui/dom": "3.0.0-beta.
|
|
107
|
-
"@tamagui/helpers": "3.0.0-beta.
|
|
108
|
-
"@tamagui/is-equal-shallow": "3.0.0-beta.
|
|
109
|
-
"@tamagui/native": "3.0.0-beta.
|
|
110
|
-
"@tamagui/normalize-css-color": "3.0.0-beta.
|
|
111
|
-
"@tamagui/react-native-types": "3.0.0-beta.
|
|
112
|
-
"@tamagui/style-grammar": "3.0.0-beta.
|
|
113
|
-
"@tamagui/timer": "3.0.0-beta.
|
|
114
|
-
"@tamagui/types": "3.0.0-beta.
|
|
115
|
-
"@tamagui/use-did-finish-ssr": "3.0.0-beta.
|
|
116
|
-
"@tamagui/use-event": "3.0.0-beta.
|
|
117
|
-
"@tamagui/use-force-update": "3.0.0-beta.
|
|
103
|
+
"@tamagui/animation-helpers": "3.0.0-beta.1177.1",
|
|
104
|
+
"@tamagui/compose-refs": "3.0.0-beta.1177.1",
|
|
105
|
+
"@tamagui/constants": "3.0.0-beta.1177.1",
|
|
106
|
+
"@tamagui/dom": "3.0.0-beta.1177.1",
|
|
107
|
+
"@tamagui/helpers": "3.0.0-beta.1177.1",
|
|
108
|
+
"@tamagui/is-equal-shallow": "3.0.0-beta.1177.1",
|
|
109
|
+
"@tamagui/native": "3.0.0-beta.1177.1",
|
|
110
|
+
"@tamagui/normalize-css-color": "3.0.0-beta.1177.1",
|
|
111
|
+
"@tamagui/react-native-types": "3.0.0-beta.1177.1",
|
|
112
|
+
"@tamagui/style-grammar": "3.0.0-beta.1177.1",
|
|
113
|
+
"@tamagui/timer": "3.0.0-beta.1177.1",
|
|
114
|
+
"@tamagui/types": "3.0.0-beta.1177.1",
|
|
115
|
+
"@tamagui/use-did-finish-ssr": "3.0.0-beta.1177.1",
|
|
116
|
+
"@tamagui/use-event": "3.0.0-beta.1177.1",
|
|
117
|
+
"@tamagui/use-force-update": "3.0.0-beta.1177.1"
|
|
118
118
|
},
|
|
119
119
|
"devDependencies": {
|
|
120
|
-
"@tamagui/build": "3.0.0-beta.
|
|
120
|
+
"@tamagui/build": "3.0.0-beta.1177.1",
|
|
121
121
|
"@testing-library/react": "^16.1.0",
|
|
122
122
|
"csstype": "^3.0.10",
|
|
123
123
|
"react": "19.2.3",
|
|
@@ -60,6 +60,7 @@ export function getThemeCSSRules(props: {
|
|
|
60
60
|
const isLightBase = themeName === 'light'
|
|
61
61
|
const baseSelectors = names.map((name) => `${CNP}${name}`)
|
|
62
62
|
const selectorsSet = new Set(isDarkBase || isLightBase ? baseSelectors : [])
|
|
63
|
+
const selectorScheme = new Map<string, 'light' | 'dark'>()
|
|
63
64
|
|
|
64
65
|
// The full resolved name is authoritative. `:not(#t_theme_full_name)` is
|
|
65
66
|
// an always-matching specificity anchor: a bounded relative selector for
|
|
@@ -78,8 +79,16 @@ export function getThemeCSSRules(props: {
|
|
|
78
79
|
const maxDepth = 2
|
|
79
80
|
|
|
80
81
|
for (const subName of names) {
|
|
81
|
-
|
|
82
|
-
|
|
82
|
+
// identical themes dedupe into one canonical name, and an alias can carry
|
|
83
|
+
// the opposite scheme to the name it deduped into: light_inverse IS dark,
|
|
84
|
+
// so it arrives here under themeName "dark". its own prefix therefore
|
|
85
|
+
// decides its scheme, and the base only answers for an unprefixed name.
|
|
86
|
+
// reading the base first pointed every cross-scheme alias at the wrong
|
|
87
|
+
// parent, which silently made <Theme name="inverse"> a no-op.
|
|
88
|
+
const hasDarkPrefix = subName === 'dark' || subName.startsWith('dark_')
|
|
89
|
+
const hasLightPrefix = subName === 'light' || subName.startsWith('light_')
|
|
90
|
+
const isDark = hasDarkPrefix || (!hasLightPrefix && isDarkBase)
|
|
91
|
+
const isLight = hasLightPrefix || (!hasDarkPrefix && isLightBase)
|
|
83
92
|
|
|
84
93
|
if (!(isDark || isLight)) {
|
|
85
94
|
// neither light nor dark subtheme, just generate one selector with :root:root which
|
|
@@ -117,7 +126,12 @@ export function getThemeCSSRules(props: {
|
|
|
117
126
|
|
|
118
127
|
// for light/dark/light:
|
|
119
128
|
const parentSelectorString = parentSelectors.join(' ')
|
|
120
|
-
|
|
129
|
+
const selector = `${parentSelectorString} ${nextChildSelector}`
|
|
130
|
+
selectorsSet.add(selector)
|
|
131
|
+
// remember which scheme's root this selector was built for, so the
|
|
132
|
+
// prefers-color-scheme pass below can route it. a theme carrying
|
|
133
|
+
// aliases from both schemes has to reach both media blocks.
|
|
134
|
+
selectorScheme.set(selector, isDark ? 'dark' : 'light')
|
|
121
135
|
}
|
|
122
136
|
}
|
|
123
137
|
}
|
|
@@ -139,38 +153,55 @@ export function getThemeCSSRules(props: {
|
|
|
139
153
|
cssRuleSets.push(css)
|
|
140
154
|
|
|
141
155
|
if (getSetting('shouldAddPrefersColorThemes')) {
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
})
|
|
155
|
-
.filter(Boolean)
|
|
156
|
-
.join(', ')
|
|
157
|
-
|
|
158
|
-
// only emit body background/color for base themes, not every sub-theme
|
|
159
|
-
const isBase = !themeName.includes('_')
|
|
160
|
-
let bodyRulesString = ''
|
|
161
|
-
if (isBase) {
|
|
162
|
-
const bgString = theme.background
|
|
163
|
-
? `background:${variableToString(theme.background)};`
|
|
164
|
-
: ''
|
|
165
|
-
const fgString = theme.color ? `color:${variableToString(theme.color)}` : ''
|
|
166
|
-
bodyRulesString = bgString || fgString ? `body{${bgString}${fgString}}\n ` : ''
|
|
156
|
+
// inside a media block the root carries no theme class, so the leading
|
|
157
|
+
// `.t_light `/`.t_dark ` is stripped and the block itself stands in for it.
|
|
158
|
+
// a theme reached under BOTH roots therefore has to emit into both blocks:
|
|
159
|
+
// light_inverse dedupes into dark, so the dark values it holds are what an
|
|
160
|
+
// implicitly-light root must serve, while dark's own values serve the dark
|
|
161
|
+
// one. keying the whole set off themeName dropped one of the two.
|
|
162
|
+
const schemeOf = (x: string) => {
|
|
163
|
+
if (x === darkSelector) return 'dark'
|
|
164
|
+
if (x === lightSelector) return 'light'
|
|
165
|
+
if (x.startsWith(`${darkSelector} `)) return 'dark'
|
|
166
|
+
if (x.startsWith(`${lightSelector} `)) return 'light'
|
|
167
|
+
return selectorScheme.get(x)
|
|
167
168
|
}
|
|
168
169
|
|
|
169
|
-
const
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
170
|
+
for (const baseName of lightDark) {
|
|
171
|
+
const lessSpecificSelectors = selectors
|
|
172
|
+
.map((x) => {
|
|
173
|
+
if (x === darkSelector || x === lightSelector) {
|
|
174
|
+
return schemeOf(x) === baseName ? ':root' : undefined
|
|
175
|
+
}
|
|
176
|
+
// a selector rooted in the other scheme is unreachable here: that
|
|
177
|
+
// root would have to carry an explicit class, which the non-media
|
|
178
|
+
// rules above already cover at higher specificity.
|
|
179
|
+
const scheme = schemeOf(x)
|
|
180
|
+
if (scheme && scheme !== baseName) return
|
|
181
|
+
return x.replace(/^\.t_(dark|light) /, '').trim()
|
|
182
|
+
})
|
|
183
|
+
.filter(Boolean)
|
|
184
|
+
.join(', ')
|
|
185
|
+
|
|
186
|
+
if (!lessSpecificSelectors) continue
|
|
187
|
+
|
|
188
|
+
// only emit body background/color for base themes, not every sub-theme,
|
|
189
|
+
// and only for the scheme this theme actually grounds
|
|
190
|
+
const isBase = !themeName.includes('_')
|
|
191
|
+
let bodyRulesString = ''
|
|
192
|
+
if (isBase && themeName === baseName) {
|
|
193
|
+
const bgString = theme.background
|
|
194
|
+
? `background:${variableToString(theme.background)};`
|
|
195
|
+
: ''
|
|
196
|
+
const fgString = theme.color ? `color:${variableToString(theme.color)}` : ''
|
|
197
|
+
bodyRulesString =
|
|
198
|
+
bgString || fgString ? `body{${bgString}${fgString}}\n ` : ''
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
cssRuleSets.push(`@media(prefers-color-scheme:${baseName}){
|
|
202
|
+
${bodyRulesString}${lessSpecificSelectors} {${vars}}
|
|
203
|
+
}`)
|
|
204
|
+
}
|
|
174
205
|
}
|
|
175
206
|
|
|
176
207
|
const selectionStyles = getSetting('selectionStyles')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getThemeCSSRules.d.ts","sourceRoot":"","sources":["../../src/helpers/getThemeCSSRules.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAY,MAAM,UAAU,CAAA;AAOzE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,MAAM,EAAE,kBAAkB,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,GAAG,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"getThemeCSSRules.d.ts","sourceRoot":"","sources":["../../src/helpers/getThemeCSSRules.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAY,MAAM,UAAU,CAAA;AAOzE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,MAAM,EAAE,kBAAkB,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,GAAG,MAAM,EAAE,CAkNX"}
|