purgetss 3.0.4 → 3.1.2

package/docs/whats-new/v2.5.0.md

@@ -109,7 +109,7 @@ If you set a view with `.row-span-3` you can add three more views of equal heigh
 <img src="../../assets/images/grid-system-example.png" width="375" alt="Grid System Examples">
 
 ### Available utilities for `The Grid`
-These are the available utilities to control **”The Grid”** ( use **"TRON: Legacy"** score here! ) 🤣
+These are the available utilities to control [**”The Grid”**](https://youtu.be/4-J4duzP8Ng?t=13)
 
 #### Gap
 Utilities for controlling gutters between grid.
@@ -242,10 +242,10 @@ You can create more complex animations by combining properties to different `sta
       </View>
     </View>
 
-    <Animation id="squaresWidth" class="ease-out delay-50 open:w-11/12 close:w-28 debug-on" module="purgetss.ui" />
+    <Animation id="squaresWidth" class="ease-out delay-50 open:w-11/12 close:w-28 debug" module="purgetss.ui" />
     <Animation id="transparency" class="open:duration-150 close:duration-300 open:mt-(null) close:mt-8 open:w-10/12 open:h-11/12 close:w-14 close:h-14 open:opacity-50 close:opacity-100" module="purgetss.ui" />
     <Animation id="retweet" class="open:duration-200 close:duration-150 open:-mb-16 close:-mb-52" module="purgetss.ui" />
-    <Animation id="changeColor" class="delay-25 open:bg-purple-500 close:bg-blue-700 debug-on" module="purgetss.ui" />
+    <Animation id="changeColor" class="delay-25 open:bg-purple-500 close:bg-blue-700 debug" module="purgetss.ui" />
   </Window>
 </Alloy>
 ```
@@ -277,7 +277,7 @@ $.index.open();
 ### Example 3
 The following example `applies` the properties to prevent the animation from showing.
 
-The method `apply` sets the properties instantly. The `ScrollableView` is rotated 90 degrees, and its content is counter rotated -90 degrees.
+The method `apply` sets the properties instantly. In this example, the `ScrollableView` is rotated 90 degrees, and its content is counter rotated -90 degrees.
 
 ```xml
 <Alloy>
@@ -637,8 +637,8 @@ Set to true for the paging control at the top.
 
 ```css
 // pagingControlOnTop Property
-'.paging-on-top': { pagingControlOnTop: true }
-'.paging-on-bottom': { pagingControlOnTop: false }
+'.paging-control-on-top': { pagingControlOnTop: true }
+'.paging-control-on-bottom': { pagingControlOnTop: false }
 ```
 
 ### pagingControlTimeout

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

@@ -51,9 +51,9 @@ You can set them directly in your `xml` files or in your `config.js` file.
 - **Bar Color**
   - bar-(*`hex-rgb-or-rgba-value`*)
 - **Border Color**
-  - border-color-(*`hex-rgb-or-rgba-value`*)
+  - border-(*`hex-rgb-or-rgba-value`*)
 - **Color**
-  - text-color-(*`hex-rgb-or-rgba-value`*)
+  - text-(*`hex-rgb-or-rgba-value`*)
 - **Current Page Indicator Color**
   - current-page-(*`hex-rgb-or-rgba-value`*)
 - **Hint Text Color**
@@ -77,7 +77,7 @@ You can set them directly in your `xml` files or in your `config.js` file.
 
 ### List of Size or Dimension Properties
 - **Border Width**
-  - border-width-(*`any-size-value-and-unit`*)
+  - border-(*`any-size-value-and-unit`*)
 - **Content Height**
   - content-h-(*`any-size-value-and-unit`*)
 - **Content Width**
@@ -85,7 +85,7 @@ You can set them directly in your `xml` files or in your `config.js` file.
 - **Content Width & Content Height**
   - content-(*`any-size-value-and-unit`*)
 - **Font Size**
-  - text-size-(*`any-size-value-and-unit`*)
+  - text-(*`any-size-value-and-unit`*)
 - **Height**
   - grid-rows-(*`any-size-value-and-unit`*)
   - h-(*`any-size-value-and-unit`*)
@@ -137,7 +137,7 @@ You can set them directly in your `xml` files or in your `config.js` file.
 - **Duration**
   - duration-(*`number-value`*)
 - **Font Weight**
-  - font-(*`valid-font-font-weight-value`*)
+  - font-(*`valid-font-weight-value`*)
 - **Max Zoom Scale**
   - max-scale-(*`number-value`*)
 - **Min Zoom Scale**
@@ -153,7 +153,7 @@ You can set them directly in your `xml` files or in your `config.js` file.
 
 
 ## 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.
+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
 
@@ -236,6 +236,7 @@ module.exports = {
   - tabs-bg-{color}/opacity-value
 - **Tint Color**
   - tint-{color}/opacity-value
+- **Title Color**
   - title-{color}/opacity-value
 - **Touch Feedback Color**
   - feedback-{color}/opacity-value

package/docs/whats-new/v3.0.5.md

@@ -0,0 +1,136 @@
+- [Minor Tweeks to Shadow Classes](#minor-tweeks-to-shadow-classes)
+- [Activity Indicator](#activity-indicator)
+  - [Indicator Colors Property (ActivityIndicator)](#indicator-colors-property-activityindicator)
+  - [Styling the activity indicator.](#styling-the-activity-indicator)
+
+## Minor Tweeks to Shadow Classes
+Did some minor adjustments to the shadow classes to better match the shadows from Tailwind.
+
+Also added `drop-shadow-xx` classes for compatibility with Tailwind classes.
+
+```xml
+<Alloy>
+  <Window class="grid bg-gray-100">
+    <View class="grid-cols-4 grid-rows-1">
+      <View class="vertical clip-disabled">
+        <Label class="mb-3 text-sm text-gray-500" text="shadow-md" />
+        <View class="w-24 h-24 bg-white rounded-lg shadow-md" />
+      </View>
+    </View>
+
+    <View class="grid-cols-4 grid-rows-1">
+      <View class="vertical clip-disabled">
+        <Label class="mb-3 text-sm text-gray-500" text="shadow-lg" />
+        <View class="w-24 h-24 bg-white rounded-lg shadow-lg"/>
+      </View>
+    </View>
+
+    <View class="grid-cols-4 grid-rows-1">
+      <View class="vertical clip-disabled">
+        <Label class="mb-3 text-sm text-gray-500" text="shadow-xl" />
+        <View class="w-24 h-24 bg-white rounded-lg shadow-xl"/>
+      </View>
+    </View>
+
+    <View class="grid-cols-4 grid-rows-1">
+      <View class="vertical clip-disabled">
+        <Label class="mb-3 text-sm text-gray-500" text="shadow-2xl" />
+        <View class="w-24 h-24 bg-white rounded-lg shadow-2xl"/>
+      </View>
+    </View>
+  </Window>
+</Alloy>
+```
+
+```css
+// Main styles
+'View': { width: Ti.UI.SIZE, height: Ti.UI.SIZE }
+'Window': { backgroundColor: '#ffffff' }
+'.bg-white': { backgroundColor: '#ffffff' }
+'.bg-gray-100': { backgroundColor: '#f3f4f6' }
+'.rounded-lg': { borderRadius: 8 }
+'.clip-disabled[platform=ios]': { clipMode: Ti.UI.iOS.CLIP_MODE_DISABLED }
+'.text-sm': { font: { fontSize: 14 } }
+'.grid': { layout: 'horizontal' }
+'.grid-cols-4': { width: '25%' }
+'.grid-rows-1': { height: '100%' }
+'.h-24': { height: 96 }
+'.vertical': { layout: 'vertical' }
+'.mb-3': { bottom: 12 }
+'.shadow-md': { viewShadowOffset: { x: 0, y: 3 }, viewShadowRadius: 3, viewShadowColor: '#59000000' }
+'.shadow-lg': { viewShadowOffset: { x: 0, y: 4 }, viewShadowRadius: 4, viewShadowColor: '#59000000' }
+'.shadow-xl': { viewShadowOffset: { x: 0, y: 6 }, viewShadowRadius: 6, viewShadowColor: '#59000000' }
+'.shadow-2xl': { viewShadowOffset: { x: 0, y: 8 }, viewShadowRadius: 8, viewShadowColor: '#59000000' }
+'.text-gray-500': { color: '#6b7280' }
+'.w-24': { width: 96 }
+```
+
+<img src="../../assets/images/shadow.png" alt="Drop Shadow">
+
+```css
+// Property(ies): viewShadowOffset, viewShadowRadius, viewShadowColor - Box Shadow in Tailwind
+// Component(s): Ti.UI.View
+'.shadow-xs': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: 1, viewShadowColor: '#59000000' }
+'.shadow-sm': { viewShadowOffset: { x: 0, y: 1 }, viewShadowRadius: 1, viewShadowColor: '#59000000' }
+'.shadow': { viewShadowOffset: { x: 0, y: 2 }, viewShadowRadius: 2, viewShadowColor: '#59000000' }
+'.shadow-md': { viewShadowOffset: { x: 0, y: 3 }, viewShadowRadius: 3, viewShadowColor: '#59000000' }
+'.shadow-lg': { viewShadowOffset: { x: 0, y: 4 }, viewShadowRadius: 4, viewShadowColor: '#59000000' }
+'.shadow-xl': { viewShadowOffset: { x: 0, y: 6 }, viewShadowRadius: 6, viewShadowColor: '#59000000' }
+'.shadow-2xl': { viewShadowOffset: { x: 0, y: 8 }, viewShadowRadius: 8, viewShadowColor: '#59000000' }
+'.shadow-inner': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: null, viewShadowColor: null }
+'.shadow-outline': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: 2, viewShadowColor: '#59000000' }
+'.shadow-none': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: null, viewShadowColor: null }
+
+// Property(ies): shadowOffset, shadowRadius, shadowColor - Drop Shadow in Tailwind
+// Component(s): Ti.UI.Button, Ti.UI.Label
+'.drop-shadow-xs': { shadowOffset: { x: 0, y: 0 }, shadowRadius: 1, shadowColor: '#59000000' }
+'.drop-shadow-sm': { shadowOffset: { x: 0, y: 1 }, shadowRadius: 1, shadowColor: '#59000000' }
+'.drop-shadow': { shadowOffset: { x: 0, y: 2 }, shadowRadius: 2, shadowColor: '#59000000' }
+'.drop-shadow-md': { shadowOffset: { x: 0, y: 3 }, shadowRadius: 3, shadowColor: '#59000000' }
+'.drop-shadow-lg': { shadowOffset: { x: 0, y: 4 }, shadowRadius: 4, shadowColor: '#59000000' }
+'.drop-shadow-xl': { shadowOffset: { x: 0, y: 6 }, shadowRadius: 6, shadowColor: '#59000000' }
+'.drop-shadow-2xl': { shadowOffset: { x: 0, y: 8 }, shadowRadius: 8, shadowColor: '#59000000' }
+'.drop-shadow-none': { shadowOffset: { x: 0, y: 0 }, shadowRadius: null, shadowColor: null }
+```
+
+## Activity Indicator
+New classes for the `ActivityIndicator` View.
+
+```xml
+<ActivityIndicator class="indicator-blue-500 activity-indicator-style-big" message="Greetings..." id="activityIndicator" />
+```
+
+```css
+'.activity-indicator-style-big': { style: Ti.UI.ActivityIndicatorStyle.BIG }
+'.indicator-blue-500': { indicatorColor: '#3b82f6' }
+```
+
+### Indicator Colors Property (ActivityIndicator)
+New `indicatorColor` classes for the animated indicator.
+
+```css
+// Property(ies): indicatorColor
+// Component(s): Ti.UI.ActivityIndicator
+'.indicator-transparent': { indicatorColor: 'transparent' }
+'.indicator-black': { indicatorColor: '#000000' }
+'.indicator-white': { indicatorColor: '#ffffff' }
+'.indicator-slate-50': { indicatorColor: '#f8fafc' }
+'.indicator-slate-100': { indicatorColor: '#f1f5f9' }
+// ...
+```
+
+And just like any other color property:
+1. You can also set an arbitrary color value using `hex`, `rgb` or `rgba` color values.
+2. You can set them directly in your `xml` files or in your `config.js` file.
+3. You can add a **[color opacity modifier](https://github.com/macCesar/purgeTSS/blob/master/docs/whats-new/v3.0.4.md#color-opacity-modifiers)** to them.
+
+### Styling the activity indicator.
+
+```css
+// Property(ies): style
+// Component(s): Ti.UI.ActivityIndicator
+'.activity-indicator-style-big': { style: Ti.UI.ActivityIndicatorStyle.BIG }
+'.activity-indicator-style-dark': { style: Ti.UI.ActivityIndicatorStyle.DARK }
+'.activity-indicator-style-big-dark': { style: Ti.UI.ActivityIndicatorStyle.BIG_DARK }
+'.activity-indicator-style-plain': { style: Ti.UI.ActivityIndicatorStyle.PLAIN }
+```