@operato/input 2.0.0-alpha.99 → 2.0.0-beta.1

package/src/ox-input-duration.ts

@@ -15,6 +15,8 @@ export class OxInputDuration extends OxFormField {
     :host {
       text-align: center;
       padding: 10px;
+      --md-filled-icon-button-container-height: var(--form-element-height-medium);
+      --md-filled-icon-button-container-shape: var(--md-sys-shape-corner-small);
     }
 
     :host * {
@@ -37,19 +39,20 @@ export class OxInputDuration extends OxFormField {
     }
 
     input {
-      border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
-      padding-right: 0;
+      box-sizing: border-box;
+      padding: 0 var(--spacing-small);
+      height: var(--form-element-height-medium);
+      border: 1px solid var(--md-sys-color-outline);
+      border-radius: var(--md-sys-shape-corner-small);
       max-width: 70px;
-      font: var(--input-font);
-      color: var(--primary-text-color);
+      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+      color: var(--md-sys-color-on-primary-container);
       text-align: right;
     }
 
     input:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-color: var(--md-sys-color-secondary-fixed-dim);
     }
 
     input:invalid {
@@ -59,31 +62,9 @@ export class OxInputDuration extends OxFormField {
 
     label {
       width: 100%;
-      margin-right: var(--margin-default);
-      font: normal 0.8em var(--theme-font);
-      color: var(--primary-color);
-    }
-
-    button {
-      border: var(--button-border);
-      border-radius: var(--border-radius);
-      background-color: var(--button-background-color);
-      min-height: 35px;
-      line-height: 0.8;
-      color: var(--button-color);
-      cursor: pointer;
-    }
-
-    button + button {
-      margin-left: -5px;
-    }
-
-    button:focus,
-    button:hover,
-    button:active {
-      border: var(--button-activ-border);
-      background-color: var(--button-background-focus-color);
-      color: var(--theme-white-color);
+      margin-right: var(--spacing-medium);
+      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+      color: var(--md-sys-color-on-primary-container);
     }
   `
 
@@ -132,7 +113,7 @@ export class OxInputDuration extends OxFormField {
         />
         <label for="second">${i18next.t('label.seconds')}</label>
 
-        <button
+        <md-filled-icon-button
           type="button"
           @click=${(e: Event) => {
             e.preventDefault()
@@ -151,7 +132,7 @@ export class OxInputDuration extends OxFormField {
           ?disabled=${this.disabled}
         >
           <md-icon>backspace</md-icon>
-        </button>
+        </md-filled-icon-button>
         <div padding></div>
       </form>
     `

package/src/ox-input-file.ts

@@ -20,26 +20,30 @@ export class OxInputFile extends OxFormField {
       :host {
         display: flex;
         flex-direction: column;
-        border-radius: var(--border-radius);
+        border-radius: var(--md-sys-shape-corner-small);
         align-items: center;
         justify-content: center;
         padding: var(--padding-default, 9px);
         min-height: 100px;
         text-transform: capitalize;
 
-        border: var(--file-uploader-border);
-        background-color: var(--main-section-background-color);
-        font: var(--file-uploader-font) !important;
-        color: var(--file-uploader-color);
+        border: 1px dashed var(--md-sys-color-outline-variant);
+        background-color: var(--md-sys-color-surface);
+        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+      }
+      :host > span {
+        color: var(--md-sys-color-primary);
+        font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));
       }
 
       :host > md-icon {
-        color: var(--file-uploader-icon-color);
+        color: var(--md-sys-color-primary);
         --md-icon-size: var(--file-uploader-icon-size, 36px);
       }
 
       :host(.candrop) {
-        background-color: var(--file-uploader-candrop-background-color);
+        background-color: var(--md-sys-color-primary-fixed);
+        border: 1px dashed var(--md-sys-color-primary-fixed-dim);
       }
 
       #input-file {
@@ -54,9 +58,8 @@ export class OxInputFile extends OxFormField {
 
         padding: var(--file-uploader-label-padding);
         border-radius: var(--file-uploader-label-border-radius);
-        background-color: var(--file-uploader-label-background-color);
-        color: var(--file-uploader-label-color);
-        font: var(--file-uploader-label-font) !important;
+        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+        color: var(--md-sys-color-on-surface-variant);
       }
 
       ul {
@@ -67,24 +70,25 @@ export class OxInputFile extends OxFormField {
         padding: 0;
         max-height: 46px;
         overflow: auto;
-        background-color: rgba(var(--primary-color-rgb), 0.1);
+        background-color: var(--md-sys-color-on-primary);
       }
       li {
         text-align: left;
 
         padding: 3px 5px 2px 5px;
         border-bottom: var(--file-uploader-li-border-bottom);
-        font: normal 14px var(--theme-font);
+        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+        color: var(--md-sys-color-on-primary-container);
       }
       li md-icon {
         float: right;
         cursor: pointer;
         margin: var(--file-uploader-li-icon-margin);
-        font-size: 1em;
+        font-size: var(--icon-size-small);
       }
       li md-icon:hover,
       li md-icon:active {
-        color: var(--file-uploader-li-icon-focus-color);
+        color: var(--md-sys-color-error);
       }
     `
   ]

package/src/ox-input-hashtags.ts

@@ -18,8 +18,8 @@ export class OxInputHashtags extends OxFormField {
       display: block;
       box-sizing: border-box;
       --hashtag-padding: 2px 4px;
-      --hashtag-background: rgba(var(--primary-color-rgb), 0.15);
-      --hashtag-background-hover: rgba(var(--primary-color-rgb), 1);
+      --hashtag-background: var(--md-sys-color-container);
+      --hashtag-background-hover: var(--md-sys-color-on-container);
       --hashtag-closer-padding: 0 2px 0 4px;
       --hashtag-input-padding: 2px;
     }
@@ -33,29 +33,29 @@ export class OxInputHashtags extends OxFormField {
       background-color: var(--hashtag-background);
       padding: var(--hashtag-padding);
       font: var(--input-font);
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
       cursor: pointer;
     }
 
     .tag:hover {
       background-color: var(--hashtag-background-hover);
-      color: var(--theme-white-color) !important;
+      color: var(--md-sys-color-primary-container) !important;
     }
 
     .closer {
       opacity: 0.3;
       padding: var(--hashtag-closer-padding);
       text-transform: uppercase;
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
     }
     .tag:hover .closer {
       opacity: 0.9;
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-primary-container);
     }
 
     .input {
       display: inline-block;
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
     }
 
     .input::before {
@@ -73,14 +73,14 @@ export class OxInputHashtags extends OxFormField {
       -webkit-text-size-adjust: none;
       padding: var(--hashtag-input-padding);
       border: 0;
-      border-bottom: var(--border-dark-color);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
       outline: none;
       font-weight: bold;
     }
 
     input:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
     }
 
     .error {
@@ -104,13 +104,11 @@ export class OxInputHashtags extends OxFormField {
           ${repeat(
             this.value,
             tag => tag,
-            (tag, index) =>
-              html`
-                <span class="tag"
-                  >#${tag}
-                  <span @click=${() => !this.disabled && this.removeHashtag(index)} class="closer">x</span></span
-                >
-              `
+            (tag, index) => html`
+              <span class="tag"
+                >#${tag} <span @click=${() => !this.disabled && this.removeHashtag(index)} class="closer">x</span></span
+              >
+            `
           )}
         </div>
 

package/src/ox-input-i18n-label.ts

@@ -53,16 +53,16 @@ export class OxInputI18nLabels extends OxFormField {
     input {
       flex: 1;
       border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      padding: var(--spacing-tiny);
       font: var(--input-font);
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
       min-width: 100px;
     }
 
     input:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
     }
 
     input[type='hidden'] {

package/src/ox-input-image.ts

@@ -32,7 +32,7 @@ export class OxInputImage extends OxFormField {
         text-transform: capitalize;
 
         border: var(--file-uploader-border);
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         font: var(--file-uploader-font) !important;
         color: var(--file-uploader-color);
 
@@ -55,7 +55,7 @@ export class OxInputImage extends OxFormField {
         width: 100%;
         height: 100%;
         opacity: 0%;
-        background-color: white;
+        background-color: var(--md-sys-color-surface);
 
         display: flex;
         place-content: center;

package/src/ox-input-key-values.ts

@@ -36,7 +36,7 @@ export class OxInputKeyValues extends OxFormField {
     div {
       display: flex;
       flex-flow: row nowrap;
-      gap: var(--margin-default);
+      gap: var(--spacing-medium);
       margin-bottom: var(--margin-narrow);
     }
 
@@ -57,21 +57,21 @@ export class OxInputKeyValues extends OxFormField {
     button:active {
       border: var(--button-activ-border);
       background-color: var(--button-background-focus-color);
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-primary-container);
     }
 
     input {
       flex: 1;
       border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      padding: var(--spacing-tiny);
       font: var(--input-font);
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
       min-width: 50px;
     }
     input:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
     }
     button.hidden {
       opacity: 0;

package/src/ox-input-mass-fraction.ts

@@ -87,7 +87,7 @@ export class OxInputMassFraction extends OxFormField {
         &:active {
           border: var(--button-active-border, 1px solid rgba(0, 0, 0, 0.2));
           background-color: var(--button-background-focus-color);
-          color: var(--theme-white-color);
+          color: var(--md-sys-color-primary-container);
         }
       }
 
@@ -95,19 +95,20 @@ export class OxInputMassFraction extends OxFormField {
       label,
       ox-select {
         border: 0;
-        border-bottom: var(--border-dark-color);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
         font: var(--input-font);
-        color: var(--primary-text-color);
+        color: var(--md-sys-color-on-primary-container);
         min-width: 50px;
       }
 
       input,
       label {
-        padding: var(--input-padding);
+        padding: var(--spacing-tiny);
       }
 
       label {
         text-align: center;
+        text-wrap: nowrap;
       }
 
       ox-select {
@@ -124,7 +125,7 @@ export class OxInputMassFraction extends OxFormField {
 
       input:focus {
         outline: none;
-        border-bottom: 1px solid var(--primary-color);
+        border-bottom: 1px solid var(--md-sys-color-on-primary-container);
       }
 
       button.hidden {

package/src/ox-input-multiple-colors.ts

@@ -35,7 +35,7 @@ export class OxInputMultipleColors extends OxFormField {
     #colors-container > div {
       display: grid;
       grid-template-columns: 34px 1fr 34px;
-      grid-gap: var(--margin-default);
+      grid-gap: var(--spacing-medium);
       align-items: center;
       justify-content: left;
       margin-bottom: var(--margin-narrow);
@@ -60,7 +60,7 @@ export class OxInputMultipleColors extends OxFormField {
     button:active {
       border: var(--button-activ-border);
       background-color: var(--button-background-focus-color);
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-primary-container);
     }
   `
 

package/src/ox-input-options.ts

@@ -26,7 +26,7 @@ export class OxInputOptions extends OxFormField {
     div {
       display: flex;
       flex-flow: row nowrap;
-      gap: var(--margin-default);
+      gap: var(--spacing-medium);
       margin-bottom: var(--margin-narrow);
     }
 
@@ -46,21 +46,21 @@ export class OxInputOptions extends OxFormField {
     button:active {
       border: var(--button-activ-border);
       background-color: var(--button-background-focus-color);
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-primary-container);
     }
 
     input {
       flex: 1;
       min-width: 80px;
       border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      padding: var(--spacing-tiny);
       font: var(--input-font);
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
     }
     input:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
     }
     button.hidden {
       opacity: 0;

package/src/ox-input-partition-keys.ts

@@ -36,7 +36,7 @@ export class OxInputPartitionKeys extends OxFormField {
     div {
       display: flex;
       flex-flow: row nowrap;
-      gap: var(--margin-default);
+      gap: var(--spacing-medium);
       margin-bottom: var(--margin-narrow);
     }
 
@@ -58,20 +58,20 @@ export class OxInputPartitionKeys extends OxFormField {
     button:active {
       border: var(--button-activ-border);
       background-color: var(--button-background-focus-color);
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-primary-container);
     }
 
     input {
       flex: 1;
       border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      padding: var(--spacing-tiny);
       font: var(--input-font);
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
     }
     input:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
     }
     button.hidden {
       opacity: 0;

package/src/ox-input-privilege.ts

@@ -33,17 +33,17 @@ export class OxInputPrivilege extends OxFormField {
 
     select {
       border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      padding: var(--spacing-tiny);
       font: var(--input-font);
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
 
       max-height: 35px;
     }
 
     select:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
     }
 
     div[values] {
@@ -65,24 +65,24 @@ export class OxInputPrivilege extends OxFormField {
 
     input {
       border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      padding: var(--spacing-tiny);
       padding-right: 0;
       max-width: 70px;
       font: var(--input-font);
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
       text-align: right;
     }
 
     input:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
     }
 
     label {
-      margin-right: var(--margin-default);
+      margin-right: var(--spacing-medium);
       font: normal 0.8em var(--theme-font);
-      color: var(--primary-color);
+      color: var(--md-sys-color-on-primary-container);
     }
   `
 
@@ -105,8 +105,7 @@ export class OxInputPrivilege extends OxFormField {
       <form @change=${this.onChange.bind(this)}>
         <div values>
           <label for="privilege" col1>${i18next.t('label.privilege')}</label>
-          <select id="privilege" name="privilege" value=${ifDefined(privilege)}
-                      ?disabled=${this.disabled}>
+          <select id="privilege" name="privilege" value=${ifDefined(privilege)} ?disabled=${this.disabled}>
             <option value="">&nbsp;</option>
             ${privileges.map(
               p =>
@@ -120,12 +119,10 @@ export class OxInputPrivilege extends OxFormField {
           </select>
 
           <label for="owner" col1>${i18next.t('label.domain-owner')}</label>
-          <input id="owner" type="checkbox" name="owner" ?checked=${owner} col2 
-                      ?disabled=${this.disabled}></input>
+          <input id="owner" type="checkbox" name="owner" ?checked=${owner} col2 ?disabled=${this.disabled} />
 
           <label for="super" col1>${i18next.t('label.superuser')}</label>
-          <input id="super" type="checkbox" name="super" ?checked=${superUser} col2
-                      ?disabled=${this.disabled}></input>
+          <input id="super" type="checkbox" name="super" ?checked=${superUser} col2 ?disabled=${this.disabled} />
         </div>
       </form>
     `

package/src/ox-input-quantifier.ts

@@ -12,7 +12,7 @@ export class OxInputQuantifier extends OxFormField {
   static styles = css`
     :host {
       display: flex;
-      gap: var(--margin-default);
+      gap: var(--spacing-medium);
       align-items: center;
 
       width: 100%;
@@ -22,14 +22,14 @@ export class OxInputQuantifier extends OxFormField {
     input[type='number'] {
       width: 48px;
       border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      padding: var(--spacing-tiny);
       font: var(--input-font);
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
     }
     input[type='number']:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
     }
 
     input:focus {

package/src/ox-input-range.ts

@@ -12,7 +12,7 @@ class OxInputRange extends OxFormField {
   static styles = css`
     :host {
       display: flex;
-      gap: var(--margin-default);
+      gap: var(--spacing-medium);
       align-items: center;
 
       width: 100%;
@@ -22,14 +22,14 @@ class OxInputRange extends OxFormField {
     input[type='number'] {
       width: 48px;
       border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      padding: var(--spacing-tiny);
       font: var(--input-font);
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
     }
     input[type='number']:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
     }
 
     input[type='range'] {
@@ -54,7 +54,7 @@ class OxInputRange extends OxFormField {
       height: 16px;
       width: 16px;
       border-radius: 50%;
-      background: var(--primary-color);
+      background: var(--md-sys-color-on-primary-container);
       margin-top: -6px;
       box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);
     }
@@ -74,7 +74,7 @@ class OxInputRange extends OxFormField {
       height: 16px;
       width: 16px;
       border-radius: 50%;
-      background: var(--primary-color);
+      background: var(--md-sys-color-on-primary-container);
       margin-top: -6px;
       box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);
     }
@@ -96,7 +96,7 @@ class OxInputRange extends OxFormField {
       height: 16px;
       width: 16px;
       border-radius: 50%;
-      background: var(--primary-color);
+      background: var(--md-sys-color-on-primary-container);
       margin-top: -6px;
       box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);
     }

package/src/ox-input-search.ts

@@ -19,29 +19,28 @@ export class OxInputSearch extends OxFormField {
         position: relative;
         align-items: center;
 
+        color: var(--ox-input-search-color, var(--md-sys-color-on-surface-variant));
+        background-color: var(--ox-input-search-background-color, var(--md-sys-color-surface-variant));
+
         --md-icon-size: 20px;
       }
 
       [type='text'] {
         flex: 1;
+        color: inherit;
         background-color: transparent;
         border: 0;
-        border-bottom: var(--input-search-border-bottom, var(--border-dark-color));
-        padding: var(--input-search-padding, var(--input-padding));
+        padding: var(--input-search-padding, var(--spacing-tiny));
         padding-left: 25px;
-        font: var(--input-search-font, var(--input-font));
-        color: var(--primary-text-color);
         overflow: hidden;
       }
 
       [type='text']:focus {
         outline: none;
-        border-bottom: var(--input-search-focus-border-bottom, 1px solid var(--primary-color));
       }
 
       md-icon {
         position: absolute;
-        color: var(--secondary-color);
       }
     `
   ]