@alfresco/aca-content 4.0.0-4895233349

package/ui/dynamic-theme/custom-background-color.scss

@@ -0,0 +1,14 @@
+/* stylelint-disable scss/no-global-function-names */
+@function get-custom-background-color($background-color, $theme) {
+    $background: map-get($theme, background);
+    $card: map-get($background, card);
+    $new-card-color: lighten($background-color, 10%);
+    $new-selected-button: lighten($background-color, 5%);
+    $background: map_merge($background, (background: $background-color));
+    $background: map_merge($background, (card: $new-card-color));
+    $background: map_merge($background, (modal: $new-card-color));
+    $background: map_merge($background, (dialog: $new-card-color));
+    $background: map_merge($background, (selected-button: $new-selected-button));
+
+    @return $background;
+}

package/ui/dynamic-theme/custom-palette-creator.scss

@@ -0,0 +1,132 @@
+/* stylelint-disable scss/dollar-variable-pattern */
+/* stylelint-disable scss/no-global-function-names */
+/* stylelint-disable value-keyword-case */
+@use "sass:math";
+
+@function multiply($fore, $back) {
+    $red: red($back) * red($fore) / 255;
+    $green: green($back) * green($fore) / 255;
+    $blue: blue($back) * blue($fore) / 255;
+
+    @return rgb($red, $green, $blue);
+}
+
+@function get-color-luminance($color) {
+  $colors: (
+    'red': red($color),
+    'green': green($color),
+    'blue': blue($color)
+  );
+
+  @each $name, $value in $colors {
+    $adjusted: 0;
+    $value: $value / 255;
+
+    @if $value < 0.0393 {
+      $value: $value / 12.92;
+    } @else {
+      $value: ($value + .055) / 1.055;
+      $value: math.pow($value, 2.4);
+    }
+
+    $colors: map-merge($colors, ($name: $value));
+  }
+
+  @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722);
+}
+
+@function create-text-color($color, $color-type: 'primary') {
+    $red: red($color);
+    $green: green($color);
+    $blue: blue($color);
+    $light-text: $light-primary-text;
+    $dark-text: $dark-primary-text;
+
+    @if $color-type == 'accent' {
+        $light-text: $light-secondary-text;
+        $dark-text: $dark-secondary-text;
+    }
+
+    $light-text-luminance: get-color-luminance($light-text);
+    $dark-text-luminance: get-color-luminance($dark-text);
+    $background-color-luminance: get-color-luminance($color);
+    $light-text-luminance: $light-text-luminance + 0.5;
+    $dark-text-luminance: $dark-text-luminance + 0.5;
+    $background-color-luminance: $background-color-luminance + 0.5;
+    $luminance-contrast-for-light-text: $light-text-luminance / $background-color-luminance;
+    $luminance-contrast-for-dark-text: $background-color-luminance / $dark-text-luminance;
+    $text-colour: $light-text;
+
+    @if $luminance-contrast-for-dark-text > $luminance-contrast-for-light-text {
+        $text-colour: $dark-text;
+    }
+
+    @return $text-colour;
+}
+
+@function create-color-palette($color, $color-type: 'primary') {
+    $light: #fff;
+    $dark: multiply($color, $color);
+    $color50: mix($light, $color, 88%);
+    $color100: mix($light, $color, 70%);
+    $color200: mix($light, $color, 50%);
+    $color300: mix($light, $color, 30%);
+    $color400: mix($light, $color, 15%);
+    $color500: mix($light, $color, 0%);
+    $color600: mix($dark, $color, 13%);
+    $color700: mix($dark, $color, 30%);
+    $color800: mix($dark, $color, 46%);
+    $color900: mix($dark, $color, 75%);
+    $colorA100: lighten(saturate(mix($dark, $color, 15%), 80%), 45.6%);
+    $colorA200: lighten(saturate(mix($dark, $color, 15%), 80%), 35.6%);
+    $colorA400: lighten(saturate(mix($dark, $color, 15%), 100%), 25.6%);
+    $colorA700: lighten(saturate(mix($dark, $color, 15%), 100%), 20.5%);
+    $contrast50: create-text-color($color50, $color-type);
+    $contrast100: create-text-color($color100, $color-type);
+    $contrast200: create-text-color($color200, $color-type);
+    $contrast300: create-text-color($color300, $color-type);
+    $contrast400: create-text-color($color400, $color-type);
+    $contrast500: create-text-color($color500, $color-type);
+    $contrast600: create-text-color($color600, $color-type);
+    $contrast700: create-text-color($color700, $color-type);
+    $contrast800: create-text-color($color800, $color-type);
+    $contrast900: create-text-color($color900, $color-type);
+    $contrastA100: create-text-color($colorA100, $color-type);
+    $contrastA200: create-text-color($colorA200, $color-type);
+    $contrastA400: create-text-color($colorA400, $color-type);
+    $contrastA700: create-text-color($colorA700, $color-type);
+    $palette: (
+        50: $color50,
+        100: $color50,
+        200: $color50,
+        300: $color50,
+        400: $color400,
+        500: $color500,
+        600: $color600,
+        700: $color700,
+        800: $color800,
+        900: $color900,
+        A100: $colorA100,
+        A200: $colorA200,
+        A400: $colorA400,
+        A700: $colorA700,
+        contrast: (
+            50: $contrast50,
+            100: $contrast100,
+            200: $contrast200,
+            300: $contrast300,
+            400: $contrast400,
+            500: $contrast500,
+            600: $contrast600,
+            700: $contrast700,
+            800: $contrast800,
+            900: $contrast900,
+            A100: $contrastA100,
+            A200: $contrastA200,
+            A400: $contrastA400,
+            A700: $contrastA700
+        )
+    );
+
+    @return $palette;
+}

package/ui/dynamic-theme/custom-text-color.scss

@@ -0,0 +1,8 @@
+/* stylelint-disable scss/no-global-function-names */
+@function get-custom-text-color($text-color, $theme) {
+    $foreground: map-get($custom-theme, foreground);
+    $foreground: map_merge($foreground, (text: $text-color));
+    $foreground: map_merge($foreground, (secondary-text: $text-color));
+
+    @return $foreground;
+}

package/ui/dynamic-theme/custom-theme-palettes.scss

@@ -0,0 +1,33 @@
+/* stylelint-disable value-keyword-case */
+
+@use '@angular/material' as mat;
+@import '../colors';
+@import './custom-palette-creator';
+
+@function get-mat-palettes($primary-color, $accent-color) {
+    $mat-primary-palette: null;
+
+    @if $primary-color {
+        $custom-theme-primary-palette: create-color-palette($primary-color, 'primary');
+        $mat-primary-palette: mat.define-palette($custom-theme-primary-palette, 500);
+    } @else {
+        $mat-primary-palette: mat.define-palette($aca-primary-blue, A100);
+    }
+
+    $mat-accent-palette: null;
+
+    @if $accent-color {
+        $custom-theme-accent-palette: create-color-palette($accent-color, 'accent');
+        $mat-accent-palette: mat.define-palette($custom-theme-accent-palette, 500);
+    } @else {
+        $mat-accent-palette: mat.define-palette($aca-accent-green, A200);
+    }
+
+    $mat-warn-palette: mat.define-palette($aca-warn, A100);
+
+    @return (
+        primary: $mat-primary-palette,
+        accent: $mat-accent-palette,
+        warning: $mat-warn-palette,
+    )
+}

package/ui/dynamic-theme/custom-theme.scss.tpl

@@ -0,0 +1,72 @@
+@import '@angular/material/theming';
+@import './overrides/adf-style-fixes.theme';
+@import './overrides/adf-pagination.theme';
+@import './overrides/adf-about.theme.scss';
+@import "./dynamic-theme/theme-configuration";
+@import "./dynamic-theme/typography";
+@import "./dynamic-theme/custom-theme-palettes";
+@import "./dynamic-theme/custom-background-color";
+@import "./dynamic-theme/custom-text-color";
+
+$primary-color: map-get($theme-config, 'primaryColor');
+$accent-color: map-get($theme-config, 'accentColor');
+$background-color: map-get($theme-config, 'backgroundColor');
+$text-color: map-get($theme-config, 'textColor');
+$base-font-size: map-get($theme-config, 'baseFontSize');
+$font-family: map-get($theme-config, 'fontFamily');
+
+$app-typography: get-mat-typography(
+  $base-font-size,
+  $font-family
+);
+
+@include mat-core();
+
+$palettes: get-mat-palettes($primary-color, $accent-color);
+$custom-theme: mat-light-theme(
+      (
+          color: (
+              primary: map-get($palettes, primary),
+              accent: map-get($palettes, accent),
+              warn: map-get($palettes, warning)
+          ),
+          typography: $app-typography
+      )
+);
+
+@if $background-color {
+  $custom-background: get-custom-background-color($background-color, $custom-theme);
+  $custom-theme: map_merge($custom-theme, (background: $custom-background));
+
+  $color: map_get($custom-theme, color);
+  $new-color: map_merge($color, (background: $custom-background));
+  $custom-theme: map_merge($custom-theme, (color: $new-color));
+}
+
+@if $text-color {
+  $custom-foreground: get-custom-text-color($text-color, $custom-theme);
+  $custom-theme: map_merge($custom-theme, (foreground: $custom-foreground));
+
+  $color: map_get($custom-theme, color);
+  $new-color: map_merge($color, (foreground: $custom-foreground));
+  $custom-theme: map_merge($custom-theme, (color: $new-color));
+}
+
+@mixin custom-theme($theme) {
+  @include angular-material-theme($theme);
+
+  @if $base-font-size {
+    @include adf-core-theme($theme, get-custom-adf-font-sizes());
+    @include base-font-size($base-font-size);
+  } @else {
+    @include adf-core-theme($theme);
+  }
+
+  @if $font-family {
+    @include base-font-family($font-family);
+  }
+
+  @include adf-style-fixes($theme);
+  @include adf-pagination-theme($theme);
+  @include adf-about-theme($theme);
+}

package/ui/dynamic-theme/index.scss

@@ -0,0 +1 @@
+@import '../theme';

package/ui/dynamic-theme/theme-configuration.scss.tpl

@@ -0,0 +1,14 @@
+/*
+Specify theme parameters e.g.:
+
+$theme-config: (
+    primaryColor: #5175d2,
+    backgroundColor: #FAFAFA,
+    textColor: #793942,
+    accentColor: #C64F73,
+    baseFontSize: 26px,
+    fontFamily: Cursive
+);
+*/
+
+${THEME_CONFIGURATION}

package/ui/dynamic-theme/typography.scss

@@ -0,0 +1,94 @@
+/* stylelint-disable scss/no-global-function-names */
+@use '@angular/material' as mat;
+@import '../variables/font-family';
+
+@function get-mat-typography($base-font-size, $font-family) {
+  $custom-typography: mat.define-typography-config(
+    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
+    $display-4: mat.define-typography-level(112px, 112px, 300),
+    $display-3: mat.define-typography-level(56px, 56px, 400),
+    $display-2: mat.define-typography-level(45px, 48px, 400),
+    $display-1: mat.define-typography-level(34px, 40px, 400),
+    $headline: mat.define-typography-level(24px, 32px, 400),
+    $title: mat.define-typography-level(20px, 32px, 500),
+    $subheading-2: mat.define-typography-level(16px, 28px, 400),
+    $subheading-1: mat.define-typography-level(15px, 24px, 400),
+    $body-2: mat.define-typography-level(14px, 24px, 500),
+    $body-1: mat.define-typography-level(14px, 20px, 400),
+    $caption: mat.define-typography-level(12px, 20px, 400),
+    $button: mat.define-typography-level(14px, 14px, 500),
+    // Line-height must be unit-less fraction of the font-size.
+    $input: mat.define-typography-level(16px, 1.25, 400)
+  );
+
+  @if $base-font-size {
+    $custom-typography: mat.define-typography-config(
+      $display-4: mat.define-typography-level(8rem, 8rem, 300),
+      $display-3: mat.define-typography-level(4rem, 4rem, 400),
+      $display-2: mat.define-typography-level(3.21rem, 3.21rem, 400),
+      $display-1: mat.define-typography-level(2.42rem, 2.85rem, 400),
+      $headline: mat.define-typography-level(1.71rem, 2.28rem, 400),
+      $title: mat.define-typography-level(1.42rem, 2.28rem, 500),
+      $subheading-2: mat.define-typography-level(1.14rem, 2rem, 400),
+      $subheading-1: mat.define-typography-level(1.07rem, 1.71rem, 400),
+      $body-2: mat.define-typography-level(1rem, 1.71rem, 500),
+      $body-1: mat.define-typography-level(1rem, 1.42rem, 400),
+      $caption: mat.define-typography-level(0.86rem, 1.42rem, 400),
+      $button: mat.define-typography-level(1rem, 1rem, 500),
+      $font-family: $default-font-family,
+      $input: mat.define-typography-level(1.14em, 1.25, 400)
+    );
+  }
+
+  @if $font-family {
+    @each $key, $level in $custom-typography {
+      @if type-of($level) == 'map' {
+        $new-level: map-merge(
+          $level,
+          (
+            font-family: $font-family
+          )
+        );
+        $custom-typography: map-merge(
+          $custom-typography,
+          (
+            $key: $new-level
+          )
+        );
+      }
+    }
+
+    $custom-typography: map-merge(
+      $custom-typography,
+      (
+        font-family: $font-family
+      )
+    );
+  }
+
+  @return $custom-typography;
+}
+
+@function get-custom-adf-font-sizes() {
+  @return (
+    'theme-adf-icon-1-font-size': 1.2rem,
+    'theme-adf-picture-1-font-size': 1.28rem,
+    'theme-adf-task-footer-font-size': 1.28rem,
+    'theme-adf-task-title-font-size': 1.28rem,
+    'theme-adf-spacing': 16px
+  );
+}
+
+@mixin base-font-size($font-size) {
+  html,
+  body {
+    font-size: $font-size !important;
+  }
+}
+
+@mixin base-font-family($font-family) {
+  html,
+  body {
+    font-family: $font-family !important;
+  }
+}

package/ui/mixins.scss

@@ -0,0 +1,26 @@
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+  min-height: 0;
+}
+
+@mixin flex-row {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+}
+
+@mixin rounded-outline() {
+  outline: 2px solid var(--theme-blue-button-color);
+  border-radius: 4px;
+}
+
+@mixin rounded-border($border-color: var(--theme-blue-button-color), $thickness: 2px, $radius: 4px) {
+  border: $thickness solid $border-color !important;
+  border-radius: $radius;
+}

package/ui/overrides/adf-about.theme.scss

@@ -0,0 +1,38 @@
+@mixin adf-about-theme($theme) {
+  adf-about {
+    /* custom ADF About Component Theme */
+
+    background-color: var(--theme-about-panel-background-color);
+    overflow: auto;
+
+    mat-accordion {
+      box-shadow: none !important;
+      border: none !important;
+    }
+
+    mat-expansion-panel {
+      box-shadow: none !important;
+      border-radius: 12px !important;
+      margin: 24px !important;
+      width: 95%;
+      border: 1px solid var(--theme-about-panel-border-color);
+      background-color: var(--theme-about-panel-background-color);
+    }
+
+    mat-expansion-panel-header {
+      display: flex;
+      height: 80px !important;
+      padding: 24px;
+      line-height: 32px;
+    }
+
+    mat-panel-title {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 24px;
+      color: var(--theme-about-panel-title-color);
+    }
+
+  }
+}

package/ui/overrides/adf-pagination.theme.scss

@@ -0,0 +1,46 @@
+@mixin adf-pagination-theme($theme) {
+  .adf-pagination__block {
+    flex: none !important;
+    padding: 0 !important;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    letter-spacing: 0.25px;
+  }
+
+  .adf-pagination {
+    height: 32px !important;
+    line-height: 24px !important;
+    padding: 16px 0;
+    background: var(--theme-pagination-background-color);
+  }
+
+  .adf-pagination__range-block {
+    padding: 0 24px !important;
+  }
+
+  .adf-pagination__perpage-block {
+    flex: auto !important;
+    padding-right: 24px !important;
+  }
+
+  .adf-pagination__actualinfo-block {
+    padding-right: 12px !important;
+
+    .mat-menu-trigger {
+      display: none !important;
+    }
+  }
+
+  .adf-pagination__previous-button {
+    margin: 0 12px 0 0 !important;
+  }
+
+  .adf-pagination__next-button {
+    margin: 0 !important;
+  }
+
+  .adf-pagination__controls-block {
+    padding-right: 24px !important;
+  }
+}

package/ui/overrides/adf-style-fixes.theme.scss

@@ -0,0 +1,18 @@
+@mixin adf-style-fixes($theme) {
+  //  add here all ADF style overrides
+  //  and create a task to move them to ADF
+
+  .adf-content-node-selector-content-list {
+    .adf-content-selector-modified-cell {
+      display: none;
+    }
+
+    .adf-content-selector-modifier-cell {
+      display: none;
+    }
+  }
+
+  adf-share-dialog .mat-form-field-label-wrapper label {
+    display: none !important;
+  }
+}