@tamagui/theme-builder 1.79.6 → 1.79.8

package/src/buildThemeSuite.ts

@@ -117,40 +117,40 @@ export function buildThemeSuite({ baseTheme, subThemes }: BuildThemeSuiteProps)
       ...baseTemplate,
     }
 
-    const accentTemplateLight = {
-      background: 0,
-      backgroundHover: baseTemplate.backgroundHover + 4,
-      backgroundPress: baseTemplate.backgroundPress + 4,
-      backgroundFocus: baseTemplate.backgroundFocus + 4,
-      borderColor: baseTemplate.borderColor + 2,
-      borderColorHover: baseTemplate.borderColorHover + 2,
-      borderColorFocus: baseTemplate.borderColorFocus + 2,
-      borderColorPress: baseTemplate.borderColorPress + 2,
-      color: -5,
-      colorHover: -6,
-      colorPress: -7,
-      colorFocus: -5,
-    }
-
-    const accentTemplateDark = {
-      background: baseTemplate.backgroundHover + 4,
-      backgroundHover: baseTemplate.backgroundHover + 5,
-      backgroundPress: baseTemplate.backgroundPress + 3,
-      backgroundFocus: baseTemplate.backgroundFocus + 5,
-      borderColor: baseTemplate.borderColor + 2,
-      borderColorHover: baseTemplate.borderColorHover + 2,
-      borderColorFocus: baseTemplate.borderColorFocus + 2,
-      borderColorPress: baseTemplate.borderColorPress + 2,
-      color: -5,
-      colorHover: -6,
-      colorPress: -7,
-      colorFocus: -5,
-    }
+    // const accentTemplateLight = {
+    //   background: 0,
+    //   backgroundHover: 1,
+    //   backgroundPress: baseTemplate.backgroundPress + 4,
+    //   backgroundFocus: baseTemplate.backgroundFocus + 4,
+    //   borderColor: baseTemplate.borderColor + 2,
+    //   borderColorHover: baseTemplate.borderColorHover + 2,
+    //   borderColorFocus: baseTemplate.borderColorFocus + 2,
+    //   borderColorPress: baseTemplate.borderColorPress + 2,
+    //   color: -5,
+    //   colorHover: -6,
+    //   colorPress: -7,
+    //   colorFocus: -5,
+    // }
+
+    // const accentTemplateDark = {
+    //   background: baseTemplate.background + 4,
+    //   backgroundHover: baseTemplate.backgroundHover + 5,
+    //   backgroundPress: baseTemplate.backgroundPress + 3,
+    //   backgroundFocus: baseTemplate.backgroundFocus + 5,
+    //   borderColor: baseTemplate.borderColor + 2,
+    //   borderColorHover: baseTemplate.borderColorHover + 2,
+    //   borderColorFocus: baseTemplate.borderColorFocus + 2,
+    //   borderColorPress: baseTemplate.borderColorPress + 2,
+    //   color: -5,
+    //   colorHover: -6,
+    //   colorPress: -7,
+    //   colorFocus: -5,
+    // }
 
     return {
       base: template,
-      accentLight: accentTemplateLight,
-      accentDark: accentTemplateDark,
+      accentLight: template,
+      accentDark: template,
     }
   }
 
@@ -216,10 +216,7 @@ export function buildThemeSuite({ baseTheme, subThemes }: BuildThemeSuiteProps)
         ...customMaskOptions.component,
       },
 
-      Switch: {
-        mask: 'soften2',
-        ...customMaskOptions.component,
-      },
+      Switch: componentTheme,
 
       SwitchThumb: {
         mask: 'inverse',
@@ -367,6 +364,8 @@ export function buildThemeSuite({ baseTheme, subThemes }: BuildThemeSuiteProps)
 
   const built = builder.build()
 
+  console.info('built themes', built)
+
   return {
     built,
     palettes,

package/src/buildThemeSuiteScales.ts

@@ -1,19 +1,54 @@
-import { parseToHsla } from 'color2k'
+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,
+  }
+}
+
 export const getThemeSuiteScale = (theme: BuildTheme, accent?: boolean): ScaleType => {
-  const color = accent ? theme.accent || theme.color : theme.color
+  const baseColor = accent ? theme.accent || theme.color : theme.color
   const scale = accent ? theme.accentScale || theme.scale : theme.scale
 
-  let base = scaleTypes[theme.scale || '']
+  let base = scaleTypes[scale]
 
-  if (!color) {
+  if (!baseColor) {
     return base
   }
 
-  const [h, s, l] = parseToHsla(color)
-  // const isColorBright = l > 0.5
+  const [h, s, l] = parseToHsla(baseColor)
+
+  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),
+      },
+    }
+  }
 
   return {
     ...base,
@@ -44,6 +79,14 @@ export type ScaleType<A extends ScaleTypeName = ScaleTypeName> = {
 }
 
 export const scaleTypes: Record<ScaleTypeName, ScaleType> = {
+  automatic: {
+    createdFrom: 'automatic',
+    name: 'Automatic',
+    lumScale: {
+      light: [],
+      dark: [],
+    },
+  },
   radix: {
     name: 'Radius',
     createdFrom: 'radix',

package/src/types.ts

@@ -21,6 +21,7 @@ export type BuildThemeSuitePalettes = {
 }
 
 export type ScaleTypeName =
+  | 'automatic'
   | 'radix'
   | 'radix-b'
   | 'radius-bold'
@@ -42,11 +43,8 @@ export type BuildTheme = BuildThemeBase & {
   type: 'theme'
   color: string
   scale: ScaleTypeName
-  spreadLuminance?: number
-  spreadSaturation?: number
   template?: Template
   accent?: string
-  accentColor?: string
   accentScale?: ScaleTypeName
 }
 

package/types/buildThemeSuite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildThemeSuite.d.ts","sourceRoot":"","sources":["../src/buildThemeSuite.ts"],"names":[],"mappings":"AAWA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE9D,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwW7E;AAED,MAAM,MAAM,qBAAqB,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA"}
+{"version":3,"file":"buildThemeSuite.d.ts","sourceRoot":"","sources":["../src/buildThemeSuite.ts"],"names":[],"mappings":"AAWA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE9D,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuW7E;AAED,MAAM,MAAM,qBAAqB,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA"}

package/types/buildThemeSuiteScales.d.ts

@@ -1,4 +1,10 @@
 import { BuildTheme, ScaleTypeName } from './types';
+export declare function getColorForegroundBackground(color: string, isDarkMode?: boolean): {
+    foreground: string;
+    foregroundLightness: number;
+    background: string;
+    backgroundLightness: number;
+};
 export declare const getThemeSuiteScale: (theme: BuildTheme, accent?: boolean) => ScaleType;
 export type ScaleType<A extends ScaleTypeName = ScaleTypeName> = {
     name: string;

package/types/buildThemeSuiteScales.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildThemeSuiteScales.d.ts","sourceRoot":"","sources":["../src/buildThemeSuiteScales.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEnD,eAAO,MAAM,kBAAkB,UAAW,UAAU,WAAW,OAAO,KAAG,SA0BxE,CAAA;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,IAAI;IAC/D,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,CAAC,CAAA;IACf,QAAQ,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;QACpB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;KACpB,CAAA;IACD,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;QACpB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;KACpB,CAAA;CACF,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,SAAS,CA0HvD,CAAA"}
+{"version":3,"file":"buildThemeSuiteScales.d.ts","sourceRoot":"","sources":["../src/buildThemeSuiteScales.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEnD,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,UAAQ;;;;;EAa7E;AAED,eAAO,MAAM,kBAAkB,UAAW,UAAU,WAAW,OAAO,KAAG,SA8CxE,CAAA;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,IAAI;IAC/D,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,CAAC,CAAA;IACf,QAAQ,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;QACpB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;KACpB,CAAA;IACD,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;QACpB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;KACpB,CAAA;CACF,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,SAAS,CAkIvD,CAAA"}

package/types/types.d.ts

@@ -15,7 +15,7 @@ export type BuildThemeSuitePalettes = {
     lightAccent?: string[];
     darkAccent?: string[];
 };
-export type ScaleTypeName = 'radix' | 'radix-b' | 'radius-bold' | 'radius-bright' | 'linear' | 'pastel' | 'pastel-desaturating' | 'neon' | 'neon-bright' | 'neon-c';
+export type ScaleTypeName = 'automatic' | 'radix' | 'radix-b' | 'radius-bold' | 'radius-bright' | 'linear' | 'pastel' | 'pastel-desaturating' | 'neon' | 'neon-bright' | 'neon-c';
 export type BuildThemeBase = {
     id: string;
     name: string;
@@ -25,11 +25,8 @@ export type BuildTheme = BuildThemeBase & {
     type: 'theme';
     color: string;
     scale: ScaleTypeName;
-    spreadLuminance?: number;
-    spreadSaturation?: number;
     template?: Template;
     accent?: string;
-    accentColor?: string;
     accentScale?: ScaleTypeName;
 };
 export type BuildMask = {

package/types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE7D,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,UAAU,CAAA;IACrB,SAAS,CAAC,EAAE,CAAC,UAAU,GAAG,cAAc,CAAC,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,WAAW,CAAA;IAC3B,SAAS,CAAC,EAAE;QACV,IAAI,EAAE,QAAQ,CAAA;QACd,WAAW,EAAE,QAAQ,CAAA;QACrB,UAAU,EAAE,QAAQ,CAAA;KACrB,CAAA;CACF,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,aAAa,GACrB,OAAO,GACP,SAAS,GACT,aAAa,GACb,eAAe,GACf,QAAQ,GACR,QAAQ,GACR,qBAAqB,GACrB,MAAM,GACN,aAAa,GACb,QAAQ,CAAA;AAEZ,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG;IACxC,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,aAAa,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,aAAa,CAAA;CAC5B,CAAA;AAGD,MAAM,MAAM,SAAS,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG,CACrC;IACE,IAAI,EAAE,YAAY,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;CACjB,GACD;IACE,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;CACjB,GACD;IACE,IAAI,EAAE,SAAS,CAAA;CAChB,GACD;IACE,IAAI,EAAE,kBAAkB,CAAA;IACxB,QAAQ,EAAE,MAAM,CAAA;CACjB,GACD;IACE,IAAI,EAAE,cAAc,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;CACjB,CACJ,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG;IAC5C,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,SAAS,EAAE,CAAA;CACnB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE7D,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,UAAU,CAAA;IACrB,SAAS,CAAC,EAAE,CAAC,UAAU,GAAG,cAAc,CAAC,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,WAAW,CAAA;IAC3B,SAAS,CAAC,EAAE;QACV,IAAI,EAAE,QAAQ,CAAA;QACd,WAAW,EAAE,QAAQ,CAAA;QACrB,UAAU,EAAE,QAAQ,CAAA;KACrB,CAAA;CACF,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,aAAa,GACrB,WAAW,GACX,OAAO,GACP,SAAS,GACT,aAAa,GACb,eAAe,GACf,QAAQ,GACR,QAAQ,GACR,qBAAqB,GACrB,MAAM,GACN,aAAa,GACb,QAAQ,CAAA;AAEZ,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG;IACxC,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,aAAa,CAAA;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,aAAa,CAAA;CAC5B,CAAA;AAGD,MAAM,MAAM,SAAS,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG,CACrC;IACE,IAAI,EAAE,YAAY,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;CACjB,GACD;IACE,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;CACjB,GACD;IACE,IAAI,EAAE,SAAS,CAAA;CAChB,GACD;IACE,IAAI,EAAE,kBAAkB,CAAA;IACxB,QAAQ,EAAE,MAAM,CAAA;CACjB,GACD;IACE,IAAI,EAAE,cAAc,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;CACjB,CACJ,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG;IAC5C,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,SAAS,EAAE,CAAA;CACnB,CAAA"}