refactor(devtools): extract and organize colors into themes (angular#60374)

Extract all colors from the stylesheets, reduce their number by merging the similar ones and organize them into themes represented by CSS variables.

PR Close angular#60374

Author: hawkgs

devtools/projects/ng-devtools/src/lib/BUILD.bazel

@@ -8,7 +8,6 @@ package(default_visibility = ["//visibility:public"])
 sass_binary(
     name = "devtools_component_styles",
     src = "devtools.component.scss",
-    deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
 )
 
 ng_module(

devtools/projects/ng-devtools/src/lib/application-services/theme_service.ts

@@ -35,8 +35,8 @@ export class ThemeService {
   toggleDarkMode(isDark: boolean): void {
     const removeClass = isDark ? LIGHT_THEME_CLASS : DARK_THEME_CLASS;
     const addClass = !isDark ? LIGHT_THEME_CLASS : DARK_THEME_CLASS;
-    this.renderer.removeClass(this.doc.body, removeClass);
-    this.renderer.addClass(this.doc.body, addClass);
+    this.renderer.removeClass(this.doc.documentElement, removeClass);
+    this.renderer.addClass(this.doc.documentElement, addClass);
     this.currentTheme.set(addClass);
   }
 

devtools/projects/ng-devtools/src/lib/application-services/theme_service_spec.ts

@@ -57,7 +57,7 @@ describe('ThemeService', () => {
     const doc = TestBed.inject(DOCUMENT);
 
     expect(service.currentTheme()).toEqual('light-theme');
-    expect(doc.body.classList.contains('light-theme')).toBeTrue();
+    expect(doc.documentElement.classList.contains('light-theme')).toBeTrue();
   });
 
   it(`should enable dark mode, if it's the preferred/system one`, () => {
@@ -69,7 +69,7 @@ describe('ThemeService', () => {
     const doc = TestBed.inject(DOCUMENT);
 
     expect(service.currentTheme()).toEqual('dark-theme');
-    expect(doc.body.classList.contains('dark-theme')).toBeTrue();
+    expect(doc.documentElement.classList.contains('dark-theme')).toBeTrue();
   });
 
   it('should toggle dark mode', () => {
@@ -84,7 +84,7 @@ describe('ThemeService', () => {
     const doc = TestBed.inject(DOCUMENT);
 
     expect(service.currentTheme()).toEqual('dark-theme');
-    expect(doc.body.classList.contains('dark-theme')).toBeTrue();
+    expect(doc.documentElement.classList.contains('dark-theme')).toBeTrue();
   });
 
   it('should update the theme automatically, if the system one changes', () => {
@@ -95,7 +95,7 @@ describe('ThemeService', () => {
     // Initialize the watcher.
     service.initializeThemeWatcher();
 
-    const docClassList = TestBed.inject(DOCUMENT).body.classList;
+    const docClassList = TestBed.inject(DOCUMENT).documentElement.classList;
 
     expect(service.currentTheme()).toEqual('light-theme');
     expect(docClassList.contains('light-theme')).toBeTrue();

devtools/projects/ng-devtools/src/lib/devtools-tabs/BUILD.bazel

@@ -8,7 +8,6 @@ package(default_visibility = ["//visibility:public"])
 sass_binary(
     name = "devtools_tabs_component_styles",
     src = "devtools-tabs.component.scss",
-    deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
 )
 
 ng_module(

devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path/BUILD.bazel

@@ -9,7 +9,6 @@ sass_binary(
     name = "resolution_path_styles",
     src = "resolution-path.component.scss",
     visibility = ["//visibility:private"],
-    deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
 )
 
 ng_module(

devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path/resolution-path.component.scss

@@ -1,20 +1,14 @@
-@use '../../../../styles/theme' as theme;
-
-/* TODO: Extract */
-$darkBg: #1a1a1a;
-$lightBg: #f3f3f3;
-
 :host {
   display: flex;
   flex-wrap: wrap;
-  background: $lightBg;
-  border-top: 1px solid black;
+  background: var(--octonary-contrast);
   padding: 0.5rem 0.5rem 0.25rem 0.5rem;
+  border-top: 1px solid var(--senary-contrast);
 
   .node {
     position: relative;
     border-radius: 5px;
-    background: #c4c4c4;
+    background: var(--octonary-contrast);
     color: black;
     padding: 4px 25px 4px 15px;
     margin-bottom: 0.25rem;
@@ -23,15 +17,15 @@ $lightBg: #f3f3f3;
     box-sizing: border-box;
 
     &.type-env {
-      background: #f9c2c5;
+      background: var(--red-06);
     }
 
     &.type-element {
-      background: #a6d5a9;
+      background: var(--green-03);
     }
 
     &.type-imported {
-      background: #c79eff;
+      background: var(--purple-03);
     }
 
     &.type-hidden {
@@ -60,7 +54,7 @@ $lightBg: #f3f3f3;
 
     &:not(:last-of-type)::before {
       content: '';
-      background: $lightBg;
+      background: var(--octonary-contrast);
       width: 21px;
       height: 21px;
       top: calc(50% - 6px);
@@ -76,10 +70,3 @@ $lightBg: #f3f3f3;
     }
   }
 }
-
-@include theme.dark-theme {
-  :host,
-  .node:not(:last-of-type)::before {
-    background: #1a1a1a;
-  }
-}

devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss

@@ -1,5 +1,3 @@
-@use '../../styles/theme' as theme;
-
 :host {
   position: relative;
   width: 100%;
@@ -23,6 +21,10 @@ ng-injector-tree.hidden {
   height: calc(100% - 31px);
 }
 
+nav {
+  border-bottom: 1px solid var(--color-separator);
+}
+
 #nav-buttons {
   display: flex;
 
@@ -31,6 +33,7 @@ ng-injector-tree.hidden {
     border: none;
     cursor: pointer;
     opacity: 0.8;
+    color: var(--secondary-contrast);
 
     &:active {
       opacity: 1;
@@ -39,7 +42,7 @@ ng-injector-tree.hidden {
 }
 
 .inspector-active {
-  color: #1a73e8 !important;
+  color: var(--blue-02) !important;
 }
 
 #app-angular-version {
@@ -54,7 +57,7 @@ ng-injector-tree.hidden {
 }
 
 #version-number {
-  color: #1b1aa5;
+  color: var(--blue-02);
   cursor: text;
   -moz-user-select: text;
   -khtml-user-select: text;
@@ -63,7 +66,7 @@ ng-injector-tree.hidden {
   user-select: text;
 
   &.unsupported-version {
-    color: red;
+    color: var(--red-04);
   }
 }
 
@@ -109,42 +112,11 @@ mat-icon {
 }
 
 .frame-selector {
-  background-color: #e2e2e2;
   border-radius: 2px;
-  color: #474747;
   border: none;
   margin: 4px 4px 2px 4px;
   padding: 2px;
   outline-offset: -2px;
   width: 100px;
   font-size: 12px;
 }
-
-@include theme.dark-theme {
-  .frame-selector {
-    background-color: #464646;
-    color: #fff;
-  }
-
-  #app-angular-version {
-    color: #fff;
-  }
-
-  #nav-buttons {
-    button {
-      color: #fff;
-    }
-  }
-
-  #version-number {
-    color: #5caace;
-
-    &.unsupported-version {
-      color: red;
-    }
-  }
-
-  .inspector-active {
-    color: #4688f1 !important;
-  }
-}

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/BUILD.bazel

@@ -6,7 +6,6 @@ package(default_visibility = ["//visibility:public"])
 sass_binary(
     name = "directive_forest_component_styles",
     src = "directive-forest.component.scss",
-    deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
 )
 
 ng_module(

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/BUILD.bazel

@@ -6,7 +6,6 @@ package(default_visibility = ["//visibility:public"])
 sass_binary(
     name = "breadcrumbs_component_styles",
     src = "breadcrumbs.component.scss",
-    deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
 )
 
 ng_module(

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.scss

@@ -1,5 +1,3 @@
-@use '../../../../../styles/theme' as theme;
-
 .mdc-card.breadcrumb-card {
   padding: 0;
   width: 100%;
@@ -9,7 +7,7 @@
 
   .scroll-button {
     height: 100%;
-    background-color: rgb(243, 243, 243);
+    background-color: var(--septenary-contrast);
     border: none;
     cursor: pointer;
 
@@ -34,7 +32,7 @@
       height: 24px;
 
       &.selected {
-        background-color: rgb(243, 243, 243);
+        background-color: var(--color-tree-node-highlighted);
       }
     }
   }
@@ -45,36 +43,10 @@
     font-size: 11px;
     margin-right: 5px;
     width: fit-content;
-    color: #8a1882;
+    color: var(--color-tree-node-element-name);
 
     &:hover {
-      background-color: #ebf1fb;
-    }
-  }
-}
-
-@include theme.dark-theme {
-  .mdc-card {
-    &.breadcrumb-card {
-      .scroll-button {
-        background-color: rgb(41, 42, 45);
-        color: #ffffff;
-      }
-
-      .breadcrumbs {
-        button {
-          &.selected {
-            background-color: rgb(41, 42, 45);
-          }
-        }
-      }
-
-      .mdc-button {
-        color: #5caace;
-        &:hover {
-          background-color: #093e69;
-        }
-      }
+      background-color: var(--color-tree-node-hovered);
     }
   }
 }