Refine form controls appearance (#9365)

jenkinsci · Jun 11, 2024 · e7f3e23 · e7f3e23
1 parent 75f6c56
commit e7f3e23
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 17 deletions.
diff --git a/war/src/main/scss/abstracts/_theme.scss b/war/src/main/scss/abstracts/_theme.scss
@@ -52,9 +52,9 @@ $semantics: (
   --dark-grey: #4d545d;
 
   // branding
-  --secondary: hsl(240, 10%, 50%);
-  --focus-input-border: #063f61;
-  --focus-input-glow: #{color.change(#0b6aa2, $alpha: 0.25)};
+  --secondary: rgb(96, 125, 159);
+  --focus-input-border: var(--accent-color);
+  --focus-input-glow: color-mix(in sRGB, var(--accent-color) 15%, transparent);
 
   // Deprecated
   --focus-btn-primary: #{color.change(#0b6aa2, $alpha: 0.5)};
@@ -277,10 +277,22 @@ $semantics: (
   --task-link-bg-color--hover: var(--very-light-grey);
 
   // Form
-  --section-padding: 1.75rem;
-  --input-color: var(--white);
-  --input-border: #c3ccd1;
-  --input-border-hover: #5c7889;
+  --section-padding: 1.625rem;
+  --input-color: color-mix(
+    in sRGB,
+    var(--text-color-secondary) 1.5%,
+    var(--background)
+  );
+  --input-border: color-mix(
+    in sRGB,
+    var(--text-color-secondary) 25%,
+    transparent
+  );
+  --input-border-hover: color-mix(
+    in sRGB,
+    var(--text-color-secondary) 50%,
+    transparent
+  );
   --input-hidden-password-bg-color: #f9f9f9;
   --form-item-max-width: min(65vw, 1600px);
   --form-item-max-width--medium: min(50vw, 1400px);
@@ -294,9 +306,9 @@ $semantics: (
     --form-item-max-width--small: 100%;
   }
 
-  --form-label-font-weight: 500;
-  --form-input-padding: 0.5rem;
-  --form-input-border-radius: 6px;
+  --form-label-font-weight: 450;
+  --form-input-padding: 0.625rem;
+  --form-input-border-radius: 0.625rem;
   --form-input-glow: 0 0 0 10px transparent;
   --form-input-glow--focus: 0 0 0 5px var(--focus-input-glow);
   --pre-background: rgba(0, 0, 0, 0.05);

diff --git a/war/src/main/scss/form/_checkbox.scss b/war/src/main/scss/form/_checkbox.scss
@@ -140,6 +140,7 @@
     box-shadow:
       0 0 0 10px transparent,
       inset 0 0 0 2px var(--input-border);
+    background: var(--input-color);
   }
 
   &::after {

diff --git a/war/src/main/scss/form/_codemirror.scss b/war/src/main/scss/form/_codemirror.scss
@@ -42,6 +42,16 @@
   .CodeMirror-selected {
     background-color: var(--selection-color) !important;
   }
+
+  .CodeMirror-lines {
+    padding: var(--form-input-padding);
+  }
+
+  .CodeMirror-gutter-text {
+    padding: var(--form-input-padding) calc(var(--form-input-padding) * 0.5)
+      var(--form-input-padding) var(--form-input-padding);
+    color: var(--text-color-secondary);
+  }
 }
 
 .jenkins-codemirror-resizer {

diff --git a/war/src/main/scss/form/_layout.scss b/war/src/main/scss/form/_layout.scss
@@ -93,7 +93,7 @@
     background: var(--text-color);
     color: transparent;
     mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='262px' height='482px' viewBox='0 0 262 482' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M69.9217381,109.622622 L69.9347383,109.509526 L69.9838606,109.158807 L70.0463523,108.766768 C70.2927563,107.286617 70.7336,105.509397 71.3554148,103.600821 C73.4488365,97.1753443 76.974163,91.0239622 81.9750299,85.3670497 C84.5508811,82.453282 87.4853512,79.7201177 90.8001215,77.1662697 C100.73686,69.5111158 114.003751,65.6584363 131.476234,65.4354882 C133.731084,65.4096204 135.996257,65.4453704 138.232058,65.5407008 L139.478148,65.6000218 C140.992957,65.679511 142.536904,65.7906863 144.04662,65.9294921 L145.210323,66.0424992 C145.886163,66.1116384 146.60564,66.1925244 147.313561,66.2795642 L148.414194,66.420922 L149.377674,66.5545415 L150.375686,66.7050246 L151.398071,66.8714663 L152.049055,66.9841252 L152.731845,67.1083183 L153.642724,67.2845248 L154.549432,67.4714994 C155.036905,67.5756456 155.574038,67.6978797 156.090422,67.8232778 L156.917997,68.0311744 C158.666031,68.484436 160.136789,68.9816723 161.141416,69.4394425 C170.146558,73.5618171 177.044937,78.1235016 182.224862,83.4639805 C188.857993,90.3027083 191.999176,97.8308192 191.999176,107.499034 C191.999176,119.466025 188.796962,127.918279 181.370643,136.250976 C181.093904,136.561492 180.816698,136.867422 180.538309,137.169526 L180.089688,137.652102 L179.736214,138.026258 L179.002023,138.784568 L178.579132,139.213445 L178.134441,139.655368 L177.707007,140.071619 L177.021999,140.726828 L176.298991,141.400731 L175.788688,141.867317 L175.318979,142.286805 L174.54297,142.970055 L173.990783,143.446079 L173.448394,143.905722 L172.625948,144.588916 L171.799887,145.262466 L170.811596,146.050172 L169.864089,146.789794 L169.222049,147.28309 L168.549302,147.793886 L167.493519,148.583956 L166.782836,149.108414 L165.65246,149.931951 L164.484527,150.770371 L163.266904,151.632649 L161.555386,152.827104 L160.682666,153.429152 L159.298283,154.375903 L157.864408,155.346877 L155.333592,157.040637 L153.750968,158.088827 L151.524574,159.551762 L148.580787,161.468911 L144.800696,163.908618 C105.775292,188.991858 87.997951,218.376069 87.997951,257.047472 L87.997951,283.286279 L88.0016284,283.748414 C88.3121212,301.66652 103.883328,316 122.998363,316 C142.328557,316 157.998775,301.353568 157.998775,283.286279 L157.998775,257.047472 L158.001383,256.432449 C158.064604,248.820487 159.375708,243.378146 162.208358,238.456376 C165.925109,231.998468 172.860638,225.357973 183.865352,218.206756 L186.747913,216.348707 L189.667785,214.457346 L192.470459,212.628123 L195.158954,210.857753 L197.739048,209.141153 L199.612339,207.881962 L201.424999,206.651521 L203.184757,205.444126 L204.893987,204.257626 L206.014818,203.471391 L207.63679,202.320739 L208.708154,201.551674 L209.751591,200.795045 L210.776652,200.043916 L211.783987,199.29767 L212.774236,198.555696 L213.748026,197.81739 L214.705977,197.082156 L215.983535,196.08689 L217.035512,195.253661 L217.94273,194.524595 L218.836751,193.796023 L219.718133,193.067399 L220.587422,192.33819 L221.445157,191.607874 L222.291869,190.87594 L223.128081,190.141889 L224.349696,189.048475 L225.176062,188.294328 L225.979581,187.549096 L227.15568,186.436436 L227.953672,185.666523 L228.73078,184.904536 L229.501513,184.136777 L230.633743,182.986693 L231.403964,182.189294 L232.15663,181.397931 L232.905389,180.598844 L233.650817,179.791592 L234.393505,178.975725 L235.134055,178.150785 C253.063009,158.033696 262,134.778085 262,107.499034 C262,81.4013251 252.315995,58.3143983 234.08637,39.5197386 C222.737894,27.8195118 209.350637,18.7642961 192.813373,11.0878005 L191.857565,10.6472715 C176.144833,3.48753386 154.016249,-0.255558118 130.568693,0.0135609187 C97.385459,0.43694412 69.212387,9.00946009 46.2762841,26.6791815 C39.5211589,31.8836333 33.4271839,37.5663685 28.0119541,43.6920026 C17.038175,56.105392 9.16079603,69.8997291 4.39056696,84.5413054 C2.80350137,89.4125897 1.62984552,94.1870463 0.865737279,98.781619 L0.782196688,99.2931802 L0.614828552,100.383438 L0.559658337,100.765066 L0.426811303,101.749189 L0.318522027,102.638537 L0.226704214,103.487005 L0.123646908,104.617718 L0.0652556787,105.43714 L0.0342145373,105.994277 C-0.81250758,124.122996 14.1596716,139.394013 33.4714881,140.181654 L33.9656162,140.198367 L34.5332314,140.20872 C53.0445487,140.409453 68.5022596,127.170521 69.8964399,109.989591 L69.9217381,109.622622 Z' fill='currentColor' fill-rule='nonzero'%3E%3C/path%3E%3Ccircle fill='currentColor' cx='123' cy='434' r='48'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
-    mask-size: 50% 50%;
+    mask-size: 45% 45%;
     mask-position: center;
     mask-repeat: no-repeat;
   }
@@ -102,7 +102,7 @@
     content: "";
     position: absolute;
     inset: 0;
-    background: var(--text-color);
+    background: var(--text-color-secondary);
     opacity: 0.1;
     border-radius: inherit;
     transition: var(--standard-transition);
@@ -112,7 +112,8 @@
     content: "";
     position: absolute;
     inset: 0;
-    border: 1px solid rgba(125, 125, 125, 0.35);
+    border: 1px solid
+      color-mix(in sRGB, var(--text-color-secondary), transparent);
     box-shadow: var(--form-input-glow);
     border-radius: inherit;
     opacity: 0.1;

diff --git a/war/src/main/scss/form/_radio.scss b/war/src/main/scss/form/_radio.scss
@@ -104,7 +104,7 @@
       width: 22px;
       height: 22px;
       border-radius: 50%;
-      background: transparent;
+      background: var(--input-color);
       box-shadow:
         0 0 0 10px transparent,
         inset 0 0 0 2px var(--input-border);

diff --git a/war/src/main/scss/form/_search-bar.scss b/war/src/main/scss/form/_search-bar.scss
@@ -21,7 +21,7 @@
       0 0 0 2px transparent,
       0 0 0 12px transparent;
     transition: var(--standard-transition);
-    font-weight: 500;
+    font-weight: 450;
     height: var(--search-bar-height);
 
     &::placeholder {

diff --git a/war/src/main/scss/form/_select.scss b/war/src/main/scss/form/_select.scss
@@ -21,10 +21,10 @@
     appearance: none;
     display: block;
     border: 2px solid var(--input-border);
-    padding: 8px;
+    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: 6px;
+    border-radius: var(--form-input-border-radius);
     box-shadow: 0 0 0 10px transparent;
     transition: var(--standard-transition);
     min-height: 38px;