@scion/components 16.0.0 → 16.2.0

package/_index.scss

@@ -1 +1,116 @@
-@forward './viewport';
+/*
+ * TODO [Angular 17] Remove backward compatibility and inform about breaking change
+ *
+ * Before Migration:
+ * ```scss
+ * @use '@scion/components' as sci-components;
+ * @include sci-components.scrollbar-hide-when-inactive();
+ * @include sci-components.scrollbar-position();
+ * ```
+ * After Migration:
+ * ```scss
+ * @use '@scion/components/scrollbar' as sci-scrollbar;
+ * @include sci-scrollbar.scrollbar-hide-when-inactive();
+ * @include sci-scrollbar.scrollbar-position();
+ * ```
+ */
+@forward './viewport/scrollbar';
+
+/**
+ * This SCSS module provides a set of design tokens for applications to theme components of the SCION libraries.
+ *
+ * A theme is a collection of design tokens. A design token defines a specific design aspect, such as color, spacing, etc. A token can have a different value per theme.
+ *
+ * An application typically loads this module in the `styles.scss` file.
+ *
+ * ```scss
+ * @use '@scion/components';
+ * ```
+ *
+ * ## Themes
+ * SCION 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/components' 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,
+ *     ),
+ *     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,
+ *     ),
+ *   )
+ * );
+ * ```
+ *
+ * ## Theme Selection
+ * A theme is selected based on the user's OS color scheme preference. To select a theme manually, add the `sci-theme` attribute to the root HTML element and set its value to the name of the theme.
+ *
+ * ```html
+ * <html sci-theme="scion-dark">
+ * ```
+ *
+ * ## SCION Design Tokens
+ * SCION 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)
+ *
+ * ### 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)
+ */
+
+@use './design/theming' as sci-theming;
+@use './design/themes/scion-light-theme';
+@use './design/themes/scion-dark-theme';
+@use 'sass:map';
+
+$-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),
+);
+$themes: $-built-in-themes !default;
+$themes: sci-theming.augment($themes, $-built-in-themes);
+@include sci-theming.install($themes);

package/design/_index.scss

@@ -0,0 +1 @@
+@forward './theming' as ɵthemes-* show ɵthemes-augment;

package/design/_theming.scss

@@ -0,0 +1,244 @@
+@use 'sass:map';
+
+/**
+ * Installs provided themes and selects a theme based on the user's OS color scheme preference.
+ *
+ * ```scss
+ * @use '@scion/components' 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,
+ *     ),
+ *     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,
+ *     ),
+ *   ),
+ * );
+ * ```
+ *
+ * @param {map} $themes - A map of themes with token mappings.
+ */
+@mixin install($themes) {
+  @if ($themes == null or $themes == ()) {
+    @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);
+  $themes: -add-theme-name-token($themes);
+
+  @layer sci-theme {
+    @include -create-theme-selector($themes);
+    @include -auto-select-preferred-theme($themes);
+  }
+}
+
+/**
+ * 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.
+ *
+ * @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.
+ * @return {map} Themes with augmented tokens.
+ */
+@function augment($themes, $built-in-themes) {
+  @each $theme, $tokens in $themes {
+    @if map.has-key($built-in-themes, $theme) {
+      $built-in-theme: map.get($built-in-themes, $theme);
+      $themes: map.set($themes, $theme, map.merge($built-in-theme, $tokens));
+    }
+    @else {
+      $void: -warn-if-color-scheme-token-missing(($theme: $tokens));
+
+      @if -is-dark-theme($tokens) {
+        $dark-theme: -get-dark-theme($built-in-themes);
+        $themes: map.set($themes, $theme, map.merge($dark-theme, $tokens));
+      }
+      @else {
+        $light-theme: -get-light-theme($built-in-themes);
+        $themes: map.set($themes, $theme, map.merge($light-theme, $tokens));
+      }
+    }
+  }
+  @return $themes;
+}
+
+/**
+ * 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.
+ */
+@function -add-theme-name-token($themes) {
+  @each $theme, $tokens in $themes {
+    $themes: map.set($themes, $theme, map.merge((--sci-theme: $theme), $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:
+ *
+ * ```scss
+ * :root[sci-theme="dark"] {
+ *   // Tokens as CSS variables
+ * }
+ *
+ * :root[sci-theme="light"] {
+ *   // Tokens as CSS variables
+ * }
+ * ```
+ *
+ * @param {map} $themes - A map of themes with token mappings.
+ */
+@mixin -create-theme-selector($themes) {
+  @each $theme, $tokens in $themes {
+    :root[sci-theme="#{$theme}"] {
+      @include -set-css-variables($tokens);
+    }
+  }
+}
+
+/**
+ * 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.
+ *
+ * @param {map} $themes - A map of themes with token mappings.
+ */
+@mixin -auto-select-preferred-theme($themes) {
+  #{-if-no-theme-active-selector($themes)} {
+    $dark-theme: -get-dark-theme($themes);
+    $light-theme: -get-light-theme($themes);
+
+    @if ($dark-theme and $light-theme) {
+      @media (prefers-color-scheme: dark) {
+        @include -set-css-variables($dark-theme);
+      }
+      @media (prefers-color-scheme: light) {
+        @include -set-css-variables($light-theme);
+     }
+    }
+    @else if ($dark-theme) {
+      @include -set-css-variables($dark-theme);
+    }
+    @else if ($light-theme) {
+      @include -set-css-variables($light-theme);
+    }
+  }
+}
+
+/**
+ * Sets passed tokens as CSS variables.
+ *
+ * @param {map} $themes - A map of themes with token mappings.
+ */
+@mixin -set-css-variables($tokens) {
+  @each $token-name, $token-value in $tokens {
+    #{$token-name}: #{$token-value};
+  }
+}
+
+/**
+ * Creates a selector that matches if none of given themes is selected on the root HTML element.
+ *
+ * @param {map} $themes - A map of themes with token mappings.
+ * @return {string} selector
+ */
+@function -if-no-theme-active-selector($themes) {
+  $selector: ':root';
+  @each $theme in map.keys($themes) {
+    $selector: $selector + ':not([sci-theme="#{$theme}"])';
+  }
+  @return $selector;
+}
+
+/**
+ * Returns `true` for a theme with a color-scheme token 'dark'.
+ *
+ * @param {map} $tokens - Token mappings of a theme.
+ * @return {boolean} `true` if dark theme, otherwise `false`.
+ */
+@function -is-dark-theme($tokens) {
+  $color-scheme: map.get($tokens, 'color-scheme');
+  @return ($color-scheme == 'dark');
+}
+
+/**
+ * Returns the token mappings of the first dark theme found, or `null` if not found.
+ *
+ * @param {map} $themes - A map of themes with token mappings.
+ * @return {map|null} Token mappings of the first dark theme found, or `null` if not found.
+ */
+@function -get-dark-theme($themes) {
+  @each $tokens in map.values($themes) {
+    @if (-is-dark-theme($tokens)) {
+      @return $tokens;
+    }
+  }
+  @return null;
+}
+
+/**
+ * Returns the token mappings of the first light theme found, or `null` if not found.
+ *
+ * @param {map} $themes - A map of themes with token mappings.
+ * @return {map|null} Token mappings of the first light theme found, or `null` if not found.
+ */
+@function -get-light-theme($themes) {
+  @each $tokens in map.values($themes) {
+    @if (not -is-dark-theme($tokens)) {
+      @return $tokens;
+    }
+  }
+  @return null;
+}
+
+/**
+ * Logs a warning if the 'color-scheme' design token is missing.
+ */
+@function -warn-if-color-scheme-token-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".';
+    }
+  }
+  @return null;
+}
+
+/**
+ * Merges given maps into a single map.
+ *
+ * @param {...map} $maps - Maps to be merged into a single map.
+ * @return {map} Merged map.
+ */
+@function map-merge($maps...) {
+  $merged: ();
+  @each $map in $maps {
+    $merged: map.merge($merged, $map);
+  }
+  @return $merged;
+}

package/design/colors/_scion-dark-colors.scss

@@ -0,0 +1,91 @@
+@use '../theming' as sci-theming;
+
+$-gray: (
+  --sci-color-gray-50: rgb(29, 29, 29),
+  --sci-color-gray-75: rgb(38, 38, 38),
+  --sci-color-gray-100: rgb(50, 50, 50),
+  --sci-color-gray-200: rgb(63, 63, 63),
+  --sci-color-gray-300: rgb(84, 84, 84),
+  --sci-color-gray-400: rgb(112, 112, 112),
+  --sci-color-gray-500: rgb(144, 144, 144),
+  --sci-color-gray-600: rgb(178, 178, 178),
+  --sci-color-gray-700: rgb(209, 209, 209),
+  --sci-color-gray-800: rgb(235, 235, 235),
+  --sci-color-gray-900: rgb(255, 255, 255),
+);
+
+$-blue: (
+  --sci-color-blue-100: rgb(0, 56, 119),
+  --sci-color-blue-200: rgb(0, 65, 138),
+  --sci-color-blue-300: rgb(0, 77, 163),
+  --sci-color-blue-400: rgb(0, 89, 194),
+  --sci-color-blue-500: rgb(3, 103, 224),
+  --sci-color-blue-600: rgb(19, 121, 243),
+  --sci-color-blue-700: rgb(52, 143, 244),
+  --sci-color-blue-800: rgb(84, 163, 246),
+  --sci-color-blue-900: rgb(114, 183, 249),
+  --sci-color-blue-1000: rgb(143, 202, 252),
+  --sci-color-blue-1100: rgb(174, 219, 254),
+  --sci-color-blue-1200: rgb(204, 233, 255),
+  --sci-color-blue-1300: rgb(232, 246, 255),
+  --sci-color-blue-1400: rgb(255, 255, 255),
+);
+
+$-red: (
+  --sci-color-red-100: rgb(123, 0, 0),
+  --sci-color-red-200: rgb(141, 0, 0),
+  --sci-color-red-300: rgb(165, 0, 0),
+  --sci-color-red-400: rgb(190, 4, 3),
+  --sci-color-red-500: rgb(215, 25, 19),
+  --sci-color-red-600: rgb(234, 56, 41),
+  --sci-color-red-700: rgb(246, 88, 67),
+  --sci-color-red-800: rgb(255, 117, 94),
+  --sci-color-red-900: rgb(255, 149, 129),
+  --sci-color-red-1000: rgb(255, 176, 161),
+  --sci-color-red-1100: rgb(255, 201, 189),
+  --sci-color-red-1200: rgb(255, 222, 216),
+  --sci-color-red-1300: rgb(255, 241, 238),
+  --sci-color-red-1400: rgb(255, 255, 255),
+);
+
+$-orange: (
+  --sci-color-orange-100: rgb(102, 37, 0),
+  --sci-color-orange-200: rgb(117, 45, 0),
+  --sci-color-orange-300: rgb(137, 55, 0),
+  --sci-color-orange-400: rgb(158, 66, 0),
+  --sci-color-orange-500: rgb(180, 78, 0),
+  --sci-color-orange-600: rgb(202, 93, 0),
+  --sci-color-orange-700: rgb(225, 109, 0),
+  --sci-color-orange-800: rgb(244, 129, 12),
+  --sci-color-orange-900: rgb(254, 154, 46),
+  --sci-color-orange-1000: rgb(255, 181, 88),
+  --sci-color-orange-1100: rgb(253, 206, 136),
+  --sci-color-orange-1200: rgb(255, 225, 179),
+  --sci-color-orange-1300: rgb(255, 242, 221),
+  --sci-color-orange-1400: rgb(255, 253, 249),
+);
+
+$-green: (
+  --sci-color-green-100: rgb(4, 67, 41),
+  --sci-color-green-200: rgb(0, 78, 47),
+  --sci-color-green-300: rgb(0, 92, 56),
+  --sci-color-green-400: rgb(0, 108, 67),
+  --sci-color-green-500: rgb(0, 125, 78),
+  --sci-color-green-600: rgb(0, 143, 93),
+  --sci-color-green-700: rgb(18, 162, 108),
+  --sci-color-green-800: rgb(43, 180, 125),
+  --sci-color-green-900: rgb(67, 199, 143),
+  --sci-color-green-1000: rgb(94, 217, 162),
+  --sci-color-green-1100: rgb(129, 233, 184),
+  --sci-color-green-1200: rgb(177, 244, 209),
+  --sci-color-green-1300: rgb(223, 250, 234),
+  --sci-color-green-1400: rgb(254, 255, 252),
+);
+
+$tokens: sci-theming.map-merge(
+    $-gray,
+    $-blue,
+    $-red,
+    $-orange,
+    $-green
+);

package/design/colors/_scion-light-colors.scss

@@ -0,0 +1,91 @@
+@use '../theming' as sci-theming;
+
+$-gray: (
+  --sci-color-gray-50: rgb(255, 255, 255),
+  --sci-color-gray-75: rgb(253, 253, 253),
+  --sci-color-gray-100: rgb(248, 248, 248),
+  --sci-color-gray-200: rgb(230, 230, 230),
+  --sci-color-gray-300: rgb(213, 213, 213),
+  --sci-color-gray-400: rgb(177, 177, 177),
+  --sci-color-gray-500: rgb(144, 144, 144),
+  --sci-color-gray-600: rgb(109, 109, 109),
+  --sci-color-gray-700: rgb(70, 70, 70),
+  --sci-color-gray-800: rgb(34, 34, 34),
+  --sci-color-gray-900: rgb(0, 0, 0),
+);
+
+$-blue: (
+  --sci-color-blue-100: rgb(224, 242, 255),
+  --sci-color-blue-200: rgb(202, 232, 255),
+  --sci-color-blue-300: rgb(181, 222, 255),
+  --sci-color-blue-400: rgb(150, 206, 253),
+  --sci-color-blue-500: rgb(120, 187, 250),
+  --sci-color-blue-600: rgb(89, 167, 246),
+  --sci-color-blue-700: rgb(56, 146, 243),
+  --sci-color-blue-800: rgb(20, 122, 243),
+  --sci-color-blue-900: rgb(2, 101, 220),
+  --sci-color-blue-1000: rgb(0, 84, 182),
+  --sci-color-blue-1100: rgb(0, 68, 145),
+  --sci-color-blue-1200: rgb(0, 53, 113),
+  --sci-color-blue-1300: rgb(0, 39, 84),
+  --sci-color-blue-1400: rgb(0, 28, 60),
+);
+
+$-red: (
+  --sci-color-red-100: rgb(255, 235, 231),
+  --sci-color-red-200: rgb(255, 221, 214),
+  --sci-color-red-300: rgb(255, 205, 195),
+  --sci-color-red-400: rgb(255, 183, 169),
+  --sci-color-red-500: rgb(255, 155, 136),
+  --sci-color-red-600: rgb(255, 124, 101),
+  --sci-color-red-700: rgb(247, 92, 70),
+  --sci-color-red-800: rgb(234, 56, 41),
+  --sci-color-red-900: rgb(211, 21, 16),
+  --sci-color-red-1000: rgb(180, 0, 0),
+  --sci-color-red-1100: rgb(147, 0, 0),
+  --sci-color-red-1200: rgb(116, 0, 0),
+  --sci-color-red-1300: rgb(89, 0, 0),
+  --sci-color-red-1400: rgb(67, 0, 0),
+);
+
+$-orange: (
+  --sci-color-orange-100: rgb(255, 236, 204),
+  --sci-color-orange-200: rgb(255, 223, 173),
+  --sci-color-orange-300: rgb(253, 210, 145),
+  --sci-color-orange-400: rgb(255, 187, 99),
+  --sci-color-orange-500: rgb(255, 160, 55),
+  --sci-color-orange-600: rgb(246, 133, 17),
+  --sci-color-orange-700: rgb(228, 111, 0),
+  --sci-color-orange-800: rgb(203, 93, 0),
+  --sci-color-orange-900: rgb(177, 76, 0),
+  --sci-color-orange-1000: rgb(149, 61, 0),
+  --sci-color-orange-1100: rgb(122, 47, 0),
+  --sci-color-orange-1200: rgb(97, 35, 0),
+  --sci-color-orange-1300: rgb(73, 25, 1),
+  --sci-color-orange-1400: rgb(53, 18, 1),
+);
+
+$-green: (
+  --sci-color-green-100: rgb(206, 248, 224),
+  --sci-color-green-200: rgb(173, 244, 206),
+  --sci-color-green-300: rgb(137, 236, 188),
+  --sci-color-green-400: rgb(103, 222, 168),
+  --sci-color-green-500: rgb(73, 204, 147),
+  --sci-color-green-600: rgb(47, 184, 128),
+  --sci-color-green-700: rgb(21, 164, 110),
+  --sci-color-green-800: rgb(0, 143, 93),
+  --sci-color-green-900: rgb(0, 122, 77),
+  --sci-color-green-1000: rgb(0, 101, 62),
+  --sci-color-green-1100: rgb(0, 81, 50),
+  --sci-color-green-1200: rgb(5, 63, 39),
+  --sci-color-green-1300: rgb(10, 46, 29),
+  --sci-color-green-1400: rgb(10, 32, 21),
+);
+
+$tokens: sci-theming.map-merge(
+    $-gray,
+    $-blue,
+    $-red,
+    $-orange,
+    $-green
+);

package/design/colors/_scion-static-colors.scss

@@ -0,0 +1,4 @@
+$tokens: (
+  --sci-static-color-black: rgb(0, 0, 0),
+  --sci-static-color-white: rgb(255, 255, 255),
+);

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

@@ -0,0 +1,48 @@
+@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-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-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
+);
+
+$tokens: sci-theming.map-merge(
+    $sci-scrollbar,
+    $sci-viewport,
+    $sci-throbber,
+    $sci-splitter,
+    $sci-sashbox,
+);

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

@@ -0,0 +1,55 @@
+@use 'sass:map';
+@use '../theming' as sci-theming;
+@use '../colors/scion-static-colors';
+@use '../colors/scion-dark-colors';
+@use '../components/scion-component-tokens';
+
+$theme: sci-theming.map-merge(scion-static-colors.$tokens, scion-dark-colors.$tokens, scion-component-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),
+  --sci-color-background-accent: var(--sci-color-blue-1200),
+  // Use as positive semantic color to indicate success, positive states and completed tasks.
+  --sci-color-positive: var(--sci-color-green-500),
+  --sci-color-positive-inverse: var(--sci-static-color-white),
+  --sci-color-background-positive: var(--sci-color-green-1300),
+  // Use as negative semantic color to indicate errors, negative states and critical issues that need immediate attention.
+  --sci-color-negative: var(--sci-color-red-500),
+  --sci-color-negative-inverse: var(--sci-static-color-white),
+  --sci-color-background-negative: var(--sci-color-red-1200),
+  // Use as notice semantic color to indicate warnings or a state of caution that requires user attention.
+  --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: var(--sci-color-gray-300),
+  --sci-color-skeleton-subtle: 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
+  --sci-color-background-secondary: var(--sci-color-gray-100),
+  --sci-color-background-secondary-hover: var(--sci-color-gray-200),
+  --sci-color-background-secondary-selected: var(--sci-color-gray-300),
+  // Use as the background for elevated elements, such as dialogs, menus and overlays.
+  --sci-color-background-elevation: var(--sci-color-gray-75),
+  --sci-color-background-elevation-hover: var(--sci-color-gray-100),
+  // Use as the background for input elements.
+  --sci-color-background-input: color-mix(in srgb, transparent 95%, var(--sci-static-color-white)),
+  --sci-color-background-input-disabled: color-mix(in srgb, transparent 85%, var(--sci-static-color-white)),
+  // Use for separators and element borders/strokes.
+  --sci-color-border: var(--sci-color-gray-300),
+  --sci-color-border-subtle: var(--sci-color-gray-200),
+  --sci-color-border-subtlest: var(--sci-color-gray-100),
+  --sci-color-border-strong: var(--sci-color-gray-400),
+  // Use for primary text, such as body text and input element values.
+  --sci-color-text: var(--sci-color-gray-900),
+  // Use for secondary text, such as labels and icons.
+  --sci-color-text-subtle: var(--sci-color-gray-700),
+  // Use for tertiary text, such as disabled text, placeholders and meta-data.
+  --sci-color-text-subtlest: var(--sci-color-gray-600),
+  // Use the box shadow effect for elevated elements on top UI layer, such as dialogs, menus and overlays.
+  --sci-elevation: 0 0 5px -3px,
+  // Use as corner radius for elements, such as tabs and input elements.
+  --sci-corner: 5px,
+  --sci-corner-small: 4px,
+));