Restyles the buttons

- Disables default YahooUI button styles
- Use YUI classes for backwards compatibility:
    - <span class="yui-button"><button>Button element</button>
- Styles are applied by default for the following input types:
    - <input type="[button | reset | submit]" />
- Add a large button variant
    - The variant is set adding the .large-button class
    - f:apply and f:submit jelly templates now have a isLarge property that allows toggling large buttons on
    - Job configuration has large buttons

core/src/main/resources/hudson/model/Job/configure.jelly

@@ -65,8 +65,8 @@ THE SOFTWARE.
             <j:if test="${h.hasPermission(it,it.CONFIGURE)}">
               <f:bottomButtonBar>
                 <!--<input type="button" name="StructureTest" value="Test" onclick="buildFormTree(this.form)" />-->
-                <f:submit value="${%Save}"/>
-                <f:apply value="${%Apply}"/>
+                <f:submit value="${%Save}" isLarge="true"/>
+                <f:apply value="${%Apply}" isLarge="true" />
               </f:bottomButtonBar>
             </j:if>
           </f:form>

core/src/main/resources/lib/form/apply.jelly

@@ -35,8 +35,15 @@ THE SOFTWARE.
     <s:attribute name="value">
       The text of the apply button.
     </s:attribute>
+
+    <s:attribute name="isLarge">
+        Set to "true" to enable the large variant of the button
+    </s:attribute>
   </s:documentation>
   <st:adjunct includes="lib.form.apply.apply"/>
   <input type="hidden" name="core:apply" value="" />
-  <input type="button" value="${attrs.value ?: '%Apply'}" class="apply-button applyButton" name="Apply"/><!-- applyButton is legacy -->
+  <input type="button"
+         value="${attrs.value ?: '%Apply'}"
+         class="apply-button applyButton ${attrs.isLarge ? 'large-button' : ''}"
+         name="Apply"/><!-- applyButton is legacy -->
 </j:jelly>
\ No newline at end of file

core/src/main/resources/lib/form/submit.jelly

@@ -36,6 +36,14 @@ THE SOFTWARE.
     <s:attribute name="value" use="required">
       The text of the submit button. Something like "submit", "OK", etc.
     </s:attribute>
+
+    <s:attribute name="isLarge">
+      Set to "true" to enable the large variant of the button
+    </s:attribute>
   </s:documentation>
-  <input type="submit" name="${attrs.name ?: 'Submit'}" value="${attrs.value ?: '%Submit'}" class="submit-button primary" />
+
+  <input type="submit"
+         name="${attrs.name ?: 'Submit'}"
+         value="${attrs.value ?: '%Submit'}"
+         class="submit-button primary ${attrs.isLarge ? 'large-button' : ''}" />
 </j:jelly>

core/src/main/resources/lib/layout/layout.jelly

@@ -153,9 +153,7 @@ THE SOFTWARE.
     </j:if>
 
     <link rel="stylesheet" href="${resURL}/scripts/yui/container/assets/container.css" type="text/css"/>
-    <link rel="stylesheet" href="${resURL}/scripts/yui/assets/skins/sam/skin.css" type="text/css" />
     <link rel="stylesheet" href="${resURL}/scripts/yui/container/assets/skins/sam/container.css" type="text/css"/>
-    <link rel="stylesheet" href="${resURL}/scripts/yui/button/assets/skins/sam/button.css" type="text/css" />
     <link rel="stylesheet" href="${resURL}/scripts/yui/menu/assets/skins/sam/menu.css" type="text/css" />
     <!--link rel="stylesheet" href="${resURL}/scripts/yui/editor/assets/skins/sam/editor.css" type="text/css" /-->
 

war/src/main/js/widgets/config/tabbar.less

@@ -148,29 +148,6 @@
           right:0;
           z-index:2;
         }
-        .yui-button.primary{
-          button{
-            background:@middle-blue;
-            border-color:@dark-blue;
-          }
-        }
-        .yui-button.yui-button-disabled{
-          button{
-            background:@light-background;
-            border-color:@solid-border;
-            color:@solid-border;
-          }
-        }
-
-        .yui-button{
-          margin-right:10px;
-          
-          button{
-            padding:5px 20px;
-            background:@pale-blue;
-            border-color:@line-blue;
-          }
-        }
       }
 
       .section-header{
@@ -207,8 +184,7 @@
         textarea.setting-input {
           display:block;
         }
-        
-        .yui-button button,
+
         input[type='email'].setting-input,
         input[type='password'].setting-input,
         input[type='text'].setting-input{
@@ -217,15 +193,7 @@
           padding:0 5px;
           .border-radius(@radius);
         }
-        .yui-button button{
-          padding:0 10px;
-          box-sizing:content-box;
-        }
-        
-        .yui-button button.hetero-list-add{
-          padding-right:25px;
-        }
-        
+
         select:not([multiple]){
           height:@input-line-height;
           line-height:@input-line-height;
@@ -320,6 +288,7 @@
           line-height: 12px !important;
           display: inline-block;
           font-size: 8px;
+          min-width: 0;
         }
 
         button:focus,

war/src/main/less/abstracts/colors.less

 @white: #fff;
+@black: #333;
+
+@primary: #0587d4;
+@secondary: #4D545D;
+@success: #138347;
+@danger: #EB383B;
+@warning: #EA6B19;
+@focus: #3FB3F7;
+
+// State colors
+@primary-hover: #0B6AA2;
+@primary-active: #095683;
+@danger-hover: #D92528;
+@danger-active: #C81E21;
 
 // Page header colors
 @logo-bg: @white;
-@brand-link-color: #4d545d;
+@brand-link-color: @secondary;
 @header-link-color: @white;
 @header-link-color-active: #f5f5f5;
-@header-link-outline: #3FB3F7;
+@header-link-outline: @focus;
 @search-input-color: @brand-link-color;
 @search-background: @white;
-@search-box-completion-bg: #0587d4;
+@search-box-completion-bg: @primary;
 @search-box-shadow: 0 1px 7px 0 rgba(0,0,0,0.3);
 
 // Header classic colors
@@ -17,11 +31,11 @@
 @header-link-bg-classic-active: lighten(@header-bg-classic, 20%);
 
 // Header new UI colors
-@header-bg-v2: #0587d4;
-@brand-link-color-hover-v2: #0B6AA2;
-@brand-link-color-active-v2: #095683;
-@header-link-bg-hover-v2: #0B6AA2;
-@header-link-bg-active-v2: #095683;
+@header-bg-v2: @primary;
+@brand-link-color-hover-v2: @primary-hover;
+@brand-link-color-active-v2: @primary-active;
+@header-link-bg-hover-v2: @primary-hover;
+@header-link-bg-active-v2: @primary-active;
 
 // Header dimensions
 @header-item-border-radius: 4px;
@@ -43,7 +57,7 @@
 @alert-success-icon-color: #4caf50;
 @alert-success-bg-color: #d4edda;
 @alert-success-border-color: #c3e6cb;
-@alert-success-color: #155724;
+@alert-success-color: @success;
 
 @alert-warn-icon-color: #ff9800;
 @alert-warn-bg-color: #fff3cd;
@@ -56,6 +70,8 @@
 @alert-err-color: #721c24;
 
 // Typography
-@text-color: #333;
-@text-color-primary: #0B6AA2;
-@text-color-primary-accent: #095683;
+@text-color: @black;
+@text-color-primary: @primary;
+@text-color-primary-accent: @primary-active;
+@text-color-grey-light: #747C82;
+@text-inactive: @text-color-grey-light;

war/src/main/less/base-styles-v2.less

@@ -21,9 +21,7 @@ html {
 @import './base/layout-commons.less';
 @import './base/style.less';
 
-// Keep page header code in this bundle to avoid loading multiple files
-// that are always needed
+@import './modules/buttons.less';
 @import './modules/page-header.less';
 @import './modules/page-footer.less';
-
 @import './modules/manage-jenkins.less';

war/src/main/less/base/style.less

@@ -1294,16 +1294,6 @@ TABLE.fingerprint-in-build TD {
   background-color: #e8eeee;
 }
 
-#plugins input.uninstall {
-  font-size: @font-size-xs;
-  padding: 3px 5px;
-  border-radius: 1px;
-  font-weight: bold;
-  background-color: #4b758b;
-  color: #eee;
-  border: 1px solid #5788a1;
-}
-
 #plugins tr.has-dependents input.uninstall {
   background-color: #e0e0e0;
   border: 1px solid #cccccc;
@@ -1792,129 +1782,6 @@ select.select-ajax-pending {
     margin-top: 6px;
 }
 
-#bottom-sticker .yui-button {
-    margin-right: 20px;
-}
-
-/* This level of nesting is technically unnecessary, but to override the
- * default Yahoo styles. */
-#jenkins .yui-button {
-  border-width: 0;
-  border-style: none;
-  border-color: transparent;
-  background: none;
-  text-decoration: none;
-}
-
-#jenkins .yui-button .first-child {
-    border-width: 0;
-    border-style: none;
-    border-color: transparent;
-}
-#jenkins .yui-button .btn,
-#jenkins .yui-button button {
-  font-size: @font-size-xs;
-  padding: 3px 20px;
-  *border: 0;
-  border-radius: 1px;
-
-  border: 1px solid #cccccc;
-  background-color: #e0e0e0;
-
-  color: #505050;
-  font-weight: bold;
-}
-
-#jenkins .yui-button .hetero-list-add {
-    padding-right: 35px;
-}
-
-#jenkins .yui-button .btn:hover,
-#jenkins .yui-button button:hover,
-#jenkins .yui-button .hover
-{
-    background-color: #d0d0d0;
-    border: 1px solid #c0c0c0;
-}
-
-#jenkins .yui-button .btn:active,
-#jenkins .yui-button button:active,
-#jenkins .yui-button .active {
-    background-color: #bbb;
-    box-shadow: inset 0px 1px 6px 2px #929292;
-    border: 1px solid #bbb;
-}
-
-#jenkins .yui-button .btn.disabled,
-#jenkins .yui-button button[disabled],
-#jenkins .yui-button button[disabled]:hover,
-#jenkins .yui-button button[disabled]:active,
-#jenkins .yui-button .disabled {
-    background-color: #e5e5e5;
-    color: #999;
-    border: 1px solid #d2d2d2;
-}
-
-/* Color overrides */
-#jenkins .yui-button.primary .btn,
-#jenkins .yui-button.primary button {
-    background-color: #4b758b;
-    color: #eee;
-    border: 1px solid #5788a1;
-}
-#jenkins .yui-button.primary .btn:hover,
-#jenkins .yui-button.primary button:hover,
-#jenkins .yui-button.primary .hover
-{
-    background-color: #3f6275;
-    border: 1px solid #5788a1;
-}
-#jenkins .yui-button.primary .btn:active,
-#jenkins .yui-button.primary button:active,
-#jenkins .yui-button.primary .active
-{
-    background-color: #33505f;
-    border: 1px solid #3f6275;
-    box-shadow: inset 0px 1px 6px 2px #1b2b33;
-}
-
-#jenkins .yui-button.primary button:disabled,
-#jenkins .yui-button.primary .disabled
-{
-    background-color: #adc6d3;
-    color: #fff;
-    border: 1px solid #a2becd;
-}
-
-#jenkins .yui-button.danger button {
-    background-color: #d24939;
-    color: #eee;
-    border: 1px solid #be3a2b;
-}
-
-#jenkins .yui-button.danger button:hover,
-#jenkins .yui-button.danger .hover
-{
-    background-color: #a23225;
-    border: 1px solid #942e22;
-}
-
-#jenkins .yui-button.danger button:active,
-#jenkins .yui-button.danger .active
-{
-    background-color: #942e22;
-    border: 1px solid #6b2118;
-    box-shadow: inset 0px 1px 6px 2px #79251b;
-}
-
-#jenkins .yui-button.danger button:disabled,
-#jenkins .yui-button.danger .disabled
-{
-    background-color: #e5958c;
-    color: #f8f8f8;
-    border: 1px solid #e39280;
-}
-
 .i18n {
     display: none;
 }

war/src/main/less/modules/buttons.less

+@import '../abstracts/colors.less';
+@import '../abstracts/font.less';
+
+@button-secondary-color: secondary;
+@button-secondary-color-hover: @primary-hover;
+@button-secondary-color-active: @primary-active;
+
+// Button variant mixins
+
+.button-danger() {
+  color: @secondary;
+  background-color: @white;
+  border-color: @danger;
+
+  &:hover,
+  &:focus {
+    color: @danger-hover;
+    background-color: @white;
+    border-color: @danger-hover;
+  }
+
+  &:active {
+    color: @danger-active;
+    background-color: @white;
+    border-color: @danger-active;
+  }
+}
+.button-danger-disabled() {
+  pointer-events: none;
+  opacity: 0.5;
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: @secondary;
+    background-color: @white;
+    border-color: @danger;
+  }
+}
+
+.button-primary() {
+  color: @white;
+  background-color: @secondary;
+  border-color: @secondary;
+
+  &:hover,
+  &:focus {
+    background-color: @primary-hover;
+    border-color: @primary-hover;
+  }
+
+  &:active {
+    background-color: @primary-active;
+    border-color: @primary-active;
+  }
+}
+.button-primary-disabled() {
+  pointer-events: none;
+  opacity: 0.5;
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: @white;
+    background-color: @secondary;
+    border-color: @secondary;
+  }
+}
+
+.button-secondary() {
+  color: @secondary;
+  border-color: #9BA7AF;
+  background-color: @white;
+
+  &:hover,
+  &:focus {
+    color: @button-secondary-color-hover;
+    // background-color: #f8f8f8;
+    border-color: @button-secondary-color-hover;
+  }
+
+  &:active {
+    color: @button-secondary-color-active;
+    border-color: @button-secondary-color-active;
+  }
+}
+.button-secondary-disabled() {
+  pointer-events: none;
+  opacity: 0.5;
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: @secondary;
+    background-color: @white;
+    border-color: #9BA7AF;
+  }
+}
+
+.button-link {
+  color: @primary;
+  background-color: transparent;
+  border-color: transparent;
+
+  &:hover,
+  &:focus {
+    color: @primary-hover;
+    background-color: #f8f8f8;
+    border-color: #f8f8f8;
+  }
+
+  &:active {
+    color: @primary-active;
+    background-color: #EAEFF2;
+    border-color: #EAEFF2;
+  }
+}
+
+// Button styles
+
+.yui-button {
+  display: inline-block;
+}
+
+.yui-button .first-child {
+  display: block;
+}
+
+.yui-button button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  @button-height: 2rem;
+  @button-border: 2px;
+  @button-line-height: calc(@button-height - @button-border - @button-border);
+
+  box-sizing: border-box;
+  display: inline-block;
+  padding: 0 1rem;
+  margin-right: 0.25rem;
+  margin-left: 0.25rem;
+  height: @button-height;
+  min-width: 4.5rem;
+
+  cursor: pointer;
+  user-select: none;
+
+  font-size: @font-size-xs;
+  line-height: @button-line-height;
+  font-weight: bold;
+  text-align: center;
+  vertical-align: middle;
+
+  border: @button-border solid;
+  border-radius: 4px;
+
+  transition: all 0.15s ease-in-out;
+
+  .button-secondary();
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 0.2rem rgba(@focus, 0.5)
+  }
+}
+
+.yui-button.danger button,
+input[type="button"].danger,
+input[type="reset"].danger,
+input[type="submit"].danger {
+  .button-danger();
+}
+
+.yui-button.primary button,
+input[type="button"].primary,
+input[type="reset"].primary,
+input[type="submit"].primary {
+  .button-primary();
+}
+
+.yui-button.link-button button,
+input[type="button"].link-button,
+input[type="reset"].link-button,
+input[type="submit"].link-button {
+  .button-link();
+}
+
+.yui-button.large-button button,
+input[type="button"].large-button,
+input[type="reset"].large-button,
+input[type="submit"].large-button {
+  @button-height: 2.5rem;
+  @button-border: 2px;
+  @button-line-height: calc(@button-height - @button-border - @button-border);
+
+  min-width: 6.5rem;
+  height: @button-height;
+  font-size: @font-size-sm;
+  line-height: @button-line-height;
+}
+
+.yui-button a {
+  // text-decoration: none;
+}
+
+// Dropdown buttons
+.yui-button.yui-menu-button button,
+.yui-button.yui-split-button button {
+  // These buttons have a caret as the :after element
+  &::after {
+    display: inline-block;
+    margin-left: 0.4em;
+    vertical-align: 0.1875em;
+    content: "";
+    border-top: 0.3em solid;
+    border-right: 0.3em solid transparent;
+    border-bottom: 0;
+    border-left: 0.3em solid transparent;
+  }
+}
+
+.yui-button-disabled button,
+.yui-button button:disabled,
+input[type="button"]:disabled,
+input[type="reset"]:disabled,
+input[type="submit"]:disabled,
+.yui-button-disabled input[type="button"],
+.yui-button-disabled input[type="reset"],
+.yui-button-disabled input[type="submit"] {
+  .button-secondary-disabled();
+}
+
+.yui-button-disabled.primary button,
+.yui-button.primary button:disabled,
+input[type="button"].primary:disabled,
+input[type="reset"].primary:disabled,
+input[type="submit"].primary:disabled,
+.yui-button-disabled.primary input[type="button"],
+.yui-button-disabled.primary input[type="reset"],
+.yui-button-disabled.primary input[type="submit"] {
+  .button-primary-disabled();
+}
+
+.yui-button-disabled.danger button,
+.yui-button.danger button:disabled,
+input[type="button"].danger:disabled,
+input[type="reset"].danger:disabled,
+input[type="submit"].danger:disabled,
+.yui-button-disabled.danger input[type="button"],
+.yui-button-disabled.danger input[type="reset"],
+.yui-button-disabled.danger input[type="submit"] {
+  .button-danger-disabled();
+}