Closed
Bug 1019075
Opened 11 years ago
Closed 10 years ago
Make Building Blocks themeable
Categories
(Firefox OS Graveyard :: Gaia, defect)
Tracking
(Not tracked)
RESOLVED
INVALID
People
(Reporter: wilsonpage, Assigned: wilsonpage)
Details
Attachments
(1 file, 1 obsolete file)
The current `skin="foo"` style theming solution doesn't scale. In the future we want anyone to be able to create a theme.css file and for that theme to style any components within the app.
This is exciting because users with even very basic CSS knowledge will be able to customise the entire OS by creating their own theme file. This is something not currently possible with iOS or Android.
Themes will be driven primarily from CSS 'Custom Properties' (or variables). A theme file will simply be a list of variables. Components wishing to be theme-able will use these dynamic variables to style parts of their components instead of hard coding colors, fonts, box-shadows etc. The less hard coded properties, the more theme-able and extensible a component is.
A theme file might look something like:
[theme="comms"] {
--main-color: #00adad;
--color-2: #00adad;
--text-color: #fff;
--text-color-hard: ...;
--text-color-soft: ...;
--background-texture: ...;
--border: ...;
--box-shadow: ...;
--font: ...;
}
I'll need help from others to make sure we get this variable list right, as this is our theme's standard that must be conformed to by theme and component authors.
Most of our existing building-blocks use PNGs for icons and backgrounds, we'll need to migrate these components to pure CSS and icon-fonts to make them dynamic and theme-able.
Let's get more discussion around this :)
Assignee | ||
Comment 1•11 years ago
|
||
By using attributes to define the 'theme-root' users can have multiple themes active on the same page by defining themes at different scopes/depths of the DOM tree.
This is an important requirement. As a user I may wish to see <gaia-header> in the 'organic' theme, but <gaia-subheader> in the 'dark' theme.
Assignee | ||
Comment 2•11 years ago
|
||
Attached WIP to share where I've got with this so far.
Assignee | ||
Updated•11 years ago
|
Attachment #8432631 -
Flags: feedback?(kyee)
Comment 3•11 years ago
|
||
Accessibility must be taken into account as well here. For a general overview and some common solution patterns to icon font accessibility, read here[1].
Since we'll be dealing with the possibility to invert colors (bug 1016539) and potentially two speech synthesizers for the screen reader, boht missing speech as well as overspeaking must be tested and dealt with.
And yes, this is as much a note to myself as it is to anyone involved. Also CC'ing Eitan.
[1] http://filamentgroup.com/lab/bulletproof_icon_fonts.html
Assignee | ||
Comment 4•11 years ago
|
||
I've run some promising tests with grunt-webfont [1]. It basically takes a directory of SVGs and spits out all the relevant font files and CSS we need. I'm pretty hopeful this will give us a sane workflow.
We probably shouldn't run this step on every build, but instead whenever a designer/dev makes a change to and SVG, they will have to run the Grunt task locally before committing.
The grunt task requires that font-forge is installed locally, which is easily done with Homebrew.
[1] https://github.com/sapegin/grunt-webfont
Assignee | ||
Updated•11 years ago
|
Assignee: nobody → wilsonpage
Assignee | ||
Comment 5•11 years ago
|
||
Attachment #8432631 -
Attachment is obsolete: true
Attachment #8432631 -
Flags: feedback?(kyee)
Attachment #8434299 -
Flags: feedback?(kyee)
Assignee | ||
Comment 6•11 years ago
|
||
Created gaia-theme repo https://github.com/gaia-components/gaia-theme
Assignee | ||
Comment 7•10 years ago
|
||
Closing this as all newly created components for 2.2 will be themeable.
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → INVALID
Attachment #8434299 -
Flags: feedback?(caseyyee.ca) → feedback?
You need to log in
before you can comment on or make changes to this bug.
Description
•