[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/content-services/src/lib/breadcrumb/breadcrumb.component.scss
+++ b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss
@@ -2,7 +2,7 @@
    display: flex;
    flex: 1;
    line-height: 24px;
-    font-size: 14px;
+    font-size: var(--theme-body-1-font-size);
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--theme-text-color);
@@ -48,7 +48,7 @@
            }

            &-arrow {
-                font-size: 17px;
+                font-size: var(--theme-adf-icon-1-font-size);
                position: absolute;
                left: 4px;
                top: 4px;
@@ -75,7 +75,7 @@
        overflow: hidden;
        display: flex;
        line-height: 33px;
-        font-size: 14px;
+        font-size: var(--theme-body-1-font-size);
        font-weight: 600;
        letter-spacing: -0.2px;
        text-align: left;
@@ -97,7 +97,7 @@
        &-chevron {
            opacity: 1;
            margin-top: 9px;
-            font-size: 17px;
+            font-size: var(--theme-adf-icon-1-font-size);
        }

        &.mat-primary {
--- a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss
+++ b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss
@@ -5,7 +5,7 @@ $dropdown-horizontal-offset: 30px;
        display: flex;
        flex: 1;
        line-height: 24px;
-        font-size: 14px;
+        font-size: var(--theme-body-1-font-size);
        font-weight: 600;
        letter-spacing: -0.2px;
        color: var(--theme-text-color);
@@ -67,7 +67,7 @@ $dropdown-horizontal-offset: 30px;
        height: 28px;
        line-height: 28px;
        padding: 0 12px;
-        font-size: 13px;
+        font-size: var(--theme-caption-font-size);
    }

    &-dropdown-breadcrumb-path-option.mat-option:first-child {
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss
@@ -4,7 +4,7 @@ $content-node-selector-thumbnail-width: 35px !default;
 .adf-search-results-label {
    flex: 1;
    font-weight: 600;
-    font-size: 14px;
+    font-size: var(--theme-body-1-font-size);
    font-style: normal;
    font-stretch: normal;
    line-height: 1.43;
@@ -15,7 +15,7 @@ $content-node-selector-thumbnail-width: 35px !default;
 .adf-toolbar .mat-toolbar {
    max-height: 48px;
    border-bottom-width: 0;
-    font-size: 14px;
+    font-size: var(--theme-body-1-font-size);

    &.mat-toolbar-single-row {
        height: auto;
@@ -64,7 +64,7 @@ $content-node-selector-thumbnail-width: 35px !default;
            margin-bottom: 0;

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

--- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
@@ -54,7 +54,7 @@ adf-content-node-selector {
    .mat-dialog-title {
        margin-left: 24px;
        margin-right: 24px;
-        font-size: 20px;
+        font-size: var(--theme-title-font-size);
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
--- a/lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.scss
+++ b/lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.scss
@@ -3,6 +3,6 @@

    &-location {
        color: var(--theme-text-color);
-        font-size: 12px;
+        font-size: var(--theme-caption-font-size);
    }
 }
--- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
+++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
@@ -17,7 +17,7 @@
            font-weight: normal;
            font-style: normal;
            font-stretch: normal;
-            font-size: 16px;
+            font-size: var(--theme-subheading-2-font-size);
            color: var(--theme-text-bold-color);
        }

@@ -27,7 +27,7 @@

        &__info {
            color: var(--theme-text-color);
-            font-size: 13px;
+            font-size: var(--theme-caption-font-size);
        }

        &--row {
--- a/lib/content-services/src/lib/document-list/components/document-list.component.scss
+++ b/lib/content-services/src/lib/document-list/components/document-list.component.scss
@@ -57,14 +57,14 @@

    &--text {
        color: var(--theme-text-fg-color);
-        font-size: 16px;
+        font-size: var(--theme-subheading-2-font-size);
    }
 }

 .adf-document-list__this-space-is-empty {
    height: 32px;
    opacity: 0.26;
-    font-size: 24px;
+    font-size: var(--theme-headline-font-size);
    line-height: 1.33;
    letter-spacing: -1px;
    color: var(--theme-text-fg-color);
@@ -83,7 +83,7 @@
 .adf-document-list__any-files-here-to-add {
    height: 24px;
    opacity: 0.54;
-    font-size: 16px;
+    font-size: var(--theme-subheading-2-font-size);
    line-height: 1.5;
    letter-spacing: -0.4px;
    color: var(--theme-text-fg-color);
@@ -111,7 +111,7 @@
 .adf-empty-list-header {
    height: 32px;
    opacity: 0.26 !important;
-    font-size: 24px;
+    font-size: var(--theme-headline-font-size);
    line-height: 1.33;
    letter-spacing: -1px;
    color: var(--theme-text-fg-color);
@@ -128,7 +128,7 @@
 .adf-empty-folder {
    &-this-space-is-empty {
        height: 32px;
-        font-size: 24px;
+        font-size: var(--theme-headline-font-size);
        line-height: 1.33;
        letter-spacing: -1px;
        color: var(--theme-text-color);
@@ -151,7 +151,7 @@

    &-any-files-here-to-add {
        min-height: 24px;
-        font-size: 16px;
+        font-size: var(--theme-subheading-2-font-size);
        line-height: 1.5;
        letter-spacing: -0.4px;
        color: var(--theme-foreground-text-color);
--- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss
+++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss
@@ -2,7 +2,7 @@
    .mat-dialog-title {
        margin-left: 24px;
        margin-right: 24px;
-        font-size: 20px;
+        font-size: var(--theme-title-font-size);
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
--- a/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss
+++ b/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss
@@ -9,7 +9,7 @@
        height: 40px;
        color: var(--theme-primary-color-default-contrast) !important;
        font-weight: bolder;
-        font-size: 18px;
+        font-size: var(--theme-adf-picture-1-font-size);
        text-transform: uppercase;
    }

@@ -21,7 +21,7 @@
        padding: 10px;
        color: var(--theme-primary-color-default-contrast) !important;
        font-weight: bolder;
-        font-size: 20px;
+        font-size: var(--theme-title-font-size);
    }

    &-people-select-icon {
--- a/lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.scss
+++ b/lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.scss
@@ -1,11 +1,11 @@
 .adf-user {
    &-name-column {
        font-weight: 600;
-        font-size: 14px;
+        font-size: var(--theme-body-1-font-size);
    }

    &-email-column {
-        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);
--- a/lib/content-services/src/lib/search/components/search-control.component.scss
+++ b/lib/content-services/src/lib/search/components/search-control.component.scss
@@ -17,7 +17,7 @@ $mat-menu-overlay-max-width: 280px !default;   // 56 * 5
        max-height: 400px;
        margin-left: 45px;
        margin-top: -22px;
-        font-size: 15px;
+        font-size: var(--theme-subheading-1-font-size);
        z-index: 5;
        color: var(--theme-text-fg-color);
        background-color: var(--theme-card-bg-color);
--- a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss
+++ b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss
@@ -46,7 +46,7 @@
                margin-top: -4px;

                .mat-icon {
-                    font-size: 15px;
+                    font-size: var(--theme-subheading-1-font-size);
                }
            }

@@ -54,7 +54,7 @@
                padding: 2px;
                flex: 1;
                margin-top: -16px;
-                font-size: 14px;
+                font-size: var(--theme-body-1-font-size);
                line-height: 24px;
                letter-spacing: 0.25px;

--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss
@@ -6,7 +6,7 @@
        padding: 16px 12px;
        height: 32px;
        flex: 1 1 auto;
-        font-size: 14px;
+        font-size: var(--theme-body-1-font-size);
        letter-spacing: 0.15px;
        line-height: 24px;
        font-weight: bold;
--- a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss
+++ b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss
@@ -1,6 +1,6 @@
 .adf-search-filter {
    .mat-expansion-panel-header-title {
-        font-size: 14px;
+        font-size: var(--theme-body-1-font-size);
        color: var(--theme-text-bold-color);
    }

--- a/lib/content-services/src/lib/search/components/search-form/search-form.component.scss
+++ b/lib/content-services/src/lib/search/components/search-form/search-form.component.scss
@@ -18,7 +18,7 @@
        max-width: 120px;
        min-width: 120px;
        font-weight: bold;
-        font-size: 14px;
+        font-size: var(--theme-body-1-font-size);
        line-height: 24px;
        padding-right: 12px;
        text-overflow: ellipsis;
--- a/lib/content-services/src/lib/tag/tag-actions.component.scss
+++ b/lib/content-services/src/lib/tag/tag-actions.component.scss
@@ -9,7 +9,7 @@
    }

    .adf-tag-actions-delete-text {
-        font-size: 16px;
+        font-size: var(--theme-subheading-2-font-size);
        float: left;
    }

--- a/lib/content-services/src/lib/tag/tag-list.component.scss
+++ b/lib/content-services/src/lib/tag/tag-list.component.scss
@@ -10,7 +10,7 @@

        .adf-list-tag {
            display: block;
-            font-size: 16px;
+            font-size: var(--theme-subheading-2-font-size);

            .mat-chip {
                color: var(--theme-primary-color-default-contrast);
--- a/lib/content-services/src/lib/tag/tag-node-list.component.scss
+++ b/lib/content-services/src/lib/tag/tag-node-list.component.scss
@@ -17,7 +17,7 @@
    }

    .adf-tag-chips-delete-icon {
-        font-size: 20px;
+        font-size: var(--theme-title-font-size);
        background-repeat: no-repeat;
        display: inline-block;
        fill: currentColor;
--- a/lib/content-services/src/lib/tree-view/components/tree-view.component.scss
+++ b/lib/content-services/src/lib/tree-view/components/tree-view.component.scss
@@ -5,7 +5,7 @@

    &-tree-view-node.mat-tree-node {
        min-height: 40px;
-        font-size: 12px;
+        font-size: var(--theme-caption-font-size);
        align-items: baseline;
    }

--- a/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.scss
+++ b/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.scss
@@ -58,7 +58,7 @@
    }

    &__confirmation--title {
-        font-size: 16px;
+        font-size: var(--theme-subheading-2-font-size);
        line-height: 1.5;
        letter-spacing: -0.4px;
        color: var(--theme-text-bold-color);
--- 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;
--- a/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.scss
+++ b/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.scss
@@ -64,7 +64,7 @@
            z-index: 7;

            .adf-application-title {
-                font-size: 24px;
+                font-size: var(--theme-headline-font-size);
                margin: 0;
            }
        }
--- a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.scss
+++ b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.scss
@@ -20,7 +20,7 @@

 .adf-edit-report-title {
    float: left;
-    font-size: 20px !important;
+    font-size: var(--theme-title-font-size) !important;
    padding-top: 19px;
 }

--- a/lib/insights/src/lib/diagram/components/tooltip/diagram-tooltip.component.scss
+++ b/lib/insights/src/lib/diagram/components/tooltip/diagram-tooltip.component.scss
@@ -6,7 +6,7 @@
        display: inline-block;
        font-weight: 500;
        line-height: 14px;
-        font-size: 14px;
+        font-size: var(--theme-body-1-font-size);
        max-width: 300px;
        position: fixed;
        top: -500px;
--- a/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.scss
@@ -95,7 +95,7 @@ $tile-themes: (
                h1 {
                    color: white;
                    width: 80%;
-                    font-size: 24px;
+                    font-size: var(--theme-headline-font-size);
                    margin: 0;
                    line-height: normal;
                    white-space: nowrap;
--- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss
@@ -22,11 +22,11 @@

        .mat-raised-button {
            line-height: 28px;
-            font-size: 12px;
+            font-size: var(--theme-caption-font-size);
        }

        button span {
-            font-size: 12px;
+            font-size: var(--theme-caption-font-size);

            mat-icon {
                line-height: 12px;
@@ -35,7 +35,7 @@
            }

            .material-icons {
-                font-size: 18px;
+                font-size: var(--theme-adf-picture-1-font-size);
            }
        }
    }
--- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss
@@ -9,7 +9,7 @@
        }

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

        &-select {
--- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss
@@ -23,14 +23,14 @@
            &-message {
                padding-right: 8px;
                height: 16px;
-                font-size: 12px;
+                font-size: var(--theme-caption-font-size);
                line-height: 1.33;
                color: var(--theme-warn-color);
                width: auto;
            }

            &-icon {
-                font-size: 17px;
+                font-size: var(--theme-adf-icon-1-font-size);
                color: var(--theme-warn-color);
            }
        }
@@ -42,7 +42,7 @@
    width: 40px;
    height: 40px;
    font-weight: bolder;
-    font-size: 18px;
+    font-size: var(--theme-adf-picture-1-font-size);
    box-shadow: none !important;

    .mat-button-wrapper {
--- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss
@@ -28,7 +28,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;
    }

@@ -40,14 +40,14 @@
        &-message {
            padding-right: 8px;
            height: 16px;
-            font-size: 12px;
+            font-size: var(--theme-caption-font-size);
            line-height: 1.33;
            color: var(--theme-warn-color);
            width: auto;
        }

        &-icon {
-            font-size: 17px;
+            font-size: var(--theme-adf-icon-1-font-size);
            color: var(--theme-warn-color);
        }
    }
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.scss
@@ -13,14 +13,14 @@
    .adf-error-text {
        padding-right: 8px;
        height: 16px;
-        font-size: 11px;
+        font-size: var(--theme-caption-font-size);
        line-height: 1.33;
        color: var(--theme-warn-color);
        width: auto;
    }

    .adf-error-icon {
-        font-size: 16px;
+        font-size: var(--theme-subheading-2-font-size);
        color: var(--theme-warn-color);
    }
 }
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.scss
@@ -4,7 +4,7 @@
        height: 24px;
        width: 100%;
        cursor: pointer;
-        font-size: 14px !important;
+        font-size: var(--theme-body-1-font-size) !important;
        font-weight: bold;
        opacity: 1;

--- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.scss
@@ -6,7 +6,7 @@
 }

 .adf-no-content-message {
-    font-size: 16px;
+    font-size: var(--theme-subheading-2-font-size);
    font-weight: bold;
    text-align: center;
    opacity: 0.54;
--- a/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss
@@ -4,7 +4,7 @@

    .mat-card-title {
        font-weight: bold;
-        font-size: 18px;
+        font-size: var(--theme-adf-task-title-font-size);
    }
 }

@@ -27,21 +27,21 @@
    .adf-error-text {
        padding-right: 8px;
        height: 16px;
-        font-size: 12px;
+        font-size: var(--theme-caption-font-size);
        line-height: 1.33;
        color: var(--theme-warn-color);
        width: auto;
    }

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

 .adf-cloud-start-task-footer {
    padding: 4px;
-    font-size: 18px;
+    font-size: var(--theme-adf-task-footer-font-size);
    border-top: 1px solid #eee;
 }

--- a/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.scss
@@ -4,7 +4,7 @@
        padding: 12px 0 !important;
        height: 24px;
        width: 100%;
-        font-size: 14px !important;
+        font-size: var(--theme-body-1-font-size) !important;
        font-weight: bold;
        opacity: 1;

--- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.scss
@@ -1,5 +1,5 @@
 .adf-edit-task-filter-checkbox {
-    font-size: 16px;
+    font-size: var(--theme-subheading-2-font-size);
    padding-top: 10px;
    text-align: center;
    flex: 1 23%;
--- a/lib/process-services/src/lib/app-list/apps-list.component.scss
+++ b/lib/process-services/src/lib/app-list/apps-list.component.scss
@@ -118,7 +118,7 @@ $tile-themes: (
                h1 {
                    color: white;
                    width: 80%;
-                    font-size: 24px;
+                    font-size: var(--theme-headline-font-size);
                    margin: 0;
                    line-height: normal;
                    white-space: nowrap;
--- a/lib/process-services/src/lib/attachment/process-attachment-list.component.scss
+++ b/lib/process-services/src/lib/attachment/process-attachment-list.component.scss
@@ -10,7 +10,7 @@
 .adf-empty-list-header {
    height: 32px;
    opacity: 0.26 !important;
-    font-size: 24px;
+    font-size: var(--theme-headline-font-size);
    line-height: 1.33;
    letter-spacing: -1px;
 }
--- a/lib/process-services/src/lib/attachment/task-attachment-list.component.scss
+++ b/lib/process-services/src/lib/attachment/task-attachment-list.component.scss
@@ -10,7 +10,7 @@ adf-datatable .adf-data-cell {
 .adf-empty-list-header {
    height: 32px;
    opacity: 0.26;
-    font-size: 24px;
+    font-size: var(--theme-headline-font-size);
    line-height: 1.33;
    letter-spacing: -1px;
 }
@@ -33,7 +33,7 @@ adf-datatable .adf-data-cell {
 .adf-empty-list__any-files-here-to-add {
    min-height: 24px;
    opacity: 0.54;
-    font-size: 16px;
+    font-size: var(--theme-subheading-2-font-size);
    line-height: 1.5;
    letter-spacing: -0.4px;
    margin-top: 17px;
--- a/lib/process-services/src/lib/people/components/people-search-field/people-search-field.component.scss
+++ b/lib/process-services/src/lib/people/components/people-search-field/people-search-field.component.scss
@@ -27,7 +27,7 @@
        color: #fff;
        text-align: center;
        font-weight: bolder;
-        font-size: 18px;
+        font-size: var(--theme-adf-picture-1-font-size);
        text-transform: uppercase;
        vertical-align: text-bottom;
    }
--- a/lib/process-services/src/lib/people/components/people/people.component.scss
+++ b/lib/process-services/src/lib/people/components/people/people.component.scss
@@ -85,7 +85,7 @@ adf-people-list adf-datatable {
    color: #fff;
    text-align: center;
    font-weight: bolder;
-    font-size: 18px;
+    font-size: var(--theme-adf-picture-1-font-size);
    text-transform: uppercase;
    vertical-align: text-bottom;
 }
--- a/lib/process-services/src/lib/process-comments/process-comments.component.scss
+++ b/lib/process-services/src/lib/process-comments/process-comments.component.scss
@@ -30,7 +30,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/process-services/src/lib/process-list/components/process-filters.component.scss
+++ b/lib/process-services/src/lib/process-list/components/process-filters.component.scss
@@ -4,7 +4,7 @@
        height: 24px;
        width: 100%;
        cursor: pointer;
-        font-size: 14px !important;
+        font-size: var(--theme-body-1-font-size) !important;
        font-weight: bold;
        opacity: 0.54;

--- a/lib/process-services/src/lib/process-list/components/process-instance-tasks.component.css
+++ b/lib/process-services/src/lib/process-list/components/process-instance-tasks.component.css
@@ -57,7 +57,7 @@

 .no-results {
    margin-left: 9px;
-    font-size: 14px;
+    font-size: var(--theme-body-1-font-size);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 18px;
--- a/lib/process-services/src/lib/process-list/components/process-list.component.css
+++ b/lib/process-services/src/lib/process-list/components/process-list.component.css
@@ -4,7 +4,7 @@
 }

 .no-content-message {
-    font-size: 16px;
+    font-size: var(--theme-subheading-2-font-size);
    font-weight: bold;
    text-align: center;
    opacity: 0.54;
--- a/lib/process-services/src/lib/task-list/components/start-task.component.scss
+++ b/lib/process-services/src/lib/task-list/components/start-task.component.scss
@@ -5,7 +5,7 @@

    .mat-card-title {
        font-weight: bold;
-        font-size: 18px;
+        font-size: var(--theme-adf-task-title-font-size);
    }
 }

@@ -19,7 +19,7 @@

 .adf-new-task-footer {
    padding: 4px;
-    font-size: 18px;
+    font-size: var(--theme-adf-task-footer-font-size);
    border-top: 1px solid #eee;
 }

@@ -75,14 +75,14 @@ adf-start-task {
        &-error-text {
            padding-right: 8px;
            height: 16px;
-            font-size: 12px;
+            font-size: var(--theme-caption-font-size);
            line-height: 1.33;
            color: var(--theme-warn-color);
            width: auto;
        }

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

--- a/lib/process-services/src/lib/task-list/components/task-details.component.scss
+++ b/lib/process-services/src/lib/task-list/components/task-details.component.scss
@@ -9,7 +9,7 @@
 .adf-activiti-task-details__header {
    align-self: flex-end;
    display: flex;
-    font-size: 24px;
+    font-size: var(--theme-headline-font-size);
    font-weight: 300;
    line-height: normal;
    overflow: hidden;
--- a/lib/process-services/src/lib/task-list/components/task-filters.component.scss
+++ b/lib/process-services/src/lib/task-list/components/task-filters.component.scss
@@ -4,7 +4,7 @@
        height: 24px;
        width: 100%;
        cursor: pointer;
-        font-size: 14px !important;
+        font-size: var(--theme-body-1-font-size) !important;
        font-weight: bold;
        opacity: 0.54;