@geoffcox/sterling-svelte 0.0.1

package/README.md

@@ -0,0 +1,14 @@
+# sterling-svelte
+
+A modern, accessible, and lightweight component library for Svelte.
+
+## Installation
+
+```
+npm install @geoffcox/sterling-svelte
+```
+
+## Documentation
+
+The project builds the documentation for the library as a SvelteKit application.
+See the published version of the [documentation](https://geoffcox.github.io/demos/sterling-svelte/).

package/index.d.ts

@@ -0,0 +1 @@
+export { type Theme, type ThemeActionParams, applyDarkTheme, applyLightTheme, applyTheme, darkTheme, lightTheme, neutrals, toggleDarkTheme } from './theme';

package/index.js

@@ -0,0 +1 @@
+export { applyDarkTheme, applyLightTheme, applyTheme, darkTheme, lightTheme, neutrals, toggleDarkTheme } from './theme';

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@geoffcox/sterling-svelte",
+  "version": "0.0.1",
+  "devDependencies": {
+    "@fontsource/fira-mono": "^4.5.10",
+    "@fontsource/overpass": "^4.5.10",
+    "@playwright/test": "^1.28.1",
+    "@sveltejs/adapter-auto": "^1.0.0",
+    "@sveltejs/adapter-static": "^1.0.0",
+    "@sveltejs/kit": "^1.0.0",
+    "@sveltejs/package": "^1.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "mdsvex": "^0.10.6",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.8.1",
+    "svelte": "^3.54.0",
+    "svelte-check": "^2.9.2",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0",
+    "vitest": "^0.25.3"
+  },
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./index.js",
+    "./theme/applyDarkTheme": "./theme/applyDarkTheme.js",
+    "./theme/applyLightTheme": "./theme/applyLightTheme.js",
+    "./theme/applyTheme": "./theme/applyTheme.js",
+    "./theme/colors": "./theme/colors.js",
+    "./theme/darkTheme": "./theme/darkTheme.js",
+    "./theme": "./theme/index.js",
+    "./theme/lightTheme": "./theme/lightTheme.js",
+    "./theme/toggleDarkTheme": "./theme/toggleDarkTheme.js",
+    "./theme/types": "./theme/types.js"
+  }
+}

package/theme/applyDarkTheme.d.ts

@@ -0,0 +1,7 @@
+import type { ThemeActionParams } from './types';
+/**
+ * Applies the default dark theme.
+ */
+export declare const applyDarkTheme: (node: HTMLElement, params?: Omit<ThemeActionParams, 'theme' | 'context'>) => {
+    update: (params?: ThemeActionParams | undefined) => void;
+};

package/theme/applyDarkTheme.js

@@ -0,0 +1,11 @@
+import { applyTheme } from './applyTheme';
+import { darkTheme } from './darkTheme';
+/**
+ * Applies the default dark theme.
+ */
+export const applyDarkTheme = (node, params) => {
+    return applyTheme(node, {
+        ...params,
+        theme: darkTheme
+    });
+};

package/theme/applyLightTheme.d.ts

@@ -0,0 +1,7 @@
+import type { ThemeActionParams } from './types';
+/**
+ * Applies the default light theme.
+ */
+export declare const applyLightTheme: (node: HTMLElement, params?: Omit<ThemeActionParams, 'theme' | 'context'>) => {
+    update: (params?: ThemeActionParams | undefined) => void;
+};

package/theme/applyLightTheme.js

@@ -0,0 +1,11 @@
+import { applyTheme } from './applyTheme';
+import { lightTheme } from './lightTheme';
+/**
+ * Applies the default light theme.
+ */
+export const applyLightTheme = (node, params) => {
+    return applyTheme(node, {
+        ...params,
+        theme: lightTheme
+    });
+};

package/theme/applyTheme.d.ts

@@ -0,0 +1,7 @@
+import type { ThemeActionParams } from './types';
+/**
+ * Applies a theme.
+ */
+export declare const applyTheme: (node: HTMLElement, params: ThemeActionParams) => {
+    update: (params?: ThemeActionParams) => void;
+};

package/theme/applyTheme.js

@@ -0,0 +1,19 @@
+const _applyTheme = (node, theme) => {
+    Object.keys(theme).map((key) => {
+        node.style.setProperty(key, theme[key] ? `${theme[key]}` : null);
+    });
+};
+/**
+ * Applies a theme.
+ */
+export const applyTheme = (node, params) => {
+    const element = params.atDocumentRoot ? document.documentElement : node;
+    _applyTheme(element, params.theme);
+    return {
+        update: (params) => {
+            if (params) {
+                _applyTheme(document.documentElement, params?.theme);
+            }
+        }
+    };
+};

package/theme/colors.d.ts

@@ -0,0 +1 @@
+export declare const neutrals: Record<string, string>;

package/theme/colors.js

@@ -0,0 +1,13 @@
+export const neutrals = {
+    neutral0: 'hsl(0, 0%, 0%)',
+    neutral15: 'hsl(0, 0%, 15%)',
+    neutral30: 'hsl(0, 0%, 30%)',
+    neutral45: 'hsl(0, 0%, 45%)',
+    neutral60: 'hsl(0, 0%, 60%)',
+    neutral75: 'hsl(0, 0%, 75%)',
+    neutral85: 'hsl(0, 0%, 85%)',
+    neutral92: 'hsl(0, 0%, 92%)',
+    neutral96: 'hsl(0, 0%, 96%)',
+    neutral98: 'hsl(0, 0%, 98%)',
+    neutral100: 'hsl(0, 0%, 100%)'
+};

package/theme/darkTheme.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from './types';
+export declare const darkTheme: Theme;

package/theme/darkTheme.js

@@ -0,0 +1,94 @@
+import { neutrals } from './colors';
+export const darkTheme = {
+    // ----- Common ---- //
+    '--Common__background-color': neutrals.neutral15,
+    '--Common__border-color': neutrals.neutral92,
+    '--Common__border-radius': '0',
+    '--Common__border-style': 'solid',
+    '--Common__border-width': '2px',
+    '--Common__color': neutrals.neutral100,
+    // hover
+    '--Common__background-color--hover': neutrals.neutral15,
+    '--Common__border-color--hover': neutrals.neutral96,
+    '--Common__color--hover': neutrals.neutral100,
+    // focus
+    '--Common__background-color--focus': neutrals.neutral45,
+    '--Common__border-color--focus': neutrals.neutral100,
+    '--Common__color--focus': neutrals.neutral100,
+    // outline
+    '--Common__outline-color': neutrals.neutral100,
+    '--Common__outline-offset': '0',
+    '--Common__outline-style': 'solid',
+    '--Common__outline-width': '2px',
+    // disabled
+    '--Common__background-color--disabled': neutrals.neutral45,
+    '--Common__border-color--disabled': neutrals.neutral92,
+    '--Common__color--disabled': neutrals.neutral92,
+    // ----- BaseLayer ---- //
+    '--BaseLayer__background-color': neutrals.neutral15,
+    '--BaseLayer__color': neutrals.neutral100,
+    '--BaseLayer__background-color--1': neutrals.neutral30,
+    '--BaseLayer__color--1': neutrals.neutral100,
+    '--BaseLayer__background-color--2': neutrals.neutral45,
+    '--BaseLayer__color--2': neutrals.neutral100,
+    '--BaseLayer__background-color--3': neutrals.neutral60,
+    '--BaseLayer__color--3': neutrals.neutral100,
+    // ----- Button ----- //
+    '--Button__background-color': neutrals.neutral45,
+    '--Button__border-color': neutrals.neutral92,
+    '--Button__border-radius': '8px',
+    '--Button__border-style': 'solid',
+    '--Button__border-width': '2px',
+    '--Button__color': neutrals.neutral100,
+    // hover
+    '--Button__background-color--hover': neutrals.neutral45,
+    '--Button__border-color--hover': neutrals.neutral96,
+    '--Button__color--hover': neutrals.neutral100,
+    // active
+    '--Button__background-color--active': neutrals.neutral60,
+    '--Button__border-color--active': neutrals.neutral98,
+    '--Button__color--active': neutrals.neutral98,
+    // focus
+    '--Button__background-color--focus': neutrals.neutral45,
+    '--Button__border-color--focus': neutrals.neutral100,
+    '--Button__color--focus': neutrals.neutral100,
+    // disabled
+    '--Button__background-color--disabled': neutrals.neutral75,
+    '--Button__border-color--disabled': neutrals.neutral92,
+    '--Button__color--disabled': neutrals.neutral92,
+    // ----- Input ----- //
+    '--Input__background-color': neutrals.neutral30,
+    '--Input__border-color': neutrals.neutral92,
+    '--Input__border-radius': '3px',
+    '--Input__border-style': 'solid',
+    '--Input__border-width': '2px',
+    '--Input__color': neutrals.neutral100,
+    // hover
+    '--Input__background-color--hover': neutrals.neutral15,
+    '--Input__border-color--hover': neutrals.neutral96,
+    '--Input__color--hover': neutrals.neutral100,
+    // focus
+    '--Input__background-color--focus': neutrals.neutral15,
+    '--Input__border-color--focus': neutrals.neutral100,
+    '--Input__color--focus': neutrals.neutral100,
+    // selected
+    '--Input__background-color--selected': neutrals.neutral60,
+    '--Input__border-color--selected': neutrals.neutral98,
+    '--Input__color--selected': neutrals.neutral100,
+    // disabled
+    '--Input__background-color--disabled': neutrals.neutral45,
+    '--Input__border-color--disabled': neutrals.neutral85,
+    '--Input__color--disabled': neutrals.neutral85,
+    // ----- Display ----- //
+    '--Display__background-color': neutrals.neutral60,
+    '--Display__border-color': neutrals.neutral92,
+    '--Display__color': neutrals.neutral100,
+    '--Display__color--subtle': neutrals.neutral96,
+    '--Display__color--faint': neutrals.neutral45,
+    '--Display__color--disabled': neutrals.neutral45,
+    '--Display__color--info': '#025E73',
+    '--Display__color--progress': '#0099DD',
+    '--Display__color--success': '#03A64A',
+    '--Display__color--warning': '#F2A71B',
+    '--Display__color--error': '#A62B1F'
+};

package/theme/index.d.ts

@@ -0,0 +1,8 @@
+export * from './applyDarkTheme';
+export * from './applyLightTheme';
+export * from './applyTheme';
+export * from './colors';
+export * from './darkTheme';
+export * from './lightTheme';
+export * from './toggleDarkTheme';
+export * from './types';

package/theme/index.js

@@ -0,0 +1,8 @@
+export * from './applyDarkTheme';
+export * from './applyLightTheme';
+export * from './applyTheme';
+export * from './colors';
+export * from './darkTheme';
+export * from './lightTheme';
+export * from './toggleDarkTheme';
+export * from './types';

package/theme/lightTheme.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from './types';
+export declare const lightTheme: Theme;

package/theme/lightTheme.js

@@ -0,0 +1,94 @@
+import { neutrals } from './colors';
+export const lightTheme = {
+    // ----- Common ---- //
+    '--Common__background-color': neutrals.neutral100,
+    '--Common__border-color': neutrals.neutral60,
+    '--Common__border-radius': '0',
+    '--Common__border-style': 'solid',
+    '--Common__border-width': '2px',
+    '--Common__color': neutrals.neutral15,
+    // hover
+    '--Common__background-color--hover': neutrals.neutral100,
+    '--Common__border-color--hover': neutrals.neutral45,
+    '--Common__color--hover': neutrals.neutral15,
+    // focus
+    '--Common__background-color--focus': neutrals.neutral96,
+    '--Common__border-color--focus': neutrals.neutral0,
+    '--Common__color--focus': neutrals.neutral15,
+    // outline
+    '--Common__outline-color': neutrals.neutral15,
+    '--Common__outline-offset': '0',
+    '--Common__outline-style': 'solid',
+    '--Common__outline-width': '2px',
+    // disabled
+    '--Common__background-color--disabled': neutrals.neutral96,
+    '--Common__border-color--disabled': neutrals.neutral60,
+    '--Common__color--disabled': neutrals.neutral60,
+    // ----- BaseLayer ---- //
+    '--BaseLayer__background-color': neutrals.neutral100,
+    '--BaseLayer__color': neutrals.neutral15,
+    '--BaseLayer__background-color--1': neutrals.neutral98,
+    '--BaseLayer__color--1': neutrals.neutral15,
+    '--BaseLayer__background-color--2': neutrals.neutral96,
+    '--BaseLayer__color--2': neutrals.neutral15,
+    '--BaseLayer__background-color--3': neutrals.neutral92,
+    '--BaseLayer__color--3': neutrals.neutral15,
+    // ----- Button ----- //
+    '--Button__background-color': neutrals.neutral96,
+    '--Button__border-color': neutrals.neutral60,
+    '--Button__border-radius': '8px',
+    '--Button__border-style': 'solid',
+    '--Button__border-width': '2px',
+    '--Button__color': neutrals.neutral15,
+    // hover
+    '--Button__background-color--hover': neutrals.neutral96,
+    '--Button__border-color--hover': neutrals.neutral45,
+    '--Button__color--hover': neutrals.neutral15,
+    // active
+    '--Button__background-color--active': neutrals.neutral92,
+    '--Button__border-color--active': neutrals.neutral30,
+    '--Button__color--active': neutrals.neutral30,
+    // focus
+    '--Button__background-color--focus': neutrals.neutral96,
+    '--Button__border-color--focus': neutrals.neutral0,
+    '--Button__color--focus': neutrals.neutral15,
+    // disabled
+    '--Button__background-color--disabled': neutrals.neutral85,
+    '--Button__border-color--disabled': neutrals.neutral60,
+    '--Button__color--disabled': neutrals.neutral60,
+    // ----- Input ----- //
+    '--Input__background-color': neutrals.neutral98,
+    '--Input__border-color': neutrals.neutral60,
+    '--Input__border-radius': '3px',
+    '--Input__border-style': 'solid',
+    '--Input__border-width': '2px',
+    '--Input__color': neutrals.neutral15,
+    // hover
+    '--Input__background-color--hover': neutrals.neutral100,
+    '--Input__border-color--hover': neutrals.neutral45,
+    '--Input__color--hover': neutrals.neutral15,
+    // focus
+    '--Input__background-color--focus': neutrals.neutral100,
+    '--Input__border-color--focus': neutrals.neutral15,
+    '--Input__color--focus': neutrals.neutral15,
+    // selected
+    '--Input__background-color--selected': neutrals.neutral92,
+    '--Input__border-color--selected': neutrals.neutral30,
+    '--Input__color--selected': neutrals.neutral15,
+    // disabled
+    '--Input__background-color--disabled': neutrals.neutral96,
+    '--Input__border-color--disabled': neutrals.neutral75,
+    '--Input__color--disabled': neutrals.neutral75,
+    // ----- Display ----- //
+    '--Display__background-color': neutrals.neutral92,
+    '--Display__border-color': neutrals.neutral60,
+    '--Display__color': neutrals.neutral15,
+    '--Display__color--subtle': neutrals.neutral30,
+    '--Display__color--faint': neutrals.neutral85,
+    '--Display__color--disabled': neutrals.neutral85,
+    '--Display__color--info': '#025E73',
+    '--Display__color--progress': '#0099DD',
+    '--Display__color--success': '#03A64A',
+    '--Display__color--warning': '#F2A71B',
+    '--Display__color--error': '#A62B1F'
+};

package/theme/toggleDarkTheme.d.ts

@@ -0,0 +1,18 @@
+import type { ThemeActionParams } from './types';
+type Params = Omit<ThemeActionParams, 'theme'> & {
+    dark?: boolean;
+};
+/**
+ * An action that applies
+ * - `darkTheme` when dark is true
+ * - `lightTheme` when dark is false
+ * - `darkTheme` or `lightTheme` based on `prefers-color-scheme` when dark is undefined
+ *
+ * @example ```use:toggleDarkMode```
+ * @example ```use:toggleDarkMode={{ dark: myToggleVariable }}```
+ */
+export declare const toggleDarkTheme: (node: HTMLElement, params?: Params) => {
+    destory(): void;
+    update(params?: Params): void;
+};
+export {};

package/theme/toggleDarkTheme.js

@@ -0,0 +1,53 @@
+import { applyDarkTheme } from './applyDarkTheme';
+import { applyLightTheme } from './applyLightTheme';
+const _applyTheme = (node, params) => {
+    let dark = params?.dark;
+    if (params?.dark === undefined) {
+        dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    if (dark) {
+        applyDarkTheme(node, params);
+    }
+    else {
+        applyLightTheme(node, params);
+    }
+};
+const onPrefersColorSchemeDarkChanged = (e, node, params) => {
+    let dark = params?.dark;
+    if (params?.dark === undefined) {
+        dark = e.matches;
+    }
+    if (dark) {
+        applyDarkTheme(node, params);
+    }
+    else {
+        applyLightTheme(node, params);
+    }
+};
+/**
+ * An action that applies
+ * - `darkTheme` when dark is true
+ * - `lightTheme` when dark is false
+ * - `darkTheme` or `lightTheme` based on `prefers-color-scheme` when dark is undefined
+ *
+ * @example ```use:toggleDarkMode```
+ * @example ```use:toggleDarkMode={{ dark: myToggleVariable }}```
+ */
+export const toggleDarkTheme = (node, params) => {
+    let mediaChangeHandler = (e) => onPrefersColorSchemeDarkChanged(e, node, params);
+    const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
+    matchMedia.addEventListener('change', mediaChangeHandler);
+    _applyTheme(node, params);
+    return {
+        destory() {
+            matchMedia.removeEventListener('change', mediaChangeHandler);
+        },
+        update(params) {
+            // dark might have changed so resubscribe using new params
+            matchMedia.removeEventListener('change', mediaChangeHandler);
+            mediaChangeHandler = (e) => onPrefersColorSchemeDarkChanged(e, node, params);
+            matchMedia.addEventListener('change', mediaChangeHandler);
+            _applyTheme(node, params);
+        }
+    };
+};

package/theme/types.d.ts

@@ -0,0 +1,21 @@
+type CSSVarProperty = string;
+type CSSVarValue = undefined | string | number | boolean;
+/**
+ * A theme consisting of CSS variable property/value pairs.
+ */
+export type Theme = Record<CSSVarProperty, CSSVarValue>;
+/**
+ * Parameters passed to the theme action.
+ */
+export type ThemeActionParams = {
+    /**
+     * The theme to use.
+     */
+    theme: Theme;
+    /**
+     * When true, applies the theme to the document.DocumentElement.
+     * Otherwise applies the theme to the element where this action was used.
+     */
+    atDocumentRoot?: boolean;
+};
+export {};

package/theme/types.js

@@ -0,0 +1 @@
+export {};