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/md3/theme.scss b/src/md3/theme.scss
new file mode 100644
index 0000000..c06c226
--- /dev/null
+++ b/src/md3/theme.scss
@@ -0,0 +1,105 @@
+// Generated with https://material-foundation.github.io/material-theme-builder/.
+
+@mixin dark-theme($var-prefix: '') {
+ --#{$var-prefix}md-sys-color-primary: rgb(130 213 200);
+ --#{$var-prefix}md-sys-color-surface-tint: rgb(130 213 200);
+ --#{$var-prefix}md-sys-color-on-primary: rgb(0 55 49);
+ --#{$var-prefix}md-sys-color-primary-container: rgb(0 80 72);
+ --#{$var-prefix}md-sys-color-on-primary-container: rgb(158 242 228);
+ --#{$var-prefix}md-sys-color-secondary: rgb(177 204 198);
+ --#{$var-prefix}md-sys-color-on-secondary: rgb(28 53 49);
+ --#{$var-prefix}md-sys-color-secondary-container: rgb(51 75 71);
+ --#{$var-prefix}md-sys-color-on-secondary-container: rgb(204 232 226);
+ --#{$var-prefix}md-sys-color-tertiary: rgb(173 202 230);
+ --#{$var-prefix}md-sys-color-on-tertiary: rgb(21 51 73);
+ --#{$var-prefix}md-sys-color-tertiary-container: rgb(45 73 97);
+ --#{$var-prefix}md-sys-color-on-tertiary-container: rgb(204 229 255);
+ --#{$var-prefix}md-sys-color-error: rgb(255 180 171);
+ --#{$var-prefix}md-sys-color-on-error: rgb(105 0 5);
+ --#{$var-prefix}md-sys-color-error-container: rgb(147 0 10);
+ --#{$var-prefix}md-sys-color-on-error-container: rgb(255 218 214);
+ --#{$var-prefix}md-sys-color-background: rgb(14 21 19);
+ --#{$var-prefix}md-sys-color-on-background: rgb(221 228 225);
+ --#{$var-prefix}md-sys-color-surface: rgb(14 21 19);
+ --#{$var-prefix}md-sys-color-on-surface: rgb(221 228 225);
+ --#{$var-prefix}md-sys-color-surface-variant: rgb(63 73 71);
+ --#{$var-prefix}md-sys-color-on-surface-variant: rgb(190 201 198);
+ --#{$var-prefix}md-sys-color-outline: rgb(137 147 144);
+ --#{$var-prefix}md-sys-color-outline-variant: rgb(63 73 71);
+ --#{$var-prefix}md-sys-color-shadow: rgb(0 0 0);
+ --#{$var-prefix}md-sys-color-scrim: rgb(0 0 0);
+ --#{$var-prefix}md-sys-color-inverse-surface: rgb(221 228 225);
+ --#{$var-prefix}md-sys-color-inverse-on-surface: rgb(43 50 48);
+ --#{$var-prefix}md-sys-color-inverse-primary: rgb(0 106 96);
+ --#{$var-prefix}md-sys-color-primary-fixed: rgb(158 242 228);
+ --#{$var-prefix}md-sys-color-on-primary-fixed: rgb(0 32 28);
+ --#{$var-prefix}md-sys-color-primary-fixed-dim: rgb(130 213 200);
+ --#{$var-prefix}md-sys-color-on-primary-fixed-variant: rgb(0 80 72);
+ --#{$var-prefix}md-sys-color-secondary-fixed: rgb(204 232 226);
+ --#{$var-prefix}md-sys-color-on-secondary-fixed: rgb(5 32 28);
+ --#{$var-prefix}md-sys-color-secondary-fixed-dim: rgb(177 204 198);
+ --#{$var-prefix}md-sys-color-on-secondary-fixed-variant: rgb(51 75 71);
+ --#{$var-prefix}md-sys-color-tertiary-fixed: rgb(204 229 255);
+ --#{$var-prefix}md-sys-color-on-tertiary-fixed: rgb(0 30 49);
+ --#{$var-prefix}md-sys-color-tertiary-fixed-dim: rgb(173 202 230);
+ --#{$var-prefix}md-sys-color-on-tertiary-fixed-variant: rgb(45 73 97);
+ --#{$var-prefix}md-sys-color-surface-dim: rgb(14 21 19);
+ --#{$var-prefix}md-sys-color-surface-bright: rgb(52 59 57);
+ --#{$var-prefix}md-sys-color-surface-container-lowest: rgb(9 15 14);
+ --#{$var-prefix}md-sys-color-surface-container-low: rgb(22 29 28);
+ --#{$var-prefix}md-sys-color-surface-container: rgb(26 33 32);
+ --#{$var-prefix}md-sys-color-surface-container-high: rgb(37 43 42);
+ --#{$var-prefix}md-sys-color-surface-container-highest: rgb(48 54 53);
+}
+
+@mixin light-theme {
+ --md-sys-color-primary: rgb(0 106 96);
+ --md-sys-color-surface-tint: rgb(0 106 96);
+ --md-sys-color-on-primary: rgb(255 255 255);
+ --md-sys-color-primary-container: rgb(158 242 228);
+ --md-sys-color-on-primary-container: rgb(0 32 28);
+ --md-sys-color-secondary: rgb(74 99 95);
+ --md-sys-color-on-secondary: rgb(255 255 255);
+ --md-sys-color-secondary-container: rgb(204 232 226);
+ --md-sys-color-on-secondary-container: rgb(5 32 28);
+ --md-sys-color-tertiary: rgb(69 97 121);
+ --md-sys-color-on-tertiary: rgb(255 255 255);
+ --md-sys-color-tertiary-container: rgb(204 229 255);
+ --md-sys-color-on-tertiary-container: rgb(0 30 49);
+ --md-sys-color-error: rgb(186 26 26);
+ --md-sys-color-on-error: rgb(255 255 255);
+ --md-sys-color-error-container: rgb(255 218 214);
+ --md-sys-color-on-error-container: rgb(65 0 2);
+ --md-sys-color-background: rgb(244 251 248);
+ --md-sys-color-on-background: rgb(22 29 28);
+ --md-sys-color-surface: rgb(244 251 248);
+ --md-sys-color-on-surface: rgb(22 29 28);
+ --md-sys-color-surface-variant: rgb(218 229 225);
+ --md-sys-color-on-surface-variant: rgb(63 73 71);
+ --md-sys-color-outline: rgb(111 121 119);
+ --md-sys-color-outline-variant: rgb(190 201 198);
+ --md-sys-color-shadow: rgb(0 0 0);
+ --md-sys-color-scrim: rgb(0 0 0);
+ --md-sys-color-inverse-surface: rgb(43 50 48);
+ --md-sys-color-inverse-on-surface: rgb(236 242 239);
+ --md-sys-color-inverse-primary: rgb(130 213 200);
+ --md-sys-color-primary-fixed: rgb(158 242 228);
+ --md-sys-color-on-primary-fixed: rgb(0 32 28);
+ --md-sys-color-primary-fixed-dim: rgb(130 213 200);
+ --md-sys-color-on-primary-fixed-variant: rgb(0 80 72);
+ --md-sys-color-secondary-fixed: rgb(204 232 226);
+ --md-sys-color-on-secondary-fixed: rgb(5 32 28);
+ --md-sys-color-secondary-fixed-dim: rgb(177 204 198);
+ --md-sys-color-on-secondary-fixed-variant: rgb(51 75 71);
+ --md-sys-color-tertiary-fixed: rgb(204 229 255);
+ --md-sys-color-on-tertiary-fixed: rgb(0 30 49);
+ --md-sys-color-tertiary-fixed-dim: rgb(173 202 230);
+ --md-sys-color-on-tertiary-fixed-variant: rgb(45 73 97);
+ --md-sys-color-surface-dim: rgb(213 219 217);
+ --md-sys-color-surface-bright: rgb(244 251 248);
+ --md-sys-color-surface-container-lowest: rgb(255 255 255);
+ --md-sys-color-surface-container-low: rgb(239 245 242);
+ --md-sys-color-surface-container: rgb(233 239 237);
+ --md-sys-color-surface-container-high: rgb(227 234 231);
+ --md-sys-color-surface-container-highest: rgb(221 228 225);
+}