Refactor CSS for changes in 2.496 (jenkinsci#395)

Author: janfaracik

pom.xml

@@ -60,7 +60,7 @@ THE SOFTWARE.
     <gitHubRepo>jenkinsci/design-library-plugin</gitHubRepo>
     <!-- https://www.jenkins.io/doc/developer/plugin-development/choosing-jenkins-baseline/ -->
     <jenkins.baseline>2.479</jenkins.baseline>
-    <jenkins.version>${jenkins.baseline}.1</jenkins.version>
+    <jenkins.version>2.496</jenkins.version>
     <node.version>20.18.1</node.version>
     <npm.version>10.9.2</npm.version>
     <spotless.check.skip>false</spotless.check.skip>

src/main/resources/lib/samples/layout.jelly

@@ -48,7 +48,7 @@ THE SOFTWARE.
     <l:main-panel>
       <l:app-bar title="${it.displayName}">
         <j:if test="${it.since != null}">
-          <a href="https://www.jenkins.io/changelog/${it.since}" class="jenkins-button jenkins-button--tertiary jdl-since-tag" target="_blank">
+          <a href="https://www.jenkins.io/changelog/${it.since}" class="jenkins-button jdl-since-tag" target="_blank">
             <l:icon src="symbol-information-circle-outline plugin-ionicons-api" />
             Since ${it.since}
           </a>

src/main/resources/scss/abstracts/_overrides.scss

@@ -1,15 +1,12 @@
 :root {
   --jdl-spacing: var(--section-padding);
-  --jdl-border-width: 1.5px;
-  --jdl-border: var(--jdl-border-width) solid color-mix(in srgb, var(--text-color-secondary) 9%, var(--card-background));
-  --jdl-border-translucent: var(--jdl-border-width) solid color-mix(in srgb, var(--text-color-secondary) 9%, transparent);
-  --jdl-box-shadow: 0 0 0 var(--jdl-border-width) color-mix(in srgb, currentColor 5%, transparent),
+  --jdl-border-translucent: var(--jenkins-border-width) solid color-mix(in srgb, var(--text-color-secondary) 9%, transparent);
+  --jdl-box-shadow: 0 0 0 var(--jenkins-border-width) color-mix(in srgb, currentColor 5%, transparent),
   0 10px 15px rgba(0, 0, 0, 0.05);
 
   @media (prefers-contrast: more) {
-    --jdl-border: var(--jdl-border-width) solid var(--text-color);
-    --jdl-border-translucent: var(--jdl-border-width) solid var(--text-color);
-    --jdl-box-shadow: 0 0 0 var(--jdl-border-width) var(--text-color);
+    --jdl-border-translucent: var(--jenkins-border-width) solid var(--text-color);
+    --jdl-box-shadow: 0 0 0 var(--jenkins-border-width) var(--text-color);
   }
 }
 

src/main/resources/scss/components/_component-sample.scss

@@ -9,7 +9,7 @@
   z-index: 0;
   gap: 1rem;
   border-radius: 0.66rem;
-  border: var(--jdl-border);
+  border: var(--jenkins-border);
   background: linear-gradient(45deg, color-mix(in srgb, var(--pink) 7.5%, transparent),
           color-mix(in srgb, var(--light-indigo) 7.5%, transparent));
   background-attachment: fixed;
@@ -30,7 +30,7 @@
 
   /* Component preview styling */
 
-  & > form > div > .jenkins-section {
+  & > form > div > .jenkins-section, & > .jenkins-section {
     border-top: none;
     padding-top: 0;
   }

src/main/resources/scss/components/_previous-next-controls.scss

@@ -4,7 +4,7 @@
   position: relative;
   display: flex;
   justify-content: space-between;
-  border-top: var(--jdl-border);
+  border-top: var(--jenkins-border);
   padding-top: var(--jdl-spacing);
 
   @media (min-width: 767px) {

src/main/resources/scss/components/_section.scss

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--jdl-spacing);
-  border-top: var(--jdl-border);
+  border-top: var(--jenkins-border);
   padding-top: var(--jdl-spacing);
   margin-bottom: var(--jdl-spacing);
 

src/main/resources/scss/components/_since-tag.scss

@@ -1,21 +1,12 @@
 .jdl-since-tag {
+  --button-background: var(--card-background);
+  --jenkins-border--subtle: var(--jdl-border-translucent);
+
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: rgb(255 255 255 / 0.025);
-  color: var(--text-color) !important;
   font-size: 0.75rem;
   border-radius: 100px;
-  padding: 0.4rem 0.75rem;
+  padding: 0.375rem 0.75rem;
   min-height: 0;
   white-space: nowrap;
   justify-self: center;
-
-  &::after {
-    border: var(--jdl-border);
-  }
-
-  &:hover, &:focus, &:active {
-    background: transparent;
-  }
 }

src/main/resources/scss/components/_source-block.scss

@@ -9,11 +9,7 @@ $jdl-component-code-controls-spacing: 0.75rem;
   grid-template-columns: 1fr auto;
   z-index: 0;
   border-radius: 0.66rem;
-  border: var(--jdl-border);
-
-  pre {
-    background-color: transparent !important;
-  }
+  border: var(--jenkins-border);
 
   &::before {
     content: "";
@@ -25,6 +21,8 @@ $jdl-component-code-controls-spacing: 0.75rem;
   }
 
   &__code {
+    background-color: transparent !important;
+    border: none;
     margin: 0 !important;
     padding: 0;
 
@@ -46,8 +44,8 @@ $jdl-component-code-controls-spacing: 0.75rem;
 
   &__tab-bar {
     background: var(--card-background);
-    border-left: var(--jdl-border);
-    border-right: var(--jdl-border);
+    border-left: var(--jenkins-border);
+    border-right: var(--jenkins-border);
     display: flex;
     gap: 0.9rem;
     padding: 1em;
@@ -82,10 +80,10 @@ $jdl-component-code-controls-spacing: 0.75rem;
 
         &::before {
           background: color-mix(in srgb, var(--text-color-secondary) 4%, transparent);
-          border: var(--jdl-border);
+          border: var(--jenkins-border);
 
           @media (prefers-contrast: more) {
-            border: var(--jdl-border-width) solid var(--text-color);
+            border: var(--jenkins-border-width) solid var(--text-color);
           }
         }
       }
@@ -108,8 +106,8 @@ $jdl-component-code-controls-spacing: 0.75rem;
 
 .jdl-tab-pane__text {
   padding: 0 1em 1em 1em;
-  border-left: var(--jdl-border);
-  border-right: var(--jdl-border);
+  border-left: var(--jenkins-border);
+  border-right: var(--jenkins-border);
   font-family: var(--font-family-mono) !important;
   color: var(--text-color-secondary);
   margin: 0;

src/main/resources/scss/pages/_app-bars.scss

@@ -1,6 +1,6 @@
 .jdl-app-bars-page__example {
   padding: var(--jdl-spacing);
-  border: var(--jdl-border);
+  border: var(--jenkins-border);
 
   .jenkins-app-bar {
     margin-bottom: 0;
@@ -43,8 +43,8 @@
     &::after {
       top: 0;
       mask-image: linear-gradient(black 20%, transparent);
-      border-top-left-radius: calc(0.66rem - var(--jdl-border-width));
-      border-top-right-radius: calc(0.66rem - var(--jdl-border-width));
+      border-top-left-radius: calc(0.66rem - var(--jenkins-border-width));
+      border-top-right-radius: calc(0.66rem - var(--jenkins-border-width));
     }
   }
 }

src/main/resources/scss/pages/_colors.scss

@@ -86,7 +86,7 @@
           bottom: 0.2rem;
           background: var(--color);
           border-radius: 100px;
-          width: var(--jdl-border-width);
+          width: var(--jenkins-border-width);
           opacity: 0.2;
         }