Theme: Improve default theme styling

Changes tooltip to use the ui-widget-shadow class, which now applies the
box-shadow style. .ui-widget-shadow was created when box-shadow wasn't
available. By now, there's no point in faking a custom shadow anymore.
This removes the only non-structural CSS from a widget-specific file.

Updates demos to use the same font-family, removes unused images.

Will be available as the new default theme on ThemeRoller called "Base",
while "UI Smoothness" and "UI Lightness" will still be available in the
gallery.

Fixes #10617
Fixes #10880
Closes gh-1436
Ref jquery/download.jqueryui.com#248

diff --git a/demos/demos.css b/demos/demos.css
index 555352e358307fbd415739482e927389d525c9dc..40542532877e0924a83060a6ee80178589b879b8 100644 (file)
--- a/demos/demos.css
+++ b/demos/demos.css
@@ -1,5 +1,5 @@
 body {
-       font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
+       font-family: Arial, Helvetica, sans-serif;
 }
 
 table {

diff --git a/themes/base/images/ui-bg_flat_75_ffffff_40x100.png b/themes/base/images/ui-bg_flat_75_ffffff_40x100.png
deleted file mode 100644 (file)
index ac8b229..0000000
Binary files a/themes/base/images/ui-bg_flat_75_ffffff_40x100.png and /dev/null differ

diff --git a/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png b/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png
deleted file mode 100644 (file)
index ad3d634..0000000
Binary files a/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png and /dev/null differ

diff --git a/themes/base/images/ui-bg_glass_65_ffffff_1x400.png b/themes/base/images/ui-bg_glass_65_ffffff_1x400.png
deleted file mode 100644 (file)
index 42ccba2..0000000
Binary files a/themes/base/images/ui-bg_glass_65_ffffff_1x400.png and /dev/null differ

diff --git a/themes/base/images/ui-bg_glass_75_dadada_1x400.png b/themes/base/images/ui-bg_glass_75_dadada_1x400.png
deleted file mode 100644 (file)
index 5a46b47..0000000
Binary files a/themes/base/images/ui-bg_glass_75_dadada_1x400.png and /dev/null differ

diff --git a/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png b/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png
deleted file mode 100644 (file)
index 86c2baa..0000000
Binary files a/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png and /dev/null differ

diff --git a/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png b/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png
deleted file mode 100644 (file)
index 4443fdc..0000000
Binary files a/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png and /dev/null differ

diff --git a/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png b/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png
deleted file mode 100644 (file)
index 7c9fa6c..0000000
Binary files a/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png and /dev/null differ

diff --git a/themes/base/images/ui-icons_222222_256x240.png b/themes/base/images/ui-icons_222222_256x240.png
deleted file mode 100644 (file)
index ee039dc..0000000
Binary files a/themes/base/images/ui-icons_222222_256x240.png and /dev/null differ

diff --git a/themes/base/images/ui-icons_2e83ff_256x240.png b/themes/base/images/ui-icons_2e83ff_256x240.png
deleted file mode 100644 (file)
index 45e8928..0000000
Binary files a/themes/base/images/ui-icons_2e83ff_256x240.png and /dev/null differ

diff --git a/themes/base/images/ui-icons_444444_256x240.png b/themes/base/images/ui-icons_444444_256x240.png
new file mode 100755 (executable)
index 0000000..a957b5e
Binary files /dev/null and b/themes/base/images/ui-icons_444444_256x240.png differ

diff --git a/themes/base/images/ui-icons_454545_256x240.png b/themes/base/images/ui-icons_454545_256x240.png
deleted file mode 100644 (file)
index 7ec70d1..0000000
Binary files a/themes/base/images/ui-icons_454545_256x240.png and /dev/null differ

diff --git a/themes/base/images/ui-icons_555555_256x240.png b/themes/base/images/ui-icons_555555_256x240.png
new file mode 100755 (executable)
index 0000000..5dcdcb4
Binary files /dev/null and b/themes/base/images/ui-icons_555555_256x240.png differ

diff --git a/themes/base/images/ui-icons_777620_256x240.png b/themes/base/images/ui-icons_777620_256x240.png
new file mode 100755 (executable)
index 0000000..41f75dd
Binary files /dev/null and b/themes/base/images/ui-icons_777620_256x240.png differ

diff --git a/themes/base/images/ui-icons_777777_256x240.png b/themes/base/images/ui-icons_777777_256x240.png
new file mode 100755 (executable)
index 0000000..067a992
Binary files /dev/null and b/themes/base/images/ui-icons_777777_256x240.png differ

diff --git a/themes/base/images/ui-icons_888888_256x240.png b/themes/base/images/ui-icons_888888_256x240.png
deleted file mode 100644 (file)
index 5ba708c..0000000
Binary files a/themes/base/images/ui-icons_888888_256x240.png and /dev/null differ

diff --git a/themes/base/images/ui-icons_cc0000_256x240.png b/themes/base/images/ui-icons_cc0000_256x240.png
new file mode 100755 (executable)
index 0000000..1e18edb
Binary files /dev/null and b/themes/base/images/ui-icons_cc0000_256x240.png differ

diff --git a/themes/base/images/ui-icons_cd0a0a_256x240.png b/themes/base/images/ui-icons_cd0a0a_256x240.png
deleted file mode 100644 (file)
index 7930a55..0000000
Binary files a/themes/base/images/ui-icons_cd0a0a_256x240.png and /dev/null differ

diff --git a/themes/base/images/ui-icons_ffffff_256x240.png b/themes/base/images/ui-icons_ffffff_256x240.png
new file mode 100755 (executable)
index 0000000..4f624bb
Binary files /dev/null and b/themes/base/images/ui-icons_ffffff_256x240.png differ

diff --git a/themes/base/theme.css b/themes/base/theme.css
index c7ad4847a67de761706f213e13c98e765f233525..1b7a7bf1b08e21c69d3f94262a2afb15eb37999b 100644 (file)
--- a/themes/base/theme.css
+++ b/themes/base/theme.css
@@ -15,7 +15,7 @@
 /* Component containers
 ----------------------------------*/
 .ui-widget {
-       font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
+       font-family: Arial,Helvetica,sans-serif/*{ffDefault}*/;
        font-size: 1em/*{fsDefault}*/;
 }
 .ui-widget .ui-widget {
@@ -25,25 +25,25 @@
 .ui-widget select,
 .ui-widget textarea,
 .ui-widget button {
-       font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
+       font-family: Arial,Helvetica,sans-serif/*{ffDefault}*/;
        font-size: 1em;
 }
 .ui-widget-content {
-       border: 1px solid #aaaaaa/*{borderColorContent}*/;
-       background: #ffffff/*{bgColorContent}*/ url("images/ui-bg_flat_75_ffffff_40x100.png")/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
-       color: #222222/*{fcContent}*/;
+       border: 1px solid #dddddd/*{borderColorContent}*/;
+       background: #ffffff/*{bgColorContent}*/ /*{bgImgUrlContent}*/ /*{bgContentXPos}*/ /*{bgContentYPos}*/ /*{bgContentRepeat}*/;
+       color: #333333/*{fcContent}*/;
 }
 .ui-widget-content a {
-       color: #222222/*{fcContent}*/;
+       color: #333333/*{fcContent}*/;
 }
 .ui-widget-header {
-       border: 1px solid #aaaaaa/*{borderColorHeader}*/;
-       background: #cccccc/*{bgColorHeader}*/ url("images/ui-bg_highlight-soft_75_cccccc_1x100.png")/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/;
-       color: #222222/*{fcHeader}*/;
+       border: 1px solid #dddddd/*{borderColorHeader}*/;
+       background: #e9e9e9/*{bgColorHeader}*/ /*{bgImgUrlHeader}*/ /*{bgHeaderXPos}*/ /*{bgHeaderYPos}*/ /*{bgHeaderRepeat}*/;
+       color: #333333/*{fcHeader}*/;
        font-weight: bold;
 }
 .ui-widget-header a {
-       color: #222222/*{fcHeader}*/;
+       color: #333333/*{fcHeader}*/;
 }
 
 /* Interaction states
@@ -51,15 +51,15 @@
 .ui-state-default,
 .ui-widget-content .ui-state-default,
 .ui-widget-header .ui-state-default {
-       border: 1px solid #d3d3d3/*{borderColorDefault}*/;
-       background: #e6e6e6/*{bgColorDefault}*/ url("images/ui-bg_glass_75_e6e6e6_1x400.png")/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/;
+       border: 1px solid #c5c5c5/*{borderColorDefault}*/;
+       background: #f6f6f6/*{bgColorDefault}*/ /*{bgImgUrlDefault}*/ /*{bgDefaultXPos}*/ /*{bgDefaultYPos}*/ /*{bgDefaultRepeat}*/;
        font-weight: normal/*{fwDefault}*/;
-       color: #555555/*{fcDefault}*/;
+       color: #454545/*{fcDefault}*/;
 }
 .ui-state-default a,
 .ui-state-default a:link,
 .ui-state-default a:visited {
-       color: #555555/*{fcDefault}*/;
+       color: #454545/*{fcDefault}*/;
        text-decoration: none;
 }
 .ui-state-hover,
@@ -68,10 +68,10 @@
 .ui-state-focus,
 .ui-widget-content .ui-state-focus,
 .ui-widget-header .ui-state-focus {
-       border: 1px solid #999999/*{borderColorHover}*/;
-       background: #dadada/*{bgColorHover}*/ url("images/ui-bg_glass_75_dadada_1x400.png")/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/;
+       border: 1px solid #cccccc/*{borderColorHover}*/;
+       background: #ededed/*{bgColorHover}*/ /*{bgImgUrlHover}*/ /*{bgHoverXPos}*/ /*{bgHoverYPos}*/ /*{bgHoverRepeat}*/;
        font-weight: normal/*{fwDefault}*/;
-       color: #212121/*{fcHover}*/;
+       color: #2b2b2b/*{fcHover}*/;
 }
 .ui-state-hover a,
 .ui-state-hover a:hover,
@@ -81,21 +81,21 @@
 .ui-state-focus a:hover,
 .ui-state-focus a:link,
 .ui-state-focus a:visited {
-       color: #212121/*{fcHover}*/;
+       color: #2b2b2b/*{fcHover}*/;
        text-decoration: none;
 }
 .ui-state-active,
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active {
-       border: 1px solid #aaaaaa/*{borderColorActive}*/;
-       background: #ffffff/*{bgColorActive}*/ url("images/ui-bg_glass_65_ffffff_1x400.png")/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/;
+       border: 1px solid #003eff/*{borderColorActive}*/;
+       background: #007fff/*{bgColorActive}*/ /*{bgImgUrlActive}*/ /*{bgActiveXPos}*/ /*{bgActiveYPos}*/ /*{bgActiveRepeat}*/;
        font-weight: normal/*{fwDefault}*/;
-       color: #212121/*{fcActive}*/;
+       color: #ffffff/*{fcActive}*/;
 }
 .ui-state-active a,
 .ui-state-active a:link,
 .ui-state-active a:visited {
-       color: #212121/*{fcActive}*/;
+       color: #ffffff/*{fcActive}*/;
        text-decoration: none;
 }
 
@@ -104,31 +104,31 @@
 .ui-state-highlight,
 .ui-widget-content .ui-state-highlight,
 .ui-widget-header .ui-state-highlight {
-       border: 1px solid #fcefa1/*{borderColorHighlight}*/;
-       background: #fbf9ee/*{bgColorHighlight}*/ url("images/ui-bg_glass_55_fbf9ee_1x400.png")/*{bgImgUrlHighlight}*/ 50%/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/;
-       color: #363636/*{fcHighlight}*/;
+       border: 1px solid #dad55e/*{borderColorHighlight}*/;
+       background: #fffa90/*{bgColorHighlight}*/ /*{bgImgUrlHighlight}*/ /*{bgHighlightXPos}*/ /*{bgHighlightYPos}*/ /*{bgHighlightRepeat}*/;
+       color: #777620/*{fcHighlight}*/;
 }
 .ui-state-highlight a,
 .ui-widget-content .ui-state-highlight a,
 .ui-widget-header .ui-state-highlight a {
-       color: #363636/*{fcHighlight}*/;
+       color: #777620/*{fcHighlight}*/;
 }
 .ui-state-error,
 .ui-widget-content .ui-state-error,
 .ui-widget-header .ui-state-error {
-       border: 1px solid #cd0a0a/*{borderColorError}*/;
-       background: #fef1ec/*{bgColorError}*/ url("images/ui-bg_glass_95_fef1ec_1x400.png")/*{bgImgUrlError}*/ 50%/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/;
-       color: #cd0a0a/*{fcError}*/;
+       border: 1px solid #f1a899/*{borderColorError}*/;
+       background: #fddfdf/*{bgColorError}*/ /*{bgImgUrlError}*/ /*{bgErrorXPos}*/ /*{bgErrorYPos}*/ /*{bgErrorRepeat}*/;
+       color: #5f3f3f/*{fcError}*/;
 }
 .ui-state-error a,
 .ui-widget-content .ui-state-error a,
 .ui-widget-header .ui-state-error a {
-       color: #cd0a0a/*{fcError}*/;
+       color: #5f3f3f/*{fcError}*/;
 }
 .ui-state-error-text,
 .ui-widget-content .ui-state-error-text,
 .ui-widget-header .ui-state-error-text {
-       color: #cd0a0a/*{fcError}*/;
+       color: #5f3f3f/*{fcError}*/;
 }
 .ui-priority-primary,
 .ui-widget-content .ui-priority-primary,
@@ -163,27 +163,27 @@
 }
 .ui-icon,
 .ui-widget-content .ui-icon {
-       background-image: url("images/ui-icons_222222_256x240.png")/*{iconsContent}*/;
+       background-image: url("images/ui-icons_444444_256x240.png")/*{iconsContent}*/;
 }
 .ui-widget-header .ui-icon {
-       background-image: url("images/ui-icons_222222_256x240.png")/*{iconsHeader}*/;
+       background-image: url("images/ui-icons_444444_256x240.png")/*{iconsHeader}*/;
 }
 .ui-state-default .ui-icon {
-       background-image: url("images/ui-icons_888888_256x240.png")/*{iconsDefault}*/;
+       background-image: url("images/ui-icons_777777_256x240.png")/*{iconsDefault}*/;
 }
 .ui-state-hover .ui-icon,
 .ui-state-focus .ui-icon {
-       background-image: url("images/ui-icons_454545_256x240.png")/*{iconsHover}*/;
+       background-image: url("images/ui-icons_555555_256x240.png")/*{iconsHover}*/;
 }
 .ui-state-active .ui-icon {
-       background-image: url("images/ui-icons_454545_256x240.png")/*{iconsActive}*/;
+       background-image: url("images/ui-icons_ffffff_256x240.png")/*{iconsActive}*/;
 }
 .ui-state-highlight .ui-icon {
-       background-image: url("images/ui-icons_2e83ff_256x240.png")/*{iconsHighlight}*/;
+       background-image: url("images/ui-icons_777620_256x240.png")/*{iconsHighlight}*/;
 }
 .ui-state-error .ui-icon,
 .ui-state-error-text .ui-icon {
-       background-image: url("images/ui-icons_cd0a0a_256x240.png")/*{iconsError}*/;
+       background-image: url("images/ui-icons_cc0000_256x240.png")/*{iconsError}*/;
 }
 
 /* positioning */
@@ -373,38 +373,34 @@
 .ui-corner-top,
 .ui-corner-left,
 .ui-corner-tl {
-       border-top-left-radius: 4px/*{cornerRadius}*/;
+       border-top-left-radius: 3px/*{cornerRadius}*/;
 }
 .ui-corner-all,
 .ui-corner-top,
 .ui-corner-right,
 .ui-corner-tr {
-       border-top-right-radius: 4px/*{cornerRadius}*/;
+       border-top-right-radius: 3px/*{cornerRadius}*/;
 }
 .ui-corner-all,
 .ui-corner-bottom,
 .ui-corner-left,
 .ui-corner-bl {
-       border-bottom-left-radius: 4px/*{cornerRadius}*/;
+       border-bottom-left-radius: 3px/*{cornerRadius}*/;
 }
 .ui-corner-all,
 .ui-corner-bottom,
 .ui-corner-right,
 .ui-corner-br {
-       border-bottom-right-radius: 4px/*{cornerRadius}*/;
+       border-bottom-right-radius: 3px/*{cornerRadius}*/;
 }
 
 /* Overlays */
 .ui-widget-overlay {
-       background: #aaaaaa/*{bgColorOverlay}*/ url("images/ui-bg_flat_0_aaaaaa_40x100.png")/*{bgImgUrlOverlay}*/ 50%/*{bgOverlayXPos}*/ 50%/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/;
+       background: #aaaaaa/*{bgColorOverlay}*/;
        opacity: .3/*{opacityOverlay}*/;
        filter: Alpha(Opacity=30)/*{opacityFilterOverlay}*/; /* support: IE8 */
 }
 .ui-widget-shadow {
-       margin: -8px/*{offsetTopShadow}*/ 0 0 -8px/*{offsetLeftShadow}*/;
-       padding: 8px/*{thicknessShadow}*/;
-       background: #aaaaaa/*{bgColorShadow}*/ url("images/ui-bg_flat_0_aaaaaa_40x100.png")/*{bgImgUrlShadow}*/ 50%/*{bgShadowXPos}*/ 50%/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/;
-       opacity: .3/*{opacityShadow}*/;
-       filter: Alpha(Opacity=30)/*{opacityFilterShadow}*/; /* support: IE8 */
-       border-radius: 8px/*{cornerRadiusShadow}*/;
+       -webkit-box-shadow: 0/*{offsetLeftShadow}*/ 0/*{offsetTopShadow}*/ 5px/*{thicknessShadow}*/ #666666/*{bgColorShadow}*/;
+       box-shadow: 0/*{offsetLeftShadow}*/ 0/*{offsetTopShadow}*/ 5px/*{thicknessShadow}*/ #666666/*{bgColorShadow}*/;
 }

diff --git a/themes/base/tooltip.css b/themes/base/tooltip.css
index f8f7bc8411829a0b7636dd23dc64e1c30099e7a6..809b148a29ed04ba946c474833dc9c0feb373a0d 100644 (file)
--- a/themes/base/tooltip.css
+++ b/themes/base/tooltip.css
@@ -13,8 +13,6 @@
        position: absolute;
        z-index: 9999;
        max-width: 300px;
-       -webkit-box-shadow: 0 0 5px #aaa;
-       box-shadow: 0 0 5px #aaa;
 }
 body .ui-tooltip {
        border-width: 2px;

diff --git a/ui/tooltip.js b/ui/tooltip.js
index 85c64f2a09141d691619c6fec3f22c06057fb228..6a9039afe97d867e0c5025d821d0399072735f2a 100644 (file)
--- a/ui/tooltip.js
+++ b/ui/tooltip.js
@@ -406,7 +406,8 @@ return $.widget( "ui.tooltip", {
        _tooltip: function( element ) {
                var tooltip = $( "<div>" )
                                .attr( "role", "tooltip" )
-                               .addClass( "ui-tooltip ui-widget ui-corner-all ui-widget-content " +
+                               // TODO move to classes option
+                               .addClass( "ui-tooltip ui-widget ui-widget-shadow ui-corner-all ui-widget-content " +
                                        ( this.options.tooltipClass || "" ) ),
                        id = tooltip.uniqueId().attr( "id" );