Merge pull request #2869 from overleaf/jel-cms-color-blocks-a11y

Allow text on CMS color blocks without a card

GitOrigin-RevId: d66a48daf6757a61216e8c5fcfd627e6ca839593

services/web/frontend/stylesheets/app/cms-page.less

@@ -113,7 +113,6 @@
     }
   }
   .features-table {
-    background: white;
     max-width: none;
     th,
     td {
@@ -171,7 +170,6 @@
 
       td:first-child {
         text-align: center;
-        background: #efefef;
         width: 100%;
       }
 

services/web/frontend/stylesheets/app/content_page.less

@@ -5,15 +5,22 @@
 .content-page {
   word-break: break-word;
 
-  a:not(.btn) {
+  /*
+    Links and Buttons
+  */
+  a {
     color: @link-color-alt;
     &:hover {
       color: @link-hover-color-alt;
     }
   }
+
+  .reset-btns; // reapply btn style to correct color property set on <a> above
+
   hr {
     border-color: @hr-border-alt;
   }
+
   .quote-by {
     min-width: 80px;
     overflow: hidden;
@@ -24,7 +31,7 @@
   }
 
   /*
-    section 
+    section
   */
   section {
     padding: @line-height-computed (@grid-gutter-width / 2);
@@ -35,6 +42,14 @@
       }
       &.green {
         background-color: @ol-green;
+
+        .no-card * {
+          .btn-primary,
+          .btn-success {
+            // only correct button colors when green on green
+            .btn-primary-on-primary-bg;
+          }
+        }
       }
       &.blue-gray-dark {
         background-color: @ol-blue-gray-5;
@@ -42,6 +57,24 @@
       &.blue-gray-light {
         background-color: @ol-blue-gray-1;
       }
+
+      &.green,
+      &.green-dark,
+      &.blue-gray-dark {
+        .no-card * {
+          color: @white;
+          a {
+            text-decoration: underline;
+          }
+          .btn {
+            text-decoration: none;
+          }
+
+          .form-control {
+            color: @input-color;
+          }
+        }
+      }
     }
     .section-row {
       margin: 0 auto;

services/web/frontend/stylesheets/components/buttons.less

@@ -65,6 +65,9 @@
 .btn-primary {
   .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
 }
+.btn-primary-on-primary-bg {
+  .button-variant(@white; @ol-dark-green; @ol-dark-green);
+}
 // Success appears as green
 .btn-success {
   .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
@@ -82,6 +85,31 @@
   .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
 }
 
+.reset-btns {
+  // reset all buttons back to their original colors
+  .btn-danger {
+    .btn-danger;
+  }
+  .btn-default {
+    .btn-default;
+  }
+  .btn-default-outline {
+    .btn-default-outline;
+  }
+  .btn-info {
+    .btn-info;
+  }
+  .btn-primary {
+    .btn-primary;
+  }
+  .btn-success {
+    .btn-success;
+  }
+  .btn-warning {
+    .btn-warning;
+  }
+}
+
 // Link buttons
 // -------------------------