@koobiq/components 16.0.0-beta.7 → 16.0.0-beta.9

package/core/styles/common/_select.scss

@@ -35,6 +35,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     $border-width: map.get($tokens, form-field-size-border-width);
+    $height: map.get($tokens, form-field-size-height);
 
     .kbq-select__trigger {
         display: flex;
@@ -44,43 +45,82 @@ $tokens: meta.module-variables(tokens) !default;
         cursor: pointer;
 
         height: calc(
-            var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) -
-            (var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width)) * 2)
+            var(--kbq-form-field-size-height, $height) -
+            (var(--kbq-form-field-size-border-width, $border-width) * 2)
         );
+    }
 
+    .kbq-select__trigger.kbq-select__trigger_single {
         & .kbq-select__matcher {
             $padding-vertical: map.get($tokens, select-size-single-padding-vertical);
 
             padding:
                 calc(
-                    var(--kbq-select-size-single-padding-vertical, #{$padding-vertical}) -
-                    var(--kbq-form-field-size-border-width, #{$border-width})
+                    var(--kbq-select-size-single-padding-vertical, $padding-vertical) -
+                    var(--kbq-form-field-size-border-width, $border-width)
                 )
                 calc(
-                    var(--kbq-select-size-single-padding-right, #{map.get($tokens, select-size-single-padding-right)}) -
-                    var(--kbq-form-field-size-border-width, #{$border-width})
+                    var(--kbq-select-size-single-padding-right, map.get($tokens, select-size-single-padding-right)) -
+                    var(--kbq-form-field-size-border-width, $border-width)
                 )
                 calc(
-                    var(--kbq-select-size-single-padding-vertical, #{$padding-vertical}) -
-                    var(--kbq-form-field-size-border-width, #{$border-width})
+                    var(--kbq-select-size-single-padding-vertical, $padding-vertical) -
+                    var(--kbq-form-field-size-border-width, $border-width)
                 )
                 calc(
-                    var(--kbq-select-size-single-padding-left, #{map.get($tokens, select-size-single-padding-left)}) -
-                    var(--kbq-form-field-size-border-width, #{$border-width})
+                    var(--kbq-select-size-single-padding-left, map.get($tokens, select-size-single-padding-left)) -
+                    var(--kbq-form-field-size-border-width, $border-width)
                 );
         }
     }
 
     .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) {
         & .kbq-select__matcher {
-            padding-left: calc(
-                var(--kbq-select-size-multiple-padding-left, #{map.get($tokens, select-size-multiple-padding-left)}) -
-                var(--kbq-form-field-size-border-width, #{$border-width})
-            );
+            $padding-vertical: map.get($tokens, select-size-multiple-padding-vertical);
+
+            padding:
+                calc(
+                    var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) -
+                    var(--kbq-form-field-size-border-width, $border-width)
+                )
+                calc(
+                    var(--kbq-select-size-multiple-padding-right, map.get($tokens,select-size-multiple-padding-right)) -
+                    var(--kbq-form-field-size-border-width, $border-width)
+                )
+                calc(
+                    var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) -
+                    var(--kbq-form-field-size-border-width, $border-width)
+                )
+                calc(
+                    var(--kbq-select-size-multiple-padding-left, map.get($tokens, select-size-multiple-padding-left)) -
+                    var(--kbq-form-field-size-border-width, $border-width)
+                );
 
             .kbq-select__match-container {
                 display: flex;
             }
+
+            .kbq-select__match-list {
+                display: flex;
+                flex-wrap: wrap;
+                overflow: hidden;
+
+                height: calc(
+                    var(--kbq-form-field-size-height, $height) -
+                    (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
+                );
+
+                max-height: calc(
+                    var(--kbq-form-field-size-height, $height) -
+                    (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
+                );
+
+                gap: var(--kbq-select-size-multiple-content-gap, map.get($tokens, select-size-multiple-content-gap));
+
+                margin-right: var(
+                    --kbq-select-size-multiple-content-gap, map.get($tokens, select-size-multiple-content-gap)
+                );
+            }
         }
     }
 
@@ -95,39 +135,13 @@ $tokens: meta.module-variables(tokens) !default;
             align-self: center;
             padding-left: 4px;
             padding-right: var(
-                --kbq-select-size-multiple-content-gap, #{map.get($tokens, select-size-multiple-content-gap)}
+                --kbq-select-size-multiple-content-gap, map.get($tokens, select-size-multiple-content-gap)
             );
 
             text-align: right;
         }
     }
 
-    .kbq-select__match-list {
-        display: flex;
-        flex-wrap: wrap;
-        overflow: hidden;
-
-        $padding-vertical: map.get($tokens, select-size-multiple-padding-vertical);
-
-        max-height: calc(
-            var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) -
-            (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
-        );
-
-        height: calc(
-            var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) -
-            (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
-        );
-
-        gap: var(
-            --kbq-select-size-multiple-content-gap, #{map.get($tokens, select-size-multiple-content-gap)}
-        );
-
-        margin-right: var(
-            --kbq-select-size-multiple-content-gap, #{map.get($tokens, select-size-multiple-content-gap)}
-        );
-    }
-
     .kbq-select__arrow-wrapper {
         display: flex;
         align-self: center;

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

@@ -31,44 +31,52 @@
                 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')
                 )
             )
         ),
@@ -78,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')
                 )
             )
         )
@@ -267,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'),
@@ -488,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: (
@@ -592,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'),
@@ -668,23 +832,48 @@
             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'),
-
-        state-focused-outline: map-get($tokens, 'link-#{$scheme}-state-focused-outline')
+    $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')
+        )
     );
 
     $list-item: (
@@ -746,7 +935,9 @@
 
         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')
+        content: map-get($tokens, 'modal-#{$scheme}-content-text-color'),
+
+        overlay: map-get($tokens, 'modal-#{$scheme}-overlay-background')
     );
 
     $markdown: (
@@ -810,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')
         )
     );
 
@@ -1074,11 +1264,18 @@
         )
     );
 
+    $select-panel: (
+        background: map-get($tokens, 'select-panel-#{$scheme}-dropdown-background'),
+        shadow: map-get($tokens, 'select-panel-#{$scheme}-dropdown-shadow')
+    );
+
     $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')
+        content-text: map-get($tokens, 'sidepanel-#{$scheme}-content-text-color'),
+
+        overlay: map-get($tokens, 'sidepanel-#{$scheme}-overlay-background')
     );
 
     $tab-item: (
@@ -1571,12 +1768,14 @@
         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,
@@ -1597,6 +1796,7 @@
         progress-spinner: $progress-spinner,
         radio: $radio,
         risk-level: $risk-level,
+        select-panel: $select-panel,
         sidepanel: $sidepanel,
         tab-item: $tab-item,
         tab-stack: $tab-stack,