Merge pull request #17560 from overleaf/rd-boostrap-files

[web] Update Sass folder structure

GitOrigin-RevId: 03ac5835e46a3a464f31fba386e2f81f4bf25c99

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

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'variable-overrides';

services/web/frontend/stylesheets/bootstrap-5/scss/bootstrap-rule-overrides/buttons.scss → services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss

@@ -1,3 +1,5 @@
+// Button
+
 @mixin ol-button-size(
   $font-size,
   $line-height,

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

@@ -0,0 +1,21 @@
+// Overrides for Bootstrap 5's default Sass variables
+
+// Fonts
+$font-family-sans-serif: 'Noto Sans', sans-serif;
+$font-family-serif: 'Merriweather', serif;
+$font-family-monospace: 'DM Mono', monospace;
+$font-size-base: $default-font-size;
+$line-height-base: $default-line-height;
+
+// Buttons
+$btn-font-family: $font-family-sans-serif;
+$btn-font-weight: 700;
+$btn-padding-x: $spacing-06;
+$btn-padding-y: $spacing-02;
+$btn-border-radius: $border-radius-full;
+$btn-border-radius-lg: $border-radius-full;
+$btn-border-radius-sm: $border-radius-full;
+
+// Colors
+$primary: $bg-accent-01;
+$secondary: $bg-light-primary;

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

@@ -7,7 +7,8 @@
 // Bootstrap itself because Bootstrap uses them to create the CSS variables it
 // uses, and in calculations to determine, for example, what color text to use
 // on a button based on contrast.
-@import 'bootstrap-variable-overrides';
+@import 'abstracts/all';
+@import 'foundations/all';
 
 // Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
 @import 'bootstrap-5/scss/variables';
@@ -31,3 +32,6 @@
 @import 'bootstrap-5/scss/modal';
 @import 'bootstrap-5/scss/utilities/api';
 @import 'bootstrap-5/scss/spinners';
+
+// Components custom style
+@import 'components/all';

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

@@ -0,0 +1,3 @@
+@import 'button';
+@import 'dropdown-menu';
+@import 'split-button';

services/web/frontend/stylesheets/bootstrap-5/css-variables/themes/ieee.css

@@ -1 +0,0 @@
-/* IEEE CSS variable overrides go in here */

services/web/frontend/stylesheets/bootstrap-5/css-variables/themes/light.css

@@ -1 +0,0 @@
-/* Light theme CSS variable overrides go in here */

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

@@ -0,0 +1,5 @@
+@import 'border-radius';
+@import 'colors';
+@import 'elevation';
+@import 'spacing';
+@import 'typography';

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

@@ -1,7 +1,4 @@
 @import 'main-style';
 
-// IEEE-specific theme overrides
-@import 'css-variables/themes/ieee';
-
 // IEEE-specific rules
 $ieee-wedge: 30px;

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

@@ -1,4 +1,3 @@
 @import 'main-style';
-@import 'css-variables/themes/light';
 
 $is-overleaf-light: true;

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

@@ -27,15 +27,5 @@ $is-overleaf-light: false;
 // Bootstrap's Sass variable must use @import rather than @use because
 // Bootstrap relies on its variables, mixins etc. all being global.
 
-// Include Bootstrap 5 itself, plus overrides of its Sass variable
-@import 'scss/bootstrap';
-
-// Override and extend Bootstrap styles. This can include overriding CSS
-// variables in the usual CSS way, and can also refer to (but not override)
-// Bootstrap Sass variables.
-@import 'scss/bootstrap-rule-overrides';
-
-// Components
-@import 'scss/components/button';
-@import 'scss/components/dropdown-menu';
-@import 'scss/components/split-button';
+// Include Bootstrap 5 itself, plus overrides and extend Bootstrap styles.
+@import 'bootstrap';

services/web/frontend/stylesheets/bootstrap-5/scss/bootstrap-rule-overrides.scss

@@ -1,3 +0,0 @@
-// This file is included after Bootstrap and is used to override non-default
-// Bootstrap variables and styles
-@import 'bootstrap-rule-overrides/buttons';

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

@@ -1,8 +0,0 @@
-// This file is included before Bootstrap and is used to override Bootstrap
-// default variables and styles
-@import 'bootstrap-variable-overrides/fonts';
-@import 'bootstrap-variable-overrides/buttons';
-
-// This isn't great but is necessary to persuade Bootstrap to render white text
-// on our green buttons
-$min-contrast-ratio: 3;

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

@@ -1,9 +0,0 @@
-// This file provides overrides for Bootstrap 5's default button-related Sass variables
-
-$btn-font-family: $font-family-sans-serif;
-$btn-font-weight: 700;
-$btn-padding-x: $spacing-06;
-$btn-padding-y: $spacing-02;
-$btn-border-radius: $border-radius-full;
-$btn-border-radius-lg: $border-radius-full;
-$btn-border-radius-sm: $border-radius-full;

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

@@ -1,11 +0,0 @@
-// This file provides overrides for Bootstrap 5's default font-related Sass variables
-
-$font-family-sans-serif: 'Noto Sans', sans-serif;
-$font-family-serif: 'Merriweather', serif;
-$font-family-monospace: 'DM Mono', monospace;
-$font-size-base: $default-font-size;
-$line-height-base: $default-line-height;
-
-// Colors
-$primary: $bg-accent-01;
-$secondary: $bg-light-primary;