purgetss 7.5.2 → 7.6.1

package/README.md

@@ -10,7 +10,7 @@
 
 </div>
 
-**PurgeTSS** is a toolkit for building mobile apps with the [Titanium framework](https://titaniumsdk.com). It provides utility classes, icon font support, an Animation module, a grid system, and the `shades` command for generating custom colors.
+**PurgeTSS** is a toolkit for building mobile apps with the [Titanium framework](https://titaniumsdk.com). It provides utility classes, icon font support, an Animation module, a grid system, and color generation commands (`shades` for tonal palettes, `semantic` for Light/Dark mode semantic colors).
 
 ---
 
@@ -20,6 +20,7 @@
 - Icon font support: Font Awesome, Material Icons, Material Symbols, Framework7-Icons
 - `build-fonts` command generates `fonts.tss` with class definitions and fontFamily selectors
 - `shades` command generates color shades from any hex color
+- `semantic` command generates Titanium semantic colors (Light/Dark mode) — tonal palettes with mirror inversion, or single purpose-based colors with optional alpha
 - Animation module for 2D matrix animations on views or arrays of views
 - Grid system for aligning and distributing elements within views
 
@@ -240,6 +241,79 @@ Fallback defaults when not set: `swap`/`reorder`/`snapTo` → 200ms; `shake` →
 
 See the full documentation at [purgetss.com/docs/animation-module/introduction](https://purgetss.com/docs/animation-module/introduction).
 
+### Appearance management
+
+Switch between Light, Dark, and System modes with automatic persistence:
+
+```js
+const { Appearance } = require('purgetss.ui')
+
+// Call once at app startup (e.g., in index.js before opening the first window)
+Appearance.init()
+```
+
+| Method      | Description                                                  |
+| ----------- | ------------------------------------------------------------ |
+| `init()`    | Restore the saved mode from `Ti.App.Properties`              |
+| `get()`     | Returns the current mode string                              |
+| `set(mode)` | Apply and persist a mode: `'system'`, `'light'`, or `'dark'` |
+| `toggle()`  | Switch between `'light'` and `'dark'`                        |
+
+Use it from any controller to respond to user actions:
+
+```js
+const { Appearance } = require('purgetss.ui')
+
+function selectDark() { Appearance.set('dark') }
+function selectLight() { Appearance.set('light') }
+function selectSystem() { Appearance.set('system') }
+```
+
+Requires `semantic.colors.json` in `app/assets/` for views to respond to mode changes. Generate it with the `semantic` command instead of writing it by hand:
+
+```bash
+# Tonal palette (11 shades with mirror-by-index Light/Dark inversion)
+purgetss semantic '#15803d' amazon
+
+# Purpose-based single colors (auto-mapped to classes in config.cjs)
+purgetss semantic --single '#F9FAFB' surfaceColor --dark '#0f172a'
+purgetss semantic --single '#111827' textColor    --dark '#f1f5f9'
+purgetss semantic --single '#000000' overlayColor --alpha 50
+```
+
+See the [Semantic Colors guide](https://purgetss.com/docs/best-practices/semantic-colors) for the full workflow.
+
+### Default font families
+
+PurgeTSS generates `font-sans`, `font-serif`, and `font-mono` classes automatically with platform-appropriate values:
+
+| Class        | iOS              | Android      |
+| ------------ | ---------------- | ------------ |
+| `font-sans`  | `Helvetica Neue` | `sans-serif` |
+| `font-serif` | `Georgia`        | `serif`      |
+| `font-mono`  | `monospace`      | `monospace`  |
+
+Override or add families in `config.cjs`:
+
+```js
+// theme.extend.fontFamily → adds to defaults
+extend: {
+  fontFamily: {
+    display: 'AlfaSlabOne-Regular',
+    body: 'BarlowSemiCondensed-Regular'
+  }
+}
+
+// theme.fontFamily → replaces defaults entirely
+theme: {
+  fontFamily: {
+    sans: 'System',
+    mono: 'Courier',
+    display: 'AlfaSlabOne-Regular'
+  }
+}
+```
+
 ---
 
 ## Customizing default components
@@ -304,6 +378,9 @@ Button: {
 
 - [Installation](https://purgetss.com/docs/installation)
 - [Commands](https://purgetss.com/docs/commands)
+- App Assets
+  - [App icons and branding](https://purgetss.com/docs/app-assets/app-icons-and-branding)
+  - [Multi-density images](https://purgetss.com/docs/app-assets/multi-density-images)
 - Customization
   - [The Config File](https://purgetss.com/docs/customization/the-config-file)
   - [Custom Rules](https://purgetss.com/docs/customization/custom-rules)
@@ -312,14 +389,19 @@ Button: {
   - [Arbitrary Values](https://purgetss.com/docs/customization/arbitrary-values)
   - [Platform and Device Modifiers](https://purgetss.com/docs/customization/platform-and-device-modifiers)
   - [Icon Fonts Libraries](https://purgetss.com/docs/customization/icon-fonts-libraries)
-- Animation Module
-  - [Introduction](https://purgetss.com/docs/animation-module/introduction)
-  - [The `play` Method](https://purgetss.com/docs/animation-module/the-play-method)
-  - [The `apply` Method](https://purgetss.com/docs/animation-module/the-apply-method)
-  - [The `open` and `close` Methods](https://purgetss.com/docs/animation-module/the-open-and-close-methods)
-  - [The `draggable` Method](https://purgetss.com/docs/animation-module/the-draggable-method)
-  - [Complex UI Elements](https://purgetss.com/docs/animation-module/complex-ui-elements)
-  - [Additional Methods](https://purgetss.com/docs/animation-module/additional-methods)
-  - [Available Utilities](https://purgetss.com/docs/animation-module/available-utilities)
-  - [Implementation Rules](https://purgetss.com/docs/animation-module/implementation-rules)
+- The UI Module
+  - [Introduction](https://purgetss.com/docs/purgetss-ui/introduction)
+  - [The `play` Method](https://purgetss.com/docs/purgetss-ui/the-play-method)
+  - [The `apply` Method](https://purgetss.com/docs/purgetss-ui/the-apply-method)
+  - [The `open` and `close` Methods](https://purgetss.com/docs/purgetss-ui/the-open-and-close-methods)
+  - [The `draggable` Method](https://purgetss.com/docs/purgetss-ui/the-draggable-method)
+  - [Complex UI Elements](https://purgetss.com/docs/purgetss-ui/complex-ui-elements)
+  - [Additional Methods](https://purgetss.com/docs/purgetss-ui/additional-methods)
+  - [Available Utilities](https://purgetss.com/docs/purgetss-ui/available-utilities)
+  - [Implementation Rules](https://purgetss.com/docs/purgetss-ui/implementation-rules)
+  - [Appearance](https://purgetss.com/docs/purgetss-ui/appearance)
+- Best Practices
+  - [Appearance Setup](https://purgetss.com/docs/best-practices/appearance-setup)
+  - [Semantic Colors](https://purgetss.com/docs/best-practices/semantic-colors)
+  - [Large Titles on iOS](https://purgetss.com/docs/best-practices/large-titles-on-ios)
 - [Grid System](https://purgetss.com/docs/grid-system)

package/bin/purgetss

@@ -17,8 +17,11 @@ import { copyModulesLibrary } from '../src/cli/commands/module.js'
 import { dependencies } from '../src/cli/commands/dependencies.js'
 import { init } from '../src/cli/commands/init.js'
 import { shades, colorModule } from '../src/cli/commands/shades.js'
+import { semantic } from '../src/cli/commands/semantic.js'
 import { buildFonts } from '../src/cli/commands/fonts.js'
 import { copyFonts } from '../src/cli/commands/icon-library.js'
+import { brand } from '../src/cli/commands/brand.js'
+import { images } from '../src/cli/commands/images.js'
 
 // ESM equivalent of __dirname
 const __filename = fileURLToPath(import.meta.url)
@@ -113,6 +116,8 @@ program.helpInformation = function () {
     output.push(`  ${chalk.cyan('init|i')} ${chalk.gray('[options]')}                Create a ${chalk.yellow('config.cjs')} file for your project`)
     output.push(`  ${chalk.cyan('create|c')} ${chalk.gray('[options]')} ${chalk.gray('<name>')}       Create a new Alloy project with ${chalk.green('PurgeTSS')}`)
     output.push(`  ${chalk.cyan('install-dependencies|id')}         Install ${chalk.green('ESLint')} and ${chalk.green('Tailwind CSS')}`)
+    output.push(`  ${chalk.cyan('brand')} ${chalk.gray('[options]')} ${chalk.gray('<logo>')}          Generate Titanium app icons & splash from a logo SVG/PNG`)
+    output.push(`  ${chalk.cyan('images')} ${chalk.gray('[options]')} ${chalk.gray('[source]')}       Generate Titanium multi-density UI images (Alloy + Classic)`)
     output.push('')
     output.push(`  ${chalk.green('Daily Development:')}`)
     output.push(`  ${chalk.cyan('build|b')} ${chalk.gray('[options]')}               Generate ${chalk.yellow('utilities.tss')} file`)
@@ -126,6 +131,7 @@ program.helpInformation = function () {
     output.push('')
     output.push(`  ${chalk.green('Utilities:')}`)
     output.push(`  ${chalk.cyan('shades|s')} ${chalk.gray('[options]')} ${chalk.gray('[hexcode]')}    Generate color shades from a hex color`)
+    output.push(`  ${chalk.cyan('semantic')} ${chalk.gray('[options]')} ${chalk.gray('[hexcode]')}    Generate Titanium semantic colors (Light/Dark)`)
     output.push('')
     output.push(`  ${chalk.green('Maintenance:')}`)
     output.push(`  ${chalk.cyan('update|u')}                        Update ${chalk.green('PurgeTSS')} to the latest version`)
@@ -248,6 +254,114 @@ program
     }
   })
 
+// Brand command — generate Titanium app icons and splash assets
+program
+  .command('brand [logo]')
+  .description(`Generate Titanium app icons & branding assets from a logo SVG/PNG`)
+  .addHelpText('after', `
+Writes directly into the current project (Alloy or Classic — auto-detected).
+Logos auto-discovered from ${chalk.cyan('purgetss/brand/')}:
+  ${chalk.yellow('logo.{svg,png}')}          required — main logo
+  ${chalk.yellow('logo-mono.{svg,png}')}     optional — monochrome layer + notifications
+  ${chalk.yellow('logo-dark.{svg,png}')}     optional — iOS 18+ dark variant
+  ${chalk.yellow('logo-tinted.{svg,png}')}   optional — iOS 18+ tinted variant
+
+Defaults come from the ${chalk.cyan('brand:')} section in ${chalk.cyan('purgetss/config.cjs')}.
+CLI flags always win over config values.
+
+Generates:
+  ${chalk.yellow('DefaultIcon.png')} / ${chalk.yellow('DefaultIcon-ios.png')}              Root icons (alpha + flattened)
+  ${chalk.yellow('DefaultIcon-Dark.png')} / ${chalk.yellow('DefaultIcon-Tinted.png')}     iOS 18+ variants (Apple HIG specs)
+  ${chalk.yellow('iTunesConnect.png')} / ${chalk.yellow('MarketplaceArtwork.png')}       App Store + Play Store artwork
+  ${chalk.yellow('mipmap-*/ic_launcher_{foreground,background,monochrome}.png')}  Android adaptive × 5
+  ${chalk.yellow('mipmap-*/ic_launcher.png')}                           Android legacy × 5
+  ${chalk.yellow('mipmap-anydpi-v26/ic_launcher.xml')}                  Adaptive icon binder
+
+Android dark/light mode is handled by the ${chalk.yellow('monochrome')} adaptive layer
+(Android 13+ tints it from the wallpaper + theme). No separate dark file exists.
+
+Examples:
+  ${chalk.cyan('purgetss brand')}                                           # uses purgetss/brand/logo.svg + config
+  ${chalk.cyan('purgetss brand')} logo.svg                                  # explicit logo path
+  ${chalk.cyan('purgetss brand')} --bg-color "#0B1326"                      # override config bg
+  ${chalk.cyan('purgetss brand')} --dark-bg-color "#1C1C1E" --no-tinted     # customize dark, skip tinted
+  ${chalk.cyan('purgetss brand')} --dry-run                                 # preview without writing
+  ${chalk.cyan('purgetss brand')} --cleanup-legacy --dry-run                # preview legacy cleanup
+`)
+  .option('--bg-color <hex>', 'Background color for Android adaptive + iOS flatten (default: #FFFFFF)')
+  .option('--padding <n>', 'Android safe-zone % (range 12-20, default: 15)', (v) => parseInt(v, 10))
+  .option('--ios-padding <n>', 'iOS aesthetic % (typical 2-6, default: 4)', (v) => parseInt(v, 10))
+  .option('--notification', 'Also generate ic_stat_notify.png × 5 densities')
+  .option('--splash', 'Also generate Android 12+ splash_icon.png × 5 densities')
+  .option('--monochrome-logo <path>', 'Override the monochrome logo (otherwise purgetss/brand/logo-mono.{svg,png})')
+  .option('--dark-bg-color <hex>', 'Opt into opaque dark bg for DefaultIcon-Dark.png (default: transparent per Apple HIG)')
+  .option('--dark-logo <path>', 'Override the dark logo (otherwise purgetss/brand/logo-dark.{svg,png})')
+  .option('--tinted-logo <path>', 'Override the tinted logo (otherwise purgetss/brand/logo-tinted.{svg,png})')
+  .option('--no-dark', 'Skip DefaultIcon-Dark.png generation')
+  .option('--no-tinted', 'Skip DefaultIcon-Tinted.png generation')
+  .option('--project <path>', 'Project root (default: cwd)')
+  .option('-o, --output <dir>', 'Stage to <dir> instead of writing in-place')
+  .option('--notes', 'Print full tiapp.xml snippets + tuning guide')
+  .option('--dry-run', 'Preview without writing any files')
+  .option('--cleanup-legacy', 'Remove legacy branding artifacts (reads tiapp.xml)')
+  .option('--aggressive', 'With --cleanup-legacy: also remove ldpi folders')
+  .option('-y, --yes', 'Skip the in-place confirmation prompt')
+  .option('--debug', 'Debug mode')
+  .action(async (logo, options) => {
+    try {
+      await brand(logo, options)
+    } catch (error) {
+      console.error(chalk.red('Error running brand:'), error.message)
+      process.exit(1)
+    }
+  })
+
+// Images command — generate Titanium multi-density UI assets
+program
+  .command('images [source]')
+  .description(`Generate Titanium multi-density UI images (Alloy & Classic)`)
+  .addHelpText('after', `
+Scales UI images into all Titanium density variants in one pass:
+  ${chalk.yellow('Android')}  → ${chalk.gray('res-mdpi, res-hdpi, res-xhdpi, res-xxhdpi, res-xxxhdpi')} (5 densities)
+  ${chalk.yellow('iPhone')}   → ${chalk.gray('@1x, @2x, @3x')} (3 scales via filename suffix)
+
+Sources auto-discovered from ${chalk.cyan('purgetss/images/')} (subdirectories preserved).
+Pass a file or directory path to override auto-discovery.
+
+Writes directly to the project (auto-detects Alloy vs Classic):
+  ${chalk.yellow('Alloy')}    → ${chalk.gray('app/assets/{android,iphone}/images/')}
+  ${chalk.yellow('Classic')}  → ${chalk.gray('Resources/{android,iphone}/images/')}
+
+Defaults come from the ${chalk.cyan('images:')} section in ${chalk.cyan('purgetss/config.cjs')}.
+CLI flags always win over config values.
+
+Examples:
+  ${chalk.cyan('purgetss images')}                                  # uses purgetss/images/ + config
+  ${chalk.cyan('purgetss images')} ./docs/screenshots               # scope to one folder
+  ${chalk.cyan('purgetss images')} logo.png                         # scope to one file
+  ${chalk.cyan('purgetss images')} --android                        # Android densities only
+  ${chalk.cyan('purgetss images')} --ios                            # iPhone scales only
+  ${chalk.cyan('purgetss images')} --format webp                    # convert all outputs to WebP
+  ${chalk.cyan('purgetss images')} --format png --quality 95
+  ${chalk.cyan('purgetss images')} --dry-run
+`)
+  .option('--android', 'Generate only Android density variants (skip iPhone)')
+  .option('--ios', 'Generate only iPhone scale variants (skip Android)')
+  .option('--format <ext>', 'Convert all outputs to this format: webp|jpeg|png|avif|gif|tiff')
+  .option('--quality <n>', 'JPEG/WebP/AVIF quality 0-100 (default: 85)', (v) => parseInt(v, 10))
+  .option('--project <path>', 'Project root (default: cwd)')
+  .option('--dry-run', 'Preview without writing any files')
+  .option('-y, --yes', 'Skip the overwrite confirmation prompt')
+  .option('--debug', 'Debug mode')
+  .action(async (source, options) => {
+    try {
+      await images(source, options)
+    } catch (error) {
+      console.error(chalk.red('Error running images:'), error.message)
+      process.exit(1)
+    }
+  })
+
 // === DAILY DEVELOPMENT ===
 
 // Build command
@@ -391,6 +505,31 @@ program
     }
   })
 
+// Semantic command — generates Titanium semantic colors (Light/Dark mode)
+program
+  .command('semantic [hexcode] [name]')
+  .description(`Generate Titanium semantic colors in ${chalk.yellow('app/assets/semantic.colors.json')}`)
+  .addHelpText('after', `\nWithout ${chalk.yellow('--single')}: one hex → 11-shade palette with Light/Dark inversion.\nWith ${chalk.yellow('--single')}: explicit light + dark + optional alpha → one purpose-based color.`)
+  .option('-s, --single', 'Generate a single purpose-based semantic color (requires explicit per-mode hex values)')
+  .option('-d, --dark <hex>', `With ${chalk.yellow('--single')}: dark-mode hex (defaults to the light value)`)
+  .option('-a, --alpha <value>', `With ${chalk.yellow('--single')}: wrap values as ${chalk.yellow('{ color, alpha }')} (range ${chalk.yellow('0-100')}, integer or float)`)
+  .option('-n, --name <name>', 'Specify the name of the color')
+  .option('-r, --random', 'Palette mode: use a random base color')
+  .option('-o, --override', `Place the mapping in ${chalk.yellow('theme.colors')} instead of ${chalk.yellow('theme.extend.colors')}`)
+  .option('-q, --quotes', `Keep double quotes in ${chalk.yellow('config.cjs')}`)
+  .option('-l, --log', 'Preview the JSON without writing any files')
+  .action(async (hexcode, name, options) => {
+    try {
+      const result = await semantic({ hexcode, name }, options)
+      if (!result) {
+        process.exit(1)
+      }
+    } catch (error) {
+      console.error(chalk.red('Error running semantic:'), error.message)
+      process.exit(1)
+    }
+  })
+
 // === MAINTENANCE ===
 
 // Update command
@@ -496,7 +635,7 @@ function findSimilarCommands(input, validCommands) {
 // Validate arguments before parsing
 const args = process.argv.slice(2)
 if (args.length > 0) {
-  const validCommands = ['init', 'i', 'create', 'c', 'install-dependencies', 'id', 'build', 'b', 'watch', 'w', 'icon-library', 'il', 'build-fonts', 'bf', 'color-module', 'cm', 'shades', 's', 'module', 'm', 'update', 'u', 'sudo-update', 'su']
+  const validCommands = ['init', 'i', 'create', 'c', 'install-dependencies', 'id', 'brand', 'images', 'build', 'b', 'watch', 'w', 'icon-library', 'il', 'build-fonts', 'bf', 'color-module', 'cm', 'shades', 's', 'semantic', 'module', 'm', 'update', 'u', 'sudo-update', 'su']
   const validFlags = ['-h', '--help', '-V', '--version', '--debug', '-a', '--all']
 
   const firstArg = args[0]

package/dist/purgetss.ui.js

@@ -1,4 +1,4 @@
-// PurgeTSS v7.5.2
+// PurgeTSS v7.6.0
 // Created by César Estrada
 // https://purgetss.com
 
@@ -316,7 +316,13 @@ function Animation(args = {}) {
 
       if (!layout) {
         view.animate(Ti.UI.createAnimation({ ...args, zIndex: 0, opacity: 0 }), () => {
-          view.applyProperties({ zIndex: 0, opacity: 0, transform: Ti.UI.createMatrix2D(), translation: { x: 0, y: 0 }, rotate: 0, scale: 1 })
+          if (params.isIOS) {
+            // Preserve transform so next fade-in continues from last visual state
+            view.applyProperties({ zIndex: 0, opacity: 0, touchEnabled: false })
+          } else {
+            // Android: reset transform to avoid animator glitches on next fade-in
+            view.applyProperties({ zIndex: 0, opacity: 0, touchEnabled: false, transform: Ti.UI.createMatrix2D(), translation: { x: 0, y: 0 }, rotate: 0, scale: 1 })
+          }
         })
         return
       }
@@ -343,7 +349,7 @@ function Animation(args = {}) {
       if (layout.opacity !== undefined) animation.opacity = layout.opacity
 
       view.animate(animation, () => {
-        const props = { transform, translation: { x: tx, y: ty }, rotate, scale, zIndex: layout.zIndex }
+        const props = { transform, translation: { x: tx, y: ty }, rotate, scale, zIndex: layout.zIndex, touchEnabled: true }
         if (needsFadeIn) props.opacity = 1
         view.applyProperties(props)
       })
@@ -468,13 +474,6 @@ function Animation(args = {}) {
           const target = directTarget ?? params.lastKnownTarget
           logger(`   -> collision check: ${draggableView.id} | direct: ${directTarget?.id ?? 'null'} | lastKnown: ${params.lastKnownTarget?.id ?? 'null'} | final: ${target?.id ?? 'null'}`)
           if (target) {
-            // On Android, consolidate drag position before snap to avoid animation conflict
-            if (!params.isIOS) {
-              draggableView.applyProperties({
-                top: draggableView._visualTop ?? draggableView.top,
-                left: draggableView._visualLeft ?? draggableView.left
-              })
-            }
             if (args.animationProperties?.snap?.center) {
               logger(`   -> snap-center: ${draggableView.id} to ${target.id}`)
               animationView.snapTo(draggableView, [target])
@@ -486,14 +485,6 @@ function Animation(args = {}) {
           } else if (!target && args.animationProperties?.snap?.back) {
             logger(`   -> bounce-back: ${draggableView.id} to (${draggableView._originTop}, ${draggableView._originLeft})`)
 
-            // On Android, consolidate drag position before bounce-back to avoid animation conflict
-            if (!params.isIOS) {
-              draggableView.applyProperties({
-                top: draggableView._visualTop ?? draggableView.top,
-                left: draggableView._visualLeft ?? draggableView.left
-              })
-            }
-
             draggableView._bouncingBack = true
 
             draggableView.animate({
@@ -582,8 +573,8 @@ function Animation(args = {}) {
         draggableView.applyProperties({ duration: 0, transform: Ti.UI.createMatrix2D().translate(x, y) })
       }
     } else {
-      const r = draggableView.rotate ?? 0
       const s = draggableView.scale ?? 1
+      const r = draggableView.rotate ?? 0
 
       if (r !== 0 || s !== 1) {
         // Delta-based drag for transformed views on Android
@@ -593,14 +584,20 @@ function Animation(args = {}) {
         translation.x += deltaX
         translation.y += deltaY
         draggableView.animate(Ti.UI.createAnimation({
-          transform: Ti.UI.createMatrix2D().translate(translation.x, translation.y).rotate(r).scale(s),
-          duration: 0
-        }))
-        draggableView.translation = translation
-        draggableView.rotate = r
-        draggableView.scale = s
+          duration: 0,
+          transform: Ti.UI.createMatrix2D().translate(translation.x, translation.y).rotate(r).scale(s)
+        }), () => {
+          draggableView.applyProperties({ translation: translation, rotate: r, scale: s })
+        })
       } else {
-        draggableView.animate(Ti.UI.createAnimation({ top, left, duration: 0 }))
+        // Transform-based (mirror of iOS Rama B) — keeps top/left untouched so snapTo/transition stay coherent
+        const { x, y } = calculateTranslation(draggableView, draggableView.parent.rect, left, top)
+        draggableView.animate(Ti.UI.createAnimation({
+          duration: 0,
+          transform: Ti.UI.createMatrix2D().translate(x, y)
+        }), () => {
+          draggableView.applyProperties({ translation: { x, y }, rotate: 0, scale: 1 })
+        })
       }
     }
 
@@ -906,3 +903,45 @@ function saveComponent({ source, directory = Ti.Filesystem.tempDirectory }) {
 exports.saveComponent = saveComponent
 
 exports.createAnimation = (args) => new Animation(args)
+
+// --- Appearance Management (Light/Dark/System) ---
+function Appearance() {
+  const PROP_KEY = 'userInterfaceStyle'
+  const STYLES = {
+    dark: Ti.UI.USER_INTERFACE_STYLE_DARK,
+    light: Ti.UI.USER_INTERFACE_STYLE_LIGHT,
+    system: Ti.UI.USER_INTERFACE_STYLE_UNSPECIFIED
+  }
+
+  let currentMode = 'system'
+
+  function applyMode(mode) {
+    currentMode = mode
+    Ti.UI.overrideUserInterfaceStyle = STYLES[mode]
+    Ti.App.Properties.setInt(PROP_KEY, STYLES[mode])
+  }
+
+  return {
+    init() {
+      const saved = Ti.App.Properties.getInt(PROP_KEY, STYLES.system)
+      currentMode = Object.keys(STYLES).find(key => STYLES[key] === saved) || 'system'
+      Ti.UI.overrideUserInterfaceStyle = saved
+    },
+
+    set(mode) {
+      if (!STYLES.hasOwnProperty(mode)) return
+      applyMode(mode)
+    },
+
+    get() {
+      return currentMode
+    },
+
+    toggle() {
+      const next = (currentMode === 'dark') ? 'light' : 'dark'
+      applyMode(next)
+    }
+  }
+}
+
+exports.Appearance = Appearance()

package/dist/utilities.tss

@@ -2250,9 +2250,6 @@
 '.rounded-full-2.5': { width: 10, height: 10, borderRadius: 5 }
 '.rounded-full-3.5': { width: 14, height: 14, borderRadius: 7 }
 
-// Property(ies): fontFamily
-// Component(s): Ti.UI.ActivityIndicator, Ti.UI.Button, Ti.UI.Label, Ti.UI.ListItem, Ti.UI.Picker, Ti.UI.PickerColumn, Ti.UI.PickerRow, Ti.UI.ProgressBar, Ti.UI.Switch, Ti.UI.TableViewRow, Ti.UI.TextArea, Ti.UI.TextField
-
 // Property(ies): fontSize
 // Component(s): Ti.UI.ActivityIndicator, Ti.UI.Button, Ti.UI.Label, Ti.UI.ListItem, Ti.UI.Picker, Ti.UI.PickerColumn, Ti.UI.PickerRow, Ti.UI.ProgressBar, Ti.UI.Switch, Ti.UI.TableViewRow, Ti.UI.TextArea, Ti.UI.TextField
 '.text-xs': { font: { fontSize: 12 } }
@@ -2281,6 +2278,14 @@
 '.font-extrabold': { font: { fontWeight: 'bold' } }
 '.font-black': { font: { fontWeight: 'bold' } }
 
+// Property(ies): fontFamily
+// Component(s): Ti.UI.ActivityIndicator, Ti.UI.Button, Ti.UI.Label, Ti.UI.ListItem, Ti.UI.Picker, Ti.UI.PickerColumn, Ti.UI.PickerRow, Ti.UI.ProgressBar, Ti.UI.Switch, Ti.UI.TableViewRow, Ti.UI.TextArea, Ti.UI.TextField
+'.font-mono': { font: { fontFamily: 'monospace' } }
+'.font-sans[platform=ios]': { font: { fontFamily: 'Helvetica Neue' } }
+'.font-serif[platform=ios]': { font: { fontFamily: 'Georgia' } }
+'.font-sans[platform=android]': { font: { fontFamily: 'sans-serif' } }
+'.font-serif[platform=android]': { font: { fontFamily: 'serif' } }
+
 // Property(ies): top, right, bottom, left - Gap for Grid System
 // Component(s): Ti.UI.ActivityIndicator, Ti.UI.Animation, Ti.UI.View, Ti.UI.Window
 '.gap-0': { top: 0, right: 0, bottom: 0, left: 0 }
@@ -6886,6 +6891,12 @@
 '.left-11/12': { left: '91.666667%' }
 '.left-full': { left: '100%' }
 
+// Property: keepHardwareMode
+// Description: A value indicating the render mode of the View
+// Component(s): Ti.UI.View, Ti.Media.VideoPlayer, Ti.UI.ActivityIndicator, Ti.UI.AlertDialog, Ti.UI.Android.CardView, Ti.UI.Android.CollapseToolbar, Ti.UI.Android.DrawerLayout, Ti.UI.Android.FloatingActionButton, Ti.UI.Android.ProgressIndicator, Ti.UI.Android.SearchView, Ti.UI.Android.Snackbar, Ti.UI.Button, Ti.UI.ButtonBar, Ti.UI.EmailDialog, Ti.UI.ImageView, Ti.UI.Label, Ti.UI.ListView, Ti.UI.MaskedImage, Ti.UI.NavigationWindow, Ti.UI.OptionBar, Ti.UI.OptionDialog, Ti.UI.Picker, Ti.UI.PickerColumn, Ti.UI.PickerRow, Ti.UI.ProgressBar, Ti.UI.ScrollView, Ti.UI.ScrollableView, Ti.UI.SearchBar, Ti.UI.Slider, Ti.UI.Switch, Ti.UI.Tab, Ti.UI.TabGroup, Ti.UI.TabbedBar, Ti.UI.TableView, Ti.UI.TableViewRow, Ti.UI.TextArea, Ti.UI.TextField, Ti.UI.Toolbar, Ti.UI.WebView, Ti.UI.Window
+'.keep-hardware-mode': { keepHardwareMode: true }
+'.keep-hardware-mode-false': { keepHardwareMode: false }
+
 // Property: layout
 // Component(s): Ti.UI.View, Ti.Android.R, Ti.Media.VideoPlayer, Ti.UI.Android.CardView, Ti.UI.Android.DrawerLayout, Ti.UI.Android.SearchView, Ti.UI.Button, Ti.UI.ButtonBar, Ti.UI.DashboardView, Ti.UI.ImageView, Ti.UI.Label, Ti.UI.ListView, Ti.UI.MaskedImage, Ti.UI.NavigationWindow, Ti.UI.OptionBar, Ti.UI.PickerRow, Ti.UI.ProgressBar, Ti.UI.ScrollView, Ti.UI.ScrollableView, Ti.UI.SearchBar, Ti.UI.Slider, Ti.UI.Switch, Ti.UI.TabbedBar, Ti.UI.TableView, Ti.UI.TableViewRow, Ti.UI.TextArea, Ti.UI.TextField, Ti.UI.WebView, Ti.UI.Window, Ti.UI.iOS.BlurView, Ti.UI.iOS.CoverFlowView, Ti.UI.iOS.LivePhotoView, Ti.UI.iOS.SplitWindow, Ti.UI.iOS.Stepper
 '.vertical': { layout: 'vertical' }
@@ -17330,7 +17341,7 @@
 
 // Property: autoAdjustScrollViewInsets
 // Description: Specifies whether or not the view controller should automatically adjust its scroll view insets.
-// Component(s): Ti.UI.NavigationWindow, Ti.UI.TabGroup, Ti.UI.Window, Ti.UI.iOS.SplitWindow
+// Component(s): Ti.UI.NavigationWindow, Ti.UI.TabGroup, Ti.UI.WebView, Ti.UI.Window, Ti.UI.iOS.SplitWindow
 '.auto-adjust-scroll-view-insets': { autoAdjustScrollViewInsets: true }
 '.auto-adjust-scroll-view-insets-false': { autoAdjustScrollViewInsets: false }
 
@@ -25166,6 +25177,12 @@
 '.keyboard-display-requires-user-action': { keyboardDisplayRequiresUserAction: true }
 '.keyboard-display-requires-user-action-false': { keyboardDisplayRequiresUserAction: false }
 
+// Property: hideKeyboardAccessoryView
+// Description: A Boolean value indicating whether to hide the keyboard accessory bar.
+// Component(s): Ti.UI.WebView
+'.hide-keyboard-accessory-view': { hideKeyboardAccessoryView: true }
+'.hide-keyboard-accessory-view-false': { hideKeyboardAccessoryView: false }
+
 // Property: ignoreSslError
 // Description: Controls whether to ignore invalid SSL certificates or not.
 // Component(s): Ti.UI.WebView

package/experimental/completions2.js

@@ -247,9 +247,9 @@ function processCompoundClasses({ ..._base }) {
   // ! Configurables
   compoundClasses += generateGlossary('borderRadius-alternative', helpers.borderRadius(_base.borderRadius))
   compoundClasses += generateGlossary('borderRadius-full', helpers.borderRadiusFull(_base.borderRadius))
-  compoundClasses += generateGlossary('fontFamily', helpers.fontFamily(_base.fontFamily))
   compoundClasses += generateGlossary('fontSize', helpers.fontSize(_base.fontSize))
   compoundClasses += generateGlossary('fontWeight', helpers.fontWeight(_base.fontWeight))
+  compoundClasses += generateGlossary('fontFamily', helpers.fontFamily(_base.fontFamily))
   compoundClasses += generateGlossary('margin-alternative', helpers.gap(_base.margin))
   compoundClasses += generateGlossary('minimumFontSize', helpers.minimumFontSize(_base.fontSize))
   compoundClasses += generateGlossary('padding-alternative', helpers.padding(_base.padding))