Changeset 34948

Timestamp:

10/08/2015 05:30:57 PM (9 years ago)

Author:

helen

Message:

Buttons: Update styles and colors.

• Aligns with the color standards. See ​https://make.wordpress.org/design/handbook/foundations/colors/
• Creates a consistent interaction experience between states.
• Improves contrast and accessibility.

props hugobaeta, afercia, melchoyce, michael-arestad.
fixes #31459.

Location:

trunk/src

Files:

• wp-admin/css/colors/_mixins.scss (modified) (3 diffs)
• wp-admin/css/press-this.css (modified) (8 diffs)
• wp-includes/css/buttons.css (modified) (9 diffs)

trunk/src/wp-admin/css/colors/_mixins.scss

@@ -5 +5 @@
 @mixin button( $button-color, $text-color: white ) {
     background: $button-color;
-    border-color: darken( $button-color, 10% );
+    border-color: darken( $button-color, 10% ) darken( $button-color, 15% ) darken( $button-color, 15% );
     color: $text-color;
-    box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
+    box-shadow: 0 1px 0 darken( $button-color, 15% );
+    text-shadow: 0 -1px 1px darken( $button-color, 15% ),
+        1px 0 1px darken( $button-color, 15% ),
+        0 1px 1px darken( $button-color, 15% ),
+        -1px 0 1px darken( $button-color, 15% );
 
     &:hover,
     &:focus {
-        background: darken( $button-color, 5% );
+        background: lighten( $button-color, 3% );
         border-color: darken( $button-color, 15% );
         color: $text-color;
-        box-shadow: inset 0 1px 0 lighten( $button-color, 10% );
+        box-shadow: 0 1px 0 darken( $button-color, 15% );
     }
 
     &:focus {
-        box-shadow: inset 0 1px 0 lighten( $button-color, 10% ),
-                    0 0 0 1px #5b9dd9,
-                    0 0 2px 1px rgba( 30, 140, 190, .8 );
+        box-shadow: inset 0 1px 0 darken( $button-color, 10% ),
+                    0 0 2px 1px #33b3db;
     }
 
@@ -26 +29 @@
         background: darken( $button-color, 10% );
         border-color: darken( $button-color, 15% );
-        color: $text-color;
-        box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
-                    0 0 0 1px #5b9dd9,
-                    0 0 2px 1px rgba( 30, 140, 190, .8 );
+        box-shadow: inset 0 2px 0 darken( $button-color, 15% );
     }
 
@@ -41 +41 @@
         text-shadow: none !important;
     }
+
+    &.button-hero {
+        box-shadow: 0 2px 0 darken( $button-color, 15% ) !important;
+        &:active {
+            box-shadow: inset 0 3px 0 darken( $button-color, 15% ) !important;
+        }
+    }
+
 }

trunk/src/wp-admin/css/press-this.css

@@ -463 +463 @@
     line-height: 2;
     padding: 0 10px 1px;
-    background: #00a0d2;
-    border-color: #0073aa;
+    background: #0085ba;
+    border-color: #0073aa #006799 #006799;
     border-width: 1px;
     border-style: solid;
-    -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
-    box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
+    -webkit-box-shadow: 0 1px 0 #006799;
+    box-shadow: 0 1px 0 #006799;
     color: #fff;
+    text-shadow: 0 -1px 1px #006799,
+        1px 0 1px #006799,
+        0 1px 1px #006799,
+        -1px 0 1px #006799;
 }
 
@@ -487 +491 @@
     -webkit-border-bottom-right-radius: 3px;
     border-bottom-right-radius: 3px;
-    border-left: 0 none;
+    border-left: 1px solid #006799;
     float: right;
 }
@@ -494 +498 @@
     margin: 4px 20px 3px 0;
     padding: 0 10px;
-    border-left: 1px solid #fff;
 }
 
@@ -500 +503 @@
 .split-button-toggle:hover {
     outline: none;
-    background: #0091cd;
-    border-color: #0073aa;
+    background: #008ec2;
+    border-color: #006799;
 }
 
@@ -507 +510 @@
 .split-button-toggle:focus {
     outline: none;
-    border-color: #0e3950;
-    -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
-        0 0 0 1px #5b9dd9,
-        0 0 2px 1px rgba(30, 140, 190, .8);
-    box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
-        0 0 0 1px #5b9dd9,
-        0 0 2px 1px rgba(30, 140, 190, .8);
+    -webkit-box-shadow: 0 1px 0 #0073aa,
+        0 0 2px 1px #33b3db;
+    box-shadow: 0 1px 0 #0073aa,
+        0 0 2px 1px #33b3db;
 }
 
@@ -519 +519 @@
 .split-button-toggle:active {
     background: #0073aa;
-    border-color: #005082;
-    color: rgba( 255, 255, 255, 0.95 );
-    -webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
-    box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
+    border-color: #006799;
+    -webkit-box-shadow: inset 0 2px 10px #006799, 0 1px 0 #0073aa;
+    box-shadow: inset 0 2px 10px #006799, 0 1px 0 #0073aa;
 }
 
@@ -1439 +1438 @@
 .scan-submit:hover,
 .scan-submit:focus {
-    background: #2991b7;
-    border-color: #20708e;
+    background: #008ec2;
+    border-color: #006799;
     color: #fff;
     outline: 0;
@@ -1446 +1445 @@
 
 .scan-submit:active {
-    background: #2581a2;
-    border-color: #20708e;
+    background: #0073aa;
+    border-color: #006799;
     color: #fff;
 }

trunk/src/wp-includes/css/buttons.css

@@ -132 +132 @@
     border-color: #cccccc;
     background: #f7f7f7;
-    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
-    box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
+    -webkit-box-shadow: 0 1px 0 #cccccc;
+    box-shadow: 0 1px 0 #cccccc;
     vertical-align: top;
 }
@@ -165 +165 @@
     -webkit-box-shadow:
         0 0 0 1px #5b9dd9,
-        0 0 2px 1px rgba(30, 140, 190, .8);
+        0 0 2px 1px rgba(0, 115, 170, .8);
     box-shadow:
         0 0 0 1px #5b9dd9,
-        0 0 2px 1px rgba(30, 140, 190, .8);
+        0 0 2px 1px rgba(0, 115, 170, .8);
 }
 
@@ -177 +177 @@
     background: #eee;
     border-color: #999;
-    color: #32373c;
     -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
+    -webkit-transform: translateY(1px);
+    -ms-transform: translateY(1px);
+    transform: translateY(1px);
 }
 
@@ -186 +188 @@
         inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
         0 0 0 1px #5b9dd9,
-        0 0 2px 1px rgba(30, 140, 190, .8);
+        0 0 2px 1px rgba(0, 115, 170, .8);
     box-shadow:
         inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
         0 0 0 1px #5b9dd9,
-        0 0 2px 1px rgba(30, 140, 190, .8);
+        0 0 2px 1px rgba(0, 115, 170, .8);
 }
 
@@ -214 +216 @@
 
 .wp-core-ui .button-primary {
-    background: #00a0d2;
-    border-color: #0073aa;
-    -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
-    box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
+    background: #0085ba;
+    border-color: #0073aa #006799 #006799;
+    -webkit-box-shadow: 0 1px 0 #006799;
+    box-shadow: 0 1px 0 #006799;
     color: #fff;
     text-decoration: none;
+    text-shadow: 0 -1px 1px #006799,
+        1px 0 1px #006799,
+        0 1px 1px #006799,
+        -1px 0 1px #006799;
 }
 
@@ -226 +232 @@
 .wp-core-ui .button-primary.focus,
 .wp-core-ui .button-primary:focus {
-    background: #0091cd;
-    border-color: #0073aa;
-    -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
-    box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
+    background: #008ec2;
+    border-color: #006799;
     color: #fff;
 }
@@ -235 +239 @@
 .wp-core-ui .button-primary.focus,
 .wp-core-ui .button-primary:focus {
-    border-color: #0e3950;
-    -webkit-box-shadow:
-        inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
-        0 0 0 1px #5b9dd9,
-        0 0 2px 1px rgba(30, 140, 190, .8);
-    box-shadow:
-        inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
-        0 0 0 1px #5b9dd9,
-        0 0 2px 1px rgba(30, 140, 190, .8);
+    -webkit-box-shadow: 0 1px 0 #0073aa,
+        0 0 2px 1px #33b3db;
+    box-shadow: 0 1px 0 #0073aa,
+        0 0 2px 1px #33b3db;
 }
 
@@ -251 +250 @@
 .wp-core-ui .button-primary:active {
     background: #0073aa;
-    border-color: #005082;
-    color: rgba( 255, 255, 255, 0.95 );
-    -webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
-    box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
+    border-color: #006799;
+    -webkit-box-shadow: inset 0 2px 0 #006799;
+    box-shadow: inset 0 2px 0 #006799;
     vertical-align: top;
 }
@@ -269 +267 @@
     text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important;
     cursor: default;
+}
+
+.wp-core-ui .button.button-primary.button-hero {
+    -webkit-box-shadow: 0 2px 0 #006799;
+    box-shadow: 0 2px 0 #006799;
+}
+
+.wp-core-ui .button.button-primary.button-hero.active,
+.wp-core-ui .button.button-primary.button-hero.active:hover,
+.wp-core-ui .button.button-primary.button-hero.active:focus,
+.wp-core-ui .button.button-primary.button-hero:active {
+    -webkit-box-shadow: inset 0 3px 0 #006799;
+    box-shadow: inset 0 3px 0 #006799;
 }