@tamagui/theme-base 1.0.11 → 1.0.12

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.
Files changed (13) hide show
  1. package/dist/cjs/tokens.js.map +1 -1
  2. package/dist/esm/tokens.js.map +1 -1
  3. package/package.json +5 -5
  4. package/src/tokens.tsx +1 -1
  5. package/types/tokens.d.ts +30 -2
  6. package/dist/jsx/colorUtils.js +0 -41
  7. package/dist/jsx/colorUtils.js.map +0 -7
  8. package/dist/jsx/index.js +0 -4
  9. package/dist/jsx/index.js.map +0 -7
  10. package/dist/jsx/themes.js +0 -308
  11. package/dist/jsx/themes.js.map +0 -7
  12. package/dist/jsx/tokens.js +0 -167
  13. 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 `$-{SizeKeys}` | 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"],
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 `$-${SizeKeys}` | 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
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 `$-{SizeKeys}` | 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"],
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 `$-${SizeKeys}` | 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
5
  "mappings": "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",
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.11",
3
+ "version": "1.0.12",
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.11",
30
- "@tamagui/core": "^1.0.11",
31
- "@tamagui/create-themes": "^1.0.11"
29
+ "@tamagui/colors": "^1.0.12",
30
+ "@tamagui/core": "^1.0.12",
31
+ "@tamagui/create-themes": "^1.0.12"
32
32
  },
33
33
  "devDependencies": {
34
- "@tamagui/build": "^1.0.11"
34
+ "@tamagui/build": "^1.0.12"
35
35
  },
36
36
  "publishConfig": {
37
37
  "access": "public"
package/src/tokens.tsx CHANGED
@@ -85,7 +85,7 @@ 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 `$-{SizeKeys}` | SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number
88
+ [Key in `$-${SizeKeys}` | SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number
89
89
  } = {
90
90
  ...Object.fromEntries(spaces),
91
91
  ...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 `$-{SizeKeys}` | SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number;
39
+ [Key in `$-${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
- "$-{SizeKeys}": Variable<number>;
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
package/dist/jsx/colorUtils.js.map DELETED
@@ -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
@@ -1,4 +0,0 @@
1
- export * from "./themes";
2
- export * from "./tokens";
3
- export * from "@tamagui/colors";
4
- //# sourceMappingURL=index.js.map
package/dist/jsx/index.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/index.tsx"],
4
- "sourcesContent": ["export * from './themes'\nexport * from './tokens'\nexport * from '@tamagui/colors'\n"],
5
- "mappings": "AAAA;AACA;AACA;",
6
- "names": []
7
- }
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": "AAAA;AAEA;AACA;AAEA,MAAM,EAAE,UAAU;AAsBlB,MAAM,aAAa,CAAC,GAAG,GAAG,GAAG,CAAC;AAC9B,MAAM,OAAO,CAAC,GAAG,GAAG,CAAC;AAKrB,0BACE,MACA,UACA,OAOA;AACA,QAAM,EAAE,QAAQ,MAAM;AACtB,QAAM,QAAQ,SAAS,IAAI,OAAO,KAAK;AACvC,MAAI,eAAsB,CAAC,CAAC,MAAM,KAAK,CAAC;AAGxC,QAAM,YAAmB,WAAW,IAAI,CAAC,QAAQ;AAAA,IAC/C,GAAG,WAAW;AAAA,IACd,SAAS,MAAM,IAAI,OAAO,KAAK;AAAA,EACjC,CAAC;AACD,QAAM,aAAoB,WAAW,IAAI,CAAC,QAAQ;AAAA,IAChD,GAAG,WAAW;AAAA,IACd,SAAS,MAAM,OAAO,KAAK;AAAA,EAC7B,CAAC;AACD,QAAM,kBAAyB,WAAW,IAAI,CAAC,GAAG,MAAM;AACtD,UAAM,CAAC,OAAO,UAAU,CAAC,WAAW,GAAG,IAAK,YAAW,IAAI,MAAM,WAAW,IAAI,EAAE;AAClF,WAAO,CAAC,GAAG,gBAAuB,MAAM;AAAA,EAC1C,CAAC;AAED,QAAM,cAAc,SAAS,KAAK,IAAI,GAAG,QAAS,OAAM,UAAU,IAAI,GAAG,GAAG,KAAK;AACjF,QAAM,cAAc,MAAM,eAAe;AAAA,IACvC,GAAG;AAAA,IACH,aAAa,MAAM,YAAY;AAAA,IAC/B,YAAY,MAAM,YAAY;AAAA,IAC9B,iBAAiB,MAAM,YAAY;AAAA,IACnC,iBAAiB,MAAM,YAAY;AAAA,EACrC;AAGA,QAAM,WAAW,UAAU,IAAI,CAAC,CAAC,OAAO,YAAW;AACjD,WAAO;AAAA,MACL,GAAG;AAAA,MACH,YAAY,OAAM;AAAA,MAClB,iBAAiB,OAAM;AAAA,MACvB,iBAAiB,OAAM;AAAA,MACvB,iBAAiB,OAAM;AAAA,MACvB,OAAO,OAAM;AAAA,MACb,YAAY,OAAM;AAAA,MAClB,YAAY,OAAM;AAAA,MAClB,YAAY,OAAM;AAAA,IACpB;AAAA,EACF,CAAC;AAED,iBAAe;AAAA,IACb,GAAG;AAAA,IAEH,GAAG,UAAU,MAAM,GAAG,KAAK,MAAM;AAAA,IACjC,GAAG,gBAAgB,MAAM,GAAG,KAAK,MAAM;AAAA,IACvC,CAAC,GAAG,eAAe,WAAW,GAAG,EAAE;AAAA,IACnC,CAAC,GAAG,oBAAoB,WAAW,GAAG,EAAE;AAAA,IACxC,CAAC,GAAG,oBAAoB,UAAU,GAAG,EAAE;AAAA,IACvC,CAAC,GAAG,0BAA0B,UAAU,GAAG,EAAE;AAAA,IAC7C,CAAC,GAAG,oBAAoB,SAAS,EAAE;AAAA,IACnC,CAAC,GAAG,iBAAiB,UAAU,GAAG,EAAE;AAAA,IACpC,CAAC,GAAG,0BAA0B,SAAS,EAAE;AAAA,IACzC,CAAC,GAAG,eAAe,UAAU,GAAG,EAAE;AAAA,IAClC,CAAC,GAAG,oBAAoB,SAAS,EAAE;AAAA,IACnC,CAAC,GAAG,qBAAqB,UAAU,GAAG,EAAE;AAAA,IACxC,CAAC,GAAG,uBAAuB,UAAU,GAAG,EAAE;AAAA,IAC1C,CAAC,GAAG,eAAe,WAAW;AAAA,IAC9B,CAAC,GAAG,eAAe,WAAW;AAAA,EAChC;AACA,QAAM,UAAS,OAAO,YAAY,YAAY;AAI9C,SAAO;AACT;AAEA,MAAM,eAAe,CACnB,MAAM,GACN;AAAA,EACE;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS,CAAC,GAAG,WAAW,EAAE,QAAQ;AAAA,EAClC,eAAe,UAAU,SAAS;AAAA,EAClC;AAAA,EACA,SAAS;AAAA,MAER;AA3HL;AA4HE,QAAM,UAAU;AAAA,IACd,aAAa,uDAAa,gBAAb,YAA4B,2CAAa,eAAzC,YAAuD,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,IAC/E,YAAY,iDAAa,eAAb,YAA2B,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,IAClD,OAAO,iDAAa,UAAb,YAAsB,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,EAC1C;AACA,QAAM,cAAa,UAAU,SAAS;AACtC,QAAM,aAAa,UAAU,KAAK;AAClC,QAAM,YAAY,CAAC;AACnB,QAAM,cAAc,UAAU,YAAY;AAC1C,QAAM,YAAY,CAAC;AACnB,QAAM,MAAM,CAAC,KAAY,OAAe,OAAO,iBAAiB;AAC9D,WAAO,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,QAAS,SAAQ,MAAM,QAAQ,IAAI,IAAI,SAAS,CAAC,CAAC;AAAA,EACpF;AAEA,QAAM,mBAAmB,cAAc,iBAAiB,IAAI,QAAQ,IAAI,KAAK,OAAO,CAAC,GAAG,GAAG;AAE3F,QAAM,QAAQ;AAAA,IACZ,YAAY,IAAI,aAAa,GAAG;AAAA,IAChC,kBAAkB,oBAAoB,IAAI,aAAa,MAAM,cAAc,CAAC;AAAA,IAC5E,gBAAgB,IAAI,aAAa,MAAM,YAAY,CAAC;AAAA,IACpD,iBAAiB,IAAI,aAAa,MAAM,UAAU;AAAA,IAClD,iBAAiB,IAAI,aAAa,MAAM,SAAS;AAAA,IACjD,iBAAiB,IAAI,aAAa,MAAM,YAAY,CAAC;AAAA,IACrD,uBAAuB,MAAM;AAAA,IAC7B,OAAO,IAAI,QAAQ,IAAI,KAAK,OAAO;AAAA,IACnC,YAAY,IAAI,QAAQ,IAAI,KAAK,OAAO;AAAA,IACxC,YAAY,IAAI,QAAQ,IAAI,KAAK,OAAO;AAAA,IACxC,YAAY,IAAI,QAAQ,IAAI,KAAK,OAAO;AAAA,IACxC;AAAA,IACA,UAAW,WAAU,SAAS,aAAa,KAAK,MAAM,OAAO,SAAS,CAAC;AAAA,IACvE,aAAa,UAAU,MAAM,cAAc,MAAM;AAAA,IACjD,kBAAkB,YAAW,CAAC,UAAU,IAAI;AAAA,IAC5C,kBAAkB,YAAW,CAAC,UAAU,IAAI;AAAA,IAC5C,kBAAkB,YAAW,CAAC,UAAU,IAAI;AAAA,IAC5C,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,EACpB;AAEA,MAAI,QAAQ,IAAI,cAAc;AAC5B,WAAO,OAAO,OAAO;AAAA,MACnB,OAAO,YAAY;AAAA,MACnB,OAAO,YAAY;AAAA,MACnB,OAAO,YAAY;AAAA,MACnB,OAAO,YAAY;AAAA,MACnB,OAAO,YAAY;AAAA,MACnB,OAAO,YAAY;AAAA,MACnB,OAAO,YAAY;AAAA,MACnB,OAAO,YAAY;AAAA,MACnB,OAAO,YAAY;AAAA,MACnB,QAAQ,YAAY;AAAA,MACpB,QAAQ,YAAY;AAAA,MACpB,QAAQ,YAAY;AAAA,IACtB,CAAC;AAAA,EACH;AAEA,MAAI,QAAQ;AACV,WAAO,OAAO,OAAO;AAAA,MACnB,aAAa,UACT,IAAI,QAAQ,IAAI,KAAK,aAAa,IAClC,IAAI,aAAa,IAAI,KAAK,aAAa;AAAA,MAC3C,kBAAkB,UACd,IAAI,QAAQ,IAAI,KAAK,aAAa,IAClC,IAAI,aAAa,IAAI,KAAK,aAAa;AAAA,MAC3C,kBAAkB,UACd,IAAI,QAAQ,IAAI,KAAK,aAAa,IAClC,IAAI,aAAa,IAAI,KAAK,aAAa;AAAA,MAC3C,kBAAkB,UACd,IAAI,QAAQ,IAAI,KAAK,aAAa,IAClC,IAAI,aAAa,IAAI,KAAK,aAAa;AAAA,IAC7C,CAAC;AAAA,EACH,OAAO;AACL,WAAO,OAAO,OAAO;AAAA,MACnB,aAAa,IAAI,cAAc,IAAI,aAAa,aAAa;AAAA,MAC7D,kBAAkB,IAAI,cAAc,IAAI,aAAa,aAAa;AAAA,MAClE,kBAAkB,IAAI,cAAc,IAAI,aAAa,aAAa;AAAA,MAClE,kBAAkB,IAAI,cAAc,IAAI,aAAa,aAAa;AAAA,IACpE,CAAC;AAAA,EACH;AAEA,SAAO;AACT;AAEA,MAAM,cAAc;AAAA,EAClB,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEA,MAAM,cAAc,iBAAiB,SAAS,cAAc;AAAA,EAC1D,aAAa,YAAY;AAAA,EAEzB,kBAAkB,QAAQ,YAAY;AAAA,EACtC,cAAc,YAAY,MAAM,MAAM,CAAC;AAAA,EACvC,SAAS;AAAA,EACT,SAAS;AAAA,IACP,YAAY,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAAA,EAC/B;AACF,CAAC;AAED,MAAM,aAAa,iBAAiB,QAAQ,cAAc;AAAA,EACxD,aAAa,YAAY;AAAA,EACzB,QAAQ,YAAY,MAAM,MAAM,CAAC;AAAA,EACjC,kBAAkB;AAAA,EAClB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,IACP,OAAO,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAAA,EAC1B;AACF,CAAC;AAED,WAAW,YAAY,aAAa;AACpC,WAAW,YAAY,mBAAmB;AAE1C,MAAM,QAAQ,YAAY;AAAA,EACxB,GAAG;AAAA,EACH,GAAG,YAAY;AACjB,CAAC;AAED,MAAM,OAAO,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG,WAAW;AAChB,CAAC;AAMD,MAAM,aAAa;AAAA,EAEjB,GAAG;AAAA,EACH;AAAA,EAEA,cAAc,YAAY;AAAA,EAC1B,YAAY,YAAY;AAAA,EACxB,mBAAmB,YAAY;AAAA,EAC/B,yBAAyB,YAAY;AAAA,EACrC,cAAc,YAAY;AAAA,EAC1B,mBAAmB,YAAY;AAAA,EAC/B,mBAAmB,YAAY;AAAA,EAG/B,GAAG;AAAA,EACH;AAAA,EAEA,aAAa,WAAW;AAAA,EACxB,WAAW,WAAW;AAAA,EACtB,kBAAkB,WAAW;AAAA,EAC7B,kBAAkB,WAAW;AAAA,EAC7B,wBAAwB,WAAW;AAAA,EACnC,aAAa,WAAW;AAAA,EACxB,kBAAkB,WAAW;AAAA,EAC7B,aAAa,WAAW;AAC1B;AAEA,MAAM,cAAc,OAAO,QAAQ,IAAI;AACvC,MAAM,eAAe,OAAO,QAAQ,KAAK;AACzC,oBAAoB,QAAgB,QAAO,OAAkB;AAC3D,SAAO,OAAO,YACX,SAAO,cAAc,cAAc,OAAO,CAAC,CAAC,OAAO,EAAE,WAAW,MAAM,CAAC,CAC1E;AACF;AAEO,MAAM,eAAe;AAAA,EAC1B,EAAE,MAAM,QAAQ,QAAQ,WAAW,MAAM,GAAG,YAAY,WAAW,QAAQ,IAAI,EAAE;AAAA,EACjF,EAAE,MAAM,QAAQ,QAAQ,WAAW,MAAM,GAAG,YAAY,WAAW,QAAQ,IAAI,EAAE;AAAA,EACjF,EAAE,MAAM,SAAS,QAAQ,WAAW,OAAO,GAAG,YAAY,WAAW,SAAS,IAAI,EAAE;AAAA,EACpF,EAAE,MAAM,UAAU,QAAQ,WAAW,QAAQ,GAAG,YAAY,WAAW,UAAU,IAAI,EAAE;AAAA,EACvF,EAAE,MAAM,QAAQ,QAAQ,WAAW,MAAM,GAAG,YAAY,WAAW,QAAQ,IAAI,EAAE;AAAA,EACjF,EAAE,MAAM,UAAU,QAAQ,WAAW,QAAQ,GAAG,YAAY,WAAW,UAAU,IAAI,EAAE;AAAA,EACvF,EAAE,MAAM,OAAO,QAAQ,WAAW,KAAK,GAAG,YAAY,WAAW,OAAO,IAAI,EAAE;AAAA,EAC9E,EAAE,MAAM,UAAU,QAAQ,WAAW,QAAQ,GAAG,YAAY,WAAW,UAAU,IAAI,EAAE;AAAA,EACvF,EAAE,MAAM,QAAQ,QAAQ,WAAW,MAAM,GAAG,YAAY,WAAW,QAAQ,IAAI,EAAE;AACnF;AAKO,MAAM,aAA2B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAOA,MAAM,oBAAoB,aAAa,QAAQ,CAAC,EAAE,MAAM,QAAQ,8BAAiB;AAC/E,QAAM,CAAC,gBAAgB,iBAAiB;AAAA,IACtC,EAAE,QAAQ,aAAY,aAAa,OAAO;AAAA,IAC1C,EAAE,QAAQ,aAAa,YAAW;AAAA,EACpC,EAAE,IAAI,CAAC,OAAO,MAAM;AAClB,UAAM,UAAU,MAAM;AACtB,UAAM,aAAa,OAAO,OAAO,MAAM,MAAM,EAAE,MAAM,CAAC;AACtD,UAAM,CAAC,aAAa,WAAU;AAAA,MAC5B,OAAO,OAAO,MAAM,WAAW;AAAA,MAC/B,UAAU,aAAa,CAAC,WAAW,IAAI,QAAQ,GAAG,WAAW,MAAM,CAAC,CAAC;AAAA,IACvE;AAEA,UAAM,SAAS,UAAU,UAAU;AACnC,UAAM,QAAQ,UAAU,IAAI;AAO5B,UAAM,gBAAgB,iBAAiB,MAAM,cAAc;AAAA,MACzD;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,SAAS;AAAA,QACP,YAAY,UAAU,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,IAAI;AAAA,QAC3C,aAAa,UAAU,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,IAAI;AAAA,QACzC,OAAO,UAAU,CAAC,GAAG,GAAG,IAAI,IAAI,IAAI,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,EAAE;AAAA,MACvE;AAAA,IACF,CAAC;AAED,WAAO,OAAO,QAAQ,aAAa,EAAE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,UAAU,KAAK,CAAC,CAAC;AAAA,EAC5E,CAAC;AACD,SAAO,CAAC,GAAG,gBAAgB,GAAG,aAAa;AAC7C,CAAC;AAID,MAAM,cAEF,OAAO,YAAY,iBAAiB;AAGxC,WAAW,cAAc;AAAA,EACvB,GAAG,YAAY;AAAA,EACf,YAAY,WAAW;AAAA,EACvB,iBAAiB,WAAW;AAAA,EAC5B,iBAAiB,WAAW;AAAA,EAC5B,iBAAiB,WAAW;AAAA,EAC5B,OAAO,WAAW;AAAA,EAClB,YAAY,WAAW;AAAA,EACvB,YAAY,WAAW;AAAA,EACvB,YAAY,WAAW;AACzB;AAGA,WAAW,eAAe,WAAW;AAErC,MAAM,YAAY;AAAA,EAChB,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,SAET;",
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
- }