feat(breadcrumbs): add theme and schemas

packages/theming/sass/themes/components/_index.scss

@@ -3,6 +3,7 @@
 @forward 'badge/badge-theme';
 @forward 'banner/banner-theme';
 @forward 'bottom-nav/bottom-nav-theme';
+@forward 'breadcrumb/breadcrumb-theme';
 @forward 'button/button-theme';
 @forward 'button-group/button-group-theme';
 @forward 'calendar/calendar-theme';

packages/theming/sass/themes/components/breadcrumb/_breadcrumb-theme.scss

@@ -0,0 +1,186 @@
+@use 'sass:map';
+@use '../../config';
+@use '../../functions' as *;
+@use '../../schemas/' as *;
+@use '../../../utils/map' as *;
+@use '../../../color/functions' as *;
+@use '../../../elevations/' as *;
+
+////
+/// @package theming
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/adrianptrv" target="_blank">Adrian Petrov</a>
+////
+/// Breadcrumb Theme
+///
+/// PRIMARY TOKENS:
+/// - `$text-color` — The text color of the breadcrumb.
+///
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $text-color [null] - The text color of the breadcrumb.
+/// @param {Color} $icon-color [null] - The color of the breadcrumb icon. Auto-derived from text-color.
+/// @param {Color} $current-text-color [null] - The text color of the currently selected breadcrumb item.
+/// @param {Color} $current-icon-color [null] - The icon color of the currently selected breadcrumb item.
+/// @param {Color} $pressed-text-color [null] - The text color of the breadcrumb when pressed. Auto-derived from text-color.
+/// @param {Color} $pressed-icon-color [null] - The color of the breadcrumb icon when pressed. Auto-derived from pressed-text-color.
+/// @param {Color} $hover-text-color [null] - The text color of the breadcrumb when hovered. Auto-derived from text-color.
+/// @param {Color} $hover-icon-color [null] - The color of the breadcrumb icon when hovered. Auto-derived from hover-text-color.
+/// @param {Color} $focus-text-color [null] - The text color of the breadcrumb when focused. Auto-derived from text-color.
+/// @param {Color} $focus-icon-color [null] - The color of the breadcrumb icon when focused. Auto-derived from focus-text-color.
+/// @param {Color} $focus-underline-color [null]- The text underline color of the breadcrumb on focus. Auto-derived from focus-text-color. Only used in the Material theme.
+/// @param {Color} $focus-border-color [null] - The focus border color.
+/// @param {Color} $focus-hover-text-color [null] - The text color of the breadcrumb when focused and hovered. Auto-derived from hover-text-color.
+/// @param {Color} $focus-hover-icon-color [null] - The color of the breadcrumb icon when focused and hovered. Auto-derived from focus-hover-text-color.
+/// @param {Color} $focus-hover-underline-color [null]- The text underline color of the breadcrumb on focus and hover. Auto-derived from focus-hover-text-color. Only used in the Material theme.
+/// @param {Color} $focus-pressed-text-color [null] - The text color of the breadcrumb when focused and pressed. Auto-derived from pressed-text-color.
+/// @param {Color} $focus-pressed-icon-color [null] - The color of the breadcrumb icon when focused and pressed. Auto-derived from focus-pressed-text-color.
+/// @param {Color} $focus-pressed-underline-color [null]- The text underline color of the breadcrumb on focus and pressed. Auto-derived from focus-pressed-text-color. Only used in the Material theme.
+/// @param {Color} $disabled-text-color [null] - The text color of the breadcrumb when disabled.
+/// @param {Color} $disabled-icon-color [null] - The color of the breadcrumb icon when disabled. Auto-derived from disabled-text-color.
+/// @param {Color} $separator-color [null] - The color of the breadcrumb separator.
+///
+/// @requires $light-material-schema
+///
+/// @example scss - Change the text and icon color of the breadcrumb:
+///   $my-breadcrumb-theme: breadcrumb-theme(
+///       $text-color: magenta,
+///       $icon-color: cyan
+///   );
+///   // Pass the theme to the css-vars mixin
+///   @include tokens($my-breadcrumb-theme);
+@function breadcrumb-theme(
+    $schema: $light-material-schema,
+
+    $text-color: null,
+    $icon-color: null,
+    $current-text-color: null,
+    $current-icon-color: null,
+    $hover-text-color: null,
+    $hover-icon-color: null,
+    $pressed-text-color: null,
+    $pressed-icon-color: null,
+    $focus-text-color: null,
+    $focus-icon-color: null,
+    $focus-underline-color: null,
+    $focus-border-color: null,
+    $focus-hover-text-color: null,
+    $focus-hover-icon-color: null,
+    $focus-hover-underline-color: null,
+    $focus-pressed-text-color: null,
+    $focus-pressed-icon-color: null,
+    $focus-pressed-underline-color: null,
+    $disabled-text-color: null,
+    $disabled-icon-color: null,
+    $separator-color: null
+) {
+    $selector: #{config.element-prefix() + '-' + 'breadcrumb'};
+    $breadcrumb-schema: ();
+
+    @if map.has-key($schema, 'breadcrumb') {
+        $breadcrumb-schema: map.get($schema, 'breadcrumb');
+    } @else {
+        $breadcrumb-schema: $schema;
+    }
+
+    $theme: digest-schema($breadcrumb-schema);
+    $variant: map.get($theme, '_meta', 'theme');
+
+    @if not($icon-color) and $text-color {
+        $icon-color: var(--text-color);
+    }
+
+    @if not($current-icon-color) and $current-text-color {
+        $current-icon-color: var(--current-text-color);
+    }
+
+    @if not($hover-text-color) and $text-color {
+        $hover-text-color: dynamic-shade(var(--text-color));
+    }
+
+    @if not($hover-icon-color) and $hover-text-color {
+        $hover-icon-color: var(--hover-text-color);
+    }
+
+    @if not($pressed-text-color) and $text-color {
+        $pressed-text-color: dynamic-shade(var(--text-color));
+    }
+
+    @if not($pressed-icon-color) and $pressed-text-color {
+        $pressed-icon-color: var(--pressed-text-color);
+    }
+
+    @if not($focus-text-color) and $text-color {
+        $focus-text-color: dynamic-shade(var(--text-color));
+    }
+
+    @if not($focus-icon-color) and $focus-text-color {
+        $focus-icon-color: var(--focus-text-color);
+    }
+
+    @if $variant == 'material' {
+        @if not($focus-underline-color) and $focus-text-color {
+            $focus-underline-color: var(--focus-text-color);
+        }
+    }
+
+    @if not($focus-hover-text-color) and $hover-text-color {
+        $focus-hover-text-color: dynamic-shade(var(--hover-text-color));
+    }
+
+    @if not($focus-hover-icon-color) and $focus-hover-text-color {
+        $focus-hover-icon-color: var(--focus-hover-text-color);
+    }
+
+    @if $variant == 'material' {
+        @if not($focus-hover-underline-color) and $focus-hover-text-color {
+            $focus-hover-underline-color: var(--focus-hover-text-color);
+        }
+    }
+
+    @if not($focus-pressed-text-color) and $pressed-text-color {
+        $focus-pressed-text-color: dynamic-shade(var(--pressed-text-color));
+    }
+
+    @if not($focus-pressed-icon-color) and $focus-pressed-text-color {
+        $focus-pressed-icon-color: var(--focus-pressed-text-color);
+    }
+
+    @if $variant == 'material' {
+        @if not($focus-pressed-underline-color) and $focus-pressed-text-color {
+            $focus-pressed-underline-color: var(--focus-pressed-text-color);
+        }
+    }
+
+    @if not($disabled-icon-color) and $disabled-text-color {
+        $disabled-icon-color: var(--disabled-text-color);
+    }
+
+    @return extend(
+        $theme,
+        (
+            selector: $selector,
+            text-color: $text-color,
+            icon-color: $icon-color,
+            current-text-color: $current-text-color,
+            current-icon-color: $current-icon-color,
+            hover-text-color: $hover-text-color,
+            hover-icon-color: $hover-icon-color,
+            pressed-text-color: $pressed-text-color,
+            pressed-icon-color: $pressed-icon-color,
+            focus-text-color: $focus-text-color,
+            focus-icon-color: $focus-icon-color,
+            focus-underline-color: $focus-underline-color,
+            focus-border-color: $focus-border-color,
+            focus-hover-text-color: $focus-hover-text-color,
+            focus-hover-icon-color: $focus-hover-icon-color,
+            focus-hover-underline-color: $focus-hover-underline-color,
+            focus-pressed-text-color: $focus-pressed-text-color,
+            focus-pressed-icon-color: $focus-pressed-icon-color,
+            focus-pressed-underline-color: $focus-pressed-underline-color,
+            disabled-text-color: $disabled-text-color,
+            disabled-icon-color: $disabled-icon-color,
+            separator-color: $separator-color,
+        )
+    );
+}