From 92806feabb7d266aea86ff39935f6026a3db0d34 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Mon, 21 Feb 2022 12:21:08 +0000 Subject: [PATCH] material 12 --- demo-shell/src/custom-style-dev.scss | 20 +-- demo-shell/src/custom-style.scss | 20 +-- .../components/search-control.component.scss | 4 +- .../search-filter-chips.component.scss | 4 +- .../search-form/search-form.component.scss | 4 +- .../datatable/datatable.component.scss | 6 +- .../tooltip-card/tooltip-card.component.scss | 4 +- .../dynamic-table/dynamic-table.widget.scss | 1 - .../sidebar-action-menu.component.scss | 4 +- lib/core/styles/_index.scss | 133 +++++++++--------- lib/core/styles/_theming.scss | 1 - lib/core/styles/_typography.scss | 30 ++-- lib/core/styles/prebuilt/adf-blue-orange.scss | 13 +- lib/core/styles/prebuilt/adf-blue-purple.scss | 13 +- lib/core/styles/prebuilt/adf-cyan-orange.scss | 13 +- lib/core/styles/prebuilt/adf-cyan-purple.scss | 13 +- .../styles/prebuilt/adf-green-orange.scss | 13 +- .../styles/prebuilt/adf-green-purple.scss | 13 +- lib/core/styles/prebuilt/adf-indigo-pink.scss | 13 +- .../styles/prebuilt/adf-pink-bluegrey.scss | 13 +- .../styles/prebuilt/adf-purple-green.scss | 13 +- package-lock.json | 24 ++-- package.json | 6 +- 23 files changed, 193 insertions(+), 185 deletions(-) diff --git a/demo-shell/src/custom-style-dev.scss b/demo-shell/src/custom-style-dev.scss index 497d0dc730..332c9c8a54 100644 --- a/demo-shell/src/custom-style-dev.scss +++ b/demo-shell/src/custom-style-dev.scss @@ -1,11 +1,11 @@ -@import '~@angular/material/theming'; +@use '~@angular/material' as mat; @import '../../lib/core/styles/index'; -@include mat-core($alfresco-typography); +@include mat.core($alfresco-typography); -$primary: mat-palette($alfresco-accent-orange); -$accent: mat-palette($alfresco-accent-purple); -$warn: mat-palette($alfresco-warn); -$theme: mat-light-theme( +$primary: mat.define-palette($alfresco-accent-orange); +$accent: mat.define-palette($alfresco-accent-purple); +$warn: mat.define-palette($alfresco-warn); +$theme: mat.define-light-theme( ( color: ( primary: $primary, @@ -14,7 +14,7 @@ $theme: mat-light-theme( ) ); -@include angular-material-theme($theme); +@include mat.all-component-themes($theme); @include alfresco-material-theme($theme); body, @@ -22,9 +22,9 @@ html { margin: 0; height: 100%; overflow: hidden; - font-size: mat-font-size($alfresco-typography, body-1); - font-family: mat-font-family($alfresco-typography); - line-height: mat-line-height($alfresco-typography, body-1); + font-size: mat.font-size($alfresco-typography, body-1); + font-family: mat.font-family($alfresco-typography); + line-height: mat.line-height($alfresco-typography, body-1); } body { diff --git a/demo-shell/src/custom-style.scss b/demo-shell/src/custom-style.scss index 40bd0fe084..33bcdb4932 100644 --- a/demo-shell/src/custom-style.scss +++ b/demo-shell/src/custom-style.scss @@ -1,11 +1,11 @@ -@import '~@angular/material/theming'; +@use '~@angular/material' as mat; @import '~@alfresco/adf-core/theming'; -@include mat-core($alfresco-typography); +@include mat.core($alfresco-typography); -$primary: mat-palette($alfresco-accent-orange); -$accent: mat-palette($alfresco-accent-purple); -$warn: mat-palette($alfresco-warn); -$theme: mat-light-theme( +$primary: mat.define-palette($alfresco-accent-orange); +$accent: mat.define-palette($alfresco-accent-purple); +$warn: mat.define-palette($alfresco-warn); +$theme: mat.define-light-theme( ( color: ( primary: $primary, @@ -14,7 +14,7 @@ $theme: mat-light-theme( ) ); -@include angular-material-theme($theme); +@include mat.all-component-themes($theme); @include alfresco-material-theme($theme); body, @@ -22,9 +22,9 @@ html { margin: 0; height: 100%; overflow: hidden; - font-size: mat-font-size($alfresco-typography, body-1); - font-family: mat-font-family($alfresco-typography); - line-height: mat-line-height($alfresco-typography, body-1); + font-size: mat.font-size($alfresco-typography, body-1); + font-family: mat.font-family($alfresco-typography); + line-height: mat.line-height($alfresco-typography, body-1); } body { diff --git a/lib/content-services/src/lib/search/components/search-control.component.scss b/lib/content-services/src/lib/search/components/search-control.component.scss index 5dbfe6eb10..a7db0d06cb 100644 --- a/lib/content-services/src/lib/search/components/search-control.component.scss +++ b/lib/content-services/src/lib/search/components/search-control.component.scss @@ -1,11 +1,11 @@ -@import '~@angular/material/theming'; +@use '~@angular/material' as mat; $mat-menu-overlay-min-width: 112px !default; // 56 * 2 $mat-menu-overlay-max-width: 280px !default; // 56 * 5 .adf { &-search-result-autocomplete { - @include mat-overridable-elevation(2); + @include mat.overridable-elevation(2); min-width: $mat-menu-overlay-min-width; max-width: $mat-menu-overlay-max-width; 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 c5c8ca9bb8..64f606d825 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,4 +1,4 @@ -@import '~@angular/material/theming'; +@use '~@angular/material' as mat; .adf-search-filter-chip { &.mat-chip { @@ -53,6 +53,6 @@ min-width: 320px; border-radius: 12px; - @include mat-elevation(2); + @include mat.elevation(2); } } diff --git a/lib/content-services/src/lib/search/components/search-form/search-form.component.scss b/lib/content-services/src/lib/search/components/search-form/search-form.component.scss index a8b71d9e55..be84e53e0a 100644 --- a/lib/content-services/src/lib/search/components/search-form/search-form.component.scss +++ b/lib/content-services/src/lib/search/components/search-form/search-form.component.scss @@ -1,4 +1,4 @@ -@import '~@angular/material/theming'; +@use '~@angular/material' as mat; .adf-search-form { &.mat-button { @@ -37,7 +37,7 @@ } &-menu + * .mat-menu-panel { - @include mat-elevation(2); + @include mat.elevation(2); border-radius: 6px; diff --git a/lib/core/datatable/components/datatable/datatable.component.scss b/lib/core/datatable/components/datatable/datatable.component.scss index d99177ebac..0fdfa77fbe 100644 --- a/lib/core/datatable/components/datatable/datatable.component.scss +++ b/lib/core/datatable/components/datatable/datatable.component.scss @@ -1,5 +1,5 @@ /* stylelint-disable no-descending-specificity */ -@import '~@angular/material/theming'; +@use '~@angular/material' as mat; @import '../../../styles/mixins'; $data-table-header-font-size: var(--theme-caption-font-size) !default; @@ -48,8 +48,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default; margin: 6px; padding: 15px; - @include mat-elevation-transition; - @include mat-overridable-elevation(2); + @include mat.elevation-transition; + @include mat.overridable-elevation(2); } .adf-datatable-row-empty-card { diff --git a/lib/core/directives/tooltip-card/tooltip-card.component.scss b/lib/core/directives/tooltip-card/tooltip-card.component.scss index 7c9d633025..07b4bfcca8 100644 --- a/lib/core/directives/tooltip-card/tooltip-card.component.scss +++ b/lib/core/directives/tooltip-card/tooltip-card.component.scss @@ -1,11 +1,11 @@ -@import '~@angular/material/theming'; +@use '~@angular/material' as mat; :host { display: block; } div.adf-tooltip-card { - @include mat-elevation(8); + @include mat.elevation(8); background-color: var(--theme-card-bg-color); border: 1px solid var(--theme-primary-color); diff --git a/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss index 2d7829d0d3..06888f6d6e 100644 --- a/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss +++ b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss @@ -1,5 +1,4 @@ /* stylelint-disable no-descending-specificity */ -@import '~@angular/material/theming'; @import '../../../../styles/mixins'; $dynamic-table-font-size: var(--theme-body-1-font-size) !default; diff --git a/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss index 7a5449c899..4f8e14edca 100644 --- a/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss +++ b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss @@ -1,4 +1,4 @@ -@import '~@angular/material/theming'; +@use '~@angular/material' as mat; .adf { &-sidebar-action-menu { @@ -58,6 +58,6 @@ margin-top: 7.5px; border-radius: 2px; - @include mat-elevation(2); + @include mat.elevation(2); } } diff --git a/lib/core/styles/_index.scss b/lib/core/styles/_index.scss index 5c797cd1c6..f024dc6266 100644 --- a/lib/core/styles/_index.scss +++ b/lib/core/styles/_index.scss @@ -1,4 +1,5 @@ /* stylelint-disable value-keyword-case */ +@use '~@angular/material' as mat; /* stylelint-disable value-list-max-empty-lines */ /* stylelint-disable scss/no-global-function-names */ /* stylelint-disable scss/at-import-partial-extension */ @@ -24,76 +25,76 @@ // map SCSS variables to expose as CSS variables $defaults: ( // material colors - --theme-primary-color: mat-color($primary), - --theme-primary-color-default-contrast: mat-color($primary, default-contrast), - --theme-warn-color: mat-color($warn), - --theme-warn-color-default-contrast: mat-color($warn, default-contrast), - --theme-accent-color: mat-color($accent), - --theme-accent-color-a200: mat-color($accent, A200), - --theme-accent-color-default-contrast: mat-color($accent, default-contrast), + --theme-primary-color: mat.get-color-from-palette($primary), + --theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast), + --theme-warn-color: mat.get-color-from-palette($warn), + --theme-warn-color-default-contrast: mat.get-color-from-palette($warn, default-contrast), + --theme-accent-color: mat.get-color-from-palette($accent), + --theme-accent-color-a200: mat.get-color-from-palette($accent, A200), + --theme-accent-color-default-contrast: mat.get-color-from-palette($accent, default-contrast), // component themes - --adf-snackbar-error-bg-color: mat-color($warn), + --adf-snackbar-error-bg-color: mat.get-color-from-palette($warn), --adf-snackbar-error-action-color: white, - --adf-snackbar-warning-bg-color: mat-color($accent), + --adf-snackbar-warning-bg-color: mat.get-color-from-palette($accent), --adf-snackbar-warning-action-color: white, - --adf-snackbar-info-bg-color: mat-color($primary), + --adf-snackbar-info-bg-color: mat.get-color-from-palette($primary), --adf-snackbar-info-action-color: white, - --adf-breadcrumb-item-active-color: mat-color($foreground, text, 0.87), - --adf-breadcrumb-item-active-hover-color: mat-color($foreground, text, 0.64), - --adf-node-selector-icon-color: mat-color($foreground, icon, 0.54), - --adf-node-selector-base-color: mat-color($foreground, base, 0.45), - --adf-node-selector-base-bold-color: mat-color($foreground, base, 0.65), - --adf-datatable-cell-link-hover-color: mat-color($accent, 500), - --adf-datatable-selected-color: mat-color($primary, 100), - --adf-user-info-color: mat-color($primary, 300), - --adf-comment-list-primary-color: mat-color($primary, 100), - --adf-comment-list-ripple-color: mat-color($primary, 300), - --adf-search-input-bg-color: mat-color($primary, 50), - --adf-search-input-highlight-color: mat-color($primary, 900), - --adf-tooltip-card-color: mat-color($foreground, text, 0.75), - --adf-card-view-text-color: mat-color($foreground, text, 0.25), - --adf-card-view-label-color: mat-color($foreground, text, 0.4), - --adf-card-view-datetime-border-color: mat-color($foreground, text, 0.42), - --adf-upload-border-color: mat-color($foreground, text, 0.14), - --adf-header-background-color: mat-color($primary), - --adf-header-text-color: mat-color($primary, default-contrast), + --adf-breadcrumb-item-active-color: mat.get-color-from-palette($foreground, text, 0.87), + --adf-breadcrumb-item-active-hover-color: mat.get-color-from-palette($foreground, text, 0.64), + --adf-node-selector-icon-color: mat.get-color-from-palette($foreground, icon, 0.54), + --adf-node-selector-base-color: mat.get-color-from-palette($foreground, base, 0.45), + --adf-node-selector-base-bold-color: mat.get-color-from-palette($foreground, base, 0.65), + --adf-datatable-cell-link-hover-color: mat.get-color-from-palette($accent, 500), + --adf-datatable-selected-color: mat.get-color-from-palette($primary, 100), + --adf-user-info-color: mat.get-color-from-palette($primary, 300), + --adf-comment-list-primary-color: mat.get-color-from-palette($primary, 100), + --adf-comment-list-ripple-color: mat.get-color-from-palette($primary, 300), + --adf-search-input-bg-color: mat.get-color-from-palette($primary, 50), + --adf-search-input-highlight-color: mat.get-color-from-palette($primary, 900), + --adf-tooltip-card-color: mat.get-color-from-palette($foreground, text, 0.75), + --adf-card-view-text-color: mat.get-color-from-palette($foreground, text, 0.25), + --adf-card-view-label-color: mat.get-color-from-palette($foreground, text, 0.4), + --adf-card-view-datetime-border-color: mat.get-color-from-palette($foreground, text, 0.42), + --adf-upload-border-color: mat.get-color-from-palette($foreground, text, 0.14), + --adf-header-background-color: mat.get-color-from-palette($primary), + --adf-header-text-color: mat.get-color-from-palette($primary, default-contrast), - --theme-hover-bg-color: mat-color($background, hover), - --theme-text-color: mat-color($foreground, text, 0.54), - --theme-text-bold-color: mat-color($foreground, text, 0.87), - --theme-background-color: mat-color($background, background), - --theme-text-fg-color: mat-color($foreground, text), - --theme-text-fg-shadow-color: mat-color($foreground, text, 0.27), - --theme-border-color: mat-color($foreground, text, 0.07), - --theme-card-bg-color: mat-color($background, card), - --theme-card-bg-bold-color: mat-color($background, card, 0.87), - --theme-foreground-text-color: mat-color($foreground, text, 0.72), - --theme-secondary-text-color: mat-color($foreground, secondary-text), - --theme-dialog-bg-color: mat-color($background, dialog), - --theme-bg-hover-color: mat-color($background, hover), - --theme-fg-base-color: mat-color($foreground, base), - --theme-fg-divider: mat-color($foreground, divider), - --theme-disabled-text-color: mat-color($foreground, disabled-text), - --theme-selected-button-bg-color: mat-color($background, selected-button), - --theme-icon-fg-color: mat-color($foreground, icon), - --theme-unselected-chip-bg-color: mat-color($background, unselected-chip), - --theme-status-bar-bg-color: mat-color($background, status-bar), + --theme-hover-bg-color: mat.get-color-from-palette($background, hover), + --theme-text-color: mat.get-color-from-palette($foreground, text, 0.54), + --theme-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87), + --theme-background-color: mat.get-color-from-palette($background, background), + --theme-text-fg-color: mat.get-color-from-palette($foreground, text), + --theme-text-fg-shadow-color: mat.get-color-from-palette($foreground, text, 0.27), + --theme-border-color: mat.get-color-from-palette($foreground, text, 0.07), + --theme-card-bg-color: mat.get-color-from-palette($background, card), + --theme-card-bg-bold-color: mat.get-color-from-palette($background, card, 0.87), + --theme-foreground-text-color: mat.get-color-from-palette($foreground, text, 0.72), + --theme-secondary-text-color: mat.get-color-from-palette($foreground, secondary-text), + --theme-dialog-bg-color: mat.get-color-from-palette($background, dialog), + --theme-bg-hover-color: mat.get-color-from-palette($background, hover), + --theme-fg-base-color: mat.get-color-from-palette($foreground, base), + --theme-fg-divider: mat.get-color-from-palette($foreground, divider), + --theme-disabled-text-color: mat.get-color-from-palette($foreground, disabled-text), + --theme-selected-button-bg-color: mat.get-color-from-palette($background, selected-button), + --theme-icon-fg-color: mat.get-color-from-palette($foreground, icon), + --theme-unselected-chip-bg-color: mat.get-color-from-palette($background, unselected-chip), + --theme-status-bar-bg-color: mat.get-color-from-palette($background, status-bar), // fonts - --theme-font-family: mat-font-family($alfresco-typography), - --theme-body-1-font-size: mat-font-size($alfresco-typography, body-1), - --theme-body-2-font-size: mat-font-size($alfresco-typography, body-2), - --theme-body-1-line-height: mat-line-height($alfresco-typography, body-1), - --theme-display-1-font-size: mat-font-size($alfresco-typography, display-1), - --theme-display-3-font-size: mat-font-size($alfresco-typography, display-3), - --theme-display-4-font-size: mat-font-size($alfresco-typography, display-4), - --theme-caption-font-size: mat-font-size($alfresco-typography, caption), - --theme-title-font-size: mat-font-size($alfresco-typography, title), - --theme-subheading-1-font-size: mat-font-size($alfresco-typography, subheading-1), - --theme-subheading-2-font-size: mat-font-size($alfresco-typography, subheading-2), - --theme-button-font-size: mat-font-size($alfresco-typography, button), - --theme-headline-font-size: mat-font-size($alfresco-typography, headline), - --theme-headline-line-height: mat-line-height($alfresco-typography, headline), + --theme-font-family: mat.font-family($alfresco-typography), + --theme-body-1-font-size: mat.font-size($alfresco-typography, body-1), + --theme-body-2-font-size: mat.font-size($alfresco-typography, body-2), + --theme-body-1-line-height: mat.line-height($alfresco-typography, body-1), + --theme-display-1-font-size: mat.font-size($alfresco-typography, display-1), + --theme-display-3-font-size: mat.font-size($alfresco-typography, display-3), + --theme-display-4-font-size: mat.font-size($alfresco-typography, display-4), + --theme-caption-font-size: mat.font-size($alfresco-typography, caption), + --theme-title-font-size: mat.font-size($alfresco-typography, title), + --theme-subheading-1-font-size: mat.font-size($alfresco-typography, subheading-1), + --theme-subheading-2-font-size: mat.font-size($alfresco-typography, subheading-2), + --theme-button-font-size: mat.font-size($alfresco-typography, button), + --theme-headline-font-size: mat.font-size($alfresco-typography, headline), + --theme-headline-line-height: mat.line-height($alfresco-typography, headline), --theme-adf-icon-1-font-size: map-get($custom-css-variables, 'theme-adf-icon-1-font-size'), --theme-adf-picture-1-font-size: map-get($custom-css-variables, 'theme-adf-picture-1-font-size'), @@ -101,9 +102,9 @@ --theme-adf-task-title-font-size: map-get($custom-css-variables, 'theme-adf-task-title-font-size'), // specific colors - --theme-colors-mat-grey: mat-color($mat-grey, A200), - --theme-colors-mat-grey-dark: mat-color($mat-grey, A400), - --theme-colors-mag-grey-light: mat-color($mat-grey, 50), + --theme-colors-mat-grey: mat.get-color-from-palette(mat.$grey-palette, A200), + --theme-colors-mat-grey-dark: mat.get-color-from-palette(mat.$grey-palette, A400), + --theme-colors-mag-grey-light: mat.get-color-from-palette(mat.$grey-palette, 50), ); // propagates SCSS variables into the CSS variables scope diff --git a/lib/core/styles/_theming.scss b/lib/core/styles/_theming.scss index 78c9bc425c..dc17537aad 100644 --- a/lib/core/styles/_theming.scss +++ b/lib/core/styles/_theming.scss @@ -1,4 +1,3 @@ -@import '~@angular/material/theming'; @import '~@angular/flex-layout/mq'; @import './colors'; @import './mixins'; diff --git a/lib/core/styles/_typography.scss b/lib/core/styles/_typography.scss index 983419cfcf..b4f6200a3d 100644 --- a/lib/core/styles/_typography.scss +++ b/lib/core/styles/_typography.scss @@ -1,19 +1,19 @@ -@import '~@angular/material/theming'; +@use '~@angular/material' as mat; -$alfresco-typography: mat-typography-config( +$alfresco-typography: mat.define-typography-config( $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif', - $display-4: mat-typography-level(112px, 112px, 300), - $display-3: mat-typography-level(56px, 56px, 400), - $display-2: mat-typography-level(45px, 48px, 400), - $display-1: mat-typography-level(34px, 40px, 400), - $headline: mat-typography-level(24px, 32px, 400), - $title: mat-typography-level(20px, 32px, 500), - $subheading-2: mat-typography-level(16px, 28px, 400), - $subheading-1: mat-typography-level(15px, 24px, 400), - $body-2: mat-typography-level(14px, 24px, 500), - $body-1: mat-typography-level(14px, 20px, 400), - $caption: mat-typography-level(12px, 20px, 400), - $button: mat-typography-level(14px, 14px, 500), + $display-4: mat.define-typography-level(112px, 112px, 300), + $display-3: mat.define-typography-level(56px, 56px, 400), + $display-2: mat.define-typography-level(45px, 48px, 400), + $display-1: mat.define-typography-level(34px, 40px, 400), + $headline: mat.define-typography-level(24px, 32px, 400), + $title: mat.define-typography-level(20px, 32px, 500), + $subheading-2: mat.define-typography-level(16px, 28px, 400), + $subheading-1: mat.define-typography-level(15px, 24px, 400), + $body-2: mat.define-typography-level(14px, 24px, 500), + $body-1: mat.define-typography-level(14px, 20px, 400), + $caption: mat.define-typography-level(12px, 20px, 400), + $button: mat.define-typography-level(14px, 14px, 500), // Line-height must be unit-less fraction of the font-size. - $input: mat-typography-level(16px, 1.25, 400) + $input: mat.define-typography-level(16px, 1.25, 400) ); diff --git a/lib/core/styles/prebuilt/adf-blue-orange.scss b/lib/core/styles/prebuilt/adf-blue-orange.scss index 8033720080..5410fa7fb2 100644 --- a/lib/core/styles/prebuilt/adf-blue-orange.scss +++ b/lib/core/styles/prebuilt/adf-blue-orange.scss @@ -1,11 +1,12 @@ +@use '~@angular/material' as mat; @import '../theming'; @import './all-theme'; -@include mat-core($alfresco-typography); +@include mat.core($alfresco-typography); -$primary: mat-palette($alfresco-ecm-blue); -$accent: mat-palette($alfresco-accent-orange); -$warn: mat-palette($alfresco-warn); -$theme: mat-light-theme( +$primary: mat.define-palette($alfresco-ecm-blue); +$accent: mat.define-palette($alfresco-accent-orange); +$warn: mat.define-palette($alfresco-warn); +$theme: mat.define-light-theme( ( color: ( primary: $primary, @@ -14,5 +15,5 @@ $theme: mat-light-theme( ) ); -@include angular-material-theme($theme); +@include mat.all-component-themes($theme); @include alfresco-material-theme($theme); diff --git a/lib/core/styles/prebuilt/adf-blue-purple.scss b/lib/core/styles/prebuilt/adf-blue-purple.scss index e2e47f3c51..896acc7780 100644 --- a/lib/core/styles/prebuilt/adf-blue-purple.scss +++ b/lib/core/styles/prebuilt/adf-blue-purple.scss @@ -1,11 +1,12 @@ +@use '~@angular/material' as mat; @import '../theming'; @import './all-theme'; -@include mat-core($alfresco-typography); +@include mat.core($alfresco-typography); -$primary: mat-palette($mat-pink, 700, 500, 900); -$accent: mat-palette($alfresco-accent-purple); -$warn: mat-palette($alfresco-warn); -$theme: mat-light-theme( +$primary: mat.define-palette(mat.$pink-palette, 700, 500, 900); +$accent: mat.define-palette($alfresco-accent-purple); +$warn: mat.define-palette($alfresco-warn); +$theme: mat.define-light-theme( ( color: ( primary: $primary, @@ -14,5 +15,5 @@ $theme: mat-light-theme( ) ); -@include angular-material-theme($theme); +@include mat.all-component-themes($theme); @include alfresco-material-theme($theme); diff --git a/lib/core/styles/prebuilt/adf-cyan-orange.scss b/lib/core/styles/prebuilt/adf-cyan-orange.scss index 915ab3f9ac..648052bcb0 100644 --- a/lib/core/styles/prebuilt/adf-cyan-orange.scss +++ b/lib/core/styles/prebuilt/adf-cyan-orange.scss @@ -1,11 +1,12 @@ +@use '~@angular/material' as mat; @import '../theming'; @import './all-theme'; -@include mat-core($alfresco-typography); +@include mat.core($alfresco-typography); -$primary: mat-palette($alfresco-ecm-cyan); -$accent: mat-palette($alfresco-accent-orange); -$warn: mat-palette($alfresco-warn); -$theme: mat-light-theme( +$primary: mat.define-palette($alfresco-ecm-cyan); +$accent: mat.define-palette($alfresco-accent-orange); +$warn: mat.define-palette($alfresco-warn); +$theme: mat.define-light-theme( ( color: ( primary: $primary, @@ -14,5 +15,5 @@ $theme: mat-light-theme( ) ); -@include angular-material-theme($theme); +@include mat.all-component-themes($theme); @include alfresco-material-theme($theme); diff --git a/lib/core/styles/prebuilt/adf-cyan-purple.scss b/lib/core/styles/prebuilt/adf-cyan-purple.scss index 249530fe4f..b4f711f3cc 100644 --- a/lib/core/styles/prebuilt/adf-cyan-purple.scss +++ b/lib/core/styles/prebuilt/adf-cyan-purple.scss @@ -1,11 +1,12 @@ +@use '~@angular/material' as mat; @import '../theming'; @import './all-theme'; -@include mat-core($alfresco-typography); +@include mat.core($alfresco-typography); -$primary: mat-palette($alfresco-ecm-cyan); -$accent: mat-palette($alfresco-accent-purple); -$warn: mat-palette($alfresco-warn); -$theme: mat-light-theme( +$primary: mat.define-palette($alfresco-ecm-cyan); +$accent: mat.define-palette($alfresco-accent-purple); +$warn: mat.define-palette($alfresco-warn); +$theme: mat.define-light-theme( ( color: ( primary: $primary, @@ -14,5 +15,5 @@ $theme: mat-light-theme( ) ); -@include angular-material-theme($theme); +@include mat.all-component-themes($theme); @include alfresco-material-theme($theme); diff --git a/lib/core/styles/prebuilt/adf-green-orange.scss b/lib/core/styles/prebuilt/adf-green-orange.scss index 06a1c2c84e..f416222c83 100644 --- a/lib/core/styles/prebuilt/adf-green-orange.scss +++ b/lib/core/styles/prebuilt/adf-green-orange.scss @@ -1,11 +1,12 @@ +@use '~@angular/material' as mat; @import '../theming'; @import './all-theme'; -@include mat-core($alfresco-typography); +@include mat.core($alfresco-typography); -$primary: mat-palette($alfresco-bpm-green); -$accent: mat-palette($alfresco-accent-orange); -$warn: mat-palette($alfresco-warn); -$theme: mat-light-theme( +$primary: mat.define-palette($alfresco-bpm-green); +$accent: mat.define-palette($alfresco-accent-orange); +$warn: mat.define-palette($alfresco-warn); +$theme: mat.define-light-theme( ( color: ( primary: $primary, @@ -14,5 +15,5 @@ $theme: mat-light-theme( ) ); -@include angular-material-theme($theme); +@include mat.all-component-themes($theme); @include alfresco-material-theme($theme); diff --git a/lib/core/styles/prebuilt/adf-green-purple.scss b/lib/core/styles/prebuilt/adf-green-purple.scss index b08cd72870..ce4c721e4e 100644 --- a/lib/core/styles/prebuilt/adf-green-purple.scss +++ b/lib/core/styles/prebuilt/adf-green-purple.scss @@ -1,11 +1,12 @@ +@use '~@angular/material' as mat; @import '../theming'; @import './all-theme'; -@include mat-core($alfresco-typography); +@include mat.core($alfresco-typography); -$primary: mat-palette($alfresco-bpm-green); -$accent: mat-palette($alfresco-accent-purple); -$warn: mat-palette($alfresco-warn); -$theme: mat-light-theme( +$primary: mat.define-palette($alfresco-bpm-green); +$accent: mat.define-palette($alfresco-accent-purple); +$warn: mat.define-palette($alfresco-warn); +$theme: mat.define-light-theme( ( color: ( primary: $primary, @@ -14,5 +15,5 @@ $theme: mat-light-theme( ) ); -@include angular-material-theme($theme); +@include mat.all-component-themes($theme); @include alfresco-material-theme($theme); diff --git a/lib/core/styles/prebuilt/adf-indigo-pink.scss b/lib/core/styles/prebuilt/adf-indigo-pink.scss index 6b9af29e82..cd73dd98e4 100644 --- a/lib/core/styles/prebuilt/adf-indigo-pink.scss +++ b/lib/core/styles/prebuilt/adf-indigo-pink.scss @@ -1,12 +1,13 @@ /* stylelint-disable value-keyword-case */ +@use '~@angular/material' as mat; @import '../theming'; @import './all-theme'; -@include mat-core($alfresco-typography); +@include mat.core($alfresco-typography); -$primary: mat-palette($mat-indigo); -$accent: mat-palette($mat-pink, A200, A100, A400); -$warn: mat-palette($alfresco-warn); -$theme: mat-light-theme( +$primary: mat.define-palette(mat.$indigo-palette); +$accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); +$warn: mat.define-palette($alfresco-warn); +$theme: mat.define-light-theme( ( color: ( primary: $primary, @@ -15,5 +16,5 @@ $theme: mat-light-theme( ) ); -@include angular-material-theme($theme); +@include mat.all-component-themes($theme); @include alfresco-material-theme($theme); diff --git a/lib/core/styles/prebuilt/adf-pink-bluegrey.scss b/lib/core/styles/prebuilt/adf-pink-bluegrey.scss index 55a5370b40..cc4d3fb819 100644 --- a/lib/core/styles/prebuilt/adf-pink-bluegrey.scss +++ b/lib/core/styles/prebuilt/adf-pink-bluegrey.scss @@ -1,12 +1,13 @@ /* stylelint-disable value-keyword-case */ +@use '~@angular/material' as mat; @import '../theming'; @import './all-theme'; -@include mat-core($alfresco-typography); +@include mat.core($alfresco-typography); -$primary: mat-palette($mat-pink, 700, 500, 900); -$accent: mat-palette($mat-blue-grey, A200, A100, A400); -$warn: mat-palette($alfresco-warn); -$theme: mat-dark-theme( +$primary: mat.define-palette(mat.$pink-palette, 700, 500, 900); +$accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400); +$warn: mat.define-palette($alfresco-warn); +$theme: mat.define-dark-theme( ( color: ( primary: $primary, @@ -15,5 +16,5 @@ $theme: mat-dark-theme( ) ); -@include angular-material-theme($theme); +@include mat.all-component-themes($theme); @include alfresco-material-theme($theme); diff --git a/lib/core/styles/prebuilt/adf-purple-green.scss b/lib/core/styles/prebuilt/adf-purple-green.scss index 906a7938d9..cf9ed1e392 100644 --- a/lib/core/styles/prebuilt/adf-purple-green.scss +++ b/lib/core/styles/prebuilt/adf-purple-green.scss @@ -1,12 +1,13 @@ /* stylelint-disable value-keyword-case */ +@use '~@angular/material' as mat; @import '../theming'; @import './all-theme'; -@include mat-core($alfresco-typography); +@include mat.core($alfresco-typography); -$primary: mat-palette($mat-purple, 700, 500, 800); -$accent: mat-palette($mat-green, A200, A100, A400); -$warn: mat-palette($alfresco-warn); -$theme: mat-dark-theme( +$primary: mat.define-palette(mat.$purple-palette, 700, 500, 800); +$accent: mat.define-palette(mat.$green-palette, A200, A100, A400); +$warn: mat.define-palette($alfresco-warn); +$theme: mat.define-dark-theme( ( color: ( primary: $primary, @@ -15,5 +16,5 @@ $theme: mat-dark-theme( ) ); -@include angular-material-theme($theme); +@include mat.all-component-themes($theme); @include alfresco-material-theme($theme); diff --git a/package-lock.json b/package-lock.json index 22d4819398..a1194715ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2295,12 +2295,12 @@ } }, "@angular/cdk": { - "version": "11.2.13", - "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.2.13.tgz", - "integrity": "sha512-FkE4iCwoLbQxLDUOjV1I7M/6hmpyb7erAjEdWgch7nGRNxF1hqX5Bqf1lvLFKPNCbx5NRI5K7YVAdIUQUR8vug==", + "version": "12.2.13", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.13.tgz", + "integrity": "sha512-zSKRhECyFqhingIeyRInIyTvYErt4gWo+x5DQr0b7YLUbU8DZSwWnG4w76Ke2s4U8T7ry1jpJBHoX/e8YBpGMg==", "requires": { "parse5": "^5.0.0", - "tslib": "^2.0.0" + "tslib": "^2.2.0" } }, "@angular/cli": { @@ -2729,19 +2729,19 @@ } }, "@angular/material": { - "version": "11.2.13", - "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.2.13.tgz", - "integrity": "sha512-FqFdGSkOtqsmeLyTSousodDGUy2NqbtxCIKv2rwbsIRwHNKB0KpR/UQhA2gMRuGa5hxhMJ0DW0Tf9neMRuLCTg==", + "version": "12.2.13", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.13.tgz", + "integrity": "sha512-6g2GyN4qp2D+DqY2AwrQuPB3cd9gybvQVXvNRbTPXEulHr+LgGei00ySdFHFp6RvdGSMZ4i3LM1Fq3VkFxhCfQ==", "requires": { - "tslib": "^2.0.0" + "tslib": "^2.2.0" } }, "@angular/material-moment-adapter": { - "version": "11.2.13", - "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-11.2.13.tgz", - "integrity": "sha512-KDD7QcfePpwvPG3HYy4kA8Ju222fUZeoyGXxFVE98KgaIIHrTRIGPFLHbpzxIl+AYVgJcW2OiIXKLI09FiYirg==", + "version": "12.2.13", + "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-12.2.13.tgz", + "integrity": "sha512-0XhkAhBalvNvIfvi9t5qDKaTBtOuIqd1cABfotyaTecWmw57VoH0KoJtNekXjxDcx71S0LaqeYXfqTo4m+duSA==", "requires": { - "tslib": "^2.0.0" + "tslib": "^2.2.0" } }, "@angular/platform-browser": { diff --git a/package.json b/package.json index 3e270165d7..ed9df20add 100644 --- a/package.json +++ b/package.json @@ -71,14 +71,14 @@ "dependencies": { "@alfresco/js-api": "4.8.0", "@angular/animations": "^12.2.16", - "@angular/cdk": "11.2.13", + "@angular/cdk": "12.2.13", "@angular/common": "^12.2.16", "@angular/compiler": "^12.2.16", "@angular/core": "^12.2.16", "@angular/flex-layout": "^10.0.0-beta.32", "@angular/forms": "^12.2.16", - "@angular/material": "^11.2.13", - "@angular/material-moment-adapter": "^11.2.13", + "@angular/material": "^12.2.13", + "@angular/material-moment-adapter": "^12.2.13", "@angular/platform-browser": "^12.2.16", "@angular/platform-browser-dynamic": "^12.2.16", "@angular/router": "^12.2.16",