Skip to content

Commit ddf3aa4

Browse files
MichalKinasMichalKinas
authored
[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
1 parent 6b9ebad commit ddf3aa4

File tree

5 files changed

+147
-38
lines changed

5 files changed

+147
-38
lines changed

‎package-lock.json‎

Lines changed: 31 additions & 30 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,11 @@
4040
},
4141
"private": true,
4242
"dependencies": {
43-
"@alfresco/adf-content-services": "8.4.0-18010361913",
44-
"@alfresco/adf-core": "8.4.0-18010361913",
45-
"@alfresco/adf-extensions": "8.4.0-18010361913",
46-
"@alfresco/eslint-plugin-eslint-angular": "8.4.0-18010361913",
47-
"@alfresco/js-api": "9.4.0-18010361913",
43+
"@alfresco/adf-content-services": "8.4.0-18161598994",
44+
"@alfresco/adf-core": "8.4.0-18161598994",
45+
"@alfresco/adf-extensions": "8.4.0-18161598994",
46+
"@alfresco/eslint-plugin-eslint-angular": "8.4.0-18161598994",
47+
"@alfresco/js-api": "9.4.0-18161598994",
4848
"@angular/animations": "19.2.6",
4949
"@angular/cdk": "19.2.9",
5050
"@angular/common": "19.2.6",
@@ -77,7 +77,7 @@
7777
"zone.js": "0.15.0"
7878
},
7979
"devDependencies": {
80-
"@alfresco/adf-cli": "8.4.0-18010361913",
80+
"@alfresco/adf-cli": "8.4.0-18161598994",
8181
"@angular-devkit/build-angular": "19.2.15",
8282
"@angular-devkit/core": "19.2.7",
8383
"@angular-devkit/schematics": "19.2.7",

‎projects/aca-content/src/lib/ui/custom-theme.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
/* stylelint-disable value-keyword-case */
22
@use '@angular/material' as mat;
3+
@use '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme' as datetimepicker-theme;
34
@import './overrides/adf-style-fixes.theme';
45
@import './overrides/adf-pagination.theme';
56
@import './overrides/ay11';
67
@import './overrides/adf-about.theme';
8+
@import './overrides/adf-variables';
79
@import './colors';
810

911
$mat-primary-palette: mat.m2-define-palette($aca-primary-blue, A100);
@@ -37,7 +39,8 @@ $custom-theme: mat.m2-define-light-theme(
3739

3840
@mixin custom-theme($theme) {
3941
@include mat.all-component-themes($theme);
40-
@include adf-core-theme($theme);
42+
@include provide-adf-variables($theme);
43+
@include datetimepicker-theme.mat-datetimepicker-theme($theme);
4144
@include adf-style-fixes($theme);
4245
@include adf-pagination-theme($theme);
4346
@include ay11-theme;

‎projects/aca-content/src/lib/ui/overrides/adf-variables.scss‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
@use '@alfresco/adf-core/theming' as adf-core;
2+
@use '@angular/material' as mat;
3+
/* stylelint-disable scss/no-global-function-names */
4+
5+
@mixin provide-adf-variables($theme) {
6+
$foreground: map-get($theme, foreground);
7+
$background: map-get($theme, background);
8+
$warn: map-get($theme, warn);
9+
$accent: map-get($theme, accent);
10+
$primary: map-get($theme, primary);
11+
$typography: map-get($theme, typography);
12+
13+
// map SCSS variables to expose as CSS variables
14+
$defaults: (
15+
// theme colors
16+
--theme-primary-color: mat.m2-get-color-from-palette($primary),
17+
--theme-primary-color-default-contrast: mat.m2-get-color-from-palette($primary, default-contrast),
18+
--theme-header-text-color: mat.m2-get-color-from-palette($primary, default-contrast),
19+
--adf-theme-primary-50: mat.m2-get-color-from-palette($primary, 50),
20+
--adf-theme-primary-100: mat.m2-get-color-from-palette($primary, 100),
21+
--adf-theme-primary-300: mat.m2-get-color-from-palette($primary, 300),
22+
--adf-theme-primary-900: mat.m2-get-color-from-palette($primary, 900),
23+
--theme-warn-color: mat.m2-get-color-from-palette($warn),
24+
--theme-warn-color-a700: mat.m2-get-color-from-palette($warn, A700),
25+
--theme-warn-color-default-contrast: mat.m2-get-color-from-palette($warn, default-contrast),
26+
--theme-accent-color: mat.m2-get-color-from-palette($accent),
27+
--theme-accent-color-a200: mat.m2-get-color-from-palette($accent, A200),
28+
--theme-accent-color-default-contrast: mat.m2-get-color-from-palette($accent, default-contrast),
29+
--theme-accent-500: mat.m2-get-color-from-palette($accent, 500),
30+
--adf-theme-foreground-base-color: mat.m2-get-color-from-palette($foreground, base),
31+
--adf-theme-foreground-base-color-065: mat.m2-get-color-from-palette($foreground, base, 0.65),
32+
--adf-theme-foreground-base-color-045: mat.m2-get-color-from-palette($foreground, base, 0.45),
33+
--adf-theme-foreground-disabled-text-color: mat.m2-get-color-from-palette($foreground, disabled-text),
34+
--adf-theme-foreground-divider-color: mat.m2-get-color-from-palette($foreground, divider),
35+
--adf-theme-foreground-icon-color: mat.m2-get-color-from-palette($foreground, icon),
36+
--adf-theme-foreground-icon-color-054: mat.m2-get-color-from-palette($foreground, icon, 0.54),
37+
--adf-theme-foreground-secondary-text-color: mat.m2-get-color-from-palette($foreground, secondary-text),
38+
--adf-theme-foreground-text-color: mat.m2-get-color-from-palette($foreground, text),
39+
--adf-theme-foreground-text-color-087: mat.m2-get-color-from-palette($foreground, text, 0.87),
40+
--adf-theme-foreground-text-color-075: mat.m2-get-color-from-palette($foreground, text, 0.75),
41+
--adf-theme-foreground-text-color-064: mat.m2-get-color-from-palette($foreground, text, 0.64),
42+
--adf-theme-foreground-text-color-054: mat.m2-get-color-from-palette($foreground, text, 0.54),
43+
--adf-theme-foreground-text-color-040: mat.m2-get-color-from-palette($foreground, text, 0.4),
44+
--adf-theme-foreground-text-color-027: mat.m2-get-color-from-palette($foreground, text, 0.27),
45+
--adf-theme-foreground-text-color-025: mat.m2-get-color-from-palette($foreground, text, 0.25),
46+
--adf-theme-foreground-text-color-014: mat.m2-get-color-from-palette($foreground, text, 0.14),
47+
--adf-theme-foreground-text-color-007: mat.m2-get-color-from-palette($foreground, text, 0.07),
48+
--adf-theme-background-card-color: mat.m2-get-color-from-palette($background, card),
49+
--adf-theme-background-card-color-087: mat.m2-get-color-from-palette($background, card, 0.87),
50+
--theme-background-color: mat.m2-get-color-from-palette($background, background),
51+
--adf-theme-background-dialog-color: mat.m2-get-color-from-palette($background, dialog),
52+
--adf-theme-background-hover-color: mat.m2-get-color-from-palette($background, hover),
53+
--adf-theme-background-selected-button-color: mat.m2-get-color-from-palette($background, selected-button),
54+
--adf-theme-background-status-bar-color: mat.m2-get-color-from-palette($background, status-bar),
55+
--adf-theme-background-unselected-chip-color: mat.m2-get-color-from-palette($background, unselected-chip),
56+
// typography
57+
--theme-font-family: mat.m2-font-family($typography),
58+
--theme-font-weight: normal,
59+
--theme-body-1-font-size: mat.m2-font-size($typography, body-2),
60+
--theme-body-2-font-size: mat.m2-font-size($typography, subtitle-2),
61+
--theme-body-1-line-height: mat.m2-line-height($typography, body-2),
62+
--theme-display-1-font-size: mat.m2-font-size($typography, headline-4),
63+
--theme-display-3-font-size: mat.m2-font-size($typography, headline-2),
64+
--theme-display-4-font-size: mat.m2-font-size($typography, headline-1),
65+
--theme-caption-font-size: mat.m2-font-size($typography, caption),
66+
--theme-title-font-size: mat.m2-font-size($typography, headline-6),
67+
--theme-subheading-1-font-size: mat.m2-font-size($typography, body-1),
68+
--theme-subheading-2-font-size: mat.m2-font-size($typography, subtitle-1),
69+
--theme-button-font-size: mat.m2-font-size($typography, button),
70+
--theme-headline-font-size: mat.m2-font-size($typography, headline-5),
71+
--theme-headline-line-height: mat.m2-line-height($typography, headline-5),
72+
--theme-adf-icon-1-font-size: 24px,
73+
--theme-adf-picture-1-font-size: 16px,
74+
--theme-adf-task-footer-font-size: 12px,
75+
--theme-adf-task-title-font-size: 14px,
76+
// specific colors
77+
--adf-theme-mat-grey-color-a200: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 'A200'),
78+
--adf-theme-mat-grey-color-a400: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 'A400'),
79+
--adf-theme-mat-grey-color-50: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 50),
80+
// spacing
81+
--adf-theme-spacing: 8px,
82+
// components
83+
--adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12),
84+
--adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05),
85+
--adf-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698),
86+
--adf-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7),
87+
--adf-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24),
88+
--adf-metadata-property-panel-title-color: rgb(33, 33, 33),
89+
--adf-error-color: #ba1b1b,
90+
--adf-secondary-button-background: #2121210d,
91+
--adf-secondary-modal-text-color: #212121,
92+
--adf-disabled-button-background: rgba(0, 0, 0, 0.12),
93+
--adf-chip-border-color: #757575,
94+
--adf-sidenav-active-text-color: rgba(0, 48, 100, 1)
95+
);
96+
97+
// propagates SCSS variables into the CSS variables scope
98+
:root {
99+
@each $name, $value in $defaults {
100+
#{$name}: #{$value};
101+
}
102+
}
103+
104+
@include adf-core.globals;
105+
}

‎projects/aca-content/src/lib/ui/theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use '@angular/material' as mat;
22
@use './mat-selectors' as ms;
3-
@import '@alfresco/adf-core/theming';
3+
@use '@alfresco/adf-core/theming' as adf-core;
44
@import './custom-theme';
55
@import './variables/variables';
66
@include custom-theme($custom-theme);

0 commit comments

Comments
 (0)