[AAE-6823] Customize font (#7493)

* [AAE-6823] Customize font * [AAE-6823] Update css variables names * [AAE-6823] Cleaning * [AAE-6823] Update css variables names * [AAE-6823] Fix lint error
2025-07-24 17:32:15 +00:00 · 2022-02-08 14:15:57 +01:00
parent 5b4d49bc0e
commit 670d2befdc
75 changed files with 146 additions and 132 deletions
--- a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
+++ b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
@@ -1,6 +1,6 @@
 .adf {
    &-array-item-icon {
-        font-size: 16px;
+        font-size: var(--theme-subheading-2-font-size);
        padding-top: 8px;
    }

--- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
+++ b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
@@ -59,7 +59,7 @@

            mat-icon.adf-date-reset-icon {
                line-height: 10px;
-                font-size: 16px;
+                font-size: var(--theme-subheading-2-font-size);
                width: 16px;
                height: 16px;
                position: relative;
--- a/lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss
+++ b/lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss
@@ -10,7 +10,7 @@

            .mat-form-field {
                width: 100%;
-                font-size: 14px;
+                font-size: var(--theme-body-1-font-size);
            }

            .mat-form-field-appearance-legacy .mat-form-field-label {
--- a/lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss
+++ b/lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss
@@ -10,7 +10,7 @@ $select-filter-height: 4em !default;
        width: 100%;
        display: flex;
        z-index: 100;
-        font-size: 14px;
+        font-size: var(--theme-body-1-font-size);
        color: var(--theme-text-bold-color);
        line-height: 3em;
        height: $select-filter-height;
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss
@@ -1,6 +1,6 @@
 .adf {
    &-textitem-edit-icon.mat-icon {
-        font-size: 16px;
+        font-size: var(--theme-subheading-2-font-size);
        width: 16px;
        height: 16px;
        color: var(--adf-card-view-text-color);
@@ -79,7 +79,7 @@
        }

        &-error {
-            font-size: 12px;
+            font-size: var(--theme-caption-font-size);
            padding-top: 4px;

            ul {
--- a/lib/core/card-view/components/card-view/card-view.component.scss
+++ b/lib/core/card-view/components/card-view/card-view.component.scss
@@ -33,14 +33,14 @@
        }

        .adf-property-label {
-            font-size: 12px;
+            font-size: var(--theme-caption-font-size);
            color: var(--theme-text-color);
            word-wrap: break-word;
        }

        .adf-property-value,
        .mat-form-field-label {
-            font-size: 14px;
+            font-size: var(--theme-body-1-font-size);
            color: var(--theme-text-bold-color);
        }
    }
--- a/lib/core/comments/comment-list.component.scss
+++ b/lib/core/comments/comment-list.component.scss
@@ -43,7 +43,7 @@
        background-color: var(--theme-primary-color);
        color: var(--theme-primary-color-default-contrast);
        border-radius: 50%;
-        font-size: 16px;
+        font-size: var(--theme-subheading-2-font-size);
        text-align: center;
        height: 20px;
        background-size: cover;
@@ -54,7 +54,7 @@
        width: calc(100% - 10%);
        padding: 2px 10px;
        font-weight: 600;
-        font-size: 14px;
+        font-size: var(--theme-body-1-font-size);
    }

    &-comment-message {
@@ -65,7 +65,7 @@
        /* stylelint-disable */
        white-space: initial !important;
        /* stylelint-enable */
-        font-size: 14px;
+        font-size: var(--theme-body-1-font-size);
        letter-spacing: -0.2px;
        line-height: 1.43;
        color: var(--theme-foreground-text-color);
@@ -75,7 +75,7 @@
        float: left;
        width: calc(100% - 10%);
        padding: 2px 10px;
-        font-size: 12px !important;
+        font-size: var(--theme-caption-font-size) !important;
        color: var(--theme-foreground-text-color);
    }

--- a/lib/core/comments/comments.component.scss
+++ b/lib/core/comments/comments.component.scss
@@ -6,7 +6,7 @@

 .adf-comments-header {
    padding: 10px 20px;
-    font-size: 14px;
+    font-size: var(--theme-body-1-font-size);
    font-weight: 600;
    border-bottom: 1px solid var(--theme-fg-divider);
 }
--- a/lib/core/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/datatable/components/datatable/datatable.component.scss
@@ -2,12 +2,12 @@
@import '~@angular/material/theming';
@import '../../../styles/mixins';

-$data-table-header-font-size: 12px !default;
-$data-table-header-sort-icon-size: 16px !default;
-$data-table-row-height: 56px !default;
+$data-table-header-font-size: var(--theme-caption-font-size) !default;
+$data-table-header-sort-icon-size: var(--theme-subheading-2-font-size) !default;
+$data-table-row-height: var(--theme-display-3-font-size) !default;
 $data-table-column-spacing: 36px !default;
 $data-table-column-padding: $data-table-column-spacing / 2;
-$data-table-card-padding: 24px !default;
+$data-table-card-padding: var(--theme-headline-line-height) !default;
 $data-table-cell-top: $data-table-card-padding / 2;
 $data-table-thumbnail-width: 50px !default;
 $data-table-cell-min-width: 50px !default;
--- a/lib/core/form/components/widgets/dropdown/dropdown.widget.scss
+++ b/lib/core/form/components/widgets/dropdown/dropdown.widget.scss
@@ -8,7 +8,7 @@
        }

        .mat-select-value-text {
-            font-size: 14px;
+            font-size: var(--theme-body-1-font-size);
        }

        &-select {
--- a/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss
+++ b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss
@@ -2,8 +2,8 @@
@import '~@angular/material/theming';
@import '../../../../styles/mixins';

-$dynamic-table-font-size: 14px !default;
-$dynamic-table-header-font-size: 12px !default;
+$dynamic-table-font-size: var(--theme-body-1-font-size) !default;
+$dynamic-table-header-font-size: var(--theme-caption-font-size) !default;
 $dynamic-table-header-sort-icon-size: 16px !default;
 $dynamic-table-hover-color: #eee !default;
 $dynamic-table-selection-color: #e0f7fa !default;
--- a/lib/core/form/components/widgets/dynamic-table/editors/boolean/boolean.editor.scss
+++ b/lib/core/form/components/widgets/dynamic-table/editors/boolean/boolean.editor.scss
@@ -2,7 +2,7 @@
    &-checkbox-label {
        position: relative;
        cursor: pointer;
-        font-size: 16px;
+        font-size: var(--theme-subheading-2-font-size);
        line-height: 24px;
        margin: 0;
    }
--- a/lib/core/form/components/widgets/form.theme.scss
+++ b/lib/core/form/components/widgets/form.theme.scss
@@ -14,7 +14,7 @@ ul > li > form-field > .adf-focus {
    &-error-text {
        padding: 1px;
        height: 16px;
-        font-size: 12px;
+        font-size: var(--theme-caption-font-size);
        line-height: 1.33;
        float: left;
        color: var(--theme-warn-color);
@@ -22,7 +22,7 @@ ul > li > form-field > .adf-focus {

    &-error-icon {
        float: right;
-        font-size: 17px;
+        font-size: var(--theme-adf-icon-1-font-size);
        color: var(--theme-warn-color);
    }

--- a/lib/core/form/components/widgets/multiline-text/multiline-text.widget.scss
+++ b/lib/core/form/components/widgets/multiline-text/multiline-text.widget.scss
@@ -12,7 +12,7 @@
        margin-top: -20px !important;
        min-height: 24px;
        min-width: 1px;
-        font-size: 12px;
+        font-size: var(--theme-caption-font-size);
        line-height: 14px;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
--- a/lib/core/form/components/widgets/people/people.widget.scss
+++ b/lib/core/form/components/widgets/people/people.widget.scss
@@ -27,7 +27,7 @@
        border-radius: 100px;
        color: var(--theme-text-fg-color);
        font-weight: bolder;
-        font-size: 18px;
+        font-size: var(--theme-adf-picture-1-font-size);
        text-transform: uppercase;
    }

--- a/lib/core/info-drawer/info-drawer-layout.component.scss
+++ b/lib/core/info-drawer/info-drawer-layout.component.scss
@@ -1,6 +1,6 @@
@import '../styles/mixins';

-$adf-info-drawer-layout-title-font-size: 20px !default;
+$adf-info-drawer-layout-title-font-size: var(--theme-title-font-size) !default;
 $adf-info-drawer-icon-size: 48px !default;

 .adf {
--- a/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss
+++ b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss
@@ -41,7 +41,7 @@
        letter-spacing: -0.4px;

        .mat-menu-item {
-            font-size: 14px;
+            font-size: var(--theme-body-1-font-size);
            color: var(--theme-text-bold-color);
            text-align: left;
            line-height: 1.5;
--- a/lib/core/login/components/login.component.scss
+++ b/lib/core/login/components/login.component.scss
@@ -88,7 +88,7 @@
        color: var(--theme-warn-color);
        padding: 0;
        margin-bottom: 4px;
-        font-size: 13px;
+        font-size: var(--theme-caption-font-size);
    }

    .adf-error-message .adf-error-icon {
@@ -176,7 +176,7 @@

    .adf-is-active {
        background-color: transparent;
-        font-size: 12px;
+        font-size: var(--theme-caption-font-size);
        font-weight: normal;
        line-height: 1.33;
        color: var(--theme-warn-color);
@@ -186,7 +186,7 @@
        min-width: 320px;
        text-align: center;
        padding: 16px 0;
-        font-size: 12px;
+        font-size: var(--theme-caption-font-size);
        opacity: 0.54;
    }

@@ -196,7 +196,7 @@

    .adf-login__field .mat-form-field-wrapper {
        margin: 1em 0 0;
-        font-size: 16px;
+        font-size: var(--theme-subheading-2-font-size);
    }

    .adf-login__field input:-webkit-autofill {
@@ -209,13 +209,13 @@
    .adf-login-validation {
        background-color: transparent;
        color: var(--theme-warn-color);
-        font-size: 12px;
+        font-size: var(--theme-caption-font-size);
    }

    .adf-login-error {
        color: var(--theme-warn-color);
        position: absolute;
-        font-size: 12px;
+        font-size: var(--theme-caption-font-size);
        margin-top: -12px;
        display: block;
    }
--- a/lib/core/notifications/components/notification-history.component.scss
+++ b/lib/core/notifications/components/notification-history.component.scss
@@ -27,11 +27,11 @@

        &-message,
        &-no-message {
-            font-size: 13px !important;
+            font-size: var(--theme-body-1-font-size) !important;
        }

        &-date {
-            font-size: 12px !important;
+            font-size: var(--theme-caption-font-size) !important;
        }

        &-initiator {
@@ -47,7 +47,7 @@
        border-radius: 100px;
        text-align: center;
        font-weight: bolder;
-        font-size: 18px;
+        font-size: var(--theme-adf-picture-1-font-size);
        text-transform: uppercase;
        vertical-align: middle;
        line-height: 40px;
--- a/lib/core/search-text/search-text-input.component.scss
+++ b/lib/core/search-text/search-text-input.component.scss
@@ -28,7 +28,7 @@
            }
        }

-        font-size: 16px;
+        font-size: var(--theme-subheading-2-font-size);
    }
 }

--- a/lib/core/styles/_index.scss
+++ b/lib/core/styles/_index.scss
@@ -14,7 +14,7 @@
    @include adf-core-theme($theme);
 }

-@mixin adf-core-theme($theme) {
+@mixin adf-core-theme($theme, $custom-css-variables: $adf-custom-theme-sizes) {
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);
    $warn: map-get($theme, warn);
@@ -89,10 +89,17 @@
        --theme-display-4-font-size: mat-font-size($alfresco-typography, display-4),
        --theme-caption-font-size: mat-font-size($alfresco-typography, caption),
        --theme-title-font-size: mat-font-size($alfresco-typography, title),
+        --theme-subheading-1-font-size: mat-font-size($alfresco-typography, subheading-1),
        --theme-subheading-2-font-size: mat-font-size($alfresco-typography, subheading-2),
        --theme-button-font-size: mat-font-size($alfresco-typography, button),
+        --theme-headline-font-size: mat-font-size($alfresco-typography, headline),
        --theme-headline-line-height: mat-line-height($alfresco-typography, headline),

+        --theme-adf-icon-1-font-size: map-get($custom-css-variables, 'theme-adf-icon-1-font-size'),
+        --theme-adf-picture-1-font-size: map-get($custom-css-variables, 'theme-adf-picture-1-font-size'),
+        --theme-adf-task-footer-font-size: map-get($custom-css-variables, 'theme-adf-task-footer-font-size'),
+        --theme-adf-task-title-font-size: map-get($custom-css-variables, 'theme-adf-task-title-font-size'),
+
        // specific colors
        --theme-colors-mat-grey: mat-color($mat-grey, A200),
        --theme-colors-mat-grey-dark: mat-color($mat-grey, A400),
@@ -110,3 +117,10 @@
    @include adf-snackbar-theme;
    @include adf-material-theme;
 }
+
+$adf-custom-theme-sizes: (
+    'theme-adf-icon-1-font-size': 17px,
+    'theme-adf-picture-1-font-size': 18px,
+    'theme-adf-task-footer-font-size': 18px,
+    'theme-adf-task-title-font-size': 18px
+);
--- a/lib/core/styles/_mixins.scss
+++ b/lib/core/styles/_mixins.scss
@@ -14,7 +14,7 @@
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
-    font-size: 24px;
+    font-size: var(--theme-headline-font-size);
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
--- a/lib/core/templates/empty-content/empty-content.component.scss
+++ b/lib/core/templates/empty-content/empty-content.component.scss
@@ -16,7 +16,7 @@
    }

    &__title {
-        font-size: 18px;
+        font-size: var(--theme-adf-task-title-font-size);
        font-weight: 600;
        line-height: 0;
        white-space: normal;
@@ -26,7 +26,7 @@

    &__subtitle,
    &__text {
-        font-size: 14px;
+        font-size: var(--theme-body-1-font-size);
        font-weight: 300;
        line-height: inherit;
        white-space: normal;
--- a/lib/core/templates/error-content/error-content.component.scss
+++ b/lib/core/templates/error-content/error-content.component.scss
@@ -26,7 +26,7 @@
    }

    &-description {
-        font-size: 24px;
+        font-size: var(--theme-headline-font-size);
        font-weight: normal;
        text-align: center;
        width: 50%;
@@ -49,11 +49,11 @@
        }

        &-title {
-            font-size: 24px;
+            font-size: var(--theme-headline-font-size);
        }

        &-description {
-            font-size: 17px;
+            font-size: var(--theme-subheading-2-font-size);
        }
    }
 }
--- a/lib/core/toolbar/toolbar.component.scss
+++ b/lib/core/toolbar/toolbar.component.scss
@@ -17,7 +17,7 @@

    .mat-toolbar-row {
        height: 48px;
-        font-size: 14px;
+        font-size: var(--theme-body-1-font-size);
        white-space: normal;
    }

--- a/lib/core/userinfo/components/user-info.component.scss
+++ b/lib/core/userinfo/components/user-info.component.scss
@@ -25,7 +25,7 @@
        border-radius: 100px;
        text-align: center;
        font-weight: bolder;
-        font-size: 18px;
+        font-size: var(--theme-adf-picture-1-font-size);
        text-transform: uppercase;
        vertical-align: middle;
        line-height: 40px;
@@ -64,7 +64,7 @@
    &-userinfo-tab .mat-tab-label {
        flex: auto;
        font-weight: 500;
-        font-size: 14px;
+        font-size: var(--theme-body-1-font-size);
        text-transform: uppercase;
        line-height: 48px;
        text-align: center;
@@ -84,7 +84,7 @@
    }

    &-userinfo-supporting-text {
-        font-size: 14px;
+        font-size: var(--theme-body-1-font-size);
        font-weight: 400;
        letter-spacing: 0;
        line-height: 18px;
@@ -100,12 +100,12 @@
    }

    &-userinfo-title {
-        font-size: 21px;
+        font-size: var(--theme-title-font-size);
    }

    &-userinfo__detail-profile {
        align-items: flex-start;
-        font-size: 14px;
+        font-size: var(--theme-body-1-font-size);
        font-weight: 400;
        letter-spacing: 0;
        line-height: 18px;
@@ -116,7 +116,7 @@

    &-userinfo__detail-title {
        text-overflow: ellipsis;
-        font-size: 16px;
+        font-size: var(--theme-subheading-2-font-size);
        font-weight: 400;
        letter-spacing: 0.04em;
        line-height: 20px;
@@ -124,7 +124,7 @@
    }

    &-userinfo__secondary-info {
-        font-size: 14px;
+        font-size: var(--theme-body-1-font-size);
        font-weight: 400;
        letter-spacing: 0;
        line-height: 18px;
--- a/lib/core/viewer/components/pdf-viewer.component.scss
+++ b/lib/core/viewer/components/pdf-viewer.component.scss
@@ -70,13 +70,13 @@
        &-page-selector {
            padding-left: 10px;
            padding-right: 10px;
-            font-size: 14px;
+            font-size: var(--theme-body-1-font-size);

            & > input {
                border: 1px solid var(--theme-border-color);
                background-color: var(--theme-card-bg-color);
                color: inherit;
-                font-size: 14px;
+                font-size: var(--theme-body-1-font-size);
                padding: 5px;
                height: 24px;
                line-height: 24px;
--- a/lib/core/viewer/components/viewer.component.scss
+++ b/lib/core/viewer/components/viewer.component.scss
@@ -39,7 +39,7 @@
    }

    &__display-name {
-        font-size: 16px;
+        font-size: var(--theme-subheading-2-font-size);
        opacity: 0.87;
        line-height: 1.5;
        letter-spacing: -0.4px;
@@ -194,7 +194,7 @@
            cursor: default;
            width: 79px;
            height: 24px;
-            font-size: 14px;
+            font-size: var(--theme-body-1-font-size);
            border: 1px solid var(--theme-border-color);
            text-align: center;
            line-height: 24px;