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

package/link/_link-theme.scss

@@ -4,160 +4,163 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
-@mixin kbq-link($foreground, $link, $tokens) {
+@mixin kbq-link-geometry($tokens) {
     display: inline;
 
-    color: map.get($link, text);
     text-decoration: none;
     cursor: pointer;
 
-    transition: color ease-out 300ms;
+    outline-offset: var(
+        --kbq-link-size-state-focused-outline-offset, map.get($tokens, link-size-state-focused-outline-offset)
+    );
 
     &:focus {
         outline: none;
     }
 
-    /* stylelint-disable no-descending-specificity */
-    &:hover {
-        color: map.get($link, state-hover-text);
-        transition: color 0ms;
-
-        &.kbq-text-only,
-        &.kbq-text-with-icon .kbq-link__text {
-            border-bottom-color: map.get($link, state-hover-border-bottom);
-        }
-
-        & .kbq-icon {
-            color: map.get($link, state-hover-text);
-        }
-    }
-
-    &:active {
-        color: map.get($link, state-active-text);
-
-        &.kbq-text-only,
-        &.kbq-text-with-icon .kbq-link__text {
-            border-bottom-color: map.get($link, state-active-border-bottom);
-        }
-    }
-
-    &.cdk-keyboard-focused {
-        outline: map.get($link, state-focused-outline) solid map.get($link, link-size-state-focused-outline-width);
-
-        outline-offset: map.get($link, link-size-state-focused-outline-offset);
-    }
-
-    & .kbq-icon {
-        color: inherit;
-    }
-
     &.kbq-text-only,
     &.kbq-text-with-icon .kbq-link__text {
         border-bottom-style: solid;
         border-bottom-width: 1px;
-        border-bottom-color: map.get($link, border-bottom);
     }
 
     &.kbq-text-with-icon .kbq-link__text {
         &:not(:first-child) {
-            margin-left: map.get($tokens, link-size-normal-content-padding);
+            margin-left: var(
+                --kbq-link-size-normal-content-padding, map.get($tokens, link-size-normal-content-padding)
+            );
         }
 
         &:not(:last-child) {
-            margin-right: map.get($tokens, link-size-normal-content-padding);
+            margin-right: var(
+                --kbq-link-size-normal-content-padding, map.get($tokens, link-size-normal-content-padding)
+            );
         }
     }
 
-    &.kbq-link_pseudo {
-        &.kbq-text-only,
+    &.kbq-link_compact {
         &.kbq-text-with-icon .kbq-link__text {
-            border-bottom: none !important;
-        }
-    }
+            &:not(:first-child) {
+                margin-left: var(
+                    --kbq-link-size-compact-content-padding, map.get($tokens, link-size-compact-content-padding)
+                );
+            }
 
-    &.kbq-link_no-underline {
-        &.kbq-text-only,
-        &.kbq-text-with-icon .kbq-link__text {
-            border-bottom-color: transparent;
+            &:not(:last-child) {
+                margin-right: var(
+                    --kbq-link-size-compact-content-padding, map.get($tokens, link-size-compact-content-padding)
+                );
+            }
         }
     }
 
+    /* stylelint-disable no-descending-specificity */
     &.kbq-link_big {
         &.kbq-text-with-icon .kbq-link__text {
             &:not(:first-child) {
-                margin-left: map.get($tokens, link-size-big-content-padding);
+                margin-left: var(--kbq-link-size-big-content-padding, map.get($tokens, link-size-big-content-padding));
             }
 
             &:not(:last-child) {
-                margin-right: map.get($tokens, link-size-big-content-padding);
+                margin-right: var(--kbq-link-size-big-content-padding, map.get($tokens, link-size-big-content-padding));
             }
         }
     }
 
-    &[disabled] {
-        color: map.get($foreground, text-disabled);
-
-        cursor: default;
-        pointer-events: none;
 
+    &.kbq-link_pseudo {
         &.kbq-text-only,
         &.kbq-text-with-icon .kbq-link__text {
-            border-bottom-color: map.get($link, border-bottom);
+            border-bottom: none;
         }
+    }
 
-        & .kbq-icon {
-            color: map.get($foreground, text-disabled);
+    &.kbq-link_no-underline {
+        &.kbq-text-only,
+        &.kbq-text-with-icon .kbq-link__text {
+            border-bottom-color: transparent;
         }
-        /* stylelint-enable no-descending-specificity */
     }
+    /* stylelint-enable no-descending-specificity */
 }
 
-@mixin kbq-link-theme($theme) {
-    $foreground: map.get($theme, foreground);
+@mixin kbq-link-state($state) {
+    color: map.get($state, text);
+
+    &.kbq-text-only,
+    &.kbq-text-with-icon .kbq-link__text {
+        border-bottom-color: map.get($state, border-bottom);
+    }
 
+    & .kbq-icon {
+        color: map.get($state, text) !important;
+    }
+}
+
+@mixin kbq-link-theme($theme) {
     $link: map.get(map.get($theme, components), link);
 
     $tokens: map.get($theme, tokens);
 
-    .kbq-link:not(.kbq-link_use-visited) {
-        &:visited {
-            color: map.get($link, text);
+    .kbq-link {
+        @include kbq-link-geometry($tokens);
+
+        $default: map.get($link, default);
+        @include kbq-link-state($default);
+
+        transition: color ease-out 300ms;
+
+        &:hover {
+            transition: color 0ms;
+
+            $hover: map.get($link, hover);
+            @include kbq-link-state($hover);
         }
 
-        @include kbq-link($foreground, $link, $tokens);
-    }
+        &:active {
+            $active: map.get($link, active);
+            @include kbq-link-state($active);
+        }
 
-    .kbq-link.kbq-link_use-visited {
-        &:visited {
-            color: map.get($link, state-visited-text);
+        &.kbq-link_use-visited:not(.kbq-disabled):visited {
+            $visited: map.get($link, visited);
+            @include kbq-link-state($visited);
 
-            &.kbq-text-only,
-            &.kbq-text-with-icon .kbq-link__text {
-                border-bottom-color: map.get($link, state-visited-border-bottom);
+            &:hover {
+                $visited-hover: map.get($link, visited-hover);
+                @include kbq-link-state($visited-hover);
             }
 
-            & .kbq-icon {
-                color: map.get($link, state-visited-text);
+            &:active {
+                $visited-active: map.get($link, visited-active);
+                @include kbq-link-state($visited-active);
             }
         }
 
-        @include kbq-link($foreground, $link, $tokens);
-    }
-
-    @media print {
-        .kbq-link_print:not([disabled]) {
-            color: map.get($foreground, text);
+        &.cdk-keyboard-focused {
+            $focused: map.get($link, focused);
+            outline: map.get($focused, outline) solid;
+        }
 
-            &.kbq-text-only,
-            &.kbq-text-with-icon .kbq-link__text {
-                border-bottom: none;
-            }
+        &.kbq-disabled {
+            cursor: default;
+            pointer-events: none;
 
-            &::after {
-                color: map.get($foreground, text);
+            $disabled: map.get($link, disabled);
+            @include kbq-link-state($disabled);
+        }
 
-                content: ":\a" attr(print);
-                white-space: pre;
+        @media print {
+            .kbq-link_print:not(.kbq-disabled) {
+                &.kbq-text-only,
+                &.kbq-text-with-icon .kbq-link__text {
+                    border-bottom: none;
+                }
+
+                &::after {
+                    content: ":\a" attr(print);
+                    white-space: pre;
+                }
             }
         }
     }
@@ -174,6 +177,10 @@
         }
     }
 
+    .kbq-link.kbq-link_compact {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, link-font-compact));
+    }
+
     .kbq-link.kbq-link_big {
         @include kbq-typography-level-to-styles($config, map.get($tokens, link-font-big));
     }

package/link/link.component.d.ts

@@ -25,6 +25,9 @@ export declare class KbqLink extends KbqLinkMixinBase implements OnDestroy, HasT
     get big(): any;
     set big(value: any);
     private _big;
+    get compact(): any;
+    set compact(value: any);
+    private _compact;
     get useVisited(): any;
     set useVisited(value: any);
     private _useVisited;
@@ -40,5 +43,5 @@ export declare class KbqLink extends KbqLinkMixinBase implements OnDestroy, HasT
     getHostElement(): any;
     private updatePrintUrl;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqLink, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLink, "[kbq-link]", ["kbqLink"], { "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "pseudo": { "alias": "pseudo"; "required": false; }; "noUnderline": { "alias": "noUnderline"; "required": false; }; "big": { "alias": "big"; "required": false; }; "useVisited": { "alias": "useVisited"; "required": false; }; "print": { "alias": "print"; "required": false; }; }, {}, ["icon"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLink, "[kbq-link]", ["kbqLink"], { "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "pseudo": { "alias": "pseudo"; "required": false; }; "noUnderline": { "alias": "noUnderline"; "required": false; }; "big": { "alias": "big"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "useVisited": { "alias": "useVisited"; "required": false; }; "print": { "alias": "print"; "required": false; }; }, {}, ["icon"], never, false, never>;
 }

package/list/_list-theme.scss

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

package/list/list.scss

@@ -21,7 +21,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     @include list.kbq-list-item-base();
 
-    &:not(.kbq-disabled):not([disabled]) {
+    &:not(.kbq-disabled) {
         cursor: pointer;
     }
 
@@ -37,7 +37,3 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 }
-
-.kbq-list-option:not([disabled]):not(.kbq-disabled){
-    cursor: pointer;
-}

package/markdown/_markdown-theme.scss

@@ -14,8 +14,8 @@
     $markdown: map.get(map.get($theme, components), markdown);
 
     .kbq-markdown {
-        color: map.get($foreground, text);
-        background: map.get($background, background);;
+        color: map.get($foreground, contrast);
+        background: map.get($background, bg);
 
         // h1, h2, h3, h4, h5, h6
         @for $i from 1 through 6 {

package/modal/_modal-theme.scss

@@ -5,29 +5,24 @@
 
 
 @mixin kbq-modal-theme($theme) {
-    $tokens: map.get($theme, tokens);
-
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
     $modal: map.get(map.get($theme, components), modal);
 
     .kbq-modal {
         background: map.get($modal, container-background);
         box-shadow: map.get($modal, container-box-shadow);
 
-        .kbq-modal-content {
-            // У модалки должен быть фон background. Чтобы поповеры и дропдауны было видно поверх модалки
-            background-color: map.get($background, background);
-
-            box-shadow: map.get($modal, shadow);
-        }
+        .kbq-modal-header {
+            & .kbq-modal-title {
+                color: map.get($modal, header);
+            }
 
-        .kbq-modal-title {
-            color: map.get($foreground, text);
+            & .kbq-modal-close {
+                color: map.get($modal, close-button);
+            }
         }
 
-        .kbq-modal-header {
+        .kbq-modal-content {
+            color: map.get($modal, content);
         }
 
         .kbq-modal-header.kbq-modal-body_top-overflow {
@@ -37,13 +32,10 @@
         .kbq-modal-footer.kbq-modal-body_bottom-overflow {
             box-shadow: map.get($modal, body-bottom-shadow);
         }
-
-        .kbq-modal-footer {
-        }
     }
 
     .kbq-modal-mask {
-        background-color: map.get($modal, background-mask);
+        background-color: map.get($modal, overlay);
     }
 }
 

package/modal/modal.scss

@@ -66,7 +66,6 @@ $tokens: meta.module-variables(tokens) !default;
     border-radius: var(--kbq-modal-size-border-radius, map.get($tokens, modal-size-border-radius));
 
     background-clip: padding-box;
-    background-color: white;
 }
 
 .kbq-modal-header {

package/navbar/_navbar-theme.scss

@@ -79,7 +79,7 @@
         &.cdk-keyboard-focused .kbq-navbar-item__overlay {
             box-shadow:
                 inset 0 0 0 2px map.get(map.get($theme, states), focused-color),
-                inset 0 0 0 3px map.get($background, background);
+                inset 0 0 0 3px map.get($background, bg);
         }
         /* stylelint-enable no-descending-specificity */
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "16.0.0-beta.7",
+    "version": "16.0.0-beta.9",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -17,16 +17,16 @@
     },
     "homepage": "https://gitlab.ptsecurity.com/frontend/design-system/mosaic/-/blob/master/README.md",
     "peerDependencies": {
-        "@angular/cdk": "16.1.5",
-        "@angular/forms": "16.1.5",
-        "@koobiq/cdk": "^16.0.0-beta.7",
-        "@koobiq/angular-moment-adapter": "^16.0.0-beta.7",
-        "@koobiq/angular-luxon-adapter": "^16.0.0-beta.7",
-        "@mosaic-design/date-formatter": "2.1.1",
-        "@koobiq/icons": "7.1.0",
-        "@koobiq/tokens-builder": "3.0.0-beta.6",
-        "@koobiq/design-tokens": "3.0.0-beta.6",
-        "marked": "4.0.18"
+        "@angular/cdk": "^16.1.5",
+        "@angular/forms": "^16.1.5",
+        "@koobiq/cdk": "^16.0.0-beta.9",
+        "@koobiq/angular-moment-adapter": "^16.0.0-beta.9",
+        "@koobiq/angular-luxon-adapter": "^16.0.0-beta.9",
+        "@mosaic-design/date-formatter": "^2.1.1",
+        "@koobiq/icons": "^7.1.0",
+        "@koobiq/tokens-builder": "^3.0.0-beta.6",
+        "@koobiq/design-tokens": "^3.0.0-beta.6",
+        "marked": "^4.0.18"
     },
     "dependencies": {
         "tslib": "^2.4.0"

package/popover/_popover-theme.scss

@@ -5,107 +5,44 @@
 
 
 @mixin kbq-popover-theme($theme) {
-    $foreground: map.get($theme, foreground);
-
     $popover: map.get(map.get($theme, components), popover);
 
+    $container: map.get($popover, container);
+
     $header: map.get($popover, header);
+    $content: map.get($popover, content);
     $footer: map.get($popover, footer);
 
     .kbq-popover {
-        border-color: map.get($popover, border);
-        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-    }
-
-    .kbq-popover__header {
-        color: map.get($header, text);
-        background: map.get($header, background);
-        border-bottom-color: map.get($header, border);
-    }
-
-    .kbq-popover__container,
-    .kbq-popover__content {
-        color: map.get($popover, text);
-        background-color: map.get($popover, background);
-    }
-
-    .kbq-popover__footer {
-        border-top-color: map.get($footer, border);
-        background-color: map.get($footer, background);
+        box-shadow: map.get($container, box-shadow);
     }
 
-    .kbq-popover .kbq-popover__arrow {
-        border-color: map.get($popover, border);
+    .kbq-popover__container {
+        background: map.get($container, background);
     }
 
-    .kbq-popover_placement-top .kbq-popover__arrow,
-    .kbq-popover_placement-top-left .kbq-popover__arrow,
-    .kbq-popover_placement-top-right .kbq-popover__arrow {
-        background-color: map.get($popover, background);
-        border-top-color: map.get($popover, border);
-        border-left-color: map.get($popover, border);
+    .kbq-popover__arrow {
+        box-shadow: map.get($container, box-shadow);
+        background: map.get($container, background);
     }
 
-    .kbq-popover_placement-top .kbq-popover__arrow.kbq-popover__arrow_with-footer,
-    .kbq-popover_placement-top-left .kbq-popover__arrow.kbq-popover__arrow_with-footer,
-    .kbq-popover_placement-top-right .kbq-popover__arrow.kbq-popover__arrow_with-footer {
-        background-color: map.get($footer, background);
-        border-top-color: map.get($footer, border);
-        border-left-color: map.get($footer, border);
-    }
-
-    .kbq-popover_placement-right .kbq-popover__arrow,
-    .kbq-popover_placement-right-top .kbq-popover__arrow,
-    .kbq-popover_placement-right-bottom .kbq-popover__arrow {
-        background-color: map.get($popover, background);
-        border-top-color: map.get($popover, background);
-        border-right-color: map.get($popover, background);
-    }
-
-    .kbq-popover_placement-right-bottom .kbq-popover__arrow.kbq-popover__arrow_with-footer {
-        background-color: map.get($footer, background);
-        border-top-color: map.get($footer, border);
-        border-right-color: map.get($footer, border);
-    }
-
-    .kbq-popover_placement-left .kbq-popover__arrow,
-    .kbq-popover_placement-left-top .kbq-popover__arrow,
-    .kbq-popover_placement-left-bottom .kbq-popover__arrow {
-        background-color: map.get($popover, background);
-        border-bottom-color: map.get($popover, background);
-        border-left-color: map.get($popover, background);
-    }
-
-    .kbq-popover_placement-left-bottom .kbq-popover__arrow.kbq-popover__arrow_with-footer {
-        background-color: map.get($footer, background);
-        border-bottom-color: map.get($footer, border);
-        border-left-color: map.get($footer, border);
+    .kbq-popover__header {
+        color: map.get($header, text);
     }
 
-    .kbq-popover_placement-bottom .kbq-popover__arrow,
-    .kbq-popover_placement-bottom-left .kbq-popover__arrow,
-    .kbq-popover_placement-bottom-right .kbq-popover__arrow,
-    .kbq-popover_placement-bottom .kbq-popover__arrow.kbq-popover__arrow_with-footer,
-    .kbq-popover_placement-bottom-left .kbq-popover__arrow.kbq-popover__arrow_with-footer,
-    .kbq-popover_placement-bottom-right .kbq-popover__arrow.kbq-popover__arrow_with-footer {
-        background-color: map.get($popover, background);
-        border-right-color: map.get($popover, background);
-        border-bottom-color: map.get($popover, background);
+    .kbq-popover__content {
+        color: map.get($content, text);
     }
 }
 
 @mixin kbq-popover-typography($config) {
     $tokens: map.get($config, tokens);
 
-    //.kbq-popover__header {
-    //    @include kbq-typography-level-to-styles($config, map.get($tokens, popover-header-font-default));
-    //}
-    //
-    //.kbq-popover__content {
-    //    @include kbq-typography-level-to-styles($config, map.get($tokens, popover-font-default));
-    //}
-    //
-    //.kbq-popover__footer {
-    //    @include kbq-typography-level-to-styles($config, map.get($tokens, popover-footer-font-default));
-    //}
+    .kbq-popover__header {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, popover-font-header));
+    }
+
+    .kbq-popover__content {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, popover-font-content));
+    }
 }