From 64826c3a99b56411bc74fbc97813062f5ef0cd51 Mon Sep 17 00:00:00 2001 From: Wojciech Duda <69160975+wojd0@users.noreply.github.com> Date: Wed, 22 Apr 2026 11:02:17 +0200 Subject: [PATCH] AAE-40649 Material Design 3 migration (#11286) * AAE-38957 Cleanup code from color assignments on Material elements (#11266) * AAE-38646 cleanup core lib from custom variables (#11259) * AAE-38646 General cleanup of custom variables from core lib * AAE-38646 Cleanup some of the remaining variables * AAE-38646 Last color-mix removal * AAE-38646 Reduce amount of customizations * AAE-38646 apply overrides, reduce customization * AAE-38646 modify remaining styles * AAE-38646 Fix override assignemnts * AAE-38646 Address comments, cleanup unused * AAE-38978 Cleanup process-services-cloud lib from custom css variables (#11295) * AAE-38978 Cleanup custom variables inside process-services-cloud lib * AAE-38978 Adjust rich text widget styling * AAE-38978 Comment fixes * AAE-38980 Cleanup insights lib from custom css variables (#11314) * AAE-38980 Cleanup insights lib from custom css variables * AAE-38980 Removed unnecessarily specific selector * AAE-38979 Cleanup content-services lib from custom css variables (#11313) * AAE-38979 Remove/replace variable and hardcoded customizations * AAE-38979 Cleanup unused @use and @import statements * AAE-39159 Cleanup process-services lib from custom css variables (#11316) * AAE-39159 Cleanup process-services lib from custom css variables * AAE-39159 Fix import and build * Fix build * Remove leftover button customization * fix missing brace * AAE-39748 Pagination font size match md3 * fix incorrect html templates after rebase * swap leftover variables * fix units * copilot comments * visual regression result fixes * CSX-204 Update card view components (#11358) * CSX-535 Update background color on readonly for card view selectitem (#11799) * remove invalid color test * add stylelint rule --------- Co-authored-by: Ehsan Rezaei Co-authored-by: Ricardo Dias --- .stylelintrc.json | 6 + lib/content-services/project.json | 2 +- .../aspect-list-dialog.component.scss | 8 +- .../aspect-list/aspect-list.component.scss | 16 +- .../lib/breadcrumb/breadcrumb.component.scss | 32 ++-- .../dropdown-breadcrumb.component.scss | 13 +- .../categories-management.component.html | 2 +- .../categories-management.component.scss | 24 +-- .../content-metadata-card.component.scss | 9 - .../content-metadata.component.html | 10 +- .../content-metadata.component.scss | 46 +---- ...content-node-selector-panel.component.scss | 40 ++--- .../content-node-selector.component.scss | 46 +---- .../name-location-cell.component.scss | 4 +- .../content-node-share.dialog.html | 4 +- .../content-node-share.dialog.scss | 27 ++- .../content-type-dialog.component.scss | 8 +- .../category-selector.dialog.html | 1 - .../download-zip/download-zip.dialog.html | 4 +- .../src/lib/dialogs/folder/folder.dialog.scss | 12 +- .../lib/dialogs/library/library.dialog.html | 2 - .../components/document-list.component.scss | 54 ++---- .../file-auto-download.component.html | 1 - .../new-version-uploader.dialog.html | 2 +- .../new-version-uploader.dialog.scss | 11 +- .../add-permission-dialog.component.scss | 37 +--- .../add-permission-panel.component.scss | 12 +- .../add-permission.component.scss | 11 -- .../add-permission.component.ts | 1 - .../permission-list.component.html | 3 +- .../permission-list.component.scss | 7 +- .../user-icon-column.component.scss | 17 +- .../user-name-column.component.scss | 8 +- .../search-check-list.component.html | 2 +- ...rch-chip-autocomplete-input.component.scss | 32 ++-- .../search-chip-list.component.html | 1 - .../search-chip-list.component.scss | 6 +- .../components/search-control.component.scss | 9 +- .../search-datetime-range.component.html | 4 +- .../search-facet-field.component.html | 2 +- .../search-facet-field.component.scss | 2 +- ...h-filter-autocomplete-chips.component.html | 4 +- .../search-facet-chip-tabbed.component.html | 2 +- .../search-facet-chip.component.html | 2 +- .../search-filter-chips.component.scss | 28 +-- .../search-filter-menu-card.component.scss | 10 +- .../search-widget-chip.component.html | 2 +- .../search-filter-container.component.html | 1 - .../search-filter-container.component.scss | 25 +-- .../search-filter-tabbed.component.scss | 6 +- .../search-filter-card.component.html | 2 +- .../search-filter.component.html | 1 - .../search-filter.component.scss | 6 +- .../search-form/search-form.component.scss | 11 +- .../search-logical-filter.component.scss | 10 -- .../search-number-range.component.html | 4 +- .../search-slider.component.html | 2 +- .../tag-actions/tag-actions.component.html | 2 +- .../tag-actions/tag-actions.component.scss | 2 +- .../lib/tag/tag-list/tag-list.component.scss | 6 +- .../tags-creator/tags-creator.component.scss | 16 +- .../components/tree-view.component.scss | 4 +- .../lib/tree/components/tree.component.html | 13 +- .../lib/tree/components/tree.component.scss | 14 +- .../file-uploading-dialog.component.html | 3 - .../file-uploading-dialog.component.scss | 18 +- .../file-uploading-list-row.component.html | 2 +- .../file-uploading-list-row.component.scss | 20 +-- .../components/upload-button.component.scss | 16 +- .../version-comparison.component.scss | 2 +- .../version-list.component.html | 3 +- .../version-list.component.scss | 6 +- .../version-manager.component.html | 2 +- .../components/alfresco-viewer.component.scss | 1 - .../components/alfresco-viewer.component.ts | 1 - .../breadcrumb/breadcrumb.component.html | 1 - lib/core/project.json | 2 +- .../about-package/package-list.component.scss | 10 -- .../about-server-settings.component.scss | 2 - lib/core/src/lib/about/about.component.scss | 4 - lib/core/src/lib/avatar/avatar.component.html | 7 +- lib/core/src/lib/avatar/avatar.component.scss | 16 +- lib/core/src/lib/avatar/avatar.component.ts | 8 +- .../card-view-arrayitem.component.scss | 3 +- .../card-view-dateitem.component.scss | 1 - .../card-view-selectitem.component.scss | 7 +- .../select-filter-input.component.scss | 19 +- .../card-view-textitem.component.scss | 22 +-- .../card-view/card-view.component.scss | 9 +- .../comment-list/comment-list.component.scss | 12 +- .../src/lib/comments/comments.component.html | 1 - .../src/lib/comments/comments.component.scss | 2 +- .../columns-selector.component.html | 2 - .../columns-selector.component.scss | 14 +- .../datatable/datatable.component.scss | 75 ++++---- .../confirm-dialog/confirm.dialog.html | 1 - .../lib/dialogs/dialog/dialog.component.html | 4 - .../lib/dialogs/dialog/dialog.component.scss | 4 +- .../unsaved-changes-dialog.component.html | 2 +- .../unsaved-changes-dialog.component.scss | 19 +- .../tooltip-card/tooltip-card.component.scss | 12 +- .../dynamic-chip-list.component.scss | 4 - .../components/form-renderer.component.scss | 33 +--- .../inplace-form-input.component.scss | 19 -- .../widgets/amount/amount.widget.scss | 6 +- .../widgets/checkbox/checkbox.widget.html | 1 - .../widgets/date-time/date-time.widget.scss | 2 +- .../display-text/display-text.widget.scss | 3 - .../form/components/widgets/form.theme.scss | 48 +---- .../widgets/header/header.widget.scss | 6 +- .../widgets/hyperlink/hyperlink.widget.scss | 2 +- .../multiline-text/multiline-text.widget.scss | 2 +- .../widgets/repeat/repeat.widget.scss | 8 +- lib/core/src/lib/header/header.component.html | 3 +- lib/core/src/lib/header/header.component.scss | 24 +-- lib/core/src/lib/header/header.component.ts | 10 +- .../header/navbar/navbar-item.component.html | 2 +- .../header/navbar/navbar-item.component.scss | 14 +- .../identity-user-info.component.scss | 8 +- .../info-drawer-layout.component.scss | 6 +- .../info-drawer/info-drawer.component.scss | 24 +-- .../components/header/header.component.scss | 6 +- .../header/header.component.spec.ts | 2 +- .../layout-container.component.scss | 4 +- .../sidebar-action-menu.component.html | 2 +- .../sidebar-action-menu.component.scss | 9 +- .../sidenav-layout.component.scss | 1 - .../lib/login/components/login.component.html | 13 +- .../components/login/login.component.html | 128 ++++++------- .../components/login/login.component.scss | 78 ++------ .../notification-history.component.scss | 20 +-- .../lib/pagination/pagination.component.scss | 8 +- .../search-text-input.component.scss | 7 +- lib/core/src/lib/styles/_globals.scss | 35 +--- lib/core/src/lib/styles/_mixins.scss | 2 +- .../empty-content.component.scss | 7 +- .../error-content.component.scss | 5 +- .../src/lib/toolbar/toolbar.component.scss | 7 +- .../download-prompt-dialog.component.html | 1 - .../img-viewer/img-viewer.component.scss | 17 +- .../pdf-viewer-password-dialog.scss | 4 - .../pdf-viewer-thumbnails.component.scss | 6 +- .../pdf-viewer/pdf-viewer-host.component.scss | 4 +- .../pdf-viewer/pdf-viewer.component.scss | 21 +-- .../txt-viewer/txt-viewer.component.scss | 2 +- .../unknown-format.component.scss | 1 - .../viewer-render.component.scss | 4 +- .../viewer/components/viewer.component.scss | 34 ++-- lib/insights/project.json | 2 +- .../analytics-generator.component.html | 3 +- .../analytics-report-list.component.scss | 20 +-- ...analytics-report-parameters.component.html | 5 +- ...analytics-report-parameters.component.scss | 14 +- .../buttons-menu/buttons-menu.component.scss | 10 +- .../widgets/checkbox/checkbox.widget.html | 1 - .../widgets/date-range/date-range.widget.scss | 2 +- .../widgets/dropdown/dropdown.widget.scss | 6 +- .../tooltip/diagram-tooltip.component.html | 4 +- .../tooltip/diagram-tooltip.component.scss | 19 +- lib/process-services-cloud/project.json | 2 +- .../app-details-cloud.component.scss | 168 ++++++++++++++++++ .../form/components/form-cloud.component.scss | 13 +- .../spinner/form-spinner.component.html | 1 - .../spinner/form-spinner.component.scss | 2 +- .../attach-file-cloud-widget.component.html | 1 - .../attach-file-cloud-widget.component.scss | 23 +-- ...file-properties-table-cloud.component.scss | 2 +- .../widgets/data-table/data-table.widget.scss | 1 - .../display-external-property.widget.scss | 1 - .../display-rich-text.widget.scss | 9 - .../dropdown/dropdown-cloud.widget.scss | 4 - .../properties-viewer.widget.scss | 2 +- .../radio-buttons-cloud.widget.html | 1 - .../radio-buttons-cloud.widget.scss | 9 - .../components/group-cloud.component.scss | 17 +- .../components/people-cloud.component.scss | 25 +-- .../edit-process-filter-cloud.component.html | 4 +- .../edit-process-filter-cloud.component.scss | 23 --- .../process-filters-cloud.component.scss | 6 +- .../process-header-cloud.component.scss | 3 - .../process-header-cloud.component.ts | 1 - .../start-process-cloud.component.html | 2 +- .../start-process-cloud.component.scss | 4 - ...t-service-task-filter-cloud.component.html | 6 +- ...t-service-task-filter-cloud.component.scss | 24 --- .../edit-task-filter-cloud.component.html | 6 +- .../edit-task-filter-cloud.component.scss | 24 --- .../service-task-filters-cloud.component.scss | 16 +- .../task-assignment-filter.component.scss | 16 -- .../task-filters-cloud.component.scss | 6 +- .../user-task-cloud.component.html | 3 +- .../task-header-cloud.component.scss | 4 +- lib/process-services/project.json | 2 +- .../src/lib/app-list/apps-list.component.scss | 15 +- .../create-process-attachment.component.html | 1 - .../create-task-attachment.component.html | 1 - .../process-attachment-list.component.scss | 18 +- .../task-attachment-list.component.scss | 17 +- .../task-attachment-list.component.spec.ts | 11 +- .../form/start-form/start-form.component.scss | 27 +-- .../attach-file-widget-dialog.component.scss | 13 -- .../attach-file-widget.component.html | 4 +- .../attach-folder-widget.component.html | 1 - .../form/widgets/document/content.widget.scss | 6 +- .../widgets/dropdown/dropdown.widget.scss | 6 - .../dynamic-table/dynamic-table.widget.scss | 59 +++--- .../editors/boolean/boolean.editor.html | 1 - .../editors/boolean/boolean.editor.scss | 3 +- .../editors/row-editor/row.editor.css | 3 +- .../functional-group.widget.scss | 4 +- .../form/widgets/people/people.widget.scss | 21 +-- .../radio-buttons/radio-buttons.widget.html | 1 - .../form/widgets/upload/upload.widget.html | 2 +- .../people-search-field.component.scss | 7 +- .../people-search.component.scss | 8 +- .../components/people/people.component.scss | 16 +- .../process-filters.component.scss | 7 +- .../process-instance-tasks.component.css | 11 +- .../process-instance-tasks.component.html | 4 +- .../process-list/process-list.component.css | 6 +- .../process-list/process-list.component.html | 1 - .../start-process.component.html | 1 - .../start-process.component.scss | 4 - .../attach-form/attach-form.component.html | 4 +- .../checklist/checklist.component.html | 2 +- .../start-task/start-task.component.html | 1 - .../start-task/start-task.component.scss | 44 ++--- .../start-task/start-task.component.spec.ts | 12 -- .../task-details/task-details.component.scss | 21 +-- .../task-filters/task-filters.component.scss | 7 +- .../task-form/task-form.component.html | 1 - .../task-form/task-form.component.scss | 5 +- .../task-header/task-header.component.scss | 4 +- .../task-list/task-list.component.html | 2 +- .../task-standalone.component.html | 2 +- .../task-standalone.component.scss | 20 +-- 236 files changed, 838 insertions(+), 1780 deletions(-) delete mode 100644 lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.scss delete mode 100644 lib/content-services/src/lib/viewer/components/alfresco-viewer.component.scss create mode 100644 lib/process-services-cloud/src/lib/app/components/app-details-cloud/app-details-cloud.component.scss delete mode 100644 lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.scss diff --git a/.stylelintrc.json b/.stylelintrc.json index 62af9a1137..b373468ffb 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,6 +1,12 @@ { "extends": ["stylelint-config-standard-scss"], "rules": { + "custom-property-pattern": [ + "^(mat-sys|mdc)", + { + "message": "Use only Angular Material system variables (--mat-sys-*, --mdc-*)" + } + ], "color-function-notation": "legacy", "alpha-value-notation": "number", "color-no-invalid-hex": true, diff --git a/lib/content-services/project.json b/lib/content-services/project.json index 24e6ec8519..48e39b6c76 100644 --- a/lib/content-services/project.json +++ b/lib/content-services/project.json @@ -43,7 +43,7 @@ "options": { "commands": [ { - "command": "stylelint lib/content-services/**/*.scss --config stylelint-config.json" + "command": "stylelint \"lib/content-services/**/*.scss\" --config .stylelintrc.json" } ] } diff --git a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss index f865d6da43..533fd53cdd 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss +++ b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss @@ -9,8 +9,7 @@ adf-aspect-list-dialog { } .adf-aspect-list-dialog-title { - font-size: large; - font-weight: 200; + font: var(--mat-sys-headline-medium); margin-top: 0; } @@ -44,11 +43,6 @@ adf-aspect-list-dialog { margin-bottom: 8px; .adf-aspect-property-table { - .adf-aspect-property-table-cell { - font-size: smaller; - color: var(--adf-theme-foreground-text-color-087); - } - .adf-aspect-property-table-column { &-name { width: 30%; diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.scss b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss index 8135ed07bc..319649375b 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list.component.scss +++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss @@ -23,7 +23,7 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei &-aspect-list-container { max-height: $dialog-list-height; overflow: auto; - border: 1px solid var(--adf-theme-foreground-text-color-007); + border: 1px solid var(--mat-sys-outline-variant); .adf-aspect-list-check-button { margin-right: 5px; @@ -35,11 +35,11 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei .adf-accordion-aspect-list-item { padding-left: 14px; display: flex; - box-shadow: 0 2px 2px -1px var(--adf-theme-foreground-text-color-007); + box-shadow: var(--mat-sys-level2); &.adf-hover { &:hover { - background-color: var(--adf-theme-background-hover-color); + background-color: var(--mat-sys-surface-container); } } } @@ -47,8 +47,6 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei .adf-accordion-aspect-list-expansion-panel { margin: 0; width: 100%; - box-shadow: none; - background: border-box; #{ms.$mat-checkbox-background} { height: 16px; @@ -56,13 +54,13 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei } &-header { - font-size: smaller; + font: var(--mat-sys-body-small); padding-left: 0; height: 48px; } &-header-title { - color: var(--theme-secondary-text); + color: var(--mat-sys-on-secondary-container); } &-header-description { @@ -82,8 +80,8 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei .adf-aspect-property-table-column-name, .adf-aspect-property-table-column-title, .adf-aspect-property-table-column-data-type { - font-size: 12px; - color: var(--adf-theme-foreground-text-color-064); + font: var(--mat-sys-body-small); + color: var(--mat-sys-on-secondary-container); } .adf-aspect-property-table-column { diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss index 186fbb68b3..0d4bd3eae5 100644 --- a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss +++ b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss @@ -1,11 +1,8 @@ .adf-breadcrumb { display: flex; flex: 1; - line-height: 24px; - font-size: var(--theme-body-1-font-size); - font-weight: 600; - letter-spacing: -0.2px; - color: var(--adf-theme-foreground-text-color-064); + font: var(--mat-sys-body-medium); + color: var(--mat-sys-on-surface); overflow: hidden; &-container { @@ -35,7 +32,7 @@ margin-right: 5px; &:focus { - color: var(--theme-primary-color); + color: var(--mat-sys-primary); outline: none; } @@ -44,11 +41,11 @@ } &-arrow { - font-size: var(--theme-adf-icon-1-font-size); + font: var(--mat-sys-body-small); position: absolute; left: 4px; top: 4px; - color: white; + color: var(--mat-sys-on-secondary); z-index: 2; } @@ -70,30 +67,21 @@ padding-right: 2px; overflow: hidden; display: flex; - line-height: 33px; - font-size: var(--theme-body-1-font-size); - font-weight: 600; - letter-spacing: -0.2px; + font: var(--mat-sys-body-medium); text-align: left; - color: var(--adf-theme-foreground-text-color-064); + color: var(--mat-sys-on-secondary-container); flex: 0 1 auto; min-width: 35px; margin-top: auto; text-overflow: ellipsis; - &:hover, &.adf-active { - color: var(--adf-theme-foreground-text-color-064); - } - - &.adf-active { - color: var(--adf-theme-foreground-text-color-087); + color: var(--mat-sys-on-surface); } &-chevron { - opacity: 1; margin-top: 9px; - font-size: var(--theme-adf-icon-1-font-size); + font: var(--mat-sys-body-small); } &-anchor { @@ -110,7 +98,7 @@ text-align: start; &:focus { - outline: 1px solid var(--theme-accent-color-a200); + outline: 1px solid var(--mat-sys-outline-variant); outline-offset: -1px; } } 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 8a4e543ef9..6de91f8c66 100644 --- a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss +++ b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss @@ -6,11 +6,8 @@ $dropdown-horizontal-offset: 30px; &-dropdown-breadcrumb { display: flex; flex: 1; - line-height: 24px; - font-size: var(--theme-body-1-font-size); - font-weight: 600; - letter-spacing: -0.2px; - color: var(--adf-theme-foreground-text-color-064); + font: var(--mat-sys-body-medium); + color: var(--mat-sys-on-secondary-container); overflow: hidden; margin-top: 10px; @@ -36,7 +33,7 @@ $dropdown-horizontal-offset: 30px; width: 25px; &:focus { - color: var(--theme-primary-color); + color: var(--mat-sys-primary); outline: none; } } @@ -61,12 +58,12 @@ $dropdown-horizontal-offset: 30px; text-overflow: ellipsis; display: inline-block; width: 75%; - color: var(--adf-theme-foreground-text-color); + color: var(--mat-sys-on-surface); } &-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node { padding: 0 12px; - font-size: var(--theme-caption-font-size); + font-size: var(--mat-sys-body-small-size); } &-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node:first-child { diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.html b/lib/content-services/src/lib/category/categories-management/categories-management.component.html index 9ccdb3b6e3..996da294cf 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.html +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.html @@ -10,7 +10,7 @@ (keyup.enter)="addCategory()" adf-auto-focus /> - {{ categoryNameErrorMessageKey | translate }} diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss index 50a402f70a..d18ffc0305 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss @@ -1,5 +1,3 @@ -@use '../../mat-selectors.scss' as ms; - .adf-categories-management { margin: 5px 0; @@ -35,23 +33,11 @@ height: 100%; overflow-wrap: anywhere; padding: 5px 0; - font-size: 14px; - background-color: inherit; - color: inherit; - - &:not(#{ms.$mat-list-item-disabled}):hover { - cursor: pointer; - background: var(--adf-theme-mat-grey-color-a200); - } - - & span { - padding: 0; - } } .adf-existing-categories-label { - font-size: 10px; - color: var(--theme-secondary-text-color); + font: var(--mat-sys-body-small); + color: var(--mat-sys-on-secondary-container); margin-bottom: 2px; } @@ -64,12 +50,8 @@ min-height: 22vh; .adf-create-category-label { - color: var(--theme-primary-color); + color: var(--mat-sys-primary); cursor: pointer; overflow-wrap: anywhere; } - - #{ms.$mat-list-item-disabled} #{ms.$mat-list-item-primary-text} { - opacity: 1; - } } diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss index 7086f49709..90802590a5 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss @@ -10,18 +10,9 @@ &-footer.adf-content-metadata-card-view-footer { margin: 0; padding: 8px 12px; - border-top: 1px solid var(--adf-theme-foreground-text-color-007); display: flex; place-content: stretch space-between; align-items: stretch; max-height: 100%; - - button { - color: var(--adf-theme-foreground-text-color-064); - - &:hover { - color: var(--adf-theme-foreground-text-color-087); - } - } } } diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html index c7ca25fa6c..2984ba8c47 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html @@ -37,7 +37,6 @@ mat-icon-button [attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate" (click)="saveChanges($event)" - color="primary" data-automation-id="save-general-info-metadata" [disabled]="!hasMetadataChanged || invalidProperties.size > 0"> @@ -92,8 +91,7 @@ mat-icon-button [attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate" (click)="saveChanges($event)" - color="primary" - data-automation-id="save-tags-metadata" + data-automation-id="save-tags-metadata" [disabled]="!hasMetadataChanged"> @@ -156,8 +154,7 @@ mat-icon-button [attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate" (click)="saveChanges($event)" - color="primary" - data-automation-id="save-categories-metadata" + data-automation-id="save-categories-metadata" [disabled]="!hasMetadataChanged"> @@ -238,8 +235,7 @@ mat-icon-button [attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate" (click)="saveChanges($event)" - color="primary" - data-automation-id="save-metadata" + data-automation-id="save-metadata" [disabled]="!hasMetadataChanged || invalidProperties.size > 0"> diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss index 6ab33944e9..89d9de697c 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss @@ -5,42 +5,21 @@ $panel-properties-height: 56px !default; .adf { &-metadata-properties { .adf-content-metadata-panel { - box-shadow: none; - border: 1px solid var(--adf-metadata-property-panel-border-color); - border-radius: 12px; margin: 12px; .adf-property-list .adf-property .adf-property-field { label { - font-size: 19px; - line-height: 24px; + font: var(--mat-sys-headline-small); } } } .adf-metadata-properties-header { height: $panel-properties-height; - padding: 0 12px; - border-radius: 12px 12px 0 0; - - &.adf-metadata-properties-header-expanded { - border-bottom: 1px solid var(--adf-metadata-property-panel-border-color); - } - } - - .adf-metadata-properties-expansion-panel, - .adf-metadata-categories-header { - display: block; - margin-top: 16px; - } - - .adf-metadata-properties-tags, - .adf-metadata-no-item-added { - margin-top: 16px; } .adf-edit-icon-buttons { - color: var(--adf-theme-foreground-text-color-064); + color: var(--mat-sys-on-secondary-container); } #{ms.$mat-chip} { @@ -52,13 +31,14 @@ $panel-properties-height: 56px !default; .mat-mdc-chip-action-label { overflow: hidden; } + /* stylelint-enable selector-class-pattern */ } } .adf-metadata-no-item-added { word-break: break-all; - font-size: 15px; + font: var(--mat-sys-body-small); padding: 0 0 0 12px; } @@ -72,23 +52,5 @@ $panel-properties-height: 56px !default; &-metadata-action-buttons { display: flex; justify-content: space-evenly; - - &-clear { - color: var(--adf-metadata-action-button-clear-color); - } - } - - &-metadata-categories-header { - .adf-categories-button { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 15px; - height: $panel-properties-height; - - [hidden] { - visibility: hidden; - } - } } } diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss index cb39c9c2a4..b87b01b64c 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss @@ -1,31 +1,17 @@ -@use '../../mat-selectors.scss' as ms; - /* stylelint-disable no-descending-specificity */ $content-node-selector-thumbnail-width: 35px !default; $content-node-selector-thumbnail-max-width: 40px !default; h2.adf-search-results-label { flex: 1; - font-weight: 600; - font-size: var(--theme-body-1-font-size); - font-style: normal; - font-stretch: normal; - line-height: 1.43; - letter-spacing: -0.2px; - color: var(--adf-theme-foreground-text-color-087); -} - -#{ms.$mdc-dialog} { - #{ms.$mat-dialog-surface}:is(div) { - padding-bottom: 0; - } + font: var(--mat-sys-body-medium); } .adf-content-node-selector-panel { .adf-toolbar .adf-toolbar-container.adf-toolbar-container-row { max-height: 48px; border-bottom-width: 0; - font-size: var(--theme-body-1-font-size); + font-size: var(--mat-sys-body-medium-size); height: auto; } } @@ -46,14 +32,14 @@ h2.adf-search-results-label { width: 100%; margin-bottom: 15px; - .adf-content-node-selector-content-input-icon { - color: var(--adf-theme-foreground-icon-color-054); + .adf-content-node-selector-content-input-icon:is(mat-icon) { + color: var(--mat-sys-on-secondary-container); } .adf-content-node-selector-search-clear-button { .adf-content-node-selector-content-input-icon { &:hover { - color: var(--adf-theme-foreground-base-color); + color: var(--mat-sys-on-surface); } } } @@ -74,20 +60,16 @@ h2.adf-search-results-label { outline: none; .adf-dropdown-breadcrumb-icon { - color: var(--adf-theme-foreground-base-color-045); - - &:hover { - color: var(--adf-theme-foreground-base-color-065); - } + color: var(--mat-sys-on-secondary-container); } &:focus .adf-dropdown-breadcrumb-icon { - color: var(--theme-primary-color); + color: var(--mat-sys-primary); } } .adf-dropdown-breadcrumb-item-chevron { - color: var(--adf-theme-foreground-base-color-045); + color: var(--mat-sys-on-secondary-container); } } @@ -95,7 +77,7 @@ h2.adf-search-results-label { &-list { height: 40vh; overflow: auto; - border: 1px solid var(--adf-theme-foreground-text-color-007); + border: 1px solid var(--mat-sys-outline-variant); border-top: 0; position: relative; @@ -106,7 +88,7 @@ h2.adf-search-results-label { } .adf-highlight { - color: var(--theme-primary-color); + color: var(--mat-sys-primary); } .adf-datatable-list { @@ -122,7 +104,7 @@ h2.adf-search-results-label { } .adf-datatable-selected > svg { - fill: var(--theme-primary-color); + fill: var(--mat-sys-primary); } .adf-no-content-container.adf-datatable-cell { 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 72c4dc0b0b..c9d9c2486b 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 @@ -46,61 +46,19 @@ adf-content-node-selector { } .adf-dropdown-breadcrumb-icon { - color: var(--adf-theme-foreground-base-color-045); - } - - #{ms.$mat-dialog-title} { - margin-bottom: 0; - padding: 0; - - &::before { - display: none; - } - } - - .adf-content-node-selector-dialog-title { - font-size: var(--theme-title-font-size); - font-weight: 600; - font-style: normal; - font-stretch: normal; - line-height: 1.6; - letter-spacing: -0.5px; - color: var(--adf-theme-foreground-text-color-087); - margin-bottom: 20px; - - h2 { - margin: unset; - font-size: unset; - } + color: var(--mat-sys-on-secondary-container); } .adf-content-node-selector-dialog-actions { padding: 8px; height: 77px; - background-color: var(--theme-background-color); display: flex; flex-direction: row; justify-content: space-between; - color: var(--adf-theme-foreground-text-color); - - label { - text-transform: uppercase; - font-weight: normal; - } - - .adf-choose-action { - &[disabled] { - color: var(--adf-theme-foreground-secondary-text-color); - } - - &:enabled { - color: var(--theme-primary-color); - } - } } } -@media screen and (width <= 768px) { +@media screen and (width <=768px) { .adf-content-node-selector-dialog { height: 100vh; } 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 2b33d5bf84..e2a3da57ae 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 @@ -2,7 +2,7 @@ display: grid; &-location { - color: var(--adf-theme-foreground-text-color-064); - font-size: var(--theme-caption-font-size); + color: var(--mat-sys-on-secondary-container); + font: var(--mat-sys-body-small); } } diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html index 4479be9f0a..52d87c6130 100644 --- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html +++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html @@ -20,7 +20,6 @@ {{ 'SHARE.SHARE-LINK' | translate }}

- +
diff --git a/lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.scss b/lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.scss index 677c4acbbc..fdc0c521c6 100644 --- a/lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.scss +++ b/lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.scss @@ -11,14 +11,8 @@ .adf-new-version-uploader-dialog-title { flex: 0 0 auto; - font-size: 20px; - font-weight: 600; - font-style: normal; - font-stretch: normal; - line-height: 1.6; + font: var(--mat-sys-title-medium); margin: 0; - letter-spacing: -0.5px; - color: var(--adf-theme-foreground-text-color-087); } section.adf-new-version-uploader-dialog-content { @@ -34,12 +28,11 @@ padding: 8px 8px 24px 8px; display: flex; justify-content: flex-end; - color: var(--adf-theme-foreground-text-color-064); + color: var(--mat-sys-on-secondary-container); -webkit-font-smoothing: antialiased; button { text-transform: uppercase; - font-weight: normal; } } 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 0b2962f3e6..5fc71abc61 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 @@ -1,23 +1,10 @@ -@use '../../../mat-selectors.scss' as ms; - -#{ms.$mdc-dialog} { - #{ms.$mat-dialog-surface}:is(div) { - padding-bottom: 0; - } -} - .adf-add-permission-dialog { .adf-add-permission-dialog-title { margin-bottom: 28px; margin-left: 20px; margin-right: 20px; - font-size: var(--theme-title-font-size); - font-weight: 600; - font-style: normal; - font-stretch: normal; - line-height: 1.6; - letter-spacing: -0.5px; - color: var(--adf-theme-foreground-text-color-087); + font: var(--mat-sys-title-medium); + color: var(--mat-sys-on-surface); } .adf-add-permission-dialog-content { @@ -30,17 +17,6 @@ &-search-user-button { width: 100%; justify-content: unset; - - #{ms.$mat-button-label} { - padding-right: 0; - } - - #{ms.$mat-icon} { - font-size: 24px; - width: 24px; - height: 24px; - margin-left: 0; - } } &-add-member-action { @@ -59,23 +35,22 @@ .adf-add-permission-dialog-actions { padding: 0 24px; - background-color: var(--theme-background-color); + background-color: var(--mat-sys-surface); display: flex; justify-content: flex-end; - color: var(--adf-theme-foreground-text-color); + color: var(--mat-sys-on-surface); button { text-transform: uppercase; - font-weight: normal; } .adf-choose-action { &[disabled] { - color: var(--adf-theme-foreground-secondary-text-color); + color: var(--mat-sys-on-surface-variant); } &:enabled { - color: var(--theme-primary-color); + color: var(--mat-sys-primary); } } } diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss index d3e52bd93d..0471ceea3a 100644 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss @@ -1,5 +1,3 @@ -@use '../../../mat-selectors.scss' as ms; - $search-result-height: calc(100% - 60px); .adf { @@ -7,11 +5,7 @@ $search-result-height: calc(100% - 60px); display: flex; height: $search-result-height; overflow: auto; - border: 2px solid var(--adf-theme-foreground-text-color-007); - - #{ms.$mat-list-item-end} { - display: none; - } + border: 2px solid var(--mat-sys-outline-variant); &-elements { width: 100%; @@ -38,7 +32,7 @@ $search-result-height: calc(100% - 60px); justify-content: space-around; height: $search-result-height; overflow: auto; - border: 2px solid var(--adf-theme-foreground-text-color-007); + border: 2px solid var(--mat-sys-outline-variant); } &-permission-no-result { @@ -62,7 +56,7 @@ $search-result-height: calc(100% - 60px); } &:enabled { - color: var(--theme-primary-color); + color: var(--mat-sys-primary); } } } diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.scss deleted file mode 100644 index 20f145300c..0000000000 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.scss +++ /dev/null @@ -1,11 +0,0 @@ -.adf { - &-permission-action { - &[disabled] { - opacity: 0.6; - } - - &:enabled { - color: var(--theme-primary-color); - } - } -} diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.ts b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.ts index 018d31d874..6f2a141144 100644 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.ts +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.ts @@ -30,7 +30,6 @@ import { TranslatePipe } from '@ngx-translate/core'; selector: 'adf-add-permission', imports: [CommonModule, AddPermissionPanelComponent, MatButtonModule, TranslatePipe], templateUrl: './add-permission.component.html', - styleUrls: ['./add-permission.component.scss'], encapsulation: ViewEncapsulation.None }) /* diff --git a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html index dc2b1987e4..a0c55ef8a8 100644 --- a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html +++ b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html @@ -5,7 +5,7 @@
- + error

{{ 'PERMISSION_MANAGER.ERROR.NOT-FOUND'| translate }}

 @@ -25,7 +25,6 @@ *ngIf="updatePermissionsAllowed" class="adf-inherit-toggle" title="{{'PERMISSION_MANAGER.LABELS.INHERITED_PERMISSION_TOGGLE' | translate }}" - color="primary" aria-label="{{'PERMISSION_MANAGER.LABELS.INHERITED_PERMISSION_TOGGLE' | translate}}" data-automation-id="adf-inherit-toggle-button" [checked]="model.node.permissions.isInheritanceEnabled" diff --git a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss index 89ec90a351..ad06f83d37 100644 --- a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss @@ -21,13 +21,10 @@ justify-content: space-between; align-items: center; padding: 10px 15px; - border: 1px solid var(--adf-theme-foreground-text-color-007); + border: 1px solid var(--mat-sys-outline-variant); .adf-permission-visibility-toggle { .adf-permission-visibility-toggle-icon { - font-size: 24px; - height: 24px; - width: 24px; margin: 1px 0 0 4px; } } @@ -108,6 +105,6 @@ .adf-pop-over-card { width: 100%; overflow: hidden; - box-shadow: 0 8px 9px -5px var(--adf-theme-foreground-divider-color), 0 15px 22px 2px var(--adf-theme-foreground-divider-color); + box-shadow: var(--mat-sys-level2); } } 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 6aab1a2c34..1d72f54737 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 @@ -1,27 +1,22 @@ .adf-cell-value { .adf-people-initial { - background: var(--theme-primary-color); + background: var(--mat-sys-primary); border-radius: 50%; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; - color: var(--theme-primary-color-default-contrast); - font-weight: bolder; - font-size: var(--theme-adf-picture-1-font-size); + color: var(--mat-sys-on-primary); + font: var(--mat-sys-body-small); text-transform: uppercase; } .adf-group-icon { - height: 20px; - width: 20px; - background: var(--theme-primary-color); + background: var(--mat-sys-primary); border-radius: 50%; padding: 10px; - color: var(--theme-primary-color-default-contrast); - font-weight: bolder; - font-size: var(--theme-title-font-size); + color: var(--mat-sys-on-primary); } .adf-datatable-selected { @@ -35,7 +30,7 @@ margin: 0; svg { - fill: var(--theme-accent-color); + fill: var(--mat-sys-secondary); width: 40px; height: 40px; } 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 1a60d21bea..8e8c52505e 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,13 +1,9 @@ .adf-user { &-name-column { - font-weight: 600; - font-size: var(--theme-body-1-font-size); + font: var(--mat-sys-body-medium); } &-email-column { - font-size: var(--theme-body-1-font-size); - letter-spacing: -0.2px; - line-height: 1.43; - color: var(--adf-theme-foreground-text-color); + font: var(--mat-sys-body-medium); } } diff --git a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html index a8da6faacf..a5e487a21e 100644 --- a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html +++ b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html @@ -14,7 +14,7 @@
-
diff --git a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss index ca728fc596..5482fc55d6 100644 --- a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss +++ b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss @@ -10,26 +10,14 @@ adf-search-chip-autocomplete-input { margin-top: 4px; } - #{ms.$mat-form-text-field-infix} { - border: none; - } - - .adf-chip-list#{ms.$mat-form-field} { - #{ms.$mat-form-field-infix} { - padding-top: 14px; - padding-bottom: 14px; - min-height: unset; - } - } - .adf-search-properties-file-input { margin-left: 3px; } .adf-autocomplete-added-option-chips.adf-option-chips { - border: 1px solid var(--theme-text-color); + border: 1px solid var(--mat-sys-on-surface); border-radius: 10px; - background-color: var(--theme-primary-color-default-contrast); + background-color: var(--mat-sys-on-primary); height: auto; word-break: break-word; padding: 4px 0; @@ -43,19 +31,19 @@ adf-search-chip-autocomplete-input { } .adf-option-chips-delete-button.adf-autocomplete-added-option-chips-delete-button { - font-size: 13px; - height: 13px; - width: 13px; + font: var(--mat-sys-body-small); + height: var(--mat-sys-body-small-size); + width: var(--mat-sys-body-small-size); .adf-option-chips-delete-icon.adf-autocomplete-added-option-chips-delete-icon { - font-size: 13px; - height: 13px; - width: 13px; + font: var(--mat-sys-body-small); + height: var(--mat-sys-body-small-size); + width: var(--mat-sys-body-small-size); } } } .adf-search-chip-autocomplete-added-option.adf-autocomplete-added-option { - background: var(--adf-theme-mat-grey-color-a200); - color: var(--adf-theme-primary-300); + background: var(--mat-sys-surface-variant); + color: var(--mat-sys-primary); } diff --git a/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html b/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html index fd6a9c138e..f12d4cf9db 100644 --- a/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html +++ b/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html @@ -2,7 +2,6 @@ - + {{ getFromValidationMessage() | translate: { requiredFormat: datetimePickerFormat } }} @@ -28,7 +28,7 @@ (dateChange)="onChangedHandler($event, to)" data-automation-id="datetime-range-to-input"> - + {{ getToValidationMessage() | translate: { requiredFormat: datetimePickerFormat } }} diff --git a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html index 20aec642fe..f704752b37 100644 --- a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html +++ b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html @@ -39,7 +39,7 @@
-
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 f1e5d36b07..de2d5ee5ad 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 @@ -33,6 +33,6 @@ } .adf-facet-label { - color: var(--adf-theme-foreground-text-color-064); + color: var(--mat-sys-on-secondary-container); } } diff --git a/lib/content-services/src/lib/search/components/search-filter-autocomplete-chips/search-filter-autocomplete-chips.component.html b/lib/content-services/src/lib/search/components/search-filter-autocomplete-chips/search-filter-autocomplete-chips.component.html index a33921c648..7d3d651545 100644 --- a/lib/content-services/src/lib/search/components/search-filter-autocomplete-chips/search-filter-autocomplete-chips.component.html +++ b/lib/content-services/src/lib/search/components/search-filter-autocomplete-chips/search-filter-autocomplete-chips.component.html @@ -8,10 +8,10 @@ (optionsChanged)="onOptionsChange($event)" />
- -
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.html index b600be65d0..6bcb483dbf 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.html +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.html @@ -40,7 +40,7 @@ - diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html index 107c8d56fd..172762f751 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html @@ -41,7 +41,7 @@ - diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss index 1c030ac9f4..d9e7a4c28d 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss @@ -1,5 +1,4 @@ @use '@angular/material' as mat; -@use '../../../mat-selectors.scss' as ms; .adf-search-filter-chip, .adf-search-filter-chip-tabbed { @@ -7,21 +6,22 @@ max-width: 320px; text-overflow: ellipsis; overflow: hidden; - background: var(--adf-theme-background-unselected-chip-color); + background: var(--mat-sys-surface-variant); &.adf-search-toggle-chip { - background: var(--adf-theme-background-card-color); - border: 2px solid var(--theme-primary-color); + background: var(--mat-sys-surface); + border: 2px solid var(--mat-sys-primary); } .adf-search-filter-placeholder { flex: 1 1 auto; white-space: nowrap; - color: var(--adf-theme-foreground-disabled-text-color); + opacity: 0.38; + color: var(--mat-sys-on-surface); } &.adf-search-filter-facet-chip::after { - background: var(--adf-theme-background-unselected-chip-color); + background: var(--mat-sys-surface-variant); color: unset; } @@ -29,11 +29,10 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-weight: 300; } .adf-filter-value { - font-weight: 500; + font: var(--mat-sys-body-medium); } .adf-search-filter-chip-icon { @@ -47,16 +46,3 @@ @include mat.elevation(2); } } - -.adf-search-filter-chip#{ms.$mat-evolution-chip}#{ms.$mat-standard-chip} { - margin-top: 0; - margin-bottom: 0; -} - -#{ms.$mat-standard-chip} { - -webkit-font-smoothing: unset; -} - -#{ms.$mat-evolution-chip-set} { - margin-top: -4px; -} 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 15971657e5..4fd230a5ab 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 @@ -1,21 +1,13 @@ .adf-search-filter-menu-card { - color: var(--adf-theme-foreground-text-color); - background: var(--adf-theme-background-card-color); - .adf-search-filter-title { display: flex; justify-content: space-between; - color: var(--adf-theme-foreground-text-color-064); align-items: center; padding: 16px 12px; height: 32px; - font-size: var(--theme-body-1-font-size); - letter-spacing: 0.15px; - font-weight: bold; - font-style: inherit; + font: var(--mat-sys-body-medium); &-action { - color: var(--adf-theme-foreground-text-color-087); float: right; } } diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html index 5748cfd9c2..19e797db55 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html @@ -66,7 +66,7 @@ - diff --git a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html index 08c571d600..ca7f8b356c 100644 --- a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html +++ b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html @@ -51,7 +51,6 @@ - diff --git a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.html b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.html index cd02efb1d5..47be1b204a 100644 --- a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.html +++ b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.html @@ -2,7 +2,6 @@ - diff --git a/lib/content-services/src/lib/search/components/search-slider/search-slider.component.html b/lib/content-services/src/lib/search/components/search-slider/search-slider.component.html index e38dd0c604..12406d467b 100644 --- a/lib/content-services/src/lib/search/components/search-slider/search-slider.component.html +++ b/lib/content-services/src/lib/search/components/search-slider/search-slider.component.html @@ -9,7 +9,7 @@
-
diff --git a/lib/content-services/src/lib/tag/tag-actions/tag-actions.component.html b/lib/content-services/src/lib/tag/tag-actions/tag-actions.component.html index 5d15a82fb5..de01b394e4 100644 --- a/lib/content-services/src/lib/tag/tag-actions/tag-actions.component.html +++ b/lib/content-services/src/lib/tag/tag-actions/tag-actions.component.html @@ -29,7 +29,7 @@ - diff --git a/lib/content-services/src/lib/tag/tag-actions/tag-actions.component.scss b/lib/content-services/src/lib/tag/tag-actions/tag-actions.component.scss index 451aa6ea49..d00861d15c 100644 --- a/lib/content-services/src/lib/tag/tag-actions/tag-actions.component.scss +++ b/lib/content-services/src/lib/tag/tag-actions/tag-actions.component.scss @@ -9,7 +9,7 @@ } .adf-tag-actions-delete-text { - font-size: var(--theme-subheading-2-font-size); + font-size: var(--mat-sys-title-small-size); float: left; } diff --git a/lib/content-services/src/lib/tag/tag-list/tag-list.component.scss b/lib/content-services/src/lib/tag/tag-list/tag-list.component.scss index 1f99e5cc65..467c227fec 100644 --- a/lib/content-services/src/lib/tag/tag-list/tag-list.component.scss +++ b/lib/content-services/src/lib/tag/tag-list/tag-list.component.scss @@ -10,11 +10,11 @@ .adf-list-tag { display: block; - font-size: var(--theme-subheading-2-font-size); + font-size: var(--mat-sys-title-small-size); .adf-tag-list-chip { - color: var(--theme-primary-color-default-contrast); - background-color: var(--theme-primary-color); + color: var(--mat-sys-on-primary); + background-color: var(--mat-sys-primary); } } } diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss index 7216cda84c..92fe8bdc65 100644 --- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss +++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss @@ -1,5 +1,3 @@ -@use '../../mat-selectors.scss' as ms; - adf-tags-creator { display: block; @@ -20,7 +18,7 @@ adf-tags-creator { } .adf-create-tag-label { - color: var(--theme-primary-color); + color: var(--mat-sys-primary); cursor: pointer; margin-top: -1px; padding-left: 12px; @@ -45,7 +43,7 @@ adf-tags-creator { .adf-existing-tags-label { font-size: 10px; - color: var(--theme-secondary-text-color); + color: var(--mat-sys-on-surface-variant); padding-left: 12px; margin-bottom: 2px; } @@ -66,11 +64,6 @@ adf-tags-creator { background-color: inherit; color: inherit; - &:not(#{ms.$mat-list-item-disabled}):hover { - cursor: pointer; - background: var(--adf-theme-mat-grey-color-a200); - } - & span { padding: 0; } @@ -81,10 +74,6 @@ adf-tags-creator { overflow: unset; min-height: 62px; } - - #{ms.$mat-list-item-disabled} #{ms.$mat-list-item-primary-text} { - opacity: 1; - } } } @@ -98,6 +87,7 @@ adf-tags-creator { word-break: break-all; } } + /* stylelint-enable selector-class-pattern */ [hidden] { 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 78c9426fd8..a7359cd05d 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 @@ -1,11 +1,11 @@ .adf { &-tree-view-icon { - color: #d9e022; + color: var(--mat-sys-primary); } &-tree-view-node.adf-tree-view { min-height: 40px; - font-size: var(--theme-caption-font-size); + font-size: var(--mat-sys-body-small-size); align-items: baseline; } diff --git a/lib/content-services/src/lib/tree/components/tree.component.html b/lib/content-services/src/lib/tree/components/tree.component.html index 5f0903e1c5..ae2f903301 100644 --- a/lib/content-services/src/lib/tree/components/tree.component.html +++ b/lib/content-services/src/lib/tree/components/tree.component.html @@ -19,8 +19,7 @@
@@ -128,7 +124,6 @@ diff --git a/lib/content-services/src/lib/tree/components/tree.component.scss b/lib/content-services/src/lib/tree/components/tree.component.scss index 14c3dac323..7477d82c30 100644 --- a/lib/content-services/src/lib/tree/components/tree.component.scss +++ b/lib/content-services/src/lib/tree/components/tree.component.scss @@ -24,7 +24,7 @@ $tree-header-font-size: 12px !default; padding-left: 15px; padding-right: 15px; transition-property: background-color; - border-bottom: 1px solid var(--adf-theme-foreground-text-color-007); + border-bottom: 1px solid var(--mat-sys-outline-variant); min-height: $tree-row-height; user-select: none; @@ -33,7 +33,7 @@ $tree-header-font-size: 12px !default; } &:hover { - background-color: var(--adf-theme-background-hover-color); + background-color: var(--mat-sys-surface-container); .adf-tree-actions { display: flex; @@ -41,9 +41,9 @@ $tree-header-font-size: 12px !default; } &:focus { - background-color: var(--adf-theme-background-hover-color); + background-color: var(--mat-sys-surface-container); outline-offset: -1px; - outline: 1px solid var(--theme-accent-color-a200); + outline: 1px solid var(--mat-sys-secondary); } .adf-tree-expand-collapse-button, @@ -55,7 +55,7 @@ $tree-header-font-size: 12px !default; } .adf-tree-cell { - color: var(--adf-theme-foreground-text-color); + color: var(--mat-sys-on-surface); width: 100%; .adf-tree-cell-value { @@ -82,13 +82,13 @@ $tree-header-font-size: 12px !default; letter-spacing: 0; min-height: $tree-row-height; font-size: $tree-header-font-size; - color: var(--adf-theme-foreground-text-color); + color: var(--mat-sys-on-surface); box-sizing: border-box; padding-top: 12px; &:focus { outline-offset: -1px; - outline: 1px solid var(--theme-accent-color-a200); + outline: 1px solid var(--mat-sys-primary); } } } diff --git a/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.html b/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.html index b5a438ae14..3d673714fb 100644 --- a/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.html +++ b/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.html @@ -79,7 +79,6 @@ @@ -89,7 +88,6 @@ id="adf-upload-dialog-close" [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_CLOSE' | translate" mat-button - color="primary" (click)="close()" >{{ 'ADF_FILE_UPLOAD.BUTTON.CLOSE' | translate }} } @@ -108,7 +106,6 @@ id="adf-upload-dialog-confirm" [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CONFIRMATION.CONTINUE' | translate" mat-button - color="primary" (click)="toggleConfirmation()" >{{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CONTINUE' | translate }} 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 c904eb04e4..40f5fa7f80 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 @@ -1,7 +1,6 @@ /* stylelint-disable no-descending-specificity */ .adf-upload-dialog { - background: var(--adf-theme-background-dialog-color); - color: var(--adf-theme-foreground-text-color-064); + background: var(--mat-sys-surface-container-high); position: fixed; bottom: 20px; width: 40%; @@ -35,8 +34,6 @@ height: 24px; width: 24px; padding: 0; - line-height: 0; - color: var(--adf-theme-foreground-text-color-064); } } @@ -52,8 +49,8 @@ &__content { overflow: auto; max-height: 194px; - border-top: 1px solid var(--adf-theme-foreground-text-color-014); - border-bottom: 1px solid var(--adf-theme-foreground-text-color-014); + border-top: 1px solid var(--mat-sys-outline-variant); + border-bottom: 1px solid var(--mat-sys-outline-variant); } &__confirmation { @@ -61,10 +58,7 @@ } &__confirmation--title { - font-size: var(--theme-subheading-2-font-size); - line-height: 1.5; - letter-spacing: -0.4px; - color: var(--adf-theme-foreground-text-color-087); + font: var(--mat-sys-title-small-size); } &__confirmation--text { @@ -93,7 +87,7 @@ right: 25px; } -@media screen and (width >= 380px) and (width <= 768px) { +@media screen and (width >=380px) and (width <=768px) { .adf-upload-dialog { width: 60%; } @@ -103,7 +97,7 @@ } } -@media screen and (width <= 380px) { +@media screen and (width <=380px) { .adf-upload-dialog { width: 85%; } diff --git a/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.html b/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.html index 00a19dc77f..bd4cd9d768 100644 --- a/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.html +++ b/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.html @@ -13,7 +13,7 @@ @if (isUploadVersion()) { - {{ versionNumber }} diff --git a/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.scss b/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.scss index fb16886a98..4b15b78aaa 100644 --- a/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.scss +++ b/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.scss @@ -1,8 +1,6 @@ -$file-uploading-row-hover-color: #eee !default; - adf-file-uploading-list-row:not(:first-child) { display: block; - border-top: 1px solid var(--adf-theme-foreground-text-color-014); + border-top: 1px solid var(--mat-sys-outline-variant); } .adf-file-uploading-row { @@ -12,7 +10,7 @@ adf-file-uploading-list-row:not(:first-child) { cursor: default; &:hover { - background: $file-uploading-row-hover-color; + background: var(--mat-sys-surface); } &__name { @@ -29,8 +27,7 @@ adf-file-uploading-list-row:not(:first-child) { min-width: 100px; display: flex; justify-content: flex-end; - line-height: 40px; - height: 40px; + font: var(--mat-sys-body-large); align-items: center; padding: 0 12px; } @@ -39,24 +36,23 @@ adf-file-uploading-list-row:not(:first-child) { cursor: pointer; display: flex; align-items: center; - height: 40px; - line-height: 40px; + font: var(--mat-sys-body-large); } &__status--done { - color: var(--theme-accent-color); + color: var(--mat-sys-secondary); } &__status--error { - color: var(--theme-warn-color); + color: var(--mat-sys-error); padding: 0 12px; } &__action--cancel { - color: var(--theme-warn-color); + color: var(--mat-sys-error); } &__action--remove { - color: var(--theme-warn-color); + color: var(--mat-sys-error); } } diff --git a/lib/content-services/src/lib/upload/components/upload-button.component.scss b/lib/content-services/src/lib/upload/components/upload-button.component.scss index 9e2ecddd26..3b8b0ac0d0 100644 --- a/lib/content-services/src/lib/upload/components/upload-button.component.scss +++ b/lib/content-services/src/lib/upload/components/upload-button.component.scss @@ -2,9 +2,6 @@ &-upload-button-file-container { .adf-upload-button-icon { margin: 0; - font-size: 24px; - width: 24px; - height: 24px; } input { @@ -17,18 +14,7 @@ align-items: center; cursor: pointer; padding: 8px 16px; - box-shadow: 0 3px 1px -2px #0003, 0 2px 2px rgba(0, 0, 0, 0.14), 0 1px 5px rgba(0, 0, 0, 0.12); + box-shadow: var(--mat-sys-level2); border-radius: 4px; - - &:active { - box-shadow: 0 5px 5px -3px #0003, 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); - } - } - - &-upload-button-file-container-upload-single-file[disabled] + &-upload-button-label { - background-color: var(--adf-disabled-button-background); - color: var(--adf-theme-foreground-disabled-text-color); - box-shadow: none; - cursor: default; } } diff --git a/lib/content-services/src/lib/version-manager/version-comparison.component.scss b/lib/content-services/src/lib/version-manager/version-comparison.component.scss index 38e181056c..259edc7154 100644 --- a/lib/content-services/src/lib/version-manager/version-comparison.component.scss +++ b/lib/content-services/src/lib/version-manager/version-comparison.component.scss @@ -17,7 +17,7 @@ } .adf-version-arrow-icon { - font-size: var(--theme-display-4-font-size); + font-size: var(--mat-sys-display-large-size); } .adf-version-comparison-node-name, diff --git a/lib/content-services/src/lib/version-manager/version-list.component.html b/lib/content-services/src/lib/version-manager/version-list.component.html index 37f9028423..faf242051f 100644 --- a/lib/content-services/src/lib/version-manager/version-list.component.html +++ b/lib/content-services/src/lib/version-manager/version-list.component.html @@ -1,5 +1,4 @@ - + {{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.ADD' | translate }} diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.scss b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.scss deleted file mode 100644 index b3c58707ac..0000000000 --- a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.scss +++ /dev/null @@ -1 +0,0 @@ -/* stylelint-disable-next-line no-empty-source */ diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts index 534715dbc3..19568831b7 100644 --- a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts +++ b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts @@ -64,7 +64,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; selector: 'adf-alfresco-viewer', imports: [CommonModule, TranslatePipe, MatButtonModule, IconModule, ...VIEWER_DIRECTIVES, NodeDownloadDirective], templateUrl: './alfresco-viewer.component.html', - styleUrls: ['./alfresco-viewer.component.scss'], host: { class: 'adf-alfresco-viewer' }, encapsulation: ViewEncapsulation.None, providers: [ViewUtilService] diff --git a/lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.html b/lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.html index 52188f5460..f53bd8d02c 100644 --- a/lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.html +++ b/lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.html @@ -11,7 +11,6 @@ diff --git a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.scss b/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.scss index dda9ef0bd5..5a4b9c37a8 100644 --- a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.scss +++ b/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.scss @@ -25,7 +25,7 @@ adf-datatable-column-selector { } &-header-label { - font-size: var(--theme-body-1-font-size); + font: var(--mat-sys-body-medium); } &-list-container { @@ -40,12 +40,12 @@ adf-datatable-column-selector { text-overflow: ellipsis; display: block; width: 210px; - color: var(--theme-secondary-text); + color: var(--mat-sys-on-secondary-container); } &-subtitle { - color: var(--adf-theme-foreground-text-color); - font-size: var(--theme-caption-font-size); + color: var(--mat-sys-on-surface); + font-size: var(--mat-sys-body-small-size); opacity: 0.6; display: flex; column-gap: 3px; @@ -54,9 +54,9 @@ adf-datatable-column-selector { &-subtitle-icon { margin-top: 3px; - height: var(--theme-caption-font-size); - width: var(--theme-caption-font-size); - font-size: var(--theme-caption-font-size); + height: var(--mat-sys-label-medium-size); + width: var(--mat-sys-label-medium-size); + font-size: var(--mat-sys-label-medium-size); } &-column-checkbox { diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss index b1733bc16f..0e54008f39 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss @@ -3,13 +3,9 @@ @use '../../../styles/mixins' as mixins; @use '../../../styles/mat-selectors' as ms; -$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: 18px !default; -$data-table-card-padding: var(--theme-headline-line-height) !default; -$data-table-cell-top: calc($data-table-card-padding / 2); +$data-table-row-height: var(--mat-sys-display-large-size); $data-table-thumbnail-width: 65px !default; $data-table-cell-min-width-1: 65px !default; $data-table-cell-min-width-2: 110px !default; @@ -46,7 +42,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; &--divider { padding: 24px 0; - border: 1px solid var(--adf-theme-foreground-text-color-007); + border: 1px solid var(--mat-sys-outline-variant); } &:hover { @@ -56,11 +52,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; &:focus, &:focus-visible { opacity: 1; - outline: 2px solid var(--theme-accent-color-a200); + outline: 2px solid var(--mat-sys-primary); outline-offset: -1px; .adf-datatable__resize-handle--divider { - border-color: var(--theme-accent-color-a200); + border-color: var(--mat-sys-primary); } } } @@ -76,8 +72,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; #{ms.$cdk-drag-preview} { display: flex; flex-direction: column; - background-color: var(--adf-theme-background-card-color); - border: 1px solid var(--adf-theme-foreground-text-color-007); + background-color: var(--mat-sys-surface); + border: 1px solid var(--mat-sys-outline-variant); box-sizing: border-box; overflow-x: auto; @@ -127,20 +123,20 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; &:not(.adf-datatable-data-loading) { &:hover, &:focus { - background-color: var(--adf-theme-background-hover-color); + background-color: var(--mat-sys-surface-container); } } &:focus { outline-offset: -1px; - outline: 1px solid var(--theme-accent-color-a200); + outline: 1px solid var(--mat-sys-primary); } .adf-cell-value, .adf-datatable-cell-header { &:focus { outline-offset: -1px; - outline: 1px solid var(--theme-accent-color-a200); + outline: 1px solid var(--mat-sys-primary); } } } @@ -152,7 +148,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; .adf-datatable-body { display: flex; flex-direction: column; - background-color: inherit; + background-color: var(--mat-sys-surface); width: 100%; min-width: 100%; @@ -168,7 +164,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; @include mixins.material-animation-default(0.28s); transition-property: background-color; - border-top: 1px solid var(--adf-theme-foreground-text-color-007); + border-top: 1px solid var(--mat-sys-surface-container); min-height: $data-table-row-height; cursor: pointer; @@ -176,7 +172,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; &.adf-is-selected, &.adf-is-selected:hover { - background-color: var(--adf-theme-background-selected-button-color); + background-color: var(--mat-sys-surface-container); } &.adf-drag-row { @@ -184,7 +180,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; } &:last-child { - border-bottom: 1px solid var(--adf-theme-foreground-text-color-007); + border-bottom: 1px solid var(--mat-sys-surface-container); } label { @@ -301,7 +297,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; } .adf-datatable-cell { - color: var(--adf-theme-foreground-text-color); + color: var(--mat-sys-on-surface); min-height: inherit; } @@ -405,10 +401,10 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; .adf-location-cell { a { text-decoration: none; - color: var(--adf-theme-foreground-text-color); + color: var(--mat-sys-on-surface); &:hover { - color: var(--theme-accent-500); + color: var(--mat-sys-primary); text-decoration: underline; } } @@ -427,15 +423,15 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; } .adf-is-selected { - background: var(--adf-theme-primary-100); + background: var(--mat-sys-primary-container); } .adf-datatable-link { text-decoration: none; - color: var(--adf-theme-foreground-text-color); + color: var(--mat-sys-on-surface); &:hover { - color: var(--theme-accent-500); + color: var(--mat-sys-secondary); text-decoration: underline; } } @@ -527,13 +523,13 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; /* stylelint-disable media-feature-range-notation */ /* mobile phone */ - @media all and (width <= 768px) { + @media all and (width <=768px) { .adf-desktop-only.adf-ellipsis-cell { display: none; } } - @media (device-width <= 768px) { + @media (device-width <=768px) { .adf-desktop-only.adf-ellipsis-cell { display: none; } @@ -551,8 +547,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; line-height: 24px; letter-spacing: 0; min-height: $data-table-row-height; - font-size: $data-table-header-font-size; - color: var(--adf-theme-foreground-text-color); + font-size: var(--mat-sys-body-medium-size); box-sizing: border-box; &_subtitle { @@ -569,13 +564,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; .adf-datatable__header--sorted-asc, .adf-datatable__header--sorted-desc { - color: var(--adf-theme-foreground-text-color); padding-right: 0.25rem; &::after { @include mixins.typo-icon; - font-size: $data-table-header-sort-icon-size; content: '\e5d8'; left: 5px; right: 5px; @@ -607,7 +600,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; } &--hovered { - background-color: var(--adf-theme-background-hover-color); border-radius: 6px; } } @@ -634,7 +626,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; .adf-drop-header-cell-placeholder { display: flex; flex: 1; - background: var(--adf-theme-background-hover-color); border: dotted 1px rgba(0, 0, 0, 0.25); min-height: 55px; transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); @@ -661,13 +652,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; flex-direction: row; align-items: center; box-sizing: unset; - background-color: var(--theme-background-color); - border-top: 2px solid var(--theme-selected-background-color); + border-top: 2px solid var(--mat-sys-primary); opacity: 1; &.adf-datatable-cell-header { border-radius: 6px; - background-color: var(--theme-background-color); @include mat.elevation-transition; @include mat.elevation(4); @@ -693,8 +682,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; .adf-datatable-header { display: block; margin-right: 0; - border-top: 1px solid var(--adf-theme-foreground-text-color-007); - border-bottom: 1px solid var(--adf-theme-foreground-text-color-007); + border-top: 1px solid var(--mat-sys-surface-container); + border-bottom: 1px solid var(--mat-sys-outline-variant); } .adf-datatable-body { @@ -707,15 +696,15 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; .adf-upload__dragging { & > div { - border-top: 1px dashed var(--theme-accent-color-a200); - border-bottom: 1px dashed var(--theme-accent-color-a200); + border-top: 1px dashed var(--mat-sys-secondary); + border-bottom: 1px dashed var(--mat-sys-secondary); &:first-child { - border-left: 1px dashed var(--theme-accent-color-a200); + border-left: 1px dashed var(--mat-sys-secondary); } &:last-child { - border-right: 1px dashed var(--theme-accent-color-a200); + border-right: 1px dashed var(--mat-sys-secondary); } } } @@ -730,7 +719,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; .adf-datatable-body[role='rowgroup'] { .adf-datatable-row { height: 100%; - background-color: var(--adf-theme-background-card-color); border: none; &:hover, @@ -744,7 +732,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; .adf-datatable--empty--header-visible { .adf-datatable-header { - border: 1px solid var(--adf-theme-foreground-text-color-007); + border: 1px solid var(--mat-sys-outline-variant); } .adf-datatable-body { @@ -755,7 +743,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; .adf-datatable-row { height: 100%; - background-color: var(--adf-theme-background-card-color); border: none; &:hover, @@ -767,7 +754,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; } } -@media screen and (width <= 380px) { +@media screen and (width <=380px) { .adf-datatable-header { max-height: 50%; } diff --git a/lib/core/src/lib/dialogs/confirm-dialog/confirm.dialog.html b/lib/core/src/lib/dialogs/confirm-dialog/confirm.dialog.html index f7ac903923..f0bf827b1b 100644 --- a/lib/core/src/lib/dialogs/confirm-dialog/confirm.dialog.html +++ b/lib/core/src/lib/dialogs/confirm-dialog/confirm.dialog.html @@ -32,7 +32,6 @@ id="adf-confirm-accept" class="adf-confirm-dialog-button" mat-button - color="primary" data-automation-id="adf-confirm-dialog-confirmation" [mat-dialog-close]="true" cdkFocusInitial diff --git a/lib/core/src/lib/dialogs/dialog/dialog.component.html b/lib/core/src/lib/dialogs/dialog/dialog.component.html index f4870381f1..b4d447c43e 100644 --- a/lib/core/src/lib/dialogs/dialog/dialog.component.html +++ b/lib/core/src/lib/dialogs/dialog/dialog.component.html @@ -11,7 +11,6 @@
@@ -54,7 +53,6 @@ diff --git a/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss b/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss index 7b8425d1ea..f67331584a 100644 --- a/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss +++ b/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss @@ -8,8 +8,6 @@ box-shadow: none; height: 37.5px; font-weight: bold; - background-color: var(--theme-primary-color); - color: var(--theme-primary-color-default-contrast); border-radius: 4px; } @@ -22,11 +20,11 @@ &-sidebar-action-menu-icon { margin: 18px 0 0 20px; - color: var(--adf-theme-foreground-text-color-064); + color: var(--mat-sys-on-surface); cursor: pointer; &:hover { - color: var(--theme-primary-color); + color: var(--mat-sys-primary); } } @@ -35,14 +33,11 @@ letter-spacing: -0.4px; button { - font-size: var(--theme-body-1-font-size); - color: var(--adf-theme-foreground-text-color-087); text-align: left; line-height: 1.5; letter-spacing: -0.4px; &:hover { - color: var(--theme-primary-color); opacity: inherit; } } diff --git a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss index e7a7e12cec..b2a8f5d2fc 100644 --- a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss +++ b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss @@ -1,4 +1,3 @@ -@use '../../../styles/flex' as flex; @use '../../../styles/mixins' as mixins; @use '../../../styles/mat-selectors' as ms; diff --git a/lib/core/src/lib/login/components/login.component.html b/lib/core/src/lib/login/components/login.component.html index 7531d39a7d..3ed7f46f1e 100644 --- a/lib/core/src/lib/login/components/login.component.html +++ b/lib/core/src/lib/login/components/login.component.html @@ -51,8 +51,7 @@ [ngClass]="{'adf-is-invalid': isErrorStyle(form.controls.username)}">