@maccesar/titools 4.17.1 → 4.19.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 +12 -8
- package/commands/ti-audit.md +1 -1
- package/package.json +1 -1
- package/skills/purgetss/SKILL.md +45 -22
- package/skills/purgetss/references/animation-advanced.md +93 -226
- package/skills/purgetss/references/animation-system.md +26 -17
- package/skills/purgetss/references/app-branding.md +53 -26
- package/skills/purgetss/references/appearance-module.md +63 -9
- package/skills/purgetss/references/class-categories.md +2 -2
- package/skills/purgetss/references/class-index.md +1 -1
- package/skills/purgetss/references/classic-projects.md +115 -0
- package/skills/purgetss/references/cli-commands.md +71 -74
- package/skills/purgetss/references/custom-fonts.md +57 -8
- package/skills/purgetss/references/customization-deep-dive.md +12 -7
- package/skills/purgetss/references/dynamic-component-creation.md +1 -1
- package/skills/purgetss/references/icon-fonts.md +33 -6
- package/skills/purgetss/references/installation-setup.md +12 -2
- package/skills/purgetss/references/multi-density-images.md +10 -10
- package/skills/purgetss/references/purgetss-ui-classic.md +341 -0
- package/skills/purgetss/references/semantic-colors.md +17 -7
- package/skills/purgetss/references/version-history.md +28 -0
|
@@ -5,11 +5,7 @@ This page lists the commands available in PurgeTSS. For release-by-release featu
|
|
|
5
5
|
<!-- TOC-START -->
|
|
6
6
|
## Contents
|
|
7
7
|
|
|
8
|
-
- [
|
|
9
|
-
- [Development Commands](#development-commands)
|
|
10
|
-
- [Asset Commands](#asset-commands)
|
|
11
|
-
- [Utility Commands](#utility-commands)
|
|
12
|
-
- [Maintenance Commands](#maintenance-commands)
|
|
8
|
+
- [Alloy and Classic Compatibility](#alloy-and-classic-compatibility)
|
|
13
9
|
- [`init` Command](#init-command)
|
|
14
10
|
- [`create` Command](#create-command)
|
|
15
11
|
- [`brand` Command](#brand-command)
|
|
@@ -29,34 +25,21 @@ This page lists the commands available in PurgeTSS. For release-by-release featu
|
|
|
29
25
|
|
|
30
26
|
<!-- TOC-END -->
|
|
31
27
|
|
|
32
|
-
##
|
|
28
|
+
## Alloy and Classic Compatibility
|
|
33
29
|
|
|
34
|
-
- `
|
|
35
|
-
- `create`: Creates a new Alloy project with PurgeTSS already set up.
|
|
36
|
-
- `brand`: Generates the Titanium branding set from a single logo. See [`brand` Command](#brand-command).
|
|
37
|
-
- `images`: Generates multi-density UI images from sources in `./purgetss/images/`. See [`images` Command](#images-command).
|
|
30
|
+
The utility-class lifecycle remains Alloy-only. Classic projects can use independent asset and CommonJS commands without installing an `alloy.jmk` hook or adding PurgeTSS to their compilation flow.
|
|
38
31
|
|
|
39
|
-
|
|
32
|
+
| Command | Alloy | Classic | Classic behavior |
|
|
33
|
+
| --- | :---: | :---: | --- |
|
|
34
|
+
| `brand` | yes | yes | Uses Classic asset paths and follows `tiapp.xml` deployment targets; `--only` is an explicit override. |
|
|
35
|
+
| `images` | yes | yes | Writes under `Resources/` and follows deployment targets unless `--android` or `--ios` is explicit. |
|
|
36
|
+
| `semantic` | yes | yes | Writes only `Resources/semantic.colors.json`; no utility setup is created. |
|
|
37
|
+
| `shades` | yes | yes | Console modes work anywhere; saving creates or updates development-time `purgetss/config.cjs`. |
|
|
38
|
+
| `color-module`, `module` | yes | yes | Writes CommonJS modules to `app/lib/` or `Resources/lib/`. |
|
|
39
|
+
| `icon-library`, `build-fonts` | yes | yes | Writes fonts to `Resources/fonts/` and optional modules to `Resources/lib/`; Classic receives no TSS. |
|
|
40
|
+
| Root `purgetss`, `--all`, `init`, `create`, `install-dependencies`, `build`, `watch` | yes | no | Alloy utility-class lifecycle only. |
|
|
40
41
|
|
|
41
|
-
|
|
42
|
-
- `watch`: Runs `purgetss` automatically on each project compile (defaults to `--on`).
|
|
43
|
-
|
|
44
|
-
## Asset Commands
|
|
45
|
-
|
|
46
|
-
- `icon-library`: Copies the official icon fonts into `./app/assets/fonts`.
|
|
47
|
-
- `build-fonts`: Generates `./purgetss/styles/fonts.tss` with class definitions and `fontFamily` selectors for custom fonts.
|
|
48
|
-
|
|
49
|
-
## Utility Commands
|
|
50
|
-
|
|
51
|
-
- `shades`: Generates shades and tints for a color and writes the palette to `config.cjs`.
|
|
52
|
-
- `semantic`: Generates Titanium semantic colors (Light/Dark) into `app/assets/semantic.colors.json`. See [`semantic` Command](#semantic-command).
|
|
53
|
-
- `color-module`: Creates `./app/lib/purgetss.colors.js` with the colors defined in `config.cjs`.
|
|
54
|
-
- `module`: Installs `purgetss.ui.js` in the `lib` folder.
|
|
55
|
-
|
|
56
|
-
## Maintenance Commands
|
|
57
|
-
|
|
58
|
-
- `update`: Updates PurgeTSS to the latest version.
|
|
59
|
-
- `sudo-update`: Updates PurgeTSS using `sudo` to install npm modules if needed.
|
|
42
|
+
See [Classic Project Support](./classic-projects.md) for the complete boundary and audit checklist.
|
|
60
43
|
|
|
61
44
|
## `init` Command
|
|
62
45
|
|
|
@@ -87,16 +70,17 @@ module.exports = {
|
|
|
87
70
|
}
|
|
88
71
|
},
|
|
89
72
|
brand: {
|
|
90
|
-
background: '#FFFFFF',
|
|
91
|
-
|
|
92
|
-
|
|
73
|
+
background: '#FFFFFF', // inherited by every piece that doesn't set its own
|
|
74
|
+
artworkCornerRadius: '0%', // splashes, Feature Graphic and LaunchLogo
|
|
75
|
+
confirmOverwrites: true, // prompt before overwriting files (set false to skip)
|
|
76
|
+
optimize: false, // true = quantize the generated PNGs to a palette (lossy)
|
|
93
77
|
|
|
94
78
|
// One block per piece — see the `brand` Command section for the full list.
|
|
95
|
-
icon: { padding: '
|
|
79
|
+
icon: { padding: '0%' }, dark: { background: null }, tinted: {},
|
|
96
80
|
iosSplash: { padding: '26%' }, launchLogo: { padding: '12%' },
|
|
97
81
|
marketplace: {}, featureGraphic: { padding: '12%' },
|
|
98
82
|
adaptive: { padding: '18%' }, legacyIcon: { padding: '10%' },
|
|
99
|
-
appicon: {}, androidSplash: { padding: '26%' },
|
|
83
|
+
appicon: { padding: '10%' }, androidSplash: { padding: '26%' },
|
|
100
84
|
|
|
101
85
|
// Opt-in: inert until you edit the Android theme / FCM meta-data by hand.
|
|
102
86
|
splashIcon: { enabled: false }, notificationIcon: { enabled: false },
|
|
@@ -191,7 +175,7 @@ Recommended VSCode extensions:
|
|
|
191
175
|
|
|
192
176
|
## `brand` Command
|
|
193
177
|
|
|
194
|
-
Introduced in v7.6.0
|
|
178
|
+
Introduced in v7.6.0 and fully standalone in Classic since v7.14.0. Generates the complete Titanium branding set from one main logo: launcher icons, adaptive icons, iOS 18+ Dark/Tinted variants, marketplace artwork, and both splash sets. Alloy and Classic projects are auto-detected. A normal run follows `<deployment-targets>` in `tiapp.xml`; explicit `--only` intentionally overrides that filter.
|
|
195
179
|
|
|
196
180
|
> **Tip**
|
|
197
181
|
> This is a quick reference. See [app-branding.md](./app-branding.md) for the complete guide — workflow, padding guidance, Android dark mode, iOS 18+ variants, the launch-background setup, and troubleshooting. It also carries the full `brand:` config reference.
|
|
@@ -228,15 +212,20 @@ The 14 pieces, their config keys and what each one writes are tabulated in [app-
|
|
|
228
212
|
| `--padding <n>` | Shortcut: sets both Android launcher paddings to the same value for one run. |
|
|
229
213
|
| `--android-adaptive-padding <n>` | Adaptive icon safe-zone % (default `18`). |
|
|
230
214
|
| `--android-legacy-padding <n>` | Legacy `ic_launcher.png` padding % (default `10`). |
|
|
231
|
-
| `--
|
|
215
|
+
| `--appicon-padding <n>` | `appicon.png` padding % (default `10`). |
|
|
216
|
+
| `--ios-padding <n>` | Padding % for the four square iOS/marketplace pieces — `icon`, `dark`, `tinted`, `marketplace` (default `0`, full-bleed). |
|
|
232
217
|
| `--feature-graphic-padding <n>` | Vertical padding % for `MarketplaceArtworkFeature.png` (range `0-40`, default `12`). |
|
|
233
218
|
| `--launch-logo-padding <n>` | Padding % for `LaunchLogo.png` (default `12`). |
|
|
234
219
|
| `--splash-padding <n>` | Shortcut: sets both splash paddings to the same value for one run. |
|
|
235
220
|
| `--android-splash-padding <n>` | Padding % for `default.png` and the 11 `res-*` splashes (default `26`). |
|
|
236
221
|
| `--ios-splash-padding <n>` | Padding % for the 16 iPhone launch images (default `26`). |
|
|
222
|
+
| `--artwork-corner-radius <n>` / `--splash-corner-radius <n>` | Shared non-icon radius, or a splash-only one-run override (range `0-50`, default `0`). |
|
|
223
|
+
| `--ios-splash-corner-radius <n>` / `--android-splash-corner-radius <n>` | Per-platform legacy splash artwork radius (range `0-50`). |
|
|
224
|
+
| `--feature-graphic-corner-radius <n>` / `--launch-logo-corner-radius <n>` | Per-piece Feature Graphic or LaunchLogo artwork radius (range `0-50`). |
|
|
237
225
|
|
|
238
226
|
Splash padding is a share of the canvas's **shorter** side, so one number keeps the logo at the same visual weight in portrait and in landscape: the `26%` default leaves it at 48% of the shorter side.
|
|
239
227
|
|
|
228
|
+
Radius precedence and the outputs intentionally left unmasked are documented in [Rounded non-icon artwork](./app-branding.md#rounded-non-icon-artwork). Normal and `--dry-run` summaries report effective padding and radius.
|
|
240
229
|
**Optional asset types**
|
|
241
230
|
|
|
242
231
|
| Flag | Purpose |
|
|
@@ -244,7 +233,6 @@ Splash padding is a share of the canvas's **shorter** side, so one number keeps
|
|
|
244
233
|
| `--notification-icon` | Also emit `ic_stat_notify.png × 5`. |
|
|
245
234
|
| `--splash-icon` | Also emit `splash_icon.png × 5`. |
|
|
246
235
|
| `--nine-patch` | Declared but not implemented yet; prints a warning and writes nothing. |
|
|
247
|
-
|
|
248
236
|
**Logo variants & overrides**
|
|
249
237
|
|
|
250
238
|
Every piece has a `--<piece>-logo <path>` flag — with no exceptions since v7.13.0 — each overriding the matching `purgetss/brand/logo-<piece>.{svg,png}`:
|
|
@@ -252,7 +240,6 @@ Every piece has a `--<piece>-logo <path>` flag — with no exceptions since v7.1
|
|
|
252
240
|
`--icon-logo`, `--dark-logo`, `--tinted-logo`, `--ios-splash-logo`, `--launch-logo`, `--marketplace-logo`, `--feature-graphic-logo`, `--adaptive-logo`, `--legacy-icon-logo`, `--appicon-logo`, `--android-splash-logo`, `--splash-icon-logo`, `--notification-icon-logo`.
|
|
253
241
|
|
|
254
242
|
`--launch-logo` is the one that also **activates** its piece. Two more sources are not pieces: `--monochrome-logo <path>` (the silhouette shared by the adaptive monochrome layer and the notification icons, `logo-mono.{svg,png}`) and the positional `<logo>` argument (the main logo).
|
|
255
|
-
|
|
256
243
|
**Output size**
|
|
257
244
|
|
|
258
245
|
| Flag | Purpose |
|
|
@@ -284,20 +271,18 @@ Every piece has a `--<piece>-logo <path>` flag — with no exceptions since v7.1
|
|
|
284
271
|
|
|
285
272
|
> **Warning**
|
|
286
273
|
> Breaking renames in v7.13.0: `--splash` → `--splash-icon`, `--notification` → `--notification-icon`, `--splash-logo` → `--splash-icon-logo`, `--feature-logo` → `--feature-graphic-logo`. `--icon-logo` now feeds the `icon` piece; the Android launcher source is `--adaptive-logo`. `--legacy-splash` is gone. **No aliases were kept.**
|
|
287
|
-
>
|
|
288
|
-
> Also note `purgetss brand --help` still prints `default: 19` for `--android-adaptive-padding` and `default: 20` for the two splash paddings. Those help strings are stale — the pipeline applies `18`, `26` and `26`.
|
|
289
274
|
|
|
290
275
|
### Positional argument
|
|
291
276
|
|
|
292
|
-
- `[logo-path]` (optional) —
|
|
277
|
+
- `[logo-path]` (optional) — main source for every piece without an override. In a standalone Classic first run, when no canonical logo exists, PurgeTSS moves this source to `purgetss/brand/logo.{svg,png}` after confirmation and reports the destination.
|
|
293
278
|
|
|
294
279
|
### Config block (v7.13.0 per-piece structure)
|
|
295
280
|
|
|
296
|
-
Defaults live under `brand:` in `purgetss/config.cjs
|
|
281
|
+
Defaults live under `brand:` in `purgetss/config.cjs`. Since v7.14.0, a standalone Classic run creates it when missing. Each piece accepts `logo`, `padding`, `cornerRadius`, `background`, and `enabled` where applicable; radius is valid only for the two legacy splashes, Feature Graphic, and LaunchLogo. Top-level settings include shared `artworkCornerRadius`, optional `splashCornerRadius`, background, persistence, optimization, and logo values.
|
|
297
282
|
|
|
298
283
|
An unknown key aborts the run before a single file is written. A `brand:` block written for an older PurgeTSS is **rewritten on disk** on the next run, carrying over every customized value.
|
|
299
284
|
|
|
300
|
-
Full annotated block and per-key reference: [app-branding.md → The `brand:` config section](./app-branding.md#the-brand-config-section)
|
|
285
|
+
Full annotated block and per-key reference: [app-branding.md → The `brand:` config section](./app-branding.md#the-brand-config-section). Use flags for one-run sources, geometry, selection, activation, background, or optimization; keep persistent preferences in `config.cjs`.
|
|
301
286
|
|
|
302
287
|
### Confirmation prompt
|
|
303
288
|
|
|
@@ -314,12 +299,12 @@ purgetss brand --adaptive-logo ./docs/app-icon.svg # dedicated square And
|
|
|
314
299
|
purgetss brand --splash-icon --splash-icon-logo ./docs/splash.svg # custom Android 12+ splash artwork
|
|
315
300
|
purgetss brand --launch-logo ./docs/wordmark.svg # iOS launch screen logotype
|
|
316
301
|
purgetss brand --feature-graphic-logo ./docs/feature.svg # custom Google Play Feature Graphic
|
|
317
|
-
purgetss brand --
|
|
302
|
+
purgetss brand --artwork-corner-radius 22 # round supported non-icon artwork
|
|
303
|
+
purgetss brand --splash-corner-radius 18 # override both legacy splash sets
|
|
304
|
+
purgetss brand --appicon-padding 14 # temporary appicon.png inset
|
|
318
305
|
purgetss brand --notification-icon --splash-icon # add notification + splash icons
|
|
319
|
-
purgetss brand --no-tinted # skip iOS 18+ tinted variant
|
|
320
306
|
purgetss brand --optimize # quantize the generated PNGs
|
|
321
307
|
purgetss brand --dry-run # preview without writing
|
|
322
|
-
purgetss brand --cleanup-legacy --dry-run # preview legacy cleanup
|
|
323
308
|
```
|
|
324
309
|
|
|
325
310
|
### Android output groups
|
|
@@ -328,7 +313,7 @@ purgetss brand --cleanup-legacy --dry-run # preview legacy clean
|
|
|
328
313
|
|
|
329
314
|
## `images` Command
|
|
330
315
|
|
|
331
|
-
Introduced in v7.6.0. Generates multi-density variants of
|
|
316
|
+
Introduced in v7.6.0 and standalone in Classic since v7.15.0. Generates multi-density variants of UI images from one high-resolution source. Alloy and Classic projects are auto-detected. With neither platform flag, the command follows `<deployment-targets>` in `tiapp.xml`; `--android` and `--ios` are explicit overrides.
|
|
332
317
|
|
|
333
318
|
> **Tip**
|
|
334
319
|
> This is a quick reference. See [multi-density-images.md](./multi-density-images.md) for the complete guide — 4× source convention, re-processing single files, format conversion, subdirectory preservation, and troubleshooting.
|
|
@@ -360,6 +345,8 @@ purgetss images background/ # re-process one subfolder
|
|
|
360
345
|
|
|
361
346
|
- `[source]` (optional) — path to override auto-discovery. Resolves first against `purgetss/images/` (short paths like `buttons/btn.png`), then against cwd.
|
|
362
347
|
|
|
348
|
+
Alloy outputs go under `app/assets/{android,iphone}/images/`; Classic outputs go under `Resources/{android,iphone}/images/`. Passing an existing external source in Classic does not bootstrap an empty `purgetss/images/` folder or config file.
|
|
349
|
+
|
|
363
350
|
### When to use `--width`
|
|
364
351
|
|
|
365
352
|
Use `--width <n>` for SVG sources from vector editors with disproportionate viewBoxes — common in Affinity, Illustrator, and other design tools where the viewBox does not match the intended display size. Without the flag, every scale derives from the source's natural pixel size as a 4× master, which can produce unexpected output sizes.
|
|
@@ -409,14 +396,14 @@ purgetss images --dry-run # preview
|
|
|
409
396
|
|
|
410
397
|
## `semantic` Command
|
|
411
398
|
|
|
412
|
-
Introduced in v7.6.0. Generates Titanium semantic colors
|
|
399
|
+
Introduced in v7.6.0. Generates Titanium semantic colors with Light/Dark support. Alloy writes `app/assets/semantic.colors.json` and utility mappings; Classic writes only `Resources/semantic.colors.json` and does not create `purgetss/`, `config.cjs`, TSS, `app/`, or a hook. The command dispatches between two modes based on `--single`.
|
|
413
400
|
|
|
414
401
|
> **Tip**
|
|
415
402
|
> This is a quick reference. See [semantic-colors.md](./semantic-colors.md) for the complete guide — mirror inversion math, Titanium semantic color spec, class mapping conventions, and strategies for purpose-based design systems.
|
|
416
403
|
|
|
417
404
|
### Palette mode (no `--single`)
|
|
418
405
|
|
|
419
|
-
One base hex, 11-shade tonal palette with mirror-by-index Light/Dark inversion anchored at shade `500`.
|
|
406
|
+
One base hex, 11-shade tonal palette with mirror-by-index Light/Dark inversion anchored at shade `500`. Alloy writes the JSON plus the utility mapping in `config.cjs`; Classic writes only the native JSON entries.
|
|
420
407
|
|
|
421
408
|
```bash
|
|
422
409
|
purgetss semantic <hex> <name>
|
|
@@ -427,7 +414,7 @@ Usage produces classes like `bg-amazon-50`, `text-amazon-500`, `border-amazon-95
|
|
|
427
414
|
|
|
428
415
|
### Single mode (`--single`)
|
|
429
416
|
|
|
430
|
-
Explicit per-mode hex values for purpose-based semantic colors (`surfaceColor`, `textColor`, `borderColor`, `overlayColor`, etc.).
|
|
417
|
+
Explicit per-mode hex values for purpose-based semantic colors (`surfaceColor`, `textColor`, `borderColor`, `overlayColor`, etc.). Alloy writes the JSON entry and maps it to a utility class in `config.cjs`; Classic writes only the native JSON entry and uses its key directly in Titanium color properties.
|
|
431
418
|
|
|
432
419
|
```bash
|
|
433
420
|
purgetss semantic --single <hex> <name> [--dark <hex>] [--alpha <0-100>]
|
|
@@ -479,13 +466,13 @@ Re-running on the same palette family fully replaces it: PurgeTSS strips prior k
|
|
|
479
466
|
| `-a, --alpha <0-100>` | With `--single`, wraps both modes in `{ color, alpha }` per the Titanium spec. |
|
|
480
467
|
| `-n, --name <name>` | Specify the name (alternative to the positional argument). |
|
|
481
468
|
| `-r, --random` | Palette mode — use a random base color. |
|
|
482
|
-
| `-o, --override` |
|
|
483
|
-
| `-q, --quotes` |
|
|
469
|
+
| `-o, --override` | Alloy only: place the mapping in `theme.colors` instead of `theme.extend.colors`. Ignored in Classic. |
|
|
470
|
+
| `-q, --quotes` | Alloy only: keep double quotes in `config.cjs`. Ignored in Classic. |
|
|
484
471
|
| `-l, --log` | Preview the JSON without writing any files. |
|
|
485
472
|
|
|
486
473
|
## `install-dependencies` Command
|
|
487
474
|
|
|
488
|
-
This command installs dev dependencies and configuration files
|
|
475
|
+
This Alloy-only command installs dev dependencies and configuration files for the utility-class workflow and sets up Visual Studio Code support. Do not run it in Classic.
|
|
489
476
|
|
|
490
477
|
```bash
|
|
491
478
|
purgetss install-dependencies
|
|
@@ -499,7 +486,7 @@ purgetss id
|
|
|
499
486
|
|
|
500
487
|
## `icon-library` Command
|
|
501
488
|
|
|
502
|
-
Copies the bundled free font files (Font Awesome 7, Material Icons, Material Symbols, Framework7 Icons)
|
|
489
|
+
Copies the bundled free font files (Font Awesome 7, Material Icons, Material Symbols, Framework7 Icons) to `app/assets/fonts/` in Alloy or `Resources/fonts/` in Classic. Alloy resolves the official utility classes at compile time; Classic uses the installed `fontFamily` plus Unicode directly or through the optional CommonJS module.
|
|
503
490
|
|
|
504
491
|
```bash
|
|
505
492
|
purgetss icon-library [--vendor=fa,mi,ms,f7] [--module] [--styles]
|
|
@@ -513,17 +500,19 @@ purgetss il [-v=fa,mi,ms,f7] [-m] [-s]
|
|
|
513
500
|
| Flag | Purpose |
|
|
514
501
|
| --- | --- |
|
|
515
502
|
| `-v, --vendor [fa,mi,ms,f7]` | Copy specific font vendors only (default copies all four). |
|
|
516
|
-
| `-m, --module` | Copy the matching CommonJS module into
|
|
517
|
-
| `-s, --styles` |
|
|
503
|
+
| `-m, --module` | Copy the matching CommonJS module into `app/lib/` (Alloy) or `Resources/lib/` (Classic). |
|
|
504
|
+
| `-s, --styles` | Alloy only: copy official `.tss` sources into `purgetss/styles/` for reference. Classic skips this output. |
|
|
518
505
|
|
|
519
506
|
Vendor aliases: `fa`/`fontawesome`, `mi`/`materialicons`, `ms`/`materialsymbol`, `f7`/`framework7`.
|
|
520
507
|
|
|
508
|
+
Every installed module exposes `families.default`. Direct variant aliases are `solid`/`regular`/`brands` for Font Awesome; `regular`/`outlined`/`round`/`sharp`/`twoTone` for Material Icons; `outlined`/`rounded`/`sharp` for Material Symbols; and `fontFamily` for Framework7.
|
|
509
|
+
|
|
521
510
|
> **Tip**
|
|
522
511
|
> This is a quick reference. See [Icon Fonts](./icon-fonts.md) for the complete guide — variant tables (`.ms`/`.mso`/`.msr`/`.mss`, `.fa`/`.fas`/`.far`/`.fab`), XML usage patterns, the side-by-side four-family example, Font Awesome Pro / Beta workflow, and instructions for recreating removed libraries.
|
|
523
512
|
|
|
524
513
|
## `build-fonts` Command
|
|
525
514
|
|
|
526
|
-
|
|
515
|
+
Installs user-defined fonts dropped into `purgetss/fonts/`. Alloy also generates `purgetss/styles/fonts.tss`; Classic copies only native fonts to `Resources/fonts/` and generates no TSS or utility definitions.
|
|
527
516
|
|
|
528
517
|
```bash
|
|
529
518
|
purgetss build-fonts [-m] [-f]
|
|
@@ -536,13 +525,14 @@ purgetss bf [-m] [-f]
|
|
|
536
525
|
|
|
537
526
|
| Flag | Purpose |
|
|
538
527
|
| --- | --- |
|
|
539
|
-
| `-m, --module` | Also generates
|
|
528
|
+
| `-m, --module` | Also generates `app/lib/purgetss.fonts.js` (Alloy) or `Resources/lib/purgetss.fonts.js` (Classic). `exports.families` contains every processed TTF/OTF PostScript name; icon CSS additionally populates `exports.icons`. |
|
|
540
529
|
| `-f, --font-class-from-filename` | Uses the font filename as the class name and icon prefix instead of the font family. Replaces the old `-p` flag. |
|
|
541
530
|
|
|
542
531
|
### What it does
|
|
543
532
|
|
|
544
|
-
1.
|
|
545
|
-
2.
|
|
533
|
+
1. Copies font files to `app/assets/fonts/` (Alloy) or `Resources/fonts/` (Classic), renamed to their PostScript names.
|
|
534
|
+
2. In Alloy only, creates `purgetss/styles/fonts.tss` with the TSS class definitions.
|
|
535
|
+
3. With `--module`, creates the CommonJS module even for text-only font collections. Classic loads it with `require('lib/purgetss.fonts')`; see the [Classic module path table](./classic-projects.md#loading-generated-modules-in-classic).
|
|
546
536
|
|
|
547
537
|
> **Tip**
|
|
548
538
|
> This is a quick reference. See [Custom Fonts](./custom-fonts.md) for the complete guide — folder organization, class renaming, adding icon libraries, the `--module` output structure, and `--font-class-from-filename` workflow.
|
|
@@ -554,6 +544,8 @@ purgetss bf [-m] [-f]
|
|
|
554
544
|
|
|
555
545
|
The `shades` command generates shades and tints for a given color and writes the palette to `config.cjs`.
|
|
556
546
|
|
|
547
|
+
Saving works in Alloy and Classic. In Classic, `config.cjs` is only a development-time color source for commands such as `color-module`; it does not install the PurgeTSS utility lifecycle or create empty brand, font, or image source folders. If `Resources/lib/purgetss.colors.js` already exists, saving refreshes it. `--log`, `--json`, and `--tailwind` write nothing and work outside a project.
|
|
548
|
+
|
|
557
549
|
```bash
|
|
558
550
|
purgetss shades [hexcode] [name]
|
|
559
551
|
|
|
@@ -654,7 +646,9 @@ purgetss s '#65e92c' -j
|
|
|
654
646
|
|
|
655
647
|
## `color-module` Command
|
|
656
648
|
|
|
657
|
-
This command creates `purgetss.colors.js` in
|
|
649
|
+
This command creates `purgetss.colors.js` with all colors defined in `config.cjs`: `app/lib/` in Alloy or `Resources/lib/` in Classic. A missing config is created as the color source, but Classic receives no empty `purgetss/brand/`, `purgetss/fonts/`, or `purgetss/images/` folders, Alloy hook, or TSS.
|
|
650
|
+
|
|
651
|
+
Classic loads the result with `require('lib/purgetss.colors')`; see [Classic module paths](./classic-projects.md#loading-generated-modules-in-classic).
|
|
658
652
|
|
|
659
653
|
```bash
|
|
660
654
|
purgetss color-module
|
|
@@ -687,7 +681,7 @@ This is handy for using colors in code without hardcoding values in multiple pla
|
|
|
687
681
|
|
|
688
682
|
## `build` Command
|
|
689
683
|
|
|
690
|
-
The `build` command generates `utilities.tss` from `config.cjs`.
|
|
684
|
+
The Alloy-only `build` command generates `utilities.tss` from `config.cjs`. It is not part of a Classic standalone workflow.
|
|
691
685
|
|
|
692
686
|
```bash
|
|
693
687
|
purgetss build
|
|
@@ -704,7 +698,7 @@ When `purgetss` runs (manually or via `watch`), it checks for changes in `config
|
|
|
704
698
|
|
|
705
699
|
## `watch` Command
|
|
706
700
|
|
|
707
|
-
The `watch` command runs PurgeTSS on each project compile.
|
|
701
|
+
The Alloy-only `watch` command runs PurgeTSS on each Alloy project compile. Classic projects do not install this hook.
|
|
708
702
|
|
|
709
703
|
```bash
|
|
710
704
|
purgetss watch
|
|
@@ -719,12 +713,17 @@ The command installs a task in `alloy.jmk`:
|
|
|
719
713
|
|
|
720
714
|
```javascript
|
|
721
715
|
task('pre:compile', (event, logger) => {
|
|
722
|
-
|
|
723
|
-
|
|
716
|
+
logger.warn(`::PurgeTSS:: Auto-Purging ${event.dir.project}`)
|
|
717
|
+
try {
|
|
718
|
+
require('child_process').execSync('purgetss', { stdio: 'inherit' })
|
|
719
|
+
} catch (error) {
|
|
720
|
+
logger.error('::PurgeTSS:: Auto-Purge failed. Run `purgetss` from the project root to see the cause.')
|
|
721
|
+
throw error
|
|
722
|
+
}
|
|
723
|
+
})
|
|
724
724
|
```
|
|
725
725
|
|
|
726
|
-
|
|
727
|
-
> This feature works with standard Alloy projects compiled using `ti build`. It has not been tested with project types built using Webpack or Vue.
|
|
726
|
+
The default synchronous hook inherits CLI output so validation details appear before Alloy's generic failure. Async mode forwards `stdout` and `stderr` and prints the same final hint. `init` refreshes old active or disabled hooks without changing their state; invoking `watch` normally enables a disabled hook.
|
|
728
727
|
|
|
729
728
|
To deactivate it, use `--off`.
|
|
730
729
|
|
|
@@ -746,7 +745,9 @@ purgetss w -d
|
|
|
746
745
|
|
|
747
746
|
## `module` Command
|
|
748
747
|
|
|
749
|
-
The `module` command installs `purgetss.ui.js` in
|
|
748
|
+
The `module` command installs the self-contained `purgetss.ui.js` in `app/lib/` (Alloy) or `Resources/lib/` (Classic). Classic executes that generated file but needs no PurgeTSS CLI/package at build time or as an app dependency.
|
|
749
|
+
|
|
750
|
+
Classic loads it with `require('lib/purgetss.ui')`; see [Classic module paths](./classic-projects.md#loading-generated-modules-in-classic).
|
|
750
751
|
|
|
751
752
|
```bash
|
|
752
753
|
purgetss module
|
|
@@ -755,11 +756,7 @@ purgetss module
|
|
|
755
756
|
purgetss m
|
|
756
757
|
```
|
|
757
758
|
|
|
758
|
-
The
|
|
759
|
-
|
|
760
|
-
- Animation: Methods for playing or applying basic animations and transformations to Alloy objects.
|
|
761
|
-
|
|
762
|
-
See [Animation System](./animation-system.md) for details.
|
|
759
|
+
The module exports `AnimationProperties`, `createAnimation(args)`, `Appearance`, `deviceInfo()`, and `saveComponent()`. Its animation object exposes 15 state, drag, collision, position, feedback, and layout methods. See [Animation System](./animation-system.md) for Alloy or [`purgetss.ui` in Classic](./purgetss-ui-classic.md) for native JavaScript.
|
|
763
760
|
|
|
764
761
|
## `update` Command
|
|
765
762
|
|
|
@@ -1,9 +1,29 @@
|
|
|
1
1
|
# Custom Fonts
|
|
2
2
|
|
|
3
|
-
Use the `purgetss/fonts/` folder and the `build-fonts` command to register any font in
|
|
3
|
+
Use the `purgetss/fonts/` folder and the `build-fonts` command to register any font in Alloy or Classic: brand typefaces, custom icon fonts, or community icon libraries that PurgeTSS no longer bundles.
|
|
4
|
+
|
|
5
|
+
| Output | Alloy | Classic |
|
|
6
|
+
| --- | --- | --- |
|
|
7
|
+
| Font files | `app/assets/fonts/` | `Resources/fonts/` |
|
|
8
|
+
| Generated TSS classes | `purgetss/styles/fonts.tss` | Not generated |
|
|
9
|
+
| `--module` output | `app/lib/purgetss.fonts.js` | `Resources/lib/purgetss.fonts.js` |
|
|
10
|
+
|
|
11
|
+
Classic receives only native Titanium resources and optional CommonJS output. It does not receive `app/`, TSS, or an Alloy build hook.
|
|
4
12
|
|
|
5
13
|
For the 4 official icon families that ship with PurgeTSS (Font Awesome 7, Material Icons, Material Symbols, Framework7), see [Icon Fonts](./icon-fonts.md) — they use the `icon-library` command and do **not** require `build-fonts`.
|
|
6
14
|
|
|
15
|
+
<!-- TOC-START -->
|
|
16
|
+
## Contents
|
|
17
|
+
|
|
18
|
+
- [The `fonts` folder](#the-fonts-folder)
|
|
19
|
+
- [The `build-fonts` command](#the-build-fonts-command)
|
|
20
|
+
- [Adding icon fonts](#adding-icon-fonts)
|
|
21
|
+
- [Options](#options)
|
|
22
|
+
- [Custom proprietary icon fonts](#custom-proprietary-icon-fonts)
|
|
23
|
+
- [Community-Discovered Patterns](#community-discovered-patterns)
|
|
24
|
+
|
|
25
|
+
<!-- TOC-END -->
|
|
26
|
+
|
|
7
27
|
## The `fonts` folder
|
|
8
28
|
|
|
9
29
|
Place `.ttf` or `.otf` files in `./purgetss/fonts/`. For icon fonts, also include the `.css` file that ships with the library. PurgeTSS reads it to extract the Unicode characters for each icon class.
|
|
@@ -49,13 +69,15 @@ $ purgetss build-fonts [-m] [-f]
|
|
|
49
69
|
$ purgetss bf [-m] [-f]
|
|
50
70
|
```
|
|
51
71
|
|
|
52
|
-
|
|
72
|
+
In Alloy it:
|
|
53
73
|
|
|
54
74
|
1. Creates `./purgetss/styles/fonts.tss` with one `fontFamily` class per file.
|
|
55
75
|
2. Copies the font files into `./app/assets/fonts/`, renamed to their PostScript names so they work on both iOS and Android.
|
|
56
76
|
|
|
77
|
+
In Classic it copies the renamed font files into `Resources/fonts/` and deliberately skips TSS and utility definitions. Use each PostScript name directly through Titanium's `fontFamily` property.
|
|
78
|
+
|
|
57
79
|
> ℹ️ **INFO — How this differs from the official icon fonts**
|
|
58
|
-
>
|
|
80
|
+
> In Alloy, unlike the [official icon fonts](./icon-fonts.md), custom fonts generate `purgetss/styles/fonts.tss`, which is folded into generated `app/styles/app.tss`. Classic skips this class-generation step.
|
|
59
81
|
|
|
60
82
|
After running `purgetss build-fonts` with the Bevan and Dancing Script example above:
|
|
61
83
|
|
|
@@ -156,7 +178,7 @@ After `purgetss build-fonts`, the generated `fonts.tss` includes the family clas
|
|
|
156
178
|
|
|
157
179
|
Two optional flags adjust what `build-fonts` generates:
|
|
158
180
|
|
|
159
|
-
- `-m, --module`: generates a CommonJS module in
|
|
181
|
+
- `-m, --module`: generates a CommonJS module in `app/lib/purgetss.fonts.js` (Alloy) or `Resources/lib/purgetss.fonts.js` (Classic). Its `families` object exposes the PostScript name of every processed TTF/OTF; icon CSS additionally populates `icons` with Unicode strings.
|
|
160
182
|
- `-f, --font-class-from-filename`: uses the font's filename as the font class name and icon prefix instead of the font family name. Useful when you want shorter prefixes. Replaces the old `-p` flag.
|
|
161
183
|
|
|
162
184
|
### Using `--module`
|
|
@@ -168,9 +190,9 @@ $ purgetss build-fonts --module
|
|
|
168
190
|
$ purgetss bf -m
|
|
169
191
|
```
|
|
170
192
|
|
|
171
|
-
|
|
193
|
+
The module is generated for text-only font collections too. By default, every TTF/OTF contributes a camel-cased PostScript-name key to `families`; with `--font-class-from-filename`, that key comes from the filename instead. Icon CSS can add a shorter family alias and a nested `icons` map. Both singular and plural export names remain available.
|
|
172
194
|
|
|
173
|
-
|
|
195
|
+
`app/lib/purgetss.fonts.js` (Alloy) or `Resources/lib/purgetss.fonts.js` (Classic)
|
|
174
196
|
```javascript
|
|
175
197
|
const icons = {
|
|
176
198
|
// map-icons/map-icons.css
|
|
@@ -190,17 +212,40 @@ const icons = {
|
|
|
190
212
|
// ...
|
|
191
213
|
}
|
|
192
214
|
};
|
|
215
|
+
exports.icon = icons;
|
|
193
216
|
exports.icons = icons;
|
|
194
217
|
|
|
195
218
|
const families = {
|
|
219
|
+
'bevanItalic': 'Bevan-Italic',
|
|
220
|
+
'bevanRegular': 'Bevan-Regular',
|
|
221
|
+
'dancingScriptBold': 'DancingScript-Bold',
|
|
222
|
+
'dancingScriptMedium': 'DancingScript-Medium',
|
|
223
|
+
'dancingScriptRegular': 'DancingScript-Regular',
|
|
224
|
+
'dancingScriptSemiBold': 'DancingScript-SemiBold',
|
|
225
|
+
'mapIcons': 'map-icons',
|
|
226
|
+
'microns': 'microns',
|
|
196
227
|
// map-icons/map-icons.css
|
|
197
228
|
'mapIcon': 'map-icons',
|
|
198
229
|
// microns/microns.css
|
|
199
230
|
'mu': 'microns'
|
|
200
231
|
};
|
|
232
|
+
exports.family = families;
|
|
201
233
|
exports.families = families;
|
|
202
234
|
```
|
|
203
235
|
|
|
236
|
+
In Classic, load the generated file relative to `Resources/`:
|
|
237
|
+
|
|
238
|
+
```javascript
|
|
239
|
+
const customFonts = require('lib/purgetss.fonts')
|
|
240
|
+
|
|
241
|
+
const heading = Ti.UI.createLabel({
|
|
242
|
+
text: 'Custom typography',
|
|
243
|
+
font: { fontFamily: customFonts.families.dancingScriptSemiBold, fontSize: 28 }
|
|
244
|
+
})
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
See the complete [Classic module path table](./classic-projects.md#loading-generated-modules-in-classic).
|
|
248
|
+
|
|
204
249
|
### Using `--font-class-from-filename`
|
|
205
250
|
|
|
206
251
|
When you want the class name and the icon prefix to come from the **filename** of the `.ttf` and `.css` instead of the font family, use `-f`.
|
|
@@ -240,7 +285,7 @@ purgetss
|
|
|
240
285
|
/* ... */
|
|
241
286
|
```
|
|
242
287
|
|
|
243
|
-
|
|
288
|
+
`app/lib/purgetss.fonts.js` (Alloy) or `Resources/lib/purgetss.fonts.js` (Classic)
|
|
244
289
|
```javascript
|
|
245
290
|
const icons = {
|
|
246
291
|
// map-icons/mp.css
|
|
@@ -260,14 +305,18 @@ const icons = {
|
|
|
260
305
|
// ...
|
|
261
306
|
}
|
|
262
307
|
};
|
|
308
|
+
exports.icon = icons;
|
|
263
309
|
exports.icons = icons;
|
|
264
310
|
|
|
265
311
|
const families = {
|
|
312
|
+
'map': 'map-icons',
|
|
313
|
+
'mic': 'microns',
|
|
266
314
|
// map-icons/mp.css
|
|
267
315
|
'mp': 'map-icons',
|
|
268
316
|
// microns/mc.css
|
|
269
317
|
'mc': 'microns'
|
|
270
318
|
};
|
|
319
|
+
exports.family = families;
|
|
271
320
|
exports.families = families;
|
|
272
321
|
```
|
|
273
322
|
|
|
@@ -283,7 +332,7 @@ If your design system ships its own icon font, treat it like any other icon libr
|
|
|
283
332
|
The following notes reflect community experience with `build-fonts` against real-world Titanium projects.
|
|
284
333
|
|
|
285
334
|
> **💡 PostScript renaming**
|
|
286
|
-
> `build-fonts` copies `.ttf`/`.otf` files into
|
|
335
|
+
> `build-fonts` copies `.ttf`/`.otf` files into `app/assets/fonts/` (Alloy) or `Resources/fonts/` (Classic), renamed to their **PostScript names**. iOS reads PostScript names while Android tolerates filenames; by renaming both platforms work from the same `fontFamily` value.
|
|
287
336
|
|
|
288
337
|
> **🛑 Font Awesome Duotone**
|
|
289
338
|
> Titanium cannot render Font Awesome duotone icons because each icon uses two glyphs. If you work with Font Awesome Pro, avoid documenting duotone as supported.
|
|
@@ -50,13 +50,15 @@ module.exports = {
|
|
|
50
50
|
}
|
|
51
51
|
},
|
|
52
52
|
brand: {
|
|
53
|
-
background: '#FFFFFF',
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
background: '#FFFFFF', // inherited by every piece that doesn't set its own
|
|
54
|
+
artworkCornerRadius: '0%', // rounded non-icon artwork: splashes, Feature Graphic and LaunchLogo
|
|
55
|
+
confirmOverwrites: true, // prompt before overwriting files (set false to skip)
|
|
56
|
+
optimize: false, // true = quantize the generated PNGs to a palette (lossy, ~71% smaller)
|
|
56
57
|
|
|
57
58
|
// One block per piece. Artwork comes from purgetss/brand/logo-<piece>.{svg,png};
|
|
58
59
|
// these keys are for numbers, colors and activation. Padding is never inherited.
|
|
59
|
-
|
|
60
|
+
// Only iosSplash, androidSplash, featureGraphic and launchLogo accept cornerRadius.
|
|
61
|
+
icon: { padding: '0%' }, // DefaultIcon.png + DefaultIcon-ios.png
|
|
60
62
|
dark: { background: null }, // DefaultIcon-Dark.png
|
|
61
63
|
tinted: {}, // DefaultIcon-Tinted.png
|
|
62
64
|
iosSplash: { padding: '26%' }, // assets/iphone/Default*.png × 16
|
|
@@ -65,7 +67,7 @@ module.exports = {
|
|
|
65
67
|
featureGraphic: { padding: '12%' }, // MarketplaceArtworkFeature.png (1024×500)
|
|
66
68
|
adaptive: { padding: '18%' }, // ic_launcher_{foreground,background,monochrome}.png × 5 + ic_launcher.xml
|
|
67
69
|
legacyIcon: { padding: '10%' }, // ic_launcher.png × 5
|
|
68
|
-
appicon: {},
|
|
70
|
+
appicon: { padding: '10%' }, // appicon.png (128×128)
|
|
69
71
|
androidSplash: { padding: '26%' }, // assets/android/default.png + images/res-*/default.png × 11
|
|
70
72
|
|
|
71
73
|
// Opt-in: inert until you edit the Android theme / FCM meta-data by hand.
|
|
@@ -98,14 +100,17 @@ The config file has four main sections: `purge`, `brand`, `images`, and `theme`.
|
|
|
98
100
|
|
|
99
101
|
`brand:` and `images:` configure the matching CLI commands — see [CLI Commands: `brand`](./cli-commands.md#brand-command) and [CLI Commands: `images`](./cli-commands.md#images-command) for the full option lists. The rest of this page covers `purge` and `theme`.
|
|
100
102
|
|
|
101
|
-
For `brand`, the structure is **one block per piece of artwork** (v7.13.0), each accepting the same
|
|
103
|
+
For `brand`, the structure is **one block per piece of artwork** (v7.13.0), each accepting the same five keys where they apply:
|
|
102
104
|
|
|
103
105
|
- `logo`: path to this piece's artwork, when it lives outside `purgetss/brand/`
|
|
104
106
|
- `padding`: inset per side, as a number or a percentage string like `'19%'` — **never inherited**
|
|
107
|
+
- `cornerRadius`: integer or percentage string from `0` through `50`, valid only in `iosSplash`, `androidSplash`, `featureGraphic`, and `launchLogo`
|
|
105
108
|
- `background`: hex color, or `null` for transparent — inherited from `brand.background`
|
|
106
109
|
- `enabled`: `false` turns a default piece off, `true` turns an opt-in piece on
|
|
107
110
|
|
|
108
|
-
Plus `brand.background`, `brand.confirmOverwrites`, `brand.optimize`, `brand.logo` (the main logo) and `brand.monochromeLogo`.
|
|
111
|
+
Plus `brand.background`, shared `brand.artworkCornerRadius` (default `'0%'`), optional splash-only `brand.splashCornerRadius`, `brand.confirmOverwrites`, `brand.optimize`, `brand.logo` (the main logo) and `brand.monochromeLogo`.
|
|
112
|
+
|
|
113
|
+
Use flags for temporary artwork, geometry, the shared background, selection, activation, and optimization. Keep `confirmOverwrites`, permanent `enabled` values, and exceptional per-piece backgrounds in config. For radius, a piece-specific flag wins over the splash shortcut when applicable, then `--artwork-corner-radius`, piece config, `brand.splashCornerRadius` for splashes, `brand.artworkCornerRadius`, and `0%`.
|
|
109
114
|
|
|
110
115
|
> **INFO — Older `brand:` blocks update themselves**
|
|
111
116
|
> A `brand:` block written for an earlier PurgeTSS is rewritten **on disk** to this structure on the next run, carrying over every value that had been customized and printing each one it moved. Both earlier shapes are recognized: the original flat keys and the v7.7.0 grouped sections (`logos` / `padding` / `android` / `ios` / `colors`). This replaced the in-memory translation used from v7.10.2 to v7.12.1. A key that belongs to no structure at all — a typo — aborts the run with the list of valid ones instead of being ignored. See [App Icons & Branding → Older configs update themselves](./app-branding.md#older-configs-update-themselves).
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> **SCOPE NOTE**
|
|
4
4
|
>
|
|
5
|
-
> This reference covers dynamic component creation using **Alloy's `$.UI.create()` helper** and **`Alloy.createStyle()` + `applyProperties()`**, both combined with PurgeTSS utility classes. It is an Alloy + PurgeTSS integration guide, **not** documentation for the `purgetss.ui` native module (see [animation-system.md](./animation-system.md) and [animation-advanced.md](./animation-advanced.md) for
|
|
5
|
+
> This reference covers dynamic component creation using **Alloy's `$.UI.create()` helper** and **`Alloy.createStyle()` + `applyProperties()`**, both combined with PurgeTSS utility classes. It is an Alloy + PurgeTSS integration guide, **not** documentation for the `purgetss.ui` native module (see [animation-system.md](./animation-system.md) and [animation-advanced.md](./animation-advanced.md) for Alloy animation usage, or [purgetss-ui-classic.md](./purgetss-ui-classic.md) for the generated Classic runtime).
|
|
6
6
|
>
|
|
7
7
|
> For general Alloy controller and view patterns, refer to the `alloy-guides` and `alloy-howtos` skills.
|
|
8
8
|
|