@operato/attribute 2.0.0-alpha.98 → 2.0.0-beta.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/attribute",
   "description": "WebApplication attribute supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-alpha.98",
+  "version": "2.0.0-beta.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -56,16 +56,16 @@
   },
   "dependencies": {
     "@material/web": "^1.4.0",
-    "@operato/data-grist": "^2.0.0-alpha.98",
-    "@operato/graphql": "^2.0.0-alpha.57",
-    "@operato/grist-editor": "^2.0.0-alpha.98",
-    "@operato/i18n": "^2.0.0-alpha.59",
-    "@operato/input": "^2.0.0-alpha.98",
-    "@operato/popup": "^2.0.0-alpha.98",
-    "@operato/property-editor": "^2.0.0-alpha.98",
-    "@operato/shell": "^2.0.0-alpha.98",
-    "@operato/styles": "^2.0.0-alpha.98",
-    "@operato/utils": "^2.0.0-alpha.68",
+    "@operato/data-grist": "^2.0.0-beta.0",
+    "@operato/graphql": "^2.0.0-beta.0",
+    "@operato/grist-editor": "^2.0.0-beta.0",
+    "@operato/i18n": "^2.0.0-beta.0",
+    "@operato/input": "^2.0.0-beta.0",
+    "@operato/popup": "^2.0.0-beta.0",
+    "@operato/property-editor": "^2.0.0-beta.0",
+    "@operato/shell": "^2.0.0-beta.0",
+    "@operato/styles": "^2.0.0-beta.0",
+    "@operato/utils": "^2.0.0-beta.0",
     "lit": "^3.1.2"
   },
   "devDependencies": {
@@ -100,5 +100,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "cc3f1dee34e1bf60629920629e566bf28171c8fe"
+  "gitHead": "1c7306d2c3170b773e16d5d4ef79b490584d5441"
 }

package/src/grist-editor/ox-popup-attributes.ts

@@ -20,7 +20,7 @@ export class OxPopupAttributes extends LitElement {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
 
         width: var(--overlay-center-normal-width, 50%);
         height: var(--overlay-center-normal-height, 50%);
@@ -39,7 +39,7 @@ export class OxPopupAttributes extends LitElement {
         align-items: center;
         justify-content: center;
 
-        color: var(--primary-color);
+        color: var(--md-sys-color-on-primary-container);
       }
     `
   ]

package/src/ox-attribute-form.ts

@@ -47,11 +47,11 @@ export class OxAttributeForm extends LitElement {
 
       grid-gap: 9px;
       align-items: center;
-      margin-bottom: var(--margin-default);
+      margin-bottom: var(--spacing-medium);
     }
 
     label:nth-child(odd) {
-      background-color: var(--main-section-background-color);
+      background-color: var(--md-sys-color-background);
       padding: var(--padding-default) 0;
     }
 
@@ -110,7 +110,7 @@ export class OxAttributeForm extends LitElement {
 
         grid-gap: 9px;
         align-items: center;
-        margin-bottom: var(--margin-default);
+        margin-bottom: var(--spacing-medium);
       }
 
       div[name] {
@@ -192,7 +192,7 @@ export class OxAttributeForm extends LitElement {
 
       return html` <label .title=${description}>
         <div name>${name}</div>
-        <div description><md-icon>info_outline</md-icon> ${description}</div>
+        <div description><md-icon>info</md-icon> ${description}</div>
         <div elements>${element}</div>
       </label>`
     })

package/src/ox-attribute-view.ts

@@ -54,11 +54,11 @@ export class OxAttributeView extends LitElement {
 
         grid-gap: 9px;
         align-items: center;
-        margin-bottom: var(--margin-default);
+        margin-bottom: var(--spacing-medium);
       }
 
       label:nth-child(odd) {
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: var(--padding-default) 0;
       }
 
@@ -117,7 +117,7 @@ export class OxAttributeView extends LitElement {
 
           grid-gap: 9px;
           align-items: center;
-          margin-bottom: var(--margin-default);
+          margin-bottom: var(--spacing-medium);
         }
 
         div[name] {
@@ -181,7 +181,7 @@ export class OxAttributeView extends LitElement {
 
       return html` <label .title=${description}>
         <div name>${name}</div>
-        <div description><md-icon>info_outline</md-icon> ${description}</div>
+        <div description><md-icon>info</md-icon> ${description}</div>
         <div elements>${element}</div>
       </label>`
     })

package/stories/ox-grist-editor-attributes.stories.ts

@@ -70,7 +70,7 @@ class GristDemo extends LitElement {
       #tailer {
         display: flex;
         flex-direction: row;
-        margin: 0 var(--margin-default);
+        margin: 0 var(--spacing-medium);
       }
 
       #tailer a {
@@ -78,7 +78,7 @@ class GristDemo extends LitElement {
         margin: 0 var(--margin-narrow);
         border-right: 1px solid rgba(0, 0, 0, 0.1);
         font-size: var(--fontsize-default);
-        color: var(--primary-color);
+        color: var(--md-sys-color-on-primary-container);
       }
     `
   ]
@@ -285,7 +285,7 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
       flex-direction: row;
       align-items: center;
       padding: var(--padding-default) var(--padding-wide);
-      background-color: var(--theme-white-color);
+      background-color: var(--md-sys-color-surface);
       box-shadow: var(--box-shadow);
 
       --md-icon-size: 24px;
@@ -296,11 +296,11 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
     }
     #sorters {
       margin-left: auto;
-      margin-right: var(--margin-default);
+      margin-right: var(--spacing-medium);
       padding-left: var(--padding-narrow);
       border-bottom: var(--border-dark-color);
       position: relative;
-      color: var(--secondary-color);
+      color: var(--md-sys-color-on-secondary-container);
       font-size: var(--fontsize-default);
       user-select: none;
     }
@@ -317,7 +317,7 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
     }
 
     #filters * {
-      margin-right: var(--margin-default);
+      margin-right: var(--spacing-medium);
     }
 
     @media only screen and (max-width: 460px) {

package/themes/app-theme.css

@@ -121,7 +121,7 @@ body {
 
   /* form style */
   --label-font: normal var(--fontsize-default) var(--theme-font);
-  --label-color: var(--secondary-color);
+  --label-color: var(--md-sys-color-on-surface);
   --label-text-transform: capitalize;
   --input-margin: var(--margin-narrow) 0;
   --input-padding: var(--padding-default);

package/themes/form-theme.css

@@ -1,20 +1,20 @@
 body {
   --form-border: none;
-  --form-margin: var(--margin-wide);
+  --form-margin: var(--spacing-medium);
   --form-max-width: 700px;
   --form-multi-column-max-width: 100%;
   --form-sublabel-font: normal 13px var(--theme-font);
-  --form-sublabel-color: var(--secondary-color);
+  --form-sublabel-color: var(--md-sys-color-secondary);
   --form-grid-gap: 12px 5px;
 
-  --legend-padding: var(--padding-default) 0;
+  --legend-padding: var(--spacing-medium) 0;
   --legend-font: bold 16px var(--theme-font);
-  --legend-text-color: var(--secondary-text-color);
-  --legend-border-bottom: 1px solid var(--primary-color);
+  --legend-text-color: var(--md-sys-color-on-secondary);
+  --legend-border-bottom: 1px solid var(--md-sys-color-primary);
 
   --label-padding: 3px 0;
   --label-font: normal 14px var(--theme-font);
-  --label-color: var(--secondary-color);
+  --label-color: var(--md-sys-color-secondary);
 
   --input-field-border: 1px solid rgba(0, 0, 0, 0.2);
   --input-field-border-radius: var(--border-radius);
@@ -23,29 +23,29 @@ body {
 
   --search-panel-background-color: rgba(0, 0, 0, 0.1);
   --search-panel-search-iconbutton-size: var(--icon-default-size);
-  --search-form-icon-color: var(--primary-color);
+  --search-form-icon-color: var(--md-sys-color-primary);
   --search-form-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.15);
   --search-form-box-padding: 15px 30px 15px 15px;
-  --search-form-background-color: #fff;
-  --search-form-narrow-background-color: var(--primary-color);
-  --search-form-narrow-text-color: #fff;
+  --search-form-background-color: var(--md-sys-color-surface);
+  --search-form-narrow-background-color: var(--md-sys-color-surface);
+  --search-form-narrow-text-color: var(--md-sys-color-on-surface);
 
   --file-uploader-border: 1px solid rgba(0, 0, 0, 0.1);
-  --file-uploader-background-color: var(--main-section-background-color);
+  --file-uploader-background-color: var(--md-sys-color-background);
   --file-uploader-font: normal 12px/20px var(--theme-font);
-  --file-uploader-color: var(--secondary-color);
-  --file-uploader-icon-color: var(--primary-color);
+  --file-uploader-color: var(--md-sys-color-secondary);
+  --file-uploader-icon-color: var(--md-sys-color-primary);
   --file-uploader-candrop-background-color: #fffde9;
   --file-uploader-label-padding: 3px 20px;
   --file-uploader-label-border-radius: var(--border-radius);
-  --file-uploader-label-background-color: var(--secondary-color);
+  --file-uploader-label-background-color: var(--md-sys-color-secondary);
   --file-uploader-label-font: normal 12px var(--theme-font);
   --file-uploader-label-color: #fff;
   --file-uploader-li-padding: 2px 5px 0px 5px;
   --file-uploader-li-border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
   --file-uploader-li-icon-margin: 2px 0 2px 5px;
   --file-uploader-li-icon-font: normal 15px var(--mdc-icon-font, 'Material Icons');
-  --file-uploader-li-icon-focus-color: var(--primary-color);
+  --file-uploader-li-icon-focus-color: var(--md-sys-color-primary);
 }
 
 @media screen and (max-width: 480px) {