Optimizing sass for dark themes

Author: Stefan Ivanov

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dock-manager.scss

@@ -24,13 +24,17 @@
 /// @requires $_light-dock-manager
 $_dark-dock-manager: extend(
     $_light-dock-manager, (
-        accent-color: #424242,
+        accent-color: (
+            igx-color: (grays, 400),
+        ),
         border-color: #212121,
         button-text: #fff,
         context-menu-color-active: #fff,
         floating-pane-border-color: rgba(0, 0, 0, .26),
         flyout-shadow-color: rgba(0, 0, 0, .38),
-        joystick-border-color: #424242,
+        joystick-border-color: (
+            igx-color: (grays, 400),
+        ),
         joystick-icon-color-active: #fff,
         pane-content-background: #212121,
         primary-color: #111,
@@ -46,11 +50,7 @@ $_dark-dock-manager: extend(
 /// @requires $_fluent-dock-manager
 $_dark-fluent-dock-manager: extend(
     $_fluent-dock-manager, (
-        active-color: (
-            igx-color: primary,
-        ),
         background-color: #2a2a2a,
-        border-color: #222,
         button-text: #fff,
         context-menu-background-active: #111,
         context-menu-color-active: #fff,
@@ -63,18 +63,10 @@ $_dark-fluent-dock-manager: extend(
         joystick-border-color: transparent,
         joystick-icon-color: #fff,
         joystick-icon-color-active: #fff,
-        pane-content-background: #222,
         pane-header-backround: #2a2a2a,
         pinned-header-background: #2a2a2a,
         splitter-background: #151515,
         splitter-handle: #000,
-        tab-background-active: #222,
-        tab-background: #222,
-        tab-border-color-active: #222,
-        tab-border-color: #222,
-        tab-text-active: (
-            igx-color: primary,
-        ),
         tab-text: #fff,
         text-color: #fff,
     )
@@ -86,31 +78,14 @@ $_dark-fluent-dock-manager: extend(
 /// @requires $_bootstrap-dock-manager
 $_dark-bootstrap-dock-manager: extend(
     $_bootstrap-dock-manager, (
-        border-color: #242939,
-        button-text: #007bff,
-        context-menu-background-active: #007bff,
-        context-menu-color-active: #fff,
         context-menu-background: #222,
-        context-menu-color: #007bff,
         dock-background: #111,
-        floating-pane-border-color: rgba(255, 255, 255, .12),
-        joystick-background-active: #007bff,
         joystick-background: #222,
-        joystick-border-color: rgba(255, 255, 255, .12),
-        joystick-icon-color: #007bff,
-        joystick-icon-color-active: #fff,
-        pane-content-background: #242939,
         pane-header-background: #111,
         pinned-header-background: #111,
         primary-color: #111,
         splitter-background: #1a1e29,
         splitter-handle: #000,
-        tab-background-active: #242939,
-        tab-background: #242939,
-        tab-border-color-active: rgba(255, 255, 255, .12),
-        tab-border-color: #242939,
-        tab-text-active: rgba(255, 255, 255, .74),
-        tab-text: #007bff,
         text-color: #fff,
     )
 );

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dock-manager.scss

@@ -86,9 +86,6 @@ $_light-dock-manager: (
 /// @requires $_light-dock-manager
 $_fluent-dock-manager: extend(
     $_light-dock-manager, (
-        active-color: (
-            igx-color: primary,
-        ),
         background-color: (
             igx-color: surface,
         ),
@@ -180,23 +177,19 @@ $_bootstrap-dock-manager: extend(
         context-menu-background-active: (
             igx-color: primary,
         ),
-        context-menu-color-active: (
-            igx-color: surface
-        ),
+        context-menu-color-active: #fff,
         context-menu-color: (
             igx-color: primary,
         ),
         dock-background: #f8f9fa,
         floating-pane-border-color: (
             igx-color: (grays, 300),
-            hexrgba: (),
         ),
         joystick-background-active: (
             igx-color: primary,
         ),
         joystick-border-color: (
             igx-color: (grays, 300),
-            hexrgba: (),
         ),
         joystick-icon-color: (
             igx-color: primary,