[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-10-08 14:51:32 +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);