feat(docs-infra): create typography and layout theme files (angular#4…

…1129)

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

PR Close angular#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;
   }
@@ -227,8 +219,4 @@ code {
       }
     }
   }
-}
-
-.error-text {
-  color: $brightred;
-}
+}

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

@@ -2,11 +2,11 @@
    LAYOUT STYLES
    ============================== */
 
-@forward 'content-layout/content-layout';
-@forward 'doc-viewer/doc-viewer';
-@forward 'footer/footer';
-@forward 'layout-global';
-@forward 'marketing-layout/marketing-layout';
-@forward 'not-found';
-@forward 'sidenav';
-@forward 'top-menu';
+  @forward 'content-layout/content-layout';
+  @forward 'doc-viewer/doc-viewer';
+  @forward 'footer/footer';
+  @forward 'layout-global/layout-global';
+  @forward 'marketing-layout/marketing-layout';
+  @forward 'not-found/not-found';
+  @forward 'sidenav/sidenav';
+  @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-theming.scss → aio/src/styles/1-layouts/footer/_footer-theme.scss

@@ -8,19 +8,19 @@
 
   footer {
     background-color: $blue;
-  
-    aio-footer {  
+
+    aio-footer {
       & > * {
         color: $white;
       }
-  
+
       a {
         color: $white;
       }
-  
+
       h3 {
         color: $white;
       }
     }
   }
-}
+}

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.scss → 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,28 +15,38 @@
 
   section#intro {
     color: $white;
+
+    @if $is-dark-theme {
+      .hero-logo {
+        img {
+          filter: brightness(1.1);
+        }
+      }
+    }
   }
 
   .announcement-bar {
     background-color: $white;
-  
+
     .button {
       color: $white;
       background-color: $blue;
-  
+
       &:hover {
         color: rgba($white, 0.7);
       }
     }
   }
 
-  .home-row .card {    
-    .card-text-container {  
+  .home-row .card {
+    background-color: if($is-dark-theme, $darkgray, $white);
+
+    .card-text-container {
       p {
         color: if($is-dark-theme, $offwhite, $darkgray);
       }
     }
-  
+
     &:hover {
       h2 {
         color: $blue;
@@ -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.scss → aio/src/styles/1-layouts/not-found/_not-found.scss

@@ -1,5 +1,5 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 .nf-container {
     align-items: center;
@@ -12,15 +12,13 @@
     flex-direction: column;
 
     h1 {
-      @include font-size(48);
-      color: $blue;
+        @include font-size(48);
         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);
+        }
+      }
+    }
+  }
+}