@tamagui/theme-base 1.0.0-beta.202 → 1.0.0-beta.203
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/colorUtils.js +5 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/themes.js +75 -55
- package/dist/cjs/themes.js.map +2 -2
- package/dist/cjs/tokens.js +41 -50
- package/dist/cjs/tokens.js.map +2 -2
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/themes.js +69 -59
- package/dist/esm/themes.js.map +2 -2
- package/dist/esm/tokens.js +38 -56
- package/dist/esm/tokens.js.map +2 -2
- package/dist/jsx/index.js +1 -1
- package/dist/jsx/themes.js +69 -59
- package/dist/jsx/tokens.js +38 -56
- package/package.json +5 -5
- package/types/index.d.ts +1 -1
- package/types/index.d.ts.map +1 -1
- package/types/themes.d.ts +4096 -151
- package/types/themes.d.ts.map +1 -1
- package/types/tokens.d.ts +3 -15
- package/types/tokens.d.ts.map +1 -1
- package/dist/cjs/colors.js +0 -64
- package/dist/cjs/colors.js.map +0 -7
- package/dist/cjs/firaFont.js +0 -54
- package/dist/cjs/firaFont.js.map +0 -7
- package/dist/cjs/fonts.js +0 -19
- package/dist/cjs/fonts.js.map +0 -7
- package/dist/cjs/interFont.js +0 -80
- package/dist/cjs/interFont.js.map +0 -7
- package/dist/cjs/silkscreenFont.js +0 -54
- package/dist/cjs/silkscreenFont.js.map +0 -7
- package/dist/esm/colors.js +0 -54
- package/dist/esm/colors.js.map +0 -7
- package/dist/esm/firaFont.js +0 -35
- package/dist/esm/firaFont.js.map +0 -7
- package/dist/esm/fonts.js +0 -3
- package/dist/esm/fonts.js.map +0 -7
- package/dist/esm/interFont.js +0 -61
- package/dist/esm/interFont.js.map +0 -7
- package/dist/esm/silkscreenFont.js +0 -35
- package/dist/esm/silkscreenFont.js.map +0 -7
- package/dist/jsx/colors.js +0 -53
- package/dist/jsx/firaFont.js +0 -34
- package/dist/jsx/fonts.js +0 -2
- package/dist/jsx/interFont.js +0 -60
- package/dist/jsx/silkscreenFont.js +0 -34
- package/types/colors.d.ts +0 -444
- package/types/colors.d.ts.map +0 -1
- package/types/firaFont.d.ts +0 -47
- package/types/firaFont.d.ts.map +0 -1
- package/types/fonts.d.ts +0 -3
- package/types/fonts.d.ts.map +0 -1
- package/types/interFont.d.ts +0 -57
- package/types/interFont.d.ts.map +0 -1
- package/types/silkscreenFont.d.ts +0 -48
- package/types/silkscreenFont.d.ts.map +0 -1
package/dist/cjs/colorUtils.js
CHANGED
|
@@ -57,4 +57,9 @@ const getAlphaFloat = /* @__PURE__ */ __name((a, alpha = 1) => {
|
|
|
57
57
|
}
|
|
58
58
|
return alpha;
|
|
59
59
|
}, "getAlphaFloat");
|
|
60
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
61
|
+
0 && (module.exports = {
|
|
62
|
+
hexToRGBA,
|
|
63
|
+
setColorAlpha
|
|
64
|
+
});
|
|
60
65
|
//# sourceMappingURL=colorUtils.js.map
|
package/dist/cjs/index.js
CHANGED
|
@@ -16,5 +16,5 @@ var src_exports = {};
|
|
|
16
16
|
module.exports = __toCommonJS(src_exports);
|
|
17
17
|
__reExport(src_exports, require("./themes"), module.exports);
|
|
18
18
|
__reExport(src_exports, require("./tokens"), module.exports);
|
|
19
|
-
__reExport(src_exports, require("
|
|
19
|
+
__reExport(src_exports, require("@tamagui/colors"), module.exports);
|
|
20
20
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["export * from './themes'\nexport * from './tokens'\nexport * from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,qBAAd;AACA,wBAAc,qBADd;AAEA,wBAAc,
|
|
4
|
+
"sourcesContent": ["export * from './themes'\nexport * from './tokens'\nexport * from '@tamagui/colors'\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,qBAAd;AACA,wBAAc,qBADd;AAEA,wBAAc,4BAFd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/themes.js
CHANGED
|
@@ -45,8 +45,8 @@ __export(themes_exports, {
|
|
|
45
45
|
});
|
|
46
46
|
module.exports = __toCommonJS(themes_exports);
|
|
47
47
|
var Colors = __toESM(require("@tamagui/colors"));
|
|
48
|
+
var import_colors = require("@tamagui/colors");
|
|
48
49
|
var import_core = require("@tamagui/core");
|
|
49
|
-
var import_colors = require("./colors");
|
|
50
50
|
var import_colorUtils = require("./colorUtils");
|
|
51
51
|
var import_tokens = require("./tokens");
|
|
52
52
|
const alternates = [1, 2, 3, 4];
|
|
@@ -79,7 +79,9 @@ __name(createThemesFrom, "createThemesFrom");
|
|
|
79
79
|
const createTheme = /* @__PURE__ */ __name((str = 1, {
|
|
80
80
|
backgrounds,
|
|
81
81
|
isLight = true,
|
|
82
|
+
isBase = false,
|
|
82
83
|
colors = [...backgrounds].reverse(),
|
|
84
|
+
borderColors = isLight ? colors : backgrounds,
|
|
83
85
|
offsets: offsetsProp
|
|
84
86
|
}) => {
|
|
85
87
|
const offsets = {
|
|
@@ -95,29 +97,45 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
|
|
|
95
97
|
return arr[Math.max(0, Math.min(index + (offsets[name][str] || 0), arr.length - 1))];
|
|
96
98
|
}, "get");
|
|
97
99
|
const colorTranslucent = (0, import_colorUtils.setColorAlpha)((0, import_core.getVariableValue)(get(colors, 0 + str, "color")), 0.5);
|
|
98
|
-
|
|
100
|
+
let theme = {
|
|
99
101
|
background: get(backgrounds, str),
|
|
100
102
|
backgroundStronger: get(backgrounds, str + strongerDir),
|
|
101
103
|
backgroundSoft: get(backgrounds, str + 3),
|
|
102
104
|
backgroundHover: get(backgrounds, str + lighterDir),
|
|
103
105
|
backgroundPress: get(backgrounds, str + darkerDir * 1),
|
|
104
106
|
backgroundFocus: get(backgrounds, str + darkerDir * 2),
|
|
105
|
-
backgroundTransparent: import_tokens.
|
|
106
|
-
borderColor: isLight ? get(colors, 8 - str, "borderColor") : get(backgrounds, 2 + str, "borderColor"),
|
|
107
|
-
borderColorHover: isLight ? get(colors, 6 - str, "borderColor") : get(backgrounds, 3 + str, "borderColor"),
|
|
108
|
-
borderColorPress: isLight ? get(colors, 5 - str, "borderColor") : get(backgrounds, 1 + str, "borderColor"),
|
|
109
|
-
borderColorFocus: isLight ? get(colors, 4 - str, "borderColor") : get(backgrounds, 3 + str, "borderColor"),
|
|
107
|
+
backgroundTransparent: import_tokens.color.grayA1,
|
|
110
108
|
color: get(colors, 0 + str, "color"),
|
|
111
109
|
colorHover: get(colors, 1 + str, "color"),
|
|
112
110
|
colorPress: get(colors, 2 + str, "color"),
|
|
113
111
|
colorFocus: get(colors, 3 + str, "color"),
|
|
114
112
|
colorTranslucent,
|
|
115
113
|
colorMid: colors[Math.floor(colors.length / 2)],
|
|
116
|
-
shadowColor: isLight ? import_tokens.
|
|
114
|
+
shadowColor: isLight ? import_tokens.color.grayA3 : import_tokens.color.grayA8,
|
|
117
115
|
shadowColorHover: darkColors[!isLight ? 1 : 8],
|
|
118
116
|
shadowColorPress: darkColors[!isLight ? 1 : 8],
|
|
119
|
-
shadowColorFocus: darkColors[!isLight ? 1 : 8]
|
|
117
|
+
shadowColorFocus: darkColors[!isLight ? 1 : 8],
|
|
118
|
+
borderColor: null,
|
|
119
|
+
borderColorHover: null,
|
|
120
|
+
borderColorPress: null,
|
|
121
|
+
borderColorFocus: null
|
|
120
122
|
};
|
|
123
|
+
if (isBase) {
|
|
124
|
+
Object.assign(theme, {
|
|
125
|
+
borderColor: isLight ? get(colors, 8 - str, "borderColor") : get(backgrounds, 2 + str, "borderColor"),
|
|
126
|
+
borderColorHover: isLight ? get(colors, 6 - str, "borderColor") : get(backgrounds, 3 + str, "borderColor"),
|
|
127
|
+
borderColorPress: isLight ? get(colors, 5 - str, "borderColor") : get(backgrounds, 1 + str, "borderColor"),
|
|
128
|
+
borderColorFocus: isLight ? get(colors, 4 - str, "borderColor") : get(backgrounds, 3 + str, "borderColor")
|
|
129
|
+
});
|
|
130
|
+
} else {
|
|
131
|
+
Object.assign(theme, {
|
|
132
|
+
borderColor: get(borderColors, 1 + strongerDir, "borderColor"),
|
|
133
|
+
borderColorHover: get(borderColors, 2 + strongerDir, "borderColor"),
|
|
134
|
+
borderColorPress: get(borderColors, 3 + strongerDir, "borderColor"),
|
|
135
|
+
borderColorFocus: get(borderColors, 4 + strongerDir, "borderColor")
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
return theme;
|
|
121
139
|
}, "createTheme");
|
|
122
140
|
const colorSchemes = [
|
|
123
141
|
{ name: "blue", colors: Colors.blue, darkColors: Colors.blueDark },
|
|
@@ -137,55 +155,59 @@ const colorSchemes = [
|
|
|
137
155
|
const lightGradient = [
|
|
138
156
|
"#fff",
|
|
139
157
|
"#f4f4f4",
|
|
140
|
-
import_tokens.
|
|
141
|
-
import_tokens.
|
|
142
|
-
import_tokens.
|
|
143
|
-
import_tokens.
|
|
144
|
-
import_tokens.
|
|
145
|
-
import_tokens.
|
|
146
|
-
import_tokens.
|
|
147
|
-
import_tokens.
|
|
148
|
-
import_tokens.
|
|
149
|
-
import_tokens.
|
|
150
|
-
import_tokens.
|
|
151
|
-
import_tokens.
|
|
158
|
+
import_tokens.color.gray1,
|
|
159
|
+
import_tokens.color.gray2,
|
|
160
|
+
import_tokens.color.gray3,
|
|
161
|
+
import_tokens.color.gray4,
|
|
162
|
+
import_tokens.color.gray5,
|
|
163
|
+
import_tokens.color.gray6,
|
|
164
|
+
import_tokens.color.gray7,
|
|
165
|
+
import_tokens.color.gray8,
|
|
166
|
+
import_tokens.color.gray9,
|
|
167
|
+
import_tokens.color.gray10,
|
|
168
|
+
import_tokens.color.gray11,
|
|
169
|
+
import_tokens.color.gray12
|
|
152
170
|
];
|
|
153
171
|
const darkGradient = [
|
|
154
|
-
"#0f0f0f",
|
|
155
172
|
"#111111",
|
|
156
|
-
"#
|
|
173
|
+
"#151515",
|
|
157
174
|
"#191919",
|
|
158
|
-
"#
|
|
159
|
-
"#
|
|
175
|
+
"#232323",
|
|
176
|
+
"#282828",
|
|
160
177
|
"#323232",
|
|
161
178
|
"#383838",
|
|
162
179
|
"#424242",
|
|
163
180
|
"#494949",
|
|
164
181
|
"#545454",
|
|
165
|
-
"#626262"
|
|
182
|
+
"#626262",
|
|
183
|
+
"#777777"
|
|
166
184
|
];
|
|
167
185
|
const lightThemes = createThemesFrom("light", createTheme, {
|
|
168
186
|
backgrounds: lightGradient,
|
|
187
|
+
borderColors: lightGradient.slice(2),
|
|
169
188
|
isLight: true
|
|
170
189
|
});
|
|
171
190
|
const darkThemes = createThemesFrom("dark", createTheme, {
|
|
172
191
|
backgrounds: darkGradient,
|
|
173
|
-
colors: lightGradient,
|
|
192
|
+
colors: lightGradient.slice(2),
|
|
193
|
+
isBase: true,
|
|
174
194
|
isLight: false,
|
|
175
195
|
shift: 1,
|
|
176
196
|
offsets: {
|
|
177
|
-
color: [0,
|
|
197
|
+
color: [0, 4, 5, 5, 5, 5]
|
|
178
198
|
}
|
|
179
199
|
});
|
|
180
200
|
const baseThemes = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, lightThemes), {
|
|
181
201
|
light: __spreadValues(__spreadValues({}, import_colors.allLightColors), lightThemes.light),
|
|
182
202
|
light_active: makeActiveTheme(lightThemes.light),
|
|
183
203
|
light_Card: lightThemes.light,
|
|
204
|
+
light_DrawerFrame: lightThemes.light_alt1,
|
|
184
205
|
light_Button: lightThemes.light_alt1
|
|
185
206
|
}), darkThemes), {
|
|
186
207
|
dark: __spreadValues(__spreadValues({}, import_colors.allDarkColors), darkThemes.dark),
|
|
187
208
|
dark_active: makeActiveTheme(darkThemes.dark),
|
|
188
209
|
dark_Card: darkThemes.dark_alt1,
|
|
210
|
+
dark_DrawerFrame: darkThemes.dark_alt2,
|
|
189
211
|
dark_Button: darkThemes.dark_alt1
|
|
190
212
|
});
|
|
191
213
|
function makeActiveTheme(theme) {
|
|
@@ -198,23 +220,31 @@ function makeActiveTheme(theme) {
|
|
|
198
220
|
}
|
|
199
221
|
__name(makeActiveTheme, "makeActiveTheme");
|
|
200
222
|
const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) => {
|
|
201
|
-
const [altLightThemes, altDarkThemes] = [
|
|
223
|
+
const [altLightThemes, altDarkThemes] = [
|
|
224
|
+
{ colors: darkColors, backgrounds: colors },
|
|
225
|
+
{ colors, backgrounds: darkColors }
|
|
226
|
+
].map((props, i) => {
|
|
202
227
|
const isLight = i === 0;
|
|
228
|
+
const [backgrounds, colors2] = [
|
|
229
|
+
Object.values(props.backgrounds),
|
|
230
|
+
Object.values(props.colors).slice(isLight ? 2 : 2)
|
|
231
|
+
];
|
|
203
232
|
const scheme = isLight ? "light" : "dark";
|
|
204
233
|
const shift = isLight ? 0 : 1;
|
|
205
|
-
let backgrounds = Object.values(colors2);
|
|
206
234
|
if (!isLight) {
|
|
207
235
|
const [_, h, sp, lp] = backgrounds[0].match(/hsl\(([0-9\.]+), ([0-9\.]+)\%, ([0-9\.]+)\%\)/);
|
|
208
236
|
backgrounds.unshift(`hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`);
|
|
209
237
|
}
|
|
210
238
|
const themeWithAlts = createThemesFrom(name, createTheme, {
|
|
239
|
+
colors: colors2,
|
|
211
240
|
backgrounds,
|
|
241
|
+
borderColors: backgrounds,
|
|
212
242
|
isLight,
|
|
213
243
|
shift,
|
|
214
244
|
isBase: false,
|
|
215
245
|
offsets: {
|
|
216
|
-
background: isLight ? [
|
|
217
|
-
borderColor: isLight ? [
|
|
246
|
+
background: isLight ? [0, 0, 0, 0, 0, 0] : null,
|
|
247
|
+
borderColor: isLight ? [3, 3, 3, 3, 2] : null,
|
|
218
248
|
color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1]
|
|
219
249
|
}
|
|
220
250
|
});
|
|
@@ -225,32 +255,22 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) =>
|
|
|
225
255
|
return [
|
|
226
256
|
...altLightThemes,
|
|
227
257
|
[`${lightButtonTheme[0]}_Button`, altLightThemes[2][1]],
|
|
258
|
+
[`${lightButtonTheme[0]}_Card`, altLightThemes[2][1]],
|
|
259
|
+
[`${lightButtonTheme[0]}_DrawerFrame`, altLightThemes[2][1]],
|
|
228
260
|
...altDarkThemes,
|
|
229
|
-
[`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]]
|
|
261
|
+
[`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]],
|
|
262
|
+
[`${darkButtonTheme[0]}_Card`, altDarkThemes[2][1]],
|
|
263
|
+
[`${darkButtonTheme[0]}_DrawerFrame`, altDarkThemes[2][1]]
|
|
230
264
|
];
|
|
231
265
|
});
|
|
232
|
-
const transparent = {
|
|
233
|
-
background: "transparent",
|
|
234
|
-
backgroundSoft: "transparent",
|
|
235
|
-
backgroundHover: "transparent",
|
|
236
|
-
backgroundPress: "transparent",
|
|
237
|
-
backgroundFocus: "transparent",
|
|
238
|
-
backgroundTransparent: "transparent",
|
|
239
|
-
shadowColor: "transparent",
|
|
240
|
-
shadowColorHover: "transparent",
|
|
241
|
-
shadowColorPress: "transparent",
|
|
242
|
-
shadowColorFocus: "transparent"
|
|
243
|
-
};
|
|
244
|
-
const dark_outline = __spreadValues(__spreadProps(__spreadValues({}, baseThemes.dark), {
|
|
245
|
-
borderColor: "#fff"
|
|
246
|
-
}), transparent);
|
|
247
|
-
const light_outline = __spreadValues(__spreadProps(__spreadValues({}, baseThemes.light), {
|
|
248
|
-
borderColor: "#000"
|
|
249
|
-
}), transparent);
|
|
250
266
|
const colorThemes = Object.fromEntries(colorThemeEntries);
|
|
251
|
-
const allThemes =
|
|
252
|
-
dark_outline,
|
|
253
|
-
light_outline
|
|
254
|
-
});
|
|
267
|
+
const allThemes = __spreadValues(__spreadValues({}, baseThemes), colorThemes);
|
|
255
268
|
const themes = allThemes;
|
|
269
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
270
|
+
0 && (module.exports = {
|
|
271
|
+
colorSchemes,
|
|
272
|
+
darkGradient,
|
|
273
|
+
lightGradient,
|
|
274
|
+
themes
|
|
275
|
+
});
|
|
256
276
|
//# sourceMappingURL=themes.js.map
|
package/dist/cjs/themes.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/themes.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as Colors from '@tamagui/colors'\nimport { Variable, getVariableValue } from '@tamagui/core'\n\nimport { allDarkColors, allLightColors } from './colors'\nimport { setColorAlpha } from './colorUtils'\nimport { tokens } from './tokens'\n\ntype ThemeCreatorProps = {\n shift?: number\n backgrounds: (string | Variable)[]\n colors?: (string | Variable)[]\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\ntype AltKeys = 1 | 2 | 3 | 4 // one less for dark_darker\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 const altThemes: 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] = [altThemes[i][0], (altThemes[i + 1] || altThemes[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 = makeActiveTheme(theme)\n themeEntries = [\n ...themeEntries,\n ...altThemes,\n ...altButtonThemes,\n [`${name}_Button`, altThemes[0][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 createTheme: ThemeCreator = (\n str = 1,\n {\n backgrounds,\n isLight = true,\n // isBase = false,\n colors = [...backgrounds].reverse(),\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 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 return {\n background: get(backgrounds, str),\n backgroundStronger: get(backgrounds, str + strongerDir),\n backgroundSoft: get(backgrounds, str + 3),\n backgroundHover: get(backgrounds, str + lighterDir),\n backgroundPress: get(backgrounds, str + darkerDir * 1),\n backgroundFocus: get(backgrounds, str + darkerDir * 2),\n backgroundTransparent: tokens.color.grayA1,\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 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: colors[Math.floor(colors.length / 2)],\n shadowColor: isLight ? tokens.color.grayA3 : tokens.color.grayA8,\n shadowColorHover: darkColors[!isLight ? 1 : 8],\n shadowColorPress: darkColors[!isLight ? 1 : 8],\n shadowColorFocus: darkColors[!isLight ? 1 : 8],\n }\n}\n\nexport const colorSchemes = [\n { name: 'blue', colors: Colors.blue, darkColors: Colors.blueDark },\n { name: 'gray', colors: Colors.gray, darkColors: Colors.grayDark },\n { name: 'green', colors: Colors.green, darkColors: Colors.greenDark },\n { name: 'indigo', colors: Colors.indigo, darkColors: Colors.indigoDark },\n { name: 'orange', colors: Colors.orange, darkColors: Colors.orangeDark },\n { name: 'pink', colors: Colors.pink, darkColors: Colors.pinkDark },\n { name: 'purple', colors: Colors.purple, darkColors: Colors.purpleDark },\n { name: 'red', colors: Colors.red, darkColors: Colors.redDark },\n { name: 'violet', colors: Colors.violet, darkColors: Colors.violetDark },\n { name: 'yellow', colors: Colors.yellow, darkColors: Colors.yellowDark },\n { name: 'teal', colors: Colors.teal, darkColors: Colors.tealDark },\n { name: 'lime', colors: Colors.lime, darkColors: Colors.limeDark },\n { name: 'brown', colors: Colors.brown, darkColors: Colors.brownDark },\n] as const\n\nexport type ColorNames = typeof colorSchemes[number]['name']\n\nexport const lightGradient = [\n '#fff',\n '#f4f4f4',\n tokens.color.gray1,\n tokens.color.gray2,\n tokens.color.gray3,\n tokens.color.gray4,\n tokens.color.gray5,\n tokens.color.gray6,\n tokens.color.gray7,\n tokens.color.gray8,\n tokens.color.gray9,\n tokens.color.gray10,\n tokens.color.gray11,\n tokens.color.gray12,\n]\n\nexport const darkGradient = [\n '#0f0f0f',\n '#111111',\n '#141414',\n '#191919',\n '#242424',\n '#292929',\n '#323232',\n '#383838',\n '#424242',\n '#494949',\n '#545454',\n '#626262',\n]\n\nconst lightThemes = createThemesFrom('light', createTheme, {\n backgrounds: lightGradient,\n isLight: true,\n})\n\nconst darkThemes = createThemesFrom('dark', createTheme, {\n backgrounds: darkGradient,\n colors: lightGradient,\n isLight: false,\n shift: 1,\n offsets: {\n color: [0, 6, 7, 7, 7, 7],\n },\n})\n\nconst baseThemes = {\n // light\n ...lightThemes,\n light: {\n ...allLightColors,\n ...lightThemes.light,\n },\n light_active: makeActiveTheme(lightThemes.light),\n light_Card: lightThemes.light,\n light_Button: lightThemes.light_alt1,\n\n // dark\n ...darkThemes,\n dark: {\n ...allDarkColors,\n ...darkThemes.dark,\n },\n dark_active: makeActiveTheme(darkThemes.dark),\n dark_Card: darkThemes.dark_alt1,\n dark_Button: darkThemes.dark_alt1,\n}\n\nfunction makeActiveTheme(theme: any) {\n const res = { ...theme }\n res.backgroundHover = res.background\n res.colorHover = res.color\n res.backgroundPress = res.background\n res.colorPress = res.color\n return res\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] = [colors, darkColors].map((colors, i) => {\n const isLight = i === 0\n const scheme = isLight ? 'light' : 'dark'\n const shift = isLight ? 0 : 1\n\n let backgrounds = Object.values(colors) as any[]\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, createTheme, {\n backgrounds,\n isLight,\n shift,\n isBase: false,\n offsets: {\n background: isLight ? [1, 1, 1, 0, 0, 0] : null,\n borderColor: isLight ? [0, 1, 1, 2, 2, -2] : null,\n color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1],\n },\n })\n return Object.entries(themeWithAlts).map(([k, v]) => [`${scheme}_${k}`, v])\n })\n const lightButtonTheme = altLightThemes[0]\n const darkButtonTheme = altDarkThemes[0]\n return [\n ...altLightThemes,\n [`${lightButtonTheme[0]}_Button`, altLightThemes[2][1]],\n ...altDarkThemes,\n [`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]],\n ]\n})\n\nconst transparent = {\n background: 'transparent',\n backgroundSoft: 'transparent',\n backgroundHover: 'transparent',\n backgroundPress: 'transparent',\n backgroundFocus: 'transparent',\n backgroundTransparent: 'transparent',\n shadowColor: 'transparent',\n shadowColorHover: 'transparent',\n shadowColorPress: 'transparent',\n shadowColorFocus: 'transparent',\n}\n\ntype MyThemeBase = typeof baseThemes['light_alt1']\n\n// @ts-ignore\nconst dark_outline: MyThemeBase = {\n ...baseThemes.dark,\n borderColor: '#fff',\n ...transparent,\n}\n\n// @ts-ignore\nconst light_outline: MyThemeBase = {\n ...baseThemes.light,\n borderColor: '#000',\n ...transparent,\n}\n\nconst colorThemes: {\n [key in ColorThemeNames]: MyThemeBase\n} = Object.fromEntries(colorThemeEntries) as any\n\nconst allThemes = {\n ...baseThemes,\n ...colorThemes,\n dark_outline,\n light_outline,\n} as const\n\nexport const themes: {\n [key in keyof typeof allThemes]: typeof baseThemes['light']\n} = allThemes as any\n\n// TODO\n// export function createThemes(props: {\n// colors?:\n// | 'amber'\n// | 'blue'\n// | 'bronze'\n// | 'brown'\n// | 'crimson'\n// | 'cyan'\n// | 'gold'\n// | 'grass'\n// | 'gray'\n// | 'green'\n// | 'indigo'\n// | 'lime'\n// | 'mint'\n// | 'olive'\n// | 'orange'\n// | 'pink'\n// | 'plum'\n// | 'purple'\n// | 'mauve'\n// | 'red'\n// | 'sage'\n// | 'sand'\n// | 'sky'\n// | 'slate'\n// | 'teal'\n// | 'tomato'\n// | 'violet'\n// | 'yellow'\n// alternates?: number\n// }) {}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAAwB;AACxB,kBAA2C;AAE3C,
|
|
4
|
+
"sourcesContent": ["import * as Colors from '@tamagui/colors'\nimport { allDarkColors, allLightColors } from '@tamagui/colors'\nimport { Variable, getVariableValue } from '@tamagui/core'\n\nimport { setColorAlpha } from './colorUtils'\nimport { color } from './tokens'\n\n// spaghetti ahead\n\ntype ThemeCreatorProps = {\n shift?: number\n backgrounds: (string | Variable)[]\n borderColors?: (string | Variable)[]\n colors?: (string | Variable)[]\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\ntype AltKeys = 1 | 2 | 3 | 4 // one less for dark_darker\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 const altThemes: 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] = [altThemes[i][0], (altThemes[i + 1] || altThemes[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 = makeActiveTheme(theme)\n themeEntries = [\n ...themeEntries,\n ...altThemes,\n ...altButtonThemes,\n [`${name}_Button`, altThemes[0][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 createTheme = (\n str = 1,\n {\n backgrounds,\n isLight = true,\n isBase = false,\n colors = [...backgrounds].reverse(),\n borderColors = isLight ? colors : backgrounds,\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 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 let theme = {\n background: get(backgrounds, str),\n backgroundStronger: get(backgrounds, str + strongerDir),\n backgroundSoft: get(backgrounds, str + 3),\n backgroundHover: get(backgrounds, str + lighterDir),\n backgroundPress: get(backgrounds, str + darkerDir * 1),\n backgroundFocus: get(backgrounds, str + darkerDir * 2),\n backgroundTransparent: color.grayA1,\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: colors[Math.floor(colors.length / 2)],\n shadowColor: isLight ? color.grayA3 : color.grayA8,\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 (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\nexport const colorSchemes = [\n { name: 'blue', colors: Colors.blue, darkColors: Colors.blueDark },\n { name: 'gray', colors: Colors.gray, darkColors: Colors.grayDark },\n { name: 'green', colors: Colors.green, darkColors: Colors.greenDark },\n { name: 'indigo', colors: Colors.indigo, darkColors: Colors.indigoDark },\n { name: 'orange', colors: Colors.orange, darkColors: Colors.orangeDark },\n { name: 'pink', colors: Colors.pink, darkColors: Colors.pinkDark },\n { name: 'purple', colors: Colors.purple, darkColors: Colors.purpleDark },\n { name: 'red', colors: Colors.red, darkColors: Colors.redDark },\n { name: 'violet', colors: Colors.violet, darkColors: Colors.violetDark },\n { name: 'yellow', colors: Colors.yellow, darkColors: Colors.yellowDark },\n { name: 'teal', colors: Colors.teal, darkColors: Colors.tealDark },\n { name: 'lime', colors: Colors.lime, darkColors: Colors.limeDark },\n { name: 'brown', colors: Colors.brown, darkColors: Colors.brownDark },\n] as const\n\nexport type ColorNames = typeof colorSchemes[number]['name']\n\nexport const lightGradient = [\n '#fff',\n '#f4f4f4',\n color.gray1,\n color.gray2,\n color.gray3,\n color.gray4,\n color.gray5,\n color.gray6,\n color.gray7,\n color.gray8,\n color.gray9,\n color.gray10,\n color.gray11,\n color.gray12,\n]\n\nexport const darkGradient = [\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\nconst lightThemes = createThemesFrom('light', createTheme, {\n backgrounds: lightGradient,\n // isBase: true,\n borderColors: lightGradient.slice(2),\n isLight: true,\n})\n\nconst darkThemes = createThemesFrom('dark', createTheme, {\n backgrounds: darkGradient,\n colors: lightGradient.slice(2),\n isBase: true,\n isLight: false,\n shift: 1,\n offsets: {\n color: [0, 4, 5, 5, 5, 5],\n },\n})\n\nconst baseThemes = {\n // light\n ...lightThemes,\n light: {\n ...allLightColors,\n ...lightThemes.light,\n },\n light_active: makeActiveTheme(lightThemes.light),\n light_Card: lightThemes.light,\n light_DrawerFrame: lightThemes.light_alt1,\n light_Button: lightThemes.light_alt1,\n\n // dark\n ...darkThemes,\n dark: {\n ...allDarkColors,\n ...darkThemes.dark,\n },\n dark_active: makeActiveTheme(darkThemes.dark),\n dark_Card: darkThemes.dark_alt1,\n dark_DrawerFrame: darkThemes.dark_alt2,\n dark_Button: darkThemes.dark_alt1,\n}\n\nfunction makeActiveTheme(theme: any) {\n const res = { ...theme }\n res.backgroundHover = res.background\n res.colorHover = res.color\n res.backgroundPress = res.background\n res.colorPress = res.color\n return res\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 [backgrounds, colors] = [\n Object.values(props.backgrounds),\n Object.values(props.colors).slice(isLight ? 2 : 2),\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, createTheme, {\n colors,\n backgrounds,\n borderColors: backgrounds,\n isLight,\n shift,\n isBase: false,\n offsets: {\n background: isLight ? [0, 0, 0, 0, 0, 0] : null,\n borderColor: isLight ? [3, 3, 3, 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 const lightButtonTheme = altLightThemes[0]\n const darkButtonTheme = altDarkThemes[0]\n return [\n ...altLightThemes,\n [`${lightButtonTheme[0]}_Button`, altLightThemes[2][1]],\n [`${lightButtonTheme[0]}_Card`, altLightThemes[2][1]],\n [`${lightButtonTheme[0]}_DrawerFrame`, altLightThemes[2][1]],\n ...altDarkThemes,\n [`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]],\n [`${darkButtonTheme[0]}_Card`, altDarkThemes[2][1]],\n [`${darkButtonTheme[0]}_DrawerFrame`, altDarkThemes[2][1]],\n ]\n})\n\ntype MyThemeBase = typeof baseThemes['light_alt1']\n\nconst colorThemes: {\n [key in ColorThemeNames]: MyThemeBase\n} = Object.fromEntries(colorThemeEntries) as any\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\n// TODO\n// export function createThemes(props: {\n// colors?:\n// | 'amber'\n// | 'blue'\n// | 'bronze'\n// | 'brown'\n// | 'crimson'\n// | 'cyan'\n// | 'gold'\n// | 'grass'\n// | 'gray'\n// | 'green'\n// | 'indigo'\n// | 'lime'\n// | 'mint'\n// | 'olive'\n// | 'orange'\n// | 'pink'\n// | 'plum'\n// | 'purple'\n// | 'mauve'\n// | 'red'\n// | 'sage'\n// | 'sand'\n// | 'sky'\n// | 'slate'\n// | 'teal'\n// | 'tomato'\n// | 'violet'\n// | 'yellow'\n// alternates?: number\n// }) {}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/tokens.js
CHANGED
|
@@ -16,6 +16,7 @@ var __spreadValues = (a, b) => {
|
|
|
16
16
|
}
|
|
17
17
|
return a;
|
|
18
18
|
};
|
|
19
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
19
20
|
var __export = (target, all) => {
|
|
20
21
|
for (var name in all)
|
|
21
22
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -31,61 +32,51 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
31
32
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
32
33
|
var tokens_exports = {};
|
|
33
34
|
__export(tokens_exports, {
|
|
34
|
-
|
|
35
|
+
color: () => color,
|
|
36
|
+
getSizeAt: () => getSizeAt,
|
|
37
|
+
radius: () => radius,
|
|
38
|
+
size: () => size,
|
|
39
|
+
sizeKeys: () => sizeKeys,
|
|
40
|
+
space: () => space,
|
|
41
|
+
zIndex: () => zIndex
|
|
35
42
|
});
|
|
36
43
|
module.exports = __toCommonJS(tokens_exports);
|
|
37
|
-
var
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
+
var import_colors = require("@tamagui/colors");
|
|
45
|
+
const sizeKeys = ["true", "0", "0.25", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5", "5.5", "6", "6.5", "7", "7.5", "8", "9", "10", "11", "12", "13", "14"];
|
|
46
|
+
const getSizeAt = /* @__PURE__ */ __name((index) => index === 0 ? 0 : Math.round(Math.pow(1.6, index)) + Math.floor(3 * index), "getSizeAt");
|
|
47
|
+
const size = Object.fromEntries(sizeKeys.map((key) => {
|
|
48
|
+
return [key, getSizeAt(key === "true" ? 4 : +key)];
|
|
49
|
+
}));
|
|
50
|
+
const space = __spreadValues(__spreadValues({}, size), Object.fromEntries(Object.entries(size).map(([k, v]) => [`-${k}`, -v])));
|
|
51
|
+
const zIndex = {
|
|
44
52
|
0: 0,
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
5: 25,
|
|
51
|
-
6: 30,
|
|
52
|
-
7: 40,
|
|
53
|
-
8: 50,
|
|
54
|
-
9: 65,
|
|
55
|
-
10: 75,
|
|
56
|
-
11: 85,
|
|
57
|
-
12: 100
|
|
53
|
+
1: 100,
|
|
54
|
+
2: 200,
|
|
55
|
+
3: 300,
|
|
56
|
+
4: 400,
|
|
57
|
+
5: 500
|
|
58
58
|
};
|
|
59
|
-
const
|
|
60
|
-
const
|
|
59
|
+
const color = __spreadValues(__spreadValues({}, import_colors.allLightColors), import_colors.darkColorsPostfixed);
|
|
60
|
+
const radius = {
|
|
61
|
+
0: 0,
|
|
62
|
+
1: 3,
|
|
63
|
+
2: 5,
|
|
64
|
+
3: 7,
|
|
65
|
+
4: 9,
|
|
66
|
+
5: 10,
|
|
67
|
+
6: 12,
|
|
68
|
+
7: 16,
|
|
69
|
+
8: 20,
|
|
70
|
+
9: 30
|
|
71
|
+
};
|
|
72
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
73
|
+
0 && (module.exports = {
|
|
74
|
+
color,
|
|
75
|
+
getSizeAt,
|
|
76
|
+
radius,
|
|
61
77
|
size,
|
|
78
|
+
sizeKeys,
|
|
62
79
|
space,
|
|
63
|
-
|
|
64
|
-
title: import_interFont.interFont,
|
|
65
|
-
body: import_interFont.interFont,
|
|
66
|
-
mono: import_firaFont.firaFont,
|
|
67
|
-
silkscreen: import_silkscreenFont.silkscreenFont
|
|
68
|
-
},
|
|
69
|
-
zIndex: {
|
|
70
|
-
0: 0,
|
|
71
|
-
1: 100,
|
|
72
|
-
2: 200,
|
|
73
|
-
3: 300,
|
|
74
|
-
4: 400,
|
|
75
|
-
5: 500
|
|
76
|
-
},
|
|
77
|
-
color: __spreadValues(__spreadValues({}, import_colors.allLightColors), import_colors.darkColorsPostfixed),
|
|
78
|
-
radius: {
|
|
79
|
-
0: 0,
|
|
80
|
-
1: 3,
|
|
81
|
-
2: 5,
|
|
82
|
-
3: 7,
|
|
83
|
-
4: 9,
|
|
84
|
-
5: 10,
|
|
85
|
-
6: 12,
|
|
86
|
-
7: 16,
|
|
87
|
-
8: 20,
|
|
88
|
-
9: 30
|
|
89
|
-
}
|
|
80
|
+
zIndex
|
|
90
81
|
});
|
|
91
82
|
//# 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 {
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { allLightColors, darkColorsPostfixed } from '@tamagui/colors'\n\n// acknowledge you need more granularity at the smaller sizes with .5s\n// prettier-ignore\nexport const sizeKeys = ['true', '0', '0.25', '0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4', '4.5', '5', '5.5', '6', '6.5', '7', '7.5', '8', '9', '10', '11', '12', '13', '14'] as const\n\n// slightly more than double every 2 indices apart\nexport const getSizeAt = (index: number) =>\n index === 0 ? 0 : Math.round(Math.pow(1.6, index)) + Math.floor(3 * index)\n\nexport const size: {\n [key in typeof sizeKeys[any]]: number\n} = Object.fromEntries(\n sizeKeys.map((key) => {\n return [key, getSizeAt(key === 'true' ? 4 : +key)]\n })\n) as any\n\ntype Sizes = typeof size\ntype SizeKeys = keyof Sizes\n\nexport const space: {\n [Key in `-${SizeKeys}` | SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number\n} = {\n ...size,\n ...Object.fromEntries(Object.entries(size).map(([k, v]) => [`-${k}`, -v])),\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 color = {\n ...allLightColors,\n ...darkColorsPostfixed,\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: 12,\n 7: 16,\n 8: 20,\n 9: 30,\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAoD;AAI7C,MAAM,WAAW,CAAC,QAAQ,KAAK,QAAQ,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,KAAK,MAAM,MAAM,MAAM,MAAM,IAAI;AAGxK,MAAM,YAAY,wBAAC,UACxB,UAAU,IAAI,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,GADlD;AAGlB,MAAM,OAET,OAAO,YACT,SAAS,IAAI,CAAC,QAAQ;AACpB,SAAO,CAAC,KAAK,UAAU,QAAQ,SAAS,IAAI,CAAC,GAAG,CAAC;AACnD,CAAC,CACH;AAKO,MAAM,QAET,kCACC,OACA,OAAO,YAAY,OAAO,QAAQ,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;AAGpE,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,QAAQ,kCAChB,+BACA;AAGE,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["export * from './themes'\nexport * from './tokens'\nexport * from '
|
|
4
|
+
"sourcesContent": ["export * from './themes'\nexport * from './tokens'\nexport * from '@tamagui/colors'\n"],
|
|
5
5
|
"mappings": "AAAA;AACA;AACA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|