chore(design system): Update base font size to 14px #28724 (#29205)

### Proposed Changes * Update $font-size-default to 14px * Fix accesibility removing font-size definitions on html tags * Update _fonts.scss to match figma design * Replace font size values expressed in rems or px with vars as possible **Screenshot** ![Captura de pantalla 2024-07-11 a la(s) 13 37 11](https://github.com/dotCMS/core/assets/77643678/09ab1388-721f-4ce4-b90c-5456f0307cf4)
dotCMS · Aug 14, 2024 · 8e57564 · 8e57564
1 parent 8c01c55
commit 8e57564
Show file tree

Hide file tree

Showing 55 changed files with 208 additions and 135 deletions.
diff --git a/...t/components/dot-edit-page-state-controller/dot-edit-page-state-controller.component.scss b/...t/components/dot-edit-page-state-controller/dot-edit-page-state-controller.component.scss
@@ -38,7 +38,7 @@ p-inputSwitch {
             @include md-icon;
             color: $color-palette-primary;
             content: "lock_open";
-            font-size: 13px;
+            font-size: $font-size-sm;
             left: 4px;
             position: absolute;
             text-rendering: auto;

diff --git a/...ui/src/app/portlets/dot-edit-page/content/services/html/libraries/iframe-edit-mode.css.ts b/...ui/src/app/portlets/dot-edit-page/content/services/html/libraries/iframe-edit-mode.css.ts
@@ -6,6 +6,16 @@ const mdShadow3 = '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23
 const white = '#fff';
 const grayLight = '#c5c5c5';
 
+// Font sizes
+// Body font sizes
+const fontSizeSm = '0.75rem'; // 12px
+const fontSizeXs = '0.625rem'; // 10px
+
+// Font weights
+const fontWeightRegular = 400;
+const fontWeightSemiBold = 500;
+const fontWeightBold = 700;
+
 export const getEditPageCss = (
     timestampId: string,
     origin: string = window.location.origin
@@ -16,7 +26,7 @@ export const getEditPageCss = (
     @font-face {
         font-family: 'Assistant';
         font-style: normal;
-        font-weight: 400;
+        font-weight: ${fontWeightRegular};
         font-display: swap;
         src: local(''),
         url('${origin}/dotAdmin/assets/Assistant-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
@@ -26,7 +36,7 @@ export const getEditPageCss = (
     @font-face {
         font-family: 'Assistant';
         font-style: normal;
-        font-weight: 500;
+        font-weight: ${fontWeightSemiBold};
         font-display: swap;
         src: local(''),
         url('${origin}/dotAdmin/assets/Assistant-SemiBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
@@ -36,7 +46,7 @@ export const getEditPageCss = (
     @font-face {
         font-family: 'Assistant';
         font-style: normal;
-        font-weight: 700;
+        font-weight: ${fontWeightBold};
         font-display: swap;
         src: local(''),
         url('${origin}/dotAdmin/assets/Assistant-Bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
@@ -90,7 +100,7 @@ export const getEditPageCss = (
         margin: 0 !important;
         border: solid 1px #53c2f9;
         padding: 1rem !important;
-        background: #FFF !important;
+        background: ${white} !important;
         color: #444 !important;
         height: auto !important;
         min-height: auto !important;
@@ -272,10 +282,10 @@ export const getEditPageCss = (
 
     ${timestampId} .dotedit-menu__list {
         color: #000 !important;
-        background-color: #ffffff !important;
+        background-color: ${white} !important;
         box-shadow: ${mdShadow1} !important;
         font-family: Assistant, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
-        font-size: 13px !important;
+        font-size: 0.8125rem !important;
         list-style: none !important;
         margin: 0 !important;
         min-width: 100px !important;
@@ -317,8 +327,8 @@ export const getEditPageCss = (
         position: absolute !important;
         top: 4px !important;
         background: rgba(0,0,0,.7);
-        font-size: 12px;
-        color: #fff;
+        font-size: ${fontSizeSm};
+        color: ${white};
         padding: 4px;
         border-radius: 3px;
         margin-right: 4px;
@@ -356,7 +366,7 @@ export const getEditPageCss = (
         border-right: solid 5px var(--color-palette-secondary-op-20) !important;
         border-top: solid 5px var(--color-palette-secondary-op-20) !important;
         display: inline-block !important;
-        font-size: 10px !important;
+        font-size: ${fontSizeXs} !important;
         overflow: hidden !important;
         position: relative !important;
         text-indent: -9999em !important;

diff --git a/...ui/src/app/portlets/dot-edit-page/main/dot-edit-page-nav/dot-edit-page-nav.component.scss b/...ui/src/app/portlets/dot-edit-page/main/dot-edit-page-nav/dot-edit-page-nav.component.scss
@@ -38,7 +38,7 @@ $nav-size: 80px;
     color: $color-palette-gray-800;
     display: flex;
     flex-direction: column;
-    font-size: 11px;
+    font-size: $font-size-xs;
     height: $nav-size;
     justify-content: center;
     text-decoration: none;

diff --git a/...src/app/portlets/dot-pages/dot-pages-listing-panel/dot-pages-listing-panel.component.html b/...src/app/portlets/dot-pages/dot-pages-listing-panel/dot-pages-listing-panel.component.html
@@ -100,7 +100,6 @@
                 "
                 [pSelectableRow]="rowData"
                 id="tableRow-{{ rowIndex }}"
-                style="height: 47px"
                 pContextMenuRow>
                 <td>{{ rowData['title'] }}</td>
                 <td [pTooltip]="rowData['urlMap'] || rowData['url']" tooltipPosition="bottom">

diff --git a/...tcms-ui/src/app/portlets/dot-templates/dot-template-list/dot-template-list.component.html b/...tcms-ui/src/app/portlets/dot-templates/dot-template-list/dot-template-list.component.html
@@ -72,7 +72,7 @@
         <td [ngStyle]="{ 'text-align': tableColumns[4].textAlign }">
             {{ rowData.modDate | dotRelativeDate }}
         </td>
-        <td style="width: 5%; height: 3.85rem">
+        <td style="width: 5%">
             <dot-action-menu-button
                 *ngIf="!rowData.disableInteraction"
                 [attr.data-testid]="rowData.identifier"

diff --git a/...ponents/fields/content-type-fields-drop-zone/content-type-fields-drop-zone.component.scss b/...ponents/fields/content-type-fields-drop-zone/content-type-fields-drop-zone.component.scss
@@ -34,6 +34,6 @@
 
 .content-type-fields-drop-zone__hint-icon {
     width: 15px;
-    font-size: 14px;
+    font-size: $font-size-sm;
     margin-left: 5px;
 }
diff --git a/.../portlets/shared/dot-content-types-edit/components/form/content-types-form.component.scss b/.../portlets/shared/dot-content-types-edit/components/form/content-types-form.component.scss
@@ -17,6 +17,10 @@
     }
 }
 
+label {
+    font-size: $font-size-md;
+}
+
 .content-type__form {
     width: 522px;
     &.content-type__form-banner {

diff --git a/.../view/components/_common/forms/dot-push-publish-form/dot-push-publish-form.component.scss b/.../view/components/_common/forms/dot-push-publish-form/dot-push-publish-form.component.scss
@@ -36,5 +36,5 @@ form,
 }
 
 .push-publish-dialog__timezone-label {
-    font-size: 0.85rem;
+    font-size: $font-size-sm;
 }
diff --git a/.../dotcms-ui/src/app/view/components/dot-message-display/dot-message-display.component.scss b/.../dotcms-ui/src/app/view/components/dot-message-display/dot-message-display.component.scss
@@ -51,7 +51,7 @@
         }
 
         ::ng-deep i {
-            font-size: 2.5rem;
+            font-size: $font-size-xxxl;
         }
     }
 }
diff --git a/...rc/app/view/components/dot-navigation/components/dot-nav-item/dot-nav-item.component.scss b/...rc/app/view/components/dot-navigation/components/dot-nav-item/dot-nav-item.component.scss
@@ -4,6 +4,7 @@
 
 :host {
     display: block;
+    font-size: $font-size-md;
 
     &.dot-nav-item__collapsed {
         position: relative;

diff --git a/core-web/libs/dot-rules/src/lib/styles/rule-engine.scss b/core-web/libs/dot-rules/src/lib/styles/rule-engine.scss
@@ -365,7 +365,7 @@ $finder-s-input: ".ui.input input";
     }
 
     .cw-header-info-arrow {
-        font-size: 16px;
+        font-size: $font-size-md;
         font-weight: bold;
         padding: 0.5em;
     }

diff --git a/...dotcms-field-elements/src/components/dot-binary-file-preview/dot-binary-file-preview.scss b/...dotcms-field-elements/src/components/dot-binary-file-preview/dot-binary-file-preview.scss
@@ -37,7 +37,7 @@ dot-binary-file-preview {
             overflow: hidden;
             padding: 0.5rem;
             text-overflow: ellipsis;
-            font-size: 2rem;
+            font-size: $font-size-xxxl;
         }
     }
 }
diff --git a/core-web/libs/dotcms-scss/angular/_typography.scss b/core-web/libs/dotcms-scss/angular/_typography.scss
@@ -1,3 +1,4 @@
+@use "variables" as *;
 h1,
 h2,
 h3,
@@ -8,23 +9,23 @@ h5 {
 }
 
 h1 {
-    font-size: 4.28rem;
+    font-size: $font-size-xxxl;
     letter-spacing: -0.5px;
 }
 
 h2 {
-    font-size: 3.43rem;
+    font-size: $font-size-xxl;
 }
 
 h3 {
-    font-size: 2.43rem;
+    font-size: $font-size-xl;
     letter-spacing: 0.25px;
 }
 
 h4 {
-    font-size: 1.71rem;
+    font-size: $font-size-lg;
 }
 
 h5 {
-    font-size: 1.43rem;
+    font-size: $font-size-lmd;
 }
diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_badge.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_badge.scss
@@ -19,12 +19,12 @@
 }
 
 .p-badge.p-badge-lg {
-    font-size: 1.125rem;
+    font-size: $font-size-lmd;
     min-width: $spacing-6;
     height: $spacing-6;
 }
 .p-badge.p-badge-xl {
-    font-size: 1.5rem;
+    font-size: $font-size-lg;
     min-width: $spacing-7;
     height: $spacing-7;
 }
diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_confirmpopup.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_confirmpopup.scss
@@ -79,7 +79,7 @@
 }
 
 .p-confirm-popup .p-button.p-button-sm {
-    font-size: 0.875rem;
+    font-size: $font-size-sm;
     padding: 0.65625rem 1.09375rem;
 }
 

diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_contextmenu.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_contextmenu.scss
@@ -84,5 +84,5 @@
 }
 
 .p-contextmenu .p-submenu-icon {
-    font-size: 0.875rem;
+    font-size: $font-size-sm;
 }
diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_datatable.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_datatable.scss
@@ -103,7 +103,7 @@
 .p-datatable .p-datatable-tbody > tr {
     background: $white;
     color: $black;
-    height: 4rem;
+    height: $field-height-md;
     transition: none;
     outline: 0 none;
     cursor: pointer;
@@ -114,7 +114,7 @@
     text-align: left;
     border: 1px solid $color-palette-gray-300;
     border-width: 0 0 1px 0;
-    padding: $spacing-1 $spacing-2;
+    padding: 0.1875rem $spacing-2;
 
     &:first-child {
         padding-left: $spacing-5;
@@ -203,7 +203,8 @@
 }
 
 .p-datatable .p-datatable-loading-icon {
-    font-size: $font-size-xxxl;
+    width: $icon-xl;
+    height: $icon-xl;
     color: $color-palette-secondary;
 }
 

diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_dataview.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_dataview.scss
@@ -43,7 +43,7 @@
 }
 
 .p-dataview .p-dataview-loading-icon {
-    font-size: 2rem;
+    font-size: $font-size-xxxl;
 }
 
 .p-dataview .p-dataview-emptymessage {

diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_dialog.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_dialog.scss
@@ -20,8 +20,7 @@
 }
 
 .p-dialog .p-dialog-header .p-dialog-title {
-    font-size: $font-size-xl;
-    font-size: 1.5rem;
+    font-size: $font-size-lg;
 }
 
 .p-dialog .p-dialog-header .p-dialog-header-icon {

diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_table.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_table.scss
@@ -13,7 +13,7 @@
         z-index: 1;
         background-color: $white;
         color: $black;
-        font-size: $font-size-xsm;
+        font-size: $font-size-xs;
         transition: opacity 0.3s ease-in-out;
         border-radius: $border-radius-sm;
         padding: $spacing-1;
@@ -58,7 +58,7 @@ $dot-table-cell-height: 1.25rem;
             border: 1px solid $color-palette-gray-300;
             border-width: 0 0 1px 0;
             color: $black;
-            font-size: $font-size-xsm;
+            font-size: $font-size-sm;
             font-weight: $font-weight-bold;
             padding: $spacing-1;
             text-align: left;
@@ -128,7 +128,7 @@ $dot-table-cell-height: 1.25rem;
         .p-datatable-tbody > tr {
             background: $white;
             color: $black;
-            height: auto;
+            height: $field-height-md;
             transition: none;
             outline: 0 none;
             cursor: pointer;
@@ -142,7 +142,7 @@ $dot-table-cell-height: 1.25rem;
                 text-align: left;
                 border-bottom: 1px solid $color-palette-gray-300;
                 padding: 0 $spacing-1;
-                font-size: $font-size-smd;
+                font-size: $font-size-md;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -255,7 +255,7 @@ $dot-table-cell-height: 1.25rem;
         }
 
         .p-datatable-loading-icon {
-            font-size: $font-size-xxxl;
+            font-size: $icon-xl;
             color: $color-palette-secondary;
         }
 

diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_tag.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_tag.scss
@@ -14,7 +14,7 @@
 
 p-tag.sm {
     .p-tag {
-        font-size: $font-size-xsm;
+        font-size: $font-size-xs;
         padding: $spacing-0 $spacing-1;
 
         .p-tag-value {

diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_tree.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_tree.scss
@@ -111,7 +111,7 @@
 }
 
 .p-tree .p-tree-loading-icon {
-    font-size: $font-size-xxxl;
+    font-size: $icon-xl;
 }
 
 .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {

diff --git a/core-web/libs/dotcms-scss/angular/styles.scss b/core-web/libs/dotcms-scss/angular/styles.scss
@@ -59,7 +59,6 @@ body {
 html {
     color: $black;
     font-family: $font-default;
-    font-size: $font-size-default;
 }
 
 body {

diff --git a/core-web/libs/dotcms-scss/jsp/scss/backend/dot-admin/_crumbtrail.scss b/core-web/libs/dotcms-scss/jsp/scss/backend/dot-admin/_crumbtrail.scss
@@ -20,7 +20,7 @@
             @include fa-icon();
             content: $fa-var-chevron-right;
             color: $color-palette-gray-500;
-            font-size: 9px;
+            font-size: $font-size-xs;
             position: absolute;
             right: 5px;
             top: 5px;