refactor(devtools): typography (angular#60531)

Introduce typography placeholder classes and employ them across the app where applicable.

PR Close angular#60531

Author: hawkgs

devtools/projects/demo-standalone/src/BUILD.bazel

@@ -27,6 +27,17 @@ copy_to_directory(
     },
 )
 
+copy_to_directory(
+    name = "assets",
+    srcs = [
+        "//devtools/projects/ng-devtools/src/assets",
+    ],
+    out = "assets",
+    replace_prefixes = {
+        "devtools/projects/ng-devtools/src/assets": "",
+    },
+)
+
 ng_module(
     name = "demo",
     srcs = ["main.ts"],
@@ -59,6 +70,7 @@ exports_files(["index.html"])
 filegroup(
     name = "dev_app_static_files",
     srcs = [
+        ":assets",
         ":browser_specific_styles",
         ":demo_styles",
         ":index.html",

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

@@ -0,0 +1,6 @@
+package(default_visibility = ["//devtools:__subpackages__"])
+
+filegroup(
+    name = "assets",
+    srcs = glob(["*"]),
+)

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

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

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

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

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

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

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

@@ -1,3 +1,5 @@
+@use '../../../../styles/typography';
+
 :host {
   display: flex;
   flex-wrap: wrap;
@@ -6,15 +8,17 @@
   border-top: 1px solid var(--senary-contrast);
 
   .node {
+    @extend %body-01;
     position: relative;
     border-radius: 5px;
     background: var(--octonary-contrast);
     color: black;
     padding: 4px 25px 4px 15px;
     margin-bottom: 0.25rem;
-    font-size: 0.75rem;
     height: 28px;
     box-sizing: border-box;
+    display: flex;
+    align-items: center;
 
     &.type-env {
       background: var(--red-06);

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

@@ -1,3 +1,5 @@
+@use '../../styles/typography';
+
 :host {
   position: relative;
   width: 100%;
@@ -49,8 +51,6 @@ nav {
   align-self: center;
   margin-left: auto;
   margin-right: 8px;
-  font-size: 0.8em;
-  font-weight: bold;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -78,13 +78,11 @@ mat-icon {
 }
 
 .mat-mdc-tab-link {
+  @extend %body-medium-01;
   min-width: unset;
-  line-height: 30px;
   height: 30px;
-  font-size: 13px;
   padding: 0px 10px;
   opacity: 1;
-  font-weight: 400;
 }
 
 @media only screen and (max-width: 700px) {
@@ -118,5 +116,4 @@ mat-icon {
   padding: 2px;
   outline-offset: -2px;
   width: 100px;
-  font-size: 12px;
 }

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

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

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

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

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

@@ -1,3 +1,5 @@
+@use '../../../../../styles/typography';
+
 .mdc-card.breadcrumb-card {
   padding: 0;
   width: 100%;
@@ -31,6 +33,7 @@
     }
 
     button {
+      @extend %monospaced;
       height: 24px;
 
       &.selected {
@@ -42,7 +45,6 @@
   .mdc-button {
     height: 20px;
     line-height: 20px;
-    font-size: 11px;
     margin-right: 5px;
     width: fit-content;
     color: var(--color-tree-node-element-name);

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

@@ -1,3 +1,5 @@
+@use '../../../../styles/typography';
+
 :host {
   width: 100%;
   height: 100%;
@@ -8,9 +10,7 @@
     color: var(--color-tree-node-element-name);
 
     cursor: default;
-    font-family: Menlo, monospace;
-    font-size: 11px;
-    line-height: 18px;
+    @extend %monospaced;
 
     white-space: nowrap;
     text-overflow: ellipsis;

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

@@ -25,9 +25,6 @@
       border: none;
       padding-left: 5px;
       width: 100%;
-      font-size: 11px;
-      font-family: inherit;
-      font-weight: inherit;
       height: 30px;
       outline: none;
       background: var(--color-background);

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

@@ -18,6 +18,9 @@ _STYLE_LABELS = [
     sass_binary(
         name = label,
         src = src,
+        deps = [
+            "//devtools/projects/ng-devtools/src/styles:typography",
+        ],
     )
     for label, src in zip(_STYLE_LABELS, _STYLE_SRCS)
 ]

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.scss

@@ -1,15 +1,13 @@
 .meta-data-container {
   display: flex;
   flex-direction: column;
+  padding: 0.75rem;
 }
 
 .meta-data-container a {
-  width: 100%;
-  font-size: 11px;
-  height: 22px;
-  line-height: 22px;
-}
+  display: block;
 
-.meta-data {
-  font-weight: 400;
+  &:not(:last-child) {
+    margin-bottom: 0.25rem;
+  }
 }

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.scss

@@ -1,20 +1,16 @@
+@use '../../../../styles/typography';
+
 .element-header {
   display: flex;
   justify-content: space-between;
   width: 100%;
   align-items: center;
-  font-size: 11px;
-
-  .component-name {
-    margin-left: 10px;
-    font-weight: 700;
-    line-height: 25px;
-  }
+  padding: 0.375rem 0;
+  @extend %body-bold-01;
 
+  .component-name,
   .element-name {
     margin-left: 10px;
-    line-height: 25px;
-    font-weight: 700;
   }
 }
 

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/BUILD.bazel

@@ -22,6 +22,9 @@ _STYLE_LABELS = [
     sass_binary(
         name = label,
         src = src,
+        deps = [
+            "//devtools/projects/ng-devtools/src/styles:typography",
+        ],
     )
     for label, src in zip(_STYLE_LABELS, _STYLE_SRCS)
 ]

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.scss

@@ -1,3 +1,5 @@
+@use '../../../../../styles/typography';
+
 .editor {
   cursor: text;
   border: none;
@@ -12,10 +14,10 @@
 }
 
 input {
+  @extend %monospaced;
+  line-height: 1rem;
+  letter-spacing: normal;
   width: fit-content;
-  font-family: Menlo, monospace;
-  font-weight: 500;
-  font-size: 1em;
   border: none;
   outline: none;
 }

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.scss

@@ -1,3 +1,5 @@
+@use '../../../../../styles/typography';
+
 :host {
   ::ng-deep {
     mat-expansion-panel {
@@ -40,8 +42,7 @@
     }
 
     .mat-expansion-panel-header-title {
-      font-size: 0.8em;
-      font-family: Menlo, monospace;
+      @extend %body-medium-01;
     }
 
     .mat-expansion-indicator {

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.scss

@@ -1,11 +1,12 @@
+@use '../../../../../styles/typography';
+
 mat-toolbar {
+  @extend %body-medium-01;
   padding-left: 10px;
   justify-content: space-between;
   text-overflow: ellipsis;
   overflow: hidden;
   line-height: 25px;
-  font-size: 11px;
-  font-weight: 500;
   height: auto;
 }
 

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.scss

@@ -1,3 +1,5 @@
+@use '../../../../../styles/typography';
+
 :host {
   width: 100%;
   display: block;
@@ -8,10 +10,14 @@
   }
 
   ::ng-deep {
+    .mat-tree-node,
+    .mat-nested-tree-node {
+      @extend %monospaced;
+    }
+
     .mat-tree-node {
       min-height: 20px !important;
       cursor: default;
-      font-family: Menlo, monospace;
 
       .mat-icon {
         font-size: 11px;
@@ -37,7 +43,6 @@
   mat-tree-node {
     .name {
       color: var(--color-tree-node-element-name);
-      font-weight: 500;
     }
   }
 }
@@ -46,14 +51,3 @@
 .disabled {
   color: var(--secondary-contrast);
 }
-
-.arrow {
-  font-family: monospace;
-  font-size: 0.5em;
-  color: var(--quaternary-contrast);
-}
-
-:host ::ng-deep .mat-tree-node,
-.mat-nested-tree-node {
-  font-size: 0.8em;
-}

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

@@ -8,6 +8,9 @@ package(default_visibility = ["//:__subpackages__"])
 sass_binary(
     name = "injector_tree_styles",
     src = "injector-tree.component.scss",
+    deps = [
+        "//devtools/projects/ng-devtools/src/styles:typography",
+    ],
 )
 
 ng_module(

devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/BUILD.bazel

@@ -6,6 +6,8 @@ package(default_visibility = ["//visibility:public"])
 sass_binary(
     name = "injector_providers_component_styles",
     src = "injector-providers.component.scss",
+    include_paths = ["external/npm/node_modules"],
+    deps = ["//devtools/projects/ng-devtools/src/styles:typography"],
 )
 
 ng_module(