@maccesar/titools 5.0.0 → 5.1.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 +26 -3
- package/package.json +1 -1
- package/skills/purgetss/SKILL.md +27 -24
- package/skills/purgetss/references/EXAMPLES.md +52 -41
- package/skills/purgetss/references/adopting-purgetss.md +137 -0
- package/skills/purgetss/references/animation-advanced.md +18 -5
- package/skills/purgetss/references/animation-system.md +21 -9
- package/skills/purgetss/references/app-branding.md +36 -97
- package/skills/purgetss/references/appearance-module.md +70 -5
- package/skills/purgetss/references/apply-directive.md +14 -6
- package/skills/purgetss/references/arbitrary-values.md +59 -23
- package/skills/purgetss/references/brand-padding-geometry.md +105 -0
- package/skills/purgetss/references/class-categories.md +684 -272
- package/skills/purgetss/references/class-index-properties.md +713 -607
- package/skills/purgetss/references/class-index.md +149 -84
- package/skills/purgetss/references/classic-projects.md +3 -3
- package/skills/purgetss/references/cli-commands.md +27 -213
- package/skills/purgetss/references/color-commands.md +218 -0
- package/skills/purgetss/references/configurable-properties.md +17 -2
- package/skills/purgetss/references/custom-fonts.md +21 -16
- package/skills/purgetss/references/custom-rules.md +7 -7
- package/skills/purgetss/references/customization-deep-dive.md +14 -11
- package/skills/purgetss/references/dynamic-component-creation.md +104 -61
- package/skills/purgetss/references/grid-layout.md +21 -24
- package/skills/purgetss/references/icon-fonts.md +37 -20
- package/skills/purgetss/references/installation-setup.md +1 -1
- package/skills/purgetss/references/ios-large-titles.md +12 -11
- package/skills/purgetss/references/migration-guide.md +101 -10
- package/skills/purgetss/references/multi-density-images.md +44 -24
- package/skills/purgetss/references/opacity-modifier.md +1 -1
- package/skills/purgetss/references/performance-tips.md +5 -4
- package/skills/purgetss/references/platform-modifiers.md +2 -2
- package/skills/purgetss/references/purgetss-ui-classic.md +21 -5
- package/skills/purgetss/references/semantic-colors.md +20 -13
- package/skills/purgetss/references/smart-mappings.md +8 -7
- package/skills/purgetss/references/svg-pipeline.md +21 -13
- package/skills/purgetss/references/tikit-components.md +2 -2
- package/skills/purgetss/references/titanium-resets.md +27 -17
- package/skills/purgetss/references/ui-ux-design.md +38 -26
- package/skills/purgetss/references/values-and-units.md +1 -2
- package/skills/purgetss/references/version-history.md +32 -4
|
@@ -38,6 +38,11 @@ The utility-class lifecycle remains Alloy-only. Classic projects can use indepen
|
|
|
38
38
|
| `color-module`, `module` | yes | yes | Writes CommonJS modules to `app/lib/` or `Resources/lib/`. |
|
|
39
39
|
| `icon-library`, `build-fonts` | yes | yes | Writes fonts to `Resources/fonts/` and optional modules to `Resources/lib/`; Classic receives no TSS. |
|
|
40
40
|
| Root `purgetss`, `--all`, `init`, `create`, `install-dependencies`, `build`, `watch` | yes | no | Alloy utility-class lifecycle only. |
|
|
41
|
+
| `update`, `sudo-update` | yes | yes | Global CLI maintenance; no project layout is required. |
|
|
42
|
+
|
|
43
|
+
The output-only modes `shades --log`, `shades --json`, `shades --tailwind`, and `semantic --log` write nothing and also work outside a project.
|
|
44
|
+
|
|
45
|
+
The root command is `purgetss [-a|--all] [--debug]`: without options it purges the Alloy project; `--all` runs `build`, `build-fonts`, and the purge in sequence; `--debug` displays execution time for each process.
|
|
41
46
|
|
|
42
47
|
See [Classic Project Support](./classic-projects.md) for the complete boundary and audit checklist.
|
|
43
48
|
|
|
@@ -122,12 +127,12 @@ The `create` command generates a new Alloy project with PurgeTSS already set up.
|
|
|
122
127
|
- `-f, --force` to overwrite an existing project.
|
|
123
128
|
- `-d, --dependencies` to install ESLint and Tailwind CSS.
|
|
124
129
|
- `-m, --module` to install the `purgetss.ui.js` module in the project's `./app/lib/` folder.
|
|
125
|
-
- `-v, --vendor
|
|
130
|
+
- `-v, --vendor <fa,mi,ms,f7>` to copy the selected fonts into your project and add the CommonJS module in `./app/lib/`. See the `icon-library` command for available fonts.
|
|
126
131
|
|
|
127
132
|
If a project with the same name already exists, the command will prompt you to confirm whether you want to overwrite it.
|
|
128
133
|
|
|
129
134
|
```bash
|
|
130
|
-
purgetss create 'Name of the Project' [--vendor="fontawesome, materialicons,
|
|
135
|
+
purgetss create 'Name of the Project' [--vendor="fontawesome, materialicons, materialsymbol, framework7"]
|
|
131
136
|
|
|
132
137
|
# alias:
|
|
133
138
|
purgetss c 'Name of the Project' [-v=fa,mi,ms,f7]
|
|
@@ -232,7 +237,7 @@ The 14 pieces, their config keys and what each one writes are tabulated in [app-
|
|
|
232
237
|
|
|
233
238
|
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.
|
|
234
239
|
|
|
235
|
-
Radius precedence
|
|
240
|
+
Radius precedence: the piece-specific flag, then `--splash-corner-radius` (splashes only), then `--artwork-corner-radius`, then the piece's `cornerRadius`, then `brand.splashCornerRadius` (splashes only), then `brand.artworkCornerRadius`, and finally `0%`. `DefaultIcon*`, `iTunesConnect.png`, `MarketplaceArtwork.png`, adaptive/legacy/app icons, and `splash_icon.png` stay unmasked. Normal and `--dry-run` summaries report effective padding and radius.
|
|
236
241
|
**Optional asset types**
|
|
237
242
|
|
|
238
243
|
| Flag | Purpose |
|
|
@@ -281,7 +286,7 @@ Every piece has a `--<piece>-logo <path>` flag — with no exceptions since v7.1
|
|
|
281
286
|
|
|
282
287
|
### Positional argument
|
|
283
288
|
|
|
284
|
-
- `[logo-path]` (optional) — main source for every piece without an override. In
|
|
289
|
+
- `[logo-path]` (optional) — main source for every piece without an override. In an in-place run (Alloy or Classic; not with `--output`) where no canonical logo exists, PurgeTSS moves this source to `purgetss/brand/logo.{svg,png}` after confirmation and reports the destination.
|
|
285
290
|
|
|
286
291
|
### Config block (v7.13.0 per-piece structure)
|
|
287
292
|
|
|
@@ -318,6 +323,8 @@ purgetss brand --dry-run # preview without writ
|
|
|
318
323
|
|
|
319
324
|
`brand` writes four Android-facing asset groups with different jobs — `ic_launcher*`, `appicon.png`, `default.png` + `images/res-*/default.png`, and the opt-in `splash_icon.png`. What each one is actually read by is spelled out in [app-branding.md → What gets generated](./app-branding.md#what-gets-generated).
|
|
320
325
|
|
|
326
|
+
`brand.background` is baked into the generated assets, but `brand` does not edit the iOS LaunchScreen or the Android theme. Run `purgetss brand --notes` to print the snippets with the current color; see [launch-background.md](./launch-background.md).
|
|
327
|
+
|
|
321
328
|
## `images` Command
|
|
322
329
|
|
|
323
330
|
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.
|
|
@@ -407,79 +414,7 @@ purgetss images --dry-run # preview
|
|
|
407
414
|
|
|
408
415
|
## `semantic` Command
|
|
409
416
|
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
> **Tip**
|
|
413
|
-
> 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.
|
|
414
|
-
|
|
415
|
-
### Palette mode (no `--single`)
|
|
416
|
-
|
|
417
|
-
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.
|
|
418
|
-
|
|
419
|
-
```bash
|
|
420
|
-
purgetss semantic <hex> <name>
|
|
421
|
-
purgetss semantic '#15803d' amazon
|
|
422
|
-
```
|
|
423
|
-
|
|
424
|
-
Usage produces classes like `bg-amazon-50`, `text-amazon-500`, `border-amazon-950` that flip tonal contrast automatically with the system appearance.
|
|
425
|
-
|
|
426
|
-
### Single mode (`--single`)
|
|
427
|
-
|
|
428
|
-
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.
|
|
429
|
-
|
|
430
|
-
```bash
|
|
431
|
-
purgetss semantic --single <hex> <name> [--dark <hex>] [--alpha <0-100>]
|
|
432
|
-
|
|
433
|
-
# Examples:
|
|
434
|
-
purgetss semantic --single '#F9FAFB' surfaceColor --dark '#0f172a'
|
|
435
|
-
purgetss semantic --single '#111827' textColor --dark '#f1f5f9'
|
|
436
|
-
purgetss semantic --single '#3B82F6' accentColor --dark '#60a5fa' --alpha 80
|
|
437
|
-
purgetss semantic --single '#000000' overlayColor --alpha 50
|
|
438
|
-
```
|
|
439
|
-
|
|
440
|
-
When `--dark` is omitted, it defaults to the light hex — useful for overlays/glass surfaces where alpha is the only variation.
|
|
441
|
-
|
|
442
|
-
### Customizing the class name
|
|
443
|
-
|
|
444
|
-
The auto-mapping uses the most literal Titanium-style transform: strip `Color`, then kebab-case the rest (e.g. `surfaceColor` → `surface`, `textSecondaryColor` → `text-secondary`). If your design system prefers different names — for example `on-surface` instead of `text`, or nesting the surface family under `DEFAULT` / `high` — edit `config.cjs` after running the `--single` batch:
|
|
445
|
-
|
|
446
|
-
`./purgetss/config.cjs`
|
|
447
|
-
```javascript
|
|
448
|
-
theme: {
|
|
449
|
-
extend: {
|
|
450
|
-
colors: {
|
|
451
|
-
surface: { DEFAULT: 'surfaceColor', high: 'surfaceHighColor' },
|
|
452
|
-
'on-surface': 'textColor',
|
|
453
|
-
'on-surface-variant': 'textSecondaryColor',
|
|
454
|
-
muted: 'textMutedColor',
|
|
455
|
-
border: 'borderColor',
|
|
456
|
-
accent: 'accentColor',
|
|
457
|
-
overlay: 'overlayColor'
|
|
458
|
-
}
|
|
459
|
-
}
|
|
460
|
-
}
|
|
461
|
-
```
|
|
462
|
-
|
|
463
|
-
The next `purgetss build` picks up the renamed classes. Editing one generated mapping is faster than typing the whole structure from scratch. See [semantic-colors.md](./semantic-colors.md) for the full nested-vs-flat discussion (including the `[object Object]` pitfall when nesting without `DEFAULT`).
|
|
464
|
-
|
|
465
|
-
### Smart in-place updates
|
|
466
|
-
|
|
467
|
-
If a `--single` name matches an existing palette shade — e.g. `purgetss semantic --single '#000' amazon500` while palette `amazon` exists — PurgeTSS narrows the operation to an in-place JSON value edit. The entry stays in its original position, and `config.cjs` is left untouched (the palette already maps to that key).
|
|
468
|
-
|
|
469
|
-
Re-running on the same palette family fully replaces it: PurgeTSS strips prior keys belonging to that family (bare name + 11 shade keys) before writing the new entries. Unrelated palettes and manually-defined entries survive.
|
|
470
|
-
|
|
471
|
-
### Flags
|
|
472
|
-
|
|
473
|
-
| Flag | Purpose |
|
|
474
|
-
| --- | --- |
|
|
475
|
-
| `-s, --single` | Generate a single purpose-based semantic color (requires explicit per-mode hex). |
|
|
476
|
-
| `-d, --dark <hex>` | With `--single`, the dark-mode hex (defaults to the light value). |
|
|
477
|
-
| `-a, --alpha <0-100>` | With `--single`, wraps both modes in `{ color, alpha }` per the Titanium spec. |
|
|
478
|
-
| `-n, --name <name>` | Specify the name (alternative to the positional argument). |
|
|
479
|
-
| `-r, --random` | Palette mode — use a random base color. |
|
|
480
|
-
| `-o, --override` | Alloy only: place the mapping in `theme.colors` instead of `theme.extend.colors`. Ignored in Classic. |
|
|
481
|
-
| `-q, --quotes` | Alloy only: keep double quotes in `config.cjs`. Ignored in Classic. |
|
|
482
|
-
| `-l, --log` | Preview the JSON without writing any files. |
|
|
417
|
+
Documented in [color-commands.md](color-commands.md#semantic-command).
|
|
483
418
|
|
|
484
419
|
## `install-dependencies` Command
|
|
485
420
|
|
|
@@ -519,7 +454,7 @@ purgetss il [-v=fa,mi,ms,f7] [-m] [-s]
|
|
|
519
454
|
|
|
520
455
|
| Flag | Purpose |
|
|
521
456
|
| --- | --- |
|
|
522
|
-
| `-v, --vendor
|
|
457
|
+
| `-v, --vendor <fa,mi,ms,f7>` | Copy specific font vendors only (default copies all four). |
|
|
523
458
|
| `-m, --module` | Copy the matching CommonJS module into `app/lib/` (Alloy) or `Resources/lib/` (Classic). |
|
|
524
459
|
| `-s, --styles` | Alloy only: copy official `.tss` sources into `purgetss/styles/` for reference. Classic skips this output. |
|
|
525
460
|
|
|
@@ -554,6 +489,16 @@ purgetss bf [-m] [-f]
|
|
|
554
489
|
2. In Alloy only, creates `purgetss/styles/fonts.tss` with the TSS class definitions.
|
|
555
490
|
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).
|
|
556
491
|
|
|
492
|
+
`Resources/app.js`
|
|
493
|
+
```javascript
|
|
494
|
+
const customFonts = require('lib/purgetss.fonts')
|
|
495
|
+
|
|
496
|
+
const title = Ti.UI.createLabel({
|
|
497
|
+
text: 'Custom typography',
|
|
498
|
+
font: { fontFamily: customFonts.families.poppinsSemiBold }
|
|
499
|
+
})
|
|
500
|
+
```
|
|
501
|
+
|
|
557
502
|
> **Tip**
|
|
558
503
|
> 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.
|
|
559
504
|
|
|
@@ -562,142 +507,11 @@ purgetss bf [-m] [-f]
|
|
|
562
507
|
|
|
563
508
|
## `shades` Command
|
|
564
509
|
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
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.
|
|
568
|
-
|
|
569
|
-
```bash
|
|
570
|
-
purgetss shades [hexcode] [name]
|
|
571
|
-
|
|
572
|
-
# alias:
|
|
573
|
-
purgetss s [hexcode] [name]
|
|
574
|
-
```
|
|
575
|
-
|
|
576
|
-
### Arguments
|
|
577
|
-
|
|
578
|
-
- `[hexcode]`: The base hexcode value. Omit this to create a random color.
|
|
579
|
-
- `[name]`: The name of the color. Omit this and a name based on the color's hue will be automatically selected.
|
|
580
|
-
|
|
581
|
-
### Options
|
|
582
|
-
|
|
583
|
-
- `-n, --name`: Specifies the name of the color.
|
|
584
|
-
- `-q, --quotes`: Retains double quotes in the `config.cjs` file.
|
|
585
|
-
- `-r, --random`: Generates shades from a random color.
|
|
586
|
-
- `-o, --override`: Places the new shades in `theme.colors` (instead of `theme.extend.colors`) to override default colors.
|
|
587
|
-
- `-s, --single`: Generates a single color definition.
|
|
588
|
-
- `-t, --tailwind`: Logs the generated shades with a `tailwind.config.js` compatible structure.
|
|
589
|
-
- `-l, --log`: Logs the generated shades instead of saving them.
|
|
590
|
-
- `-j, --json`: Logs a JSON compatible structure, which can be used in `./app/config.json`.
|
|
591
|
-
|
|
592
|
-
> **Info**
|
|
593
|
-
> More than 66% of `utilities.tss` classes are related to color properties, so `shades` is a practical way to extend color choices.
|
|
594
|
-
|
|
595
|
-
Basic usage:
|
|
596
|
-
|
|
597
|
-
```bash
|
|
598
|
-
purgetss shades 53606b Primary
|
|
599
|
-
|
|
600
|
-
# alias:
|
|
601
|
-
purgetss s 53606b Primary
|
|
602
|
-
```
|
|
603
|
-
|
|
604
|
-
The shades are added to `config.cjs`. Next time `purgetss` runs, `utilities.tss` picks them up.
|
|
605
|
-
|
|
606
|
-
`./purgetss/config.cjs`
|
|
607
|
-
```javascript
|
|
608
|
-
module.exports = {
|
|
609
|
-
theme: {
|
|
610
|
-
extend: {
|
|
611
|
-
colors: {
|
|
612
|
-
primary: {
|
|
613
|
-
'50': '#f4f6f7',
|
|
614
|
-
'100': '#e3e7ea',
|
|
615
|
-
'200': '#cad2d7',
|
|
616
|
-
'300': '#a6b3ba',
|
|
617
|
-
'400': '#7a8b96',
|
|
618
|
-
'500': '#5f707b',
|
|
619
|
-
'600': '#53606b',
|
|
620
|
-
'700': '#464f58',
|
|
621
|
-
'800': '#3e444c',
|
|
622
|
-
'900': '#373c42',
|
|
623
|
-
default: '#53606b'
|
|
624
|
-
}
|
|
625
|
-
}
|
|
626
|
-
}
|
|
627
|
-
}
|
|
628
|
-
}
|
|
629
|
-
```
|
|
630
|
-
|
|
631
|
-
Use the `--log` option to output to the console instead of saving to `config.cjs`.
|
|
632
|
-
|
|
633
|
-
```bash
|
|
634
|
-
purgetss shades 53606b Primary --log
|
|
635
|
-
|
|
636
|
-
# alias:
|
|
637
|
-
purgetss s 53606b Primary -l
|
|
638
|
-
```
|
|
639
|
-
|
|
640
|
-
Use the `--tailwind` option to output the generated shades with a `tailwind.config.js` compatible structure.
|
|
641
|
-
|
|
642
|
-
```bash
|
|
643
|
-
purgetss shades 000f3d --tailwind
|
|
644
|
-
|
|
645
|
-
# alias:
|
|
646
|
-
purgetss s 000f3d -t
|
|
647
|
-
```
|
|
648
|
-
|
|
649
|
-
To generate a random color value, use `--random`. Here, `--log` logs it to the console:
|
|
650
|
-
|
|
651
|
-
```bash
|
|
652
|
-
purgetss shades -rl
|
|
653
|
-
```
|
|
654
|
-
|
|
655
|
-
To log a Titanium `config.json` compatible structure to the console, use `--json`:
|
|
656
|
-
|
|
657
|
-
```bash
|
|
658
|
-
purgetss shades '#65e92c' -j
|
|
659
|
-
|
|
660
|
-
# alias:
|
|
661
|
-
purgetss s '#65e92c' -j
|
|
662
|
-
```
|
|
663
|
-
|
|
664
|
-
> **Info**
|
|
665
|
-
> The `shades` command is the first one that writes to `config.cjs`. If you run into issues, please report them.
|
|
510
|
+
Documented in [color-commands.md](color-commands.md#shades-command).
|
|
666
511
|
|
|
667
512
|
## `color-module` Command
|
|
668
513
|
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
Classic loads the result with `require('lib/purgetss.colors')`; see [Classic module paths](./classic-projects.md#loading-generated-modules-in-classic).
|
|
672
|
-
|
|
673
|
-
```bash
|
|
674
|
-
purgetss color-module
|
|
675
|
-
|
|
676
|
-
# alias:
|
|
677
|
-
purgetss cm
|
|
678
|
-
```
|
|
679
|
-
|
|
680
|
-
`./lib/purgetss.colors.js`
|
|
681
|
-
```javascript
|
|
682
|
-
module.exports = {
|
|
683
|
-
primary: {
|
|
684
|
-
'50': '#f4f6f7',
|
|
685
|
-
'100': '#e3e7ea',
|
|
686
|
-
'200': '#cad2d7',
|
|
687
|
-
'300': '#a6b3ba',
|
|
688
|
-
'400': '#7a8b96',
|
|
689
|
-
'500': '#5f707b',
|
|
690
|
-
'600': '#53606b',
|
|
691
|
-
'700': '#464f58',
|
|
692
|
-
'800': '#3e444c',
|
|
693
|
-
'900': '#373c42',
|
|
694
|
-
default: '#53606b'
|
|
695
|
-
}
|
|
696
|
-
// ...additional colors from config.cjs
|
|
697
|
-
}
|
|
698
|
-
```
|
|
699
|
-
|
|
700
|
-
This is handy for using colors in code without hardcoding values in multiple places.
|
|
514
|
+
Documented in [color-commands.md](color-commands.md#color-module-command).
|
|
701
515
|
|
|
702
516
|
## `build` Command
|
|
703
517
|
|
|
@@ -789,11 +603,11 @@ purgetss update
|
|
|
789
603
|
purgetss u
|
|
790
604
|
```
|
|
791
605
|
|
|
792
|
-
Runs `npm
|
|
606
|
+
Runs `npm update -g purgetss`.
|
|
793
607
|
|
|
794
608
|
## `sudo-update` Command
|
|
795
609
|
|
|
796
|
-
The `sudo-update` command is the same as `update`, but
|
|
610
|
+
The `sudo-update` command is the same as `update`, but runs `sudo npm update -g purgetss` for installs that need elevated permissions.
|
|
797
611
|
|
|
798
612
|
```bash
|
|
799
613
|
purgetss sudo-update
|
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
# PurgeTSS Color Commands
|
|
2
|
+
|
|
3
|
+
The three commands that turn colors into project files: `semantic` writes Light/Dark semantic colors, `shades` writes a Tailwind-style palette into `config.cjs`, and `color-module` exports the palette as a CommonJS module. Split out of [cli-commands.md](cli-commands.md), which covers every other command and the Alloy/Classic compatibility table.
|
|
4
|
+
|
|
5
|
+
## `semantic` Command
|
|
6
|
+
|
|
7
|
+
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`.
|
|
8
|
+
|
|
9
|
+
> **Tip**
|
|
10
|
+
> 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.
|
|
11
|
+
|
|
12
|
+
### Palette mode (no `--single`)
|
|
13
|
+
|
|
14
|
+
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.
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
purgetss semantic <hex> <name>
|
|
18
|
+
purgetss semantic '#15803d' amazon
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Usage produces classes like `bg-amazon-50`, `text-amazon-500`, `border-amazon-950` that flip tonal contrast automatically with the system appearance.
|
|
22
|
+
|
|
23
|
+
### Single mode (`--single`)
|
|
24
|
+
|
|
25
|
+
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.
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
purgetss semantic --single <hex> <name> [--dark <hex>] [--alpha <0-100>]
|
|
29
|
+
|
|
30
|
+
# Examples:
|
|
31
|
+
purgetss semantic --single '#F9FAFB' surfaceColor --dark '#0f172a'
|
|
32
|
+
purgetss semantic --single '#111827' textColor --dark '#f1f5f9'
|
|
33
|
+
purgetss semantic --single '#3B82F6' accentColor --dark '#60a5fa' --alpha 80
|
|
34
|
+
purgetss semantic --single '#000000' overlayColor --alpha 50
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
When `--dark` is omitted, it defaults to the light hex — useful for overlays/glass surfaces where alpha is the only variation.
|
|
38
|
+
|
|
39
|
+
### Customizing the class name
|
|
40
|
+
|
|
41
|
+
The auto-mapping uses the most literal Titanium-style transform: strip `Color`, then kebab-case the rest (e.g. `surfaceColor` → `surface`, `textSecondaryColor` → `text-secondary`). If your design system prefers different names — for example `on-surface` instead of `text`, or nesting the surface family under `DEFAULT` / `high` — edit `config.cjs` after running the `--single` batch:
|
|
42
|
+
|
|
43
|
+
`./purgetss/config.cjs`
|
|
44
|
+
```javascript
|
|
45
|
+
theme: {
|
|
46
|
+
extend: {
|
|
47
|
+
colors: {
|
|
48
|
+
surface: { DEFAULT: 'surfaceColor', high: 'surfaceHighColor' },
|
|
49
|
+
'on-surface': 'textColor',
|
|
50
|
+
'on-surface-variant': 'textSecondaryColor',
|
|
51
|
+
muted: 'textMutedColor',
|
|
52
|
+
border: 'borderColor',
|
|
53
|
+
accent: 'accentColor',
|
|
54
|
+
overlay: 'overlayColor'
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
The next `purgetss build` picks up the renamed classes. Editing one generated mapping is faster than typing the whole structure from scratch. See [semantic-colors.md](./semantic-colors.md) for the full nested-vs-flat discussion (including the `[object Object]` pitfall when nesting without `DEFAULT`).
|
|
61
|
+
|
|
62
|
+
### Smart in-place updates
|
|
63
|
+
|
|
64
|
+
If a `--single` name matches an existing palette shade — e.g. `purgetss semantic --single '#000' amazon500` while palette `amazon` exists — PurgeTSS narrows the operation to an in-place JSON value edit. The entry stays in its original position, and `config.cjs` is left untouched (the palette already maps to that key).
|
|
65
|
+
|
|
66
|
+
Re-running on the same palette family fully replaces it: PurgeTSS strips prior keys belonging to that family (bare name + 11 shade keys) before writing the new entries. Unrelated palettes and manually-defined entries survive.
|
|
67
|
+
|
|
68
|
+
### Flags
|
|
69
|
+
|
|
70
|
+
| Flag | Purpose |
|
|
71
|
+
| --- | --- |
|
|
72
|
+
| `-s, --single` | Generate a single purpose-based semantic color (requires explicit per-mode hex). |
|
|
73
|
+
| `-d, --dark <hex>` | With `--single`, the dark-mode hex (defaults to the light value). |
|
|
74
|
+
| `-a, --alpha <0-100>` | With `--single`, wraps both modes in `{ color, alpha }` per the Titanium spec. |
|
|
75
|
+
| `-n, --name <name>` | Specify the name (alternative to the positional argument). |
|
|
76
|
+
| `-r, --random` | Palette mode — use a random base color. |
|
|
77
|
+
| `-o, --override` | Alloy only: place the mapping in `theme.colors` instead of `theme.extend.colors`. Ignored in Classic. |
|
|
78
|
+
| `-q, --quotes` | Alloy only: keep double quotes in `config.cjs`. Ignored in Classic. |
|
|
79
|
+
| `-l, --log` | Preview the JSON without writing any files. |
|
|
80
|
+
|
|
81
|
+
## `shades` Command
|
|
82
|
+
|
|
83
|
+
The `shades` command generates shades and tints for a given color and writes the palette to `config.cjs`.
|
|
84
|
+
|
|
85
|
+
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.
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
purgetss shades [hexcode] [name]
|
|
89
|
+
|
|
90
|
+
# alias:
|
|
91
|
+
purgetss s [hexcode] [name]
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### Arguments
|
|
95
|
+
|
|
96
|
+
- `[hexcode]`: The base hexcode value. Omit this to create a random color.
|
|
97
|
+
- `[name]`: The name of the color. Omit this and a name based on the color's hue will be automatically selected.
|
|
98
|
+
|
|
99
|
+
### Options
|
|
100
|
+
|
|
101
|
+
- `-n, --name`: Specifies the name of the color.
|
|
102
|
+
- `-q, --quotes`: Retains double quotes in the `config.cjs` file.
|
|
103
|
+
- `-r, --random`: Generates shades from a random color.
|
|
104
|
+
- `-o, --override`: Places the new shades in `theme.colors` (instead of `theme.extend.colors`) to override default colors.
|
|
105
|
+
- `-s, --single`: Generates a single color definition.
|
|
106
|
+
- `-t, --tailwind`: Logs the generated shades with a `tailwind.config.js` compatible structure.
|
|
107
|
+
- `-l, --log`: Logs the generated shades instead of saving them.
|
|
108
|
+
- `-j, --json`: Logs a JSON compatible structure, which can be used in `./app/config.json`.
|
|
109
|
+
|
|
110
|
+
> **Info**
|
|
111
|
+
> More than 66% of `utilities.tss` classes are related to color properties, so `shades` is a practical way to extend color choices.
|
|
112
|
+
|
|
113
|
+
Basic usage:
|
|
114
|
+
|
|
115
|
+
```bash
|
|
116
|
+
purgetss shades 53606b Primary
|
|
117
|
+
|
|
118
|
+
# alias:
|
|
119
|
+
purgetss s 53606b Primary
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
The shades are added to `config.cjs`. Next time `purgetss` runs, `utilities.tss` picks them up.
|
|
123
|
+
|
|
124
|
+
`./purgetss/config.cjs`
|
|
125
|
+
```javascript
|
|
126
|
+
module.exports = {
|
|
127
|
+
theme: {
|
|
128
|
+
extend: {
|
|
129
|
+
colors: {
|
|
130
|
+
primary: {
|
|
131
|
+
'50': '#f4f6f7',
|
|
132
|
+
'100': '#e3e7ea',
|
|
133
|
+
'200': '#cad2d7',
|
|
134
|
+
'300': '#a6b3ba',
|
|
135
|
+
'400': '#7a8b96',
|
|
136
|
+
'500': '#5f707b',
|
|
137
|
+
'600': '#53606b',
|
|
138
|
+
'700': '#464f58',
|
|
139
|
+
'800': '#3e444c',
|
|
140
|
+
'900': '#373c42',
|
|
141
|
+
default: '#53606b'
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
Use the `--log` option to output to the console instead of saving to `config.cjs`.
|
|
150
|
+
|
|
151
|
+
```bash
|
|
152
|
+
purgetss shades 53606b Primary --log
|
|
153
|
+
|
|
154
|
+
# alias:
|
|
155
|
+
purgetss s 53606b Primary -l
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
Use the `--tailwind` option to output the generated shades with a `tailwind.config.js` compatible structure.
|
|
159
|
+
|
|
160
|
+
```bash
|
|
161
|
+
purgetss shades 000f3d --tailwind
|
|
162
|
+
|
|
163
|
+
# alias:
|
|
164
|
+
purgetss s 000f3d -t
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
To generate a random color value, use `--random`. Here, `--log` logs it to the console:
|
|
168
|
+
|
|
169
|
+
```bash
|
|
170
|
+
purgetss shades -rl
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
To log a Titanium `config.json` compatible structure to the console, use `--json`:
|
|
174
|
+
|
|
175
|
+
```bash
|
|
176
|
+
purgetss shades '#65e92c' -j
|
|
177
|
+
|
|
178
|
+
# alias:
|
|
179
|
+
purgetss s '#65e92c' -j
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
> **Info**
|
|
183
|
+
> The `shades` command is the first one that writes to `config.cjs`. If you run into issues, please report them.
|
|
184
|
+
|
|
185
|
+
## `color-module` Command
|
|
186
|
+
|
|
187
|
+
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.
|
|
188
|
+
|
|
189
|
+
Classic loads the result with `require('lib/purgetss.colors')`; see [Classic module paths](./classic-projects.md#loading-generated-modules-in-classic).
|
|
190
|
+
|
|
191
|
+
```bash
|
|
192
|
+
purgetss color-module
|
|
193
|
+
|
|
194
|
+
# alias:
|
|
195
|
+
purgetss cm
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
`app/lib/purgetss.colors.js` (Alloy) or `Resources/lib/purgetss.colors.js` (Classic)
|
|
199
|
+
```javascript
|
|
200
|
+
module.exports = {
|
|
201
|
+
primary: {
|
|
202
|
+
'50': '#f4f6f7',
|
|
203
|
+
'100': '#e3e7ea',
|
|
204
|
+
'200': '#cad2d7',
|
|
205
|
+
'300': '#a6b3ba',
|
|
206
|
+
'400': '#7a8b96',
|
|
207
|
+
'500': '#5f707b',
|
|
208
|
+
'600': '#53606b',
|
|
209
|
+
'700': '#464f58',
|
|
210
|
+
'800': '#3e444c',
|
|
211
|
+
'900': '#373c42',
|
|
212
|
+
default: '#53606b'
|
|
213
|
+
}
|
|
214
|
+
// ...additional colors from config.cjs
|
|
215
|
+
}
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
This is handy for using colors in code without hardcoding values in multiple places.
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
This reference lists all customizable properties from the official PurgeTSS configuration guide. Add these under `theme` in `config.cjs` to override defaults, or under `theme.extend` to add new values while keeping defaults.
|
|
4
4
|
|
|
5
|
+
The lists below also include properties that PurgeTSS v7.17.1 generates classes for but the official guide omits (e.g. `badgeBackgroundColor`, `statusBarColor`, `letterSpacing`, `titlePadding`). `scalesPageToFit` appears in the official configurable list but is a Boolean property: it only generates `.scales-page-to-fit` and `.scales-page-to-fit-false`.
|
|
6
|
+
|
|
5
7
|
## Global Properties
|
|
6
8
|
|
|
7
9
|
- All color properties inherit from `theme.colors`.
|
|
@@ -19,7 +21,9 @@ You can customize any of the following properties individually by adding them in
|
|
|
19
21
|
- `backgroundGradient`
|
|
20
22
|
- `backgroundSelectedColor`
|
|
21
23
|
- `backgroundSelectedGradient`
|
|
24
|
+
- `badgeBackgroundColor`
|
|
22
25
|
- `badgeColor`
|
|
26
|
+
- `badgeTextColor`
|
|
23
27
|
- `barColor`
|
|
24
28
|
- `borderColor`
|
|
25
29
|
- `color`
|
|
@@ -35,8 +39,10 @@ You can customize any of the following properties individually by adding them in
|
|
|
35
39
|
- `indicatorColor`
|
|
36
40
|
- `keyboardToolbarColor`
|
|
37
41
|
- `lightColor`
|
|
42
|
+
- `navBarColor`
|
|
38
43
|
- `navigationIconColor`
|
|
39
44
|
- `navTintColor`
|
|
45
|
+
- `onThumbColor`
|
|
40
46
|
- `onTintColor`
|
|
41
47
|
- `pageIndicatorColor`
|
|
42
48
|
- `pagingControlColor`
|
|
@@ -44,6 +50,7 @@ You can customize any of the following properties individually by adding them in
|
|
|
44
50
|
- `resultsBackgroundColor`
|
|
45
51
|
- `resultsSeparatorColor`
|
|
46
52
|
- `selectedBackgroundColor`
|
|
53
|
+
- `selectedBorderColor`
|
|
47
54
|
- `selectedButtonColor`
|
|
48
55
|
- `selectedColor`
|
|
49
56
|
- `selectedSubtitleColor`
|
|
@@ -51,10 +58,12 @@ You can customize any of the following properties individually by adding them in
|
|
|
51
58
|
- `separatorColor`
|
|
52
59
|
- `shadowColor`
|
|
53
60
|
- `statusBarBackgroundColor`
|
|
61
|
+
- `statusBarColor`
|
|
54
62
|
- `subtitleColor`
|
|
55
63
|
- `subtitleTextColor`
|
|
56
64
|
- `tabsBackgroundColor`
|
|
57
65
|
- `tabsBackgroundSelectedColor`
|
|
66
|
+
- `thumbColor`
|
|
58
67
|
- `thumbTintColor`
|
|
59
68
|
- `tint`
|
|
60
69
|
- `tintColor`
|
|
@@ -88,6 +97,8 @@ You can customize any of the following properties individually by adding them in
|
|
|
88
97
|
- `fontSize`
|
|
89
98
|
- `height`
|
|
90
99
|
- `horizontalMargin`
|
|
100
|
+
- `imageHeight`
|
|
101
|
+
- `imagePadding`
|
|
91
102
|
- `indentionLevel`
|
|
92
103
|
- `keyboardToolbarHeight`
|
|
93
104
|
- `left`
|
|
@@ -95,6 +106,7 @@ You can customize any of the following properties individually by adding them in
|
|
|
95
106
|
- `leftTrackLeftCap`
|
|
96
107
|
- `leftTrackTopCap`
|
|
97
108
|
- `leftWidth`
|
|
109
|
+
- `letterSpacing`
|
|
98
110
|
- `lineHeightMultiple`
|
|
99
111
|
- `lines`
|
|
100
112
|
- `lineSpacing`
|
|
@@ -131,14 +143,17 @@ You can customize any of the following properties individually by adding them in
|
|
|
131
143
|
- `rowCount`
|
|
132
144
|
- `rowHeight`
|
|
133
145
|
- `scale`
|
|
134
|
-
- `scalesPageToFit`
|
|
135
146
|
- `scaleX`
|
|
136
147
|
- `scaleY`
|
|
137
148
|
- `sectionHeaderTopPadding`
|
|
138
149
|
- `separatorHeight`
|
|
139
150
|
- `shadowRadius`
|
|
140
151
|
- `shiftMode`
|
|
152
|
+
- `statusBarHeight`
|
|
153
|
+
- `targetImageHeight`
|
|
154
|
+
- `targetImageWidth`
|
|
141
155
|
- `timeout`
|
|
156
|
+
- `titlePadding`
|
|
142
157
|
- `top`
|
|
143
158
|
- `uprightHeight`
|
|
144
159
|
- `uprightWidth`
|
|
@@ -158,7 +173,7 @@ Create your own custom rules and include Ti Elements with any number of attribut
|
|
|
158
173
|
The following notes come from community experience applying PurgeTSS configurable properties against Titanium's native layout constraints. They are not part of the official reference but prevent common mistakes.
|
|
159
174
|
|
|
160
175
|
> **ℹ️ `backgroundGradient`**
|
|
161
|
-
> For custom gradient rules, `backgroundGradient.colors` can use arrays of `{ color, offset }` objects.
|
|
176
|
+
> For custom gradient rules, `backgroundGradient.colors` can use arrays of `{ color, offset }` objects. Since v7.10.0, nested `backgroundGradient` / `backgroundSelectedGradient` objects under `theme` or `theme.extend` flatten into kebab-case class suffixes (e.g. `brand-primary-warm`).
|
|
162
177
|
|
|
163
178
|
> **WARNING: Titanium Padding Constraint**
|
|
164
179
|
> Titanium does not support native `padding` on `View`, `Window`, `ScrollView`, or `TableView`. Even if `padding*` is configurable, use margins on children for those elements.
|