@tamagui/theme-base 1.0.1-beta.103 → 1.0.1-beta.106
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 -17
- package/dist/cjs/themes.js.map +2 -2
- package/dist/esm/themes.js +17 -17
- package/dist/esm/themes.js.map +2 -2
- package/dist/jsx/themes.js +17 -18
- package/dist/jsx/themes.js.map +2 -2
- package/package.json +4 -4
- package/src/themes.tsx +19 -21
- package/types/themes.d.ts +44 -44
- package/types/themes.d.ts.map +1 -1
- package/types/tokens.d.ts +18 -18
package/dist/cjs/themes.js
CHANGED
|
@@ -62,9 +62,12 @@ function createThemesFrom(name, getTheme, props) {
|
|
|
62
62
|
return [`${bName}_Button`, bTheme];
|
|
63
63
|
});
|
|
64
64
|
const darkerTheme = getTheme(Math.max(0, shift + (props.isLight ? 1 : -1)), props);
|
|
65
|
-
const activeTheme = props.activeTheme ||
|
|
66
|
-
|
|
67
|
-
|
|
65
|
+
const activeTheme = props.activeTheme || __spreadProps(__spreadValues({}, theme), {
|
|
66
|
+
borderColor: props.backgrounds[7],
|
|
67
|
+
background: props.backgrounds[6],
|
|
68
|
+
backgroundHover: props.backgrounds[6],
|
|
69
|
+
backgroundPress: props.backgrounds[6]
|
|
70
|
+
});
|
|
68
71
|
const inverted = altThemes.map(([_name, theme2]) => {
|
|
69
72
|
return __spreadProps(__spreadValues({}, theme2), {
|
|
70
73
|
background: theme2.color,
|
|
@@ -311,20 +314,17 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors: dark
|
|
|
311
314
|
return [...altLightThemes, ...altDarkThemes];
|
|
312
315
|
});
|
|
313
316
|
const colorThemes = Object.fromEntries(colorThemeEntries);
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
baseThemes.light_active = makeActiveTheme(__spreadProps(__spreadValues({}, colorThemes.light_blue_alt3), {
|
|
326
|
-
background: import_tokens.darkColors.blue10
|
|
327
|
-
}));
|
|
317
|
+
baseThemes.dark_active = __spreadProps(__spreadValues({}, colorThemes.dark_blue_alt3), {
|
|
318
|
+
background: import_tokens.darkColors.blue10,
|
|
319
|
+
backgroundHover: import_tokens.darkColors.blue11,
|
|
320
|
+
backgroundPress: import_tokens.darkColors.blue9,
|
|
321
|
+
backgroundFocus: import_tokens.darkColors.blue9,
|
|
322
|
+
color: import_tokens.darkColors.blue12,
|
|
323
|
+
colorHover: import_tokens.darkColors.blue12,
|
|
324
|
+
colorPress: import_tokens.darkColors.blue12,
|
|
325
|
+
colorFocus: import_tokens.darkColors.blue12
|
|
326
|
+
});
|
|
327
|
+
baseThemes.light_active = baseThemes.dark_active;
|
|
328
328
|
const allThemes = __spreadValues(__spreadValues({}, baseThemes), colorThemes);
|
|
329
329
|
const themes = allThemes;
|
|
330
330
|
// Annotate the CommonJS export names for ESM import in node:
|
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 activeTheme?: any\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 * 1 + 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 =\n props.activeTheme ||\n makeActiveTheme({\n ...theme,\n background: props.backgrounds[5],\n })\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[2][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 const 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 offsets: {\n background: [2, 2, 2, 2, 2, 2],\n },\n})\n\nconst darkThemes = createThemesFrom('dark', themeCreator, {\n backgrounds: themeColors.dark,\n colors: themeColors.light.slice(2),\n backgroundStrong: '#070707',\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 // reserving in types, updating later\n light_active: lightThemes.light,\n light_Card: lightThemes.light,\n light_SliderTrack: lightThemes.light_alt2,\n light_SliderTrackActive: lightThemes.light_alt3,\n light_Switch: lightThemes.light_alt3,\n light_SwitchThumb: lightThemes.light,\n light_DrawerFrame: lightThemes.light_alt1,\n\n // dark\n ...darkThemes,\n dark,\n // reserving in types, updating later\n dark_active: 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_alt3,\n dark_SwitchThumb: darkThemes.dark_darker,\n dark_Button: darkThemes.dark_alt1,\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\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\n// add in base _active themes\nbaseThemes.dark_active = makeActiveTheme({\n ...colorThemes.dark_blue_alt3,\n background: darkColors.blue10,\n})\nbaseThemes.light_active = makeActiveTheme({\n ...colorThemes.light_blue_alt3,\n background: darkColors.blue10,\n})\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA+D;AAE/D,wBAA8B;AAC9B,oBAAgD;AAEhD,MAAM,EAAE,UAAU;AAsBlB,MAAM,aAAa,CAAC,GAAG,GAAG,GAAG,CAAC;AAC9B,MAAM,OAAO,CAAC,GAAG,GAAG,CAAC;AAKrB,0BACE,MACA,UACA,OAOA;AACA,QAAM,EAAE,QAAQ,MAAM;AACtB,QAAM,QAAQ,SAAS,IAAI,OAAO,KAAK;AACvC,MAAI,eAAsB,CAAC,CAAC,MAAM,KAAK,CAAC;AAGxC,QAAM,YAAmB,WAAW,IAAI,CAAC,QAAQ;AAAA,IAC/C,GAAG,WAAW;AAAA,IACd,SAAS,MAAM,IAAI,OAAO,KAAK;AAAA,EACjC,CAAC;AACD,QAAM,aAAoB,WAAW,IAAI,CAAC,QAAQ;AAAA,IAChD,GAAG,WAAW;AAAA,IACd,SAAS,MAAM,OAAO,KAAK;AAAA,EAC7B,CAAC;AACD,QAAM,kBAAyB,WAAW,IAAI,CAAC,GAAG,MAAM;AACtD,UAAM,CAAC,OAAO,UAAU,CAAC,WAAW,GAAG,IAAK,YAAW,IAAI,MAAM,WAAW,IAAI,EAAE;AAClF,WAAO,CAAC,GAAG,gBAAuB,MAAM;AAAA,EAC1C,CAAC;AAED,QAAM,cAAc,SAAS,KAAK,IAAI,GAAG,QAAS,OAAM,UAAU,IAAI,GAAG,GAAG,KAAK;AACjF,QAAM,
|
|
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 activeTheme?: any\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 * 1 + 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 = props.activeTheme || {\n ...theme,\n borderColor: props.backgrounds[7],\n background: props.backgrounds[6],\n backgroundHover: props.backgrounds[6],\n backgroundPress: props.backgrounds[6],\n }\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[2][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 const 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 offsets: {\n background: [2, 2, 2, 2, 2, 2],\n },\n})\n\nconst darkThemes = createThemesFrom('dark', themeCreator, {\n backgrounds: themeColors.dark,\n colors: themeColors.light.slice(2),\n backgroundStrong: '#070707',\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 // reserving in types, updating later\n light_active: lightThemes.light,\n light_Card: lightThemes.light,\n light_SliderTrack: lightThemes.light_alt2,\n light_SliderTrackActive: lightThemes.light_alt3,\n light_Switch: lightThemes.light_alt3,\n light_SwitchThumb: lightThemes.light,\n light_DrawerFrame: lightThemes.light_alt1,\n\n // dark\n ...darkThemes,\n dark,\n // reserving in types, updating later\n dark_active: 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_alt3,\n dark_SwitchThumb: darkThemes.dark_darker,\n dark_Button: darkThemes.dark_alt1,\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\n// add in base _active themes\nbaseThemes.dark_active = {\n ...colorThemes.dark_blue_alt3,\n background: darkColors.blue10,\n backgroundHover: darkColors.blue11,\n backgroundPress: darkColors.blue9,\n backgroundFocus: darkColors.blue9,\n color: darkColors.blue12,\n colorHover: darkColors.blue12,\n colorPress: darkColors.blue12,\n colorFocus: darkColors.blue12,\n}\n\n// light active uses light foregound, ios style\nbaseThemes.light_active = baseThemes.dark_active\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
|
@@ -40,9 +40,12 @@ function createThemesFrom(name, getTheme, props) {
|
|
|
40
40
|
return [`${bName}_Button`, bTheme];
|
|
41
41
|
});
|
|
42
42
|
const darkerTheme = getTheme(Math.max(0, shift + (props.isLight ? 1 : -1)), props);
|
|
43
|
-
const activeTheme = props.activeTheme ||
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
const activeTheme = props.activeTheme || __spreadProps(__spreadValues({}, theme), {
|
|
44
|
+
borderColor: props.backgrounds[7],
|
|
45
|
+
background: props.backgrounds[6],
|
|
46
|
+
backgroundHover: props.backgrounds[6],
|
|
47
|
+
backgroundPress: props.backgrounds[6]
|
|
48
|
+
});
|
|
46
49
|
const inverted = altThemes.map(([_name, theme2]) => {
|
|
47
50
|
return __spreadProps(__spreadValues({}, theme2), {
|
|
48
51
|
background: theme2.color,
|
|
@@ -289,20 +292,17 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors: dark
|
|
|
289
292
|
return [...altLightThemes, ...altDarkThemes];
|
|
290
293
|
});
|
|
291
294
|
const colorThemes = Object.fromEntries(colorThemeEntries);
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
baseThemes.light_active = makeActiveTheme(__spreadProps(__spreadValues({}, colorThemes.light_blue_alt3), {
|
|
304
|
-
background: darkColors.blue10
|
|
305
|
-
}));
|
|
295
|
+
baseThemes.dark_active = __spreadProps(__spreadValues({}, colorThemes.dark_blue_alt3), {
|
|
296
|
+
background: darkColors.blue10,
|
|
297
|
+
backgroundHover: darkColors.blue11,
|
|
298
|
+
backgroundPress: darkColors.blue9,
|
|
299
|
+
backgroundFocus: darkColors.blue9,
|
|
300
|
+
color: darkColors.blue12,
|
|
301
|
+
colorHover: darkColors.blue12,
|
|
302
|
+
colorPress: darkColors.blue12,
|
|
303
|
+
colorFocus: darkColors.blue12
|
|
304
|
+
});
|
|
305
|
+
baseThemes.light_active = baseThemes.dark_active;
|
|
306
306
|
const allThemes = __spreadValues(__spreadValues({}, baseThemes), colorThemes);
|
|
307
307
|
const themes = allThemes;
|
|
308
308
|
export {
|
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 activeTheme?: any\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 * 1 + 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 =\n props.activeTheme ||\n makeActiveTheme({\n ...theme,\n background: props.backgrounds[5],\n })\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[2][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 const 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 offsets: {\n background: [2, 2, 2, 2, 2, 2],\n },\n})\n\nconst darkThemes = createThemesFrom('dark', themeCreator, {\n backgrounds: themeColors.dark,\n colors: themeColors.light.slice(2),\n backgroundStrong: '#070707',\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 // reserving in types, updating later\n light_active: lightThemes.light,\n light_Card: lightThemes.light,\n light_SliderTrack: lightThemes.light_alt2,\n light_SliderTrackActive: lightThemes.light_alt3,\n light_Switch: lightThemes.light_alt3,\n light_SwitchThumb: lightThemes.light,\n light_DrawerFrame: lightThemes.light_alt1,\n\n // dark\n ...darkThemes,\n dark,\n // reserving in types, updating later\n dark_active: 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_alt3,\n dark_SwitchThumb: darkThemes.dark_darker,\n dark_Button: darkThemes.dark_alt1,\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\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\n// add in base _active themes\nbaseThemes.dark_active = makeActiveTheme({\n ...colorThemes.dark_blue_alt3,\n background: darkColors.blue10,\n})\nbaseThemes.light_active = makeActiveTheme({\n ...colorThemes.light_blue_alt3,\n background: darkColors.blue10,\n})\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": ";;;;;;;;;;;;;;;;;;;AAAA;AAEA;AACA;AAEA,MAAM,EAAE,UAAU;AAsBlB,MAAM,aAAa,CAAC,GAAG,GAAG,GAAG,CAAC;AAC9B,MAAM,OAAO,CAAC,GAAG,GAAG,CAAC;AAKrB,0BACE,MACA,UACA,OAOA;AACA,QAAM,EAAE,QAAQ,MAAM;AACtB,QAAM,QAAQ,SAAS,IAAI,OAAO,KAAK;AACvC,MAAI,eAAsB,CAAC,CAAC,MAAM,KAAK,CAAC;AAGxC,QAAM,YAAmB,WAAW,IAAI,CAAC,QAAQ;AAAA,IAC/C,GAAG,WAAW;AAAA,IACd,SAAS,MAAM,IAAI,OAAO,KAAK;AAAA,EACjC,CAAC;AACD,QAAM,aAAoB,WAAW,IAAI,CAAC,QAAQ;AAAA,IAChD,GAAG,WAAW;AAAA,IACd,SAAS,MAAM,OAAO,KAAK;AAAA,EAC7B,CAAC;AACD,QAAM,kBAAyB,WAAW,IAAI,CAAC,GAAG,MAAM;AACtD,UAAM,CAAC,OAAO,UAAU,CAAC,WAAW,GAAG,IAAK,YAAW,IAAI,MAAM,WAAW,IAAI,EAAE;AAClF,WAAO,CAAC,GAAG,gBAAuB,MAAM;AAAA,EAC1C,CAAC;AAED,QAAM,cAAc,SAAS,KAAK,IAAI,GAAG,QAAS,OAAM,UAAU,IAAI,GAAG,GAAG,KAAK;AACjF,QAAM,
|
|
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 activeTheme?: any\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 * 1 + 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 = props.activeTheme || {\n ...theme,\n borderColor: props.backgrounds[7],\n background: props.backgrounds[6],\n backgroundHover: props.backgrounds[6],\n backgroundPress: props.backgrounds[6],\n }\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[2][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 const 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 offsets: {\n background: [2, 2, 2, 2, 2, 2],\n },\n})\n\nconst darkThemes = createThemesFrom('dark', themeCreator, {\n backgrounds: themeColors.dark,\n colors: themeColors.light.slice(2),\n backgroundStrong: '#070707',\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 // reserving in types, updating later\n light_active: lightThemes.light,\n light_Card: lightThemes.light,\n light_SliderTrack: lightThemes.light_alt2,\n light_SliderTrackActive: lightThemes.light_alt3,\n light_Switch: lightThemes.light_alt3,\n light_SwitchThumb: lightThemes.light,\n light_DrawerFrame: lightThemes.light_alt1,\n\n // dark\n ...darkThemes,\n dark,\n // reserving in types, updating later\n dark_active: 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_alt3,\n dark_SwitchThumb: darkThemes.dark_darker,\n dark_Button: darkThemes.dark_alt1,\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\n// add in base _active themes\nbaseThemes.dark_active = {\n ...colorThemes.dark_blue_alt3,\n background: darkColors.blue10,\n backgroundHover: darkColors.blue11,\n backgroundPress: darkColors.blue9,\n backgroundFocus: darkColors.blue9,\n color: darkColors.blue12,\n colorHover: darkColors.blue12,\n colorPress: darkColors.blue12,\n colorFocus: darkColors.blue12,\n}\n\n// light active uses light foregound, ios style\nbaseThemes.light_active = baseThemes.dark_active\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/themes.js
CHANGED
|
@@ -21,10 +21,13 @@ function createThemesFrom(name, getTheme, props) {
|
|
|
21
21
|
return [`${bName}_Button`, bTheme];
|
|
22
22
|
});
|
|
23
23
|
const darkerTheme = getTheme(Math.max(0, shift + (props.isLight ? 1 : -1)), props);
|
|
24
|
-
const activeTheme = props.activeTheme ||
|
|
24
|
+
const activeTheme = props.activeTheme || {
|
|
25
25
|
...theme,
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
borderColor: props.backgrounds[7],
|
|
27
|
+
background: props.backgrounds[6],
|
|
28
|
+
backgroundHover: props.backgrounds[6],
|
|
29
|
+
backgroundPress: props.backgrounds[6]
|
|
30
|
+
};
|
|
28
31
|
const inverted = altThemes.map(([_name, theme2]) => {
|
|
29
32
|
return {
|
|
30
33
|
...theme2,
|
|
@@ -280,22 +283,18 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors: dark
|
|
|
280
283
|
return [...altLightThemes, ...altDarkThemes];
|
|
281
284
|
});
|
|
282
285
|
const colorThemes = Object.fromEntries(colorThemeEntries);
|
|
283
|
-
|
|
284
|
-
const res = { ...theme };
|
|
285
|
-
res.backgroundHover = res.background;
|
|
286
|
-
res.colorHover = res.color;
|
|
287
|
-
res.backgroundPress = res.background;
|
|
288
|
-
res.colorPress = res.color;
|
|
289
|
-
return res;
|
|
290
|
-
}
|
|
291
|
-
baseThemes.dark_active = makeActiveTheme({
|
|
286
|
+
baseThemes.dark_active = {
|
|
292
287
|
...colorThemes.dark_blue_alt3,
|
|
293
|
-
background: darkColors.blue10
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
288
|
+
background: darkColors.blue10,
|
|
289
|
+
backgroundHover: darkColors.blue11,
|
|
290
|
+
backgroundPress: darkColors.blue9,
|
|
291
|
+
backgroundFocus: darkColors.blue9,
|
|
292
|
+
color: darkColors.blue12,
|
|
293
|
+
colorHover: darkColors.blue12,
|
|
294
|
+
colorPress: darkColors.blue12,
|
|
295
|
+
colorFocus: darkColors.blue12
|
|
296
|
+
};
|
|
297
|
+
baseThemes.light_active = baseThemes.dark_active;
|
|
299
298
|
const allThemes = {
|
|
300
299
|
...baseThemes,
|
|
301
300
|
...colorThemes
|
package/dist/jsx/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 activeTheme?: any\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 * 1 + 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 =\n props.activeTheme ||\n makeActiveTheme({\n ...theme,\n background: props.backgrounds[5],\n })\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[2][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 const 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 offsets: {\n background: [2, 2, 2, 2, 2, 2],\n },\n})\n\nconst darkThemes = createThemesFrom('dark', themeCreator, {\n backgrounds: themeColors.dark,\n colors: themeColors.light.slice(2),\n backgroundStrong: '#070707',\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 // reserving in types, updating later\n light_active: lightThemes.light,\n light_Card: lightThemes.light,\n light_SliderTrack: lightThemes.light_alt2,\n light_SliderTrackActive: lightThemes.light_alt3,\n light_Switch: lightThemes.light_alt3,\n light_SwitchThumb: lightThemes.light,\n light_DrawerFrame: lightThemes.light_alt1,\n\n // dark\n ...darkThemes,\n dark,\n // reserving in types, updating later\n dark_active: 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_alt3,\n dark_SwitchThumb: darkThemes.dark_darker,\n dark_Button: darkThemes.dark_alt1,\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\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\n// add in base _active themes\nbaseThemes.dark_active = makeActiveTheme({\n ...colorThemes.dark_blue_alt3,\n background: darkColors.blue10,\n})\nbaseThemes.light_active = makeActiveTheme({\n ...colorThemes.light_blue_alt3,\n background: darkColors.blue10,\n})\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": "AAAA;AAEA;AACA;AAEA,MAAM,EAAE,UAAU;AAsBlB,MAAM,aAAa,CAAC,GAAG,GAAG,GAAG,CAAC;AAC9B,MAAM,OAAO,CAAC,GAAG,GAAG,CAAC;AAKrB,0BACE,MACA,UACA,OAOA;AACA,QAAM,EAAE,QAAQ,MAAM;AACtB,QAAM,QAAQ,SAAS,IAAI,OAAO,KAAK;AACvC,MAAI,eAAsB,CAAC,CAAC,MAAM,KAAK,CAAC;AAGxC,QAAM,YAAmB,WAAW,IAAI,CAAC,QAAQ;AAAA,IAC/C,GAAG,WAAW;AAAA,IACd,SAAS,MAAM,IAAI,OAAO,KAAK;AAAA,EACjC,CAAC;AACD,QAAM,aAAoB,WAAW,IAAI,CAAC,QAAQ;AAAA,IAChD,GAAG,WAAW;AAAA,IACd,SAAS,MAAM,OAAO,KAAK;AAAA,EAC7B,CAAC;AACD,QAAM,kBAAyB,WAAW,IAAI,CAAC,GAAG,MAAM;AACtD,UAAM,CAAC,OAAO,UAAU,CAAC,WAAW,GAAG,IAAK,YAAW,IAAI,MAAM,WAAW,IAAI,EAAE;AAClF,WAAO,CAAC,GAAG,gBAAuB,MAAM;AAAA,EAC1C,CAAC;AAED,QAAM,cAAc,SAAS,KAAK,IAAI,GAAG,QAAS,OAAM,UAAU,IAAI,GAAG,GAAG,KAAK;AACjF,QAAM,
|
|
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 activeTheme?: any\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 * 1 + 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 = props.activeTheme || {\n ...theme,\n borderColor: props.backgrounds[7],\n background: props.backgrounds[6],\n backgroundHover: props.backgrounds[6],\n backgroundPress: props.backgrounds[6],\n }\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[2][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 const 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 offsets: {\n background: [2, 2, 2, 2, 2, 2],\n },\n})\n\nconst darkThemes = createThemesFrom('dark', themeCreator, {\n backgrounds: themeColors.dark,\n colors: themeColors.light.slice(2),\n backgroundStrong: '#070707',\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 // reserving in types, updating later\n light_active: lightThemes.light,\n light_Card: lightThemes.light,\n light_SliderTrack: lightThemes.light_alt2,\n light_SliderTrackActive: lightThemes.light_alt3,\n light_Switch: lightThemes.light_alt3,\n light_SwitchThumb: lightThemes.light,\n light_DrawerFrame: lightThemes.light_alt1,\n\n // dark\n ...darkThemes,\n dark,\n // reserving in types, updating later\n dark_active: 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_alt3,\n dark_SwitchThumb: darkThemes.dark_darker,\n dark_Button: darkThemes.dark_alt1,\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\n// add in base _active themes\nbaseThemes.dark_active = {\n ...colorThemes.dark_blue_alt3,\n background: darkColors.blue10,\n backgroundHover: darkColors.blue11,\n backgroundPress: darkColors.blue9,\n backgroundFocus: darkColors.blue9,\n color: darkColors.blue12,\n colorHover: darkColors.blue12,\n colorPress: darkColors.blue12,\n colorFocus: darkColors.blue12,\n}\n\n// light active uses light foregound, ios style\nbaseThemes.light_active = baseThemes.dark_active\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/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.106",
|
|
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.106",
|
|
21
|
+
"@tamagui/core": "^1.0.1-beta.106"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
24
|
+
"@tamagui/build": "^1.0.1-beta.106"
|
|
25
25
|
},
|
|
26
26
|
"publishConfig": {
|
|
27
27
|
"access": "public"
|
package/src/themes.tsx
CHANGED
|
@@ -61,12 +61,13 @@ function createThemesFrom<Name extends string, GetTheme extends ThemeCreator = T
|
|
|
61
61
|
})
|
|
62
62
|
// add these after alts since we rely on positioning
|
|
63
63
|
const darkerTheme = getTheme(Math.max(0, shift + (props.isLight ? 1 : -1)), props)
|
|
64
|
-
const activeTheme =
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
64
|
+
const activeTheme = props.activeTheme || {
|
|
65
|
+
...theme,
|
|
66
|
+
borderColor: props.backgrounds[7],
|
|
67
|
+
background: props.backgrounds[6],
|
|
68
|
+
backgroundHover: props.backgrounds[6],
|
|
69
|
+
backgroundPress: props.backgrounds[6],
|
|
70
|
+
}
|
|
70
71
|
|
|
71
72
|
// TODO can be de-duped
|
|
72
73
|
const inverted = altThemes.map(([_name, theme]) => {
|
|
@@ -390,24 +391,21 @@ const colorThemes: {
|
|
|
390
391
|
[key in ColorThemeNames]: MyThemeBase
|
|
391
392
|
} = Object.fromEntries(colorThemeEntries) as any
|
|
392
393
|
|
|
393
|
-
function makeActiveTheme(theme: any) {
|
|
394
|
-
const res = { ...theme }
|
|
395
|
-
res.backgroundHover = res.background
|
|
396
|
-
res.colorHover = res.color
|
|
397
|
-
res.backgroundPress = res.background
|
|
398
|
-
res.colorPress = res.color
|
|
399
|
-
return res
|
|
400
|
-
}
|
|
401
|
-
|
|
402
394
|
// add in base _active themes
|
|
403
|
-
baseThemes.dark_active =
|
|
395
|
+
baseThemes.dark_active = {
|
|
404
396
|
...colorThemes.dark_blue_alt3,
|
|
405
397
|
background: darkColors.blue10,
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
398
|
+
backgroundHover: darkColors.blue11,
|
|
399
|
+
backgroundPress: darkColors.blue9,
|
|
400
|
+
backgroundFocus: darkColors.blue9,
|
|
401
|
+
color: darkColors.blue12,
|
|
402
|
+
colorHover: darkColors.blue12,
|
|
403
|
+
colorPress: darkColors.blue12,
|
|
404
|
+
colorFocus: darkColors.blue12,
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
// light active uses light foregound, ios style
|
|
408
|
+
baseThemes.light_active = baseThemes.dark_active
|
|
411
409
|
|
|
412
410
|
const allThemes = {
|
|
413
411
|
...baseThemes,
|
package/types/themes.d.ts
CHANGED
|
@@ -497,7 +497,7 @@ declare const baseThemes: {
|
|
|
497
497
|
borderColorPress: string | Variable<any>;
|
|
498
498
|
borderColorFocus: string | Variable<any>;
|
|
499
499
|
};
|
|
500
|
-
|
|
500
|
+
dark_alt1: {
|
|
501
501
|
background: any;
|
|
502
502
|
backgroundStrong: any;
|
|
503
503
|
backgroundSoft: any;
|
|
@@ -543,7 +543,7 @@ declare const baseThemes: {
|
|
|
543
543
|
borderColorPress: string | Variable<any>;
|
|
544
544
|
borderColorFocus: string | Variable<any>;
|
|
545
545
|
};
|
|
546
|
-
|
|
546
|
+
dark_alt3: {
|
|
547
547
|
background: any;
|
|
548
548
|
backgroundStrong: any;
|
|
549
549
|
backgroundSoft: any;
|
|
@@ -905,7 +905,7 @@ declare const baseThemes: {
|
|
|
905
905
|
borderColorPress: string | Variable<any>;
|
|
906
906
|
borderColorFocus: string | Variable<any>;
|
|
907
907
|
};
|
|
908
|
-
|
|
908
|
+
light_alt1: {
|
|
909
909
|
background: any;
|
|
910
910
|
backgroundStrong: any;
|
|
911
911
|
backgroundSoft: any;
|
|
@@ -951,7 +951,7 @@ declare const baseThemes: {
|
|
|
951
951
|
borderColorPress: string | Variable<any>;
|
|
952
952
|
borderColorFocus: string | Variable<any>;
|
|
953
953
|
};
|
|
954
|
-
|
|
954
|
+
light_alt3: {
|
|
955
955
|
background: any;
|
|
956
956
|
backgroundStrong: any;
|
|
957
957
|
backgroundSoft: any;
|
|
@@ -1245,7 +1245,7 @@ declare const allThemes: {
|
|
|
1245
1245
|
borderColorPress: string | Variable<any>;
|
|
1246
1246
|
borderColorFocus: string | Variable<any>;
|
|
1247
1247
|
};
|
|
1248
|
-
readonly
|
|
1248
|
+
readonly light_blue_alt1: {
|
|
1249
1249
|
background: any;
|
|
1250
1250
|
backgroundStrong: any;
|
|
1251
1251
|
backgroundSoft: any;
|
|
@@ -1291,7 +1291,7 @@ declare const allThemes: {
|
|
|
1291
1291
|
borderColorPress: string | Variable<any>;
|
|
1292
1292
|
borderColorFocus: string | Variable<any>;
|
|
1293
1293
|
};
|
|
1294
|
-
readonly
|
|
1294
|
+
readonly light_blue_alt3: {
|
|
1295
1295
|
background: any;
|
|
1296
1296
|
backgroundStrong: any;
|
|
1297
1297
|
backgroundSoft: any;
|
|
@@ -1314,7 +1314,7 @@ declare const allThemes: {
|
|
|
1314
1314
|
borderColorPress: string | Variable<any>;
|
|
1315
1315
|
borderColorFocus: string | Variable<any>;
|
|
1316
1316
|
};
|
|
1317
|
-
readonly
|
|
1317
|
+
readonly light_gray_alt1: {
|
|
1318
1318
|
background: any;
|
|
1319
1319
|
backgroundStrong: any;
|
|
1320
1320
|
backgroundSoft: any;
|
|
@@ -1360,7 +1360,7 @@ declare const allThemes: {
|
|
|
1360
1360
|
borderColorPress: string | Variable<any>;
|
|
1361
1361
|
borderColorFocus: string | Variable<any>;
|
|
1362
1362
|
};
|
|
1363
|
-
readonly
|
|
1363
|
+
readonly light_gray_alt3: {
|
|
1364
1364
|
background: any;
|
|
1365
1365
|
backgroundStrong: any;
|
|
1366
1366
|
backgroundSoft: any;
|
|
@@ -1383,7 +1383,7 @@ declare const allThemes: {
|
|
|
1383
1383
|
borderColorPress: string | Variable<any>;
|
|
1384
1384
|
borderColorFocus: string | Variable<any>;
|
|
1385
1385
|
};
|
|
1386
|
-
readonly
|
|
1386
|
+
readonly light_green_alt1: {
|
|
1387
1387
|
background: any;
|
|
1388
1388
|
backgroundStrong: any;
|
|
1389
1389
|
backgroundSoft: any;
|
|
@@ -1429,7 +1429,7 @@ declare const allThemes: {
|
|
|
1429
1429
|
borderColorPress: string | Variable<any>;
|
|
1430
1430
|
borderColorFocus: string | Variable<any>;
|
|
1431
1431
|
};
|
|
1432
|
-
readonly
|
|
1432
|
+
readonly light_green_alt3: {
|
|
1433
1433
|
background: any;
|
|
1434
1434
|
backgroundStrong: any;
|
|
1435
1435
|
backgroundSoft: any;
|
|
@@ -1452,7 +1452,7 @@ declare const allThemes: {
|
|
|
1452
1452
|
borderColorPress: string | Variable<any>;
|
|
1453
1453
|
borderColorFocus: string | Variable<any>;
|
|
1454
1454
|
};
|
|
1455
|
-
readonly
|
|
1455
|
+
readonly light_orange_alt1: {
|
|
1456
1456
|
background: any;
|
|
1457
1457
|
backgroundStrong: any;
|
|
1458
1458
|
backgroundSoft: any;
|
|
@@ -1498,7 +1498,7 @@ declare const allThemes: {
|
|
|
1498
1498
|
borderColorPress: string | Variable<any>;
|
|
1499
1499
|
borderColorFocus: string | Variable<any>;
|
|
1500
1500
|
};
|
|
1501
|
-
readonly
|
|
1501
|
+
readonly light_orange_alt3: {
|
|
1502
1502
|
background: any;
|
|
1503
1503
|
backgroundStrong: any;
|
|
1504
1504
|
backgroundSoft: any;
|
|
@@ -1521,7 +1521,7 @@ declare const allThemes: {
|
|
|
1521
1521
|
borderColorPress: string | Variable<any>;
|
|
1522
1522
|
borderColorFocus: string | Variable<any>;
|
|
1523
1523
|
};
|
|
1524
|
-
readonly
|
|
1524
|
+
readonly light_pink_alt1: {
|
|
1525
1525
|
background: any;
|
|
1526
1526
|
backgroundStrong: any;
|
|
1527
1527
|
backgroundSoft: any;
|
|
@@ -1567,7 +1567,7 @@ declare const allThemes: {
|
|
|
1567
1567
|
borderColorPress: string | Variable<any>;
|
|
1568
1568
|
borderColorFocus: string | Variable<any>;
|
|
1569
1569
|
};
|
|
1570
|
-
readonly
|
|
1570
|
+
readonly light_pink_alt3: {
|
|
1571
1571
|
background: any;
|
|
1572
1572
|
backgroundStrong: any;
|
|
1573
1573
|
backgroundSoft: any;
|
|
@@ -1590,7 +1590,7 @@ declare const allThemes: {
|
|
|
1590
1590
|
borderColorPress: string | Variable<any>;
|
|
1591
1591
|
borderColorFocus: string | Variable<any>;
|
|
1592
1592
|
};
|
|
1593
|
-
readonly
|
|
1593
|
+
readonly light_purple_alt1: {
|
|
1594
1594
|
background: any;
|
|
1595
1595
|
backgroundStrong: any;
|
|
1596
1596
|
backgroundSoft: any;
|
|
@@ -1636,7 +1636,7 @@ declare const allThemes: {
|
|
|
1636
1636
|
borderColorPress: string | Variable<any>;
|
|
1637
1637
|
borderColorFocus: string | Variable<any>;
|
|
1638
1638
|
};
|
|
1639
|
-
readonly
|
|
1639
|
+
readonly light_purple_alt3: {
|
|
1640
1640
|
background: any;
|
|
1641
1641
|
backgroundStrong: any;
|
|
1642
1642
|
backgroundSoft: any;
|
|
@@ -1659,7 +1659,7 @@ declare const allThemes: {
|
|
|
1659
1659
|
borderColorPress: string | Variable<any>;
|
|
1660
1660
|
borderColorFocus: string | Variable<any>;
|
|
1661
1661
|
};
|
|
1662
|
-
readonly
|
|
1662
|
+
readonly light_red_alt1: {
|
|
1663
1663
|
background: any;
|
|
1664
1664
|
backgroundStrong: any;
|
|
1665
1665
|
backgroundSoft: any;
|
|
@@ -1705,7 +1705,7 @@ declare const allThemes: {
|
|
|
1705
1705
|
borderColorPress: string | Variable<any>;
|
|
1706
1706
|
borderColorFocus: string | Variable<any>;
|
|
1707
1707
|
};
|
|
1708
|
-
readonly
|
|
1708
|
+
readonly light_red_alt3: {
|
|
1709
1709
|
background: any;
|
|
1710
1710
|
backgroundStrong: any;
|
|
1711
1711
|
backgroundSoft: any;
|
|
@@ -1728,7 +1728,7 @@ declare const allThemes: {
|
|
|
1728
1728
|
borderColorPress: string | Variable<any>;
|
|
1729
1729
|
borderColorFocus: string | Variable<any>;
|
|
1730
1730
|
};
|
|
1731
|
-
readonly
|
|
1731
|
+
readonly light_yellow_alt1: {
|
|
1732
1732
|
background: any;
|
|
1733
1733
|
backgroundStrong: any;
|
|
1734
1734
|
backgroundSoft: any;
|
|
@@ -1774,7 +1774,7 @@ declare const allThemes: {
|
|
|
1774
1774
|
borderColorPress: string | Variable<any>;
|
|
1775
1775
|
borderColorFocus: string | Variable<any>;
|
|
1776
1776
|
};
|
|
1777
|
-
readonly
|
|
1777
|
+
readonly light_yellow_alt3: {
|
|
1778
1778
|
background: any;
|
|
1779
1779
|
backgroundStrong: any;
|
|
1780
1780
|
backgroundSoft: any;
|
|
@@ -1797,7 +1797,7 @@ declare const allThemes: {
|
|
|
1797
1797
|
borderColorPress: string | Variable<any>;
|
|
1798
1798
|
borderColorFocus: string | Variable<any>;
|
|
1799
1799
|
};
|
|
1800
|
-
readonly
|
|
1800
|
+
readonly light_teal_alt1: {
|
|
1801
1801
|
background: any;
|
|
1802
1802
|
backgroundStrong: any;
|
|
1803
1803
|
backgroundSoft: any;
|
|
@@ -1843,7 +1843,7 @@ declare const allThemes: {
|
|
|
1843
1843
|
borderColorPress: string | Variable<any>;
|
|
1844
1844
|
borderColorFocus: string | Variable<any>;
|
|
1845
1845
|
};
|
|
1846
|
-
readonly
|
|
1846
|
+
readonly light_teal_alt3: {
|
|
1847
1847
|
background: any;
|
|
1848
1848
|
backgroundStrong: any;
|
|
1849
1849
|
backgroundSoft: any;
|
|
@@ -1866,7 +1866,7 @@ declare const allThemes: {
|
|
|
1866
1866
|
borderColorPress: string | Variable<any>;
|
|
1867
1867
|
borderColorFocus: string | Variable<any>;
|
|
1868
1868
|
};
|
|
1869
|
-
readonly
|
|
1869
|
+
readonly dark_blue_alt1: {
|
|
1870
1870
|
background: any;
|
|
1871
1871
|
backgroundStrong: any;
|
|
1872
1872
|
backgroundSoft: any;
|
|
@@ -1912,7 +1912,7 @@ declare const allThemes: {
|
|
|
1912
1912
|
borderColorPress: string | Variable<any>;
|
|
1913
1913
|
borderColorFocus: string | Variable<any>;
|
|
1914
1914
|
};
|
|
1915
|
-
readonly
|
|
1915
|
+
readonly dark_blue_alt3: {
|
|
1916
1916
|
background: any;
|
|
1917
1917
|
backgroundStrong: any;
|
|
1918
1918
|
backgroundSoft: any;
|
|
@@ -1935,7 +1935,7 @@ declare const allThemes: {
|
|
|
1935
1935
|
borderColorPress: string | Variable<any>;
|
|
1936
1936
|
borderColorFocus: string | Variable<any>;
|
|
1937
1937
|
};
|
|
1938
|
-
readonly
|
|
1938
|
+
readonly dark_gray_alt1: {
|
|
1939
1939
|
background: any;
|
|
1940
1940
|
backgroundStrong: any;
|
|
1941
1941
|
backgroundSoft: any;
|
|
@@ -1981,7 +1981,7 @@ declare const allThemes: {
|
|
|
1981
1981
|
borderColorPress: string | Variable<any>;
|
|
1982
1982
|
borderColorFocus: string | Variable<any>;
|
|
1983
1983
|
};
|
|
1984
|
-
readonly
|
|
1984
|
+
readonly dark_gray_alt3: {
|
|
1985
1985
|
background: any;
|
|
1986
1986
|
backgroundStrong: any;
|
|
1987
1987
|
backgroundSoft: any;
|
|
@@ -2004,7 +2004,7 @@ declare const allThemes: {
|
|
|
2004
2004
|
borderColorPress: string | Variable<any>;
|
|
2005
2005
|
borderColorFocus: string | Variable<any>;
|
|
2006
2006
|
};
|
|
2007
|
-
readonly
|
|
2007
|
+
readonly dark_green_alt1: {
|
|
2008
2008
|
background: any;
|
|
2009
2009
|
backgroundStrong: any;
|
|
2010
2010
|
backgroundSoft: any;
|
|
@@ -2050,7 +2050,7 @@ declare const allThemes: {
|
|
|
2050
2050
|
borderColorPress: string | Variable<any>;
|
|
2051
2051
|
borderColorFocus: string | Variable<any>;
|
|
2052
2052
|
};
|
|
2053
|
-
readonly
|
|
2053
|
+
readonly dark_green_alt3: {
|
|
2054
2054
|
background: any;
|
|
2055
2055
|
backgroundStrong: any;
|
|
2056
2056
|
backgroundSoft: any;
|
|
@@ -2073,7 +2073,7 @@ declare const allThemes: {
|
|
|
2073
2073
|
borderColorPress: string | Variable<any>;
|
|
2074
2074
|
borderColorFocus: string | Variable<any>;
|
|
2075
2075
|
};
|
|
2076
|
-
readonly
|
|
2076
|
+
readonly dark_orange_alt1: {
|
|
2077
2077
|
background: any;
|
|
2078
2078
|
backgroundStrong: any;
|
|
2079
2079
|
backgroundSoft: any;
|
|
@@ -2119,7 +2119,7 @@ declare const allThemes: {
|
|
|
2119
2119
|
borderColorPress: string | Variable<any>;
|
|
2120
2120
|
borderColorFocus: string | Variable<any>;
|
|
2121
2121
|
};
|
|
2122
|
-
readonly
|
|
2122
|
+
readonly dark_orange_alt3: {
|
|
2123
2123
|
background: any;
|
|
2124
2124
|
backgroundStrong: any;
|
|
2125
2125
|
backgroundSoft: any;
|
|
@@ -2142,7 +2142,7 @@ declare const allThemes: {
|
|
|
2142
2142
|
borderColorPress: string | Variable<any>;
|
|
2143
2143
|
borderColorFocus: string | Variable<any>;
|
|
2144
2144
|
};
|
|
2145
|
-
readonly
|
|
2145
|
+
readonly dark_pink_alt1: {
|
|
2146
2146
|
background: any;
|
|
2147
2147
|
backgroundStrong: any;
|
|
2148
2148
|
backgroundSoft: any;
|
|
@@ -2188,7 +2188,7 @@ declare const allThemes: {
|
|
|
2188
2188
|
borderColorPress: string | Variable<any>;
|
|
2189
2189
|
borderColorFocus: string | Variable<any>;
|
|
2190
2190
|
};
|
|
2191
|
-
readonly
|
|
2191
|
+
readonly dark_pink_alt3: {
|
|
2192
2192
|
background: any;
|
|
2193
2193
|
backgroundStrong: any;
|
|
2194
2194
|
backgroundSoft: any;
|
|
@@ -2211,7 +2211,7 @@ declare const allThemes: {
|
|
|
2211
2211
|
borderColorPress: string | Variable<any>;
|
|
2212
2212
|
borderColorFocus: string | Variable<any>;
|
|
2213
2213
|
};
|
|
2214
|
-
readonly
|
|
2214
|
+
readonly dark_purple_alt1: {
|
|
2215
2215
|
background: any;
|
|
2216
2216
|
backgroundStrong: any;
|
|
2217
2217
|
backgroundSoft: any;
|
|
@@ -2257,7 +2257,7 @@ declare const allThemes: {
|
|
|
2257
2257
|
borderColorPress: string | Variable<any>;
|
|
2258
2258
|
borderColorFocus: string | Variable<any>;
|
|
2259
2259
|
};
|
|
2260
|
-
readonly
|
|
2260
|
+
readonly dark_purple_alt3: {
|
|
2261
2261
|
background: any;
|
|
2262
2262
|
backgroundStrong: any;
|
|
2263
2263
|
backgroundSoft: any;
|
|
@@ -2280,7 +2280,7 @@ declare const allThemes: {
|
|
|
2280
2280
|
borderColorPress: string | Variable<any>;
|
|
2281
2281
|
borderColorFocus: string | Variable<any>;
|
|
2282
2282
|
};
|
|
2283
|
-
readonly
|
|
2283
|
+
readonly dark_red_alt1: {
|
|
2284
2284
|
background: any;
|
|
2285
2285
|
backgroundStrong: any;
|
|
2286
2286
|
backgroundSoft: any;
|
|
@@ -2326,7 +2326,7 @@ declare const allThemes: {
|
|
|
2326
2326
|
borderColorPress: string | Variable<any>;
|
|
2327
2327
|
borderColorFocus: string | Variable<any>;
|
|
2328
2328
|
};
|
|
2329
|
-
readonly
|
|
2329
|
+
readonly dark_red_alt3: {
|
|
2330
2330
|
background: any;
|
|
2331
2331
|
backgroundStrong: any;
|
|
2332
2332
|
backgroundSoft: any;
|
|
@@ -2349,7 +2349,7 @@ declare const allThemes: {
|
|
|
2349
2349
|
borderColorPress: string | Variable<any>;
|
|
2350
2350
|
borderColorFocus: string | Variable<any>;
|
|
2351
2351
|
};
|
|
2352
|
-
readonly
|
|
2352
|
+
readonly dark_yellow_alt1: {
|
|
2353
2353
|
background: any;
|
|
2354
2354
|
backgroundStrong: any;
|
|
2355
2355
|
backgroundSoft: any;
|
|
@@ -2395,7 +2395,7 @@ declare const allThemes: {
|
|
|
2395
2395
|
borderColorPress: string | Variable<any>;
|
|
2396
2396
|
borderColorFocus: string | Variable<any>;
|
|
2397
2397
|
};
|
|
2398
|
-
readonly
|
|
2398
|
+
readonly dark_yellow_alt3: {
|
|
2399
2399
|
background: any;
|
|
2400
2400
|
backgroundStrong: any;
|
|
2401
2401
|
backgroundSoft: any;
|
|
@@ -2418,7 +2418,7 @@ declare const allThemes: {
|
|
|
2418
2418
|
borderColorPress: string | Variable<any>;
|
|
2419
2419
|
borderColorFocus: string | Variable<any>;
|
|
2420
2420
|
};
|
|
2421
|
-
readonly
|
|
2421
|
+
readonly dark_teal_alt1: {
|
|
2422
2422
|
background: any;
|
|
2423
2423
|
backgroundStrong: any;
|
|
2424
2424
|
backgroundSoft: any;
|
|
@@ -2464,7 +2464,7 @@ declare const allThemes: {
|
|
|
2464
2464
|
borderColorPress: string | Variable<any>;
|
|
2465
2465
|
borderColorFocus: string | Variable<any>;
|
|
2466
2466
|
};
|
|
2467
|
-
readonly
|
|
2467
|
+
readonly dark_teal_alt3: {
|
|
2468
2468
|
background: any;
|
|
2469
2469
|
backgroundStrong: any;
|
|
2470
2470
|
backgroundSoft: any;
|
|
@@ -2826,7 +2826,7 @@ declare const allThemes: {
|
|
|
2826
2826
|
borderColorPress: string | Variable<any>;
|
|
2827
2827
|
borderColorFocus: string | Variable<any>;
|
|
2828
2828
|
};
|
|
2829
|
-
readonly
|
|
2829
|
+
readonly dark_alt1: {
|
|
2830
2830
|
background: any;
|
|
2831
2831
|
backgroundStrong: any;
|
|
2832
2832
|
backgroundSoft: any;
|
|
@@ -2872,7 +2872,7 @@ declare const allThemes: {
|
|
|
2872
2872
|
borderColorPress: string | Variable<any>;
|
|
2873
2873
|
borderColorFocus: string | Variable<any>;
|
|
2874
2874
|
};
|
|
2875
|
-
readonly
|
|
2875
|
+
readonly dark_alt3: {
|
|
2876
2876
|
background: any;
|
|
2877
2877
|
backgroundStrong: any;
|
|
2878
2878
|
backgroundSoft: any;
|
|
@@ -3234,7 +3234,7 @@ declare const allThemes: {
|
|
|
3234
3234
|
borderColorPress: string | Variable<any>;
|
|
3235
3235
|
borderColorFocus: string | Variable<any>;
|
|
3236
3236
|
};
|
|
3237
|
-
readonly
|
|
3237
|
+
readonly light_alt1: {
|
|
3238
3238
|
background: any;
|
|
3239
3239
|
backgroundStrong: any;
|
|
3240
3240
|
backgroundSoft: any;
|
|
@@ -3280,7 +3280,7 @@ declare const allThemes: {
|
|
|
3280
3280
|
borderColorPress: string | Variable<any>;
|
|
3281
3281
|
borderColorFocus: string | Variable<any>;
|
|
3282
3282
|
};
|
|
3283
|
-
readonly
|
|
3283
|
+
readonly light_alt3: {
|
|
3284
3284
|
background: any;
|
|
3285
3285
|
backgroundStrong: any;
|
|
3286
3286
|
backgroundSoft: any;
|
package/types/themes.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAwC,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.tsx"],"names":[],"mappings":"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"}
|
package/types/tokens.d.ts
CHANGED
|
@@ -537,31 +537,30 @@ export declare const tokens: {
|
|
|
537
537
|
space: {
|
|
538
538
|
true: Variable<any>;
|
|
539
539
|
0: Variable<any>;
|
|
540
|
-
|
|
541
|
-
5: Variable<any>;
|
|
542
|
-
7: Variable<any>;
|
|
543
|
-
9: Variable<any>;
|
|
544
|
-
10: Variable<any>;
|
|
545
|
-
16: Variable<any>;
|
|
546
|
-
19: Variable<any>;
|
|
547
|
-
2: Variable<any>;
|
|
540
|
+
1: Variable<any>;
|
|
548
541
|
4: Variable<any>;
|
|
542
|
+
2: Variable<any>;
|
|
543
|
+
16: Variable<any>;
|
|
544
|
+
3: Variable<any>;
|
|
549
545
|
8: Variable<any>;
|
|
550
546
|
20: Variable<any>;
|
|
551
547
|
0.25: Variable<any>;
|
|
552
548
|
0.5: Variable<any>;
|
|
553
549
|
0.75: Variable<any>;
|
|
554
|
-
1: Variable<any>;
|
|
555
550
|
1.5: Variable<any>;
|
|
556
551
|
2.5: Variable<any>;
|
|
557
552
|
3.5: Variable<any>;
|
|
558
553
|
4.5: Variable<any>;
|
|
554
|
+
5: Variable<any>;
|
|
559
555
|
5.5: Variable<any>;
|
|
560
556
|
6: Variable<any>;
|
|
561
557
|
6.5: Variable<any>;
|
|
558
|
+
7: Variable<any>;
|
|
562
559
|
7.6: Variable<any>;
|
|
563
560
|
8.5: Variable<any>;
|
|
561
|
+
9: Variable<any>;
|
|
564
562
|
9.5: Variable<any>;
|
|
563
|
+
10: Variable<any>;
|
|
565
564
|
11: Variable<any>;
|
|
566
565
|
12: Variable<any>;
|
|
567
566
|
13: Variable<any>;
|
|
@@ -569,33 +568,33 @@ export declare const tokens: {
|
|
|
569
568
|
15: Variable<any>;
|
|
570
569
|
17: Variable<any>;
|
|
571
570
|
18: Variable<any>;
|
|
571
|
+
19: Variable<any>;
|
|
572
572
|
"-true": Variable<any>;
|
|
573
573
|
"-0": Variable<any>;
|
|
574
|
-
[-
|
|
575
|
-
[-5]: Variable<any>;
|
|
576
|
-
[-7]: Variable<any>;
|
|
577
|
-
[-9]: Variable<any>;
|
|
578
|
-
[-10]: Variable<any>;
|
|
579
|
-
[-16]: Variable<any>;
|
|
580
|
-
[-19]: Variable<any>;
|
|
581
|
-
[-2]: Variable<any>;
|
|
574
|
+
[-1]: Variable<any>;
|
|
582
575
|
[-4]: Variable<any>;
|
|
576
|
+
[-2]: Variable<any>;
|
|
577
|
+
[-16]: Variable<any>;
|
|
578
|
+
[-3]: Variable<any>;
|
|
583
579
|
[-8]: Variable<any>;
|
|
584
580
|
[-20]: Variable<any>;
|
|
585
581
|
[-0.25]: Variable<any>;
|
|
586
582
|
[-0.5]: Variable<any>;
|
|
587
583
|
[-0.75]: Variable<any>;
|
|
588
|
-
[-1]: Variable<any>;
|
|
589
584
|
[-1.5]: Variable<any>;
|
|
590
585
|
[-2.5]: Variable<any>;
|
|
591
586
|
[-3.5]: Variable<any>;
|
|
592
587
|
[-4.5]: Variable<any>;
|
|
588
|
+
[-5]: Variable<any>;
|
|
593
589
|
[-5.5]: Variable<any>;
|
|
594
590
|
[-6]: Variable<any>;
|
|
595
591
|
[-6.5]: Variable<any>;
|
|
592
|
+
[-7]: Variable<any>;
|
|
596
593
|
[-7.6]: Variable<any>;
|
|
597
594
|
[-8.5]: Variable<any>;
|
|
595
|
+
[-9]: Variable<any>;
|
|
598
596
|
[-9.5]: Variable<any>;
|
|
597
|
+
[-10]: Variable<any>;
|
|
599
598
|
[-11]: Variable<any>;
|
|
600
599
|
[-12]: Variable<any>;
|
|
601
600
|
[-13]: Variable<any>;
|
|
@@ -603,6 +602,7 @@ export declare const tokens: {
|
|
|
603
602
|
[-15]: Variable<any>;
|
|
604
603
|
[-17]: Variable<any>;
|
|
605
604
|
[-18]: Variable<any>;
|
|
605
|
+
[-19]: Variable<any>;
|
|
606
606
|
};
|
|
607
607
|
size: {
|
|
608
608
|
0: Variable<any>;
|