Skip to content

Updated themes description as per the two swatches#749

Merged
Krinkle merged 1 commit into
jquery:mainfrom
VamsiSangam:edits
Mar 26, 2023
Merged

Updated themes description as per the two swatches#749
Krinkle merged 1 commit into
jquery:mainfrom
VamsiSangam:edits

Conversation

@VamsiSangam
Copy link
Copy Markdown
Contributor

Fix for #685 . Please review.

@jsf-clabot
Copy link
Copy Markdown

jsf-clabot commented Feb 6, 2017

CLA assistant check
Thank you for your submission, we really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

Comment thread page/jquery-mobile/theme-roller.md Outdated
If no theme swatch letter is set at all, the framework uses the "a" swatch (black in the default theme) for headers and footers.

All items in containers inherit the swatch from their parent. Exceptions to this rule are the listdivider in listviews, the header of nested list pages, and the button of split button lists, which all default to "b" (blue in the default theme). Count bubbles default to "c" (silver in the default theme).
All items in containers inherit the swatch from their parent. Exceptions to this rule are the listdivider in listviews, the header of nested list pages, and the button of split button lists, which all default to "b" (blue in the default theme).
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look correct. Listdividers are not blue in the default theme. Please check all these in detail (color as well as default swatch for component.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the mistakes, I am still learning about jQM. So, I have compared the demos of the newer version and the older version. As per the comparision, listdivider in listviews do inherit the the swatch from their parent, the default swatch being "a" where it is light gray. The same goes for buttons of split button list and nested list pages.

Is my inference appropriate?

Comment thread page/jquery-mobile/theme-roller.md Outdated
Each theme includes several global settings, including font family, drop shadows for overlays, and corner radius values for buttons and boxes. In addition, the theme can include multiple color swatches, each with color values for bars, content blocks, buttons and list items, and font text-shadow.

The default theme includes five swatches that are given letters (a, b, c, d, e) for quick reference. To make mapping of color swatches consistent across our widgets, we have followed the convention that swatch "a" is the highest level of visual priority (black in our default theme), "b" is secondary level (blue), "c" is the baseline level (gray) that we use by default in many situations, "d" for an alternate secondary level, and "e" as an accent swatch. Themes may have additional swatches for accent colors or specific situations. For example, you could add a new theme swatch "f" that has a red bar and button for use in error situations.
The default theme includes two swatches that are given letters (a, b) for quick reference. Themes may have additional swatches for accent colors or specific situations. For example, you could add a new theme swatch "f" that has a red bar and button for use in error situations.
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we only have a and b, you should use c for the new theme swatch for continuity.

Comment thread page/jquery-mobile/theme-roller.md Outdated
Note that there is also a swatch named "active" (bright blue in the default theme) which is used to indicate an active selected item. See the global "Active" state further down this page for more information on the active swatch.

The page loading dialog and error message don't inherit a swatch theme. The loading dialog defaults to swatch "a" (black in the default theme) and the error message to swatch "e" (yellow in the default theme). You can configure those defaults globally.
The page loading dialog and error message don't inherit a swatch theme. The loading dialog defaults to swatch "a" (black in the default theme). You can configure those defaults globally.
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please check colors and default swatch for component.

Comment thread page/jquery-mobile/theme-roller.md Outdated
### Default Theme Swatch Mapping for Components

If no theme swatch letter is set at all, the framework uses the "a" swatch (black in the default theme) for headers and footers and the "c" swatch (light gray in the default theme) for the page content to maximize contrast between the both.
If no theme swatch letter is set at all, the framework uses the "a" swatch (black in the default theme) for headers and footers.
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a isn't black in the default theme anymore

Corrected colors for components

Corrected dialog overlay details
@VamsiSangam
Copy link
Copy Markdown
Contributor Author

Corrected descriptions. Please review.

Base automatically changed from master to main March 8, 2021 17:15
@Krinkle Krinkle merged commit 3989e3a into jquery:main Mar 26, 2023
Krinkle pushed a commit that referenced this pull request Apr 9, 2024
As of jQuery Mobile 1.4, there are only two swatches (A and B, light and dark respectively).

Closes #749.
Fixes #685.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

4 participants