@koobiq/components 17.2.0 → 17.4.0

package/progress-bar/_progress-bar-theme.scss

@@ -18,11 +18,11 @@
     }
 
     .kbq-progress-bar-text {
-        color: kbq-css-variable(progress-bar-text, map.get($progress-bar, text));
+        color: kbq-css-variable(progress-bar-text-color, map.get($progress-bar, text));
     }
 
     .kbq-progress-bar-caption {
-        color: kbq-css-variable(progress-bar-caption, map.get($progress-bar, caption));
+        color: kbq-css-variable(progress-bar-caption-color, map.get($progress-bar, caption));
     }
 }
 

package/progress-spinner/_progress-spinner-theme.scss

@@ -9,16 +9,16 @@
 
     .kbq-progress-spinner {
         .kbq-progress-spinner__circle {
-            stroke: kbq-css-variable(progress-spinner-circle, map.get($progress-spinner, circle));
+            stroke: kbq-css-variable(progress-spinner-circle-background, map.get($progress-spinner, circle));
         }
     }
 
     .kbq-progress-spinner-text {
-        color: kbq-css-variable(progress-spinner-text, map.get($progress-spinner, text));
+        color: kbq-css-variable(progress-spinner-text-color, map.get($progress-spinner, text));
     }
 
     .kbq-progress-spinner-caption {
-        color: kbq-css-variable(progress-spinner-caption, map.get($progress-spinner, caption));
+        color: kbq-css-variable(progress-spinner-caption-color, map.get($progress-spinner, caption));
     }
 }
 

package/radio/_radio-theme.scss

@@ -6,27 +6,17 @@
 
 @mixin kbq-radio-state($component, $type, $state-name) {
     $state: map.get($component, $type, $state-name);
+    $base-path: radio-#{$type}-#{$state-name};
 
     & .kbq-radio-button__outer-circle {
-        border-color: kbq-css-variable(
-            radio-#{$type}-#{$state-name}-outer-circle-border,
-            map.get($state, outer-circle-border)
-        );
-        background: kbq-css-variable(
-            radio-#{$type}-#{$state-name}-outer-circle-background,
-            map.get($state, outer-circle-background)
-        );
-        box-shadow: kbq-css-variable(
-            radio-#{$type}-#{$state-name}-outer-circle-shadow,
-            map.get($state, outer-circle-shadow)
-        );
+        border-color: kbq-css-variable(#{$base-path}-outer-circle-border, map.get($state, outer-circle-border));
+        background: kbq-css-variable(#{$base-path}-outer-circle-background, map.get($state, outer-circle-background));
+        // FIXME: move under &.cdk-keyboard-focused, because used only for focused state.
+        box-shadow: kbq-css-variable(#{$base-path}-outer-circle-shadow, map.get($state, outer-circle-shadow));
     }
 
     & .kbq-radio-button__inner-circle {
-        background: kbq-css-variable(
-            radio-#{$type}-#{$state-name}-inner-circle-background,
-            map.get($state, inner-circle-background)
-        );
+        background: kbq-css-variable(#{$base-path}-inner-circle-background, map.get($state, inner-circle-background));
     }
 }
 
@@ -34,7 +24,7 @@
     @include kbq-radio-state($component, $type-name, default);
 
     & .kbq-hint .kbq-hint__text {
-        color: map.get($component, $type-name, default, caption);
+        color: kbq-css-variable(radio-#{$type-name}-default-caption, map.get($component, $type-name, default, caption));
     }
 
     &:hover {
@@ -58,11 +48,17 @@
 
         & .kbq-radio-label {
             cursor: default;
-            color: map.get($component, $type-name, states-disabled, caption);
+            color: kbq-css-variable(
+                radio-#{$type-name}-states-disabled-caption,
+                map.get($component, $type-name, states-disabled, caption)
+            );
         }
 
         & .kbq-hint .kbq-hint__text {
-            color: map.get($component, $type-name, states-disabled, caption);
+            color: kbq-css-variable(
+                radio-#{$type-name}-states-disabled-caption,
+                map.get($component, $type-name, states-disabled, caption)
+            );
         }
     }
 }

package/schematics/ng-add/index.js

@@ -52,13 +52,13 @@ function ngAdd(options) {
         }
         // Installing dependencies
         addPackageToPackageJson(tree, '@angular/cdk', "^17.2.0");
-        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.2.0");
-        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.2.0");
+        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.4.0");
+        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.4.0");
         addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.2");
         addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.2");
         addPackageToPackageJson(tree, '@koobiq/icons', "^7.1.1");
-        addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.3.1");
-        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.3.1");
+        addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.4.0");
+        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.4.0");
         addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");
         addPackageToPackageJson(tree, 'luxon', "^3.4.4");
         addPackageToPackageJson(tree, 'marked', "^9.0.0");

package/scrollbar/_scrollbar-component-theme.scss

@@ -8,21 +8,30 @@
         .os-scrollbar {
             .os-scrollbar-handle {
                 &::before {
-                    border-color: kbq-css-variable(scrollbar-default, map.get($scrollbar, default));
-                    background-color: kbq-css-variable(scrollbar-default, map.get($scrollbar, default));
+                    border-color: kbq-css-variable(scrollbar-thumb-default-background, map.get($scrollbar, default));
+                    background-color: kbq-css-variable(
+                        scrollbar-thumb-default-background,
+                        map.get($scrollbar, default)
+                    );
                 }
 
                 &:hover {
                     &::before {
-                        border-color: kbq-css-variable(scrollbar-hover, map.get($scrollbar, hover));
-                        background-color: kbq-css-variable(scrollbar-hover, map.get($scrollbar, hover));
+                        border-color: kbq-css-variable(scrollbar-thumb-hover-background, map.get($scrollbar, hover));
+                        background-color: kbq-css-variable(
+                            scrollbar-thumb-hover-background,
+                            map.get($scrollbar, hover)
+                        );
                     }
                 }
 
                 &:active {
                     &::before {
-                        border-color: kbq-css-variable(scrollbar-active, map.get($scrollbar, active));
-                        background-color: kbq-css-variable(scrollbar-active, map.get($scrollbar, active));
+                        border-color: kbq-css-variable(scrollbar-thumb-active-background, map.get($scrollbar, active));
+                        background-color: kbq-css-variable(
+                            scrollbar-thumb-active-background,
+                            map.get($scrollbar, active)
+                        );
                     }
                 }
             }
@@ -30,17 +39,23 @@
             .os-scrollbar-track,
             .os-scrollbar-handle {
                 border-style: solid;
-                border-color: kbq-css-variable(scrollbar-track-default, map.get($scrollbar, track, default)) !important;
-                background-color: kbq-css-variable(scrollbar-track-default, map.get($scrollbar, track, default));
+                border-color: kbq-css-variable(
+                    scrollbar-track-default-border,
+                    map.get($scrollbar, track, default)
+                ) !important;
+                background-color: kbq-css-variable(
+                    scrollbar-track-default-background,
+                    map.get($scrollbar, track, default)
+                );
 
                 &:hover {
-                    border-color: kbq-css-variable(scrollbar-track-hover, map.get($scrollbar, track, hover));
-                    background: kbq-css-variable(scrollbar-track-hover, map.get($scrollbar, track, hover));
+                    border-color: kbq-css-variable(scrollbar-track-hover-border, map.get($scrollbar, track, hover));
+                    background: kbq-css-variable(scrollbar-track-hover-background, map.get($scrollbar, track, hover));
                 }
 
                 &:active {
-                    border-color: kbq-css-variable(scrollbar-track-active, map.get($scrollbar, track, active));
-                    background: kbq-css-variable(scrollbar-track-active, map.get($scrollbar, track, active));
+                    border-color: kbq-css-variable(scrollbar-track-active-border, map.get($scrollbar, track, active));
+                    background: kbq-css-variable(scrollbar-track-active-background, map.get($scrollbar, track, active));
                 }
             }
         }

package/select/_select-theme.scss

@@ -33,8 +33,8 @@
     }
 
     .kbq-select__panel {
-        box-shadow: kbq-css-variable(select-panel-shadow, map.get($select-panel, shadow));
-        background: kbq-css-variable(select-panel-background, map.get($select-panel, background));
+        box-shadow: kbq-css-variable(select-panel-dropdown-shadow, map.get($select-panel, shadow));
+        background: kbq-css-variable(select-panel-dropdown-background, map.get($select-panel, background));
 
         & .kbq-select__footer {
             border-color: kbq-css-variable(divider-color, map.get($divider, color));

package/sidepanel/_sidepanel-theme.scss

@@ -8,17 +8,17 @@
     $sidepanel: map.get($theme, components, sidepanel);
 
     .kbq-sidepanel-title {
-        color: kbq-css-variable(sidepanel-header-text, map.get($sidepanel, header-text));
+        color: kbq-css-variable(sidepanel-header-text-color, map.get($sidepanel, header-text));
     }
 
     .kbq-sidepanel-content {
-        background-color: kbq-css-variable(sidepanel-background, map.get($sidepanel, background));
-        color: kbq-css-variable(sidepanel-content-text, map.get($sidepanel, content-text));
+        background-color: kbq-css-variable(sidepanel-container-background, map.get($sidepanel, background));
+        color: kbq-css-variable(sidepanel-content-text-color, map.get($sidepanel, content-text));
     }
 
     .kbq-sidepanel-container_shadowed {
         .kbq-sidepanel-content {
-            box-shadow: kbq-css-variable(sidepanel-box-shadow, map.get($sidepanel, box-shadow));
+            box-shadow: kbq-css-variable(sidepanel-container-box-shadow, map.get($sidepanel, box-shadow));
         }
     }
 }

package/splitter/_splitter-theme.scss

@@ -17,9 +17,8 @@
             cursor: row-resize;
         }
 
-        // todo
         &[disabled] {
-            background-color: kbq-css-variable(background-disabled, map.get($background, disabled));
+            background-color: kbq-css-variable(background-background-disabled, map.get($background, disabled));
 
             cursor: default;
         }

package/splitter/splitter.scss

@@ -8,10 +8,10 @@
 
     .kbq-splitter-area {
         overflow: hidden;
+    }
 
-        &_resizing {
-            pointer-events: none;
-        }
+    .kbq-splitter-area_resizing {
+        pointer-events: none;
     }
 }
 

package/table/_table-theme.scss

@@ -14,7 +14,7 @@
             color: kbq-css-variable(foreground-contrast-secondary, map.get($foreground, contrast-secondary));
 
             & > tr > th {
-                border-bottom-color: kbq-css-variable(line-contrast-fade, map.get($line, contrast-fade));
+                border-bottom-color: kbq-css-variable(line-contrast-less, map.get($line, contrast-less));
             }
         }
 
@@ -38,7 +38,7 @@
             & > tbody > tr {
                 & th,
                 & td {
-                    border-bottom-color: kbq-css-variable(line-contrast-fade, map.get($line, contrast-fade));
+                    border-bottom-color: kbq-css-variable(line-contrast-less, map.get($line, contrast-less));
                 }
             }
         }

package/tabs/_tabs-theme.scss

@@ -10,10 +10,10 @@
     $base: tabs-tab-item-#{$type}-#{$sub-type}-#{$style-name};
 
     background: kbq-css-variable(#{$base}-background, map.get($style, background));
-    color: kbq-css-variable(#{$base}-text, map.get($style, text));
+    color: kbq-css-variable(#{$base}-text-color, map.get($style, text));
 
     & .kbq-icon {
-        color: kbq-css-variable(#{$base}-icon, map.get($style, icon));
+        color: kbq-css-variable(#{$base}-icon-color, map.get($style, icon));
     }
 }
 
@@ -34,7 +34,7 @@
 
     &.cdk-keyboard-focused {
         border-color: kbq-css-variable(
-            tabs-tab-item-#{$type}-#{$sub-type}-states-focused-border-color,
+            tabs-tab-item-#{$type}-#{$sub-type}-states-focused-focus-outline-color,
             map.get($component, $type, $sub-type, states-focused, border-color)
         );
     }
@@ -76,6 +76,7 @@
                     );
                 }
 
+                // FIXME: need check, tab-group has different subtype
                 & .kbq-tab-label {
                     @include kbq-tab-item-style($tab-item, filled, on-background);
                 }

package/tags/_tag-theme.scss

@@ -26,19 +26,21 @@
 
     &:hover,
     &.kbq-hovered {
-        @include kbq-tag-state($component, $type, hover);
+        @include kbq-tag-state($component, $type, states-hover);
     }
 
     &.kbq-focused {
-        @include kbq-tag-state($component, $type, focus);
+        @include kbq-tag-state($component, $type, states-focus);
 
         box-shadow:
-            inset 0 0 0.1px 1px kbq-css-variable(tag-#{$type}-focus-outline, map.get($component, $type, focus, outline)),
-            0 0 0.1px 1px kbq-css-variable(tag-#{$type}-focus-outline, map.get($component, $type, focus, outline));
+            inset 0 0 0.1px 1px
+                kbq-css-variable(tag-#{$type}-states-focus-outline, map.get($component, $type, focus, outline)),
+            0 0 0.1px 1px
+                kbq-css-variable(tag-#{$type}-states-focus-outline, map.get($component, $type, focus, outline));
     }
 
     &.kbq-disabled {
-        @include kbq-tag-state($component, $type, disabled);
+        @include kbq-tag-state($component, $type, states-disabled);
     }
 }
 

package/timepicker/timepicker.scss

@@ -4,6 +4,7 @@
 @use '../core/styles/common/tokens' as *;
 
 .kbq-timepicker {
+    // FIXME: default token doesn't exist
     padding-right: kbq-css-variable(timepicker-size-padding-right);
 }
 

package/timezone/_timezone-option-theme.scss

@@ -9,15 +9,15 @@
 
     .kbq-timezone-option__offset,
     .kbq-timezone-option__city {
-        color: kbq-css-variable(timezone-text, map.get($timezone, text));
+        color: kbq-css-variable(timezone-option-text, map.get($timezone, text));
     }
 
     .kbq-timezone-option__cities {
-        color: kbq-css-variable(timezone-caption, map.get($timezone, caption));
+        color: kbq-css-variable(timezone-option-caption, map.get($timezone, caption));
     }
 
     .kbq-timezone-select__panel.kbq-select__panel .kbq-optgroup-label {
-        color: kbq-css-variable(timezone-optgroup-label, map.get($timezone, optgroup-label));
+        color: kbq-css-variable(timezone-option-optgroup-label, map.get($timezone, optgroup-label));
     }
 }
 

package/toast/_toast-theme.scss

@@ -33,7 +33,7 @@
         }
 
         &.kbq-toast_warning {
-            @include kbq-toast($toast, success);
+            @include kbq-toast($toast, warning);
         }
 
         &.kbq-toast_error {

package/toast/toast.component.scss

@@ -26,7 +26,7 @@ $tokens: meta.module-variables(tokens) !default;
     height: kbq-css-variable(toast-size-icon-height);
     max-height: kbq-css-variable(toast-size-icon-height);
 
-    border-radius: kbq-css-variable(toast-size-border-radius);
+    border-radius: kbq-css-variable(toast-size-container-border-radius);
 
     margin-right: kbq-css-variable(toast-size-icon-margin-right);
 

package/toggle/_toggle-theme.scss

@@ -84,7 +84,7 @@
         }
 
         &.kbq-disabled {
-            color: map.get($foreground, text-disabled);
+            color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
         }
     }
 }

package/tooltip/_tooltip-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
+// FIXME: @use properties are used, which are most likely not applied. Need to check
 @use '../core/pop-up/pop-up' as *;
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;

package/tree/_tree-theme.scss

@@ -11,19 +11,19 @@
     background: kbq-css-variable(tree-#{$state-name}-container-background, map.get($state, container-background));
 
     .kbq-option-text {
-        color: kbq-css-variable(tree-#{$state-name}-text, map.get($state, text));
+        color: kbq-css-variable(tree-#{$state-name}-text-color, map.get($state, text));
     }
 
     .kbq-tree-node-toggle .kbq-icon {
-        color: kbq-css-variable(tree-#{$state-name}-tree-toggle, map.get($state, tree-toggle));
+        color: kbq-css-variable(tree-#{$state-name}-tree-toggle-color, map.get($state, tree-toggle));
     }
 
     .kbq-option-action .kbq-icon {
-        color: kbq-css-variable(tree-#{$state-name}-action-button, map.get($state, action-button));
+        color: kbq-css-variable(tree-#{$state-name}-action-button-color, map.get($state, action-button));
     }
 
     .kbq-option-caption {
-        color: kbq-css-variable(tree-#{$state-name}-caption, map.get($state, caption));
+        color: kbq-css-variable(tree-#{$state-name}-caption-color, map.get($state, caption));
     }
 }
 
@@ -44,7 +44,7 @@
         &.kbq-focused,
         &.kbq-active {
             border-color: kbq-css-variable(
-                tree-states-focused-focus-outline,
+                tree-states-focused-focus-outline-color,
                 map.get($tree-item, states-focused, focus-outline)
             );
         }

package/tree/toggle.scss

@@ -10,7 +10,7 @@
     flex-shrink: 0;
 
     height: 100%;
-
+    // FIXME: default token doesn't exist
     padding-left: kbq-css-variable(tree-size-toggle-padding);
     padding-right: kbq-css-variable(tree-size-toggle-padding);
 

package/tree-select/_tree-select-theme.scss

@@ -31,8 +31,8 @@
     }
 
     .kbq-tree-select__panel {
-        box-shadow: kbq-css-variable(select-panel-shadow, map.get($select-panel, shadow));
-        background: kbq-css-variable(select-panel-background, map.get($select-panel, background));
+        box-shadow: kbq-css-variable(select-panel-dropdown-shadow, map.get($select-panel, shadow));
+        background: kbq-css-variable(select-panel-dropdown-background, map.get($select-panel, background));
 
         & .kbq-select__footer {
             border-color: kbq-css-variable(divider-color, map.get($divider, color));