Skip to content

Commit

Permalink
Clean style creations ADF (#7385)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eromano
eromano committed Nov 29, 2021
1 parent 684b1e7 commit ce43d0a
Show file tree
Hide file tree
Showing 27 changed files with 163 additions and 160 deletions.
48 changes: 47 additions & 1 deletion angular.json
View file
Expand Up @@ -11,6 +11,7 @@
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"extractCss": true,
"aot": true,
"allowedCommonJsDependencies": [
"minimatch",
Expand Down Expand Up @@ -61,7 +62,7 @@
{
"glob": "**/*",
"input": "lib/dist/core/prebuilt-themes",
"output": "/assets/prebuilt-themes"
"output": ""
},
{
"glob": "**/*",
Expand Down Expand Up @@ -120,6 +121,51 @@
}
],
"styles": [
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-blue-orange.scss",
"bundleName" : "adf-blue-orange"
},
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-blue-purple.scss",
"bundleName" : "adf-blue-purple"
},
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-cyan-orange.scss",
"bundleName" : "adf-cyan-orange"
},
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-cyan-purple.scss",
"bundleName" : "adf-cyan-purple"
},
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-green-orange.scss",
"bundleName" : "adf-green-orange"
},
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-green-purple.scss",
"bundleName" : "adf-green-purple"
},
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-indigo-pink.scss",
"bundleName" : "adf-indigo-pink"
},
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-pink-bluegrey.scss",
"bundleName" : "adf-pink-bluegrey"
},
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-purple-green.scss",
"bundleName" : "adf-purple-green"
},
"demo-shell/src/assets/fonts/material-icons/material-icons.css",
"demo-shell/src/assets/fonts/muli/muli.css",
"demo-shell/src/styles.scss",
Expand Down
2 changes: 1 addition & 1 deletion demo-shell/proxy.conf.js
View file
@@ -1,7 +1,7 @@
require('dotenv').config();

var PROXY_HOST_ADF = process.env.PROXY_HOST_ADF;

console.log('PROXY_HOST_ADF' + PROXY_HOST_ADF);
module.exports = {
"/alfresco": {
"target": (PROXY_HOST_ADF || "http://localhost:8080"),
Expand Down
2 changes: 1 addition & 1 deletion demo-shell/src/app/components/theme-picker/theme-picker.ts
View file
Expand Up @@ -122,7 +122,7 @@ export class ThemePickerComponent {
} else {
this.currentTheme = this._getCurrentThemeFromHref(theme.href);

this.styleManager.setStyle('theme', `assets/prebuilt-themes/${theme.href}`);
this.styleManager.setStyle('theme', theme.href);

if (this.currentTheme) {
this._themeStorage.storeTheme(this.currentTheme);
Expand Down
10 changes: 7 additions & 3 deletions demo-shell/src/custom-style-dev.scss
View file
@@ -1,16 +1,20 @@
@import '~@angular/material/theming';

@import '../../lib/core/styles/index';

@include mat-core($alfresco-typography);

$primary: mat-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));

@include angular-material-theme($theme);
@include adf-core-theme($theme);
@include alfresco-material-theme($theme);

body, html {
margin: 0;
Expand Down
10 changes: 7 additions & 3 deletions demo-shell/src/custom-style.scss
View file
@@ -1,16 +1,20 @@
@import '~@angular/material/theming';

@import '~@alfresco/adf-core/theming';

@include mat-core($alfresco-typography);

$primary: mat-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));

@include angular-material-theme($theme);
@include adf-core-theme($theme);
@include alfresco-material-theme($theme);

body, html {
margin: 0;
Expand Down
43 changes: 26 additions & 17 deletions docs/user-guide/theming.md
View file
Expand Up @@ -70,20 +70,23 @@ When you want more customization than a pre-built theme offers, you can create y
/*
* Include only packages that you are using (and core by default)
*/
@import '~@alfresco/adf-core/theming';

@import '~@angular/material/theming';
@import '~@alfresco/adf-core/theming';

@include mat-core($alfresco-typography);

$primary: mat-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));

@include angular-material-theme($theme);

@include adf-core-theme($theme);
@include alfresco-material-theme($theme);
```

Notes: if you are using the Generator or the demo shell you need only to change the`/src/custom-style.scss` with your set of colors
Expand All @@ -95,27 +98,33 @@ You can create multiple themes for your application:
#### Example of defining multiple themes

```scss
@import '~@alfresco/adf-content-services/theming';
@import '~@alfresco/adf-process-services/theming';
@import '~@alfresco/adf-insights/theming';
@import '~@alfresco/adf-core/theming';
@import '~@angular/material/theming';
...
@import '~@alfresco/adf-core/theming';

@include mat-core();
@include mat-core($alfresco-typography);

$primary: mat-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);

$theme: mat-light-theme($primary, $accent, $warn);
$dark-theme: mat-dark-theme($primary, $accent, $warn);

@include adf-core-theme($theme);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));

$dark-theme: mat-dark-theme((
color: (
primary: $primary,
accent: $accent,
)
));

@include alfresco-material-theme($theme);
...like above

.adf-dark-theme {
@include adf-core-theme($dark-theme);
@include alfresco-material-theme($dark-theme);
...like above
}
```
Expand Down
6 changes: 0 additions & 6 deletions lib/config/app.config.json
View file

This file was deleted.

18 changes: 0 additions & 18 deletions lib/config/create-coverage-index.sh
View file

This file was deleted.

6 changes: 0 additions & 6 deletions lib/config/proxy-coverage.json
View file

This file was deleted.

38 changes: 0 additions & 38 deletions lib/config/webpack.style.js
View file

This file was deleted.

10 changes: 0 additions & 10 deletions lib/content-services/scss-bundle.config.json
View file

This file was deleted.

4 changes: 4 additions & 0 deletions lib/core/styles/_index.scss
View file
Expand Up @@ -6,6 +6,10 @@
@import './material.theme';
@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';

@mixin alfresco-material-theme($theme) {
@include adf-core-theme($theme);
}

@mixin adf-core-theme($theme) {
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
Expand Down
4 changes: 0 additions & 4 deletions lib/core/styles/prebuilt/_all-theme.scss
View file
@@ -1,5 +1 @@
@import '../../../core/styles/index';

@mixin alfresco-material-theme($theme) {
@include adf-core-theme($theme);
}
7 changes: 6 additions & 1 deletion lib/core/styles/prebuilt/adf-blue-orange.scss
View file
Expand Up @@ -6,7 +6,12 @@
$primary: mat-palette($alfresco-ecm-blue);
$accent: mat-palette($alfresco-accent-orange);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));

@include angular-material-theme($theme);
@include alfresco-material-theme($theme);
9 changes: 7 additions & 2 deletions lib/core/styles/prebuilt/adf-blue-purple.scss
View file
Expand Up @@ -3,10 +3,15 @@

@include mat-core($alfresco-typography);

$primary: mat-palette($alfresco-ecm-blue);
$primary: mat-palette($mat-pink, 700, 500, 900);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));

@include angular-material-theme($theme);
@include alfresco-material-theme($theme);
7 changes: 6 additions & 1 deletion lib/core/styles/prebuilt/adf-cyan-orange.scss
View file
Expand Up @@ -6,7 +6,12 @@
$primary: mat-palette($alfresco-ecm-cyan);
$accent: mat-palette($alfresco-accent-orange);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));

@include angular-material-theme($theme);
@include alfresco-material-theme($theme);
7 changes: 6 additions & 1 deletion lib/core/styles/prebuilt/adf-cyan-purple.scss
View file
Expand Up @@ -6,7 +6,12 @@
$primary: mat-palette($alfresco-ecm-cyan);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));

@include angular-material-theme($theme);
@include alfresco-material-theme($theme);
7 changes: 6 additions & 1 deletion lib/core/styles/prebuilt/adf-green-orange.scss
View file
Expand Up @@ -6,7 +6,12 @@
$primary: mat-palette($alfresco-bpm-green);
$accent: mat-palette($alfresco-accent-orange);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));

@include angular-material-theme($theme);
@include alfresco-material-theme($theme);
7 changes: 6 additions & 1 deletion lib/core/styles/prebuilt/adf-green-purple.scss
View file
Expand Up @@ -6,7 +6,12 @@
$primary: mat-palette($alfresco-bpm-green);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));

@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

0 comments on commit ce43d0a

Please sign in to comment.