inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[MIGRATION] - updated style to use still material 2 and postpone material migration

Browse Source
This commit is contained in:
VitoAlbano 2025-03-12 17:56:13 +00:00
parent c78d57fe47
commit 8aab4c48be
18 changed files with 3887 additions and 994 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/core/breadcrumbs/src/styles/_breadcrumb.theme.scss
View File

@ -5,12 +5,12 @@
$config: mat.get-color-config($theme);
$foreground-palette: map.get($config, foreground);
$primary-palette: map.get($config, primary);
$text-color: mat.get-color-from-palette($foreground-palette, text);
$primary: mat.get-color-from-palette($primary-palette, text);
$text-color: mat.m2-get-color-from-palette($foreground-palette, text);
$primary: mat.m2-get-color-from-palette($primary-palette, text);
adf-breadcrumb {
.adf-breadcrumb__show-all-button-icon--rotate {
color: mat.get-color-from-palette($primary-palette, 500);
color: mat.m2-get-color-from-palette($primary-palette, 500);
}
.adf-breadcrumb__item-wrapper {

11
lib/core/custom-theme/material-theme.scss
View File

@ -2,22 +2,19 @@
@use '@angular/material' as mat;
@import './theme/theme-data';
$custom-theme: mat.define-light-theme(
$custom-theme: mat.m2-define-light-theme(
(
color: (
primary: map.get($palettes, primary),
accent: map.get($palettes, accent),
warn: map.get($palettes, warning),
warn: map.get($palettes, warning)
),
typography: $app-typography,
typography: $app-typography
)
);
@if $background-color {
$custom-theme: get-custom-background-color(
$background-color,
$custom-theme
);
$custom-theme: get-custom-background-color($background-color, $custom-theme);
}
@if $text-color {

20
lib/core/custom-theme/theme/custom-theme-palettes.scss
View File

@ -1,31 +1,27 @@
@use '@angular/material' as mat;
@import './default-colors.scss';
@import './custom-palette-creator.scss';
@import './default-colors';
@import './custom-palette-creator';
@function get-mat-palettes($primary-color, $accent-color) {
$mat-primary-palette: null;
@if ($primary-color) {
$custom-theme-primary-palette: create-color-palette($primary-color, 'primary');
$mat-primary-palette: mat.define-palette($custom-theme-primary-palette, 500);
$mat-primary-palette: mat.m2-define-palette($custom-theme-primary-palette, 500);
} @else {
$mat-primary-palette: mat.define-palette($default-primary, A100);
$mat-primary-palette: mat.m2-define-palette($default-primary, A100);
}
$mat-accent-palette: null;
@if ($accent-color) {
$custom-theme-accent-palette: create-color-palette($accent-color, 'accent');
$mat-accent-palette: mat.define-palette($custom-theme-accent-palette, 500);
$mat-accent-palette: mat.m2-define-palette($custom-theme-accent-palette, 500);
} @else {
$mat-accent-palette: mat.define-palette($default-accent);
$mat-accent-palette: mat.m2-define-palette($default-accent);
}
$mat-warn-palette: mat.define-palette($default-warn, A100);
$mat-warn-palette: mat.m2-define-palette($default-warn, A100);
@return (
primary: $mat-primary-palette,
accent: $mat-accent-palette,
warning: $mat-warn-palette,
);
@return (primary: $mat-primary-palette, accent: $mat-accent-palette, warning: $mat-warn-palette);
}

52
lib/core/custom-theme/theme/typography.scss
View File

@ -3,37 +3,37 @@
@import '../variables/font-family';
@function get-mat-typography($base-font-size, $font-family) {
$custom-typography: mat.define-typography-config(
$custom-typography: mat.m2-define-typography-config(
$font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
$headline-1: mat.define-typography-level(112px, 112px, 300),
$headline-2: mat.define-typography-level(56px, 56px, 400),
$headline-3: mat.define-typography-level(45px, 48px, 400),
$headline-4: mat.define-typography-level(34px, 40px, 400),
$headline-5: mat.define-typography-level(24px, 32px, 400),
$headline-6: mat.define-typography-level(20px, 32px, 500),
$subtitle-1: mat.define-typography-level(16px, 28px, 400),
$body-1: mat.define-typography-level(15px, 24px, 400),
$subtitle-2: mat.define-typography-level(14px, 24px, 500),
$body-2: mat.define-typography-level(14px, 20px, 400),
$caption: mat.define-typography-level(12px, 20px, 400),
$button: mat.define-typography-level(14px, 14px, 500),
$headline-1: mat.m2-define-typography-level(112px, 112px, 300),
$headline-2: mat.m2-define-typography-level(56px, 56px, 400),
$headline-3: mat.m2-define-typography-level(45px, 48px, 400),
$headline-4: mat.m2-define-typography-level(34px, 40px, 400),
$headline-5: mat.m2-define-typography-level(24px, 32px, 400),
$headline-6: mat.m2-define-typography-level(20px, 32px, 500),
$subtitle-1: mat.m2-define-typography-level(16px, 28px, 400),
$body-1: mat.m2-define-typography-level(15px, 24px, 400),
$subtitle-2: mat.m2-define-typography-level(14px, 24px, 500),
$body-2: mat.m2-define-typography-level(14px, 20px, 400),
$caption: mat.m2-define-typography-level(12px, 20px, 400),
$button: mat.m2-define-typography-level(14px, 14px, 500),
// Line-height must be unit-less fraction of the font-size.
);
@if $base-font-size {
$custom-typography: mat.define-typography-config(
$headline-1: mat.define-typography-level(8rem, 8rem, 300),
$headline-2: mat.define-typography-level(4rem, 4rem, 400),
$headline-3: mat.define-typography-level(3.21rem, 3.21rem, 400),
$headline-4: mat.define-typography-level(2.42rem, 2.85rem, 400),
$headline-5: mat.define-typography-level(1.71rem, 2.28rem, 400),
$headline-6: mat.define-typography-level(1.42rem, 2.28rem, 500),
$subtitle-1: mat.define-typography-level(1.14rem, 2rem, 400),
$body-1: mat.define-typography-level(1.07rem, 1.71rem, 400),
$subtitle-2: mat.define-typography-level(1rem, 1.71rem, 500),
$body-2: mat.define-typography-level(1rem, 1.42rem, 400),
$caption: mat.define-typography-level(0.86rem, 1.42rem, 400),
$button: mat.define-typography-level(1rem, 1rem, 500),
$custom-typography: mat.m2-define-typography-config(
$headline-1: mat.m2-define-typography-level(8rem, 8rem, 300),
$headline-2: mat.m2-define-typography-level(4rem, 4rem, 400),
$headline-3: mat.m2-define-typography-level(3.21rem, 3.21rem, 400),
$headline-4: mat.m2-define-typography-level(2.42rem, 2.85rem, 400),
$headline-5: mat.m2-define-typography-level(1.71rem, 2.28rem, 400),
$headline-6: mat.m2-define-typography-level(1.42rem, 2.28rem, 500),
$subtitle-1: mat.m2-define-typography-level(1.14rem, 2rem, 400),
$body-1: mat.m2-define-typography-level(1.07rem, 1.71rem, 400),
$subtitle-2: mat.m2-define-typography-level(1rem, 1.71rem, 500),
$body-2: mat.m2-define-typography-level(1rem, 1.42rem, 400),
$caption: mat.m2-define-typography-level(0.86rem, 1.42rem, 400),
$button: mat.m2-define-typography-level(1rem, 1rem, 500),
$font-family: $default-font-family
);
}

84
lib/core/src/lib/styles/_components-variables.scss
View File

@ -11,59 +11,59 @@
$background: map-get($theme, background);
$defaults: (
--adf-card-view-background: mat.get-color-from-palette($background, card),
--adf-card-view-background: mat.m2-get-color-from-palette($background, card),
--adf-card-view-border: $adf-ref-card-border,
--adf-card-view-border-color: mat.get-color-from-palette($foreground, divider),
--adf-card-view-border-color: mat.m2-get-color-from-palette($foreground, divider),
--adf-card-view-border-radius: $adf-ref-card-border-radius-slim,
--adf-card-view-array-item-background: mat.get-color-from-palette($background, card),
--adf-card-view-array-item-background: mat.m2-get-color-from-palette($background, card),
--adf-card-view-array-item-border: $adf-ref-card-border,
--adf-card-view-array-item-border-color: mat.get-color-from-palette($foreground, divider),
--adf-card-view-array-item-border-color: mat.m2-get-color-from-palette($foreground, divider),
--adf-card-view-array-item-border-radius: $adf-ref-card-border-radius-slim,
--adf-edit-task-and-service-filter-header-title-color: mat.get-color-from-palette($foreground, text),
--adf-edit-task-and-service-filter-header-description-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-edit-task-and-service-filter-content-text-label-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-edit-task-and-service-filter-content-select-label-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-edit-task-and-service-filter-header-title-color: mat.m2-get-color-from-palette($foreground, text),
--adf-edit-task-and-service-filter-header-description-color: mat.m2-get-color-from-palette($foreground, secondary-text),
--adf-edit-task-and-service-filter-content-text-label-color: mat.m2-get-color-from-palette($foreground, secondary-text),
--adf-edit-task-and-service-filter-content-select-label-color: mat.m2-get-color-from-palette($foreground, secondary-text),
--adf-edit-task-and-service-filter-header-height: $adf-ref-height-48,
--adf-about-panel-header-height: $adf-ref-height-48,
--adf-about-panel-header-title-color: mat.get-color-from-palette($foreground, text),
--adf-about-panel-header-title-color: mat.m2-get-color-from-palette($foreground, text),
--adf-edit-process-filter-header-height: $adf-ref-height-48,
--adf-edit-process-filter-header-title-color: mat.get-color-from-palette($foreground, text),
--adf-edit-process-filter-header-description-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-edit-process-filter-content-text-label-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-edit-process-filter-content-select-label-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-about-server-settings-background: mat.get-color-from-palette($background, card),
--adf-about-server-settings-color: mat.get-color-from-palette($foreground, text),
--adf-edit-process-filter-header-title-color: mat.m2-get-color-from-palette($foreground, text),
--adf-edit-process-filter-header-description-color: mat.m2-get-color-from-palette($foreground, secondary-text),
--adf-edit-process-filter-content-text-label-color: mat.m2-get-color-from-palette($foreground, secondary-text),
--adf-edit-process-filter-content-select-label-color: mat.m2-get-color-from-palette($foreground, secondary-text),
--adf-about-server-settings-background: mat.m2-get-color-from-palette($background, card),
--adf-about-server-settings-color: mat.m2-get-color-from-palette($foreground, text),
--adf-about-server-settings-border-radius: $adf-ref-card-border-radius-normal,
--adf-about-server-settings-padding: $adf-ref-card-padding,
--adf-package-list-table-background: mat.get-color-from-palette($background, card),
--adf-package-list-table-background: mat.m2-get-color-from-palette($background, card),
--adf-package-list-table-header-min-height: $adf-ref-table-header-min-height,
--adf-package-list-table-header-cell-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-package-list-table-header-cell-color: mat.m2-get-color-from-palette($foreground, secondary-text),
--adf-package-list-table-row-min-height: $adf-ref-table-row-min-height,
--adf-package-list-table-row-cell-color: mat.get-color-from-palette($foreground, text),
--adf-package-list-table-row-cell-color: mat.m2-get-color-from-palette($foreground, text),
--adf-identity-user-info-background: var(--adf-theme-primary-300),
--adf-identity-user-info-height: $adf-ref-height,
--adf-identity-user-info-width: $adf-ref-width,
--adf-identity-user-info-line-height: $adf-ref-line-height,
--adf-identity-user-info-font-size: var(--theme-adf-picture-1-font-size),
--adf-user-info-container-margin-right: $adf-ref-margin-right,
--adf-info-drawer-tab-default-color: mat.get-color-from-palette($accent),
--adf-info-drawer-tab-default-background: mat.get-color-from-palette($background, card),
--adf-info-drawer-tab-default-color: mat.m2-get-color-from-palette($accent),
--adf-info-drawer-tab-default-background: mat.m2-get-color-from-palette($background, card),
--adf-info-drawer-tab-default-bottom-line: $adf-ref-tab-bottom-line-default,
--adf-info-drawer-tab-hover-color: mat.get-color-from-palette($accent),
--adf-info-drawer-tab-hover-background: mat.get-color-from-palette($background, card),
--adf-info-drawer-tab-hover-color: mat.m2-get-color-from-palette($accent),
--adf-info-drawer-tab-hover-background: mat.m2-get-color-from-palette($background, card),
--adf-info-drawer-tab-hover-bottom-line: $adf-ref-tab-bottom-line-default,
--adf-info-drawer-tab-active-unfocused-color: mat.get-color-from-palette($primary),
--adf-info-drawer-tab-active-unfocused-background: mat.get-color-from-palette($background, card),
--adf-info-drawer-tab-active-unfocused-color: mat.m2-get-color-from-palette($primary),
--adf-info-drawer-tab-active-unfocused-background: mat.m2-get-color-from-palette($background, card),
--adf-info-drawer-tab-active-unfocused-bottom-line: $adf-ref-tab-bottom-line-default,
--adf-info-drawer-tab-active-focused-color: mat.get-color-from-palette($foreground, text),
--adf-info-drawer-tab-active-focused-background: mat.get-color-from-palette($primary),
--adf-info-drawer-tab-active-focused-color: mat.m2-get-color-from-palette($foreground, text),
--adf-info-drawer-tab-active-focused-background: mat.m2-get-color-from-palette($primary),
--adf-info-drawer-tab-active-focused-bottom-line: $adf-ref-tab-bottom-line-active,
--adf-people-cloud-input-label-default-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-people-cloud-input-label-focus-color: mat.get-color-from-palette($primary),
--adf-people-cloud-autosuggest-result-active-color: mat.get-color-from-palette($foreground, text),
--adf-people-cloud-autosuggest-result-disabled-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-people-cloud-input-caption-error-color: mat.get-color-from-palette($warn),
--adf-people-cloud-input-label-default-color: mat.m2-get-color-from-palette($foreground, secondary-text),
--adf-people-cloud-input-label-focus-color: mat.m2-get-color-from-palette($primary),
--adf-people-cloud-autosuggest-result-active-color: mat.m2-get-color-from-palette($foreground, text),
--adf-people-cloud-autosuggest-result-disabled-color: mat.m2-get-color-from-palette($foreground, secondary-text),
--adf-people-cloud-input-caption-error-color: mat.m2-get-color-from-palette($warn),
--adf-metadata-property-panel-border-color: $adf-ref-metadata-property-panel-border-color,
--adf-metadata-buttons-background-color: $adf-ref-metadata-buttons-background-color,
--adf-metadata-action-button-clear-color: $adf-ref-metadata-action-button-clear-color,
@ -71,16 +71,16 @@
--adf-metadata-property-panel-label-color: $adf-ref-metadata-property-panel-label-color,
--adf-metadata-property-panel-title-color: $adf-ref-metadata-property-panel-title-color,
--adf-group-cloud-input-label-default-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-group-cloud-input-label-focus-color: mat.get-color-from-palette($primary),
--adf-group-cloud-autosuggest-result-active-color: mat.get-color-from-palette($foreground, text),
--adf-group-cloud-autosuggest-result-disabled-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-group-cloud-input-caption-error-color: mat.get-color-from-palette($warn),
--adf-task-assignment-filter-option-default-color: mat.get-color-from-palette($foreground, text),
--adf-task-assignment-filter-option-selected-color: mat.get-color-from-palette($primary),
--adf-task-assignment-filter-label-default-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-task-assignment-filter-label-focus-color: mat.get-color-from-palette($primary),
--adf-process-header-cloud-card-background: mat.get-color-from-palette($background, card),
--adf-group-cloud-input-label-default-color: mat.m2-get-color-from-palette($foreground, secondary-text),
--adf-group-cloud-input-label-focus-color: mat.m2-get-color-from-palette($primary),
--adf-group-cloud-autosuggest-result-active-color: mat.m2-get-color-from-palette($foreground, text),
--adf-group-cloud-autosuggest-result-disabled-color: mat.m2-get-color-from-palette($foreground, secondary-text),
--adf-group-cloud-input-caption-error-color: mat.m2-get-color-from-palette($warn),
--adf-task-assignment-filter-option-default-color: mat.m2-get-color-from-palette($foreground, text),
--adf-task-assignment-filter-option-selected-color: mat.m2-get-color-from-palette($primary),
--adf-task-assignment-filter-label-default-color: mat.m2-get-color-from-palette($foreground, secondary-text),
--adf-task-assignment-filter-label-focus-color: mat.m2-get-color-from-palette($primary),
--adf-process-header-cloud-card-background: mat.m2-get-color-from-palette($background, card),
--adf-header-icon-button-default-color: $adf-ref-header-icon-color,
--adf-header-icon-button-default-border-radius: $adf-ref-header-icon-border-radius,
--adf-header-icon-button-hover-color: $adf-ref-header-icon-color,
@ -93,7 +93,7 @@
--adf-chip-border-color: $adf-chip-border-color,
--adf-sidenav-active-text-color: $adf-sidenav-active-text-color,
--adf-display-external-property-widget-preview-selection-color: mat.get-color-from-palette($foreground, secondary-text)
--adf-display-external-property-widget-preview-selection-color: mat.m2-get-color-from-palette($foreground, secondary-text)
);
// propagates SCSS variables into the CSS variables scope

114
lib/core/src/lib/styles/_index.scss
View File

@ -28,70 +28,70 @@
// map SCSS variables to expose as CSS variables
$defaults: (
// theme colors
--theme-primary-color: mat.get-color-from-palette($primary),
--theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast),
--theme-header-text-color: mat.get-color-from-palette($primary, default-contrast),
--adf-theme-primary-50: mat.get-color-from-palette($primary, 50),
--adf-theme-primary-100: mat.get-color-from-palette($primary, 100),
--adf-theme-primary-300: mat.get-color-from-palette($primary, 300),
--adf-theme-primary-900: mat.get-color-from-palette($primary, 900),
--theme-warn-color: mat.get-color-from-palette($warn),
--theme-warn-color-a700: mat.get-color-from-palette($warn, A700),
--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),
--theme-accent-500: mat.get-color-from-palette($accent, 500),
--adf-theme-foreground-base-color: mat.get-color-from-palette($foreground, base),
--adf-theme-foreground-base-color-065: mat.get-color-from-palette($foreground, base, 0.65),
--adf-theme-foreground-base-color-045: mat.get-color-from-palette($foreground, base, 0.45),
--adf-theme-foreground-disabled-text-color: mat.get-color-from-palette($foreground, disabled-text),
--adf-theme-foreground-divider-color: mat.get-color-from-palette($foreground, divider),
--adf-theme-foreground-icon-color: mat.get-color-from-palette($foreground, icon),
--adf-theme-foreground-icon-color-054: mat.get-color-from-palette($foreground, icon, 0.54),
--adf-theme-foreground-secondary-text-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-theme-foreground-text-color: mat.get-color-from-palette($foreground, text),
--adf-theme-foreground-text-color-087: mat.get-color-from-palette($foreground, text, 0.87),
--adf-theme-foreground-text-color-075: mat.get-color-from-palette($foreground, text, 0.75),
--adf-theme-foreground-text-color-064: mat.get-color-from-palette($foreground, text, 0.64),
--adf-theme-foreground-text-color-054: mat.get-color-from-palette($foreground, text, 0.54),
--adf-theme-foreground-text-color-040: mat.get-color-from-palette($foreground, text, 0.4),
--adf-theme-foreground-text-color-027: mat.get-color-from-palette($foreground, text, 0.27),
--adf-theme-foreground-text-color-025: mat.get-color-from-palette($foreground, text, 0.25),
--adf-theme-foreground-text-color-014: mat.get-color-from-palette($foreground, text, 0.14),
--adf-theme-foreground-text-color-007: mat.get-color-from-palette($foreground, text, 0.07),
--adf-theme-background-card-color: mat.get-color-from-palette($background, card),
--adf-theme-background-card-color-087: mat.get-color-from-palette($background, card, 0.87),
--theme-background-color: mat.get-color-from-palette($background, background),
--adf-theme-background-dialog-color: mat.get-color-from-palette($background, dialog),
--adf-theme-background-hover-color: mat.get-color-from-palette($background, hover),
--adf-theme-background-selected-button-color: mat.get-color-from-palette($background, selected-button),
--adf-theme-background-status-bar-color: mat.get-color-from-palette($background, status-bar),
--adf-theme-background-unselected-chip-color: mat.get-color-from-palette($background, unselected-chip),
--theme-primary-color: mat.m2-get-color-from-palette($primary),
--theme-primary-color-default-contrast: mat.m2-get-color-from-palette($primary, default-contrast),
--theme-header-text-color: mat.m2-get-color-from-palette($primary, default-contrast),
--adf-theme-primary-50: mat.m2-get-color-from-palette($primary, 50),
--adf-theme-primary-100: mat.m2-get-color-from-palette($primary, 100),
--adf-theme-primary-300: mat.m2-get-color-from-palette($primary, 300),
--adf-theme-primary-900: mat.m2-get-color-from-palette($primary, 900),
--theme-warn-color: mat.m2-get-color-from-palette($warn),
--theme-warn-color-a700: mat.m2-get-color-from-palette($warn, A700),
--theme-warn-color-default-contrast: mat.m2-get-color-from-palette($warn, default-contrast),
--theme-accent-color: mat.m2-get-color-from-palette($accent),
--theme-accent-color-a200: mat.m2-get-color-from-palette($accent, A200),
--theme-accent-color-default-contrast: mat.m2-get-color-from-palette($accent, default-contrast),
--theme-accent-500: mat.m2-get-color-from-palette($accent, 500),
--adf-theme-foreground-base-color: mat.m2-get-color-from-palette($foreground, base),
--adf-theme-foreground-base-color-065: mat.m2-get-color-from-palette($foreground, base, 0.65),
--adf-theme-foreground-base-color-045: mat.m2-get-color-from-palette($foreground, base, 0.45),
--adf-theme-foreground-disabled-text-color: mat.m2-get-color-from-palette($foreground, disabled-text),
--adf-theme-foreground-divider-color: mat.m2-get-color-from-palette($foreground, divider),
--adf-theme-foreground-icon-color: mat.m2-get-color-from-palette($foreground, icon),
--adf-theme-foreground-icon-color-054: mat.m2-get-color-from-palette($foreground, icon, 0.54),
--adf-theme-foreground-secondary-text-color: mat.m2-get-color-from-palette($foreground, secondary-text),
--adf-theme-foreground-text-color: mat.m2-get-color-from-palette($foreground, text),
--adf-theme-foreground-text-color-087: mat.m2-get-color-from-palette($foreground, text, 0.87),
--adf-theme-foreground-text-color-075: mat.m2-get-color-from-palette($foreground, text, 0.75),
--adf-theme-foreground-text-color-064: mat.m2-get-color-from-palette($foreground, text, 0.64),
--adf-theme-foreground-text-color-054: mat.m2-get-color-from-palette($foreground, text, 0.54),
--adf-theme-foreground-text-color-040: mat.m2-get-color-from-palette($foreground, text, 0.4),
--adf-theme-foreground-text-color-027: mat.m2-get-color-from-palette($foreground, text, 0.27),
--adf-theme-foreground-text-color-025: mat.m2-get-color-from-palette($foreground, text, 0.25),
--adf-theme-foreground-text-color-014: mat.m2-get-color-from-palette($foreground, text, 0.14),
--adf-theme-foreground-text-color-007: mat.m2-get-color-from-palette($foreground, text, 0.07),
--adf-theme-background-card-color: mat.m2-get-color-from-palette($background, card),
--adf-theme-background-card-color-087: mat.m2-get-color-from-palette($background, card, 0.87),
--theme-background-color: mat.m2-get-color-from-palette($background, background),
--adf-theme-background-dialog-color: mat.m2-get-color-from-palette($background, dialog),
--adf-theme-background-hover-color: mat.m2-get-color-from-palette($background, hover),
--adf-theme-background-selected-button-color: mat.m2-get-color-from-palette($background, selected-button),
--adf-theme-background-status-bar-color: mat.m2-get-color-from-palette($background, status-bar),
--adf-theme-background-unselected-chip-color: mat.m2-get-color-from-palette($background, unselected-chip),
// typography
--theme-font-family: mat.font-family($typography),
--theme-font-family: mat.m2-font-family($typography),
--theme-font-weight: normal,
--theme-body-1-font-size: mat.font-size($typography, body-2),
--theme-body-2-font-size: mat.font-size($typography, subtitle-2),
--theme-body-1-line-height: mat.line-height($typography, body-2),
--theme-display-1-font-size: mat.font-size($typography, headline-4),
--theme-display-3-font-size: mat.font-size($typography, headline-2),
--theme-display-4-font-size: mat.font-size($typography, headline-1),
--theme-caption-font-size: mat.font-size($typography, caption),
--theme-title-font-size: mat.font-size($typography, headline-6),
--theme-subheading-1-font-size: mat.font-size($typography, body-1),
--theme-subheading-2-font-size: mat.font-size($typography, subtitle-1),
--theme-button-font-size: mat.font-size($typography, button),
--theme-headline-font-size: mat.font-size($typography, headline-5),
--theme-headline-line-height: mat.line-height($typography, headline-5),
--theme-body-1-font-size: mat.m2-font-size($typography, body-2),
--theme-body-2-font-size: mat.m2-font-size($typography, subtitle-2),
--theme-body-1-line-height: mat.m2-line-height($typography, body-2),
--theme-display-1-font-size: mat.m2-font-size($typography, headline-4),
--theme-display-3-font-size: mat.m2-font-size($typography, headline-2),
--theme-display-4-font-size: mat.m2-font-size($typography, headline-1),
--theme-caption-font-size: mat.m2-font-size($typography, caption),
--theme-title-font-size: mat.m2-font-size($typography, headline-6),
--theme-subheading-1-font-size: mat.m2-font-size($typography, body-1),
--theme-subheading-2-font-size: mat.m2-font-size($typography, subtitle-1),
--theme-button-font-size: mat.m2-font-size($typography, button),
--theme-headline-font-size: mat.m2-font-size($typography, headline-5),
--theme-headline-line-height: mat.m2-line-height($typography, headline-5),
--theme-adf-icon-1-font-size: map-get($custom-css-variables, 'theme-adf-icon-1-font-size'),
--theme-adf-picture-1-font-size: map-get($custom-css-variables, 'theme-adf-picture-1-font-size'),
--theme-adf-task-footer-font-size: map-get($custom-css-variables, 'theme-adf-task-footer-font-size'),
--theme-adf-task-title-font-size: map-get($custom-css-variables, 'theme-adf-task-title-font-size'),
// specific colors
--adf-theme-mat-grey-color-a200: mat.get-color-from-palette(mat.$grey-palette, A200),
--adf-theme-mat-grey-color-a400: mat.get-color-from-palette(mat.$grey-palette, A400),
--adf-theme-mat-grey-color-50: mat.get-color-from-palette(mat.$grey-palette, 50),
--adf-theme-mat-grey-color-a200: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 'A200'),
--adf-theme-mat-grey-color-a400: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 'A400'),
--adf-theme-mat-grey-color-50: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 50),
// spacing
--adf-theme-spacing: map-get($custom-css-variables, 'theme-adf-spacing')
);

26
lib/core/src/lib/styles/_typography.scss
View File

@ -1,18 +1,18 @@
@use '@angular/material' as mat;
$alfresco-typography: mat.define-typography-config(
$alfresco-typography: mat.m2-define-typography-config(
$font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
$headline-1: mat.define-typography-level(112px, 112px, 300),
$headline-2: mat.define-typography-level(56px, 56px, 400),
$headline-3: mat.define-typography-level(45px, 48px, 400),
$headline-4: mat.define-typography-level(34px, 40px, 400),
$headline-5: mat.define-typography-level(24px, 32px, 400),
$headline-6: mat.define-typography-level(20px, 32px, 500),
$subtitle-1: mat.define-typography-level(16px, 28px, 400),
$body-1: mat.define-typography-level(15px, 24px, 400),
$subtitle-2: mat.define-typography-level(14px, 24px, 500),
$body-2: mat.define-typography-level(14px, 20px, 400),
$caption: mat.define-typography-level(12px, 20px, 400),
$button: mat.define-typography-level(14px, 14px, 500),
$headline-1: mat.m2-define-typography-level(112px, 112px, 300),
$headline-2: mat.m2-define-typography-level(56px, 56px, 400),
$headline-3: mat.m2-define-typography-level(45px, 48px, 400),
$headline-4: mat.m2-define-typography-level(34px, 40px, 400),
$headline-5: mat.m2-define-typography-level(24px, 32px, 400),
$headline-6: mat.m2-define-typography-level(20px, 32px, 500),
$subtitle-1: mat.m2-define-typography-level(16px, 28px, 400),
$body-1: mat.m2-define-typography-level(15px, 24px, 400),
$subtitle-2: mat.m2-define-typography-level(14px, 24px, 500),
$body-2: mat.m2-define-typography-level(14px, 20px, 400),
$caption: mat.m2-define-typography-level(12px, 20px, 400),
$button: mat.m2-define-typography-level(14px, 14px, 500),
// Line-height must be unit-less fraction of the font-size.
);

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

@ -4,14 +4,14 @@
@include mat.all-component-typographies;
@include mat.core;
$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(
$primary: mat.m2-define-palette($alfresco-ecm-blue);
$accent: mat.m2-define-palette($alfresco-accent-orange);
$warn: mat.m2-define-palette($alfresco-warn);
$theme: mat.m2-define-light-theme(
(
color: (
primary: $primary,
accent: $accent,
accent: $accent
),
typography: $alfresco-typography
)

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

@ -4,14 +4,14 @@
@include mat.all-component-typographies;
@include mat.core;
$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(
$primary: mat.m2-define-palette(mat.$pink-palette, 700, 500, 900);
$accent: mat.m2-define-palette($alfresco-accent-purple);
$warn: mat.m2-define-palette($alfresco-warn);
$theme: mat.m2-define-light-theme(
(
color: (
primary: $primary,
accent: $accent,
accent: $accent
),
typography: $alfresco-typography
)

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

@ -4,14 +4,14 @@
@include mat.all-component-typographies;
@include mat.core;
$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(
$primary: mat.m2-define-palette($alfresco-ecm-cyan);
$accent: mat.m2-define-palette($alfresco-accent-orange);
$warn: mat.m2-define-palette($alfresco-warn);
$theme: mat.m2-define-light-theme(
(
color: (
primary: $primary,
accent: $accent,
accent: $accent
),
typography: $alfresco-typography
)

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

@ -4,14 +4,14 @@
@include mat.all-component-typographies;
@include mat.core;
$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(
$primary: mat.m2-define-palette($alfresco-ecm-cyan);
$accent: mat.m2-define-palette($alfresco-accent-purple);
$warn: mat.m2-define-palette($alfresco-warn);
$theme: mat.m2-define-light-theme(
(
color: (
primary: $primary,
accent: $accent,
accent: $accent
),
typography: $alfresco-typography
)

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

@ -4,14 +4,14 @@
@include mat.all-component-typographies;
@include mat.core;
$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(
$primary: mat.m2-define-palette($alfresco-bpm-green);
$accent: mat.m2-define-palette($alfresco-accent-orange);
$warn: mat.m2-define-palette($alfresco-warn);
$theme: mat.m2-define-light-theme(
(
color: (
primary: $primary,
accent: $accent,
accent: $accent
),
typography: $alfresco-typography
)

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

@ -4,14 +4,14 @@
@include mat.all-component-typographies;
@include mat.core;
$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(
$primary: mat.m2-define-palette($alfresco-bpm-green);
$accent: mat.m2-define-palette($alfresco-accent-purple);
$warn: mat.m2-define-palette($alfresco-warn);
$theme: mat.m2-define-light-theme(
(
color: (
primary: $primary,
accent: $accent,
accent: $accent
),
typography: $alfresco-typography
)

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

@ -5,14 +5,14 @@
@include mat.all-component-typographies;
@include mat.core;
$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(
$primary: mat.m2-define-palette(mat.$indigo-palette);
$accent: mat.m2-define-palette(mat.$pink-palette, A200, A100, A400);
$warn: mat.m2-define-palette($alfresco-warn);
$theme: mat.m2-define-light-theme(
(
color: (
primary: $primary,
accent: $accent,
accent: $accent
),
typography: $alfresco-typography
)

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

@ -5,14 +5,14 @@
@include mat.all-component-typographies;
@include mat.core;
$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(
$primary: mat.m2-define-palette(mat.$pink-palette, 700, 500, 900);
$accent: mat.m2-define-palette(mat.$blue-grey-palette, A200, A100, A400);
$warn: mat.m2-define-palette($alfresco-warn);
$theme: mat.m2-define-dark-theme(
(
color: (
primary: $primary,
accent: $accent,
accent: $accent
),
typography: $alfresco-typography
)

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

@ -5,14 +5,14 @@
@include mat.all-component-typographies;
@include mat.core;
$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(
$primary: mat.m2-define-palette(mat.$purple-palette, 700, 500, 800);
$accent: mat.m2-define-palette(mat.$green-palette, A200, A100, A400);
$warn: mat.m2-define-palette($alfresco-warn);
$theme: mat.m2-define-dark-theme(
(
color: (
primary: $primary,
accent: $accent,
accent: $accent
),
typography: $alfresco-typography
)

4470
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@ -30,13 +30,13 @@
],
"dependencies": {
"@angular/animations": "18.2.13",
"@angular/cdk": "18.2.13",
"@angular/cdk": "18.2.14",
"@angular/common": "18.2.13",
"@angular/compiler": "18.2.13",
"@angular/core": "18.2.13",
"@angular/forms": "18.2.13",
"@angular/material": "18.2.13",
"@angular/material-date-fns-adapter": "18.2.13",
"@angular/material": "18.2.14",
"@angular/material-date-fns-adapter": "18.2.14",
"@angular/platform-browser": "18.2.13",
"@angular/platform-browser-dynamic": "18.2.13",
"@angular/router": "18.2.13",
@ -163,7 +163,7 @@
"ng-packagr": "18.2.1",
"nock": "13.5.5",
"npm-run-all": "^4.1.5",
"nx": "18.3.5",
"nx": "^20.0.0",
"postcss": "8.4.41",
"postcss-sass": "^0.5.0",
"prettier": "2.8.8",