@koobiq/components 17.0.2 → 17.1.0

package/radio/radio.scss

@@ -44,12 +44,9 @@ $tokens: meta.module-variables(tokens) !default;
     order: 0;
     line-height: inherit;
 
-    padding-left: calc(
-        var(--kbq-radio-size-normal-outer-size, map.get($tokens, radio-size-normal-outer-size)) +
-            var(
-                --kbq-radio-size-normal-horizontal-content-padding,
-                map.get($tokens, radio-size-normal-horizontal-content-padding)
-            )
+    padding-left: kbq-sum-series-css-variables(
+        [radio-size-normal-outer-size,
+        radio-size-normal-horizontal-content-padding]
     );
     padding-right: 0;
 
@@ -73,12 +70,8 @@ $tokens: meta.module-variables(tokens) !default;
         }
 
         left: 0;
-        top: calc(
-            (
-                    var(--radio-font-normal-label-line-height, map.get($tokens, radio-font-normal-label-line-height)) -
-                        (var(--radio-size-normal-outer-size, map.get($tokens, radio-size-normal-outer-size)) + 2px)
-                ) / 2
-        );
+
+        top: kbq-css-half-difference(radio-font-normal-label-line-height, radio-size-normal-outer-size, 1px);
 
         width: kbq-css-variable(radio-size-normal-outer-size);
         height: kbq-css-variable(radio-size-normal-outer-size);
@@ -115,21 +108,13 @@ $tokens: meta.module-variables(tokens) !default;
 
 .kbq-radio-button.kbq-radio-button_big {
     .kbq-radio-label-content {
-        padding-left: calc(
-            var(--kbq-radio-size-big-outer-size, map.get($tokens, radio-size-big-outer-size)) +
-                var(
-                    --kbq-radio-size-big-horizontal-content-padding,
-                    map.get($tokens, radio-size-big-horizontal-content-padding)
-                )
+        padding-left: kbq-sum-series-css-variables(
+            [radio-size-big-outer-size,
+            radio-size-big-horizontal-content-padding]
         );
 
         .kbq-radio-button__outer-circle {
-            top: calc(
-                (
-                        var(--radio-font-big-label-line-height, map.get($tokens, radio-font-big-label-line-height)) -
-                            (var(--radio-size-big-outer-size, map.get($tokens, radio-size-big-outer-size)) + 2px)
-                    ) / 2
-            );
+            top: kbq-css-half-difference(radio-font-big-label-line-height, radio-size-big-outer-size, 1px);
 
             width: kbq-css-variable(radio-size-big-outer-size);
             height: kbq-css-variable(radio-size-big-outer-size);

package/schematics/ng-add/index.js

@@ -52,8 +52,8 @@ function ngAdd(options) {
         }
         // Installing dependencies
         addPackageToPackageJson(tree, '@angular/cdk', "^17.2.0");
-        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.0.2");
-        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.0.2");
+        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.1.0");
+        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.1.0");
         addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.2");
         addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.2");
         addPackageToPackageJson(tree, '@koobiq/icons', "^7.1.1");

package/tabs/_tabs-common.scss

@@ -20,21 +20,13 @@ $tokens: meta.module-variables(tokens) !default;
 
     cursor: pointer;
 
-    $padding-vertical: map.get($tokens, tabs-size-tab-item-padding-vertical);
-    $padding-horizontal: map.get($tokens, tabs-size-tab-item-padding-horizontal);
-    $border-width: map.get($tokens, tabs-size-tab-item-focus-outline-width);
-
-    padding: calc(
-            var(--kbq-tabs-size-tab-item-padding-vertical, $padding-vertical) - var(
-                    --kbq-tabs-size-tab-item-focus-outline-width,
-                    $border-width
-                )
+    padding: kbq-difference-series-css-variables(
+            [tabs-size-tab-item-padding-vertical,
+            tabs-size-tab-item-focus-outline-width]
         )
-        calc(
-            var(--kbq-tabs-size-tab-item-padding-horizontal, $padding-horizontal) - var(
-                    --kbq-tabs-size-tab-item-focus-outline-width,
-                    $border-width
-                )
+        kbq-difference-series-css-variables(
+            [tabs-size-tab-item-padding-horizontal,
+            tabs-size-tab-item-focus-outline-width]
         );
 
     border: {

package/tags/tag-list.scss

@@ -58,22 +58,9 @@ $tokens: meta.module-variables(tokens) !default;
 
 .kbq-form-field-type-tag-list {
     & .kbq-form-field__container {
-        $padding-vertical: map.get($tokens, tag-input-size-padding-vertical);
-        $border-width: map.get($tokens, form-field-size-border-width);
-
-        padding: calc(
-                var(--kbq-tag-input-size-padding-vertical, #{$padding-vertical}) - var(
-                        --kbq-form-field-size-border-width,
-                        $border-width
-                    )
-            )
+        padding: kbq-difference-series-css-variables([tag-input-size-padding-vertical, form-field-size-border-width])
             kbq-css-variable(tag-input-size-padding-right)
-            calc(
-                var(--kbq-tag-input-size-padding-vertical, #{$padding-vertical}) - var(
-                        --kbq-form-field-size-border-width,
-                        $border-width
-                    )
-            )
+            kbq-difference-series-css-variables([tag-input-size-padding-vertical, form-field-size-border-width])
             kbq-css-variable(tag-input-size-padding-left);
     }
 }

package/toast/toast.module.d.ts

@@ -3,11 +3,12 @@ import * as i1 from "./toast.component";
 import * as i2 from "./toast-container.component";
 import * as i3 from "@angular/common";
 import * as i4 from "@angular/cdk/overlay";
-import * as i5 from "@angular/cdk/a11y";
-import * as i6 from "@koobiq/components/icon";
-import * as i7 from "@koobiq/components/button";
+import * as i5 from "@koobiq/components/title";
+import * as i6 from "@angular/cdk/a11y";
+import * as i7 from "@koobiq/components/icon";
+import * as i8 from "@koobiq/components/button";
 export declare class KbqToastModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToastModule, [typeof i1.KbqToastComponent, typeof i2.KbqToastContainerComponent, typeof i1.KbqToastCloseButton], [typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.A11yModule, typeof i6.KbqIconModule, typeof i7.KbqButtonModule], [typeof i1.KbqToastComponent, typeof i2.KbqToastContainerComponent, typeof i1.KbqToastCloseButton]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToastModule, [typeof i1.KbqToastComponent, typeof i2.KbqToastContainerComponent, typeof i1.KbqToastCloseButton], [typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.KbqTitleModule, typeof i6.A11yModule, typeof i7.KbqIconModule, typeof i8.KbqButtonModule], [typeof i1.KbqToastComponent, typeof i2.KbqToastContainerComponent, typeof i1.KbqToastCloseButton]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqToastModule>;
 }

package/toggle/_toggle-theme.scss

@@ -74,15 +74,18 @@
 
 @mixin kbq-toggle-theme($theme) {
     $toggle: map.get($theme, components, toggle);
+    $foreground: map.get($theme, foreground);
 
     .kbq-toggle {
-        color: kbq-css-variable(foreground-contrast, map.get($theme, foreground, contrast));
-
         @include kbq-toggle-color($toggle, theme);
 
         &.kbq-error {
             @include kbq-toggle-color($toggle, error);
         }
+
+        &.kbq-disabled {
+            color: map.get($foreground, text-disabled);
+        }
     }
 }
 

package/toggle/toggle.scss

@@ -31,14 +31,7 @@ $tokens: meta.module-variables(tokens) !default;
         }
 
         .kbq-toggle-bar-container:has(+ .kbq-toggle__content) {
-            padding-top: calc(
-                (
-                        var(
-                                --toggle-font-normal-label-line-height,
-                                map.get($tokens, toggle-font-normal-label-line-height)
-                            ) - var(--toggle-size-normal-height, map.get($tokens, toggle-size-normal-height))
-                    ) / 2
-            );
+            padding-top: kbq-css-half-difference(toggle-font-normal-label-line-height, toggle-size-normal-height);
         }
     }
 
@@ -96,14 +89,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     .kbq-toggle-layout {
         .kbq-toggle-bar-container:has(+ .kbq-toggle__content) {
-            padding-top: calc(
-                (
-                        var(--toggle-font-big-label-line-height, map.get($tokens, toggle-font-big-label-line-height)) - var(
-                                --toggle-size-big-height,
-                                map.get($tokens, toggle-size-big-height)
-                            )
-                    ) / 2
-            );
+            padding-top: kbq-css-half-difference(toggle-font-big-label-line-height, toggle-size-big-height);
         }
     }
 }

package/tooltip/tooltip.scss

@@ -39,7 +39,7 @@ $trigger-margin: 8px;
     z-index: -1;
 }
 
-$arrow-offset: calc((var(--kbq-tooltip-size-arrow-size, #{map.get($tokens, tooltip-size-arrow-size)}) - 1px) / -2);
+$arrow-offset: calc((#{kbq-css-variable(tooltip-size-arrow-size)} - 1px) / -2);
 $arrow-padding: calc((18px + $trigger-margin) / 2);
 
 @include pop-up.popup-arrow-positions(kbq-tooltip, $arrow-offset, $arrow-padding);

package/tree/tree-option.scss

@@ -10,11 +10,6 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-tree-option {
     @include common.kbq-no-select;
 
-    $padding-vertical: map.get($tokens, tree-size-container-padding-vertical);
-    $padding-right: map.get($tokens, tree-size-container-padding-right);
-
-    $outline-width: map.get($tokens, tree-size-container-focus-outline-width);
-
     box-sizing: border-box;
 
     display: flex;
@@ -28,23 +23,17 @@ $tokens: meta.module-variables(tokens) !default;
     border-style: solid;
     border-color: transparent;
 
-    padding-top: calc(
-        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) - var(
-                --kbq-tree-size-container-focus-outline-width,
-                $outline-width
-            )
+    padding-top: kbq-difference-series-css-variables(
+        [ tree-size-container-padding-vertical,
+        tree-size-container-focus-outline-width]
     );
-    padding-right: calc(
-        var(--kbq-tree-size-container-padding-right, $padding-right) - var(
-                --kbq-tree-size-container-focus-outline-width,
-                $outline-width
-            )
+    padding-right: kbq-difference-series-css-variables(
+        [ tree-size-container-padding-right,
+        tree-size-container-focus-outline-width]
     );
-    padding-bottom: calc(
-        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) - var(
-                --kbq-tree-size-container-focus-outline-width,
-                $outline-width
-            )
+    padding-bottom: kbq-difference-series-css-variables(
+        [ tree-size-container-padding-vertical,
+        tree-size-container-focus-outline-width]
     );
 
     gap: kbq-css-variable(tree-size-container-content-gap-horizontal);