@tamagui/theme-base 1.0.11 → 1.0.13
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/tokens.js.map +2 -2
- package/dist/esm/tokens.js.map +2 -2
- package/package.json +5 -5
- package/src/tokens.tsx +3 -1
- package/types/tokens.d.ts +30 -2
- package/dist/jsx/colorUtils.js +0 -41
- package/dist/jsx/colorUtils.js.map +0 -7
- package/dist/jsx/index.js +0 -4
- package/dist/jsx/index.js.map +0 -7
- package/dist/jsx/themes.js +0 -308
- package/dist/jsx/themes.js.map +0 -7
- package/dist/jsx/tokens.js +0 -167
- package/dist/jsx/tokens.js.map +0 -7
package/dist/cjs/tokens.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/tokens.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n blue,\n blueDark,\n gray,\n grayDark,\n green,\n greenDark,\n orange,\n orangeDark,\n pink,\n pinkDark,\n purple,\n purpleDark,\n red,\n redDark,\n yellow,\n yellowDark,\n} from '@tamagui/colors'\nimport { Variable, createTokens } from '@tamagui/core'\n\n// should roughly map to button/input etc height at each level\n// fonts should match that height/lineHeight at each stop\n// so these are really non-linear on purpose\n// why?\n// - at sizes <1, used for fine grained things (borders, smallest paddingY)\n// - so smallest padY should be roughly 1-4px so it can join with lineHeight\n// - at sizes >=1, have to consider \"pressability\" (jumps up)\n// - after that it should go upwards somewhat naturally\n// - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster\n// but also one more wrinkle...\n// space is used in conjunction with size\n// i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)\nexport const size = {\n $0: 0,\n '$0.25': 2,\n '$0.5': 4,\n '$0.75': 8,\n $1: 20,\n '$1.5': 24,\n $2: 28,\n '$2.5': 32,\n $3: 36,\n '$3.5': 40,\n $4: 44,\n $true: 44,\n '$4.5': 48,\n $5: 52,\n $6: 64,\n $7: 74,\n $8: 84,\n $9: 94,\n $10: 104,\n $11: 124,\n $12: 144,\n $13: 164,\n $14: 184,\n $15: 204,\n $16: 224,\n $17: 224,\n $18: 244,\n $19: 264,\n $20: 284,\n}\n\ntype SizeKeysIn = keyof typeof size\ntype Sizes = {\n [Key in SizeKeysIn extends `$${infer Key}` ? Key : SizeKeysIn]: number\n}\ntype SizeKeys = `${keyof Sizes extends `${infer K}` ? K : never}`\n\nconst spaces = Object.entries(size).map(([k, v]) => {\n return [k, sizeToSpace(v)]\n})\n\n// a bit odd but keeping backward compat for values >8 while fixing below\nfunction sizeToSpace(v: number) {\n if (v === 0) return 0\n if (v === 2) return 0.5\n if (v === 4) return 1\n if (v === 8) return 1.5\n if (v <= 16) return Math.round(v * 0.333)\n return Math.floor(v * 0.7 - 12)\n}\n\nconst spacesNegative = spaces.map(([k, v]) => [`$-${(k as string).slice(1)}`, -v])\n\nexport const space: {\n [Key in
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAiBO;AACP,kBAAuC;AAchC,MAAM,OAAO;AAAA,EAClB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP;AAQA,MAAM,SAAS,OAAO,QAAQ,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM;AAClD,SAAO,CAAC,GAAG,YAAY,CAAC,CAAC;AAC3B,CAAC;AAGD,SAAS,YAAY,GAAW;AAC9B,MAAI,MAAM;AAAG,WAAO;AACpB,MAAI,MAAM;AAAG,WAAO;AACpB,MAAI,MAAM;AAAG,WAAO;AACpB,MAAI,MAAM;AAAG,WAAO;AACpB,MAAI,KAAK;AAAI,WAAO,KAAK,MAAM,IAAI,KAAK;AACxC,SAAO,KAAK,MAAM,IAAI,MAAM,EAAE;AAChC;AAEA,MAAM,iBAAiB,OAAO,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,KAAM,EAAa,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AAE1E,MAAM,
|
|
4
|
+
"sourcesContent": ["import {\n blue,\n blueDark,\n gray,\n grayDark,\n green,\n greenDark,\n orange,\n orangeDark,\n pink,\n pinkDark,\n purple,\n purpleDark,\n red,\n redDark,\n yellow,\n yellowDark,\n} from '@tamagui/colors'\nimport { Variable, createTokens } from '@tamagui/core'\n\n// should roughly map to button/input etc height at each level\n// fonts should match that height/lineHeight at each stop\n// so these are really non-linear on purpose\n// why?\n// - at sizes <1, used for fine grained things (borders, smallest paddingY)\n// - so smallest padY should be roughly 1-4px so it can join with lineHeight\n// - at sizes >=1, have to consider \"pressability\" (jumps up)\n// - after that it should go upwards somewhat naturally\n// - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster\n// but also one more wrinkle...\n// space is used in conjunction with size\n// i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)\nexport const size = {\n $0: 0,\n '$0.25': 2,\n '$0.5': 4,\n '$0.75': 8,\n $1: 20,\n '$1.5': 24,\n $2: 28,\n '$2.5': 32,\n $3: 36,\n '$3.5': 40,\n $4: 44,\n $true: 44,\n '$4.5': 48,\n $5: 52,\n $6: 64,\n $7: 74,\n $8: 84,\n $9: 94,\n $10: 104,\n $11: 124,\n $12: 144,\n $13: 164,\n $14: 184,\n $15: 204,\n $16: 224,\n $17: 224,\n $18: 244,\n $19: 264,\n $20: 284,\n}\n\ntype SizeKeysIn = keyof typeof size\ntype Sizes = {\n [Key in SizeKeysIn extends `$${infer Key}` ? Key : SizeKeysIn]: number\n}\ntype SizeKeys = `${keyof Sizes extends `${infer K}` ? K : never}`\n\nconst spaces = Object.entries(size).map(([k, v]) => {\n return [k, sizeToSpace(v)]\n})\n\n// a bit odd but keeping backward compat for values >8 while fixing below\nfunction sizeToSpace(v: number) {\n if (v === 0) return 0\n if (v === 2) return 0.5\n if (v === 4) return 1\n if (v === 8) return 1.5\n if (v <= 16) return Math.round(v * 0.333)\n return Math.floor(v * 0.7 - 12)\n}\n\nconst spacesNegative = spaces.map(([k, v]) => [`$-${(k as string).slice(1)}`, -v])\n\nexport const space: {\n [Key in\n | `$-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}`\n | SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number\n} = {\n ...Object.fromEntries(spaces),\n ...Object.fromEntries(spacesNegative),\n} as any\n\nexport const zIndex = {\n 0: 0,\n 1: 100,\n 2: 200,\n 3: 300,\n 4: 400,\n 5: 500,\n}\n\nexport const colorTokens = {\n light: {\n blue: blue,\n gray: gray,\n green: green,\n orange: orange,\n pink: pink,\n purple: purple,\n red: red,\n yellow: yellow,\n },\n dark: {\n blue: blueDark,\n gray: grayDark,\n green: greenDark,\n orange: orangeDark,\n pink: pinkDark,\n purple: purpleDark,\n red: redDark,\n yellow: yellowDark,\n },\n}\n\nexport const darkColors = {\n ...colorTokens.dark.blue,\n ...colorTokens.dark.gray,\n ...colorTokens.dark.green,\n ...colorTokens.dark.orange,\n ...colorTokens.dark.pink,\n ...colorTokens.dark.purple,\n ...colorTokens.dark.red,\n ...colorTokens.dark.yellow,\n}\n\nexport const lightColors = {\n ...colorTokens.light.blue,\n ...colorTokens.light.gray,\n ...colorTokens.light.green,\n ...colorTokens.light.orange,\n ...colorTokens.light.pink,\n ...colorTokens.light.purple,\n ...colorTokens.light.red,\n ...colorTokens.light.yellow,\n}\n\nexport const color = {\n ...postfixObjKeys(lightColors, 'Light'),\n ...postfixObjKeys(darkColors, 'Dark'),\n}\n\nfunction postfixObjKeys<\n A extends { [key: string]: Variable<string> | string },\n B extends string\n>(\n obj: A,\n postfix: B\n): {\n [Key in `${keyof A extends string ? keyof A : never}${B}`]: Variable<string> | string\n} {\n return Object.fromEntries(\n Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])\n ) as any\n}\n\nexport const radius = {\n 0: 0,\n 1: 3,\n 2: 5,\n 3: 7,\n 4: 9,\n true: 9,\n 5: 10,\n 6: 16,\n 7: 19,\n 8: 22,\n 9: 26,\n 10: 34,\n 11: 42,\n 12: 50,\n}\n\nexport const tokens = createTokens({\n color,\n radius,\n zIndex,\n space,\n size: size as any as Sizes,\n})\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/tokens.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/tokens.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n blue,\n blueDark,\n gray,\n grayDark,\n green,\n greenDark,\n orange,\n orangeDark,\n pink,\n pinkDark,\n purple,\n purpleDark,\n red,\n redDark,\n yellow,\n yellowDark,\n} from '@tamagui/colors'\nimport { Variable, createTokens } from '@tamagui/core'\n\n// should roughly map to button/input etc height at each level\n// fonts should match that height/lineHeight at each stop\n// so these are really non-linear on purpose\n// why?\n// - at sizes <1, used for fine grained things (borders, smallest paddingY)\n// - so smallest padY should be roughly 1-4px so it can join with lineHeight\n// - at sizes >=1, have to consider \"pressability\" (jumps up)\n// - after that it should go upwards somewhat naturally\n// - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster\n// but also one more wrinkle...\n// space is used in conjunction with size\n// i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)\nexport const size = {\n $0: 0,\n '$0.25': 2,\n '$0.5': 4,\n '$0.75': 8,\n $1: 20,\n '$1.5': 24,\n $2: 28,\n '$2.5': 32,\n $3: 36,\n '$3.5': 40,\n $4: 44,\n $true: 44,\n '$4.5': 48,\n $5: 52,\n $6: 64,\n $7: 74,\n $8: 84,\n $9: 94,\n $10: 104,\n $11: 124,\n $12: 144,\n $13: 164,\n $14: 184,\n $15: 204,\n $16: 224,\n $17: 224,\n $18: 244,\n $19: 264,\n $20: 284,\n}\n\ntype SizeKeysIn = keyof typeof size\ntype Sizes = {\n [Key in SizeKeysIn extends `$${infer Key}` ? Key : SizeKeysIn]: number\n}\ntype SizeKeys = `${keyof Sizes extends `${infer K}` ? K : never}`\n\nconst spaces = Object.entries(size).map(([k, v]) => {\n return [k, sizeToSpace(v)]\n})\n\n// a bit odd but keeping backward compat for values >8 while fixing below\nfunction sizeToSpace(v: number) {\n if (v === 0) return 0\n if (v === 2) return 0.5\n if (v === 4) return 1\n if (v === 8) return 1.5\n if (v <= 16) return Math.round(v * 0.333)\n return Math.floor(v * 0.7 - 12)\n}\n\nconst spacesNegative = spaces.map(([k, v]) => [`$-${(k as string).slice(1)}`, -v])\n\nexport const space: {\n [Key in
|
|
5
|
-
"mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAmB,oBAAoB;AAchC,MAAM,OAAO;AAAA,EAClB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP;AAQA,MAAM,SAAS,OAAO,QAAQ,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM;AAClD,SAAO,CAAC,GAAG,YAAY,CAAC,CAAC;AAC3B,CAAC;AAGD,SAAS,YAAY,GAAW;AAC9B,MAAI,MAAM;AAAG,WAAO;AACpB,MAAI,MAAM;AAAG,WAAO;AACpB,MAAI,MAAM;AAAG,WAAO;AACpB,MAAI,MAAM;AAAG,WAAO;AACpB,MAAI,KAAK;AAAI,WAAO,KAAK,MAAM,IAAI,KAAK;AACxC,SAAO,KAAK,MAAM,IAAI,MAAM,EAAE;AAChC;AAEA,MAAM,iBAAiB,OAAO,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,KAAM,EAAa,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AAE1E,MAAM,
|
|
4
|
+
"sourcesContent": ["import {\n blue,\n blueDark,\n gray,\n grayDark,\n green,\n greenDark,\n orange,\n orangeDark,\n pink,\n pinkDark,\n purple,\n purpleDark,\n red,\n redDark,\n yellow,\n yellowDark,\n} from '@tamagui/colors'\nimport { Variable, createTokens } from '@tamagui/core'\n\n// should roughly map to button/input etc height at each level\n// fonts should match that height/lineHeight at each stop\n// so these are really non-linear on purpose\n// why?\n// - at sizes <1, used for fine grained things (borders, smallest paddingY)\n// - so smallest padY should be roughly 1-4px so it can join with lineHeight\n// - at sizes >=1, have to consider \"pressability\" (jumps up)\n// - after that it should go upwards somewhat naturally\n// - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster\n// but also one more wrinkle...\n// space is used in conjunction with size\n// i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)\nexport const size = {\n $0: 0,\n '$0.25': 2,\n '$0.5': 4,\n '$0.75': 8,\n $1: 20,\n '$1.5': 24,\n $2: 28,\n '$2.5': 32,\n $3: 36,\n '$3.5': 40,\n $4: 44,\n $true: 44,\n '$4.5': 48,\n $5: 52,\n $6: 64,\n $7: 74,\n $8: 84,\n $9: 94,\n $10: 104,\n $11: 124,\n $12: 144,\n $13: 164,\n $14: 184,\n $15: 204,\n $16: 224,\n $17: 224,\n $18: 244,\n $19: 264,\n $20: 284,\n}\n\ntype SizeKeysIn = keyof typeof size\ntype Sizes = {\n [Key in SizeKeysIn extends `$${infer Key}` ? Key : SizeKeysIn]: number\n}\ntype SizeKeys = `${keyof Sizes extends `${infer K}` ? K : never}`\n\nconst spaces = Object.entries(size).map(([k, v]) => {\n return [k, sizeToSpace(v)]\n})\n\n// a bit odd but keeping backward compat for values >8 while fixing below\nfunction sizeToSpace(v: number) {\n if (v === 0) return 0\n if (v === 2) return 0.5\n if (v === 4) return 1\n if (v === 8) return 1.5\n if (v <= 16) return Math.round(v * 0.333)\n return Math.floor(v * 0.7 - 12)\n}\n\nconst spacesNegative = spaces.map(([k, v]) => [`$-${(k as string).slice(1)}`, -v])\n\nexport const space: {\n [Key in\n | `$-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}`\n | SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number\n} = {\n ...Object.fromEntries(spaces),\n ...Object.fromEntries(spacesNegative),\n} as any\n\nexport const zIndex = {\n 0: 0,\n 1: 100,\n 2: 200,\n 3: 300,\n 4: 400,\n 5: 500,\n}\n\nexport const colorTokens = {\n light: {\n blue: blue,\n gray: gray,\n green: green,\n orange: orange,\n pink: pink,\n purple: purple,\n red: red,\n yellow: yellow,\n },\n dark: {\n blue: blueDark,\n gray: grayDark,\n green: greenDark,\n orange: orangeDark,\n pink: pinkDark,\n purple: purpleDark,\n red: redDark,\n yellow: yellowDark,\n },\n}\n\nexport const darkColors = {\n ...colorTokens.dark.blue,\n ...colorTokens.dark.gray,\n ...colorTokens.dark.green,\n ...colorTokens.dark.orange,\n ...colorTokens.dark.pink,\n ...colorTokens.dark.purple,\n ...colorTokens.dark.red,\n ...colorTokens.dark.yellow,\n}\n\nexport const lightColors = {\n ...colorTokens.light.blue,\n ...colorTokens.light.gray,\n ...colorTokens.light.green,\n ...colorTokens.light.orange,\n ...colorTokens.light.pink,\n ...colorTokens.light.purple,\n ...colorTokens.light.red,\n ...colorTokens.light.yellow,\n}\n\nexport const color = {\n ...postfixObjKeys(lightColors, 'Light'),\n ...postfixObjKeys(darkColors, 'Dark'),\n}\n\nfunction postfixObjKeys<\n A extends { [key: string]: Variable<string> | string },\n B extends string\n>(\n obj: A,\n postfix: B\n): {\n [Key in `${keyof A extends string ? keyof A : never}${B}`]: Variable<string> | string\n} {\n return Object.fromEntries(\n Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])\n ) as any\n}\n\nexport const radius = {\n 0: 0,\n 1: 3,\n 2: 5,\n 3: 7,\n 4: 9,\n true: 9,\n 5: 10,\n 6: 16,\n 7: 19,\n 8: 22,\n 9: 26,\n 10: 34,\n 11: 42,\n 12: 50,\n}\n\nexport const tokens = createTokens({\n color,\n radius,\n zIndex,\n space,\n size: size as any as Sizes,\n})\n"],
|
|
5
|
+
"mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAmB,oBAAoB;AAchC,MAAM,OAAO;AAAA,EAClB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP;AAQA,MAAM,SAAS,OAAO,QAAQ,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM;AAClD,SAAO,CAAC,GAAG,YAAY,CAAC,CAAC;AAC3B,CAAC;AAGD,SAAS,YAAY,GAAW;AAC9B,MAAI,MAAM;AAAG,WAAO;AACpB,MAAI,MAAM;AAAG,WAAO;AACpB,MAAI,MAAM;AAAG,WAAO;AACpB,MAAI,MAAM;AAAG,WAAO;AACpB,MAAI,KAAK;AAAI,WAAO,KAAK,MAAM,IAAI,KAAK;AACxC,SAAO,KAAK,MAAM,IAAI,MAAM,EAAE;AAChC;AAEA,MAAM,iBAAiB,OAAO,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,KAAM,EAAa,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AAE1E,MAAM,QAIT;AAAA,EACF,GAAG,OAAO,YAAY,MAAM;AAAA,EAC5B,GAAG,OAAO,YAAY,cAAc;AACtC;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACF;AAEO,MAAM,aAAa;AAAA,EACxB,GAAG,YAAY,KAAK;AAAA,EACpB,GAAG,YAAY,KAAK;AAAA,EACpB,GAAG,YAAY,KAAK;AAAA,EACpB,GAAG,YAAY,KAAK;AAAA,EACpB,GAAG,YAAY,KAAK;AAAA,EACpB,GAAG,YAAY,KAAK;AAAA,EACpB,GAAG,YAAY,KAAK;AAAA,EACpB,GAAG,YAAY,KAAK;AACtB;AAEO,MAAM,cAAc;AAAA,EACzB,GAAG,YAAY,MAAM;AAAA,EACrB,GAAG,YAAY,MAAM;AAAA,EACrB,GAAG,YAAY,MAAM;AAAA,EACrB,GAAG,YAAY,MAAM;AAAA,EACrB,GAAG,YAAY,MAAM;AAAA,EACrB,GAAG,YAAY,MAAM;AAAA,EACrB,GAAG,YAAY,MAAM;AAAA,EACrB,GAAG,YAAY,MAAM;AACvB;AAEO,MAAM,QAAQ;AAAA,EACnB,GAAG,eAAe,aAAa,OAAO;AAAA,EACtC,GAAG,eAAe,YAAY,MAAM;AACtC;AAEA,SAAS,eAIP,KACA,SAGA;AACA,SAAO,OAAO;AAAA,IACZ,OAAO,QAAQ,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,WAAW,CAAC,CAAC;AAAA,EAC3D;AACF;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM;AAAA,EACN,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,MAAM,SAAS,aAAa;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/theme-base",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.13",
|
|
4
4
|
"types": "./types/index.d.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -26,12 +26,12 @@
|
|
|
26
26
|
}
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@tamagui/colors": "^1.0.
|
|
30
|
-
"@tamagui/core": "^1.0.
|
|
31
|
-
"@tamagui/create-themes": "^1.0.
|
|
29
|
+
"@tamagui/colors": "^1.0.13",
|
|
30
|
+
"@tamagui/core": "^1.0.13",
|
|
31
|
+
"@tamagui/create-themes": "^1.0.13"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@tamagui/build": "^1.0.
|
|
34
|
+
"@tamagui/build": "^1.0.13"
|
|
35
35
|
},
|
|
36
36
|
"publishConfig": {
|
|
37
37
|
"access": "public"
|
package/src/tokens.tsx
CHANGED
|
@@ -85,7 +85,9 @@ function sizeToSpace(v: number) {
|
|
|
85
85
|
const spacesNegative = spaces.map(([k, v]) => [`$-${(k as string).slice(1)}`, -v])
|
|
86
86
|
|
|
87
87
|
export const space: {
|
|
88
|
-
[Key in
|
|
88
|
+
[Key in
|
|
89
|
+
| `$-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}`
|
|
90
|
+
| SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number
|
|
89
91
|
} = {
|
|
90
92
|
...Object.fromEntries(spaces),
|
|
91
93
|
...Object.fromEntries(spacesNegative),
|
package/types/tokens.d.ts
CHANGED
|
@@ -36,7 +36,7 @@ type Sizes = {
|
|
|
36
36
|
};
|
|
37
37
|
type SizeKeys = `${keyof Sizes extends `${infer K}` ? K : never}`;
|
|
38
38
|
export declare const space: {
|
|
39
|
-
[Key in
|
|
39
|
+
[Key in `$-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}` | SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number;
|
|
40
40
|
};
|
|
41
41
|
export declare const zIndex: {
|
|
42
42
|
0: number;
|
|
@@ -907,7 +907,35 @@ export declare const tokens: {
|
|
|
907
907
|
18: Variable<number>;
|
|
908
908
|
19: Variable<number>;
|
|
909
909
|
20: Variable<number>;
|
|
910
|
-
"$-
|
|
910
|
+
"$-0": Variable<number>;
|
|
911
|
+
"$-0.25": Variable<number>;
|
|
912
|
+
"$-0.5": Variable<number>;
|
|
913
|
+
"$-0.75": Variable<number>;
|
|
914
|
+
"$-1": Variable<number>;
|
|
915
|
+
"$-1.5": Variable<number>;
|
|
916
|
+
"$-2": Variable<number>;
|
|
917
|
+
"$-2.5": Variable<number>;
|
|
918
|
+
"$-3": Variable<number>;
|
|
919
|
+
"$-3.5": Variable<number>;
|
|
920
|
+
"$-4": Variable<number>;
|
|
921
|
+
"$-true": Variable<number>;
|
|
922
|
+
"$-4.5": Variable<number>;
|
|
923
|
+
"$-5": Variable<number>;
|
|
924
|
+
"$-6": Variable<number>;
|
|
925
|
+
"$-7": Variable<number>;
|
|
926
|
+
"$-8": Variable<number>;
|
|
927
|
+
"$-9": Variable<number>;
|
|
928
|
+
"$-10": Variable<number>;
|
|
929
|
+
"$-11": Variable<number>;
|
|
930
|
+
"$-12": Variable<number>;
|
|
931
|
+
"$-13": Variable<number>;
|
|
932
|
+
"$-14": Variable<number>;
|
|
933
|
+
"$-15": Variable<number>;
|
|
934
|
+
"$-16": Variable<number>;
|
|
935
|
+
"$-17": Variable<number>;
|
|
936
|
+
"$-18": Variable<number>;
|
|
937
|
+
"$-19": Variable<number>;
|
|
938
|
+
"$-20": Variable<number>;
|
|
911
939
|
};
|
|
912
940
|
size: {
|
|
913
941
|
0: Variable<number>;
|
package/dist/jsx/colorUtils.js
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { getVariableValue } from "@tamagui/core";
|
|
2
|
-
const hexToRGBA = (hex, alpha = 1) => {
|
|
3
|
-
var _a;
|
|
4
|
-
if (!isValidHex(hex)) {
|
|
5
|
-
throw new Error("Invalid HEX");
|
|
6
|
-
}
|
|
7
|
-
const chunkSize = Math.floor((hex.length - 1) / 3);
|
|
8
|
-
const hexArr = getChunksFromString(hex.slice(1), chunkSize);
|
|
9
|
-
const [r, g, b, a] = (_a = hexArr == null ? void 0 : hexArr.map(convertHexUnitTo256)) != null ? _a : [];
|
|
10
|
-
return `rgba(${r}, ${g}, ${b}, ${getAlphaFloat(a, alpha)})`;
|
|
11
|
-
};
|
|
12
|
-
const setColorAlpha = (colorIn, alpha = 1) => {
|
|
13
|
-
let color = `${getVariableValue(colorIn)}`;
|
|
14
|
-
if (color.startsWith("hsl(")) {
|
|
15
|
-
return color.replace("hsl", "hsla").replace(")", `, ${alpha})`);
|
|
16
|
-
}
|
|
17
|
-
if (color.startsWith("#")) {
|
|
18
|
-
return hexToRGBA(color, alpha);
|
|
19
|
-
}
|
|
20
|
-
if (color.startsWith("rgb(")) {
|
|
21
|
-
return color.replace("rgb", "rgba").replace(")", `, ${alpha})`);
|
|
22
|
-
}
|
|
23
|
-
return color;
|
|
24
|
-
};
|
|
25
|
-
const isValidHex = (hex) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
|
|
26
|
-
const getChunksFromString = (st, chunkSize = 0) => st.match(new RegExp(`.{${chunkSize}}`, "g"));
|
|
27
|
-
const convertHexUnitTo256 = (hexStr) => parseInt(hexStr.repeat(2 / hexStr.length), 16);
|
|
28
|
-
const getAlphaFloat = (a, alpha = 1) => {
|
|
29
|
-
if (a !== void 0) {
|
|
30
|
-
return a / 255;
|
|
31
|
-
}
|
|
32
|
-
if (typeof alpha != "number" || alpha < 0 || alpha > 1) {
|
|
33
|
-
return 1;
|
|
34
|
-
}
|
|
35
|
-
return alpha;
|
|
36
|
-
};
|
|
37
|
-
export {
|
|
38
|
-
hexToRGBA,
|
|
39
|
-
setColorAlpha
|
|
40
|
-
};
|
|
41
|
-
//# sourceMappingURL=colorUtils.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/colorUtils.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Variable, getVariableValue } from '@tamagui/core'\n\nexport const hexToRGBA = (hex: string, alpha = 1) => {\n if (!isValidHex(hex)) {\n throw new Error('Invalid HEX')\n }\n const chunkSize = Math.floor((hex.length - 1) / 3)\n const hexArr = getChunksFromString(hex.slice(1), chunkSize)\n const [r, g, b, a] = hexArr?.map(convertHexUnitTo256) ?? []\n return `rgba(${r}, ${g}, ${b}, ${getAlphaFloat(a, alpha)})`\n}\n\nexport const setColorAlpha = (colorIn: string | Variable, alpha = 1) => {\n let color = `${getVariableValue(colorIn)}`\n if (color.startsWith('hsl(')) {\n return color.replace('hsl', 'hsla').replace(')', `, ${alpha})`)\n }\n if (color.startsWith('#')) {\n return hexToRGBA(color, alpha)\n }\n if (color.startsWith('rgb(')) {\n return color.replace('rgb', 'rgba').replace(')', `, ${alpha})`)\n }\n return color\n}\n\nconst isValidHex = (hex: string) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex)\n\nconst getChunksFromString = (st: string, chunkSize = 0) =>\n st.match(new RegExp(`.{${chunkSize}}`, 'g'))\n\nconst convertHexUnitTo256 = (hexStr: string) => parseInt(hexStr.repeat(2 / hexStr.length), 16)\n\nconst getAlphaFloat = (a: any, alpha = 1) => {\n if (a !== undefined) {\n return a / 255\n }\n if (typeof alpha != 'number' || alpha < 0 || alpha > 1) {\n return 1\n }\n return alpha\n}\n"],
|
|
5
|
-
"mappings": "AAAA;AAEO,MAAM,YAAY,CAAC,KAAa,QAAQ,MAAM;AAFrD;AAGE,MAAI,CAAC,WAAW,GAAG,GAAG;AACpB,UAAM,IAAI,MAAM,aAAa;AAAA,EAC/B;AACA,QAAM,YAAY,KAAK,MAAO,KAAI,SAAS,KAAK,CAAC;AACjD,QAAM,SAAS,oBAAoB,IAAI,MAAM,CAAC,GAAG,SAAS;AAC1D,QAAM,CAAC,GAAG,GAAG,GAAG,KAAK,uCAAQ,IAAI,yBAAZ,YAAoC,CAAC;AAC1D,SAAO,QAAQ,MAAM,MAAM,MAAM,cAAc,GAAG,KAAK;AACzD;AAEO,MAAM,gBAAgB,CAAC,SAA4B,QAAQ,MAAM;AACtE,MAAI,QAAQ,GAAG,iBAAiB,OAAO;AACvC,MAAI,MAAM,WAAW,MAAM,GAAG;AAC5B,WAAO,MAAM,QAAQ,OAAO,MAAM,EAAE,QAAQ,KAAK,KAAK,QAAQ;AAAA,EAChE;AACA,MAAI,MAAM,WAAW,GAAG,GAAG;AACzB,WAAO,UAAU,OAAO,KAAK;AAAA,EAC/B;AACA,MAAI,MAAM,WAAW,MAAM,GAAG;AAC5B,WAAO,MAAM,QAAQ,OAAO,MAAM,EAAE,QAAQ,KAAK,KAAK,QAAQ;AAAA,EAChE;AACA,SAAO;AACT;AAEA,MAAM,aAAa,CAAC,QAAgB,6BAA6B,KAAK,GAAG;AAEzE,MAAM,sBAAsB,CAAC,IAAY,YAAY,MACnD,GAAG,MAAM,IAAI,OAAO,KAAK,cAAc,GAAG,CAAC;AAE7C,MAAM,sBAAsB,CAAC,WAAmB,SAAS,OAAO,OAAO,IAAI,OAAO,MAAM,GAAG,EAAE;AAE7F,MAAM,gBAAgB,CAAC,GAAQ,QAAQ,MAAM;AAC3C,MAAI,MAAM,QAAW;AACnB,WAAO,IAAI;AAAA,EACb;AACA,MAAI,OAAO,SAAS,YAAY,QAAQ,KAAK,QAAQ,GAAG;AACtD,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/jsx/index.js
DELETED
package/dist/jsx/index.js.map
DELETED
package/dist/jsx/themes.js
DELETED
|
@@ -1,308 +0,0 @@
|
|
|
1
|
-
import { createTheme, getVariableValue, isWeb } from "@tamagui/core";
|
|
2
|
-
import { setColorAlpha } from "./colorUtils";
|
|
3
|
-
import { darkColors, lightColors, tokens } from "./tokens";
|
|
4
|
-
const { color } = tokens;
|
|
5
|
-
const alternates = [1, 2, 3, 4];
|
|
6
|
-
const alts = [1, 2, 3];
|
|
7
|
-
function createThemesFrom(name, getTheme, props) {
|
|
8
|
-
const { shift = 0 } = props;
|
|
9
|
-
const theme = getTheme(0 + shift, props);
|
|
10
|
-
let themeEntries = [[name, theme]];
|
|
11
|
-
const altThemes = alternates.map((alt) => [
|
|
12
|
-
`${name}_alt${alt}`,
|
|
13
|
-
getTheme(alt * 1 + shift, props)
|
|
14
|
-
]);
|
|
15
|
-
const altThemes2 = alternates.map((alt) => [
|
|
16
|
-
`${name}_alt${alt}`,
|
|
17
|
-
getTheme(alt + shift, props)
|
|
18
|
-
]);
|
|
19
|
-
const altButtonThemes = alternates.map((_, i) => {
|
|
20
|
-
const [bName, bTheme] = [altThemes2[i][0], (altThemes2[i + 1] || altThemes2[i])[1]];
|
|
21
|
-
return [`${bName}_Button`, bTheme];
|
|
22
|
-
});
|
|
23
|
-
const darkerTheme = getTheme(Math.max(0, shift + (props.isLight ? 1 : -1)), props);
|
|
24
|
-
const activeTheme = props.activeTheme || {
|
|
25
|
-
...theme,
|
|
26
|
-
borderColor: props.backgrounds[7],
|
|
27
|
-
background: props.backgrounds[6],
|
|
28
|
-
backgroundHover: props.backgrounds[6],
|
|
29
|
-
backgroundPress: props.backgrounds[6]
|
|
30
|
-
};
|
|
31
|
-
const inverted = altThemes.map(([_name, theme2]) => {
|
|
32
|
-
return {
|
|
33
|
-
...theme2,
|
|
34
|
-
background: theme2.color,
|
|
35
|
-
backgroundHover: theme2.colorHover,
|
|
36
|
-
backgroundFocus: theme2.colorFocus,
|
|
37
|
-
backgroundPress: theme2.colorPress,
|
|
38
|
-
color: theme2.background,
|
|
39
|
-
colorHover: theme2.backgroundHover,
|
|
40
|
-
colorFocus: theme2.backgroundFocus,
|
|
41
|
-
colorPress: theme2.backgroundPress
|
|
42
|
-
};
|
|
43
|
-
});
|
|
44
|
-
themeEntries = [
|
|
45
|
-
...themeEntries,
|
|
46
|
-
...altThemes.slice(0, alts.length),
|
|
47
|
-
...altButtonThemes.slice(0, alts.length),
|
|
48
|
-
[`${name}_Button`, altThemes2[1][1]],
|
|
49
|
-
[`${name}_DrawerFrame`, altThemes2[1][1]],
|
|
50
|
-
[`${name}_SliderTrack`, altThemes[2][1]],
|
|
51
|
-
[`${name}_SliderTrackActive`, altThemes[3][1]],
|
|
52
|
-
[`${name}_SliderThumb`, inverted[2]],
|
|
53
|
-
[`${name}_Progress`, altThemes[2][1]],
|
|
54
|
-
[`${name}_ProgressIndicator`, inverted[2]],
|
|
55
|
-
[`${name}_Switch`, altThemes[0][1]],
|
|
56
|
-
[`${name}_SwitchThumb`, inverted[2]],
|
|
57
|
-
[`${name}_TooltipArrow`, altThemes[1][1]],
|
|
58
|
-
[`${name}_TooltipContent`, altThemes[1][1]],
|
|
59
|
-
[`${name}_darker`, darkerTheme],
|
|
60
|
-
[`${name}_active`, activeTheme]
|
|
61
|
-
];
|
|
62
|
-
const themes2 = Object.fromEntries(themeEntries);
|
|
63
|
-
return themes2;
|
|
64
|
-
}
|
|
65
|
-
const themeCreator = (str = 1, {
|
|
66
|
-
backgrounds,
|
|
67
|
-
isLight = true,
|
|
68
|
-
isBase = false,
|
|
69
|
-
colors = [...backgrounds].reverse(),
|
|
70
|
-
borderColors = isLight ? colors : backgrounds,
|
|
71
|
-
backgroundStrong,
|
|
72
|
-
offsets: offsetsProp
|
|
73
|
-
}) => {
|
|
74
|
-
var _a, _b, _c, _d;
|
|
75
|
-
const offsets = {
|
|
76
|
-
borderColor: (_b = (_a = offsetsProp == null ? void 0 : offsetsProp.borderColor) != null ? _a : offsetsProp == null ? void 0 : offsetsProp.background) != null ? _b : [0, 0, 0, 0],
|
|
77
|
-
background: (_c = offsetsProp == null ? void 0 : offsetsProp.background) != null ? _c : [0, 0, 0, 0],
|
|
78
|
-
color: (_d = offsetsProp == null ? void 0 : offsetsProp.color) != null ? _d : [0, 0, 0, 0]
|
|
79
|
-
};
|
|
80
|
-
const darkColors2 = isLight ? colors : backgrounds;
|
|
81
|
-
const lighterDir = isLight ? -1 : 1;
|
|
82
|
-
const darkerDir = -lighterDir;
|
|
83
|
-
const strongerDir = isLight ? darkerDir : lighterDir;
|
|
84
|
-
const softerDir = -strongerDir;
|
|
85
|
-
const get = (arr, index, name = "background") => {
|
|
86
|
-
return arr[Math.max(0, Math.min(index + (offsets[name][str] || 0), arr.length - 1))];
|
|
87
|
-
};
|
|
88
|
-
const colorTranslucent = setColorAlpha(getVariableValue(get(colors, 0 + str, "color")), 0.5);
|
|
89
|
-
const theme = {
|
|
90
|
-
background: get(backgrounds, str),
|
|
91
|
-
backgroundStrong: backgroundStrong || get(backgrounds, str + strongerDir * 2),
|
|
92
|
-
backgroundSoft: get(backgrounds, str + softerDir * 2),
|
|
93
|
-
backgroundHover: get(backgrounds, str + lighterDir),
|
|
94
|
-
backgroundPress: get(backgrounds, str + darkerDir),
|
|
95
|
-
backgroundFocus: get(backgrounds, str + darkerDir * 2),
|
|
96
|
-
backgroundTransparent: color.grayA1Light,
|
|
97
|
-
color: get(colors, 0 + str, "color"),
|
|
98
|
-
colorHover: get(colors, 1 + str, "color"),
|
|
99
|
-
colorPress: get(colors, 2 + str, "color"),
|
|
100
|
-
colorFocus: get(colors, 3 + str, "color"),
|
|
101
|
-
colorTranslucent,
|
|
102
|
-
colorMid: (isLight ? colors : backgrounds)[Math.floor(colors.length / 2)],
|
|
103
|
-
shadowColor: isLight ? color.grayA2Light : color.grayA8Light,
|
|
104
|
-
shadowColorHover: darkColors2[!isLight ? 1 : 8],
|
|
105
|
-
shadowColorPress: darkColors2[!isLight ? 1 : 8],
|
|
106
|
-
shadowColorFocus: darkColors2[!isLight ? 1 : 8],
|
|
107
|
-
borderColor: null,
|
|
108
|
-
borderColorHover: null,
|
|
109
|
-
borderColorPress: null,
|
|
110
|
-
borderColorFocus: null
|
|
111
|
-
};
|
|
112
|
-
if (process.env.ENABLE_STEPS) {
|
|
113
|
-
Object.assign(theme, {
|
|
114
|
-
step1: backgrounds[0],
|
|
115
|
-
step2: backgrounds[1],
|
|
116
|
-
step3: backgrounds[2],
|
|
117
|
-
step4: backgrounds[3],
|
|
118
|
-
step5: backgrounds[4],
|
|
119
|
-
step6: backgrounds[5],
|
|
120
|
-
step7: backgrounds[6],
|
|
121
|
-
step8: backgrounds[7],
|
|
122
|
-
step9: backgrounds[8],
|
|
123
|
-
step10: backgrounds[9],
|
|
124
|
-
step11: backgrounds[10],
|
|
125
|
-
step12: backgrounds[11]
|
|
126
|
-
});
|
|
127
|
-
}
|
|
128
|
-
if (isBase) {
|
|
129
|
-
Object.assign(theme, {
|
|
130
|
-
borderColor: isLight ? get(colors, 8 - str, "borderColor") : get(backgrounds, 2 + str, "borderColor"),
|
|
131
|
-
borderColorHover: isLight ? get(colors, 6 - str, "borderColor") : get(backgrounds, 3 + str, "borderColor"),
|
|
132
|
-
borderColorPress: isLight ? get(colors, 5 - str, "borderColor") : get(backgrounds, 1 + str, "borderColor"),
|
|
133
|
-
borderColorFocus: isLight ? get(colors, 4 - str, "borderColor") : get(backgrounds, 3 + str, "borderColor")
|
|
134
|
-
});
|
|
135
|
-
} else {
|
|
136
|
-
Object.assign(theme, {
|
|
137
|
-
borderColor: get(borderColors, 1 + strongerDir, "borderColor"),
|
|
138
|
-
borderColorHover: get(borderColors, 2 + strongerDir, "borderColor"),
|
|
139
|
-
borderColorPress: get(borderColors, 3 + strongerDir, "borderColor"),
|
|
140
|
-
borderColorFocus: get(borderColors, 4 + strongerDir, "borderColor")
|
|
141
|
-
});
|
|
142
|
-
}
|
|
143
|
-
return theme;
|
|
144
|
-
};
|
|
145
|
-
const themeColors = {
|
|
146
|
-
light: [
|
|
147
|
-
"#fff",
|
|
148
|
-
"#f4f4f4",
|
|
149
|
-
color.gray1Light,
|
|
150
|
-
color.gray2Light,
|
|
151
|
-
color.gray3Light,
|
|
152
|
-
color.gray4Light,
|
|
153
|
-
color.gray5Light,
|
|
154
|
-
color.gray6Light,
|
|
155
|
-
color.gray7Light,
|
|
156
|
-
color.gray8Light,
|
|
157
|
-
color.gray9Light,
|
|
158
|
-
color.gray10Light,
|
|
159
|
-
color.gray11Light,
|
|
160
|
-
color.gray12Light
|
|
161
|
-
],
|
|
162
|
-
dark: [
|
|
163
|
-
"#111111",
|
|
164
|
-
"#151515",
|
|
165
|
-
"#191919",
|
|
166
|
-
"#232323",
|
|
167
|
-
"#282828",
|
|
168
|
-
"#323232",
|
|
169
|
-
"#383838",
|
|
170
|
-
"#424242",
|
|
171
|
-
"#494949",
|
|
172
|
-
"#545454",
|
|
173
|
-
"#626262",
|
|
174
|
-
"#777777"
|
|
175
|
-
]
|
|
176
|
-
};
|
|
177
|
-
const lightThemes = createThemesFrom("light", themeCreator, {
|
|
178
|
-
backgrounds: themeColors.light,
|
|
179
|
-
backgroundStrong: isWeb ? "#fefefe" : "#f2f2f2",
|
|
180
|
-
borderColors: themeColors.light.slice(2),
|
|
181
|
-
isLight: true,
|
|
182
|
-
offsets: {
|
|
183
|
-
background: [2, 2, 2, 2, 2, 2]
|
|
184
|
-
}
|
|
185
|
-
});
|
|
186
|
-
const darkThemes = createThemesFrom("dark", themeCreator, {
|
|
187
|
-
backgrounds: themeColors.dark,
|
|
188
|
-
colors: themeColors.light.slice(2),
|
|
189
|
-
backgroundStrong: "#070707",
|
|
190
|
-
isBase: true,
|
|
191
|
-
isLight: false,
|
|
192
|
-
shift: 1,
|
|
193
|
-
offsets: {
|
|
194
|
-
color: [0, 4, 5, 5, 5, 5]
|
|
195
|
-
}
|
|
196
|
-
});
|
|
197
|
-
darkThemes.dark_darker.background = "#030303";
|
|
198
|
-
darkThemes.dark_darker.backgroundStrong = "#000";
|
|
199
|
-
const light = createTheme({
|
|
200
|
-
...lightColors,
|
|
201
|
-
...lightThemes.light
|
|
202
|
-
});
|
|
203
|
-
const dark = createTheme({
|
|
204
|
-
...darkColors,
|
|
205
|
-
...darkThemes.dark
|
|
206
|
-
});
|
|
207
|
-
const baseThemes = {
|
|
208
|
-
...lightThemes,
|
|
209
|
-
light,
|
|
210
|
-
light_active: lightThemes.light,
|
|
211
|
-
light_Card: lightThemes.light,
|
|
212
|
-
light_SliderTrack: lightThemes.light_alt2,
|
|
213
|
-
light_SliderTrackActive: lightThemes.light_alt3,
|
|
214
|
-
light_Switch: lightThemes.light_alt3,
|
|
215
|
-
light_SwitchThumb: lightThemes.light,
|
|
216
|
-
light_DrawerFrame: lightThemes.light_alt1,
|
|
217
|
-
...darkThemes,
|
|
218
|
-
dark,
|
|
219
|
-
dark_active: darkThemes.dark,
|
|
220
|
-
dark_Card: darkThemes.dark,
|
|
221
|
-
dark_DrawerFrame: darkThemes.dark_alt2,
|
|
222
|
-
dark_SliderTrack: darkThemes.dark_darker,
|
|
223
|
-
dark_SliderTrackActive: darkThemes.dark_alt3,
|
|
224
|
-
dark_Switch: darkThemes.dark_alt3,
|
|
225
|
-
dark_SwitchThumb: darkThemes.dark_darker,
|
|
226
|
-
dark_Button: darkThemes.dark_alt1
|
|
227
|
-
};
|
|
228
|
-
const darkEntries = Object.entries(dark);
|
|
229
|
-
const lightEntries = Object.entries(light);
|
|
230
|
-
function findColors(prefix, dark2 = false) {
|
|
231
|
-
return Object.fromEntries((dark2 ? darkEntries : lightEntries).filter(([k]) => k.startsWith(prefix)));
|
|
232
|
-
}
|
|
233
|
-
const colorSchemes = [
|
|
234
|
-
{ name: "blue", colors: findColors("blue"), darkColors: findColors("blue", true) },
|
|
235
|
-
{ name: "gray", colors: findColors("gray"), darkColors: findColors("gray", true) },
|
|
236
|
-
{ name: "green", colors: findColors("green"), darkColors: findColors("green", true) },
|
|
237
|
-
{ name: "orange", colors: findColors("orange"), darkColors: findColors("orange", true) },
|
|
238
|
-
{ name: "pink", colors: findColors("pink"), darkColors: findColors("pink", true) },
|
|
239
|
-
{ name: "purple", colors: findColors("purple"), darkColors: findColors("purple", true) },
|
|
240
|
-
{ name: "red", colors: findColors("red"), darkColors: findColors("red", true) },
|
|
241
|
-
{ name: "yellow", colors: findColors("yellow"), darkColors: findColors("yellow", true) },
|
|
242
|
-
{ name: "teal", colors: findColors("teal"), darkColors: findColors("teal", true) }
|
|
243
|
-
];
|
|
244
|
-
const colorNames = [
|
|
245
|
-
"blue",
|
|
246
|
-
"gray",
|
|
247
|
-
"green",
|
|
248
|
-
"orange",
|
|
249
|
-
"pink",
|
|
250
|
-
"purple",
|
|
251
|
-
"red",
|
|
252
|
-
"yellow",
|
|
253
|
-
"teal"
|
|
254
|
-
];
|
|
255
|
-
const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors: darkColors2 }) => {
|
|
256
|
-
const [altLightThemes, altDarkThemes] = [
|
|
257
|
-
{ colors: darkColors2, backgrounds: colors },
|
|
258
|
-
{ colors, backgrounds: darkColors2 }
|
|
259
|
-
].map((props, i) => {
|
|
260
|
-
const isLight = i === 0;
|
|
261
|
-
const colorsBase = Object.values(props.colors).slice(2);
|
|
262
|
-
const [backgrounds, colors2] = [
|
|
263
|
-
Object.values(props.backgrounds),
|
|
264
|
-
isLight ? colorsBase : [colorsBase[0], "#ccc", ...colorsBase.slice(1)]
|
|
265
|
-
];
|
|
266
|
-
const scheme = isLight ? "light" : "dark";
|
|
267
|
-
const shift = isLight ? 0 : 1;
|
|
268
|
-
const themeWithAlts = createThemesFrom(name, themeCreator, {
|
|
269
|
-
colors: colors2,
|
|
270
|
-
backgrounds,
|
|
271
|
-
borderColors: backgrounds,
|
|
272
|
-
isLight,
|
|
273
|
-
shift,
|
|
274
|
-
isBase: false,
|
|
275
|
-
offsets: {
|
|
276
|
-
background: isLight ? [2, 2, 2, 2, 2, 2] : null,
|
|
277
|
-
borderColor: isLight ? [2, 2, 2, 3, 2] : null,
|
|
278
|
-
color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1]
|
|
279
|
-
}
|
|
280
|
-
});
|
|
281
|
-
return Object.entries(themeWithAlts).map(([k, v]) => [`${scheme}_${k}`, v]);
|
|
282
|
-
});
|
|
283
|
-
return [...altLightThemes, ...altDarkThemes];
|
|
284
|
-
});
|
|
285
|
-
const colorThemes = Object.fromEntries(colorThemeEntries);
|
|
286
|
-
baseThemes.dark_active = {
|
|
287
|
-
...colorThemes.dark_blue_alt3,
|
|
288
|
-
background: darkColors.blue10,
|
|
289
|
-
backgroundHover: darkColors.blue11,
|
|
290
|
-
backgroundPress: darkColors.blue9,
|
|
291
|
-
backgroundFocus: darkColors.blue9,
|
|
292
|
-
color: darkColors.blue12,
|
|
293
|
-
colorHover: darkColors.blue12,
|
|
294
|
-
colorPress: darkColors.blue12,
|
|
295
|
-
colorFocus: darkColors.blue12
|
|
296
|
-
};
|
|
297
|
-
baseThemes.light_active = baseThemes.dark_active;
|
|
298
|
-
const allThemes = {
|
|
299
|
-
...baseThemes,
|
|
300
|
-
...colorThemes
|
|
301
|
-
};
|
|
302
|
-
const themes = allThemes;
|
|
303
|
-
export {
|
|
304
|
-
colorNames,
|
|
305
|
-
colorSchemes,
|
|
306
|
-
themes
|
|
307
|
-
};
|
|
308
|
-
//# sourceMappingURL=themes.js.map
|
package/dist/jsx/themes.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/themes.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Variable, createTheme, getVariableValue, isWeb } from '@tamagui/core'\n\nimport { setColorAlpha } from './colorUtils'\nimport { darkColors, lightColors, tokens } from './tokens'\n\nconst { color } = tokens\n\n// spaghetti ahead\n\ntype ThemeCreatorProps = {\n shift?: number\n backgrounds: (string | Variable)[]\n backgroundStrong?: string | Variable\n borderColors?: (string | Variable)[]\n colors?: (string | Variable)[]\n activeTheme?: any\n offsets?: {\n color?: number[] | null\n background?: number[] | null\n borderColor?: number[] | null\n }\n isLight?: boolean\n isBase?: boolean\n}\n\n// helpers\n\nconst alternates = [1, 2, 3, 4] as const\nconst alts = [1, 2, 3] as const\ntype AltKeys = 1 | 2 | 3\ntype AltName<Name extends string, Keys extends string | number> = `${Name}_alt${Keys}`\ntype ThemeCreator<A = any> = (str: number, props: ThemeCreatorProps) => A\n\nfunction createThemesFrom<Name extends string, GetTheme extends ThemeCreator = ThemeCreator>(\n name: Name,\n getTheme: GetTheme,\n props: ThemeCreatorProps\n): {\n [key in `${Name}_alt${AltKeys}` | `${Name}` | `${Name}_darker`]: GetTheme extends ThemeCreator<\n infer Theme\n >\n ? Theme\n : never\n} {\n const { shift = 0 } = props\n const theme = getTheme(0 + shift, props)\n let themeEntries: any[] = [[name, theme]]\n\n // generate alternates (for use in other themes), but keep just alts\n const altThemes: any[] = alternates.map((alt) => [\n `${name}_alt${alt}`,\n getTheme(alt * 1 + shift, props),\n ])\n const altThemes2: any[] = alternates.map((alt) => [\n `${name}_alt${alt}`,\n getTheme(alt + shift, props),\n ])\n const altButtonThemes: any[] = alternates.map((_, i) => {\n const [bName, bTheme] = [altThemes2[i][0], (altThemes2[i + 1] || altThemes2[i])[1]]\n return [`${bName}_Button` as any, bTheme]\n })\n // add these after alts since we rely on positioning\n const darkerTheme = getTheme(Math.max(0, shift + (props.isLight ? 1 : -1)), props)\n const activeTheme = props.activeTheme || {\n ...theme,\n borderColor: props.backgrounds[7],\n background: props.backgrounds[6],\n backgroundHover: props.backgrounds[6],\n backgroundPress: props.backgrounds[6],\n }\n\n // TODO can be de-duped\n const inverted = altThemes.map(([_name, theme]) => {\n return {\n ...theme,\n background: theme.color,\n backgroundHover: theme.colorHover,\n backgroundFocus: theme.colorFocus,\n backgroundPress: theme.colorPress,\n color: theme.background,\n colorHover: theme.backgroundHover,\n colorFocus: theme.backgroundFocus,\n colorPress: theme.backgroundPress,\n }\n })\n\n themeEntries = [\n ...themeEntries,\n // keep just alts\n ...altThemes.slice(0, alts.length),\n ...altButtonThemes.slice(0, alts.length),\n [`${name}_Button`, altThemes2[1][1]],\n [`${name}_DrawerFrame`, altThemes2[1][1]],\n [`${name}_SliderTrack`, altThemes[2][1]],\n [`${name}_SliderTrackActive`, altThemes[3][1]],\n [`${name}_SliderThumb`, inverted[2]],\n [`${name}_Progress`, altThemes[2][1]],\n [`${name}_ProgressIndicator`, inverted[2]],\n [`${name}_Switch`, altThemes[0][1]],\n [`${name}_SwitchThumb`, inverted[2]],\n [`${name}_TooltipArrow`, altThemes[1][1]],\n [`${name}_TooltipContent`, altThemes[1][1]],\n [`${name}_darker`, darkerTheme],\n [`${name}_active`, activeTheme],\n ]\n const themes = Object.fromEntries(themeEntries)\n // if (props.isLight) {\n // console.log('themes', themes)\n // }\n return themes as any\n}\n\nconst themeCreator = (\n str = 1,\n {\n backgrounds,\n isLight = true,\n isBase = false,\n colors = [...backgrounds].reverse(),\n borderColors = isLight ? colors : backgrounds,\n backgroundStrong,\n offsets: offsetsProp,\n }: ThemeCreatorProps\n) => {\n const offsets = {\n borderColor: offsetsProp?.borderColor ?? offsetsProp?.background ?? [0, 0, 0, 0],\n background: offsetsProp?.background ?? [0, 0, 0, 0],\n color: offsetsProp?.color ?? [0, 0, 0, 0],\n }\n const darkColors = isLight ? colors : backgrounds\n const lighterDir = isLight ? -1 : 1\n const darkerDir = -lighterDir\n const strongerDir = isLight ? darkerDir : lighterDir\n const softerDir = -strongerDir\n const get = (arr: any[], index: number, name = 'background') => {\n return arr[Math.max(0, Math.min(index + (offsets[name][str] || 0), arr.length - 1))]\n }\n\n const colorTranslucent = setColorAlpha(getVariableValue(get(colors, 0 + str, 'color')), 0.5)\n\n const theme = {\n background: get(backgrounds, str),\n backgroundStrong: backgroundStrong || get(backgrounds, str + strongerDir * 2),\n backgroundSoft: get(backgrounds, str + softerDir * 2),\n backgroundHover: get(backgrounds, str + lighterDir),\n backgroundPress: get(backgrounds, str + darkerDir),\n backgroundFocus: get(backgrounds, str + darkerDir * 2),\n backgroundTransparent: color.grayA1Light,\n color: get(colors, 0 + str, 'color'),\n colorHover: get(colors, 1 + str, 'color'),\n colorPress: get(colors, 2 + str, 'color'),\n colorFocus: get(colors, 3 + str, 'color'),\n colorTranslucent,\n colorMid: (isLight ? colors : backgrounds)[Math.floor(colors.length / 2)],\n shadowColor: isLight ? color.grayA2Light : color.grayA8Light,\n shadowColorHover: darkColors[!isLight ? 1 : 8],\n shadowColorPress: darkColors[!isLight ? 1 : 8],\n shadowColorFocus: darkColors[!isLight ? 1 : 8],\n borderColor: null as any as string | Variable,\n borderColorHover: null as any as string | Variable,\n borderColorPress: null as any as string | Variable,\n borderColorFocus: null as any as string | Variable,\n }\n\n if (process.env.ENABLE_STEPS) {\n Object.assign(theme, {\n step1: backgrounds[0],\n step2: backgrounds[1],\n step3: backgrounds[2],\n step4: backgrounds[3],\n step5: backgrounds[4],\n step6: backgrounds[5],\n step7: backgrounds[6],\n step8: backgrounds[7],\n step9: backgrounds[8],\n step10: backgrounds[9],\n step11: backgrounds[10],\n step12: backgrounds[11],\n })\n }\n\n if (isBase) {\n Object.assign(theme, {\n borderColor: isLight\n ? get(colors, 8 - str, 'borderColor')\n : get(backgrounds, 2 + str, 'borderColor'),\n borderColorHover: isLight\n ? get(colors, 6 - str, 'borderColor')\n : get(backgrounds, 3 + str, 'borderColor'),\n borderColorPress: isLight\n ? get(colors, 5 - str, 'borderColor')\n : get(backgrounds, 1 + str, 'borderColor'),\n borderColorFocus: isLight\n ? get(colors, 4 - str, 'borderColor')\n : get(backgrounds, 3 + str, 'borderColor'),\n })\n } else {\n Object.assign(theme, {\n borderColor: get(borderColors, 1 + strongerDir, 'borderColor'),\n borderColorHover: get(borderColors, 2 + strongerDir, 'borderColor'),\n borderColorPress: get(borderColors, 3 + strongerDir, 'borderColor'),\n borderColorFocus: get(borderColors, 4 + strongerDir, 'borderColor'),\n })\n }\n\n return theme\n}\n\nconst themeColors = {\n light: [\n '#fff',\n '#f4f4f4',\n color.gray1Light,\n color.gray2Light,\n color.gray3Light,\n color.gray4Light,\n color.gray5Light,\n color.gray6Light,\n color.gray7Light,\n color.gray8Light,\n color.gray9Light,\n color.gray10Light,\n color.gray11Light,\n color.gray12Light,\n ],\n dark: [\n '#111111',\n '#151515',\n '#191919',\n '#232323',\n '#282828',\n '#323232',\n '#383838',\n '#424242',\n '#494949',\n '#545454',\n '#626262',\n '#777777',\n ],\n}\n\nconst lightThemes = createThemesFrom('light', themeCreator, {\n backgrounds: themeColors.light,\n // for now web non-ios style native is...\n backgroundStrong: isWeb ? '#fefefe' : '#f2f2f2',\n borderColors: themeColors.light.slice(2),\n isLight: true,\n offsets: {\n background: [2, 2, 2, 2, 2, 2],\n },\n})\n\nconst darkThemes = createThemesFrom('dark', themeCreator, {\n backgrounds: themeColors.dark,\n colors: themeColors.light.slice(2),\n backgroundStrong: '#070707',\n isBase: true,\n isLight: false,\n shift: 1,\n offsets: {\n color: [0, 4, 5, 5, 5, 5],\n },\n})\n\ndarkThemes.dark_darker.background = '#030303'\ndarkThemes.dark_darker.backgroundStrong = '#000'\n\nconst light = createTheme({\n ...lightColors,\n ...lightThemes.light,\n})\n\nconst dark = createTheme({\n ...darkColors,\n ...darkThemes.dark,\n})\n\ntype ThemeBase = {\n [Key in keyof typeof dark]: string\n}\n\nconst baseThemes = {\n // light\n ...lightThemes,\n light,\n // reserving in types, updating later\n light_active: lightThemes.light,\n light_Card: lightThemes.light,\n light_SliderTrack: lightThemes.light_alt2,\n light_SliderTrackActive: lightThemes.light_alt3,\n light_Switch: lightThemes.light_alt3,\n light_SwitchThumb: lightThemes.light,\n light_DrawerFrame: lightThemes.light_alt1,\n\n // dark\n ...darkThemes,\n dark,\n // reserving in types, updating later\n dark_active: darkThemes.dark,\n dark_Card: darkThemes.dark,\n dark_DrawerFrame: darkThemes.dark_alt2,\n dark_SliderTrack: darkThemes.dark_darker,\n dark_SliderTrackActive: darkThemes.dark_alt3,\n dark_Switch: darkThemes.dark_alt3,\n dark_SwitchThumb: darkThemes.dark_darker,\n dark_Button: darkThemes.dark_alt1,\n}\n\nconst darkEntries = Object.entries(dark)\nconst lightEntries = Object.entries(light)\nfunction findColors(prefix: string, dark = false): ThemeBase {\n return Object.fromEntries(\n (dark ? darkEntries : lightEntries).filter(([k]) => k.startsWith(prefix))\n ) as any\n}\n\nexport const colorSchemes = [\n { name: 'blue', colors: findColors('blue'), darkColors: findColors('blue', true) },\n { name: 'gray', colors: findColors('gray'), darkColors: findColors('gray', true) },\n { name: 'green', colors: findColors('green'), darkColors: findColors('green', true) },\n { name: 'orange', colors: findColors('orange'), darkColors: findColors('orange', true) },\n { name: 'pink', colors: findColors('pink'), darkColors: findColors('pink', true) },\n { name: 'purple', colors: findColors('purple'), darkColors: findColors('purple', true) },\n { name: 'red', colors: findColors('red'), darkColors: findColors('red', true) },\n { name: 'yellow', colors: findColors('yellow'), darkColors: findColors('yellow', true) },\n { name: 'teal', colors: findColors('teal'), darkColors: findColors('teal', true) },\n] as const\n\nexport type ColorNames = typeof colorSchemes[number]['name']\n\n// nice and flat\nexport const colorNames: ColorNames[] = [\n 'blue',\n 'gray',\n 'green',\n 'orange',\n 'pink',\n 'purple',\n 'red',\n 'yellow',\n 'teal',\n]\n\ntype ColorThemeNames =\n | ColorNames\n | AltName<`light_${ColorNames}`, AltKeys>\n | AltName<`dark_${ColorNames}`, AltKeys>\n\nconst colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) => {\n const [altLightThemes, altDarkThemes] = [\n { colors: darkColors, backgrounds: colors },\n { colors, backgrounds: darkColors },\n ].map((props, i) => {\n const isLight = i === 0\n const colorsBase = Object.values(props.colors).slice(2)\n const [backgrounds, colors] = [\n Object.values(props.backgrounds),\n isLight ? colorsBase : [colorsBase[0], '#ccc', ...colorsBase.slice(1)],\n ] as const\n\n const scheme = isLight ? 'light' : 'dark'\n const shift = isLight ? 0 : 1\n\n // if (!isLight) {\n // const [_, h, sp, lp] = backgrounds[0].match(/hsl\\(([0-9\\.]+), ([0-9\\.]+)\\%, ([0-9\\.]+)\\%\\)/)!\n // backgrounds.unshift(`hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`)\n // }\n\n const themeWithAlts = createThemesFrom(name, themeCreator, {\n colors,\n backgrounds,\n borderColors: backgrounds,\n isLight,\n shift,\n isBase: false,\n offsets: {\n background: isLight ? [2, 2, 2, 2, 2, 2] : null,\n borderColor: isLight ? [2, 2, 2, 3, 2] : null,\n color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1],\n },\n })\n\n return Object.entries(themeWithAlts).map(([k, v]) => [`${scheme}_${k}`, v])\n })\n return [...altLightThemes, ...altDarkThemes]\n})\n\ntype MyThemeBase = typeof baseThemes['light_alt1']\n\nconst colorThemes: {\n [key in ColorThemeNames]: MyThemeBase\n} = Object.fromEntries(colorThemeEntries) as any\n\n// add in base _active themes\nbaseThemes.dark_active = {\n ...colorThemes.dark_blue_alt3,\n background: darkColors.blue10,\n backgroundHover: darkColors.blue11,\n backgroundPress: darkColors.blue9,\n backgroundFocus: darkColors.blue9,\n color: darkColors.blue12,\n colorHover: darkColors.blue12,\n colorPress: darkColors.blue12,\n colorFocus: darkColors.blue12,\n}\n\n// light active uses light foregound, ios style\nbaseThemes.light_active = baseThemes.dark_active\n\nconst allThemes = {\n ...baseThemes,\n ...colorThemes,\n} as const\n\nexport const themes: {\n [key in keyof typeof allThemes]: typeof baseThemes['light']\n} = allThemes as any\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/jsx/tokens.js
DELETED
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
blue,
|
|
3
|
-
blueDark,
|
|
4
|
-
gray,
|
|
5
|
-
grayA,
|
|
6
|
-
grayDark,
|
|
7
|
-
grayDarkA,
|
|
8
|
-
green,
|
|
9
|
-
greenDark,
|
|
10
|
-
orange,
|
|
11
|
-
orangeDark,
|
|
12
|
-
pink,
|
|
13
|
-
pinkDark,
|
|
14
|
-
purple,
|
|
15
|
-
purpleDark,
|
|
16
|
-
red,
|
|
17
|
-
redDark,
|
|
18
|
-
teal,
|
|
19
|
-
tealDark,
|
|
20
|
-
violet,
|
|
21
|
-
violetDark,
|
|
22
|
-
yellow,
|
|
23
|
-
yellowDark
|
|
24
|
-
} from "@tamagui/colors";
|
|
25
|
-
import { createTokens } from "@tamagui/core";
|
|
26
|
-
const size = {
|
|
27
|
-
0: 0,
|
|
28
|
-
0.25: 2,
|
|
29
|
-
0.5: 4,
|
|
30
|
-
0.75: 8,
|
|
31
|
-
1: 20,
|
|
32
|
-
1.5: 24,
|
|
33
|
-
2: 28,
|
|
34
|
-
2.5: 32,
|
|
35
|
-
3: 36,
|
|
36
|
-
3.5: 40,
|
|
37
|
-
4: 44,
|
|
38
|
-
true: 44,
|
|
39
|
-
4.5: 48,
|
|
40
|
-
5: 52,
|
|
41
|
-
5.5: 59,
|
|
42
|
-
6: 64,
|
|
43
|
-
6.5: 69,
|
|
44
|
-
7: 74,
|
|
45
|
-
7.6: 79,
|
|
46
|
-
8: 84,
|
|
47
|
-
8.5: 89,
|
|
48
|
-
9: 94,
|
|
49
|
-
9.5: 99,
|
|
50
|
-
10: 104,
|
|
51
|
-
11: 124,
|
|
52
|
-
12: 144,
|
|
53
|
-
13: 164,
|
|
54
|
-
14: 184,
|
|
55
|
-
15: 204,
|
|
56
|
-
16: 224,
|
|
57
|
-
17: 224,
|
|
58
|
-
18: 244,
|
|
59
|
-
19: 264,
|
|
60
|
-
20: 284
|
|
61
|
-
};
|
|
62
|
-
const spaces = Object.entries(size).map(([k, v]) => [
|
|
63
|
-
k,
|
|
64
|
-
Math.max(0, v <= 16 ? Math.round(v * 0.333) : Math.floor(v * 0.7 - 12))
|
|
65
|
-
]);
|
|
66
|
-
const spacesNegative = spaces.map(([k, v]) => [`-${k}`, -v]);
|
|
67
|
-
const space = {
|
|
68
|
-
...Object.fromEntries(spaces),
|
|
69
|
-
...Object.fromEntries(spacesNegative)
|
|
70
|
-
};
|
|
71
|
-
const zIndex = {
|
|
72
|
-
0: 0,
|
|
73
|
-
1: 100,
|
|
74
|
-
2: 200,
|
|
75
|
-
3: 300,
|
|
76
|
-
4: 400,
|
|
77
|
-
5: 500
|
|
78
|
-
};
|
|
79
|
-
const colorTokens = {
|
|
80
|
-
light: {
|
|
81
|
-
blue,
|
|
82
|
-
gray,
|
|
83
|
-
grayA,
|
|
84
|
-
green,
|
|
85
|
-
orange,
|
|
86
|
-
pink,
|
|
87
|
-
purple,
|
|
88
|
-
red,
|
|
89
|
-
violet,
|
|
90
|
-
yellow,
|
|
91
|
-
teal
|
|
92
|
-
},
|
|
93
|
-
dark: {
|
|
94
|
-
blue: blueDark,
|
|
95
|
-
gray: grayDark,
|
|
96
|
-
grayA: grayDarkA,
|
|
97
|
-
green: greenDark,
|
|
98
|
-
orange: orangeDark,
|
|
99
|
-
pink: pinkDark,
|
|
100
|
-
purple: purpleDark,
|
|
101
|
-
red: redDark,
|
|
102
|
-
violet: violetDark,
|
|
103
|
-
yellow: yellowDark,
|
|
104
|
-
teal: tealDark
|
|
105
|
-
}
|
|
106
|
-
};
|
|
107
|
-
const darkColors = {
|
|
108
|
-
...colorTokens.dark.blue,
|
|
109
|
-
...colorTokens.dark.gray,
|
|
110
|
-
...colorTokens.dark.grayA,
|
|
111
|
-
...colorTokens.dark.green,
|
|
112
|
-
...colorTokens.dark.orange,
|
|
113
|
-
...colorTokens.dark.pink,
|
|
114
|
-
...colorTokens.dark.purple,
|
|
115
|
-
...colorTokens.dark.red,
|
|
116
|
-
...colorTokens.dark.violet,
|
|
117
|
-
...colorTokens.dark.yellow,
|
|
118
|
-
...colorTokens.dark.teal
|
|
119
|
-
};
|
|
120
|
-
const lightColors = {
|
|
121
|
-
...colorTokens.light.blue,
|
|
122
|
-
...colorTokens.light.gray,
|
|
123
|
-
...colorTokens.light.grayA,
|
|
124
|
-
...colorTokens.light.green,
|
|
125
|
-
...colorTokens.light.orange,
|
|
126
|
-
...colorTokens.light.pink,
|
|
127
|
-
...colorTokens.light.purple,
|
|
128
|
-
...colorTokens.light.red,
|
|
129
|
-
...colorTokens.light.violet,
|
|
130
|
-
...colorTokens.light.yellow,
|
|
131
|
-
...colorTokens.light.teal
|
|
132
|
-
};
|
|
133
|
-
const allColors = {
|
|
134
|
-
...postfixObjKeys(lightColors, "Light"),
|
|
135
|
-
...postfixObjKeys(darkColors, "Dark")
|
|
136
|
-
};
|
|
137
|
-
function postfixObjKeys(obj, postfix) {
|
|
138
|
-
return Object.fromEntries(Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v]));
|
|
139
|
-
}
|
|
140
|
-
const radius = {
|
|
141
|
-
0: 0,
|
|
142
|
-
1: 3,
|
|
143
|
-
2: 5,
|
|
144
|
-
3: 7,
|
|
145
|
-
4: 9,
|
|
146
|
-
5: 10,
|
|
147
|
-
6: 16,
|
|
148
|
-
7: 19,
|
|
149
|
-
8: 22,
|
|
150
|
-
9: 26,
|
|
151
|
-
10: 34,
|
|
152
|
-
11: 42,
|
|
153
|
-
12: 50
|
|
154
|
-
};
|
|
155
|
-
const tokens = createTokens({
|
|
156
|
-
color: allColors,
|
|
157
|
-
radius,
|
|
158
|
-
zIndex,
|
|
159
|
-
space,
|
|
160
|
-
size
|
|
161
|
-
});
|
|
162
|
-
export {
|
|
163
|
-
darkColors,
|
|
164
|
-
lightColors,
|
|
165
|
-
tokens
|
|
166
|
-
};
|
|
167
|
-
//# sourceMappingURL=tokens.js.map
|
package/dist/jsx/tokens.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/tokens.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n blue,\n blueDark,\n gray,\n grayA,\n grayDark,\n grayDarkA,\n green,\n greenDark,\n orange,\n orangeDark,\n pink,\n pinkDark,\n purple,\n purpleDark,\n red,\n redDark,\n teal,\n tealDark,\n violet,\n violetDark,\n yellow,\n yellowDark,\n} from '@tamagui/colors'\nimport { Variable, createTokens } from '@tamagui/core'\n\n// should roughly map to button/input etc height at each level\n// fonts should match that height/lineHeight at each stop\n// so these are really non-linear on purpose\n// why?\n// - at sizes <1, used for fine grained things (borders, smallest paddingY)\n// - so smallest padY should be roughly 1-4px so it can join with lineHeight\n// - at sizes >=1, have to consider \"pressability\" (jumps up)\n// - after that it should go upwards somewhat naturally\n// - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster\n// but also one more wrinkle...\n// space is used in conjunction with size\n// i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)\nconst size = {\n 0: 0,\n 0.25: 2,\n 0.5: 4,\n 0.75: 8,\n 1: 20,\n 1.5: 24,\n 2: 28,\n 2.5: 32,\n 3: 36,\n 3.5: 40,\n 4: 44,\n true: 44,\n 4.5: 48,\n 5: 52,\n 5.5: 59,\n 6: 64,\n 6.5: 69,\n 7: 74,\n 7.6: 79,\n 8: 84,\n 8.5: 89,\n 9: 94,\n 9.5: 99,\n 10: 104,\n 11: 124,\n 12: 144,\n 13: 164,\n 14: 184,\n 15: 204,\n 16: 224,\n 17: 224,\n 18: 244,\n 19: 264,\n 20: 284,\n}\n\ntype Sizes = typeof size\ntype SizeKeys = `${keyof Sizes}`\n\nconst spaces = Object.entries(size).map(([k, v]) => [\n k,\n Math.max(0, v <= 16 ? Math.round(v * 0.333) : Math.floor(v * 0.7 - 12)),\n])\n\nconst spacesNegative = spaces.map(([k, v]) => [`-${k}`, -v])\n\nconst space: {\n [Key in `-${SizeKeys}` | SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number\n} = {\n ...Object.fromEntries(spaces),\n ...Object.fromEntries(spacesNegative),\n} as any\n\nconst zIndex = {\n 0: 0,\n 1: 100,\n 2: 200,\n 3: 300,\n 4: 400,\n 5: 500,\n}\n\nconst colorTokens = {\n light: {\n blue: blue,\n gray: gray,\n grayA: grayA,\n green: green,\n orange: orange,\n pink: pink,\n purple: purple,\n red: red,\n violet: violet,\n yellow: yellow,\n teal: teal,\n },\n dark: {\n blue: blueDark,\n gray: grayDark,\n grayA: grayDarkA,\n green: greenDark,\n orange: orangeDark,\n pink: pinkDark,\n purple: purpleDark,\n red: redDark,\n violet: violetDark,\n yellow: yellowDark,\n teal: tealDark,\n },\n}\n\nexport const darkColors = {\n ...colorTokens.dark.blue,\n ...colorTokens.dark.gray,\n ...colorTokens.dark.grayA,\n ...colorTokens.dark.green,\n ...colorTokens.dark.orange,\n ...colorTokens.dark.pink,\n ...colorTokens.dark.purple,\n ...colorTokens.dark.red,\n ...colorTokens.dark.violet,\n ...colorTokens.dark.yellow,\n ...colorTokens.dark.teal,\n}\n\nexport const lightColors = {\n ...colorTokens.light.blue,\n ...colorTokens.light.gray,\n ...colorTokens.light.grayA,\n ...colorTokens.light.green,\n ...colorTokens.light.orange,\n ...colorTokens.light.pink,\n ...colorTokens.light.purple,\n ...colorTokens.light.red,\n ...colorTokens.light.violet,\n ...colorTokens.light.yellow,\n ...colorTokens.light.teal,\n}\n\nconst allColors = {\n ...postfixObjKeys(lightColors, 'Light'),\n ...postfixObjKeys(darkColors, 'Dark'),\n}\n\nfunction postfixObjKeys<A extends { [key: string]: Variable<string> | string }, B extends string>(\n obj: A,\n postfix: B\n): {\n [Key in `${keyof A extends string ? keyof A : never}${B}`]: Variable<string> | string\n} {\n return Object.fromEntries(Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])) as any\n}\n\nconst radius = {\n 0: 0,\n 1: 3,\n 2: 5,\n 3: 7,\n 4: 9,\n 5: 10,\n 6: 16,\n 7: 19,\n 8: 22,\n 9: 26,\n 10: 34,\n 11: 42,\n 12: 50,\n}\n\nexport const tokens = createTokens({\n color: allColors,\n radius,\n zIndex,\n space,\n size,\n})\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|