@koobiq/components 16.0.0-beta.8 → 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, contrast);
+        &.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, contrast);
+            $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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "16.0.0-beta.8",
+    "version": "16.0.0-beta.9",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -19,9 +19,9 @@
     "peerDependencies": {
         "@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",
+        "@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",
@@ -62,18 +62,18 @@
             "esm": "./esm2022/alert/koobiq-components-alert.mjs",
             "default": "./fesm2022/koobiq-components-alert.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"
         },
+        "./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"
+        },
         "./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"
         },
-        "./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"
         },
+        "./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"
+        },
         "./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"
         },
-        "./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"
         },
+        "./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"
+        },
         "./tags": {
             "types": "./tags/index.d.ts",
             "esm2022": "./esm2022/tags/koobiq-components-tags.mjs",