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);