@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.
- package/README.md +1 -1
- package/package.json +1 -1
- package/skills/purgetss/SKILL.md +222 -235
- package/skills/purgetss/references/EXAMPLES.md +8 -1
- package/skills/purgetss/references/app-branding.md +96 -16
- package/skills/purgetss/references/apply-directive.md +26 -1
- package/skills/purgetss/references/arbitrary-values.md +72 -2
- package/skills/purgetss/references/class-categories.md +1 -1
- package/skills/purgetss/references/cli-commands.md +63 -423
- package/skills/purgetss/references/custom-fonts.md +289 -0
- package/skills/purgetss/references/customization-deep-dive.md +18 -11
- package/skills/purgetss/references/dynamic-component-creation.md +0 -1
- package/skills/purgetss/references/icon-fonts.md +206 -118
- package/skills/purgetss/references/installation-setup.md +4 -4
- package/skills/purgetss/references/migration-guide.md +162 -1
- package/skills/purgetss/references/multi-density-images.md +69 -0
- package/skills/purgetss/references/version-history.md +59 -0
- package/skills/ti-expert/SKILL.md +1 -1
- package/skills/ti-ui/SKILL.md +1 -1
|
@@ -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
|
-
|
|
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%',
|
|
114
|
-
androidLegacy: '10%',
|
|
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.
|
|
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
|
|
556
|
-
purgetss brand --bg-color "#0B1326"
|
|
557
|
-
purgetss brand --icon-logo ./docs/app-icon.svg
|
|
558
|
-
purgetss brand --splash --splash-logo ./docs/splash.svg
|
|
559
|
-
purgetss brand --
|
|
560
|
-
purgetss brand --
|
|
561
|
-
purgetss brand --
|
|
562
|
-
purgetss brand --
|
|
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
|
-
|
|
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
|
-
>
|
|
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
|
-
|
|
|
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 —
|
|
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 |
|