@tamagui/theme-base 1.0.1-beta.55 → 1.0.1-beta.59
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/themes.js +55 -58
- package/dist/cjs/themes.js.map +2 -2
- package/dist/cjs/tokens.js +6 -8
- package/dist/cjs/tokens.js.map +2 -2
- package/dist/esm/themes.js +63 -66
- package/dist/esm/themes.js.map +2 -2
- package/dist/esm/tokens.js +8 -9
- package/dist/esm/tokens.js.map +2 -2
- package/dist/jsx/themes.js +63 -66
- package/dist/jsx/tokens.js +8 -9
- package/package.json +4 -4
- package/types/themes.d.ts +785 -1052
- package/types/themes.d.ts.map +1 -1
- package/types/tokens.d.ts +516 -830
- package/types/tokens.d.ts.map +1 -1
package/dist/cjs/themes.js
CHANGED
|
@@ -52,7 +52,7 @@ function createThemesFrom(name, getTheme, props) {
|
|
|
52
52
|
let themeEntries = [[name, theme]];
|
|
53
53
|
const altThemes = alternates.map((alt) => [
|
|
54
54
|
`${name}_alt${alt}`,
|
|
55
|
-
getTheme(alt + (props.isLight ?
|
|
55
|
+
getTheme(alt + (props.isLight ? 0 : 0) + shift, props)
|
|
56
56
|
]);
|
|
57
57
|
const altThemes2 = alternates.map((alt) => [
|
|
58
58
|
`${name}_alt${alt}`,
|
|
@@ -98,7 +98,7 @@ function createThemesFrom(name, getTheme, props) {
|
|
|
98
98
|
return themes2;
|
|
99
99
|
}
|
|
100
100
|
__name(createThemesFrom, "createThemesFrom");
|
|
101
|
-
const
|
|
101
|
+
const themeCreator = /* @__PURE__ */ __name((str = 1, {
|
|
102
102
|
backgrounds,
|
|
103
103
|
isLight = true,
|
|
104
104
|
isBase = false,
|
|
@@ -128,14 +128,14 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
|
|
|
128
128
|
backgroundHover: get(backgrounds, str + lighterDir),
|
|
129
129
|
backgroundPress: get(backgrounds, str + darkerDir),
|
|
130
130
|
backgroundFocus: get(backgrounds, str + darkerDir * 2),
|
|
131
|
-
backgroundTransparent: color.
|
|
131
|
+
backgroundTransparent: color.grayA1Light,
|
|
132
132
|
color: get(colors, 0 + str, "color"),
|
|
133
133
|
colorHover: get(colors, 1 + str, "color"),
|
|
134
134
|
colorPress: get(colors, 2 + str, "color"),
|
|
135
135
|
colorFocus: get(colors, 3 + str, "color"),
|
|
136
136
|
colorTranslucent,
|
|
137
137
|
colorMid: (isLight ? colors : backgrounds)[Math.floor(colors.length / 2)],
|
|
138
|
-
shadowColor: isLight ? color.
|
|
138
|
+
shadowColor: isLight ? color.grayA2Light : color.grayA8Light,
|
|
139
139
|
shadowColorHover: darkColors2[!isLight ? 1 : 8],
|
|
140
140
|
shadowColorPress: darkColors2[!isLight ? 1 : 8],
|
|
141
141
|
shadowColorFocus: darkColors2[!isLight ? 1 : 8],
|
|
@@ -160,35 +160,23 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
|
|
|
160
160
|
});
|
|
161
161
|
}
|
|
162
162
|
return theme;
|
|
163
|
-
}, "
|
|
164
|
-
const colorSchemes = [
|
|
165
|
-
{ name: "blue", colors: import_tokens.colorTokens.light.blue, darkColors: import_tokens.colorTokens.dark.blue },
|
|
166
|
-
{ name: "gray", colors: import_tokens.colorTokens.light.gray, darkColors: import_tokens.colorTokens.dark.gray },
|
|
167
|
-
{ name: "green", colors: import_tokens.colorTokens.light.green, darkColors: import_tokens.colorTokens.dark.green },
|
|
168
|
-
{ name: "orange", colors: import_tokens.colorTokens.light.orange, darkColors: import_tokens.colorTokens.dark.orange },
|
|
169
|
-
{ name: "pink", colors: import_tokens.colorTokens.light.pink, darkColors: import_tokens.colorTokens.dark.pink },
|
|
170
|
-
{ name: "purple", colors: import_tokens.colorTokens.light.purple, darkColors: import_tokens.colorTokens.dark.purple },
|
|
171
|
-
{ name: "red", colors: import_tokens.colorTokens.light.red, darkColors: import_tokens.colorTokens.dark.red },
|
|
172
|
-
{ name: "violet", colors: import_tokens.colorTokens.light.violet, darkColors: import_tokens.colorTokens.dark.violet },
|
|
173
|
-
{ name: "yellow", colors: import_tokens.colorTokens.light.yellow, darkColors: import_tokens.colorTokens.dark.yellow },
|
|
174
|
-
{ name: "teal", colors: import_tokens.colorTokens.light.teal, darkColors: import_tokens.colorTokens.dark.teal }
|
|
175
|
-
];
|
|
163
|
+
}, "themeCreator");
|
|
176
164
|
const themeColors = {
|
|
177
165
|
light: [
|
|
178
166
|
"#fff",
|
|
179
167
|
"#f4f4f4",
|
|
180
|
-
color.
|
|
181
|
-
color.
|
|
182
|
-
color.
|
|
183
|
-
color.
|
|
184
|
-
color.
|
|
185
|
-
color.
|
|
186
|
-
color.
|
|
187
|
-
color.
|
|
188
|
-
color.
|
|
189
|
-
color.
|
|
190
|
-
color.
|
|
191
|
-
color.
|
|
168
|
+
color.gray1Light,
|
|
169
|
+
color.gray2Light,
|
|
170
|
+
color.gray3Light,
|
|
171
|
+
color.gray4Light,
|
|
172
|
+
color.gray5Light,
|
|
173
|
+
color.gray6Light,
|
|
174
|
+
color.gray7Light,
|
|
175
|
+
color.gray8Light,
|
|
176
|
+
color.gray9Light,
|
|
177
|
+
color.gray10Light,
|
|
178
|
+
color.gray11Light,
|
|
179
|
+
color.gray12Light
|
|
192
180
|
],
|
|
193
181
|
dark: [
|
|
194
182
|
"#111111",
|
|
@@ -205,13 +193,13 @@ const themeColors = {
|
|
|
205
193
|
"#777777"
|
|
206
194
|
]
|
|
207
195
|
};
|
|
208
|
-
const lightThemes = createThemesFrom("light",
|
|
196
|
+
const lightThemes = createThemesFrom("light", themeCreator, {
|
|
209
197
|
backgrounds: themeColors.light,
|
|
210
198
|
backgroundStrong: "#fafafa",
|
|
211
199
|
borderColors: themeColors.light.slice(2),
|
|
212
200
|
isLight: true
|
|
213
201
|
});
|
|
214
|
-
const darkThemes = createThemesFrom("dark",
|
|
202
|
+
const darkThemes = createThemesFrom("dark", themeCreator, {
|
|
215
203
|
backgrounds: themeColors.dark,
|
|
216
204
|
colors: themeColors.light.slice(2),
|
|
217
205
|
backgroundStrong: "#111",
|
|
@@ -222,21 +210,10 @@ const darkThemes = createThemesFrom("dark", createTheme, {
|
|
|
222
210
|
color: [0, 4, 5, 5, 5, 5]
|
|
223
211
|
}
|
|
224
212
|
});
|
|
225
|
-
const
|
|
226
|
-
|
|
227
|
-
"gray",
|
|
228
|
-
"green",
|
|
229
|
-
"indigo",
|
|
230
|
-
"orange",
|
|
231
|
-
"pink",
|
|
232
|
-
"purple",
|
|
233
|
-
"red",
|
|
234
|
-
"violet",
|
|
235
|
-
"yellow",
|
|
236
|
-
"teal"
|
|
237
|
-
];
|
|
213
|
+
const light = (0, import_core.createTheme)(__spreadValues(__spreadValues({}, import_tokens.lightColors), lightThemes.light));
|
|
214
|
+
const dark = (0, import_core.createTheme)(__spreadValues(__spreadValues({}, import_tokens.darkColors), darkThemes.dark));
|
|
238
215
|
const baseThemes = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, lightThemes), {
|
|
239
|
-
light
|
|
216
|
+
light,
|
|
240
217
|
light_active: makeActiveTheme(lightThemes.light),
|
|
241
218
|
light_Card: lightThemes.light,
|
|
242
219
|
light_Button: lightThemes.light,
|
|
@@ -246,7 +223,7 @@ const baseThemes = __spreadProps(__spreadValues(__spreadProps(__spreadValues({},
|
|
|
246
223
|
light_SwitchThumb: lightThemes.light_alt1,
|
|
247
224
|
light_DrawerFrame: lightThemes.light_alt1
|
|
248
225
|
}), darkThemes), {
|
|
249
|
-
dark
|
|
226
|
+
dark,
|
|
250
227
|
dark_active: makeActiveTheme(darkThemes.dark),
|
|
251
228
|
dark_Card: darkThemes.dark,
|
|
252
229
|
dark_DrawerFrame: darkThemes.dark_alt1,
|
|
@@ -265,28 +242,48 @@ function makeActiveTheme(theme) {
|
|
|
265
242
|
return res;
|
|
266
243
|
}
|
|
267
244
|
__name(makeActiveTheme, "makeActiveTheme");
|
|
245
|
+
const darkEntries = Object.entries(dark);
|
|
246
|
+
const lightEntries = Object.entries(light);
|
|
247
|
+
function findColors(prefix, dark2 = false) {
|
|
248
|
+
return Object.fromEntries((dark2 ? darkEntries : lightEntries).filter(([k]) => k.startsWith(prefix)));
|
|
249
|
+
}
|
|
250
|
+
__name(findColors, "findColors");
|
|
251
|
+
const colorSchemes = [
|
|
252
|
+
{ name: "blue", colors: findColors("blue"), darkColors: findColors("blue", true) },
|
|
253
|
+
{ name: "gray", colors: findColors("gray"), darkColors: findColors("gray", true) },
|
|
254
|
+
{ name: "green", colors: findColors("green"), darkColors: findColors("green", true) },
|
|
255
|
+
{ name: "orange", colors: findColors("orange"), darkColors: findColors("orange", true) },
|
|
256
|
+
{ name: "pink", colors: findColors("pink"), darkColors: findColors("pink", true) },
|
|
257
|
+
{ name: "purple", colors: findColors("purple"), darkColors: findColors("purple", true) },
|
|
258
|
+
{ name: "red", colors: findColors("red"), darkColors: findColors("red", true) },
|
|
259
|
+
{ name: "yellow", colors: findColors("yellow"), darkColors: findColors("yellow", true) },
|
|
260
|
+
{ name: "teal", colors: findColors("teal"), darkColors: findColors("teal", true) }
|
|
261
|
+
];
|
|
262
|
+
const colorNames = [
|
|
263
|
+
"blue",
|
|
264
|
+
"gray",
|
|
265
|
+
"green",
|
|
266
|
+
"orange",
|
|
267
|
+
"pink",
|
|
268
|
+
"purple",
|
|
269
|
+
"red",
|
|
270
|
+
"yellow",
|
|
271
|
+
"teal"
|
|
272
|
+
];
|
|
268
273
|
const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors: darkColors2 }) => {
|
|
269
274
|
const [altLightThemes, altDarkThemes] = [
|
|
270
275
|
{ colors: darkColors2, backgrounds: colors },
|
|
271
276
|
{ colors, backgrounds: darkColors2 }
|
|
272
277
|
].map((props, i) => {
|
|
273
278
|
const isLight = i === 0;
|
|
279
|
+
const colorsBase = Object.values(props.colors).slice(2);
|
|
274
280
|
const [backgrounds, colors2] = [
|
|
275
281
|
Object.values(props.backgrounds),
|
|
276
|
-
|
|
282
|
+
isLight ? colorsBase : [colorsBase[0], "#ccc", ...colorsBase.slice(1)]
|
|
277
283
|
];
|
|
278
284
|
const scheme = isLight ? "light" : "dark";
|
|
279
285
|
const shift = isLight ? 0 : 1;
|
|
280
|
-
|
|
281
|
-
const [_, h, sp, lp] = backgrounds[0].val.match(/hsl\(([0-9\.]+), ([0-9\.]+)\%, ([0-9\.]+)\%\)/);
|
|
282
|
-
const key = backgrounds[0].key.replace("1", "0");
|
|
283
|
-
backgrounds.unshift((0, import_core.createVariable)({
|
|
284
|
-
key,
|
|
285
|
-
name: key,
|
|
286
|
-
val: `hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`
|
|
287
|
-
}));
|
|
288
|
-
}
|
|
289
|
-
const themeWithAlts = createThemesFrom(name, createTheme, {
|
|
286
|
+
const themeWithAlts = createThemesFrom(name, themeCreator, {
|
|
290
287
|
colors: colors2,
|
|
291
288
|
backgrounds,
|
|
292
289
|
borderColors: backgrounds,
|
|
@@ -294,7 +291,7 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors: dark
|
|
|
294
291
|
shift,
|
|
295
292
|
isBase: false,
|
|
296
293
|
offsets: {
|
|
297
|
-
background: isLight ? [
|
|
294
|
+
background: isLight ? [2, 2, 2, 2, 2, 2] : null,
|
|
298
295
|
borderColor: isLight ? [2, 2, 2, 3, 2] : null,
|
|
299
296
|
color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1]
|
|
300
297
|
}
|
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 { Variable, createVariable, getVariableValue } from '@tamagui/core'\n\nimport { setColorAlpha } from './colorUtils'\nimport { colorTokens, 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 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 + (props.isLight ? 1 : 0) + 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 = makeActiveTheme(theme)\n\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[1][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 createTheme = (\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 let 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.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: (isLight ? colors : backgrounds)[Math.floor(colors.length / 2)],\n shadowColor: isLight ? color.grayA2 : 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: colorTokens.light.blue, darkColors: colorTokens.dark.blue },\n { name: 'gray', colors: colorTokens.light.gray, darkColors: colorTokens.dark.gray },\n { name: 'green', colors: colorTokens.light.green, darkColors: colorTokens.dark.green },\n { name: 'orange', colors: colorTokens.light.orange, darkColors: colorTokens.dark.orange },\n { name: 'pink', colors: colorTokens.light.pink, darkColors: colorTokens.dark.pink },\n { name: 'purple', colors: colorTokens.light.purple, darkColors: colorTokens.dark.purple },\n { name: 'red', colors: colorTokens.light.red, darkColors: colorTokens.dark.red },\n { name: 'violet', colors: colorTokens.light.violet, darkColors: colorTokens.dark.violet },\n { name: 'yellow', colors: colorTokens.light.yellow, darkColors: colorTokens.dark.yellow },\n { name: 'teal', colors: colorTokens.light.teal, darkColors: colorTokens.dark.teal },\n] as const\n\nexport type ColorNames = typeof colorSchemes[number]['name']\n\nconst themeColors = {\n light: [\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 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', createTheme, {\n backgrounds: themeColors.light,\n // isBase: true,\n backgroundStrong: '#fafafa',\n borderColors: themeColors.light.slice(2),\n isLight: true,\n})\n\nconst darkThemes = createThemesFrom('dark', createTheme, {\n backgrounds: themeColors.dark,\n colors: themeColors.light.slice(2),\n backgroundStrong: '#111',\n isBase: true,\n isLight: false,\n shift: 1,\n offsets: {\n color: [0, 4, 5, 5, 5, 5],\n },\n})\n\n// nice and flat\nexport const colorNames = [\n 'blue',\n 'gray',\n 'green',\n 'indigo',\n 'orange',\n 'pink',\n 'purple',\n 'red',\n 'violet',\n 'yellow',\n 'teal',\n] as const\n\nconst baseThemes = {\n // light\n ...lightThemes,\n light: {\n ...lightColors,\n ...lightThemes.light,\n },\n light_active: makeActiveTheme(lightThemes.light),\n light_Card: lightThemes.light,\n light_Button: lightThemes.light,\n light_SliderTrack: lightThemes.light_alt1,\n light_SliderTrackActive: lightThemes.light_alt2,\n light_Switch: lightThemes.light,\n light_SwitchThumb: lightThemes.light_alt1,\n light_DrawerFrame: lightThemes.light_alt1,\n\n // dark\n ...darkThemes,\n dark: {\n ...darkColors,\n ...darkThemes.dark,\n },\n dark_active: makeActiveTheme(darkThemes.dark),\n dark_Card: darkThemes.dark,\n dark_DrawerFrame: darkThemes.dark_alt1,\n dark_SliderTrack: darkThemes.dark_darker,\n dark_SliderTrackActive: darkThemes.dark_alt1,\n dark_Switch: darkThemes.dark_darker,\n dark_SwitchThumb: 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] = [\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].val.match(\n /hsl\\(([0-9\\.]+), ([0-9\\.]+)\\%, ([0-9\\.]+)\\%\\)/\n )!\n const key = backgrounds[0].key.replace('1', '0')\n backgrounds.unshift(\n createVariable({\n key,\n name: key,\n val: `hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`,\n })\n )\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 ? [1, 1, 1, 1, 1, 1] : 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\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { Variable, createTheme, createVariable, getVariableValue } 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 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 + (props.isLight ? 0 : 0) + 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 = makeActiveTheme(theme)\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[1][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 let 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 (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 // isBase: true,\n backgroundStrong: '#fafafa',\n borderColors: themeColors.light.slice(2),\n isLight: true,\n})\n\nconst darkThemes = createThemesFrom('dark', themeCreator, {\n backgrounds: themeColors.dark,\n colors: themeColors.light.slice(2),\n backgroundStrong: '#111',\n isBase: true,\n isLight: false,\n shift: 1,\n offsets: {\n color: [0, 4, 5, 5, 5, 5],\n },\n})\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 light_active: makeActiveTheme(lightThemes.light),\n light_Card: lightThemes.light,\n light_Button: lightThemes.light,\n light_SliderTrack: lightThemes.light_alt1,\n light_SliderTrackActive: lightThemes.light_alt2,\n light_Switch: lightThemes.light,\n light_SwitchThumb: lightThemes.light_alt1,\n light_DrawerFrame: lightThemes.light_alt1,\n\n // dark\n ...darkThemes,\n dark,\n dark_active: makeActiveTheme(darkThemes.dark),\n dark_Card: darkThemes.dark,\n dark_DrawerFrame: darkThemes.dark_alt1,\n dark_SliderTrack: darkThemes.dark_darker,\n dark_SliderTrackActive: darkThemes.dark_alt1,\n dark_Switch: darkThemes.dark_darker,\n dark_SwitchThumb: 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\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\nconst allThemes = {\n ...baseThemes,\n ...colorThemes,\n} as const\n\nexport const themes: {\n [key in keyof typeof allThemes]: typeof baseThemes['light']\n} = allThemes as any\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/tokens.js
CHANGED
|
@@ -32,7 +32,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
32
32
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
33
33
|
var tokens_exports = {};
|
|
34
34
|
__export(tokens_exports, {
|
|
35
|
-
colorTokens: () => colorTokens,
|
|
36
35
|
darkColors: () => darkColors,
|
|
37
36
|
lightColors: () => lightColors,
|
|
38
37
|
tokens: () => tokens
|
|
@@ -90,7 +89,7 @@ const zIndex = {
|
|
|
90
89
|
4: 400,
|
|
91
90
|
5: 500
|
|
92
91
|
};
|
|
93
|
-
const colorTokens =
|
|
92
|
+
const colorTokens = {
|
|
94
93
|
light: {
|
|
95
94
|
blue: import_colors.blue,
|
|
96
95
|
gray: import_colors.gray,
|
|
@@ -117,14 +116,14 @@ const colorTokens = (0, import_core.createVariables)({
|
|
|
117
116
|
yellow: import_colors.yellowDark,
|
|
118
117
|
teal: import_colors.tealDark
|
|
119
118
|
}
|
|
120
|
-
}
|
|
119
|
+
};
|
|
121
120
|
const darkColors = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, colorTokens.dark.blue), colorTokens.dark.gray), colorTokens.dark.grayA), colorTokens.dark.green), colorTokens.dark.orange), colorTokens.dark.pink), colorTokens.dark.purple), colorTokens.dark.red), colorTokens.dark.violet), colorTokens.dark.yellow), colorTokens.dark.teal);
|
|
122
121
|
const lightColors = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, colorTokens.light.blue), colorTokens.light.gray), colorTokens.light.grayA), colorTokens.light.green), colorTokens.light.orange), colorTokens.light.pink), colorTokens.light.purple), colorTokens.light.red), colorTokens.light.violet), colorTokens.light.yellow), colorTokens.light.teal);
|
|
123
|
-
const allColors = __spreadValues(__spreadValues({}, lightColors),
|
|
124
|
-
function
|
|
125
|
-
return Object.fromEntries(Object.entries(obj).map(([k, v]) => [`${k}
|
|
122
|
+
const allColors = __spreadValues(__spreadValues({}, postfixObjKeys(lightColors, "Light")), postfixObjKeys(darkColors, "Dark"));
|
|
123
|
+
function postfixObjKeys(obj, postfix) {
|
|
124
|
+
return Object.fromEntries(Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v]));
|
|
126
125
|
}
|
|
127
|
-
__name(
|
|
126
|
+
__name(postfixObjKeys, "postfixObjKeys");
|
|
128
127
|
const radius = {
|
|
129
128
|
0: 0,
|
|
130
129
|
1: 3,
|
|
@@ -149,7 +148,6 @@ const tokens = (0, import_core.createTokens)({
|
|
|
149
148
|
});
|
|
150
149
|
// Annotate the CommonJS export names for ESM import in node:
|
|
151
150
|
0 && (module.exports = {
|
|
152
|
-
colorTokens,
|
|
153
151
|
darkColors,
|
|
154
152
|
lightColors,
|
|
155
153
|
tokens
|
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 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, createVariables } 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\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
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, createVariables } 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
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/themes.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
import {
|
|
3
|
+
import { createTheme, getVariableValue } from "@tamagui/core";
|
|
4
4
|
import { setColorAlpha } from "./colorUtils";
|
|
5
|
-
import {
|
|
5
|
+
import { darkColors, lightColors, tokens } from "./tokens";
|
|
6
6
|
const { color } = tokens;
|
|
7
7
|
const alternates = [1, 2, 3, 4];
|
|
8
8
|
const alts = [1, 2, 3];
|
|
@@ -12,7 +12,7 @@ function createThemesFrom(name, getTheme, props) {
|
|
|
12
12
|
let themeEntries = [[name, theme]];
|
|
13
13
|
const altThemes = alternates.map((alt) => [
|
|
14
14
|
`${name}_alt${alt}`,
|
|
15
|
-
getTheme(alt + (props.isLight ?
|
|
15
|
+
getTheme(alt + (props.isLight ? 0 : 0) + shift, props)
|
|
16
16
|
]);
|
|
17
17
|
const altThemes2 = alternates.map((alt) => [
|
|
18
18
|
`${name}_alt${alt}`,
|
|
@@ -59,7 +59,7 @@ function createThemesFrom(name, getTheme, props) {
|
|
|
59
59
|
return themes2;
|
|
60
60
|
}
|
|
61
61
|
__name(createThemesFrom, "createThemesFrom");
|
|
62
|
-
const
|
|
62
|
+
const themeCreator = /* @__PURE__ */ __name((str = 1, {
|
|
63
63
|
backgrounds,
|
|
64
64
|
isLight = true,
|
|
65
65
|
isBase = false,
|
|
@@ -90,14 +90,14 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
|
|
|
90
90
|
backgroundHover: get(backgrounds, str + lighterDir),
|
|
91
91
|
backgroundPress: get(backgrounds, str + darkerDir),
|
|
92
92
|
backgroundFocus: get(backgrounds, str + darkerDir * 2),
|
|
93
|
-
backgroundTransparent: color.
|
|
93
|
+
backgroundTransparent: color.grayA1Light,
|
|
94
94
|
color: get(colors, 0 + str, "color"),
|
|
95
95
|
colorHover: get(colors, 1 + str, "color"),
|
|
96
96
|
colorPress: get(colors, 2 + str, "color"),
|
|
97
97
|
colorFocus: get(colors, 3 + str, "color"),
|
|
98
98
|
colorTranslucent,
|
|
99
99
|
colorMid: (isLight ? colors : backgrounds)[Math.floor(colors.length / 2)],
|
|
100
|
-
shadowColor: isLight ? color.
|
|
100
|
+
shadowColor: isLight ? color.grayA2Light : color.grayA8Light,
|
|
101
101
|
shadowColorHover: darkColors2[!isLight ? 1 : 8],
|
|
102
102
|
shadowColorPress: darkColors2[!isLight ? 1 : 8],
|
|
103
103
|
shadowColorFocus: darkColors2[!isLight ? 1 : 8],
|
|
@@ -122,35 +122,23 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
|
|
|
122
122
|
});
|
|
123
123
|
}
|
|
124
124
|
return theme;
|
|
125
|
-
}, "
|
|
126
|
-
const colorSchemes = [
|
|
127
|
-
{ name: "blue", colors: colorTokens.light.blue, darkColors: colorTokens.dark.blue },
|
|
128
|
-
{ name: "gray", colors: colorTokens.light.gray, darkColors: colorTokens.dark.gray },
|
|
129
|
-
{ name: "green", colors: colorTokens.light.green, darkColors: colorTokens.dark.green },
|
|
130
|
-
{ name: "orange", colors: colorTokens.light.orange, darkColors: colorTokens.dark.orange },
|
|
131
|
-
{ name: "pink", colors: colorTokens.light.pink, darkColors: colorTokens.dark.pink },
|
|
132
|
-
{ name: "purple", colors: colorTokens.light.purple, darkColors: colorTokens.dark.purple },
|
|
133
|
-
{ name: "red", colors: colorTokens.light.red, darkColors: colorTokens.dark.red },
|
|
134
|
-
{ name: "violet", colors: colorTokens.light.violet, darkColors: colorTokens.dark.violet },
|
|
135
|
-
{ name: "yellow", colors: colorTokens.light.yellow, darkColors: colorTokens.dark.yellow },
|
|
136
|
-
{ name: "teal", colors: colorTokens.light.teal, darkColors: colorTokens.dark.teal }
|
|
137
|
-
];
|
|
125
|
+
}, "themeCreator");
|
|
138
126
|
const themeColors = {
|
|
139
127
|
light: [
|
|
140
128
|
"#fff",
|
|
141
129
|
"#f4f4f4",
|
|
142
|
-
color.
|
|
143
|
-
color.
|
|
144
|
-
color.
|
|
145
|
-
color.
|
|
146
|
-
color.
|
|
147
|
-
color.
|
|
148
|
-
color.
|
|
149
|
-
color.
|
|
150
|
-
color.
|
|
151
|
-
color.
|
|
152
|
-
color.
|
|
153
|
-
color.
|
|
130
|
+
color.gray1Light,
|
|
131
|
+
color.gray2Light,
|
|
132
|
+
color.gray3Light,
|
|
133
|
+
color.gray4Light,
|
|
134
|
+
color.gray5Light,
|
|
135
|
+
color.gray6Light,
|
|
136
|
+
color.gray7Light,
|
|
137
|
+
color.gray8Light,
|
|
138
|
+
color.gray9Light,
|
|
139
|
+
color.gray10Light,
|
|
140
|
+
color.gray11Light,
|
|
141
|
+
color.gray12Light
|
|
154
142
|
],
|
|
155
143
|
dark: [
|
|
156
144
|
"#111111",
|
|
@@ -167,13 +155,13 @@ const themeColors = {
|
|
|
167
155
|
"#777777"
|
|
168
156
|
]
|
|
169
157
|
};
|
|
170
|
-
const lightThemes = createThemesFrom("light",
|
|
158
|
+
const lightThemes = createThemesFrom("light", themeCreator, {
|
|
171
159
|
backgrounds: themeColors.light,
|
|
172
160
|
backgroundStrong: "#fafafa",
|
|
173
161
|
borderColors: themeColors.light.slice(2),
|
|
174
162
|
isLight: true
|
|
175
163
|
});
|
|
176
|
-
const darkThemes = createThemesFrom("dark",
|
|
164
|
+
const darkThemes = createThemesFrom("dark", themeCreator, {
|
|
177
165
|
backgrounds: themeColors.dark,
|
|
178
166
|
colors: themeColors.light.slice(2),
|
|
179
167
|
backgroundStrong: "#111",
|
|
@@ -184,25 +172,17 @@ const darkThemes = createThemesFrom("dark", createTheme, {
|
|
|
184
172
|
color: [0, 4, 5, 5, 5, 5]
|
|
185
173
|
}
|
|
186
174
|
});
|
|
187
|
-
const
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
"red",
|
|
196
|
-
"violet",
|
|
197
|
-
"yellow",
|
|
198
|
-
"teal"
|
|
199
|
-
];
|
|
175
|
+
const light = createTheme({
|
|
176
|
+
...lightColors,
|
|
177
|
+
...lightThemes.light
|
|
178
|
+
});
|
|
179
|
+
const dark = createTheme({
|
|
180
|
+
...darkColors,
|
|
181
|
+
...darkThemes.dark
|
|
182
|
+
});
|
|
200
183
|
const baseThemes = {
|
|
201
184
|
...lightThemes,
|
|
202
|
-
light
|
|
203
|
-
...lightColors,
|
|
204
|
-
...lightThemes.light
|
|
205
|
-
},
|
|
185
|
+
light,
|
|
206
186
|
light_active: makeActiveTheme(lightThemes.light),
|
|
207
187
|
light_Card: lightThemes.light,
|
|
208
188
|
light_Button: lightThemes.light,
|
|
@@ -212,10 +192,7 @@ const baseThemes = {
|
|
|
212
192
|
light_SwitchThumb: lightThemes.light_alt1,
|
|
213
193
|
light_DrawerFrame: lightThemes.light_alt1,
|
|
214
194
|
...darkThemes,
|
|
215
|
-
dark
|
|
216
|
-
...darkColors,
|
|
217
|
-
...darkThemes.dark
|
|
218
|
-
},
|
|
195
|
+
dark,
|
|
219
196
|
dark_active: makeActiveTheme(darkThemes.dark),
|
|
220
197
|
dark_Card: darkThemes.dark,
|
|
221
198
|
dark_DrawerFrame: darkThemes.dark_alt1,
|
|
@@ -234,28 +211,48 @@ function makeActiveTheme(theme) {
|
|
|
234
211
|
return res;
|
|
235
212
|
}
|
|
236
213
|
__name(makeActiveTheme, "makeActiveTheme");
|
|
214
|
+
const darkEntries = Object.entries(dark);
|
|
215
|
+
const lightEntries = Object.entries(light);
|
|
216
|
+
function findColors(prefix, dark2 = false) {
|
|
217
|
+
return Object.fromEntries((dark2 ? darkEntries : lightEntries).filter(([k]) => k.startsWith(prefix)));
|
|
218
|
+
}
|
|
219
|
+
__name(findColors, "findColors");
|
|
220
|
+
const colorSchemes = [
|
|
221
|
+
{ name: "blue", colors: findColors("blue"), darkColors: findColors("blue", true) },
|
|
222
|
+
{ name: "gray", colors: findColors("gray"), darkColors: findColors("gray", true) },
|
|
223
|
+
{ name: "green", colors: findColors("green"), darkColors: findColors("green", true) },
|
|
224
|
+
{ name: "orange", colors: findColors("orange"), darkColors: findColors("orange", true) },
|
|
225
|
+
{ name: "pink", colors: findColors("pink"), darkColors: findColors("pink", true) },
|
|
226
|
+
{ name: "purple", colors: findColors("purple"), darkColors: findColors("purple", true) },
|
|
227
|
+
{ name: "red", colors: findColors("red"), darkColors: findColors("red", true) },
|
|
228
|
+
{ name: "yellow", colors: findColors("yellow"), darkColors: findColors("yellow", true) },
|
|
229
|
+
{ name: "teal", colors: findColors("teal"), darkColors: findColors("teal", true) }
|
|
230
|
+
];
|
|
231
|
+
const colorNames = [
|
|
232
|
+
"blue",
|
|
233
|
+
"gray",
|
|
234
|
+
"green",
|
|
235
|
+
"orange",
|
|
236
|
+
"pink",
|
|
237
|
+
"purple",
|
|
238
|
+
"red",
|
|
239
|
+
"yellow",
|
|
240
|
+
"teal"
|
|
241
|
+
];
|
|
237
242
|
const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors: darkColors2 }) => {
|
|
238
243
|
const [altLightThemes, altDarkThemes] = [
|
|
239
244
|
{ colors: darkColors2, backgrounds: colors },
|
|
240
245
|
{ colors, backgrounds: darkColors2 }
|
|
241
246
|
].map((props, i) => {
|
|
242
247
|
const isLight = i === 0;
|
|
248
|
+
const colorsBase = Object.values(props.colors).slice(2);
|
|
243
249
|
const [backgrounds, colors2] = [
|
|
244
250
|
Object.values(props.backgrounds),
|
|
245
|
-
|
|
251
|
+
isLight ? colorsBase : [colorsBase[0], "#ccc", ...colorsBase.slice(1)]
|
|
246
252
|
];
|
|
247
253
|
const scheme = isLight ? "light" : "dark";
|
|
248
254
|
const shift = isLight ? 0 : 1;
|
|
249
|
-
|
|
250
|
-
const [_, h, sp, lp] = backgrounds[0].val.match(/hsl\(([0-9\.]+), ([0-9\.]+)\%, ([0-9\.]+)\%\)/);
|
|
251
|
-
const key = backgrounds[0].key.replace("1", "0");
|
|
252
|
-
backgrounds.unshift(createVariable({
|
|
253
|
-
key,
|
|
254
|
-
name: key,
|
|
255
|
-
val: `hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`
|
|
256
|
-
}));
|
|
257
|
-
}
|
|
258
|
-
const themeWithAlts = createThemesFrom(name, createTheme, {
|
|
255
|
+
const themeWithAlts = createThemesFrom(name, themeCreator, {
|
|
259
256
|
colors: colors2,
|
|
260
257
|
backgrounds,
|
|
261
258
|
borderColors: backgrounds,
|
|
@@ -263,7 +260,7 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors: dark
|
|
|
263
260
|
shift,
|
|
264
261
|
isBase: false,
|
|
265
262
|
offsets: {
|
|
266
|
-
background: isLight ? [
|
|
263
|
+
background: isLight ? [2, 2, 2, 2, 2, 2] : null,
|
|
267
264
|
borderColor: isLight ? [2, 2, 2, 3, 2] : null,
|
|
268
265
|
color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1]
|
|
269
266
|
}
|