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

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'),
@@ -488,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: (
@@ -592,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'),
@@ -746,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: (
@@ -810,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')
         )
     );
 
@@ -1078,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: (
@@ -1571,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 {

package/datepicker/_datepicker-theme.scss

@@ -1,7 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/common/popup';
 @use '../core/styles/theming/theming';
 @use '../core/styles/typography/typography-utils' as *;
 
@@ -10,77 +9,68 @@ $kbq-datepicker-selected-fade-amount: 0.6;
 $kbq-datepicker-today-fade-amount: 0.2;
 
 @mixin kbq-datepicker-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
-    $primary: map.get($theme, theme);
-    $secondary: map.get($theme, secondary);
-
     $datepicker: map.get(map.get($theme, components), datepicker);
 
-    .kbq-calendar__table-header {
-        color: theming.kbq-color($secondary, 60);
-    }
+    $container: map.get($datepicker, container);
+    $header: map.get($datepicker, header);
+    $cell: map.get($datepicker, cell);
 
-    .kbq-datepicker-toggle__button.kbq-button-icon {
-        border-color: transparent;
-        border-radius: 0;
-        background: transparent;
-        opacity: 1;
+    .kbq-datepicker__content {
+        background: map.get($container, background);
+        box-shadow: map.get($container, box-shadow);
+    }
 
-        .kbq-icon {
-            color: theming.kbq-color($foreground, icon);
-        }
+    .kbq-calendar__table-header {
+        color: map.get($header, text);
     }
 
     .kbq-calendar__table-header-divider::after {
-        background: map.get($foreground, divider);
+        background: map.get($header, divider);
     }
 
     .kbq-calendar__body-cell-content {
-        color: map.get($foreground, text);
-        border-color: transparent;
-    }
+        $default: map.get($cell, default);
 
-    .kbq-calendar__body_disabled > .kbq-calendar__body-cell-content:not(.kbq-selected) {
-        color: map.get($foreground, text-disabled);
-    }
+        background: map.get($default, background);
+        color: map.get($default, text);
 
-    .cdk-keyboard-focused .kbq-calendar__body_active,
-    .cdk-program-focused .kbq-calendar__body_active {
-        & > .kbq-calendar__body-cell-content {
-            border-color: map.get(map.get($theme, states), focused-color);
-            box-shadow: 0 0 0 1px map.get(map.get($theme, states), focused-color);
+        &.kbq-calendar__body-today {
+            $today: map.get($cell, today);
+
+            background: map.get($today, background);
+            color: map.get($today, text);
         }
-    }
 
-    .kbq-calendar__body-cell:not(.kbq-calendar__body_disabled):hover {
-        & > .kbq-calendar__body-cell-content:not(.kbq-selected) {
-            background-color: theming.kbq-color($secondary, A8);
+        &:hover:not(.kbq-disabled) {
+            $hover: map.get($cell, hover);
+
+            background: map.get($hover, background);
         }
-    }
 
-    .kbq-calendar__body-today {
-        color: map.get($datepicker, state-selected-today-color);
-    }
+        &:active:not(.kbq-disabled) {
+            $active: map.get($cell, active);
 
-    .kbq-calendar__body_disabled > .kbq-calendar__body-today:not(.kbq-selected) {
-        border-color: map.get($background, background-disabled);
-    }
+            background: map.get($active, background);
+        }
 
-    .kbq-calendar__body-cell-content.kbq-selected {
-        background: map.get($datepicker, state-selected-background);
-        color: map.get($datepicker, state-selected-color);
-    }
+        &.kbq-selected:not(.kbq-disabled) {
+            $selected: map.get($cell, selected);
 
-    .kbq-calendar__body_disabled > .kbq-selected {
-        background-color: map.get($datepicker, state-selected-background);
-    }
+            background: map.get($selected, background);
+            color: map.get($selected, text);
 
-    .kbq-datepicker__content {
-        @include popup.popup-params($theme);
+            &:hover {
+                $selected-hover: map.get($cell, selected-hover);
 
-        color: map.get($foreground, text);
+                background: map.get($selected-hover, background);
+            }
+        }
+
+        &.kbq-disabled {
+            $disabled: map.get($cell, disabled);
+
+            background: map.get($disabled, background);
+        }
     }
 }
 
@@ -88,14 +78,10 @@ $kbq-datepicker-today-fade-amount: 0.2;
     $tokens: map.get($config, tokens);
 
     .kbq-calendar {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-calendar-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-font-text));
     }
 
     .kbq-calendar__table-header th {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-calendar-font-header));
-    }
-
-    .kbq-calendar__body-today {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-body-font-today));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-font-text));
     }
 }

package/datepicker/calendar-body.scss

@@ -6,13 +6,6 @@
 
 $tokens: meta.module-variables(tokens) !default;
 
-$kbq-calendar-body-cell-content-size: 100% - map.get($tokens, datepicker-body-size-cell-margin) * 2;
-
-.kbq-calendar__body {
-    min-width: calc(
-        7 * var(--kbq-datepicker-body-size-cell-min-size, map.get($tokens, datepicker-body-size-cell-min-size))
-    );
-}
 
 .kbq-calendar__body-cell {
     position: relative;
@@ -21,41 +14,33 @@ $kbq-calendar-body-cell-content-size: 100% - map.get($tokens, datepicker-body-si
     text-align: center;
     outline: none;
     cursor: pointer;
+
+    padding: 0;
 }
 
-.kbq-calendar__body_disabled {
+.kbq-disabled {
     cursor: default;
 }
 
 .kbq-calendar__body-cell-content {
-    position: absolute;
-    top: var(--kbq-datepicker-body-size-cell-margin, map.get($tokens, datepicker-body-size-cell-margin));
-    left: var(--kbq-datepicker-body-size-cell-margin, map.get($tokens, datepicker-body-size-cell-margin));
-
-    padding: var(--kbq-datepicker-body-size-cell-padding, map.get($tokens, datepicker-body-size-cell-padding));
-
     display: flex;
     align-items: center;
     justify-content: center;
 
     box-sizing: border-box;
-    width: $kbq-calendar-body-cell-content-size;
-    height: $kbq-calendar-body-cell-content-size;
+    height: 32px;
 
     // Prevents text being off-center on Android.
     line-height: 1;
 
-    border-width: var(
-        --kbq-datepicker-body-size-cell-border-width, map.get($tokens, datepicker-body-size-cell-border-width)
-    );
     border-radius: var(
-        --kbq-datepicker-body-size-cell-border-radius, map.get($tokens, datepicker-body-size-cell-border-radius)
+        --kbq-datepicker-size-grid-cell-border-radius,
+        map.get($tokens, datepicker-size-grid-cell-border-radius)
     );
-    border-style: solid;
-}
 
-kbq-month-view {
-    .kbq-calendar__body-cell-content {
-        justify-content: flex-end;
-    }
+    margin-bottom: var(
+        --kbq-datepicker-size-grid-content-gap-vertical,
+        map.get($tokens, datepicker-size-grid-content-gap-vertical)
+    );
 }
+

package/datepicker/calendar-header.scss

@@ -11,40 +11,16 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: row;
     justify-content: space-between;
 
-    padding:
-        var(--kbq-datepicker-calendar-size-padding-top, map.get($tokens, datepicker-calendar-size-padding-top))
-        var(
-            --kbq-datepicker-calendar-size-padding-horizontal,
-            map.get($tokens, datepicker-calendar-size-padding-horizontal)
-        )
-        var(--kbq-datepicker-calendar-size-padding-blocks, map.get($tokens, datepicker-calendar-size-padding-blocks))
-        var(
-            --kbq-datepicker-calendar-size-padding-horizontal,
-            map.get($tokens, datepicker-calendar-size-padding-horizontal)
-        );
-}
-
-.kbq-calendar-header__previous-button::after {
-    border-left-width: var(
-        --kbq-datepicker-calendar-size-icon-border-width,
-        map.get($tokens, datepicker-calendar-size-icon-border-width)
+    padding-right: var(
+        --kbq-datepicker-size-header-padding-horizontal, map.get($tokens, datepicker-size-header-padding-horizontal)
     );
 
-    transform: var(
-        --kbq-datepicker-calendar-size-icon-prev-icon-transform,
-        map.get($tokens, datepicker-calendar-size-icon-prev-icon-transform)
-    );
-}
-
-.kbq-calendar-header__next-button::after {
-    border-right-width: var(
-        --kbq-datepicker-calendar-size-icon-border-width,
-        map.get($tokens, datepicker-calendar-size-icon-border-width)
+    padding-left: var(
+        --kbq-datepicker-size-header-padding-horizontal, map.get($tokens, datepicker-size-header-padding-horizontal)
     );
 
-    transform: var(
-        --kbq-datepicker-calendar-size-icon-nex-icon-transform,
-        map.get($tokens, datepicker-calendar-size-icon-nex-icon-transform)
+    margin-bottom: var(
+        --kbq-datepicker-size-header-margin-bottom, map.get($tokens, datepicker-size-header-margin-bottom)
     );
 }
 
@@ -66,7 +42,7 @@ $tokens: meta.module-variables(tokens) !default;
     & .kbq-select__content {
         max-height: 12 * 32px;
         overflow-x: hidden;
-        scrollbar-gutter: stable;
+        scrollbar-gutter: auto;
 
         .kbq-option {
             min-width: 65px;

package/datepicker/calendar.scss

@@ -11,20 +11,16 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-calendar__content {
-    padding:
-        0
-        var(
-            --kbq-datepicker-calendar-size-padding-horizontal,
-            map.get($tokens, datepicker-calendar-size-padding-horizontal)
-        )
-        var(
-            --kbq-datepicker-calendar-size-padding-horizontal,
-            map.get($tokens, datepicker-calendar-size-padding-horizontal)
-        )
-        var(
-            --kbq-datepicker-calendar-size-padding-horizontal,
-            map.get($tokens, datepicker-calendar-size-padding-horizontal)
-        );
+    padding-right: var(
+        --kbq-datepicker-size-grid-padding-horizontal,
+        map.get($tokens, datepicker-size-grid-padding-horizontal)
+    );
+
+    padding-left: var(
+        --kbq-datepicker-size-grid-padding-horizontal,
+        map.get($tokens, datepicker-size-grid-padding-horizontal)
+    );
+
     outline: none;
 }
 
@@ -40,15 +36,14 @@ $tokens: meta.module-variables(tokens) !default;
 
     &.kbq-calendar__table-header-divider {
         position: relative;
-        height: calc(
-            var(
-                --kbq-datepicker-calendar-size-padding-blocks,
-                #{map.get($tokens, datepicker-calendar-size-padding-blocks)}
-            ) - 2px
-        );
 
-        $horizontal-padding: map.get($tokens, datepicker-calendar-size-padding-horizontal);
+        box-sizing: border-box;
+        height: var(
+            --kbq-datepicker-size-grid-content-gap-vertical,
+            map.get($tokens, datepicker-size-grid-content-gap-vertical)
+        );;
 
+        $horizontal-padding: map.get($tokens, datepicker-size-grid-padding-horizontal);
         // We use an absolutely positioned pseudo-element as the divider line for the table header so we
         // can extend it all the way to the edge of the calendar.
         &::after {
@@ -56,12 +51,12 @@ $tokens: meta.module-variables(tokens) !default;
 
             position: absolute;
             top: 0;
-            left: calc(-1 * var(--kbq-datepicker-calendar-size-padding-horizontal, #{$horizontal-padding}));
-            right: calc(-1 * var(--kbq-datepicker-calendar-size-padding-horizontal, #{$horizontal-padding}));
+            left: calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal, #{$horizontal-padding}));
+            right: calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal, #{$horizontal-padding}));
 
             height: var(
-                --kbq-datepicker-calendar-size-divider-width,
-                map.get($tokens, datepicker-calendar-size-divider-width)
+                --kbq-datepicker-size-grid-divider-height,
+                map.get($tokens, datepicker-size-grid-divider-height)
             );
         }
     }

package/datepicker/datepicker-content.scss

@@ -7,27 +7,34 @@
 $tokens: meta.module-variables(tokens) !default;
 
 $kbq-datepicker-non-touch-calendar-cell-size: 40px;
+
 $kbq-datepicker-non-touch-calendar-width:
     $kbq-datepicker-non-touch-calendar-cell-size * 7 +
-    map.get($tokens, datepicker-calendar-size-padding-horizontal) * 2;
+    map.get($tokens, datepicker-size-grid-padding-horizontal) * 2;
 // Based on the natural height of the calendar in a month with 6 rows of dates
 // (largest the calendar will get).
-$kbq-datepicker-non-touch-calendar-height: 348px;
+$kbq-datepicker-non-touch-calendar-height: 270px;
 
 .kbq-datepicker__content {
     display: block;
 
-    border: {
-        width: 1px;
-        style: solid;
-        radius: var(
-            --kbq-datepicker-calendar-size-border-radius,
-            map.get($tokens, datepicker-calendar-size-border-radius)
-        );
-    }
+    border-radius: var(
+        --kbq-datepicker-size-container-border-radius,
+        map.get($tokens, datepicker-size-container-border-radius)
+    );
 
     .kbq-calendar {
         width: $kbq-datepicker-non-touch-calendar-width;
         height: $kbq-datepicker-non-touch-calendar-height;
+
+        padding-top: var(
+            --kbq-datepicker-size-container-padding-vertical,
+            map.get($tokens, datepicker-size-container-padding-vertical)
+        );
+
+        padding-bottom: var(
+            --kbq-datepicker-size-container-padding-vertical,
+            map.get($tokens, datepicker-size-container-padding-vertical)
+        );
     }
 }

package/datepicker/datepicker-input.scss

@@ -11,5 +11,5 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-datepicker {
-    width: var(--kbq-datepicker-input-size-width, map.get($tokens, datepicker-input-size-width));
+    width: 130px;
 }

package/dropdown/_dropdown-theme.scss

@@ -29,7 +29,7 @@
         @include kbq-dropdown-item-state(map.get($dropdown-item, default));
 
         &.kbq-dropdown-item_highlighted,
-        &:hover:not(.kbq-disabled):not([disabled]) {
+        &:hover:not(.kbq-disabled) {
             @include kbq-dropdown-item-state(map.get($dropdown-item, hover));
         }
 
@@ -40,7 +40,7 @@
         &.kbq-selected {
             @include kbq-dropdown-item-state(map.get($dropdown-item, selected));
 
-            &:hover:not(.kbq-disabled):not([disabled]) {
+            &:hover:not(.kbq-disabled) {
                 @include kbq-dropdown-item-state(map.get($dropdown-item, selected-hover));
             }
         }