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

package/sidepanel/_sidepanel-theme.scss

@@ -5,48 +5,21 @@
 
 
 @mixin kbq-sidepanel-theme($theme) {
-    $background: map.get($theme, background);
-
     $sidepanel: map.get(map.get($theme, components), sidepanel);
-    $popup: map.get(map.get($theme, components), popup);
+
+    .kbq-sidepanel-title {
+        color: map.get($sidepanel, header-text);
+    }
 
     .kbq-sidepanel-content {
-        background-color: map.get($background, background);
+        background-color: map.get($sidepanel, background);
+        color: map.get($sidepanel, content-text);
     }
 
     .kbq-sidepanel-container_shadowed {
-        &.kbq-sidepanel-container_right {
-            .kbq-sidepanel-content {
-                box-shadow: 0 0 0 1px map.get($sidepanel, border), -6px 0 12px 0 rgba(0, 0, 0, 0.24);
-            }
+        .kbq-sidepanel-content {
+            box-shadow: map.get($sidepanel, box-shadow);
         }
-
-        &.kbq-sidepanel-container_left {
-            .kbq-sidepanel-content {
-                box-shadow: 0 0 0 1px map.get($sidepanel, border), 6px 0 12px 0 rgba(0, 0, 0, 0.24);
-            }
-        }
-
-        &.kbq-sidepanel-container_bottom {
-            .kbq-sidepanel-content {
-                box-shadow: 0 0 0 1px map.get($sidepanel, border), 0 -6px 12px 0 rgba(0, 0, 0, 0.24);
-            }
-        }
-
-        &.kbq-sidepanel-container_top {
-            .kbq-sidepanel-content {
-                box-shadow: 0 0 0 1px map.get($sidepanel, border), 0 6px 12px 0 rgba(0, 0, 0, 0.24);
-            }
-        }
-    }
-
-    .kbq-sidepanel-header {
-        border-bottom: 1px solid map.get($sidepanel, header-border);
-    }
-
-    .kbq-sidepanel-footer {
-        border-top: 1px solid map.get($sidepanel, footer-border);
-        background-color: map.get($popup, footer-background);
     }
 }
 
@@ -54,14 +27,11 @@
     $tokens: map.get($config, tokens);
 
     .kbq-sidepanel-title {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-header-font-default));
-    }
-
-    .kbq-sidepanel-container {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-font-header));
     }
 
+    .kbq-sidepanel-container,
     .kbq-sidepanel-footer {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-footer-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-font-content));
     }
 }

package/sidepanel/sidepanel-directives.d.ts

@@ -1,5 +1,4 @@
 import { ElementRef, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { ThemePalette } from '@koobiq/components/core';
 import { KbqSidepanelRef } from './sidepanel-ref';
 import { KbqSidepanelService } from './sidepanel.service';
 import * as i0 from "@angular/core";
@@ -22,7 +21,6 @@ export declare class KbqSidepanelClose implements OnInit, OnChanges {
  * Header of a sidepanel.
  */
 export declare class KbqSidepanelHeader {
-    themePalette: typeof ThemePalette;
     closeable: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelHeader, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqSidepanelHeader, "kbq-sidepanel-header", never, { "closeable": { "alias": "closeable"; "required": false; }; }, {}, never, ["*"], false, never>;

package/sidepanel/sidepanel.scss

@@ -39,18 +39,18 @@ $tokens: meta.module-variables(tokens) !default;
         top: 0;
 
         &.kbq-sidepanel_small {
-            width: var(--kbq-sidepanel-size-small, map.get($tokens, sidepanel-size-small));
-            max-width: var(--kbq-sidepanel-size-small, map.get($tokens, sidepanel-size-small));
+            width: var(--kbq-sidepanel-size-small-width, map.get($tokens, sidepanel-size-small-width));
+            max-width: var(--kbq-sidepanel-size-small-width, map.get($tokens, sidepanel-size-small-width));
         }
 
         &.kbq-sidepanel_medium {
-            width: var(--kbq-sidepanel-size-medium, map.get($tokens, sidepanel-size-medium));
-            max-width: var(--kbq-sidepanel-size-medium, map.get($tokens, sidepanel-size-medium));
+            width: var(--kbq-sidepanel-size-medium-width, map.get($tokens, sidepanel-size-medium-width));
+            max-width: var(--kbq-sidepanel-size-medium-width, map.get($tokens, sidepanel-size-medium-width));
         }
 
         &.kbq-sidepanel_large {
-            width: var(--kbq-sidepanel-size-large, map.get($tokens, sidepanel-size-large));
-            max-width: var(--kbq-sidepanel-size-large, map.get($tokens, sidepanel-size-large));
+            width: var(--kbq-sidepanel-size-large-width, map.get($tokens, sidepanel-size-large-width));
+            max-width: var(--kbq-sidepanel-size-large-width, map.get($tokens, sidepanel-size-large-width));
         }
 
         .kbq-sidepanel-indent {
@@ -107,15 +107,6 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-sidepanel-indent {
     display: flex;
     flex: 0 0 auto;
-
-    .kbq-sidepanel-close {
-        width: 100%;
-        height: 100%;
-
-        @include common.kbq-button-reset();
-        background: transparent;
-        padding: 0;
-    }
 }
 /* stylelint-enable */
 
@@ -136,20 +127,15 @@ $tokens: meta.module-variables(tokens) !default;
     flex-flow: row nowrap;
     flex: 0 0 auto;
 
-    height: var(--kbq-sidepanel-header-size-height, map.get($tokens, sidepanel-header-size-height));
+    padding:
+        var(--kbq-sidepanel-size-header-padding-vertical, map.get($tokens, sidepanel-size-header-padding-vertical))
+        var(--kbq-sidepanel-size-header-padding-right, map.get($tokens, sidepanel-size-header-padding-right))
+        var(--kbq-sidepanel-size-header-padding-vertical, map.get($tokens, sidepanel-size-header-padding-vertical))
+        var(--kbq-sidepanel-size-header-padding-left, map.get($tokens, sidepanel-size-header-padding-left));
 
     .kbq-sidepanel-close {
-        @include common.kbq-button-reset();
-
-        margin-right: 2px;
-
-        height: calc(
-            var(--kbq-sidepanel-header-size-height, map.get($tokens, sidepanel-header-size-height)) -
-            (var(--kbq-size-border-width, map.get($tokens, size-border-width) * 2))
-        );
-        width: calc(
-            var(--kbq-sidepanel-header-size-height, map.get($tokens, sidepanel-header-size-height)) -
-            (var(--kbq-size-border-width, map.get($tokens, size-border-width) * 2))
+        margin-left: var(
+            --kbq-sidepanel-size-close-button-margin-left, map.get($tokens, sidepanel-size-close-button-margin-left)
         );
     }
 }
@@ -158,8 +144,6 @@ $tokens: meta.module-variables(tokens) !default;
     flex: 1;
 
     @include common.kbq-truncate-line();
-
-    padding: var(--kbq-sidepanel-header-size-padding, map.get($tokens, sidepanel-header-size-padding));
 }
 
 .kbq-sidepanel-body {
@@ -168,6 +152,18 @@ $tokens: meta.module-variables(tokens) !default;
     flex: 1;
     flex-direction: column;
     min-height: 0;
+
+    padding-right: var(
+        --kbq-sidepanel-size-content-padding-horizontal, map.get($tokens, sidepanel-size-content-padding-horizontal)
+    );
+
+    padding-left: var(
+        --kbq-sidepanel-size-content-padding-horizontal, map.get($tokens, sidepanel-size-content-padding-horizontal)
+    );
+
+    padding-bottom: var(
+        --kbq-sidepanel-size-content-padding-bottom, map.get($tokens, sidepanel-size-content-padding-bottom)
+    );
 }
 
 .kbq-sidepanel-footer {
@@ -178,9 +174,10 @@ $tokens: meta.module-variables(tokens) !default;
     flex-flow: row nowrap;
     flex: 0 0 auto;
 
-    height: var(--kbq-sidepanel-footer-size-height, map.get($tokens, sidepanel-footer-size-height));
-
-    padding: var(--kbq-sidepanel-footer-size-padding, map.get($tokens, sidepanel-footer-size-padding));
+    padding:
+        var(--kbq-sidepanel-size-footer-padding-top, map.get($tokens, sidepanel-size-footer-padding-top))
+        var(--kbq-sidepanel-size-footer-padding-horizontal, map.get($tokens, sidepanel-size-footer-padding-horizontal))
+        var(--kbq-sidepanel-size-footer-padding-bottom, map.get($tokens, sidepanel-size-footer-padding-bottom));
 
     .kbq-sidepanel-actions {
         display: flex;
@@ -195,9 +192,10 @@ $tokens: meta.module-variables(tokens) !default;
         &[align="right"] {
             justify-content: flex-end;
         }
-    }
 
-    button + button {
-        margin-left: 16px;
+        gap: var(
+            --kbq-sidepanel-size-footer-content-gap-horizontal,
+            map.get($tokens, sidepanel-size-footer-content-gap-horizontal)
+        );
     }
 }

package/splitter/_splitter-theme.scss

@@ -18,6 +18,7 @@
             cursor: row-resize;
         }
 
+        // todo
         &[disabled] {
             background-color: kbq-color($background, overlay-disabled);
 

package/splitter/splitter.component.d.ts

@@ -100,7 +100,7 @@ export declare class KbqSplitterComponent implements OnInit {
     private onMouseUp;
     private setStyle;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSplitterComponent, "kbq-splitter", ["mcSplitter"], { "hideGutters": { "alias": "hideGutters"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "useGhost": { "alias": "useGhost"; "required": false; }; "gutterSize": { "alias": "gutterSize"; "required": false; }; }, { "gutterPositionChange": "gutterPositionChange"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSplitterComponent, "kbq-splitter", ["kbqSplitter"], { "hideGutters": { "alias": "hideGutters"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "useGhost": { "alias": "useGhost"; "required": false; }; "gutterSize": { "alias": "gutterSize"; "required": false; }; }, { "gutterPositionChange": "gutterPositionChange"; }, never, ["*"], false, never>;
 }
 export declare class KbqSplitterAreaDirective implements OnInit, OnDestroy {
     private elementRef;

package/table/_table-theme.scss

@@ -25,7 +25,7 @@
 
                 & > th,
                 & > td {
-                    color: map.get($foreground, text);
+                    color: map.get($foreground, contrast);
                 }
             }
         }

package/table/table.component.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class KbqTable {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTable, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTable, "table[kbq-table]", ["mcTable"], {}, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTable, "table[kbq-table]", ["kbqTable"], {}, {}, never, ["*"], false, never>;
 }

package/tabs/_tabs-common.scss

@@ -6,33 +6,6 @@
 
 $tokens: meta.module-variables(tokens) !default;
 
-%base-focus-frame {
-    display: block;
-    content: "";
-
-    position: absolute;
-
-    top: 0;
-    right: calc(-1 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
-    bottom: calc(-1 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
-    left: calc(-1 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
-}
-
-%horizontal-focus {
-    &:after {
-        border: {
-            width: calc(var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}) * 2);
-            style: solid;
-            top: {
-                left-radius: var(--kbq-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
-                right-radius: var(--kbq-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
-            }
-        };
-
-        border-bottom-color: transparent;
-    }
-}
-
 
 @mixin tab-label {
     position: relative;
@@ -43,101 +16,59 @@ $tokens: meta.module-variables(tokens) !default;
     justify-content: center;
     align-items: center;
 
-    height: var(--kbq-tabs-size-height, map.get($tokens, tabs-size-height));
-
     text-align: center;
     white-space: nowrap;
 
     cursor: pointer;
 
-    padding: {
-        right: var(--kbq-tabs-size-padding-horizontal, map.get($tokens, tabs-size-padding-horizontal));
-        left: var(--kbq-tabs-size-padding-horizontal, map.get($tokens, tabs-size-padding-horizontal));
+    $padding-vertical: map.get($tokens, tabs-size-tab-item-padding-vertical);
+    $padding-horizontal: map.get($tokens, tabs-size-tab-item-padding-horizontal);
+    $border-width: map.get($tokens, tabs-size-tab-item-focus-outline-width);
+
+    padding:
+        calc(
+            var(--kbq-tabs-size-tab-item-padding-vertical, $padding-vertical) -
+            var(--kbq-tabs-size-tab-item-focus-outline-width, $border-width)
+        )
+        calc(
+            var(--kbq-tabs-size-tab-item-padding-horizontal, $padding-horizontal) -
+            var(--kbq-tabs-size-tab-item-focus-outline-width, $border-width)
+        );
+
+    border: {
+        width: var(--kbq-tabs-size-tab-item-focus-outline-width, $border-width);
+        style: solid;
+        color: transparent;
+        radius: var(
+            --kbq-tabs-size-tab-item-border-radius, map.get($tokens, tabs-size-tab-item-border-radius)
+        );
     }
 
     outline: none;
 
-    &.kbq-active {
+    &.kbq-selected {
         cursor: default;
-
-        &:before {
-            display: block;
-            content: "";
-
-            position: absolute;
-        }
     }
 
     &.cdk-keyboard-focused {
         z-index: 1;
-
-        &:after {
-            @extend %base-focus-frame;
-        }
-    }
-
-    &:first-child.cdk-keyboard-focused:after {
-        left: 0;
     }
 
-    &:last-child.cdk-keyboard-focused:after {
-        right: 0;
-    }
-
-    &[disabled] {
+    &.kbq-disabled {
         pointer-events: none;
     }
 
-    & .kbq-tab-label__content > .kbq-icon {
-        &.kbq-icon_left {
-            margin-right: var(--kbq-tabs-size-label-icon-margin, map.get($tokens, tabs-size-label-icon-margin));
-        }
-
-        &.kbq-icon_right {
-            margin-left: var(--kbq-tabs-size-label-icon-margin, map.get($tokens, tabs-size-label-icon-margin));
-        }
-    }
-
-    &.kbq-tab-label_horizontal {
-        border-bottom: {
-            width: var(--kbq-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
-            style: solid;
-        }
-
-        &.kbq-active:before {
-            bottom: calc(-1 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
-            left: 0;
-            right: 0;
-
-            height: var(--kbq-tabs-size-highlight-height, #{map.get($tokens, tabs-size-highlight-height)});
-        }
+    & .kbq-tab-label__content {
+        display: flex;
 
-        &.cdk-keyboard-focused:after {
-            @extend %horizontal-focus;
-        }
+        gap: var(
+            --kbq-tabs-size-tab-item-content-gap-horizontal, map.get($tokens, tabs-size-tab-item-content-gap-horizontal)
+        );
     }
 
     &.kbq-tab-label_vertical {
         justify-content: flex-start;
 
-        &.kbq-active:before {
-            top: 0;
-            bottom: 0;
-            left: calc(-1 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
-
-            width: var(--kbq-tabs-size-highlight-height, #{map.get($tokens, tabs-size-highlight-height) + 1px});
-        }
-
-        &.cdk-keyboard-focused:after {
-            right: 0;
-            left: 0;
-
-            border: {
-                width: calc(var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}) * 2);
-                style: solid;
-            }
-        }
-
         & .kbq-tab-label__content {
             overflow: hidden;
             text-overflow: ellipsis;
@@ -145,53 +76,3 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 }
-
-@mixin tab-label-old {
-    border-bottom: {
-        width: var(--kbq-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
-        style: solid;
-    }
-
-    border: {
-        width: var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)});
-        style: solid;
-
-        top: {
-            left-radius: var(--kbq-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
-            right-radius: var(--kbq-tabs-size-border-radius, #{map.get($tokens, tabs-size-border-radius)});
-        }
-
-        left: none;
-        left-color: transparent;
-        right: none;
-        right-color: transparent;
-    }
-
-    &.kbq-active {
-        border: {
-            width: var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)});
-            style: solid;
-        }
-
-        padding-right: calc(
-            var(--kbq-tabs-size-padding-horizontal, #{map.get($tokens, tabs-size-padding-horizontal)}) -
-            var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)})
-        );
-
-        padding-left: calc(
-            var(--kbq-tabs-size-padding-horizontal, #{map.get($tokens, tabs-size-padding-horizontal)}) -
-            var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)})
-        );
-
-        &.cdk-keyboard-focused:after {
-            right: calc(-2 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
-            left: calc(-2 * var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)}));
-        }
-    }
-
-    &.cdk-keyboard-focused:after {
-        @extend %horizontal-focus;
-
-        top: -1px
-    }
-}