From ce0fa69402f336406969a0e011379d355c760c5f Mon Sep 17 00:00:00 2001 From: Tim Down <158919+timdown@users.noreply.github.com> Date: Thu, 31 Oct 2024 11:03:06 +0000 Subject: [PATCH] Merge pull request #21125 from overleaf/td-bs5-scss-tidy Bootstrap 5 Sass code tidy GitOrigin-RevId: 550add757c5bf1476446ad31c386c0a4e5522a9e --- .../abstracts/variable-overrides.scss | 3 +++ .../bootstrap-5/abstracts/variables.scss | 3 --- .../bootstrap-5/base/bootstrap.scss | 12 ------------ .../stylesheets/bootstrap-5/base/colors.scss | 18 ++++++++++++++++++ .../stylesheets/bootstrap-5/base/links.scss | 2 +- .../bootstrap-5/base/typography.scss | 4 ++++ .../bootstrap-5/components/blog-posts.scss | 2 +- .../bootstrap-5/components/styled-text.scss | 4 ++-- .../bootstrap-5/foundations/colors.scss | 18 ------------------ .../bootstrap-5/foundations/typography.scss | 3 +-- .../stylesheets/bootstrap-5/main-style.scss | 17 ++++++++++++++++- 11 files changed, 46 insertions(+), 40 deletions(-) create mode 100644 services/web/frontend/stylesheets/bootstrap-5/base/colors.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss index c5caed3bbb..b70df80983 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss +++ b/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 diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss index cd2fc630da..8e24f4c800 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss +++ b/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'); diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss b/services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss index 0c726f1c59..d45d3a6a06 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss +++ b/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'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/colors.scss b/services/web/frontend/stylesheets/bootstrap-5/base/colors.scss new file mode 100644 index 0000000000..ce03052cef --- /dev/null +++ b/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}; +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/links.scss b/services/web/frontend/stylesheets/bootstrap-5/base/links.scss index c87e571d36..794f5922b3 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/base/links.scss +++ b/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); diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/typography.scss b/services/web/frontend/stylesheets/bootstrap-5/base/typography.scss index 5b2adf6587..0efd5d811e 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/base/typography.scss +++ b/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; diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss b/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss index 5403ac8b2c..96baa65799 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss +++ b/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; diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss b/services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss index 3953b1c019..151c03f360 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss +++ b/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); diff --git a/services/web/frontend/stylesheets/bootstrap-5/foundations/colors.scss b/services/web/frontend/stylesheets/bootstrap-5/foundations/colors.scss index 1f2984a159..84a169b0eb 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/foundations/colors.scss +++ b/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); diff --git a/services/web/frontend/stylesheets/bootstrap-5/foundations/typography.scss b/services/web/frontend/stylesheets/bootstrap-5/foundations/typography.scss index 6b316f5bc7..b078516b5c 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/foundations/typography.scss +++ b/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 diff --git a/services/web/frontend/stylesheets/bootstrap-5/main-style.scss b/services/web/frontend/stylesheets/bootstrap-5/main-style.scss index c5865ecbec..62459a9514 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/main-style.scss +++ b/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';