From ddf3aa4c3d79e842fc7ed4e6d53b46983d74b2c3 Mon Sep 17 00:00:00 2001 From: MichalKinas <113341662+MichalKinas@users.noreply.github.com> Date: Wed, 1 Oct 2025 16:25:57 +0200 Subject: [PATCH] [ACS-10448] Move theme variables from ADF to ACA (#4823) * [ACS-10448] Move theme variables from ADF to ACA * [ACS-10448] Use latest ADF alphas --- package-lock.json | 61 +++++----- package.json | 12 +- .../aca-content/src/lib/ui/custom-theme.scss | 5 +- .../src/lib/ui/overrides/adf-variables.scss | 105 ++++++++++++++++++ projects/aca-content/src/lib/ui/theme.scss | 2 +- 5 files changed, 147 insertions(+), 38 deletions(-) create mode 100644 projects/aca-content/src/lib/ui/overrides/adf-variables.scss diff --git a/package-lock.json b/package-lock.json index 18684613d..fb897a8f9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,11 +9,11 @@ "version": "7.2.0", "license": "LGPL-3.0", "dependencies": { - "@alfresco/adf-content-services": "8.4.0-18010361913", - "@alfresco/adf-core": "8.4.0-18010361913", - "@alfresco/adf-extensions": "8.4.0-18010361913", - "@alfresco/eslint-plugin-eslint-angular": "8.4.0-18010361913", - "@alfresco/js-api": "9.4.0-18010361913", + "@alfresco/adf-content-services": "8.4.0-18161598994", + "@alfresco/adf-core": "8.4.0-18161598994", + "@alfresco/adf-extensions": "8.4.0-18161598994", + "@alfresco/eslint-plugin-eslint-angular": "8.4.0-18161598994", + "@alfresco/js-api": "9.4.0-18161598994", "@angular/animations": "19.2.6", "@angular/cdk": "19.2.9", "@angular/common": "19.2.6", @@ -46,7 +46,7 @@ "zone.js": "0.15.0" }, "devDependencies": { - "@alfresco/adf-cli": "8.4.0-18010361913", + "@alfresco/adf-cli": "8.4.0-18161598994", "@angular-devkit/build-angular": "19.2.15", "@angular-devkit/core": "19.2.7", "@angular-devkit/schematics": "19.2.7", @@ -114,13 +114,13 @@ "peer": true }, "node_modules/@alfresco/adf-cli": { - "version": "8.4.0-18010361913", - "resolved": "https://registry.npmjs.org/@alfresco/adf-cli/-/adf-cli-8.4.0-18010361913.tgz", - "integrity": "sha512-8CcwCS6FpUuaN3gU8Ys74T0/0fcXLFrq3slz4bMCZ430h5K3A6rG6Qclz4nmulWDTFWsOhGUCVNImRCH10oObw==", + "version": "8.4.0-18161598994", + "resolved": "https://registry.npmjs.org/@alfresco/adf-cli/-/adf-cli-8.4.0-18161598994.tgz", + "integrity": "sha512-yvRQWM002i+YHIEO7H1tLdH+UcVezxqT8P9XTqadLRqHhpg7/PRDVjnKabgmUX3XXLhrcWLsDI2L4hSC6gaDag==", "dev": true, "license": "Apache-2.0", "dependencies": { - "@alfresco/js-api": ">=9.4.0-18010361913", + "@alfresco/js-api": ">=9.4.0-18161598994", "commander": "^6.2.1", "ejs": "^3.1.10", "license-checker": "^25.0.1", @@ -135,16 +135,16 @@ } }, "node_modules/@alfresco/adf-content-services": { - "version": "8.4.0-18010361913", - "resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-8.4.0-18010361913.tgz", - "integrity": "sha512-1vni4CvgJ0Juo6ZFSJ5CRRRWVGSFxEs4OzWIUbXFGJK25ShYqYiL3mQXgU3bfPy9P7juUTlYyxqekdXDr2JZxA==", + "version": "8.4.0-18161598994", + "resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-8.4.0-18161598994.tgz", + "integrity": "sha512-U6OJP9s/xOFi+BOEW9n6WLihaZ7lVHI0A2hhpoNAkz/NCJmxVipYcplZnDUlOPbcbWh+gvgB4PUTswSgAG7rhw==", "license": "Apache-2.0", "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { - "@alfresco/adf-core": ">=8.4.0-18010361913", - "@alfresco/js-api": ">=9.4.0-18010361913", + "@alfresco/adf-core": ">=8.4.0-18161598994", + "@alfresco/js-api": ">=9.4.0-18161598994", "@angular/animations": ">=14.1.3", "@angular/cdk": ">=14.1.2", "@angular/common": ">=14.1.3", @@ -159,9 +159,9 @@ } }, "node_modules/@alfresco/adf-core": { - "version": "8.4.0-18010361913", - "resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-8.4.0-18010361913.tgz", - "integrity": "sha512-17TIMWt0uRUfpFPWEHSiYMzc6n5Ni6p+cZ/v4eV16kKqle42B86amUuWaKCMLHvnxpyixKaQluMO0kCvxKw9/g==", + "version": "8.4.0-18161598994", + "resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-8.4.0-18161598994.tgz", + "integrity": "sha512-dOFK2VA8TY5di4V7hQ58uAOUj9PnaDKRhLo842jKKY3ISZxYcHKlHJE0tfasYuB7M4A4k1LpACzcVJ6gXQ3OSw==", "license": "Apache-2.0", "dependencies": { "angular-oauth2-oidc": "17.0.2", @@ -172,8 +172,8 @@ "tslib": "^2.3.0" }, "peerDependencies": { - "@alfresco/adf-extensions": ">=8.4.0-18010361913", - "@alfresco/js-api": ">=9.4.0-18010361913", + "@alfresco/adf-extensions": ">=8.4.0-18161598994", + "@alfresco/js-api": ">=9.4.0-18161598994", "@angular/animations": ">=16.0.0", "@angular/cdk": ">=16.0.0", "@angular/common": ">=16.0.0", @@ -206,29 +206,29 @@ } }, "node_modules/@alfresco/adf-extensions": { - "version": "8.4.0-18010361913", - "resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-8.4.0-18010361913.tgz", - "integrity": "sha512-xyh/DpwMkLW3MpEKADPqyaF3sbNCFsUDJnjQwFqJHYCypdPC5Myo9lUGkOkAdgiPTJZzmnM7nBW/hMmZospd5g==", + "version": "8.4.0-18161598994", + "resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-8.4.0-18161598994.tgz", + "integrity": "sha512-bh8GwqiGs9wlyH78Gr1bJSrGs5uHPNKCr5vJeqgyGGeCx0pNfD9QiYJGzJiMvvhZYvC04+x3+4m/KLgOnrPO4A==", "license": "Apache-2.0", "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { - "@alfresco/js-api": ">=9.4.0-18010361913", + "@alfresco/js-api": ">=9.4.0-18161598994", "@angular/common": ">=14.1.3", "@angular/core": ">=14.1.3" } }, "node_modules/@alfresco/eslint-plugin-eslint-angular": { - "version": "8.4.0-18010361913", - "resolved": "https://registry.npmjs.org/@alfresco/eslint-plugin-eslint-angular/-/eslint-plugin-eslint-angular-8.4.0-18010361913.tgz", - "integrity": "sha512-KccttXrVcvz0anRDKrm/EW1XBi6KuxyxrRVdC0rvHqP9HQaqePht7dWkUBNI5b6pnRL7NfFcPK+h8X+CItigHQ==", + "version": "8.4.0-18161598994", + "resolved": "https://registry.npmjs.org/@alfresco/eslint-plugin-eslint-angular/-/eslint-plugin-eslint-angular-8.4.0-18161598994.tgz", + "integrity": "sha512-KgdUKjNJ8dCj36yyhpDItoNgNiwrfjU7VwmrXU0vk8gT3yDRhTL3UTYF+lAY4FYIqzQTKSU+LCUfUTSYXwcxsw==", "license": "Apache-2.0" }, "node_modules/@alfresco/js-api": { - "version": "9.4.0-18010361913", - "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-9.4.0-18010361913.tgz", - "integrity": "sha512-HD0nC60f84w43cX4PGawNRvlb25X3aC9RSUrGEiH8SIjJaD730D1yixx3Ywg7B3PQgoeImb2lv7DQHSGwBAD/A==", + "version": "9.4.0-18161598994", + "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-9.4.0-18161598994.tgz", + "integrity": "sha512-BIVuqXpup0P/WjgfEIt2AeXxHmWsMDXHgXXRA6+0f22iXIMIbF3h+jnKLX3Zp+bFjfy/fZt0AVWmHdMNcNztHQ==", "license": "Apache-2.0", "dependencies": { "eventemitter3": "^5.0.1", @@ -28891,6 +28891,7 @@ "version": "9.0.2", "resolved": "https://registry.npmjs.org/superagent/-/superagent-9.0.2.tgz", "integrity": "sha512-xuW7dzkUpcJq7QnhOsnNUgtYp3xRwpt2F7abdRYIpCsAt0hhUqia0EdxyXZQQpNmGtsCzYHryaKSV3q3GJnq7w==", + "deprecated": "Please upgrade to superagent v10.2.2+, see release notes at https://github.com/forwardemail/superagent/releases/tag/v10.2.2 - maintenance is supported by Forward Email @ https://forwardemail.net", "license": "MIT", "dependencies": { "component-emitter": "^1.3.0", diff --git a/package.json b/package.json index 92ea6bd14..b0d312883 100644 --- a/package.json +++ b/package.json @@ -40,11 +40,11 @@ }, "private": true, "dependencies": { - "@alfresco/adf-content-services": "8.4.0-18010361913", - "@alfresco/adf-core": "8.4.0-18010361913", - "@alfresco/adf-extensions": "8.4.0-18010361913", - "@alfresco/eslint-plugin-eslint-angular": "8.4.0-18010361913", - "@alfresco/js-api": "9.4.0-18010361913", + "@alfresco/adf-content-services": "8.4.0-18161598994", + "@alfresco/adf-core": "8.4.0-18161598994", + "@alfresco/adf-extensions": "8.4.0-18161598994", + "@alfresco/eslint-plugin-eslint-angular": "8.4.0-18161598994", + "@alfresco/js-api": "9.4.0-18161598994", "@angular/animations": "19.2.6", "@angular/cdk": "19.2.9", "@angular/common": "19.2.6", @@ -77,7 +77,7 @@ "zone.js": "0.15.0" }, "devDependencies": { - "@alfresco/adf-cli": "8.4.0-18010361913", + "@alfresco/adf-cli": "8.4.0-18161598994", "@angular-devkit/build-angular": "19.2.15", "@angular-devkit/core": "19.2.7", "@angular-devkit/schematics": "19.2.7", diff --git a/projects/aca-content/src/lib/ui/custom-theme.scss b/projects/aca-content/src/lib/ui/custom-theme.scss index 4c8297bc8..119c29546 100644 --- a/projects/aca-content/src/lib/ui/custom-theme.scss +++ b/projects/aca-content/src/lib/ui/custom-theme.scss @@ -1,9 +1,11 @@ /* stylelint-disable value-keyword-case */ @use '@angular/material' as mat; +@use '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme' as datetimepicker-theme; @import './overrides/adf-style-fixes.theme'; @import './overrides/adf-pagination.theme'; @import './overrides/ay11'; @import './overrides/adf-about.theme'; +@import './overrides/adf-variables'; @import './colors'; $mat-primary-palette: mat.m2-define-palette($aca-primary-blue, A100); @@ -37,7 +39,8 @@ $custom-theme: mat.m2-define-light-theme( @mixin custom-theme($theme) { @include mat.all-component-themes($theme); - @include adf-core-theme($theme); + @include provide-adf-variables($theme); + @include datetimepicker-theme.mat-datetimepicker-theme($theme); @include adf-style-fixes($theme); @include adf-pagination-theme($theme); @include ay11-theme; diff --git a/projects/aca-content/src/lib/ui/overrides/adf-variables.scss b/projects/aca-content/src/lib/ui/overrides/adf-variables.scss new file mode 100644 index 000000000..c24c9b37f --- /dev/null +++ b/projects/aca-content/src/lib/ui/overrides/adf-variables.scss @@ -0,0 +1,105 @@ +@use '@alfresco/adf-core/theming' as adf-core; +@use '@angular/material' as mat; +/* stylelint-disable scss/no-global-function-names */ + +@mixin provide-adf-variables($theme) { + $foreground: map-get($theme, foreground); + $background: map-get($theme, background); + $warn: map-get($theme, warn); + $accent: map-get($theme, accent); + $primary: map-get($theme, primary); + $typography: map-get($theme, typography); + + // map SCSS variables to expose as CSS variables + $defaults: ( + // theme colors + --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.m2-font-family($typography), + --theme-font-weight: normal, + --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: 24px, + --theme-adf-picture-1-font-size: 16px, + --theme-adf-task-footer-font-size: 12px, + --theme-adf-task-title-font-size: 14px, + // specific colors + --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: 8px, + // components + --adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12), + --adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05), + --adf-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698), + --adf-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7), + --adf-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24), + --adf-metadata-property-panel-title-color: rgb(33, 33, 33), + --adf-error-color: #ba1b1b, + --adf-secondary-button-background: #2121210d, + --adf-secondary-modal-text-color: #212121, + --adf-disabled-button-background: rgba(0, 0, 0, 0.12), + --adf-chip-border-color: #757575, + --adf-sidenav-active-text-color: rgba(0, 48, 100, 1) + ); + + // propagates SCSS variables into the CSS variables scope + :root { + @each $name, $value in $defaults { + #{$name}: #{$value}; + } + } + + @include adf-core.globals; +} diff --git a/projects/aca-content/src/lib/ui/theme.scss b/projects/aca-content/src/lib/ui/theme.scss index e545a43f5..744d02fc8 100644 --- a/projects/aca-content/src/lib/ui/theme.scss +++ b/projects/aca-content/src/lib/ui/theme.scss @@ -1,6 +1,6 @@ @use '@angular/material' as mat; @use './mat-selectors' as ms; -@import '@alfresco/adf-core/theming'; +@use '@alfresco/adf-core/theming' as adf-core; @import './custom-theme'; @import './variables/variables'; @include custom-theme($custom-theme);