Mostly replace font-size($step) SASS mixin with equivalent CSS classes

packages/frontend/app/components/bulk-new-users.gjs

@@ -436,7 +436,7 @@ export default class BulkNewUsersComponent extends Component {
               />
             </div>
             {{#if this.updateSelectedFile.isRunning}}
-              <div class="file-is-loading">
+              <div class="file-is-loading font-size-xxxl">
                 <LoadingSpinner />
               </div>
             {{else if (gte this.proposedUsers.length 1)}}

packages/frontend/app/components/course-search-result.gjs

@@ -27,24 +27,24 @@ export default class CourseSearchResultComponent extends Component {
         <small>{{@course.year}}</small>
         {{@course.title}}
       </LinkTo>
-      <span class="school-flag" data-test-school-title>
+      <span class="school-flag font-size-smallest" data-test-school-title>
         {{@course.school}}
       </span>
-      <span class="course-flag">
+      <span class="course-flag font-size-smallest">
         {{t "general.course"}}
       </span>
       <GlobalSearchTags @tags={{@course.matchedIn}} />
       {{#if this.sessions}}
         <ul>
-          <li class="sessions">
+          <li class="sessions font-size-small">
             {{t "general.sessions"}}:
           </li>
           {{#each this.sessions as |session|}}
             <li class="session-row">
               <LinkTo
                 @route="session"
                 @models={{array @course.id session.id}}
-                class="session-title-link"
+                class="session-title-link font-size-small"
               >
                 {{session.title}}
               </LinkTo>
@@ -55,7 +55,7 @@ export default class CourseSearchResultComponent extends Component {
             {{#if this.showMore}}
               <li>
                 <button
-                  class="show-less link-button"
+                  class="show-less link-button font-size-small"
                   type="button"
                   {{on "click" (set this "showMore" false)}}
                 >
@@ -66,7 +66,7 @@ export default class CourseSearchResultComponent extends Component {
             {{else}}
               <li>
                 <button
-                  class="show-more link-button"
+                  class="show-more link-button font-size-small"
                   type="button"
                   {{on "click" (set this "showMore" true)}}
                 >

packages/frontend/app/components/curriculum-inventory/new-sequence-block.gjs

@@ -462,7 +462,7 @@ export default class CurriculumInventoryNewSequenceBlock extends Component {
               {{/each}}
             </select>
             {{#if this.course}}
-              <span class="details" data-test-course-details>
+              <span class="details font-size-small" data-test-course-details>
                 {{t "general.level"}}:
                 {{this.course.level}},
                 {{t "general.startDate"}}:

packages/frontend/app/components/curriculum-inventory/report-overview.gjs

@@ -233,22 +233,22 @@ export default class CurriculumInventoryReportOverviewComponent extends Componen
     >
       {{#let (uniqueId) as |templateId|}}
         <div class="report-overview-header">
-          <div class="title" data-test-title>
+          <div class="title font-size-base" data-test-title>
             {{t "general.overview"}}
           </div>
           <div class="report-overview-actions">
             <LinkTo
               @route="verification-preview"
               @model={{@report}}
-              class="verification-preview"
+              class="verification-preview font-size-medium"
               title={{t "general.verificationPreviewFor" name=@report.name}}
               data-test-transition-to-verification-preview
             >
               <FaIcon @icon={{faTable}} @fixedWidth={{true}} />
             </LinkTo>
             {{#if this.showRollover}}
               <button
-                class="link-button rollover"
+                class="link-button rollover font-size-medium"
                 type="button"
                 aria-label={{t "general.curriculumInventoryReportRollover"}}
                 {{on "click" this.transitionToRollover}}

packages/frontend/app/components/curriculum-inventory/sequence-block-overview.gjs

@@ -695,7 +695,7 @@ export default class CurriculumInventorySequenceBlockOverviewComponent extends C
               </span>
               {{#if this.selectedCourse}}
                 {{#if this.selectedCourse.id}}
-                  <span class="details" data-test-course-details>
+                  <span class="details font-size-small" data-test-course-details>
                     {{t "general.level"}}:
                     {{this.selectedCourse.level}},
                     {{t "general.startDate"}}:
@@ -720,7 +720,7 @@ export default class CurriculumInventorySequenceBlockOverviewComponent extends C
                   </span>
                 {{/if}}
               {{else if this.course}}
-                <span class="details" data-test-course-details>
+                <span class="details font-size-small" data-test-course-details>
                   {{t "general.level"}}:
                   {{this.course.level}},
                   {{t "general.startDate"}}:

packages/frontend/app/components/global-search-tags.gjs

@@ -5,7 +5,7 @@ import { concat } from '@ember/helper';
   {{#if @tags}}
     <div class="global-search-tags" data-test-global-search-tags>
       {{#each @tags as |tag|}}
-        <span class="global-search-tag" data-test-global-search-tag>
+        <span class="global-search-tag font-size-smallest" data-test-global-search-tag>
           {{#if (eq tag "meshdescriptors")}}
             {{t "general.mesh"}}
           {{else if (eq tag "learningmaterials")}}

packages/frontend/app/components/learner-group/upload-data.gjs

@@ -266,7 +266,7 @@ export default class LearnerGroupUploadDataComponent extends Component {
         />
       {{/if}}
       {{#if this.uploadData.isPending}}
-        <LoadingSpinner class="loading-file" />
+        <LoadingSpinner class="loading-file font-size-xxl" />
       {{/if}}
       {{#if this.invalidUsers}}
         <p class="error">

packages/frontend/app/components/manage-users-summary.gjs

@@ -264,13 +264,13 @@ export default class ManageUsersSummaryComponent extends Component {
               @query={{hash showNewUserForm=true showBulkNewUserForm=false filter=null}}
               data-test-create-user-link
             >
-              <button type="button">
+              <button type="button" class="font-size-base">
                 {{t "general.create"}}
               </button>
             </LinkTo>
             {{#if (notEq this.userSearchType "ldap")}}
               <LinkTo @route="users" @query={{hash showBulkNewUserForm=true showNewUserForm=false}}>
-                <button type="button">
+                <button type="button" class="font-size-base">
                   {{t "general.createBulk"}}
                 </button>
               </LinkTo>
@@ -324,7 +324,7 @@ export default class ManageUsersSummaryComponent extends Component {
               {{#if (eq result.type "user")}}
                 <li class="user clickable">
                   <button
-                    class="link-button"
+                    class="link-button font-size-base"
                     type="button"
                     disabled={{this.clickUser.isRunning}}
                     data-userid={{result.user.id}}

packages/frontend/app/components/my-profile.gjs

@@ -171,7 +171,7 @@ export default class MyProfileComponent extends Component {
           />
           <LearnerGroups @user={{@user}} />
         </div>
-        <section class="token-maintenance" data-test-token-maintenance>
+        <section class="token-maintenance font-size-small" data-test-token-maintenance>
           <h3>
             {{t "general.manageAPITokens"}}
           </h3>

packages/frontend/app/components/pending-updates-summary.gjs

@@ -132,7 +132,7 @@ export default class PendingUpdatesSummaryComponent extends Component {
               @query={{hash school=this.bestSelectedSchool.id}}
               data-test-manage
             >
-              <button type="button">
+              <button type="button" class="font-size-base">
                 {{t "general.manage"}}
               </button>
             </LinkTo>

packages/frontend/app/components/program-year/collapsed-objectives.gjs

@@ -58,7 +58,7 @@ export default class ProgramYearCollapsedObjectivesComponent extends Component {
         </button>
       </div>
       <div class="content">
-        <table class="ilios-table ilios-table-colors">
+        <table class="ilios-table ilios-table-colors font-size-small">
           <thead>
             <tr>
               <th class="text-left">

packages/frontend/app/components/program-year/header.gjs

@@ -35,7 +35,7 @@ export default class ProgramYearHeaderComponent extends Component {
             <FaIcon @icon={{faLock}} data-test-lock />
           {{/if}}
           {{#if @programYear}}
-            <h3 data-test-matriculation-year>
+            <h3 class="font-size-large" data-test-matriculation-year>
               {{t "general.matriculationYear"}}
               {{#if this.academicYearCrossesCalendarYearBoundaries}}
                 {{@programYear.startYear}}
@@ -45,7 +45,7 @@ export default class ProgramYearHeaderComponent extends Component {
                 {{@programYear.startYear}}
               {{/if}}
             </h3>
-            <h3 data-test-cohort>
+            <h3 class="font-size-large" data-test-cohort>
               {{#if @programYear.cohort.title}}
                 ({{@programYear.cohort.title}})
               {{else}}

packages/frontend/app/components/program-year/objective-list-item.gjs

@@ -301,7 +301,7 @@ export default class ProgramYearObjectiveListItemComponent extends Component {
           </button>
         {{/if}}
       </div>
-      <div class="description grid-item" data-test-description>
+      <div class="description grid-item font-size-base" data-test-description>
         <FadeText
           @forceExpanded={{this.fadeTextExpanded}}
           @setExpanded={{set this "fadeTextExpanded"}}

packages/frontend/app/components/program-year/overview.gjs

@@ -5,14 +5,15 @@ import { faChartColumn } from '@fortawesome/free-solid-svg-icons';
 <template>
   <div class="programyear-overview" data-test-program-year-overview ...attributes>
     <div class="programyear-overview-header">
-      <h4 data-test-title>
+      <h4 class="font-size-base" data-test-title>
         {{t "general.overview"}}
       </h4>
       <div class="programyear-overview-actions" data-test-actions>
         <LinkTo
           @route="program-year-visualize-objectives"
           @model={{@programYear}}
           title={{t "general.programYearVisualizations"}}
+          class="font-size-medium"
           data-test-go-to-visualizations
         >
           <FaIcon @icon={{faChartColumn}} />

packages/frontend/app/components/program/overview.gjs

@@ -59,7 +59,7 @@ export default class ProgramOverviewComponent extends Component {
   }
   <template>
     <div class="program-overview" data-test-program-overview ...attributes>
-      <h2>
+      <h2 class="font-size-base">
         {{t "general.overview"}}
       </h2>
       <div class="program-overview-content">

packages/frontend/app/components/reports/curriculum/choose-course.gjs

@@ -130,7 +130,7 @@ export default class ReportsCurriculumChooseCourse extends Component {
           <button
             type="button"
             aria-label={{t "general.deselectAllCourses"}}
-            class="deselect-all"
+            class="deselect-all font-size-small"
             {{on "click" @removeAll}}
             data-test-deselect-all
           >

packages/frontend/app/components/reports/curriculum/header.gjs

@@ -156,7 +156,7 @@ export default class ReportsCurriculumHeader extends Component {
   };
   <template>
     <div class="reports-curriculum-header" data-test-reports-curriculum-header>
-      <div class="run">
+      <div class="run font-size-medium">
         <p data-test-run-summary>
           {{#if @countSelectedCourses}}
             {{#if @showReportResults}}

packages/frontend/app/components/reports/switcher.gjs

@@ -5,11 +5,12 @@ import t from 'ember-intl/helpers/t';
     <LinkTo
       @route="reports.subjects"
       @current-when="reports.subjects reports.subject"
+      class="font-size-medium"
       data-test-subject
     >
       {{t "general.subjectReports"}}
     </LinkTo>
-    <LinkTo @route="reports.curriculum" data-test-curriculum>
+    <LinkTo @route="reports.curriculum" class="font-size-medium" data-test-curriculum>
       {{t "general.curriculumReports"}}
     </LinkTo>
   </div>

packages/frontend/app/components/school-competencies-collapsed.gjs

@@ -55,7 +55,7 @@ export default class SchoolCompetenciesCollapsedComponent extends Component {
         </button>
       </div>
       <div class="content">
-        <table class="ilios-table ilios-table-colors condensed">
+        <table class="ilios-table ilios-table-colors condensed font-size-small">
           <thead>
             <tr>
               <th class="text-left">

packages/frontend/app/components/school-session-attributes-collapsed.gjs

@@ -21,7 +21,7 @@ import { faCaretRight, faBan, faCheck } from '@fortawesome/free-solid-svg-icons'
       </button>
     </div>
     <div class="content">
-      <table class="ilios-table ilios-table-colors condensed">
+      <table class="ilios-table ilios-table-colors condensed font-size-small">
         <thead>
           <tr>
             <th class="text-left">

packages/frontend/app/components/school-session-attributes-manager.gjs

@@ -4,7 +4,7 @@ import { on } from '@ember/modifier';
 <template>
   {{#let (uniqueId) as |templateId|}}
     <div data-test-school-session-attributes-manager ...attributes>
-      <table class="ilios-table ilios-table-colors condensed">
+      <table class="ilios-table ilios-table-colors condensed font-size-small">
         <thead>
           <tr>
             <th class="text-left">

packages/frontend/app/components/school-session-types-collapsed.gjs

@@ -49,7 +49,7 @@ export default class SchoolSessionTypesCollapseComponent extends Component {
       </div>
 
       <div class="content">
-        <table class="ilios-table ilios-table-colors condensed">
+        <table class="ilios-table ilios-table-colors condensed font-size-small">
           <thead>
             <tr>
               <th class="text-left">

packages/frontend/app/components/school-vocabularies-collapsed.gjs

@@ -44,7 +44,7 @@ export default class SchoolVocabulariesCollapsedComponent extends Component {
         <LoadingSpinner />
       {{else}}
         <div class="content">
-          <table class="ilios-table ilios-table-colors condensed">
+          <table class="ilios-table ilios-table-colors condensed font-size-small">
             <thead>
               <tr>
                 <th class="text-left">

packages/frontend/app/components/update-notification.gjs

@@ -26,7 +26,7 @@ export default class UpdateNotificationComponent extends Component {
   <template>
     {{#if this.newVersion.isNewVersionAvailable}}
       <div class="update-notification critical-notice" data-test-update-notification>
-        <button type="button" {{on "click" (perform this.click)}}>
+        <button type="button" class="font-size-large" {{on "click" (perform this.click)}}>
           {{t "general.iliosUpdatePending"}}
         </button>
       </div>

packages/frontend/app/components/user-guide-link.gjs

@@ -5,6 +5,7 @@ import { faQuestion } from '@fortawesome/free-solid-svg-icons';
   <div class="user-guide-link" data-test-user-guide-link>
     <a
       href="https://iliosproject.gitbook.io/ilios-user-guide"
+      class="font-size-small"
       target="_blank"
       title={{t "general.iliosUserGuide"}}
       rel="noopener noreferrer"

packages/frontend/app/components/user-profile-bio-details.gjs

@@ -10,7 +10,7 @@ import { faPenToSquare } from '@fortawesome/free-solid-svg-icons';
         <button
           aria-label={{t "general.manage"}}
           type="button"
-          class="manage"
+          class="manage font-size-base"
           {{on "click" (fn @setIsManaging true)}}
           data-test-manage
         >
@@ -25,7 +25,7 @@ import { faPenToSquare } from '@fortawesome/free-solid-svg-icons';
       </div>
     {{/unless}}
 
-    <p class="primary-school" data-test-school>
+    <p class="primary-school font-size-medium" data-test-school>
       <strong>
         {{t "general.primarySchool"}}:
       </strong>