@things-factory/auth-ui 7.0.1-beta.6 → 7.0.1-beta.8

package/client/auth-style-sign.ts

@@ -3,7 +3,7 @@ import { css } from 'lit'
 export const AUTH_STYLE_SIGN = css`
   :host {
     display: flex;
-    background-color: var(--auth-background);
+    background-color: var(--auth-background, var(--md-sys-color-primary));
   }
 
   :host *:focus {
@@ -14,10 +14,6 @@ export const AUTH_STYLE_SIGN = css`
     box-sizing: border-box;
   }
 
-  ::placeholder {
-    color: var(--opacity-light-color);
-    font: var(--auth-input-font);
-  }
   .wrap {
     display: block;
     width: 450px;
@@ -26,13 +22,15 @@ export const AUTH_STYLE_SIGN = css`
     padding-bottom: 100px;
     text-align: center;
   }
+
   .auth-brand {
-    color: #fff;
+    color: var(--md-sys-color-on-primary);
   }
+
   .auth-brand img {
     margin: 15% auto 5px auto;
     width: 100px;
-    border: 3px solid var(--theme-white-color);
+    border: 3px solid var(--md-sys-color-on-primary);
     border-radius: 25px;
     box-shadow: var(--box-shadow);
   }
@@ -62,7 +60,7 @@ export const AUTH_STYLE_SIGN = css`
     grid-column: 1 / -1;
     margin: 50px 0 0 0;
     font: var(--auth-title-font);
-    color: var(--auth-title-color);
+    color: var(--auth-title-color, var(--md-sys-color-on-primary));
     text-transform: uppercase;
   }
 
@@ -81,8 +79,8 @@ export const AUTH_STYLE_SIGN = css`
   }
 
   .fingerprint {
-    color: var(--md-sys-color-on-primary-container);
-    border: 1.5px solid var(--md-sys-color-on-primary-container);
+    color: var(--md-sys-color-on-primary);
+    border: 1.5px solid var(--md-sys-color-on-primary);
     border-radius: 20%;
     width: 36px;
     height: 36px;
@@ -105,11 +103,13 @@ export const AUTH_STYLE_SIGN = css`
   }
 
   .wrap .link md-text-button {
-    --md-text-button-label-text-color: var(--md-sys-color-primary-container);
+    --md-text-button-label-text-color: var(--md-sys-color-on-primary);
+    --md-text-button-focus-label-text-color: var(--md-sys-color-on-primary);
+    --md-text-button-hover-label-text-color: var(--md-sys-color-on-primary);
   }
 
   .wrap .link md-icon {
-    color: var(--md-sys-color-primary-container);
+    color: var(--md-sys-color-on-primary);
   }
 
   #locale-area {
@@ -121,7 +121,7 @@ export const AUTH_STYLE_SIGN = css`
   #locale-area > label {
     display: flex;
     align-items: center;
-    color: var(--theme-white-color);
+    color: var(--md-sys-color-on-primary);
     --md-icon-size: 16px;
   }
 
@@ -134,7 +134,7 @@ export const AUTH_STYLE_SIGN = css`
     --i18n-selector-field-border: none;
     --i18n-selector-field-background-color: none;
     --i18n-selector-field-font-size: 14px;
-    --i18n-selector-field-color: var(--theme-white-color);
+    --i18n-selector-field-color: var(--md-sys-color-on-primary);
   }
 
   .lottie-container {

package/client/components/abstract-auth-page.ts

@@ -43,7 +43,7 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
         padding: var(--padding-dufault, 9px);
         left: 20px;
         top: 10px;
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
       }
 
       div.field {

package/client/components/create-domain-popup.ts

@@ -36,12 +36,12 @@ class CreateDomainPopup extends localize(i18next)(LitElement) {
         flex-direction: column;
 
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         text-transform: var(--label-text-transform);
       }
 
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding);

package/client/components/create-role.ts

@@ -12,7 +12,7 @@ import { OxPrompt } from '@operato/popup/ox-prompt.js'
 class CreateRole extends localize(i18next)(LitElement) {
   static styles = css`
     :host {
-      --md-text-field-fill-color: var(--theme-white-color);
+      --md-text-field-fill-color: var(--md-sys-color-on-primary);
       background-color: var(--md-sys-color-surface);
       margin: var(--margin-wide) 0;
       padding: var(--padding-wide);

package/client/components/create-user.ts

@@ -1,3 +1,6 @@
+import '@material/web/button/outlined-button.js'
+import '@material/web/textfield/filled-text-field.js'
+
 import { css, html, LitElement } from 'lit'
 import { customElement, query } from 'lit/decorators.js'
 
@@ -7,7 +10,7 @@ import { i18next } from '@operato/i18n'
 class CreateUser extends LitElement {
   static styles = css`
     :host {
-      --md-text-field-fill-color: var(--theme-white-color);
+      --md-text-field-fill-color: var(--md-sys-color-on-primary);
       background-color: var(--md-sys-color-surface);
       margin: var(--margin-wide) 0;
       padding: var(--padding-wide);
@@ -45,17 +48,13 @@ class CreateUser extends LitElement {
 
   render() {
     return html`
-      <md-outlined-text-field
+      <md-filled-text-field
         type="text"
         name="name"
         label=${String(i18next.t('label.x name', { x: i18next.t('label.user') }))}
-      ></md-outlined-text-field>
+      ></md-filled-text-field>
 
-      <md-outlined-text-field
-        type="email"
-        name="email"
-        label=${String(i18next.t('field.email'))}
-      ></md-outlined-text-field>
+      <md-filled-text-field type="email" name="email" label=${String(i18next.t('field.email'))}></md-filled-text-field>
 
       <md-outlined-button @click=${this.onCreateUser.bind(this)}
         >${String(i18next.t('button.create'))}</md-outlined-button

package/client/components/domain-switch.ts

@@ -16,7 +16,7 @@ export class DomainSwitch extends connect(store)(LitElement) {
         display: flex;
         max-width: 100%;
         background-color: rgba(var(--primary-color-rgb), 0.1);
-        border-bottom: var(--border-dark-color);
+        border-bottom: var(--border-dim-color);
       }
 
       :host * {
@@ -36,7 +36,7 @@ export class DomainSwitch extends connect(store)(LitElement) {
         padding: 2px;
         border-radius: 50%;
         font-size: var(--fontsize-large);
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
       }
       span,
       select {
@@ -67,12 +67,12 @@ export class DomainSwitch extends connect(store)(LitElement) {
       }
       :host([dark]) span,
       :host([dark]) select {
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
         font: bold 13px/13px var(--theme-font);
       }
       :host([dark]) option {
         background-color: var(--primary-color, #585858);
-        color: var(--theme-white-color, #fff);
+        color: var(--md-sys-color-on-primary, #fff);
       }
       :host([dark]) span {
         line-height: 23px;
@@ -81,7 +81,7 @@ export class DomainSwitch extends connect(store)(LitElement) {
       :host([rounded-corner]) {
         height: 30px;
         border-radius: 20px;
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
       }
       :host([rounded-corner]) div {
         padding: var(--padding-narrow) var(--padding-default);

package/client/components/invite-customer.ts

@@ -11,7 +11,7 @@ class InviteCustomer extends localize(i18next)(LitElement) {
   static styles = [
     css`
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding);
@@ -47,10 +47,13 @@ class InviteCustomer extends localize(i18next)(LitElement) {
 
   async invite() {
     try {
-      if (!this.customerNameInput.value) throw new Error(i18next.t('error.value is empty', { value: i18next.t('field.name') }))
+      if (!this.customerNameInput.value)
+        throw new Error(i18next.t('error.value is empty', { value: i18next.t('field.name') }))
 
       if (this.customers.find(c => c.name?.toLowerCase() === this.customerNameInput.value.toLowerCase())) {
-        throw new Error(i18next.t('error.x already exists in y', { x: this.customerNameInput.value, y: i18next.t('field.customer') }))
+        throw new Error(
+          i18next.t('error.x already exists in y', { x: this.customerNameInput.value, y: i18next.t('field.customer') })
+        )
       }
 
       if (

package/client/components/invite-user.ts

@@ -18,7 +18,7 @@ class InviteUser extends localize(i18next)(LitElement) {
     input {
       flex: 1;
 
-      border: var(--border-dark-color);
+      border: var(--border-dim-color);
       border-radius: var(--border-radius);
       margin: var(--input-margin);
       padding: var(--input-padding);
@@ -36,7 +36,9 @@ class InviteUser extends localize(i18next)(LitElement) {
   render() {
     return html`
       <input name="email" type="email" required name="invite-email" autocapitalize="off" />
-      <md-outlined-button @click=${this.invite.bind(this)}> <md-icon slot="icon">group_add</md-icon>${String(i18next.t('label.invite user'))} </md-outlined-button>
+      <md-outlined-button @click=${this.invite.bind(this)}>
+        <md-icon slot="icon">group_add</md-icon>${String(i18next.t('label.invite user'))}
+      </md-outlined-button>
     `
   }
 

package/client/components/ownership-transfer-popup.ts

@@ -25,7 +25,7 @@ class OwnershipTransferPopup extends localize(i18next)(LitElement) {
         flex: 1;
       }
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding);

package/client/components/partner-info-card.ts

@@ -8,7 +8,7 @@ export class PartnerInfoCard extends LitElement {
   static styles = [
     css`
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding);
@@ -50,7 +50,7 @@ export class PartnerInfoCard extends LitElement {
         flex-direction: column;
 
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         text-transform: var(--label-text-transform);
       }
       @media screen and (max-width: 480px) {

package/client/components/role-edit-form.ts

@@ -20,7 +20,7 @@ class RoleEditForm extends localize(i18next)(LitElement) {
       padding-bottom: var(--padding-default);
     }
     input {
-      border: var(--border-dark-color);
+      border: var(--border-dim-color);
       border-radius: var(--border-radius);
       margin: var(--input-margin);
       padding: var(--input-padding);
@@ -31,7 +31,7 @@ class RoleEditForm extends localize(i18next)(LitElement) {
       display: flex;
       flex-direction: column;
       font: var(--label-font);
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-on-primary);
       text-transform: var(--label-text-transform);
     }
     @media screen and (max-width: 480px) {

package/client/components/role-selector.ts

@@ -33,7 +33,7 @@ export class RoleSelector extends LitElement {
         padding-left: var(--padding-narrow);
         text-transform: capitalize;
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
       }
       li {
         padding: var(--padding-narrow);

package/client/entries/auth/activate.ts

@@ -20,7 +20,7 @@ export class AuthActivate extends localize(i18next)(LitElement) {
         width: 100vw;
         height: 100vh;
         height: 100dvh;
-        background-color: var(--auth-background);
+        background-color: var(--auth-background, var(--md-sys-color-primary));
       }
 
       .wrap {
@@ -38,7 +38,7 @@ export class AuthActivate extends localize(i18next)(LitElement) {
       .auth-brand img {
         margin: 15% auto 5px auto;
         width: 100px;
-        border: 3px solid var(--theme-white-color);
+        border: 3px solid var(--md-sys-color-on-primary);
         border-radius: 25px;
         box-shadow: var(--box-shadow);
       }
@@ -53,14 +53,14 @@ export class AuthActivate extends localize(i18next)(LitElement) {
         margin: 50px 0 0 0;
         padding: 0;
         font-size: 24px;
-        color: var(--auth-title-color);
+        color: var(--auth-title-color, var(--md-sys-color-on-primary));
       }
 
       p {
         margin: 0;
         padding: var(--auth-description-padding);
         font: var(--auth-description-font);
-        color: var(--auth-description-color);
+        color: var(--auth-description-color, var(--md-sys-color-on-secondary));
       }
 
       #button-area {
@@ -69,9 +69,9 @@ export class AuthActivate extends localize(i18next)(LitElement) {
       }
 
       md-elevated-button {
-        --md-theme-primary: var(--auth-button-background-color);
+        --md-theme-primary: var(--md-sys-color-on-primary);
         --md-theme-on-primary: var(--md-sys-color-primary);
-        --md-button-horizontal-padding: var(--padding-default);
+        --md-button-horizontal-padding: var(--spacing-medium);
         --md-button-ink-color: var(--md-sys-color-primary);
       }
 

package/client/entries/auth/checkin.ts

@@ -21,7 +21,7 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
         margin: auto;
-        background-color: var(--auth-background);
+        background-color: var(--auth-background, var(--md-sys-color-primary));
         height: 100vh;
         height: 100dvh;
       }
@@ -39,11 +39,11 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
         padding: 0;
         background-color: var(--md-sys-color-surface);
         border-radius: var(--border-radius);
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         list-style: none;
       }
       li {
-        border-bottom: var(--border-dark-color);
+        border-bottom: var(--border-dim-color);
         margin-bottom: -1px;
         padding: var(--padding-default) var(--padding-wide);
         font-size: 18px;

package/client/entries/auth/result.ts

@@ -18,7 +18,7 @@ export class AuthResult extends localize(i18next)(LitElement) {
         width: 100vw;
         height: 100vh;
         height: 100dvh;
-        background-color: var(--auth-background);
+        background-color: var(--auth-background, var(--md-sys-color-primary));
       }
       .wrap {
         display: block;
@@ -33,7 +33,7 @@ export class AuthResult extends localize(i18next)(LitElement) {
       .auth-brand img {
         margin: 15% auto 5px auto;
         width: 100px;
-        border: 3px solid var(--theme-white-color);
+        border: 3px solid var(--md-sys-color-on-primary);
         border-radius: 25px;
         box-shadow: var(--box-shadow);
       }
@@ -46,13 +46,13 @@ export class AuthResult extends localize(i18next)(LitElement) {
         margin: 50px 0 0 0;
         padding: 0;
         font-size: 24px;
-        color: var(--auth-title-color);
+        color: var(--auth-title-color, var(--md-sys-color-on-primary));
       }
       p {
         margin: 0;
         padding: var(--auth-description-padding);
         font: var(--auth-description-font);
-        color: var(--auth-description-color);
+        color: var(--auth-description-color, var(--md-sys-color-on-secondary));
       }
       :host *:focus {
         outline: none;

package/client/entries/oauth2/oauth2-decision-page.ts

@@ -42,7 +42,7 @@ class OAuth2DecisionPage extends LitElement {
       }
 
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding);
@@ -54,7 +54,7 @@ class OAuth2DecisionPage extends LitElement {
         display: flex;
         flex-direction: column;
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         text-transform: var(--label-text-transform);
       }
 

package/client/pages/app-binding/app-binding.ts

@@ -49,11 +49,11 @@ class AppBinding extends connect(store)(PageView) {
 
       label {
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         text-transform: var(--label-text-transform);
       }
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding);
@@ -82,7 +82,7 @@ class AppBinding extends connect(store)(PageView) {
       }
       fieldset {
         border-radius: var(--border-radius);
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         margin: var(--fieldset-margin);
         padding: var(--fieldset-padding);
       }

package/client/pages/appliance/appliance.ts

@@ -37,11 +37,11 @@ class Appliance extends connect(store)(PageView) {
 
       label {
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         text-transform: var(--label-text-transform);
       }
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding);
@@ -70,7 +70,7 @@ class Appliance extends connect(store)(PageView) {
       }
       fieldset {
         border-radius: var(--border-radius);
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         margin: var(--fieldset-margin);
         padding: var(--fieldset-padding);
       }

package/client/pages/appliance/register.ts

@@ -45,11 +45,11 @@ class ApplianceRegister extends connect(store)(PageView) {
         }
         label {
           font: var(--label-font);
-          color: var(--label-color);
+          color: var(--label-color, var(--md-sys-color-on-surface));
           text-transform: var(--label-text-transform);
         }
         input {
-          border: var(--border-dark-color);
+          border: var(--border-dim-color);
           border-radius: var(--border-radius);
           margin: var(--input-margin);
           padding: var(--input-padding);

package/client/pages/application/application.ts

@@ -49,12 +49,12 @@ class Application extends connect(store)(PageView) {
       }
       label {
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         text-transform: var(--label-text-transform);
       }
       input,
       select {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: 9px;
@@ -79,7 +79,7 @@ class Application extends connect(store)(PageView) {
       }
       fieldset {
         border-radius: var(--border-radius);
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         margin: var(--fieldset-margin);
         padding: var(--fieldset-padding);
       }

package/client/pages/application/register.ts

@@ -60,11 +60,11 @@ class ApplicationRegister extends connect(store)(PageView) {
       }
       label {
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         text-transform: var(--label-text-transform);
       }
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding);

package/client/pages/role/role-management.ts

@@ -41,7 +41,7 @@ class RoleManagement extends connect(store)(PageView) {
         max-width: var(--content-container-max-width);
         flex-direction: row;
         overflow: auto;
-        border-top: var(--border-dark-color);
+        border-top: var(--border-dim-color);
       }
     `
   ]

package/client/themes/auth-theme.css

@@ -1,20 +1,17 @@
 body {
   /* login page style*/
-  --auth-background: var(--md-sys-color-primary);
   --auth-brand-name: bold 20px var(--theme-font);
   --auth-brand-name-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
   --auth-brand-welcome-msg: normal 12px var(--theme-font);
 
-  --auth-title-color: var(--theme-white-color);
   --auth-title-font: bold 32px var(--theme-font);
-  --auth-description-color: var(--secondary-text-color);
   --auth-description-font: normal 12px var(--theme-font);
   --auth-description-padding: 5px 5px 15px 5px;
 
   --auth-input-font: normal 18px/24px var(--theme-font);
   --auth-input-border: 1px solid var(--opacity-dark-color);
   --auth-input-border-light: 1px solid var(--opacity-light-color);
-  --auth-input-color: var(--theme-white-color);
+  --auth-input-color: var(--md-sys-color-on-primary);
 
   --auth-button-background-color: var(--md-sys-color-surface-variant);
   --auth-button-background-focus-color: var(--status-success-color);
@@ -46,7 +43,7 @@ body {
   --checkin-header-height: 45px;
   --checkin-header-background-color: var(--md-sys-color-primary);
   --checkin-header-title-font: bold 19px var(--theme-font);
-  --checkin-header-title-color: var(--theme-white-color);
+  --checkin-header-title-color: var(--md-sys-color-on-primary);
   --checkin-wrap-max-width: 500px;
   --checkin-wrap-padding: var(--padding-wide);
 }

package/dist-client/auth-style-sign.js

@@ -2,7 +2,7 @@ import { css } from 'lit';
 export const AUTH_STYLE_SIGN = css `
   :host {
     display: flex;
-    background-color: var(--auth-background);
+    background-color: var(--auth-background, var(--md-sys-color-primary));
   }
 
   :host *:focus {
@@ -13,10 +13,6 @@ export const AUTH_STYLE_SIGN = css `
     box-sizing: border-box;
   }
 
-  ::placeholder {
-    color: var(--opacity-light-color);
-    font: var(--auth-input-font);
-  }
   .wrap {
     display: block;
     width: 450px;
@@ -25,13 +21,15 @@ export const AUTH_STYLE_SIGN = css `
     padding-bottom: 100px;
     text-align: center;
   }
+
   .auth-brand {
-    color: #fff;
+    color: var(--md-sys-color-on-primary);
   }
+
   .auth-brand img {
     margin: 15% auto 5px auto;
     width: 100px;
-    border: 3px solid var(--theme-white-color);
+    border: 3px solid var(--md-sys-color-on-primary);
     border-radius: 25px;
     box-shadow: var(--box-shadow);
   }
@@ -61,7 +59,7 @@ export const AUTH_STYLE_SIGN = css `
     grid-column: 1 / -1;
     margin: 50px 0 0 0;
     font: var(--auth-title-font);
-    color: var(--auth-title-color);
+    color: var(--auth-title-color, var(--md-sys-color-on-primary));
     text-transform: uppercase;
   }
 
@@ -80,8 +78,8 @@ export const AUTH_STYLE_SIGN = css `
   }
 
   .fingerprint {
-    color: var(--md-sys-color-on-primary-container);
-    border: 1.5px solid var(--md-sys-color-on-primary-container);
+    color: var(--md-sys-color-on-primary);
+    border: 1.5px solid var(--md-sys-color-on-primary);
     border-radius: 20%;
     width: 36px;
     height: 36px;
@@ -104,11 +102,13 @@ export const AUTH_STYLE_SIGN = css `
   }
 
   .wrap .link md-text-button {
-    --md-text-button-label-text-color: var(--md-sys-color-primary-container);
+    --md-text-button-label-text-color: var(--md-sys-color-on-primary);
+    --md-text-button-focus-label-text-color: var(--md-sys-color-on-primary);
+    --md-text-button-hover-label-text-color: var(--md-sys-color-on-primary);
   }
 
   .wrap .link md-icon {
-    color: var(--md-sys-color-primary-container);
+    color: var(--md-sys-color-on-primary);
   }
 
   #locale-area {
@@ -120,7 +120,7 @@ export const AUTH_STYLE_SIGN = css `
   #locale-area > label {
     display: flex;
     align-items: center;
-    color: var(--theme-white-color);
+    color: var(--md-sys-color-on-primary);
     --md-icon-size: 16px;
   }
 
@@ -133,7 +133,7 @@ export const AUTH_STYLE_SIGN = css `
     --i18n-selector-field-border: none;
     --i18n-selector-field-background-color: none;
     --i18n-selector-field-font-size: 14px;
-    --i18n-selector-field-color: var(--theme-white-color);
+    --i18n-selector-field-color: var(--md-sys-color-on-primary);
   }
 
   .lottie-container {