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/common/components/FormField.js b/src/common/components/FormField.js
new file mode 100644
index 0000000..aa32732
--- /dev/null
+++ b/src/common/components/FormField.js
@@ -0,0 +1,53 @@
+import {css, html, LitElement} from 'lit';
+
+/**
+ * Lite component inspired in the now removed material-web's Formfield.
+ * https://github.com/material-components/material-web/commit/753a03be963f7b5242e98b73d1309abbe9f5bf51
+ */
+export default class TwptFormField extends LitElement {
+ static styles = [
+ css`
+ .formfield {
+ align-items: center;
+ display: inline-flex;
+ vertical-align: middle;
+ }
+
+ label {
+ margin-inline: 0px auto;
+ order: 0;
+ padding-inline: 4px 0px;
+ }
+ `,
+ ];
+
+ render() {
+ return html`
+ <span class="formfield">
+ <slot></slot>
+ <label @click="${this._labelClick}">
+ <slot name="label"></slot>
+ </label>
+ </span>
+ `;
+ }
+
+ _labelClick() {
+ const input = this._input;
+ if (!input || !this.shadowRoot) return;
+
+ input.focus();
+ input.click();
+ }
+
+ get _input() {
+ return this._slottedChildren?.[0] ?? null;
+ }
+
+ get _slottedChildren() {
+ if (!this.shadowRoot) return null;
+ const slot = this.shadowRoot.querySelector('slot');
+ return slot.assignedElements({flatten: true});
+ }
+}
+window.customElements.define('twpt-form-field', TwptFormField);
diff --git a/src/common/styles/md3.js b/src/common/styles/md3.js
index a634fb2..45f6507 100644
--- a/src/common/styles/md3.js
+++ b/src/common/styles/md3.js
@@ -4,23 +4,66 @@
// theme color scheme (it's defined in variables prefixed with --TWPT).
export const SHARED_MD3_STYLES = css`
:host {
- --md-sys-color-primary: var(--TWPT-md-sys-color-primary, #6750a4);
- --md-sys-color-on-primary: var(--TWPT-md-sys-color-on-primary, #fff);
- --md-sys-color-surface: var(--TWPT-md-sys-color-surface, rgb(227, 255, 251));
- --md-sys-color-on-surface: var(--TWPT-md-sys-color-on-surface);
- --md-sys-color-on-surface-rgb: var(--TWPT-md-sys-color-on-surface-rgb);
- --md-sys-color-on-surface-variant: var(--TWPT-md-sys-color-on-surface-variant);
- --md-list-list-divider-color: var(--TWPT-md-list-list-divider-color);
- --md-ripple-hover-state-layer-color: var(--TWPT-md-ripple-hover-state-layer-color);
- --md-ripple-pressed-state-layer-color: var(--TWPT-md-ripple-pressed-state-layer-color);
- --md-icon-button-unselected-icon-color: var(--TWPT-custom-md-icon-color);
- --md-icon-button-unselected-hover-icon-color: var(--TWPT-custom-md-icon-color);
- --md-icon-button-unselected-focus-icon-color: var(--TWPT-custom-md-icon-color);
- --md-icon-button-unselected-pressed-icon-color: var(--TWPT-custom-md-icon-color);
+ /* Adapted from //src/md3/theme.scss */
+ --md-sys-color-primary: var(--TWPT-md-sys-color-primary, rgb(0 106 96));
+ --md-sys-color-surface-tint: var(--TWPT-md-sys-color-surface-tint, rgb(0 106 96));
+ --md-sys-color-on-primary: var(--TWPT-md-sys-color-on-primary, rgb(255 255 255));
+ --md-sys-color-primary-container: var(--TWPT-md-sys-color-primary-container, rgb(158 242 228));
+ --md-sys-color-on-primary-container: var(--TWPT-md-sys-color-on-primary-container, rgb(0 32 28));
+ --md-sys-color-secondary: var(--TWPT-md-sys-color-secondary, rgb(74 99 95));
+ --md-sys-color-on-secondary: var(--TWPT-md-sys-color-on-secondary, rgb(255 255 255));
+ --md-sys-color-secondary-container: var(--TWPT-md-sys-color-secondary-container, rgb(204 232 226));
+ --md-sys-color-on-secondary-container: var(--TWPT-md-sys-color-on-secondary-container, rgb(5 32 28));
+ --md-sys-color-tertiary: var(--TWPT-md-sys-color-tertiary, rgb(69 97 121));
+ --md-sys-color-on-tertiary: var(--TWPT-md-sys-color-on-tertiary, rgb(255 255 255));
+ --md-sys-color-tertiary-container: var(--TWPT-md-sys-color-tertiary-container, rgb(204 229 255));
+ --md-sys-color-on-tertiary-container: var(--TWPT-md-sys-color-on-tertiary-container, rgb(0 30 49));
+ --md-sys-color-error: var(--TWPT-md-sys-color-error, rgb(186 26 26));
+ --md-sys-color-on-error: var(--TWPT-md-sys-color-on-error, rgb(255 255 255));
+ --md-sys-color-error-container: var(--TWPT-md-sys-color-error-container, rgb(255 218 214));
+ --md-sys-color-on-error-container: var(--TWPT-md-sys-color-on-error-container, rgb(65 0 2));
+ --md-sys-color-background: var(--TWPT-md-sys-color-background, rgb(244 251 248));
+ --md-sys-color-on-background: var(--TWPT-md-sys-color-on-background, rgb(22 29 28));
+ --md-sys-color-surface: var(--TWPT-md-sys-color-surface, rgb(244 251 248));
+ --md-sys-color-on-surface: var(--TWPT-md-sys-color-on-surface, rgb(22 29 28));
+ --md-sys-color-surface-variant: var(--TWPT-md-sys-color-surface-variant, rgb(218 229 225));
+ --md-sys-color-on-surface-variant: var(--TWPT-md-sys-color-on-surface-variant, rgb(63 73 71));
+ --md-sys-color-outline: var(--TWPT-md-sys-color-outline, rgb(111 121 119));
+ --md-sys-color-outline-variant: var(--TWPT-md-sys-color-outline-variant, rgb(190 201 198));
+ --md-sys-color-shadow: var(--TWPT-md-sys-color-shadow, rgb(0 0 0));
+ --md-sys-color-scrim: var(--TWPT-md-sys-color-scrim, rgb(0 0 0));
+ --md-sys-color-inverse-surface: var(--TWPT-md-sys-color-inverse-surface, rgb(43 50 48));
+ --md-sys-color-inverse-on-surface: var(--TWPT-md-sys-color-inverse-on-surface, rgb(236 242 239));
+ --md-sys-color-inverse-primary: var(--TWPT-md-sys-color-inverse-primary, rgb(130 213 200));
+ --md-sys-color-primary-fixed: var(--TWPT-md-sys-color-primary-fixed, rgb(158 242 228));
+ --md-sys-color-on-primary-fixed: var(--TWPT-md-sys-color-on-primary-fixed, rgb(0 32 28));
+ --md-sys-color-primary-fixed-dim: var(--TWPT-md-sys-color-primary-fixed-dim, rgb(130 213 200));
+ --md-sys-color-on-primary-fixed-variant: var(--TWPT-md-sys-color-on-primary-fixed-variant, rgb(0 80 72));
+ --md-sys-color-secondary-fixed: var(--TWPT-md-sys-color-secondary-fixed, rgb(204 232 226));
+ --md-sys-color-on-secondary-fixed: var(--TWPT-md-sys-color-on-secondary-fixed, rgb(5 32 28));
+ --md-sys-color-secondary-fixed-dim: var(--TWPT-md-sys-color-secondary-fixed-dim, rgb(177 204 198));
+ --md-sys-color-on-secondary-fixed-variant: var(--TWPT-md-sys-color-on-secondary-fixed-variant, rgb(51 75 71));
+ --md-sys-color-tertiary-fixed: var(--TWPT-md-sys-color-tertiary-fixed, rgb(204 229 255));
+ --md-sys-color-on-tertiary-fixed: var(--TWPT-md-sys-color-on-tertiary-fixed, rgb(0 30 49));
+ --md-sys-color-tertiary-fixed-dim: var(--TWPT-md-sys-color-tertiary-fixed-dim, rgb(173 202 230));
+ --md-sys-color-on-tertiary-fixed-variant: var(--TWPT-md-sys-color-on-tertiary-fixed-variant, rgb(45 73 97));
+ --md-sys-color-surface-dim: var(--TWPT-md-sys-color-surface-dim, rgb(213 219 217));
+ --md-sys-color-surface-bright: var(--TWPT-md-sys-color-surface-bright, rgb(244 251 248));
+ --md-sys-color-surface-container-lowest: var(--TWPT-md-sys-color-surface-container-lowest, rgb(255 255 255));
+ --md-sys-color-surface-container-low: var(--TWPT-md-sys-color-surface-container-low, rgb(239 245 242));
+ --md-sys-color-surface-container: var(--TWPT-md-sys-color-surface-container, rgb(233 239 237));
+ --md-sys-color-surface-container-high: var(--TWPT-md-sys-color-surface-container-high, rgb(227 234 231));
+ --md-sys-color-surface-container-highest: var(--TWPT-md-sys-color-surface-container-highest, rgb(221 228 225));
+
+ /* Material Design 2 theme */
--mdc-theme-surface: var(--TWPT-primary-background, #fff);
--mdc-theme-on-surface: var(--TWPT-primary-text, #000);
- --mdc-theme-primary: var(--TWPT-md-sys-color-primary, #6750a4);
- --mdc-theme-on-primary: var(--TWPT-md-sys-color-on-primary, #fff);
+ --mdc-theme-primary: var(--TWPT-md-sys-color-primary, rgb(0 106 96));
+ --mdc-theme-on-primary: var(--TWPT-md-sys-color-on-primary, rgb(255 255 255));
--mdc-dialog-heading-ink-color: var(--TWPT-primary-text);
}
+
+ md-icon[filled] {
+ font-variation-settings: 'FILL' 1;
+ }
`;