@operato/form 2.0.0-alpha.147 → 2.0.0-alpha.149

package/src/components/ox-custom-input.ts

@@ -6,12 +6,11 @@ export class CustomInput extends LitElement {
   static styles = css`
     input {
       margin: auto 0;
-      border-style: var(--form-input-border-style, solid);
-      border-width: var(--form-input-border-width, 1px);
-      border-color: var(--form-input-border-color, #c4c5c6);
-      padding: var(--form-input-padding, 5px);
+      border: 1px solid var(--md-sys-color-outline);
+      padding: 0 var(--spacing-small);
       min-width: var(--form-input-width, 300px);
       max-width: var(--form-input-width, 300px);
+      height:var(--form-element-height-medium);
       outline: var(--form-input-outline, none);
       background-color: var(--form-input-background-color, #fff);
     }

package/src/components/ox-file-uploader.ts

@@ -16,7 +16,7 @@ export class FileUploader extends LitElement {
         text-transform: capitalize;
 
         border: var(--file-uploader-border);
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         font: var(--file-uploader-font) !important;
         color: var(--file-uploader-color);
       }

package/src/components/ox-search-form.ts

@@ -7,6 +7,7 @@ import { css, html, LitElement, nothing, PropertyValues } from 'lit'
 import { customElement, property, query, queryAll, queryAsync } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { until } from 'lit/directives/until.js'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { buildArgs, client } from '@operato/graphql'
 
@@ -43,11 +44,13 @@ function buildOptions(field: SearchFormField, options: SelectOption[]) {
 @customElement('ox-search-form')
 export class OxSearchForm extends LitElement {
   static styles = [
+    MDTypeScaleStyles,
     SearchFormStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
+        padding: var(--spacing-small);
 
         position: relative;
       }
@@ -56,6 +59,23 @@ export class OxSearchForm extends LitElement {
         text-transform: capitalize;
         color: rgba(var(--secondary-color-rgb), 0.5);
       }
+      label {
+        font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
+        color: var(--md-sys-color-primary);
+      }
+      select,
+      input {
+        border: none;
+        border-bottom: var(--ox-filters-input-border, 1px solid var(--md-sys-color-outline));
+        font: var(--ox-filters-input-font);
+      }
+
+      select:focus,
+      input:focus {
+        outline: none;
+        border-bottom: var(--ox-filters-input-focus-border, 1px solid var(--md-ref-palette-primary50));
+        color: var(--ox-filters-input-focus-color, var(--md-sys-color-primary));
+      }
     `
   ]
 
@@ -74,7 +94,7 @@ export class OxSearchForm extends LitElement {
 
     return html`
       <form
-        class="search-form"
+        class="search-form md-typescale-body-medium-prominent"
         @change=${async (e: Event) => {
           const field = e.target as HTMLInputElement
           const name = field?.getAttribute('name')

package/src/filters/filter-input-barcode.ts

@@ -28,6 +28,7 @@ export const FilterInputBarcode: FilterSelectRenderer = (filter, value, owner) =
           })
         )
       }}
+      filter-input
     />
   `
 }

package/src/filters/filter-styles.ts

@@ -2,27 +2,30 @@ import { css } from 'lit'
 
 export const FilterStyles = css`
   :host {
-    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--primary-color));
+    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--md-sys-color-on-surface-variant));
 
-    --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));
-    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--primary-color));
+    --ox-filters-input-border: var(--input-border, 1px solid var(--md-sys-color-outline));
+    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--md-ref-palette-primary50));
     --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));
-    --ox-filters-input-color: var(--input-color, var(--primary-text-color));
-    --ox-filters-input-focus-color: var(--input-focus-color, var(--primary-color));
+    --ox-filters-input-color: var(--input-color, var(--md-sys-color-on-surface));
+    --ox-filters-input-focus-color: var(--input-focus-color, var(--md-sys-color-on-surface-variant));
     --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));
-    --ox-filters-label-color: var(--label-color, var(--primary-text-color));
+    --ox-filters-label-color: var(--label-color, var(--md-sys-color-on-surface));
     --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: 0 var(--spacing-small);
 
     --ox-select-padding: var(--ox-filters-input-padding);
     --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);
+
+    --md-sys-color-on-primary: transparent;
+    --form-element-height-medium: var(--form-element-height-small);
   }
 
   label {
-    font: var(--ox-filters-label-font);
-    color: var(--ox-filters-label-color);
+    font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
+    color: var(--md-sys-color-primary);
   }
 
   span {
@@ -30,28 +33,34 @@ export const FilterStyles = css`
   }
 
   input::placeholder {
-    color: var(--ox-filters-input-placeholder-color);
-    opacity: 0.6;
+    color: var(--ox-filters-input-placeholder-color, var(--md-sys-color-on-surface-variant));
+    opacity: 0.7;
   }
 
-  input {
+  input,
+  ox-input-search,
+  [filter-input] {
     padding: var(--ox-filters-input-padding);
+    height: var(--form-element-height-medium);
   }
 
   ox-select,
-  input {
+  ox-input-search,
+  input,
+  [filter-input] {
     border: none;
-    border-bottom: var(--ox-filters-input-border);
+    border-bottom: var(--ox-filters-input-border, var(--md-sys-color-outline));
     font: var(--ox-filters-input-font);
-    color: var(--ox-filters-input-color);
+    color: var(--ox-filters-input-color, var(--md-sys-color-on-surface-variant));
     background-color: var(--ox-filters-input-background-color, transparent);
   }
 
   ox-select:focus,
-  input:focus {
+  input:focus,
+  [filter-input]:focus {
     outline: none;
     border-bottom: var(--ox-filters-input-focus-border);
-    color: var(--ox-filters-input-focus-color);
+    color: var(--ox-filters-input-focus-color, var(--md-sys-color-primary));
   }
 
   ox-select {
@@ -74,6 +83,11 @@ export const FilterStyles = css`
     max-width: 170px;
   }
 
+  [filter-input] {
+    min-width: 140px;
+    max-width: 170px;
+  }
+
   @media only screen and (max-width: 460px) {
     :host {
       --ox-filters-form-label-font: bold 13px var(--theme-font);

package/src/filters/ox-filters-form-base.ts

@@ -6,6 +6,7 @@ import '@operato/input/ox-input-search.js'
 import json5 from 'json5'
 import { css, html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'
 import { customElement, property, queryAsync, state } from 'lit/decorators.js'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { getDefaultValue } from '@operato/time-calculator'
 import { PagePreferenceProvider } from '@operato/p13n'
@@ -19,10 +20,12 @@ export type QueryFilterRangeValue = [from: number, to: number]
 @customElement('ox-filters-form-base')
 export class OxFiltersFormBase extends LitElement {
   static styles = [
+    MDTypeScaleStyles,
     FilterStyles,
     css`
       :host {
         display: flex;
+        padding: var(--spacing-small);
       }
 
       form {
@@ -30,13 +33,13 @@ export class OxFiltersFormBase extends LitElement {
 
         display: flex;
         flex-flow: row wrap;
-        gap: var(--ox-filters-form-gap);
+        gap: var(--spacing-medium) var(--spacing-large);
       }
 
       form > * {
         display: flex;
         align-items: center;
-        gap: var(--input-intra-gap, 7px);
+        gap: var(--spacing-small, 4px);
       }
 
       label span {
@@ -127,6 +130,7 @@ export class OxFiltersFormBase extends LitElement {
   render(): TemplateResult {
     return html`
       <form
+        class="md-typescale-body-medium-prominent"
         @submit=${(e: Event) => {
           e.preventDefault()
         }}

package/src/styles/multi-column-form-styles.ts

@@ -23,7 +23,7 @@ export const MultiColumnFormStyles = css`
 
     padding: var(--legend-padding);
     font: var(--legend-font);
-    color: var(--legend-text-color);
+    color: var(--legend-text-color, var(--md-sys-color-on-surface-variant));
     border-bottom: var(--legend-border-bottom);
   }
 
@@ -33,7 +33,7 @@ export const MultiColumnFormStyles = css`
     text-transform: capitalize;
     align-self: center;
 
-    color: var(--label-color);
+    color: var(--label-color, var(--md-sys-color-on-surface));
     font: var(--label-font);
   }
 
@@ -72,7 +72,7 @@ export const MultiColumnFormStyles = css`
     grid-column: span 9 / auto;
 
     font: var(--form-sublabel-font);
-    color: var(--form-sublabel-color);
+    color: var(--form-sublabel-color, var(--md-sys-color-on-surface));
   }
   .multi-column-form [options-wrap] {
     grid-column: span 21 / auto;
@@ -80,7 +80,7 @@ export const MultiColumnFormStyles = css`
 
   input:focus {
     outline: none;
-    border: 1px solid var(--focus-background-color);
+    border: 1px solid var(--focus-background-color, var(--md-sys-color-surface-variant));
   }
   input[type='checkbox'] {
     margin: 0;
@@ -109,7 +109,7 @@ export const MultiColumnFormStyles = css`
     .multi-column-form [custom-input] {
       grid-column: span 8 / auto;
       max-width: initial;
-      padding: var(--padding-default);
+      padding: var(--padding-default, var(--spacing-medium));
       font: normal 15px var(--theme-font);
     }
     .multi-column-form input[type='checkbox'],
@@ -131,7 +131,7 @@ export const MultiColumnFormStyles = css`
     .multi-column-form [options-wrap] {
       grid-column: span 12 / auto;
       display: grid;
-      grid-gap: var(--padding-default) var(--padding-narrow);
+      grid-gap: var(--padding-default, var(--spacing-small)) var(--padding-narrow, var(--spacing-small));
       grid-template-columns: repeat(12, 1fr);
     }
     .multi-column-form [options-wrap] input[type='checkbox'] + label,

package/src/styles/search-form-styles.ts

@@ -3,17 +3,15 @@ import { css } from 'lit'
 export const SearchFormStyles = css`
   :host {
     overflow: auto;
-    background-color: var(--search-form-background-color);
+    background-color: transparent;
   }
 
   .search-form {
     position: relative;
     display: grid;
     grid-template-columns: repeat(24, 1fr);
-    grid-gap: var(--form-grid-gap);
+    grid-gap: var(--form-grid-gap, var(--spacing-medium));
     grid-auto-rows: minmax(24px, auto);
-    padding: var(--search-form-box-padding);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
   .search-form label {
     grid-column: span 3;
@@ -21,8 +19,8 @@ export const SearchFormStyles = css`
     align-self: center;
     text-transform: capitalize;
 
-    color: var(--label-color);
-    font: var(--label-font);
+    font-size:var(--md-sys-typescale-label-medium-size, 0.75rem);
+    color: var(--md-sys-color-on-primary-container);
   }
 
   .search-form input,
@@ -30,12 +28,13 @@ export const SearchFormStyles = css`
     grid-column: span 9;
 
     border: var(--input-field-border);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: var(--input-field-border-radius);
-    padding: var(--input-field-padding);
+    padding: var(--input-field-padding, var(--spacing-tiny));
     font: var(--input-field-font);
     max-width: 85%;
-    color: var(--input-field-color);
-    background-color: var(--input-field-background-color);
+    color: var(--input-field-color, var(--md-sys-color-on-surface));
+    background-color: transparent;
   }
 
   .search-form select {
@@ -60,13 +59,13 @@ export const SearchFormStyles = css`
     grid-column: span 9 / auto;
 
     font: var(--form-sublabel-font);
-    color: var(--form-sublabel-color);
+    color: var(--form-sublabel-color, var(--md-sys-color-on-surface-variant));
   }
 
   input:focus {
     outline: none;
-    border: 1px solid var(--focus-background-color);
   }
+
   input[type='checkbox'] {
     margin: 0;
   }
@@ -75,14 +74,14 @@ export const SearchFormStyles = css`
     position: absolute;
     right: 1%;
     bottom: 15px;
-    color: var(--search-form-icon-color);
+    color: var(--search-form-icon-color, var(--md-sys-color-on-surface));
   }
 
   @media screen and (max-width: 460px) {
     .search-form {
       grid-template-columns: repeat(12, 1fr);
-      grid-gap: 10px 5px;
-      background-color: var(--search-form-narrow-background-color);
+      grid-gap: var(--spacing-medium) var(--spacing-medium);
+      background-color: transparent
 
       max-height: 100%;
       overflow-y: auto;
@@ -91,13 +90,13 @@ export const SearchFormStyles = css`
       grid-column: span 3;
       padding-right: 5px;
       align-self: center;
-      color: var(--search-form-narrow-text-color);
+      color: var(--search-form-narrow-text-color, var(--md-sys-color-on-surface));
     }
     .search-form input,
     .search-form select {
       grid-column: span 8;
       max-width: 100%;
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-surface, var(--md-sys-color-on-surface));
     }
     .search-form input[type='checkbox'],
     .search-form input[type='radio'] {
@@ -112,12 +111,12 @@ export const SearchFormStyles = css`
       align-self: center;
       position: relative;
       left: 5px;
-      color: var(--search-form-narrow-text-color);
+      color: var(--search-form-narrow-text-color, var(--md-sys-color-on-surface));
     }
 
     [search] {
       right: 3%;
-      color: var(--search-form-narrow-text-color);
+      color: var(--search-form-narrow-text-color, var(--md-sys-color-on-surface));
     }
   }
   @media (min-width: 461px) and (max-width: 1024px) {

package/src/styles/single-column-form-styles.ts

@@ -24,7 +24,7 @@ export const SingleColumnFormStyles = css`
 
     padding: var(--legend-padding);
     font: var(--legend-font);
-    color: var(--legend-text-color);
+    color: var(--legend-text-color, var(--md-sys-color-on-surface-variant));
     border-bottom: var(--legend-border-bottom);
   }
 
@@ -33,7 +33,7 @@ export const SingleColumnFormStyles = css`
     text-align: right;
     text-transform: capitalize;
 
-    color: var(--label-color);
+    color: var(--label-color, var(--md-sys-color-on-surface));
     font: var(--label-font);
   }
 
@@ -66,12 +66,12 @@ export const SingleColumnFormStyles = css`
     grid-column: span 9 / auto;
 
     font: var(--form-sublabel-font);
-    color: var(--form-sublabel-color);
+    color: var(--form-sublabel-color, var(--md-sys-color-on-surface));
   }
 
   input:focus {
     outline: none;
-    border: 1px solid var(--focus-background-color);
+    border: 1px solid var(--focus-background-color, var(--md-sys-color-surface-variant));
   }
   input[type='checkbox'] {
     margin: 0;
@@ -94,7 +94,7 @@ export const SingleColumnFormStyles = css`
     .single-column-form [custom-input] {
       grid-column: span 12;
 
-      padding: var(--padding-default);
+      padding: var(--padding-default, var(--spacing-medium));
       font: normal 15px var(--theme-font);
     }
     .single-column-form input[type='checkbox'],

package/stories/ox-filters-form-barcode.stories.ts

@@ -2,6 +2,7 @@ import { CommonHeaderStyles } from '@operato/styles'
 import '../src/filters/ox-filters-form-base.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-filters-form-barcode',
@@ -9,7 +10,8 @@ export default {
   argTypes: {
     value: { control: 'object' },
     filters: { control: 'object' },
-    urlParamsSensitive: { control: 'boolean' }
+    urlParamsSensitive: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -23,11 +25,15 @@ interface ArgTypes {
   value?: object
   filters?: object
   urlParamsSensitive: boolean
+  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/form-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive, 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="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -42,14 +48,35 @@ const Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTy
     rel="stylesheet"
   />
 
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    ${CommonHeaderStyles.cssText}
+  </style>
+
   <style>
     body {
+      width: 100%;
       height: 500px;
+      text-align: center;
+
+      background-color: var(--md-sys-color-background);
+      color: var(--md-sys-color-on-background);
     }
 
-    ${CommonHeaderStyles.cssText}
+    .header {
+      padding: var(--spacing-small) var(--spacing-medium);
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
   </style>
 
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
   <div class="header">
     <div class="filters">
       <ox-filters-form-base

package/stories/ox-filters-form-base-bounded.stories.ts

@@ -3,6 +3,8 @@ import { sleep } from '@operato/utils'
 import '../src/filters/ox-filters-form-base.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
+
 import { OxFiltersFormBase, FilterConfig, FilterValue } from '../src/index.js'
 
 export default {
@@ -11,7 +13,8 @@ export default {
   argTypes: {
     value: { control: 'object' },
     filters: { control: 'object' },
-    urlParamsSensitive: { control: 'boolean' }
+    urlParamsSensitive: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -25,12 +28,15 @@ interface ArgTypes {
   value?: FilterValue[]
   filters?: FilterConfig[]
   urlParamsSensitive: boolean
+  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/form-theme.css" rel="stylesheet" />
-  <link href="/themes/input-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive, 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="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -46,33 +52,34 @@ const Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTy
   />
 
   <style>
-    body {
-      height: 500px;
-    }
+    ${MDTypeScaleStyles.cssText}
   </style>
 
   <style>
-    ox-filters-form-base {
-      --input-gap-vertical: 8px;
-      --input-gap-horizontal: 16px;
-
-      --ox-filters-input-placeholder-color: var(--primary-color);
-
-      --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
-      --ox-filters-input-focus-border: 1px solid var(--primary-color);
-      --ox-filters-input-font: normal 14px var(--theme-font);
-      --ox-filters-input-color: var(--primary-text-color);
-      --ox-filters-input-focus-color: var(--primary-color);
-      --ox-filters-label-font: normal 14px var(--theme-font);
-      --ox-filters-label-color: var(--primary-text-color);
-
-      --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
-      --ox-filters-input-padding: 6px 2px;
+    ${CommonHeaderStyles.cssText}
+  </style>
+
+  <style>
+    body {
+      width: 100%;
+      height: 500px;
+      text-align: center;
+
+      background-color: var(--md-sys-color-background);
+      color: var(--md-sys-color-on-background);
     }
 
-    ${CommonHeaderStyles.cssText}
+    .header {
+      padding: var(--spacing-medium);
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
   </style>
 
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
   <div class="header">
     <div class="filters">
       <ox-filters-form-base