@tamagui/core 1.0.0-alpha.6 → 1.0.0-alpha.7
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/createFont.js +4 -0
- package/dist/createFont.js.map +2 -2
- package/dist/createTamagui.js +7 -0
- package/dist/createTamagui.js.map +2 -2
- package/dist/createTokens.js +4 -0
- package/dist/createTokens.js.map +2 -2
- package/dist/helpers/validate.js +60 -0
- package/dist/helpers/validate.js.map +7 -0
- package/dist/helpers/validateConfig.js +46 -0
- package/dist/helpers/validateConfig.js.map +7 -0
- package/dist/helpers/validateTokens.js +29 -0
- package/dist/helpers/validateTokens.js.map +7 -0
- package/dist/index.cjs +81 -7
- package/dist/index.cjs.map +3 -3
- package/dist/views/Theme.js +8 -6
- package/dist/views/Theme.js.map +2 -2
- package/dist/views/ThemeManagerContext.js +7 -1
- package/dist/views/ThemeManagerContext.js.map +2 -2
- package/package.json +3 -2
- package/src/createFont.ts +5 -0
- package/src/createTamagui.ts +8 -0
- package/src/createTokens.ts +6 -1
- package/src/helpers/validate.ts +59 -0
- package/src/types.tsx +1 -0
- package/src/views/Theme.tsx +17 -7
- package/src/views/ThemeManagerContext.tsx +11 -1
- package/types.d.ts +1 -0
package/dist/createFont.js
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import { validateFont } from "./helpers/validate";
|
|
3
4
|
const createFont = /* @__PURE__ */ __name((font) => {
|
|
5
|
+
if (process.env.NODE_ENV === "development") {
|
|
6
|
+
validateFont(font);
|
|
7
|
+
}
|
|
4
8
|
const sizeKeys = Object.keys(font.size);
|
|
5
9
|
for (const key in font) {
|
|
6
10
|
if (key === "size" || key === "family")
|
package/dist/createFont.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/createFont.ts"],
|
|
4
|
-
"sourcesContent": ["import { GenericFont } from './types'\n\nexport const createFont = <A extends GenericFont>(font: A): A => {\n // fills in any missing values based on size keys being standard\n const sizeKeys = Object.keys(font.size)\n\n for (const key in font) {\n if (key === 'size' || key === 'family') continue\n const section = font[key]\n const keys = Object.keys(section)\n\n // fill with first filled in value to start\n let fillVal = section[keys[0]]\n\n for (const sKey of sizeKeys) {\n if (!(sKey in section)) {\n section[sKey] = fillVal\n } else {\n // if exists, set as the fillVal\n fillVal = section[sKey]\n }\n }\n }\n\n return Object.freeze(font)\n}\n"],
|
|
5
|
-
"mappings": ";;
|
|
4
|
+
"sourcesContent": ["import { validateFont } from './helpers/validate'\nimport { GenericFont } from './types'\n\nexport const createFont = <A extends GenericFont>(font: A): A => {\n if (process.env.NODE_ENV === 'development') {\n validateFont(font)\n }\n\n // fills in any missing values based on size keys being standard\n const sizeKeys = Object.keys(font.size)\n\n for (const key in font) {\n if (key === 'size' || key === 'family') continue\n const section = font[key]\n const keys = Object.keys(section)\n\n // fill with first filled in value to start\n let fillVal = section[keys[0]]\n\n for (const sKey of sizeKeys) {\n if (!(sKey in section)) {\n section[sKey] = fillVal\n } else {\n // if exists, set as the fillVal\n fillVal = section[sKey]\n }\n }\n }\n\n return Object.freeze(font)\n}\n"],
|
|
5
|
+
"mappings": ";;AAAA;AAGO,MAAM,aAAa,wBAAwB,SAAe;AAC/D,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,iBAAa;AAAA;AAIf,QAAM,WAAW,OAAO,KAAK,KAAK;AAElC,aAAW,OAAO,MAAM;AACtB,QAAI,QAAQ,UAAU,QAAQ;AAAU;AACxC,UAAM,UAAU,KAAK;AACrB,UAAM,OAAO,OAAO,KAAK;AAGzB,QAAI,UAAU,QAAQ,KAAK;AAE3B,eAAW,QAAQ,UAAU;AAC3B,UAAI,CAAE,SAAQ,UAAU;AACtB,gBAAQ,QAAQ;AAAA,aACX;AAEL,kBAAU,QAAQ;AAAA;AAAA;AAAA;AAKxB,SAAO,OAAO,OAAO;AAAA,GA1BG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/createTamagui.js
CHANGED
|
@@ -3,6 +3,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
|
|
|
3
3
|
import { getStyleRules } from "@tamagui/helpers";
|
|
4
4
|
import { Variable, createVariable, isVariable } from "./createVariable";
|
|
5
5
|
import { createTamaguiProvider } from "./helpers/createTamaguiProvider";
|
|
6
|
+
import { validateConfig } from "./helpers/validate";
|
|
6
7
|
import { configureMedia } from "./hooks/useMedia";
|
|
7
8
|
let conf;
|
|
8
9
|
const getHasConfigured = /* @__PURE__ */ __name(() => !!conf, "getHasConfigured");
|
|
@@ -17,6 +18,11 @@ const onConfiguredOnce = /* @__PURE__ */ __name((cb) => {
|
|
|
17
18
|
}, "onConfiguredOnce");
|
|
18
19
|
const PREFIX = `theme--`;
|
|
19
20
|
function createTamagui(config) {
|
|
21
|
+
if (process.env.NODE_ENV === "development") {
|
|
22
|
+
if (!config["parsed"]) {
|
|
23
|
+
validateConfig(config);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
20
26
|
if (conf) {
|
|
21
27
|
console.warn("Called createTamagui twice! Should never do so");
|
|
22
28
|
}
|
|
@@ -104,6 +110,7 @@ ${vars}
|
|
|
104
110
|
themeConfig,
|
|
105
111
|
themeParsed,
|
|
106
112
|
tokensParsed,
|
|
113
|
+
parsed: true,
|
|
107
114
|
getCSS() {
|
|
108
115
|
return `${themeConfig.css}
|
|
109
116
|
${[...getStyleRules()].join("\n")}`;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/createTamagui.ts"],
|
|
4
|
-
"sourcesContent": ["import { getStyleRules } from '@tamagui/helpers'\n\nimport { Variable, createVariable, isVariable } from './createVariable'\nimport { createTamaguiProvider } from './helpers/createTamaguiProvider'\nimport { configureMedia } from './hooks/useMedia'\nimport {\n CreateTamaguiConfig,\n GenericTamaguiConfig,\n MediaQueryKey,\n TamaguiInternalConfig,\n TamaguiProviderProps,\n} from './types'\n\nexport type CreateTamaguiProps = TamaguiProviderProps &\n // we omit and re-declare it because we need to allow instantation types to be flexible\n // user then re-defines the types after createTamagui returns the typed object they want\n Omit<GenericTamaguiConfig, 'themes'> & {\n themes: {\n [key: string]: {\n [key: string]: string | number | Variable\n }\n }\n // for ssr/native, will default to active\n mediaQueryDefaultActive?: MediaQueryKey[]\n }\n\nlet conf: TamaguiInternalConfig | null\n\nexport const getHasConfigured = () => !!conf\nexport const getTamaguiConfig = () => conf!\n\ntype ConfigListener = (conf: TamaguiInternalConfig) => void\nconst configListeners = new Set<ConfigListener>()\nexport const onConfiguredOnce = (cb: ConfigListener) => {\n if (conf) {\n cb(conf)\n } else {\n configListeners.add(cb)\n }\n}\n\nconst PREFIX = `theme--`\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n config: Conf\n): Conf extends CreateTamaguiConfig<infer A, infer B, infer C, infer D>\n ? TamaguiInternalConfig<A, B, C, D>\n : unknown {\n // test env loads a few times as it runs diff tests\n if (conf) {\n console.warn('Called createTamagui twice! Should never do so')\n // throw new Error(`#000 createTamagui called twice`)\n }\n\n configureMedia({\n queries: config.media as any,\n defaultActive: config.mediaQueryDefaultActive,\n })\n\n // TODO can avoid some of this CSS creation on native\n const themeConfig = (() => {\n let cssRules: string[] = []\n\n // tokens\n let tokenRule = `:root {`\n const varsByValue = new Map<string, Variable>()\n const addVar = (v: Variable) => {\n varsByValue[v.val] = v\n const rule = `--${v.name}:${typeof v.val === 'number' ? `${v.val}px` : v.val};`\n tokenRule += rule\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 if (key === 'font') {\n for (const fkey in val) {\n if (fkey === 'family') {\n addVar(val[fkey])\n } else {\n for (const fskey in val[fkey]) {\n addVar(val[fkey][fskey])\n }\n }\n }\n } else {\n addVar(val)\n }\n }\n }\n cssRules.push(`${tokenRule}\\n}`)\n\n // themes\n for (const themeName in config.themes) {\n // to allow using the same theme with diff names, be sure we don't mutate!\n config.themes[themeName] = { ...config.themes[themeName] }\n const theme = config.themes[themeName]\n let vars = ''\n for (const themeKey in theme) {\n const val = theme[themeKey]\n const getVariableCSS = (inv: any) => {\n const v = varsByValue[inv] ?? inv\n return isVariable(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`\n }\n vars += getVariableCSS(val)\n // TODO sanity check is necessary\n // make everything a variable that gets put into css\n if (!isVariable(val)) {\n theme[themeKey] = createVariable({\n name: themeKey,\n val,\n })\n }\n }\n\n const [themeClassName, parentName] = themeName.includes('-')\n ? themeName.split('-')\n : [themeName, '']\n // tiny hack for now assuming light/dark are typical parentName\n const oppositeName = parentName === 'dark' ? 'light' : 'dark'\n const cssParentSel = parentName ? `.${PREFIX}${parentName}` : ''\n const cssChildSel = `.${PREFIX}${themeClassName}`\n const cssSel = `${cssParentSel} ${cssChildSel}`\n // we need to force specificity\n const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {\\n${vars}\\n}`\n cssRules.push(cssRule)\n }\n\n Object.freeze(cssRules)\n\n return {\n cssRules,\n css: cssRules.join('\\n'),\n }\n })()\n\n // faster lookups token keys become $keys to match input\n const tokensParsed: any = parseTokens(config.tokens)\n // all themes should match key and we just need variable name\n // TODO once w react native we'd want to have a reverse lookup back to value\n const themeParsed: any = {}\n const firstKey = Object.keys(config.themes)[0]\n for (const key in config.themes[firstKey]) {\n // themeParsed[`$${key}`] = config.themes[firstKey][key]\n const val = config.themes[firstKey][key].val\n themeParsed[`$${key}`] = new Variable({ val, name: key })\n }\n\n const next: TamaguiInternalConfig = {\n // @ts-ignore\n shorthands: {},\n ...config,\n Provider: createTamaguiProvider({\n defaultTheme: 'light',\n ...config,\n }),\n themeConfig,\n themeParsed,\n tokensParsed,\n getCSS() {\n return `${themeConfig.css}\\n${[...getStyleRules()].join('\\n')}`\n },\n }\n conf = next\n\n if (configListeners.size) {\n configListeners.forEach((cb) => cb(next))\n configListeners.clear()\n }\n\n // @ts-expect-error\n return next\n}\n\nexport function getThemeParentClassName(themeName?: string | null) {\n return `theme-parent ${themeName ? `${PREFIX}${themeName}` : ''}`\n}\n\nconst parseTokens = (tokens: any) => {\n const res: any = {}\n for (const key in tokens) {\n res[key] = {}\n if (key === 'font') {\n for (const family in tokens.font) {\n const obj = {}\n res.font[`$${family}`] = obj\n for (const attrKey in tokens.font[family]) {\n const attr = tokens.font[family][attrKey]\n if (attrKey === 'family') {\n obj[attrKey] = attr\n continue\n }\n obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {\n acc[`$${cur}`] = attr[cur]\n return acc\n }, {})\n }\n }\n continue\n }\n for (const skey in tokens[key]) {\n res[key][`$${skey}`] = tokens[key][skey]\n }\n }\n\n return res\n}\n"],
|
|
5
|
-
"mappings": ";;AAAA;AAEA;AACA;AACA;AAsBA,IAAI;AAEG,MAAM,mBAAmB,6BAAM,CAAC,CAAC,MAAR;AACzB,MAAM,mBAAmB,6BAAM,MAAN;AAGhC,MAAM,kBAAkB,IAAI;AACrB,MAAM,mBAAmB,wBAAC,OAAuB;AACtD,MAAI,MAAM;AACR,OAAG;AAAA,SACE;AACL,oBAAgB,IAAI;AAAA;AAAA,GAJQ;AAQhC,MAAM,SAAS;AAER,uBACL,QAGU;
|
|
4
|
+
"sourcesContent": ["import { getStyleRules } from '@tamagui/helpers'\n\nimport { Variable, createVariable, isVariable } from './createVariable'\nimport { createTamaguiProvider } from './helpers/createTamaguiProvider'\nimport { validateConfig } from './helpers/validate'\nimport { configureMedia } from './hooks/useMedia'\nimport {\n CreateTamaguiConfig,\n GenericTamaguiConfig,\n MediaQueryKey,\n TamaguiInternalConfig,\n TamaguiProviderProps,\n} from './types'\n\nexport type CreateTamaguiProps = TamaguiProviderProps &\n // we omit and re-declare it because we need to allow instantation types to be flexible\n // user then re-defines the types after createTamagui returns the typed object they want\n Omit<GenericTamaguiConfig, 'themes'> & {\n themes: {\n [key: string]: {\n [key: string]: string | number | Variable\n }\n }\n // for ssr/native, will default to active\n mediaQueryDefaultActive?: MediaQueryKey[]\n }\n\nlet conf: TamaguiInternalConfig | null\n\nexport const getHasConfigured = () => !!conf\nexport const getTamaguiConfig = () => conf!\n\ntype ConfigListener = (conf: TamaguiInternalConfig) => void\nconst configListeners = new Set<ConfigListener>()\nexport const onConfiguredOnce = (cb: ConfigListener) => {\n if (conf) {\n cb(conf)\n } else {\n configListeners.add(cb)\n }\n}\n\nconst PREFIX = `theme--`\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n config: Conf\n): Conf extends CreateTamaguiConfig<infer A, infer B, infer C, infer D>\n ? TamaguiInternalConfig<A, B, C, D>\n : unknown {\n if (process.env.NODE_ENV === 'development') {\n // config is re-run by the @tamagui/static, dont double validate\n if (!config['parsed']) {\n validateConfig(config)\n }\n }\n // test env loads a few times as it runs diff tests\n if (conf) {\n console.warn('Called createTamagui twice! Should never do so')\n // throw new Error(`#000 createTamagui called twice`)\n }\n\n configureMedia({\n queries: config.media as any,\n defaultActive: config.mediaQueryDefaultActive,\n })\n\n // TODO can avoid some of this CSS creation on native\n const themeConfig = (() => {\n let cssRules: string[] = []\n\n // tokens\n let tokenRule = `:root {`\n const varsByValue = new Map<string, Variable>()\n const addVar = (v: Variable) => {\n varsByValue[v.val] = v\n const rule = `--${v.name}:${typeof v.val === 'number' ? `${v.val}px` : v.val};`\n tokenRule += rule\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 if (key === 'font') {\n for (const fkey in val) {\n if (fkey === 'family') {\n addVar(val[fkey])\n } else {\n for (const fskey in val[fkey]) {\n addVar(val[fkey][fskey])\n }\n }\n }\n } else {\n addVar(val)\n }\n }\n }\n cssRules.push(`${tokenRule}\\n}`)\n\n // themes\n for (const themeName in config.themes) {\n // to allow using the same theme with diff names, be sure we don't mutate!\n config.themes[themeName] = { ...config.themes[themeName] }\n const theme = config.themes[themeName]\n let vars = ''\n for (const themeKey in theme) {\n const val = theme[themeKey]\n const getVariableCSS = (inv: any) => {\n const v = varsByValue[inv] ?? inv\n return isVariable(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`\n }\n vars += getVariableCSS(val)\n // TODO sanity check is necessary\n // make everything a variable that gets put into css\n if (!isVariable(val)) {\n theme[themeKey] = createVariable({\n name: themeKey,\n val,\n })\n }\n }\n\n const [themeClassName, parentName] = themeName.includes('-')\n ? themeName.split('-')\n : [themeName, '']\n // tiny hack for now assuming light/dark are typical parentName\n const oppositeName = parentName === 'dark' ? 'light' : 'dark'\n const cssParentSel = parentName ? `.${PREFIX}${parentName}` : ''\n const cssChildSel = `.${PREFIX}${themeClassName}`\n const cssSel = `${cssParentSel} ${cssChildSel}`\n // we need to force specificity\n const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {\\n${vars}\\n}`\n cssRules.push(cssRule)\n }\n\n Object.freeze(cssRules)\n\n return {\n cssRules,\n css: cssRules.join('\\n'),\n }\n })()\n\n // faster lookups token keys become $keys to match input\n const tokensParsed: any = parseTokens(config.tokens)\n // all themes should match key and we just need variable name\n // TODO once w react native we'd want to have a reverse lookup back to value\n const themeParsed: any = {}\n const firstKey = Object.keys(config.themes)[0]\n for (const key in config.themes[firstKey]) {\n // themeParsed[`$${key}`] = config.themes[firstKey][key]\n const val = config.themes[firstKey][key].val\n themeParsed[`$${key}`] = new Variable({ val, name: key })\n }\n\n const next: TamaguiInternalConfig = {\n // @ts-ignore\n shorthands: {},\n ...config,\n Provider: createTamaguiProvider({\n defaultTheme: 'light',\n ...config,\n }),\n themeConfig,\n themeParsed,\n tokensParsed,\n parsed: true,\n getCSS() {\n return `${themeConfig.css}\\n${[...getStyleRules()].join('\\n')}`\n },\n }\n conf = next\n\n if (configListeners.size) {\n configListeners.forEach((cb) => cb(next))\n configListeners.clear()\n }\n\n // @ts-expect-error\n return next\n}\n\nexport function getThemeParentClassName(themeName?: string | null) {\n return `theme-parent ${themeName ? `${PREFIX}${themeName}` : ''}`\n}\n\nconst parseTokens = (tokens: any) => {\n const res: any = {}\n for (const key in tokens) {\n res[key] = {}\n if (key === 'font') {\n for (const family in tokens.font) {\n const obj = {}\n res.font[`$${family}`] = obj\n for (const attrKey in tokens.font[family]) {\n const attr = tokens.font[family][attrKey]\n if (attrKey === 'family') {\n obj[attrKey] = attr\n continue\n }\n obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {\n acc[`$${cur}`] = attr[cur]\n return acc\n }, {})\n }\n }\n continue\n }\n for (const skey in tokens[key]) {\n res[key][`$${skey}`] = tokens[key][skey]\n }\n }\n\n return res\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/createTokens.js
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
3
|
import { createVariable } from "./createVariable";
|
|
4
|
+
import { validateTokens } from "./helpers/validate";
|
|
4
5
|
function createTokens(tokens) {
|
|
6
|
+
if (process.env.NODE_ENV === "development") {
|
|
7
|
+
validateTokens(tokens);
|
|
8
|
+
}
|
|
5
9
|
return setupTokens(tokens);
|
|
6
10
|
}
|
|
7
11
|
__name(createTokens, "createTokens");
|
package/dist/createTokens.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/createTokens.ts"],
|
|
4
|
-
"sourcesContent": ["import { Variable, createVariable } from './createVariable'\nimport { CreateTokens } from './types'\n\n// tokens.color.dark.red ===>{ var: `color-dark-red`, val: '' }\n\nexport function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {\n return setupTokens(tokens) as any\n}\n\nfunction setupTokens(tokens: any) {\n return mapTokensToVariables(tokens)\n}\n\nexport const mapTokensToVariables = (\n tokens: CreateTokens,\n parentPath = ''\n): CreateTokens<Variable> => {\n const res = {}\n for (const key in tokens) {\n const val = tokens[key]\n const name = parentPath ? `${parentPath}-${key}` : key\n if (val && typeof val === 'object') {\n res[key] = mapTokensToVariables(tokens[key], name)\n } else {\n res[key] = createVariable({ val, name })\n }\n }\n // @ts-expect-error\n return res\n}\n\n// verbose but gives us nice types...\ntype MakeTokens<T> = T extends {\n font: {\n [key in infer A]: {\n size: infer B\n lineHeight: infer C\n letterSpacing: infer D\n weight: infer Z\n family: infer Y\n }\n }\n color: infer E\n space: infer F\n size: infer G\n radius: infer H\n zIndex: infer J\n}\n ? {\n font: {\n [key in A]: {\n size: {\n [key in keyof B]: Variable\n }\n lineHeight: {\n [key in keyof C]: Variable\n }\n letterSpacing: {\n [key in keyof D]: Variable\n }\n weight: {\n [key in keyof Z]: Variable\n }\n family: Y\n }\n }\n color: {\n [key in keyof E]: Variable\n }\n space: {\n [key in keyof F]: Variable\n }\n size: {\n [key in keyof G]: Variable\n }\n radius: {\n [key in keyof H]: Variable\n }\n zIndex: {\n [key in keyof J]: Variable\n }\n }\n : never\n"],
|
|
5
|
-
"mappings": ";;AAAA;AAKO,sBAA8C,QAA0B;AAC7E,SAAO,YAAY;AAAA;
|
|
4
|
+
"sourcesContent": ["import { Variable, createVariable } from './createVariable'\nimport { validateTokens } from './helpers/validate'\nimport { CreateTokens } from './types'\n\n// tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }\n\nexport function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {\n if (process.env.NODE_ENV === 'development') {\n validateTokens(tokens)\n }\n\n return setupTokens(tokens) as any\n}\n\nfunction setupTokens(tokens: any) {\n return mapTokensToVariables(tokens)\n}\n\nexport const mapTokensToVariables = (\n tokens: CreateTokens,\n parentPath = ''\n): CreateTokens<Variable> => {\n const res = {}\n for (const key in tokens) {\n const val = tokens[key]\n const name = parentPath ? `${parentPath}-${key}` : key\n if (val && typeof val === 'object') {\n res[key] = mapTokensToVariables(tokens[key], name)\n } else {\n res[key] = createVariable({ val, name })\n }\n }\n // @ts-expect-error\n return res\n}\n\n// verbose but gives us nice types...\ntype MakeTokens<T> = T extends {\n font: {\n [key in infer A]: {\n size: infer B\n lineHeight: infer C\n letterSpacing: infer D\n weight: infer Z\n family: infer Y\n }\n }\n color: infer E\n space: infer F\n size: infer G\n radius: infer H\n zIndex: infer J\n}\n ? {\n font: {\n [key in A]: {\n size: {\n [key in keyof B]: Variable\n }\n lineHeight: {\n [key in keyof C]: Variable\n }\n letterSpacing: {\n [key in keyof D]: Variable\n }\n weight: {\n [key in keyof Z]: Variable\n }\n family: Y\n }\n }\n color: {\n [key in keyof E]: Variable\n }\n space: {\n [key in keyof F]: Variable\n }\n size: {\n [key in keyof G]: Variable\n }\n radius: {\n [key in keyof H]: Variable\n }\n zIndex: {\n [key in keyof J]: Variable\n }\n }\n : never\n"],
|
|
5
|
+
"mappings": ";;AAAA;AACA;AAKO,sBAA8C,QAA0B;AAC7E,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,mBAAe;AAAA;AAGjB,SAAO,YAAY;AAAA;AALL;AAQhB,qBAAqB,QAAa;AAChC,SAAO,qBAAqB;AAAA;AADrB;AAIF,MAAM,uBAAuB,wBAClC,QACA,aAAa,OACc;AAC3B,QAAM,MAAM;AACZ,aAAW,OAAO,QAAQ;AACxB,UAAM,MAAM,OAAO;AACnB,UAAM,OAAO,aAAa,GAAG,cAAc,QAAQ;AACnD,QAAI,OAAO,OAAO,QAAQ,UAAU;AAClC,UAAI,OAAO,qBAAqB,OAAO,MAAM;AAAA,WACxC;AACL,UAAI,OAAO,eAAe,EAAE,KAAK;AAAA;AAAA;AAIrC,SAAO;AAAA,GAf2B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import ow from "@tamagui/ow";
|
|
4
|
+
const validateConfig = /* @__PURE__ */ __name((conf) => {
|
|
5
|
+
if (!conf) {
|
|
6
|
+
console.warn("no conf?");
|
|
7
|
+
return;
|
|
8
|
+
}
|
|
9
|
+
try {
|
|
10
|
+
ow(conf, validConfig);
|
|
11
|
+
} catch (err) {
|
|
12
|
+
console.log("Given config:\n", JSON.stringify(conf, null, 2));
|
|
13
|
+
throw err;
|
|
14
|
+
}
|
|
15
|
+
}, "validateConfig");
|
|
16
|
+
const validConfig = ow.object.exactShape({
|
|
17
|
+
defaultTheme: ow.optional.string,
|
|
18
|
+
disableRootThemeClass: ow.optional.boolean,
|
|
19
|
+
shorthands: ow.optional.object.valuesOfType(ow.string),
|
|
20
|
+
themes: ow.object.valuesOfType(ow.object),
|
|
21
|
+
tokens: ow.object.valuesOfType(ow.object),
|
|
22
|
+
media: ow.object.valuesOfType(ow.object)
|
|
23
|
+
});
|
|
24
|
+
const validFont = ow.object.exactShape({
|
|
25
|
+
family: ow.string,
|
|
26
|
+
size: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
27
|
+
lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
28
|
+
weight: ow.object.nonEmpty.valuesOfType(ow.string),
|
|
29
|
+
letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number)
|
|
30
|
+
});
|
|
31
|
+
const validTokens = ow.object.exactShape({
|
|
32
|
+
font: ow.object.valuesOfType(validFont),
|
|
33
|
+
size: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
34
|
+
space: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
35
|
+
zIndex: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
36
|
+
radius: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
37
|
+
color: ow.object.nonEmpty.valuesOfType(ow.string)
|
|
38
|
+
});
|
|
39
|
+
const validateTokens = /* @__PURE__ */ __name((tokens) => {
|
|
40
|
+
try {
|
|
41
|
+
ow(tokens, validTokens);
|
|
42
|
+
} catch (err) {
|
|
43
|
+
console.log("Given tokens:\n", JSON.stringify(tokens, null, 2));
|
|
44
|
+
throw err;
|
|
45
|
+
}
|
|
46
|
+
}, "validateTokens");
|
|
47
|
+
const validateFont = /* @__PURE__ */ __name((font) => {
|
|
48
|
+
try {
|
|
49
|
+
ow(font, validFont);
|
|
50
|
+
} catch (err) {
|
|
51
|
+
console.log("Given font:\n", JSON.stringify(font, null, 2));
|
|
52
|
+
throw err;
|
|
53
|
+
}
|
|
54
|
+
}, "validateFont");
|
|
55
|
+
export {
|
|
56
|
+
validateConfig,
|
|
57
|
+
validateFont,
|
|
58
|
+
validateTokens
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=validate.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/helpers/validate.ts"],
|
|
4
|
+
"sourcesContent": ["// published a patched version that works on native\nimport ow from '@tamagui/ow'\n\nexport const validateConfig = (conf: any) => {\n if (!conf) {\n console.warn('no conf?')\n return\n }\n try {\n ow(conf, validConfig)\n } catch (err: any) {\n console.log('Given config:\\n', JSON.stringify(conf, null, 2))\n throw err\n }\n}\n\nconst validConfig = ow.object.exactShape({\n defaultTheme: ow.optional.string,\n disableRootThemeClass: ow.optional.boolean,\n shorthands: ow.optional.object.valuesOfType(ow.string),\n themes: ow.object.valuesOfType(ow.object),\n tokens: ow.object.valuesOfType(ow.object),\n media: ow.object.valuesOfType(ow.object),\n})\n\nconst validFont = ow.object.exactShape({\n family: ow.string,\n size: ow.object.nonEmpty.valuesOfType(ow.number),\n lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),\n weight: ow.object.nonEmpty.valuesOfType(ow.string),\n letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number),\n})\n\nconst validTokens = ow.object.exactShape({\n font: ow.object.valuesOfType(validFont),\n size: ow.object.nonEmpty.valuesOfType(ow.number),\n space: ow.object.nonEmpty.valuesOfType(ow.number),\n zIndex: ow.object.nonEmpty.valuesOfType(ow.number),\n radius: ow.object.nonEmpty.valuesOfType(ow.number),\n color: ow.object.nonEmpty.valuesOfType(ow.string),\n})\n\nexport const validateTokens = (tokens: any) => {\n try {\n ow(tokens, validTokens)\n } catch (err: any) {\n console.log('Given tokens:\\n', JSON.stringify(tokens, null, 2))\n throw err\n }\n}\n\nexport const validateFont = (font: any) => {\n try {\n ow(font, validFont)\n } catch (err: any) {\n console.log('Given font:\\n', JSON.stringify(font, null, 2))\n throw err\n }\n}\n"],
|
|
5
|
+
"mappings": ";;AACA;AAEO,MAAM,iBAAiB,wBAAC,SAAc;AAC3C,MAAI,CAAC,MAAM;AACT,YAAQ,KAAK;AACb;AAAA;AAEF,MAAI;AACF,OAAG,MAAM;AAAA,WACF,KAAP;AACA,YAAQ,IAAI,mBAAmB,KAAK,UAAU,MAAM,MAAM;AAC1D,UAAM;AAAA;AAAA,GAToB;AAa9B,MAAM,cAAc,GAAG,OAAO,WAAW;AAAA,EACvC,cAAc,GAAG,SAAS;AAAA,EAC1B,uBAAuB,GAAG,SAAS;AAAA,EACnC,YAAY,GAAG,SAAS,OAAO,aAAa,GAAG;AAAA,EAC/C,QAAQ,GAAG,OAAO,aAAa,GAAG;AAAA,EAClC,QAAQ,GAAG,OAAO,aAAa,GAAG;AAAA,EAClC,OAAO,GAAG,OAAO,aAAa,GAAG;AAAA;AAGnC,MAAM,YAAY,GAAG,OAAO,WAAW;AAAA,EACrC,QAAQ,GAAG;AAAA,EACX,MAAM,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,EACzC,YAAY,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,EAC/C,QAAQ,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,EAC3C,eAAe,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA;AAGpD,MAAM,cAAc,GAAG,OAAO,WAAW;AAAA,EACvC,MAAM,GAAG,OAAO,aAAa;AAAA,EAC7B,MAAM,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,EACzC,OAAO,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,EAC1C,QAAQ,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,EAC3C,QAAQ,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,EAC3C,OAAO,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA;AAGrC,MAAM,iBAAiB,wBAAC,WAAgB;AAC7C,MAAI;AACF,OAAG,QAAQ;AAAA,WACJ,KAAP;AACA,YAAQ,IAAI,mBAAmB,KAAK,UAAU,QAAQ,MAAM;AAC5D,UAAM;AAAA;AAAA,GALoB;AASvB,MAAM,eAAe,wBAAC,SAAc;AACzC,MAAI;AACF,OAAG,MAAM;AAAA,WACF,KAAP;AACA,YAAQ,IAAI,iBAAiB,KAAK,UAAU,MAAM,MAAM;AACxD,UAAM;AAAA;AAAA,GALkB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import ow from "ow";
|
|
4
|
+
const validateConfig = /* @__PURE__ */ __name((tokens) => {
|
|
5
|
+
try {
|
|
6
|
+
ow(tokens, validConfig);
|
|
7
|
+
} catch (err) {
|
|
8
|
+
console.error(err.message);
|
|
9
|
+
console.log("Given config:\n", JSON.stringify(tokens, null, 2));
|
|
10
|
+
}
|
|
11
|
+
}, "validateConfig");
|
|
12
|
+
const validConfig = ow.object.exactShape({
|
|
13
|
+
defaultTheme: ow.optional.string,
|
|
14
|
+
disableRootThemeClass: ow.optional.string,
|
|
15
|
+
shorthands: ow.optional.object.valuesOfType(ow.string),
|
|
16
|
+
themes: ow.object.valuesOfType(ow.object),
|
|
17
|
+
tokens: ow.object.valuesOfType(ow.object),
|
|
18
|
+
media: ow.object.valuesOfType(ow.object)
|
|
19
|
+
});
|
|
20
|
+
const validateTokens = /* @__PURE__ */ __name((tokens) => {
|
|
21
|
+
try {
|
|
22
|
+
ow(tokens, validTokens);
|
|
23
|
+
} catch (err) {
|
|
24
|
+
console.error(err.message);
|
|
25
|
+
console.log("Given tokens:\n", JSON.stringify(tokens, null, 2));
|
|
26
|
+
}
|
|
27
|
+
}, "validateTokens");
|
|
28
|
+
const validTokens = ow.object.exactShape({
|
|
29
|
+
font: ow.object.valuesOfType(ow.object.exactShape({
|
|
30
|
+
family: ow.string,
|
|
31
|
+
size: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
32
|
+
lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
33
|
+
weight: ow.object.nonEmpty.valuesOfType(ow.string),
|
|
34
|
+
letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number)
|
|
35
|
+
})),
|
|
36
|
+
size: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
37
|
+
space: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
38
|
+
zIndex: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
39
|
+
radius: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
40
|
+
color: ow.object.nonEmpty.valuesOfType(ow.string)
|
|
41
|
+
});
|
|
42
|
+
export {
|
|
43
|
+
validateConfig,
|
|
44
|
+
validateTokens
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=validateConfig.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/helpers/validateConfig.ts"],
|
|
4
|
+
"sourcesContent": ["import ow from 'ow'\n\nexport const validateConfig = (tokens: any) => {\n try {\n ow(tokens, validConfig)\n } catch (err: any) {\n console.error(err.message)\n console.log('Given config:\\n', JSON.stringify(tokens, null, 2))\n }\n}\n\nconst validConfig = ow.object.exactShape({\n defaultTheme: ow.optional.string,\n disableRootThemeClass: ow.optional.string,\n shorthands: ow.optional.object.valuesOfType(ow.string),\n themes: ow.object.valuesOfType(ow.object),\n tokens: ow.object.valuesOfType(ow.object),\n media: ow.object.valuesOfType(ow.object),\n})\n\nexport const validateTokens = (tokens: any) => {\n try {\n ow(tokens, validTokens)\n } catch (err: any) {\n console.error(err.message)\n console.log('Given tokens:\\n', JSON.stringify(tokens, null, 2))\n }\n}\n\nconst validTokens = ow.object.exactShape({\n font: ow.object.valuesOfType(\n ow.object.exactShape({\n family: ow.string,\n size: ow.object.nonEmpty.valuesOfType(ow.number),\n lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),\n weight: ow.object.nonEmpty.valuesOfType(ow.string),\n letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number),\n })\n ),\n size: ow.object.nonEmpty.valuesOfType(ow.number),\n space: ow.object.nonEmpty.valuesOfType(ow.number),\n zIndex: ow.object.nonEmpty.valuesOfType(ow.number),\n radius: ow.object.nonEmpty.valuesOfType(ow.number),\n color: ow.object.nonEmpty.valuesOfType(ow.string),\n})\n"],
|
|
5
|
+
"mappings": ";;AAAA;AAEO,MAAM,iBAAiB,wBAAC,WAAgB;AAC7C,MAAI;AACF,OAAG,QAAQ;AAAA,WACJ,KAAP;AACA,YAAQ,MAAM,IAAI;AAClB,YAAQ,IAAI,mBAAmB,KAAK,UAAU,QAAQ,MAAM;AAAA;AAAA,GALlC;AAS9B,MAAM,cAAc,GAAG,OAAO,WAAW;AAAA,EACvC,cAAc,GAAG,SAAS;AAAA,EAC1B,uBAAuB,GAAG,SAAS;AAAA,EACnC,YAAY,GAAG,SAAS,OAAO,aAAa,GAAG;AAAA,EAC/C,QAAQ,GAAG,OAAO,aAAa,GAAG;AAAA,EAClC,QAAQ,GAAG,OAAO,aAAa,GAAG;AAAA,EAClC,OAAO,GAAG,OAAO,aAAa,GAAG;AAAA;AAG5B,MAAM,iBAAiB,wBAAC,WAAgB;AAC7C,MAAI;AACF,OAAG,QAAQ;AAAA,WACJ,KAAP;AACA,YAAQ,MAAM,IAAI;AAClB,YAAQ,IAAI,mBAAmB,KAAK,UAAU,QAAQ,MAAM;AAAA;AAAA,GALlC;AAS9B,MAAM,cAAc,GAAG,OAAO,WAAW;AAAA,EACvC,MAAM,GAAG,OAAO,aACd,GAAG,OAAO,WAAW;AAAA,IACnB,QAAQ,GAAG;AAAA,IACX,MAAM,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,IACzC,YAAY,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,IAC/C,QAAQ,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,IAC3C,eAAe,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA;AAAA,EAGtD,MAAM,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,EACzC,OAAO,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,EAC1C,QAAQ,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,EAC3C,QAAQ,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,EAC3C,OAAO,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import ow from "ow";
|
|
4
|
+
const validateTokens = /* @__PURE__ */ __name((tokens) => {
|
|
5
|
+
try {
|
|
6
|
+
ow(tokens, validTokens);
|
|
7
|
+
} catch (err) {
|
|
8
|
+
console.error(err.message);
|
|
9
|
+
console.log("Got tokens:\n", JSON.stringify(tokens, null, 2));
|
|
10
|
+
}
|
|
11
|
+
}, "validateTokens");
|
|
12
|
+
const validTokens = ow.object.exactShape({
|
|
13
|
+
font: ow.object.valuesOfType(ow.object.exactShape({
|
|
14
|
+
family: ow.string,
|
|
15
|
+
size: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
16
|
+
lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
17
|
+
weight: ow.object.nonEmpty.valuesOfType(ow.string),
|
|
18
|
+
letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number)
|
|
19
|
+
})),
|
|
20
|
+
size: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
21
|
+
space: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
22
|
+
zIndex: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
23
|
+
radius: ow.object.nonEmpty.valuesOfType(ow.number),
|
|
24
|
+
color: ow.object.nonEmpty.valuesOfType(ow.string)
|
|
25
|
+
});
|
|
26
|
+
export {
|
|
27
|
+
validateTokens
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=validateTokens.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/helpers/validateTokens.ts"],
|
|
4
|
+
"sourcesContent": ["import ow from 'ow'\n\nexport const validateTokens = (tokens: any) => {\n try {\n ow(tokens, validTokens)\n } catch (err: any) {\n console.error(err.message)\n console.log('Got tokens:\\n', JSON.stringify(tokens, null, 2))\n }\n}\n\nconst validTokens = ow.object.exactShape({\n font: ow.object.valuesOfType(\n ow.object.exactShape({\n family: ow.string,\n size: ow.object.nonEmpty.valuesOfType(ow.number),\n lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),\n weight: ow.object.nonEmpty.valuesOfType(ow.string),\n letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number),\n })\n ),\n size: ow.object.nonEmpty.valuesOfType(ow.number),\n space: ow.object.nonEmpty.valuesOfType(ow.number),\n zIndex: ow.object.nonEmpty.valuesOfType(ow.number),\n radius: ow.object.nonEmpty.valuesOfType(ow.number),\n color: ow.object.nonEmpty.valuesOfType(ow.string),\n})\n"],
|
|
5
|
+
"mappings": ";;AAAA;AAEO,MAAM,iBAAiB,wBAAC,WAAgB;AAC7C,MAAI;AACF,OAAG,QAAQ;AAAA,WACJ,KAAP;AACA,YAAQ,MAAM,IAAI;AAClB,YAAQ,IAAI,iBAAiB,KAAK,UAAU,QAAQ,MAAM;AAAA;AAAA,GALhC;AAS9B,MAAM,cAAc,GAAG,OAAO,WAAW;AAAA,EACvC,MAAM,GAAG,OAAO,aACd,GAAG,OAAO,WAAW;AAAA,IACnB,QAAQ,GAAG;AAAA,IACX,MAAM,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,IACzC,YAAY,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,IAC/C,QAAQ,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,IAC3C,eAAe,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA;AAAA,EAGtD,MAAM,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,EACzC,OAAO,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,EAC1C,QAAQ,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,EAC3C,QAAQ,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA,EAC3C,OAAO,GAAG,OAAO,SAAS,aAAa,GAAG;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/index.cjs
CHANGED
|
@@ -219,16 +219,22 @@ var import_react5 = __toModule(require("react"));
|
|
|
219
219
|
var ThemeManager = class {
|
|
220
220
|
constructor() {
|
|
221
221
|
this.name = "light";
|
|
222
|
+
this.parentName = null;
|
|
222
223
|
this.keys = new Map();
|
|
223
224
|
this.listeners = new Map();
|
|
224
225
|
this.callbacks = new Set();
|
|
225
226
|
this.theme = null;
|
|
226
227
|
}
|
|
227
|
-
setActiveTheme(
|
|
228
|
+
setActiveTheme({
|
|
229
|
+
name,
|
|
230
|
+
theme,
|
|
231
|
+
parentName
|
|
232
|
+
}) {
|
|
228
233
|
if (name === this.name)
|
|
229
234
|
return;
|
|
230
235
|
this.name = name;
|
|
231
236
|
this.theme = theme;
|
|
237
|
+
this.parentName = parentName || null;
|
|
232
238
|
this.update();
|
|
233
239
|
}
|
|
234
240
|
track(uuid, keys) {
|
|
@@ -272,11 +278,13 @@ var Theme = /* @__PURE__ */ __name((props) => {
|
|
|
272
278
|
const themes = (0, import_react6.useContext)(ThemeContext);
|
|
273
279
|
const [parentName, setParentName] = (0, import_react6.useState)(parent.name || "light");
|
|
274
280
|
if (!themes) {
|
|
275
|
-
console.warn("no themes
|
|
281
|
+
console.warn("Error, no themes in context", props);
|
|
276
282
|
return props.children;
|
|
277
283
|
}
|
|
278
284
|
const name = props.name;
|
|
279
|
-
const
|
|
285
|
+
const nextNameParent = `${name}-${parentName}`;
|
|
286
|
+
const nextNameParentParent = `${name}-${parent.parentName}`;
|
|
287
|
+
const activeName = !name ? null : name in themes ? name : nextNameParent in themes ? nextNameParent : nextNameParentParent in themes ? nextNameParentParent : null;
|
|
280
288
|
const theme = activeName ? themes[activeName] : null;
|
|
281
289
|
const themeManager = useConstant(() => {
|
|
282
290
|
if (!theme) {
|
|
@@ -284,7 +292,7 @@ var Theme = /* @__PURE__ */ __name((props) => {
|
|
|
284
292
|
}
|
|
285
293
|
const manager = new ThemeManager();
|
|
286
294
|
if (name) {
|
|
287
|
-
manager.setActiveTheme(name, themes[name]);
|
|
295
|
+
manager.setActiveTheme({ name, theme: themes[name], parentName });
|
|
288
296
|
}
|
|
289
297
|
return manager;
|
|
290
298
|
});
|
|
@@ -292,14 +300,14 @@ var Theme = /* @__PURE__ */ __name((props) => {
|
|
|
292
300
|
if (!themeManager) {
|
|
293
301
|
return;
|
|
294
302
|
}
|
|
295
|
-
themeManager.setActiveTheme(activeName, theme);
|
|
303
|
+
themeManager.setActiveTheme({ name: activeName, theme, parentName });
|
|
296
304
|
return parent.onChangeTheme((next) => {
|
|
297
305
|
if (next) {
|
|
298
|
-
themeManager.setActiveTheme(next, themes[next]);
|
|
306
|
+
themeManager.setActiveTheme({ name: next, theme: themes[next], parentName });
|
|
299
307
|
setParentName(next);
|
|
300
308
|
}
|
|
301
309
|
});
|
|
302
|
-
}, [themes, activeName]);
|
|
310
|
+
}, [themes, activeName, parentName]);
|
|
303
311
|
if (!name || !theme) {
|
|
304
312
|
return props.children;
|
|
305
313
|
}
|
|
@@ -373,6 +381,60 @@ function createTamaguiProvider(themeProps) {
|
|
|
373
381
|
}
|
|
374
382
|
__name(createTamaguiProvider, "createTamaguiProvider");
|
|
375
383
|
|
|
384
|
+
// src/helpers/validate.ts
|
|
385
|
+
var import_ow = __toModule(require("@tamagui/ow"));
|
|
386
|
+
var validateConfig = /* @__PURE__ */ __name((conf3) => {
|
|
387
|
+
if (!conf3) {
|
|
388
|
+
console.warn("no conf?");
|
|
389
|
+
return;
|
|
390
|
+
}
|
|
391
|
+
try {
|
|
392
|
+
(0, import_ow.default)(conf3, validConfig);
|
|
393
|
+
} catch (err) {
|
|
394
|
+
console.log("Given config:\n", JSON.stringify(conf3, null, 2));
|
|
395
|
+
throw err;
|
|
396
|
+
}
|
|
397
|
+
}, "validateConfig");
|
|
398
|
+
var validConfig = import_ow.default.object.exactShape({
|
|
399
|
+
defaultTheme: import_ow.default.optional.string,
|
|
400
|
+
disableRootThemeClass: import_ow.default.optional.boolean,
|
|
401
|
+
shorthands: import_ow.default.optional.object.valuesOfType(import_ow.default.string),
|
|
402
|
+
themes: import_ow.default.object.valuesOfType(import_ow.default.object),
|
|
403
|
+
tokens: import_ow.default.object.valuesOfType(import_ow.default.object),
|
|
404
|
+
media: import_ow.default.object.valuesOfType(import_ow.default.object)
|
|
405
|
+
});
|
|
406
|
+
var validFont = import_ow.default.object.exactShape({
|
|
407
|
+
family: import_ow.default.string,
|
|
408
|
+
size: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.number),
|
|
409
|
+
lineHeight: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.number),
|
|
410
|
+
weight: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.string),
|
|
411
|
+
letterSpacing: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.number)
|
|
412
|
+
});
|
|
413
|
+
var validTokens = import_ow.default.object.exactShape({
|
|
414
|
+
font: import_ow.default.object.valuesOfType(validFont),
|
|
415
|
+
size: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.number),
|
|
416
|
+
space: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.number),
|
|
417
|
+
zIndex: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.number),
|
|
418
|
+
radius: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.number),
|
|
419
|
+
color: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.string)
|
|
420
|
+
});
|
|
421
|
+
var validateTokens = /* @__PURE__ */ __name((tokens) => {
|
|
422
|
+
try {
|
|
423
|
+
(0, import_ow.default)(tokens, validTokens);
|
|
424
|
+
} catch (err) {
|
|
425
|
+
console.log("Given tokens:\n", JSON.stringify(tokens, null, 2));
|
|
426
|
+
throw err;
|
|
427
|
+
}
|
|
428
|
+
}, "validateTokens");
|
|
429
|
+
var validateFont = /* @__PURE__ */ __name((font) => {
|
|
430
|
+
try {
|
|
431
|
+
(0, import_ow.default)(font, validFont);
|
|
432
|
+
} catch (err) {
|
|
433
|
+
console.log("Given font:\n", JSON.stringify(font, null, 2));
|
|
434
|
+
throw err;
|
|
435
|
+
}
|
|
436
|
+
}, "validateFont");
|
|
437
|
+
|
|
376
438
|
// src/hooks/useMedia.tsx
|
|
377
439
|
var import_use_force_update = __toModule(require("@tamagui/use-force-update"));
|
|
378
440
|
var import_react8 = __toModule(require("react"));
|
|
@@ -554,6 +616,11 @@ var onConfiguredOnce = /* @__PURE__ */ __name((cb) => {
|
|
|
554
616
|
}, "onConfiguredOnce");
|
|
555
617
|
var PREFIX = `theme--`;
|
|
556
618
|
function createTamagui(config) {
|
|
619
|
+
if (process.env.NODE_ENV === "development") {
|
|
620
|
+
if (!config["parsed"]) {
|
|
621
|
+
validateConfig(config);
|
|
622
|
+
}
|
|
623
|
+
}
|
|
557
624
|
if (conf2) {
|
|
558
625
|
console.warn("Called createTamagui twice! Should never do so");
|
|
559
626
|
}
|
|
@@ -640,6 +707,7 @@ ${vars}
|
|
|
640
707
|
themeConfig,
|
|
641
708
|
themeParsed,
|
|
642
709
|
tokensParsed,
|
|
710
|
+
parsed: true,
|
|
643
711
|
getCSS() {
|
|
644
712
|
return `${themeConfig.css}
|
|
645
713
|
${[...(0, import_helpers.getStyleRules)()].join("\n")}`;
|
|
@@ -1763,6 +1831,9 @@ var createTheme = /* @__PURE__ */ __name((theme) => {
|
|
|
1763
1831
|
|
|
1764
1832
|
// src/createFont.ts
|
|
1765
1833
|
var createFont = /* @__PURE__ */ __name((font) => {
|
|
1834
|
+
if (process.env.NODE_ENV === "development") {
|
|
1835
|
+
validateFont(font);
|
|
1836
|
+
}
|
|
1766
1837
|
const sizeKeys = Object.keys(font.size);
|
|
1767
1838
|
for (const key in font) {
|
|
1768
1839
|
if (key === "size" || key === "family")
|
|
@@ -1783,6 +1854,9 @@ var createFont = /* @__PURE__ */ __name((font) => {
|
|
|
1783
1854
|
|
|
1784
1855
|
// src/createTokens.ts
|
|
1785
1856
|
function createTokens(tokens) {
|
|
1857
|
+
if (process.env.NODE_ENV === "development") {
|
|
1858
|
+
validateTokens(tokens);
|
|
1859
|
+
}
|
|
1786
1860
|
return setupTokens(tokens);
|
|
1787
1861
|
}
|
|
1788
1862
|
__name(createTokens, "createTokens");
|