@tamagui/themes 1.89.29 → 1.89.30

package/src/v3-themes.ts

@@ -238,17 +238,10 @@ export const getTemplates = (scheme: 'dark' | 'light') => {
 
   // our palettes have 4 things padding each end until you get to bg/color:
   // [accentBg, transparent1, transparent2, transparent3, transparent4, background, ...]
-  const bgIndex = 4
-
-  // light themes will start with a slightly stronger bg, and then lighten on hover
-  // whereas dark themes start with a less strong bg, but lighten on hover as well
-  const bgBaseOffset = 1
-
+  const bgIndex = 5
   const lighten = isLight ? -1 : 1
   const darken = -lighten
-
-  const background = bgIndex + bgBaseOffset
-  const borderColor = background + 3
+  const borderColor = bgIndex + 3
 
   // templates use the palette and specify index
   // negative goes backwards from end so -1 is the last item
@@ -260,41 +253,41 @@ export const getTemplates = (scheme: 'dark' | 'light') => {
     background025: 2,
     background05: 3,
     background075: 4,
-    color1: bgIndex + 1,
-    color2: bgIndex + 2,
-    color3: bgIndex + 3,
-    color4: bgIndex + 4,
-    color5: bgIndex + 5,
-    color6: bgIndex + 6,
-    color7: bgIndex + 7,
-    color8: bgIndex + 8,
-    color9: bgIndex + 9,
-    color10: bgIndex + 10,
-    color11: bgIndex + 11,
-    color12: bgIndex + 12,
-    color0: -0,
-    color025: -1,
-    color05: -2,
-    color075: -3,
+    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,
-    backgroundHover: background + lighten, // always lighten on hover no matter the scheme
-    backgroundPress: background + darken, // always darken on press no matter the theme
-    backgroundFocus: background + darken,
+    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 - 1,
-    colorHover: -bgIndex - 2,
-    colorPress: -bgIndex - 1,
-    colorFocus: -bgIndex - 2,
-    colorTransparent: -0,
-    placeholderColor: -bgIndex - 4,
-    outlineColor: -1,
+    color: -bgIndex,
+    colorHover: -bgIndex - 1,
+    colorPress: -bgIndex,
+    colorFocus: -bgIndex - 1,
+    colorTransparent: -1,
+    placeholderColor: -bgIndex - 3,
+    outlineColor: -2,
   }
 
   const surface1 = {

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;