@koobiq/components 17.2.0 → 17.4.0

package/icon/_icon-button-theme.scss

@@ -11,130 +11,149 @@
             outline: none;
         }
 
+        // FIXME: move to unified mixin
         &.kbq-theme {
-            color: kbq-css-variable(icon-button-heme-default, map.get($icon-button, theme, default));
+            color: kbq-css-variable(icon-button-theme-default, map.get($icon-button, theme, default));
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(icon-button-heme-state-active, map.get($icon-button, theme, state-active));
+                color: kbq-css-variable(icon-button-theme-states-active, map.get($icon-button, theme, state-active));
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-heme-state-hover, map.get($icon-button, theme, state-hover));
+                color: kbq-css-variable(icon-button-theme-states-hover, map.get($icon-button, theme, state-hover));
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(icon-button-heme-state-disabled, map.get($icon-button, theme, state-disabled));
+                color: kbq-css-variable(
+                    icon-button-theme-states-disabled,
+                    map.get($icon-button, theme, state-disabled)
+                );
             }
         }
 
         &.kbq-contrast {
-            color: kbq-css-variable(icon-button-ontrast-default, map.get($icon-button, contrast, default));
+            color: kbq-css-variable(icon-button-contrast-default, map.get($icon-button, contrast, default));
 
             &:active,
             &.kbq-active {
                 color: kbq-css-variable(
-                    icon-button-ontrast-state-active,
+                    icon-button-contrast-states-active,
                     map.get($icon-button, contrast, state-active)
                 );
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-ontrast-state-hover, map.get($icon-button, contrast, state-hover));
+                color: kbq-css-variable(
+                    icon-button-contrast-states-hover,
+                    map.get($icon-button, contrast, state-hover)
+                );
             }
 
             &.kbq-disabled {
                 color: kbq-css-variable(
-                    icon-button-ontrast-state-disabled,
+                    icon-button-contrast-states-disabled,
                     map.get($icon-button, contrast, state-disabled)
                 );
             }
         }
 
         &.kbq-contrast-fade {
-            color: kbq-css-variable(icon-button-ade-contrast-default, map.get($icon-button, fade-contrast, default));
+            color: kbq-css-variable(icon-button-fade-contrast-default, map.get($icon-button, fade-contrast, default));
 
             &:active,
             &.kbq-active {
                 color: kbq-css-variable(
-                    icon-button-ade-contrast-state-active,
+                    icon-button-fade-contrast-states-active,
                     map.get($icon-button, fade-contrast, state-active)
                 );
             }
 
             &:not(.kbq-disabled):hover {
                 color: kbq-css-variable(
-                    icon-button-ade-contrast-state-hover,
+                    icon-button-fade-contrast-states-hover,
                     map.get($icon-button, fade-contrast, state-hover)
                 );
             }
 
             &.kbq-disabled {
                 color: kbq-css-variable(
-                    icon-button-ade-contrast-state-disabled,
+                    icon-button-fade-contrast-states-disabled,
                     map.get($icon-button, fade-contrast, state-disabled)
                 );
             }
         }
 
         &.kbq-error {
-            color: kbq-css-variable(icon-button-rror-default, map.get($icon-button, error, default));
+            color: kbq-css-variable(icon-button-error-default, map.get($icon-button, error, default));
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(icon-button-rror-state-active, map.get($icon-button, error, state-active));
+                color: kbq-css-variable(icon-button-error-states-active, map.get($icon-button, error, state-active));
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-rror-state-hover, map.get($icon-button, error, state-hover));
+                color: kbq-css-variable(icon-button-error-states-hover, map.get($icon-button, error, state-hover));
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(icon-button-rror-state-disabled, map.get($icon-button, error, state-disabled));
+                color: kbq-css-variable(
+                    icon-button-error-states-disabled,
+                    map.get($icon-button, error, state-disabled)
+                );
             }
         }
 
         &.kbq-success {
-            color: kbq-css-variable(icon-button-uccess-default, map.get($icon-button, success, default));
+            color: kbq-css-variable(icon-button-success-default, map.get($icon-button, success, default));
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(icon-button-uccess-state-active, map.get($icon-button, success, state-active));
+                color: kbq-css-variable(
+                    icon-button-success-states-active,
+                    map.get($icon-button, success, state-active)
+                );
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-uccess-state-hover, map.get($icon-button, success, state-hover));
+                color: kbq-css-variable(icon-button-success-states-hover, map.get($icon-button, success, state-hover));
             }
 
             &.kbq-disabled {
                 color: kbq-css-variable(
-                    icon-button-uccess-state-disabled,
+                    icon-button-success-states-disabled,
                     map.get($icon-button, success, state-disabled)
                 );
             }
         }
 
         &.kbq-warning {
-            color: kbq-css-variable(icon-button-default, map.get($icon-button, default));
+            color: kbq-css-variable(icon-button-warning-default, map.get($icon-button, warning, default));
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(icon-button-state-active, map.get($icon-button, state-active));
+                color: kbq-css-variable(
+                    icon-button-warning-states-active,
+                    map.get($icon-button, warning, state-active)
+                );
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-state-hover, map.get($icon-button, state-hover));
+                color: kbq-css-variable(icon-button-warning-states-hover, map.get($icon-button, warning, state-hover));
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(icon-button-state-disabled, map.get($icon-button, state-disabled));
+                color: kbq-css-variable(
+                    icon-button-warning-states-disabled,
+                    map.get($icon-button, warning, state-disabled)
+                );
             }
         }
 
         &.cdk-keyboard-focused {
             box-shadow:
-                inset 0 0 0.1px 1px map.get($theme, states, focused-color),
-                0 0 0.1px 1px map.get($theme, states, focused-color);
+                inset 0 0 0.1px 1px kbq-css-variable(states-focused-color, map.get($theme, states, focused-color)),
+                0 0 0.1px 1px kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
         }
     }
 }

package/icon/_icon-item-theme.scss

@@ -5,7 +5,7 @@
 
 @mixin kbq-icon-item-style($component, $type, $style-name) {
     $style: map.get($component, $type, $style-name);
-    $base: icon-item-filled-#{$type}-#{$type}-#{$style-name};
+    $base: icon-item-filled-#{$type}-#{$style-name};
 
     color: kbq-css-variable(#{$base}-color, map.get($component, $type, $style-name, color));
     background: kbq-css-variable(#{$base}-background, map.get($component, $type, $style-name, background));

package/icon/icon-button.scss

@@ -8,11 +8,11 @@
         cursor: pointer;
     }
 
-    padding: kbq-css-variable(icon-button-size-small-vertical-padding)
-        kbq-css-variable(icon-button-size-small-horizontal-padding);
+    padding: kbq-css-variable(icon-button-size-normal-vertical-padding)
+        kbq-css-variable(icon-button-size-normal-horizontal-padding);
 
     &.kbq-icon-button_small {
-        padding: kbq-css-variable(icon-button-size-normal-vertical-padding)
-            kbq-css-variable(icon-button-size-normal-horizontal-padding);
+        padding: kbq-css-variable(icon-button-size-small-vertical-padding)
+            kbq-css-variable(icon-button-size-small-horizontal-padding);
     }
 }

package/input/_input-theme.scss

@@ -11,6 +11,6 @@
     }
 
     .kbq-input.kbq-input-password {
-        @include kbq-typography-level-to-styles($config, mono-normal);
+        @include kbq-typography-level-to-styles_css-variables(typography, mono-normal);
     }
 }

package/link/_link-theme.scss

@@ -67,19 +67,25 @@
     }
 }
 
-@mixin kbq-link-state($component, $state-name) {
-    $state: map.get($component, $state-name);
+@mixin kbq-link-state($component, $state-name: null) {
+    $state: $component;
+    $base-path: link;
 
-    color: kbq-css-variable(link-#{$state-name}-text, map.get($state, text));
+    @if $state-name {
+        $state: map.get($component, $state-name);
+        $base-path: link-#{$state-name};
+    }
+
+    color: kbq-css-variable(#{$base-path}-text, map.get($state, text));
 
     &.kbq-text-only,
     &.kbq-text-with-icon .kbq-link__text,
     &.kbq-text-with-dot .kbq-link__text {
-        border-bottom-color: kbq-css-variable(link-#{$state-name}-border-bottom, map.get($state, border-bottom));
+        border-bottom-color: kbq-css-variable(#{$base-path}-border-bottom, map.get($state, border-bottom));
     }
 
     & .kbq-icon {
-        color: kbq-css-variable(link-#{$state-name}-text, map.get($state, text)) !important;
+        color: kbq-css-variable(#{$base-path}-text, map.get($state, text)) !important;
     }
 }
 
@@ -91,7 +97,7 @@
     .kbq-link {
         @include kbq-link-geometry($tokens);
 
-        @include kbq-link-state($link, default);
+        @include kbq-link-state($link);
 
         transition: color ease-out 300ms;
 

package/list/_list-theme.scss

@@ -10,19 +10,19 @@
     background: kbq-css-variable(list-#{$state-name}-container-background, map.get($state, container-background));
 
     .kbq-list-text {
-        color: kbq-css-variable(list-#{$state-name}-text, map.get($state, text));
+        color: kbq-css-variable(list-#{$state-name}-text-color, map.get($state, text));
     }
 
     .kbq-icon {
-        color: kbq-css-variable(list-#{$state-name}-icon, map.get($state, icon));
+        color: kbq-css-variable(list-#{$state-name}-icon-color, map.get($state, icon));
     }
 
     .kbq-option-action .kbq-icon {
-        color: kbq-css-variable(list-#{$state-name}-icon-button, map.get($state, icon-button));
+        color: kbq-css-variable(list-#{$state-name}-icon-button-color, map.get($state, icon-button));
     }
 
     .kbq-list-option-caption {
-        color: kbq-css-variable(list-#{$state-name}-caption, map.get($state, caption));
+        color: kbq-css-variable(list-#{$state-name}-caption-color, map.get($state, caption));
     }
 }
 
@@ -37,7 +37,10 @@
         }
 
         &.kbq-focused {
-            border-color: map.get($list-item, states-focused, focus-outline);
+            border-color: kbq-css-variable(
+                list-states-focused-focus-outline-color,
+                map.get($list-item, states-focused, focus-outline)
+            );
         }
 
         &.kbq-selected {

package/list/list.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/common/list';
+@use '../core/styles/common/tokens' as *;
 
 .kbq-list,
 .kbq-list-selection {

package/loader-overlay/_loader-overlay-theme.scss

@@ -7,37 +7,41 @@
 @mixin kbq-loader-overlay-theme($theme) {
     $loader-overlay: map.get(map.get($theme, components), loader-overlay);
 
+    // FIXME: move to unified mixin if necessary
     .kbq-loader-overlay_filled {
         &.kbq-loader-overlay {
             background: kbq-css-variable(
-                loader-overlay-filled-background,
+                loader-overlay-filled-overlay-background,
                 map.get($loader-overlay, filled, background)
             );
         }
 
         & .kbq-loader-overlay-text {
-            color: kbq-css-variable(loader-overlay-filled-text, map.get($loader-overlay, filled, text));
+            color: kbq-css-variable(loader-overlay-filled-text-color, map.get($loader-overlay, filled, text));
         }
 
         & .kbq-loader-overlay-caption {
-            color: kbq-css-variable(loader-overlay-filled-caption, map.get($loader-overlay, filled, caption));
+            color: kbq-css-variable(loader-overlay-filled-caption-color, map.get($loader-overlay, filled, caption));
         }
     }
 
     .kbq-loader-overlay_transparent {
         &.kbq-loader-overlay {
             background: kbq-css-variable(
-                loader-overlay-transparent-background,
+                loader-overlay-transparent-overlay-background,
                 map.get($loader-overlay, transparent, background)
             );
         }
 
         & .kbq-loader-overlay-text {
-            color: kbq-css-variable(loader-overlay-transparent-text, map.get($loader-overlay, transparent, text));
+            color: kbq-css-variable(loader-overlay-transparent-text-color, map.get($loader-overlay, transparent, text));
         }
 
         & .kbq-loader-overlay-caption {
-            color: kbq-css-variable(loader-overlay-transparent-caption, map.get($loader-overlay, transparent, caption));
+            color: kbq-css-variable(
+                loader-overlay-transparent-caption-color,
+                map.get($loader-overlay, transparent, caption)
+            );
         }
     }
 }

package/markdown/_markdown-theme.scss

@@ -64,7 +64,7 @@
             }
 
             &:active {
-                color: kbq-css-variable(markdown-link-state-active-text, map.get($markdown, link-state-active-text));
+                color: kbq-css-variable(markdown-link-state-active, map.get($markdown, link-state-active-text));
             }
 
             &:focus {

package/markdown/markdown.scss

@@ -20,7 +20,6 @@ $tokens: meta.module-variables(tokens) !default;
     // h1, h2, h3, h4, h5, h6
     @for $i from 1 through 6 {
         .kbq-markdown__h#{$i} {
-            max-width: kbq-css-variable(markdown-h#{$i}-size-max-width);
             margin-top: kbq-css-variable(markdown-h#{$i}-size-margin-top);
             margin-bottom: kbq-css-variable(markdown-h#{$i}-size-margin-bottom);
         }
@@ -38,14 +37,12 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-markdown__p {
-        max-width: kbq-css-variable(markdown-p-size-max-width);
         margin-top: kbq-css-variable(markdown-p-size-margin-top);
         margin-bottom: kbq-css-variable(markdown-p-size-margin-bottom);
     }
 
     .kbq-markdown__ul,
     .kbq-markdown__ol {
-        max-width: kbq-css-variable(markdown-list-size-max-width);
         margin-top: kbq-css-variable(markdown-list-size-margin-top);
         margin-bottom: kbq-css-variable(markdown-list-size-margin-bottom);
 
@@ -93,7 +90,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-markdown__blockquote {
-        max-width: kbq-css-variable(markdown-blockquote-size-max-width);
         margin-top: kbq-css-variable(markdown-blockquote-size-margin-top);
         margin-left: 0;
         margin-bottom: kbq-css-variable(markdown-blockquote-size-margin-bottom);
@@ -129,12 +125,11 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-markdown__p > .kbq-markdown__code {
-        max-width: kbq-css-variable(markdown-code-size-max-width);
         padding: kbq-css-variable(markdown-code-size-inline-padding);
     }
 
     .kbq-markdown__img {
-        max-width: kbq-css-variable(markdown-image-size-max-width);
+        max-width: 100%;
         margin-top: kbq-css-variable(markdown-image-size-margin-top);
         margin-bottom: kbq-css-variable(markdown-image-size-margin-bottom);
 
@@ -197,3 +192,7 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 }
+
+.docs-live-example.kbq-markdown {
+    margin-bottom: 128px;
+}

package/modal/_modal-theme.scss

@@ -13,29 +13,30 @@
 
         .kbq-modal-header {
             & .kbq-modal-title {
-                color: kbq-css-variable(modal-header, map.get($modal, header));
+                color: kbq-css-variable(modal-header-text-color, map.get($modal, header));
             }
 
             & .kbq-modal-close {
-                color: kbq-css-variable(modal-close-button, map.get($modal, close-button));
+                color: kbq-css-variable(modal-close-button-color, map.get($modal, close-button));
             }
         }
 
         .kbq-modal-content {
-            color: kbq-css-variable(modal-content, map.get($modal, content));
+            color: kbq-css-variable(modal-content-text-color, map.get($modal, content));
         }
 
+        // FIXME: default token doesn't exist
         .kbq-modal-header.kbq-modal-body_top-overflow {
             box-shadow: kbq-css-variable(modal-body-top-shadow, map.get($modal, body-top-shadow));
         }
-
+        // FIXME: default token doesn't exist
         .kbq-modal-footer.kbq-modal-body_bottom-overflow {
             box-shadow: kbq-css-variable(modal-body-bottom-shadow, map.get($modal, body-bottom-shadow));
         }
     }
 
     .kbq-modal-mask {
-        background-color: kbq-css-variable(modal-overlay, map.get($modal, overlay));
+        background-color: kbq-css-variable(modal-overlay-background, map.get($modal, overlay));
     }
 }
 

package/modal/modal-ref.class.d.ts

@@ -4,7 +4,7 @@ import { KbqModalComponent } from './modal.component';
  * API class that public to users to handle the modal instance.
  * KbqModalRef is aim to avoid accessing to the modal instance directly by users.
  */
-export declare abstract class KbqModalRef<T = any, R = any> {
+export declare abstract class KbqModalRef<C = any, R = any> {
     abstract afterOpen: Observable<void>;
     abstract afterClose: Observable<R>;
     abstract open(): void;
@@ -20,7 +20,7 @@ export declare abstract class KbqModalRef<T = any, R = any> {
      * Note: this method may return undefined if the Component has not ready yet.
      * (it only available after Modal's ngOnInit)
      */
-    abstract getContentComponent(): T;
+    abstract getContentComponent(): C;
     /**
      * Get the dom element of this Modal
      */

package/modal/modal.service.d.ts

@@ -6,7 +6,8 @@ import { KbqModalComponent } from './modal.component';
 import { ConfirmType, IModalOptionsForService } from './modal.type';
 import * as i0 from "@angular/core";
 export declare class ModalBuilderForService {
-    private overlay;
+    private readonly overlay;
+    readonly options: IModalOptionsForService;
     private modalRef;
     private overlayRef;
     constructor(overlay: Overlay, options?: IModalOptionsForService);
@@ -16,18 +17,17 @@ export declare class ModalBuilderForService {
     private createModal;
 }
 export declare class KbqModalService {
-    private overlay;
-    private modalControl;
+    private readonly overlay;
+    private readonly modalControl;
     get openModals(): KbqModalRef[];
     get afterAllClose(): Observable<void>;
     constructor(overlay: Overlay, modalControl: KbqModalControlService);
     closeAll(): void;
-    create<T>(options?: IModalOptionsForService<T>): KbqModalRef<T>;
-    confirm<T>(options?: IModalOptionsForService<T>, confirmType?: ConfirmType): KbqModalRef<T>;
-    open<T>(options?: IModalOptionsForService<T>): KbqModalRef<T>;
-    success<T>(options?: IModalOptionsForService<T>): KbqModalRef<T>;
-    delete<T>(options?: IModalOptionsForService<T>): KbqModalRef<T>;
-    private simpleConfirm;
+    create<C, R>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    confirm<C, R>(options?: IModalOptionsForService<C>, confirmType?: ConfirmType): KbqModalRef<C, R>;
+    open<C, R>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    success<C, R>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    delete<C, R>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqModalService>;
 }

package/modal/modal.type.d.ts

@@ -8,7 +8,7 @@ export declare enum ModalSize {
     Medium = "medium",
     Large = "large"
 }
-export interface ModalOptions<T = any, R = any> {
+export interface ModalOptions<C = any, R = any> {
     kbqModalType?: ModalType;
     kbqVisible?: boolean;
     kbqWidth?: number | string;
@@ -17,15 +17,15 @@ export interface ModalOptions<T = any, R = any> {
     kbqClassName?: string;
     kbqStyle?: object;
     kbqTitle?: string | TemplateRef<{}>;
-    kbqContent?: string | TemplateRef<{}> | Type<T>;
-    kbqComponent?: Type<T>;
+    kbqContent?: string | TemplateRef<{}> | Type<C>;
+    kbqComponent?: Type<C>;
     kbqComponentParams?: any;
     kbqClosable?: boolean;
     kbqMask?: boolean;
     kbqMaskClosable?: boolean;
     kbqMaskStyle?: object;
     kbqBodyStyle?: object;
-    kbqFooter?: string | TemplateRef<{}> | IModalButtonOptions<T>[];
+    kbqFooter?: string | TemplateRef<{}> | IModalButtonOptions<C>[];
     kbqGetContainer?: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef) | null;
     kbqAfterOpen?: EventEmitter<void>;
     kbqAfterClose?: EventEmitter<R>;
@@ -34,10 +34,10 @@ export interface ModalOptions<T = any, R = any> {
     kbqOkText?: string;
     kbqOkType?: string;
     kbqOkLoading?: boolean;
-    kbqOnOk?: EventEmitter<T> | OnClickCallback<T>;
+    kbqOnOk?: EventEmitter<C> | OnClickCallback<C>;
     kbqCancelText?: string;
     kbqCancelLoading?: boolean;
-    kbqOnCancel?: EventEmitter<T> | OnClickCallback<T>;
+    kbqOnCancel?: EventEmitter<C> | OnClickCallback<C>;
 }
 export interface IModalOptionsForService<T = any> extends ModalOptions<T> {
     kbqOnOk?: OnClickCallback<T>;

package/navbar/_navbar-theme.scss

@@ -10,20 +10,20 @@
     &:not(.kbq-navbar-item_has-nested) {
         &:after {
             display: block;
-            background: kbq-css-variable(navbar-item-#{$state-name}-background, map.get($state, background));
+            background: kbq-css-variable(navbar-item-#{$state-name}-content-background, map.get($state, background));
         }
     }
 
     .kbq-navbar-title {
-        color: kbq-css-variable(navbar-item-#{$state-name}-text, map.get($state, text));
+        color: kbq-css-variable(navbar-item-#{$state-name}-content-text, map.get($state, text));
     }
 
     & > .kbq-icon {
-        color: kbq-css-variable(navbar-item-#{$state-name}-icon-left, map.get($state, icon-left)) !important;
+        color: kbq-css-variable(navbar-item-#{$state-name}-content-icon-left, map.get($state, icon-left)) !important;
     }
 
     .kbq-navbar-item__arrow-icon {
-        color: kbq-css-variable(navbar-item-#{$state-name}-icon-right, map.get($state, icon-right)) !important;
+        color: kbq-css-variable(navbar-item-#{$state-name}-content-icon-right, map.get($state, icon-right)) !important;
     }
 }
 
@@ -48,7 +48,7 @@
         @include kbq-navbar-item($item, default);
 
         &:hover:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand) {
-            @include kbq-navbar-item($item, hover);
+            @include kbq-navbar-item($item, states-hover);
         }
 
         &.cdk-focused.cdk-keyboard-focused {
@@ -63,7 +63,7 @@
 
         &:active:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand),
         &.kbq-active:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand) {
-            @include kbq-navbar-item($item, selected);
+            @include kbq-navbar-item($item, states-selected);
         }
 
         &.kbq-navbar-focusable-item {
@@ -71,7 +71,7 @@
         }
 
         &.kbq-disabled {
-            @include kbq-navbar-item($item, disabled);
+            @include kbq-navbar-item($item, states-disabled);
 
             pointer-events: none;
             cursor: default;
@@ -91,7 +91,7 @@
     }
 
     .kbq-navbar-divider {
-        background: kbq-css-variable(line-contrast-fade, map.get($theme, line, contrast-fade));
+        background: kbq-css-variable(line-contrast-less, map.get($theme, line, contrast-less));
     }
 }
 
@@ -106,7 +106,7 @@ button {
 
 @mixin kbq-navbar-typography($config) {
     .kbq-navbar-title {
-        @include kbq-typography-level-to-styles($config, text-normal-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-normal-medium);
     }
 
     .kbq-navbar-brand {