inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2026-09-09 18:02:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-10448] Move theme variables from ADF to ACA (#4823)

Browse Source 
* [ACS-10448] Move theme variables from ADF to ACA

* [ACS-10448] Use latest ADF alphas
This commit is contained in:
MichalKinas
2025-10-01 16:25:57 +02:00
committed by GitHub
parent 6b9ebada30
commit ddf3aa4c3d
5 changed files with 147 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
projects/aca-content/src/lib/ui/custom-theme.scss
+4 -1
View File
@@ -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;
projects/aca-content/src/lib/ui/overrides/adf-variables.scss
+105
View File
@@ -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;
}
projects/aca-content/src/lib/ui/theme.scss
+1 -1
View File
@@ -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);