docs(docs-infra): fix home animation text width on small devices; fix snackbar colors (angular#60745)

The text used to exceed the viewport width.

PR Close angular#60745

Author: hawkgs

adev/shared-docs/styles/_colors.scss

@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 // Colors
 // Using OKLCH color space for better color reproduction on P3 displays,
 // as well as better human-readability
@@ -186,9 +188,6 @@
   // for the "unfilled" portion of the word that hasn't
   // been highlighted by the gradient
   --gray-unfilled: var(--gray-400);
-  // TODO: convert oklch to hex at build time
-  --webgl-page-background: #ffffff;
-  --webgl-gray-unfilled: #a39fa9;
 }
 
 @mixin dark-mode-definitions() {
@@ -254,9 +253,6 @@
 
   // Home page - dark mode
   --gray-unfilled: var(--gray-700);
-  // TODO: convert oklch to hex at build time
-  --webgl-page-background: #0f0f11;
-  --webgl-gray-unfilled: #413e46;
 
   .docs-toggle {
     input {
@@ -268,9 +264,13 @@
 }
 
 @mixin mdc-definitions() {
-  --mdc-snackbar-container-shape: 0.25rem;
-  --mdc-snackbar-container-color: var(--page-background);
-  --mdc-snackbar-supporting-text-color: var(--primary-contrast);
+  @include mat.snack-bar-overrides(
+    (
+      container-shape: 0.25rem,
+      container-color: var(--page-background),
+      supporting-text-color: var(--primary-contrast),
+    )
+  );
 }
 
 // LIGHT MODE (Explicit)

adev/src/app/features/home/components/home-animation/home-animation.component.scss

@@ -49,7 +49,7 @@ $transition: 200ms linear;
         color: var(--quaternary-contrast);
         font-size: clamp(1rem, 1vw, 2rem);
         line-height: 1.5;
-        width: clamp(375px, 50%, 600px);
+        width: clamp(345px, 50%, 600px);
         margin: 0 auto;
       }
 
@@ -91,6 +91,8 @@ $transition: 200ms linear;
           & {
             top: 6rem;
             left: var(--layout-padding);
+            /* Assuming the container width is identical to the viewport width (mobile device). */
+            max-width: calc(100% - var(--layout-padding) * 2);
           }
         }