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;
}