@koobiq/components 18.1.0 → 18.2.0

package/tooltip/tooltip.scss

@@ -37,23 +37,23 @@ $trigger-margin_without-arrow: 4px;
 }
 
 .kbq-tooltip__inner {
-    border-radius: kbq-css-variable(tooltip-size-border-radius);
+    border-radius: var(--kbq-tooltip-size-border-radius);
     word-break: break-word;
 }
 
 .kbq-tooltip {
     box-sizing: border-box;
 
-    border-radius: kbq-css-variable(tooltip-size-border-radius);
+    border-radius: var(--kbq-tooltip-size-border-radius);
 
     white-space: pre-line;
 
     @include pop-up.popup-margins(kbq-tooltip, $trigger-margin);
 
-    max-width: kbq-css-variable(tooltip-size-max-width);
+    max-width: var(--kbq-tooltip-size-max-width);
 
     .kbq-tooltip__inner {
-        padding: kbq-css-variable(tooltip-size-padding-vertical) kbq-css-variable(tooltip-size-padding-horizontal);
+        padding: var(--kbq-tooltip-size-padding-vertical) var(--kbq-tooltip-size-padding-horizontal);
     }
 
     &.kbq-tooltip_arrowless {
@@ -67,15 +67,15 @@ $trigger-margin_without-arrow: 4px;
 .kbq-tooltip__arrow {
     position: absolute;
 
-    width: kbq-css-variable(tooltip-size-arrow-size);
-    height: kbq-css-variable(tooltip-size-arrow-size);
+    width: var(--kbq-tooltip-size-arrow-size);
+    height: var(--kbq-tooltip-size-arrow-size);
 
     transform: rotate(45deg);
 
     z-index: -1;
 }
 
-$arrow-offset: calc((#{kbq-css-variable(tooltip-size-arrow-size)} - 1px) / -2);
+$arrow-offset: calc((#{var(--kbq-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-theme.scss

@@ -6,22 +6,22 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-tree-option($state-name) {
-    background: kbq-css-variable(tree-#{$state-name}-container-background);
+    background: var(--kbq-tree-#{$state-name}-container-background);
 
     .kbq-option-text {
-        color: kbq-css-variable(tree-#{$state-name}-text-color);
+        color: var(--kbq-tree-#{$state-name}-text-color);
     }
 
     .kbq-tree-node-toggle .kbq-icon {
-        color: kbq-css-variable(tree-#{$state-name}-tree-toggle-color);
+        color: var(--kbq-tree-#{$state-name}-tree-toggle-color);
     }
 
     .kbq-option-action .kbq-icon {
-        color: kbq-css-variable(tree-#{$state-name}-action-button-color);
+        color: var(--kbq-tree-#{$state-name}-action-button-color);
     }
 
     .kbq-option-caption {
-        color: kbq-css-variable(tree-#{$state-name}-caption-color);
+        color: var(--kbq-tree-#{$state-name}-caption-color);
     }
 }
 
@@ -39,7 +39,7 @@
 
         &.kbq-focused,
         &.kbq-active {
-            border-color: kbq-css-variable(tree-states-focused-focus-outline-color);
+            border-color: var(--kbq-tree-states-focused-focus-outline-color);
         }
 
         &.kbq-selected {

package/tree/toggle.scss

@@ -13,8 +13,8 @@
 
     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);
+    padding-left: var(--kbq-tree-size-toggle-padding);
+    padding-right: var(--kbq-tree-size-toggle-padding);
 
     cursor: pointer;
 

package/tree/tree-option.scss

@@ -16,7 +16,7 @@
 
     word-wrap: break-word;
 
-    border-width: kbq-css-variable(tree-size-container-focus-outline-width);
+    border-width: var(--kbq-tree-size-container-focus-outline-width);
     border-style: solid;
     border-color: transparent;
 
@@ -33,7 +33,7 @@
         tree-size-container-focus-outline-width]
     );
 
-    gap: kbq-css-variable(tree-size-container-content-gap-horizontal);
+    gap: var(--kbq-tree-size-container-content-gap-horizontal);
 
     & .kbq-option-text {
         @include common.kbq-line-wrapper-base();
@@ -41,8 +41,8 @@
 
         @include common.kbq-truncate-line();
 
-        padding-top: kbq-css-variable(list-size-text-padding-vertical);
-        padding-bottom: kbq-css-variable(list-size-text-padding-vertical);
+        padding-top: var(--kbq-list-size-text-padding-vertical);
+        padding-bottom: var(--kbq-list-size-text-padding-vertical);
     }
 
     &:focus {

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

@@ -6,29 +6,29 @@
 
 @mixin kbq-tree-select-theme() {
     .kbq-tree-select {
-        color: kbq-css-variable(foreground-contrast);
+        color: var(--kbq-foreground-contrast);
 
         &.ng-invalid {
-            color: kbq-css-variable(error-default);
+            color: var(--kbq-error-default);
         }
 
         &.kbq-disabled {
-            color: kbq-css-variable(foreground-text-disabled);
+            color: var(--kbq-foreground-text-disabled);
         }
     }
 
     .kbq-select__placeholder {
         text-overflow: ellipsis;
 
-        color: kbq-css-variable(foreground-text-disabled);
+        color: var(--kbq-foreground-text-disabled);
     }
 
     .kbq-tree-select__panel {
-        box-shadow: kbq-css-variable(select-panel-dropdown-shadow);
-        background: kbq-css-variable(select-panel-dropdown-background);
+        box-shadow: var(--kbq-select-panel-dropdown-shadow);
+        background: var(--kbq-select-panel-dropdown-background);
 
         & .kbq-select__footer {
-            border-color: kbq-css-variable(divider-color);
+            border-color: var(--kbq-divider-color);
         }
     }
 }