Issue #3183425 by tanc, ckrina, longwave, sylus, Abhijith S, idebr, justafish,...

Issue #3183425 by tanc, ckrina, longwave, sylus, Abhijith S, idebr, justafish, pandaski, bnjmnm: Google Chrome 87 renders fieldset with grey artefacts

core/themes/claro/css/base/variables.pcss.css

@@ -121,7 +121,7 @@
    * Details.
    */
   --details-bg-color: rgba(243, 244, 249, 0.4);
-  --details-border-color: rgba(216, 217, 224, 0.8);
+  --details-border-color: var(--color-lightdiamond);
   --details-summary-shadow-color: var(--color-focus);
   --details-summary-focus-border-size: var(--focus-border-size);
   --details-desktop-wrapper-padding-start: calc(var(--space-m) + var(--space-s) + var(--space-xs));

core/themes/claro/css/components/accordion.css

@@ -12,7 +12,7 @@
 
 .accordion {
   color: #222330;
-  border: 1px solid rgba(216, 217, 224, 0.8);
+  border: 1px solid #dedfe4;
   border-radius: 2px;
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

core/themes/claro/css/components/details.css

@@ -40,7 +40,7 @@
   margin-top: 1rem;
   margin-bottom: 1rem;
   color: #222330;
-  border: 1px solid rgba(216, 217, 224, 0.8);
+  border: 1px solid #dedfe4;
   border-radius: 2px;
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -405,7 +405,7 @@
 .claro-details__wrapper--accordion,
 .claro-details__wrapper--accordion-item,
 .claro-details__wrapper--vertical-tabs-item {
-  border-top: 1px solid rgba(216, 217, 224, 0.8);
+  border-top: 1px solid #dedfe4;
   background-color: rgba(243, 244, 249, 0.4);
 }
 

core/themes/claro/css/components/entity-meta.css

@@ -13,7 +13,7 @@
 .entity-meta__header {
   padding: 0.5rem 1rem 1rem;
   color: #222330;
-  border: 1px solid rgba(216, 217, 224, 0.8);
+  border: 1px solid #dedfe4;
   border-radius: 2px;
   background-color: #fff;
 }

core/themes/claro/css/components/fieldset.css

@@ -15,7 +15,7 @@
   margin: 1rem 0;
   padding: 0;
   color: #222330;
-  border: 1px solid rgba(216, 217, 224, 0.8);
+  border: 1px solid #dedfe4;
   border-radius: 2px;
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

core/themes/claro/css/components/system-status-report.css

@@ -39,7 +39,7 @@
 
 .system-status-report .claro-details {
   border: none;
-  border-bottom: 1px solid rgba(216, 217, 224, 0.8);
+  border-bottom: 1px solid #dedfe4;
   box-shadow: none;
 }
 

core/themes/claro/css/components/vertical-tabs.css

@@ -214,7 +214,7 @@
 .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {
   z-index: 3; /* The selected menu link should be on a higher level than the white masking line that hides the gray separator. */
   color: #003cc5;
-  border-color: rgba(216, 217, 224, 0.8) transparent;
+  border-color: #dedfe4 transparent;
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -279,7 +279,7 @@
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
   color: #222330;
-  border: 1px solid rgba(216, 217, 224, 0.8);
+  border: 1px solid #dedfe4;
   border-radius: 2px;
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

core/themes/claro/css/components/views-exposed-form.css

@@ -31,7 +31,7 @@
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
   padding: 0.5rem 1.5rem 1.5rem 1.5rem;
-  border: 1px solid rgba(216, 217, 224, 0.8);
+  border: 1px solid #dedfe4;
   border-radius: 2px;
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

core/themes/claro/css/theme/media-library.css

@@ -147,7 +147,7 @@
 .media-library-menu__link.active {
   z-index: 2; /* The selected menu link should be on a higher level than the white masking line that hides the gray separator. */
   color: #003cc5;
-  border-color: rgba(216, 217, 224, 0.8) transparent;
+  border-color: #dedfe4 transparent;
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -181,12 +181,12 @@
 
 .media-library-menu + .media-library-content {
   z-index: 0;
-  border-left: 1px solid rgba(216, 217, 224, 0.8); /* LTR */
+  border-left: 1px solid #dedfe4; /* LTR */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 [dir="rtl"] .media-library-menu + .media-library-content {
-  border-right: 1px solid rgba(216, 217, 224, 0.8);
+  border-right: 1px solid #dedfe4;
   border-left: 0;
 }
 
@@ -229,7 +229,7 @@
 
 .media-library-add-form__input-wrapper {
   padding: 0.5rem 1.5rem 1.5rem 1.5rem;
-  border: 1px solid rgba(216, 217, 224, 0.8);
+  border: 1px solid #dedfe4;
   border-radius: 2px;
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);