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

package/core/styles/common/_animation.scss

@@ -21,15 +21,19 @@
         bottom: 0;
         left: 0;
 
-        $lighter: transparent;
-        $darker: rgba(0, 0, 0, 0.05);
+        $lighter: rgba(255, 255, 255, 0.04);
+        $darker: rgba(0, 0, 0, 0.04);
+
         background: linear-gradient(
             135deg,
-            $darker 10px, $lighter 10px,
-            $lighter 20px, $darker 20px,
-            $darker 30px, $lighter 30px
+            $darker 10px,
+            $lighter 10px,
+            $lighter 20px,
+            $darker 20px,
+            $darker 30px,
+            $lighter 31px
         ) repeat;
-        background-size: 29px 29px;
+        background-size: 32px 32px;
         animation: kbq-progress 1s linear infinite;
     }
 }

package/core/styles/common/_overlay.scss

@@ -6,7 +6,7 @@ $overlay-z-index: 1000 !default;
 $overlay-backdrop-z-index: 1000 !default;
 
 // Background color for all of the backdrops
-$overlay-backdrop-color: rgba(0, 0, 0, 0.32) !default;
+$overlay-backdrop-color: rgba(0, 0, 0, 0.50) !default;
 
 // Default backdrop animation is based on the Material Design swift-ease-out.
 $backdrop-animation-duration: 400ms !default;

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;
@@ -146,6 +160,30 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 
+    &.kbq-disabled {
+        & .kbq-select__trigger {
+            @include vendor-prefixes.user-select(none);
+
+            cursor: default;
+        }
+    }
+}
+
+%kbq-select-panel {
+    min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11
+
+    overflow: hidden;
+
+    border-radius: var(
+        --kbq-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
+    );
+
+    // Override optgroup and option to scale based on font-size of the trigger.
+    .kbq-optgroup-label,
+    .kbq-option {
+        font-size: inherit;
+    }
+
     .kbq-select__no-options-message {
         display: flex;
         flex-direction: row;
@@ -172,30 +210,6 @@ $tokens: meta.module-variables(tokens) !default;
             style: solid;
         }
     }
-
-    &.kbq-disabled {
-        & .kbq-select__trigger {
-            @include vendor-prefixes.user-select(none);
-
-            cursor: default;
-        }
-    }
-}
-
-%kbq-select-panel {
-    min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11
-
-    overflow: hidden;
-
-    border-radius: var(
-        --kbq-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
-    );
-
-    // Override optgroup and option to scale based on font-size of the trigger.
-    .kbq-optgroup-label,
-    .kbq-option {
-        font-size: inherit;
-    }
 }
 
 %kbq-select-content {

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

@@ -267,6 +267,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'),
@@ -295,7 +339,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'),
@@ -322,7 +367,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: (
@@ -486,10 +532,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: (
@@ -497,8 +574,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: (
@@ -590,6 +667,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'),
@@ -744,7 +897,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: (
@@ -808,20 +963,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')
         )
     );
 
@@ -846,6 +1000,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: (
@@ -877,6 +1032,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(
@@ -910,7 +1076,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: (
@@ -949,6 +1116,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(
@@ -1052,7 +1230,9 @@
         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: (
@@ -1545,12 +1725,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,

package/core/styles/theming/_theming.scss

@@ -37,8 +37,8 @@
         $background: map.get($theme, background);
         $foreground: map.get($theme, foreground);
 
-        background-color: kbq-color($background, background);
-        color: kbq-color($foreground, text);
+        background-color: kbq-color($background, bg);
+        color: kbq-color($foreground, contrast);
     }
 
     .kbq-theme-loaded-marker {