@alfresco/adf-core 8.4.0-17917598952 → 8.4.0-17970935735

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.
@@ -23,100 +23,193 @@
23
23
  $typography: map-get($theme, typography);
24
24
 
25
25
  // map SCSS variables to expose as CSS variables
26
- $defaults: (
26
+ :root {
27
27
  // theme colors
28
- --theme-primary-color: mat.m2-get-color-from-palette($primary),
29
- --theme-primary-color-default-contrast: mat.m2-get-color-from-palette($primary, default-contrast),
30
- --theme-header-text-color: mat.m2-get-color-from-palette($primary, default-contrast),
31
- --adf-theme-primary-50: mat.m2-get-color-from-palette($primary, 50),
32
- --adf-theme-primary-100: mat.m2-get-color-from-palette($primary, 100),
33
- --adf-theme-primary-300: mat.m2-get-color-from-palette($primary, 300),
34
- --adf-theme-primary-900: mat.m2-get-color-from-palette($primary, 900),
35
- --theme-warn-color: mat.m2-get-color-from-palette($warn),
36
- --theme-warn-color-a700: mat.m2-get-color-from-palette($warn, A700),
37
- --theme-warn-color-default-contrast: mat.m2-get-color-from-palette($warn, default-contrast),
38
- --theme-accent-color: mat.m2-get-color-from-palette($accent),
39
- --theme-accent-color-a200: mat.m2-get-color-from-palette($accent, A200),
40
- --theme-accent-color-default-contrast: mat.m2-get-color-from-palette($accent, default-contrast),
41
- --theme-accent-500: mat.m2-get-color-from-palette($accent, 500),
42
- --adf-theme-foreground-base-color: mat.m2-get-color-from-palette($foreground, base),
43
- --adf-theme-foreground-base-color-065: mat.m2-get-color-from-palette($foreground, base, 0.65),
44
- --adf-theme-foreground-base-color-045: mat.m2-get-color-from-palette($foreground, base, 0.45),
45
- --adf-theme-foreground-disabled-text-color: mat.m2-get-color-from-palette($foreground, disabled-text),
46
- --adf-theme-foreground-divider-color: mat.m2-get-color-from-palette($foreground, divider),
47
- --adf-theme-foreground-icon-color: mat.m2-get-color-from-palette($foreground, icon),
48
- --adf-theme-foreground-icon-color-054: mat.m2-get-color-from-palette($foreground, icon, 0.54),
49
- --adf-theme-foreground-secondary-text-color: mat.m2-get-color-from-palette($foreground, secondary-text),
50
- --adf-theme-foreground-text-color: mat.m2-get-color-from-palette($foreground, text),
51
- --adf-theme-foreground-text-color-087: mat.m2-get-color-from-palette($foreground, text, 0.87),
52
- --adf-theme-foreground-text-color-075: mat.m2-get-color-from-palette($foreground, text, 0.75),
53
- --adf-theme-foreground-text-color-064: mat.m2-get-color-from-palette($foreground, text, 0.64),
54
- --adf-theme-foreground-text-color-054: mat.m2-get-color-from-palette($foreground, text, 0.54),
55
- --adf-theme-foreground-text-color-040: mat.m2-get-color-from-palette($foreground, text, 0.4),
56
- --adf-theme-foreground-text-color-027: mat.m2-get-color-from-palette($foreground, text, 0.27),
57
- --adf-theme-foreground-text-color-025: mat.m2-get-color-from-palette($foreground, text, 0.25),
58
- --adf-theme-foreground-text-color-014: mat.m2-get-color-from-palette($foreground, text, 0.14),
59
- --adf-theme-foreground-text-color-007: mat.m2-get-color-from-palette($foreground, text, 0.07),
60
- --adf-theme-background-card-color: mat.m2-get-color-from-palette($background, card),
61
- --adf-theme-background-card-color-087: mat.m2-get-color-from-palette($background, card, 0.87),
62
- --theme-background-color: mat.m2-get-color-from-palette($background, background),
63
- --adf-theme-background-dialog-color: mat.m2-get-color-from-palette($background, dialog),
64
- --adf-theme-background-hover-color: mat.m2-get-color-from-palette($background, hover),
65
- --adf-theme-background-selected-button-color: mat.m2-get-color-from-palette($background, selected-button),
66
- --adf-theme-background-status-bar-color: mat.m2-get-color-from-palette($background, status-bar),
67
- --adf-theme-background-unselected-chip-color: mat.m2-get-color-from-palette($background, unselected-chip),
28
+ --theme-primary-color: #{mat.m2-get-color-from-palette($primary)};
29
+ --theme-primary-color-default-contrast: #{mat.m2-get-color-from-palette($primary, default-contrast)};
30
+ --theme-header-text-color: #{mat.m2-get-color-from-palette($primary, default-contrast)};
31
+ --adf-theme-primary-50: #{mat.m2-get-color-from-palette($primary, 50)};
32
+ --adf-theme-primary-100: #{mat.m2-get-color-from-palette($primary, 100)};
33
+ --adf-theme-primary-300: #{mat.m2-get-color-from-palette($primary, 300)};
34
+ --adf-theme-primary-900: #{mat.m2-get-color-from-palette($primary, 900)};
35
+ --theme-warn-color: #{mat.m2-get-color-from-palette($warn)};
36
+ --theme-warn-color-a700: #{mat.m2-get-color-from-palette($warn, A700)};
37
+ --theme-warn-color-default-contrast: #{mat.m2-get-color-from-palette($warn, default-contrast)};
38
+ --theme-accent-color: #{mat.m2-get-color-from-palette($accent)};
39
+ --theme-accent-color-a200: #{mat.m2-get-color-from-palette($accent, A200)};
40
+ --theme-accent-color-default-contrast: #{mat.m2-get-color-from-palette($accent, default-contrast)};
41
+ --theme-accent-500: #{mat.m2-get-color-from-palette($accent, 500)};
42
+ --adf-theme-foreground-base-color: #{mat.m2-get-color-from-palette($foreground, base)};
43
+ --adf-theme-foreground-base-color-065: #{mat.m2-get-color-from-palette($foreground, base, 0.65)};
44
+ --adf-theme-foreground-base-color-045: #{mat.m2-get-color-from-palette($foreground, base, 0.45)};
45
+ --adf-theme-foreground-disabled-text-color: #{mat.m2-get-color-from-palette($foreground, disabled-text)};
46
+ --adf-theme-foreground-divider-color: #{mat.m2-get-color-from-palette($foreground, divider)};
47
+ --adf-theme-foreground-icon-color: #{mat.m2-get-color-from-palette($foreground, icon)};
48
+ --adf-theme-foreground-icon-color-054: #{mat.m2-get-color-from-palette($foreground, icon, 0.54)};
49
+ --adf-theme-foreground-secondary-text-color: #{mat.m2-get-color-from-palette($foreground, secondary-text)};
50
+ --adf-theme-foreground-text-color: #{mat.m2-get-color-from-palette($foreground, text)};
51
+ --adf-theme-foreground-text-color-087: #{mat.m2-get-color-from-palette($foreground, text, 0.87)};
52
+ --adf-theme-foreground-text-color-075: #{mat.m2-get-color-from-palette($foreground, text, 0.75)};
53
+ --adf-theme-foreground-text-color-064: #{mat.m2-get-color-from-palette($foreground, text, 0.64)};
54
+ --adf-theme-foreground-text-color-054: #{mat.m2-get-color-from-palette($foreground, text, 0.54)};
55
+ --adf-theme-foreground-text-color-040: #{mat.m2-get-color-from-palette($foreground, text, 0.4)};
56
+ --adf-theme-foreground-text-color-027: #{mat.m2-get-color-from-palette($foreground, text, 0.27)};
57
+ --adf-theme-foreground-text-color-025: #{mat.m2-get-color-from-palette($foreground, text, 0.25)};
58
+ --adf-theme-foreground-text-color-014: #{mat.m2-get-color-from-palette($foreground, text, 0.14)};
59
+ --adf-theme-foreground-text-color-007: #{mat.m2-get-color-from-palette($foreground, text, 0.07)};
60
+ --adf-theme-background-card-color: #{mat.m2-get-color-from-palette($background, card)};
61
+ --adf-theme-background-card-color-087: #{mat.m2-get-color-from-palette($background, card, 0.87)};
62
+ --theme-background-color: #{mat.m2-get-color-from-palette($background, background)};
63
+ --adf-theme-background-dialog-color: #{mat.m2-get-color-from-palette($background, dialog)};
64
+ --adf-theme-background-hover-color: #{mat.m2-get-color-from-palette($background, hover)};
65
+ --adf-theme-background-selected-button-color: #{mat.m2-get-color-from-palette($background, selected-button)};
66
+ --adf-theme-background-status-bar-color: #{mat.m2-get-color-from-palette($background, status-bar)};
67
+ --adf-theme-background-unselected-chip-color: #{mat.m2-get-color-from-palette($background, unselected-chip)};
68
+
68
69
  // typography
69
- --theme-font-family: mat.m2-font-family($typography),
70
- --theme-font-weight: normal,
71
- --theme-body-1-font-size: mat.m2-font-size($typography, body-2),
72
- --theme-body-2-font-size: mat.m2-font-size($typography, subtitle-2),
73
- --theme-body-1-line-height: mat.m2-line-height($typography, body-2),
74
- --theme-display-1-font-size: mat.m2-font-size($typography, headline-4),
75
- --theme-display-3-font-size: mat.m2-font-size($typography, headline-2),
76
- --theme-display-4-font-size: mat.m2-font-size($typography, headline-1),
77
- --theme-caption-font-size: mat.m2-font-size($typography, caption),
78
- --theme-title-font-size: mat.m2-font-size($typography, headline-6),
79
- --theme-subheading-1-font-size: mat.m2-font-size($typography, body-1),
80
- --theme-subheading-2-font-size: mat.m2-font-size($typography, subtitle-1),
81
- --theme-button-font-size: mat.m2-font-size($typography, button),
82
- --theme-headline-font-size: mat.m2-font-size($typography, headline-5),
83
- --theme-headline-line-height: mat.m2-line-height($typography, headline-5),
84
- --theme-adf-icon-1-font-size: map-get($custom-css-variables, 'theme-adf-icon-1-font-size'),
85
- --theme-adf-picture-1-font-size: map-get($custom-css-variables, 'theme-adf-picture-1-font-size'),
86
- --theme-adf-task-footer-font-size: map-get($custom-css-variables, 'theme-adf-task-footer-font-size'),
87
- --theme-adf-task-title-font-size: map-get($custom-css-variables, 'theme-adf-task-title-font-size'),
70
+ --theme-font-family: #{mat.m2-font-family($typography)};
71
+ --theme-font-weight: normal;
72
+ --theme-body-1-font-size: #{mat.m2-font-size($typography, body-2)};
73
+ --theme-body-2-font-size: #{mat.m2-font-size($typography, subtitle-2)};
74
+ --theme-body-1-line-height: #{mat.m2-line-height($typography, body-2)};
75
+ --theme-display-1-font-size: #{mat.m2-font-size($typography, headline-4)};
76
+ --theme-display-3-font-size: #{mat.m2-font-size($typography, headline-2)};
77
+ --theme-display-4-font-size: #{mat.m2-font-size($typography, headline-1)};
78
+ --theme-caption-font-size: #{mat.m2-font-size($typography, caption)};
79
+ --theme-title-font-size: #{mat.m2-font-size($typography, headline-6)};
80
+ --theme-subheading-1-font-size: #{mat.m2-font-size($typography, body-1)};
81
+ --theme-subheading-2-font-size: #{mat.m2-font-size($typography, subtitle-1)};
82
+ --theme-button-font-size: #{mat.m2-font-size($typography, button)};
83
+ --theme-headline-font-size: #{mat.m2-font-size($typography, headline-5)};
84
+ --theme-headline-line-height: #{mat.m2-line-height($typography, headline-5)};
85
+ --theme-adf-icon-1-font-size: #{map-get($custom-css-variables, 'theme-adf-icon-1-font-size')};
86
+ --theme-adf-picture-1-font-size: #{map-get($custom-css-variables, 'theme-adf-picture-1-font-size')};
87
+ --theme-adf-task-footer-font-size: #{map-get($custom-css-variables, 'theme-adf-task-footer-font-size')};
88
+ --theme-adf-task-title-font-size: #{map-get($custom-css-variables, 'theme-adf-task-title-font-size')};
89
+
88
90
  // specific colors
89
- --adf-theme-mat-grey-color-a200: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 'A200'),
90
- --adf-theme-mat-grey-color-a400: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 'A400'),
91
- --adf-theme-mat-grey-color-50: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 50),
91
+ --adf-theme-mat-grey-color-a200: #{mat.m2-get-color-from-palette(mat.$m2-grey-palette, 'A200')};
92
+ --adf-theme-mat-grey-color-a400: #{mat.m2-get-color-from-palette(mat.$m2-grey-palette, 'A400')};
93
+ --adf-theme-mat-grey-color-50: #{mat.m2-get-color-from-palette(mat.$m2-grey-palette, 50)};
94
+
92
95
  // spacing
93
- --adf-theme-spacing: map-get($custom-css-variables, 'theme-adf-spacing'),
96
+ --adf-theme-spacing: #{map-get($custom-css-variables, 'theme-adf-spacing')};
97
+
94
98
  // components
95
- --adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12),
96
- --adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05),
97
- --adf-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698),
98
- --adf-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7),
99
- --adf-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24),
100
- --adf-metadata-property-panel-title-color: rgb(33, 33, 33),
101
- --adf-error-color: #ba1b1b,
102
- --adf-secondary-button-background: #2121210d,
103
- --adf-secondary-modal-text-color: #212121,
104
- --adf-disabled-button-background: rgba(0, 0, 0, 0.12),
105
- --adf-chip-border-color: #757575,
106
- --adf-sidenav-active-text-color: rgba(0, 48, 100, 1)
107
- );
108
-
109
- // propagates SCSS variables into the CSS variables scope
110
- :root {
111
- @each $name, $value in $defaults {
112
- #{$name}: #{$value};
113
- }
99
+ --adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12);
100
+ --adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05);
101
+ --adf-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698);
102
+ --adf-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7);
103
+ --adf-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24);
104
+ --adf-metadata-property-panel-title-color: rgb(33, 33, 33);
105
+ --adf-error-color: #ba1b1b;
106
+ --adf-secondary-button-background: #2121210d;
107
+ --adf-secondary-modal-text-color: #212121;
108
+ --adf-disabled-button-background: rgba(0, 0, 0, 0.12);
109
+ --adf-chip-border-color: #757575;
110
+ --adf-sidenav-active-text-color: rgba(0, 48, 100, 1);
114
111
  }
115
112
 
116
113
  @include datetimepicker-theme.mat-datetimepicker-theme($theme);
117
114
  @include adf-material-theme;
118
115
  }
119
116
 
117
+ @mixin provide-md3-adf-core-theme() {
118
+ // Map all variables defined in adf-core-theme to MD3 system variables
119
+ // Colors
120
+ /* stylelint-disable-next-line no-duplicate-selectors */
121
+ :root {
122
+ // Primary and accents
123
+ --theme-primary-color: var(--mat-sys-primary);
124
+ --theme-primary-color-default-contrast: var(--mat-sys-on-primary);
125
+ --theme-header-text-color: var(--mat-sys-on-primary);
126
+
127
+ // There is no direct shade scale in MD3; use suitable references
128
+ --adf-theme-primary-50: var(--mat-sys-primary-fixed);
129
+ --adf-theme-primary-100: var(--mat-sys-primary-fixed-dim);
130
+ --adf-theme-primary-300: var(--mat-sys-primary);
131
+ --adf-theme-primary-900: var(--mat-sys-on-primary-container);
132
+ --theme-warn-color: var(--mat-sys-error);
133
+ --theme-warn-color-a700: var(--mat-sys-error);
134
+ --theme-warn-color-default-contrast: var(--mat-sys-on-error);
135
+
136
+ // ADF uses "accent"; map to MD3 secondary
137
+ --theme-accent-color: var(--mat-sys-secondary);
138
+ --theme-accent-color-a200: var(--mat-sys-secondary);
139
+ --theme-accent-color-default-contrast: var(--mat-sys-on-secondary);
140
+ --theme-accent-500: var(--mat-sys-secondary);
141
+
142
+ // Foreground mappings
143
+ --adf-theme-foreground-base-color: var(--mat-sys-on-surface);
144
+ --adf-theme-foreground-base-color-065: color-mix(in srgb, var(--mat-sys-on-surface) 65%, transparent);
145
+ --adf-theme-foreground-base-color-045: color-mix(in srgb, var(--mat-sys-on-surface) 45%, transparent);
146
+ --adf-theme-foreground-disabled-text-color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);
147
+ --adf-theme-foreground-divider-color: color-mix(in srgb, var(--mat-sys-on-surface-variant) 12%, transparent);
148
+ --adf-theme-foreground-icon-color: var(--mat-sys-on-surface-variant);
149
+ --adf-theme-foreground-icon-color-054: color-mix(in srgb, var(--mat-sys-on-surface) 54%, transparent);
150
+ --adf-theme-foreground-secondary-text-color: var(--mat-sys-on-surface-variant);
151
+ --adf-theme-foreground-text-color: var(--mat-sys-on-surface);
152
+ --adf-theme-foreground-text-color-087: color-mix(in srgb, var(--mat-sys-on-surface) 87%, transparent);
153
+ --adf-theme-foreground-text-color-075: color-mix(in srgb, var(--mat-sys-on-surface) 75%, transparent);
154
+ --adf-theme-foreground-text-color-064: color-mix(in srgb, var(--mat-sys-on-surface) 64%, transparent);
155
+ --adf-theme-foreground-text-color-054: color-mix(in srgb, var(--mat-sys-on-surface) 54%, transparent);
156
+ --adf-theme-foreground-text-color-040: color-mix(in srgb, var(--mat-sys-on-surface) 40%, transparent);
157
+ --adf-theme-foreground-text-color-027: color-mix(in srgb, var(--mat-sys-on-surface) 27%, transparent);
158
+ --adf-theme-foreground-text-color-025: color-mix(in srgb, var(--mat-sys-on-surface) 25%, transparent);
159
+ --adf-theme-foreground-text-color-014: color-mix(in srgb, var(--mat-sys-on-surface) 14%, transparent);
160
+ --adf-theme-foreground-text-color-007: color-mix(in srgb, var(--mat-sys-on-surface) 7%, transparent);
161
+
162
+ // Backgrounds
163
+ --adf-theme-background-card-color: var(--mat-sys-surface);
164
+ --adf-theme-background-card-color-087: color-mix(in srgb, var(--mat-sys-surface) 87%, transparent);
165
+ --theme-background-color: var(--mat-sys-surface);
166
+ --adf-theme-background-dialog-color: var(--mat-sys-surface-container-high);
167
+ --adf-theme-background-hover-color: color-mix(in srgb, var(--mat-sys-on-surface) 8%, var(--mat-sys-surface));
168
+ --adf-theme-background-selected-button-color: var(--mat-sys-surface-container);
169
+ --adf-theme-background-status-bar-color: var(--mat-sys-surface);
170
+ --adf-theme-background-unselected-chip-color: var(--mat-sys-surface-variant);
171
+
172
+ // Typography (MD3 system-level variables)
173
+ --theme-font-family: var(--mat-sys-body-medium-font);
174
+ --theme-font-weight: var(--mat-sys-body-medium-weight);
175
+ --theme-body-1-font-size: var(--mat-sys-body-medium-size);
176
+ --theme-body-2-font-size: var(--mat-sys-title-small-size);
177
+ --theme-body-1-line-height: var(--mat-sys-body-medium-line-height);
178
+ --theme-display-1-font-size: var(--mat-sys-headline-small-size);
179
+ --theme-display-3-font-size: var(--mat-sys-display-medium-size);
180
+ --theme-display-4-font-size: var(--mat-sys-display-large-size);
181
+ --theme-caption-font-size: var(--mat-sys-body-small-size);
182
+ --theme-title-font-size: var(--mat-sys-title-medium-size);
183
+ --theme-subheading-1-font-size: var(--mat-sys-body-large-size);
184
+ --theme-subheading-2-font-size: var(--mat-sys-title-small-size);
185
+ --theme-button-font-size: var(--mat-sys-label-large-size);
186
+ --theme-headline-font-size: var(--mat-sys-headline-small-size);
187
+ --theme-headline-line-height: var(--mat-sys-headline-small-line-height);
188
+
189
+ // Specific greys (approximate with neutral palette tokens)
190
+ --adf-theme-mat-grey-color-a200: var(--mat-sys-surface-variant);
191
+ --adf-theme-mat-grey-color-a400: var(--mat-sys-outline);
192
+ --adf-theme-mat-grey-color-50: var(--mat-sys-surface);
193
+
194
+ // Spacing (keep as-is; no MD3 token)
195
+ // --adf-theme-spacing remains defined via $adf-custom-theme-sizes when using adf-core-theme
196
+
197
+ // Components
198
+ --adf-metadata-property-panel-border-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);
199
+ --adf-metadata-buttons-background-color: color-mix(in srgb, var(--mat-sys-on-surface) 5%, var(--mat-sys-surface));
200
+ --adf-metadata-action-button-clear-color: color-mix(in srgb, var(--mat-sys-on-surface) 70%, transparent);
201
+ --adf-metadata-property-panel-text-color: color-mix(in srgb, var(--mat-sys-on-surface) 70%, transparent);
202
+ --adf-metadata-property-panel-label-color: color-mix(in srgb, var(--mat-sys-on-surface) 24%, transparent);
203
+ --adf-metadata-property-panel-title-color: var(--mat-sys-on-surface);
204
+ --adf-error-color: var(--mat-sys-error);
205
+ --adf-secondary-button-background: color-mix(in srgb, var(--mat-sys-on-surface) 5%, transparent);
206
+ --adf-secondary-modal-text-color: var(--mat-sys-on-surface);
207
+ --adf-disabled-button-background: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);
208
+ --adf-chip-border-color: var(--mat-sys-outline);
209
+ --adf-sidenav-active-text-color: var(--mat-sys-primary);
210
+ }
211
+ }
212
+
120
213
  $adf-custom-theme-sizes: (
121
214
  'theme-adf-icon-1-font-size': 17px,
122
215
  'theme-adf-picture-1-font-size': 18px,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@alfresco/adf-core",
3
3
  "description": "Alfresco ADF core",
4
- "version": "8.4.0-17917598952",
4
+ "version": "8.4.0-17970935735",
5
5
  "author": "Hyland Software, Inc. and its affiliates",
6
6
  "repository": {
7
7
  "type": "git",
@@ -63,8 +63,8 @@
63
63
  "@angular/router": ">=16.0.0",
64
64
  "@mat-datetimepicker/core": ">=12.0.1",
65
65
  "@ngx-translate/core": ">=16.0.0",
66
- "@alfresco/js-api": ">=9.4.0-17917598952",
67
- "@alfresco/adf-extensions": ">=8.4.0-17917598952",
66
+ "@alfresco/js-api": ">=9.4.0-17970935735",
67
+ "@alfresco/adf-extensions": ">=8.4.0-17970935735",
68
68
  "minimatch": ">=10.0.0",
69
69
  "pdfjs-dist": ">=3.3.122"
70
70
  },