@jolly-pixel/ui 1.0.1 → 2.0.0

package/dist/theme/tokens/scales.js

@@ -3,61 +3,61 @@ import { css } from "lit";
 /**
  * Shared spacing, motion, and numeric-font tokens.
  */
-export const scaleTokens = css `
-  :host {
-    --jolly-space-1: 4px;
-    --jolly-space-2: 8px;
-    --jolly-space-3: 12px;
-    --jolly-space-4: 16px;
-    --jolly-space-5: 20px;
-    --jolly-space-6: 24px;
-
-    /*
-     * Two radii with clearly different jobs: controls are nearly square, planes
-     * are visibly rounded, so the two never read as the same role.
-     */
-    --jolly-radius-sm: 2px;
-    --jolly-radius-md: 6px;
-
-    /*
-     * Rows own no outer spacing. The container that stacks them applies this gap,
-     * so consumers can stack fields flush when they want to.
-     */
-    --jolly-row-gap: var(--jolly-space-1);
-
-    /* Extra separation after folder groups, including reordered folders. */
-    --jolly-folder-gap: calc(var(--jolly-space-1) / 2);
-
-    /*
-     * Reserved leading space for the lock affordance. Zero by default; a
-     * collaborative container opts its subtree in, which buys the fixed inset
-     * that keeps lock state from shifting the row.
-     */
-    --jolly-gutter-width: 0px;
-
-    /* Optional shared column for trailing revert and presence chrome. */
-    --jolly-field-trailing-width: auto;
-
-    /*
-     * Trailing inset of a field row. Set it to 0 on a subtree whose fields sit
-     * beside folder headers, where the bar paints past the value otherwise.
-     */
-    --jolly-field-inset-end: var(--jolly-space-1);
-
-    --jolly-duration-fast: 100ms;
-    --jolly-duration-base: 160ms;
-    --jolly-easing: cubic-bezier(0.2, 0, 0.2, 1);
-
-    --jolly-font-family: "Roboto Mono", ui-monospace, sfmono-regular, "Cascadia Code",
-      consolas, monospace;
-    --jolly-font-numeric: "tabular-nums";
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :host {
-      --jolly-duration-fast: 0ms;
-      --jolly-duration-base: 0ms;
-    }
-  }
+export const scaleTokens = css `
+  :host {
+    --jolly-space-1: 4px;
+    --jolly-space-2: 8px;
+    --jolly-space-3: 12px;
+    --jolly-space-4: 16px;
+    --jolly-space-5: 20px;
+    --jolly-space-6: 24px;
+
+    /*
+     * Two radii with clearly different jobs: controls are nearly square, planes
+     * are visibly rounded, so the two never read as the same role.
+     */
+    --jolly-radius-sm: 2px;
+    --jolly-radius-md: 6px;
+
+    /*
+     * Rows own no outer spacing. The container that stacks them applies this gap,
+     * so consumers can stack fields flush when they want to.
+     */
+    --jolly-row-gap: var(--jolly-space-1);
+
+    /* Extra separation after folder groups, including reordered folders. */
+    --jolly-folder-gap: calc(var(--jolly-space-1) / 2);
+
+    /*
+     * Reserved leading space for the lock affordance. Zero by default; a
+     * collaborative container opts its subtree in, which buys the fixed inset
+     * that keeps lock state from shifting the row.
+     */
+    --jolly-gutter-width: 0px;
+
+    /* Optional shared column for trailing revert and presence chrome. */
+    --jolly-field-trailing-width: auto;
+
+    /*
+     * Trailing inset of a field row. Set it to 0 on a subtree whose fields sit
+     * beside folder headers, where the bar paints past the value otherwise.
+     */
+    --jolly-field-inset-end: var(--jolly-space-1);
+
+    --jolly-duration-fast: 100ms;
+    --jolly-duration-base: 160ms;
+    --jolly-easing: cubic-bezier(0.2, 0, 0.2, 1);
+
+    --jolly-font-family: "Roboto Mono", ui-monospace, sfmono-regular, "Cascadia Code",
+      consolas, monospace;
+    --jolly-font-numeric: "tabular-nums";
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      --jolly-duration-fast: 0ms;
+      --jolly-duration-base: 0ms;
+    }
+  }
 `;
 //# sourceMappingURL=scales.js.map

package/dist/theme/tokens/semantic.js

@@ -6,203 +6,203 @@ import { rampTokens } from "./ramps.js";
  * Planes are opaque and painted only by window level containers.
  * Leaves tint instead, so a control composites over whichever plane it lands on.
  */
-const surfaceTokens = css `
-  --jolly-surface: light-dark(var(--jolly-neutral-100), var(--jolly-neutral-900));
-  --jolly-surface-sunken: light-dark(var(--jolly-neutral-200), var(--jolly-neutral-950));
-  --jolly-surface-raised: light-dark(var(--jolly-neutral-0), var(--jolly-neutral-800));
+const surfaceTokens = css `
+  --jolly-surface: light-dark(var(--jolly-neutral-100), var(--jolly-neutral-900));
+  --jolly-surface-sunken: light-dark(var(--jolly-neutral-200), var(--jolly-neutral-950));
+  --jolly-surface-raised: light-dark(var(--jolly-neutral-0), var(--jolly-neutral-800));
 `;
 /**
  * The single interactive colour. Every control background is this ink at an
  * alpha stop, which is what keeps nested containers coherent without each
  * depth picking its own opaque ramp index.
  */
-const inkTokens = css `
-  --jolly-ink: light-dark(var(--jolly-neutral-900), var(--jolly-neutral-50));
-  --jolly-ink-danger: var(--jolly-danger-500);
-
-  --jolly-control-bg: color-mix(in oklab, var(--jolly-ink) 8%, transparent);
-  --jolly-control-bg-hover: color-mix(in oklab, var(--jolly-ink) 12%, transparent);
-  --jolly-control-bg-focus: color-mix(in oklab, var(--jolly-ink) 20%, transparent);
-  --jolly-control-bg-active: color-mix(in oklab, var(--jolly-ink) 26%, transparent);
-
-  /* Blue chrome separates container hierarchy from neutral leaf controls. */
-  --jolly-folder-header-bg: color-mix(
-    in oklab,
-    var(--jolly-accent-fill) 12%,
-    transparent
-  );
-  --jolly-folder-header-bg-hover: color-mix(
-    in oklab,
-    var(--jolly-accent-fill) 18%,
-    transparent
-  );
-  /* Inverted, so an action stays legible over the header pattern. */
-  --jolly-folder-action-fg: var(--jolly-surface);
-  --jolly-folder-action-bg: color-mix(
-    in oklab,
-    var(--jolly-ink) 84%,
-    var(--jolly-surface)
-  );
-  --jolly-folder-action-bg-hover: color-mix(
-    in oklab,
-    var(--jolly-ink) 92%,
-    var(--jolly-surface)
-  );
-  --jolly-folder-action-bg-focus: var(--jolly-ink);
-  --jolly-folder-action-bg-active: var(--jolly-ink);
-  /*
-   * Filled with danger ink, so a destructive action keeps that same weight.
-   * Its glyph is white in both themes, since the ground stays red in both.
-   */
-  --jolly-folder-action-danger-fg: var(--jolly-neutral-0);
-  --jolly-folder-action-danger-bg: var(--jolly-ink-danger);
-  --jolly-folder-action-danger-bg-hover: color-mix(
-    in oklab,
-    var(--jolly-ink-danger) 86%,
-    var(--jolly-ink)
-  );
-  --jolly-folder-action-danger-bg-focus: color-mix(
-    in oklab,
-    var(--jolly-ink-danger) 72%,
-    var(--jolly-ink)
-  );
-
-  --jolly-pane-header-bg: var(--jolly-accent-fill);
-  --jolly-dock-resize-bg: color-mix(
-    in oklab,
-    var(--jolly-accent-fill) 12%,
-    transparent
-  );
-  --jolly-dock-resize-bg-hover: color-mix(
-    in oklab,
-    var(--jolly-accent-fill) 18%,
-    transparent
-  );
-
-  /*
-   * A drop zone covers a whole dock rather than a handle, so it sits well below
-   * the resize wash: the same tint over that much area would read as a filled
-   * panel instead of as a place something can land.
-   */
-  --jolly-dock-zone-bg: color-mix(
-    in oklab,
-    var(--jolly-accent-fill) 6%,
-    transparent
-  );
-  --jolly-dock-zone-bg-armed: color-mix(
-    in oklab,
-    var(--jolly-accent-fill) 10%,
-    transparent
-  );
-
-  /* Below the rest stop, so a readonly control reads as inert rather than idle. */
-  --jolly-control-bg-muted: color-mix(in oklab, var(--jolly-ink) 4%, transparent);
-
-  /* Faint enough to locate the active row without competing with the control. */
-  --jolly-row-bg-focus: color-mix(in oklab, var(--jolly-ink) 5%, transparent);
-
-  /* Error re-tints the same mechanism, and starts above the hover stop so it
-     never reads as "the pointer is here". */
-  --jolly-invalid-bg: color-mix(in oklab, var(--jolly-ink-danger) 15%, transparent);
-  --jolly-invalid-bg-hover: color-mix(in oklab, var(--jolly-ink-danger) 20%, transparent);
-  --jolly-invalid-bg-focus: color-mix(in oklab, var(--jolly-ink-danger) 28%, transparent);
-
-  /* Slider and scrub tracks read as a recess rather than a filled control. */
-  --jolly-groove: color-mix(in oklab, var(--jolly-ink) 20%, transparent);
-
-  /* Dividers sit below the control fill, so they separate without ruling. */
-  --jolly-divider: color-mix(in oklab, var(--jolly-ink) 10%, transparent);
-
-  /*
-   * A control already filled with the accent has no room left to tint, so its
-   * hover and focus steps lighten the fill instead.
-   */
-  --jolly-accent-fill-hover: color-mix(in oklab, var(--jolly-accent-fill) 88%, white);
-  --jolly-accent-fill-focus: color-mix(in oklab, var(--jolly-accent-fill) 76%, white);
+const inkTokens = css `
+  --jolly-ink: light-dark(var(--jolly-neutral-900), var(--jolly-neutral-50));
+  --jolly-ink-danger: var(--jolly-danger-500);
+
+  --jolly-control-bg: color-mix(in oklab, var(--jolly-ink) 8%, transparent);
+  --jolly-control-bg-hover: color-mix(in oklab, var(--jolly-ink) 12%, transparent);
+  --jolly-control-bg-focus: color-mix(in oklab, var(--jolly-ink) 20%, transparent);
+  --jolly-control-bg-active: color-mix(in oklab, var(--jolly-ink) 26%, transparent);
+
+  /* Blue chrome separates container hierarchy from neutral leaf controls. */
+  --jolly-folder-header-bg: color-mix(
+    in oklab,
+    var(--jolly-accent-fill) 12%,
+    transparent
+  );
+  --jolly-folder-header-bg-hover: color-mix(
+    in oklab,
+    var(--jolly-accent-fill) 18%,
+    transparent
+  );
+  /* Inverted, so an action stays legible over the header pattern. */
+  --jolly-folder-action-fg: var(--jolly-surface);
+  --jolly-folder-action-bg: color-mix(
+    in oklab,
+    var(--jolly-ink) 84%,
+    var(--jolly-surface)
+  );
+  --jolly-folder-action-bg-hover: color-mix(
+    in oklab,
+    var(--jolly-ink) 92%,
+    var(--jolly-surface)
+  );
+  --jolly-folder-action-bg-focus: var(--jolly-ink);
+  --jolly-folder-action-bg-active: var(--jolly-ink);
+  /*
+   * Filled with danger ink, so a destructive action keeps that same weight.
+   * Its glyph is white in both themes, since the ground stays red in both.
+   */
+  --jolly-folder-action-danger-fg: var(--jolly-neutral-0);
+  --jolly-folder-action-danger-bg: var(--jolly-ink-danger);
+  --jolly-folder-action-danger-bg-hover: color-mix(
+    in oklab,
+    var(--jolly-ink-danger) 86%,
+    var(--jolly-ink)
+  );
+  --jolly-folder-action-danger-bg-focus: color-mix(
+    in oklab,
+    var(--jolly-ink-danger) 72%,
+    var(--jolly-ink)
+  );
+
+  --jolly-pane-header-bg: var(--jolly-accent-fill);
+  --jolly-dock-resize-bg: color-mix(
+    in oklab,
+    var(--jolly-accent-fill) 12%,
+    transparent
+  );
+  --jolly-dock-resize-bg-hover: color-mix(
+    in oklab,
+    var(--jolly-accent-fill) 18%,
+    transparent
+  );
+
+  /*
+   * A drop zone covers a whole dock rather than a handle, so it sits well below
+   * the resize wash: the same tint over that much area would read as a filled
+   * panel instead of as a place something can land.
+   */
+  --jolly-dock-zone-bg: color-mix(
+    in oklab,
+    var(--jolly-accent-fill) 6%,
+    transparent
+  );
+  --jolly-dock-zone-bg-armed: color-mix(
+    in oklab,
+    var(--jolly-accent-fill) 10%,
+    transparent
+  );
+
+  /* Below the rest stop, so a readonly control reads as inert rather than idle. */
+  --jolly-control-bg-muted: color-mix(in oklab, var(--jolly-ink) 4%, transparent);
+
+  /* Faint enough to locate the active row without competing with the control. */
+  --jolly-row-bg-focus: color-mix(in oklab, var(--jolly-ink) 5%, transparent);
+
+  /* Error re-tints the same mechanism, and starts above the hover stop so it
+     never reads as "the pointer is here". */
+  --jolly-invalid-bg: color-mix(in oklab, var(--jolly-ink-danger) 15%, transparent);
+  --jolly-invalid-bg-hover: color-mix(in oklab, var(--jolly-ink-danger) 20%, transparent);
+  --jolly-invalid-bg-focus: color-mix(in oklab, var(--jolly-ink-danger) 28%, transparent);
+
+  /* Slider and scrub tracks read as a recess rather than a filled control. */
+  --jolly-groove: color-mix(in oklab, var(--jolly-ink) 20%, transparent);
+
+  /* Dividers sit below the control fill, so they separate without ruling. */
+  --jolly-divider: color-mix(in oklab, var(--jolly-ink) 10%, transparent);
+
+  /*
+   * A control already filled with the accent has no room left to tint, so its
+   * hover and focus steps lighten the fill instead.
+   */
+  --jolly-accent-fill-hover: color-mix(in oklab, var(--jolly-accent-fill) 88%, white);
+  --jolly-accent-fill-focus: color-mix(in oklab, var(--jolly-accent-fill) 76%, white);
 `;
 /**
  * Public semantic tokens built from the internal ramps.
  */
-const semanticTokens = css `
-  --jolly-border: light-dark(var(--jolly-neutral-300), var(--jolly-neutral-700));
-  --jolly-border-strong: light-dark(var(--jolly-neutral-500), var(--jolly-neutral-500));
-
-  --jolly-text: light-dark(var(--jolly-neutral-900), var(--jolly-neutral-50));
-  --jolly-text-muted: light-dark(var(--jolly-neutral-600), var(--jolly-neutral-400));
-  --jolly-text-on-fill: var(--jolly-neutral-0);
-
-  --jolly-accent-fill: var(--jolly-accent-600);
-  --jolly-accent-text: light-dark(var(--jolly-accent-700), var(--jolly-accent-300));
-  --jolly-separator-label: var(--jolly-accent-text);
-  --jolly-separator-rule: color-mix(
-    in oklab,
-    var(--jolly-accent-text) 28%,
-    transparent
-  );
-
-  --jolly-focus-ring: light-dark(var(--jolly-accent-600), var(--jolly-accent-400));
-  --jolly-danger: light-dark(var(--jolly-danger-700), var(--jolly-danger-300));
-  --jolly-danger-border: light-dark(var(--jolly-danger-500), var(--jolly-danger-300));
-  --jolly-warning: light-dark(var(--jolly-warning-700), var(--jolly-warning-300));
-  --jolly-success: light-dark(var(--jolly-success-700), var(--jolly-success-300));
-
-  --jolly-modified: light-dark(var(--jolly-accent-600), var(--jolly-accent-400));
-  --jolly-locked: light-dark(var(--jolly-accent-600), var(--jolly-accent-400));
-
-  --jolly-shadow-overlay: 0 2px 8px light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.44));
-  --jolly-shadow-floating: 0 4px 16px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.5));
-  --jolly-shadow-modal: 0 12px 40px light-dark(rgb(0 0 0 / 0.24), rgb(0 0 0 / 0.6));
+const semanticTokens = css `
+  --jolly-border: light-dark(var(--jolly-neutral-300), var(--jolly-neutral-700));
+  --jolly-border-strong: light-dark(var(--jolly-neutral-500), var(--jolly-neutral-500));
+
+  --jolly-text: light-dark(var(--jolly-neutral-900), var(--jolly-neutral-50));
+  --jolly-text-muted: light-dark(var(--jolly-neutral-600), var(--jolly-neutral-400));
+  --jolly-text-on-fill: var(--jolly-neutral-0);
+
+  --jolly-accent-fill: var(--jolly-accent-600);
+  --jolly-accent-text: light-dark(var(--jolly-accent-700), var(--jolly-accent-300));
+  --jolly-separator-label: var(--jolly-accent-text);
+  --jolly-separator-rule: color-mix(
+    in oklab,
+    var(--jolly-accent-text) 28%,
+    transparent
+  );
+
+  --jolly-focus-ring: light-dark(var(--jolly-accent-600), var(--jolly-accent-400));
+  --jolly-danger: light-dark(var(--jolly-danger-700), var(--jolly-danger-300));
+  --jolly-danger-border: light-dark(var(--jolly-danger-500), var(--jolly-danger-300));
+  --jolly-warning: light-dark(var(--jolly-warning-700), var(--jolly-warning-300));
+  --jolly-success: light-dark(var(--jolly-success-700), var(--jolly-success-300));
+
+  --jolly-modified: light-dark(var(--jolly-accent-600), var(--jolly-accent-400));
+  --jolly-locked: light-dark(var(--jolly-accent-600), var(--jolly-accent-400));
+
+  --jolly-shadow-overlay: 0 2px 8px light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.44));
+  --jolly-shadow-floating: 0 4px 16px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.5));
+  --jolly-shadow-modal: 0 12px 40px light-dark(rgb(0 0 0 / 0.24), rgb(0 0 0 / 0.6));
 `;
 /**
  * Scope-host theme tokens with light and dark variants.
  */
-export const themeTokens = css `
-  :host {
-    color-scheme: light dark;
-    ${rampTokens}
-    ${surfaceTokens}
-    ${inkTokens}
-    ${semanticTokens}
-  }
-
-  :host([theme="light"]) {
-    color-scheme: light;
-  }
-
-  :host([theme="dark"]) {
-    color-scheme: dark;
-  }
-
-  /*
-   * The design carries control boundaries with fill rather than an outline, which
-   * the forced-colors palette flattens away. Restoring a system border here keeps
-   * the controls operable without affecting the default design.
-   */
-  @media (forced-colors: active) {
-    :host {
-      --jolly-control-bg: ButtonFace;
-      --jolly-control-bg-hover: ButtonFace;
-      --jolly-control-bg-focus: ButtonFace;
-      --jolly-control-bg-active: ButtonFace;
-      --jolly-folder-header-bg: ButtonFace;
-      --jolly-folder-header-bg-hover: ButtonFace;
-      --jolly-folder-action-fg: ButtonText;
-      --jolly-folder-action-bg: ButtonFace;
-      --jolly-folder-action-bg-hover: ButtonFace;
-      --jolly-folder-action-bg-focus: ButtonFace;
-      --jolly-folder-action-bg-active: ButtonFace;
-      --jolly-folder-action-danger-fg: ButtonText;
-      --jolly-folder-action-danger-bg: ButtonFace;
-      --jolly-folder-action-danger-bg-hover: ButtonFace;
-      --jolly-folder-action-danger-bg-focus: ButtonFace;
-      --jolly-pane-header-bg: ButtonFace;
-      --jolly-dock-resize-bg: ButtonFace;
-      --jolly-dock-resize-bg-hover: Highlight;
-      --jolly-separator-label: CanvasText;
-      --jolly-separator-rule: ButtonBorder;
-      --jolly-row-bg-focus: transparent;
-      --jolly-groove: ButtonBorder;
-    }
-  }
+export const themeTokens = css `
+  :host {
+    color-scheme: light dark;
+    ${rampTokens}
+    ${surfaceTokens}
+    ${inkTokens}
+    ${semanticTokens}
+  }
+
+  :host([theme="light"]) {
+    color-scheme: light;
+  }
+
+  :host([theme="dark"]) {
+    color-scheme: dark;
+  }
+
+  /*
+   * The design carries control boundaries with fill rather than an outline, which
+   * the forced-colors palette flattens away. Restoring a system border here keeps
+   * the controls operable without affecting the default design.
+   */
+  @media (forced-colors: active) {
+    :host {
+      --jolly-control-bg: ButtonFace;
+      --jolly-control-bg-hover: ButtonFace;
+      --jolly-control-bg-focus: ButtonFace;
+      --jolly-control-bg-active: ButtonFace;
+      --jolly-folder-header-bg: ButtonFace;
+      --jolly-folder-header-bg-hover: ButtonFace;
+      --jolly-folder-action-fg: ButtonText;
+      --jolly-folder-action-bg: ButtonFace;
+      --jolly-folder-action-bg-hover: ButtonFace;
+      --jolly-folder-action-bg-focus: ButtonFace;
+      --jolly-folder-action-bg-active: ButtonFace;
+      --jolly-folder-action-danger-fg: ButtonText;
+      --jolly-folder-action-danger-bg: ButtonFace;
+      --jolly-folder-action-danger-bg-hover: ButtonFace;
+      --jolly-folder-action-danger-bg-focus: ButtonFace;
+      --jolly-pane-header-bg: ButtonFace;
+      --jolly-dock-resize-bg: ButtonFace;
+      --jolly-dock-resize-bg-hover: Highlight;
+      --jolly-separator-label: CanvasText;
+      --jolly-separator-rule: ButtonBorder;
+      --jolly-row-bg-focus: transparent;
+      --jolly-groove: ButtonBorder;
+    }
+  }
 `;
 //# sourceMappingURL=semantic.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jolly-pixel/ui",
   "description": "Common and System's UI for JollyPixel's editors",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "type": "module",
   "exports": {
     ".": {
@@ -37,7 +37,8 @@
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "repository": {
     "type": "git",
@@ -56,7 +57,7 @@
   "author": "GENTILHOMME Thomas <gentilhomme.thomas@gmail.com>",
   "license": "MIT",
   "peerDependencies": {
-    "@jolly-pixel/network": "^1.1.0",
+    "@jolly-pixel/network": "^2.0.0",
     "lit": "^3.3.0"
   },
   "peerDependenciesMeta": {
@@ -66,10 +67,10 @@
   },
   "dependencies": {
     "@jolly-pixel/color": "1.0.0",
-    "@jolly-pixel/resize-handle": "1.1.0"
+    "@jolly-pixel/resize-handle": "1.2.0"
   },
   "devDependencies": {
-    "@jolly-pixel/network": "1.1.0",
+    "@jolly-pixel/network": "2.0.0",
     "lit": "3.3.3"
   }
 }