/**
 * This SCSS module provides a set of design tokens to enable consistent design of the workbench.
 *
 * An application can define a custom theme to change the default look of the SCION Workbench. Multiple themes are supported.
 * A theme is a collection of design tokens, defining specific design aspects such as colors, spacings, etc. A design token can
 * have a different value per theme.
 *
 * An application typically loads this module in the `styles.scss` file.
 *
 * ```scss
 * @use '@scion/workbench';
 * ```
 *
 * ## Themes
 * SCION Workbench provides a light and a dark theme, `scion-light` and `scion-dark`. Custom themes can be passed to the module under the `$themes` map entry,
 * replacing the built-in themes. A custom theme can define only a subset of the available design tokens, with unspecified tokens inherited from the
 * built-in theme of the same color scheme. The color scheme of a theme is determined by the `color-scheme` token.
 *
 * ```scss
 * @use '@scion/workbench' with (
 *   $themes: (
 *     dark: (
 *       color-scheme: dark,
 *       --sci-color-gray-50: #1D1D1D,
 *       --sci-color-gray-75: #262626,
 *       --sci-color-gray-100: #323232,
 *       --sci-color-gray-200: #3F3F3F,
 *       --sci-color-gray-300: #545454,
 *       --sci-color-gray-400: #707070,
 *       --sci-color-gray-500: #909090,
 *       --sci-color-gray-600: #B2B2B2,
 *       --sci-color-gray-700: #D1D1D1,
 *       --sci-color-gray-800: #EBEBEB,
 *       --sci-color-gray-900: #FFFFFF,
 *       --sci-color-accent: blueviolet,
 *       --sci-workbench-tab-height: 3.5rem,
 *       --sci-workbench-view-background-color: var(--sci-color-gray-100),
 *       --sci-workbench-part-bar-background-color: var(--sci-color-gray-300),
 *     ),
 *     light: (
 *       color-scheme: light,
 *       --sci-color-gray-50: #FFFFFF,
 *       --sci-color-gray-75: #FDFDFD,
 *       --sci-color-gray-100: #F8F8F8,
 *       --sci-color-gray-200: #E6E6E6,
 *       --sci-color-gray-300: #D5D5D5,
 *       --sci-color-gray-400: #B1B1B1,
 *       --sci-color-gray-500: #909090,
 *       --sci-color-gray-600: #6D6D6D,
 *       --sci-color-gray-700: #464646,
 *       --sci-color-gray-800: #222222,
 *       --sci-color-gray-900: #000000,
 *       --sci-color-accent: blueviolet,
 *       --sci-workbench-tab-height: 3.5rem,
 *     ),
 *   )
 * );
 * ```
 *
 * ### Theme Selection
 * A theme is selected based on the user's OS color scheme preference, or selected manually using the `WorkbenchService`.
 *
 * ```ts
 * inject(WorkbenchService).switchTheme('dark');
 * ```
 * The selected theme is stored in workbench storage and will be selected when loading the application the next time.
 *
 * ### SCION Design Tokens
 * SCION Workbench supports the following design tokens:
 *
 * #### Static Color Tokens
 * Colors that have a fixed color value across all themes.
 *
 * [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.
 *
 * [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)
 *
 * #### Semantic Tokens
 * Tokens for a particular usage.
 *
 * [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)
 *
 * #### Workbench-specific Tokens
 * Tokens specific to the SCION Workbench.
 *
 * [Workbench-specific Tokens (light theme)](https://raw.githubusercontent.com/SchweizerischeBundesbahnen/scion-workbench/master/projects/scion/workbench/design/_workbench-light-theme-design-tokens.scss)
 * [Workbench-specific Tokens (dark theme)](https://raw.githubusercontent.com/SchweizerischeBundesbahnen/scion-workbench/master/projects/scion/workbench/design/_workbench-dark-theme-design-tokens.scss)
 *
 *
 * ## Workbench Icon Font
 * The SCION Workbench requires some icons packed as icon font. The location of the icon font can be configured via the SCSS module `@scion/workbench`,
 * required if deploying the application in a subdirectory, or to configure a custom icon font.
 *
 * ```scss
 * @use '@scion/workbench' with (
 *   $icon-font: (
 *      directory: '/path/to/font', // defaults to '/fonts' if omitted
 *      filename: 'scion-workbench-icons' // defaults to 'scion-workbench-icons' if omitted
 *      version: '1.0.0' // appended to the HTTP request to load the icon font, enabling browser cache invalidation when icons change
 *  );
 * ```
 *
 * 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/build:application`
 * or webpack `@angular-devkit/build-angular:browser`, different steps are required to exclude the icons from the build.
 *
 * ### 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 (
 *   $icon-font: (
 *     directory: 'path/to/font' // no leading slash, typically `fonts`
 *   )
 * );
 * ```
 *
 * Add the path to the `externalDependencies` build option in the `angular.json` file:
 * ```json
 * "externalDependencies": [
 *   "path/to/font/scion-workbench-icons.*"
 * ]
 *   ```
 *
 * ### Using @angular-devkit/build-angular:browser (webpack)
 * Configure the `@scion/workbench` SCSS module to load the icon font relative to the document base URL:
 *
 * ```scss
 * @use '@scion/workbench' with (
 *   $icon-font: (
 *     directory: '^path/to/font' // no leading slash but with a caret (^), typically `^fonts`
 *   )
 * );
 * ```
 */
@use 'sass:map';
@use '@scion/components/design' as sci-design;
@use '@angular/cdk';
@use './design/workbench-light-theme-design-tokens';
@use './design/workbench-dark-theme-design-tokens';
@use './design/workbench-global-styles' as workbench;
@use './design/workbench-icon-font' as workbench-icons;
@use './design/workbench-view-global-styles' as workbench-view;
@use './design/workbench-popup-global-styles' as workbench-popup;
@use './design/workbench-dialog-global-styles' as workbench-dialog;

// Install workbench theme
$-built-in-themes: (
  scion-light: map.set(workbench-light-theme-design-tokens.$tokens, color-scheme, light),
  scion-dark: map.set(workbench-dark-theme-design-tokens.$tokens, color-scheme, dark),
);
$themes: $-built-in-themes !default;
$themes: sci-design.ɵthemes-augment($themes, $-built-in-themes);
@use '@scion/components' with ($themes: $themes);

// Install workbench icon font
$icon-font: null !default;
@include workbench-icons.install-icon-font($icon-font);

// Install global workbench styles
@include workbench.install-global-styles();
@include workbench-view.install-global-styles();
@include workbench-popup.install-global-styles();
@include workbench-dialog.install-global-styles();

// Install Angular CDK styles
@include cdk.a11y-visually-hidden();
@include cdk.overlay();