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

package/button-toggle/_button-toggle-theme.scss

@@ -9,10 +9,9 @@
 $tokens: meta.module-variables(tokens) !default;
 
 @mixin kbq-button-toggle-color($state) {
-    & .kbq-button-overlay {
-        background: map.get($state, background);
-        border-color: map.get($state, background);
-    }
+    background: map.get($state, background);
+
+    color: map.get($state, text);
 
     & .kbq-icon {
         color: map.get($state, icon);
@@ -20,73 +19,55 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin kbq-button-toggle-theme($theme) {
-    $button-toggle-group: map.get(map.get(map.get($theme, components), button-toggle), button-toggle-group);
-    $button-toggle: map.get(map.get(map.get($theme, components), button-toggle), button-toggle);
-    $states: map.get($button-toggle, states);
+    $button-toggle: map.get(map.get($theme, components), button-toggle);
 
     .kbq-button-toggle-group {
-        background: map.get($button-toggle-group, background);
-        border-color:  map.get($button-toggle-group, border);
+        $container: map.get($button-toggle, container);
+
+        background: map.get($container, background);
 
         .kbq-button-toggle {
+            $button: map.get($button-toggle, item);
+
             & > .kbq-button,
             & > .kbq-icon-button {
-                color: map.get($button-toggle, color);
-                border-color: map.get($button-toggle-group, background);
-                background: inherit;
+                @include kbq-button-toggle-color(map.get($button, default));
 
-                & .kbq-icon {
-                    color: map.get($button-toggle, icon);
+                &:hover:not(.kbq-disabled) {
+                    @include kbq-button-toggle-color(map.get($button, hover));
                 }
 
-                .kbq-button-overlay {
-                    background-color: unset;
+                &:active:not(.kbq-disabled) {
+                    @include kbq-button-toggle-color(map.get($button, active));
                 }
 
-                &:hover:not([disabled], .kbq-active) {
-                    @include kbq-button-toggle-color(map.get($states, hover));
-                }
-
-                &:active:not([disabled], .kbq-active) {
-                    @include kbq-button-toggle-color(map.get($states, active));
-                }
+                &.kbq-selected:not(.kbq-disabled) {
+                    @include kbq-button-toggle-color(map.get($button, selected));
 
-                &.kbq-active {
-                    $state: map.get($states, pressed);
-
-                    background: map.get($state, background);
-                    border-color: map.get($state, background);
+                    &:hover {
+                        @include kbq-button-toggle-color(map.get($button, selected-hover));
+                    }
 
-                    & .kbq-icon {
-                        color: map.get($state, icon);
+                    &:active {
+                        @include kbq-button-toggle-color(map.get($button, selected-active));
                     }
                 }
 
-                &.kbq-disabled,
-                &[disabled] {
-                    opacity: map.get(map.get($states, disabled), opacity);
+                &.kbq-disabled {
+                    @include kbq-button-toggle-color(map.get($button, disabled));
                 }
 
                 &.cdk-keyboard-focused {
-                    box-shadow: unset;
+                    border-color: map.get($button, focused);
                 }
             }
-
-            &.cdk-keyboard-focused {
-                box-shadow: 0 0 0 2px map-get(map-get($theme, states), focused-color);
-            }
         }
     }
 }
 
 @mixin kbq-button-toggle-typography($config) {
-    .kbq-button-toggle {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
-
-        > .kbq-button,
-        > .kbq-icon-button {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
-        }
+    .kbq-button-toggle .kbq-button-toggle-wrapper {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, button-toggle-font-item));
     }
 }
 

package/button-toggle/button-toggle.scss

@@ -13,116 +13,82 @@ $tokens: meta.module-variables(tokens) !default;
     display: inline-flex;
     flex-direction: row;
     align-items: center;
-    gap: map.get($tokens, size-3xs);
 
-    border-width: var(
-        --kbq-button-toggle-group-size-border-width,
-        map.get($tokens, button-toggle-group-size-border-width)
+    gap: var(
+        --kbq-button-toggle-size-container-content-gap-horizontal,
+        map.get($tokens, button-toggle-size-container-content-gap-horizontal)
     );
+
     border-radius: var(
-        --kbq-button-toggle-group-size-border-radius,
-        map.get($tokens, button-toggle-group-size-border-radius)
-    );
-    border-style: solid;
-    padding: var(
-        --kbq-button-toggle-group-size-padding,
-        map.get($tokens, button-toggle-group-size-padding)
+        --kbq-button-toggle-size-container-border-radius,
+        map.get($tokens, button-toggle-size-container-border-radius)
     );
 
+    padding:
+        var(
+            --kbq-button-toggle-size-container-padding-vertical,
+            map.get($tokens, button-toggle-size-container-padding-vertical)
+        )
+        var(
+            --kbq-button-toggle-size-container-padding-horizontal,
+            map.get($tokens, button-toggle-size-container-padding-horizontal)
+        );
+
     .kbq-button-toggle {
         display: flex;
         overflow: hidden;
         justify-content: flex-start;
 
+        $padding-vertical: map.get($tokens, button-toggle-size-item-padding-vertical);
+        $padding-horizontal: map.get($tokens, button-toggle-size-item-padding-horizontal);
+        $outline-width: map.get($tokens, button-toggle-size-item-focus-outline-width);
+
         border-radius: var(
-            --kbq-button-toggle-size-border-radius,
-            map.get($tokens, button-toggle-size-border-radius)
+            --kbq-button-toggle-size-item-border-radius,
+            map.get($tokens, button-toggle-size-item-border-radius)
         );
 
         > .kbq-button,
         > .kbq-button-icon {
-            border: none;
-            border-width: var(
-                --kbq-button-toggle-size-border-width,
-                map.get($tokens, button-toggle-size-border-width)
-            );
             border-radius: var(
-                --kbq-button-toggle-size-border-radius,
-                map.get($tokens, button-toggle-size-border-radius)
-            );
-            min-width: var(
-                --kbq-button-toggle-size-min-width,
-                map.get($tokens, button-toggle-size-min-width)
-            );
-            padding-left: var(
-                --kbq-button-toggle-size-horizontal-padding,
-                map.get($tokens, button-toggle-size-horizontal-padding)
-            );
-            padding-right: var(
-                --kbq-button-toggle-size-horizontal-padding,
-                map.get($tokens, button-toggle-size-horizontal-padding)
+                --kbq-button-toggle-size-item-border-radius,
+                map.get($tokens, button-toggle-size-item-border-radius)
             );
 
+            padding:
+                calc(var(--kbq-button-toggle-size-item-padding-vertical, $padding-vertical) - $outline-width)
+                calc(var(--kbq-button-toggle-size-item-padding-horizontal, $padding-horizontal) - $outline-width);
+
             & .kbq-button-wrapper {
                 width: 100%;
+
             }
 
             .kbq-button-toggle-wrapper {
+                display: inline-flex;
+
                 text-overflow: ellipsis;
                 overflow: hidden;
                 white-space: nowrap;
-                display: inline-block;
-                width: 100%;
 
-                .kbq-icon {
-                    line-height: 20px;
-                    vertical-align: baseline;
-                }
-            }
-        }
+                width: 100%;
 
-        &.kbq-button-toggle-icon-text {
-            > .kbq-button,
-            > .kbq-button-icon {
-                padding-left: var(
-                    --kbq-button-toggle-size-left-icon-padding,
-                    map.get($tokens, button-toggle-size-left-icon-padding)
+                gap: var(
+                    --kbq-button-toggle-size-item-content-gap-horizontal,
+                    map.get($tokens, button-toggle-size-item-content-gap-horizontal)
                 );
-
-                & .kbq-icon {
-                    margin-right: map.get($tokens, size-xxs);
-                }
             }
         }
-
-        &[disabled] {
-            outline: 0;
-        }
     }
 
     &:not(.kbq-button-toggle_vertical) {
-        height: 32px;
-
         .kbq-button-toggle {
             > .kbq-button,
             > .kbq-button-icon {
-                height: 28px;
-                min-height: 28px;
-            }
+                max-width: 100%;
 
-            &.kbq-button-toggle-icon {
-                width: var(
-                    --kbq-button-icon-toggle-size-width,
-                    map.get($tokens, icon-button-toggle-size-width)
-                );
-
-                > .kbq-button,
-                > .kbq-button-icon {
-                    width: var(
-                        --kbq-button-icon-toggle-size-width,
-                        map.get($tokens, icon-button-toggle-size-width)
-                    );
-                }
+                height: unset;
+                min-height: unset;
             }
         }
     }
@@ -132,32 +98,19 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-button-toggle_vertical {
     flex-direction: column;
 
-    .kbq-button-toggle + .kbq-button-toggle {
-        border-left: none;
-        border-right: none;
-    }
-
     .kbq-button-toggle {
         width: 100%;
 
         > .kbq-button,
         > .kbq-button-icon {
             width: 100%;
-            border-width: var(
-                --kbq-button-toggle-size-border-width,
-                map.get($tokens, button-toggle-size-border-width)
-            );
 
             border-radius: var(
-                --kbq-button-toggle-size-border-radius,
-                map.get($tokens, button-toggle-size-border-radius)
+                --kbq-button-toggle-size-item-border-radius,
+                map.get($tokens, button-toggle-size-item-border-radius)
             );
         }
     }
 }
 
 /* stylelint-enable no-descending-specificity */
-
-.kbq-button-toggle-standalone {
-    box-shadow: none;
-}

package/card/_card-theme.scss

@@ -22,7 +22,7 @@
     $is-dark: map.get($theme, is-dark);
 
     .kbq-card {
-        color: map.get($foreground, text);
+        color: map.get($foreground, contrast);
 
         &.kbq-card_error {
             @include kbq-card-type(map.get($card, error));

package/core/option/_optgroup-theme.scss

@@ -8,7 +8,7 @@
     $foreground: map.get($theme, foreground);
 
     .kbq-optgroup-label {
-        color: map.get($foreground, text);
+        color: map.get($foreground, contrast);
     }
 
     .kbq-disabled .kbq-optgroup-label {

package/core/option/_option-theme.scss

@@ -30,7 +30,7 @@
     .kbq-option {
         @include kbq-option(map.get($list-item, default));
 
-        &:hover:not(.kbq-disabled):not([disabled]) {
+        &:hover:not(.kbq-disabled) {
             @include kbq-option(map.get($list-item, hover));
         }
 
@@ -42,7 +42,7 @@
         &.kbq-selected {
             @include kbq-option(map.get($list-item, selected));
 
-            &:hover:not(.kbq-disabled):not([disabled]) {
+            &:hover:not(.kbq-disabled) {
                 @include kbq-option(map.get($list-item, selected-hover));
             }
         }

package/core/option/option.scss

@@ -6,12 +6,12 @@
 
 .kbq-option {
     @include common.kbq-list-item-base();
+
+    &:not(.kbq-disabled) {
+        cursor: pointer;
+    }
 }
 
 .kbq-option-text {
     @include common.kbq-list-text();
-
-    &:not(.kbq-disabled):not([disabled]) {
-        cursor: pointer;
-    }
 }

package/core/styles/_koobiq-theme.scss

@@ -10,12 +10,14 @@
 @use '../../autocomplete/autocomplete-theme' as *;
 @use '../../badge/badge-theme' as *;
 @use '../../button/button-theme' as *;
+@use '../../button-toggle/button-toggle-theme' as *;
 @use '../../card/card-theme' as *;
 @use '../../checkbox/checkbox-theme' as *;
 @use '../../code-block/code-block-theme' as *;
 @use '../../datepicker/datepicker-theme' as *;
 @use '../../divider/divider-theme' as *;
 @use '../../dropdown/dropdown-theme' as *;
+@use '../../file-upload/file-upload-theme' as *;
 @use '../../form-field/form-field-theme' as *;
 @use '../../form-field/hint-theme' as *;
 @use '../../icon/icon-theme' as *;
@@ -59,6 +61,7 @@
     @include kbq-autocomplete-theme($theme);
     @include kbq-badge-theme($theme);
     @include kbq-button-theme($theme);
+    @include kbq-button-toggle-theme($theme);
     @include kbq-card-theme($theme);
     @include kbq-checkbox-theme($theme);
     @include kbq-code-block-theme($theme);
@@ -67,6 +70,7 @@
     @include kbq-divider-theme($theme);
     @include kbq-dropdown-theme($theme);
     @include kbq-form-field-theme($theme);
+    @include kbq-file-upload-theme($theme);
     @include kbq-hint-theme($theme);
     @include kbq-forms-theme($theme);
     @include kbq-highlight-theme($theme);
@@ -118,6 +122,7 @@
     @include kbq-alert-typography($config);
     @include kbq-badge-typography($config);
     @include kbq-button-typography($config);
+    @include kbq-button-toggle-typography($config);
     @include kbq-checkbox-typography($config);
     @include kbq-code-block-typography($config);
     @include kbq-datepicker-typography($config);
@@ -125,6 +130,7 @@
     @include kbq-dl-typography($config);
     @include kbq-form-field-typography($config);
     @include kbq-hint-typography($config);
+    @include kbq-file-upload-typography($config);
     @include kbq-forms-typography($config);
     @include kbq-input-typography($config);
     @include kbq-link-typography($config);

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;