@tamagui/theme-base 1.0.1-beta.167 → 1.0.1-beta.168
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 +14 -4
- package/dist/cjs/tokens.js.map +2 -2
- package/dist/esm/tokens.js +8 -3
- package/dist/esm/tokens.js.map +2 -2
- package/package.json +4 -4
- package/src/tokens.tsx +6 -6
- package/types/tokens.d.ts +259 -0
package/dist/cjs/tokens.js
CHANGED
|
@@ -18,9 +18,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
19
|
var tokens_exports = {};
|
|
20
20
|
__export(tokens_exports, {
|
|
21
|
+
color: () => color,
|
|
21
22
|
darkColors: () => darkColors,
|
|
22
23
|
lightColors: () => lightColors,
|
|
23
|
-
|
|
24
|
+
radius: () => radius,
|
|
25
|
+
size: () => size,
|
|
26
|
+
space: () => space,
|
|
27
|
+
tokens: () => tokens,
|
|
28
|
+
zIndex: () => zIndex
|
|
24
29
|
});
|
|
25
30
|
module.exports = __toCommonJS(tokens_exports);
|
|
26
31
|
var import_colors = require("@tamagui/colors");
|
|
@@ -120,7 +125,7 @@ const lightColors = {
|
|
|
120
125
|
...colorTokens.light.red,
|
|
121
126
|
...colorTokens.light.yellow
|
|
122
127
|
};
|
|
123
|
-
const
|
|
128
|
+
const color = {
|
|
124
129
|
...postfixObjKeys(lightColors, "Light"),
|
|
125
130
|
...postfixObjKeys(darkColors, "Dark")
|
|
126
131
|
};
|
|
@@ -143,7 +148,7 @@ const radius = {
|
|
|
143
148
|
12: 50
|
|
144
149
|
};
|
|
145
150
|
const tokens = (0, import_core.createTokens)({
|
|
146
|
-
color
|
|
151
|
+
color,
|
|
147
152
|
radius,
|
|
148
153
|
zIndex,
|
|
149
154
|
space,
|
|
@@ -151,8 +156,13 @@ const tokens = (0, import_core.createTokens)({
|
|
|
151
156
|
});
|
|
152
157
|
// Annotate the CommonJS export names for ESM import in node:
|
|
153
158
|
0 && (module.exports = {
|
|
159
|
+
color,
|
|
154
160
|
darkColors,
|
|
155
161
|
lightColors,
|
|
156
|
-
|
|
162
|
+
radius,
|
|
163
|
+
size,
|
|
164
|
+
space,
|
|
165
|
+
tokens,
|
|
166
|
+
zIndex
|
|
157
167
|
});
|
|
158
168
|
//# sourceMappingURL=tokens.js.map
|
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)\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAiBO;AACP,kBAAuC;
|
|
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 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\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\nconst 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<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\nexport const 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,\n radius,\n zIndex,\n space,\n size,\n})\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/tokens.js
CHANGED
|
@@ -112,7 +112,7 @@ const lightColors = {
|
|
|
112
112
|
...colorTokens.light.red,
|
|
113
113
|
...colorTokens.light.yellow
|
|
114
114
|
};
|
|
115
|
-
const
|
|
115
|
+
const color = {
|
|
116
116
|
...postfixObjKeys(lightColors, "Light"),
|
|
117
117
|
...postfixObjKeys(darkColors, "Dark")
|
|
118
118
|
};
|
|
@@ -135,15 +135,20 @@ const radius = {
|
|
|
135
135
|
12: 50
|
|
136
136
|
};
|
|
137
137
|
const tokens = createTokens({
|
|
138
|
-
color
|
|
138
|
+
color,
|
|
139
139
|
radius,
|
|
140
140
|
zIndex,
|
|
141
141
|
space,
|
|
142
142
|
size
|
|
143
143
|
});
|
|
144
144
|
export {
|
|
145
|
+
color,
|
|
145
146
|
darkColors,
|
|
146
147
|
lightColors,
|
|
147
|
-
|
|
148
|
+
radius,
|
|
149
|
+
size,
|
|
150
|
+
space,
|
|
151
|
+
tokens,
|
|
152
|
+
zIndex
|
|
148
153
|
};
|
|
149
154
|
//# sourceMappingURL=tokens.js.map
|
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)\
|
|
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;
|
|
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 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\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\nconst 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<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\nexport const 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,\n radius,\n zIndex,\n space,\n size,\n})\n"],
|
|
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.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.168",
|
|
4
4
|
"types": "./types/index.d.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -26,11 +26,11 @@
|
|
|
26
26
|
}
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@tamagui/colors": "^1.0.1-beta.
|
|
30
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
29
|
+
"@tamagui/colors": "^1.0.1-beta.168",
|
|
30
|
+
"@tamagui/core": "^1.0.1-beta.168"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
33
|
+
"@tamagui/build": "^1.0.1-beta.168"
|
|
34
34
|
},
|
|
35
35
|
"publishConfig": {
|
|
36
36
|
"access": "public"
|
package/src/tokens.tsx
CHANGED
|
@@ -30,7 +30,7 @@ import { Variable, createTokens } from '@tamagui/core'
|
|
|
30
30
|
// but also one more wrinkle...
|
|
31
31
|
// space is used in conjunction with size
|
|
32
32
|
// i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)
|
|
33
|
-
const size = {
|
|
33
|
+
export const size = {
|
|
34
34
|
0: 0,
|
|
35
35
|
0.25: 2,
|
|
36
36
|
0.5: 4,
|
|
@@ -77,14 +77,14 @@ const spaces = Object.entries(size).map(([k, v]) => [
|
|
|
77
77
|
|
|
78
78
|
const spacesNegative = spaces.map(([k, v]) => [`-${k}`, -v])
|
|
79
79
|
|
|
80
|
-
const space: {
|
|
80
|
+
export const space: {
|
|
81
81
|
[Key in `-${SizeKeys}` | SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number
|
|
82
82
|
} = {
|
|
83
83
|
...Object.fromEntries(spaces),
|
|
84
84
|
...Object.fromEntries(spacesNegative),
|
|
85
85
|
} as any
|
|
86
86
|
|
|
87
|
-
const zIndex = {
|
|
87
|
+
export const zIndex = {
|
|
88
88
|
0: 0,
|
|
89
89
|
1: 100,
|
|
90
90
|
2: 200,
|
|
@@ -138,7 +138,7 @@ export const lightColors = {
|
|
|
138
138
|
...colorTokens.light.yellow,
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
-
const
|
|
141
|
+
export const color = {
|
|
142
142
|
...postfixObjKeys(lightColors, 'Light'),
|
|
143
143
|
...postfixObjKeys(darkColors, 'Dark'),
|
|
144
144
|
}
|
|
@@ -152,7 +152,7 @@ function postfixObjKeys<A extends { [key: string]: Variable<string> | string },
|
|
|
152
152
|
return Object.fromEntries(Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])) as any
|
|
153
153
|
}
|
|
154
154
|
|
|
155
|
-
const radius = {
|
|
155
|
+
export const radius = {
|
|
156
156
|
0: 0,
|
|
157
157
|
1: 3,
|
|
158
158
|
2: 5,
|
|
@@ -169,7 +169,7 @@ const radius = {
|
|
|
169
169
|
}
|
|
170
170
|
|
|
171
171
|
export const tokens = createTokens({
|
|
172
|
-
color
|
|
172
|
+
color,
|
|
173
173
|
radius,
|
|
174
174
|
zIndex,
|
|
175
175
|
space,
|
package/types/tokens.d.ts
CHANGED
|
@@ -1,4 +1,53 @@
|
|
|
1
1
|
import { Variable } from '@tamagui/core';
|
|
2
|
+
export declare const size: {
|
|
3
|
+
0: number;
|
|
4
|
+
0.25: number;
|
|
5
|
+
0.5: number;
|
|
6
|
+
0.75: number;
|
|
7
|
+
1: number;
|
|
8
|
+
1.5: number;
|
|
9
|
+
2: number;
|
|
10
|
+
2.5: number;
|
|
11
|
+
3: number;
|
|
12
|
+
3.5: number;
|
|
13
|
+
4: number;
|
|
14
|
+
true: number;
|
|
15
|
+
4.5: number;
|
|
16
|
+
5: number;
|
|
17
|
+
5.5: number;
|
|
18
|
+
6: number;
|
|
19
|
+
6.5: number;
|
|
20
|
+
7: number;
|
|
21
|
+
7.6: number;
|
|
22
|
+
8: number;
|
|
23
|
+
8.5: number;
|
|
24
|
+
9: number;
|
|
25
|
+
9.5: number;
|
|
26
|
+
10: number;
|
|
27
|
+
11: number;
|
|
28
|
+
12: number;
|
|
29
|
+
13: number;
|
|
30
|
+
14: number;
|
|
31
|
+
15: number;
|
|
32
|
+
16: number;
|
|
33
|
+
17: number;
|
|
34
|
+
18: number;
|
|
35
|
+
19: number;
|
|
36
|
+
20: number;
|
|
37
|
+
};
|
|
38
|
+
declare type Sizes = typeof size;
|
|
39
|
+
declare type SizeKeys = `${keyof Sizes}`;
|
|
40
|
+
export declare const space: {
|
|
41
|
+
[Key in `-${SizeKeys}` | SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number;
|
|
42
|
+
};
|
|
43
|
+
export declare const zIndex: {
|
|
44
|
+
0: number;
|
|
45
|
+
1: number;
|
|
46
|
+
2: number;
|
|
47
|
+
3: number;
|
|
48
|
+
4: number;
|
|
49
|
+
5: number;
|
|
50
|
+
};
|
|
2
51
|
export declare const darkColors: {
|
|
3
52
|
yellow1: string;
|
|
4
53
|
yellow2: string;
|
|
@@ -195,6 +244,215 @@ export declare const lightColors: {
|
|
|
195
244
|
blue11: string;
|
|
196
245
|
blue12: string;
|
|
197
246
|
};
|
|
247
|
+
export declare const color: {
|
|
248
|
+
yellow1Dark: string | Variable<string>;
|
|
249
|
+
yellow2Dark: string | Variable<string>;
|
|
250
|
+
yellow3Dark: string | Variable<string>;
|
|
251
|
+
yellow4Dark: string | Variable<string>;
|
|
252
|
+
yellow5Dark: string | Variable<string>;
|
|
253
|
+
yellow6Dark: string | Variable<string>;
|
|
254
|
+
yellow7Dark: string | Variable<string>;
|
|
255
|
+
yellow8Dark: string | Variable<string>;
|
|
256
|
+
yellow9Dark: string | Variable<string>;
|
|
257
|
+
yellow10Dark: string | Variable<string>;
|
|
258
|
+
yellow11Dark: string | Variable<string>;
|
|
259
|
+
yellow12Dark: string | Variable<string>;
|
|
260
|
+
red1Dark: string | Variable<string>;
|
|
261
|
+
red2Dark: string | Variable<string>;
|
|
262
|
+
red3Dark: string | Variable<string>;
|
|
263
|
+
red4Dark: string | Variable<string>;
|
|
264
|
+
red5Dark: string | Variable<string>;
|
|
265
|
+
red6Dark: string | Variable<string>;
|
|
266
|
+
red7Dark: string | Variable<string>;
|
|
267
|
+
red8Dark: string | Variable<string>;
|
|
268
|
+
red9Dark: string | Variable<string>;
|
|
269
|
+
red10Dark: string | Variable<string>;
|
|
270
|
+
red11Dark: string | Variable<string>;
|
|
271
|
+
red12Dark: string | Variable<string>;
|
|
272
|
+
purple1Dark: string | Variable<string>;
|
|
273
|
+
purple2Dark: string | Variable<string>;
|
|
274
|
+
purple3Dark: string | Variable<string>;
|
|
275
|
+
purple4Dark: string | Variable<string>;
|
|
276
|
+
purple5Dark: string | Variable<string>;
|
|
277
|
+
purple6Dark: string | Variable<string>;
|
|
278
|
+
purple7Dark: string | Variable<string>;
|
|
279
|
+
purple8Dark: string | Variable<string>;
|
|
280
|
+
purple9Dark: string | Variable<string>;
|
|
281
|
+
purple10Dark: string | Variable<string>;
|
|
282
|
+
purple11Dark: string | Variable<string>;
|
|
283
|
+
purple12Dark: string | Variable<string>;
|
|
284
|
+
pink1Dark: string | Variable<string>;
|
|
285
|
+
pink2Dark: string | Variable<string>;
|
|
286
|
+
pink3Dark: string | Variable<string>;
|
|
287
|
+
pink4Dark: string | Variable<string>;
|
|
288
|
+
pink5Dark: string | Variable<string>;
|
|
289
|
+
pink6Dark: string | Variable<string>;
|
|
290
|
+
pink7Dark: string | Variable<string>;
|
|
291
|
+
pink8Dark: string | Variable<string>;
|
|
292
|
+
pink9Dark: string | Variable<string>;
|
|
293
|
+
pink10Dark: string | Variable<string>;
|
|
294
|
+
pink11Dark: string | Variable<string>;
|
|
295
|
+
pink12Dark: string | Variable<string>;
|
|
296
|
+
orange1Dark: string | Variable<string>;
|
|
297
|
+
orange2Dark: string | Variable<string>;
|
|
298
|
+
orange3Dark: string | Variable<string>;
|
|
299
|
+
orange4Dark: string | Variable<string>;
|
|
300
|
+
orange5Dark: string | Variable<string>;
|
|
301
|
+
orange6Dark: string | Variable<string>;
|
|
302
|
+
orange7Dark: string | Variable<string>;
|
|
303
|
+
orange8Dark: string | Variable<string>;
|
|
304
|
+
orange9Dark: string | Variable<string>;
|
|
305
|
+
orange10Dark: string | Variable<string>;
|
|
306
|
+
orange11Dark: string | Variable<string>;
|
|
307
|
+
orange12Dark: string | Variable<string>;
|
|
308
|
+
green1Dark: string | Variable<string>;
|
|
309
|
+
green2Dark: string | Variable<string>;
|
|
310
|
+
green3Dark: string | Variable<string>;
|
|
311
|
+
green4Dark: string | Variable<string>;
|
|
312
|
+
green5Dark: string | Variable<string>;
|
|
313
|
+
green6Dark: string | Variable<string>;
|
|
314
|
+
green7Dark: string | Variable<string>;
|
|
315
|
+
green8Dark: string | Variable<string>;
|
|
316
|
+
green9Dark: string | Variable<string>;
|
|
317
|
+
green10Dark: string | Variable<string>;
|
|
318
|
+
green11Dark: string | Variable<string>;
|
|
319
|
+
green12Dark: string | Variable<string>;
|
|
320
|
+
gray1Dark: string | Variable<string>;
|
|
321
|
+
gray2Dark: string | Variable<string>;
|
|
322
|
+
gray3Dark: string | Variable<string>;
|
|
323
|
+
gray4Dark: string | Variable<string>;
|
|
324
|
+
gray5Dark: string | Variable<string>;
|
|
325
|
+
gray6Dark: string | Variable<string>;
|
|
326
|
+
gray7Dark: string | Variable<string>;
|
|
327
|
+
gray8Dark: string | Variable<string>;
|
|
328
|
+
gray9Dark: string | Variable<string>;
|
|
329
|
+
gray10Dark: string | Variable<string>;
|
|
330
|
+
gray11Dark: string | Variable<string>;
|
|
331
|
+
gray12Dark: string | Variable<string>;
|
|
332
|
+
blue1Dark: string | Variable<string>;
|
|
333
|
+
blue2Dark: string | Variable<string>;
|
|
334
|
+
blue3Dark: string | Variable<string>;
|
|
335
|
+
blue4Dark: string | Variable<string>;
|
|
336
|
+
blue5Dark: string | Variable<string>;
|
|
337
|
+
blue6Dark: string | Variable<string>;
|
|
338
|
+
blue7Dark: string | Variable<string>;
|
|
339
|
+
blue8Dark: string | Variable<string>;
|
|
340
|
+
blue9Dark: string | Variable<string>;
|
|
341
|
+
blue10Dark: string | Variable<string>;
|
|
342
|
+
blue11Dark: string | Variable<string>;
|
|
343
|
+
blue12Dark: string | Variable<string>;
|
|
344
|
+
yellow1Light: string | Variable<string>;
|
|
345
|
+
yellow2Light: string | Variable<string>;
|
|
346
|
+
yellow3Light: string | Variable<string>;
|
|
347
|
+
yellow4Light: string | Variable<string>;
|
|
348
|
+
yellow5Light: string | Variable<string>;
|
|
349
|
+
yellow6Light: string | Variable<string>;
|
|
350
|
+
yellow7Light: string | Variable<string>;
|
|
351
|
+
yellow8Light: string | Variable<string>;
|
|
352
|
+
yellow9Light: string | Variable<string>;
|
|
353
|
+
yellow10Light: string | Variable<string>;
|
|
354
|
+
yellow11Light: string | Variable<string>;
|
|
355
|
+
yellow12Light: string | Variable<string>;
|
|
356
|
+
red1Light: string | Variable<string>;
|
|
357
|
+
red2Light: string | Variable<string>;
|
|
358
|
+
red3Light: string | Variable<string>;
|
|
359
|
+
red4Light: string | Variable<string>;
|
|
360
|
+
red5Light: string | Variable<string>;
|
|
361
|
+
red6Light: string | Variable<string>;
|
|
362
|
+
red7Light: string | Variable<string>;
|
|
363
|
+
red8Light: string | Variable<string>;
|
|
364
|
+
red9Light: string | Variable<string>;
|
|
365
|
+
red10Light: string | Variable<string>;
|
|
366
|
+
red11Light: string | Variable<string>;
|
|
367
|
+
red12Light: string | Variable<string>;
|
|
368
|
+
purple1Light: string | Variable<string>;
|
|
369
|
+
purple2Light: string | Variable<string>;
|
|
370
|
+
purple3Light: string | Variable<string>;
|
|
371
|
+
purple4Light: string | Variable<string>;
|
|
372
|
+
purple5Light: string | Variable<string>;
|
|
373
|
+
purple6Light: string | Variable<string>;
|
|
374
|
+
purple7Light: string | Variable<string>;
|
|
375
|
+
purple8Light: string | Variable<string>;
|
|
376
|
+
purple9Light: string | Variable<string>;
|
|
377
|
+
purple10Light: string | Variable<string>;
|
|
378
|
+
purple11Light: string | Variable<string>;
|
|
379
|
+
purple12Light: string | Variable<string>;
|
|
380
|
+
pink1Light: string | Variable<string>;
|
|
381
|
+
pink2Light: string | Variable<string>;
|
|
382
|
+
pink3Light: string | Variable<string>;
|
|
383
|
+
pink4Light: string | Variable<string>;
|
|
384
|
+
pink5Light: string | Variable<string>;
|
|
385
|
+
pink6Light: string | Variable<string>;
|
|
386
|
+
pink7Light: string | Variable<string>;
|
|
387
|
+
pink8Light: string | Variable<string>;
|
|
388
|
+
pink9Light: string | Variable<string>;
|
|
389
|
+
pink10Light: string | Variable<string>;
|
|
390
|
+
pink11Light: string | Variable<string>;
|
|
391
|
+
pink12Light: string | Variable<string>;
|
|
392
|
+
orange1Light: string | Variable<string>;
|
|
393
|
+
orange2Light: string | Variable<string>;
|
|
394
|
+
orange3Light: string | Variable<string>;
|
|
395
|
+
orange4Light: string | Variable<string>;
|
|
396
|
+
orange5Light: string | Variable<string>;
|
|
397
|
+
orange6Light: string | Variable<string>;
|
|
398
|
+
orange7Light: string | Variable<string>;
|
|
399
|
+
orange8Light: string | Variable<string>;
|
|
400
|
+
orange9Light: string | Variable<string>;
|
|
401
|
+
orange10Light: string | Variable<string>;
|
|
402
|
+
orange11Light: string | Variable<string>;
|
|
403
|
+
orange12Light: string | Variable<string>;
|
|
404
|
+
green1Light: string | Variable<string>;
|
|
405
|
+
green2Light: string | Variable<string>;
|
|
406
|
+
green3Light: string | Variable<string>;
|
|
407
|
+
green4Light: string | Variable<string>;
|
|
408
|
+
green5Light: string | Variable<string>;
|
|
409
|
+
green6Light: string | Variable<string>;
|
|
410
|
+
green7Light: string | Variable<string>;
|
|
411
|
+
green8Light: string | Variable<string>;
|
|
412
|
+
green9Light: string | Variable<string>;
|
|
413
|
+
green10Light: string | Variable<string>;
|
|
414
|
+
green11Light: string | Variable<string>;
|
|
415
|
+
green12Light: string | Variable<string>;
|
|
416
|
+
gray1Light: string | Variable<string>;
|
|
417
|
+
gray2Light: string | Variable<string>;
|
|
418
|
+
gray3Light: string | Variable<string>;
|
|
419
|
+
gray4Light: string | Variable<string>;
|
|
420
|
+
gray5Light: string | Variable<string>;
|
|
421
|
+
gray6Light: string | Variable<string>;
|
|
422
|
+
gray7Light: string | Variable<string>;
|
|
423
|
+
gray8Light: string | Variable<string>;
|
|
424
|
+
gray9Light: string | Variable<string>;
|
|
425
|
+
gray10Light: string | Variable<string>;
|
|
426
|
+
gray11Light: string | Variable<string>;
|
|
427
|
+
gray12Light: string | Variable<string>;
|
|
428
|
+
blue1Light: string | Variable<string>;
|
|
429
|
+
blue2Light: string | Variable<string>;
|
|
430
|
+
blue3Light: string | Variable<string>;
|
|
431
|
+
blue4Light: string | Variable<string>;
|
|
432
|
+
blue5Light: string | Variable<string>;
|
|
433
|
+
blue6Light: string | Variable<string>;
|
|
434
|
+
blue7Light: string | Variable<string>;
|
|
435
|
+
blue8Light: string | Variable<string>;
|
|
436
|
+
blue9Light: string | Variable<string>;
|
|
437
|
+
blue10Light: string | Variable<string>;
|
|
438
|
+
blue11Light: string | Variable<string>;
|
|
439
|
+
blue12Light: string | Variable<string>;
|
|
440
|
+
};
|
|
441
|
+
export declare const radius: {
|
|
442
|
+
0: number;
|
|
443
|
+
1: number;
|
|
444
|
+
2: number;
|
|
445
|
+
3: number;
|
|
446
|
+
4: number;
|
|
447
|
+
5: number;
|
|
448
|
+
6: number;
|
|
449
|
+
7: number;
|
|
450
|
+
8: number;
|
|
451
|
+
9: number;
|
|
452
|
+
10: number;
|
|
453
|
+
11: number;
|
|
454
|
+
12: number;
|
|
455
|
+
};
|
|
198
456
|
export declare const tokens: {
|
|
199
457
|
color: {
|
|
200
458
|
yellow1Dark: Variable<import("@tamagui/core").VariableValue>;
|
|
@@ -520,4 +778,5 @@ export declare const tokens: {
|
|
|
520
778
|
5: Variable<import("@tamagui/core").VariableValue>;
|
|
521
779
|
};
|
|
522
780
|
};
|
|
781
|
+
export {};
|
|
523
782
|
//# sourceMappingURL=tokens.d.ts.map
|