@tamagui/theme-builder 1.79.18 → 1.80.0

package/src/buildThemeSuiteScales.ts

@@ -1,254 +0,0 @@
-import { hsla, parseToHsla, toHex } from 'color2k'
-
-import { BuildTheme, ScaleTypeName } from './types'
-
-// export function getColorForegroundBackground(color: string, isDarkMode = false) {
-//   const [h, s, l] = parseToHsla(color)
-//   const isColorLight = l > 0.5
-//   const oppositeLightness = l > 0.5 ? 1 - l : 0.5 + l
-//   const oppositeLightnessColor = toHex(hsla(h, s, oppositeLightness, 1))
-//   const foreground = isDarkMode ? color : oppositeLightnessColor
-//   const background = foreground === color ? oppositeLightnessColor : color
-//   return {
-//     foreground,
-//     foregroundLightness: foreground === color ? l : oppositeLightness,
-//     background,
-//     backgroundLightness: foreground !== color ? l : oppositeLightness,
-//   }
-// }
-
-// if (scale === 'automatic') {
-//   const lightColors = getColorForegroundBackground(baseColor, false)
-//   const darkColors = getColorForegroundBackground(baseColor, true)
-
-//   const scaleLen = 12
-//   const arr = new Array(scaleLen).fill(0)
-
-//   function getScale(bgL: number, fgL: number) {
-//     const stepSize = (fgL - bgL) / scaleLen
-//     return arr.map((_, i) => bgL + i * stepSize)
-//   }
-
-//   return {
-//     ...base,
-//     lumScale: {
-//       light: getScale(lightColors.backgroundLightness, lightColors.foregroundLightness),
-//       dark: getScale(darkColors.backgroundLightness, darkColors.foregroundLightness),
-//     },
-//   }
-// }
-
-export type ScaleType<A extends ScaleTypeName = ScaleTypeName> = {
-  name: string
-  createdFrom?: A // we copy the scale values - keeping this helps us refer back to the scale. also helpful if we change scales in the future
-  lumScale?: {
-    light: Array<number>
-    dark: Array<number>
-  }
-  satScale?: {
-    light: Array<number>
-    dark: Array<number>
-  }
-}
-
-export function getScalePreset<Name extends ScaleTypeName>(
-  a: Name
-): (typeof scaleTypes)[Name] {
-  return scaleTypes[a]
-}
-
-const fullSatScale = {
-  light: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
-  dark: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
-}
-
-export const scaleTypes = {
-  custom: {
-    name: 'Custom',
-    createdFrom: 'custom',
-  },
-
-  radix: {
-    name: 'Radius',
-    createdFrom: 'radix',
-    lumScale: {
-      light: [
-        0.992, 0.95, 0.92, 0.868, 0.832, 0.804, 0.747, 0.659, 0.541, 0.453, 0.27, 0.086,
-      ],
-      dark: [
-        0.07, 0.11, 0.136, 0.158, 0.179, 0.205, 0.243, 0.313, 0.439, 0.52, 0.61, 0.93,
-      ],
-    },
-    satScale: {
-      light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
-      dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
-    },
-  },
-
-  'radix-b': {
-    name: 'Radius B',
-    createdFrom: 'radix-b',
-    lumScale: {
-      light: [
-        0.92, 0.868, 0.832, 0.804, 0.747, 0.7, 0.659, 0.541, 0.453, 0.36, 0.32, 0.27,
-      ],
-      dark: [
-        0.11, 0.136, 0.158, 0.179, 0.205, 0.243, 0.313, 0.439, 0.47, 0.52, 0.56, 0.61,
-      ],
-    },
-    satScale: {
-      light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
-      dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
-    },
-  },
-
-  'radius-bright': {
-    name: 'Radius Bright',
-    createdFrom: 'radius-bright',
-    lumScale: {
-      light: [1, 0.954, 0.94, 0.9, 0.85, 0.804, 0.747, 0.659, 0.541, 0.453, 0.27, 0.086],
-      dark: [0, 0.1, 0.16, 0.2, 0.24, 0.36, 0.42, 0.46, 0.5, 0.54, 0.84, 0.97],
-    },
-    satScale: {
-      light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
-      dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
-    },
-  },
-
-  'radius-bold': {
-    name: 'Radius Bold',
-    createdFrom: 'radius-bold',
-    lumScale: {
-      light: [1, 0.9, 0.885, 0.82, 0.77, 0.54, 0.32, 0.25, 0.16, 0.12, 0.075, 0],
-      dark: [0, 0.13, 0.2, 0.24, 0.3, 0.34, 0.45, 0.55, 0.65, 0.885, 0.9, 1],
-    },
-    satScale: {
-      light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
-      dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
-    },
-  },
-
-  linear: {
-    name: 'Linear',
-    createdFrom: 'linear',
-    lumScale: {
-      light: [1, 0.925, 0.9, 0.85, 0.75, 0.6, 0.4, 0.3, 0.25, 0.15, 0.125, 0],
-      dark: [0, 0.075, 0.125, 0.15, 0.25, 0.4, 0.6, 0.75, 0.85, 0.9, 0.925, 1],
-    },
-    satScale: {
-      light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
-      dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
-    },
-  },
-
-  neon: {
-    name: 'Neon',
-    createdFrom: 'neon',
-    lumScale: {
-      light: [
-        0.978, 0.938, 0.902, 0.868, 0.832, 0.804, 0.747, 0.659, 0.541, 0.453, 0.27, 0.086,
-      ],
-      dark: [
-        0.07, 0.11, 0.136, 0.158, 0.179, 0.205, 0.243, 0.313, 0.439, 0.52, 0.61, 0.93,
-      ],
-    },
-    satScale: {
-      light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
-      dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
-    },
-  },
-
-  'neon-bright': {
-    name: 'Neon B',
-    createdFrom: 'neon-bright',
-    lumScale: {
-      light: [0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.2, 0.1, 0],
-      dark: [0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.2, 0.1, 0],
-    },
-    satScale: {
-      light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
-      dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
-    },
-  },
-
-  'neon-c': {
-    name: 'Neon C',
-    createdFrom: 'neon-c',
-    lumScale: {
-      light: [0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.2, 0.1, 0],
-      dark: [0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.2, 0.1, 0],
-    },
-    satScale: fullSatScale,
-  },
-
-  pastel: {
-    name: 'Pastel',
-    createdFrom: 'pastel',
-    lumScale: {
-      light: [
-        0.978, 0.938, 0.902, 0.868, 0.832, 0.804, 0.747, 0.659, 0.541, 0.453, 0.36, 0.2,
-      ],
-      dark: [0.07, 0.15, 0.176, 0.198, 0.2, 0.225, 0.243, 0.313, 0.439, 0.52, 0.61, 0.9],
-    },
-    satScale: {
-      light: [0.5, 0.45, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
-      dark: [0.5, 0.45, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
-    },
-  },
-
-  'pastel-desaturating': {
-    name: 'Pastel D',
-    createdFrom: 'pastel-desaturating',
-    lumScale: {
-      light: [
-        0.935, 0.838, 0.802, 0.768, 0.732, 0.704, 0.647, 0.559, 0.441, 0.353, 0.17, 0,
-      ],
-      dark: [0.085, 0.1, 0.12, 0.14, 0.17, 0.22, 0.27, 0.35, 0.409, 0.49, 0.58, 0.9],
-    },
-    satScale: {
-      light: [0.6, 0.5, 0.4, 0.35, 0.3, 0.3, 0.3, 0.3, 0.4, 0.35, 0.25, 0.15],
-      dark: [0.6, 0.5, 0.4, 0.35, 0.3, 0.3, 0.3, 0.3, 0.4, 0.35, 0.25, 0.15],
-    },
-  },
-} satisfies Record<ScaleTypeName, ScaleType>
-
-const adjustScale = (
-  theme: BuildTheme,
-  scale: number[],
-  userVal: number,
-  isLight = false
-) => {
-  const scaleMin = scale.reduce((acc, cur) => Math.min(cur, acc), Infinity)
-  const scaleMax = scale.reduce((acc, cur) => Math.max(cur, acc), 0)
-
-  if (scaleMin === scaleMax) {
-    return scale.map(() => userVal)
-  }
-
-  const res = scale.map((val, i) => {
-    if (userVal > 0.5) {
-      return val + (userVal - 0.5) * (1 - val)
-    } else {
-      return val * (1 / (1.5 - userVal))
-    }
-
-    // // goes from 0 - 1 where 0 = closest to edge, 1 = furthest
-    // const distanceFromEdge = 2 * (userVal < 0.5 ? userVal : 1 - userVal)
-
-    // // goes from 0 - 1 where 0 = furthest from edge, 1 = closest
-    // const strengthOfUserVal = 1 - distanceFromEdge
-
-    // // gets stronger as we get closer to edges
-    // const next = userVal * strengthOfUserVal + val * (1 - strengthOfUserVal)
-
-    // return clamp(
-    //   val < 0
-    //     ? // TODO
-    //       val
-    //     : next,
-    //   [0, 1]
-    // )
-  })
-
-  return res
-}

package/src/masks.ts

@@ -1,147 +0,0 @@
-import {
-  MaskDefinitions,
-  MaskOptions,
-  combineMasks,
-  createIdentityMask,
-  createInverseMask,
-  createMask,
-  createSoftenMask,
-  createStrengthenMask,
-  skipMask,
-} from '@tamagui/create-theme'
-
-const shadows = {
-  shadowColor: 0,
-  shadowColorHover: 0,
-  shadowColorPress: 0,
-  shadowColorFocus: 0,
-}
-
-const colors = {
-  ...shadows,
-  color: 0,
-  colorHover: 0,
-  colorFocus: 0,
-  colorPress: 0,
-}
-
-const 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,
-}
-
-const skipShadowsAndSpecificColors = {
-  ...shadows,
-  ...templateColorsSpecific,
-}
-
-const PALETTE_LEN = 14
-
-const baseMaskOptions: MaskOptions = {
-  override: shadows,
-  skip: shadows,
-  // avoids the transparent ends
-  max: PALETTE_LEN - 2,
-  min: 1,
-}
-
-export const maskOptions = {
-  component: {
-    ...baseMaskOptions,
-    override: colors,
-    skip: skipShadowsAndSpecificColors,
-  },
-  alt: {
-    ...baseMaskOptions,
-  },
-  button: {
-    ...baseMaskOptions,
-    override: {
-      ...colors,
-      borderColor: 'transparent',
-      borderColorHover: 'transparent',
-    },
-    skip: skipShadowsAndSpecificColors,
-  },
-} satisfies Record<string, MaskOptions>
-
-export const 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)
-    const 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)
-    const 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)
-    const softer3 = createSoftenMask({ strength: 3 }).mask(template, options)
-    return {
-      ...softer3,
-      borderColor: borderMask.borderColor,
-      borderColorHover: borderMask.borderColorHover,
-      borderColorPress: borderMask.borderColorPress,
-      borderColorFocus: borderMask.borderColorFocus,
-    }
-  }),
-  softenBorder: createMask((template, options) => {
-    const plain = skipMask.mask(template, options)
-    const 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)
-    const softer = createSoftenMask({ strength: 2 }).mask(template, options)
-    return {
-      ...plain,
-      borderColor: softer.borderColor,
-      borderColorHover: softer.borderColorHover,
-      borderColorPress: softer.borderColorPress,
-      borderColorFocus: softer.borderColorFocus,
-    }
-  }),
-} satisfies MaskDefinitions

package/src/types.ts

@@ -1,102 +0,0 @@
-// only used by the studio theme builder generated:
-
-import { MaskOptions, Template } from '@tamagui/create-theme'
-
-export type SubTheme = BuildTheme | BuildThemeMask
-
-export type BuildThemeSuiteProps = {
-  baseTheme: BuildTheme
-  subThemes?: SubTheme[]
-  componentMask?: MaskOptions
-  templates?: {
-    base: Template
-    accentLight: Template
-    accentDark: Template
-  }
-}
-
-export type BuildThemeSuitePalettes = {
-  light: string[]
-  dark: string[]
-  lightAccent?: string[]
-  darkAccent?: string[]
-}
-
-export type ScaleTypeName =
-  | 'custom'
-  | 'radix'
-  | 'radix-b'
-  | 'radius-bold'
-  | 'radius-bright'
-  | 'linear'
-  | 'pastel'
-  | 'pastel-desaturating'
-  | 'neon'
-  | 'neon-bright'
-  | 'neon-c'
-
-export type BuildThemeBase = {
-  id: string
-  name: string
-  errors?: string[]
-}
-
-export type BuildThemeAnchor = {
-  index: number
-  hue: {
-    light: number
-    dark: number
-    sync?: boolean
-    syncLeft?: boolean
-  }
-  sat: {
-    light: number
-    dark: number
-    sync?: boolean
-    syncLeft?: boolean
-  }
-  lum: {
-    light: number
-    dark: number
-  }
-}
-
-export type BuildTheme = BuildThemeBase & {
-  type: 'theme'
-
-  scale: ScaleTypeName
-
-  anchors: BuildThemeAnchor[]
-
-  template?: Template
-
-  accent?: BuildTheme
-}
-
-// TODO type here isnt the same as type in BuildTheme
-export type BuildMask = { id: string } & (
-  | {
-      type: 'strengthen'
-      strength: number
-    }
-  | {
-      type: 'soften'
-      strength: number
-    }
-  | {
-      type: 'inverse'
-    }
-  | {
-      type: 'strengthenBorder'
-      strength: number
-    }
-  | {
-      type: 'softenBorder'
-      strength: number
-    }
-)
-
-export type BuildThemeMask = BuildThemeBase & {
-  type: 'mask'
-  masks: BuildMask[]
-}