@scion/workbench 19.0.0-beta.2 → 20.0.0-beta.1

package/README.md

@@ -1,13 +1,15 @@
 SCION Workbench
 ===============
 
-SCION Workbench enables the creation of Angular web applications that require a flexible layout to arrange content side-by-side or stacked, all personalizable by the user via drag & drop. This type of layout is ideal for applications with non-linear workflows, enabling users to work on content in parallel.
+SCION Workbench enables the creation of Angular web applications that require a flexible layout to display content side-by-side or stacked, all personalizable by the user via drag & drop. This type of layout is ideal for applications with non-linear workflows, enabling users to work on content in parallel. Examples include business applications, scientific or development tools, and command & control interfaces.
 
-The workbench layout is a grid of parts. Parts are aligned relative to each other. Each part is a stack of views. Content is displayed in views or parts.
+An application can have multiple layouts, called perspectives. A perspective defines an arrangement of parts and views. Parts can be docked to the side or positioned relative to each other. Views are stacked in parts and can be dragged to other parts. Content can be displayed in both parts and views.
 
-The layout can be divided into a main and a peripheral area, with the main area as the primary place for opening views. The peripheral area arranges parts around the main area to provide navigation or context-sensitive assistance to support the user's workflow. Defining a main area is optional and recommended for applications requiring a dedicated and maximizable area for user interaction.
+Users can personalize the layout of a perspective and switch between perspectives. The workbench remembers the last layout of each perspective, restoring it the next time it is activated.
 
-Multiple layouts, called perspectives, are supported. Perspectives can be switched. Only one perspective is active at a time. Perspectives share the same main area, if any.
+A perspective typically has a main area part and other parts docked to the side, providing navigation and context-sensitive assistance to support the user's workflow. Initially empty or displaying a welcome page, the main area is where the workbench opens new views by default. Users can split the main area (or any other part) by dragging views side-by-side, vertically and horizontally, even across windows.
+
+Unlike any other part, the main area is shared between perspectives, and its layout is not reset when resetting perspectives. Having a main area and multiple perspectives is optional.
 
 The sources for this package are in [SCION Workbench](https://github.com/SchweizerischeBundesbahnen/scion-workbench) repo. Please file issues and pull requests against that repo.
 

package/_index.scss

@@ -108,10 +108,10 @@
  * The icon font can be customized using the [IcoMoon](https://icomoon.io/app) web application by importing the icon font definition file `scion-workbench-icons.json`.
  *
  * If deploying the application in a subdirectory, use a relative directory path for the browser to load the icon files relative to the document base URL (as specified in the `<base>` HTML tag).
- * Note that using a relative path requires to exclude the icon files from the application build. Depending on building the application with esbuild `@angular-devkit/build-angular:application`
+ * Note that using a relative path requires to exclude the icon files from the application build. Depending on building the application with esbuild `@angular/build:application`
  * or webpack `@angular-devkit/build-angular:browser`, different steps are required to exclude the icons from the build.
  *
- * ### Using @angular-devkit/build-angular:application (esbuild)
+ * ### Using @angular/build:application (esbuild, default since Angular 20)
  * Configure the `@scion/workbench` SCSS module to load the icon font relative to the document base URL:
  * ```scss
  * @use '@scion/workbench' with (

package/design/_workbench-dark-theme-design-tokens.scss

@@ -2,18 +2,27 @@
  * Design tokens specific to the SCION Workbench.
  */
 $tokens: (
+  --sci-workbench-layout-panel-left-width: 300,
+  --sci-workbench-layout-panel-right-width: 300,
+  --sci-workbench-layout-panel-bottom-height: 250,
+  --sci-workbench-layout-panel-align: justify,
+  --sci-workbench-layout-panel-animate: true,
   --sci-workbench-view-background-color: var(--sci-workbench-part-background-color),
   --sci-workbench-view-peripheral-background-color: var(--sci-workbench-part-peripheral-background-color),
   --sci-workbench-part-background-color: var(--sci-color-background-primary),
   --sci-workbench-part-peripheral-background-color: var(--sci-color-gray-75),
+  --sci-workbench-part-title-font-family: inherit,
+  --sci-workbench-part-title-font-weight: 500,
+  --sci-workbench-part-title-font-size: 1rem,
   --sci-workbench-part-bar-padding-top: .25rem,
-  --sci-workbench-part-bar-padding-inline: .1rem,
+  --sci-workbench-part-bar-padding-inline: .5rem,
   --sci-workbench-part-bar-background-color: var(--sci-color-background-secondary),
   --sci-workbench-part-bar-divider-color: var(--sci-color-border),
-  --sci-workbench-part-bar-actions-padding-inline: .25rem,
+  --sci-workbench-part-bar-actions-padding-inline: 0,
   --sci-workbench-part-bar-actions-gap: .5em,
+  --sci-workbench-part-bar-border-bottom-width: 1px,
   --sci-workbench-part-divider-color: var(--sci-color-border),
-  --sci-workbench-part-divider-color-hover: var(--sci-workbench-sashbox-splitter-background-color),
+  --sci-workbench-part-divider-color-hover: var(--sci-workbench-part-divider-color),
   --sci-workbench-part-divider-size: 1px,
   --sci-workbench-part-divider-size-hover: 9px,
   --sci-workbench-part-divider-touch-target-size: 5px,
@@ -21,24 +30,49 @@ $tokens: (
   --sci-workbench-part-divider-opacity-hover: .125,
   --sci-workbench-part-dropzone-background-color: color-mix(in srgb, var(--sci-color-gray-900) 10%, transparent),
   --sci-workbench-part-dropzone-border-style: none,
-  --sci-workbench-part-dropzone-border-color: none,
-  --sci-workbench-part-dropzone-border-radius: none,
+  --sci-workbench-part-dropzone-border-color: unset,
+  --sci-workbench-part-dropzone-border-radius: unset,
   --sci-workbench-part-peripheral-bar-background-color: var(--sci-color-gray-100),
-  --sci-workbench-part-active-tab-active-text-color: var(--sci-color-accent),
+  --sci-workbench-part-active-tab-text-color-active: var(--sci-color-accent),
   --sci-workbench-part-hidden-tab-count-size: x-small,
-  --sci-workbench-tab-height: 2.5rem,
-  --sci-workbench-tab-min-width: 5rem,
+  --sci-workbench-tab-cursor: var(--sci-workbench-button-cursor),
+  --sci-workbench-tab-height: 2.25rem,
+  --sci-workbench-tab-min-width: 2.5rem,
   --sci-workbench-tab-max-width: 15rem,
   --sci-workbench-tab-text-color: var(--sci-color-text),
+  --sci-workbench-tab-text-color-active: var(--sci-color-text),
   --sci-workbench-tab-border-color: var(--sci-color-border),
   --sci-workbench-tab-border-radius: var(--sci-corner-small),
-  --sci-workbench-tab-padding-inline: .725em,
-  --sci-workbench-tab-hover-background-color: none,
+  --sci-workbench-tab-border-width: 1px,
+  --sci-workbench-tab-border-top-width: var(--sci-workbench-tab-border-width),
+  --sci-workbench-tab-padding-inline: .75em,
+  --sci-workbench-tab-padding-inline-hover: .5em,
+  --sci-workbench-tab-padding-block-hover: .2em,
+  --sci-workbench-tab-background-color-hover: var(--sci-workbench-button-background-color-hover), // use `unset` to remove hover effect
+  --sci-workbench-tab-font-family: inherit,
+  --sci-workbench-tab-font-weight: 400,
+  --sci-workbench-tab-font-size: 1rem,
+  --sci-workbench-tab-heading-font-family: inherit,
+  --sci-workbench-tab-heading-font-weight: 300,
+  --sci-workbench-tab-heading-font-size: .9em,
   --sci-workbench-tab-drag-border-color: var(--sci-color-accent),
-  --sci-workbench-tab-drag-text-color: var(--sci-workbench-part-active-tab-active-text-color),
+  --sci-workbench-tab-drag-text-color: var(--sci-workbench-part-active-tab-text-color-active),
   --sci-workbench-tab-drag-border-color-disabled: var(--sci-color-gray-600),
   --sci-workbench-tab-drag-text-color-disabled: var(--sci-color-gray-600),
-  --sci-workbench-tab-active-text-color: var(--sci-color-text),
+  --sci-workbench-activity-bar-background-color: var(--sci-workbench-part-peripheral-background-color),
+  --sci-workbench-activity-bar-padding: .35em,
+  --sci-workbench-activity-item-cursor: default,
+  --sci-workbench-activity-item-background-color: transparent,
+  --sci-workbench-activity-item-background-color-hover: var(--sci-workbench-button-background-color-hover),
+  --sci-workbench-activity-item-background-color-active: color-mix(in srgb, var(--sci-workbench-button-background-color-active) 75%, var(--sci-static-color-black)),
+  --sci-workbench-activity-item-text-color: var(--sci-color-text),
+  --sci-workbench-activity-item-text-color-hover: var(--sci-workbench-activity-item-text-color),
+  --sci-workbench-activity-item-text-color-active: var(--sci-workbench-activity-item-text-color),
+  --sci-workbench-activity-item-border-color: transparent,
+  --sci-workbench-activity-item-border-radius: var(--sci-corner),
+  --sci-workbench-activity-item-border-width: 1px,
+  --sci-workbench-activity-item-padding: 3px,
+  --sci-workbench-activity-item-gap: .5em,
   --sci-workbench-notification-width: 350px,
   --sci-workbench-notification-severity-indicator-size: 6px,
   --sci-workbench-messagebox-max-width: 400px,
@@ -49,6 +83,8 @@ $tokens: (
   --sci-workbench-messagebox-title-font-weight: bold,
   --sci-workbench-messagebox-title-font-size: 1em,
   --sci-workbench-messagebox-text-align: start,
+  --sci-workbench-messagebox-action-background-color-hover: var(--sci-workbench-button-background-color-hover),
+  --sci-workbench-messagebox-action-cursor: var(--sci-workbench-button-cursor),
   --sci-workbench-dialog-padding: .75em,
   --sci-workbench-dialog-header-height: 2.75rem,
   --sci-workbench-dialog-header-background-color: var(--sci-color-background-elevation),
@@ -56,6 +92,10 @@ $tokens: (
   --sci-workbench-dialog-title-font-weight: normal,
   --sci-workbench-dialog-title-font-size: 1.1rem,
   --sci-workbench-dialog-title-align: center,
+  --sci-workbench-button-cursor: default,
+  --sci-workbench-button-background-color-hover: var(--sci-color-gray-200),
+  --sci-workbench-button-background-color-active: var(--sci-color-gray-300),
+  --sci-workbench-button-outline-width-focus: 2px,
   --sci-workbench-contextmenu-width: 18rem,
   --sci-throbber-color: var(--sci-color-accent),
 );

package/design/_workbench-icon-font.scss

@@ -9,7 +9,7 @@
  * This version is appended to the HTTP request as query parameter when fetching the icon font to support cache busting.
  * Update this version when adding, removing or changing icons.
  */
-$-version: 2;
+$-version: 3;
 
 $-default-icon-font-config: (
   // The font path must be root relative or excluded from the application build. Otherwise, the application build will fail

package/design/_workbench-light-theme-design-tokens.scss

@@ -2,18 +2,27 @@
  * Design tokens specific to the SCION Workbench.
  */
 $tokens: (
+  --sci-workbench-layout-panel-left-width: 300,
+  --sci-workbench-layout-panel-right-width: 300,
+  --sci-workbench-layout-panel-bottom-height: 250,
+  --sci-workbench-layout-panel-align: justify,
+  --sci-workbench-layout-panel-animate: true,
   --sci-workbench-view-background-color: var(--sci-workbench-part-background-color),
   --sci-workbench-view-peripheral-background-color: var(--sci-workbench-part-peripheral-background-color),
   --sci-workbench-part-background-color: var(--sci-color-background-primary),
-  --sci-workbench-part-peripheral-background-color: var(--sci-workbench-part-background-color),
+  --sci-workbench-part-peripheral-background-color: color-mix(in srgb, var(--sci-color-gray-100) 60%, var(--sci-static-color-white)),
+  --sci-workbench-part-title-font-family: inherit,
+  --sci-workbench-part-title-font-weight: 500,
+  --sci-workbench-part-title-font-size: 1rem,
   --sci-workbench-part-bar-padding-top: .25rem,
-  --sci-workbench-part-bar-padding-inline: .1rem,
+  --sci-workbench-part-bar-padding-inline: .5rem,
   --sci-workbench-part-bar-background-color: var(--sci-color-background-secondary),
   --sci-workbench-part-bar-divider-color: var(--sci-color-border),
-  --sci-workbench-part-bar-actions-padding-inline: .25rem,
+  --sci-workbench-part-bar-actions-padding-inline: 0,
   --sci-workbench-part-bar-actions-gap: .5em,
+  --sci-workbench-part-bar-border-bottom-width: 1px,
   --sci-workbench-part-divider-color: var(--sci-color-border),
-  --sci-workbench-part-divider-color-hover: var(--sci-workbench-sashbox-splitter-background-color),
+  --sci-workbench-part-divider-color-hover: var(--sci-workbench-part-divider-color),
   --sci-workbench-part-divider-size: 1px,
   --sci-workbench-part-divider-size-hover: 9px,
   --sci-workbench-part-divider-touch-target-size: 5px,
@@ -21,24 +30,49 @@ $tokens: (
   --sci-workbench-part-divider-opacity-hover: .125,
   --sci-workbench-part-dropzone-background-color: color-mix(in srgb, var(--sci-color-gray-900) 10%, transparent),
   --sci-workbench-part-dropzone-border-style: none,
-  --sci-workbench-part-dropzone-border-color: none,
-  --sci-workbench-part-dropzone-border-radius: none,
-  --sci-workbench-part-peripheral-bar-background-color: color-mix(in srgb, var(--sci-color-gray-200) 50%, transparent),
-  --sci-workbench-part-active-tab-active-text-color: var(--sci-color-accent),
+  --sci-workbench-part-dropzone-border-color: unset,
+  --sci-workbench-part-dropzone-border-radius: unset,
+  --sci-workbench-part-peripheral-bar-background-color: var(--sci-color-background-secondary),
+  --sci-workbench-part-active-tab-text-color-active: var(--sci-color-accent),
   --sci-workbench-part-hidden-tab-count-size: x-small,
-  --sci-workbench-tab-height: 2.5rem,
-  --sci-workbench-tab-min-width: 5rem,
+  --sci-workbench-tab-cursor: var(--sci-workbench-button-cursor),
+  --sci-workbench-tab-height: 2.25rem,
+  --sci-workbench-tab-min-width: 2.5rem,
   --sci-workbench-tab-max-width: 15rem,
   --sci-workbench-tab-text-color: var(--sci-color-text),
+  --sci-workbench-tab-text-color-active: var(--sci-color-text),
   --sci-workbench-tab-border-color: var(--sci-color-border),
   --sci-workbench-tab-border-radius: var(--sci-corner-small),
-  --sci-workbench-tab-padding-inline: .725em,
-  --sci-workbench-tab-hover-background-color: none,
+  --sci-workbench-tab-border-width: 1px,
+  --sci-workbench-tab-border-top-width: var(--sci-workbench-tab-border-width),
+  --sci-workbench-tab-padding-inline: .75em,
+  --sci-workbench-tab-padding-inline-hover: .5em,
+  --sci-workbench-tab-padding-block-hover: .2em,
+  --sci-workbench-tab-background-color-hover: var(--sci-workbench-button-background-color-hover), // use `unset` to remove hover effect
+  --sci-workbench-tab-font-family: inherit,
+  --sci-workbench-tab-font-weight: 400,
+  --sci-workbench-tab-font-size: 1rem,
+  --sci-workbench-tab-heading-font-family: inherit,
+  --sci-workbench-tab-heading-font-weight: 300,
+  --sci-workbench-tab-heading-font-size: .9em,
   --sci-workbench-tab-drag-border-color: var(--sci-color-accent),
-  --sci-workbench-tab-drag-text-color: var(--sci-workbench-part-active-tab-active-text-color),
+  --sci-workbench-tab-drag-text-color: var(--sci-workbench-part-active-tab-text-color-active),
   --sci-workbench-tab-drag-border-color-disabled: var(--sci-color-gray-600),
   --sci-workbench-tab-drag-text-color-disabled: var(--sci-color-gray-600),
-  --sci-workbench-tab-active-text-color: var(--sci-color-text),
+  --sci-workbench-activity-bar-background-color: var(--sci-workbench-part-peripheral-background-color),
+  --sci-workbench-activity-bar-padding: .35em,
+  --sci-workbench-activity-item-cursor: default,
+  --sci-workbench-activity-item-background-color: transparent,
+  --sci-workbench-activity-item-background-color-hover: var(--sci-workbench-button-background-color-hover),
+  --sci-workbench-activity-item-background-color-active: color-mix(in srgb, var(--sci-workbench-button-background-color-active) 75%, var(--sci-static-color-white)),
+  --sci-workbench-activity-item-text-color: var(--sci-color-text),
+  --sci-workbench-activity-item-text-color-hover: var(--sci-workbench-activity-item-text-color),
+  --sci-workbench-activity-item-text-color-active: var(--sci-workbench-activity-item-text-color),
+  --sci-workbench-activity-item-border-color: transparent,
+  --sci-workbench-activity-item-border-radius: var(--sci-corner),
+  --sci-workbench-activity-item-border-width: 1px,
+  --sci-workbench-activity-item-padding: 3px,
+  --sci-workbench-activity-item-gap: .5em,
   --sci-workbench-notification-width: 350px,
   --sci-workbench-notification-severity-indicator-size: 6px,
   --sci-workbench-messagebox-max-width: 400px,
@@ -49,6 +83,8 @@ $tokens: (
   --sci-workbench-messagebox-title-font-weight: bold,
   --sci-workbench-messagebox-title-font-size: 1em,
   --sci-workbench-messagebox-text-align: start,
+  --sci-workbench-messagebox-action-background-color-hover: var(--sci-workbench-button-background-color-hover),
+  --sci-workbench-messagebox-action-cursor: var(--sci-workbench-button-cursor),
   --sci-workbench-dialog-padding: .75em,
   --sci-workbench-dialog-header-height: 2.75rem,
   --sci-workbench-dialog-header-background-color: var(--sci-color-background-elevation),
@@ -56,5 +92,9 @@ $tokens: (
   --sci-workbench-dialog-title-font-weight: normal,
   --sci-workbench-dialog-title-font-size: 1.1rem,
   --sci-workbench-dialog-title-align: center,
+  --sci-workbench-button-cursor: default,
+  --sci-workbench-button-background-color-hover: color-mix(in srgb, var(--sci-color-gray-200) 95%, var(--sci-static-color-white)),
+  --sci-workbench-button-background-color-active: var(--sci-color-gray-300),
+  --sci-workbench-button-outline-width-focus: 2px,
   --sci-workbench-contextmenu-width: 18rem,
 );