@alfresco/aca-content 4.0.0-A.2-9984

package/ui/colors.scss

@@ -0,0 +1,98 @@
+$aca-primary-blue: (
+  50: #e0ebf6,
+  100: #b3ccea,
+  200: #80aadc,
+  300: #4d88cd,
+  400: #266fc3,
+  500: #0055b8,
+  600: #004eb1,
+  700: #0044a8,
+  800: #003ba0,
+  900: #002a91,
+  A100: #0055b8,
+  A200: #0a1f8f,
+  A400: #2a7de1,
+  A700: #00c1de,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #ffffff,
+    400: #ffffff,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #ffffff,
+    A200: #ffffff,
+    A400: #ffffff,
+    A700: #000000
+  )
+);
+
+$aca-accent-green: (
+  50: #e7f3e7,
+  100: #c2e1c2,
+  200: #9acd9a,
+  300: #72b971,
+  400: #53aa52,
+  500: #359b34,
+  600: #30932f,
+  700: #288927,
+  800: #227f21,
+  900: #166d15,
+  A100: #359b34,
+  A200: #00754a,
+  A400: #76bc21,
+  A700: #c2e76b,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #000000,
+    400: #000000,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #ffffff,
+    A200: #ffffff,
+    A400: #000000,
+    A700: #000000
+  )
+);
+
+$aca-warn: (
+  50: #f6e1e5,
+  100: #eab5bf,
+  200: #dc8495,
+  300: #cd526a,
+  400: #c32d4a,
+  500: #b8082a,
+  600: #b10725,
+  700: #a8061f,
+  800: #a00419,
+  900: #91020f,
+  A100: #b8082a,
+  A200: #db0f36,
+  A400: #ff5252,
+  A700: #ff8a80,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #ffffff,
+    400: #ffffff,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #ffffff,
+    A200: #ffffff,
+    A400: #ffffff,
+    A700: #000000
+  )
+);

package/ui/custom-theme.scss

@@ -0,0 +1,28 @@
+@use '@angular/material' as mat;
+@import './overrides/adf-style-fixes.theme';
+@import './overrides/adf-pagination.theme';
+@import './overrides/ay11';
+@import './overrides/adf-about.theme.scss';
+@import './colors';
+
+$mat-primary-palette: mat.define-palette($aca-primary-blue, A100);
+$mat-accent-palette: mat.define-palette($aca-accent-green, A200);
+$mat-warn-palette: mat.define-palette($aca-warn, A100);
+
+$app-typography: mat.define-typography-config($font-family: 'Open Sans'
+  );
+
+@include mat.core($app-typography);
+
+$custom-theme: mat.define-light-theme($mat-primary-palette,
+    $mat-accent-palette,
+    $mat-warn-palette);
+
+@mixin custom-theme($theme) {
+  @include mat.all-component-themes($theme);
+  @include adf-core-theme($theme);
+  @include adf-style-fixes($theme);
+  @include adf-pagination-theme($theme);
+  @include ay11-theme();
+  @include adf-about-theme($theme);
+}

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

@@ -0,0 +1,16 @@
+@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,138 @@
+@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 getColorLuminance($color) {
+  $colors: (
+    'red': red($color),
+    'green': green($color),
+    'blue': blue($color)
+  );
+
+  @each $name, $value in $colors {
+    $adjusted: 0;
+    $value: $value / 255;
+
+    @if $value < 0.03928 {
+      $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 createTextColor($color, $colorType: 'primary') {
+    $red: red($color);
+    $green: green($color);
+    $blue: blue($color);
+
+    $lightText: $light-primary-text;
+    $darkText: $dark-primary-text;
+
+    @if ($colorType == 'accent') {
+        $lightText: $light-secondary-text;
+        $darkText: $dark-secondary-text;
+    }
+
+    $lightTextLuminance: getColorLuminance($lightText);
+    $darkTextLuminance: getColorLuminance($darkText);
+    $backgroundColorLuminance: getColorLuminance($color);
+
+    $lightTextLuminance: $lightTextLuminance + 0.5;
+    $darkTextLuminance: $darkTextLuminance + 0.5;
+    $backgroundColorLuminance: $backgroundColorLuminance + 0.5;
+
+    $luminanceContrastForLightText: $lightTextLuminance / $backgroundColorLuminance;
+    $luminanceContrastForDarkText: $backgroundColorLuminance / $darkTextLuminance;
+
+    $textColour: $lightText;
+
+    @if ($luminanceContrastForDarkText > $luminanceContrastForLightText) {
+        $textColour: $darkText;
+    }
+
+    @return $textColour;
+}
+
+@function createColorPalette($color, $colorType: '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: createTextColor($color50, $colorType);
+    $contrast100: createTextColor($color100, $colorType);
+    $contrast200: createTextColor($color200, $colorType);
+    $contrast300: createTextColor($color300, $colorType);
+    $contrast400: createTextColor($color400, $colorType);
+    $contrast500: createTextColor($color500, $colorType);
+    $contrast600: createTextColor($color600, $colorType);
+    $contrast700: createTextColor($color700, $colorType);
+    $contrast800: createTextColor($color800, $colorType);
+    $contrast900: createTextColor($color900, $colorType);
+
+    $contrastA100: createTextColor($colorA100, $colorType);
+    $contrastA200: createTextColor($colorA200, $colorType);
+    $contrastA400: createTextColor($colorA400, $colorType);
+    $contrastA700: createTextColor($colorA700, $colorType);
+
+    $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 @@
+@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,29 @@
+@use '@angular/material' as mat;
+@import '../colors';
+@import './custom-palette-creator.scss';
+
+@function get-mat-palettes($primary-color, $accent-color) {
+    $mat-primary-palette: null;
+    @if $primary-color {
+        $custom-theme-primary-palette: createColorPalette($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: createColorPalette($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,60 @@
+@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');
+
+$alfresco-typography: get-mat-typography(
+  $base-font-size,
+  $font-family,
+  $alfresco-typography
+);
+
+@include mat-core($alfresco-typography);
+
+$palettes: get-mat-palettes($primary-color, $accent-color);
+$custom-theme: mat-light-theme(
+  map-get($palettes, primary),
+  map-get($palettes, accent),
+  map-get($palettes, warning),
+);
+
+@if $background-color {
+  $custom-background: get-custom-background-color($background-color, $custom-theme);
+  $custom-theme: map_merge($custom-theme, (background: $custom-background));
+}
+
+@if $text-color {
+  $custom-foreground: get-custom-text-color($text-color, $custom-theme);
+  $custom-theme: map_merge($custom-theme, (foreground: $custom-foreground));
+}
+
+@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.scss';

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,63 @@
+@use '@angular/material' as mat;
+@import '../variables/font-family.scss';
+
+@function get-mat-typography(
+    $base-font-size,
+    $font-family,
+    $default-typography
+) {
+    $custom-typography: $default-typography;
+
+    @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
+    )
+};
+
+@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($border-color: var(--theme-blue-button-color), $thickness: 2px, $radius: 4px) {
+  outline: $thickness solid $border-color;
+  border-radius: $radius;
+}
+
+@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,39 @@
+@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);
+      border-radius: 12px;
+    }
+
+    mat-expansion-panel-header {
+      display: flex;
+      height: 80px !important;
+      padding: 24px 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,47 @@
+@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;
+  }
+}