fix(a11y): refactor temporary overrides

vmware-clarity · Jul 30, 2024 · 0130d78 · 0130d78
1 parent 1511b13
commit 0130d78
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 21 deletions.
diff --git a/projects/angular/src/layout/vertical-nav/_properties.vertical-nav.scss b/projects/angular/src/layout/vertical-nav/_properties.vertical-nav.scss
@@ -1,6 +1,6 @@
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.   
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -24,29 +24,30 @@
       // Vertical Nav - Align
       --clr-vertical-nav-item-color: #{tokens.$cds-alias-object-interaction-color}; // var(--clr-color-neutral-700);
       --clr-vertical-nav-item-active-color: #{tokens.$cds-alias-object-interaction-color-active}; // var(--clr-color-neutral-700);
-      --clr-vertical-nav-bg-color: var(--cds-alias-object-vertical-navigation-background-color);
       --clr-vertical-nav-item-padding: #{tokens.$cds-global-space-5} #{tokens.$cds-global-space-5} #{tokens.$cds-global-space-5}
         #{tokens.$cds-global-space-7};
       --clr-vertical-nav-item-child-padding: #{tokens.$cds-global-space-5} #{tokens.$cds-global-space-6} #{tokens.$cds-global-space-5}
         #{tokens.$cds-global-space-10};
       --clr-vertical-nav-item-height: #{tokens.$cds-global-space-10};
       --clr-vertical-nav-min-width: #{tokens.$cds-global-space-12};
       --clr-vertical-nav-item-active-font-weight: #{tokens.$cds-global-typography-font-weight-semibold};
-      --clr-vertical-nav-selected-bg-color: var(
-        --cds-alias-object-interaction-vertical-navigation-background-selected
-      ); // var(--clr-color-neutral-0);
+
+      // Selected background colors
+      --clr-vertical-nav-selected-bg-color: var(--cds-alias-object-interaction-vertical-navigation-background-selected);
       --clr-vertical-nav-selected-hover-bg-color: var(
-        --cds-alias-object-interaction-background-selected-hover
-      ); // var(--clr-color-neutral-0);
+        --cds-alias-object-interaction-vertical-navigation-background-selected-hover
+      );
       --clr-vertical-nav-selected-active-bg-color: var(
-        --cds-alias-object-interaction-background-selected-active
-      ); // var(--clr-color-neutral-0);
+        --cds-alias-object-interaction-vertical-navigation-background-selected-active
+      );
+
+      // NOT selected background colors
+      --clr-vertical-nav-bg-color: var(--cds-alias-object-interaction-vertical-navigation-background-color);
+      --clr-vertical-nav-hover-bg-color: var(--cds-alias-object-interaction-vertical-navigation-background-hover);
       --clr-vertical-nav-active-bg-color: var(--cds-alias-object-interaction-vertical-navigation-background-active);
+
       --clr-vertical-nav-active-color: #{tokens.$cds-alias-object-interaction-color-active};
       --clr-vertical-nav-item-top-level-font-weight: #{tokens.$cds-global-typography-font-weight-semibold};
-      --clr-vertical-nav-hover-bg-color: var(
-        --cds-alias-object-interaction-vertical-navigation-background-hover
-      ); // var(--clr-color-neutral-400);
 
       // Vertical Nav - Trigger
       --clr-vertical-nav-toggle-icon-color: #{tokens.$cds-alias-object-interaction-color}; // var(--clr-color-neutral-1000);
@@ -62,9 +63,5 @@
       --clr-vertical-nav-header-font-weight: #{tokens.$cds-global-typography-font-weight-semibold};
       --clr-vertical-nav-header-padding: #{tokens.$cds-global-space-5} #{tokens.$cds-global-space-7};
     }
-    // @TODO use proper background for both dark and light theme.
-    [cds-theme~='dark'] {
-      --clr-vertical-nav-bg-color: #{tokens.$cds-alias-object-container-background};
-    }
   }
 }
diff --git a/projects/ui/src/temp-overrides.scss b/projects/ui/src/temp-overrides.scss
@@ -12,10 +12,16 @@
   --cds-alias-object-interaction-background-selected: #{tokens.$cds-global-color-blue-75};
   --cds-alias-object-interaction-background-selected-hover: #{tokens.$cds-global-color-construction-100};
   --cds-alias-object-interaction-background-selected-active: #{tokens.$cds-global-color-construction-200};
-  --cds-alias-object-vertical-navigation-background-color: #{tokens.$cds-global-color-cool-gray-50};
+
+  // Vertical-nav not selected
+  --cds-alias-object-interaction-vertical-navigation-background-color: #{tokens.$cds-global-color-construction-100};
+  --cds-alias-object-interaction-vertical-navigation-background-hover: #{tokens.$cds-global-color-construction-200};
+  --cds-alias-object-interaction-vertical-navigation-background-active: #{tokens.$cds-global-color-construction-300};
+
+  // Vertical-nav selected
   --cds-alias-object-interaction-vertical-navigation-background-selected: #{tokens.$cds-global-color-white};
-  --cds-alias-object-interaction-vertical-navigation-background-hover: #{tokens.$cds-global-color-construction-100};
-  --cds-alias-object-interaction-vertical-navigation-background-active: #{tokens.$cds-global-color-construction-200};
+  --cds-alias-object-interaction-vertical-navigation-background-selected-hover: #{tokens.$cds-global-color-construction-200};
+  --cds-alias-object-interaction-vertical-navigation-background-selected-active: #{tokens.$cds-global-color-construction-300};
 }
 
 [cds-theme~='dark'] {
@@ -25,8 +31,14 @@
   --cds-alias-object-interaction-background-selected: #{tokens.$cds-global-color-blue-900};
   --cds-alias-object-interaction-background-selected-active: #{tokens.$cds-global-color-construction-600};
   --cds-alias-object-interaction-background-selected-hover: #{tokens.$cds-global-color-construction-700};
-  --cds-alias-object-vertical-navigation-background-color: #{tokens.$cds-alias-object-opacity-300};
-  --cds-alias-object-interaction-vertical-navigation-background-selected: #{tokens.$cds-global-color-blue-900};
+
+  // Vertical-nav not selected
+  --cds-alias-object-interaction-vertical-navigation-background-color: #{tokens.$cds-global-color-construction-900};
   --cds-alias-object-interaction-vertical-navigation-background-hover: #{tokens.$cds-global-color-construction-800};
   --cds-alias-object-interaction-vertical-navigation-background-active: #{tokens.$cds-global-color-construction-600};
+
+  // Vertical-nav selected
+  --cds-alias-object-interaction-vertical-navigation-background-selected: #{tokens.$cds-global-color-blue-900};
+  --cds-alias-object-interaction-vertical-navigation-background-selected-hover: #{tokens.$cds-global-color-construction-800};
+  --cds-alias-object-interaction-vertical-navigation-background-selected-active: #{tokens.$cds-global-color-construction-600};
 }