@operato/process 2.0.0-alpha.147 → 2.0.0-alpha.149

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/process",
-  "version": "2.0.0-alpha.147",
+  "version": "2.0.0-alpha.149",
   "description": "Webcomponent for business process modeling following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -68,17 +68,17 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.1.3",
-    "@operato/app": "^2.0.0-alpha.147",
-    "@operato/board": "^2.0.0-alpha.147",
-    "@operato/data-grist": "^2.0.0-alpha.146",
-    "@operato/font": "^2.0.0-alpha.146",
+    "@operato/app": "^2.0.0-alpha.149",
+    "@operato/board": "^2.0.0-alpha.149",
+    "@operato/data-grist": "^2.0.0-alpha.149",
+    "@operato/font": "^2.0.0-alpha.149",
     "@operato/graphql": "^2.0.0-alpha.145",
-    "@operato/i18n": "^2.0.0-alpha.111",
-    "@operato/input": "^2.0.0-alpha.146",
-    "@operato/markdown": "^2.0.0-alpha.142",
-    "@operato/popup": "^2.0.0-alpha.145",
-    "@operato/property-editor": "^2.0.0-alpha.146",
-    "@operato/styles": "^2.0.0-alpha.142",
+    "@operato/i18n": "^2.0.0-alpha.148",
+    "@operato/input": "^2.0.0-alpha.149",
+    "@operato/markdown": "^2.0.0-alpha.149",
+    "@operato/popup": "^2.0.0-alpha.149",
+    "@operato/property-editor": "^2.0.0-alpha.149",
+    "@operato/styles": "^2.0.0-alpha.149",
     "@operato/utils": "^2.0.0-alpha.145",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@types/file-saver": "^2.0.4",
@@ -128,5 +128,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "d286d2574fb33eb8790d69f1cd075c7e6640a19c"
+  "gitHead": "ae0a8ae9e4627a09783ea436f2498bd80880a736"
 }

package/src/modeller/component-toolbar/component-toolbar.ts

@@ -80,7 +80,7 @@ export class ComponentToolbar extends ScopedElementsMixin(LitElement) {
 
   updated(changes: PropertyValues<this>) {
     if (changes.has('componentGroupList')) {
-      const color = getComputedStyle(this, null).getPropertyValue('--primary-color')
+      const color = getComputedStyle(this, null).getPropertyValue('--md-sys-color-primary')
 
       this.icons = (this.componentGroupList || [])
         .filter(group => group.templates?.length > 0)

package/src/modeller/property-sidebar/data-binding/data-binding.ts

@@ -131,14 +131,14 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
 
       md-icon {
         margin-left: 5px;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-on-secondary-container);
         opacity: 0.8;
         cursor: pointer;
         --md-icon-size: 18px;
       }
 
       md-icon:hover {
-        color: var(--primary-color);
+        color: var(--md-sys-color-on-primary-container);
         opacity: 1;
       }
 

package/src/modeller/property-sidebar/inspector/inspector.ts

@@ -21,13 +21,12 @@ export class SceneInspector extends LitElement {
 
       ox-input-search {
         --input-search-padding: 3px;
-        --input-search-border-bottom: none;
         --input-search-focus-border-bottom: none;
         --input-search-font: normal 16px var(--theme-font);
 
         border-radius: 999px;
         box-sizing: border-box;
-        border: 1px solid var(--secondary-color);
+        border: 1px solid var(--md-sys-color-on-secondary-container);
         padding: 0 10px;
         margin: 5px;
       }

package/src/modeller/property-sidebar/specifics/specifics.ts

@@ -25,7 +25,7 @@ export class PropertySpecific extends ScopedElementsMixin(LitElement) {
 
         text-align: right;
         font: bold 14px var(--theme-font);
-        color: var(--primary-color);
+        color: var(--md-sys-color-on-primary-container);
         text-transform: uppercase;
       }
     `

package/src/ox-process-list.ts

@@ -38,7 +38,7 @@ class ProcessList extends LitElement {
       align-items: center;
       padding: var(--padding-default) var(--padding-wide);
       border-top: 2px solid rgba(0, 0, 0, 0.2);
-      background-color: var(--theme-white-color);
+      background-color: var(--md-sys-color-surface);
       box-shadow: var(--box-shadow);
     }
 
@@ -58,7 +58,7 @@ class ProcessList extends LitElement {
       padding: var(--padding-narrow);
       font-size: 1em;
       opacity: 0.5;
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
       cursor: pointer;
     }
 
@@ -66,12 +66,12 @@ class ProcessList extends LitElement {
       border-radius: 9px;
       background-color: rgba(var(--primary-color-rgb), 0.05);
       opacity: 1;
-      color: var(--secondary-text-color);
+      color: var(--md-sys-color-on-secondary-container);
       cursor: default;
     }
     #modes > md-icon:hover {
       opacity: 1;
-      color: var(--secondary-text-color);
+      color: var(--md-sys-color-on-secondary-container);
     }
 
     #add button {
@@ -79,7 +79,8 @@ class ProcessList extends LitElement {
       align-items: center;
       justify-content: center;
 
-      background-color: var(--primary-color);
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
       border: 0;
       border-radius: 50%;
       padding: 5px;
@@ -89,13 +90,13 @@ class ProcessList extends LitElement {
     }
 
     #add button:hover {
-      background-color: var(--focus-background-color);
+      background-color: var(--md-sys-color-on-primary-container);
+      color: var(--md-sys-color-primary-container);
       box-shadow: var(--box-shadow);
     }
 
     #add button md-icon {
       font-size: 1.5em;
-      color: var(--theme-white-color);
     }
 
     #filters {
@@ -114,10 +115,10 @@ class ProcessList extends LitElement {
     #filters md-icon {
       position: absolute;
       top: 3px;
-      color: var(--secondary-color);
+      color: var(--md-sys-color-on-secondary-container);
     }
     #filters * {
-      margin-right: var(--margin-default);
+      margin-right: var(--spacing-medium);
     }
 
     @media only screen and (max-width: 460px) {

package/src/ox-process-modeller.ts

@@ -98,7 +98,7 @@ export class OxProcessModeller extends ScopedElementsMixin(LitElement) {
         left: 50%;
         top: 50%;
         transform: translateX(-50%) translateY(-50%);
-        background: var(--secondary-color, black);
+        background: var(--md-sys-color-on-secondary-container, black);
 
         display: flex;
         justify-content: center;

package/src/ox-process-template-list.ts

@@ -77,7 +77,7 @@ export class OxProcessTemplateList extends LitElement {
         align-items: center;
         padding: var(--padding-default) var(--padding-wide);
         border-top: 2px solid rgba(0, 0, 0, 0.2);
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface);
         box-shadow: var(--box-shadow);
       }