@operato/data-grist 2.0.0-alpha.146 → 2.0.0-alpha.149

package/src/renderers/ox-grist-renderer-tree.ts

@@ -38,7 +38,7 @@ export class OxGristRendererTree extends OxGristRenderer {
       transform: translate(-25%, -50%) rotate(-90deg);
       content: ' ';
       border: 5px solid transparent;
-      border-top: 5px solid var(--primary-color, #1890ff);
+      border-top: 5px solid var(--md-sys-color-on-primary-container, #1890ff);
     }
 
     span[expander][expanded]::before {
@@ -48,7 +48,7 @@ export class OxGristRendererTree extends OxGristRenderer {
       transform: translate(-50%, -25%);
       content: ' ';
       border: 5px solid transparent;
-      border-top: 5px solid var(--primary-color, #1890ff);
+      border-top: 5px solid var(--md-sys-color-on-primary-container, #1890ff);
     }
 
     span[checkbox] {
@@ -70,7 +70,7 @@ export class OxGristRendererTree extends OxGristRenderer {
       display: block;
       width: 10px;
       height: 10px;
-      border: 1px solid var(--primary-color, #1890ff);
+      border: 1px solid var(--md-sys-color-on-primary-container, #1890ff);
       border-radius: 2px;
     }
 
@@ -79,8 +79,8 @@ export class OxGristRendererTree extends OxGristRenderer {
     }
 
     span[checkbox][checked='checked']::before {
-      background-color: var(--primary-color, #1890ff);
-      border-color: var(--primary-color, #1890ff);
+      background-color: var(--md-sys-color-on-primary-container, #1890ff);
+      border-color: var(--md-sys-color-on-primary-container, #1890ff);
     }
 
     span[checkbox][checked='checked']::after {
@@ -100,8 +100,8 @@ export class OxGristRendererTree extends OxGristRenderer {
     }
 
     span[checkbox][checked='half-checked']::before {
-      background-color: var(--primary-color, #1890ff);
-      border-color: var(--primary-color, #1890ff);
+      background-color: var(--md-sys-color-on-primary-container, #1890ff);
+      border-color: var(--md-sys-color-on-primary-container, #1890ff);
     }
 
     span[checkbox][checked='half-checked']::after {

package/src/sorters/sorters-control.ts

@@ -30,12 +30,12 @@ export class SortersControl extends LitElement {
         user-select: none;
       }
       [option] md-icon {
-        margin-left: var(--margin-default);
+        margin-left: var(--spacing-medium);
         --md-icon-size: var(--fontsize-large);
-        color: var(--primary-color);
+        color: var(--md-sys-color-on-primary-container);
       }
       [option] sub {
-        color: var(--primary-color);
+        color: var(--md-sys-color-on-primary-container);
       }
     `
   ]

package/stories/accumulator-format.stories.ts

@@ -6,6 +6,7 @@ import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import {
   ColumnConfig,
@@ -188,6 +189,7 @@ export default {
     config: { control: 'object' },
     mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
     urlParamsSensitive: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] },
     withoutSearch: { control: 'boolean' }
   }
 }
@@ -204,6 +206,7 @@ interface ArgTypes {
   urlParamsSensitive: boolean
   withoutSearch: boolean
   fetchHandler: object
+  theme: 'light' | 'dark'
 }
 
 const Template: Story<ArgTypes> = ({
@@ -211,9 +214,17 @@ const Template: Story<ArgTypes> = ({
   mode = 'GRID',
   urlParamsSensitive = false,
   withoutSearch = false,
-  fetchHandler
+  fetchHandler,
+  theme = 'light'
 }: ArgTypes) =>
-  html` <link
+  html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+    <link href="/themes/light.css" rel="stylesheet" />
+    <link href="/themes/dark.css" rel="stylesheet" />
+    <link href="/themes/spacing.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
+
+    <link
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
       rel="stylesheet"
     />
@@ -226,15 +237,19 @@ const Template: Story<ArgTypes> = ({
       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" />
+    <style>
+      ${MDTypeScaleStyles.cssText}
+    </style>
 
     <style>
       ${CommonGristStyles.cssText}
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <script>
+      document.body.classList.add('${theme}')
+    </script>
+
     <style>
       ox-grist {
         height: 600px;

package/stories/barcode-input-filter.stories.ts

@@ -5,6 +5,7 @@ import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { FetchHandler } from '../src/types.js'
 
@@ -121,7 +122,8 @@ export default {
   argTypes: {
     englishOnly: { control: 'boolean' },
     selectAfterChange: { control: 'boolean' },
-    headerFilter: { control: 'boolean' }
+    headerFilter: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -135,10 +137,18 @@ interface ArgTypes {
   englishOnly: boolean
   selectAfterChange: boolean
   headerFilter: boolean
+  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilter }: ArgTypes) =>
-  html` <link
+const Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilter, theme = 'light' }: ArgTypes) =>
+  html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+    <link href="/themes/light.css" rel="stylesheet" />
+    <link href="/themes/dark.css" rel="stylesheet" />
+    <link href="/themes/spacing.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
+
+    <link
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
       rel="stylesheet"
     />
@@ -150,15 +160,20 @@ const Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilte
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
       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" />
+
+    <style>
+      ${MDTypeScaleStyles.cssText}
+    </style>
 
     <style>
       ${CommonGristStyles.cssText}
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <script>
+      document.body.classList.add('${theme}')
+    </script>
+
     <style>
       ox-grist {
         height: 600px;

package/stories/bounded-select-filters.stories.ts

@@ -5,6 +5,8 @@ import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
+
 import { sleep } from '@operato/utils'
 
 import { ColumnConfig, FetchHandler, GristRecord, SelectOption } from '../src/types.js'
@@ -258,7 +260,8 @@ export default {
   title: 'bounded select filters for ox-grist',
   component: 'ox-grist',
   argTypes: {
-    headerFilter: { control: 'boolean' }
+    headerFilter: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -270,10 +273,18 @@ interface Story<T> {
 
 interface ArgTypes {
   headerFilter: boolean
+  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
-  html` <link
+const Template: Story<ArgTypes> = ({ headerFilter, theme = 'light' }: ArgTypes) =>
+  html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+    <link href="/themes/light.css" rel="stylesheet" />
+    <link href="/themes/dark.css" rel="stylesheet" />
+    <link href="/themes/spacing.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
+
+    <link
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
       rel="stylesheet"
     />
@@ -285,15 +296,20 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
       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" />
+
+    <style>
+      ${MDTypeScaleStyles.cssText}
+    </style>
 
     <style>
       ${CommonGristStyles.cssText}
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <script>
+      document.body.classList.add('${theme}')
+    </script>
+
     <style>
       ox-grist {
         height: 600px;
@@ -310,8 +326,8 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
       .fetchHandler=${fetchHandler}
       @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
     >
-      <div slot="headroom">
-        <div id="filters">
+      <div slot="headroom" class="header">
+        <div class="filters">
           <ox-filters-form></ox-filters-form>
         </div>
       </div>

package/stories/bounded-select-record.stories.ts

@@ -5,6 +5,8 @@ import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
+
 import { sleep } from '@operato/utils'
 
 import { ColumnConfig, FetchHandler, FieldEditor, GristRecord, SelectOption } from '../src/types.js'
@@ -261,7 +263,8 @@ export default {
   title: 'bounded select record for ox-grist',
   component: 'ox-grist',
   argTypes: {
-    headerFilter: { control: 'boolean' }
+    headerFilter: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -273,10 +276,18 @@ interface Story<T> {
 
 interface ArgTypes {
   headerFilter: boolean
+  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
-  html` <link
+const Template: Story<ArgTypes> = ({ headerFilter, theme = 'light' }: ArgTypes) =>
+  html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+    <link href="/themes/light.css" rel="stylesheet" />
+    <link href="/themes/dark.css" rel="stylesheet" />
+    <link href="/themes/spacing.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
+
+    <link
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
       rel="stylesheet"
     />
@@ -288,15 +299,20 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
       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" />
+
+    <style>
+      ${MDTypeScaleStyles.cssText}
+    </style>
 
     <style>
       ${CommonGristStyles.cssText}
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <script>
+      document.body.classList.add('${theme}')
+    </script>
+
     <style>
       ox-grist {
         height: 600px;
@@ -313,8 +329,8 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
       .fetchHandler=${fetchHandler}
       @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
     >
-      <div slot="headroom">
-        <div id="filters">
+      <div slot="headroom" class="header">
+        <div class="filters">
           <ox-filters-form></ox-filters-form>
         </div>
       </div>

package/stories/creatable-only-column.stories.ts

@@ -5,6 +5,7 @@ import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { FetchHandler } from '../src/types.js'
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
@@ -152,7 +153,8 @@ export default {
   title: 'creatable only column for ox-grist',
   component: 'ox-grist',
   argTypes: {
-    headerFilter: { control: 'boolean' }
+    headerFilter: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -164,10 +166,18 @@ interface Story<T> {
 
 interface ArgTypes {
   headerFilter: boolean
+  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
-  html` <link
+const Template: Story<ArgTypes> = ({ headerFilter, theme = 'light' }: ArgTypes) =>
+  html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+    <link href="/themes/light.css" rel="stylesheet" />
+    <link href="/themes/dark.css" rel="stylesheet" />
+    <link href="/themes/spacing.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
+
+    <link
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
       rel="stylesheet"
     />
@@ -180,15 +190,19 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
       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" />
+    <style>
+      ${MDTypeScaleStyles.cssText}
+    </style>
 
     <style>
       ${CommonGristStyles.cssText}
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <script>
+      document.body.classList.add('${theme}')
+    </script>
+
     <style>
       ox-grist {
         height: 600px;
@@ -209,31 +223,31 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
         console.log(name, number, chk)
       }}
     >
-      <div slot="headroom">
-        <div id="filters">
+      <div slot="headroom" class="header">
+        <div class="filters">
           <ox-filters-form></ox-filters-form>
-        </div>
 
-        <div id="sorters">
-          Sort
-          <md-icon
-            @click=${(e: Event) => {
-              const target = e.currentTarget as HTMLElement
-              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
-                right: 0,
-                top: target.offsetTop + target.offsetHeight
-              })
-            }}
-            >expand_more</md-icon
-          >
-          <ox-popup id="sorter-control">
-            <ox-sorters-control> </ox-sorters-control>
-          </ox-popup>
+          <div id="sorters">
+            Sort
+            <md-icon
+              @click=${(e: Event) => {
+                const target = e.currentTarget as HTMLElement
+                ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</md-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
+
+          <ox-record-creator id="add" light-popup>
+            <button><md-icon>add</md-icon></button>
+          </ox-record-creator>
         </div>
-
-        <ox-record-creator id="add" light-popup>
-          <button><md-icon>add</md-icon></button>
-        </ox-record-creator>
       </div>
     </ox-grist>`
 

package/stories/default-filters.stories.ts

@@ -5,6 +5,7 @@ import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { FetchHandler } from '../src/types.js'
 
@@ -149,7 +150,8 @@ export default {
   title: 'default filters for ox-grist',
   component: 'ox-grist',
   argTypes: {
-    headerFilter: { control: 'boolean' }
+    headerFilter: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -161,10 +163,18 @@ interface Story<T> {
 
 interface ArgTypes {
   headerFilter: boolean
+  theme?: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
-  html` <link
+const Template: Story<ArgTypes> = ({ headerFilter, theme = 'light' }: ArgTypes) =>
+  html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+    <link href="/themes/light.css" rel="stylesheet" />
+    <link href="/themes/dark.css" rel="stylesheet" />
+    <link href="/themes/spacing.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
+
+    <link
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
       rel="stylesheet"
     />
@@ -176,15 +186,20 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
       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" />
+
+    <style>
+      ${MDTypeScaleStyles.cssText}
+    </style>
 
     <style>
       ${CommonGristStyles.cssText}
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <script>
+      document.body.classList.add('${theme}')
+    </script>
+
     <style>
       ox-grist {
         height: 600px;
@@ -201,26 +216,26 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
       .fetchHandler=${fetchHandler}
       @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
     >
-      <div slot="headroom">
-        <div id="filters">
+      <div slot="headroom" class="header">
+        <div class="filters">
           <ox-filters-form></ox-filters-form>
-        </div>
 
-        <div id="sorters">
-          Sort
-          <md-icon
-            @click=${(e: Event) => {
-              const target = e.currentTarget as HTMLElement
-              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
-                right: 0,
-                top: target.offsetTop + target.offsetHeight
-              })
-            }}
-            >expand_more</md-icon
-          >
-          <ox-popup id="sorter-control">
-            <ox-sorters-control> </ox-sorters-control>
-          </ox-popup>
+          <div id="sorters">
+            Sort
+            <md-icon
+              @click=${(e: Event) => {
+                const target = e.currentTarget as HTMLElement
+                ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</md-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
         </div>
       </div>
     </ox-grist>`