fix(deps): update dependency @material/web to v1

This CL also fixes many things necessary for the update.

It also changes the entire md3 theme, since there have been a lot of
breaking changes and this is the easiest way to have a working theme
again (it is also an improvement).

Change-Id: I4a412e0c0ca4345084c724fcaba000293521e907
diff --git a/src/ccDarkTheme/abstracts/_variables.scss b/src/ccDarkTheme/abstracts/_variables.scss
index 6a9182c..b34670f 100644
--- a/src/ccDarkTheme/abstracts/_variables.scss
+++ b/src/ccDarkTheme/abstracts/_variables.scss
@@ -1,3 +1,5 @@
+@use '../../md3/theme' as md3-theme;
+
 :root {
   --TWPT-primary-text: #e8eaed;
   --TWPT-primary-text-alt: var(--TWPT-primary-text);
@@ -11,6 +13,7 @@
   --TWPT-highlighted-item-background: rgba(255, 255, 255, .08);
   --TWPT-thread-read-background: var(--TWPT-highlighted-item-background);
   --TWPT-drawer-background: #2d2e30;
+  --TWPT-drawer-text: #d2cecb;
   --TWPT-button-background: #3c3e42;
   --TWPT-subtle-button-background: rgba(255, 255, 255, .54);
   --TWPT-input-underline: rgba(255, 255, 255, .28);
@@ -27,17 +30,7 @@
   --TWPT-interop-success: #37be5f;
   --TWPT-interop-blue: #7cacf8;
 
-  /* MD3 dark theme variables */
-  --TWPT-md-sys-color-primary: #bda5ff;
-  --TWPT-md-sys-color-on-primary: #000;
-  --TWPT-md-sys-color-surface: var(--TWPT-drawer-background);
-  --TWPT-md-sys-color-on-surface: var(--TWPT-primary-text);
-  --TWPT-md-sys-color-on-surface-rgb: 154, 160, 166;
-  --TWPT-md-sys-color-on-surface-variant: var(--TWPT-secondary-text);
-  --TWPT-md-list-list-divider-color: var(--TWPT-subtle-border);
-  --TWPT-md-ripple-hover-state-layer-color: white;
-  --TWPT-md-ripple-pressed-state-layer-color: white;
-  --TWPT-custom-md-icon-color: var(--TWPT-subtle-button-background);
+  @include md3-theme.dark-theme('TWPT-');
 
   /* Overrides for variables used by the Community Console styles */
   --gm-outlinedtextfield-outline-color: var(--TWPT-card-border);
diff --git a/src/ccDarkTheme/components/_drawer.scss b/src/ccDarkTheme/components/_drawer.scss
index 973b7f8..35fefdd 100644
--- a/src/ccDarkTheme/components/_drawer.scss
+++ b/src/ccDarkTheme/components/_drawer.scss
@@ -25,7 +25,7 @@
 
 material-drawer material-list-item,
     material-drawer material-list-item .title {
-  color: #d2cecb!important;
+  color: var(--TWPT-drawer-text)!important;
 }
 
 material-drawer ec-forum-drawer-item material-checkbox material-icon {
diff --git a/src/ccDarkTheme/layout/_header.scss b/src/ccDarkTheme/layout/_header.scss
index abad975..abfca60 100644
--- a/src/ccDarkTheme/layout/_header.scss
+++ b/src/ccDarkTheme/layout/_header.scss
@@ -30,5 +30,5 @@
 
 // Header menus
 .popup material-list-item {
-  color: #d2cecb!important;
+  color: var(--TWPT-drawer-text)!important;
 }