@tamagui/web 1.5.8 → 1.5.10

package/src/helpers/getThemeCSSRules.ts

@@ -41,80 +41,112 @@ export function getThemeCSSRules({
   }
 
   const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'
-  const selectors = names.map((name) => {
-    return `${CNP}${name}`
-  })
+  const selectorsSet = new Set(
+    names.map((name) => {
+      return `${CNP}${name}`
+    })
+  )
 
   // since we dont specify dark/light in classnames we have to do an awkward specificity war
   // use config.maxDarkLightNesting to determine how deep you can nest until it breaks
   if (hasDarkLight) {
     for (const subName of names) {
-      const isDark = isDarkOrLightBase || subName.startsWith('dark_')
-      const max = config.maxDarkLightNesting ?? 3
+      const isDark = themeName === 'dark' || subName.startsWith('dark_')
+      const maxDepth = config.maxDarkLightNesting ?? 3
 
       if (!(isDark || subName.startsWith('light_'))) {
         // neither light nor dark subtheme, just generate one selector with :root:root which
         // will override all :root light/dark selectors generated below
-        selectors.push(`:root:root ${CNP}${subName}`)
+        selectorsSet.add(`:root:root ${CNP}${subName}`)
         continue
       }
 
       const childSelector = `${CNP}${subName.replace(isDark ? 'dark_' : 'light_', '')}`
-      const order = isDark ? ['dark', 'light'] : ['light', 'dark']
-      if (isDarkOrLightBase) {
-        order.reverse()
-      }
-      const [stronger, weaker] = order
-      const numSelectors = Math.round(max * 1.5)
-
-      for (let pi = 0; pi < numSelectors; pi++) {
-        const isOdd = pi % 2 === 1
-        if (isOdd && pi < 3) continue
-        const parents = new Array(pi + 1).fill(undefined).map((_, psi) => {
-          return `${CNP}${psi % 2 === 0 ? stronger : weaker}`
-        })
-        let parentSelectors = parents.length > 1 ? parents.slice(1) : parents
-        if (isOdd) {
-          const [_first, second, ...rest] = parentSelectors
-          parentSelectors = [second, ...rest, second]
+
+      const [altLightDark, altSubTheme] = [
+        isDark ? ['dark', 'light'] : ['light', 'dark'],
+        isDark ? ['dark', 'sub_theme'] : ['light', 'sub_theme'],
+      ]
+
+      for (const order of [altLightDark, altSubTheme]) {
+        if (isDarkOrLightBase) {
+          order.reverse()
         }
-        // avoid .t_light .t_light at the end (make sure child is unique from last parent)
-        const lastParentSelector = parentSelectors[parentSelectors.length - 1]
-        selectors.push(
-          `${parentSelectors.join(' ')} ${
+        const [stronger, weaker] = order
+        const numSelectors = Math.round(maxDepth * 1.5)
+
+        for (let depth = 0; depth < numSelectors; depth++) {
+          const isOdd = depth % 2 === 1
+
+          // wtf is this continue:
+          if (isOdd && depth < 3) {
+            continue
+          }
+
+          const parents = new Array(depth + 1).fill(0).map((_, psi) => {
+            return `${CNP}${psi % 2 === 0 ? stronger : weaker}`
+          })
+
+          let parentSelectors = parents.length > 1 ? parents.slice(1) : parents
+
+          if (isOdd) {
+            const [_first, second, ...rest] = parentSelectors
+            parentSelectors = [second, ...rest, second]
+          }
+
+          const lastParentSelector = parentSelectors[parentSelectors.length - 1]
+          const nextChildSelector =
             childSelector === lastParentSelector ? '' : childSelector
-          }`
-        )
+
+          // for light/dark/light:
+          selectorsSet.add(`${parentSelectors.join(' ')} ${nextChildSelector}`.trim())
+        }
       }
     }
   }
 
-  const selectorsString = selectors.map((x) => {
-    // only do our :root attach if it's not light/dark - not support sub themes on root saves a lot of effort/size
-    // this isBaseTheme logic could probably be done more efficiently above
-    const isBaseTheme =
-      x === '.t_dark' ||
-      x === '.t_light' ||
-      x.startsWith('.t_dark ') ||
-      x.startsWith('.t_light ')
-    const rootSep = isBaseTheme && config.themeClassNameOnRoot ? '' : ' '
-    return `:root${rootSep}${x}`
-  })
-  const css = `${selectorsString.join(', ')} {${vars}}`
+  const selectors = [...selectorsSet]
+
+  // only do our :root attach if it's not light/dark - not support sub themes on root saves a lot of effort/size
+  // this isBaseTheme logic could probably be done more efficiently above
+  const selectorsString = selectors
+    .map((x) => {
+      const rootSep = isBaseTheme(x) && config.themeClassNameOnRoot ? '' : ' '
+      return `:root${rootSep}${x}`
+    })
+    .join(', ')
+
+  const css = `${selectorsString} {${vars}}`
   cssRuleSets.push(css)
 
-  if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {
-    // add media prefers for dark/light base
+  if (config.shouldAddPrefersColorThemes) {
+    const bgString = variableToString(theme.background)
+    const fgString = variableToString(theme.color)
+    const bodyRules = `body{background:${bgString};color:${fgString};}`
     const isDark = themeName.startsWith('dark')
-    cssRuleSets.push(
-      `@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {
-body { background:${variableToString(theme.background)}; color: ${variableToString(
-        theme.color
-      )} }
-:root {${vars} } 
+    const baseName = isDark ? 'dark' : 'light'
+    const lessSpecificSelectors = selectors
+      .map((x) => {
+        if (x == darkSelector || x === lightSelector) return `:root`
+        return x.replace(/^\.t_(dark|light) /, '').trim()
+      })
+      .filter(Boolean)
+      .join(', ')
+    const themeRules = `${lessSpecificSelectors} {${vars}}`
+    const prefersMediaSelectors = `@media(prefers-color-scheme:${baseName}){
+  ${bodyRules}
+  ${themeRules}
 }`
-    )
+    cssRuleSets.push(prefersMediaSelectors)
   }
 
   return cssRuleSets
 }
+
+const darkSelector = '.t_dark'
+const lightSelector = '.t_light'
+const isBaseTheme = (x: string) =>
+  x === darkSelector ||
+  x === lightSelector ||
+  x.startsWith('.t_dark ') ||
+  x.startsWith('.t_light ')

package/src/helpers/themes.ts

@@ -42,23 +42,20 @@ export function proxyThemeToParents(
       return cur.join('_')
     })
 
-  const len = parents.length
+  const numParents = parents.length
 
   // proxy fallback values to parent theme values
   return new Proxy(theme, {
     get(target, key) {
-      if (key === GetThemeUnwrapped) {
-        return theme
-      }
-      if (!len || Reflect.has(target, key)) {
-        return Reflect.get(target, key)
-      }
-      // check parents
-      for (let i = len - 1; i >= 0; i--) {
-        const parent = themes[parents[i]]
-        if (!parent) continue
-        if (Reflect.has(parent, key)) {
-          return Reflect.get(parent, key)
+      if (key === GetThemeUnwrapped) return theme
+      if (numParents && !Reflect.has(target, key)) {
+        // check parents
+        for (let i = numParents - 1; i >= 0; i--) {
+          const parent = themes[parents[i]]
+          if (!parent) continue
+          if (Reflect.has(parent, key)) {
+            return Reflect.get(parent, key)
+          }
         }
       }
       return Reflect.get(target, key)

package/src/index.ts

@@ -33,6 +33,7 @@ export * from './helpers/matchMedia.js'
 export * from './helpers/proxyThemeVariables.js'
 export * from './helpers/themeable.js'
 export * from './helpers/withStaticProperties.js'
+export * from './helpers/normalizeColor.js'
 
 export * from './contexts/ButtonNestingContext.js'
 

package/types/helpers/getThemeCSSRules.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getThemeCSSRules.d.ts","sourceRoot":"","sources":["../../src/helpers/getThemeCSSRules.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAGlE,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,SAAS,EACT,KAAK,EACL,KAAK,GACN,EAAE;IACD,MAAM,EAAE,kBAAkB,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,MAAM,EAAE,CAAA;CAChB,YAsGA"}
+{"version":3,"file":"getThemeCSSRules.d.ts","sourceRoot":"","sources":["../../src/helpers/getThemeCSSRules.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAGlE,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,SAAS,EACT,KAAK,EACL,KAAK,GACN,EAAE;IACD,MAAM,EAAE,kBAAkB,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,MAAM,EAAE,CAAA;CAChB,YA8HA"}

package/types/helpers/themes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../src/helpers/themes.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAIhD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,QAmB1D;AAED,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,kBAAkB,CAAC,QAAQ,CAAC,OAoCrC"}
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../src/helpers/themes.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAIhD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,QAmB1D;AAED,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,kBAAkB,CAAC,QAAQ,CAAC,OAiCrC"}

package/types/index.d.ts

@@ -30,6 +30,7 @@ export * from './helpers/matchMedia.js';
 export * from './helpers/proxyThemeVariables.js';
 export * from './helpers/themeable.js';
 export * from './helpers/withStaticProperties.js';
+export * from './helpers/normalizeColor.js';
 export * from './contexts/ButtonNestingContext.js';
 export * from './hooks/useId.js';
 export * from './hooks/useIsTouchDevice.js';

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,uBAAuB,CAAA;AAErC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE/E,cAAc,0BAA0B,CAAA;AAExC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,oCAAoC,CAAA;AAClD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,kCAAkC,CAAA;AAChD,cAAc,wBAAwB,CAAA;AACtC,cAAc,mCAAmC,CAAA;AAEjD,cAAc,oCAAoC,CAAA;AAElD,cAAc,kBAAkB,CAAA;AAChC,cAAc,6BAA6B,CAAA;AAE3C,OAAO,EACL,cAAc,EACd,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,qBAAqB,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AAEnC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mCAAmC,CAAA;AACjD,cAAc,kBAAkB,CAAA;AAChC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAE1C,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAElC,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,uBAAuB,CAAA;AAErC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE/E,cAAc,0BAA0B,CAAA;AAExC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,oCAAoC,CAAA;AAClD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,kCAAkC,CAAA;AAChD,cAAc,wBAAwB,CAAA;AACtC,cAAc,mCAAmC,CAAA;AACjD,cAAc,6BAA6B,CAAA;AAE3C,cAAc,oCAAoC,CAAA;AAElD,cAAc,kBAAkB,CAAA;AAChC,cAAc,6BAA6B,CAAA;AAE3C,OAAO,EACL,cAAc,EACd,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,qBAAqB,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AAEnC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mCAAmC,CAAA;AACjD,cAAc,kBAAkB,CAAA;AAChC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAE1C,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAElC,cAAc,iBAAiB,CAAA"}