@operato/input 2.0.0-alpha.99 → 2.0.0-beta.1

package/stories/ox-input-multiple-colors.stories.ts

@@ -1,13 +1,15 @@
 import '../src/ox-input-multiple-colors.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-multiple-colors',
   component: 'ox-input-multiple-colors',
   argTypes: {
     value: { control: 'array' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -19,9 +21,16 @@ interface Story<T> {
 
 interface ArgTypes {
   disabled: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ disabled }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ disabled, 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"
     rel="stylesheet"
@@ -36,160 +45,34 @@ const Template: Story<ArgTypes> = ({ disabled }: ArgTypes) => html`
   />
 
   <style>
-    body {
-      /* theme color */
-      --primary-color-rgb: 56, 162, 91;
-      --primary-color: rgb(var(--primary-color-rgb));
-      --secondary-color-rgb: 71, 97, 114;
-      --secondary-color: rgb(var(--secondary-color-rgb));
-      --focus-color: var(--theme-white-color);
-      --primary-background-color: var(--secondary-color);
-      --secondary-background-color: #183936;
-      --main-section-background-color: #f7f6f4;
-      --theme-white-color: #fff;
-      --theme-black-color: rgba(0, 0, 0, 0.9);
-
-      --focus-background-color: var(--primary-color);
-      --primary-text-color: var(--theme-black-color);
-      --secondary-text-color: #218f62;
-
-      --opacity-dark-color: rgba(0, 0, 0, 0.4);
-      --opacity-light-color: rgba(255, 255, 255, 0.8);
-
-      /* status color */
-      --status-success-color: #35a24a;
-      --status-warning-color: #ee8d03;
-      --status-danger-color: #d14946;
-      --status-info-color: #398ace;
-
-      /* common style */
-      --border-radius: 4px;
-      --border-dark-color: 1px solid rgba(0, 0, 0, 0.15);
-      --border-light-color: 1px solid rgba(255, 255, 255, 0.3);
-
-      --box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);
-
-      --theme-font: 'Noto', Helvetica;
-
-      --margin-default: 9px;
-      --margin-narrow: 4px;
-      --margin-wide: 15px;
-      --padding-default: var(--margin-default);
-      --padding-narrow: var(--margin-narrow);
-      --padding-wide: var(--margin-wide);
-
-      --scrollbar-thumb-color: rgba(57, 78, 100, 0.5);
-      --scrollbar-thumb-hover-color: var(--primary-color);
-
-      --fontsize-default: 14px;
-      --fontsize-small: 13px;
-      --fontsize-large: 16px;
-
-      /* app layout style */
-      --app-grid-template-area: 'header header header' 'nav main aside' 'nav footer aside';
-
-      /* title & description style */
-      --title-margin: var(--margin-narrow) 0;
-      --title-font: bold 24px var(--theme-font);
-      --title-text-color: var(--secondary-color);
-      --title-font-mobile: bold 20px var(--theme-font);
-
-      --page-description-margin: var(--margin-narrow) 0 var(--margin-wide) 0;
-      --page-description-font: normal var(--fontsize-default) / 1.2rem var(--theme-font);
-      --page-description-color: var(--secondary-text-color);
-
-      --subtitle-padding: 12px 5px 3px 5px;
-      --subtitle-font: bold 18px var(--theme-font);
-      --subtitle-text-color: var(--primary-color);
-      --subtitle-border-bottom: 1px solid var(--primary-color);
-
-      /* icon style */
-      --icon-tiny-size: 24px;
-      --icon-default-size: 36px;
-      --icon-big-size: 48px;
-      --icon-default-color: var(--theme-white-color);
-
-      /* material design component themes */
-      --md-theme-on-primary: var(--theme-white-color);
-      --md-theme-primary: var(--secondary-text-color);
-      --md-theme-on-secondary: var(--theme-white-color);
-      --md-theme-secondary: var(--primary-color);
-      --md-button-outline-color: var(--primary-color);
-      --md-danger-button-primary-color: var(--status-danger-color);
-      --md-danger-button-outline-color: var(--status-danger-color);
-      --md-button-outline-width: 1px;
-
-      /* button style */
-      --button-background-color: #fafbfc;
-      --button-background-focus-color: var(--primary-color);
-      --button-border: var(--border-dark-color);
-      --button-border-radius: var(--border-radius);
-      --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;
-      --button-padding: var(--padding-default);
-      --button-color: var(--secondary-color);
-      --button-font: normal 15px var(--theme-font);
-      --button-text-transform: capitalize;
-      --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
-      --button-activ-border: 1px solid var(--primary-color);
-
-      --button-primary-background-color: var(--primary-color);
-      --button-primary-active-background-color: var(--status-success-color);
-      --button-primary-padding: var(--margin-default) var(--margin-wide);
-      --button-primary-color: var(--theme-white-color);
-      --button-primary-font: bold 16px var(--theme-font);
-
-      /* table style */
-      --th-padding: var(--padding-default);
-      --th-border-top: 2px solid var(--secondary-color);
-      --th-text-transform: capitalize;
-      --th-font: bold var(--fontsize-small) var(--theme-font);
-      --th-color: rgba(var(--secondary-color-rgb), 0.8);
-
-      --tr-background-color: var(--theme-white-color);
-      --tr-background-odd-color: rgba(255, 255, 255, 0.4);
-      --tr-background-hover-color: #e1f5fe;
-      --td-border-line: 1px solid rgba(0, 0, 0, 0.05);
-      --td-border-bottom: 1px solid rgba(0, 0, 0, 0.09);
-      --td-padding: var(--padding-default);
-      --td-font: normal 13px var(--theme-font);
-      --td-color: var(--secondary-color);
-
-      --label-cell-background-color: #f6f6f6; /* th or td common background color */
+    ${MDTypeScaleStyles.cssText}
+  </style>
 
-      /* form style */
-      --label-font: normal var(--fontsize-default) var(--theme-font);
-      --label-color: var(--secondary-color);
-      --label-text-transform: capitalize;
-      --input-margin: var(--margin-narrow) 0;
-      --input-padding: 6px 2px;
-      --input-min-width: 200px;
-      --input-font: normal var(--fontsize-default) var(--theme-font);
-      --input-hint-font: normal var(--fontsize-small) var(--theme-font);
-      --input-hint-color: #666;
-      --input-container-max-width: 900px;
-      --fieldset-margin: var(--padding-wide) 0;
-      --fieldset-padding: 0 var(--padding-wide) var(--padding-wide) var(--padding-wide);
-      --legend-padding: var(--padding-default) 0;
-      --legend-color: var(--secondary-text-color);
-      --legend-font: bold 16px var(--theme-font);
-    }
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
 
-    @media only screen and (max-width: 460px) {
-      body {
-        /* subtitle style */
-        --subtitle-margin: 0;
-      }
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <ox-input-multiple-colors
-    .value=${['red', 'yellow']}
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    ?disabled=${disabled}
-  >
-  </ox-input-multiple-colors>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-multiple-colors
+      .value=${['red', 'yellow']}
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      ?disabled=${disabled}
+    >
+    </ox-input-multiple-colors>
+  </div>
 `
 
 export const Regular = Template.bind({})

package/stories/ox-input-options.stories.ts

@@ -1,6 +1,7 @@
 import '../src/ox-input-options.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-options',
@@ -8,7 +9,8 @@ export default {
   argTypes: {
     value: { control: 'object' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -22,10 +24,15 @@ interface ArgTypes {
   name?: string
   value?: object
   disabled?: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'options', value = {}, disabled }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ name = 'options', value = {}, disabled, 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"
@@ -39,20 +46,37 @@ const Template: Story<ArgTypes> = ({ name = 'options', value = {}, disabled }: A
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
+
   <style>
-    body {
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <ox-input-options
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-options>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-options
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-options>
+  </div>
 `
 
 export const Regular = Template.bind({})

package/stories/ox-input-partition-keys.stories.ts

@@ -1,6 +1,7 @@
 import '../src/ox-input-partition-keys.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-partition-keys',
@@ -8,7 +9,8 @@ export default {
   argTypes: {
     value: { control: 'object' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -22,10 +24,20 @@ interface ArgTypes {
   name?: string
   value?: object
   disabled?: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'partition-keys', value = {}, disabled }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({
+  name = 'partition-keys',
+  value = {},
+  disabled,
+  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"
@@ -39,20 +51,37 @@ const Template: Story<ArgTypes> = ({ name = 'partition-keys', value = {}, disabl
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
+
   <style>
-    body {
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <ox-input-partition-keys
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-partition-keys>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-partition-keys
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-partition-keys>
+  </div>
 `
 
 export const Regular = Template.bind({})

package/stories/ox-input-privilege.stories.ts

@@ -2,6 +2,7 @@ import '../src/ox-input-privilege.js'
 import '../src/locale/locale-picker.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-privilege',
@@ -9,7 +10,8 @@ export default {
   argTypes: {
     value: { control: 'number' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -29,10 +31,21 @@ interface ArgTypes {
     super: boolean
   } | null
   disabled?: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'privilege', value = null, privileges, disabled }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({
+  name = 'privilege',
+  value = null,
+  privileges,
+  disabled,
+  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,29 +59,41 @@ const Template: Story<ArgTypes> = ({ name = 'privilege', value = null, privilege
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
+
   <style>
-    body {
-    }
+    ${MDTypeScaleStyles.cssText}
+  </style>
 
-    ox-input-privilege {
-      width: 100%;
-      min-height: 500px;
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <locale-picker></locale-picker>
-  <br /><br />
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <locale-picker></locale-picker>
+    <br /><br />
 
-  <ox-input-privilege
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    .value=${value}
-    .privileges=${privileges}
-    ?disabled=${disabled}
-  >
-  </ox-input-privilege>
+    <ox-input-privilege
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      .privileges=${privileges}
+      ?disabled=${disabled}
+    >
+    </ox-input-privilege>
+  </div>
 `
 
 export const Regular = Template.bind({})

package/stories/ox-input-quantifier.stories.ts

@@ -1,6 +1,7 @@
 import '../src/ox-input-quantifier.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { OxInputQuantifier } from '../src/ox-input-quantifier.js'
 
@@ -10,7 +11,8 @@ export default {
   argTypes: {
     name: { control: 'text' },
     value: { control: 'array' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -24,10 +26,15 @@ interface ArgTypes {
   name?: string
   value?: number[]
   disabled?: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'quantifier', value, disabled }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ name = 'quantifier', value, disabled, 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,13 +49,34 @@ const Template: Story<ArgTypes> = ({ name = 'quantifier', value, disabled }: Arg
     rel="stylesheet"
   />
 
-  <ox-input-quantifier
-    name=${name}
-    .value=${value}
-    @change=${(e: Event) => console.log((e.target as OxInputQuantifier).value)}
-    ?disabled=${disabled}
-  >
-  </ox-input-quantifier>
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      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="container md-typescale-body-large-prominent">
+    <ox-input-quantifier
+      name=${name}
+      .value=${value}
+      @change=${(e: Event) => console.log((e.target as OxInputQuantifier).value)}
+      ?disabled=${disabled}
+    >
+    </ox-input-quantifier>
+  </div>
 `
 
 export const Regular = Template.bind({})

package/stories/ox-input-range.stories.ts

@@ -1,6 +1,7 @@
 import '../src/ox-input-range.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-range',
@@ -11,7 +12,8 @@ export default {
     step: { control: 'number' },
     min: { control: 'number' },
     max: { control: 'number' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -28,6 +30,7 @@ interface ArgTypes {
   min?: number
   max?: number
   disabled?: boolean
+  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -36,9 +39,14 @@ const Template: Story<ArgTypes> = ({
   step = 1,
   min = 0,
   max = 100,
-  disabled
+  disabled,
+  theme = 'light'
 }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <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"
@@ -53,8 +61,29 @@ const Template: Story<ArgTypes> = ({
     rel="stylesheet"
   />
 
-  <ox-input-range name=${name} value=${value} step=${step} min=${min} max=${max} ?disabled=${disabled}>
-  </ox-input-range>
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      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="container md-typescale-body-large-prominent">
+    <ox-input-range name=${name} value=${value} step=${step} min=${min} max=${max} ?disabled=${disabled}>
+    </ox-input-range>
+  </div>
 `
 
 export const Regular = Template.bind({})