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

package/core/styles/_koobiq-theme.scss

@@ -3,22 +3,26 @@
 @use 'theming/theming' as *;
 @use 'typography/typography' as *;
 
-@use 'theming/badges-theme' as *;
 @use 'theming/scrollbars-theme' as *;
 
 @use '../selection/pseudo-checkbox/pseudo-checkbox-theme' as *;
 @use '../../alert/alert-theme' as *;
 @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 *;
+@use '../../icon/icon-item-theme' as *;
+@use '../../icon/icon-button-theme' as *;
 @use '../../input/input-theme' as *;
 @use '../../link/link-theme' as *;
 @use '../../list/list-theme' as *;
@@ -30,6 +34,7 @@
 @use '../../progress-bar/progress-bar-theme' as *;
 @use '../../progress-spinner/progress-spinner-theme' as *;
 @use '../../radio/radio-theme' as *;
+@use '../../risk-level/risk-level-theme' as *;
 @use '../../select/select-theme' as *;
 @use '../../sidepanel/sidepanel-theme' as *;
 @use '../../splitter/splitter-theme' as *;
@@ -58,6 +63,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);
@@ -66,6 +72,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);
@@ -86,6 +93,7 @@
     @include kbq-progress-spinner-theme($theme);
     @include kbq-pseudo-checkbox-theme($theme);
     @include kbq-radio-theme($theme);
+    @include kbq-risk-level-theme($theme);
     @include kbq-scrollbar-theme($theme);
     @include kbq-select-theme($theme);
     @include kbq-sidepanel-theme($theme);
@@ -116,6 +124,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);
@@ -123,6 +132,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);
@@ -136,6 +146,7 @@
     @include kbq-progress-bar-typography($config);
     @include kbq-progress-spinner-typography($config);
     @include kbq-radio-typography($config);
+    @include kbq-risk-level-typography($config);
     @include kbq-select-typography($config);
     @include kbq-sidepanel-typography($config);
     @include kbq-tabs-typography($config);

package/core/styles/_tokens.kbq.import.scss

@@ -1,4 +1,4 @@
-@import '../../../../node_modules/@koobiq/tokens-koobiq/web/variables';
-@import '../../../../node_modules/@koobiq/tokens-koobiq/web/palette';
-@import '../../../../node_modules/@koobiq/tokens-koobiq/web/typography';
-@import '../../../../node_modules/@koobiq/tokens-koobiq/web/md-typography';
+@import '../../../../node_modules/@koobiq/design-tokens/web/variables';
+@import '../../../../node_modules/@koobiq/design-tokens/web/palette';
+@import '../../../../node_modules/@koobiq/design-tokens/web/typography';
+@import '../../../../node_modules/@koobiq/design-tokens/web/md-typography';

package/core/styles/_tokens.scss

@@ -1,6 +1,6 @@
 @use 'sass:color' as *;
 
-@forward '@koobiq/tokens-koobiq/web/variables';
-@forward '@koobiq/tokens-koobiq/web/palette';
-@forward '@koobiq/tokens-koobiq/web/typography';
-@forward '@koobiq/tokens-koobiq/web/md-typography';
+@forward '@koobiq/design-tokens/web/variables';
+@forward '@koobiq/design-tokens/web/palette';
+@forward '@koobiq/design-tokens/web/typography';
+@forward '@koobiq/design-tokens/web/md-typography';

package/core/styles/_variables.scss

@@ -7,3 +7,4 @@ $z-index-picker: 1050;
 $z-index-dropdown: 1050;
 $z-index-tooltip: 1060;
 $z-index-toast: 1070;
+$z-index-loader-overlay: 1000;

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/_list.scss

@@ -1,3 +1,9 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../tokens';
+
+
 // This mixin will ensure that lines that overflow the container will hide the overflow and
 // truncate neatly with an ellipsis.
 @mixin kbq-truncate-line() {
@@ -41,6 +47,123 @@
     user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
 }
 
+@mixin kbq-list-text() {
+    $tokens: meta.module-variables(tokens) !default;
+
+    @include kbq-line-wrapper-base();
+    display: inline-block;
+
+    @include kbq-truncate-line();
+
+    padding-top: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
+    padding-bottom: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
+}
+
+// This mixin provides all list-item styles, changing font size and height based on whether the list is in dense mode.
+@mixin kbq-list-item-base() {
+    $tokens: meta.module-variables(tokens) !default;
+
+    $outline-width: map.get($tokens, list-size-container-focus-outline-width);
+
+    $padding-vertical: map.get($tokens, list-size-container-padding-vertical);
+    $padding-left: map.get($tokens, list-size-container-padding-left);
+    $padding-right: map.get($tokens, list-size-container-padding-right);
+
+    position: relative;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    box-sizing: border-box;
+
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+
+    min-height: 32px;
+
+    gap: var(
+        --kbq-list-size-container-content-gap-horizontal, map.get($tokens, list-size-container-content-gap-horizontal)
+    );
+
+    border-width: var(--kbq-list-size-container-focus-outline-width, $outline-width);
+    border-style: solid;
+    border-color: transparent;
+
+    padding:
+        calc(
+            var(--kbq-list-size-container-padding-vertical, $padding-vertical) -
+            var(--kbq-list-size-container-focus-outline-width, $outline-width)
+        )
+        calc(
+            var(--kbq-list-size-container-padding-right, $padding-right) -
+            var(--kbq-list-size-container-focus-outline-width, $outline-width)
+        )
+        calc(
+            var(--kbq-list-size-container-padding-vertical, $padding-vertical) -
+            var(--kbq-list-size-container-focus-outline-width, $outline-width)
+        )
+        calc(
+            var(--kbq-list-size-container-padding-left, $padding-left) -
+            var(--kbq-list-size-container-focus-outline-width, $outline-width)
+        );
+
+    .kbq-list-text {
+        @include kbq-list-text();
+    }
+
+    .kbq-list-option-caption {
+        padding-top: var(
+            --kbq-list-size-container-content-gap-vertical,
+            map.get($tokens, list-size-container-content-gap-vertical)
+        );
+    }
+}
+
+@mixin kbq-list-header-base() {
+    $tokens: meta.module-variables(tokens) !default;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    box-sizing: border-box;
+
+    min-height: 32px;
+
+    padding:
+        var(--kbq-list-size-header-padding-top, map.get($tokens, list-size-header-padding-top))
+        var(--kbq-list-size-header-padding-horizontal, map.get($tokens, list-size-header-padding-horizontal))
+        var(--kbq-list-size-header-padding-bottom, map.get($tokens, list-size-header-padding-bottom))
+        var(--kbq-list-size-header-padding-horizontal, map.get($tokens, list-size-header-padding-horizontal));
+
+    .kbq-list-text {
+        @include kbq-list-text();
+    }
+}
+
+@mixin kbq-list-subheading-base() {
+    $tokens: meta.module-variables(tokens) !default;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    box-sizing: border-box;
+
+    min-height: 32px;
+
+    padding:
+        var(--kbq-list-size-subheading-padding-top, map.get($tokens, list-size-subheading-padding-top))
+        var(--kbq-list-size-subheading-padding-horizontal, map.get($tokens, list-size-subheading-padding-horizontal))
+        var(--kbq-list-size-subheading-padding-bottom, map.get($tokens, list-size-subheading-padding-bottom))
+        var(--kbq-list-size-subheading-padding-horizontal, map.get($tokens, list-size-subheading-padding-horizontal));
+
+    .kbq-list-text {
+        @include kbq-list-text();
+    }
+}
+
 .kbq-no-select {
     @include kbq-no-select;
 }

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

@@ -0,0 +1,232 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../common/vendor-prefixes';
+@use '../tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+%kbq-select-base {
+    box-sizing: border-box;
+
+    display: inline-block;
+
+    width: 100%;
+
+    outline: none;
+
+    .kbq-select__matcher {
+        display: flex;
+        align-items: center;
+
+        width: 100%;
+
+        overflow: hidden;
+
+        white-space: nowrap;
+
+        // todo
+        & > span {
+            flex: 1;
+            overflow: hidden;
+        }
+    }
+
+    $border-width: map.get($tokens, form-field-size-border-width);
+    $height: map.get($tokens, form-field-size-height);
+
+    .kbq-select__trigger {
+        display: flex;
+        box-sizing: border-box;
+        position: relative;
+
+        cursor: pointer;
+
+        height: calc(
+            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)
+                )
+                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)
+                )
+                calc(
+                    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)
+                );
+        }
+    }
+
+    .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) {
+        & .kbq-select__matcher {
+            $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)
+                );
+            }
+        }
+    }
+
+    .kbq-select__match-container {
+        width: 100%;
+
+        text-overflow: ellipsis;
+        overflow: hidden;
+
+        & .kbq-select__match-hidden-text {
+            flex: 0 0 70px;
+            align-self: center;
+            padding-left: 4px;
+            padding-right: var(
+                --kbq-select-size-multiple-content-gap, map.get($tokens, select-size-multiple-content-gap)
+            );
+
+            text-align: right;
+        }
+    }
+
+    .kbq-select__arrow-wrapper {
+        display: flex;
+        align-self: center;
+
+        padding: 4px;
+
+        // When used in a box or standard appearance form-field the arrow should be shifted up 50%.
+        .kbq-form-field-appearance-fill &,
+        .kbq-form-field-appearance-standard & {
+            transform: translateY(-50%);
+        }
+
+        // When used in a outline form-field the arrow should be shifted up 25%.
+        .kbq-form-field-appearance-outline & {
+            transform: translateY(-25%);
+        }
+    }
+
+    &.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;
+        align-items: center;
+        box-sizing: border-box;
+
+        position: relative;
+
+        max-width: 100%;
+        height: var(--kbq-option-size-height, map.get($tokens, option-size-height));
+
+        cursor: default;
+        outline: none;
+
+        padding-left: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
+        padding-right: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
+
+        border: var(--kbq-option-size-border-width, map.get($tokens, option-size-border-width)) solid transparent;
+    }
+
+    .kbq-select__search-container {
+        border-bottom: {
+            width: 1px;
+            style: solid;
+        }
+    }
+}
+
+%kbq-select-content {
+    max-height: var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height));
+    padding: 4px 0;
+    overflow: hidden auto;
+}
+
+%kbq-select-footer {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+
+    min-height: 40px;
+
+    border-top-width: 1px;
+    border-top-style: solid;
+
+    padding: map.get($tokens, size-xxs) map.get($tokens, size-m);
+}