@koobiq/components 17.3.0 → 17.5.0

package/code-block/_code-block-theme.scss

@@ -81,274 +81,274 @@
     $code-block: map.get(map.get($theme, components), code-block);
 
     .kbq-code-block {
-        .hljs {
-            $hljs: map.get($code-block, hljs);
+        $hljs: map.get($code-block, hljs);
 
+        .hljs {
             display: block;
             overflow-x: auto;
+        }
 
-            &-addition {
-                background-color: kbq-code-block-hljs-attr(addition-background, $hljs);
-                color: kbq-code-block-hljs-attr(addition-color, $hljs);
-            }
+        .hljs-addition {
+            background-color: kbq-code-block-hljs-attr(addition-background, $hljs);
+            color: kbq-code-block-hljs-attr(addition-color, $hljs);
+        }
 
-            &-attr {
-                background-color: kbq-code-block-hljs-attr(attr-background, $hljs);
-                color: kbq-code-block-hljs-attr(attr-color, $hljs);
-            }
+        .hljs-attr {
+            background-color: kbq-code-block-hljs-attr(attr-background, $hljs);
+            color: kbq-code-block-hljs-attr(attr-color, $hljs);
+        }
 
-            &-attribute {
-                background-color: kbq-code-block-hljs-attr(attribute-background, $hljs);
-                color: kbq-code-block-hljs-attr(attribute-color, $hljs);
-            }
+        .hljs-attribute {
+            background-color: kbq-code-block-hljs-attr(attribute-background, $hljs);
+            color: kbq-code-block-hljs-attr(attribute-color, $hljs);
+        }
 
-            &-built_in {
-                background-color: kbq-code-block-hljs-attr(built_in-background, $hljs);
-                color: kbq-code-block-hljs-attr(built_in-color, $hljs);
-            }
+        .hljs-built_in {
+            background-color: kbq-code-block-hljs-attr(built_in-background, $hljs);
+            color: kbq-code-block-hljs-attr(built_in-color, $hljs);
+        }
 
-            &-bullet {
-                background-color: kbq-code-block-hljs-attr(bullet-background, $hljs);
-                color: kbq-code-block-hljs-attr(bullet-color, $hljs);
-            }
+        .hljs-bullet {
+            background-color: kbq-code-block-hljs-attr(bullet-background, $hljs);
+            color: kbq-code-block-hljs-attr(bullet-color, $hljs);
+        }
 
-            &-char-escape {
-                background-color: kbq-code-block-hljs-attr(char-escape-background, $hljs);
-                color: kbq-code-block-hljs-attr(char-escape-color, $hljs);
-            }
+        .hljs-char-escape {
+            background-color: kbq-code-block-hljs-attr(char-escape-background, $hljs);
+            color: kbq-code-block-hljs-attr(char-escape-color, $hljs);
+        }
 
-            &-class {
-                background-color: kbq-code-block-hljs-attr(class-background, $hljs);
-                color: kbq-code-block-hljs-attr(class-color, $hljs);
-            }
+        .hljs-class {
+            background-color: kbq-code-block-hljs-attr(class-background, $hljs);
+            color: kbq-code-block-hljs-attr(class-color, $hljs);
+        }
 
-            &-code {
-                background-color: kbq-code-block-hljs-attr(code-background, $hljs);
-                color: kbq-code-block-hljs-attr(code-color, $hljs);
-            }
+        .hljs-code {
+            background-color: kbq-code-block-hljs-attr(code-background, $hljs);
+            color: kbq-code-block-hljs-attr(code-color, $hljs);
+        }
 
-            &-comment {
-                background-color: kbq-code-block-hljs-attr(comment-background, $hljs);
-                color: kbq-code-block-hljs-attr(comment-color, $hljs);
-            }
+        .hljs-comment {
+            background-color: kbq-code-block-hljs-attr(comment-background, $hljs);
+            color: kbq-code-block-hljs-attr(comment-color, $hljs);
+        }
 
-            &-deletion {
-                background-color: kbq-code-block-hljs-attr(deletion-background, $hljs);
-                color: kbq-code-block-hljs-attr(deletion-color, $hljs);
-            }
+        .hljs-deletion {
+            background-color: kbq-code-block-hljs-attr(deletion-background, $hljs);
+            color: kbq-code-block-hljs-attr(deletion-color, $hljs);
+        }
 
-            &-doctag {
-                background-color: kbq-code-block-hljs-attr(doctag-background, $hljs);
-                color: kbq-code-block-hljs-attr(doctag-color, $hljs);
-            }
+        .hljs-doctag {
+            background-color: kbq-code-block-hljs-attr(doctag-background, $hljs);
+            color: kbq-code-block-hljs-attr(doctag-color, $hljs);
+        }
 
-            &-emphasis {
-                background-color: kbq-code-block-hljs-attr(emphasis-background, $hljs);
-                color: kbq-code-block-hljs-attr(emphasis-color, $hljs);
-            }
+        .hljs-emphasis {
+            background-color: kbq-code-block-hljs-attr(emphasis-background, $hljs);
+            color: kbq-code-block-hljs-attr(emphasis-color, $hljs);
+        }
 
-            &-formula {
-                background-color: kbq-code-block-hljs-attr(formula-background, $hljs);
-                color: kbq-code-block-hljs-attr(formula-color, $hljs);
-            }
+        .hljs-formula {
+            background-color: kbq-code-block-hljs-attr(formula-background, $hljs);
+            color: kbq-code-block-hljs-attr(formula-color, $hljs);
+        }
 
-            &-function {
-                background-color: kbq-code-block-hljs-attr(function-background, $hljs);
-                color: kbq-code-block-hljs-attr(function-color, $hljs);
-            }
+        .hljs-function {
+            background-color: kbq-code-block-hljs-attr(function-background, $hljs);
+            color: kbq-code-block-hljs-attr(function-color, $hljs);
+        }
 
-            &-keyword {
-                background-color: kbq-code-block-hljs-attr(keyword-background, $hljs);
-                color: kbq-code-block-hljs-attr(keyword-color, $hljs);
-            }
+        .hljs-keyword {
+            background-color: kbq-code-block-hljs-attr(keyword-background, $hljs);
+            color: kbq-code-block-hljs-attr(keyword-color, $hljs);
+        }
 
-            &-link {
-                background-color: kbq-code-block-hljs-attr(link-background, $hljs);
-                color: kbq-code-block-hljs-attr(link-color, $hljs);
-            }
+        .hljs-link {
+            background-color: kbq-code-block-hljs-attr(link-background, $hljs);
+            color: kbq-code-block-hljs-attr(link-color, $hljs);
+        }
 
-            &-literal {
-                background-color: kbq-code-block-hljs-attr(literal-background, $hljs);
-                color: kbq-code-block-hljs-attr(literal-color, $hljs);
-            }
+        .hljs-literal {
+            background-color: kbq-code-block-hljs-attr(literal-background, $hljs);
+            color: kbq-code-block-hljs-attr(literal-color, $hljs);
+        }
 
-            &-meta {
-                background-color: kbq-code-block-hljs-attr(meta-background, $hljs);
-                color: kbq-code-block-hljs-attr(meta-color, $hljs);
-            }
+        .hljs-meta {
+            background-color: kbq-code-block-hljs-attr(meta-background, $hljs);
+            color: kbq-code-block-hljs-attr(meta-color, $hljs);
+        }
 
-            &-meta-keyword {
-                background-color: kbq-code-block-hljs-attr(meta-keyword-background, $hljs);
-                color: kbq-code-block-hljs-attr(meta-keyword-color, $hljs);
-            }
+        .hljs-meta-keyword {
+            background-color: kbq-code-block-hljs-attr(meta-keyword-background, $hljs);
+            color: kbq-code-block-hljs-attr(meta-keyword-color, $hljs);
+        }
 
-            &-meta-string {
-                background-color: kbq-code-block-hljs-attr(meta-string-background, $hljs);
-                color: kbq-code-block-hljs-attr(meta-string-color, $hljs);
-            }
+        .hljs-meta-string {
+            background-color: kbq-code-block-hljs-attr(meta-string-background, $hljs);
+            color: kbq-code-block-hljs-attr(meta-string-color, $hljs);
+        }
 
-            &-meta-prompt {
-                background-color: kbq-code-block-hljs-attr(meta-prompt-background, $hljs);
-                color: kbq-code-block-hljs-attr(meta-prompt-color, $hljs);
-            }
+        .hljs-meta-prompt {
+            background-color: kbq-code-block-hljs-attr(meta-prompt-background, $hljs);
+            color: kbq-code-block-hljs-attr(meta-prompt-color, $hljs);
+        }
 
-            &-name {
-                background-color: kbq-code-block-hljs-attr(name-background, $hljs);
-                color: kbq-code-block-hljs-attr(name-color, $hljs);
-            }
+        .hljs-name {
+            background-color: kbq-code-block-hljs-attr(name-background, $hljs);
+            color: kbq-code-block-hljs-attr(name-color, $hljs);
+        }
 
-            &-number {
-                background-color: kbq-code-block-hljs-attr(number-background, $hljs);
-                color: kbq-code-block-hljs-attr(number-color, $hljs);
-            }
+        .hljs-number {
+            background-color: kbq-code-block-hljs-attr(number-background, $hljs);
+            color: kbq-code-block-hljs-attr(number-color, $hljs);
+        }
 
-            &-operator {
-                background-color: kbq-code-block-hljs-attr(operator-background, $hljs);
-                color: kbq-code-block-hljs-attr(operator-color, $hljs);
-            }
+        .hljs-operator {
+            background-color: kbq-code-block-hljs-attr(operator-background, $hljs);
+            color: kbq-code-block-hljs-attr(operator-color, $hljs);
+        }
 
-            &-params {
-                background-color: kbq-code-block-hljs-attr(params-background, $hljs);
-                color: kbq-code-block-hljs-attr(params-color, $hljs);
-            }
+        .hljs-params {
+            background-color: kbq-code-block-hljs-attr(params-background, $hljs);
+            color: kbq-code-block-hljs-attr(params-color, $hljs);
+        }
 
-            &-property {
-                background-color: kbq-code-block-hljs-attr(property-background, $hljs);
-                color: kbq-code-block-hljs-attr(property-color, $hljs);
-            }
+        .hljs-property {
+            background-color: kbq-code-block-hljs-attr(property-background, $hljs);
+            color: kbq-code-block-hljs-attr(property-color, $hljs);
+        }
 
-            &-punctuation {
-                background-color: kbq-code-block-hljs-attr(punctuation-background, $hljs);
-                color: kbq-code-block-hljs-attr(punctuation-color, $hljs);
-            }
+        .hljs-punctuation {
+            background-color: kbq-code-block-hljs-attr(punctuation-background, $hljs);
+            color: kbq-code-block-hljs-attr(punctuation-color, $hljs);
+        }
 
-            &-quote {
-                background-color: kbq-code-block-hljs-attr(quote-background, $hljs);
-                color: kbq-code-block-hljs-attr(quote-color, $hljs);
-            }
+        .hljs-quote {
+            background-color: kbq-code-block-hljs-attr(quote-background, $hljs);
+            color: kbq-code-block-hljs-attr(quote-color, $hljs);
+        }
 
-            &-regexp {
-                background-color: kbq-code-block-hljs-attr(regexp-background, $hljs);
-                color: kbq-code-block-hljs-attr(regexp-color, $hljs);
-            }
+        .hljs-regexp {
+            background-color: kbq-code-block-hljs-attr(regexp-background, $hljs);
+            color: kbq-code-block-hljs-attr(regexp-color, $hljs);
+        }
 
-            &-section {
-                background-color: kbq-code-block-hljs-attr(section-background, $hljs);
-                color: kbq-code-block-hljs-attr(section-color, $hljs);
-            }
+        .hljs-section {
+            background-color: kbq-code-block-hljs-attr(section-background, $hljs);
+            color: kbq-code-block-hljs-attr(section-color, $hljs);
+        }
 
-            &-selector-attr {
-                background-color: kbq-code-block-hljs-attr(selector-attr-background, $hljs);
-                color: kbq-code-block-hljs-attr(selector-attr-color, $hljs);
-            }
+        .hljs-selector-attr {
+            background-color: kbq-code-block-hljs-attr(selector-attr-background, $hljs);
+            color: kbq-code-block-hljs-attr(selector-attr-color, $hljs);
+        }
 
-            &-selector-class {
-                background-color: kbq-code-block-hljs-attr(selector-class-background, $hljs);
-                color: kbq-code-block-hljs-attr(selector-class-color, $hljs);
-            }
+        .hljs-selector-class {
+            background-color: kbq-code-block-hljs-attr(selector-class-background, $hljs);
+            color: kbq-code-block-hljs-attr(selector-class-color, $hljs);
+        }
 
-            &-selector-id {
-                background-color: kbq-code-block-hljs-attr(selector-id-background, $hljs);
-                color: kbq-code-block-hljs-attr(selector-id-color, $hljs);
-            }
+        .hljs-selector-id {
+            background-color: kbq-code-block-hljs-attr(selector-id-background, $hljs);
+            color: kbq-code-block-hljs-attr(selector-id-color, $hljs);
+        }
 
-            &-selector-pseudo {
-                background-color: kbq-code-block-hljs-attr(selector-pseudo-background, $hljs);
-                color: kbq-code-block-hljs-attr(selector-pseudo-color, $hljs);
-            }
+        .hljs-selector-pseudo {
+            background-color: kbq-code-block-hljs-attr(selector-pseudo-background, $hljs);
+            color: kbq-code-block-hljs-attr(selector-pseudo-color, $hljs);
+        }
 
-            &-selector-tag {
-                background-color: kbq-code-block-hljs-attr(selector-tag-background, $hljs);
-                color: kbq-code-block-hljs-attr(selector-tag-color, $hljs);
-            }
+        .hljs-selector-tag {
+            background-color: kbq-code-block-hljs-attr(selector-tag-background, $hljs);
+            color: kbq-code-block-hljs-attr(selector-tag-color, $hljs);
+        }
 
-            &-string {
-                background-color: kbq-code-block-hljs-attr(string-background, $hljs);
-                color: kbq-code-block-hljs-attr(string-color, $hljs);
-            }
+        .hljs-string {
+            background-color: kbq-code-block-hljs-attr(string-background, $hljs);
+            color: kbq-code-block-hljs-attr(string-color, $hljs);
+        }
 
-            &-strong {
-                background-color: kbq-code-block-hljs-attr(strong-background, $hljs);
-                color: kbq-code-block-hljs-attr(strong-color, $hljs);
-            }
+        .hljs-strong {
+            background-color: kbq-code-block-hljs-attr(strong-background, $hljs);
+            color: kbq-code-block-hljs-attr(strong-color, $hljs);
+        }
 
-            &-subst {
-                background-color: kbq-code-block-hljs-attr(subst-background, $hljs);
-                color: kbq-code-block-hljs-attr(subst-color, $hljs);
-            }
+        .hljs-subst {
+            background-color: kbq-code-block-hljs-attr(subst-background, $hljs);
+            color: kbq-code-block-hljs-attr(subst-color, $hljs);
+        }
 
-            &-symbol {
-                background-color: kbq-code-block-hljs-attr(symbol-background, $hljs);
-                color: kbq-code-block-hljs-attr(symbol-color, $hljs);
-            }
+        .hljs-symbol {
+            background-color: kbq-code-block-hljs-attr(symbol-background, $hljs);
+            color: kbq-code-block-hljs-attr(symbol-color, $hljs);
+        }
 
-            &-tag {
-                background-color: kbq-code-block-hljs-attr(tag-background, $hljs);
-                color: kbq-code-block-hljs-attr(tag-color, $hljs);
-            }
+        .hljs-tag {
+            background-color: kbq-code-block-hljs-attr(tag-background, $hljs);
+            color: kbq-code-block-hljs-attr(tag-color, $hljs);
+        }
 
-            &-template-tag {
-                background-color: kbq-code-block-hljs-attr(template-tag-background, $hljs);
-                color: kbq-code-block-hljs-attr(template-tag-color, $hljs);
-            }
+        .hljs-template-tag {
+            background-color: kbq-code-block-hljs-attr(template-tag-background, $hljs);
+            color: kbq-code-block-hljs-attr(template-tag-color, $hljs);
+        }
 
-            &-template-variable {
-                background-color: kbq-code-block-hljs-attr(template-variable-background, $hljs);
-                color: kbq-code-block-hljs-attr(template-variable-color, $hljs);
-            }
+        .hljs-template-variable {
+            background-color: kbq-code-block-hljs-attr(template-variable-background, $hljs);
+            color: kbq-code-block-hljs-attr(template-variable-color, $hljs);
+        }
 
-            &-title {
-                background-color: kbq-code-block-hljs-attr(title-background, $hljs);
-                color: kbq-code-block-hljs-attr(title-color, $hljs);
-            }
+        .hljs-title {
+            background-color: kbq-code-block-hljs-attr(title-background, $hljs);
+            color: kbq-code-block-hljs-attr(title-color, $hljs);
+        }
 
-            &-title-class {
-                background-color: kbq-code-block-hljs-attr(title-class-background, $hljs);
-                color: kbq-code-block-hljs-attr(title-class-color, $hljs);
-            }
+        .hljs-title-class {
+            background-color: kbq-code-block-hljs-attr(title-class-background, $hljs);
+            color: kbq-code-block-hljs-attr(title-class-color, $hljs);
+        }
 
-            &-title-class-inherited {
-                background-color: kbq-code-block-hljs-attr(title-class-inherited-background, $hljs);
-                color: kbq-code-block-hljs-attr(title-class-inherited-color, $hljs);
-            }
+        .hljs-title-class-inherited {
+            background-color: kbq-code-block-hljs-attr(title-class-inherited-background, $hljs);
+            color: kbq-code-block-hljs-attr(title-class-inherited-color, $hljs);
+        }
 
-            &-title-function {
-                background-color: kbq-code-block-hljs-attr(title-function-background, $hljs);
-                color: kbq-code-block-hljs-attr(title-function-color, $hljs);
-            }
+        .hljs-title-function {
+            background-color: kbq-code-block-hljs-attr(title-function-background, $hljs);
+            color: kbq-code-block-hljs-attr(title-function-color, $hljs);
+        }
 
-            &-title-function-invoke {
-                background-color: kbq-code-block-hljs-attr(title-function-invoke-background, $hljs);
-                color: kbq-code-block-hljs-attr(title-function-invoke-color, $hljs);
-            }
+        .hljs-title-function-invoke {
+            background-color: kbq-code-block-hljs-attr(title-function-invoke-background, $hljs);
+            color: kbq-code-block-hljs-attr(title-function-invoke-color, $hljs);
+        }
 
-            &-type {
-                background-color: kbq-code-block-hljs-attr(type-background, $hljs);
-                color: kbq-code-block-hljs-attr(type-color, $hljs);
-            }
+        .hljs-type {
+            background-color: kbq-code-block-hljs-attr(type-background, $hljs);
+            color: kbq-code-block-hljs-attr(type-color, $hljs);
+        }
 
-            &-variable {
-                background-color: kbq-code-block-hljs-attr(variable-background, $hljs);
-                color: kbq-code-block-hljs-attr(variable-color, $hljs);
-            }
+        .hljs-variable {
+            background-color: kbq-code-block-hljs-attr(variable-background, $hljs);
+            color: kbq-code-block-hljs-attr(variable-color, $hljs);
+        }
 
-            &-variable-constant {
-                background-color: kbq-code-block-hljs-attr(variable-constant-background, $hljs);
-                color: kbq-code-block-hljs-attr(variable-constant-color, $hljs);
-            }
+        .hljs-variable-constant {
+            background-color: kbq-code-block-hljs-attr(variable-constant-background, $hljs);
+            color: kbq-code-block-hljs-attr(variable-constant-color, $hljs);
+        }
 
-            &-variable-language {
-                background-color: kbq-code-block-hljs-attr(variable-language-background, $hljs);
-                color: kbq-code-block-hljs-attr(variable-language-color, $hljs);
-            }
+        .hljs-variable-language {
+            background-color: kbq-code-block-hljs-attr(variable-language-background, $hljs);
+            color: kbq-code-block-hljs-attr(variable-language-color, $hljs);
+        }
 
-            &-ln-n {
-                color: kbq-code-block-hljs-attr(line-numbers-color, $hljs);
-            }
+        .hljs-ln-n {
+            color: kbq-code-block-hljs-attr(line-numbers-color, $hljs);
+        }
 
-            &-line-numbers {
-                color: map.get($code-block, main-code-color);
-            }
+        .hljs-line-numbers {
+            color: map.get($code-block, main-code-color);
         }
 
         &.kbq-code-block_outline {

package/core/highlight/_highlight-theme.scss

@@ -1,4 +1,4 @@
-@mixin kbq-highlight-theme($theme) {
+@mixin kbq-highlight-theme() {
     .kbq-highlight {
         color: inherit;
 

package/core/pop-up/pop-up-styles.d.ts

@@ -1,2 +1,2 @@
-import { ElementRef } from '@angular/core';
-export declare const applyPopupMargins: (element: ElementRef, name: string, value: string) => void;
+import { Renderer2 } from '@angular/core';
+export declare const applyPopupMargins: (renderer: Renderer2, element: HTMLElement, name: string, value: string) => void;

package/core/pop-up/pop-up-trigger.d.ts

@@ -1,18 +1,18 @@
 import { Directionality } from '@angular/cdk/bidi';
-import { ConnectedOverlayPositionChange, ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef, ScrollDispatcher } from '@angular/cdk/overlay';
+import { ConnectedOverlayPositionChange, ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { Observable, Subject, Subscription } from 'rxjs';
 import { PopUpPlacements } from './constants';
 import * as i0 from "@angular/core";
 export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
-    protected overlay: Overlay;
-    protected elementRef: ElementRef;
-    protected ngZone: NgZone;
-    protected scrollDispatcher: ScrollDispatcher;
-    protected hostView: ViewContainerRef;
-    protected scrollStrategy: any;
-    protected direction?: Directionality | undefined;
+    protected readonly overlay: Overlay;
+    protected readonly elementRef: ElementRef;
+    protected readonly ngZone: NgZone;
+    protected readonly scrollDispatcher: ScrollDispatcher;
+    protected readonly hostView: ViewContainerRef;
+    protected readonly direction: Directionality | null;
+    protected abstract scrollStrategy: () => ScrollStrategy;
     isOpen: boolean;
     enterDelay: number;
     leaveDelay: number;
@@ -40,7 +40,6 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     };
     protected readonly destroyed: Subject<void>;
     protected triggerName: string;
-    protected constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction?: Directionality | undefined);
     abstract updateClassMap(newPlacement?: string): void;
     abstract updateData(): void;
     abstract closingActions(): Observable<any>;

package/core/pop-up/pop-up.d.ts

@@ -1,10 +1,11 @@
 import { AnimationEvent } from '@angular/animations';
-import { ChangeDetectorRef, EventEmitter, OnDestroy, TemplateRef } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { PopUpVisibility } from './constants';
 import * as i0 from "@angular/core";
 export declare abstract class KbqPopUp implements OnDestroy {
-    private changeDetectorRef;
+    protected readonly renderer: Renderer2;
+    protected readonly changeDetectorRef: ChangeDetectorRef;
     header: string | TemplateRef<any>;
     content: string | TemplateRef<any>;
     context: {
@@ -22,7 +23,6 @@ export declare abstract class KbqPopUp implements OnDestroy {
     protected closeOnInteraction: boolean;
     private showTimeoutId;
     private hideTimeoutId;
-    protected constructor(changeDetectorRef: ChangeDetectorRef);
     ngOnDestroy(): void;
     isTemplateRef(value: any): boolean;
     show(delay: number): void;

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -2,43 +2,40 @@
 
 @use '../../styles/common/tokens' as *;
 
-@mixin kbq-pseudo-checkbox-color($component, $style-name) {
-    $style: map.get($component, $style-name);
+@mixin kbq-pseudo-checkbox-color($style-name) {
     $base: checkbox-#{$style-name};
 
-    border-color: kbq-css-variable(#{$base}-default-border, map.get($style, default, border));
-    background: kbq-css-variable(#{$base}-default-background, map.get($style, default, background));
+    border-color: kbq-css-variable(#{$base}-default-border);
+    background: kbq-css-variable(#{$base}-default-background);
 
     & .kbq-checkbox-checkmark,
     & .kbq-checkbox-mixedmark {
-        color: kbq-css-variable(#{$base}-default-color, map.get($style, default, color));
+        color: kbq-css-variable(#{$base}-default-color);
     }
 
     &.kbq-checked,
     &.kbq-indeterminate {
-        border-color: kbq-css-variable(#{$base}-states-checked-border, map.get($style, checked, border));
-        background: kbq-css-variable(#{$base}-states-checked-background, map.get($style, checked, background));
+        border-color: kbq-css-variable(#{$base}-states-checked-border);
+        background: kbq-css-variable(#{$base}-states-checked-background);
     }
 
     &.kbq-disabled {
         & .kbq-checkbox-checkmark,
         & .kbq-checkbox-mixedmark {
-            color: kbq-css-variable(#{$base}-states-disabled-color, map.get($style, disabled, color));
+            color: kbq-css-variable(#{$base}-states-disabled-color);
         }
 
-        border-color: kbq-css-variable(#{$base}-states-disabled-border, map.get($style, disabled, border));
-        background: kbq-css-variable(#{$base}-states-disabled-background, map.get($style, disabled, background));
+        border-color: kbq-css-variable(#{$base}-states-disabled-border);
+        background: kbq-css-variable(#{$base}-states-disabled-background);
     }
 }
 
-@mixin kbq-pseudo-checkbox-theme($theme) {
-    $checkbox: map.get($theme, components, checkbox);
-
+@mixin kbq-pseudo-checkbox-theme() {
     .kbq-pseudo-checkbox {
-        @include kbq-pseudo-checkbox-color($checkbox, theme);
+        @include kbq-pseudo-checkbox-color(theme);
 
         &.kbq-error {
-            @include kbq-pseudo-checkbox-color($checkbox, error);
+            @include kbq-pseudo-checkbox-color(error);
         }
     }
 }