inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-24 14:31:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

material 12

Browse Source
This commit is contained in:
Denys Vuika
2022-02-21 12:21:08 +00:00
parent 9f3a0538bb
commit 92806feabb
23 changed files with 193 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
demo-shell/src/custom-style-dev.scss
View File

@@ -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 {

20
demo-shell/src/custom-style.scss
View File

@@ -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 {

4
lib/content-services/src/lib/search/components/search-control.component.scss
View File

@@ -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;

4
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss
View File

@@ -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);
}
}

4
lib/content-services/src/lib/search/components/search-form/search-form.component.scss
View File

@@ -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;

6
lib/core/datatable/components/datatable/datatable.component.scss
View File

@@ -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 {

4
lib/core/directives/tooltip-card/tooltip-card.component.scss
View File

@@ -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);

1
lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss
View File

@@ -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;

4
lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss
View File

@@ -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);
}
}

133
lib/core/styles/_index.scss
View File

@@ -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

1
lib/core/styles/_theming.scss
View File

@@ -1,4 +1,3 @@
@import '~@angular/material/theming';
@import '~@angular/flex-layout/mq';
@import './colors';
@import './mixins';

30
lib/core/styles/_typography.scss
View File

@@ -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)
);

13
lib/core/styles/prebuilt/adf-blue-orange.scss
View File

@@ -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);

13
lib/core/styles/prebuilt/adf-blue-purple.scss
View File

@@ -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);

13
lib/core/styles/prebuilt/adf-cyan-orange.scss
View File

@@ -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);

13
lib/core/styles/prebuilt/adf-cyan-purple.scss
View File

@@ -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);

13
lib/core/styles/prebuilt/adf-green-orange.scss
View File

@@ -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);

13
lib/core/styles/prebuilt/adf-green-purple.scss
View File

@@ -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);

13
lib/core/styles/prebuilt/adf-indigo-pink.scss
View File

@@ -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);

13
lib/core/styles/prebuilt/adf-pink-bluegrey.scss
View File

@@ -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);

13
lib/core/styles/prebuilt/adf-purple-green.scss
View File

@@ -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);

24
package-lock.json generated
View File

@@ -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": {

6
package.json
View File

@@ -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",