@tamagui/theme-base 1.0.1-beta.76 → 1.0.1-beta.79
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 +17 -13
- package/dist/cjs/themes.js.map +2 -2
- package/dist/esm/themes.js +17 -13
- package/dist/esm/themes.js.map +2 -2
- package/dist/jsx/colorUtils.js +1 -0
- package/dist/jsx/colorUtils.js.map +7 -0
- package/dist/jsx/index.js +1 -0
- package/dist/jsx/index.js.map +7 -0
- package/dist/jsx/themes.js +18 -13
- package/dist/jsx/themes.js.map +7 -0
- package/dist/jsx/tokens.js +1 -0
- package/dist/jsx/tokens.js.map +7 -0
- package/package.json +4 -4
- package/src/themes.tsx +17 -12
- package/types/themes.d.ts +44 -1388
- package/types/themes.d.ts.map +1 -1
- package/types/tokens.d.ts +18 -18
package/dist/cjs/themes.js
CHANGED
|
@@ -140,20 +140,24 @@ const themeCreator = (str = 1, {
|
|
|
140
140
|
borderColor: null,
|
|
141
141
|
borderColorHover: null,
|
|
142
142
|
borderColorPress: null,
|
|
143
|
-
borderColorFocus: null
|
|
144
|
-
step1: backgrounds[0],
|
|
145
|
-
step2: backgrounds[1],
|
|
146
|
-
step3: backgrounds[2],
|
|
147
|
-
step4: backgrounds[3],
|
|
148
|
-
step5: backgrounds[4],
|
|
149
|
-
step6: backgrounds[5],
|
|
150
|
-
step7: backgrounds[6],
|
|
151
|
-
step8: backgrounds[7],
|
|
152
|
-
step9: backgrounds[8],
|
|
153
|
-
step10: backgrounds[9],
|
|
154
|
-
step11: backgrounds[10],
|
|
155
|
-
step12: backgrounds[11]
|
|
143
|
+
borderColorFocus: null
|
|
156
144
|
};
|
|
145
|
+
if (process.env.ENABLE_STEPS) {
|
|
146
|
+
Object.assign(theme, {
|
|
147
|
+
step1: backgrounds[0],
|
|
148
|
+
step2: backgrounds[1],
|
|
149
|
+
step3: backgrounds[2],
|
|
150
|
+
step4: backgrounds[3],
|
|
151
|
+
step5: backgrounds[4],
|
|
152
|
+
step6: backgrounds[5],
|
|
153
|
+
step7: backgrounds[6],
|
|
154
|
+
step8: backgrounds[7],
|
|
155
|
+
step9: backgrounds[8],
|
|
156
|
+
step10: backgrounds[9],
|
|
157
|
+
step11: backgrounds[10],
|
|
158
|
+
step12: backgrounds[11]
|
|
159
|
+
});
|
|
160
|
+
}
|
|
157
161
|
if (isBase) {
|
|
158
162
|
Object.assign(theme, {
|
|
159
163
|
borderColor: isLight ? get(colors, 8 - str, "borderColor") : get(backgrounds, 2 + str, "borderColor"),
|
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, createTheme, getVariableValue, isWeb } 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 step1: backgrounds[0],\n step2: backgrounds[1],\n step3: backgrounds[2],\n step4: backgrounds[3],\n step5: backgrounds[4],\n step6: backgrounds[5],\n step7: backgrounds[6],\n step8: backgrounds[7],\n step9: backgrounds[8],\n step10: backgrounds[9],\n step11: backgrounds[10],\n step12: backgrounds[11],\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 // for now web non-ios style native is...\n backgroundStrong: isWeb ? '#fefefe' : '#f2f2f2',\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: '#000',\n isBase: true,\n isLight: false,\n shift: 1,\n offsets: {\n color: [0, 4, 5, 5, 5, 5],\n },\n})\n\ndarkThemes.dark_darker.background = '#030303'\ndarkThemes.dark_darker.backgroundStrong = '#000'\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_alt1,\n light_SliderTrack: lightThemes.light_alt2,\n light_SliderTrackActive: lightThemes.light_alt3,\n light_Switch: lightThemes.light_alt1,\n light_SwitchThumb: darkThemes.dark,\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_alt2,\n dark_SliderTrack: darkThemes.dark_darker,\n dark_SliderTrackActive: darkThemes.dark_alt3,\n dark_Switch: darkThemes.dark_darker,\n // dark_SwitchThumb: darkThemes.dark_alt2,\n dark_SwitchThumb: lightThemes.light_alt3,\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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
|
|
4
|
+
"sourcesContent": ["import { Variable, createTheme, getVariableValue, isWeb } 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 (process.env.ENABLE_STEPS) {\n Object.assign(theme, {\n step1: backgrounds[0],\n step2: backgrounds[1],\n step3: backgrounds[2],\n step4: backgrounds[3],\n step5: backgrounds[4],\n step6: backgrounds[5],\n step7: backgrounds[6],\n step8: backgrounds[7],\n step9: backgrounds[8],\n step10: backgrounds[9],\n step11: backgrounds[10],\n step12: backgrounds[11],\n })\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 // for now web non-ios style native is...\n backgroundStrong: isWeb ? '#fefefe' : '#f2f2f2',\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: '#000',\n isBase: true,\n isLight: false,\n shift: 1,\n offsets: {\n color: [0, 4, 5, 5, 5, 5],\n },\n})\n\ndarkThemes.dark_darker.background = '#030303'\ndarkThemes.dark_darker.backgroundStrong = '#000'\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_alt1,\n light_SliderTrack: lightThemes.light_alt2,\n light_SliderTrackActive: lightThemes.light_alt3,\n light_Switch: lightThemes.light_alt1,\n light_SwitchThumb: darkThemes.dark,\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_alt2,\n dark_SliderTrack: darkThemes.dark_darker,\n dark_SliderTrackActive: darkThemes.dark_alt3,\n dark_Switch: darkThemes.dark_darker,\n // dark_SwitchThumb: darkThemes.dark_alt2,\n dark_SwitchThumb: lightThemes.light_alt3,\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/esm/themes.js
CHANGED
|
@@ -118,20 +118,24 @@ const themeCreator = (str = 1, {
|
|
|
118
118
|
borderColor: null,
|
|
119
119
|
borderColorHover: null,
|
|
120
120
|
borderColorPress: null,
|
|
121
|
-
borderColorFocus: null
|
|
122
|
-
step1: backgrounds[0],
|
|
123
|
-
step2: backgrounds[1],
|
|
124
|
-
step3: backgrounds[2],
|
|
125
|
-
step4: backgrounds[3],
|
|
126
|
-
step5: backgrounds[4],
|
|
127
|
-
step6: backgrounds[5],
|
|
128
|
-
step7: backgrounds[6],
|
|
129
|
-
step8: backgrounds[7],
|
|
130
|
-
step9: backgrounds[8],
|
|
131
|
-
step10: backgrounds[9],
|
|
132
|
-
step11: backgrounds[10],
|
|
133
|
-
step12: backgrounds[11]
|
|
121
|
+
borderColorFocus: null
|
|
134
122
|
};
|
|
123
|
+
if (process.env.ENABLE_STEPS) {
|
|
124
|
+
Object.assign(theme, {
|
|
125
|
+
step1: backgrounds[0],
|
|
126
|
+
step2: backgrounds[1],
|
|
127
|
+
step3: backgrounds[2],
|
|
128
|
+
step4: backgrounds[3],
|
|
129
|
+
step5: backgrounds[4],
|
|
130
|
+
step6: backgrounds[5],
|
|
131
|
+
step7: backgrounds[6],
|
|
132
|
+
step8: backgrounds[7],
|
|
133
|
+
step9: backgrounds[8],
|
|
134
|
+
step10: backgrounds[9],
|
|
135
|
+
step11: backgrounds[10],
|
|
136
|
+
step12: backgrounds[11]
|
|
137
|
+
});
|
|
138
|
+
}
|
|
135
139
|
if (isBase) {
|
|
136
140
|
Object.assign(theme, {
|
|
137
141
|
borderColor: isLight ? get(colors, 8 - str, "borderColor") : get(backgrounds, 2 + str, "borderColor"),
|
package/dist/esm/themes.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/themes.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Variable, createTheme, getVariableValue, isWeb } 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 step1: backgrounds[0],\n step2: backgrounds[1],\n step3: backgrounds[2],\n step4: backgrounds[3],\n step5: backgrounds[4],\n step6: backgrounds[5],\n step7: backgrounds[6],\n step8: backgrounds[7],\n step9: backgrounds[8],\n step10: backgrounds[9],\n step11: backgrounds[10],\n step12: backgrounds[11],\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 // for now web non-ios style native is...\n backgroundStrong: isWeb ? '#fefefe' : '#f2f2f2',\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: '#000',\n isBase: true,\n isLight: false,\n shift: 1,\n offsets: {\n color: [0, 4, 5, 5, 5, 5],\n },\n})\n\ndarkThemes.dark_darker.background = '#030303'\ndarkThemes.dark_darker.backgroundStrong = '#000'\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_alt1,\n light_SliderTrack: lightThemes.light_alt2,\n light_SliderTrackActive: lightThemes.light_alt3,\n light_Switch: lightThemes.light_alt1,\n light_SwitchThumb: darkThemes.dark,\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_alt2,\n dark_SliderTrack: darkThemes.dark_darker,\n dark_SliderTrackActive: darkThemes.dark_alt3,\n dark_Switch: darkThemes.dark_darker,\n // dark_SwitchThumb: darkThemes.dark_alt2,\n dark_SwitchThumb: lightThemes.light_alt3,\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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
|
|
4
|
+
"sourcesContent": ["import { Variable, createTheme, getVariableValue, isWeb } 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 (process.env.ENABLE_STEPS) {\n Object.assign(theme, {\n step1: backgrounds[0],\n step2: backgrounds[1],\n step3: backgrounds[2],\n step4: backgrounds[3],\n step5: backgrounds[4],\n step6: backgrounds[5],\n step7: backgrounds[6],\n step8: backgrounds[7],\n step9: backgrounds[8],\n step10: backgrounds[9],\n step11: backgrounds[10],\n step12: backgrounds[11],\n })\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 // for now web non-ios style native is...\n backgroundStrong: isWeb ? '#fefefe' : '#f2f2f2',\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: '#000',\n isBase: true,\n isLight: false,\n shift: 1,\n offsets: {\n color: [0, 4, 5, 5, 5, 5],\n },\n})\n\ndarkThemes.dark_darker.background = '#030303'\ndarkThemes.dark_darker.backgroundStrong = '#000'\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_alt1,\n light_SliderTrack: lightThemes.light_alt2,\n light_SliderTrackActive: lightThemes.light_alt3,\n light_Switch: lightThemes.light_alt1,\n light_SwitchThumb: darkThemes.dark,\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_alt2,\n dark_SliderTrack: darkThemes.dark_darker,\n dark_SliderTrackActive: darkThemes.dark_alt3,\n dark_Switch: darkThemes.dark_darker,\n // dark_SwitchThumb: darkThemes.dark_alt2,\n dark_SwitchThumb: lightThemes.light_alt3,\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/jsx/colorUtils.js
CHANGED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/colorUtils.tsx"],
|
|
4
|
+
"sourcesContent": ["import { Variable, getVariableValue } from '@tamagui/core'\n\nexport const hexToRGBA = (hex: string, alpha = 1) => {\n if (!isValidHex(hex)) {\n throw new Error('Invalid HEX')\n }\n const chunkSize = Math.floor((hex.length - 1) / 3)\n const hexArr = getChunksFromString(hex.slice(1), chunkSize)\n const [r, g, b, a] = hexArr?.map(convertHexUnitTo256) ?? []\n return `rgba(${r}, ${g}, ${b}, ${getAlphaFloat(a, alpha)})`\n}\n\nexport const setColorAlpha = (colorIn: string | Variable, alpha = 1) => {\n let color = `${getVariableValue(colorIn)}`\n if (color.startsWith('hsl(')) {\n return color.replace('hsl', 'hsla').replace(')', `, ${alpha})`)\n }\n if (color.startsWith('#')) {\n return hexToRGBA(color, alpha)\n }\n if (color.startsWith('rgb(')) {\n return color.replace('rgb', 'rgba').replace(')', `, ${alpha})`)\n }\n return color\n}\n\nconst isValidHex = (hex: string) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex)\n\nconst getChunksFromString = (st: string, chunkSize = 0) =>\n st.match(new RegExp(`.{${chunkSize}}`, 'g'))\n\nconst convertHexUnitTo256 = (hexStr: string) => parseInt(hexStr.repeat(2 / hexStr.length), 16)\n\nconst getAlphaFloat = (a: any, alpha = 1) => {\n if (a !== undefined) {\n return a / 255\n }\n if (typeof alpha != 'number' || alpha < 0 || alpha > 1) {\n return 1\n }\n return alpha\n}\n"],
|
|
5
|
+
"mappings": "AAAA;AAEO,MAAM,YAAY,CAAC,KAAa,QAAQ,MAAM;AAFrD;AAGE,MAAI,CAAC,WAAW,GAAG,GAAG;AACpB,UAAM,IAAI,MAAM,aAAa;AAAA,EAC/B;AACA,QAAM,YAAY,KAAK,MAAO,KAAI,SAAS,KAAK,CAAC;AACjD,QAAM,SAAS,oBAAoB,IAAI,MAAM,CAAC,GAAG,SAAS;AAC1D,QAAM,CAAC,GAAG,GAAG,GAAG,KAAK,uCAAQ,IAAI,yBAAZ,YAAoC,CAAC;AAC1D,SAAO,QAAQ,MAAM,MAAM,MAAM,cAAc,GAAG,KAAK;AACzD;AAEO,MAAM,gBAAgB,CAAC,SAA4B,QAAQ,MAAM;AACtE,MAAI,QAAQ,GAAG,iBAAiB,OAAO;AACvC,MAAI,MAAM,WAAW,MAAM,GAAG;AAC5B,WAAO,MAAM,QAAQ,OAAO,MAAM,EAAE,QAAQ,KAAK,KAAK,QAAQ;AAAA,EAChE;AACA,MAAI,MAAM,WAAW,GAAG,GAAG;AACzB,WAAO,UAAU,OAAO,KAAK;AAAA,EAC/B;AACA,MAAI,MAAM,WAAW,MAAM,GAAG;AAC5B,WAAO,MAAM,QAAQ,OAAO,MAAM,EAAE,QAAQ,KAAK,KAAK,QAAQ;AAAA,EAChE;AACA,SAAO;AACT;AAEA,MAAM,aAAa,CAAC,QAAgB,6BAA6B,KAAK,GAAG;AAEzE,MAAM,sBAAsB,CAAC,IAAY,YAAY,MACnD,GAAG,MAAM,IAAI,OAAO,KAAK,cAAc,GAAG,CAAC;AAE7C,MAAM,sBAAsB,CAAC,WAAmB,SAAS,OAAO,OAAO,IAAI,OAAO,MAAM,GAAG,EAAE;AAE7F,MAAM,gBAAgB,CAAC,GAAQ,QAAQ,MAAM;AAC3C,MAAI,MAAM,QAAW;AACnB,WAAO,IAAI;AAAA,EACb;AACA,MAAI,OAAO,SAAS,YAAY,QAAQ,KAAK,QAAQ,GAAG;AACtD,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/jsx/index.js
CHANGED
package/dist/jsx/themes.js
CHANGED
|
@@ -101,20 +101,24 @@ const themeCreator = (str = 1, {
|
|
|
101
101
|
borderColor: null,
|
|
102
102
|
borderColorHover: null,
|
|
103
103
|
borderColorPress: null,
|
|
104
|
-
borderColorFocus: null
|
|
105
|
-
step1: backgrounds[0],
|
|
106
|
-
step2: backgrounds[1],
|
|
107
|
-
step3: backgrounds[2],
|
|
108
|
-
step4: backgrounds[3],
|
|
109
|
-
step5: backgrounds[4],
|
|
110
|
-
step6: backgrounds[5],
|
|
111
|
-
step7: backgrounds[6],
|
|
112
|
-
step8: backgrounds[7],
|
|
113
|
-
step9: backgrounds[8],
|
|
114
|
-
step10: backgrounds[9],
|
|
115
|
-
step11: backgrounds[10],
|
|
116
|
-
step12: backgrounds[11]
|
|
104
|
+
borderColorFocus: null
|
|
117
105
|
};
|
|
106
|
+
if (process.env.ENABLE_STEPS) {
|
|
107
|
+
Object.assign(theme, {
|
|
108
|
+
step1: backgrounds[0],
|
|
109
|
+
step2: backgrounds[1],
|
|
110
|
+
step3: backgrounds[2],
|
|
111
|
+
step4: backgrounds[3],
|
|
112
|
+
step5: backgrounds[4],
|
|
113
|
+
step6: backgrounds[5],
|
|
114
|
+
step7: backgrounds[6],
|
|
115
|
+
step8: backgrounds[7],
|
|
116
|
+
step9: backgrounds[8],
|
|
117
|
+
step10: backgrounds[9],
|
|
118
|
+
step11: backgrounds[10],
|
|
119
|
+
step12: backgrounds[11]
|
|
120
|
+
});
|
|
121
|
+
}
|
|
118
122
|
if (isBase) {
|
|
119
123
|
Object.assign(theme, {
|
|
120
124
|
borderColor: isLight ? get(colors, 8 - str, "borderColor") : get(backgrounds, 2 + str, "borderColor"),
|
|
@@ -289,3 +293,4 @@ export {
|
|
|
289
293
|
colorSchemes,
|
|
290
294
|
themes
|
|
291
295
|
};
|
|
296
|
+
//# sourceMappingURL=themes.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/themes.tsx"],
|
|
4
|
+
"sourcesContent": ["import { Variable, createTheme, getVariableValue, isWeb } 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 (process.env.ENABLE_STEPS) {\n Object.assign(theme, {\n step1: backgrounds[0],\n step2: backgrounds[1],\n step3: backgrounds[2],\n step4: backgrounds[3],\n step5: backgrounds[4],\n step6: backgrounds[5],\n step7: backgrounds[6],\n step8: backgrounds[7],\n step9: backgrounds[8],\n step10: backgrounds[9],\n step11: backgrounds[10],\n step12: backgrounds[11],\n })\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 // for now web non-ios style native is...\n backgroundStrong: isWeb ? '#fefefe' : '#f2f2f2',\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: '#000',\n isBase: true,\n isLight: false,\n shift: 1,\n offsets: {\n color: [0, 4, 5, 5, 5, 5],\n },\n})\n\ndarkThemes.dark_darker.background = '#030303'\ndarkThemes.dark_darker.backgroundStrong = '#000'\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_alt1,\n light_SliderTrack: lightThemes.light_alt2,\n light_SliderTrackActive: lightThemes.light_alt3,\n light_Switch: lightThemes.light_alt1,\n light_SwitchThumb: darkThemes.dark,\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_alt2,\n dark_SliderTrack: darkThemes.dark_darker,\n dark_SliderTrackActive: darkThemes.dark_alt3,\n dark_Switch: darkThemes.dark_darker,\n // dark_SwitchThumb: darkThemes.dark_alt2,\n dark_SwitchThumb: lightThemes.light_alt3,\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
|
+
"names": []
|
|
7
|
+
}
|
package/dist/jsx/tokens.js
CHANGED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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 } 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
|
+
"names": []
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/theme-base",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.79",
|
|
4
4
|
"types": "./types/index.d.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -17,11 +17,11 @@
|
|
|
17
17
|
"clean:build": "tamagui-build clean:build"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@tamagui/colors": "^1.0.1-beta.
|
|
21
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
20
|
+
"@tamagui/colors": "^1.0.1-beta.79",
|
|
21
|
+
"@tamagui/core": "^1.0.1-beta.79"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
24
|
+
"@tamagui/build": "^1.0.1-beta.79"
|
|
25
25
|
},
|
|
26
26
|
"publishConfig": {
|
|
27
27
|
"access": "public"
|
package/src/themes.tsx
CHANGED
|
@@ -153,18 +153,23 @@ const themeCreator = (
|
|
|
153
153
|
borderColorHover: null as any as string | Variable,
|
|
154
154
|
borderColorPress: null as any as string | Variable,
|
|
155
155
|
borderColorFocus: null as any as string | Variable,
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
if (process.env.ENABLE_STEPS) {
|
|
159
|
+
Object.assign(theme, {
|
|
160
|
+
step1: backgrounds[0],
|
|
161
|
+
step2: backgrounds[1],
|
|
162
|
+
step3: backgrounds[2],
|
|
163
|
+
step4: backgrounds[3],
|
|
164
|
+
step5: backgrounds[4],
|
|
165
|
+
step6: backgrounds[5],
|
|
166
|
+
step7: backgrounds[6],
|
|
167
|
+
step8: backgrounds[7],
|
|
168
|
+
step9: backgrounds[8],
|
|
169
|
+
step10: backgrounds[9],
|
|
170
|
+
step11: backgrounds[10],
|
|
171
|
+
step12: backgrounds[11],
|
|
172
|
+
})
|
|
168
173
|
}
|
|
169
174
|
|
|
170
175
|
if (isBase) {
|