@arsedizioni/ars-utils 22.5.2 → 22.5.4

package/styles/ui.colors.scss

@@ -1,100 +1,130 @@
-:root {
+// Palette ARS.
+//
+// I token vivono in tre posti e non in due, e l'ordine conta:
+//
+//   :root                                  i valori chiari, sempre
+//   @media (prefers-color-scheme: dark)    il sistema operativo, finche' nessuno ha scelto
+//   body.light / body.dark                 la scelta dell'utente, che batte il sistema
+//
+// L'ultima riga e' quella che serve: `ThemeService` scrive `light` o `dark` su <body>, anche
+// quando la preferenza e' 'auto' (in quel caso risolve lui contro il sistema). Senza quei due
+// blocchi, un utente che forza il tema scuro su una macchina chiara si ritrova i componenti
+// Material scuri e tutto cio' che dipende da questi token ancora chiaro.
+
+@mixin ars-light-tokens {
+
+// Colors
+--ars-color-link: #03A9F4;
+--ars-color-link-low: #0288D1;
+--ars-color-accent: #7894ae;
+--ars-color-accent-low: #456179;
+--ars-color-primary: #00a293;
+--ars-color-primary-low: #006a60;
+--ars-color-primary-hi: #12c0ae;
+--ars-color-secondary: #4a635f;
+--ars-color-secondary-low: #27403c;
+--ars-color-error: #ff5449;
+--ars-color-error-low: #a80710;
+--ars-color-ok: #388E3C;
+--ars-color-ok-low: #29692c;
+--ars-color-warning: #FFC107;
+--ars-color-warning-low: #FFA000;
+--ars-color-text: #191c1b;
+--ars-color-text-low: #e0e2e5;
+--ars-color-divider: #757d87;
+--ars-color-overlay: rgba(255, 255, 255, 0.75);
+--ars-color-background: #f7faf8;
+// Dialog surface: shared by the Material dialogs and by ui.shell, which reproduces
+// their look without Material. Each one resolves to the app Material theme when there is
+// one, and to a literal when there is not.
+--ars-dialog-background-color: var(--mat-sys-surface-container-high, #e6eae8);
+--ars-color-on-primary: var(--mat-sys-on-primary, #ffffff);
+--ars-scrim-color: rgba(0, 0, 0, 0.32);
+--ars-dialog-radius: 28px;
+--ars-dialog-elevation: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.3);
+// Busy overlay and progress indicators (ui.shell reproduces them without Material)
+--ars-busy-scrim-color: rgba(0, 0, 0, 0.42);
+--ars-progress-track-color: var(--mat-sys-surface-container-highest, #d5dbd8);
+--ars-busy-bare-color: #ffffff;
+// Stacking: cdk-overlay-container sits at 1000, so the shell overlays go above it and the
+// busy one below the message, which is the order the CDK stack used to give for free.
+--ars-shell-z-index: 1100;
+--ars-busy-z-index: 1090;
+// Drawer  
+--ars-drawer-background-color: #eff1ef;
+--ars-drawer-divider-color: #6f7977;
+// Item
+--ars-item-hover-background-color: var(--mat-icon-button-ripple-color);
+--ars-item-selected-background-color: #EAEEED;
+--ars-dialog-item-selected-background-color: rgba(206, 209, 210, 0.9) !important;
+--ars-dialog-item-hover-background-color: rgba(234, 236, 239, 0.9) !important;
+// Filter Box
+--ars-filterbox-filtered-background-color: #f9fbe7;
+// File Preview
+--ars-filepreview-content-background-color: #f7faf8;
+}
+
+@mixin ars-dark-tokens {
+
   // Colors
   --ars-color-link: #03A9F4;
   --ars-color-link-low: #0288D1;
-  --ars-color-accent: #7894ae;
-  --ars-color-accent-low: #456179;
-  --ars-color-primary: #00a293;
-  --ars-color-primary-low: #006a60;
-  --ars-color-primary-hi: #12c0ae;
-  --ars-color-secondary: #4a635f;
-  --ars-color-secondary-low: #27403c;
+  --ars-color-accent: #adcae6;
+  --ars-color-accent-low: #5e7a93;
+  --ars-color-primary: #53dbc9;
+  --ars-color-primary-low: #008679;
+  --ars-color-primary-hi: #74f8e5;
+  --ars-color-secondary: #b1ccc6;
+  --ars-color-secondary-low: #627c77;
   --ars-color-error: #ff5449;
   --ars-color-error-low: #a80710;
-  --ars-color-ok: #388E3C;
-  --ars-color-ok-low: #29692c;
+  --ars-color-error-text: #191c1b;
+  --ars-color-ok: #4CAF50;
+  --ars-color-ok-low: #3f8f41;
   --ars-color-warning: #FFC107;
   --ars-color-warning-low: #FFA000;
-  --ars-color-text: #191c1b;
-  --ars-color-text-low: #e0e2e5;
+  --ars-color-warning-text: #191c1b;
+  --ars-color-text: #e0e2e5;
+  --ars-color-text-low: #191c1b;
   --ars-color-divider: #757d87;
-  --ars-color-overlay: rgba(255, 255, 255, 0.75);
-  --ars-color-background: #f7faf8;
-  // Dialog surface: shared by the Material dialogs and by ui.shell, which reproduces
-  // their look without Material. Each one resolves to the app Material theme when there is
-  // one, and to a literal when there is not.
-  --ars-dialog-background-color: var(--mat-sys-surface-container-high, #e6eae8);
-  --ars-color-on-primary: var(--mat-sys-on-primary, #ffffff);
-  --ars-scrim-color: rgba(0, 0, 0, 0.32);
-  --ars-dialog-radius: 28px;
-  --ars-dialog-elevation: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.3);
-  // Busy overlay and progress indicators (ui.shell reproduces them without Material)
-  --ars-busy-scrim-color: rgba(0, 0, 0, 0.42);
-  --ars-progress-track-color: var(--mat-sys-surface-container-highest, #d5dbd8);
-  --ars-busy-bare-color: #ffffff;
-  // Stacking: cdk-overlay-container sits at 1000, so the shell overlays go above it and the
-  // busy one below the message, which is the order the CDK stack used to give for free.
-  --ars-shell-z-index: 1100;
-  --ars-busy-z-index: 1090;
-  // Drawer  
-  --ars-drawer-background-color: #eff1ef;
-  --ars-drawer-divider-color: #6f7977;
+  --ars-color-overlay: rgba(0, 0, 0, 0.65);
+  --ars-color-background: #101413;
+
+  // Dialog surface
+  --ars-dialog-background-color: var(--mat-sys-surface-container-high, #282a29);
+  --ars-color-on-primary: var(--mat-sys-on-primary, #00382f);
+  --ars-scrim-color: rgba(0, 0, 0, 0.6);
+  // Busy overlay and progress indicators
+  --ars-busy-scrim-color: rgba(0, 0, 0, 0.6);
+  --ars-progress-track-color: var(--mat-sys-surface-container-highest, #3a3d3c);
+  // Drawer
+  --ars-drawer-background-color: #212223;
+  --ars-drawer-divider-color: #899390;
   // Item
   --ars-item-hover-background-color: var(--mat-icon-button-ripple-color);
-  --ars-item-selected-background-color: #EAEEED;
-  --ars-dialog-item-selected-background-color: rgba(206, 209, 210, 0.9) !important;
-  --ars-dialog-item-hover-background-color: rgba(234, 236, 239, 0.9) !important;
+  --ars-item-selected-background-color: #1B1F1E;
+  --ars-dialog-item-selected-background-color: rgba(63, 67, 66, 0.9) !important;
+  --ars-dialog-item-hover-background-color: rgba(38, 42, 41, 0.9) !important;
   // Filter Box
-  --ars-filterbox-filtered-background-color: #f9fbe7;
+  --ars-filterbox-filtered-background-color: #c6c7b8;
   // File Preview
-  --ars-filepreview-content-background-color: #f7faf8;
-}
-
-@media (prefers-color-scheme: dark) {
-
-  :root {
-    // Colors
-    --ars-color-link: #03A9F4;
-    --ars-color-link-low: #0288D1;
-    --ars-color-accent: #adcae6;
-    --ars-color-accent-low: #5e7a93;
-    --ars-color-primary: #53dbc9;
-    --ars-color-primary-low: #008679;
-    --ars-color-primary-hi: #74f8e5;
-    --ars-color-secondary: #b1ccc6;
-    --ars-color-secondary-low: #627c77;
-    --ars-color-error: #ff5449;
-    --ars-color-error-low: #a80710;
-    --ars-color-error-text: #191c1b;
-    --ars-color-ok: #4CAF50;
-    --ars-color-ok-low: #3f8f41;
-    --ars-color-warning: #FFC107;
-    --ars-color-warning-low: #FFA000;
-    --ars-color-warning-text: #191c1b;
-    --ars-color-text: #e0e2e5;
-    --ars-color-text-low: #191c1b;
-    --ars-color-divider: #757d87;
-    --ars-color-overlay: rgba(0, 0, 0, 0.65);
-    --ars-color-background: #101413;
-
-    // Dialog surface
-    --ars-dialog-background-color: var(--mat-sys-surface-container-high, #282a29);
-    --ars-color-on-primary: var(--mat-sys-on-primary, #00382f);
-    --ars-scrim-color: rgba(0, 0, 0, 0.6);
-    // Busy overlay and progress indicators
-    --ars-busy-scrim-color: rgba(0, 0, 0, 0.6);
-    --ars-progress-track-color: var(--mat-sys-surface-container-highest, #3a3d3c);
-    // Drawer
-    --ars-drawer-background-color: #212223;
-    --ars-drawer-divider-color: #899390;
-    // Item
-    --ars-item-hover-background-color: var(--mat-icon-button-ripple-color);
-    --ars-item-selected-background-color: #1B1F1E;
-    --ars-dialog-item-selected-background-color: rgba(63, 67, 66, 0.9) !important;
-    --ars-dialog-item-hover-background-color: rgba(38, 42, 41, 0.9) !important;
-    // Filter Box
-    --ars-filterbox-filtered-background-color: #c6c7b8;
-    // File Preview
-    --ars-filepreview-content-background-color: #101413;
-  }
-}
+  --ars-filepreview-content-background-color: #101413;
+}
+
+:root {
+  @include ars-light-tokens;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include ars-dark-tokens;
+  }
+}
+
+body.light {
+  @include ars-light-tokens;
+}
+
+body.dark {
+  @include ars-dark-tokens;
+}

package/types/arsedizioni-ars-utils-ui.shell.d.ts

@@ -24,8 +24,9 @@ interface ShellMessageData {
 /**
  * Handle over an open shell message.
  *
- * Not a `MatDialogRef`: there is no Material here, and the shell never needs to reach into
- * the component instance. Closing it and knowing when it closed is the whole contract.
+ * Not a `MatDialogRef` — there is no Material here — but the two members a caller actually
+ * uses of one are the same, and mean the same thing, so moving a call site between
+ * `DialogService` and `ShellService` does not change how its result is awaited.
  */
 interface ShellMessageRef {
     /**
@@ -33,8 +34,16 @@ interface ShellMessageRef {
      * @returns void
      */
     close(): void;
-    /** Resolves once the message has been removed from the DOM. */
-    readonly closed: Promise<void>;
+    /**
+     * Emits once and completes when the message has been taken off the screen, whichever way it
+     * was dismissed — the button, Escape, the backdrop, the auto-dismiss timer, or a `close()`.
+     *
+     * Like `MatDialogRef.afterClosed()`, and like it in the corner case too: subscribing after
+     * the message is already gone completes without emitting, so it is not a way to ask whether
+     * it was closed.
+     * @returns An observable of the dismissal.
+     */
+    afterClosed(): Observable<void>;
 }
 
 /** Visual style of the busy indicator. */
@@ -53,6 +62,24 @@ type ShellBusyMode = 'determinate' | 'indeterminate';
  * class on the host, never a `createComponent`, so the 40-odd calls a screen costs nothing.
  */
 declare class ShellBusyComponent {
+    private readonly themeService;
+    /**
+     * True when the panel must paint itself dark.
+     *
+     * Read from {@link ThemeService} and not from `prefers-color-scheme`, because the two do not
+     * always agree: the service is what the user chose, and it may be forcing dark on a machine
+     * that is on light. Following the OS instead would leave this panel the only light thing on a
+     * dark screen.
+     */
+    protected readonly dark: _angular_core.WritableSignal<boolean>;
+    /**
+     * Keeps {@link dark} in step with the service, now and at every later change.
+     *
+     * `'auto'` is resolved through `getTheme()`, which is the only thing that knows what the
+     * operating system is currently on.
+     * @returns void
+     */
+    private followTheme;
     /** Whether the overlay is on screen. Hidden with `display: none`, so it costs no layout. */
     readonly visible: _angular_core.WritableSignal<boolean>;
     /** Visual style of the indicator. */
@@ -65,6 +92,7 @@ declare class ShellBusyComponent {
     readonly message: _angular_core.WritableSignal<string>;
     /** Circumference of the spinner circle, bound to `stroke-dasharray`. */
     protected readonly circumference: number;
+    constructor();
     /** Length of the spinner arc still to be drawn, derived from {@link progress}. */
     protected readonly dashOffset: _angular_core.Signal<number>;
     /**
@@ -110,7 +138,7 @@ declare class ShellService {
     private readonly environmentInjector;
     private messageRef?;
     private messageKind?;
-    private resolveClosed?;
+    private messageClosed?;
     private previousOverflow?;
     private previouslyFocused?;
     private busyRef?;
@@ -154,7 +182,11 @@ declare class ShellService {
      */
     private showMessage;
     /**
-     * Builds the handle returned to callers, wiring its `closed` promise to the current message.
+     * Builds the handle returned to callers.
+     *
+     * The subject is captured now rather than read at call time, so `afterClosed()` keeps
+     * answering about the message this handle was given for, even once another one has taken
+     * its place on screen.
      * @returns The handle over the message currently on screen.
      */
     private messageHandle;
@@ -281,6 +313,7 @@ declare class BusyTimer {
 declare class ShellMessageComponent {
     /** Emitted when the user dismisses the message, whichever way they did it. */
     readonly closed: _angular_core.OutputEmitterRef<void>;
+    private readonly themeService;
     private readonly panel;
     private readonly okButton;
     /** Unique id tying the panel to its heading for assistive technology. */
@@ -292,6 +325,23 @@ declare class ShellMessageComponent {
     private dismissTimer?;
     private copiedTimer?;
     private closing;
+    /**
+     * True when the panel must paint itself dark.
+     *
+     * Read from {@link ThemeService} and not from `prefers-color-scheme`, because the two do not
+     * always agree: the service is what the user chose, and it may be forcing dark on a machine
+     * that is on light. Following the OS instead would leave this panel the only light thing on a
+     * dark screen.
+     */
+    protected readonly dark: _angular_core.WritableSignal<boolean>;
+    /**
+     * Keeps {@link dark} in step with the service, now and at every later change.
+     *
+     * `'auto'` is resolved through `getTheme()`, which is the only thing that knows what the
+     * operating system is currently on.
+     * @returns void
+     */
+    private followTheme;
     constructor();
     /**
      * Replaces the content shown by the panel and restarts the auto-dismiss timer.