@alfresco/aca-content 7.2.0-18029543237 → 7.2.0-18165429971

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/ui/custom-theme.scss +4 -1
  3. package/ui/overrides/adf-variables.scss +105 -0
  4. package/ui/theme.scss +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfresco/aca-content",
3
- "version": "7.2.0-18029543237",
3
+ "version": "7.2.0-18165429971",
4
4
  "license": "LGPL-3.0",
5
5
  "peerDependencies": {
6
6
  "@angular/common": ">=15.2",
package/ui/custom-theme.scss CHANGED
@@ -1,9 +1,11 @@
1
1
  /* stylelint-disable value-keyword-case */
2
2
  @use '@angular/material' as mat;
3
+ @use '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme' as datetimepicker-theme;
3
4
  @import './overrides/adf-style-fixes.theme';
4
5
  @import './overrides/adf-pagination.theme';
5
6
  @import './overrides/ay11';
6
7
  @import './overrides/adf-about.theme';
8
+ @import './overrides/adf-variables';
7
9
  @import './colors';
8
10
 
9
11
  $mat-primary-palette: mat.m2-define-palette($aca-primary-blue, A100);
@@ -37,7 +39,8 @@ $custom-theme: mat.m2-define-light-theme(
37
39
 
38
40
  @mixin custom-theme($theme) {
39
41
  @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);
41
44
  @include adf-style-fixes($theme);
42
45
  @include adf-pagination-theme($theme);
43
46
  @include ay11-theme;
package/ui/overrides/adf-variables.scss ADDED
@@ -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
+ }
package/ui/theme.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use '@angular/material' as mat;
2
2
  @use './mat-selectors' as ms;
3
- @import '@alfresco/adf-core/theming';
3
+ @use '@alfresco/adf-core/theming' as adf-core;
4
4
  @import './custom-theme';
5
5
  @import './variables/variables';
6
6
  @include custom-theme($custom-theme);