From cb232e8a7c330166243ae87c4bcfb651c83d7060 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Mon, 15 Aug 2022 22:07:08 +0100
Subject: [PATCH] Update buttons to use new classes on the dashboard (#6799)

Co-authored-by: Alexander Brandes <mc.cache@web.de>
---
 .../logging/LogRecorderManager/feeds.jelly    |  20 +-
 .../security/ApiTokenProperty/config.jelly    |   4 +-
 .../lib/hudson/editableDescription.jelly      |   6 +-
 .../main/resources/lib/hudson/iconSize.jelly  |   9 +-
 .../main/resources/lib/hudson/rssBar.jelly    |  20 +-
 .../resources/lib/layout/copyButton.jelly     |   2 +-
 war/src/main/less/abstracts/colors.less       |   4 +
 war/src/main/less/abstracts/mixins.less       |   5 +-
 war/src/main/less/abstracts/theme.less        |  12 +-
 war/src/main/less/base/style.less             |   1 +
 .../main/less/modules/buttons-deprecated.less | 277 +++++++++++
 war/src/main/less/modules/buttons-temp.less   | 187 --------
 war/src/main/less/modules/buttons.less        | 434 ++++++++----------
 war/src/main/less/modules/icon-size.less      |  47 --
 war/src/main/less/pages/dashboard.less        |  65 +++
 war/src/main/less/simple-page.less            |   2 +-
 war/src/main/less/styles.less                 |   4 +-
 17 files changed, 572 insertions(+), 527 deletions(-)
 create mode 100644 war/src/main/less/modules/buttons-deprecated.less
 delete mode 100644 war/src/main/less/modules/buttons-temp.less
 delete mode 100644 war/src/main/less/modules/icon-size.less
 create mode 100644 war/src/main/less/pages/dashboard.less

diff --git a/core/src/main/resources/hudson/logging/LogRecorderManager/feeds.jelly b/core/src/main/resources/hudson/logging/LogRecorderManager/feeds.jelly
index 6f4ccb7f8d..4e856c478e 100644
--- 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
index 9c9fda7fbb..9eaa9d3dec 100644
--- 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
index 3389093088..2ed80ba5e9 100644
--- 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
index 1fbb33d8c9..c3b22c2fd3 100644
--- 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
index c40d59d733..656f7aa5c0 100644
--- 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
index 474b25a582..8225424be7 100644
--- 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
index 4b4ab72983..a9cc251046 100644
--- 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
index 457640d104..e7ebe3e3c6 100644
--- 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
index 33fe61774d..505140a816 100644
--- 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
index 0322c00402..9883426709 100644
--- 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;
diff --git a/war/src/main/less/modules/buttons-deprecated.less b/war/src/main/less/modules/buttons-deprecated.less
new file mode 100644
index 0000000000..a33b404f2c
--- /dev/null
+++ b/war/src/main/less/modules/buttons-deprecated.less
@@ -0,0 +1,277 @@
+@import "../abstracts/theme.less";
+
+// Button: variant mixins
+
+.button-danger() {
+  color: var(--btn-text-color);
+  background-color: var(--danger);
+  border-color: var(--danger);
+
+  &:hover, &:focus {
+    color: var(--btn-text-color);
+    background-color: var(--danger-hover);
+    border-color: var(--danger-hover);
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 0.2rem var(--focus-btn-danger);
+  }
+
+  &:active {
+    color: var(--btn-text-color);
+    background-color: var(--danger-active);
+    border-color: var(--danger-active);
+  }
+}
+
+.button-primary() {
+  color: var(--btn-text-color);
+  background-color: var(--btn-primary-bg);
+  border-color: var(--btn-primary-bg);
+
+  &:hover, &:focus {
+    color: var(--btn-text-color);
+    background-color: var(--btn-primary-bg-hover);
+    border-color: var(--btn-primary-bg-hover);
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 0.2rem var(--focus-btn-primary);
+  }
+
+  &:active {
+    color: var(--btn-text-color);
+    background-color: var(--btn-primary-bg-active);
+    border-color: var(--btn-primary-bg-active);
+  }
+}
+
+.button-secondary() {
+  color: var(--btn-secondary-color);
+  border-color: var(--btn-secondary-border);
+  background-color: var(--btn-secondary-bg);
+
+  &:focus {
+    color: var(--btn-secondary-color--focus);
+    border-color: var(--btn-secondary-border--focus);
+    background-color: var(--btn-secondary-bg--focus);
+    box-shadow: 0 0 0 0.2rem var(--focus-btn-secondary);
+  }
+
+  // Hover MUST be AFTER the focus declaration for this outlined button.
+  // Otherwise, the hover styles will not be applied when hovering over a focused element
+  &:hover {
+    color: var(--btn-secondary-color--hover);
+    border-color: var(--btn-secondary-border--hover);
+    background-color: var(--btn-secondary-bg--hover);
+  }
+
+  &:active {
+    color: var(--btn-secondary-color--active);
+    border-color: var(--btn-secondary-border--active);
+    background-color: var(--btn-secondary-bg--active);
+  }
+}
+
+.button-link {
+  color: var(--primary);
+  background-color: transparent;
+  border-color: transparent;
+  font-weight: var(--btn-link-font-weight);
+
+  &:hover, &:focus {
+    color: var(--btn-link-color--hover);
+    background-color: var(--btn-link-bg--hover);
+    border-color: var(--btn-link-bg--hover);
+  }
+
+  &:focus {
+    box-shadow: none;
+  }
+
+  &:active {
+    color: var(--btn-link-color--active);
+    background-color: var(--btn-link-bg--active);
+    border-color: var(--btn-link-bg--active);
+  }
+}
+
+.button-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+// 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"], a.yui-button:link, a.yui-button:visited {
+  box-sizing: border-box;
+  // vertical padding:
+  // 0.375rem == 6px == 32px (target height) - 4px (borders) - 16 (line) / 2
+  padding: 0.375rem 1rem;
+  margin-right: 0.25rem;
+  margin-left: 0.25rem;
+  min-width: 4.5rem;
+  min-height: 2rem;
+  cursor: pointer;
+  user-select: none;
+  font-size: var(--btn-font-size);
+  line-height: var(--btn-line-height);
+  font-weight: var(--btn-font-weight);
+  text-align: center;
+  vertical-align: middle;
+  text-decoration: none;
+  border: 2px solid;
+  border-radius: 4px;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out;
+
+  .button-secondary();
+
+  &:focus {
+    outline: none;
+  }
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  & > span {
+    display: inline-block;
+  }
+
+  .svg-icon, i {
+    width: 1rem;
+    height: 1rem;
+    font-size: 1rem;
+    vertical-align: top;
+    flex-shrink: 1;
+  }
+
+  .leading-icon {
+    display: flex;
+    margin-right: 0.25rem;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .trailing-icon {
+    margin-left: 0.25rem;
+  }
+}
+
+.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, a.yui-button.large-button {
+  // vertical padding
+  // 0.5rem == 8px == 40px (target height) - 4px (borders) - 20 (line) / 2
+  padding: 0.5rem 1rem;
+  min-width: 6.5rem;
+  min-height: 2.5rem;
+  font-size: var(--btn-large-font-size);
+  line-height: var(--btn-large-line-height);
+
+  .svg-icon, i {
+    vertical-align: top;
+    height: 1.25rem;
+    width: 1.25rem;
+    font-size: 1.25rem;
+  }
+}
+
+.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-disabled();
+}
+
+a.yui-button {
+  &.primary {
+    .button-primary();
+  }
+
+  &.danger {
+    .button-danger();
+  }
+
+  &.link-button {
+    .button-link();
+  }
+
+  &.disabled {
+    .button-disabled();
+  }
+}
+
+// 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.35em solid;
+    border-right: 0.35em solid transparent;
+    border-bottom: 0;
+    border-left: 0.35em solid transparent;
+  }
+}
+
+.yui-button.yui-menu-button.yui-menu-button-active button, .yui-button.yui-split-button.yui-split-button-active button {
+  &::after {
+    border-bottom: 0.35em solid;
+    border-top: 0;
+  }
+}
+
+// Icon buttons
+
+.yui-button.icon-button button, a.yui-button.icon-button:link, a.yui-button.icon-button:visited {
+  padding: 0.25rem;
+  min-width: 2rem;
+  height: 2rem;
+
+  .svg-icon, i {
+    width: 1rem;
+    height: 1rem;
+    font-size: 1rem;
+  }
+
+  .button-link();
+}
+
+.yui-button.icon-button.large-button button, a.yui-button.icon-button.large-button {
+  min-width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.625rem;
+
+  .svg-icon, i {
+    width: 1.25rem;
+    height: 1.25rem;
+    font-size: 1.25rem;
+  }
+}
diff --git a/war/src/main/less/modules/buttons-temp.less b/war/src/main/less/modules/buttons-temp.less
deleted file mode 100644
index ac8fd04b0f..0000000000
--- a/war/src/main/less/modules/buttons-temp.less
+++ /dev/null
@@ -1,187 +0,0 @@
-.jenkins-button {
-  appearance: none;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  outline: none;
-  margin: 0;
-  padding: 0.5rem 0.8rem;
-  font-size: 0.8rem;
-  font-weight: 500;
-  text-decoration: none !important;
-  background: transparent;
-  color: var(--text-color) !important;
-  z-index: 0;
-  border-radius: 6px;
-  cursor: pointer;
-  min-height: 36px;
-  text-shadow: 0 1px 0 var(--background);
-  white-space: nowrap;
-  gap: 1ch;
-
-  &::before, &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    z-index: -1;
-    opacity: 0.075;
-    border-radius: inherit;
-    transition: 0.2s ease;
-  }
-
-  &::before {
-    background: currentColor;
-  }
-
-  &::after {
-    box-shadow: inset 0 -1px 0 rgb(125, 125, 125), 0 0 0 10px transparent;
-  }
-
-  &:hover {
-    &::before {
-      opacity: 0.1125;
-    }
-  }
-
-  &:active, &:focus {
-    &::before {
-      opacity: 0.15;
-    }
-
-    &::after {
-      box-shadow: inset 0 -1px 0 rgb(125, 125, 125), 0 0 0 5px currentColor;
-    }
-  }
-
-  svg {
-    width: 16px;
-    height: 16px;
-  }
-}
-
-.jenkins-button--primary {
-  color: var(--button-color--primary) !important;
-  font-weight: 600;
-  text-shadow: none;
-
-  &::before, &::after {
-    color: var(--primary);
-  }
-
-  &::before {
-    opacity: 1;
-  }
-
-  &::after {
-    opacity: 0.2;
-  }
-
-  &:hover {
-    &::before {
-      opacity: 0.9;
-    }
-  }
-
-  &:active, &:focus {
-    &::before {
-      opacity: 0.8;
-    }
-  }
-}
-
-.jenkins-button--transparent {
-  &::before {
-    opacity: 0;
-  }
-
-  &::after {
-    color: transparent;
-    box-shadow: inset 0 -1px 0 transparent, 0 0 0 10px transparent;
-  }
-
-  &:hover, &:active, &:focus {
-    &::after {
-      color: currentColor;
-    }
-  }
-}
-
-@variants: {
-  destructive: var(--red);
-}
-
-each(@variants, {
-  .jenkins-button--@{key} {
-    color: @value !important;
-  }
-});
-
-.jenkins-validate-button__container {
-  &__status {
-    .validation-error-area {
-      min-height: 36px !important;
-    }
-  }
-
-  .validation-error-area--visible {
-    margin-top: 0;
-  }
-
-  & > span {
-    float: right;
-  }
-}
-
-.jenkins-copy-button {
-  .jenkins-copy-button__icon {
-    position: relative;
-    width: 0.9rem;
-    height: 1.125rem;
-    transition: var(--standard-transition);
-
-    &::before,
-    &::after {
-      content: "";
-      position: absolute;
-      width: 75%;
-      height: 75%;
-      border: 0.1rem solid currentColor;
-      border-radius: 0.2rem;
-      transition: var(--standard-transition);
-    }
-
-    &::before {
-      top: 4%;
-      left: 1%;
-      clip-path: polygon(100% 0, 100% 22.5%, 22.5% 22.5%, 32.5% 100%, 0 100%, 0 0);
-    }
-
-    &::after {
-      bottom: 4%;
-      right: 1%;
-    }
-  }
-
-  &:hover {
-    .jenkins-copy-button__icon {
-      &::before {
-        transform: translate(7%, 4.5%);
-      }
-
-      &::after {
-        transform: translate(-7%, -4.5%);
-      }
-    }
-  }
-
-  &:active {
-    .jenkins-copy-button__icon {
-      transform: scale(0.85);
-    }
-  }
-}
diff --git a/war/src/main/less/modules/buttons.less b/war/src/main/less/modules/buttons.less
index 3548036857..0af9bedb78 100644
--- a/war/src/main/less/modules/buttons.less
+++ b/war/src/main/less/modules/buttons.less
@@ -1,288 +1,165 @@
-@import "../abstracts/theme.less";
+.jenkins-button {
+  --item-background--hover: var(--button-background--hover);
+  --item-background--active: var(--button-background--active);
+  --item-box-shadow--focus: var(--button-box-shadow--focus);
 
-// Button: variant mixins
-
-.button-danger() {
-  color: var(--btn-text-color);
-  background-color: var(--danger);
-  border-color: var(--danger);
-
-  &:hover, &:focus {
-    color: var(--btn-text-color);
-    background-color: var(--danger-hover);
-    border-color: var(--danger-hover);
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 0.2rem var(--focus-btn-danger);
-  }
-
-  &:active {
-    color: var(--btn-text-color);
-    background-color: var(--danger-active);
-    border-color: var(--danger-active);
-  }
-}
-
-.button-primary() {
-  color: var(--btn-text-color);
-  background-color: var(--btn-primary-bg);
-  border-color: var(--btn-primary-bg);
-
-  &:hover, &:focus {
-    color: var(--btn-text-color);
-    background-color: var(--btn-primary-bg-hover);
-    border-color: var(--btn-primary-bg-hover);
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 0.2rem var(--focus-btn-primary);
-  }
-
-  &:active {
-    color: var(--btn-text-color);
-    background-color: var(--btn-primary-bg-active);
-    border-color: var(--btn-primary-bg-active);
-  }
-}
-
-.button-secondary() {
-  color: var(--btn-secondary-color);
-  border-color: var(--btn-secondary-border);
-  background-color: var(--btn-secondary-bg);
-
-  &:focus {
-    color: var(--btn-secondary-color--focus);
-    border-color: var(--btn-secondary-border--focus);
-    background-color: var(--btn-secondary-bg--focus);
-    box-shadow: 0 0 0 0.2rem var(--focus-btn-secondary);
-  }
-
-  // Hover MUST be AFTER the focus declaration for this outlined button.
-  // Otherwise, the hover styles will not be applied when hovering over a focused element
-  &:hover {
-    color: var(--btn-secondary-color--hover);
-    border-color: var(--btn-secondary-border--hover);
-    background-color: var(--btn-secondary-bg--hover);
-  }
-
-  &:active {
-    color: var(--btn-secondary-color--active);
-    border-color: var(--btn-secondary-border--active);
-    background-color: var(--btn-secondary-bg--active);
-  }
-}
-
-.button-link {
-  color: var(--primary);
-  background-color: transparent;
-  border-color: transparent;
-  font-weight: var(--btn-link-font-weight);
-
-  &:hover, &:focus {
-    color: var(--btn-link-color--hover);
-    background-color: var(--btn-link-bg--hover);
-    border-color: var(--btn-link-bg--hover);
-  }
-
-  &:focus {
-    box-shadow: none;
-  }
-
-  &:active {
-    color: var(--btn-link-color--active);
-    background-color: var(--btn-link-bg--active);
-    border-color: var(--btn-link-bg--active);
-  }
-}
-
-.button-disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-// 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"], a.yui-button:link, a.yui-button:visited {
-  box-sizing: border-box;
-  // vertical padding:
-  // 0.375rem == 6px == 32px (target height) - 4px (borders) - 16 (line) / 2
-  padding: 0.375rem 1rem;
-  margin-right: 0.25rem;
-  margin-left: 0.25rem;
-  min-width: 4.5rem;
-  min-height: 2rem;
-  cursor: pointer;
-  user-select: none;
-  font-size: var(--btn-font-size);
-  line-height: var(--btn-line-height);
-  font-weight: var(--btn-font-weight);
-  text-align: center;
-  vertical-align: middle;
-  text-decoration: none;
-  border: 2px solid;
-  border-radius: 4px;
-  transition:
-  color 0.15s ease-in-out,
-  background-color 0.15s ease-in-out,
-  border-color 0.15s ease-in-out;
-
-  .button-secondary();
-
-  &:focus {
-    outline: none;
-  }
+  .item();
 
+  appearance: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0.5rem 0.85rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  text-decoration: none !important;
+  background: transparent;
+  color: var(--text-color) !important;
+  border-radius: 0.66rem;
+  cursor: pointer;
+  min-height: 36px;
+  white-space: nowrap;
+  gap: 1ch;
 
-  & > span {
-    display: inline-block;
+  &::before {
+    background: var(--button-background);
   }
 
-  .svg-icon, i {
-    width: 1rem;
-    height: 1rem;
-    font-size: 1rem;
-    vertical-align: top;
-    flex-shrink: 1;
+  svg {
+    width: 1.1rem;
+    height: 1.1rem;
   }
 
-  .leading-icon {
-    display: flex;
-    margin-right: 0.25rem;
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+    filter: saturate(0.6);
+  }
+}
 
-    svg {
-      width: 16px;
-      height: 16px;
+.jenkins-button--primary {
+  color: var(--button-color--primary) !important;
+  font-weight: 600;
+
+  &::before {
+    background: var(--primary) !important;
+  }
+
+  &::after {
+    box-shadow: 0 0 0 0.66rem var(--primary);
+    opacity: 0;
+  }
+
+  &:hover {
+    &::before {
+      opacity: 0.9;
     }
   }
 
-  .trailing-icon {
-    margin-left: 0.25rem;
+  &:active,
+  &:focus {
+    &::before {
+      opacity: 0.8;
+    }
+
+    &::after {
+      box-shadow: 0 0 0 0.33rem var(--primary);
+      opacity: 0.2;
+    }
   }
 }
 
-.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, a.yui-button.large-button {
-  // vertical padding
-  // 0.5rem == 8px == 40px (target height) - 4px (borders) - 20 (line) / 2
-  padding: 0.5rem 1rem;
-  min-width: 6.5rem;
-  min-height: 2.5rem;
-  font-size: var(--btn-large-font-size);
-  line-height: var(--btn-large-line-height);
-
-  .svg-icon, i {
-    vertical-align: top;
-    height: 1.25rem;
-    width: 1.25rem;
-    font-size: 1.25rem;
+.jenkins-button--tertiary {
+  &::before {
+    background: 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-disabled();
-}
+// Support for custom colors
+// Modifier classes must include 'color' in name to work
+.jenkins-button[class*="color"] {
+  background: transparent;
+  color: var(--color) !important;
 
-a.yui-button {
-  &.primary {
-    .button-primary();
+  &::before {
+    background: currentColor !important;
+    opacity: 0.1;
   }
 
-  &.danger {
-    .button-danger();
-  }
-
-  &.link-button {
-    .button-link();
-  }
-
-  &.disabled {
-    .button-disabled();
-  }
-}
-
-// 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.35em solid;
-    border-right: 0.35em solid transparent;
-    border-bottom: 0;
-    border-left: 0.35em solid transparent;
+    box-shadow: 0 0 0 0.66rem currentColor;
+    opacity: 0;
+  }
+
+  &:hover {
+    &::before {
+      opacity: 0.15;
+    }
+  }
+
+  &:active,
+  &:focus {
+    &::before {
+      opacity: 0.2;
+    }
+
+    &::after {
+      box-shadow: 0 0 0 0.33rem currentColor;
+      opacity: 0.1;
+    }
   }
 }
 
-.yui-button.yui-menu-button.yui-menu-button-active button, .yui-button.yui-split-button.yui-split-button-active button {
+.jenkins-button--primary[class*="color"] {
+  background: transparent;
+  color: var(--background) !important;
+
+  &::before {
+    background: var(--color) !important;
+    opacity: 1;
+  }
+
   &::after {
-    border-bottom: 0.35em solid;
-    border-top: 0;
+    box-shadow: 0 0 0 0.66rem var(--color);
+    opacity: 0;
+  }
+
+  &:hover {
+    &::before {
+      opacity: 0.9;
+    }
+  }
+
+  &:active,
+  &:focus {
+    &::before {
+      opacity: 0.8;
+    }
+
+    &::after {
+      box-shadow: 0 0 0 0.33rem var(--color);
+      opacity: 0.3;
+    }
   }
 }
 
-// Icon buttons
-
-.yui-button.icon-button button, a.yui-button.icon-button:link, a.yui-button.icon-button:visited {
-  padding: 0.25rem;
-  min-width: 2rem;
-  height: 2rem;
-
-  .svg-icon, i {
-    width: 1rem;
-    height: 1rem;
-    font-size: 1rem;
-  }
-
-  .button-link();
-}
-
-.yui-button.icon-button.large-button button, a.yui-button.icon-button.large-button {
-  min-width: 2.5rem;
-  height: 2.5rem;
-  padding: 0.625rem;
-
-  .svg-icon, i {
-    width: 1.25rem;
-    height: 1.25rem;
-    font-size: 1.25rem;
+.jenkins-button--tertiary[class*="color"] {
+  &::before {
+    opacity: 0;
   }
 }
 
+// Additional button related classes
 .jenkins-buttons-row {
   display: flex;
   align-items: center;
 
   .jenkins-button {
     margin-left: 0 !important;
-    margin-right: 1rem !important;
+    margin-right: 0.5rem !important;
   }
 
   .yui-button {
@@ -299,7 +176,7 @@ a.yui-button {
     justify-content: flex-end;
 
     .jenkins-button {
-      margin-left: 1rem !important;
+      margin-left: 0.5rem !important;
       margin-right: 0 !important;
     }
 
@@ -314,3 +191,68 @@ a.yui-button {
     }
   }
 }
+
+.jenkins-copy-button {
+  .jenkins-copy-button__icon {
+    position: relative;
+    width: 0.9rem;
+    height: 1.125rem;
+    transition: var(--standard-transition);
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 75%;
+      height: 75%;
+      border: 0.1rem solid currentColor;
+      border-radius: 0.2rem;
+      transition: var(--standard-transition);
+    }
+
+    &::before {
+      top: 4%;
+      left: 1%;
+      clip-path: polygon(100% 0, 100% 22.5%, 22.5% 22.5%, 32.5% 100%, 0 100%, 0 0);
+    }
+
+    &::after {
+      bottom: 4%;
+      right: 1%;
+    }
+  }
+
+  &:hover {
+    .jenkins-copy-button__icon {
+      &::before {
+        transform: translate(7%, 4.5%);
+      }
+
+      &::after {
+        transform: translate(-7%, -4.5%);
+      }
+    }
+  }
+
+  &:active {
+    .jenkins-copy-button__icon {
+      transform: scale(0.85);
+    }
+  }
+}
+
+.jenkins-validate-button__container {
+  &__status {
+    .validation-error-area {
+      min-height: 36px !important;
+    }
+  }
+
+  .validation-error-area--visible {
+    margin-top: 0;
+  }
+
+  & > span {
+    float: right;
+  }
+}
diff --git a/war/src/main/less/modules/icon-size.less b/war/src/main/less/modules/icon-size.less
deleted file mode 100644
index b7ff8d1d5d..0000000000
--- a/war/src/main/less/modules/icon-size.less
+++ /dev/null
@@ -1,47 +0,0 @@
-.jenkins-icon-size {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 2rem 0;
-
-  &__items {
-    display: flex;
-    align-items: center;
-
-    ol {
-      margin: 0;
-      padding: 0;
-      list-style-type: none;
-      display: flex;
-      align-items: center;
-    }
-
-    li {
-      width: 32px;
-      margin-right: 0.2rem;
-
-      .yui-button {
-        margin: 0 !important;
-        padding: 0 !important;
-        width: 32px !important;
-        height: 32px !important;
-        min-width: 0 !important;
-      }
-    }
-
-    .jenkins-icon-size__items-item {
-      height: 32px;
-      width: 32px;
-      border-radius: 4px;
-      line-height: 32px;
-      background: var(--btn-link-bg--hover);
-      text-align: center;
-      font-weight: var(--btn-link-font-weight);
-      font-size: var(--btn-font-size);
-    }
-
-    & > * {
-      margin-right: 0.5rem;
-    }
-  }
-}
diff --git a/war/src/main/less/pages/dashboard.less b/war/src/main/less/pages/dashboard.less
new file mode 100644
index 0000000000..59b07c6084
--- /dev/null
+++ b/war/src/main/less/pages/dashboard.less
@@ -0,0 +1,65 @@
+@min-button-size: 36px;
+
+.jenkins-icon-size {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 2rem 0;
+
+  &__items {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    ol {
+      position: relative;
+      display: flex;
+      align-items: center;
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+      gap: 0.25rem;
+
+      &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: 0.8rem;
+        background: var(--button-background);
+        opacity: 0;
+        transition: var(--standard-transition);
+      }
+
+      &:hover {
+        &::before {
+          inset: -0.2rem;
+          opacity: 1;
+        }
+      }
+    }
+
+    li {
+      .jenkins-button {
+        margin: 0 !important;
+        padding: 0 !important;
+        min-width: 0 !important;
+        aspect-ratio: 1;
+        height: @min-button-size;
+      }
+    }
+
+    .jenkins-icon-size__items-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      aspect-ratio: 1;
+      height: @min-button-size;
+      border-radius: 10px;
+      font-weight: var(--btn-link-font-weight);
+      font-size: var(--btn-font-size);
+      background: var(--button-background--hover);
+      cursor: default;
+    }
+  }
+}
diff --git a/war/src/main/less/simple-page.less b/war/src/main/less/simple-page.less
index 78deef3441..efda78fe13 100644
--- a/war/src/main/less/simple-page.less
+++ b/war/src/main/less/simple-page.less
@@ -28,7 +28,7 @@
 @import "./form/checkbox";
 @import "./form/input";
 @import "./form/layout";
-@import "./modules/buttons-temp";
+@import "./modules/buttons";
 
 body {
   background: var(--background);
diff --git a/war/src/main/less/styles.less b/war/src/main/less/styles.less
index 11ebfb911e..9e0529e95b 100644
--- a/war/src/main/less/styles.less
+++ b/war/src/main/less/styles.less
@@ -20,9 +20,8 @@
 @import "./modules/badges";
 @import "./modules/breadcrumbs";
 @import "./modules/buttons";
-@import "./modules/buttons-temp";
+@import "./modules/buttons-deprecated";
 @import "./modules/content-blocks";
-@import "./modules/icon-size";
 @import "./modules/icons";
 @import "./modules/page-footer";
 @import "./modules/page-header";
@@ -37,6 +36,7 @@
 @import "./modules/tabs";
 @import "./modules/tooltips";
 @import "./pages/about";
+@import "./pages/dashboard";
 @import "./pages/manage-jenkins";
 @import "./pages/plugin-manager";
 @import "./pages/setupWizardFirstUser";