@things-factory/shell 7.0.1-alpha.104 → 7.0.1-alpha.105

package/client/themes/form-theme.css

@@ -0,0 +1,75 @@
+body {
+  --form-border: none;
+  --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(--md-sys-color-secondary);
+  --form-grid-gap: 12px 5px;
+
+  --legend-padding: var(--spacing-medium) 0;
+  --legend-font: bold 16px var(--theme-font);
+  --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(--md-sys-color-secondary);
+
+  --input-field-border: 1px solid rgba(0, 0, 0, 0.2);
+  --input-field-border-radius: var(--border-radius);
+  --input-field-padding: 2px 9px;
+  --input-field-font: normal 14px var(--theme-font);
+
+  --search-panel-background-color: rgba(0, 0, 0, 0.1);
+  --search-panel-search-iconbutton-size: var(--icon-default-size);
+  --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: 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(--md-sys-color-background);
+  --file-uploader-font: normal 12px/20px var(--theme-font);
+  --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(--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(--md-sys-color-primary);
+}
+
+@media screen and (max-width: 480px) {
+  body {
+    --label-font: normal 15px var(--theme-font);
+  }
+}
+
+@media (min-width: 481px) and (max-width: 1024px) {
+  body {
+    --form-margin: 15px 0;
+    --form-multi-column-max-width: 100%;
+    --form-container-padding: 0 9px 12px 9px;
+    --label-font: normal 14px var(--theme-font);
+    --input-field-font: normal 15px var(--theme-font);
+    --input-field-padding: 3px 5px;
+  }
+}
+
+@media only screen and (max-width: 925px) {
+  body {
+    --form-margin: 14px 0;
+    --form-multi-column-max-width: 100%;
+    --form-container-padding: 0 9px 12px 9px;
+    --input-field-padding: 3px 5px;
+  }
+}

package/client/themes/grist-theme.css

@@ -43,7 +43,7 @@ body {
   --grid-gutter-padding: var(--spacing-tiny) 0;
 
   --grid-record-background-color: var(--md-sys-color-surface-container-lowest);
-  --grid-record-odd-background-color: var(--md-sys-color-primary-container);
+  --grid-record-odd-background-color: var(--md-sys-color-surface-container-low);
   --grid-record-padding: var(--spacing-small) var(--spacing-medium);
   --grid-record-color: var(--md-sys-color-on-surface-variant);
   --grid-record-color-hover: var(--md-sys-color-primary);

package/client/themes/layout-theme.css

@@ -1,8 +1,8 @@
 body {
-  --header-bar-background-color: var(--md-sys-color-primary-container);
+  --header-bar-background-color: var(--md-sys-color-primary);
   --header-bar-icon-size: var(--icon-default-size);
   --header-bar-title: bold 17.5px var(--theme-font);
-  --header-bar-color: var(--md-sys-color-on-primary-container);
+  --header-bar-color: var(--md-sys-color-on-primary);
   --header-bar-height: 45px;
   --header-bar-item-padding: 0px 5px 0 0;
 
@@ -16,12 +16,12 @@ body {
 
   --footer-bar-border-top: 1px solid rgba(0, 0, 0, 0.2);
 
-  --aside-background-color: var(--secondary-background-color);
+  --aside-background-color: var(--md-sys-color-secondary-container);
   --aside-list-textbtton: 18px var(--theme-font);
   --aside-list-icon: var(--icon-default-size);
-  --aside-list-bottom-line: var(--border-dark-color);
+  --aside-list-bottom-line: var(--md-sys-color-outline);
   --aside-list-detail-background-color: #fff;
-  --aside-list-detail-text: 14px var(--primary-background-color);
+  --aside-list-detail-text: 14px var(--md-sys-color-on-secondary-container);
 
   --footer-bar-border-top: 1px solid rgba(0, 0, 0, 0.2);
 
@@ -60,6 +60,11 @@ body {
   --splitter-hover-background-color: rgba(0, 0, 0, 0.1);
 }
 
+.dark {
+  --header-bar-background-color: var(--md-sys-color-inverse-primary);
+  --header-bar-color: var(--md-sys-color-primary);
+}
+
 @media only screen and (max-width: 460px) {
   body {
     --button-container-margin: 0 -15px;

package/client/themes/material-theme.css

@@ -19,4 +19,5 @@ body {
   --md-text-button-container-shape: var(--md-sys-shape-corner-small);
   --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
   --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
+  --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);
 }