feat(docs-infra): create typography and layout theme files (#41129)

creates theming files for the aio typography styles; done as part of the effort to make aio themeable

PR Close #41129

aio/src/styles/0-base/_typography-theme.scss

@@ -0,0 +1,52 @@
+@use '../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin typography-theme($theme) {
+    $primary: map-get($theme, primary);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $is-dark-theme: map-get($theme, is-dark);
+
+    body {
+        color: if($is-dark-theme, $offwhite, $darkgray);
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        color: if($is-dark-theme, $offwhite, $darkgray);
+    }
+
+    h6 {
+        color: if($is-dark-theme, $offwhite, $mediumgray);
+    }
+
+    p,
+    ol,
+    ul,
+    ol,
+    li,
+    input,
+    a {
+        color: if($is-dark-theme, $white, $darkgray);
+    }
+
+    .app-toolbar a {
+        color: if($is-dark-theme, $darkgray, $white);
+    }
+
+    code {
+        color: if($is-dark-theme, $white, $darkgray);
+    }
+
+    .sidenav-content a {
+        color: if($is-dark-theme, lighten($blue, 20), $blue);
+    }
+
+    .error-text {
+        color: $brightred;
+    }
+}

aio/src/styles/0-base/_typography.scss

@@ -8,14 +8,12 @@ html {
 body {
   font-family: $main-font;
   margin: 0;
-  color: $darkgray;
   @include font-size(16);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 h1, h2, h3, h4, h5, h6 {
-  color: $deepgray;
   margin-bottom: 0;
   font-weight: 500;
 }
@@ -64,7 +62,6 @@ h5 {
 
 h6 {
   @include font-size(16);
-  color: $mediumgray;
   margin-top: 2rem;
   clear: both;
 }
@@ -97,7 +94,6 @@ a {
   @include line-height(32);
   font-family: inherit;
   font-weight: 400;
-  color: $darkgray;
 
   & > em {
     @include letter-spacing(0.3);
@@ -143,7 +139,6 @@ a {
 .app-toolbar a {
   @include font-size(16);
   font-weight: 400;
-  color: $white;
   font-family: $main-font;
   text-transform: uppercase;
 }
@@ -190,12 +185,9 @@ th {
 code {
   font-family: $code-font;
   font-size: 90%;
-  color: $darkgray;
 }
 
 .sidenav-content a {
-  color: $blue;
-
   &:hover {
     text-decoration: underline;
   }
@@ -228,7 +220,3 @@ code {
     }
   }
 }
-
-.error-text {
-  color: $brightred;
-}

aio/src/styles/1-layouts/_index.scss

@@ -5,8 +5,8 @@
   @forward 'content-layout/content-layout';
   @forward 'doc-viewer/doc-viewer';
   @forward 'footer/footer';
-@forward 'layout-global';
+  @forward 'layout-global/layout-global';
   @forward 'marketing-layout/marketing-layout';
-@forward 'not-found';
+  @forward 'not-found/not-found';
-@forward 'sidenav';
+  @forward 'sidenav/sidenav';
-@forward 'top-menu';
+  @forward 'top-menu/top-menu';

aio/src/styles/1-layouts/_theme.scss

@@ -0,0 +1,15 @@
+@use 'footer/footer-theme' as *;
+@use 'layout-global/layout-global-theme' as *;
+@use 'marketing-layout/marketing-layout-theme' as *;
+@use 'not-found/not-found-theme' as *;
+@use 'sidenav/sidenav-theme' as *;
+@use 'top-menu/top-menu-theme' as *;
+
+@mixin layout-themes($theme) {
+  @include footer-theme($theme);
+  @include layout-global-theme($theme);
+  @include marketing-layout-theme($theme);
+  @include not-found-theme($theme);
+  @include sidenav-theme($theme);
+  @include top-menu-theme($theme);
+}

aio/src/styles/1-layouts/footer/_footer.scss

@@ -1,4 +1,4 @@
-@use '../../constants';
+@use '../../constants' as *;
 @use '../../mixins' as *;
 
 footer {
@@ -37,7 +37,7 @@ footer {
 
       &:focus {
         // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
-        outline: 1px solid rgba(constants.$white, 0.8);
+        outline: 1px solid rgba($white, 0.8);
         outline-offset: 2px;
       }
     }

aio/src/styles/1-layouts/layout-global/_layout-global-theme.scss

@@ -0,0 +1,15 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin layout-global-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  html,
+  body,
+  .content {
+    background: if($is-dark-theme, mat-color($background, background), $white);
+  }
+}

aio/src/styles/1-layouts/layout-global/_layout-global.scss

@@ -1,14 +1,7 @@
-@use '../constants' as *;
-
 html, body {
   height: 100%;
 }
 
-body,
-.content {
-  background-color: $white;
-}
-
 .center-layout {
   margin: 0 auto;
   max-width: 62.5em;

aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss

@@ -1,4 +1,5 @@
 @use '../../constants' as *;
+@use '~@angular/material/theming' as *;
 
 @mixin marketing-layout-theme($theme) {
   $primary: map-get($theme, primary);
@@ -14,6 +15,14 @@
 
   section#intro {
     color: $white;
+
+    @if $is-dark-theme {
+      .hero-logo {
+        img {
+          filter: brightness(1.1);
+        }
+      }
+    }
   }
 
   .announcement-bar {
@@ -30,6 +39,8 @@
   }
 
   .home-row .card {
+    background-color: if($is-dark-theme, $darkgray, $white);
+
     .card-text-container {
       p {
         color: if($is-dark-theme, $offwhite, $darkgray);
@@ -64,6 +75,4 @@
       color: $white;
     }
   }
-
 }
-

aio/src/styles/1-layouts/not-found/_not-found-theme.scss

@@ -0,0 +1,19 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin not-found-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  .nf-response {
+    h1 {
+      color: $blue;
+    }
+  }
+
+  .nf-icon.material-icons {
+    color: $blue;
+  }
+}

aio/src/styles/1-layouts/not-found/_not-found.scss

@@ -1,5 +1,5 @@
-@use '../constants' as *;
+@use '../../constants' as *;
-@use '../mixins' as *;
+@use '../../mixins' as *;
 
 .nf-container {
     align-items: center;
@@ -13,14 +13,12 @@
 
     h1 {
         @include font-size(48);
-      color: $blue;
         text-transform: uppercase;
         margin: 8px 0;
     }
 }
 
 .nf-icon.material-icons {
-    color: $blue;
     @include font-size(100);
     position: static;
 }

aio/src/styles/1-layouts/sidenav/_sidenav-theme.scss

@@ -0,0 +1,44 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin sidenav-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  mat-sidenav-container.sidenav-container {
+    background-color: if($is-dark-theme, mat-color($background, background), $white);
+
+    mat-sidenav.sidenav {
+      background-color: if($is-dark-theme, $deepgray, $superlightgray);
+      border-right: 1px solid if($is-dark-theme, $darkgray, $lightgray);
+
+      .doc-version {
+        border-top: 1px solid if($is-dark-theme, $darkgray, $lightgray);
+      }
+    }
+  }
+
+  aio-nav-menu {
+    aio-nav-item {
+      .vertical-menu-item {
+        color: if($is-dark-theme, $offwhite, $darkgray);
+
+        &:hover {
+          background-color: if($is-dark-theme, $darkgray, $lightgray);
+          color: if($is-dark-theme, $powderblue, $blue);
+          text-shadow: 0 0 5px if($is-dark-theme, $black, $white);
+
+          &.selected {
+            color: if($is-dark-theme, $powderblue, $darkblue);
+          }
+        }
+
+        &.selected {
+          color: if($is-dark-theme, $lightblue, $darkblue);
+        }
+      }
+    }
+  }
+}

aio/src/styles/1-layouts/sidenav/_sidenav.scss

@@ -1,5 +1,5 @@
-@use '../constants' as *;
+@use '../../constants' as *;
-@use '../mixins' as *;
+@use '../../mixins' as *;
 
 // Disable sidenav animations for the initial render.
 .starting.mat-drawer-transition .mat-drawer-content {
@@ -7,7 +7,6 @@
 }
 
 mat-sidenav-container.sidenav-container {
-  background-color: $white;
   min-height: 100%;
   height: auto !important;
   max-width: 100%;
@@ -28,8 +27,6 @@ mat-sidenav-container.sidenav-container {
     bottom: 0;
     left: 0;
     min-width: 260px;
-    background-color: $superlightgray;
-    border-right: 1px solid $lightgray;
 
     @media (max-width: 599px) {
       top: 56px;
@@ -38,7 +35,6 @@ mat-sidenav-container.sidenav-container {
     // Angular Version Selector
     .doc-version {
       padding: 8px;
-      border-top: 1px solid $lightgray;
     }
   }
 }
@@ -63,7 +59,6 @@ aio-nav-menu {
   aio-nav-item {
     .vertical-menu-item {
       box-sizing: border-box;
-      color: $darkgray;
       cursor: pointer;
       display: flex;
       align-items: center;
@@ -75,20 +70,10 @@ aio-nav-menu {
       width: 100%;
       word-wrap: break-word;
 
-      &:hover {
-        background-color: $lightgray;
-        color: $blue;
-        text-shadow: 0 0 5px $white;
-      }
-
       &:focus {
         outline: $focus-outline-onlight auto 2px;
       }
 
-      &.selected {
-        color: $darkblue;
-      }
-
       span {
         padding-right: 32px;
       }

aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss

@@ -0,0 +1,106 @@
+@use '../../constants' as *;
+@use '../../mixins' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin top-menu-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  mat-toolbar.app-toolbar {
+    // HOME PAGE OVERRIDE: TOPNAV TOOLBAR
+    .page-home & {
+      background-color: $blue;
+    }
+
+    mat-icon {
+      color: $white;
+    }
+
+    // HAMBURGER BUTTON
+    .hamburger {
+      &:hover {
+        color: $offwhite;
+      }
+
+      & .mat-icon {
+        color: $white;
+      }
+    }
+
+    // HOME NAV-LINK
+    .nav-link.home {
+      &:focus {
+        // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
+        outline: 1px solid $focus-outline-ondark;
+      }
+    }
+
+    // TOP MENU
+    aio-top-menu {
+      ul {
+        li {
+          a.nav-link {
+            .nav-link-inner {
+              &:hover {
+                background: rgba($white, 0.15);
+              }
+            }
+
+            &:focus {
+              .nav-link-inner {
+                background: rgba($white, 0.15);
+                box-shadow: 0 0 1px 2px $focus-outline-ondark;
+              }
+            }
+
+            &:active {
+              .nav-link-inner {
+                background: rgba($white, 0.15);
+              }
+            }
+          }
+
+          &.selected {
+            a.nav-link {
+              .nav-link-inner {
+                background: rgba($white, 0.15);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // SEARCH BOX
+    aio-search-box.search-container {
+      input {
+        color: $darkgray;
+        background-color: $white;
+
+        @include placeholder {
+          color: $mediumgray;
+        }
+      }
+    }
+
+    // THEME PICKER
+
+    aio-theme-picker {
+      button {
+        color: $offwhite;
+      }
+    }
+
+    // EXTERNAL LINK ICONS
+    .toolbar-external-icons-container {
+      a {
+        &:focus {
+          // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
+          outline: 1px solid $focus-outline-ondark;
+        }
+      }
+    }
+  }
+}

aio/src/styles/1-layouts/top-menu/_top-menu.scss

@@ -1,5 +1,5 @@
-@use '../constants' as *;
+@use '../../constants' as *;
-@use '../mixins' as *;
+@use '../../mixins' as *;
 
 // VARIABLES
 $showTopMenuWidth: 1048px;
@@ -18,8 +18,6 @@ mat-toolbar.app-toolbar {
 
   // HOME PAGE OVERRIDE: TOPNAV TOOLBAR
   .page-home & {
-    background-color: $blue;
-
     @media (min-width: 481px) {
       &:not(.transitioning) {
         background-color: transparent;
@@ -44,10 +42,6 @@ mat-toolbar.app-toolbar {
     padding: 0 16px 0 0;
   }
 
-  mat-icon {
-    color: $white;
-  }
-
   // HAMBURGER BUTTON
   .hamburger {
     height: 100%;
@@ -70,12 +64,7 @@ mat-toolbar.app-toolbar {
       transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
     }
 
-    &:hover {
-      color: $offwhite;
-    }
-
     & .mat-icon {
-      color: $white;
       position: inherit;
     }
   }
@@ -88,7 +77,6 @@ mat-toolbar.app-toolbar {
 
     &:focus {
       // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
-      outline: 1px solid $focus-outline-ondark;
       outline-offset: 4px;
     }
 
@@ -146,33 +134,13 @@ mat-toolbar.app-toolbar {
           .nav-link-inner {
             border-radius: 4px;
             padding: 8px 16px;
-
-            &:hover {
-              background: rgba($white, 0.15);
-            }
           }
 
           &:focus {
             outline: none;
 
             .nav-link-inner {
-              background: rgba($white, 0.15);
               border-radius: 1px;
-              box-shadow: 0 0 1px 2px $focus-outline-ondark;
-            }
-          }
-
-          &:active {
-            .nav-link-inner {
-              background: rgba($white, 0.15);
-            }
-          }
-        }
-
-        &.selected {
-          a.nav-link {
-            .nav-link-inner {
-              background: rgba($white, 0.15);
             }
           }
         }
@@ -191,10 +159,8 @@ mat-toolbar.app-toolbar {
     margin-right: 16px;
 
     input {
-      color: $darkgray;
       border: none;
       border-radius: 100px;
-      background-color: $white;
       padding: 5px 16px;
       margin-left: 8px;
       width: 180px;
@@ -208,7 +174,6 @@ mat-toolbar.app-toolbar {
 
       @include placeholder {
         @include font-size(14);
-        color: $mediumgray;
       }
 
       @media (min-width: 1000px) {
@@ -239,8 +204,6 @@ mat-toolbar.app-toolbar {
       margin: 0 -16px;
 
       &:focus {
-        // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
-        outline: 1px solid $focus-outline-ondark;
         outline-offset: -16px;
       }
 

aio/src/styles/_app-theme.scss

@@ -1,6 +1,7 @@
-@import '~@angular/material/theming';
+@use '0-base/typography-theme' as *;
-@import '1-layouts/marketing-layout/marketing-layout-theme';
+@use '1-layouts' as *;
 
 @mixin app-theme($theme) {
-    @include marketing-layout-theme($theme);
+    @include typography-theme($theme);
+    @include layout-theme($theme);
 }

aio/src/styles/custom-themes/dark.scss

@@ -1,9 +1,9 @@
-@import '../app-theme';
+@use '../app-theme' as *;
+@use '~@angular/material/theming' as *;
 
-
+$ng-io-primary: mat-palette($mat-blue, 700, 600, 800);
-$ng-io-primary: mat-palette($mat-red, 700, 600, 800);
+$ng-io-accent:  mat-palette($mat-red, 700, 600, 800);
-$ng-io-accent:  mat-palette($mat-blue, 700, 600, 800);
+$ng-io-warn:    mat-palette($mat-red);
-$ng-io-warn:    mat-palette($mat-blue);
 $ng-io-theme: mat-dark-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
 
 @include angular-material-theme($ng-io-theme);

aio/src/styles/custom-themes/light.scss

@@ -1,4 +1,5 @@
-@import '../app-theme';
+@use '../app-theme' as *;
+@use '~@angular/material/theming' as *;
 
 
 $ng-io-primary: mat-palette($mat-blue, 700, 600, 800);

aio/src/styles/main.scss

@@ -6,4 +6,4 @@
 @use './2-modules' as modules;
 
 // import print styles
-@import './print';
+@use './print';

aio/src/styles/ng-io-theme.scss

@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@use '~@angular/material/theming' as *;
 @import 'app-theme';
 // Plus imports for other components in your app.