@operato/data-grist 2.0.0-alpha.146 → 2.0.0-alpha.148

package/src/data-card/data-card-gutter-menu.ts

@@ -16,22 +16,22 @@ class DataCardGutterMenu extends LitElement {
     }
 
     ::slotted(ox-popup) {
-      padding: 4px;
+      padding: var(--spacing-small);
     }
 
     md-icon {
       flex: 1;
-      margin: 0;
-      margin-bottom: 1px;
+      margin: var(--spacing-none);
       border: var(--data-card-item-btn-border);
       border-radius: var(--data-card-item-btn-border-radius);
       padding: var(--data-card-item-btn-padding);
-      font-size: var(--grid-record-fontsize);
+      font-size: var(--md-sys-typescale-label-large-size);
     }
 
     md-icon:hover {
       cursor: pointer;
-      color: var(--grid-record-color-hover);
+      background-color:var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
     }
   `
 

package/src/data-card/data-card-gutter.ts

@@ -12,7 +12,7 @@ export class DataCardGutter extends LitElement {
     css`
       :host {
         background-color: transparent;
-
+        align-content: center;
         font-size: var(--grid-record-wide-fontsize);
         text-overflow: ellipsis;
         color: var(--grid-record-color);
@@ -20,22 +20,24 @@ export class DataCardGutter extends LitElement {
 
       * {
         flex: 1;
-        margin: 0;
-        margin-bottom: 1px;
+        margin: var(--spacing-tiny);
         border: var(--data-card-item-btn-border);
         border-radius: var(--data-card-item-btn-border-radius);
         padding: var(--data-card-item-btn-padding);
-        font-size: var(--grid-record-fontsize);
+        font-size: var(--md-sys-typescale-label-large-size);
+        
+
       }
 
       *:hover {
         cursor: pointer;
-        color: var(--grid-record-color-hover);
+        background-color:var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
       }
 
       *[center] {
         flex: none;
-        margin: 0 auto;
+        margin: var(--spacing-none) auto;
       }
     `
   ]

package/src/data-card/data-card.ts

@@ -13,16 +13,13 @@ export class DataCard extends DataManipulator {
   static styles = [
     css`
       :host {
-        background-color: var(--data-card-background-color);
         overflow-y: auto;
-        padding: var(--padding-wide);
+        padding: var(--spacing-medium);
 
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-
         grid-template-rows: min-content;
-
-        grid-gap: var(--margin-wide);
+        grid-gap: var(--spacing-large);
       }
 
       ox-record-card {
@@ -33,24 +30,25 @@ export class DataCard extends DataManipulator {
         border-radius: var(--data-card-record-card-border-radius);
       }
       ox-record-card:hover {
+        background-color: var(--md-sys-color-inverse-primary);
         border: var(--data-card-record-card-border-hover);
         box-shadow: var(--data-card-record-card-boxshadow-hover);
       }
 
       [selected-row] {
-        background-color: var(--data-card-record-card-selected-border);
+        background-color: var(--grid-record-selected-background-color);
       }
 
       #upward {
-        --md-icon-size: 26px;
+        --md-icon-size: var(--icon-size-large);
         position: absolute;
         top: var(--data-card-fab-position-vertical);
         right: var(--data-card-fab-position-horizontal);
         background-color: rgba(255, 255, 255, 0.7);
-        border-radius: 20px;
+        border-radius: var(--md-sys-shape-corner-large);
         color: var(--data-card-fab-color);
         box-shadow: var(--data-card-fab-shadow);
-        padding: 7px;
+        padding: var(--spacing-small);
       }
 
       slot {

package/src/data-card/record-card.ts

@@ -41,24 +41,24 @@ export class RecordCard extends LitElement {
       :host([dirty])::before {
         content: '';
         position: absolute;
-        left: 0;
-        top: 0;
+        left: var(--spacing-none);
+        top: var(--spacing-none);
 
-        width: 0px;
-        height: 0px;
+        width: var(--spacing-none);
+        height: var(--spacing-none);
         border-top: var(--grid-record-dirty-border-top);
         border-right: var(--grid-record-dirty-border-left);
       }
 
       [dirty] {
         position: absolute;
-        margin: 0;
+        margin: var(--spacing-none);
         height: 20px;
 
         font: var(--grid-record-dirty-icon-font);
         text-indent: 1px;
-        left: 0;
-        top: 0;
+        left: var(--spacing-none);
+        top: var(--spacing-none);
         color: var(--grid-record-dirty-color);
       }
 
@@ -67,13 +67,12 @@ export class RecordCard extends LitElement {
         height: var(--data-card-thumbnail-height);
         border-top-left-radius: var(--data-card-record-card-border-radius);
         border-top-right-radius: var(--data-card-record-card-border-radius);
-        border-bottom: var(--data-card-thumbnail-border-bottom);
         overflow: hidden;
       }
 
       [content] {
         display: grid;
-        gap: 2px 7px;
+        gap: var(--spacing-tiny) var(--spacing-medium);
         grid-template:
           'brief gutters'
           'detail detail';
@@ -84,7 +83,7 @@ export class RecordCard extends LitElement {
       [brief] {
         display: flex;
         flex-direction: column;
-        gap: 2px;
+        gap: var(--spacing-tiny);
         grid-area: brief;
         overflow: hidden;
       }

package/src/data-grid/data-grid-accum-field.ts

@@ -22,12 +22,14 @@ export class DataGridAccumField extends LitElement {
         position: relative;
 
         white-space: nowrap;
-        background-color: var(--grid-accum-record-background-color, #ccc);
-        border: 1px solid transparent;
+        background-color: var(--md-sys-color-inverse-primary);
+        border: var(--grid-record-border-bottom);
         border-width: 1px 0;
-        border-bottom: var(--grid-record-border-bottom);
+        padding:var(--spacing-small);
 
         font-size: var(--grid-record-wide-fontsize);
+        color:var(--md-sys-color-primary);
+        font-weight:var(--md-sys-typescale-label-large-weight);
         min-height: 19px;
       }
 

package/src/data-grid/data-grid-body-style.ts

@@ -27,7 +27,7 @@ export const dataGridBodyStyle = css`
     font-weight: bold;
     color: var(--grid-record-focused-color);
     background-image: var(--focused-background-image);
-    background-blend-mode: darken;
+    background-blend-mode: soft-light;
   }
 
   ox-grid-field[focused] {

package/src/data-grid/data-grid-body.ts

@@ -91,7 +91,7 @@ export class DataGridBody extends LitElement {
       }
 
       ox-grid-accum-field[fixed] {
-        background-color: var(--grid-accum-record-background-color, #ccc);
+        background-color: var(--md-sys-color-inverse-primary);
       }
     `
   ]
@@ -348,10 +348,11 @@ export class DataGridBody extends LitElement {
 
     this.addEventListener('focus-change', dataGridBodyFocusChangeHandler.bind(this))
 
-    const primaryColor = getComputedStyle(this).getPropertyValue('--primary-color')
+    const primaryColor = getComputedStyle(this).getPropertyValue('--md-sys-color-primary-fixed-dim')
+
     this.style.setProperty(
       '--focused-background-image',
-      `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect fill='${primaryColor}' x='0' y='0' width='100%' height='100%' style='opacity:.3'/></svg>")`
+      `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect fill='${primaryColor}' x='0' y='0' width='100%' height='100%'/></svg>")`
     )
 
     this.addEventListener('show-record-view', (e: Event) =>

package/src/data-grid/data-grid-footer.ts

@@ -14,7 +14,7 @@ export class DataGridFooter extends LitElement {
       :host {
         display: flex;
         flex-direction: row;
-        gap: 4px;
+        gap: var(--spacing-small);
         overflow: hidden;
 
         padding: var(--grid-footer-padding);
@@ -44,7 +44,7 @@ export class DataGridFooter extends LitElement {
       .limit {
         display: flex;
         flex-direction: row;
-        gap: 6px;
+        gap: var(--spacing-small);
         align-items: center;
       }
 

package/src/data-grid/data-grid-header.ts

@@ -35,7 +35,7 @@ export class DataGridHeader extends LitElement {
 
         white-space: nowrap;
         overflow: hidden;
-        background-color: var(--grist-background-color);
+        background-color: var(--grid-header-background-color);
         border-bottom: var(--grid-header-bottom-border);
         padding: var(--grid-header-padding);
 
@@ -45,7 +45,7 @@ export class DataGridHeader extends LitElement {
       }
 
       div[gutter] {
-        padding: var(--padding-default) 0 var(--padding-narrow) 0;
+        padding: var(--spacing-small) 0 ;
         text-align: center;
       }
 
@@ -111,8 +111,8 @@ export class DataGridHeader extends LitElement {
       }
 
       [filter] input[type='checkbox'] {
-        margin-left: 10px;
-        margin-bottom: 5px;
+        margin-left: var(--spacing-medium);
+        margin-bottom: var(--spacing-small);
       }
 
       [fixed] {

package/src/data-grid/data-grid.ts

@@ -5,6 +5,7 @@ import './data-grid-footer'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { ScrollbarStyles } from '@operato/styles'
 
@@ -19,6 +20,7 @@ import { DataGridHeader } from './data-grid-header'
 @customElement('ox-grid')
 export class DataGrid extends DataManipulator {
   static styles = [
+    MDTypeScaleStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -232,6 +234,7 @@ export class DataGrid extends DataManipulator {
       </div>
 
       <ox-grid-header
+        class="md-typescale-label-medium-prominent"
         .columns=${columns}
         .sorters=${this.sorters}
         .filters=${this.filters}
@@ -247,6 +250,7 @@ export class DataGrid extends DataManipulator {
       </ox-grid-header>
 
       <ox-grid-body
+        class="md-typescale-body-medium"
         .config=${this.config}
         .columns=${columns}
         .data=${data}
@@ -255,7 +259,15 @@ export class DataGrid extends DataManipulator {
       >
         ${this.empty ? html` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html``}
       </ox-grid-body>
-      ${paginatable ? html` <ox-grid-footer .data=${data} .pagination=${this.pagination}></ox-grid-footer> ` : html``}
+      ${paginatable
+        ? html`
+            <ox-grid-footer
+              class="md-typescale-body-medium"
+              .data=${data}
+              .pagination=${this.pagination}
+            ></ox-grid-footer>
+          `
+        : html``}
     `
   }
 

package/src/data-list/data-list-field.ts

@@ -17,20 +17,20 @@ export class DataListField extends LitElement {
         position: relative;
 
         white-space: normal;
-        padding: 1px 7px 1px 0;
+        padding: var(--spacing-tiny) var(--spacing-small);
 
         font: inherit;
       }
 
       :host > * {
         flex: 1;
-        margin: 0;
+        margin: var(--spacing-none);
         text-align: left;
       }
 
       :host > *[center] {
         flex: none;
-        margin: 0 auto;
+        margin: var(--spacing-none) auto;
       }
 
       :host([thumbnail]) {
@@ -43,8 +43,8 @@ export class DataListField extends LitElement {
         object-fit: contain;
         width: 100%;
         height: 100%;
-        padding: 0;
-        margin: 0;
+        padding: var(--spacing-none)
+        margin: var(--spacing-none)
       }
 
       label {

package/src/data-list/data-list-gutter.ts

@@ -23,7 +23,7 @@ export class DataListGutter extends LitElement {
         text-overflow: ellipsis;
         color: var(--grid-record-color);
 
-        padding-right: 10px;
+        padding-right: var(--spacing-medium);
       }
 
       :host-context(.expand)::after {
@@ -38,12 +38,12 @@ export class DataListGutter extends LitElement {
 
       * {
         flex: 1;
-        margin: 0;
+        margin: var(--spacing-none);
       }
 
       *[center] {
         flex: none;
-        margin: 0 auto;
+        margin: var(--spacing-none) auto;
       }
     `
   ]

package/src/data-list/data-list.ts

@@ -17,7 +17,7 @@ export class DataList extends DataManipulator {
       }
 
       ox-record-partial:nth-child(even) {
-        background-color: var(--theme-white-color);
+        background-color: var(--grid-record-odd-background-color);
       }
 
       [selected-row] {
@@ -25,15 +25,15 @@ export class DataList extends DataManipulator {
       }
 
       #upward {
-        --md-icon-size: 26px;
+        --md-icon-size: var(--icon-size-large);
         position: absolute;
         top: var(--data-list-fab-position-vertical);
         right: var(--data-list-fab-position-horizontal);
         background-color: rgba(255, 255, 255, 0.7);
-        border-radius: 20px;
+        border-radius: var(--md-sys-shape-corner-large);
         color: var(--data-list-fab-color);
         box-shadow: var(--data-list-fab-shadow);
-        padding: 7px;
+        padding: var(--spacing-small);
       }
 
       slot {

package/src/data-list/record-partial.ts

@@ -39,29 +39,29 @@ export class RecordPartial extends LitElement {
         border-bottom: var(--data-list-item-border-bottom);
         position: relative;
         min-height: 42px;
-        padding-left: 7px;
+        padding-left: var(--spacing-medium);
       }
 
       :host([dirty])::before {
         content: '';
         position: absolute;
-        left: 0;
-        top: 0;
+        left: var(--spacing-none);
+        top: var(--spacing-none);
 
-        width: 0px;
-        height: 0px;
+        width: var(--spacing-none);
+        height: var(--spacing-none);
         border-top: var(--grid-record-dirty-border-top);
         border-right: var(--grid-record-dirty-border-left);
       }
 
       :host [dirty] {
         position: absolute;
-        margin: 0;
+        margin: var(--spacing-none);
         height: 20px;
         font: var(--grid-record-dirty-icon-font);
         text-indent: 1px;
-        left: 0;
-        top: 0;
+        left: var(--spacing-none);
+        top: var(--spacing-none);
         color: var(--grid-record-dirty-color);
       }
 
@@ -72,7 +72,7 @@ export class RecordPartial extends LitElement {
       }
 
       div[tail] {
-        margin: 0;
+        margin: var(--spacing-none);
         width: 100px;
         aspect-ratio: 1 / 1;
 
@@ -87,7 +87,6 @@ export class RecordPartial extends LitElement {
       }
 
       ox-list-field {
-        padding-top: 3px;
         font: var(--data-list-item-etc-font);
         color: var(--data-list-item-etc-color);
       }

package/src/editors/ox-input-tree.ts

@@ -44,7 +44,7 @@ export class OxInputTree extends OxFormField {
       transform: translate(-25%, -50%) rotate(-90deg);
       content: ' ';
       border: 5px solid transparent;
-      border-top: 5px solid var(--primary-color, #1890ff);
+      border-top: 5px solid var(--md-sys-color-on-primary-container, #1890ff);
     }
 
     span[expander][expanded]::before {
@@ -54,7 +54,7 @@ export class OxInputTree extends OxFormField {
       transform: translate(-50%, -25%);
       content: ' ';
       border: 5px solid transparent;
-      border-top: 5px solid var(--primary-color, #1890ff);
+      border-top: 5px solid var(--md-sys-color-on-primary-container, #1890ff);
     }
 
     span[checkbox] {
@@ -76,13 +76,13 @@ export class OxInputTree extends OxFormField {
       display: block;
       width: 10px;
       height: 10px;
-      border: 1px solid var(--primary-color, #1890ff);
+      border: 1px solid var(--md-sys-color-on-primary-container, #1890ff);
       border-radius: 2px;
     }
 
     span[checkbox][checked='checked']::before {
-      background-color: var(--primary-color, #1890ff);
-      border-color: var(--primary-color, #1890ff);
+      background-color: var(--md-sys-color-on-primary-container, #1890ff);
+      border-color: var(--md-sys-color-on-primary-container, #1890ff);
     }
 
     span[checkbox][checked='checked']::after {
@@ -102,8 +102,8 @@ export class OxInputTree extends OxFormField {
     }
 
     span[checkbox][checked='half-checked']::before {
-      background-color: var(--primary-color, #1890ff);
-      border-color: var(--primary-color, #1890ff);
+      background-color: var(--md-sys-color-on-primary-container, #1890ff);
+      border-color: var(--md-sys-color-on-primary-container, #1890ff);
     }
 
     span[checkbox][checked='half-checked']::after {

package/src/filters/filter-input-barcode.ts

@@ -28,6 +28,7 @@ export const FilterInputBarcode: FilterSelectRenderer = (column, value, owner) =
           })
         )
       }}
+      filter-input
     ></ox-input-barcode>
   `
 }

package/src/filters/filter-styles.ts

@@ -2,15 +2,15 @@ import { css } from 'lit'
 
 export const FilterStyles = css`
   :host {
-    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--primary-color));
+    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--md-sys-color-on-surface));
 
     --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));
-    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--primary-color));
+    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--md-sys-color-outline-variant));
     --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));
-    --ox-filters-input-color: var(--input-color, var(--primary-text-color));
-    --ox-filters-input-focus-color: var(--input-focus-color, var(--primary-color));
+    --ox-filters-input-color: var(--input-color, var(--md-sys-color-on-surface));
+    --ox-filters-input-focus-color: var(--input-focus-color, var(--md-sys-color-on-surface-variant));
     --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));
-    --ox-filters-label-color: var(--label-color, var(--primary-text-color));
+    --ox-filters-label-color: var(--label-color, var(--md-sys-color-on-surface));
     --ox-filters-input-background-color: transparent;
 
     --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
@@ -22,7 +22,7 @@ export const FilterStyles = css`
 
   label {
     font: var(--ox-filters-label-font);
-    color: var(--ox-filters-label-color);
+    color: var(--ox-filters-label-color, var(--md-sys-color-on-surface));
   }
 
   span {
@@ -30,39 +30,40 @@ export const FilterStyles = css`
   }
 
   input::placeholder {
-    color: var(--ox-filters-input-placeholder-color);
+    color: var(--ox-filters-input-placeholder-color, var(--md-sys-color-surface-dim));
     opacity: 0.6;
   }
 
-  input {
+  input,
+  ox-input-search,
+  [filter-input] {
     padding: var(--ox-filters-input-padding);
   }
 
   ox-select,
-  input {
+  ox-input-search,
+  input,
+  [filter-input] {
     border: none;
-    border-bottom: var(--ox-filters-input-border);
+    border-bottom: var(--ox-filters-input-border, var(--md-sys-color-outline));
     font: var(--ox-filters-input-font);
-    color: var(--ox-filters-input-color);
+    color: var(--ox-filters-input-color, var(--md-sys-color-on-surface));
     background-color: var(--ox-filters-input-background-color, transparent);
   }
 
   ox-select:focus,
-  input:focus {
+  input:focus,
+  [filter-input]:focus {
     outline: none;
-    border-bottom: var(--ox-filters-input-focus-border);
-    color: var(--ox-filters-input-focus-color);
+    border-bottom: var(--ox-filters-input-focus-border, var(--md-sys-color-outline-variant));
+    color: var(--ox-filters-input-focus-color, var(--md-sys-color-on-surface-variant));
   }
 
   ox-select {
-    min-width: 100px;
+    min-width: 90px;
     max-width: 170px;
   }
 
-  ox-input-barcode {
-    min-width: 150px;
-  }
-
   ox-input-search {
     max-width: 150px;
   }
@@ -78,6 +79,11 @@ export const FilterStyles = css`
     max-width: 170px;
   }
 
+  [filter-input] {
+    min-width: 140px;
+    max-width: 170px;
+  }
+
   @media only screen and (max-width: 460px) {
     :host {
       --ox-filters-form-label-font: bold 13px var(--theme-font);

package/src/filters/filters-form.ts

@@ -5,6 +5,7 @@ import '@operato/input/ox-input-search.js'
 
 import { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'
 import { customElement, property, queryAsync, state } from 'lit/decorators.js'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { PagePreferenceProvider } from '@operato/p13n'
 import { getDefaultValue } from '@operato/time-calculator'
@@ -26,10 +27,12 @@ export type QueryFilter = {
 @customElement('ox-filters-form')
 export class OxFiltersForm extends LitElement {
   static styles = [
+    MDTypeScaleStyles,
     FilterStyles,
     css`
       :host {
         display: flex;
+        padding: var(--spacing-small);
       }
 
       form {
@@ -162,6 +165,7 @@ export class OxFiltersForm extends LitElement {
       ? html``
       : html`
           <form
+            class="md-typescale-body-medium-prominent"
             @submit=${(e: Event) => {
               e.stopPropagation()
               e.preventDefault()

package/src/gutters/gutter-dirty.ts

@@ -21,7 +21,7 @@ class GutterDirtyElement extends LitElement {
     }
 
     [add] {
-      background-color: var(--primary-color);
+      background-color: var(--md-sys-color-on-primary-container);
     }
 
     [remove] {