purgetss/docs/whats-new/v3.0.4.md

A package that simplifies mobile app creation for Titanium developers.

# What's new in v3.0.4
- [What's new in v3.0.4](#whats-new-in-v304)
  - [More properties with arbitrary values](#more-properties-with-arbitrary-values)
    - [List of all Color Properties](#list-of-all-color-properties)
    - [List of Size or Dimension Properties](#list-of-size-or-dimension-properties)
    - [Other Properties](#other-properties)
  - [Color opacity modifiers](#color-opacity-modifiers)
    - [In your XML files](#in-your-xml-files)
    - [In the `apply` directive](#in-the-apply-directive)
    - [List of color properties whose opacity can be adjusted](#list-of-color-properties-whose-opacity-can-be-adjusted)

## More properties with arbitrary values
Now you can set arbitrary color values **to ALL available color properties**, using `hex`, `rgb` or `rgba` color values.

You can set them directly in your `xml` files or in your `config.js` file.

```xml
<Alloy>
  <Window class="from-(#243c5a) to-(#80243c5a)">
    <Label class="text-center w-11/12 h-16 bg-(rgba(100,200,50,0.5)) text-(rgb(100,200,50))" text="Green Label" />
  </Window>
</Alloy>
```

```css
// Purge TSS styles
'Window': { backgroundColor: '#ffffff' }
'.h-16': { height: 64 }
'.text-center': { textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER }
'.w-11/12': { width: '91.666667%' }

// Styles with arbitrary values
'.bg-(rgba(100,200,50,0.5))': { backgroundColor: 'rgba(100,200,50,0.5)' }
'.from-(#243c5a)': { backgroundGradient: { colors: [ '#00243c5a', '#243c5a' ] } }
'.text-(rgb(100,200,50))': { color: 'rgb(100,200,50)' }
'.to-(#80243c5a)': { backgroundGradient: { colors: [ '#80243c5a' ] } }
```

### List of all Color Properties
- **Activity Indicator Color**
  - indicator-(*`hex-rgb-or-rgba-value`*)
- **Active Tint Color**
  - active-tint-(*`hex-rgb-or-rgba-value`*)
- **Active Title Color**
  - active-title-(*`hex-rgb-or-rgba-value`*)
- **Background Color**
  - bg-(*`hex-rgb-or-rgba-value`*)
- **Background Gradient**
  - from-(*`hex-rgb-or-rgba-value`*)
  - to-(*`hex-rgb-or-rgba-value`*)
- **Background Selected Color**
  - bg-selected-(*`hex-rgb-or-rgba-value`*)
- **Bar Color**
  - bar-(*`hex-rgb-or-rgba-value`*)
- **Border Color**
  - border-(*`hex-rgb-or-rgba-value`*)
- **Color**
  - text-(*`hex-rgb-or-rgba-value`*)
- **Current Page Indicator Color**
  - current-page-(*`hex-rgb-or-rgba-value`*)
- **Drop Shadow Color**
  - drop-shadow-(*`hex-rgb-or-rgba-value`*)
- **Hint Text Color**
  - placeholder-(*`hex-rgb-or-rgba-value`*)
- **Nav Tint Color**
  - nav-tint-(*`hex-rgb-or-rgba-value`*)
- **Page Indicator Color**
  - page-(*`hex-rgb-or-rgba-value`*)
- **Paging Control Color**
  - paging-(*`hex-rgb-or-rgba-value`*)
- **Tabs Background Color**
  - tabs-bg-(*`hex-rgb-or-rgba-value`*)
- **Tabs Background Selected Color**
  - tabs-bg-selected-(*`hex-rgb-or-rgba-value`*)
- **Tint Color**
  - tint-(*`hex-rgb-or-rgba-value`*)
- **Title Color**
  - title-(*`hex-rgb-or-rgba-value`*)
- **Touch Feedback Color**
  - feedback-(*`hex-rgb-or-rgba-value`*)
- **View Shadow Color**
  - shadow-(*`hex-rgb-or-rgba-value`*)

### List of Size or Dimension Properties
- **Border Width**
  - border-(*`any-size-value-and-unit`*)
- **Content Height**
  - content-h-(*`any-size-value-and-unit`*)
- **Content Width**
  - content-w-(*`any-size-value-and-unit`*)
- **Content Width & Content Height**
  - content-(*`any-size-value-and-unit`*)
- **Font Size**
  - text-(*`any-size-value-and-unit`*)
- **Height**
  - grid-rows-(*`any-size-value-and-unit`*)
  - h-(*`any-size-value-and-unit`*)
- **Width**
  - grid-cols-(*`any-size-value-and-unit`*)
  - w-(*`any-size-value-and-unit`*)
- **Top**
  - mt-(*`any-size-value-and-unit`*)
  - top-(*`any-size-value-and-unit`*)
- **Right**
  - mr-(*`any-size-value-and-unit`*)
  - right-(*`any-size-value-and-unit`*)
- **Bottom**
  - bottom-(*`any-size-value-and-unit`*)
  - mb-(*`any-size-value-and-unit`*)
- **Left**
  - left-(*`any-size-value-and-unit`*)
  - ml-(*`any-size-value-and-unit`*)
- **Top and Bottom**
  - my-(*`any-size-value-and-unit`*)
- **Left and Right**
  - mx-(*`any-size-value-and-unit`*)
- **Top, Right, Bottom, Left**
  - m-(*`any-size-value-and-unit`*)
- **Padding Top**
  - pt-(*`any-size-value-and-unit`*)
- **Padding Right**
  - pr-(*`any-size-value-and-unit`*)
- **Padding Bottom**
  - pb-(*`any-size-value-and-unit`*)
- **Padding Left**
  - pl-(*`any-size-value-and-unit`*)
- **Padding Top and Bottom**
  - py-(*`any-size-value-and-unit`*)
- **Padding Left and Right**
  - px-(*`any-size-value-and-unit`*)
- **Padding Top, Right, Bottom and Left**
  - p-(*`any-size-value-and-unit`*)
- **PaddingTop, PaddingRight, PaddingBottom, PaddingLeft for Ti.UI.Android.CardView and Ti.UI.TabGroup**
  - **PaddingTop**
    - padding-t-(*`any-size-value-and-unit`*)
  - **PaddingRight**
    - padding-r-(*`any-size-value-and-unit`*)
  - **PaddingBottom**
    - padding-b-(*`any-size-value-and-unit`*)
  - **PaddingLeft**
    - padding-l-(*`any-size-value-and-unit`*)
  - **PaddingLeft and PaddingRight**
    - padding-x-(*`any-size-value-and-unit`*)
  - **PaddingTop and PaddingBottom**
    - padding-y-(*`any-size-value-and-unit`*)
  - **PaddingTop, PaddingRight, PaddingBottom and PaddingLeft**
    - padding-(*`any-size-value-and-unit`*)

### Other Properties
- **Anchor Point**
  - origin-(*`x-and-y-coordinates`*)
- **Border Radius**
  - rounded-(*`number-value`*)
  - rounded-t-(*`number-value`*)
  - rounded-r-(*`number-value`*)
  - rounded-b-(*`number-value`*)
  - rounded-l-(*`number-value`*)
  - rounded-tl-(*`number-value`*)
  - rounded-tr-(*`number-value`*)
  - rounded-br-(*`number-value`*)
  - rounded-bl-(*`number-value`*)
- **Cache Size**
  - cache-size-(*`number-value`*)
- **Delay**
  - delay-(*`number-value`*)
- **Duration**
  - duration-(*`number-value`*)
- **Font Weight**
  - font-(*`valid-font-weight-value`*)
- **Max Zoom Scale**
  - max-scale-(*`number-value`*)
- **Min Zoom Scale**
  - min-scale-(*`number-value`*)
- **Opacity**
  - opacity-(*`number-value`*)
- **Paging Control Alpha**
  - paging-(*`alpha-value-from-0-to-1`*)
- **Repeat**
  - repeat-(*`number-value`*)
- **Rotate**
  - rotate-(*`number-value`*)


## Color opacity modifiers
Now you can add a **color opacity modifier** to ANY of the available color properties, by adding an **opacity-value** between 0 and 100 to the end of the color name separated with a slash.

### In your XML files

```xml
<Label class="w-11/12 h-8 text-center bg-sky-500/50 text-purple-900/75">My Button</Label>
```

```css
// Purge TSS styles
'Window': { backgroundColor: '#ffffff' }
'.h-8': { height: 32 }
'.text-center': { textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER }
'.w-11/12': { width: '91.666667%' }

// Styles with color opacity modifiers
'.bg-sky-500/50': { backgroundColor: '#800ea5e9' }
'.text-purple-900/75': { color: '#bf581c87' }
```

### In the `apply` directive
You can also use color opacity modifiers in the `apply` directive in your `config.js` file.

```js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#ce10cc'
      }
    },
    '.main-banner': {
      apply: [
        'bg-primary/35',
        'border-primary/75'
      ]
    }
  }
}
```


```css
// Custom Styles and Resets
'.main-banner': { backgroundColor: '#59ce10cc', borderColor: '#bfce10cc' }

// backgroundColor Property
'.bg-primary': { backgroundColor: '#ce10cc' }
```

### List of color properties whose opacity can be adjusted

- **Activity Indicator Color**
  - indicator-{color}/opacity-value
- **Active Tint Color**
  - active-tint-{color}/opacity-value
- **Active Title Color**
  - active-title-{color}/opacity-value
- **Background Color**
  - bg-{color}/opacity-value
- **Background Gradient**
  - from-{color}/opacity-value
  - to-{color}/opacity-value
- **Background Selected Color**
  - bg-selected-{color}/opacity-value
- **Bar Color**
  - bar-{color}/opacity-value
- **Border Color**
  - border-{color}/opacity-value
- **Color**
  - text-{color}/opacity-value
- **Current Page Indicator Color**
  - current-page-{color}/opacity-value
- **Drop Shadow Color**
  - drop-shadow-{color}/opacity-value
- **Hint Text Color**
  - placeholder-{color}/opacity-value
- **Nav Tint Color**
  - nav-tint-{color}/opacity-value
- **Page Indicator Color**
  - page-{color}/opacity-value
- **Paging Control Color**
  - paging-{color}/opacity-value
- **Tabs Background Color**
  - tabs-bg-{color}/opacity-value
- **Tabs Background Selected Color**
  - tabs-bg-selected-{color}/opacity-value
- **Tint Color**
  - tint-{color}/opacity-value
- **Title Color**
  - title-{color}/opacity-value
- **Touch Feedback Color**
  - feedback-{color}/opacity-value
- **View Shadow Color**
  - shadow-{color}/opacity-value