UI: Add typography styles

assets/css/app.scss

@@ -31,7 +31,7 @@
   // Forms.
 
   .help-block {
-    @apply mt-2 text-xs;
+    @apply mt-2 text-caption;
   }
 
   .has-error .ch-form-label {
@@ -39,7 +39,7 @@
   }
 
   .has-error .help-block {
-    @apply italic text-xs;
+    @apply italic text-caption;
   }
 
   .has-error .ch-form-control {
@@ -129,7 +129,7 @@
   // Page header
 
   .page-header {
-    @apply text-2xl flex flex-row gap-2;
+    @apply text-h3 flex flex-row gap-2;
   }
 
   #no-data-view {
@@ -167,7 +167,7 @@
 
   // Progress bars
   .progress {
-    @apply rounded-sm ring-1 text-sm text-center min-h-full ml-12 mr-4;
+    @apply rounded-sm ring-1 text-center min-h-full ml-12 mr-4;
   }
   .progress .progress-bar {
   }

assets/css/scorm.scss

@@ -291,7 +291,7 @@ body {
 }
 
 #scorm-info #progress_bar .progress {
-    @apply rounded-sm ring-1 bg-white text-sm text-center min-h-full ml-12 mr-4;
+    @apply rounded-sm ring-1 bg-white text-center min-h-full ml-12 mr-4;
 }
 
 #scorm-info .progress-bar {

assets/css/scss/atoms/_buttons.scss

@@ -230,7 +230,7 @@ $border-color_12: #9333EA;
   }
 
   .p-button-icon {
-    @apply font-semibold leading-6 text-sm w-[1.5rem] h-[1.5rem];
+    @apply font-semibold leading-6 w-[1.5rem] h-[1.5rem];
 
     &::before {
       @apply leading-6;
@@ -263,11 +263,11 @@ $border-color_12: #9333EA;
 }
 
 .p-button.p-button-sm {
-  @apply text-base px-4 py-1;
+  @apply text-body-1 px-4 py-1;
 }
 
 .p-button.p-button-lg {
-  @apply px-8 py-3 text-xl;
+  @apply px-8 py-3 text-h5;
 }
 
 // secondary button

assets/css/scss/index.scss

@@ -5,6 +5,8 @@
 //@import 'inbox';
 //@import 'install';
 
+@import "settings/typography";
+
 @import "atoms/buttons";
 
 @import "components/badges";

assets/css/scss/layout/_sidebar.scss

@@ -17,11 +17,11 @@
   }
 
   &__bottom {
-    @apply border-b border-solid border-gray-25 p-6 text-xs;
+    @apply border-b border-solid border-gray-25 p-6 text-tiny;
   }
 
   &__logout-link {
-    @apply block font-semibold whitespace-nowrap mt-5 mx-6 mb-3.5 px-4 py-2;
+    @apply block font-semibold whitespace-nowrap mt-5 mx-6 mb-3.5 px-4 py-2 text-body-2;
 
     .pi {
       @apply leading-normal;
@@ -37,7 +37,7 @@
   }
 
   &__button {
-    @apply hidden bg-white border border-solid border-gray-25 rounded-full absolute top-7 -right-5 text-xs text-primary
+    @apply hidden bg-white border border-solid border-gray-25 rounded-full absolute top-7 -right-5 text-tiny text-primary
       sm:inline-flex;
     z-index: 11;
 
@@ -55,7 +55,7 @@
         @apply gap-4 pl-8 py-3 pr-6 mb-1 font-semibold flex-nowrap;
 
         .p-panelmenu-icon {
-          @apply order-3 text-xs rotate-90;
+          @apply order-3 rotate-90;
         }
 
         .p-menuitem-icon {
@@ -131,7 +131,7 @@
       }
 
       &__logout-link {
-        @apply md:text-xs md:mx-5 md:my-3 md:py-3;
+        @apply md:mx-5 md:my-3 md:py-3 md:px-3 text-center;
 
         .logout-text {
           @apply sm:hidden sm:mr-0;

assets/css/scss/layout/_topbar.scss

@@ -117,7 +117,6 @@
     @apply bg-white border-none rounded-lg shadow-lg py-3 px-0 w-52 max-h-60 overflow-y-auto right-0;
 
     .p-submenu-icon {
-      @applt text-sm;
     }
 
     >.p-menuitem:hover,

assets/css/scss/settings/_typography.scss

@@ -0,0 +1,33 @@
+@layer base {
+  body {
+    @apply text-body-1;
+  }
+
+  header {
+    @apply font-bold text-header;
+  }
+
+  h1 {
+    @apply font-bold text-h1;
+  }
+
+  h2 {
+    @apply font-bold text-h2;
+  }
+
+  h3 {
+    @apply font-bold text-h3;
+  }
+
+  h4 {
+    @apply font-bold text-h4;
+  }
+
+  h5 {
+    @apply font-bold text-h5;
+  }
+
+  h6 {
+    @apply font-bold text-h6;
+  }
+}

assets/vue/components/ccalendarevent/Info.vue

@@ -1,5 +1,5 @@
 <template>
-  <h5 class="text-xl font-semibold">{{ event.title }}</h5>
+  <h5>{{ event.title }}</h5>
   {{ $filters.abbreviatedDatetime(event.startDate) }}
     
   <p v-if="event.endDate">
@@ -8,9 +8,9 @@
 
   <hr class="my-2">
 
-  <div class="text-base mb-3" v-html="event.content" />
+  <div class="mb-3" v-html="event.content" />
 
-  <h6 class="text-xl"> {{ $t('Invitees') }}</h6>
+  <h6 class="text-h5"> {{ $t('Invitees') }}</h6>
 
   <ShowLinks
       :item="event"

assets/vue/components/course/CourseCard.vue

@@ -30,7 +30,7 @@
                      alt=""
                 />
             </div>
-            <div v-if="course.users.edges.length < 3 " class="text-xs flex-col">
+            <div v-if="course.users.edges.length < 3 " class="flex-col">
               <div>
               {{ courseRelUser.node.user.firstname }} {{ courseRelUser.node.user.lastname }}
               </div>

assets/vue/components/session/SessionCategoryListWrapper.vue

@@ -1,10 +1,10 @@
 <template>
   <div v-if="categories.length" class="grid">
     <div v-for="category in categories">
-      <div class="text-xl">
+      <h5>
-        <v-icon icon="mdi-folder"/>
+        <v-icon icon="mdi-folder" />
         {{ category.name }}
-      </div>
+      </h5>
       <SessionListCategoryWrapper :sessions="getSessionsFromCategory(category)"/>
     </div>
   </div>

assets/vue/components/session/SessionListNoCategoryWrapper.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="text-xl">
+    <h5>
-      <v-icon icon="mdi-folder"/>
+      <v-icon icon="mdi-folder" />
       {{ $t('No category') }}
-    </div>
+    </h5>
     <SessionListCategoryWrapper :sessions="sessions"/>
 </template>
 <script>

assets/vue/views/course/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="course" class="grid gap-4">
     <div class="flex flex-row justify-between border-b-2 border-gray-200 ">
-      <div class="line-clamp-1 text-2xl font-bold">
+      <div class="line-clamp-1 text-h3 font-bold">
         {{ course.title }}
         <span v-if="session">
           ({{ session.name }})
@@ -10,7 +10,7 @@
 
       <div>
         <div class="flex flex-row" v-if="isCurrentTeacher && course">
-          <a class="btn btn--info mr-2 text-xs">
+          <a class="btn btn--info mr-2">
             <v-icon icon="mdi-eye" class="pr-2" />
             {{ $t('See as student') }}
           </a>

public/main/inc/lib/display.lib.php

@@ -2288,7 +2288,7 @@ class Display
 
             $html = <<<HTML
                 <div class="v-card bg-white mx-2" id="$id">
-                    <div class="v-card-header text-xl my-2">
+                    <div class="v-card-header text-h5 my-2">
                         $title
                     </div>
                     <div class="v-card-text">$content</div>
@@ -2301,7 +2301,7 @@ HTML;
             $params['class'] = 'v-card bg-white mx-2';
             $html = '';
             if (!empty($title)) {
-                $html .= '<div class="v-card-header text-xl my-2">'.$title.'</div>'.PHP_EOL;
+                $html .= '<div class="v-card-header text-h5 my-2">'.$title.'</div>'.PHP_EOL;
             }
             $html .= '<div class="v-card-text">'.$content.'</div>'.PHP_EOL;
             $html = self::div($html, $params);

public/main/inc/lib/formvalidator/FormValidator.class.php

@@ -106,7 +106,7 @@ class FormValidator extends HTML_QuickForm
         }
 
         //Set Header template
-        $renderer->setHeaderTemplate(' <h1 class="text-2xl font-small text-gray-800 mb-4">{header}<hr /></h1>');
+        $renderer->setHeaderTemplate(' <h1 class="text-h3 font-small text-gray-800 mb-4">{header}<hr /></h1>');
 
         $required = '<span class="form_required">*</span> <small>'.get_lang('Required field').'</small>';
         if ((self::LAYOUT_INLINE === $layout || self::LAYOUT_BOX_SEARCH === $layout)) {

public/main/install/install.lib.php

@@ -433,7 +433,7 @@ function display_language_selection()
         <div class="install-icon">
             <img width="150px;" src="chamilo-install.svg"/>
         </div>
-        <h2 class="text-2xl">
+        <h2 class="text-h3">
             <?php echo display_step_sequence(); ?>
             <?php echo get_lang('Installation Language'); ?>
         </h2>

src/CoreBundle/Resources/views/LearnPath/view.html.twig

@@ -157,10 +157,10 @@
                 <div class="lp-view-tabs">
                     <div id="navTabBar" class="mt-2 mb-16 nav-tabs-bar">
                         <div class="text-left">
-                            <h2 class="text-2xl">{{ lp_title_scorm }}</h2>
+                            <h2 class="text-h3">{{ lp_title_scorm }}</h2>
                             <div id="item-parent-names">
                                 {% for parent_title in lp_item_parents %}
-                                    <h3 class="text-xl">{{  parent_title }}</h3>
+                                    <h3 class="text-h5">{{  parent_title }}</h3>
                                 {% endfor %}
                             </div>
                         </div>

src/CoreBundle/Resources/views/Macros/modals.html.twig

@@ -6,7 +6,7 @@
                 <!--header-->
                 <div class="flex items-start justify-between p-5 border-b border-solid border-gray-200 rounded-t">
                     <h3 class="text-3xl font-semibold" id="global-modal-title">{{ title }}</h3>
-                    <button id="close-global-model" class="text-purple-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
+                    <button id="close-global-model" class="text-purple-500 background-transparent font-bold uppercase px-6 py-2 outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
                         {{ 'Close'|trans }}
                     </button>
                 </div>

tailwind.config.js

@@ -43,6 +43,19 @@ module.exports = {
         sans: ['Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif']
       },
     },
+    fontSize: {
+      'header': ['52px', '64px'],
+      'h1': ['32px', '40px'],
+      'h2': ['29px', '32px'],
+      'h3': ['26px', '32px'],
+      'h4': ['23px', '32px'],
+      'h5': ['20px', '24px'],
+      'h6': ['18px', '24px'],
+      'body-1': ['16px', '24px'],
+      'body-2': ['14px', '16px'],
+      'caption': ['13px', '16px'],
+      'tiny': ['11px', '16px'],
+    }
   },
   plugins: [
     require('@tailwindcss/aspect-ratio'),