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

package/client/pages/inbound/unload-product.js

@@ -15,7 +15,7 @@ import orderBy from 'lodash-es/orderBy'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 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'
@@ -66,7 +66,7 @@ class UnloadProduct extends connect(store)(localize(i18next)(PageView)) {
           flex: 1;
         }
         #form-section {
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
         }
         :host {
           display: flex;
@@ -1148,8 +1148,8 @@ class UnloadProduct extends connect(store)(localize(i18next)(PageView)) {
           foundOrderProducts?.length >= 1
             ? foundOrderProducts[0].product
             : foundOrderProducts?.length == 0 && foundParentProducts?.length > 0
-            ? foundParentProducts[0].product
-            : null
+              ? foundParentProducts[0].product
+              : null
 
         if (this._selectedOrderProduct && this._selectedOrderProduct.product.sku !== product.sku)
           this._selectedOrderProduct = null

package/client/pages/inbound/unloaded-inventories-popup.js

@@ -3,9 +3,9 @@ import '@operato/data-grist'
 import { css, html, LitElement } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin'
 
-import { i18next, localize } from '@things-factory/i18n-base'
-import { store } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { i18next, localize } from '@operato/i18n'
+import { store } from '@operato/shell'
+import { isMobileDevice } from '@operato/utils'
 
 class UnloadedInventoriesPopup extends connect(store)(localize(i18next)(LitElement)) {
   static get properties() {
@@ -24,7 +24,7 @@ class UnloadedInventoriesPopup extends connect(store)(localize(i18next)(LitEleme
           flex: 1;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -35,7 +35,7 @@ class UnloadedInventoriesPopup extends connect(store)(localize(i18next)(LitEleme
           display: flex;
           flex-direction: column;
           overflow-x: overlay;
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
         }
       `
     ]

package/client/pages/inbound/vas-selector.js

@@ -1,9 +1,9 @@
 import '@things-factory/form-ui'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
@@ -16,7 +16,7 @@ export class VasSelector extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow: hidden;
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
         }
 
         search-form {

package/client/pages/inbound/worksheet-putaway-return.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 { client, CustomAlert, navigate, PageView } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { WORKSHEET_STATUS } from '../constants'
@@ -42,7 +42,7 @@ class WorksheetPutawayReturn extends localize(i18next)(PageView) {
           margin: 10px;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -62,7 +62,7 @@ class WorksheetPutawayReturn 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/pages/inbound/worksheet-putaway.js

@@ -6,10 +6,10 @@ import { css, html } from 'lit'
 
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import { getRenderer } from '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, CustomAlert, navigate, PageView } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 import {
   VAS_BATCH_AND_PRODUCT_TYPE,
@@ -53,7 +53,7 @@ class WorksheetPutaway extends localize(i18next)(PageView) {
           margin: 10px;
         }
         .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 WorksheetPutaway 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/pages/inbound/worksheet-unloading-return.js

@@ -1,11 +1,11 @@
 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, CustomAlert, navigate, PageView } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { fetchSettingRule } from '../../fetch-setting-value'
@@ -48,7 +48,7 @@ class WorksheetUnloadingReturn extends localize(i18next)(PageView) {
           margin: 10px;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -68,7 +68,7 @@ class WorksheetUnloadingReturn 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/pages/inbound/worksheet-unloading.js

@@ -13,7 +13,7 @@ import { css, html } from 'lit'
 import { getCodeByName } from '@things-factory/code-base'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 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 { CommonButtonStyles } from '@things-factory/styles'
@@ -71,7 +71,7 @@ class WorksheetUnloading extends localize(i18next)(PageView) {
           margin: 10px;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -91,7 +91,7 @@ class WorksheetUnloading 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 {
           vertical-align: middle;

package/client/pages/inventory/inventory-adjustment-approval.js

@@ -7,10 +7,10 @@ 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, PageView, store, gqlContext } from '@things-factory/shell'
 import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import { openPopup } from '@operato/layout'
 
 class InventoryAdjustmentApproval extends connect(store)(localize(i18next)(PageView)) {
@@ -35,7 +35,7 @@ class InventoryAdjustmentApproval extends connect(store)(localize(i18next)(PageV
         }
 
         .grist {
-          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/inventory/inventory-adjustment.js

@@ -11,11 +11,11 @@ import { connect } from 'pwa-helpers/connect-mixin'
 
 import { DirectPrinter } from '@things-factory/barcode-base'
 import { getCodeByName } from '@things-factory/code-base'
-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, ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 import { fetchPageSettings } from '../../util/index'
 

package/client/pages/inventory/inventory-by-product-detail.js

@@ -5,11 +5,11 @@ import './inventory-history-by-pallet'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
-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 { ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { client } from '@operato/graphql'
+import { ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
 
 class InventoryByProductDetail extends localize(i18next)(LitElement) {
   static get styles() {

package/client/pages/inventory/inventory-by-product.js

@@ -6,11 +6,11 @@ import './inventory-by-product-detail'
 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 { openPopup } from '@operato/layout'
 import { client, 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'
 
 class InventoryByProduct extends localize(i18next)(PageView) {
   static get properties() {

package/client/pages/inventory/inventory-history-by-pallet.js

@@ -1,9 +1,9 @@
 import '@material/mwc-button/mwc-button'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { isMobileDevice } from '@operato/utils'
+import { ScrollbarStyles } from '@operato/styles'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 

package/client/pages/inventory/inventory-history.js

@@ -4,10 +4,10 @@ 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, 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'
 
 class InventoryHistory extends localize(i18next)(PageView) {
   static get styles() {

package/client/pages/inventory/non-loaded-inventory.js

@@ -5,10 +5,10 @@ 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 { ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
 
 class NonLoadedInventory extends connect(store)(localize(i18next)(PageView)) {
   static get styles() {

package/client/pages/inventory/onhand-inventory.js

@@ -6,9 +6,9 @@ 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, PageView, store } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { ScrollbarStyles } from '@operato/styles'
 import { flattenObject, isMobileDevice } from '@things-factory/utils'
 
 class OnhandInventory extends connect(store)(localize(i18next)(PageView)) {

package/client/pages/inventory/serial-number-list-popup.js

@@ -5,9 +5,9 @@ import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
 import { MultiColumnFormStyles, SingleColumnFormStyles } from '@things-factory/form-ui'
-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 { INVENTORY_ITEM_CHANGE_TRANSACTION_TYPE, INVENTORY_ITEM_CHANGE_TYPE } from '../constants'
 
@@ -22,10 +22,10 @@ class SerialNumberListPopup 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 {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -99,8 +99,8 @@ class SerialNumberListPopup extends localize(i18next)(LitElement) {
                   this.inventory?.cartonId
                     ? this.inventory.cartonId
                     : this.inventory?.palletId
-                    ? this.inventory.palletId
-                    : ''
+                      ? this.inventory.palletId
+                      : ''
                 } (${this.inventory.transactionType})`
               : `${this.inventory.product.sku} - ${`${this.inventory.product.name}`} ( ${this.data?.total || 0} / ${
                   this.inventory.qty

package/client/pages/inventory-check/check-inventory-popup.js

@@ -1,8 +1,8 @@
 import '@things-factory/barcode-ui'
 import { SingleColumnFormStyles } from '@things-factory/form-ui'
-import { client } from '@things-factory/shell'
+import { client } from '@operato/graphql'
 import gql from 'graphql-tag'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { css, html, LitElement } from 'lit'
 
 class CheckInventoryPopup extends localize(i18next)(LitElement) {
@@ -27,10 +27,10 @@ class CheckInventoryPopup 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 {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -58,7 +58,7 @@ class CheckInventoryPopup 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/inventory-check/create-cycle-count.js

@@ -7,11 +7,11 @@ import gql from 'graphql-tag'
 import { css, html } 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, CustomAlert, navigate, PageView } from '@things-factory/shell'
 import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 import { fetchLocationSortingRule } from '../../fetch-location-sorting-rule'
 import { LOCATION_SORTING_RULE } from '../constants'
@@ -61,7 +61,7 @@ class CreateCycleCount extends localize(i18next)(PageView) {
         }
 
         h2 {
-          margin: 0 var(--margin-wide);
+          margin: 0 var(--spacing-large);
           padding: var(--subtitle-padding);
           font: var(--grist-title-font);
           color: var(--subtitle-text-color);
@@ -82,7 +82,7 @@ class CreateCycleCount extends localize(i18next)(PageView) {
           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/inventory-check/cycle-count-recheck-popup.js

@@ -1,7 +1,7 @@
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
-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'
 
@@ -25,10 +25,10 @@ class CycleCountRecheckPopup 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 {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -53,7 +53,7 @@ class CycleCountRecheckPopup 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-container-button-font);
           text-transform: var(--button-text-transform);
         }

package/client/pages/inventory-check/cycle-count-report.js

@@ -1,10 +1,10 @@
 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, CustomAlert, navigate, PageView } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { ORDER_STATUS, WORKSHEET_STATUS, WORKSHEET_TYPE } from '../constants'
@@ -40,7 +40,7 @@ class CycleCountReport 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;
@@ -60,7 +60,7 @@ class CycleCountReport 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/pages/inventory-check/inspecting-product.js

@@ -7,11 +7,11 @@ import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { MultiColumnFormStyles, SingleColumnFormStyles } 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, UPDATE_CONTEXT } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 import { fetchLocationSortingRule } from '../../fetch-location-sorting-rule'
 import { fetchSettingRule } from '../../fetch-setting-value'
@@ -56,7 +56,7 @@ class InspectingProduct extends connect(store)(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;
           overflow: auto;
@@ -91,7 +91,7 @@ class InspectingProduct extends connect(store)(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/pages/inventory-check/inventory-check-list.js

@@ -1,10 +1,10 @@
 import '@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, 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 gql from 'graphql-tag'
 import { css, html } from 'lit'
 import {

package/client/pages/inventory-check/search-popup.js

@@ -1,9 +1,9 @@
 import { SingleColumnFormStyles } from '@things-factory/form-ui'
 import '@material/mwc-button/mwc-button'
 import '@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 { css, html, LitElement } from 'lit'
 import gql from 'graphql-tag'
 
@@ -17,10 +17,10 @@ class SearchPopup 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 {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -51,7 +51,7 @@ class SearchPopup 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/inventory-check/worksheet-cycle-count.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 { client, CustomAlert, navigate, PageView } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { WORKSHEET_STATUS } from '../constants'
@@ -41,7 +41,7 @@ class WorksheetCycleCount extends localize(i18next)(PageView) {
           margin: 10px;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -61,7 +61,7 @@ class WorksheetCycleCount 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 {