@scion/components 22.2.0 → 22.4.0

package/_index.scss

@@ -60,7 +60,13 @@
  * ```
  *
  * ## SCION Design Tokens
- * SCION supports the following design tokens:
+ * SCION uses the following design tokens:
+ *
+ * ### Component Design Tokens
+ * Tokens specific to SCION Components.
+ *
+ * [Component Design Tokens (light theme)](https://raw.githubusercontent.com/SchweizerischeBundesbahnen/scion-toolkit/master/projects/scion/components/design/components/_scion-component-light-tokens.scss)
+ * [Component Design Tokens (dark theme)](https://raw.githubusercontent.com/SchweizerischeBundesbahnen/scion-toolkit/master/projects/scion/components/design/components/_scion-component-dark-tokens.scss)
  *
  * ### Static Color Tokens
  * Colors that have a fixed color value across all themes.
@@ -68,7 +74,7 @@
  * [Static Color Tokens](https://raw.githubusercontent.com/SchweizerischeBundesbahnen/scion-toolkit/master/projects/scion/components/design/colors/_scion-static-colors.scss)
  *
  * ### Named Color Tokens
- * Predefined set of named colors as palette of tints and shades.
+ * Predefined set of named colors as a palette of tints and shades.
  *
  * [Named Color Tokens (light theme)](https://raw.githubusercontent.com/SchweizerischeBundesbahnen/scion-toolkit/master/projects/scion/components/design/colors/_scion-light-colors.scss)
  * [Named Color Tokens (dark theme)](https://raw.githubusercontent.com/SchweizerischeBundesbahnen/scion-toolkit/master/projects/scion/components/design/colors/_scion-dark-colors.scss)
@@ -79,17 +85,96 @@
  * [Semantic Tokens (light theme)](https://raw.githubusercontent.com/SchweizerischeBundesbahnen/scion-toolkit/master/projects/scion/components/design/themes/_scion-light-theme.scss)
  * [Semantic Tokens (dark theme)](https://raw.githubusercontent.com/SchweizerischeBundesbahnen/scion-toolkit/master/projects/scion/components/design/themes/_scion-dark-theme.scss)
  *
- * ### Component-specific Tokens
- * Tokens for a particular component.
  *
- * [Component-specific Tokens](https://raw.githubusercontent.com/SchweizerischeBundesbahnen/scion-toolkit/master/projects/scion/components/design/components/_scion-component-tokens.scss)
+ * ## SCION Icon Font
+ * This module provides the standard icon font used by SCION components.
+ *
+ * By default, SCION icons are loaded from the CDN: https://cdn.jsdelivr.net/npm/@scion/icons.
+ *
+ * ### Content Security Policy (CSP)
+ * Applications enforcing a Content Security Policy must whitelist the CDN using the `font-src` directive.
+ *
+ * ```
+ * Content-Security-Policy: font-src 'self' https://cdn.jsdelivr.net/npm/@scion/icons/;
+ * ```
+ *
+ * ### Self-Hosting the SCION Icon Font
+ * As an alternative to loading SCION icons from the CDN, you can host the SCION icon font directly within your application.
+ *
+ * To self-host the SCION icon font:
+ *
+ * 1. Install the `@scion/icons` NPM module:
+ *    ```
+ *    npm install @scion/icons
+ *    ```
+ * 2. Register the icon font files in `assets` in `angular.json`.
+ *    ```
+ *    "assets": [
+ *      {
+ *        "glob": "**\/*",
+ *        "input": "node_modules/@scion/icons",
+ *        "output": "/scion-icons"
+ *      }
+ *    ]
+ *    ```
+ * 3. Configure `@scion/components` SCSS module to load the icon font from `/scion-icons` (leading slash required):
+ *    ```scss
+ *    @use '@scion/components' with (
+ *      $icon-font: (
+ *        directory: '/scion-icons'
+ *      )
+ *    );
+ *    ```
+ *
+ * As an alternative to steps 1 and 2, you can manually download the icon font files from the CDN and place them directly into your application's public assets folder (`public/scion-icons/`):
+ * - https://cdn.jsdelivr.net/npm/@scion/icons/scion-icons.ttf
+ * - https://cdn.jsdelivr.net/npm/@scion/icons/scion-icons.svg
+ * - https://cdn.jsdelivr.net/npm/@scion/icons/scion-icons.woff
+ *
+ * ### Loading Self-Hosted Icon Font Relative to Document Base
+ * Applications deployed in a subdirectory must configure the `@scion/components` SCSS module to load the self-hosted icon font relative to the document base URL (defined by the `<base>` HTML tag) and exclude the icon font files from the application build.
+ *
+ * Different steps are required depending on whether building the application with esbuild or Webpack.
+ *
+ * **Using `@angular/build:application` (esbuild, default since Angular 20)**
+ *
+ * 1. Configure `@scion/components` SCSS module to load the icon font from `scion-icons` (no leading slash to be relative to the document base URL):
+ *    ```scss
+ *    @use '@scion/components' with (
+ *      $icon-font: (
+ *        directory: 'scion-icons'
+ *      )
+ *    );
+ *    ```
+ * 2. Exclude the icon font files from the application build via `externalDependencies` in `angular.json`:
+ *    ```
+ *    "externalDependencies": [
+ *      "scion-icons/*"
+ *    ]
+ *    ```
+ *
+ * **Using `@angular-devkit/build-angular:browser` (Webpack, deprecated since Angular 22)**
+ *
+ * Configure `@scion/components` SCSS module to load the icon font from `^scion-icons` (no leading slash to be relative to the document base URL):
+ *
+ * The leading caret (`^`) instructs Webpack to exclude the icon font files from the application build.
+ *
+ * ```scss
+ * @use '@scion/components' with (
+ *   $icon-font: (
+ *     directory: '^scion-icons'
+ *   )
+ * );
+ * ```
  */
 
 @use './design/theming' as sci-theming;
 @use './design/themes/scion-light-theme';
 @use './design/themes/scion-dark-theme';
+@use './design/icons/scion-icon-font' as sci-icon-font;
 @use 'sass:map';
 
+// Install theme
 $-built-in-themes: (
   scion-light: map.set(scion-light-theme.$theme, color-scheme, light),
   scion-dark: map.set(scion-dark-theme.$theme, color-scheme, dark),
@@ -97,3 +182,7 @@ $-built-in-themes: (
 $themes: $-built-in-themes !default;
 $themes: sci-theming.augment($themes, $-built-in-themes);
 @include sci-theming.install($themes);
+
+// Install icon font
+$icon-font: null !default;
+@include sci-icon-font.install-icon-font($icon-font);

package/common/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/scion-components-common.mjs",
+  "typings": "../types/scion-components-common.d.ts"
+}

package/design/_theming.scss

@@ -47,7 +47,8 @@
     @error 'No themes provided to "@scion/components" SCSS module. Provide a map of themes with token mappings. Refer to the documentation for an example.';
   }
 
-  $void: -warn-if-color-scheme-token-missing($themes);
+  $void: -warn-if-color-scheme-missing($themes);
+  $themes: -add-color-scheme-token($themes);
   $themes: -add-theme-name-token($themes);
 
   @layer sci-theme {
@@ -58,7 +59,7 @@
 
 /**
  * Augments the provided themes with the provided built-in themes, matching the themes by name or, if there is no match, by light or dark color scheme.
- * The color scheme of a theme is determined by evaluating the "color-scheme" token.
+ * The color scheme of a theme is determined by evaluating the "color-scheme" CSS property.
  *
  * @param {map} $themes - map of themes to be augmented with tokens of the built-in themes.
  * @param {map} $built-in-themes - map of built-in themes.
@@ -71,7 +72,7 @@
       $themes: map.set($themes, $theme, map.merge($built-in-theme, $tokens));
     }
     @else {
-      $void: -warn-if-color-scheme-token-missing(($theme: $tokens));
+      $void: -warn-if-color-scheme-missing(($theme: $tokens));
 
       @if -is-dark-theme($tokens) {
         $dark-theme: -get-dark-theme($built-in-themes);
@@ -87,10 +88,10 @@
 }
 
 /**
- * Adds each theme the token 'sci-theme' with its name.
+ * Adds each theme the token '--sci-theme' with its name.
  *
  * @param {map} $themes - map of themes with token mappings.
- * @return {map} Themes with the token 'sci-theme' added to each theme.
+ * @return {map} Themes with the token '--sci-theme' added to each theme.
  */
 @function -add-theme-name-token($themes) {
   @each $theme, $tokens in $themes {
@@ -99,6 +100,20 @@
   @return $themes;
 }
 
+/**
+ * Adds each theme the token '--sci-color-theme' based on the 'color-scheme' CSS property.
+ *
+ * @param {map} $themes - map of themes with token mappings.
+ * @return {map} Themes with the token '--sci-color-theme' added to each theme.
+ */
+@function -add-color-scheme-token($themes) {
+  @each $theme, $tokens in $themes {
+    $color-scheme: map.get($tokens, 'color-scheme');
+    $themes: map.set($themes, $theme, map.merge((--sci-color-theme: $color-scheme), $tokens));
+  }
+  @return $themes;
+}
+
 /**
  * Creates a theme selector on the root HTML element for each provided theme and sets its tokens as CSS variables, as following:
  *
@@ -125,7 +140,7 @@
 /**
  * Selects a theme based on the user's OS color scheme preference, but ony if no theme is set on the root HTML element.
  *
- * The color scheme of a theme is determined by evaluating the "color-scheme" token.
+ * The color scheme of a theme is determined by evaluating the "color-scheme" CSS property.
  *
  * @param {map} $themes - A map of themes with token mappings.
  */
@@ -177,7 +192,7 @@
 }
 
 /**
- * Returns `true` for a theme with a color-scheme token 'dark'.
+ * Returns `true` for a theme with a color-scheme 'dark'.
  *
  * @param {map} $tokens - Token mappings of a theme.
  * @return {boolean} `true` if dark theme, otherwise `false`.
@@ -218,12 +233,12 @@
 }
 
 /**
- * Logs a warning if the 'color-scheme' design token is missing.
+ * Logs a warning if 'color-scheme' CSS property is missing.
  */
-@function -warn-if-color-scheme-token-missing($themes) {
+@function -warn-if-color-scheme-missing($themes) {
   @each $theme, $tokens in $themes {
     @if (not map.has-key($tokens, 'color-scheme')) {
-      @warn 'Missing required token "color-scheme" in theme "#{$theme}". Add the token "color-scheme" to the theme "#{$theme}". For a dark theme, add the token "color-scheme: dark". For a light theme, add the token "color-scheme: light".';
+      @warn 'Missing required "color-scheme" in theme "#{$theme}". Add "color-scheme" to the theme "#{$theme}". For a dark theme, add "color-scheme: dark". For a light theme, add "color-scheme: light".';
     }
   }
   @return null;

package/design/components/_scion-component-dark-tokens.scss

@@ -0,0 +1,153 @@
+@use '../theming' as sci-theming;
+
+$sci-scrollbar: (
+  --sci-scrollbar-color: var(--sci-color-gray-700),
+);
+
+$sci-viewport: (
+  --sci-viewport-scrollbar-color: var(--sci-scrollbar-color),
+);
+
+$sci-throbber: (
+  --sci-throbber-color: var(--sci-color-gray-300),
+  --sci-throbber-size: 50px,
+  --sci-throbber-duration: 1.25s,
+);
+
+$sci-splitter: (
+  --sci-splitter-background-color: var(--sci-color-border), // background color of the splitter
+  --sci-splitter-background-color-hover: var(--sci-splitter-background-color), // background color of the splitter when hovering it
+  --sci-splitter-size: 1px, // size of the splitter along the main axis (width if direction is row, or height if direction is column)
+  --sci-splitter-size-hover: 8px, // size of the splitter along the main axis when hovering it.
+  --sci-splitter-touch-target-size: 15px, // touch target size to move the splitter (accessibility)
+  --sci-splitter-cross-axis-size: 100%, // handle size along the cross-axis
+  --sci-splitter-cross-axis-start: auto, // handle start position on the cross-axis
+  --sci-splitter-cross-axis-end: auto, // handle end position on the cross-axis. Requires `--sci-splitter-cross-axis-start: auto`.
+  --sci-splitter-border-radius: 0, // border radius of the splitter
+  --sci-splitter-opacity-active: 1, //  opacity of the splitter while the user moves the splitter
+  --sci-splitter-opacity-hover: .3, // opacity of the splitter when hovering it
+);
+
+$sci-sashbox: (
+  --sci-sashbox-gap: 10px, // gaps (gutters) between sashes
+  --sci-sashbox-splitter-background-color: var(--sci-splitter-background-color), // background color of the splitter
+  --sci-sashbox-splitter-background-color-hover: var(--sci-splitter-background-color), // background color of the splitter when hovering it
+  --sci-sashbox-splitter-size: var(--sci-splitter-size), // size of the splitter along the main axis (width if direction is row, or height if direction is column)
+  --sci-sashbox-splitter-size-hover: var(--sci-splitter-size-hover), // size of the splitter along the main axis when hovering it.
+  --sci-sashbox-splitter-touch-target-size: var(--sci-splitter-touch-target-size), // touch target size to move the splitter (accessibility)
+  --sci-sashbox-splitter-cross-axis-size: var(--sci-splitter-cross-axis-size), // handle size along the cross-axis
+  --sci-sashbox-splitter-cross-axis-start: var(--sci-splitter-cross-axis-start), // handle start position on the cross-axis
+  --sci-sashbox-splitter-cross-axis-end: var(--sci-splitter-cross-axis-end), // handle end position on the cross-axis. Requires `--sci-sashbox-splitter-cross-axis-size: auto`.
+  --sci-sashbox-splitter-border-radius: var(--sci-splitter-border-radius), // border radius of the splitter
+  --sci-sashbox-splitter-opacity-active: var(--sci-splitter-opacity-active), //  opacity of the splitter while the user moves the splitter
+  --sci-sashbox-splitter-opacity-hover: var(--sci-splitter-opacity-hover), // opacity of the splitter when hovering it
+);
+
+$sci-menu: (
+  --sci-menu-font-size: initial, // based on --sci-menu-item-size
+  --sci-menu-border-radius: var(--sci-corner),
+  --sci-menu-min-width: 15em,
+  --sci-menu-submenu-min-width: 10em,
+  --sci-menu-item-size: var(--sci-button-icon-size),
+  --sci-menu-item-cursor: var(--sci-button-cursor),
+  --sci-menu-item-text-color: var(--sci-button-text-color),
+  --sci-menu-item-text-color-disabled: var(--sci-button-text-color-disabled),
+  --sci-menu-item-background-color-hover: color-mix(in srgb, var(--sci-color-accent) 35%, var(--sci-color-gray-100)),
+  --sci-menu-item-background-color-active: color-mix(in srgb, var(--sci-menu-item-background-color-hover) 97.5%, var(--sci-static-color-white)),
+  --sci-menu-item-border-radius: var(--sci-button-border-radius),
+  --sci-menu-item-outline-width: var(--sci-button-outline-width),
+  --sci-menu-item-accelerator-text-color: var(--sci-color-text-subtlest),
+  --sci-menu-item-active-indicator-size: 3px,
+  --sci-menu-item-active-indicator-background-color: var(--sci-color-accent),
+  --sci-menu-item-active-indicator-border-radius: var(--sci-corner-small),
+  --sci-menu-group-header-font-family: inherit,
+  --sci-menu-group-header-font-size: .95em,
+  --sci-menu-group-header-font-weight: 500,
+  --sci-menu-group-header-text-color: var(--sci-color-text-subtlest),
+  --sci-menu-filter-outline-width: var(--sci-button-outline-width),
+  --sci-menu-filter-outline-radius: var(--sci-corner-small),
+);
+
+$sci-toolbar: (
+  --sci-toolbar-font-size: initial, // based on --sci-toolbar-item-size
+  --sci-toolbar-item-size: var(--sci-button-icon-size),
+  --sci-toolbar-item-cursor: var(--sci-button-cursor),
+  --sci-toolbar-item-text-color: var(--sci-button-text-color),
+  --sci-toolbar-item-text-color-disabled: var(--sci-button-text-color-disabled),
+  --sci-toolbar-item-background-color: transparent,
+  --sci-toolbar-item-background-color-hover: var(--sci-button-background-color-hover),
+  --sci-toolbar-item-background-color-active: var(--sci-button-background-color-active),
+  --sci-toolbar-item-background-color-checked: color-mix(in srgb, var(--sci-color-gray-200) 95%, var(--sci-static-color-white)),
+  --sci-toolbar-item-border-radius: var(--sci-button-border-radius),
+  --sci-toolbar-item-border-color-hover: transparent,
+  --sci-toolbar-item-border-color-checked: var(--sci-color-border),
+  --sci-toolbar-item-outline-width: var(--sci-button-outline-width),
+  --sci-toolbar-item-menu-indicator-color: var(--sci-color-text-subtle),
+  --sci-toolbar-item-menu-indicator-color-disabled: var(--sci-color-gray-500),
+  --sci-toolbar-item-menu-indicator-size: 3px,
+);
+
+$sci-menubar: (
+  --sci-menubar-font-size: initial, // based on --sci-menubar-item-size
+  --sci-menubar-item-size: var(--sci-button-icon-size),
+  --sci-menubar-item-cursor: var(--sci-button-cursor),
+  --sci-menubar-item-border-radius: var(--sci-button-border-radius),
+  --sci-menubar-item-background-color-hover: var(--sci-button-background-color-hover),
+  --sci-menubar-item-background-color-active: var(--sci-button-background-color-active),
+  --sci-menubar-item-outline-width: var(--sci-button-outline-width),
+);
+
+$sci-table: (
+  --sci-table-gridline-color: transparent,
+  --sci-table-header-height: 2em,
+  --sci-table-header-cursor: var(--sci-button-cursor),
+  --sci-table-header-background-color: var(--sci-color-background-primary),
+  --sci-table-header-background-color-hover: var(--sci-table-row-background-color-hover),
+  --sci-table-header-font-family: inherit,
+  --sci-table-header-font-size: 1em,
+  --sci-table-header-font-weight: 700,
+  --sci-table-header-text-color: inherit,
+  --sci-table-header-column-divider: visible,
+  --sci-table-row-height: 2em,
+  --sci-table-row-background-color-hover: var(--sci-color-gray-100),
+  --sci-table-row-background-color-selected: color-mix(in srgb, var(--sci-color-accent) 35%, var(--sci-color-gray-100)),
+  --sci-table-row-border-radius: var(--sci-corner-small),
+  --sci-table-row-outline-color: var(--sci-color-accent),
+  --sci-table-row-outline-width: 1px,
+  --sci-table-row-outline-style: dotted,
+  --sci-table-row-action-background-color: var(--sci-color-gray-200),
+  --sci-table-row-action-background-color-selected: color-mix(in srgb, var(--sci-table-row-background-color-selected) 87.5%, var(--sci-static-color-white)),
+  --sci-table-cell-padding-inline: .5em,
+);
+
+$sci-button: (
+  --sci-button-cursor: default,
+  --sci-button-background-color-hover: var(--sci-color-gray-200),
+  --sci-button-background-color-active: var(--sci-color-gray-300),
+  --sci-button-text-color: var(--sci-color-text),
+  --sci-button-text-color-disabled: var(--sci-color-text-subtlest),
+  --sci-button-border-radius: var(--sci-corner),
+  --sci-button-outline-width: 2px,
+  --sci-button-icon-size: 16px,
+);
+
+$sci-skeleton: (
+  --sci-color-skeleton-subtle: var(--sci-color-gray-200),
+  --sci-color-skeleton: var(--sci-color-gray-300),
+  --sci-color-skeleton-hover: var(--sci-color-gray-400),
+  --sci-color-skeleton-active: var(--sci-color-gray-400),
+);
+
+$tokens: sci-theming.map-merge(
+  $sci-scrollbar,
+  $sci-viewport,
+  $sci-throbber,
+  $sci-splitter,
+  $sci-sashbox,
+  $sci-menu,
+  $sci-menubar,
+  $sci-toolbar,
+  $sci-button,
+  $sci-table,
+  $sci-skeleton,
+);

package/design/components/_scion-component-light-tokens.scss

@@ -0,0 +1,153 @@
+@use '../theming' as sci-theming;
+
+$sci-scrollbar: (
+  --sci-scrollbar-color: var(--sci-color-gray-700),
+);
+
+$sci-viewport: (
+  --sci-viewport-scrollbar-color: var(--sci-scrollbar-color),
+);
+
+$sci-throbber: (
+  --sci-throbber-color: var(--sci-color-gray-300),
+  --sci-throbber-size: 50px,
+  --sci-throbber-duration: 1.25s,
+);
+
+$sci-splitter: (
+  --sci-splitter-background-color: var(--sci-color-border), // background color of the splitter
+  --sci-splitter-background-color-hover: var(--sci-splitter-background-color), // background color of the splitter when hovering it
+  --sci-splitter-size: 1px, // size of the splitter along the main axis (width if direction is row, or height if direction is column)
+  --sci-splitter-size-hover: 8px, // size of the splitter along the main axis when hovering it.
+  --sci-splitter-touch-target-size: 15px, // touch target size to move the splitter (accessibility)
+  --sci-splitter-cross-axis-size: 100%, // handle size along the cross-axis
+  --sci-splitter-cross-axis-start: auto, // handle start position on the cross-axis
+  --sci-splitter-cross-axis-end: auto, // handle end position on the cross-axis. Requires `--sci-splitter-cross-axis-start: auto`.
+  --sci-splitter-border-radius: 0, // border radius of the splitter
+  --sci-splitter-opacity-active: 1, //  opacity of the splitter while the user moves the splitter
+  --sci-splitter-opacity-hover: .3, // opacity of the splitter when hovering it
+);
+
+$sci-sashbox: (
+  --sci-sashbox-gap: 10px, // gaps (gutters) between sashes
+  --sci-sashbox-splitter-background-color: var(--sci-splitter-background-color), // background color of the splitter
+  --sci-sashbox-splitter-background-color-hover: var(--sci-splitter-background-color), // background color of the splitter when hovering it
+  --sci-sashbox-splitter-size: var(--sci-splitter-size), // size of the splitter along the main axis (width if direction is row, or height if direction is column)
+  --sci-sashbox-splitter-size-hover: var(--sci-splitter-size-hover), // size of the splitter along the main axis when hovering it.
+  --sci-sashbox-splitter-touch-target-size: var(--sci-splitter-touch-target-size), // touch target size to move the splitter (accessibility)
+  --sci-sashbox-splitter-cross-axis-size: var(--sci-splitter-cross-axis-size), // handle size along the cross-axis
+  --sci-sashbox-splitter-cross-axis-start: var(--sci-splitter-cross-axis-start), // handle start position on the cross-axis
+  --sci-sashbox-splitter-cross-axis-end: var(--sci-splitter-cross-axis-end), // handle end position on the cross-axis. Requires `--sci-sashbox-splitter-cross-axis-size: auto`.
+  --sci-sashbox-splitter-border-radius: var(--sci-splitter-border-radius), // border radius of the splitter
+  --sci-sashbox-splitter-opacity-active: var(--sci-splitter-opacity-active), //  opacity of the splitter while the user moves the splitter
+  --sci-sashbox-splitter-opacity-hover: var(--sci-splitter-opacity-hover), // opacity of the splitter when hovering it
+);
+
+$sci-menu: (
+  --sci-menu-font-size: initial, // based on --sci-menu-item-size
+  --sci-menu-border-radius: var(--sci-corner),
+  --sci-menu-min-width: 15em,
+  --sci-menu-submenu-min-width: 10em,
+  --sci-menu-item-size: var(--sci-button-icon-size),
+  --sci-menu-item-cursor: var(--sci-button-cursor),
+  --sci-menu-item-text-color: var(--sci-button-text-color),
+  --sci-menu-item-text-color-disabled: var(--sci-button-text-color-disabled),
+  --sci-menu-item-background-color-hover: var(--sci-button-background-color-hover),
+  --sci-menu-item-background-color-active: var(--sci-button-background-color-active),
+  --sci-menu-item-border-radius: var(--sci-button-border-radius),
+  --sci-menu-item-outline-width: var(--sci-button-outline-width),
+  --sci-menu-item-accelerator-text-color: var(--sci-color-text-subtlest),
+  --sci-menu-item-active-indicator-size: 3px,
+  --sci-menu-item-active-indicator-background-color: var(--sci-color-accent),
+  --sci-menu-item-active-indicator-border-radius: var(--sci-corner-small),
+  --sci-menu-group-header-font-family: inherit,
+  --sci-menu-group-header-font-size: .95em,
+  --sci-menu-group-header-font-weight: 500,
+  --sci-menu-group-header-text-color: var(--sci-color-text-subtlest),
+  --sci-menu-filter-outline-width: var(--sci-button-outline-width),
+  --sci-menu-filter-outline-radius: var(--sci-corner-small),
+);
+
+$sci-toolbar: (
+  --sci-toolbar-font-size: initial, // based on --sci-toolbar-item-size
+  --sci-toolbar-item-size: var(--sci-button-icon-size),
+  --sci-toolbar-item-cursor: var(--sci-button-cursor),
+  --sci-toolbar-item-text-color: var(--sci-button-text-color),
+  --sci-toolbar-item-text-color-disabled: var(--sci-button-text-color-disabled),
+  --sci-toolbar-item-background-color: transparent,
+  --sci-toolbar-item-background-color-hover: var(--sci-button-background-color-hover),
+  --sci-toolbar-item-background-color-active: var(--sci-button-background-color-active),
+  --sci-toolbar-item-background-color-checked: color-mix(in srgb, var(--sci-color-gray-200) 65%, var(--sci-static-color-white)),
+  --sci-toolbar-item-border-radius: var(--sci-button-border-radius),
+  --sci-toolbar-item-border-color-hover: transparent,
+  --sci-toolbar-item-border-color-checked: var(--sci-color-border),
+  --sci-toolbar-item-outline-width: var(--sci-button-outline-width),
+  --sci-toolbar-item-menu-indicator-color: var(--sci-color-text-subtle),
+  --sci-toolbar-item-menu-indicator-color-disabled: var(--sci-color-gray-500),
+  --sci-toolbar-item-menu-indicator-size: 3px,
+);
+
+$sci-menubar: (
+  --sci-menubar-font-size: initial, // based on --sci-menubar-item-size
+  --sci-menubar-item-size: var(--sci-button-icon-size),
+  --sci-menubar-item-cursor: var(--sci-button-cursor),
+  --sci-menubar-item-border-radius: var(--sci-button-border-radius),
+  --sci-menubar-item-background-color-hover: var(--sci-button-background-color-hover),
+  --sci-menubar-item-background-color-active: var(--sci-button-background-color-active),
+  --sci-menubar-item-outline-width: var(--sci-button-outline-width),
+);
+
+$sci-table: (
+  --sci-table-gridline-color: transparent,
+  --sci-table-header-height: 2em,
+  --sci-table-header-cursor: var(--sci-button-cursor),
+  --sci-table-header-background-color: var(--sci-color-background-primary),
+  --sci-table-header-background-color-hover: var(--sci-table-row-background-color-hover),
+  --sci-table-header-font-family: inherit,
+  --sci-table-header-font-size: 1em,
+  --sci-table-header-font-weight: 700,
+  --sci-table-header-text-color: inherit,
+  --sci-table-header-column-divider: visible,
+  --sci-table-row-height: 2em,
+  --sci-table-row-background-color-hover: color-mix(in srgb, var(--sci-color-gray-200) 60%, var(--sci-static-color-white)),
+  --sci-table-row-background-color-selected: var(--sci-color-background-accent),
+  --sci-table-row-border-radius: var(--sci-corner-small),
+  --sci-table-row-outline-color: var(--sci-color-accent),
+  --sci-table-row-outline-width: 1px,
+  --sci-table-row-outline-style: dotted,
+  --sci-table-row-action-background-color: var(--sci-color-background-primary),
+  --sci-table-row-action-background-color-selected: var(--sci-color-background-primary),
+  --sci-table-cell-padding-inline: .5em,
+);
+
+$sci-button: (
+  --sci-button-cursor: default,
+  --sci-button-background-color-hover: color-mix(in srgb, var(--sci-color-gray-200) 95%, var(--sci-static-color-white)),
+  --sci-button-background-color-active: var(--sci-color-gray-300),
+  --sci-button-text-color: var(--sci-color-text),
+  --sci-button-text-color-disabled: var(--sci-color-text-subtlest),
+  --sci-button-border-radius: var(--sci-corner),
+  --sci-button-outline-width: 2px,
+  --sci-button-icon-size: 16px,
+);
+
+$sci-skeleton: (
+  --sci-color-skeleton-subtle: var(--sci-color-gray-200),
+  --sci-color-skeleton: var(--sci-color-gray-300),
+  --sci-color-skeleton-hover: var(--sci-color-gray-400),
+  --sci-color-skeleton-active: var(--sci-color-gray-400),
+);
+
+$tokens: sci-theming.map-merge(
+  $sci-scrollbar,
+  $sci-viewport,
+  $sci-throbber,
+  $sci-splitter,
+  $sci-sashbox,
+  $sci-menu,
+  $sci-menubar,
+  $sci-toolbar,
+  $sci-button,
+  $sci-table,
+  $sci-skeleton,
+);

package/design/icons/_scion-icon-font.scss

@@ -0,0 +1,50 @@
+/**
+ * Installs icons used in SCION.
+ */
+
+@use 'sass:map';
+
+/**
+ * Current version of the icon font.
+ *
+ * UPDATE THIS VERSION WHEN ADDING, REMOVING OR CHANGING ICONS.
+ *
+ * This version is appended to the HTTP request as query parameter when fetching the icon font to support cache busting.
+ */
+$-version: 1;
+
+/**
+ * By default, the icon font is loaded from the CDN: https://cdn.jsdelivr.net/npm/@scion/icons
+ */
+$-icon-font-defaults: (
+  // NOTE: If self-hosting SCION icons, the font path must be "root-relative" or excluded from the application build.
+  // Otherwise, the build fails because the builder cannot resolve the font files relative to "this" SASS file.
+  // For esbuild, register excluded assets as `externalDependencies` in angular.json.
+  // For webpack, exclude assets by prefixing their path with a leading caret (^).
+  directory: 'https://cdn.jsdelivr.net/npm/@scion/icons',
+  filename: 'scion-icons',
+  version: $-version,
+);
+
+/**
+ * Installs the 'scion-icons' font to render SCION icons.
+ *
+ * SCION icons are rendered in `ScionIconComponent`.
+ */
+@mixin install-icon-font($config) {
+  $config: if(sass($config): $config; else: ());
+  $config: map.merge($-icon-font-defaults, $config);
+  $path: map.get($config, directory) + '/' + map.get($config, filename);
+  $version: map.get($config, version);
+
+  @font-face {
+    font-family: 'scion-icons';
+    src: url($path + '.ttf?' + $version) format('truetype'),
+    url($path + '.woff?' + $version) format('woff'),
+    url($path + '.svg?' + $version + '#scion-icons') format('svg');
+    font-weight: normal;
+    font-style: normal;
+    // Prevent a flash of unstyled text content (FOUC) showing the ligatures until the font loads.
+    font-display: block;
+  }
+}

package/design/themes/_scion-dark-theme.scss

@@ -2,9 +2,9 @@
 @use '../theming' as sci-theming;
 @use '../colors/scion-static-colors';
 @use '../colors/scion-dark-colors';
-@use '../components/scion-component-tokens';
+@use '../components/scion-component-dark-tokens';
 
-$theme: sci-theming.map-merge(scion-static-colors.$tokens, scion-dark-colors.$tokens, scion-component-tokens.$tokens, (
+$theme: sci-theming.map-merge(scion-static-colors.$tokens, scion-dark-colors.$tokens, scion-component-dark-tokens.$tokens, (
   // Use for highlighting calls to action and emphasizing important information or key messages.
   --sci-color-accent: var(--sci-color-blue-500),
   --sci-color-accent-inverse: var(--sci-static-color-white),
@@ -21,11 +21,6 @@ $theme: sci-theming.map-merge(scion-static-colors.$tokens, scion-dark-colors.$to
   --sci-color-notice: var(--sci-color-orange-700),
   --sci-color-notice-inverse: var(--sci-static-color-white),
   --sci-color-background-notice: var(--sci-color-orange-1200),
-  // Use for skeleton loading progress indicators.
-  --sci-color-skeleton-subtle: var(--sci-color-gray-200),
-  --sci-color-skeleton: var(--sci-color-gray-300),
-  --sci-color-skeleton-hover: var(--sci-color-gray-400),
-  --sci-color-skeleton-active: var(--sci-color-gray-400),
   // Use as the primary background for the UI.
   --sci-color-background-primary: var(--sci-color-gray-50),
   // Use as the background for navbars, menubars, toolbars, tabbars, sidebars and panels

package/design/themes/_scion-light-theme.scss

@@ -2,13 +2,13 @@
 @use '../theming' as sci-theming;
 @use '../colors/scion-static-colors';
 @use '../colors/scion-light-colors';
-@use '../components/scion-component-tokens';
+@use '../components/scion-component-light-tokens';
 
-$theme: sci-theming.map-merge(scion-static-colors.$tokens, scion-light-colors.$tokens, scion-component-tokens.$tokens, (
+$theme: sci-theming.map-merge(scion-static-colors.$tokens, scion-light-colors.$tokens, scion-component-light-tokens.$tokens, (
   // Use for highlighting calls to action and emphasizing important information or key messages.
   --sci-color-accent: var(--sci-color-blue-900),
   --sci-color-accent-inverse: var(--sci-static-color-white),
-  --sci-color-background-accent: var(--sci-color-blue-100),
+  --sci-color-background-accent: var(--sci-color-blue-200),
   // Use as positive semantic color to indicate success, positive states and completed tasks.
   --sci-color-positive: var(--sci-color-green-900),
   --sci-color-positive-inverse: var(--sci-static-color-white),
@@ -21,11 +21,6 @@ $theme: sci-theming.map-merge(scion-static-colors.$tokens, scion-light-colors.$t
   --sci-color-notice: var(--sci-color-orange-700),
   --sci-color-notice-inverse: var(--sci-static-color-white),
   --sci-color-background-notice: var(--sci-color-orange-100),
-  // Use for skeleton loading progress indicators.
-  --sci-color-skeleton-subtle: var(--sci-color-gray-200),
-  --sci-color-skeleton: var(--sci-color-gray-300),
-  --sci-color-skeleton-hover: var(--sci-color-gray-400),
-  --sci-color-skeleton-active: var(--sci-color-gray-400),
   // Use as the primary background for the UI.
   --sci-color-background-primary: var(--sci-color-gray-50),
   // Use as the background for navbars, menubars, toolbars, tabbars, sidebars and panels