### Install TiKit Components
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/tikit.md
Run the TiKit installer within your project directory to select and install desired UI components.
```bash
tikit install
# ? Choose a component to install › - Use arrow-keys. Return to submit.
# ❯ all components
# alerts
# avatars
# buttons
# cards
```
--------------------------------
### Install TiKit UI Components
Source: https://context7.com/maccesar/purgetss-docs-for-context7/llms.txt
Installs TiKit, a companion component library for PurgeTSS. Run `tikit install` within a PurgeTSS project after global installation.
```bash
npm install -g tikit
cd myApp
tikit install # select: all components / alerts / avatars / buttons / cards
```
--------------------------------
### Basic Draggable Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/purgetss-ui/5-the-draggable-method.md
This example demonstrates how to set up views to be draggable using the `draggable` method. It requires an `Animation` component and views to be made draggable.
```xml
```
```javascript
$.index.open()
$.draggableAnimation.draggable([$.red, $.green, $.blue])
```
--------------------------------
### Install Font Awesome Pro
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/customization/8-icon-fonts-libraries.md
Install Font Awesome Pro using npm after setting up the @fortawesome scope with your token. This command installs the package as a development dependency.
```bash
npm install --save-dev @fortawesome/fontawesome-pro
```
--------------------------------
### Transition Example: XML Structure
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/purgetss-ui/6-additional-methods.md
XML structure for a transition example, including an Animation widget and views to be animated.
```xml
```
--------------------------------
### Install TiKit CLI
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/tikit.md
Install the TiKit CLI globally. You might need to use 'sudo' depending on your system's permissions.
```bash
# Might need 'sudo' depending on your setup
npm install -g tikit
```
--------------------------------
### Install PurgeTSS CLI
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/tikit.md
Install the PurgeTSS CLI globally. Similar to TiKit, 'sudo' might be required.
```bash
# Might need 'sudo' here too
npm install -g purgetss
```
--------------------------------
### Install FontAwesome Fonts
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/purgetss-ui/7-complex-ui-elements.md
Run this command to install the necessary FontAwesome fonts for the UI elements.
```bash
> purgetss icon-library -v=fa
```
--------------------------------
### Install PurgeTSS UI Module
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/commands.md
Installs the `purgetss.ui.js` file into the `lib` folder, providing animation methods for Alloy objects.
```bash
> purgetss module
```
```bash
> purgetss m
```
--------------------------------
### Install Project Dependencies
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/commands.md
Installs development dependencies and configuration files for an existing PurgeTSS project. Also sets up Visual Studio Code support. This command may overwrite existing `extensions.json` and `settings.json` files.
```bash
> purgetss install-dependencies
# alias:
> purgetss id
```
--------------------------------
### Open Animation Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/purgetss-ui/4-the-open-close-methods.md
This example demonstrates opening `myView` using the `open` method, making it fully opaque as defined by the `open:opacity-100` class. The callback logs completion and animation state.
```xml
```
```javascript
$.myAnimation.open($.myView, (e) => {
console.log('Open animation complete')
console.log(e.state) // 'open'
console.log(e.targetId) // ID of the animated view
})
```
--------------------------------
### Complete Icon Font Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/customization/8-icon-fonts-libraries.md
A comprehensive example showcasing all four official icon font families (FontAwesome, Material Icons, Material Symbols, Framework7-Icons) side-by-side. This requires installing the icon font files using `purgetss icon-library`.
```xml
```
--------------------------------
### Basic Grid Layout Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/grid-system.md
Demonstrates the simplest grid layout using rows and columns. Use 'gap-1' for spacing between elements.
```xml
...
...
...
```
--------------------------------
### Credit Card UI Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/customization/5-arbitrary-values.md
This example showcases how arbitrary values are used in an Alloy XML view to define styles like background colors, dimensions, and border radii.
```xml
```
--------------------------------
### Example index.xml
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/installation.md
This XML file demonstrates a typical Alloy UI structure with various views, labels, and image elements, styled using utility classes.
```xml
```
--------------------------------
### Install PurgeTSS Module
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/purgetss-ui/1-introduction.md
Use the 'purgetss module' command to install the module into your project's 'lib' folder. An alias 'purgetss m' is also available.
```bash
> purgetss module
# alias:
> purgetss m
```
--------------------------------
### Font File Structure Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/customization/7-custom-fonts.md
Place font files in the `./purgetss/fonts/` directory. For icon fonts, include the `.css` file.
```bash
purgetss
└─ fonts
├─ Bevan-Italic.ttf
├─ Bevan-Regular.ttf
├─ DancingScript-Bold.ttf
├─ DancingScript-Medium.ttf
├─ DancingScript-Regular.ttf
└─ DancingScript-SemiBold.ttf
```
--------------------------------
### Create New PurgeTSS Project with Dependencies
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/commands.md
Creates a new project and installs development dependencies like ESLint and Tailwind CSS.
```bash
> purgetss create 'Name of the Project' [--dependencies]
```
```bash
# alias:
> purgetss c 'Name of the Project' [-d]
```
--------------------------------
### Install PurgeTSS Globally
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/installation.md
Install PurgeTSS globally using NPM. Ensure you have Node.js 20.0.0 or higher.
```bash
> [sudo] npm install -g purgetss
```
--------------------------------
### Basic Avatar Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/tikit.md
Demonstrates a basic circular avatar with a specified size and image source.
```xml
```
--------------------------------
### Dragging Type Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/purgetss-ui/5-the-draggable-method.md
This example demonstrates the `draggingType` property, showing how global `drag-apply` can be overridden by a local `drag-animate` setting on a specific view.
```xml
```
--------------------------------
### Close Animation Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/purgetss-ui/4-the-open-close-methods.md
This example demonstrates closing `myView` using the `close` method, making it fully transparent as defined by the `close:opacity-0` class. The callback logs completion and animation state.
```xml
```
```javascript
$.myAnimation.close($.myView, (e) => {
console.log('Close animation complete')
console.log(e.state) // 'close'
console.log(e.targetId) // ID of the animated view
})
```
--------------------------------
### Install Icon Fonts with purgetss
Source: https://context7.com/maccesar/purgetss-docs-for-context7/llms.txt
Use the `purgetss icon-library` command to install icon fonts like Font Awesome, Material Icons, and Framework7 into your project. The `--module` flag generates CommonJS modules for JavaScript usage.
```bash
# Copy all four libraries + CommonJS modules
purgetss icon-library --vendor=fa,mi,ms,f7 --module
# alias: purgetss il -v=fa,mi,ms,f7 -m
# Copy only Font Awesome
purgetss icon-library --vendor=fontawesome
```
```xml
```
```javascript
// After: purgetss icon-library --module --vendor=fa
const FA = require('fontawesome')
$.myLabel.text = FA.flag // fa-flag → '\uf024'
$.myLabel.text = FA.clockFill // Framework7 f7-clock_fill → camelCase
```
--------------------------------
### Transition Example: JavaScript Logic
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/purgetss-ui/6-additional-methods.md
JavaScript logic for handling view transitions, defining animation layouts, and triggering animations via button clicks.
```javascript
const views = [$.screen1, $.screen2, $.screen3]
const fanOut = [
{ translation: { x: -120, y: 20 }, rotate: -15, scale: 0.8, zIndex: 1 },
{ translation: { x: 0, y: 0 }, rotate: 0, scale: 1, zIndex: 3 },
{ translation: { x: 120, y: 20 }, rotate: 15, scale: 0.8, zIndex: 2 }
]
const stack = [
{ translation: { x: -8, y: 16 }, rotate: 0, scale: 0.9, zIndex: 1 },
{ translation: { x: 0, y: 8 }, rotate: 0, scale: 0.95, zIndex: 2 },
{ translation: { x: 8, y: 0 }, rotate: 0, scale: 1, zIndex: 3 }
]
const reset = [
{ translation: { x: 0, y: 0 }, rotate: 0, scale: 1, zIndex: 1 },
{ translation: { x: 0, y: 0 }, rotate: 0, scale: 1, zIndex: 2 },
{ translation: { x: 0, y: 0 }, rotate: 0, scale: 1, zIndex: 3 }
]
function doFanOut() { $.anim.transition(views, fanOut) }
function doStack() { $.anim.transition(views, stack) }
function doReset() { $.anim.transition(views, reset) }
```
--------------------------------
### Basic Tab Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/tikit.md
Define tabs using the 'Tab' component, specifying title and icons. Include child 'Require' elements for window content.
```xml
```
--------------------------------
### Checking tiapp.xml for Default Unit
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/best-practices/4-values-and-units.md
Provides an example of how to locate the `ti.ui.defaultunit` property within the `tiapp.xml` file to verify the project's default unit setting.
```xml
dp
```
--------------------------------
### Handling Component Stretching with Margins
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/installation.md
This example demonstrates how to prevent `Label`, `Button`, and `Switch` components from stretching unexpectedly due to opposite margins by adding appropriate size utility classes.
```xml
```
```xml
```
```xml
```
```xml
```
--------------------------------
### Code Card Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/tikit.md
Use the 'code' variant for displaying code snippets. Set copy="true" to include a copy button.
```xml
```
--------------------------------
### Purgetss Images Command Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/commands.md
Basic usage of the 'purgetss images' command to generate multi-density UI images from a high-resolution source. It automatically detects project types and uses configured paths.
```bash
purgetss images # uses purgetss/images/ + config
```
--------------------------------
### XML for Animation Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/purgetss-ui/2-the-play-method.md
Defines two animation elements in XML. `myAnimationReset` is for resetting animations, and `myAnimationOpen` defines an opening animation that scales children down and then back up, changing the background color on completion.
```xml
```
--------------------------------
### Card Showcase Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/tikit.md
Cards used to group related content for summaries or showcases, featuring an image, title, and description. Specify the `color` theme for background and text colors.
```xml
```
--------------------------------
### Quick Start: Generate App Branding
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/app-assets/1-app-icons-and-branding.md
Create the brand directory, copy a logo, and run the command to generate all branding assets. The command will create default configurations if they don't exist and generate files in place.
```bash
> mkdir -p purgetss/brand # if the folder doesn't exist yet
> cp docs/my-logo.svg purgetss/brand/logo.svg
> purgetss brand
```
--------------------------------
### Sequence Animation Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/purgetss-ui/6-additional-methods.md
Animates multiple views sequentially, waiting for each to complete before starting the next. The callback fires after the last view is animated. Use `close()` to reset the animation state.
```xml
```
```javascript
$.index.open()
$.fadeIn.sequence([$.title, $.subtitle, $.cta], () => {
console.log('All views animated in sequence')
})
```
--------------------------------
### Initialize Appearance Module
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/purgetss-ui/10-appearance.md
Call `Appearance.init()` once at application startup to restore the user's saved appearance preference and apply it. This should be done before opening the first window.
```APIDOC
## Initialize Appearance Module
### Description
Restores the saved appearance mode from `Ti.App.Properties` and applies it to the application's user interface. This function should be called once at application startup.
### Method
`Appearance.init()`
### Usage
```javascript
const { Appearance } = require('purgetss.ui')
Appearance.init()
```
```
--------------------------------
### Prepare Font Awesome 7 Beta Files
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/customization/8-icon-fonts-libraries.md
Move the 'css' and 'webfonts' folders from the Font Awesome 7 Beta download into the `./purgetss/fontawesome-beta` directory.
```bash
fontawesome-pro-7.0.0-beta3-web
└─ css
└─ webfonts
```
```bash
purgetss
└─ fontawesome-beta
├─ css
└─ webfonts
```
--------------------------------
### Run PurgeTSS for the First Time
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/installation.md
Execute 'purgetss' in your project root to generate necessary files and folders. This command initializes the project for PurgeTSS, creating a 'purgetss' directory with configuration and style files.
```bash
purgetss
```
--------------------------------
### Border Button Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/tikit.md
Outlined buttons. Use `classes` to control the border and text color (for example, `border-red-500 text-red-500`).
```xml
```
--------------------------------
### Filled Button Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/tikit.md
Solid background buttons. Use `classes` to set background and text colors (for example, `bg-green-600 text-white`).
```xml
```
--------------------------------
### Filled Rounded Button Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/tikit.md
Solid background buttons with rounded corners. Use `classes` to set background and text colors (for example, `bg-green-600 text-white`).
```xml
```
--------------------------------
### Install All Icon Font Families
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/customization/8-icon-fonts-libraries.md
Run the `icon-library` command to copy all four official icon font families (.ttf files) into your project's `./app/assets/fonts/` directory. This is the primary step to enable icon usage.
```bash
$ purgetss icon-library
```
--------------------------------
### Install Specific Icon Font Families
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/customization/8-icon-fonts-libraries.md
Use the `icon-library` command with the `-v` or `--variants` flag to selectively install specific icon font families. This is useful if you only need a subset of the available icons.
```bash
# All four families
$ purgetss icon-library
# Selective install
$ purgetss il -v=fa,mi,ms,f7
```
--------------------------------
### The `transition` method
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/purgetss-ui/6-additional-methods.md
Animates multiple views simultaneously to layout positions defined by `Matrix2D.translate().rotate().scale()`. Use it to switch between layout presets like fan-out, carousel, stack, or cascade.
```APIDOC
## The `transition` method
Animates multiple views simultaneously to layout positions defined by `Matrix2D.translate().rotate().scale()`. Use it to switch between layout presets like fan-out, carousel, stack, or cascade.
```javascript
$.myAnimation.transition(views, layouts)
```
```
--------------------------------
### Initialize Appearance Module
Source: https://context7.com/maccesar/purgetss-docs-for-context7/llms.txt
Initialize the Appearance module once at application startup to read and apply the saved user preference.
```javascript
// app/controllers/index.js — initialize once at startup
const { Appearance } = require('purgetss.ui')
Appearance.init() // reads saved preference from Ti.App.Properties
$.navWin.open()
```
--------------------------------
### Derived Semantic Color Key Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/best-practices/2-semantic-colors.md
Example of a derived semantic color key in `semantic.colors.json` after applying an opacity modifier. This key includes the original hex values and the specified alpha for both light and dark modes.
```json
"surfaceColor_65": {
"light": { "color": "#F9FAFB", "alpha": "65" },
"dark": { "color": "#0f172a", "alpha": "65" }
}
```
--------------------------------
### Initialize PurgeTSS in an Alloy Project
Source: https://context7.com/maccesar/purgetss-docs-for-context7/llms.txt
Sets up PurgeTSS on an existing Alloy project by creating the configuration file and necessary subfolders. An alias `purgetss i` is available.
```bash
purgetss init
# alias: purgetss i
```
--------------------------------
### Drag and Drop Modifiers Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/purgetss-ui/5-the-draggable-method.md
This example shows how to use `drag:` and `drop:` modifiers to apply basic animations during drag and drop operations. Global modifiers are set on the Animation object, and local modifiers can override them per view.
```xml
```
--------------------------------
### Content Card Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/tikit.md
The 'content' variant is for displaying hierarchical text with a title, subtitle, and body.
```xml
```
--------------------------------
### Initialize Appearance at Startup
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/best-practices/1-appearance-setup.md
Call `Appearance.init()` once before opening the first window. This reads the saved preference from `Ti.App.Properties` and applies it through `Ti.UI.overrideUserInterfaceStyle`. If no preference is saved, the system default stays in place.
```javascript
const { Appearance } = require('purgetss.ui')
Appearance.init()
$.navWin.open()
```
--------------------------------
### TiKit UI Component Examples (XML)
Source: https://context7.com/maccesar/purgetss-docs-for-context7/llms.txt
Demonstrates the declarative usage of various TiKit UI components within an Alloy XML view. Components accept PurgeTSS utility classes for styling and have configurable properties.
```xml
```
--------------------------------
### Auto-migration Deprecation Notice
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/app-assets/1-app-icons-and-branding.md
Example of a deprecation notice printed when an older flat brand schema is detected and auto-migrated.
```text
::PurgeTSS:: Legacy brand: schema detected in purgetss/config.cjs — auto-migrated in memory:
• brand.padding: 15 → brand.padding.androidLegacy + brand.padding.androidAdaptive
• brand.iosPadding → brand.padding.ios
• brand.bgColor → brand.colors.background
Update purgetss/config.cjs to the new grouped schema to silence this warning.
```
--------------------------------
### Add Custom Icon Libraries
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/customization/8-icon-fonts-libraries.md
Place the font files (.ttf/.otf) and CSS files for your chosen icon library into the `./purgetss/fonts//` directory. This prepares them for PurgeTSS processing.
```bash
purgetss/fonts//
├─ *.ttf
├─ *.otf
└─ *.css
```
--------------------------------
### Install Icon Fonts with Stylesheets and Modules
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/customization/8-icon-fonts-libraries.md
The `icon-library` command supports optional flags to include additional files. Use `-s` or `--styles` to copy the official `.tss` source files for reference and `-m` or `--module` to copy CommonJS modules that expose icon Unicode strings to JavaScript.
```bash
# Add either flag when you want them
$ purgetss il -s
$ purgetss il -m
$ purgetss il -m -s
```
--------------------------------
### Quote Card Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/tikit.md
Use the 'quote' variant to display attributed quotes. Requires 'name' and 'text' properties.
```xml
```
--------------------------------
### Update PurgeTSS to Latest Version
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/commands.md
Upgrades PurgeTSS to the latest version by running `npm install -g purgetss@latest`.
```bash
> purgetss update
```
```bash
> purgetss u
```
--------------------------------
### Configure PurgeTSS Settings
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/commands.md
Use `ti config` to set application ID prefixes and workspace paths.
```bash
ti config app.idprefix 'com.yourdomain'
```
```bash
ti config app.workspace 'the-full-path/to-the-workspace-folder'
```
--------------------------------
### Showcase Card Example
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/tikit.md
The 'showcase' variant displays an image with a title and description. The 'rounded' property controls border radius.
```xml
```
--------------------------------
### Onboarding Screen Sequence Animation
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/purgetss-ui/6-additional-methods.md
Demonstrates a real-world use case for sequential animations on an onboarding screen, revealing content step-by-step. The `close()` method is used to reset the animation state for re-triggering.
```xml
```
```javascript
const views = [$.logo, $.headline, $.subtitle, $.startBtn]
function doReveal() {
// Force open state first, then sequence
$.revealAnim.sequence(views, (e) => {
$.status.applyProperties({ text: `sequence done - ${e.index + 1}/${e.total} views revealed` })
})
}
function doReset() {
// Use close to properly reset the Animation state
$.revealAnim.close(views, () => {
$.status.applyProperties({ text: 'Reset - tap Reveal to start again' })
})
}
```
--------------------------------
### Configure PurgeTSS `theme` section
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/customization/1-configuring-guide.md
Define your project's color palette, type scale, font stacks, and other design properties. Use `extend` to add new values without overwriting defaults.
```javascript
module.exports = {
theme: {
fontFamily: {
display: 'AlfaSlabOne-Regular',
body: 'BarlowSemiCondensed-Regular'
},
borderWidth: {
DEFAULT: 1,
0: 0,
2: 2,
4: 4,
},
extend: {
colors: {
cyan: '#9cdbff',
},
spacing: {
96: '24rem',
128: '32rem',
}
}
}
}
```
--------------------------------
### NavigationWindow with Large Title Support
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/best-practices/3-large-titles-on-ios.md
Use a `NavigationWindow` with a `ScrollView` to ensure content starts below the navigation bar when large titles are enabled.
```xml
```
--------------------------------
### Real-world use case: Panel with zoom-in effect
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/purgetss-ui/4-the-open-close-methods.md
Demonstrates a common pattern for showing a modal panel with a zoom-in effect on open and instant closing.
```APIDOC
## Real-world use case: Panel with zoom-in effect
### Description
This example shows how to implement a modal panel with a zoom-in effect using `open` and `close` methods, along with custom classes for animation control.
### XML Structure (`panel-zoom.xml`)
```xml
```
### JavaScript Logic (`panel-zoom.js`)
```javascript
function showPanel() {
$.panel.show();
$.panelAnim.open($.panel);
}
function closePanel() {
$.panelAnim.close($.panel, () => {
$.panel.hide();
});
}
function onOverlayTap({ source }) {
if (source.id === 'panel') closePanel();
}
```
### Key Classes and Animation Control
- `zoom-in-110`: Scales the content to 110% on open, resetting to 100% on completion for a pop effect.
- `opacity-to-100`: Fades the overlay from transparent to opaque.
- `close:duration-0 open:duration-100`: Sets the closing animation to be instant and the opening animation to last 100ms.
- `duration-75`: Applies a 75ms duration to the overlay fade.
### Summary
Show and hide operations are concise, with animation logic defined declaratively in the XML using modifiers and classes.
```
--------------------------------
### Create PurgeTSS Project
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/tikit.md
Create a new Alloy project configured with PurgeTSS. Ensure 'app.idprefix' and 'app.theme' are set as required by PurgeTSS.
```bash
purgetss create myApp
# Follow the prompts
```
--------------------------------
### Update PurgeTSS with Sudo
Source: https://github.com/maccesar/purgetss-docs-for-context7/blob/main/docs/commands.md
Performs the same update as the `update` command but uses `sudo` for installing npm modules, which may be necessary in certain environments.
```bash
> purgetss sudo-update
```
```bash
> purgetss su
```
--------------------------------
### Usage of Semantic Colors in XML
Source: https://context7.com/maccesar/purgetss-docs-for-context7/llms.txt
Example of applying semantic colors as CSS classes in an XML view. Opacity modifiers are automatically derived.
```xml
```
--------------------------------
### Create a New Alloy Project with PurgeTSS
Source: https://context7.com/maccesar/purgetss-docs-for-context7/llms.txt
Scaffolds a new Alloy project with PurgeTSS pre-configured. Requires Titanium workspace configuration. Options include specifying vendors and dependencies, or forcing an overwrite.
```bash
# Configure Titanium workspace (one-time setup)
ti config app.idprefix 'com.mycompany'
ti config app.workspace '/Users/me/projects'
# Create project with Font Awesome + Material Icons + dev dependencies
purgetss create 'My App' --vendor=fa,mi --dependencies
# alias: purgetss c 'My App' -v=fa,mi -d
# Force-overwrite an existing project
purgetss create 'My App' --force
```