@koobiq/components 16.0.0-beta.1 → 16.0.0-beta.10

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

@@ -20,50 +20,63 @@
         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: (
                 success: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-icon')
                 ),
                 warning: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-icon')
                 ),
                 error: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-icon')
                 )
             ),
             fade-on: (
                 theme: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-icon')
                 ),
                 contrast: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-icon')
                 ),
                 success: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-icon')
                 ),
                 warning: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-icon')
                 ),
                 error: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-icon')
                 )
             )
         ),
@@ -73,31 +86,36 @@
                     color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-background'),
                     border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-border'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-icon')
                 ),
                 contrast: (
                     color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-background'),
                     border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-border'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-icon')
                 ),
                 success: (
                     color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-background'),
                     border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-border'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-icon')
                 ),
                 warning: (
                     color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-background'),
                     border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-border'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-icon')
                 ),
                 error: (
                     color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-background'),
                     border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-border'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-icon')
                 )
             )
         )
@@ -262,6 +280,50 @@
         )
     );
 
+    $button-toggle: (
+        container: (
+            background: map-get($tokens, 'button-toggle-#{$scheme}-container-background')
+        ),
+        item: (
+            default: (
+                background: map-get($tokens, 'button-toggle-#{$scheme}-item-default-background'),
+                text: map-get($tokens, 'button-toggle-#{$scheme}-item-default-text'),
+                icon: map-get($tokens, 'button-toggle-#{$scheme}-item-default-icon')
+            ),
+            hover: (
+                background: map-get($tokens, 'button-toggle-#{$scheme}-item-states-hover-background'),
+                text: map-get($tokens, 'button-toggle-#{$scheme}-item-states-hover-text'),
+                icon: map-get($tokens, 'button-toggle-#{$scheme}-item-states-hover-icon')
+            ),
+            active: (
+                background: map-get($tokens, 'button-toggle-#{$scheme}-item-states-active-background'),
+                text: map-get($tokens, 'button-toggle-#{$scheme}-item-states-active-text'),
+                icon: map-get($tokens, 'button-toggle-#{$scheme}-item-states-active-icon')
+            ),
+            selected: (
+                background: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-background'),
+                text: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-text'),
+                icon: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-icon')
+            ),
+            selected-hover: (
+                background: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-hover-background'),
+                text: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-hover-text'),
+                icon: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-hover-icon')
+            ),
+            selected-active: (
+                background: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-active-background'),
+                text: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-active-text'),
+                icon: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-active-icon')
+            ),
+            disabled: (
+                background: map-get($tokens, 'button-toggle-#{$scheme}-item-states-disabled-background'),
+                text: map-get($tokens, 'button-toggle-#{$scheme}-item-states-disabled-text'),
+                icon: map-get($tokens, 'button-toggle-#{$scheme}-item-states-disabled-icon')
+            ),
+            focused: map-get($tokens, 'button-toggle-#{$scheme}-item-states-focused-outline')
+        )
+    );
+
     $card: (
         error: (
             vertical-line: map-get($tokens, 'card-#{$scheme}-error-vertical-line'),
@@ -290,7 +352,8 @@
             default: (
                 border: map-get($tokens, 'checkbox-#{$scheme}-theme-default-border'),
                 color: map-get($tokens, 'checkbox-#{$scheme}-theme-default-color'),
-                background: map-get($tokens, 'checkbox-#{$scheme}-theme-default-background')
+                background: map-get($tokens, 'checkbox-#{$scheme}-theme-default-background'),
+                caption: map-get($tokens, 'checkbox-#{$scheme}-theme-default-caption')
             ),
             hover: (
                 border: map-get($tokens, 'checkbox-#{$scheme}-theme-states-hover-border'),
@@ -317,7 +380,8 @@
             disabled: (
                 border: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-border'),
                 color: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-color'),
-                background: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-background')
+                background: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-background'),
+                caption: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-caption')
             )
         ),
         error: (
@@ -481,10 +545,41 @@
     );
 
     $datepicker: (
-        state-today-color: map-get($tokens, 'datepicker-body-#{$scheme}-states-today-color'),
-        state-today-background: map-get($tokens, 'datepicker-body-#{$scheme}-states-today-background'),
-        state-selected-color: map-get($tokens, 'datepicker-body-#{$scheme}-states-selected-color'),
-        state-selected-background: map-get($tokens, 'datepicker-body-#{$scheme}-states-selected-background')
+        container: (
+            background: map-get($tokens, 'datepicker-#{$scheme}-container-background'),
+            box-shadow: map-get($tokens, 'datepicker-#{$scheme}-container-box-shadow')
+        ),
+        header: (
+            text: map-get($tokens, 'datepicker-#{$scheme}-header-text'),
+            divider: map-get($tokens, 'datepicker-#{$scheme}-header-divider')
+        ),
+
+        cell: (
+            default: (
+                background: map-get($tokens, 'datepicker-#{$scheme}-grid-cell-default-background'),
+                text: map-get($tokens, 'datepicker-#{$scheme}-grid-cell-default-text')
+            ),
+            today: (
+                background: map-get($tokens, 'datepicker-#{$scheme}-grid-cell-today-background'),
+                text: map-get($tokens, 'datepicker-#{$scheme}-grid-cell-today-text')
+            ),
+            hover: (
+                background: map-get($tokens, 'datepicker-#{$scheme}-grid-cell-states-hover-background')
+            ),
+            active: (
+                background: map-get($tokens, 'datepicker-#{$scheme}-grid-cell-states-active-background')
+            ),
+            selected: (
+                background: map-get($tokens, 'datepicker-#{$scheme}-grid-cell-states-selected-background'),
+                text: map-get($tokens, 'datepicker-#{$scheme}-grid-cell-states-selected-text')
+            ),
+            selected-hover: (
+                background: map-get($tokens, 'datepicker-#{$scheme}-grid-cell-states-selected-hover-background')
+            ),
+            disabled: (
+                background: map-get($tokens, 'datepicker-#{$scheme}-grid-cell-states-disabled-background')
+            )
+        )
     );
 
     $divider: (
@@ -492,8 +587,8 @@
     );
 
     $dl: (
-        dt: map-get($tokens, 'description-list-#{$scheme}-dt'),
-        dd: map-get($tokens, 'description-list-#{$scheme}-dd')
+        dt: map-get($tokens, 'description-list-#{$scheme}-term-color'),
+        dd: map-get($tokens, 'description-list-#{$scheme}-description-color')
     );
 
     $form-field: (
@@ -501,8 +596,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'),
@@ -528,7 +622,7 @@
             border: map-get($tokens, 'form-field-#{$scheme}-states-disabled-border-color'),
             background: map-get($tokens, 'form-field-#{$scheme}-states-disabled-background'),
             placeholder: map-get($tokens, 'form-field-#{$scheme}-states-disabled-placeholder'),
-            text: map-get($tokens, 'form-field-#{$scheme}-states--disabled-text')
+            text: map-get($tokens, 'form-field-#{$scheme}-states-disabled-text')
         )
     );
 
@@ -586,6 +680,82 @@
         )
     );
 
+    $file-upload: (
+        single: (
+            default: (
+                border: map-get($tokens, 'file-upload-#{$scheme}-single-default-container-border'),
+                background: map-get($tokens, 'file-upload-#{$scheme}-single-default-container-background'),
+                upload-icon: map-get($tokens, 'file-upload-#{$scheme}-single-default-upload-icon-color'),
+                left-icon: map-get($tokens, 'file-upload-#{$scheme}-single-default-left-icon-color'),
+                text-block: map-get($tokens, 'file-upload-#{$scheme}-single-default-text-block-color'),
+                icon-button: map-get($tokens, 'file-upload-#{$scheme}-single-default-icon-button-color')
+            ),
+            states: (
+                on-drag: (
+                    border: map-get($tokens, 'file-upload-#{$scheme}-single-states-on-drag-container-border'),
+                    background: map-get($tokens, 'file-upload-#{$scheme}-single-states-on-drag-container-background'),
+                    upload-icon: map-get($tokens, 'file-upload-#{$scheme}-single-states-on-drag-upload-icon-color'),
+                    left-icon: map-get($tokens, 'file-upload-#{$scheme}-single-states-on-drag-left-icon-color'),
+                    text-block: map-get($tokens, 'file-upload-#{$scheme}-single-states-on-drag-text-block-color')
+                ),
+                error: (
+                    border: map-get($tokens, 'file-upload-#{$scheme}-single-states-error-container-border'),
+                    background: map-get($tokens, 'file-upload-#{$scheme}-single-states-error-container-background'),
+                    left-icon: map-get($tokens, 'file-upload-#{$scheme}-single-states-error-left-icon-color'),
+                    text-block: map-get($tokens, 'file-upload-#{$scheme}-single-states-error-text-block-color')
+                ),
+                disabled: (
+                    border: map-get($tokens, 'file-upload-#{$scheme}-single-states-disabled-container-border'),
+                    background: map-get($tokens, 'file-upload-#{$scheme}-single-states-disabled-container-background'),
+                    upload-icon: map-get($tokens, 'file-upload-#{$scheme}-single-states-disabled-upload-icon-color'),
+                    left-icon: map-get($tokens, 'file-upload-#{$scheme}-single-states-disabled-left-icon-color'),
+                    text-block: map-get($tokens, 'file-upload-#{$scheme}-single-states-disabled-text-block-color')
+                ),
+                focused: map-get($tokens, 'file-upload-#{$scheme}-single-states-focused-focus-outline-color')
+            )
+        ),
+        multiple: (
+            default: (
+                border: map-get($tokens, 'file-upload-#{$scheme}-multiple-default-container-border'),
+                background: map-get($tokens, 'file-upload-#{$scheme}-multiple-default-container-background'),
+                upload-icon: map-get($tokens, 'file-upload-#{$scheme}-multiple-default-upload-icon-color'),
+                left-icon: map-get($tokens, 'file-upload-#{$scheme}-multiple-default-left-icon-color'),
+                text-block: map-get($tokens, 'file-upload-#{$scheme}-multiple-default-text-block-color'),
+                icon-button: map-get($tokens, 'file-upload-#{$scheme}-multiple-default-icon-button-color'),
+                grid-divider: map-get($tokens, 'file-upload-#{$scheme}-multiple-default-grid-divider-color')
+            ),
+            states: (
+                on-drag: (
+                    border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-on-drag-container-border'),
+                    background: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-on-drag-container-background'),
+                    upload-icon: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-on-drag-upload-icon-color'),
+                    left-icon: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-on-drag-left-icon-color'),
+                    text-block: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-on-drag-text-block-color'),
+                    icon-button: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-on-drag-icon-button-color'),
+                    grid-divider: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-on-drag-grid-divider-color')
+                ),
+                error: (
+                    grid-cell-background: map-get(
+                        $tokens, 'file-upload-#{$scheme}-multiple-states-error-grid-cell-background'
+                    ),
+                    left-icon: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-error-left-icon-color'),
+                    text-block: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-error-text-block-color'),
+                    icon-button: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-error-icon-button-color')
+                ),
+                disabled: (
+                    border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disabled-container-border'),
+                    background: map-get(
+                        $tokens, 'file-upload-#{$scheme}-multiple-states-disabled-container-background'
+                    ),
+                    upload-icon: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disabled-upload-icon-color'),
+                    left-icon: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disabled-left-icon-color'),
+                    text-block: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disabled-text-block-color'),
+                    grid-divider: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disabled-grid-divider-color')
+                )
+            )
+        )
+    );
+
     $forms: (
         label: map-get($tokens, 'forms-#{$scheme}-label'),
         legend: map-get($tokens, 'forms-#{$scheme}-legend'),
@@ -662,39 +832,112 @@
             state-hover: map-get($tokens, 'icon-button-#{$scheme}-success-states-hover'),
             state-active: map-get($tokens, 'icon-button-#{$scheme}-success-states-active'),
             state-disabled: map-get($tokens, 'icon-button-#{$scheme}-success-states-disabled')
+        ),
+        warning: (
+            default: map-get($tokens, 'icon-button-#{$scheme}-warning-default'),
+            state-hover: map-get($tokens, 'icon-button-#{$scheme}-warning-states-hover'),
+            state-active: map-get($tokens, 'icon-button-#{$scheme}-warning-states-active'),
+            state-disabled: map-get($tokens, 'icon-button-#{$scheme}-warning-states-disabled')
         )
     );
 
-    $link: (
-        text: map-get($tokens, 'link-#{$scheme}-text'),
-        border-bottom: map-get($tokens, 'link-#{$scheme}-border-bottom'),
-
-        state-visited-text: map-get($tokens, 'link-#{$scheme}-state-visited-text'),
-        state-visited-border-bottom: map-get($tokens, 'link-#{$scheme}-state-visited-border-bottom'),
-
-        state-hover-text: map-get($tokens, 'link-#{$scheme}-state-hover-text'),
-        state-hover-border-bottom: map-get($tokens, 'link-#{$scheme}-state-hover-border-bottom'),
 
-        state-active-text: map-get($tokens, 'link-#{$scheme}-state-active'),
-        state-active-border-bottom: map-get($tokens, 'link-#{$scheme}-state-active-border-bottom'),
+    $link: (
+        default: (
+            text: map-get($tokens, 'link-#{$scheme}-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-border-bottom')
+        ),
+        visited: (
+            text: map-get($tokens, 'link-#{$scheme}-state-visited-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-visited-border-bottom')
+        ),
+        visited-hover: (
+            text: map-get($tokens, 'link-#{$scheme}-state-visited-hover-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-visited-hover-border-bottom')
+        ),
+        visited-active: (
+            text: map-get($tokens, 'link-#{$scheme}-state-visited-active-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-visited-active-border-bottom')
+        ),
+        hover: (
+            text: map-get($tokens, 'link-#{$scheme}-state-hover-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-hover-border-bottom')
+        ),
+        active: (
+            text: map-get($tokens, 'link-#{$scheme}-state-active-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-active-border-bottom')
+        ),
+        focused: (
+            outline: map-get($tokens, 'link-#{$scheme}-state-focused-outline')
+        ),
+        disabled: (
+            text: map-get($tokens, 'link-#{$scheme}-state-disabled-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-disabled-border-bottom')
+        )
+    );
 
-        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'),
+
+        overlay: map-get($tokens, 'modal-#{$scheme}-overlay-background')
     );
 
     $markdown: (
@@ -758,20 +1001,19 @@
     );
 
     $popover: (
-        background: map-get($tokens, 'popover-#{$scheme}-background'),
-        text: map-get($tokens, 'popover-#{$scheme}-text'),
-        shadow: map-get($tokens, 'popover-#{$scheme}-shadow'),
-        border: map-get($tokens, 'popover-#{$scheme}-border'),
-
-        footer: (
-            background: map-get($tokens, 'popover-footer-#{$scheme}-background'),
-            border: map-get($tokens, 'popover-footer-#{$scheme}-border'),
+        container: (
+            background: map-get($tokens, 'popover-#{$scheme}-container-background'),
+            box-shadow: map-get($tokens, 'popover-#{$scheme}-container-box-shadow')
         ),
-
         header: (
-            text: map-get($tokens, 'popover-header-#{$scheme}-text'),
-            background: map-get($tokens, 'popover-header-#{$scheme}-background'),
-            border: map-get($tokens, 'popover-header-#{$scheme}-border'),
+            text: map-get($tokens, 'popover-#{$scheme}-header-text-color'),
+            scroll-shadow: map-get($tokens, 'popover-#{$scheme}-header-scroll-shadow')
+        ),
+        content: (
+            text: map-get($tokens, 'popover-#{$scheme}-content-text-color')
+        ),
+        footer: (
+            scroll-shadow: map-get($tokens, 'popover-#{$scheme}-footer-scroll-shadow')
         )
     );
 
@@ -796,6 +1038,7 @@
                 outer-circle-border: map-get($tokens, 'radio-#{$scheme}-theme-default-outer-circle-border'),
                 outer-circle-background: map-get($tokens, 'radio-#{$scheme}-theme-default-outer-circle-background'),
                 inner-circle-background: map-get($tokens, 'radio-#{$scheme}-theme-default-inner-circle-background'),
+                caption: map-get($tokens, 'radio-#{$scheme}-theme-default-caption')
             ),
 
             hover: (
@@ -827,6 +1070,17 @@
                     $tokens, 'radio-#{$scheme}-theme-states-checked-hover-inner-circle-background'
                 )
             ),
+            checked-disabled: (
+                outer-circle-border: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-checked-disabled-outer-circle-border'
+                ),
+                outer-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-checked-disabled-outer-circle-background'
+                ),
+                inner-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-checked-disabled-inner-circle-background'
+                )
+            ),
             focused: (
                 outer-circle-border: map-get($tokens, 'radio-#{$scheme}-theme-states-focused-outer-circle-border'),
                 outer-circle-background: map-get(
@@ -860,7 +1114,8 @@
                 ),
                 inner-circle-background: map-get(
                     $tokens, 'radio-#{$scheme}-theme-states-disabled-inner-circle-background'
-                )
+                ),
+                caption: map-get($tokens, 'radio-#{$scheme}-theme-states-disabled-caption'),
             )
         ),
         error: (
@@ -899,6 +1154,17 @@
                     $tokens, 'radio-#{$scheme}-error-states-checked-hover-inner-circle-background'
                 )
             ),
+            checked-disabled: (
+                outer-circle-border: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-checked-disabled-outer-circle-border'
+                ),
+                outer-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-checked-disabled-outer-circle-background'
+                ),
+                inner-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-checked-disabled-inner-circle-background'
+                )
+            ),
             focused: (
                 outer-circle-border: map-get($tokens, 'radio-#{$scheme}-error-states-focused-outer-circle-border'),
                 outer-circle-background: map-get(
@@ -937,35 +1203,307 @@
         )
     );
 
-    $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'),
+    $select-panel: (
+        background: map-get($tokens, 'select-panel-#{$scheme}-dropdown-background'),
+        shadow: map-get($tokens, 'select-panel-#{$scheme}-dropdown-shadow')
+    );
 
-        state-active-marker: map-get($tokens, 'tabs-#{$scheme}-state-active-marker-color'),
+    $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-empty-icon: map-get($tokens, 'tabs-#{$scheme}-state-empty-icon'),
-        state-empty-text: map-get($tokens, 'tabs-#{$scheme}-state-empty-text'),
+        overlay: map-get($tokens, 'sidepanel-#{$scheme}-overlay-background')
+    );
 
-        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 +1677,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 +1709,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,14 +1765,17 @@
     @return (
         alert: $alert,
         popup: $popup,
+        dropdown: $dropdown,
         badge: $badge,
         button: $button,
+        button-toggle: $button-toggle,
         card: $card,
         checkbox: $checkbox,
         code-block: $code-block,
         datepicker: $datepicker,
         divider: $divider,
         dl: $dl,
+        file-upload: $file-upload,
         form-field: $form-field,
         form-field-hint: $form-field-hint,
         form-field-password-hint: $form-field-password-hint,
@@ -1196,6 +1785,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 +1795,17 @@
         progress-bar: $progress-bar,
         progress-spinner: $progress-spinner,
         radio: $radio,
+        risk-level: $risk-level,
+        select-panel: $select-panel,
         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
     );
 }