@operato/data-grist 7.0.0-rc.5 → 7.0.0-rc.7

package/src/data-grid/data-grid-accum-field.ts

@@ -1,8 +1,6 @@
 import { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { TooltipStyles } from '@operato/styles'
-
 import { ZERO_COLUMN } from '../configure/zero-config'
 import { AccumulatorObject, ColumnConfig, GristRecord } from '../types'
 import { i18next } from '@operato/i18n'
@@ -12,7 +10,6 @@ const DEFAULT_TEXT_ALIGN = 'left'
 @customElement('ox-grid-accum-field')
 export class DataGridAccumField extends LitElement {
   static styles = [
-    TooltipStyles,
     css`
       :host {
         display: flex;
@@ -22,7 +19,7 @@ export class DataGridAccumField extends LitElement {
         position: relative;
 
         white-space: nowrap;
-        background-color: var(--md-sys-color-inverse-primary);
+        background-color: var(--md-sys-color-primary-container);
         border: var(--grid-record-border-bottom);
         border-width: 1px 0;
         padding: var(--spacing-small);

package/src/data-grid/data-grid-body.ts

@@ -6,7 +6,6 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import debounce from 'lodash-es/debounce'
 
-import { TooltipStyles } from '@operato/styles'
 import { sleep, parseToNumberOrNull } from '@operato/utils'
 
 import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
@@ -58,7 +57,6 @@ export class DataGridBody extends LitElement {
   }, THRESHOLD)
 
   static styles = [
-    TooltipStyles,
     dataGridBodyStyle,
     css`
       :host {
@@ -95,7 +93,7 @@ export class DataGridBody extends LitElement {
       }
 
       ox-grid-accum-field[fixed] {
-        background-color: var(--md-sys-color-inverse-primary);
+        background-color: var(--md-sys-color-primary-container);
       }
     `
   ]

package/src/data-grid/data-grid-field.ts

@@ -2,7 +2,6 @@ import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
 // import { guard } from 'lit/directives/guard.js'
 import { customElement, property } from 'lit/decorators.js'
 
-import { TooltipStyles } from '@operato/styles'
 import { TooltipReactiveController } from '@operato/utils'
 
 import { ZERO_COLUMN } from '../configure/zero-config'
@@ -13,7 +12,6 @@ const DEFAULT_TEXT_ALIGN = 'left'
 @customElement('ox-grid-field')
 export class DataGridField extends LitElement {
   static styles = [
-    TooltipStyles,
     css`
       :host {
         display: flex;

package/src/data-grid/data-grid-header.ts

@@ -7,7 +7,6 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 import throttle from 'lodash-es/throttle'
 
 import { OxPopup } from '@operato/popup'
-import { TooltipStyles } from '@operato/styles'
 import { TooltipReactiveController, closestElement } from '@operato/utils'
 
 import { ZERO_COLUMNS, ZERO_DATA } from '../configure/zero-config'
@@ -19,7 +18,6 @@ import { ColumnConfig, FilterConfigObject, FilterValue, GristData, SortersConfig
 export class DataGridHeader extends LitElement {
   static styles = [
     FilterStyles,
-    TooltipStyles,
     css`
       :host {
         position: relative;

package/src/data-list/data-list-field.ts

@@ -3,12 +3,9 @@ import { LitElement, TemplateResult, css, html } from 'lit'
 import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
 import { customElement, property } from 'lit/decorators.js'
 
-import { TooltipStyles } from '@operato/styles'
-
 @customElement('ox-list-field')
 export class DataListField extends LitElement {
   static styles = [
-    TooltipStyles,
     css`
       :host {
         display: flex;

package/src/data-list/record-partial.ts

@@ -98,7 +98,7 @@ export class RecordPartial extends LitElement {
 
       ox-list-field[desc] {
         font: var(--data-list-item-disc-font);
-        color: var(--data-list-item-disc-color, var(--md-sys-color-tertiary));
+        color: var(--data-list-item-disc-color, var(--md-sys-color-on-tertiary-container));
       }
     `
   ]

package/src/filters/filter-styles.ts

@@ -14,18 +14,18 @@ export const FilterStyles = css`
     --ox-filters-input-background-color: transparent;
 
     --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
-    --ox-filters-input-padding: var(--input-padding, 6px 2px);
+    --ox-filters-input-padding: var(--spacing-small, 4px);
 
     --ox-select-padding: var(--ox-filters-input-padding);
     --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);
   }
 
   label {
-    font: var(--ox-filters-label-font);
-    color: var(--ox-filters-label-color, var(--md-sys-color-on-surface));
+    color: var(--ox-filters-label-color, var(--md-sys-color-on-primary-container));
   }
 
   span {
+    font-weight:var(--md-sys-typescale-label-medium-weight);
     text-transform: capitalize;
   }
 

package/themes/dark.css

@@ -1,53 +1,60 @@
 .dark {
-  --md-sys-color-primary: rgb(178 197 255);
-  --md-sys-color-surface-tint: rgb(178 197 255);
-  --md-sys-color-on-primary: rgb(24 46 96);
-  --md-sys-color-primary-container: rgb(49 69 120);
-  --md-sys-color-on-primary-container: rgb(218 226 255);
-  --md-sys-color-secondary: rgb(143 207 243);
-  --md-sys-color-on-secondary: rgb(0 53 73);
-  --md-sys-color-secondary-container: rgb(0 76 104);
-  --md-sys-color-on-secondary-container: rgb(195 232 255);
-  --md-sys-color-tertiary: #cffce3;
-  --md-sys-color-on-tertiary: rgb(0 56 35);
-  --md-sys-color-tertiary-container: #005234;
-  --md-sys-color-on-tertiary-container: #cffce3;
-  --md-sys-color-error: #fbafa9;
-  --md-sys-color-on-error: #fe594e;
-  --md-sys-color-error-container: #fe594e;
-  --md-sys-color-on-error-container: #fbafa9;
-  --md-sys-color-background: rgb(18 19 24);
-  --md-sys-color-on-background: rgb(227 226 233);
-  --md-sys-color-surface: rgb(18 19 24);
-  --md-sys-color-on-surface: rgb(227 226 233);
-  --md-sys-color-surface-variant: rgb(69 70 79);
-  --md-sys-color-on-surface-variant: rgb(197 198 208);
-  --md-sys-color-outline: rgb(143 144 154);
-  --md-sys-color-outline-variant: rgb(69 70 79);
+  --md-sys-color-primary: rgb(77 168 252); /* for header bar bg*/
+  --md-sys-color-surface-tint: rgb(125 208 255);
+  --md-sys-color-on-primary: rgb(0 20 30); /* for header bar font */
+  --md-sys-color-primary-container: rgb(26 40 52);
+  --md-sys-color-on-primary-container: rgb(255 255 255); 
+
+  --md-sys-color-secondary: rgb(179 201 227);
+  --md-sys-color-on-secondary: rgb(28 50 71);
+  --md-sys-color-secondary-container: rgb(41 44 48);
+  --md-sys-color-on-secondary-container: rgb(197 219 246);
+
+  --md-sys-color-tertiary: rgb(148 232 86);
+  --md-sys-color-on-tertiary: rgb(29 68 1);
+  --md-sys-color-tertiary-container: rgb(37 49 27);
+  --md-sys-color-on-tertiary-container: rgb(229 246 217);
+
+  --md-sys-color-error: rgb(248 90 87);
+  --md-sys-color-on-error: rgb(255 234 192);
+  --md-sys-color-error-container: rgb(51 28 27);
+  --md-sys-color-on-error-container: rgb(255 255 255);
+
+  --md-sys-color-background: rgb(21 39 58); /* for content bg */
+  --md-sys-color-on-background: rgb(222 227 227);
+  --md-sys-color-surface: rgb(15 20 20);
+  --md-sys-color-on-surface: rgb(222 227 227);
+  --md-sys-color-surface-variant: rgb(61 73 73); /* for more pannel bg */
+  --md-sys-color-on-surface-variant: rgb(218 236 255);
+
+  --md-sys-color-outline: rgba(255,255,255,.25);
+  --md-sys-color-outline-variant: rgba(255,255,255,.15);
   --md-sys-color-shadow: rgb(0 0 0);
   --md-sys-color-scrim: rgb(0 0 0);
-  --md-sys-color-inverse-surface: rgb(227 226 233);
-  --md-sys-color-inverse-on-surface: rgb(47 48 54);
-  --md-sys-color-inverse-primary: rgb(73 93 146);
-  --md-sys-color-primary-fixed: rgb(218 226 255);
-  --md-sys-color-on-primary-fixed: rgb(0 24 72);
-  --md-sys-color-primary-fixed-dim: rgb(178 197 255);
-  --md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
-  --md-sys-color-secondary-fixed: rgb(195 232 255);
-  --md-sys-color-on-secondary-fixed: rgb(0 30 44);
-  --md-sys-color-secondary-fixed-dim: rgb(143 207 243);
-  --md-sys-color-on-secondary-fixed-variant: rgb(0 76 104);
-  --md-sys-color-tertiary-fixed: #c7e6d5;
-  --md-sys-color-on-tertiary-fixed: rgb(0 33 19);
-  --md-sys-color-tertiary-fixed-dim: #c7e6d5;
-  --md-sys-color-on-tertiary-fixed-variant: rgb(0 82 52);
-  --md-sys-color-surface-dim: rgb(18 19 24);
-  --md-sys-color-surface-bright: rgb(56 57 63);
-  --md-sys-color-surface-container-lowest: rgb(13 14 19);
-  --md-sys-color-surface-container-low: rgb(26 27 33);
-  --md-sys-color-surface-container: rgb(30 31 37);
-  --md-sys-color-surface-container-high: rgb(41 42 47);
-  --md-sys-color-surface-container-highest: rgb(51 52 58);
+  --md-sys-color-inverse-surface: rgb(222 227 227);
+  --md-sys-color-inverse-on-surface: rgb(44 49 49);
+  --md-sys-color-inverse-primary: rgb(53 118 177); /* for header bar bg */
+  
+  --md-sys-color-primary-fixed: rgb(106 183 254);
+  --md-sys-color-on-primary-fixed: rgb(255 255 255);
+  --md-sys-color-primary-fixed-dim: rgb(85 146 203);
+  --md-sys-color-on-primary-fixed-variant: rgba(255, 255, 255,.8);
+  --md-sys-color-secondary-fixed: rgb(59 110 160);
+  --md-sys-color-on-secondary-fixed: rgb(211 233 254); /* for more pannel text color */
+  --md-sys-color-secondary-fixed-dim: rgb(47 88 128); /* for more pannel bg */
+  --md-sys-color-on-secondary-fixed-variant: rgba(211, 233, 254,.8);
+  --md-sys-color-tertiary-fixed: rgb(117 208 57);
+  --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed-dim: rgb(94 166 46);
+  --md-sys-color-on-tertiary-fixed-variant: rgba(255, 255, 255,.8);
+
+  --md-sys-color-surface-dim: rgb(15 20 20);
+  --md-sys-color-surface-bright: rgb(53 58 58);
+  --md-sys-color-surface-container-lowest: rgb(10 15 15);
+  --md-sys-color-surface-container-low: rgb(23 29 29);
+  --md-sys-color-surface-container: rgb(27 33 33);
+  --md-sys-color-surface-container-high: rgb(37 43 43);
+  --md-sys-color-surface-container-highest: rgb(48 54 54);
 
   /* primary palette */
   --md-ref-palette-primary0:#000000;

package/themes/grist-theme.css

@@ -81,7 +81,7 @@ body {
   --data-list-item-name-font: bold 1.1em var(--theme-font, 'Roboto');
   --data-list-item-name-color: var(--md-sys-color-secondary);
   --data-list-item-disc-font: normal 0.9em var(--theme-font, 'Roboto');
-  --data-list-item-disc-color: var(--md-sys-color-tertiary);
+  --data-list-item-disc-color: var(--md-sys-color-on-tertiary-container);
   --data-list-item-etc-label-font: bold 1em/1em var(--theme-font, 'Roboto');
   --data-list-item-etc-font: normal 0.9em/1em var(--theme-font, 'Roboto');
   --data-list-item-etc-color: var(--md-ref-palette-neutral50);
@@ -94,7 +94,7 @@ body {
   --data-list-fab-shadow: var(--box-shadow);
 
   --data-card-background-color: var(--md-sys-color-surface-container);
-  --data-card-record-card-background-color: var(--md-sys-color-surface);
+  --data-card-record-card-background-color: var(--md-sys-color-surface-container-lowest);
   --data-card-record-card-border: var(--grid-container-border-color);
   --data-card-record-card-border-hover: 1px solid var(--md-sys-color-primary);
   --data-card-record-card-boxshadow-hover: 1px 1px 2px 1px rgba(0, 0, 0, 0.15);

package/themes/light.css

@@ -1,53 +1,60 @@
 .light {
-  --md-sys-color-primary: rgb(73 93 146);
-  --md-sys-color-surface-tint: rgb(73 93 146);
-  --md-sys-color-on-primary: rgb(255 255 255);
-  --md-sys-color-primary-container: #e4eaf9;
-  --md-sys-color-on-primary-container: rgb(0 24 72);
-  --md-sys-color-secondary: rgb(27 101 133);
+  --md-sys-color-primary: rgb(46 121 190); /* for header bar bg, auth UI bg, grist header top border, grist header th color, menu icon, menu active */
+  --md-sys-color-surface-tint: rgb(51 149 241);
+  --md-sys-color-on-primary: rgba(255,255,255,.9); /* for header bar font */
+  --md-sys-color-primary-container: rgb(215 231 241);
+  --md-sys-color-on-primary-container: rgb(50 66 82); /* for default text bg */
+
+  --md-sys-color-secondary: rgb(38 59 80);
   --md-sys-color-on-secondary: rgb(255 255 255);
-  --md-sys-color-secondary-container: rgb(195 232 255);
-  --md-sys-color-on-secondary-container: rgb(0 30 44);
-  --md-sys-color-tertiary: rgb(37 106 75);
+  --md-sys-color-secondary-container: rgb(214 222 225);
+  --md-sys-color-on-secondary-container: rgb(63 88 113);
+
+  --md-sys-color-tertiary: rgb(76 187 73);
   --md-sys-color-on-tertiary: rgb(255 255 255);
-  --md-sys-color-tertiary-container: rgb(171 242 201);
-  --md-sys-color-on-tertiary-container: rgb(0 33 19);
-  --md-sys-color-error: #fe594e;
+  --md-sys-color-tertiary-container: rgb(220 241 224);
+  --md-sys-color-on-tertiary-container: rgb(72 148 70);
+
+  --md-sys-color-error: rgb(225 87 87);
   --md-sys-color-on-error: rgb(255 255 255);
-  --md-sys-color-error-container: rgb(255 218 215);
-  --md-sys-color-on-error-container: #fe594e;
-  --md-sys-color-background: rgb(250 248 255);
-  --md-sys-color-on-background: rgb(26 27 33);
-  --md-sys-color-surface: rgb(250 248 255);
-  --md-sys-color-on-surface: rgb(26 27 33);
-  --md-sys-color-surface-variant: rgb(225 226 236);
-  --md-sys-color-on-surface-variant: rgb(69 70 79);
+  --md-sys-color-error-container: rgb(242 226 226);
+  --md-sys-color-on-error-container: rgb(225 87 87);
+
+  --md-sys-color-background: rgb(245 250 250); /* for content bg */
+  --md-sys-color-on-background: var(--md-sys-color-on-primary-container);
+  --md-sys-color-surface: rgb(229 242 254);
+  --md-sys-color-on-surface: var(--md-sys-color-on-primary-container);
+  --md-sys-color-surface-variant: rgb(207 227 246); 
+  --md-sys-color-on-surface-variant: var(--md-sys-color-on-primary-container);
+
   --md-sys-color-outline: rgba(0,0,0,.25);
-  --md-sys-color-outline-variant: rgb(197 198 208);
+  --md-sys-color-outline-variant: rgba(0,0,0,.15);
   --md-sys-color-shadow: rgb(0 0 0);
   --md-sys-color-scrim: rgb(0 0 0);
-  --md-sys-color-inverse-surface: rgb(47 48 54);
-  --md-sys-color-inverse-on-surface: rgb(241 240 247);
-  --md-sys-color-inverse-primary: #c9d4f4;
-  --md-sys-color-primary-fixed: rgb(218 226 255);
-  --md-sys-color-on-primary-fixed: rgb(0 24 72);
-  --md-sys-color-primary-fixed-dim: #c9d4f4;
-  --md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
-  --md-sys-color-secondary-fixed: rgb(195 232 255);
-  --md-sys-color-on-secondary-fixed: rgb(0 30 44);
-  --md-sys-color-secondary-fixed-dim: rgb(143 207 243);
-  --md-sys-color-on-secondary-fixed-variant: rgb(0 76 104);
-  --md-sys-color-tertiary-fixed: #e5f6da;
-  --md-sys-color-on-tertiary-fixed: #005234;
-  --md-sys-color-tertiary-fixed-dim: #c8eabc;
-  --md-sys-color-on-tertiary-fixed-variant: #005234;
-  --md-sys-color-surface-dim: rgb(218 217 224);
-  --md-sys-color-surface-bright: rgb(250 248 255);
+  --md-sys-color-inverse-surface: rgb(35 74 110); 
+  --md-sys-color-inverse-on-surface: rgba(229,246,255,.9); 
+  --md-sys-color-inverse-primary: rgba(51, 149, 241,.25); /* for grist edit cell bg */
+
+  --md-sys-color-primary-fixed: rgb(106 183 254);
+  --md-sys-color-on-primary-fixed: rgb(255 255 255);
+  --md-sys-color-primary-fixed-dim: rgb(85 146 203);
+  --md-sys-color-on-primary-fixed-variant: rgba(255, 255, 255,.8);
+  --md-sys-color-secondary-fixed: rgb(59 110 160);
+  --md-sys-color-on-secondary-fixed: rgb(211 233 254); /* for more pannel text color */
+  --md-sys-color-secondary-fixed-dim: rgb(47 88 128); /* for more pannel bg */
+  --md-sys-color-on-secondary-fixed-variant: rgba(211, 233, 254,.8);
+  --md-sys-color-tertiary-fixed: rgb(117 208 57);
+  --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed-dim: rgb(94 166 46);
+  --md-sys-color-on-tertiary-fixed-variant: rgba(255, 255, 255,.8);
+
+  --md-sys-color-surface-dim: rgb(214 219 218);
+  --md-sys-color-surface-bright: rgb(245 250 250);
   --md-sys-color-surface-container-lowest: rgb(255 255 255);
-  --md-sys-color-surface-container-low: rgb(244 243 250);
-  --md-sys-color-surface-container: rgb(238 237 244);
-  --md-sys-color-surface-container-high: rgb(232 231 239);
-  --md-sys-color-surface-container-highest: rgb(227 226 233);
+  --md-sys-color-surface-container-low: rgb(239 245 244);
+  --md-sys-color-surface-container: rgb(234 239 238);
+  --md-sys-color-surface-container-high: rgb(228 233 232);
+  --md-sys-color-surface-container-highest: rgb(222 227 227);
 
   /* primary palette */
   --md-ref-palette-primary0:#000000;