@things-factory/operato-tools 7.0.1-beta.6 → 7.0.1-beta.8

package/client/pages/generator/meta-generator-page.js

@@ -82,7 +82,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(
           border-radius: 9px 9px 0 0;
           border-right: 1px solid rgba(0, 0, 0, 0.4);
           text-transform: capitalize;
-          color: var(--theme-white-color);
+          color: var(--md-sys-color-on-primary);
           opacity: 0.7;
           cursor: pointer;
         }
@@ -98,7 +98,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(
           flex-direction: column;
           background-color: var(--md-sys-color-surface);
           border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
-          border: var(--border-dark-color);
+          border: var(--border-dim-color);
           border-width: 0 1px 1px 1px;
           box-shadow: var(--box-shadow);
           overflow: auto;
@@ -145,7 +145,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(
         }
 
         input {
-          border: var(--border-dark-color);
+          border: var(--border-dim-color);
           border-radius: var(--border-radius);
           margin: var(--input-margin);
           padding: var(--input-padding);
@@ -157,7 +157,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(
           flex-direction: column;
 
           font: var(--label-font);
-          color: var(--label-color);
+          color: var(--label-color, var(--md-sys-color-on-surface));
         }
         input[type='checkbox'] {
           min-width: 25px;
@@ -171,7 +171,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(
 
         select {
           border: 0;
-          border-bottom: var(--border-dark-color);
+          border-bottom: var(--border-dim-color);
           padding: var(--input-padding);
           font: var(--input-font);
           color: var(--primary-text-color);

package/client/themes/app-theme.css

@@ -4,11 +4,11 @@ body {
   --primary-color: rgb(var(--primary-color-rgb));
   --secondary-color-rgb: 57, 78, 100;
   --secondary-color: rgb(var(--secondary-color-rgb));
-  --focus-color: var(--theme-white-color);
+  --focus-color: var(--md-sys-color-on-primary);
   --primary-background-color: var(--md-sys-color-secondary);
   --secondary-background-color: #283644;
   :#f4f7fb;
-  --theme-white-color: #fff;
+  --md-sys-color-on-primary: #fff;
   --theme-black-color: rgba(0, 0, 0, 0.9);
 
   --focus-background-color: var(--md-sys-color-primary);
@@ -26,7 +26,7 @@ body {
 
   /* common style */
   --border-radius: 4px;
-  --border-dark-color: 1px solid rgba(0, 0, 0, 0.15);
+  --border-dim-color: 1px solid rgba(0, 0, 0, 0.15);
   --border-light-color: 1px solid rgba(255, 255, 255, 0.3);
 
   --box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);
@@ -69,12 +69,12 @@ body {
   --icon-tiny-size: 24px;
   --icon-default-size: 36px;
   --icon-big-size: 48px;
-  --icon-default-color: var(--theme-white-color);
+  --icon-default-color: var(--md-sys-color-on-primary);
 
   /* material design component themes */
-  --mdc-theme-on-primary: var(--theme-white-color);
+  --mdc-theme-on-primary: var(--md-sys-color-on-primary);
   --mdc-theme-primary: var(--secondary-text-color);
-  --mdc-theme-on-secondary: var(--theme-white-color);
+  --mdc-theme-on-secondary: var(--md-sys-color-on-primary);
   --mdc-theme-secondary: var(--md-sys-color-primary);
   --mdc-button-outline-color: var(--md-sys-color-primary);
   --mdc-danger-button-primary-color: var(--status-danger-color);
@@ -85,9 +85,9 @@ body {
   --md-fab-container-color: var(--md-sys-color-primary);
   --md-fab-icon-color: var(--focus-color);
 
-  --md-theme-on-primary: var(--theme-white-color);
+  --md-theme-on-primary: var(--md-sys-color-on-primary);
   --md-theme-primary: var(--secondary-text-color);
-  --md-theme-on-secondary: var(--theme-white-color);
+  --md-theme-on-secondary: var(--md-sys-color-on-primary);
   --md-theme-secondary: var(--md-sys-color-primary);
   --md-button-outline-color: var(--md-sys-color-primary);
   --md-danger-button-primary-color: var(--status-danger-color);
@@ -98,7 +98,7 @@ body {
   /* button style */
   --button-background-color: #fafbfc;
   --button-background-focus-color: var(--md-sys-color-primary);
-  --button-border: var(--border-dark-color);
+  --button-border: var(--border-dim-color);
   --button-border-radius: var(--border-radius);
   --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;
   --button-padding: calc(var(--padding-narrow) * 1.5) var(--padding-wide);
@@ -108,13 +108,13 @@ body {
   --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
   --button-activ-border: 1px solid var(--md-sys-color-primary);
   --button-activ-background-color: var(--md-sys-color-primary);
-  --button-activ-color: var(--theme-white-color);
+  --button-activ-color: var(--md-sys-color-on-primary);
   --iconbtn-padding: var(--padding-narrow);
 
   --button-primary-background-color: var(--md-sys-color-primary);
   --button-primary-active-background-color: var(--status-success-color);
   --button-primary-padding: var(--margin-default) var(--margin-wide);
-  --button-primary-color: var(--theme-white-color);
+  --button-primary-color: var(--md-sys-color-on-primary);
   --button-primary-font: bold 16px var(--theme-font);
 
   /* table style */