AAE-34439 Cleanup Styles (#10815)

* cleanup variables

* cleanup reference variables

* cleanup component variables

* cleanup color schemes

* cleanup color schemes

* mark todos with jira refs [ci:force]

lib/core/src/lib/about/about-package/package-list.component.scss

@@ -1,19 +1,19 @@
 .adf-package-list-table {
-    background: var(--adf-package-list-table-background);
+    background: var(--adf-theme-background-card-color);
 
     &__header-row {
-        min-height: var(--adf-package-list-table-header-min-height);
+        min-height: 56px;
     }
 
     &__header-cell {
-        color: var(--adf-package-list-table-header-cell-color);
+        color: var(--adf-theme-foreground-secondary-text-color);
     }
 
     &__row {
-        min-height: var(--adf-package-list-table-row-min-height);
+        min-height: 48px;
 
         &-cell {
-            color: var(--adf-package-list-table-row-cell-color);
+            color: var(--adf-theme-foreground-text-color);
         }
     }
 }

lib/core/src/lib/about/about-server-settings/about-server-settings.component.scss

@@ -1,15 +1,15 @@
 .adf-about-server-settings {
     &__card {
-        background: var(--adf-about-server-settings-background);
-        color: var(--adf-about-server-settings-color);
-        border-radius: var(--adf-about-server-settings-border-radius);
-        padding: var(--adf-about-server-settings-padding);
+        background: var(--adf-theme-background-card-color);
+        color: var(--adf-theme-foreground-text-color);
+        border-radius: 4px;
+        padding: 16px;
 
         &:has(p) {
             border: none;
 
             p {
-                margin: 0 0 10px 0;
+                margin: 0 0 10px;
 
                 &:last-child {
                     margin: 0;

lib/core/src/lib/about/about.component.scss

@@ -1,9 +1,9 @@
 .adf-about-panel {
     &-header {
-        height: var(--adf-about-panel-header-height);
+        height: 48px;
 
         &__title {
-            color: var(--adf-about-panel-header-title-color);
+            color: var(--adf-theme-foreground-text-color);
         }
     }
-}
+}

lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss

@@ -41,9 +41,9 @@
         display: flex;
         place-content: center space-between;
         align-items: center;
-        background: var(--adf-card-view-array-item-background);
-        border-color: var(--adf-card-view-array-item-border-color);
-        border-radius: var(--adf-card-view-array-item-border-radius);
+        background: var(--adf-theme-background-card-color);
+        border-color: var(--adf-theme-foreground-divider-color);
+        border-radius: 0;
 
         #{$mat-chip}:hover {
             cursor: pointer;

lib/core/src/lib/card-view/components/card-view/card-view.component.scss

@@ -1,9 +1,9 @@
 @import 'styles/mat-selectors';
 
 .adf-property-list {
-    border: var(--adf-card-view-border);
-    border-color: var(--adf-card-view-border-color);
-    border-radius: var(--adf-card-view-border-radius);
+    border: unset;
+    border-color: var(--adf-theme-foreground-divider-color);
+    border-radius: 0;
 
     .adf-property-label {
         color: var(--adf-metadata-property-panel-text-color);

lib/core/src/lib/identity-user-info/identity-user-info.component.scss

@@ -13,23 +13,24 @@
 
     &-userinfo-name {
         padding: 0 5px;
+
         @include layout-bp(lt-md) {
             display: none;
         }
     }
 
     &-userinfo-pic {
-        background: var(--adf-identity-user-info-background);
+        background: var(--adf-theme-primary-300);
         display: inline-block;
-        width: var(--adf-identity-user-info-width);
-        height: var(--adf-identity-user-info-height);
+        width: 40px;
+        height: 40px;
         border-radius: 100px;
         text-align: center;
         font-weight: bolder;
-        font-size: var(--adf-identity-user-info-font-size);
+        font-size: var(--theme-adf-picture-1-font-size);
         text-transform: uppercase;
         vertical-align: middle;
-        line-height: var(--adf-identity-user-info-line-height);
+        line-height: 40px;
     }
 
     &-userinfo-profile-container {
@@ -74,7 +75,7 @@
     }
 
     &-userinfo-profile-picture {
-        background: var(--adf-identity-user-info-background);
+        background: var(--adf-theme-primary-300);
         background-size: cover;
         border-radius: 50%;
         height: 80px;
@@ -90,7 +91,7 @@
     }
 }
 
-@media only screen and (min-device-width: 480px) {
+@media only screen and (device-width >= 480px) {
     .adf-identity-userinfo-menu.adf-userinfo-menu {
         max-height: 450px;
         min-width: 450px;

lib/core/src/lib/info-drawer/info-drawer.component.scss

@@ -70,9 +70,9 @@
     }
 
     div[role='tab'].adf-info-drawer-tab {
-        color: var(--adf-info-drawer-tab-default-color);
-        background-color: var(--adf-info-drawer-tab-default-background);
-        border-bottom: var(--adf-info-drawer-tab-default-bottom-line);
+        color: var(--theme-accent-color);
+        background-color: var(--adf-theme-background-card-color);
+        border-bottom: unset;
         opacity: 1;
 
         &#{$mat-tab-label} {
@@ -84,20 +84,20 @@
         }
 
         &--active {
-            color: var(--adf-info-drawer-tab-active-unfocused-color);
-            background-color: var(--adf-info-drawer-tab-active-unfocused-background);
-            border-bottom: 1px solid var(--adf-info-drawer-tab-active-unfocused-bottom-line);
+            color: var(--theme-primary-color);
+            background-color: var(--adf-theme-background-card-color);
+            border-bottom: 1px solid unset;
 
             &:focus {
-                color: var(--adf-info-drawer-tab-active-focused-color);
-                border-bottom: var(--adf-info-drawer-tab-active-focused-bottom-line);
+                color: var(--adf-theme-foreground-text-color);
+                border-bottom: unset;
             }
         }
 
         &:hover:not([class*='--disabled'], [class*='--active']) {
-            color: var(--adf-info-drawer-tab-hover-color);
-            background-color: var(--adf-info-drawer-tab-hover-background);
-            border-bottom: var(--adf-info-drawer-tab-hover-bottom-line);
+            color: var(--theme-accent-color);
+            background-color: var(--adf-theme-background-card-color);
+            border-bottom: unset;
         }
 
         &--disabled {

lib/core/src/lib/layout/components/header/header.component.scss

@@ -59,15 +59,15 @@ adf-layout-header .adf-toolbar-container-row {
     }
 
     .adf-header-icon-button {
-        color: var(--adf-header-icon-button-default-color);
-        border-radius: var(--adf-header-icon-button-default-border-radius);
+        color: inherit;
+        border-radius: 50%;
 
         &:hover {
-            color: var(--adf-header-icon-button-hover-color);
+            color: inherit;
         }
 
         &:active {
-            color: var(--adf-header-icon-button-pressed-color);
+            color: inherit;
         }
     }
 }
@@ -116,7 +116,7 @@ adf-layout-header .adf-toolbar-container-row {
     }
 
     .adf-userinfo-container {
-        margin-right: var(--adf-user-info-container-margin-right);
+        margin-right: 8px;
     }
 
     .adf-userinfo-name {

lib/core/src/lib/styles/_colors.scss

@@ -2,143 +2,8 @@
 // Accent color palette
 $black-87-opacity: rgba(black, 0.87);
 $white-87-opacity: rgba(white, 0.87);
-$black-12-opacity: rgba(black, 0.12);
-$white-12-opacity: rgba(white, 0.12);
-$black-6-opacity: rgba(black, 0.06);
-$white-6-opacity: rgba(white, 0.06);
-
-$alfresco-ecm-cyan: (
-    50: #e0f7fa,
-    100: #b2ebf2,
-    200: #80deea,
-    300: #4dd0e1,
-    400: #26c6da,
-    500: #00bcd4,
-    600: #00acc1,
-    700: #0097a7,
-    800: #00838f,
-    900: #006064,
-    A100: #84ffff,
-    A200: #18ffff,
-    A400: #00e5ff,
-    A700: #00b8d4,
-    contrast: (
-        50: $black-87-opacity,
-        100: $black-87-opacity,
-        200: $black-87-opacity,
-        300: $black-87-opacity,
-        400: $black-87-opacity,
-        500: white,
-        600: white,
-        700: white,
-        800: white,
-        900: $white-87-opacity,
-        A100: $black-87-opacity,
-        A200: $black-87-opacity,
-        A400: $black-87-opacity,
-        A700: $black-87-opacity,
-    )
-);
-
-$alfresco-dev-teal: (
-    50: #e0f2f1,
-    100: #b2dfdb,
-    200: #80cbc4,
-    300: #4db6ac,
-    400: #26a69a,
-    500: #009688,
-    600: #00897b,
-    700: #00796b,
-    800: #00695c,
-    900: #004d40,
-    A100: #a7ffeb,
-    A200: #64ffda,
-    A400: #1de9b6,
-    A700: #00bfa5,
-    contrast: (
-        50: $black-87-opacity,
-        100: $black-87-opacity,
-        200: $black-87-opacity,
-        300: $black-87-opacity,
-        400: $black-87-opacity,
-        500: white,
-        600: white,
-        700: white,
-        800: $white-87-opacity,
-        900: $white-87-opacity,
-        A100: $black-87-opacity,
-        A200: $black-87-opacity,
-        A400: $black-87-opacity,
-        A700: $black-87-opacity,
-    )
-);
-
-$alfresco-ecm-blue: (
-    50: #e3f2fd,
-    100: #bbdefb,
-    200: #90caf9,
-    300: #64b5f6,
-    400: #42a5f5,
-    500: #2196f3,
-    600: #1e88e5,
-    700: #1976d2,
-    800: #1565c0,
-    900: #0d47a1,
-    A100: #82b1ff,
-    A200: #448aff,
-    A400: #2979ff,
-    A700: #2962ff,
-    contrast: (
-        50: $black-87-opacity,
-        100: $black-87-opacity,
-        200: $black-87-opacity,
-        300: $black-87-opacity,
-        400: $black-87-opacity,
-        500: white,
-        600: white,
-        700: white,
-        800: $white-87-opacity,
-        900: $white-87-opacity,
-        A100: $black-87-opacity,
-        A200: white,
-        A400: white,
-        A700: white,
-    )
-);
-
-$alfresco-bpm-green: (
-    50: #f1f8e9,
-    100: #dcedc8,
-    200: #c5e1a5,
-    300: #aed581,
-    400: #9ccc65,
-    500: #8bc34a,
-    600: #7cb342,
-    700: #689f38,
-    800: #558b2f,
-    900: #33691e,
-    A100: #ccff90,
-    A200: #b2ff59,
-    A400: #76ff03,
-    A700: #64dd17,
-    contrast: (
-        50: $black-87-opacity,
-        100: $black-87-opacity,
-        200: $black-87-opacity,
-        300: $black-87-opacity,
-        400: $black-87-opacity,
-        500: $black-87-opacity,
-        600: $black-87-opacity,
-        700: $black-87-opacity,
-        800: white,
-        900: white,
-        A100: $black-87-opacity,
-        A200: $black-87-opacity,
-        A400: $black-87-opacity,
-        A700: $black-87-opacity,
-    )
-);
 
+// [AAE-34457] TODO: move to the alfresco-applications: apps/admin-cc/src/custom-style.scss
 $alfresco-warn: (
     50: #ffebee,
     100: #ffcdd2,
@@ -168,43 +33,11 @@ $alfresco-warn: (
         A100: $black-87-opacity,
         A200: white,
         A400: white,
-        A700: white,
-    )
-);
-
-$alfresco-accent-purple: (
-    50: #e8eaf6,
-    100: #c5cae9,
-    200: #9fa8da,
-    300: #7986cb,
-    400: #5c6bc0,
-    500: #3f51b5,
-    600: #3949ab,
-    700: #303f9f,
-    800: #283593,
-    900: #1a237e,
-    A100: #8c9eff,
-    A200: #536dfe,
-    A400: #3d5afe,
-    A700: #304ffe,
-    contrast: (
-        50: $black-87-opacity,
-        100: $black-87-opacity,
-        200: $black-87-opacity,
-        300: white,
-        400: white,
-        500: $white-87-opacity,
-        600: $white-87-opacity,
-        700: $white-87-opacity,
-        800: $white-87-opacity,
-        900: $white-87-opacity,
-        A100: $black-87-opacity,
-        A200: white,
-        A400: white,
-        A700: $white-87-opacity,
+        A700: white
     )
 );
 
+// [AAE-34458] TODO: move to HxP: apps/admin-apa/src/custom-style.scss
 $alfresco-accent-orange: (
     50: #fff3e0,
     100: #ffe0b2,
@@ -234,7 +67,7 @@ $alfresco-accent-orange: (
         A100: $black-87-opacity,
         A200: $black-87-opacity,
         A400: $black-87-opacity,
-        A700: black,
+        A700: black
     )
 );
 /* stylelint-enable */

lib/core/src/lib/styles/_components-variables.scss

@@ -1,105 +0,0 @@
-/* stylelint-disable value-list-max-empty-lines */
-/* stylelint-disable scss/no-global-function-names */
-@use './reference-variables' as *;
-@use '@angular/material' as mat;
-
-@mixin adf-components-variables($theme) {
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
-
-    $defaults: (
-        --adf-card-view-background: mat.get-color-from-palette($background, card),
-        --adf-card-view-border: $adf-ref-card-border,
-        --adf-card-view-border-color: mat.get-color-from-palette($foreground, divider),
-        --adf-card-view-border-radius: $adf-ref-card-border-radius-slim,
-        --adf-card-view-array-item-background: mat.get-color-from-palette($background, card),
-        --adf-card-view-array-item-border: $adf-ref-card-border,
-        --adf-card-view-array-item-border-color: mat.get-color-from-palette($foreground, divider),
-        --adf-card-view-array-item-border-radius: $adf-ref-card-border-radius-slim,
-        --adf-edit-task-and-service-filter-header-title-color: mat.get-color-from-palette($foreground, text),
-        --adf-edit-task-and-service-filter-header-description-color: mat.get-color-from-palette($foreground, secondary-text),
-        --adf-edit-task-and-service-filter-content-text-label-color: mat.get-color-from-palette($foreground, secondary-text),
-        --adf-edit-task-and-service-filter-content-select-label-color: mat.get-color-from-palette($foreground, secondary-text),
-        --adf-edit-task-and-service-filter-header-height: $adf-ref-height-48,
-        --adf-about-panel-header-height: $adf-ref-height-48,
-        --adf-about-panel-header-title-color: mat.get-color-from-palette($foreground, text),
-        --adf-edit-process-filter-header-height: $adf-ref-height-48,
-        --adf-edit-process-filter-header-title-color: mat.get-color-from-palette($foreground, text),
-        --adf-edit-process-filter-header-description-color: mat.get-color-from-palette($foreground, secondary-text),
-        --adf-edit-process-filter-content-text-label-color: mat.get-color-from-palette($foreground, secondary-text),
-        --adf-edit-process-filter-content-select-label-color: mat.get-color-from-palette($foreground, secondary-text),
-        --adf-about-server-settings-background: mat.get-color-from-palette($background, card),
-        --adf-about-server-settings-color: mat.get-color-from-palette($foreground, text),
-        --adf-about-server-settings-border-radius: $adf-ref-card-border-radius-normal,
-        --adf-about-server-settings-padding: $adf-ref-card-padding,
-        --adf-package-list-table-background: mat.get-color-from-palette($background, card),
-        --adf-package-list-table-header-min-height: $adf-ref-table-header-min-height,
-        --adf-package-list-table-header-cell-color: mat.get-color-from-palette($foreground, secondary-text),
-        --adf-package-list-table-row-min-height: $adf-ref-table-row-min-height,
-        --adf-package-list-table-row-cell-color: mat.get-color-from-palette($foreground, text),
-        --adf-identity-user-info-background: var(--adf-theme-primary-300),
-        --adf-identity-user-info-height: $adf-ref-height,
-        --adf-identity-user-info-width: $adf-ref-width,
-        --adf-identity-user-info-line-height: $adf-ref-line-height,
-        --adf-identity-user-info-font-size: var(--theme-adf-picture-1-font-size),
-        --adf-user-info-container-margin-right: $adf-ref-margin-right,
-        --adf-info-drawer-tab-default-color: mat.get-color-from-palette($accent),
-        --adf-info-drawer-tab-default-background: mat.get-color-from-palette($background, card),
-        --adf-info-drawer-tab-default-bottom-line: $adf-ref-tab-bottom-line-default,
-        --adf-info-drawer-tab-hover-color: mat.get-color-from-palette($accent),
-        --adf-info-drawer-tab-hover-background: mat.get-color-from-palette($background, card),
-        --adf-info-drawer-tab-hover-bottom-line: $adf-ref-tab-bottom-line-default,
-        --adf-info-drawer-tab-active-unfocused-color: mat.get-color-from-palette($primary),
-        --adf-info-drawer-tab-active-unfocused-background: mat.get-color-from-palette($background, card),
-        --adf-info-drawer-tab-active-unfocused-bottom-line: $adf-ref-tab-bottom-line-default,
-        --adf-info-drawer-tab-active-focused-color: mat.get-color-from-palette($foreground, text),
-        --adf-info-drawer-tab-active-focused-background: mat.get-color-from-palette($primary),
-        --adf-info-drawer-tab-active-focused-bottom-line: $adf-ref-tab-bottom-line-active,
-
-        --adf-people-cloud-input-label-default-color: mat.get-color-from-palette($foreground, secondary-text),
-        --adf-people-cloud-input-label-focus-color: mat.get-color-from-palette($primary),
-        --adf-people-cloud-autosuggest-result-active-color: mat.get-color-from-palette($foreground, text),
-        --adf-people-cloud-autosuggest-result-disabled-color: mat.get-color-from-palette($foreground, secondary-text),
-        --adf-people-cloud-input-caption-error-color: mat.get-color-from-palette($warn),
-        --adf-metadata-property-panel-border-color: $adf-ref-metadata-property-panel-border-color,
-        --adf-metadata-buttons-background-color: $adf-ref-metadata-buttons-background-color,
-        --adf-metadata-action-button-clear-color: $adf-ref-metadata-action-button-clear-color,
-        --adf-metadata-property-panel-text-color: $adf-ref-metadata-property-panel-text-color,
-        --adf-metadata-property-panel-label-color: $adf-ref-metadata-property-panel-label-color,
-        --adf-metadata-property-panel-title-color: $adf-ref-metadata-property-panel-title-color,
-
-        --adf-group-cloud-input-label-default-color: mat.get-color-from-palette($foreground, secondary-text),
-        --adf-group-cloud-input-label-focus-color: mat.get-color-from-palette($primary),
-        --adf-group-cloud-autosuggest-result-active-color: mat.get-color-from-palette($foreground, text),
-        --adf-group-cloud-autosuggest-result-disabled-color: mat.get-color-from-palette($foreground, secondary-text),
-        --adf-group-cloud-input-caption-error-color: mat.get-color-from-palette($warn),
-        --adf-task-assignment-filter-option-default-color: mat.get-color-from-palette($foreground, text),
-        --adf-task-assignment-filter-option-selected-color: mat.get-color-from-palette($primary),
-        --adf-task-assignment-filter-label-default-color: mat.get-color-from-palette($foreground, secondary-text),
-        --adf-task-assignment-filter-label-focus-color: mat.get-color-from-palette($primary),
-        --adf-process-header-cloud-card-background: mat.get-color-from-palette($background, card),
-        --adf-header-icon-button-default-color: $adf-ref-header-icon-color,
-        --adf-header-icon-button-default-border-radius: $adf-ref-header-icon-border-radius,
-        --adf-header-icon-button-hover-color: $adf-ref-header-icon-color,
-        --adf-header-icon-button-pressed-color: $adf-ref-header-icon-color,
-        --adf-header-icon-button-disabled-color: $adf-ref-header-icon-color,
-        --adf-error-color: $adf-error-color,
-        --adf-secondary-button-background: $adf-secondary-button-background,
-        --adf-secondary-modal-text-color: $adf-secondary-modal-text-color,
-        --adf-disabled-button-background: $adf-disabled-button-background,
-        --adf-chip-border-color: $adf-chip-border-color,
-        --adf-sidenav-active-text-color: $adf-sidenav-active-text-color,
-
-        --adf-display-external-property-widget-preview-selection-color: mat.get-color-from-palette($foreground, secondary-text)
-    );
-
-    // propagates SCSS variables into the CSS variables scope
-    :root {
-        @each $name, $value in $defaults {
-            #{$name}: #{$value};
-        }
-    }
-}

lib/core/src/lib/styles/_index.scss

@@ -10,7 +10,6 @@
 @import '../clipboard/clipboard.theme';
 @import './snackbar.theme';
 @import './material.theme';
-@import './components-variables';
 @import '../../../../../node_modules/@mat-datetimepicker/core/datetimepicker/datetimepicker-theme';
 
 @mixin alfresco-material-theme($theme) {
@@ -93,7 +92,20 @@
         --adf-theme-mat-grey-color-a400: mat.get-color-from-palette(mat.$grey-palette, A400),
         --adf-theme-mat-grey-color-50: mat.get-color-from-palette(mat.$grey-palette, 50),
         // spacing
-        --adf-theme-spacing: map-get($custom-css-variables, 'theme-adf-spacing')
+        --adf-theme-spacing: map-get($custom-css-variables, 'theme-adf-spacing'),
+        // components
+        --adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12),
+        --adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05),
+        --adf-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698),
+        --adf-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7),
+        --adf-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24),
+        --adf-metadata-property-panel-title-color: rgb(33, 33, 33),
+        --adf-error-color: #ba1b1b,
+        --adf-secondary-button-background: #2121210d,
+        --adf-secondary-modal-text-color: #212121,
+        --adf-disabled-button-background: rgba(0, 0, 0, 0.12),
+        --adf-chip-border-color: #757575,
+        --adf-sidenav-active-text-color: rgba(0, 48, 100, 1)
     );
 
     // propagates SCSS variables into the CSS variables scope
@@ -106,7 +118,6 @@
     @include mat-datetimepicker-theme($theme);
     @include adf-snackbar-theme;
     @include adf-material-theme;
-    @include adf-components-variables($theme);
 }
 
 $adf-custom-theme-sizes: (

lib/core/src/lib/styles/_reference-variables.scss

@@ -1,33 +0,0 @@
-$adf-ref-card-border: unset;
-$adf-ref-card-border-radius-slim: 0;
-$adf-ref-height-48: 48px;
-$adf-ref-card-padding: 16px;
-$adf-ref-card-border-radius-normal: 4px;
-$adf-ref-table-header-border-style: solid;
-$adf-ref-table-header-border-bottom-width: 1px;
-$adf-ref-table-header-border-width: 0;
-$adf-ref-table-header-min-height: 56px;
-$adf-ref-table-row-border-style: solid;
-$adf-ref-table-row-border-bottom-width: 1px;
-$adf-ref-table-row-border-width: 0;
-$adf-ref-table-row-min-height: 48px;
-$adf-ref-height: 40px;
-$adf-ref-width: 40px;
-$adf-ref-line-height: 40px;
-$adf-ref-margin-right: 8px;
-$adf-ref-tab-bottom-line-default: unset;
-$adf-ref-tab-bottom-line-active: unset;
-$adf-ref-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12);
-$adf-ref-metadata-buttons-background-color: rgba(33, 33, 33, 0.05);
-$adf-ref-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698);
-$adf-ref-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7);
-$adf-ref-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24);
-$adf-ref-metadata-property-panel-title-color: rgb(33, 33, 33);
-$adf-ref-header-icon-color: inherit;
-$adf-ref-header-icon-border-radius: 50%;
-$adf-error-color: #ba1b1b;
-$adf-secondary-button-background: #2121210d;
-$adf-secondary-modal-text-color: #212121;
-$adf-disabled-button-background: rgba(0, 0, 0, 0.12);
-$adf-chip-border-color: #757575;
-$adf-sidenav-active-text-color: rgba(0, 48, 100, 1);