@tamagui/themes 1.14.1 → 1.14.3
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/index.js +20 -1
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/themes.js +272 -1
- package/dist/cjs/themes.js.map +2 -2
- package/dist/cjs/tokens.js +179 -1
- package/dist/cjs/tokens.js.map +2 -2
- package/dist/esm/index.js +3 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +3 -1
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/themes.js +254 -1
- package/dist/esm/themes.js.map +2 -2
- package/dist/esm/themes.mjs +254 -1
- package/dist/esm/themes.mjs.map +2 -2
- package/dist/esm/tokens.js +164 -1
- package/dist/esm/tokens.js.map +2 -2
- package/dist/esm/tokens.mjs +164 -1
- package/dist/esm/tokens.mjs.map +2 -2
- package/package.json +5 -5
package/dist/esm/tokens.js
CHANGED
|
@@ -1,2 +1,165 @@
|
|
|
1
|
-
import
|
|
1
|
+
import {
|
|
2
|
+
blue,
|
|
3
|
+
blueDark,
|
|
4
|
+
gray,
|
|
5
|
+
grayDark,
|
|
6
|
+
green,
|
|
7
|
+
greenDark,
|
|
8
|
+
orange,
|
|
9
|
+
orangeDark,
|
|
10
|
+
pink,
|
|
11
|
+
pinkDark,
|
|
12
|
+
purple,
|
|
13
|
+
purpleDark,
|
|
14
|
+
red,
|
|
15
|
+
redDark,
|
|
16
|
+
yellow,
|
|
17
|
+
yellowDark
|
|
18
|
+
} from "@tamagui/colors";
|
|
19
|
+
import { createTokens } from "@tamagui/web";
|
|
20
|
+
const size = {
|
|
21
|
+
$0: 0,
|
|
22
|
+
"$0.25": 2,
|
|
23
|
+
"$0.5": 4,
|
|
24
|
+
"$0.75": 8,
|
|
25
|
+
$1: 20,
|
|
26
|
+
"$1.5": 24,
|
|
27
|
+
$2: 28,
|
|
28
|
+
"$2.5": 32,
|
|
29
|
+
$3: 36,
|
|
30
|
+
"$3.5": 40,
|
|
31
|
+
$4: 44,
|
|
32
|
+
$true: 44,
|
|
33
|
+
"$4.5": 48,
|
|
34
|
+
$5: 52,
|
|
35
|
+
$6: 64,
|
|
36
|
+
$7: 74,
|
|
37
|
+
$8: 84,
|
|
38
|
+
$9: 94,
|
|
39
|
+
$10: 104,
|
|
40
|
+
$11: 124,
|
|
41
|
+
$12: 144,
|
|
42
|
+
$13: 164,
|
|
43
|
+
$14: 184,
|
|
44
|
+
$15: 204,
|
|
45
|
+
$16: 224,
|
|
46
|
+
$17: 224,
|
|
47
|
+
$18: 244,
|
|
48
|
+
$19: 264,
|
|
49
|
+
$20: 284
|
|
50
|
+
};
|
|
51
|
+
const spaces = Object.entries(size).map(([k, v]) => {
|
|
52
|
+
return [k, sizeToSpace(v)];
|
|
53
|
+
});
|
|
54
|
+
function sizeToSpace(v) {
|
|
55
|
+
if (v === 0)
|
|
56
|
+
return 0;
|
|
57
|
+
if (v === 2)
|
|
58
|
+
return 0.5;
|
|
59
|
+
if (v === 4)
|
|
60
|
+
return 1;
|
|
61
|
+
if (v === 8)
|
|
62
|
+
return 1.5;
|
|
63
|
+
if (v <= 16)
|
|
64
|
+
return Math.round(v * 0.333);
|
|
65
|
+
return Math.floor(v * 0.7 - 12);
|
|
66
|
+
}
|
|
67
|
+
const spacesNegative = spaces.slice(1).map(([k, v]) => [`-${k.slice(1)}`, -v]);
|
|
68
|
+
const space = {
|
|
69
|
+
...Object.fromEntries(spaces),
|
|
70
|
+
...Object.fromEntries(spacesNegative)
|
|
71
|
+
};
|
|
72
|
+
const zIndex = {
|
|
73
|
+
0: 0,
|
|
74
|
+
1: 100,
|
|
75
|
+
2: 200,
|
|
76
|
+
3: 300,
|
|
77
|
+
4: 400,
|
|
78
|
+
5: 500
|
|
79
|
+
};
|
|
80
|
+
const colorTokens = {
|
|
81
|
+
light: {
|
|
82
|
+
blue,
|
|
83
|
+
gray,
|
|
84
|
+
green,
|
|
85
|
+
orange,
|
|
86
|
+
pink,
|
|
87
|
+
purple,
|
|
88
|
+
red,
|
|
89
|
+
yellow
|
|
90
|
+
},
|
|
91
|
+
dark: {
|
|
92
|
+
blue: blueDark,
|
|
93
|
+
gray: grayDark,
|
|
94
|
+
green: greenDark,
|
|
95
|
+
orange: orangeDark,
|
|
96
|
+
pink: pinkDark,
|
|
97
|
+
purple: purpleDark,
|
|
98
|
+
red: redDark,
|
|
99
|
+
yellow: yellowDark
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
const darkColors = {
|
|
103
|
+
...colorTokens.dark.blue,
|
|
104
|
+
...colorTokens.dark.gray,
|
|
105
|
+
...colorTokens.dark.green,
|
|
106
|
+
...colorTokens.dark.orange,
|
|
107
|
+
...colorTokens.dark.pink,
|
|
108
|
+
...colorTokens.dark.purple,
|
|
109
|
+
...colorTokens.dark.red,
|
|
110
|
+
...colorTokens.dark.yellow
|
|
111
|
+
};
|
|
112
|
+
const lightColors = {
|
|
113
|
+
...colorTokens.light.blue,
|
|
114
|
+
...colorTokens.light.gray,
|
|
115
|
+
...colorTokens.light.green,
|
|
116
|
+
...colorTokens.light.orange,
|
|
117
|
+
...colorTokens.light.pink,
|
|
118
|
+
...colorTokens.light.purple,
|
|
119
|
+
...colorTokens.light.red,
|
|
120
|
+
...colorTokens.light.yellow
|
|
121
|
+
};
|
|
122
|
+
const color = {
|
|
123
|
+
...postfixObjKeys(lightColors, "Light"),
|
|
124
|
+
...postfixObjKeys(darkColors, "Dark")
|
|
125
|
+
};
|
|
126
|
+
function postfixObjKeys(obj, postfix) {
|
|
127
|
+
return Object.fromEntries(
|
|
128
|
+
Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
const radius = {
|
|
132
|
+
0: 0,
|
|
133
|
+
1: 3,
|
|
134
|
+
2: 5,
|
|
135
|
+
3: 7,
|
|
136
|
+
4: 9,
|
|
137
|
+
true: 9,
|
|
138
|
+
5: 10,
|
|
139
|
+
6: 16,
|
|
140
|
+
7: 19,
|
|
141
|
+
8: 22,
|
|
142
|
+
9: 26,
|
|
143
|
+
10: 34,
|
|
144
|
+
11: 42,
|
|
145
|
+
12: 50
|
|
146
|
+
};
|
|
147
|
+
const tokens = createTokens({
|
|
148
|
+
color,
|
|
149
|
+
radius,
|
|
150
|
+
zIndex,
|
|
151
|
+
space,
|
|
152
|
+
size
|
|
153
|
+
});
|
|
154
|
+
export {
|
|
155
|
+
color,
|
|
156
|
+
colorTokens,
|
|
157
|
+
darkColors,
|
|
158
|
+
lightColors,
|
|
159
|
+
radius,
|
|
160
|
+
size,
|
|
161
|
+
space,
|
|
162
|
+
tokens,
|
|
163
|
+
zIndex
|
|
164
|
+
};
|
|
2
165
|
//# sourceMappingURL=tokens.js.map
|
package/dist/esm/tokens.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/tokens.tsx"],
|
|
4
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/web'\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)] as const\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.slice(1).map(([k, v]) => [`-${k.slice(1)}`, -v])\n\ntype SizeKeysWithNegatives =\n | Exclude<`-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}`, '-0'>\n | SizeKeys\n\nexport const space: {\n [Key in SizeKeysWithNegatives]: 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,\n})\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
package/dist/esm/tokens.mjs
CHANGED
|
@@ -1,2 +1,165 @@
|
|
|
1
|
-
import
|
|
1
|
+
import {
|
|
2
|
+
blue,
|
|
3
|
+
blueDark,
|
|
4
|
+
gray,
|
|
5
|
+
grayDark,
|
|
6
|
+
green,
|
|
7
|
+
greenDark,
|
|
8
|
+
orange,
|
|
9
|
+
orangeDark,
|
|
10
|
+
pink,
|
|
11
|
+
pinkDark,
|
|
12
|
+
purple,
|
|
13
|
+
purpleDark,
|
|
14
|
+
red,
|
|
15
|
+
redDark,
|
|
16
|
+
yellow,
|
|
17
|
+
yellowDark
|
|
18
|
+
} from "@tamagui/colors";
|
|
19
|
+
import { createTokens } from "@tamagui/web";
|
|
20
|
+
const size = {
|
|
21
|
+
$0: 0,
|
|
22
|
+
"$0.25": 2,
|
|
23
|
+
"$0.5": 4,
|
|
24
|
+
"$0.75": 8,
|
|
25
|
+
$1: 20,
|
|
26
|
+
"$1.5": 24,
|
|
27
|
+
$2: 28,
|
|
28
|
+
"$2.5": 32,
|
|
29
|
+
$3: 36,
|
|
30
|
+
"$3.5": 40,
|
|
31
|
+
$4: 44,
|
|
32
|
+
$true: 44,
|
|
33
|
+
"$4.5": 48,
|
|
34
|
+
$5: 52,
|
|
35
|
+
$6: 64,
|
|
36
|
+
$7: 74,
|
|
37
|
+
$8: 84,
|
|
38
|
+
$9: 94,
|
|
39
|
+
$10: 104,
|
|
40
|
+
$11: 124,
|
|
41
|
+
$12: 144,
|
|
42
|
+
$13: 164,
|
|
43
|
+
$14: 184,
|
|
44
|
+
$15: 204,
|
|
45
|
+
$16: 224,
|
|
46
|
+
$17: 224,
|
|
47
|
+
$18: 244,
|
|
48
|
+
$19: 264,
|
|
49
|
+
$20: 284
|
|
50
|
+
};
|
|
51
|
+
const spaces = Object.entries(size).map(([k, v]) => {
|
|
52
|
+
return [k, sizeToSpace(v)];
|
|
53
|
+
});
|
|
54
|
+
function sizeToSpace(v) {
|
|
55
|
+
if (v === 0)
|
|
56
|
+
return 0;
|
|
57
|
+
if (v === 2)
|
|
58
|
+
return 0.5;
|
|
59
|
+
if (v === 4)
|
|
60
|
+
return 1;
|
|
61
|
+
if (v === 8)
|
|
62
|
+
return 1.5;
|
|
63
|
+
if (v <= 16)
|
|
64
|
+
return Math.round(v * 0.333);
|
|
65
|
+
return Math.floor(v * 0.7 - 12);
|
|
66
|
+
}
|
|
67
|
+
const spacesNegative = spaces.slice(1).map(([k, v]) => [`-${k.slice(1)}`, -v]);
|
|
68
|
+
const space = {
|
|
69
|
+
...Object.fromEntries(spaces),
|
|
70
|
+
...Object.fromEntries(spacesNegative)
|
|
71
|
+
};
|
|
72
|
+
const zIndex = {
|
|
73
|
+
0: 0,
|
|
74
|
+
1: 100,
|
|
75
|
+
2: 200,
|
|
76
|
+
3: 300,
|
|
77
|
+
4: 400,
|
|
78
|
+
5: 500
|
|
79
|
+
};
|
|
80
|
+
const colorTokens = {
|
|
81
|
+
light: {
|
|
82
|
+
blue,
|
|
83
|
+
gray,
|
|
84
|
+
green,
|
|
85
|
+
orange,
|
|
86
|
+
pink,
|
|
87
|
+
purple,
|
|
88
|
+
red,
|
|
89
|
+
yellow
|
|
90
|
+
},
|
|
91
|
+
dark: {
|
|
92
|
+
blue: blueDark,
|
|
93
|
+
gray: grayDark,
|
|
94
|
+
green: greenDark,
|
|
95
|
+
orange: orangeDark,
|
|
96
|
+
pink: pinkDark,
|
|
97
|
+
purple: purpleDark,
|
|
98
|
+
red: redDark,
|
|
99
|
+
yellow: yellowDark
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
const darkColors = {
|
|
103
|
+
...colorTokens.dark.blue,
|
|
104
|
+
...colorTokens.dark.gray,
|
|
105
|
+
...colorTokens.dark.green,
|
|
106
|
+
...colorTokens.dark.orange,
|
|
107
|
+
...colorTokens.dark.pink,
|
|
108
|
+
...colorTokens.dark.purple,
|
|
109
|
+
...colorTokens.dark.red,
|
|
110
|
+
...colorTokens.dark.yellow
|
|
111
|
+
};
|
|
112
|
+
const lightColors = {
|
|
113
|
+
...colorTokens.light.blue,
|
|
114
|
+
...colorTokens.light.gray,
|
|
115
|
+
...colorTokens.light.green,
|
|
116
|
+
...colorTokens.light.orange,
|
|
117
|
+
...colorTokens.light.pink,
|
|
118
|
+
...colorTokens.light.purple,
|
|
119
|
+
...colorTokens.light.red,
|
|
120
|
+
...colorTokens.light.yellow
|
|
121
|
+
};
|
|
122
|
+
const color = {
|
|
123
|
+
...postfixObjKeys(lightColors, "Light"),
|
|
124
|
+
...postfixObjKeys(darkColors, "Dark")
|
|
125
|
+
};
|
|
126
|
+
function postfixObjKeys(obj, postfix) {
|
|
127
|
+
return Object.fromEntries(
|
|
128
|
+
Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
const radius = {
|
|
132
|
+
0: 0,
|
|
133
|
+
1: 3,
|
|
134
|
+
2: 5,
|
|
135
|
+
3: 7,
|
|
136
|
+
4: 9,
|
|
137
|
+
true: 9,
|
|
138
|
+
5: 10,
|
|
139
|
+
6: 16,
|
|
140
|
+
7: 19,
|
|
141
|
+
8: 22,
|
|
142
|
+
9: 26,
|
|
143
|
+
10: 34,
|
|
144
|
+
11: 42,
|
|
145
|
+
12: 50
|
|
146
|
+
};
|
|
147
|
+
const tokens = createTokens({
|
|
148
|
+
color,
|
|
149
|
+
radius,
|
|
150
|
+
zIndex,
|
|
151
|
+
space,
|
|
152
|
+
size
|
|
153
|
+
});
|
|
154
|
+
export {
|
|
155
|
+
color,
|
|
156
|
+
colorTokens,
|
|
157
|
+
darkColors,
|
|
158
|
+
lightColors,
|
|
159
|
+
radius,
|
|
160
|
+
size,
|
|
161
|
+
space,
|
|
162
|
+
tokens,
|
|
163
|
+
zIndex
|
|
164
|
+
};
|
|
2
165
|
//# sourceMappingURL=tokens.mjs.map
|
package/dist/esm/tokens.mjs.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/tokens.tsx"],
|
|
4
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/web'\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)] as const\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.slice(1).map(([k, v]) => [`-${k.slice(1)}`, -v])\n\ntype SizeKeysWithNegatives =\n | Exclude<`-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}`, '-0'>\n | SizeKeys\n\nexport const space: {\n [Key in SizeKeysWithNegatives]: 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,\n})\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/themes",
|
|
3
|
-
"version": "1.14.
|
|
3
|
+
"version": "1.14.3",
|
|
4
4
|
"types": "./types/index.d.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -27,12 +27,12 @@
|
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@tamagui/colors": "1.14.
|
|
31
|
-
"@tamagui/create-theme": "1.14.
|
|
32
|
-
"@tamagui/web": "1.14.
|
|
30
|
+
"@tamagui/colors": "1.14.3",
|
|
31
|
+
"@tamagui/create-theme": "1.14.3",
|
|
32
|
+
"@tamagui/web": "1.14.3"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@tamagui/build": "1.14.
|
|
35
|
+
"@tamagui/build": "1.14.3"
|
|
36
36
|
},
|
|
37
37
|
"publishConfig": {
|
|
38
38
|
"access": "public"
|