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

package/icon/_icon-theme.scss

@@ -76,7 +76,6 @@
             background: map.get($success, background);
         }
 
-        &[disabled],
         &.kbq-disabled {
             cursor: default;
         }
@@ -99,11 +98,10 @@
                 color: map.get($theme, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($theme, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($theme, state-disabled);
             }
@@ -115,11 +113,10 @@
                 color: map.get($contrast, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($contrast, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($contrast, state-disabled);
             }
@@ -131,11 +128,10 @@
                 color: map.get($fade-contrast, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($fade-contrast, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($fade-contrast, state-disabled);
             }
@@ -147,11 +143,10 @@
                 color: map.get($error, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($error, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($error, state-disabled);
             }
@@ -163,11 +158,10 @@
                 color: map.get($success, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($success, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($success, state-disabled);
             }
@@ -181,11 +175,10 @@
                 color: map.get($theme, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($theme, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($theme, state-disabled);
             }
@@ -197,11 +190,10 @@
                 color: map.get($contrast, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($contrast, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($contrast, state-disabled);
             }
@@ -213,11 +205,10 @@
                 color: map.get($fade-contrast, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($fade-contrast, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($fade-contrast, state-disabled);
             }
@@ -229,11 +220,10 @@
                 color: map.get($error, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($error, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($error, state-disabled);
             }
@@ -245,11 +235,10 @@
                 color: map.get($success, state-active);
             }
 
-            &:not([disabled],.kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($success, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($success, state-disabled);
             }

package/link/_link-theme.scss

@@ -146,7 +146,7 @@
 
     @media print {
         .kbq-link_print:not([disabled]) {
-            color: map.get($foreground, text);
+            color: map.get($foreground, contrast);
 
             &.kbq-text-only,
             &.kbq-text-with-icon .kbq-link__text {
@@ -154,7 +154,7 @@
             }
 
             &::after {
-                color: map.get($foreground, text);
+                color: map.get($foreground, contrast);
 
                 content: ":\a" attr(print);
                 white-space: pre;

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.8",
     "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.8",
+        "@koobiq/angular-moment-adapter": "^16.0.0-beta.8",
+        "@koobiq/angular-luxon-adapter": "^16.0.0-beta.8",
+        "@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"
@@ -62,18 +62,18 @@
             "esm": "./esm2022/alert/koobiq-components-alert.mjs",
             "default": "./fesm2022/koobiq-components-alert.mjs"
         },
-        "./autocomplete": {
-            "types": "./autocomplete/index.d.ts",
-            "esm2022": "./esm2022/autocomplete/koobiq-components-autocomplete.mjs",
-            "esm": "./esm2022/autocomplete/koobiq-components-autocomplete.mjs",
-            "default": "./fesm2022/koobiq-components-autocomplete.mjs"
-        },
         "./badge": {
             "types": "./badge/index.d.ts",
             "esm2022": "./esm2022/badge/koobiq-components-badge.mjs",
             "esm": "./esm2022/badge/koobiq-components-badge.mjs",
             "default": "./fesm2022/koobiq-components-badge.mjs"
         },
+        "./autocomplete": {
+            "types": "./autocomplete/index.d.ts",
+            "esm2022": "./esm2022/autocomplete/koobiq-components-autocomplete.mjs",
+            "esm": "./esm2022/autocomplete/koobiq-components-autocomplete.mjs",
+            "default": "./fesm2022/koobiq-components-autocomplete.mjs"
+        },
         "./button": {
             "types": "./button/index.d.ts",
             "esm2022": "./esm2022/button/koobiq-components-button.mjs",
@@ -182,18 +182,18 @@
             "esm": "./esm2022/loader-overlay/koobiq-components-loader-overlay.mjs",
             "default": "./fesm2022/koobiq-components-loader-overlay.mjs"
         },
-        "./markdown": {
-            "types": "./markdown/index.d.ts",
-            "esm2022": "./esm2022/markdown/koobiq-components-markdown.mjs",
-            "esm": "./esm2022/markdown/koobiq-components-markdown.mjs",
-            "default": "./fesm2022/koobiq-components-markdown.mjs"
-        },
         "./modal": {
             "types": "./modal/index.d.ts",
             "esm2022": "./esm2022/modal/koobiq-components-modal.mjs",
             "esm": "./esm2022/modal/koobiq-components-modal.mjs",
             "default": "./fesm2022/koobiq-components-modal.mjs"
         },
+        "./markdown": {
+            "types": "./markdown/index.d.ts",
+            "esm2022": "./esm2022/markdown/koobiq-components-markdown.mjs",
+            "esm": "./esm2022/markdown/koobiq-components-markdown.mjs",
+            "default": "./fesm2022/koobiq-components-markdown.mjs"
+        },
         "./navbar": {
             "types": "./navbar/index.d.ts",
             "esm2022": "./esm2022/navbar/koobiq-components-navbar.mjs",
@@ -254,18 +254,18 @@
             "esm": "./esm2022/splitter/koobiq-components-splitter.mjs",
             "default": "./fesm2022/koobiq-components-splitter.mjs"
         },
-        "./table": {
-            "types": "./table/index.d.ts",
-            "esm2022": "./esm2022/table/koobiq-components-table.mjs",
-            "esm": "./esm2022/table/koobiq-components-table.mjs",
-            "default": "./fesm2022/koobiq-components-table.mjs"
-        },
         "./tabs": {
             "types": "./tabs/index.d.ts",
             "esm2022": "./esm2022/tabs/koobiq-components-tabs.mjs",
             "esm": "./esm2022/tabs/koobiq-components-tabs.mjs",
             "default": "./fesm2022/koobiq-components-tabs.mjs"
         },
+        "./table": {
+            "types": "./table/index.d.ts",
+            "esm2022": "./esm2022/table/koobiq-components-table.mjs",
+            "esm": "./esm2022/table/koobiq-components-table.mjs",
+            "default": "./fesm2022/koobiq-components-table.mjs"
+        },
         "./tags": {
             "types": "./tags/index.d.ts",
             "esm2022": "./esm2022/tags/koobiq-components-tags.mjs",

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));
+    }
 }