Update buttons to use new classes on the dashboard (#6799)

Co-authored-by: Alexander Brandes <[email protected]>
jenkinsci · Aug 15, 2022 · cb232e8 · cb232e8
1 parent 90230f6
commit cb232e8
Show file tree

Hide file tree

Showing 17 changed files with 554 additions and 509 deletions.
diff --git a/core/src/main/resources/hudson/logging/LogRecorderManager/feeds.jelly b/core/src/main/resources/hudson/logging/LogRecorderManager/feeds.jelly
@@ -25,23 +25,17 @@ THE SOFTWARE.
 <!-- list of feed links -->
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
-    <div align="right">
-        <a href="rss" class="yui-button link-button">
-            <span class="leading-icon">
-              <l:icon src="symbol-rss" />
-            </span>
+    <div class="jenkins-buttons-row jenkins-buttons-row--invert">
+        <a href="rss" class="jenkins-button jenkins-button--tertiary">
+            <l:icon src="symbol-rss" />
             <span>${%All}</span>
         </a>
-        <a href="rss?level=SEVERE" class="yui-button link-button">
-            <span class="leading-icon">
-              <l:icon src="symbol-rss" />
-            </span>
+        <a href="rss?level=SEVERE" class="jenkins-button jenkins-button--tertiary">
+            <l:icon src="symbol-rss" />
             <span>${%SEVERE}</span>
         </a>
-        <a href="rss?level=WARNING" class="yui-button link-button">
-            <span class="leading-icon">
-              <l:icon src="symbol-rss" />
-            </span>
+        <a href="rss?level=WARNING" class="jenkins-button jenkins-button--tertiary">
+            <l:icon src="symbol-rss" />
             <span>${%WARNING}</span>
         </a>
     </div>

diff --git a/core/src/main/resources/jenkins/security/ApiTokenProperty/config.jelly b/core/src/main/resources/jenkins/security/ApiTokenProperty/config.jelly
@@ -110,7 +110,7 @@ THE SOFTWARE.
                                 </j:choose>
 
                                 <a href="#" onclick="return revokeToken(this)"
-                                   class="jenkins-button jenkins-button--transparent jenkins-button--destructive token-revoke"
+                                   class="jenkins-button jenkins-button--tertiary jenkins-button--destructive token-revoke"
                                    data-message-if-legacy-revoked="${%RevokedToken}"
                                    data-confirm="${%ConfirmRevokeSingle}"
                                    data-target-url="${descriptor.descriptorFullUrl}/revoke">
@@ -136,7 +136,7 @@ THE SOFTWARE.
                             <div class="controls-container">
                               <l:copyButton text="" clazz="jenkins-hidden" tooltip="${%CopyToken}" iconOnly="true" />
                               <a href="#" onclick="return revokeToken(this)"
-                                 class="jenkins-button jenkins-button--transparent jenkins-button--destructive token-revoke hidden-button"
+                                 class="jenkins-button jenkins-button--tertiary jenkins-button--destructive token-revoke hidden-button"
                                  data-confirm="${%ConfirmRevokeSingle}"
                                  data-target-url="${descriptor.descriptorFullUrl}/revoke">
                                 <local:revokeIcon title="${%RevokeToken}" />

diff --git a/core/src/main/resources/lib/hudson/editableDescription.jelly b/core/src/main/resources/lib/hudson/editableDescription.jelly
@@ -41,10 +41,8 @@ THE SOFTWARE.
 
     <l:hasPermission permission="${permission}">
       <div class="jenkins-buttons-row jenkins-buttons-row--invert">
-        <a class="yui-button link-button" id="description-link" href="editDescription" onclick="return replaceDescription();">
-          <span class="leading-icon">
-            <l:icon src="symbol-edit" />
-          </span>
+        <a class="jenkins-button jenkins-button--tertiary" id="description-link" href="editDescription" onclick="return replaceDescription();">
+          <l:icon src="symbol-edit" />
           <j:choose>
             <j:when test="${empty(it.description)}">
               ${%add description}

diff --git a/core/src/main/resources/lib/hudson/iconSize.jelly b/core/src/main/resources/lib/hudson/iconSize.jelly
@@ -28,16 +28,15 @@ THE SOFTWARE.
   <div class="jenkins-icon-size">
     <d:taglib uri="local">
       <d:tag name="iconSizeLink">
-        <st:nbsp/>
         <j:choose>
           <j:when test="${sz==iconSize}">
-            <li class="jenkins-icon-size__items-item">
+            <li class="jenkins-icon-size__items-item" tooltip="${title}">
               ${title.charAt(0)}<span class="jenkins-visually-hidden">${title.substring(1)}</span>
             </li>
           </j:when>
           <j:otherwise>
             <li>
-              <a class="yui-button link-button" href="${rootURL}/iconSize?${sz}">
+              <a class="jenkins-button jenkins-button--tertiary" href="${rootURL}/iconSize?${sz}" tooltip="${title}">
                 ${title.charAt(0)}<span class="jenkins-visually-hidden">${title.substring(1)}</span>
               </a>
             </li>
@@ -55,8 +54,6 @@ THE SOFTWARE.
       </ol>
     </div>
 
-    <div>
-      <d:invokeBody />
-    </div>
+    <d:invokeBody />
   </div>
 </j:jelly>
diff --git a/core/src/main/resources/lib/hudson/rssBar.jelly b/core/src/main/resources/lib/hudson/rssBar.jelly
@@ -26,23 +26,17 @@ THE SOFTWARE.
 <j:jelly xmlns:j="jelly:core" xmlns:x="jelly:xml" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout"
          xmlns:t="/lib/hudson" xmlns:f="/lib/form">
   <div id="rss-bar" class="jenkins-buttons-row jenkins-buttons-row--invert">
-    <a href="${rootURL}/legend" class="yui-button link-button rss-bar-legend-link">${%Legend}</a>
-      <a href="rssAll" class="yui-button link-button">
-        <span class="leading-icon">
-          <l:icon src="symbol-rss" />
-        </span>
+    <a href="${rootURL}/legend" class="jenkins-button jenkins-button--tertiary">${%Legend}</a>
+      <a href="rssAll" class="jenkins-button jenkins-button--tertiary">
+        <l:icon src="symbol-rss" />
         <span>Atom feed ${%for all}</span>
       </a>
-      <a href="rssFailed" class="yui-button link-button">
-        <span class="leading-icon">
-          <l:icon src="symbol-rss" />
-        </span>
+      <a href="rssFailed" class="jenkins-button jenkins-button--tertiary">
+        <l:icon src="symbol-rss" />
         <span>Atom feed ${%for failures}</span>
       </a>
-      <a href="rssLatest" class="yui-button link-button">
-        <span class="leading-icon">
-          <l:icon src="symbol-rss" />
-        </span>
+      <a href="rssLatest" class="jenkins-button jenkins-button--tertiary">
+        <l:icon src="symbol-rss" />
         <span>Atom feed ${%for just latest builds}</span>
       </a>
   </div>

diff --git a/core/src/main/resources/lib/layout/copyButton.jelly b/core/src/main/resources/lib/layout/copyButton.jelly
@@ -46,7 +46,7 @@ THE SOFTWARE.
   </st:documentation>
 
   <!-- 'copy-button' class is for backwards compatability -->
-  <button class="copy-button jenkins-button ${attrs.iconOnly == 'true' ? 'jenkins-button--transparent' : ''} jenkins-copy-button ${attrs.clazz}"
+  <button class="copy-button jenkins-button ${attrs.iconOnly == 'true' ? 'jenkins-button--tertiary' : ''} jenkins-copy-button ${attrs.clazz}"
           text="${attrs.text}"
           message="${attrs.message ?: '%Copied'}"
           tooltip="${attrs.tooltip ?: '%Copy'}"

diff --git a/war/src/main/less/abstracts/colors.less b/war/src/main/less/abstracts/colors.less
@@ -4,18 +4,22 @@
 // e.g. .jenkins-!-color-blue, .jenkins-!-color-light-blue, .jenkins-!-color-dark-blue
 each(@colors, {
   .jenkins-\!-color-light-@{key} {
+    --color: ~"var(--light-@{key})";
     color: ~"var(--light-@{key})" !important;
   }
   .jenkins-\!-color-@{key} {
+    --color: ~"var(--@{key})";
     color: ~"var(--@{key})" !important;
   }
   .jenkins-\!-color-dark-@{key} {
+    --color: ~"var(--dark-@{key})";
     color: ~"var(--dark-@{key})" !important;
   }
 });
 
 each(@semantics, {
   .jenkins-\!-@{key}-color {
+    --color: @value;
     color: @value !important;
   }
 });

diff --git a/war/src/main/less/abstracts/mixins.less b/war/src/main/less/abstracts/mixins.less
@@ -53,7 +53,7 @@
     content: "";
     inset: 0;
     z-index: -1;
-    border-radius: 10px;
+    border-radius: 0.66rem;
     transition: var(--standard-transition);
     pointer-events: none;
   }
@@ -87,7 +87,8 @@
 
   &:focus-visible {
     &::after {
-      box-shadow: 0 0 0 0.33rem var(--text-color);
+      box-shadow: 0 0 0 0.33rem var(--text-color) !important;
+      opacity: 1 !important;
     }
   }
 }
diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less
@@ -313,10 +313,16 @@
   --call-to-action-link-color: #000;
   --call-to-action-text-color: var(--alert-info-text-color);
 
+  // Default button
+  --button-background: hsla(240, 0.25, 0.75, 0.1);
+  --button-background--hover: hsla(240, 0.25, 0.75, 0.175);
+  --button-background--active: hsla(240, 0.25, 0.75, 0.25);
+  --button-box-shadow--focus: hsla(240, 0.25, 0.75, 0.1);
+
   // Variables for sidebar items, card items
-  --item-background--hover: hsla(240, 0.15, 0.6, 0.075);
-  --item-background--active: hsla(240, 0.15, 0.6, 0.15);
-  --item-box-shadow--focus: var(--item-background--hover);
+  --item-background--hover: hsla(240, 0.25, 0.75, 0.15);
+  --item-background--active: hsla(240, 0.25, 0.75, 0.225);
+  --item-box-shadow--focus: hsla(240, 0.25, 0.75, 0.105);
 
   // Colors
   each(@colors, {

diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
@@ -1295,6 +1295,7 @@ table.progress-bar.red td.progress-bar-done {
 .logrecord-container {
   border-radius: 10px;
   overflow: hidden;
+  margin-bottom: var(--section-padding);
 
   pre {
     padding-top: 0;