@koobiq/components 18.1.0 → 18.2.0

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

@@ -3,20 +3,20 @@
 @mixin kbq-progress-bar-theme() {
     .kbq-progress-bar.kbq-theme {
         .kbq-progress-bar__inner {
-            background-color: kbq-css-variable(progress-bar-bar-background);
+            background-color: var(--kbq-progress-bar-bar-background);
         }
 
         .kbq-progress-bar__line {
-            background-color: kbq-css-variable(progress-bar-bar-foreground);
+            background-color: var(--kbq-progress-bar-bar-foreground);
         }
     }
 
     .kbq-progress-bar-text {
-        color: kbq-css-variable(progress-bar-text-color);
+        color: var(--kbq-progress-bar-text-color);
     }
 
     .kbq-progress-bar-caption {
-        color: kbq-css-variable(progress-bar-caption-color);
+        color: var(--kbq-progress-bar-caption-color);
     }
 }
 

package/progress-bar/progress-bar.scss

@@ -21,25 +21,25 @@
     overflow: hidden;
 
     .kbq-progress-bar-text {
-        margin-bottom: kbq-css-variable(progress-bar-size-container-content-gap);
+        margin-bottom: var(--kbq-progress-bar-size-container-content-gap);
     }
 
     .kbq-progress-bar-caption {
-        margin-top: kbq-css-variable(progress-bar-size-container-content-gap);
+        margin-top: var(--kbq-progress-bar-size-container-content-gap);
     }
 
     & .kbq-progress-bar__inner {
         overflow: hidden;
 
-        height: kbq-css-variable(progress-bar-size-bar-height);
-        border-radius: kbq-css-variable(progress-bar-size-container-border-radius);
+        height: var(--kbq-progress-bar-size-bar-height);
+        border-radius: var(--kbq-progress-bar-size-container-border-radius);
     }
 
     & .kbq-progress-bar__line {
         height: 100%;
         transform-origin: top left;
 
-        border-radius: kbq-css-variable(progress-bar-size-bar-border-radius);
+        border-radius: var(--kbq-progress-bar-size-bar-border-radius);
     }
 
     &.kbq-progress-bar_determinate .kbq-progress-bar__line {

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

@@ -3,16 +3,16 @@
 @mixin kbq-progress-spinner-theme() {
     .kbq-progress-spinner {
         .kbq-progress-spinner__circle {
-            stroke: kbq-css-variable(progress-spinner-circle-background);
+            stroke: var(--kbq-progress-spinner-circle-background);
         }
     }
 
     .kbq-progress-spinner-text {
-        color: kbq-css-variable(progress-spinner-text-color);
+        color: var(--kbq-progress-spinner-text-color);
     }
 
     .kbq-progress-spinner-caption {
-        color: kbq-css-variable(progress-spinner-caption-color);
+        color: var(--kbq-progress-spinner-caption-color);
     }
 }
 

package/progress-spinner/progress-spinner.scss

@@ -14,7 +14,7 @@
     display: flex;
     flex-direction: row;
 
-    gap: kbq-css-variable(progress-spinner-size-compact-content-gap-horizontal);
+    gap: var(--kbq-progress-spinner-size-compact-content-gap-horizontal);
 }
 
 .kbq-progress-spinner__circle {
@@ -27,8 +27,8 @@
 }
 
 .kbq-progress-spinner__inner {
-    width: kbq-css-variable(progress-spinner-size-compact-size);
-    height: kbq-css-variable(progress-spinner-size-compact-size);
+    width: var(--kbq-progress-spinner-size-compact-size);
+    height: var(--kbq-progress-spinner-size-compact-size);
 
     transform: rotateZ(-90deg);
 
@@ -37,16 +37,16 @@
 
 .kbq-progress-spinner__content {
     .kbq-progress-spinner-text {
-        margin-bottom: kbq-css-variable(progress-spinner-size-compact-content-gap-vertical);
+        margin-bottom: var(--kbq-progress-spinner-size-compact-content-gap-vertical);
     }
 }
 
 .kbq-progress-spinner_big {
-    gap: kbq-css-variable(progress-spinner-size-big-content-gap-horizontal);
+    gap: var(--kbq-progress-spinner-size-big-content-gap-horizontal);
 
     & .kbq-progress-spinner__inner {
-        width: kbq-css-variable(progress-spinner-size-big-size);
-        height: kbq-css-variable(progress-spinner-size-big-size);
+        width: var(--kbq-progress-spinner-size-big-size);
+        height: var(--kbq-progress-spinner-size-big-size);
     }
 
     & .kbq-progress-spinner__circle {

package/radio/_radio-theme.scss

@@ -4,14 +4,14 @@
     $base-path: radio-#{$type}-#{$state-name};
 
     & .kbq-radio-button__outer-circle {
-        border-color: kbq-css-variable(#{$base-path}-outer-circle-border);
-        background: kbq-css-variable(#{$base-path}-outer-circle-background);
+        border-color: var(--kbq-#{$base-path}-outer-circle-border);
+        background: var(--kbq-#{$base-path}-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);
+        box-shadow: var(--kbq-#{$base-path}-outer-circle-shadow);
     }
 
     & .kbq-radio-button__inner-circle {
-        background: kbq-css-variable(#{$base-path}-inner-circle-background);
+        background: var(--kbq-#{$base-path}-inner-circle-background);
     }
 }
 
@@ -19,7 +19,7 @@
     @include kbq-radio-state($type-name, default);
 
     & .kbq-hint .kbq-hint__text {
-        color: kbq-css-variable(radio-#{$type-name}-default-caption);
+        color: var(--kbq-radio-#{$type-name}-default-caption);
     }
 
     &:hover {
@@ -43,11 +43,11 @@
 
         & .kbq-radio-label {
             cursor: default;
-            color: kbq-css-variable(radio-#{$type-name}-states-disabled-caption);
+            color: var(--kbq-radio-#{$type-name}-states-disabled-caption);
         }
 
         & .kbq-hint .kbq-hint__text {
-            color: kbq-css-variable(radio-#{$type-name}-states-disabled-caption);
+            color: var(--kbq-radio-#{$type-name}-states-disabled-caption);
         }
     }
 }
@@ -60,12 +60,12 @@
 
         @include kbq-radio-color(theme);
 
-        color: kbq-css-variable(foreground-contrast);
+        color: var(--kbq-foreground-contrast);
 
         &.kbq-error {
             @include kbq-radio-color(error);
 
-            color: kbq-css-variable(foreground-contrast);
+            color: var(--kbq-foreground-contrast);
         }
     }
 }

package/radio/radio.scss

@@ -7,11 +7,11 @@
     flex-direction: column;
 
     &.kbq-radio-group_normal {
-        gap: kbq-css-variable(radio-size-normal-vertical-gap);
+        gap: var(--kbq-radio-size-normal-vertical-gap);
     }
 
     &.kbq-radio-group_big {
-        gap: kbq-css-variable(radio-size-big-vertical-gap);
+        gap: var(--kbq-radio-size-big-vertical-gap);
     }
 }
 
@@ -69,16 +69,16 @@
 
         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);
+        width: var(--kbq-radio-size-normal-outer-size);
+        height: var(--kbq-radio-size-normal-outer-size);
     }
 
     .kbq-radio-button__inner-circle {
         position: relative;
         margin: auto;
 
-        width: kbq-css-variable(radio-size-normal-inner-size);
-        height: kbq-css-variable(radio-size-normal-inner-size);
+        width: var(--kbq-radio-size-normal-inner-size);
+        height: var(--kbq-radio-size-normal-inner-size);
     }
 
     .kbq-radio__text-container {
@@ -87,11 +87,11 @@
     }
 
     & .kbq-hint {
-        margin-top: kbq-css-variable(radio-size-normal-vertical-content-padding);
+        margin-top: var(--kbq-radio-size-normal-vertical-content-padding);
     }
 
     [dir='rtl'] & {
-        padding-right: kbq-css-variable(radio-size-normal-horizontal-content-padding);
+        padding-right: var(--kbq-radio-size-normal-horizontal-content-padding);
         padding-left: 0;
     }
 }
@@ -112,21 +112,21 @@
         .kbq-radio-button__outer-circle {
             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);
+            width: var(--kbq-radio-size-big-outer-size);
+            height: var(--kbq-radio-size-big-outer-size);
         }
 
         .kbq-radio-button__inner-circle {
-            width: kbq-css-variable(radio-size-big-inner-size);
-            height: kbq-css-variable(radio-size-big-inner-size);
+            width: var(--kbq-radio-size-big-inner-size);
+            height: var(--kbq-radio-size-big-inner-size);
         }
 
         & .kbq-hint {
-            margin-top: kbq-css-variable(radio-size-big-vertical-content-padding);
+            margin-top: var(--kbq-radio-size-big-vertical-content-padding);
         }
 
         [dir='rtl'] & {
-            padding-right: kbq-css-variable(radio-size-big-horizontal-content-padding);
+            padding-right: var(--kbq-radio-size-big-horizontal-content-padding);
         }
     }
 }

package/risk-level/_risk-level-theme.scss

@@ -8,17 +8,17 @@
     $base: risk-level-#{$type}-#{$sub-type}-#{$style-name};
     border: transparent;
 
-    color: kbq-css-variable(#{$base}-color);
-    background: kbq-css-variable(#{$base}-background);
+    color: var(--kbq-#{$base}-color);
+    background: var(--kbq-#{$base}-background);
 }
 
 @mixin kbq-risk-level-outline-color($type, $sub-type, $style-name) {
     $base: risk-level-#{$type}-#{$sub-type}-#{$style-name};
 
-    border-color: kbq-css-variable(#{$base}-border);
+    border-color: var(--kbq-#{$base}-border);
 
-    color: kbq-css-variable(#{$base}-color);
-    background: kbq-css-variable(#{$base}-background);
+    color: var(--kbq-#{$base}-color);
+    background: var(--kbq-#{$base}-background);
 }
 
 @mixin kbq-risk-level-theme() {

package/risk-level/risk-level.component.scss

@@ -10,11 +10,11 @@
 
     border-style: solid;
 
-    padding: kbq-css-variable(risk-level-size-padding-vertical) kbq-css-variable(risk-level-size-padding-horizontal);
+    padding: var(--kbq-risk-level-size-padding-vertical) var(--kbq-risk-level-size-padding-horizontal);
 
     border: {
-        width: kbq-css-variable(risk-level-size-border-width);
-        radius: kbq-css-variable(risk-level-size-border-radius);
+        width: var(--kbq-risk-level-size-border-width);
+        radius: var(--kbq-risk-level-size-border-radius);
     }
 }
 

package/schematics/ng-add/index.js

@@ -10,6 +10,22 @@ function noProject(project) {
     return `Unable to find project '${project}' in the workspace`;
 }
 
+const VERSIONS = {
+    ANGULAR_CDK: '^0.0.0',
+    KOOBIQ_CDK: '^0.0.0',
+    KOOBIQ_ANGULAR_LUXON_ADAPTER: '^0.0.0',
+    KOOBIQ_DATE_FORMATTER: '^0.0.0',
+    KOOBIQ_DATE_ADAPTER: '^0.0.0',
+    KOOBIQ_ICONS: '^0.0.0',
+    KOOBIQ_TOKENS_BUILDER: '^0.0.0',
+    KOOBIQ_DESIGN_TOKENS: '^0.0.0',
+    MESSAGEFORMAT_CORE: '^0.0.0',
+    RADIX_NG: '^0.0.0',
+    LUXON: '^0.0.0',
+    MARKED: '^0.0.0',
+    OVERLAYSCROLLBARS: '^0.0.0',
+    NGX_HIGHLIGHTJS: '^0.0.0'
+};
 /**
  * This is executed when `ng add @koobiq/components` is run.
  * It installs all dependencies in the 'package.json' and runs 'ng-add-setup-project' schematic.
@@ -26,14 +42,15 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.6");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.1.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.1.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.2.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.2.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.2");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.2");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.1.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.6.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.6.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.7.3");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.7.3");
         utils_packageConfig.addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");
+        utils_packageConfig.addPackageToPackageJson(tree, '@radix-ng/primitives', VERSIONS.RADIX_NG);
         utils_packageConfig.addPackageToPackageJson(tree, 'luxon', "^3.4.4");
         utils_packageConfig.addPackageToPackageJson(tree, 'marked', "^9.0.0");
         utils_packageConfig.addPackageToPackageJson(tree, 'overlayscrollbars', "^2.7.3");

package/scrollbar/_scrollbar-component-theme.scss

@@ -5,21 +5,21 @@
         .os-scrollbar {
             .os-scrollbar-handle {
                 &::before {
-                    border-color: kbq-css-variable(scrollbar-thumb-default-background);
-                    background-color: kbq-css-variable(scrollbar-thumb-default-background);
+                    border-color: var(--kbq-scrollbar-thumb-default-background);
+                    background-color: var(--kbq-scrollbar-thumb-default-background);
                 }
 
                 &:hover {
                     &::before {
-                        border-color: kbq-css-variable(scrollbar-thumb-hover-background);
-                        background-color: kbq-css-variable(scrollbar-thumb-hover-background);
+                        border-color: var(--kbq-scrollbar-thumb-hover-background);
+                        background-color: var(--kbq-scrollbar-thumb-hover-background);
                     }
                 }
 
                 &:active {
                     &::before {
-                        border-color: kbq-css-variable(scrollbar-thumb-active-background);
-                        background-color: kbq-css-variable(scrollbar-thumb-active-background);
+                        border-color: var(--kbq-scrollbar-thumb-active-background);
+                        background-color: var(--kbq-scrollbar-thumb-active-background);
                     }
                 }
             }
@@ -27,17 +27,17 @@
             .os-scrollbar-track,
             .os-scrollbar-handle {
                 border-style: solid;
-                border-color: kbq-css-variable(scrollbar-track-default-border) !important;
-                background-color: kbq-css-variable(scrollbar-track-default-background);
+                border-color: var(--kbq-scrollbar-track-default-border) !important;
+                background-color: var(--kbq-scrollbar-track-default-background);
 
                 &:hover {
-                    border-color: kbq-css-variable(scrollbar-track-hover-border);
-                    background: kbq-css-variable(scrollbar-track-hover-background);
+                    border-color: var(--kbq-scrollbar-track-hover-border);
+                    background: var(--kbq-scrollbar-track-hover-background);
                 }
 
                 &:active {
-                    border-color: kbq-css-variable(scrollbar-track-active-border);
-                    background: kbq-css-variable(scrollbar-track-active-background);
+                    border-color: var(--kbq-scrollbar-track-active-border);
+                    background: var(--kbq-scrollbar-track-active-background);
                 }
             }
         }

package/scrollbar/scrollbar.component.scss

@@ -3,11 +3,11 @@
 @use './scrollbar-component-theme' as *;
 
 .kbq-scrollbar-component {
-    $scrollbar-size-thumb-width: kbq-css-variable(scrollbar-size-thumb-width);
-    $padding-vertical: kbq-css-variable(scrollbar-size-track-padding-vertical);
-    $padding-horizontal: kbq-css-variable(scrollbar-size-track-padding-horizontal);
-    $kbq-scrollbar-track-width: kbq-css-variable(scrollbar-size-track-dimension);
-    $thumb-min-height: kbq-css-variable(scrollbar-size-thumb-min-size);
+    $scrollbar-size-thumb-width: var(--kbq-scrollbar-size-thumb-width);
+    $padding-vertical: var(--kbq-scrollbar-size-track-padding-vertical);
+    $padding-horizontal: var(--kbq-scrollbar-size-track-padding-horizontal);
+    $kbq-scrollbar-track-width: var(--kbq-scrollbar-size-track-dimension);
+    $thumb-min-height: var(--kbq-scrollbar-size-thumb-min-size);
     $border-width: calc(($kbq-scrollbar-track-width - $scrollbar-size-thumb-width) / 4);
 
     .os-scrollbar-vertical {
@@ -59,7 +59,7 @@
         .os-scrollbar-handle::before,
         .os-scrollbar-track {
             box-sizing: border-box;
-            border-radius: kbq-css-variable(scrollbar-size-thumb-border-radius);
+            border-radius: var(--kbq-scrollbar-size-thumb-border-radius);
         }
 
         .os-scrollbar-track {

package/select/_select-theme.scss

@@ -4,38 +4,38 @@
 
 @mixin kbq-select-theme() {
     .kbq-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-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);
         }
     }
 
     .kbq-select__search-container {
-        border-bottom-color: kbq-css-variable(divider-color);
+        border-bottom-color: var(--kbq-divider-color);
     }
 
     .kbq-select__no-options-message {
-        color: kbq-css-variable(foreground-text-less-contrast);
+        color: var(--kbq-foreground-text-less-contrast);
     }
 }
 

package/select/select.scss

@@ -20,8 +20,8 @@
     @extend %kbq-select-content;
 
     &:not(:has(> .kbq-select__no-options-message)) .cdk-virtual-scroll-viewport {
-        min-height: kbq-css-variable(select-panel-size-max-height);
-        max-height: kbq-css-variable(select-panel-size-max-height);
+        min-height: var(--kbq-select-panel-size-max-height);
+        max-height: var(--kbq-select-panel-size-max-height);
 
         &.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
             max-width: 100%;

package/sidepanel/_sidepanel-theme.scss

@@ -2,17 +2,17 @@
 
 @mixin kbq-sidepanel-theme() {
     .kbq-sidepanel-title {
-        color: kbq-css-variable(sidepanel-header-text-color);
+        color: var(--kbq-sidepanel-header-text-color);
     }
 
     .kbq-sidepanel-content {
-        background-color: kbq-css-variable(sidepanel-container-background);
-        color: kbq-css-variable(sidepanel-content-text-color);
+        background-color: var(--kbq-sidepanel-container-background);
+        color: var(--kbq-sidepanel-content-text-color);
     }
 
     .kbq-sidepanel-container_shadowed {
         .kbq-sidepanel-content {
-            box-shadow: kbq-css-variable(sidepanel-container-box-shadow);
+            box-shadow: var(--kbq-sidepanel-container-box-shadow);
         }
     }
 }

package/sidepanel/sidepanel.scss

@@ -36,17 +36,17 @@
         max-width: 100%;
 
         &.kbq-sidepanel_small {
-            width: kbq-css-variable(sidepanel-size-small-width);
-            max-width: kbq-css-variable(sidepanel-size-small-width);
+            width: var(--kbq-sidepanel-size-small-width);
+            max-width: var(--kbq-sidepanel-size-small-width);
         }
 
         &.kbq-sidepanel_medium {
-            width: kbq-css-variable(sidepanel-size-medium-width);
-            max-width: kbq-css-variable(sidepanel-size-medium-width);
+            width: var(--kbq-sidepanel-size-medium-width);
+            max-width: var(--kbq-sidepanel-size-medium-width);
         }
 
         &.kbq-sidepanel_large {
-            width: kbq-css-variable(sidepanel-size-large-width);
+            width: var(--kbq-sidepanel-size-large-width);
         }
 
         .kbq-sidepanel-indent {
@@ -121,12 +121,11 @@
     flex-flow: row nowrap;
     flex: 0 0 auto;
 
-    padding: kbq-css-variable(sidepanel-size-header-padding-vertical)
-        kbq-css-variable(sidepanel-size-header-padding-right) kbq-css-variable(sidepanel-size-header-padding-vertical)
-        kbq-css-variable(sidepanel-size-header-padding-left);
+    padding: var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-right)
+        var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-left);
 
     .kbq-sidepanel-close {
-        margin-left: kbq-css-variable(sidepanel-size-close-button-margin-left);
+        margin-left: var(--kbq-sidepanel-size-close-button-margin-left);
     }
 }
 
@@ -143,11 +142,11 @@
     flex-direction: column;
     min-height: 0;
 
-    padding-right: kbq-css-variable(sidepanel-size-content-padding-horizontal);
+    padding-right: var(--kbq-sidepanel-size-content-padding-horizontal);
 
-    padding-left: kbq-css-variable(sidepanel-size-content-padding-horizontal);
+    padding-left: var(--kbq-sidepanel-size-content-padding-horizontal);
 
-    padding-bottom: kbq-css-variable(sidepanel-size-content-padding-bottom);
+    padding-bottom: var(--kbq-sidepanel-size-content-padding-bottom);
 }
 
 .kbq-sidepanel-footer {
@@ -158,9 +157,8 @@
     flex-flow: row nowrap;
     flex: 0 0 auto;
 
-    padding: kbq-css-variable(sidepanel-size-footer-padding-top)
-        kbq-css-variable(sidepanel-size-footer-padding-horizontal)
-        kbq-css-variable(sidepanel-size-footer-padding-bottom);
+    padding: var(--kbq-sidepanel-size-footer-padding-top) var(--kbq-sidepanel-size-footer-padding-horizontal)
+        var(--kbq-sidepanel-size-footer-padding-bottom);
 
     .kbq-sidepanel-actions {
         display: flex;
@@ -176,7 +174,7 @@
             justify-content: flex-end;
         }
 
-        gap: kbq-css-variable(sidepanel-size-footer-content-gap-horizontal);
+        gap: var(--kbq-sidepanel-size-footer-content-gap-horizontal);
     }
 }
 

package/splitter/_splitter-theme.scss

@@ -14,7 +14,7 @@
         }
 
         &[disabled] {
-            background-color: kbq-css-variable(background-background-disabled);
+            background-color: var(--kbq-background-background-disabled);
 
             cursor: default;
         }

package/table/_table-theme.scss

@@ -6,10 +6,10 @@
 @mixin kbq-table-theme() {
     .kbq-table {
         & > thead {
-            color: kbq-css-variable(foreground-contrast-secondary);
+            color: var(--kbq-foreground-contrast-secondary);
 
             & > tr > th {
-                border-bottom-color: kbq-css-variable(line-contrast-less);
+                border-bottom-color: var(--kbq-line-contrast-less);
             }
         }
 
@@ -17,11 +17,11 @@
             & > tr {
                 & > th,
                 & > td {
-                    color: kbq-css-variable(foreground-contrast);
+                    color: var(--kbq-foreground-contrast);
                 }
 
                 &:hover td {
-                    background-color: kbq-css-variable(states-background-transparent-hover);
+                    background-color: var(--kbq-states-background-transparent-hover);
                 }
             }
         }
@@ -30,7 +30,7 @@
             & > tbody > tr {
                 & th,
                 & td {
-                    border-bottom-color: kbq-css-variable(line-contrast-less);
+                    border-bottom-color: var(--kbq-line-contrast-less);
                 }
             }
         }