mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-10-22 15:11:57 +00:00
AAE-38524 remove adf-core-theme (#11235)
* AAE-38524 Remove theming and unused stylesheets * AAE-38524 Update the documentation * AAE-38524 Change import forwarding * AAE-38524 Rename globals mixin * AAE-38524 Apply docs suggestions
This commit is contained in:
Wojciech Duda
GitHub
@@ -32,79 +32,30 @@ an [online palette design tool](http://mcg.mbitson.com/).
|
||||
See the [Material Design Style page](https://material.io/guidelines/style/color.html#) for
|
||||
more information about color concepts.
|
||||
|
||||
## Defining a custom theme
|
||||
## Using Angular Material theming
|
||||
|
||||
When you want more customization than a pre-built theme offers, you can create your own theme file. You only need to include the packages you actually use in your application.
|
||||
ADF is based on Angular Material library, which offers solutions for theming your application with either:
|
||||
- Material Design 2 https://material.angular.dev/guide/material-2-theming
|
||||
- Material Design 3 https://material.angular.dev/guide/theming
|
||||
|
||||
```scss
|
||||
/*
|
||||
* Include only packages that you are using (and core by default)
|
||||
*/
|
||||
@use '@angular/material' as mat;
|
||||
@import '~@angular/material/theming';
|
||||
@import '~@alfresco/adf-core/theming';
|
||||
If you already setup Angular Material theming in the application you use ADF in, there is no need for taking additional steps to theme ADF components - colors, typography and other parts of the theme will be taken from your setup.
|
||||
|
||||
@include mat.core();
|
||||
## Customizing deprecated theme variables
|
||||
|
||||
$primary: mat.define-palette($alfresco-accent-orange);
|
||||
$accent: mat.define-palette($alfresco-accent-purple);
|
||||
$warn: mat.define-palette($alfresco-warn);
|
||||
$theme: mat.define-light-theme((
|
||||
color: (
|
||||
primary: $primary,
|
||||
accent: $accent,
|
||||
warn: $warn,
|
||||
),
|
||||
typography: $alfresco-typography
|
||||
));
|
||||
Currently we have an amount of custom variables around components to mange libraries look and feel consistently and globally.
|
||||
|
||||
@include angular-material-theme($theme);
|
||||
@include alfresco-material-theme($theme);
|
||||
```
|
||||
While they are getting deprecated to be replaced with [Angular Material system variables](https://material.angular.dev/guide/system-variables), for seamless integration with Angular Material's theming, you can provide values for those variables inside the `:root` element.
|
||||
|
||||
### Multiple themes
|
||||
|
||||
You can create multiple themes for your application:
|
||||
|
||||
#### Example of defining multiple themes
|
||||
|
||||
```scss
|
||||
@import '~@angular/material/theming';
|
||||
@import '~@alfresco/adf-core/theming';
|
||||
|
||||
@include mat-core($alfresco-typography);
|
||||
|
||||
$primary: mat.define-palette($alfresco-accent-orange);
|
||||
$accent: mat.define-palette($alfresco-accent-purple);
|
||||
$warn: mat.define-palette($alfresco-warn);
|
||||
$theme: mat.define-light-theme((
|
||||
color: (
|
||||
primary: $primary,
|
||||
accent: $accent,
|
||||
warn: $warn,
|
||||
),
|
||||
typography: $alfresco-typography
|
||||
));
|
||||
|
||||
$dark-theme: mat.define-dark-theme((
|
||||
color: (
|
||||
primary: $primary,
|
||||
accent: $accent,
|
||||
warn: $warn,
|
||||
),
|
||||
typography: $alfresco-typography
|
||||
));
|
||||
|
||||
@include alfresco-material-theme($theme);
|
||||
...like above
|
||||
|
||||
.adf-dark-theme {
|
||||
@include alfresco-material-theme($dark-theme);
|
||||
...like above
|
||||
For example:
|
||||
```css
|
||||
:root {
|
||||
--theme-primary-color: --mat-sys-primary;
|
||||
--theme-accent-color: --mat-sys-tertiary;
|
||||
}
|
||||
```
|
||||
Any component with the `add-dark-theme` class will use the dark theme, while other components will fall back to the default.
|
||||
**No new variables should be added to the project**
|
||||
|
||||
[Reference list of overridable variables](https://github.com/Alfresco/alfresco-ng2-components/blob/29d341cc3b6a0842a776464027dcb1154875a8f0/lib/core/src/lib/styles/_index.scss#L25)
|
||||
|
||||
## Default reusable class
|
||||
|
||||
@@ -132,13 +83,13 @@ Avoid adding css variables with custom values, values should come from the theme
|
||||
--new-variable: mat.get-color-from-palette($primary, 50), // good
|
||||
```
|
||||
|
||||
When styling components try to use theme related variables (colors, typography):
|
||||
```
|
||||
When styling components use Angular Material system variables (colors, typography, elevation):
|
||||
```scss
|
||||
.my-class {
|
||||
color:darkgrey; // bad
|
||||
color:var(--theme-primary-color); // good
|
||||
color:var(--mat-sys-primary); // good
|
||||
font-size:23px; // bad
|
||||
font-size:var(--theme-typography-body-1-font-size); // good
|
||||
font:var(--mat-sys-body-small); // good
|
||||
background:yellow; // bad
|
||||
background:var(--my-component-nr-200-background-color); // bad
|
||||
background:var(--theme-primary-color-50); // good
|
||||
@@ -148,7 +99,7 @@ When styling components try to use theme related variables (colors, typography):
|
||||
When using library like Angular Material try to follow patterns from this library.
|
||||
It helps to style components built with this library (just apply theme instead of custom styling).
|
||||
For example when creating input:
|
||||
```
|
||||
```html
|
||||
// bad
|
||||
<div class="my-custom-input">
|
||||
<div class="my-custom-label"></div>
|
||||
@@ -166,3 +117,16 @@ For example when creating input:
|
||||
<mat-error></mat-error>
|
||||
</mat-form-field>
|
||||
```
|
||||
|
||||
Avoid customizing Angular Material's internal selectors:
|
||||
|
||||
```scss
|
||||
// bad - targeting internal Angular Material selectors
|
||||
.mat-mdc-form-field .mdc-text-field__input {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.mat-mdc-button .mdc-button__label {
|
||||
font-weight: bold;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@use './mat-selectors' as ms;
|
||||
|
||||
@mixin adf-material-theme() {
|
||||
@mixin globals() {
|
||||
#{ms.$mat-expansion-panel} {
|
||||
& #{ms.$mat-expansion-panel-header}.cdk-keyboard-focused,
|
||||
& #{ms.$mat-expansion-panel-header}.cdk-program-focused,
|
||||
@@ -1,126 +1,4 @@
|
||||
/* stylelint-disable value-keyword-case */
|
||||
@use '@angular/material' as mat;
|
||||
@use '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme';
|
||||
/* stylelint-disable value-list-max-empty-lines */
|
||||
/* stylelint-disable scss/no-global-function-names */
|
||||
/* stylelint-disable scss/at-import-partial-extension */
|
||||
@import './mixins';
|
||||
@import './mat-selectors';
|
||||
@import '../form/components/widgets/form.theme';
|
||||
@import '../clipboard/clipboard.theme';
|
||||
@import './material.theme';
|
||||
|
||||
@mixin alfresco-material-theme($theme) {
|
||||
@include adf-core-theme($theme);
|
||||
}
|
||||
|
||||
@mixin adf-core-theme($theme, $custom-css-variables: $adf-custom-theme-sizes) {
|
||||
$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: map-get($custom-css-variables, 'theme-adf-icon-1-font-size'),
|
||||
--theme-adf-picture-1-font-size: map-get($custom-css-variables, 'theme-adf-picture-1-font-size'),
|
||||
--theme-adf-task-footer-font-size: map-get($custom-css-variables, 'theme-adf-task-footer-font-size'),
|
||||
--theme-adf-task-title-font-size: map-get($custom-css-variables, 'theme-adf-task-title-font-size'),
|
||||
// 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: map-get($custom-css-variables, 'theme-adf-spacing'),
|
||||
// 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 datetimepicker-theme.mat-datetimepicker-theme($theme);
|
||||
@include adf-material-theme;
|
||||
}
|
||||
|
||||
$adf-custom-theme-sizes: (
|
||||
'theme-adf-icon-1-font-size': 17px,
|
||||
'theme-adf-picture-1-font-size': 18px,
|
||||
'theme-adf-task-footer-font-size': 18px,
|
||||
'theme-adf-task-title-font-size': 18px,
|
||||
'theme-adf-spacing': 16px
|
||||
);
|
||||
@forward './globals';
|
||||
@forward './flex';
|
||||
@forward './mixins';
|
||||
@forward './mat-selectors';
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
@import './mixins';
|
||||
@import './typography';
|
||||
@import './mat-selectors';
|
||||
@@ -1,18 +0,0 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
$alfresco-typography: mat.m2-define-typography-config(
|
||||
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
|
||||
$headline-1: mat.m2-define-typography-level(112px, 112px, 300),
|
||||
$headline-2: mat.m2-define-typography-level(56px, 56px, 400),
|
||||
$headline-3: mat.m2-define-typography-level(45px, 48px, 400),
|
||||
$headline-4: mat.m2-define-typography-level(34px, 40px, 400),
|
||||
$headline-5: mat.m2-define-typography-level(24px, 32px, 400),
|
||||
$headline-6: mat.m2-define-typography-level(20px, 32px, 500),
|
||||
$subtitle-1: mat.m2-define-typography-level(16px, 28px, 400),
|
||||
$body-1: mat.m2-define-typography-level(15px, 24px, 400),
|
||||
$subtitle-2: mat.m2-define-typography-level(14px, 24px, 500),
|
||||
$body-2: mat.m2-define-typography-level(14px, 20px, 400),
|
||||
$caption: mat.m2-define-typography-level(12px, 20px, 400),
|
||||
$button: mat.m2-define-typography-level(14px, 14px, 500),
|
||||
// Line-height must be unit-less fraction of the font-size.
|
||||
);
|
||||
Reference in New Issue
Block a user