Improve accessibility and clean up components (#10198)

src/main/js/widgets/add/addform.scss

@@ -183,13 +183,12 @@
   }
 
   li {
-    @include mixins.item;
+    @include mixins.item($border: false);
 
     -webkit-touch-callout: none;
     user-select: none;
     padding: 0.75rem 1rem;
     min-height: 68px;
-    cursor: pointer;
     display: grid;
     grid-template-columns: auto 1fr;
     gap: 0.25rem 1rem;

src/main/scss/abstracts/_mixins.scss

@@ -56,11 +56,17 @@
   }
 }
 
-@mixin item {
+@mixin item($border: true) {
   position: relative;
+  appearance: none;
   z-index: 0;
   text-decoration: none !important;
-  border-radius: 0.66rem;
+  font-weight: normal;
+  border-radius: var(--form-input-border-radius);
+  cursor: pointer;
+  background: transparent;
+  outline: none;
+  border: none;
 
   &::before,
   &::after {
@@ -74,11 +80,12 @@
   }
 
   &::before {
-    background-color: transparent;
+    background-color: var(--item-background);
+    border: var(--jenkins-border--subtle);
   }
 
   &::after {
-    box-shadow: 0 0 0 0.66rem transparent;
+    box-shadow: 0 0 0 0.5rem transparent;
   }
 
   &:focus-visible {
@@ -102,7 +109,7 @@
       }
 
       &::after {
-        box-shadow: 0 0 0 0.33rem var(--item-box-shadow--focus);
+        box-shadow: 0 0 0 0.25rem var(--item-box-shadow--focus);
       }
     }
 
@@ -113,4 +120,12 @@
       }
     }
   }
+
+  @if $border == false {
+    &:not(:hover, &:active, &:focus) {
+      &::before {
+        border-color: transparent;
+      }
+    }
+  }
 }

src/main/scss/abstracts/_theme.scss

@@ -80,6 +80,13 @@ $semantics: (
     from var(--text-color) 96.8% 0.005 h / 0.8
   );
 
+  // App bar
+  --bottom-app-bar-shadow: color-mix(
+    in sRGB,
+    var(--text-color-secondary) 7.5%,
+    transparent
+  );
+
   // Alert call outs
   --alert-success-text-color: var(--success-color);
   --alert-success-bg-color: color-mix(
@@ -125,8 +132,41 @@ $semantics: (
   // Typography
   --text-color-secondary: var(--secondary);
 
+  // Borders
+  --jenkins-border-width: 1.5px;
+  --jenkins-border-color: color-mix(
+    in sRGB,
+    var(--text-color-secondary) 12%,
+    var(--card-background)
+  );
+  --jenkins-border-color--subtle: color-mix(
+    in sRGB,
+    currentColor 1.5%,
+    transparent
+  );
+
+  /* This is a harsher border - for dividers, content blocks and more */
+  --jenkins-border: var(--jenkins-border-width) solid
+    var(--jenkins-border-color);
+
+  /* This is a subtle border - for increasing contrast on elements, such as buttons, menu and more */
+  --jenkins-border--subtle: var(--jenkins-border-width) solid
+    var(--jenkins-border-color--subtle);
+  --jenkins-border--subtle-shadow: 0 0 0 1.5px
+    var(--jenkins-border-color--subtle);
+
+  @media (resolution <= 1x) {
+    --jenkins-border-width: 2px;
+  }
+
+  @media (prefers-contrast: more) {
+    --focus-input-border: var(--text-color);
+    --jenkins-border-color: var(--text-color);
+    --jenkins-border-color--subtle: var(--text-color);
+  }
+
   // Table
-  --table-background: oklch(from var(--text-color-secondary) l c h / 0.1);
+  --table-background: oklch(from var(--text-color-secondary) l c h / 0.075);
   --table-header-foreground: var(--text-color);
   --table-body-background: var(--background);
   --table-body-foreground: var(--text-color);
@@ -158,7 +198,8 @@ $semantics: (
   // Command Palette
   --command-palette-results-backdrop-filter: contrast(0.7) brightness(1.5)
     saturate(1.4) blur(20px);
-  --command-palette-inset-shadow: inset 0 0 2px 2px rgb(255 255 255 / 0.1);
+  --command-palette-inset-shadow: inset 0 0 2px 2px rgb(255 255 255 / 0.1),
+    var(--jenkins-border--subtle-shadow);
 
   ::backdrop {
     --command-palette-backdrop-background: radial-gradient(
@@ -171,21 +212,23 @@ $semantics: (
   // Tooltips
   --tooltip-backdrop-filter: saturate(2) blur(20px);
   --tooltip-color: var(--text-color);
-  --tooltip-box-shadow: 0 0 8px 2px rgb(0 0 30 / 0.05),
+  --tooltip-box-shadow: 0 0 8px 2px rgb(0 0 50 / 0.05),
-    0 0 1px 1px rgb(0 0 20 / 0.025), 0 10px 20px rgb(0 0 20 / 0.15);
+    var(--jenkins-border--subtle-shadow), 0 10px 50px rgb(0 0 20 / 0.1);
 
   // Dropdowns
   --dropdown-backdrop-filter: saturate(1.5) blur(20px);
-  --dropdown-box-shadow: 0 10px 30px rgb(0 0 20 / 0.2),
+  --dropdown-box-shadow: var(--jenkins-border--subtle-shadow),
-    0 2px 10px rgb(0 0 20 / 0.05), inset 0 -1px 2px rgb(255 255 255 / 0.025);
+    0 10px 30px rgb(0 0 20 / 0.1), 0 2px 10px rgb(0 0 20 / 0.05),
+    inset 0 -1px 2px rgb(255 255 255 / 0.025);
 
   // Dialogs
   ::backdrop {
     --dialog-backdrop-background: hsl(240 10% 20% / 0.8);
   }
 
-  --dialog-box-shadow: 0 10px 40px rgb(0 0 20 / 0.15),
+  --dialog-box-shadow: var(--jenkins-border--subtle-shadow),
-    0 2px 15px rgb(0 0 20 / 0.05), inset 0 0 2px 2px rgb(255 255 255 / 0.025);
+    0 10px 40px rgb(0 0 20 / 0.15), 0 2px 15px rgb(0 0 20 / 0.05),
+    inset 0 0 2px 2px rgb(255 255 255 / 0.025);
 
   // Dark link
   --link-dark-color: var(--text-color);
@@ -219,12 +262,20 @@ $semantics: (
   --card-border-color--active: oklch(
     from var(--text-color-secondary) l c h / 0.5
   );
-  --card-border-width: 2px;
+  --card-border-width: var(--jenkins-border-width);
+
+  @media (prefers-contrast: more) {
+    --card-border-color: var(--text-color);
+  }
 
   // Tab bar
   --tabs-background: oklch(from var(--text-color-secondary) l c h / 0.1);
   --tabs-item-background: transparent;
-  --tabs-item-foreground: var(--text-color);
+  --tabs-item-foreground: color-mix(
+    in sRGB,
+    var(--text-color-secondary),
+    var(--text-color)
+  );
   --tabs-item-background--hover: rgb(0 0 0 / 0.05);
   --tabs-item-foreground--hover: var(--text-color);
   --tabs-item-background--active: rgb(0 0 0 / 0.1);
@@ -268,14 +319,21 @@ $semantics: (
   }
 
   --form-label-font-weight: var(--font-bold-weight);
-  --form-input-padding: 0.625rem;
+  --form-input-padding: 0.5rem 0.625rem;
   --form-input-border-radius: 0.625rem;
-  --form-input-glow: 0 0 0 10px transparent;
+  --form-input-glow: 0 0 0 0.5rem transparent;
-  --form-input-glow--focus: 0 0 0 5px var(--focus-input-glow);
+  --form-input-glow--focus: 0 0 0 0.25rem var(--focus-input-glow);
-  --pre-background: rgb(0 0 0 / 0.05);
+  --pre-background: var(--button-background);
   --pre-color: var(--text-color);
   --selection-color: oklch(from var(--accent-color) l c h / 0.2);
 
+  @media (prefers-contrast: more) {
+    --input-border: var(--text-color) !important;
+    --input-border-hover: var(--text-color) !important;
+    --form-input-glow--focus: 0 0 0 4px
+      color-mix(in sRGB, var(--text-color), transparent);
+  }
+
   // Animations
   --standard-transition: 0.3s ease;
   --elastic-transition: 0.3s cubic-bezier(0, 0.68, 0.5, 1.5);

src/main/scss/base/_style.scss

@@ -152,6 +152,7 @@ pre {
   margin: 0 0 var(--section-padding);
   padding: 0.8rem 1rem;
   border-radius: var(--form-input-border-radius);
+  border: var(--jenkins-border--subtle);
   background-color: var(--pre-background);
   color: var(--pre-color);
   font-family: var(--font-family-mono);
@@ -290,21 +291,13 @@ pre.console {
   padding: 1rem;
   margin: 1rem 0;
   word-break: break-word;
-  border-radius: 6px;
+  border-radius: var(--form-input-border-radius);
+  background-color: var(--button-background);
+  border: var(--jenkins-border--subtle);
   z-index: 0;
 
   --section-padding: 0.8rem;
 
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--text-color);
-    opacity: 0.05;
-    z-index: -1;
-    border-radius: inherit;
-  }
-
   p:first-of-type {
     margin-top: 0;
   }
@@ -536,7 +529,7 @@ table.fingerprint-in-build td {
     top: 0;
     left: 10px;
     bottom: 0;
-    width: 2px;
+    width: var(--jenkins-border-width);
     background: var(--input-border);
     border-radius: 2px;
     transition: var(--standard-transition);

src/main/scss/components/_alert.scss

@@ -2,8 +2,8 @@
 .jenkins-alert {
   font-size: var(--font-size-sm);
   padding: 15px;
-  margin-bottom: 20px;
+  margin-bottom: var(--section-padding);
-  border: 1px solid transparent;
+  border: var(--jenkins-border-width) solid transparent;
   border-radius: var(--form-input-border-radius);
 
   strong {
@@ -52,4 +52,8 @@
       color: var(--alert-danger-text-color);
     }
   }
+
+  @media (prefers-contrast: more) {
+    border-color: var(--text-color);
+  }
 }

src/main/scss/components/_app-bar.scss

@@ -151,7 +151,7 @@
     top: -30px;
     left: 0;
     right: 0;
-    background: linear-gradient(transparent, rgba(#556, 0.075) 110%);
+    background: linear-gradient(transparent, var(--bottom-app-bar-shadow) 110%);
     max-width: 100%;
     height: 30px;
     opacity: 0;

src/main/scss/components/_breadcrumbs.scss

@@ -30,7 +30,7 @@
       padding: 0.2rem 0.4rem;
 
       & > a {
-        @include mixins.item;
+        @include mixins.item($border: false);
 
         display: inline-flex;
         align-items: center;
@@ -40,7 +40,6 @@
         margin: 0;
         padding: 0;
         color: var(--text-color);
-        text-decoration: none;
         margin-right: 0 !important;
         transition: var(--standard-transition);
 

src/main/scss/components/_buttons.scss

@@ -1,34 +1,24 @@
 @use "../abstracts/mixins";
 
 .jenkins-button {
+  --item-background: var(--button-background);
   --item-background--hover: var(--button-background--hover);
   --item-background--active: var(--button-background--active);
   --item-box-shadow--focus: var(--button-box-shadow--focus);
 
   @include mixins.item;
 
-  appearance: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: none;
-  outline: none;
   margin: 0;
-  padding: 0.5rem 0.9rem;
+  padding: 0.5rem 1rem;
   font-size: var(--font-size-sm);
-  font-weight: normal;
-  text-decoration: none !important;
-  background: transparent;
   color: var(--text-color) !important;
-  cursor: pointer;
+  min-height: 2.375rem;
-  min-height: 2.25rem;
   white-space: nowrap;
   gap: 1ch;
 
-  &::before {
-    background: var(--button-background);
-  }
-
   svg {
     width: 1.125rem;
     height: 1.125rem;
@@ -42,118 +32,41 @@
 }
 
 .jenkins-button--primary {
+  --button-background: oklch(from var(--accent-color) l c h);
+  --button-background--hover: oklch(from var(--accent-color) l c h / 0.9);
+  --button-background--active: oklch(from var(--accent-color) l c h / 0.8);
+  --button-box-shadow--focus: oklch(from var(--accent-color) l c h / 0.4);
+
   color: var(--button-color--primary) !important;
-
-  &::before {
-    background: var(--accent-color) !important;
-  }
-
-  &::after {
-    box-shadow: 0 0 0 0.66rem var(--accent-color);
-    opacity: 0;
-  }
-
-  &:not(:disabled) {
-    &:hover {
-      &::before {
-        opacity: 0.9;
-      }
-    }
-
-    &:active,
-    &:focus-visible {
-      &::before {
-        opacity: 0.8;
-      }
-
-      &::after {
-        box-shadow: 0 0 0 0.33rem var(--accent-color);
-        opacity: 0.2;
-      }
-    }
-  }
-}
-
-.jenkins-button--tertiary {
-  &::before {
-    background: transparent;
-  }
 }
 
 // Support for custom colors
 // Modifier classes must include 'color' in name to work
 .jenkins-button[class*="color"] {
-  background: transparent;
+  --button-background: oklch(from currentColor l c h / 0.1);
+  --button-background--hover: oklch(from currentColor l c h / 0.15);
+  --button-background--active: oklch(from currentColor l c h / 0.25);
+  --button-box-shadow--focus: oklch(from currentColor l c h / 0.125);
+
   color: var(--color) !important;
-
-  &::before {
-    background: currentColor !important;
-    opacity: 0.1;
-  }
-
-  &::after {
-    box-shadow: 0 0 0 0.66rem currentColor;
-    opacity: 0;
-  }
-
-  &:not(:disabled) {
-    &:hover {
-      &::before {
-        opacity: 0.15;
-      }
-    }
-
-    &:active {
-      &::before {
-        opacity: 0.2;
-      }
-
-      &::after {
-        box-shadow: 0 0 0 0.33rem currentColor;
-        opacity: 0.1;
-      }
-    }
-  }
 }
 
 .jenkins-button--primary[class*="color"] {
-  background: transparent;
+  --button-background: oklch(from var(--color) l c h);
+  --button-background--hover: oklch(from var(--color) l c h / 0.9);
+  --button-background--active: oklch(from var(--color) l c h / 0.8);
+  --button-box-shadow--focus: oklch(from var(--color) l c h / 0.4);
+
   color: var(--background) !important;
-
-  &::before {
-    background: var(--color) !important;
-    opacity: 1;
-  }
-
-  &::after {
-    box-shadow: 0 0 0 0.66rem var(--color);
-    opacity: 0;
-  }
-
-  &:not(:disabled) {
-    &:hover {
-      &::before {
-        opacity: 0.9;
-      }
-    }
-
-    &:active,
-    &:focus-visible {
-      &::before {
-        opacity: 0.8;
-      }
-
-      &::after {
-        box-shadow: 0 0 0 0.33rem var(--color);
-        opacity: 0.3;
-      }
-    }
-  }
 }
 
-.jenkins-button--tertiary[class*="color"] {
+.jenkins-button--tertiary {
-  &::before {
+  --button-background: transparent !important;
-    opacity: 0;
+
+  &:not(:hover, &:active, &:focus) {
+    &::before {
+      border-color: transparent;
+    }
   }
 }
 
@@ -249,7 +162,7 @@
       in sRGB,
       var(--success-color) 10%,
       transparent
-    );
+    ) !important;
     --button-background--hover: var(--button-background);
     --button-background--active: var(--button-background);
 
@@ -352,13 +265,13 @@ $jenkins-split-button-border-radius: 0.2rem;
 }
 
 .stop-button-link {
+  --item-background: color-mix(in sRGB, var(--red) 15%, transparent);
   --item-background--hover: color-mix(in sRGB, var(--red) 20%, transparent);
   --item-background--active: color-mix(in sRGB, var(--red) 25%, transparent);
   --item-box-shadow--focus: transparent;
 
   @include mixins.item;
 
-  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -366,10 +279,6 @@ $jenkins-split-button-border-radius: 0.2rem;
   height: 1rem;
   border-radius: 0.25rem;
 
-  &::before {
-    background: color-mix(in sRGB, var(--red) 15%, transparent);
-  }
-
   svg {
     width: 87.5%;
     height: 87.5%;

src/main/scss/components/_cards.scss

@@ -27,14 +27,22 @@ $card-padding: 1rem;
   }
 
   &:not(:hover) {
-    .jenkins-card__unveil {
+    .jenkins-card__unveil,
-      color: var(--text-color-secondary) !important;
+    .jenkins-card__reveal {
+      color: var(--text-color-secondary);
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .jenkins-card__unveil,
+    .jenkins-card__reveal {
+      color: var(--text-color) !important;
     }
   }
 
   &:hover {
     .jenkins-card__reveal {
-      color: var(--text-color) !important;
+      color: var(--text-color);
     }
   }
 
@@ -42,7 +50,6 @@ $card-padding: 1rem;
     display: flex;
     flex-direction: column;
     padding: 0 $card-padding $card-padding;
-    color: var(--text-color-secondary);
 
     &:empty {
       display: none;
@@ -69,7 +76,6 @@ $card-padding: 1rem;
     width: 26px;
     height: 26px;
     border-radius: 0.33rem;
-    color: var(--text-color-secondary) !important;
     transition:
       scale var(--standard-transition),
       opacity var(--standard-transition);

src/main/scss/components/_command-palette.scss

@@ -86,6 +86,7 @@
     max-width: unset;
 
     input {
+      padding: 0 0.5rem 0 45px;
       background: transparent !important;
 
       --input-border: transparent;
@@ -136,7 +137,7 @@
     }
 
     &__item {
-      @include mixins.item;
+      @include mixins.item($border: false);
 
       --item-background--hover: color-mix(
         in sRGB,
@@ -152,19 +153,15 @@
       display: flex;
       align-items: center;
       justify-content: flex-start;
-      background: transparent;
       padding: 0.75rem;
       border-radius: 0.5rem;
-      cursor: pointer;
       color: var(--text-color) !important;
       transition: var(--standard-transition);
-      box-shadow: 0 0 0 10px transparent;
-      border: none;
-      outline: none;
 
       &--hover {
         &::before {
           background-color: var(--item-background--hover);
+          border: var(--jenkins-border--subtle) !important;
         }
       }
 

src/main/scss/components/_dropdowns.scss

@@ -1,9 +1,10 @@
 @use "../abstracts/mixins";
 
-$dropdown-padding: 0.4rem;
+$dropdown-border-radius: 1rem;
+$dropdown-padding: 0.375rem;
 
 .tippy-box[data-theme~="dropdown"] {
-  border-radius: 15px;
+  border-radius: $dropdown-border-radius;
   box-shadow: var(--dropdown-box-shadow);
   outline: none !important;
   background: color-mix(in sRGB, var(--background) 85%, transparent);
@@ -76,22 +77,15 @@ $dropdown-padding: 0.4rem;
 
   &__separator {
     position: relative;
-    height: 0.125rem;
+    height: var(--jenkins-border-width);
     margin: $dropdown-padding calc($dropdown-padding * -1);
     border: none;
-
+    background-color: var(--jenkins-border-color);
-    &::before {
-      content: "";
-      position: absolute;
-      inset: 0;
-      background-color: var(--text-color-secondary);
-      opacity: 0.1;
-    }
   }
 
   &__heading {
     color: var(--text-color-secondary) !important;
-    margin: $dropdown-padding 0.55rem;
+    margin: $dropdown-padding 0.65rem;
     font-size: 0.8125rem;
     font-weight: var(--font-bold-weight);
     opacity: 0.8;
@@ -123,7 +117,7 @@ $dropdown-padding: 0.4rem;
     --item-background--active: var(--button-background--active);
     --item-box-shadow--focus: var(--button-box-shadow--focus);
 
-    @include mixins.item;
+    @include mixins.item($border: false);
 
     appearance: none;
     display: inline-flex;
@@ -138,7 +132,7 @@ $dropdown-padding: 0.4rem;
     text-decoration: none !important;
     background: transparent;
     color: var(--text-color) !important;
-    border-radius: 0.66rem;
+    border-radius: calc($dropdown-border-radius - $dropdown-padding);
     cursor: pointer;
     min-height: 36px;
     white-space: nowrap;
@@ -223,14 +217,25 @@ $dropdown-padding: 0.4rem;
 
   &:hover {
     .jenkins-dropdown__item--selected {
-      background: transparent;
+      &::before {
+        opacity: 0;
+      }
     }
   }
 }
 
 .jenkins-dropdown__item--selected {
-  background: var(--item-background--hover);
+  &::before {
-  animation: pulse 1s ease-in-out forwards;
+    background: var(--item-background--hover);
+    border: var(--jenkins-border--subtle) !important;
+    animation: pulse 1s ease-in-out forwards;
+  }
+
+  &:hover {
+    &::before {
+      opacity: 1 !important;
+    }
+  }
 
   @keyframes pulse {
     50% {

src/main/scss/components/_notice.scss

@@ -6,6 +6,7 @@
   gap: 1rem;
   min-height: 15rem;
   background: var(--button-background);
+  border: var(--jenkins-border--subtle);
   border-radius: var(--form-input-border-radius);
   font-size: var(--font-size-base);
   margin-bottom: var(--section-padding);

src/main/scss/components/_notifications.scss

@@ -36,8 +36,8 @@
     inset: 0;
     border-radius: inherit;
     z-index: -1;
-    background: var(--background);
+    background: oklch(from var(--background) l c h / 0.3);
-    opacity: 0.3;
+    border: var(--jenkins-border--subtle);
   }
 
   @supports not (backdrop-filter: blur(15px)) {

src/main/scss/components/_row-selection-controller.scss

@@ -12,8 +12,8 @@
   outline: none;
   border: none;
   box-shadow:
-    0 0 0 10px transparent,
+    var(--form-input-glow),
-    inset 0 0 0 0.125rem var(--input-border);
+    inset 0 0 0 var(--jenkins-border-width) var(--input-border);
   border-radius: 6px;
   transition: var(--standard-transition);
   cursor: pointer;
@@ -21,14 +21,14 @@
 
   &:hover {
     box-shadow:
-      0 0 0 10px transparent,
+      var(--form-input-glow),
       inset 0 0 0 0.3125rem var(--input-border-hover);
   }
 
   &:active,
   &:focus {
     box-shadow:
-      0 0 0 5px var(--focus-input-glow),
+      0 0 0 4px var(--focus-input-glow),
       inset 0 0 0 0.3125rem var(--focus-input-border);
   }
 
@@ -61,19 +61,19 @@
 
   &--all {
     box-shadow:
-      0 0 0 10px transparent,
+      var(--form-input-glow),
       inset 0 0 0 0.6875rem var(--focus-input-border);
 
     &:hover {
       box-shadow:
-        0 0 0 10px transparent,
+        var(--form-input-glow),
         inset 0 0 0 1.375rem var(--focus-input-border);
     }
 
     &:active,
     &:focus {
       box-shadow:
-        0 0 0 5px var(--focus-input-glow),
+        0 0 0 4px var(--focus-input-glow),
         inset 0 0 0 1.375rem var(--focus-input-border);
     }
 

src/main/scss/components/_section.scss

@@ -1,7 +1,7 @@
 @use "../abstracts/mixins";
 
 .jenkins-section {
-  border-top: 2px solid var(--panel-border-color);
+  border-top: var(--jenkins-border);
   padding: var(--section-padding) 0 0 0;
   max-width: 1800px;
 
@@ -55,7 +55,7 @@
 }
 
 .jenkins-section__item a {
-  @include mixins.item;
+  @include mixins.item($border: false);
 
   display: flex;
   text-decoration: none;
@@ -90,6 +90,7 @@
       border-radius: 100%;
       pointer-events: none;
       background: var(--item-background--active);
+      border: var(--jenkins-border--subtle);
     }
 
     img,

src/main/scss/components/_side-panel-tasks.scss

@@ -61,17 +61,11 @@ $background-outset: 0.7rem;
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding: 0.55rem $background-outset;
+  padding: 0.5rem $background-outset;
   gap: 0.65rem;
   width: 100%;
-  cursor: pointer;
-  font-weight: normal !important;
   font-size: var(--font-size-sm);
-  color: var(--text-color) !important;
+  color: var(--text-color);
-  background: transparent;
-  outline: none;
-  border: none;
-  text-decoration: none;
   margin: 0;
   transition: opacity var(--standard-transition);
 
@@ -100,7 +94,7 @@ $background-outset: 0.7rem;
   }
 
   &--active {
-    font-weight: 500 !important;
+    font-weight: 450;
     cursor: default;
 
     svg * {
@@ -115,4 +109,10 @@ $background-outset: 0.7rem;
       box-shadow: none !important;
     }
   }
+
+  &:not(:hover, &:active, &:focus, &--active) {
+    &::before {
+      border-color: transparent;
+    }
+  }
 }

src/main/scss/components/_spinner.scss

@@ -19,7 +19,8 @@
   &::before {
     position: relative;
     margin-right: 0.5lh;
-    opacity: 0.2;
+    opacity: 0.3;
+    border-color: var(--text-color-secondary);
   }
 
   &::after {

src/main/scss/components/_table.scss

@@ -6,10 +6,12 @@
   position: relative;
   width: 100%;
   background: var(--table-background);
-  border-radius: calc(var(--table-border-radius) + 4px);
+  border-radius: calc(
-  border: 4px solid var(--table-background);
+    var(--table-border-radius) + (var(--card-border-width) * 2)
-  border-bottom-width: 2px;
+  );
-  border-spacing: 0 2px;
+  border: calc(var(--card-border-width) * 2) solid var(--table-background);
+  border-bottom-width: var(--card-border-width);
+  border-spacing: 0 var(--card-border-width);
   background-clip: padding-box;
   margin-bottom: var(--section-padding);
 
@@ -18,8 +20,8 @@
     &::before {
       content: "";
       position: absolute;
-      inset: -4px -4px -2px;
+      inset: -3px -3px -2px;
-      border: var(--card-border-width) solid var(--table-border-color);
+      border: var(--jenkins-border--subtle);
       border-radius: inherit;
       pointer-events: none;
     }
@@ -38,8 +40,8 @@
         padding-top: calc(var(--table-padding) * 0.9);
         padding-bottom: calc((var(--table-padding) * 0.9) + 2px);
         padding-left: 1.6rem;
-        font-weight: var(--font-bold-weight);
         font-size: var(--font-size-sm);
+        font-weight: var(--font-bold-weight);
 
         &[align="center"] {
           text-align: center;
@@ -257,7 +259,7 @@
   &__button,
   .sortheader,
   &__link {
-    @include mixins.item;
+    @include mixins.item($border: false);
 
     align-items: center;
     justify-content: center;
@@ -283,39 +285,23 @@
   }
 
   &__badge {
+    @include mixins.item;
+
+    --item-background: color-mix(in sRGB, currentColor 5%, transparent);
+    --item-background--hover: color-mix(in sRGB, currentColor 10%, transparent);
+    --item-background--active: color-mix(
+      in sRGB,
+      currentColor 15%,
+      transparent
+    );
+    --item-box-shadow--focus: color-mix(in sRGB, currentColor 5%, transparent);
+
     margin-left: 1rem !important;
+    border-radius: 13px;
 
-    &::before {
+    &::before,
-      inset: -5px -8px;
-      border-radius: 13px;
-      background: currentColor;
-      opacity: 0.05;
-    }
-
     &::after {
       inset: -5px -8px;
-      box-shadow: 0 0 0 10px currentColor;
-      opacity: 0;
-    }
-
-    &:hover {
-      &::before {
-        background: currentColor;
-        border-radius: 6px;
-      }
-    }
-
-    &:active,
-    &:focus {
-      &::before {
-        background: currentColor;
-        border-radius: 6px;
-      }
-
-      &::after {
-        box-shadow: 0 0 0 5px currentColor;
-        opacity: 0.025;
-      }
     }
   }
 }

src/main/scss/components/_tabs.scss

@@ -1,3 +1,7 @@
+@use "../abstracts/mixins";
+
+$border-radius: 100px;
+
 .tabBarFrame {
   position: relative;
 }
@@ -7,8 +11,8 @@
   display: inline-flex;
   align-items: center;
   flex-wrap: wrap;
-  background: var(--tabs-background);
+  background: var(--button-background);
-  border-radius: var(--tabs-border-radius);
+  border-radius: $border-radius;
   padding: 2px;
   margin-bottom: var(--section-padding);
 
@@ -16,7 +20,7 @@
     content: "";
     position: absolute;
     inset: 0;
-    border: var(--card-border-width) solid var(--tabs-border-color);
+    border: var(--jenkins-border--subtle);
     border-radius: inherit;
     pointer-events: none;
   }
@@ -27,38 +31,28 @@
 }
 
 .tabBar .tab a {
-  position: relative;
+  @include mixins.item($border: false);
+
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 3rem;
+  min-height: 36px;
-  text-decoration: none;
+  padding: 0 1.2rem;
-  margin: 2px;
+  border-radius: $border-radius;
-  padding: 0.4rem 1.2rem;
-  border-radius: 100px;
-  background: var(--tabs-item-background);
   color: var(--tabs-item-foreground);
-  font-weight: var(--font-bold-weight);
+  font-weight: normal;
   font-size: var(--font-size-sm);
-  transition: var(--standard-transition);
+  min-width: 3.75rem;
-  cursor: pointer;
 
-  &:hover {
+  &::before,
-    background: var(--tabs-item-background--hover);
+  &::after {
-    color: var(--tabs-item-foreground--hover);
+    inset: 2px;
-  }
-
-  &:active,
-  &:focus {
-    outline: none;
-    background: var(--tabs-item-background--active);
-    color: var(--tabs-item-foreground--active);
   }
 }
 
 .tabBar .tab .addTab svg {
-  width: 1.25rem;
+  width: 1.125rem;
-  height: 1.25rem;
+  height: 1.125rem;
 }
 
 .tabBar .tab [type="radio"] {
@@ -66,10 +60,25 @@
 }
 
 .tabBar .tab.active a {
-  background: var(--tabs-item-background--selected);
-  color: var(--tabs-item-foreground--selected);
   z-index: 2;
   cursor: default;
+  font-weight: 450;
+  color: var(--tabs-item-foreground--active);
+
+  &::before {
+    background-clip: padding-box;
+    background-color: var(--tabs-item-background--selected) !important;
+    border: var(--jenkins-border--subtle) !important;
+  }
+
+  &::after {
+    display: none;
+  }
+
+  &::before,
+  &::after {
+    inset: 0;
+  }
 }
 
 .jenkins-tab-pane__title {

src/main/scss/components/_tooltips.scss

@@ -36,7 +36,7 @@
       position: absolute;
       inset: 0;
       border-radius: 0.375rem;
-      border: 0.1rem solid var(--text-color-secondary);
+      border: var(--jenkins-border-width) solid var(--text-color-secondary);
       opacity: 0.3;
       mask-image: linear-gradient(
         -45deg,
@@ -101,8 +101,8 @@
     position: absolute;
     inset: 0;
     border-radius: 0.375rem;
-    border: 0.1rem solid var(--text-color-secondary);
+    border: var(--jenkins-border-width) solid var(--text-color-secondary);
-    opacity: 0.3;
+    opacity: 0.2;
   }
 
   svg {

src/main/scss/form/_checkbox.scss

@@ -32,7 +32,7 @@
       & + label {
         &::before {
           box-shadow:
-            0 0 0 5px var(--focus-input-glow),
+            var(--form-input-glow--focus),
             inset 0 0 0 5px var(--focus-input-border);
         }
       }
@@ -44,7 +44,7 @@
         & + label {
           &::before {
             box-shadow:
-              0 0 0 5px var(--focus-input-glow),
+              var(--form-input-glow--focus),
               inset 0 0 0 12px var(--focus-input-border);
           }
         }
@@ -58,7 +58,7 @@
       & + label {
         &::before {
           box-shadow:
-            0 0 0 5px var(--focus-input-glow),
+            var(--form-input-glow--focus),
             inset 0 0 0 12px var(--focus-input-border);
         }
       }
@@ -71,7 +71,7 @@
       &:focus {
         &::before {
           box-shadow:
-            0 0 0 5px var(--focus-input-glow),
+            var(--form-input-glow--focus),
             inset 0 0 0 12px var(--focus-input-border);
         }
       }
@@ -80,7 +80,7 @@
     & + label {
       &::before {
         box-shadow:
-          0 0 0 10px transparent,
+          var(--form-input-glow),
           inset 0 0 0 12px var(--focus-input-border);
       }
 
@@ -97,7 +97,7 @@
       &::before {
         opacity: 0.35 !important;
         box-shadow:
-          0 0 0 10px transparent,
+          var(--form-input-glow),
           inset 0 0 0 2px var(--input-border) !important;
       }
     }
@@ -106,7 +106,7 @@
       & + label {
         &::before {
           box-shadow:
-            0 0 0 10px transparent,
+            var(--form-input-glow),
             inset 0 0 0 12px var(--focus-input-border) !important;
         }
 
@@ -138,8 +138,8 @@
     transition: var(--standard-transition);
     margin-right: 11px;
     box-shadow:
-      0 0 0 10px transparent,
+      var(--form-input-glow),
-      inset 0 0 0 2px var(--input-border);
+      inset 0 0 0 var(--jenkins-border-width) var(--input-border);
     background: var(--input-color);
   }
 
@@ -171,7 +171,7 @@
   &:hover {
     &::before {
       box-shadow:
-        0 0 0 10px transparent,
+        var(--form-input-glow),
         inset 0 0 0 5px var(--input-border-hover);
     }
   }
@@ -180,7 +180,7 @@
   &:focus {
     &::before {
       box-shadow:
-        0 0 0 5px var(--focus-input-glow),
+        var(--form-input-glow--focus),
         inset 0 0 0 5px var(--focus-input-border);
     }
   }

src/main/scss/form/_codemirror.scss

@@ -1,7 +1,7 @@
 .CodeMirror {
   display: block;
   background: var(--input-color);
-  border: 2px solid var(--input-border);
+  border: var(--jenkins-border-width) solid var(--input-border);
   border-radius: var(--form-input-border-radius);
   width: 100%;
   box-shadow: var(--form-input-glow);
@@ -48,8 +48,7 @@
   }
 
   .CodeMirror-gutter-text {
-    padding: var(--form-input-padding) calc(var(--form-input-padding) * 0.5)
+    padding: 0.5rem calc(0.625rem * 0.5) 0.625rem 0.5rem;
-      var(--form-input-padding) var(--form-input-padding);
     color: var(--text-color-secondary);
   }
 }

src/main/scss/form/_file-upload.scss

@@ -24,7 +24,6 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border: none;
     outline: none;
     margin: 0 1rem 0 0;
     padding: 0.5rem 0.85rem 0.5rem 2.5rem;
@@ -34,7 +33,7 @@
       padding: 0.5rem 0.85rem;
     }
 
-    font-size: 0.8rem;
+    font-size: var(--font-size-sm);
     font-weight: normal;
     color: var(--text-color);
     border-radius: var(--form-input-border-radius);
@@ -43,7 +42,8 @@
     white-space: nowrap;
     background: var(--button-background);
     transition: var(--standard-transition);
-    box-shadow: 0 0 0 10px transparent;
+    box-shadow: var(--form-input-glow);
+    border: var(--jenkins-border--subtle);
 
     &:hover {
       background: var(--button-background--hover);
@@ -51,7 +51,7 @@
 
     &:active {
       background: var(--button-background--active);
-      box-shadow: 0 0 0 5px var(--button-box-shadow--focus);
+      box-shadow: 0 0 0 4px var(--button-box-shadow--focus);
     }
   }
 

src/main/scss/form/_input.scss

@@ -1,10 +1,11 @@
 .jenkins-input {
   display: block;
   background: var(--input-color);
-  border: 2px solid var(--input-border);
+  border: var(--jenkins-border-width) solid var(--input-border);
   padding: var(--form-input-padding);
   border-radius: var(--form-input-border-radius);
   width: 100%;
+  min-height: 2.375rem;
   box-shadow: var(--form-input-glow);
 
   // Set height transition to 0s as vertical resizing has a delay/lag otherwise
@@ -13,15 +14,21 @@
     height 0s,
     padding 0s;
 
-  &:hover {
+  &:not(:disabled) {
-    border-color: var(--input-border-hover);
+    &:hover {
+      border-color: var(--input-border-hover);
+    }
+
+    &:active,
+    &:focus {
+      outline: none;
+      border-color: var(--focus-input-border);
+      box-shadow: var(--form-input-glow--focus);
+    }
   }
 
-  &:active,
+  &:disabled {
-  &:focus {
+    cursor: not-allowed;
-    outline: none;
-    border-color: var(--focus-input-border);
-    box-shadow: var(--form-input-glow--focus);
   }
 }
 

src/main/scss/form/_layout.scss

@@ -1,3 +1,5 @@
+@use "../abstracts/mixins";
+
 .jenkins-form {
   max-width: var(--form-item-max-width);
 }
@@ -70,6 +72,8 @@
   align-items: center;
   background-color: var(--button-background);
   border-radius: var(--form-input-border-radius);
+  outline: var(--jenkins-border--subtle);
+  outline-offset: calc(var(--jenkins-border-width) * -1);
   padding: 0 1rem;
   gap: 1.5rem;
 
@@ -89,12 +93,14 @@
 }
 
 .jenkins-help-button {
-  position: relative;
+  @include mixins.item;
+
+  --item-background: var(--button-background);
+
   display: inline-flex;
   justify-content: center;
   align-items: center;
   margin-left: 1ch;
-  color: var(--text-color) !important;
   border-radius: 100%;
 
   span {
@@ -110,47 +116,6 @@
     mask-position: center;
     mask-repeat: no-repeat;
   }
-
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--text-color-secondary);
-    opacity: 0.1;
-    border-radius: inherit;
-    transition: var(--standard-transition);
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border: 1px solid
-      color-mix(in sRGB, var(--text-color-secondary), transparent);
-    box-shadow: var(--form-input-glow);
-    border-radius: inherit;
-    opacity: 0.1;
-    transition: var(--standard-transition);
-  }
-
-  &:hover {
-    &::before {
-      opacity: 0.2;
-    }
-  }
-
-  &:active,
-  &:focus {
-    outline: none;
-
-    &::before {
-      opacity: 0.3;
-    }
-
-    &::after {
-      box-shadow: 0 0 0 5px var(--text-color);
-    }
-  }
 }
 
 .jenkins-select-help {
@@ -170,7 +135,6 @@
   gap: 0.45rem;
   margin-left: 0.4rem;
   font-size: 0.8rem;
-  font-weight: var(--font-bold-weight);
   cursor: default;
 
   svg {

src/main/scss/form/_radio.scss

@@ -1,10 +1,9 @@
 $jenkins-radio-size: 1.375rem;
-$jenkins-radio-border-size: 0.125rem;
+$jenkins-radio-border-size: 1.5px;
 $jenkins-radio-border-hover-size: 0.3125rem;
 $jenkins-radio-border-active-size: 0.5rem;
 $jenkins-radio-border-checked-size: 0.4rem;
-$jenkins-radio-glow-size: 0.625rem;
+$jenkins-radio-glow-size: 0.5rem;
-$jenkins-radio-glow-active-size: 0.3125rem;
 
 .jenkins-radio-help-wrapper {
   display: flex;
@@ -37,7 +36,7 @@ $jenkins-radio-glow-active-size: 0.3125rem;
       &:active {
         & + label::before {
           box-shadow:
-            0 0 0 $jenkins-radio-glow-active-size var(--focus-input-glow),
+            var(--form-input-glow--focus),
             inset 0 0 0 $jenkins-radio-border-active-size
               var(--focus-input-border);
         }
@@ -62,7 +61,7 @@ $jenkins-radio-glow-active-size: 0.3125rem;
         &:active {
           & + label::before {
             box-shadow:
-              0 0 0 $jenkins-radio-glow-active-size var(--focus-input-glow),
+              var(--form-input-glow--focus),
               inset 0 0 0 $jenkins-radio-border-active-size
                 var(--focus-input-border);
           }

src/main/scss/form/_search-bar.scss

@@ -153,7 +153,7 @@
     --search-bar-height: 3rem;
 
     width: 100%;
-    margin-block: -6px;
+    margin-block: -5px;
 
     @media (min-width: breakpoints.$tablet-breakpoint) {
       max-width: 50vw;

src/main/scss/form/_select.scss

@@ -8,26 +8,28 @@
     top: 0;
     right: 13px;
     bottom: 0;
-    width: 12px;
+    width: 0.625rem;
     background-color: currentColor;
     mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg width='336px' height='192px' viewBox='0 0 336 192' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3ePath%3c/title%3e%3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='arrow' transform='translate(0.000000, 0.000000)' fill='%23FF0000' fill-rule='nonzero'%3e%3cpath d='M7.02943725,7.02943725 C16.3053957,-2.24652118 31.2852799,-2.34214962 40.6788451,6.74255194 L40.9705627,7.02943725 L168,134.059 L295.029437,7.02943725 C304.305396,-2.24652118 319.28528,-2.34214962 328.678845,6.74255194 L328.970563,7.02943725 C338.246521,16.3053957 338.34215,31.2852799 329.257448,40.6788451 L328.970563,40.9705627 L184.970563,184.970563 C175.694604,194.246521 160.71472,194.34215 151.321155,185.257448 L151.029437,184.970563 L7.02943725,40.9705627 C-2.34314575,31.5979797 -2.34314575,16.4020203 7.02943725,7.02943725 Z' id='Path'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
     mask-size: contain;
     mask-repeat: no-repeat;
     mask-position: center;
     pointer-events: none;
+    transition: translate var(--elastic-transition);
   }
 
   &__input {
     appearance: none;
     display: block;
-    border: 2px solid var(--input-border);
+    border: var(--jenkins-border-width) solid var(--input-border);
     padding: var(--form-input-padding);
     width: 100% !important; // TODO remove important after https://github.com/jenkinsci/credentials-plugin/pull/255
     max-width: 100% !important; // TODO remove important after https://github.com/jenkinsci/credentials-plugin/pull/255
     border-radius: var(--form-input-border-radius);
-    box-shadow: 0 0 0 10px transparent;
+    box-shadow: var(--form-input-glow);
     transition: var(--standard-transition);
     min-height: 38px;
+    cursor: pointer;
 
     &:hover {
       border-color: var(--input-border-hover);
@@ -37,27 +39,33 @@
     &:focus {
       outline: none;
       border-color: var(--focus-input-border);
-      box-shadow: 0 0 0 5px var(--focus-input-glow);
+      box-shadow: var(--form-input-glow--focus);
     }
 
     &:disabled {
       pointer-events: none;
     }
   }
+
+  &:hover {
+    &::after {
+      translate: 0 1px;
+    }
+  }
 }
 
 .jenkins-multi-select {
   position: relative;
   width: 100%;
-  border: 2px solid var(--input-border);
+  border: var(--jenkins-border-width) solid var(--input-border);
   border-radius: var(--form-input-border-radius);
-  box-shadow: 0 0 0 10px transparent;
+  box-shadow: var(--form-input-glow);
   transition: var(--standard-transition);
   outline: none;
 
   &:focus {
     border-color: var(--focus-input-border);
-    box-shadow: 0 0 0 5px var(--focus-input-glow);
+    box-shadow: var(--form-input-glow--focus);
   }
 
   &:disabled {

src/main/scss/form/_textarea.scss

@@ -6,7 +6,8 @@
 }
 
 .textarea-preview {
-  background-color: var(--very-light-grey);
+  background-color: var(--button-background);
+  border: var(--jenkins-border--subtle);
   padding: var(--form-input-padding);
   margin-top: 0.5rem;
   border-radius: var(--form-input-border-radius);

src/main/scss/form/_toggle-switch.scss

@@ -69,6 +69,13 @@
 
       &:active,
       &:focus {
+        &::before {
+          box-shadow:
+            inset 0 0 0 1.5px
+              color-mix(in sRGB, var(--text-color-secondary) 9%, transparent),
+            var(--form-input-glow--focus);
+        }
+
         &::after {
           left: 20px;
           width: 25px;
@@ -101,6 +108,7 @@
   cursor: pointer;
   line-height: 30px;
   font-weight: var(--form-label-font-weight);
+  user-select: none;
 
   &::before {
     display: inline-block;
@@ -113,8 +121,9 @@
     transition: var(--standard-transition);
     margin-right: 1rem;
     box-shadow:
-      inset 0 0 0 1px rgb(0 0 0 / 0.05),
+      inset 0 0 0 1.5px
-      0 0 0 10px transparent;
+        color-mix(in sRGB, var(--text-color-secondary) 9%, transparent),
+      var(--form-input-glow);
   }
 
   &::after {
@@ -132,7 +141,8 @@
     mask-position: center;
     border-radius: 100px;
     transition: var(--standard-transition);
-    box-shadow: 0 1px 0 rgb(0 0 0 / 0.1);
+    box-shadow: 0 0 0 1.5px
+      color-mix(in sRGB, var(--text-color-secondary) 9%, transparent);
   }
 
   &:hover::before {
@@ -143,8 +153,10 @@
   &:focus {
     &::before {
       box-shadow:
-        inset 0 0 0 1px rgb(0 0 0 / 0.05),
+        inset 0 0 0 1.5px
-        0 0 0 5px var(--focus-input-glow);
+          color-mix(in sRGB, var(--text-color-secondary) 9%, transparent),
+        0 0 0 4px
+          color-mix(in sRGB, var(--text-color-secondary) 25%, transparent);
     }
 
     &::after {

src/main/scss/pages/_about.scss

@@ -7,15 +7,18 @@
   pointer-events: none;
   margin-bottom: var(--section-padding);
   overflow: hidden;
-  mask-border-source: url("data:image/svg+xml,%3Csvg width='45' height='45' viewBox='0 0 45 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 22.5C0 15.5109 0 12.0163 1.14181 9.25975C2.66422 5.58433 5.58433 2.66422 9.25975 1.14181C12.0163 0 15.5109 0 22.5 0C29.4891 0 32.9837 0 35.7402 1.14181C39.4157 2.66422 42.3358 5.58433 43.8582 9.25975C45 12.0163 45 15.5109 45 22.5C45 29.4891 45 32.9837 43.8582 35.7402C42.3358 39.4157 39.4157 42.3358 35.7402 43.8582C32.9837 45 29.4891 45 22.5 45C15.5109 45 12.0163 45 9.25975 43.8582C5.58433 42.3358 2.66422 39.4157 1.14181 35.7402C0 32.9837 0 29.4891 0 22.5Z' fill='%23D9D9D9'/%3E%3C/svg%3E%0A");
+  border-radius: 1rem;
-  mask-border-slice: 49% fill;
 
-  &::before {
+  &::before,
+  &::after {
     content: "";
     position: absolute;
+    z-index: 1;
+  }
+
+  &::before {
     width: 120%;
     aspect-ratio: 1;
-    z-index: 1;
     background: repeating-conic-gradient(
       var(--background) 0deg,
       rgb(100 100 100 / 0.25) 20deg
@@ -24,6 +27,12 @@
     opacity: 0.25;
   }
 
+  &::after {
+    inset: 0;
+    border: var(--jenkins-border--subtle);
+    border-radius: inherit;
+  }
+
   img {
     height: 7.5rem;
     z-index: 1;

src/main/scss/pages/_build.scss

@@ -15,6 +15,7 @@
 
   pre {
     background: transparent;
+    border: none;
     margin: 0;
     padding: 0;
     line-height: 1.75;

src/main/scss/pages/_dashboard.scss

@@ -1,6 +1,6 @@
 @use "../abstracts/mixins";
 
-$min-button-size: 36px;
+$min-button-size: 2.375rem;
 
 .jenkins-icon-size {
   display: flex;

src/main/scss/pages/_job.scss

@@ -94,7 +94,7 @@
 }
 
 .app-builds-container__item {
-  @include mixins.item;
+  @include mixins.item($border: false);
 
   display: grid;
   grid-template-columns: auto 1fr auto;