@tamagui/core 1.0.17 → 1.0.18
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/createFont.js.map +1 -1
- package/dist/cjs/createTokens.js +9 -2
- package/dist/cjs/createTokens.js.map +3 -3
- package/dist/cjs/createVariable.js.map +2 -2
- package/dist/cjs/helpers/themes.js +4 -5
- package/dist/cjs/helpers/themes.js.map +2 -2
- package/dist/esm/createFont.js.map +1 -1
- package/dist/esm/createTokens.js +9 -2
- package/dist/esm/createTokens.js.map +3 -3
- package/dist/esm/createVariable.js.map +2 -2
- package/dist/esm/helpers/themes.js +4 -5
- package/dist/esm/helpers/themes.js.map +2 -2
- package/package.json +11 -11
- package/src/createFont.ts +1 -1
- package/src/createTokens.ts +16 -5
- package/src/createVariable.ts +10 -8
- package/src/helpers/themes.ts +4 -6
- package/types/createTokens.d.ts +5 -5
- package/types/createVariable.d.ts +7 -13
- package/types/helpers/ThemeManager.d.ts +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createFont.ts"],
|
|
4
|
-
"sourcesContent": ["import { FontWeightSteps, GenericFont } from './types'\n\nconst fontWeights: FontWeightSteps[] = [\n '100',\n '200',\n '300',\n '400',\n '500',\n '600',\n '700',\n '800',\n '900',\n]\n\nconst processSection = <T>(\n section: string | Record<string, T>,\n keys: string[],\n defaultValue?: any\n): string | Record<string, T> => {\n if (typeof section === 'string') return section\n\n const sectionKeys = Object.keys(section)\n let fillValue = section[sectionKeys[0]]\n\n return Object.fromEntries(\n [...new Set([...keys, ...sectionKeys])].map((key) => {\n const value = section[key] ?? defaultValue ?? fillValue\n fillValue = value\n defaultValue = value\n return [key, value]\n })\n )\n}\n\nexport const createFont = <A extends GenericFont>(font: A): A => {\n const sizeKeys = Object.keys(font.size)\n const processedFont = Object.fromEntries(\n Object.entries(font).map(([key, section]) => {\n return [\n key,\n processSection(\n section,\n key === 'face' ? fontWeights : sizeKeys,\n key === 'face' ? { normal: font.family } : undefined\n ),\n ]\n })\n )\n return Object.freeze(processedFont) as A\n}\n"],
|
|
4
|
+
"sourcesContent": ["import { FontWeightSteps, GenericFont } from './types'\n\nconst fontWeights: FontWeightSteps[] = [\n '100',\n '200',\n '300',\n '400',\n '500',\n '600',\n '700',\n '800',\n '900',\n]\n\nconst processSection = <T>(\n section: string | Record<string, T>,\n keys: string[],\n defaultValue?: any\n): string | Record<string, T> => {\n if (typeof section === 'string') return section\n\n const sectionKeys = Object.keys(section)\n let fillValue = section[sectionKeys[0]]\n\n return Object.fromEntries(\n [...new Set([...keys, ...sectionKeys])].map((key) => {\n const value = section[key] ?? defaultValue ?? fillValue\n fillValue = value\n defaultValue = value\n return [key, value]\n })\n )\n}\n\nexport const createFont = <A extends GenericFont>(font: A): A => {\n const sizeKeys = Object.keys(font.size)\n const processedFont = Object.fromEntries(\n Object.entries(font).map(([key, section]) => {\n return [\n key,\n processSection(\n section as any,\n key === 'face' ? fontWeights : sizeKeys,\n key === 'face' ? { normal: font.family } : undefined\n ),\n ]\n })\n )\n return Object.freeze(processedFont) as A\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,MAAM,cAAiC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,iBAAiB,CACrB,SACA,MACA,iBAC+B;AAC/B,MAAI,OAAO,YAAY;AAAU,WAAO;AAExC,QAAM,cAAc,OAAO,KAAK,OAAO;AACvC,MAAI,YAAY,QAAQ,YAAY;AAEpC,SAAO,OAAO;AAAA,IACZ,CAAC,GAAG,oBAAI,IAAI,CAAC,GAAG,MAAM,GAAG,WAAW,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ;AACnD,YAAM,QAAQ,QAAQ,QAAQ,gBAAgB;AAC9C,kBAAY;AACZ,qBAAe;AACf,aAAO,CAAC,KAAK,KAAK;AAAA,IACpB,CAAC;AAAA,EACH;AACF;AAEO,MAAM,aAAa,CAAwB,SAAe;AAC/D,QAAM,WAAW,OAAO,KAAK,KAAK,IAAI;AACtC,QAAM,gBAAgB,OAAO;AAAA,IAC3B,OAAO,QAAQ,IAAI,EAAE,IAAI,CAAC,CAAC,KAAK,OAAO,MAAM;AAC3C,aAAO;AAAA,QACL;AAAA,QACA;AAAA,UACE;AAAA,UACA,QAAQ,SAAS,cAAc;AAAA,UAC/B,QAAQ,SAAS,EAAE,QAAQ,KAAK,OAAO,IAAI;AAAA,QAC7C;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACA,SAAO,OAAO,OAAO,aAAa;AACpC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/createTokens.js
CHANGED
|
@@ -22,9 +22,16 @@ __export(createTokens_exports, {
|
|
|
22
22
|
});
|
|
23
23
|
module.exports = __toCommonJS(createTokens_exports);
|
|
24
24
|
var import_createVariables = require("./createVariables");
|
|
25
|
-
function createTokens(
|
|
26
|
-
return (0, import_createVariables.createVariables)(
|
|
25
|
+
function createTokens(tokens2) {
|
|
26
|
+
return (0, import_createVariables.createVariables)(tokens2);
|
|
27
27
|
}
|
|
28
|
+
const tokens = createTokens({
|
|
29
|
+
size: { 0: 1 },
|
|
30
|
+
space: { 0: 1 },
|
|
31
|
+
radius: { 0: 1 },
|
|
32
|
+
zIndex: { 0: 1 },
|
|
33
|
+
color: { 0: "hi" }
|
|
34
|
+
});
|
|
28
35
|
// Annotate the CommonJS export names for ESM import in node:
|
|
29
36
|
0 && (module.exports = {
|
|
30
37
|
createTokens
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createTokens.ts"],
|
|
4
|
-
"sourcesContent": ["import { Variable } from './createVariable'\nimport { createVariables } from './createVariables'\nimport { CreateTokens } from './types'\n\n// tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }\nexport function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {\n return createVariables(tokens) as any\n}\n\n// verbose but gives us nice types...\ntype MakeTokens<T> = T extends {\n color: infer E\n space: infer F\n size: infer G\n radius: infer H\n zIndex: infer J\n}\n ? {\n color: {\n [Key in keyof E
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,6BAAgC;AAIzB,SAAS,
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import { Variable } from './createVariable'\nimport { createVariables } from './createVariables'\nimport { CreateTokens } from './types'\n\n// tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }\nexport function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {\n return createVariables(tokens) as any\n}\n\n// verbose but gives us nice types...\ntype MakeTokens<T> = T extends {\n color: infer E\n space: infer F\n size: infer G\n radius: infer H\n zIndex: infer J\n}\n ? {\n color: {\n // removes $ prefix allowing for defining either as $1: or 1:,\n // which is important because Chrome re-orders numerical-seeming keys :/\n [Key in keyof E extends `$${infer X}` ? X : keyof E]: Variable<string>\n }\n space: {\n [Key in keyof F extends `$${infer X}` ? X : keyof F]: Variable<number>\n }\n size: {\n [Key in keyof G extends `$${infer X}` ? X : keyof G]: Variable<number>\n }\n radius: {\n [Key in keyof H extends `$${infer X}` ? X : keyof H]: Variable<number>\n }\n zIndex: {\n [Key in keyof J extends `$${infer X}` ? X : keyof J]: Variable<number>\n }\n }\n : never\n\n// test\nconst tokens = createTokens({\n size: { 0: 1 },\n space: { 0: 1 },\n radius: { 0: 1 },\n zIndex: { 0: 1 },\n color: { 0: 'hi' },\n})\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,6BAAgC;AAIzB,SAAS,aAAqCA,SAA0B;AAC7E,aAAO,wCAAgBA,OAAM;AAC/B;AAgCA,MAAM,SAAS,aAAa;AAAA,EAC1B,MAAM,EAAE,GAAG,EAAE;AAAA,EACb,OAAO,EAAE,GAAG,EAAE;AAAA,EACd,QAAQ,EAAE,GAAG,EAAE;AAAA,EACf,QAAQ,EAAE,GAAG,EAAE;AAAA,EACf,OAAO,EAAE,GAAG,KAAK;AACnB,CAAC;",
|
|
6
|
+
"names": ["tokens"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createVariable.ts"],
|
|
4
|
-
"sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { simpleHash } from '@tamagui/helpers'\n\nimport { getConfig } from './config'\n\n/**\n * Should rename this to Token\n * Moving to objects for React Server Components support\n */\n\nconst IS_VAR = 'isVar'\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAsB;AACtB,qBAA2B;AAE3B,oBAA0B;AAO1B,MAAM,SAAS;AAaR,MAAM,iBAAiB,
|
|
4
|
+
"sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { simpleHash } from '@tamagui/helpers'\n\nimport { getConfig } from './config'\n\n/**\n * Should rename this to Token\n * Moving to objects for React Server Components support\n */\n\nconst IS_VAR = 'isVar'\n\nexport interface Variable<A = any> {\n [IS_VAR]?: true\n variable?: string\n val: A\n name: string\n key: string\n}\n\nexport type MakeVariable<A = any> = A extends string | number ? Variable<A> : A\n\ntype VariableIn<A = any> = Pick<Variable<A>, 'key' | 'name' | 'val'>\nexport const createVariable = <A extends string | number = any>(\n props: VariableIn<A>\n): Variable<A> => {\n if (isVariable(props)) return props\n const { key, name, val } = props\n return {\n [IS_VAR]: true,\n key: key!,\n name: simpleHash(name, 40),\n val: val as any,\n variable: isWeb ? createCSSVariable(name) : '',\n }\n}\n\n// could do weakmap cache\nexport function variableToString(vrble?: any, getValue = false) {\n if (isVariable(vrble)) {\n if (!getValue && isWeb && vrble.variable) {\n return vrble.variable\n }\n return `${vrble.val}`\n }\n return `${vrble || ''}`\n}\n\nexport function isVariable(v: Variable | any): v is Variable {\n return v && typeof v === 'object' && IS_VAR in v\n}\n\nexport function getVariable(nameOrVariable: Variable | string) {\n setDidGetVariableValue(true)\n if (isVariable(nameOrVariable)) {\n return variableToString(nameOrVariable)\n }\n const tokens = getConfig().tokensParsed\n return variableToString(tokens[nameOrVariable] ?? nameOrVariable)\n}\n\nlet accessed = false\nexport const setDidGetVariableValue = (val: boolean) => (accessed = val)\nexport const didGetVariableValue = () => accessed\n\nexport function getVariableValue(v: Variable | any) {\n if (isVariable(v)) {\n setDidGetVariableValue(true)\n return v.val\n }\n return v\n}\n\nexport function getVariableName(v: Variable | any) {\n if (isVariable(v)) return v.name\n return v\n}\n\nexport function getVariableVariable(v: Variable | any) {\n if (isVariable(v)) return v.variable\n return v\n}\n\n// bugfix { space: { 0.5: 10 } } was generating var(--space-0.5) (invalid CSS):\nexport const createCSSVariable = (nameProp: string, includeVar = true) => {\n if (process.env.NODE_ENV === 'development') {\n if (!nameProp || typeof nameProp !== 'string') {\n throw new Error(`createCSSVariable expected string: ${nameProp}`)\n }\n }\n const name = simpleHash(nameProp, 60)\n return includeVar ? `var(--${name})` : name\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAsB;AACtB,qBAA2B;AAE3B,oBAA0B;AAO1B,MAAM,SAAS;AAaR,MAAM,iBAAiB,CAC5B,UACgB;AAChB,MAAI,WAAW,KAAK;AAAG,WAAO;AAC9B,QAAM,EAAE,KAAK,MAAM,IAAI,IAAI;AAC3B,SAAO;AAAA,IACL,CAAC,SAAS;AAAA,IACV;AAAA,IACA,UAAM,2BAAW,MAAM,EAAE;AAAA,IACzB;AAAA,IACA,UAAU,yBAAQ,kBAAkB,IAAI,IAAI;AAAA,EAC9C;AACF;AAGO,SAAS,iBAAiB,OAAa,WAAW,OAAO;AAC9D,MAAI,WAAW,KAAK,GAAG;AACrB,QAAI,CAAC,YAAY,0BAAS,MAAM,UAAU;AACxC,aAAO,MAAM;AAAA,IACf;AACA,WAAO,GAAG,MAAM;AAAA,EAClB;AACA,SAAO,GAAG,SAAS;AACrB;AAEO,SAAS,WAAW,GAAkC;AAC3D,SAAO,KAAK,OAAO,MAAM,YAAY,UAAU;AACjD;AAEO,SAAS,YAAY,gBAAmC;AAC7D,yBAAuB,IAAI;AAC3B,MAAI,WAAW,cAAc,GAAG;AAC9B,WAAO,iBAAiB,cAAc;AAAA,EACxC;AACA,QAAM,aAAS,yBAAU,EAAE;AAC3B,SAAO,iBAAiB,OAAO,mBAAmB,cAAc;AAClE;AAEA,IAAI,WAAW;AACR,MAAM,yBAAyB,CAAC,QAAkB,WAAW;AAC7D,MAAM,sBAAsB,MAAM;AAElC,SAAS,iBAAiB,GAAmB;AAClD,MAAI,WAAW,CAAC,GAAG;AACjB,2BAAuB,IAAI;AAC3B,WAAO,EAAE;AAAA,EACX;AACA,SAAO;AACT;AAEO,SAAS,gBAAgB,GAAmB;AACjD,MAAI,WAAW,CAAC;AAAG,WAAO,EAAE;AAC5B,SAAO;AACT;AAEO,SAAS,oBAAoB,GAAmB;AACrD,MAAI,WAAW,CAAC;AAAG,WAAO,EAAE;AAC5B,SAAO;AACT;AAGO,MAAM,oBAAoB,CAAC,UAAkB,aAAa,SAAS;AACxE,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,YAAY,OAAO,aAAa,UAAU;AAC7C,YAAM,IAAI,MAAM,sCAAsC,UAAU;AAAA,IAClE;AAAA,EACF;AACA,QAAM,WAAO,2BAAW,UAAU,EAAE;AACpC,SAAO,aAAa,SAAS,UAAU;AACzC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -49,20 +49,19 @@ function proxyThemeToParents(themeName, theme, themes) {
|
|
|
49
49
|
cur.push(part);
|
|
50
50
|
return cur.join("_");
|
|
51
51
|
});
|
|
52
|
-
const
|
|
52
|
+
const len = parents.length;
|
|
53
53
|
return new Proxy(theme, {
|
|
54
54
|
get(target, key) {
|
|
55
55
|
if (key === import_getThemeUnwrapped.GetThemeUnwrapped) {
|
|
56
56
|
return theme;
|
|
57
57
|
}
|
|
58
|
-
if (!
|
|
58
|
+
if (!len || Reflect.has(target, key)) {
|
|
59
59
|
return Reflect.get(target, key);
|
|
60
60
|
}
|
|
61
|
-
for (let i =
|
|
61
|
+
for (let i = len - 1; i >= 0; i--) {
|
|
62
62
|
const parent = themes[parents[i]];
|
|
63
|
-
if (!parent)
|
|
63
|
+
if (!parent)
|
|
64
64
|
continue;
|
|
65
|
-
}
|
|
66
65
|
if (Reflect.has(parent, key)) {
|
|
67
66
|
return Reflect.get(parent, key);
|
|
68
67
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/themes.ts"],
|
|
4
|
-
"sourcesContent": ["import { createVariable, isVariable } from '../createVariable'\nimport { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport { CreateTamaguiProps } from '../types'\n\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}\n\nexport function proxyThemeToParents(\n themeName: string,\n theme: any,\n themes: CreateTamaguiProps['themes']\n) {\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 const
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAA2C;AAC3C,+BAAkC;AAK3B,SAAS,oBAAoB,OAAY,KAAa;AAC3D,QAAM,MAAM,MAAM;AAClB,QAAM,WAAW;AACjB,MAAI,KAAC,kCAAW,GAAG,GAAG;AACpB,UAAM,WAAO,sCAAe;AAAA,MAC1B,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,OAAO;AACL,QAAI,IAAI,SAAS,UAAU;AAEzB,YAAM,WAAO,sCAAe;AAAA,QAC1B,KAAK,IAAI;AAAA,QACT,MAAM;AAAA,QACN,KAAK,IAAI;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEO,SAAS,oBACd,WACA,OACA,QACA;AAEA,QAAM,MAAgB,CAAC;AAGvB,QAAM,UAAU,UACb,MAAM,GAAG,EACT,MAAM,GAAG,EAAE,EACX,IAAI,CAAC,SAAS;AACb,QAAI,KAAK,IAAI;AACb,WAAO,IAAI,KAAK,GAAG;AAAA,EACrB,CAAC;AAEH,QAAM,
|
|
4
|
+
"sourcesContent": ["import { createVariable, isVariable } from '../createVariable'\nimport { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport { CreateTamaguiProps } from '../types'\n\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}\n\nexport function proxyThemeToParents(\n themeName: string,\n theme: any,\n themes: CreateTamaguiProps['themes']\n) {\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 const len = parents.length\n\n // proxy fallback values to parent theme values\n return new Proxy(theme, {\n get(target, key) {\n if (key === GetThemeUnwrapped) {\n return theme\n }\n if (!len || Reflect.has(target, key)) {\n return Reflect.get(target, key)\n }\n // check parents\n for (let i = len - 1; i >= 0; i--) {\n const parent = themes[parents[i]]\n if (!parent) continue\n if (Reflect.has(parent, key)) {\n return Reflect.get(parent, key)\n }\n }\n return Reflect.get(target, key)\n },\n })\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAA2C;AAC3C,+BAAkC;AAK3B,SAAS,oBAAoB,OAAY,KAAa;AAC3D,QAAM,MAAM,MAAM;AAClB,QAAM,WAAW;AACjB,MAAI,KAAC,kCAAW,GAAG,GAAG;AACpB,UAAM,WAAO,sCAAe;AAAA,MAC1B,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,OAAO;AACL,QAAI,IAAI,SAAS,UAAU;AAEzB,YAAM,WAAO,sCAAe;AAAA,QAC1B,KAAK,IAAI;AAAA,QACT,MAAM;AAAA,QACN,KAAK,IAAI;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEO,SAAS,oBACd,WACA,OACA,QACA;AAEA,QAAM,MAAgB,CAAC;AAGvB,QAAM,UAAU,UACb,MAAM,GAAG,EACT,MAAM,GAAG,EAAE,EACX,IAAI,CAAC,SAAS;AACb,QAAI,KAAK,IAAI;AACb,WAAO,IAAI,KAAK,GAAG;AAAA,EACrB,CAAC;AAEH,QAAM,MAAM,QAAQ;AAGpB,SAAO,IAAI,MAAM,OAAO;AAAA,IACtB,IAAI,QAAQ,KAAK;AACf,UAAI,QAAQ,4CAAmB;AAC7B,eAAO;AAAA,MACT;AACA,UAAI,CAAC,OAAO,QAAQ,IAAI,QAAQ,GAAG,GAAG;AACpC,eAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,MAChC;AAEA,eAAS,IAAI,MAAM,GAAG,KAAK,GAAG,KAAK;AACjC,cAAM,SAAS,OAAO,QAAQ;AAC9B,YAAI,CAAC;AAAQ;AACb,YAAI,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC5B,iBAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,QAChC;AAAA,MACF;AACA,aAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,IAChC;AAAA,EACF,CAAC;AACH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createFont.ts"],
|
|
4
|
-
"sourcesContent": ["import { FontWeightSteps, GenericFont } from './types'\n\nconst fontWeights: FontWeightSteps[] = [\n '100',\n '200',\n '300',\n '400',\n '500',\n '600',\n '700',\n '800',\n '900',\n]\n\nconst processSection = <T>(\n section: string | Record<string, T>,\n keys: string[],\n defaultValue?: any\n): string | Record<string, T> => {\n if (typeof section === 'string') return section\n\n const sectionKeys = Object.keys(section)\n let fillValue = section[sectionKeys[0]]\n\n return Object.fromEntries(\n [...new Set([...keys, ...sectionKeys])].map((key) => {\n const value = section[key] ?? defaultValue ?? fillValue\n fillValue = value\n defaultValue = value\n return [key, value]\n })\n )\n}\n\nexport const createFont = <A extends GenericFont>(font: A): A => {\n const sizeKeys = Object.keys(font.size)\n const processedFont = Object.fromEntries(\n Object.entries(font).map(([key, section]) => {\n return [\n key,\n processSection(\n section,\n key === 'face' ? fontWeights : sizeKeys,\n key === 'face' ? { normal: font.family } : undefined\n ),\n ]\n })\n )\n return Object.freeze(processedFont) as A\n}\n"],
|
|
4
|
+
"sourcesContent": ["import { FontWeightSteps, GenericFont } from './types'\n\nconst fontWeights: FontWeightSteps[] = [\n '100',\n '200',\n '300',\n '400',\n '500',\n '600',\n '700',\n '800',\n '900',\n]\n\nconst processSection = <T>(\n section: string | Record<string, T>,\n keys: string[],\n defaultValue?: any\n): string | Record<string, T> => {\n if (typeof section === 'string') return section\n\n const sectionKeys = Object.keys(section)\n let fillValue = section[sectionKeys[0]]\n\n return Object.fromEntries(\n [...new Set([...keys, ...sectionKeys])].map((key) => {\n const value = section[key] ?? defaultValue ?? fillValue\n fillValue = value\n defaultValue = value\n return [key, value]\n })\n )\n}\n\nexport const createFont = <A extends GenericFont>(font: A): A => {\n const sizeKeys = Object.keys(font.size)\n const processedFont = Object.fromEntries(\n Object.entries(font).map(([key, section]) => {\n return [\n key,\n processSection(\n section as any,\n key === 'face' ? fontWeights : sizeKeys,\n key === 'face' ? { normal: font.family } : undefined\n ),\n ]\n })\n )\n return Object.freeze(processedFont) as A\n}\n"],
|
|
5
5
|
"mappings": "AAEA,MAAM,cAAiC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,iBAAiB,CACrB,SACA,MACA,iBAC+B;AAC/B,MAAI,OAAO,YAAY;AAAU,WAAO;AAExC,QAAM,cAAc,OAAO,KAAK,OAAO;AACvC,MAAI,YAAY,QAAQ,YAAY;AAEpC,SAAO,OAAO;AAAA,IACZ,CAAC,GAAG,oBAAI,IAAI,CAAC,GAAG,MAAM,GAAG,WAAW,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ;AACnD,YAAM,QAAQ,QAAQ,QAAQ,gBAAgB;AAC9C,kBAAY;AACZ,qBAAe;AACf,aAAO,CAAC,KAAK,KAAK;AAAA,IACpB,CAAC;AAAA,EACH;AACF;AAEO,MAAM,aAAa,CAAwB,SAAe;AAC/D,QAAM,WAAW,OAAO,KAAK,KAAK,IAAI;AACtC,QAAM,gBAAgB,OAAO;AAAA,IAC3B,OAAO,QAAQ,IAAI,EAAE,IAAI,CAAC,CAAC,KAAK,OAAO,MAAM;AAC3C,aAAO;AAAA,QACL;AAAA,QACA;AAAA,UACE;AAAA,UACA,QAAQ,SAAS,cAAc;AAAA,UAC/B,QAAQ,SAAS,EAAE,QAAQ,KAAK,OAAO,IAAI;AAAA,QAC7C;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACA,SAAO,OAAO,OAAO,aAAa;AACpC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/createTokens.js
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import { createVariables } from "./createVariables";
|
|
2
|
-
function createTokens(
|
|
3
|
-
return createVariables(
|
|
2
|
+
function createTokens(tokens2) {
|
|
3
|
+
return createVariables(tokens2);
|
|
4
4
|
}
|
|
5
|
+
const tokens = createTokens({
|
|
6
|
+
size: { 0: 1 },
|
|
7
|
+
space: { 0: 1 },
|
|
8
|
+
radius: { 0: 1 },
|
|
9
|
+
zIndex: { 0: 1 },
|
|
10
|
+
color: { 0: "hi" }
|
|
11
|
+
});
|
|
5
12
|
export {
|
|
6
13
|
createTokens
|
|
7
14
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createTokens.ts"],
|
|
4
|
-
"sourcesContent": ["import { Variable } from './createVariable'\nimport { createVariables } from './createVariables'\nimport { CreateTokens } from './types'\n\n// tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }\nexport function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {\n return createVariables(tokens) as any\n}\n\n// verbose but gives us nice types...\ntype MakeTokens<T> = T extends {\n color: infer E\n space: infer F\n size: infer G\n radius: infer H\n zIndex: infer J\n}\n ? {\n color: {\n [Key in keyof E
|
|
5
|
-
"mappings": "AACA,SAAS,uBAAuB;AAIzB,SAAS,
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import { Variable } from './createVariable'\nimport { createVariables } from './createVariables'\nimport { CreateTokens } from './types'\n\n// tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }\nexport function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {\n return createVariables(tokens) as any\n}\n\n// verbose but gives us nice types...\ntype MakeTokens<T> = T extends {\n color: infer E\n space: infer F\n size: infer G\n radius: infer H\n zIndex: infer J\n}\n ? {\n color: {\n // removes $ prefix allowing for defining either as $1: or 1:,\n // which is important because Chrome re-orders numerical-seeming keys :/\n [Key in keyof E extends `$${infer X}` ? X : keyof E]: Variable<string>\n }\n space: {\n [Key in keyof F extends `$${infer X}` ? X : keyof F]: Variable<number>\n }\n size: {\n [Key in keyof G extends `$${infer X}` ? X : keyof G]: Variable<number>\n }\n radius: {\n [Key in keyof H extends `$${infer X}` ? X : keyof H]: Variable<number>\n }\n zIndex: {\n [Key in keyof J extends `$${infer X}` ? X : keyof J]: Variable<number>\n }\n }\n : never\n\n// test\nconst tokens = createTokens({\n size: { 0: 1 },\n space: { 0: 1 },\n radius: { 0: 1 },\n zIndex: { 0: 1 },\n color: { 0: 'hi' },\n})\n"],
|
|
5
|
+
"mappings": "AACA,SAAS,uBAAuB;AAIzB,SAAS,aAAqCA,SAA0B;AAC7E,SAAO,gBAAgBA,OAAM;AAC/B;AAgCA,MAAM,SAAS,aAAa;AAAA,EAC1B,MAAM,EAAE,GAAG,EAAE;AAAA,EACb,OAAO,EAAE,GAAG,EAAE;AAAA,EACd,QAAQ,EAAE,GAAG,EAAE;AAAA,EACf,QAAQ,EAAE,GAAG,EAAE;AAAA,EACf,OAAO,EAAE,GAAG,KAAK;AACnB,CAAC;",
|
|
6
|
+
"names": ["tokens"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createVariable.ts"],
|
|
4
|
-
"sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { simpleHash } from '@tamagui/helpers'\n\nimport { getConfig } from './config'\n\n/**\n * Should rename this to Token\n * Moving to objects for React Server Components support\n */\n\nconst IS_VAR = 'isVar'\n\
|
|
5
|
-
"mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAE3B,SAAS,iBAAiB;AAO1B,MAAM,SAAS;AAaR,MAAM,iBAAiB,
|
|
4
|
+
"sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { simpleHash } from '@tamagui/helpers'\n\nimport { getConfig } from './config'\n\n/**\n * Should rename this to Token\n * Moving to objects for React Server Components support\n */\n\nconst IS_VAR = 'isVar'\n\nexport interface Variable<A = any> {\n [IS_VAR]?: true\n variable?: string\n val: A\n name: string\n key: string\n}\n\nexport type MakeVariable<A = any> = A extends string | number ? Variable<A> : A\n\ntype VariableIn<A = any> = Pick<Variable<A>, 'key' | 'name' | 'val'>\nexport const createVariable = <A extends string | number = any>(\n props: VariableIn<A>\n): Variable<A> => {\n if (isVariable(props)) return props\n const { key, name, val } = props\n return {\n [IS_VAR]: true,\n key: key!,\n name: simpleHash(name, 40),\n val: val as any,\n variable: isWeb ? createCSSVariable(name) : '',\n }\n}\n\n// could do weakmap cache\nexport function variableToString(vrble?: any, getValue = false) {\n if (isVariable(vrble)) {\n if (!getValue && isWeb && vrble.variable) {\n return vrble.variable\n }\n return `${vrble.val}`\n }\n return `${vrble || ''}`\n}\n\nexport function isVariable(v: Variable | any): v is Variable {\n return v && typeof v === 'object' && IS_VAR in v\n}\n\nexport function getVariable(nameOrVariable: Variable | string) {\n setDidGetVariableValue(true)\n if (isVariable(nameOrVariable)) {\n return variableToString(nameOrVariable)\n }\n const tokens = getConfig().tokensParsed\n return variableToString(tokens[nameOrVariable] ?? nameOrVariable)\n}\n\nlet accessed = false\nexport const setDidGetVariableValue = (val: boolean) => (accessed = val)\nexport const didGetVariableValue = () => accessed\n\nexport function getVariableValue(v: Variable | any) {\n if (isVariable(v)) {\n setDidGetVariableValue(true)\n return v.val\n }\n return v\n}\n\nexport function getVariableName(v: Variable | any) {\n if (isVariable(v)) return v.name\n return v\n}\n\nexport function getVariableVariable(v: Variable | any) {\n if (isVariable(v)) return v.variable\n return v\n}\n\n// bugfix { space: { 0.5: 10 } } was generating var(--space-0.5) (invalid CSS):\nexport const createCSSVariable = (nameProp: string, includeVar = true) => {\n if (process.env.NODE_ENV === 'development') {\n if (!nameProp || typeof nameProp !== 'string') {\n throw new Error(`createCSSVariable expected string: ${nameProp}`)\n }\n }\n const name = simpleHash(nameProp, 60)\n return includeVar ? `var(--${name})` : name\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAE3B,SAAS,iBAAiB;AAO1B,MAAM,SAAS;AAaR,MAAM,iBAAiB,CAC5B,UACgB;AAChB,MAAI,WAAW,KAAK;AAAG,WAAO;AAC9B,QAAM,EAAE,KAAK,MAAM,IAAI,IAAI;AAC3B,SAAO;AAAA,IACL,CAAC,SAAS;AAAA,IACV;AAAA,IACA,MAAM,WAAW,MAAM,EAAE;AAAA,IACzB;AAAA,IACA,UAAU,QAAQ,kBAAkB,IAAI,IAAI;AAAA,EAC9C;AACF;AAGO,SAAS,iBAAiB,OAAa,WAAW,OAAO;AAC9D,MAAI,WAAW,KAAK,GAAG;AACrB,QAAI,CAAC,YAAY,SAAS,MAAM,UAAU;AACxC,aAAO,MAAM;AAAA,IACf;AACA,WAAO,GAAG,MAAM;AAAA,EAClB;AACA,SAAO,GAAG,SAAS;AACrB;AAEO,SAAS,WAAW,GAAkC;AAC3D,SAAO,KAAK,OAAO,MAAM,YAAY,UAAU;AACjD;AAEO,SAAS,YAAY,gBAAmC;AAC7D,yBAAuB,IAAI;AAC3B,MAAI,WAAW,cAAc,GAAG;AAC9B,WAAO,iBAAiB,cAAc;AAAA,EACxC;AACA,QAAM,SAAS,UAAU,EAAE;AAC3B,SAAO,iBAAiB,OAAO,mBAAmB,cAAc;AAClE;AAEA,IAAI,WAAW;AACR,MAAM,yBAAyB,CAAC,QAAkB,WAAW;AAC7D,MAAM,sBAAsB,MAAM;AAElC,SAAS,iBAAiB,GAAmB;AAClD,MAAI,WAAW,CAAC,GAAG;AACjB,2BAAuB,IAAI;AAC3B,WAAO,EAAE;AAAA,EACX;AACA,SAAO;AACT;AAEO,SAAS,gBAAgB,GAAmB;AACjD,MAAI,WAAW,CAAC;AAAG,WAAO,EAAE;AAC5B,SAAO;AACT;AAEO,SAAS,oBAAoB,GAAmB;AACrD,MAAI,WAAW,CAAC;AAAG,WAAO,EAAE;AAC5B,SAAO;AACT;AAGO,MAAM,oBAAoB,CAAC,UAAkB,aAAa,SAAS;AACxE,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,YAAY,OAAO,aAAa,UAAU;AAC7C,YAAM,IAAI,MAAM,sCAAsC,UAAU;AAAA,IAClE;AAAA,EACF;AACA,QAAM,OAAO,WAAW,UAAU,EAAE;AACpC,SAAO,aAAa,SAAS,UAAU;AACzC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -25,20 +25,19 @@ function proxyThemeToParents(themeName, theme, themes) {
|
|
|
25
25
|
cur.push(part);
|
|
26
26
|
return cur.join("_");
|
|
27
27
|
});
|
|
28
|
-
const
|
|
28
|
+
const len = parents.length;
|
|
29
29
|
return new Proxy(theme, {
|
|
30
30
|
get(target, key) {
|
|
31
31
|
if (key === GetThemeUnwrapped) {
|
|
32
32
|
return theme;
|
|
33
33
|
}
|
|
34
|
-
if (!
|
|
34
|
+
if (!len || Reflect.has(target, key)) {
|
|
35
35
|
return Reflect.get(target, key);
|
|
36
36
|
}
|
|
37
|
-
for (let i =
|
|
37
|
+
for (let i = len - 1; i >= 0; i--) {
|
|
38
38
|
const parent = themes[parents[i]];
|
|
39
|
-
if (!parent)
|
|
39
|
+
if (!parent)
|
|
40
40
|
continue;
|
|
41
|
-
}
|
|
42
41
|
if (Reflect.has(parent, key)) {
|
|
43
42
|
return Reflect.get(parent, key);
|
|
44
43
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/themes.ts"],
|
|
4
|
-
"sourcesContent": ["import { createVariable, isVariable } from '../createVariable'\nimport { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport { CreateTamaguiProps } from '../types'\n\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}\n\nexport function proxyThemeToParents(\n themeName: string,\n theme: any,\n themes: CreateTamaguiProps['themes']\n) {\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 const
|
|
5
|
-
"mappings": "AAAA,SAAS,gBAAgB,kBAAkB;AAC3C,SAAS,yBAAyB;AAK3B,SAAS,oBAAoB,OAAY,KAAa;AAC3D,QAAM,MAAM,MAAM;AAClB,QAAM,WAAW;AACjB,MAAI,CAAC,WAAW,GAAG,GAAG;AACpB,UAAM,OAAO,eAAe;AAAA,MAC1B,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,OAAO;AACL,QAAI,IAAI,SAAS,UAAU;AAEzB,YAAM,OAAO,eAAe;AAAA,QAC1B,KAAK,IAAI;AAAA,QACT,MAAM;AAAA,QACN,KAAK,IAAI;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEO,SAAS,oBACd,WACA,OACA,QACA;AAEA,QAAM,MAAgB,CAAC;AAGvB,QAAM,UAAU,UACb,MAAM,GAAG,EACT,MAAM,GAAG,EAAE,EACX,IAAI,CAAC,SAAS;AACb,QAAI,KAAK,IAAI;AACb,WAAO,IAAI,KAAK,GAAG;AAAA,EACrB,CAAC;AAEH,QAAM,
|
|
4
|
+
"sourcesContent": ["import { createVariable, isVariable } from '../createVariable'\nimport { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport { CreateTamaguiProps } from '../types'\n\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}\n\nexport function proxyThemeToParents(\n themeName: string,\n theme: any,\n themes: CreateTamaguiProps['themes']\n) {\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 const len = parents.length\n\n // proxy fallback values to parent theme values\n return new Proxy(theme, {\n get(target, key) {\n if (key === GetThemeUnwrapped) {\n return theme\n }\n if (!len || Reflect.has(target, key)) {\n return Reflect.get(target, key)\n }\n // check parents\n for (let i = len - 1; i >= 0; i--) {\n const parent = themes[parents[i]]\n if (!parent) continue\n if (Reflect.has(parent, key)) {\n return Reflect.get(parent, key)\n }\n }\n return Reflect.get(target, key)\n },\n })\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,gBAAgB,kBAAkB;AAC3C,SAAS,yBAAyB;AAK3B,SAAS,oBAAoB,OAAY,KAAa;AAC3D,QAAM,MAAM,MAAM;AAClB,QAAM,WAAW;AACjB,MAAI,CAAC,WAAW,GAAG,GAAG;AACpB,UAAM,OAAO,eAAe;AAAA,MAC1B,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,OAAO;AACL,QAAI,IAAI,SAAS,UAAU;AAEzB,YAAM,OAAO,eAAe;AAAA,QAC1B,KAAK,IAAI;AAAA,QACT,MAAM;AAAA,QACN,KAAK,IAAI;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEO,SAAS,oBACd,WACA,OACA,QACA;AAEA,QAAM,MAAgB,CAAC;AAGvB,QAAM,UAAU,UACb,MAAM,GAAG,EACT,MAAM,GAAG,EAAE,EACX,IAAI,CAAC,SAAS;AACb,QAAI,KAAK,IAAI;AACb,WAAO,IAAI,KAAK,GAAG;AAAA,EACrB,CAAC;AAEH,QAAM,MAAM,QAAQ;AAGpB,SAAO,IAAI,MAAM,OAAO;AAAA,IACtB,IAAI,QAAQ,KAAK;AACf,UAAI,QAAQ,mBAAmB;AAC7B,eAAO;AAAA,MACT;AACA,UAAI,CAAC,OAAO,QAAQ,IAAI,QAAQ,GAAG,GAAG;AACpC,eAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,MAChC;AAEA,eAAS,IAAI,MAAM,GAAG,KAAK,GAAG,KAAK;AACjC,cAAM,SAAS,OAAO,QAAQ;AAC9B,YAAI,CAAC;AAAQ;AACb,YAAI,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC5B,iBAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,QAChC;AAAA,MACF;AACA,aAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,IAChC;AAAA,EACF,CAAC;AACH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.18",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -30,22 +30,22 @@
|
|
|
30
30
|
"reset.css"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@tamagui/compose-refs": "^1.0.
|
|
34
|
-
"@tamagui/constants": "^1.0.
|
|
35
|
-
"@tamagui/helpers": "^1.0.
|
|
36
|
-
"@tamagui/normalize-css-color": "^1.0.
|
|
37
|
-
"@tamagui/react-native-use-pressable": "^1.0.
|
|
38
|
-
"@tamagui/react-native-use-responder-events": "^1.0.
|
|
39
|
-
"@tamagui/use-did-finish-ssr": "^1.0.
|
|
40
|
-
"@tamagui/use-event": "^1.0.
|
|
41
|
-
"@tamagui/use-force-update": "^1.0.
|
|
33
|
+
"@tamagui/compose-refs": "^1.0.18",
|
|
34
|
+
"@tamagui/constants": "^1.0.18",
|
|
35
|
+
"@tamagui/helpers": "^1.0.18",
|
|
36
|
+
"@tamagui/normalize-css-color": "^1.0.18",
|
|
37
|
+
"@tamagui/react-native-use-pressable": "^1.0.18",
|
|
38
|
+
"@tamagui/react-native-use-responder-events": "^1.0.18",
|
|
39
|
+
"@tamagui/use-did-finish-ssr": "^1.0.18",
|
|
40
|
+
"@tamagui/use-event": "^1.0.18",
|
|
41
|
+
"@tamagui/use-force-update": "^1.0.18"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": "*",
|
|
45
45
|
"react-dom": "*"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@tamagui/build": "^1.0.
|
|
48
|
+
"@tamagui/build": "^1.0.18",
|
|
49
49
|
"@testing-library/react": "^13.4.0",
|
|
50
50
|
"csstype": "^3.0.10",
|
|
51
51
|
"react": "^18.2.0",
|
package/src/createFont.ts
CHANGED
package/src/createTokens.ts
CHANGED
|
@@ -17,19 +17,30 @@ type MakeTokens<T> = T extends {
|
|
|
17
17
|
}
|
|
18
18
|
? {
|
|
19
19
|
color: {
|
|
20
|
-
|
|
20
|
+
// removes $ prefix allowing for defining either as $1: or 1:,
|
|
21
|
+
// which is important because Chrome re-orders numerical-seeming keys :/
|
|
22
|
+
[Key in keyof E extends `$${infer X}` ? X : keyof E]: Variable<string>
|
|
21
23
|
}
|
|
22
24
|
space: {
|
|
23
|
-
[Key in keyof F
|
|
25
|
+
[Key in keyof F extends `$${infer X}` ? X : keyof F]: Variable<number>
|
|
24
26
|
}
|
|
25
27
|
size: {
|
|
26
|
-
[Key in keyof G
|
|
28
|
+
[Key in keyof G extends `$${infer X}` ? X : keyof G]: Variable<number>
|
|
27
29
|
}
|
|
28
30
|
radius: {
|
|
29
|
-
[Key in keyof H
|
|
31
|
+
[Key in keyof H extends `$${infer X}` ? X : keyof H]: Variable<number>
|
|
30
32
|
}
|
|
31
33
|
zIndex: {
|
|
32
|
-
[Key in keyof J
|
|
34
|
+
[Key in keyof J extends `$${infer X}` ? X : keyof J]: Variable<number>
|
|
33
35
|
}
|
|
34
36
|
}
|
|
35
37
|
: never
|
|
38
|
+
|
|
39
|
+
// test
|
|
40
|
+
const tokens = createTokens({
|
|
41
|
+
size: { 0: 1 },
|
|
42
|
+
space: { 0: 1 },
|
|
43
|
+
radius: { 0: 1 },
|
|
44
|
+
zIndex: { 0: 1 },
|
|
45
|
+
color: { 0: 'hi' },
|
|
46
|
+
})
|
package/src/createVariable.ts
CHANGED
|
@@ -10,25 +10,27 @@ import { getConfig } from './config'
|
|
|
10
10
|
|
|
11
11
|
const IS_VAR = 'isVar'
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
export interface Variable<A = any> {
|
|
14
|
+
[IS_VAR]?: true
|
|
15
|
+
variable?: string
|
|
14
16
|
val: A
|
|
15
17
|
name: string
|
|
16
18
|
key: string
|
|
17
19
|
}
|
|
18
20
|
|
|
19
|
-
export type
|
|
20
|
-
[IS_VAR]?: true
|
|
21
|
-
variable?: string
|
|
22
|
-
}
|
|
21
|
+
export type MakeVariable<A = any> = A extends string | number ? Variable<A> : A
|
|
23
22
|
|
|
24
|
-
|
|
23
|
+
type VariableIn<A = any> = Pick<Variable<A>, 'key' | 'name' | 'val'>
|
|
24
|
+
export const createVariable = <A extends string | number = any>(
|
|
25
|
+
props: VariableIn<A>
|
|
26
|
+
): Variable<A> => {
|
|
25
27
|
if (isVariable(props)) return props
|
|
26
28
|
const { key, name, val } = props
|
|
27
29
|
return {
|
|
28
30
|
[IS_VAR]: true,
|
|
29
|
-
key
|
|
31
|
+
key: key!,
|
|
30
32
|
name: simpleHash(name, 40),
|
|
31
|
-
val,
|
|
33
|
+
val: val as any,
|
|
32
34
|
variable: isWeb ? createCSSVariable(name) : '',
|
|
33
35
|
}
|
|
34
36
|
}
|
package/src/helpers/themes.ts
CHANGED
|
@@ -42,7 +42,7 @@ export function proxyThemeToParents(
|
|
|
42
42
|
return cur.join('_')
|
|
43
43
|
})
|
|
44
44
|
|
|
45
|
-
const
|
|
45
|
+
const len = parents.length
|
|
46
46
|
|
|
47
47
|
// proxy fallback values to parent theme values
|
|
48
48
|
return new Proxy(theme, {
|
|
@@ -50,15 +50,13 @@ export function proxyThemeToParents(
|
|
|
50
50
|
if (key === GetThemeUnwrapped) {
|
|
51
51
|
return theme
|
|
52
52
|
}
|
|
53
|
-
if (!
|
|
53
|
+
if (!len || Reflect.has(target, key)) {
|
|
54
54
|
return Reflect.get(target, key)
|
|
55
55
|
}
|
|
56
56
|
// check parents
|
|
57
|
-
for (let i =
|
|
57
|
+
for (let i = len - 1; i >= 0; i--) {
|
|
58
58
|
const parent = themes[parents[i]]
|
|
59
|
-
if (!parent)
|
|
60
|
-
continue
|
|
61
|
-
}
|
|
59
|
+
if (!parent) continue
|
|
62
60
|
if (Reflect.has(parent, key)) {
|
|
63
61
|
return Reflect.get(parent, key)
|
|
64
62
|
}
|
package/types/createTokens.d.ts
CHANGED
|
@@ -9,19 +9,19 @@ type MakeTokens<T> = T extends {
|
|
|
9
9
|
zIndex: infer J;
|
|
10
10
|
} ? {
|
|
11
11
|
color: {
|
|
12
|
-
[Key in keyof E
|
|
12
|
+
[Key in keyof E extends `$${infer X}` ? X : keyof E]: Variable<string>;
|
|
13
13
|
};
|
|
14
14
|
space: {
|
|
15
|
-
[Key in keyof F
|
|
15
|
+
[Key in keyof F extends `$${infer X}` ? X : keyof F]: Variable<number>;
|
|
16
16
|
};
|
|
17
17
|
size: {
|
|
18
|
-
[Key in keyof G
|
|
18
|
+
[Key in keyof G extends `$${infer X}` ? X : keyof G]: Variable<number>;
|
|
19
19
|
};
|
|
20
20
|
radius: {
|
|
21
|
-
[Key in keyof H
|
|
21
|
+
[Key in keyof H extends `$${infer X}` ? X : keyof H]: Variable<number>;
|
|
22
22
|
};
|
|
23
23
|
zIndex: {
|
|
24
|
-
[Key in keyof J
|
|
24
|
+
[Key in keyof J extends `$${infer X}` ? X : keyof J]: Variable<number>;
|
|
25
25
|
};
|
|
26
26
|
} : never;
|
|
27
27
|
export {};
|
|
@@ -3,22 +3,16 @@
|
|
|
3
3
|
* Moving to objects for React Server Components support
|
|
4
4
|
*/
|
|
5
5
|
declare const IS_VAR = "isVar";
|
|
6
|
-
|
|
7
|
-
val: A;
|
|
8
|
-
name: string;
|
|
9
|
-
key: string;
|
|
10
|
-
};
|
|
11
|
-
export type Variable<A = any> = VariableIn<A> & {
|
|
6
|
+
export interface Variable<A = any> {
|
|
12
7
|
[IS_VAR]?: true;
|
|
13
8
|
variable?: string;
|
|
14
|
-
};
|
|
15
|
-
export declare const createVariable: <A extends string | number = any>(props: VariableIn<A>) => VariableIn<A> | {
|
|
16
|
-
isVar: boolean;
|
|
17
|
-
key: string;
|
|
18
|
-
name: string;
|
|
19
9
|
val: A;
|
|
20
|
-
|
|
21
|
-
|
|
10
|
+
name: string;
|
|
11
|
+
key: string;
|
|
12
|
+
}
|
|
13
|
+
export type MakeVariable<A = any> = A extends string | number ? Variable<A> : A;
|
|
14
|
+
type VariableIn<A = any> = Pick<Variable<A>, 'key' | 'name' | 'val'>;
|
|
15
|
+
export declare const createVariable: <A extends string | number = any>(props: VariableIn<A>) => Variable<A>;
|
|
22
16
|
export declare function variableToString(vrble?: any, getValue?: boolean): string;
|
|
23
17
|
export declare function isVariable(v: Variable | any): v is Variable;
|
|
24
18
|
export declare function getVariable(nameOrVariable: Variable | string): string;
|
|
@@ -28,7 +28,7 @@ export declare class ThemeManager {
|
|
|
28
28
|
getState(props?: ThemeProps, parentManager?: ThemeManager | null): ThemeManagerState | null;
|
|
29
29
|
_allKeys: Set<string> | null;
|
|
30
30
|
get allKeys(): Set<string>;
|
|
31
|
-
getValue(key: string, state?: ThemeManagerState): import("
|
|
31
|
+
getValue(key: string, state?: ThemeManagerState): string | number | import("..").Variable<any> | undefined;
|
|
32
32
|
notify(): void;
|
|
33
33
|
onChangeTheme(cb: ThemeListener): () => void;
|
|
34
34
|
}
|