@maccesar/titools 3.1.0 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  # App Icons & Branding
2
2
 
3
- The `purgetss brand` command (introduced in PurgeTSS v7.6.0, restructured in v7.7.0) generates the complete Titanium branding set from a single SVG or PNG logo — with optional Android-specific overrides when you need them: launcher icons across every Android density, the adaptive-icon trio (foreground + background + monochrome), iOS 18+ Dark and Tinted variants, marketplace artwork, and optional notification/splash icons. Alloy and Classic layouts are auto-detected.
3
+ The `purgetss brand` command (introduced in PurgeTSS v7.6.0, restructured in v7.7.0, extended in v7.10.0 with the Google Play Feature Graphic) generates the complete Titanium branding set from a single SVG or PNG logo — with optional Android-specific overrides when you need them: launcher icons across every Android density, the adaptive-icon trio (foreground + background + monochrome), iOS 18+ Dark and Tinted variants, marketplace artwork (including the 1024×500 Feature Graphic for Google Play), and optional notification/splash icons. Alloy and Classic layouts are auto-detected.
4
4
 
5
5
  For the terse flag reference, see the [`brand` command reference](./cli-commands.md#brand-command). For sibling UI assets, see [Multi-Density Images](./multi-density-images.md).
6
6
 
@@ -45,7 +45,8 @@ purgetss/brand/
45
45
  ├── logo-mono.svg optional — monochrome layer + notifications
46
46
  ├── logo-dark.svg optional — iOS 18+ dark variant
47
47
  ├── logo-splash.svg optional — Android 12+ splash icon override
48
- └── logo-tinted.svg optional — iOS 18+ tinted variant
48
+ ├── logo-tinted.svg optional — iOS 18+ tinted variant
49
+ └── logo-feature.svg optional — Google Play Feature Graphic (1024×500) override
49
50
  ```
50
51
 
51
52
  Only `logo.svg` (or `logo.png`) is required. Everything else is **opt-in refinement**:
@@ -58,6 +59,7 @@ Only `logo.svg` (or `logo.png`) is required. Everything else is **opt-in refinem
58
59
  | `logo-splash.svg` / `.png` | Optional | Android 12+ `splash_icon.png` artwork (only used when `--splash` / `android.splash: true`). | Falls back to the launcher artwork. |
59
60
  | `logo-dark.svg` / `.png` | Optional | iOS 18+ Dark appearance variant. | Main logo on a transparent background (Apple HIG default). |
60
61
  | `logo-tinted.svg` / `.png` | Optional | iOS 18+ Tinted appearance variant. | Grayscale of the main logo on black. |
62
+ | `logo-feature.svg` / `.png` | Optional | Google Play Feature Graphic (1024×500). Use when the Play Store banner should differ from the main app icon (e.g. logo + tagline lockup that fills the wider rectangular canvas). | Main logo is centered inside the banner with configured vertical padding. |
61
63
 
62
64
  Provide a dedicated `logo-icon` when the main logo is a horizontal wordmark, a vertical lockup, or anything else that looks fine in a 1024×1024 branding canvas but feels cramped inside an Android launcher mask.
63
65
 
@@ -67,6 +69,8 @@ Provide a dedicated `logo-splash` when the Android 12+ splash should use a diffe
67
69
 
68
70
  Provide a dedicated `logo-dark` when dark-mode brand guidelines use a different lockup or color treatment; provide `logo-tinted` when you want a pre-simplified silhouette that tints better than a naive grayscale of the colored version.
69
71
 
72
+ Provide a dedicated `logo-feature` when the Google Play Feature Graphic (1024×500) should use a different composition than the main app icon — for example a logo-plus-tagline lockup or a wider artwork that takes advantage of the rectangular canvas instead of being constrained to the centered square.
73
+
70
74
  > **INFO**
71
75
  >
72
76
  > Prefer SVG for the master
@@ -87,7 +91,8 @@ brand: {
87
91
  logos: {
88
92
  primary: './docs/snap-logo.svg',
89
93
  androidLauncher: './docs/snap-app-icon.svg',
90
- monochrome: './docs/snap-logo-mono.svg'
94
+ monochrome: './docs/snap-logo-mono.svg',
95
+ featureGraphic: './docs/snap-feature.svg' // optional — Google Play Feature Graphic
91
96
  }
92
97
  }
93
98
  ```
@@ -110,9 +115,10 @@ brand: {
110
115
  // iosTinted: './docs/logo-tinted.svg'
111
116
  },
112
117
  padding: {
113
- ios: '4%', // iOS aesthetic padding. Range 2-8%. No launcher mask.
114
- androidLegacy: '10%', // legacy ic_launcher.png padding %
115
- androidAdaptive: '19%' // adaptive icon safe-zone %. Spec floor 19.44%.
118
+ ios: '4%', // iOS aesthetic padding. Range 2-8%. No launcher mask.
119
+ androidLegacy: '10%', // legacy ic_launcher.png padding %
120
+ androidAdaptive: '19%', // adaptive icon safe-zone %. Spec floor 19.44%.
121
+ featureGraphic: '12%' // vertical padding for MarketplaceArtworkFeature.png (1024×500)
116
122
  },
117
123
  android: {
118
124
  splash: false, // also generate splash_icon.png × 5
@@ -145,6 +151,7 @@ All `logos.*` keys are optional path overrides. If you omit them, PurgeTSS auto-
145
151
  | `logos.monochrome` | `purgetss/brand/logo-mono.svg` | Android themed icons + notification icons. |
146
152
  | `logos.iosDark` | `purgetss/brand/logo-dark.svg` | iOS dark variant. |
147
153
  | `logos.iosTinted` | `purgetss/brand/logo-tinted.svg` | iOS tinted variant. |
154
+ | `logos.featureGraphic` | `purgetss/brand/logo-feature.svg` | Google Play Feature Graphic source (1024×500 rectangular canvas). |
148
155
 
149
156
  ### `brand.padding`
150
157
 
@@ -155,6 +162,7 @@ All padding values accept either numbers or percentage strings like `'19%'`.
155
162
  | `padding.ios` | `'4%'` | Visual inset for `DefaultIcon-ios.png`, `DefaultIcon-Dark.png`, `DefaultIcon-Tinted.png`, marketplace artwork. |
156
163
  | `padding.androidLegacy` | `'10%'` | Visual inset for legacy `ic_launcher.png`. |
157
164
  | `padding.androidAdaptive` | `'19%'` | Visual inset for adaptive Android foreground (`ic_launcher_foreground.png`). Adjust this first when icons look cropped inside launcher masks. |
165
+ | `padding.featureGraphic` | `'12%'` | Vertical padding (top + bottom) for `MarketplaceArtworkFeature.png` (1024×500 Google Play banner). The logo is rendered as a square block of side `500 - 2 × pad` centered horizontally and vertically. Lower it for a more impactful banner; raise it if the logo looks cramped against the top or bottom edge on smaller Play Store crops. |
158
166
 
159
167
  ### `brand.android`
160
168
 
@@ -185,6 +193,35 @@ If omitted, PurgeTSS behaves as if `ios.dark = true`, `ios.tinted = true`, `ios.
185
193
  | --- | --- | --- |
186
194
  | `confirmOverwrites` | `true` | When `false`, the `[y/N/a]` prompt is skipped. |
187
195
 
196
+ ### Upgrading from pre-7.7.0 configs
197
+
198
+ In v7.7.0, the `brand:` block was reorganized into grouped subsections (`logos`, `padding`, `android`, `ios`, `colors`). Since **v7.10.2**, if your `config.cjs` still uses the original flat layout, PurgeTSS auto-migrates it **in memory on every run** — your old config keeps working without any change on disk.
199
+
200
+ | Pre-7.7.0 flat key | Current grouped key |
201
+ | --- | --- |
202
+ | `brand.padding: <number\|string>` (single value) | `brand.padding.androidLegacy` **and** `brand.padding.androidAdaptive` (same value applied to both) |
203
+ | `brand.iosPadding` | `brand.padding.ios` |
204
+ | `brand.bgColor` | `brand.colors.background` |
205
+ | `brand.darkBgColor` | `brand.ios.darkBackground` |
206
+ | `brand.notification` | `brand.android.notification` |
207
+ | `brand.splash` | `brand.android.splash` |
208
+
209
+ If both legacy and grouped keys are present for the same property, the **grouped key wins**.
210
+
211
+ On first encounter per session, PurgeTSS prints a one-time deprecation notice listing the legacy keys it migrated:
212
+
213
+ ```text
214
+ ::PurgeTSS:: Legacy brand: schema detected in purgetss/config.cjs — auto-migrated in memory:
215
+ • brand.padding: 15 → brand.padding.androidLegacy + brand.padding.androidAdaptive
216
+ • brand.iosPadding → brand.padding.ios
217
+ • brand.bgColor → brand.colors.background
218
+ Update purgetss/config.cjs to the new grouped schema to silence this warning.
219
+ ```
220
+
221
+ The notice is suppressed once you update the file to the grouped layout. Auto-migration is purely transitional and may be removed in a future major version, so a one-time update to your `config.cjs` is recommended.
222
+
223
+ Prior to v7.10.2, projects on the flat layout crashed auto-purge with `TypeError: Cannot create property 'ios' on number '15'` because `brand.padding` was a number rather than an object. v7.10.2 normalizes the shape before defaults are applied.
224
+
188
225
  ## Overwrite confirmation
189
226
 
190
227
  `brand` writes directly into the project, so it asks before overwriting anything:
@@ -224,6 +261,7 @@ The output is automatically routed to the right directory for your project layou
224
261
  ├── DefaultIcon-Tinted.png ← 1024×1024, iOS 18+ tinted (grayscale on black)
225
262
  ├── iTunesConnect.png ← 1024×1024, App Store submission
226
263
  ├── MarketplaceArtwork.png ← 512×512, Google Play submission
264
+ ├── MarketplaceArtworkFeature.png ← 1024×500, Google Play Feature Graphic (v7.10.0)
227
265
  └── app/
228
266
  └── assets/android/
229
267
  ├── default.png ← legacy Titanium Android splash fallback (v7.7.0)
@@ -243,6 +281,7 @@ The output is automatically routed to the right directory for your project layou
243
281
  ```text
244
282
  <project>/
245
283
  ├── DefaultIcon.png DefaultIcon-ios.png ... ← same root-level files as Alloy
284
+ ├── MarketplaceArtworkFeature.png ← 1024×500, Google Play Feature Graphic (v7.10.0)
246
285
  ├── Resources/
247
286
  │ └── android/default.png ← legacy Titanium Android splash fallback (v7.7.0)
248
287
  └── platform/
@@ -343,9 +382,46 @@ purgetss brand --no-dark --no-tinted
343
382
  >
344
383
  > Until that PR lands, after your first iOS build you may need to add the two PNGs manually into `build/iphone/Assets.xcassets/AppIcon.appiconset/` in Xcode (via the "Appearance" column in the asset catalog editor). Once #14122 merges, the command becomes fully end-to-end.
345
384
 
385
+ ## Google Play Feature Graphic (v7.10.0)
386
+
387
+ Since v7.10.0, `purgetss brand` also generates `MarketplaceArtworkFeature.png` — the **1024×500** banner that Google Play shows above the app description on the Play Store listing. It's submission artwork only: the file is written to the project root for upload via Play Console; it is **not** bundled into the APK.
388
+
389
+ ### How the source is chosen
390
+
391
+ PurgeTSS resolves the Feature Graphic source in this order (first match wins):
392
+
393
+ 1. CLI `--feature-logo <path>` for the current run.
394
+ 2. `brand.logos.featureGraphic` in `config.cjs`.
395
+ 3. Auto-discovered `purgetss/brand/logo-feature.{svg,png}`.
396
+ 4. The main logo (centered inside the 1024×500 canvas with the configured vertical padding).
397
+
398
+ ```bash
399
+ purgetss brand --feature-logo ./docs/feature.svg
400
+ ```
401
+
402
+ Drop a dedicated logo when you want a logo + tagline lockup or a wider artwork that takes advantage of the rectangular canvas. Otherwise the main `logo.svg` is centered as a square block — fine for most apps.
403
+
404
+ ### Padding
405
+
406
+ The default vertical padding is `12%` (top + bottom). Override per run with `--feature-graphic-padding <n>` (integer `0-40`), or persist it in `brand.padding.featureGraphic`:
407
+
408
+ ```bash
409
+ purgetss brand --feature-graphic-padding 8
410
+ ```
411
+
412
+ ```javascript
413
+ brand: {
414
+ padding: {
415
+ featureGraphic: '8%'
416
+ }
417
+ }
418
+ ```
419
+
420
+ The logo is rendered as a square block of side `500 - 2 × pad` and centered horizontally on the 1024-wide canvas. Lower the padding for a more impactful banner; raise it if the logo looks cramped against the top or bottom edge on smaller Play Store crops.
421
+
346
422
  ## Brand color
347
423
 
348
- The `--bg-color` flag (or `brand.bgColor` in config) controls three things at once:
424
+ The `--bg-color` flag (or `brand.colors.background` in config) controls three things at once:
349
425
 
350
426
  1. The **Android adaptive background layer**: a solid color that fills the full 108dp canvas behind your logo.
351
427
  2. The **iOS alpha flatten** for `DefaultIcon-ios.png`. Apple rejects transparent App Store icons, so the logo is flattened on this color.
@@ -510,10 +586,11 @@ All 5 Android densities, marketplace artwork, and iOS variants regenerate in one
510
586
  | Flag | Purpose |
511
587
  | --- | --- |
512
588
  | `--bg-color <hex>` | Background color for Android adaptive + iOS/marketplace flatten. |
513
- | `--padding <n>` | Shortcut: sets BOTH Android paddings to the same value for one run. |
589
+ | `--padding <n>` | Shortcut: sets BOTH Android paddings to the same value for one run. Fixed in v7.10.0 — previously only fed `androidAdaptivePadding`, leaving `androidLegacyPadding` at its own config value. |
514
590
  | `--android-adaptive-padding <n>` | Adaptive icon safe-zone % (default `19`). |
515
591
  | `--android-legacy-padding <n>` | Legacy `ic_launcher.png` padding % (default `10`). |
516
592
  | `--ios-padding <n>` | iOS aesthetic padding % (range `2–8`, default `4`). |
593
+ | `--feature-graphic-padding <n>` | (v7.10.0) Vertical padding for `MarketplaceArtworkFeature.png` (range `0-40`, default `12`). |
517
594
 
518
595
  **Optional asset types**
519
596
 
@@ -532,6 +609,7 @@ All 5 Android densities, marketplace artwork, and iOS variants regenerate in one
532
609
  | `--dark-bg-color <hex>` | Opaque dark bg for `DefaultIcon-Dark.png` (default: transparent per Apple HIG). |
533
610
  | `--splash-logo <path>` | Override `purgetss/brand/logo-splash.{svg,png}` for Android 12+ splash artwork. |
534
611
  | `--tinted-logo <path>` | Override `purgetss/brand/logo-tinted.{svg,png}`. |
612
+ | `--feature-logo <path>` | (v7.10.0) Override `purgetss/brand/logo-feature.{svg,png}` for the Google Play Feature Graphic. |
535
613
  | `--no-dark` | Skip `DefaultIcon-Dark.png`. |
536
614
  | `--no-tinted` | Skip `DefaultIcon-Tinted.png`. |
537
615
 
@@ -552,14 +630,16 @@ All 5 Android densities, marketplace artwork, and iOS variants regenerate in one
552
630
  ### Examples
553
631
 
554
632
  ```bash
555
- purgetss brand # uses purgetss/brand/logo.svg + config
556
- purgetss brand --bg-color "#0B1326" # override bg color
557
- purgetss brand --icon-logo ./docs/app-icon.svg # dedicated square Android launcher mark
558
- purgetss brand --splash --splash-logo ./docs/splash.svg # custom Android 12+ splash artwork
559
- purgetss brand --notification --splash # add notification + splash
560
- purgetss brand --no-tinted # skip iOS 18+ tinted variant
561
- purgetss brand --dry-run # preview without writing
562
- purgetss brand --cleanup-legacy --dry-run # preview legacy cleanup
633
+ purgetss brand # uses purgetss/brand/logo.svg + config
634
+ purgetss brand --bg-color "#0B1326" # override bg color
635
+ purgetss brand --icon-logo ./docs/app-icon.svg # dedicated square Android launcher mark
636
+ purgetss brand --splash --splash-logo ./docs/splash.svg # custom Android 12+ splash artwork
637
+ purgetss brand --feature-logo ./docs/feature.svg # custom Google Play Feature Graphic (v7.10.0)
638
+ purgetss brand --feature-graphic-padding 8 # tighter Feature Graphic padding (v7.10.0)
639
+ purgetss brand --notification --splash # add notification + splash
640
+ purgetss brand --no-tinted # skip iOS 18+ tinted variant
641
+ purgetss brand --dry-run # preview without writing
642
+ purgetss brand --cleanup-legacy --dry-run # preview legacy cleanup
563
643
  ```
564
644
 
565
645
  ## Community-Discovered Patterns
@@ -68,6 +68,31 @@ theme: {
68
68
  '.btn-primary': { backgroundColor: '#22c55e', borderColor: '#bbf7d0', color: '#dcfce7', textColor: '#dcfce7' }
69
69
  ```
70
70
 
71
+ ## Use Icon Font Classes (v7.10.0)
72
+
73
+ Since v7.10.0, icon fonts bundled with PurgeTSS — FontAwesome (`fas`, `fab`, `fa-*`), Material Icons (`mi-*`), Material Symbols (`ms-*`), and Framework7 (`f7-*`) — can be referenced inside `apply` **without running `build-fonts` first**. The directive resolves these classes against the bundled `dist/*.tss` files, so the font family and the glyph are merged into the generated rule alongside the rest of the utilities.
74
+
75
+ `./purgetss/config.cjs`
76
+ ```javascript
77
+ module.exports = {
78
+ theme: {
79
+ '.close-button': {
80
+ apply: 'fas fa-times-circle wh-12 text-gray-700'
81
+ }
82
+ }
83
+ };
84
+ ```
85
+
86
+ `./purgetss/styles/utilities.tss`
87
+ ```tss
88
+ '.close-button': { color: '#374151', textColor: '#374151', width: 48, height: 48, font: { fontFamily: 'FontAwesome7Free-Solid' }, text: '', title: '' }
89
+ ```
90
+
91
+ The same lookup runs for `mi-*`, `ms-*`, and `f7-*` classes. If the project ships its own `purgetss/styles/fontawesome.tss` (for example, FontAwesome Pro or Beta), that file takes precedence over the bundled default — matching the precedence order used when the same icon class appears directly in XML.
92
+
93
+ > **PRE-v7.10.0 BEHAVIOR**
94
+ > Before v7.10.0, those icon font classes were silently dropped from `apply`-generated rules. `apply: 'fas fa-times-circle wh-12 ...'` produced every utility **except** the FontAwesome family and the icon glyph. If a project worked around this by running `build-fonts` first, that workaround is no longer required.
95
+
71
96
  ## Use Arbitrary Values
72
97
 
73
98
  You can use [Arbitrary Values](./arbitrary-values.md) to define your custom classes.
@@ -261,7 +286,7 @@ Use the explicit `default:` wrapper when you also need platform blocks (`ios:`,
261
286
  >
262
287
  > If you previously used `theme.Window` (no `extend`) and depended on the white background or the iOS `hires: true` / `Ti.UI.SIZE` defaults still being there, you will need to either move that config under `theme.extend.Window` (extend mode) or add the previously-implicit utilities back into your `apply` string.
263
288
 
264
- PurgeTSS follows the Tailwind convention for the three Ti Elements that ship with framework defaults — `Window`, `View`, and `ImageView`:
289
+ The three Ti Elements that ship with framework defaults — `Window`, `View`, and `ImageView` — support two declaration modes depending on where they are placed in `config.cjs`:
265
290
 
266
291
  - **Extend mode** — `theme.extend.Window`, `theme.extend.View`, `theme.extend.ImageView`. Your customization **merges** with the framework defaults. The white Window `backgroundColor`, `Ti.UI.SIZE` width/height on `View`, and iOS `hires: true` on `ImageView` stay in place unless you override them with `apply`. Use this when you want to add to the defaults, not replace them.
267
292
  - **Replace mode** — `theme.Window`, `theme.View`, `theme.ImageView` (top level, no `extend`). Your config **replaces** the framework defaults entirely. The white Window background is omitted, the `Ti.UI.SIZE` width/height on `View` is omitted, and the iOS `hires: true` on `ImageView` is omitted. Your `apply` becomes the source of truth for that Ti Element.
@@ -5,7 +5,7 @@ When you need a one-off value that is not in the defaults, use arbitrary values
5
5
  > **INFO**
6
6
  > To generate an arbitrary style, use parentheses notation with almost any default utility class.
7
7
  >
8
- > You cannot use square bracket notation like in Tailwind because Titanium handles platform and conditional statements in `.tss` files differently.
8
+ > Square bracket notation (`[10px]`) is **not supported** because Titanium handles platform and conditional statements in `.tss` files differently. Use parentheses (`(10px)`) instead.
9
9
 
10
10
  ## Class syntax pre-validation
11
11
 
@@ -35,7 +35,7 @@ The validator catches five narrow, actionable mistakes:
35
35
  | Pattern | Offending input | Suggested fix | Notes |
36
36
  | ----------------------------- | --------------- | ------------- | ---------------------------------------------------------------- |
37
37
  | Inverted negative sign | `top-(-10)` | `-top-(10)` | The `-` prefix goes before the rule, not inside the value |
38
- | Tailwind-style brackets | `top-[10px]` | `top-(10px)` | PurgeTSS uses parentheses, not square brackets, for arbitrary values |
38
+ | Square-bracket notation | `top-[10px]` | `top-(10px)` | PurgeTSS uses parentheses, not square brackets, for arbitrary values (v7.10.1 reworded the error from `Tailwind-style brackets "[ ]"` to `Square brackets "[ ]" are not supported`) |
39
39
  | Empty parentheses | `wh-()` | (flagged, no auto-fix) | Add a value such as `wh-(10)` |
40
40
  | Whitespace inside parentheses | `wh-( 200 )` | `wh-(200)` | No spaces allowed between `(`, the value, and `)` |
41
41
  | Redundant `px` unit | `top-(10px)` | `top-(10)` | PurgeTSS treats unit-less arbitrary values as pixels |
@@ -48,6 +48,76 @@ The pre-validator only fires on the five patterns above. Any other unknown class
48
48
 
49
49
  Before v7.8.0, an inverted negative such as `top-(-10)` could be silently misparsed by the arbitrary-value pipeline (the `-` inside the parentheses confused the token matcher, producing wrong or missing TSS output without any warning). v7.8.0 hardens that path: the parser now correctly recognizes `top-(-10)` as authored, classifies it as an inverted-negative-sign error, and surfaces the `Class Syntax Error` block with the `-top-(10)` fix instead of producing silent garbage.
50
50
 
51
+ ## Arbitrary nesting depth in `theme` objects (v7.10.0)
52
+
53
+ Since v7.10.0, property emission walks nested `theme.*` values **recursively** instead of stopping at level 2, so deeply nested color families, gradients, and background gradients now flatten into class suffixes without being silently dropped.
54
+
55
+ Before v7.10.0:
56
+
57
+ ```javascript
58
+ // pre-v7.10.0 — only colors.brand was reached; .primary.500 was silently dropped
59
+ theme: {
60
+ extend: {
61
+ colors: {
62
+ brand: {
63
+ primary: { 500: '#3b82f6', 700: '#1d4ed8' }
64
+ }
65
+ }
66
+ }
67
+ }
68
+ ```
69
+
70
+ The classes `bg-brand-primary-500`, `text-brand-primary-700`, etc. were **not** generated.
71
+
72
+ From v7.10.0 onward:
73
+
74
+ ```javascript
75
+ // v7.10.0+ — recursive walk emits the full path
76
+ theme: {
77
+ extend: {
78
+ colors: {
79
+ brand: {
80
+ primary: { 500: '#3b82f6', 700: '#1d4ed8' }
81
+ }
82
+ }
83
+ }
84
+ }
85
+ ```
86
+
87
+ ```tss
88
+ /* utilities.tss */
89
+ '.bg-brand-primary-500': { backgroundColor: '#3b82f6' }
90
+ '.bg-brand-primary-700': { backgroundColor: '#1d4ed8' }
91
+ '.text-brand-primary-500': { color: '#3b82f6', textColor: '#3b82f6' }
92
+ /* ...and every other color property */
93
+ ```
94
+
95
+ The same recursive emission applies to `backgroundGradient` and `backgroundSelectedGradient` definitions inside `theme.extend`.
96
+
97
+ ### Default modifier keys collapse silently
98
+
99
+ Three special keys — `default`, `global`, `DEFAULT` — collapse without contributing to the class-name suffix. That lets you keep a default variant alongside named variants without polluting the class name:
100
+
101
+ ```javascript
102
+ theme: {
103
+ extend: {
104
+ colors: {
105
+ surface: {
106
+ DEFAULT: '#f9fafb', // emits .bg-surface (no suffix)
107
+ muted: '#e5e7eb' // emits .bg-surface-muted
108
+ }
109
+ }
110
+ }
111
+ }
112
+ ```
113
+
114
+ ```tss
115
+ '.bg-surface': { backgroundColor: '#f9fafb' }
116
+ '.bg-surface-muted': { backgroundColor: '#e5e7eb' }
117
+ ```
118
+
119
+ If you have a project that previously kept color shades only at depth ≤ 2 to avoid the silent-drop behavior, you can now restructure them by domain without paying for nesting.
120
+
51
121
  ## Color Properties
52
122
 
53
123
  You can set arbitrary color values for all available color properties using `hex`, `rgb`, or `rgba` values, directly in XML files or in `config.cjs`.
@@ -151,7 +151,7 @@ Complete inventory of all class prefixes organized by functional category. For n
151
151
  | `touch` | `touch-enabled`, `touch-enabled-false` | Boolean |
152
152
  | `clip` | `clip-enabled`, `clip-enabled-false` | Boolean (iOS) |
153
153
  | `interactive-dismiss` | `interactive-dismiss-mode-enabled`, `*-false` | Boolean (iOS) |
154
- | `large-title` | `large-title-enabled`, `large-title-enabled-false` | Boolean (iOS). Must pair with `extend-edges-all` and `auto-adjust-scroll-view-insets` when using ScrollView — see [apply-directive.md](apply-directive.md) Community-Discovered Patterns |
154
+ | `large-title` | `large-title-enabled`, `large-title-enabled-false` | Boolean (iOS). Must pair with `extend-edges-all` and `auto-adjust-scroll-view-insets` when using ScrollView — full pattern, global-defaults recipe, TabGroup behavior, and the `content-w-screen` / `content-h-auto` ScrollView pairing live in [`ios-large-titles.md`](ios-large-titles.md). |
155
155
  | `overlay` | `overlay-enabled`, `overlay-enabled-false` | Boolean (iOS) |
156
156
  | `toolbar` | `toolbar-enabled`, `toolbar-enabled-false` | Boolean |
157
157
  | `submit` | `submit-enabled`, `submit-enabled-false` | Boolean |