Clean style creations ADF (#7385)

angular.json

@@ -11,6 +11,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "extractCss": true,
             "aot": true,
             "allowedCommonJsDependencies": [
               "minimatch",
@@ -61,7 +62,7 @@
               {
                 "glob": "**/*",
                 "input": "lib/dist/core/prebuilt-themes",
-                "output": "/assets/prebuilt-themes"
+                "output": ""
               },
               {
                 "glob": "**/*",
@@ -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",

demo-shell/proxy.conf.js

@@ -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"),

demo-shell/src/app/components/theme-picker/theme-picker.ts

@@ -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);

demo-shell/src/custom-style-dev.scss

@@ -1,5 +1,4 @@
 @import '~@angular/material/theming';
-
 @import '../../lib/core/styles/index';
 
 @include mat-core($alfresco-typography);
@@ -7,10 +6,15 @@
 $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;

demo-shell/src/custom-style.scss

@@ -1,5 +1,4 @@
 @import '~@angular/material/theming';
-
 @import '~@alfresco/adf-core/theming';
 
 @include mat-core($alfresco-typography);
@@ -7,10 +6,15 @@
 $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;

docs/user-guide/theming.md

@@ -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 alfresco-material-theme($theme);
-@include adf-core-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
@@ -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((
+    color: (
+        primary: $primary,
+        accent: $accent,
+    )
+));
 
-$theme:   mat-light-theme($primary, $accent, $warn);
+$dark-theme:   mat-dark-theme((
-$dark-theme:   mat-dark-theme($primary, $accent, $warn);
+    color: (
+        primary: $primary,
+        accent: $accent,
+    )
+));
 
-@include adf-core-theme($theme);
+@include alfresco-material-theme($theme);
 ...like above
 
 .adf-dark-theme {
-    @include adf-core-theme($dark-theme);
+    @include alfresco-material-theme($dark-theme);
     ...like above
 }
 ```

lib/config/app.config.json

@@ -1,6 +0,0 @@
-{
-    "ecmHost": "http://{hostname}:{port}/ecm",
-    "bpmHost": "http://{hostname}:{port}/bpm",
-    "baseShareUrl": null,
-    "logLevel" : "silent"
-}

lib/config/create-coverage-index.sh

@@ -1,18 +0,0 @@
-#!/bin/bash
-
-ROOT=./lib/coverage
-HTTP="/"
-OUTPUT="./lib/coverage/index.html"
-RULE=".*\.\(html\)"
-
-echo "<h1>Coverage ADF Reports</h1>" > $OUTPUT
-echo "<ul>" >> $OUTPUT
-i=0
-for filepath in `find "$ROOT" -maxdepth 1 -mindepth 1 -type d| sort`; do
-  path=`basename "$filepath"`
-  for i in `find "$filepath" -regex "$RULE" -maxdepth 1 -mindepth 1 -type f| sort`; do
-    file=`basename "$i"`
-    echo "    <li><a href=\"/$path/$file\">$path</a></li>" >> $OUTPUT
-  done
-done
-echo "</ul>" >> $OUTPUT

lib/config/proxy-coverage.json

@@ -1,6 +0,0 @@
-{
-  "port": 4344,
-  "server": {
-    "baseDir": "./lib/coverage/"
-  }
-}

lib/config/webpack.style.js

@@ -1,38 +0,0 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const path = require("path");
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-
-module.exports = {
-
-    mode: 'production',
-
-    optimization: {
-        minimizer: [new OptimizeCSSAssetsPlugin({})],
-    },
-
-    entry: {
-        'adf-blue-orange': './lib/core/styles/prebuilt/adf-blue-orange.scss',
-        'adf-blue-purple': './lib/core/styles/prebuilt/adf-blue-purple.scss',
-        'adf-cyan-orange': './lib/core/styles/prebuilt/adf-cyan-orange.scss',
-        'adf-cyan-purple': './lib/core/styles/prebuilt/adf-cyan-purple.scss',
-        'adf-green-purple': './lib/core/styles/prebuilt/adf-green-purple.scss',
-        'adf-green-orange': './lib/core/styles/prebuilt/adf-green-orange.scss',
-        'adf-pink-bluegrey': './lib/core/styles/prebuilt/adf-pink-bluegrey.scss',
-        'adf-indigo-pink': './lib/core/styles/prebuilt/adf-indigo-pink.scss',
-        'adf-purple-green': './lib/core/styles/prebuilt/adf-purple-green.scss'
-    },
-
-    output: {
-        path: path.resolve(__dirname, '../dist/core/prebuilt-themes/'),
-        filename: '[name].js',
-        publicPath: '/dist'
-    },
-
-    module: {
-        rules: [{
-            test: /\.scss$/,
-            use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
-        }]
-    },
-    plugins: [new MiniCssExtractPlugin()]
-};

lib/content-services/scss-bundle.config.json

@@ -1,10 +0,0 @@
-{
-  "bundlerOptions": {
-    "entryFile": "./lib/content-services/src/lib/styles/_index.scss",
-    "rootDir": ".",
-    "project": "../../",
-    "outFile": "./lib/dist/content-services/_theming.scss",
-    "ignoreImports": ["~@angular/.*"],
-    "logLevel": "info"
-  }
-}

lib/core/styles/_index.scss

@@ -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);

lib/core/styles/prebuilt/_all-theme.scss

@@ -1,5 +1 @@
 @import '../../../core/styles/index';
-
-@mixin alfresco-material-theme($theme) {
-    @include adf-core-theme($theme);
-}

lib/core/styles/prebuilt/adf-blue-orange.scss

@@ -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);

lib/core/styles/prebuilt/adf-blue-purple.scss

@@ -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);

lib/core/styles/prebuilt/adf-cyan-orange.scss

@@ -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);

lib/core/styles/prebuilt/adf-cyan-purple.scss

@@ -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);

lib/core/styles/prebuilt/adf-green-orange.scss

@@ -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);

lib/core/styles/prebuilt/adf-green-purple.scss

@@ -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);

lib/core/styles/prebuilt/adf-indigo-pink.scss

@@ -5,7 +5,13 @@
 
 $primary: mat-palette($mat-indigo);
 $accent:  mat-palette($mat-pink, A200, A100, A400);
-$theme: mat-light-theme($primary, $accent);
+$warn:    mat-palette($alfresco-warn);
+$theme:   mat-light-theme((
+    color: (
+        primary: $primary,
+        accent: $accent,
+    )
+));
 
 @include angular-material-theme($theme);
 @include alfresco-material-theme($theme);

lib/core/styles/prebuilt/adf-pink-bluegrey.scss

@@ -5,7 +5,13 @@
 
 $primary: mat-palette($mat-pink, 700, 500, 900);
 $accent:  mat-palette($mat-blue-grey, A200, A100, A400);
-$theme: mat-dark-theme($primary, $accent);
+$warn:    mat-palette($alfresco-warn);
+$theme:   mat-dark-theme((
+    color: (
+        primary: $primary,
+        accent: $accent,
+    )
+));
 
 @include angular-material-theme($theme);
 @include alfresco-material-theme($theme);

lib/core/styles/prebuilt/adf-purple-green.scss

@@ -5,7 +5,13 @@
 
 $primary: mat-palette($mat-purple, 700, 500, 800);
 $accent:  mat-palette($mat-green, A200, A100, A400);
-$theme: mat-dark-theme($primary, $accent);
+$warn:    mat-palette($alfresco-warn);
+$theme:   mat-dark-theme((
+    color: (
+        primary: $primary,
+        accent: $accent,
+    )
+));
 
 @include angular-material-theme($theme);
 @include alfresco-material-theme($theme);

lib/insights/scss-bundle.config.json

@@ -1,10 +0,0 @@
-{
-  "bundlerOptions": {
-    "entryFile": "./lib/insights/src/lib/styles/_index.scss",
-    "rootDir": ".",
-    "project": "../../",
-    "outFile": "./lib/dist/insights/_theming.scss",
-    "ignoreImports": ["~@angular/.*"],
-    "logLevel": "info"
-  }
-}

lib/process-services-cloud/scss-bundle.config.json

@@ -1,10 +0,0 @@
-{
-  "bundlerOptions": {
-    "entryFile": "./lib/process-services-cloud/src/lib/styles/_index.scss",
-    "rootDir": ".",
-    "project": "../../",
-    "outFile": "./lib/dist/process-services-cloud/_theming.scss",
-    "ignoreImports": ["~@angular/.*"],
-    "logLevel": "info"
-  }
-}

lib/process-services/scss-bundle.config.json

@@ -1,10 +0,0 @@
-{
-  "bundlerOptions": {
-    "entryFile": "./lib/process-services/src/lib/styles/_index.scss",
-    "rootDir": ".",
-    "project": "../../",
-    "outFile": "./lib/dist/process-services/_theming.scss",
-    "ignoreImports": ["~@angular/.*"],
-    "logLevel": "info"
-  }
-}

package.json

@@ -26,10 +26,6 @@
     "inspect.bundle": "ng build demoshell --configuration production --stats-json && npx webpack-bundle-analyzer dist/demo-shell/stats.json",
     "coverage": "./lib/config/create-coverage-index.sh && lite-server -c ./lib/config/proxy-coverage.json",
     "scss-bundle:core": "npx scss-bundle -c ./lib/core/scss-bundle.config.json",
-    "scss-bundle:content-services": "npx scss-bundle -c ./lib/content-services/scss-bundle.config.json",
-    "scss-bundle:insights": "npx scss-bundle -c ./lib/insights/scss-bundle.config.json",
-    "scss-bundle:process-services": "npx scss-bundle -c ./lib/process-services/scss-bundle.config.json",
-    "scss-bundle:process-services-cloud": "npx scss-bundle -c ./lib/process-services-cloud/scss-bundle.config.json",
     "03": "echo -------------------------------------------- Lint  -----------------------------------------------",
     "03s": "",
     "lint-demo": "tslint -p tsconfig.json -c tslint.json",
@@ -40,11 +36,10 @@
     "stylelint": "stylelint ./**/*.scss --config stylelint-config.json",
     "04": "echo -------------------------------------------- Demo Shell -----------------------------------------------",
     "04s": "",
-    "start": "concurrently \"ng serve demoshell --open\" \"npm run style:dev -- --watch >&-\" ",
+    "start": "ng serve demoshell --open",
     "start:prod": "ng serve demoshell --configuration production --open",
-    "build": "npm run style:dev && ng build demoshell",
+    "build": "ng build demoshell",
     "build:prod": "node --max-old-space-size=12000 node_modules/@angular/cli/bin/ng build demoshell --configuration production",
-    "style:dev": "npm run webpack -- --config  ./lib/config/webpack.style.js --progress --profile --bail",
     "test": "ng test demoshell --watch=false",
     "05": "echo -------------------------------------------- E2e -----------------------------------------------",
     "05s": "",
@@ -160,7 +155,6 @@
     "nconf": "^0.11.1",
     "ng-packagr": "^10.1.2",
     "node-sass": "^4.14.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
     "protractor": "^7.0.0",
     "protractor-retry-angular-cli": "^2.0.2",
     "protractor-screenshoter-plugin": "0.10.3",
@@ -174,8 +168,7 @@
     "tsconfig-paths": "^3.12.0",
     "tslint": "6.1.3",
     "typescript": "3.9.8",
-    "webdriver-manager": "12.1.8",
+    "webdriver-manager": "12.1.8"
-    "webpack-cli": "^3.3.12"
   },
   "license": "Apache-2.0",
   "bundlesize": [

scripts/build/build-core.sh

@@ -28,5 +28,12 @@ cp -R ./lib/core/app-config/schema.json lib/dist/core/app.config.schema.json
 echo "====== Copy assets ======"
 cp -R ./lib/core/assets/* ./lib/dist/core/bundles/assets
 
-npm run webpack -- --config ./lib/config/webpack.style.js --progress --profile --bail
+echo "====== Bundle prebuilt styles ======"
-rm ./lib/dist/core/prebuilt-themes/*.js
+npx scss-bundle -e "./lib/core/styles/prebuilt/adf-blue-purple.scss" -o "./lib/dist/core/prebuilt-themes/adf-blue-purple.scss" -p "./"
+npx scss-bundle -e "./lib/core/styles/prebuilt/adf-cyan-purple.scss" -o "./lib/dist/core/prebuilt-themes/adf-cyan-purple.scss" -p "./"
+npx scss-bundle -e "./lib/core/styles/prebuilt/adf-green-purple.scss" -o "./lib/dist/core/prebuilt-themes/adf-green-purple.scss" -p "./"
+npx scss-bundle -e "./lib/core/styles/prebuilt/adf-pink-bluegrey.scss" -o "./lib/dist/core/prebuilt-themes/adf-pink-bluegrey.scss" -p "./"
+npx scss-bundle -e "./lib/core/styles/prebuilt/adf-cyan-orange.scss" -o "./lib/dist/core/prebuilt-themes/adf-cyan-orange.scss" -p "./"
+npx scss-bundle -e "./lib/core/styles/prebuilt/adf-green-orange.scss" -o ".lib/dist/core/prebuilt-themes/adf-green-orange.scss" -p "./"
+npx scss-bundle -e "./lib/core/styles/prebuilt/adf-indigo-pink.scss" -o "./lib/dist/core/prebuilt-themes/adf-indigo-pink.scss" -p "./"
+npx scss-bundle -e "./lib/core/styles/prebuilt/adf-purple-green.scss" -o "./lib/dist/core/prebuilt-themes/adf-purple-green.scss" -p "./"