[ACS-5347] New styles for filter states (#3274)

* [ACS-5347] New styles for filter states * [ACS-5347] Add disabled chips colors
Alfresco · Jun 14, 2023 · 9fd306d · 9fd306d
1 parent fa27e0c
commit 9fd306d
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 22 deletions.
diff --git a/projects/aca-content/src/lib/components/common/user-info/user-info.component.scss b/projects/aca-content/src/lib/components/common/user-info/user-info.component.scss
@@ -13,8 +13,8 @@
     line-height: 32px;
     text-align: center;
     vertical-align: middle;
-    background: var(--theme-user-initials-background-color);
-    color: var(--theme-user-intials-text-color);
+    background: var(--theme-about-panel-border-color);
+    color: var(--theme-selected-text-color);
     border: none;
   }
 

diff --git a/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss b/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss
@@ -1,8 +1,5 @@
 @import '../../../ui/mixins';
 
-$adf-chip-background: #efefef;
-$contrast-gray: #646569;
-
 .adf-search-results {
   @include flex-row;
 
@@ -28,13 +25,29 @@ $contrast-gray: #646569;
     border-bottom: 1px solid var(--theme-border-color);
 
     .adf-search-filter-chip {
+      &[disabled] {
+        &.mat-chip {
+          background-color: var(--theme-disabled-chip-background-color);
+          color: var(--theme-search-chip-icon-color);
+        }
+      }
+
       &.mat-chip {
-        background-color: $adf-chip-background;
-        color: $contrast-gray;
+        background-color: var(--theme-dropdown-color);
+        color: var(--theme-selected-text-color);
+
+        &:hover,
+        &:focus {
+          background-color: var(--theme-grey-background-hover);
+        }
+
+        mat-icon {
+          color: var(--theme-search-chip-icon-color);
+        }
       }
 
       .adf-search-filter-placeholder {
-        color: $contrast-gray;
+        color: var(--theme-selected-text-color);
       }
     }
   }

diff --git a/projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.scss b/projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.scss
@@ -8,7 +8,7 @@
   line-height: 32px;
   text-align: center;
   vertical-align: middle;
-  background: var(--theme-user-initials-background-color);
-  color: var(--theme-user-intials-text-color);
+  background: var(--theme-about-panel-border-color);
+  color: var(--theme-selected-text-color);
   border: none;
 }
diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss b/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss
@@ -11,7 +11,7 @@ app-view-profile {
     width: 100%;
     height: 32px;
     padding: 32px 0;
-    border-bottom: 1px solid var(--theme-header-border-color);
+    border-bottom: 1px solid var(--theme-about-panel-border-color);
   }
 
   .app-profile-title {

diff --git a/projects/aca-content/src/lib/ui/overrides/ay11.scss b/projects/aca-content/src/lib/ui/overrides/ay11.scss
@@ -162,7 +162,7 @@
   }
 
   .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
-    background-color: var(--theme-datetimepicker-cell-focus-background);
+    background-color: var(--theme-about-panel-border-color);
     color: var(--theme-datetimepicker-font-color);
   }
 

diff --git a/projects/aca-content/src/lib/ui/variables/variables.scss b/projects/aca-content/src/lib/ui/variables/variables.scss
@@ -22,20 +22,19 @@ $grey-hover-background: rgba(33, 33, 33, 0.24);
 $blue-save-button-background: #1f74db;
 $black-heading: #4e4c4c;
 $grey-dropdown-background: #eee;
+$grey-background-hover: #e0e0e0;
 $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);
-$aca-user-initials-background: rgba(33, 33, 33, 0.12);
-$aca-user-initials-text-color: #212121;
+$search-chip-icon-color: #757575;
+$disabled-chip-background-color: #f5f5f5;
 
 // CSS Variables
 $defaults: (
@@ -58,6 +57,7 @@ $defaults: (
   --theme-blue-button-color: $blue-save-button-background,
   --theme-heading-color: $black-heading,
   --theme-dropdown-color: $grey-dropdown-background,
+  --theme-grey-background-hover: $grey-background-hover,
   --theme-grey-divider-color: $grey-divider,
   --theme-pagination-background-color: mat.get-color-from-palette($background, background),
   --theme-about-panel-border-color: $grey-background,
@@ -67,17 +67,14 @@ $defaults: (
   --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,
-  --theme-user-initials-background-color: $aca-user-initials-background,
-  --theme-user-intials-text-color: $aca-user-initials-text-color
+  --theme-search-chip-icon-color: $search-chip-icon-color,
+  --theme-disabled-chip-background-color: $disabled-chip-background-color
 );
 
 // propagates SCSS variables into the CSS variables scope

diff --git a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss
@@ -31,7 +31,7 @@
           align-items: center;
           border-radius: 6px;
           height: 32px;
-          background: var(--theme-app-toolbar-button-background-color);
+          background: var(--theme-grey-text-background-color);
           color: var(--theme-selected-text-color);
           line-height: 32px;