From 670d2befdcf42f397e93386c45e75224c0082785 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bartosz=20Seku=C5=82a?= Date: Tue, 8 Feb 2022 14:15:57 +0100 Subject: [PATCH] [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 --- .../app/components/files/files.component.scss | 2 +- .../src/lib/breadcrumb/breadcrumb.component.scss | 8 ++++---- .../dropdown-breadcrumb.component.scss | 4 ++-- .../content-node-selector-panel.component.scss | 6 +++--- .../content-node-selector.component.scss | 2 +- .../name-location-cell.component.scss | 2 +- .../content-node-share.dialog.scss | 4 ++-- .../components/document-list.component.scss | 12 ++++++------ .../add-permission-dialog.component.scss | 2 +- .../user-icon-column.component.scss | 4 ++-- .../user-name-column.component.scss | 4 ++-- .../components/search-control.component.scss | 2 +- .../search-facet-field.component.scss | 4 ++-- .../search-filter-menu-card.component.scss | 2 +- .../search-filter/search-filter.component.scss | 2 +- .../search-form/search-form.component.scss | 2 +- .../src/lib/tag/tag-actions.component.scss | 2 +- .../src/lib/tag/tag-list.component.scss | 2 +- .../src/lib/tag/tag-node-list.component.scss | 2 +- .../components/tree-view.component.scss | 2 +- .../file-uploading-dialog.component.scss | 2 +- .../card-view-arrayitem.component.scss | 2 +- .../card-view-dateitem.component.scss | 2 +- .../card-view-keyvaluepairsitem.component.scss | 2 +- .../select-filter-input.component.scss | 2 +- .../card-view-textitem.component.scss | 4 ++-- .../card-view/card-view.component.scss | 4 ++-- lib/core/comments/comment-list.component.scss | 8 ++++---- lib/core/comments/comments.component.scss | 2 +- .../datatable/datatable.component.scss | 8 ++++---- .../widgets/dropdown/dropdown.widget.scss | 2 +- .../dynamic-table/dynamic-table.widget.scss | 4 ++-- .../editors/boolean/boolean.editor.scss | 2 +- lib/core/form/components/widgets/form.theme.scss | 4 ++-- .../multiline-text/multiline-text.widget.scss | 2 +- .../components/widgets/people/people.widget.scss | 2 +- .../info-drawer-layout.component.scss | 2 +- .../sidebar-action-menu.component.scss | 2 +- lib/core/login/components/login.component.scss | 12 ++++++------ .../notification-history.component.scss | 6 +++--- .../search-text/search-text-input.component.scss | 2 +- lib/core/styles/_index.scss | 16 +++++++++++++++- lib/core/styles/_mixins.scss | 2 +- .../empty-content/empty-content.component.scss | 4 ++-- .../error-content/error-content.component.scss | 6 +++--- lib/core/toolbar/toolbar.component.scss | 2 +- .../userinfo/components/user-info.component.scss | 14 +++++++------- .../viewer/components/pdf-viewer.component.scss | 4 ++-- lib/core/viewer/components/viewer.component.scss | 4 ++-- .../analytics-report-list.component.scss | 2 +- .../analytics-report-parameters.component.scss | 2 +- .../tooltip/diagram-tooltip.component.scss | 2 +- .../components/app-details-cloud.component.scss | 2 +- .../attach-file-cloud-widget.component.scss | 6 +++--- .../widgets/dropdown/dropdown-cloud.widget.scss | 2 +- .../group/components/group-cloud.component.scss | 6 +++--- .../components/people-cloud.component.scss | 6 +++--- .../edit-process-filter-cloud.component.scss | 4 ++-- .../process-filters-cloud.component.scss | 2 +- .../components/process-list-cloud.component.scss | 2 +- .../components/start-task-cloud.component.scss | 8 ++++---- .../base-task-filters-cloud.component.scss | 2 +- .../base-edit-task-filter-cloud.component.scss | 2 +- .../src/lib/app-list/apps-list.component.scss | 2 +- .../process-attachment-list.component.scss | 2 +- .../task-attachment-list.component.scss | 4 ++-- .../people-search-field.component.scss | 2 +- .../components/people/people.component.scss | 2 +- .../process-comments.component.scss | 2 +- .../components/process-filters.component.scss | 2 +- .../process-instance-tasks.component.css | 2 +- .../components/process-list.component.css | 2 +- .../components/start-task.component.scss | 8 ++++---- .../components/task-details.component.scss | 2 +- .../components/task-filters.component.scss | 2 +- 75 files changed, 146 insertions(+), 132 deletions(-) diff --git a/demo-shell/src/app/components/files/files.component.scss b/demo-shell/src/app/components/files/files.component.scss index 4c0b2c3345..dd4e19d808 100644 --- a/demo-shell/src/app/components/files/files.component.scss +++ b/demo-shell/src/app/components/files/files.component.scss @@ -68,7 +68,7 @@ .app-no-result-message { height: 32px; opacity: 0.26; - font-size: 24px; + font-size: var(--theme-headline-font-size); line-height: 1.33; letter-spacing: -1px; } diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss index cfb11462e3..0195df887b 100644 --- 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 { diff --git a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss index 7247dbf6b5..29335e92a0 100644 --- 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 { diff --git 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 index 6f54299c4d..cdb566b41e 100644 --- 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); } } diff --git 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 index e8a4ba9862..c459c39298 100644 --- 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; diff --git 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 index 5ac6431bb2..3d89343eda 100644 --- 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); } } diff --git 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 index c60630f0e4..1c60fe1772 100644 --- 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 { diff --git 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 index 5a32997c6f..04f9b5af0e 100644 --- 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); diff --git 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 index 3929418ccb..073c666d3c 100644 --- 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; diff --git 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 index eccedd2002..ae01735e2f 100644 --- 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 { diff --git 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 index 4570f061c8..ad5b9f9dc6 100644 --- 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); diff --git a/lib/content-services/src/lib/search/components/search-control.component.scss b/lib/content-services/src/lib/search/components/search-control.component.scss index 578afff551..5dbfe6eb10 100644 --- 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); diff --git 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 index 146b9fd555..f66c85fcd6 100644 --- 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; diff --git 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 index cc84374fa3..4ba8c6040f 100644 --- 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; diff --git 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 index bacffe7508..ced6f0d233 100644 --- 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); } diff --git 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 index ca1bd85395..a8b71d9e55 100644 --- 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; diff --git a/lib/content-services/src/lib/tag/tag-actions.component.scss b/lib/content-services/src/lib/tag/tag-actions.component.scss index 46a8d35668..451aa6ea49 100644 --- 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; } diff --git a/lib/content-services/src/lib/tag/tag-list.component.scss b/lib/content-services/src/lib/tag/tag-list.component.scss index 679e5c4226..cb06582d20 100644 --- 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); diff --git a/lib/content-services/src/lib/tag/tag-node-list.component.scss b/lib/content-services/src/lib/tag/tag-node-list.component.scss index 58f6faf0a6..ab14d76697 100644 --- 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; diff --git 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 index 5fa44e6dab..1adda3befd 100644 --- 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; } diff --git 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 index 6aaac4dd5d..cd19c07779 100644 --- 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); diff --git 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 index b53100a2b6..5e1a7b27e4 100644 --- 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; } diff --git 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 index 4eb9bbe421..9f2d1890b4 100644 --- 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; diff --git 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 index edd78b6fa4..4e1a030c0e 100644 --- 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 { diff --git 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 index f1321d1ee8..152454e3b2 100644 --- 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; diff --git 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 index 576c1a026b..953aa13ce0 100644 --- 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 { diff --git a/lib/core/card-view/components/card-view/card-view.component.scss b/lib/core/card-view/components/card-view/card-view.component.scss index c1bcc4c762..9e3088f3f9 100644 --- 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); } } diff --git a/lib/core/comments/comment-list.component.scss b/lib/core/comments/comment-list.component.scss index 9f8b636519..14fdb8e936 100644 --- 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); } diff --git a/lib/core/comments/comments.component.scss b/lib/core/comments/comments.component.scss index 993ab003da..8d8e079faa 100644 --- 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); } diff --git a/lib/core/datatable/components/datatable/datatable.component.scss b/lib/core/datatable/components/datatable/datatable.component.scss index 0cf0da08e0..d99177ebac 100644 --- 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; diff --git a/lib/core/form/components/widgets/dropdown/dropdown.widget.scss b/lib/core/form/components/widgets/dropdown/dropdown.widget.scss index 6a37ab5950..dcc88660f3 100644 --- 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 { diff --git a/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss index 6f66f1efc8..2d7829d0d3 100644 --- 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; diff --git 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 index 6a9730a913..ad6a2c9318 100644 --- 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; } diff --git a/lib/core/form/components/widgets/form.theme.scss b/lib/core/form/components/widgets/form.theme.scss index 9737104048..544d66495c 100644 --- 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); } diff --git a/lib/core/form/components/widgets/multiline-text/multiline-text.widget.scss b/lib/core/form/components/widgets/multiline-text/multiline-text.widget.scss index 18df85d540..326f144b55 100644 --- 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); diff --git a/lib/core/form/components/widgets/people/people.widget.scss b/lib/core/form/components/widgets/people/people.widget.scss index 536bad4ed5..e20af0b929 100644 --- 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; } diff --git a/lib/core/info-drawer/info-drawer-layout.component.scss b/lib/core/info-drawer/info-drawer-layout.component.scss index 64f25917df..56682c3fef 100644 --- 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 { diff --git a/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss index e6d0ab3ef8..7a5449c899 100644 --- 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; diff --git a/lib/core/login/components/login.component.scss b/lib/core/login/components/login.component.scss index 27864274ba..d54ff91ca2 100644 --- 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; } diff --git a/lib/core/notifications/components/notification-history.component.scss b/lib/core/notifications/components/notification-history.component.scss index 2c1e0cda66..5f8cfeac76 100644 --- 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; diff --git a/lib/core/search-text/search-text-input.component.scss b/lib/core/search-text/search-text-input.component.scss index e106b34a3c..04e746e20e 100644 --- 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); } } diff --git a/lib/core/styles/_index.scss b/lib/core/styles/_index.scss index cbbc0e5fc3..5c797cd1c6 100644 --- 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 +); diff --git a/lib/core/styles/_mixins.scss b/lib/core/styles/_mixins.scss index 60b5ced045..d0de655556 100644 --- 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; diff --git a/lib/core/templates/empty-content/empty-content.component.scss b/lib/core/templates/empty-content/empty-content.component.scss index 009ab8b921..dcce571069 100644 --- 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; diff --git a/lib/core/templates/error-content/error-content.component.scss b/lib/core/templates/error-content/error-content.component.scss index b6f4c33baa..022d4942c0 100644 --- 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); } } } diff --git a/lib/core/toolbar/toolbar.component.scss b/lib/core/toolbar/toolbar.component.scss index bd8290c789..b72a3427fa 100644 --- 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; } diff --git a/lib/core/userinfo/components/user-info.component.scss b/lib/core/userinfo/components/user-info.component.scss index 1e27582354..4161e22a04 100644 --- 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; diff --git a/lib/core/viewer/components/pdf-viewer.component.scss b/lib/core/viewer/components/pdf-viewer.component.scss index c43db5a917..b745fedc89 100644 --- 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; diff --git a/lib/core/viewer/components/viewer.component.scss b/lib/core/viewer/components/viewer.component.scss index 885497e830..c9ebd54c5d 100644 --- 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; diff --git 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 index a21e39a57a..c0a2e35b8e 100644 --- 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; } } diff --git 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 index 5e75fe559b..0e594a3524 100644 --- 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; } diff --git a/lib/insights/src/lib/diagram/components/tooltip/diagram-tooltip.component.scss b/lib/insights/src/lib/diagram/components/tooltip/diagram-tooltip.component.scss index d3b5f06d61..f05f25546d 100644 --- 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; diff --git 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 index 471ccb29a2..9136f91db0 100644 --- 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; diff --git 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 index e236cb761f..17013e2be8 100644 --- 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); } } } diff --git 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 index 9a675ba27a..87fc50fd8f 100644 --- 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 { diff --git 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 index d59aed4446..604f57836d 100644 --- 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 { diff --git 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 index ce5f403aaf..db10ff750b 100644 --- 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); } } diff --git 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 index c208d941fb..2487b45f95 100644 --- 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); } } diff --git 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 index f385b208a9..0d8940e62e 100644 --- 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; diff --git 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 index bee9fd39d9..82e346dc62 100644 --- 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; diff --git 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 index ff42a0d0dc..5d200d2f77 100644 --- 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; } diff --git 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 index 3e5ba0ebea..bc87227faa 100644 --- 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; diff --git 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 index 1e94dd637f..e61239a723 100644 --- 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%; diff --git a/lib/process-services/src/lib/app-list/apps-list.component.scss b/lib/process-services/src/lib/app-list/apps-list.component.scss index 75af67e660..c8e834a872 100644 --- 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; diff --git a/lib/process-services/src/lib/attachment/process-attachment-list.component.scss b/lib/process-services/src/lib/attachment/process-attachment-list.component.scss index 8038285b15..0d92d9621c 100644 --- 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; } diff --git a/lib/process-services/src/lib/attachment/task-attachment-list.component.scss b/lib/process-services/src/lib/attachment/task-attachment-list.component.scss index 485191752a..384427ce23 100644 --- 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; diff --git 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 index fa5af0d920..aa51d8fbce 100644 --- 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; } diff --git a/lib/process-services/src/lib/people/components/people/people.component.scss b/lib/process-services/src/lib/people/components/people/people.component.scss index 8dfa450b4e..7a44edfa61 100644 --- 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; } diff --git a/lib/process-services/src/lib/process-comments/process-comments.component.scss b/lib/process-services/src/lib/process-comments/process-comments.component.scss index ba2e621653..cde618468c 100644 --- 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); } diff --git 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 index 47889e0bb0..77dabf2172 100644 --- 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; diff --git 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 index a23ba4e3b4..d8c7d967a6 100644 --- 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; diff --git 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 index 938ee0febe..2ccc2efe81 100644 --- 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; diff --git 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 index 5cd9cf7310..e070e4541f 100644 --- 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); } diff --git 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 index 5e1874237b..41ac803a92 100644 --- 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; diff --git 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 index 47889e0bb0..77dabf2172 100644 --- 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;