@tamagui/theme-base 1.0.1-beta.53 → 1.0.1-beta.56
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 +43 -41
- package/dist/cjs/themes.js.map +2 -2
- package/dist/cjs/tokens.js +46 -42
- package/dist/cjs/tokens.js.map +2 -2
- package/dist/esm/themes.js +51 -49
- package/dist/esm/themes.js.map +2 -2
- package/dist/esm/tokens.js +48 -43
- package/dist/esm/tokens.js.map +2 -2
- package/dist/jsx/themes.js +51 -49
- package/dist/jsx/tokens.js +48 -43
- package/package.json +4 -4
- package/types/themes.d.ts +608 -828
- package/types/themes.d.ts.map +1 -1
- package/types/tokens.d.ts +551 -844
- package/types/tokens.d.ts.map +1 -1
package/dist/cjs/themes.js
CHANGED
|
@@ -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,6 +210,26 @@ const darkThemes = createThemesFrom("dark", createTheme, {
|
|
|
222
210
|
color: [0, 4, 5, 5, 5, 5]
|
|
223
211
|
}
|
|
224
212
|
});
|
|
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));
|
|
215
|
+
const darkEntries = Object.entries(dark);
|
|
216
|
+
const lightEntries = Object.entries(light);
|
|
217
|
+
function findColors(prefix, dark2 = false) {
|
|
218
|
+
return Object.fromEntries((dark2 ? darkEntries : lightEntries).filter(([k]) => k.startsWith(prefix)));
|
|
219
|
+
}
|
|
220
|
+
__name(findColors, "findColors");
|
|
221
|
+
const colorSchemes = [
|
|
222
|
+
{ name: "blue", colors: findColors("blue"), darkColors: findColors("blue", true) },
|
|
223
|
+
{ name: "gray", colors: findColors("gray"), darkColors: findColors("gray", true) },
|
|
224
|
+
{ name: "green", colors: findColors("green"), darkColors: findColors("green", true) },
|
|
225
|
+
{ name: "orange", colors: findColors("orange"), darkColors: findColors("orange", true) },
|
|
226
|
+
{ name: "pink", colors: findColors("pink"), darkColors: findColors("pink", true) },
|
|
227
|
+
{ name: "purple", colors: findColors("purple"), darkColors: findColors("purple", true) },
|
|
228
|
+
{ name: "red", colors: findColors("red"), darkColors: findColors("red", true) },
|
|
229
|
+
{ name: "violet", colors: findColors("violet"), darkColors: findColors("violet", true) },
|
|
230
|
+
{ name: "yellow", colors: findColors("yellow"), darkColors: findColors("yellow", true) },
|
|
231
|
+
{ name: "teal", colors: findColors("teal"), darkColors: findColors("teal", true) }
|
|
232
|
+
];
|
|
225
233
|
const colorNames = [
|
|
226
234
|
"blue",
|
|
227
235
|
"gray",
|
|
@@ -236,7 +244,7 @@ const colorNames = [
|
|
|
236
244
|
"teal"
|
|
237
245
|
];
|
|
238
246
|
const baseThemes = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, lightThemes), {
|
|
239
|
-
light
|
|
247
|
+
light,
|
|
240
248
|
light_active: makeActiveTheme(lightThemes.light),
|
|
241
249
|
light_Card: lightThemes.light,
|
|
242
250
|
light_Button: lightThemes.light,
|
|
@@ -246,7 +254,7 @@ const baseThemes = __spreadProps(__spreadValues(__spreadProps(__spreadValues({},
|
|
|
246
254
|
light_SwitchThumb: lightThemes.light_alt1,
|
|
247
255
|
light_DrawerFrame: lightThemes.light_alt1
|
|
248
256
|
}), darkThemes), {
|
|
249
|
-
dark
|
|
257
|
+
dark,
|
|
250
258
|
dark_active: makeActiveTheme(darkThemes.dark),
|
|
251
259
|
dark_Card: darkThemes.dark,
|
|
252
260
|
dark_DrawerFrame: darkThemes.dark_alt1,
|
|
@@ -271,22 +279,16 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors: dark
|
|
|
271
279
|
{ colors, backgrounds: darkColors2 }
|
|
272
280
|
].map((props, i) => {
|
|
273
281
|
const isLight = i === 0;
|
|
282
|
+
const colorsBase = Object.values(props.colors).slice(2);
|
|
274
283
|
const [backgrounds, colors2] = [
|
|
275
284
|
Object.values(props.backgrounds),
|
|
276
|
-
|
|
285
|
+
isLight ? colorsBase : [colorsBase[0], "#ccc", ...colorsBase.slice(1)]
|
|
277
286
|
];
|
|
278
287
|
const scheme = isLight ? "light" : "dark";
|
|
279
288
|
const shift = isLight ? 0 : 1;
|
|
280
289
|
if (!isLight) {
|
|
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
290
|
}
|
|
289
|
-
const themeWithAlts = createThemesFrom(name,
|
|
291
|
+
const themeWithAlts = createThemesFrom(name, themeCreator, {
|
|
290
292
|
colors: colors2,
|
|
291
293
|
backgrounds,
|
|
292
294
|
borderColors: backgrounds,
|
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, 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 ? 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 // 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\nconst darkEntries = Object.entries(dark)\nconst lightEntries = Object.entries(light)\nfunction findColors(prefix: string, dark = false) {\n return Object.fromEntries(\n (dark ? darkEntries : lightEntries).filter(([k]) => k.startsWith(prefix))\n )\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: 'violet', colors: findColors('violet'), darkColors: findColors('violet', 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 = [\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 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\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 ? [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"],
|
|
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
|
|
@@ -40,40 +39,46 @@ __export(tokens_exports, {
|
|
|
40
39
|
module.exports = __toCommonJS(tokens_exports);
|
|
41
40
|
var import_colors = require("@tamagui/colors");
|
|
42
41
|
var import_core = require("@tamagui/core");
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
42
|
+
const size = {
|
|
43
|
+
0: 0,
|
|
44
|
+
0.25: 2,
|
|
45
|
+
0.5: 4,
|
|
46
|
+
0.75: 8,
|
|
47
|
+
1: 20,
|
|
48
|
+
1.5: 24,
|
|
49
|
+
2: 28,
|
|
50
|
+
2.5: 32,
|
|
51
|
+
3: 36,
|
|
52
|
+
3.5: 40,
|
|
53
|
+
4: 44,
|
|
54
|
+
true: 44,
|
|
55
|
+
4.5: 48,
|
|
56
|
+
5: 52,
|
|
57
|
+
5.5: 59,
|
|
58
|
+
6: 64,
|
|
59
|
+
6.5: 69,
|
|
60
|
+
7: 74,
|
|
61
|
+
7.6: 79,
|
|
62
|
+
8: 84,
|
|
63
|
+
8.5: 89,
|
|
64
|
+
9: 94,
|
|
65
|
+
9.5: 99,
|
|
66
|
+
10: 104,
|
|
67
|
+
11: 124,
|
|
68
|
+
12: 144,
|
|
69
|
+
13: 164,
|
|
70
|
+
14: 184,
|
|
71
|
+
15: 204,
|
|
72
|
+
16: 224,
|
|
73
|
+
17: 224,
|
|
74
|
+
18: 244,
|
|
75
|
+
19: 264,
|
|
76
|
+
20: 284
|
|
77
|
+
};
|
|
78
|
+
const spaces = Object.entries(size).map(([k, v]) => [
|
|
79
|
+
k,
|
|
80
|
+
Math.max(0, v <= 16 ? Math.round(v * 0.333) : Math.floor(v * 0.7 - 12))
|
|
81
|
+
]);
|
|
77
82
|
const spacesNegative = spaces.map(([k, v]) => [`-${k}`, -v]);
|
|
78
83
|
const space = __spreadValues(__spreadValues({}, Object.fromEntries(spaces)), Object.fromEntries(spacesNegative));
|
|
79
84
|
const zIndex = {
|
|
@@ -84,7 +89,7 @@ const zIndex = {
|
|
|
84
89
|
4: 400,
|
|
85
90
|
5: 500
|
|
86
91
|
};
|
|
87
|
-
const colorTokens =
|
|
92
|
+
const colorTokens = {
|
|
88
93
|
light: {
|
|
89
94
|
blue: import_colors.blue,
|
|
90
95
|
gray: import_colors.gray,
|
|
@@ -111,14 +116,14 @@ const colorTokens = (0, import_core.createVariables)({
|
|
|
111
116
|
yellow: import_colors.yellowDark,
|
|
112
117
|
teal: import_colors.tealDark
|
|
113
118
|
}
|
|
114
|
-
}
|
|
119
|
+
};
|
|
115
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);
|
|
116
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);
|
|
117
|
-
const allColors = __spreadValues(__spreadValues({}, lightColors),
|
|
118
|
-
function
|
|
119
|
-
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]));
|
|
120
125
|
}
|
|
121
|
-
__name(
|
|
126
|
+
__name(postfixObjKeys, "postfixObjKeys");
|
|
122
127
|
const radius = {
|
|
123
128
|
0: 0,
|
|
124
129
|
1: 3,
|
|
@@ -143,7 +148,6 @@ const tokens = (0, import_core.createTokens)({
|
|
|
143
148
|
});
|
|
144
149
|
// Annotate the CommonJS export names for ESM import in node:
|
|
145
150
|
0 && (module.exports = {
|
|
146
|
-
colorTokens,
|
|
147
151
|
darkColors,
|
|
148
152
|
lightColors,
|
|
149
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//
|
|
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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAuBO;AACP,kBAAwD;AAcxD,MAAM,OAAO;AAAA,EACX,GAAG;AAAA,EACH,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,GAAG;AAAA,EACH,KAAK;AAAA,EACL,GAAG;AAAA,EACH,KAAK;AAAA,EACL,GAAG;AAAA,EACH,KAAK;AAAA,EACL,GAAG;AAAA,EACH,MAAM;AAAA,EACN,KAAK;AAAA,EACL,GAAG;AAAA,EACH,KAAK;AAAA,EACL,GAAG;AAAA,EACH,KAAK;AAAA,EACL,GAAG;AAAA,EACH,KAAK;AAAA,EACL,GAAG;AAAA,EACH,KAAK;AAAA,EACL,GAAG;AAAA,EACH,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,MAAM,SAAS,OAAO,QAAQ,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,OAAO;AAAA,EAClD;AAAA,EACA,KAAK,IAAI,GAAG,KAAK,KAAK,KAAK,MAAM,IAAI,KAAK,IAAI,KAAK,MAAM,IAAI,MAAM,EAAE,CAAC;AACxE,CAAC;AAED,MAAM,iBAAiB,OAAO,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC;AAE3D,MAAM,QAEF,kCACC,OAAO,YAAY,MAAM,IACzB,OAAO,YAAY,cAAc;AAGtC,MAAM,SAAS;AAAA,EACb,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,cAAc;AAAA,EAClB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AACF;AAEO,MAAM,aAAa,yKACrB,YAAY,KAAK,OACjB,YAAY,KAAK,OACjB,YAAY,KAAK,QACjB,YAAY,KAAK,QACjB,YAAY,KAAK,SACjB,YAAY,KAAK,OACjB,YAAY,KAAK,SACjB,YAAY,KAAK,MACjB,YAAY,KAAK,SACjB,YAAY,KAAK,SACjB,YAAY,KAAK;AAGf,MAAM,cAAc,yKACtB,YAAY,MAAM,OAClB,YAAY,MAAM,OAClB,YAAY,MAAM,QAClB,YAAY,MAAM,QAClB,YAAY,MAAM,SAClB,YAAY,MAAM,OAClB,YAAY,MAAM,SAClB,YAAY,MAAM,MAClB,YAAY,MAAM,SAClB,YAAY,MAAM,SAClB,YAAY,MAAM;AAGvB,MAAM,YAAY,kCACb,eAAe,aAAa,OAAO,IACnC,eAAe,YAAY,MAAM;AAGtC,wBACE,KACA,SAGA;AACA,SAAO,OAAO,YAAY,OAAO,QAAQ,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,IAAI,WAAW,CAAC,CAAC,CAAC;AACtF;AAPS;AAST,MAAM,SAAS;AAAA,EACb,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;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,MAAM,SAAS,8BAAa;AAAA,EACjC,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
|
|
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];
|
|
@@ -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,6 +172,32 @@ const darkThemes = createThemesFrom("dark", createTheme, {
|
|
|
184
172
|
color: [0, 4, 5, 5, 5, 5]
|
|
185
173
|
}
|
|
186
174
|
});
|
|
175
|
+
const light = createTheme({
|
|
176
|
+
...lightColors,
|
|
177
|
+
...lightThemes.light
|
|
178
|
+
});
|
|
179
|
+
const dark = createTheme({
|
|
180
|
+
...darkColors,
|
|
181
|
+
...darkThemes.dark
|
|
182
|
+
});
|
|
183
|
+
const darkEntries = Object.entries(dark);
|
|
184
|
+
const lightEntries = Object.entries(light);
|
|
185
|
+
function findColors(prefix, dark2 = false) {
|
|
186
|
+
return Object.fromEntries((dark2 ? darkEntries : lightEntries).filter(([k]) => k.startsWith(prefix)));
|
|
187
|
+
}
|
|
188
|
+
__name(findColors, "findColors");
|
|
189
|
+
const colorSchemes = [
|
|
190
|
+
{ name: "blue", colors: findColors("blue"), darkColors: findColors("blue", true) },
|
|
191
|
+
{ name: "gray", colors: findColors("gray"), darkColors: findColors("gray", true) },
|
|
192
|
+
{ name: "green", colors: findColors("green"), darkColors: findColors("green", true) },
|
|
193
|
+
{ name: "orange", colors: findColors("orange"), darkColors: findColors("orange", true) },
|
|
194
|
+
{ name: "pink", colors: findColors("pink"), darkColors: findColors("pink", true) },
|
|
195
|
+
{ name: "purple", colors: findColors("purple"), darkColors: findColors("purple", true) },
|
|
196
|
+
{ name: "red", colors: findColors("red"), darkColors: findColors("red", true) },
|
|
197
|
+
{ name: "violet", colors: findColors("violet"), darkColors: findColors("violet", true) },
|
|
198
|
+
{ name: "yellow", colors: findColors("yellow"), darkColors: findColors("yellow", true) },
|
|
199
|
+
{ name: "teal", colors: findColors("teal"), darkColors: findColors("teal", true) }
|
|
200
|
+
];
|
|
187
201
|
const colorNames = [
|
|
188
202
|
"blue",
|
|
189
203
|
"gray",
|
|
@@ -199,10 +213,7 @@ const colorNames = [
|
|
|
199
213
|
];
|
|
200
214
|
const baseThemes = {
|
|
201
215
|
...lightThemes,
|
|
202
|
-
light
|
|
203
|
-
...lightColors,
|
|
204
|
-
...lightThemes.light
|
|
205
|
-
},
|
|
216
|
+
light,
|
|
206
217
|
light_active: makeActiveTheme(lightThemes.light),
|
|
207
218
|
light_Card: lightThemes.light,
|
|
208
219
|
light_Button: lightThemes.light,
|
|
@@ -212,10 +223,7 @@ const baseThemes = {
|
|
|
212
223
|
light_SwitchThumb: lightThemes.light_alt1,
|
|
213
224
|
light_DrawerFrame: lightThemes.light_alt1,
|
|
214
225
|
...darkThemes,
|
|
215
|
-
dark
|
|
216
|
-
...darkColors,
|
|
217
|
-
...darkThemes.dark
|
|
218
|
-
},
|
|
226
|
+
dark,
|
|
219
227
|
dark_active: makeActiveTheme(darkThemes.dark),
|
|
220
228
|
dark_Card: darkThemes.dark,
|
|
221
229
|
dark_DrawerFrame: darkThemes.dark_alt1,
|
|
@@ -240,22 +248,16 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors: dark
|
|
|
240
248
|
{ colors, backgrounds: darkColors2 }
|
|
241
249
|
].map((props, i) => {
|
|
242
250
|
const isLight = i === 0;
|
|
251
|
+
const colorsBase = Object.values(props.colors).slice(2);
|
|
243
252
|
const [backgrounds, colors2] = [
|
|
244
253
|
Object.values(props.backgrounds),
|
|
245
|
-
|
|
254
|
+
isLight ? colorsBase : [colorsBase[0], "#ccc", ...colorsBase.slice(1)]
|
|
246
255
|
];
|
|
247
256
|
const scheme = isLight ? "light" : "dark";
|
|
248
257
|
const shift = isLight ? 0 : 1;
|
|
249
258
|
if (!isLight) {
|
|
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
259
|
}
|
|
258
|
-
const themeWithAlts = createThemesFrom(name,
|
|
260
|
+
const themeWithAlts = createThemesFrom(name, themeCreator, {
|
|
259
261
|
colors: colors2,
|
|
260
262
|
backgrounds,
|
|
261
263
|
borderColors: backgrounds,
|