Init

Author: janfaracik

core/src/main/resources/lib/layout/search-bar.jelly

@@ -48,7 +48,7 @@ THE SOFTWARE.
       </div>
       <input value="${attrs.value}"
              id="${attrs.id}"
-             class="jenkins-search__input"
+             class="jenkins-input jenkins-search__input"
              placeholder="${attrs.placeholder ?: '%Search'}"
              type="search"
              autofocus="${attrs.autofocus == 'true' ? 'true' : null}"

src/main/scss/abstracts/_mixins.scss

@@ -75,6 +75,7 @@
 
   &::before {
     background-color: transparent;
+    border: var(--jenkins-border);
   }
 
   &::after {

src/main/scss/abstracts/_theme.scss

@@ -169,6 +169,16 @@ $semantics: (
   --btn-link-color--active: var(--primary-active);
   --btn-link-bg--active: var(--light-grey);
 
+
+  --jenkins-border-width: 1.5px;
+  --jenkins-border: var(--jenkins-border-width) solid color-mix(in srgb, currentColor 1%, transparent);
+  //--jenkins-border: var(--jenkins-border-width) solid var(--red);
+  // hsla(240, 25%, 75%, 0.25)
+
+  @media (prefers-contrast: more) {
+    --jenkins-border: var(--jenkins-border-width) solid currentColor;
+  }
+
   // Table
   --table-background: var(--panel-header-bg-color);
   --table-header-foreground: var(--text-color);
@@ -260,7 +270,7 @@ $semantics: (
   --card-border-color: hsla(240, 25%, 75%, 0.25);
   --card-border-color--hover: hsla(240, 25%, 75%, 0.5);
   --card-border-color--active: hsla(240, 25%, 75%, 0.75);
-  --card-border-width: 2px;
+  --card-border-width: var(--jenkins-border-width);
 
   // Tab bar
   --tabs-background: var(--panel-header-bg-color);

src/main/scss/components/_alert.scss

@@ -3,7 +3,7 @@
   font-size: var(--font-size-sm);
   padding: 15px;
   margin-bottom: 20px;
-  border: 1px solid transparent;
+  border: var(--jenkins-border-width) solid transparent;
   border-radius: 10px;
 
   strong {

src/main/scss/components/_buttons.scss

@@ -79,6 +79,12 @@
   &::before {
     background: transparent;
   }
+
+  &:not(:hover, &:active, &:focus) {
+    &::before {
+      border-color: transparent;
+    }
+  }
 }
 
 // Support for custom colors

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

@@ -116,4 +116,10 @@ $background-outset: 0.7rem;
       box-shadow: none !important;
     }
   }
+
+  &:not(:hover, &:active, &:focus, &--active) {
+    &::before {
+      border-color: transparent;
+    }
+  }
 }

src/main/scss/components/_table.scss

@@ -6,10 +6,10 @@
   position: relative;
   width: 100%;
   background: var(--table-background);
-  border-radius: calc(var(--table-border-radius) + 4px);
-  border: 4px solid var(--table-background);
-  border-bottom-width: 2px;
-  border-spacing: 0 2px;
+  border-radius: calc(var(--table-border-radius) + (var(--card-border-width) * 2));
+  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);
 

src/main/scss/components/_tooltips.scss

@@ -37,7 +37,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,
@@ -102,8 +102,8 @@
     position: absolute;
     inset: 0;
     border-radius: 0.375rem;
-    border: 0.1rem solid var(--text-color-secondary);
-    opacity: 0.3;
+    border: var(--jenkins-border-width) solid var(--text-color-secondary);
+    opacity: 0.2;
   }
 
   svg {

src/main/scss/form/_checkbox.scss

@@ -139,7 +139,7 @@
     margin-right: 11px;
     box-shadow:
       0 0 0 10px transparent,
-      inset 0 0 0 2px var(--input-border);
+      inset 0 0 0 var(--jenkins-border-width) var(--input-border);
     background: var(--input-color);
   }
 

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);

src/main/scss/form/_input.scss

@@ -1,7 +1,7 @@
 .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%;

src/main/scss/form/_radio.scss

@@ -1,5 +1,5 @@
 $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;

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

@@ -8,19 +8,20 @@
   position: relative;
 
   &__input {
-    appearance: none;
-    background: var(--item-background--hover);
-    border: none;
-    outline: none;
-    border-radius: 0.625rem;
-    width: 100%;
-    margin: 0;
-    padding: 0 0.5rem 0 var(--search-bar-height);
+    //appearance: none;
+    ////background: var(--item-background--hover);
+    ////border: none;
+    //outline: none;
+    //border-radius: 0.625rem;
+    //border: var(--jenkins-border-width) solid var(--input-border);
+    //width: 100%;
+    //margin: 0;
+    padding: 0 0.5rem 0 34px;
     line-height: 1;
-    box-shadow:
-      0 0 0 2px transparent,
-      0 0 0 12px transparent;
-    transition: var(--standard-transition);
+    //box-shadow:
+    //  0 0 0 2px transparent,
+    //  0 0 0 12px transparent;
+    //transition: var(--standard-transition);
     height: var(--search-bar-height);
 
     &::placeholder {
@@ -58,17 +59,17 @@
     }
 
     &:not(:disabled) {
-      &:hover {
-        background: var(--item-background--active);
-      }
+      //&:hover {
+      //  background: var(--item-background--active);
+      //}
 
       &:active,
       &:focus {
-        outline: none;
-        background: var(--item-background--active);
-        box-shadow:
-          0 0 0 2px var(--focus-input-border),
-          0 0 0 7px var(--focus-input-glow);
+        //outline: none;
+        ////background: var(--item-background--active);
+        //box-shadow:
+        //  0 0 0 2px var(--focus-input-border),
+        //  0 0 0 7px var(--focus-input-glow);
 
         &::-webkit-search-cancel-button {
           opacity: 0.5;
@@ -80,11 +81,11 @@
 
     &:active,
     &:focus {
-      outline: none;
-      background: var(--item-background--active);
-      box-shadow:
-        0 0 0 2px var(--focus-input-border),
-        0 0 0 7px var(--focus-input-glow);
+      //outline: none;
+      //background: var(--item-background--active);
+      //box-shadow:
+      //  0 0 0 2px var(--focus-input-border),
+      //  0 0 0 7px var(--focus-input-glow);
 
       &::-webkit-search-cancel-button {
         opacity: 1;
@@ -93,9 +94,9 @@
       }
     }
 
-    &:disabled {
-      cursor: not-allowed;
-    }
+    //&:disabled {
+    //  cursor: not-allowed;
+    //}
   }
 
   &__icon {
@@ -108,10 +109,10 @@
     pointer-events: none;
 
     svg {
-      width: 45%;
-      height: 45%;
-      max-width: 1.1rem;
-      max-height: 1.1rem;
+      width: 1rem;
+      height: 1rem;
+      max-width: 1rem;
+      max-height: 1rem;
       grid-column-start: 1;
       grid-row-start: 1;
       place-self: center center;

src/main/scss/form/_select.scss

@@ -20,7 +20,7 @@
   &__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
@@ -49,7 +49,7 @@
 .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;
   transition: var(--standard-transition);