Since the UI team is in the process of re-writing the ThemeRoller application for performance and maintenance reasons, we should consider re-think the design of the TR tool and the themes themselves to bring them closer to the more modern system used for jQuery Mobile.
Theme changes:
- Incorporate box-shadow and text-shadow CSS3 properties to add visual depth to the themes
- Deprecate the image pattern-based background images in favor of CSS based gradients to reduce the number of images required for a theme
- Consider moving to the vector-based icons under development to gain scalable icons
- Harmonize the theme class naming conventions between UI and Mobile or just have TR write different classes for each?
ThemeRoller Tool changes:
- Architect the system so it can serve both the UI and Mobile projects with the same underlying "plumbing" and re-usable UI elements
- On the UI re-use side, the current UI themes only really have a single theme "swatch" each for bars, content areas and buttons along with a few extra levers like error and highlight. This could be mapped into the Mobile system of multiple "swatches" so there is the same mechanism for both systems or at the very least, re-use the same lever controls
- Each standard swatch lever for a bar, content clock or button state would have the following fields:
- Background: flat color or CSS gradient (support multi-stop gradients for glassy effects in addition to simple two stop gradients)
- Stroke: hex color
- Text: hex color
- Text shadow: hex color + x/y offsets, consider ways to auto-calculate this so there may be an inset/outset toggle + intensity slider instead
- Global levers, like current TR has
- Font
- Corner radius: two settings for button vs. boxes/headers
- Box-shadow: settings for shadow color and amount for dialogs/tooltips, buttons, bars, content blocks
- Modal screen: css-gradient based, like all backgrounds
- Current TR setting to deprecate
- Shadow: to be replaced with box shadow settings
- Error: move into a new content swatch ("b")
- Highlight: move into a new content swatch ("c")