@koobiq/components 16.0.0-beta.2 → 16.0.0-beta.6

package/core/styles/theming/_components-theming.scss

@@ -20,6 +20,11 @@
         footer-background: map-get($tokens, 'popup-#{$scheme}-footer-background')
     );
 
+    $dropdown: (
+        box-shadow: map-get($tokens, 'dropdown-#{$scheme}-container-box-shadow'),
+        background: map-get($tokens, 'dropdown-#{$scheme}-container-background'),
+    );
+
     $badge: (
         filled: (
             fade-off: (
@@ -501,8 +506,7 @@
             border: map-get($tokens, 'form-field-#{$scheme}-default-border-color'),
             background: map-get($tokens, 'form-field-#{$scheme}-default-background'),
             placeholder: map-get($tokens, 'form-field-#{$scheme}-default-placeholder'),
-            text: map-get($tokens, 'form-field-#{$scheme}-default-text'),
-            label: map-get($tokens, 'form-field-#{$scheme}-default-label')
+            text: map-get($tokens, 'form-field-#{$scheme}-default-text')
         ),
         focused: (
             border: map-get($tokens, 'form-field-#{$scheme}-states-focused-border-color'),
@@ -681,20 +685,66 @@
         state-focused-outline: map-get($tokens, 'link-#{$scheme}-state-focused-outline')
     );
 
+    $list-item: (
+        default: (
+            container-background: map-get($tokens, 'list-#{$scheme}-default-container-background'),
+            text: map-get($tokens, 'list-#{$scheme}-default-text-color'),
+            icon: map-get($tokens, 'list-#{$scheme}-default-icon-color'),
+            icon-button: map-get($tokens, 'list-#{$scheme}-default-icon-button-color'),
+            caption: map-get($tokens, 'list-#{$scheme}-default-caption-color')
+        ),
+        hover: (
+            container-background: map-get($tokens, 'list-#{$scheme}-states-hover-container-background'),
+            text: map-get($tokens, 'list-#{$scheme}-states-hover-text-color'),
+            icon: map-get($tokens, 'list-#{$scheme}-states-hover-icon-color'),
+            icon-button: map-get($tokens, 'list-#{$scheme}-states-hover-icon-button-color')
+        ),
+        selected: (
+            container-background: map-get($tokens, 'list-#{$scheme}-states-selected-container-background'),
+            text: map-get($tokens, 'list-#{$scheme}-states-selected-text-color'),
+            icon: map-get($tokens, 'list-#{$scheme}-states-selected-icon-color'),
+            icon-button: map-get($tokens, 'list-#{$scheme}-states-selected-icon-button-color')
+        ),
+        selected-hover: (
+            container-background: map-get($tokens, 'list-#{$scheme}-states-selected-hover-container-background'),
+            text: map-get($tokens, 'list-#{$scheme}-states-selected-hover-text-color'),
+            icon: map-get($tokens, 'list-#{$scheme}-states-selected-hover-icon-color'),
+            icon-button: map-get($tokens, 'list-#{$scheme}-states-selected-hover-icon-button-color')
+        ),
+        focused: (
+            focus-outline: map-get($tokens, 'list-#{$scheme}-states-focused-focus-outline-color')
+        ),
+        disabled: (
+            container-background: map-get($tokens, 'list-#{$scheme}-states-disabled-container-background'),
+            text: map-get($tokens, 'list-#{$scheme}-states-disabled-text-color'),
+            icon: map-get($tokens, 'list-#{$scheme}-states-disabled-icon-color'),
+            icon-button: map-get($tokens, 'list-#{$scheme}-states-disabled-icon-button-color'),
+            caption: map-get($tokens, 'list-#{$scheme}-states-disabled-caption-color')
+        )
+    );
+
     $loader-overlay: (
-        background: map-get($tokens, 'loader-overlay-#{$scheme}-background'),
+        filled:(
+            background: map-get($tokens, 'loader-overlay-#{$scheme}-filled-overlay-background'),
+
+            text: map-get($tokens, 'loader-overlay-#{$scheme}-filled-text-color'),
+            caption: map-get($tokens, 'loader-overlay-#{$scheme}-filled-caption-color'),
+        ),
+        transparent:(
+            background: map-get($tokens, 'loader-overlay-#{$scheme}-transparent-overlay-background'),
 
-        text: map-get($tokens, 'loader-overlay-#{$scheme}-text'),
-        caption: map-get($tokens, 'loader-overlay-#{$scheme}-caption'),
+            text: map-get($tokens, 'loader-overlay-#{$scheme}-transparent-text-color'),
+            caption: map-get($tokens, 'loader-overlay-#{$scheme}-transparent-caption-color'),
+        )
     );
 
     $modal: (
-        background-mask: map-get($tokens, 'modal-#{$scheme}-background-mask'),
-        shadow: map-get($tokens, 'modal-#{$scheme}-shadow'),
-        header-border: map-get($tokens, 'modal-header-#{$scheme}-border'),
-        body-top-shadow: map-get($tokens, 'modal-#{$scheme}-body-top-shadow'),
-        body-bottom-shadow: map-get($tokens, 'modal-#{$scheme}-body-bottom-shadow'),
-        footer-border: map-get($tokens, 'modal-footer-#{$scheme}-border')
+        container-background: map-get($tokens, 'modal-#{$scheme}-container-background'),
+        container-box-shadow: map-get($tokens, 'modal-#{$scheme}-container-box-shadow'),
+
+        close-button: map-get($tokens, 'modal-#{$scheme}-close-button-color'),
+        header: map-get($tokens, 'modal-#{$scheme}-header-text-color'),
+        content: map-get($tokens, 'modal-#{$scheme}-content-text-color')
     );
 
     $markdown: (
@@ -937,35 +987,300 @@
         )
     );
 
-    $sidepanel: (
-        border: map-get($tokens, 'sidepanel-#{$scheme}-border'),
-        header-border: map-get($tokens, 'sidepanel-header-#{$scheme}-border'),
-        footer-border: map-get($tokens, 'sidepanel-footer-#{$scheme}-border')
+    $risk-level: (
+        filled: (
+            fade-off: (
+                success: (
+                    color: map-get($tokens, 'risk-level-#{$scheme}-filled-fade-off-success-text'),
+                    background: map-get($tokens, 'risk-level-#{$scheme}-filled-fade-off-success-background')
+                ),
+                warning: (
+                    color: map-get($tokens, 'risk-level-#{$scheme}-filled-fade-off-warning-text'),
+                    background: map-get($tokens, 'risk-level-#{$scheme}-filled-fade-off-warning-background')
+                ),
+                error: (
+                    color: map-get($tokens, 'risk-level-#{$scheme}-filled-fade-off-error-text'),
+                    background: map-get($tokens, 'risk-level-#{$scheme}-filled-fade-off-error-background')
+                )
+            ),
+            fade-on: (
+                success: (
+                    color: map-get($tokens, 'risk-level-#{$scheme}-filled-fade-on-success-text'),
+                    background: map-get($tokens, 'risk-level-#{$scheme}-filled-fade-on-success-background')
+                ),
+                warning: (
+                    color: map-get($tokens, 'risk-level-#{$scheme}-filled-fade-on-warning-text'),
+                    background: map-get($tokens, 'risk-level-#{$scheme}-filled-fade-on-warning-background')
+                ),
+                error: (
+                    color: map-get($tokens, 'risk-level-#{$scheme}-filled-fade-on-error-text'),
+                    background: map-get($tokens, 'risk-level-#{$scheme}-filled-fade-on-error-background')
+                ),
+                contrast: (
+                    color: map-get($tokens, 'risk-level-#{$scheme}-filled-fade-on-contrast-text'),
+                    background: map-get($tokens, 'risk-level-#{$scheme}-filled-fade-on-contrast-background')
+                )
+            )
+        ),
+        outline: (
+            fade-on: (
+                success: (
+                    color: map-get($tokens, 'risk-level-#{$scheme}-outline-fade-on-success-text'),
+                    background: map-get($tokens, 'risk-level-#{$scheme}-outline-fade-on-success-background'),
+                    border: map-get($tokens, 'risk-level-#{$scheme}-outline-fade-on-success-border')
+                ),
+                warning: (
+                    color: map-get($tokens, 'risk-level-#{$scheme}-outline-fade-on-warning-text'),
+                    background: map-get($tokens, 'risk-level-#{$scheme}-outline-fade-on-warning-background'),
+                    border: map-get($tokens, 'risk-level-#{$scheme}-outline-fade-on-warning-border')
+                ),
+                error: (
+                    color: map-get($tokens, 'risk-level-#{$scheme}-outline-fade-on-error-text'),
+                    background: map-get($tokens, 'risk-level-#{$scheme}-outline-fade-on-error-background'),
+                    border: map-get($tokens, 'risk-level-#{$scheme}-outline-fade-on-error-border')
+                ),
+                contrast: (
+                    color: map-get($tokens, 'risk-level-#{$scheme}-outline-fade-on-contrast-text'),
+                    background: map-get($tokens, 'risk-level-#{$scheme}-outline-fade-on-contrast-background'),
+                    border: map-get($tokens, 'risk-level-#{$scheme}-outline-fade-on-contrast-border')
+                )
+            )
+        )
     );
 
-    $tabs: (
-        border: map-get($tokens, 'tabs-#{$scheme}-border'),
-        state-normal-icon: map-get($tokens, 'tabs-#{$scheme}-state-normal-icon'),
-        state-normal-text: map-get($tokens, 'tabs-#{$scheme}-state-normal-text'),
-
-        state-hover-icon: map-get($tokens, 'tabs-#{$scheme}-state-hover-icon'),
-        state-hover-text: map-get($tokens, 'tabs-#{$scheme}-state-hover-text'),
-
-        state-active-marker: map-get($tokens, 'tabs-#{$scheme}-state-active-marker-color'),
-
-        state-empty-icon: map-get($tokens, 'tabs-#{$scheme}-state-empty-icon'),
-        state-empty-text: map-get($tokens, 'tabs-#{$scheme}-state-empty-text'),
+    $sidepanel: (
+        box-shadow: map-get($tokens, 'sidepanel-#{$scheme}-container-box-shadow'),
+        background: map-get($tokens, 'sidepanel-#{$scheme}-container-background'),
+        header-text: map-get($tokens, 'sidepanel-#{$scheme}-header-text-color'),
+        content-text: map-get($tokens, 'sidepanel-#{$scheme}-content-text-color')
+    );
 
-        state-disabled-icon: map-get($tokens, 'tabs-#{$scheme}-state-disabled-icon'),
-        state-disabled-text: map-get($tokens, 'tabs-#{$scheme}-state-disabled-text'),
-        state-disabled-marker-opacity: map-get($tokens, 'tabs-#{$scheme}-state-disabled-marker-opacity')
+    $tab-item: (
+        filled: (
+            on-background: (
+                default: (
+                    background: map-get($tokens, 'tabs-#{$scheme}-tab-item-filled-on-background-default-background'),
+                    text: map-get($tokens, 'tabs-#{$scheme}-tab-item-filled-on-background-default-text-color'),
+                    icon: map-get($tokens, 'tabs-#{$scheme}-tab-item-filled-on-background-default-icon-color')
+                ),
+                hover: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-background-states-hover-background'
+                    )
+                ),
+                focused: (
+                    border-color: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-background-states-focused-focus-outline-color'
+                    )
+                ),
+                selected: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-background-states-selected-background'
+                    )
+                ),
+                selected-hover: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-background-states-selected-hover-background'
+                    )
+                ),
+                selected-disabled: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-background-states-selected-disabled-background'
+                    ),
+                    text: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-background-states-selected-disabled-text-color'
+                    ),
+                    icon: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-background-states-selected-disabled-icon-color'
+                    )
+                ),
+                disabled: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-background-states-disabled-background'
+                    ),
+                    text: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-background-states-disabled-text-color'
+                    ),
+                    icon: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-background-states-disabled-icon-color'
+                    )
+                )
+            ),
+            on-surface: (
+                default: (
+                    background: map-get($tokens, 'tabs-#{$scheme}-tab-item-filled-on-surface-default-background'),
+                    text: map-get($tokens, 'tabs-#{$scheme}-tab-item-filled-on-surface-default-text-color'),
+                    icon: map-get($tokens, 'tabs-#{$scheme}-tab-item-filled-on-surface-default-icon-color')
+                ),
+                hover: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-surface-states-hover-background'
+                    ),
+                ),
+                focused: (
+                    border-color: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-surface-states-focused-focus-outline-color'
+                    )
+                ),
+                selected: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-surface-states-selected-background'
+                    ),
+                ),
+                selected-hover: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-surface-states-selected-hover-background'
+                    )
+                ),
+                selected-disabled: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-surface-states-selected-disabled-background'
+                    ),
+                    text: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-surface-states-selected-disabled-text-color'
+                    ),
+                    icon: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-surface-states-selected-disabled-icon-color'
+                    )
+                ),
+                disabled: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-surface-states-disabled-background'
+                    ),
+                    text: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-surface-states-disabled-text-color'
+                    ),
+                    icon: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-filled-on-surface-states-disabled-icon-color'
+                    )
+                )
+            )
+        ),
+        transparent: (
+            on-background: (
+                default: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-background-default-background'
+                    ),
+                    text: map-get($tokens, 'tabs-#{$scheme}-tab-item-transparent-on-background-default-text-color'),
+                    icon: map-get($tokens, 'tabs-#{$scheme}-tab-item-transparent-on-background-default-icon-color')
+                ),
+                hover: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-background-states-hover-background'
+                    )
+                ),
+                focused: (
+                    border-color: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-background-states-focused-focus-outline-color'
+                    )
+                ),
+                selected: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-background-states-selected-background'
+                    )
+                ),
+                selected-hover: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-background-states-selected-hover-background'
+                    )
+                ),
+                selected-disabled: (
+                    background: map-get(
+                        $tokens,
+                        'tabs-#{$scheme}-tab-item-transparent-on-background-states-selected-disabled-background'
+                    ),
+                    text: map-get(
+                        $tokens,
+                        'tabs-#{$scheme}-tab-item-transparent-on-background-states-selected-disabled-text-color'
+                    ),
+                    icon: map-get(
+                        $tokens,
+                        'tabs-#{$scheme}-tab-item-transparent-on-background-states-selected-disabled-icon-color'
+                    )
+                ),
+                disabled: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-background-states-disabled-background'
+                    ),
+                    text: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-background-states-disabled-text-color'
+                    ),
+                    icon: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-background-states-disabled-icon-color'
+                    )
+                )
+            ),
+            on-surface: (
+                default: (
+                    background: map-get($tokens, 'tabs-#{$scheme}-tab-item-transparent-on-surface-default-background'),
+                    text: map-get($tokens, 'tabs-#{$scheme}-tab-item-transparent-on-surface-default-text-color'),
+                    icon: map-get($tokens, 'tabs-#{$scheme}-tab-item-transparent-on-surface-default-icon-color')
+                ),
+                hover: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-surface-states-hover-background'
+                    ),
+                ),
+                focused: (
+                    border-color: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-surface-states-focused-focus-outline-color'
+                    )
+                ),
+                selected: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-surface-states-selected-background'
+                    ),
+                ),
+                selected-hover: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-surface-states-selected-hover-background'
+                    )
+                ),
+                selected-disabled: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-surface-states-selected-disabled-background'
+                    ),
+                    text: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-surface-states-selected-disabled-text-color'
+                    ),
+                    icon: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-surface-states-selected-disabled-icon-color'
+                    )
+                ),
+                disabled: (
+                    background: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-surface-states-disabled-background'
+                    ),
+                    text: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-surface-states-disabled-text-color'
+                    ),
+                    icon: map-get(
+                        $tokens, 'tabs-#{$scheme}-tab-item-transparent-on-surface-states-disabled-icon-color'
+                    )
+                )
+            )
+        )
     );
 
-    $vertical-tabs: (
-        state-normal-background: map-get($tokens, 'vertical-tabs-#{$scheme}-state-normal-background'),
-        state-selected-background: map-get($tokens, 'vertical-tabs-#{$scheme}-state-selected-background'),
-        state-hover-background: map-get($tokens, 'vertical-tabs-#{$scheme}-state-hover-background'),
-        state-hover-selected-background: map-get($tokens, 'vertical-tabs-#{$scheme}-state-hover-selected-background')
+    $tab-stack: (
+        filled: (
+            on-background: (
+                background: map-get($tokens, 'tabs-#{$scheme}-tab-stack-filled-on-background-background')
+            ),
+            on-surface: (
+                background: map-get($tokens, 'tabs-#{$scheme}-tab-stack-filled-on-surface-background')
+            )
+        ),
+
+        transparent: (
+            on-background: (
+                background: map-get($tokens, 'tabs-#{$scheme}-tab-stack-transparent-on-background-background')
+            ),
+            on-surface: (
+                background: map-get($tokens, 'tabs-#{$scheme}-tab-stack-transparent-on-surface-background')
+            )
+        )
     );
 
     $tag: (
@@ -1139,16 +1454,18 @@
     );
 
     $toast: (
-        background: map-get($tokens, 'toast-#{$scheme}-background'),
-        border: map-get($tokens, 'toast-#{$scheme}-border'),
-        text: map-get($tokens, 'toast-#{$scheme}-text'),
-        text-caption: map-get($tokens, 'toast-#{$scheme}-text-caption'),
-        shadow: map-get($tokens, 'toast-#{$scheme}-shadow'),
-
-        icon_info: map-get($tokens, 'toast-#{$scheme}-icon-info'),
-        icon_error: map-get($tokens, 'toast-#{$scheme}-icon-error'),
-        icon_success: map-get($tokens, 'toast-#{$scheme}-icon-success'),
-        icon_warning: map-get($tokens, 'toast-#{$scheme}-icon-warning')
+        contrast: (
+            background: map-get($tokens, 'toast-#{$scheme}-contrast-container-background'),
+            title: map-get($tokens, 'toast-#{$scheme}-contrast-container-title'),
+            text: map-get($tokens, 'toast-#{$scheme}-contrast-container-text'),
+            box-shadow: map-get($tokens, 'toast-#{$scheme}-contrast-container-box-shadow')
+        ),
+        error: (
+            background: map-get($tokens, 'toast-#{$scheme}-error-container-background'),
+            title: map-get($tokens, 'toast-#{$scheme}-error-container-title'),
+            text: map-get($tokens, 'toast-#{$scheme}-error-container-text'),
+            box-shadow: map-get($tokens, 'toast-#{$scheme}-error-container-box-shadow')
+        )
     );
 
     $tooltip: (
@@ -1169,6 +1486,52 @@
         )
     );
 
+    $tree-item: (
+        default: (
+            container-background: map-get($tokens, 'tree-#{$scheme}-default-container-background'),
+            text: map-get($tokens, 'tree-#{$scheme}-default-text-color'),
+            icon: map-get($tokens, 'tree-#{$scheme}-default-icon-color'),
+            tree-toggle: map-get($tokens, 'tree-#{$scheme}-default-tree-toggle-color'),
+            action-button: map-get($tokens, 'tree-#{$scheme}-default-action-button-color'),
+            caption: map-get($tokens, 'tree-#{$scheme}-default-caption-color')
+        ),
+        hover: (
+            container-background: map-get($tokens, 'tree-#{$scheme}-states-hover-container-background'),
+            text: map-get($tokens, 'tree-#{$scheme}-states-hover-text-color'),
+            icon: map-get($tokens, 'tree-#{$scheme}-states-hover-icon-color'),
+            tree-toggle: map-get($tokens, 'tree-#{$scheme}-states-hover-tree-toggle-color'),
+            action-button: map-get($tokens, 'tree-#{$scheme}-states-hover-action-button-color'),
+            caption: map-get($tokens, 'tree-#{$scheme}-states-hover-caption-color')
+        ),
+        selected: (
+            container-background: map-get($tokens, 'tree-#{$scheme}-states-selected-container-background'),
+            text: map-get($tokens, 'tree-#{$scheme}-states-selected-text-color'),
+            icon: map-get($tokens, 'tree-#{$scheme}-states-selected-icon-color'),
+            tree-toggle: map-get($tokens, 'tree-#{$scheme}-states-selected-tree-toggle-color'),
+            action-button: map-get($tokens, 'tree-#{$scheme}-states-selected-action-button-color'),
+            caption: map-get($tokens, 'tree-#{$scheme}-states-selected-caption-color')
+        ),
+        selected-hover: (
+            container-background: map-get($tokens, 'tree-#{$scheme}-states-selected-hover-container-background'),
+            text: map-get($tokens, 'tree-#{$scheme}-states-selected-hover-text-color'),
+            icon: map-get($tokens, 'tree-#{$scheme}-states-selected-hover-icon-color'),
+            tree-toggle: map-get($tokens, 'tree-#{$scheme}-states-selected-hover-tree-toggle-color'),
+            action-button: map-get($tokens, 'tree-#{$scheme}-states-selected-hover-action-button-color'),
+            caption: map-get($tokens, 'tree-#{$scheme}-states-selected-hover-caption-color')
+        ),
+        focused: (
+            focus-outline: map-get($tokens, 'tree-#{$scheme}-states-focused-focus-outline-color')
+        ),
+        disabled: (
+            container-background: map-get($tokens, 'tree-#{$scheme}-states-disabled-container-background'),
+            text: map-get($tokens, 'tree-#{$scheme}-states-disabled-text-color'),
+            icon: map-get($tokens, 'tree-#{$scheme}-states-disabled-icon-color'),
+            tree-toggle: map-get($tokens, 'tree-#{$scheme}-states-disabled-tree-toggle-color'),
+            action-button: map-get($tokens, 'tree-#{$scheme}-states-disabled-action-button-color'),
+            caption: map-get($tokens, 'tree-#{$scheme}-states-disabled-caption-color')
+        )
+    );
+
     $scrollbar: (
         default: map-get($tokens, 'scrollbar-#{$scheme}-thumb-default-background'),
         hover: map-get($tokens, 'scrollbar-#{$scheme}-thumb-hover-background'),
@@ -1179,6 +1542,7 @@
     @return (
         alert: $alert,
         popup: $popup,
+        dropdown: $dropdown,
         badge: $badge,
         button: $button,
         card: $card,
@@ -1196,6 +1560,7 @@
         icon-item: $icon-item,
         icon-button: $icon-button,
         link: $link,
+        list-item: $list-item,
         loader-overlay: $loader-overlay,
         modal: $modal,
         markdown: $markdown,
@@ -1205,14 +1570,16 @@
         progress-bar: $progress-bar,
         progress-spinner: $progress-spinner,
         radio: $radio,
+        risk-level: $risk-level,
         sidepanel: $sidepanel,
-        tabs: $tabs,
-        vertical-tabs: $vertical-tabs,
+        tab-item: $tab-item,
+        tab-stack: $tab-stack,
         tag: $tag,
         timezone: $timezone,
         toast: $toast,
         toggle: $toggle,
         tooltip: $tooltip,
+        tree-item: $tree-item,
         scrollbar: $scrollbar
     );
 }

package/dropdown/_dropdown-theme.scss

@@ -1,66 +1,59 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/common/popup' as *;
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
 
 
+@mixin kbq-dropdown-item-state($state) {
+    background: map.get($state, container-background);
+    color: map.get($state, text);
+
+    .kbq-dropdown-item__caption {
+        color: map.get($state, caption);
+    }
+}
+
 @mixin kbq-dropdown-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-    $secondary: map.get($theme, secondary);
+    $dropdown: map.get(map.get($theme, components), dropdown);
+    $divider: map.get(map.get($theme, components), divider);
 
     .kbq-dropdown__panel {
-        @include popup-params($theme);
+        box-shadow: map.get($dropdown, box-shadow);
+        background: map.get($dropdown, background);
     }
 
     .kbq-dropdown-item {
-        color: map.get($foreground, text);
+        $dropdown-item: map.get(map.get($theme, components), list-item);
 
-        background: transparent;
+        @include kbq-dropdown-item-state(map.get($dropdown-item, default));
 
-        &:hover {
-            background: map.get($background, overlay-hover);
+        &.kbq-dropdown-item_highlighted,
+        &:hover:not(.kbq-disabled):not([disabled]) {
+            @include kbq-dropdown-item-state(map.get($dropdown-item, hover));
         }
 
         &.cdk-keyboard-focused {
-            outline: map.get(map.get($theme, states), focused-color) solid 2px;
-            outline-offset: -2px !important;
+            border-color: map.get(map.get($dropdown-item, focused), focus-outline);
         }
 
         &.kbq-selected {
-            background: map.get(map.get($theme, states), selected-color);
-        }
-
-        &[disabled] {
-            color: map.get($foreground, text-disabled);
+            @include kbq-dropdown-item-state(map.get($dropdown-item, selected));
 
-            background: transparent;
+            &:hover:not(.kbq-disabled):not([disabled]) {
+                @include kbq-dropdown-item-state(map.get($dropdown-item, selected-hover));
+            }
         }
 
-        .kbq-dropdown-item__caption {
-            color: map.get($foreground, text-less-contrast);
+        &.kbq-disabled,
+        &[disabled] {
+            @include kbq-dropdown-item-state(map.get($dropdown-item, disabled));
         }
     }
 
-    .kbq-dropdown-item_highlighted {
-        background: map.get($background, overlay-hover);
-    }
-
     .kbq-dropdown-item-overlay {
         background: transparent;
     }
-
-    .kbq-dropdown__divider {
-        background-color: map.get($foreground, divider);
-    }
-
-    .kbq-dropdown-trigger.kbq-pressed {
-        & .kbq-button-overlay {
-            background: kbq-color($secondary, A8);
-        }
-    }
 }
 
 @mixin kbq-dropdown-typography($config) {
@@ -68,18 +61,18 @@
 
     .kbq-dropdown-item,
     .kbq-dropdown__content {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, dropdown-item-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-text));
     }
 
     .kbq-dropdown-item__caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, dropdown-item-font-caption));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-caption));
     }
 
     .kbq-dropdown__group-header {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, dropdown-group-header-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-header));
 
         &.kbq-dropdown__group-header_small {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, dropdown-group-header-font-small));
+            @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-subheading));
         }
     }
 }

package/dropdown/dropdown-item.component.d.ts

@@ -47,6 +47,6 @@ export declare class KbqDropdownItem extends KbqDropdownItemMixinBase implements
     getLabel(): string;
     haltDisabledEvents(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropdownItem, [null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDropdownItem, "kbq-dropdown-item, [kbq-dropdown-item]", ["mcDropdownItem"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["icon"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDropdownItem, "kbq-dropdown-item, [kbq-dropdown-item]", ["mcDropdownItem"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["icon"], ["[kbq-icon]", "*"], false, never>;
 }
 export {};