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

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,193 +23,100 @@
23
23
  $typography: map-get($theme, typography);
24
24
 
25
25
  // map SCSS variables to expose as CSS variables
26
- :root {
26
+ $defaults: (
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)};
68
-
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),
69
68
  // typography
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
-
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'),
90
88
  // specific colors
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
-
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),
95
92
  // spacing
96
- --adf-theme-spacing: #{map-get($custom-css-variables, 'theme-adf-spacing')};
97
-
93
+ --adf-theme-spacing: map-get($custom-css-variables, 'theme-adf-spacing'),
98
94
  // components
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);
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
+ }
111
114
  }
112
115
 
113
116
  @include datetimepicker-theme.mat-datetimepicker-theme($theme);
114
117
  @include adf-material-theme;
115
118
  }
116
119
 
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
-
213
120
  $adf-custom-theme-sizes: (
214
121
  'theme-adf-icon-1-font-size': 17px,
215
122
  '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-17970935735",
4
+ "version": "8.4.0-17991598113",
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-17970935735",
67
- "@alfresco/adf-extensions": ">=8.4.0-17970935735",
66
+ "@alfresco/js-api": ">=9.4.0-17991598113",
67
+ "@alfresco/adf-extensions": ">=8.4.0-17991598113",
68
68
  "minimatch": ">=10.0.0",
69
69
  "pdfjs-dist": ">=3.3.122"
70
70
  },