@geoffcox/sterling-svelte 0.0.26 → 0.0.28

package/theme/lightTheme.js

@@ -1,100 +1,119 @@
-import { lightStatusColors, neutralColors } from './colors';
+import { blueColors, lightStatusColors, neutralColors } from './colors';
 export const lightTheme = {
-    // ----- Common (18) ---- //
-    '--stsv-Common__background-color': neutralColors.neutral100,
-    '--stsv-Common__border-color': neutralColors.neutral60,
-    '--stsv-Common__border-radius': '0',
-    '--stsv-Common__border-style': 'solid',
-    '--stsv-Common__border-width': '2px',
-    '--stsv-Common__color': neutralColors.neutral15,
-    // hover
-    '--stsv-Common__background-color--hover': neutralColors.neutral100,
-    '--stsv-Common__border-color--hover': neutralColors.neutral45,
-    '--stsv-Common__color--hover': neutralColors.neutral15,
-    // focus
-    '--stsv-Common__background-color--focus': neutralColors.neutral96,
-    '--stsv-Common__border-color--focus': neutralColors.neutral0,
-    '--stsv-Common__color--focus': neutralColors.neutral15,
+    // ----- Common ---- //
+    'stsv-common__background-color': neutralColors.color12,
+    'stsv-common__border-color': neutralColors.color5,
+    'stsv-common__border-radius': '0',
+    'stsv-common__border-style': 'solid',
+    'stsv-common__border-width': '2px',
+    'stsv-common__color': neutralColors.color2,
+    'stsv-common__background-color--secondary': neutralColors.color9,
+    'stsv-common__color--secondary': neutralColors.color5,
+    'stsv-common__background-color--subtle': neutralColors.color10,
+    'stsv-common__color--subtle': neutralColors.color7,
+    'stsv-common__background-color--faint': neutralColors.color11,
+    'stsv-common__color--faint': neutralColors.color9,
     // outline
-    '--stsv-Common__outline-color': neutralColors.neutral15,
-    '--stsv-Common__outline-offset': '0',
-    '--stsv-Common__outline-style': 'solid',
-    '--stsv-Common__outline-width': '2px',
+    'stsv-common__outline-color': neutralColors.color2,
+    'stsv-common__outline-offset': '0',
+    'stsv-common__outline-style': 'solid',
+    'stsv-common__outline-width': '2px',
     // disabled
-    '--stsv-Common__background-color1--disabled': 'hsla(0, 0%, 0%, 20%)',
-    '--stsv-Common__background-color2--disabled': `hsla(0, 0%, 100%, 20%)`,
-    '--stsv-Disabled__background': 'repeating-linear-gradient(' +
-        '45deg,' +
-        'var(--stsv-Common__background-color1--disabled),' +
-        'var(--stsv-Common__background-color1--disabled) 3px,' +
-        'var(--stsv-Common__background-color2--disabled) 3px,' +
-        'var(--stsv-Common__background-color2--disabled) 6px' +
-        ')',
-    '--stsv-Common__background-color--disabled': neutralColors.neutral96,
-    '--stsv-Common__border-color--disabled': neutralColors.neutral75,
-    '--stsv-Common__color--disabled': neutralColors.neutral75,
-    // ----- Layer ---- //
-    '--stsv-Layer__background-color--1': neutralColors.neutral98,
-    '--stsv-Layer__color--1': neutralColors.neutral15,
-    '--stsv-Layer__background-color--2': neutralColors.neutral96,
-    '--stsv-Layer__color--2': neutralColors.neutral15,
-    '--stsv-Layer__background-color--3': neutralColors.neutral92,
-    '--stsv-Layer__color--3': neutralColors.neutral15,
-    // ----- Button (15) ----- //
-    '--stsv-Button__background-color': neutralColors.neutral96,
-    '--stsv-Button__border-color': neutralColors.neutral60,
-    '--stsv-Button__border-radius': '8px',
-    '--stsv-Button__border-style': 'solid',
-    '--stsv-Button__border-width': '2px',
-    '--stsv-Button__color': neutralColors.neutral15,
+    'stsv-common--disabled__stripe-color': 'hsla(0, 0%, 0%, 0.2)',
+    'stsv-common--disabled__stripe-color--alt': `hsla(0, 0%, 100%, 0.2)`,
+    'stsv-common--disabled__stripe-angle': '135deg',
+    'stsv-common--disabled__stripe-width': '3px',
+    // ----- Common--colorful ---- //
+    'stsv-common--colorful__background-color': blueColors.color12,
+    'stsv-common--colorful__border-color': blueColors.color4,
+    'stsv-common--colorful__color': blueColors.color3,
+    'stsv-common--colorful__background-color--secondary': blueColors.color9,
+    'stsv-common--colorful__color--secondary': blueColors.color5,
+    'stsv-common--colorful__background-color--subtle': blueColors.color10,
+    'stsv-common--colorful__color--subtle': blueColors.color7,
+    'stsv-common--colorful__background-color--faint': blueColors.color11,
+    'stsv-common--colorful__color--faint': blueColors.color9,
+    // ----- Button ----- //
+    'stsv-button__background-color': neutralColors.color10,
+    'stsv-button__border-color': neutralColors.color5,
+    'stsv-button__border-radius': '8px',
+    'stsv-button__border-style': 'solid',
+    'stsv-button__border-width': '2px',
+    'stsv-button__color': neutralColors.color2,
+    // hover
+    'stsv-button__background-color--hover': neutralColors.color9,
+    'stsv-button__border-color--hover': neutralColors.color4,
+    'stsv-button__color--hover': neutralColors.color2,
+    // focus
+    'stsv-button__background-color--focus': neutralColors.color9,
+    'stsv-button__border-color--focus': neutralColors.color4,
+    'stsv-button__color--focus': neutralColors.color2,
+    // active
+    'stsv-button__background-color--active': neutralColors.color8,
+    'stsv-button__border-color--active': neutralColors.color3,
+    'stsv-button__color--active': neutralColors.color1,
+    // ----- Button--colorful ---- //
+    'stsv-button--colorful__background-color': blueColors.color6,
+    'stsv-button--colorful__border-color': blueColors.color4,
+    'stsv-button--colorful__color': blueColors.color11,
     // hover
-    '--stsv-Button__background-color--hover': neutralColors.neutral96,
-    '--stsv-Button__border-color--hover': neutralColors.neutral45,
-    '--stsv-Button__color--hover': neutralColors.neutral15,
+    'stsv-button--colorful__background-color--hover': blueColors.color7,
+    'stsv-button--colorful__border-color--hover': blueColors.color5,
+    'stsv-button--colorful__color--hover': blueColors.color11,
+    // focus
+    'stsv-button--colorful__background-color--focus': blueColors.color7,
+    'stsv-button--colorful__border-color--focus': blueColors.color5,
+    'stsv-button--colorful__color--focus': blueColors.color11,
     // active
-    '--stsv-Button__background-color--active': neutralColors.neutral92,
-    '--stsv-Button__border-color--active': neutralColors.neutral30,
-    '--stsv-Button__color--active': neutralColors.neutral30,
+    'stsv-button--colorful__background-color--active': blueColors.color5,
+    'stsv-button--colorful__border-color--active': blueColors.color3,
+    'stsv-button--colorful__color--active': blueColors.color12,
+    // ----- Input ----- //
+    'stsv-input__background-color': neutralColors.color11,
+    'stsv-input__border-color': neutralColors.color5,
+    'stsv-input__border-radius': '3px',
+    'stsv-input__border-style': 'solid',
+    'stsv-input__border-width': '2px',
+    'stsv-input__color': neutralColors.color2,
+    // hover
+    'stsv-input__background-color--hover': neutralColors.color12,
+    'stsv-input__border-color--hover': neutralColors.color4,
+    'stsv-input__color--hover': neutralColors.color2,
     // focus
-    '--stsv-Button__background-color--focus': neutralColors.neutral96,
-    '--stsv-Button__border-color--focus': neutralColors.neutral0,
-    '--stsv-Button__color--focus': neutralColors.neutral15,
-    // ----- Input (15) ----- //
-    '--stsv-Input__background-color': neutralColors.neutral98,
-    '--stsv-Input__border-color': neutralColors.neutral60,
-    '--stsv-Input__border-radius': '3px',
-    '--stsv-Input__border-style': 'solid',
-    '--stsv-Input__border-width': '2px',
-    '--stsv-Input__color': neutralColors.neutral15,
+    'stsv-input__background-color--focus': neutralColors.color12,
+    'stsv-input__border-color--focus': neutralColors.color4,
+    'stsv-input__color--focus': neutralColors.color2,
+    // selected
+    'stsv-input__background-color--selected': neutralColors.color9,
+    'stsv-input__border-color--selected': neutralColors.color3,
+    'stsv-input__color--selected': neutralColors.color2,
+    // ----- Input--colorful ---- //
+    'stsv-input--colorful__background-color': blueColors.color11,
+    'stsv-input--colorful__border-color': blueColors.color4,
+    'stsv-input--colorful__color': blueColors.color2,
     // hover
-    '--stsv-Input__background-color--hover': neutralColors.neutral100,
-    '--stsv-Input__border-color--hover': neutralColors.neutral45,
-    '--stsv-Input__color--hover': neutralColors.neutral15,
+    'stsv-input--colorful__background-color--hover': blueColors.color12,
+    'stsv-input--colorful__border-color--hover': blueColors.color5,
+    'stsv-input--colorful__color--hover': blueColors.color2,
     // focus
-    '--stsv-Input__background-color--focus': neutralColors.neutral100,
-    '--stsv-Input__border-color--focus': neutralColors.neutral15,
-    '--stsv-Input__color--focus': neutralColors.neutral15,
+    'stsv-input--colorful__background-color--focus': blueColors.color12,
+    'stsv-input--colorful__border-color--focus': blueColors.color5,
+    'stsv-input--colorful__color--focus': blueColors.color2,
     // selected
-    '--stsv-Input__background-color--selected': neutralColors.neutral92,
-    '--stsv-Input__border-color--selected': neutralColors.neutral30,
-    '--stsv-Input__color--selected': neutralColors.neutral15,
-    // ----- Display ----- //
-    '--stsv-Display__background-color': neutralColors.neutral92,
-    '--stsv-Display__border-color': neutralColors.neutral30,
-    '--stsv-Display__color': neutralColors.neutral15,
-    '--stsv-Display__color--subtle': neutralColors.neutral45,
-    '--stsv-Display__color--faint': neutralColors.neutral85,
-    '--stsv-Display__color--disabled': neutralColors.neutral85,
-    '--stsv-Info__background-color': lightStatusColors.info.backgroundColor,
-    '--stsv-Info__border-color': lightStatusColors.info.borderColor,
-    '--stsv-Info__color': lightStatusColors.info.color,
-    '--stsv-Success__background-color': lightStatusColors.success.backgroundColor,
-    '--stsv-Success__border-color': lightStatusColors.success.borderColor,
-    '--stsv-Success__color': lightStatusColors.success.color,
-    '--stsv-Warning__background-color': lightStatusColors.warning.backgroundColor,
-    '--stsv-Warning__border-color': lightStatusColors.warning.borderColor,
-    '--stsv-Warning__color': lightStatusColors.warning.color,
-    '--stsv-Error__background-color': lightStatusColors.error.backgroundColor,
-    '--stsv-Error__border-color': lightStatusColors.error.borderColor,
-    '--stsv-Error__color': lightStatusColors.error.color
+    'stsv-input--colorful__background-color--selected': blueColors.color9,
+    'stsv-input--colorful__border-color--selected': blueColors.color3,
+    'stsv-input--colorful__color--selected': blueColors.color2,
+    // ----- Status ----- //
+    'stsv-status--info__background-color': lightStatusColors.info.backgroundColor,
+    'stsv-status--info__border-color': lightStatusColors.info.borderColor,
+    'stsv-status--info__color': lightStatusColors.info.color,
+    'stsv-status--success__background-color': lightStatusColors.success.backgroundColor,
+    'stsv-status--success__border-color': lightStatusColors.success.borderColor,
+    'stsv-status--success__color': lightStatusColors.success.color,
+    'stsv-status--warning__background-color': lightStatusColors.warning.backgroundColor,
+    'stsv-status--warning__border-color': lightStatusColors.warning.borderColor,
+    'stsv-status--warning__color': lightStatusColors.warning.color,
+    'stsv-status--danger__background-color': lightStatusColors.error.backgroundColor,
+    'stsv-status--danger__border-color': lightStatusColors.error.borderColor,
+    'stsv-status--danger__color': lightStatusColors.error.color
 };

package/Field.constants.d.ts

@@ -1 +0,0 @@
-export declare const FIELD_STATUSES: string[];

package/Field.constants.js

@@ -1 +0,0 @@
-export const FIELD_STATUSES = ['none', 'info', 'success', 'warning', 'error'];

package/Field.svelte

@@ -1,265 +0,0 @@
-<script>import Tooltip from "./Tooltip.svelte";
-import { usingKeyboard } from "./stores/usingKeyboard";
-export let forwardClick = false;
-let htmlFor = void 0;
-export { htmlFor as for };
-export let label = void 0;
-export let message = void 0;
-export let required = false;
-export let requiredReason = "This field is required";
-export let status = "none";
-let fieldRef;
-let targetDisabled = false;
-let targetRef = null;
-const findTarget = () => {
-  let candidate = null;
-  if (htmlFor) {
-    candidate = fieldRef?.querySelector(`[id="${htmlFor}"]`);
-  }
-  if (!candidate) {
-    candidate = fieldRef?.querySelector(
-      'a[href], audio[controls], button, details, div[contenteditable], form, input, select, textarea, video[controls], [tabindex]:not([tabindex="-1"])'
-    );
-  }
-  targetRef = candidate;
-};
-const isElementDisabled = (element) => {
-  if (element) {
-    return element.getAttribute("aria-disabled") === "true" || element?.matches(":disabled") || element?.disabled === true || element?.classList.contains("disabled");
-  }
-  return false;
-};
-$:
-  $$slots.default, fieldRef, htmlFor, findTarget();
-$: {
-  targetDisabled = isElementDisabled(targetRef);
-}
-const mutationCallback = (mutations) => {
-  let disabled = void 0;
-  for (let i = 0; i < mutations.length; i++) {
-    const mutation = mutations[i];
-    if (mutation.type === "attributes") {
-      if (mutation.attributeName === "aria-disabled" || mutation.attributeName === "disabled" || mutation.attributeName === "class") {
-        if (isElementDisabled(targetRef)) {
-          disabled = true;
-          break;
-        }
-        disabled = false;
-      }
-    }
-  }
-  if (disabled !== void 0) {
-    targetDisabled = disabled;
-  }
-};
-let mutationObserver = new MutationObserver(mutationCallback);
-$: {
-  mutationObserver.disconnect();
-  if (targetRef) {
-    mutationObserver.observe(targetRef, {
-      attributes: true
-    });
-  }
-}
-export const click = () => {
-  fieldRef?.click();
-};
-export const blur = () => {
-  fieldRef?.blur();
-};
-export const focus = (options) => {
-  fieldRef?.focus(options);
-};
-const onClick = () => {
-  if (forwardClick) {
-    targetRef?.click();
-  }
-};
-</script>
-
-<label
-  bind:this={fieldRef}
-  aria-disabled={targetDisabled}
-  class="sterling-field"
-  class:disabled={targetDisabled}
-  class:using-keyboard={$usingKeyboard}
-  for={htmlFor}
-  on:blur
-  on:click
-  on:click={onClick}
-  on:copy
-  on:cut
-  on:dblclick
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  on:focus
-  on:focusin
-  on:focusout
-  on:keydown
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:scroll
-  on:wheel
-  on:paste
-  {...$$restProps}
->
-  {#if label || $$slots.label}
-    <slot name="label" disabled={targetDisabled} for={htmlFor} {forwardClick} {label} {required}>
-      <div class="label-text">
-        {label}
-      </div>
-    </slot>
-  {/if}
-  {#if $$slots.default}
-    <div class="content">
-      <slot />
-    </div>
-  {/if}
-  {#if message}
-    <slot name="message" disabled={targetDisabled} {message} {required} {status}>
-      <div
-        class="message"
-        class:info={status === 'info'}
-        class:success={status === 'success'}
-        class:warning={status === 'warning'}
-        class:error={status === 'error'}
-      >
-        {message}
-      </div>
-    </slot>
-  {/if}
-  {#if required}
-    <slot name="required" requiredTip={requiredReason}>
-      <Tooltip showOn="hover">
-        <span class="required-tip" slot="tip">{requiredReason}</span>
-        <div class="required">*</div>
-      </Tooltip>
-    </slot>
-  {/if}
-</label>
-
-<style>
-  .sterling-field {
-    background-color: var(--stsv-Input__background-color);
-    border-color: var(--stsv-Input__border-color);
-    border-radius: var(--stsv-Input__border-radius);
-    border-style: var(--stsv-Input__border-style);
-    border-width: var(--stsv-Input__border-width);
-    box-sizing: border-box;
-    color: var(--stsv-Input__color);
-    display: flex;
-    flex-direction: column;
-    font: inherit;
-    margin: 0;
-    overflow: visible;
-    padding: 0;
-    position: relative;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  .sterling-field:not(.disabled):hover {
-    background-color: var(--stsv-Input__background-color--hover);
-    border-color: var(--stsv-Input__border-color--hover);
-    color: var(--stsv-Input__color--hover);
-  }
-
-  .sterling-field.using-keyboard:focus-within {
-    border-color: var(--stsv-Common__border-color--focus);
-    color: var(--stsv-Common__color--focus);
-    outline-color: var(--stsv-Common__outline-color);
-    outline-offset: var(--stsv-Common__outline-offset);
-    outline-style: var(--stsv-Common__outline-style);
-    outline-width: var(--stsv-Common__outline-width);
-  }
-
-  .sterling-field.disabled {
-    cursor: not-allowed;
-  }
-
-  .sterling-field.disabled * {
-    cursor: not-allowed;
-  }
-
-  .label-text {
-    color: var(--stsv-Display__color);
-    font-size: 0.8em;
-    margin: 0.5em 0.7em 0.2em 0.2em;
-  }
-
-  .label-text:empty {
-    margin: 0;
-  }
-
-  .content {
-    display: grid;
-  }
-
-  .message {
-    box-sizing: border-box;
-    font-size: 0.8em;
-    background-color: var(--stsv-Display__background-color);
-    color: var(--stsv-Display__color);
-    padding: 0.5em;
-    width: 100%;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  .message.info {
-    background-color: var(--stsv-Info__background-color);
-    border-color: var(--stsv-Info__border-color);
-    color: var(--stsv-Info__color);
-  }
-
-  .message.success {
-    background-color: var(--stsv-Success__background-color);
-    border-color: var(--stsv-Success__border-color);
-    color: var(--stsv-Success__color);
-  }
-
-  .message.warning {
-    background-color: var(--stsv-Warning__background-color);
-    border-color: var(--stsv-Warning__border-color);
-    color: var(--stsv-Warning__color);
-  }
-
-  .message.error {
-    background-color: var(--stsv-Error__background-color);
-    border-color: var(--stsv__Error-color);
-    color: var(--stsv-Error__color);
-  }
-
-  .required {
-    text-align: center;
-    font-weight: bold;
-    box-sizing: border-box;
-    width: 1em;
-    height: 1em;
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-
-  .required-tip {
-    display: block;
-    padding: 4px;
-  }
-
-  @media (prefers-reduced-motion) {
-    .sterling-field,
-    .sterling-field::after,
-    .message {
-      transition: none;
-    }
-  }
-</style>

package/Field.svelte.d.ts

@@ -1,75 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        forwardClick?: boolean | undefined;
-        for?: string | undefined;
-        label?: string | undefined;
-        message?: string | undefined;
-        required?: boolean | undefined;
-        requiredReason?: string | undefined;
-        status?: string | undefined;
-        click?: (() => void) | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        copy: ClipboardEvent;
-        cut: ClipboardEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        scroll: Event;
-        wheel: WheelEvent;
-        paste: ClipboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        label: {
-            disabled: boolean;
-            for: string | undefined;
-            forwardClick: boolean;
-            label: string | undefined;
-            required: boolean;
-        };
-        default: {};
-        message: {
-            disabled: boolean;
-            message: string | undefined;
-            required: boolean;
-            status: string;
-        };
-        required: {
-            requiredTip: string;
-        };
-    };
-};
-export type FieldProps = typeof __propDef.props;
-export type FieldEvents = typeof __propDef.events;
-export type FieldSlots = typeof __propDef.slots;
-export default class Field extends SvelteComponentTyped<FieldProps, FieldEvents, FieldSlots> {
-    get click(): () => void;
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};

package/Field.types.d.ts

@@ -1,4 +0,0 @@
-import type { FIELD_STATUSES } from './Field.constants';
-type FieldStatusTuple = typeof FIELD_STATUSES;
-export type FieldStatus = FieldStatusTuple[number];
-export {};