@tamagui/theme-builder 1.79.9 → 1.79.11

package/dist/esm/masks.js

@@ -0,0 +1,130 @@
+import {
+  combineMasks,
+  createIdentityMask,
+  createInverseMask,
+  createMask,
+  createSoftenMask,
+  createStrengthenMask,
+  skipMask
+} from "@tamagui/create-theme";
+const shadows = {
+  shadowColor: 0,
+  shadowColorHover: 0,
+  shadowColorPress: 0,
+  shadowColorFocus: 0
+}, colors = {
+  ...shadows,
+  color: 0,
+  colorHover: 0,
+  colorFocus: 0,
+  colorPress: 0
+}, templateColorsSpecific = {
+  color1: 1,
+  color2: 2,
+  color3: 3,
+  color4: 4,
+  color5: 5,
+  color6: 6,
+  color7: 7,
+  color8: 8,
+  color9: 9,
+  color10: 10,
+  color11: 11,
+  color12: 12
+}, skipShadowsAndSpecificColors = {
+  ...shadows,
+  ...templateColorsSpecific
+}, PALETTE_LEN = 14, baseMaskOptions = {
+  override: shadows,
+  skip: shadows,
+  // avoids the transparent ends
+  max: PALETTE_LEN - 2,
+  min: 1
+}, maskOptions = {
+  component: {
+    ...baseMaskOptions,
+    override: colors,
+    skip: skipShadowsAndSpecificColors
+  },
+  alt: {
+    ...baseMaskOptions
+  },
+  button: {
+    ...baseMaskOptions,
+    override: {
+      ...colors,
+      borderColor: "transparent",
+      borderColorHover: "transparent"
+    },
+    skip: skipShadowsAndSpecificColors
+  }
+}, masks = {
+  identity: createIdentityMask(),
+  soften: createSoftenMask(),
+  soften2: createSoftenMask({ strength: 2 }),
+  soften3: createSoftenMask({ strength: 3 }),
+  strengthen: createStrengthenMask(),
+  inverse: createInverseMask(),
+  inverseSoften: combineMasks(createInverseMask(), createSoftenMask({ strength: 2 })),
+  inverseSoften2: combineMasks(createInverseMask(), createSoftenMask({ strength: 3 })),
+  inverseSoften3: combineMasks(createInverseMask(), createSoftenMask({ strength: 4 })),
+  inverseStrengthen2: combineMasks(
+    createInverseMask(),
+    createStrengthenMask({ strength: 2 })
+  ),
+  strengthenButSoftenBorder: createMask((template, options) => {
+    const stronger = createStrengthenMask().mask(template, options), softer = createSoftenMask().mask(template, options);
+    return {
+      ...stronger,
+      borderColor: softer.borderColor,
+      borderColorHover: softer.borderColorHover,
+      borderColorPress: softer.borderColorPress,
+      borderColorFocus: softer.borderColorFocus
+    };
+  }),
+  soften2Border1: createMask((template, options) => {
+    const softer2 = createSoftenMask({ strength: 2 }).mask(template, options), softer1 = createSoftenMask({ strength: 1 }).mask(template, options);
+    return {
+      ...softer2,
+      borderColor: softer1.borderColor,
+      borderColorHover: softer1.borderColorHover,
+      borderColorPress: softer1.borderColorPress,
+      borderColorFocus: softer1.borderColorFocus
+    };
+  }),
+  soften3FlatBorder: createMask((template, options) => {
+    const borderMask = createSoftenMask({ strength: 2 }).mask(template, options);
+    return {
+      ...createSoftenMask({ strength: 3 }).mask(template, options),
+      borderColor: borderMask.borderColor,
+      borderColorHover: borderMask.borderColorHover,
+      borderColorPress: borderMask.borderColorPress,
+      borderColorFocus: borderMask.borderColorFocus
+    };
+  }),
+  softenBorder: createMask((template, options) => {
+    const plain = skipMask.mask(template, options), softer = createSoftenMask().mask(template, options);
+    return {
+      ...plain,
+      borderColor: softer.borderColor,
+      borderColorHover: softer.borderColorHover,
+      borderColorPress: softer.borderColorPress,
+      borderColorFocus: softer.borderColorFocus
+    };
+  }),
+  softenBorder2: createMask((template, options) => {
+    const plain = skipMask.mask(template, options), softer = createSoftenMask({ strength: 2 }).mask(template, options);
+    return {
+      ...plain,
+      borderColor: softer.borderColor,
+      borderColorHover: softer.borderColorHover,
+      borderColorPress: softer.borderColorPress,
+      borderColorFocus: softer.borderColorFocus
+    };
+  })
+};
+export {
+  maskOptions,
+  masks
+};
+//# sourceMappingURL=masks.js.map

package/dist/esm/masks.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/masks.ts"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/masks.native.js

@@ -0,0 +1,130 @@
+import {
+  combineMasks,
+  createIdentityMask,
+  createInverseMask,
+  createMask,
+  createSoftenMask,
+  createStrengthenMask,
+  skipMask
+} from "@tamagui/create-theme";
+const shadows = {
+  shadowColor: 0,
+  shadowColorHover: 0,
+  shadowColorPress: 0,
+  shadowColorFocus: 0
+}, colors = {
+  ...shadows,
+  color: 0,
+  colorHover: 0,
+  colorFocus: 0,
+  colorPress: 0
+}, templateColorsSpecific = {
+  color1: 1,
+  color2: 2,
+  color3: 3,
+  color4: 4,
+  color5: 5,
+  color6: 6,
+  color7: 7,
+  color8: 8,
+  color9: 9,
+  color10: 10,
+  color11: 11,
+  color12: 12
+}, skipShadowsAndSpecificColors = {
+  ...shadows,
+  ...templateColorsSpecific
+}, PALETTE_LEN = 14, baseMaskOptions = {
+  override: shadows,
+  skip: shadows,
+  // avoids the transparent ends
+  max: PALETTE_LEN - 2,
+  min: 1
+}, maskOptions = {
+  component: {
+    ...baseMaskOptions,
+    override: colors,
+    skip: skipShadowsAndSpecificColors
+  },
+  alt: {
+    ...baseMaskOptions
+  },
+  button: {
+    ...baseMaskOptions,
+    override: {
+      ...colors,
+      borderColor: "transparent",
+      borderColorHover: "transparent"
+    },
+    skip: skipShadowsAndSpecificColors
+  }
+}, masks = {
+  identity: createIdentityMask(),
+  soften: createSoftenMask(),
+  soften2: createSoftenMask({ strength: 2 }),
+  soften3: createSoftenMask({ strength: 3 }),
+  strengthen: createStrengthenMask(),
+  inverse: createInverseMask(),
+  inverseSoften: combineMasks(createInverseMask(), createSoftenMask({ strength: 2 })),
+  inverseSoften2: combineMasks(createInverseMask(), createSoftenMask({ strength: 3 })),
+  inverseSoften3: combineMasks(createInverseMask(), createSoftenMask({ strength: 4 })),
+  inverseStrengthen2: combineMasks(
+    createInverseMask(),
+    createStrengthenMask({ strength: 2 })
+  ),
+  strengthenButSoftenBorder: createMask((template, options) => {
+    const stronger = createStrengthenMask().mask(template, options), softer = createSoftenMask().mask(template, options);
+    return {
+      ...stronger,
+      borderColor: softer.borderColor,
+      borderColorHover: softer.borderColorHover,
+      borderColorPress: softer.borderColorPress,
+      borderColorFocus: softer.borderColorFocus
+    };
+  }),
+  soften2Border1: createMask((template, options) => {
+    const softer2 = createSoftenMask({ strength: 2 }).mask(template, options), softer1 = createSoftenMask({ strength: 1 }).mask(template, options);
+    return {
+      ...softer2,
+      borderColor: softer1.borderColor,
+      borderColorHover: softer1.borderColorHover,
+      borderColorPress: softer1.borderColorPress,
+      borderColorFocus: softer1.borderColorFocus
+    };
+  }),
+  soften3FlatBorder: createMask((template, options) => {
+    const borderMask = createSoftenMask({ strength: 2 }).mask(template, options);
+    return {
+      ...createSoftenMask({ strength: 3 }).mask(template, options),
+      borderColor: borderMask.borderColor,
+      borderColorHover: borderMask.borderColorHover,
+      borderColorPress: borderMask.borderColorPress,
+      borderColorFocus: borderMask.borderColorFocus
+    };
+  }),
+  softenBorder: createMask((template, options) => {
+    const plain = skipMask.mask(template, options), softer = createSoftenMask().mask(template, options);
+    return {
+      ...plain,
+      borderColor: softer.borderColor,
+      borderColorHover: softer.borderColorHover,
+      borderColorPress: softer.borderColorPress,
+      borderColorFocus: softer.borderColorFocus
+    };
+  }),
+  softenBorder2: createMask((template, options) => {
+    const plain = skipMask.mask(template, options), softer = createSoftenMask({ strength: 2 }).mask(template, options);
+    return {
+      ...plain,
+      borderColor: softer.borderColor,
+      borderColorHover: softer.borderColorHover,
+      borderColorPress: softer.borderColorPress,
+      borderColorFocus: softer.borderColorFocus
+    };
+  })
+};
+export {
+  maskOptions,
+  masks
+};
+//# sourceMappingURL=masks.js.map

package/dist/esm/masks.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/masks.ts"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/theme-builder",
-  "version": "1.79.9",
+  "version": "1.79.11",
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
@@ -27,11 +27,11 @@
     }
   },
   "dependencies": {
-    "@tamagui/create-theme": "1.79.9",
+    "@tamagui/create-theme": "1.79.11",
     "color2k": "^2.0.2"
   },
   "devDependencies": {
-    "@tamagui/build": "1.79.9"
+    "@tamagui/build": "1.79.11"
   },
   "publishConfig": {
     "access": "public"

package/src/buildThemeSuite.ts

@@ -4,13 +4,28 @@ import {
   createMask,
   createSoftenMask,
 } from '@tamagui/create-theme'
-import { masks as defaultMasks, maskOptions } from '@tamagui/themes'
 
 import { buildMask } from './buildMask'
 import { getThemeSuitePalettes } from './buildThemeSuitePalettes'
+import { masks as defaultMasks, maskOptions } from './masks'
 import { createThemeBuilder } from './ThemeBuilder'
 import { BuildThemeMask, BuildThemeSuiteProps } from './types'
 
+// its offset by some transparent values etc
+const basePaletteOffset = 5
+const namedTemplateSlots = {
+  background: basePaletteOffset,
+  subtleBackground: basePaletteOffset + 1,
+  uiBackground: basePaletteOffset + 2,
+  hoverUIBackround: basePaletteOffset + 3,
+  activeUIBackround: basePaletteOffset + 4,
+  subtleBorder: basePaletteOffset + 5,
+  strongBorder: basePaletteOffset + 6,
+  hoverBorder: basePaletteOffset + 7,
+  strongBackground: basePaletteOffset + 8,
+  hoverStrongBackground: basePaletteOffset + 9,
+}
+
 export function buildThemeSuite({ baseTheme, subThemes }: BuildThemeSuiteProps) {
   const theme = baseTheme
 
@@ -25,7 +40,7 @@ export function buildThemeSuite({ baseTheme, subThemes }: BuildThemeSuiteProps)
   )
 
   // base palletes need to add in sub theme palettes if customized
-  const palettes = getThemeSuitePalettes(theme as any)
+  const palettes = getThemeSuitePalettes(theme)
 
   const max = palettes.dark.length - 1
   const min = 1
@@ -149,6 +164,13 @@ export function buildThemeSuite({ baseTheme, subThemes }: BuildThemeSuiteProps)
 
     return {
       base: template,
+      active: {
+        ...template,
+        background: namedTemplateSlots.strongBackground,
+        backgroundHover: namedTemplateSlots.hoverStrongBackground,
+        backgroundPress: namedTemplateSlots.hoverBorder,
+        backgroundFocus: namedTemplateSlots.strongBackground,
+      },
       accentLight: template,
       accentDark: template,
     }
@@ -180,13 +202,13 @@ export function buildThemeSuite({ baseTheme, subThemes }: BuildThemeSuiteProps)
     const componentTheme = [
       {
         parent: 'light_accent',
-        template: 'accentLight',
+        template: 'active',
         palette: 'lightAccent',
       },
 
       {
         parent: 'dark_accent',
-        template: 'accentDark',
+        template: 'active',
         palette: 'darkAccent',
       },
 

package/src/buildThemeSuitePalettes.ts

@@ -1,7 +1,6 @@
 import { hsla, parseToHsla, toHex } from 'color2k'
 
-import { getThemeSuiteScale } from './buildThemeSuiteScales'
-import { BuildTheme, BuildThemeSuitePalettes } from './types'
+import { BuildTheme, BuildThemeAnchor, BuildThemeSuitePalettes } from './types'
 
 /**
  * palette generally is:
@@ -9,6 +8,8 @@ import { BuildTheme, BuildThemeSuitePalettes } from './types'
  * [constrastBackground, backgroundTransparent, ...background, ...foreground, foregroundTransparent, accentForeground]
  */
 
+const paletteSize = 12
+
 const generateColorPalette = ({
   theme,
   scheme,
@@ -18,27 +19,106 @@ const generateColorPalette = ({
   scheme: 'light' | 'dark'
   forAccent?: boolean
 }) => {
-  // const { color, scale, accent, accentColor, accentScale } = theme
+  const baseTheme = forAccent ? theme.accent || theme : theme
+  const { anchors, scale } = baseTheme
+
+  let palette: string[] = []
+
+  const add = (h: number, s: number, l: number) => {
+    palette.push(hsla(h, s, l, 1))
+  }
+
+  const numAnchors = Object.keys(anchors).length
 
-  const color = forAccent ? theme.accent || theme.color : theme.color
-  const scale = forAccent ? theme.accentScale || theme.scale : theme.scale
+  for (const [anchorIndex, anchor] of anchors.entries()) {
+    const [h, s, l] = [anchor.hue[scheme], anchor.sat[scheme], anchor.lum[scheme]]
 
-  const { lumScale, satScale } = getThemeSuiteScale(theme, forAccent)
-  const [hue, sat, lum] = parseToHsla(color)
-  const isDark = scheme === 'dark'
+    if (anchorIndex !== 0) {
+      const lastAnchor = anchors[anchorIndex - 1]
+      const steps = anchor.index - lastAnchor.index
 
-  const lumValues = isDark ? lumScale.dark : lumScale.light
+      const lastHue = lastAnchor.hue[scheme]
+      const lastSat = lastAnchor.sat[scheme]
+      const lastLum = lastAnchor.lum[scheme]
 
-  let palette: string[] = lumValues.map((lum, idx) => {
-    if (sat > 0) {
-      if (satScale) {
-        return hsla(hue, satScale[scheme][idx], lum, 1)
+      const stepHue = (lastHue - h) / steps
+      const stepSat = (lastSat - s) / steps
+      const stepLum = (lastLum - l) / steps
+
+      // backfill:
+      for (let step = lastAnchor.index + 1; step < anchor.index; step++) {
+        const str = anchor.index - step
+        add(h + stepHue * str, s + stepSat * str, l + stepLum * str)
       }
-      return hsla(hue, sat, lum, 1)
     }
-    return hsla(0, 0, lum, 1)
-  })
 
+    add(h, s, l)
+
+    const isLastAnchor = anchorIndex === numAnchors - 1
+    if (isLastAnchor && palette.length < paletteSize) {
+      // forwardfill:
+      for (let step = anchor.index + 1; step < paletteSize; step++) {
+        add(h, s, l)
+      }
+    }
+  }
+
+  // if (strategy?.type === 'automatic') {
+  //   const hslas = {
+  //     background: parseToHsla(strategy.background),
+  //     foreground: parseToHsla(strategy.foreground),
+  //   }
+
+  //   palette = [
+  //     // backgrounds
+  //     ...new Array(10).fill(0).map((_, i) => {
+  //       const [h, s, l] = hslas.background
+
+  //       if (isDark) {
+  //         const str = 9 - i
+  //         const minLum = 0.05
+  //         const by = (l - minLum) / 10
+
+  //         return hsla(
+  //           h,
+  //           s,
+  //           // go to dark or light
+  //           l - by * str,
+  //           1
+  //         )
+  //       } else {
+  //         const str = 9 - i
+  //         const maxLum = 0.95
+  //         const by = (maxLum - l) / 10
+  //         return hsla(h, s, l + by * str, 1)
+  //       }
+  //     }),
+  //     // colors
+  //     ...new Array(2).fill(0).map((_, i) => {
+  //       const [h, s, l] = hslas.foreground
+  //       return hsla(
+  //         h,
+  //         s,
+  //         // go to dark or light
+  //         l - (i === 0 ? 0.1 : 0) - (forAccent ? 1 - l : 0),
+  //         1
+  //       )
+  //     }),
+  //   ]
+  // } else {
+  //   const lumValues = isDark ? lumScale.dark : lumScale.light
+  //   palette = lumValues.map((lum, idx) => {
+  //     const sat = satScale[scheme][idx]
+
+  //     if (theme.hueColor && idx >= 10) {
+  //       return hsla(theme.hueColor, sat, lum, 1)
+  //     }
+
+  //     return hsla(hue, sat, lum, 1)
+  //   })
+  // }
+
+  // add transparent values
   const [background] = palette
   const foreground = palette[palette.length - 1]
 
@@ -56,22 +136,15 @@ const generateColorPalette = ({
   palette = [...transparentValues[0], ...palette, ...reverseForeground]
 
   if (theme.accent) {
-    const baseAccent = forAccent ? theme.color : theme.accent
-    const accentHsla = parseToHsla(baseAccent)
-    const accentLum = accentHsla[2]
-    const isAccentLight = accentLum > 0.5
-
-    const oppositeLightnessAccent = isAccentLight
-      ? toHex(hsla(accentHsla[0], accentHsla[1], 1 - accentLum, 1))
-      : theme.accent
-
-    const fg = isAccentLight && !isDark ? oppositeLightnessAccent : baseAccent
-    const bg = fg === baseAccent ? oppositeLightnessAccent : baseAccent
+    const accentPalette = generateColorPalette({
+      theme: theme.accent,
+      scheme,
+    })
 
     // unshift bg
-    palette.unshift(bg)
+    palette.unshift(accentPalette[11])
     // push color
-    palette.push(fg)
+    palette.push(accentPalette[accentPalette.length - 6])
   } else {
     // were keeping the palettes the same length with or without accent to avoid headache
     palette.unshift('rgba(0,0,0,0)')