@operato/context 2.0.0-alpha.146 → 2.0.0-alpha.149

package/src/tools/ox-page-title-bar.ts

@@ -17,20 +17,21 @@ export class PageTitleBar extends connect(store)(LitElement) {
         display: flex;
         align-items: center;
 
-        --help-icon-color: var(--primary-text-color);
-        --help-icon-hover-color: var(--secondary-text-color);
+        --help-icon-color: var(--md-sys-color-on-primary-container);
+        --help-icon-hover-color: var(--md-sys-color-primary);
         --help-icon-opacity: 0.2;
         --help-icon-size: 20px;
 
         --md-icon-size: 20px;
 
-        --input-search-padding: var(--padding-narrow);
+        --input-search-padding: var(--spacing-small);
         --input-search-font: normal 14px var(--theme-font);
       }
 
       [titler] {
         display: flex;
-        padding: var(--padding-default) var(--padding-narrow) var(--padding-narrow) var(--padding-narrow);
+        padding: var(--spacing-small);
+        padding-top: var(--spacing-medium);
         font: var(--context-toolbar-title);
         color: var(--title-text-color);
       }
@@ -52,7 +53,7 @@ export class PageTitleBar extends connect(store)(LitElement) {
       }
 
       [search] [help] {
-        color: var(--secondary-color);
+        color: var(--md-sys-color-on-secondary-container);
       }
 
       [search] {
@@ -61,11 +62,11 @@ export class PageTitleBar extends connect(store)(LitElement) {
         align-items: center;
 
         align-self: center;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-on-secondary-container);
         background-color: var(--opacity-light-color);
-        border-radius: 999em;
+        border-radius: var(--md-sys-shape-corner-full);
         margin-left: auto;
-        padding: 0 10px;
+        padding: 0 var(--spacing-medium);
       }
 
       [search] > * {

package/src/tools/ox-title-bar.ts

@@ -16,15 +16,14 @@ export class TitleBar extends connect(store)(LitElement) {
         display: flex;
         align-items: center;
 
-        --help-icon-color: #fff;
-        --help-icon-hover-color: #fff;
+        --help-icon-color: var(--md-sys-color-on-primary);
+        --help-icon-hover-color: var(--md-sys-color-on-primary);
         --help-icon-opacity: 0.2;
         --help-icon-size: 20px;
 
         --md-icon-size: 20px;
 
-        --input-search-padding: 7px;
-        --input-search-border-bottom: none;
+        --input-search-padding: var(--spacing-medium);
         --input-search-focus-border-bottom: none;
         --input-search-font: normal 16px var(--theme-font);
       }
@@ -51,7 +50,7 @@ export class TitleBar extends connect(store)(LitElement) {
       }
 
       [search] [help] {
-        color: var(--secondary-color);
+        color: var(--md-sys-color-on-secondary-container);
       }
 
       [search] {
@@ -60,10 +59,10 @@ export class TitleBar extends connect(store)(LitElement) {
         align-items: center;
 
         align-self: center;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-on-secondary-container);
         background-color: var(--opacity-light-color);
-        border-radius: 999em;
-        padding: 0 10px;
+        border-radius: var(--md-sys-shape-corner-full);
+        padding: 0 var(--spacing-medium);
       }
 
       [search] > * {

package/stories/ox-context-page-toolbar-select-buttons.stories.ts

@@ -8,12 +8,14 @@ import { TOOL_POSITION } from '@operato/layout'
 import '@operato/styles'
 
 import { css, html, render, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-context-page-toolbar select buttons',
   component: 'ox-context-page-toolbar',
   argTypes: {
-    label: { control: 'string' }
+    label: { control: 'string' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -25,112 +27,141 @@ interface Story<T> {
 
 interface ArgTypes {
   label?: string
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/material-theme.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">
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"  rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
+const Template: Story<ArgTypes> = ({ label = '', 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"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
 
   <style>
-    body {
-      background-color: white;
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+
+      padding: 20px;
     }
 
-    ${CommonHeaderStyles.cssText}
+    ox-buttons-radio {
+      padding: 20px;
+    }
   </style>
 
-  <div style="height:600px;">
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
     <div class="header">
-      <div class="title">
-        ${label}
-      </div>
+      <div class="title">${label}</div>
 
       <div class="filters">
-        <label>Filter-X</label><input type="text" name="name"></input>
+        <label>Filter-X</label><input type="text" name="name" />
         <ox-input-select-buttons
-        @change=${(e: Event) => {
-          console.log((e.target as HTMLInputElement).value)
-        }}
-        name="wearables"
-        .value=${'Gloves'}
-        .options=${[
-          { display: 'SHOOSE', value: 'Shoose' },
-          { display: 'CHOTHES', value: 'Clothes' },
-          { display: 'GLOVES', value: 'Gloves' }
-        ]}
-        multiple
-      ></ox-input-select-buttons>
+          @change=${(e: Event) => {
+            console.log((e.target as HTMLInputElement).value)
+          }}
+          name="wearables"
+          .value=${'Gloves'}
+          .options=${[
+            { display: 'SHOOSE', value: 'Shoose' },
+            { display: 'CHOTHES', value: 'Clothes' },
+            { display: 'GLOVES', value: 'Gloves' }
+          ]}
+          multiple
+        ></ox-input-select-buttons>
       </div>
 
-      <ox-context-page-toolbar class="actions" 
-      .tools=${[
-        {
-          position: TOOL_POSITION.FRONT,
-          template: html` <md-icon>download</md-icon> `,
-          context: 'exportable'
-        },
-        {
-          position: TOOL_POSITION.FRONT,
-          template: html` <md-icon>upload</md-icon> `,
-          context: 'importable'
-        },
-        {
-          position: TOOL_POSITION.CENTER,
-          template: html`<ox-page-action-context-bar
-            .actions=${[
-              {
-                title: 'save',
-                action: () => {},
-                icon: 'save'
-              },
-              {
-                title: 'copy',
-                action: () => {},
-                icon: 'content_copy',
-                emphasis: {
-                  outlined: true
-                }
-              },
-              {
-                title: 'edit',
-                action: () => {},
-                icon: 'content_copy',
-                emphasis: {
-                  outlined: true
+      <ox-context-page-toolbar
+        class="actions"
+        .tools=${[
+          {
+            position: TOOL_POSITION.FRONT,
+            template: html` <md-icon>download</md-icon> `,
+            context: 'exportable'
+          },
+          {
+            position: TOOL_POSITION.FRONT,
+            template: html` <md-icon>upload</md-icon> `,
+            context: 'importable'
+          },
+          {
+            position: TOOL_POSITION.CENTER,
+            template: html`<ox-page-action-context-bar
+              .actions=${[
+                {
+                  title: 'save',
+                  action: () => {},
+                  icon: 'save'
+                },
+                {
+                  title: 'copy',
+                  action: () => {},
+                  icon: 'content_copy',
+                  emphasis: {
+                    outlined: true
+                  }
+                },
+                {
+                  title: 'edit',
+                  action: () => {},
+                  icon: 'content_copy',
+                  emphasis: {
+                    outlined: true
+                  }
+                },
+                {
+                  title: 'hoppaang',
+                  action: () => {},
+                  icon: '',
+                  emphasis: {
+                    outlined: true
+                  }
+                },
+                {
+                  title: 'delete',
+                  action: () => {},
+                  icon: 'delete',
+                  emphasis: {
+                    danger: true,
+                    filled: true
+                  }
                 }
-              },
-              {
-                title: 'hoppaang',
-                action: () => {},
-                icon: '',
-                emphasis: {
-                  outlined: true
-                }
-              },
-              {
-                title: 'delete',
-                action: () => {},
-                icon: 'delete',
-                emphasis: {
-                  danger: true,
-                  filled: true
-                }
-              }
-            ]}
-          ></ox-page-action-context-bar>`
+              ]}
+            ></ox-page-action-context-bar>`
+          }
+        ]}
+        .context=${{
+          exportable: true,
+          importable: true,
+          toolbar: false
+        }}
         }
-      ]}
-      .context=${{
-        exportable: true,
-        importable: true,
-        toolbar: false
-      }}
-        
-      }> </ox-context-page-toolbar>
+      >
+      </ox-context-page-toolbar>
     </div>
   </div>
 `

package/stories/ox-context-page-toolbar-select.stories.ts

@@ -1,19 +1,20 @@
 import '@material/web/icon/icon.js'
 import '../src/layouts/ox-context-page-toolbar.js'
 import '../src/tools/ox-page-action-context-bar.js'
-import { CommonHeaderStyles } from '@operato/styles'
 import { TOOL_POSITION } from '@operato/layout'
 import { sleep } from '@operato/utils'
 
 import '@operato/styles'
 
 import { css, html, render, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-context-page-toolbar-select',
   component: 'ox-context-page-toolbar',
   argTypes: {
-    label: { control: 'string' }
+    label: { control: 'string' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -25,79 +26,105 @@ interface Story<T> {
 
 interface ArgTypes {
   label?: string
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/material-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ label = '', theme = 'light' }: ArgTypes) => html`
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"  rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1" 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"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
   <style>
-    body {
-      background-color: white;
+    ${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);
+
+      padding: 20px;
     }
 
-    ${CommonHeaderStyles.cssText}
+    ox-buttons-radio {
+      padding: 20px;
+    }
   </style>
 
-  <div style="height:600px;">
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
     <div class="header">
-      <div class="title">
-        ${label}
-      </div>
-
-      <div class="filters">
-        <label>Filter</label><input type="text"></input>
-      </div>
-
-      <ox-context-page-toolbar class="actions" 
-      .tools=${[
-        {
-          position: TOOL_POSITION.FRONT,
-          template: html` <md-icon>download</md-icon> `,
-          context: 'exportable'
-        },
-        {
-          position: TOOL_POSITION.FRONT,
-          template: html` <md-icon>upload</md-icon> `,
-          context: 'importable'
-        },
-        {
-          position: TOOL_POSITION.CENTER,
-          template: html`<ox-page-action-context-bar
-            .actions=${[
-              {
-                type: 'icon',
-                title: 'favorite',
-                icon: 'favorite',
-                action: async () => {
-                  await sleep(1000)
+      <div class="title">${label}</div>
+
+      <div class="filters"><label>Filter</label><input type="text" /></div>
+
+      <ox-context-page-toolbar
+        class="actions"
+        .tools=${[
+          {
+            position: TOOL_POSITION.FRONT,
+            template: html` <md-icon>download</md-icon> `,
+            context: 'exportable'
+          },
+          {
+            position: TOOL_POSITION.FRONT,
+            template: html` <md-icon>upload</md-icon> `,
+            context: 'importable'
+          },
+          {
+            position: TOOL_POSITION.CENTER,
+            template: html`<ox-page-action-context-bar
+              .actions=${[
+                {
+                  type: 'icon',
+                  title: 'favorite',
+                  icon: 'favorite',
+                  action: async () => {
+                    await sleep(1000)
+                  }
+                },
+                {
+                  title: 'smile',
+                  action: () => {},
+                  select: ['', 'delete', 'hahaha', 'hohoho']
+                },
+                {
+                  title: 'save',
+                  action: () => {},
+                  icon: 'save'
                 }
-              },
-              {
-                title: 'smile',
-                action: () => {},
-                select: ['', 'delete', 'hahaha', 'hohoho']
-              },
-              {
-                title: 'save',
-                action: () => {},
-                icon: 'save'
-              }
-            ]}
-          ></ox-page-action-context-bar>`
-        }
-      ]}
-      .context=${{
-        exportable: true,
-        importable: true,
-        toolbar: false
-      }}
-        
-      }> </ox-context-page-toolbar>
+              ]}
+            ></ox-page-action-context-bar>`
+          }
+        ]}
+        .context=${{
+          exportable: true,
+          importable: true,
+          toolbar: false
+        }}
+      >
+      </ox-context-page-toolbar>
     </div>
   </div>
 `