@things-factory/operato-wms 7.0.0-alpha.9 → 7.0.0

package/client/pages/report/job-sheet-list.js

@@ -4,9 +4,9 @@ import '@operato/data-grist'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, navigate, PageView } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { ScrollbarStyles } from '@operato/styles'
 import { flattenObject, isMobileDevice } from '@things-factory/utils'
 
 class JobSheetList extends localize(i18next)(PageView) {

package/client/pages/report/job-sheet-popup.js

@@ -1,7 +1,7 @@
 import { SingleColumnFormStyles } from '@things-factory/form-ui'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client } from '@things-factory/shell'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
@@ -29,7 +29,7 @@ class JobSheetPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow-x: overlay;
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
         }
         .button-container {
           padding: var(--button-container-padding);
@@ -46,7 +46,7 @@ class JobSheetPopup extends localize(i18next)(LitElement) {
           margin: var(--button-container-button-margin);
 
           padding: var(--button-padding);
-          color: var(--theme-white-color);
+          color: var(--md-sys-color-on-primary);
           font: var(--button-font);
           text-transform: var(--button-text-transform);
         }

package/client/pages/report/job-sheet-report.js

@@ -1,4 +1,4 @@
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, navigate, PageView } from '@things-factory/shell'
 import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'

package/client/pages/report/outbound-order-details-report.js

@@ -7,7 +7,7 @@ import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin'
 
 import { getCodeByName } from '@things-factory/code-base'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, gqlContext, PageView, store } from '@things-factory/shell'
 import { flattenObject, isMobileDevice } from '@things-factory/utils'
 
@@ -26,7 +26,7 @@ class OutboundOrderDetailsReport extends connect(store)(localize(i18next)(PageVi
       }
 
       .summary {
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         display: flex;
         flex-direction: column;
         overflow-y: auto;

package/client/pages/report/outbound-serial-number-report.js

@@ -6,7 +6,7 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin'
 
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, gqlContext, PageView, store } from '@things-factory/shell'
 import { flattenObject, isMobileDevice } from '@things-factory/utils'
 
@@ -25,7 +25,7 @@ class OutboundSerialNumberReport extends connect(store)(localize(i18next)(PageVi
       }
 
       .summary {
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         display: flex;
         flex-direction: column;
         overflow-y: auto;

package/client/pages/report/product-label-report.js

@@ -5,7 +5,7 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin'
 
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, PageView, store } from '@things-factory/shell'
 
 class ProductLabelReport extends connect(store)(localize(i18next)(PageView)) {

package/client/pages/report/release-inventory-report.js

@@ -7,7 +7,7 @@ import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin'
 
 import { getCodeByName } from '@things-factory/code-base'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, gqlContext, PageView, store } from '@things-factory/shell'
 import { flattenObject, isMobileDevice } from '@things-factory/utils'
 

package/client/pages/report/volume-summary-report.js

@@ -6,7 +6,7 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin'
 
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, PageView, store } from '@things-factory/shell'
 import { flattenObject, isMobileDevice } from '@things-factory/utils'
 
@@ -37,7 +37,7 @@ class VolumeSummaryReport extends connect(store)(localize(i18next)(PageView)) {
       }
 
       .summary {
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         display: flex;
         flex-direction: column;
         overflow-y: auto;

package/client/pages/support/inventory-comparison.js

@@ -6,10 +6,10 @@ import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin'
 
 import { getPartnerCodeByName } from '@things-factory/code-base'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, PageView, store } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
 
 class InventoryComparison extends connect(store)(localize(i18next)(PageView)) {
   static get styles() {

package/client/pages/system/location-sorting-rule.js

@@ -1,10 +1,10 @@
 import '@things-factory/form-ui'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { CommonButtonStyles } from '@things-factory/styles'
 import { client, PageView } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { LOCATION_SORTING_RULE } from '../constants'
@@ -32,7 +32,7 @@ class LocationSortingRule extends localize(i18next)(PageView) {
           flex-direction: column;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex: 1;
         }

package/client/pages/vas/abstract-execute-vas.js

@@ -7,7 +7,7 @@ import { css, html, LitElement } from 'lit'
 import { sleep } from '@operato/utils'
 import { MultiColumnFormStyles, SingleColumnFormStyles } from '@things-factory/form-ui'
 import { getRenderer } from '@operato/data-grist'
-import { i18next } from '@things-factory/i18n-base'
+import { i18next } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert, navigate, store, UPDATE_CONTEXT } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
@@ -35,7 +35,7 @@ export class AbstractExecuteVas extends LitElement {
         }
         .grist {
           overflow: hidden;
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex: 1;
         }
@@ -64,7 +64,7 @@ export class AbstractExecuteVas extends LitElement {
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
           font: var(--grist-title-font);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
         .grist h2 mwc-icon {
           vertical-align: middle;

package/client/pages/vas/execute-pure-vas.js

@@ -1,6 +1,6 @@
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { isMobileDevice } from '@things-factory/utils'
+import { i18next, localize } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
 import { html } from 'lit'
 import { AbstractExecuteVas } from './abstract-execute-vas'
 

package/client/pages/vas/execute-ref-vas.js

@@ -1,6 +1,6 @@
 import '@things-factory/barcode-ui'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { gqlBuilder, isMobileDevice } from '@things-factory/utils'
 import { html } from 'lit'
 import { ARRIVAL_NOTICE, RELEASE_OF_GOODS } from '../constants'
@@ -16,8 +16,8 @@ class ExecuteRefVas extends localize(i18next)(AbstractExecuteVas) {
                 <label>${i18next.t('label.container_no')}</label>
                 <input name="containerNo" readonly />`
             : this.orderType === RELEASE_OF_GOODS.value
-            ? html` <legend>${`${i18next.t('title.release_order')}: ${this.orderNo}`}</legend> `
-            : ''}
+              ? html` <legend>${`${i18next.t('title.release_order')}: ${this.orderNo}`}</legend> `
+              : ''}
 
           <label>${i18next.t('label.company')}</label>
           <input name="bizplaceName" readonly />

package/client/pages/vas/execute-vas.js

@@ -1,7 +1,7 @@
 import '@things-factory/barcode-ui'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { PageView, store } from '@things-factory/shell'
+import { i18next, localize } from '@operato/i18n'
+import { PageView, store } from '@operato/shell'
 import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { ARRIVAL_NOTICE, RELEASE_OF_GOODS, VAS_ORDER } from '../constants'

package/client/pages/vas/print-product-label.js

@@ -9,10 +9,10 @@ import { connect } from 'pwa-helpers/connect-mixin'
 
 import { DirectPrinter } from '@things-factory/barcode-base'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, CustomAlert, PageView, store } from '@things-factory/shell'
 import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 import { PRODUCT_LABEL_SETTING_KEY } from '../constants'
 

package/client/pages/vas/related-vas-list.js

@@ -1,9 +1,9 @@
 import '@things-factory/barcode-ui'
 import '@operato/data-grist'
 import { getRenderer } from '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { isMobileDevice } from '@operato/utils'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import '../components/popup-note'
@@ -43,7 +43,7 @@ class RelatedVasList extends localize(i18next)(LitElement) {
           flex: 1;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -63,7 +63,7 @@ class RelatedVasList extends localize(i18next)(LitElement) {
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
           font: var(--grist-title-font);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
         .grist h2 mwc-icon {
           vertical-align: middle;

package/client/pages/vas/reverse-kitting/execute-reverse-kitting.js

@@ -7,11 +7,11 @@ import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { sleep } from '@operato/utils'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert, PageView, store } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 class ExecuteReverseKitting extends connect(store)(localize(i18next)(PageView)) {
   static get styles() {
@@ -28,7 +28,7 @@ class ExecuteReverseKitting extends connect(store)(localize(i18next)(PageView))
           display: flex;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           overflow: hidden;
           flex: 1;

package/client/pages/vas/reverse-kitting/popup-combination-sets.js

@@ -5,10 +5,10 @@ import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
-import { client } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { client } from '@operato/graphql'
+import { isMobileDevice } from '@operato/utils'
 
 class PopupCombinationSets extends localize(i18next)(LitElement) {
   static get properties() {
@@ -28,7 +28,7 @@ class PopupCombinationSets extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow-x: overlay;
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
         }
         .container {
           display: flex;
@@ -38,7 +38,7 @@ class PopupCombinationSets extends localize(i18next)(LitElement) {
         .container > textarea {
           flex: 1;
           resize: none;
-          border-color: var(--primary-color);
+          border-color: var(--md-sys-color-primary);
           padding: 5px;
           margin: 10px;
           outline: none;
@@ -48,7 +48,7 @@ class PopupCombinationSets extends localize(i18next)(LitElement) {
           font: var(--grist-title-font);
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
         h2 mwc-icon {
           vertical-align: middle;

package/client/pages/vas/reverse-kitting/popup-reverse-kitting-template.js

@@ -6,10 +6,10 @@ import { css, html, LitElement } from 'lit'
 
 import { sleep } from '@operato/utils'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 class PopupReverseKittingTemplate extends localize(i18next)(LitElement) {
   static get properties() {
@@ -37,7 +37,7 @@ class PopupReverseKittingTemplate extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow-x: overlay;
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
         }
         .container {
           display: flex;
@@ -47,7 +47,7 @@ class PopupReverseKittingTemplate extends localize(i18next)(LitElement) {
         .container > textarea {
           flex: 1;
           resize: none;
-          border-color: var(--primary-color);
+          border-color: var(--md-sys-color-primary);
           padding: 5px;
           margin: 10px;
           outline: none;
@@ -57,7 +57,7 @@ class PopupReverseKittingTemplate extends localize(i18next)(LitElement) {
           font: var(--grist-title-font);
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
         h2 mwc-icon {
           vertical-align: middle;

package/client/pages/vas/target-inventory-assignment-popup.js

@@ -1,9 +1,9 @@
 import '@things-factory/barcode-ui'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, CustomAlert } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import {
@@ -42,7 +42,7 @@ class TargetInventoryAssignmentPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow-x: overlay;
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
         }
         .grist-container {
           overflow: hidden;
@@ -50,7 +50,7 @@ class TargetInventoryAssignmentPopup extends localize(i18next)(LitElement) {
           flex: 1;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -73,7 +73,7 @@ class TargetInventoryAssignmentPopup extends localize(i18next)(LitElement) {
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
           font: var(--grist-title-font);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
 
         .grist h2 mwc-icon {
@@ -101,7 +101,7 @@ class TargetInventoryAssignmentPopup extends localize(i18next)(LitElement) {
           margin: var(--button-container-button-margin);
 
           padding: var(--button-padding);
-          color: var(--theme-white-color);
+          color: var(--md-sys-color-on-primary);
           font: var(--button-font);
           text-transform: var(--button-text-transform);
         }

package/client/pages/vas/vas-pallet-label-popup.js

@@ -1,8 +1,8 @@
 import { DirectPrinter } from '@things-factory/barcode-base'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, store } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin'
@@ -26,10 +26,10 @@ class VasPalletLabelPopup extends connect(store)(localize(i18next)(LitElement))
           display: flex;
           flex-direction: column;
           overflow-x: overlay;
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -54,7 +54,7 @@ class VasPalletLabelPopup extends connect(store)(localize(i18next)(LitElement))
           margin: var(--button-container-button-margin);
 
           padding: var(--button-padding);
-          color: var(--theme-white-color);
+          color: var(--md-sys-color-on-primary);
           font: var(--button-font);
           text-transform: var(--button-text-transform);
         }

package/client/pages/vas/vas-worksheet-list.js

@@ -5,10 +5,10 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 
 import { getCodeByName } from '@things-factory/code-base'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, navigate, PageView } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
 
 import { ORDER_TYPES, WORKSHEET_TYPE } from '../constants'
 
@@ -130,10 +130,10 @@ class VasWorksheetList extends localize(i18next)(PageView) {
               const refOrderType = record.arrivalNotice?.name
                 ? ORDER_TYPES.ARRIVAL_NOTICE.value
                 : record.releaseGood?.name
-                ? ORDER_TYPES.RELEASE_OF_GOODS
-                : record.vasOrder?.name
-                ? ORDER_TYPES.VAS_ORDER.value
-                : null
+                  ? ORDER_TYPES.RELEASE_OF_GOODS
+                  : record.vasOrder?.name
+                    ? ORDER_TYPES.VAS_ORDER.value
+                    : null
 
               if (!refOrderType) return
 

package/client/pages/vas/worksheet-ref-vas.js

@@ -1,10 +1,10 @@
 import '@things-factory/barcode-ui'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, PageView } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import { CommonButtonStyles } from '@things-factory/styles'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -57,7 +57,7 @@ class WorksheetRefVas extends localize(i18next)(PageView) {
           flex: 1;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -81,7 +81,7 @@ class WorksheetRefVas extends localize(i18next)(PageView) {
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
           font: var(--grist-title-font);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
 
         .grist h2 mwc-icon {
@@ -125,9 +125,9 @@ class WorksheetRefVas extends localize(i18next)(PageView) {
               ? html` <label>${i18next.t('label.arrival_notice')}</label>
                   <input readonly value="${this.formData.orderNo}" />`
               : this.formData.orderType === ORDER_TYPES.RELEASE_OF_GOODS.value
-              ? html` <label>${i18next.t('label.release_goods')}</label>
-                  <input readonly value="${this.formData.orderNo}" />`
-              : ''}
+                ? html` <label>${i18next.t('label.release_goods')}</label>
+                    <input readonly value="${this.formData.orderNo}" />`
+                : ''}
             <!-- TODO: Showing reference order number -->
             <label>${i18next.t('label.company')}</label>
             <input name="bizplace" readonly value="${this.formData.customer}" />
@@ -313,8 +313,8 @@ class WorksheetRefVas extends localize(i18next)(PageView) {
     const orderType = this.worksheet.arrivalNotice?.name
       ? ORDER_TYPES.ARRIVAL_NOTICE.value
       : this.worksheet.releaseGood?.name
-      ? ORDER_TYPES.RELEASE_OF_GOODS.value
-      : ORDER_TYPES.VAS_ORDER.value
+        ? ORDER_TYPES.RELEASE_OF_GOODS.value
+        : ORDER_TYPES.VAS_ORDER.value
     const formData = {
       customer: this.worksheet.bizplace.name,
       status: this.worksheet.status,

package/client/pages/vas/worksheet-vas.js

@@ -3,10 +3,10 @@ import { getCodeByName } from '@things-factory/code-base'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import '@operato/data-grist'
 import { getRenderer } from '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert, navigate, PageView } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import { CommonButtonStyles } from '@things-factory/styles'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -69,7 +69,7 @@ class WorksheetVas extends localize(i18next)(PageView) {
           flex: 1;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -93,7 +93,7 @@ class WorksheetVas extends localize(i18next)(PageView) {
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
           font: var(--grist-title-font);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
 
         .grist h2 mwc-icon {

package/client/route.js

@@ -1,4 +1,4 @@
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 export default function route(page) {
   switch (page) {