Merge pull request #21125 from overleaf/td-bs5-scss-tidy

Bootstrap 5 Sass code tidy

GitOrigin-RevId: 550add757c5bf1476446ad31c386c0a4e5522a9e

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

@@ -125,6 +125,9 @@ $form-switch-padding-start: $spacing-03;
 $form-switch-focus-color: $component-active-color;
 $form-switch-checked-color: $component-active-color;
 
+// form-group
+$form-group-margin-bottom: $spacing-06;
+
 // Form validation
 
 // form-feedback-variables

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

@@ -6,8 +6,5 @@ $header-height: 68px;
 $toolbar-height: 40px;
 $toolbar-small-height: 32px;
 
-// Forms
-$form-group-margin-bottom: $spacing-06;
-
 // List of allowed themes
 $themes: ('default', 'light');

services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss

@@ -52,15 +52,3 @@
 
 // Mixins
 @import 'bootstrap-5/scss/mixins/breakpoints';
-
-// Components custom style
-@import '../components/all';
-
-// Custom helpers
-@import '../helpers/all';
-
-// Modals
-@import '../modals/all';
-
-// Pages custom style
-@import '../pages/all';

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

@@ -0,0 +1,18 @@
+/* Website redesign */
+$vivid-tangerine: #f1a695;
+$ceil: #9597c9;
+$caramel: #f9d38f;
+$dark-jungle-green: #0f271a;
+$sapphire-blue: #4354a3;
+$purple-bright: #939aff;
+$green-bright: #13c965;
+
+:root {
+  --vivid-tangerine: #{$vivid-tangerine};
+  --ceil: #{$ceil};
+  --caramel: #{$caramel};
+  --dark-jungle-green: #{$dark-jungle-green};
+  --sapphire-blue: #{$sapphire-blue};
+  --green-bright: #{$green-bright};
+  --purple-bright: #{$purple-bright};
+}

services/web/frontend/stylesheets/bootstrap-5/base/links.scss

@@ -23,7 +23,7 @@ a {
 }
 
 .link-monospace {
-  @extend .dm-mono;
+  @include font-mono;
 
   font-weight: 500;
   color: var(--green-50);

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

@@ -78,6 +78,10 @@ samp {
   color: var(--content-disabled) !important;
 }
 
+.dm-mono {
+  @include font-mono;
+}
+
 @include media-breakpoint-up(lg) {
   .text-center-only-desktop {
     text-align: center;

services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss

@@ -138,7 +138,7 @@
       margin-bottom: var(--spacing-07);
 
       a {
-        @extend .dm-mono;
+        @include font-mono;
 
         text-decoration: none;
         font-weight: 500;

services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss

@@ -1,5 +1,5 @@
 .text-with-bg {
-  @extend .dm-mono;
+  @include font-mono;
 
   padding: 0 var(--spacing-04);
   border-radius: var(--border-radius-medium);
@@ -28,7 +28,7 @@
 }
 
 .mono-text {
-  @extend .dm-mono;
+  @include font-mono;
   @include body-lg;
 
   color: var(--green-60);

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

@@ -55,15 +55,6 @@ $yellow-50: #8f5514;
 $yellow-60: #7a4304;
 $yellow-70: #633a0b;
 
-/* Website redesign */
-$vivid-tangerine: #f1a695;
-$ceil: #9597c9;
-$caramel: #f9d38f;
-$dark-jungle-green: #0f271a;
-$sapphire-blue: #4354a3;
-$purple-bright: #939aff;
-$green-bright: #13c965;
-
 /* ====== Semantic Sass color variables ====== */
 $bg-light-primary: $white;
 $bg-light-secondary: $neutral-10;
@@ -174,15 +165,6 @@ $link-ui-visited-dark: $blue-40;
   --yellow-60: #{$yellow-60};
   --yellow-70: #{$yellow-70};
 
-  /* Website redesign */
-  --vivid-tangerine: #{$vivid-tangerine};
-  --ceil: #{$ceil};
-  --caramel: #{$caramel};
-  --dark-jungle-green: #{$dark-jungle-green};
-  --sapphire-blue: #{$sapphire-blue};
-  --green-bright: #{$green-bright};
-  --purple-bright: #{$purple-bright};
-
   /* ====== Semantic CSS color variables ====== */
   --bg-light-primary: var(--white);
   --bg-light-secondary: var(--neutral-10);

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

@@ -1,5 +1,4 @@
 // This file provides CSS variables for font size and line height, plus Sass variables for base text size for Bootstrap
-@use 'sass:math';
 
 :root {
   --font-size-01: 0.75rem; // 12px
@@ -100,7 +99,7 @@
   line-height: var(--line-height-01);
 }
 
-.dm-mono {
+@mixin font-mono {
   font-family: 'DM Mono', monospace;
 
   // We're using the "ss05" (stylistic set 5) version of the DM Mono, by setting the `font-feature-settings` rule

services/web/frontend/stylesheets/bootstrap-5/main-style.scss

@@ -12,7 +12,7 @@
 // TODO Bootstrap 5: Check whether this works with Bootstrap 5, and whether we can replace it
 @import '../vendor/select/select';
 
-// Boostrap-related
+// Bootstrap-related
 
 // Note that files containing Bootstrap or Sass files that interact with
 // Bootstrap's Sass variables must use @import rather than @use because
@@ -21,9 +21,24 @@
 // Include Bootstrap 5 itself, plus overrides and extend Bootstrap styles.
 @import 'base/bootstrap';
 
+// Extra colours for the website redesign
+@import 'base/colors';
+
+// Components custom style
+@import 'components/all';
+
 // Typography-related
 @import 'base/typography';
 
+// Custom helpers
+@import 'helpers/all';
+
+// Modals
+@import 'modals/all';
+
+// Pages custom style
+@import 'pages/all';
+
 // Link styles
 @import 'base/links';
 @import 'base/base';