@operato/styles 8.0.0-beta.0 → 8.0.0-beta.1

package/src/common-grist-styles.ts

@@ -1,135 +0,0 @@
-import { css } from 'lit'
-
-export const CommonGristStyles = css`
-  :host {
-    display: flex;
-
-    width: 100%;
-  }
-
-  ox-grist {
-    flex: 1;
-    overflow-y: auto;
-  }
-
-  [slot='headroom'] {
-    display: flex;
-    flex-direction: row;
-    gap: 0 10px;
-    align-items: center;
-    padding: var(--spacing-small) var(--spacing-medium);
-
-    --md-icon-size: var(--icon-size-medium);
-  }
-
-  [slot='headroom']:empty {
-    padding: 0;
-  }
-
-  #modes {
-    display: flex;
-    gap: var(--spacing-small);
-  }
-
-  #sorters md-icon,
-  #modes md-icon {
-    --md-icon-size: var(--icon-size-small);
-  }
-
-  [slot='setting'] {
-    position: absolute;
-    top: -3px;
-    right: 0;
-  }
-
-  #sorters {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    margin-left: auto;
-    margin-right: var(--spacing-small);
-    padding-left: var(--spacing-tiny);
-    border-bottom: var(--md-sys-color-outline);
-    position: relative;
-    color: var(--md-sys-color-on-secondary-container);
-    font-size: var(--fontsize-default);
-    user-select: none;
-  }
-
-  #sorters > * {
-    padding: var(--spacing-tiny);
-    vertical-align: middle;
-  }
-
-  #modes > * {
-    padding: var(--spacing-tiny);
-    opacity: 0.5;
-    color: var(--md-sys-color-on-primary-container);
-    cursor: pointer;
-  }
-
-  #modes > md-icon[active] {
-    border-radius: 9px;
-    background-color: var(--md-sys-color-surface-variant);
-    opacity: 1;
-    color: var(--md-sys-color-primary);
-    cursor: default;
-  }
-
-  #modes > md-icon:hover {
-    opacity: 1;
-    color: var(--md-sys-color-on-secondary-container);
-  }
-
-  #add {
-    text-align: right;
-  }
-
-  #add button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0px 10px;
-
-    background-color: var(--md-sys-color-tertiary);
-    color: var(--md-sys-color-on-tertiary);
-    border: 0;
-    border-radius: 50%;
-    padding: 5px;
-    width: 30px;
-    height: 30px;
-    cursor: pointer;
-  }
-
-  #add button:hover {
-    background-color: var(--md-sys-color-surface-tint);
-    color: var(--md-sys-color-on-primary);
-    box-shadow: var(--box-shadow);
-  }
-
-  #add button md-icon {
-    font-size: 1.5em;
-  }
-
-  #filters {
-    flex: 1;
-
-    display: flex;
-    align-items: center;
-  }
-
-  #filters > * {
-    margin-right: var(--spacing-small);
-  }
-
-  @media only screen and (max-width: 460px) {
-    [slot='headroom'] {
-      box-shadow: var(--box-shadow);
-      padding: 0;
-    }
-
-    #modes {
-      display: none;
-    }
-  }
-`

package/src/common-header-styles.ts

@@ -1,194 +0,0 @@
-import { css } from 'lit'
-
-export const CommonHeaderStyles = css`
-  .header {
-    display: grid;
-    grid-template-areas:
-      'title actions'
-      'filters filters';
-    gap: var(--spacing-small) var(--spacing-medium);
-    padding: calc(var(--spacing-medium) / 2) var(--spacing-medium);
-
-    align-items: center;
-
-    .title {
-      grid-area: title;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: var(--spacing-small);
-
-      font: var(--subtitle-font);
-      color: var(--md-sys-color-on-secondary-container);
-      text-transform: capitalize;
-    }
-
-    .filters {
-      grid-area: filters;
-      border: none;
-      border-radius: var(--md-sys-shape-corner-small, 5px);
-      background-color: var(--md-sys-color-surface);
-      padding: var(--spacing-medium) var(--spacing-large);
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: var(--spacing-large);
-
-      .filter {
-        display: flex;
-        flex-direction: row;
-
-        align-items: center;
-        gap: var(--spacing-small);
-      }
-
-      label {
-        font: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))
-          var(--fontsize-default) var(--theme-font);
-        color: var(--md-sys-color-primary);
-      }
-    }
-
-    .filters:empty {
-      display: none;
-    }
-
-    .actions {
-      grid-area: actions;
-      margin-left: auto;
-      display: flex;
-      flex-direction: row-reverse;
-      align-items: center;
-      gap: var(--spacing-small);
-
-      * {
-        cursor: pointer;
-      }
-
-      .textbtn,
-      .iconbtn {
-        background-color: var(--md-sys-color-secondary-container);
-        border: var(--button-border);
-        border-radius: var(--button-border-radius);
-
-        color: var(--md-sys-color-on-secondary-container);
-        font: var(--button-font);
-
-        &:hover {
-          border: var(--button-activ-border);
-          background-color: var(--button-activ-background-color);
-          box-shadow: var(--button-active-box-shadow);
-
-          color: var(--md-sys-color-on-secondary);
-        }
-      }
-
-      .iconbtn {
-        line-height: 0.9;
-
-        md-icon {
-          --md-icon-size: var(--icon-size-medium);
-        }
-      }
-
-      button {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: var(--spacing-small);
-        padding: var(--spacing-tiny) var(--spacing-small);
-      }
-    }
-
-    :empty {
-      padding: 0;
-    }
-  }
-
-  .footer {
-    display: flex;
-    flex-direction: row;
-    text-align: right;
-    background-color: var(--md-sys-color-surface-variant);
-    padding: 0;
-
-    button {
-      display: flex;
-      gap: var(--spacing-medium);
-      align-items: center;
-      justify-content: center;
-      padding: var(--spacing-tiny) var(--spacing-medium);
-      background-color: transparent;
-      color: var(--md-sys-color-on-surface);
-      font-size: var(--md-sys-typescale-title-medium-size, 1rem);
-      line-height: 2;
-      border-width: 0;
-      border-radius: 0;
-      border-left: 1px solid var(--md-sys-color-surface);
-    }
-
-    button[ok],
-    button[done] {
-      color: var(--md-sys-color-on-primary);
-      background-color: var(--md-sys-color-primary);
-    }
-
-    [filler] {
-      margin-left: auto;
-    }
-  }
-
-  [danger],
-  button[danger],
-  md-assist-chip[danger] {
-    --md-assist-chip-outline-color: var(--md-sys-color-error);
-    --md-assist-chip-elevated-container-color: var(--md-sys-color-error);
-
-    --md-assist-chip-label-text-color: var(--md-sys-color-on-error);
-    --md-assist-chip-leading-icon-color: var(--md-sys-color-on-error);
-
-    --md-assist-chip-hover-label-text-color: var(--md-sys-color-error);
-    --md-assist-chip-hover-leading-icon-color: var(--md-sys-color-error);
-
-    color: var(--md-sys-color-on-error);
-    background-color: var(--md-sys-color-error);
-    border-color: var(--md-sys-color-error);
-
-    &:hover {
-      --md-assist-chip-outline-color: var(--md-sys-color-error);
-      --md-assist-chip-elevated-container-color: var(--md-sys-color-on-error);
-
-      --md-assist-chip-label-text-color: var(--md-sys-color-error);
-      --md-assist-chip-leading-icon-color: var(--md-sys-color-error);
-
-      color: var(--md-sys-color-error);
-      background-color: var(--md-sys-color-on-error);
-    }
-  }
-
-  @media only screen and (max-width: 460px) {
-    .header {
-      padding: 0;
-      gap: 0;
-
-      grid-template-areas:
-        'actions'
-        'filters';
-
-      .title {
-        display: none;
-      }
-
-      .filters {
-        flex-wrap: wrap;
-        gap: var(--spacing-medium);
-        border: none;
-      }
-
-      .actions {
-        background-color: var(--md-sys-color-on-secondary-container);
-        margin: 0;
-      }
-    }
-  }
-`

package/src/headroom-styles.ts

@@ -1,15 +0,0 @@
-import { css } from 'lit'
-
-export const HeadroomStyles = css`
-  .headroom {
-    transition: transform 200ms linear;
-  }
-
-  .headroom--pinned {
-    transform: translateY(0%);
-  }
-
-  .headroom--unpinned {
-    transform: translateY(-100%);
-  }
-`

package/src/index.ts

@@ -1,7 +0,0 @@
-export * from './headroom-styles'
-export * from './scrollbar-styles'
-export * from './spinner-styles'
-export * from './common-button-styles'
-export * from './common-grist-styles'
-export * from './button-container-styles'
-export * from './common-header-styles'

package/src/scrollbar-styles.ts

@@ -1,32 +0,0 @@
-import { css } from 'lit'
-
-export const ScrollbarStyles = css`
-  ::-webkit-scrollbar {
-    width: var(--scrollbar-width, 5px);
-    height: var(--scrollbar-height, 5px);
-  }
-  ::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-  ::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-thumb-color, var(--md-sys-color-outline));
-    border-radius: var(--scrollbar-thumb-border-radius, 0);
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: var(--scrollbar-thumb-hover-color, var(--md-sys-color-outline-variant));
-  }
-
-  :host::-webkit-scrollbar {
-    width: var(--scrollbar-width, 5px);
-    height: var(--scrollbar-height, 5px);
-  }
-  :host::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-  :host::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-thumb-color, var(--md-sys-color-outline));
-  }
-  :host::-webkit-scrollbar-thumb:hover {
-    background-color: var(--scrollbar-thumb-hover-color, var(--md-sys-color-outline-variant));
-  }
-`

package/src/spinner-styles.ts

@@ -1,32 +0,0 @@
-import { css } from 'lit'
-
-export const SpinnerStyles = css`
-  #spinner {
-    display: none;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-
-    width: 70px;
-    height: 70px;
-    margin: 0 auto;
-    background: var(--oops-spinner-image) 0 0 no-repeat;
-    background-size: 700%;
-    animation: spinner steps(6) 2s infinite both;
-    z-index: 10;
-  }
-
-  #spinner[show] {
-    display: block;
-  }
-
-  @keyframes spinner {
-    0% {
-      background-position: 0%;
-    }
-    100% {
-      background-position: 100%;
-    }
-  }
-`

package/stories/button-container-styles.stories.ts

@@ -1,88 +0,0 @@
-import '@material/web/icon/icon.js'
-import { ButtonContainerStyles } from '../src/button-container-styles.js'
-
-import { css, html, render, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'button-container-styles-pure',
-  component: 'div',
-  argTypes: {}
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {}
-
-const Template: Story<ArgTypes> = ({}: 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>
-    body {
-      width: 100%;
-      height: 500px;
-      text-align: center;
-
-
-      background-color: var(--md-sys-color-background);
-      color: var(--md-sys-color-on-background);
-    }
-
-    .container {
-      padding: var(--spacing-medium);
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-
-    ${MDTypeScaleStyles.cssText}
-    ${ButtonContainerStyles.cssText}
-  </style>
-
-  <div class="container md-typescale-body-medium">
-    <div class="button-container" style="background-color: white;">
-      <button raised><md-icon>save</md-icon>save</button>
-      <button outlined><md-icon>launch</md-icon>remove</button>
-      <button danger><md-icon>delete</md-icon>delete</button>
-    </div>
-
-    <div class="button-container" style="background-color: white;">
-      <button danger><md-icon>cancel</md-icon>cancel</button>
-      <button><md-icon>done</md-icon>confirm</button>
-    </div>
-
-    <div class="button-container" style="background-color: white;margin-left: unset;">
-      <button danger><md-icon>restart_alt</md-icon>reset</button>
-      <div filler></div>
-      <button danger><md-icon>cancel</md-icon>cancel</button>
-      <button><md-icon>done</md-icon>confirm</button>
-    </div>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {}

package/stories/common-header-styles-actions.stories.ts

@@ -1,115 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/context/ox-context-page-toolbar.js'
-
-import { CommonHeaderStyles } from '../src/common-header-styles.js'
-
-import { css, html, render, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'common-header-styles-actions',
-  component: 'div',
-  argTypes: {
-    label: { control: 'string' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  label?: string
-}
-
-const Template: Story<ArgTypes> = ({ label = '' }: 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>
-    body {
-      width: 100%;
-      height: 500px;
-      text-align: center;
-
-      background-color: var(--md-sys-color-background);
-      color: var(--md-sys-color-on-background);
-    }
-
-    .container {
-      padding: var(--spacing-medium);
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-medium);
-    }
-
-    ${MDTypeScaleStyles.cssText}
-    ${CommonHeaderStyles.cssText}
-  </style>
-
-  <div class="container md-typescale-body-medium">
-    <div class="header">
-      <div class="title">${label}</div>
-
-      <div class="filters"><label>Filter</label><input type="text" /></div>
-
-      <ox-context-page-toolbar
-        class="actions"
-        .context=${{
-          exportable: {
-            // name: i18next.t('title.data-set list'),
-            // data: this.exportHandler.bind(this)
-          },
-          importable: {
-            // handler: this.importHandler.bind(this)
-          },
-          actions: [
-            {
-              title: 'save',
-              // action: this._updateDataSet.bind(this),
-              icon: 'save'
-            },
-            {
-              title: 'copy',
-              // action: this._copyDataSet.bind(this),
-              icon: 'content_copy'
-            },
-            {
-              title: 'delete',
-              // action: this._deleteDataSet.bind(this),
-              icon: 'delete'
-            }
-          ],
-          toolbar: false
-        }}
-      >
-      </ox-context-page-toolbar>
-    </div>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  label: 'common header styles'
-}