Merge pull request #17309 from overleaf/rd-bootstrap-5-stylelint

[web] Introducing Stylelint as the CSS linter

GitOrigin-RevId: 89ee8860cdb3a94949749577b63cde2c3dc213fb

services/web/.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["stylelint-config-standard-scss"]
+}

services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss

@@ -50,5 +50,5 @@
   cursor: pointer;
   background: transparent;
   border: 0;
-  -webkit-appearance: none;
+  appearance: none;
 }

services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss

@@ -6,7 +6,6 @@ $prefix: bs-;
 $font-family-sans-serif: 'Noto Sans', sans-serif;
 $font-family-serif: 'Merriweather', serif;
 $font-family-monospace: 'DM Mono', monospace;
-
 $font-size-base: 1rem;
 $font-size-sm: var(--font-size-02);
 $line-height-base: 1.5;

services/web/frontend/stylesheets/bootstrap-5/components/badge.scss

@@ -11,7 +11,7 @@
 }
 
 .badge-close {
-  @include reset-button();
+  @include reset-button;
 
   display: flex;
   align-items: center;
@@ -20,6 +20,7 @@
   // a random number that would cause the close button to expand enough
   // so that it won't be affected by badge's padding
   $expand: 100px;
+
   padding: $expand $spacing-01;
   margin: (-$expand) (-$spacing-02) (-$expand) $spacing-02;
   user-select: none;

services/web/frontend/stylesheets/bootstrap-5/components/button.scss

@@ -83,6 +83,7 @@
       $color: var(--content-primary-dark),
       $background: var(--blue-70)
     );
+
     background: var(--premium-gradient);
   }
 }
@@ -141,6 +142,7 @@
     height: 20px;
     width: 20px;
   }
+
   .loading-spinner-large {
     border-width: 0.2em;
     height: 24px;

services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss

@@ -4,6 +4,7 @@
 
 .dropdown-menu {
   @include shadow-sm;
+
   border: none;
   border-radius: var(--border-radius-base);
   padding: var(--spacing-02);
@@ -13,6 +14,7 @@
 
 .dropdown-item {
   @include body-sm;
+
   border-radius: var(--border-radius-base);
   color: var(--neutral-90);
   display: grid;
@@ -22,16 +24,16 @@
   padding: var(--spacing-05) var(--spacing-04);
   position: relative;
 
-  &:hover:not(.active) {
-    background-color: var(--bg-light-secondary);
-    cursor: pointer;
-  }
-
   &:active {
     background-color: var(--bg-accent-03);
     color: inherit;
   }
 
+  &:hover:not(.active) {
+    background-color: var(--bg-light-secondary);
+    cursor: pointer;
+  }
+
   &[variant='danger'] {
     color: var(--content-danger);
 
@@ -54,6 +56,7 @@
 
 .dropdown-item-description {
   @include body-xs;
+
   color: var(--content-secondary);
   margin-top: var(--spacing-01);
 }
@@ -97,6 +100,7 @@
   &.btn-danger {
     border-left: 1px solid rgb($neutral-90, 0.16);
   }
+
   &.btn-secondary {
     border-left: 1px solid var(--neutral-60);
   }

services/web/frontend/stylesheets/bootstrap-5/components/notifications.scss

@@ -2,6 +2,7 @@
   // will be deprecated once notifications moved to use .notification (see below)
   flex-grow: 1;
   width: 90%;
+
   @include media-breakpoint-up(md) {
     width: auto;
   }
@@ -13,6 +14,7 @@
   // will be deprecated once notifications moved to use .notification (see below)
   margin-top: calc($line-height-computed / 2); // match paragraph padding
   order: 1;
+
   @include media-breakpoint-up(md) {
     margin-top: 0;
     order: 0;
@@ -38,7 +40,7 @@
 
     &:hover,
     &:focus {
-      background-color: rgba(var(--neutral-90), 0.08);
+      background-color: rgb(var(--neutral-90) 0.08);
       color: var(--content-secondary);
     }
   }
@@ -108,9 +110,6 @@
     height: $spacing-12;
     align-items: center;
     display: flex;
-  }
-
-  .notification-close-btn {
     padding: 0 0 0 $spacing-06;
 
     button {
@@ -125,7 +124,7 @@
 
       &:hover,
       &:focus {
-        background-color: rgba(var(--neutral-90), 0.08);
+        background-color: rgb(var(--neutral-90) 0.08);
         color: var(--content-secondary);
       }
     }
@@ -134,34 +133,43 @@
   &.notification-type-info {
     background-color: var(--bg-info-03);
     border: 1px solid var(--blue-20);
+
     .notification-icon {
       color: var(--blue-50);
     }
   }
+
   &.notification-type-success {
     background-color: var(--bg-accent-03);
     border: 1px solid var(--green-20);
+
     .notification-icon {
       color: var(--green-50);
     }
   }
+
   &.notification-type-warning {
     background-color: var(--bg-warning-03);
     border: 1px solid var(--yellow-20);
+
     .notification-icon {
       color: var(--yellow-40);
     }
   }
+
   &.notification-type-error {
     background-color: var(--bg-danger-03);
     border: 1px solid var(--red-20);
+
     .notification-icon {
       color: var(--red-50);
     }
   }
+
   &.notification-type-offer {
     background-color: var(--bg-light-primary);
     border: 1px solid var(--neutral-20);
+
     .notification-icon {
       color: var(--neutral-50);
     }
@@ -203,9 +211,11 @@
 .reconfirm-notification {
   display: flex;
   width: 100%;
+
   .fa-warning {
     margin-right: $spacing-05;
   }
+
   .btn-reconfirm {
     float: right;
     margin-left: $spacing-05;
@@ -238,6 +248,7 @@
         .reconfirm-notification {
           background-color: var(--neutral-10);
           border-radius: $border-radius-base;
+
           .fa-warning {
             color: var(--yellow-40);
           }

services/web/frontend/stylesheets/bootstrap-5/components/tooltip.scss

@@ -1,5 +1,6 @@
 .tooltip {
   line-height: 20px;
+
   @include shadow-md;
 
   &.#{$prefix}tooltip-top {

services/web/frontend/stylesheets/bootstrap-5/foundations/colors.scss

@@ -8,7 +8,7 @@
 /* ====== Sass color variables ====== */
 
 /* Neutral */
-$white: #ffffff;
+$white: #fff;
 $neutral-10: #f4f5f6;
 $neutral-20: #e7e9ee;
 $neutral-30: #d0d5dd;
@@ -60,28 +60,22 @@ $bg-light-primary: $white;
 $bg-light-secondary: $neutral-10;
 $bg-light-tertiary: $neutral-20;
 $bg-light-disabled: $neutral-20;
-
 $bg-dark-primary: $neutral-90;
 $bg-dark-secondary: $neutral-80;
 $bg-dark-tertiary: $neutral-70;
 $bg-dark-disabled: $neutral-70;
-
 $bg-accent-01: $green-50;
 $bg-accent-02: $green-60;
 $bg-accent-03: $green-10;
-
 $bg-danger-01: $red-50;
 $bg-danger-02: $red-60;
 $bg-danger-03: $red-10;
-
 $bg-warning-01: $yellow-50;
 $bg-warning-02: $yellow-60;
 $bg-warning-03: $yellow-10;
-
 $bg-info-01: $blue-50;
 $bg-info-02: $blue-60;
 $bg-info-03: $blue-10;
-
 $content-primary: $neutral-90;
 $content-secondary: $neutral-70;
 $content-disabled: $neutral-40;
@@ -89,21 +83,18 @@ $content-placeholder: $neutral-60;
 $content-danger: $red-50;
 $content-warning: $yellow-50;
 $content-positive: $green-50;
-
 $border-primary: $neutral-60;
 $border-hover: $neutral-70;
 $border-disabled: $neutral-20;
 $border-active: $blue-50;
 $border-danger: $red-50;
 $border-divider: $neutral-20;
-
 $link-web: $green-60;
 $link-web-hover: $green-70;
 $link-web-visited: $green-70;
 $link-ui: $blue-50;
 $link-ui-hover: $blue-60;
 $link-ui-visited: $blue-60;
-
 $content-primary-dark: $white;
 $content-secondary-dark: $neutral-20;
 $content-disabled-dark: $neutral-60;
@@ -111,14 +102,12 @@ $content-placeholder-dark: $neutral-50;
 $content-danger-dark: $red-40;
 $content-warning-dark: $yellow-40;
 $content-positive-dark: $green-40;
-
 $border-primary-dark: $neutral-30;
 $border-hover-dark: $neutral-20;
 $border-disabled-dark: $neutral-80;
 $border-active-dark: $blue-30;
 $border-danger-dark: $red-40;
 $border-divider-dark: $neutral-80;
-
 $link-web-dark: $green-30;
 $link-web-hover-dark: $green-40;
 $link-web-visited-dark: $green-40;
@@ -181,28 +170,22 @@ $link-ui-visited-dark: $blue-40;
   --bg-light-secondary: var(--neutral-10);
   --bg-light-tertiary: var(--neutral-20);
   --bg-light-disabled: var(--neutral-20);
-
   --bg-dark-primary: var(--neutral-90);
   --bg-dark-secondary: var(--neutral-80);
   --bg-dark-tertiary: var(--neutral-70);
   --bg-dark-disabled: var(--neutral-70);
-
   --bg-accent-01: var(--green-50);
   --bg-accent-02: var(--green-60);
   --bg-accent-03: var(--green-10);
-
   --bg-danger-01: var(--red-50);
   --bg-danger-02: var(--red-60);
   --bg-danger-03: var(--red-10);
-
   --bg-warning-01: var(--yellow-50);
   --bg-warning-02: var(--yellow-60);
   --bg-warning-03: var(--yellow-10);
-
   --bg-info-01: var(--blue-50);
   --bg-info-02: var(--blue-60);
   --bg-info-03: var(--blue-10);
-
   --content-primary: var(--neutral-90);
   --content-secondary: var(--neutral-70);
   --content-disabled: var(--neutral-40);
@@ -210,21 +193,18 @@ $link-ui-visited-dark: $blue-40;
   --content-danger: var(--red-50);
   --content-warning: var(--yellow-50);
   --content-positive: var(--green-50);
-
   --border-primary: var(--neutral-60);
   --border-hover: var(--neutral-70);
   --border-disabled: var(--neutral-20);
   --border-active: var(--blue-50);
   --border-danger: var(--red-50);
   --border-divider: var(--neutral-20);
-
   --link-web: var(--green-60);
   --link-web-hover: var(--green-70);
   --link-web-visited: var(--green-70);
   --link-ui: var(--blue-50);
   --link-ui-hover: var(--blue-60);
   --link-ui-visited: var(--blue-60);
-
   --content-primary-dark: var(--white);
   --content-secondary-dark: var(--neutral-20);
   --content-disabled-dark: var(--neutral-60);
@@ -232,14 +212,12 @@ $link-ui-visited-dark: $blue-40;
   --content-danger-dark: var(--red-40);
   --content-warning-dark: var(--yellow-40);
   --content-positive-dark: var(--green-40);
-
   --border-primary-dark: var(--neutral-30);
   --border-hover-dark: var(--neutral-20);
   --border-disabled-dark: var(--neutral-80);
   --border-active-dark: var(--blue-30);
   --border-danger-dark: var(--red-40);
   --border-divider-dark: var(--neutral-80);
-
   --link-web-dark: var(--green-30);
   --link-web-hover-dark: var(--green-40);
   --link-web-visited-dark: var(--green-40);

services/web/frontend/stylesheets/bootstrap-5/foundations/elevation.scss

@@ -1,18 +1,18 @@
 // Cards
 @mixin shadow-sm {
-  box-shadow: 0px 2px 8px rgba(30, 37, 48, 0.08);
+  box-shadow: 0 2px 8px rgb(30 37 48 / 8%);
 }
 
 // Tooltips, Callouts, Dropdowns, etc.
 @mixin shadow-md {
   box-shadow:
-    0px 4px 24px rgba(30, 37, 48, 0.12),
-    0px 1px 4px rgba(30, 37, 48, 0.08);
+    0 4px 24px rgb(30 37 48 / 12%),
+    0 1px 4px rgb(30 37 48 / 8%);
 }
 
 // Modals, drawers
 @mixin shadow-lg {
   box-shadow:
-    0px 8px 24px rgba(30, 37, 48, 0.16),
-    0px 4px 8px rgba(30, 37, 48, 0.16);
+    0 8px 24px rgb(30 37 48 / 16%),
+    0 4px 8px rgb(30 37 48 / 16%);
 }

services/web/frontend/stylesheets/bootstrap-5/foundations/typography.scss

@@ -15,7 +15,6 @@
   --font-size-11: 3.75rem; // 60px
   --font-size-12: 4.5rem; // 72px
   --font-size-13: 6em; // 96px
-
   --line-height-01: 1rem; // 16px
   --line-height-02: 1.25rem; // 20px
   --line-height-03: 1.5rem; // 24px
@@ -40,6 +39,7 @@
   font-size: var(--font-size-12);
   line-height: var(--line-height-11);
 }
+
 @mixin display-sm {
   font-size: var(--font-size-11);
   line-height: var(--line-height-10);

services/web/package.json

@@ -26,6 +26,8 @@
     "format:styles:fix": "prettier --write $PWD/'**/*.{css,less,scss}'",
     "lint": "eslint --max-warnings 0 --format unix --ext .js,.jsx,.mjs,.ts,.tsx .",
     "lint:fix": "eslint --fix --ext .js,.jsx,.mjs,.ts,.tsx .",
+    "stylelint": "stylelint '**/*.scss'",
+    "stylelint:fix": "stylelint '**/*.scss' --fix",
     "type-check": "tsc --noEmit",
     "extract-translations": "i18next-scanner",
     "migrations": "MONGO_SOCKET_TIMEOUT=0 east",
@@ -347,6 +349,7 @@
     "sinon-mongoose": "^2.3.0",
     "socket.io-mock": "^1.3.1",
     "storybook": "^8.0.4",
+    "stylelint-config-standard-scss": "^13.1.0",
     "terser-webpack-plugin": "^5.3.9",
     "thread-loader": "^4.0.2",
     "timekeeper": "^2.2.0",