@koobiq/components 17.2.0 → 17.3.0

package/alert/_alert-theme.scss

@@ -7,14 +7,14 @@
 @mixin kbq-alert-style($component, $type, $style-name) {
     $style: map.get($component, $type, $style-name);
 
-    background: kbq-css-variable(alert-#{$type}-#{$style-name}-background, map.get($style, background));
+    background: kbq-css-variable(alert-#{$type}-#{$style-name}-container-background, map.get($style, background));
 
     .kbq-alert__title {
-        color: kbq-css-variable(alert-#{$type}-#{$style-name}-title, map.get($style, title));
+        color: kbq-css-variable(alert-#{$type}-#{$style-name}-container-title, map.get($style, title));
     }
 
     .kbq-alert__text {
-        color: kbq-css-variable(alert-#{$type}-#{$style-name}-text, map.get($style, text));
+        color: kbq-css-variable(alert-#{$type}-#{$style-name}-container-text, map.get($style, text));
     }
 }
 

package/autocomplete/_autocomplete-theme.scss

@@ -8,7 +8,7 @@
     $select-panel: map.get(map.get($theme, components), select-panel);
 
     .kbq-autocomplete-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));
     }
 }

package/badge/_badge-theme.scss

@@ -6,22 +6,23 @@
 
 @mixin kbq-badge-style($component, $type, $sub-type, $style-name) {
     $style: map.get($component, $type, $sub-type, $style-name);
+    $base-path: badge-#{$type}-#{$sub-type}-#{$style-name};
 
-    color: kbq-css-variable(badge-#{$type}-#{$sub-type}-#{$style-name}-color, map.get($style, color));
-    background: kbq-css-variable(badge-#{$type}-#{$sub-type}-#{$style-name}-background, map.get($style, background));
+    color: kbq-css-variable(#{$base-path}-color, map.get($style, color));
+    background: kbq-css-variable(#{$base-path}-background, map.get($style, background));
 
     & .kbq-badge-caption {
-        color: kbq-css-variable(badge-#{$type}-#{$sub-type}-#{$style-name}-caption, map.get($style, caption));
+        color: kbq-css-variable(#{$base-path}-caption, map.get($style, caption));
     }
 
     & .kbq-icon {
-        color: kbq-css-variable(badge-#{$type}-#{$sub-type}-#{$style-name}-icon, map.get($style, icon)) !important;
+        color: kbq-css-variable(#{$base-path}-icon, map.get($style, icon)) !important;
     }
 
     @if $type == filled {
         border: transparent;
     } @else {
-        border-color: kbq-css-variable(badge-#{$type}-#{$sub-type}-#{$style-name}-border, map.get($style, border));
+        border-color: kbq-css-variable(#{$base-path}-border, map.get($style, border));
     }
 }
 

package/button/_button-theme.scss

@@ -88,11 +88,11 @@
 
         &.kbq-button_transparent {
             &.kbq-theme {
-                @include kbq-button-type($button, transparent, theme);
+                @include kbq-button-type($button, transparent, theme-fade-on);
             }
 
             &.kbq-contrast {
-                @include kbq-button-type($button, transparent, contrast);
+                @include kbq-button-type($button, transparent, contrast-fade-on);
             }
         }
 
@@ -100,7 +100,7 @@
         &.kbq-button_outline,
         &.kbq-button_transparent {
             &.cdk-keyboard-focused {
-                $focused-color: map.get($theme, states, focused-color);
+                $focused-color: kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
                 outline: 1px solid $focused-color;
                 border-color: $focused-color;
             }
@@ -116,7 +116,7 @@
 
     .kbq-button-icon.kbq-button-wrapper {
         .kbq-icon {
-            line-height: kbq-line-height($config, body);
+            @include kbq-css-font-variable(typography, body, line-height, '');
         }
     }
 }

package/button-toggle/_button-toggle-theme.scss

@@ -62,7 +62,10 @@
                 }
 
                 &.cdk-keyboard-focused {
-                    border-color: map.get($button, focused);
+                    border-color: kbq-css-variable(
+                        button-toggle-item-states-focused-outline,
+                        map.get($button, focused)
+                    );
                 }
             }
         }

package/checkbox/_checkbox-theme.scss

@@ -30,18 +30,21 @@
     &:hover,
     &.kbq-hover {
         .kbq-checkbox__frame {
-            border-color: kbq-css-variable(#{$base}-hover-border, map.get($style, hover, border));
+            border-color: kbq-css-variable(#{$base}-states-hover-border, map.get($style, hover, border));
 
-            background-color: kbq-css-variable(#{$base}-hover-background, map.get($style, hover, background));
+            background-color: kbq-css-variable(#{$base}-states-hover-background, map.get($style, hover, background));
         }
     }
 
     &.kbq-checked,
     &.kbq-indeterminate {
         .kbq-checkbox__frame {
-            border-color: kbq-css-variable(#{$base}-checked-border, map.get($style, checked, border));
+            border-color: kbq-css-variable(#{$base}-states-checked-border, map.get($style, checked, border));
 
-            background-color: kbq-css-variable(#{$base}-checked-background, map.get($style, checked, background));
+            background-color: kbq-css-variable(
+                #{$base}-states-checked-background,
+                map.get($style, checked, background)
+            );
         }
     }
 
@@ -50,10 +53,13 @@
         &:hover,
         &.kbq-hover {
             .kbq-checkbox__frame {
-                border-color: kbq-css-variable(#{$base}-hover-border, map.get($style, checked-hover, border));
+                border-color: kbq-css-variable(
+                    #{$base}-states-checked-hover-border,
+                    map.get($style, checked-hover, border)
+                );
 
                 background-color: kbq-css-variable(
-                    #{$base}-hover-background,
+                    #{$base}-states-checked-hover-background,
                     map.get($style, checked-hover, background)
                 );
             }
@@ -61,41 +67,53 @@
 
         & .kbq-checkbox-input.cdk-keyboard-focused {
             + .kbq-checkbox__frame {
-                border-color: kbq-css-variable(#{$base}-focused-border, map.get($style, checked-focused, border));
+                border-color: kbq-css-variable(
+                    #{$base}-states-checked-focused-border,
+                    map.get($style, checked-focused, border)
+                );
                 background-color: kbq-css-variable(
-                    #{$base}-focused-background,
+                    #{$base}-states-checked-focused-background,
                     map.get($style, checked-focused, background)
                 );
-                outline: kbq-css-variable(#{$base}-focused-outline, map.get($style, checked-focused, outline));
+                outline: kbq-css-variable(
+                    #{$base}-states-checked-focused-outline,
+                    map.get($style, checked-focused, outline)
+                );
             }
         }
     }
 
     & .kbq-checkbox-input.cdk-keyboard-focused {
         + .kbq-checkbox__frame {
-            border-color: kbq-css-variable(#{$base}-focused-border, map.get($style, focused, border));
-            background-color: kbq-css-variable(#{$base}-focused-background, map.get($style, focused, background));
-            outline: kbq-css-variable(#{$base}-focused-outline, map.get($style, focused, outline));
+            border-color: kbq-css-variable(#{$base}-states-focused-border, map.get($style, focused, border));
+            background-color: kbq-css-variable(
+                #{$base}-states-focused-background,
+                map.get($style, focused, background)
+            );
+            outline: kbq-css-variable(#{$base}-states-focused-outline, map.get($style, focused, outline));
         }
     }
 
     &.kbq-disabled {
         .kbq-checkbox__frame {
-            border-color: kbq-css-variable(#{$base}-disabled-border, map.get($style, disabled, border));
-            background-color: kbq-css-variable(#{$base}-disabled-background, map.get($style, disabled, background));
+            border-color: kbq-css-variable(#{$base}-states-disabled-border, map.get($style, disabled, border));
+            background-color: kbq-css-variable(
+                #{$base}-states-disabled-background,
+                map.get($style, disabled, background)
+            );
 
             & .kbq-checkbox-checkmark,
             & .kbq-checkbox-mixedmark {
-                color: kbq-css-variable(#{$base}-disabled-color, map.get($style, disabled, color));
+                color: kbq-css-variable(#{$base}-states-disabled-color, map.get($style, disabled, color));
             }
         }
 
         & .kbq-hint .kbq-hint__text {
-            color: kbq-css-variable(#{$base}-disabled-caption, map.get($style, disabled, caption));
+            color: kbq-css-variable(#{$base}-states-disabled-caption, map.get($style, disabled, caption));
         }
 
         .kbq-checkbox-label {
-            color: kbq-css-variable(#{$base}-disabled-text, map.get($style, disabled, text));
+            color: kbq-css-variable(#{$base}-states-disabled-text, map.get($style, disabled, text));
         }
     }
 }

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

@@ -5,6 +5,10 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
+@function kbq-code-block-hljs-attr($attr, $hljs) {
+    @return kbq-css-variable(code-block-hljs-#{$attr}, map.get($hljs, $attr));
+}
+
 @mixin kbq-code-block-style($component, $style-name) {
     $style: map.get($component, $style-name);
     $base: code-block-#{$style-name};
@@ -13,11 +17,11 @@
 
     & .kbq-tab-header {
         background: kbq-css-variable(#{$base}-header-background, map.get($style, header, background)) !important;
-        border-color: kbq-css-variable(#{$base}-container-border, map.get($style, container, border));
+        border-color: kbq-css-variable(#{$base}-container-border-color, map.get($style, container, border));
     }
 
     .kbq-tab-body__wrapper {
-        border-color: kbq-css-variable(#{$base}-container-border, map.get($style, container, border));
+        border-color: kbq-css-variable(#{$base}-container-border-color, map.get($style, container, border));
     }
 
     &:not(.kbq-code-block_no-header) {
@@ -84,262 +88,262 @@
             overflow-x: auto;
 
             &-addition {
-                background-color: map.get($hljs, addition-background);
-                color: map.get($hljs, addition-color);
+                background-color: kbq-code-block-hljs-attr(addition-background, $hljs);
+                color: kbq-code-block-hljs-attr(addition-color, $hljs);
             }
 
             &-attr {
-                background-color: map.get($hljs, attr-background);
-                color: map.get($hljs, attr-color);
+                background-color: kbq-code-block-hljs-attr(attr-background, $hljs);
+                color: kbq-code-block-hljs-attr(attr-color, $hljs);
             }
 
             &-attribute {
-                background-color: map.get($hljs, attribute-background);
-                color: map.get($hljs, attribute-color);
+                background-color: kbq-code-block-hljs-attr(attribute-background, $hljs);
+                color: kbq-code-block-hljs-attr(attribute-color, $hljs);
             }
 
             &-built_in {
-                background-color: map.get($hljs, built_in-background);
-                color: map.get($hljs, built_in-color);
+                background-color: kbq-code-block-hljs-attr(built_in-background, $hljs);
+                color: kbq-code-block-hljs-attr(built_in-color, $hljs);
             }
 
             &-bullet {
-                background-color: map.get($hljs, bullet-background);
-                color: map.get($hljs, bullet-color);
+                background-color: kbq-code-block-hljs-attr(bullet-background, $hljs);
+                color: kbq-code-block-hljs-attr(bullet-color, $hljs);
             }
 
             &-char-escape {
-                background-color: map.get($hljs, char-escape-background);
-                color: map.get($hljs, char-escape-color);
+                background-color: kbq-code-block-hljs-attr(char-escape-background, $hljs);
+                color: kbq-code-block-hljs-attr(char-escape-color, $hljs);
             }
 
             &-class {
-                background-color: map.get($hljs, class-background);
-                color: map.get($hljs, class-color);
+                background-color: kbq-code-block-hljs-attr(class-background, $hljs);
+                color: kbq-code-block-hljs-attr(class-color, $hljs);
             }
 
             &-code {
-                background-color: map.get($hljs, code-background);
-                color: map.get($hljs, code-color);
+                background-color: kbq-code-block-hljs-attr(code-background, $hljs);
+                color: kbq-code-block-hljs-attr(code-color, $hljs);
             }
 
             &-comment {
-                background-color: map.get($hljs, comment-background);
-                color: map.get($hljs, comment-color);
+                background-color: kbq-code-block-hljs-attr(comment-background, $hljs);
+                color: kbq-code-block-hljs-attr(comment-color, $hljs);
             }
 
             &-deletion {
-                background-color: map.get($hljs, deletion-background);
-                color: map.get($hljs, deletion-color);
+                background-color: kbq-code-block-hljs-attr(deletion-background, $hljs);
+                color: kbq-code-block-hljs-attr(deletion-color, $hljs);
             }
 
             &-doctag {
-                background-color: map.get($hljs, doctag-background);
-                color: map.get($hljs, doctag-color);
+                background-color: kbq-code-block-hljs-attr(doctag-background, $hljs);
+                color: kbq-code-block-hljs-attr(doctag-color, $hljs);
             }
 
             &-emphasis {
-                background-color: map.get($hljs, emphasis-background);
-                color: map.get($hljs, emphasis-color);
+                background-color: kbq-code-block-hljs-attr(emphasis-background, $hljs);
+                color: kbq-code-block-hljs-attr(emphasis-color, $hljs);
             }
 
             &-formula {
-                background-color: map.get($hljs, formula-background);
-                color: map.get($hljs, formula-color);
+                background-color: kbq-code-block-hljs-attr(formula-background, $hljs);
+                color: kbq-code-block-hljs-attr(formula-color, $hljs);
             }
 
             &-function {
-                background-color: map.get($hljs, function-background);
-                color: map.get($hljs, function-color);
+                background-color: kbq-code-block-hljs-attr(function-background, $hljs);
+                color: kbq-code-block-hljs-attr(function-color, $hljs);
             }
 
             &-keyword {
-                background-color: map.get($hljs, keyword-background);
-                color: map.get($hljs, keyword-color);
+                background-color: kbq-code-block-hljs-attr(keyword-background, $hljs);
+                color: kbq-code-block-hljs-attr(keyword-color, $hljs);
             }
 
             &-link {
-                background-color: map.get($hljs, link-background);
-                color: map.get($hljs, link-color);
+                background-color: kbq-code-block-hljs-attr(link-background, $hljs);
+                color: kbq-code-block-hljs-attr(link-color, $hljs);
             }
 
             &-literal {
-                background-color: map.get($hljs, literal-background);
-                color: map.get($hljs, literal-color);
+                background-color: kbq-code-block-hljs-attr(literal-background, $hljs);
+                color: kbq-code-block-hljs-attr(literal-color, $hljs);
             }
 
             &-meta {
-                background-color: map.get($hljs, meta-background);
-                color: map.get($hljs, meta-color);
+                background-color: kbq-code-block-hljs-attr(meta-background, $hljs);
+                color: kbq-code-block-hljs-attr(meta-color, $hljs);
             }
 
             &-meta-keyword {
-                background-color: map.get($hljs, meta-keyword-background);
-                color: map.get($hljs, meta-keyword-color);
+                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: map.get($hljs, meta-string-background);
-                color: map.get($hljs, meta-string-color);
+                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: map.get($hljs, meta-prompt-background);
-                color: map.get($hljs, meta-prompt-color);
+                background-color: kbq-code-block-hljs-attr(meta-prompt-background, $hljs);
+                color: kbq-code-block-hljs-attr(meta-prompt-color, $hljs);
             }
 
             &-name {
-                background-color: map.get($hljs, name-background);
-                color: map.get($hljs, name-color);
+                background-color: kbq-code-block-hljs-attr(name-background, $hljs);
+                color: kbq-code-block-hljs-attr(name-color, $hljs);
             }
 
             &-number {
-                background-color: map.get($hljs, number-background);
-                color: map.get($hljs, number-color);
+                background-color: kbq-code-block-hljs-attr(number-background, $hljs);
+                color: kbq-code-block-hljs-attr(number-color, $hljs);
             }
 
             &-operator {
-                background-color: map.get($hljs, operator-background);
-                color: map.get($hljs, operator-color);
+                background-color: kbq-code-block-hljs-attr(operator-background, $hljs);
+                color: kbq-code-block-hljs-attr(operator-color, $hljs);
             }
 
             &-params {
-                background-color: map.get($hljs, params-background);
-                color: map.get($hljs, params-color);
+                background-color: kbq-code-block-hljs-attr(params-background, $hljs);
+                color: kbq-code-block-hljs-attr(params-color, $hljs);
             }
 
             &-property {
-                background-color: map.get($hljs, property-background);
-                color: map.get($hljs, property-color);
+                background-color: kbq-code-block-hljs-attr(property-background, $hljs);
+                color: kbq-code-block-hljs-attr(property-color, $hljs);
             }
 
             &-punctuation {
-                background-color: map.get($hljs, punctuation-background);
-                color: map.get($hljs, punctuation-color);
+                background-color: kbq-code-block-hljs-attr(punctuation-background, $hljs);
+                color: kbq-code-block-hljs-attr(punctuation-color, $hljs);
             }
 
             &-quote {
-                background-color: map.get($hljs, quote-background);
-                color: map.get($hljs, quote-color);
+                background-color: kbq-code-block-hljs-attr(quote-background, $hljs);
+                color: kbq-code-block-hljs-attr(quote-color, $hljs);
             }
 
             &-regexp {
-                background-color: map.get($hljs, regexp-background);
-                color: map.get($hljs, regexp-color);
+                background-color: kbq-code-block-hljs-attr(regexp-background, $hljs);
+                color: kbq-code-block-hljs-attr(regexp-color, $hljs);
             }
 
             &-section {
-                background-color: map.get($hljs, section-background);
-                color: map.get($hljs, section-color);
+                background-color: kbq-code-block-hljs-attr(section-background, $hljs);
+                color: kbq-code-block-hljs-attr(section-color, $hljs);
             }
 
             &-selector-attr {
-                background-color: map.get($hljs, selector-attr-background);
-                color: map.get($hljs, selector-attr-color);
+                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: map.get($hljs, selector-class-background);
-                color: map.get($hljs, selector-class-color);
+                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: map.get($hljs, selector-id-background);
-                color: map.get($hljs, selector-id-color);
+                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: map.get($hljs, selector-pseudo-background);
-                color: map.get($hljs, selector-pseudo-color);
+                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: map.get($hljs, selector-tag-background);
-                color: map.get($hljs, selector-tag-color);
+                background-color: kbq-code-block-hljs-attr(selector-tag-background, $hljs);
+                color: kbq-code-block-hljs-attr(selector-tag-color, $hljs);
             }
 
             &-string {
-                background-color: map.get($hljs, string-background);
-                color: map.get($hljs, string-color);
+                background-color: kbq-code-block-hljs-attr(string-background, $hljs);
+                color: kbq-code-block-hljs-attr(string-color, $hljs);
             }
 
             &-strong {
-                background-color: map.get($hljs, strong-background);
-                color: map.get($hljs, strong-color);
+                background-color: kbq-code-block-hljs-attr(strong-background, $hljs);
+                color: kbq-code-block-hljs-attr(strong-color, $hljs);
             }
 
             &-subst {
-                background-color: map.get($hljs, subst-background);
-                color: map.get($hljs, subst-color);
+                background-color: kbq-code-block-hljs-attr(subst-background, $hljs);
+                color: kbq-code-block-hljs-attr(subst-color, $hljs);
             }
 
             &-symbol {
-                background-color: map.get($hljs, symbol-background);
-                color: map.get($hljs, symbol-color);
+                background-color: kbq-code-block-hljs-attr(symbol-background, $hljs);
+                color: kbq-code-block-hljs-attr(symbol-color, $hljs);
             }
 
             &-tag {
-                background-color: map.get($hljs, tag-background);
-                color: map.get($hljs, tag-color);
+                background-color: kbq-code-block-hljs-attr(tag-background, $hljs);
+                color: kbq-code-block-hljs-attr(tag-color, $hljs);
             }
 
             &-template-tag {
-                background-color: map.get($hljs, template-tag-background);
-                color: map.get($hljs, template-tag-color);
+                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: map.get($hljs, template-variable-background);
-                color: map.get($hljs, template-variable-color);
+                background-color: kbq-code-block-hljs-attr(template-variable-background, $hljs);
+                color: kbq-code-block-hljs-attr(template-variable-color, $hljs);
             }
 
             &-title {
-                background-color: map.get($hljs, title-background);
-                color: map.get($hljs, title-color);
+                background-color: kbq-code-block-hljs-attr(title-background, $hljs);
+                color: kbq-code-block-hljs-attr(title-color, $hljs);
             }
 
             &-title-class {
-                background-color: map.get($hljs, title-class-background);
-                color: map.get($hljs, title-class-color);
+                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: map.get($hljs, title-class-inherited-background);
-                color: map.get($hljs, title-class-inherited-color);
+                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: map.get($hljs, title-function-background);
-                color: map.get($hljs, title-function-color);
+                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: map.get($hljs, title-function-invoke-background);
-                color: map.get($hljs, title-function-invoke-color);
+                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: map.get($hljs, type-background);
-                color: map.get($hljs, type-color);
+                background-color: kbq-code-block-hljs-attr(type-background, $hljs);
+                color: kbq-code-block-hljs-attr(type-color, $hljs);
             }
 
             &-variable {
-                background-color: map.get($hljs, variable-background);
-                color: map.get($hljs, variable-color);
+                background-color: kbq-code-block-hljs-attr(variable-background, $hljs);
+                color: kbq-code-block-hljs-attr(variable-color, $hljs);
             }
 
             &-variable-constant {
-                background-color: map.get($hljs, variable-constant-background);
-                color: map.get($hljs, variable-constant-color);
+                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: map.get($hljs, variable-language-background);
-                color: map.get($hljs, variable-language-color);
+                background-color: kbq-code-block-hljs-attr(variable-language-background, $hljs);
+                color: kbq-code-block-hljs-attr(variable-language-color, $hljs);
             }
 
             &-ln-n {
-                color: map.get($hljs, line-numbers-color);
+                color: kbq-code-block-hljs-attr(line-numbers-color, $hljs);
             }
 
             &-line-numbers {

package/core/forms/_forms.scss

@@ -18,8 +18,8 @@
     }
 
     .kbq-form-horizontal {
-        $line-height: map.get($tokens, forms-font-label-line-height);
-        $form-field-size-height: map.get($tokens, form-field-size-height);
+        $line-height: kbq-css-variable(forms-font-label-line-height, map.get($tokens, forms-font-label-line-height));
+        $form-field-size-height: kbq-css-variable(form-field-size-height, map.get($tokens, form-field-size-height));
 
         & .kbq-form-row_margin {
             margin-bottom: kbq-css-variable(forms-size-horizontal-row-margin-bottom);

package/core/option/_option-action-theme.scss

@@ -17,7 +17,7 @@
         &:active,
         &.kbq-pressed {
             & .kbq-icon {
-                color: kbq-css-variable(states-icon-contrast-fade, map.get($states, icon, contrast-fade));
+                color: kbq-css-variable(states-icon-contrast-fade-active, map.get($states, icon, contrast-fade-active));
             }
 
             background-color: kbq-css-variable(background-transparent, map.get($background, transparent));