feat(angular): updating Teradata branding colors and fonts

apps/docs-app/src/_teradata-branding.scss

@@ -5,16 +5,15 @@
 // Customer Teradata brand palette
 // Custom orange contrast
 $td-orange: (
-  50: #fce3db,
-  100: #fce3db,
-  200: #fac7b7,
-  300: #fac7b7,
-  400: #f7aa93,
-  500: #f7aa93,
-  600: #f58e6f,
-  700: #f58e6f,
-  800: #f3753f,
-  900: #f3753f,
+  100: #ffcfb3,
+  200: #ffaf81,
+  300: #ff8f4e,
+  400: #ff7728,
+  500: #ff5f02,
+  600: #f05800,
+  700: #e54900,
+  800: #d83b03,
+  900: #c23200,
   contrast: (
     50: $black-87-opacity,
     100: $black-87-opacity,
@@ -29,27 +28,49 @@ $td-orange: (
   ),
 );
 $td-slate: (
-  50: #d8dbdc,
-  100: #d8dbdc,
-  200: #b0b6b9,
-  300: #b0b6b9,
-  400: #899296,
-  500: #899296,
-  600: #616d73,
-  700: #616d73,
-  800: #394851,
+  50: #e3e7e8,
+  100: #c9cfd1,
+  200: #afb6b9,
+  300: #959ea2,
+  400: #7b858a,
+  500: #616d73,
+  600: #57646b,
+  700: #4d5b62,
+  800: #43515a,
   900: #394851,
+  1000: #2e3d42,
+  1100: #28353b,
+  1200: #222e33,
+  1300: #1f282e,
+  1400: #1a2126,
+  1500: #161c1f,
+  1600: #14171a,
+  1700: #101314,
+  1800: #0c0e0f,
+  1900: #060708,
+  2000: #020203,
   contrast: (
     50: $black-87-opacity,
     100: $black-87-opacity,
     200: $black-87-opacity,
     300: $black-87-opacity,
     400: $black-87-opacity,
-    500: $black-87-opacity,
-    600: white,
-    700: white,
+    500: $white-87-opacity,
+    600: $white-87-opacity,
+    700: $white-87-opacity,
     800: $white-87-opacity,
     900: $white-87-opacity,
+    1000: $white-87-opacity,
+    1100: $white-87-opacity,
+    1200: $white-87-opacity,
+    1300: $white-87-opacity,
+    1400: $white-87-opacity,
+    1500: $white-87-opacity,
+    1600: $white-87-opacity,
+    1700: $white-87-opacity,
+    1800: $white-87-opacity,
+    1900: $white-87-opacity,
+    2000: $white-87-opacity,
   ),
 );
 $td-yellow: (
@@ -87,6 +108,17 @@ $td-teal: (
   700: #009392,
   800: #008383,
   900: #007373,
+  1000: #016b6b,
+  1100: #036464,
+  1200: #045c5c,
+  1300: #055454,
+  1400: #074d4d,
+  1500: #084545,
+  1600: #0a3e3e,
+  1700: #0b3636,
+  1800: #0c2e2e,
+  1900: #0e2727,
+  2000: #0f1f1f,
   contrast: (
     50: $black-87-opacity,
     100: $black-87-opacity,
@@ -96,8 +128,19 @@ $td-teal: (
     500: $black-87-opacity,
     600: $black-87-opacity,
     700: $black-87-opacity,
-    800: white,
-    900: white,
+    800: $black-87-opacity,
+    900: $white-87-opacity,
+    1000: $white-87-opacity,
+    1100: $white-87-opacity,
+    1200: $white-87-opacity,
+    1300: $white-87-opacity,
+    1400: $white-87-opacity,
+    1500: $white-87-opacity,
+    1600: $white-87-opacity,
+    1700: $white-87-opacity,
+    1800: $white-87-opacity,
+    1900: $white-87-opacity,
+    2000: $white-87-opacity,
   ),
 );
 $td-blue: (
@@ -162,6 +205,142 @@ $td-emphasis2: (
   background-dark: mat-color($mat-blue-grey, 200),
 );
 
+// Background palette for light themes.
+$td-light-theme-background: (
+  status-bar: mat-color($mat-grey, 300),
+  app-bar: mat-color($mat-grey, 50),
+  background: mat-color($mat-grey, 100),
+  canvas: mat-color($mat-grey, 200),
+  card: white /*** card color = surface color ***/,
+  dialog: white,
+  hover: rgba(0, 0, 0, 0.04),
+  disabled-button: rgba(mat-color($mat-grey, 400), 0.1),
+  raised-button: white,
+  focused-button: rgba(0, 0, 0, 0.12),
+  selected-button: #e0e0e0,
+  selected-disabled-button: #bdbdbd,
+  disabled-button-toggle: #eeeeee,
+  unselected-chip: mat-color($mat-grey, 400),
+  disabled-list-option: #eeeeee,
+  tooltip: #616161,
+  overlay: rgba(#000000, 0.4),
+  accent: mat-color($td-teal, 200),
+  accent-highlight: rgba(mat-color($td-teal, 200), 0.1),
+  accent-highlight-hover: rgba(mat-color($td-teal, 200), 0.2),
+  emphasis: mat-color($mat-blue-grey, 200),
+  emphasis-highlight: rgba(mat-color($mat-blue-grey, 200), 0.1),
+  emphasis-highlight-hover: rgba(mat-color($mat-blue-grey, 200), 0.2),
+  caution: mat-color($mat-orange, 300),
+  caution-highlight: rgba(mat-color($mat-orange, 300), 0.1),
+  caution-highlight-hover: rgba(mat-color($mat-orange, 300), 0.2),
+  negative: mat-color($mat-red, 300),
+  negative-highlight: rgba(mat-color($mat-red, 300), 0.1),
+  negative-highlight-hover: rgba(mat-color($mat-red, 300), 0.2),
+  neutral: mat-color($mat-grey, 400),
+  neutral-highlight: rgba(mat-color($mat-grey, 400), 0.04),
+  neutral-highlight-hover: rgba(mat-color($mat-grey, 400), 0.08),
+  positive: mat-color($mat-green, 200),
+  positive-highlight: rgba(mat-color($mat-green, 200), 0.1),
+  positive-highlight-hover: rgba(mat-color($mat-green, 200), 0.2),
+  primary: mat-color($td-slate, 200),
+  primary-highlight: rgba(mat-color($td-slate, 500), 0.04),
+  primary-highlight-hover: rgba(mat-color($td-slate, 500), 0.08),
+);
+
+// Foreground palette for light themes.
+$td-light-theme-foreground: (
+  base: black,
+  divider: $dark-dividers,
+  dividers: $dark-dividers,
+  disabled: $dark-disabled-text,
+  disabled-button: rgba(black, 0.26),
+  disabled-text: $dark-disabled-text,
+  elevation: black,
+  hint-text: $dark-disabled-text,
+  secondary-text: $dark-secondary-text,
+  icon: rgba(black, 0.54),
+  icons: rgba(black, 0.54),
+  text: rgba(black, 0.87),
+  slider-min: rgba(black, 0.87),
+  slider-off: rgba(black, 0.26),
+  slider-off-active: rgba(black, 0.38),
+  accent: mat-color($td-teal, 900),
+  emphasis: mat-color($mat-blue-grey, 600),
+  caution: mat-color($mat-amber, 800),
+  negative: mat-color($mat-red, 900),
+  neutral: mat-color($mat-grey, 400),
+  positive: mat-color($mat-green, 700),
+  primary: mat-color($td-slate, 800),
+);
+
+// Background palette for dark themes.
+$td-dark-theme-background: (
+  status-bar: black,
+  app-bar: mat-color($td-slate, 1300),
+  background: mat-color($td-slate, 1500),
+  canvas: mat-color($td-slate, 1700),
+  card: mat-color($td-slate, 1100) /*** card color = surface color ***/,
+  dialog: mat-color($td-slate, 1100),
+  hover: rgba(255, 255, 255, 0.04),
+  disabled-button: rgba(mat-color($td-slate, 800), 0.4),
+  raised-button: mat-color($td-slate, 800),
+  focused-button: rgba(255, 255, 255, 0.12),
+  selected-button: #212121,
+  selected-disabled-button: mat-color($td-slate, 800),
+  disabled-button-toggle: black,
+  unselected-chip: mat-color($td-slate, 800),
+  disabled-list-option: black,
+  tooltip: #616161,
+  overlay: rgba(0, 0, 0, 0.4),
+  accent: mat-color($td-teal, 1200),
+  accent-highlight: rgba(mat-color($td-teal, 1200), 0.4),
+  accent-highlight-hover: rgba(mat-color($td-teal, 1200), 0.6),
+  emphasis: #4f5558,
+  emphasis-highlight: rgba(mat-color($td-slate, 200), 0.4),
+  emphasis-highlight-hover: rgba(mat-color($td-slate, 200), 0.6),
+  caution: #704c16,
+  caution-highlight: rgba(#704c16, 0.4),
+  caution-highlight-hover: rgba(#704c16, 0.6),
+  negative: #883e32,
+  negative-highlight: rgba(#883e32, 0.4),
+  negative-highlight-hover: rgba(#883e32, 0.6),
+  neutral: mat-color($td-slate, 800),
+  neutral-highlight: rgba(mat-color($td-slate, 800), 0.4),
+  neutral-highlight-hover: rgba(mat-color($td-slate, 800), 0.6),
+  positive: #336033,
+  positive-highlight: rgba(#336033, 0.4),
+  positive-highlight-hover: rgba(#336033, 0.6),
+  primary: mat-color($td-slate, 900),
+  primary-highlight: rgba(mat-color($td-slate, 900), 0.4),
+  primary-highlight-hover: rgba(mat-color($td-slate, 900), 0.6),
+);
+
+// Foreground palette for dark themes.
+$td-dark-theme-foreground: (
+  base: white,
+  divider: $light-dividers,
+  dividers: $light-dividers,
+  disabled: $light-disabled-text,
+  disabled-button: rgba(white, 0.3),
+  disabled-text: $light-disabled-text,
+  elevation: black,
+  hint-text: $light-disabled-text,
+  secondary-text: $light-secondary-text,
+  icon: white,
+  icons: white,
+  text: white,
+  slider-min: white,
+  slider-off: rgba(white, 0.3),
+  slider-off-active: rgba(white, 0.3),
+  accent: mat-color($td-teal, 300),
+  emphasis: mat-color($mat-blue-grey, 200),
+  caution: mat-color($mat-orange, 300),
+  negative: mat-color($mat-red, 400),
+  neutral: rgba(white, 0.87),
+  positive: mat-color($mat-green, 300),
+  primary: mat-color($td-slate, 200),
+);
+
 body {
   // Slate
   .bgc-td-slate,

apps/docs-app/src/app/components/home/home.component.html

@@ -26,9 +26,7 @@
                     hide-gt-sm
                   ></mat-icon>
                   <div class="text-center">
-                    <h3
-                      class="pull-bottom-xs mat-title tc-td-teal mat-headline"
-                    >
+                    <h3 class="pull-bottom-xs mat-title mat-headline">
                       Covalent
                     </h3>
                     <h1
@@ -155,7 +153,9 @@ <h3 matListItemTitle>{{ item.title }}</h3>
                       {{ item.title }}
                     </div>
                   </div>
-                  <div class="mat-subtitle-1 text-wrap text-left tc-td-secondary">
+                  <div
+                    class="mat-subtitle-1 text-wrap text-left tc-td-secondary"
+                  >
                     {{ item.description }}
                   </div>
                 </a>
@@ -166,7 +166,7 @@ <h3 matListItemTitle>{{ item.title }}</h3>
         </div>
       </div>
     </section>
-    <section class="bgc-white tc-white">
+    <section>
       <div layout="row" layout-align="center center">
         <div class="max-width">
           <div layout="row" class="pad-top pad-bottom">
@@ -180,7 +180,9 @@ <h3 matListItemTitle>{{ item.title }}</h3>
                   <mat-icon>favorite</mat-icon>
                   on Angular
                 </h2>
-                <h3 class="mat-body-1 tc-td-secondary push-top-xs push-bottom-sm">
+                <h3
+                  class="mat-body-1 tc-td-secondary push-top-xs push-bottom-sm"
+                >
                   Teradata is acvtively commited to Angular. Our entire product
                   suite is built or revamped on Angular.
                 </h3>
@@ -212,7 +214,7 @@ <h3 class="mat-body-1 tc-td-secondary push-top-xs push-bottom-sm">
       </div>
     </section>
 
-    <section class="bgc-white tc-white">
+    <section>
       <div layout="row" layout-align="center center">
         <div class="max-width">
           <div layout="row" class="pad-top pad-bottom">
@@ -224,7 +226,9 @@ <h3 class="mat-body-1 tc-td-secondary push-top-xs push-bottom-sm">
                 >
                   Following the Material Design spec
                 </h2>
-                <h3 class="mat-body-1 tc-td-secondary push-top-xs push-bottom-sm">
+                <h3
+                  class="mat-body-1 tc-td-secondary push-top-xs push-bottom-sm"
+                >
                   Covalent follows the Material Design specification as closely
                   as possible through the construction of all components.
                 </h3>

apps/docs-app/src/app/content/docs/theme/theme.component.ts

@@ -21,7 +21,7 @@ export class ThemeComponent {
   // Define a custom typography config that overrides the font-family
   // or any typography level.
   $typography: mat.define-typography-config(
-    $font-family: 'Roboto, monospace',
+    $font-family: 'Inter, monospace',
     $headline: mat.define-typography-level(32px, 48px, 700)
   );
   

apps/docs-app/src/app/content/utilities/utilities-demos/animations/animations.component.html

@@ -23,7 +23,7 @@ <h3 class="push-bottom-sm mat-title">Setup</h3>
 
   <a
     mat-raised-button
-    color="none"
+    color="primary"
     href="https://angular.io/guide/animations"
     target="_blank"
     class="text-upper push-top-sm"

apps/docs-app/src/app/content/utilities/utilities-demos/directives/directives.component.html

@@ -13,7 +13,7 @@ <h3 class="push-bottom-sm mat-title">Setup</h3>
   </td-highlight>
   <a
     mat-raised-button
-    color="none"
+    color="primary"
     href="https://angular.io/docs/ts/latest/guide/attribute-directives.html"
     target="_blank"
     class="text-upper push-top-sm"