@operato/dataset 2.0.0-alpha.15 → 2.0.0-alpha.151

package/stories/ox-grist-editor-data-item-spec.stories.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/property-editor/ox-property-editor-checkbox.js'
 import '@operato/property-editor/ox-property-editor-number.js'
 import '@operato/property-editor/ox-property-editor-string.js'
@@ -90,7 +90,7 @@ class GristDemo extends LitElement {
       #tailer {
         display: flex;
         flex-direction: row;
-        margin: 0 var(--margin-default);
+        margin: 0 var(--spacing-medium);
       }
 
       #tailer a {
@@ -98,7 +98,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);
       }
     `
   ]
@@ -306,9 +306,9 @@ class GristDemo extends LitElement {
 
         <div slot="headroom" id="headroom">
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
       </ox-grist>
@@ -332,67 +332,78 @@ interface Story<T> {
 
 interface ArgTypes {}
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html`
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/oops-theme.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
-    <style>
-      [slot='headroom'] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: var(--padding-default) var(--padding-wide);
-        background-color: var(--theme-white-color);
-        box-shadow: var(--box-shadow);
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/oops-theme.css" rel="stylesheet" />
+  <link href="/themes/grist-theme.css" rel="stylesheet" />
 
-        --mdc-icon-size: 24px;
-      }
-      #sorters mwc-icon,
-      #modes mwc-icon {
-        --mdc-icon-size: 18px;
-      }
-      #sorters {
-        margin-left: auto;
-        margin-right: var(--margin-default);
-        padding-left: var(--padding-narrow);
-        border-bottom: var(--border-dark-color);
-        position: relative;
-        color: var(--secondary-color);
-        font-size: var(--fontsize-default);
-        user-select: none;
-      }
+  <style>
+    [slot='headroom'] {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: var(--padding-default) var(--padding-wide);
+      background-color: var(--md-sys-color-surface);
+      box-shadow: var(--box-shadow);
 
-      #sorters > * {
-        padding: var(--padding-narrow);
-        vertical-align: middle;
-      }
+      --md-icon-size: 24px;
+    }
+    #sorters md-icon,
+    #modes md-icon {
+      --md-icon-size: 18px;
+    }
+    #sorters {
+      margin-left: auto;
+      margin-right: var(--spacing-medium);
+      padding-left: var(--padding-narrow);
+      border-bottom: var(--border-dark-color);
+      position: relative;
+      color: var(--md-sys-color-on-secondary-container);
+      font-size: var(--fontsize-default);
+      user-select: none;
+    }
 
-      #filters {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
+    #sorters > * {
+      padding: var(--padding-narrow);
+      vertical-align: middle;
+    }
 
-      #filters * {
-        margin-right: var(--margin-default);
-      }
+    #filters {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
 
-      @media only screen and (max-width: 460px) {
-        #filters {
-          flex-direction: column;
-        }
+    #filters * {
+      margin-right: var(--spacing-medium);
+    }
 
-        #modes {
-          display: none;
-        }
+    @media only screen and (max-width: 460px) {
+      #filters {
+        flex-direction: column;
+      }
+
+      #modes {
+        display: none;
       }
-    </style>
+    }
+  </style>
 
-    <ox-data-items mode="LIST"></ox-data-items>
-  `
+  <ox-data-items mode="LIST"></ox-data-items>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

package/themes/grist-theme.css

@@ -35,6 +35,8 @@ body {
   --grid-header-filter-title-font: normal 12px var(--theme-font);
   --grid-header-filter-title-icon-color: var(--primary-color);
 
+  --grid-body-bottom-border: 1px solid rgba(var(--secondary-color-rgb), 0.2);
+
   --grid-record-background-color: var(--theme-white-color);
   --grid-record-odd-background-color: #f9f7f5;
   --grid-record-padding: 0 5px 0 5px;