@spectric/ui 0.0.4

package/src/components/Page.ts

@@ -0,0 +1,157 @@
+import { CSSResultGroup, html, LitElement } from 'lit';
+
+import { HeaderEventMap, HeaderProps, HeaderSlots } from './Header';
+import { BannerEventMap, BannerProps } from './Banner';
+import "./Banner"
+import styles from './page.css';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { spreadProps } from '../utils/spread';
+import { Classifications, ClassificationVariants } from './configurations/classifications';
+import { ClassificationStyles } from './configurations/classifications';
+import { KnownThemes, ThemeEventMap } from './ThemeProvider';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './types';
+
+
+export interface PageBanners {
+  classification?: { type: Classifications, text: string }
+  notifications?: BannerProps[]
+}
+export interface PageProps extends HeaderProps {
+  theme?: KnownThemes
+  showHeader?: boolean
+  /** Will control if the top navbar will stay at the top or scroll with the main content */
+  headerSticky?: boolean
+  classificationLevel?: Classifications
+  /** Overrides the default classification banner text */
+  classificationText: string
+  notifications?: BannerProps[]
+}
+
+export interface PageSlots extends HeaderSlots {
+  /** @description Application Main Conent */
+  content?: Node | TemplateStringsArray | string
+}
+
+
+
+/**
+ * Spectric page is a basic component that will put all content into an area that expands to fill the whole screen. It calculates the size of the banners and headers for you.
+ * 
+ * It exposes css properties to style all the spectric compenents  contained within
+ * 
+ * This component does not fire any events directly but sub components do. See HeaderEventMap & ThemeEventMap & BannerEventMap for full list of events
+ * @slot - Main content
+ * @slot content - Main content
+ * @slot name - Main name of the application
+ * @slot branding - Slot to the left of the title typically used for app icons, and/or dropdown navigation menus.
+ * @slot center - Slot in the center of the header.
+ * @slot end - slot right of login/out buttons
+ * @cssprop [--primary=#1ea7fd] - primary color
+ * @cssprop [--secondary=#1ea7fd] - secondary color
+ * @cssprop [--tertiary=#1ea7fd] - tertiary color
+ * @cssprop [--disabled=#1ea7fd] - disabled color
+ * @cssprop [--text-primary=#1ea7fd] - text colors
+ * @cssprop [--text-secondary=#1ea7fd] - text colors
+ * @cssprop [--text-on-color=#ffffff] - color of text on color
+ * @cssprop [--background=#1ea7fd] - background color
+ * @cssprop [--background-inverse=#f4f4f4] - Even Panel colors
+ * @cssprop [--border-radius=0.4em] - sets global border radius
+ * @see  Events {@link SpectricEventsMaps}
+ */
+@customElement("spectric-page")
+export class SpectricPage extends LitElement implements PageProps {
+  static styles?: CSSResultGroup | undefined = styles;
+
+  @property({ type: Boolean, reflect: true }) showHeader: boolean = true;
+  @property({ type: Boolean, reflect: true }) headerSticky: boolean = true;
+  @property({ type: String, reflect: true }) classificationLevel?: Classifications = ClassificationVariants.None;
+  @property({ type: String, reflect: true }) classificationText: string = "";
+  @property({ type: Array, reflect: true }) notifications: BannerProps[] = [];
+  @property({ type: Boolean, reflect: true }) showCreateAccount: boolean = false;
+  @property({ type: Boolean, reflect: true }) showLoginButton: boolean = true;
+  @property({ type: String, reflect: true }) username: string = "";
+  /** If a theme other than light is provided that will be used ad css properties will be ignored */
+  @property({ type: String, reflect: true }) theme?: KnownThemes
+  // protected createRenderRoot(): HTMLElement | DocumentFragment {
+  //   return this
+  // }
+  protected render() {
+    if (this.classificationLevel && !ClassificationStyles[this.classificationLevel]) {
+      console.warn("Unknown classification", this.classificationLevel)
+      this.classificationLevel = ClassificationVariants.None
+    }
+    const classificationText = this.classificationLevel ? this.classificationText || ClassificationStyles[this.classificationLevel].content : ""
+    const header = this.showHeader ? html`<spectric-header ?showCreateAccount=${this.showCreateAccount} .showLoginButton=${this.showLoginButton} username=${ifDefined(this.username)}>
+    <slot name="branding" slot="branding"></slot>
+    <slot name="name" slot="name"></slot>
+    <slot name="center" slot="center"></slot>
+    <slot name="end" slot="end"></slot>
+  </spectric-header>`: null
+    return html`
+    ${this.classificationLevel && classificationText ? html`
+    <!-- Classification Banner -->
+    <spectric-banner ${spreadProps({ text: classificationText, headerStyle: ClassificationStyles[this.classificationLevel] })}></spectric-banner>
+      `
+        : null}
+      <spectric-theme theme=${ifDefined(this.theme)}>
+      ${this.notifications ? this.notifications.map((n) => {
+          return html`<spectric-banner ${spreadProps(n)} ></spectric-banner>`
+        }) : null}
+      ${this.headerSticky ? header : null}
+      <article>
+      ${this.headerSticky ? null : header}
+      <section class="spectric-page">
+        <slot name="content"></slot>
+        <slot></slot>
+      </section>
+    </article>
+  </spectric-theme>
+  ${this.classificationLevel && classificationText ?
+        html`<spectric-banner ${spreadProps({ text: classificationText, headerStyle: ClassificationStyles[this.classificationLevel] })}></spectric-banner>` :
+        null
+      }
+
+  `
+  }
+}
+
+// let p = document.createElement("spectric-page")
+// p.addEventListener("theme-change",(e)=>{
+
+// })
+// let t = document.createElement("spectric-theme")
+// t.addEventListener("theme-change",(e)=>{})
+// interface SpectricEventsMaps extends HeaderEventMap,ThemeEventMap,BannerEventMap {
+
+// }
+type SpectricEventsMaps = HeaderEventMap & ThemeEventMap & BannerEventMap
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /**
+     * {@link SpectricPage}
+     */
+    "spectric-page": HTMLElementTagWithEvents<SpectricPage, SpectricEventsMaps>
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * {@link SpectricPage}
+       */
+      "spectric-page": ReactElementWithPropsAndEvents<SpectricPage, PageProps, SpectricEventsMaps>;
+    }
+  }
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        /**
+         * {@link SpectricPage}
+         */
+        "spectric-page": ReactElementWithPropsAndEvents<SpectricPage, PageProps, SpectricEventsMaps>;
+      }
+    }
+  }
+}
+

package/src/components/Panel.ts

@@ -0,0 +1,56 @@
+import { CSSResultGroup, html, LitElement } from 'lit';
+import styles from './panel.css.ts';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+
+
+
+
+/**
+ * Spectric Panel visually seperates content areas and automatically adjusts the component colors that are nested inside.
+ *  */
+@customElement("spectric-panel")
+export class SpectricPanel extends LitElement {
+  static styles?: CSSResultGroup | undefined = styles;
+
+  /**
+   * Specify the layer level and override any existing levels based on hierarchy
+   */
+  @property({ type: Number, reflect: true })
+  level = 0;
+
+  @property({ attribute: false })
+  layers?: NodeListOf<SpectricPanel>;
+
+  updated() {
+    if (!this.layers) {
+      this.layers = this.querySelectorAll(
+        "spectric-panel"
+      );
+    }
+
+    this.layers.forEach((item: SpectricPanel) => {
+      (item).setAttribute(
+        'level',
+        ((this.level + 1) % 4).toString()
+      );
+    });
+
+    this.dispatchEvent(
+      new CustomEvent("use-layer", {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail: {
+          layer: this,
+          level: this.level,
+        },
+      })
+    );
+  }
+
+  render() {
+    return html` <slot></slot> `;
+  }
+
+}

package/src/components/ThemeProvider.ts

@@ -0,0 +1,251 @@
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './types';
+
+
+
+export interface CSSProps {
+    "--primary": string,
+    "--secondary": string,
+    "--tertiary": string,
+    "--disabled": string,
+    "--background": string,
+    "--background-inverse": string,
+    "--text-primary": string
+    "--text-secondary": string
+    "--text-on-color": string
+    "--border-radius": string
+}
+type InputType = {
+    control: "color" | "text"
+}
+export const CSSPropsControls: Record<keyof CSSProps, InputType> = {
+    "--primary": { control: "color" },
+    "--secondary": { control: "color" },
+    "--tertiary": { control: "color" },
+    "--disabled": { control: "color" },
+    "--background": { control: "color" },
+    "--background-inverse": { control: "color" },
+    "--text-primary": { control: "color" },
+    "--text-secondary": { control: "color" },
+    "--text-on-color": { control: "color" },
+    "--border-radius": { control: "text" },
+}
+const dark = {
+    "--secondary": "#77878b",
+    "--tertiary": "#c7c7c7",
+    "--disabled": "#000000",
+    "--text-primary": "#cccccc",
+    "--text-secondary": "#cccccc",
+    "--text-on-color": "#ededed",
+    "--background": "#181818",
+    "--background-inverse": "#37373d",
+}
+const spectric = {
+    ...dark,
+    "--primary": "#ffd45a",
+    "--text-on-color": "#4f4f4f",
+}
+const Themes = {
+    undefined: {},
+    light: {},
+    dark,
+    spectric,
+    spectricFlat: {
+        ...spectric,
+        "--border-radius": "1px",
+    }
+} as const
+export type KnownThemes = keyof typeof Themes
+
+export const ThemeSelections = Object.fromEntries(Object.keys(Themes).map(k => [k, k])) as { [k in keyof typeof Themes]: k }
+
+type ThemeProps = {
+    theme?: KnownThemes
+}
+
+
+const theme = `
+    --spectric-background: var(--background,#ffffff);
+    --spectric-background-hover:var(--background-hover,rgba(141, 141, 141, 0.12));
+    --spectric-background-inverse: var(--background-inverse,#f4f4f4);
+    --spectric-background-inverse-hover: var(--background-inverse-hover,#474747);
+    --spectric-border-radius: var(--border-radius,.4em);
+    --spectric-primary:var(--primary,#1ea7fd);
+    --spectric-secondary: var(--secondary,#77878b);
+    --spectric-tertiary: var(--tertiary,#0f62fe);
+    --spectric-disabled: var(--disabled,#c6c6c6);
+
+        /* panel */
+    --panel-color:var(--spectric-background-inverse);
+    --panel-color-inverse:var(--spectric-background);
+    --spectric-border-disabled: var(--disabled);
+
+    /*inputs*/
+    --spectric-input-color: var(--panel-color-inverse);
+    --spectric-input-bottom: var(--panel-color);
+
+    --spectric-text-on-color: var(--text-on-color,#ffffff);
+    --spectric-text-on-color-disabled: var(--text-on-color-disabled,#8d8d8d);
+    --spectric-text-placeholder: var(--text-placeholder,rgba(22, 22, 22, 0.4));
+    --spectric-text-primary: var(--text-primary,#161616);
+    --spectric-text-secondary: var(--text-secondary,#525252);
+    /* Buttons */
+    --spectric-button-separator: #e0e0e0;
+    --spectric-button-primary: var(--primary,#1ea7fd);
+    --spectric-button-secondary: var(--secondary,#77878b);
+    --spectric-button-tertiary: var(--tertiary);
+    --spectric-button-danger-primary: #da1e28;
+    --spectric-button-danger-secondary: #da1e28;
+    --spectric-button-danger-active: #750e13;
+    --spectric-button-primary-active: #002d9c;
+    --spectric-button-secondary-active: #6f6f6f;
+    --spectric-button-tertiary-active: #002d9c;
+    --spectric-button-danger-hover: #b81921;
+    --spectric-button-primary-hover: #0050e6;
+    --spectric-button-secondary-hover: #474747;
+    --spectric-button-tertiary-hover: #0050e6;
+    --spectric-text-on-color-disabled: var(--disabled,#c6c6c6)
+    --spectric-button-disabled: #c6c6c6;
+    color: var(--spectric-text-primary);
+    `
+
+export interface ThemeChangeEvent {
+    old?: string,
+    new?: string
+}
+
+export interface ThemeEventMap {
+    "theme-change": (event: CustomEvent<ThemeChangeEvent>) => void;
+}
+
+
+@customElement("spectric-theme")
+export class SpectricThemeProvider extends LitElement {
+    static styles?: CSSResultGroup | undefined = css`:host{
+    display:contents;
+}`;
+    @property({ reflect: true }) theme: KnownThemes = "undefined";
+    protected updated(_changedProperties: PropertyValues): void {
+        if (_changedProperties.has("theme") && this.theme != _changedProperties.get("theme")) {
+            const eventDetails: ThemeChangeEvent = {
+                old: _changedProperties.get("theme"),
+                new: this.theme
+            };
+            this.dispatchEvent(new CustomEvent<ThemeChangeEvent>("theme-change", { detail: eventDetails, bubbles: true, composed: true }))
+        }
+    }
+    protected render() {
+        let currentTheme = Object.keys(Themes).includes(this.theme) ? this.theme : "undefined"
+        let style = Object.entries(
+            Themes[currentTheme]
+        )
+            .map(entry => `${entry[0]}:${entry[1]};`)
+            .join("\n")
+
+        return html`
+    ${this.theme && this.theme !== "light" ? html`
+    <style>:host{
+        ${style};
+        ${theme}
+        }
+        /* Webkit psudo elements don't pick up variables defined by the host */
+::-webkit-scrollbar-thumb {
+    background: var(--spectric-background-inverse,#393939);
+    border-radius: var(--spectric-border-radius,4em);
+    -webkit-border-radius: var(--spectric-border-radius,4em);
+    padding-top: 1px;
+    padding-bottom: 1px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: var(--spectric-background-inverse-hover,#474747);
+
+}
+::-webkit-scrollbar-corner {
+    background: var(--spectric-background, #ffffff);
+}
+/* Buttons */
+
+::-webkit-scrollbar-button:single-button {
+  background-color: transparent;
+  display: block;
+  border-style: solid;
+}
+/* Up */
+::-webkit-scrollbar-button:single-button:vertical:decrement {
+  border-width: 0 5px 5px 5px;
+  border-color: var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-background-inverse,#393939) var(--spectric-background, #ffffff);
+}
+::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
+  border-color: var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-background-inverse-hover,#474747) var(--spectric-background, #ffffff);
+}
+/* Down */
+::-webkit-scrollbar-button:single-button:vertical:increment {
+  border-width: 5px 5px 0 5px;
+  border-color: var(--spectric-background-inverse,#393939) var(--spectric-background, #ffffff) transparent var(--spectric-background, #ffffff);
+}
+
+::-webkit-scrollbar-button:vertical:single-button:increment:hover {
+  border-color: var(--spectric-background-inverse-hover,#474747) var(--spectric-background, #ffffff) transparent var(--spectric-background, #ffffff);
+}
+
+/* Left */
+::-webkit-scrollbar-button:single-button:horizontal:decrement {
+    border-width: 5px 5px 5px 0;
+    border-color:var(--spectric-background, #ffffff) var(--spectric-background-inverse,#393939) var(--spectric-background, #ffffff) var(--spectric-background, #ffffff);
+
+}
+
+::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
+    border-width: 5px 5px 5px 0;
+    border-color:var(--spectric-background, #ffffff) var(--spectric-background-inverse-hover,#474747) var(--spectric-background, #ffffff) var(--spectric-background, #ffffff);
+
+}
+
+
+
+/* Right */
+::-webkit-scrollbar-button:single-button:horizontal:increment {
+    border-width: 5px 0 5px 5px;
+    border-color:var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-background-inverse,#393939);
+
+}
+
+::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
+    border-width: 5px 0 5px 5px;
+    border-color:var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-background-inverse-hover,#474747);
+
+}
+</style>`: null}
+    <slot></slot>
+  `
+    }
+}
+
+declare global {
+    //Add events that bubble up to a "global events map"
+    interface SpectricGlobalEvents extends ThemeEventMap { }
+    interface HTMLElementTagNameMap {
+        "spectric-theme": HTMLElementTagWithEvents<SpectricThemeProvider, ThemeEventMap>
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * {@link SpectricThemeProvider}
+             */
+            "spectric-theme": ReactElementWithPropsAndEvents<SpectricThemeProvider, ThemeProps, ThemeEventMap>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * {@link SpectricThemeProvider}
+                 */
+                "spectric-theme": ReactElementWithPropsAndEvents<SpectricThemeProvider, ThemeProps, ThemeEventMap>;
+            }
+        }
+    }
+}
+

package/src/components/button.css.ts

@@ -0,0 +1,160 @@
+import { css } from 'lit';
+export default css`
+:host{
+    display: inline-block;
+    --text-on-color: var(--spectric-text-on-color, #ffffff);
+    --text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);
+    --text-placeholder: var(--spectric-text-placeholder, rgba(22, 22, 22, 0.4));
+    --text-primary: var(--spectric-text-primary, #161616);
+    --text-secondary: var(--spectric-text-secondary, #525252);
+    --button-border-radius: var(--spectric-border-radius,.4em);
+    --button-separator: var(--spectric-button-separator, #e0e0e0);
+    --button-primary:  var(--spectric-button-primary,#1ea7fd);
+    --button-secondary: var(--spectric-button-secondary, #77878b);
+    --button-tertiary: var(--spectric-button-tertiary, #0f62fe);
+    --button-danger-primary: var(--spectric-button-danger-primary, #da1e28);
+    --button-danger-secondary: var(--spectric-button-danger-secondary, #da1e28);
+    --button-danger-active: var(--spectric-button-danger-active, #750e13);
+    --button-primary-active: var(--spectric-button-primary-active, #002d9c);
+    --button-secondary-active: var(--spectric-button-secondary-active, #6f6f6f);
+    --button-tertiary-active: var(--spectric-button-tertiary-active, #002d9c);
+    --button-danger-hover: var(--spectric-button-danger-hover, #b81921);
+    --button-primary-hover: var(--spectric-button-primary-hover, #0050e6);
+    --button-secondary-hover: var(--spectric-button-secondary-hover, #474747);
+    --button-tertiary-hover: var(--spectric-button-tertiary-hover, #0050e6);
+    --button-disabled: var(--spectric-button-disabled, #c6c6c6);
+}
+:host([disabled]) { pointer-events: none }
+
+.spectric-button {
+  pointer-events:none;
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  border: 0;
+  border-radius: var(--button-border-radius);
+  font-weight: 700;
+  line-height: 2em;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  overflow:hidden;
+}
+.animation{
+  pointer-events: none;
+  transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.animation::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0 /* rtl:ignore */;
+    width: 100%;
+    height: 100%;
+}
+:host(:active) .animation::after {
+  box-shadow: 0 0 0 0 black;
+  position: absolute;
+  opacity: 1;
+  transition: 0s;
+}
+.animation::after{
+  content: "";
+  display: block;
+  position: absolute;
+  border-radius: var(--border-radius);
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: all .5s;
+  box-shadow: 0 0 30px black inset;
+}
+.spectric-button.spectric-button--secondary .animation::after , .spectric-button.spectric-button--text .animation::after {
+    box-shadow: 0 0 30px white inset;
+}
+
+.spectric-button:disabled{
+  cursor: not-allowed;
+  pointer-events: none;
+  filter: contrast(0.5);
+  /* background-color:var(--button-disabled); */
+  color:var(--text-on-color-disabled);
+}
+.spectric-button:disabled .animation , :host(:disabled:hover) .animation{
+background-color: rgba(0, 0, 0, 0);
+opacity:1
+}
+.spectric-button-danger--true:hover{
+  background-color:var(--button-danger-hover);
+}
+.spectric-button--primary.spectric-button-danger--true {
+  background-color:var(--button-danger-primary);
+  box-shadow:none;
+}
+.spectric-button--secondary.spectric-button-danger--true {
+  color: var(--text-on-color);
+  background-color:color-mix(in srgb, var(--button-danger-primary) 70%, transparent);
+  box-shadow:none;
+}
+.spectric-button--text.spectric-button-danger--true {
+  color:var(--button-danger-primary);
+
+}
+:host(:hover) .spectric-button--text.spectric-button-danger--true {
+  background-color:var(--button-danger-primary);
+  color:var(--text-on-color)
+}
+:host(:hover) .animation{
+  background: currentColor;
+  opacity: 0.15;
+}
+.spectric-button--primary {
+  box-shadow: color-mix(in srgb, var(--button-primary) 50%, transparent) 0px 0px 0px 1px inset;
+  background-color: var(--button-primary);
+  color: var(--text-on-color);
+}
+:host > .spectric-button--primary:focus {
+  outline-color: var(--button-secondary);
+  outline-width: thin;
+  outline-style: solid;
+}
+:host > .spectric-button--secondary:focus {
+  outline-color: var(--button-primary);
+  outline-width: thin;
+  outline-style: solid;
+}
+:host > .spectric-button--text:focus {
+  outline-color: var(--button-primary);
+  outline-width: thin;
+  outline-style: solid;
+}
+/* :host([variant="text"]):focus-within:focus,button:focus, button:focus-within, button:focus-visible{
+  outline-color: red;
+} */
+.spectric-button--secondary {
+  background-color:transparent;
+  box-shadow: var(--button-secondary) 0px 0px 0px 1px inset;
+  color: var(--button-secondary);
+}
+.spectric-button--text {
+  background-color: transparent;
+  color: var(--text-secondary);
+}
+.spectric-button--small {
+  padding: 5px 10px;
+  font-size: 12px;
+}
+.spectric-button--medium {
+  padding: 6px 17px;
+  font-size: 14px;
+}
+.spectric-button--large {
+  padding: 7px 24px;
+  font-size: 16px;
+}
+`