# What's new in v4.1.2 - [What's new in v4.1.2](#whats-new-in-v412) - [Major Version (v4.x.x) - Breaking changes](#major-version-v4xx---breaking-changes) - [`bar-title-{color}` now becomes `title-attributes-{color}`](#bar-title-color-now-becomes-title-attributes-color) - [`bar-shadow-{size}` now becomes `title-attributes-shadow-{size}`](#bar-shadow-size-now-becomes-title-attributes-shadow-size) - [`bar-shadow-{color}` now becomes `title-attributes-shadow-{color}`](#bar-shadow-color-now-becomes-title-attributes-shadow-color) - [`feedback-{color}` now becomes `touch-feedback-{color}`](#feedback-color-now-becomes-touch-feedback-color) - [Same name classes with platform specific styles](#same-name-classes-with-platform-specific-styles) - [Minor Version (v4.1.x) - New functionalities](#minor-version-v41x---new-functionalities) - [New `theme` classes for Android](#new-theme-classes-for-android) - [Patch Version - (v.4.1.2) - Bug fixes](#patch-version---v412---bug-fixes) - [The `apply` directive](#the-apply-directive) Now that we adopted [Semantic Versioning](https://semver.org), here are the changes made in this release: ## Major Version (v4.x.x) - Breaking changes With this release we are introducing a few **breaking changes**. Mainly we change some class names to be more specific about what properties are set. ### `bar-title-{color}` now becomes `title-attributes-{color}` ```css // Component(s): Ti.UI.TabGroup, Ti.UI.Window // Property(ies): titleAttributes: color - iOS Only '.title-attributes-transparent[platform=ios]': { titleAttributes: { color: 'transparent' } } '.title-attributes-black[platform=ios]': { titleAttributes: { color: '#000000' } } '.title-attributes-white[platform=ios]': { titleAttributes: { color: '#ffffff' } } '.title-attributes-slate-50[platform=ios]': { titleAttributes: { color: '#f8fafc' } } '.title-attributes-slate-100[platform=ios]': { titleAttributes: { color: '#f1f5f9' } } '.title-attributes-slate-200[platform=ios]': { titleAttributes: { color: '#e2e8f0' } } '.title-attributes-slate-300[platform=ios]': { titleAttributes: { color: '#cbd5e1' } } '.title-attributes-slate-400[platform=ios]': { titleAttributes: { color: '#94a3b8' } } '.title-attributes-slate-500[platform=ios]': { titleAttributes: { color: '#64748b' } } // ... ``` ### `bar-shadow-{size}` now becomes `title-attributes-shadow-{size}` ```css // Component(s): Ti.UI.TabGroup, Ti.UI.Window // Property(ies): titleAttributes: shadow, color, blurRadius, offset - iOS Only '.title-attributes-shadow-xs[platform=ios]': { titleAttributes: { shadow: { color: '#80000000', blurRadius: 1, offset: { width: 0, height: 0 } } } } '.title-attributes-shadow-sm[platform=ios]': { titleAttributes: { shadow: { color: '#80000000', blurRadius: 2, offset: { width: 0, height: 1 } } } } '.title-attributes-shadow[platform=ios]': { titleAttributes: { shadow: { color: '#80000000', blurRadius: 4, offset: { width: 0, height: 2 } } } } '.title-attributes-shadow-md[platform=ios]': { titleAttributes: { shadow: { color: '#80000000', blurRadius: 6, offset: { width: 0, height: 3 } } } } '.title-attributes-shadow-lg[platform=ios]': { titleAttributes: { shadow: { color: '#80000000', blurRadius: 8, offset: { width: 0, height: 4 } } } } '.title-attributes-shadow-xl[platform=ios]': { titleAttributes: { shadow: { color: '#80000000', blurRadius: 12, offset: { width: 0, height: 6 } } } } '.title-attributes-shadow-2xl[platform=ios]': { titleAttributes: { shadow: { color: '#80000000', blurRadius: 14, offset: { width: 0, height: 8 } } } } '.title-attributes-shadow-none[platform=ios]': { titleAttributes: { shadow: { color: null, blurRadius: null, offset: { width: 0, height: 0 } } } } ``` ### `bar-shadow-{color}` now becomes `title-attributes-shadow-{color}` ```css // Component(s): Ti.UI.TabGroup, Ti.UI.Window // Property(ies): titleAttributes: shadow - iOS Only '.title-attributes-shadow-transparent[platform=ios]': { titleAttributes: { shadow: { color: 'transparent' } } } '.title-attributes-shadow-black[platform=ios]': { titleAttributes: { shadow: { color: '#000000' } } } '.title-attributes-shadow-white[platform=ios]': { titleAttributes: { shadow: { color: '#ffffff' } } } '.title-attributes-shadow-slate-50[platform=ios]': { titleAttributes: { shadow: { color: '#f8fafc' } } } '.title-attributes-shadow-slate-100[platform=ios]': { titleAttributes: { shadow: { color: '#f1f5f9' } } } '.title-attributes-shadow-slate-200[platform=ios]': { titleAttributes: { shadow: { color: '#e2e8f0' } } } '.title-attributes-shadow-slate-300[platform=ios]': { titleAttributes: { shadow: { color: '#cbd5e1' } } } '.title-attributes-shadow-slate-400[platform=ios]': { titleAttributes: { shadow: { color: '#94a3b8' } } } '.title-attributes-shadow-slate-500[platform=ios]': { titleAttributes: { shadow: { color: '#64748b' } } } // ... ``` ### `feedback-{color}` now becomes `touch-feedback-{color}` ```css // Component(s): Ti.UI.View // Property(ies): touchFeedbackColor - Android Only '.touch-feedback-transparent[platform=android]': { touchFeedback: true, touchFeedbackColor: 'transparent' } '.touch-feedback-black[platform=android]': { touchFeedback: true, touchFeedbackColor: '#000000' } '.touch-feedback-white[platform=android]': { touchFeedback: true, touchFeedbackColor: '#ffffff' } '.touch-feedback-slate-50[platform=android]': { touchFeedback: true, touchFeedbackColor: '#f8fafc' } '.touch-feedback-slate-100[platform=android]': { touchFeedback: true, touchFeedbackColor: '#f1f5f9' } '.touch-feedback-slate-200[platform=android]': { touchFeedback: true, touchFeedbackColor: '#e2e8f0' } '.touch-feedback-slate-300[platform=android]': { touchFeedback: true, touchFeedbackColor: '#cbd5e1' } '.touch-feedback-slate-400[platform=android]': { touchFeedback: true, touchFeedbackColor: '#94a3b8' } '.touch-feedback-slate-500[platform=android]': { touchFeedback: true, touchFeedbackColor: '#64748b' } // ... ``` ### Same name classes with platform specific styles **The following classes have the same name but with different properties for each platform**, so in order to differentiate them, we've added the platform specific styles. ```css // Component(s): Ti.UI.View // Property(ies): viewShadowOffset, viewShadowRadius, viewShadowColor - Box Shadow Effect in Tailwind - iOS Only '.shadow-xs[platform=ios]': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: 1, viewShadowColor: '#80000000' } '.shadow-sm[platform=ios]': { viewShadowOffset: { x: 0, y: 1 }, viewShadowRadius: 2, viewShadowColor: '#80000000' } '.shadow[platform=ios]': { viewShadowOffset: { x: 0, y: 2 }, viewShadowRadius: 4, viewShadowColor: '#80000000' } '.shadow-md[platform=ios]': { viewShadowOffset: { x: 0, y: 3 }, viewShadowRadius: 6, viewShadowColor: '#80000000' } '.shadow-lg[platform=ios]': { viewShadowOffset: { x: 0, y: 4 }, viewShadowRadius: 8, viewShadowColor: '#80000000' } '.shadow-xl[platform=ios]': { viewShadowOffset: { x: 0, y: 6 }, viewShadowRadius: 12, viewShadowColor: '#80000000' } '.shadow-2xl[platform=ios]': { viewShadowOffset: { x: 0, y: 8 }, viewShadowRadius: 14, viewShadowColor: '#80000000' } '.shadow-inner[platform=ios]': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: null, viewShadowColor: null } '.shadow-outline[platform=ios]': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: 4, viewShadowColor: '#80000000' } '.shadow-none[platform=ios]': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: null, viewShadowColor: null } // Component(s): Ti.UI.Android.CardView, Ti.UI.Animation, Ti.UI.View // Property(ies): elevation - Box Shadow Effect in Tailwind - Android Only '.shadow-xs[platform=android]': { elevation: 4 } '.shadow-sm[platform=android]': { elevation: 8 } '.shadow[platform=android]': { elevation: 16 } '.shadow-md[platform=android]': { elevation: 24 } '.shadow-lg[platform=android]': { elevation: 26 } '.shadow-xl[platform=android]': { elevation: 34 } '.shadow-2xl[platform=android]': { elevation: 38 } '.shadow-inner[platform=android]': { elevation: 0 } '.shadow-outline[platform=android]': { elevation: 16 } '.shadow-none[platform=android]': { elevation: 0 } ``` ```css '.inverted-platform-w[platform=ios]': { width: Ti.Platform.displayCaps.platformHeight } '.inverted-platform-h[platform=ios]': { height: Ti.Platform.displayCaps.platformWidth } '.inverted-platform-w[platform=android]': { width: Ti.Platform.displayCaps.platformWidth } '.inverted-platform-h[platform=android]': { height: Ti.Platform.displayCaps.platformHeight } ``` **You don't need to target a specific platform in your `.xml` files.** ```xml ``` The resulting `.tss` file will contain both classes. ```css '.h-32': { height: 128 } '.shadow-lg[platform=ios]': { viewShadowOffset: { x: 0, y: 4 }, viewShadowRadius: 8, viewShadowColor: '#80000000' } '.shadow-lg[platform=android]': { elevation: 26 } '.w-32': { width: 128 } ``` ## Minor Version (v4.1.x) - New functionalities ### New `theme` classes for Android From the docs: > Android allows you to set the appearance of your application using themes. A theme specifies default colors, fonts, and images, for an Android activity or an entire application. > > As of Titanium 10.0.0, all of the below are material based themes which support displaying Google's native material widgets/views. You can apply these themes to your application or individual activities instead of creating your own custom theme. ```css // Component(s): Ti.UI.Window // Property(ies): theme - Android Only '.theme-titanium[platform=android]': { theme: "Theme.Titanium" } '.theme-titanium-day-night[platform=android]': { theme: "Theme.Titanium.DayNight" } '.theme-titanium-day-night-no-title-bar[platform=android]': { theme: "Theme.Titanium.DayNight.NoTitleBar" } '.theme-titanium-day-night-fullscreen[platform=android]': { theme: "Theme.Titanium.DayNight.Fullscreen" } '.theme-titanium-day-night-solid[platform=android]': { theme: "Theme.Titanium.DayNight.Solid" } '.theme-titanium-day-night-solid-no-title-bar[platform=android]': { theme: "Theme.Titanium.DayNight.Solid.NoTitleBar" } '.theme-titanium-day-night-solid-fullscreen[platform=android]': { theme: "Theme.Titanium.DayNight.Solid.Fullscreen" } '.theme-titanium-dark[platform=android]': { theme: "Theme.Titanium.Dark" } '.theme-titanium-dark-no-title-bar[platform=android]': { theme: "Theme.Titanium.Dark.NoTitleBar" } '.theme-titanium-dark-fullscreen[platform=android]': { theme: "Theme.Titanium.Dark.Fullscreen" } '.theme-titanium-dark-solid[platform=android]': { theme: "Theme.Titanium.Dark.Solid" } '.theme-titanium-dark-solid-no-title-bar[platform=android]': { theme: "Theme.Titanium.Dark.Solid.NoTitleBar" } '.theme-titanium-dark-solid-fullscreen[platform=android]': { theme: "Theme.Titanium.Dark.Solid.Fullscreen" } '.theme-titanium-light[platform=android]': { theme: "Theme.Titanium.Light" } '.theme-titanium-light-no-title-bar[platform=android]': { theme: "Theme.Titanium.Light.NoTitleBar" } '.theme-titanium-light-fullscreen[platform=android]': { theme: "Theme.Titanium.Light.Fullscreen" } '.theme-titanium-light-solid[platform=android]': { theme: "Theme.Titanium.Light.Solid" } '.theme-titanium-light-solid-no-title-bar[platform=android]': { theme: "Theme.Titanium.Light.Solid.NoTitleBar" } '.theme-titanium-light-solid-fullscreen[platform=android]': { theme: "Theme.Titanium.Light.Solid.Fullscreen" } '.theme-app-derived-no-title-bar[platform=android]': { theme: "'Theme.AppDerived.NoTitleBar'" } '.theme-app-derived-fullscreen[platform=android]': { theme: "'Theme.AppDerived.Fullscreen'" } '.theme-app-derived-translucent[platform=android]': { theme: "'Theme.AppDerived.Translucent'" } '.theme-app-derived-translucent-no-title-bar[platform=android]': { theme: "'Theme.AppDerived.Translucent.NoTitleBar'" } '.theme-app-derived-translucent-fullscreen[platform=android]': { theme: "'Theme.AppDerived.Translucent.Fullscreen'" } ``` ## Patch Version - (v.4.1.2) - Bug fixes Several classes are platform specific to prevent polluting objects with properties that are not specific to a particular platform. So we've fixed a bug when generating custom styles using the `apply` directive in `config.js`. ### The `apply` directive To properly apply these platform styles when creating custom classes, you must specify the platform variant in the `apply` directive. **Even if you are not targeting a specific platform, you must specify the platform variant.** ```javascript // ./purgetss/config.js module.exports = { theme: { '.my-button': { // Targeting Android and iOS 'android': { 'apply': 'w-32 h-32 android:shadow-lg bg-green-500' }, 'ios': { 'apply': 'w-32 h-32 ios:shadow-lg bg-green-500' } }, '.my-view': { // Even if you are not targeting a specific platform, you must specify the platform variant. 'apply': 'w-32 h-32 android:shadow-lg bg-green-500' } }, }; ``` ```css '.my-button[platform=android]': { backgroundColor: '#22c55e', elevation: 26, height: 128, width: 128 } '.my-button[platform=ios]': { backgroundColor: '#22c55e', height: 128, viewShadowOffset: { x: 0, y: 4 }, viewShadowRadius: 8, viewShadowColor: '#80000000', width: 128 } '.my-view': { backgroundColor: '#22c55e', elevation: 26, height: 128, width: 128 } ``` If you omit the platform variant, **Purge TSS** won't be able to determine which platform you are targeting, and the custom class will not have the corresponding property. ```javascript // ./purgetss/config.js module.exports = { theme: { '.my-view': { // Missing platform variant in shadow-lg 'apply': 'w-32 h-32 shadow-lg bg-green-500' } }, }; ``` ```css // Ommiting the platform variant in `config.js` will not generate the corresponding property. // Missing any property related to `shadow-lg`. '.my-view': { backgroundColor: '#22c55e', height: 128, width: 128 } ```