Clean up sass variable usage

- updated the font to its direct use theme and removed -title-height
- removed the 1-time used scss variables and updated directly in the files
- Fixes #11458

client/scss/components/_bulk_actions.scss

@@ -66,7 +66,7 @@
       color: theme('colors.text-link-default');
       background-color: transparent;
       border: 0;
-      font-family: $font-sans;
+      font-family: theme('fontFamily.sans');
       padding: 0;
     }
 

client/scss/components/_footer.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+$grid-gutter-width: 3%;
 
 .footer {
   @include transition(bottom 0.5s ease 1s);

client/scss/components/_userbar.scss

@@ -114,7 +114,7 @@ $positions: (
   margin: 0;
   min-width: 210px;
   visibility: hidden;
-  font-family: $font-sans;
+  font-family: theme('fontFamily.sans');
   font-size: 0.875rem;
   padding-inline-start: 0;
   text-decoration: none;
@@ -142,7 +142,7 @@ $positions: (
   overflow: hidden;
   transition-duration: 0.125s;
   transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
-  font-family: $font-sans;
+  font-family: theme('fontFamily.sans');
   font-size: 1rem;
   text-decoration: none;
 
@@ -216,7 +216,7 @@ $positions: (
 .w-dialog--userbar {
   // Display off to the side of the page rather than in the middle.
   inset-inline-start: auto;
-  font-family: $font-sans;
+  font-family: theme('fontFamily.sans');
   padding-inline-end: 2rem;
   z-index: $userbar-z-index;
 

client/scss/elements/_typography.scss

@@ -1,6 +1,6 @@
 body {
   -webkit-font-smoothing: antialiased; // Do not remove!
-  font-family: $font-sans;
+  font-family: theme('fontFamily.sans');
   font-size: 85%;
   line-height: 1.5em;
   color: theme('colors.text-context');
@@ -44,13 +44,13 @@ code {
   box-shadow: inset 0 0 4px 0 theme('colors.black-20');
   background-color: theme('colors.surface-page');
   color: theme('colors.text-context');
-  font-family: $font-mono;
+  font-family: theme('fontFamily.mono');
   padding: 2px 5px;
 }
 
 kbd {
   border-radius: 3px;
-  font-family: $font-sans;
+  font-family: theme('fontFamily.sans');
   border: 1px solid currentColor;
   border-color: theme('colors.black-20');
   color: theme('colors.text-meta');
@@ -58,7 +58,7 @@ kbd {
 }
 
 pre {
-  font-family: $font-mono;
+  font-family: theme('fontFamily.mono');
 }
 
 dl,

client/scss/layouts/_404.scss

@@ -5,7 +5,7 @@
   width: 100vw;
   height: 100vh;
   background-color: theme('colors.secondary.400');
-  font-family: $font-sans;
+  font-family: theme('fontFamily.sans');
   color: theme('colors.white.DEFAULT');
 }
 

client/scss/settings/_variables.scss

@@ -9,10 +9,6 @@
 $images-root: '../images/';
 
 // grid settings
-$grid-columns: 12;
-$grid-gutter-width: 3%;
-$grid-max-width: 1200px;
-$grid-content-indent: 0.7;
 
 $mobile-nice-padding: 20px;
 $desktop-nice-padding: 80px;
@@ -44,9 +40,6 @@ $breakpoints: (
 // Our fonts are based off of a list of system fallbacks to ensure
 // that the most 'up-to-date' and available system font is used and rendered consistently as possible across browsers.
 
-$font-sans: theme('fontFamily.sans');
-$font-mono: theme('fontFamily.mono');
-
 // misc sizing
 $menu-width: 200px;
 $menu-width-slim: 60px;
@@ -54,13 +47,8 @@ $side-panel-width: 500px;
 
 $mobile-nav-indent: 50px;
 
-$sidebar-toggle-spacing: 12px;
-$sidebar-toggle-size: 35px;
-
 // transitions
 // Please keep in sync with SIDEBAR_TRANSITION_DURATION variable in `client/src/components/Sidebar/Sidebar.tsx`
 $menu-transition-duration: 150ms;
 
 $focus-outline-width: 3px;
-
-$object-title-height: 40px;

client/scss/tools/_mixins.grid.scss

@@ -1,5 +1,9 @@
 @use 'sass:math';
 
+// grid settings
+$grid-columns: 12;
+$grid-gutter-width: 3%;
+
 // Utility variable - you should never need to modify this
 $padding: math.div($grid-gutter-width, 2);
 

client/src/components/Draftail/Draftail.scss

@@ -23,7 +23,7 @@ $draftail-toolbar-icon-size: 1em;
 $draftail-trigger-additional-size: 30px;
 $draftail-block-hoverable-area-offset: 40px;
 
-$draftail-editor-font-family: $font-sans;
+$draftail-editor-font-family: theme('fontFamily.sans');
 
 @import '../../../../node_modules/draft-js/dist/Draft';
 @import '../../../../node_modules/draftail/src/index';

client/src/components/Sidebar/Sidebar.scss

@@ -1,3 +1,6 @@
+$sidebar-toggle-spacing: 12px;
+$sidebar-toggle-size: 35px;
+
 @mixin sidebar-toggle() {
   @include transition(background-color $menu-transition-duration ease);