@tamagui/themes 1.89.28 → 1.89.30

package/src/v3-themes.ts

@@ -17,7 +17,6 @@ import {
   yellowDark,
 } from '@tamagui/colors'
 import { createThemeBuilder } from '@tamagui/theme-builder'
-import type { Variable } from '@tamagui/web'
 import { createTokens } from '@tamagui/web'
 
 const colorTokens = {
@@ -111,15 +110,21 @@ export const palettes = (() => {
   const transparent = (hsl: string, opacity = 0) =>
     hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)
 
-  const getColorPalette = (colors: Object): string[] => {
+  const getColorPalette = (colors: Object, accentColors: Object): string[] => {
     const colorPalette = Object.values(colors)
     // make the transparent color vibrant and towards the middle
     const colorI = colorPalette.length - 4
 
+    // accents!
+    const accentPalette = Object.values(accentColors)
+    const accentBackground = accentPalette[0]
+    const accentColor = accentPalette[accentPalette.length - 1]
+
     // add our transparent colors first/last
     // and make sure the last (foreground) color is white/black rather than colorful
     // this is mostly for consistency with the older theme-base
     return [
+      accentBackground,
       transparent(colorPalette[0], 0),
       transparent(colorPalette[0], 0.25),
       transparent(colorPalette[0], 0.5),
@@ -129,15 +134,17 @@ export const palettes = (() => {
       transparent(colorPalette[colorI], 0.5),
       transparent(colorPalette[colorI], 0.25),
       transparent(colorPalette[colorI], 0),
+      accentColor,
     ]
   }
 
-  // const brandColor = {
-  //   light: color.blue8Light,
-  //   dark: color.blue8Dark
-  // }
+  const brandColor = {
+    light: color.blue4Light,
+    dark: color.blue4Dark,
+  }
 
   const lightPalette = [
+    brandColor.light,
     color.white0,
     color.white025,
     color.white05,
@@ -158,9 +165,11 @@ export const palettes = (() => {
     color.black05,
     color.black025,
     color.black0,
+    brandColor.dark,
   ]
 
   const darkPalette = [
+    brandColor.dark,
     color.black0,
     color.black025,
     color.black05,
@@ -181,17 +190,34 @@ export const palettes = (() => {
     color.white05,
     color.white025,
     color.white0,
+    brandColor.light,
   ]
 
+  const lightColorNames = objectKeys(colorTokens.light)
   const lightPalettes = objectFromEntries(
-    objectKeys(colorTokens.light).map(
-      (key) => [`light_${key}`, getColorPalette(colorTokens.light[key])] as const
+    lightColorNames.map(
+      (key, index) =>
+        [
+          `light_${key}`,
+          getColorPalette(
+            colorTokens.light[key],
+            colorTokens.light[lightColorNames[(index + 1) % lightColorNames.length]]
+          ),
+        ] as const
     )
   )
 
+  const darkColorNames = objectKeys(colorTokens.dark)
   const darkPalettes = objectFromEntries(
-    objectKeys(colorTokens.dark).map(
-      (key) => [`dark_${key}`, getColorPalette(colorTokens.dark[key])] as const
+    darkColorNames.map(
+      (key, index) =>
+        [
+          `dark_${key}`,
+          getColorPalette(
+            colorTokens.dark[key],
+            colorTokens.light[darkColorNames[(index + 1) % darkColorNames.length]]
+          ),
+        ] as const
     )
   )
 
@@ -207,51 +233,61 @@ export const palettes = (() => {
   }
 })()
 
-export const templates = (() => {
-  const transparencies = 3
+export const getTemplates = (scheme: 'dark' | 'light') => {
+  const isLight = scheme === 'light'
+
+  // our palettes have 4 things padding each end until you get to bg/color:
+  // [accentBg, transparent1, transparent2, transparent3, transparent4, background, ...]
+  const bgIndex = 5
+  const lighten = isLight ? -1 : 1
+  const darken = -lighten
+  const borderColor = bgIndex + 3
 
   // templates use the palette and specify index
   // negative goes backwards from end so -1 is the last item
   const base = {
-    background0: 0,
-    background025: 1,
-    background05: 2,
-    background075: 3,
-    color1: transparencies + 1,
-    color2: transparencies + 2,
-    color3: transparencies + 3,
-    color4: transparencies + 4,
-    color5: transparencies + 5,
-    color6: transparencies + 6,
-    color7: transparencies + 7,
-    color8: transparencies + 8,
-    color9: transparencies + 9,
-    color10: transparencies + 10,
-    color11: transparencies + 11,
-    color12: transparencies + 12,
-    color0: -0,
-    color025: -1,
-    color05: -2,
-    color075: -3,
+    accentBackground: 0,
+    accentColor: -0,
+
+    background0: 1,
+    background025: 2,
+    background05: 3,
+    background075: 4,
+    color1: bgIndex,
+    color2: bgIndex + 1,
+    color3: bgIndex + 2,
+    color4: bgIndex + 3,
+    color5: bgIndex + 4,
+    color6: bgIndex + 5,
+    color7: bgIndex + 6,
+    color8: bgIndex + 7,
+    color9: bgIndex + 8,
+    color10: bgIndex + 9,
+    color11: bgIndex + 10,
+    color12: bgIndex + 11,
+    color0: -1,
+    color025: -2,
+    color05: -3,
+    color075: -4,
     // the background, color, etc keys here work like generics - they make it so you
     // can publish components for others to use without mandating a specific color scale
     // the @tamagui/button Button component looks for `$background`, so you set the
     // dark_red_Button theme to have a stronger background than the dark_red theme.
-    background: transparencies + 1,
-    backgroundHover: transparencies + 2,
-    backgroundPress: transparencies + 3,
-    backgroundFocus: transparencies + 1,
-    borderColor: transparencies + 4,
-    borderColorHover: transparencies + 5,
-    borderColorFocus: transparencies + 2,
-    borderColorPress: transparencies + 4,
-    color: -transparencies - 1,
-    colorHover: -transparencies - 2,
-    colorPress: -transparencies - 1,
-    colorFocus: -transparencies - 2,
-    colorTransparent: -0,
-    placeholderColor: -transparencies - 4,
-    outlineColor: -1,
+    background: bgIndex,
+    backgroundHover: bgIndex + lighten, // always lighten on hover no matter the scheme
+    backgroundPress: bgIndex + darken, // always darken on press no matter the theme
+    backgroundFocus: bgIndex + darken,
+    borderColor,
+    borderColorHover: borderColor + lighten,
+    borderColorPress: borderColor + darken,
+    borderColorFocus: borderColor,
+    color: -bgIndex,
+    colorHover: -bgIndex - 1,
+    colorPress: -bgIndex,
+    colorFocus: -bgIndex - 1,
+    colorTransparent: -1,
+    placeholderColor: -bgIndex - 3,
+    outlineColor: -2,
   }
 
   const surface1 = {
@@ -287,15 +323,20 @@ export const templates = (() => {
     borderColorPress: base.borderColorPress + 3,
   }
 
-  const surfaceActive = {
+  const surfaceActiveBg = {
     background: base.background + 5,
     backgroundHover: base.background + 5,
     backgroundPress: base.backgroundPress + 5,
     backgroundFocus: base.backgroundFocus + 5,
-    borderColor: base.borderColor + 5,
-    borderColorHover: base.borderColor + 5,
-    borderColorFocus: base.borderColorFocus + 5,
-    borderColorPress: base.borderColorPress + 5,
+  }
+
+  const surfaceActive = {
+    ...surfaceActiveBg,
+    // match border to background when active
+    borderColor: surfaceActiveBg.background,
+    borderColorHover: surfaceActiveBg.backgroundHover,
+    borderColorFocus: surfaceActiveBg.backgroundFocus,
+    borderColorPress: surfaceActiveBg.backgroundPress,
   }
 
   const inverseSurface1 = {
@@ -350,7 +391,22 @@ export const templates = (() => {
     inverseActive,
     surfaceActive,
   }
-})()
+}
+
+const lightTemplates = getTemplates('light')
+const darkTemplates = getTemplates('dark')
+const templates = {
+  ...objectFromEntries(
+    objectKeys(lightTemplates).map(
+      (name) => [`light_${name}`, lightTemplates[name]] as const
+    )
+  ),
+  ...objectFromEntries(
+    objectKeys(darkTemplates).map(
+      (name) => [`dark_${name}`, darkTemplates[name]] as const
+    )
+  ),
+}
 
 const shadows = {
   light: {
@@ -388,7 +444,7 @@ const overlayThemeDefinitions = [
   {
     parent: 'dark',
     theme: {
-      background: 'rgba(0,0,0,0.9)',
+      background: 'rgba(0,0,0,0.8)',
     },
   },
 ]
@@ -561,12 +617,12 @@ const themeBuilder = createThemeBuilder()
 
 const themesIn = themeBuilder.build()
 
-export type Theme = Record<keyof typeof templates.base, string> &
+export type Theme = Record<keyof typeof lightTemplates.base, string> &
   typeof nonInherited.light
 
 export type ThemesOut = Record<keyof typeof themesIn, Theme>
 
-export const themes = themesIn as ThemesOut
+export const themes = themesIn as any as ThemesOut
 
 // --- tokens ---
 
@@ -673,14 +729,11 @@ export const tokens = createTokens({
 
 // --- utils ---
 
-export function postfixObjKeys<
-  A extends { [key: string]: Variable<string> | string },
-  B extends string,
->(
+export function postfixObjKeys<A extends { [key: string]: string }, B extends string>(
   obj: A,
   postfix: B
 ): {
-  [Key in `${keyof A extends string ? keyof A : never}${B}`]: Variable<string> | string
+  [Key in `${keyof A extends string ? keyof A : never}${B}`]: string
 } {
   return Object.fromEntries(
     Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true
+  },
+  "exclude": [
+    "generate.ts",
+    "types",
+    "v2.d.ts",
+    "v2.js",
+    "v2-themes.js",
+    "v2-themes.d.ts",
+    "v3.d.ts",
+    "v3.js",
+    "v3-themes.js",
+    "v3-themes.d.ts",
+    "dist",
+    "**/__tests__"
+  ],
+  "references": [
+    {
+      "path": "../colors"
+    },
+    {
+      "path": "../core"
+    }
+  ]
+}

package/types/generated-v3.d.ts

@@ -1,4 +1,6 @@
 type Theme = {
+    accentBackground: string;
+    accentColor: string;
     background0: string;
     background025: string;
     background05: string;
@@ -25,8 +27,8 @@ type Theme = {
     backgroundFocus: string;
     borderColor: string;
     borderColorHover: string;
-    borderColorFocus: string;
     borderColorPress: string;
+    borderColorFocus: string;
     color: string;
     colorHover: string;
     colorPress: string;