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

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,15 +95,15 @@ 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 {
@@ -124,7 +124,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);
       }
     `
   ]

package/src/ox-input-select-buttons.ts

@@ -2,10 +2,14 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
+import '@material/web/chips/filter-chip.js'
+import '@material/web/chips/chip-set.js'
+
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { OxFormField } from './ox-form-field'
+import { MdFilterChip } from '@material/web/chips/filter-chip.js'
 
 type Option = { display: string; value: string }
 
@@ -16,18 +20,7 @@ export class OxInputSelectButtons extends OxFormField {
       display: flex;
       flex-flow: row;
       flex-wrap: wrap;
-      gap: var(--margin-default);
-    }
-
-    span {
-      border-radius: 9999px;
-      background-color: rgba(255, 255, 255, 0.7);
-      padding: 2px 10px;
-    }
-
-    span[selected] {
-      background-color: var(--focus-background-color, #38a25b);
-      color: var(--focus-color, #efefef);
+      gap: var(--spacing-medium);
     }
   `
 
@@ -40,23 +33,25 @@ export class OxInputSelectButtons extends OxFormField {
     const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []
 
     return html`
-      ${(options || []).map(
-        ({ display, value }) => html`
-          <span
-            data-value=${value}
-            ?selected=${values.includes(value)}
-            @click=${(e: MouseEvent) => !this.disabled && this.onClick(e)}
-            >${display}</span
-          >
-        `
-      )}
+      <md-chip-set>
+        ${(options || []).map(
+          ({ display, value }) => html`
+            <md-filter-chip
+              data-value=${value}
+              label=${display}
+              ?selected=${values.includes(value)}
+              @click=${(e: MouseEvent) => !this.disabled && this.onClick(e)}
+            ></md-filter-chip>
+          `
+        )}
+      </md-chip-set>
     `
   }
 
   onClick(e: MouseEvent) {
     e.stopPropagation()
 
-    const target = e.target as HTMLSpanElement
+    const target = e.target as MdFilterChip
     const value = target.getAttribute('data-value') as string
 
     if (this.multiple) {
@@ -70,7 +65,7 @@ export class OxInputSelectButtons extends OxFormField {
       }
       this.value = [...values]
     } else {
-      this.value = value
+      this.value = this.value === value ? undefined : value
     }
 
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))

package/src/ox-input-table.ts

@@ -42,7 +42,7 @@ class OxInputTable extends OxFormField {
         fieldset {
           border: none;
           border-bottom: 1px solid #cfd8dc;
-          color: var(--primary-text-color);
+          color: var(--md-sys-color-on-primary-container);
           font-size: 12px;
           padding: 0 0 10px 0;
           margin: 0 0 10px 0;