@alfresco/aca-content 4.0.0-4895233349

package/ui/overrides/ay11.scss

@@ -0,0 +1,232 @@
+@mixin ay11-theme() {
+  .mat-icon-button,
+  .mat-button,
+  .mat-checkbox,
+  .mat-raised-button {
+    &:focus-visible {
+      @include rounded-outline;
+    }
+
+    .mat-ripple-element {
+      display: none;
+    }
+
+    &.cdk-keyboard-focused {
+      .mat-button-focus-overlay {
+        display: none;
+      }
+
+      .mat-checkbox-ripple {
+        @include rounded-outline;
+
+        height: 22px;
+        width: 22px;
+        left: calc(50% - 11px);
+        top: calc(50% - 11px);
+      }
+    }
+  }
+
+  .adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected > svg {
+    fill: var(--theme-blue-button-color) !important;
+  }
+
+  .mat-list-base .mat-list-option {
+    .mat-list-item-content {
+      @include rounded-border(transparent);
+    }
+
+    &:focus-visible {
+      background-color: white;
+
+      .mat-list-item-content {
+        @include rounded-border;
+      }
+    }
+  }
+
+  .acs-close-members-container {
+    .mat-icon-button {
+      outline: none;
+      line-height: 36px !important;
+
+      @include rounded-border(transparent);
+
+      &:focus-visible {
+        @include rounded-border;
+      }
+    }
+  }
+
+  .adf-search-user-button,
+  .app-search-button {
+    line-height: 36px !important;
+
+    @include rounded-border(transparent);
+
+    &:focus-visible {
+      outline: none;
+
+      @include rounded-border;
+    }
+  }
+
+  .mat-menu-item {
+    .mat-menu-ripple {
+      display: none;
+    }
+
+    @include rounded-border(transparent);
+
+    &:focus-visible {
+      @include rounded-border;
+
+      background-color: white;
+    }
+
+    &.cdk-keyboard-focused:not([disabled]) {
+      background-color: white;
+    }
+  }
+
+  .adf-toolbar-title {
+    padding: 2px;
+  }
+
+  .mat-option {
+    &.cdk-keyboard-focused {
+      .mat-option-ripple {
+        @include rounded-outline;
+      }
+    }
+  }
+
+  .mat-slide-toggle {
+    .mat-slide-toggle-thumb {
+      width: 15px;
+      height: 15px;
+      transform: translate(20%, 50%);
+      background-color: #484a4d;
+    }
+
+    .mat-slide-toggle-bar {
+      border-radius: 15px;
+      height: 20px;
+    }
+
+    .mat-slide-toggle-thumb-container {
+      top: -5px;
+    }
+
+    .mat-slide-toggle-ripple {
+      display: none;
+    }
+
+    &.cdk-keyboard-focused {
+      .mat-slide-toggle-bar {
+        outline: 2px solid var(--theme-blue-button-color);
+      }
+    }
+
+    &.mat-primary.mat-checked:not(.mat-disabled) {
+      .mat-slide-toggle-bar {
+        background-color: var(--theme-blue-button-color);
+      }
+
+      .mat-slide-toggle-thumb {
+        background-color: white;
+      }
+    }
+  }
+
+  .mat-stroked-button,
+  .mat-flat-button {
+    &.cdk-keyboard-focused {
+      .mat-button-ripple.mat-ripple {
+        outline: 2px solid var(--theme-blue-button-color);
+        inset: -4px;
+      }
+    }
+  }
+
+  .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content {
+    outline: 2px solid var(--theme-datetimepicker-cell-focus-border);
+  }
+
+  .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected) {
+    background-color: var(--theme-datetimepicker-cell-background) !important;
+  }
+
+  .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
+    background-color: var(--theme-datetimepicker-selected-date-background);
+  }
+
+  .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
+    background-color: var(--theme-datetimepicker-cell-focus-background);
+    color: var(--theme-datetimepicker-font-color);
+  }
+
+  .mat-expansion-panel .mat-expansion-panel-header {
+    border: 2px solid transparent;
+
+    .mat-button {
+      outline: none;
+
+      @include rounded-border(transparent);
+
+      &:focus-visible {
+        @include rounded-border;
+
+        background-color: white;
+      }
+    }
+
+    &.cdk-keyboard-focused:not([aria-disabled='true']) {
+      background-color: white;
+
+      @include rounded-border;
+    }
+  }
+
+  .adf-error-snackbar {
+    background-color: #ba1b1b;
+
+    .mat-simple-snackbar,
+    .mat-simple-snackbar-action {
+      color: white;
+    }
+  }
+
+  .adf-info-snackbar {
+    background-color: var(--theme-blue-button-color);
+
+    .mat-simple-snackbar,
+    .mat-simple-snackbar-action {
+      color: white;
+    }
+  }
+
+  .adf-filter-button {
+    margin-left: -2px !important;
+  }
+
+  .adf-pagination {
+    &__perpage-block,
+    &__actualinfo-block {
+      /* stylelint-disable-next-line no-descending-specificity */
+      .mat-icon-button {
+        left: 3px;
+
+        &:focus-visible {
+          outline: none;
+        }
+
+        &.cdk-keyboard-focused {
+          .mat-icon {
+            @include rounded-outline;
+          }
+        }
+      }
+    }
+  }
+}

package/ui/theme.scss

@@ -0,0 +1,55 @@
+@use '@angular/material' as mat;
+@import '@alfresco/adf-core/theming';
+@import 'custom-theme';
+@import 'variables/variables';
+@include custom-theme($custom-theme);
+
+$contrast-gray: #646569;
+
+.mat-toolbar {
+  color: var(--theme-text-color, rgba(0, 0, 0, 0.54));
+}
+
+.adf-name-location-cell-location {
+  color: $contrast-gray !important;
+}
+
+.mat-form-field-label, .mat-tab-label, .mat-checkbox-label, .mat-toolbar {
+  color: $contrast-gray !important;
+  opacity: 1 !important;
+}
+
+.mat-tab-label-active {
+  color: #212121 !important;
+}
+
+.adf-upload-dialog {
+  &__header, &__content {
+    color: $contrast-gray;
+  }
+}
+
+.adf-version-list-item {
+  &-comment, &-date {
+    color: $contrast-gray;
+    opacity: 1 !important;
+  }
+}
+
+.mat-chip.mat-standard-chip {
+  background-color: #efefef;
+  color: $contrast-gray;
+}
+
+.adf-textitem-edit-icon.mat-icon {
+  color: $contrast-gray !important;
+}
+
+.adf-property-field.adf-card-textitem-field:hover .adf-property-clear-value {
+  color: $contrast-gray !important;
+}
+
+.adf-empty-content__icon {
+  color: $contrast-gray;
+}
+

package/ui/variables/font-family.scss

@@ -0,0 +1 @@
+$default-font-family: "Open Sans";

package/ui/variables/variables.scss

@@ -0,0 +1,92 @@
+/* stylelint-disable scss/no-global-function-names */
+@use '@angular/material' as mat;
+
+$warn: map-get($custom-theme, warn);
+$accent: map-get($custom-theme, accent);
+$primary: map-get($custom-theme, primary);
+$foreground: map-get($custom-theme, foreground);
+$background: map-get($custom-theme, background);
+
+// Custom variables - ACA specific styling:
+$data-table-thumbnail-width: 35px;
+$data-table-cell-min-width: 150px;
+$data-table-cell-min-width-no-grow: 120px;
+$data-table-cell-min-width-file-size: 110px !important;
+
+// Upload drag
+$adf-upload-dragging-color: unset;
+$adf-upload-dragging-border: 1px solid #00bcd4;
+$adf-upload-dragging-background: #e0f7fa;
+$adf-upload-dragging-level1-color: unset;
+$adf-upload-dragging-level1-border: none;
+$grey-background: rgba(33, 33, 33, 0.12);
+$grey-text-background: rgba(33, 33, 33, 0.05);
+$grey-hover-background: rgba(33, 33, 33, 0.24);
+$blue-save-button-background: #1f74db;
+$black-heading: #4e4c4c;
+$grey-dropdown-background: #eee;
+$grey-divider: rgba(0, 0, 0, 0.22);
+$datetimepicker-font-color: rgba(black, 0.87);
+$datetimepicker-selected-date-background: #2254b2;
+$datetimepicker-cell-background-color: #fff;
+$datetimepicker-cell-focus-border-color: #1f74db;
+$datetimepicker-cell-focus-background-color: rgba(33, 33, 33, 0.12);
+$sidenav-background-color: #f8f8f8;
+$selected-text-color: #212121;
+$selected-background-color: rgba(31, 116, 219, 0.24);
+$action-button-text-color: rgba(33, 35, 40, 0.7);
+$page-layout-header-background-color: #fff;
+$aca-toolbar-button-background-color: rgba(33, 33, 33, 0.05);
+
+// CSS Variables
+$defaults: (
+  --theme-primary-color: mat.get-color-from-palette($primary),
+  --theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast),
+  --theme-warn-color: mat.get-color-from-palette($warn),
+  --theme-accent-color: mat.get-color-from-palette($accent),
+  --theme-background-color: mat.get-color-from-palette($background, background),
+  --theme-text-color: mat.get-color-from-palette($foreground, text, 0.54),
+  --theme-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87),
+  --theme-title-color: mat.get-color-from-palette($foreground, text, 0.87),
+  --theme-text-disabled-color: mat.get-color-from-palette($foreground, text, 0.38),
+  --theme-border-color: mat.get-color-from-palette($foreground, text, 0.07),
+  --theme-card-background-color: mat.get-color-from-palette($background, card),
+  --theme-foreground-text-color: mat.get-color-from-palette($foreground, text, 0.72),
+  --theme-foreground-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87),
+  --theme-secondary-text-color: mat.get-color-from-palette($foreground, secondary-text),
+  --theme-divider-color: mat.get-color-from-palette($foreground, divider, 0.07),
+  --theme-dialog-background-color: mat.get-color-from-palette($background, dialog),
+  --theme-header-text-color: mat.get-color-from-palette($foreground, text, 0.87),
+  --new-button-font-size: 0.9rem,
+  --theme-grey-text-background-color: $grey-text-background,
+  --theme-grey-background-color: $grey-background,
+  --theme-grey-hover-background-color: $grey-hover-background,
+  --theme-blue-button-color: $blue-save-button-background,
+  --theme-heading-color: $black-heading,
+  --theme-dropdown-color: $grey-dropdown-background,
+  --theme-grey-divider-color: $grey-divider,
+  --theme-pagination-background-color: mat.get-color-from-palette($background, background),
+  --theme-about-panel-border-color: $grey-background,
+  --theme-about-panel-background-color: mat.get-color-from-palette($background, card),
+  --theme-about-panel-title-color: mat.get-color-from-palette($foreground, text),
+  --theme-datetimepicker-font-color: $datetimepicker-font-color,
+  --theme-datetimepicker-selected-date-background: $datetimepicker-selected-date-background,
+  --theme-datetimepicker-cell-background: $datetimepicker-cell-background-color,
+  --theme-datetimepicker-cell-focus-border: $datetimepicker-cell-focus-border-color,
+  --theme-datetimepicker-cell-focus-background: $datetimepicker-cell-focus-background-color,
+  --theme-sidenav-background-color: $sidenav-background-color,
+  --theme-selected-text-color: $selected-text-color,
+  --theme-selected-background-color: $selected-background-color,
+  --theme-hover-background-color: $grey-text-background,
+  --theme-action-button-text-color: $action-button-text-color,
+  --theme-header-border-color: $grey-background,
+  --theme-page-layout-header-background-color: $page-layout-header-background-color,
+  --theme-app-toolbar-button-background-color: $aca-toolbar-button-background-color
+);
+
+// propagates SCSS variables into the CSS variables scope
+:root {
+  @each $name, $value in $defaults {
+    #{$name}: #{$value};
+  }
+}