@operato/data-grist 2.0.0-alpha.99 → 2.0.0-beta.1

package/themes/light-hc.css

@@ -0,0 +1,151 @@
+.light-high-contrast {
+  --md-sys-color-primary: rgb(5 31 81);
+  --md-sys-color-surface-tint: rgb(73 93 146);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(45 65 116);
+  --md-sys-color-on-primary-container: rgb(255 255 255);
+  --md-sys-color-secondary: rgb(0 37 53);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(0 72 99);
+  --md-sys-color-on-secondary-container: rgb(255 255 255);
+  --md-sys-color-tertiary: rgb(0 40 24);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(0 77 49);
+  --md-sys-color-on-tertiary-container: rgb(255 255 255);
+  --md-sys-color-error: #fe594e;
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: #fe594e;
+  --md-sys-color-on-error-container: rgb(255 255 255);
+  --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(0 0 0);
+  --md-sys-color-surface-variant: rgb(225 226 236);
+  --md-sys-color-on-surface-variant: rgb(34 36 43);
+  --md-sys-color-outline: rgb(65 66 75);
+  --md-sys-color-outline-variant: rgb(65 66 75);
+  --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(255 255 255);
+  --md-sys-color-inverse-primary: rgb(232 235 255);
+  --md-sys-color-primary-fixed: rgb(45 65 116);
+  --md-sys-color-on-primary-fixed: rgb(255 255 255);
+  --md-sys-color-primary-fixed-dim: rgb(20 42 92);
+  --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-secondary-fixed: rgb(0 72 99);
+  --md-sys-color-on-secondary-fixed: rgb(255 255 255);
+  --md-sys-color-secondary-fixed-dim: rgb(0 49 68);
+  --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed: rgb(0 77 49);
+  --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed-dim: rgb(0 52 32);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-surface-dim: rgb(218 217 224);
+  --md-sys-color-surface-bright: rgb(250 248 255);
+  --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);
+
+  /* primary palette */
+  --md-ref-palette-primary0:#000000;
+  --md-ref-palette-primary5:#000E32;
+  --md-ref-palette-primary10:#001848;
+  --md-ref-palette-primary15:#00215E;
+  --md-ref-palette-primary20:#002B74;
+  --md-ref-palette-primary25:#002B74;
+  --md-ref-palette-primary30:#0040A2;
+  --md-ref-palette-primary35:#002B74;
+  --md-ref-palette-primary40:#1957CA;
+  --md-ref-palette-primary50:#3E71E5;
+  --md-ref-palette-primary60:#5C8BFF;
+  --md-ref-palette-primary70:#89A9FF;
+  --md-ref-palette-primary80:#B2C5FF;
+  --md-ref-palette-primary90:#DAE2FF;
+  --md-ref-palette-primary95:#EEF0FF;
+  --md-ref-palette-primary98:#FAF8FF;
+  --md-ref-palette-primary99:#FEFBFF;
+  --md-ref-palette-primary100:#FFFFFF;
+
+  /* secondary palette */
+  --md-ref-palette-secondary0:#000000;
+  --md-ref-palette-secondary5:#00131D;
+  --md-ref-palette-secondary10:#001E2C;
+  --md-ref-palette-secondary15:#00293A;
+  --md-ref-palette-secondary20:#003549;
+  --md-ref-palette-secondary25:#004058;
+  --md-ref-palette-secondary30:#004C68;
+  --md-ref-palette-secondary35:#005978;
+  --md-ref-palette-secondary40:#006689;
+  --md-ref-palette-secondary50:#0080AC;
+  --md-ref-palette-secondary60:#009BCF;
+  --md-ref-palette-secondary70:#00B8F4;
+  --md-ref-palette-secondary80:#79D1FF;
+  --md-ref-palette-secondary90:#C3E8FF;
+  --md-ref-palette-secondary95:#E3F3FF;
+  --md-ref-palette-secondary98:#F5FAFF;
+  --md-ref-palette-secondary99:#FBFCFF;
+  --md-ref-palette-secondary100:#FFFFFF;
+
+  /* tertiary palette */
+  --md-ref-palette-tertiary0:#000000;
+  --md-ref-palette-tertiary5:#00150A;
+  --md-ref-palette-tertiary10:#002113;
+  --md-ref-palette-tertiary15:#002C1B;
+  --md-ref-palette-tertiary20:#003823;
+  --md-ref-palette-tertiary25:#00452B;
+  --md-ref-palette-tertiary30:#005234;
+  --md-ref-palette-tertiary35:#005F3E;
+  --md-ref-palette-tertiary40:#006C47;
+  --md-ref-palette-tertiary50:#00885A;
+  --md-ref-palette-tertiary60:#31A372;
+  --md-ref-palette-tertiary70:#51BF8B;
+  --md-ref-palette-tertiary80:#6EDBA5;
+  --md-ref-palette-tertiary90:#A2F4C7;
+  --md-ref-palette-tertiary95:#BFFFD9;
+  --md-ref-palette-tertiary98:#E8FFEF;
+  --md-ref-palette-tertiary99:#F4FFF5;
+  --md-ref-palette-tertiary100:#FFFFFF;
+
+  /* error palette */
+  --md-ref-palette-error0:#000000;
+  --md-ref-palette-error5:#2d0102;
+  --md-ref-palette-error10:#410304;
+  --md-ref-palette-error15:#540507;
+  --md-ref-palette-error20:#68070a;
+  --md-ref-palette-error25:#7d0b0e;
+  --md-ref-palette-error30:#930f14;
+  --md-ref-palette-error35:#a91319;
+  --md-ref-palette-error40:#bc1620;
+  --md-ref-palette-error50:#e03236;
+  --md-ref-palette-error60:#ff5450;
+  --md-ref-palette-error70:#ff8982;
+  --md-ref-palette-error80:#ffb3ad;
+  --md-ref-palette-error90:#ffdad7;
+  --md-ref-palette-error95:#ffedeb;
+  --md-ref-palette-error98:#fff8f7;
+  --md-ref-palette-error99:#fffbff;
+  --md-ref-palette-error100:#FFFFFF;
+
+  /* neutral palette */
+  --md-ref-palette-neutral0:#000000;
+  --md-ref-palette-neutral5:#111111;
+  --md-ref-palette-neutral10:#1C1C1C;
+  --md-ref-palette-neutral15:#262626;
+  --md-ref-palette-neutral20:#313131;
+  --md-ref-palette-neutral25:#3C3C3C;
+  --md-ref-palette-neutral30:#474747;
+  --md-ref-palette-neutral35:#535353;
+  --md-ref-palette-neutral40:#5F5F5F;
+  --md-ref-palette-neutral50:#787878;
+  --md-ref-palette-neutral60:#929292;
+  --md-ref-palette-neutral70:#ACACAC;
+  --md-ref-palette-neutral80:#C8C8C8;
+  --md-ref-palette-neutral90:#E4E4E4;
+  --md-ref-palette-neutral95:#F0F0F0;
+  --md-ref-palette-neutral98:#F9F9F9;
+  --md-ref-palette-neutral99:#FEFEFE;
+  --md-ref-palette-neutral100:#FFFFFF;
+}

package/themes/light-mc.css

@@ -0,0 +1,151 @@
+.light-medium-contrast {
+  --md-sys-color-primary: rgb(45 65 116);
+  --md-sys-color-surface-tint: rgb(73 93 146);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(95 115 170);
+  --md-sys-color-on-primary-container: rgb(255 255 255);
+  --md-sys-color-secondary: rgb(0 72 99);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(56 124 157);
+  --md-sys-color-on-secondary-container: rgb(255 255 255);
+  --md-sys-color-tertiary: rgb(0 77 49);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(61 129 96);
+  --md-sys-color-on-tertiary-container: rgb(255 255 255);
+  --md-sys-color-error: #fe594e;
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(170 95 90);
+  --md-sys-color-on-error-container: rgb(255 255 255);
+  --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(65 66 75);
+  --md-sys-color-outline: rgb(93 95 103);
+  --md-sys-color-outline-variant: rgb(121 122 131);
+  --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: rgb(178 197 255);
+  --md-sys-color-primary-fixed: rgb(95 115 170);
+  --md-sys-color-on-primary-fixed: rgb(255 255 255);
+  --md-sys-color-primary-fixed-dim: rgb(71 90 143);
+  --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-secondary-fixed: rgb(56 124 157);
+  --md-sys-color-on-secondary-fixed: rgb(255 255 255);
+  --md-sys-color-secondary-fixed-dim: rgb(23 99 130);
+  --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed: #9ee4bd;
+  --md-sys-color-on-tertiary-fixed: #005234;
+  --md-sys-color-tertiary-fixed-dim: #9ee4bd;
+  --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-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);
+
+  /* primary palette */
+  --md-ref-palette-primary0:#000000;
+  --md-ref-palette-primary5:#000E32;
+  --md-ref-palette-primary10:#001848;
+  --md-ref-palette-primary15:#00215E;
+  --md-ref-palette-primary20:#002B74;
+  --md-ref-palette-primary25:#002B74;
+  --md-ref-palette-primary30:#0040A2;
+  --md-ref-palette-primary35:#002B74;
+  --md-ref-palette-primary40:#1957CA;
+  --md-ref-palette-primary50:#3E71E5;
+  --md-ref-palette-primary60:#5C8BFF;
+  --md-ref-palette-primary70:#89A9FF;
+  --md-ref-palette-primary80:#B2C5FF;
+  --md-ref-palette-primary90:#DAE2FF;
+  --md-ref-palette-primary95:#EEF0FF;
+  --md-ref-palette-primary98:#FAF8FF;
+  --md-ref-palette-primary99:#FEFBFF;
+  --md-ref-palette-primary100:#FFFFFF;
+
+  /* secondary palette */
+  --md-ref-palette-secondary0:#000000;
+  --md-ref-palette-secondary5:#00131D;
+  --md-ref-palette-secondary10:#001E2C;
+  --md-ref-palette-secondary15:#00293A;
+  --md-ref-palette-secondary20:#003549;
+  --md-ref-palette-secondary25:#004058;
+  --md-ref-palette-secondary30:#004C68;
+  --md-ref-palette-secondary35:#005978;
+  --md-ref-palette-secondary40:#006689;
+  --md-ref-palette-secondary50:#0080AC;
+  --md-ref-palette-secondary60:#009BCF;
+  --md-ref-palette-secondary70:#00B8F4;
+  --md-ref-palette-secondary80:#79D1FF;
+  --md-ref-palette-secondary90:#C3E8FF;
+  --md-ref-palette-secondary95:#E3F3FF;
+  --md-ref-palette-secondary98:#F5FAFF;
+  --md-ref-palette-secondary99:#FBFCFF;
+  --md-ref-palette-secondary100:#FFFFFF;
+
+  /* tertiary palette */
+  --md-ref-palette-tertiary0:#000000;
+  --md-ref-palette-tertiary5:#00150A;
+  --md-ref-palette-tertiary10:#002113;
+  --md-ref-palette-tertiary15:#002C1B;
+  --md-ref-palette-tertiary20:#003823;
+  --md-ref-palette-tertiary25:#00452B;
+  --md-ref-palette-tertiary30:#005234;
+  --md-ref-palette-tertiary35:#005F3E;
+  --md-ref-palette-tertiary40:#006C47;
+  --md-ref-palette-tertiary50:#00885A;
+  --md-ref-palette-tertiary60:#31A372;
+  --md-ref-palette-tertiary70:#51BF8B;
+  --md-ref-palette-tertiary80:#6EDBA5;
+  --md-ref-palette-tertiary90:#A2F4C7;
+  --md-ref-palette-tertiary95:#BFFFD9;
+  --md-ref-palette-tertiary98:#E8FFEF;
+  --md-ref-palette-tertiary99:#F4FFF5;
+  --md-ref-palette-tertiary100:#FFFFFF;
+
+  /* error palette */
+  --md-ref-palette-error0:#000000;
+  --md-ref-palette-error5:#2d0102;
+  --md-ref-palette-error10:#410304;
+  --md-ref-palette-error15:#540507;
+  --md-ref-palette-error20:#68070a;
+  --md-ref-palette-error25:#7d0b0e;
+  --md-ref-palette-error30:#930f14;
+  --md-ref-palette-error35:#a91319;
+  --md-ref-palette-error40:#bc1620;
+  --md-ref-palette-error50:#e03236;
+  --md-ref-palette-error60:#ff5450;
+  --md-ref-palette-error70:#ff8982;
+  --md-ref-palette-error80:#ffb3ad;
+  --md-ref-palette-error90:#ffdad7;
+  --md-ref-palette-error95:#ffedeb;
+  --md-ref-palette-error98:#fff8f7;
+  --md-ref-palette-error99:#fffbff;
+  --md-ref-palette-error100:#FFFFFF;
+
+  /* neutral palette */
+  --md-ref-palette-neutral0:#000000;
+  --md-ref-palette-neutral5:#111111;
+  --md-ref-palette-neutral10:#1C1C1C;
+  --md-ref-palette-neutral15:#262626;
+  --md-ref-palette-neutral20:#313131;
+  --md-ref-palette-neutral25:#3C3C3C;
+  --md-ref-palette-neutral30:#474747;
+  --md-ref-palette-neutral35:#535353;
+  --md-ref-palette-neutral40:#5F5F5F;
+  --md-ref-palette-neutral50:#787878;
+  --md-ref-palette-neutral60:#929292;
+  --md-ref-palette-neutral70:#ACACAC;
+  --md-ref-palette-neutral80:#C8C8C8;
+  --md-ref-palette-neutral90:#E4E4E4;
+  --md-ref-palette-neutral95:#F0F0F0;
+  --md-ref-palette-neutral98:#F9F9F9;
+  --md-ref-palette-neutral99:#FEFEFE;
+  --md-ref-palette-neutral100:#FFFFFF;
+}

package/themes/light.css

@@ -0,0 +1,151 @@
+.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-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-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-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-outline: rgba(0,0,0,.25);
+  --md-sys-color-outline-variant: rgb(197 198 208);
+  --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-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);
+
+  /* primary palette */
+  --md-ref-palette-primary0:#000000;
+  --md-ref-palette-primary5:#000E32;
+  --md-ref-palette-primary10:#001848;
+  --md-ref-palette-primary15:#00215E;
+  --md-ref-palette-primary20:#002B74;
+  --md-ref-palette-primary25:#002B74;
+  --md-ref-palette-primary30:#0040A2;
+  --md-ref-palette-primary35:#002B74;
+  --md-ref-palette-primary40:#1957CA;
+  --md-ref-palette-primary50:#3E71E5;
+  --md-ref-palette-primary60:#5C8BFF;
+  --md-ref-palette-primary70:#89A9FF;
+  --md-ref-palette-primary80:#B2C5FF;
+  --md-ref-palette-primary90:#DAE2FF;
+  --md-ref-palette-primary95:#EEF0FF;
+  --md-ref-palette-primary98:#FAF8FF;
+  --md-ref-palette-primary99:#FEFBFF;
+  --md-ref-palette-primary100:#FFFFFF;
+
+  /* secondary palette */
+  --md-ref-palette-secondary0:#000000;
+  --md-ref-palette-secondary5:#00131D;
+  --md-ref-palette-secondary10:#001E2C;
+  --md-ref-palette-secondary15:#00293A;
+  --md-ref-palette-secondary20:#003549;
+  --md-ref-palette-secondary25:#004058;
+  --md-ref-palette-secondary30:#004C68;
+  --md-ref-palette-secondary35:#005978;
+  --md-ref-palette-secondary40:#006689;
+  --md-ref-palette-secondary50:#0080AC;
+  --md-ref-palette-secondary60:#009BCF;
+  --md-ref-palette-secondary70:#00B8F4;
+  --md-ref-palette-secondary80:#79D1FF;
+  --md-ref-palette-secondary90:#C3E8FF;
+  --md-ref-palette-secondary95:#E3F3FF;
+  --md-ref-palette-secondary98:#F5FAFF;
+  --md-ref-palette-secondary99:#FBFCFF;
+  --md-ref-palette-secondary100:#FFFFFF;
+
+  /* tertiary palette */
+  --md-ref-palette-tertiary0:#000000;
+  --md-ref-palette-tertiary5:#00150A;
+  --md-ref-palette-tertiary10:#002113;
+  --md-ref-palette-tertiary15:#002C1B;
+  --md-ref-palette-tertiary20:#003823;
+  --md-ref-palette-tertiary25:#00452B;
+  --md-ref-palette-tertiary30:#005234;
+  --md-ref-palette-tertiary35:#005F3E;
+  --md-ref-palette-tertiary40:#006C47;
+  --md-ref-palette-tertiary50:#00885A;
+  --md-ref-palette-tertiary60:#31A372;
+  --md-ref-palette-tertiary70:#51BF8B;
+  --md-ref-palette-tertiary80:#6EDBA5;
+  --md-ref-palette-tertiary90:#A2F4C7;
+  --md-ref-palette-tertiary95:#BFFFD9;
+  --md-ref-palette-tertiary98:#E8FFEF;
+  --md-ref-palette-tertiary99:#F4FFF5;
+  --md-ref-palette-tertiary100:#FFFFFF;
+
+  /* error palette */
+  --md-ref-palette-error0:#000000;
+  --md-ref-palette-error5:#2d0102;
+  --md-ref-palette-error10:#410304;
+  --md-ref-palette-error15:#540507;
+  --md-ref-palette-error20:#68070a;
+  --md-ref-palette-error25:#7d0b0e;
+  --md-ref-palette-error30:#930f14;
+  --md-ref-palette-error35:#a91319;
+  --md-ref-palette-error40:#bc1620;
+  --md-ref-palette-error50:#e03236;
+  --md-ref-palette-error60:#ff5450;
+  --md-ref-palette-error70:#ff8982;
+  --md-ref-palette-error80:#ffb3ad;
+  --md-ref-palette-error90:#ffdad7;
+  --md-ref-palette-error95:#ffedeb;
+  --md-ref-palette-error98:#fff8f7;
+  --md-ref-palette-error99:#fffbff;
+  --md-ref-palette-error100:#FFFFFF;
+
+  /* neutral palette */
+  --md-ref-palette-neutral0:#000000;
+  --md-ref-palette-neutral5:#111111;
+  --md-ref-palette-neutral10:#1C1C1C;
+  --md-ref-palette-neutral15:#262626;
+  --md-ref-palette-neutral20:#313131;
+  --md-ref-palette-neutral25:#3C3C3C;
+  --md-ref-palette-neutral30:#474747;
+  --md-ref-palette-neutral35:#535353;
+  --md-ref-palette-neutral40:#5F5F5F;
+  --md-ref-palette-neutral50:#787878;
+  --md-ref-palette-neutral60:#929292;
+  --md-ref-palette-neutral70:#ACACAC;
+  --md-ref-palette-neutral80:#C8C8C8;
+  --md-ref-palette-neutral90:#E4E4E4;
+  --md-ref-palette-neutral95:#F0F0F0;
+  --md-ref-palette-neutral98:#F9F9F9;
+  --md-ref-palette-neutral99:#FEFEFE;
+  --md-ref-palette-neutral100:#FFFFFF;
+}

package/themes/md-typescale-styles.css

@@ -0,0 +1,100 @@
+@layer {
+  .md-typescale-display-small,
+  .md-typescale-display-small-prominent {
+    font: var(--md-sys-typescale-display-small-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-display-small-size, 2.25rem) / var(--md-sys-typescale-display-small-line-height, 2.75rem)
+      var(--md-sys-typescale-display-small-font, var(--md-ref-typeface-brand, 'Roboto'));
+  }
+  .md-typescale-display-medium,
+  .md-typescale-display-medium-prominent {
+    font: var(--md-sys-typescale-display-medium-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-display-medium-size, 2.8125rem) /
+      var(--md-sys-typescale-display-medium-line-height, 3.25rem)
+      var(--md-sys-typescale-display-medium-font, var(--md-ref-typeface-brand, 'Roboto'));
+  }
+  .md-typescale-display-large,
+  .md-typescale-display-large-prominent {
+    font: var(--md-sys-typescale-display-large-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-display-large-size, 3.5625rem) / var(--md-sys-typescale-display-large-line-height, 4rem)
+      var(--md-sys-typescale-display-large-font, var(--md-ref-typeface-brand, 'Roboto'));
+  }
+  .md-typescale-headline-small,
+  .md-typescale-headline-small-prominent {
+    font: var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-headline-small-size, 1.5rem) / var(--md-sys-typescale-headline-small-line-height, 2rem)
+      var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, 'Roboto'));
+  }
+  .md-typescale-headline-medium,
+  .md-typescale-headline-medium-prominent {
+    font: var(--md-sys-typescale-headline-medium-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-headline-medium-size, 1.75rem) /
+      var(--md-sys-typescale-headline-medium-line-height, 2.25rem)
+      var(--md-sys-typescale-headline-medium-font, var(--md-ref-typeface-brand, 'Roboto'));
+  }
+  .md-typescale-headline-large,
+  .md-typescale-headline-large-prominent {
+    font: var(--md-sys-typescale-headline-large-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-headline-large-size, 2rem) / var(--md-sys-typescale-headline-large-line-height, 2.5rem)
+      var(--md-sys-typescale-headline-large-font, var(--md-ref-typeface-brand, 'Roboto'));
+  }
+  .md-typescale-title-small,
+  .md-typescale-title-small-prominent {
+    font: var(--md-sys-typescale-title-small-weight, var(--md-ref-typeface-weight-medium, 500))
+      var(--md-sys-typescale-title-small-size, 0.875rem) / var(--md-sys-typescale-title-small-line-height, 1.25rem)
+      var(--md-sys-typescale-title-small-font, var(--md-ref-typeface-plain, 'Roboto'));
+  }
+  .md-typescale-title-medium,
+  .md-typescale-title-medium-prominent {
+    font: var(--md-sys-typescale-title-medium-weight, var(--md-ref-typeface-weight-medium, 500))
+      var(--md-sys-typescale-title-medium-size, 1rem) / var(--md-sys-typescale-title-medium-line-height, 1.5rem)
+      var(--md-sys-typescale-title-medium-font, var(--md-ref-typeface-plain, 'Roboto'));
+  }
+  .md-typescale-title-large,
+  .md-typescale-title-large-prominent {
+    font: var(--md-sys-typescale-title-large-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-title-large-size, 1.375rem) / var(--md-sys-typescale-title-large-line-height, 1.75rem)
+      var(--md-sys-typescale-title-large-font, var(--md-ref-typeface-brand, 'Roboto'));
+  }
+  .md-typescale-body-small,
+  .md-typescale-body-small-prominent {
+    font: var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-body-small-size, 0.75rem) / var(--md-sys-typescale-body-small-line-height, 1rem)
+      var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, 'Roboto'));
+  }
+  .md-typescale-body-medium,
+  .md-typescale-body-medium-prominent {
+    font: var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-body-medium-size, 0.875rem) / var(--md-sys-typescale-body-medium-line-height, 1.25rem)
+      var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, 'Roboto'));
+  }
+  .md-typescale-body-large,
+  .md-typescale-body-large-prominent {
+    font: var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-body-large-size, 1rem) / var(--md-sys-typescale-body-large-line-height, 1.5rem)
+      var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, 'Roboto'));
+  }
+  .md-typescale-label-small,
+  .md-typescale-label-small-prominent {
+    font: var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500))
+      var(--md-sys-typescale-label-small-size, 0.6875rem) / var(--md-sys-typescale-label-small-line-height, 1rem)
+      var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, 'Roboto'));
+  }
+  .md-typescale-label-medium,
+  .md-typescale-label-medium-prominent {
+    font: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))
+      var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem)
+      var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, 'Roboto'));
+  }
+  .md-typescale-label-medium-prominent {
+    font-weight: var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700));
+  }
+  .md-typescale-label-large,
+  .md-typescale-label-large-prominent {
+    font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))
+      var(--md-sys-typescale-label-large-size, 0.875rem) / var(--md-sys-typescale-label-large-line-height, 1.25rem)
+      var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, 'Roboto'));
+  }
+  .md-typescale-label-large-prominent {
+    font-weight: var(--md-sys-typescale-label-large-weight-prominent, var(--md-ref-typeface-weight-bold, 700));
+  }
+} /*# sourceMappingURL=md-typescale-styles.css.map */

package/themes/spacing.css

@@ -0,0 +1,43 @@
+:root {
+  --spacing-none: 0px;
+  --spacing-tiny: 2px;
+  --spacing-small: 4px;
+  --spacing-medium: 8px;
+  --spacing-large: 12px;
+  --spacing-huge: 24px;
+
+  --icon-size-tiny: 14px;
+  --icon-size-small: 18px;
+  --icon-size-medium: 24px;
+  --icon-size-large: 32px;
+  --icon-size-huge: 48px;
+
+  /* form element height */
+  --form-element-height-tiny: 18px;
+  --form-element-height-small: 24px;
+  --form-element-height-medium: 30px;
+  --form-element-height-large: 40px;
+  --form-element-height-huge: 55px;
+
+  /* shape corner */
+  --md-sys-shape-corner-none: 0px;
+  --md-sys-shape-corner-small: 5px;
+  --md-sys-shape-corner-medium: 10px;
+  --md-sys-shape-corner-large: 30px;
+  --md-sys-shape-corner-full: 999px;
+
+  /* typescale corner */
+  --md-sys-typescale-label-tiny-size: 11px;
+  --md-sys-typescale-label-small-size: 13px;
+  --md-sys-typescale-label-medium-size: 14px;
+  --md-sys-typescale-label-large-size: 18px;
+  --md-sys-typescale-label-huge-size: 24px;
+
+  --md-sys-typescale-label-medium-line-height: 1;
+
+  --md-sys-typescale-label-tiny-weight: 200;
+  --md-sys-typescale-label-small-weight: 300;
+  --md-sys-typescale-label-medium-weight: 500;
+  --md-sys-typescale-label-large-weight: 700;
+  --md-sys-typescale-label-full-weight: 900;
+}

package/themes/state-color.css

@@ -0,0 +1,6 @@
+:root {
+  --status-danger-color: var(--md-sys-color-error, rgb(186 26 26));
+  --status-warning-color: #ee8d03;
+  --status-info-color: #398ace;
+  --status-success-color: #35a24a;
+}

package/dist/stories/accumulator.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"accumulator.stories.js","sourceRoot":"","sources":["../../stories/accumulator.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n  ColumnConfig,\n  FetchHandler,\n  GristClassifier,\n  GristEventHandlerSet,\n  GristRecord,\n  ValidationCallback\n} from '../src/types.js'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n  var total = 25\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(limit! * page! > total ? total % limit! : limit)\n      .fill('')\n      .map((item, idx) => {\n        return {\n          id: String(idx),\n          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n          accval: Math.random(),\n          accval2: Math.round(Math.random() * 15),\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nconst config = {\n  columns: [\n    {\n      type: 'gutter',\n      gutterName: 'dirty'\n    },\n    {\n      type: 'gutter',\n      gutterName: 'sequence'\n    },\n    {\n      type: 'gutter',\n      gutterName: 'row-selector',\n      multiple: true\n    },\n    {\n      type: 'gutter',\n      gutterName: 'button',\n      icon: 'add',\n      title: 'add',\n      handlers: {\n        click: 'record-copy'\n      }\n    },\n    {\n      type: 'string',\n      name: 'id',\n      hidden: true\n    },\n    {\n      type: 'string',\n      name: 'name',\n      label: true,\n      header: 'name',\n      record: {\n        editable: true\n      },\n      filter: 'search',\n      sortable: true,\n      width: 120,\n      fixed: true\n    },\n    {\n      type: 'string',\n      name: 'description',\n      header: {\n        renderer: () => 'description',\n        style: 'text-transform: none;'\n      },\n      filter: 'search',\n      record: {\n        editable: true,\n        align: 'left'\n      },\n      width: 200\n    },\n    {\n      type: 'number',\n      name: 'accval',\n      label: true,\n      header: 'accval',\n      record: {\n        editable: true,\n        align: 'right',\n        defaultValue: 100\n      },\n      accumulator: 'avg',\n      // accumulator: {\n      //   type: 'avg',\n      //   tag: true\n      // },\n      sortable: true,\n      width: 130\n    },\n    {\n      type: 'number',\n      name: 'accval2',\n      label: true,\n      header: 'accval2',\n      record: {\n        editable: true,\n        align: 'right',\n        renderer: (value: any, column: any, record: any) => {\n          return value && Intl.NumberFormat('en-US').format(value)\n        }\n      },\n      accumulator: {\n        type: 'sum',\n        tag: true\n      },\n      sortable: true,\n      width: 130\n    },\n    {\n      type: 'datetime',\n      name: 'updatedAt',\n      header: 'updated at',\n      record: {\n        editable: true,\n        defaultValue: {\n          name: 'now'\n        }\n      },\n      filter: 'between',\n      sortable: true,\n      width: 180\n    },\n    {\n      type: 'datetime',\n      name: 'createdAt',\n      header: 'created at',\n      record: {\n        editable: false\n      },\n      sortable: true,\n      width: 180\n    }\n  ],\n  rows: {\n    selectable: {\n      multiple: false\n    },\n    handlers: {\n      focus: 'select-row'\n    },\n    accumulator: true\n  },\n  sorters: [\n    {\n      name: 'name',\n      desc: true\n    }\n  ],\n  pagination: {\n    pages: [20, 30, 50, 100, 200]\n  }\n}\n\nexport default {\n  title: 'accumulator in ox-grist',\n  component: 'ox-grist',\n  argTypes: {\n    config: { control: 'object' },\n    mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },\n    urlParamsSensitive: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  config: object\n  mode: string\n  urlParamsSensitive: boolean\n  fetchHandler: object\n}\n\nconst Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>\n  html` <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n\n    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <style>\n      ox-grist {\n        height: 600px;\n      }\n\n      ox-filters-form {\n        flex: 1;\n      }\n    </style>\n\n    <ox-grist\n      mode=\"GRID\"\n      .config=${config}\n      .fetchHandler=${fetchHandler}\n      ?url-params-sensitive=${urlParamsSensitive}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n    >\n      <div slot=\"headroom\" class=\"header\">\n        <div class=\"filters\">\n          <ox-filters-form autofocus></ox-filters-form>\n          <ox-record-creator id=\"add\" light-popup>\n            <button><md-icon>add</md-icon></button>\n          </ox-record-creator>\n        </div>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  config,\n  fetchHandler,\n  mode: 'GRID'\n}\n"]}