@things-factory/auth-ui 7.0.1-rc.11 → 7.0.1-rc.12

package/client/auth-style-sign.ts

@@ -45,7 +45,7 @@ export const AUTH_STYLE_SIGN = css`
   }
   .auth-form {
     display: grid;
-    grid-gap: var(--margin-default);
+    grid-gap: var(--spacing-medium);
     grid-template-columns: 1fr 1fr;
   }
 
@@ -53,7 +53,7 @@ export const AUTH_STYLE_SIGN = css`
     grid-column: 1 / -1;
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-gap: var(--margin-default);
+    grid-gap: var(--spacing-medium);
     align-items: center;
   }
 
@@ -116,7 +116,7 @@ export const AUTH_STYLE_SIGN = css`
   #locale-area {
     display: flex;
     grid-column: 1 / -1;
-    padding: 0 var(--padding-default);
+    padding: 0 var(--spacing-medium);
   }
 
   #locale-area > label {

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

@@ -47,7 +47,7 @@ export abstract class AbstractAuthPage extends localize(i18next)(LitElement) {
       }
 
       div.field {
-        margin-bottom: var(--margin-default);
+        margin-bottom: var(--spacing-medium);
       }
 
       [hidden] {

package/client/components/change-password.ts

@@ -41,7 +41,7 @@ export class ChangePassword extends localize(i18next)(LitElement) {
       }
 
       md-elevated-button {
-        margin: var(--margin-narrow) auto var(--margin-default) auto;
+        margin: var(--spacing-small) auto var(--spacing-medium) auto;
       }
 
       button {

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

@@ -18,7 +18,7 @@ class CreateDomainPopup extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
         background-color: var(--md-sys-color-background);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
         overflow: auto;
       }
 

package/client/components/create-role.ts

@@ -14,8 +14,8 @@ class CreateRole extends localize(i18next)(LitElement) {
     :host {
       --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);
+      margin: var(--spacing-large) 0;
+      padding: var(--spacing-large);
       border-radius: var(--border-radius);
       box-shadow: var(--box-shadow);
 

package/client/components/create-user.ts

@@ -12,8 +12,8 @@ class CreateUser extends LitElement {
     :host {
       --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);
+      margin: var(--spacing-large) 0;
+      padding: var(--spacing-large);
       border-radius: var(--border-radius);
       box-shadow: var(--box-shadow);
 

package/client/components/domain-switch.ts

@@ -27,12 +27,12 @@ export class DomainSwitch extends connect(store)(LitElement) {
         flex: 1;
         display: flex;
         flex-direction: row;
-        padding: var(--padding-narrow);
+        padding: var(--spacing-small);
       }
 
       md-icon {
         background-color: var(--md-sys-color-primary, rgb(46 121 190));
-        margin-right: var(--margin-narrow);
+        margin-right: var(--spacing-small);
         padding: 2px;
         border-radius: 50%;
         font-size: var(--fontsize-large);
@@ -84,7 +84,7 @@ export class DomainSwitch extends connect(store)(LitElement) {
         border: var(--border-dim-color);
       }
       :host([rounded-corner]) div {
-        padding: var(--padding-narrow) var(--padding-default);
+        padding: var(--spacing-small) var(--spacing-medium);
       }
     `
   ]

package/client/components/my-login-history.ts

@@ -15,7 +15,7 @@ class MyLoginHistory extends LitElement {
       display: flex;
       flex-direction: column;
       background-color: var(--md-sys-color-background);
-      padding: var(--padding-wide);
+      padding: var(--spacing-large);
       overflow: auto;
     }
     ox-grist {

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

@@ -16,7 +16,7 @@ class OwnershipTransferPopup extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
         background-color: var(--md-sys-color-background);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
         overflow: auto;
       }
       .container {
@@ -37,7 +37,7 @@ class OwnershipTransferPopup extends localize(i18next)(LitElement) {
         display: flex;
       }
       .input-container md-elevated-button {
-        margin: auto 0px auto var(--padding-wide);
+        margin: auto 0px auto var(--spacing-large);
       }
     `
   ]

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

@@ -32,7 +32,7 @@ export class PartnerInfoCard extends LitElement {
         overflow: auto;
         flex: 1;
         background-color: var(--md-sys-color-surface-variant);
-        padding: var(--padding-default);
+        padding: var(--spacing-medium);
         border-radius: var(--border-radius);
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -43,7 +43,7 @@ export class PartnerInfoCard extends LitElement {
       [field] {
         display: flex;
         flex-direction: column;
-        padding-bottom: var(--padding-default);
+        padding-bottom: var(--spacing-medium);
       }
       label {
         display: flex;

package/client/components/partner-role-editor.ts

@@ -22,13 +22,13 @@ class PartnerRoleEditor extends localize(i18next)(LitElement) {
         flex-direction: column;
 
         border: 1px solid var(--md-sys-color-primary);
-        padding: var(--padding-default);
+        padding: var(--spacing-medium);
         font: normal 15px var(--theme-font);
         color: var(--md-sys-color-secondary);
       }
 
       md-elevated-button {
-        margin-right: var(--padding-narrow);
+        margin-right: var(--spacing-small);
       }
     `
   ]

package/client/components/profile-component.ts

@@ -39,7 +39,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
       }
 
       input {
-        margin: var(--margin-narrow) 0;
+        margin: var(--spacing-small) 0;
         border: 1px solid rgba(0, 0, 0, 0.2);
         padding: 9px;
         border-radius: var(--border-radius);
@@ -82,7 +82,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
       ox-i18n-selector {
         --i18n-selector-field-width: var(--auth-input-field-width);
         --i18n-selector-field-margin: var(--change-password-field-margin);
-        --i18n-selector-field-padding: var(--padding-default);
+        --i18n-selector-field-padding: var(--spacing-medium);
         --i18n-selector-field-border-radius: var(--border-radius);
         margin: var(--change-password-field-margin);
       }

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

@@ -17,7 +17,7 @@ class RoleEditForm extends localize(i18next)(LitElement) {
     [field] {
       display: flex;
       flex-direction: column;
-      padding-bottom: var(--padding-default);
+      padding-bottom: var(--spacing-medium);
     }
     input {
       border: var(--border-dim-color);

package/client/components/role-privilege-editor.ts

@@ -21,7 +21,7 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
         color: var(--md-sys-color-secondary);
       }
       div {
-        margin: var(--margin-default);
+        margin: var(--spacing-medium);
       }
       ul {
         flex: 1;
@@ -30,7 +30,7 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
         display: grid;
         grid-template-columns: 1fr 1fr;
         margin: 0;
-        padding: var(--padding-default);
+        padding: var(--spacing-medium);
         list-style: none;
         border: 1px dashed rgba(0, 0, 0, 0.1);
         border-width: 1px 0;
@@ -41,13 +41,13 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
       }
 
       li {
-        padding: var(--padding-narrow);
+        padding: var(--spacing-small);
       }
 
       #checkAll,
       [for='checkAll'] {
-        margin-bottom: var(--margin-default);
-        padding-bottom: var(--padding-narrow);
+        margin-bottom: var(--spacing-medium);
+        padding-bottom: var(--spacing-small);
         font-weight: bold;
       }
 

package/client/components/role-selector.ts

@@ -12,7 +12,7 @@ export class RoleSelector extends LitElement {
         color: var(--subtitle-text-color);
       }
       div {
-        margin: 0 var(--margin-default) var(--margin-default) var(--margin-default);
+        margin: 0 var(--spacing-medium) var(--spacing-medium) var(--spacing-medium);
       }
       ul {
         flex: 1;
@@ -21,7 +21,7 @@ export class RoleSelector extends LitElement {
         column-gap: 20px;
         overflow: auto;
         margin: 0;
-        padding: var(--padding-default);
+        padding: var(--spacing-medium);
         list-style: none;
         border: 1px dashed rgba(0, 0, 0, 0.1);
         border-width: 1px 0;
@@ -30,18 +30,18 @@ export class RoleSelector extends LitElement {
         display: inline;
       }
       label {
-        padding-left: var(--padding-narrow);
+        padding-left: var(--spacing-small);
         text-transform: capitalize;
         font: var(--label-font);
         color: var(--label-color, var(--md-sys-color-on-surface));
       }
       li {
-        padding: var(--padding-narrow);
+        padding: var(--spacing-small);
       }
       #checkAll,
       [for='checkAll'] {
-        margin-bottom: var(--margin-default);
-        padding-bottom: var(--padding-narrow);
+        margin-bottom: var(--spacing-medium);
+        padding-bottom: var(--spacing-small);
         font-weight: bold;
       }
     `

package/client/components/user-role-editor.ts

@@ -39,7 +39,7 @@ class UserRoleEditor extends connect(store)(LitElement) {
 
         overflow: auto;
         margin: 0;
-        padding: var(--padding-default);
+        padding: var(--spacing-medium);
         list-style: none;
         border: 1px dashed rgba(0, 0, 0, 0.1);
         border-width: 1px 0;
@@ -51,7 +51,7 @@ class UserRoleEditor extends connect(store)(LitElement) {
         font: var(--input-font);
       }
       li {
-        padding: var(--padding-narrow);
+        padding: var(--spacing-small);
       }
       [detail] {
         background-color: var(--md-sys-color-surface);

package/client/entries/auth/checkin.ts

@@ -37,7 +37,7 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
       }
 
       .domains {
-        margin: var(--margin-wide) 0;
+        margin: var(--spacing-large) 0;
         padding: 0;
         background-color: var(--md-sys-color-surface);
         color: var(--md-sys-color-on-surface);
@@ -48,7 +48,7 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
       li {
         border-bottom: var(--border-dim-color);
         margin-bottom: -1px;
-        padding: var(--padding-default) var(--padding-wide);
+        padding: var(--spacing-medium) var(--spacing-large);
         font-size: 18px;
         text-align: left;
 
@@ -71,13 +71,13 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
         text-align: center;
       }
       .button-container md-elevated-button {
-        margin-left: var(--margin-narrow);
+        margin-left: var(--spacing-small);
       }
 
       @media (max-width: 450px) {
         .button-container md-elevated-button {
           width: 100%;
-          margin: var(--margin-default) 0 0 0;
+          margin: var(--spacing-medium) 0 0 0;
         }
       }
     `,

package/client/entries/auth/result.ts

@@ -78,7 +78,7 @@ export class AuthResult extends localize(i18next)(LitElement) {
       }
 
       md-elevated-button {
-        --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/oauth2/oauth2-decision-page.ts

@@ -20,8 +20,8 @@ class OAuth2DecisionPage extends LitElement {
         flex-direction: column;
 
         border: 1px solid var(--md-sys-color-primary);
-        margin: var(--margin-default);
-        padding: var(--padding-default);
+        margin: var(--spacing-medium);
+        padding: var(--spacing-medium);
         font: normal 15px var(--theme-font);
         color: var(--md-sys-color-secondary);
       }
@@ -38,7 +38,7 @@ class OAuth2DecisionPage extends LitElement {
       [field] {
         display: flex;
         flex-direction: column;
-        padding-bottom: var(--padding-default);
+        padding-bottom: var(--spacing-medium);
       }
 
       input {
@@ -59,7 +59,7 @@ class OAuth2DecisionPage extends LitElement {
       }
 
       md-elevated-button {
-        margin-right: var(--padding-narrow);
+        margin-right: var(--spacing-small);
       }
     `
   ]

package/client/entries/public/home.ts

@@ -93,7 +93,7 @@ export class HomePage extends localize(i18next)(LitElement) {
       [ticket] [content] {
         border-radius: 12px;
         background-color: var(--md-sys-color-tertiary-container);
-        padding: var(--padding-default) var(--padding-wide);
+        padding: var(--spacing-medium) var(--spacing-large);
         box-shadow: var(--box-shadow);
       }
 
@@ -105,7 +105,7 @@ export class HomePage extends localize(i18next)(LitElement) {
 
       legend {
         margin: 0;
-        padding: var(--padding-narrow) 0 var(--padding-default) 0;
+        padding: var(--spacing-small) 0 var(--spacing-medium) 0;
         font-weight: bold;
         color: var(--legend-color);
         text-transform: uppercase;
@@ -114,7 +114,7 @@ export class HomePage extends localize(i18next)(LitElement) {
       input {
         border: var(--md-sys-color-outline);
         border-radius: var(--border-radius);
-        padding: var(--padding-default);
+        padding: var(--spacing-medium);
         font: var(--input-font);
       }
 
@@ -165,7 +165,7 @@ export class HomePage extends localize(i18next)(LitElement) {
         }
         input[type='text'] {
           width: calc(100% - 20px);
-          margin: var(--margin-narrow) 0 var(--margin-default) 0;
+          margin: var(--spacing-small) 0 var(--spacing-medium) 0;
           text-align: center;
         }
         fieldset md-text-button {

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

@@ -23,7 +23,7 @@ class AppBinding extends connect(store)(PageView) {
         position: relative;
 
         background-color: var(--md-sys-color-background);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
       }
 
       h2 {
@@ -53,8 +53,8 @@ class AppBinding extends connect(store)(PageView) {
 
       [fieldset-container] {
         background-color: var(--md-sys-color-surface);
-        margin: var(--margin-wide) 0 var(--margin-default) 0;
-        padding: var(--padding-default);
+        margin: var(--spacing-large) 0 var(--spacing-medium) 0;
+        padding: var(--spacing-medium);
         border-radius: var(--border-radius);
         box-shadow: var(--box-shadow);
 
@@ -126,7 +126,7 @@ class AppBinding extends connect(store)(PageView) {
         font: var(--button-font);
         text-transform: var(--button-text-transform);
 
-        margin: var(--margin-default) 0 var(--margin-default) var(--margin-default);
+        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
         float: right;
         text-decoration: none;
       }

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

@@ -15,7 +15,7 @@ class AppBindings extends connect(store)(PageView) {
     css`
       :host {
         background-color: var(--md-sys-color-background);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
 
         overflow: auto;
       }
@@ -26,7 +26,7 @@ class AppBindings extends connect(store)(PageView) {
 
       md-outlined-button {
         float: right;
-        margin-top: var(--margin-default);
+        margin-top: var(--spacing-medium);
         text-transform: capitalize;
       }
 
@@ -44,7 +44,7 @@ class AppBindings extends connect(store)(PageView) {
 
       table {
         width: 100%;
-        margin: var(--margin-wide) 0;
+        margin: var(--spacing-large) 0;
         border-collapse: collapse;
       }
 

package/client/pages/appliance/appliance.ts

@@ -23,7 +23,7 @@ class Appliance extends connect(store)(PageView) {
         position: relative;
 
         background-color: var(--md-sys-color-background);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
       }
 
       h2 {
@@ -70,8 +70,8 @@ class Appliance extends connect(store)(PageView) {
 
       [fieldset-container] {
         background-color: var(--md-sys-color-surface);
-        margin: var(--margin-wide) 0 var(--margin-default) 0;
-        padding: var(--padding-default);
+        margin: var(--spacing-large) 0 var(--spacing-medium) 0;
+        padding: var(--spacing-medium);
         border-radius: var(--border-radius);
         box-shadow: var(--box-shadow);
 
@@ -154,7 +154,7 @@ class Appliance extends connect(store)(PageView) {
         font: var(--button-font);
         text-transform: var(--button-text-transform);
 
-        margin: var(--margin-default) 0 var(--margin-default) var(--margin-default);
+        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
         float: right;
         text-decoration: none;
       }

package/client/pages/appliance/home.ts

@@ -15,7 +15,7 @@ class Appliances extends connect(store)(PageView) {
     css`
       :host {
         background-color: var(--md-sys-color-background);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
 
         overflow: auto;
       }
@@ -26,7 +26,7 @@ class Appliances extends connect(store)(PageView) {
 
       md-outlined-button {
         float: right;
-        margin-top: var(--margin-default);
+        margin-top: var(--spacing-medium);
         text-transform: capitalize;
       }
 
@@ -44,7 +44,7 @@ class Appliances extends connect(store)(PageView) {
 
       table {
         width: 100%;
-        margin: var(--margin-wide) 0;
+        margin: var(--spacing-large) 0;
         border-collapse: collapse;
       }
 
@@ -96,7 +96,7 @@ class Appliances extends connect(store)(PageView) {
 
       @media screen and (max-width: 480px) {
         :host {
-          padding: var(--padding-default);
+          padding: var(--spacing-medium);
         }
       }
     `

package/client/pages/appliance/register.ts

@@ -13,7 +13,7 @@ class ApplianceRegister extends connect(store)(PageView) {
       css`
         :host {
           background-color: var(--md-sys-color-background);
-          padding: var(--padding-wide);
+          padding: var(--spacing-large);
 
           display: flex;
           flex-direction: column;
@@ -35,7 +35,7 @@ class ApplianceRegister extends connect(store)(PageView) {
 
         [form-container] {
           background-color: var(--md-sys-color-surface);
-          padding: var(--padding-wide);
+          padding: var(--spacing-large);
           border-radius: var(--border-radius);
           box-shadow: var(--box-shadow);
           min-width: 60%;

package/client/pages/application/application.ts

@@ -22,7 +22,7 @@ class Application extends connect(store)(PageView) {
         position: relative;
 
         background-color: var(--md-sys-color-background);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
       }
 
       h2 {
@@ -69,8 +69,8 @@ class Application extends connect(store)(PageView) {
 
       [fieldset-container] {
         background-color: var(--md-sys-color-surface);
-        margin: var(--margin-wide) 0 var(--margin-default) 0;
-        padding: var(--padding-default);
+        margin: var(--spacing-large) 0 var(--spacing-medium) 0;
+        padding: var(--spacing-medium);
         border-radius: var(--border-radius);
         box-shadow: var(--box-shadow);
 
@@ -153,7 +153,7 @@ class Application extends connect(store)(PageView) {
         font: var(--button-font);
         text-transform: var(--button-text-transform);
 
-        margin: var(--margin-default) 0 var(--margin-default) var(--margin-default);
+        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
         float: right;
         text-decoration: none;
       }

package/client/pages/application/applications.ts

@@ -15,7 +15,7 @@ class Applications extends connect(store)(PageView) {
     css`
       :host {
         background-color: var(--md-sys-color-background);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
 
         overflow: auto;
       }
@@ -26,7 +26,7 @@ class Applications extends connect(store)(PageView) {
 
       md-outlined-button {
         float: right;
-        margin-top: var(--margin-default);
+        margin-top: var(--spacing-medium);
         text-transform: capitalize;
       }
 
@@ -43,7 +43,7 @@ class Applications extends connect(store)(PageView) {
       }
 
       table {
-        margin: var(--margin-wide) 0;
+        margin: var(--spacing-large) 0;
         width: 100%;
         border-collapse: collapse;
       }

package/client/pages/application/register.ts

@@ -12,7 +12,7 @@ class ApplicationRegister extends connect(store)(PageView) {
     css`
       :host {
         background-color: var(--md-sys-color-background);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
 
         position: relative;
 
@@ -42,7 +42,7 @@ class ApplicationRegister extends connect(store)(PageView) {
 
       img[pagedeco] {
         width: 150px;
-        margin: 0 var(--margin-wide);
+        margin: 0 var(--spacing-large);
         float: left;
         position: relative;
         top: -20px;
@@ -50,7 +50,7 @@ class ApplicationRegister extends connect(store)(PageView) {
 
       [form-container] {
         background-color: var(--md-sys-color-surface);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
         border-radius: var(--border-radius);
         box-shadow: var(--box-shadow);
         max-width: var(--input-container-max-width);

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

@@ -20,7 +20,7 @@ class PartnerManagement extends connect(store)(PageView) {
         display: flex;
         flex-direction: column;
         background-color: var(--md-sys-color-background);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
 
         overflow: auto;
       }

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

@@ -20,7 +20,7 @@ class RoleManagement extends connect(store)(PageView) {
         display: flex;
         flex-direction: column;
         background-color: var(--md-sys-color-background);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
         overflow: auto;
       }
 
@@ -37,7 +37,7 @@ class RoleManagement extends connect(store)(PageView) {
       #roles-privileges {
         flex: 1;
         display: flex;
-        margin-top: var(--margin-default);
+        margin-top: var(--spacing-medium);
         max-width: var(--content-container-max-width);
         flex-direction: row;
         overflow: auto;